/*
The MIT License (MIT)

Copyright (c) 2024 Rahul (https://codepen.io/_rahul/pen/jOJRKzm)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
.ufc_search {
    --co-btn-bg: #111;
    --co-btn-text: #fff;
    --co-btn-active-bg: var(--universal-accent-color);
    --co-btn-active-text: var(--universal-accent-color-text);
    --co-btn-focus-bg: var(--universal-accent-color);
}

.ufc_light {
    --co-body-accent: var(--universal-accent-color);
    --co-body-accent-contrast: var(--universal-accent-color-text);
    --co-textfld-bg: #f9f9f9;
    --co-textfld-border: #bbb;
    --co-textfld-active-border: #ccc;
    --co-textfld-focus-border: var(--co-body-accent);
    --co-textfld-valid-border: hsl(140 50% 75%);
    --co-textfld-valid-active-border: hsl(140 50% 65%);
    --co-textfld-valid-focus-border: hsl(140 50% 50%);
    --co-textfld-invalid-border: hsl(20 65% 75%);
    --co-textfld-invalid-active-border: hsl(20 65% 65%);
    --co-textfld-invalid-focus-border: hsl(20 65% 50%);
    --co-btn-bg: var(--co-body-accent);
    --co-btn-text: var(--co-body-accent-contrast);
    --co-btn-active-bg: var(--universal-accent-color-dark);
    --co-btn-active-text: var(--universal-accent-color-text-dark);
    --co-btn-focus-bg: var(--universal-accent-color-dark);
    --co-select-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='15px' width='20px'%3E%3Ctext x='0' y='12' fill='rgba(0,0,0,1.0)'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
    --co-search-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27c1.2-1.4 1.95-3.31 1.95-5.4C16.38 5.36 13.02 2 9.25 2S2 5.36 2 9.13s3.36 7.13 7.13 7.13c2.09 0 3.99-.75 5.4-1.95l.27.28v.79l5 4.99L20.49 18l-4.99-5zm-6.37 0C6.36 14 4 11.64 4 9.13S6.36 4.25 8.87 4.25s4.88 2.36 4.88 4.88-2.36 4.87-4.88 4.87z' fill='rgba(0,0,0,1.0)'/%3E%3C/svg%3E");
}

.ufc_dark {
    --co-body-accent: var(--universal-accent-color);
    --co-body-accent-contrast: var(--universal-accent-color-text);
    --co-textfld-bg: #222;
    --co-textfld-border: #444;
    --co-textfld-active-border: #555;
    --co-textfld-focus-border: var(--co-body-accent);
    --co-textfld-valid-border: hsl(140 90% 20%);
    --co-textfld-valid-active-border: hsl(140 90% 30%);
    --co-textfld-valid-focus-border: hsl(140 90% 45%);
    --co-textfld-invalid-border: hsl(20 90% 20%);
    --co-textfld-invalid-active-border: hsl(20 90% 30%);
    --co-textfld-invalid-focus-border: hsl(20 90% 45%);
    --co-btn-bg: var(--co-body-accent);
    --co-btn-text: var(--co-body-accent-contrast);
    --co-btn-active-bg: var(--universal-accent-color-dark);
    --co-btn-active-text: var(--universal-accent-color-text-dark);
    --co-btn-focus-bg: var(--universal-accent-color-dark);
    --co-select-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='15px' width='20px'%3E%3Ctext x='0' y='12' fill='rgba(255,255,255,1.0)'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
    --co-search-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27c1.2-1.4 1.95-3.31 1.95-5.4C16.38 5.36 13.02 2 9.25 2S2 5.36 2 9.13s3.36 7.13 7.13 7.13c2.09 0 3.99-.75 5.4-1.95l.27.28v.79l5 4.99L20.49 18l-4.99-5zm-6.37 0C6.36 14 4 11.64 4 9.13S6.36 4.25 8.87 4.25s4.88 2.36 4.88 4.88-2.36 4.87-4.88 4.87z' fill='rgba(255,255,255,1.0)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: light) {
    :root {
        --co-body-accent: var(--universal-accent-color);
        --co-body-accent-contrast: var(--universal-accent-color-text);
        --co-textfld-bg: #fff;
        --co-textfld-border: #bbb;
        --co-textfld-active-border: #ccc;
        --co-textfld-focus-border: var(--co-body-accent);
        --co-textfld-valid-border: hsl(140 50% 75%);
        --co-textfld-valid-active-border: hsl(140 50% 65%);
        --co-textfld-valid-focus-border: hsl(140 50% 50%);
        --co-textfld-invalid-border: hsl(20 65% 75%);
        --co-textfld-invalid-active-border: hsl(20 65% 65%);
        --co-textfld-invalid-focus-border: hsl(20 65% 50%);
        --co-btn-bg: var(--co-body-accent);
        --co-btn-text: var(--co-body-accent-contrast);
        --co-btn-active-bg: var(--universal-accent-color-dark);
        --co-btn-active-text: var(--universal-accent-color-text-dark);
        --co-btn-focus-bg: var(--universal-accent-color-dark);
        --co-select-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='15px' width='20px'%3E%3Ctext x='0' y='12' fill='rgba(0,0,0,1.0)'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
        --co-search-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27c1.2-1.4 1.95-3.31 1.95-5.4C16.38 5.36 13.02 2 9.25 2S2 5.36 2 9.13s3.36 7.13 7.13 7.13c2.09 0 3.99-.75 5.4-1.95l.27.28v.79l5 4.99L20.49 18l-4.99-5zm-6.37 0C6.36 14 4 11.64 4 9.13S6.36 4.25 8.87 4.25s4.88 2.36 4.88 4.88-2.36 4.87-4.88 4.87z' fill='rgba(0,0,0,1.0)'/%3E%3C/svg%3E");
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --co-body-accent: var(--universal-accent-color);
        --co-body-accent-contrast: var(--universal-accent-color-text);
        --co-textfld-bg: #222;
        --co-textfld-border: #444;
        --co-textfld-active-border: #555;
        --co-textfld-focus-border: var(--co-body-accent);
        --co-textfld-valid-border: hsl(140 90% 20%);
        --co-textfld-valid-active-border: hsl(140 90% 30%);
        --co-textfld-valid-focus-border: hsl(140 90% 45%);
        --co-textfld-invalid-border: hsl(20 90% 20%);
        --co-textfld-invalid-active-border: hsl(20 90% 30%);
        --co-textfld-invalid-focus-border: hsl(20 90% 45%);
        --co-btn-bg: var(--co-body-accent);
        --co-btn-text: var(--co-body-accent-contrast);
        --co-btn-active-bg: var(--universal-accent-color-dark);
        --co-btn-active-text: var(--universal-accent-color-text-dark);
        --co-btn-focus-bg: var(--universal-accent-color-dark);
        --co-select-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='15px' width='20px'%3E%3Ctext x='0' y='12' fill='rgba(255,255,255,1.0)'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
        --co-search-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27c1.2-1.4 1.95-3.31 1.95-5.4C16.38 5.36 13.02 2 9.25 2S2 5.36 2 9.13s3.36 7.13 7.13 7.13c2.09 0 3.99-.75 5.4-1.95l.27.28v.79l5 4.99L20.49 18l-4.99-5zm-6.37 0C6.36 14 4 11.64 4 9.13S6.36 4.25 8.87 4.25s4.88 2.36 4.88 4.88-2.36 4.87-4.88 4.87z' fill='rgba(255,255,255,1.0)'/%3E%3C/svg%3E");

    }
}

:root {
  --leading-inputs: 100%;
  --padding-inputs: 0.75em;
  --padding-date: 0.15em;
  --margin-label: 0.75em;
  --margin-form-gap: 1.5em;
  --width-input-border: 1px;
  --width-inputs: 100%;
  --width-textarea: 100%;
  --height-textarea: 150px;
  --radius-inputs: 2px;
  --opacity-input-disabled: 0.5;
  --transition-duration-inputs: 250ms;
  --transition-function-inputs: ease-in-out;
  --transition-inputs: color var(--transition-duration-inputs),
    background-color var(--transition-duration-inputs),
    accent-color var(--transition-duration-inputs),
    border-color var(--transition-duration-inputs)
      var(--transition-function-inputs);
}
input:read-only:not(label, button, input[type=button], input[type=submit], input[type=reset]),
select:read-only:not(label, button, input[type=button], input[type=submit], input[type=reset]),
textarea:read-only:not(label, button, input[type=button], input[type=submit], input[type=reset]) {
  cursor: default;
}

:disabled,
.disabled,
[roll="disabled"],
:disabled::file-selector-button {
  accent-color: var(--co-body-accent);
  opacity: var(--opacity-input-disabled);
  cursor: not-allowed !important;
}

/* All elemenets regardless of types */
kbd,
input,
select,
option,
textarea,
button,
datalist,
fieldset,
legend,
optgroup,
meter,
progress,
output,
.u-link-button,
input::file-selector-button {
  font: inherit;
  color: inherit;
  line-height: var(--leading-inputs);
  accent-color: var(--co-body-accent);
  transition: var(--transition-inputs);
}

/* All elements with types */
/* Radio & Checkbox */
/* Buttons */
/* Select, Buttons and text-fields */
kbd,
select,
textarea,
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
button,
.u-badge,
.u-link-button,
input[type=reset],
input[type=submit],
input[type=button],
input::file-selector-button {
  border: var(--width-input-border) solid var(--co-textfld-border);
  padding: var(--padding-inputs);
  border-radius: var(--radius-inputs);
  background-color: var(--co-textfld-bg);
}

select:focus,
textarea:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=datetime]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
button:focus,
.u-link-button:focus,
input[type=reset]:focus,
input[type=submit]:focus,
input[type=button]:focus,
input::file-selector-button:focus {
  outline: 0;
}

/* All text-fields x select */
select,
textarea,
meter,
progress,
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=range],
input[type=datetime],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week] {
  max-width: var(--width-inputs);
  width: 100%;
}

select:hover:not([readonly], [disabled]),
select:active:not([readonly], [disabled]),
textarea:hover:not([readonly], [disabled]),
textarea:active:not([readonly], [disabled]),
input[type=date]:hover:not([readonly], [disabled]),
input[type=date]:active:not([readonly], [disabled]),
input[type=datetime-local]:hover:not([readonly], [disabled]),
input[type=datetime-local]:active:not([readonly], [disabled]),
input[type=datetime]:active:not([readonly], [disabled]),
input[type=datetime]:hover:not([readonly], [disabled]),
input[type=email]:hover:not([readonly], [disabled]),
input[type=email]:active:not([readonly], [disabled]),
input[type=month]:hover:not([readonly], [disabled]),
input[type=month]:active:not([readonly], [disabled]),
input[type=number]:hover:not([readonly], [disabled]),
input[type=number]:active:not([readonly], [disabled]),
input[type=password]:hover:not([readonly], [disabled]),
input[type=password]:active:not([readonly], [disabled]),
input[type=search]:hover:not([readonly], [disabled]),
input[type=search]:active:not([readonly], [disabled]),
input[type=tel]:hover:not([readonly], [disabled]),
input[type=tel]:active:not([readonly], [disabled]),
input[type=text]:hover:not([readonly], [disabled]),
input[type=text]:active:not([readonly], [disabled]),
input[type=time]:hover:not([readonly], [disabled]),
input[type=time]:active:not([readonly], [disabled]),
input[type=url]:hover:not([readonly], [disabled]),
input[type=url]:active:not([readonly], [disabled]),
input[type=week]:hover:not([readonly], [disabled]),
input[type=week]:active:not([readonly], [disabled]) {
  border-color: var(--co-textfld-active-border);
}

select:focus:not([readonly], [disabled]),
textarea:focus:not([readonly], [disabled]),
input[type=date]:focus:not([readonly], [disabled]),
input[type=datetime-local]:focus:not([readonly], [disabled]),
input[type=datetime]:focus:not([readonly], [disabled]),
input[type=email]:focus:not([readonly], [disabled]),
input[type=month]:focus:not([readonly], [disabled]),
input[type=number]:focus:not([readonly], [disabled]),
input[type=password]:focus:not([readonly], [disabled]),
input[type=search]:focus:not([readonly], [disabled]),
input[type=tel]:focus:not([readonly], [disabled]),
input[type=text]:focus:not([readonly], [disabled]),
input[type=time]:focus:not([readonly], [disabled]),
input[type=url]:focus:not([readonly], [disabled]),
input[type=week]:focus:not([readonly], [disabled]) {
  border-color: var(--co-textfld-focus-border);
}

select:required:valid:hover:not([readonly], [disabled]),
select:required:valid:active:not([readonly], [disabled]),
textarea:required:valid:hover:not([readonly], [disabled]),
textarea:required:valid:active:not([readonly], [disabled]),
input[type=date]:required:valid:hover:not([readonly], [disabled]),
input[type=date]:required:valid:active:not([readonly], [disabled]),
input[type=datetime-local]:required:valid:hover:not([readonly], [disabled]),
input[type=datetime-local]:required:valid:active:not([readonly], [disabled]),
input[type=datetime]:required:valid:hover:not([readonly], [disabled]),
input[type=datetime]:required:valid:active:not([readonly], [disabled]),
input[type=email]:required:valid:hover:not([readonly], [disabled]),
input[type=email]:required:valid:active:not([readonly], [disabled]),
input[type=month]:required:valid:hover:not([readonly], [disabled]),
input[type=month]:required:valid:active:not([readonly], [disabled]),
input[type=number]:required:valid:hover:not([readonly], [disabled]),
input[type=number]:required:valid:active:not([readonly], [disabled]),
input[type=password]:required:valid:hover:not([readonly], [disabled]),
input[type=password]:required:valid:active:not([readonly], [disabled]),
input[type=search]:required:valid:hover:not([readonly], [disabled]),
input[type=search]:required:valid:active:not([readonly], [disabled]),
input[type=tel]:required:valid:hover:not([readonly], [disabled]),
input[type=tel]:required:valid:active:not([readonly], [disabled]),
input[type=text]:required:valid:hover:not([readonly], [disabled]),
input[type=text]:required:valid:active:not([readonly], [disabled]),
input[type=time]:required:valid:hover:not([readonly], [disabled]),
input[type=time]:required:valid:active:not([readonly], [disabled]),
input[type=url]:required:valid:hover:not([readonly], [disabled]),
input[type=url]:required:valid:active:not([readonly], [disabled]),
input[type=week]:required:valid:hover:not([readonly], [disabled]),
input[type=week]:required:valid:active:not([readonly], [disabled]) {
  border-color: var(--co-textfld-valid-active-border);
}

select:required:valid:focus:not([readonly], [disabled]),
textarea:required:valid:focus:not([readonly], [disabled]),
input[type=date]:required:valid:focus:not([readonly], [disabled]),
input[type=datetime-local]:required:valid:focus:not([readonly], [disabled]),
input[type=datetime]:required:valid:focus:not([readonly], [disabled]),
input[type=email]:required:valid:focus:not([readonly], [disabled]),
input[type=month]:required:valid:focus:not([readonly], [disabled]),
input[type=number]:required:valid:focus:not([readonly], [disabled]),
input[type=password]:required:valid:focus:not([readonly], [disabled]),
input[type=search]:required:valid:focus:not([readonly], [disabled]),
input[type=tel]:required:valid:focus:not([readonly], [disabled]),
input[type=text]:required:valid:focus:not([readonly], [disabled]),
input[type=time]:required:valid:focus:not([readonly], [disabled]),
input[type=url]:required:valid:focus:not([readonly], [disabled]),
input[type=week]:required:valid:focus:not([readonly], [disabled]) {
  border-color: var(--co-textfld-valid-focus-border);
}

select:required:invalid:hover,
select:required:invalid:active,
textarea:required:invalid:hover,
textarea:required:invalid:active,
input[type=date]:required:invalid:hover,
input[type=date]:required:invalid:active,
input[type=datetime-local]:required:invalid:hover,
input[type=datetime-local]:required:invalid:active,
input[type=datetime]:required:invalid:hover,
input[type=datetime]:required:invalid:active,
input[type=email]:required:invalid:hover,
input[type=email]:required:invalid:active,
input[type=month]:required:invalid:hover,
input[type=month]:required:invalid:active,
input[type=number]:required:invalid:hover,
input[type=number]:required:invalid:active,
input[type=password]:required:invalid:hover,
input[type=password]:required:invalid:active,
input[type=search]:required:invalid:hover,
input[type=search]:required:invalid:active,
input[type=tel]:required:invalid:hover,
input[type=tel]:required:invalid:active,
input[type=text]:required:invalid:hover,
input[type=text]:required:invalid:active,
input[type=time]:required:invalid:hover,
input[type=time]:required:invalid:active,
input[type=url]:required:invalid:hover,
input[type=url]:required:invalid:active,
input[type=week]:required:invalid:hover,
input[type=week]:required:invalid:active {
  border-color: var(--co-textfld-invalid-active-border);
}

select:required:invalid:focus,
textarea:required:invalid:focus,
input[type=date]:required:invalid:focus,
input[type=datetime-local]:required:invalid:focus,
input[type=datetime]:required:invalid:focus,
input[type=email]:required:invalid:focus,
input[type=month]:required:invalid:focus,
input[type=number]:required:invalid:focus,
input[type=password]:required:invalid:focus,
input[type=search]:required:invalid:focus,
input[type=tel]:required:invalid:focus,
input[type=text]:required:invalid:focus,
input[type=time]:required:invalid:focus,
input[type=url]:required:invalid:focus,
input[type=week]:required:invalid:focus {
  border-color: var(--co-textfld-invalid-focus-border);
}

select::selection,
textarea::selection,
input[type=date]::selection,
input[type=datetime-local]::selection,
input[type=email]::selection,
input[type=month]::selection,
input[type=number]::selection,
input[type=datetime]::selection,
input[type=password]::selection,
input[type=search]::selection,
input[type=tel]::selection,
input[type=text]::selection,
input[type=time]::selection,
input[type=url]::selection,
input[type=week]::selection {
  background-color: var(--co-body-accent);
  color: var(--co-body-accent-contrast);
}

select:not([disabled], [readonly]) option:focus,
select:not([disabled], [readonly]) option:active,
select:not([disabled], [readonly]) option:hover,
select:not([disabled], [readonly]) option:checked {
  background-color: var(--co-body-accent);
  color: var(--co-body-accent-contrast);
}

input[type=color] {
  cursor: pointer;
  border-style: solid;
  border-radius: var(--radius-inputs);
  border-color: var(--co-textfld-border);
  background-color: var(--co-textfld-bg);
}

input[type=color]:hover:not([disabled]),
input[type=color]:active:not([disabled]) {
  border-color: var(--co-textfld-active-border);
}

input[type=color]:focus {
  outline: 0;
}

input[type=color]:focus:not([disabled]) {
  border-color: var(--co-textfld-focus-border);
}

kbd,
button,
.u-link-button,
.u-badge,
input[type=reset],
input[type=submit],
input[type=button],
input::file-selector-button {
  border-color: var(--co-btn-bg);
  background-color: var(--co-btn-bg);
  color: var(--co-btn-text);
  cursor: pointer;
}

button:hover,
button:active,
.u-link-button:hover,
.u-link-button:active,
input[type=reset]:hover,
input[type=reset]:active,
input[type=submit]:hover,
input[type=submit]:active,
input[type=button]:hover,
input[type=button]:active,
input::file-selector-button:hover,
input::file-selector-button:active {
  text-decoration: none;
  color: var(--co-btn-active-text);
  background-color: var(--co-btn-active-bg);
  border-color: var(--co-btn-active-bg);
}

button:focus,
.u-link-button:focus,
.u-link-button-selected,
input[type=reset]:focus,
input[type=submit]:focus,
input[type=button]:focus,
input::file-selector-button:focus {
  background-color: var(--co-btn-focus-bg);
}

.u-link-button-selected {
  cursor: default;
  pointer-events: none;
  border-color: var(--co-btn-active-bg);
}

/* Labels */
label {
  cursor: pointer;
  display: block;
  margin-bottom: var(--margin-label);
}

label:last-child,
fieldset:last-child,
label:has(input[type="radio"]):only-child,
label:has(input[type="checkbox"]):only-child { margin-bottom: unset }

textarea {
  max-width: var(--width-textarea);
  height: var(--height-textarea);
  resize: vertical;
}

textarea:read-only,
textarea:disabled {
  resize: none;
}

input::file-selector-button {
  margin-right: var(--margin-form-gap);
}

label:has(input:disabled) {
  opacity: var(--opacity-input-disabled);
  cursor: not-allowed;
}

label:has(input:disabled) :disabled {
  opacity: 1;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}

input[type="search"]{
  background-image: var(--co-search-icon);
  background-repeat: no-repeat;
  background-size: 1.6em 1.2em;
  background-position: calc(100% - 0.5em) center;
  padding-right: 2.5em;
}

select:not([multiple]) {
  appearance: none;
  background-image: var(--co-select-arrow);
  background-repeat: no-repeat;
  background-size: 1.5EM 1EM;
  background-position: calc(100% - 0.25em) center;
  padding-right: 0.5em;
}

fieldset {width: 100%; display: grid; border: var(--width-input-border) solid var(--co-textfld-active-border); padding: var(--margin-label); margin-bottom: var(--margin-label); max-width: var(--width-inputs); gap: var(--margin-label) }
form {width: 100%; display: grid; max-width: var(--width-inputs); gap: var(--margin-label) }
#searchbar {width: unset;}
#searchbar label {margin: unset;}

/* Checkbox and Radio */
input[type="radio"],
input[type="checkbox"] {
  margin: 0;
  width: 18px;
  height: 18px;
}

/* Meter and Progress */
meter,
progress {
  height: 18px;
  appearance: none;
  border-radius: 100px;
  background: var(--co-textfld-bg);
  border: var(--width-input-border) solid var(--co-textfld-border);
}

::-webkit-progress-bar {
  border: none;
  appearance: none;
  border-radius: 100px;
  background: transparent;
  width: var(--width-inputs);
}

::-webkit-meter-bar,
::-webkit-meter-inner-element {
  margin: 0;
  padding: 0;
  border: none;
  height: 16px;
  appearance: none;
  border-radius: 100px;
  display: inline-block;
  background: transparent;
  width: var(--width-inputs);
}

::-internal-fallback * {
  display: none !important;
}

::-webkit-meter-optimum-value {
  height: 18px;
  width: 50%;
  border-radius: 100px;
  background: var(--co-textfld-focus-border);
}

::-webkit-progress-value {
  border-radius: 100px;
  background: var(--co-textfld-focus-border);
}

:not([value])::-webkit-progress-value {
  border-radius: 100px;
  width: 50% !important;
  inline-size: 50% !important;
  animation: 2s bounce linear infinite;
}

::-moz-meter-bar {
  border-radius: 100px;
  background: var(--co-textfld-focus-border);
}

::-moz-progress-bar {
  border-radius: 100px;
  background: var(--co-textfld-focus-border);
}

:not([value])::-moz-progress-bar {
  border-radius: 100px;
  width: 50% !important;
  animation: 2s bounce ease-in-out infinite;
}

/* Progress, Checkbox, Range and Radio hover */
input[type="radio"],
input[type="range"],
input[type="checkbox"] {
  outline: 0;
}

input[type="radio"]:hover,
input[type="range"]:hover,
input[type="checkbox"]:hover {
  accent-color: var(--co-btn-focus-bg);
}

input[type="radio"]:focus,
input[type="range"]:focus,
input[type="checkbox"]:focus {
  accent-color: var(--co-btn-focus-bg);
}

/* Checkbox and Radio Inside Label */
label:has(input[type="radio"]),
label:has(input[type="checkbox"]) {
  gap: 0.5em;
  display: flex;
  align-items: center;
  accent-color: var(--co-textfld-bg);
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
  accent-color: var(--co-btn-bg);
}

input[type="radio"]:checked:hover,
input[type="checkbox"]:checked:hover {
    accent-color: var(--co-btn-active-bg);
}

/* date, datetime-local, datetime, month, time & week patches */
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=month],
input[type=time],
input[type=week] {
  appearance: none;
}

::-webkit-datetime-edit {
  text-align: left;
  display: inline-block;
}

::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-ampm-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-week-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  display: inline-block;
  padding: var(--padding-date);
  border-radius: var(--radius-inputs);
  margin-block: 0 calc(var(--padding-date)/2);
}

::-webkit-datetime-edit-hour-field:focus,
::-webkit-datetime-edit-minute-field:focus,
::-webkit-datetime-edit-second-field:focus,
::-webkit-datetime-edit-ampm-field:focus,
::-webkit-datetime-edit-day-field:focus,
::-webkit-datetime-edit-week-field:focus,
::-webkit-datetime-edit-month-field:focus,
::-webkit-datetime-edit-year-field:focus {
  color: var(--co-body-accent-contrast);
  background-color: var(--co-body-accent);
}

::-moz-datetime-edit-hour-field,
::-moz-datetime-edit-minute-field,
::-moz-datetime-edit-second-field,
::-moz-datetime-edit-ampm-field,
::-moz-datetime-edit-day-field,
::-moz-datetime-edit-week-field,
::-moz-datetime-edit-month-field,
H {
  display: inline-block;
  padding: var(--padding-date);
  border-radius: var(--radius-inputs);
  margin-block: 0 calc(var(--padding-date)/2);
}

::-moz-datetime-edit-hour-field:focus,
::-moz-datetime-edit-minute-field:focus,
::-moz-datetime-edit-second-field:focus,
::-moz-datetime-edit-ampm-field:focus,
::-moz-datetime-edit-second-field:focus,
::-moz-datetime-edit-ampm-field:focus,
::-moz-datetime-edit-day-field:focus,
::-moz-datetime-edit-week-field:focus,
::-moz-datetime-edit-month-field:focus,
::-moz-datetime-edit-year-field:focus {
  color: var(--co-body-accent-contrast);
  background-color: var(--co-body-accent);
}

kbd {
  line-height: 1;
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  display: inline-block;
  font-family: Consolas, monospace;
  padding: calc(var(--padding-inputs) / 2);
  color: var(--universal-accent-color-text-light);
  background-color: var(--universal-accent-color-light);
}

.u-badge {
  margin: 5px;
  padding: 0 10px;
}

.u-badge-bl {
  left: 0;
  bottom: 0;
}

.u-badge-br {
  right: 0;
  bottom: 0;
}

.u-badge-tl{
  top: 0;
  left: 0;
}

.u-badge-tr {
  top: 0;
  right: 0;
}

@keyframes bounce {
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(100%);
  }

  -100% {
    transform: translateX(0);
  }
}