[x-cloak] { display: none !important; }



input:checked ~ .dot {
    transform: translateX(100%);
}

input:checked ~ .track {
    background-color: #48bb78;
}

input ~ .track:after
{
    content:'OFF';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    right: -10%;
    font-size: 8px;
    font-family: Verdana, sans-serif;
}

input:checked ~ .track:after
{
    content:'ON';
    right: 40%;
}


/* NEW NEW Slider */
.switch-pricing {
    position: relative;
    display: inline-block;
    height: 34px;
    margin: 10px 0px;
  }

  .switch-pricing input {
    display: none;
  }

  .sliding {
    display: flex;
    cursor: pointer;
    border: 2px solid #34507B;
    border-radius: 5px;
  }

  .sliding div {
    padding: 10px 50px;
  }

  .sliding:before {
    position: absolute;
    content: "";
    height: 36px;
    width: 47%;
    left: 7px;
    bottom: -8px;
    background-color: #34507B;
    transition: 0.4s;
    border-radius: 5px;
  }

  input:focus + .sliding {
    box-shadow: 0 0 1px #2196F3;
  }

  .pricing input:checked + .sliding:before {
    transform: translateX(104%);
  }

  .pricing .month,
  .pricing .annual {
    width: 170px;
  }

  .pricing .sliding .month,
  .pricing .sliding .annual {
    color: #A9A9A9;
    transition: 0.4s;
  }

  .pricing input:not(:checked) + .sliding .month,
  .pricing input:checked + .sliding .annual {
    color: #FFFFFF;
    transition: 0.4s;
  }