/* app/javascript/styles/di_onboarding.css */
@layer components {
  .flowbite .di-onboarding-steps {
    display: flex;
    flex-direction: column;
    padding-left: 24px;
  }
  @media (min-width: 1024px) {
    .flowbite .di-onboarding-steps {
      padding-left: 16px;
    }
  }
  .flowbite .di-onboarding-steps_item {
    display: flex;
    gap: 12px;
    align-items: stretch;
  }
  .flowbite .di-onboarding-steps_rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 1px;
  }
  .flowbite .di-onboarding-steps_dot {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 3px solid var(--color-gray-900);
    border-radius: 9999px;
    background-color: var(--color-primary-500);
  }
  .flowbite .di-onboarding-steps_line {
    flex: 1 1 auto;
    width: 3px;
    background-color: var(--color-gray-900);
  }
  .flowbite .di-onboarding-steps_item:last-child .di-onboarding-steps_line {
    display: none;
  }
  .flowbite .di-onboarding-steps_text {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 10px;
    padding-bottom: var(--spacing-ds-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xxs);
  }
  .flowbite .di-onboarding-steps_item:last-child .di-onboarding-steps_text {
    padding-bottom: 0;
  }
}
@layer components {
  .flowbite .di-onboarding-step {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-gray-50);
  }
  .flowbite .di-onboarding-step_body {
    flex: 1 1 auto;
  }
  .flowbite .di-onboarding-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-gray-300);
  }
  .flowbite .di-onboarding-header_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-ds-md);
    min-height: 80px;
    padding: var(--spacing-ds-sm) var(--spacing-ds-2xl);
  }
  @media (max-width: 767px) {
    .flowbite .di-onboarding-header_bar {
      padding: var(--spacing-ds-sm) var(--spacing-ds-md);
    }
  }
  .flowbite .di-onboarding-header_action {
    margin: 0;
    white-space: nowrap;
  }
  .flowbite .di-onboarding-step_container {
    box-sizing: content-box;
    margin: 0 auto;
    padding: var(--spacing-ds-2xl) var(--spacing-ds-md) var(--spacing-ds-4xl);
  }
  .flowbite .di-onboarding-step_body.is-narrow .di-onboarding-step_container {
    max-width: 592px;
  }
  .flowbite .di-onboarding-step_body.is-wide .di-onboarding-step_container {
    max-width: 1142px;
  }
  @media (min-width: 768px) {
    .flowbite .di-onboarding-step_container {
      padding-left: var(--spacing-ds-2xl);
      padding-right: var(--spacing-ds-2xl);
    }
  }
  .flowbite .di-onboarding-step_intro {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--spacing-ds-xl);
  }
  @media (max-width: 767px) {
    .flowbite .di-onboarding-step_intro {
      gap: var(--spacing-ds-xs);
    }
    .flowbite .di-onboarding-step_intro > h1 {
      font-size: 24px;
      line-height: 34px;
    }
    .flowbite .di-onboarding-step_intro > p {
      font-size: 14px;
      line-height: 20px;
    }
  }
  @media (min-width: 1024px) {
    .flowbite .di-onboarding-step_body.is-wide .di-onboarding-step_intro {
      max-width: 592px;
    }
  }
  .flowbite .di-onboarding-step_columns {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-2xl);
  }
  .flowbite .di-onboarding-step_main {
    flex: 1 1 auto;
    min-width: 0;
  }
  @media (min-width: 1024px) {
    .flowbite .di-onboarding-step_body.is-wide .di-onboarding-step_columns {
      flex-direction: row;
      align-items: flex-start;
    }
    .flowbite .di-onboarding-step_body.is-wide .di-onboarding-step_main {
      flex: 0 1 592px;
      max-width: 592px;
    }
    .flowbite .di-onboarding-step_aside {
      flex: 0 0 518px;
      max-width: 518px;
      position: sticky;
      top: 112px;
    }
  }
  .flowbite .di-onboarding-progress {
    margin-bottom: var(--spacing-ds-2xl);
  }
  .flowbite .di-onboarding-progress_list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-ds-xs) var(--spacing-ds-2xl);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .flowbite .di-onboarding-progress_item {
    display: flex;
    font-weight: 400;
    color: var(--color-gray-600);
  }
  .flowbite .di-onboarding-progress_link {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-xs);
    color: inherit;
    text-decoration: none;
  }
  .flowbite a.di-onboarding-progress_link:hover .di-onboarding-progress_label {
    color: var(--color-gray-900);
    text-decoration: underline;
  }
  .flowbite a.di-onboarding-progress_link:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 4px;
    border-radius: var(--spacing-ds-button);
  }
  .flowbite .di-onboarding-progress_dot {
    display: block;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    border: 1px solid var(--color-gray-400);
    background-color: transparent;
  }
  .flowbite .di-onboarding-progress_item.is-complete .di-onboarding-progress_dot {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-200);
  }
  .flowbite .di-onboarding-progress_item.is-current {
    font-weight: 500;
    color: var(--color-gray-900);
  }
  .flowbite .di-onboarding-progress_item.is-current .di-onboarding-progress_dot {
    border-color: var(--color-primary-500);
    background-color: var(--color-white);
    box-shadow: 0 0 0 4px var(--color-primary-50);
  }
  .flowbite .di-onboarding-progress_label {
    white-space: nowrap;
  }
  .flowbite .di-onboarding-progress_label-full {
    display: none;
  }
  @media (min-width: 768px) {
    .flowbite .di-onboarding-progress_label-full {
      display: inline;
    }
    .flowbite .di-onboarding-progress_label-short {
      display: none;
    }
  }
  .flowbite .di-onboarding-sections {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--spacing-ds-card);
    overflow: hidden;
  }
  .flowbite .di-onboarding-section + .di-onboarding-section {
    border-top: 1px solid var(--color-gray-200);
  }
  .flowbite .di-onboarding-section_header {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-md);
    width: 100%;
    padding: var(--spacing-ds-md) var(--spacing-ds-xl);
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    cursor: pointer;
  }
  .flowbite .di-onboarding-section.is-open .di-onboarding-section_header {
    border-bottom-color: var(--color-gray-200);
  }
  .flowbite .di-onboarding-section_title {
    flex: 1 1 0;
    min-width: 0;
  }
  .flowbite .di-onboarding-section_badge {
    flex-shrink: 0;
    margin-right: var(--spacing-ds-xs);
  }
  .flowbite .badge.di-onboarding-section_badge--progress {
    background-color: var(--color-primary-100);
    color: var(--color-gray-700);
  }
  .flowbite .di-onboarding-section_chevron {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: var(--spacing-ds-button);
    color: var(--color-gray-500);
    transition: transform 150ms ease;
  }
  .flowbite .di-onboarding-section_chevron svg {
    width: 20px;
    height: 20px;
  }
  .flowbite .di-onboarding-section_header:hover .di-onboarding-section_chevron {
    background-color: var(--color-gray-50);
  }
  .flowbite .di-onboarding-section.is-open .di-onboarding-section_chevron {
    transform: rotate(180deg);
  }
  .flowbite .di-onboarding-section:not(.is-open) .di-onboarding-section_panel {
    display: none;
  }
  .flowbite .di-onboarding-section_panel {
    padding: 0 var(--spacing-ds-xl) var(--spacing-ds-xl);
  }
  .flowbite .di-onboarding-section_fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-lg);
    padding-top: var(--spacing-ds-xl);
  }
  .flowbite .di-onboarding-section_actions {
    display: flex;
    justify-content: flex-start;
    padding-top: var(--spacing-ds-2xl);
  }
  .flowbite [data-di-onboarding-section=details] .di-onboarding-section_actions,
  .flowbite [data-di-onboarding-sections=documents] .di-onboarding-section_actions {
    padding-top: var(--spacing-ds-xl);
  }
  .flowbite .di-onboarding-errors {
    list-style: disc;
    padding-left: var(--spacing-ds-md);
  }
  .flowbite .di-onboarding-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-ds-xl);
  }
  .flowbite .di-onboarding-step_body.is-wide .di-onboarding-actions {
    max-width: 592px;
  }
  .flowbite .di-onboarding-actions_form {
    margin: 0;
  }
  .flowbite .di-onboarding-actions_next {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-onboarding-actions_next[disabled] {
    pointer-events: none;
    cursor: not-allowed;
    background-color: var(--color-gray-200);
    color: var(--color-gray-400);
  }
  .flowbite .di-onboarding-actions_icon svg {
    width: 20px;
    height: 20px;
  }
  @media (max-width: 1023px) {
    .flowbite .di-onboarding-step_body.is-wide .di-onboarding-actions {
      max-width: none;
    }
  }
  @media (max-width: 767px) {
    .flowbite .di-onboarding-actions_form {
      width: 100%;
    }
    .flowbite .di-onboarding-actions_next {
      width: 100%;
      justify-content: center;
    }
  }
  .flowbite .di-onboarding-footer {
    border-top: 1px solid var(--color-gray-200);
  }
  .flowbite .di-onboarding-footer_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-ds-xs);
    padding: var(--spacing-ds-md) var(--spacing-ds-2xl);
  }
  .flowbite .di-onboarding-footer_links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-ds-xxs) var(--spacing-ds-md);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    color: var(--color-gray-600);
  }
  @media (min-width: 768px) {
    .flowbite .di-onboarding-footer_inner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
    .flowbite .di-onboarding-footer_links {
      justify-content: flex-end;
    }
  }
}
@layer components {
  .flowbite .di-onboarding-create-account_card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-2xl);
    padding: var(--spacing-ds-xl);
  }
  @media (max-width: 639px) {
    .flowbite .di-onboarding-create-account_card {
      gap: var(--spacing-ds-xl);
      padding: var(--spacing-ds-md);
    }
  }
  .flowbite .di-onboarding-create-account_fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-md);
  }
  .flowbite .di-onboarding-create-account_field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .flowbite .di-onboarding-create-account_label {
    display: block;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-onboarding-create-account_hint {
    margin: 0;
  }
  .flowbite .di-onboarding-create-account_row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-md);
  }
  @media (min-width: 640px) {
    .flowbite .di-onboarding-create-account_row {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--spacing-ds-xl);
    }
    .flowbite .di-onboarding-create-account_field-phone {
      flex: 1 1 0;
    }
    .flowbite .di-onboarding-create-account_field-postcode {
      flex: 0 0 170px;
      width: 170px;
    }
  }
  .flowbite .di-onboarding-create-account_phone {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-onboarding-create-account_country {
    flex: 0 0 90px;
    width: 90px;
  }
  .flowbite .di-onboarding-create-account_phone .di-onboarding-create-account_input {
    flex: 1 1 0;
    min-width: 0;
  }
  .flowbite .di-onboarding-create-account_input-group {
    position: relative;
    display: flex;
    align-items: center;
  }
  .flowbite .di-onboarding-create-account_input-icon {
    position: absolute;
    left: 14px;
    display: flex;
    align-items: center;
    pointer-events: none;
    color: var(--color-gray-500);
  }
  .flowbite .di-onboarding-create-account_input-icon svg {
    width: 20px;
    height: 20px;
  }
  .flowbite .di-onboarding-create-account_input-group .di-onboarding-create-account_input {
    padding-left: 42px;
  }
  .flowbite .di-onboarding-create-account_error {
    margin: 0;
  }
  .flowbite .di-onboarding-create-account_error a {
    text-decoration: underline;
  }
  .flowbite .di-onboarding-create-account_field.is-error .di-onboarding-create-account_input,
  .flowbite .di-onboarding-create-account_field.is-error select,
  .flowbite .di-onboarding-create-account_checkbox.is-error [type=checkbox] {
    border-color: var(--color-error-500);
  }
  .flowbite .di-onboarding-create-account_checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-md);
  }
  .flowbite .di-onboarding-create-account_checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-onboarding-create-account_checkbox-row [type=checkbox] {
    flex-shrink: 0;
    margin-top: 2px;
  }
  .flowbite .di-onboarding-create-account_remember {
    display: flex;
    flex-direction: column;
  }
  .flowbite .di-onboarding-create-account_actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-ds-2xl);
  }
  @media (max-width: 639px) {
    .flowbite .di-onboarding-create-account_actions {
      justify-content: stretch;
    }
    .flowbite .di-onboarding-create-account_submit {
      width: 100%;
      justify-content: center;
    }
  }
  .flowbite .di-onboarding-create-account_combobox {
    position: relative;
  }
  .flowbite .di-onboarding-create-account_combobox-input {
    padding-right: 42px;
  }
  .flowbite .di-onboarding-create-account_combobox-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
    color: var(--color-gray-500);
  }
  .flowbite .di-onboarding-create-account_combobox-icon svg {
    width: 20px;
    height: 20px;
  }
  .flowbite .di-onboarding-create-account_combobox-list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: var(--spacing-ds-xxs) 0;
    list-style: none;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--spacing-ds-button);
    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  }
  .flowbite .di-onboarding-create-account_combobox-option,
  .flowbite .di-onboarding-create-account_combobox-empty {
    padding: var(--spacing-ds-xs) var(--spacing-ds-sm);
  }
  .flowbite .di-onboarding-create-account_combobox-option {
    cursor: pointer;
  }
  .flowbite .di-onboarding-create-account_combobox-option:hover {
    background-color: var(--color-gray-50);
  }
  .flowbite .di-onboarding-create-account_intro {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--spacing-ds-2xl);
  }
  @media (max-width: 767px) {
    .flowbite .di-onboarding-create-account_intro {
      gap: var(--spacing-ds-xs);
      margin-bottom: var(--spacing-ds-xl);
    }
    .flowbite .di-onboarding-create-account_intro > h1 {
      font-size: 24px;
      line-height: 34px;
    }
    .flowbite .di-onboarding-create-account_intro > p {
      font-size: 14px;
      line-height: 20px;
    }
  }
  .flowbite .di-onboarding-create-account_otp {
    display: flex;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-onboarding-create-account_otp-box {
    flex: 1 1 0;
    min-width: 0;
    max-width: 64px;
    height: 64px;
    padding: 2px 8px;
    text-align: center;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: var(--color-primary-600);
    border-radius: 10px;
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  }
  .flowbite .di-onboarding-create-account_otp-box::placeholder {
    color: var(--color-gray-300);
  }
  .flowbite .di-onboarding-create-account_otp-box:not(:placeholder-shown) {
    border-width: 2px;
    border-color: var(--color-primary-500);
  }
  .flowbite .di-onboarding-create-account_otp.is-error .di-onboarding-create-account_otp-box {
    border-color: var(--color-error-500);
    color: var(--color-error-500);
  }
  .flowbite .di-onboarding-create-account_resend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-ds-xxs) var(--spacing-ds-xs);
  }
  .flowbite .di-onboarding-create-account_debug {
    margin: 0;
    display: flex;
    gap: var(--spacing-ds-xxs);
  }
}
@layer components {
  .flowbite .di-licence {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-md);
  }
  .flowbite .di-licence_body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xl);
    padding: var(--spacing-ds-xl);
    background-color: var(--color-gray-25);
    border-radius: var(--spacing-ds-card);
  }
  .flowbite .di-licence_group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-md);
  }
  .flowbite .di-licence_dropzones {
    display: flex;
    gap: var(--spacing-ds-md);
    align-items: flex-start;
  }
  .flowbite .di-licence_dropzones > * {
    flex: 1 0 0;
    min-width: 0;
  }
  .flowbite .di-licence_footnote {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--color-gray-500);
  }
  .flowbite .di-licence_error {
    display: none;
  }
  .flowbite .di-licence[data-state=failed] .di-licence_error {
    display: flex;
  }
  .flowbite .di-licence-drop {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-licence-drop_label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-600);
  }
  .flowbite .di-licence-drop_input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .flowbite .di-licence-drop_tile {
    display: none;
    position: relative;
    width: 100%;
    text-align: left;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--spacing-ds-card);
    padding: var(--spacing-ds-md);
  }
  .flowbite .di-licence-drop[data-state=empty] .di-licence-drop_empty,
  .flowbite .di-licence-drop[data-state=uploading] .di-licence-drop_uploading,
  .flowbite .di-licence-drop[data-state=complete] .di-licence-drop_complete,
  .flowbite .di-licence-drop[data-state=error] .di-licence-drop_error {
    display: flex;
  }
  .flowbite .di-licence-drop_empty {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-ds-sm);
    padding: var(--spacing-ds-md) var(--spacing-ds-xl);
    cursor: pointer;
  }
  .flowbite .di-licence-drop_empty:hover {
    border-color: var(--color-gray-300);
  }
  .flowbite .di-licence-drop_featured {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background-color: var(--color-gray-100);
    border: 4px solid var(--color-gray-50);
    color: var(--color-gray-600);
  }
  .flowbite .di-licence-drop_icon,
  .flowbite .di-licence-drop_icon > svg {
    display: block;
    width: 20px;
    height: 20px;
  }
  .flowbite .di-licence-drop_text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-ds-xxs);
    width: 100%;
  }
  .flowbite .di-licence-drop_cta {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-primary-700);
  }
  .flowbite .di-licence-drop_hint {
    font-size: 12px;
    line-height: 18px;
    color: var(--color-gray-600);
    text-align: center;
  }
  .flowbite .di-licence-drop_uploading,
  .flowbite .di-licence-drop_complete,
  .flowbite .di-licence-drop_error {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-ds-xxs);
  }
  .flowbite .di-licence-drop_meta {
    display: flex;
    flex-direction: column;
    padding-right: var(--spacing-ds-2xl);
    min-width: 0;
  }
  .flowbite .di-licence-drop_filename,
  .flowbite .di-licence-drop_filesize,
  .flowbite .di-licence-drop_errortitle,
  .flowbite .di-licence-drop_errorfile {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
  }
  .flowbite .di-licence-drop_filename {
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-licence-drop_filesize {
    color: var(--color-gray-600);
  }
  .flowbite .di-licence-drop_progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-sm);
  }
  .flowbite .di-licence-drop_track {
    flex: 1 0 0;
    min-width: 0;
    height: 8px;
    border-radius: 4px;
    background-color: var(--color-gray-200);
    overflow: hidden;
  }
  .flowbite .di-licence-drop_bar {
    height: 8px;
    border-radius: 4px;
    background-color: var(--color-primary-500);
    transition: width 120ms linear;
  }
  .flowbite .di-licence-drop_percent {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-licence-drop_remove {
    position: absolute;
    top: 7px;
    right: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-ds-xs);
    border-radius: var(--spacing-ds-button);
    color: var(--color-gray-500);
  }
  .flowbite .di-licence-drop_remove > svg {
    display: block;
    width: 20px;
    height: 20px;
  }
  .flowbite .di-licence-drop_remove:hover {
    color: var(--color-gray-700);
  }
  .flowbite .di-licence-drop_complete {
    border-color: var(--color-primary-600);
    cursor: pointer;
  }
  .flowbite .di-licence-drop_preview {
    display: block;
    width: 100%;
    height: 154px;
    overflow: hidden;
    background-color: var(--color-gray-100);
  }
  .flowbite .di-licence-drop_preview > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .flowbite .di-licence-drop_error {
    background-color: var(--color-error-25);
    border-color: var(--color-error-300);
  }
  .flowbite .di-licence-drop_error .di-licence-drop_errortitle {
    font-weight: 500;
    color: var(--color-error-700);
  }
  .flowbite .di-licence-drop_error .di-licence-drop_errorfile {
    color: var(--color-error-600);
  }
  .flowbite .di-licence-drop_error .di-licence-drop_remove {
    color: var(--color-error-600);
  }
  .flowbite .di-licence-drop_retry {
    align-self: flex-start;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-error-700);
    text-decoration: underline;
  }
  .flowbite .di-onboarding-step_main:has(.di-licence[data-action-enabled=false]) .di-onboarding-actions_next,
  .flowbite .di-onboarding-step_main:has(.di-licence[data-state=reading]) .di-onboarding-actions_next {
    pointer-events: none;
    background-color: var(--color-gray-200);
    color: var(--color-gray-400);
  }
  @media (max-width: 767px) {
    .flowbite .di-licence_body {
      padding: var(--spacing-ds-md);
    }
    .flowbite .di-licence_dropzones {
      flex-direction: column;
      gap: var(--spacing-ds-md);
    }
    .flowbite .di-licence_dropzones > * {
      width: 100%;
    }
  }
}
@layer components {
  .flowbite .di-onboarding-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xl);
  }
  @media (min-width: 640px) {
    .flowbite .di-onboarding-details {
      gap: var(--spacing-ds-2xl);
    }
  }
  .flowbite .di-onboarding-details_field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .flowbite .di-onboarding-details_label {
    display: block;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite legend.di-onboarding-details_label.required::after {
    content: "*";
    padding-left: var(--spacing-ds-xxs);
    color: var(--color-primary-500);
  }
  .flowbite .di-onboarding-details_hint,
  .flowbite .di-onboarding-details_error {
    margin: 0;
  }
  .flowbite .di-onboarding-details_row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xl);
  }
  @media (min-width: 640px) {
    .flowbite .di-onboarding-details_row {
      flex-direction: row;
      align-items: flex-start;
    }
    .flowbite .di-onboarding-details_row > .di-onboarding-details_field {
      flex: 1 1 0;
    }
  }
  .flowbite .di-onboarding-details_radios {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-ds-sm) var(--spacing-ds-2xl);
    padding-top: 6px;
  }
  .flowbite .di-onboarding-details_radio {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-xs);
    margin: 0;
    cursor: pointer;
  }
  .flowbite .di-onboarding-details_radio [type=radio] {
    flex-shrink: 0;
  }
  .flowbite .di-onboarding-details_career {
    display: flex;
    gap: var(--spacing-ds-md);
    padding-top: 6px;
  }
  .flowbite .di-onboarding-details_career > select {
    flex: 1 1 0;
    min-width: 0;
  }
  @media (min-width: 640px) {
    .flowbite .di-onboarding-details_career > select:first-child {
      flex: 0 0 136px;
      width: 136px;
    }
    .flowbite .di-onboarding-details_career > select:last-child {
      flex: 0 0 128px;
      width: 128px;
    }
  }
  .flowbite .di-onboarding-details_prefill-alert {
    margin-bottom: var(--spacing-ds-xl);
  }
  .flowbite .di-onboarding-details_field.is-error input:where([type=text], [type=date]),
  .flowbite .di-onboarding-details_field.is-error select {
    border-color: var(--color-error-500);
  }
}
@layer components {
  .flowbite .di-bio {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-2xl);
  }
  .flowbite .di-bio_error[hidden] {
    display: none;
  }
  .flowbite .di-bio_questions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-2xl);
  }
  .flowbite .di-bio_question {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-sm);
  }
  .flowbite .di-bio_question-label {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-bio_tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-ds-sm);
  }
  .flowbite .di-bio-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
  }
  .flowbite .di-bio-tag:hover {
    border-color: var(--color-gray-400);
  }
  .flowbite .di-bio-tag_input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .flowbite .di-bio-tag_text {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-gray-700);
  }
  .flowbite .di-bio-tag:has(.di-bio-tag_input:checked) {
    background-color: var(--color-primary-25);
    border-color: var(--color-primary-500);
  }
  .flowbite .di-bio-tag:has(.di-bio-tag_input:checked) .di-bio-tag_text {
    font-weight: 500;
    color: var(--color-gray-900);
  }
  .flowbite .di-bio-tag:has(.di-bio-tag_input:focus-visible) {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 4px var(--color-primary-25);
  }
  .flowbite .di-bio[data-state=generated] .di-bio_generate,
  .flowbite .di-bio[data-state=empty] .di-bio_result {
    display: none;
  }
  .flowbite .di-bio_generate {
    display: flex;
  }
  .flowbite .di-bio_result {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-bio_result-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-ds-sm);
  }
  .flowbite .di-bio_label {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-bio_reset {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-ds-xxxs);
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-600);
    background: none;
    border: 0;
    border-radius: var(--spacing-ds-button);
    cursor: pointer;
  }
  .flowbite .di-bio_reset:hover {
    color: var(--color-gray-800);
  }
  .flowbite .di-bio_reset:disabled {
    color: var(--color-gray-300);
    cursor: not-allowed;
  }
  .flowbite .di-bio_reset-icon,
  .flowbite .di-bio_reset-icon > svg {
    display: block;
    width: 20px;
    height: 20px;
  }
  .flowbite .di-bio_textarea {
    min-height: 180px;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: vertical;
  }
  .flowbite .di-bio_result-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-bio_actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-bio_arrows {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-bio_arrows[hidden] {
    display: none;
  }
  .flowbite .di-bio_arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-gray-600);
    background: none;
    border: 0;
    cursor: pointer;
  }
  .flowbite .di-bio_arrow > svg {
    display: block;
    width: 24px;
    height: 24px;
  }
  .flowbite .di-bio_arrow:hover {
    color: var(--color-gray-900);
  }
  .flowbite .di-bio_arrow:disabled {
    color: var(--color-gray-300);
    cursor: not-allowed;
  }
  .flowbite .di-bio_regenerate .btn_icon {
    color: var(--color-primary-500);
  }
  .flowbite .di-bio_counter {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--color-gray-500);
  }
  .flowbite .di-bio[data-busy=true] .di-bio_generate-button,
  .flowbite .di-bio[data-busy=true] .di-bio_regenerate,
  .flowbite .di-bio[data-busy=true] .di-bio_reset,
  .flowbite .di-bio[data-busy=true] .di-bio_arrow {
    pointer-events: none;
    opacity: 0.6;
  }
}
@layer components {
  .flowbite .di-vehicle {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-2xl);
  }
  .flowbite .di-vehicle [hidden] {
    display: none !important;
  }
  .flowbite .di-vehicle_transmission {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-sm);
    margin: 0;
    padding: 0;
    border: 0;
  }
  .flowbite .di-vehicle_transmission-options {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-2xl);
  }
  .flowbite .di-vehicle_transmission-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-vehicle_card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-md);
  }
  .flowbite .di-vehicle_card-title {
    margin: 0;
  }
  .flowbite .di-vehicle_card-fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xl);
  }
  .flowbite .di-vehicle_signage-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-sm);
  }
  @media (min-width: 640px) {
    .flowbite .di-vehicle_signage-group {
      gap: var(--spacing-ds-md);
    }
  }
  .flowbite .di-vehicle_field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .flowbite .di-vehicle_label {
    display: block;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-vehicle_hint {
    margin: 0;
  }
  .flowbite .di-vehicle_plate {
    text-transform: uppercase;
  }
  .flowbite .di-vehicle_plate::placeholder {
    text-transform: none;
  }
  .flowbite .di-vehicle_row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-ds-md);
  }
  .flowbite .di-vehicle_field-year {
    grid-column: 1 / -1;
  }
  @media (min-width: 640px) {
    .flowbite .di-vehicle_row {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .flowbite .di-vehicle_field-year {
      grid-column: auto;
    }
  }
  .flowbite .di-vehicle_radios {
    display: grid;
    grid-template-columns: 109px auto;
    justify-content: start;
    gap: var(--spacing-ds-xs);
    padding-top: 6px;
  }
  .flowbite .di-vehicle_radio {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-vehicle_checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-xxs);
  }
  .flowbite .di-vehicle_checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-vehicle_checkbox-row [type=checkbox] {
    flex-shrink: 0;
    margin-top: 2px;
  }
  .flowbite .di-vehicle_help {
    position: relative;
    display: flex;
    align-items: center;
  }
  .flowbite .di-vehicle_help-trigger {
    display: flex;
    align-items: center;
    color: var(--color-gray-400);
    cursor: pointer;
  }
  .flowbite .di-vehicle_help-trigger:hover,
  .flowbite .di-vehicle_help-trigger:focus-visible {
    color: var(--color-gray-600);
  }
  .flowbite .di-vehicle_help-trigger svg {
    width: 16px;
    height: 16px;
  }
  .flowbite .di-vehicle_tooltip {
    bottom: calc(100% + 8px);
    left: 50%;
    width: max-content;
    max-width: 260px;
    transform: translateX(-50%);
    white-space: normal;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .flowbite .di-vehicle_help-trigger:hover + .di-vehicle_tooltip,
  .flowbite .di-vehicle_help-trigger:focus-visible + .di-vehicle_tooltip {
    visibility: visible;
    opacity: 1;
  }
}
@layer components {
  .flowbite .di-photo {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xl);
  }
  @media (min-width: 640px) {
    .flowbite .di-photo {
      gap: var(--spacing-ds-2xl);
    }
  }
  .flowbite .di-photo_group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-sm);
  }
  .flowbite .di-photo_text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xxs);
  }
  .flowbite .di-photo_label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-photo_hint {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-gray-600);
  }
  .flowbite .di-photo_degraded {
    display: none;
  }
  .flowbite .di-photo[data-degraded=true] .di-photo_degraded {
    display: flex;
  }
  .flowbite .di-photo-drop {
    display: flex;
    flex-direction: column;
  }
  .flowbite .di-photo-drop_input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .flowbite .di-photo-drop_tile {
    display: none;
    position: relative;
    width: 100%;
    text-align: left;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--spacing-ds-card);
    padding: var(--spacing-ds-md);
  }
  .flowbite .di-photo-drop[data-state=empty] .di-photo-drop_empty,
  .flowbite .di-photo-drop[data-state=uploading] .di-photo-drop_progress,
  .flowbite .di-photo-drop[data-state=processing] .di-photo-drop_progress,
  .flowbite .di-photo-drop[data-state=complete] .di-photo-drop_complete,
  .flowbite .di-photo-drop[data-state=error] .di-photo-drop_error {
    display: flex;
  }
  .flowbite .di-photo-drop_empty {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-ds-sm);
    padding: var(--spacing-ds-md) var(--spacing-ds-xl);
    cursor: pointer;
  }
  .flowbite .di-photo-drop_empty:hover {
    border-color: var(--color-gray-300);
  }
  .flowbite .di-photo-drop_featured {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background-color: var(--color-gray-100);
    border: 4px solid var(--color-gray-50);
    color: var(--color-gray-600);
  }
  .flowbite .di-photo-drop_icon,
  .flowbite .di-photo-drop_icon > svg {
    display: block;
    width: 20px;
    height: 20px;
  }
  .flowbite .di-photo-drop_cta {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-primary-600);
  }
  .flowbite .di-photo-drop_hint {
    font-size: 12px;
    line-height: 18px;
    color: var(--color-gray-600);
    text-align: center;
  }
  .flowbite .di-photo-drop_progress,
  .flowbite .di-photo-drop_complete,
  .flowbite .di-photo-drop_error {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-ds-xxs);
  }
  .flowbite .di-photo-drop_meta {
    display: flex;
    flex-direction: column;
    padding-right: var(--spacing-ds-2xl);
    min-width: 0;
  }
  .flowbite .di-photo-drop_filename,
  .flowbite .di-photo-drop_filesize,
  .flowbite .di-photo-drop_errortitle,
  .flowbite .di-photo-drop_errorfile {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
  }
  .flowbite .di-photo-drop_filename {
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-photo-drop_filesize {
    color: var(--color-gray-600);
  }
  .flowbite .di-photo-drop_progressrow {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-sm);
    margin-top: var(--spacing-ds-xxs);
  }
  .flowbite .di-photo-drop_track {
    flex: 1 0 0;
    min-width: 0;
    height: 8px;
    border-radius: 4px;
    background-color: var(--color-gray-200);
    overflow: hidden;
  }
  .flowbite .di-photo-drop_bar {
    height: 8px;
    border-radius: 4px;
    background-color: var(--color-primary-500);
    transition: width 120ms linear;
  }
  .flowbite .di-photo-drop_percent {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-photo-drop_processinglabel {
    display: none;
    flex-direction: column;
    gap: var(--spacing-ds-xxs);
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-photo-drop_processinghint {
    font-weight: 400;
    color: var(--color-gray-600);
  }
  .flowbite .di-photo-drop[data-state=processing] .di-photo-drop_processinglabel {
    display: flex;
  }
  .flowbite .di-photo-drop[data-state=processing] .di-photo-drop_percent {
    display: none;
  }
  .flowbite .di-photo-drop[data-state=processing] .di-photo-drop_bar {
    width: 40% !important;
    animation: di-photo-sweep 1200ms ease-in-out infinite;
  }
  @keyframes di-photo-sweep {
    0% {
      margin-left: 0;
    }
    50% {
      margin-left: 60%;
    }
    100% {
      margin-left: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .flowbite .di-photo-drop[data-state=processing] .di-photo-drop_bar {
      width: 100% !important;
      animation: none;
    }
  }
  .flowbite .di-photo-drop_remove {
    position: absolute;
    top: 7px;
    right: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-ds-xs);
    border-radius: var(--spacing-ds-button);
    color: var(--color-gray-500);
  }
  .flowbite .di-photo-drop_remove > svg {
    display: block;
    width: 20px;
    height: 20px;
  }
  .flowbite .di-photo-drop_remove:hover {
    color: var(--color-gray-700);
  }
  .flowbite .di-photo-drop_complete {
    width: 254px;
    max-width: 100%;
    border-color: var(--color-primary-600);
    cursor: pointer;
  }
  .flowbite .di-photo-drop_preview {
    display: block;
    width: 100%;
    height: 198px;
    background-color: var(--color-gray-100);
    overflow: hidden;
  }
  .flowbite .di-photo-drop_preview > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .flowbite .di-photo-drop_error {
    background-color: var(--color-error-25);
    border-color: var(--color-error-300);
  }
  .flowbite .di-photo-drop_error .di-photo-drop_errortitle {
    font-weight: 500;
    color: var(--color-error-700);
  }
  .flowbite .di-photo-drop_error .di-photo-drop_errorfile {
    color: var(--color-error-600);
  }
  .flowbite .di-photo-drop_error .di-photo-drop_remove {
    color: var(--color-error-600);
  }
  .flowbite .di-photo-drop_retry {
    align-self: flex-start;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-error-700);
    text-decoration: underline;
  }
  .flowbite .di-photo-tips .alert_content {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-ds-md);
  }
  .flowbite .di-photo-tips .alert_text {
    flex: 1 0 0;
    min-width: 0;
  }
  .flowbite .di-photo-tips_list {
    margin: 0;
    padding-left: 21px;
    list-style: disc;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-gray-600);
  }
  .flowbite .di-photo-tips_examples {
    display: flex;
    flex-shrink: 0;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-photo-tips_example {
    width: 73px;
    height: 74px;
    border-radius: var(--spacing-ds-card);
    object-fit: cover;
  }
  @media (max-width: 767px) {
    .flowbite .di-photo-tips .alert_content {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--spacing-ds-sm);
    }
    .flowbite .di-photo-tips .alert_icon {
      display: block;
    }
  }
}
@layer components {
  .flowbite .di-preview-rail {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-md);
  }
  .flowbite .di-preview {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: none;
  }
  .flowbite .di-preview_banner {
    height: 133px;
    margin-bottom: -133px;
    background-color: var(--color-primary-500);
  }
  .flowbite .di-preview_content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-2xl);
    padding: var(--spacing-ds-xl);
  }
  .flowbite .di-preview_heading {
    padding-top: var(--spacing-ds-2xl);
  }
  .flowbite .di-preview_identity {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-ds-md);
  }
  .flowbite .di-preview_avatar {
    width: 155px;
    height: 155px;
    border-width: 4px;
  }
  .flowbite .di-preview_name {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }
  .flowbite .di-preview_blocks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-2xl);
  }
  .flowbite .di-preview_block {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .flowbite .di-preview_label,
  .flowbite .di-preview_bio,
  .flowbite .di-preview_vehicle {
    margin: 0;
  }
  .flowbite .di-preview_bio {
    white-space: pre-line;
    overflow-wrap: anywhere;
  }
  .flowbite .di-preview_languages {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-ds-md);
  }
  .flowbite .di-preview-panel {
    display: none;
  }
  .flowbite .di-preview_trigger {
    width: 100%;
  }
  @media (min-width: 1024px) {
    .flowbite .di-preview-panel {
      display: block;
    }
    .flowbite .di-preview_trigger {
      display: none;
    }
  }
  .flowbite .di-preview-modal {
    padding: var(--spacing-ds-md);
  }
  .flowbite .di-preview-modal_dialog {
    max-width: 400px;
    margin: auto;
  }
  .flowbite .di-preview .di-preview_close {
    top: 4px;
    right: 7px;
    z-index: 1;
    color: var(--color-gray-900);
  }
  .flowbite .di-preview .di-preview_close > svg {
    width: 24px;
    height: 24px;
  }
  .flowbite .di-preview.is-compact .di-preview_banner {
    height: 92px;
    margin-bottom: -92px;
  }
  .flowbite .di-preview.is-compact .di-preview_content {
    padding: var(--spacing-ds-md);
  }
  .flowbite .di-preview.is-compact .di-preview_avatar {
    width: 96px;
    height: 96px;
  }
}
@layer components {
  .flowbite .di-doc-licence {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xl);
  }
  .flowbite .di-doc-licence_uploads {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xl);
  }
  @media (min-width: 640px) {
    .flowbite .di-doc-licence_uploads {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--spacing-ds-md);
    }
    .flowbite .di-doc-licence_uploads > .di-doc-drop {
      flex: 1 1 0;
      min-width: 0;
    }
  }
  .flowbite .di-doc-licence_field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .flowbite .di-doc-licence_label {
    display: block;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-doc-licence_hint,
  .flowbite .di-doc-licence_error {
    margin: 0;
  }
  .flowbite .di-doc-licence_field.is-error input {
    border-color: var(--color-error-500);
  }
  .flowbite .di-doc-drop {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-doc-drop_label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-600);
  }
  .flowbite .di-doc-drop_input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .flowbite .di-doc-drop_tile {
    display: none;
    position: relative;
    width: 100%;
    text-align: left;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--spacing-ds-card);
    padding: var(--spacing-ds-md);
  }
  .flowbite .di-doc-drop[data-state=empty] .di-doc-drop_empty,
  .flowbite .di-doc-drop[data-state=uploading] .di-doc-drop_uploading,
  .flowbite .di-doc-drop[data-state=complete] .di-doc-drop_complete,
  .flowbite .di-doc-drop[data-state=error] .di-doc-drop_error {
    display: flex;
  }
  .flowbite .di-doc-drop_empty {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-ds-xxs);
    padding: var(--spacing-ds-md) var(--spacing-ds-xl);
    cursor: pointer;
  }
  .flowbite .di-doc-drop_empty:hover {
    border-color: var(--color-gray-300);
  }
  .flowbite .di-doc-drop_featured {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background-color: var(--color-gray-100);
    border: 4px solid var(--color-gray-50);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-ds-xs);
  }
  .flowbite .di-doc-drop_icon,
  .flowbite .di-doc-drop_icon > svg {
    display: block;
    width: 20px;
    height: 20px;
  }
  .flowbite .di-doc-drop_cta {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-primary-700);
  }
  .flowbite .di-doc-drop_hint {
    font-size: 12px;
    line-height: 18px;
    color: var(--color-gray-600);
    text-align: center;
  }
  .flowbite .di-doc-drop_uploading,
  .flowbite .di-doc-drop_complete,
  .flowbite .di-doc-drop_error {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-ds-xxs);
  }
  .flowbite .di-doc-drop_meta {
    display: flex;
    flex-direction: column;
    padding-right: var(--spacing-ds-2xl);
    min-width: 0;
  }
  .flowbite .di-doc-drop_filename,
  .flowbite .di-doc-drop_filesize,
  .flowbite .di-doc-drop_errortitle,
  .flowbite .di-doc-drop_errorfile {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
  }
  .flowbite .di-doc-drop_filename {
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-doc-drop_filesize {
    color: var(--color-gray-600);
  }
  .flowbite .di-doc-drop_progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-sm);
    margin-top: var(--spacing-ds-xxs);
  }
  .flowbite .di-doc-drop_track {
    flex: 1 0 0;
    min-width: 0;
    height: 8px;
    border-radius: 4px;
    background-color: var(--color-gray-200);
    overflow: hidden;
  }
  .flowbite .di-doc-drop_bar {
    height: 8px;
    border-radius: 4px;
    background-color: var(--color-primary-500);
    transition: width 120ms linear;
  }
  .flowbite .di-doc-drop_percent {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-doc-drop_complete {
    border-color: var(--color-primary-600);
    cursor: pointer;
  }
  .flowbite .di-doc-drop_preview {
    display: block;
    width: 100%;
    aspect-ratio: 232 / 154;
    overflow: hidden;
    background-color: var(--color-gray-100);
  }
  .flowbite .di-doc-drop_preview > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .flowbite .di-doc-drop_error {
    background-color: var(--color-error-25);
    border-color: var(--color-error-300);
  }
  .flowbite .di-doc-drop_error .di-doc-drop_errortitle {
    font-weight: 500;
    color: var(--color-error-700);
  }
  .flowbite .di-doc-drop_error .di-doc-drop_errorfile {
    color: var(--color-error-600);
  }
  .flowbite .di-doc-drop_retry {
    align-self: flex-start;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-error-700);
    text-decoration: underline;
  }
}
@layer components {
  .flowbite .di-ilicence {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xl);
  }
  .flowbite .di-ilicence_dropzones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-ds-md);
    align-items: flex-start;
  }
  .flowbite .di-ilicence_dropzones > * {
    flex: 1 0 0;
    min-width: 220px;
  }
  .flowbite .di-ilicence_dropzones.is-stacked {
    flex-direction: column;
  }
  .flowbite .di-ilicence_dropzones.is-stacked > * {
    flex: 1 1 auto;
    width: 100%;
  }
  .flowbite .di-ilicence_dropzones.is-single > * {
    flex: 0 1 264px;
  }
  .flowbite .di-ilicence_field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 512px;
  }
  .flowbite .di-ilicence_label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-ilicence_label.required::after {
    content: "*";
    margin-left: 2px;
    color: var(--color-primary-600);
  }
  .flowbite .di-ilicence_error {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--color-error-600);
  }
  .flowbite .di-ilicence_field.is-error input {
    border-color: var(--color-error-500);
  }
  .flowbite .di-ilicence_radios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-ds-md) var(--spacing-ds-xl);
  }
  .flowbite .di-ilicence_radio {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-ds-xs);
    cursor: pointer;
  }
  .flowbite .di-ilicence_check {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-ilicence_check-label {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-gray-700);
  }
  .flowbite .di-ilicence_trainer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-md);
    padding-top: var(--spacing-ds-xl);
    border-top: 1px solid var(--color-gray-200);
  }
  .flowbite .di-ilicence_trainer-intro {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xxs);
  }
  .flowbite .di-ilicence_trainer-title {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--color-gray-700);
  }
  .flowbite .di-ilicence_trainer-hint {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-gray-600);
  }
  .flowbite .di-ilicence-drop {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-ilicence-drop_label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-600);
  }
  .flowbite .di-ilicence-drop_sublabel {
    margin-top: calc(-1 * var(--spacing-ds-xxs));
    font-size: 12px;
    line-height: 18px;
    color: var(--color-gray-500);
  }
  .flowbite .di-ilicence-drop_input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .flowbite .di-ilicence-drop_tile {
    display: none;
    position: relative;
    width: 100%;
    text-align: left;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--spacing-ds-card);
    padding: var(--spacing-ds-md);
  }
  .flowbite .di-ilicence-drop[data-state=empty] .di-ilicence-drop_empty,
  .flowbite .di-ilicence-drop[data-state=uploading] .di-ilicence-drop_uploading,
  .flowbite .di-ilicence-drop[data-state=complete] .di-ilicence-drop_complete,
  .flowbite .di-ilicence-drop[data-state=error] .di-ilicence-drop_error {
    display: flex;
  }
  .flowbite .di-ilicence-drop.is-error .di-ilicence-drop_tile {
    border-color: var(--color-error-300);
  }
  .flowbite .di-ilicence-drop_empty {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-ds-xxs);
    padding: var(--spacing-ds-md) var(--spacing-ds-xl);
    cursor: pointer;
  }
  .flowbite .di-ilicence-drop_empty:hover {
    border-color: var(--color-gray-300);
  }
  .flowbite .di-ilicence-drop_featured {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background-color: var(--color-gray-100);
    border: 4px solid var(--color-gray-50);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-ds-xs);
  }
  .flowbite .di-ilicence-drop_icon,
  .flowbite .di-ilicence-drop_icon > svg {
    display: block;
    width: 20px;
    height: 20px;
  }
  .flowbite .di-ilicence-drop_cta {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-primary-700);
  }
  .flowbite .di-ilicence-drop_hint {
    font-size: 12px;
    line-height: 18px;
    color: var(--color-gray-600);
    text-align: center;
  }
  .flowbite .di-ilicence-drop_uploading,
  .flowbite .di-ilicence-drop_complete,
  .flowbite .di-ilicence-drop_error {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-ds-xxs);
  }
  .flowbite .di-ilicence-drop_swap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-ds-xxs);
    width: 100%;
    text-align: left;
    cursor: pointer;
  }
  .flowbite .di-ilicence-drop_meta {
    display: flex;
    flex-direction: column;
    padding-right: var(--spacing-ds-2xl);
    min-width: 0;
  }
  .flowbite .di-ilicence-drop_filename,
  .flowbite .di-ilicence-drop_filesize,
  .flowbite .di-ilicence-drop_errortitle,
  .flowbite .di-ilicence-drop_errorfile {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
  }
  .flowbite .di-ilicence-drop_filename {
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-ilicence-drop_filesize {
    color: var(--color-gray-600);
  }
  .flowbite .di-ilicence-drop_errortitle {
    font-weight: 500;
    color: var(--color-error-700);
  }
  .flowbite .di-ilicence-drop_errorfile {
    color: var(--color-gray-600);
  }
  .flowbite .di-ilicence-drop_preview {
    display: block;
    width: 100%;
    aspect-ratio: 232 / 154;
    overflow: hidden;
    background-color: var(--color-gray-100);
  }
  .flowbite .di-ilicence-drop_preview > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .flowbite .di-ilicence-drop_progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-sm);
    margin-top: var(--spacing-ds-xxs);
  }
  .flowbite .di-ilicence-drop_track {
    flex: 1 0 0;
    min-width: 0;
    height: 8px;
    border-radius: 4px;
    background-color: var(--color-gray-200);
    overflow: hidden;
  }
  .flowbite .di-ilicence-drop_bar {
    height: 8px;
    border-radius: 4px;
    background-color: var(--color-primary-500);
  }
  .flowbite .di-ilicence-drop_percent {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-gray-700);
  }
  .flowbite .di-ilicence-drop_remove {
    position: absolute;
    top: var(--spacing-ds-sm);
    right: var(--spacing-ds-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--color-gray-500);
    cursor: pointer;
  }
  .flowbite .di-ilicence-drop_remove:hover {
    color: var(--color-gray-700);
  }
  .flowbite .di-ilicence-drop_remove > svg {
    display: block;
    width: 16px;
    height: 16px;
  }
  .flowbite .di-ilicence-drop_retry {
    align-self: flex-start;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--color-primary-700);
    cursor: pointer;
  }
  @media (max-width: 767px) {
    .flowbite .di-ilicence_dropzones {
      flex-direction: column;
    }
    .flowbite .di-ilicence_dropzones > *,
    .flowbite .di-ilicence_dropzones.is-single > * {
      flex: 1 1 auto;
      width: 100%;
    }
  }
}
@layer components {
  .flowbite .di-extra-cert {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xl);
  }
  .flowbite .di-extra-cert_help-link {
    color: var(--color-primary-700);
    font-weight: 600;
    text-decoration: none;
  }
  .flowbite .di-extra-cert_help-link:hover {
    text-decoration: underline;
  }
  .flowbite .di-extra-cert_field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .flowbite .di-extra-cert_label {
    display: block;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-extra-cert_hint,
  .flowbite .di-extra-cert_error {
    margin: 0;
  }
  .flowbite .di-extra-cert_uppercase:where([type=text]) {
    text-transform: uppercase;
  }
  .flowbite .di-extra-cert_field.is-error input:where([type=text], [type=date]) {
    border-color: var(--color-error-300);
  }
  .flowbite .di-extra-cert_upload {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xxs);
  }
  .flowbite .di-extra-cert-drop {
    position: relative;
    width: 100%;
  }
  .flowbite .di-extra-cert-drop_input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .flowbite .di-extra-cert-drop_tile {
    display: none;
    width: 100%;
    padding: var(--spacing-ds-md) var(--spacing-ds-xl);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--spacing-ds-card);
    text-align: center;
    cursor: pointer;
  }
  .flowbite .di-extra-cert-drop[data-state=empty] .di-extra-cert-drop_empty,
  .flowbite .di-extra-cert-drop[data-state=complete] .di-extra-cert-drop_complete {
    display: flex;
  }
  .flowbite .di-extra-cert-drop_tile:hover,
  .flowbite .di-extra-cert-drop_input:focus-visible + .di-extra-cert-drop_tile {
    border-color: var(--color-primary-500);
  }
  .flowbite .di-extra-cert_upload.is-error .di-extra-cert-drop_tile {
    border-color: var(--color-error-300);
  }
  .flowbite .di-extra-cert-drop_empty {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-ds-xxs);
  }
  .flowbite .di-extra-cert-drop_featured {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--color-gray-100);
    border: 4px solid var(--color-gray-50);
    border-radius: 9999px;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-ds-xs);
  }
  .flowbite .di-extra-cert-drop_icon,
  .flowbite .di-extra-cert-drop_icon > svg {
    display: block;
    width: 20px;
    height: 20px;
  }
  .flowbite .di-extra-cert-drop_cta {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-primary-700);
  }
  .flowbite .di-extra-cert-drop_formats {
    font-size: 12px;
    line-height: 18px;
    color: var(--color-gray-600);
  }
  .flowbite .di-extra-cert-drop_complete {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-ds-md);
    text-align: left;
  }
  .flowbite .di-extra-cert-drop_preview {
    flex-shrink: 0;
    display: block;
    width: 56px;
    height: 40px;
    overflow: hidden;
    background-color: var(--color-gray-100);
    border-radius: var(--spacing-ds-xs);
  }
  .flowbite .di-extra-cert-drop_preview > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .flowbite .di-extra-cert-drop_meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 14px;
    line-height: 20px;
  }
  .flowbite .di-extra-cert-drop_filename {
    overflow: hidden;
    font-weight: 500;
    color: var(--color-gray-700);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .flowbite .di-extra-cert-drop_filesize {
    color: var(--color-gray-600);
  }
}
@layer components {
  .flowbite .di-onboarding-pricing {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-2xl);
  }
  .flowbite .di-onboarding-pricing_block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-2xl);
  }
  .flowbite .di-onboarding-pricing_divider {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-gray-200);
  }
  .flowbite .di-onboarding-pricing_field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .flowbite .di-onboarding-pricing_label {
    display: block;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite .di-onboarding-pricing_input {
    position: relative;
    display: flex;
    align-items: center;
  }
  .flowbite .di-onboarding-pricing_currency {
    position: absolute;
    left: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
    pointer-events: none;
  }
  .flowbite .di-onboarding-pricing_currency svg {
    width: 20px;
    height: 20px;
  }
  .flowbite .di-onboarding-pricing_input input:where([type=text]) {
    padding-left: 41px;
    font-size: 18px;
    line-height: 28px;
  }
  .flowbite .di-onboarding-pricing_field.is-error input:where([type=text]) {
    border-color: var(--color-error-500);
  }
  .flowbite .di-onboarding-pricing_estimate {
    margin: 0;
  }
  .flowbite .di-onboarding-pricing_panel {
    display: flex;
    flex-direction: column;
    max-width: 391px;
  }
  .flowbite .di-onboarding-pricing_panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-ds-xs);
  }
  .flowbite .di-onboarding-pricing_panel-left {
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .flowbite .di-onboarding-pricing_panel-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: var(--spacing-ds-xs);
    border-radius: var(--spacing-ds-button);
    color: var(--color-gray-500);
    background: none;
    border: 0;
    cursor: pointer;
  }
  .flowbite .di-onboarding-pricing_panel-edit:hover {
    color: var(--color-gray-700);
    background-color: var(--color-gray-50);
  }
  .flowbite .di-onboarding-pricing_panel-edit svg {
    display: block;
    width: 20px;
    height: 20px;
  }
  .flowbite .di-onboarding-pricing_postcode {
    display: flex;
    align-items: stretch;
  }
  .flowbite .di-onboarding-pricing_postcode input:where([type=text]) {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .flowbite .di-onboarding-pricing_postcode-save {
    flex-shrink: 0;
    padding: var(--spacing-ds-xs) var(--spacing-ds-md);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-700);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-left: 0;
    border-radius: 0 var(--spacing-ds-button) var(--spacing-ds-button) 0;
    cursor: pointer;
  }
  .flowbite .di-onboarding-pricing_postcode-save:hover {
    background-color: var(--color-gray-50);
  }
  .flowbite .di-onboarding-pricing_panel-note {
    margin: 0;
  }
  .flowbite .di-onboarding-pricing_chart {
    margin-top: var(--spacing-ds-md);
  }
  .flowbite .market-chart {
    position: relative;
  }
  .flowbite .market-chart--optimal {
    padding-top: 34px;
  }
  .flowbite .market-chart_tooltip {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    margin: 0;
    padding: var(--spacing-ds-xs) var(--spacing-ds-sm);
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    color: var(--color-white);
    white-space: nowrap;
    background-color: var(--color-success-600);
    border-radius: var(--spacing-ds-button);
  }
  .flowbite .market-chart_plot {
    width: 100%;
  }
  .flowbite .di-onboarding-pricing_footnote {
    margin: 0;
  }
}
@layer components {
  .flowbite .di-payout-frequency {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-2xl);
  }
  .flowbite .di-payout-frequency_group {
    margin: 0;
    padding: 0;
    border: 0;
  }
  .flowbite .di-payout-frequency_options {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-ds-md);
  }
  @media (min-width: 640px) {
    .flowbite .di-payout-frequency_options {
      grid-template-columns: repeat(3, 1fr);
      align-items: center;
      gap: var(--spacing-ds-xs);
    }
  }
  .flowbite .di-payout-frequency_option {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-xs);
    min-width: 0;
    margin: 0;
    cursor: pointer;
  }
  .flowbite .di-payout-frequency_option [type=radio] {
    flex-shrink: 0;
  }
  .flowbite .di-payout-frequency_error {
    margin: var(--spacing-ds-xs) 0 0;
  }
  @media (max-width: 767px) {
    .flowbite .di-payout-frequency_fees .alert_icon {
      display: inline-flex;
    }
  }
  .flowbite .di-payout-frequency_fees-link {
    color: inherit;
    text-decoration: underline;
  }
}
@layer components {
  .flowbite .di-onboarding-business-bank {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xl);
  }
  @media (min-width: 640px) {
    .flowbite .di-onboarding-business-bank {
      gap: var(--spacing-ds-2xl);
    }
  }
  .flowbite .di-onboarding-business-bank_heading {
    margin: 0;
  }
  .flowbite .di-onboarding-business-bank_divider {
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-gray-200);
  }
  .flowbite .di-onboarding-business-bank_field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .flowbite .di-onboarding-business-bank_label {
    display: block;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-gray-700);
  }
  .flowbite legend.di-onboarding-business-bank_label.required::after {
    content: "*";
    padding-left: var(--spacing-ds-xxs);
    color: var(--color-primary-500);
  }
  .flowbite .di-onboarding-business-bank_hint,
  .flowbite .di-onboarding-business-bank_error {
    margin: 0;
  }
  .flowbite .di-onboarding-business-bank_row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ds-xl);
  }
  @media (min-width: 640px) {
    .flowbite .di-onboarding-business-bank_row {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--spacing-ds-md);
    }
    .flowbite .di-onboarding-business-bank_row > .di-onboarding-business-bank_field {
      flex: 1 1 0;
    }
  }
  .flowbite .di-onboarding-business-bank_radios {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-ds-sm) var(--spacing-ds-xs);
    padding-top: 2px;
  }
  .flowbite .di-onboarding-business-bank_radio {
    display: flex;
    align-items: center;
    gap: var(--spacing-ds-xs);
    min-width: 109px;
    margin: 0;
    cursor: pointer;
  }
  .flowbite .di-onboarding-business-bank_radio [type=radio] {
    flex-shrink: 0;
  }
  .flowbite .di-onboarding-business-bank .is-hidden {
    display: none;
  }
  .flowbite .di-onboarding-business-bank_field.is-error input:where([type=text]),
  .flowbite .di-onboarding-business-bank_field.is-error select {
    border-color: var(--color-error-500);
  }
}
/*# sourceMappingURL=/assets/di_onboarding.css.map */