.checkbox-switch{
    position: relative;
  }
  .checkbox-switch input[type="checkbox"]{
      position: absolute;
      visibility: hidden;
  }
  .checkbox-switch input[type="checkbox"] + label{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0px;
      min-width: 80px;
      font-weight: 500;
      cursor: pointer;
      max-width: 100px;
  }
  .checkbox-switch input[type="checkbox"] + label span.slide{
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 20px;
      border-radius: 50%;
      background-color: #55BCDD;
      box-shadow: 0px 0px 0px 2px #fff, inset 0px 0px 8px 0px rgba(#011f444d), 0px 0px 4px 0px rgba(0,0,0,0.2) ;
      -webkit-box-shadow: 0px 0px 0px 2px #fff, inset 0px 0px 8px 0px rgba(#011f444d), 0px 0px 4px 0px rgba(0,0,0,0.2) ;
      -moz-box-shadow: 0px 0px 0px 2px #fff, inset 0px 0px 8px 0px rgba(#011f444d), 0px 0px 4px 0px rgba(0,0,0,0.2) ;
  
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 15px;
  }
  
  .checkbox-switch input[type="checkbox"] + label span.slide:before{ 
      content:"";
      display: inline-block;
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #0d4e86 ;
      border-radius: 50%;
      left:0px;
      right: inherit;
      transition: left 0.1s ease, right 0.1s ease;
      -webkit-transition: left 0.1s ease, right 0.1s ease;
      -moz-transition: left 0.1s ease, right 0.1s ease;
  
  }
  .checkbox-switch input[type="checkbox"]:checked + label span.slide{
    background-color: #efefef;
  }
  .checkbox-switch input[type="checkbox"]:checked + label span.slide:before{
      left:calc(100% - 20px);
      background-color: #0d4e86;
  }
  .checkbox-switch input[type="checkbox"] + label span.label:after{
      content:attr(utext);
  }
  .checkbox-switch input[type="checkbox"]:checked + label span.label:after{
      content:attr(ctext);
  }