.vi-city {
    transition:.4s;
    padding: 39px 22px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    display:flex;
    justify-content:center;
    height: 100%;
    min-width: 233px;
}

.city--icon {
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.5s;
    color: white;
    padding:7px;
    font-size: 41px;
    width:54px;
    z-index:2;
    border-radius:50%;
    height:54px
}
.-Text-cityBox-widgets-item,.vi-city {
    position:relative;
    border-radius:20px
}
.vi-city,.vi-city:hover {
    background:var(--uicolor-2)
}

.city-boxitem {
    position:relative;
    padding-top: 25px;
    transition:.4s;
}

.vi-city:hover .city-boxitem a {
    color:#fff
}

.city-boxitem a {
    font-weight:500;
    font-size: 21px;
    color:#fff
}


.city_icon {
    WIDTH:50px;
    HEIGHT:50px;
    BACKGROUND:var(--background);
    display:flex;
    box-shadow:0 2px 5px #00000045;
    border-radius:50%;
    justify-content:center;
    align-items:center;
    font-size:22px;
    position:absolute;
    bottom:-18px;
    transition:.4s;
    left:25px
}

.vi-city:hover .city_icon {
    background:var(--uicolor);
    color: white;
}
.-Text-cityBox-widgets-item {
    flex: 1;
    max-width: 262px;
    min-width: 209px;
    background: #f4f4f4;
}

.-Text-cityBox-widgets-item .vi-city {
    min-width: 100%;
}