/*  Tree PopUp   */
  #treeInfo {
    background-color: #00466D;
    height: 100%;
    width: 400px;
    z-index: 150;
    visibility: hidden;
    position: absolute;
    top: 0px;
    right: -15px;
    color: #E6EDF1;
    font-family: Helvetica, sans-serif;
  }
  /*  Aerial Photo Button   */
  #basemap{
    background-color: #00466D;
    height: 30px;
    width: 30px;
    z-index: 50;
    position: absolute;
    top: 8px;
    left: 65px;
    color: #E6EDF1;
    font-size: 25px;
    font-family: Helvetica, sans-serif;
    padding-left: 3px;
    padding-top: 3px;
  }
  /*  Filter Tree Button   */
  #filterTree{
    background-color: #00466D;
    height: 30px;
    width: 30px;
    z-index: 50;
    position: absolute;
    top: 8px;
    left: 110px;
    color: #E6EDF1;
    font-size: 25px;
    font-family: Helvetica, sans-serif;
    padding-left: 3px;
    padding-top: 3px;
  }
/*   Tosa Logo   */ 
  #logo{
    background-color: #00466D;
    height: 40px;
    width: 45px;
    z-index: 20;
    position: absolute;
    top: 5px;
    left: 5px;
  }
/*   Initial View Dash Board   */
  #overallStats{
    background-color: rgba(0, 70, 109, .95) ;
    height:100%;
    width: 100%;
    z-index: 200;
    position: absolute;
    top: 0%;
    left: 0%;
    color: #E6EDF1;
    font-family: Helvetica, sans-serif;
  }
/*   Search Tool Background   */
  #toolsbackg{
    background-color: #00466D;
    height: 50px;
    width: 400px;
    z-index: 16;
    position: absolute;
    top: 0px;
    left: 0px;
    padding-left: 160px;
    padding-right: 10px;
  }
/*   Choose Tree from Filter  */
  #chooseTree{
    background-color: #00466D;
    height: calc(100% - 51px);
    width: 400px;
    z-index: 16;
    position: absolute;
    top: 51px;
    left: 0px;
    visibility: hidden;
  }




/*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/


        /*Accordians*/

        /* Style the buttons that are used to open and close the accordion panel */
        .accordion1 {
            background-color: #CEDAE1;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;
          }
    
          /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
          .active, .accordion1:hover {
            background-color: #ccc;
          }
    
          .accordion2 {
            background-color: #CEDAE1;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;
          }
    
          /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
          .active, .accordion2:hover {
            background-color: #ccc;
          }
    
          .accordion3 {
            background-color: #CEDAE1;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;
          }
    
          /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
          .active, .accordion3:hover {
            background-color: #ccc;
          }
    
          .accordion4 {
            background-color: #CEDAE1;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;
          }
    
          /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
          .active, .accordion4:hover {
            background-color: #ccc;
          }
    
          .accordion5 {
            background-color: #CEDAE1;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;
          }
    
          /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
          .active, .accordion5:hover {
            background-color: #ccc;
          }
    
          .accordion5 {
            background-color: #CEDAE1;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;
          }
    
          /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
          .active, .accordion5:hover {
            background-color: #ccc;
          }
    
          .accordion6 {
            background-color: #CEDAE1;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;
          }
    
          /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
          .active, .accordion6:hover {
            background-color: #ccc;
          }
    
          .accordion7 {
            background-color: #CEDAE1;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;
          }
    
          /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
          .active, .accordion7:hover {
            background-color: #ccc;
          }
    
          /* Style the accordion panel. Note: hidden by default */
          #panel1 {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
          }
    
          #panel2 {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
          }
    
          #panel3 {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
          }
    
          #panel4 {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
          }
    
          #panel5 {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
          }
    
          #panel6 {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
          }
    
          #panel7 {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
          }