.form-switch {
    /*position: absolute;*/
    top: 5px;
    left: 5px;
    display: inline-block;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: color 0.1s;
    transition: color 0.1s;
}

.form-switch:not(.disabled) {
    cursor: pointer;
}

.form-switch.disabled {
    color: var(--lighter-color);
}

.form-switch i {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    background-color: var(--dark1-color);
    border-radius: 23px;
    vertical-align: text-bottom;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.light .form-switch i {
    background-color: var(--light-color);
}

.form-switch i::before {
    content: "";
    position: absolute;
    left: 0;
    width: 42px;
    height: 22px;
    background-color: var(--dark1-color);
    border-radius: 11px;
    -webkit-transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
    transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
    -webkit-transition: all 0.25s linear;
    transition: all 0.25s linear;
}

.light .form-switch i::before {
    background-color: var(--light-color);
}

.form-switch i::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 22px;
    background-color: var(--lighter-color);
    border-radius: 11px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
    -webkit-transform: translate3d(2px, 2px, 0);
    transform: translate3d(2px, 2px, 0);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.light .form-switch i::after {
    background-color: var(--lightest-color);
}

.form-switch:active:not(.disabled) i::after {
    width: 28px;
    -webkit-transform: translate3d(2px, 2px, 0);
    transform: translate3d(2px, 2px, 0);
}

.form-switch:active:not(.disabled) input:checked+i::after {
    -webkit-transform: translate3d(16px, 2px, 0);
    transform: translate3d(16px, 2px, 0);
}

.form-switch input {
    display: none;
}

.form-switch input:checked+i {
    background-color: var(--accent-color);
}

.form-switch input:checked+i::before {
    background-color: var(--accent-color);
    -webkit-transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
    transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}

.form-switch input:checked+i::after {
    background-color: var(--dark-color);
    -webkit-transform: translate3d(22px, 2px, 0);
    transform: translate3d(22px, 2px, 0);
}

.form-switch:hover:not(.disabled) i::after {
    background-color: var(--lightest-color);
}

.light .form-switch:hover:not(.disabled) i::after {
    background-color: var(--lighter-color);
}

.form-switch:hover:not(.disabled) input:checked+i::after {
    background-color: var(--back-color);
}

.form-switch.disabled i {
    background-color: var(--light-color);
}

.form-switch.disabled i::before {
    background-color: var(--light-color);
}

.light .form-switch.disabled i {
    background-color: var(--dark1-color);
}

.light .form-switch.disabled i::before {
    background-color: var(--dark1-color);
}

.form-switch.disabled i::after {
    background-color: var(--lighter-color);
}

.form-switch.disabled input:checked+i {
    background-color: var(--light-color);
}

.form-switch.disabled input:checked+i::after {
    background-color: var(--back-color);
}

.light .form-switch.disabled input:checked+i::after {
    background-color: var(--dark-color);
}


/* TEXT */

.form-switch-text i {
    top: 2px;
    margin-right: 5px;
}


/* hide light switch in IE */

.css-old #lightThemeLabel {
    display: none;
}