/* div#sidebar-map-wrapper {
        width: 100%;
        height: 700px;
      } */

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
      }

      .legend-item-title{
        font-family: "Bebas Neue", Sans-serif !important;
      }

      /* #sidebar {
        position: absolute;
        width: 20%;
        height: 100%;
        top: 0;
        left: 0;
        overflow: scroll;
      } */

      .marker {
   background-size: cover;
   padding: 2px;
   width: 19px;
   height: 19px;
   border-radius: 5px;
   opacity: 0.8;
   cursor: pointer;
 }
 .marker:hover {
   width: 23px;
   height: 23px;
 }


  /*popup styling*/

 .mapboxgl-popup-close-button {
  font-family: "Bebas Neue", serif;
   float: right;
   right: 0px;
   border-radius: 21px;
   background-color: #bd2232;
   border: 1px solid #bd2232;
   width: 26px;
   height: 26px;
   font-size: 14px;
   /* color: #E94E1B; */
   cursor: pointer;
   margin-top: 5px;
   margin-right: 5px;
   padding: 0;
   line-height: 25px;
   font-weight: bold;
   text-align: center;
   color: #ffffff;
   outline: none;
 }

 .mapboxgl-popup-close-button:hover {
   color: #bd2232;
   background-color: #ffffff;
   border: 1px solid #bd2232;
 }

 div.web-links-div {
   display: inline-block;
 }

 span>img.address-icon {
   width: 21px;
   margin-right: 10px;
   padding: 5px;
 }

 img.web-icons {
   width: 21px;
   margin-right: 10px;
   padding: 5px;
 }

 img.web-icons:hover {
   width: 21px;
   border-radius: 3px;
   margin-right: 10px;
   background-color: #f2d48d;
   cursor: pointer;
 }

 span>a.web-links {
   text-decoration: none;
   margin-top: 0px;
   position: absolute;
   color: #323A3C;
   margin-left: -10px;
   width: 255px;
   padding: 5px;
   outline: none;
 }

 p.description-text {
   margin-top: 10px;
   color: #323A3C;
   border: 1px solid #a3a3a3;
   border-radius: 10px;
   padding: 5px;
 }

 a.address-text:hover {
   border-radius: 3px;
   background-color: #f2d48d;
   cursor: pointer;
 }

 .mapboxgl-popup-tip {
   margin-left: 1%;
 }

 .mapboxgl-popup-content {
   font: 16px/14px "Bebas Neue";
   width: 100%;
   border: 1px solid #bd2232;
   border-radius: 15px;
   background-color: #ffffff;
   color: #323A3C;
   text-align: center;
 }

 .mapboxgl-popup-content img.popup-icon {
   width: 23%;
   /* border-radius: 21px; */
   margin-left: 102px;
   opacity: 50%;
 }

 .mapboxgl-popup-content div.title {
  font-family: "Bebas Neue", serif;
   color: #323A3C;
   text-align: center;
   font-weight: bold;
   line-height: 21px;
   margin-right: 22px;
   margin-bottom: 18px;

 }

 p.title{
  font-size: 18px;
  margin-top: 30px;
 }
 p.details{
  font-size: 12px;
  font-weight: 100;
  margin: 0;
 }

 #map > div.mapboxgl-popup.mapboxgl-popup-anchor-bottom > div.mapboxgl-popup-content > p{
  margin: 0;
 }

 .mapboxgl-popup-content div.description {
   margin-top: 27px;
 }

 .mapboxgl-popup-content div.content {
   height: 33px;
   width: 98%;
   border-radius: 8px;
   background-color: #ffffff;
   /* color: #323A3C; */
   text-align: left;
   margin-top: 10px;
 }

 .mapboxgl-popup-content div.content img {
   width: 200px;
   /* height: 200px; */
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   margin-top: 10px;
   margin-bottom: 16px;
 }

 div.explore-button {
   border-color: #323A3C;
 }


 .mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
 .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
 .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
   border-bottom-color: #323A3C;
 }

 .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
 .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
 .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
   border-top-color: #323A3C;
 }

 .mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
   border-right-color: #323A3C;
 }

 .mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
   border-left-color: #323A3C;
 }

 p.description {
   margin-left: 5px;
 }



 p.point-title,
 p.point-description {
   margin-left: 0;
   margin-right: 0;
   font-size: 15px;
 }

 p.point-title {
   color: #8d5a07;
   font-weight: bold;
   margin-bottom: 0;
 }

 p.point-description {
   color: #8d5a07;
   margin-top: 0;
   margin-bottom: 0;
 }

      div.details-name,
      div.details-value {
        color: #232323;
        padding-left: 10px;
        font-size: 13px;
      }
      div.details-name {
        font-family: "Bebas Neue", Sans-serif !important;
        font-size: 13px;
      }
      div.details-value {
        font-weight: 300;
        font-family: "Bebas Neue", Sans-serif !important;
      }

      button.close-sidebar {
        font-family: "Bebas Neue", Sans-serif !important;
        background-color: #232323;
        color: #f6f6f6;
        border-radius: 5px;
        margin-top: 10px;
        position: absolute;
        text-align: center;
        width: 30%;
        margin-left: 35%;
        z-index: 3;
      }
      button.close-sidebar:hover {
        background-color: #f6f6f6;
        color: #232323;
        cursor: pointer;
      }

      div.county-logo {
        margin-top: 10px;
        width: 50%;
        margin-left: 25%;
      }
      div.county-logo img {
        width: 100%;
        border-radius: 8px;
      }
      div.county-logo-subtitle {
        font-size: 12px;
        text-align: center;
      }

      div.title {
        text-align: center;
        border: 1px solid #e20b36;
        border-radius: 5px;
        color: #ffffff;
        background-color: #e20b36;
        padding: 4px;
        margin-top: 50px;
        width: 92%;
        margin-left: 2%;
        margin-bottom: 10px;
        font-family: "Bebas Neue", Sans-serif !important;
      }
	  

      div.sidebar-details-box {
        overflow-y: auto;
        height: 100%;
      }

      #sidebar table {
        border: 1px solid #e20b36;
        width: 100%;
        border-collapse: collapse;
        width: 96%;
        position: absolute;
        margin-top: 10px;
        margin-left: 2%;
        font-size: 14px;
      }
      #sidebar td {
        border: 1px solid #e20b36;
        height: 28px;
      }
      #sidebar td.first-column {
        text-align: right;
        width: 37.5%;
        font-weight: 600;
      }
      #sidebar td.second-column {
        text-align: left;
        width: 37.5%;
      }
      #sidebar td.third-column {
        text-align: center;
        width: 25%;
      }

      a.details-link {
        text-decoration: none;
        padding: 4px;
        background-color: #e20b36;
        color: #f6f6f6;
        border-radius: 5px;
      }
      a.details-link:hover {
        background-color: #f6f6f6;
        color: #e20b36;
      }

      /* #searchTxt{
  z-index: 2001;
} */

      div.mapboxgl-popup-content {
        color: #000000;
      }

      .map-paragraph {
        margin: 3px;
      }

      .mapboxgl-ctrl-geocoder--input {
        font: 14px "Helvetica Neue", Arial, Helvetica, sans-serif;
      }

      /*search box from mapbox*/

      .filter-ctrl {
        position: absolute;
        top: 14px;
        left: 10px;
        z-index: 1;
      }

      .filter-ctrl input[type="text"] {
        font: 15px "Helvetica Neue", Arial, Helvetica, sans-serif;
        width: 294px;
        border: 0;
        background-color: #fff;
        color: rgba(0, 0, 0, 0.5);
        padding: 5px;
        /* box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); */
        border-radius: 3px;
        margin-top: -3px;
        margin-right: 39px;
        height: 23px;
      }

      /*end search box from mapbox*/

      /* styling legend items */
      h1.welcome-popup {
        margin-top: 5px;
        margin-left: 8px;
        font-size: 22px;
        font-family: "Bebas Neue", Sans-serif !important;
      }
      span.welcome-close-button {
        float: right;
        right: 13px;
        border-radius: 21px;
        background-color: #000000;
        border: 1px solid #000000;
        width: 26px;
        height: 26px;
        font-size: 14px;
        /* color: #E94E1B; */
        cursor: pointer;
        margin-top: 6px;
        margin-right: 15px;
        padding: 0;
        line-height: 26px;
        font-weight: bold;
        text-align: center;
        color: #ffffff;
      }

      span.welcome-close-button:hover {
        /* border-color: #E94E1B; */
        /* background-color: #E94E1B; */
        color: #252424;
        background-color: #ffffff;
        border: 1px solid #252424;
      }

      .toggle-legend-box {
        display: none;
      }

      .visible-legend-box {
        display: block;
        position: relative;
        border-radius: 7px;
        background-color: white;
        z-index: 3;
        position: absolute;
        width: 290px;
        /* min-width: 450px; */
        /* height: 355px; */
        right: 10px;
        top: 120px;
        padding: 3px;
        /* transition: left 0.7s ease; */
      }

      div.toggle-legend-box {
        background-color: #ffffff;
        color: #000000;
      }

      span.legend-item-title {
        font-size: 12px;
      }

      div.legend-item {
        margin-bottom: 5px;
      }

      span.polygon-color {
        display: inline-block;
        width: 20px;
        margin-right: 10px;
        border-color: #999999;
      }

      #legend-items > div > span.polygon-color > img{
        width: 20px;
      }
#legend-items > div> span.legend-item-title{position: absolute;
    margin-top: 4px;}
      

      div#legend-items {
        margin-left: 10px;
      }
      /* end styling legend items */

      /* custom control / custom button */
      .toggle-legend-control {
        background-repeat: no-repeat;
        background-position: center;
        pointer-events: auto;
        background-image: url(https://wearetopple.com/wp-content/uploads/2023/10/toggle-legend.png);
      }

      /* end custom control / custom button */

      @media screen and (max-width: 940px) {
      }

      img.popup-image {
   width: 100%;
   max-width: 150px;
   border-radius: 3px;
 }
 /* Responsiveness */
 @media screen and (max-width: 1327px) and (min-width: 814px) {}

 @media screen and (max-width: 813px) and (min-width: 685px) {
     span.welcome-close-button {
       float: right;
       right: 5px;
   }
 }

 @media screen and (max-width: 684px) and (min-width: 631px) {}

 @media screen and (max-width: 600px){

   div.toggle-address-box,
   div.toggle-price-box {
     top: 78px;
     left: 24%;
   }
 }

 /* @media screen and (max-width: 540px) and (min-width: 456px) {

 } */

 /* @media screen and (max-width: 455px) and (min-width: 400px) {

 } */

 @media screen and (max-width: 399px) {
   input#searchTxt {
     top: 91%;
     left: 31%;
   }

   .mapboxgl-popup-content {
     height: 225px;
     width: 205px;
   }

   #map > div.mapboxgl-popup.mapboxgl-popup-anchor-bottom > div.mapboxgl-popup-content > p:nth-child(1){
    margin-top: 20px;
   }

   div.toggle-address-box,
   div.toggle-price-box {
     top: 78px;
     left: 15%;
   }

   .card{
    height: 196px;
   }

   .button-toggle-address,
   .button-toggle-price{
    left: 12%;
   }

 }

 /* End responsiveness */