:root {
/* general */
--form_font: 'Euclid Circular B', sans-serif;
--form_gap_x: 1.2rem;
--form_gap_y: 1.8rem;
--form_borderradius: 0.6rem;
--form_rowheight: 5rem;
--form_error_color: #df3069;

/* input */
--input_fontsize: 1.4rem;
--input_fontweight: 400;
--input_letterspacing: 0.01em;
--input_padding: 1.5rem;
--input_color: var(--font_dark);
--input_color_hover: inherit;
--input_color_focus: var(--prim_125);
--input_bg: hsl(226deg 28% 97%);
--input_bg_hover: white;
--input_bg_focus: white;
--input_borderwidth: 1px;
--input_bordercolor: hsl(226deg 10% 80% / 0%);
--input_bordercolor_hover: hsl(226deg 10% 80% / 80%);
--input_bordercolor_focus: var(--prim);
--input_boxshadow: none;
--input_boxshadow_hover: none;
--input_boxshadow_focus: none;
--input_transition: 0.15s;	
--placeholder_color: hsl(226deg 15% 60%);
--placeholder_fontweight: var(--input_fontweight);

/* textarea */
--textarea_fontsize: var(--input_fontsize);
--textarea_lineheight: 1.3em;
--textarea_padding_y: 0.85em;

/* submit */
--submit_height: 5.0rem;
--submit_fontsize: 1.4rem;
--submit_fontweight: 400;
--submit_letterspacing: 0.015em;
--submit_color: white;
--submit_color_hover: white;
--submit_color_focus: black;
--submit_bg: var(--prim_250);
--submit_bg: #3f4c64;
--submit_bg_hover: var(--prim);
--submit_bg_hover: var(--prim_250);
--submit_bg_active: rgb(var(--prim_rgb) / 80%);
--submit_border: none;
--submit_border_hover: var(--submit_border);
--submit_border_focus: var(--submit_border);
--submit_spinner_prim: white;
--submit_spinner_scnd: rgba(255,255,255,0.4);

/* option */
--option_fontsize: 1.4rem;
--option_fontweight: 400;
--option_lineheight: 1.5em;
--option_letterspacing: 0.01em;
--option_color: var(--font_dark);
--option_margin_y: 0.2rem;
--option_bg: var(--input_bg);
--option_bg_hover: white;
--option_bg_checked: var(--prim_250);
--option_border: 1px solid hsl(226deg 10% 80% / 80%);
--option_border_hover: 1px solid var(--prim);
--option_border_checked: 1px solid rgba(0,0,0,0.22);

/* label */
--label_fontsize: 1.5rem; /* not .moving_label label */
--label_fontweight: 375; /* at .moving_label label moved only */
--label_letterspacing: 0.02em; /* at .moving_label label moved only */
--label_color: var(--prim_125); /* at .moving_label moved only */
--label_position: relative; /* not .moving_label label, relative decreases input-height */
--label_moved_bg: white;
--label_required_color: var(--prim);
}

form.grid12 {
	grid-auto-rows: minmax(var(--form_rowheight), auto);
	grid-gap: var(--form_gap_y) var(--form_gap_x);
	grid-auto-flow: inherit;
}
form.grid12 > div {
	position: relative;
}
form > .icol {
    display: flex;
    flex-direction: column-reverse;
	align-items: flex-start;
}
form > .icol.submit {
	grid-column-start: 1;
	padding-top: calc(var(--form_rowheight) / 3);
}
input.form_error, textarea.form_error, select.form_error {
	border: max(var(--input_borderwidth), 1px) solid var(--form_error_color) !important;
}
fieldset.form_error input + em {
	color: var(--form_error_color);
}
.icol.margin_top {
	margin-top: var(--form_gap_y);
}
.icol.margin_bottom {
	margin-bottom: var(--form_gap_y);
}
.icol.margin {
	margin: var(--form_gap_y) 0;
}
.icol.straight {
	flex-direction: column;
}
.grecaptcha-badge {
	visibility: hidden;
}

/* #input, textarea, select */
input:not([type="checkbox"]):not([type="radio"]), textarea, select, button {
	font-family: var(--form_font);
	width: 100%;
	height: 100%;
	position: relative;
	float: left;
	display: block;
	margin: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none !important;
	appearance: none !important;
	outline: none !important;
	transition: var(--input_transition);
}
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), textarea, select {
	font-size: var(--input_fontsize);
	font-weight: var(--input_fontweight);
	letter-spacing: var(--input_letterspacing);
	padding: 0 var(--input_padding);
	color: var(--input_color);
	background-color: var(--input_bg);
	border: var(--input_borderwidth) solid var(--input_bordercolor);
	border-radius: var(--form_borderradius);
	-webkit-box-shadow: var(--input_boxshadow);
	box-shadow: var(--input_boxshadow);
}
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):hover, textarea:hover, select:hover {
	color: var(--input_color_hover);
	background-color: var(--input_bg_hover);
	border: var(--input_borderwidth) solid var(--input_bordercolor_hover);
	-webkit-box-shadow: var(--input_boxshadow_hover);
	box-shadow: var(--input_boxshadow_hover);
	transition: none;
}
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus, textarea:focus {
	color: var(--input_color_focus);
	background-color: var(--input_bg_focus);
	border: var(--input_borderwidth) solid var(--input_bordercolor_focus);
	-webkit-box-shadow: var(--input_boxshadow_focus);
	box-shadow: var(--input_boxshadow_focus);
	transition: var(--input_transition);
}
textarea {
	resize: none;
	font-size: var(--textarea_fontsize);
	padding: var(--textarea_padding_y) var(--input_padding);
	line-height: var(--textarea_lineheight);
	overflow: auto;
}
select {
	background-image: URL('../_gfx/form_select.svg');
	background-repeat: no-repeat;
	background-size: 6px 4px;
	background-position: right 12px center;
	cursor: pointer;
}
/* /input, textarea, select */

/* #label */
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) + label, textarea + label, select + label {
	position: var(--label_position);
    top: 0;
	left: var(--input_borderwidth);
    margin: 0 var(--input_padding);
	font-size: var(--label_fontsize);
	font-weight: var(--label_fontweight);
	letter-spacing: var(--label_letterspacing);
	color: var(--label_color);
	pointer-events: none;
	white-space: nowrap;
	z-index: 1;
}
.choice_label {
	position: relative;
	width: 100%;
	display: inline-block;
	font-size: 2rem;
	margin: 0 0 0.5em 0;
}
[required] + label:not(.option):after, .choice_label.required:after {
	content: ' *';
	color: var(--label_required_color);
}
/* /label */

/* #moving label */
form.moving_label input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) + label,
form.moving_label textarea + label,
form.moving_label select + label,
form.moved_label input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) + label,
form.moved_label textarea + label,
form.moved_label select + label,
form.moving_label label.moved_label {
	position: absolute;
	top: var(--input_borderwidth);
	border-radius: 0.3em;
	transform-origin: center left;
	font-size: var(--input_fontsize);
	font-weight: var(--input_fontweight);
	letter-spacing: var(--input_letterspacing);
	color: var(--placeholder_color);
	-webkit-transform: translateY(calc(var(--form_rowheight) / 2 - 50% - var(--input_borderwidth)));
	transform: translateY(calc(var(--form_rowheight) / 2 - 50% - var(--input_borderwidth)));
	transition: var(--input_transition);
}
form.moving_label textarea + label {
	-webkit-transform: translateY(var(--textarea_padding_y));
	transform: translateY(var(--textarea_padding_y));
	line-height: var(--textarea_lineheight);
}
form.moving_label input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not(:placeholder-shown) + label,
form.moving_label textarea:not(:placeholder-shown) + label,
form.moving_label select + label,
form.moved_label input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) + label,
form.moved_label textarea + label,
form.moved_label select + label,
form.moving_label label.moved_label {
	top: 0 !important;
	font-weight: var(--label_fontweight) !important;
	letter-spacing: var(--label_letterspacing) !important;
	line-height: 1.2em !important;
	color: var(--label_color) !important;
	background-color: var(--label_moved_bg) !important;
	-webkit-box-shadow: -0.3em 0 0 var(--label_moved_bg), 0.3em 0 0 var(--label_moved_bg) !important;
	box-shadow: -0.3em 0 0 var(--label_moved_bg), 0.3em 0 0 var(--label_moved_bg) !important;
	-webkit-transform: translateY(-50%) scale(0.85) !important;
	transform: translateY(-50%) scale(0.85) !important;
}
/* /moving label */


/* #submit */
input[type="submit"], button {
	width: auto;
	height: var(--submit_height);
	text-align: center;
	font-size: var(--submit_fontsize);
	font-weight: var(--submit_fontweight);
	letter-spacing: var(--submit_letterspacing);
	color: var(--submit_color);
	background-color: var(--submit_bg);
	border: var(--submit_border);
	padding: 0 5rem;
	transition: var(--input_transition);
	cursor: pointer;
	border-radius: var(--form_borderradius);
}
.icol button {
	min-width: 240px;
}
input[type="submit"]:hover, button:hover {
	color: var(--submit_color_hover);
	background-color: var(--submit_bg_hover);
	border: var(--submit_border_hover);
}
input[type="submit"]:active, button:active {
	color: var(--submit_color_focus);
	background-color: var(--submit_bg_active);
	border: var(--submit_border_focus);
}
input[type="submit"]:disabled, button:disabled {
	display: flex;
	justify-content: center;
    align-items: center;
	color: transparent;
	pointer-events: none;
	transition: 0s;
}
input[type="submit"]:disabled:after, button:disabled:after {
	content: "";
	position: absolute;
	width: 2rem;
	height: 2rem;
	border: 0.2rem solid var(--submit_spinner_scnd);
	border-bottom-color: var(--submit_spinner_prim);
	border-radius: 50%;
    -webkit-animation: spin 0.4s linear infinite;
            animation: spin 0.4s linear infinite;
}
@-webkit-keyframes spin {
	to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
	to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
button.ghost {
	font-size: 1.3rem;
    background-color: transparent;
    border: 1px solid;
	color: inherit;
	transition: 0s;
}
button.ghost:hover {
	color: var(--prim) !important;
}
button.small {
	height: calc(var(--submit_height) * 0.85);
}
/* /submit */

/* #option */
fieldset {
	margin: 0;
	padding: 0;
	border: none;
}
.option {
    width: 100%;
}
.option, .option em, .option i {
	display: inline-block;
	position: relative;
	cursor: pointer;
	overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.option em {
	position: relative;
	float: left;
	font-size: var(--option_fontsize);
	font-weight: var(--option_fontweight);
	font-style: normal !important;
	line-height: var(--option_lineheight);
	letter-spacing: var(--option_letterspacing);
	color: var(--option_color);
	margin: var(--option_margin_y) 0;
	padding-left: 1.5em;
	cursor: pointer;
}
.option i {
    position: absolute;
    display: inline-block;
	left: 0;
	top: calc(var(--option_lineheight) / 2);
	margin-right: 0.55em;
	background-color: var(--option_bg);
	border: var(--option_border);
	border-radius: 0.16em;
	-webkit-transform: transform: translateY(-50%);
	transform: translateY(-50%);
}
.option:hover i {
	border: var(--option_border_hover);
	background-color: var(--option_bg_hover);
}
.option input:checked + em i {
	background-color: var(--prim);
	border: var(--option_border_checked);
}
.option input[type=checkbox] + em i {
    width: 0.93em;
    height: 0.92em;
}
.option input[type=radio] + em i {
    width: 0.96em;
    height: 0.96em;
}
.option input[type=checkbox]:checked + em i {
	background-color: var(--option_bg_checked);
	background-image: url('data:image/svg+xml; utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" stroke="white" stroke-width="1.2" fill="none"><polyline points="7.5,2.8 3.9,6.4 2.5,5"/></svg>');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.option:hover input[type=checkbox]:checked + em i {
	opacity: 0.85;
}
.option input {
    padding: 0;
    margin: 0;
    position: absolute;
    z-index: -999999;
    left: -1em;
    width: 1px;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.option input[type=radio] + em i {
	border-radius: 50%;
}
.option input[type=radio]:checked + em i:after {
	content: "";
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: white;
	border: 0.3em solid var(--option_bg_checked);
    border-radius: 50%;
}
.option input:not(:checked) + em i:after {
	display: none;
}
.options_columns {
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.options_columns.oc50  .option { width: 50px; }
.options_columns.oc100 .option { width: 100px; }
.options_columns.oc150 .option { width: 150px; }
.options_columns.oc200 .option { width: 200px; }
.options_columns.oc250 .option { width: 250px; }
.options_columns.oc300 .option { width: 300px; }
/* /option */

/* #placeholder */
::-webkit-input-placeholder {
	color: var(--placeholder_color);
	font-weight: var(--placeholder_fontweight);
}
:-moz-placeholder { 
	color: var(--placeholder_color);
	font-weight: var(--placeholder_fontweight);
}
::-moz-placeholder {  
	color: var(--placeholder_color);
	font-weight: var(--placeholder_fontweight);
}
:-ms-input-placeholder {  
	color: var(--placeholder_color);
	font-weight: var(--placeholder_fontweight);
}
/* /placeholder */

@media screen and (max-width: 650px) {
form.grid12 .col3 { grid-column: span 6; }
form.grid12 .col6 { grid-column: span 12; }
}

@media screen and (max-width: 506px) {
form.grid12 .col2 { grid-column: span 4; }
form.grid12 .col3 { grid-column: span 12; }
.icol.submit button {
	width: 100%;
}
}