/**
 * @Author: Luigi Rivoltella
 * @Date:   2021-11-11T12:27:37+01:00
 * @Email:  webmaster@pge.tv
 * @Filename: switchbox.css
 * @Last modified by:   Luigi Rivoltella
 * @Last modified time: 2022-11-25T09:29:02+01:00
 * @License: Commercial
 * @Copyright: PGE S.r.l.
*/

/* The switch - the box around the slider */
.ike-switchbox {
  margin:1em 0;
}
.ike-group {
  display: flex;
  align-items: center;
  position:relative;
}

.ike-switch {
  display: inline-block;
  height: 2.6em;
  position: relative;
  width: 4.8em;
  margin:0 1em 0 0;
}

.ike-switch input {
  display:none;
}

.ike-slider {
  background-color: rgba(0,0,0,0.2);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
  border-radius:0.4em;
  min-width:4.8em;
}

.ike-descr {
  font-size: 0.8em;
  line-height: 1.1em;
  padding-top:0.5em;
}

.ike-descr.ike-hide {
  display:none;
}

/* Foreground */
.ike-slider:before {
  background-color: rgba(255,255,255,0.8);
  bottom: 0.3em;
  content: "";
  height: 2em;
  left: 0.4em;
  position: absolute;
  transition: .4s;
  width: 2em;
  border-radius:0.3em;
}

input:checked + .ike-slider {
  background-color: rgba(0,0,0,0.4);
}

input:checked + .ike-slider:before {
  transform: translateX(2em);
  background-color: rgba(255,255,255,1);
}

input.disabled + .ike-slider {
  background-color: rgba(0,0,0,0.2) !important;
  cursor: not-allowed;
}

input.disabled + .ike-slider:before {
  background-color: rgba(255,255,255,0.4) !important;
}

.ike-slider.round {
  border-radius: 1.3em;
}

.ike-slider.round:before {
  border-radius: 50%;
}

/* The label */
.ike-group .ike-label {
}