@charset "UTF-8";
:host,
:root {
    --wcbs-background-color: #fff;
    --wcbs-color: #502027;
    --wcbs-text-selection-color: rgba(175, 31, 54, 0.25);
    --wcbs-muted-color: #646b79;
    --wcbs-muted-border-color: rgb(231, 234, 239.5);
    --wcbs-primary: #af1f36;
    --wcbs-primary-background: #af1f36;
    --wcbs-primary-border: var(--wcbs-primary-background);
    --wcbs-primary-underline: rgba(175, 31, 54, 0.5);
    --wcbs-primary-hover: #b8354a;
    --wcbs-primary-hover-background: #b8354a;
    --wcbs-primary-hover-border: var(--wcbs-primary-hover-background);
    --wcbs-primary-hover-underline: var(--wcbs-primary-hover);
    --wcbs-primary-focus: rgba(216, 50, 78, 0.5);
    --wcbs-primary-inverse: #fff;
    --wcbs-secondary: #8f8f8f;
    --wcbs-secondary-background: #797979;
    --wcbs-secondary-border: var(--wcbs-secondary-background);
    --wcbs-secondary-underline: rgba(109, 109, 109, 0.5);
    --wcbs-secondary-hover: #797979;
    --wcbs-secondary-hover-background: #646464;
    --wcbs-secondary-hover-border: var(--wcbs-secondary-hover-background);
    --wcbs-secondary-hover-underline: var(--wcbs-secondary-hover);
    --wcbs-secondary-focus: rgba(117, 117, 117, 0.25);
    --wcbs-secondary-inverse: #fff;
    --wcbs-contrast: #181c25;
    --wcbs-contrast-background: #181c25;
    --wcbs-contrast-border: var(--wcbs-contrast-background);
    --wcbs-contrast-underline: rgba(24, 28, 37, 0.5);
    --wcbs-contrast-hover: #000;
    --wcbs-contrast-hover-background: #000;
    --wcbs-contrast-hover-border: var(--wcbs-contrast-hover-background);
    --wcbs-contrast-hover-underline: var(--wcbs-secondary-hover);
    --wcbs-contrast-focus: rgba(93, 107, 137, 0.25);
    --wcbs-contrast-inverse: #fff;
    --wcbs-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
    --wcbs-h1-color: #2d3138;
    --wcbs-h2-color: #373c44;
    --wcbs-h3-color: #424751;
    --wcbs-h4-color: #4d535e;
    --wcbs-h5-color: #5c6370;
    --wcbs-h6-color: #646b79;
    --wcbs-mark-background-color: rgb(252.5, 230.5, 191.5);
    --wcbs-mark-color: #0f1114;
    --wcbs-ins-color: rgb(28.5, 105.5, 84);
    --wcbs-del-color: rgb(136, 56.5, 53);
    --wcbs-blockquote-border-color: var(--wcbs-muted-border-color);
    --wcbs-blockquote-footer-color: var(--wcbs-muted-color);
    --wcbs-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --wcbs-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --wcbs-table-border-color: var(--wcbs-muted-border-color);
    --wcbs-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
    --wcbs-code-background-color: rgb(243, 244.5, 246.75);
    --wcbs-code-color: #646b79;
    --wcbs-code-kbd-background-color: var(--wcbs-color);
    --wcbs-code-kbd-color: var(--wcbs-background-color);
    --wcbs-form-element-background-color: rgb(251, 251.5, 252.25);
    --wcbs-form-element-selected-background-color: #dfe3eb;
    --wcbs-form-element-border-color: #cfd5e2;
    --wcbs-form-element-color: #23262c;
    --wcbs-form-element-placeholder-color: var(--wcbs-muted-color);
    --wcbs-form-element-active-background-color: #fff;
    --wcbs-form-element-active-border-color: var(--wcbs-primary-border);
    --wcbs-form-element-focus-color: var(--wcbs-primary-border);
    --wcbs-form-element-disabled-opacity: 0.5;
    --wcbs-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
    --wcbs-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
    --wcbs-form-element-invalid-focus-color: var(--wcbs-form-element-invalid-active-border-color);
    --wcbs-form-element-valid-border-color: rgb(76, 154.5, 137.5);
    --wcbs-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
    --wcbs-form-element-valid-focus-color: var(--wcbs-form-element-valid-active-border-color);
    --wcbs-switch-background-color: #bfc7d9;
    --wcbs-switch-checked-background-color: var(--wcbs-primary-background);
    --wcbs-switch-color: #fff;
    --wcbs-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --wcbs-range-border-color: #dfe3eb;
    --wcbs-range-active-border-color: #bfc7d9;
    --wcbs-range-thumb-border-color: var(--wcbs-background-color);
    --wcbs-range-thumb-color: var(--wcbs-secondary-background);
    --wcbs-range-thumb-active-color: var(--wcbs-primary-background);
    --wcbs-accordion-border-color: var(--wcbs-muted-border-color);
    --wcbs-accordion-active-summary-color: var(--wcbs-primary-hover);
    --wcbs-accordion-close-summary-color: var(--wcbs-color);
    --wcbs-accordion-open-summary-color: var(--wcbs-muted-color);
    --wcbs-card-background-color: var(--wcbs-background-color);
    --wcbs-card-border-color: var(--wcbs-muted-border-color);
    --wcbs-card-box-shadow: var(--wcbs-box-shadow);
    --wcbs-card-sectioning-background-color: rgb(251, 251.5, 252.25);
    --wcbs-dropdown-background-color: #fff;
    --wcbs-dropdown-border-color: #eff1f4;
    --wcbs-dropdown-box-shadow: var(--wcbs-box-shadow);
    --wcbs-dropdown-color: var(--wcbs-color);
    --wcbs-dropdown-hover-background-color: #eff1f4;
    --wcbs-loading-spinner-opacity: 0.5;
    --wcbs-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
    --wcbs-progress-background-color: #dfe3eb;
    --wcbs-progress-color: var(--wcbs-primary-background);
    --wcbs-tooltip-background-color: var(--wcbs-contrast-background);
    --wcbs-tooltip-color: var(--wcbs-contrast-inverse);
    --wcbs-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --wcbs-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    --wcbs-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --wcbs-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--wcbs-font-family-emoji);
    --wcbs-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--wcbs-font-family-emoji);
    --wcbs-font-family: var(--wcbs-font-family-sans-serif);
    --wcbs-line-height: 1.5;
    --wcbs-font-weight: 400;
    --wcbs-font-size: 100%;
    --wcbs-text-underline-offset: 0.1rem;
    --wcbs-border-radius: 0.25rem;
    --wcbs-border-width: 0.0625rem;
    --wcbs-outline-width: 0.125rem;
    --wcbs-transition: 0.2s ease-in-out;
    --wcbs-spacing: 1rem;
    --wcbs-typography-spacing-vertical: 1rem;
    --wcbs-block-spacing-vertical: var(--wcbs-spacing);
    --wcbs-block-spacing-horizontal: var(--wcbs-spacing);
    --wcbs-grid-column-gap: var(--wcbs-spacing);
    --wcbs-grid-row-gap: var(--wcbs-spacing);
    --wcbs-form-element-spacing-vertical: 0.75rem;
    --wcbs-form-element-spacing-horizontal: 1rem;
    --wcbs-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --wcbs-group-box-shadow-focus-with-button: 0 0 0 var(--wcbs-outline-width) var(--wcbs-primary-focus);
    --wcbs-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--wcbs-form-element-border-color);
    --wcbs-modal-overlay-backdrop-filter: blur(0.375rem);
    --wcbs-nav-element-spacing-vertical: 1rem;
    --wcbs-nav-element-spacing-horizontal: 0.5rem;
    --wcbs-nav-link-spacing-vertical: 0.5rem;
    --wcbs-nav-link-spacing-horizontal: 0.5rem;
    --wcbs-nav-breadcrumb-divider: ">";
    --wcbs-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --wcbs-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    --wcbs-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --wcbs-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    --wcbs-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
    --wcbs-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    --wcbs-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    --wcbs-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
    --wcbs-icon-inbox: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.887 17.1129C4.10738 18.3333 6.07157 18.3333 9.99994 18.3333C13.9283 18.3333 15.8925 18.3333 17.1129 17.1129C18.1719 16.0539 18.3119 14.4349 18.3304 11.4583H15.6997C14.8882 11.4583 14.676 11.4717 14.4979 11.5537C14.3198 11.6356 14.1715 11.788 13.6434 12.4041L13.1389 12.9928L13.0661 13.0778C12.6477 13.5669 12.3163 13.9544 11.8576 14.1653C11.399 14.3763 10.8891 14.3757 10.2454 14.3751L10.1335 14.375H9.86636L9.75453 14.3751C9.11078 14.3757 8.60086 14.3763 8.14224 14.1653C7.68359 13.9544 7.3522 13.5669 6.93376 13.0778L6.861 12.9928L6.35648 12.4041C5.82836 11.788 5.68013 11.6356 5.50198 11.5537C5.32385 11.4717 5.11167 11.4583 4.30016 11.4583H1.66943C1.68795 14.4349 1.828 16.0539 2.887 17.1129Z" fill="%23AF1F36"/><path d="M17.1128 2.88706C15.8924 1.66667 13.9282 1.66667 9.99984 1.66667C6.07146 1.66667 4.10728 1.66667 2.8869 2.88706C1.6665 4.10744 1.6665 6.07163 1.6665 10L1.66651 10.2083H4.30005L4.41195 10.2083C5.0557 10.2076 5.56555 10.2071 6.0242 10.418C6.48284 10.6289 6.81424 11.0164 7.23268 11.5056L7.30544 11.5906L7.80997 12.1792C8.33809 12.7953 8.48634 12.9478 8.66442 13.0297C8.84259 13.1117 9.05475 13.125 9.86625 13.125H10.1334C10.9449 13.125 11.1571 13.1117 11.3353 13.0297C11.5133 12.9478 11.6616 12.7953 12.1897 12.1792L12.6943 11.5906L12.767 11.5056C13.1854 11.0164 13.5168 10.6289 13.9755 10.418C14.4341 10.2071 14.944 10.2076 15.5878 10.2083L15.6996 10.2083H18.3332V10C18.3332 6.07163 18.3332 4.10744 17.1128 2.88706Z" fill="%23AF1F36"/></svg>');
    --wcbs-icon-inbox-unread: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.333 4.16667C18.333 5.54738 17.2138 6.66667 15.833 6.66667C14.4523 6.66667 13.333 5.54738 13.333 4.16667C13.333 2.78596 14.4523 1.66667 15.833 1.66667C17.2138 1.66667 18.333 2.78596 18.333 4.16667Z" fill="%23AF1F36"/><path d="M2.887 17.1129C4.10738 18.3333 6.07157 18.3333 9.99994 18.3333C13.9283 18.3333 15.8925 18.3333 17.1129 17.1129C18.1719 16.0539 18.3119 14.4349 18.3304 11.4583H15.6997C14.8882 11.4583 14.676 11.4717 14.4979 11.5537C14.3198 11.6356 14.1715 11.788 13.6434 12.4041L13.0661 13.0778C12.6477 13.5669 12.3163 13.9544 11.8576 14.1653C11.399 14.3763 10.8891 14.3757 10.2454 14.3751H9.75453C9.11078 14.3757 8.60086 14.3763 8.14224 14.1653C7.68359 13.9544 7.3522 13.5669 6.93376 13.0778L6.35648 12.4041C5.82836 11.788 5.68013 11.6356 5.50198 11.5537C5.32385 11.4717 5.11167 11.4583 4.30016 11.4583H1.66943C1.68795 14.4349 1.828 16.0539 2.887 17.1129Z" fill="%23AF1F36"/><path d="M9.99984 1.66667C6.07146 1.66667 4.10728 1.66667 2.8869 2.88706C1.6665 4.10744 1.6665 6.07163 1.6665 10L1.66651 10.2083L4.41195 10.2083C5.05571 10.2076 5.56555 10.2071 6.0242 10.418C6.48284 10.6289 6.81424 11.0164 7.23268 11.5056L7.80997 12.1792C8.33809 12.7953 8.48634 12.9478 8.66442 13.0297C8.84259 13.1117 9.05475 13.125 9.86625 13.125H10.1334C10.9449 13.125 11.1571 13.1117 11.3353 13.0297C11.5133 12.9478 11.6616 12.7953 12.1897 12.1792L12.767 11.5056C13.1854 11.0164 13.5168 10.6289 13.9755 10.418C14.4341 10.2071 14.944 10.2076 15.5878 10.2083L18.3332 10.2083V10C18.3332 9.06508 18.3332 8.24145 18.3168 7.5126C17.6232 8.02823 16.7638 8.33333 15.8332 8.33333C13.532 8.33333 11.6665 6.46785 11.6665 4.16667C11.6665 3.23603 11.9716 2.37666 12.4873 1.68312C11.7584 1.66667 10.9348 1.66667 9.99984 1.66667Z" fill="%23AF1F36"/></svg>');
}
@media (min-width: 576px) {
    :host,
    :root {
        --wcbs-font-size: 80%;
    }
}
@media (min-width: 768px) {
    :host,
    :root {
        --wcbs-font-size: 85%;
    }
}
@media (min-width: 1024px) {
    :host,
    :root {
        --wcbs-font-size: 90%;
    }
}
@media (min-width: 1280px) {
    :host,
    :root {
        --wcbs-font-size: 95%;
    }
}
@media (min-width: 1536px) {
    :host,
    :root {
        --wcbs-font-size: 100%;
    }
}
.wcbs-a {
    --wcbs-text-decoration: underline;
}
.wcbs-a.contrast,
.wcbs-a.secondary {
    --wcbs-text-decoration: underline;
}
.wcbs-small {
    --wcbs-font-size: 0.875em;
}
.wcbs-h1,
.wcbs-h2,
.wcbs-h3,
.wcbs-h4,
.wcbs-h5,
.wcbs-h6 {
    --wcbs-font-weight: 700;
}
.wcbs-h1 {
    --wcbs-font-size: 2rem;
    --wcbs-line-height: 1.125;
    --wcbs-typography-spacing-top: 3rem;
}
.wcbs-h2 {
    --wcbs-font-size: 1.75rem;
    --wcbs-line-height: 1.15;
    --wcbs-typography-spacing-top: 2.625rem;
}
.wcbs-h3 {
    --wcbs-font-size: 1.5rem;
    --wcbs-line-height: 1.175;
    --wcbs-typography-spacing-top: 2.25rem;
}
.wcbs-h4 {
    --wcbs-font-size: 1.25rem;
    --wcbs-line-height: 1.2;
    --wcbs-typography-spacing-top: 1.874rem;
}
.wcbs-h5 {
    --wcbs-font-size: 1.125rem;
    --wcbs-line-height: 1.225;
    --wcbs-typography-spacing-top: 1.6875rem;
}
.wcbs-h6 {
    --wcbs-font-size: 1rem;
    --wcbs-line-height: 1.25;
    --wcbs-typography-spacing-top: 1.5rem;
}
.wcbs-tfoot .wcbs-td,
.wcbs-tfoot .wcbs-th,
.wcbs-thead .wcbs-td,
.wcbs-thead .wcbs-th {
    --wcbs-font-weight: 600;
    --wcbs-border-width: 0.1875rem;
}
.wcbs-code,
.wcbs-kbd,
.wcbs-pre,
.wcbs-samp {
    --wcbs-font-family: var(--wcbs-font-family-monospace);
}
.wcbs-kbd {
    --wcbs-font-weight: bolder;
}
:where(select, textarea),
.wcbs-input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
    --wcbs-outline-width: 0.0625rem;
}
[type="search"] {
    --wcbs-border-radius: 5rem;
}
[type="checkbox"],
[type="radio"] {
    --wcbs-border-width: 0.125rem;
}
[type="checkbox"][role="switch"] {
    --wcbs-border-width: 0.1875rem;
}
.wcbs-details.wcbs-dropdown .wcbs-summary:not([role="button"]) {
    --wcbs-outline-width: 0.0625rem;
}
.wcbs-nav .wcbs-details.wcbs-dropdown .wcbs-summary:focus-visible {
    --wcbs-outline-width: 0.125rem;
}
[role="search"] {
    --wcbs-border-radius: 5rem;
}
[role="group"]:has(.wcbs-button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus),
[role="search"]:has(.wcbs-button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus) {
    --wcbs-group-box-shadow-focus-with-button: 0 0 0 var(--wcbs-outline-width) var(--wcbs-secondary-focus);
}
[role="group"]:has(.wcbs-button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus),
[role="search"]:has(.wcbs-button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus) {
    --wcbs-group-box-shadow-focus-with-button: 0 0 0 var(--wcbs-outline-width) var(--wcbs-contrast-focus);
}
[role="group"] [role="button"],
[role="group"] [type="button"],
[role="group"] [type="submit"],
[role="group"] button,
[role="search"] [role="button"],
[role="search"] [type="button"],
[role="search"] [type="submit"],
[role="search"] button {
    --wcbs-form-element-spacing-horizontal: 2rem;
}
.wcbs-details summary[role="button"]:not(.outline)::after {
    filter: brightness(0) invert(1);
}
[aria-busy="true"]:not(.wcbs-input, .wcbs-select, .wcbs-textarea):is(.wcbs-button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline)::before {
    filter: brightness(0) invert(1);
}
[type="checkbox"],
[type="radio"],
[type="range"],
.wcbs-progress {
    accent-color: var(--wcbs-primary);
}
*,
::after,
::before {
    box-sizing: border-box;
    background-repeat: no-repeat;
}
::after,
::before {
    text-decoration: inherit;
    vertical-align: inherit;
}
:where(:host),
:where(:root) {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background-color: var(--wcbs-background-color);
    color: var(--wcbs-color);
    font-weight: var(--wcbs-font-weight);
    font-size: var(--wcbs-font-size);
    line-height: var(--wcbs-line-height);
    font-family: var(--wcbs-font-family);
    text-underline-offset: var(--wcbs-text-underline-offset);
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}
.wcbs-main {
    display: block;
}
.wcbs-section {
    margin-bottom: var(--wcbs-block-spacing-vertical);
}
.wcbs-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--wcbs-spacing);
    padding-left: var(--wcbs-spacing);
}
.wcbs-container-fluid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--wcbs-spacing);
    padding-left: var(--wcbs-spacing);
}
@media (min-width: 576px) {
    .wcbs-container {
        max-width: 510px;
        padding-right: 0;
        padding-left: 0;
    }
}
@media (min-width: 768px) {
    .wcbs-container {
        max-width: 700px;
    }
}
@media (min-width: 1024px) {
    .wcbs-container {
        max-width: 950px;
    }
}
@media (min-width: 1280px) {
    .wcbs-container {
        max-width: 1200px;
    }
}
@media (min-width: 1536px) {
    .wcbs-container {
        max-width: 1450px;
    }
}
.wcbs-grid {
    grid-column-gap: var(--wcbs-grid-column-gap);
    grid-row-gap: var(--wcbs-grid-row-gap);
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .wcbs-grid {
        grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
    }
}
.wcbs-grid > * {
    min-width: 0;
}
.wcbs-overflow-auto {
    overflow: auto;
}
.wcbs-b,
.wcbs-strong {
    font-weight: bolder;
}
.wcbs-sub,
.wcbs-sup {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
}
.wcbs-sub {
    bottom: -0.25em;
}
.wcbs-sup {
    top: -0.5em;
}
.wcbs-address,
.wcbs-blockquote,
.wcbs-dl,
.wcbs-ol,
.wcbs-p,
.wcbs-pre,
.wcbs-table,
.wcbs-ul {
    margin-top: 0;
    margin-bottom: var(--wcbs-typography-spacing-vertical);
    color: var(--wcbs-color);
    font-style: normal;
    font-weight: var(--wcbs-font-weight);
}
.wcbs-h1,
.wcbs-h2,
.wcbs-h3,
.wcbs-h4,
.wcbs-h5,
.wcbs-h6 {
    margin-top: 0;
    margin-bottom: var(--wcbs-typography-spacing-vertical);
    color: var(--wcbs-color);
    font-weight: var(--wcbs-font-weight);
    font-size: var(--wcbs-font-size);
    line-height: var(--wcbs-line-height);
    font-family: var(--wcbs-font-family);
}
.wcbs-h1 {
    --wcbs-color: var(--wcbs-h1-color);
}
.wcbs-h2 {
    --wcbs-color: var(--wcbs-h2-color);
}
.wcbs-h3 {
    --wcbs-color: var(--wcbs-h3-color);
}
.wcbs-h4 {
    --wcbs-color: var(--wcbs-h4-color);
}
.wcbs-h5 {
    --wcbs-color: var(--wcbs-h5-color);
}
.wcbs-h6 {
    --wcbs-color: var(--wcbs-h6-color);
}
:where(.wcbs-article, .wcbs-address, .wcbs-blockquote, .wcbs-dl, .wcbs-figure, .wcbs-form, .wcbs-ol, .wcbs-p, .wcbs-pre, .wcbs-table, .wcbs-ul) ~ :is(.wcbs-h1, .wcbs-h2, .wcbs-h3, .wcbs-h4, .wcbs-h5, .wcbs-h6) {
    margin-top: var(--wcbs-typography-spacing-top);
}
.wcbs-p {
    margin-bottom: var(--wcbs-typography-spacing-vertical);
}
.wcbs-hgroup {
    margin-bottom: var(--wcbs-typography-spacing-vertical);
}
.wcbs-hgroup > * {
    margin-top: 0;
    margin-bottom: 0;
}
.wcbs-hgroup > :not(:first-child):last-child {
    --wcbs-color: var(--wcbs-muted-color);
    --wcbs-font-weight: unset;
    font-size: 1rem;
}
:where(.wcbs-ol, .wcbs-ul) .wcbs-li {
    margin-bottom: calc(var(--wcbs-typography-spacing-vertical) * 0.25);
}
:where(.wcbs-dl, .wcbs-ol, .wcbs-ul) :where(.wcbs-dl, .wcbs-ol, .wcbs-ul) {
    margin: 0;
    margin-top: calc(var(--wcbs-typography-spacing-vertical) * 0.25);
}
.wcbs-ul,
.wcbs-li {
    list-style: square;
}
.wcbs-mark {
    padding: 0.125rem 0.25rem;
    background-color: var(--wcbs-mark-background-color);
    color: var(--wcbs-mark-color);
    vertical-align: baseline;
}
.wcbs-blockquote {
    display: block;
    margin: var(--wcbs-typography-spacing-vertical) 0;
    padding: var(--wcbs-spacing);
    border-right: none;
    border-left: 0.25rem solid var(--wcbs-blockquote-border-color);
    border-inline-start: 0.25rem solid var(--wcbs-blockquote-border-color);
    border-inline-end: none;
}
.wcbs-blockquote footer {
    margin-top: calc(var(--wcbs-typography-spacing-vertical) * 0.5);
    color: var(--wcbs-blockquote-footer-color);
}
.wcbs-abbr[title] {
    border-bottom: 1px dotted;
    text-decoration: none;
    cursor: help;
}
.wcbs-ins {
    color: var(--wcbs-ins-color);
    text-decoration: none;
}
.wcbs-del {
    color: var(--wcbs-del-color);
}
::-moz-selection {
    background-color: var(--wcbs-text-selection-color);
}
::selection {
    background-color: var(--wcbs-text-selection-color);
}
:where(.wcbs-a:not([role="button"])),
[role="link"] {
    --wcbs-color: var(--wcbs-primary);
    --wcbs-background-color: transparent;
    --wcbs-underline: var(--wcbs-primary-underline);
    outline: 0;
    background-color: var(--wcbs-background-color);
    color: var(--wcbs-color);
    -webkit-text-decoration: var(--wcbs-text-decoration);
    text-decoration: var(--wcbs-text-decoration);
    text-decoration-color: var(--wcbs-underline);
    text-underline-offset: 0.125em;
    transition: background-color var(--wcbs-transition), color var(--wcbs-transition), box-shadow var(--wcbs-transition), -webkit-text-decoration var(--wcbs-transition);
    transition: background-color var(--wcbs-transition), color var(--wcbs-transition), text-decoration var(--wcbs-transition), box-shadow var(--wcbs-transition);
    transition: background-color var(--wcbs-transition), color var(--wcbs-transition), text-decoration var(--wcbs-transition), box-shadow var(--wcbs-transition), -webkit-text-decoration var(--wcbs-transition);
}
:where(.wcbs-a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
[role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    --wcbs-color: var(--wcbs-primary-hover);
    --wcbs-underline: var(--wcbs-primary-hover-underline);
    --wcbs-text-decoration: underline;
}
:where(.wcbs-a:not([role="button"])):focus-visible,
[role="link"]:focus-visible {
    box-shadow: 0 0 0 var(--wcbs-outline-width) var(--wcbs-primary-focus);
}
:where(.wcbs-a:not([role="button"])).secondary,
[role="link"].secondary {
    --wcbs-color: var(--wcbs-secondary);
    --wcbs-underline: var(--wcbs-secondary-underline);
}
:where(.wcbs-a:not([role="button"])).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
[role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    --wcbs-color: var(--wcbs-secondary-hover);
    --wcbs-underline: var(--wcbs-secondary-hover-underline);
}
:where(.wcbs-a:not([role="button"])).contrast,
[role="link"].contrast {
    --wcbs-color: var(--wcbs-contrast);
    --wcbs-underline: var(--wcbs-contrast-underline);
}
:where(.wcbs-a:not([role="button"])).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
[role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    --wcbs-color: var(--wcbs-contrast-hover);
    --wcbs-underline: var(--wcbs-contrast-hover-underline);
}
.wcbs-a[role="button"] {
    display: inline-block;
}
.wcbs-button {
    margin: 0;
    overflow: visible;
    font-family: inherit;
    text-transform: none;
}
.wcbs-button[type="button"],
.wcbs-button[type="reset"],
.wcbs-button[type="submit"],
.wcbs-button {
    -webkit-appearance: button;
}
.wcbs-button[role="button"],
.wcbs-button[type="button"],
.wcbs-button[type="file"]::file-selector-button,
.wcbs-button[type="reset"],
.wcbs-button[type="submit"],
.wcbs-button {
    --wcbs-background-color: var(--wcbs-primary-background);
    --wcbs-border-color: var(--wcbs-primary-border);
    --wcbs-color: var(--wcbs-primary-inverse);
    --wcbs-box-shadow: var(--wcbs-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
    padding: var(--wcbs-form-element-spacing-vertical) var(--wcbs-form-element-spacing-horizontal);
    border: var(--wcbs-border-width) solid var(--wcbs-border-color);
    border-radius: var(--wcbs-border-radius);
    outline: 0;
    background-color: var(--wcbs-background-color);
    box-shadow: var(--wcbs-box-shadow);
    color: var(--wcbs-color);
    font-weight: var(--wcbs-font-weight);
    font-size: 1rem;
    line-height: var(--wcbs-line-height);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: background-color var(--wcbs-transition), border-color var(--wcbs-transition), color var(--wcbs-transition), box-shadow var(--wcbs-transition);
}
.wcbs-button[role="button"]:is(:hover, :active, :focus),
.wcbs-button[role="button"]:is([aria-current]:not([aria-current="false"])),
.wcbs-button[type="button"]:is(:hover, :active, :focus),
.wcbs-button[type="button"]:is([aria-current]:not([aria-current="false"])),
.wcbs-button[type="file"]::file-selector-button:is(:hover, :active, :focus),
.wcbs-button[type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])),
.wcbs-button[type="reset"]:is(:hover, :active, :focus),
.wcbs-button[type="reset"]:is([aria-current]:not([aria-current="false"])),
.wcbs-button[type="submit"]:is(:hover, :active, :focus),
.wcbs-button[type="submit"]:is([aria-current]:not([aria-current="false"])),
.wcbs-button:is(:hover, :active, :focus),
.wcbs-button:is([aria-current]:not([aria-current="false"])) {
    --wcbs-background-color: var(--wcbs-primary-hover-background);
    --wcbs-border-color: var(--wcbs-primary-hover-border);
    --wcbs-box-shadow: var(--wcbs-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
    --wcbs-color: var(--wcbs-primary-inverse);
}
.wcbs-button[role="button"]:focus,
.wcbs-button[role="button"]:is([aria-current]:not([aria-current="false"])):focus,
.wcbs-button[type="button"]:focus,
.wcbs-button[type="button"]:is([aria-current]:not([aria-current="false"])):focus,
.wcbs-button[type="file"]::file-selector-button:focus,
.wcbs-button[type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus,
.wcbs-button[type="reset"]:focus,
.wcbs-button[type="reset"]:is([aria-current]:not([aria-current="false"])):focus,
.wcbs-button[type="submit"]:focus,
.wcbs-button[type="submit"]:is([aria-current]:not([aria-current="false"])):focus,
.wcbs-button:focus,
.wcbs-button:is([aria-current]:not([aria-current="false"])):focus {
    --wcbs-box-shadow: var(--wcbs-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--wcbs-outline-width) var(--wcbs-primary-focus);
}
.wcbs-button[type="button"],
.wcbs-button[type="reset"] {
    margin-bottom: var(--wcbs-spacing);
}
:is(.wcbs-button, [type="submit"], [type="button"], [role="button"]).secondary,
.wcbs-button[type="file"]::file-selector-button,
[type="reset"] {
    --wcbs-background-color: var(--wcbs-secondary-background);
    --wcbs-border-color: var(--wcbs-secondary-border);
    --wcbs-color: var(--wcbs-secondary-inverse);
    cursor: pointer;
}
:is(.wcbs-button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
.wcbs-button[type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
.wcbs-button[type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    --wcbs-background-color: var(--wcbs-secondary-hover-background);
    --wcbs-border-color: var(--wcbs-secondary-hover-border);
    --wcbs-color: var(--wcbs-secondary-inverse);
}
:is(.wcbs-button, [type="submit"], [type="button"], [role="button"]).secondary:focus,
:is(.wcbs-button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"])):focus,
.wcbs-button[type="file"]::file-selector-button:focus,
.wcbs-button[type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus,
.wcbs-button[type="reset"]:focus,
.wcbs-button[type="reset"]:is([aria-current]:not([aria-current="false"])):focus {
    --wcbs-box-shadow: var(--wcbs-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--wcbs-outline-width) var(--wcbs-secondary-focus);
}
:is(.wcbs-button, [type="submit"], [type="button"], [role="button"]).contrast {
    --wcbs-background-color: var(--wcbs-contrast-background);
    --wcbs-border-color: var(--wcbs-contrast-border);
    --wcbs-color: var(--wcbs-contrast-inverse);
}
:is(.wcbs-button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    --wcbs-background-color: var(--wcbs-contrast-hover-background);
    --wcbs-border-color: var(--wcbs-contrast-hover-border);
    --wcbs-color: var(--wcbs-contrast-inverse);
}
:is(.wcbs-button, [type="submit"], [type="button"], [role="button"]).contrast:focus,
:is(.wcbs-button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"])):focus {
    --wcbs-box-shadow: var(--wcbs-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--wcbs-outline-width) var(--wcbs-contrast-focus);
}
:is(.wcbs-button, [type="submit"], [type="button"], [role="button"]).outline,
.wcbs-button[type="reset"].outline {
    --wcbs-background-color: transparent;
    --wcbs-color: var(--wcbs-primary);
    --wcbs-border-color: var(--wcbs-primary);
}
:is(.wcbs-button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
.wcbs-button[type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    --wcbs-background-color: transparent;
    --wcbs-color: var(--wcbs-primary-hover);
    --wcbs-border-color: var(--wcbs-primary-hover);
}
:is(.wcbs-button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
.wcbs-button[type="reset"].outline {
    --wcbs-color: var(--wcbs-secondary);
    --wcbs-border-color: var(--wcbs-secondary);
}
:is(.wcbs-button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
.wcbs-button[type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    --wcbs-color: var(--wcbs-secondary-hover);
    --wcbs-border-color: var(--wcbs-secondary-hover);
}
:is(.wcbs-button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
    --wcbs-color: var(--wcbs-contrast);
    --wcbs-border-color: var(--wcbs-contrast);
}
:is(.wcbs-button, [type="submit"], [type="button"], [role="button"]).outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    --wcbs-color: var(--wcbs-contrast-hover);
    --wcbs-border-color: var(--wcbs-contrast-hover);
}
:where(.wcbs-button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
:where(.wcbs-fieldset[disabled]) :is(.wcbs-button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
    opacity: 0.5;
    pointer-events: none;
}
:where(.wcbs-table) {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    text-indent: 0;
}
.wcbs-td,
.wcbs-th {
    padding: calc(var(--wcbs-spacing) / 2) var(--wcbs-spacing);
    border-bottom: var(--wcbs-border-width) solid var(--wcbs-table-border-color);
    background-color: var(--wcbs-background-color);
    color: var(--wcbs-color);
    font-weight: var(--wcbs-font-weight);
    text-align: left;
    text-align: start;
}
.wcbs-tfoot .wcbs-td,
.wcbs-tfoot .wcbs-th {
    border-top: var(--wcbs-border-width) solid var(--wcbs-table-border-color);
    border-bottom: 0;
}
.wcbs-table.striped .wcbs-tbody .wcbs-tr:nth-child(odd) td,
.wcbs-table.striped .wcbs-tbody .wcbs-tr:nth-child(odd) th {
    background-color: var(--wcbs-table-row-stripped-background-color);
}
:where(.wcbs-audio, .wcbs-canvas, .wcbs-iframe, .wcbs-img, .wcbs-svg, .wcbs-video) {
    vertical-align: middle;
}
.wcbs-audio,
.wcbs-video {
    display: inline-block;
}
.wcbs-audio:not([controls]) {
    display: none;
    height: 0;
}
:where(.wcbs-iframe) {
    border-style: none;
}
.wcbs-img {
    max-width: 100%;
    height: auto;
    border-style: none;
}
:where(.wcbs-svg:not([fill])) {
    fill: currentColor;
}
.wcbs-svg:not(:host),
.wcbs-svg:not(:root) {
    overflow: hidden;
}
.wcbs-code,
.wcbs-kbd,
.wcbs-pre,
.wcbs-samp {
    font-size: 0.875em;
    font-family: var(--wcbs-font-family);
}
.wcbs-pre .wcbs-code,
.wcbs-pre .wcbs-samp {
    font-size: inherit;
    font-family: inherit;
}
.wcbs-pre {
    -ms-overflow-style: scrollbar;
    overflow: auto;
}
.wcbs-code,
.wcbs-kbd,
.wcbs-pre,
.wcbs-samp {
    border-radius: var(--wcbs-border-radius);
    background: var(--wcbs-code-background-color);
    color: var(--wcbs-code-color);
    font-weight: var(--wcbs-font-weight);
    line-height: initial;
}
.wcbs-code,
.wcbs-kbd,
.wcbs-samp {
    display: inline-block;
    padding: 0.375rem;
}
.wcbs-pre {
    display: block;
    margin-bottom: var(--wcbs-spacing);
    overflow-x: auto;
}
.wcbs-pre > .wcbs-code,
.wcbs-pre > .wcbs-samp {
    display: block;
    padding: var(--wcbs-spacing);
    background: 0 0;
    line-height: var(--wcbs-line-height);
}
.wcbs-kbd {
    background-color: var(--wcbs-code-kbd-background-color);
    color: var(--wcbs-code-kbd-color);
    vertical-align: baseline;
}
.wcbs-figure {
    display: block;
    margin: 0;
    padding: 0;
}
.wcbs-figure .wcbs-figcaption {
    padding: calc(var(--wcbs-spacing) * 0.5) 0;
    color: var(--wcbs-muted-color);
}
.wcbs-hr {
    height: 0;
    margin: var(--wcbs-typography-spacing-vertical) 0;
    border: 0;
    border-top: 1px solid var(--wcbs-muted-border-color);
    color: inherit;
}
[hidden],
.wcbs-template {
    display: none !important;
}
.wcbs-canvas {
    display: inline-block;
}
.wcbs-input,
.wcbs-optgroup,
.wcbs-select,
.wcbs-textarea {
    margin: 0;
    font-size: 1rem;
    line-height: var(--wcbs-line-height);
    font-family: inherit;
    letter-spacing: inherit;
}
.wcbs-input {
    overflow: visible;
}
.wcbs-select {
    text-transform: none;
}
.wcbs-legend {
    max-width: 100%;
    padding: 0;
    color: inherit;
    white-space: normal;
}
.wcbs-textarea {
    overflow: auto;
}
.wcbs-input[type="checkbox"],
.wcbs-input[type="radio"] {
    padding: 0;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}
.wcbs-input[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}
.wcbs-input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}
::-moz-focus-inner {
    padding: 0;
    border-style: none;
}
:-moz-focusring {
    outline: 0;
}
:-moz-ui-invalid {
    box-shadow: none;
}
::-ms-expand {
    display: none;
}
.wcbs-input[type="file"],
.wcbs-input[type="range"] {
    padding: 0;
    border-width: 0;
}
.wcbs-input:not([type="checkbox"], [type="radio"], [type="range"]) {
    height: calc(1rem * var(--wcbs-line-height) + var(--wcbs-form-element-spacing-vertical) * 2 + var(--wcbs-border-width) * 2);
}
.wcbs-fieldset {
    width: 100%;
    margin: 0;
    margin-bottom: var(--wcbs-spacing);
    padding: 0;
    border: 0;
}
.wcbs-fieldset .wcbs-legend,
.wcbs-label {
    display: block;
    margin-bottom: calc(var(--wcbs-spacing) * 0.375);
    color: var(--wcbs-color);
    font-weight: var(--wcbs-form-label-font-weight, var(--wcbs-font-weight));
}
.wcbs-fieldset .wcbs-legend {
    margin-bottom: calc(var(--wcbs-spacing) * 0.5);
}
.wcbs-button[type="submit"],
.wcbs-input:not([type="checkbox"], [type="radio"]),
.wcbs-select,
.wcbs-textarea {
    width: 100%;
}
.wcbs-input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
.wcbs-select,
.wcbs-textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: var(--wcbs-form-element-spacing-vertical) var(--wcbs-form-element-spacing-horizontal);
}
.wcbs-input,
.wcbs-select,
.wcbs-textarea {
    --wcbs-background-color: var(--wcbs-form-element-background-color);
    --wcbs-border-color: var(--wcbs-form-element-border-color);
    --wcbs-color: var(--wcbs-form-element-color);
    --wcbs-box-shadow: none;
    border: var(--wcbs-border-width) solid var(--wcbs-border-color) !important;
    border-radius: var(--wcbs-border-radius);
    outline: 0;
    background-color: var(--wcbs-background-color);
    box-shadow: var(--wcbs-box-shadow);
    color: var(--wcbs-color);
    font-weight: var(--wcbs-font-weight);
    transition: background-color var(--wcbs-transition), border-color var(--wcbs-transition), color var(--wcbs-transition), box-shadow var(--wcbs-transition) !important;
}
:where(.wcbs-select, .wcbs-textarea):not([readonly]):is(:active, :focus),
.wcbs-input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus) {
    --wcbs-background-color: var(--wcbs-form-element-active-background-color);
}
:where(.wcbs-select, .wcbs-textarea):not([readonly]):is(:active, :focus),
.wcbs-input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus) {
    --wcbs-border-color: var(--wcbs-form-element-active-border-color);
}
:where(.wcbs-select, .wcbs-textarea):not([readonly]):focus,
.wcbs-input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus {
    --wcbs-box-shadow: 0 0 0 var(--wcbs-outline-width) var(--wcbs-form-element-focus-color);
}
:where(.wcbs-fieldset[disabled]) :is(.wcbs-input:not([type="submit"], [type="button"], [type="reset"]), .wcbs-select, .wcbs-textarea),
.wcbs-input:not([type="submit"], [type="button"], [type="reset"])[disabled],
.wcbs-label[aria-disabled="true"],
.wcbs-select[disabled],
.wcbs-textarea[disabled] {
    opacity: var(--wcbs-form-element-disabled-opacity);
    pointer-events: none;
}
.wcbs-label[aria-disabled="true"] input[disabled] {
    opacity: 1;
}
:where(.wcbs-input, .wcbs-select, .wcbs-textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid] {
    padding-right: calc(var(--wcbs-form-element-spacing-horizontal) + 1.5rem) !important;
    padding-left: var(--wcbs-form-element-spacing-horizontal);
    padding-inline-start: var(--wcbs-form-element-spacing-horizontal) !important;
    padding-inline-end: calc(var(--wcbs-form-element-spacing-horizontal) + 1.5rem) !important;
    background-position: center right 0.75rem;
    background-size: 1rem auto;
    background-repeat: no-repeat;
}
:where(.wcbs-input, .wcbs-select, .wcbs-textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="false"]:not(.wcbs-select) {
    background-image: var(--wcbs-icon-valid);
}
:where(.wcbs-input, .wcbs-select, .wcbs-textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="true"]:not(.wcbs-select) {
    background-image: var(--wcbs-icon-invalid);
}
:where(.wcbs-input, .wcbs-select, .wcbs-textarea)[aria-invalid="false"] {
    --wcbs-border-color: var(--wcbs-form-element-valid-border-color);
}
:where(.wcbs-input, .wcbs-select, .wcbs-textarea)[aria-invalid="false"]:is(:active, :focus) {
    --wcbs-border-color: var(--wcbs-form-element-valid-active-border-color) !important;
}
:where(.wcbs-input, .wcbs-select, .wcbs-textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
    --wcbs-box-shadow: 0 0 0 var(--wcbs-outline-width) var(--wcbs-form-element-valid-focus-color) !important;
}
:where(.wcbs-input, .wcbs-select, .wcbs-textarea)[aria-invalid="true"] {
    --wcbs-border-color: var(--wcbs-form-element-invalid-border-color);
}
:where(.wcbs-input, .wcbs-select, .wcbs-textarea)[aria-invalid="true"]:is(:active, :focus) {
    --wcbs-border-color: var(--wcbs-form-element-invalid-active-border-color) !important;
}
:where(.wcbs-input, .wcbs-select, .wcbs-textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
    --wcbs-box-shadow: 0 0 0 var(--wcbs-outline-width) var(--wcbs-form-element-invalid-focus-color) !important;
}
[dir="rtl"] :where(.wcbs-input, .wcbs-select, .wcbs-textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
    background-position: center left 0.75rem;
}
.wcbs-input::-webkit-input-placeholder,
.wcbs-input::placeholder,
.wcbs-select:invalid,
.wcbs-textarea::-webkit-input-placeholder,
.wcbs-textarea::placeholder {
    color: var(--wcbs-form-element-placeholder-color);
    opacity: 1;
}
.wcbs-input:not([type="checkbox"], [type="radio"]),
.wcbs-select,
.wcbs-textarea {
    margin-bottom: var(--wcbs-spacing);
}
.wcbs-select::-ms-expand {
    border: 0;
    background-color: transparent;
}
.wcbs-select:not([multiple], [size]) {
    padding-right: calc(var(--wcbs-form-element-spacing-horizontal) + 1.5rem);
    padding-left: var(--wcbs-form-element-spacing-horizontal);
    padding-inline-start: var(--wcbs-form-element-spacing-horizontal);
    padding-inline-end: calc(var(--wcbs-form-element-spacing-horizontal) + 1.5rem);
    background-image: var(--wcbs-icon-chevron);
    background-position: center right 0.75rem;
    background-size: 1rem auto;
    background-repeat: no-repeat;
}
.wcbs-select[multiple] .wcbs-option:checked {
    background: var(--wcbs-form-element-selected-background-color);
    color: var(--wcbs-form-element-color);
}
[dir="rtl"] .wcbs-select:not([multiple], [size]) {
    background-position: center left 0.75rem;
}
.wcbs-textarea {
    display: block;
    resize: vertical;
}
.wcbs-textarea[aria-invalid] {
    --wcbs-icon-height: calc(1rem * var(--wcbs-line-height) + var(--wcbs-form-element-spacing-vertical) * 2 + var(--wcbs-border-width) * 2);
    background-position: top right 0.75rem !important;
    background-size: 1rem var(--wcbs-icon-height) !important;
}
:where(.wcbs-input, .wcbs-select, .wcbs-textarea, .wcbs-fieldset, .wcbs-grid) + .wcbs-small {
    display: block;
    width: 100%;
    margin-top: calc(var(--wcbs-spacing) * -0.75);
    margin-bottom: var(--wcbs-spacing);
    color: var(--wcbs-muted-color);
}
:where(.wcbs-input, .wcbs-select, .wcbs-textarea, .wcbs-fieldset, .wcbs-grid)[aria-invalid="false"] + .wcbs-small {
    color: var(--wcbs-ins-color);
}
:where(.wcbs-input, .wcbs-select, .wcbs-textarea, .wcbs-fieldset, .wcbs-grid)[aria-invalid="true"] + .wcbs-small {
    color: var(--wcbs-del-color);
}
.wcbs-label > :where(.wcbs-input, .wcbs-select, .wcbs-textarea) {
    margin-top: calc(var(--wcbs-spacing) * 0.25);
}
.wcbs-label:has([type="checkbox"], [type="radio"]) {
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
}
.wcbs-input[type="checkbox"],
.wcbs-input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.25em;
    height: 1.25em;
    margin-top: -0.125em;
    margin-inline-end: 0.5em;
    border-width: var(--wcbs-border-width) !important;
    vertical-align: middle;
    cursor: pointer;
}
.wcbs-input[type="checkbox"]::-ms-check,
.wcbs-input[type="radio"]::-ms-check {
    display: none;
}
.wcbs-input[type="checkbox"]:checked,
.wcbs-input[type="checkbox"]:checked:active,
.wcbs-input[type="checkbox"]:checked:focus,
.wcbs-input[type="radio"]:checked,
.wcbs-input[type="radio"]:checked:active,
.wcbs-input[type="radio"]:checked:focus {
    --wcbs-background-color: var(--wcbs-primary-background);
    --wcbs-border-color: var(--wcbs-primary-border) !important;
    background-image: var(--wcbs-icon-checkbox);
    background-position: center;
    background-size: 0.75em auto;
    background-repeat: no-repeat;
}
.wcbs-input[type="checkbox"] ~ .wcbs-label,
.wcbs-input[type="radio"] ~ label {
    display: inline-block;
    margin-bottom: 0;
    cursor: pointer;
}
.wcbs-input[type="checkbox"] ~ .wcbs-label:not(:last-of-type),
.wcbs-input[type="radio"] ~ label:not(:last-of-type) {
    margin-inline-end: 1em;
}
.wcbs-input[type="checkbox"]:indeterminate {
    --wcbs-background-color: var(--wcbs-primary-background);
    --wcbs-border-color: var(--wcbs-primary-border);
    background-image: var(--wcbs-icon-minus);
    background-position: center;
    background-size: 0.75em auto;
    background-repeat: no-repeat;
}
.wcbs-input[type="radio"] {
    border-radius: 50%;
}
.wcbs-input[type="radio"]:checked,
.wcbs-input[type="radio"]:checked:active,
.wcbs-input[type="radio"]:checked:focus {
    --wcbs-background-color: var(--wcbs-primary-inverse);
    border-width: 0.35em !important;
    background-image: none;
}
.wcbs-input[type="checkbox"][role="switch"] {
    --wcbs-background-color: var(--wcbs-switch-background-color);
    --wcbs-color: var(--wcbs-switch-color);
    width: 2.25em;
    height: 1.25em;
    border: var(--wcbs-border-width) solid var(--wcbs-border-color);
    border-radius: 1.25em;
    background-color: var(--wcbs-background-color);
    line-height: 1.25em;
}
.wcbs-input[type="checkbox"][role="switch"]:not([aria-invalid]) {
    --wcbs-border-color: var(--wcbs-switch-background-color);
}
.wcbs-input[type="checkbox"][role="switch"]:before {
    display: block;
    aspect-ratio: 1;
    height: 100%;
    border-radius: 50%;
    background-color: var(--wcbs-color);
    box-shadow: var(--wcbs-switch-thumb-box-shadow);
    content: "";
    transition: margin 0.1s ease-in-out;
}
.wcbs-input[type="checkbox"][role="switch"]:focus {
    --wcbs-background-color: var(--wcbs-switch-background-color);
    --wcbs-border-color: var(--wcbs-switch-background-color);
}
.wcbs-input[type="checkbox"][role="switch"]:checked {
    --wcbs-background-color: var(--wcbs-switch-checked-background-color);
    --wcbs-border-color: var(--wcbs-switch-checked-background-color);
    background-image: none;
}
.wcbs-input[type="checkbox"][role="switch"]:checked::before {
    margin-inline-start: calc(2.25em - 1.25em);
}
.wcbs-input[type="checkbox"][role="switch"][disabled] {
    --wcbs-background-color: var(--wcbs-border-color);
}
.wcbs-input[type="checkbox"][aria-invalid="false"]:checked,
.wcbs-input[type="checkbox"][aria-invalid="false"]:checked:active,
.wcbs-input[type="checkbox"][aria-invalid="false"]:checked:focus,
.wcbs-input[type="checkbox"][role="switch"][aria-invalid="false"]:checked,
.wcbs-input[type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
.wcbs-input[type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
    --wcbs-background-color: var(--wcbs-form-element-valid-border-color);
}
.wcbs-input[type="checkbox"]:checked:active[aria-invalid="true"],
.wcbs-input[type="checkbox"]:checked:focus[aria-invalid="true"],
.wcbs-input[type="checkbox"]:checked[aria-invalid="true"],
.wcbs-input[type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
.wcbs-input[type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"],
.wcbs-input[type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
    --wcbs-background-color: var(--wcbs-form-element-invalid-border-color);
}
.wcbs-input[type="checkbox"][aria-invalid="false"]:checked,
.wcbs-input[type="checkbox"][aria-invalid="false"]:checked:active,
.wcbs-input[type="checkbox"][aria-invalid="false"]:checked:focus,
.wcbs-input[type="checkbox"][role="switch"][aria-invalid="false"]:checked,
.wcbs-input[type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
.wcbs-input[type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus,
.wcbs-input[type="radio"][aria-invalid="false"]:checked,
.wcbs-input[type="radio"][aria-invalid="false"]:checked:active,
.wcbs-input[type="radio"][aria-invalid="false"]:checked:focus {
    --wcbs-border-color: var(--wcbs-form-element-valid-border-color) !important;
}
.wcbs-input[type="checkbox"]:checked:active[aria-invalid="true"],
.wcbs-input[type="checkbox"]:checked:focus[aria-invalid="true"],
.wcbs-input[type="checkbox"]:checked[aria-invalid="true"],
.wcbs-input[type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
.wcbs-input[type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"],
.wcbs-input[type="checkbox"][role="switch"]:checked[aria-invalid="true"],
.wcbs-input[type="radio"]:checked:active[aria-invalid="true"],
.wcbs-input[type="radio"]:checked:focus[aria-invalid="true"],
.wcbs-input[type="radio"]:checked[aria-invalid="true"] {
    --wcbs-border-color: var(--wcbs-form-element-invalid-border-color) !important;
}
.wcbs-input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.wcbs-input[type="color"]::-moz-focus-inner {
    padding: 0;
}
.wcbs-input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: calc(var(--wcbs-border-radius) * 0.5);
}
.wcbs-input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: calc(var(--wcbs-border-radius) * 0.5);
}
.wcbs-input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
    --wcbs-icon-position: 0.75rem;
    --wcbs-icon-width: 1rem;
    padding-right: calc(var(--wcbs-icon-width) + var(--wcbs-icon-position));
    background-image: var(--wcbs-icon-date);
    background-position: center right var(--wcbs-icon-position);
    background-size: var(--wcbs-icon-width) auto;
    background-repeat: no-repeat;
}
.wcbs-input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] {
    background-image: var(--wcbs-icon-time);
}
.wcbs-input[type="date"]::-webkit-calendar-picker-indicator,
.wcbs-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.wcbs-input[type="month"]::-webkit-calendar-picker-indicator,
.wcbs-input[type="time"]::-webkit-calendar-picker-indicator,
.wcbs-input[type="week"]::-webkit-calendar-picker-indicator {
    width: var(--wcbs-icon-width);
    margin-right: calc(var(--wcbs-icon-width) * -1);
    margin-left: var(--wcbs-icon-position);
    opacity: 0;
}
@-moz-document url-prefix() {
    [type="date"],
    [type="datetime-local"],
    [type="month"],
    [type="time"],
    [type="week"] {
        padding-right: var(--wcbs-form-element-spacing-horizontal) !important;
        background-image: none !important;
    }
}
[dir="rtl"] :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
    text-align: right;
}
.wcbs-input[type="file"] {
    --wcbs-color: var(--wcbs-muted-color);
    margin-left: calc(var(--wcbs-outline-width) * -1);
    padding: calc(var(--wcbs-form-element-spacing-vertical) * 0.5) 0;
    padding-left: var(--wcbs-outline-width);
    border: 0;
    border-radius: 0;
    background: 0 0;
}
.wcbs-input[type="file"]::file-selector-button {
    margin-right: calc(var(--wcbs-spacing) / 2);
    padding: calc(var(--wcbs-form-element-spacing-vertical) * 0.5) var(--wcbs-form-element-spacing-horizontal);
}
.wcbs-input[type="file"]:is(:hover, :active, :focus)::file-selector-button {
    --wcbs-background-color: var(--wcbs-secondary-hover-background);
    --wcbs-border-color: var(--wcbs-secondary-hover-border);
}
.wcbs-input[type="file"]:focus::file-selector-button {
    --wcbs-box-shadow: var(--wcbs-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--wcbs-outline-width) var(--wcbs-secondary-focus);
}
.wcbs-input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 1.25rem;
    background: 0 0;
}
.wcbs-input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.375rem;
    border-radius: var(--wcbs-border-radius);
    background-color: var(--wcbs-range-border-color);
    -webkit-transition: background-color var(--wcbs-transition), box-shadow var(--wcbs-transition);
    transition: background-color var(--wcbs-transition), box-shadow var(--wcbs-transition);
}
.wcbs-input[type="range"]::-moz-range-track {
    width: 100%;
    height: 0.375rem;
    border-radius: var(--wcbs-border-radius);
    background-color: var(--wcbs-range-border-color);
    -moz-transition: background-color var(--wcbs-transition), box-shadow var(--wcbs-transition);
    transition: background-color var(--wcbs-transition), box-shadow var(--wcbs-transition);
}
.wcbs-input[type="range"]::-ms-track {
    width: 100%;
    height: 0.375rem;
    border-radius: var(--wcbs-border-radius);
    background-color: var(--wcbs-range-border-color);
    -ms-transition: background-color var(--wcbs-transition), box-shadow var(--wcbs-transition);
    transition: background-color var(--wcbs-transition), box-shadow var(--wcbs-transition);
}
.wcbs-input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.4375rem;
    border: 2px solid var(--wcbs-range-thumb-border-color);
    border-radius: 50%;
    background-color: var(--wcbs-range-thumb-color);
    cursor: pointer;
    -webkit-transition: background-color var(--wcbs-transition), transform var(--wcbs-transition);
    transition: background-color var(--wcbs-transition), transform var(--wcbs-transition);
}
.wcbs-input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.4375rem;
    border: 2px solid var(--wcbs-range-thumb-border-color);
    border-radius: 50%;
    background-color: var(--wcbs-range-thumb-color);
    cursor: pointer;
    -moz-transition: background-color var(--wcbs-transition), transform var(--wcbs-transition);
    transition: background-color var(--wcbs-transition), transform var(--wcbs-transition);
}
.wcbs-input[type="range"]::-ms-thumb {
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.4375rem;
    border: 2px solid var(--wcbs-range-thumb-border-color);
    border-radius: 50%;
    background-color: var(--wcbs-range-thumb-color);
    cursor: pointer;
    -ms-transition: background-color var(--wcbs-transition), transform var(--wcbs-transition);
    transition: background-color var(--wcbs-transition), transform var(--wcbs-transition);
}
.wcbs-input[type="range"]:active,
.wcbs-input[type="range"]:focus-within {
    --wcbs-range-border-color: var(--wcbs-range-active-border-color);
    --wcbs-range-thumb-color: var(--wcbs-range-thumb-active-color);
}
.wcbs-input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.25);
}
.wcbs-input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.25);
}
.wcbs-input[type="range"]:active::-ms-thumb {
    transform: scale(1.25);
}
.wcbs-input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
    padding-inline-start: calc(var(--wcbs-form-element-spacing-horizontal) + 1.75rem);
    background-image: var(--wcbs-icon-search);
    background-position: center left calc(var(--wcbs-form-element-spacing-horizontal) + 0.125rem);
    background-size: 1rem auto;
    background-repeat: no-repeat;
}
.wcbs-input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
    padding-inline-start: calc(var(--wcbs-form-element-spacing-horizontal) + 1.75rem) !important;
    background-position: center left 1.125rem, center right 0.75rem;
}
.wcbs-input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] {
    background-image: var(--wcbs-icon-search), var(--wcbs-icon-valid);
}
.wcbs-input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] {
    background-image: var(--wcbs-icon-search), var(--wcbs-icon-invalid);
}
[dir="rtl"] :where(.wcbs-input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
    background-position: center right 1.125rem;
}
[dir="rtl"] :where(.wcbs-input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
    background-position: center right 1.125rem, center left 0.75rem;
}
.wcbs-details {
    display: block;
    margin-bottom: var(--wcbs-spacing);
}
.wcbs-details .wcbs-summary {
    line-height: 1rem;
    list-style-type: none;
    cursor: pointer;
    transition: color var(--wcbs-transition);
}
.wcbs-.wcbs-details .wcbs-summary:not([role]) {
    color: var(--wcbs-accordion-close-summary-color);
}
.wcbs-details .wcbs-summary::-webkit-details-marker {
    display: none;
}
.wcbs-details .wcbs-summary::marker {
    display: none;
}
.wcbs-details .wcbs-summary::-moz-list-bullet {
    list-style-type: none;
}
.wcbs-details .wcbs-summary::after {
    display: block;
    width: 1rem;
    height: 1rem;
    margin-inline-start: calc(var(--wcbs-spacing, 1rem) * 0.5);
    float: right;
    transform: rotate(-90deg);
    background-image: var(--wcbs-icon-chevron);
    background-position: right center;
    background-size: 1rem auto;
    background-repeat: no-repeat;
    content: "";
    transition: transform var(--wcbs-transition);
}
.wcbs-details .wcbs-summary:focus {
    outline: 0;
}
.wcbs-details .wcbs-summary:focus:not([role]) {
    color: var(--wcbs-accordion-active-summary-color);
}
.wcbs-details .wcbs-summary:focus-visible:not([role]) {
    outline: var(--wcbs-outline-width) solid var(--wcbs-primary-focus);
    outline-offset: calc(var(--wcbs-spacing, 1rem) * 0.5);
    color: var(--wcbs-primary);
}
.wcbs-details .wcbs-summary[role="button"] {
    width: 100%;
    text-align: left;
}
.wcbs-details .wcbs-summary[role="button"]::after {
    height: calc(1rem * var(--wcbs-line-height, 1.5));
}
.wcbs-details[open] > .wcbs-summary {
    margin-bottom: var(--wcbs-spacing);
}
.wcbs-details[open] > .wcbs-summary:not([role]):not(:focus) {
    color: var(--wcbs-accordion-open-summary-color);
}
.wcbs-details[open] > .wcbs-summary::after {
    transform: rotate(0);
}
[dir="rtl"] .wcbs-details .wcbs-summary {
    text-align: right;
}
[dir="rtl"] .wcbs-details .wcbs-summary::after {
    float: left;
    background-position: left center;
}
.wcbs-article {
    margin-bottom: var(--wcbs-block-spacing-vertical);
    padding: var(--wcbs-block-spacing-vertical) var(--wcbs-block-spacing-horizontal);
    border-radius: var(--wcbs-border-radius);
    background: var(--wcbs-card-background-color);
    box-shadow: var(--wcbs-card-box-shadow);
}
.wcbs-article > .wcbs-footer,
.wcbs-article > .wcbs-header {
    margin-right: calc(var(--wcbs-block-spacing-horizontal) * -1);
    margin-left: calc(var(--wcbs-block-spacing-horizontal) * -1);
    padding: calc(var(--wcbs-block-spacing-vertical) * 0.66) var(--wcbs-block-spacing-horizontal);
    background-color: var(--wcbs-card-sectioning-background-color);
}
.wcbs-article > .wcbs-header {
    margin-top: calc(var(--wcbs-block-spacing-vertical) * -1);
    margin-bottom: var(--wcbs-block-spacing-vertical);
    border-bottom: var(--wcbs-border-width) solid var(--wcbs-card-border-color);
    border-top-right-radius: var(--wcbs-border-radius);
    border-top-left-radius: var(--wcbs-border-radius);
}
.wcbs-article > .wcbs-footer {
    margin-top: var(--wcbs-block-spacing-vertical);
    margin-bottom: calc(var(--wcbs-block-spacing-vertical) * -1);
    border-top: var(--wcbs-border-width) solid var(--wcbs-card-border-color);
    border-bottom-right-radius: var(--wcbs-border-radius);
    border-bottom-left-radius: var(--wcbs-border-radius);
}
.wcbs-details.wcbs-dropdown {
    position: relative;
    border-bottom: none;
}
.wcbs-details.wcbs-dropdown > .wcbs-a::after,
.wcbs-details.wcbs-dropdown > .wcbs-button::after,
.wcbs-details.wcbs-dropdown > .wcbs-summary::after {
    display: block;
    width: 1rem;
    height: calc(1rem * var(--wcbs-line-height, 1.5));
    margin-inline-start: 0.25rem;
    float: right;
    transform: rotate(0) translateX(0.2rem);
    background-image: var(--wcbs-icon-chevron);
    background-position: right center;
    background-size: 1rem auto;
    background-repeat: no-repeat;
    content: "";
}
.wcbs-nav details.wcbs-dropdown {
    margin-bottom: 0;
}
.wcbs-details.wcbs-dropdown > .wcbs-summary:not([role]) {
    height: calc(1rem * var(--wcbs-line-height) + var(--wcbs-form-element-spacing-vertical) * 2 + var(--wcbs-border-width) * 2);
    padding: var(--wcbs-form-element-spacing-vertical) var(--wcbs-form-element-spacing-horizontal);
    border: var(--wcbs-border-width) solid var(--wcbs-form-element-border-color);
    border-radius: var(--wcbs-border-radius);
    background-color: var(--wcbs-form-element-background-color);
    color: var(--wcbs-form-element-placeholder-color);
    line-height: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: background-color var(--wcbs-transition), border-color var(--wcbs-transition), color var(--wcbs-transition), box-shadow var(--wcbs-transition);
}
.wcbs-details.wcbs-dropdown > .wcbs-summary:not([role]):active,
.wcbs-details.wcbs-dropdown > .wcbs-summary:not([role]):focus {
    border-color: var(--wcbs-form-element-active-border-color);
    background-color: var(--wcbs-form-element-active-background-color);
}
.wcbs-details.wcbs-dropdown > .wcbs-summary:not([role]):focus {
    box-shadow: 0 0 0 var(--wcbs-outline-width) var(--wcbs-form-element-focus-color);
}
.wcbs-details.wcbs-dropdown > .wcbs-summary:not([role]):focus-visible {
    outline: 0;
}
.wcbs-details.wcbs-dropdown > .wcbs-summary:not([role])[aria-invalid="false"] {
    --wcbs-form-element-border-color: var(--wcbs-form-element-valid-border-color);
    --wcbs-form-element-active-border-color: var(--wcbs-form-element-valid-focus-color);
    --wcbs-form-element-focus-color: var(--wcbs-form-element-valid-focus-color);
}
.wcbs-details.wcbs-dropdown > .wcbs-summary:not([role])[aria-invalid="true"] {
    --wcbs-form-element-border-color: var(--wcbs-form-element-invalid-border-color);
    --wcbs-form-element-active-border-color: var(--wcbs-form-element-invalid-focus-color);
    --wcbs-form-element-focus-color: var(--wcbs-form-element-invalid-focus-color);
}
.wcbs-nav details.wcbs-dropdown {
    display: inline;
    margin: calc(var(--wcbs-nav-element-spacing-vertical) * -1) 0;
}
.wcbs-nav details.wcbs-dropdown > .wcbs-summary::after {
    transform: rotate(0) translateX(0);
}
.wcbs-nav details.wcbs-dropdown > .wcbs-summary:not([role]) {
    height: calc(1rem * var(--wcbs-line-height) + var(--wcbs-nav-link-spacing-vertical) * 2);
    padding: calc(var(--wcbs-nav-link-spacing-vertical) - var(--wcbs-border-width) * 2) var(--wcbs-nav-link-spacing-horizontal);
}
.wcbs-nav details.wcbs-dropdown > .wcbs-summary:not([role]):focus-visible {
    box-shadow: 0 0 0 var(--wcbs-outline-width) var(--wcbs-primary-focus);
}
.wcbs-details.wcbs-dropdown > .wcbs-summary + .wcbs-ul {
    display: flex;
    z-index: 99;
    position: absolute;
    left: 0;
    flex-direction: column;
    width: 100%;
    min-width: -moz-fit-content;
    min-width: fit-content;
    margin: 0;
    margin-top: var(--wcbs-outline-width);
    padding: 0;
    border: var(--wcbs-border-width) solid var(--wcbs-dropdown-border-color);
    border-radius: var(--wcbs-border-radius);
    background-color: var(--wcbs-dropdown-background-color);
    box-shadow: var(--wcbs-dropdown-box-shadow);
    color: var(--wcbs-dropdown-color);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--wcbs-transition), transform 0s ease-in-out 1s;
}
.wcbs-details.wcbs-dropdown > .wcbs-summary + .wcbs-ul[dir="rtl"] {
    right: 0;
    left: auto;
}
.wcbs-details.wcbs-dropdown > .wcbs-summary + .wcbs-ul .wcbs-li {
    width: 100%;
    margin-bottom: 0;
    padding: calc(var(--wcbs-form-element-spacing-vertical) * 0.5) var(--wcbs-form-element-spacing-horizontal);
    list-style: none;
}
.wcbs-details.wcbs-dropdown > .wcbs-summary + .wcbs-ul .wcbs-li:first-of-type {
    margin-top: calc(var(--wcbs-form-element-spacing-vertical) * 0.5);
}
.wcbs-details.wcbs-dropdown > .wcbs-summary + .wcbs-ul .wcbs-li:last-of-type {
    margin-bottom: calc(var(--wcbs-form-element-spacing-vertical) * 0.5);
}
.wcbs-details.wcbs-dropdown > .wcbs-summary + .wcbs-ul .wcbs-li .wcbs-a {
    display: block;
    margin: calc(var(--wcbs-form-element-spacing-vertical) * -0.5) calc(var(--wcbs-form-element-spacing-horizontal) * -1);
    padding: calc(var(--wcbs-form-element-spacing-vertical) * 0.5) var(--wcbs-form-element-spacing-horizontal);
    overflow: hidden;
    border-radius: 0;
    color: var(--wcbs-dropdown-color);
    text-decoration: none;
    text-overflow: ellipsis;
}
.wcbs-details.wcbs-dropdown > .wcbs-summary + .wcbs-ul .wcbs-li .wcbs-a:active,
.wcbs-details.wcbs-dropdown > .wcbs-summary + .wcbs-ul .wcbs-li .wcbs-a:focus,
.wcbs-details.wcbs-dropdown > .wcbs-summary + .wcbs-ul .wcbs-li .wcbs-a:focus-visible,
.wcbs-details.wcbs-dropdown > .wcbs-summary + .wcbs-ul .wcbs-li .wcbs-a:hover,
.wcbs-details.wcbs-dropdown > .wcbs-summary + .wcbs-ul .wcbs-li .wcbs-a[aria-current]:not([aria-current="false"]) {
    background-color: var(--wcbs-dropdown-hover-background-color);
}
.wcbs-details.wcbs-dropdown > .wcbs-summary + .wcbs-ul .wcbs-li .wcbs-label {
    width: 100%;
}
.wcbs-details.wcbs-dropdown > .wcbs-summary + .wcbs-ul .wcbs-li:has(.wcbs-label):hover {
    background-color: var(--wcbs-dropdown-hover-background-color);
}
.wcbs-details.wcbs-dropdown[open] > .wcbs-summary {
    margin-bottom: 0;
}
.wcbs-details.wcbs-dropdown[open] > .wcbs-summary + .wcbs-ul {
    transform: scaleY(1);
    opacity: 1;
    transition: opacity var(--wcbs-transition), transform 0s ease-in-out 0s;
}
.wcbs-details.wcbs-dropdown[open] > .wcbs-summary::before {
    display: block;
    z-index: 1;
    position: fixed;
    width: 100vw;
    height: 100vh;
    inset: 0;
    background: 0 0;
    content: "";
    cursor: default;
}
.wcbs-label > details.wcbs-dropdown {
    margin-top: calc(var(--wcbs-spacing) * 0.25);
}
[role="group"],
[role="search"] {
    display: inline-flex;
    position: relative;
    width: 100%;
    margin-bottom: var(--wcbs-spacing);
    border-radius: var(--wcbs-border-radius);
    box-shadow: var(--wcbs-group-box-shadow, 0 0 0 transparent);
    vertical-align: middle;
    transition: box-shadow var(--wcbs-transition);
}
[role="group"] .wcbs-input:not([type="checkbox"], [type="radio"]),
[role="group"] .wcbs-select,
[role="group"] > *,
[role="search"] .wcbs-input:not([type="checkbox"], [type="radio"]),
[role="search"] .wcbs-select,
[role="search"] > * {
    position: relative;
    flex: 1 1 auto;
    margin-bottom: 0;
}
[role="group"] .wcbs-input:not([type="checkbox"], [type="radio"]):not(:first-child),
[role="group"] .wcbs-select:not(:first-child),
[role="group"] > :not(:first-child),
[role="search"] .wcbs-input:not([type="checkbox"], [type="radio"]):not(:first-child),
[role="search"] .wcbs-select:not(:first-child),
[role="search"] > :not(:first-child) {
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
[role="group"] .wcbs-input:not([type="checkbox"], [type="radio"]):not(:last-child),
[role="group"] .wcbs-select:not(:last-child),
[role="group"] > :not(:last-child),
[role="search"] .wcbs-input:not([type="checkbox"], [type="radio"]):not(:last-child),
[role="search"] .wcbs-select:not(:last-child),
[role="search"] > :not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
[role="group"] .wcbs-input:not([type="checkbox"], [type="radio"]):focus,
[role="group"] .wcbs-select:focus,
[role="group"] > :focus,
[role="search"] .wcbs-input:not([type="checkbox"], [type="radio"]):focus,
[role="search"] .wcbs-select:focus,
[role="search"] > :focus {
    z-index: 2;
}
[role="group"] [role="button"]:not(:first-child),
[role="group"] [type="button"]:not(:first-child),
[role="group"] [type="reset"]:not(:first-child),
[role="group"] [type="submit"]:not(:first-child),
[role="group"] .wcbs-button:not(:first-child),
[role="group"] .wcbs-input:not([type="checkbox"], [type="radio"]):not(:first-child),
[role="group"] .wcbs-select:not(:first-child),
[role="search"] [role="button"]:not(:first-child),
[role="search"] [type="button"]:not(:first-child),
[role="search"] [type="reset"]:not(:first-child),
[role="search"] [type="submit"]:not(:first-child),
[role="search"] .wcbs-button:not(:first-child),
[role="search"] .wcbs-input:not([type="checkbox"], [type="radio"]):not(:first-child),
[role="search"] .wcbs-select:not(:first-child) {
    margin-left: calc(var(--wcbs-border-width) * -1);
}
[role="group"] [role="button"],
[role="group"] [type="button"],
[role="group"] [type="reset"],
[role="group"] [type="submit"],
[role="group"] .wcbs-button,
[role="search"] [role="button"],
[role="search"] [type="button"],
[role="search"] [type="reset"],
[role="search"] [type="submit"],
[role="search"] .wcbs-button {
    width: auto;
}
@supports selector(: has(*)) {
    [role="group"]:has(.wcbs-button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus),
    [role="search"]:has(.wcbs-button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
        --wcbs-group-box-shadow: var(--wcbs-group-box-shadow-focus-with-button);
    }
    [role="group"]:has(.wcbs-button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) .wcbs-input:not([type="checkbox"], [type="radio"]),
    [role="group"]:has(.wcbs-button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) .wcbs-select,
    [role="search"]:has(.wcbs-button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) .wcbs-input:not([type="checkbox"], [type="radio"]),
    [role="search"]:has(.wcbs-button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) .wcbs-select {
        border-color: transparent;
    }
    [role="group"]:has(.wcbs-input:not([type="submit"], [type="button"]):focus, .wcbs-select:focus),
    [role="search"]:has(.wcbs-input:not([type="submit"], [type="button"]):focus, .wcbs-select:focus) {
        --wcbs-group-box-shadow: var(--wcbs-group-box-shadow-focus-with-input);
    }
    [role="group"]:has(.wcbs-input:not([type="submit"], [type="button"]):focus, .wcbs-select:focus) [role="button"],
    [role="group"]:has(.wcbs-input:not([type="submit"], [type="button"]):focus, .wcbs-select:focus) [type="button"],
    [role="group"]:has(.wcbs-input:not([type="submit"], [type="button"]):focus, .wcbs-select:focus) [type="submit"],
    [role="group"]:has(.wcbs-input:not([type="submit"], [type="button"]):focus, .wcbs-select:focus) .wcbs-button,
    [role="search"]:has(.wcbs-input:not([type="submit"], [type="button"]):focus, .wcbs-select:focus) [role="button"],
    [role="search"]:has(.wcbs-input:not([type="submit"], [type="button"]):focus, .wcbs-select:focus) [type="button"],
    [role="search"]:has(.wcbs-input:not([type="submit"], [type="button"]):focus, .wcbs-select:focus) [type="submit"],
    [role="search"]:has(.wcbs-input:not([type="submit"], [type="button"]):focus, .wcbs-select:focus) .wcbs-button {
        --wcbs-button-box-shadow: 0 0 0 var(--wcbs-border-width) var(--wcbs-primary-border);
        --wcbs-button-hover-box-shadow: 0 0 0 var(--wcbs-border-width) var(--wcbs-primary-hover-border);
    }
    [role="group"] [role="button"]:focus,
    [role="group"] [type="button"]:focus,
    [role="group"] [type="reset"]:focus,
    [role="group"] [type="submit"]:focus,
    [role="group"] .wcbs-button:focus,
    [role="search"] [role="button"]:focus,
    [role="search"] [type="button"]:focus,
    [role="search"] [type="reset"]:focus,
    [role="search"] [type="submit"]:focus,
    [role="search"] .wcbs-button:focus {
        box-shadow: none;
    }
}
[role="search"] > :first-child {
    border-top-left-radius: 5rem;
    border-bottom-left-radius: 5rem;
}
[role="search"] > :last-child {
    border-top-right-radius: 5rem;
    border-bottom-right-radius: 5rem;
}
[aria-busy="true"]:not(.wcbs-input, .wcbs-select, .wcbs-textarea, .wcbs-html, .wcbs-form) {
    white-space: nowrap;
}
[aria-busy="true"]:not(.wcbs-input, .wcbs-select, .wcbs-textarea, .wcbs-html, .wcbs-form)::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: var(--wcbs-icon-loading);
    background-size: 1em auto;
    background-repeat: no-repeat;
    content: "";
    vertical-align: -0.125em;
}
[aria-busy="true"]:not(.wcbs-input, .wcbs-select, .wcbs-textarea, .wcbs-html, .wcbs-form):not(:empty)::before {
    margin-inline-end: calc(var(--wcbs-spacing) * 0.5);
}
[aria-busy="true"]:not(.wcbs-input, .wcbs-select, .wcbs-textarea, .wcbs-html, .wcbs-form):empty {
    text-align: center;
}
.wcbs-button[role="button"][aria-busy="true"],
.wcbs-button[type="button"][aria-busy="true"],
.wcbs-button[type="reset"][aria-busy="true"],
.wcbs-button[type="submit"][aria-busy="true"],
.wcbs-a[aria-busy="true"],
.wcbs-button[aria-busy="true"] {
    pointer-events: none;
}
:host,
:root {
    --wcbs-scrollbar-width: 0px;
}
.wcbs-dialog {
    display: flex;
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: inherit;
    min-width: 100%;
    height: inherit;
    min-height: 100%;
    padding: 0;
    border: 0;
    -webkit-backdrop-filter: var(--wcbs-modal-overlay-backdrop-filter);
    backdrop-filter: var(--wcbs-modal-overlay-backdrop-filter);
    background-color: var(--wcbs-modal-overlay-background-color);
    color: var(--wcbs-color);
}
.wcbs-dialog > .wcbs-article {
    width: 100%;
    max-height: calc(100vh - var(--wcbs-spacing) * 2);
    margin: var(--wcbs-spacing);
    overflow: auto;
}
@media (min-width: 576px) {
    .wcbs-dialog > .wcbs-article {
        max-width: 510px;
    }
}
@media (min-width: 768px) {
    .wcbs-dialog > .wcbs-article {
        max-width: 700px;
    }
}
.wcbs-dialog > .wcbs-article > .wcbs-header > * {
    margin-bottom: 0;
}
.wcbs-dialog > .wcbs-article > .wcbs-header close,
.wcbs-dialog > .wcbs-article > .wcbs-header :is(.wcbs-a, .wcbs-button)[rel="prev"] {
    margin: 0;
    margin-left: var(--wcbs-spacing);
    padding: 0;
    float: right;
}
.wcbs-dialog > .wcbs-article > .wcbs-footer {
    text-align: right;
}
.wcbs-dialog > .wcbs-article > .wcbs-footer [role="button"],
.wcbs-dialog > .wcbs-article > .wcbs-footer .wcbs-button {
    margin-bottom: 0;
}
.wcbs-dialog > .wcbs-article > .wcbs-footer [role="button"]:not(:first-of-type),
.wcbs-dialog > .wcbs-article > .wcbs-footer .wcbs-button:not(:first-of-type) {
    margin-left: calc(var(--wcbs-spacing) * 0.5);
}
.wcbs-dialog > .wcbs-article close,
.wcbs-dialog > .wcbs-article :is(.wcbs-a, .wcbs-button)[rel="prev"] {
    display: block;
    width: 1rem;
    height: 1rem;
    margin-top: calc(var(--wcbs-spacing) * -1);
    margin-bottom: var(--wcbs-spacing);
    margin-left: auto;
    border: none;
    background-image: var(--wcbs-icon-close);
    background-position: center;
    background-size: auto 1rem;
    background-repeat: no-repeat;
    background-color: transparent;
    opacity: 0.5;
    transition: opacity var(--wcbs-transition);
}
.wcbs-dialog > .wcbs-article close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
.wcbs-dialog > .wcbs-article :is(.wcbs-a, .wcbs-button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    opacity: 1;
}
.wcbs-dialog:not([open]),
.wcbs-dialog[open="false"] {
    display: none;
}
.wcbs-modal-is-open {
    padding-right: var(--wcbs-scrollbar-width, 0);
    overflow: hidden;
    pointer-events: none;
    touch-action: none;
}
.wcbs-modal-is-open .wcbs-dialog {
    pointer-events: auto;
    touch-action: auto;
}
:where(.wcbs-modal-is-opening, .wcbs-modal-is-closing) .wcbs-dialog,
:where(.wcbs-modal-is-opening, .wcbs-modal-is-closing) .wcbs-dialog > .wcbs-article {
    animation-duration: 0.2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}
:where(.wcbs-modal-is-opening, .wcbs-modal-is-closing) .wcbs-dialog {
    animation-duration: 0.8s;
    animation-name: modal-overlay;
}
:where(.wcbs-modal-is-opening, .wcbs-modal-is-closing) .wcbs-dialog > .wcbs-article {
    animation-delay: 0.2s;
    animation-name: modal;
}
.wcbs-modal-is-closing dialog,
.wcbs-modal-is-closing dialog > .wcbs-article {
    animation-delay: 0s;
    animation-direction: reverse;
}
@keyframes modal-overlay {
    from {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: transparent;
    }
}
@keyframes modal {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
}
:where(.wcbs-nav .wcbs-li)::before {
    float: left;
    content: "​";
}
.wcbs-nav,
.wcbs-nav .wcbs-ul {
    display: flex;
}
.wcbs-nav {
    justify-content: space-between;
    overflow: visible;
}
.wcbs-nav .wcbs-ol,
.wcbs-nav .wcbs-ul {
    align-items: center;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}
.wcbs-nav .wcbs-ol:first-of-type,
.wcbs-nav ul:first-of-type {
    margin-left: calc(var(--wcbs-nav-element-spacing-horizontal) * -1);
}
.wcbs-nav .wcbs-ol:last-of-type,
.wcbs-nav .wcbs-ul:last-of-type {
    margin-right: calc(var(--wcbs-nav-element-spacing-horizontal) * -1);
}
.wcbs-nav .wcbs-li {
    display: inline-block;
    margin: 0;
    padding: var(--wcbs-nav-element-spacing-vertical) var(--wcbs-nav-element-spacing-horizontal);
}
.wcbs-nav .wcbs-li :where(.wcbs-a, [role="link"]) {
    display: inline-block;
    margin: calc(var(--wcbs-nav-link-spacing-vertical) * -1) calc(var(--wcbs-nav-link-spacing-horizontal) * -1);
    padding: var(--wcbs-nav-link-spacing-vertical) var(--wcbs-nav-link-spacing-horizontal);
    border-radius: var(--wcbs-border-radius);
}
.wcbs-nav .wcbs-li :where(.wcbs-a, [role="link"]):not(:hover) {
    text-decoration: none;
}
.wcbs-nav .wcbs-li [role="button"],
.wcbs-nav .wcbs-li [type="button"],
.wcbs-nav .wcbs-li .wcbs-button,
.wcbs-nav .wcbs-li .wcbs-input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
.wcbs-nav .wcbs-li .wcbs-select {
    height: auto;
    margin-right: inherit;
    margin-bottom: 0;
    margin-left: inherit;
    padding: calc(var(--wcbs-nav-link-spacing-vertical) - var(--wcbs-border-width) * 2) var(--wcbs-nav-link-spacing-horizontal);
}
.wcbs-nav[aria-label="breadcrumb"] {
    align-items: center;
    justify-content: start;
}
.wcbs-nav[aria-label="breadcrumb"] .wcbs-ul .wcbs-li:not(:first-child) {
    margin-inline-start: var(--wcbs-nav-link-spacing-horizontal);
}
.wcbs-nav[aria-label="breadcrumb"] .wcbs-ul .wcbs-li .wcbs-a {
    margin: calc(var(--wcbs-nav-link-spacing-vertical) * -1) 0;
    margin-inline-start: calc(var(--wcbs-nav-link-spacing-horizontal) * -1);
}
.wcbs-nav[aria-label="breadcrumb"] .wcbs-ul .wcbs-li:not(:last-child)::after {
    display: inline-block;
    position: absolute;
    width: calc(var(--wcbs-nav-link-spacing-horizontal) * 4);
    margin: 0 calc(var(--wcbs-nav-link-spacing-horizontal) * -1);
    content: var(--wcbs-nav-breadcrumb-divider);
    color: var(--wcbs-muted-color);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}
.wcbs-nav[aria-label="breadcrumb"] .wcbs-a[aria-current]:not([aria-current="false"]) {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
    pointer-events: none;
}
.wcbs-aside .wcbs-li,
.wcbs-aside .wcbs-nav,
.wcbs-aside .wcbs-ol,
.wcbs-aside .wcbs-ul {
    display: block;
}
.wcbs-aside .wcbs-li {
    padding: calc(var(--wcbs-nav-element-spacing-vertical) * 0.5) var(--wcbs-nav-element-spacing-horizontal);
}
.wcbs-aside .wcbs-li .wcbs-a {
    display: block;
}
.wcbs-aside .wcbs-li [role="button"] {
    margin: inherit;
}
[dir="rtl"] .wcbs-nav[aria-label="breadcrumb"] .wcbs-ul .wcbs-li:not(:last-child) ::after {
    content: "\\";
}
.wcbs-progress {
    display: inline-block;
    vertical-align: baseline;
}
.wcbs-progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    appearance: none;
    width: 100%;
    height: 0.5rem;
    margin-bottom: calc(var(--wcbs-spacing) * 0.5);
    overflow: hidden;
    border: 0;
    border-radius: var(--wcbs-border-radius);
    background-color: var(--wcbs-progress-background-color);
    color: var(--wcbs-progress-color);
}
.wcbs-progress::-webkit-progress-bar {
    border-radius: var(--wcbs-border-radius);
    background: 0 0;
}
.wcbs-progress[value]::-webkit-progress-value {
    background-color: var(--wcbs-progress-color);
    -webkit-transition: inline-size var(--wcbs-transition);
    transition: inline-size var(--wcbs-transition);
}
.wcbs-progress::-moz-progress-bar {
    background-color: var(--wcbs-progress-color);
}
@media (prefers-reduced-motion: no-preference) {
    .wcbs-progress:indeterminate {
        background: var(--wcbs-progress-background-color) linear-gradient(to right, var(--wcbs-progress-color) 30%, var(--wcbs-progress-background-color) 30%) top left/150% 150% no-repeat;
        animation: progress-indeterminate 1s linear infinite;
    }
    .wcbs-progress:indeterminate[value]::-webkit-progress-value {
        background-color: transparent;
    }
    .wcbs-progress:indeterminate::-moz-progress-bar {
        background-color: transparent;
    }
}
@media (prefers-reduced-motion: no-preference) {
    [dir="rtl"] .wcbs-progress:indeterminate {
        animation-direction: reverse;
    }
}
@keyframes progress-indeterminate {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
[data-tooltip] {
    position: relative;
}
[data-tooltip]:not(.wcbs-a, .wcbs-button, .wcbs-input, [role="button"]) {
    border-bottom: 1px dotted;
    text-decoration: none;
    cursor: help;
}
[data-tooltip]::after,
[data-tooltip]::before,
[data-tooltip][data-placement="top"]::after,
[data-tooltip][data-placement="top"]::before {
    display: block;
    z-index: 99;
    position: absolute;
    bottom: 100%;
    left: 50%;
    padding: 0.25rem 0.5rem;
    overflow: hidden;
    transform: translate(-50%, -0.25rem);
    border-radius: var(--wcbs-border-radius);
    background: var(--wcbs-tooltip-background-color);
    content: attr(data-tooltip);
    color: var(--wcbs-tooltip-color);
    font-style: normal;
    font-weight: var(--wcbs-font-weight);
    font-size: 0.875rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}
[data-tooltip]::after,
[data-tooltip][data-placement="top"]::after {
    padding: 0;
    transform: translate(-50%, 0);
    border-top: 0.3rem solid;
    border-right: 0.3rem solid transparent;
    border-left: 0.3rem solid transparent;
    border-radius: 0;
    background-color: transparent;
    content: "";
    color: var(--wcbs-tooltip-background-color);
}
[data-tooltip][data-placement="bottom"]::after,
[data-tooltip][data-placement="bottom"]::before {
    top: 100%;
    bottom: auto;
    transform: translate(-50%, 0.25rem);
}
[data-tooltip][data-placement="bottom"]:after {
    transform: translate(-50%, -0.3rem);
    border: 0.3rem solid transparent;
    border-bottom: 0.3rem solid;
}
[data-tooltip][data-placement="left"]::after,
[data-tooltip][data-placement="left"]::before {
    top: 50%;
    right: 100%;
    bottom: auto;
    left: auto;
    transform: translate(-0.25rem, -50%);
}
[data-tooltip][data-placement="left"]:after {
    transform: translate(0.3rem, -50%);
    border: 0.3rem solid transparent;
    border-left: 0.3rem solid;
}
[data-tooltip][data-placement="right"]::after,
[data-tooltip][data-placement="right"]::before {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 100%;
    transform: translate(0.25rem, -50%);
}
[data-tooltip][data-placement="right"]:after {
    transform: translate(-0.3rem, -50%);
    border: 0.3rem solid transparent;
    border-right: 0.3rem solid;
}
[data-tooltip]:focus::after,
[data-tooltip]:focus::before,
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
    [data-tooltip]:focus::after,
    [data-tooltip]:focus::before,
    [data-tooltip]:hover::after,
    [data-tooltip]:hover::before {
        --wcbs-tooltip-slide-to: translate(-50%, -0.25rem);
        transform: translate(-50%, 0.75rem);
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
        animation-name: tooltip-slide;
        opacity: 0;
    }
    [data-tooltip]:focus::after,
    [data-tooltip]:hover::after {
        --wcbs-tooltip-caret-slide-to: translate(-50%, 0rem);
        transform: translate(-50%, -0.25rem);
        animation-name: tooltip-caret-slide;
    }
    [data-tooltip][data-placement="bottom"]:focus::after,
    [data-tooltip][data-placement="bottom"]:focus::before,
    [data-tooltip][data-placement="bottom"]:hover::after,
    [data-tooltip][data-placement="bottom"]:hover::before {
        --wcbs-tooltip-slide-to: translate(-50%, 0.25rem);
        transform: translate(-50%, -0.75rem);
        animation-name: tooltip-slide;
    }
    [data-tooltip][data-placement="bottom"]:focus::after,
    [data-tooltip][data-placement="bottom"]:hover::after {
        --wcbs-tooltip-caret-slide-to: translate(-50%, -0.3rem);
        transform: translate(-50%, -0.5rem);
        animation-name: tooltip-caret-slide;
    }
    [data-tooltip][data-placement="left"]:focus::after,
    [data-tooltip][data-placement="left"]:focus::before,
    [data-tooltip][data-placement="left"]:hover::after,
    [data-tooltip][data-placement="left"]:hover::before {
        --wcbs-tooltip-slide-to: translate(-0.25rem, -50%);
        transform: translate(0.75rem, -50%);
        animation-name: tooltip-slide;
    }
    [data-tooltip][data-placement="left"]:focus::after,
    [data-tooltip][data-placement="left"]:hover::after {
        --wcbs-tooltip-caret-slide-to: translate(0.3rem, -50%);
        transform: translate(0.05rem, -50%);
        animation-name: tooltip-caret-slide;
    }
    [data-tooltip][data-placement="right"]:focus::after,
    [data-tooltip][data-placement="right"]:focus::before,
    [data-tooltip][data-placement="right"]:hover::after,
    [data-tooltip][data-placement="right"]:hover::before {
        --wcbs-tooltip-slide-to: translate(0.25rem, -50%);
        transform: translate(-0.75rem, -50%);
        animation-name: tooltip-slide;
    }
    [data-tooltip][data-placement="right"]:focus::after,
    [data-tooltip][data-placement="right"]:hover::after {
        --wcbs-tooltip-caret-slide-to: translate(-0.3rem, -50%);
        transform: translate(-0.05rem, -50%);
        animation-name: tooltip-caret-slide;
    }
}
@keyframes tooltip-slide {
    to {
        transform: var(--wcbs-tooltip-slide-to);
        opacity: 1;
    }
}
@keyframes tooltip-caret-slide {
    50% {
        opacity: 0;
    }
    to {
        transform: var(--wcbs-tooltip-caret-slide-to);
        opacity: 1;
    }
}
[aria-controls] {
    cursor: pointer;
}
[aria-disabled="true"],
[disabled] {
    cursor: not-allowed;
}
[aria-hidden="false"][hidden] {
    display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
    clip: rect(0, 0, 0, 0);
    position: absolute;
}
[tabindex],
.wcbs-a,
.wcbs-area,
.wcbs-button,
.wcbs-input,
.wcbs-label,
.wcbs-select,
.wcbs-summary,
.wcbs-textarea {
    -ms-touch-action: manipulation;
}
[dir="rtl"] {
    direction: rtl;
}
@media (prefers-reduced-motion: reduce) {
    :not([aria-busy="true"]),
    :not([aria-busy="true"])::after,
    :not([aria-busy="true"])::before {
        background-attachment: initial !important;
        animation-duration: 1ms !important;
        animation-delay: -1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-delay: 0s !important;
        transition-duration: 0s !important;
    }
}
.wcbs-icon-button {
    padding: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    transition: transform 0.5s;
}
.wcbs-icon-button:hover {
    transform: scale(1.1);
}
.wcbs-menu-span {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
    justify-content: center;
} 
.wcbs-menu-icon {
    background-size: contain;
    background-repeat: no-repeat;
    color: var(--wcbs-primary);
    padding-right: 8px;
}
.inbox-none {
  background-image: var(--wcbs-icon-inbox);
}
.inbox-unread {
    background-image: var(--wcbs-icon-inbox-unread);
}
.wcbs-toast-container {
  position: fixed;
  top: 32px;
  right: 32px;
  z-index: 999999;
}
.wcbs-toast {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 2px;
  padding: 20px 0;
  min-width: 400px;
  max-width: 450px;
  border-left: 4px solid;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.08);
  transition: all linear 0.3s;
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(calc(100% + 32px));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
.wcbs-toast-success {
  border-color: #47d864;
}
.wcbs-toast-success .wcbs-toast-icon {
  color: #47d864;
}
.wcbs-toast-info {
  border-color: #2f86eb;
}
.wcbs-toast-info .wcbs-toast-icon {
  color: #2f86eb;
}
.wcbs-toast-warning {
  border-color: #ffc021;
}
.wcbs-toast-warning .wcbs-toast-icon {
  color: #ffc021;
}
.wcbs-toast-error {
  border-color: #ff623d;
}
.wcbs-toast-error .wcbs-toast-icon {
  color: #ff623d;
}
.wcbs-toast + .wcbs-toast {
  margin-top: 24px;
}
.wcbs-toast-icon {
  font-size: 24px;
}
.wcbs-toast-icon,
.wcbs-toast-close {
  padding: 0 16px;
}
.wcbs-toast-body {
  flex-grow: 1;
}
.wcbs-toast-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.wcbs-toast-msg {
  font-size: 14px;
  color: #888;
  margin-top: 6px;
  line-height: 1.5;
}
.wcbs-toast-close {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
/* Override Styles */
.fusion-page-title-bar {
    height: 200px !important;
}
.fusion-breadcrumb-link {
    font-size: 16px !important;
}
.breadcrumb-leaf {
    font-size: 16px !important;
}
.wcbs-ul {
    display: flex;
    align-content: center;
    align-items: center;
    margin: 0 0 0 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding-inline-start: 0 !important;
}
.wcbs-secondary-header {
    padding: 16px;
}
[role="search"] {
    margin-bottom: 0 !important;
    height: 40px !important;
}
.fusion-social-networks-wrapper {
    padding: 10px !important;
}
.wcbs-container-row {
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
.wcbs-container-row p {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}
.wcbs-notification-container {
  height: 500px;
  overflow-y: auto; 
  padding: 10px;
}
.wcbs-notification-heading {
    padding-left: 8px;
}
.wcbs-notification {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    height: auto;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 10px;
    background-color: var(--wcbs-card-sectioning-background-color);
    border: 1px solid var(--wcbs-card-border-color);
    transition: transform 0.5s, box-shadow 0.5s;
    cursor: pointer;
}
.wcbs-notification:hover {
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.wcbs-notification.wcbs-read {
    opacity: 60%;
}
.wcbs-notification.wcbs-open {
    border: 2px solid var(--wcbs-primary);
    opacity: 100%;
}
.wcbs-notification-header {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
.wcbs-notification-title {
    margin: 0 !important;    
}
.wcbs-notification-body {
    margin: 0 !important;
    font-size: large;
    color: var(--wcbs-h5-color);
}
.wcbs-notification-i {
    color: var(--wcbs-primary);
}
.wcbs-details-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    height: auto;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: var(--wcbs-background-color);
    border: 1px solid var(--wcbs-card-border-color);
}
.wcbs-details-card p {
    margin: 0 !important;
}
.wcbs-details-card-body {
    padding: 10px;
    font-size: large;
    color: var(--wcbs-h5-color);
}
.wcbs-details-card header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--wcbs-card-sectioning-background-color);
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: var(--wcbs-card-border-color);
    border-radius: 8px 8px 0 0;
    padding: 10px;
}
.wcbs-details-card footer {
    display: flex;
    justify-content: flex-end;
    background-color: var(--wcbs-card-sectioning-background-color);
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: var(--wcbs-card-border-color);
    border-radius: 0 0 8px 8px;
    padding: 10px;
}
.wcbs-details-close-icon {
    width: 24px;
    height: 24px;
    background: var(--wcbs-icon-close) no-repeat center center;
    background-size: contain;
    cursor: pointer;
    border: none;
    outline: none;
    transition: transform 0.5s;
}
.wcbs-details-close-icon:hover {
    transform: scale(1.1);
}
.wcbs-details-delete-icon {
    color: #9a9a9a;
    cursor: pointer;
    transition: transform 0.5s;
}
.wcbs-details-delete-icon:hover {
    transform: scale(1.1);
    color:#9b4343
}
.wcbs-qr-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  margin-top: 16px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 10px;
  box-sizing: border-box;
  background-color: white;
}
.wcbs-qr-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
@media (max-width: 768px) {
  .wcbs-qr-container {
    max-width: 200px;
  }
}
@media (max-width: 480px) {
  .wcbs-qr-container {
    max-width: 250px;
    margin: 10px auto;
  }
}
@media (max-width: 320px) {
  .wcbs-qr-container {
    max-width: 150px;
  }
}
@media (min-width: 1200px) {
  .wcbs-qr-container {
    max-width: 350px;
  }
}
.wcbs-qr-wrapper {
  padding: 20px;
  box-sizing: border-box;
}
.wcbs-navbar {
    padding: 0;
}
.wcbs-nav-container {
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}
.wcbs-nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 8px;
}
.wcbs-nav-item {
    display: flex;
    align-items: center;
}
.wcbs-nav-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    color: var(--wcbs-primary);
    font-weight: 500;
    font-size: 14px;
    padding: 8px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.wcbs-nav-link:hover {
    color: var(--wcbs-primary-hover);
    background-color: #f8f9fa;
}
.wcbs-search-container {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #ddd;
    transition: 0.3s ease;
}
.wcbs-search-container:focus-within {
    box-shadow: 0 0 0 2px var(--wcbs-primary-focus);
}
.wcbs-search-input {
    border: none;
    background: transparent;
    padding: 8px 8px;
    font-size: 14px;
    outline: none;
    width: 180px;
    color: #333;
}
.wcbs-search-input::placeholder {
    color: #666;
}
.wcbs-search-btn {
    background: none;
    border: none;
    padding: 8px 8px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    color: #666;
}
.wcbs-search-btn:hover {
    background-color: #e9ecef;
    color: var(--wcbs-primary-hover);
}
@media (max-width: 768px) {
    .wcbs-nav-container {
        padding: 0 15px;
        gap: 15x;
    }
    .wcbs-nav-menu {
        gap: 20px;
    }
    .wcbs-nav-link {
        font-size: 14px;
        padding: 6px 8px;
    }
    .wcbs-search-input {
        width: 150px;
    }
}
@media (max-width: 480px) {
    .wcbs-nav-menu {
        gap: 10px;
    }
    .wcbs-nav-link {
        font-size: 13px;
        padding: 4px 6px;
    }
    .wcbs-search-input {
        width: 120px;
        font-size: 14px;
    }
}
.wcbs-info-text {
    color: var(--wcbs-secondary);
    font-size: 14px;
    margin-top: 0px;
    margin-bottom: 8px;
}
.wcbs-clinic-cards-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 16px;
    gap: 8px;
}
.wcbs-clinic-card {
    border: 1px solid var(--wcbs-card-border-color);
    border-radius: var(--wcbs-border-radius);
    background-color: var(--wcbs-card-background-color);
    padding: 12px;
    box-shadow: var(--wcbs-card-box-shadow);
    transition: transform var(--wcbs-transition), box-shadow var(--wcbs-transition);
    cursor: pointer;
}
.wcbs-clinic-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.wcbs-clinic-card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.wcbs-clinic-card-header i {
    color: var(--wcbs-primary);
}
.wcbs-clinic-card-selected {
    border-color: var(--wcbs-primary);
    border-width: 2px;
    background-color: var(--wcbs-primary-background, rgba(var(--wcbs-primary-rgb, 0, 123, 255), 0.1));
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.wcbs-clinic-card-selected p,
.wcbs-clinic-card-selected h1,
.wcbs-clinic-card-selected h2,
.wcbs-clinic-card-selected h3,
.wcbs-clinic-card-selected h4,
.wcbs-clinic-card-selected h5,
.wcbs-clinic-card-selected h6,
.wcbs-clinic-card-selected i {
    color: var(--wcbs-background-color);
}
.wcbs-clinic-card-selected:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.wcbs-map-link {
    padding-bottom: 8px;
    text-decoration: none;
}
.wcbs-tab-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.wcbs-tab-nav {
  display: flex;
  background: white;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 0;
}
.wcbs-tab-button {
  flex: 1;
  padding: 16px 20px;
  background: #f8f9fa;
  border: none;
  color: #6b7280;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 3px solid transparent;
  font-family: inherit;
  position: relative;
}
.wcbs-tab-button:first-child {
  border-radius: 12px 0 0 0;
}
.wcbs-tab-button:last-child {
  border-radius: 0 12px 0 0;
}
.wcbs-tab-button:hover {
  background: #e5e7eb;
  color: #374151;
}
.wcbs-tab-button.active {
  background: white;
  color: var(--wcbs-primary);
  border-bottom-color: var(--wcbs-primary);
}
.wcbs-tab-button.active svg {
  stroke: var(--wcbs-primary);
}
.wcbs-tab-button svg {
  transition: stroke 0.3s ease;
}
.wcbs-tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(135deg, var(--wcbs-primary) 0%, var(--wcbs-primary-hover) 100%);
  animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}
.wcbs-tab-content {
    position: relative;
}
.wcbs-tab-pane {
    animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.wcbs-tab-pane 
.wcbs-profile-card,
.wcbs-edit-profile-form,
.wcbs-tab-pane 
.wcbs-profile-statistics-card,
.wcbs-tab-pane 
.wcbs-documents-card {
    margin-top: 0;
    border-radius: 0 0 16px 16px;
}
.wcbs-tab-pane 
.wcbs-profile-card {
    border-radius: 0 0 16px 16px;
}
.wcbs-tab-pane 
.wcbs-edit-profile-form {
    border-radius: 0 0 16px 16px;
}
.wcbs-tab-pane 
.wcbs-profile-statistics-card {
    border-radius: 16px;
    margin-top: 20px;
}
.wcbs-tab-pane
.wcbs-ds-body {
    margin-top: 20px;
}
.wcbs-tab-pane 
.wcbs-documents-card {
    border-radius: 0 0 16px 16px;
}
@media (max-width: 768px) {
    .wcbs-tab-container {
        max-width: none;
        margin: 0;
    }
    .wcbs-tab-button {
        padding: 14px 16px;
        font-size: 0.9rem;
        flex-direction: column;
        gap: 4px;
    } 
    .wcbs-tab-button svg {
        width: 14px;
        height: 14px;
    }
}
@media (max-width: 480px) {
    .wcbs-tab-nav {
        border-radius: 8px 8px 0 0;
    }
    .wcbs-tab-button {
        padding: 12px 14px;
        font-size: 0.85rem;
    }
    .wcbs-tab-pane 
    .wcbs-profile-card,
    .wcbs-edit-profile-form,
    .wcbs-tab-pane 
    .wcbs-documents-card {
        border-radius: 0 0 8px 8px;
    }
    .wcbs-tab-pane 
    .wcbs-profile-statistics-card {
        border-radius: 8px;
        margin-top: 16px;
    }
}
.wcbs-tab-button:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--wcbs-primary);
}
.wcbs-tab-pane {
    transition: opacity 0.3s ease-in-out;
}
.wcbs-profile-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-left: 30px;
    padding-right: 30px;
    gap: 10px;
}
.wcbs-profile-card {
    background: var(--wcbs-primary);
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}
.wcbs-profile-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -80px;
    width: 400px;
    height: 400px;
    background-image: url('./images/blood-droplet.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.25;
    z-index: 1;
    pointer-events: none;
}
.wcbs-pc-header {
    color: white;
    padding-left: 25px;
    position: relative;
    overflow: hidden;
}
.wcbs-pc-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 12px;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}
.wcbs-pc-subtitle {
    font-size: 1rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 15px;
    display: inline-block;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
}
.wcbs-pc-body {
    padding: 30px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.wcbs-pc-stats-container {
    text-align: center;
    flex: 1;
}
.wcbs-pc-stats
.wcbs-pc-stats-value {
    display: block;
    font-size: 1.5rem;
    color: var(--wcbs-background-color);
    line-height: 1;
    margin-bottom: 5px;
}
.wcbs-pc-stats
.wcbs-pc-stats-label {
    color: var(--wcbs-background-color);
    font-size: 0.9rem;
    font-weight: 500;
}
.wcbs-pc-footer {
    padding: 25px;
}
@media (max-width: 480px) {
    .wcbs-profile-card {
        max-width: 350px;
    }
    .wcbs-profile-card::before {
        top: -30px;
        right: -60px;
        width: 300px;
        height: 300px;
    }
    .wcbs-pc-header {
        padding: 25px 20px 20px;
    }
    .wcbs-pc-title {
        font-size: 1.6rem;
    }
    .wcbs-pc-card-body {
        padding: 25px 20px;
        flex-direction: column;
        gap: 25px;
    }
    .wcbs-pc-stats .wcbs-pc-stats-value {
        font-size: 1rem;
    }
}
.wcbs-medical-readings-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-top: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wcbs-mr-header {
    background: linear-gradient(135deg, var(--wcbs-primary) 0%, var(--wcbs-primary-hover) 100%);
    color: white;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    user-select: none;
}
.wcbs-mr-header:hover {
    background: linear-gradient(135deg, var(--wcbs-primary-hover) 0%, var(--wcbs-primary) 100%);
}
.wcbs-mr-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.025em;
}
.wcbs-chevron {
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wcbs-chevron svg {
    width: 20px;
    height: 20px;
}
.wcbs-medical-readings-card.collapsed .wcbs-chevron {
    transform: rotate(-90deg);
}
.wcbs-medical-readings-card.collapsed .wcbs-mr-body {
    max-height: 0;
    overflow: hidden;
    padding: 0;
}
.wcbs-medical-readings-card.collapsed .wcbs-mr-header {
    border-bottom: none;
}
.wcbs-mr-body {
    padding: 0;
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}
.wcbs-mr-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.2s ease;
}
.wcbs-mr-item:last-child {
    border-bottom: none;
}
.wcbs-mr-item:hover {
    background-color: #f9fafb;
}
.wcbs-mr-date {
    font-size: 0.95rem;
    font-weight: 500;
    color: #374151;
    min-width: 100px;
}
.wcbs-mr-values {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: flex-end;
}
.wcbs-mr-label {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}
.wcbs-mr-numbers {
    font-size: 1.1rem;
    font-weight: 700;
    color: #dc2626;
    background: #fef2f2;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #fecaca;
    min-width: 70px;
    text-align: center;
}
.wcbs-mr-item::before {
    content: '';
    width: 4px;
    height: 100%;
    background: var(--wcbs-primary);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.wcbs-mr-item:hover::before {
    opacity: 1;
}
.wcbs-mr-item {
    position: relative;
}
@media (max-width: 480px) {
    .wcbs-medical-readings-card {
        margin-top: 16px;
    }   
    .wcbs-mr-header {
        padding: 16px 20px;
    }
    .wcbs-mr-title {
        font-size: 1.1rem;
    }
    .wcbs-mr-item {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .wcbs-mr-values {
        width: 100%;
        justify-content: space-between;
    }
    .wcbs-mr-date {
        min-width: auto;
        font-size: 0.9rem;
    }
    .wcbs-mr-label {
        font-size: 0.85rem;
    }
    .wcbs-mr-numbers {
        font-size: 1rem;
    }
}
@media (min-width: 768px) {
    .wcbs-mr-item {
        padding: 24px 28px;
    }
    .wcbs-mr-date {
        min-width: 120px;
        font-size: 1rem;
    }
    .wcbs-mr-numbers {
        font-size: 1.15rem;
        min-width: 80px;
    }
}
.wcbs-edit-profile-form {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wcbs-form-header {
    background: linear-gradient(135deg, var(--wcbs-primary) 0%, var(--wcbs-primary-hover) 100%);
    color: white;
    padding: 24px 28px;
}
.wcbs-form-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.025em;
}
.wcbs-form-section {
    padding: 28px;
    border-bottom: 1px solid #f3f4f6;
}
.wcbs-form-section:last-of-type {
    border-bottom: none;
}
.wcbs-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 20px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--wcbs-primary);
    display: inline-block;
}
.wcbs-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}
.wcbs-form-row:last-child {
    margin-bottom: 0;
}
.wcbs-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.wcbs-form-group-small {
    flex: 0.5;
}
.wcbs-form-group-full {
    flex: 1;
}
.wcbs-input.readonly {
    background: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
    border-color: #e5e7eb;
}
.wcbs-input.readonly:hover,
.wcbs-input.readonly:focus {
    border-color: #e5e7eb;
    box-shadow: none;
}
.wcbs-checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    width: 100%;
}
.wcbs-form-actions {
    padding: 24px 28px;
    background: #f9fafb;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
@media (max-width: 768px) {
    .wcbs-edit-profile-form {
        margin-top: 16px;
    }
    .wcbs-form-header {
        padding: 20px 24px;
    }
    .wcbs-form-title {
        font-size: 1.25rem;
    }
    .wcbs-form-section {
        padding: 24px;
    }
    .wcbs-form-row {
        flex-direction: column;
        gap: 12px;
    }
    .wcbs-form-group,
    .wcbs-form-group-small,
    .wcbs-form-group-full {
        flex: 1;
    }
    .wcbs-checkbox-group {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .wcbs-form-actions {
        padding: 20px 24px;
        flex-direction: column-reverse;
    }
}

@media (max-width: 480px) {
    .wcbs-form-section {
        padding: 20px;
    }
    .wcbs-form-header {
        padding: 16px 20px;
    }
    .wcbs-form-actions {
        padding: 16px 20px;
    }
}
.wcbs-documents-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-top: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wcbs-doc-header {
    background: linear-gradient(135deg, var(--wcbs-primary) 0%, var(--wcbs-primary-hover) 100%);
    color: white;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wcbs-doc-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.025em;
}
.wcbs-doc-info-button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    backdrop-filter: blur(10px);
    margin-bottom: 0 !important;
}
.wcbs-doc-info-button:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}
.wcbs-doc-info-button:active {
    transform: scale(0.95);
}
.wcbs-doc-upload-section,
.wcbs-doc-list-section {
    padding: 28px;
    border-bottom: 1px solid #f3f4f6;
}
.wcbs-doc-list-section {
    border-bottom: none;
}
.wcbs-doc-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 20px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--wcbs-primary);
    display: inline-block;
}
.wcbs-doc-upload-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.wcbs-doc-form-row {
    display: flex;
    gap: 16px;
}
.wcbs-doc-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.wcbs-doc-select:hover {
    border-color: #d1d5db;
}
.wcbs-doc-upload-button-container {
    display: flex;
    justify-content: flex-start;
}
.wcbs-doc-list {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.wcbs-doc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    background: white;
    transition: background-color 0.2s ease;
}
.wcbs-doc-item:last-child {
    border-bottom: none;
}
.wcbs-doc-item:hover {
    background: #f9fafb;
}
.wcbs-doc-info {
    flex: 1;
}
.wcbs-doc-type {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wcbs-primary);
    margin-bottom: 4px;
}
.wcbs-doc-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wcbs-doc-filename {
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
}
.wcbs-doc-date {
    font-size: 0.8rem;
    color: #6b7280;
}
.wcbs-doc-actions {
    display: flex;
    gap: 8px;
}
.wcbs-doc-button {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 4px;
}
.wcbs-doc-button.delete {
    background: var(--wcbs-primary);
    color: white;
}
.wcbs-doc-button.delete:hover {
    background: var(--wcbs-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}
.wcbs-doc-list-empty {
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
    font-style: italic;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}
@media (max-width: 768px) {
    .wcbs-documents-card {
        margin-top: 16px;
    }
    .wcbs-doc-header {
        padding: 20px 24px;
    }
    .wcbs-doc-title {
        font-size: 1.25rem;
    }
    .wcbs-doc-upload-section,
    .wcbs-doc-list-section {
        padding: 24px;
    }
    .wcbs-doc-form-row {
        flex-direction: column;
        gap: 12px;
    }
    .wcbs-doc-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }
    .wcbs-doc-actions {
        width: 100%;
        justify-content: flex-end;
    }
}
@media (max-width: 480px) {
    .wcbs-doc-header {
        padding: 16px 20px;
    }
    .wcbs-doc-upload-section,
    .wcbs-doc-list-section {
        padding: 20px;
    }
    .wcbs-doc-section-title {
        font-size: 1rem;
    }
    .wcbs-doc-file-input-display {
        padding: 10px 14px;
    }
    .wcbs-doc-file-input-text {
        font-size: 0.9rem;
    }
    .wcbs-doc-item {
        padding: 14px;
    }
    .wcbs-doc-actions {
        gap: 6px;
    }
    .wcbs-doc-button {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
    .wcbs-doc-upload-button-container {
        width: 100%;
    }
    .wcbs-doc-upload-button {
        width: 100%;
        justify-content: center;
    }
}
.wcbs-ds-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.wcbs-ds-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    transition: all 0.3s ease;
    min-height: 110px;
}
.wcbs-ds-item.last-donation {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid var(--wcbs-primary);
}
.wcbs-ds-item.next-donation {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid var(--wcbs-secondary);
}
.wcbs-ds-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.wcbs-ds-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wcbs-ds-item.last-donation .wcbs-ds-icon {
    background: var(--wcbs-primary);
    color: white;
}
.wcbs-ds-item.next-donation .wcbs-ds-icon {
    background: var(--wcbs-secondary);
    color: white;
}
.wcbs-ds-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wcbs-ds-label {
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.wcbs-ds-item.last-donation .wcbs-ds-label {
    color: var(--wcbs-primary-hover);
}
.wcbs-ds-item.next-donation .wcbs-ds-label {
    color: var(--wcbs-secondary-hover);
}
.wcbs-ds-type {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wcbs-color);
    margin-bottom: 2px;
}
.wcbs-ds-date {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--wcbs-muted-color);
}
.wcbs-ds-separator {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.wcbs-ds-arrow {
    background: var(--wcbs-background-color);
    border: 2px solid var(--wcbs-muted-border-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wcbs-muted-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.wcbs-ds-item.next-donation::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    background: var(--wcbs-secondary);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--wcbs-background-color), 0 0 0 4px var(--wcbs-secondary);
    animation: pulse 2s infinite;
}
.wcbs-ds-item {
    position: relative;
}
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 2px var(--wcbs-background-color), 0 0 0 4px var(--wcbs-secondary);
    }
    50% {
        box-shadow: 0 0 0 2px var(--wcbs-background-color), 0 0 0 8px var(--wcbs-secondary-focus);
    }
    100% {
        box-shadow: 0 0 0 2px var(--wcbs-background-color), 0 0 0 4px var(--wcbs-secondary);
    }
}
@media (max-width: 768px) {
    .wcbs-donation-schedule-card {
        margin-top: 16px;
    }
    .wcbs-ds-header {
        padding: 14px 20px;
    }
    .wcbs-ds-title {
        font-size: 1rem;
    }
    .wcbs-ds-body {
        flex-direction: column;
        padding: 20px;
        gap: 16px;
    }
    .wcbs-ds-item {
        width: 100%;
        justify-content: flex-start;
    }
    .wcbs-ds-separator {
        flex-direction: row;
        width: 100%;
    }
    .wcbs-ds-arrow {
        transform: rotate(90deg);
    }
}
@media (max-width: 480px) {
    .wcbs-ds-header {
        padding: 12px 16px;
    }
    .wcbs-ds-body {
        padding: 16px;
    }
    .wcbs-ds-item {
        padding: 12px;
        gap: 12px;
    }
    .wcbs-ds-icon {
        width: 36px;
        height: 36px;
    }
    .wcbs-ds-icon svg {
        width: 16px;
        height: 16px;
    }
    .wcbs-ds-type {
        font-size: 1rem;
    }
    .wcbs-ds-date {
        font-size: 0.85rem;
    }
    .wcbs-ds-label {
        font-size: 0.75rem;
    }
}
.wcbs-calendar-view-container {
  display: flex;
  gap: var(--wcbs-spacing);
  width: 100%;
  max-width: 1200px;
  align-items: stretch;
  justify-content: center;
}
.wcbs-calendar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--wcbs-card-background-color);
  border: var(--wcbs-border-width) solid var(--wcbs-card-border-color);
  border-radius: var(--wcbs-border-radius);
  box-shadow: var(--wcbs-card-box-shadow);
  padding: var(--wcbs-spacing);
}
.wcbs-calendar-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-content: center;
  width: 100%;
  margin-bottom: var(--wcbs-spacing);
}
.wcbs-calendar-header button {
  background-color: var(--wcbs-primary-background);
  color: var(--wcbs-primary-inverse);
  width: 100px;
  border: var(--wcbs-border-width) solid var(--wcbs-primary-border);
  border-radius: var(--wcbs-border-radius);
  padding: var(--wcbs-form-element-spacing-vertical) var(--wcbs-form-element-spacing-horizontal);
  font-family: var(--wcbs-font-family);
  font-weight: var(--wcbs-font-weight);
  cursor: pointer;
  transition: var(--wcbs-transition);
}
.wcbs-calendar-header button:hover {
  background-color: var(--wcbs-primary-hover-background);
  border-color: var(--wcbs-primary-hover-border);
}
.wcbs-calendar-header div {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--wcbs-h3-color);
  text-align: center;
  flex: 1;
}
.wcbs-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--wcbs-border-width);
  background-color: var(--wcbs-muted-border-color);
  border: var(--wcbs-border-width) solid var(--wcbs-muted-border-color);
  border-radius: var(--wcbs-border-radius);
}
.wcbs-calendar-item {
  aspect-ratio: 1;
  min-height: 60px;
  padding: calc(var(--wcbs-spacing) * 0.5);
  background-color: var(--wcbs-background-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: var(--wcbs-font-weight);
  transition: var(--wcbs-transition);
  cursor: pointer;
  font-size: clamp(0.75rem, 2.5vw, 1rem);
}
.wcbs-calendar-item-dot {
  fill: var(--wcbs-primary);
  margin-top: 10px;
  width: 12px;
  height: 12px;
}
.wcbs-calendar-item.current-date .wcbs-calendar-item-dot {
  fill: var(--wcbs-primary-inverse);
}
.wcbs-calendar-item:hover {
  background-color: var(--wcbs-form-element-selected-background-color);
}
.wcbs-calendar-item:first-child {
  border-top-left-radius: calc(var(--wcbs-border-radius) - var(--wcbs-border-width));
}
.wcbs-calendar-item:nth-child(7) {
  border-top-right-radius: calc(var(--wcbs-border-radius) - var(--wcbs-border-width));
}
.wcbs-calendar-item:nth-last-child(7) {
  border-bottom-left-radius: calc(var(--wcbs-border-radius) - var(--wcbs-border-width));
}
.wcbs-calendar-item:last-child {
  border-bottom-right-radius: calc(var(--wcbs-border-radius) - var(--wcbs-border-width));
}
.wcbs-calendar-item:nth-child(-n+7) {
  background-color: var(--wcbs-card-sectioning-background-color);
  font-weight: 600;
  color: var(--wcbs-h5-color);
  justify-content: center;
  align-items: center;
  min-height: 40px;
  font-size: clamp(0.7rem, 2vw, 0.9rem);
}
.wcbs-calendar-item.other-month {
  color: var(--wcbs-muted-color);
  background-color: var(--wcbs-form-element-background-color);
  cursor: default;
}
.wcbs-calendar-item.current-date {
  background-color: var(--wcbs-primary-background);
  color: var(--wcbs-primary-inverse);
  font-weight: 600;
}
@media (max-width: 768px) {
  .wcbs-calendar-view-container {
    flex-direction: column;
    gap: calc(var(--wcbs-spacing) * 0.75);
  }
  .wcbs-calendar-container {
    max-width: 100%;
    padding: calc(var(--wcbs-spacing) * 0.75);
  }
  .wcbs-calendar-header {
    margin-bottom: calc(var(--wcbs-spacing) * 0.75);
  }
  .wcbs-calendar-header button {
    padding: calc(var(--wcbs-form-element-spacing-vertical) * 0.75) calc(var(--wcbs-form-element-spacing-horizontal) * 0.75);
    font-size: 0.9rem;
  }
  .wcbs-calendar-header div {
    font-size: 1.1rem;
  }
  .wcbs-calendar-item {
    min-height: 50px;
    padding: calc(var(--wcbs-spacing) * 0.25);
  }
  .wcbs-calendar-item:nth-child(-n+7) {
    min-height: 35px;
  }
  .wcbs-calendar-event-container {
    max-width: 100%;
    max-height: 400px;
  }
  .wcbs-calendar-events-header {
    font-size: 1rem;
  }
  .wcbs-calendar-event {
    padding: calc(var(--wcbs-spacing) * 0.75);
    margin-bottom: calc(var(--wcbs-spacing) * 0.75);
  }
}
@media (max-width: 480px) {
  .wcbs-calendar-container {
    padding: calc(var(--wcbs-spacing) * 0.5);
  }
  .wcbs-calendar-event-container {
    padding: calc(var(--wcbs-spacing) * 0.5);
    max-height: 350px;
  }
  .wcbs-calendar-header {
    flex-wrap: wrap;
    gap: calc(var(--wcbs-spacing) * 0.5);
  }
  .wcbs-calendar-header button {
    padding: calc(var(--wcbs-form-element-spacing-vertical) * 0.6) calc(var(--wcbs-form-element-spacing-horizontal) * 0.6);
    font-size: 0.8rem;
  }
  .wcbs-calendar-header div {
    font-size: 1rem;
    order: -1;
    width: 100%;
    margin-bottom: calc(var(--wcbs-spacing) * 0.25);
  }
  .wcbs-calendar-item {
    min-height: 40px;
    padding: calc(var(--wcbs-spacing) * 0.2);
    font-size: clamp(0.7rem, 3vw, 0.9rem);
  }
  .wcbs-calendar-item:nth-child(-n+7) {
    min-height: 30px;
    font-size: clamp(0.65rem, 2.5vw, 0.8rem);
  }
  .wcbs-calendar-item:nth-child(-n+7) {
    min-height: 30px;
    font-size: clamp(0.65rem, 2.5vw, 0.8rem);
  }
  .wcbs-calendar-events-header {
    font-size: 0.95rem;
  }
  .wcbs-calendar-event {
    padding: calc(var(--wcbs-spacing) * 0.6);
  }
  .wcbs-clinic-event-time {
    font-size: 0.8rem;
  }
  .wcbs-calendar-event div:nth-child(2) {
    font-size: 0.9rem;
  }
  .wcbs-calendar-event div:nth-child(3) {
    font-size: 0.8rem;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .wcbs-calendar-view-container {
    max-width: 900px;
  }
  .wcbs-calendar-container {
    max-width: 500px;
  }
  .wcbs-calendar-item {
    min-height: 70px;
  }
  .wcbs-calendar-item {
    min-height: 55px;
  }
  .wcbs-calendar-item:nth-child(-n+7) {
    min-height: 45px;
  }
  .wcbs-calendar-event-container {
    max-width: 350px;
  }
}
@media (min-width: 1025px) {
  .wcbs-calendar-view-container {
    max-width: 1200px;
  }
  .wcbs-calendar-container {
    max-width: 600px;
  }
  .wcbs-calendar-item {
    min-height: 68px;
  }
  .wcbs-calendar-item:nth-child(-n+7) {
    min-height: 50px;
  }
  .wcbs-calendar-event-container {
    max-width: 400px;
  }
}
.wcbs-calendar-event-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  flex: 1;
  background-color: var(--wcbs-card-background-color);
  border: var(--wcbs-border-width) solid var(--wcbs-card-border-color);
  border-radius: var(--wcbs-border-radius);
  box-shadow: var(--wcbs-card-box-shadow);
  padding: var(--wcbs-spacing);
  max-height: 600px;
  overflow-y: auto;
}
.wcbs-calendar-events-header {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--wcbs-h3-color);
  margin-bottom: var(--wcbs-spacing);
  padding-bottom: calc(var(--wcbs-spacing) * 0.5);
  border-bottom: var(--wcbs-border-width) solid var(--wcbs-muted-border-color);
}
.wcbs-calendar-event {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wcbs-spacing) * 0.5);
  padding: var(--wcbs-spacing);
  margin-bottom: var(--wcbs-spacing);
  background-color: var(--wcbs-form-element-background-color);
  border: var(--wcbs-border-width) solid var(--wcbs-form-element-border-color);
  border-radius: var(--wcbs-border-radius);
  transition: var(--wcbs-transition);
  cursor: pointer;
}
.wcbs-calendar-event:hover {
  background-color: var(--wcbs-form-element-selected-background-color);
  border-color: var(--wcbs-primary-border);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.wcbs-calendar-event:last-child {
  margin-bottom: 0;
}
.wcbs-clinic-event-time {
  display: flex;
  align-items: center;
  gap: calc(var(--wcbs-spacing) * 0.5);
  font-size: 0.9rem;
  color: var(--wcbs-muted-color);
  font-weight: 500;
}
.wcbs-clinic-event-time i {
  color: var(--wcbs-primary);
  font-size: 1rem;
}
.wcbs-calendar-event div:nth-child(2) {
  font-weight: 600;
  color: var(--wcbs-h4-color);
  font-size: 1rem;
}
.wcbs-calendar-event div:nth-child(3) {
  color: var(--wcbs-muted-color);
  font-size: 0.9rem;
}
.wcbs-clinic-event {
  background-color: var(--wcbs-card-background-color);
  border: var(--wcbs-border-width) solid var(--wcbs-card-border-color);
  border-radius: var(--wcbs-border-radius);
  box-shadow: var(--wcbs-card-box-shadow);
  padding: calc(var(--wcbs-spacing) * 1.5);
  font-family: var(--wcbs-font-family);
  color: var(--wcbs-color);
  line-height: var(--wcbs-line-height);
}
.wcbs-clinic-event__header {
  margin-bottom: var(--wcbs-spacing);
  padding-bottom: var(--wcbs-spacing);
  border-bottom: var(--wcbs-border-width) solid var(--wcbs-muted-border-color);
}
.wcbs-clinic-event__title {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--wcbs-h2-color);
}
.wcbs-clinic-event__details {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wcbs-spacing) * 0.75);
  margin-bottom: calc(var(--wcbs-spacing) * 1.25);
}
.wcbs-clinic-event__detail-item {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--wcbs-spacing) * 0.75);
}
.wcbs-clinic-event__detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--wcbs-form-element-background-color);
  border-radius: var(--wcbs-border-radius);
  color: var(--wcbs-primary);
}
.wcbs-clinic-event__detail-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.wcbs-clinic-event__detail-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.wcbs-clinic-event__detail-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--wcbs-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.wcbs-clinic-event__detail-value {
  font-size: 0.9375rem;
  color: var(--wcbs-color);
}
.wcbs-clinic-event__notice {
  display: flex;
  gap: calc(var(--wcbs-spacing) * 0.75);
  padding: var(--wcbs-spacing);
  background-color: var(--wcbs-form-element-background-color);
  border-radius: var(--wcbs-border-radius);
  border-left: 3px solid var(--wcbs-primary);
  margin-bottom: calc(var(--wcbs-spacing) * 1.25);
}
.wcbs-clinic-event__notice-icon {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  color: var(--wcbs-primary);
  padding-top: 0.125rem;
}
.wcbs-clinic-event__notice-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.wcbs-clinic-event__notice-text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--wcbs-color);
  line-height: 1.6;
}
.wcbs-clinic-event__notice-text strong {
  color: var(--wcbs-primary);
}
.wcbs-clinic-event__notice-text a {
  color: var(--wcbs-primary);
  text-decoration: underline;
  text-underline-offset: var(--wcbs-text-underline-offset);
  text-decoration-color: var(--wcbs-primary-underline);
  transition: color var(--wcbs-transition), text-decoration-color var(--wcbs-transition);
}
.wcbs-clinic-event__notice-text a:hover {
  color: var(--wcbs-primary-hover);
  text-decoration-color: var(--wcbs-primary-hover-underline);
}
.wcbs-clinic-event__section-title {
  margin: 0 0 calc(var(--wcbs-spacing) * 0.75) 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wcbs-h4-color);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.wcbs-clinic-event__calendar-actions {
  margin-bottom: calc(var(--wcbs-spacing) * 1.25);
  padding-bottom: calc(var(--wcbs-spacing) * 1.25);
  border-bottom: var(--wcbs-border-width) solid var(--wcbs-muted-border-color);
}
.wcbs-clinic-event__calendar-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--wcbs-spacing) * 0.5);
}
.wcbs-clinic-event__calendar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--wcbs-spacing) * 0.5);
  padding: calc(var(--wcbs-form-element-spacing-vertical) * 0.75) var(--wcbs-form-element-spacing-horizontal);
  background-color: var(--wcbs-form-element-background-color);
  border: var(--wcbs-border-width) solid var(--wcbs-form-element-border-color);
  border-radius: var(--wcbs-border-radius);
  color: var(--wcbs-color);
  font-family: var(--wcbs-font-family);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--wcbs-transition);
  box-shadow: var(--wcbs-button-box-shadow);
}
.wcbs-clinic-event__calendar-btn:hover {
  background-color: var(--wcbs-primary-background);
  border-color: var(--wcbs-primary-border);
  color: var(--wcbs-primary-inverse);
  box-shadow: var(--wcbs-button-hover-box-shadow);
}
.wcbs-clinic-event__calendar-btn:focus {
  outline: none;
  box-shadow: 0 0 0 var(--wcbs-outline-width) var(--wcbs-primary-focus);
}
.wcbs-clinic-event__calendar-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}
.wcbs-clinic-event__share-actions {
  margin-bottom: 0;
}
.wcbs-clinic-event__share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--wcbs-spacing) * 0.5);
}
.wcbs-clinic-event__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: var(--wcbs-border-radius);
  cursor: pointer;
  transition: all var(--wcbs-transition);
}
.wcbs-clinic-event__share-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}
.wcbs-clinic-event__share-btn:focus {
  outline: none;
  box-shadow: 0 0 0 var(--wcbs-outline-width) var(--wcbs-primary-focus);
}
.wcbs-clinic-event__share-btn--facebook {
  background-color: #1877f2;
  color: #fff;
}
.wcbs-clinic-event__share-btn--facebook:hover {
  background-color: #166fe5;
}
.wcbs-clinic-event__share-btn--twitter {
  background-color: #000;
  color: #fff;
}
.wcbs-clinic-event__share-btn--twitter:hover {
  background-color: #333;
}
.wcbs-clinic-event__share-btn--linkedin {
  background-color: #0a66c2;
  color: #fff;
}
.wcbs-clinic-event__share-btn--linkedin:hover {
  background-color: #095196;
}
.wcbs-clinic-event__share-btn--email {
  background-color: var(--wcbs-secondary-background);
  color: var(--wcbs-secondary-inverse);
}
.wcbs-clinic-event__share-btn--email:hover {
  background-color: var(--wcbs-secondary-hover-background);
}
.wcbs-clinic-event__share-btn--whatsapp {
  background-color: #25d366;
  color: #fff;
}
.wcbs-clinic-event__share-btn--whatsapp:hover {
  background-color: #20bd5a;
}
.wcbs-clinic-event__error {
  padding: var(--wcbs-spacing);
  text-align: center;
  color: var(--wcbs-muted-color);
  font-style: italic;
}
@media (max-width: 576px) {
  .wcbs-clinic-event {
    padding: var(--wcbs-spacing);
  }
  .wcbs-clinic-event__title {
    font-size: 1.25rem;
  }
  .wcbs-clinic-event__calendar-buttons {
    flex-direction: column;
  }
  .wcbs-clinic-event__calendar-btn {
    width: 100%;
  }
  .wcbs-clinic-event__share-buttons {
    justify-content: center;
  }
}
.wcbs-event-status-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  margin-left: 0.4rem;
  font-size: 0.60rem;
  font-weight: 500;
  border-radius: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border: 1px solid transparent;
  transition: all var(--wcbs-transition);
}
.wcbs-event-status-tag.expired {
  color: var(--wcbs-contrast-inverse);
  background-color: var(--wcbs-contrast);
}
.wcbs-event-status-tag.ongoing {
  color: var(--wcbs-primary-inverse);
  background-color: var(--wcbs-primary);
}
.wcbs-event-status-tag.upcoming {
  color: var(--wcbs-secondary-inverse);
  background-color: var(--wcbs-secondary);
}