input:not([type=checkbox]):not([type=radio]),
.input,
input-with-icons,
textarea,
select,
button,
.button,
.bullet { display: inline-block; padding: 1rem; background: rgba(255,255,255,.05); color: var(--light); border-radius: .5rem; border: .2rem solid transparent; }
button, .button { cursor: pointer; text-align: center; padding: 1rem 2rem; background: var(--blue-dark); color: var(--dark);  }
button.inverted,
.button.inverted,
.bullet { background: transparent; border-color: var(--blue-dark); color: var(--blue-dark); }
.bullet { text-transform: uppercase; display: inline-block; padding: 0 1rem .3rem 1rem; }
input:focus-visible { outline: none; box-shadow: 0 0 .5rem var(--blue-dark); }

input-with-icons { display: flex; }
input-with-icons input:not([type="checkbox"]):not([type="radio"]) { width: 100%; padding: 0; background: transparent; color: inherit; border: 0 none; }
input-with-icons input:focus-visible { outline: 0 none; }
input-with-icons:focus-within { outline: .2rem solid var(--focus-outline-color); }

input[type=checkbox] { display: none; min-width: 0; }
input[type=checkbox] + span { text-align: center; vertical-align: middle; display: inline-block; border: 2px solid transparent; width: 2.4rem; height: 2.4rem; border-radius: .5rem; background: rgba(255,255,255,.1); }
input[type=checkbox]:checked + span::before { vertical-align: top; content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }

.errors, error-messages { background: #800000; padding: 2rem; border-radius: .5rem; }
.infos, info-messages { background: #008000; padding: 2rem; border-radius: .5rem; }
.warnings, warning-messages { background: #FF8000; padding: 2rem; border-radius: .5rem; }

input-group { display: flex; }
input-group > *,
.input-group > * { border-radius: 0; }
input-group > :first-child,
.input-group > :first-child { border-radius: .5rem 0 0 .5rem !important; }
input-group > :last-child,
.input-group > :last-child { border-radius: 0 .5rem .5rem 0 !important; }

form.standard { display: flex; flex-direction: column; gap: 2rem; }
form.standard > * { margin: 0; }
form-field { display: flex; flex-direction: column; }
form-field * { flex-grow: 1; margin: 0; }

.dialog,
.dialogue { margin: auto; display: flex; flex-direction: column; gap: 2rem; }
.dialog form-field,
.dialogue form-field { display: flex; flex-direction: column; }