@charset "UTF-8";

menu.locations {
    position: relative;
    margin: 0;
    padding: 0;
    background-color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.3s ease-in;
}


.locations-close {
    position: absolute;
    background-image: url("../img/svg/black/crose.svg");
    cursor: pointer;
}

span.locations-title, span.locations-chosen, .locations-search, .locations-search--inp,
menu nav span, menu nav ul, menu nav ul li {
    width: 100%;
}


.locations-search--inp {
    border-radius: 0.8rem;
    border: 0.2rem solid #0AB6C9;
}

menu nav { overflow-y: auto; }

menu nav span { margin-bottom: -0.8rem; }

menu nav ul span.marker { margin-bottom: 0.8rem; }

menu nav ul {
    margin: 0;
    padding: 0;
    gap: 0.8rem;
    list-style: none;
}

menu nav ul li {
    gap: 0.8rem;
    font-size: 1.4rem;
}

menu nav ul li:after {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    background-image: url("../img/svg/turquoise/mark.svg");
    opacity: 0;
}
menu nav ul li:hover,  menu nav ul li.chosen { color: #0AB6C9; }
menu nav ul li:hover:after,  menu nav ul li.chosen:after { opacity: 1; }

/* Desktop (Big screen less than 3k) Only */
@media (min-width: 1600px) {
    menu.locations {
        width: 154rem;
        height: 85vh;
        margin-top: 8rem;
        padding: 4rem;
        gap: 1.6rem;
    }

    .locations-close {
        top: 2.4rem;
        right: 2.4rem;
        width: 3.2rem;
        height: 3.2rem;
    }

    .locations-search {
        gap: 0.8rem;
        margin-top: 1.6rem;
    }

    .locations-search--inp {
        height: 4.8rem;
        padding: 1.5rem 1.6rem;
    }

    .locations-search--btn {
        width: 4.8rem;
        height: 4.8rem;
    }

    .locations-short { width: 32rem; }

    .locations-list { width: 109.6rem; }

    menu nav {
        max-height: 70%;
        margin-top: 1.6rem;
        padding-bottom: 5rem;
        gap: 3.2rem;
    }

    .locations-list ul { width: 19rem; }

    menu nav ul li {
        gap: 0.8rem;
        font-size: 1.4rem;
    }
}


/* Desktop (All screens) */
@media (min-width: 1025px) {
}

/* Desktop (Small screen less than 1600px) Only  */
@media (min-width: 1025px) and (max-width: 1599px) {
    menu.locations {
        width: 128rem;
        height: 85vh;
        margin-top: 5.6rem;
        padding: 4rem 1.6rem;
        gap: 1.6rem;
    }

    .locations-close {
        top: 2.4rem;
        right: 2.4rem;
        width: 3.2rem;
        height: 3.2rem;
    }

    .locations-search {
        gap: 0.8rem;
        margin-top: 0.8rem;
    }

    .locations-search--inp {
        height: 4.8rem;
        padding: 1.5rem 1.6rem;
    }

    .locations-search--btn {
        width: 4.8rem;
        height: 4.8rem;
    }

    .locations-short { width: 21rem; }

    .locations-list { width: 101.4rem; }

    menu nav {
        max-height: 70%;
        margin-top: 1.6rem;
        padding-bottom: 1rem;
        gap: 2.4rem;
    }

    .locations-list ul { width: 23.4rem; }

    menu nav ul li {
        gap: 0.8rem;
        font-size: 1.4rem;
    }
}

/* Desktop (All screens) + Tablet */
@media (min-width: 600px) {
}

/* Tablet Only */
@media (min-width: 600px) and (max-width: 1024px) {
    menu.locations {
        width: 76.8rem;
        height: 100vh;
        padding: 3.2rem 1.6rem;
        gap: 1.6rem;
    }

    .locations-close {
        top: 2.4rem;
        right: 2.4rem;
        width: 2.4rem;
        height: 2.4rem;
    }

    .locations-search {
        gap: 0.4rem;
        margin-top: 0.8rem;
    }

    .locations-search--inp {
        height: 4rem;
        padding: 1.5rem 1.6rem;
    }

    .locations-search--btn {
        width: 4rem;
        height: 4rem;
    }

    .locations-short { width: 18rem; }

    .locations-list { width: 51.6rem; }

    menu nav {
        max-height: 70%;
        margin-top: 1.6rem;
        padding-bottom: 1rem;
    }

    menu nav ul { margin-top: 2.4rem; }

    .locations-list ul { width: 17rem; }

    menu nav ul li {
        gap: 0.8rem;
        font-size: 1.4rem;
    }
}

/* Tablet + Mobile */
@media (max-width: 1289px) {
}

/* Mobile Only */
@media (max-width: 599px) {
    menu.locations {
        width: 37.5rem;
        height: 100vh;
        padding: 2.4rem 1.6rem;
        gap: 1.6rem;
        overflow-y: auto;
    }

    .locations-close {
        top: 0.8rem;
        right: 0.4rem;
        width: 2.4rem;
        height: 2.4rem;
    }

    .locations-search {
        gap: 0.4rem;
        margin-top: 0.8rem;
    }

    .locations-search--inp {
        height: 4rem;
        padding: 1.5rem 1.6rem;
    }

    .locations-search--btn {
        width: 4rem;
        height: 4rem;
    }

    .locations-short { width: 18rem; }

    .locations-list { width: 51.6rem; }

    menu nav { margin-top: 1.6rem; }

    menu nav ul { margin-top: 2.4rem; }

    .locations-list ul { width: 16rem; }

    menu nav ul li {
        gap: 0.8rem;
        font-size: 1.4rem;
    }
}