:root {
    --back-to-city-widget-z-index: 8;
    --back-to-city-widget-transition: .7s;
    --back-to-city-widget-text-color: #FFF;
    --back-to-city-widget-background-color: #595959;
    --back-to-city-widget-position: 150px;
    --back-to-city-widget-position-collapse: 107px;
    --back-to-city-widget-font-size: 20px;
    --back-to-city-widget-border-radius: 10px;
    --back-to-city-widget-padding: 5px 20px;
    --back-to-city-widget-margin-inline-end: 20px;
}

.back_to_city {
    justify-content: end;
    flex-direction: row;
    display: flex;
}

.back_to_city > .back_to_city_widget {
    margin-inline-end: var(--back-to-city-widget-margin-inline-end);
    background-color: var(--back-to-city-widget-background-color);
    border-radius: var(--back-to-city-widget-border-radius);
    transition: var(--back-to-city-widget-transition);
    font-size: var(--back-to-city-widget-font-size);
    color: var(--back-to-city-widget-text-color);
    z-index: var(--back-to-city-widget-z-index);
    padding: var(--back-to-city-widget-padding);
    top: var(--back-to-city-widget-position);
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    flex-direction: row;
    align-items: center;
    position: fixed;
    cursor: pointer;
    display: flex;
}

.back_to_city > .back_to_city_widget.hide {
    display: none;
}


@media only screen and (max-width: 860px) {
    :root {
        --back-to-city-widget-margin-inline-end: 0;
        --back-to-city-widget-position: 135px;
    }
}

@media only screen and (max-width: 768px) {
    :root {
        --back-to-city-widget-position: 110px;
        --back-to-city-widget-margin-inline-end: 0;
    }
}