:root {
    --delay-progress: 5000ms;
}

.toastify,
.select-mps .combo,
.select-mps .box .options label,
.select-mps table tbody > tr,
input[type='checkbox'], input[type='radio'],
input[type='checkbox'] + span, input[type='radio'] + span,
input[type='color'],
.colorpicker,
.toggle-switch input,
.toggle-switch label,
.gender .box {
    cursor: pointer;
}

    .select-mps .combo.disabled,
    .toggle-switch input:checked + label {
        cursor: default;
    }

    input[type='checkbox']:disabled, input[type='radio']:disabled,
    input[type='checkbox']:disabled + span, input[type='radio']:disabled + span {
        cursor: not-allowed;
    }

    [tooltip]::before,
    [tooltip]::after,
    .gender .box span {
        user-select: none;
    }

[tooltip]::before,
[tooltip]::after,
.select-mps .placeholder-cbo,
.select-mps .container-cbo {
    pointer-events: none;
}

input[type='color'],
input[type='checkbox'], input[type='radio'] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.select-mps .box .options > label {
    flex: 1;
}

.toastify .progressfy div.active,
.switch-vertical {
    width: 0;
}

.toastify .progressfy,
.toastify .progressfy div,
.select-mps .combo,
.select-mps .box input[type=search],
.select-mps .multiChk .approve,
.select-mps .multiChkCol .approve,
.gender .box {
    width: 100%;
}

.select-mps .box {
    min-width: 100%;
}

    .select-mps .combo:after,
    .select-mps .clear,
    .select-mps .box:not(.multiCol):not(.multiChkCol) .options label,
    .select-mps .box:not(.multiCol):not(.multiChkCol) .options label > span,
    .select-mps .multiCol .options div > span,
    .select-mps .multiChkCol .options div > span,
    .toggle-switch .toggle-outside,
    .switch-vertical input,
    .switch-vertical .toggle-outside {
        height: 100%;
    }

    .toastify > div:first-child,
    html[class=translated-ltr] .select-mps.en .placeholder-cbo,
    html[class=translated-ltr] .select-mps.en .container-cbo,
    html[class=translated-ltr] .select-mps.en .box input[type=search],
    html[class=translated-ltr] .select-mps.en .box .options > label span,
    .select-mps .box .notfound,
    html[class=translated-ltr] .toastify,
    html:not(.translated-ltr) .toastify > div:first-child {
        direction: rtl;
    }

        html:not(.translated-ltr) .select-mps.en .placeholder-cbo,
        html:not(.translated-ltr) .select-mps.en .container-cbo,
        html:not(.translated-ltr) .select-mps.en .box input[type=search],
        html:not(.translated-ltr) .select-mps.en .box .options > label span,
        html:not(.translated-ltr) .toastify,
        html[class=translated-ltr] .toastify > div:first-child {
            direction: ltr;
        }

[tooltip]::before,
[tooltip]::after,
[tooltip='']::before,
[tooltip='']::after,
.select-mps .box,
.gender input[type="radio"] {
    display: none;
}

    .toastify > div:first-child,
    .toastify .iconfy,
    .toastify .progressfy,
    .select-mps .combo,
    .select-mps .combo.fix:before,
    .select-mps .combo:after,
    .select-mps .clear,
    .select-mps .multiChk a,
    .select-mps .box:not(.multiCol):not(.multiChkCol) .options label,
    .select-mps .box:not(.multiCol):not(.multiChkCol) .options label span,
    .select-mps .multiChk .approve,
    .select-mps .multiChkCol .approve,
    .gender,
    .gender .box {
        display: flex;
    }

input[type='color'],
.colorpicker,
.colorpicker > label {
    display: inline-flex;
}

[tooltip]:hover::before,
[tooltip]:hover::after,
.select-mps .multiCol table span,
.select-mps .multiChkCol table span,
.select-mps .box:not(.multiCol):not(.multiChkCol) .options > label div,
.select-mps .box:not(.multiCol):not(.multiChkCol) .options > label span,
.select-mps .flag,
input[type='checkbox']:after, input[type='radio']:after,
.switch-vertical label,
.gender .box span:before {
    display: block;
}

[tooltip],
input[type='checkbox'], input[type='radio'],
input[type='checkbox'] + span, input[type='radio'] + span {
    display: inline-block;
}

.toastify > div:first-child,
.gender {
    flex-direction: row;
}

    .gender .box {
        align-items: flex-start;
    }

.toastify .iconfy,
.select-mps .combo,
.select-mps .combo.fix:before,
.select-mps .combo:after,
.select-mps .clear,
.select-mps .box:not(.multiCol):not(.multiChkCol) .options label,
.select-mps .box:not(.multiCol):not(.multiChkCol) .options label span,
.select-mps .multiChk .approve,
.select-mps .multiChkCol .approve,
.colorpicker {
    align-items: center;
}

    .select-mps .combo:after,
    .select-mps .clear,
    .select-mps .multiChk .approve,
    .select-mps .multiChkCol .approve,
    .colorpicker,
    .gender .box,
    .gender .box span {
        justify-content: center;
    }

.toastify .progressfy {
    justify-content: end;
}

.switch-vertical label {
    text-align: left;
}

[tooltip]::after {
    text-align: right;
}

input[type='checkbox'], input[type='radio'],
input[type='checkbox'] + span, input[type='radio'] + span {
    vertical-align: top;
}

[tooltip]::after {
    white-space: pre;
}

.select-mps .placeholder-cbo,
.select-mps .container-cbo,
.select-mps .options > label div,
.select-mps span,
.select-mps .box .notfound {
    white-space: nowrap;
}

[tooltip]::after,
.select-mps .placeholder-cbo,
.select-mps .container-cbo,
.select-mps .box,
.select-mps .options > label div,
.select-mps span,
.colorpicker > label,
.toggle-switch .toggle-outside,
.gender > label {
    overflow: hidden;
}

    .select-mps .box .lst-items > div {
        overflow-y: auto;
    }

[tooltip]::after,
.select-mps .placeholder-cbo,
.select-mps .container-cbo,
.select-mps .options > label div,
.select-mps span {
    text-overflow: ellipsis;
}

.toastify,
.toastify .progressfy {
    position: fixed;
}

[tooltip],
.select-mps,
.select-mps .combo,
.select-mps.prry .box .lst-items ul,
input[type='checkbox'], input[type='radio'],
.toggle-switch,
.gender .box,
.gender .box span {
    position: relative;
}

    .toastify .closefy,
    [tooltip]::before,
    [tooltip]::after,
    .select-mps .combo.fix:before,
    .select-mps .combo:after,
    .select-mps .clear,
    .select-mps .box,
    .select-mps .multiChk .approve,
    .select-mps .multiChkCol .approve,
    input[type='checkbox']:after, input[type='radio']:after,
    .colorpicker,
    .toggle-switch input,
    .toggle-switch .toggle-inside,
    .switch-vertical .toggle-outside,
    .gender .box span:before {
        position: absolute;
    }

    .select-mps .multiCol table thead,
    .select-mps .multiChkCol table thead {
        position: sticky;
    }

    input[type='checkbox']:after, input[type='radio']:after {
        content: '';
    }

    .select-mps .combo:after,
    .select-mps .clear,
    .select-mps .multiCol table thead,
    .select-mps .multiChkCol table thead,
    input[type='checkbox']:after, input[type='radio']:after,
    .toggle-switch input,
    .switch-vertical .toggle-outside {
        top: 0;
    }

.toastify .closefy {
    top: 1rem;
}

.select-mps .combo:after,
html[class=translated-ltr] .select-mps.en .combo:after,
html:not(.translated-ltr) .select-mps:not(.en) .clear,
html[class=translated-ltr] .select-mps.en .clear,
.select-mps.lgen .box,
html:not(.translated-ltr) .select-mps.en .box {
    right: auto;
}

html:not(.translated-ltr) .toastify,
.select-mps .box,
html[class=translated-ltr] .select-mps.en .box,
.switch-vertical input,
.switch-vertical .toggle-outside,
.gender .box span {
    right: 0;
}

.select-mps.lgen .combo:after,
html[class=translated-ltr] .select-mps:not(.en) .combo:after,
html:not(.translated-ltr) .select-mps.en .combo:after {
    right: 6px;
}

html[class=translated-ltr] .select-mps:not(.en) .clear,
html:not(.translated-ltr) .select-mps.en .clear {
    right: 15px;
}

html[class=translated-ltr] .toastify .closefy {
    right: 1rem;
}

.toastify .progressfy {
    bottom: 0;
}

.toastify {
    bottom: 1rem;
}

html:not(.translated-ltr) .select-mps.en .combo:after,
html[class=translated-ltr] .select-mps:not(.en) .clear,
html:not(.translated-ltr) .select-mps.en .clear,
.select-mps .box,
html[class=translated-ltr] .select-mps.en .box {
    left: auto;
}

html[class=translated-ltr] .toastify,
.toastify .progressfy,
.select-mps.lgen .box,
html:not(.translated-ltr) .select-mps.en .box,
input[type='checkbox']:after, input[type='radio']:after,
.colorpicker,
.gender .box span {
    left: 0;
}

html:not(.translated-ltr) .select-mps:not(.en):not(.lgen) .combo:after,
html[class=translated-ltr] .select-mps.en .combo:after {
    left: 6px;
}

html:not(.translated-ltr) .select-mps:not(.en) .clear,
html[class=translated-ltr] .select-mps.en .clear {
    left: 15px;
}

html:not(.translated-ltr) .toastify .closefy {
    left: 1rem;
}

[tooltip]::before,
[tooltip]::after,
.toggle-switch input,
input[type='radio']:after,
.gender .box span:before {
    opacity: 0;
}

    .toggle-switch input:checked + label,
    .gender input[type="radio"]:checked + .box span:before {
        opacity: 1;
    }

input[type='color'],
input[type='color']::-webkit-color-swatch-wrapper {
    padding: 0;
}

[tooltip]::after {
    padding-top: 0.25rem;
}

.select-mps .box .options > label div,
.select-mps .box .options > label span {
    padding-top: 0.5rem;
}

.select-mps .box > div,
.select-mps .multiChk > div,
.select-mps .multiChkCol > div {
    padding-top: 0.7rem;
}

.toastify {
    padding-top: 1rem;
}

.select-mps .box .options > label span,
html[class=translated-ltr] .select-mps.en .box .options > label span {
    padding-right: 0;
}

.select-mps .clear,
html:not(.translated-ltr) .select-mps.en .box .options > label span,
.select-mps .box .options > label > div {
    padding-right: 0.5rem;
}

.select-mps .box .notfound,
.select-mps .box > div > div:first-child,
.select-mps .box .options label,
.select-mps .box input[type=search],
.select-mps .combo,
html:not(.translated-ltr) .select-mps:not(.en):not(.lgen) .combo,
html[class=translated-ltr] .select-mps.en .combo,
input[type='checkbox'] + span, input[type='radio'] + span {
    padding-right: 0.7rem;
}

.toastify,
html:not(.translated-ltr) .toastify .msgfy,
[tooltip]::after {
    padding-right: 1rem;
}

html[class=translated-ltr] .select-mps:not(.en) .combo,
html:not(.translated-ltr) .select-mps.en .combo,
.select-mps.lgen .combo {
    padding-right: 2rem;
}

html[class=translated-ltr] .toastify .msgfy {
    padding-right: 2.5rem;
}

[tooltip]::after {
    padding-bottom: 0.25rem;
}

.select-mps .box .options > label div,
.select-mps .box .options > label span {
    padding-bottom: 0.5rem;
}

.toastify {
    padding-bottom: 1rem;
}

.select-mps .multiChk > div,
.select-mps .multiChkCol > div {
    padding-bottom: 3rem;
}

html:not(.translated-ltr) .select-mps.en .box .options > label span {
    padding-left: 0;
}

.select-mps .clear,
.select-mps .box .options > label span,
html[class=translated-ltr] .select-mps.en .box.options > label span {
    padding-left: 0.5rem;
}

html[class=translated-ltr] .select-mps:not(.en) .combo,
html:not(.translated-ltr) .select-mps.en .combo,
.select-mps.lgen .combo,
.select-mps .box .notfound,
.select-mps .box > div > div:first-child,
.select-mps .box .options label,
.select-mps .box input[type=search] {
    padding-left: 0.7rem;
}

.toastify,
.switch-vertical label,
html[class=translated-ltr] .toastify .msgfy,
[tooltip]::after {
    padding-left: 1rem;
}

.select-mps .combo,
html:not(.translated-ltr) .select-mps:not(.en):not(.lgen) .combo,
html[class=translated-ltr] .select-mps.en .combo {
    padding-left: 2rem;
}

html:not(.translated-ltr) .toastify .msgfy {
    padding-left: 2.5rem;
}

.switch-vertical input,
.switch-vertical label {
    margin: 0;
}

.toastify .msgfy li {
    margin-top: 0.25rem;
}

.select-mps .box .lst-items,
.select-mps .box .lst-items > div {
    margin-top: 0.7rem;
}

.select-mps .multiChk a,
.select-mps .box .notfound {
    margin-top: 1rem;
}

.select-mps .multiCol .lst-items,
.select-mps .multiChkCol .lst-items {
    margin-right: 0.7rem;
}

.select-mps.prry .box:not(.multiCol):not(.multiChkCol) .options > label > span.no + span:not(.no),
html[class=translated-ltr] .select-mps.prry.lgen .flag,
html:not(.translated-ltr) .select-mps.prry .flag,
input[type='checkbox']:not(.switch) + span {
    margin-right: 0.5rem;
}

.toastify, .select-mps .multiCol table span, .select-mps .multiChkCol table span {
    margin-right: 1rem;
}

    .toastify .msgfy li {
        margin-bottom: 0.25rem;
    }

.select-mps.prry .box:not(.multiCol):not(.multiChkCol) .options > label > span.no + span:not(.no),
.select-mps.prry .box .options > label > div,
html[class=translated-ltr] .select-mps.prry:not(.lgen) .flag {
    margin-left: 0.5rem;
}

.select-mps .multiCol .lst-items,
.select-mps .multiChkCol .lst-items {
    margin-left: 0.7rem;
}

.toastify,
.select-mps .multiCol table span,
.select-mps .multiChkCol table span {
    margin-left: 1rem;
}

    .toastify .closefy,
    input[type='color'],
    input[type='color']::-webkit-color-swatch,
    .select-mps.prry.lgen .combo {
        border: none;
    }

.select-mps.prry.lgen .combo {
    border-radius: 0;
}

.toastify,
.select-mps .combo,
input[type='checkbox']:not(.switch),
.colorpicker {
    border-radius: 0.25rem;
}

[tooltip]::after {
    border-radius: 20%;
}

input[type='checkbox'].switch:after,
input[type='radio'],
input[type='radio']:after,
.colorpicker > label,
.toggle-switch .toggle-inside {
    border-radius: 100%;
}

.select-mps .combo.active {
    border-bottom-right-radius: 0;
}

.select-mps .box > div {
    border-bottom-right-radius: 0.25rem;
}

.select-mps .combo.active {
    border-bottom-left-radius: 0;
}

.select-mps .box > div {
    border-bottom-left-radius: 0.25rem;
}

.select-mps .box input[type=search],
input[type='checkbox'], input[type='radio'] {
    outline: none;
}

.toastify .closefy {
    background-color: transparent;
}

.toastify,
.select-mps .combo,
.select-mps .box,
.gender .box,
input[type='checkbox'],
input[type='radio'],
input[type='checkbox'].switch:checked,
input[type='radio']:after {
    background-color: #fff;
}

.select-mps .multiCol table thead,
.select-mps .multiChkCol table thead {
    background-color: #d5e4e9;
}

.select-mps .multiCol table tbody tr:hover,
.select-mps .multiCol table tbody tr:nth-of-type(even):hover,
.select-mps .multiChkCol table tbody tr:hover,
.select-mps .multiChkCol table tbody tr:nth-of-type(even):hover {
    background-color: #f5f5f5;
}

.select-mps .combo.disabled {
    background-color: #fcfcfc;
}

[tooltip]::before {
    color: #666;
}

[tooltip]::after {
    background-color: #666;
}

.toastify.error .progressfy div {
    background-color: red;
}

.toastify.warning .progressfy div {
    background-color: yellow;
}

.toastify.success .progressfy div {
    background-color: green;
}

.toastify.info .progressfy div,
.toggle-switch .toggle-inside {
    background-color: blue;
}

[tooltip]::after,
.select-mps .box .options label:hover > span,
.toggle-switch label,
.select-mps.prry .box:not(.multiCol):not(.multiChkCol) .options > label:hover > span:not(.no),
.select-mps.prry .box:not(.multiCol):not(.multiChkCol) .options > label:hover > div,
.gender input[type="radio"]:checked + .box span,
.gender .box span:before {
    color: #fff;
}

.select-mps .multiCol table thead,
.select-mps .multiChkCol table thead {
    color: #0d98c8;
}

.toastify .closefy svg {
    fill: #fcfcfc;
}

.toastify .closefy:hover svg,
.select-mps .placeholder-cbo {
    fill: var(--clrdef);
}

.select-mps .combo:after {
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
}

.switch-vertical label,
.gender input[type="radio"]:checked + .box span:before {
    font-size: 1.5rem;
}

.gender .box span:before {
    font-size: 2rem;
}

.form-control,
.btn,
.select-mps .combo {
    min-height: 37px;
}

body .accordion .accordion-button.collapsed {
    background-color: #f2f7ff;
}

.toastify {
    max-width: calc(100% - 2rem);
}

    .toastify > div:first-child {
        max-width: 380px;
    }

    .toastify .progressfy div {
        height: 5px;
        transition: width var(--delay-progress) linear;
    }

.select-mps .multiCol table tbody tr:hover,
.select-mps .multiCol table tbody tr:nth-of-type(even):hover,
.select-mps .multiChkCol table tbody tr:hover,
.select-mps .multiChkCol table tbody tr:nth-of-type(even):hover {
    transition: background-color 150ms;
}

.toastify {
    transform: translateX(-1rem);
}

.select-mps .combo.active:after {
    transform: rotateZ(180deg);
}

.toastify {
    box-shadow: 0 1px 10px 0 rgb(0 0 0 / 10%), 0 2px 15px 0 rgb(0 0 0 / 5%);
}

[tooltip]::before {
    content: '';
}

.toastify {
    z-index: 99999;
}

/* select */
.select-mps .placeholder-cbo,
.select-mps .container-cbo {
    max-width: calc(100% - 10px);
}

.select-mps .combo {
    border: 1px solid #ced4da;
}

    .select-mps .combo.ny {
        border: 2px solid rgb(50 177 0);
    }

    .select-mps .combo:after {
        content: "\f0d7";
    }

.select-mps .clear::before {
    padding-top: 3px;
}

.select-mps .box {
    z-index: 1060;
}

    .select-mps .box > div {
        border: 1px solid rgba(0,0,0,.25);
        border-top: 1px solid rgba(34,36,38,.15);
    }

.select-mps .multiCol table thead > tr > *,
.select-mps .multiCol table tbody > tr > *,
.select-mps .multiChkCol table thead > tr > *,
.select-mps .multiChkCol table tbody > tr > * {
    border: 1px solid #eee;
}

.select-mps .multiCol table thead > tr > *,
.select-mps .multiChkCol table thead > tr > * {
    border-bottom: none;
}

    .select-mps .multiCol table thead > tr > *:not(:first-child),
    .select-mps .multiCol table tbody > tr > *:not(:first-child),
    .select-mps .multiChkCol table thead > tr > *:not(:first-child),
    .select-mps .multiChkCol table tbody > tr > *:not(:first-child) {
        border-right: none;
    }

.select-mps .multiCol table tbody > tr:not(:first-child) > *,
.select-mps .multiChkCol table tbody > tr:not(:first-child) > * {
    border-top: none;
}

.select-mps .box input[type=search],
.select-mps .multiCol table th,
.select-mps .multiChkCol table th {
    height: 30px;
}

.select-mps .box .options {
    display: flex;
    min-height: 39px;
    align-items: center;
}

    .select-mps .box .options:not(.line) {
        border-bottom: dashed 0.5px #ccc;
    }

    .select-mps .box .options.line {
        border-bottom: dashed 1px var(--clryellow);
    }

    .select-mps .box .options label {
        height: 39px !important;
    }

.select-mps .multiCol table span,
.select-mps .multiChkCol table span {
    max-width: 200px;
    font-weight: 500;
}

.select-mps .box .lst-items,
.select-mps .box .lst-items > div {
    min-width: 196px;
    max-height: 196px;
}

.select-mps .box .box-pagination {
    transform: scale(0.85);
    margin-top: 2px;
}

.select-mps .box input[type=search] {
    border: 1px solid rgba(34,36,38,.15);
}

    .select-mps .box input[type=search]:focus {
        border: 1px solid rgba(82, 168, 236, 0.8);
        box-shadow: 0 1px 1px rgb(0 0 0 / 8%) inset, 0 0 8px rgb(82 168 236 / 60%);
    }

.select-mps .box:not(.multiCol):not(.multiChkCol) .options label.active:hover,
.select-mps .box:not(.multiCol):not(.multiChkCol) .options label:hover {
    background-color: #6fa7b7 !important;
}

.select-mps .box:not(.multiCol):not(.multiChkCol) .options > label span {
    max-width: 270px;
}

.select-mps .box:not(.multiCol):not(.multiChkCol) .options > label > div {
    max-width: 210px;
}

.select-mps .box:not(.multiChk) .options.bg,
.select-mps .multiChk .options label.active,
.select-mps .multiChkCol .options label.active {
    background-color: #f6f9fa;
}

.select-mps .box .notfound {
    color: var(--clrred);
}

.select-mps .multiChk .approve,
.select-mps .multiChkCol .approve {
    bottom: 10px;
}

.select-mps.prry {
    /* min-width: 80px;*/
}

    .select-mps.prry .combo {
        background-color: #f5f5f5;
    }

    .select-mps.prry.en .combo {
        border: 1px solid #fff;
    }

html[class=translated-ltr] .select-mps.prry.lgen .flag,
html:not(.translated-ltr) .select-mps.prry .flag,
html[class=translated-ltr] .select-mps.prry:not(.lgen) .flag {
    background-color: #fcfcfc;
}

.select-mps.prry .flag,
.select-mps.prry .box:not(.multiCol):not(.multiChkCol) .options > label > span:first-child {
    width: 23.14px;
    height: 17.14px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.select-mps.prry .box:not(.multiCol):not(.multiChkCol) .options > label > div + span:not(.no) {
    color: #35a5ca;
}

/* tooltip */
[tooltip]::before {
    border: 6px solid transparent;
    z-index: 1100;
}

[tooltip]::after {
    content: attr(tooltip);
    max-width: 70vw;
    box-shadow: 0 1em 2em -0.5em rgb(0 0 0 / 35%);
    z-index: 1099;
}

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: var(--clrdef);
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -.5em);
}

[tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: var(--clrdef);
}

[tooltip][flow^="down"]::after {
    top: calc(100% + 5px);
}

[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, .5em);
}

[tooltip][flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: var(--clrdef);
    left: calc(0em - 5px);
    transform: translate(-.5em, -50%);
}

[tooltip][flow^="left"]::after {
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(-.5em, -50%);
}

[tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: var(--clrdef);
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
}

[tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
}

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
    animation: tooltips-vert 150ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 150ms ease-out forwards;
}

input[type='checkbox'],
input[type='radio'] {
    height: 21px;
    border: 1px solid #8c8c8c;
}

    input[type='checkbox']:checked,
    input[type='radio']:checked {
        border: 1px solid var(--clrblue);
        background-color: var(--clrblue);
    }

    input[type='checkbox'].tree:checked, input[type='radio'].tree:checked {
        border: 1px solid #cdd1e9;
        background-color: #ececec;
    }

    input[type='checkbox']:disabled, input[type='radio']:disabled {
        background-color: #f6f8ff;
        opacity: 0.9;
    }

        input[type='checkbox']:disabled:checked, input[type='radio']:disabled:checked {
            border: 1px solid #8c8c8c;
            background-color: #e1e6f9;
        }

    input[type='checkbox']:hover:not(:checked):not(:disabled), input[type='radio']:hover:not(:checked):not(:disabled) {
        border: 1px solid #a6aed9;
    }

    input[type='checkbox']:focus, input[type='radio']:focus {
        box-shadow: 0 0 0 2px rgba(39, 94, 254, .3);
    }

    input[type='checkbox']:not(.switch), input[type='radio']:not(.switch) {
        width: 21px;
        min-width: 21px;
    }

        input[type='checkbox']:not(.switch):after, input[type='radio']:not(.switch):after {
            opacity: 0;
        }

        input[type='checkbox']:not(.switch):checked, input[type='radio']:not(.switch):checked {
            opacity: 1;
        }

    input[type='checkbox'] + span, input[type='radio'] + span {
        line-height: 21px;
    }

    input[type='checkbox']:not(.switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        left: calc(50% - 3px);
        top: 3.4px;
        transform: rotate(20deg);
    }

    input[type='checkbox']:not(.switch).tree:after {
        width: 5px;
        height: 5px;
        top: 5px;
        left: 5px;
        border: 2px solid #fff;
        transform: none;
    }

    input[type='checkbox']:not(.switch):checked {
        transform: rotate(43deg);
    }

    input[type='checkbox'].switch {
        width: 38px;
        border-radius: 11px;
    }

        input[type='checkbox'].switch:after {
            left: 2px;
            top: 2px;
            width: 15px;
            height: 15px;
            transform: translateX(0);
            background-color: #fff;
        }

        input[type='checkbox'].switch:not(:checked) {
            background-color: var(--clrred);
        }

        input[type='checkbox'].switch:checked {
            background-color: var(--clrgreen);
        }

            input[type='checkbox'].switch:checked:after {
                transform: translateX(17px);
            }

    input[type='radio']:after {
        width: 19px;
        height: 19px;
        transform: scale(0.7);
    }

    input[type='radio']:checked {
        transform: scale(0.5);
    }

input[type='color'] {
    width: 25px;
    height: 25px;
}

.colorpicker {
    top: -24px;
    width: 79px;
    height: 23px;
    border: 1px solid #e6e6e6;
    background-color: #fefefe;
}

    .colorpicker > label {
        width: 17px;
        height: 17px;
        box-shadow: 0 1px 1px rgb(0 0 0 / 8%) inset, 0 0 4px rgb(0 0 0 / 15%);
    }

.toggle-switch {
    width: 10px;
}

    .toggle-switch input {
        z-index: 2;
    }

        .toggle-switch input:checked {
            z-index: 1;
        }

        .toggle-switch input:not(:checked) + label:hover {
            opacity: 0.5;
        }

    .toggle-switch label {
        opacity: 0.33;
    }

    .toggle-switch .toggle-outside {
        border-radius: 17px;
    }

.switch-vertical {
    background-color: #00F;
    height: 32px;
    margin-left: 26px;
}

    .switch-vertical input {
        width: 60px;
    }

        .switch-vertical input:focus ~ span {
            box-shadow: 0 0 0 2px rgba(39, 94, 254, .3);
        }

    .switch-vertical label {
        line-height: 30px;
        width: 80px;
        height: 50%;
    }

    .switch-vertical .toggle-outside {
        background: rgb(241 241 241);
        border: 1px solid #dcdcdc;
        width: 21px;
    }

    .switch-vertical .toggle-inside {
        height: 15px;
        left: 2.2px;
        top: 3px;
        width: 15px;
    }

    .switch-vertical input:checked ~ .toggle-outside .toggle-inside {
        top: 3px;
    }

    .switch-vertical input ~ input:checked ~ .toggle-outside .toggle-inside {
        top: 12px;
    }

.gender.ny {
    border: 2px solid rgb(50 177 0);
}

.gender > label {
    width: 50%;
    box-shadow: 0 0 10px rgb(200 200 200 / 20%);
}

    .gender > label:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .gender > label:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

.gender input[type="radio"]:checked + .box {
    background-color: #6eadbe;
}

    .gender input[type="radio"]:checked + .box span {
        transform: translateY(7px);
    }

        .gender input[type="radio"]:checked + .box span:before {
            transform: translateY(0px);
        }

.gender .box {
    height: 37px;
}

    .gender .box:active {
        transform: translateY(2px);
    }

    .gender .box span {
        transform: translate(0, 7px);
        transition: all 150ms ease;
        color: #6eadbe;
    }

        .gender .box span:before {
            transform: translateY(-20px);
            transition: all 300ms ease-in-out;
        }

html:not(.translated-ltr) > body .gender .box span:before {
    right: -20px;
}

html[class=translated-ltr] > body .gender .box span:before {
    left: -20px;
}

/* wm */
.gender .male span:before {
    content: "\f183";
}

.gender .female span:before {
    content: "\f182";
}

@keyframes tooltips-vert {
    to {
        opacity: .9;
        transform: translate(-50%, 0);
    }
}

@keyframes tooltips-horz {
    to {
        opacity: .9;
        transform: translate(0, -50%);
    }
}