/*Toggle Common Css*/
/*Animated Toggle*/
/* toggle-pill */
.toggle-pill input[type="checkbox"] {
    display : none;
}

.toggle-pill input[type="checkbox"] + label {
    display             : block;
    position            : relative;
    width               : 3em;
    height              : 1.6em;
    margin-bottom       : 20px;
    border-radius       : 1em;
    background          : #F3F3F3;
    box-shadow          : inset 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
    cursor              : pointer;
    -webkit-user-select : none;
    -moz-user-select    : none;
    -ms-user-select     : none;
    -webkit-transition  : background 0.1s ease-in-out;
    transition          : background 0.1s ease-in-out;
}

.toggle-pill input[type="checkbox"] + label:before {
    content            : "";
    display            : block;
    width              : 1.2em;
    height             : 1.2em;
    border-radius      : 1em;
    background         : #50565A;
    box-shadow         : 2px 0px 5px rgba(0, 0, 0, 0.2);
    position           : absolute;
    left               : 0.2em;
    top                : 0.2em;
    -webkit-transition : all 0.2s ease-in-out;
    transition         : all 0.2s ease-in-out;
}

.toggle-pill input[type="checkbox"]:checked + label {
    background : #FFF;
}

.toggle-pill input[type="checkbox"]:checked + label:before {
    box-shadow : -2px 0px 5px rgba(0, 0, 0, 0.2);
    left       : 1.6em;
}

/* toggle-pill end */

/* toggle-pill-bw */
.toggle-pill-bw input[type="checkbox"] {
    display : none;
}

.toggle-pill-bw input[type="checkbox"] + label {
    display             : block;
    position            : relative;
    width               : 3em;
    height              : 1.6em;
    margin-bottom       : 20px;
    background          : #50565A;
    border-radius       : 1em;
    cursor              : pointer;
    -webkit-user-select : none;
    -moz-user-select    : none;
    -ms-user-select     : none;
    -webkit-transition  : background 0.1s ease-in-out;
    transition          : background 0.1s ease-in-out;
}

.toggle-pill-bw input[type="checkbox"] + label:before {
    content            : "";
    display            : block;
    width              : 1.2em;
    height             : 1.2em;
    border-radius      : 1em;
    background         : #F7F2F2;
    position           : absolute;
    left               : 0.2em;
    top                : 0.2em;
    -webkit-transition : all 0.2s ease-in-out;
    transition         : all 0.2s ease-in-out;
}

.toggle-pill-bw input[type="checkbox"]:checked + label {
    background : #40464A;
}

.toggle-pill-bw input[type="checkbox"]:checked + label:before {
    left              : 1.6em;
    -webkit-transform : rotate(45deg);
    transform         : rotate(45deg);
}

/* toggle-pill-bw end */

/* toggle-pill-color */
.toggle-pill-color input[type="checkbox"] {
    display : none;
}

.toggle-pill-color input[type="checkbox"] + label {
    display             : block;
    position            : relative;
    width               : 3em;
    height              : 1.6em;
    margin-bottom       : 20px;
    border-radius       : 1em;
    background          : #E84D4D;
    box-shadow          : inset 0px 0px 5px rgba(0, 0, 0, 0.3);
    cursor              : pointer;
    -webkit-user-select : none;
    -moz-user-select    : none;
    -ms-user-select     : none;
    -webkit-transition  : background 0.1s ease-in-out;
    transition          : background 0.1s ease-in-out;
}

.toggle-pill-color input[type="checkbox"] + label:before {
    content            : "";
    display            : block;
    width              : 1.2em;
    height             : 1.2em;
    border-radius      : 1em;
    background         : #FFF;
    box-shadow         : 2px 0px 5px rgba(0, 0, 0, 0.2);
    position           : absolute;
    left               : 0.2em;
    top                : 0.2em;
    -webkit-transition : all 0.2s ease-in-out;
    transition         : all 0.2s ease-in-out;
}

.toggle-pill-color input[type="checkbox"]:checked + label {
    background : #47CF73;
}

.toggle-pill-color input[type="checkbox"]:checked + label:before {
    box-shadow : -2px 0px 5px rgba(0, 0, 0, 0.2);
    left       : 1.6em;
}

/* toggle-pill-color end */

/* toggle-pill-color */
.toggle-pill-dark input[type="checkbox"] {
    display : none;
}

.toggle-pill-dark input[type="checkbox"] + label {
    display             : block;
    position            : relative;
    width               : 3em;
    height              : 1.6em;
    margin-bottom       : 20px;
    border-radius       : 1em;
    background          : #303E58;
    box-shadow          : inset 0px 0px 5px rgba(0, 0, 0, 0.3);
    cursor              : pointer;
    -webkit-user-select : none;
    -moz-user-select    : none;
    -ms-user-select     : none;
    -webkit-transition  : background 0.1s ease-in-out;
    transition          : background 0.1s ease-in-out;
}

.toggle-pill-dark input[type="checkbox"] + label:before {
    content            : "";
    display            : block;
    width              : 1.2em;
    height             : 1.2em;
    border-radius      : 1em;
    background         : #E84D4D;
    position           : absolute;
    left               : 0.2em;
    top                : 0.2em;
    -webkit-transition : all 0.2s ease-in-out;
    transition         : all 0.2s ease-in-out;
    -webkit-transform  : rotate(90deg);
    transform          : rotate(90deg);
}

.toggle-pill-dark input[type="checkbox"]:checked + label:before {
    background        : #47CF73;
    box-shadow        : -2px 0px 5px rgba(0, 0, 0, 0.2);
    left              : 1.6em;
    -webkit-transform : rotate(295deg);
    transform         : rotate(295deg);
}

/* toggle-pill-dark end */

/*General Toggle*/
@charset "UTF-8";
.toggler-wrapper {
    display  : block;
    width    : 45px;
    height   : 25px;
    cursor   : pointer;
    position : relative;
}

.toggler-wrapper input[type="checkbox"] {
    display : none;
}

.toggler-wrapper input[type="checkbox"]:checked + .toggler-slider {
    background-color : var(--brand-primary);
}

.toggler-wrapper .toggler-slider {
    background-color   : #CCC;
    position           : absolute;
    border-radius      : 100px;
    top                : 0;
    left               : 0;
    width              : 100%;
    height             : 100%;
    -webkit-transition : all 300ms ease;
    transition         : all 300ms ease;
}

.toggler-wrapper .toggler-knob {
    position           : absolute;
    -webkit-transition : all 300ms ease;
    transition         : all 300ms ease;
}


/*--------------------------------------------------------------
3.0 Effects Styles
--------------------------------------------------------------*/


/*Style 1*/

.toggler-wrapper.style-1 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left : calc(100% - 19px - 3px);
}

.toggler-wrapper.style-1 .toggler-knob {
    width            : calc(25px - 6px);
    height           : calc(25px - 6px);
    border-radius    : 50%;
    left             : 3px;
    top              : 3px;
    background-color : #FFF;
}


/*Style 2*/

.toggler-wrapper.style-2 {
    width : 67.5px;
}

.toggler-wrapper.style-2 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:before {
    opacity : 0.4;
}

.toggler-wrapper.style-2 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
    opacity : 1;
}

.toggler-wrapper.style-2 .toggler-knob {
    position : relative;
    height   : 100%;
}

.toggler-wrapper.style-2 .toggler-knob:before {
    content           : 'Off';
    position          : absolute;
    top               : 50%;
    left              : 5px;
    -webkit-transform : translateY(-50%);
    transform         : translateY(-50%);
    font-size         : 75%;
    text-transform    : uppercase;
    font-weight       : 500;
    color             : white;
}

.toggler-wrapper.style-2 .toggler-knob:after {
    content           : 'On';
    position          : absolute;
    top               : 50%;
    right             : 5px;
    -webkit-transform : translateY(-50%);
    transform         : translateY(-50%);
    font-size         : 75%;
    text-transform    : uppercase;
    font-weight       : 500;
    color             : white;
    opacity           : 0.4;
}


/*Style 3*/

.toggler-wrapper.style-3 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left : calc(100% - 19px - 3px);
}

.toggler-wrapper.style-3 .toggler-knob {
    width              : calc(25px + 6px);
    height             : calc(25px + 6px);
    border-radius      : 50%;
    left               : -3px;
    top                : -3px;
    background-color   : #FFF;
    -webkit-box-shadow : 0 2px 6px rgba(153, 153, 153, 0.75);
    box-shadow         : 0 2px 6px rgba(153, 153, 153, 0.75);
}


/*Style 4*/

.toggler-wrapper.style-4 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left : calc(100% - 19px - 3px);
}

.toggler-wrapper.style-4 .toggler-knob {
    width              : 25px;
    height             : 25px;
    border-radius      : 50%;
    left               : 0;
    top                : 0;
    background-color   : #FFF;
    -webkit-box-shadow : 0 2px 6px rgba(153, 153, 153, 0.75);
    box-shadow         : 0 2px 6px rgba(153, 153, 153, 0.75);
}


/*Style 5*/

.toggler-wrapper.style-5 input[type="checkbox"]:checked + .toggler-slider {
    background-color : #CCC;
}

.toggler-wrapper.style-5 input[type="checkbox"]:checked + .toggler-slider:before {
    background-color : #E6E6E6;
}

.toggler-wrapper.style-5 input[type="checkbox"]:checked + .toggler-slider:after {
    background-color : var(--brand-primary);
}

.toggler-wrapper.style-5 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left : calc(100% - 19px - 3px);
}

.toggler-wrapper.style-5 .toggler-slider:before {
    content           : '';
    position          : absolute;
    top               : 50%;
    left              : -12.5px;
    -webkit-transform : translateY(-50%);
    transform         : translateY(-50%);
    width             : 8.3333333333px;
    height            : 8.3333333333px;
    border-radius     : 50%;
    background-color  : #B3B3B3;
}

.toggler-wrapper.style-5 .toggler-slider:after {
    content           : '';
    position          : absolute;
    top               : 50%;
    right             : -17.5px;
    -webkit-transform : translateY(-50%);
    transform         : translateY(-50%);
    width             : 12.5px;
    height            : 12.5px;
    border-radius     : 50%;
    background-color  : #E6E6E6;
}

.toggler-wrapper.style-5 .toggler-knob {
    width            : calc(25px - 6px);
    height           : calc(25px - 6px);
    border-radius    : 50%;
    left             : 3px;
    top              : 3px;
    background-color : #FFF;
}


/*Style 6*/

.toggler-wrapper.style-6 {
    width              : 54px;
    -webkit-box-shadow : 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);
    box-shadow         : 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);
    background         : -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.07)), to(rgba(255, 255, 255, 0))), #DDD;
    background         : linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #DDD;
    border-radius      : 100px;
}

.toggler-wrapper.style-6 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left : calc(100% - 19px - 3px + 5px);
}

.toggler-wrapper.style-6 .toggler-slider {
    -webkit-box-shadow : 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(68, 204, 102, 0.7) inset;
    box-shadow         : 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(68, 204, 102, 0.7) inset;
    background         : -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.07)), to(rgba(255, 255, 255, 0.1))), #D0D0D0;
    background         : linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #D0D0D0;
    top                : 5px;
    left               : 5px;
    width              : calc(100% - 10px);
    height             : calc(100% - 10px);
}

.toggler-wrapper.style-6 .toggler-knob {
    width              : calc(25px - 6px);
    height             : calc(25px - 6px);
    border-radius      : 50%;
    left               : calc(3px - 5px);
    top                : calc(3px - 5px);
    -webkit-box-shadow : 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.2em 0.2em -0.12em rgba(0, 0, 0, 0.5);
    box-shadow         : 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.2em 0.2em -0.12em rgba(0, 0, 0, 0.5);
    background         : -webkit-gradient(linear, left top, left bottom, color-stop(10%, #F5F5F5), to(#EEE));
    background         : linear-gradient(#F5F5F5 10%, #EEE);
}


/*Style 7*/

.toggler-wrapper.style-7 input[type="checkbox"]:checked + .toggler-slider {
    background-color : white;
}

.toggler-wrapper.style-7 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left             : calc(100% - 19px - 3px);
    background-color : #4C6;
}

.toggler-wrapper.style-7 .toggler-slider {
    background-color   : white;
    -webkit-box-shadow : 2px 4px 8px rgba(200, 200, 200, 0.5);
    box-shadow         : 2px 4px 8px rgba(200, 200, 200, 0.5);
    border-radius      : 5px;
}

.toggler-wrapper.style-7 .toggler-knob {
    width            : calc(25px - 6px);
    height           : calc(25px - 6px);
    border-radius    : 5px;
    left             : 3px;
    top              : 3px;
    background-color : #E6E6E6;
}


/*Style 8*/

.toggler-wrapper.style-8 input[type="checkbox"]:checked + .toggler-slider {
    background-color : #D9D9D9;
}

.toggler-wrapper.style-8 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left              : calc(100% - 19px - 3px);
    background        : conic-gradient(#43A047, #255827);
    -webkit-transform : rotate(360deg);
    transform         : rotate(360deg);
}

.toggler-wrapper.style-8 .toggler-slider {
    background-color : #D9D9D9;
}

.toggler-wrapper.style-8 .toggler-knob {
    width         : calc(25px - 6px);
    height        : calc(25px - 6px);
    border-radius : 50%;
    left          : 3px;
    top           : 3px;
    background    : conic-gradient(#E53935, #9F1815);
}


/*Style 9*/

.toggler-wrapper.style-9 input[type="checkbox"]:checked + .toggler-slider {
    background-color : transparent;
}

.toggler-wrapper.style-9 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left             : calc(100% - 19px - 3px);
    background-color : #4C6;
}

.toggler-wrapper.style-9 .toggler-slider {
    background-color : transparent;
    border           : 2px solid #B3B3B3;
}

.toggler-wrapper.style-9 .toggler-knob {
    width            : calc(25px - 6px);
    height           : calc(25px - 6px);
    border-radius    : 50%;
    left             : 3px;
    top              : 3px;
    background-color : #B3B3B3;
}


/*Style 10*/

.toggler-wrapper.style-10 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left : calc(100% - 19px - 3px);
}

.toggler-wrapper.style-10 .toggler-slider {
    background-color : #CCC;
}

.toggler-wrapper.style-10 .toggler-knob {
    width              : calc(25px - 6px);
    height             : calc(25px - 6px);
    border-radius      : 50%;
    left               : 3px;
    top                : 3px;
    border             : 2px solid #FFF;
    -webkit-box-sizing : border-box;
    box-sizing         : border-box;
}


/*Style 11*/

.toggler-wrapper.style-11 input[type="checkbox"]:checked + .toggler-slider:after {
    content : 'On';
}

.toggler-wrapper.style-11 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left : calc(100% - 19px - 3px);
}

.toggler-wrapper.style-11 .toggler-slider:after {
    content           : 'Off';
    position          : absolute;
    top               : 50%;
    right             : -25px;
    -webkit-transform : translateY(-50%);
    transform         : translateY(-50%);
    font-size         : 75%;
    text-transform    : uppercase;
    font-weight       : 500;
    opacity           : 0.7;
}

.toggler-wrapper.style-11 .toggler-knob {
    width            : calc(25px - 6px);
    height           : calc(25px - 6px);
    border-radius    : 50%;
    left             : 3px;
    top              : 3px;
    background-color : #FFF;
}

/*Style 13*/

.toggler-wrapper.style-13 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left : calc(100% - 19px - 3px);
}

.toggler-wrapper.style-13 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
    content : 'On';
}

.toggler-wrapper.style-13 .toggler-knob {
    width              : 25px;
    height             : 25px;
    border-radius      : 50%;
    left               : 0;
    top                : 0;
    background-color   : #FFF;
    -webkit-box-shadow : 0 2px 6px rgba(153, 153, 153, 0.75);
    box-shadow         : 0 2px 6px rgba(153, 153, 153, 0.75);
}

.toggler-wrapper.style-13 .toggler-knob:after {
    content           : 'Off';
    position          : absolute;
    top               : 50%;
    left              : 50%;
    -webkit-transform : translate(-50%, -50%);
    transform         : translate(-50%, -50%);
    font-size         : 65%;
    text-transform    : uppercase;
    font-weight       : 500;
    opacity           : 0.7;
}


/*Style 14*/

.toggler-wrapper.style-14 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left : calc(100% - 18.75px);
}

.toggler-wrapper.style-14 .toggler-knob {
    width             : 12.5px;
    height            : 12.5px;
    top               : 50%;
    left              : 6.25px;
    -webkit-transform : translateY(-50%);
    transform         : translateY(-50%);
    border-radius     : 50%;
    background-color  : #FFF;
}


/*Style 15*/

.toggler-wrapper.style-15 {
    left : 30px;
}

.toggler-wrapper.style-15 input[type="checkbox"]:checked + .toggler-slider:before {
    opacity : 0.5;
}

.toggler-wrapper.style-15 input[type="checkbox"]:checked + .toggler-slider:after {
    opacity : 1;
}

.toggler-wrapper.style-15 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left : calc(100% - 19px - 3px);
}

.toggler-wrapper.style-15 .toggler-slider:before {
    content           : 'Off';
    position          : absolute;
    top               : 50%;
    left              : -30px;
    -webkit-transform : translateY(-50%);
    transform         : translateY(-50%);
    font-size         : 75%;
    text-transform    : uppercase;
    font-weight       : 500;
}

.toggler-wrapper.style-15 .toggler-slider:after {
    content           : 'On';
    position          : absolute;
    top               : 50%;
    right             : -25px;
    -webkit-transform : translateY(-50%);
    transform         : translateY(-50%);
    font-size         : 75%;
    text-transform    : uppercase;
    font-weight       : 500;
    opacity           : 0.5;
}

.toggler-wrapper.style-15 .toggler-knob {
    width            : calc(25px - 6px);
    height           : calc(25px - 6px);
    border-radius    : 50%;
    left             : 3px;
    top              : 3px;
    background-color : #FFF;
}


/*Style 16*/

.toggler-wrapper.style-16 input[type="checkbox"]:checked + .toggler-slider {
    background-color : white;
}

.toggler-wrapper.style-16 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left             : calc(100% - 19px - 3px);
    background-color : #4C6;
}

.toggler-wrapper.style-16 .toggler-slider {
    background-color   : white;
    -webkit-box-shadow : 2px 4px 8px rgba(200, 200, 200, 0.5);
    box-shadow         : 2px 4px 8px rgba(200, 200, 200, 0.5);
    border-radius      : 0;
}

.toggler-wrapper.style-16 .toggler-knob {
    width            : calc(25px - 6px);
    height           : calc(25px - 6px);
    left             : 3px;
    top              : 3px;
    background-color : #E6E6E6;
}


/*Style 17*/

.toggler-wrapper.style-17 input[type="checkbox"]:checked + .toggler-slider {
    background-color : white;
}

.toggler-wrapper.style-17 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left             : calc(100% - 19px - 3px);
    background-color : #4C6;
}

.toggler-wrapper.style-17 .toggler-slider {
    background-color : transparent;
    border-radius    : 0;
    border           : 2px solid #B3B3B3;
}

.toggler-wrapper.style-17 .toggler-knob {
    width            : calc(25px - 6px);
    height           : calc(25px - 6px);
    left             : 3px;
    top              : 3px;
    background-color : #B3B3B3;
}


/*Style 18*/

.toggler-wrapper.style-18 input[type="checkbox"]:checked + .toggler-slider {
    background-color : #4C6;
}

.toggler-wrapper.style-18 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left : calc(100% - 19px - 3px);
}

.toggler-wrapper.style-18 .toggler-slider {
    -webkit-box-shadow : 2px 4px 8px rgba(200, 200, 200, 0.5);
    box-shadow         : 2px 4px 8px rgba(200, 200, 200, 0.5);
    border-radius      : 0;
}

.toggler-wrapper.style-18 .toggler-knob {
    width            : calc(25px - 6px);
    height           : calc(25px - 6px);
    left             : 3px;
    top              : 3px;
    background-color : white;
}


/*Style 19*/

.toggler-wrapper.style-19 input[type="checkbox"]:checked + .toggler-slider {
    background-color : white;
    border-color     : #4C6;
}

.toggler-wrapper.style-19 input[type="checkbox"]:checked + .toggler-slider:after {
    content : 'Yes';
}

.toggler-wrapper.style-19 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left             : calc(100% - 19px - 3px);
    background-color : #4C6;
}

.toggler-wrapper.style-19 .toggler-slider {
    background-color : transparent;
    border-radius    : 0;
    border           : 2px solid #B3B3B3;
}

.toggler-wrapper.style-19 .toggler-slider:after {
    content           : 'No';
    position          : absolute;
    top               : 50%;
    right             : -30px;
    -webkit-transform : translateY(-50%);
    transform         : translateY(-50%);
    font-size         : 75%;
    text-transform    : uppercase;
    font-weight       : 500;
    opacity           : 0.7;
}

.toggler-wrapper.style-19 .toggler-knob {
    width            : calc(25px - 6px);
    height           : calc(25px - 6px);
    left             : 3px;
    top              : 3px;
    background-color : #B3B3B3;
}


/*Style 20*/

.toggler-wrapper.style-20 {
    width      : 81px;
    text-align : center;
}

.toggler-wrapper.style-20 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    /*background-image : url(../img/check-fill.svg);*/
}

.toggler-wrapper.style-20 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:before {
    opacity : 0.4;
}

.toggler-wrapper.style-20 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
    opacity : 1;
}

.toggler-wrapper.style-20 .toggler-slider {
    background-color : #EB4F37;
}

.toggler-wrapper.style-20 .toggler-knob {
    position            : relative;
    height              : 100%;
    /*background-image    : url(../img/close-fill.svg);*/
    background-repeat   : no-repeat;
    background-position : center;
    width               : 20px;
    display             : inline-block;
    left                : -2px;
}

.toggler-wrapper.style-20 .toggler-knob:before {
    content           : 'No';
    position          : absolute;
    top               : 50%;
    left              : -20px;
    -webkit-transform : translateY(-50%);
    transform         : translateY(-50%);
    font-size         : 75%;
    text-transform    : uppercase;
    font-weight       : 500;
    color             : white;
}

.toggler-wrapper.style-20 .toggler-knob:after {
    content           : 'Yes';
    position          : absolute;
    top               : 50%;
    right             : -23px;
    -webkit-transform : translateY(-50%);
    transform         : translateY(-50%);
    font-size         : 75%;
    text-transform    : uppercase;
    font-weight       : 500;
    color             : white;
    opacity           : 0.4;
}


/*Style 21*/

.toggler-wrapper.style-21 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left             : calc(100% - 19px - 3px);
    /*background-image : url(../img/shut-down-line-on.svg);*/
}

.toggler-wrapper.style-21 .toggler-slider {
    background-color : #EB4F37;
}

.toggler-wrapper.style-21 .toggler-knob {
    width               : calc(25px - 6px);
    height              : calc(25px - 6px);
    border-radius       : 50%;
    left                : 3px;
    top                 : 3px;
    background-color    : #FFF;
    /*background-image    : url(../img/shut-down-line-off.svg);*/
    background-repeat   : no-repeat;
    background-position : center;
}


/*Style 22*/

.toggler-wrapper.style-22 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left              : calc(100% - 19px - 3px);
    -webkit-transform : scale(1);
    transform         : scale(1);
}

.toggler-wrapper.style-22 .toggler-slider {
    background-color : #EB4F37;
}

.toggler-wrapper.style-22 .toggler-knob {
    width              : calc(25px - 6px);
    height             : calc(25px - 6px);
    border-radius      : 50%;
    left               : 3px;
    top                : 3px;
    -webkit-box-sizing : border-box;
    box-sizing         : border-box;
    background-color   : white;
    -webkit-transform  : scale(0.5);
    transform          : scale(0.5);
}


/*Style 23*/

.toggler-wrapper.style-23 input[type="checkbox"]:checked + .toggler-slider {
    background-color : transparent;
    border-color     : #4C6;
}

.toggler-wrapper.style-23 input[type="checkbox"]:checked + .toggler-slider:before {
    -webkit-transform : translateY(0);
    transform         : translateY(0);
    opacity           : 0.7;
}

.toggler-wrapper.style-23 input[type="checkbox"]:checked + .toggler-slider:after {
    opacity           : 0;
    -webkit-transform : translateY(20px);
    transform         : translateY(20px);
}

.toggler-wrapper.style-23 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left             : calc(100% - 19px - 3px);
    background-color : #4C6;
}

.toggler-wrapper.style-23 .toggler-slider {
    background-color : transparent;
    border           : 2px solid #EB4F37;
}

.toggler-wrapper.style-23 .toggler-slider:before {
    content            : 'Accept';
    position           : absolute;
    top                : 8px;
    right              : -60px;
    font-size          : 75%;
    text-transform     : uppercase;
    font-weight        : 500;
    opacity            : 0;
    -webkit-transition : all 300ms ease;
    transition         : all 300ms ease;
    -webkit-transform  : translateY(-20px);
    transform          : translateY(-20px);
}

.toggler-wrapper.style-23 .toggler-slider:after {
    content            : 'Decline';
    position           : absolute;
    top                : 8px;
    right              : -60px;
    font-size          : 75%;
    text-transform     : uppercase;
    font-weight        : 500;
    opacity            : 0.7;
    -webkit-transition : all 300ms ease;
    transition         : all 300ms ease;
}

.toggler-wrapper.style-23 .toggler-knob {
    width            : calc(25px - 6px);
    height           : calc(25px - 6px);
    border-radius    : 50%;
    left             : 3px;
    top              : 3px;
    background-color : #EB4F37;
}


/*Style 24*/

.toggler-wrapper.style-24 {
    width : 90px;
}

.toggler-wrapper.style-24 input[type="checkbox"]:checked + .toggler-slider {
    border-color : #4C6;
}

.toggler-wrapper.style-24 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left : calc(100% - 37.5px);
}

.toggler-wrapper.style-24 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
    content : 'On';
}

.toggler-wrapper.style-24 .toggler-slider {
    border-radius    : 0;
    background-color : #EB4F37;
    border           : 2px solid #EB4F37;
}

.toggler-wrapper.style-24 .toggler-knob {
    width            : 37.5px;
    height           : 25px;
    border-radius    : 0;
    left             : 0;
    top              : 0;
    background-color : #FFF;
}

.toggler-wrapper.style-24 .toggler-knob:after {
    content            : 'Off';
    position           : absolute;
    top                : 50%;
    left               : 50%;
    -webkit-transform  : translate(-50%, -50%);
    transform          : translate(-50%, -50%);
    font-size          : 75%;
    text-transform     : uppercase;
    font-weight        : 500;
    opacity            : 0.7;
    -webkit-transition : all 300ms ease;
    transition         : all 300ms ease;
}


/*Style 25*/

.toggler-wrapper.style-25 input[type="checkbox"]:checked + .toggler-slider {
    background-color : white;
}

.toggler-wrapper.style-25 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left             : calc(100% - 19px - 3px);
    background-color : #4C6;
    /*background-image : url(../img/check-fill.svg);*/
}

.toggler-wrapper.style-25 .toggler-slider {
    background-color   : white;
    -webkit-box-shadow : 2px 4px 8px rgba(200, 200, 200, 0.5);
    box-shadow         : 2px 4px 8px rgba(200, 200, 200, 0.5);
    border-radius      : 5px;
}

.toggler-wrapper.style-25 .toggler-knob {
    width               : calc(25px - 6px);
    height              : calc(25px - 6px);
    border-radius       : 5px;
    left                : 3px;
    top                 : 3px;
    background-color    : #CCC;
    /*background-image    : url(../img/close-fill.svg);*/
    background-repeat   : no-repeat;
    background-position : center;
}


/*Style 26*/

.toggler-wrapper.style-26 input[type="checkbox"]:checked + .toggler-slider {
    background-color : #D9D9D9;
}

.toggler-wrapper.style-26 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left             : calc(100% - 19px - 3px);
    background-color : #4C6;
}

.toggler-wrapper.style-26 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
    content : '1';
}

.toggler-wrapper.style-26 .toggler-slider {
    background-color : #D9D9D9;
}

.toggler-wrapper.style-26 .toggler-knob {
    width            : calc(25px - 6px);
    height           : calc(25px - 6px);
    border-radius    : 50%;
    left             : 3px;
    top              : 3px;
    background-color : #EB4F37;
}

.toggler-wrapper.style-26 .toggler-knob:after {
    content            : '0';
    position           : absolute;
    top                : 50%;
    left               : 50%;
    -webkit-transform  : translate(-50%, -50%);
    transform          : translate(-50%, -50%);
    font-size          : 75%;
    text-transform     : uppercase;
    font-weight        : 500;
    -webkit-transition : all 300ms ease;
    transition         : all 300ms ease;
    color              : white;
}


/*Style 27*/

.toggler-wrapper.style-27 {
    width  : 54px;
    height : 30px;
}

.toggler-wrapper.style-27 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:before {
    left : -100%;
}

.toggler-wrapper.style-27 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
    right : 3px;
}

.toggler-wrapper.style-27 .toggler-knob {
    width    : 100%;
    height   : 100%;
    overflow : hidden;
}

.toggler-wrapper.style-27 .toggler-knob:before {
    content            : 'No';
    position           : absolute;
    width              : calc(30px - 6px);
    height             : calc(30px - 6px);
    border-radius      : 50%;
    left               : 3px;
    top                : 3px;
    background-color   : #FFF;
    -webkit-transition : all 300ms ease;
    transition         : all 300ms ease;
    display            : -webkit-box;
    display            : -ms-flexbox;
    display            : flex;
    -webkit-box-align  : center;
    -ms-flex-align     : center;
    align-items        : center;
    -webkit-box-pack   : center;
    -ms-flex-pack      : center;
    justify-content    : center;
    font-size          : 75%;
    font-weight        : 500;
}

.toggler-wrapper.style-27 .toggler-knob:after {
    content            : 'Yes';
    position           : absolute;
    width              : calc(30px - 6px);
    height             : calc(30px - 6px);
    border-radius      : 50%;
    right              : -100%;
    top                : 3px;
    background-color   : #FFF;
    -webkit-transition : all 300ms ease;
    transition         : all 300ms ease;
    display            : -webkit-box;
    display            : -ms-flexbox;
    display            : flex;
    -webkit-box-align  : center;
    -ms-flex-align     : center;
    align-items        : center;
    -webkit-box-pack   : center;
    -ms-flex-pack      : center;
    justify-content    : center;
    font-size          : 75%;
    font-weight        : 500;
}


/*Style 28*/

.toggler-wrapper.style-28 {
    width  : 54px;
    height : 30px;
}

.toggler-wrapper.style-28 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:before {
    top : -100%;
}

.toggler-wrapper.style-28 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
    top : 3px;
}

.toggler-wrapper.style-28 .toggler-knob {
    width    : 100%;
    height   : 100%;
    overflow : hidden;
}

.toggler-wrapper.style-28 .toggler-knob:before {
    content            : 'No';
    position           : absolute;
    width              : calc(30px - 6px);
    height             : calc(30px - 6px);
    border-radius      : 50%;
    left               : 3px;
    top                : 3px;
    background-color   : #FFF;
    -webkit-transition : all 300ms ease;
    transition         : all 300ms ease;
    display            : -webkit-box;
    display            : -ms-flexbox;
    display            : flex;
    -webkit-box-align  : center;
    -ms-flex-align     : center;
    align-items        : center;
    -webkit-box-pack   : center;
    -ms-flex-pack      : center;
    justify-content    : center;
    font-size          : 75%;
    font-weight        : 500;
}

.toggler-wrapper.style-28 .toggler-knob:after {
    content            : 'Yes';
    position           : absolute;
    width              : calc(30px - 6px);
    height             : calc(30px - 6px);
    border-radius      : 50%;
    right              : 3px;
    top                : -100%;
    background-color   : #FFF;
    -webkit-transition : all 300ms ease;
    transition         : all 300ms ease;
    display            : -webkit-box;
    display            : -ms-flexbox;
    display            : flex;
    -webkit-box-align  : center;
    -ms-flex-align     : center;
    align-items        : center;
    -webkit-box-pack   : center;
    -ms-flex-pack      : center;
    justify-content    : center;
    font-size          : 75%;
    font-weight        : 500;
}


/*Style 29*/

.toggler-wrapper.style-29 {
    width  : 54px;
    height : 30px;
}

.toggler-wrapper.style-29 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:before {
    top : 100%;
}

.toggler-wrapper.style-29 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
    top : 3px;
}

.toggler-wrapper.style-29 .toggler-knob {
    width    : 100%;
    height   : 100%;
    overflow : hidden;
}

.toggler-wrapper.style-29 .toggler-knob:before {
    content            : 'No';
    position           : absolute;
    width              : calc(30px - 6px);
    height             : calc(30px - 6px);
    border-radius      : 50%;
    left               : 3px;
    top                : 3px;
    background-color   : #FFF;
    -webkit-transition : all 300ms ease;
    transition         : all 300ms ease;
    display            : -webkit-box;
    display            : -ms-flexbox;
    display            : flex;
    -webkit-box-align  : center;
    -ms-flex-align     : center;
    align-items        : center;
    -webkit-box-pack   : center;
    -ms-flex-pack      : center;
    justify-content    : center;
    font-size          : 75%;
    font-weight        : 500;
}

.toggler-wrapper.style-29 .toggler-knob:after {
    content            : 'Yes';
    position           : absolute;
    width              : calc(30px - 6px);
    height             : calc(30px - 6px);
    border-radius      : 50%;
    right              : 3px;
    top                : 100%;
    background-color   : #FFF;
    -webkit-transition : all 300ms ease;
    transition         : all 300ms ease;
    display            : -webkit-box;
    display            : -ms-flexbox;
    display            : flex;
    -webkit-box-align  : center;
    -ms-flex-align     : center;
    align-items        : center;
    -webkit-box-pack   : center;
    -ms-flex-pack      : center;
    justify-content    : center;
    font-size          : 75%;
    font-weight        : 500;
}


/*Style 30*/

.toggler-wrapper.style-30 {
    width               : 54px;
    height              : 30px;
    -webkit-perspective : 100px;
    perspective         : 100px;
}

.toggler-wrapper.style-30 input[type="checkbox"]:checked + .toggler-slider {
    -webkit-transform        : rotateY(180deg);
    transform                : rotateY(180deg);
    -webkit-transition-delay : 300ms;
    transition-delay         : 300ms;
}

.toggler-wrapper.style-30 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    -webkit-transform        : rotateY(180deg);
    transform                : rotateY(180deg);
    -webkit-transition-delay : 300ms;
    transition-delay         : 300ms;
}

.toggler-wrapper.style-30 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:before {
    left : -100%;
}

.toggler-wrapper.style-30 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
    right : 3px;
}

.toggler-wrapper.style-30 .toggler-knob {
    width    : 100%;
    height   : 100%;
    overflow : hidden;
}

.toggler-wrapper.style-30 .toggler-knob:before {
    content            : 'No';
    position           : absolute;
    width              : calc(30px - 6px);
    height             : calc(30px - 6px);
    border-radius      : 50%;
    left               : 3px;
    top                : 3px;
    background-color   : #FFF;
    -webkit-transition : all 300ms ease;
    transition         : all 300ms ease;
    display            : -webkit-box;
    display            : -ms-flexbox;
    display            : flex;
    -webkit-box-align  : center;
    -ms-flex-align     : center;
    align-items        : center;
    -webkit-box-pack   : center;
    -ms-flex-pack      : center;
    justify-content    : center;
    font-size          : 75%;
    font-weight        : 500;
}

.toggler-wrapper.style-30 .toggler-knob:after {
    content            : 'Yes';
    position           : absolute;
    width              : calc(30px - 6px);
    height             : calc(30px - 6px);
    border-radius      : 50%;
    right              : -100%;
    top                : 3px;
    background-color   : #FFF;
    -webkit-transition : all 300ms ease;
    transition         : all 300ms ease;
    display            : -webkit-box;
    display            : -ms-flexbox;
    display            : flex;
    -webkit-box-align  : center;
    -ms-flex-align     : center;
    align-items        : center;
    -webkit-box-pack   : center;
    -ms-flex-pack      : center;
    justify-content    : center;
    font-size          : 75%;
    font-weight        : 500;
}