/* docara-shell-source: runtime/utility/table/default/css/default.css */
@layer sf.utilities {
  table {
    caption-side: bottom;
    border-collapse: collapse;
  }
  tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .table {
    text-align: left;
  }
  @supports not (text-align: start) {
  html:not([dir="rtl"]) .table {
    text-align: left;
    }
  }
  .table:where(:dir(ltr)) {
    text-align: left;
  }
  _:-ms-input-placeholder, [dir="rtl"] .table {
    text-align: right;
  }
  @supports not (text-align: start) {
  [dir="rtl"] .table {
    text-align: right;
    }
  }
  .table:where(:dir(rtl)) {
    text-align: right;
  }
  .table {
    --sf-table-color: var(--sf-on-surface);
    --sf-table-border-color: var(--sf-outline-variant);
    --sf-table-accent-bg: rgba(0, 0, 0, 0);
    --sf-table-stripe-color: var(--sf-on-surface);
    --sf-table-stripe-bg: var(--sf-surface-transparent-select);
    --sf-table-active-color: var(--sf-on-surface);
    --sf-table-active-bg: var(--sf-surface-transparent-select);
    --sf-table-hover-color: var(--sf-on-surface);
    --sf-table-hover-bg: var(--sf-surface-transparent-hover);
    width: 100%;
    margin-bottom: var(--sf-b6);
    color: var(--sf-table-color);
    vertical-align: top;
    border-color: var(--sf-table-border-color);
    text-align: start;
  }
  .table > :not(caption) > * > * {
    padding: 0.5rem 0.5rem;
    border-bottom-width: var(--sf-px);
    background-image: linear-gradient(var(--sf-table-accent-bg), var(--sf-table-accent-bg));
  }
  .table > tbody {
    vertical-align: inherit;
  }
  .table > thead {
    vertical-align: bottom;
  }
  .table-sm > :not(caption) > * > *,
  .table-small > :not(caption) > * > * {
    padding: 0.25rem 0.25rem;
  }
}

/* docara-shell-source: runtime/utility/text-color/active/css/active.css */
@layer sf.utilities {
  .active\:color-transparent:active {
    color: var(--sf-transparent);
  }
  .active\:color-on-surface:active {
    color: var(--sf-on-surface);
  }
  .active\:color-on-surface-fixed:active {
    color: var(--sf-on-surface-fixed);
  }
  .active\:color-on-surface-variant:active {
    color: var(--sf-on-surface-variant);
  }
  .active\:color-on-surface-inverse:active {
    color: var(--sf-on-surface-inverse);
  }
  .active\:color-on-surface-inverse-fixed:active {
    color: var(--sf-on-surface-inverse-fixed);
  }
  .active\:color-on-disable:active {
    color: var(--sf-on-disable);
  }
  .active\:color-primary:active {
    color: var(--sf-primary);
  }
  .active\:color-on-primary:active {
    color: var(--sf-on-primary);
  }
  .active\:color-on-primary-container:active {
    color: var(--sf-on-primary-container);
  }
  .active\:color-on-primary-container-graphic:active {
    color: var(--sf-on-primary-container-graphic);
  }
  .active\:color-secondary:active {
    color: var(--sf-secondary);
  }
  .active\:color-on-secondary:active {
    color: var(--sf-on-secondary);
  }
  .active\:color-on-secondary-container:active {
    color: var(--sf-on-secondary-container);
  }
  .active\:color-on-secondary-container-graphic:active {
    color: var(--sf-on-secondary-container-graphic);
  }
  .active\:color-tertiary:active {
    color: var(--sf-tertiary);
  }
  .active\:color-on-tertiary:active {
    color: var(--sf-on-tertiary);
  }
  .active\:color-on-tertiary-container:active {
    color: var(--sf-on-tertiary-container);
  }
  .active\:color-on-tertiary-container-graphic:active {
    color: var(--sf-on-tertiary-container-graphic);
  }
  .active\:color-error:active {
    color: var(--sf-error);
  }
  .active\:color-on-error:active {
    color: var(--sf-on-error);
  }
  .active\:color-on-error-container:active {
    color: var(--sf-on-error-container);
  }
  .active\:color-on-error-container-graphic:active {
    color: var(--sf-on-error-container-graphic);
  }
  .active\:color-warning:active {
    color: var(--sf-warning);
  }
  .active\:color-on-warning:active {
    color: var(--sf-on-warning);
  }
  .active\:color-on-warning-container:active {
    color: var(--sf-on-warning-container);
  }
  .active\:color-on-warning-container-graphic:active {
    color: var(--sf-on-warning-container-graphic);
  }
  .active\:color-success:active {
    color: var(--sf-success);
  }
  .active\:color-on-success:active {
    color: var(--sf-on-success);
  }
  .active\:color-on-success-container:active {
    color: var(--sf-on-success-container);
  }
  .active\:color-on-success-container-graphic:active {
    color: var(--sf-on-success-container-graphic);
  }
}