:root {
    --jsformBackground: #fff;
    --jsformBorderColor: #000;
    --jsformCheckedBackground: green;
    --jsformSwitchOn: green;
    --jsformSwitchOff: red;
    --jsformCheckMask: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij4NPHBhdGggZD0iTTIyLjgzNiw0Mi40NDVjLTEuNzYyLDIuMzQyIC01LjA5MSwyLjgxMiAtNy40MzEsMS4wNWwtMTMuMTQsLTkuODg3Yy0yLjM0MSwtMS43NjEgLTIuODExLC01LjA5IC0xLjA0OSwtNy40MzFjMS43NiwtMi4zNDEgNS4wODksLTIuODExIDcuNDMxLC0xLjA0OWw3LjgyOSw1Ljg5YzAuNTksMC40NDMgMS40MzEsMC4zMjUgMS44NzcsLTAuMjY1bDE5Ljk1MSwtMjUuMTk5YzEuNzYxLC0yLjM0MSA1LjA5LC0yLjgxMSA3LjQzMSwtMS4wNDljMS4xMjUsMC44NDYgMS44NjcsMi4xMDQgMi4wNjQsMy40OThjMC4xOTYsMS4zOTMgLTAuMTY4LDIuODA4IC0xLjAxNCwzLjkzMmwtMjMuOTQ5LDMwLjUxWiIgc3R5bGU9ImZpbGw6I2ZmZjsiLz4NPC9zdmc+);
}

/* 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: 1px;
    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;
    width: 16px;
    height: 16px;
    padding: 3px;
    border: 1px solid var(--jsformBorderColor);
    border-radius: 4px;
    vertical-align: middle;
    transition: all 0.6s ease-in-out;
}

[data-jsform=checkbox] em {
    display: block;
    height: 100%;
    background-image: var(--jsformCheckMask);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 3px;
    opacity: 0;
    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);
}


/* File --> */

[data-jsform=file] {

}


/* Select Box --> */

[data-jsform=multiselect] {

}

[data-jsform=multiselect] dl dt {
    
}

[data-jsform=multiselect] dl dd {
    
}

[data-jsform=multiselect] ol {
    box-sizing: border-box;
    list-style: none;
    line-height: 36px;
}

[data-jsform=multiselect] ol li {
    overflow: hidden;
    position: relative;
    white-space: pre;
    text-overflow: ellipsis;
}

[data-jsform=multiselect] ol li::before,
[data-jsform=multiselect] ol li::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    background-color: var(--background);
    border-radius: 4px;
    transition: all 0.6s ease-in-out;
}

[data-jsform=multiselect] ol li::before {
    top: 8px;
    right: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
}

[data-jsform=multiselect] ol li.selected::before {
    border-color: green;
}

[data-jsform=multiselect] ol li::after {
    top: 11px;
    right: 3px;
    width: 14px;
    height: 14px;
    mask: url(../img/jsform-check.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask: url(../img/jsform-check.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

[data-jsform=multiselect] ol li.selected::after {
    background-color: green;
}