html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  font-size: 1em;
  font-family: sans-serif;
}

#appCont {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display:flex;
}

#viewDiv {
    position: absolute;
    width: 80%;
    height: 100%;
    left: 0px;
    padding: 0;
    margin: 0;
    z-index:1;
  }

  #titleDiv {
    padding: 15px;
    padding-left: 20px;
    padding-right: 20px;
    background-color:#323232;
    color:rgb(187, 187, 187);
  }
  
  #titleText {
    font-size: 20pt;
    font-weight: 60;
    padding-bottom: 10px;
  }

#timeSlider {
      position: absolute;
      left: 5%;
      right: 5%;
      bottom: 20px;
      z-index:2; 
    }

#panel {
position: absolute;
padding: 0;
margin: 0;
right: 0px;
width: 20%;
height: 100%;
z-index: 1;
font-size: 0.8em;
background-color: #2d2d2d;
color:rgb(196, 195, 195);
}

/* #declaration {
  font-size: 0.8em;
} */

#declaration {
  padding-right: 5px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  font-size: 0.7em;
  line-height: 150%;
  text-align: justify;
}

p {
font-size: 1.2em;
margin-left: 5px;
}

.select {
display:flex;
flex-direction: column;
position:relative;
height:80px;
}



.option {
padding:0 30px 0 10px;
min-height:40px;
display:flex;
align-items:center;
background:#333;
border-top:#222 solid 1px;
position:absolute;
top:0;
width: 100%;
pointer-events:none;
order:2;
z-index:1;
transition:background .4s ease-in-out;
box-sizing:border-box;
overflow:hidden;
white-space:nowrap;
}

.option:hover {
background:#666;
}


.select:focus .option {
position:relative;
pointer-events:all;
}



input.selectopt {
opacity:0;
position:absolute;
left:-99999px;
}



input.selectopt:checked + label.option {
order: 1;
z-index:2;
background:#666;
border-top:none;
position:relative;
}

input.selectopt:checked + label.option:after {
content:'';
width: 0; 
height: 0; 
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid white;
position:absolute;
right:10px;
top:calc(50% - 2.5px);
pointer-events:none;
z-index:3;
}

input.selectopt:checked + label.option:before {
position:absolute;
right:0;
height: 40px;
width: 40px;
content: '';
background:#666;
}





.select_var {
  display:flex;
  flex-direction: column;
  position:relative;
  height:80px;
  }

  .option_var {
      padding:0 30px 0 10px;
      min-height:40px;
      display:flex;
      align-items:center;
      background:#333;
      border-top:#222 solid 1px;
      position:absolute;
      top:0;
      width: 100%;
      pointer-events:none;
      order:2;
      z-index:4;
      transition:background .4s ease-in-out;
      box-sizing:border-box;
      overflow:hidden;
      white-space:nowrap;

      }
      
  .option_var:hover {
  background:#666;
  } 
      
input.selectopt_var {
  opacity:0;
  position:absolute;
  left:-99999px;
  z-index:3;
  }


.select_var:focus .option_var {
  position:relative;
  pointer-events:all;
  }

input.selectopt_var:checked + label.option_var {
  order: 1;
  z-index:5;
  background:#666;
  border-top:none;
  position:relative;
  }
  
  input.selectopt_var:checked + label.option_var:after {
  content:'';
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  position:absolute;
  right:10px;
  top:calc(50% - 2.5px);
  pointer-events:none;
  z-index:36;
  }
  
  input.selectopt_var:checked + label.option_var:before {
  position:absolute;
  right:0;
  height: 40px;
  width: 40px;
  content: '';
  background:#666;
  }


  .rampPicker {
    padding: 7px;
    background-color: white;
    z-index: 3;
  }

  .ramp {
    padding-bottom: 2px;
    padding-top: 2px;
    z-index: 3;
  }

  #rampNames {
    z-index: 10;
  }

  .button-12 {
    /* display: flex;
    flex-direction: column; */
    position: absolute;
    bottom: 0px;
    right: 0px;
    align-items: center;
    padding: 6px 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    /* border-radius: 6px; */
    border: none;
  
    background: #6E6D70;
    box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
    color: #DFDEDF;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  
  .button-12:focus {
    box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 3.5px rgba(80, 85, 96, 0.5);
    outline: 0;
  }