.form__item--checkbox {
	@extend .form__item;
	position: relative;
	cursor: pointer;
	margin-top: 1.8rem; //height of .form__item__label
	margin-bottom: 0.3rem; //for align at bottom with .form__item
	height: 4rem; //standart height of input type of text
	display: inline-block;
	width: auto;

	table & {
		margin: -0.2rem;
		height: 1.9rem;
	}

	.just-checkboxes & {
		margin-top: 0;
	} 
	.ears-vertical & {
		margin-top: 0;
		display: block;
	}
	.checkboxes--linear & {
		display: inline-block;
		margin: 1rem 2rem 0 0;
		&:first-child {
			margin-left: 4rem;
		}
		&:last-child {
			margin-right: 0;
		}
	}

	.tree & {
		margin-top: 0;
		margin-bottom: 0;
	}

	.form__item--checkbox-family & {
		margin-top: 0.4rem;
		height: 2.7rem;
		padding-bottom: 0.4rem;
		padding-top: 0;
	}

	&.small-caption {
		margin-top: 1.8rem;
	}
	&.no-top-margin {
		margin-top: 0.3rem;
	}
}

.form__item--checkbox span,
.form__item__caption--checkbox {
	@extend .form__item__caption;
	line-height: 1.6rem;
	position: relative;
	padding-left: 3.8rem;
	padding-top: 0.8rem;
	padding-bottom: 0.7rem;

	&:before {
		@extend .form__item__field;
		font-family: 'FontAwesome';
		text-align: center;
		color: $color--grayforms-label;
		font-size: 2.2rem;
		line-height: 3rem;
		content: '';
		display: inline-block;
		float: left;
		width: 3rem !important;
		height: 3rem;
		margin-right: 1rem;
		padding: 0rem 0.2rem 1rem 0.3rem !important;
		line-height: 2.6rem;
		position: absolute;
		left:0;
		top:0;
	}
	table & {
		&:before {
			width: 2.8rem !important;
			height: 2.8rem !important;
			font-size: 1.3rem;
			padding: 0 0.4rem 1rem 0.4rem !important;
			font-size: 2rem !important;
		}
	}
	table & {
		line-height: 2rem;
		&:before {
			background: $color--white;
			width: 2rem !important;
			height: 2rem !important;
			font-size: 0.9rem;
			padding: 0 0.2rem 1rem 0.15rem !important;
			font-size: 1.6rem !important;
			line-height: 2rem !important;
		}		
	}
	.form__item--checkbox-family &,
	.checkboxes--small & {
		padding-left: 3.5rem;
		padding-top: 0.3rem;
		padding-bottom: 0.3rem;


		&:before {
			background: $color--white;
			width: 2.2rem !important;
			height: 2.2rem !important;
			font-size: 0.9rem;
			padding: 0 0.2rem 1rem 0.2rem !important;
			font-size: 1.6rem !important;
			line-height: 2.2rem !important;
		}
	}
	.form__item--checkbox-family & {
		font-weight: 400;
		margin-right: 2rem;
	}
	&:hover:not(.form__item__caption--checkbox-tripple) {
		&:before {
			border-color: darken($color--grayforms-border, 10%);
			//Two lines below are commented because when you click on checkbox you cannot see the state over the hover effect. Therefore we do not need those lines.
			//content: $fa-var-check;
			//color: rgba($color--grayforms-label, 0.1);
		}
	}
}

.form__item--checkbox input,
.form__item__field--checkbox {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
}

.form__item__caption--checkbox-family {
	@extend .form__item__caption;
}

.form__item--checkbox-family {
	@extend .form__item;

	.form__item--checkbox-col-4{
		width:24%;

		@media (max-width: $screen-md){
			width:49%;
		}
	}
}

.form__item__field--checkbox:checked + .form__item__caption--checkbox:before { content: $fa-var-check; color: $color--grayforms-label; }

.form__item--checkbox input:checked + span:before { content: $fa-var-check; color: $color--grayforms-label; }

//Form item checkbox TRIPPLE
.form__item--checkbox-tripple{
	@extend .form__item--checkbox;
}

.form__item__caption--checkbox-tripple{
	@extend .form__item__caption--checkbox;

	&[data-value="1"]:before{
		content: $fa-var-check;
		color: green;
	}

	&[data-value="2"]:before{
		content: $fa-var-close;
		color: red;
	}

	&:hover{
		&:before{
			//color:inherit;
		}
	}
}