/*--------------------
FORM
----------------------*/
label {
	font-size: 0.9rem;
	margin-bottom: 5px;
	display: block;
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 12px;
	color: var(--color-gra-4);
}

input[type="checkbox"],
input[type="radio"] {
	display: none;
}

input[type="checkbox"] ~ .check,
input[type="radio"] ~ .check {
	background-color: var(--color-gra-2);
	display: inline-block;
	height: 20px;
	width: 20px;
	border-radius: 20px;
	position: relative;
}

input[type="checkbox"]:checked ~ .check,
input[type="radio"]:checked ~ .check {
	background-color: var(--color-thr-2);
}

input[type="checkbox"]:checked ~ .check::after,
input[type="radio"]:checked ~ .check::after {
	content: '';
	height: 10px;
	width: 6px;
	border-right: solid 3px white;
	border-bottom: solid 3px white;
	display: block;
	position: absolute;
	box-sizing: border-box;
	transform: rotate(45deg);
	left: 7px;
	top: 4px;
}

input[type="checkbox"] ~ span,
input[type="radio"] ~ span {
	font-size: 1rem;
}

textarea {
	border: solid 1px var(--color-gra-3);
}

.checkbox-text ~ div input[type="text"] {
	display: none;
}