/*---------vue_component_switcher--------------------*/
.vue_component_switcher label{
    color: var(--main-dark-gray-color);
    font-size: 16px;
}
.vue_component_switcher label .lever{
    transition: background-color 0.3s ease-in-out;
    background-color: var(--main-blue-color);
    height: 20px;
    margin: 0 10px;
}
.vue_component_switcher input[type=checkbox]:checked~ .lever{
    background-color: var(--main-light-blue-color);
}
.vue_component_switcher label .lever:before,
.vue_component_switcher label .lever:after {
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
    background-color: #fff!important;
    transform: none!important;
}
.vue_component_switcher label input[type=checkbox]:checked ~ .lever:before,
.vue_component_switcher label input[type=checkbox]:checked ~ .lever:after {
    left: 18px;
}
.vue_component_switcher label span{
    transition: color 200ms ease-in-out;
}
.vue_component_switcher label input[type=checkbox]:checked ~ .vue_component_switcher__switched{
    color: var(--main-darknest-gray-color);
}
.vue_component_switcher label input[type=checkbox]:not(:checked) ~ .vue_component_switcher__unswitched{
    color: var(--main-darknest-gray-color);
}

/*---------------------------------------------------*/