input[type=checkbox] {
    display: none;
}

input[type=checkbox] + span {
    display: block;
    width: 100%;
    background: var(--cb-bg);
    border: var(--cb-border);
    color: var(--cb-color);
    padding: 12px 0 12px 29px;
    border-radius: 3px;
    position: relative;
    font-weight: 400;
    font-size: 12px;
    text-align: left;
    box-sizing: border-box;
}

input[type=checkbox] + span:hover {
    border: 1px solid #424344;
}

input[type=checkbox]:checked + span {
    display: block;
    width: 100%;
    background: var(--inp-bg-c);
    border: 1px solid var(--inp-bo-c);
    font-weight: 700;
    /*color: var(--inp-c-c);*/
}

input[type=checkbox] + span::after {
    display: inline-block;
    content: "";
    position: absolute;
    left: 7px;
    top: 13px;
    background: #ffffff;
    width: 14px;
    height: 14px;
    border: 1px solid #c0c0c0;
    border-radius: 2px;
    transition-duration: 0.2s;
}

input[type=checkbox]:checked + span::after {
    /*content: "✔";*/
    content: "";
    color: #ffffff;
    font-size: 11px;
    background: #00ca61;
    border: 1px solid #00ca61;
    /*padding: 0 0 2px 3px;*/
    width: 14px;
    height: 14px;
}

/* checkbox + p */
input[type=checkbox] + p {
    display: block;
    width: 100%;
    background: var(--cb-bg);
    border: var(--cb-border);
    color: var(--cb-color);
    padding: 7px 0 6px 29px;
    top: 8px;
    border-radius: 3px;
    position: relative;
    font-weight: 400;
    font-size: 12px;
    text-align: left;
    box-sizing: border-box;
}

input[type=checkbox] + p:hover {
    border: 1px solid #424344;
}

input[type=checkbox]:checked + p {
    display: block;
    width: 100%;
    background: var(--inp-bg-c);
    border: 1px solid var(--inp-bo-c);
    font-weight: 700;
    /*color: var(--inp-c-c);*/
}

input[type=checkbox] + p::after {
    display: inline-block;
    content: "";
    position: absolute;
    left: 7px;
    top: 7px;
    background: #ffffff;
    width: 14px;
    height: 14px;
    border: 1px solid #c0c0c0;
    border-radius: 2px;
    transition-duration: 0.2s;
}

input[type=checkbox]:checked + p::after {
    /*content: "✔";*/
    content: "";
    color: #ffffff;
    font-size: 11px;
    background: #00ca61;
    border: 1px solid #00ca61;
    /*padding: 0 0 2px 3px;*/
    width: 14px;
    height: 14px;
}
/* */

input[type=radio] {
    display: none;
}

input[type=radio] + span {
    display: block;
    width: 100%;
    background: var(--cb-bg);
    border: var(--cb-border);
    color: var(--cb-color);
    padding: 12px 0 12px 29px;
    border-radius: 3px;
    position: relative;
    font-weight: 400;
    font-size: 12px;
    text-align: left;
    box-sizing: border-box;
}

input[type=radio] + span:hover {
    border: 1px solid #424344;
}

input[type=radio] + span::after {
    display: inline-block;
    content: "";
    position: absolute;
    left: 7px;
    top: 14px;
    background: #ffffff;
    width: 12px;
    height: 12px;
    border: 1px solid #c0c0c0;
    border-radius: 50%;
    transition-duration: 0.2s;
}

input[type=radio]:checked + span {
    display: block;
    width: 100%;
    background: var(--inp-bg-c);
    border: 1px solid var(--inp-bo-c);
    font-weight: 700;
    /*color: var(--inp-c-c);*/
}

input[type=radio]:checked + span::after {
    background: #00ca61;
    border: 1px solid #00ca61;
}

.lradio {
    max-width: 184px;
    font-size: 14px;
    border-radius: 3px;
}

.lradio_w {
    max-width: 220px;
    font-size: 14px;
    border-radius: 3px;
}

div.option2 {
    width: 100%;
    max-width: 185px;
    float: left;
    margin-right: 8px;
    font-size: 14px;
    font-weight: 500;
}

label {
    display: inline-block;
    width: 100%;
    max-width: 212px;
    cursor: pointer;
    margin: 0 5px 5px 0;
    font-size: 14px;
    font-weight: 500;
}

input, textarea, select {
    background: var(--cb-bg);
    border: var(--cb-border);
    color: var(--cb-color);
    /*-webkit-appearance: none;*/
}

.inpro {
    background-color: var(--cb-bg-ro);
    border: 0 !important;
}

.select-add {
    z-index: 1;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--cb-color);
    right: 10px;
    bottom: 17px;
    pointer-events: none;
}

.theme-light {
    --cb-bg: #f2f3f6;
    --cb-color: #000000;
    --cb-border: 1px solid #b7b7b7;
    --inp-bg-c: #ffffff;
    --inp-bo-c: #969696;
    --inp-c-c: #ffffff;
    --cb-bg-ro: #e2e3e4;
}

.theme-dark {
    --cb-bg: #424344;
    --cb-color: #ffffff;
    --cb-border: 1px solid #525354;
    --inp-bg-c: #626364;
    --inp-bo-c: #969696;
    --inp-c-c: #ffffff;
    --cb-bg-ro: #323334;
}

@media only screen and (max-width: 600px) {
    .lradio {
        max-width: 48% !important;
        font-size: 15px;
        margin-right: 2px;
    }

    .lradio_w {
        max-width: 98% !important;
        font-size: 15px;
    }

    label {
        max-width: 98% !important;
        font-size: 15px;
    }

    div.option2 {
        margin-right: 2px;
        max-width: 48% !important;
        font-size: 15px;
    }
}