/* 
** $Id$
** Grid and Flex CSS. 
** Author: Ian Hartas, 2022
*/

* 
{
/*	box-sizing: border-box; */
}

.grid-container 
{
  /* border: 1px solid red;  */
  display: grid;
  /* grid-template-columns: 50% 50%;  */
  grid-template-columns: auto; 
  align-content: start;
  /* justify-content: space-evenly;  */
  padding: 5px;
}
.grid-item 
{
  /* border: 1px solid black;  */
  padding: 5px;
  text-align: left;
}

.grid-item-bold
{
  /* border: 1px solid green;  */
  padding: 5px;
  font-weight: bold;
  text-align: left;
}

.grid-item-left-filler
{
	padding: 5px;
	grid-column: 1 / span 2;
}

.grid-item-right-filler
{
	padding: 5px;
	grid-column: 3 / span 2;
}

.grid-item-full-filler
{
	padding: 5px;
	grid-column: 1 / span 4;
}

.grid-text-small
{
	font-size: 80%;
}

.flex-container
{
   	/* border: 1px solid purple; */
	display: flex;
	flex-wrap: wrap;
	justify-content: left; 
	padding-left: 0px; 
}

.flex-container > div 
{	
}

.flex-item-left 
{
  /* background-color: #f1f1f1;  */
  padding: 0px;
}

.flex-item-right 
{
   /* background-color: dodgerblue; */ 
  padding: 0px;
}

@media (max-width: 800px)
{
	.flex-item-right, .flex-item-left 
	{
    	flex: 100%;
	}
}