

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

 .slider PV {
    }
 .slider ConsumoSirivel {
    }
 .slider ConsumoSEMES {
    }
 .slider PrelievoRete {
    }

.slider CH1 {
}

.slider CH2 {
}
.slider CH3 {
    }

.slider CH4 {
    }

.slider CH5 {
    }



@media screen and (max-aspect-ratio:0.7) { /*small screen*/
    .slider:before {
        position: absolute;
        content: "";
        height: 10px; /*26px;*/
        width: 10px; /*26px;*/
        left: 1px; /*4*/
        bottom: 2px; /*4*/
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }
    .switch {
        position: relative;
        display: inline-block;
        left: 50%;
        transform: translateX(-50%);
        width: 20px; /*60px;*/
        height: 15px; /*34px;*/
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(8px); /*tutto 26*/
        -ms-transform: translateX(8px);
        transform: translateX(8px);
    }
}

@media screen and (min-aspect-ratio: 0.700001) { /* Large Screen*/
    .slider:before {
        position: absolute;
        content: "";
        height: 22px; /*26px;*/
        width: 22px; /*26px;*/
        left: 3px; /*4*/
        bottom: 3px; /*4*/
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }
    .switch {
        position: relative;
        display: inline-block;
        left: 50%;
        transform: translateX(-50%);
        width: 50px; /*60px;*/
        height: 28px; /*34px;*/
        justify-self: center;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(22px); /*tutto 26*/
        -ms-transform: translateX(22px);
        transform: translateX(22px);
    }
}


/*
.slider:before {
  position: absolute;
  content: "";
  height: 22px;/*26px;
  width: 22px;/*26px;
  left: 3px;/*4
  bottom: 3px;/*4
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
*/
input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider.PV {
        background-color: #008080;
    }
input:checked + .slider.ConsumoSirivel {
        background-color: #DC143C;
    }

input:checked + .slider.ConsumoSEMES {
        background-color: #ffd24d;
    }
input:checked + .slider.PrelievoRete {
        background-color: #0066ff;
    }






input:checked + .slider.CH1 {
    background-color: #1a78c2;
}

input:checked + .slider.CH2 {
    background-color: #6ca4bc;
}

input:checked + .slider.CH3 {
    background-color: #6f9c3b;
}

input:checked + .slider.CH4 {
    background-color: #cc7900;
}

input:checked + .slider.CH5 {
    background-color: #c3352b;
}












input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}



/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}