* {
  box-sizing: border-box; }

.checkboxmutileft {
  display: none; }

.checkboxmutileft + label {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 20px;
  background: linear-gradient(to right, #57576b 0, #b6b6f0 45%, #000000 55%, #00717700 100%) 0 0;
  background-size: 650px 100%;
  border-radius: 70px;
  padding: 5px;
  cursor: pointer;
  transition: all 500ms ease;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2) inset; }
  .checkboxmutileft + label:before {
    content: 'Off';
    width: 15px;
    height: 15px;
    position: absolute;
    left: 5px;
    top: 0px;
    padding-left:2px;
    border-radius: 100%;
    background: #fff;
    text-align: center;
    line-height: 26px;
    font-family: 'Cabin', sans-serif;
    font-size: 8px;
    font-weight: bold;
    color: #6d6d6d;
    letter-spacing: 2px;
    column-width: 5px;
    text-transform: uppercase;
    transition: left 500ms ease, color 500ms ease, transform 150ms ease; }
  .checkboxmutileft + label:active:before {
    transform: scale(0.95); }

.checkboxmutileft:checked + label {
  background-position-x: -150px; 
}

.checkboxmutileft:checked + label:before {
    content: 'On';
    color: #007177;
    padding-left: 5px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2) inset; 
    left: 37px; 
  }






    .inputGroup {
      background-color: #fff;
      display: block;
      margin: 10px 0;
      position: relative; }
      .inputGroup label {
        padding: 12px 30px;
        width: 100%;
        display: block;
        text-align: left;
        color: #3C454C;
        cursor: pointer;
        position: relative;
        z-index: 2;
        transition: color 200ms ease-in;
        overflow: hidden; }
        .inputGroup label:before {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          content: '';
          background-color: #5562eb;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%) scale3d(1, 1, 1);
          transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
          opacity: 0;
          z-index: -1; }
        .inputGroup label:after {
          width: 32px;
          height: 32px;
          content: '';
          border: 2px solid #D1D7DC;
          background-color: #fff;
          background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
          background-repeat: no-repeat;
          background-position: 2px 3px;
          border-radius: 50%;
          z-index: 2;
          position: absolute;
          right: 30px;
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;
          transition: all 200ms ease-in; }
      .inputGroup input:checked ~ label {
        color: #fff; }
        .inputGroup input:checked ~ label:before {
          transform: translate(-50%, -50%) scale3d(56, 56, 1);
          opacity: 1; }
        .inputGroup input:checked ~ label:after {
          background-color: #54E0C7;
          border-color: #54E0C7; }
      .inputGroup input {
        width: 32px;
        height: 32px;
        order: 1;
        z-index: 2;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        visibility: hidden; }
    
    .form {
      padding: 0 16px;
      max-width: 550px;
      margin: 50px auto;
      font-size: 18px;
      font-weight: 600;
      line-height: 36px; }
    
    body {
      background-color: #D1D7DC;
      font-family: 'Fira Sans', sans-serif; }
    
    *,
    *::before,
    *::after {
      box-sizing: inherit; }
    
    html {
      box-sizing: border-box; }
    
    code {

      background-color: #9AA3AC;
      padding: 0 8px; }
 /* ------------------- */
      .checkboxmutiright {
        display: none; }
      
    .checkboxmutiright + label {
        display: inline-block;
        position: relative;
        width: 70px;
        height: 30px;
        background: linear-gradient(to right, #57576b 0, #b6b6f0 45%, #000000 55%, #00717700 100%) 0 0;
        background-size: 650px 100%;
        border-radius: 70px;
        padding: 5px;
        cursor: pointer;
        transition: all 500ms ease;
        box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2) inset; }
      .checkboxmutiright + label:before {
          content: 'Off';
          width: 24px;
          height: 24px;
          position: absolute;
          left: 7px;
          top: 3px;
          padding-left:2px;
          border-radius: 100%;
          background: #fff;
          text-align: center;
          line-height: 26px;
          font-family: 'Cabin', sans-serif;
          font-size: 8px;
          font-weight: bold;
          color: #6d6d6d;
          letter-spacing: 2px;
          column-width: 5px;
          text-transform: uppercase;
          transition: left 500ms ease, color 500ms ease, transform 150ms ease; }
      .checkboxmutiright + label:active:before {
          transform: scale(0.95); }
      
      .checkboxmutiright:checked + label {
        background-position-x: -150px; 
      }
      
    .checkboxmutiright:checked + label:before {
          content: 'On';
          color: #007177;
          padding-left: 5px;
          box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2) inset; 
          left: 37px; 
        }

 /* ------------------- */

 .checkboxSurgeryright {
  display: none; }

.checkboxSurgeryright + label {
  display: inline-block;
  position: relative;
  width: 70px;
  height: 30px;
  background: linear-gradient(to right, #57576b 0, #b6b6f0 45%, #000000 55%, #00717700 100%) 0 0;
  background-size: 650px 100%;
  border-radius: 70px;
  padding: 5px;
  cursor: pointer;
  transition: all 500ms ease;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2) inset; }
.checkboxSurgeryright + label:before {
    content: 'Off';
    width: 24px;
    height: 24px;
    position: absolute;
    left: 7px;
    top: 3px;
    padding-left:2px;
    border-radius: 100%;
    background: #fff;
    text-align: center;
    line-height: 26px;
    font-family: 'Cabin', sans-serif;
    font-size: 8px;
    font-weight: bold;
    color: #6d6d6d;
    letter-spacing: 2px;
    column-width: 5px;
    text-transform: uppercase;
    transition: left 500ms ease, color 500ms ease, transform 150ms ease; }
.checkboxSurgeryright + label:active:before {
    transform: scale(0.95); }

.checkboxSurgeryright:checked + label {
  background-position-x: -150px; 
}

.checkboxSurgeryright:checked + label:before {
    content: 'On';
    color: #007177;
    padding-left: 5px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2) inset; 
    left: 37px; 
  }
 /* ------------------- */


 .checkboxDimensionright {
  display: none; }

.checkboxDimensionright + label {
  display: inline-block;
  position: relative;
  width: 70px;
  height: 30px;
  background: linear-gradient(to right, #57576b 0, #b6b6f0 45%, #000000 55%, #00717700 100%) 0 0;
  background-size: 650px 100%;
  border-radius: 70px;
  padding: 5px;
  cursor: pointer;
  transition: all 500ms ease;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2) inset; }
.checkboxDimensionright + label:before {
    content: 'Off';
    width: 24px;
    height: 24px;
    position: absolute;
    left: 7px;
    top: 3px;
    padding-left:2px;
    border-radius: 100%;
    background: #fff;
    text-align: center;
    line-height: 26px;
    font-family: 'Cabin', sans-serif;
    font-size: 8px;
    font-weight: bold;
    color: #6d6d6d;
    letter-spacing: 2px;
    column-width: 5px;
    text-transform: uppercase;
    transition: left 500ms ease, color 500ms ease, transform 150ms ease; }
.checkboxDimensionright + label:active:before {
    transform: scale(0.95); }

.checkboxDimensionright:checked + label {
  background-position-x: -150px; 
}

.checkboxDimensionright:checked + label:before {
    content: 'On';
    color: #007177;
    padding-left: 5px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2) inset; 
    left: 37px; 
  }