/* Color Picker */
/* https://www.colorhexa.com/220000 */

body                {width:100%;vertical-align:middle;padding:0px;font-size:11px;font-family:'Tahoma', Geneva, sans-serif; font-weight:bold;}
/*table               {padding-top:2px !important; padding-top:2px;padding-bottom:2px !important; padding-bottom:2px;} */
*td                  {padding-top:3px !important; padding-top:1px;padding-bottom:3px !important; padding-bottom:1px;} 
.Main               {color:#003333;left:0px;width:100%;position:absolute;top:55px;height:540px;}
.DDI {display:inline;}      /* DropDown Div Display InLine */
/*  Marquee Div   
div.MQ              {position:absolute; top:0px; left:746px;width:440px;color:White;}  
div.MQ table        {border-collapse:collapse;  border:solid 1px gold;  } 
div.MQ table tr     {line-height:22px;}
div.MQ table td     {text-align:center; border-collapse:collapse;  border:solid 1px gold; color:White;  vertical-align:middle;font-size:11px;font-family:'Tahoma', Geneva, sans-serif; font-weight:bold; white-space:nowrap;}
*/

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable */
/*

#Div1header {
  padding: 10px;
  cursor: move;
  z-index: 10;
}
*/
/* CSS Button Generator */
/* https://www.bestcssbuttongenerator.com/#/12 */
.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
	-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
	background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
	background-color:#007dc1;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:11px;
	padding:2px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #154682;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
	background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
	background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
	background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
	background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
	background-color:#0061a7;
}
.myButton:active {
	position:relative;
	top:1px;
}
.myBtnDis {
	-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
	-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0f7dc1), color-stop(1, #0f61a7));
	background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
	background-color:#007dc1;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#dddddd;
	font-family:Arial;
	font-size:11px;
	padding:2px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #154682;
}
/* collapsable divs */
/* https://www.w3schools.com/howto/howto_js_collapsible.asp */
/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #295480;
  color: white;
  cursor: pointer;
  padding: 6px;
  width: 100%;
  border: solid;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
/* background-image: linear-gradient(red, yellow);
   background-image: linear-gradient(to right, red , yellow);
*/
.active, .collapsible:hover {
  background-color: #3072a8;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}
/* Style the collapsible content. Note: hidden by default */

.content {
  padding: 0 6px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
/* End Collapsable Divs */



#Div1 {
      position: absolute;
  z-index: 9;
  border: 1px solid #d3d3d3;

    box-shadow: 15px 15px 2px rgba(0, 0, 0, 0.3);
}
#Div1.table {
    display: inline-block;
}

/* THIS IS TEMP STUFF TO BE REMOVED AFTER THE CHANGE OVER TO CSS4*/
/*
div.FrmHDR             {background-color:#295480; color:White; width:100%;border-bottom:solid 1px #003366;}  /*295480*/
/*
div.FrmHDR table       {width:100%; table-layout:fixed; }
div.FrmHDR table td    {text-align:center;width:115px;background-color:#295480;  border:solid 1px #99CCFF; color:White;  vertical-align:middle;padding:2px;margin:0px;font-size:11px;font-family:'Tahoma', Geneva, sans-serif; font-weight:bold; white-space:nowrap;}
div.FrmHDR table td    {background-color:#295480;border:solid 1px #99CCFF;   color:White;  vertical-align:middle;padding:2px;margin:0px;font-size:11px;font-family:'Tahoma', Geneva, sans-serif; font-weight:bold; white-space:nowrap;}

div.FrmHDR table td.T  {text-align:left; border-width:0px;background-color:#295480;width:100%;}
div.FrmHDR a           {color:white;}
table.MQT    {border:1px  solid  #ffde00 ; border-collapse:collapse; padding:1px; margin:1px; font-weight:bold;font-size: 12px;height:12px;text-align:center;color:white;}
table.MQT TD {border:1px  solid  #ffde00 ; border-collapse:collapse; padding:1px; margin:1px; font-weight:bold;font-size: 12px;height:12px;text-align:center;color:white;}

*/
/* replaced by myButton.BTN {color:white;  margin: 0px;padding:0px;font-weight:bold;font-size: 12px;font-family: Arial, Helvetica, monospace; width:100%; text-align: center;} */

/* END OF TEMP STUFF TO BE REMOVED AFTER THE CHANGE OVER TO CSS4*/
/*
div.HDN             {position: absolute; top:0px;  background-color:#295480;display:none; z-index:-1; }
*/
/* Form Header Div*/
/*div.HDR             {background-color:#336699; color:White; width:100%;border-bottom:solid 1px #003366;}*/

div.HDR             { width:100%;background-color:#295480; color:White; border-bottom:solid 1px #003366;}  
div.HDR thead th    { width:100%;background-color:#295480; color:White; border-bottom:solid 1px #003366;}  
div.HDR table       { width:100%;table-layout:fixed; }
div.HDR table td    { width:100%;text-align:center;width:115px;background-color:#295480;  border:solid 1px #99CCFF; color:White;  vertical-align:middle;font-size:11px;font-family:'Tahoma', Geneva, sans-serif; font-weight:bold; white-space:nowrap;}
div.BDY             { width:100%;background-color:#F6F6FF; color:#003333; border-bottom:solid 1px #003366;overflow:auto;overflow-x: hidden; }
div.BDY table       { width:100%;  table-layout:fixed;}
div.BDY table td    { width:100%;padding-top:1px !important; padding-top:1px;padding-bottom:1px !important; padding-bottom:1px;color:#003366;  vertical-align:middle;font-size:11px;font-family:'Tahoma', Geneva, sans-serif; font-weight:bold; }



/*div.HDR table td.T  { width:100%;text-align:left; border-width:0px;background-color:#295480; white-space: nowrap;}
*/
/*div.HDR a           {color:white;} */
        
/*  width:470px !important; /*moz width*/

/* Form Div*/
/*div.FRM             {background-color:#336699; color:White; width:100%;border-bottom:solid 1px #003366; margin:0px;} 
div.FRM             {background-color:#3E648C; color:White; width:100%;border-bottom:solid 1px #003366; margin:0px; overflow:auto;overflow-x: hidden;} 
div.FRM table       {width:100%;  table-layout:fixed;}
div.FRM table td    {padding-top:2px !important; padding-top:2px;padding-bottom:2px !important; padding-bottom:2px;color:white;  vertical-align:middle; font-size:11px;font-family:'Tahoma', Geneva, sans-serif; font-weight:bold; }
div.FRM table td.T  {text-align:left; border-width:0px;background-color:#295480;width:100%; font-size:13px;}
div.FRM a           {color:white;}
*/

/* Form Body Div
div.BDY             {background-color:#F6F6FF; color:#003333; border-bottom:solid 1px #003366;overflow:auto;overflow-x: hidden; }
div.BDY table       { width:100%;  table-layout:fixed;}
div.BDY table td    {width:100%;padding-top:1px !important; padding-top:1px;padding-bottom:1px !important; padding-bottom:1px;color:#003366;  vertical-align:middle;font-size:11px;font-family:'Tahoma', Geneva, sans-serif; font-weight:bold; }
/*div.BDY table td.T  {padding-top:1px !important; padding-top:1px;padding-bottom:1px !important; padding-bottom:1px;text-align:left; border-width:0px;background-color:#003333;width:100%; font-size:13px;}
*/
div.BDY a           {color:#003366;}
/*div.BDY table tr.ALT         {background-color:#00EEFF;*/

/* Form User Guide Div
div.USG             {padding:0px; margin:0px;  background-color:#334466; color:#FFFFFF;height:420px; width:702px;position:absolute;top:200px;left:150px;border:solid 2px #FF0000;overflow:auto;}
div.USG table       {padding:0px; margin:0px;width:700px;  table-layout:fixed;}
div.USG table td    {padding:0px; margin:0px;color:#FFFFFF;  vertical-align:middle;font-size:11px;font-family:'Tahoma', Geneva, sans-serif; font-weight:bold; white-space:nowrap;}
div.USG table td.T  {padding:0px; margin:0px;text-align:left; border-width:0px;background-color:#003333;width:100%; font-size:11px;}
div.USG table td.B  {padding:2px; margin:0px;text-align:center; background-color:#295480; border:solid 1px #FF0000; color:White;  vertical-align:middle;font-size:11px;font-family:'Tahoma', Geneva, sans-serif; font-weight:bold; white-space:nowrap;} /* background-image:url('\DDM\Graphics\CSS4BBG.jpg'); */

/*div.USG a           {color:#FFFFFF;}
*/
//.USG_GRY   {
//	filter: alpha(opacity=70); /* internet explorer */
//	-khtml-opacity: 0.7;      /* khtml, old safari */
//	-moz-opacity: 0.7;       /* mozilla, netscape */
//	opacity: 0.7;           /* fx, safari, opera */
//	}

pre                 { padding:4px; font-size:12px;font-family:'Lucida Console',monospace; font-weight:normal; font-weight:bold;line-height:18px;color:#FFFFFF;}
pre.BDY             { padding:4px; font-size:12px;font-family:'Lucida Console',monospace; font-weight:normal; font-weight:bold;line-height:18px;color:#003333;}

/*.GMDyellow {background-color:yellow;color:navy;text-align:right;width:30px;display:block;float:left;}*/




.GMDbrown  {background-color:brown; color:white;text-align:right;width:30px;display:inline; min-width:30px;}
.GMDred    {background-color:red;   color:navy;text-align:right;width:30px;display:inline; min-width:30px;}
.GMDorange {background-color:orange;color:navy;text-align:right;width:30px;display:inline; min-width:30px;}
.GMDyellow {background-color:yellow;color:navy;text-align:right;width:30px;display:inline; min-width:30px;}
.GMDgreen  {background-color:green; color:white;text-align:right;width:30px;display:inline; min-width:30px;}
.GMDblue   {background-color:blue;  color:white;text-align:right;width:30px;display:inline; min-width:30px;}
.GMDpurple {background-color:purple;color:white;text-align:right;width:30px;display:inline; min-width:30px;}




.B {text-align:center; background-color:#295480; border:solid 1px #00CCFF; color:White;  vertical-align:middle;padding:2px;margin:0px;font-size:11px;font-family:'Tahoma', Geneva, sans-serif; font-weight:bold; white-space:nowrap;} /* background-image:url('\DDM\Graphics\CSS4BBG.jpg'); */
.C {text-align: center; vertical-align: top;} 
.L {text-align: left;   vertical-align: top;}
.R {text-align: right;  vertical-align: top;} 
.G {text-align:left; vertical-align:top;  background-color:White;border-color:#AAAAAA; border-style:solid; border-width:thin;}
.PX5 {width: 00.5%;} 
.P05 {width: 04.9%;} 
.P08 {width: 07.9%;} 
.P85 {width: 8.5%;}
.P09 {width: 09%;} 

.P10 {width: 09.9%;} 
.P11 {width: 10.9%;} 

.P12 {width: 12%;} 
.P15 {width: 14.9%;} 
.P20 {width: 19.9%;} 
.P25 {width: 24.9%;} 
.P30 {width: 29.9%;} 
.P35 {width: 34.9%;} 
.P40 {width: 39.9%;} 
.P45 {width: 44.9%;} 
.P50 {width: 49.9%;} 
.P55 {width: 54.9%;} 
.P60 {width: 59.9%;} 
.P65 {width: 64.9%;} 
.P70 {width: 69.9%;} 
.P75 {width: 74.9%;} 
.P80 {width: 79.9%;} 
.P85 {width: 84.9%;} 
.P90 {width: 89.9%;} 
.P95 {width: 94.9%;} 
.PXX {width: 99.9%;} 

.InX5 {width:.5em;}
.In05 {width:5em;}
/*input  {padding-top:1px !important; padding-top:1px;padding-bottom:1px !important; padding-bottom:1px;font-size:8pt;}*/
input {padding:3px 1px !important;font-size:8pt; }
select {padding-top:1px !important; padding-top:1px;padding-bottom:1px !important; padding-bottom:1px;font-size:8pt;}


.ds_box {
	background-color: navy;
	border: 1px solid #000;
	position: absolute;
	z-index: 32767;
	width:250px;

}

.ds_tbl {
	background-color:Teal;
	width:250px;

}

.ds_head {
	background-color: navy;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 2px;
}

.ds_subhead {
	background-color: #CCC;
	color: #000;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	width: 32px;
}

.ds_cell {
	background-color: #EEE;
	color: navy;
	font-size: 11px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	padding: 5px;
	cursor: pointer;
}

.ds_cell:hover {
	background-color: #F3F3F3;
} 



/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}



/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}




/* This hover code won't work for IE */

/*
.loading{	color:white; 	background:#0000FF; 	padding:2px; 	width:274px;	text-align: center;}


.tabm{ margin:0px; padding: 2px 2px 0px 2px; background-color: #FFFFF2; height: 16px; width:100%; border:2px solid #FF9900; border-bottom:2px solid #FF9900;}
.buttonlink{	font-weight: bold;	margin-left: 10px;}
*/

.MenuTab {
    @media only screen and (max-width: 768px) 
    width:98vw;
    display:block;
    z-index:10;
    position:absolute;
    bottom:0px;
    opacity:.75;
    text-align:center;
    padding:1px;
    @media only screen and (max-width: 2000px) 
    
    display:block;
    z-index:10;
    position:absolute;
    top:90%;
    opacity:.75;
    text-align:center;
    font-size: 18px; 

    }
.FullScreenBtn {
    font-size: 18px; 
}    


#drop_file_zone {
    background-color: #EEE;
    border: #999 5px dashed;
    
    height: 200px;
    padding: 8px;
    font-size: 24px;
    margin: auto;
    z-index:9;
    text-align: center;
}
#drag_upload_file {
  width:100%;
  margin:auto;
  z-index:9;
  text-align: center;
}
#drag_upload_file p {
  width: 100%;  
  z-index:9;
  text-align: center;
}
#drag_upload_file #selectfile {
  display: none;
}




@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf3 img.Pic00 {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}


.menuCont {
  display: inline-block;
  cursor: pointer;
  z-index:5;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
/* The actual popup */
.menuCont .menu {
  visibility: hidden;
  //width: 160px;
  background-color: #555;
  color: silver;
  text-align: left;
  border-radius: 6px;
  font-size:2.5vh;
  padding:8px;
}

.popup
{   display:none;
    position: absolute;
    top: 25%;
    left: 25%;
    height:50%;
    width:50%;
    font-size:2.5vh;
    vertical-align:bottom;
    color:silver; 
    border-style:solid;
    border-color:silver;
    border-width:5px;
    background-color:#555;
    padding:8px;'>
}


/* Popup arrow */
.menuCont .menu::after {
  //content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  //margin-left: -5px;
  font-size:2.5vh;
  
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  
}

/* Toggle this class - hide and show the popup */
.menuCont .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
    background:#846733;  
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
    color:#FFFFFF;
    background:#846733;  
}
.ui-datepicker table {
	width: 100%;
	font-size: .7em;
	border-collapse: collapse;
    font-family:verdana;
	margin: 0 0 .4em;
    color:#000000;
    background:#FDF8E4;    
}
.ui-datepicker td {

	border: 0;
	padding: 1px;

    
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .8em;
	text-align: right;
	text-decoration: none;
}

.ScrollDiv  {
    
    height:14%;
    width:100vw;
    max-width:100vw;
    background-color:black;
    display:inline-block;
    color:silver;
    font-size:5.25vw;
    text-align:center;
    position:absolute;
    top:0;
    left:0;
    padding:0;
    vertical-align:top;
    z-index:2;
}

/*******************************/
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color:#a0a0a0;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  //float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 8px 8px;
  transition: 0.3s;
  font-size: 12px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}
.SlideshowButtons {
    padding: 6px 12px;
    border: 5px solid silver;
    border-top: none;
    color:darkslategrey; 
    background-color:white;
}
/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}
/* #555; */
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 5px solid silver;
    border-top: none;
    color:darkslategrey; 
    background-color:white;
    overflow:auto;
}

.tab button::after{
    content: '';
}

.tablinks{
 font-size:24px;   
}
/*******************************/

     
i.pointer {
cursor: pointer;
}
i:hover {
cursor: pointer;
}