/* *** General **************************************************** */

* { box-sizing: border-box; font-family: Roboto, sans-serif; font-size:15px; }

html, body, p, input, select, td, th, button { font-family: Roboto, sans-serif; font-size:15px; color: black}

body {
  padding: env(safe-area-inset-top)
           env(safe-area-inset-right)
           env(safe-area-inset-bottom)
           env(safe-area-inset-left);
}

html, body {
	margin: 0;
    padding: 0;
    height: 100%;
	width: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	font-size:15px; 
	color:#2B3440 
}

/* header: 60px, menubar : 42px; footer: 32px */

#header { 
	display: flex;
	justify-content: center; /* Centers horizontally */
	gap: 5px; /* Optional spacing between items */
	height:60px;
	width: 100%;
    background-color: #003F70;
    color: white;
	overflow: hidden;
}

#header-logo, #header-logo a, #header-logo sup { color : white; }

#header-logo {
	white-space:nowrap;
	padding: 8px 0px 0px 8px;
	display: inline-block;
	text-shadow:0.5px 0.5px 1px #101010;
	float:left;
	font-size:18pt; 
}

#contentframe { 
	position: absolute; top: 60px;
	height: calc(100vh - 92px); height: calc(100dvh - 92px);
	width: 100%;
	overflow: auto;
	background-color: #F9FFFF;
	/* background: url('/img/clouds.jpg') no-repeat; background-size: cover; */
}

#footer {
	white-space:nowrap;
	position: absolute; 
	bottom:0px; 
	width: 100%;
	height: 32px;
	background-color: #003F70;
	color: white;
	display: block;
	padding: 9px 8px 0px 8px;
}

#footermedcalc {
	padding-top:0px;
	float: right;
}

#footer button { background: transparent; border: 0; cursor: pointer;}
#footer, #footer div, #footer button, #footer a  { font-size:13px; color: white;}

#footer .verticalbarafter::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.25em;              /* matches text height */
  background: #bbb;         /* gray */
  margin-left: 8px;
  vertical-align: middle;
}


.small		{ font-size: 92%; }
.left		{ text-align: Left; }
.right		{ text-align: Right }
.center		{ text-align: Center; }
.nowrap		{ white-space: nowrap; }
.clear		{ clear: both; }  
.bold		{ font-weight: bold; }
.indent		{ margin-left: 48px; }
.shaded 	{ background-color: lightgray; }
.white		{ color: #FFFFFF; }
.warning	{ color: #CC0000; }
.grayed		{ color: #CCCCCC; }
.arg		{ color: #008000; font-weight: bold; }
.italic		{ font-family: Times, serif; font-style: italic; }
.vamiddle	{ vertical-align:middle; }
.vatop		{ vertical-align:text-top; }
.hidden		{ display:none; }
.blue		{ color: blue; }
.red		{ color: red; }
.green		{ color: green; }
.semibold 	{ text-shadow: 0.0005em 0 0 currentColor; letter-spacing: 0.001em }
.formula	{ text-align: center; margin-top:16px; margin-bottom:16px; font-family: Times, serif; font-size: 130%; text-shadow: 0.20px 0 0 currentColor; letter-spacing: 0.08px ;}

sup { font-size: 10px;}
img { max-width: 100%; }

/* *** Fix Chrome focus thick border ****************************** */

/*
textarea:focus, select:focus,
input[type="text"]:focus,input[type="password"]:focus,input[type="button"]:focus,input[type="submit"]:focus
{
	outline:1px solid blue;
}
input[type="checkbox"]:focus-visible
{
	outline:1px solid blue;
}
*/


/* *** General ********************************************************************************** */

a, a:Visited, a:Link, a:hover, a:Focus, a:Active a:hover  { color: blue /* #045699; #4283ba; */; text-decoration: none} 
a:hover { color: #FF0000 }

a.abutton { background-color: #EEEEEE; color: black; padding: 2px 16px 2px 16px; border: 1px solid #003f71; font-weight: bold; }
a.external {
	background: url("/svg/nav/external.svg") center right no-repeat;
	padding-right: 14px;
}

table { border-collapse: collapse; }
td,th { padding:0; margin:0; }

/* *** Top bar **************************************************** */

#userworldimage { border:0; padding-right:12px; float:left; position: relative; top:-8px;}

.usermenubutton { display: inline-block; vertical-align: top;  color: white; font-size: 16px; height:32px; padding: 5px 12px 0px 12px; background: #1E71A9; border:1px solid #8FC7EA; border-radius:5px; cursor:pointer; margin: 5px 4px 0px 8px}
#logoutbutton {padding-top:4px  }
#helpbutton { font-size:20px; font-weight: bold; padding-top:3px}

/* *** Wait frame ************************************************* */

#waitframe { cursor:wait; display:none; position: absolute; float:left; width:100%; height:100%; z-index:2147483647; }
#waitframe img { position: absolute; left: 30%; top: 50%; margin-top:-10px; }

/* *** Notification bar ******************************************* */

#notificationarea { border-bottom: 1px solid #808080; padding-top:8px; padding-bottom: 8px; background-color: #FFFFCC; }

/* *** Content area *********************************************** */
	

.indexpagepanel { padding-right: 36px; padding-bottom: 12px; line-height:140%; vertical-align:top; float:left}

/* *** Dialogs **************************************************** */

.inputpanel { display: inline-block; padding: 0px 0px 0px 0px; }
.inputpanelheader { display: block; width: 100%; padding: 4px 10px 4px 10px; color: white; background-color: #2280BF; margin-bottom: 12px;}

#leftinputpanel { float: left; padding-right: 24px; padding-bottom: 12px; /*display: inline-block; */}
#rightinputpanel { float: left;  /*display: inline-block; */}
.inputpaneltable { margin: 0px 0px 0px 0px; padding: 3px 0px 3px 0px; }
.iptd  { vertical-align:middle; border:0; padding: 0px 0px 6px 0px; position: relative; }
.dlghr { border-top: 1px solid lightgray; margin-top: 6px; padding-top: 9px; padding-bottom: 9px; text-align:right}

#getprocbutton { float:left; position: relative; top:-3px; cursor: pointer; margin-right:8px;}
#saveprocbutton { float:left; position: relative; top:-3px; cursor: pointer; }
#graphoptionsbutton { float:left; position: relative; top:-1px; cursor: pointer; margin-left: 24px;}

/* *** Warning boxes ********************************************** */


div.warningbox {
	z-index:100000;
	display: table-cell; 
	position: absolute; 
	left: 10px;
	padding:6px 6px 4px 6px;
	text-align: left;
	cursor: pointer;   
	background-color: #fff;
	border: 1px solid #760A0F;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 1px 1px 2px #888;
	-moz-box-shadow: 1px 1px 2px #888;
	box-shadow: 1px 1px 2px #888;
}


div.warningbox:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: var(--warning-left, 10px); 
	top: -14px;
	border: 7px solid;
	border-color: transparent transparent #410609 transparent ;
}

div.warningbox:after { 
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: var(--warning-left, 10px); 
	top: -13px;
	border:7px solid;
	border-color: transparent transparent #fff transparent ;
}

		
#siteseal { width:150px; height:60px; border:0px; padding:0px; margin-top: 6px; }
a.secure { color: #003300; text-decoration: none; border-bottom: dotted 1px #666666; }
a.secure:hover { color: #220000; }

form 	{ margin-top: 3px; }

#modalbglayer { display:none; filter: alpha(opacity=40); opacity: 0.4; position: fixed; float:left; width:100%; height:100%; background-color:#AAAAAA; z-index:1000; }
.modalwindow { /* dummy class */ }
.autowhwindow { }

#alertbox     { display:none; }
.alertbglayer { filter: alpha(opacity=40); opacity: 0.4; position: fixed; float:left; width:100%; height:100%; background-color:#AAAAAA; z-index:2147483646; }
.alertframe1  { border: 0px; width: 100%; z-index:2147483647; position: fixed; top:22%; bottom:78%; }
.alertframe2  { border-collapse:collapse; min-width: 300px; border:2px solid #2E93DC; border-radius:5px; background-color:#FFFFFF; white-space:nowrap; margin:0; padding: 0; cursor:default; }
.alertheader  { border-bottom:1px solid #555555; padding: 4px 6px 4px 10px;  background-color: #2280BF;}
#alertheadertitle  { color: white; }
.alertbody    { padding: 16px 10px 16px 10px; background-color:#FFFFFF; text-align:left; }
.alertfooter  { padding: 8px 10px 10px 10px; background-color:#FFFFFF; }


td,th,ul,ol,li { text-align: left; }

p            { margin-top: 0px; margin-bottom: 6px; }
p.image      { margin-left: 28px; margin-top: 18px; margin-bottom: 12px; }

input { margin: 0px; }

input[type=checkbox] { position: relative; top:1px; margin-top:3px; margin-bottom:6px;}

textarea, select,
input[type="text"],
input[type="password"],
input[type="button"],
input[type="submit"] { border: 0.5px solid black; } 

input[type=text],input[type=password],input[type=number] { padding: 2px; min-width:80px; } 

input[type=submit], input[type="button"] { min-width:80px; border-color: #2280BF; padding: 6px 12px; margin-left:4px; cursor: pointer; border-radius: 4px; -webkit-border-radius: 4px; background-color: #F9FAFB;}

input[type=submit]:hover, input[type="button"]:hover { background-color: #EDF2F7; }

select:disabled, input[type="text"]:disabled, input[type="password"]:disabled { background: #eaeae3; }

select::-ms-expand {
    display: none;
}

select{
	background: url("/img/selectarrow.png") no-repeat right 4px center;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	-o-appearance: none;
	appearance: none;
	/* outline: none; */
	background-color: white;
	border-radius: 0;
	padding-right:20px;
	padding-left: 4px;	
	height:24px;
	min-width:100px;
}

.selection	 { margin-top:2px; margin-bottom:6px;}
.selectiondescription { display: inline-block; padding-right : 12px;}
.radiobutton { margin-bottom:6px;}
.checkbox	 { margin-bottom:6px; }

.button	     { width:80px; height:24px; line-height: 24px; text-align: center; padding: 3px; white-space:nowrap;}

.icon, .svgicon, .icon16, .icon24, .svghelpicon, .closenotificationicon, .closewindowicon
			{ cursor: pointer; vertical-align:middle; border:none; }
.icon16   	{ width: 16px; height: 16px; }			
.icon24   	{ width: 24px; height: 24px; }
.svgicon	 { height:1.1em; min-height:16px; }
.svghelpicon { height: 1.5em; min-height:20px; float: right; margin:10px 12px 6px 12px}
.closenotificationicon { float:right; height:0.85em; padding-left:6px; padding-top:2px; }
.closewindowicon { float:right; position: relative; top:-1px; right:-3px; }
.checkmarkicon  { height: 1em;}
.manualiconsmall { width: 16px; height: 16px; }
.manualiconlarge { width: 24px; height: 24px; }

.ajaxgif {height:28px; width:28px;}

td.shaded	{ background-color: #EEEEEE; }
td.content	{ padding-top: 10px; }

ul           { margin-top: 6px; margin-bottom: 6px; padding-left: 36px; }
ol           { margin-top: 6px; }
li           { list-style-type: square; margin-top: 6px; }
li.num       { list-style-type: decimal; margin-top: 6px;}
li.none      { list-style-type: none; margin-top: 6px; }

h1           { font-size: 120%; font-weight: bold; margin-top: 0px; margin-bottom: 18px; }
h2           { font-size: 100%; font-weight: bold; margin-top: 6px; margin-bottom: 3px;}
h3           { font-size: 100%; font-weight: bold; text-align: Left; }
h4           { font-size: 100%; font-weight: bold; }  

.frame       { border-collapse: collapse; margin-top: 3px; }
.framehead   { color: #000000; border-style: outset; border-width: 1px; border-color: #CCCC99; background-color: #DED9E1; padding: 2px 4px 2px 8px; }
.framebody   { border-style: outset; border-width: 1px; border-color: #CCCC99; background-color: #FEFEFF; padding:8px; }
        
#helpframecontent a, #manualcontent a { text-shadow: 0.20px 0 0 currentColor; letter-spacing: 0.08px ;}

#terms { line-height: 135% }
#terms h2 { margin : 12px 0px 9px 0px }
#terms h3 { margin : 9px 0px 6px 0px }

#loctable .headerSort {
	background-image: url('/svg/sort_both.svg');
	background-size: 1.75em;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center right;
	padding-right: 2em;
}

@media all and (max-width: 420px) {
	#topmenubar { overflow: auto; height: 32px; }
	#mainleftframe ul {padding-left: 1.25em;} 
	p.image  { margin-left: 0px; }
	.footeritem { padding-right:2px; }	
	.mobilehide  { display : none }
}

@media all and (max-width: 360px) {
	#medcalcnet a  { font-size:20pt; }
	.leftpanel { padding-right: 8px; }
}

@media all and (max-width: 540px) {
	#rightbar { display:none; }
}

.borderedtable { border: 2px solid #2280BF; border-collapse: collapse; margin-top:0em; }
.borderedtable td, .borderedtable th { border: 1px solid #A0A0A0; padding: 3px 6px 3px 6px; vertical-align: bottom; white-space:nowrap;}  


/* ************************************************************************* */ 

#modalForm { padding: 0px; margin:0px; cursor: default; }
#modalForm table { margin:0px; padding:0px; border-collapse: collapse; width:100%;}
#modalForm h2 { margin:0px 0px 12px 0px; padding:0px; }
#modalForm td { padding:3px 0px 3px 0px; margin:0px; }
#modalForm td.mfleft { padding-right: 12px; padding-top:5px; }
#modalForm td.mfright { width:60px; position: relative; }

/* ************************************************************************* */