.dealerlocator {
    height: 100vh;
    position: relative;
    margin-top: 3rem;
}

.dealerlocator__map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: #9fc1d4;
}

.dealerlocator > .container {
    position: relative;
    z-index: 1;
}

.dealerlocator__locator {
    position: absolute;
    top: 20rem;
    left: 0;
    background-color: #fff;
}

    .dealerlocator__locator h3 {
        margin-bottom: 1.5rem;
    }

.dealerlocator__type {
    position: absolute;
    top: -5rem;
    left: 0;
    background-color: rgba(255, 255, 255, .5);
    height: 4.4rem;
    padding: .2rem;
    display: flex;
}

    .dealerlocator__type > h4 {
        position: absolute;
        top: -2.5rem;
        left: 0;
    }

    .dealerlocator__type input {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        visibility: hidden;
    }

    .dealerlocator__type label {
        height: 4rem;
        line-height: 4rem;
        border-radius: .2rem;
        padding: 0 2rem;
        background-color: transparent;
        cursor: pointer;
        transition: var(--transition-default);
    }

    .dealerlocator__type input:checked + label {
        background-color: var(--red);
        color: var(--white);
    }

.dealerlocator__form {
    padding: 3rem;
}

    .dealerlocator__form input {
        height: 5rem;
        border-radius: 0;
        padding: 1rem 0;
        line-height: 3rem;
        width: 100%;
        border: none;
        border-bottom: .1rem solid var(--grey-light);
        outline: none;
    }

.dealerlocator__locator p {
    margin-bottom: 0;
}

.dealerlocator__list {
    display: none;
    border-top: .1rem solid var(--black);
    padding: 1.5rem 1.5rem 1.5rem 3rem;
}

.dealerlocator__scrollable {
    max-height: 45rem;
    overflow: auto;
    padding-right: 1.5rem;
    position: relative;
}

.dealerlocator__search .dealerlocator__list:after {
    content: "";
    width: 100%;
    height: 10rem;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.dealerlocator__list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .dealerlocator__list ul li {
        padding: 0;
    }

        .dealerlocator__list ul li:before {
            content: none;
        }

        .dealerlocator__list ul li + li {
            border-top: .1rem solid var(--grey-light);
            margin-top: 0;
        }

.dealerlocator__list a {
    color: var(--black);
    display: flex;
    flex-flow: column;
    padding: 1rem 0;
    background-image: none !important;
}

    .dealerlocator__list a:hover {
        color: var(--blue);
    }

    .dealerlocator__list a span:first-of-type {
        font-weight: 500;
    }

    .dealerlocator__list a span:last-of-type {
        color: var(--grey);
        font-size: 1.2rem;
    }

.dealerlocator__scrollable::-webkit-scrollbar {
    width: 1rem;
}

/* Track */
.dealerlocator__scrollable::-webkit-scrollbar-track {
    background: var(--grey-light);
    border-radius: .5rem;
}

/* Handle */
.dealerlocator__scrollable::-webkit-scrollbar-thumb {
    background: var(--grey);
    border-radius: .5rem;
    transition: var(--transition-default);
    cursor: grab;
}

    /* Handle on hover */
    .dealerlocator__scrollable::-webkit-scrollbar-thumb:hover {
        background: var(--grey);
        cursor: grab;
    }

.dealerlocator__details {
    padding: 3rem;
}

    .dealerlocator__details > p {
        margin-bottom: 3rem;
    }

        .dealerlocator__details > p svg {
            width: 1.2rem;
            transform: translateY(-.2rem);
        }

.store__content a {
    display: inline-flex;
    padding: 0;
}

    .store__content a:hover {
        color: var(--black);
    }

.stores__availability {
    margin-top: 3rem;
}

.store__hour {
    display: flex;
}

    .store__hour span:first-of-type {
        width: 10rem;
    }


@media(min-width: 992px) {
    .dealerlocator__locator {
        width: 40rem;
    }
}

@media(min-width: 768px) and (max-width: 991px) {
    .dealerlocator__locator {
        width: 30rem;
    }
}

@media(max-width: 767px) {
    .dealerlocator {
        height: unset;
        margin-top: 7rem;
    }

    .dealerlocator__locator {
        width: 100%;
        position: relative;
        top: unset;
    }

    .dealerlocator__form {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .dealerlocator__list {
        padding-left: 1.5rem;
        padding-right: 1rem
    }

    .dealerlocator__details {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .dealerlocator__map {
        width: 100vw;
        height: 100vh;
        position: relative;
        top: unset;
    }
}