/*
https://www.w3schools.com/howto/howto_css_switch.asp

<!-- 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;}


/* 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: rgb(180,180,180);-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: rgb(220,220,220);}

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

/* small*/
.btnToggle.switch.small
{width: 32px;height: 20px;}
.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;}