<style>
      html, body, #map {

        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      #map {
        text-align: center;
      }
      .esriLayer {
        display: block;
        width: 100%;
        border-radius: 15px;
        /* background-color: #0060ff; */
      }

      .esriLayerList .esriLabel {
        float: left;
        padding: 0;
      }

      .esriLayerList .esriTitle {
        font-size: 15px;
        font-weight: 400;
        line-height: inherit;
        text-align: left;
        padding-left: 7px;
        float: left;
      }

      .esriLayerList .esriTitle .socialVuln {
        float: none;
      }

      .esriContainer {
        border-radius: 15px;
        width: 99%;
      }

      .esriLabelContainer {
        width: 100%;
      }


      .esriLabelContainer .esriLabel {
       float: left;
       margin-top: 1%;
     }

      .socialVuln .esriLayerList {
        border-top: 1px inset;
        border-bottom: 1px inset;
      }

      .socialVuln .esriLabelContainer {
        border-top: 1px inset;
      }

      div.esriTitleContainer.socialVuln {
        border-radius: 0;
      }

      div.esriTitleContainer.socialVuln .cvuln {
        float: middle;
        width: 90%;
      }

      #layerListPane {
        width: 100%;
        align-items: left;
        overflow:visible;
      }

      .esriTitle {
        color: #ffffff;
      }


      .esriLabel input {
        -webkit-appearance: radio;
        -moz-appearance:radio;
      }

    .esriLayerList .esriTitleContainer {
      border: solid 1px #7a1705;
      border-radius: 10px;
      padding: 0;
      background-color: #7a1705; /* Crimson */
    }

    .esriLayerList {
      width: 100%;
    }

    .esriLayerList .esriCheckbox {
      margin: 2%;
    }



    /*  HELP-TIP     */

        .help-tip{
          position: relative;
          text-align: center;
          background-color: #80BCFE;
          border-radius: 50%;
          width: 16px;
          height: 16px;
          font-size: 14px;
          line-height: 16px;
          cursor: default;
          margin: 1%;
          float: right;
        }

        .help-tip:before{
            content:'i';
            font-weight: bold;
            color:#fff;
        }

        .help-tip:hover p{
            display:block;
            transform-origin: 100% 0%;
            -webkit-animation: fadeIn 0.3s ease-in-out;
            animation: fadeIn 0.3s ease-in-out;
        }

        .help-tip p{    /* The tooltip */
            display: none;
            text-align: left;
            background-color: #1E2021;
            top: 25px;
            right: 10%;
            padding: 20px;
            width: 300px;
            position: absolute;
            border-radius: 3px;
            box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
            color: #FFF;
            font-size: 13px;
            line-height: 1.4;
            z-index: 1;
        }

        .help-tip p:before{ /* The pointer of the tooltip */
            position: absolute;
            content: '';
            width:0;
            height: 0;
            border:6px solid transparent;
            border-bottom-color:#1E2021;
            right:5px;
            top:-12px;
        }

        .help-tip p:after{ /* Prevents the tooltip from being hidden */
            width:100%;
            height:40px;
            content:'';
            position: absolute;
            top:-40px;
            left:0;
        } /* END HELP-TIP */


      /* CSS animation */

      @-webkit-keyframes fadeIn {
          0% {
              opacity:0;
              transform: scale(0.6);
          }

          100% {
              opacity:100%;
              transform: scale(1);
          }
      }

      @keyframes fadeIn {
          0% { opacity:0; }
          100% { opacity:100%; }
      }

      /* Climate table */

      #climateExposureMsg {
          background-color: #ffcc33;
          text-align: center;
          margin: 2%;
          font-weight: 400;

      }

      #LandUse .help-tip {
        display: inline-block;
      }

      #climateExposure .help-tip {
        white-space: normal;
      }

      #climateExposure, #Landuse {
        border: inset 1px #525252;
      }

      #LandUse thead, #climateExposure thead {
        width: 100%;
        border-bottom: 1px solid #525252;
      }

      #climateExposure th, #LandUse th {
        border-right: inset 1px #525252;
     }

       #climateExposure td, #LandUse td {
         border-right: inset 1px #525252;
      }

      #climateExposure tr {
        border-right: inset 1px #525252;
      }

      #LandUse tr, #climateExposure tr {
        border-bottom: inset 1px #525252;
      }

      td#afdv,td#pafdv,td#afwt,td#pafwt,td#afwk,td#pafwk,td#afpr,td#pafpr,td#afarea,td#pafarea {
        text-align:center
      }

      td#che, td#cpd, td#mhe, td#mpd, td#hhe, td#hpd  {
        text-align: center;
      }

      /* Legend Div */
      #legendDiv {
        display: inline-block;
      }

      /* MAP */

      #map {
        /*min-height: 650px;*/
      }

      /* .ui-widget {
        width: 100%;
        display: block;
      } */

      .ui-menu-item {
        width: auto;
      }

      .search-container {
        width: 100%;
        display: block;
      }

      #searchtags {
        margin-top: 10px;
      }

      #county-search, #city-search {
        display: inline-block;
        width: 40%;
        padding-right: 2%;
      }

      #county-search label, #city-search label {
        display: inline-block;
        color: #FFFFFF;
      }

      #county-search input, #city-search input {
        margin-left: 10px;
      }

      .searchHint {
        font-size: 14px;
        font-style:italic;
      }

      /* END MAP CSS */

/*   Climate vulnerability changes       */

  #cvtop {
    display: inline-block;
    width: 20%;
  }

  #county-search-dd, #city-search-dd {
    display: inline-block;
    width: 40%;
    padding-right: 2%;
  }

  #county-search-dd {
    padding-left: 1%;
  }

  #county-search-dd label, #city-search-dd label {
    color: #FFFFFF;
  }

 #city-search-dd input {
    color: #FFFFFF;
    margin-right: 20px;
  }

.dijitAccordionContainer {
  border: 0;
}

#legendPane_button {
  display:none;
}


    /*  TABLES  */
  /* #avgEHE .help-tip {
    display: inline-block;
  } */

  #avgEHE, #avgEPE {
    border: inset 1px #525252;
  }

  /* #avgEHE text {
    float:left;
  }

  #avgEHE .help-tip {
    float: right;
  } */

  #avgEHE thead, #avgEPE thead {
    width: 100%;
    border-bottom: 1px solid #525252;
  }

  #avgEHE th, #avgEPE th {
    border-right: inset 1px #525252;
 }

 #avgEHE th {
   text-align: center;
 }

   #avgEHE td, #avgEPE td {
     border-right: inset 1px #525252;
     text-align: center;
  }

  #avgEHE tr {
    border-right: inset 1px #525252;
  }

  #avgEHE tr, #avgEPE tr {
    border-bottom: inset 1px #525252;
  }

  #SVtbl td {
    width: 50%;
  }

  td#hhdr, td#htr, td#mslr, td#sevr, td#tvr {
    text-align: center;
  }

  /* td#afdv,td#pafdv,td#afwt,td#pafwt,td#afwk,td#pafwk,td#afpr,td#pafpr,td#afarea,td#pafarea {
    text-align:center
  }

  td#che, td#cpd, td#mhe, td#mpd, td#hhe, td#hpd  {
    text-align: center;
  } */

/*   END -Climate vulnerability changes       */


@media only screen and (max-width: 810px) {
  #legendPane {
    padding-left: 20px;
  }
        #map {
          text-align: center;
        }

        #map_gc {
          display: block;
        }
}

@media only screen and (max-width: 650px) {

}

@media only screen and (max-width: 420px) {

  .esriContainer {
    border-radius: 15px;
    justify-content: center;
    display: inline-flex;
    width: 100%;
  }

  #layerList {
       width: auto;
  }

  #county-search, #city-search {
    display: block;
    width: 100%;
  }

  #county-search label, #city-search label {
    display: block;
  }
}
</style>
