.cmn-toggle-switch {display: block; position: relative; overflow: hidden; margin: 0; padding: 0;
  width: 32px; height: 32px; font-size: 0; text-indent: -9999px; -webkit-appearance: none;
  -moz-appearance: none; appearance: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; -webkit-transition: background 0.3s; transition: background 0.3s;}  
  .cmn-toggle-switch:focus {outline: none;}
  .cmn-toggle-switch span {display: block; position: absolute; height: 3px; background: #4c4c4c; width: 100%;}  
  .cmn-toggle-switch span::before, .cmn-toggle-switch span::after {position: absolute; display: block; left: 0; width: 100%; height: 3px; background-color: #4c4c4c; content: ""; border-radius: 10px;}  
  .cmn-toggle-switch span::before {top: -7px;}  
  .cmn-toggle-switch span::after {bottom: -7px;}  

  .cmn-toggle-switch.active span::after{width: 100%;}


  .cmn-toggle-switch__htx span {-webkit-transition: background 0 0.3s; transition: background 0 0.3s;}
  .cmn-toggle-switch__htx span::before, .cmn-toggle-switch__htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s; transition-duration: 0.3s, 0.3s; -webkit-transition-delay: 0.3s, 0; transition-delay: 0.3s, 0;}  
  .cmn-toggle-switch__htx span::before {-webkit-transition-property: top, -webkit-transform;
  transition-property: top, transform;}  
  .cmn-toggle-switch__htx span::after {-webkit-transition-property: bottom, -webkit-transform;
  transition-property: bottom, transform;} 
  .cmn-toggle-switch__htx.active span {background: none;}  
  .cmn-toggle-switch__htx.active span::before {top: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);}  
  .cmn-toggle-switch__htx.active span::after {bottom: 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);}  
  .cmn-toggle-switch__htx.active span::before, .cmn-toggle-switch__htx.active span::after {
  -webkit-transition-delay: 0, 0.3s; transition-delay: 0, 0.3s;}