// This file will style the JS Engine checkbox widget for the template.

.single-checkbox {
	display: inline-block;
	width: 16px;
	height: 16px;
	line-height: 14px;
	text-align: center;
	border: 1px solid $input-color-placeholder;
	background-color: $gx-body-bg-color;
	cursor: pointer;
	margin-right: 5px;
	@include user-select(none);
	@include transition(border .2s ease);

	.glyphicon, .fa {
		font-size: 12px;
		color: $gx-body-bg-color;
		visibility: hidden;
	}

	&.focused {
		border-color: #2196F3;
	}

	&.checked {
		background-color: $brand-primary;
		border: 1px solid $brand-primary;

		.glyphicon, .fa {
			visibility: visible;
		}

		&:active {
			background-color: darken($brand-primary, 5%);
		}
	}

	&.disabled {
		cursor: not-allowed !important;
		background-color: $gray-lighter !important;
		border-color: $input-color-placeholder !important;

		.glyphicon, .fa {
			color: #A7A7A7 !important;
		}
	}

	&:active {
		background-color: adjust-lightness($gx-body-bg-color, -5);
	}

	&:hover {
		border-color: $brand-primary;
		@include transition(border .2s ease);
	}

}

// checkbox padding like bootstrap

.checkbox .single-checkbox,
.checkbox-inline .single-checkbox {
	position: absolute;
	margin-left: -20px;
	margin-top: 4px \9
;
}

.parcel-finder-notice {
	display: block;
	margin-top: 15px;
}

.alert.checkbox label input {
	top: 50%;
	transform: translate(-140%, -50%);
	margin: 0px;
	left: 35px;
}

fieldset input[type=checkbox]
{
	transform:translateY(20%);
}