/* The container-checkbox */
.container-checkbox {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 22px;
	user-select: none;
	
	/* Hide the browser's default checkbox */
	input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
	}
	
	/* Create a custom checkbox */
	.checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 25px;
		width: 25px;
		border: 1px solid #333;
		background-color: #eee;
	}
	
	/* On mouse-over, add a grey background color */
	&:hover input ~ .checkmark {
		background-color: #ccc;
	}
	
	/* When the checkbox is checked, add a blue background */
	input:checked ~ .checkmark {
		background-color: #2196F3;
		border: 0px;
	}
	
	/* Create the checkmark/indicator (hidden when not checked) */
	.checkmark:after {
		content: "";
		position: absolute;
		display: none;
	}
	
	/* Show the checkmark when checked */
	input:checked ~ .checkmark:after {
		display: block;
	}
	
	/* Style the checkmark/indicator */
	.checkmark:after {
		left: 9px;
		top: 5px;
		width: 5px;
		height: 10px;
		border: solid white;
		border-width: 0 3px 3px 0;
		transform: rotate(45deg);
	}

}