@charset "UTF-8";

/**
<button> defined in navigation.css
**/

/**************************/
/**************************/
/********** VARS **********/
/**************************/
/**************************/

:root {
	--form-gap: 1em;

	--input-height: 3em;
	--input-padding: 1em;
	--input-border-radius: 0;

	--input-placeholder-color: inherit;
	--input-placeholder-opacity: .5;
}

@media (max-width: 760px) {
	:root {
		--input-min-height: 3.5rem;
	}
}
@media (min-width: 760px) {
	:root {
		--input-min-height: 3.75rem;
	}
}

/**************************/
/**************************/
/********** FORM **********/
/**************************/
/**************************/

/*****************************/
/********** DEFAULT **********/
/*****************************/

form {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: var(--form-gap);
	font-size: var(--font-size);
	text-align: left;
	margin: 0 auto;
	width: 100%;
}

/******************************/
/********** FIELDSET **********/
/******************************/

fieldset {
	position: relative;
	border: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
fieldset legend {
	position: absolute;
	font-size: 0 !important;
	padding: 0 !important;
}

/****************************/
/****************************/
/********** INPUTS **********/
/****************************/
/****************************/

/**
inputs
**/

/*****************************/
/********** DEFAULT **********/
/*****************************/

input,
textarea,
select {
	position: relative;
	display: inline-flex;
	height: var(--input-height);
	width: auto;
	font-family: inherit;
	font-size: inherit;
	font-size: var(--font-size);
	line-height: 1;
	padding: var(--input-padding);
	border: solid var(--line-height);
	border-radius: var(--input-border-radius);
	background: var(--bright-color);
}
input,
select {
	min-height: var(--input-min-height);
}
textarea {
	resize: none;
	min-height: calc(var(--input-min-height) * 2);
}
select {
	cursor: pointer;
}

/***************************/
/********** TYPES **********/
/***************************/

input[type=submit] {
	cursor: pointer;
}
input[type="number"] {
	text-align: center;
	width: auto;
}

/******************************/
/********** BROWSERS **********/
/******************************/

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
:-webkit-input-placeholder,
:-moz-placeholder,
:-ms-input-placeholder {
	color: var(--input-placeholder-color);
	opacity: var(--input-placeholder-opacity);
}
input,
textarea,
button {
	-webkit-appearance: none;
	-moz-appearance: none;
}

/*************************************/
/********** CHROME AUTOFILL **********/
/*************************************/

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
	-webkit-text-fill-color: var(--dark-color) !important;
	-webkit-box-shadow: 0 0 0px 1000px var(--bright-color) inset;
	background-color: transparent;
}

/**************************************/
/**************************************/
/********** CHECKBOX / RADIO **********/
/**************************************/
/**************************************/

input[type="radio"],
input[type="checkbox"] {
	display: inline-flex;
	height: 1.25em;
	width: 1.25em;
	padding: 0 !important;
	cursor: pointer;
	/*box-shadow: inset 0 0 1em;*/
	border: solid var(--line-height);
	min-height: auto;
	aspect-ratio: 1/1;
}
input[type="radio"] {
	border-radius: 50%;
}
input[type="checkbox"] {
	 border-radius: .25em;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
	cursor: pointer;
}
input[type="radio"]:before,
input[type="checkbox"]:before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	pointer-events: none;
	transform: scale(.75);
}
input[type="radio"]:before {
	content: '';
	border-radius: 50%;
	background: var(--dark-color);
}
input[type="checkbox"]:before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='var(--dark-color)' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
}
input[type="radio"]:hover:before,
input[type="radio"]:checked:before,
input[type="checkbox"]:hover:before,
input[type="checkbox"]:checked:before {
	opacity: 1;
}

/*************************************/
/*************************************/
/********** SUBMIT / BUTTON **********/
/*************************************/
/*************************************/

/* in navigation.css */

/****************************/
/****************************/
/********** LAYOUT **********/
/****************************/
/****************************/

/**
form-container for custom input
**/

/*****************************/
/********** DEFAULT **********/
/*****************************/

.form-container {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
	width: 100%;
}
.form-container > * {
	margin: 0;
}

/***************************/
/********** LABEL **********/
/***************************/

/**
container for input
**/

label {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-size: 1em;
	line-height: 1;
}

/****************************/
/********** SELECT **********/
/****************************/

/* altered by choices.js */

.form-container select {
	padding-right: 3em;
}

/***************************/
/********** ICONS **********/
/***************************/
/* icon on input-container */

.form-container[class^="icon-"]:before,
.form-container[class*=" icon-"]:before {
	font-family: "icomoon";
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	aspect-ratio: 1/1;
	text-align: center;
	margin: 0;
	border: 0;
	background: none;
	transform: translate3d(0, -50%, 0);
	opacity: .5;
	pointer-events: none;
}
.form-container[class^="icon-"] input,
.form-container[class*=" icon-"] input {
	padding-left: calc(var(--font-size) * 3 + var(--line-height) * 3);
}

/****************************/
/********** INPUTS **********/
/****************************/

form input,
form textarea,
form button,
form select {
	width: 100%;
}
form hr + * {
	margin-top: 0;
}

/****************************/
/********** INLINE **********/
/****************************/

form .inline {
	flex-wrap: wrap;
	align-items: flex-start;
	width: 100%;
}
form .inline > * {
	flex-grow: 1;
	flex-basis: 0;
}

/****************************/
/****************************/
/********** CUSTOM **********/
/****************************/
/****************************/

/***************************/
/********** LOGIN **********/
/***************************/

.login-username,
.login-password,
.login-remember {
	width: 100%;
}