@font-face { font-family: 'CenturyGothic'; src: url('../century-gothic.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } 
:root { --gap: 8px; --item-radius: 10px; --border: 2px solid #000; --accent:#2193f3; } 
body { font-family: 'CenturyGothic', Arial, sans-serif; }

/* ##################################################################### */


   .container {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
 /*	justify-content: flex-start; /* Aligns items to the left */ 
	font-family: century-gothic;
	src: url(./century-gothic.ttf);

    }
    .item {
	margin: 2px; /* Space around items */
  /*      width: calc(11% - 8px); /* 6 items, 20% width each, subtracting margins */
	background: white;

	padding: 5px;
	border: 2px solid black; /* Adds a 2px black border */
	border-radius: 10px; /* Adds rounded corners */
/*	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); Optional: adds a subtle shadow */
	box-sizing: border-box; /* Include padding in width */
    }
/*	.item.lab {  display: visible;}  */    
    .item.mob { display: none;}
    
    .item.right-column {
	width: 3%; /* Rightmost column takes 10% of screen width */
	padding: 6px;
    }
    .item.short {
	width: 6%; /* Rightmost column takes 10% of screen width */
    }
    .item.shorti {
	width: 6% !important; /* Rightmost column takes 10% of screen width */
    }    	
    .item.wicon {
    	padding: 2px;
    	margin: 2px;
	width: 42px; /* resource icons */
	border: 2px solid white; /* Adds a 2px black border */
    }
     .item:not(.right-column):not(.short):not(.wicon) {
	width: calc(16% - 8px ); /* Adjust other items to fit within 90% width */
    } 
	.item.divider {
		display:none;
	}
    .item.full,
    .form-label {
	width: 100%;
	font-weight: 600;
	font-family: century-gothic;
    }
    .form-input {
	margin: 2px; /* Space around items */
	padding: 15px;
	border: 2px solid black; /* Add border for consistency */
	border-radius: 10px; /* Slightly rounded corners */
	box-sizing: border-box;
    }
    .form-input.short {
	width: 6%; /* For ISO input */
    }
    .form-input.medium {
      /*  width: 20%; /* For other inputs */
      width: calc(16% - 8px ); /* Adjust other items to fit within 90% width */
    }
    
    button {
	padding: 6px 12px; 
 /*	padding: 15px 15px; */
	border: 2px solid black;
	border-radius: 10px;
	background: #2193f3;
	color: white;
	cursor: pointer;
	transition: background 0.3s;
    }
    button:hover {
	background: #f0f0f0; /* Simple hover effect */
    }

	/* allow long text to wrap inside flex children */
	.container > .item { 
		min-width: 0;
		vertical-align: middle;
	}



/* stack rows and make items full-width on small screens */
@media (max-width: 800px) {
	.container {
/*		flex-direction: column;   */
		align-items: stretch;	
/*		width:100% !important	;  */
	

	}
	/* make each visual column a full-width row */
	.form-input,
	.item {
		width: 50% !important;  
		flex: 0 0 auto;
		margin: 4px 0;
	}	
	.item.lab { 
		display:none;
	}
	.item.mob { 
/*		width: 40% !important; */
		display: inline;
	}	
	.item.shorti {
		width: 50% !important;
		flex-wrap: nowrap;
		white-space: nowrap;

	} 
	.item.short {
		width: 15% !important;
		flex-wrap: nowrap;
		white-space: nowrap;

	} 
	.item.wicon {
		width: 15% !important;
		flex-wrap: nowrap;
		white-space: nowrap;

	}
	.form-input.medium {  
		width: 70%; 
		flex: 0 0 auto
		flex-wrap: nowrap 
	}

	.form-input.short {
		width: 20%; 
		flex-wrap: wrap
	}
	.button { width: 30% !pmortant;  }
	.item.divider {
		width: 100% !important;
		display: flex; 
	}


/* force the icon cells to keep their children inline and on a single line 
	.item.wicon {
		width: 20%;
		display: flex;
		gap: 8px;
		flex-wrap: nowrap;
		white-space: nowrap;
		justify-content: flex-left; /* change to center/left/end if you prefer 
	} */

/* ensure image icons don't wrap or overflow */
	.item.wicon img,
	.item.short img {
		max-width: 40px;
		height: auto;
		flex-wrap: nowrap;
		white-space: nowrap;
/*		display: inline-block; */
		
	}
    button {
    	display: flex; 
    	justify-content: center;
	padding: 6px 12px; 
 /*	padding: 15px 15px; */
	border: 2px solid black;
	border-radius: 10px;
	background: #2193f3;
	color: white;
	cursor: pointer;
	transition: background 0.3s;
    }



}