input.toggle{
	height: 0;
	width: 0;
    padding:0px;
    margin:0px;
	visibility: hidden;
}

label.toggle {
	cursor: pointer;
	text-indent: -9999px;
	width: 38px;
	height: 20px;
	background: #c1d3e6;
	display: inline-block;
	border-radius: 20px;
	position: absolute;
	margin-top:0px;
	margin-left:0px;
    
    -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
    box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
}

label.toggle:after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	background: #ffffff;
	border-radius: 90px;
	transition: 0.3s;
}

label.toggle:hover {
  background: #24AEF2;
}

input.toggle:hover + label.toggle:after {
  left: calc(60% - 2px);
	transform: translateX(-100%);
}

input.toggle:checked + label.toggle {
	background: #0091c6;
}

input.toggle.warning:checked + label.toggle,
input.toggle.warning:hover + label.toggle {
	background: #fe2342;
}

input.toggle:checked + label.toggle:after {
	left: calc(100% - 2px);
	transform: translateX(-100%);
}

input.toggle.warning:hover + label.toggle:after {
	left: calc(60% - 2px);
	transform: translateX(-100%);
}

label.toggle:active:after {
	width: 26px;
}

.toggle_label
{
	display:inline-block;
    position:absolute;
	margin-left:45px;
    font-size:14px;
    margin-top:-2px;
}