/*----------------------Switch----------------------*/
.switch {
    font-size: 12px;
    height: 36px;
    width: 79px;
    position: relative
}

    .switch input[type=checkbox] {
        opacity: 0
    }

        .switch input[type=checkbox]:checked + .dial:before {
            color: var(--white);
            background-color: var(--firstFocus);
            border: 1px solid var(--firstFocus);
        }

        .switch input[type=checkbox]:checked + .dial:after {
            color: #c7c7c7;
            background-color: #f9f9f9;
            border-top: 1px solid var(--darkBorderColor);
            border-bottom: 1px solid var(--darkBorderColor);
            border-right: 1px solid var(--darkBorderColor);
            border-left: none
        }

        .switch input[type=checkbox]:not(:checked) + .dial:before {
            color: #c7c7c7;
            background-color: #f9f9f9;
            border-top: 1px solid var(--darkBorderColor);
            border-bottom: 1px solid var(--darkBorderColor);
            border-left: 1px solid var(--darkBorderColor);
            border-right: none
        }

        .switch input[type=checkbox]:not(:checked) + .dial:after {
            color: var(--white);
            background-color: #bbb;
            border: 1px solid #999
        }

    .switch .dial {
        cursor: pointer
    }

        .switch .dial:before, .switch .dial:after {
            display: inline-block;
            height: 36px;
            width: 38px;
            font-weight: bold;
            position: absolute;
            top: 0;
            line-height: 36px;
            text-align: center
        }

        .switch .dial:before {
            content: 'ON';
            left: 0
        }

        .switch .dial:after {
            content: 'OFF';
            right: 0
        }


/*----------------------End switch----------------------*/