/*
<!-- Rectangular switch -->
<label class="btnToggle switch"><input type="checkbox"><span class="slider"></span></label>
<!-- Rounded switch -->
<label class="btnToggle switch"><input type="checkbox"><span class="slider round"></span></label>
<!-- Small version-->
<label class="btnToggle switch small"><input type="checkbox"><span class="slider"></span></label>
*/

/* The switch - the box around the slider */
.btnToggle.switch
{position: relative;display: inline-block;width: 60px;height: 34px;margin: 0; padding: 0;cursor: pointer;}
.btnToggle.switch.hasText{text-indent: 80px;width: auto;}

/* Hide default HTML checkbox */
.btnToggle.switch input
{display:none;}

/* The slider */
.btnToggle .slider
{position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: lightgrey;-webkit-transition: .4s;transition: .3s;}
.btnToggle .slider:before
{position: absolute;content: "";height: 26px;width: 26px;left: 4px;bottom: 4px;background-color: white;-webkit-transition: .4s;transition: .3s;}

.btnToggle input:checked + .slider
{background-color: #2196F3;}
.btnToggle input:focus + .slider
{box-shadow: 0 0 1px #2196F3;}

.btnToggle input:checked + .slider:before
{-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(26px);}

/* btnToggle.js */
.btnToggle.disabled .slider
{background-color: lightgrey;}

/* Rounded sliders */
.btnToggle .slider.round
{border-radius: 34px;}
.btnToggle .slider.round:before
{border-radius: 50%;}

/* Rounded sliders */
.btnToggle .slider.rounded
{border-radius: 6px;}
.btnToggle .slider.rounded:before
{border-radius: 3px;}

/* small*/
.btnToggle.switch.small
{height: 20px;width: 32px}
.btnToggle.switch.small.hasText
{text-indent: 40px;}
.btnToggle.switch.small .slider{width: 32px;}

.btnToggle.small .slider:before
{height: 12px;width: 12px;}
.btnToggle.small input:checked + .slider:before
{-webkit-transform: translateX(12px);-ms-transform: translateX(12px);transform: translateX(12px);}

/* placeholder */
.btnToggle.switch.placeholder .slider {width:60px; height: 34px;cursor: inherit;}
.btnToggle.switch.placeholder .slider:before {content:none;}
.btnToggle.switch.small.placeholder .slider {width:32px; height: 20px;}

/* color : isNotice*/
.btnToggle.isNotice .slider,
.btnToggle.disabled.isNotice .slider
{background-color: lightgrey;}
.btnToggle.isNotice input:checked + .slider
{background-color: lightgrey;}
.btnToggle.isNotice input:focus + .slider
{box-shadow: 0 0 1px lightgrey;}

/* color : isSetting*/
.btnToggle.isSetting .slider,
.btnToggle.disabled.isSetting .slider
{background-color: grey;}
.btnToggle.isSetting input:checked + .slider
{background-color: green;}
.btnToggle.isSetting input:focus + .slider
{box-shadow: 0 0 1px green;}

/* class : stepstone / abion*/
.btnToggle.stepstone .slider,
.btnToggle.disabled.stepstone .slider
{background-image: url("/assets/images/StSt_logo_stepstone.svg");background-size: cover;}
.btnToggle.stepstone input:checked + .slider
{background-color: green;}
.btnToggle.stepstone input:focus + .slider
{box-shadow: 0 0 1px green;}

.btnToggle.abion .slider,
.btnToggle.disabled.abion .slider
{background-image: url("/images/abion-logo.png");background-size: cover;}
.btnToggle.abion input:checked + .slider
{background-color: green;}
.btnToggle.abion input:focus + .slider
{box-shadow: 0 0 1px green;}