/*
 * The on-off switch was generated (and modified for DataFlex control) at:
 * https://proto.io/freebies/onoff/
 */
.WebSwitch_Switch {
	position: relative;
	width: 56px;
	vertical-align: middle;
	-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
	display: inline-block;
	margin: 5px 10px 0px 0px;

}
/* hide the checkbox, but keep it focusable and selectable with the spacebar */
.WebSwitch_Switch input {
    position: absolute;
    z-index: -50;
}

/* switch background */
.WebSwitch_Switch label {
	display: block; overflow: hidden; cursor: pointer;
	height: 23px !important; padding: 0 !important; line-height: 23px !important;
	border: 2px solid #CCCCCC; border-radius: 36px;
	background-color: #FFFFFF;
	margin-left: 0px !important;
	color: #9E9E9E;
	font-size: 0px;
    transition: background-color 0.2s ease-in;
}
/* switch knob */
.WebSwitch_Switch label:before {
	content: "";
	display: block; width: 23px;
	margin: 0px;
	background: #FFFFFF;
	position: absolute; top: 0;	
	bottom: 0px;
	right: 31px;
	border: 2px solid #CCCCCC; border-radius: 23px;
    transition: all 0.2s ease-in 0s; 
}
.WebSwitch_Switch input:checked + label {
	background-color: #0072C6;
	color: #0072C6;
}
.WebSwitch_Switch input:checked + label, .WebSwitch_Switch input:checked + label:before {
   border-color: #0072C6;
}
.WebSwitch_Switch input:checked + label:before {
	right: 0px; 
	background-color: #FFFFFF; 
}