body {margin: 0;padding: 0;font-family: sans-serif;}



.wrapper{
   /*display: -webkit-box;
    display: -ms-flexbox;
    display: flex;*/
    width: 150px;
    margin: 10vh auto 0;
   /* -ms-flex-wrap: wrap;
        flex-wrap: wrap;
   transform: translateY(-50%);
            transform: translateX(-50%);*/
}

.switch_box{
    display: inline-block;
    display: flexbox;
    display: flex;
   top: -50%;
   left: 400%;

    width: 150px;
    height: 60px;
   box-pack: center;
       flex-pack: center;
            justify-content: center;
    box-align: center;
        flex-align: center;
            align-items: center;
   box-flex: 1;
        flex: 1;
            flex: 1;
             transform: translateX(-50%);}



    
/* Switch 3 Specific Style Start */

/*.box_3{
    background:#000000 ;
    left: 300%;
  top: -10%;


}*/

.toggle_switch{
 /* width: 100px;
  height: 45px;*/
 
  

 /*position: relative;*/
}

input[type="checkbox"].switch_3{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  top: -50%;
  left: 400%;
  right: 0;
  bottom: 0;
  
  width: 100%;
  height: 100%;
  cursor: pointer;
  outline: 0;
  z-index: 1;
  transform: translateX(-50%);
}

svg.checkbox .outer-ring{
  stroke-dasharray: 375;
  stroke-dashoffset: 375;
  -webkit-animation: resetRing .35s ease-in-out forwards;
          animation: resetRing .35s ease-in-out forwards;

}

input[type="checkbox"].switch_3:checked + svg.checkbox .outer-ring{
  -webkit-animation: animateRing .35s ease-in-out forwards;
          animation: animateRing .35s ease-in-out forwards;
}

input[type="checkbox"].switch_3:checked + svg.checkbox .is_checked{
  opacity: 1;
  -webkit-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
}

input[type="checkbox"].switch_3:checked + svg.checkbox .is_unchecked{
  opacity: 0;
  -webkit-transform: translateX(-200%) rotate(180deg);
          transform: translateX(-200%) rotate(180deg);
}


svg.checkbox{
  
  position: absolute;
   top: -50%;
  left: 400%;
  right: 0;
  bottom: 0;
  
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
}

svg.checkbox .is_checked{
  opacity: 0;
  fill: #000000;
  background:#000000 ;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translateX(200%) rotate(45deg);
          transform: translateX(200%) rotate(45deg);
  -webkit-transition: all .35s;
  transition: all .35s;
}

svg.checkbox .is_unchecked{
  opacity: 1;
  fill: #000000;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
  -webkit-transition: all .35s;
  transition: all .35s;
}



@keyframes animateRing{
  to{
    stroke-dashoffset: 0;
    stroke:#FFD700;
  }
}



@keyframes resetRing{
  to{
    stroke-dashoffset: 0;
    stroke:#FFFFFF;
  }
}

/* Switch 3 Specific Style End */