#map {
    width  : calc(100% + 5rem);
    height : 840px;
}

#map .leaflet-tile-pane {
    filter : opacity(80%) grayscale(100%);
}

.leaflet-control-attribution.leaflet-control {
    display : none;
}

#module-griivstorelocator-StoreMap #content-wrapper {
    min-height : 100vh;
}

#module-griivstorelocator-StoreMap .page-content {
    padding : 0 1rem;
    
    @media (min-width : 992px) {
        padding : 0 4rem;
    }
}

#module-griivstorelocator-StoreMap #wrapper {
    background-color : #F6F6F6;
}

#module-griivstorelocator-StoreMap .leaflet-popup-content {
    width       : 300px;
    height      : 370px;
    margin      : 0;
    padding     : 2.5rem;
    color       : #000000;
    font-size   : 14px;
    font-weight : 500;
    font-style  : normal;
    line-height : 18px;
}

#module-griivstorelocator-StoreMap .leaflet-popup-content h5 {
    font-size   : 18px;
    font-weight : 700;
    line-height : 25px;
}

#module-griivstorelocator-StoreMap .leaflet-popup-content div {
    overflow-wrap : break-word;
}

#module-griivstorelocator-StoreMap .leaflet-popup-content-wrapper {
    border-radius : unset;
}

#module-griivstorelocator-StoreMap #storelist {
    max-height      : 840px;
    padding         : 0;
    overflow-y      : scroll;
    scroll-behavior : smooth;
}

#storelist::-webkit-scrollbar {
    width            : 12px;
    background-color : #F6F6F6;
}

/* background of the scrollbar except button or resizer */
#storelist::-webkit-scrollbar-track {
    background-color : #F6F6F6;
}

/* scrollbar itself */
#storelist::-webkit-scrollbar-thumb {
    border           : 3px solid #F6F6F6;
    border-radius    : 16px;
    background-color : #BABAC0;
}

#storelist li {
    padding     : 2rem;
}

#storelist li h6 {
    margin-bottom : 15px;
    color         : #000000;
    font-size     : 18px;
    font-weight   : 700;
    font-style    : normal;
    line-height   : 25px;
}

#storelist li p {
    margin-bottom : unset;
    color         : #000000;
    font-size     : 18px;
    font-weight   : 500;
    font-style    : normal;
    line-height   : 25px;
}

#storelist li.odd {
    background-color : #FFFFFF;
}

#storelist li.even {
    background-color : rgba(0, 0, 0, 0.1);
}

#storelist li:not(active) dl {
    opacity : 0.6;
}

#storelist li.active dl{
    opacity : 1;
}

/* set button(top and bottom of the scrollbar) */
#storelist::-webkit-scrollbar-button {
    display : none;
}

#module-griivstorelocator-StoreMap section#content {
    display        : flex;
    flex-direction : column;
    flex-wrap      : wrap;
    gap            : 50px;
}

#module-griivstorelocator-StoreMap #mapstore {
    display               : grid;
    width                 : 100%;
    grid-template-columns : 1fr;
    
    @media (min-width : 992px) {
        grid-template-columns : 1fr 1fr;
        gap                   : 4rem;
    }
}

#module-griivstorelocator-StoreMap .page-header {
    display         : flex;
    flex-direction  : row;
    justify-content : space-between;
    margin-top      : 2rem;
    gap             : 4rem;
    
    @media (min-width : 992px) {
        margin-top : 4rem;
    }
}

#module-griivstorelocator-StoreMap .title-header h1 {
    color          : #000000;
    font-family    : 'BlairMdITC-TT';
    font-size      : 30px;
    font-weight    : 500;
    line-height    : 35px;
    text-transform : uppercase;
}


#module-griivstorelocator-StoreMap .form-filter-map {
    display     : flex;
    font-family : 'BlairMdITC-TT';
    gap         : 40px;
}

#module-griivstorelocator-StoreMap .form-filter-map .form-group {
    flex-direction : row;
    width          : 360px;
    max-width      : 360px;
    height         : 63px;
    margin-bottom  : unset;
    padding        : 1rem;
    border         : 2px solid #000000;
}

#module-griivstorelocator-StoreMap .form-filter-map .form-group.storeType {
    height : 108px;
}

#module-griivstorelocator-StoreMap .form-filter-map .form-group.storeType ul {
    display        : flex;
    align-items    : flex-end;
    flex-direction : column;
    text-align     : right;
}

#module-griivstorelocator-StoreMap .form-filter-map .form-group ul li {
    position      : relative;
    width         : fit-content;
    margin-bottom : 10px;
    padding       : 5px;
    opacity       : 0.3;
}

#module-griivstorelocator-StoreMap .form-filter-map .form-group ul li:hover {
    cursor : pointer;
}

#module-griivstorelocator-StoreMap .form-filter-map .form-group ul li.active:after {
    content          : "";
    position         : absolute;
    bottom           : 4px;
    left             : 3px;
    width            : calc(100% - 4px);
    height           : 1px;
    color            : #210000;
    background-color : #210000;
}

#module-griivstorelocator-StoreMap .form-filter-map .form-group .form-label {
    display       : flex;
    align-items   : center;
    width         : 35%;
    margin-bottom : unset;
    color         : #210000;
    font-size     : 14px;
    font-weight   : 500;
    line-height   : 17px;
    white-space   : nowrap;
}

#module-griivstorelocator-StoreMap .form-filter-map .form-group .form-label.storeType {
    align-items : unset;
    padding-top : 5px;
}


#module-griivstorelocator-StoreMap .form-filter-map .form-group .form-control {
    width            : 50%;
    opacity          : 0.3;
    color            : #210000;
    border           : unset;
    background-color : transparent;
    font-family      : 'BlairMdITC-TT';
    font-size        : 14px;
    font-weight      : 500;
    line-height      : 17px;
    text-align       : right;
}

#module-griivstorelocator-StoreMap .form-filter-map .form-group .form-control::placeholder {
    opacity     : 0.7;
    color       : #210000;
    font-family : 'BlairMdITC-TT';
    font-size   : 14px;
    font-weight : 500;
    line-height : 17px;
}

@media (max-width : 767px) {
    #module-griivstorelocator-StoreMap #mapstore {
        flex-direction : column;
    }
    
    #module-griivstorelocator-StoreMap #storelist {
        order   : 2;
        width   : 100%;
        margin  : unset;
        padding : unset;
    }
    
    #module-griivstorelocator-StoreMap #map {
        order   : 1;
        width   : 100%;
        margin  : unset;
        padding : unset;
    }
}

#module-griivstorelocator-storemap #mapstore {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    @media (min-width: 992px) {
        grid-template-columns: 1fr 1fr;
        gap: 0rem;
    }
}
#module-griivstorelocator-storemap #storelist {
    max-height: 840px;
    padding: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
}
#map {
    width: calc(100% - 1rem);
    height: 840px;
}
#storelist li.odd {
    background-color: #FFF;
}
#storelist li:not(active) dl {
    opacity: .6;
}
#storelist li {
    padding: 2rem;
}
#storelist li.even {
    background-color: rgb(0 0 0 / .1);
}

#module-griivstorelocator-storemap #mapstore.full-width {
     position: relative;
     left: 50%;
     right: 45%;
     margin-left: -45vw;
     margin-right: -45vw;
     width: 90vw!important;
    padding: 15px;
}
#module-griivstorelocator-storemap #content {
    border: unset;
}
@media (max-width: 767px) {
    #module-griivstorelocator-storemap #map {
        order: 1;
        width: 100%;
        margin: unset;
        padding: unset;
        max-height: 65vh;
    }
    #module-griivstorelocator-storemap #storelist {
        order: 2;
        width: 100%;
        margin: unset;
        padding: unset;
    }
    #module-griivstorelocator-storemap #mapstore.full-width {
        padding: unset;
        width: unset!important;
        position: unset;
        left: unset;
        right: unset;
        margin-left: unset;
        margin-right: unset;
        z-index: 1;
    }
}
#module-griivstorelocator-storemap a {
    text-decoration: none;
}
