.hide{
  display: none;
}

#switch {
  outline: none;
  margin-bottom: -0.75rem;
  display: inline-block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  width: 6rem;
  height: 2rem;
  background: #2e426b;
  border-radius: 2rem;
  appearance: none;
  -webkit-filter: blur(0.4px);
          filter: blur(0.4px);
  -webkit-box-shadow: -0.05rem -0.05rem 0.08rem rgba(0, 0, 51, 0.6), 0.05rem 0.05rem 0.1rem #b6fbe4, inset 0.5rem 0.5rem 2rem rgba(0, 0, 51, 0.5), inset 0.1rem 0.1rem 0.2rem rgba(0, 0, 51, 0.75), inset -0.5rem -0.5rem 4rem rgba(182, 251, 228, 0.5);
          box-shadow: -0.05rem -0.05rem 0.08rem rgba(0, 0, 51, 0.6), 0.05rem 0.05rem 0.1rem #b6fbe4, inset 0.5rem 0.5rem 2rem rgba(0, 0, 51, 0.5), inset 0.1rem 0.1rem 0.2rem rgba(0, 0, 51, 0.75), inset -0.5rem -0.5rem 4rem rgba(182, 251, 228, 0.5);
}
#switch.on{
  pointer-events: none !important;
  opacity: 0.5;
}

.wrap {
  display: block;
  position: relative;
  width: 6rem;
  height: 2rem;
  border-radius: 2rem;
  overflow: hidden;
  z-index: 1;
  -webkit-transform: translatey(-100%);
          transform: translatey(-100%);
}
.switch-container{
  width:auto;
  float:none;
  clear:both;
}
.switch-container tr{
  background:transparent;
}
.switch-container td{
    width: auto;
    text-align: center;
}

.toggle, #switch.show.on .toggle {
  display: block;
  position: absolute;
  top: 50%;
  left: 0.1rem;
  width: 4rem;
  height: 1.8rem;
  background: #abbaba;
  border-radius: 2rem;
  -webkit-transform: translate3d(0%, -50%, 0);
          transform: translate3d(0%, -50%, 0);
  -webkit-transition: -webkit-transform 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: -webkit-transform 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: transform 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: transform 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53), -webkit-transform 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -webkit-filter: blur(0.4px);
          filter: blur(0.4px);
  -webkit-box-shadow: inset -0.05rem -0.05rem 0.08rem rgba(0, 0, 51, 0.6), inset 0.05rem 0.05rem 0.1rem #b6fbe4, 0.5rem 0.5rem 2rem rgba(0, 0, 51, 0.5), 0.1rem 0.1rem 0.2rem rgba(0, 0, 51, 0.75);
          box-shadow: inset -0.05rem -0.05rem 0.08rem rgba(0, 0, 51, 0.6), inset 0.05rem 0.05rem 0.1rem #b6fbe4, 0.5rem 0.5rem 2rem rgba(0, 0, 51, 0.5), 0.1rem 0.1rem 0.2rem rgba(0, 0, 51, 0.75);
}

#switch:active .toggle, #switch.on .toggle, #switch.show .toggle {
  -webkit-transform: translate3d(1.85rem, -50%, 0);
          transform: translate3d(1.85rem, -50%, 0);
}

.rib {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.35rem;
  height: 1.2rem;
  border-radius: 1rem;
  background: #abbaba;
  opacity: 1;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  -webkit-box-shadow: inset -0.02rem -0.03rem 0.08rem rgba(0, 0, 51, 0.5), inset 0.03rem 0.03rem 0.1rem #b6fbe4, inset -0.02rem -0.03rem 0.2rem rgba(0, 0, 51, 0.3), inset 0.03rem 0.03rem 0.2rem rgba(182, 251, 228, 0.8), 0.05rem 0.08rem 0.3rem rgba(0, 0, 51, 0.3), -0.05rem -0.08rem 0.4rem rgba(182, 251, 228, 0.3), 0rem 0rem 0.2rem rgba(46, 66, 107, 0.2);
          box-shadow: inset -0.02rem -0.03rem 0.08rem rgba(0, 0, 51, 0.5), inset 0.03rem 0.03rem 0.1rem #b6fbe4, inset -0.02rem -0.03rem 0.2rem rgba(0, 0, 51, 0.3), inset 0.03rem 0.03rem 0.2rem rgba(182, 251, 228, 0.8), 0.05rem 0.08rem 0.3rem rgba(0, 0, 51, 0.3), -0.05rem -0.08rem 0.4rem rgba(182, 251, 228, 0.3), 0rem 0rem 0.2rem rgba(46, 66, 107, 0.2);
}
.rib:nth-child(1) {
  left: 35%;
}
.rib:nth-child(3) {
  left: 65%;
}





.loader{
  margin: 0 auto;
  height: 40px;
  width: 100%;
  text-align: center;
  padding: 1em;
  margin: 0 auto 1em;
  display: none;
  vertical-align: top;
}
.loader.show{
  display: inline-block;
}

/*
  Set the color of the icon
*/
svg path,
svg rect{
  fill: #FF6700;
}