#vueContextStationsMap {
    margin-top:100px
}

/*Close button on marker popup*/
button.gm-ui-hover-effect img {
    margin: 25px 3px 16px -2px!important;
    background: #aebbcb;
}

.popup-station-name {
    padding-right: 20px;
    margin-top: 0 !important;
}

.station-status-container {
    display: flex;
    border-top: solid 1px;
    border-color: #abc6ee;
    background: #eeeeee;
    margin-bottom: 16px;
    padding: 16px;
}

.station-status {
    margin-right: 16px;
    display: flex;
    align-content: center;
    align-items: center;
}

.map-container {
    margin: 0;
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: column;
}

.loading-animation-container {
    position: absolute;
    z-index: 999999999;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: transparent;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}

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

.popup-container {
    margin: 0 4px 4px 4px;
    min-width: 250px;
}

.popup-station-name, .popup-station-country .popup-station-link {
    font-size: 16px;
}

.popup-station-link {
    margin-bottom: 4px;

}

.popup-station-name {
    margin-top: 12px;
}

.popup-station-name, .popup-station-country {
    margin-bottom: 16px;
}

.popup-station-name {
    font-weight: bold;
}

.search-input {
    background: white !important;
    height: 42px !important;
    width: 200px !important;
    font-size: 15px !important;
    color: black !important;
    margin: 9px !important;
}

@media all and (max-width: 533px) {
    .gm-bundled-control, .gmnoprint {
        display: flex !important;
        flex-direction: column !important;
    }
}

@media all and (max-width: 360px) {
    .search-input {
        width: 150px !important;
    }
}

@media all and (max-width: 600px) {
    .station-status-container {
        flex-direction: column;
    }
}