/* Small mobile */
			@media screen and (max-width: 320px){
				.ifa_dbgrid table td, .ifa_dbgrid table th {
					padding: 1em 0.5em !important;
				} 
				
				body {
					font-size: 0.35em;
				}	
			}			

			/* Big mobile */
			@media screen and (min-width: 321px) and (max-width: 480px){
			 body {
				 font-size: 0.5em;
			 }
			 .ifa_dbgrid table td, .ifa_dbgrid table th {
				 padding: 0.5em 0.25em !important;
			 } 
			 
			}			

			/* Small tablet */
			@media screen and (min-width: 481px) and (max-width: 685px){
			 body {
				 font-size: 1em;
			 }
			 .ifa_dbgrid table td, .ifa_dbgrid table th {
				 padding: 0.5em 0.25em !important;
			 } 
			 
			}			

			/* Bigger tablet */
			@media screen and (min-width: 685px) and (max-width: 765px){
			 body {
				 font-size: 1.1em;
			 }
			 .ifa_dbgrid table td, .ifa_dbgrid table th {
				 padding: 0.5em 0.25em !important;
			 } 
			 
			}			

			/* Small desktop */
			@media screen and (min-width: 766px) and (max-width: 1200px){
			 body {
				 font-size: 1.2em;
			 }
			 .ifa_dbgrid table td, .ifa_dbgrid table th {
				 padding: 0.5em 0.25em !important;
			 } 
			 
			}			

			/* Bigger desktops */
			@media screen and (min-width: 1201px){
			 body {
				 font-size: 1.25em;
			 }
			 .ifa_dbgrid table td, .ifa_dbgrid table th {
				 padding: 0.5em 0.25em !important;
			 } 
			 
			}			

			/* Up to bigger desktops */
			@media screen and (max-width: 1200px){
				#ifa_bkg_img {
					display: none;
				}	
			}	


			/* Across different widget types ===============================================================*/

			/* All the ifa_ fieldsets ------------------------------------------------------- */
			fieldset[class^=ifa_] {
				vertical-align: top;					
				margin: 0 0 2em 0;
				padding: 1em;
				border: 1px solid black;
				display: inline-block;
			}	
						
			fieldset[class^=ifa_] legend {
				white-space: nowrap;
				padding-right: 0.15em;
				user-select: none;
			}	
			
			fieldset[class^=ifa_] legend div{
				display: inline-block;
				text-align: start;
				margin-bottom: 0.5em;
			}
			
			fieldset[class^=ifa_] label {
				white-space: nowrap;
			}
			
			/* "Clearfix" solution forces the ifa_container to expand vertically so 
				that it contains for any floated child-elements (IE >= 8)*/			
			.ifa_container:after {
				content: "";
				display: table;
				clear: both;
			}

			input[type=text]
			, input[type=number] {
			  height: 1.3em;	
			}
			
			.ifa_selected {
				color: yellow;
				background-color: #333333;
			}	
			
			.ifa_selected:hover {
				color: yellow;
				background-color: #333333;
			}	
			
			.ifa_userinfo {
				margin-left: 0.15em;
				color: rgb(0, 50, 150);
			}	

			/* Data loading ------------------------------------------------------- */
			.ifa_wait {
				opacity: 0.5;				
			}
			
			.ifa_wait
			, .ifa_wait [class^=ifa_] {
				cursor: progress;	
			}
			
			/* Collapse stuff ------------------------------------------------------- */	
			.ifa_up > legend {
				display: block;
			}
			
			.ifa_up > *:not(legend) {
				display: none !important;
			}
			
			.ifa_down > legend .ifa_updown::after {
				content: " \25B3";  /* Up Arrow */ 
				font-size: 0.8em;
				font-weight: bold;
				line-height: 0.6em;
			}
			
			.ifa_up > legend .ifa_updown::after {
				content: " \25BD"; /* Down arrow */
				font-size: 0.8em;
				font-weight: bold;
				line-height: 0.6em;
			}	
/*
			 .ifa_data_input:not(:empty) ~ legend .ifa_updown::after {
				content: " \25BC"; 
			}	
*/
			
			/* Hiding stuff ------------------------------------------------------- */
			.ifa_hide {
				display: none !important;
			}	
			
			/* Specific widget types ================================================================*/			

			.ifa_checkboxes {
				text-align: start;
			}
			
			.ifa_checkbox {
				display: inline-block;
				margin-bottom: 0.5em;
			}
			
			.ifa_checkbox input {
				display: none;				
			} 

			.ifa_checkbox input:checked  + .ifa_prelabel:after  
			, .ifa_checkbox input:checked  + .ifa_postlabel:before 
			{
				content: "\2713";
				font-size: 1em;
				text-align: center;
				line-height: 1em;				
			}
		
			.ifa_checkbox label {
				display: inline-block;
				cursor: pointer;
				position: relative;
			}

			.ifa_checkbox .ifa_prelabel:after
			, .ifa_checkbox .ifa_postlabel:before {
				content: "";
				display: inline-block;
				width: 1em;
				height: 1em;
				position: absolute;
				bottom: 1px; 
				background-color: rgb(255, 255, 255);
				border-radius: 0.125em;
				border: 1px solid;
			}
			
			.ifa_checkbox label:before {
				left: 0;				
			}	

			.ifa_checkbox label:after {
				right: 0;				
			}	

			.ifa_dbgrid .ifa_sort_asc::after
			{
				content: " \25BD";
			}	
			
			.ifa_dbgrid .ifa_sort_desc::after
			{
				content: " \25B3";
			}	
			
			.ifa_prelabel {
				padding-left: 0;
				padding-right: 2.5em;
			}
				
			.ifa_postlabel {
				padding-left: 2.5em;
				padding-right: 0;
			}

			/* ComboBoxes ------------------------------------------------------- */
			.ifa_combobox {
				display: inline-block;	
				text-align: start;				
			}
			
			.ifa_combobox input[type=text] {
				padding-right: 1em;
			}
			.ifa_combobox ul, .ifa_date ul {
				position: absolute;			
				background-color: white;
				border: 1px solid #333333;
				z-index: 1;
			}
			
			.ifa_combobox li, .ifa_date li {
				padding: 1px;				
			}

			.ifa_combobox li:focus, .ifa_date li:focus {
				background-color: red;
				color: ivory;
			}
			
			.ifa_combo_drop {
				position: relative;
				left: -1.25em;
			}
			
			/* Dates ------------------------------------------------------- */
			.ifa_date div, .ifa_fuzzy_date div {
				display: inline-block;
				vertical-align: top;
				text-align: right;
				padding: 0 0.25em 0 0;
			}
			
.ifa_fuzzy_date_2 div {
	display: inline-block;
	padding: 0 0.25em 0 0;
	text-align: left;	
	vertical-align: top;
}	

.ifa_fuzzy_date_2 .ifa_date_inputs {
	margin-bottom: 0.5em;
}
	
.ifa_fuzzy_date_2 .ifa_date_inputs div {
	float: none;
	display: inline-block;
}	

.ifa_fuzzy_date_2 .ifa_day {
	width: 2em;
}	
			
.ifa_fuzzy_date_2 .ifa_month {
	width: 2.5em;
}	

.ifa_fuzzy_date_2 .ifa_month input {
	width: 2em;
}	

			
.ifa_fuzzy_date_2 .ifa_year 
, .ifa_fuzzy_date_2 #Age_txt 
, .ifa_fuzzy_date_2 #Dod_period_txt {
	width: 3em;
}	

.ifa_fuzzy_date_2 input[type="text"] {
	padding-right: inherit;
	text-align: left;
}
			
			.ifa_date div input,
			.ifa_fuzzy_date div input {
				text-align: right;				
			}
/*			
			.ifa_date ul,
			.ifa_fuzzy_date ul  {
				margin: 0 1px;
			}
*/			
			.ifa_date input[type=text],
			.ifa_fuzzy_date input[type=text]  {
				padding-right: 1em;
			}
			
			.ifa_day input
/*			, .ifa_day ul */
			, .ifa_month input 
/*			, .ifa_month ul */
			{ 
				width: 1.5em;
			}			
			
			.ifa_year input
/*			, .ifa_year ul */
			{
				width: 2.5em;
			}	

			.ifa_day ul {
				width: 2em;
				margin-left: 0.15em;
				max-height: 10em;
				overflow-y: scroll;	
			}	
			
			.ifa_month ul {
				margin-left: 0.15em;
				width: 1.5em;
/*				height: 13.5em; */
			}	
			
			.ifa_year ul {
				margin-left: 0.15em;
				max-height: 10em;
				overflow-y: scroll;	
				width: 3.5em;
			}	
			
			.ifa_day 
			, .ifa_month {
				float: left;
				width: 4em;
			}			

			.ifa_year {
				float: left;
				width: 5em;
			}
			
			fieldset[class="ifa_fuzzy_date"] input[type="number"] {
				float: left;
				width: 3em;		
			}			
			
			/* Image Inputs ------------------------------------------------------- */
			.ifa_imgpreview {
				display: block;
				margin: 1.5em 0 0.5em;
				max-width: 30em;
				max-height: 20em;
			}	
			
			/* ListViews ------------------------------------------------------- */
			.ifa_listview a {
				display: inline-block;
				width: 100%;
				text-decoration: none;
				color: inherit;			
			}

			.ifa_listview li:hover
			, .ifa_date li:hover 
			, .ifa_combobox li:hover {
				background-color: #333333;
				color: yellow;
			}	
			
			.ifa_listview li {
				border-top: 1px solid transparent;
				border-right: 1px solid transparent;
				border-bottom: 1px solid ivory;
				border-left: 1px solid transparent;
				overflow: hidden;
				height: 1.2em;
				padding: 0.2em 0.2em 0 0.2em;
				text-align: left;				
				white-space: nowrap;
			}

			.ifa_listview .ifa_scroller {
				max-height: 20em;
				overflow-y: scroll;
				float: left;
				margin: 0 0.5em;
			}	
			
			/* Memos ------------------------------------------------------- */
			.ifa_memo textarea {
				resize: none;
				width: 97.5%;
			}

			/* Ranges ------------------------------------------------------- */
			.ifa_dbg_navbar input[type=range]	{
				background-color: transparent;
				height: 0.5em;
				margin: 0;
			}	
						
			/* Text & Number Inputs ------------------------------------------------------- */
			.ifa_textinput 
			, .ifa_number {
				display: inline-block;
			}	

			.ifa_combobox label 
			, .ifa_textinput label 
			, .ifa_number label 
			, .ifa_select label 
			, .ifa_memo label 
			, .ifa_fuzzy_date label 
			{
				display: inline-block;
				margin-right: 1em;
			}				
			
.ifa_memo label {
	vertical-align: top;
	padding-top: 0.15em;
}
	
			.ifa_number input {
				width: 4em;
			}
			
			/* Button & File Inputs ---------------------------------------------- */
			.ifa_button,
			.ifa_file_input{
				border: 1px solid;
				color: darkblue;
				cursor: pointer;
				background-color: rgb(245,245,245);
				font-size: 0.8em;
				padding: 0.25em;
			}
			
			/* DBGrids ----------------------------------------------------------- */			
			.ifa_dbgrid table {
				width: 100%;
			}

			.ifa_dbg_navbar {
				float: left;
				margin: 0 0.5em 0 0;
			}	

			.ifa_dbg_filter {
				float: right;
				margin: 0 0 0 0.5em;
			}	

			.ifa_dbg_no_controls {
				height: 0.5em;
			}
				
			.ifa_dbgrid thead {
				cursor: pointer;
			}
				
			.ifa_dbgrid input[type=range] {
				cursor: grab;
			}	
			
			.ifa_dbgrid td a {
				display: inline-block;
				width: 100%;
				height: 100%;
			}
			
			/* Dialog & Loader screen overlays ----------------------------------- */
			#ifa_dialog_screen
			, #ifa_loader_screen {
				background-color: rgb(50, 50, 50);
				height: 100%;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
			}			

			#ifa_dialog_screen {
				background-color: rgba(50, 50, 50, 0.3);
				display: none;
				z-index: 1001;
			}
			
			#ifa_dialog_box {
				max-width: 90%;
				position: relative;
				text-align: center;			
			}	
			
			#ifa_dialog_box table {
				margin: auto;
				background-color: white;
			}
			
			#ifa_dialog_box #msg {
				margin: 1em 0.5em 0.5em 0.5em;
			}

			#ifa_dialog_box #msg p {
				margin-bottom: 0.5em;
			}	
			
			#ifa_dialog_box #buttons {
				margin: 0.5em 0.5em 1em 0.5em;
			}
			
			#ifa_dialog_box .ifa_button {
				margin: 0 0.5em;
				min-width: 3em;
			}	
			
			#ifa_loader_screen {
				background-color: rgba(250, 250, 250, 0.75);
				display: block;
				z-index: 1000;
			}

			#ifa_loader {
				color:ivory;
				font-size: 4em;
				left: 47%; /* Old browsers */
				left: calc(50% - 0.5em);
				padding: 0 0 0.15em;
				position: absolute;
				top: 47%; /* Old browsers */
				top: calc(50% - 0.5em); 
			}	
			
			#ifa_loader #spinner {
				animation-duration: 0.75s;				
				animation-timing-function: linear;				
				animation-iteration-count: infinite;
				animation-name: rotateit;				
			}		
			
			@keyframes rotateit {
				from { transform: rotate(0deg);	}
				to { transform: rotate(360deg); }
			}
			
			#ifa_loader img {
				width: 0.75em;
				height: 0.75em;
				position: absolute;
			}	

			#ifa_menupage h1 {
				margin: 1em 0;
			}

			.ifa_menu_item {
				cursor: pointer;
			}	

			.ifa_invalidity_msg {
				font-size: 0.75em;
				margin-left: 1em;
				color: red;
			}

			.ifa_invalid {
				border: 2px solid red;
			}

			.ifa_htmlmemo .ifa_required 
			, .ifa_memo .ifa_required {
				float: right;
			}	

			.mce-tinymce {
				float: left !important;
			}

			.ifa_required::after {
				content: "*";
				color: red;
			}	

			.ifa_required_msg {
				font-size: 0.8em;
				text-align: right;
			}	

			.ifa_required_msg .ifa_required::after {
				font-size: 1.25em;
			}