/*FULL LAYOUT*/

html, body {
  height: 100%;
  overflow: hidden;
}

.body-wrapper {
  height: calc(var(--vh, 1vh) * 100);
}

h2, h3, h4 {
    text-transform: uppercase;
}

.content-scroll {
    flex-grow: 1;
    margin-top:auto;
    overflow-y: auto;
    overflow-x: hidden;
}
select {
    outline: none !important;
    box-shadow: none !important;
}
#fp_googleMapContent {
    max-width:420px;
    min-width:420px;
    background:#fff;
    bottom:130px;
    position: absolute;
    top:12px;
    right:12px;
    box-shadow:0px 0px 4px rgba(0,0,0,0.2);
    border-radius:4px;
    overflow: hidden;
}

#fp_googleMapContent .sp-module, #fp_googleMapContent .sp-module-content, #articleContent {
    height:100%;
}
#articleContent {
    display: flex;
    flex-direction: column;
}

.body-wrapper, .body-innerwrapper, main, #sp-main-body, #sp-main-body > .row, #sp-component , #sp-component > .sp-column, #jb-template, #joommap, #fp_main, #myTab,#map, .fp-location-view, .fh  {
      display: flex;
      flex-direction: column;
      flex: 1;
      height:100%;
      overflow:hidden;
}

#sp-main-body > .row {
     flex-direction: row;
}

#location-form {
     overflow: auto;
}

.row.fh {
     flex-direction: row;
}

.row.fh > div.fh {
     flex: 0 0 auto;
}


/*MAP */

#myTab {
     margin-top: 0px !important;
     margin-bottom: 0px !important;
}

#fp_googleMapContainer {
     display:flex;
     height: 100%;
     flex: 1;
     flex-direction: row;
     overflow: hidden;
     position: relative; 
     margin-bottom:-24px;
}

.gmnoprint {
     transform: translateY(-8px);
}

#fp_googleMap { 
    flex-grow: 1;
    height: 100% !important;
    width: inherit;
    min-height:0 !important;
    
}

#map {
     padding: 0px !important;
      border: none !important;
}

/*LEGEND FILTER*/

.bg-secondary {
     background:#eee;
}

.shadow {
     box-shadow: 0px 2px 4px rgba(0,0,0,0.2) !important;
}

#fp_googleMapSidebar {
     position: absolute;
     z-index: 100;
     left: 12px;
     top:12px;     
     height: auto !important;
     float:none !important;
     width:400px;
     

}
.sidebar-scroller {
     max-height:400px;
     overflow: auto;
}

.bg-opacity {
     background:#fff;
}

#fp_googleMapSidebar ul.sidebar li a:before {    
    display: none;
}

#fp_googleMapSidebar ul.sidebar {
     display: grid;
     grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
     gap: 1px; /* optional spacing between items */
     list-style: none; /* optional: remove bullets */
}

#fp_googleMapSidebar ul.sidebar li a {
     background:#fff;     
     opacity: 0.6;
     filter: grayscale(100%);
     font-size:14px;
     line-height:18px !important;
     min-height:36px;
     font-weight: bold;
     text-transform: uppercase;
     color:#333; 
}

#fp_googleMapSidebar ul.sidebar li a.active {
     position: relative;
     opacity: 1;
     filter: grayscale(0%);
}

#fp_googleMapSidebar ul.sidebar .badge {
     position: absolute;
     top:4px;
     right:4px;
     min-width:32px;
     text-align: center;
}




h3.filter-title {
     font-size:20px;     
     font-weight: bold;
     text-transform: uppercase;    

}
.accordion-button {       
     background:#fff !important;
     color:inherit !important;
     border-top:6px solid #198754 ;  
     padding-top:12px !important;
}

.accordion-button.collapsed {
     
     border-top:6px solid #fff ; 
}


/*STYLES*/

.mobile-filter {
     position: fixed;
     left:16px;
     bottom:40px;
     z-index:10;
     font-size:40px;
}

.form-control {
     height: inherit!important;
}


#collapseFilter select option {
     text-transform: capitalize;
}

/*INFOBOX*/

#fp_googleMap .infoBox {
     padding:12px 12px;     
     border-radius:8px;
     box-shadow:0px 4px 4px rgba(0,0,0,0.2);
     max-width: inherit !important;
     width:200px !important;
     font-size:16px;
     transform: translate(70px) !important;     
}
#fp_googleMap .infoBox .small {
     font-size:14px;
}

.infoBox .marker-sidebar-content {
     display: none;
}

#map-sidebar {
     position: absolute;
     top:12px;
     right:12px;     
     z-index: 1000;
     width:340px;
}
#map-sidebar .inner {
     background:rgba(255,255,255,0.9);
}

h4.popup-title {
     font-family: Roboto Condensed;
     font-weight: bold;
     font-size:24px;
     text-transform: uppercase;
}

.popup-image img {     
     aspect-ratio: 16 / 9;
     object-fit: cover; /* crop to fill */
}

.marker-sidebar-content h4 {
     font-size:24px;
}

.marker-sidebar-content .popup-intro {     
     max-height:320px;
     overflow-y: auto;
     font-size:14px !important;
     line-height:1.5;
}

.marker-popup-content .popup-intro {     
     max-height:280px;
     overflow-y: auto; 
     font-size:12px !important;
     line-height:1.5;
}

.popup-intro ul {
     list-style: none;
     margin:0px !important;
     padding:0px !important;  
     padding-right:4px;   

}
.popup-intro ul li {
     margin:0px;
     display: block;
     padding:12px 16px;
     background:#eee;
     border-radius:4px;
     margin-bottom:4px;          
}

.popup-icon {
     border-radius:100px;
     border:2px solid #2ba84a;
}










.fp_article_image img {
     aspect-ratio: 16 / 9;
     object-fit:cover;
}

.gm-style-iw-t:has(.hover-province) .gm-style-iw-chr {
     display: none;  
     overflow: hidden !important;
}
.gm-style-iw:has(.hover-province) {
     padding-top: 12px !important;
     padding-left:12px !important;
     border-radius:8px;
}

.gm-style-iw-t:has(.hover-province) .gm-style-iw-d {
     padding-right:12px !important;
     padding-bottom:12px !important;
     overflow: hidden !important;     
}

.gm-style-iw-t:has(.hover-province) .gm-style-iw-tc {
     width:12px !important;
     height: 6px !important;
}

.gm-style-iw-t:has(.hover-province) .gm-style-iw-tc:after {
     height:6px !important; 
     width:12px !important;
}
.provinceLabel {
     color:#000;
}

.gm-style-iw {  
  outline:none !important;
  
}

h1.location-title {
     font-size:18px;
}

.location-sidebar {
     box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
     z-index: 2;
}
.location-header {
     box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
     z-index: 2;
}

.location-address i.fa-fw {
     width:16px;
     line-height:28px;
     height:28px;
}

.location-content {
     overflow: auto;
}
.location-tags a {
     text-transform: capitalize;
}

/*LOCATION DETAIL*/

/*DASHBOARD RIGHT BAR*/

#sp-right {
     display: flex;
     flex-direction: column;
     height:100%;
     box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

#sp-right .sp-column {
     display: flex;
     flex-direction: column;
     flex-grow:1;     
}

#sp-right .sp-module {
     padding:16px !important;
     border:none !important;
     width: 100%;
     margin-top:0px;
     
}

.modal-backdrop.show {
     opacity: 0.8;
}

/*HEADER*/

#sp-header {
     box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
     border-bottom:2px solid var(--bs-primary);
     
}

#sp-top-bar {
    display: none;
}

h1.logo-text {
    font-size:15px;
    font-weight: 900;
    text-transform: uppercase;
    color:#151515;
    margin-bottom:0px;
}
h1.logo-text span {
    display: block;
    color: #454545;
    font-weight: 700;
    font-size:80%;
    margin-top:2px;
    margin-left:-1px;
}
.sp-megamenu-parent li a span.fa-solid {
    opacity: 0.6;
}

.sp-megamenu-parent >li > a {
     
     
}

.sp-megamenu-parent >li.active > a {
     
}

ul.sp-megamenu-parent > li {
     flex:1;
}


/*MEDIA QUERY*/

@media (max-width:1400px) {
     
     .marker-sidebar-content .popup-intro {
          max-height:240px;
     }
     #map-sidebar {
          width:300px;
     }

}

@media (max-width:992px) {
     body {
          font-size:16px;
          line-height:24px;
     } 
     .lead {
          line-
     }
    #fp_googleMapContainer.fp_side #fp_googleMapSidebar {          
          right:0px;
          width:auto !important;
          top:0px;
          left:0px;
          border-radius: 0px 0px 0px 0px !important;
    }  
    .sidebar-scroller {
          max-height:400px;
    } 

    .fp-location-view .location-map {
         height:30%;  
         display: block; 
         flex: 0 0 auto;
         overflow: hidden;
    }

    .fp-location-view .location-sidebar {
         height:70%;  
         display: flex; 
         flex: none;
         overflow: hidden;            
    }

    

    .fp-location-view .location-content {
         height:100%;
         display: block; 
         flex: 1;
         
    }

    #fp_googleMap .infoBox {
          width:320px !important;
          transform: translate(0px) !important;
     }    

}

@media (max-width:768px) {
    
        #fp_googleMapSidebar {          
              right:12px;
              width:auto;
         }
        
        #fp_googleMapContent {
            position: static;
            width:100%;
            min-width:0px;
            height:auto;
            max-height:50%;
            border-top:4px solid #ddd;
            position: relative;
            z-index:10;
            top:-24px;
            left:0;
            right:0;
            bottom:0;
            max-width:100%;
        }
        #fp_googleMap {
            height:100%!important;
        }
        
        
    }

@media (min-width:992px) {
     .article-details {
          padding:24px 20%;
          flex-grow: 1;
          height:100%;
     }
}

.article-details {
    overflow: auto;
    padding:24px;
}

.image-div {
    position: relative;
}
.image-div span {
    font-weight: bold;
    color:#fff;
    text-shadow: 0px 2px 4px rgba(0,0,0,0.8);
    position: absolute;
    left:8px;
    bottom:8px;
    font-size:20px;
}