.infoBox.forcities {
    border-radius: 0;
    background-color: var(--bg-color);
    box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, .05);

    --infobox-padleft: 22px;
    --infobox-padright: 22px;
}
.infoBox.forcities > .inner {
    padding-top: 3px;
}
.infoBox.forcities .field,
.infoBox.forcities > .inner > .head {
    position: relative;
    max-width: 703px;
    margin: 0 auto;
    text-align: left;
}
.infoBox.forcities > .inner > .head {
    padding: 0 12px 0 8px;
}
.infoBox.forcities > .inner > .foot {
    position: relative;
    max-width: 703px;
    margin: 0 auto;
    text-align: left;
    display: grid;
    grid-template-columns: auto auto;
    padding: 20px 0 5px 0;
}
.infoBox.forcities > .inner > .foot > button {
    font-size: .875rem;
    color: var(--color-link);
    text-align: left;
    margin-bottom: 0;
}
.infoBox.forcities > .inner > .foot > button[data-action="newlocation"] {
    place-self: start start;
}
.infoBox.forcities > .inner > .foot > button[data-action="editmode"] {
    place-self: start end;
}
.infoBox.forcities > .inner > .foot > button[data-action="exiteditmode"] {
    color: var(--color-text);
    place-self: start end;
}
.infoBox.forcities .close {
    top: -3px;
    right: 0;
    background-image: url('/theme/images/close-pop-small.png');
    background-repeat: no-repeat;
    background-position: 9px 9px;
    background-size: 15px 14px;

    image-rendering: optimizequality;

    background-image: url('/theme/images/close-pop-small.svg');
}
.infoBox.forcities .field {
    min-height: 225px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    place-content: start;
}

.infoBox.forcities .title {
    font-size: .875rem;
    color: var(--color-text);
    font-weight: 400;
    padding-left: 23px;
    padding-bottom: 17px;

    background-image: url('/theme/images/wmm-place-gray.png');
    background-repeat: no-repeat;
    background-position: 0 2px;
    background-size: 11px 17px;
    background-image: url('/theme/images/wmm-place-gray.svg');
}



.citybtn {
    --citybtn-default: #0f2647;
    --citybtn-selected: #185298;
    --citybtn-color: #A1A3A6;
    --citybtn-status-opacity: .3;
    --showonmap-opacity: .2;

    position: relative;
    max-width: 350px;
    min-height: 73px;
    border: 0 none;
    outline: 0 none;
    /* background-color: rgba(24, 82, 152, 0.3); */ /* #185298 with opacity */
    background-color: var(--citybtn-default);
    border-radius: var(--box-radius);

    font-size: .875rem;
    color: var(--citybtn-color);
    cursor: pointer;
    user-select: none;

    padding: 0;
    margin: 0;
    display: block;
    overflow: hidden;

    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;

    /* touch-action: pan-y; */
    -webkit-tap-highlight-color: transparent;
}

.citybtn.show-on-map > .btn::after {
    content: '';
    position: absolute;
    top: 11px;
    right: 11px;
    width: 7px;
    height: 11px;

    opacity: var(--showonmap-opacity);
    background-image: url('/theme/images/wmm-place-small.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 7px 11px;
    background-image: url('/theme/images/wmm-place-small.svg');

    transition: opacity 0.3s ease;
}


.citybtn.selected {
    --showonmap-opacity: .3;
    --citybtn-status-opacity: .5;
    --citybtn-color: #F2F2F2;
}
.citybtn.selected,
.citybtn.selected > .btn {
    background-color: var(--citybtn-selected);
}
/* .citybtn.show-on-map.selected > .btn::after {
    opacity: .3;
} */
.deleteMode .citybtn.selected,
.deleteMode .citybtn.selected > .btn {
    background-color: var(--citybtn-default);
}

.citybtn.selected[data-city="0"] > .btn > .country::before,
.citybtn.selected:not([data-city="0"]) > .btn > .city::before {
    content: '';
    position: absolute;
    top: 6px;
    left: -16px;
    width: 12px;
    height: 7px;
    background-image: url('/theme/images/actual-location.png');
    background-repeat: no-repeat;
    background-size: 12px 7px;
    image-rendering: optimizequality;
    background-image: url('/theme/images/actual-location.svg');
}
.citybtn.selected:not([data-city="0"]) > .btn > .city::before {
    top: 7px;
}

/* Šis izpildīsies uz Datoriem un Android, bet iOS skārienekrāns to ignorēs */
@media (hover: hover) {
    .citybtn:hover {
        --showonmap-opacity: .3;
        --citybtn-status-opacity: .5;
        --citybtn-color: #F2F2F2;
    }
    .citybtn:hover,
    .citybtn:hover > .btn {
        background-color: var(--citybtn-selected);
    }
    /* .citybtn.show-on-map:hover > .btn::after {
        opacity: .3;
    } */
    .deleteMode .citybtn:hover,
    .deleteMode .citybtn:hover > .btn {
        background-color: var(--citybtn-default);
    }
}
.deleteMode .citybtn.deleting > .btn {
    background-color: var(--citybtn-selected);
}

/* .citybtn:active {
    transform: scale(0.98);
} */

.citybtn > .btn {
    position: relative;
    left: 0;
    padding: 16px 25px 19px 25px;
    margin: 0;

    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        'flag country'
        'flag city';

    background-color: var(--citybtn-default);
    border-radius: var(--box-radius);

    transition: left 0.3s ease, background-color 0.3s ease;
}
.citybtn.deleting::before,
.citybtn.deleted::before {
    content: attr(data-lbl-deleting);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-color: var(--citybtn-default);
    border-radius: var(--box-radius);

    color: #D45858;
    font-size: .875rem;
    display: grid;
    place-content: center end;
    padding-right: 31px;
}
.citybtn.deleting > .btn {
    left: -107px;
}
.citybtn.deleted > .btn {
    left: -100%;
}

.citybtn > .btn > .flag {
    grid-area: flag;
    min-width: 26px;
    height: 26px;
    padding-top: 22px;

    background-image: url('/img/fl/fl-empty.png');
    background-repeat: no-repeat;
    background-position: 0 6px;
    background-size: auto 10px;
}
.citybtn > .btn > .flag > span {
    display: inline-block;
    font-size: 0.75rem;
    opacity: var(--citybtn-status-opacity);
    margin-left: -1px;
    transition: opacity 0.3s ease;
}
.citybtn > .btn > .country {
    position: relative;
    grid-area: country;
    text-align: right;
    place-self: end end;

    font-size: .8125rem;
}
.citybtn > .btn > .city {
    position: relative;
    grid-area: city;
    text-align: right;
    place-self: start end;

    font-size: .875rem;
    font-weight: 700;
}

.editmode .citybtn.default {
    background-color: transparent;
    pointer-events: none;
    cursor: default;
    /* color: rgba(255, 255, 255, .3); */
    --showonmap-opacity: .2;
}
.editmode .citybtn.default::before,
.editmode .citybtn.default > .btn {
    background-color: transparent;
}
.editmode .citybtn {
    --citybtn-default: #29303e;
    --citybtn-selected: #474d58;
}


.infoBox.forcitiesfrm {
    background-color: var(--bg-color);
}
.infoBox.forcitiesfrm .head {
    max-width: 500px;
    margin: auto;
    text-align: left;

    padding-bottom: 40px;
}
.infoBox.forcitiesfrm .head {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
}
.infoBox.forcitiesfrm .step2 .head {
    padding-bottom: 6px;
}
.infoBox.forcitiesfrm .step3 .head {
    padding-bottom: 6px;
}
.infoBox.forcitiesfrm .info {
    max-width: 500px;
    margin: auto;
    text-align: left;
    padding-top: 20px;
    padding-bottom: 25px;
}

.infoBox .backmod {
    font-size: .875rem;
    color: var(--color-text);
    text-align: left;
    padding: 0 0 0 34px;
    margin-bottom: 0;

    background-image: url('/theme/images/popback.png');
    background-repeat: no-repeat;
    background-position: 12px 3px;
    background-size: 7px 12px;

    image-rendering: optimizequality;

    background-image: url('/theme/images/popback.svg');
}
.infoBox .submitmod,
.infoBox .like-a {
    font-size: .875rem;
    color: var(--color-link);
    text-align: left;
    margin-bottom: 0;
}
.infoBox .deletemod {
    font-size: .875rem;
    color: var(--color-text);
    text-align: left;
    margin-bottom: 0;
}


.frmCenter > fieldset.clr {
    display: flex;
    justify-content: space-between;

    padding-top: 6px;
    margin-bottom: 16px;
}
.forcitiesfrm .frmCenter > .fgr {
    margin-bottom: 0;
}
.st2text {
    padding-bottom: 19px;
}
.sentback {
    padding-top: 25px;
    padding-bottom: 50px;
}
.cantsuggest {

}


@media (max-width: 700px) {
    .infoBox.forcities .field {
        grid-template-columns: 1fr;
    }
}