/* toggle switch ------------------------------- */
.ReadonlyToggle input,
.Toggle input
{
	opacity: 0;
	filter: alpha(opacity=0);
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 8px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	width: 34px;
	height: 14px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	left: 0px;
	bottom: -4px;
	-webkit-transition: .4s;
	transition: .4s;
	background-color: #fff;
	box-shadow: 0 0 2px rgba(0,0,0,.12), 0 2px 2px rgba(0,0,0,.2);
}

input:checked + label .slider,
input:checked + .slider {
	background-color: rgba(0, 42, 67, 0.5);
}

input:checked + label .slider:before,
input:checked + .slider:before {
	-webkit-transform: translateX(12px);
	-ms-transform: translateX(12px);
	transform: translateX(12px);
	background-color: #002A43;
}

.slider.round {
	border-radius: 20px;
}

.slider.round:before {
	border-radius: 50%;
}

/* CheckBox --------------------------------------------- */
.CheckBox,
.ReadonlyCheckBox {
	display: block;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding-left: 28px;
	height: 32px;
	line-height: 32px;
	color: #7D6955;
}

.CheckBox label,
label.CheckBox {
	cursor: pointer;
}

/* Hide the browser's default CheckBox */
.CheckBox input,
.ReadonlyCheckBox input {
	position: absolute;
	opacity: 0;
}

/* Create a custom CheckBox */
.checkmark {
	position: absolute;
	top: 5px;
	left: 0;
	height: 22px;
	width: 22px;
	background-color: #ddd;
	transition: background-color .2s ease-in-out;
	border-radius: 2px;
	box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* On mouse-over, add a grey background color */
.CheckBox:hover input ~ .checkmark,
.CheckBox:hover input ~ label .checkmark {
	background-color: #ccc;
}

/* When the CheckBox is checked, add a blue background */
.CheckBox input:checked ~ .checkmark,
.CheckBox input:checked ~ label .checkmark {
	background-color: #002A43;
}

.ReadonlyCheckBox input:checked ~ .checkmark,
.ReadonlyCheckBox input:checked ~ label .checkmark {
	background-color: #bbb;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	transition: all .2s ease-in-out;
}

/* Show the checkmark when checked */
.CheckBox input:checked ~ .checkmark:after,
.CheckBox input:checked ~ label .checkmark:after,
.ReadonlyCheckBox input:checked ~ .checkmark:after,
.ReadonlyCheckBox input:checked ~ label .checkmark:after {
	transform: rotate(45deg) scale(1);
}

/* Style the checkmark/indicator */
.CheckBox .checkmark:after,
.ReadonlyCheckBox .checkmark:after {
	left: 8px;
	top: 3px;
	width: 7px;
	height: 14px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(0deg) scale(0);
	-ms-transform: rotate(0deg) scale(0);
	transform: rotate(0deg) scale(0);
}

/* radio --------------------------------------------- */
.Radio,
.ReadonlyRadio {
	margin: 1rem 0;
	line-height: 2.25rem;
}

/* Customize the label (the container) */
.Radio label,
.ReadonlyRadio label {
	position: relative;
	padding-left: 28px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin-bottom: 5px;
    margin-left: 0;
    padding-bottom: 0;
    padding-top: 6px;
    width: auto;
    font-weight: bold;
    color: #7c6854;
    text-align: left;
    text-transform: none;
    box-shadow: none;
    border: none;
    background-color: transparent;
    line-height: 20px;
}

/* Hide the browser's default radio button */
.Radio label input,
.ReadonlyRadio label input {
	position: absolute;
	opacity: 0;
}

/* Create a custom radio button */
.radiobtn {
	position: absolute;
	top: 5px;
	left: 0;
	height: 22px;
	width: 22px;
	background-color: #ddd;
	border-radius: 50%;
	transition: background-color .2s ease-in-out;
}

/* On mouse-over, add a grey background color */
.Radio label:hover input ~ .radiobtn,
.ReadonlyRadio label:hover input ~ .radiobtn {
	background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.Radio label input:checked ~ .radiobtn,
.ReadonlyRadio label input:checked ~ .radiobtn {
	background-color: #002A43;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiobtn:after {
	content: "";
	position: absolute;
	transform: scale(0);
	transition: all .2s ease-in-out;
}

/* Show the indicator (dot/circle) when checked */
.Radio label input:checked ~ .radiobtn:after,
.ReadonlyRadio label input:checked ~ .radiobtn:after {
	transform: scale(1);
}

/* Style the indicator (dot/circle) */
.Radio label .radiobtn:after,
.ReadonlyRadio label .radiobtn:after {
	top: 6px;
	left: 6px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: white;
}