/****** css just for amenity map *****/
/* Amenities rating */
p.num4 span:nth-child(-n+4) {
    color: #b83b26;
}

p.num3 span:nth-child(-n+3) {
    color: #b83b26;
}

p.num2 span:nth-child(-n+2) {
    color: #b83b26;
}

p.num1 span:nth-child(-n+1) {
    color: #b83b26;
}

p.num5 span:nth-child(-n+5) {
    color: #b83b26;
}

#map {
    width: 100%;
}

.amen_page {
    display: flex;
}

.amen_page .map {
    min-height: 700px;
}

.activeAmenities img.blackhover {
    filter: brightness(0) invert(1);
}

.amen_page .filter .option.activeAmenities {
    background: #ffffff;
    color: #000000;
}

.amen_page .filter .option.activeAmenities img {
    filter: brightness(0) !important;
}

.amen_page .listAmenity {
    position: relative;
    background: #e0e0d7;
    margin: 0 auto;
    z-index: 9;
}

.amen_page .filter {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.amen_page .filter .option {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-bottom: 2px solid #dcd8d5;
    cursor: pointer;
    color: #382a19;
    padding: 10px;
}

.amen_page .top-item {
    border-bottom: 1px solid #dcd8d5;
}

.amen_page .filter .option:last-child:after {
    display: none;
}

.amen_page .filter .option:last-child {
    border-right: none;
}

.amen_page .filter .option p {
    font-size: 14px;
    text-align: center;
    margin: 0;
}

#marker_info p.title {
    font-size: clamp(14px, 3vw, 16px);
    line-height: clamp(20px, 3vw, 24px);
    color: #382a19;
    font-family: "din-2014", sans-serif;
    font-weight: 600;
    margin-bottom: 10px;
}

.imageSmallAmenitiesMap img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

#marker_info p.text {
    color: #382a19;
    font-family: "din-2014", sans-serif;
    margin-bottom: 25px;
    line-height: 1.3;
}

.amen_page .filter .option:hover,
.amen_page .filter .option:focus {
    background: #ffffff;
    color: #000000;
}

.amen_page .filter .option:hover img,
.amen_page .filter .option:focus img {
    filter: brightness(0);
}

@media (max-width : 992px) {
    .amen_page .filter .option p {
        font-size: 14px;
    }

    .amen_page .filter {
        flex-direction: column;
        height: auto;
    }

    .amen_page .filter .option {
        padding: 10px;
        border: none;
    }
}

@media (max-width: 768px) {
    .amen_page {
        flex-direction: column-reverse;
    }
}


/****** END css just for amenity map *****/