/* 
* cloud personalizzazione di un checkbox
* https://www.w3schools.com/howto/howto_css_switch.asp

<div class='cloudswitch'>
    <label>
        <input type="checkbox">
        <span class="slider"></span>
    </label>
</div>

*/


 /* ==================== custom checkbox ================== */
 
 .cloudswitch input[type="checkbox"] {
    display: none;
 }
 
 .cloudswitch label {
    margin: 0px;
    padding: 0px;
    display: table;
}

.cloudswitch label:hover {
    margin: 0px;
    padding: 0px;
    display: table;
    -webkit-transition: all 0.30s ease 0s;
    transition: all 0.30s ease 0s;
    filter: brightness(1.1) saturate(130%);
}



 .cloudswitch .slider {
     display: block;
     cursor: pointer;
     width: 60px;
     height: 30px;
     background-image: url(/assets/themes/ets_2013/img/cloudswitch-off.png);
     background-repeat: no-repeat;
     background-size: contain;
 }
 
 .cloudswitch input[type="checkbox"]:checked~.slider,
 .cloudswitch .slider.active{
  background-image: url(/assets/themes/ets_2013/img/cloudswitch-on.png);
 }
 
 /*
 .cloudswitch input[type="checkbox"][disabled].customcheckbox~.slider {
     background-image: url(./assets/img/custom-checkbox_DISABLED.png);
 }
 */