:root{
   --essilorblue: #2784c6;
   }

     .vp-tri-state{
      display:flex;
      width:fit-content;
      background-color: rgb(74 72 72 / 42%);
      height: 55px;
      padding: 0em 0.4em;
      border-radius: 2.4em;
      align-items:center;
      justify-content: center;
      user-select: none;
      margin: 15px;
    }

    .tri-nav {
      background-color: rgb(184 177 177 / 26%);
    }

    .vp-tri-state .option {
        position:relative;
        display:flex;
        height: 45px;
        align-items: center;
    }

    .vp-tri-state input {
      width: 100%;
      position:absolute;
      z-index: -1;
      display:none;
     
    }

    .vp-tri-state label {
      position:relative;
      cursor: pointer;
    }
    
    .dot {
      height: 9px;
      width: 9px;
      background-color: rgb(255, 255, 255);
      border-radius: 50%;
      display: inline-block;
      align-items: center;
    }

    .navigation.dot {
      height: 19px;
      width: 19px;
      background-color: rgb(255, 255, 255);
      border-radius: 50%;
      display: inline-block;
      align-items: center;
    }
    

    .vp-tri-state .option.txt label {
      display:flex;
      justify-content: center;
      align-items: center;
      padding: 0em 1.25em; 
      height: 2em;
      border-radius: 2em;
    }
    
    .vp-tri-state .option.dot label {
      font-size: 2em;
      width: 1em;
      text-align:center;
      transition: transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97);
      
    }

    .vp-tri-state .indicator {
      position:absolute;
      width: 100%;
      height: 100%;
      z-index:0;
      border-radius: 2em;
    }

    .vp-tri-state .on ~ .indicator {
      transition: transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97), background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03);
      transform: translate3d(1rem, 0, 0);
    }

    .vp-tri-state .off ~ .indicator {
      transition: transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97), background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03);
      transform: translate3d(-1rem, 0, 0);
    }

    .vp-tri-state input.off:checked  ~ .indicator {
      background: var(--essilorblue);
      transition: transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97), background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03);
      transform: translate3d(0rem, 0, 0);
  }
    
    .vp-tri-state input.on:checked ~  .indicator {
      background:var(--essilorblue);
      transform: translate3d(0rem, 0, 0);
    }

    .vp-tri-state .option.txt  input.none:checked ~ .indicator {
      transition: background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03);
      transform: translate3d(0rem, 0, 0);
      background:  var(--essilorblue);
  }

    .vp-tri-state .option.dot input.none:checked ~ label {
        transition: transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97);
        transform:scale(2.25);
    }

    @media only screen and (max-width: 576px){

      .vp-tri-state {  
        height: 2.5em;
        padding: 0em 0.3em;
        border-radius: 2em;
        background-color: rgba(78, 77, 77, 0.226);
      }

      .dot {
        height: 12px;
        width: 12px;
      }

      .vp-tri-state .option.txt label {
        padding: 0em 0.8em;
        border-radius: 1.8em;
        letter-spacing: 0px;
      }
      
  }