.mapContainer {
    width: 98%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    height: 40rem;
    margin-top: 15px;
}

.listContainer {
    /* padding: 10px 15px; */
    width: 49%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    align-content: center;
    gap: 30px;
    height: 100%;
}

.buttonInputSection {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 20px;
}

#buttonLocate {
    height: 40px;
    border-radius: 10px;
    border: none;
    background-color: var(--black-grey);
    color: var(--white);
    font-size: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* align-content: center; */
    padding: 5px;
    cursor: pointer;
    width: -webkit-fill-available;
    max-width: 7vw;
}

.autocomplete {
    width: -webkit-fill-available;
    position: relative;
}

.boulangerieList {
    overflow-y: scroll;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: center;
    justify-content: flex-start;
    gap: 10px;
    scrollbar-color: var(--black-grey) transparent;
}

.card {
    background-color: var(--black-grey);
    color: var(--white);
    padding: 5px 20px;
    border-radius: 10px;
    padding-bottom: 20px;
}

.title {
    color: var(--white);
    font-family: 'DM Serif Display';
    font-weight: 500;
    font-size: 22px;
}

.titlesection {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.address,
.tel {
    color: var(--white);
    font-weight: 300;
}

.linksection {
    display: flex;
    justify-content: space-between;
    margin-top: 26px;
}

.infoButton,
.itineraire {
    text-decoration: none;
    color: var(--white);
    transition: all 200ms ease;
    cursor: pointer;
}

.infoButton:hover,
.itineraire:hover {
    font-weight: bold;
}

#map {
    width: 49%;
    height: 100%;
    border-radius: 10px;
}

.contentFlex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 98%;
    margin: 30px 0;
    height: 34rem;
}

.infoBoulangerie {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: flex-start;
    gap: 30px;
    width: 47%;
}

.boulangerieData {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    align-content: flex-start;
    flex-direction: row;
    width: 100%;
}

.flexData {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.store-info {
    margin-top: 20px;
}

.store-hours {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: center;
    gap: 15px;
}

.hour {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    font-weight: 300;
}

.store-hours li {
    margin-bottom: 5px;
}

.store-hours li.current-day {
    font-weight: bold;
}

.boulangerieAddress,
.boulangerieTel {
    font-size: 17px;
    font-weight: bold;
}

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

#inputAddress {
    height: 30px;
    border-radius: 10px;
    border: none;
    background-color: var(--grey);
    color: white;
    font-family: 'Lexend';
    padding: 5px 10px;
}

#inputAddress::placeholder {
    color: var(--white);
}

#inputAddress {
    height: 30px;
    border-radius: 10px;
    border: none;
    background-color: var(--black-grey);
    color: var(--white);
    font-family: 'Lexend';
    padding: 5px 20px;
    width: -moz-available;
    width: -webkit-fill-available;
}

.importText {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: 20px;
}

.importText>p {
    margin: 0;
    color: var(--white);
}

#selection {
    color: var(--white);
    position: absolute;
    top: 50px;
    width: 100%;
}

#selection>ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: flex-start;
    justify-content: flex-start;
    /* gap: 14px; */
    width: 100%;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
}

#selection>ul>li {
    background-color: var(--black-grey);
    padding: 20px 13px;
    transition: all 200ms ease;
    width: -moz-available;
    width: -webkit-fill-available;
    cursor: pointer;
}

#selection>ul>li:hover {
    background-color: var(--grey);
}

.spanMin {
    color: #d1d1d1;
    font-size: 13px;
    margin-left: 10px;
    font-weight: 300;
}

@keyframes loop {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.loop {
    animation: loop 2s linear infinite;
}

.distance {
    width: 25%;
    display: flex;
    justify-content: flex-end;
    align-content: center;
    color: var(--white);
    font-weight: 400;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-left: 0;
    margin-right: 0;
}

@media only screen and (max-width: 600px) {


    .mapContainer {
        width: 80%;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: space-between;
        height: 55rem;
        margin-top: 5px;
        align-content: stretch;
        gap: 20px;
    }

    #buttonLocate {
    max-width: 17vw;
}

    .listContainer {
        /* padding: 10px 15px; */
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        align-content: center;
        gap: 30px;
        height: 50%;
    }

    #map {
        width: 100%;
        height: 60vh;
    }

    .contentFlex {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        width: 80%;
        margin: 30px 0;
        height: 67rem;
        gap: 20px;
    }

    .infoBoulangerie {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        align-content: flex-start;
        gap: 30px;
        width: 100%;
    }

}