/*
	Styles for form-checkbox and form-toggle elements
	
	Checkbox markup:
	<label class="app-form-checkbox">
		<input type="checkbox" />
		<span class="label" />
	</label>

	Toggle markup:
	<label class="app-form-toggle {round|sm|med|lg}">
		<input type="checkbox" />
		<span class="slider"></span>
	</label>

	Toggle with label:
	<label class="app-form-control {round|sm|med|lg}">
		<label class="app-form-toggle {round|sm|med|lg}">
			<input type="checkbox" />
			<span class="slider" />
		</label>
		<span class="label" />
	</label>
*/

input[type=checkbox], input[type=radio] {
	box-sizing:border-box;
	height: 17px;
	width: 17px;
	vertical-align: middle;
	margin: 3px;
}
.hidden {
	display: none;
}
label.app-form-control {
	box-sizing: border-box;
	display: inline-block;
	cursor: pointer;
	-webkit-user-select:none;
	   -moz-user-select:none;
			user-select:none;

}
label.app-form-control > .app-form-checkbox,
label.app-form-control > .app-form-toggle,
label.app-form-control > .label {
	box-sizing: border-box;
	vertical-align: middle;
}
label.app-form-control > .label {
	display: inline;
	margin-left: .5em;
}
label.app-form-control.disabled .label {
	color: GrayText;
}
label.app-form-checkbox {
	display: inline-block;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-user-select:none;
	   -moz-user-select:none;
			user-select:none;

}
.disabled > label.app-form-checkbox,
label.app-form-checkbox.disabled {
	color: GrayText;
}
label.app-form-checkbox > input[type=checkbox] {
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	width: 17px;
	height: 17px;
	margin: 3px;
}
label.app-form-checkbox > .label {
	box-sizing: border-box;
	display: inline;
	vertical-align: middle;
}
/*******************************/
/* WIP custom checkbox appearance
label.my-checkbox {
	box-sizing: border-box;
	display: inline-block;
	cursor: pointer;
	-webkit-user-select:none;
	   -moz-user-select:none;
			user-select:none;
}

label.my-checkbox > input[type=checkbox] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

label.my-checkbox > .checkmark {
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	width: 19px;
	height: 19px;
	border-radius: 3px;
	background-color: #eee;
	border: 1px solid #ccc;
}
label.my-checkbox > .label {
	vertical-align: middle;
	display: inline;
	margin-left: .25em;
}

label.my-checkbox:hover > input[type=checkbox] ~ .checkmark {
	background-color: #ccc;
	border: none;
}

label.my-checkbox > input[type=checkbox]:checked ~ .checkmark {
	background-color: #6093c5;
	border: none;
}

label.my-checkbox > .checkmark:after {
	content: "";
	display: none;
}

label.my-checkbox > input[type=checkbox]:checked ~ .checkmark:after {
	display: block;
}

label.my-checkbox > .checkmark:after {
	margin: 2px 0px 0px 7px;
	width: 3px;
	height: 10px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
			transform: rotate(45deg);
}
label.my-checkbox > input[type=checkbox]:focus + .checkmark {
	box-shadow: 0 0 0 2px #7AACFE;
	transition:none;
}

label.my-checkbox > input[type=checkbox]:disabled + .checkmark {
	background-color: #ccc;
	transition: none;
}
label.my-checkbox > input[type=checkbox]:checked:disabled + .checkmark {
	background-color: #ccc;
	transition: none;
}
*/
/******************************/
label.app-form-toggle {
	position: relative;
	display: inline-block;
	height: 20px;
	width: 34px;
}

/* hide checkbox */
label.app-form-toggle > input[type=checkbox] {
	box-sizing: border-box;
	opacity: 0;
	width: 0;
	height: 0;
}

label.app-form-toggle > .slider {
	box-sizing: border-box;
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: none;
			transition: none;
}

label.app-form-toggle > .slider:before {
	box-sizing: border-box;
	position: absolute;
	content: "";
	height: 14px;
	width: 14px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	-webkit-transition: none;
			transition: none;
}

label.app-form-toggle > input:checked + .slider {
	background-color: #6093c5;
}
/* light gray when disabled, but not checked */
label.app-form-toggle > input:disabled + .slider {
	background-color: #ccc;
	transition: none;
}
/* dark gray when disabled and checked */
label.app-form-toggle > input:checked:disabled + .slider {
	background-color: #aaa;
	transition: none;
}
/* make sure a focus ring is displayed for accessiblity */
label.app-form-toggle > input:focus + .slider {
	box-shadow: 0 0 0 2px #7AACFE;
	transition:none;
}

label.app-form-toggle > input:checked + .slider:before {
	-webkit-transform: translateX(14px);
		-ms-transform: translateX(14px);
			transform: translateX(14px);
}

/* Rounded sliders */
label.app-form-control.round > label.app-form-toggle > .slider,
label.app-form-toggle.round > .slider {
	border-radius: 10px;
}
label.app-form-control.round > label.app-form-toggle > .slider:before,
label.app-form-toggle.round > .slider:before {
	border-radius: 50%;
}

/* <med> medium variant */
label.app-form-control.med > label.app-form-toggle,
label.app-form-toggle.med {
	width: 46px;
	height: 26px;
}
	label.app-form-control.med > label.app-form-toggle > .slider:before,
	label.app-form-toggle.med > .slider:before {
		height: 20px;
		width: 20px;
		left: 3px;
		bottom: 3px;
	}
	label.app-form-control.med > label.app-form-toggle > input:checked + .slider:before,
	label.app-form-toggle.med > input:checked + .slider:before {
		-webkit-transform: translateX(20px);
			-ms-transform: translateX(20px);
				transform: translateX(20px);

	}
	label.app-form-control.med.round > label.app-form-toggle > .slider,
	label.app-form-toggle.med.round > .slider {
		border-radius: 13px;
	}

/* <lg> large variant*/
label.app-form-control.lg > label.app-form-toggle,
label.app-form-toggle.lg {
	width: 60px;
	height: 34px;
}
	label.app-form-control.lg > label.app-form-toggle > .slider:before,
	label.app-form-toggle.lg > .slider:before {
		height: 26px;
		width: 26px;
		left: 4px;
		bottom: 4px;
	}
	label.app-form-control.lg > label.app-form-toggle > input:checked + .slider:before,
	label.app-form-toggle.lg > input:checked + .slider:before {
		-webkit-transform: translateX(26px);
			-ms-transform: translateX(26px);
				transform: translateX(26px);
	}
	label.app-form-control.lg.round > label.app-form-toggle > .slider,
	label.app-form-toggle.lg.round > .slider {
		border-radius: 17px;
	}