/* Based on https://codepen.io/alvarotrigo/pen/oNoJePo  */
/* This is another good approach: https://danklammer.com/articles/simple-css-toggle-switch/  */

/*.toggleButton .knobs,
.toggleButton .layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}*/

.toggleButton {
  position:relative;
  /*width: 74px;
  height: 36px;*/
  width: 45px;
  height: 28px;
  margin-right:3px;
  overflow: hidden;

  display:inline-block;
  vertical-align:middle;
}
  .toggleButton.xl {
    width:65px;
  }

.toggleButton
/*, .toggleButton .layer*/
{
  border-radius: 100px;
  background-color:#f3f3f3;
}

.toggleButton .checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.toggleButton .knobs {
  z-index: 2;
}

/*.toggleButton .layer {
  width: 100%;
  background-color: #f3f3f3;
  transition: 0.3s ease all;
  z-index: 1;
}*/

/* Button 1 */
.toggleButton .knobs:before {
  content: "OFF";
  font-weight:normal;
  position: absolute;
/*  top: 4px;*/
  top: 2px;
  left: 3px;
  width: 30px;
  height: 10px;
  color: #fff;
  font-size: 0.9em;
  text-align: center;
/*  line-height: 1;*/
  line-height: 0.2;
/*  padding: 9px 4px;*/
  padding: 12px 4px;
/*  background-color: #f44336;*/
  background-color: #ccc;
  border-radius: 20px ;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
  .toggleButton .knobs[data-off]:before {
    content: attr(data-off);
  }
  .toggleButton.xl .knobs:before {
    width:50px;
  }


.toggleButton .checkbox:checked + .knobs:before {
  content: "ON";
  font-weight:bold;
/*  left: 27px;*/
  left: 12px;
  background-color: #009cea;
}
  .toggleButton .checkbox:checked + .knobs[data-on]:before {
    content: attr(data-on);
  }

  /* For publisher bids' manual overrides  */
  .toggleButton .knobs[data-style="override"]:before { background-color:#EDB67E !important; }
  .toggleButton .checkbox:checked + .knobs[data-style="override"]:before { background-color:#D96D00 !important; }

  /* For geo-unit update before sending to server */
  .toggleButton .checkbox.btn-override + .knobs:before { background-color:#EDB67E !important; }
  .toggleButton .checkbox.btn-override:checked + .knobs:before { background-color:#D96D00 !important; }


/*.toggleButton .checkbox:checked ~ .layer {
  background-color: #ebf7fc;
}*/

.toggleButton input:disabled + .knobs {
  opacity:0.3 !important;
}

.toggleButton .knobs,
.toggleButton .knobs:before,
/*.toggleButton .layer {
  transition: 0.3s ease all;
}*/