.switch-tristate {
  z-index: 0;
  font-family: "Helvetica Neue";
  width: 75px;
  font-size: 10px;
  position: relative;
  display: inline-block;
  padding: 0 !important;
  /* Theme */
}
.switch-tristate label {
  cursor: pointer;
}
.switch-tristate::after {
  clear: both;
  content: "";
  display: table;
}
.switch-tristate *,
.switch-tristate *:before,
.switch-tristate *:after {
  box-sizing: border-box;
}
.switch-tristate a {
  display: block;
  transition: all 0.2s ease-out;
}
.switch-tristate label,
.switch-tristate > span {
  line-height: 2em;
}
.switch-tristate input:focus ~ span a,
.switch-tristate input:focus + label {
  outline: none;
}
.switch-tristate input:focus ~ span a,
.switch-tristate input:focus + label {
  outline: none;
}
.switch-tristate input {
  position: absolute;
  left: 0;
  opacity: 0;
}
.switch-tristate input + label {
  position: relative;
  z-index: 2;
  display: block;
  float: left;
  padding: 0 0.5em;
  margin: 0;
  text-align: center;
}
.switch-tristate a {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  z-index: 1;
  width: 10px;
  height: 100%;
}
.switch-tristate label:nth-child(2):nth-last-child(4),
.switch-tristate label:nth-child(2):nth-last-child(4) ~ label,
.switch-tristate label:nth-child(2):nth-last-child(4) ~ a {
  width: 50%;
}
.switch-tristate label:nth-child(2):nth-last-child(4) ~ input:checked:nth-child(3) + label ~ a {
  left: 50%;
}
.switch-tristate label:nth-child(2):nth-last-child(6),
.switch-tristate label:nth-child(2):nth-last-child(6) ~ label,
.switch-tristate label:nth-child(2):nth-last-child(6) ~ a {
  width: 33.33%;
}
.switch-tristate label:nth-child(2):nth-last-child(6) ~ input:checked:nth-child(3) + label ~ a {
  left: 33.33%;
}
.switch-tristate label:nth-child(2):nth-last-child(6) ~ input:checked:nth-child(5) + label ~ a {
  left: 66.66%;
}
.switch-tristate label:nth-child(2):nth-last-child(8),
.switch-tristate label:nth-child(2):nth-last-child(8) ~ label,
.switch-tristate label:nth-child(2):nth-last-child(8) ~ a {
  width: 25%;
}
.switch-tristate label:nth-child(2):nth-last-child(8) ~ input:checked:nth-child(3) + label ~ a {
  left: 25%;
}
.switch-tristate label:nth-child(2):nth-last-child(8) ~ input:checked:nth-child(5) + label ~ a {
  left: 50%;
}
.switch-tristate label:nth-child(2):nth-last-child(8) ~ input:checked:nth-child(7) + label ~ a {
  left: 75%;
}
.switch-tristate label:nth-child(2):nth-last-child(10),
.switch-tristate label:nth-child(2):nth-last-child(10) ~ label,
.switch-tristate label:nth-child(2):nth-last-child(10) ~ a {
  width: 20%;
}
.switch-tristate label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(3) + label ~ a {
  left: 20%;
}
.switch-tristate label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(5) + label ~ a {
  left: 40%;
}
.switch-tristate label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(7) + label ~ a {
  left: 60%;
}
.switch-tristate label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(9) + label ~ a {
  left: 80%;
}
.switch-tristate label:nth-child(2):nth-last-child(12),
.switch-tristate label:nth-child(2):nth-last-child(12) ~ label,
.switch-tristate label:nth-child(2):nth-last-child(12) ~ a {
  width: 16.6%;
}
.switch-tristate label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(3) + label ~ a {
  left: 16.6%;
}
.switch-tristate label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(5) + label ~ a {
  left: 33.2%;
}
.switch-tristate label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(7) + label ~ a {
  left: 49.8%;
}
.switch-tristate label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(9) + label ~ a {
  left: 66.4%;
}
.switch-tristate label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(11) + label ~ a {
  left: 83%;
}
.switch-tristate {
  background-color: #c9d0d6;
  border-radius: 30px;
}
.switch-tristate a {
  background-color: #2779A7;
  border: 2px solid #c9d0d6;
  border-radius: 1.75em;
  transition: all 0.12s ease-out;
}
.switch-tristate label {
  height: 2.4em;
  color: #45515b;
  line-height: 2.4em;
  vertical-align: middle;
}
.switch-tristate input:checked + label {
  color: white;
}
.switch-tristate input:checked + label {
  color: white;
}

@-webkit-keyframes webkitSiblingBugfix {
  from {
    -webkit-transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
  }
}

/*# sourceMappingURL=component-custom-switch-tristate.css.map */