@layer components {
  :root {
    --twentyone--form--margin: var(--twentyone--spacing--16) 0;
    --twentyone--form--gap: var(--twentyone--spacing--12);
    --twentyone--form--item--gap: var(--twentyone--spacing--8);
    --twentyone--label--font-size: var(--twentyone--element--font-size);
    --twentyone--label--text-transform: none;
    --twentyone--label--line-height: 1.5;
    --twentyone--label--letter-spacing: 0;
    --twentyone--label--color: var(--twentyone--color--black);
    --twentyone--label--inverted-color: var(--twentyone--color--white);
    --twentyone--placeholder--color: var(--twentyone--color--grey);
    --twentyone--placeholder--inverted-color: rgba(var(--twentyone--color--white-rgb), .7);
    --twentyone--input--gap: var(--twentyone--spacing--8);
    --twentyone--input--font-size: var(--twentyone--element--font-size);
    --twentyone--input--text-transform: none;
    --twentyone--input--line-height: 1.5;
    --twentyone--input--letter-spacing: 0;
    --twentyone--input--border-radius: var(--twentyone--spacing--8);
    --twentyone--input--box-shadow: none;
    --twentyone--input--border-width-top: 1px;
    --twentyone--input--border-width-right: 1px;
    --twentyone--input--border-width-bottom: 1px;
    --twentyone--input--border-width-left: 1px;
    --twentyone--input--border-color: rgba(var(--twentyone--color--black-rgb), .25);
    --twentyone--input--focus-border-color: var(--twentyone--color--primary);
    --twentyone--input--background: var(--twentyone--color--white);
    --twentyone--input--focus-background: var(--twentyone--input--background);
    --twentyone--input--color: var(--twentyone--color--black);
    --twentyone--input--focus-color: var(--twentyone--color--black);
    --twentyone--input--padding-top: var(--twentyone--spacing--8);
    --twentyone--input--padding-right: var(--twentyone--spacing--12);
    --twentyone--input--padding-bottom: var(--twentyone--spacing--8);
    --twentyone--input--padding-left: var(--twentyone--spacing--12);
    --twentyone--input--label-floating-padding-top: calc(var(--twentyone--input--padding-top) * 2);
    --twentyone--input--label-floating-padding-bottom: calc(var(--twentyone--input--padding-bottom) / 2);
    --twentyone--input--inverted-color: var(--twentyone--color--white);
    --twentyone--input--inverted-focus-color: var(--twentyone--input--inverted-color);
    --twentyone--input--inverted-border-color: rgba(var(--twentyone--color--white-rgb), .5);
    --twentyone--input--inverted-focus-border-color: var(--twentyone--color--white);
    --twentyone--input--inverted-background: transparent;
    --twentyone--input--inverted-focus-background: transparent;
    --twentyone--input--icon-font-size: var(--twentyone--element--font-size);
    --twentyone--input--icon-color: var(--twentyone--color--black);
    --twentyone--input--focus-icon-color: var(--twentyone--color--primary);
    --twentyone--input--inverted-icon-color: var(--twentyone--color--white);
    --twentyone--input--inverted-focus-icon-color: var(--twentyone--color--white);
    --twentyone--options--border-width: 0;
    --twentyone--options--border-color: transparent;
    --twentyone--options--background: var(--twentyone--color--white);
    --twentyone--options--max-height: 20em;
    --twentyone--options--gap: 0;
    --twentyone--options--padding: var(--twentyone--spacing--4);
    --twentyone--options--box-shadow: var(--twentyone--shadow--medium);
    --twentyone--options--border-radius: var(--twentyone--spacing--8);
    --twentyone--options--option-font-size: var(--twentyone--element--font-size);
    --twentyone--options--option-gap: var(--twentyone--spacing--12);
    --twentyone--options--option-padding: var(--twentyone--spacing--8) var(--twentyone--spacing--16);
    --twentyone--options--option-border-radius: var(--twentyone--spacing--8);
    --twentyone--options--option-color: var(--twentyone--color--black);
    --twentyone--options--option-color-hover: var(--twentyone--color--black);
    --twentyone--options--option-color-active: var(--twentyone--color--white);
    --twentyone--options--option-icon-color: var(--twentyone--color--primary);
    --twentyone--options--option-icon-color-hover: var(--twentyone--options--option-icon-color);
    --twentyone--options--option-icon-color-active: var(--twentyone--options--option-color-active);
    --twentyone--options--option-icon-font-size: var(--twentyone--options--option-font-size);
    --twentyone--options--option-background: transparent;
    --twentyone--options--option-background-hover: rgba(var(--twentyone--color--primary-rgb), .1);
    --twentyone--options--option-background-active: var(--twentyone--color--primary);
    --twentyone--hint-message--gap: var(--twentyone--spacing--4);
    --twentyone--hint-message--color: var(--twentyone--color--black);
    --twentyone--hint-message--font-size: var(--twentyone--font-size--level-7);
  }
  .twentyone-form {
    margin: var(--twentyone--form--margin);
  }
  .twentyone-form:first-child {
    margin-top: 0;
  }
  .twentyone-form:last-child {
    margin-bottom: 0;
  }
  .frc-captcha {
    margin: var(--twentyone--form--gap) 0;
  }
  .frc-captcha:first-child {
    margin-top: 0;
  }
  .frc-captcha:last-child {
    margin-bottom: 0;
  }
  @keyframes slide_in {
    0% {
      translate: 100% -50%;
      opacity: 0;
      visibility: hidden;
    }
    100% {
      translate: 0 -50%;
      opacity: 1;
      visibility: visible;
    }
  }
  .twentyone-form-item {
    --label-height: calc(var(--twentyone--label--line-height) * var(--twentyone--label--font-size) + var(--twentyone--input--gap));
    --icon-width: calc(var(--twentyone--input--icon-font-size) + var(--twentyone--input--gap));
    --button-width: calc(var(--twentyone--button--formular-icon-only-padding) * 2 + var(--twentyone--button--formular-icon-only-icon-font-size));
    --input-height: calc(var(--twentyone--input--border-width-top) + var(--twentyone--input--padding-top) + var(--twentyone--input--font-size) * var(--twentyone--input--line-height) + var(--twentyone--input--padding-bottom) + var(--twentyone--input--border-width-bottom));
    --icon-width-left: 0px;
    --icon-width-right: 0px;
    --button-width-left: 0px;
    --button-width-right: 0px;
    margin: var(--twentyone--form--gap) 0;
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--twentyone--input--gap);
  }
  .twentyone-form-item:first-child {
    margin-top: 0;
  }
  .twentyone-form-item:last-child {
    margin-bottom: 0;
  }
  .twentyone-form-item.width--auto {
    width: 100%;
  }
  .twentyone-form-item.is--changed::after {
    content: "";
    animation: slide_in 0.3s ease-in-out both;
    width: 0.5em;
    height: 0.5em;
    background-color: var(--twentyone--color--green);
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 100%;
  }
  .twentyone-form-item .twentyone-label {
    cursor: pointer;
    display: block;
    color: var(--twentyone--label--color);
    font-size: var(--twentyone--label--font-size);
    transition: var(--twentyone--element--transition);
    -webkit-user-select: none;
    user-select: none;
  }
  .twentyone-form-item > .twentyone-label {
    font-weight: bold;
    letter-spacing: var(--twentyone--label--letter-spacing);
    line-height: var(--twentyone--label--line-height);
    text-transform: var(--twentyone--label--text-transform);
  }
  .twentyone-form-item > .twentyone-label i {
    font-family: inherit;
    font-size: 1em;
    font-style: inherit;
    font-weight: inherit;
  }
  .twentyone-form-item > .twentyone-label:first-child {
    margin-top: 0;
  }
  .twentyone-form-item > .twentyone-label:last-child {
    margin-bottom: 0;
  }
  .twentyone-form-item.label--floating {
    --label-height: 0px;
    --twentyone--input--padding-top: var(--twentyone--input--label-floating-padding-top);
    --twentyone--input--padding-bottom: var(--twentyone--input--label-floating-padding-bottom);
  }
  .twentyone-form-item.label--floating > .twentyone-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    font-weight: normal;
    margin: 0;
    z-index: 2;
    pointer-events: none;
    top: calc(var(--input-height) / 2);
    translate: 0 -50%;
    left: calc(var(--button-width-left) + var(--icon-width-left) + var(--twentyone--input--border-width-left) + var(--twentyone--input--padding-left));
    right: calc(var(--button-width-right) + var(--icon-width-right) + var(--twentyone--input--border-width-right) + var(--twentyone--input--padding-right));
    color: var(--twentyone--placeholder--color);
    transform-origin: bottom left;
    clip-path: none;
    width: auto;
    height: auto;
  }
  .twentyone-form-item.label--floating:is(.has--value, :not(.is--initialized)) > .twentyone-label:has(~ input, ~ .twentyone-placeholder), .twentyone-form-item.label--floating > .twentyone-label:has(~ input:focus) {
    translate: 0 -100%;
    scale: 0.75;
  }
  .twentyone-form-item.label--floating:is(.has--value, :not(.is--initialized)) > .twentyone-label:has(~ textarea), .twentyone-form-item.label--floating > .twentyone-label:has(~ textarea:focus) {
    opacity: 0;
  }
  .twentyone-form-item input,
  .twentyone-form-item textarea,
  .twentyone-form-item select,
  .twentyone-form-item .twentyone-placeholder {
    border-radius: var(--twentyone--input--border-radius);
    box-shadow: var(--twentyone--input--box-shadow);
    font-feature-settings: inherit;
    transition: var(--twentyone--element--transition);
    text-align: left;
    background: var(--twentyone--input--background);
    border-color: var(--twentyone--input--border-color);
    border-style: solid;
    border-width: var(--twentyone--input--border-width-top) var(--twentyone--input--border-width-right) var(--twentyone--input--border-width-bottom) var(--twentyone--input--border-width-left);
    color: var(--twentyone--input--color);
    font-family: inherit;
    font-size: var(--twentyone--input--font-size);
    line-height: var(--twentyone--input--line-height);
    text-transform: var(--twentyone--input--text-transform);
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    max-width: unset;
    padding-top: var(--twentyone--input--padding-top);
    padding-bottom: var(--twentyone--input--padding-bottom);
    padding-left: calc(var(--button-width-left) + var(--twentyone--input--padding-left) + var(--icon-width-left));
    padding-right: calc(var(--button-width-right) + var(--twentyone--input--padding-right) + var(--icon-width-right));
    width: 100%;
  }
  .twentyone-form-item input::-webkit-outer-spin-button, .twentyone-form-item input::-webkit-inner-spin-button,
  .twentyone-form-item textarea::-webkit-outer-spin-button,
  .twentyone-form-item textarea::-webkit-inner-spin-button,
  .twentyone-form-item select::-webkit-outer-spin-button,
  .twentyone-form-item select::-webkit-inner-spin-button,
  .twentyone-form-item .twentyone-placeholder::-webkit-outer-spin-button,
  .twentyone-form-item .twentyone-placeholder::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .twentyone-form-item input::-webkit-input-placeholder,
  .twentyone-form-item textarea::-webkit-input-placeholder,
  .twentyone-form-item select::-webkit-input-placeholder,
  .twentyone-form-item .twentyone-placeholder::-webkit-input-placeholder {
    color: var(--twentyone--placeholder--color);
    opacity: 1;
  }
  .twentyone-form-item input:-webkit-input-placeholder,
  .twentyone-form-item textarea:-webkit-input-placeholder,
  .twentyone-form-item select:-webkit-input-placeholder,
  .twentyone-form-item .twentyone-placeholder:-webkit-input-placeholder {
    color: var(--twentyone--placeholder--color);
    opacity: 1;
  }
  .twentyone-form-item input::-ms-input-placeholder,
  .twentyone-form-item textarea::-ms-input-placeholder,
  .twentyone-form-item select::-ms-input-placeholder,
  .twentyone-form-item .twentyone-placeholder::-ms-input-placeholder {
    color: var(--twentyone--placeholder--color);
    opacity: 1;
  }
  .twentyone-form-item input:-ms-input-placeholder,
  .twentyone-form-item textarea:-ms-input-placeholder,
  .twentyone-form-item select:-ms-input-placeholder,
  .twentyone-form-item .twentyone-placeholder:-ms-input-placeholder {
    color: var(--twentyone--placeholder--color);
    opacity: 1;
  }
  .twentyone-form-item input::-moz-placeholder,
  .twentyone-form-item textarea::-moz-placeholder,
  .twentyone-form-item select::-moz-placeholder,
  .twentyone-form-item .twentyone-placeholder::-moz-placeholder {
    color: var(--twentyone--placeholder--color);
    opacity: 1;
  }
  .twentyone-form-item input:-moz-placeholder,
  .twentyone-form-item textarea:-moz-placeholder,
  .twentyone-form-item select:-moz-placeholder,
  .twentyone-form-item .twentyone-placeholder:-moz-placeholder {
    color: var(--twentyone--placeholder--color);
    opacity: 1;
  }
  .twentyone-form-item input::placeholder,
  .twentyone-form-item textarea::placeholder,
  .twentyone-form-item select::placeholder,
  .twentyone-form-item .twentyone-placeholder::placeholder {
    color: var(--twentyone--placeholder--color);
    opacity: 1;
  }
  .twentyone-form-item input:placeholder,
  .twentyone-form-item textarea:placeholder,
  .twentyone-form-item select:placeholder,
  .twentyone-form-item .twentyone-placeholder:placeholder {
    color: var(--twentyone--placeholder--color);
    opacity: 1;
  }
  .twentyone-form-item:not(.twentyone-checkbox, .twentyone-toggle, .twentyone-radio) > .twentyone-icon {
    position: absolute;
    z-index: 2;
    top: calc(var(--label-height) + var(--input-height) / 2);
    translate: 0 -50%;
    height: calc(var(--twentyone--input--font-size) * var(--twentyone--input--line-height));
  }
  .twentyone-form-item:not(.twentyone-checkbox, .twentyone-toggle, .twentyone-radio).icon--left {
    --icon-width-left: var(--icon-width);
  }
  .twentyone-form-item:not(.twentyone-checkbox, .twentyone-toggle, .twentyone-radio).icon--left > .twentyone-icon {
    left: calc(var(--button-width-left) + var(--twentyone--input--padding-left));
  }
  .twentyone-form-item:not(.twentyone-checkbox, .twentyone-toggle, .twentyone-radio).icon--right {
    --icon-width-right: var(--icon-width);
  }
  .twentyone-form-item:not(.twentyone-checkbox, .twentyone-toggle, .twentyone-radio).icon--right > .twentyone-icon {
    right: calc(var(--button-width-right) + var(--twentyone--input--padding-right));
  }
  .twentyone-form-item > .twentyone-button {
    position: absolute;
    right: 0;
    top: var(--label-height);
    background: transparent;
    border: none;
    aspect-ratio: unset;
    height: var(--input-height);
  }
  .twentyone-form-item > .twentyone-button.is--minus {
    right: unset;
    left: 0;
  }
  .twentyone-form-item.is--saved > .twentyone-icon {
    opacity: 1;
    visibility: visible;
  }
  .twentyone-form-item.is--initialized.button--left {
    --button-width-left: var(--button-width);
  }
  .twentyone-form-item.is--initialized.button--right {
    --button-width-right: var(--button-width);
  }
  .twentyone-form-item:not(.is--initialized) > .twentyone-button {
    display: none;
  }
  .twentyone-form-item:not(.is--open) .twentyone-options-container {
    padding-bottom: 0;
    padding-top: 0;
    translate: 0 -1em;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
  }
  .twentyone-form-item input[type=checkbox], .twentyone-form-item input[type=radio] {
    opacity: 0;
    position: absolute;
    z-index: -1;
  }
  .twentyone-form-item input[type=checkbox] ~ .twentyone-fake-element, .twentyone-form-item input[type=radio] ~ .twentyone-fake-element {
    outline-width: var(--twentyone--element--outline-width);
    outline-style: solid;
    outline-color: var(--twentyone--element--outline-color);
    outline-offset: var(--twentyone--element--outline-offset);
  }
  .twentyone-form-item input[type=checkbox]:focus-visible ~ .twentyone-fake-element, .twentyone-form-item input[type=radio]:focus-visible ~ .twentyone-fake-element {
    outline-color: var(--twentyone--element--outline-color-focus);
    outline-offset: var(--twentyone--element--outline-offset-focus);
  }
  .twentyone-form-item input[type=time]::-webkit-calendar-picker-indicator {
    background: none;
    display: none;
  }
  .twentyone-form-item .twentyone-fake-element {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    transition: var(--twentyone--element--transition);
  }
  .twentyone-form-item > .twentyone-button.is--formular {
    margin: 0;
  }
  .twentyone-form-item textarea ~ .twentyone-label, .twentyone-form-item textarea ~ .twentyone-icon {
    top: var(--twentyone--input--padding-top);
    translate: 0;
  }
  .twentyone-form-item input[type=checkbox] ~ .twentyone-label, .twentyone-form-item input[type=radio] ~ .twentyone-label {
    overflow: visible;
  }
  .twentyone-form-item:not(.is--error, .is--warning, .is--success) .twentyone-hint-message-container .twentyone-icon {
    display: none;
  }
  .twentyone-form-item:not(.is--error, .is--warning, .is--success) input:focus,
  .twentyone-form-item:not(.is--error, .is--warning, .is--success) textarea:focus,
  .twentyone-form-item:not(.is--error, .is--warning, .is--success) select:focus,
  .twentyone-form-item:not(.is--error, .is--warning, .is--success) .twentyone-placeholder:focus {
    background: var(--twentyone--input--focus-background);
    border-color: var(--twentyone--input--focus-border-color);
    color: var(--twentyone--input--focus-color);
  }
  .twentyone-form-item:not(.is--error, .is--warning, .is--success) input:focus ~ .twentyone-icon,
  .twentyone-form-item:not(.is--error, .is--warning, .is--success) textarea:focus ~ .twentyone-icon,
  .twentyone-form-item:not(.is--error, .is--warning, .is--success) select:focus ~ .twentyone-icon,
  .twentyone-form-item:not(.is--error, .is--warning, .is--success) .twentyone-placeholder:focus ~ .twentyone-icon {
    fill: var(--twentyone--input--focus-icon-color);
  }
  .twentyone-form-item.is--error input,
  .twentyone-form-item.is--error textarea,
  .twentyone-form-item.is--error select,
  .twentyone-form-item.is--error .twentyone-file-drop-area,
  .twentyone-form-item.is--error .twentyone-placeholder {
    border-color: var(--twentyone--color--red);
  }
  .twentyone-form-item.is--error > .twentyone-icon {
    fill: var(--twentyone--color--red);
  }
  .twentyone-form-item.is--error .twentyone-hint-message-container {
    fill: var(--twentyone--color--red);
    color: var(--twentyone--color--red);
  }
  .twentyone-form-item.is--error .twentyone-hint-message-container .twentyone-icon:not(.is--error) {
    display: none;
  }
  .twentyone-form-item.is--success input,
  .twentyone-form-item.is--success textarea,
  .twentyone-form-item.is--success select,
  .twentyone-form-item.is--success .twentyone-file-drop-area,
  .twentyone-form-item.is--success .twentyone-placeholder {
    border-color: var(--twentyone--color--green);
  }
  .twentyone-form-item.is--success > .twentyone-icon {
    fill: var(--twentyone--color--green);
  }
  .twentyone-form-item.is--success .twentyone-hint-message-container {
    fill: var(--twentyone--color--green);
    color: var(--twentyone--color--green);
  }
  .twentyone-form-item.is--success .twentyone-hint-message-container .twentyone-icon:not(.is--success) {
    display: none;
  }
  .twentyone-form-item.is--warning input,
  .twentyone-form-item.is--warning textarea,
  .twentyone-form-item.is--warning select,
  .twentyone-form-item.is--warning .twentyone-file-drop-area,
  .twentyone-form-item.is--warning .twentyone-placeholder {
    border-color: var(--twentyone--color--yellow);
  }
  .twentyone-form-item.is--warning > .twentyone-icon {
    fill: var(--twentyone--color--yellow);
  }
  .twentyone-form-item.is--warning .twentyone-hint-message-container {
    fill: var(--twentyone--color--yellow);
    color: var(--twentyone--color--yellow);
  }
  .twentyone-form-item.is--warning .twentyone-hint-message-container .twentyone-icon:not(.is--warning) {
    display: none;
  }
  .twentyone-form-item.is--inverted .twentyone-label {
    color: var(--twentyone--label--inverted-color);
  }
  .twentyone-form-item.is--inverted.label--floating > .twentyone-label {
    color: var(--twentyone--placeholder--inverted-color);
  }
  .twentyone-form-item.is--inverted.is--error .twentyone-hint-message-container, .twentyone-form-item.is--inverted.is--warning .twentyone-hint-message-container, .twentyone-form-item.is--inverted.is--success .twentyone-hint-message-container {
    fill: var(--twentyone--color--white);
    color: var(--twentyone--color--white);
  }
  .twentyone-form-item.is--inverted.is--error input,
  .twentyone-form-item.is--inverted.is--error textarea,
  .twentyone-form-item.is--inverted.is--error select,
  .twentyone-form-item.is--inverted.is--error .twentyone-placeholder, .twentyone-form-item.is--inverted.is--warning input,
  .twentyone-form-item.is--inverted.is--warning textarea,
  .twentyone-form-item.is--inverted.is--warning select,
  .twentyone-form-item.is--inverted.is--warning .twentyone-placeholder, .twentyone-form-item.is--inverted.is--success input,
  .twentyone-form-item.is--inverted.is--success textarea,
  .twentyone-form-item.is--inverted.is--success select,
  .twentyone-form-item.is--inverted.is--success .twentyone-placeholder {
    border-color: var(--twentyone--color--white);
  }
  .twentyone-form-item.is--inverted.is--error > .twentyone-icon, .twentyone-form-item.is--inverted.is--warning > .twentyone-icon, .twentyone-form-item.is--inverted.is--success > .twentyone-icon {
    fill: var(--twentyone--color--white);
  }
  .twentyone-form-item.is--inverted input,
  .twentyone-form-item.is--inverted textarea,
  .twentyone-form-item.is--inverted select,
  .twentyone-form-item.is--inverted .twentyone-placeholder {
    background: var(--twentyone--input--inverted-background);
    border-color: var(--twentyone--input--inverted-border-color);
    color: var(--twentyone--input--inverted-color);
  }
  .twentyone-form-item.is--inverted input:focus,
  .twentyone-form-item.is--inverted textarea:focus,
  .twentyone-form-item.is--inverted select:focus,
  .twentyone-form-item.is--inverted .twentyone-placeholder:focus {
    background: var(--twentyone--input--inverted-focus-background);
    border-color: var(--twentyone--input--inverted-focus-border-color);
    color: var(--twentyone--input--inverted-focus-color);
  }
  .twentyone-form-item.is--inverted input:focus ~ .twentyone-icon,
  .twentyone-form-item.is--inverted textarea:focus ~ .twentyone-icon,
  .twentyone-form-item.is--inverted select:focus ~ .twentyone-icon,
  .twentyone-form-item.is--inverted .twentyone-placeholder:focus ~ .twentyone-icon {
    fill: var(--twentyone--input--inverted-focus-icon-color);
  }
  .twentyone-form-item.is--inverted input[type=checkbox]:focus-visible ~ .twentyone-fake-element, .twentyone-form-item.is--inverted input[type=radio]:focus-visible ~ .twentyone-fake-element {
    outline-color: var(--twentyone--element--outline-color-focus-inverted);
  }
  .twentyone-hint-message-container {
    display: flex;
    align-items: center;
    gap: var(--twentyone--hint-message--gap);
    font-size: var(--twentyone--hint-message--font-size);
    color: var(--twentyone--hint-message--color);
    fill: var(--twentyone--hint-message--color);
  }
  .twentyone-hint-message-container:first-child {
    margin-top: 0;
  }
  .twentyone-hint-message-container:last-child {
    margin-bottom: 0;
  }
  .twentyone-options-container {
    background: var(--twentyone--options--background);
    border: var(--twentyone--options--border-width) solid var(--twentyone--options--border-color);
    left: 0;
    margin: 0;
    padding: var(--twentyone--options--padding);
    position: absolute;
    top: calc(var(--label-height) + var(--twentyone--input--border-width-top) + var(--twentyone--input--padding-top) + var(--twentyone--input--font-size) * var(--twentyone--input--line-height) + var(--twentyone--input--padding-bottom) + var(--twentyone--input--border-width-bottom));
    min-width: 100%;
    z-index: 444;
    box-shadow: var(--twentyone--options--box-shadow);
    border-radius: var(--twentyone--options--border-radius);
    transition: var(--twentyone--element--transition);
  }
  .twentyone-options {
    overflow: hidden auto;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    max-height: var(--twentyone--options--max-height);
    gap: var(--twentyone--options--gap);
  }
  .twentyone-option .twentyone-option-content {
    text-decoration: none;
    align-items: center;
    background: var(--twentyone--options--option-background);
    color: var(--twentyone--options--option-color);
    cursor: pointer;
    display: flex;
    fill: var(--twentyone--options--option-icon-color);
    gap: var(--twentyone--options--option-gap);
    padding: var(--twentyone--options--option-padding);
    border-radius: var(--twentyone--options--option-border-radius);
    transition: var(--twentyone--element--transition);
    -webkit-user-select: none;
    user-select: none;
  }
  .twentyone-option .twentyone-label {
    color: inherit;
    flex: 1 1 100%;
    font-size: var(--twentyone--options--option-font-size);
  }
  .twentyone-option .twentyone-icon svg,
  .twentyone-option .twentyone-icon img {
    font-size: var(--twentyone--options--option-icon-font-size);
  }
  .twentyone-option .twentyone-icon.is--check {
    opacity: 0;
  }
  .twentyone-option:hover .twentyone-option-content {
    background: var(--twentyone--options--option-background-hover);
    color: var(--twentyone--options--option-color-hover);
    fill: var(--twentyone--options--option-icon-color-hover);
  }
  .twentyone-option.is--active .twentyone-option-content {
    background: var(--twentyone--options--option-background-active);
    color: var(--twentyone--options--option-color-active);
    fill: var(--twentyone--options--option-icon-color-active);
  }
  .twentyone-option.is--active .twentyone-icon.is--check {
    opacity: 1;
  }
  .twentyone-form-item > .twentyone-icon,
  .twentyone-checkbox > .twentyone-icon,
  .twentyone-toggle > .twentyone-icon,
  .twentyone-radio > .twentyone-icon,
  .twentyone-radiobutton > .twentyone-icon {
    pointer-events: none;
    fill: var(--twentyone--input--icon-color);
    transition: var(--twentyone--element--transition);
  }
  .twentyone-form-item > .twentyone-icon svg,
  .twentyone-form-item > .twentyone-icon img,
  .twentyone-checkbox > .twentyone-icon svg,
  .twentyone-checkbox > .twentyone-icon img,
  .twentyone-toggle > .twentyone-icon svg,
  .twentyone-toggle > .twentyone-icon img,
  .twentyone-radio > .twentyone-icon svg,
  .twentyone-radio > .twentyone-icon img,
  .twentyone-radiobutton > .twentyone-icon svg,
  .twentyone-radiobutton > .twentyone-icon img {
    font-size: var(--twentyone--input--icon-font-size);
  }
  .twentyone-form-item.is--inverted > .twentyone-icon,
  .twentyone-checkbox.is--inverted > .twentyone-icon,
  .twentyone-toggle.is--inverted > .twentyone-icon,
  .twentyone-radio.is--inverted > .twentyone-icon,
  .twentyone-radiobutton.is--inverted > .twentyone-icon {
    fill: var(--twentyone--input--inverted-icon-color);
  }
  .twentyone-checkbox,
  .twentyone-toggle,
  .twentyone-radio {
    --pading-inline: calc(var(--fake-element--width) + var(--twentyone--input--gap));
    --icon-width: calc(var(--twentyone--input--icon-font-size) + var(--twentyone--input--gap));
    --icon-width-left: 0px;
    --icon-width-right: 0px;
    position: relative;
  }
  .twentyone-checkbox .twentyone-fake-element,
  .twentyone-toggle .twentyone-fake-element,
  .twentyone-radio .twentyone-fake-element {
    pointer-events: none;
  }
  .twentyone-checkbox > .twentyone-icon,
  .twentyone-toggle > .twentyone-icon,
  .twentyone-radio > .twentyone-icon {
    position: absolute;
    top: 0;
    height: var(--fake-element--height);
  }
  .twentyone-checkbox .twentyone-label,
  .twentyone-toggle .twentyone-label,
  .twentyone-radio .twentyone-label {
    min-height: var(--fake-element--height);
    padding-left: calc(var(--pading-inline) + var(--icon-width-left));
    display: flex;
    align-items: center;
  }
  .twentyone-checkbox .twentyone-label.screen-reader-text,
  .twentyone-toggle .twentyone-label.screen-reader-text,
  .twentyone-radio .twentyone-label.screen-reader-text {
    clip-path: none;
    overflow: hidden !important;
  }
  .twentyone-checkbox.icon--left,
  .twentyone-toggle.icon--left,
  .twentyone-radio.icon--left {
    --icon-width-left: var(--icon-width);
  }
  .twentyone-checkbox.icon--left > .twentyone-icon,
  .twentyone-toggle.icon--left > .twentyone-icon,
  .twentyone-radio.icon--left > .twentyone-icon {
    left: var(--pading-inline);
  }
  .twentyone-checkbox.icon--right,
  .twentyone-toggle.icon--right,
  .twentyone-radio.icon--right {
    --icon-width-right: var(--icon-width);
  }
  .twentyone-checkbox.icon--right > .twentyone-icon,
  .twentyone-toggle.icon--right > .twentyone-icon,
  .twentyone-radio.icon--right > .twentyone-icon {
    right: 0;
  }
  .twentyone-checkbox.icon--right .twentyone-label,
  .twentyone-toggle.icon--right .twentyone-label,
  .twentyone-radio.icon--right .twentyone-label {
    padding-right: var(--icon-width-right);
  }
  .twentyone-fieldset-items {
    display: flex;
    flex-direction: column;
    gap: var(--twentyone--form--item--gap);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1em;
  }
  .twentyone-radiobutton > ul > li input:focus-visible ~ .twentyone-label {
    outline-color: var(--twentyone--element--outline-color-focus);
    outline-offset: var(--twentyone--element--outline-offset-focus);
  }
  .twentyone-radiobutton.is--inverted > ul > li input:focus-visible ~ .twentyone-label {
    outline-color: var(--twentyone--element--outline-color-focus-inverted);
  }
}