html,body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    font:'Gill Sans', 'Roboto', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    background-color:#284b74;
  }
  
  main{
    top: 80px;
    bottom: 0;
    position:absolute;
    width: 100%;
    font-family:'Gill Sans', 'Roboto', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
  }
  
  header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    /* 
    font-size: 25px; */
    /* color: #E0E1DD; */
  }
  
  #outer {
    display: flex;
    flex-flow: row;
    height: 100%;
    /* 
    font-size: 25px;  */
  }
  
  .box p{
    padding-left: 5px; 
    padding-top: 5px;
  }

  .box{
    background-color:#ffffff;
    height: 100%;
    width: 49.9%;
    margin-bottom: 5px;
  }

  #graphComponent{
    float: left;
    margin-right: 2px;
    margin-left: 5px;
  }
  
  #graphComponent2{
    flex-grow: 1;
    margin-left: 2px;
    margin-right: 5px;
  }
  
  /* .wrapper {
      background-color: #ad1533;
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-auto-rows: minmax(50px, auto);
      grid-template-areas:
        "hd hd hd   hd   hd   hd   hd   hd hd"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "main main main main main main main main main"
        "ft ft ft ft ft ft ft ft ft";
  } */
  
  /* .footer {
   
    background-color: #E0E1DD;
    background-color: #0D1B2A;
    grid-area:  ft;
    border-radius: 3px;
    border-left: 8px solid #415A77;
  } */
  
  /* --------------------------------------------------------------------------------- */
  
  
  ul {
  
      list-style-type: none;
      margin: 0px;
      padding: 0px;
      background-color: #0D1B2A;
  
      position:relative;
      top: 5px;
      width: 100%;
      height:fit-content;
    }
  
    /* .type1 {
      padding: 0px 0px;
      
      font-size: 20px;
      text-align: center;
      border-radius: 3px;
      z-index: -1;
    }
     */
    /* li {
      float:inline-end;
    } */
    
    li a{
      position: relative;
      display: block;
      text-align: center;
      padding: 0px 16px;
      text-decoration: none;
    }
    
    /* Change the link color to #111 (black) on hover */
    li a:hover {
      background-color: #111;
    }
    
    /* ------------------------------------------------- */
  
    .innerButton{
     
      color: #f7f5fb;
      background-color: #0D1B2A;
      padding: 0px 6px;
      border: 5px #111;
      border-radius: 3px;
      border-color:#111;
      min-width: 70%;
      text-align: center;
      float: left;
      margin-top: 5px;
      font-size: 18px;
    }
  
    .Same{
      display:inline-block;
    }
  
    /* ------------------------------------------------- */
    /* style = "overflow: visible; width : 8%; float: left;" */
  
    .dropdown {
      float:left;
      text-align: center;
      color: #f7f5fb;
      padding: 14px 16px;
      text-decoration:none;
    }
  
    #Instructions{
      background-color: #284b74;
      border: none;
      padding: 14px 16px 8px 16px;
    }
  
    #Instructions:hover{
      background-color: #111;
    }

    #stop{
      background-color: #284b74;
      border: none;
      padding: 14px 16px 8px 16px;
    }

    #stop:hover{
      background-color: #111;
    }
  
    .dropdown:hover{
      background-color: #111;
    }
    
    .dropdown-content {
      /* border: 3px black; */
      display: none;
      position: absolute;
      /* background-color: #E0E1DD; */
      background-color: #ffffff;
      border: 3px  #ffffff;
      min-width:max-content;
      font-size: 18px;
      text-align: left;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 0px 0px;
      z-index: 1;
      overflow: auto;
      top: 52px;
      left: 0px;
    }
    
  /* Links inside the dropdown */
  .dropdown-content a {
      position: relative;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      text-align: left;
      display: block;
  
      border: 3px solid white;
    }
  
    .dropdown:hover .dropdown-content {
      display: block;
      z-index: 1;
      overflow:visible;
    }
  
    .t1hover:hover{
      background-color: #91969a;
    } 
    
    /* -------------------------------------------------- */
  
     /* Callout box*/
  .callout {
   
    position: absolute;
    right: 2%;
    top:3%;
    display: flex;
    flex-flow: column;
    /* bottom: 200px; */
    /* margin-right: 20px; */
    max-width:fit-content;
    max-height: 90%;
    display: none;
  }
  
  /* Callout header */
  .callout-header {
    padding: 10px 10px;
    background: #0D1B2A;
    font-size: 20px;
    color: #E0E1DD;
    cursor: move;
  }
  
  /* Callout container/body */
  .callout-container {
    padding: 5px;
    padding-right: 12px;
    padding-bottom: 7px;
    flex-grow: 1;
    overflow: scroll;
    background-color: #E0E1DD;
    font-size: 16px;
    color: black;
    border:#0D1B2A solid;
  }
  
  /* Close button */
  .closebtn {
    position: absolute;
    top: 5px;
    right: 15px;
    color: #E0E1DD;
    font-size: 20px;
    cursor: pointer;
  }
  
  /* Change color on mouse-over */
  .closebtn:hover {
    color: #E0E1DD;
  } 
  
  .info {
   
    font-size: 17px;
    height:fit-content;
    background-color: #E0E1DD;
    padding-top: 15px;
    padding-left: 10px;
  }
  
  
  
  /* Edit form styling */
  label{
    font-weight: normal;
   
    font-size: 16px;
  }
  
  .prime{
    /* font-weight: bold; */
   
    font-size: 17px;
  }
  
  
  .inputR {
    appearance: none;
  
   
  
    border-radius: 50%;
    width: 16px;
    height: 16px;
  
    border: 2px solid #415A77;
    transition: 0.2s all linear;
    margin-right: 5px;
  
    position: relative;
    top: 4px;
  }
  
  .inputR:checked {
    border: 6px solid #0D1B2A;
  }
  
  .slider {
    /* -moz-appearance: none;  */
  
   
    width: 100%;
    height: 10px;
    border-radius: 5px;  
    background: #415A77;
    outline:none;
    opacity: 1;
    -webkit-transition: .2s;
    transition: .2s;
  }
  
  .slider::-webkit-slider-thumb {
    /* -webkit-appearance: none; */
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%; 
    background: #0D1B2A;
    border-color: #111;
    opacity: 1;
    cursor: pointer;
  }
  
  input[type="range"]::-moz-range-thumb {
  
   
    width: 15px;
    height: 15px;
    border-radius: 10%;
    background: #0D1B2A;
    border-color: #111;
    opacity: 1;
    cursor: pointer;
  }
  
  input[type=int] {
   
    min-width: 80px;
    width: 100%;
    padding: 6px 8px;
    font-size: 14px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #0D1B2A;
    border-radius: 4px;
  
  }
  
  input[type=text] {
    
    min-width: 80px;
    width: 100%;
    padding: 6px 8px;
    font-size: 14px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #0D1B2A;
    border-radius: 4px;
  }
  
  input[type=number] {
    
    min-width: 80px;
    width: 100%;
    padding: 6px 8px;
    font-size: 14px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #0D1B2A;
    border-radius: 4px;
  
  }
  
   /* The switch - the box around the slider */
   .switch {
    
    position: relative;
    display: inline-block;
    width: 54px;
    height: 28px;
    z-index: 6;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider2 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #415A77;
    background-color: #C58882;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider2:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: #0D1B2A;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider2 {
    background-color: #83E8BA;
  }
  
  input:focus + .slider2 {
    box-shadow: 0 0 1px #415A77;
  }
  
  input:checked + .slider2:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    content: "";
  }
  
  /* Rounded sliders */
  .slider2.round {
    border-radius: 3px;
  }
  
  .slider2.round:before {
    border-radius: 3px;
  } 
  
  .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: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }