.map-key {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.location-type {
    margin: 40px 0;
}

.location-type:before {
    background-color: #4F87E8;
    border-radius: 15px;
}

.location-type.type-2:before {
    background-color: #FFC747;
}

.location-type.type-3:before {
    background-color: #00C399;
}

.location-type.type-4:before {
    background-color: #6173ED
}

.location-type.type-5:before {
    background-color: #FF695C;
}

.location-type.type-6:before {
    background-color: #E5E5E5;
}

.location-type.type-7:before {
    background-color: #FFE34A;
}

.location-detail, .map-key, .map-wrapper {
    background-color: #173B3B; 
}

.location-detail {
    left: -100%;
    /* left: 0; */
}

.location-detail, .map-key {
    min-width: 30%; 
}