/* ################# GENERAL ################################### */
*{font-family:var(--defaultFontFamily); box-sizing: border-box;}

body,html								
{
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	height: 100%; 
	margin: 0;
	padding: 0;
	color:var(--fontColor);
	background-color:var(--color100);
}

body									
{
	height:auto; 
	overflow-x:hidden;
}


.hidden		{display:none !important;}

iframe
{
	display:block;
	border:0px;
	width:100%;
	background-color:inherit;	
	height:100%;
}

h1 
{
	font-size:22px;
	color:var(--color60);
	text-transform: uppercase;
	font-weight:bold;
	padding-left:5px;
}

h2 
{
	font-weight:bold;
	padding-left:5px;
	color:var(--fontColor);
	font-size:18px;
	text-transform: capitalize;
	color:var(--color20);
}

h2::before{content: '\25CF  ';}


hr {border:1px solid var(--color60); }



/* ################################################################################## */
/* ############################ INPUTS ############################################## */
/* ################################################################################## */

input,textarea,select,option 
{
	background-color:var(--color95);
	padding:7px;
	border:0px;
	font-size: 16px;
	outline:none;
	font-style: normal;
	font-weight: normal;
	border:1px solid var(--color90);
	color:var(--fontColor);
}

input:focus, textarea:focus, select:focus, option:focus{outline: none;}
input.error, textarea.error, select.error, option.error{background-color: var(--colorRed); color:white;}
input.success, textarea.success, select.success, option.success{background-color:var(--colorGreen); color:white;}

input[type='checkbox']	
{
	width: 25px;
	height: 25px;
	margin:0px;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
	outline:1px solid var(--color50);
}

input[type='radio']	
{
	width: 25px;
	height: 25px;
	margin:0px;	
}

input[type='checkbox']:checked
{
	-webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    border: none;
	outline:none;
}

input[type="button"]		
{
	border-radius:6px;
	min-width:200px;
	border:1px solid var(--color80);
	margin-right:10px;
	cursor:pointer;

}

input:disabled,textarea:disabled,select:disabled
{
	border:0px;
	outline:1px dashed var(--color30); 
	background-color:inherit;
	opacity:0.5;
}

input[type="button"]:disabled		
{
	pointer-events: none;
	outline:none;
	border:1px dashed var(--color30); 
}

@media (max-width: 600px) 
{
	input[type="button"] {width: 95%;margin-bottom:5px;margin-top:20px;}
}


select[multiple] option::before {
	content: "\2610";
	width: 25px;
	text-align: center;
	display: inline-block;
	font-size:22px;
  }

  select[multiple] option[selected]::before {
	content: "\2611";
	font-weight:bold;
  }

  select[multiple] option[selected]{
	font-weight:bold;
  }

  input[type='color']	
  {
		padding:0px;
		width:50%;
		cursor:pointer;
  }

  input[type="range"]	
  {
	-webkit-appearance: none;
	border-radius: 5px;
	height:3px;
	background-color:inherit;
	border:0px;
  }

  input[type="range"]::-moz-range-track {
	cursor: pointer;
	background: var(--color60);
	border-radius: 1.3px;
	border: 0px;
  }

  input[type="range"]::-moz-range-thumb {
	box-shadow: 1px 1px 1px var(--color40),0 0 1px var(--color40);
	border: 1px solid var(--color95);
	height: 25px;
	width: 25px;
	border-radius: 50%;
	background: var(--color85);
	cursor: pointer;
  }

  textarea {resize: none;min-height:100px;}
	
/* ################################################################################## */
/* ################################### FORM TABLE ################################### */
/* ################################################################################## */

table 								{width:100%;height:15px;table-layout:fixed;border:0px;margin:0px;border-spacing:0px;padding:0px;border-collapse:collapse;} 
table td							{padding: 0px;}

table.form 							{}
table.form tr						{height:50px;}
table.form td						{vertical-align:middle; position:relative;padding:5px;white-space: nowrap;overflow:hidden;padding-right:6px;text-overflow:ellipsis;}
table.form input:not([type='checkbox']):not([type='radio']):not([type='button']):not([type='color']),textarea,select{ width:95%;} 

table.form tr td:nth-child(even):not(:has(*)) {
	color:var(--color50);
	font-style: italic;
}

@media (min-width: 601px) 
{
	table.form tr td:not(.empty):nth-child(1)::before , table.form tr td:not(.empty):nth-child(3)::before {
		content: ' ';
		display: block;
		width: 95%;
		border-bottom: 1px dashed var(--color70);
		position:absolute;
		bottom:5px;
		left:0px;
	}

	table.form tr td:nth-child(odd):not(:has(+ td > *)):empty::before {
		display:none;
	}

	table.form tr:has(td:nth-child(4)) td:nth-child(odd) {
		width: 22%;
	}
	
	table.form tr:not(:has(td:nth-child(4))) td:nth-child(odd) {
		width: 50%; /* previous 40%, but nicer maybe 50%  */
	}
}

@media (max-width: 600px) 
{
	table.form			{margin:10px;width:95%;}
	table.form 			{display:inline-block;}
	table.form tbody 	{display:block;}
	table.form tr 		{display:block;height:auto;}
	table.form td 		{display:block;}
	table.form th 		{display:block;}
	table.form input:not([type='checkbox']),textarea,select 	{margin-bottom:15px;}
	table.form input[type="button"] {min-width:auto;}
	table.form input:not([type='checkbox']):not([type='button']):not([type='color']),textarea,select{ width:100%;} 

	table.form tr td:nth-child(even):not(:has(*)) {
		border:0px;
		outline:0px dashed var(--color70);
		background-color:inherit;
		margin:5px;
		margin-bottom:15px;
		padding:7px;
		color:var(--color50);
		font-style: italic;
	}

	table.form tr td:nth-child(even):empty {
		display:none;
	}
	
}

/* ################################################################################## */
/* ################################### LOADERS ###################################### */
/* ################################################################################## */

#divBodyContainer.loaderOn
{
	/* filter: blur(3px); */
	opacity:0.4;
	user-select: none; 
	pointer-events: none;
}

.lds-ring 		{color: var(--fontColor); display: inline-block;top: 50%;left: 50%;margin-right: -50%;position: fixed;width: 64px;height: 64px;overflow: hidden;transform: translate(-50%, -50%);}
.lds-ring div 	{display: block;position: absolute;width: 100%;height: 100%; margin: 0px; border: 8px solid var(--fontColor);border-radius: 50%;animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-color: var(--fontColor) transparent transparent transparent;}
.lds-ring div:nth-child(1) {animation-delay: -0.45s;}
.lds-ring div:nth-child(2) {animation-delay: -0.3s;}
.lds-ring div:nth-child(3) {animation-delay: -0.15s;}
@keyframes lds-ring {0% { transform: rotate(0deg);}100% { transform: rotate(360deg);}}

/* ################################################################################## */
/* ################################### POPOVER ###################################### */
/* ################################################################################## */

#divPopover
{
	min-height:50px;
	position: absolute;
	left: 50%;
	top:30px;
	transform: translateX(-50%);
	overflow:auto;
	z-index:1;
}

#divPopover .header
{
	text-align:right;
	padding:5px;
	border-bottom:1px solid var(--color85); 
	padding-bottom:2px;
	position:relative;	
	background-color: var(--color95);
	border-right:3px solid var(--color70);
	border-left:3px solid var(--color70);
	border-top:3px solid var(--color70);
	border-radius:10px 10px 0px 0px;
}

#divPopover .body
{
	background-color:var(--color100);
	border-bottom:3px solid var(--color70);
	border-right:3px solid var(--color70);
	border-left:3px solid var(--color70);
	border-radius:0px 0px 10px 10px ;
	padding:3px;
}

#divPopover .footer
{
	
	height:20px;
}

#divPopover .header caption
{
	position:absolute;
	top:50%;
	left:10px;
	transform: translateY(-50%);
	width: calc(100% - 60px);
	overflow:hidden;
	text-overflow:ellipsis;
	text-align:left;
	font-weight:bold;
}

@media (max-width: 600px) 
{
	#divPopover {min-width:97%;}
}

/* ################################################################################## */
/* ################################### IMAGES ####################################### */
/* ################################################################################## */

img.icon {
	cursor:pointer;
	width:40px;
	height:auto;
	user-select: none;
	display:inline-block;
}

/* ################################################################################## */
/* ################################### TABLE FORMATS ################################ */
/* ################################################################################## */

table.grid														{table-layout:fixed;}
table.grid	 td 												{vertical-align:top;border:1px solid var(--color70);white-space: nowrap;overflow:hidden;padding:2px;padding-left:3px;text-overflow: ellipsis;}
table.grid	 tr:first-child td 									{font-weight: bold; border-top:0px;}
table.grid	 tr:last-child td 									{border-bottom:0px;}
table.grid	 td:first-child 									{border-left:0px;}
table.grid	 td:last-child 										{border-right:0px;}
table.grid input:not([type='checkbox']):not([type='radio'])		{border:0px;width:90%;}
table.grid	 th 												{text-align:left;white-space: nowrap;overflow:hidden;text-overflow: ellipsis;}