:root {
/* general */
--form_font: inherit;
--form_gap_x: 1.0rem;
--form_gap_y: 2.6rem;
--form_borderradius: var(--br);
--form_rowheight: 5.6rem;
--form_error_color: var(--fail);

/* input */
--input_fontsize: 1.4rem;
--input_fontweight: 400;
--input_letterspacing: 0;
--input_padding: 2.0rem;
--input_color: var(--font);
--input_color_hover: var(--prim);
--input_color_focus: var(--prim);
--input_bg: hsl(230deg 28% 96%);
--input_bg_hover: hsl(230deg 28% 97%);
--input_bg_focus: white;
--input_borderwidth: 1px;
--input_bordercolor: transparent;
--input_bordercolor_hover: transparent;
--input_bordercolor_focus: #cbd0e9;
--input_boxshadow: none;
--input_boxshadow_hover: none;
--input_boxshadow_focus: none;
--input_transition: 0.15s;	
--placeholder_color: hsl(230deg 16% 62%);
--placeholder_fontweight: var(--input_fontweight);

/* textarea */
--textarea_fontsize: var(--input_fontsize);
--textarea_lineheight: 1.8em;
--textarea_padding_y: 1.4em;

/* submit */
--submit_height: 5.5rem;
--submit_fontsize: 1.4rem;
--submit_fontweight: 400; /*500*/
--submit_letterspacing: 0.01em;
--submit_color: white;
--submit_color_hover: white;
--submit_color_focus: white;
--submit_bg: var(--prim);
--submit_bg_hover: var(--prim400);
--submit_bg_active: var(--prim600);
--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.3rem;
--option_fontweight: 400;
--option_lineheight: 1.3em;
--option_letterspacing: 0.02em;
--option_color: var(--font);
--option_margin_y: 0;
--option_bg: var(--input_bg);
--option_bg_hover: white;
--option_bg_checked: var(--prim);
--option_border: 1px solid var(--input_bordercolor);
--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: var(--input_fontweight); /* at .moving_label label moved only */
--label_letterspacing: var(--input_letterspacing); /* at .moving_label label moved only */
--label_color: var(--prim); /* 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-auto-rows: auto;
	grid-gap: var(--form_gap_y) var(--form_gap_x);
	grid-auto-flow: inherit;
}
form.grid12 > div {
	position: relative;
}
.icol {
	position: relative;
    display: flex;
    flex-direction: column-reverse;
	align-items: flex-start;
	transition: opacity 0.25s;
}
.icol.submit {
	grid-column-start: 1;
	padding-top: 1rem;
}
.icol.disabled, input:disabled, textarea:disabled, select:disabled {
	--form_error_color: transparent;
	pointer-events: none;
	opacity: 0.4;
}
textarea:read-only, textarea:read-only:hover, textarea:focus:read-only {
	--input_bg: white;
	--input_bg_hover: white;
	--input_bordercolor_hover: var(--b);
	--input_bordercolor: var(--b);
	cursor: auto;
}
.icol.submit.disabled {
    opacity: 1;
    --submit_bg: hsl(230deg 13% 58%);
    /*--submit_color: hsl(230deg 13% 13%);*/
}
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;
}
.icol.oneline {
	flex-direction: row;
    align-items: center;
	min-height: calc(var(--form_rowheight) / 1.5);
}
.icol.center {
	align-items: center;
}
.grecaptcha-badge {
	visibility: hidden;
}

/* #input, textarea, select */
input:not([type="checkbox"]):not([type="radio"]), textarea, select, button, a.button {
	font-family: var(--form_font);
	width: 100%;
	height: 100%;
	height: var(--form_rowheight);
	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);
}

.uninput {
	--form_rowheight: 6.4rem;
	--input_bg: white;
	--input_bg_hover: white;
	--input_bordercolor_hover: hsl(230deg 28% 80%);
}
.uninput label {
	margin: 0 !important;
	width: 100% !important;
	text-align: center;
	transform-origin: center !important;
}
.uninput [required] + label:not(.option):after {
	content: none;
}
.uninput input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
	border-radius: 0 !important;
	border-left-color: transparent !important;
	border-top-color: transparent !important;
	border-right-color: transparent !important;
	border: var(--input_borderwidth) solid var(--b);
	text-align: center;
}

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 {
	height: calc(var(--form_rowheight) * 2.5);
	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 var(--input_padding) center;
	cursor: pointer;
}
/* /input, textarea, select */

/* #label */
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) + label, textarea + label, select + label {
	font-family: var(--form_font);
	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: 1.8rem;
	font-weight: 500;
	margin: 0 0 1em 0;
}
[required] + label:not(.option):after, .choice_label.required:after {
    content: '*';
    color: var(--label_required_color);
    position: absolute;
    margin-left: 0.25em;
}
/* /label */

/* #moving label */
.moving_label input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) + label,
.moving_label textarea + label,
.moving_label select + label,
.moved_label input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) + label,
.moved_label textarea + label,
.moved_label select + label,
.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) cubic-bezier(0, 0, 0.2, 1);
}
.moving_label textarea + label {
	-webkit-transform: translateY(var(--textarea_padding_y));
	transform: translateY(var(--textarea_padding_y));
	line-height: var(--textarea_lineheight);
}
.moving_label input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not(:placeholder-shown) + label,
.moving_label textarea:not(:placeholder-shown) + label,
.moving_label select + label,
.moved_label input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) + label,
.moved_label textarea + label,
.moved_label select + label,
.moving_label label.moved_label {
	font-weight: var(--label_fontweight) !important;
	letter-spacing: var(--label_letterspacing) !important;
	color: var(--label_color) !important;
	background-color: var(--label_moved_bg) !important;
	line-height: inherit;
	-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.88) !important;
	transform: translateY(-50%) scale(0.88) !important;
}
/* /moving label */

/* #submit */
input[type="submit"], button, a.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);
	line-height: 1.4em;
	color: var(--submit_color);
	background-color: var(--submit_bg);
	border: var(--submit_border);
	border-radius: var(--form_borderradius);
	padding: 0 8rem;
	transition: var(--input_transition);
	cursor: pointer;
}
input[type="submit"]:hover, button:hover, a.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 {
    --border: 1px solid transparent;
    --submit_bg: var(--prim);
	display: flex;
	justify-content: center;
    align-items: center;
	color: transparent;
	pointer-events: none;
	transition: 0s;
}
input[type="submit"]:disabled:after, button:disabled:after, .load:before {
	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-box-sizing: border-box;
	box-sizing: border-box;
    -webkit-animation: spin 0.4s linear infinite;
            animation: spin 0.4s linear infinite;
}
button.ghost:disabled:after {
	border-bottom-color: var(--prim);
}
button.ghost:disabled > * {
	color: transparent;
}
@-webkit-keyframes spin {
	to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
	to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
a.button {
    display: flex;
	align-items: center;
    justify-content: center;
}
a.button:hover {
    text-decoration: none;
}
button.ghost {
    background-color: transparent !important;
    border: 1px solid;
	color: var(--prim);
	font-weight: 400;
	transition: 0s;
}
button.ghost:hover {
	color: var(--font) !important;
}
button.small {
	height: calc(var(--submit_height) * 0.85);
}
button.smaller {
	height: auto;
	font-size: 1.2rem;
	font-weight: 500;
	padding: 0.75em 1em;
}
button.warning {
	background-color: var(--scnd);
}
button.warning:hover {
	background-color: var(--scnd400);
}
button.ghost.warning {
	color: var(--scnd);
}
button.success {
	background-color: var(--success);
}
button.ghost.success {
	color: var(--success);
}
button.knob {
	border-color: transparent;
	padding: 0.75em 0;
}
button * {
	pointer-events: none;
}
/* /submit */

/* #option */
fieldset {
	margin: 0;
	padding: 0;
	border: none;
	padding: 3rem 4rem;
    /*background-color: var(--graylight);*/
	border: 1px solid var(--prim);
	border-radius: var(--br);
}
fieldset .option.bool {
	padding: 0.5rem 0;
}
.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: 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.92em;
    height: 0.92em;
}
.option input[type=radio] + em i {
    width: 0.96em;
    height: 0.96em;
}
@media not screen and (-webkit-min-device-pixel-ratio: 2), not screen and (min-resolution: 192dpi) {
:root {
	--option_input: calc(var(--option_fontsize) - 1px);
}
.option input[type=checkbox] + em i, .option input[type=radio] + em i {
    width: var(--option_input);
    height: var(--option_input);
}
}
.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 .option.bool {
	width: 100%;
}
.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 */

/* bool */
.option.bool {
	--bool_handle_width: 2.1rem;
	width: auto;
}
.option.bool em i {
    position: relative;
    display: block;
    min-width: calc(var(--bool_handle_width) * 1.8) !important;
	height: auto !important;
    top: auto;
    left: auto;
    padding: 0.2rem;
	border-color: transparent;
    border-radius: 5rem;
    -webkit-box-sizing: content-box;
	box-sizing: content-box;
    background-color: hsl(225deg 25% 94%);
    -webkit-transform: none;
    transform: none;
}
.option.bool em {
	font-size: var(--option_fontsize);
	padding: 0;
	display: flex;
    flex-direction: row;
    align-items: center;
}
.option.bool em:hover {
	color: var(--prim);
}
.option.bool em i:after {
	content: "";
	display: block !important;
    position: relative;
    width: var(--bool_handle_width);
    height: var(--bool_handle_width);
    border-radius: 50%;
    background-color: white;
	-webkit-box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
    box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}
.option.bool em i, .option.bool em i:after {
	transition: 0.25s;
}
.option.bool input:checked + em i {
	border-color: transparent;
	background-image: none;
}
.option.bool input:checked + em:hover i {
	opacity: 1;
}
.option.bool input:checked + em i:after {
	-webkit-transform: translateX(80%);
	transform: translateX(80%);
}
/* /bool */

/* #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 (hover: hover) and (pointer: fine) {
.option.bool input + em:hover i:after {
	-webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%);
    box-shadow: 0 0 10px rgb(0 0 0 / 30%);
}
}
@media screen and (max-width: 880px) {
fieldset {
	padding: 2rem;
}
}
@media screen and (max-width: 740px) {
fieldset {
	padding: 5%;
}
}
@media screen and (max-width: 620px) {
:root {
	--input_padding: 1.8rem;
	--form_gap_y: 2.5rem;
	--form_rowheight: 5.1rem;
}
form.grid12 .col3:not(.keep_span) { grid-column: span 6; }
form.grid12 .col4:not(.keep_span) { grid-column: span 6; }
form.grid12 .col6:not(.keep_span) { grid-column: span 12; }
.icol.margin_top { margin-top: calc(var(--form_gap_y) / 2); }
.icol.margin_bottom { margin-bottom: calc(var(--form_gap_y) / 2); }
.icol.margin { margin: calc(var(--form_gap_y) / 2) 0; }
}

@media screen and (max-width: 506px) {
form.grid12 .col2:not(.keep_span) { grid-column: span 4; }
form.grid12 .col3:not(.keep_span) { grid-column: span 12; }
fieldset {
	padding: var(--input_padding);
}
}

@media screen and (max-width: 413px) {
:root {
	--form_gap_x: 0.75rem;
}
form.grid12 .col4:not(.keep_span) { grid-column: span 12; }
}