/* FORMS AND BUTTONS */
/* -------------------------------------------------------------- */
input,
button,
textarea,
select {
	font: inherit;
}

/* Text-like inputs, textareas and selects are inline-block with no
   forced width and no margin, same as buttons below. Sizing and
   spacing is left to whatever layout (flexbox/grid) wraps them --
   see .form-row, which stretches these to full width for you. */
input[type=text],
input[type=number],
input[type=email],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=month],
input[type=search],
input[type=time],
input[type=url],
input[type=week],
input[type=date],
textarea,
select {
	display: inline-block;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-size: 90%;
	color: var(--color-text, #555);
	background-color: var(--color-body-bg, #fff);
	border: 1px solid var(--color-border, #ccc);
}

input[type=text],
input[type=number],
input[type=email],
input[type=tel],
input[type=password],
input[type=datetime-local],
input[type=month],
input[type=search],
input[type=time],
input[type=url],
input[type=week],
input[type=date] {
	height: var(--control-height, 40px);
	padding: 0 var(--input-padding-inline, 10px);
}

textarea {
	height: var(--control-height-textarea, 150px);
	padding: 10px;
	resize: none;
}

select {
	height: var(--control-height, 40px);
	padding: 0 var(--input-padding-inline, 10px);
}

.standard-button {
	line-height: var(--control-height, 40px);
}

.standard-button,
a.standard-button:link,
a.standard-button:visited,
a.standard-button:hover,
a.standard-button:active,
button,
input[type=button],
input[type=submit],
input[type=reset] {
	display: inline-block;
	margin: 0;
	padding: 0 var(--control-padding-inline, 20px);
	height: var(--control-height, 40px);
	color: var(--color-on-brand, #fff);
	font-size: 90%;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	background-color: var(--color-primary, #0092ff);
	border: none;
	border-radius: var(--control-radius, 3px);
	cursor: pointer;
}

.standard-button:hover,
a.standard-button:hover,
a.standard-button:active,
button:hover,
button:active,
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover,
input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active {
	color: var(--color-on-brand, #fff);
	background-color: var(--color-primary-hover, #0266c2);
}

a.standard-button.disabled-button,
button:disabled,
input[type=button]:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled {
	color: var(--color-disabled-text, #a6a6a6);
	background-color: var(--color-disabled-bg, #ddd);
	cursor: not-allowed;
	pointer-events: none;
}

.secondary-button,
a.standard-button.secondary-button:link,
a.standard-button.secondary-button:visited,
a.standard-button.secondary-button:hover,
a.standard-button.secondary-button:active,
button.secondary-button,
input[type=button].secondary-button,
input[type=submit].secondary-button,
input[type=reset].secondary-button {
	color: var(--color-on-brand, #fff);
	background-color: var(--color-secondary, #555);
}

.standard-button.secondary-button:hover,
a.standard-button.secondary-button:hover,
a.standard-button.secondary-button:active,
button.secondary-button:hover,
button.secondary-button:active,
input[type=button].secondary-button:hover,
input[type=submit].secondary-button:hover,
input[type=reset].secondary-button:hover,
input[type=button].secondary-button:active,
input[type=submit].secondary-button:active,
input[type=reset].secondary-button:active {
	color: var(--color-on-brand, #fff);
	background-color: var(--color-secondary-hover, #0266c2);
}

.tertiary-button,
a.standard-button.tertiary-button:link,
a.standard-button.tertiary-button:visited,
a.standard-button.tertiary-button:hover,
a.standard-button.tertiary-button:active,
button.tertiary-button,
input[type=button].tertiary-button,
input[type=submit].tertiary-button,
input[type=reset].tertiary-button {
	color: var(--color-tertiary, #0092ff);
	background-color: transparent;
	border: 3px solid var(--color-tertiary, #0092ff);
}

.standard-button.tertiary-button:hover,
a.standard-button.tertiary-button:hover,
a.standard-button.tertiary-button:active,
button.tertiary-button:hover,
button.tertiary-button:active,
input[type=button].tertiary-button:hover,
input[type=submit].tertiary-button:hover,
input[type=reset].tertiary-button:hover,
input[type=button].tertiary-button:active,
input[type=submit].tertiary-button:active,
input[type=reset].tertiary-button:active {
	color: var(--color-on-brand, #fff);
	background-color: var(--color-tertiary-hover, #0266c2);
	border-color: var(--color-tertiary-hover, #0266c2);
}

label {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: bold;
}

input[type=checkbox] + label,
input[type=radio] + label {
	display: inline;
	font-weight: normal;
}

/* .form-row is the layout unit: it stacks a label/control/help text
   as a flex column and uses gap for spacing, so none of the elements
   above need their own margin. Because flex columns stretch their
   children by default, inputs/selects/textareas also don't need a
   hardcoded width: 100% -- they fill the row automatically. */
.form-row {
	display: flex;
	flex-direction: column;
	gap: var(--control-gap, 8px);
	margin: 0 0 25px 0;
}

.field-error {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	padding: 7px 15px;
	color: var(--color-error-text, #C62828);
	font-size: 85%;
	line-height: 150%;
	background-color: var(--color-error-bg, #ffe6e9);
	border-bottom: 1px solid var(--color-border, #ccc);
}

/* Self-contained warning icon (inline SVG data URI) -- avoids relying
   on an external image asset that isn't shipped with the framework. */
.field-error::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C62828' d='M12 2 1 21h22L12 2zm0 15a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zm-1-8h2v6h-2V9z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 16px 16px;
}

.separator {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 1px;
	background-color: var(--color-border, #ccc);
}

.field-help {
	margin: 0;
	font-size: 90%;
	color: var(--color-muted, #777);
}

/* .button-bar lays buttons out with flexbox and uses gap for spacing,
   so buttons/links inside it never need their own margin. Stacks
   vertically on narrow screens, switches to a wrapping row from
   450px up. */
.button-bar {
	display: flex;
	flex-direction: column;
	gap: var(--control-gap, 8px);
}

.button-bar > * {
	width: 100%;
}

.button-bar.button-bar-justify-items-center {
	justify-content: center;
}

.button-bar.button-bar-justify-items-right {
	justify-content: flex-end;
}

@media only screen and (min-width: 450px) {
	.button-bar {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.button-bar > * {
		width: auto;
	}

	.separator {
		width: 1px;
		height: var(--control-height, 40px);
	}
}

button.progress-button,
.standard-button.progress-button {
	background-image: repeating-linear-gradient(135deg,
			transparent 0 5%,
			rgba(0, 0, 0, 0.15) 5% 10%);
	background-size: 200px 200px;
	background-position: 0% 0%;
	animation: progress-animation 5s linear infinite;
	cursor: pointer;
	border-radius: 6px;
}

@keyframes progress-animation {
	0% {
		background-position: 0px 0%;
	}

	100% {
		background-position: 200px 0%;
	}
}

button.progress-button-success,
.standard-button.progress-button-success {
	color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFF' d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}