#map {
    order: 1;
    z-index: 1;
    display: grid;
    position: relative;
    min-height: 20rem;
    border: 2px solid black;

}

.leaflet-popup .leaflet-popup-tip,
.leaflet-popup .leaflet-popup-content-wrapper {
    background: #ffffff;
    box-shadow: 3px 3px grey;
    color: black;
}

.leaflet-popup-content ul {
    color: #000000;
}

#popup-trip-time span {
    padding-right: 5px;
}

#popup-trip-origin span {
    padding-right: 5px;
}

#popup-trip-destination span {
    padding-right: 5px;
}

.mapview-result-container-content {
    grid-template-columns: 2fr 1fr;
    display: grid;
    width: 80%;
    margin: auto;

}

.popup-text {
    display: inline-block;
    max-width: 15rem;
    overflow: visible;
}

#trip-information {
    background-color: #4997d0;
    border: none;
    color: white;
    padding: 6px 6px;
    cursor: pointer;
    border-radius: 12px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center !important;
}

#trip-information:hover {
    background-color: rgba(0, 57, 100, 0.8)
}

.mapview-page-numbers-container {
    grid-column: span 2;
    margin-block-start: auto;
}

#mapview-result-container-card {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: 6rem;
    grid-auto-flow: column;
    row-gap: 1rem;
    overflow-wrap: anywhere;
}

#mapview-cards-container {
    order: 2;
    height: 60vh;
    overflow-y: scroll;
    background-color: white;
}

@media (max-width: 1050px) {
    .mapview {
        display: none !important;
    }

    .mapview-filter-icon-container, .mapview-result-trip-price {
        grid-column: 2;
    }

    .mapview-trip-url {
        pointer-events: none;
    }
}


@media (max-width: 900px) {
    #mapview-cards-container {
        width: unset;
    }

    .mapview-result-container-content{
        width: unset;
    }
}

@media (max-width: 750px) {
    .popup-text {
        color: black;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
        max-width: 9rem;
    }

    #mapview-cards-container {
        order: 2;
        height: 30vh;
        overflow-y: scroll;
        width: unset;
    }


    .mapview-filter-icon-container, .mapview-result-trip-price {
        display: none !important;
    }

    .mapview-trip-local-time {
        grid-row: span 2;
    }

}