@charset "UTF-8";

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


form .inline {
	gap:1em;
}

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

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

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

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

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

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

input,
textarea,
select {
	position: relative;
	display: inline-flex;
	width: auto;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	padding: 0 1.5em;
	border: 0;
	background: var(--bright-color);
	border-radius: 2em;
}
input,
select {
	min-height:3em;
}
textarea {
	resize: none;
	min-height: 6em;
}
input[type="number"] {
	text-align: center;
	width: auto;
}
select,
input[type=submit],
button {
	cursor: pointer;
}

/********** IN FORM **********/

form input,
form textarea,
form button,
form select {
	width: 100%;
}

form hr + * {
	margin-top: 0;
}

/********** 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: inherit;
	opacity: .5;
}
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;
}

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

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

/*******************************/
/********** SEARCHBAR **********/
/*******************************/

form.searchbar {
	filter: drop-shadow(0 0 .5em rgba(var(--dark-rgb), .25));
}

/********** @MEDIA **********/

/** desktop **/
@media (min-width: 760px) {
	form.searchbar {
		font-size: 1.25em;
	}
}

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

input[type="radio"],
input[type="checkbox"] {
	display: inline-flex;
	height: 1.25em;
	width: 1.25em;
	padding: 0 !important;
	cursor: pointer;
	color: var(--light-color);

	border: solid 1px;
	min-height:auto;
}
input[type="radio"] {
	border-radius: 50%;
}
input[type="checkbox"] {
	border-radius: .25em;
}
/*
input[type="radio"]:hover,
input[type="radio"]:checked,
input[type="checkbox"]:hover,
input[type="checkbox"]:checked {
	color:var(--accent-color);
	border-color: var(--dark-color);
}
*/
input[type="radio"] + label,
input[type="checkbox"] + label {
	cursor: pointer;
}
input[type="radio"]:before,
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(--accent-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");
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	pointer-events: none;
}

input[type="radio"]:hover:before,
input[type="radio"]:checked:before,
input[type="checkbox"]:hover:before,
input[type="checkbox"]:checked:before {
	opacity: 1;
}



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

label {
	display: inline-block;
	font-size: 1em;
	line-height: 1em;
	width: 100%;
}

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

/* in navigation.css */

/********************************/
/********************************/
/********** CONTAINERS **********/
/********************************/
/********************************/

/* form-container for custom input */

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

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

/**********************************/
/********** INPUT SEARCH **********/
/**********************************/

.form-container input[type="search"] {
	padding-right: 3em;
}
.form-container input[type="search"] + button {
	position: absolute;
	z-index: 10;
	top: 50%;
	right: 0;
	height: 100%;
	aspect-ratio: 1/1;
	font-size: 1em;
	text-align: center;
	margin: 0;
	border: 0;
	width: 3em;
	padding:1em;
	background: var(--accent-color);
	border-radius: 0 2em 2em 0;
	transform: translate3d(0, -50%, 0);
}
.form-container input[type="search"] + button:hover {
	color: var(--accent-color);
	background: var(--dark-color);
}

/********************************/
/********** INPUT FILE **********/
/********************************/

/* hide input and <label> as button */

.form-container input[type="file"] {
	opacity: 0;
	position: absolute;
	inset:0;
	z-index: 10;
	cursor: pointer;
}
.form-container input[type="file"] + label {
	position:relative;
	display:inline-flex;
	align-items: center;
	justify-content: center;
	gap:1em;
	font-size: var(--body-font-size);
	padding:1em;
	color:var(--dark-color);
	background:var(--accent-color);
	border-radius: 2em;
	cursor: pointer;
	white-space: nowrap;
}
.form-container input[type="file"]:hover + label {
	color:var(--accent-color);
	background:var(--dark-color);
}
.form-container input[type="file"] + label > * {
	margin: 0;
}

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

/* altered by choices.js */

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