.area-map-container {
    height: 75vh !important;
    position: relative;
    max-width: 100%;
    
    & .area-map, & .sidebar {
        order: 2;
        height: 75vh !important;
    }

    & .sidebar {
        overflow: scroll;
        @media screen and (min-width: 1024px) {
            order: 1;
        }
    }
    
    & .mapboxgl-popup{
        z-index: 3;
    }
    
    & .marker-title{
        text-align: center;
        margin: 0 0 10px 0;
    }

    & .marker-content{
        .info-top-title{
            font-size: 20px;
            font-weight: bold;
        }
        & h3{
            text-align: left;
            margin-bottom: 20px;
        }
        & p{
            line-height: 1.35;
            font-size: 16px;
        }
    }
    
    & .mapboxgl-marker{
        opacity: 0.5;
        z-index: 1;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center center;
        
        &.selected{
            opacity: 1;
            z-index: 2;
        }
    }
    
    & .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{
        transform: translateY(-1px);
    }
    
    & .map-marker-attractions {
        background-image: url('map-marker-attractions-5.svg');
        width: 53px;
        height: 72px;
    }
    
    & .map-marker-accommodation {
        background-image: url('map-marker-accommodation-5.svg');
        width: 53px;
        height: 72px;
    }
    
    & .map-marker-restaurants {
        background-image: url('map-marker-restaurants-5.svg');
        width: 53px;
        height: 72px;
    }
    
    & .map-marker-services {
        background-image: url('map-marker-services-5.svg');
        width: 53px;
        height: 72px;
    }

    & .map-marker-vehicle {
        background-image: url('map-marker-vehicle-5.svg');
        width: 53px;
        height: 72px;
    }

    & .map-marker-others {
        background-image: url('map-marker-others-5.svg');
        width: 53px;
        height: 72px;
    }

    & .map-marker-program {
        background-image: url('map-marker-program-5.svg');
        width: 53px;
        height: 72px;
    }
    
    & .filter-group label {
        background-position: center;
        background-repeat: no-repeat;
        height: 100%;
        display: block;
        cursor: pointer;
    }
    
    & .filter-group .visible {
        background-image: url('icon-visible-4.svg');
        transition: background-image 0s;
    }
    
    & .filter-group .hidden {
        background-image: url('icon-hidden-4.svg');
        margin-left: -1px;
    }
    
    & .layer-group.selected{
        
        & .filter-group .visible {
            background-image: url('icon-visible-active-4.svg');
        }
        
        & .filter-group .hidden {
            background-image: url('icon-hidden-active-4.svg');
        }
    }
    
    & .filter-group input {
        display: none;
    }
    
    & .layer-groups{
        display: flex;
        flex-direction: column;
        justify-content: initial;
        position: relative;
        padding-top: 5.5%;
    }
    
    & .layer-group {
        width: 100%;
        height: 59px;
        cursor: pointer;
        color: white;
        display: flex;
        margin-bottom: 7px;
        
        &:last-child{
            margin-bottom: 0;
        }
        
        & .group-icon-wrapper{
            width: 54px;
            min-width: 54px;
            height: 54px;
            min-height: 54px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 60%;
            border-radius: 50%;
        }
        
        &#attractions .group-icon-wrapper{
            background-image: url(icon-attractions-4.svg);
            background-color: #17232C;
        }
        
        &#accommodation .group-icon-wrapper{
            background-image: url(icon-accommodation-4.svg);
            background-color: #3367B1;
        }
        
        &#restaurants .group-icon-wrapper{
            background-image: url(icon-restaurants-4.svg);
            background-color: #073B90;
        }
        
        &#services .group-icon-wrapper{
            background-image: url(icon-services-4.svg);
            background-color: #7C53A0;
        }

        &#vehicle .group-icon-wrapper{
            background-image: url(icon-vehicle-4.svg);
            background-color: #EF5323;
        }

        &#others .group-icon-wrapper{
            background-image: url(icon-others-4.svg);
            background-color: #395228;
        }

        &#program .group-icon-wrapper{
            background-image: url(icon-program-4.svg);
            background-color: #FCB415;
        }
        
        & .group-title-wrapper{
            display: flex;
            align-items: center;
            padding-left: 26px;
            width: 100%;
            
            & .group-title{
                margin: 20px;
                font-size: 24px;
                font-weight: 500;
                letter-spacing: -0.16px;
                line-height: 1;
                color: #073B90;
            }
        }
        
        & .group-filter-wrapper{
            display: flex;
            align-items: center;
            height: 100%;
            width: 35px;
            margin-left: 30px;
            
            & label{
                height: 30px;
                min-height: 30px;
                width: 35px;
                min-width: 35px;
                margin: 0;
                background-size: contain;
                background-position: center center;
                background-repeat: no-repeat;
            }
        }
    }
    
    & .listings {
        margin-bottom: 28px;
        
        & .item {
            padding: 13px 7px;
            border-bottom: 1px solid #D6DEED;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            
            & .title{
                font-size: 17px;
                font-weight: 400;
                transition: all 0.2s;
                flex: 1; 
            }
            
            &:after{
                content: '';
                display: block;
                margin-left: 30px;
                background-image: url(icon-arrow.svg);
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center center;
                width: 39px;
                min-width: 39px;
                height: 19px;
                min-height: 19px;
                transition: all 0.2s;
            }
            
            &:hover, &:active, &:focus{
                
                &:after{
                    transform: translateX(5px);
                }
            }
        }
    }
}