.top-city-selector {
    margin-bottom: 15px;
    text-transform: lowercase;
    padding-left: 5px;
    color: #fff;
}

.top-city-selector img {
    fill: #fff0ff;
    filter: brightness(0) invert(1);
    height: 15px;
}

.top-city-selector--label {
    font-weight: 800;
    padding-right: 5px;
}

.top-city-selector--city {
    cursor: pointer;
    text-decoration: underline;
    text-transform: capitalize;
}

.top-city-selector--city:hover {
    color: #FFFF00;
}

.citySelector {
    position: fixed;
    z-index: 9999;
    height: 180px;
    top: calc(50% - 70px);
    width: 460px;
    left: calc(50% - 230px);
    background: #ED0089;
    padding: 10px 15px;
    border-radius: 5px;
    display: none;
    flex-direction: column;
    justify-content: space-evenly;
    font-size: 16px;
}

.citySelector h3 {
    color: #fff;
    text-align: center;
    font-size: 17px;
}

.citySelector span {
    position: absolute;
    right: 5px;
    top: 2px;
    color: #fff;
    cursor: pointer;
}

.citySelector button {
    background: #880a58;
    color: #fff;
    border-radius: 3px;
    border-color: #f030a2;
    border-width: 1px;
    outline: none;
    border-style: double;
    cursor: pointer;
}

.citySelector button:hover {
    background: #FFFF00;
    color: #880a58;
}