/* CHOICES */
form ul.choices label > span.label {
	font-weight:400;
	display: inline-block;
}
form ul.choices {
	list-style-type: none;
	transition:background-color .3s;
	border-radius:var(--border-radius);
	overflow: hidden;
}
form ul.choices > li {
	margin:.2em 0;
	padding:.2em;
	transition:background-color .3s;
	border-radius:var(--border-radius);
	clear:both;
	float:left;
}
form .inline-el ul.choices > li {
	padding:0;
}
form ul.choices > li.no-answer {
	margin-bottom:.4em;
}
form ul.choices > li.no-answer::after {
	position: absolute;
    content:'';
	border-bottom:1px dotted var(--border-color);
	width:100%;
	height: 0;
	left:0px;
	bottom:-.2em;
}
form ul.choices label {
	display: block;
}
form ul.choices label > span::after {
	display:none;
}
/* CHECKBOX, RADIO */
form input[type="checkbox"], form input[type="radio"] {
	position: absolute;
	opacity:0;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index: 1;
	cursor:pointer;
}
form input[type="checkbox"] + label, form input[type="radio"] + label {
	padding-left:calc(1em + 10px);
	transition:opacity .3s, color .3s;
	display: block;
}
form input[type="checkbox"] + label > span.label, form input[type="radio"] + label > span.label {
	display: block;
}
form input[type="checkbox"] + label > span.label::first-letter, form input[type="radio"] + label > span.label::first-letter {
	text-transform: uppercase;
}
form input[type="checkbox"] + label::before, form input[type="radio"] + label::before {
	position: absolute;
	content:'';
	transition:all .3s;
	border:1px solid var(--border-color);
	background: var(--bg-color);
	border-radius:var(--border-radius);
	width:var(--choice-size);
	height:var(--choice-size);
	left:0px;
	/*top:calc( ((1em + var(--line-height)) - (1em + 2px)) / 2 );*/
	top:var(--choice-top);
}
form input[type="checkbox"] + label::after, form input[type="radio"] + label::after {
	position: absolute;
    content:'';
	border-radius:var(--border-radius);
	background: var(--choice-face-color);
	width:0;
	height:0;
	left:calc( (var(--choice-size) - 4px) / 2 + 2px );
	top:calc( (var(--choice-size) - 4px) / 2 + 2px );
	transition:all .2s ease-in-out 0s;
	opacity:0;
}
form input[type="radio"] + label::after, form input[type="radio"] + label::before {
	border-radius:50%;
}
form ul.choices input:checked + label::after {
	width:calc( var(--choice-size) - 4px);
	height:calc( var(--choice-size) - 4px);
	left:2px;
	top:calc( var(--choice-top) + 2px );
	opacity:1;
}
form input[type="radio"][value=""] + label, form input[type="checkbox"][value=""] + label {
	color:var(--text-sub-color);
}
form input[type="radio"][value=""] + label::after, form input[type="checkbox"][value=""] + label::after {
	background: var(--text-sub-color) !important;
}
form input[type="radio"]:checked,
form input[type="radio"]:checked + label {
	pointer-events: none;
}

form ul.choices.check input[type="checkbox"] + label::after, 
form ul.choices.check input[type="radio"] + label::after,
form ul.choices.check input[type="checkbox"]:checked + label::after, 
form ul.choices.check input[type="radio"]:checked + label::after {
	background: var(--icon-check);
	width:var(--choice-size);
	height:var(--choice-size);
	left:0px;
	top:var(--choice-top);
}
/* ICON BASED */
form ul.choices.icons input[type="checkbox"] + label::after,
form ul.choices.icons input[type="checkbox"] + label::before,
form ul.choices.icons input[type="radio"] + label::after,
form ul.choices.icons input[type="radio"] + label::before  {
	display:none !important;
}
form ul.choices.icons span.icon {
	position: absolute;
	top:50%;
	transform:translateY(-50%) scale(.8);
	left:-5px;
	opacity:.4;
	transition:all .3s;
}
form ul.choices.icons input[type="radio"]:checked + label > span.icon,
form ul.choices.icons input[type="checkbox"]:checked + label > span.icon {
	color:var(--choice-face-color);
	opacity:1 !important;
}
form ul.choices.icons li:hover span.icon {
	color:var(--choice-face-color);
	opacity:.75;
}