/* Чекбоксы */
.custom-checkbox {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
    .custom-checkbox + label::before {
        content: '';
        display: inline-block;
        width: 1em;
        height: 1em;
        flex-shrink: 0;
        flex-grow: 0;
        border: 1px solid #adb5bd;
        border-radius: 0.25em;
        margin-right: 0.5em;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 50% 50%;
    }
    .TestInput.custom-checkbox:checked + label {
    background: #f6f6f6;
}
.custom-checkbox:checked + label::before {
    border-color: #0464F4;
    background-color: #0464F4;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
    /* стили при наведении курсора на checkbox */
.custom-checkbox:not(:disabled):not(:checked) + label:hover::before {
    border-color: #0464F4;
}
    /* стили для активного состояния чекбокса (при нажатии на него) */
    .custom-checkbox:not(:disabled):active + label::before {
        background-color: rgba(8, 177, 133, 0.6);
        border-color: rgba(8, 177, 133, 0.3);
    }
    /* стили для чекбокса, находящегося в фокусе */
/*    .custom-checkbox:focus + label::before {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }*/
    /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
.custom-checkbox:focus:not(:checked) + label::before {
    border-color: rgb(4, 100, 244, 0.44);
}
    /* стили для чекбокса, находящегося в состоянии disabled */
    .custom-checkbox:disabled + label::before {
        background-color: #e9ecef;
    }



/* Радио */
.custom-radio {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
    /* для элемента label связанного с .custom-radio */
    .custom-radio + label {
        display: inline-flex;
        align-items: center;
        user-select: none;
        transition:all 0.3s linear;
    }
        /* создание в label псевдоэлемента  before со следующими стилями */
        .custom-radio + label::before {
            content: '';
            display: inline-block;
            width: 1em;
            height: 1em;
            flex-shrink: 0;
            flex-grow: 0;
            border: 1px solid #adb5bd;
            border-radius: 50%;
            margin-right: 0.5em;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 50% 50%;
        }
    /* стили при наведении курсора на радио */
    .custom-radio:not(:disabled):not(:checked) + label:hover::before {
        border-color: rgb(4, 100, 244, 0.44);
    }
    /* стили для активной радиокнопки (при нажатии на неё) */
    .custom-radio:not(:disabled):active + label::before {
        background-color: rgb(4, 100, 244, 0.44);
        border-color: rgb(4, 100, 244, 0.44);
    }
    /* стили для радиокнопки, находящейся в фокусе */
/*    .custom-radio:focus + label::before {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }*/
    /* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
    .custom-radio:focus:not(:checked) + label::before {
        border-color: rgb(4, 100, 244, 0.44);
    }
    /* стили для радиокнопки, находящейся в состоянии checked */
.TestInput.custom-radio:checked + label {
    background: #0464f414;
}
.custom-radio:checked + label::before {
    border-color: #0464F4;
    background-color: #0464F4;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 7 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
    /* стили для радиокнопки, находящейся в состоянии disabled */
    .custom-radio:disabled + label::before {
        background-color: #e9ecef;
    }