:root {
    --jsFormBackground: #fff;
    --jsFormBorderColor: #000;
    --jsFormCheckedBackground: #006F13;
    --jsFormSwitchOn: #006F13;
    --jsFormSwitchOff: #DA2A1C;
    --jsFormCheckMask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DTxzdmcgdmlld0JveD0iMCAwIDQ4IDQ4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3R5bGU9ImZpbGw6I2ZmZiI+DTxwYXRoIGQ9Ik0yMi44MzYsNDIuNDQ1Yy0xLjc2MiwyLjM0MiAtNS4wOTEsMi44MTIgLTcuNDMxLDEuMDVsLTEzLjE0LC05Ljg4N2MtMi4zNDEsLTEuNzYxIC0yLjgxMSwtNS4wOSAtMS4wNDksLTcuNDMxYzEuNzYsLTIuMzQxIDUuMDg5LC0yLjgxMSA3LjQzMSwtMS4wNDlsNy44MjksNS44OWMwLjU5LDAuNDQzIDEuNDMxLDAuMzI1IDEuODc3LC0wLjI2NWwxOS45NTEsLTI1LjE5OWMxLjc2MSwtMi4zNDEgNS4wOSwtMi44MTEgNy40MzEsLTEuMDQ5YzEuMTI1LDAuODQ2IDEuODY3LDIuMTA0IDIuMDY0LDMuNDk4YzAuMTk2LDEuMzkzIC0wLjE2OCwyLjgwOCAtMS4wMTQsMy45MzJsLTIzLjk0OSwzMC41MVoiLz4NPC9zdmc+);
    --jsFormEyeClosed: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DTxzdmcgdmlld0JveD0iMCAwIDY0IDY0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DTxwYXRoIGQ9Ik00MS4wMzgsMjguNDc1bC02Ljk3NiwxMi4wODhjNC4zMjYsLTAuOSA3LjU2MywtNC41NzUgNy41NjMsLTguOTg4Yy0wLjAxMiwtMS4wODcgLTAuMjI1LC0yLjEyNSAtMC41ODcsLTMuMVptLTkuMDEzLC0xMS4zYzAuMzYzLDAgMC43MjUsMC4wMTMgMS4wODgsMC4wMzhsLTMuMSw1LjM2MmMtNC4zNSwwLjg4OCAtNy42MTMsNC41NzUgLTcuNjEzLDkuMDEzYy0wLDEuMTEyIDAuMiwyLjE3NSAwLjU4OCwzLjE2MmwtMy4xMDEsNS4zNzVjLTEuODM3LC0yLjM4NyAtMi45MjQsLTUuMzUgLTIuOTI0LC04LjUzN2MtMC4wMTMsLTcuOTYzIDYuNzM3LC0xNC40MTMgMTUuMDYyLC0xNC40MTNabTE2LjEzOCwtMS4wNWwtNCw2LjkyNWMxLjgzNywyLjM4OCAyLjkyNSw1LjMzOCAyLjkyNSw4LjUyNWMwLDcuOTYzIC02Ljc1LDE0LjQxMyAtMTUuMDc1LDE0LjQxM2MtMC4zNjMsMCAtMC43MTMsLTAuMDM4IC0xLjA2MywtMC4wNjNsLTIuNjUsNC41NzVjMS4yMjUsMC4xMjUgMi40NSwwLjIyNSAzLjcxMywwLjIzOGM1LjUsLTAuMDI1IDExLjE4NywtMS4zNzUgMTYuNTc1LC0zLjkyNWM0LC0xLjk3NSA3LjkxMiwtNC43NzUgMTEuMjg3LC04LjIyNWMxLjY2MywtMS43NjMgMy43ODgsLTQuMzEzIDQuMTI1LC03LjAyNWMtMC4wMzcsLTIuMzUgLTIuNTYyLC01LjI2MyAtNC4xMjUsLTcuMDI2Yy0zLjE3NSwtMy4zMTIgLTYuOTc1LC02LjAyNCAtMTEuMjg3LC04LjIyNGMtMC4xMjUsLTAuMDUgLTAuMjc1LC0wLjExMyAtMC40MjUsLTAuMTg4Wm0tMTIuNDEzLC0zLjQ4N2MtMS4yMjUsLTAuMTM4IC0yLjQ2MiwtMC4yMTMgLTMuNzI1LC0wLjIyNmMtNS41LDAuMDI2IC0xMS4xODcsMS4zNjMgLTE2LjU4NywzLjkyNmMtNC4wMDEsMS45NzUgLTcuOSw0Ljc3NCAtMTEuMjg4LDguMjI1Yy0xLjY2MiwxLjc2MiAtMy43ODcsNC4zMTIgLTQuMTI1LDcuMDI1YzAuMDM3LDIuMzUgMi41NjMsNS4yNjIgNC4xMjUsNy4wMjVjMy4xNzUsMy4zMTIgNi45NzUsNi4wMjUgMTEuMjg4LDguMjI1YzAuMTUsMC4wNzUgMC4zLDAuMTM3IDAuNDM3LDAuMjEybC02LjE0OCwxMC43MzhsNS40MzgsMy4yMTJsMzEuNDEsLTU0LjhsLTUuMjM3LC0zLjJsLTUuNTg4LDkuNjM4WiIvPg08L3N2Zz4=);
    --jsFormEyeOpened: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DTxzdmcgdmlld0JveD0iMCAwIDY0IDY0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DSAgICA8cGF0aCBkPSJNMzIuMDEyLDE3LjU3NWM4LjMyNiwwIDE1LjA3Niw2LjQ1IDE1LjA3NiwxNC40MTJjMCw3Ljk2MyAtNi43NSwxNC40MTMgLTE1LjA3NiwxNC40MTNjLTguMzI1LDAgLTE1LjA3NSwtNi40NSAtMTUuMDc1LC0xNC40MTNjMCwtNy45NjIgNi43NSwtMTQuNDEyIDE1LjA3NSwtMTQuNDEyWm0wLC00Ljc2M2MtNS41LDAuMDI1IC0xMS4xODcsMS4zNjMgLTE2LjU4NywzLjkyNWMtNCwxLjk3NSAtNy45LDQuNzc2IC0xMS4yODgsOC4yMjVjLTEuNjYyLDEuNzYzIC0zLjc4Nyw0LjMgLTQuMTI1LDcuMDI1YzAuMDM4LDIuMzUgMi41NjMsNS4yNjMgNC4xMjUsNy4wMjVjMy4xNzUsMy4zMTMgNi45NzUsNi4wMjUgMTEuMjg4LDguMjI1YzUuMDI1LDIuNDM4IDEwLjU4NywzLjg1IDE2LjU4NywzLjkyNWM1LjUsLTAuMDI1IDExLjIwMSwtMS4zNzUgMTYuNTc2LC0zLjkyNWM0LC0xLjk3NSA3LjkxMiwtNC43NzUgMTEuMjg3LC04LjIyNWMxLjY2MywtMS43NjIgMy43ODgsLTQuMzEyIDQuMTI1LC03LjAyNWMtMC4wMzcsLTIuMzUgLTIuNTYzLC01LjI2MiAtNC4xMjUsLTcuMDI1Yy0zLjE3NSwtMy4zMTIgLTYuOTc1LC02LjAyNCAtMTEuMjg3LC04LjIyNWMtNS4wMjYsLTIuNDM3IC0xMC42MDEsLTMuODM3IC0xNi41NzYsLTMuOTI1Wm05LjU4OCwxOS4xNzVjMCw1LjA4OCAtNC4zLDkuMiAtOS42MTMsOS4yYy01LjMxMiwwIC05LjYsLTQuMTI1IC05LjYsLTkuMmMwLC01LjA4NyA0LjMsLTkuMiA5LjYxMywtOS4yYzUuMzEyLDAgOS42LDQuMTEzIDkuNiw5LjJaIi8+DTwvc3ZnPg==);
    --jsFormCross: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DTxzdmcgdmlld0JveD0iMCAwIDY0IDY0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3R5bGU9InN0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtmaWxsOm5vbmU7c3Ryb2tlOiMwMDA7c3Ryb2tlLXdpZHRoOjE0cHg7Ij4NPHBhdGggZD0iTTMyLDhsMCw0OGwwLC0yNGwtMjQsMGw0OCwwIi8+PC9zdmc+);
}


/* Body --> */

.jsform {
    position: relative;
    display: inline-block;
    background-color: var(--jsFormBackground);
}

.jsform input,
.jsform select,
.jsform textarea {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    opacity: 0;
}


/* --> */

[data-jsform=rte] {
    box-sizing: border-box;
    width: 100%;
    background-color: var(--jsFormBackground);
    border: 1px solid var(--jsFormBorderColor);
    border-radius: 4px;
}

[data-jsform=rte] > div {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding: 4px;
    color: var(--jsFormBorderColor);
}


/* --> */

[data-jsform=checkbox] {
    box-sizing: border-box;
    user-select: none;
    width: 20px;
    height: 20px;
    padding: 3px;
    border: 1px solid var(--jsFormBorderColor);
    border-radius: 4px;
    vertical-align: middle;
    transition: all 0.6s ease-in-out;
}

[data-jsform=checkbox] em {
    user-select: none;
    display: block;
    height: 100%;
    background-color: #fff;
    border-radius: 3px;
    opacity: 0;
    mask-image: var(--jsFormCheckMask);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: var(--jsFormCheckMask);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    transition: opacity 0.6s ease-in-out;
}

[data-jsform=checkbox][data-checked=true] {
    background-color: var(--jsFormCheckedBackground);
    border-color: var(--jsFormCheckedBackground);
}

[data-jsform=checkbox][data-checked=true] em {
    opacity: 1;
}


/* --> */

[data-jsform=switch] {
    outline: none;
    box-sizing: border-box;
    width: 36px;
    padding: 2px;
    border: 2px solid var(--jsFormSwitchOff);
    border-radius: 10px;
    vertical-align: middle;
    transition: all 0.6s;
}

[data-jsform=switch] em {
    display: block;
    width: 14px;
    height: 14px;
    background-color: var(--jsFormSwitchOff);
    border-radius: 7px;
    transition: all 0.6s;
}

[data-jsform=switch][data-checked=true] {
    border-color: var(--jsFormSwitchOn);
}

[data-jsform=switch][data-checked=true] em {
    margin-left: 15px;
    background-color: var(--jsFormSwitchOn);
}