/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

[class*="pad-"] {
  padding: 10px 0px 10px 0px;
}

[class*="margin-"] {
  margin: 0px 0px 0px 0px;
}

@media screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-120 {width:120px;}
  .col-220 {width:220px;} 
  .col-400 {width:400px;} 
  .col-700 {width:700px;}
  .col-9 {width:90%;} 
  .col-10 {width:100%;}

  .pad-25x100 {padding:25px 100px 25px 100px;}

  .margin-40 {margin: 40px;}
}

body {
   font-family: Arial, Helvetica, sans-serif;
   background-color: rgba(32,62,74,1);
   margin:0px;
}

#grad1 {
  min-height: 600px;
  /*padding: 25px 100px 25px 100px;*/
  background-color: #064F40; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom, rgba(24,69,59,1), rgba(24,69,59,1), rgba(6,79,64,1), rgba(42,79,80,1), rgba(32,62,74,1) ); /*, rgba(0,32,96,1)); *//* Standard syntax (must be last) */
}

#footer {
  height:150px;
  /*width:100%;*/
  background-color: #777;
}

#WDTitle {
width:500px;
margin:auto;
color:white;
font-size:82px;
text-align:center;
margin-bottom:10px;
}

#WDSlogan{
width:500px;
margin:auto;
border-top:3px solid rgb(255,215,0);
border-bottom:3px solid rgb(255,215,0);
/*color:rgb(255,215,0);*/
color:rgb(212,175,55);
font-size:32px;
text-align:center;
}

#SignIn {
  position:absolute;
  top:0px;
  right:100px;
  background-color:#999;
  color:#555;
  width:75px;
  border: 1px solid #555;
  border-radius: 0px 0px 7px 7px;
  padding:5px;
  text-align:center;
  font-size:14px;
}

#SignIn a {
  text-decoration:none;
  color:#555;
}

.button {
  position:relative;
  top:100px;
  background-color: None;
  border: 1px solid white;
  border-radius: 15px;
  color: white;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  /*display: inline-block;*/
  /*width:120px;*/
  font-size: 16px;
  cursor: pointer;
  margin: auto;
}

.button:hover{
  background-color: white;
  color: #064F40;
}

#content1 {
  height:800px;
  background-color:#203E4A;
}

#content1 h1 {
  color: rgb(200,200,200);
  padding-top:50px;
  text-align:center;
}

#content1 p {
  color: white;
  font-size:20px;
  padding-top:10px;
  text-align:center;
}

#content2 {
  height:500px;
  background-color:white;
}

#content3 {
  height:800px;
  background-color:#064F40;
}

#top-header {
  height: 30px;
  background-color:#FFC000;
  /*width:100%;*/
}

#top-header a{
  text-decoration:None;
}

#top-h1-l {
  color:#203E4A;
  position:absolute;
  left:10px;
  top:5px;
  text-decoration: none;
}

#top-h1-m {
  color:#203E4A;
  position:absolute; 
  top:5px;
  text-align:center;
  /*width:100%;*/
}

#top-h1-r {
  color:#AC8300;
  position:absolute;
  right:10px;
  top:5px;
}

.scenarioChoice {
  display:inline-block;
  color:#FFC000;
  background-color:#203E4A;
  border: 1px solid #FFC000;
  height:100px;
  /*width:220px;*/
  /*margin:40px 40px 40px 40px;*/
  padding:20px;
  text-align:center;
  font-size:110%;
}

.scenarioHeader {
  display:inline-block;
  color:#FFC000;
  background-color:#203E4A;
  border: 1px solid #FFC000;
  height:55px;
  width:400px;
  margin:0px;
  padding:10px;
  text-align:center;
}

.scenarioBody {
  display:inline-block;
  color:#203E4A;
  background-color:#A6A6A6;
  border: 1px solid #FFC000;
  height:445px;
  width:400px;
  margin:0px;
  padding:0px 10px 10px 10px;
  /*text-align:center;*/
}

.scenarioPlot {                                                                                                  
  display:inline-block;
  color:#FFC000;
  background-color:#203E4A;
  border: 1px solid #FFC000;
  height:500px;
  width:700px;
  margin:0px;
  padding:10px;
  text-align:center;
}

.infoSection {
  display:inline-block;
  width:400px;
  height:500px;
  position:absolute;
  top:20px;
}

.plotSection {
  display:inline-block;
  width:700px;
  height:500px;
  position:absolute;
  top:20px;
  right:0px;
}

.viewer {
  width:1150px;
  height:100%;
  position:relative;
  top:20px;
  margin:auto;
}

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100px;
  overflow: hidden;
}

.flex-center-vertically60 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 80px;
  overflow:hidden;
}

.flex-center-vertically30 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 30px;
  overflow: hidden;
}

.form-description {
    padding:0px 10px 10px 10px;
    text-align: left;
}

.centerButtons {
    /*max-width:1000px;*/
    margin: auto;
}

.inputText {
  background-color:#A0A0A0;
  color:#203E4A;
  width:80px;
  border-top: None;
  border-left: None;
  border-right: None;
  border-bottom: 1px solid #203E4A;
  padding:0px;
  margin:0px;
  font-size:90%;
  text-align:right;
}

:focus {
    outline:1px solid #FFC000;
    border: 1px solid #203E4A;
    /*outline-color: #203E4A;*/
}

.inputResult {
  background-color:#A0A0A0;
  color:#203E4A;
  width:80px;
  border-top: None;
  border-left: None;
  border-right: None;
  border-bottom: None;
  padding:0px;
  margin:0px;
  font-size:90%;
  text-align:right;
}

.highcharts-figure, .highcharts-data-table table {
    min-width: 300px;
    max-width: 700px;
    min-height: 200px;
    max-height: 600px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

#resultTable{
    position:relative;
    top:0px;
    width:350px;
    border: 1px solid #203E4A; 
}

table#resultTable td{
    width:80px;
    font-size:80%;
}
table#resultTable th{
    width:80px;
    border-bottom: 1px solid #203E4A;
    font-size:80%;
}

thead,
tbody {
	  display: block;
}

tbody {
	  max-height: 100px;
          overflow: auto;
}

td.editable {
  background-color: #A0A0A0;

}

/* The emerging W3C standard
   that is currently Firefox-only */
* {
  scrollbar-width: thin;
  scrollbar-color: #FFC000 #203E4A;
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: #203E4A;
}
*::-webkit-scrollbar-thumb {
  background-color: #FFC000;
  border-radius: 20px;
  border: 3px solid #203E4A;
}