#body{ display:flex;flex-direction:column;align-items:center;justify-content:center;}#body span.switcher{ position:relative;width:200px;height:50px;border-radius:25px;margin:20px 0;}#body span.switcher input{ -webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:200px;height:50px;border-radius:25px;background-color:#1E1E1E;outline:none;font-family:'Oswald', sans-serif;}#body span.switcher input:before,#body span.switcher input:after{ z-index:2;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#FFFFFF;}#body span.switcher input:before{ content:'ON';left:20px;}#body span.switcher-prepay input:before{ content:'Списать';left:20px;}#body span.switcher input:after{ content:'OFF';right:20px;}#body span.switcher-prepay input:after{ content:'Зачислить';right:20px;}#body span.switcher label{ z-index:1;position:absolute;top:10px;bottom:1px;border-radius:20px;}#body span.switcher.switcher-1 input{ transition:.25s -.1s;}#body span.switcher.switcher-1 input:checked{ background-color:rgba(235, 231, 231, 0.377);border:solid 1px rgba(179, 175, 175, 0.377);}#body span.switcher.switcher-1 input:checked:before{ color:#FFFFFF;transition:color .5s .2s;}#body span.switcher.switcher-1 input:checked:after{ color:#CCCCCC;transition:color .5s;}#body span.switcher.switcher-1 input:checked+label{ left:10px;right:100px;background:#1E1E1E;transition:left .5s, right .4s .2s;}#body span.switcher.switcher-1 input:not(:checked){ background:#1E1E1E;transition:background .5s -.1s;}#body span.switcher.switcher-1 input:not(:checked):before{ color:#CCCCCC;transition:color .5s;}#body span.switcher.switcher-1 input:not(:checked):after{ color:#1E1E1E;transition:color .5s .2s;}#body span.switcher.switcher-1 input:not(:checked)+label{ left:100px;right:10px;background:#FFFFFF;transition:left .4s .2s, right .5s, background .35s -.1s;}#body span.switcher.switcher-2{ overflow:hidden;}#body span.switcher.switcher-2 input{ transition:background-color 0s .5s;}#body span.switcher.switcher-2 input:before{ color:#1E1E1E;}#body span.switcher.switcher-2 input:after{ color:#FFFFFF;}#body span.switcher.switcher-2 input:checked{ background-color:#FFFFFF;}#body span.switcher.switcher-2 input:checked+label{ background:#FFFFFF;-webkit-animation:turn-on .5s ease-out;animation:turn-on .5s ease-out;}@-webkit-keyframes turn-on{ 0%{ left:100%;} 100%{ left:0%;}}@keyframes turn-on{ 0%{ left:100%;} 100%{ left:0%;}}#body span.switcher.switcher-2 input:not(:checked){ background:#1E1E1E;}#body span.switcher.switcher-2 input:not(:checked)+label{ background:#1E1E1E;-webkit-animation:turn-off .5s ease-out;animation:turn-off .5s ease-out;}@-webkit-keyframes turn-off{ 0%{ right:100%;} 100%{ right:0%;}}@keyframes turn-off{ 0%{ right:100%;} 100%{ right:0%;}}#body span.switcher.switcher-2 label{ top:0px;width:200px;height:50px;border-radius:25px;}