/* Bounding container */
.ph-tgl-container {
  padding-bottom: 1.15em;
}

.aes67-tgl-container {
  padding-top: 1em;
  padding-bottom: 1.5em;
}

.mute-tgl-container {
  padding-bottom: .5em;
}

.identify-tgl-container {
  padding-top: 1.5em;
  font-size: 1.2em;
}

/* Hide the checkbox */
.tgl {
  display: none;
}

.aes67-tgl {
  display: none;
}

.mute-tgl {
  display: none;
}

.gpo-tgl {
  display: none;
}

.custom-gpo-tgl {
  display: none;
}

.identify-tgl {
  display: none;
}


/* Default */
.tgl-btn.btn {

}

.aes67-tgl + .tgl-btn {
  width: 3.5em; /* a little bit smaller than default */
}

.gpo-tgl + .tgl-btn {
  width: 1.5em;
  height: 1em;
  margin-left: 1em;
  margin-top: .2em;
}

.custom-gpo-tgl + .tgl-btn {
  width: 3em;
  height: 1.5em;
  padding-top: .7em;
  padding-bottom: .6em;
  margin-top: .2em;
  margin-left: .23em;
  font-size: 1.3em;
  text-align: center;
  color: black;
}

.aes67-tgl:checked +.tgl-btn {
  background: #1c85be;
  color: white;
}

.mute-tgl:checked +.tgl-btn {
  background: rgba(255,0,0,.75);
  color: white;
}

.gpo-tgl:checked +.tgl-btn {
  background: #00FF00;
  color: black;
}

.custom-gpo-tgl:checked +.tgl-btn {
  background: #00FF00;
  color: black;
}

.identify-tgl:checked +.tgl-btn {
  background: #1c85be;
  color: white;
}

/* Checked */
.tgl:checked + .tgl-btn {
  background: #1c85be;
  color: white;
}

/* Disabled */
.tgl:disabled + .tgl-btn {
  border-color: transparent;
  background-image: none;
  background: rgba(192,192,192,.15);
  color: #C0C0C0;
  /* box-shadow: none; */
}

/* Checked and disabled */
.tgl:disabled:checked + .tgl-btn {
  border-color: transparent;
  background-image: none;
  background: rgba(192,192,192,.15);
  color: #C0C0C0;
  /* box-shadow: none; */
}