/*
Copyright of Laboratory of Excellence for Realtime Computing and Multiscale Modeling, Michigan State University
Author: Huasheng Liao
 */
/* 05/16/2022/LHS: screen recording */
.dot {
  width: 6px;
  height: 6px;
  background-color: black;
  position: absolute;
  margin:0;
 padding:0;
  vertical-align: top;
}
.mylineY {
  display: flex;
  position: absolute;
  left: 0px;
  background-color: black;
  width: 2px;
  height: 100vh;
  min-height: 100%;
  margin:0;
  padding:0;
  vertical-align: top;
}

.myline {
  display: flex;
  position: absolute;
  background-color: black;
  min-height: 2px;
  width: 100%;
  margin:0;
  padding:0;
  vertical-align: top;
}

.mycircle {
  display: flex;
  position: absolute;
  left: 0px;
  top: 0px;
  margin:0;
  padding:0;
  vertical-align: top;
}
.mylineY0 {
  display: flex;
  position: absolute;
  left: 0px;
  background-color: red;
  width: 2px;
  height: 100vh;
  min-height: 100%;
  margin:0;
  padding:0;
  vertical-align: top;
}

.myline0 {
  display: flex;
  position: absolute;
  background-color: red;
  min-height: 2px;
  width: 100%;
  margin:0;
  padding:0;
  vertical-align: top;
}

 /*//07/27/2020/LHS: for SWAT */
button.mainbuttons{color: black; background:#eee; width: 180px;	display: block;	padding: 14px;	text-decoration: none;	border: 1px solid #555;	font-size:12}
div.SwatSmall{position:absolute;top:0px;left:0px;width:80px;height:300px;background:#d8fbd6;border:none;padding:20px;font-size:12px;z-index:50} 
div.generic {width:200px;background:#D8FBD6;border:1px dotted black;padding:8px; font-size: 12px;}
div.Basic {position: absolute; top: 58px; left: 28px; width:340px; height:1085px; background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;}
div.Transport {position: absolute; top: 58px; left: 380px; width:340px; height:1085px; background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;}
div.PCS {align-items: center; position: absolute; top: 1165px; left: 28px; width:693px; height:230px; background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;}
div.MyImage {align-items: center; position: absolute; top: 380px; left: 28px; width:442px; height:430px; background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;}
div.PublishModel{align-items: center; position: absolute; top: 280px; left: 28px; width:442px; height:518px; background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;}
div.generic ul {color:green;} 
div.WellInput {position: absolute; width:398px; height:228px; background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;}
div.PCSCalib {
    position: absolute; top: 108px; left: 28px; 
    width:680px; height:290px; 
	background:#D8FBD6; border:1px dotted black;
	padding:8px; font-size: 14px;
	z-index: 100;
	-webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;     
    user-select: none;
}
div.TrendData { position: absolute; top: 108px; left: 28px; 
              width:280px; height:520px; 
			  background:#D8FBD6; border:1px dotted black;
			  padding:8px; font-size: 14px;
			  z-index: 100;}			  
div.UploadDiv0{ position: absolute; top: 58px; left: 28px; 
              width:460px; height:360px; 
			  background:#D8FBD6; border:1px dotted black;
			  padding:4px; font-size: 12px;
			  z-index: 100;}		
div.UploadDiv1{
    position: absolute; top: 58px; left: 28px; 
    width:460px; height:560px; 
	background:#D8FBD6; border:1px dotted black;
	padding:4px; font-size: 12px;
	z-index: 918;
}					  
div.CalibLegendH{
    position: absolute; top: 58px; left: 28px; 
    width:500px; height:80px; 
	background:#D8FBD6; border:1px dotted black;
	padding:8px; font-size: 12px;
	z-index: 100;
	-webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;     
    user-select: none;
}
div.CalibLegendV{
    position: absolute; top: 58px; left: 28px; 
    width:90px; height:480px; 
	background:#D8FBD6; border:1px dotted black;
	padding:8px; font-size: 12px;
	z-index: 100;
	-webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;     
    user-select: none;
}	
div.divWellDataFilter{
    position: absolute; top: 108px; left: 28px; 
    width:380px; height:200px; 
	background:#D8FBD6; border:1px dotted black;
	padding:8px; font-size: 12px;
	z-index: 103;
	-webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;     
    user-select: none;
}
div.Solver{
	position: absolute; top: 58px; left: 28px; 
    width:380px; height:300px; 
	background:#D8FBD6; border:1px dotted black;
	padding:8px; font-size: 12px;
	z-index: 101;
}
			  
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    vertical-align: bottom;
}
fieldset {
  padding: 1em;
  font:80%/1 sans-serif;
  display: inline-block;
  }
fieldset.label {
  float:left;
  width:25%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-weight:bold;
  }
  
   .buttons {
 /*   background-color: #4CAF50; /* Green */
 /*   border: none;
    color: white;
    padding: 15px 32px; */
    text-align: center;
/*    text-decoration: none; */
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
	font-size: 12px;
	border-radius: 18%;
	box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.19);
	width: 90%;
	}
	
	.buttons:hover, .buttons:focus {
    background-color: #2980B9;
    }

	.buttonsB {
 /*   background-color: #4CAF50; /* Green */
 /*   border: none;
    color: white;
    padding: 15px 32px; */
    text-align: center;
/*    text-decoration: none; */
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
	font-size: 20px;
	border-radius: 18%;
	box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.19);
	width: 68%;
	}
	
	.buttonsB:hover, .buttonsB:focus {
    background-color: #2980B9;
    }

  /*
.buttons {
    position: relative;
    display: inline-block;
    text-align: center;
	color: black;
	cursor: pointer;
	font-size: 12px;
	margin: 4px 2px;
	border-radius: 18%;
    border-bottom: 1px dotted black; 
	box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.19);
	width: 90%;
}

.buttons .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
	z-index: 1;
    top: -5px;
    left: 105%;
    margin-left: 0px;
    opacity: 0;
    transition: opacity 1s;
}

.buttons .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

.buttons:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
} 
*/
 
	 .button0 {
    text-align: center;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
	font-size: 12px;
	border-radius: 18%;
	box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.19);
	width: 88px;
	}
/*	
.button0 .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
	z-index: 1;
    top: -5px;
    left: 105%;
    margin-left: 0px;
    opacity: 0;
    transition: opacity 1s;
}

.button0 .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

.button0:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
*/
	
.disabled {
    opacity: 0.6;
    cursor: not-allowed;
	   }
.animate-in {
    -webkit-animation: fadeIn .5s ease-in;
    animation: fadeIn .5s ease-in;
}
.animate-out {
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    opacity: 0;
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}	

/* Style the tab */
div.tab {
    position: absolute;
	top: 58px;
	left: 128px;
/*    overflow: hidden;  */
    border: 1px solid #ccc;
    background-color: #f1f1f1;
	width:638px;
	height:50px;
}

/* Style the links inside the tab */
div.tab a {
    float: left;
    display: block;
    color: black;
    text-align: center;
	vertical-align: middle;
    padding: 6px 6px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 12px;
	text-shadow: 3px 2px rgba(0,0,0,0.2);
}

/* Change background color of links on hover */
div.tab a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab a:focus, .active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    position: absolute;
	top: 108px;
	left: 128px;
	padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
	width:500px; height:418px; background:#D8FBD6; border:1px solid #ddd;padding:8px; font-size: 14px;
}

/* Style the tab content */
.tabcontentPL {
    display: none;
    position: absolute;
	top: 108px;
	left: 188px;
	padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
	overflow: scroll;
	width:558px; height:368px; background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;
}
div.tabMF {
    position: absolute;
	top: 58px;
	left: 128px;
/*    overflow: hidden;  */
    border: 1px solid #ccc;
    background-color: #f1f1f1;
	width:638px;
	height:50px;
}
/* Only applyto link's class=MFsolvertablinks -- <a with class name=MFsolvertablinks */
div.tabMF a.MFsolvertablinks:hover {
    background-color: #ddd;
}
div.tabMF a.MFsolvertablinks:focus, .active {
    background-color: #ccc;
}
.MFsolvertabcontent {
    display: none;
    position: absolute;
	top: 49px;
	left: 0px;
	padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
	width:500px; height:418px; background:#D8FBD6; border:1px solid #ddd;padding:8px; font-size: 14px;
}
div.Cond {position: absolute; top: 58px; left: 28px; width:380px; height:265px; background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;}
div.KRand0{position: float: left; top: 78px; left: 5px; width:213px; height:108px; background:#D8FBD6; border:0px dotted black;padding:8px; font-size: 14px;}
div.KRand {position:  absolute; top: 68px; left: 218px; width:188px; height:108px; background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;}
div.TopBotE {position: absolute; top: 58px; left: 28px; width:380px; height:265px; background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;}
div.TwoWay{float: left;position: relative; top: 0px; left: 0px; width:50%; height:238px; background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;}
div.OneWay{float: right;position: relative; top: 0px; left: 0px; width:50%; height:238px; background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;}
div.Pline {position: absolute; top: 58px; left: 158px; width:380px; height:400px; background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;}
div.PopUpdiv {position: absolute; top: 258px; left: 228px; width:410px; height:558px; 
    background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;     
    user-select: none;
}
div.Mwell {position: absolute; top: 258px; left: 228px; width:410px; height:300px; 
    background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;     
    user-select: none;
}
div.CS {position: absolute; top: 208px; left: 178px; width:410px; height:259px; 
    background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;     
    user-select: none;
}
div.FullCS {position: absolute; top: 158px; left: 128px; width:695px; height:198px; 
    background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;     
    user-select: none;
}
div.MB {position: absolute; top: 108px; left: 78px; width:310px; height:282px; 
    background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;     
    user-select: none;
}
div.F3D {position: absolute; top: 58px; left: 28px; width:353px; height:450px; 
    background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;     
    user-select: none;
}
div.Calibration {position: absolute; top: 58px; left: 28px; width:468px; height:553px; 
    background:#D8FBD6; border:1px dotted black;padding:8px; font-size: 14px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;     
    user-select: none;
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    vertical-align: bottom;
}
fieldset {
  padding: 0.38em;
  font:80%/1 sans-serif;
  display: inline-block;
  }
fieldset.label {
  float:left;
  width:25%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-weight:bold;
  }
#CSul li { margin: 0; padding: 0; }
#CSul ul .label { display: block; color: WindowText; background-color: Window; margin: 0; padding: 0; width: 100%; }
#CSul ul .label:hover { background-color: Highlight; color: HighlightText; }  
   
#CSelem{
        position: absolute;
		top: 208px;
		left: 178px; 
        background-color: green;
        -webkit-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;     
        user-select: none;
		z-index: 100;
        } 
#handleCS {
    background-color: #727272;
    width: 10px;
    height: 10px;
    cursor: se-resize;
    position:absolute;
    right: 0;
    bottom: 0;
}
#FullCSelem{
        position: absolute;
		top: 158px; 
		left: 128px;
        background-color: green;
        -webkit-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;     
        user-select: none;
		z-index: 100;
        } 
#handleFullCS {
    background-color: #727272;
    width: 10px;
    height: 10px;
    cursor: se-resize;
    position:absolute;
    right: 0;
    bottom: 0;
}			
#MWelem{
    position: absolute;
	top: 258px; 
	left: 228px;
    background-color: green;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;     
    user-select: none;
	z-index: 100;
}
			
#handleMW {
    background-color: #727272;
    width: 10px;
    height: 10px;
    cursor: se-resize;
    position:absolute;
    right: 0;
    bottom: 0;
}
#MBelem{
    position: absolute;
	top: 108px;
	left: 78px; 
    background-color: green;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;     
    user-select: none;
	z-index: 100;
}
#handleMB {
    background-color: #727272;
    width: 10px;
    height: 10px;
    cursor: se-resize;
    position:absolute;
    right: 0;
    bottom: 0;
}
#F3Delem{
    position: absolute;
	top: 58px;
	left: 28px; 
    background-color: green;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;     
    user-select: none;
	z-index: 100;
}
#handleF3D {
    background-color: #727272;
    width: 10px;
    height: 10px;
    cursor: se-resize;
    position:absolute;
    right: 0;
    bottom: 0;
}  
#Calibelem{
    position: absolute;
	top: 58px;
	left: 28px; 
    background-color: green;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;     
    user-select: none;
	z-index: 100;
}
#handleCalib {
    background-color: #727272;
    width: 10px;
    height: 10px;
    cursor: se-resize;
    position:absolute;
    right: 0;
    bottom: 0;
}

input.Up{
  font-size:7px;
  width:20px;
  height:12px;
  float:right; 
  margin-right:52px; 
  background-color:#dddddd;
  border:none; 
  border-bottom: 1px solid #bababa;
}

input.Up:hover
{
  background-color: #bababa;
  
}

input.Up:active {
outline: none;
border: none;
}

input.Up:focus {outline:0;}

input.Down{
  font-size:7px;
  width:20px;
  height:12px;
  float:right; 
  margin-right:52px; 
  background-color:#dddddd;
  border:none; 
  border-bottom: 1px solid #bababa;
}

input.Down:hover{
  background-color: #bababa;
}

input.Down:active {
outline: none;
border: none;
}

input.Down:focus {outline:0;}

input.Up:hover{
  background-color: #bababa;
}
img {
  pointer-events: none;
}

#DragBox{
     width:460px;
     height:200px;
     border:1px dashed #000;
	 overflow-x:hidden; overflow-y:scroll;
	 }
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.dropbtn{
/*    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer; */
	
	cursor: pointer;
    text-align: center;
/*    text-decoration: none; */
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 18%;
    box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.19);
    width: 90%;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    font-size: 12px;
	min-width: 120px;
    overflow: auto;
    box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
    left: 38px;
	Top: 10px;
	z-index: 999;
}
.dropdown-content a {
    color: black;
    padding: 8px 6px;
    text-decoration: none;
    display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
/* Closable button inside the container tab */
.closebtn {
    //float: right;
	position: absolute;
    right: 35px;
    top: -5px;
    color: red;
    font-size: 36px;
    cursor: pointer;
}

.morelesstn {
    float: left;
    color: red; 
    font-size: 30px;
    cursor: pointer;
	width:100%;
	height:26px;
    border-bottom: 1px solid #333;
	border-top-style:none;
	border-left-style:none;
	border-right-style:none;
	margin-top:0px;
	margin-bottom:0px;
}
.morelesstn:hover {
  color: blue; /*#000;*/
}
.morelesstn0 {
    float: left;
    color: red; 
    font-size: 30px;
    cursor: pointer;
	width:100%;
	height:26px;
    border-bottom: 0px solid #333;
	border-top-style:none;
	border-left-style:none;
	border-right-style:none;
	margin-top:0px;
	margin-bottom:5px;
}
.morelesstn0:hover {
  color: blue; /*#000;*/
}
.morelesstntp {
    float: left;
    color: red; 
    font-size: 16px;
    cursor: pointer;
	width:100%;
	height:16px;
    border-bottom: 0px solid #333;
	border-top-style:none;
	border-left-style:none;
	border-right-style:none;
	margin-top:0px;
	margin-bottom:5px;
}
.morelesstntp:hover {
  color: blue; /*#000;*/
}

label.ML.separator {
    border-top: 1px solid #333;
    width: 100%;
    height: 1px;
    display: block;
}
label .ML.display{
  display: block;
  padding: 0.5em;
  text-align: center;
  border-bottom: 1px solid #CCC;
  color: #666;
}
label.ML:hover {
  color: #000;
}
label.ML::before {
  font-family: Consolas, monaco, monospace;
  font-weight: bold;
  font-size: 15px;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}

.close1btn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}
.close1btn:hover {
    color: black;
}
.close2btn {
    margin-left: 15px;
    color: #00bfff;
	font-size: 40px;
    font-weight: bold;
    float: left;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}
.close2btn:hover {
    color: black;
}

a.helpAnchor{
	position:relative;
    text-decoration:none;
}
a.helpAnchor .helpIcon{
	position:absolute;
    text-align:center;
    font-size:24px;
    font-weight:bold;
    width:30px;
    height:30px;
    color:#ff0;
    background-color:#88f;
	display:inline-block;
	border:1px solid #f6f6f6;
}
a.helpAnchor:hover .helpIcon{background-color:#a3ade1;}
table.DMattrStyle {
	border: 0px solid black;
	border-collapse: collapse; 
	width:100%;
	padding: 0px;
	border-spacing: 0px;
	table-layout:fixed;
}
div.DMhtmlDIV{
	border:1px dotted black;
	margin:5px;
	padding:5px;
}
.BTcollapsible {
  background-color: rgb(139, 203, 162);
  box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.19);
  border-radius: 12px;
  color: white;
  cursor: pointer;
  padding: 2px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 12px;
  z-index: 0;
}

.active, .BTcollapsible:hover {
  background-color: rgb(248, 203, 162);
}
/*
.BTcollapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 2px;
}

.BTcollapsible:.active,.BTcollapsible:after {
  content: "\2212";
}
*/
.BTcontent {
  padding: 0 1px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
#mainList {
    margin-left: -30px;
    margin-right: -30px;
}
#mainList li {
    float: left;
    list-style: none;
    margin:0 10px; /*Keeping 10px space between each nav element*/
}
#mainList li a, /*These can all be merged into a single style*/
#mainList li a:link,
#mainList li a:visited,
#mainList li a:hover,
#mainList li a:active {
    text-decoration: none;
}
#mainList li ul {
    display: none; /*This is the default state.*/
    z-index: 9999;
    position: absolute;
    width: 288px;
    max-height:63px;/*The important part*/
    overflow-y:auto;/*Also...*/
    overflow-x:hidden;/*And the end of the important part*/
    margin: 0px;
    padding-left:5px;/*Removing the large whitespace to the left of list items*/
    border: 1px solid #ddd;
	background-color: #7CFC00; /*red; */
}
#mainList li:hover ul, #mainList li.sfhover ul {
    display:block;/*This is the hovered state*/
}

#mainList li ul li a, #mainList li ul li a:link, #mainList li ul li a:visited {
    display: block;
    margin: 0;
    text-decoration: none;
    z-index: 9999;
    border-bottom: 1px dotted #ccc;
    width:400px;
}
#mainList li ul li a:hover, #mainList li ul li a:active {
    display: block;
    margin: 0;
    text-decoration: none;
}
.marquee {
 height: 28px;
 white-space: nowrap;
 overflow: hidden;
 position: relative;
 padding:0;
 margin: 0;
 /*
 background: linear-gradient(to right, #ccc 10%, transparent 80%);
 color: orange;
 border: 0px solid orange;
 */
}
.marquee p {
 position: absolute;
 margin: 0;
 line-height: 28px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(10%);
 -webkit-transform:translateX(10%);	
 transform:translateX(10%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 20s linear infinite;
 -webkit-animation: scroll-left 20s linear infinite;
 animation: scroll-left 20s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(10%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(10%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(10%); /* Browser bug fix */
 -webkit-transform: translateX(10%); /* Browser bug fix */
 transform: translateX(10%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
 .pushpinStyle div{
    color: black; !important; /*Make Pushpin text black*/
    left: 5px; !important;  /*Since Pushpin text is absolutely positioned, this will cause the text to be 5 pixels from the left instead of 0 pixels */
    text-shadow: 1px 0px white, -1px 0px white, 0px -1px white, 0px 1px white;  /*Give the text all around white text shadow so it looks nice on browsers that support it*/
    font: 12px arial,sans-serif; !important // override default fonts 
}