.toggle_switch{
    margin: 0 2px 0 0;
	width: 70px;
	height: 35px;
	position: relative;
}

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

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: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
svg.checkbox .is_checked{
  opacity: 0;
  fill: #ff9f43;
  -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: #ff9f43;
  -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;
}
@-webkit-keyframes animateRing{
  to{
    stroke-dashoffset: 0;
    stroke: #ff9f43; /*#b0aa28;*/
  }
}
@keyframes animateRing{
  to{
    stroke-dashoffset: 0;
    stroke: #ff9f43; /*#b0aa28;*/
  }
}
@-webkit-keyframes resetRing{
  to{
    stroke-dashoffset: 0;
    stroke: #233043;
  }
}
@keyframes resetRing{
  to{
    stroke-dashoffset: 0;
    stroke: #233043;
  }
}
