input:where(:not(.form-check-input)), select, textarea, .input
{
	text-align: inherit;
	all: unset;
	cursor: auto;
	background: var(--bs-body-bg);
	border: 0.0625em solid darkgray;
	border-radius: 1em;
	padding: 0.5em 1em;
	outline: none;
	transition: border-color linear 0.25s;
	box-shadow: 100vmax 100vmax var(--bs-body-bg) inset !important;
}

	input:where(:not(.form-check-input)):disabled, select:disabled, textarea:disabled
	{
		background: var(--bs-secondary-bg);
		box-shadow: 100vmax 100vmax var(--bs-secondary-bg) inset !important;
	}

	select:not([multiple])
	{
		cursor: pointer;
		background: right no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 0 6 2" fill="%23000D"><path d="M -1 0 H 1 L 0 2" /></svg>');
		background-size: auto 0.5em;
		padding-right: 2em;
		text-align-last: center;
	}

	/* Tema escuro: só a imagem da seta muda; posição e tamanho herdam da regra acima. */
	[data-bs-theme="dark"] select:not([multiple])
	{
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 0 6 2" fill="%23FFFD"><path d="M -1 0 H 1 L 0 2" /></svg>');
	}

	/* O interior dos selects é pintado por box-shadow (o background real fica transparente);
	   sem cor explícita nas opções, a lista aberta pode sair clara com texto claro no tema
	   escuro em navegadores que derivam o popup do background do select. */
	select:where(:not(.form-check-input)) option
	{
		background: var(--bs-body-bg);
		color: var(--bs-body-color);
	}

	input:where(:not(.form-check-input)):focus,
	label:hover.label-input[type="radio"],
	label:hover.label-input[type="checkbox"],
	select:hover,
	input[type="radio"]:where(:not(.form-check-input)):hover,
	input[type="checkbox"]:where(:not(.form-check-input)):hover,
	textarea:focus
	{
		border-color: darkcyan;
	}

	input[type="radio"]:where(:not(.form-check-input)),
	input[type="checkbox"]:where(:not(.form-check-input))
	{
		appearance: none;
		padding: 0.5em;
		display: inline-block;
		vertical-align: middle;
		cursor: pointer;
		position: relative;
	}

	input[type="radio"]:where(:not(.form-check-input))
	{
		border-radius: 100%;
	}

	input[type="checkbox"]:where(:not(.form-check-input))
	{
		border-radius: 0.25em;
	}

		/* O ::before desenha o estado marcado acima do box-shadow inset que pinta o fundo. */
		input[type="radio"]:where(:not(.form-check-input))::before,
		input[type="checkbox"]:where(:not(.form-check-input))::before
		{
			content: "";
			position: absolute;
			inset: 0;
			border-radius: inherit;
		}

		input[type="radio"]:where(:not(.form-check-input)):checked
		{
			border-color: darkcyan;
		}

		input[type="radio"]:where(:not(.form-check-input)):checked::before
		{
			background: radial-gradient(darkcyan 0% 30%, transparent 34%);
		}

		/* .form-check-input é estilizado pelo Bootstrap (checkboxes, radios e switches). */
		input[type="checkbox"]:where(:not(.form-check-input)):checked
		{
			border-color: darkcyan;
		}

		input[type="checkbox"]:where(:not(.form-check-input)):checked::before
		{
			background: darkcyan;
		}

		input[type="checkbox"]:where(:not(.form-check-input)):checked::after
		{
			content: "";
			position: absolute;
			inset: 0.22em;
			background: #FDFDFD;
			clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
		}

		input[type="radio"]:where(:not(.form-check-input)):focus-visible,
		input[type="checkbox"]:where(:not(.form-check-input)):focus-visible
		{
			outline: 0.125em solid darkcyan;
			outline-offset: 0.125em;
		}

button, .button
{
	font-size: inherit;
	border: none;
	text-decoration: none;
	all: unset;
	display: inline-block;
	cursor: pointer;
	background: #2B73B4;
	border-radius: 1em;
	padding: 0.5em 1em;
	outline: none;
	color: #FDFDFD;
	transition: 0.25s box-shadow;
	box-shadow: #000 0 0 0;
}

	button.secondary, .button.secondary
	{
		color: unset;
		background: var(--bs-body-bg);
		border: 0.125em solid #2B73B4;
		padding: calc(0.5em - 0.125em) calc(1em - 0.125em);
	}

	button:focus, button:hover,
	.button:focus, .button:hover
	{
		box-shadow: rgba(0, 0, 0, 0.6) 0 0 1em;
	}

fieldset
{
	border: 0.0625em solid #888;
	border-radius: 1em;
	padding: 1em 2em 2em;
	margin: 1em 0;
}

legend
{
	font-weight: bold;
}

textarea
{
	padding: 1em 1.25em;
	overflow-wrap: break-word;
}

.label-input
{
	display: inline-block;
}

	.label-input > :first-child, .label
	{
		pointer-events: none;
		transition: 0.25s ease;
		transition-property: transform, color, font-size;
		background: linear-gradient(var(--bs-body-bg), var(--bs-body-bg)) no-repeat;
		background-position: center;
		background-size: 100% 1.5em;
		padding: 0 0.5em;
		color: var(--bs-secondary-color);
		white-space: nowrap;
		display: flex;
		align-items: center;
		transform-origin: center left;
		transform: translatex(0.5em);
		margin: 0 2em 0 0;
	}

		.label-input > :first-child > img,
		.label > img
		{
			margin-right: 0.5em;
		}

	.label-input:focus-within > :first-child
	{
		font-size: 75%;
		transform: translate(1em, -50%);
	}

	.label-input.preenchido > :first-child, .label
	{
		font-size: 75%;
		transform: translate(1em, -50%);
	}

	.label-input:focus-within > :first-child
	{
		color: darkcyan;
	}

	.label-input > :first-child + *
	{
		padding: 0.75em 1em;
		text-align: left;
		justify-self: stretch;
	}

button.large, .button.large
{
	padding: 0.75em 1em;
}

	button.large.secondary,
	.button.large.secondary
	{
		padding: calc(0.75em - 0.125em) calc(1em - 0.125em);
	}

.label-input
{
	display: grid;
	align-items: stretch;
	justify-items: start;
}

	.label-input > *
	{
		grid-row: 1;
		grid-column: 1;
	}

	.label-input > :first-child + *
	{
		text-align: left;
		text-align-last: left;
	}

#sino-button
{
	all: unset;
	position: relative;
	cursor: pointer;
	display: inline-flex;
	padding: 0 8px;
	background: transparent;
}