:root {
    --color-primary      : #873733;
    --color-primary-10   : rgba(135, 55, 51, 0.10);
    --color-primary-20   : rgba(135, 55, 51, 0.20);
    --color-primary-30   : rgba(135, 55, 51, 0.30);
    --color-primary-40   : rgba(135, 55, 51, 0.40);
    --color-primary-50   : rgba(135, 55, 51, 0.50);
    --color-primary-60   : rgba(135, 55, 51, 0.60);
    --color-primary-70   : rgba(135, 55, 51, 0.70);
    --color-primary-80   : rgba(135, 55, 51, 0.80);
    --color-primary-90   : rgba(135, 55, 51, 0.90);
    --color-primary-dark : #7a312d;
    --color-primary-light: #963d38;
    /* --color-sec       : #873733; */

}


/* btn -=::=-=::=-=::=-=::=-=::=-=::=-=::=-=::=-=::=-=::=-=::=- */

.button {
    --btn-color-light  : var(--color-text-20);
    --btn-color        : var(--color-text);
    --btn-text         : var(--bg3);
    background         : none;
    border             : none;
    outline            : none;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
    position           : relative;
    display            : flex;
    align-items        : center;
    justify-content    : center;
    --size             : 46px;
    height             : var(--size);
    padding            : 0 calc(var(--size)/2);
    border-radius      : 6px;
    font-size          : 16px;
    font-weight        : bold;
    transition         : .2s ease;
    color              : var(--btn-color)
}

.button:focus:not(:active) {
    background: var(--btn-color-light)
}

.button:focus {
    z-index: 2
}

@media(hover) {
    .button:hover {
        --btn-color      : var(--color-text-dark);
        --btn-color-light: var(--color-text-40)
    }
}

.button:active {
    transform: translateY(2px)
}

.button:not(a, button, label):active {
    transform: none
}

.button-lg,
.button-large {
    --size   : 52px;
    font-size: 16px
}

.button-small-1 {
    --size   : 36px;
    font-size: 14px
}

.button-small {
    --size   : 28px;
    font-size: 12px
}

.button--primary {
    --btn-color      : var(--color-primary);
    --btn-color-light: var(--color-primary-10);
    --btn-text       : #fff
}

@media(hover) {
    .button--primary:hover {
        --btn-color      : var(--color-primary-dark);
        --btn-color-light: var(--color-primary-20)
    }
}

.button--fill {
    background: var(--btn-color);
    color     : var(--btn-text);
    border    : rgba(0, 0, 0, 0)
}

.button--fill:focus:not(:active) {
    background: var(--btn-color);
    box-shadow: 0 0 0 5px var(--btn-color-light)
}

.button--light {
    background: var(--btn-color-light);
    color     : var(--btn-color)
}

.button--light:focus:not(:active) {
    box-shadow: 0 0 0 2px var(--btn-color);
    background: var(--btn-color-light)
}

.button--contur {
    background: rgba(0, 0, 0, 0);
    border    : 1px solid var(--btn-color);
    color     : var(--btn-color)
}

@media(hover) {
    .button--contur:hover {
        background: var(--btn-color-light)
    }
}

.button--contur:focus:not(:active) {
    background: var(--btn-color-light);
    box-shadow: 0 0 0 1px var(--btn-color), 0 0 0 5px var(--btn-color-light)
}

.flex {
    display: flex;
}

.set-info {
    position: relative;
}

.o-btn {
    width        : 50px;
    height       : 50px;
    position     : absolute;
    display      : block;
    border-radius: 100%;
    cursor       : pointer;

}

.o-btn-cross {
    top       : calc(30%);
    /*left    : -60px;*/
    background: #B32427 url(./img/cross_white.png) no-repeat 50% 50% / 25px;
}

.o-btn-edit {
    background: url(./img/account__button-edit.svg) no-repeat center / 22px;
    top       : calc(50% - 25px);
    right     : -60px;
    border    : 2px solid #B32427;
}

.set-info .o-btn-edit {
    top: 8px;
    right: 8px;
}

.flexbox_variant label span {
    width: 50px;
    height: 50px;
    position: absolute;
    top: -12px;
    left: 30px;
}