body {
        font-family: "Roboto", sans-serif;
        background-color: #111;
        margin: 0;
        height: 100%;
        color: #818181;
        font-size:15px;
        line-height: 1.4;
        overscroll-behavior: contain;
      }
      
      .toc_link_on{
        color: #f1f1f1 !important;
      }
      .toc_link_off{
        color: #818181 !important;
      }
      
      .toc_link_off:hover{
        color: #f1f1f1 !important;
      }
      
      /* Right-side navigation */
      /* https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp */
      .sidenav {
        width: 60px;
        position: fixed;
        z-index: 1;
        right: 10px;
        top: 70px;
        background-color: #111;
        opacity: 0.9;
        overflow-x: hidden;
        padding: 8px 10px;
        border-radius: 4px;
      }
      .sidebar {
        height: 100vh;
        max-height: 90%;/*calc(100vh - 10rem);*/
        width: 325px;
        position: fixed;
        z-index: 6000;
        top: 55px;
        left: 0;
        background-color: #111;
        opacity: 0.9;
        overflow-y: auto;
        transition: 0.5s;
        padding-top: 15px;
        padding-bottom:66px;
      }
      
      .sidebar a {
        padding: -1px 2px 2px 2px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
      }
    
      .sidebar a:hover, button:hover {
        color: #f1f1f1;
      }


     /*!
       * Hamburgers
       * @description Tasty CSS-animated hamburgers
       * @author Jonathan Suh @jonsuh
       * @site https://jonsuh.com/hamburgers
       * @link https://github.com/jonsuh/hamburgers
       */
      .hamburger {
        padding: 15px 5px 10px 15px;
        display: inline-block;
        cursor: pointer;
        transition-property: opacity, filter;
        transition-duration: 0.15s;
        transition-timing-function: linear;
        font: inherit;
        color: #315b7d;
        text-transform: none;
        background-color: #111;
        border: 0;
        margin: 0;
        overflow: visible; }
        .hamburger:hover .hamburger-inner {
          background-color: #f1f1f1;
        }
        .hamburger:hover .hamburger-inner::before {
          background-color: #f1f1f1;
        }
        .hamburger:hover .hamburger-inner::after {
          background-color: #f1f1f1;
        }
        .hamburger.is-active:hover .hamburger-inner {
          background-color: #f1f1f1;
        }
        .hamburger.is-active:hover .hamburger-inner::before {
          background-color: #f1f1f1;
        }
        .hamburger.is-active:hover .hamburger-inner::after {
          background-color: #f1f1f1;
        }        
        .hamburger.is-active .hamburger-inner,
        .hamburger.is-active .hamburger-inner::before,
        .hamburger.is-active .hamburger-inner::after {
          color: #f1f1f1; }
      
      .hamburger-box {
        width: 40px;
        height: 24px;
        display: inline-block;
        position: relative; 
        padding:0;
      }
      
      .hamburger-inner {
        display: block;
        top: 50%;
        margin-top: -2px; }
        
        /* change this width to change the width of the hamburger  */
        .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
          width: 30px; 
          height: 3px;
          background-color: #315b7d;
          border-radius: 4px;
          position: absolute;
          transition-property: transform;
          transition-duration: 0.15s;
          transition-timing-function: ease; }
        .hamburger-inner::before, .hamburger-inner::after {
          content: "";
          display: block; }
        .hamburger-inner::before {
          top: -10px; }
        .hamburger-inner::after {
          bottom: -10px; }
        .hamburger-inner:hover{
          color: #f1f1f1;
        }

    
      .hamburger--slider .hamburger-inner {
        top: 2px; }
        .hamburger--slider .hamburger-inner::before {
          top: 10px;
          transition-property: transform, opacity;
          transition-timing-function: ease;
          transition-duration: 0.15s; }
        .hamburger--slider .hamburger-inner::after {
          top: 20px; }
      
      .hamburger--slider.is-active .hamburger-inner {
        transform: translate3d(0, 10px, 0) rotate(45deg); }
        .hamburger--slider.is-active .hamburger-inner::before {
          transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
          opacity: 0; }
        .hamburger--slider.is-active .hamburger-inner::after {
          transform: translate3d(0, -20px, 0) rotate(-90deg); }

      .hamburger:active, .hamburger:focus {
        outline: 0;
        border: none;
        -moz-outline-style: none;
      }

      /* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate */
      .accordion {
        background-color: #111; /* Change this to add color to the background of a dropdown menu title */
        color: #818181;
        width: 100%;
        padding: 6px 2px 6px 10px;
        font-size: 20px;
        cursor: pointer;
        border: none;
        display: block;
        outline: none;
        text-align: left;
      }

      .subaccordion {
        background-color: #111; /* Change this to add color to the background of a dropdown menu title */
        color: #818181;
        width: 100%;
        padding: 6px 2px 6px 10px;
        font-size: 20px;
        cursor: pointer;
        border: none;
        display: block;
        outline: none;
        text-align: left;
      }
      
      .panel {
        padding: 0 18px;
        background-color: #111;
        overflow: hidden;
        height:auto;
        max-height: 0;
        transition: max-height 0.9s ease-out;
      }
      
      .subpanel {
        padding: 0 18px;
        background-color: #111;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.9s ease-out;
      }    
      

      
      /* Tooltip for info icon in sidebar*/
      .CellWithComment{
        position:relative;
        overflow-y:visible;
        /*display: inline-block;*/
      }
      
      .CellComment{
        display:none;
        position:absolute; 
        z-index:9999;
        border:1px;
        background-color:white;
        border-style:solid;
        border-width:1px;
        border-color:black;
        padding:3px;
        color:#f1f1f1;
        top:15px; 
        right:85%;
        width:200px;
        
      }
      
      .CellWithComment:hover span.CellComment{
        display:block;
        background-color: black;
        visibility:visible;
        
      }

      
      .tooltip.show{
        font-family: Arial, sans-serif !important;
        opacity: 1 !important;
        font-size:18px;
      }
      
      


      .navbar {
        -webkit-box-shadow: 0px -10px 40px 26px rgba(22,22,23,1);
        -moz-box-shadow: 0px -10px 40px 26px rgba(22,22,23,1);
        box-shadow: 0px -10px 40px 26px rgba(22,22,23,1);
        margin-top: 0px;
        padding: 0px;
        border-bottom: 2px solid #818181;
      }
      
      .mapboxgl-map {
        -webkit-box-shadow: 0px -10px 40px 26px rgba(22,22,23,1);
        -moz-box-shadow: 0px -10px 40px 26px rgba(22,22,23,1);
        box-shadow: 0px -10px 40px 26px rgba(22,22,23,1); 
      }
      
      #main {
        transition: margin-left .5s;
        padding: 16px;
      }
      
      .deck-tooltip {
        font-family: Helvetica, Arial, sans-serif;
        padding: 6px !important;
        margin: 8px;
        max-width: 300px;
        font-size: 10px;
      }
      
      /* HOVER TOOLTIP on LMU LAYER */
      .toolTip_class{
        background-color: #111;
        color: #818181;
      }
      
      #tooltipTable{
        border-collapse: collapse;
        border: 0px solid white;
        font-size: 15px;
        direction: left;
      }
      
      /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a              smaller font size) */
      @media screen and (max-height: 450px) {
        .sidebar {padding-top: 15px;}
        .sidebar a {font-size: 18px;}
      }
      
      .slider {
        -webkit-appearance: none;
        width: 75%;
        height: 3px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
      
      }
      
      div:active, div:focus {
        outline: 0;
        -moz-outline-style: none;
      }      
      
      .slider:hover {
        opacity: 1;
      }
      
      .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: #315b7d;
        cursor: pointer;
      }
      
      .slider::-moz-range-thumb {
        width: 17px;
        height: 17px;
        background: #315b7d;
        cursor: pointer;
      }
      
      .legend {
        z-index: 800;
        line-height: 18px;
        color: #818181;
      }
      .legend i {
        z-index: 800;
        width: 18px;
        height: 18px;
        float: left;
        margin-right: 8px;
        opacity: 0.9;
      }
      
      .info {
        padding-right: 20px;
        padding-bottom: 10px;
        font: 12px;
      }
      div.info.legend.leaflet-control br {
        z-index: 800;
        clear: both;
      }
      
      
      
      html {
        width: 100%;
        height: 100%;
        margin-top: 25px;
        position: absolute;
        scroll-behavior: smooth;
      }
      
      
      #wrapper{
        position:absolute;
        height:100%;
        width:100%;
      }
      
      .panels { 
        position:relative;
        height:100%;
        min-height:100%;
        width:100%;
        z-index:1000;
    }
    
      #map{
        position:fixed;
        color:red;
        top:0;
        z-index:300;
        margin-top: 50px;
      }

      
      
      #info_panel{
        height: -moz-fit-content;
        height: fit-content;
         bottom: -10%;
         scroll-margin-top: 200px;
         width: 98%;
         opacity:0.9;
         margin-left:1%;
         padding: 8px;
         border-radius: 12px;
         border: 1px solid #dee2e6;
         
         -webkit-box-shadow: 0px -10px 40px 26px rgba(22,22,23,1);
        -moz-box-shadow: 0px -10px 40px 26px rgba(22,22,23,1);
        box-shadow: 0px -10px 40px 26px rgba(22,22,23,1);
      }
      
      #info_panel2{
         scroll-margin-top: 100px;
         width:98%;
         margin-left:1%;         
      }      

    /* TOC on right with links to different sections 
      #infoi {
        position: relative;

      }
    */
    
      /* width */
      ::-webkit-scrollbar {
        width: 10px;
        border-radius: 12px;
      }
      
      /* Track */
      ::-webkit-scrollbar-track {
        background: #f1f1f1; 
      }
       
      /* Handle */
      ::-webkit-scrollbar-thumb {
        background: #888; 
      }
      
      /* Handle on hover */
      ::-webkit-scrollbar-thumb:hover {
        background: #555; 
      } 
      
      .leaflet-control{
        z-index: 2000;
      }
      
      /* These leaflet-bar things adjust the style of the zoom controls */
      .leaflet-bar{
        width:50px;
        float:center;
      }
      .leaflet-bar a, .leaflet-control-layers-toggle {
        width: 75%;
        background-color:#111;
        color:white;
        float: center;
      }
      .leaflet-bar a, .leaflet-bar a:hover{
        width:75%;
        border-bottom:0;
      }
      .leaflet-bar a.leaflet-disabled{
        background-color:#111;
        color:white;
      }
      
      
      .leaflet-bottom.leaflet-right .leaflet-control {
            margin-bottom: 6vh;
            background-color: #111;
            opacity: 0.7;
            padding: 10px;
            border-radius: 4px;
            
      }      
      
      /* Arrows for the bottom-hidden info pane div */
      .arrow_nav{
        float:right;
      }
      
      .arrow{
        border: solid black;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 3px;
      }
      
      .arrow_down {
        position: relative;
        top: -5px;
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        border-right: 0.2em solid #4682b4;
        border-top: 0.2em solid #4682b44;
        transform: rotate(135deg);
        margin-right: 0.5em;
        margin-left: 1.0em;

      }
      
      .arrow_up {
        position: relative;
        top: -5px;
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        border-right: 0.2em solid #4682b4;
        border-top: 0.2em solid #4682b4;
        transform: rotate(-45deg);
        margin-right: 0.5em;
        margin-left: 1.0em;
       } 
       


      
      #mynetwork {
        margin: 0px;
        padding: 0px; 
        
        position: absolute;
        display: inline-block;
        top: 5vh;
        left: 0px;
        bottom: 0px;
        right: 0%;
        
        background: transparent;
      }
      
      
      /* The Modal (background) */
      .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 5000; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
      }
      
      /* Modal Content/Box */
      .modal-content {
        background-color: #fefefe;
        margin: 15% auto; /* 15% from the top and centered */
        padding: 20px;
        border: 1px solid #888;
        width: 80%; /* Could be more or less, depending on screen size */
      }
      
      /* The Close Button */
      .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
      }
      
      .close:hover,
      .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
      }      

      body.modal-open div.modal-backdrop { 
          z-index: 0 !important; 
      }  
      
      
      
input[type=color]{
  width: 40px;
  height:25px;
  color: #111;
  border:#111;
  background-color: #111;
  opacity:0.9;
  padding:0;
  margin:0;
  
}

.arrow{
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding:3px;
}

.down{
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}