/* _content/FOD.UIComponents/Components/Accordion/FodAccordion.razor.rz.scp.css */
.fod-accordion[b-7petx3g7m1] {
width: 100%;
background: var(--color-background-base-default);
border-top: var(--border-width-1) solid var(--color-border-base-default);
}
/* _content/FOD.UIComponents/Components/Accordion/FodAccordionItem.razor.rz.scp.css */
/* Accordion Item Container */
.fod-accordion-item[b-7demehb8b2] {
display: flex;
flex-direction: column;
background: var(--color-background-base-default);
border-top: var(--border-width-1) solid var(--color-border-base-default);
}
.fod-accordion-item:first-child[b-7demehb8b2] {
border-top: none;
}
.fod-accordion-item__text-wrapper[b-7demehb8b2] {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.fod-accordion-item__title[b-7demehb8b2] {
margin: 0;
font-size: var(--font-size-24);
font-weight: var(--font-weight-semibold, 600);
line-height: var(--line-height-32);
letter-spacing: -0.01em;
color: var(--color-text-base-default);
transition: color var(--duration-fast) var(--easing-default);
}
.fod-accordion-item--expanded .fod-accordion-item__title[b-7demehb8b2] {
color: var(--color-text-brand-default);
}
.fod-accordion-item__supporting-text[b-7demehb8b2] {
margin: 0;
font-size: var(--font-size-16);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-24);
color: var(--color-text-base-tertiary);
}
.fod-accordion-item__panel[b-7demehb8b2] {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
will-change: grid-template-rows, opacity;
transition: grid-template-rows var(--duration-normal) var(--easing-default),
opacity var(--duration-fast) var(--easing-default);
overflow: hidden;
}
.fod-accordion-item--expanded .fod-accordion-item__panel[b-7demehb8b2] {
grid-template-rows: 1fr;
opacity: 1;
}
.fod-accordion-item__panel-content[b-7demehb8b2] {
min-height: 0;
overflow: hidden;
}
.fod-accordion-item__content[b-7demehb8b2] {
padding: var(--spacing-16);
margin: 0 var(--spacing-16) var(--spacing-16);
color: var(--color-text-base-default);
font-size: var(--font-size-16);
line-height: var(--line-height-24);
}
.fod-accordion-item--disabled .fod-accordion-item__title[b-7demehb8b2],
.fod-accordion-item--disabled .fod-accordion-item__supporting-text[b-7demehb8b2],
.fod-accordion-item--disabled .fod-accordion-item__icon[b-7demehb8b2] {
color: var(--color-text-disabled-default);
}
@media (prefers-reduced-motion: reduce) {
.fod-accordion-item__panel[b-7demehb8b2],
.fod-accordion-item__title[b-7demehb8b2] {
transition: none;
}
}
/* _content/FOD.UIComponents/Components/AppShell/FodAppLayout.razor.rz.scp.css */
.fod-app-layout[b-824ix9ylfk] {
display: flex;
flex-direction: column;
height: 100dvh;
overflow: hidden;
}
.fod-app-layout__scroll-area[b-824ix9ylfk] {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.fod-app-layout__main[b-824ix9ylfk] {
flex: 1;
min-width: 0;
}
/* _content/FOD.UIComponents/Components/Button/FodButton.razor.rz.scp.css */
/*
=========================================
FOD Button Component Styles
Adapted from FOD Design System (main.css) and added `fod-` prefix
=========================================
*/
/*#region Base Styles*/
.fod-btn[b-bp0agkvzsv] {
display: var(--inline-flex, inline-flex);
align-items: var(--align-items-center, center);
justify-content: center;
font-size: var(--text-body-md-500-font-size);
font-family: inherit;
font-weight: 500;
line-height: 1.375;
border-radius: var(--radius-md, 8px);
padding: var(--spacing-12, 0.75rem) var(--spacing-20, 1.25rem);
gap: var(--spacing-4, 0.25rem);
cursor: pointer;
text-align: center;
text-decoration: none;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
user-select: none;
}
.fod-btn:disabled[b-bp0agkvzsv] {
background-color: var(--gray-200);
color: var(--gray-300);
border-color: var(--gray-200);
cursor: not-allowed;
opacity: 0.6;
}
.fod-btn:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-logout[b-bp0agkvzsv] {
width: 100%;
cursor: pointer;
}
/*#endregion Base Styles*/
/*#region Style Variants*/
.fod-btn-filled[b-bp0agkvzsv] {
background-color: var(--blue-sky-600, #0058D2);
color: var(--white, #ffffff);
border: 1px solid transparent;
}
.fod-btn-outlined[b-bp0agkvzsv] {
background-color: transparent;
border: 1px solid var(--blue-sky-600, #0058D2);
border: var(--blue-sky-600, #0058D2) var(--solid, solid) var(--border-width-2, 2px);
color: var(--blue-sky-600, #0058D2);
}
.fod-btn-text[b-bp0agkvzsv] {
background-color: transparent;
border: none;
color: var(--blue-sky-600, #0058D2);
}
/*
NOTE: For icon-only buttons, use the FodIconButton component.
FodButton is designed for text buttons with optional icons (IconStart/IconEnd).
See: Components/Button/FodIconButton.razor
*/
/*#endregion Style Variants*/
/*#region Type Variants - Primary*/
.fod-btn-primary[b-bp0agkvzsv] {
background-color: var(--blue-sky-600, #0058D2);
color: var(--white, #ffffff);
border: 1px solid transparent;
}
.fod-btn-primary:hover:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--blue-sky-700, #0046A8);
color: var(--white, #ffffff);
}
.fod-btn-primary:active:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--blue-sky-800, #003380);
}
.fod-btn-primary:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-primary.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-primary.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--white, #ffffff);
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
.fod-btn-primary:disabled[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--gray-500, #616161);
border-color: var(--gray-250, #D9D9D9);
cursor: not-allowed;
opacity: 0.6;
}
.fod-btn-outline-primary[b-bp0agkvzsv] {
background-color: transparent;
color: var(--blue-sky-600, #0058D2);
border: 1px solid var(--blue-sky-600, #0058D2);
}
.fod-btn-outline-primary:hover:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--blue-sky-700, #0046A8);
color: var(--white, #ffffff);
}
.fod-btn-outline-primary:active:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--blue-sky-800, #003380);
}
.fod-btn-outline-primary:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-outline-primary.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-outline-primary.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--blue-sky-600, #0058D2);
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
.fod-btn-outline-primary:disabled[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--gray-500, #616161);
border-color: var(--gray-250, #D9D9D9);
cursor: not-allowed;
opacity: 0.6;
}
.fod-btn-text-primary[b-bp0agkvzsv] {
background-color: transparent;
color: var(--blue-sky-600, #0058D2);
border: 1px solid transparent;
}
.fod-btn-text-primary:hover:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--blue-sky-200, #C4DBF4);
color: var(--blue-sky-700, #0046A8);
}
.fod-btn-text-primary:active:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--blue-sky-300, #99BCED);
}
.fod-btn-text-primary:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-text-primary.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-text-primary.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--blue-sky-600, #0058D2);
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
.fod-btn-text-primary:disabled[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--gray-500, #616161);
border-color: var(--gray-250, #D9D9D9);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Type Variants - Primary*/
/*#region Type Variants - Secondary*/
.fod-btn-secondary[b-bp0agkvzsv] {
background-color: var(--blue-sky-100, #E8F0FB);
color: var(--blue-sky-600, #0058D2);
border: 1px solid var(--blue-sky-100, #E8F0FB);
}
.fod-btn-secondary:hover:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--blue-sky-150, #D6E5F8);
color: var(--blue-sky-600, #0058D2);
}
.fod-btn-secondary:active:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--blue-sky-200, #C4DBF4);
}
.fod-btn-secondary:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-secondary.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-secondary.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--blue-sky-600, #0058D2);
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
.fod-btn-secondary:disabled[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--gray-500, #616161);
border-color: var(--gray-250, #D9D9D9);
cursor: not-allowed;
opacity: 0.6;
}
.fod-btn-outline-secondary[b-bp0agkvzsv] {
background-color: transparent;
color: var(--blue-sky-600, #0058D2);
border: 1px solid var(--blue-sky-100, #E8F0FB);
}
.fod-btn-outline-secondary:hover:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--blue-sky-150, #D6E5F8);
color: var(--blue-sky-600, #0058D2);
}
.fod-btn-outline-secondary:active:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--blue-sky-200, #C4DBF4);
}
.fod-btn-outline-secondary:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-outline-secondary.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-outline-secondary.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--blue-sky-600, #0058D2);
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
.fod-btn-outline-secondary:disabled[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--gray-500, #616161);
border-color: var(--gray-250, #D9D9D9);
cursor: not-allowed;
opacity: 0.6;
}
.fod-btn-text-secondary[b-bp0agkvzsv] {
background-color: transparent;
color: var(--blue-sky-600, #0058D2);
border: 1px solid transparent;
}
.fod-btn-text-secondary:hover:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--blue-sky-150, #D6E5F8);
color: var(--blue-sky-600, #0058D2);
}
.fod-btn-text-secondary:active:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--blue-sky-200, #C4DBF4);
}
.fod-btn-text-secondary:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-text-secondary.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-text-secondary.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--blue-sky-600, #0058D2);
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
.fod-btn-text-secondary:disabled[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--gray-500, #616161);
border-color: var(--gray-250, #D9D9D9);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Type Variants - Secondary*/
/*#region Type Variants - Strict*/
.fod-btn-strict[b-bp0agkvzsv] {
background-color: var(--gray-900, #212121);
color: var(--white, #ffffff);
border: 1px solid var(--gray-900, #212121);
}
.fod-btn-strict:hover:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--gray-700, #616161);
color: var(--white, #ffffff);
}
.fod-btn-strict:active:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--gray-600, #757575);
}
.fod-btn-strict:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-strict.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-strict.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--white, #ffffff);
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
.fod-btn-strict:disabled[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--gray-500, #616161);
border-color: var(--gray-250, #D9D9D9);
cursor: not-allowed;
opacity: 0.6;
}
.fod-btn-outline-strict[b-bp0agkvzsv] {
background-color: transparent;
color: var(--gray-900, #212121);
border: 1px solid var(--gray-900, #212121);
}
.fod-btn-outline-strict:hover:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--gray-700, #616161);
color: var(--white, #ffffff);
}
.fod-btn-outline-strict:active:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--gray-600, #757575);
}
.fod-btn-outline-strict:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-outline-strict.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-outline-strict.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--gray-900, #212121);
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
.fod-btn-outline-strict:disabled[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--gray-500, #616161);
border-color: var(--gray-250, #D9D9D9);
cursor: not-allowed;
opacity: 0.6;
}
.fod-btn-text-strict[b-bp0agkvzsv] {
background-color: transparent;
color: var(--black, #121212);
border: 1px solid transparent;
}
.fod-btn-text-strict:hover:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--black, #121212);
}
.fod-btn-text-strict:active:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--gray-300, #b2b2b2);
}
.fod-btn-text-strict:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-text-strict.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-text-strict.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--black, #121212);
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
.fod-btn-text-strict:disabled[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--gray-500, #616161);
border-color: var(--gray-250, #D9D9D9);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Type Variants - Strict*/
/*#region Type Variants - Neutral*/
.fod-btn-neutral[b-bp0agkvzsv] {
background-color: var(--color-background-base-secondary, var(--gray-100, #F5F5F5));
color: var(--color-text-base-default, var(--black, #000000));
border: 1px solid var(--color-background-base-secondary, var(--gray-100, #F5F5F5));
}
.fod-btn-neutral:hover:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--color-background-base-tertiary, var(--gray-250, #E0E0E0));
color: var(--color-text-base-default, var(--black, #000000));
}
.fod-btn-neutral:active:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--color-background-base-quaternary, var(--gray-300, #D9D9D9));
}
.fod-btn-neutral:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-neutral.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-neutral.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--color-text-base-default, var(--black, #000000));
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
.fod-btn-neutral:disabled[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--gray-500, #616161);
border-color: var(--gray-250, #D9D9D9);
cursor: not-allowed;
opacity: 0.6;
}
.fod-btn-outline-neutral[b-bp0agkvzsv] {
background-color: transparent;
color: var(--color-text-base-default, var(--black, #000000));
border: 1px solid var(--color-border-base-default, var(--gray-100, #F5F5F5));
}
.fod-btn-outline-neutral:hover:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--color-background-base-tertiary, var(--gray-250, #E0E0E0));
color: var(--color-text-base-default, var(--black, #000000));
}
.fod-btn-outline-neutral:active:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--color-background-base-quaternary, var(--gray-300, #D9D9D9));
}
.fod-btn-outline-neutral:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-outline-neutral.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-outline-neutral.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--color-text-base-default, var(--black, #000000));
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
.fod-btn-outline-neutral:disabled[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--gray-500, #616161);
border-color: var(--gray-250, #D9D9D9);
cursor: not-allowed;
opacity: 0.6;
}
.fod-btn-text-neutral[b-bp0agkvzsv] {
background-color: transparent;
color: var(--color-text-base-default, var(--black, #000000));
border: 1px solid transparent;
}
.fod-btn-text-neutral:hover:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--color-background-base-tertiary, var(--gray-250, #E0E0E0));
color: var(--color-text-base-default, var(--black, #000000));
}
.fod-btn-text-neutral:active:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--color-background-base-quaternary, var(--gray-300, #D9D9D9));
}
.fod-btn-text-neutral:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-text-neutral.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-text-neutral.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--color-text-base-default, var(--black, #000000));
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
.fod-btn-text-neutral:disabled[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--gray-500, #616161);
border-color: var(--gray-250, #D9D9D9);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Type Variants - Neutral*/
/*#region Type Variants - Destructive*/
.fod-btn-destructive[b-bp0agkvzsv] {
background-color: var(--red-600, #D32F2F);
color: var(--white, #ffffff);
border: 1px solid var(--red-600, #D32F2F);
}
.fod-btn-destructive:hover:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--red-700, #B71C1C);
color: var(--white, #ffffff);
}
.fod-btn-destructive:active:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--red-800, #9C0000);
}
.fod-btn-destructive:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-destructive.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-destructive.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--white, #ffffff);
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
.fod-btn-destructive:disabled[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--gray-500, #616161);
border-color: var(--gray-250, #D9D9D9);
cursor: not-allowed;
opacity: 0.6;
}
.fod-btn-outline-destructive[b-bp0agkvzsv] {
background-color: transparent;
color: var(--red-600, #D32F2F);
border: 1px solid var(--red-600, #D32F2F);
}
.fod-btn-outline-destructive:hover:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--red-700, #B71C1C);
color: var(--white, #ffffff);
}
.fod-btn-outline-destructive:active:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--red-800, #9C0000);
}
.fod-btn-outline-destructive:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-outline-destructive.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-outline-destructive.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--red-600, #D32F2F);
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
.fod-btn-outline-destructive:disabled[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--gray-500, #616161);
border-color: var(--gray-250, #D9D9D9);
cursor: not-allowed;
opacity: 0.6;
}
.fod-btn-text-destructive[b-bp0agkvzsv] {
background-color: transparent;
color: var(--red-600, #D32F2F);
border: 1px solid transparent;
}
.fod-btn-text-destructive:hover:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--red-100, #FEE4E2);
color: var(--red-600, #D32F2F);
}
.fod-btn-text-destructive:active:not(:disabled)[b-bp0agkvzsv] {
background-color: var(--red-300, #FDA19B);
}
.fod-btn-text-destructive:focus:not(:disabled)[b-bp0agkvzsv] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-btn-text-destructive.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-text-destructive.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--red-600, #D32F2F);
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
.fod-btn-text-destructive:disabled[b-bp0agkvzsv] {
background-color: var(--gray-250, #D9D9D9);
color: var(--gray-500, #616161);
border-color: var(--gray-250, #D9D9D9);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Type Variants - Destructive*/
/*#region Size Modifiers*/
.fod-btn.fod-btn-sm[b-bp0agkvzsv] {
padding: var(--spacing-4, 0.25rem) var(--spacing-12, 0.5rem);
font-size: 14px;
}
.fod-btn.fod-btn-md[b-bp0agkvzsv] {
padding: var(--spacing-8, 0.5rem) var(--spacing-16, 1rem);
font-size: 16px;
}
.fod-btn.fod-btn-lg[b-bp0agkvzsv] {
padding: var(--spacing-12, 0.75rem) var(--spacing-24, 1.5rem);
font-size: 18px;
}
.fod-btn-small[b-bp0agkvzsv] {
padding: 4px 12px;
font-size: 12px;
line-height: 16px;
}
.fod-btn-large[b-bp0agkvzsv] {
padding: 12px 24px;
font-size: 16px;
line-height: 24px;
}
/*#endregion Size Modifiers*/
/*#region Shape Modifiers*/
.fod-btn-pill[b-bp0agkvzsv] {
border-radius: 9999px;
}
.fod-btn-rounded[b-bp0agkvzsv] {
border-radius: var(--border-radius-full, 9999px);
}
/*#endregion Shape Modifiers*/
/*#region State Styles*/
.fod-btn-loading[b-bp0agkvzsv] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-btn-loading[b-bp0agkvzsv]::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--white, #ffffff);
border-top-color: transparent;
border-radius: 50%;
animation: fod-btn-spin-b-bp0agkvzsv 1s linear infinite;
}
/*#endregion State Styles*/
/*#region Animations*/
@keyframes fod-btn-spin-b-bp0agkvzsv {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*#endregion Animations*/
/*#region CUSTOM NOT FROM main.css */
.fod-btn-full-width[b-bp0agkvzsv] {
width: 100%;
display: flex;
}
/*#endregion CUSTOM NOT FROM main.css */
/*#region Dark Mode Notes */
/*
* NOTE: Dark mode is handled via semantic CSS variables that automatically
* change values based on [data-theme=dark] in main.css. Examples:
* - --color-text-base-default: white in dark mode
* - --color-background-base-default: dark gray in dark mode
*
* :global([data-theme=dark]) selectors don't work in Blazor scoped CSS
* because the data-theme attribute is on parent elements (/)
* outside the component scope.
*/
/*#endregion Dark Mode Notes */
/* _content/FOD.UIComponents/Components/Button/FodButtonGroup.razor.rz.scp.css */
/*#region Base Styles*/
.fod-btn-group[b-cog9yx33zq] {
display: var(--inline-flex, inline-flex);
flex-direction: row;
align-items: stretch;
vertical-align: middle;
}
.fod-btn-group-vertical[b-cog9yx33zq] {
flex-direction: column;
}
.fod-btn-group-disabled[b-cog9yx33zq] {
pointer-events: none;
opacity: 0.6;
}
/*#endregion Base Styles*/
/*#region Button Overrides*/
[b-cog9yx33zq] .fod-btn-group-btn {
/* Override FodButton's default rounded corners to allow merging */
border-radius: 0;
}
[b-cog9yx33zq] .fod-btn-group-btn:focus-visible,
[b-cog9yx33zq] .fod-btn-group-btn:focus,
[b-cog9yx33zq] .fod-btn-group-btn:hover {
/* Ensure focused/hovered button sits on top of neighbors for border clarity */
z-index: 1;
}
/*#endregion Button Overrides*/
/*#region Selected State*/
[b-cog9yx33zq] .fod-btn-group-btn-selected {
background-color: var(--color-bg-primary-default, #2563eb);
border-color: var(--color-bg-primary-default, #2563eb);
color: var(--color-text-on-primary, #ffffff);
}
[b-cog9yx33zq] .fod-btn-group-btn-selected:hover:not(:disabled) {
background-color: var(--color-bg-primary-hover, #1d4ed8);
border-color: var(--color-bg-primary-hover, #1d4ed8);
}
[b-cog9yx33zq] .fod-btn-group-btn-selected:active:not(:disabled) {
background-color: var(--color-bg-primary-active, #1e40af);
border-color: var(--color-bg-primary-active, #1e40af);
}
/*#endregion Selected State*/
/*#region Horizontal Layout - Merged Borders*/
.fod-btn-group:not(.fod-btn-group-vertical)[b-cog9yx33zq] > .fod-btn-group-btn {
margin-inline-start: -1px;
}
.fod-btn-group:not(.fod-btn-group-vertical)[b-cog9yx33zq] > .fod-btn-group-btn:first-child {
margin-inline-start: 0;
border-start-start-radius: var(--border-radius-md, 0.375rem);
border-end-start-radius: var(--border-radius-md, 0.375rem);
}
.fod-btn-group:not(.fod-btn-group-vertical)[b-cog9yx33zq] > .fod-btn-group-btn:last-child {
border-start-end-radius: var(--border-radius-md, 0.375rem);
border-end-end-radius: var(--border-radius-md, 0.375rem);
}
/*#endregion Horizontal Layout - Merged Borders*/
/*#region Vertical Layout - Merged Borders*/
.fod-btn-group-vertical[b-cog9yx33zq] > .fod-btn-group-btn {
inline-size: 100%;
margin-block-start: -1px;
}
.fod-btn-group-vertical[b-cog9yx33zq] > .fod-btn-group-btn:first-child {
margin-block-start: 0;
border-start-start-radius: var(--border-radius-md, 0.375rem);
border-start-end-radius: var(--border-radius-md, 0.375rem);
}
.fod-btn-group-vertical[b-cog9yx33zq] > .fod-btn-group-btn:last-child {
border-end-start-radius: var(--border-radius-md, 0.375rem);
border-end-end-radius: var(--border-radius-md, 0.375rem);
}
/*#endregion Vertical Layout - Merged Borders*/
/*#region Filled Button Separators*/
/*
Filled buttons have transparent borders by default.
When grouped, we need explicit separators.
Since we use negative margins (-1px) to merge borders, the subsequent button
overlaps the previous one. Therefore, we must apply the separator border
to the START of the subsequent button (which is on top), not the END of the previous one.
*/
/* Light separators for dark backgrounds (Primary, Strict, Destructive) */
.fod-btn-group:not(.fod-btn-group-vertical)[b-cog9yx33zq] > .fod-btn-group-btn.fod-btn-primary:not(:first-child),
.fod-btn-group:not(.fod-btn-group-vertical)[b-cog9yx33zq] > .fod-btn-group-btn.fod-btn-strict:not(:first-child),
.fod-btn-group:not(.fod-btn-group-vertical)[b-cog9yx33zq] > .fod-btn-group-btn.fod-btn-destructive:not(:first-child) {
border-inline-start: 1px solid rgba(255, 255, 255, 0.5);
}
.fod-btn-group-vertical[b-cog9yx33zq] > .fod-btn-group-btn.fod-btn-primary:not(:first-child),
.fod-btn-group-vertical[b-cog9yx33zq] > .fod-btn-group-btn.fod-btn-strict:not(:first-child),
.fod-btn-group-vertical[b-cog9yx33zq] > .fod-btn-group-btn.fod-btn-destructive:not(:first-child) {
border-block-start: 1px solid rgba(255, 255, 255, 0.5);
}
/* Dark separators for light backgrounds (Secondary, Neutral) */
.fod-btn-group:not(.fod-btn-group-vertical)[b-cog9yx33zq] > .fod-btn-group-btn.fod-btn-secondary:not(:first-child),
.fod-btn-group:not(.fod-btn-group-vertical)[b-cog9yx33zq] > .fod-btn-group-btn.fod-btn-neutral:not(:first-child) {
border-inline-start: 1px solid rgba(0, 0, 0, 0.1);
}
.fod-btn-group-vertical[b-cog9yx33zq] > .fod-btn-group-btn.fod-btn-secondary:not(:first-child),
.fod-btn-group-vertical[b-cog9yx33zq] > .fod-btn-group-btn.fod-btn-neutral:not(:first-child) {
border-block-start: 1px solid rgba(0, 0, 0, 0.1);
}
/*#endregion Filled Button Separators*/
/* _content/FOD.UIComponents/Components/Button/FodIconButton.razor.rz.scp.css */
/*#region Base Styles*/
.fod-icon-btn[b-a21de4skva] {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: transparent;
border: 1px solid transparent;
padding: var(--spacing-8, 0.5rem);
border-radius: 50%;
inline-size: 40px;
block-size: 40px;
font-family: inherit;
cursor: pointer;
text-align: center;
text-decoration: none;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
user-select: none;
}
.fod-icon-btn:focus-visible[b-a21de4skva] {
outline: 2px solid var(--color-background-base-inverse-default, #ffffff);
box-shadow: 0 0 0 4px var(--color-border-brand-default, #0058D2);
}
.fod-icon-btn:disabled[b-a21de4skva] {
background-color: var(--color-background-disabled-default, #F1F1F1);
color: var(--color-text-disabled-default, #9E9E9E);
border-color: var(--color-border-disabled-default, #E0E0E0);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Base Styles*/
/*#region Icon Container*/
.fod-icon-btn__icon[b-a21de4skva] {
display: inline-flex;
align-items: center;
justify-content: center;
}
.fod-icon-btn__icon svg[b-a21de4skva] {
fill: currentColor;
}
/*#endregion Icon Container*/
/*#region Loading Spinner*/
/* Spinner container - matches icon dimensions to prevent layout shift */
.fod-icon-btn__spinner[b-a21de4skva] {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 20px;
block-size: 20px;
position: relative;
}
/* Spinner animation using ::after for the spinning element */
.fod-icon-btn__spinner[b-a21de4skva]::after {
content: "";
position: absolute;
inline-size: 16px;
block-size: 16px;
border: 2px solid currentColor;
border-block-start-color: transparent;
border-radius: 50%;
animation: fod-icon-btn-spin-b-a21de4skva 1s linear infinite;
}
/*#endregion Loading Spinner*/
/*#region Size Modifiers*/
.fod-icon-btn--xs[b-a21de4skva] {
inline-size: 26px;
block-size: 26px;
min-inline-size: 26px;
min-block-size: 26px;
}
.fod-icon-btn--sm[b-a21de4skva] {
inline-size: 32px;
block-size: 32px;
min-inline-size: 32px;
min-block-size: 32px;
}
.fod-icon-btn--sm .fod-icon-btn__icon[b-a21de4skva],
.fod-icon-btn--sm .fod-icon-btn__icon svg[b-a21de4skva],
.fod-icon-btn--sm .fod-icon-btn__spinner[b-a21de4skva] {
inline-size: 16px;
block-size: 16px;
}
.fod-icon-btn--sm .fod-icon-btn__spinner[b-a21de4skva]::after {
inline-size: 12px;
block-size: 12px;
}
.fod-icon-btn--md[b-a21de4skva] {
inline-size: 40px;
block-size: 40px;
min-inline-size: 44px;
min-block-size: 44px;
}
.fod-icon-btn--md .fod-icon-btn__icon[b-a21de4skva],
.fod-icon-btn--md .fod-icon-btn__icon svg[b-a21de4skva],
.fod-icon-btn--md .fod-icon-btn__spinner[b-a21de4skva] {
inline-size: 20px;
block-size: 20px;
}
.fod-icon-btn--md .fod-icon-btn__spinner[b-a21de4skva]::after {
inline-size: 16px;
block-size: 16px;
}
.fod-icon-btn--lg[b-a21de4skva] {
inline-size: 48px;
block-size: 48px;
}
.fod-icon-btn--lg .fod-icon-btn__icon[b-a21de4skva],
.fod-icon-btn--lg .fod-icon-btn__icon svg[b-a21de4skva],
.fod-icon-btn--lg .fod-icon-btn__spinner[b-a21de4skva] {
inline-size: 24px;
block-size: 24px;
}
.fod-icon-btn--lg .fod-icon-btn__spinner[b-a21de4skva]::after {
inline-size: 20px;
block-size: 20px;
}
/*#endregion Size Modifiers*/
/*#region Variant - Standard*/
.fod-icon-btn--standard[b-a21de4skva] {
background-color: transparent;
border-color: transparent;
color: var(--color-text-base-default, var(--gray-900, #212121));
}
.fod-icon-btn--standard:hover:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-base-secondary, var(--gray-100, #F5F5F5));
}
.fod-icon-btn--standard:active:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-base-tertiary, var(--gray-200, #E0E0E0));
}
/*#endregion Variant - Standard*/
/*#region Variant - Filled - Primary*/
.fod-icon-btn--filled.fod-icon-btn--primary[b-a21de4skva] {
background-color: var(--color-background-brand-default, #0058D2);
color: var(--color-text-base-inverse-default, #ffffff);
border: 1px solid transparent;
}
.fod-icon-btn--filled.fod-icon-btn--primary:hover:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-brand-default-hover, #0046A8);
color: var(--color-text-base-inverse-default, #ffffff);
}
.fod-icon-btn--filled.fod-icon-btn--primary:active:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-brand-default-active, #003380);
}
.fod-icon-btn--filled.fod-icon-btn--primary:focus-visible[b-a21de4skva] {
outline: 2px solid var(--color-background-base-inverse-default, #ffffff);
box-shadow: 0 0 0 4px var(--color-border-brand-default, #0058D2);
}
.fod-icon-btn--filled.fod-icon-btn--primary.fod-icon-btn--loading[b-a21de4skva] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-icon-btn--filled.fod-icon-btn--primary.fod-icon-btn--loading[b-a21de4skva]::after {
content: "";
position: absolute;
inline-size: 16px;
block-size: 16px;
border: 2px solid var(--color-text-base-inverse-default, #ffffff);
border-block-start-color: transparent;
border-radius: 50%;
animation: fod-icon-btn-spin-b-a21de4skva 1s linear infinite;
}
.fod-icon-btn--filled.fod-icon-btn--primary:disabled[b-a21de4skva] {
background-color: var(--color-background-disabled-default, #F1F1F1);
color: var(--color-text-disabled-default, #9E9E9E);
border-color: var(--color-border-disabled-default, #E0E0E0);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Variant - Filled - Primary*/
/*#region Variant - Filled - Secondary*/
.fod-icon-btn--filled.fod-icon-btn--secondary[b-a21de4skva] {
background-color: var(--color-background-brand-secondary, #E8F0FB);
color: var(--color-text-brand-default, #0058D2);
border: 1px solid var(--color-background-brand-secondary, #E8F0FB);
}
.fod-icon-btn--filled.fod-icon-btn--secondary:hover:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-brand-secondary-hover, #C4DBF4);
color: var(--color-text-brand-default, #0058D2);
}
.fod-icon-btn--filled.fod-icon-btn--secondary:active:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-brand-secondary-active, #A9CCF1);
}
.fod-icon-btn--filled.fod-icon-btn--secondary:focus-visible[b-a21de4skva] {
outline: 2px solid var(--color-background-base-inverse-default, #ffffff);
box-shadow: 0 0 0 4px var(--color-border-brand-default, #0058D2);
}
.fod-icon-btn--filled.fod-icon-btn--secondary.fod-icon-btn--loading[b-a21de4skva] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-icon-btn--filled.fod-icon-btn--secondary.fod-icon-btn--loading[b-a21de4skva]::after {
content: "";
position: absolute;
inline-size: 16px;
block-size: 16px;
border: 2px solid var(--color-text-brand-default, #0058D2);
border-block-start-color: transparent;
border-radius: 50%;
animation: fod-icon-btn-spin-b-a21de4skva 1s linear infinite;
}
.fod-icon-btn--filled.fod-icon-btn--secondary:disabled[b-a21de4skva] {
background-color: var(--color-background-disabled-default, #F1F1F1);
color: var(--color-text-disabled-default, #9E9E9E);
border-color: var(--color-border-disabled-default, #E0E0E0);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Variant - Filled - Secondary*/
/*#region Variant - Filled - Strict*/
.fod-icon-btn--filled.fod-icon-btn--strict[b-a21de4skva] {
background-color: var(--color-background-base-inverse-default, #212121);
color: var(--color-text-base-inverse-default, #ffffff);
border: 1px solid var(--color-background-base-inverse-default, #212121);
}
.fod-icon-btn--filled.fod-icon-btn--strict:hover:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-base-inverse-default-hover, #616161);
color: var(--color-text-base-inverse-default, #ffffff);
}
.fod-icon-btn--filled.fod-icon-btn--strict:active:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-base-inverse-default-active, #757575);
}
.fod-icon-btn--filled.fod-icon-btn--strict:focus-visible[b-a21de4skva] {
outline: 2px solid var(--color-background-base-default, #ffffff);
box-shadow: 0 0 0 4px var(--color-border-brand-default, #0058D2);
}
.fod-icon-btn--filled.fod-icon-btn--strict.fod-icon-btn--loading[b-a21de4skva] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-icon-btn--filled.fod-icon-btn--strict.fod-icon-btn--loading[b-a21de4skva]::after {
content: "";
position: absolute;
inline-size: 16px;
block-size: 16px;
border: 2px solid var(--color-text-base-inverse-default, #ffffff);
border-block-start-color: transparent;
border-radius: 50%;
animation: fod-icon-btn-spin-b-a21de4skva 1s linear infinite;
}
.fod-icon-btn--filled.fod-icon-btn--strict:disabled[b-a21de4skva] {
background-color: var(--color-background-disabled-default, #F1F1F1);
color: var(--color-text-disabled-default, #9E9E9E);
border-color: var(--color-border-disabled-default, #E0E0E0);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Variant - Filled - Strict*/
/*#region Variant - Filled - Neutral*/
.fod-icon-btn--filled.fod-icon-btn--neutral[b-a21de4skva] {
background-color: var(--color-background-base-secondary, #F5F5F5);
color: var(--color-text-base-default, #000000);
border: 1px solid var(--color-background-base-secondary, #F5F5F5);
}
.fod-icon-btn--filled.fod-icon-btn--neutral:hover:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-base-secondary-hover, #E0E0E0);
color: var(--color-text-base-default, #000000);
}
.fod-icon-btn--filled.fod-icon-btn--neutral:active:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-base-secondary-active, #D9D9D9);
}
.fod-icon-btn--filled.fod-icon-btn--neutral:focus-visible[b-a21de4skva] {
outline: 2px solid var(--color-background-base-inverse-default, #ffffff);
box-shadow: 0 0 0 4px var(--color-border-brand-default, #0058D2);
}
.fod-icon-btn--filled.fod-icon-btn--neutral.fod-icon-btn--loading[b-a21de4skva] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-icon-btn--filled.fod-icon-btn--neutral.fod-icon-btn--loading[b-a21de4skva]::after {
content: "";
position: absolute;
inline-size: 16px;
block-size: 16px;
border: 2px solid var(--color-text-base-default, #000000);
border-block-start-color: transparent;
border-radius: 50%;
animation: fod-icon-btn-spin-b-a21de4skva 1s linear infinite;
}
.fod-icon-btn--filled.fod-icon-btn--neutral:disabled[b-a21de4skva] {
background-color: var(--color-background-disabled-default, #F1F1F1);
color: var(--color-text-disabled-default, #9E9E9E);
border-color: var(--color-border-disabled-default, #E0E0E0);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Variant - Filled - Neutral*/
/*#region Variant - Filled - Destructive*/
.fod-icon-btn--filled.fod-icon-btn--destructive[b-a21de4skva] {
background-color: var(--color-background-danger-default, #D32F2F);
color: var(--color-text-base-inverse-default, #ffffff);
border: 1px solid var(--color-background-danger-default, #D32F2F);
}
.fod-icon-btn--filled.fod-icon-btn--destructive:hover:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-danger-default-hover, #B71C1C);
color: var(--color-text-base-inverse-default, #ffffff);
}
.fod-icon-btn--filled.fod-icon-btn--destructive:active:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-danger-default-active, #9C0000);
}
.fod-icon-btn--filled.fod-icon-btn--destructive:focus-visible[b-a21de4skva] {
outline: 2px solid var(--color-background-base-inverse-default, #ffffff);
box-shadow: 0 0 0 4px var(--color-border-danger-default, #D32F2F);
}
.fod-icon-btn--filled.fod-icon-btn--destructive.fod-icon-btn--loading[b-a21de4skva] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-icon-btn--filled.fod-icon-btn--destructive.fod-icon-btn--loading[b-a21de4skva]::after {
content: "";
position: absolute;
inline-size: 16px;
block-size: 16px;
border: 2px solid var(--color-text-base-inverse-default, #ffffff);
border-block-start-color: transparent;
border-radius: 50%;
animation: fod-icon-btn-spin-b-a21de4skva 1s linear infinite;
}
.fod-icon-btn--filled.fod-icon-btn--destructive:disabled[b-a21de4skva] {
background-color: var(--color-background-disabled-default, #F1F1F1);
color: var(--color-text-disabled-default, #9E9E9E);
border-color: var(--color-border-disabled-default, #E0E0E0);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Variant - Filled - Destructive*/
/*#region Variant - Outlined - Primary*/
.fod-icon-btn--outlined.fod-icon-btn--primary[b-a21de4skva] {
background-color: transparent;
color: var(--color-text-brand-default, #0058D2);
border: 1px solid var(--color-border-brand-default, #0058D2);
}
.fod-icon-btn--outlined.fod-icon-btn--primary:hover:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-brand-default-hover, #0046A8);
color: var(--color-text-base-inverse-default, #ffffff);
}
.fod-icon-btn--outlined.fod-icon-btn--primary:active:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-brand-default-active, #003380);
}
.fod-icon-btn--outlined.fod-icon-btn--primary:focus-visible[b-a21de4skva] {
outline: 2px solid var(--color-background-base-inverse-default, #ffffff);
box-shadow: 0 0 0 4px var(--color-border-brand-default, #0058D2);
}
.fod-icon-btn--outlined.fod-icon-btn--primary.fod-icon-btn--loading[b-a21de4skva] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-icon-btn--outlined.fod-icon-btn--primary.fod-icon-btn--loading[b-a21de4skva]::after {
content: "";
position: absolute;
inline-size: 16px;
block-size: 16px;
border: 2px solid var(--color-text-brand-default, #0058D2);
border-block-start-color: transparent;
border-radius: 50%;
animation: fod-icon-btn-spin-b-a21de4skva 1s linear infinite;
}
.fod-icon-btn--outlined.fod-icon-btn--primary:disabled[b-a21de4skva] {
background-color: var(--color-background-disabled-default, #F1F1F1);
color: var(--color-text-disabled-default, #9E9E9E);
border-color: var(--color-border-disabled-default, #E0E0E0);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Variant - Outlined - Primary*/
/*#region Variant - Outlined - Secondary*/
.fod-icon-btn--outlined.fod-icon-btn--secondary[b-a21de4skva] {
background-color: transparent;
color: var(--color-text-brand-default, #0058D2);
border: 1px solid var(--color-background-brand-secondary, #E8F0FB);
}
.fod-icon-btn--outlined.fod-icon-btn--secondary:hover:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-brand-secondary-hover, #C4DBF4);
color: var(--color-text-brand-default, #0058D2);
}
.fod-icon-btn--outlined.fod-icon-btn--secondary:active:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-brand-secondary-active, #A9CCF1);
}
.fod-icon-btn--outlined.fod-icon-btn--secondary:focus-visible[b-a21de4skva] {
outline: 2px solid var(--color-background-base-inverse-default, #ffffff);
box-shadow: 0 0 0 4px var(--color-border-brand-default, #0058D2);
}
.fod-icon-btn--outlined.fod-icon-btn--secondary.fod-icon-btn--loading[b-a21de4skva] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-icon-btn--outlined.fod-icon-btn--secondary.fod-icon-btn--loading[b-a21de4skva]::after {
content: "";
position: absolute;
inline-size: 16px;
block-size: 16px;
border: 2px solid var(--color-text-brand-default, #0058D2);
border-block-start-color: transparent;
border-radius: 50%;
animation: fod-icon-btn-spin-b-a21de4skva 1s linear infinite;
}
.fod-icon-btn--outlined.fod-icon-btn--secondary:disabled[b-a21de4skva] {
background-color: var(--color-background-disabled-default, #F1F1F1);
color: var(--color-text-disabled-default, #9E9E9E);
border-color: var(--color-border-disabled-default, #E0E0E0);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Variant - Outlined - Secondary*/
/*#region Variant - Outlined - Strict*/
.fod-icon-btn--outlined.fod-icon-btn--strict[b-a21de4skva] {
background-color: transparent;
color: var(--color-text-base-default, #212121);
border: 1px solid var(--color-border-base-strong, #212121);
}
.fod-icon-btn--outlined.fod-icon-btn--strict:hover:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-base-inverse-default-hover, #616161);
color: var(--color-text-base-inverse-default, #ffffff);
}
.fod-icon-btn--outlined.fod-icon-btn--strict:active:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-base-inverse-default-active, #757575);
}
.fod-icon-btn--outlined.fod-icon-btn--strict:focus-visible[b-a21de4skva] {
outline: 2px solid var(--color-background-base-inverse-default, #ffffff);
box-shadow: 0 0 0 4px var(--color-border-brand-default, #0058D2);
}
.fod-icon-btn--outlined.fod-icon-btn--strict.fod-icon-btn--loading[b-a21de4skva] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-icon-btn--outlined.fod-icon-btn--strict.fod-icon-btn--loading[b-a21de4skva]::after {
content: "";
position: absolute;
inline-size: 16px;
block-size: 16px;
border: 2px solid var(--color-text-base-default, #212121);
border-block-start-color: transparent;
border-radius: 50%;
animation: fod-icon-btn-spin-b-a21de4skva 1s linear infinite;
}
.fod-icon-btn--outlined.fod-icon-btn--strict:disabled[b-a21de4skva] {
background-color: var(--color-background-disabled-default, #F1F1F1);
color: var(--color-text-disabled-default, #9E9E9E);
border-color: var(--color-border-disabled-default, #E0E0E0);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Variant - Outlined - Strict*/
/*#region Variant - Outlined - Neutral*/
.fod-icon-btn--outlined.fod-icon-btn--neutral[b-a21de4skva] {
background-color: transparent;
color: var(--color-text-base-default, #000000);
border: 1px solid var(--color-border-base-default, #E0E0E0);
}
.fod-icon-btn--outlined.fod-icon-btn--neutral:hover:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-base-secondary-hover, #E0E0E0);
color: var(--color-text-base-default, #000000);
}
.fod-icon-btn--outlined.fod-icon-btn--neutral:active:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-base-secondary-active, #D9D9D9);
}
.fod-icon-btn--outlined.fod-icon-btn--neutral:focus-visible[b-a21de4skva] {
outline: 2px solid var(--color-background-base-inverse-default, #ffffff);
box-shadow: 0 0 0 4px var(--color-border-brand-default, #0058D2);
}
.fod-icon-btn--outlined.fod-icon-btn--neutral.fod-icon-btn--loading[b-a21de4skva] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-icon-btn--outlined.fod-icon-btn--neutral.fod-icon-btn--loading[b-a21de4skva]::after {
content: "";
position: absolute;
inline-size: 16px;
block-size: 16px;
border: 2px solid var(--color-text-base-default, #000000);
border-block-start-color: transparent;
border-radius: 50%;
animation: fod-icon-btn-spin-b-a21de4skva 1s linear infinite;
}
.fod-icon-btn--outlined.fod-icon-btn--neutral:disabled[b-a21de4skva] {
background-color: var(--color-background-disabled-default, #F1F1F1);
color: var(--color-text-disabled-default, #9E9E9E);
border-color: var(--color-border-disabled-default, #E0E0E0);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Variant - Outlined - Neutral*/
/*#region Variant - Outlined - Destructive*/
.fod-icon-btn--outlined.fod-icon-btn--destructive[b-a21de4skva] {
background-color: transparent;
color: var(--color-text-danger-default, #D32F2F);
border: 1px solid var(--color-border-danger-default, #D32F2F);
}
.fod-icon-btn--outlined.fod-icon-btn--destructive:hover:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-danger-default-hover, #B71C1C);
color: var(--color-text-base-inverse-default, #ffffff);
}
.fod-icon-btn--outlined.fod-icon-btn--destructive:active:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-danger-default-active, #9C0000);
}
.fod-icon-btn--outlined.fod-icon-btn--destructive:focus-visible[b-a21de4skva] {
outline: 2px solid var(--color-background-base-inverse-default, #ffffff);
box-shadow: 0 0 0 4px var(--color-border-danger-default, #D32F2F);
}
.fod-icon-btn--outlined.fod-icon-btn--destructive.fod-icon-btn--loading[b-a21de4skva] {
position: relative;
pointer-events: none;
color: transparent !important;
}
.fod-icon-btn--outlined.fod-icon-btn--destructive.fod-icon-btn--loading[b-a21de4skva]::after {
content: "";
position: absolute;
inline-size: 16px;
block-size: 16px;
border: 2px solid var(--color-text-danger-default, #D32F2F);
border-block-start-color: transparent;
border-radius: 50%;
animation: fod-icon-btn-spin-b-a21de4skva 1s linear infinite;
}
.fod-icon-btn--outlined.fod-icon-btn--destructive:disabled[b-a21de4skva] {
background-color: var(--color-background-disabled-default, #F1F1F1);
color: var(--color-text-disabled-default, #9E9E9E);
border-color: var(--color-border-disabled-default, #E0E0E0);
cursor: not-allowed;
opacity: 0.6;
}
/*#endregion Variant - Outlined - Destructive*/
/*#region Variant - Text*/
.fod-icon-btn--text[b-a21de4skva] {
background-color: transparent;
border-color: transparent;
}
.fod-icon-btn--text:hover:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-base-default-hover, #F5F5F5);
}
.fod-icon-btn--text:active:not(:disabled)[b-a21de4skva] {
background-color: var(--color-background-base-default-active, #E0E0E0);
}
/*#endregion Variant - Text*/
/*#region State - Loading*/
.fod-icon-btn--loading[b-a21de4skva] {
pointer-events: none;
}
.fod-icon-btn--loading .fod-icon-btn__icon[b-a21de4skva] {
visibility: hidden;
}
/*#endregion State - Loading*/
/*#region State - Pressed (Toggle)*/
.fod-icon-btn--pressed[b-a21de4skva] {
background-color: var(--color-background-brand-secondary, #E8F0FB);
color: var(--color-text-brand-default, #0058D2);
}
.fod-icon-btn--standard.fod-icon-btn--pressed[b-a21de4skva],
.fod-icon-btn--text.fod-icon-btn--pressed[b-a21de4skva] {
background-color: var(--color-background-brand-secondary, #E8F0FB);
color: var(--color-text-brand-default, #0058D2);
}
.fod-icon-btn--filled.fod-icon-btn--pressed[b-a21de4skva] {
transform: scale(0.95);
}
.fod-icon-btn--outlined.fod-icon-btn--pressed[b-a21de4skva] {
background-color: var(--color-background-brand-secondary, #E8F0FB);
}
/*#endregion State - Pressed (Toggle)*/
/*#region Animations*/
@keyframes fod-icon-btn-spin-b-a21de4skva {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*#endregion Animations*/
/*#region Edge Positioning*/
.fod-icon-btn--edge-start[b-a21de4skva] {
margin-inline-start: calc(var(--spacing-8, 0.5rem) * -1);
}
.fod-icon-btn--edge-end[b-a21de4skva] {
margin-inline-end: calc(var(--spacing-8, 0.5rem) * -1);
}
/*#endregion Edge Positioning*/
/*#region Reduced Motion*/
@media (prefers-reduced-motion: reduce) {
.fod-icon-btn[b-a21de4skva] {
transition: none;
}
.fod-icon-btn:active:not(:disabled)[b-a21de4skva] {
transform: none;
}
.fod-icon-btn__spinner[b-a21de4skva]::after {
animation: none;
border-block-start-color: currentColor;
opacity: 0.5;
}
.fod-icon-btn--filled.fod-icon-btn--primary.fod-icon-btn--loading[b-a21de4skva]::after,
.fod-icon-btn--filled.fod-icon-btn--secondary.fod-icon-btn--loading[b-a21de4skva]::after,
.fod-icon-btn--filled.fod-icon-btn--strict.fod-icon-btn--loading[b-a21de4skva]::after,
.fod-icon-btn--filled.fod-icon-btn--neutral.fod-icon-btn--loading[b-a21de4skva]::after,
.fod-icon-btn--filled.fod-icon-btn--destructive.fod-icon-btn--loading[b-a21de4skva]::after,
.fod-icon-btn--outlined.fod-icon-btn--primary.fod-icon-btn--loading[b-a21de4skva]::after,
.fod-icon-btn--outlined.fod-icon-btn--secondary.fod-icon-btn--loading[b-a21de4skva]::after,
.fod-icon-btn--outlined.fod-icon-btn--strict.fod-icon-btn--loading[b-a21de4skva]::after,
.fod-icon-btn--outlined.fod-icon-btn--neutral.fod-icon-btn--loading[b-a21de4skva]::after,
.fod-icon-btn--outlined.fod-icon-btn--destructive.fod-icon-btn--loading[b-a21de4skva]::after {
animation: none;
border-block-start-color: currentColor;
opacity: 0.5;
}
}
/*#endregion Reduced Motion*/
/*#region High Contrast Mode*/
@media (forced-colors: active) {
.fod-icon-btn[b-a21de4skva] {
border: 1px solid ButtonText;
}
.fod-icon-btn:focus-visible[b-a21de4skva] {
outline: 2px solid Highlight;
outline-offset: 2px;
}
.fod-icon-btn:disabled[b-a21de4skva] {
border-color: GrayText;
color: GrayText;
}
.fod-icon-btn--pressed[b-a21de4skva] {
background-color: Highlight;
color: HighlightText;
}
}
/*#endregion High Contrast Mode*/
/*#region Dark Theme Notes */
/*
* NOTE: Dark mode is handled via semantic CSS variables that automatically
* change values based on [data-theme=dark] in main.css. Examples:
* - --color-text-base-default: white in dark mode
* - --color-background-base-default: dark gray in dark mode
* - --color-background-base-secondary: darker gray in dark mode
*
* :global([data-theme=dark]) selectors don't work in Blazor scoped CSS
* because the data-theme attribute is on parent elements (/)
* outside the component scope.
*/
/*#endregion Dark Theme Notes */
/* _content/FOD.UIComponents/Components/CookieBanner/FodCookieBannerContent.razor.rz.scp.css */
/* FodCookieBanner - Cookie consent banner styles */
/* #region [Content Section] */
.fod-cookie-banner__content[b-b6imyauxjr] {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.fod-cookie-banner__text[b-b6imyauxjr] {
flex: 1;
min-inline-size: 300px;
}
.fod-cookie-banner__title[b-b6imyauxjr] {
margin: 0 0 16px 0 !important;
color: var(--color-text-base-default, #1f2937);
font-size: 18px;
font-weight: 600;
line-height: 1.3;
}
.fod-cookie-banner__message[b-b6imyauxjr] {
margin: 0 0 0.5rem 0;
color: var(--color-text-base-default, #1f2937);
font-size: 14px;
line-height: 1.5;
}
.fod-cookie-banner__links[b-b6imyauxjr] {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
/* #endregion */
/* #region [Actions (Buttons) - using ::deep for child FodStack] */
[b-b6imyauxjr] .fod-cookie-banner__actions {
flex: 0 0 100%;
}
@media (max-width: 767px) {
.fod-cookie-banner__actions[b-b6imyauxjr] {
flex-direction: column !important;
align-items: stretch !important;
}
.fod-cookie-banner__actions > *[b-b6imyauxjr] {
inline-size: 100% !important;
}
.fod-cookie-banner__actions-end[b-b6imyauxjr] {
flex-direction: column !important;
order: 1;
}
.fod-cookie-banner__actions-end > *[b-b6imyauxjr] {
inline-size: 100% !important;
}
.fod-cookie-banner__btn--manage[b-b6imyauxjr] {
order: 3;
}
}
/* #endregion */
/* #region [Inline Settings Section] */
.fod-cookie-banner__settings[b-b6imyauxjr] {
display: flex;
flex-direction: column;
gap: 16px;
inline-size: 100%;
}
.fod-cookie-banner__settings-desc[b-b6imyauxjr] {
margin: 0;
color: var(--color-text-base-secondary, #6b7280);
font-size: 13px;
line-height: 1.5;
}
.fod-cookie-banner__categories[b-b6imyauxjr] {
display: flex;
flex-direction: column;
padding: 1rem;
background: var(--color-background-base-subtle, #f9fafb);
border: 1px solid var(--color-border-base-default, #e5e7eb);
border-radius: 6px;
}
.fod-cookie-banner__category-header[b-b6imyauxjr] {
display: flex;
align-items: center;
gap: 8px;
margin-block-end: 0.5rem;
}
.fod-cookie-banner__category-label[b-b6imyauxjr] {
font-size: 14px;
font-weight: 600;
color: var(--color-text-base-default, #1f2937);
}
.fod-cookie-banner__category-desc[b-b6imyauxjr] {
margin: 0;
color: var(--color-text-base-tertiary, var(--gray-600));
font-size: 13px;
line-height: 1.5;
}
.fod-cookie-banner__badge[b-b6imyauxjr] {
display: inline-flex;
align-items: center;
padding: 1px 8px;
font-size: 10px;
font-weight: 500;
color: var(--color-text-brand-default, #0058D2);
background: transparent;
border: 1px solid var(--color-text-brand-default, #0058D2);
border-radius: 4px;
}
.fod-cookie-banner__checkmark[b-b6imyauxjr] {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
color: var(--fod-color-success, #10b981);
}
.fod-cookie-banner__checkbox[b-b6imyauxjr] {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
}
.fod-cookie-banner__settings-actions[b-b6imyauxjr] {
margin-block-start: 0.5rem;
}
/* #endregion */
/* #region [Responsive breakpoints] */
@media (max-width: 767px) {
.fod-cookie-banner__content[b-b6imyauxjr] {
flex-direction: column;
align-items: stretch;
}
.fod-cookie-banner__text[b-b6imyauxjr] {
min-inline-size: auto;
}
}
.fod-cookie-banner__content--compact[b-b6imyauxjr] {
flex-direction: column;
align-items: stretch;
}
.fod-cookie-banner__content--compact .fod-cookie-banner__text[b-b6imyauxjr] {
min-inline-size: auto;
}
[b-b6imyauxjr] .fod-cookie-banner__content--compact .fod-cookie-banner__actions {
flex-direction: column !important;
align-items: stretch !important;
}
[b-b6imyauxjr] .fod-cookie-banner__content--compact .fod-cookie-banner__actions > * {
inline-size: 100% !important;
}
[b-b6imyauxjr] .fod-cookie-banner__content--compact .fod-cookie-banner__actions-end {
flex-direction: column !important;
order: 1;
}
[b-b6imyauxjr] .fod-cookie-banner__content--compact .fod-cookie-banner__actions-end > * {
inline-size: 100% !important;
}
[b-b6imyauxjr] .fod-cookie-banner__content--compact .fod-cookie-banner__btn--manage {
order: 3;
}
/* #endregion */
/* #region [Category Description Expand/Collapse] */
.fod-cookie-banner__category-content[b-b6imyauxjr] {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.fod-cookie-banner__category-desc--collapsed[b-b6imyauxjr] {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.fod-cookie-banner__learn-more[b-b6imyauxjr] {
align-self: flex-start;
padding: 0;
min-height: auto;
}
/* #endregion */
/* _content/FOD.UIComponents/Components/DatePicker/FodCalendar.razor.rz.scp.css */
/*#region Base Styles*/
.fod-calendar[b-jhgbome1se] {
display: flex;
flex-direction: column;
background-color: var(--color-bg-base-primary, #ffffff);
border: 1px solid var(--color-border-base-default, #E0E0E0);
border-radius: var(--radius-md, 8px);
padding: var(--spacing-4, 16px);
min-width: 280px;
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
outline: none;
}
.fod-calendar:focus-visible[b-jhgbome1se] {
outline: 2px solid var(--color-border-focus, #1976D2);
outline-offset: 2px;
}
/*#endregion Base Styles*/
/*#region Header*/
.fod-calendar__header[b-jhgbome1se] {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-end: var(--spacing-3, 12px);
}
.fod-calendar__header-title[b-jhgbome1se] {
display: flex;
align-items: center;
gap: var(--spacing-1, 4px);
}
.fod-calendar__nav-button[b-jhgbome1se] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: var(--radius-sm, 4px);
background-color: transparent;
color: var(--color-text-base-secondary, #616161);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.fod-calendar__nav-button:hover[b-jhgbome1se] {
background-color: var(--color-bg-base-hover, #F5F5F5);
color: var(--color-text-base-primary, #212121);
}
.fod-calendar__nav-button:focus-visible[b-jhgbome1se] {
outline: 2px solid var(--color-border-focus, #1976D2);
outline-offset: 2px;
}
.fod-calendar__nav-button:disabled[b-jhgbome1se] {
opacity: 0.5;
cursor: not-allowed;
}
.fod-calendar__header-label[b-jhgbome1se] {
font-size: var(--font-size-md, 14px);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-base-primary, #212121);
}
.fod-calendar__month-button[b-jhgbome1se],
.fod-calendar__year-button[b-jhgbome1se] {
display: inline-flex;
align-items: center;
gap: var(--spacing-1, 4px);
padding: var(--spacing-1, 4px) var(--spacing-2, 8px);
border: none;
border-radius: var(--radius-sm, 4px);
background-color: transparent;
font-size: var(--font-size-md, 14px);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-base-primary, #212121);
cursor: pointer;
transition: background-color 0.15s ease;
}
.fod-calendar__month-button:hover[b-jhgbome1se],
.fod-calendar__year-button:hover[b-jhgbome1se] {
background-color: var(--color-bg-base-hover, #F5F5F5);
}
.fod-calendar__month-button:focus-visible[b-jhgbome1se],
.fod-calendar__year-button:focus-visible[b-jhgbome1se] {
outline: 2px solid var(--color-border-focus, #1976D2);
outline-offset: 2px;
}
/*#endregion Header*/
/*#region Weekdays*/
.fod-calendar__weekdays[b-jhgbome1se] {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--spacing-1, 4px);
margin-block-end: var(--spacing-1, 4px);
}
.fod-calendar__weekday[b-jhgbome1se] {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
font-size: var(--font-size-xs, 12px);
font-weight: var(--font-weight-medium, 500);
color: var(--color-text-base-secondary, #616161);
text-transform: uppercase;
}
/*#endregion Weekdays*/
/*#region Days Grid*/
.fod-calendar__days[b-jhgbome1se] {
display: flex;
flex-direction: column;
gap: var(--spacing-1, 4px);
}
.fod-calendar__week[b-jhgbome1se] {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--spacing-1, 4px);
}
.fod-calendar__day[b-jhgbome1se] {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: var(--spacing-6, 6px) var(--spacing-8, 8px);
border: 1.5px solid transparent;
border-radius: var(--radius-sm, 6px);
background-color: transparent;
font-size: var(--font-size-sm, 13px);
font-weight: var(--font-weight-regular, 400);
color: var(--color-text-base-primary, #212121);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.fod-calendar__day:hover:not(:disabled):not(.fod-calendar__day--selected)[b-jhgbome1se] {
background-color: var(--color-bg-base-hover, #F5F5F5);
}
.fod-calendar__day:focus-visible[b-jhgbome1se] {
outline: none;
border-color: var(--color-border-focus, #0058D2);
}
.fod-calendar__day--today[b-jhgbome1se] {
border-color: var(--color-border-brand-default, #0058D2);
color: var(--color-text-brand-default, #0058D2);
font-weight: var(--font-weight-semibold, 600);
}
.fod-calendar__day--today:hover:not(:disabled):not(.fod-calendar__day--selected)[b-jhgbome1se] {
background-color: var(--color-bg-brand-subtle, #E3F2FD);
}
.fod-calendar__day--selected[b-jhgbome1se] {
background-color: var(--color-bg-brand-default, #1976D2);
border-color: var(--color-bg-brand-default, #1976D2);
color: var(--color-text-inverse, #ffffff);
font-weight: var(--font-weight-semibold, 600);
}
.fod-calendar__day--selected:hover[b-jhgbome1se] {
background-color: var(--color-bg-brand-hover, #1565C0);
border-color: var(--color-bg-brand-hover, #1565C0);
}
.fod-calendar__day--other-month[b-jhgbome1se] {
color: var(--color-text-base-tertiary, #9E9E9E);
}
.fod-calendar__day--disabled[b-jhgbome1se] {
color: var(--color-text-base-disabled, #BDBDBD);
cursor: not-allowed;
pointer-events: none;
}
.fod-calendar__day--focused[b-jhgbome1se] {
border-color: var(--color-border-focus, #0058D2);
}
/*#endregion Days Grid*/
/*#region Range Selection*/
.fod-calendar__day--range-start[b-jhgbome1se] {
background-color: var(--color-bg-brand-default, #1976D2);
border-color: var(--color-bg-brand-default, #1976D2);
color: var(--color-text-inverse, #ffffff);
border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px);
}
.fod-calendar__day--range-middle[b-jhgbome1se] {
background-color: var(--color-bg-brand-subtle, #E3F2FD);
border-color: transparent;
color: var(--color-text-base-primary, #212121);
border-radius: 0;
}
.fod-calendar__day--range-end[b-jhgbome1se] {
background-color: var(--color-bg-brand-default, #1976D2);
border-color: var(--color-bg-brand-default, #1976D2);
color: var(--color-text-inverse, #ffffff);
border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
}
.fod-calendar__day--range-start.fod-calendar__day--range-end[b-jhgbome1se] {
border-radius: var(--radius-sm, 6px);
}
/*#endregion Range Selection*/
/*#region Month Picker*/
.fod-calendar__month-picker[b-jhgbome1se] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-2, 8px);
padding: var(--spacing-2, 8px) 0;
}
.fod-calendar__month-item[b-jhgbome1se] {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: var(--spacing-2, 8px);
border: 2px solid transparent;
border-radius: var(--radius-sm, 4px);
background-color: transparent;
font-size: var(--font-size-sm, 13px);
font-weight: var(--font-weight-regular, 400);
color: var(--color-text-base-primary, #212121);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.fod-calendar__month-item:hover:not(.fod-calendar__month-item--selected)[b-jhgbome1se] {
background-color: var(--color-bg-base-hover, #F5F5F5);
}
.fod-calendar__month-item:focus-visible[b-jhgbome1se] {
outline: none;
border-color: var(--color-border-focus, #1976D2);
}
.fod-calendar__month-item--selected[b-jhgbome1se] {
background-color: var(--color-bg-brand-default, #1976D2);
border-color: var(--color-bg-brand-default, #1976D2);
color: var(--color-text-inverse, #ffffff);
font-weight: var(--font-weight-semibold, 600);
}
/*#endregion Month Picker*/
/*#region Year Picker*/
.fod-calendar__year-picker-header[b-jhgbome1se] {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-end: var(--spacing-3, 12px);
}
.fod-calendar__decade-label[b-jhgbome1se] {
font-size: var(--font-size-md, 14px);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-base-primary, #212121);
}
.fod-calendar__year-picker[b-jhgbome1se] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-2, 8px);
padding: var(--spacing-2, 8px) 0;
}
.fod-calendar__year-item[b-jhgbome1se] {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: var(--spacing-2, 8px);
border: 2px solid transparent;
border-radius: var(--radius-sm, 4px);
background-color: transparent;
font-size: var(--font-size-sm, 13px);
font-weight: var(--font-weight-regular, 400);
color: var(--color-text-base-primary, #212121);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.fod-calendar__year-item:hover:not(.fod-calendar__year-item--selected)[b-jhgbome1se] {
background-color: var(--color-bg-base-hover, #F5F5F5);
}
.fod-calendar__year-item:focus-visible[b-jhgbome1se] {
outline: none;
border-color: var(--color-border-focus, #1976D2);
}
.fod-calendar__year-item--selected[b-jhgbome1se] {
background-color: var(--color-bg-brand-default, #1976D2);
border-color: var(--color-bg-brand-default, #1976D2);
color: var(--color-text-inverse, #ffffff);
font-weight: var(--font-weight-semibold, 600);
}
/*#endregion Year Picker*/
/*#region Footer*/
.fod-calendar__footer[b-jhgbome1se] {
display: flex;
justify-content: flex-end;
gap: var(--spacing-2, 8px);
margin-block-start: var(--spacing-3, 12px);
padding-block-start: var(--spacing-3, 12px);
border-top: 1px solid var(--color-border-base-default, #E0E0E0);
}
.fod-calendar__action-button[b-jhgbome1se] {
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
border: none;
border-radius: var(--radius-sm, 4px);
background-color: transparent;
font-size: var(--font-size-sm, 13px);
font-weight: var(--font-weight-medium, 500);
color: var(--color-text-base-secondary, #616161);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.fod-calendar__action-button:hover[b-jhgbome1se] {
background-color: var(--color-bg-base-hover, #F5F5F5);
color: var(--color-text-base-primary, #212121);
}
.fod-calendar__action-button:focus-visible[b-jhgbome1se] {
outline: 2px solid var(--color-border-focus, #1976D2);
outline-offset: 2px;
}
.fod-calendar__action-button--primary[b-jhgbome1se] {
background-color: var(--color-bg-brand-default, #1976D2);
color: var(--color-text-inverse, #ffffff);
}
.fod-calendar__action-button--primary:hover[b-jhgbome1se] {
background-color: var(--color-bg-brand-hover, #1565C0);
color: var(--color-text-inverse, #ffffff);
}
/*#endregion Footer*/
/*#region Dark Theme*/
[data-theme=dark] .fod-calendar[b-jhgbome1se] {
background-color: var(--color-bg-base-primary, #1E1E1E);
border-color: var(--color-border-base-default, #424242);
}
[data-theme=dark] .fod-calendar__nav-button[b-jhgbome1se] {
color: var(--color-text-base-secondary, #B0B0B0);
}
[data-theme=dark] .fod-calendar__nav-button:hover[b-jhgbome1se] {
background-color: var(--color-bg-base-hover, #2D2D2D);
color: var(--color-text-base-primary, #FFFFFF);
}
[data-theme=dark] .fod-calendar__month-button[b-jhgbome1se],
[data-theme=dark] .fod-calendar__year-button[b-jhgbome1se] {
color: var(--color-text-base-primary, #FFFFFF);
}
[data-theme=dark] .fod-calendar__month-button:hover[b-jhgbome1se],
[data-theme=dark] .fod-calendar__year-button:hover[b-jhgbome1se] {
background-color: var(--color-bg-base-hover, #2D2D2D);
}
[data-theme=dark] .fod-calendar__weekday[b-jhgbome1se] {
color: var(--color-text-base-secondary, #B0B0B0);
}
[data-theme=dark] .fod-calendar__day[b-jhgbome1se] {
color: var(--color-text-base-primary, #FFFFFF);
}
[data-theme=dark] .fod-calendar__day:hover:not(:disabled):not(.fod-calendar__day--selected)[b-jhgbome1se] {
background-color: var(--color-bg-base-hover, #2D2D2D);
}
[data-theme=dark] .fod-calendar__day--other-month[b-jhgbome1se] {
color: var(--color-text-base-tertiary, #757575);
}
[data-theme=dark] .fod-calendar__day--disabled[b-jhgbome1se] {
color: var(--color-text-base-disabled, #5C5C5C);
}
[data-theme=dark] .fod-calendar__day--today[b-jhgbome1se] {
color: var(--color-text-brand-default, #4DA3FF);
}
[data-theme=dark] .fod-calendar__month-item[b-jhgbome1se],
[data-theme=dark] .fod-calendar__year-item[b-jhgbome1se] {
color: var(--color-text-base-primary, #FFFFFF);
}
[data-theme=dark] .fod-calendar__month-item:hover:not(.fod-calendar__month-item--selected)[b-jhgbome1se],
[data-theme=dark] .fod-calendar__year-item:hover:not(.fod-calendar__year-item--selected)[b-jhgbome1se] {
background-color: var(--color-bg-base-hover, #2D2D2D);
}
[data-theme=dark] .fod-calendar__footer[b-jhgbome1se] {
border-top-color: var(--color-border-base-default, #424242);
}
[data-theme=dark] .fod-calendar__action-button[b-jhgbome1se] {
color: var(--color-text-base-secondary, #B0B0B0);
}
[data-theme=dark] .fod-calendar__action-button:hover[b-jhgbome1se] {
background-color: var(--color-bg-base-hover, #2D2D2D);
color: var(--color-text-base-primary, #FFFFFF);
}
/*#endregion Dark Theme*/
/* _content/FOD.UIComponents/Components/DatePicker/FodDatePicker.razor.rz.scp.css */
/*#region Base Styles*/
.fod-datepicker[b-o4gkpwv4nm] {
position: relative;
display: flex;
flex-direction: column;
min-inline-size: 0;
inline-size: 100%;
gap: var(--spacing-4, 4px);
font-family: var(--font-family-base, "Onest", sans-serif);
}
.fod-datepicker--full-width[b-o4gkpwv4nm] {
display: flex;
inline-size: 100%;
}
/*#endregion Base Styles*/
/*#region Label*/
.fod-datepicker__label[b-o4gkpwv4nm] {
display: block;
font-size: var(--font-size-14, 14px);
line-height: var(--line-height-20, 20px);
color: var(--color-text-base-default, #1a1a1a);
margin-block-end: var(--spacing-6, 6px);
}
.fod-datepicker__label--required[b-o4gkpwv4nm]::after {
content: " *";
color: var(--color-text-destructive, #dc2626);
}
/*#endregion Label*/
/*#region Input Wrapper*/
.fod-datepicker__input-wrapper[b-o4gkpwv4nm] {
position: relative;
display: flex;
align-items: center;
}
.fod-datepicker__input[b-o4gkpwv4nm] {
inline-size: 100%;
height: var(--spacing-40, 40px);
padding: 0 var(--spacing-8, 8px);
padding-inline-end: var(--spacing-48, 48px);
border: var(--border-width-1, 1px) solid var(--gray-250, #d1d5db);
border-radius: var(--border-radius-8, 8px);
font-size: var(--font-size-14, 14px);
color: var(--gray-900, #1a1a1a);
background-color: var(--white, #ffffff);
outline: none;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease, outline 0.2s ease;
}
.fod-datepicker__input[b-o4gkpwv4nm]::placeholder {
color: var(--color-text-base-tertiary, var(--gray-500, #9ca3af));
}
.fod-datepicker__input:hover:not(:disabled):not(:focus):not(.fod-datepicker__input--error)[b-o4gkpwv4nm] {
border-color: var(--gray-400, #9ca3af);
box-shadow: 0 0 0 0.5px var(--gray-400, #9ca3af);
}
.fod-datepicker__input:focus:not(.fod-datepicker__input--error)[b-o4gkpwv4nm] {
border-color: var(--color-border-brand-default, rgba(0, 88, 210, 1));
outline: none;
box-shadow: 0 0 0 4px rgba(0, 88, 210, 0.12);
}
.fod-datepicker__input--disabled[b-o4gkpwv4nm],
.fod-datepicker__input:disabled[b-o4gkpwv4nm] {
background-color: var(--gray-100, #f3f4f6);
border-color: var(--gray-250, #e5e7eb);
color: var(--gray-500, #9ca3af);
cursor: not-allowed;
opacity: 0.7;
}
/*#endregion Input Wrapper*/
/*#region Input Error State*/
.fod-datepicker__input--error[b-o4gkpwv4nm] {
border-color: var(--red-500, #ef4444);
}
.fod-datepicker__input--error:hover:not(:disabled):not(:focus)[b-o4gkpwv4nm] {
border-color: var(--red-600, #dc2626);
box-shadow: 0 0 0 0.5px var(--red-600, #dc2626);
}
.fod-datepicker__input--error:focus[b-o4gkpwv4nm] {
border-color: var(--red-600, #dc2626);
box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.12);
}
/*#endregion Input Error State*/
/*#region Buttons*/
.fod-datepicker__calendar-button[b-o4gkpwv4nm],
.fod-datepicker__clear-button[b-o4gkpwv4nm] {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-8, 8px);
border: none;
background: transparent;
color: var(--color-icon-base-default, #6b7280);
cursor: pointer;
transition: color 0.15s ease;
}
.fod-datepicker__calendar-button:hover[b-o4gkpwv4nm],
.fod-datepicker__clear-button:hover[b-o4gkpwv4nm] {
color: var(--color-icon-base-hover, #374151);
}
.fod-datepicker__calendar-button:disabled[b-o4gkpwv4nm] {
color: var(--color-icon-base-disabled, #d1d5db);
cursor: not-allowed;
}
.fod-datepicker__calendar-button[b-o4gkpwv4nm] {
inset-inline-end: var(--spacing-4, 4px);
}
.fod-datepicker__clear-button[b-o4gkpwv4nm] {
inset-inline-end: var(--spacing-36, 36px);
}
/*#endregion Buttons*/
/*#region Dropdown*/
.fod-datepicker__dropdown[b-o4gkpwv4nm] {
position: absolute;
z-index: var(--z-index-dropdown, 1000);
inset-block-start: 100%;
inset-inline-start: 0;
margin-block-start: var(--spacing-4, 4px);
background-color: var(--color-background-base-default, #ffffff);
border: 1px solid var(--color-border-base-default, #e5e7eb);
border-radius: var(--radius-lg, 12px);
box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
}
/*#endregion Dropdown*/
/*#region Helper & Error Text*/
.fod-datepicker__helper[b-o4gkpwv4nm] {
display: flex;
align-items: center;
gap: var(--spacing-4, 4px);
font-size: var(--font-size-12, 12px);
line-height: var(--line-height-16, 16px);
color: var(--color-text-base-muted, #6b7280);
}
.fod-datepicker__error[b-o4gkpwv4nm] {
display: flex;
align-items: center;
gap: var(--spacing-4, 4px);
font-size: var(--font-size-12, 12px);
line-height: var(--line-height-16, 16px);
color: var(--color-text-destructive, #dc2626);
}
/*#endregion Helper & Error Text*/
/*#region Screen Reader Only*/
.fod-datepicker__sr-only[b-o4gkpwv4nm] {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/*#endregion Screen Reader Only*/
/*#region Calendar Base*/
.fod-calendar[b-o4gkpwv4nm] {
padding: var(--spacing-16, 16px);
min-inline-size: 280px;
outline: none;
}
.fod-calendar:focus-visible[b-o4gkpwv4nm] {
outline: 2px solid var(--color-border-focus, #2563eb);
outline-offset: 2px;
border-radius: var(--radius-md, 8px);
}
/*#endregion Calendar Base*/
/*#region Calendar Header*/
.fod-calendar__header[b-o4gkpwv4nm] {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-end: var(--spacing-16, 16px);
}
.fod-calendar__header-title[b-o4gkpwv4nm] {
display: flex;
align-items: center;
gap: var(--spacing-4, 4px);
}
.fod-calendar__nav-button[b-o4gkpwv4nm] {
display: flex;
align-items: center;
justify-content: center;
inline-size: 32px;
block-size: 32px;
padding: 0;
border: none;
border-radius: var(--radius-md, 8px);
background: transparent;
color: var(--color-icon-base-default, #6b7280);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.fod-calendar__nav-button:hover[b-o4gkpwv4nm] {
background-color: var(--color-background-base-hover, #f3f4f6);
color: var(--color-icon-base-hover, #374151);
}
.fod-calendar__nav-button:focus-visible[b-o4gkpwv4nm] {
outline: 2px solid var(--color-border-focus, #2563eb);
outline-offset: 2px;
}
.fod-calendar__header-label[b-o4gkpwv4nm] {
font-size: var(--font-size-14, 14px);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-base-default, #1a1a1a);
}
.fod-calendar__month-button[b-o4gkpwv4nm],
.fod-calendar__year-button[b-o4gkpwv4nm] {
display: inline-flex;
align-items: center;
gap: var(--spacing-4, 4px);
padding: var(--spacing-4, 4px) var(--spacing-8, 8px);
border: none;
border-radius: var(--radius-md, 8px);
background: transparent;
font-size: var(--font-size-14, 14px);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-base-default, #1a1a1a);
cursor: pointer;
transition: background-color 0.15s ease;
}
.fod-calendar__month-button:hover[b-o4gkpwv4nm],
.fod-calendar__year-button:hover[b-o4gkpwv4nm] {
background-color: var(--color-background-base-hover, #f3f4f6);
}
.fod-calendar__month-button:focus-visible[b-o4gkpwv4nm],
.fod-calendar__year-button:focus-visible[b-o4gkpwv4nm] {
outline: 2px solid var(--color-border-focus, #2563eb);
outline-offset: 2px;
}
/*#endregion Calendar Header*/
/*#region Weekday Headers*/
.fod-calendar__weekdays[b-o4gkpwv4nm] {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-block-end: var(--spacing-8, 8px);
}
.fod-calendar__weekday[b-o4gkpwv4nm] {
display: flex;
align-items: center;
justify-content: center;
block-size: 32px;
font-size: var(--font-size-12, 12px);
font-weight: var(--font-weight-medium, 500);
color: var(--color-text-base-muted, #6b7280);
text-transform: uppercase;
}
/*#endregion Weekday Headers*/
/*#region Days Grid*/
.fod-calendar__days[b-o4gkpwv4nm] {
display: flex;
flex-direction: column;
gap: var(--spacing-2, 2px);
}
.fod-calendar__week[b-o4gkpwv4nm] {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--spacing-2, 2px);
}
.fod-calendar__day[b-o4gkpwv4nm] {
display: flex;
align-items: center;
justify-content: center;
inline-size: 36px;
block-size: 36px;
padding: 0;
border: none;
border-radius: var(--radius-full, 9999px);
background: transparent;
font-size: var(--font-size-14, 14px);
color: var(--color-text-base-default, #1a1a1a);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.fod-calendar__day:hover:not(:disabled):not(.fod-calendar__day--selected)[b-o4gkpwv4nm] {
background-color: var(--color-background-base-hover, #f3f4f6);
}
.fod-calendar__day:focus-visible[b-o4gkpwv4nm] {
outline: 2px solid var(--color-border-focus, #2563eb);
outline-offset: 2px;
}
.fod-calendar__day--today:not(.fod-calendar__day--selected)[b-o4gkpwv4nm] {
border: 2px solid var(--blue-600, #2563eb);
font-weight: var(--font-weight-semibold, 600);
}
.fod-calendar__day--selected[b-o4gkpwv4nm] {
background-color: var(--blue-600, #2563eb);
color: var(--color-text-inverse, #ffffff);
font-weight: var(--font-weight-medium, 500);
}
.fod-calendar__day--selected:hover[b-o4gkpwv4nm] {
background-color: var(--blue-700, #1d4ed8);
}
.fod-calendar__day--other-month[b-o4gkpwv4nm] {
color: var(--color-text-base-muted, #9ca3af);
}
.fod-calendar__day--disabled[b-o4gkpwv4nm],
.fod-calendar__day:disabled[b-o4gkpwv4nm] {
color: var(--color-text-base-disabled, #d1d5db);
cursor: not-allowed;
}
.fod-calendar__day--focused[b-o4gkpwv4nm] {
box-shadow: inset 0 0 0 2px var(--blue-400, #60a5fa);
}
/*#endregion Days Grid*/
/*#region Month Picker*/
.fod-calendar__month-picker[b-o4gkpwv4nm] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-8, 8px);
padding-block: var(--spacing-8, 8px);
}
.fod-calendar__month-item[b-o4gkpwv4nm] {
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-12, 12px) var(--spacing-8, 8px);
border: none;
border-radius: var(--radius-md, 8px);
background: transparent;
font-size: var(--font-size-14, 14px);
color: var(--color-text-base-default, #1a1a1a);
cursor: pointer;
transition: background-color 0.15s ease;
}
.fod-calendar__month-item:hover[b-o4gkpwv4nm] {
background-color: var(--color-background-base-hover, #f3f4f6);
}
.fod-calendar__month-item:focus-visible[b-o4gkpwv4nm] {
outline: 2px solid var(--color-border-focus, #2563eb);
outline-offset: 2px;
}
.fod-calendar__month-item--selected[b-o4gkpwv4nm] {
background-color: var(--blue-600, #2563eb);
color: var(--color-text-inverse, #ffffff);
}
.fod-calendar__month-item--selected:hover[b-o4gkpwv4nm] {
background-color: var(--blue-700, #1d4ed8);
}
/*#endregion Month Picker*/
/*#region Year Picker*/
.fod-calendar__year-picker-header[b-o4gkpwv4nm] {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-end: var(--spacing-12, 12px);
}
.fod-calendar__decade-label[b-o4gkpwv4nm] {
font-size: var(--font-size-14, 14px);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-base-default, #1a1a1a);
}
.fod-calendar__year-picker[b-o4gkpwv4nm] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-8, 8px);
padding-block: var(--spacing-8, 8px);
}
.fod-calendar__year-item[b-o4gkpwv4nm] {
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-12, 12px) var(--spacing-8, 8px);
border: none;
border-radius: var(--radius-md, 8px);
background: transparent;
font-size: var(--font-size-14, 14px);
color: var(--color-text-base-default, #1a1a1a);
cursor: pointer;
transition: background-color 0.15s ease;
}
.fod-calendar__year-item:hover[b-o4gkpwv4nm] {
background-color: var(--color-background-base-hover, #f3f4f6);
}
.fod-calendar__year-item:focus-visible[b-o4gkpwv4nm] {
outline: 2px solid var(--color-border-focus, #2563eb);
outline-offset: 2px;
}
.fod-calendar__year-item--selected[b-o4gkpwv4nm] {
background-color: var(--blue-600, #2563eb);
color: var(--color-text-inverse, #ffffff);
}
.fod-calendar__year-item--selected:hover[b-o4gkpwv4nm] {
background-color: var(--blue-700, #1d4ed8);
}
/*#endregion Year Picker*/
/*#region Footer*/
.fod-calendar__footer[b-o4gkpwv4nm] {
display: flex;
justify-content: flex-end;
gap: var(--spacing-8, 8px);
margin-block-start: var(--spacing-16, 16px);
padding-block-start: var(--spacing-12, 12px);
border-block-start: 1px solid var(--color-border-base-default, #e5e7eb);
}
.fod-calendar__action-button[b-o4gkpwv4nm] {
padding: var(--spacing-8, 8px) var(--spacing-16, 16px);
border: none;
border-radius: var(--radius-md, 8px);
background: transparent;
font-size: var(--font-size-14, 14px);
font-weight: var(--font-weight-medium, 500);
color: var(--color-text-base-default, #374151);
cursor: pointer;
transition: background-color 0.15s ease;
}
.fod-calendar__action-button:hover[b-o4gkpwv4nm] {
background-color: var(--color-background-base-hover, #f3f4f6);
}
.fod-calendar__action-button:focus-visible[b-o4gkpwv4nm] {
outline: 2px solid var(--color-border-focus, #2563eb);
outline-offset: 2px;
}
.fod-calendar__action-button--primary[b-o4gkpwv4nm] {
background-color: var(--blue-600, #2563eb);
color: var(--color-text-inverse, #ffffff);
}
.fod-calendar__action-button--primary:hover[b-o4gkpwv4nm] {
background-color: var(--blue-700, #1d4ed8);
}
/*#endregion Footer*/
/*#region Dark Theme*/
[data-theme="dark"] .fod-datepicker__label[b-o4gkpwv4nm] {
color: var(--color-text-base-default);
}
[data-theme="dark"] .fod-datepicker__input[b-o4gkpwv4nm] {
background-color: var(--color-background-base-default);
border-color: var(--color-border-base-default);
color: var(--color-text-base-default);
}
[data-theme="dark"] .fod-calendar[b-o4gkpwv4nm] {
background-color: var(--color-background-base-default);
}
[data-theme="dark"] .fod-calendar__day--today:not(.fod-calendar__day--selected)[b-o4gkpwv4nm] {
color: var(--blue-400);
}
/*#endregion Dark Theme*/
/* _content/FOD.UIComponents/Components/DatePicker/FodDateRangePicker.razor.rz.scp.css */
/*#region Base Styles*/
.fod-daterange[b-ozs53os736] {
position: relative;
display: inline-flex;
flex-direction: column;
gap: var(--spacing-4, 4px);
font-family: var(--font-family-base, "Onest", sans-serif);
}
.fod-daterange--full-width[b-ozs53os736] {
display: flex;
inline-size: 100%;
}
/*#endregion Base Styles*/
/*#region Label*/
.fod-daterange__label[b-ozs53os736] {
display: block;
font-size: var(--font-size-14, 14px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--line-height-20, 20px);
color: var(--color-text-base-default, var(--gray-900, #1a1a1a));
margin-block-end: var(--spacing-4, 4px);
}
/*#endregion Label*/
/*#region Input Wrapper - Reuses FodInput styling*/
.fod-daterange__wrapper[b-ozs53os736] {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
min-height: var(--spacing-48, 48px);
padding: 0 var(--spacing-16, 16px);
border-radius: var(--border-radius-8, 8px);
box-sizing: border-box;
gap: var(--spacing-8, 8px);
border: var(--border-width-2, 2px) solid var(--color-border-base-default, var(--gray-250, #d1d5db));
background-color: var(--color-background-base-default, var(--white, #ffffff));
color: var(--color-text-base-default, var(--gray-900, #1a1a1a));
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
outline: none;
}
.fod-daterange__wrapper:hover:not(.fod-daterange__wrapper--disabled):not(.fod-daterange__wrapper--readonly)[b-ozs53os736] {
border-color: var(--color-border-brand-default, #0058D2);
box-shadow: 0 0 0 4px var(--blue-sky-200, #CCDEF6);
}
.fod-daterange__wrapper:focus:not(.fod-daterange__wrapper--disabled):not(.fod-daterange__wrapper--readonly)[b-ozs53os736],
.fod-daterange__wrapper--focused:not(.fod-daterange__wrapper--disabled):not(.fod-daterange__wrapper--readonly)[b-ozs53os736] {
border-color: var(--color-border-brand-default, #0058D2);
box-shadow: 0 0 0 4px var(--blue-sky-200, #CCDEF6);
}
.fod-daterange__wrapper--disabled[b-ozs53os736] {
background-color: var(--color-background-disabled-default, var(--gray-100, #f3f4f6));
border-color: var(--color-border-disabled-default, var(--gray-250, #e5e7eb));
color: var(--color-text-disabled-default, var(--gray-500, #9ca3af));
cursor: not-allowed;
opacity: 0.7;
}
.fod-daterange__wrapper--readonly:not(.fod-daterange__wrapper--disabled)[b-ozs53os736] {
background-color: var(--color-background-base-secondary, var(--gray-100, #f3f4f6));
border-color: var(--color-border-base-secondary, var(--gray-200, #e5e7eb));
cursor: default;
}
/*#endregion Input Wrapper*/
/*#region Date Display*/
.fod-daterange__date[b-ozs53os736] {
font-size: var(--font-size-14, 14px);
color: var(--color-text-base-default, var(--gray-900, #1a1a1a));
white-space: nowrap;
}
.fod-daterange__date--placeholder[b-ozs53os736] {
color: var(--color-text-base-tertiary, var(--gray-500, #9ca3af));
}
.fod-daterange__separator[b-ozs53os736] {
display: flex;
align-items: center;
color: var(--color-text-base-tertiary, var(--gray-500, #9ca3af));
}
/*#endregion Date Display*/
/*#region Calendar Button*/
.fod-daterange__calendar-button[b-ozs53os736] {
display: flex;
align-items: center;
justify-content: center;
margin-inline-start: auto;
padding: var(--spacing-4, 4px);
border: none;
background: transparent;
color: var(--color-icon-base-default, var(--gray-500, #6b7280));
cursor: pointer;
border-radius: var(--border-radius-4, 4px);
transition: color 0.15s ease, background-color 0.15s ease;
}
.fod-daterange__calendar-button:hover:not(:disabled)[b-ozs53os736] {
color: var(--color-icon-base-hover, var(--gray-700, #374151));
background-color: var(--color-background-base-hover, var(--gray-100, #f3f4f6));
}
.fod-daterange__calendar-button:disabled[b-ozs53os736] {
color: var(--color-icon-base-disabled, var(--gray-300, #d1d5db));
cursor: not-allowed;
}
/*#endregion Calendar Button*/
/*#region Dropdown*/
.fod-daterange__dropdown[b-ozs53os736] {
position: absolute;
z-index: var(--z-index-dropdown, 1000);
inset-block-start: 100%;
inset-inline-start: 0;
margin-block-start: var(--spacing-4, 4px);
background-color: var(--color-background-base-default, var(--white, #ffffff));
border: 1px solid var(--color-border-base-default, var(--gray-200, #e5e7eb));
border-radius: var(--border-radius-8, 8px);
box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
}
/*#endregion Dropdown*/
/*#region Screen Reader Only*/
.fod-daterange__sr-only[b-ozs53os736] {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/*#endregion Screen Reader Only*/
/*#region Dark Theme*/
[data-theme="dark"] .fod-daterange__label[b-ozs53os736] {
color: var(--color-text-base-default);
}
[data-theme="dark"] .fod-daterange__wrapper[b-ozs53os736] {
background-color: var(--color-background-base-default);
border-color: var(--color-border-base-default);
color: var(--color-text-base-default);
}
[data-theme="dark"] .fod-daterange__date[b-ozs53os736] {
color: var(--color-text-base-default);
}
[data-theme="dark"] .fod-daterange__date--placeholder[b-ozs53os736] {
color: var(--color-text-base-tertiary);
}
[data-theme="dark"] .fod-daterange__dropdown[b-ozs53os736] {
background-color: var(--color-background-base-default);
border-color: var(--color-border-base-default);
}
/*#endregion Dark Theme*/
/* _content/FOD.UIComponents/Components/DatePicker/FodRangeCalendar.razor.rz.scp.css */
/*#region Base Styles*/
.fod-calendar--range[b-blxq39az28] {
display: flex;
flex-direction: column;
background-color: var(--color-bg-base-primary, #ffffff);
border-radius: var(--radius-md, 8px);
padding: var(--spacing-4, 16px);
min-width: 280px;
outline: none;
}
.fod-calendar--range:focus-visible[b-blxq39az28] {
outline: 2px solid var(--color-border-focus, #1976D2);
outline-offset: 2px;
}
/*#endregion Base Styles*/
/*#region Header*/
.fod-calendar--range .fod-calendar__header[b-blxq39az28] {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-end: var(--spacing-3, 12px);
}
.fod-calendar--range .fod-calendar__nav-button[b-blxq39az28] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: var(--radius-sm, 4px);
background-color: var(--color-bg-base-secondary, #F5F5F5);
color: var(--color-text-base-secondary, #616161);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.fod-calendar--range .fod-calendar__nav-button:hover[b-blxq39az28] {
background-color: var(--color-bg-base-hover, #E0E0E0);
color: var(--color-text-base-primary, #212121);
}
.fod-calendar--range .fod-calendar__nav-button:focus-visible[b-blxq39az28] {
outline: 2px solid var(--color-border-focus, #1976D2);
outline-offset: 2px;
}
.fod-calendar--range .fod-calendar__header-label[b-blxq39az28] {
font-size: var(--font-size-md, 14px);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-base-primary, #212121);
}
.fod-calendar--range .fod-calendar__header-title[b-blxq39az28] {
display: flex;
align-items: center;
gap: var(--spacing-1, 4px);
}
.fod-calendar--range .fod-calendar__month-button[b-blxq39az28],
.fod-calendar--range .fod-calendar__year-button[b-blxq39az28] {
display: inline-flex;
align-items: center;
gap: var(--spacing-1, 4px);
padding: var(--spacing-1, 4px) var(--spacing-2, 8px);
border: none;
border-radius: var(--radius-sm, 4px);
background-color: transparent;
font-size: var(--font-size-md, 14px);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-base-primary, #212121);
cursor: pointer;
transition: background-color 0.15s ease;
}
.fod-calendar--range .fod-calendar__month-button:hover[b-blxq39az28],
.fod-calendar--range .fod-calendar__year-button:hover[b-blxq39az28] {
background-color: var(--color-bg-base-hover, #F5F5F5);
}
.fod-calendar--range .fod-calendar__month-button:focus-visible[b-blxq39az28],
.fod-calendar--range .fod-calendar__year-button:focus-visible[b-blxq39az28] {
outline: 2px solid var(--color-border-focus, #1976D2);
outline-offset: 2px;
}
/*#endregion Header*/
/*#region Month Picker*/
.fod-calendar--range .fod-calendar__month-picker[b-blxq39az28] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-2, 8px);
padding: var(--spacing-2, 8px) 0;
}
.fod-calendar--range .fod-calendar__month-item[b-blxq39az28] {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: var(--spacing-2, 8px);
border: 2px solid transparent;
border-radius: var(--radius-sm, 4px);
background-color: transparent;
font-size: var(--font-size-sm, 13px);
font-weight: var(--font-weight-regular, 400);
color: var(--color-text-base-primary, #212121);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.fod-calendar--range .fod-calendar__month-item:hover:not(.fod-calendar__month-item--selected)[b-blxq39az28] {
background-color: var(--color-bg-base-hover, #F5F5F5);
}
.fod-calendar--range .fod-calendar__month-item:focus-visible[b-blxq39az28] {
outline: none;
border-color: var(--color-border-focus, #1976D2);
}
.fod-calendar--range .fod-calendar__month-item--selected[b-blxq39az28] {
background-color: var(--color-bg-brand-default, #1976D2);
border-color: var(--color-bg-brand-default, #1976D2);
color: var(--color-text-inverse, #ffffff);
font-weight: var(--font-weight-semibold, 600);
}
/*#endregion Month Picker*/
/*#region Year Picker*/
.fod-calendar--range .fod-calendar__year-picker-header[b-blxq39az28] {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-end: var(--spacing-3, 12px);
}
.fod-calendar--range .fod-calendar__decade-label[b-blxq39az28] {
font-size: var(--font-size-md, 14px);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-base-primary, #212121);
}
.fod-calendar--range .fod-calendar__year-picker[b-blxq39az28] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-2, 8px);
padding: var(--spacing-2, 8px) 0;
}
.fod-calendar--range .fod-calendar__year-item[b-blxq39az28] {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: var(--spacing-2, 8px);
border: 2px solid transparent;
border-radius: var(--radius-sm, 4px);
background-color: transparent;
font-size: var(--font-size-sm, 13px);
font-weight: var(--font-weight-regular, 400);
color: var(--color-text-base-primary, #212121);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.fod-calendar--range .fod-calendar__year-item:hover:not(.fod-calendar__year-item--selected)[b-blxq39az28] {
background-color: var(--color-bg-base-hover, #F5F5F5);
}
.fod-calendar--range .fod-calendar__year-item:focus-visible[b-blxq39az28] {
outline: none;
border-color: var(--color-border-focus, #1976D2);
}
.fod-calendar--range .fod-calendar__year-item--selected[b-blxq39az28] {
background-color: var(--color-bg-brand-default, #1976D2);
border-color: var(--color-bg-brand-default, #1976D2);
color: var(--color-text-inverse, #ffffff);
font-weight: var(--font-weight-semibold, 600);
}
/*#endregion Year Picker*/
/*#region Weekdays*/
.fod-calendar--range .fod-calendar__weekdays[b-blxq39az28] {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--spacing-1, 4px);
margin-block-end: var(--spacing-1, 4px);
}
.fod-calendar--range .fod-calendar__weekday[b-blxq39az28] {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
font-size: var(--font-size-xs, 12px);
font-weight: var(--font-weight-medium, 500);
color: var(--color-text-base-secondary, #616161);
text-transform: uppercase;
}
/*#endregion Weekdays*/
/*#region Days Grid*/
.fod-calendar--range .fod-calendar__days[b-blxq39az28] {
display: flex;
flex-direction: column;
gap: var(--spacing-1, 4px);
}
.fod-calendar--range .fod-calendar__week[b-blxq39az28] {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0;
}
.fod-calendar--range .fod-calendar__day[b-blxq39az28] {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: var(--spacing-6, 6px) var(--spacing-8, 8px);
border: 1.5px solid transparent;
border-radius: var(--radius-sm, 6px);
background-color: transparent;
font-size: var(--font-size-sm, 13px);
font-weight: var(--font-weight-regular, 400);
color: var(--color-text-base-primary, #212121);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.fod-calendar--range .fod-calendar__day:hover:not(:disabled):not(.fod-calendar__day--range-start):not(.fod-calendar__day--range-end):not(.fod-calendar__day--range-middle)[b-blxq39az28] {
background-color: var(--color-bg-base-hover, #F5F5F5);
}
.fod-calendar--range .fod-calendar__day:focus-visible[b-blxq39az28] {
outline: none;
border-color: var(--color-border-focus, #0058D2);
}
.fod-calendar--range .fod-calendar__day--today[b-blxq39az28] {
border-color: var(--color-border-brand-default, #0058D2);
color: var(--color-text-brand-default, #0058D2);
font-weight: var(--font-weight-semibold, 600);
}
.fod-calendar--range .fod-calendar__day--other-month[b-blxq39az28] {
color: var(--color-text-base-tertiary, #9E9E9E);
}
.fod-calendar--range .fod-calendar__day--disabled[b-blxq39az28] {
color: var(--color-text-base-disabled, #BDBDBD);
cursor: not-allowed;
pointer-events: none;
}
.fod-calendar--range .fod-calendar__day--focused[b-blxq39az28] {
border-color: var(--color-border-focus, #0058D2);
}
/*#endregion Days Grid*/
/*#region Range Selection*/
.fod-calendar--range .fod-calendar__day--range-start[b-blxq39az28] {
background-color: var(--color-bg-brand-default, #1976D2);
border-color: var(--color-bg-brand-default, #1976D2);
color: var(--color-text-inverse, #ffffff);
font-weight: var(--font-weight-semibold, 600);
border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px);
}
.fod-calendar--range .fod-calendar__day--range-start:hover[b-blxq39az28] {
background-color: var(--color-bg-brand-hover, #1565C0);
border-color: var(--color-bg-brand-hover, #1565C0);
}
.fod-calendar--range .fod-calendar__day--range-middle[b-blxq39az28] {
background-color: var(--color-bg-brand-subtle, #E3F2FD);
border-color: transparent;
color: var(--color-text-base-primary, #212121);
border-radius: 0;
}
.fod-calendar--range .fod-calendar__day--range-middle:hover[b-blxq39az28] {
background-color: var(--color-bg-brand-subtle-hover, #BBDEFB);
}
.fod-calendar--range .fod-calendar__day--range-end[b-blxq39az28] {
background-color: var(--color-bg-brand-default, #1976D2);
border-color: var(--color-bg-brand-default, #1976D2);
color: var(--color-text-inverse, #ffffff);
font-weight: var(--font-weight-semibold, 600);
border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
}
.fod-calendar--range .fod-calendar__day--range-end:hover[b-blxq39az28] {
background-color: var(--color-bg-brand-hover, #1565C0);
border-color: var(--color-bg-brand-hover, #1565C0);
}
/* When start and end are the same date */
.fod-calendar--range .fod-calendar__day--range-start.fod-calendar__day--range-end[b-blxq39az28] {
border-radius: var(--radius-sm, 6px);
}
/*#endregion Range Selection*/
/*#region Hint*/
.fod-calendar--range .fod-calendar__hint[b-blxq39az28] {
display: flex;
justify-content: center;
padding: var(--spacing-2, 8px) 0;
font-size: var(--font-size-xs, 12px);
color: var(--color-text-base-secondary, #616161);
}
/*#endregion Hint*/
/*#region Footer*/
.fod-calendar--range .fod-calendar__footer[b-blxq39az28] {
display: flex;
justify-content: flex-end;
gap: var(--spacing-2, 8px);
margin-block-start: var(--spacing-3, 12px);
padding-block-start: var(--spacing-3, 12px);
border-top: 1px solid var(--color-border-base-default, #E0E0E0);
}
.fod-calendar--range .fod-calendar__action-button[b-blxq39az28] {
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
border: none;
border-radius: var(--radius-sm, 4px);
background-color: transparent;
font-size: var(--font-size-sm, 13px);
font-weight: var(--font-weight-medium, 500);
color: var(--color-text-base-secondary, #616161);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.fod-calendar--range .fod-calendar__action-button:hover[b-blxq39az28] {
background-color: var(--color-bg-base-hover, #F5F5F5);
color: var(--color-text-base-primary, #212121);
}
.fod-calendar--range .fod-calendar__action-button:focus-visible[b-blxq39az28] {
outline: 2px solid var(--color-border-focus, #1976D2);
outline-offset: 2px;
}
.fod-calendar--range .fod-calendar__action-button--primary[b-blxq39az28] {
background-color: var(--color-bg-brand-default, #1976D2);
color: var(--color-text-inverse, #ffffff);
}
.fod-calendar--range .fod-calendar__action-button--primary:hover[b-blxq39az28] {
background-color: var(--color-bg-brand-hover, #1565C0);
color: var(--color-text-inverse, #ffffff);
}
/*#endregion Footer*/
/*#region Dark Theme*/
[data-theme=dark] .fod-calendar--range[b-blxq39az28] {
background-color: var(--color-bg-base-primary, #1E1E1E);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__nav-button[b-blxq39az28] {
background-color: var(--color-bg-base-secondary, #2D2D2D);
color: var(--color-text-base-secondary, #B0B0B0);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__nav-button:hover[b-blxq39az28] {
background-color: var(--color-bg-base-hover, #3D3D3D);
color: var(--color-text-base-primary, #FFFFFF);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__header-label[b-blxq39az28] {
color: var(--color-text-base-primary, #FFFFFF);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__month-button[b-blxq39az28],
[data-theme=dark] .fod-calendar--range .fod-calendar__year-button[b-blxq39az28] {
color: var(--color-text-base-primary, #FFFFFF);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__month-button:hover[b-blxq39az28],
[data-theme=dark] .fod-calendar--range .fod-calendar__year-button:hover[b-blxq39az28] {
background-color: var(--color-bg-base-hover, #2D2D2D);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__decade-label[b-blxq39az28] {
color: var(--color-text-base-primary, #FFFFFF);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__month-item[b-blxq39az28],
[data-theme=dark] .fod-calendar--range .fod-calendar__year-item[b-blxq39az28] {
color: var(--color-text-base-primary, #FFFFFF);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__month-item:hover:not(.fod-calendar__month-item--selected)[b-blxq39az28],
[data-theme=dark] .fod-calendar--range .fod-calendar__year-item:hover:not(.fod-calendar__year-item--selected)[b-blxq39az28] {
background-color: var(--color-bg-base-hover, #2D2D2D);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__weekday[b-blxq39az28] {
color: var(--color-text-base-secondary, #B0B0B0);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__day[b-blxq39az28] {
color: var(--color-text-base-primary, #FFFFFF);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__day:hover:not(:disabled):not(.fod-calendar__day--range-start):not(.fod-calendar__day--range-end):not(.fod-calendar__day--range-middle)[b-blxq39az28] {
background-color: var(--color-bg-base-hover, #2D2D2D);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__day--today[b-blxq39az28] {
color: var(--color-text-brand-default, #4DA3FF);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__day--other-month[b-blxq39az28] {
color: var(--color-text-base-tertiary, #757575);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__day--disabled[b-blxq39az28] {
color: var(--color-text-base-disabled, #5C5C5C);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__day--range-middle[b-blxq39az28] {
background-color: var(--color-bg-brand-subtle, rgba(25, 118, 210, 0.2));
color: var(--color-text-base-primary, #FFFFFF);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__hint[b-blxq39az28] {
color: var(--color-text-base-secondary, #B0B0B0);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__footer[b-blxq39az28] {
border-top-color: var(--color-border-base-default, #424242);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__action-button[b-blxq39az28] {
color: var(--color-text-base-secondary, #B0B0B0);
}
[data-theme=dark] .fod-calendar--range .fod-calendar__action-button:hover[b-blxq39az28] {
background-color: var(--color-bg-base-hover, #2D2D2D);
color: var(--color-text-base-primary, #FFFFFF);
}
/*#endregion Dark Theme*/
/* _content/FOD.UIComponents/Components/Display/FodHidden.razor.rz.scp.css */
/*#region [Base Styles]*/
.fod-hidden[b-chs61ikx2n] {
display: none !important;
}
/*#endregion*/
/* _content/FOD.UIComponents/Components/Drawer/FodDrawer.razor.rz.scp.css */
.fod-drawer-root[b-imdmjvjjec] {
position: fixed;
inset: 0;
pointer-events: none;
z-index: var(--fod-zindex-overlay, 1200);
}
.fod-drawer-root[data-overlay="false"][b-imdmjvjjec] {
position: relative;
inset: auto;
pointer-events: auto;
z-index: auto;
}
.fod-drawer-root[data-variant="permanent"][b-imdmjvjjec],
.fod-drawer-root[data-variant="persistent"][b-imdmjvjjec] {
position: relative;
inset: auto;
pointer-events: auto;
}
.fod-drawer[b-imdmjvjjec] {
position: fixed;
display: flex;
flex-direction: column;
background: var(--color-background-base-default, #ffffff);
color: var(--color-text-base-default, #121212);
box-shadow: var(--fod-shadow-overlay, 0 8px 16px rgba(0, 0, 0, 0.24));
transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1), opacity 150ms ease;
will-change: transform, opacity;
pointer-events: auto;
outline: none;
z-index: 1;
}
.fod-drawer__header[b-imdmjvjjec],
.fod-drawer__footer[b-imdmjvjjec] {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--fod-color-divider, rgba(0, 0, 0, 0.12));
}
.fod-drawer__footer[b-imdmjvjjec] {
border-top: 1px solid var(--fod-color-divider, rgba(0, 0, 0, 0.12));
border-bottom: none;
}
.fod-drawer__content[b-imdmjvjjec] {
flex: 1 1 auto;
overflow-y: auto;
padding: 1.25rem;
}
.fod-drawer__mini[b-imdmjvjjec] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 0.75rem;
}
.fod-drawer--mini[b-imdmjvjjec] {
transition: width 200ms cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
}
.fod-drawer--mini-collapsed .fod-drawer__header[b-imdmjvjjec],
.fod-drawer--mini-collapsed .fod-drawer__footer[b-imdmjvjjec] {
display: none;
}
.fod-drawer--mini-collapsed .fod-drawer__content[b-imdmjvjjec] {
display: none;
}
.fod-drawer--left[b-imdmjvjjec],
.fod-drawer--right[b-imdmjvjjec] {
top: 0;
bottom: 0;
height: 100vh;
height: 100dvh;
min-height: 100%;
}
.fod-drawer--left[b-imdmjvjjec] {
left: 0;
left: env(safe-area-inset-left);
transform: translateX(-100%);
}
.fod-drawer--mini.fod-drawer--left[b-imdmjvjjec] {
transform: translateX(0);
}
.fod-drawer--right[b-imdmjvjjec] {
right: 0;
right: env(safe-area-inset-right);
transform: translateX(100%);
}
.fod-drawer--mini.fod-drawer--right[b-imdmjvjjec] {
transform: translateX(0);
}
/* RTL Support */
[dir="rtl"] .fod-drawer--left[b-imdmjvjjec] {
left: auto;
right: 0;
right: env(safe-area-inset-right);
transform: translateX(100%);
}
[dir="rtl"] .fod-drawer--right[b-imdmjvjjec] {
right: auto;
left: 0;
left: env(safe-area-inset-left);
transform: translateX(-100%);
}
[dir="rtl"] .fod-drawer--mini.fod-drawer--left[b-imdmjvjjec],
[dir="rtl"] .fod-drawer--mini.fod-drawer--right[b-imdmjvjjec] {
transform: translateX(0);
}
[dir="rtl"] .fod-drawer--open[b-imdmjvjjec] {
transform: translate3d(0, 0, 0);
}
.fod-drawer--top[b-imdmjvjjec],
.fod-drawer--bottom[b-imdmjvjjec] {
left: 0;
left: env(safe-area-inset-left);
right: 0;
right: env(safe-area-inset-right);
}
.fod-drawer--top[b-imdmjvjjec] {
top: 0;
top: env(safe-area-inset-top);
transform: translateY(-100%);
}
.fod-drawer--mini.fod-drawer--top[b-imdmjvjjec] {
transform: translateY(0);
}
.fod-drawer--bottom[b-imdmjvjjec] {
bottom: 0;
bottom: env(safe-area-inset-bottom);
transform: translateY(100%);
}
.fod-drawer--mini.fod-drawer--bottom[b-imdmjvjjec] {
transform: translateY(0);
}
.fod-drawer--open[b-imdmjvjjec] {
transform: translate3d(0, 0, 0);
}
/* Permanent variant: Always visible, no transforms */
.fod-drawer-root[data-variant="permanent"] .fod-drawer[b-imdmjvjjec] {
position: relative;
transform: none !important;
box-shadow: none;
}
/* Non-overlay mode (pushes content): drawer stays in document flow */
.fod-drawer-root[data-overlay="false"] .fod-drawer[b-imdmjvjjec] {
position: relative;
transform: none !important;
box-shadow: none;
}
/* Persistent variant: Toggleable with transforms, reserves space */
.fod-drawer-root[data-variant="persistent"] .fod-drawer[b-imdmjvjjec] {
position: fixed;
}
/* Persistent + non-overlay: Acts like permanent but toggleable */
.fod-drawer-root[data-variant="persistent"][data-overlay="false"] .fod-drawer[b-imdmjvjjec] {
position: relative;
}
/* Container mode: Drawer inside FodDrawerContainer pushes content by its width */
.fod-drawer-container > .fod-drawer-root[data-variant="persistent"][b-imdmjvjjec],
.fod-drawer-container > .fod-drawer-root[data-variant="permanent"][b-imdmjvjjec] {
overflow: hidden;
}
/* When persistent drawer is closed in container, collapse to 0 width */
.fod-drawer-container > .fod-drawer-root[data-variant="persistent"]:not(.fod-drawer-root--open)[b-imdmjvjjec] {
width: 0 !important;
}
/* For drawers in container, disable transform animations and use width transitions instead */
.fod-drawer-container > .fod-drawer-root .fod-drawer[b-imdmjvjjec] {
transform: none !important;
transition: none;
position: relative;
}
.fod-drawer-backdrop[b-imdmjvjjec] {
position: fixed;
inset: 0;
background: rgba(18, 18, 18, 0.45);
opacity: 0;
transition: opacity 200ms ease;
pointer-events: none;
z-index: 0;
-webkit-tap-highlight-color: transparent;
}
.fod-drawer-backdrop--visible[b-imdmjvjjec] {
opacity: 1;
pointer-events: auto;
}
.fod-drawer--elevation-0[b-imdmjvjjec] {
box-shadow: none;
}
.fod-drawer--elevation-8[b-imdmjvjjec] {
box-shadow: 0 8px 10px -5px rgba(0,0,0,0.2),
0 16px 24px 2px rgba(0,0,0,0.14),
0 6px 30px 5px rgba(0,0,0,0.12);
}
.fod-drawer--elevation-16[b-imdmjvjjec] {
box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14),
0 9px 46px 8px rgba(0,0,0,0.12),
0 11px 15px -7px rgba(0,0,0,0.2);
}
/* _content/FOD.UIComponents/Components/Drawer/FodDrawerContainer.razor.rz.scp.css */
.fod-drawer-container[b-0hwjfchkj4] {
display: flex;
position: relative;
gap:2;
width: 100%;
height: 100%;
overflow: hidden;
}
/* When drawer is inside container and persistent/permanent, it should be part of flex layout */
.fod-drawer-container > .fod-drawer-root[b-0hwjfchkj4] {
position: relative;
flex-shrink: 0;
height: 100%;
pointer-events: auto;
transition: width 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Content area should fill remaining space */
.fod-drawer-container > .fod-drawer-content-wrapper[b-0hwjfchkj4] {
flex: 1 1 auto;
min-width: 0;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
height: 100%;
flex-grow: 1;
}
/* _content/FOD.UIComponents/Components/Drawer/FodDrawerContent.razor.rz.scp.css */
.fod-drawer-content-wrapper[b-q7et6nyd3s] {
flex: 1 1 auto;
min-width: 0;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
height: 100%;
flex-grow: 1;
}
/* _content/FOD.UIComponents/Components/Faq/FodFaq.razor.rz.scp.css */
/* #region Section - Two Column Layout */
.fod-faq-section[b-ydm76zzrx2] {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: var(--spacing-48, 48px);
background: var(--color-background-base-default, #fff);
padding: var(--spacing-48, 48px);
border-radius: var(--border-radius-12, 12px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.fod-faq-section__header[b-ydm76zzrx2] {
display: flex;
flex-direction: column;
gap: var(--spacing-16, 16px);
}
.fod-faq-section__title[b-ydm76zzrx2] {
font-size: 48px;
font-weight: var(--font-weight-semibold, 600);
line-height: 1.2;
color: var(--color-text-base-default, #1a1a1a);
letter-spacing: -0.02em;
margin: 0;
}
.fod-faq-section__subtitle[b-ydm76zzrx2] {
font-size: 18px;
font-weight: 400;
line-height: 1.5;
color: var(--gray-700, #374151);
max-width: 380px;
margin: 0;
}
/* #endregion */
/* #region FAQ Container */
.fod-faq[b-ydm76zzrx2] {
display: flex;
flex-direction: column;
}
.fod-faq__search[b-ydm76zzrx2] {
margin-bottom: var(--spacing-24, 24px);
}
/* #endregion */
/* #region Skeleton States */
.fod-skeleton[b-ydm76zzrx2] {
background: linear-gradient(
90deg,
var(--gray-200, #e5e7eb) 25%,
var(--gray-100, #f3f4f6) 50%,
var(--gray-200, #e5e7eb) 75%
);
background-size: 200% 100%;
animation: skeleton-pulse-b-ydm76zzrx2 1.5s ease-in-out infinite;
border-radius: 4px;
}
@keyframes skeleton-pulse-b-ydm76zzrx2 {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.fod-skeleton--title-large[b-ydm76zzrx2] {
height: 48px;
width: 280px;
margin-bottom: var(--spacing-8, 8px);
}
.fod-skeleton--subtitle[b-ydm76zzrx2] {
height: 48px;
width: 320px;
}
.fod-skeleton--title[b-ydm76zzrx2] {
height: 24px;
width: 85%;
}
.fod-skeleton--short[b-ydm76zzrx2] {
width: 55%;
}
.fod-skeleton--medium[b-ydm76zzrx2] {
width: 70%;
}
.fod-skeleton--icon[b-ydm76zzrx2] {
width: 24px;
height: 24px;
flex-shrink: 0;
}
[b-ydm76zzrx2] .fod-accordion-item--skeleton .fod-accordion-item__header {
cursor: default;
pointer-events: none;
}
/* #endregion */
/* #region Empty State */
.fod-empty[b-ydm76zzrx2] {
display: flex;
flex-direction: column;
padding: var(--spacing-48, 48px) var(--spacing-24, 24px);
}
.fod-empty__text[b-ydm76zzrx2] {
font-size: var(--font-size-18, 18px);
font-weight: var(--font-weight-medium, 500);
color: var(--color-text-base-default, #1a1a1a);
margin: 0 0 var(--spacing-8, 8px);
}
.fod-empty__subtext[b-ydm76zzrx2] {
font-size: var(--font-size-14, 14px);
color: var(--color-text-base-tertiary, #6b7280);
margin: 0;
}
/* #endregion */
/* #region Responsive */
@media (max-width: 900px) {
.fod-faq-section[b-ydm76zzrx2] {
grid-template-columns: 1fr;
gap: var(--spacing-32, 32px);
padding: var(--spacing-32, 32px);
}
.fod-faq-section__title[b-ydm76zzrx2] {
font-size: 32px;
}
}
@media (max-width: 640px) {
.fod-faq-section[b-ydm76zzrx2] {
padding: var(--spacing-24, 24px);
}
.fod-faq-section__title[b-ydm76zzrx2] {
font-size: 28px;
}
}
/* #endregion */
/* #region Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.fod-skeleton[b-ydm76zzrx2] {
animation: none;
background: var(--gray-200, #e5e7eb);
}
}
/* #endregion */
/* _content/FOD.UIComponents/Components/Feedback/FodAlert.razor.rz.scp.css */
/*#region Base Styles */
.fod-alert[b-lx2no275pb] {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--spacing-12, 12px);
padding: var(--spacing-16, 16px) var(--spacing-20, 20px);
border-radius: var(--radius-12, 12px);
font-size: var(--font-size-14, 14px);
line-height: 1.4;
}
.fod-alert__icon[b-lx2no275pb] {
flex-shrink: 0;
font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
}
.fod-alert__content[b-lx2no275pb] {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--spacing-4, 4px);
align-self: center;
}
.fod-alert__title[b-lx2no275pb],
.fod-alert__text[b-lx2no275pb] {
margin: 0;
}
.fod-alert__actions[b-lx2no275pb] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-8, 8px);
margin-top: var(--spacing-8, 8px);
margin-left: -12px;
}
.fod-alert__close[b-lx2no275pb] {
background: none;
border: none;
cursor: pointer;
display: flex;
padding: var(--spacing-8, 8px);
margin-left: auto;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.fod-alert__close:hover[b-lx2no275pb] {
background-color: rgba(0, 0, 0, 0.08);
}
.fod-alert__close:active[b-lx2no275pb] {
transform: scale(0.92);
}
/* Color variants - Subtle (default) */
.fod-alert--info[b-lx2no275pb] {
background-color: var(--blue-sky-100, #CCE4FA);
color: var(--black, #121212);
}
.fod-alert--info .fod-alert__icon[b-lx2no275pb] {
color: var(--blue-sky-600, #0058D2);
}
.fod-alert--success[b-lx2no275pb] {
background-color: var(--green-100, #E6F5EE);
color: var(--black, #121212);
}
.fod-alert--success .fod-alert__icon[b-lx2no275pb] {
color: var(--green-600, #039855);
}
.fod-alert--warning[b-lx2no275pb] {
background-color: var(--apricot-100, #FEF4E6);
color: var(--black, #121212);
}
.fod-alert--warning .fod-alert__icon[b-lx2no275pb] {
color: var(--apricot-500, #F79009);
}
.fod-alert--error[b-lx2no275pb] {
background-color: var(--red-100, #FEE4E2);
color: var(--black, #121212);
}
.fod-alert--error .fod-alert__icon[b-lx2no275pb] {
color: var(--red-600, #D92D20);
}
/*#endregion Base Styles */
/*#region Standard Variant - Missing FOD Styles*/
/* FOD Design System missing .fod-alert--subtle.fod-alert--success */
.fod-alert.fod-alert--subtle.fod-alert--success[b-lx2no275pb] {
background-color: var(--green-100, #E6F5EE);
color: var(--black, #121212);
}
.fod-alert.fod-alert--subtle.fod-alert--success .fod-alert__icon[b-lx2no275pb] {
color: var(--green-600, #039855);
}
.fod-alert.fod-alert--subtle.fod-alert--success .fod-alert__close[b-lx2no275pb] {
color: var(--black, #121212);
}
/*#endregion Standard Variant - Missing FOD Styles*/
/*#region Filled Variant*/
/* Filled variant uses solid colored backgrounds with white text */
.fod-alert.fod-alert--filled[b-lx2no275pb] {
border: none;
}
.fod-alert.fod-alert--filled.fod-alert--info[b-lx2no275pb] {
background-color: var(--blue-sky-600, #0058D2);
color: var(--white, #fff);
}
.fod-alert.fod-alert--filled.fod-alert--info .fod-alert__icon[b-lx2no275pb],
.fod-alert.fod-alert--filled.fod-alert--info .fod-alert__close[b-lx2no275pb] {
color: var(--white, #fff);
}
.fod-alert.fod-alert--filled.fod-alert--success[b-lx2no275pb] {
background-color: var(--green-600, #039855);
color: var(--white, #fff);
}
.fod-alert.fod-alert--filled.fod-alert--success .fod-alert__icon[b-lx2no275pb],
.fod-alert.fod-alert--filled.fod-alert--success .fod-alert__close[b-lx2no275pb] {
color: var(--white, #fff);
}
.fod-alert.fod-alert--filled.fod-alert--warning[b-lx2no275pb] {
background-color: var(--apricot-300, #FEC84B);
color: var(--black, #121212);
}
.fod-alert.fod-alert--filled.fod-alert--warning .fod-alert__icon[b-lx2no275pb],
.fod-alert.fod-alert--filled.fod-alert--warning .fod-alert__close[b-lx2no275pb] {
color: var(--apricot-800, #93370D);
}
.fod-alert.fod-alert--filled.fod-alert--error[b-lx2no275pb] {
background-color: var(--red-600, #D92D20);
color: var(--white, #fff);
}
.fod-alert.fod-alert--filled.fod-alert--error .fod-alert__icon[b-lx2no275pb],
.fod-alert.fod-alert--filled.fod-alert--error .fod-alert__close[b-lx2no275pb] {
color: var(--white, #fff);
}
/*#endregion Filled Variant*/
/*#region Outlined Variant*/
/* Outlined variant uses white background with colored border */
.fod-alert.fod-alert--outlined[b-lx2no275pb] {
background-color: var(--white, #fff);
border-width: 1px;
border-style: solid;
}
.fod-alert.fod-alert--outlined.fod-alert--info[b-lx2no275pb] {
border-color: var(--blue-sky-600, #0058D2);
color: var(--blue-sky-700, #0046A8);
}
.fod-alert.fod-alert--outlined.fod-alert--info .fod-alert__icon[b-lx2no275pb] {
color: var(--blue-sky-600, #0058D2);
}
.fod-alert.fod-alert--outlined.fod-alert--info .fod-alert__close[b-lx2no275pb] {
color: var(--blue-sky-600, #0058D2);
}
.fod-alert.fod-alert--outlined.fod-alert--success[b-lx2no275pb] {
border-color: var(--green-600, #039855);
color: var(--green-700, #027948);
}
.fod-alert.fod-alert--outlined.fod-alert--success .fod-alert__icon[b-lx2no275pb] {
color: var(--green-600, #039855);
}
.fod-alert.fod-alert--outlined.fod-alert--success .fod-alert__close[b-lx2no275pb] {
color: var(--green-600, #039855);
}
.fod-alert.fod-alert--outlined.fod-alert--warning[b-lx2no275pb] {
border-color: var(--apricot-500, #F79009);
color: var(--apricot-700, #B54708);
}
.fod-alert.fod-alert--outlined.fod-alert--warning .fod-alert__icon[b-lx2no275pb] {
color: var(--apricot-500, #F79009);
}
.fod-alert.fod-alert--outlined.fod-alert--warning .fod-alert__close[b-lx2no275pb] {
color: var(--apricot-700, #B54708);
}
.fod-alert.fod-alert--outlined.fod-alert--error[b-lx2no275pb] {
border-color: var(--red-600, #D92D20);
color: var(--red-700, #B32318);
}
.fod-alert.fod-alert--outlined.fod-alert--error .fod-alert__icon[b-lx2no275pb] {
color: var(--red-600, #D92D20);
}
.fod-alert.fod-alert--outlined.fod-alert--error .fod-alert__close[b-lx2no275pb] {
color: var(--red-600, #D92D20);
}
/*#endregion Outlined Variant*/
/*#region Dark Theme Support*/
[data-theme=dark] .fod-alert.fod-alert--outlined[b-lx2no275pb] {
background-color: var(--gray-900, #171717);
}
[data-theme=dark] .fod-alert.fod-alert--outlined.fod-alert--info[b-lx2no275pb] {
border-color: var(--blue-sky-400, #669BE4);
color: var(--blue-sky-300, #99BCED);
}
[data-theme=dark] .fod-alert.fod-alert--outlined.fod-alert--info .fod-alert__icon[b-lx2no275pb],
[data-theme=dark] .fod-alert.fod-alert--outlined.fod-alert--info .fod-alert__close[b-lx2no275pb] {
color: var(--blue-sky-400, #669BE4);
}
[data-theme=dark] .fod-alert.fod-alert--outlined.fod-alert--success[b-lx2no275pb] {
border-color: var(--green-400, #68C199);
color: var(--green-300, #9AD6BB);
}
[data-theme=dark] .fod-alert.fod-alert--outlined.fod-alert--success .fod-alert__icon[b-lx2no275pb],
[data-theme=dark] .fod-alert.fod-alert--outlined.fod-alert--success .fod-alert__close[b-lx2no275pb] {
color: var(--green-400, #68C199);
}
[data-theme=dark] .fod-alert.fod-alert--outlined.fod-alert--warning[b-lx2no275pb] {
border-color: var(--apricot-400, #FDB022);
color: var(--apricot-300, #FEC84B);
}
[data-theme=dark] .fod-alert.fod-alert--outlined.fod-alert--warning .fod-alert__icon[b-lx2no275pb],
[data-theme=dark] .fod-alert.fod-alert--outlined.fod-alert--warning .fod-alert__close[b-lx2no275pb] {
color: var(--apricot-400, #FDB022);
}
[data-theme=dark] .fod-alert.fod-alert--outlined.fod-alert--error[b-lx2no275pb] {
border-color: var(--red-400, #F97066);
color: var(--red-300, #FDA19B);
}
[data-theme=dark] .fod-alert.fod-alert--outlined.fod-alert--error .fod-alert__icon[b-lx2no275pb],
[data-theme=dark] .fod-alert.fod-alert--outlined.fod-alert--error .fod-alert__close[b-lx2no275pb] {
color: var(--red-400, #F97066);
}
/* Dark theme for subtle/standard variant success */
[data-theme=dark] .fod-alert.fod-alert--subtle.fod-alert--success[b-lx2no275pb] {
background-color: var(--green-900, #054F31);
color: var(--white, #fff);
}
[data-theme=dark] .fod-alert.fod-alert--subtle.fod-alert--success .fod-alert__icon[b-lx2no275pb] {
color: var(--green-400, #68C199);
}
[data-theme=dark] .fod-alert.fod-alert--subtle.fod-alert--success .fod-alert__close[b-lx2no275pb] {
color: var(--white, #fff);
}
/*#endregion Dark Theme Support*/
/* _content/FOD.UIComponents/Components/Feedback/FodInformationalBox.razor.rz.scp.css */
/*#region Base Styles */
.fod-informational-box[b-w9m3pjxmna] {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--spacing-12, 12px);
background-color: var(--gray-100, #f5f5f5);
border-radius: var(--border-radius-8, 8px);
color: var(--gray-700, #383838);
padding: var(--spacing-24, 24px) var(--spacing-20, 20px);
font-size: var(--font-size-14, 14px);
line-height: 1.4;
}
.fod-informational-box__icon[b-w9m3pjxmna] {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.fod-informational-box__content[b-w9m3pjxmna] {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--spacing-12, 12px);
font-size: var(--text-body-md-font-size, 16px);
line-height: 24px;
}
.fod-informational-box__title[b-w9m3pjxmna] {
margin: 0;
font-size: var(--text-heading-h5-2xs-font-size, 18px);
line-height: 26px;
font-weight: 600 ;
}
.fod-informational-box__text[b-w9m3pjxmna] {
margin: 0;
}
.fod-informational-box__text p[b-w9m3pjxmna] {
margin-bottom: var(--spacing-6, 6px);
}
.fod-informational-box__action[b-w9m3pjxmna] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-8, 8px);
}
.fod-informational-box__action a[b-w9m3pjxmna] {
color: var(--blue-sky-600, #0058D2);
}
.fod-informational-box__action a:hover[b-w9m3pjxmna] {
text-decoration: none;
}
.fod-informational-box__action .btn[b-w9m3pjxmna] {
font-size: var(--text-body-sm-font-size, 14px);
line-height: 22px;
padding: var(--spacing-4, 4px) var(--spacing-12, 12px);
}
.fod-informational-box__close[b-w9m3pjxmna] {
background: none;
border: none;
cursor: pointer;
display: flex;
padding: var(--spacing-8, 8px);
color: var(--gray-400, #757575);
position: absolute;
right: 10px;
top: 10px;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.fod-informational-box__close:hover[b-w9m3pjxmna] {
background-color: rgba(47, 86, 255, 0.25);
}
.fod-informational-box__close:active[b-w9m3pjxmna] {
transform: scale(0.92);
}
/*#endregion Base Styles */
/*#region Color Variants */
/* Neutral */
.fod-informational-box--neutral .fod-informational-box__icon[b-w9m3pjxmna] {
color: var(--gray-400, #757575);
}
/* Info (prominent) */
.fod-informational-box--info .fod-informational-box__icon[b-w9m3pjxmna] {
color: var(--blue-sky-600, #0058D2);
}
/* Warning */
.fod-informational-box--warning .fod-informational-box__icon[b-w9m3pjxmna] {
color: var(--apricot-600, #DC6803);
}
/* Error */
.fod-informational-box--error .fod-informational-box__icon[b-w9m3pjxmna] {
color: var(--red-600, #D92D20);
}
/*#endregion Color Variants */
/*#region Type Variants */
/* Strong type — color-tinted backgrounds */
.fod-informational-box--strong.fod-informational-box--info[b-w9m3pjxmna] {
background-color: #E8F0FB;
}
.fod-informational-box--strong.fod-informational-box--warning[b-w9m3pjxmna] {
background-color: #FEEFC6;
}
.fod-informational-box--strong.fod-informational-box--error[b-w9m3pjxmna] {
background-color: #FEE4E2;
}
/* Neutral strong falls back to the default gray background */
/*#endregion Type Variants */
/*#region Responsive */
@media (max-width: 768px) {
.fod-informational-box__content[b-w9m3pjxmna] {
font-size: var(--text-body-sm-font-size, 14px);
}
}
/*#endregion Responsive */
/* _content/FOD.UIComponents/Components/Feedback/FodSnackbar.razor.rz.scp.css */
/*#region Snackbar Base*/
.fod-snackbar[b-fku7xao51w] {
display: flex;
align-items: flex-start;
gap: var(--spacing-16, 16px);
min-inline-size: 320px;
max-inline-size: 500px;
padding: var(--spacing-16, 16px);
border-radius: var(--radius-8, 8px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
pointer-events: auto;
animation: fod-snackbar-slide-in-b-fku7xao51w 0.3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.fod-snackbar[b-fku7xao51w] {
animation: fod-snackbar-fade-in-b-fku7xao51w 0.2s ease-out;
}
}
/*#endregion Snackbar Base*/
/*#region Snackbar Variants*/
.fod-snackbar--info[b-fku7xao51w] {
background-color: var(--blue-sky-600, #0058D2);
color: var(--white, #fff);
}
.fod-snackbar--success[b-fku7xao51w] {
background-color: var(--green-600, #039855);
color: var(--white, #fff);
}
.fod-snackbar--warning[b-fku7xao51w] {
background-color: var(--apricot-300, #FEC84B);
color: var(--black, #121212);
}
.fod-snackbar--warning .fod-snackbar__icon[b-fku7xao51w] {
color: var(--apricot-700, #B54708);
}
.fod-snackbar--warning .fod-snackbar__action[b-fku7xao51w] {
color: var(--black, #121212);
}
.fod-snackbar--error[b-fku7xao51w] {
background-color: var(--red-600, #D92D20);
color: var(--white, #fff);
}
/*#endregion Snackbar Variants*/
/*#region Snackbar Content*/
.fod-snackbar__content[b-fku7xao51w] {
display: flex;
flex-direction: column;
gap: var(--spacing-4, 4px);
flex: 1;
}
.fod-snackbar__title[b-fku7xao51w] {
font-size: var(--text-heading-h5-2xs-font-size, 14px);
font-weight: var(--font-weight-semibold, 600);
margin: 0;
}
.fod-snackbar__text[b-fku7xao51w] {
font-size: var(--text-body-sm-font-size, 14px);
line-height: 1.5;
margin: 0;
display: flex;
align-items: center;
gap: var(--spacing-8, 8px);
flex-wrap: wrap;
}
.fod-snackbar__action[b-fku7xao51w] {
padding: var(--spacing-4, 4px) var(--spacing-8, 8px);
background: transparent;
border: none;
border-radius: var(--radius-4, 4px);
font-size: var(--font-size-sm, 14px);
font-weight: var(--font-weight-semibold, 600);
color: var(--white, #fff);
cursor: pointer;
transition: background-color 0.15s ease, opacity 0.15s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
text-decoration: underline;
}
.fod-snackbar__action:hover[b-fku7xao51w] {
opacity: 0.8;
text-decoration: none;
}
.fod-snackbar__action:focus-visible[b-fku7xao51w] {
outline: 2px solid var(--color-focus-ring, #0066cc);
outline-offset: 2px;
}
/*#endregion Snackbar Content*/
/*#region Snackbar Close Button*/
.fod-snackbar__close[b-fku7xao51w] {
display: flex;
align-items: center;
justify-content: center;
inline-size: 24px;
block-size: 24px;
padding: 0;
background: transparent;
border: none;
border-radius: var(--radius-4, 4px);
font-size: 20px;
line-height: 1;
color: inherit;
cursor: pointer;
transition: opacity 0.15s ease;
opacity: 0.8;
}
.fod-snackbar__close:hover[b-fku7xao51w] {
opacity: 1;
}
.fod-snackbar__close:focus-visible[b-fku7xao51w] {
outline: 2px solid var(--color-focus-ring, #0066cc);
outline-offset: 2px;
}
/*#endregion Snackbar Close Button*/
/*#region Animations*/
@keyframes fod-snackbar-slide-in-b-fku7xao51w {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fod-snackbar-fade-in-b-fku7xao51w {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*#endregion Animations*/
/* _content/FOD.UIComponents/Components/Feedback/FodTooltip.razor.rz.scp.css */
/*#region Base Styles*/
.fod-tooltip-wrapper[b-8zoz3ld4o4] {
position: relative;
display: inline-flex;
width: fit-content;
}
.fod-tooltip-trigger[b-8zoz3ld4o4] {
display: inline-flex;
cursor: default;
}
.fod-tooltip-trigger:focus-visible[b-8zoz3ld4o4] {
outline: 2px solid var(--blue-sky-500, #3379DB);
outline-offset: 2px;
border-radius: var(--border-radius-4, 4px);
}
.fod-tooltip[b-8zoz3ld4o4] {
position: absolute;
z-index: 1080;
display: block;
opacity: 0;
transform: scale(0.95);
padding: var(--spacing-8, 8px);
transition: opacity 0.12s ease, transform 0.12s ease;
pointer-events: none;
visibility: hidden;
}
.fod-tooltip--show[b-8zoz3ld4o4] {
opacity: 1;
transform: scale(1);
visibility: visible;
}
.fod-tooltip--interactive[b-8zoz3ld4o4] {
pointer-events: auto;
}
/*#endregion Base Styles*/
/*#region Tooltip Inner*/
.fod-tooltip-inner[b-8zoz3ld4o4] {
background: var(--gray-900, #1E1E1E);
color: var(--white, #ffffff);
padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
border-radius: var(--border-radius-6, 6px);
width: max-content;
max-width: 240px;
font-size: var(--text-body-sm-font-size, 14px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
/*#endregion Tooltip Inner*/
/*#region Size Variants*/
.fod-tooltip--small .fod-tooltip-inner[b-8zoz3ld4o4] {
padding: var(--spacing-8, 8px) var(--spacing-12, 12px);
}
.fod-tooltip--large .fod-tooltip-inner[b-8zoz3ld4o4] {
padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
}
/*#endregion Size Variants*/
/*#region Arrow Styles*/
.fod-tooltip-arrow[b-8zoz3ld4o4] {
position: absolute;
width: 14px;
height: 14px;
background: var(--gray-900, #1E1E1E);
transform: rotate(45deg);
}
/*#endregion Arrow Styles*/
/*#region Positioned Mode (JS-computed positioning)*/
.fod-tooltip--positioned[b-8zoz3ld4o4] {
position: fixed;
inset: auto;
transform: scale(0.95);
}
.fod-tooltip--positioned.fod-tooltip--show[b-8zoz3ld4o4] {
transform: scale(1);
}
/* Reset CSS-based positioning when JS is active */
.fod-tooltip--positioned.fod-tooltip--top[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--top-start[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--top-end[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--bottom[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--bottom-start[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--bottom-end[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--left[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--left-start[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--left-end[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--right[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--right-start[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--right-end[b-8zoz3ld4o4] {
inset: auto;
transform: scale(0.95);
}
.fod-tooltip--positioned.fod-tooltip--show.fod-tooltip--top[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--show.fod-tooltip--top-start[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--show.fod-tooltip--top-end[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--show.fod-tooltip--bottom[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--show.fod-tooltip--bottom-start[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--show.fod-tooltip--bottom-end[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--show.fod-tooltip--left[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--show.fod-tooltip--left-start[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--show.fod-tooltip--left-end[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--show.fod-tooltip--right[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--show.fod-tooltip--right-start[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--show.fod-tooltip--right-end[b-8zoz3ld4o4] {
transform: scale(1);
}
/* Arrow positioning when JS computes it */
.fod-tooltip--positioned .fod-tooltip-arrow[b-8zoz3ld4o4] {
position: absolute;
transform: rotate(45deg);
/* Reset all positioning to allow inline styles to take effect */
top: auto;
right: auto;
bottom: auto;
left: auto;
}
/* Arrow on bottom side (tooltip placed above) - arrow points down */
.fod-tooltip--positioned.fod-tooltip--top .fod-tooltip-arrow[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--top-start .fod-tooltip-arrow[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--top-end .fod-tooltip-arrow[b-8zoz3ld4o4] {
bottom: 1px;
}
/* Arrow on top side (tooltip placed below) - arrow points up */
.fod-tooltip--positioned.fod-tooltip--bottom .fod-tooltip-arrow[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--bottom-start .fod-tooltip-arrow[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--bottom-end .fod-tooltip-arrow[b-8zoz3ld4o4] {
top: 1px;
}
/* Arrow on right side (tooltip placed left) - arrow points right */
.fod-tooltip--positioned.fod-tooltip--left .fod-tooltip-arrow[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--left-start .fod-tooltip-arrow[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--left-end .fod-tooltip-arrow[b-8zoz3ld4o4] {
right: 1px;
}
/* Arrow on left side (tooltip placed right) - arrow points left */
.fod-tooltip--positioned.fod-tooltip--right .fod-tooltip-arrow[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--right-start .fod-tooltip-arrow[b-8zoz3ld4o4],
.fod-tooltip--positioned.fod-tooltip--right-end .fod-tooltip-arrow[b-8zoz3ld4o4] {
left: 1px;
}
/*#endregion Positioned Mode*/
/*#region Placement - Top*/
.fod-tooltip--top[b-8zoz3ld4o4] {
bottom: calc(100% + var(--fod-tooltip-offset, 0px));
inset-inline-start: 50%;
transform: translateX(-50%) scale(0.95);
}
.fod-tooltip--top.fod-tooltip--show[b-8zoz3ld4o4] {
transform: translateX(-50%) scale(1);
}
.fod-tooltip--top .fod-tooltip-arrow[b-8zoz3ld4o4] {
bottom: 1px;
inset-inline-start: 50%;
transform: translateX(-50%) rotate(45deg);
}
.fod-tooltip--top-start[b-8zoz3ld4o4] {
bottom: calc(100% + var(--fod-tooltip-offset, 0px));
inset-inline-start: 0;
}
.fod-tooltip--top-start .fod-tooltip-arrow[b-8zoz3ld4o4] {
bottom: 1px;
inset-inline-start: 20px;
}
.fod-tooltip--top-end[b-8zoz3ld4o4] {
bottom: calc(100% + var(--fod-tooltip-offset, 0px));
inset-inline-end: 0;
}
.fod-tooltip--top-end .fod-tooltip-arrow[b-8zoz3ld4o4] {
bottom: 1px;
inset-inline-end: 20px;
}
/*#endregion Placement - Top*/
/*#region Placement - Bottom*/
.fod-tooltip--bottom[b-8zoz3ld4o4] {
top: calc(100% + var(--fod-tooltip-offset, 0px));
inset-inline-start: 50%;
transform: translateX(-50%) scale(0.95);
}
.fod-tooltip--bottom.fod-tooltip--show[b-8zoz3ld4o4] {
transform: translateX(-50%) scale(1);
}
.fod-tooltip--bottom .fod-tooltip-arrow[b-8zoz3ld4o4] {
top: 1px;
inset-inline-start: 50%;
transform: translateX(-50%) rotate(45deg);
}
.fod-tooltip--bottom-start[b-8zoz3ld4o4] {
top: calc(100% + var(--fod-tooltip-offset, 0px));
inset-inline-start: 0;
}
.fod-tooltip--bottom-start .fod-tooltip-arrow[b-8zoz3ld4o4] {
top: 1px;
inset-inline-start: 20px;
}
.fod-tooltip--bottom-end[b-8zoz3ld4o4] {
top: calc(100% + var(--fod-tooltip-offset, 0px));
inset-inline-end: 0;
}
.fod-tooltip--bottom-end .fod-tooltip-arrow[b-8zoz3ld4o4] {
top: 1px;
inset-inline-end: 20px;
}
/*#endregion Placement - Bottom*/
/*#region Placement - Left*/
.fod-tooltip--left[b-8zoz3ld4o4] {
inset-inline-end: calc(100% + var(--fod-tooltip-offset, 0px));
top: 50%;
transform: translateY(-50%) scale(0.95);
}
.fod-tooltip--left.fod-tooltip--show[b-8zoz3ld4o4] {
transform: translateY(-50%) scale(1);
}
.fod-tooltip--left .fod-tooltip-arrow[b-8zoz3ld4o4] {
inset-inline-end: 1px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.fod-tooltip--left-start[b-8zoz3ld4o4] {
inset-inline-end: calc(100% + var(--fod-tooltip-offset, 0px));
top: 0;
}
.fod-tooltip--left-start .fod-tooltip-arrow[b-8zoz3ld4o4] {
inset-inline-end: 1px;
top: 20px;
}
.fod-tooltip--left-end[b-8zoz3ld4o4] {
inset-inline-end: calc(100% + var(--fod-tooltip-offset, 0px));
bottom: 0;
}
.fod-tooltip--left-end .fod-tooltip-arrow[b-8zoz3ld4o4] {
inset-inline-end: 1px;
bottom: 20px;
}
/*#endregion Placement - Left*/
/*#region Placement - Right*/
.fod-tooltip--right[b-8zoz3ld4o4] {
inset-inline-start: calc(100% + var(--fod-tooltip-offset, 0px));
top: 50%;
transform: translateY(-50%) scale(0.95);
}
.fod-tooltip--right.fod-tooltip--show[b-8zoz3ld4o4] {
transform: translateY(-50%) scale(1);
}
.fod-tooltip--right .fod-tooltip-arrow[b-8zoz3ld4o4] {
inset-inline-start: 1px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.fod-tooltip--right-start[b-8zoz3ld4o4] {
inset-inline-start: calc(100% + var(--fod-tooltip-offset, 0px));
top: 0;
}
.fod-tooltip--right-start .fod-tooltip-arrow[b-8zoz3ld4o4] {
inset-inline-start: 1px;
top: 20px;
}
.fod-tooltip--right-end[b-8zoz3ld4o4] {
inset-inline-start: calc(100% + var(--fod-tooltip-offset, 0px));
bottom: 0;
}
.fod-tooltip--right-end .fod-tooltip-arrow[b-8zoz3ld4o4] {
inset-inline-start: 1px;
bottom: 20px;
}
/*#endregion Placement - Right*/
/*#region Dark Theme Support*/
[data-theme=dark] .fod-tooltip-inner[b-8zoz3ld4o4] {
background: var(--gray-100, #F5F5F5);
color: var(--gray-900, #1E1E1E);
}
[data-theme=dark] .fod-tooltip-arrow[b-8zoz3ld4o4] {
background: var(--gray-100, #F5F5F5);
}
/*#endregion Dark Theme Support*/
/*#region Reduced Motion*/
@media (prefers-reduced-motion: reduce) {
.fod-tooltip[b-8zoz3ld4o4] {
transition: opacity 0.01ms;
}
.fod-tooltip[b-8zoz3ld4o4],
.fod-tooltip.fod-tooltip--show[b-8zoz3ld4o4],
.fod-tooltip--top[b-8zoz3ld4o4],
.fod-tooltip--top.fod-tooltip--show[b-8zoz3ld4o4],
.fod-tooltip--bottom[b-8zoz3ld4o4],
.fod-tooltip--bottom.fod-tooltip--show[b-8zoz3ld4o4],
.fod-tooltip--left[b-8zoz3ld4o4],
.fod-tooltip--left.fod-tooltip--show[b-8zoz3ld4o4],
.fod-tooltip--right[b-8zoz3ld4o4],
.fod-tooltip--right.fod-tooltip--show[b-8zoz3ld4o4] {
transform: none !important;
}
.fod-tooltip--top[b-8zoz3ld4o4],
.fod-tooltip--bottom[b-8zoz3ld4o4] {
transform: translateX(-50%) !important;
}
.fod-tooltip--left[b-8zoz3ld4o4],
.fod-tooltip--right[b-8zoz3ld4o4] {
transform: translateY(-50%) !important;
}
}
/*#endregion Reduced Motion*/
/*#region High Contrast Mode*/
@media (forced-colors: active) {
.fod-tooltip-inner[b-8zoz3ld4o4] {
border: 1px solid CanvasText;
}
.fod-tooltip-arrow[b-8zoz3ld4o4] {
border: 1px solid CanvasText;
}
}
/*#endregion High Contrast Mode*/
/* _content/FOD.UIComponents/Components/FileUpload/FodFileUpload.razor.rz.scp.css */
/*#region Base Styles*/
.upload-block[b-3ynpq7q2c6] {
display: flex;
flex-direction: column;
gap: var(--spacing-4, 4px);
}
.upload-block__title[b-3ynpq7q2c6] {
margin-block-end: var(--spacing-16, 16px);
font-weight: 600;
}
.upload-block__label[b-3ynpq7q2c6] {
font-weight: 600;
font-size: var(--text-body-md-font-size, 16px);
color: var(--black, #000000);
}
.upload-block__required[b-3ynpq7q2c6] {
color: var(--red-600, #dc2626);
margin-inline-start: var(--spacing-2, 2px);
}
.upload-block__info[b-3ynpq7q2c6] {
font-size: var(--text-body-sm-font-size, 14px);
color: var(--gray-400, #9ca3af);
}
.upload-block__control[b-3ynpq7q2c6] {
display: flex;
flex-direction: column;
gap: var(--spacing-12, 12px);
}
.upload-block__input[b-3ynpq7q2c6] {
display: none;
}
.upload-block__button[b-3ynpq7q2c6] {
inline-size: fit-content;
cursor: pointer;
}
.upload-block__list[b-3ynpq7q2c6] {
display: flex;
flex-direction: column;
gap: var(--spacing-8, 8px);
margin-block-start: var(--spacing-4, 4px);
}
.upload-block__description[b-3ynpq7q2c6] {
color: var(--gray-400, #9ca3af);
font-size: var(--text-body-md-font-size, 16px);
line-height: 1.5;
margin-block-start: var(--spacing-16, 16px);
}
.upload-block__error[b-3ynpq7q2c6] {
font-size: var(--text-body-sm-font-size, 14px);
color: var(--red-600, #dc2626);
margin-block-start: var(--spacing-8, 8px);
}
/*#endregion Base Styles*/
/*#region File Item Styles*/
.upload__item[b-3ynpq7q2c6] {
display: flex;
flex-direction: column;
background: var(--color-background-base-tertiary, #F1F1F1);
border: 1.5px solid transparent;
border-radius: var(--border-radius-8, 8px);
overflow: hidden;
}
.upload__main[b-3ynpq7q2c6] {
display: flex;
align-items: center;
gap: var(--spacing-12, 12px);
padding: var(--spacing-8, 8px) var(--spacing-4, 4px) var(--spacing-8, 8px) var(--spacing-12, 12px);
max-height: 48px;
}
.upload__item--error[b-3ynpq7q2c6] {
border-color: var(--red-600, #dc2626);
}
.upload__item--success[b-3ynpq7q2c6] {
}
.upload__thumb[b-3ynpq7q2c6] {
inline-size: 32px;
block-size: 32px;
background: var(--gray-200, #e5e7eb);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
color: var(--gray-600, #4b5563);
text-transform: uppercase;
flex-shrink: 0;
}
.upload__thumb--image img[b-3ynpq7q2c6] {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.upload__info[b-3ynpq7q2c6] {
flex: 1;
min-inline-size: 0;
font-size: var(--text-body-sm-font-size, 14px);
color: var(--gray-500, #6b7280);
display: flex;
align-items: center;
gap: var(--spacing-4, 4px);
}
.upload__file-name[b-3ynpq7q2c6] {
display: block;
max-inline-size: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--black, #000000);
font-weight: 500;
line-height: 1.2;
}
.upload__separator[b-3ynpq7q2c6] {
color: var(--gray-400, #9ca3af);
}
.upload__file-size[b-3ynpq7q2c6] {
white-space: nowrap;
color: var(--gray-500, #6b7280);
}
.upload__error-section[b-3ynpq7q2c6] {
position: relative;
padding: var(--spacing-8, 8px) var(--spacing-12, 12px);
padding-inline-start: var(--spacing-12, 12px);
}
.upload__error-section[b-3ynpq7q2c6]::before {
content: "";
position: absolute;
top: 0;
left: var(--spacing-12, 12px);
right: var(--spacing-12, 12px);
block-size: 1px;
background-color: var(--gray-250, #d1d5db);
}
.upload__error-message[b-3ynpq7q2c6] {
display: block;
color: var(--red-600, #dc2626);
font-size: var(--text-caption-md-font-size, 12px);
line-height: 1.4;
}
.upload__status[b-3ynpq7q2c6] {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.upload__status--success[b-3ynpq7q2c6] {
color: var(--green-700, #15803d);
}
.upload__status--error[b-3ynpq7q2c6] {
color: var(--red-600, #dc2626);
}
.upload__status--loading[b-3ynpq7q2c6] {
color: var(--blue-sky-600, #2563eb);
}
.upload__spinner[b-3ynpq7q2c6] {
display: inline-block;
inline-size: 16px;
block-size: 16px;
border: 2px solid var(--blue-sky-600, #2563eb);
border-inline-end-color: transparent;
border-radius: 50%;
animation: spin-b-3ynpq7q2c6 0.75s linear infinite;
}
.upload__remove[b-3ynpq7q2c6] {
background: none;
border: none;
cursor: pointer;
padding: var(--spacing-4, 4px);
color: var(--gray-600, #4b5563);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-4, 4px);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.upload__remove:hover[b-3ynpq7q2c6] {
color: var(--gray-900, #111827);
background-color: var(--gray-200, #e5e7eb);
}
.upload__remove:focus-visible[b-3ynpq7q2c6] {
outline: 2px solid var(--blue-sky-500, #3b82f6);
outline-offset: 2px;
}
/*#endregion File Item Styles*/
/*#region Drop Zone Styles*/
.dropzone[b-3ynpq7q2c6] {
display: flex;
justify-content: center;
border: 2px dashed var(--gray-300);
border-radius: var(--border-radius-8);
padding: var(--spacing-24);
text-align: center;
cursor: pointer;
background-color: var(--white);
transition: border-color 0.2s, background-color 0.2s;
min-height: 156px;
}
.dropzone:hover[b-3ynpq7q2c6] {
border-color: var(--blue-sky-600);
background-color: var(--gray-50);
}
.dropzone:active[b-3ynpq7q2c6] {
background-color: var(--background-brand-secondary, #E8F0FB);
border: 1.5px solid var(--border-brand-default, #0058D2)
}
.dropzone:focus[b-3ynpq7q2c6] {
outline: 2px solid var(--white, #ffffff);
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.dropzone--active[b-3ynpq7q2c6] {
border-color: var(--blue-sky-600);
background-color: var(--background-brand-secondary, #E8F0FB);
border: 1.5px solid var(--border-brand-default, #0058D2)
}
.dropzone--dragging[b-3ynpq7q2c6] {
border-color: var(--blue-sky-600);
background-color: var(--background-brand-secondary, #E8F0FB);
border: 1.5px solid var(--border-brand-default, #0058D2)
}
.dropzone__content[b-3ynpq7q2c6] {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
align-items: center;
justify-content: center;
color: var(--gray-600);
}
.dropzone__link[b-3ynpq7q2c6] {
color: var(--blue-sky-600);
cursor: pointer;
font-weight: 500;
text-decoration: underline;
}
.dropzone__drop-hint[b-3ynpq7q2c6] {
font-size: var(--text-body-md-font-size, 16px);
font-weight: 500;
pointer-events: none;
}
.dropzone__details[b-3ynpq7q2c6] {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--spacing-12);
}
/*#endregion Drop Zone Styles*/
/*#region Animations*/
@keyframes spin-b-3ynpq7q2c6 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*#endregion Animations*/
/*#region Disabled State*/
.upload-block--disabled .upload-block__label[b-3ynpq7q2c6] {
color: var(--gray-400, #9ca3af);
}
.upload-block--disabled .upload-block__button[b-3ynpq7q2c6] {
cursor: not-allowed;
opacity: 0.6;
pointer-events: none;
}
.dropzone--disabled[b-3ynpq7q2c6] {
cursor: not-allowed;
pointer-events: none;
border-color: var(--gray-200, #e5e7eb);
}
.dropzone--disabled:hover[b-3ynpq7q2c6] {
border-color: var(--gray-200, #e5e7eb);
background-color: var(--white, #ffffff);
}
.dropzone--disabled .dropzone__content[b-3ynpq7q2c6] {
color: var(--gray-400, #9ca3af);
}
.dropzone--disabled .dropzone__content .bg-gray-200[b-3ynpq7q2c6] {
background-color: var(--gray-100, #f3f4f6);
color: var(--gray-300, #d1d5db);
}
.dropzone--disabled .dropzone__link[b-3ynpq7q2c6] {
color: var(--gray-400, #9ca3af);
text-decoration: underline;
pointer-events: none;
}
/*#endregion Disabled State*/
/*#region Dark Theme*/
[data-theme=dark] .upload-block__label[b-3ynpq7q2c6] {
color: var(--white, #ffffff);
}
[data-theme=dark] .upload-block__info[b-3ynpq7q2c6] {
color: var(--gray-500, #6b7280);
}
[data-theme=dark] .upload__item[b-3ynpq7q2c6] {
background: var(--gray-800, #1f2937);
}
[data-theme=dark] .upload__thumb[b-3ynpq7q2c6] {
background: var(--gray-700, #374151);
color: var(--gray-400, #9ca3af);
}
[data-theme=dark] .upload__file-name[b-3ynpq7q2c6] {
color: var(--white, #ffffff);
}
[data-theme=dark] .upload__file-size[b-3ynpq7q2c6] {
color: var(--gray-400, #9ca3af);
}
[data-theme=dark] .upload__remove[b-3ynpq7q2c6] {
color: var(--gray-400, #9ca3af);
}
[data-theme=dark] .upload__remove:hover[b-3ynpq7q2c6] {
color: var(--white, #ffffff);
background-color: var(--gray-700, #374151);
}
[data-theme=dark] .upload__error-section[b-3ynpq7q2c6]::before {
background-color: var(--gray-600, #4b5563);
}
/*#endregion Dark Theme*/
/*#region Responsive*/
@media (max-width: 575.98px) {
.upload__info[b-3ynpq7q2c6] {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-2, 2px);
}
.upload__separator[b-3ynpq7q2c6] {
display: none;
}
}
/*#endregion Responsive*/
/* _content/FOD.UIComponents/Components/Footer/FodFooter.razor.rz.scp.css */
/*#region Base Styles*/
.fod-footer[b-jnxftt4qqe] {
background-color: var(--fod-footer-bg);
color: var(--color-text-base-primary, #212529);
padding-inline: var(--fod-footer-pad-x);
padding-block-start: var(--fod-footer-pad-y-top);
padding-block-end: var(--fod-footer-pad-y-bottom);
box-sizing: border-box;
width: 100%;
border-radius: 0;
}
@media (max-width: 992px) {
.fod-footer[b-jnxftt4qqe] {
padding-inline: var(--spacing-24, 24px);
}
}
.fod-footer__brand-section[b-jnxftt4qqe] {
display: flex;
flex-direction: column;
justify-content: space-between;
block-size: 100%;
}
.fod-footer__branding[b-jnxftt4qqe] {
display: flex;
flex-direction: column;
gap: var(--spacing-12, 12px);
}
.fod-footer__contact[b-jnxftt4qqe] {
display: flex;
flex-direction: column;
gap: var(--spacing-8, 8px);
}
.fod-footer__contact a[b-jnxftt4qqe] {
color: var(--fod-footer-link);
text-decoration: none;
transition: color 0.2s ease;
}
.fod-footer__contact a:hover[b-jnxftt4qqe] {
color: var(--fod-footer-link-hover);
}
.fod-footer__contact a:focus-visible[b-jnxftt4qqe] {
outline: 2px solid var(--color-border-focus, #0d6efd);
outline-offset: 2px;
border-radius: 2px;
}
/*#endregion Base Styles*/
/*#region Extended Variant*/
.fod-footer__main[b-jnxftt4qqe] {
max-width: var(--fod-container-max-w-xl, 1248px);
margin-inline: auto;
}
.fod-footer__divider-row[b-jnxftt4qqe] {
max-width: var(--fod-container-max-w-xl, 1248px);
margin-inline: auto;
}
/*#endregion Extended Variant*/
/*#region Navigation*/
.fod-footer__nav[b-jnxftt4qqe] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--fod-footer-gap);
row-gap: var(--spacing-32, 32px);
}
.fod-footer__nav--minimal[b-jnxftt4qqe] {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-16, 16px);
justify-content: center;
}
/*#endregion Navigation*/
/*#region Info Section*/
.fod-footer__info-section[b-jnxftt4qqe] {
display: flex;
flex-direction: column;
gap: var(--fod-footer-section-gap);
align-items: flex-start;
}
.fod-footer__payments[b-jnxftt4qqe],
.fod-footer__badges[b-jnxftt4qqe] {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-12, 12px);
align-items: center;
}
.fod-footer__badges img[b-jnxftt4qqe] {
max-height: 40px;
width: auto;
}
/*#endregion Info Section*/
/*#region Bottom Row (Partners + Social)*/
.fod-footer__bottom-row[b-jnxftt4qqe] {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-24, 24px);
max-width: var(--fod-container-max-w-xl, 1248px);
margin-inline: auto;
}
.fod-footer__partners[b-jnxftt4qqe] {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-16, 16px);
align-items: center;
}
.fod-footer__partners img[b-jnxftt4qqe] {
max-height: 40px;
width: auto;
}
.fod-footer__social[b-jnxftt4qqe] {
display: flex;
gap: var(--spacing-16, 16px);
align-items: center;
}
/*#endregion Bottom Row (Partners + Social)*/
/*#region Legal Bar*/
.fod-footer__legal-wrapper[b-jnxftt4qqe] {
background-color: var(--color-bg-base-inverse, #212529);
margin-inline: calc(-1 * var(--fod-footer-pad-x));
margin-block-end: calc(-1 * var(--fod-footer-pad-y-bottom));
padding-inline: var(--fod-footer-pad-x);
border-radius: 0;
box-sizing: border-box;
}
@media (max-width: 992px) {
.fod-footer__legal-wrapper[b-jnxftt4qqe] {
margin-inline: calc(-1 * var(--spacing-24, 24px));
padding-inline: var(--spacing-24, 24px);
}
}
.fod-footer__legal[b-jnxftt4qqe] {
padding-block: var(--spacing-12, 12px);
max-width: var(--fod-container-max-w-xl, 1248px);
margin-inline: auto;
}
.fod-footer__legal-wrapper[b-jnxftt4qqe] .fod-legal-bar,
.fod-footer__legal-wrapper[b-jnxftt4qqe] .fod-legal-bar__copyright,
.fod-footer__legal-wrapper[b-jnxftt4qqe] .fod-legal-bar__link {
color: #ffffff !important;
}
.fod-footer__legal-wrapper[b-jnxftt4qqe] .fod-legal-bar__link {
text-decoration: underline;
}
.fod-footer__legal-wrapper[b-jnxftt4qqe] .fod-legal-bar__link:hover {
color: var(--color-text-base-secondary-inverse, #adb5bd);
}
/*#endregion Legal Bar*/
/*#region Variant: Compact*/
.fod-footer__compact-top[b-jnxftt4qqe] {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--spacing-24, 24px);
padding-block-end: var(--spacing-24, 24px);
max-width: var(--fod-container-max-w-xl, 1248px);
margin-inline: auto;
}
.fod-footer--compact .fod-footer__nav--compact[b-jnxftt4qqe] {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-32, 32px);
flex: 1;
justify-content: center;
}
.fod-footer--compact .fod-footer__payments[b-jnxftt4qqe] {
flex-shrink: 0;
}
.fod-footer__compact-link[b-jnxftt4qqe] {
color: var(--black, #000000);
font-size: var(--text-body-md-font-size, 16px);
line-height: var(--spacing-24, 24px);
text-decoration: none;
transition: all 0.35s ease;
}
.fod-footer__compact-link:hover[b-jnxftt4qqe] {
color: var(--blue-sky-600, #0d6efd);
text-decoration: underline;
}
.fod-footer--compact .fod-footer__contact--compact[b-jnxftt4qqe],
.fod-footer--compact .fod-footer__badges--compact[b-jnxftt4qqe] {
display: none;
}
.fod-footer--compact .fod-footer__bottom-row[b-jnxftt4qqe] {
padding-block: var(--spacing-24, 24px);
}
/*#region Compact Mobile*/
@media (max-width: 767.98px) {
.fod-footer__compact-top[b-jnxftt4qqe] {
flex-direction: column;
align-items: flex-start;
}
.fod-footer--compact .fod-footer__nav--compact[b-jnxftt4qqe] {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-16, 16px);
}
.fod-footer--compact .fod-footer__contact--compact[b-jnxftt4qqe],
.fod-footer--compact .fod-footer__badges--compact[b-jnxftt4qqe] {
display: block;
padding-block: var(--spacing-16, 16px) 0;
}
.fod-footer--compact .fod-footer__bottom-row[b-jnxftt4qqe] {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-24, 24px);
}
.fod-footer--compact .fod-footer__social[b-jnxftt4qqe] {
justify-content: flex-start;
}
}
/*#endregion Compact Mobile*/
/*#endregion Variant: Compact*/
/*#region Variant: Slim*/
.fod-footer--slim[b-jnxftt4qqe] {
padding-block-start: var(--spacing-0, 0);
}
.fod-footer__slim-content[b-jnxftt4qqe] {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--spacing-24, 24px);
padding-block: var(--spacing-32, 32px);
max-width: var(--fod-container-max-w-xl, 1248px);
margin-inline: auto;
}
@media (max-width: 767.98px) {
.fod-footer__slim-content[b-jnxftt4qqe] {
flex-direction: column;
align-items: center;
gap: var(--spacing-24, 24px);
}
.fod-footer--slim .fod-footer__partners[b-jnxftt4qqe] {
justify-content: center;
}
.fod-footer--slim .fod-footer__social[b-jnxftt4qqe] {
justify-content: center;
}
}
/*#endregion Variant: Slim*/
/*#region Dark Theme*/
[data-theme=dark] .fod-footer[b-jnxftt4qqe] {
--fod-footer-bg: var(--color-bg-base-secondary, #1a1a2e);
--fod-footer-text: var(--color-text-base-primary, #f8f9fa);
--fod-footer-text-secondary: var(--color-text-base-secondary, #adb5bd);
--fod-footer-border: var(--color-border-base-default, #495057);
--fod-footer-link: var(--color-text-base-primary, #f8f9fa);
--fod-footer-link-hover: var(--color-text-primary-default, #6ea8fe);
}
/*#endregion Dark Theme*/
/* _content/FOD.UIComponents/Components/Footer/FodFooterBrand.razor.rz.scp.css */
/*#region Base Styles*/
.fod-footer-brand[b-rla0xzco29] {
display: flex;
gap: var(--spacing-12, 12px);
}
.fod-footer-brand__logo[b-rla0xzco29] {
padding-top: var(--spacing-8);
padding-block-end: var(--spacing-20, 20px);
inline-size: auto;
width: 40px;
}
.fod-footer-brand__text[b-rla0xzco29] {
display: flex;
flex-direction: column;
gap: var(--spacing-2, 2px);
}
.fod-footer-brand__title[b-rla0xzco29] {
font-weight: 600;
font-size: var(--text-body-lg-500-font-size, 18px);
color: var(--black, #000000);
}
.fod-footer-brand__subtitle[b-rla0xzco29] {
margin: 0;
font-size: var(--text-caption-sm-font-size, 10px);
color: var(--gray-700, #495057);
line-height: var(--spacing-16, 16px);
}
/*#endregion Base Styles*/
/*#region Dark Theme*/
[data-theme=dark] .fod-footer-brand__title[b-rla0xzco29] {
color: var(--color-text-base-primary, #f8f9fa);
}
[data-theme=dark] .fod-footer-brand__subtitle[b-rla0xzco29] {
color: var(--color-text-base-secondary, #adb5bd);
}
/*#endregion Dark Theme*/
/* _content/FOD.UIComponents/Components/Footer/FodFooterLinkColumns.razor.rz.scp.css */
/*#region Base Styles*/
.fod-footer-link-columns[b-lu1sfmc2fm] {
display: flex;
flex-direction: column;
gap: var(--spacing-24, 24px);
}
.fod-footer-link-columns__content[b-lu1sfmc2fm] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-32, 32px);
row-gap: var(--spacing-32, 32px);
}
.fod-footer-link-columns__live-region[b-lu1sfmc2fm] {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/*#endregion Base Styles*/
/*#region Pagination Controls*/
.fod-footer-link-columns__pagination[b-lu1sfmc2fm] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-16, 16px);
margin-block-start: var(--spacing-16, 16px);
}
.fod-footer-link-columns__nav-btn[b-lu1sfmc2fm] {
display: flex;
align-items: center;
justify-content: center;
inline-size: 36px;
block-size: 36px;
padding: 0;
background-color: transparent;
border: 1px solid var(--color-border-base-default, #dee2e6);
border-radius: var(--radius-md, 6px);
color: var(--color-text-base-default, #212529);
cursor: pointer;
transition: all 0.2s ease;
}
.fod-footer-link-columns__nav-btn:hover:not(:disabled)[b-lu1sfmc2fm] {
background-color: var(--color-surface-base-hover, #f8f9fa);
border-color: var(--color-border-base-hover, #adb5bd);
}
.fod-footer-link-columns__nav-btn:focus-visible[b-lu1sfmc2fm] {
outline: 2px solid var(--color-focus, #0d6efd);
outline-offset: 2px;
}
.fod-footer-link-columns__nav-btn:disabled[b-lu1sfmc2fm] {
opacity: 0.5;
cursor: not-allowed;
}
.fod-footer-link-columns__page-indicators[b-lu1sfmc2fm] {
display: flex;
align-items: center;
gap: var(--spacing-8, 8px);
}
.fod-footer-link-columns__page-dot[b-lu1sfmc2fm] {
display: flex;
align-items: center;
justify-content: center;
inline-size: 12px;
block-size: 12px;
padding: 0;
background-color: var(--color-border-base-default, #dee2e6);
border: none;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
}
.fod-footer-link-columns__page-dot:hover:not(.fod-footer-link-columns__page-dot--active)[b-lu1sfmc2fm] {
background-color: var(--color-border-base-hover, #adb5bd);
}
.fod-footer-link-columns__page-dot:focus-visible[b-lu1sfmc2fm] {
outline: 2px solid var(--color-focus, #0d6efd);
outline-offset: 2px;
}
.fod-footer-link-columns__page-dot--active[b-lu1sfmc2fm] {
background-color: var(--color-primary, #0d6efd);
}
.fod-footer-link-columns__page-dot .visually-hidden[b-lu1sfmc2fm] {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/*#endregion Pagination Controls*/
/*#region Responsive Styles*/
@media (max-width: 767px) {
.fod-footer-link-columns__content[b-lu1sfmc2fm] {
grid-template-columns: 1fr;
gap: 0;
}
.fod-footer-link-columns__pagination[b-lu1sfmc2fm] {
gap: var(--spacing-12, 12px);
}
.fod-footer-link-columns__nav-btn[b-lu1sfmc2fm] {
inline-size: 44px;
block-size: 44px;
}
.fod-footer-link-columns__page-dot[b-lu1sfmc2fm] {
inline-size: 10px;
block-size: 10px;
}
}
/*#endregion Responsive Styles*/
/*#region Dark Theme*/
[data-theme=dark] .fod-footer-link-columns__nav-btn[b-lu1sfmc2fm] {
border-color: var(--color-border-base-default-dark, #495057);
color: var(--white, #ffffff);
}
[data-theme=dark] .fod-footer-link-columns__nav-btn:hover:not(:disabled)[b-lu1sfmc2fm] {
background-color: var(--color-surface-base-hover-dark, rgba(255, 255, 255, 0.08));
border-color: var(--color-border-base-hover-dark, #6c757d);
}
[data-theme=dark] .fod-footer-link-columns__page-dot[b-lu1sfmc2fm] {
background-color: var(--color-border-base-default-dark, #495057);
}
[data-theme=dark] .fod-footer-link-columns__page-dot:hover:not(.fod-footer-link-columns__page-dot--active)[b-lu1sfmc2fm] {
background-color: var(--color-border-base-hover-dark, #6c757d);
}
[data-theme=dark] .fod-footer-link-columns__page-dot--active[b-lu1sfmc2fm] {
background-color: var(--color-primary-dark, #6ea8fe);
}
/*#endregion Dark Theme*/
/* _content/FOD.UIComponents/Components/Footer/FodFooterLinkGroup.razor.rz.scp.css */
/*#region Base Styles*/
.fod-footer-link-group[b-6vfeh0oq1c] {
display: flex;
flex-direction: column;
}
.fod-footer-link-group__heading[b-6vfeh0oq1c] {
margin: 0;
margin-block-end: var(--spacing-16, 16px);
font-weight: 500;
font-size: var(--text-body-lg-500-font-size, 18px);
line-height: var(--spacing-28, 28px);
color: var(--black, #000000);
}
.fod-footer-link-group__list[b-6vfeh0oq1c] {
display: flex;
flex-direction: column;
gap: var(--spacing-16, 16px);
margin: 0;
padding: 0;
list-style: none;
}
.fod-footer-link-group__item[b-6vfeh0oq1c] {
margin: 0;
padding: 0;
}
.fod-footer-link-group__link[b-6vfeh0oq1c] {
display: inline-block;
color: var(--black, #000000);
font-size: var(--text-body-md-font-size, 16px);
line-height: var(--spacing-24, 24px);
text-decoration: none;
transition: all 0.35s ease;
}
.fod-footer-link-group__link:hover[b-6vfeh0oq1c] {
color: var(--blue-sky-600, #0d6efd);
text-decoration: underline;
}
.fod-footer-link-group__link:focus-visible[b-6vfeh0oq1c] {
outline: 2px solid var(--color-focus, #0d6efd);
outline-offset: 2px;
border-radius: 2px;
}
/*#endregion Base Styles*/
/*#region Accordion Toggle*/
.fod-footer-link-group__toggle[b-6vfeh0oq1c] {
display: none;
align-items: center;
justify-content: space-between;
inline-size: 100%;
padding: var(--spacing-12, 12px) 0;
margin: 0;
background: transparent;
border: none;
border-block-end: 1px solid var(--color-border-base-default, #dee2e6);
cursor: pointer;
text-align: start;
transition: all 0.2s ease;
}
.fod-footer-link-group__toggle:hover[b-6vfeh0oq1c] {
background-color: var(--color-surface-base-hover, rgba(0, 0, 0, 0.04));
}
.fod-footer-link-group__toggle:focus-visible[b-6vfeh0oq1c] {
outline: 2px solid var(--color-focus, #0d6efd);
outline-offset: 2px;
border-radius: 2px;
}
.fod-footer-link-group__toggle .fod-footer-link-group__heading[b-6vfeh0oq1c] {
margin-block-end: 0;
}
.fod-footer-link-group__icon[b-6vfeh0oq1c] {
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}
.fod-footer-link-group--expanded .fod-footer-link-group__icon[b-6vfeh0oq1c] {
transform: rotate(180deg);
}
/*#endregion Accordion Toggle*/
/*#region Collapsible Mobile Styles*/
@media (max-width: 767px) {
.fod-footer-link-group--collapsible .fod-footer-link-group__toggle[b-6vfeh0oq1c] {
display: flex;
}
.fod-footer-link-group--collapsible .fod-footer-link-group__heading--desktop[b-6vfeh0oq1c] {
display: none;
}
.fod-footer-link-group--collapsible .fod-footer-link-group__list[b-6vfeh0oq1c] {
overflow: hidden;
max-block-size: 0;
padding-block-start: 0;
opacity: 0;
transition: max-block-size 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
}
.fod-footer-link-group--collapsible.fod-footer-link-group--expanded .fod-footer-link-group__list[b-6vfeh0oq1c] {
max-block-size: 500px;
padding-block-start: var(--spacing-16, 16px);
opacity: 1;
}
}
@media (min-width: 768px) {
.fod-footer-link-group--collapsible .fod-footer-link-group__toggle[b-6vfeh0oq1c] {
display: none;
}
.fod-footer-link-group--collapsible .fod-footer-link-group__heading--desktop[b-6vfeh0oq1c] {
display: block;
margin-block-end: var(--spacing-16, 16px);
}
.fod-footer-link-group--collapsible .fod-footer-link-group__list[b-6vfeh0oq1c] {
max-block-size: none;
opacity: 1;
}
}
/*#endregion Collapsible Mobile Styles*/
/*#region Compact Variant*/
.fod-footer-link-group--compact[b-6vfeh0oq1c] {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-32, 32px);
}
.fod-footer-link-group--compact .fod-footer-link-group__list[b-6vfeh0oq1c] {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-32, 32px);
}
/*#endregion Compact Variant*/
/*#region Dark Theme*/
[data-theme=dark] .fod-footer-link-group__heading[b-6vfeh0oq1c] {
color: var(--white, #ffffff);
}
[data-theme=dark] .fod-footer-link-group__link[b-6vfeh0oq1c] {
color: var(--white, #ffffff);
}
[data-theme=dark] .fod-footer-link-group__link:hover[b-6vfeh0oq1c] {
color: var(--blue-sky-400, #6ea8fe);
}
[data-theme=dark] .fod-footer-link-group__toggle[b-6vfeh0oq1c] {
border-color: var(--color-border-base-default-dark, #495057);
}
[data-theme=dark] .fod-footer-link-group__toggle:hover[b-6vfeh0oq1c] {
background-color: var(--color-surface-base-hover-dark, rgba(255, 255, 255, 0.08));
}
[data-theme=dark] .fod-footer-link-group__icon[b-6vfeh0oq1c] {
color: var(--white, #ffffff);
}
/*#endregion Dark Theme*/
/* _content/FOD.UIComponents/Components/Footer/FodFooterSection.razor.rz.scp.css */
/* _content/FOD.UIComponents/Components/Footer/FodLegalBar.razor.rz.scp.css */
/*#region Base Styles*/
.fod-legal-bar[b-gh6nwhmnfq] {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16, 16px);
font-size: var(--font-size-sm, 0.875rem);
color: var(--color-text-base-secondary, #6c757d);
}
.fod-legal-bar__copyright[b-gh6nwhmnfq] {
flex-shrink: 0;
}
.fod-legal-bar__links[b-gh6nwhmnfq] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-8, 8px) var(--spacing-24, 24px);
}
.fod-legal-bar__link[b-gh6nwhmnfq] {
color: var(--color-text-base-secondary, #6c757d);
text-decoration: none;
transition: color 0.15s ease-in-out;
}
.fod-legal-bar__link:hover[b-gh6nwhmnfq] {
color: var(--color-text-base-primary, #212529);
text-decoration: underline;
}
.fod-legal-bar__link:focus-visible[b-gh6nwhmnfq] {
outline: 2px solid var(--color-focus, #0d6efd);
outline-offset: 2px;
border-radius: 2px;
}
/*#endregion Base Styles*/
/*#region Inverse Variant*/
.fod-legal-bar--inverse[b-gh6nwhmnfq] {
color: var(--white, #ffffff);
}
.fod-legal-bar--inverse .fod-legal-bar__link[b-gh6nwhmnfq] {
color: var(--white, #ffffff);
text-decoration: underline;
}
.fod-legal-bar--inverse .fod-legal-bar__link:hover[b-gh6nwhmnfq] {
color: var(--white, #ffffff);
text-decoration: none;
}
/*#endregion Inverse Variant*/
/*#region Dark Theme*/
[data-theme=dark] .fod-legal-bar[b-gh6nwhmnfq] {
color: var(--color-text-base-secondary, #adb5bd);
}
[data-theme=dark] .fod-legal-bar__link[b-gh6nwhmnfq] {
color: var(--color-text-base-secondary, #adb5bd);
}
[data-theme=dark] .fod-legal-bar__link:hover[b-gh6nwhmnfq] {
color: var(--color-text-base-primary, #f8f9fa);
}
/*#endregion Dark Theme*/
/*#region Responsive*/
@media (max-width: 575.98px) {
.fod-legal-bar[b-gh6nwhmnfq] {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-12, 12px);
}
.fod-legal-bar__links[b-gh6nwhmnfq] {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-8, 8px);
}
}
/*#endregion Responsive*/
/* _content/FOD.UIComponents/Components/Footer/FodPaymentMethods.razor.rz.scp.css */
/*#region Base Styles*/
.fod-payment-methods[b-4a1b0lcxhr] {
display: flex;
flex-direction: column;
gap: var(--spacing-8, 8px);
}
.fod-payment-methods__title[b-4a1b0lcxhr] {
font-weight: var(--font-weight-semibold, 600);
font-size: var(--font-size-lg, 1.125rem);
color: var(--color-text-base-primary, #212529);
}
.fod-payment-methods__icons[b-4a1b0lcxhr] {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-8, 8px);
}
.fod-payment-methods__icon[b-4a1b0lcxhr] {
flex-shrink: 0;
inline-size: auto;
}
/*#endregion Base Styles*/
/*#region Dark Theme*/
[data-theme=dark] .fod-payment-methods__title[b-4a1b0lcxhr] {
color: var(--color-text-base-primary, #f8f9fa);
}
/*#endregion Dark Theme*/
/* _content/FOD.UIComponents/Components/Forms/FodForm.razor.rz.scp.css */
/*#region Base Styles */
.fod-form[b-ykoqsyffcr] {
position: relative;
display: flex;
flex-direction: column;
gap: var(--spacing-16);
width: 100%;
}
/*#endregion Base Styles */
/*#region Content Area */
.fod-form__content[b-ykoqsyffcr] {
display: flex;
flex-direction: column;
gap: var(--spacing-12);
}
/*#endregion Content Area */
/*#region Error Summary */
.fod-form__errors[b-ykoqsyffcr] {
margin-bottom: var(--spacing-12);
}
.fod-form__errors--bottom[b-ykoqsyffcr] {
margin-bottom: 0;
margin-top: var(--spacing-12);
}
.fod-form__errors-list[b-ykoqsyffcr] {
margin: var(--spacing-8) 0 0 0;
padding-left: var(--spacing-16);
list-style-type: disc;
}
.fod-form__errors-list li[b-ykoqsyffcr] {
margin-bottom: var(--spacing-4);
font-size: var(--text-body-sm-font-size);
line-height: var(--text-body-sm-line-height);
}
.fod-form__errors-list li:last-child[b-ykoqsyffcr] {
margin-bottom: 0;
}
.fod-form__errors-list a[b-ykoqsyffcr] {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.fod-form__errors-list a:hover[b-ykoqsyffcr] {
text-decoration-thickness: 2px;
}
.fod-form__errors-list a:focus[b-ykoqsyffcr] {
outline: 2px solid var(--color-border-brand-default);
outline-offset: 2px;
border-radius: 2px;
}
/*#endregion Error Summary */
/*#region Actions Area */
.fod-form__actions[b-ykoqsyffcr] {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-8);
justify-content: flex-end;
align-items: center;
margin-top: var(--spacing-16);
padding-top: var(--spacing-16);
border-top: 1px solid var(--color-border-base-secondary);
}
/*#endregion Actions Area */
/*#region Loading Overlay */
.fod-form__loading-overlay[b-ykoqsyffcr] {
position: absolute;
inset: 0;
background-color: var(--white-500-alpha, rgba(255, 255, 255, 0.6));
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
border-radius: inherit;
}
.fod-form__loading-spinner[b-ykoqsyffcr] {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-8);
}
.fod-form__spinner[b-ykoqsyffcr] {
width: 32px;
height: 32px;
border: 3px solid var(--color-border-base-secondary);
border-top-color: var(--color-border-brand-default);
border-radius: 50%;
animation: fod-form-spin-b-ykoqsyffcr 0.8s linear infinite;
}
.fod-form__loading-text[b-ykoqsyffcr] {
font-size: var(--text-body-sm-font-size);
line-height: var(--text-body-sm-line-height);
font-weight: var(--text-body-sm-500-font-weight);
color: var(--color-text-base-secondary);
}
@keyframes fod-form-spin-b-ykoqsyffcr {
to {
transform: rotate(360deg);
}
}
/*#endregion Loading Overlay */
/*#region State Modifiers */
.fod-form--loading[b-ykoqsyffcr] {
pointer-events: none;
}
.fod-form--disabled[b-ykoqsyffcr] {
opacity: 0.6;
pointer-events: none;
}
.fod-form--disabled .fod-form__loading-overlay[b-ykoqsyffcr] {
display: none;
}
.fod-form--readonly[b-ykoqsyffcr] {
/* Read-only state styling */
}
.fod-form--invalid[b-ykoqsyffcr] {
/* Invalid form state styling - can be used for visual feedback */
}
/*#endregion State Modifiers */
/*#region Dark Theme */
[data-theme=dark] .fod-form__loading-overlay[b-ykoqsyffcr] {
background-color: var(--black-500-alpha, rgba(18, 18, 18, 0.6));
}
[data-theme=dark] .fod-form__actions[b-ykoqsyffcr] {
border-top-color: var(--color-border-base-secondary);
}
/*#endregion Dark Theme */
/*#region Accessibility */
/* High Contrast Mode */
@media (forced-colors: active) {
.fod-form__spinner[b-ykoqsyffcr] {
border-color: CanvasText;
border-top-color: Highlight;
}
.fod-form__loading-overlay[b-ykoqsyffcr] {
background-color: Canvas;
}
.fod-form__errors-list a:focus[b-ykoqsyffcr] {
outline-color: Highlight;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.fod-form__spinner[b-ykoqsyffcr] {
animation-duration: 1.5s;
}
}
/*#endregion Accessibility */
/*#region Responsive */
@media (max-width: 640px) {
.fod-form__actions[b-ykoqsyffcr] {
flex-direction: column;
align-items: stretch;
}
.fod-form__actions > *[b-ykoqsyffcr] {
width: 100%;
}
}
/*#endregion Responsive */
/* _content/FOD.UIComponents/Components/Header/Brand/FodHeaderBrand.razor.rz.scp.css */
/* #region Base */
.fod-header-brand[b-jj3ntwwt8w] {
display: flex;
align-items: center;
gap: var(--spacing-12, 12px);
text-decoration: none;
flex-shrink: 0;
}
.fod-header-brand:focus[b-jj3ntwwt8w] {
outline: 2px solid var(--white, #fff);
outline-offset: 0;
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
border-radius: var(--border-radius-8, 8px);
}
/* #endregion */
/* #region Logo */
.fod-header-brand__logo[b-jj3ntwwt8w] {
display: flex;
align-items: center;
min-width: 48px;
height: 40px;
}
.fod-header-brand__logo img[b-jj3ntwwt8w] {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 0.5px;
}
/* #endregion */
/* #region Details */
.fod-header-brand__details[b-jj3ntwwt8w] {
display: flex;
flex-direction: column;
gap: var(--spacing-2, 2px);
}
.fod-header-brand__name[b-jj3ntwwt8w] {
font-weight: 600;
font-size: var(--text-heading-h5-2xs-font-size, 18px);
color: var(--color-text-base-default, var(--black, #121212));
line-height: var(--spacing-26, 26px);
letter-spacing: -0.18px;
}
.fod-header-brand__description[b-jj3ntwwt8w] {
color: var(--color-text-base-secondary, var(--gray-700, #383838));
font-size: var(--text-caption-sm-font-size, 10px);
line-height: var(--spacing-12, 12px);
}
/* #endregion */
/* #region Compact Variant */
.fod-header-brand--compact .fod-header-brand__details[b-jj3ntwwt8w] {
display: none;
}
.fod-header-brand--compact .fod-header-brand__logo[b-jj3ntwwt8w] {
height: 48px;
}
.fod-header-brand--compact .fod-header-brand__logo img[b-jj3ntwwt8w] {
width: 48px;
height: 48px;
object-fit: contain;
}
/* #endregion */
/* #region Responsive */
@media (min-width: 576px) {
.fod-header-brand__details[b-jj3ntwwt8w] {
display: flex;
}
}
@media (min-width: 1280px) {
.fod-header-brand[b-jj3ntwwt8w] {
min-width: 165px;
gap: var(--spacing-12, 12px);
}
}
/* #endregion */
/* _content/FOD.UIComponents/Components/Header/FodHeader.razor.rz.scp.css */
/* #region Pre-Header */
.fod-pre-header[b-rnv47jnpdp] {
background-color: var(--color-background-base-tertiary, var(--gray-200, #f1f1f1));
border-bottom: var(--border-width-1) var(--border-style-solid) var(--gray-250);
padding: var(--spacing-0, 0) var(--spacing-24, 24px);
height: 32px;
display: flex;
align-items: center;
position: relative;
z-index: 1099;
font-family: "Onest", sans-serif;
}
.fod-pre-header__content[b-rnv47jnpdp] {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1320px;
margin: 0 auto;
width: 100%;
}
.fod-pre-header__logo[b-rnv47jnpdp] {
display: flex;
}
.fod-pre-header__logo a[b-rnv47jnpdp] {
color: var(--color-text-base-default, var(--black, #121212));
display: inline-flex;
align-items: center;
gap: var(--spacing-4, 4px);
text-decoration: none;
font-size: var(--text-caption-md-500-font-size, 12px);
font-weight: 500;
line-height: var(--spacing-16, 16px);
}
.fod-pre-header__logo img[b-rnv47jnpdp] {
height: 21px;
width: 18px;
}
.fod-pre-header__language[b-rnv47jnpdp] {
display: flex;
align-items: center;
height: 32px;
}
.fod-pre-header__language ul[b-rnv47jnpdp] {
list-style: none;
margin: var(--spacing-0, 0);
padding: var(--spacing-0, 0);
display: flex;
align-items: center;
gap: var(--spacing-12, 12px);
}
.fod-pre-header__language a[b-rnv47jnpdp] {
color: var(--color-text-base-secondary, var(--gray-700, #383838));
font-size: var(--text-body-sm-500-font-size, 14px);
font-weight: 500;
line-height: var(--spacing-20, 20px);
text-decoration: none;
transition: all 0.35s ease;
}
.fod-pre-header__language a:hover[b-rnv47jnpdp] {
text-decoration: underline;
}
.fod-pre-header__language a.active[b-rnv47jnpdp] {
color: var(--color-text-base-default, var(--black, #121212));
text-decoration: underline;
}
/* #endregion */
/* #region Header Base */
.fod-header[b-rnv47jnpdp] {
display: block;
background-color: var(--color-background-base-default, var(--white, #fff));
border-bottom: 1px solid var(--gray-250, #d9d9d9);
padding: var(--spacing-0, 0) var(--spacing-24, 24px);
font-family: "Onest", sans-serif;
}
/* #endregion */
/* #region Header Variants */
.fod-header--sticky[b-rnv47jnpdp] {
position: sticky;
top: 0;
z-index: 1100;
}
.fod-header--elevated[b-rnv47jnpdp] {
box-shadow: var(--drop-shadow-300, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}
.fod-header--transparent[b-rnv47jnpdp] {
background-color: transparent;
border-bottom: none;
}
.fod-header--colored[b-rnv47jnpdp] {
background-color: var(--blue-sky-600, #0066cc);
color: var(--white, #fff);
}
.fod-header--elevation-1[b-rnv47jnpdp] {
box-shadow: var(--drop-shadow-100, 0 1px 2px rgba(0, 0, 0, 0.05));
}
.fod-header--elevation-2[b-rnv47jnpdp] {
box-shadow: var(--drop-shadow-200, 0 2px 4px rgba(0, 0, 0, 0.075));
}
.fod-header--elevation-3[b-rnv47jnpdp] {
box-shadow: var(--drop-shadow-300, 0 4px 6px rgba(0, 0, 0, 0.1));
}
.fod-header--elevation-4[b-rnv47jnpdp] {
box-shadow: var(--drop-shadow-400, 0 8px 12px rgba(0, 0, 0, 0.125));
}
.fod-header--elevation-5[b-rnv47jnpdp] {
box-shadow: var(--drop-shadow-500, 0 12px 24px rgba(0, 0, 0, 0.15));
}
/* #endregion */
/* #region Header Wrapper */
.fod-header__wrapper[b-rnv47jnpdp] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-8, 8px);
width: 100%;
max-width: 1320px;
min-height: var(--spacing-72, 72px);
margin: 0 auto;
position: relative;
transition: gap var(--transition-duration-fast, 150ms) ease;
}
@media screen and (min-width: 1280px) {
.fod-header__wrapper[b-rnv47jnpdp] {
gap: var(--spacing-48, 48px);
}
}
/* #endregion */
/* #region Navigation Bar (Full/Busy variant) */
.fod-header--full[b-rnv47jnpdp] {
flex-direction: column;
}
.fod-header__nav-bar[b-rnv47jnpdp] {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: var(--spacing-0, 0) var(--spacing-0, 0) var(--spacing-2, 2px) var(--spacing-0, 0);
animation: slideDownNav-b-rnv47jnpdp var(--transition-duration-fast, 150ms) ease;
}
@keyframes slideDownNav-b-rnv47jnpdp {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fod-header__nav-bar[b-rnv47jnpdp] .fod-header-links {
justify-content: flex-start;
}
/* #endregion */
/* #region Actions */
.fod-header__actions[b-rnv47jnpdp] {
display: flex;
align-items: center;
gap: var(--spacing-24, 24px);
flex-shrink: 0;
transition: gap var(--transition-duration-fast, 150ms) ease;
margin-left: auto;
}
.fod-header__actions-icons[b-rnv47jnpdp] {
display: flex;
align-items: center;
gap: var(--spacing-8, 8px);
transition: gap var(--transition-duration-fast, 150ms) ease;
}
.fod-header__actions-buttons[b-rnv47jnpdp] {
display: flex;
align-items: center;
gap: var(--spacing-12, 12px);
white-space: nowrap;
}
.fod-header__secondary-btn[b-rnv47jnpdp] {
background-color: var(--blue-sky-100, #e8f0fb) !important;
color: var(--blue-sky-600, #0058d2) !important;
}
.fod-header__secondary-btn:hover[b-rnv47jnpdp] {
background-color: var(--blue-sky-150, #d6e5f8) !important;
}
/* #endregion */
/* #region Toggle Buttons */
.fod-header__toggle[b-rnv47jnpdp] {
background: none;
border: none;
border-radius: var(--border-radius-full, 999px);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
height: var(--spacing-40, 40px);
width: var(--spacing-40, 40px);
padding: 0;
transition: all 0.35s ease;
color: var(--color-text-base-default, var(--black, #121212));
}
/* #endregion */
/* #region Animated Hamburger */
.fod-header__hamburger[b-rnv47jnpdp] {
width: 20px;
height: 14px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.fod-header__hamburger-bar[b-rnv47jnpdp] {
display: block;
width: 100%;
height: 2px;
background-color: currentColor;
border-radius: 1px;
transition: transform var(--transition-duration-normal, 300ms) ease,
opacity var(--transition-duration-normal, 300ms) ease;
transform-origin: center;
}
.fod-header__hamburger--open .fod-header__hamburger-bar:nth-child(1)[b-rnv47jnpdp] {
transform: translateY(6px) rotate(45deg);
}
.fod-header__hamburger--open .fod-header__hamburger-bar:nth-child(2)[b-rnv47jnpdp] {
opacity: 0;
}
.fod-header__hamburger--open .fod-header__hamburger-bar:nth-child(3)[b-rnv47jnpdp] {
transform: translateY(-6px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
.fod-header__hamburger-bar[b-rnv47jnpdp] {
transition: none;
}
}
.fod-header__toggle:hover[b-rnv47jnpdp] {
background-color: var(--color-background-base-secondary, var(--gray-250, #e5e7eb));
}
.fod-header__toggle:focus[b-rnv47jnpdp] {
outline: 2px solid var(--white, #fff);
outline-offset: 0;
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-header__toggle.is-active[b-rnv47jnpdp],
.is-open .fod-header__toggle[b-rnv47jnpdp] {
background-color: var(--color-background-base-secondary, var(--gray-250, #e5e7eb));
}
/* #endregion */
/* #region Platform Grid */
.fod-header__platforms[b-rnv47jnpdp] {
position: relative;
}
.fod-header-platform-panel[b-rnv47jnpdp] {
position: absolute;
background: var(--white, #fff);
border: var(--border-width-1-5, 1.5px) var(--border-style-solid, solid) var(--gray-100, #f3f4f6);
border-radius: var(--border-radius-16, 16px);
box-shadow: var(--drop-shadow-300, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
padding: var(--spacing-24, 24px) var(--spacing-20, 20px);
gap: var(--spacing-16, 16px);
display: flex;
flex-direction: column;
top: calc(100% + 8px);
right: 0;
z-index: 1150;
min-width: 400px;
animation: fadeIn-b-rnv47jnpdp 0.2s ease;
}
.fod-header-platform-panel__title[b-rnv47jnpdp] {
font-size: var(--text-body-lg-500-font-size, 16px);
font-weight: 600;
margin: 0;
color: var(--black, #000);
text-align: start;
}
.fod-header-platform-grid[b-rnv47jnpdp] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 16px;
}
.fod-header-platform-grid__item[b-rnv47jnpdp] {
background-color: var(--gray-100, #f3f4f6);
border-radius: var(--border-radius-12, 12px);
padding: var(--spacing-8, 8px) var(--spacing-20, 20px);
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
overflow: hidden;
isolation: isolate;
}
.fod-header-platform-grid__item:hover[b-rnv47jnpdp] {
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
background-color: var(--gray-050, #f9fafb);
}
.fod-header-platform-grid__item:focus-within[b-rnv47jnpdp] {
outline: 3px solid var(--blue-sky-600, #0066cc);
outline-offset: 3px;
}
.fod-header-platform-grid__link[b-rnv47jnpdp] {
display: flex;
align-items: center;
gap: var(--spacing-12, 12px);
font-size: 0.9rem;
color: var(--gray-800, #374151);
text-decoration: none;
position: relative;
z-index: 2;
border-radius: var(--border-radius-12, 12px);
outline: none;
}
.fod-header-platform-grid__link:focus-visible[b-rnv47jnpdp] {
outline: none;
box-shadow: none;
}
.fod-header-platform-grid__image[b-rnv47jnpdp] {
display: flex;
align-items: center;
justify-content: center;
}
.fod-header-platform-grid__image img[b-rnv47jnpdp] {
max-width: 48px;
height: auto;
display: block;
}
.fod-header-platform-grid__content[b-rnv47jnpdp] {
display: flex;
flex-direction: column;
gap: var(--spacing-2, 2px);
text-align: start;
}
.fod-header-platform-grid__title[b-rnv47jnpdp] {
font-weight: 600;
font-size: var(--text-body-lg-500-font-size, 16px);
line-height: var(--spacing-24, 24px);
text-align: start;
color: var(--black, #000);
margin: 0;
transition: color 0.2s ease;
}
.fod-header-platform-grid__link:hover .fod-header-platform-grid__title[b-rnv47jnpdp] {
color: var(--blue-sky-600, #0066cc);
}
.fod-header-platform-grid__description[b-rnv47jnpdp] {
font-size: var(--text-caption-md-font-size, 12px);
line-height: var(--spacing-16, 16px);
color: var(--gray-700, #4b5563);
margin: 0;
text-align: start;
}
.fod-header-platform-panel__view-all[b-rnv47jnpdp] {
display: inline-flex;
align-items: center;
gap: var(--spacing-4, 4px);
color: var(--gray-700, #4b5563);
text-decoration: none;
font-size: var(--text-body-sm-font-size, 14px);
font-weight: 500;
padding: var(--spacing-8, 8px) var(--spacing-16, 16px);
border-radius: var(--border-radius-full, 999px);
background-color: var(--gray-100, #f3f4f6);
transition: all 0.2s ease;
align-self: flex-start;
}
.fod-header-platform-panel__view-all:hover[b-rnv47jnpdp] {
background-color: var(--gray-200, #e5e7eb);
color: var(--blue-sky-600, #0066cc);
}
/* #endregion */
/* #region Help Panel */
.fod-header__help[b-rnv47jnpdp] {
position: relative;
}
.fod-header-help-panel[b-rnv47jnpdp] {
position: absolute;
background: var(--white, #fff);
border: var(--border-width-1-5, 1.5px) var(--border-style-solid, solid) var(--gray-100, #f3f4f6);
border-radius: var(--border-radius-16, 16px);
box-shadow: var(--drop-shadow-300, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
display: flex;
flex-direction: column;
right: 0;
top: calc(100% + 8px);
z-index: 1150;
width: 270px;
padding: var(--spacing-8, 8px);
gap: var(--spacing-8, 8px);
animation: fadeIn-b-rnv47jnpdp 0.2s ease;
}
.fod-header-help-menu[b-rnv47jnpdp] {
display: flex;
flex-direction: column;
list-style: none;
margin: var(--spacing-0, 0);
padding: var(--spacing-0, 0);
}
.fod-header-help-menu__link[b-rnv47jnpdp] {
font-size: var(--text-body-sm-font-size, 14px);
font-weight: 500;
color: var(--gray-700, #4b5563);
display: block;
text-decoration: none;
padding: var(--spacing-8, 8px) var(--spacing-12, 12px);
border-radius: var(--border-radius-8, 8px);
transition: background-color 0.2s ease, color 0.2s ease;
}
.fod-header-help-menu__link:hover[b-rnv47jnpdp] {
background-color: var(--gray-100, #f3f4f6);
color: var(--blue-sky-600, #0066cc);
}
/* #endregion */
/* #region Language Switcher */
.fod-header__language[b-rnv47jnpdp] {
position: relative;
}
.fod-header-language__toggle[b-rnv47jnpdp] {
display: inline-flex;
align-items: center;
gap: var(--spacing-4, 4px);
background: none;
border: 1px solid var(--gray-300, #d1d5db);
border-radius: var(--border-radius-full, 999px);
padding: var(--spacing-6, 6px) var(--spacing-12, 12px);
font-size: var(--text-body-sm-font-size, 14px);
font-weight: 500;
color: var(--gray-800, #374151);
cursor: pointer;
transition: all 0.2s ease;
}
.fod-header-language__toggle:hover[b-rnv47jnpdp] {
background-color: var(--gray-100, #f3f4f6);
}
.fod-header-language__toggle--compact[b-rnv47jnpdp] {
padding: var(--spacing-4, 4px) var(--spacing-8, 8px);
}
.fod-header-language__menu[b-rnv47jnpdp] {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--white, #fff);
border-radius: var(--border-radius-16, 16px);
box-shadow: var(--drop-shadow-300, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
padding: var(--spacing-8, 8px);
width: 150px;
z-index: 1150;
animation: fadeIn-b-rnv47jnpdp 0.2s ease;
}
.fod-header-language__menu ul[b-rnv47jnpdp] {
list-style: none;
margin: 0;
padding: 0;
}
.fod-header-language__menu li[b-rnv47jnpdp] {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: var(--border-radius-8, 8px);
padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
transition: background-color 0.2s ease;
}
.fod-header-language__menu li:hover[b-rnv47jnpdp] {
background-color: var(--gray-100, #f3f4f6);
}
.fod-header-language__menu li:hover a[b-rnv47jnpdp] {
color: var(--blue-sky-600, #0066cc);
}
.fod-header-language__menu a[b-rnv47jnpdp] {
color: var(--gray-700, #4b5563);
text-decoration: none;
font-size: var(--text-body-sm-font-size, 14px);
}
.fod-header-language__menu li.active[b-rnv47jnpdp] {
background-color: var(--blue-sky-100, #dbeafe);
}
.fod-header-language__menu li.active a[b-rnv47jnpdp] {
color: var(--blue-sky-600, #0066cc);
}
.fod-header-language__menu li.active[b-rnv47jnpdp] svg {
color: var(--blue-sky-600, #0066cc);
}
.fod-header-language__menu li[b-rnv47jnpdp] svg {
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
}
.fod-header-language__menu li.active[b-rnv47jnpdp] svg {
opacity: 1;
visibility: visible;
}
/* #endregion */
/* #region Profile */
.fod-header__profile[b-rnv47jnpdp] {
position: relative;
}
.fod-header-profile__toggle[b-rnv47jnpdp] {
background: none;
border: none;
padding: 0;
cursor: pointer;
border-radius: var(--border-radius-full, 999px);
}
.fod-header-profile__toggle:focus[b-rnv47jnpdp] {
outline: 2px solid var(--white, #fff);
outline-offset: 0;
box-shadow: 0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
.fod-header-profile__avatar[b-rnv47jnpdp] {
width: 40px;
height: 40px;
border-radius: var(--border-radius-full, 999px);
object-fit: cover;
}
.fod-header-profile__avatar--placeholder[b-rnv47jnpdp] {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--gray-300, #d1d5db);
color: var(--gray-700, #4b5563);
font-weight: 600;
font-size: var(--text-body-sm-font-size, 14px);
}
.fod-header-profile-dropdown[b-rnv47jnpdp] {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--white, #fff);
border-radius: var(--border-radius-16, 16px);
box-shadow: var(--drop-shadow-300, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
width: 350px;
z-index: 1150;
animation: fadeIn-b-rnv47jnpdp 0.2s ease;
overflow: hidden;
}
.fod-header-profile-dropdown__header[b-rnv47jnpdp] {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-24, 24px);
padding: var(--spacing-40, 40px) var(--spacing-24, 24px) var(--spacing-32, 32px);
text-align: center;
}
.fod-header-profile-dropdown__avatar[b-rnv47jnpdp] {
width: 80px;
height: 80px;
border-radius: var(--border-radius-full, 999px);
object-fit: cover;
}
.fod-header-profile-dropdown__avatar--placeholder[b-rnv47jnpdp] {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--gray-300, #d1d5db);
color: var(--gray-700, #4b5563);
font-weight: 600;
font-size: var(--text-heading-h4-xs-font-size, 24px);
}
.fod-header-profile-dropdown__info[b-rnv47jnpdp] {
display: flex;
flex-direction: column;
gap: var(--spacing-4, 4px);
}
.fod-header-profile-dropdown__name[b-rnv47jnpdp] {
margin: 0;
font-size: var(--text-heading-h4-xs-font-size, 20px);
font-weight: 600;
color: var(--black, #000);
}
.fod-header-profile-dropdown__role[b-rnv47jnpdp] {
margin: 0;
color: var(--gray-600, #6b7280);
font-size: var(--text-body-sm-font-size, 14px);
}
.fod-header-profile-dropdown__actions[b-rnv47jnpdp] {
display: flex;
gap: var(--spacing-12, 12px);
}
.fod-header-profile-dropdown__divider[b-rnv47jnpdp] {
border: none;
border-top: 1px solid var(--gray-200, #e5e7eb);
margin: 0;
}
.fod-header-profile-dropdown__identities[b-rnv47jnpdp] {
display: flex;
flex-direction: column;
gap: var(--spacing-16, 16px);
padding: var(--spacing-32, 32px) var(--spacing-24, 24px) var(--spacing-24, 24px);
}
.fod-header-profile-dropdown__section-title[b-rnv47jnpdp] {
font-size: var(--text-body-lg-500-font-size, 16px);
font-weight: 500;
color: var(--gray-800, #374151);
}
.fod-header-profile-dropdown__identity-list[b-rnv47jnpdp] {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-12, 12px);
}
.fod-header-profile-dropdown__identity-item[b-rnv47jnpdp] {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-16, 16px) var(--spacing-24, 24px) var(--spacing-16, 16px) var(--spacing-16, 16px);
border: var(--border-width-1-5, 1.5px) var(--border-style-solid, solid) var(--gray-200, #e5e7eb);
border-radius: var(--border-radius-8, 8px);
cursor: pointer;
transition: background 0.2s;
}
.fod-header-profile-dropdown__identity-item:hover[b-rnv47jnpdp] {
background: var(--gray-100, #f3f4f6);
}
.fod-header-profile-dropdown__identity-item.active[b-rnv47jnpdp] {
border-color: var(--blue-sky-600, #0066cc);
border-width: var(--border-width-2, 2px);
background: var(--blue-sky-100, #dbeafe);
}
.fod-header-profile-dropdown__identity-info[b-rnv47jnpdp] {
display: flex;
align-items: center;
gap: var(--spacing-16, 16px);
}
.fod-header-profile-dropdown__identity-avatar[b-rnv47jnpdp] {
width: 32px;
height: 32px;
border-radius: var(--border-radius-full, 999px);
object-fit: cover;
}
.fod-header-profile-dropdown__identity-icon[b-rnv47jnpdp] {
display: inline-flex;
padding: var(--spacing-8, 8px);
background-color: var(--gray-200, #e5e7eb);
border-radius: var(--border-radius-full, 999px);
color: var(--gray-500, #9ca3af);
}
.fod-header-profile-dropdown__identity-item.active .fod-header-profile-dropdown__identity-icon[b-rnv47jnpdp] {
background-color: var(--blue-sky-200, #bfdbfe);
color: var(--blue-sky-600, #0066cc);
}
.fod-header-profile-dropdown__identity-details[b-rnv47jnpdp] {
display: flex;
flex-direction: column;
gap: var(--spacing-4, 4px);
}
.fod-header-profile-dropdown__identity-name[b-rnv47jnpdp] {
font-size: var(--text-body-lg-font-size, 16px);
font-weight: 500;
color: var(--black, #000);
}
.fod-header-profile-dropdown__identity-id[b-rnv47jnpdp] {
font-size: var(--text-body-sm-font-size, 14px);
color: var(--gray-400, #9ca3af);
}
.fod-header-profile-dropdown__check[b-rnv47jnpdp] {
color: var(--blue-sky-600, #0066cc);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s;
}
.fod-header-profile-dropdown__identity-item.active .fod-header-profile-dropdown__check[b-rnv47jnpdp] {
opacity: 1;
visibility: visible;
}
.fod-header-profile-dropdown__footer[b-rnv47jnpdp] {
padding: var(--spacing-16, 16px) var(--spacing-24, 24px) var(--spacing-24, 24px);
}
/* #endregion */
/* #region Search */
.fod-header__search-inline[b-rnv47jnpdp] {
flex: 1;
max-width: 600px;
}
.fod-header__search-inline[b-rnv47jnpdp] .fod-input {
width: 100%;
}
.fod-header__search-inline[b-rnv47jnpdp] .fod-input-wrapper {
background: var(--white, #fff) !important;
border-radius: var(--border-radius-full, 999px) !important;
border: 1px solid var(--gray-300, #d1d5db) !important;
padding: var(--spacing-8, 8px) var(--spacing-12, 12px) !important;
min-height: 40px;
}
.fod-header__search-inline[b-rnv47jnpdp] .fod-input-wrapper:hover {
border-color: var(--gray-400, #9ca3af) !important;
}
.fod-header__search-inline[b-rnv47jnpdp] .fod-input-wrapper:focus-within {
border-color: var(--blue-sky-500, #3379DB) !important;
box-shadow: 0 0 0 2px var(--blue-sky-100, #dbeafe) !important;
}
.fod-header__search-inline[b-rnv47jnpdp] .fod-input-control {
font-size: var(--text-body-md-font-size, 14px);
}
.fod-header-search-overlay[b-rnv47jnpdp] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1200;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 15vh;
animation: fadeIn-b-rnv47jnpdp 0.2s ease;
}
.fod-header-search-modal[b-rnv47jnpdp] {
background: var(--white, #fff);
border-radius: var(--border-radius-16, 16px);
padding: var(--spacing-24, 24px) var(--spacing-32, 32px);
width: 90%;
max-width: 600px;
animation: slideDown-b-rnv47jnpdp 0.2s ease;
}
.fod-header-search-input[b-rnv47jnpdp] {
display: flex;
align-items: center;
gap: var(--spacing-12, 12px);
background: var(--gray-100, #f3f4f6);
border-radius: var(--border-radius-full, 999px);
padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
}
.fod-header-search-input__icon[b-rnv47jnpdp] {
color: var(--gray-500, #9ca3af);
}
.fod-header-search-input__field[b-rnv47jnpdp] {
flex: 1;
border: none;
background: transparent;
font-size: var(--text-body-lg-font-size, 16px);
color: var(--gray-900, #111827);
outline: none;
}
.fod-header-search-input__field[b-rnv47jnpdp]::placeholder {
color: var(--gray-400, #9ca3af);
}
.fod-header-search-input__clear[b-rnv47jnpdp] {
background: none;
border: none;
padding: var(--spacing-4, 4px);
cursor: pointer;
color: var(--gray-500, #9ca3af);
border-radius: var(--border-radius-full, 999px);
transition: background-color 0.2s ease;
}
.fod-header-search-input__clear:hover[b-rnv47jnpdp] {
background-color: var(--gray-200, #e5e7eb);
}
/* #endregion */
/* #region Utilities */
.stretched-link[b-rnv47jnpdp]::after {
position: absolute;
inset: 0;
z-index: 1;
content: "";
background: transparent;
pointer-events: auto;
}
/* #endregion */
/* #region Animations */
@keyframes fadeIn-b-rnv47jnpdp {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideDown-b-rnv47jnpdp {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* #endregion */
/* #region Responsive - Mobile */
@media (max-width: 767px) {
.fod-header-profile-dropdown[b-rnv47jnpdp] {
width: 100%;
right: 0;
left: 0;
margin: 0 auto;
}
.fod-header-profile-dropdown__header[b-rnv47jnpdp] {
padding: var(--spacing-32, 32px) var(--spacing-16, 16px) var(--spacing-24, 24px);
}
.fod-header-profile-dropdown__identities[b-rnv47jnpdp] {
padding: var(--spacing-24, 24px) var(--spacing-16, 16px);
}
.fod-header-profile-dropdown__identity-item[b-rnv47jnpdp] {
padding: var(--spacing-12, 12px) var(--spacing-20, 20px) var(--spacing-12, 12px) var(--spacing-12, 12px);
}
.fod-header-profile-dropdown__identity-name[b-rnv47jnpdp] {
font-size: var(--text-body-md-font-size, 14px);
}
.fod-header-profile-dropdown__identity-id[b-rnv47jnpdp] {
font-size: var(--text-caption-md-font-size, 12px);
}
.fod-header-platform-panel[b-rnv47jnpdp] {
min-width: auto;
width: calc(100vw - 32px);
max-width: 400px;
}
.fod-header-platform-grid__image[b-rnv47jnpdp] {
height: var(--spacing-32, 32px);
width: var(--spacing-32, 32px);
}
.fod-header-platform-grid__image img[b-rnv47jnpdp] {
width: 100%;
}
.fod-header-platform-grid__item[b-rnv47jnpdp] {
padding: var(--spacing-8, 8px) var(--spacing-12, 12px);
}
.fod-header-platform-grid__title[b-rnv47jnpdp] {
font-size: var(--text-body-sm-500-font-size, 14px);
}
}
/* #endregion */
/* #region Nav Wrap */
.fod-header__wrapper--nav-wrapped > .fod-header__actions[b-rnv47jnpdp] {
order: 1;
}
/* #endregion */
/* #region Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.fod-header__wrapper[b-rnv47jnpdp],
.fod-header__actions[b-rnv47jnpdp],
.fod-header__actions-icons[b-rnv47jnpdp] {
transition: none;
}
.fod-header__nav-bar[b-rnv47jnpdp] {
animation: none;
}
}
/* #endregion */
/* #region Display Utilities */
.d-none[b-rnv47jnpdp] {
display: none !important;
}
.d-flex[b-rnv47jnpdp] {
display: flex !important;
}
@media (min-width: 851px) {
.d-md-none[b-rnv47jnpdp] {
display: none !important;
}
.d-md-flex[b-rnv47jnpdp] {
display: flex !important;
}
}
@media (min-width: 1024px) {
.d-lg-none[b-rnv47jnpdp] {
display: none !important;
}
.d-lg-flex[b-rnv47jnpdp] {
display: flex !important;
}
.d-lg-block[b-rnv47jnpdp] {
display: block !important;
}
}
/* #endregion */
/* _content/FOD.UIComponents/Components/Header/Help/FodHeaderHelp.razor.rz.scp.css */
/* #region Container */
.fod-header-help[b-b3rscm5oij] {
position: relative;
display: flex;
align-items: center;
}
.fod-header-help__toggle[b-b3rscm5oij] {
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-8, 8px);
border: none;
background: transparent;
cursor: pointer;
border-radius: var(--border-radius-8, 8px);
transition: background-color var(--transition-duration-fast, 150ms) ease;
}
.fod-header-help__toggle:hover[b-b3rscm5oij] {
background-color: var(--color-background-base-secondary, var(--gray-100, #f3f4f6));
}
.fod-header-help__toggle:focus[b-b3rscm5oij] {
outline: 2px solid var(--focus-ring, var(--blue-sky-500, #3379DB));
outline-offset: 2px;
}
/* #endregion */
/* #region Panel */
.fod-header-help-panel[b-b3rscm5oij] {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 200px;
background-color: var(--color-background-base-default, var(--white, #fff));
border-radius: var(--border-radius-8, 8px);
box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
z-index: var(--z-index-dropdown, 1150);
animation: fadeIn-b-b3rscm5oij var(--transition-duration-fast, 150ms) ease;
}
/* #endregion */
/* #region Menu */
.fod-header-help-menu[b-b3rscm5oij] {
list-style: none;
margin: 0;
padding: var(--spacing-8, 8px);
}
.fod-header-help-menu li[b-b3rscm5oij] {
margin: 0;
}
[b-b3rscm5oij] .fod-header-help-menu__link {
display: block;
padding: var(--spacing-10, 10px) var(--spacing-12, 12px);
border-radius: var(--border-radius-4, 4px);
text-decoration: none;
text-align: start;
color: var(--color-text-base-default, var(--gray-900, #111827));
font-size: var(--text-body-font-size, 14px);
transition: background-color var(--transition-duration-fast, 150ms) ease;
}
[b-b3rscm5oij] .fod-header-help-menu__link:hover {
background-color: var(--color-background-base-secondary, var(--gray-100, #f3f4f6)) !important;
}
[b-b3rscm5oij] .fod-header-help-menu__link:focus {
outline: 2px solid var(--focus-ring, var(--blue-sky-500, #3379DB)) !important;
outline-offset: -2px !important;
}
/* #endregion */
/* #region Animations */
@keyframes fadeIn-b-b3rscm5oij {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* #endregion */
/* #region Accessibility */
@media (prefers-reduced-motion: reduce) {
.fod-header-help-panel[b-b3rscm5oij] {
animation: none;
}
}
/* #endregion */
/* _content/FOD.UIComponents/Components/Header/Language/FodHeaderLanguage.razor.rz.scp.css */
/*
* FodHeaderLanguage CSS overrides for FodLanguageSwitch
* This component wraps FodLanguageSwitch and applies header-specific styling.
*/
.fod-pre-header__link[b-lad76ndg9v] {
color: var(--color-text-base-default, var(--gray-900, #111827));
font-weight: 500;
font-size: var(--text-caption-font-size, 12px);
line-height: var(--spacing-16);
}
/* _content/FOD.UIComponents/Components/Header/Links/FodHeaderLinks.razor.rz.scp.css */
/* #region Container */
.fod-header-links[b-eosh79zikr] {
display: flex;
align-items: center;
gap: var(--spacing-16, 16px);
animation: fadeInLinks-b-eosh79zikr var(--transition-duration-fast, 150ms) ease;
}
@keyframes fadeInLinks-b-eosh79zikr {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* #endregion */
/* #region Links List */
.fod-header-links__list[b-eosh79zikr] {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: var(--spacing-0, 0);
list-style: none;
margin: 0;
padding: 0;
}
.fod-header-links__item[b-eosh79zikr] {
position: relative;
margin: 0;
}
/* #endregion */
/* #region Link Styles */
.fod-header-links__link[b-eosh79zikr] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-6, 6px);
padding: var(--spacing-0, 0) var(--spacing-16, 16px);
height: var(--spacing-72, 72px);
border: none;
background: transparent;
cursor: pointer;
border-radius: 0;
text-decoration: none;
color: var(--color-text-base-default, var(--black, #121212));
font-size: var(--text-body-md-500-font-size, 16px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--spacing-24, 24px);
white-space: nowrap;
transition: background-color var(--transition-duration-fast, 150ms) ease,
color var(--transition-duration-fast, 150ms) ease;
}
.fod-header-links__link--has-children[b-eosh79zikr] {
padding-left: var(--spacing-16, 16px);
padding-right: var(--spacing-8, 8px);
}
.fod-header-links__link:hover[b-eosh79zikr] {
background-color: var(--color-background-base-secondary, var(--gray-100, #f5f5f5));
}
.fod-header-links__link:focus[b-eosh79zikr] {
outline: none;
}
.fod-header-links:not(.fod-header-links--vertical) .fod-header-links__link--has-children.is-open[b-eosh79zikr] {
color: var(--blue-sky-600, #0058d2);
background-color: var(--color-background-base-default-hover, var(--gray-100, #f5f5f5));
box-shadow: inset 0 calc(-1 * var(--border-width-3, 3px)) 0 0 var(--color-border-brand-default, var(--blue-sky-600, #0058d2));
}
.fod-header-links__chevron[b-eosh79zikr] {
transition: transform var(--transition-duration-fast, 150ms) ease;
}
.fod-header-links__link--has-children.is-open .fod-header-links__chevron[b-eosh79zikr] {
transform: rotate(180deg);
}
.fod-header-links__external[b-eosh79zikr] {
opacity: 0.6;
margin-inline-start: var(--spacing-4, 4px);
}
/* #endregion */
/* #region Dropdown */
.fod-header-links__dropdown[b-eosh79zikr] {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 200px;
max-width: 280px;
max-height: 20rem;
overflow: auto;
background-color: var(--color-background-base-default, var(--white, #fff));
border-radius: var(--border-radius-8, 8px);
box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
z-index: var(--z-index-dropdown, 1150);
list-style: none;
padding: var(--spacing-8, 8px);
animation: fadeIn-b-eosh79zikr var(--transition-duration-fast, 150ms) ease;
margin: 0 0 16px;
}
.fod-header-links__dropdown-item[b-eosh79zikr] {
margin: 0;
}
.fod-header-links__dropdown-link[b-eosh79zikr] {
display: flex;
align-items: center;
gap: var(--spacing-8, 8px);
width: 100%;
padding: var(--spacing-10, 10px) var(--spacing-12, 12px);
border: none;
background: transparent;
cursor: pointer;
border-radius: var(--border-radius-4, 4px);
text-decoration: none;
color: var(--color-text-base-default, var(--gray-900, #111827));
font-size: var(--text-body-font-size, 14px);
text-align: start;
white-space: nowrap;
transition: background-color var(--transition-duration-fast, 150ms) ease;
}
.fod-header-links__dropdown-link:hover[b-eosh79zikr] {
background-color: var(--color-background-base-secondary, var(--gray-100, #f3f4f6));
}
.fod-header-links__dropdown-link:focus[b-eosh79zikr] {
outline: 2px solid var(--focus-ring, var(--blue-sky-500, #3379DB));
outline-offset: -2px;
}
/* #endregion */
/* #region Animations */
@keyframes fadeIn-b-eosh79zikr {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* #endregion */
/* #region Vertical Layout */
.fod-header-links--vertical[b-eosh79zikr] {
flex-direction: column;
gap: 0;
width: 100%;
}
.fod-header-links--vertical .fod-header-links__list[b-eosh79zikr] {
flex-direction: column;
width: 100%;
gap: 0;
}
.fod-header-links--vertical .fod-header-links__item[b-eosh79zikr] {
width: 100%;
border-bottom: 1px solid var(--color-border-base-default, var(--gray-200, #e5e7eb));
}
.fod-header-links--vertical .fod-header-links__item:last-child[b-eosh79zikr] {
border-bottom: none;
}
.fod-header-links--vertical .fod-header-links__link[b-eosh79zikr] {
width: 100%;
height: auto;
padding: var(--spacing-12, 12px) 0;
justify-content: space-between;
box-shadow: none;
background-color: transparent;
}
.fod-header-links--vertical .fod-header-links__link--has-children.is-open[b-eosh79zikr] {
box-shadow: none !important;
background-color: transparent;
color: inherit;
}
.fod-header-links--vertical .fod-btn[b-eosh79zikr] {
width: 100%;
justify-content: space-between;
}
.fod-header-links--vertical .fod-header-links__link:hover[b-eosh79zikr] {
background-color: transparent;
}
.fod-header-links--vertical .fod-header-links__dropdown[b-eosh79zikr] {
position: static;
box-shadow: none;
border-radius: 0;
max-width: none;
min-width: 0;
width: 100%;
padding: 0;
animation: none;
background-color: transparent;
}
.fod-header-links--vertical .fod-header-links__dropdown-item[b-eosh79zikr] {
border-bottom: 1px solid var(--color-border-base-default, var(--gray-200, #e5e7eb));
}
.fod-header-links--vertical .fod-header-links__dropdown-item:last-child[b-eosh79zikr] {
border-bottom: none;
}
.fod-header-links--vertical .fod-header-links__dropdown-link[b-eosh79zikr] {
padding: var(--spacing-12, 12px) 0 var(--spacing-12, 12px) var(--spacing-16, 16px);
border-radius: 0;
width: 100%;
justify-content: flex-start;
}
.fod-header-links--vertical .fod-header-links__dropdown-link:hover[b-eosh79zikr] {
background-color: transparent;
}
/* #endregion */
/* #region Responsive */
@media (max-width: 1279px) {
.fod-header-links__link[b-eosh79zikr] {
padding: var(--spacing-0, 0) var(--spacing-12, 12px);
font-size: var(--text-body-sm-500-font-size, 14px);
height: var(--spacing-64, 64px);
}
}
/* #endregion */
/* #region Accessibility */
@media (prefers-reduced-motion: reduce) {
.fod-header-links[b-eosh79zikr],
.fod-header-links__dropdown[b-eosh79zikr],
.fod-header-links__chevron[b-eosh79zikr] {
animation: none;
transition: none;
}
}
/* #endregion */
/* _content/FOD.UIComponents/Components/Header/Mobile/FodHeaderMobile.razor.rz.scp.css */
/* #region Backdrop */
.fod-header-mobile-backdrop[b-cu67d7ysu7] {
position: fixed;
top: calc(var(--spacing-72, 72px) + 1px);
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-duration-fast, 150ms) ease,
visibility var(--transition-duration-fast, 150ms) ease;
z-index: var(--z-index-drawer-backdrop, 1000);
}
.fod-header-mobile-backdrop--visible[b-cu67d7ysu7] {
opacity: 1;
visibility: visible;
}
/* #endregion */
/* #region Panel */
.fod-header-mobile[b-cu67d7ysu7] {
position: fixed;
top: calc(var(--spacing-72, 72px) + 1px);
right: 0;
bottom: 0;
width: 100%;
background-color: var(--color-background-base-default, var(--white, #fff));
box-shadow: none;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: transform var(--transition-duration-normal, 50ms) ease-out,
opacity var(--transition-duration-normal, 50ms) ease-out,
visibility var(--transition-duration-normal, 50ms) ease-out;
z-index: var(--z-index-drawer, 1010);
overflow-y: auto;
overscroll-behavior: contain;
}
.fod-header-mobile--open[b-cu67d7ysu7] {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
/* #endregion */
/* #region Content */
.fod-header-mobile__content[b-cu67d7ysu7] {
display: flex;
flex-direction: column;
min-height: 100%;
padding: var(--spacing-16, 16px) 0;
}
.fod-header-mobile__search[b-cu67d7ysu7] {
padding: 0 var(--spacing-16, 16px);
margin-bottom: var(--spacing-16, 16px);
}
.fod-header-mobile__search[b-cu67d7ysu7] .fod-input-wrapper {
border-radius: var(--border-radius-full, 999px) !important;
}
.fod-header-mobile__nav[b-cu67d7ysu7] {
padding: 0 var(--spacing-16, 16px);
margin-bottom: var(--spacing-16, 16px);
}
/* #endregion */
/* #region Back Button */
.fod-header-mobile__back[b-cu67d7ysu7] {
padding: 0 var(--spacing-16, 16px);
margin-bottom: var(--spacing-8, 8px);
}
.fod-header-mobile__back-btn[b-cu67d7ysu7] {
display: inline-flex;
align-items: center;
gap: var(--spacing-4, 4px);
padding: var(--spacing-8, 8px) var(--spacing-12, 12px);
border-radius: var(--border-radius-full, 999px);
font-size: var(--text-body-font-size, 14px);
font-weight: 500;
color: var(--color-text-base-default);
background-color: var(--color-background-base-secondary, var(--gray-100, #f3f4f6));
transition: background-color var(--transition-duration-fast, 150ms) ease;
}
.fod-header-mobile__back-btn:hover[b-cu67d7ysu7] {
background-color: var(--color-background-base-tertiary, var(--gray-200, #e5e7eb));
}
.fod-header-mobile__back-btn:focus[b-cu67d7ysu7] {
outline: 2px solid var(--focus-ring, var(--blue-sky-500, #3379DB));
outline-offset: 2px;
}
/* #endregion */
/* #region Action Links */
.fod-header-mobile__section--actions[b-cu67d7ysu7] {
display: flex;
flex-direction: column;
gap: var(--spacing-4, 4px);
}
.fod-header-mobile__action-link[b-cu67d7ysu7] {
display: flex;
align-items: center;
gap: var(--spacing-12, 12px);
width: 100%;
padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
border: none;
background: none;
cursor: pointer;
font-size: var(--text-body-font-size, 14px);
font-weight: 500;
color: var(--color-text-base-default);
text-align: start;
transition: background-color var(--transition-duration-fast, 150ms) ease;
}
.fod-header-mobile__action-link:hover[b-cu67d7ysu7] {
background-color: var(--color-background-base-secondary, var(--gray-100, #f3f4f6));
}
.fod-header-mobile__action-link:focus[b-cu67d7ysu7] {
outline: 2px solid var(--focus-ring, var(--blue-sky-500, #3379DB));
outline-offset: -2px;
}
.fod-header-mobile__action-link span[b-cu67d7ysu7] {
flex: 1;
}
.fod-header-mobile__action-chevron[b-cu67d7ysu7] {
color: var(--color-text-base-tertiary, var(--gray-400, #9ca3af));
}
/* #endregion */
/* #region Sections */
.fod-header-mobile__section[b-cu67d7ysu7] {
padding: var(--spacing-16, 16px);
}
.fod-header-mobile__section:last-of-type[b-cu67d7ysu7] {
border-bottom: none;
}
.fod-header-mobile__section:first-of-type[b-cu67d7ysu7] {
border-top: none;
}
.fod-header-mobile__section-title[b-cu67d7ysu7] {
margin: 0 0 var(--spacing-12, 12px) 0;
padding: 0;
font-size: var(--text-body-font-size, 14px);
font-weight: 600;
color: var(--color-text-base-default, var(--gray-900, #111827));
text-transform: none;
letter-spacing: normal;
}
.fod-header-mobile__section--nav[b-cu67d7ysu7] {
border-bottom: 1px solid var(--color-border-base-default, var(--gray-200, #e5e7eb));
}
/* #endregion */
/* #region Links */
.fod-header-mobile__list[b-cu67d7ysu7] {
list-style: none;
margin: 0;
padding: 0;
}
.fod-header-mobile__list li[b-cu67d7ysu7] {
margin-bottom: var(--spacing-4, 4px);
}
.fod-header-mobile__list li:last-child[b-cu67d7ysu7] {
margin-bottom: 0;
}
.fod-header-mobile__link[b-cu67d7ysu7] {
display: flex;
align-items: center;
gap: var(--spacing-12, 12px);
padding: var(--spacing-12, 12px);
border-radius: var(--border-radius-8, 8px);
text-decoration: none;
color: var(--color-text-base-default, var(--gray-900, #111827));
font-size: var(--text-body-font-size, 14px);
font-weight: 500;
transition: background-color var(--transition-duration-fast, 150ms) ease;
}
.fod-header-mobile__link:hover[b-cu67d7ysu7] {
background-color: var(--color-background-base-secondary, var(--gray-100, #f3f4f6));
}
.fod-header-mobile__link:focus[b-cu67d7ysu7] {
outline: 2px solid var(--focus-ring, var(--blue-sky-500, #3379DB));
outline-offset: 2px;
}
.fod-header-mobile__link:active[b-cu67d7ysu7] {
background-color: var(--color-background-base-tertiary, var(--gray-200, #e5e7eb));
}
.fod-header-mobile__link-icon[b-cu67d7ysu7] {
width: 24px;
height: 24px;
flex-shrink: 0;
object-fit: contain;
}
.fod-header-mobile__link-text[b-cu67d7ysu7] {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* #endregion */
/* #region Platform Grid */
.fod-header-mobile__platform-grid[b-cu67d7ysu7] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-8, 8px);
}
.fod-header-mobile__platform-item[b-cu67d7ysu7] {
position: relative;
}
.fod-header-mobile__platform-link[b-cu67d7ysu7] {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-8, 8px);
padding: var(--spacing-12, 12px);
width: 100%;
border-radius: var(--border-radius-12, 12px);
text-decoration: none;
background-color: transparent;
transition: background-color var(--transition-duration-fast, 150ms) ease;
}
.fod-header-mobile__platform-link:hover[b-cu67d7ysu7] {
background-color: var(--color-background-base-tertiary, var(--gray-200, #e5e7eb));
}
.fod-header-mobile__platform-link:focus[b-cu67d7ysu7] {
outline: 2px solid var(--focus-ring, var(--blue-sky-500, #3379DB));
outline-offset: 2px;
}
.fod-header-mobile__platform-image[b-cu67d7ysu7] {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.fod-header-mobile__platform-image img[b-cu67d7ysu7] {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.fod-header-mobile__platform-content[b-cu67d7ysu7] {
text-align: center;
}
.fod-header-mobile__platform-title[b-cu67d7ysu7] {
font-size: var(--text-body-font-size, 14px);
font-weight: 500;
color: var(--color-text-base-default, var(--gray-900, #111827));
text-align: start;
}
.fod-header-mobile__platform-description[b-cu67d7ysu7] {
margin: var(--spacing-4, 4px) 0 0;
font-size: var(--text-caption-font-size, 12px);
color: var(--color-text-base-secondary, var(--gray-500, #6b7280));
text-align: start;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fod-header-mobile__platform-item[b-cu67d7ysu7] {
position: relative;
background-color: var(--color-background-base-secondary, var(--gray-100, #F5F5F5));
border-radius: var(--border-radius-12, 12px);
}
.fod-header-mobile__platform-footer[b-cu67d7ysu7] {
display: flex;
justify-content: center;
padding: var(--spacing-12, 12px) 0 0;
}
.fod-header-mobile__platform-footer[b-cu67d7ysu7] .fod-btn {
border-radius: var(--border-radius-full, 999px) !important;
}
/* #endregion */
/* #region Footer */
.fod-header-mobile__footer[b-cu67d7ysu7] {
display: flex;
flex-direction: column;
gap: var(--spacing-12, 12px);
margin-top: auto;
padding: var(--spacing-16, 16px);
}
/* #endregion */
/* #region Accessibility */
@media (prefers-reduced-motion: reduce) {
.fod-header-mobile[b-cu67d7ysu7],
.fod-header-mobile-backdrop[b-cu67d7ysu7] {
transition: none;
}
}
/* #endregion */
/* #region RTL Support */
[dir="rtl"] .fod-header-mobile[b-cu67d7ysu7] {
left: 0;
right: 0;
}
/* #endregion */
/* _content/FOD.UIComponents/Components/Header/NavMenu/FodHeaderNavMenu.razor.rz.scp.css */
/* #region Container */
.fod-nav[b-v017nhjcd3] {
display: flex;
align-items: center;
gap: var(--spacing-0, 0);
flex: 1 1 auto;
min-width: 200px;
}
/* #endregion */
/* #region Nav Item */
.fod-nav__item[b-v017nhjcd3] {
position: relative;
}
/* #endregion */
/* #region Nav Link */
.fod-nav__link[b-v017nhjcd3] {
display: inline-flex;
align-items: center;
gap: var(--spacing-8, 8px);
padding: var(--spacing-0, 0) var(--spacing-16, 16px);
height: var(--spacing-72, 72px);
border: none;
background: transparent;
cursor: pointer;
border-radius: 0;
text-decoration: none;
color: var(--color-text-base-default, var(--black, #121212));
font-family: inherit;
font-size: var(--text-body-md-500-font-size, 16px);
font-weight: var(--font-weight-medium, 500);
line-height: var(--spacing-24, 24px);
white-space: nowrap;
transition: background-color var(--transition-duration-fast, 150ms) ease,
color var(--transition-duration-fast, 150ms) ease;
}
.fod-nav__link:hover[b-v017nhjcd3] {
background-color: var(--color-background-base-secondary, var(--gray-100, #f5f5f5));
}
.fod-nav__link:focus[b-v017nhjcd3] {
outline: none;
}
.fod-nav__link:focus-visible[b-v017nhjcd3] {
outline: 2px solid var(--focus-ring, var(--blue-sky-500, #3379DB));
outline-offset: -2px;
}
.fod-nav__link.is-open[b-v017nhjcd3] {
color: var(--blue-sky-600, #0058d2);
background-color: var(--color-background-base-default-hover, var(--gray-100, #f5f5f5));
box-shadow: inset 0 calc(-1 * var(--border-width-3, 3px)) 0 0 var(--color-border-brand-default, var(--blue-sky-600, #0058d2));
}
.fod-nav__link.is-active[b-v017nhjcd3] {
color: var(--blue-sky-600, #0058d2);
box-shadow: inset 0 calc(-1 * var(--border-width-3, 3px)) 0 0 var(--color-border-brand-default, var(--blue-sky-600, #0058d2));
}
/* #endregion */
/* #region Chevron Icon */
.fod-nav__icon[b-v017nhjcd3] {
display: inline-flex;
padding: var(--spacing-2, 2px);
}
[b-v017nhjcd3] .fod-nav__chevron {
transition: transform var(--transition-duration-fast, 150ms) ease;
}
.fod-nav__link.is-open[b-v017nhjcd3] .fod-nav__chevron {
transform: rotate(180deg);
}
/* #endregion */
/* #region Simple Dropdown Menu */
.fod-nav__menu[b-v017nhjcd3] {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 320px;
max-width: 320px;
max-height: min(20rem, calc(100dvh - var(--spacing-72, 72px) - 32px));
overflow: auto;
background-color: var(--color-background-base-default, var(--white, #fff));
border-radius: var(--border-radius-8, 8px);
box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
z-index: var(--z-index-dropdown, 1150);
padding: var(--spacing-8, 8px);
animation: navMenuFadeIn-b-v017nhjcd3 var(--transition-duration-fast, 150ms) ease;
}
/* #endregion */
/* #region Mega Menu (Full) */
.fod-nav__menu--full[b-v017nhjcd3] {
min-width: auto;
max-width: calc(100vw - 32px);
max-height: calc(90dvh - var(--spacing-72, 72px) - 42px);
overflow: auto;
padding: var(--spacing-24, 24px);
width: max-content;
}
.fod-nav__menu--full-width[b-v017nhjcd3] {
left: 0;
right: 0;
width: 100%;
}
/* Let mega menus escape the nav item and position against fod-header__wrapper */
.fod-nav__item--full-width[b-v017nhjcd3] {
position: static;
}
.fod-nav__item--full-width > .fod-nav__menu--full[b-v017nhjcd3] {
left: 0;
right: 0;
width: 100%;
top: calc(100% + 5px);
}
.fod-nav__menu-container[b-v017nhjcd3] {
max-width: var(--container-max-width, 1200px);
margin: 0 auto;
}
.fod-nav__menu-columns[b-v017nhjcd3] {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-24, 24px);
}
.fod-nav__menu-column[b-v017nhjcd3] {
min-width: 200px;
flex: 1;
}
/* #endregion */
/* #region Menu Heading & Separator */
.fod-nav__menu-heading[b-v017nhjcd3] {
font-size: var(--text-body-sm-600-font-size, 14px);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-base-default, var(--black, #121212));
padding: var(--spacing-4, 4px) 0;
}
.fod-nav__separator[b-v017nhjcd3] {
border: none;
border-top: 1px solid var(--color-border-base-subtle, var(--gray-200, #e5e7eb));
margin: var(--spacing-8, 8px) 0;
}
/* #endregion */
/* #region Submenu */
.fod-nav__submenu[b-v017nhjcd3] {
list-style: none;
margin: 0;
padding: 0;
}
.fod-nav__submenu li[b-v017nhjcd3] {
margin: 0;
}
/* #endregion */
/* #region Submenu Item */
.fod-nav__submenu-item[b-v017nhjcd3] {
display: block;
padding: var(--spacing-4);
color: var(--gray-700);
font-size: var(--text-body-md-font-size);
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
}
.fod-nav__submenu-item:hover[b-v017nhjcd3] {
text-decoration: underline;
color: var(--blue-sky-600, #0058d2);
}
.fod-nav__submenu-item:focus[b-v017nhjcd3] {
text-decoration: underline;
color: var(--blue-sky-600, #0058d2);
}
/* #endregion */
/* #region Animations */
@keyframes navMenuFadeIn-b-v017nhjcd3 {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* #endregion */
/* #region Responsive */
.fod-nav--wrapped[b-v017nhjcd3] {
order: 2;
flex-basis: 100%;
}
@media (max-width: 1279px) {
.fod-nav__link[b-v017nhjcd3] {
padding: var(--spacing-0, 0) var(--spacing-12, 12px);
font-size: var(--text-body-sm-500-font-size, 14px);
height: var(--spacing-64, 64px);
}
}
/* #endregion */
/* #region Accessibility */
@media (prefers-reduced-motion: reduce) {
.fod-nav__menu[b-v017nhjcd3],
[b-v017nhjcd3] .fod-nav__chevron {
animation: none;
transition: none;
}
}
/* #endregion */
/* _content/FOD.UIComponents/Components/Header/PlatformGrid/FodHeaderPlatformGrid.razor.rz.scp.css */
/* #region Container */
.fod-header-platforms[b-vl5mg3eau4] {
position: relative;
display: flex;
align-items: center;
}
.fod-header-platforms__toggle[b-vl5mg3eau4] {
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-8, 8px);
border: none;
background: transparent;
cursor: pointer;
border-radius: var(--border-radius-8, 8px);
transition: background-color var(--transition-duration-fast, 150ms) ease;
}
.fod-header-platforms__toggle:hover[b-vl5mg3eau4] {
background-color: var(--color-background-base-secondary, var(--gray-100, #f3f4f6));
}
.fod-header-platforms__toggle:focus[b-vl5mg3eau4] {
outline: 2px solid var(--focus-ring, var(--blue-sky-500, #3379DB));
outline-offset: 2px;
}
/* #endregion */
/* #region Panel */
.fod-header-platform-panel[b-vl5mg3eau4] {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 400px;
max-height: 80vh;
overflow-y: auto;
background-color: var(--color-background-base-default, var(--white, #fff));
border-radius: var(--border-radius-12, 12px);
box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
z-index: var(--z-index-dropdown, 1150);
animation: fadeIn-b-vl5mg3eau4 var(--transition-duration-fast, 150ms) ease;
}
.fod-header-platform-panel--end[b-vl5mg3eau4] {
left: auto;
right: 0;
}
.fod-header-platform-panel__title[b-vl5mg3eau4] {
padding: var(--spacing-16, 16px);
font-size: var(--text-body-lg-font-size, 16px);
font-weight: 600;
color: var(--color-text-base-default, var(--gray-900, #111827));
}
.fod-header-platform-panel-footer[b-vl5mg3eau4] {
display: flex;
justify-content: center;
padding: var(--spacing-12, 12px);
}
.fod-header-platform-panel__view-all[b-vl5mg3eau4] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-4, 4px);
padding: var(--spacing-12, 12px);
color: var(--blue-sky-500, #3379DB);
text-decoration: none;
font-size: var(--text-body-font-size, 14px);
font-weight: 500;
transition: background-color var(--transition-duration-fast, 150ms) ease;
}
/* #endregion */
/* #region Grid */
.fod-header-platform-grid[b-vl5mg3eau4] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-8, 8px);
padding: var(--spacing-12, 12px);
}
.fod-header-platform-grid__item[b-vl5mg3eau4] {
position: relative;
background-color: var(--color-background-base-secondary, var(--gray-100, #F5F5F5)) !important;
border-radius: var(--border-radius-12, 12px);
}
.fod-header-platform-grid__link[b-vl5mg3eau4] {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-8, 8px);
padding: var(--spacing-12, 12px);
border-radius: var(--border-radius-8, 8px);
text-decoration: none;
background-color: var(--color-background-base-secondary, var(--gray-100, #F5F5F5));
transition: background-color var(--transition-duration-fast, 150ms) ease;
}
.fod-header-platform-grid__link:hover[b-vl5mg3eau4] {
background-color: var(--color-background-base-tertiary, var(--gray-200, #e5e7eb));
}
.fod-header-platform-grid__link:focus[b-vl5mg3eau4] {
outline: 2px solid var(--focus-ring, var(--blue-sky-500, #3379DB));
outline-offset: 2px;
}
.fod-header-platform-grid__image[b-vl5mg3eau4] {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.fod-header-platform-grid__image img[b-vl5mg3eau4] {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.fod-header-platform-grid__content[b-vl5mg3eau4] {
text-align: start;
}
.fod-header-platform-grid__title[b-vl5mg3eau4] {
font-size: var(--text-body-font-size, 14px);
font-weight: 600;
color: var(--color-text-base-default, var(--gray-900, #111827));
}
.fod-header-platform-grid__description[b-vl5mg3eau4] {
margin: var(--spacing-4, 4px) 0 0;
font-size: var(--text-caption-font-size, 12px);
color: var(--color-text-base-secondary, var(--gray-500, #6b7280));
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* #endregion */
/* #region Animations */
@keyframes fadeIn-b-vl5mg3eau4 {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* #endregion */
/* #region Accessibility */
@media (prefers-reduced-motion: reduce) {
.fod-header-platform-panel[b-vl5mg3eau4] {
animation: none;
}
}
/* #endregion */
/* #region Responsive */
@media (max-width: 575px) {
.fod-header-platform-panel[b-vl5mg3eau4] {
width: calc(100vw - 32px);
max-width: 380px;
}
}
/* #endregion */
/* _content/FOD.UIComponents/Components/Header/Profile/FodHeaderProfile.razor.rz.scp.css */
/* #region Container */
.fod-header-profile[b-eklccak37a] {
position: relative;
display: flex;
align-items: center;
}
/* #endregion */
/* #region Toggle Button */
.fod-header-profile__toggle[b-eklccak37a] {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
border-radius: 50%;
transition: box-shadow var(--transition-duration-fast, 150ms) ease;
}
.fod-header-profile__toggle:focus[b-eklccak37a] {
outline: none;
box-shadow: 0 0 0 2px var(--white, #fff),
0 0 0 4px var(--focus-ring, var(--blue-sky-500, #3379DB));
}
/* #endregion */
/* #region Avatar */
.fod-header-profile__avatar[b-eklccak37a] {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.fod-header-profile__avatar--placeholder[b-eklccak37a] {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--blue-sky-500, #3379DB);
color: var(--white, #fff);
font-weight: 600;
font-size: var(--text-body-font-size, 14px);
}
/* #endregion */
/* #region Dropdown */
.fod-header-profile-dropdown[b-eklccak37a] {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 486px;
background-color: var(--color-background-base-default, var(--white, #fff));
border-radius: 16px;
box-shadow:
0px 8px 16px 0px rgba(0, 0, 0, 0.08),
0px 2px 4px 0px rgba(0, 0, 0, 0.04);
border: none;
z-index: var(--z-index-dropdown, 1150);
animation: fadeIn-b-eklccak37a var(--transition-duration-fast, 150ms) ease;
}
/* #endregion */
/* #region Dropdown Header */
.fod-header-profile-dropdown__header[b-eklccak37a] {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 40px 24px 24px 24px;
text-align: center;
}
.fod-header-profile-dropdown__avatar[b-eklccak37a] {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.fod-header-profile-dropdown__avatar--placeholder[b-eklccak37a] {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--blue-sky-500, #3379DB);
color: var(--white, #fff);
font-weight: 600;
font-size: var(--text-body-lg-font-size, 16px);
}
.fod-header-profile-dropdown__info[b-eklccak37a] {
flex: 1;
min-width: 0;
}
.fod-header-profile-dropdown__name[b-eklccak37a] {
margin: 0;
font-size: var(--text-body-lg-font-size, 16px);
font-weight: 600;
color: var(--color-text-base-default, var(--gray-900, #111827));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fod-header-profile-dropdown__role[b-eklccak37a] {
margin: 0;
font-size: var(--text-caption-font-size, 12px);
color: var(--color-text-base-secondary, var(--gray-500, #6b7280));
}
/* #endregion */
/* #region Divider */
.fod-header-profile-dropdown__divider[b-eklccak37a] {
margin: 0;
border: none;
border-top: 1px solid var(--color-border-base-secondary, var(--gray-200, #e5e7eb));
}
/* #endregion */
/* #region Identities */
.fod-header-profile-dropdown__identities[b-eklccak37a] {
display: flex;
flex-direction: column;
gap: 16px;
padding: 32px 24px 24px 24px;
}
.fod-header-profile-dropdown__section-title[b-eklccak37a] {
font-size: var(--text-caption-font-size, 12px);
font-weight: 600;
color: var(--color-text-base-secondary, var(--gray-500, #6b7280));
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0;
}
.fod-header-profile-dropdown__identity-list[b-eklccak37a] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.fod-header-profile-dropdown__identity-item[b-eklccak37a] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px 16px 16px;
gap: 12px;
border-radius: 12px;
cursor: pointer;
background-color: var(--color-background-base-default, var(--white, #FFFFFF));
border: none;
transition: all var(--transition-duration-fast, 150ms) ease;
}
.fod-header-profile-dropdown__identity-item:hover[b-eklccak37a] {
background-color: var(--color-background-base-secondary, var(--gray-50, #f9fafb));
}
.fod-header-profile-dropdown__identity-item.active[b-eklccak37a] {
background-color: var(--color-background-brand-subtle, var(--blue-sky-50, #E8F0FB));
border: 2px solid var(--color-border-brand-default, var(--blue-sky-600, #0058D2));
}
.fod-header-profile-dropdown__identity-info[b-eklccak37a] {
display: flex;
align-items: center;
gap: var(--spacing-12, 12px);
min-width: 0;
flex: 1;
}
.fod-header-profile-dropdown__identity-avatar[b-eklccak37a] {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.fod-header-profile-dropdown__identity-icon[b-eklccak37a] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--color-background-base-secondary, var(--gray-100, #f3f4f6));
color: var(--color-text-base-secondary, var(--gray-500, #6b7280));
flex-shrink: 0;
}
.fod-header-profile-dropdown__identity-details[b-eklccak37a] {
min-width: 0;
flex: 1;
}
.fod-header-profile-dropdown__identity-name[b-eklccak37a] {
font-size: var(--text-body-font-size, 14px);
font-weight: 500;
color: var(--color-text-base-default, var(--gray-900, #111827));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fod-header-profile-dropdown__identity-id[b-eklccak37a] {
font-size: var(--text-caption-font-size, 12px);
color: var(--color-text-base-secondary, var(--gray-500, #6b7280));
}
.fod-header-profile-dropdown__check[b-eklccak37a] {
flex-shrink: 0;
color: var(--blue-sky-500, #3379DB);
}
/* #endregion */
/* #region Footer */
.fod-header-profile-dropdown__footer[b-eklccak37a] {
padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
}
/* #endregion */
/* #region Mobile Variant */
@media (max-width: 768px) {
.fod-header-profile-dropdown[b-eklccak37a] {
width: 100%;
left: 0;
right: 0;
border-radius: 0;
}
.fod-header-profile-dropdown__identity-item[b-eklccak37a] {
border: none;
border-radius: 12px;
}
.fod-header-profile-dropdown__identity-item.active[b-eklccak37a] {
border: 2px solid var(--color-border-brand-default, var(--blue-sky-600, #0058D2));
}
}
/* #endregion */
/* #region Animations */
@keyframes fadeIn-b-eklccak37a {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* #endregion */
/* #region Accessibility */
@media (prefers-reduced-motion: reduce) {
.fod-header-profile-dropdown[b-eklccak37a] {
animation: none;
}
}
/* #endregion */
/* _content/FOD.UIComponents/Components/Header/Search/FodHeaderSearch.razor.rz.scp.css */
.fod-header-search[b-lctedrjo3g] {
position: relative;
display: flex;
align-items: center;
}
.fod-header-search__toggle[b-lctedrjo3g] {
flex-shrink: 0;
}
/* _content/FOD.UIComponents/Components/Header/Search/FodHeaderSearchDialog.razor.rz.scp.css */
.fod-header-search-dialog[b-mhtosskkn1] {
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-24, 24px) var(--spacing-16, 16px);
}
/* _content/FOD.UIComponents/Components/Icon/FodIcon.razor.rz.scp.css */
/*#region Base Styles */
.fod-icon[b-pryrjid049] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
fill: currentColor;
flex-shrink: 0;
vertical-align: middle;
line-height: 1;
transform-origin: center;
}
.fod-icon use[b-pryrjid049] {
width: 100%;
height: 100%;
}
/*#endregion Base Styles */
/*#region Size Modifiers */
.fod-icon--xs[b-pryrjid049] {
transform: scale(0.5); /* 12/24 = 0.5 */
}
.fod-icon--sm[b-pryrjid049] {
transform: scale(0.6667); /* 16/24 = 0.6667 */
}
.fod-icon--md[b-pryrjid049] {
transform: scale(0.8333); /* 20/24 = 0.8333 */
}
/* Default (24px) has no modifier - uses base 24px */
.fod-icon--lg[b-pryrjid049] {
transform: scale(1.3333); /* 32/24 = 1.3333 */
}
/* Custom size uses inline width/height (for SizePixels parameter) */
.fod-icon--custom[b-pryrjid049] {
width: var(--fod-icon-size);
height: var(--fod-icon-size);
transform: none;
}
/*#endregion Size Modifiers */
/*#region Color Modifiers */
.fod-icon--base[b-pryrjid049] {
color: var(--color-icon-base-default);
}
.fod-icon--secondary[b-pryrjid049] {
color: var(--color-icon-base-secondary);
}
.fod-icon--brand[b-pryrjid049] {
color: var(--color-icon-brand-default);
}
.fod-icon--positive[b-pryrjid049] {
color: var(--color-icon-positive-default);
}
.fod-icon--warning[b-pryrjid049] {
color: var(--color-icon-warning-default);
}
.fod-icon--danger[b-pryrjid049] {
color: var(--color-icon-danger-default);
}
.fod-icon--disabled[b-pryrjid049] {
color: var(--color-icon-disabled-default);
}
/*#endregion Color Modifiers */
/*#region Rotation Modifiers */
.fod-icon--rotate-90[b-pryrjid049] {
transform: rotate(90deg);
}
.fod-icon--rotate-180[b-pryrjid049] {
transform: rotate(180deg);
}
.fod-icon--rotate-270[b-pryrjid049] {
transform: rotate(270deg);
}
/*#endregion Rotation Modifiers */
/*#region Flip Modifiers */
.fod-icon--flip-h[b-pryrjid049] {
transform: scaleX(-1);
}
.fod-icon--flip-v[b-pryrjid049] {
transform: scaleY(-1);
}
.fod-icon--flip-both[b-pryrjid049] {
transform: scale(-1, -1);
}
/*#endregion Flip Modifiers */
/*#region Size + Rotation Combinations */
/* XS + Rotation */
.fod-icon--xs.fod-icon--rotate-90[b-pryrjid049] {
transform: scale(0.5) rotate(90deg);
}
.fod-icon--xs.fod-icon--rotate-180[b-pryrjid049] {
transform: scale(0.5) rotate(180deg);
}
.fod-icon--xs.fod-icon--rotate-270[b-pryrjid049] {
transform: scale(0.5) rotate(270deg);
}
/* SM + Rotation */
.fod-icon--sm.fod-icon--rotate-90[b-pryrjid049] {
transform: scale(0.6667) rotate(90deg);
}
.fod-icon--sm.fod-icon--rotate-180[b-pryrjid049] {
transform: scale(0.6667) rotate(180deg);
}
.fod-icon--sm.fod-icon--rotate-270[b-pryrjid049] {
transform: scale(0.6667) rotate(270deg);
}
/* MD + Rotation */
.fod-icon--md.fod-icon--rotate-90[b-pryrjid049] {
transform: scale(0.8333) rotate(90deg);
}
.fod-icon--md.fod-icon--rotate-180[b-pryrjid049] {
transform: scale(0.8333) rotate(180deg);
}
.fod-icon--md.fod-icon--rotate-270[b-pryrjid049] {
transform: scale(0.8333) rotate(270deg);
}
/* LG + Rotation */
.fod-icon--lg.fod-icon--rotate-90[b-pryrjid049] {
transform: scale(1.3333) rotate(90deg);
}
.fod-icon--lg.fod-icon--rotate-180[b-pryrjid049] {
transform: scale(1.3333) rotate(180deg);
}
.fod-icon--lg.fod-icon--rotate-270[b-pryrjid049] {
transform: scale(1.3333) rotate(270deg);
}
/*#endregion Size + Rotation Combinations */
/*#region Size + Flip Combinations */
/* XS + Flip */
.fod-icon--xs.fod-icon--flip-h[b-pryrjid049] {
transform: scale(0.5) scaleX(-1);
}
.fod-icon--xs.fod-icon--flip-v[b-pryrjid049] {
transform: scale(0.5) scaleY(-1);
}
.fod-icon--xs.fod-icon--flip-both[b-pryrjid049] {
transform: scale(0.5) scale(-1, -1);
}
/* SM + Flip */
.fod-icon--sm.fod-icon--flip-h[b-pryrjid049] {
transform: scale(0.6667) scaleX(-1);
}
.fod-icon--sm.fod-icon--flip-v[b-pryrjid049] {
transform: scale(0.6667) scaleY(-1);
}
.fod-icon--sm.fod-icon--flip-both[b-pryrjid049] {
transform: scale(0.6667) scale(-1, -1);
}
/* MD + Flip */
.fod-icon--md.fod-icon--flip-h[b-pryrjid049] {
transform: scale(0.8333) scaleX(-1);
}
.fod-icon--md.fod-icon--flip-v[b-pryrjid049] {
transform: scale(0.8333) scaleY(-1);
}
.fod-icon--md.fod-icon--flip-both[b-pryrjid049] {
transform: scale(0.8333) scale(-1, -1);
}
/* LG + Flip */
.fod-icon--lg.fod-icon--flip-h[b-pryrjid049] {
transform: scale(1.3333) scaleX(-1);
}
.fod-icon--lg.fod-icon--flip-v[b-pryrjid049] {
transform: scale(1.3333) scaleY(-1);
}
.fod-icon--lg.fod-icon--flip-both[b-pryrjid049] {
transform: scale(1.3333) scale(-1, -1);
}
/*#endregion Size + Flip Combinations */
/*#region Size + Rotation + Flip Combinations */
/* XS + Rotation + Flip */
.fod-icon--xs.fod-icon--rotate-90.fod-icon--flip-h[b-pryrjid049] {
transform: scale(0.5) rotate(90deg) scaleX(-1);
}
.fod-icon--xs.fod-icon--rotate-90.fod-icon--flip-v[b-pryrjid049] {
transform: scale(0.5) rotate(90deg) scaleY(-1);
}
.fod-icon--xs.fod-icon--rotate-90.fod-icon--flip-both[b-pryrjid049] {
transform: scale(0.5) rotate(90deg) scale(-1, -1);
}
.fod-icon--xs.fod-icon--rotate-180.fod-icon--flip-h[b-pryrjid049] {
transform: scale(0.5) rotate(180deg) scaleX(-1);
}
.fod-icon--xs.fod-icon--rotate-180.fod-icon--flip-v[b-pryrjid049] {
transform: scale(0.5) rotate(180deg) scaleY(-1);
}
.fod-icon--xs.fod-icon--rotate-180.fod-icon--flip-both[b-pryrjid049] {
transform: scale(0.5) rotate(180deg) scale(-1, -1);
}
.fod-icon--xs.fod-icon--rotate-270.fod-icon--flip-h[b-pryrjid049] {
transform: scale(0.5) rotate(270deg) scaleX(-1);
}
.fod-icon--xs.fod-icon--rotate-270.fod-icon--flip-v[b-pryrjid049] {
transform: scale(0.5) rotate(270deg) scaleY(-1);
}
.fod-icon--xs.fod-icon--rotate-270.fod-icon--flip-both[b-pryrjid049] {
transform: scale(0.5) rotate(270deg) scale(-1, -1);
}
/* SM + Rotation + Flip */
.fod-icon--sm.fod-icon--rotate-90.fod-icon--flip-h[b-pryrjid049] {
transform: scale(0.6667) rotate(90deg) scaleX(-1);
}
.fod-icon--sm.fod-icon--rotate-90.fod-icon--flip-v[b-pryrjid049] {
transform: scale(0.6667) rotate(90deg) scaleY(-1);
}
.fod-icon--sm.fod-icon--rotate-90.fod-icon--flip-both[b-pryrjid049] {
transform: scale(0.6667) rotate(90deg) scale(-1, -1);
}
.fod-icon--sm.fod-icon--rotate-180.fod-icon--flip-h[b-pryrjid049] {
transform: scale(0.6667) rotate(180deg) scaleX(-1);
}
.fod-icon--sm.fod-icon--rotate-180.fod-icon--flip-v[b-pryrjid049] {
transform: scale(0.6667) rotate(180deg) scaleY(-1);
}
.fod-icon--sm.fod-icon--rotate-180.fod-icon--flip-both[b-pryrjid049] {
transform: scale(0.6667) rotate(180deg) scale(-1, -1);
}
.fod-icon--sm.fod-icon--rotate-270.fod-icon--flip-h[b-pryrjid049] {
transform: scale(0.6667) rotate(270deg) scaleX(-1);
}
.fod-icon--sm.fod-icon--rotate-270.fod-icon--flip-v[b-pryrjid049] {
transform: scale(0.6667) rotate(270deg) scaleY(-1);
}
.fod-icon--sm.fod-icon--rotate-270.fod-icon--flip-both[b-pryrjid049] {
transform: scale(0.6667) rotate(270deg) scale(-1, -1);
}
/* MD + Rotation + Flip */
.fod-icon--md.fod-icon--rotate-90.fod-icon--flip-h[b-pryrjid049] {
transform: scale(0.8333) rotate(90deg) scaleX(-1);
}
.fod-icon--md.fod-icon--rotate-90.fod-icon--flip-v[b-pryrjid049] {
transform: scale(0.8333) rotate(90deg) scaleY(-1);
}
.fod-icon--md.fod-icon--rotate-90.fod-icon--flip-both[b-pryrjid049] {
transform: scale(0.8333) rotate(90deg) scale(-1, -1);
}
.fod-icon--md.fod-icon--rotate-180.fod-icon--flip-h[b-pryrjid049] {
transform: scale(0.8333) rotate(180deg) scaleX(-1);
}
.fod-icon--md.fod-icon--rotate-180.fod-icon--flip-v[b-pryrjid049] {
transform: scale(0.8333) rotate(180deg) scaleY(-1);
}
.fod-icon--md.fod-icon--rotate-180.fod-icon--flip-both[b-pryrjid049] {
transform: scale(0.8333) rotate(180deg) scale(-1, -1);
}
.fod-icon--md.fod-icon--rotate-270.fod-icon--flip-h[b-pryrjid049] {
transform: scale(0.8333) rotate(270deg) scaleX(-1);
}
.fod-icon--md.fod-icon--rotate-270.fod-icon--flip-v[b-pryrjid049] {
transform: scale(0.8333) rotate(270deg) scaleY(-1);
}
.fod-icon--md.fod-icon--rotate-270.fod-icon--flip-both[b-pryrjid049] {
transform: scale(0.8333) rotate(270deg) scale(-1, -1);
}
/* LG + Rotation + Flip */
.fod-icon--lg.fod-icon--rotate-90.fod-icon--flip-h[b-pryrjid049] {
transform: scale(1.3333) rotate(90deg) scaleX(-1);
}
.fod-icon--lg.fod-icon--rotate-90.fod-icon--flip-v[b-pryrjid049] {
transform: scale(1.3333) rotate(90deg) scaleY(-1);
}
.fod-icon--lg.fod-icon--rotate-90.fod-icon--flip-both[b-pryrjid049] {
transform: scale(1.3333) rotate(90deg) scale(-1, -1);
}
.fod-icon--lg.fod-icon--rotate-180.fod-icon--flip-h[b-pryrjid049] {
transform: scale(1.3333) rotate(180deg) scaleX(-1);
}
.fod-icon--lg.fod-icon--rotate-180.fod-icon--flip-v[b-pryrjid049] {
transform: scale(1.3333) rotate(180deg) scaleY(-1);
}
.fod-icon--lg.fod-icon--rotate-180.fod-icon--flip-both[b-pryrjid049] {
transform: scale(1.3333) rotate(180deg) scale(-1, -1);
}
.fod-icon--lg.fod-icon--rotate-270.fod-icon--flip-h[b-pryrjid049] {
transform: scale(1.3333) rotate(270deg) scaleX(-1);
}
.fod-icon--lg.fod-icon--rotate-270.fod-icon--flip-v[b-pryrjid049] {
transform: scale(1.3333) rotate(270deg) scaleY(-1);
}
.fod-icon--lg.fod-icon--rotate-270.fod-icon--flip-both[b-pryrjid049] {
transform: scale(1.3333) rotate(270deg) scale(-1, -1);
}
/*#endregion Size + Rotation + Flip Combinations */
/*#region Rotation + Flip Combinations (no size modifier) */
.fod-icon--rotate-90.fod-icon--flip-h[b-pryrjid049] {
transform: rotate(90deg) scaleX(-1);
}
.fod-icon--rotate-90.fod-icon--flip-v[b-pryrjid049] {
transform: rotate(90deg) scaleY(-1);
}
.fod-icon--rotate-90.fod-icon--flip-both[b-pryrjid049] {
transform: rotate(90deg) scale(-1, -1);
}
.fod-icon--rotate-180.fod-icon--flip-h[b-pryrjid049] {
transform: rotate(180deg) scaleX(-1);
}
.fod-icon--rotate-180.fod-icon--flip-v[b-pryrjid049] {
transform: rotate(180deg) scaleY(-1);
}
.fod-icon--rotate-180.fod-icon--flip-both[b-pryrjid049] {
transform: rotate(180deg) scale(-1, -1);
}
.fod-icon--rotate-270.fod-icon--flip-h[b-pryrjid049] {
transform: rotate(270deg) scaleX(-1);
}
.fod-icon--rotate-270.fod-icon--flip-v[b-pryrjid049] {
transform: rotate(270deg) scaleY(-1);
}
.fod-icon--rotate-270.fod-icon--flip-both[b-pryrjid049] {
transform: rotate(270deg) scale(-1, -1);
}
/*#endregion Rotation + Flip Combinations (no size modifier) */
/*#region Button Integration */
.fod-btn .fod-icon[b-pryrjid049] {
flex-shrink: 0;
}
.fod-btn-sm .fod-icon[b-pryrjid049] {
transform: scale(0.6667); /* 16px */
}
.fod-btn-lg .fod-icon[b-pryrjid049] {
transform: scale(0.8333); /* 20px */
}
/*#endregion Button Integration */
/* _content/FOD.UIComponents/Components/Input/FodCheckbox.razor.rz.scp.css */
/*#region Base Styles*/
.fod-checkbox[b-cy43n4xp10] {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--spacing-12, 12px);
cursor: pointer;
width: fit-content;
}
.fod-checkbox .fod-checkbox-input[b-cy43n4xp10] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.fod-checkbox .fod-checkbox-custom[b-cy43n4xp10] {
display: inline-flex;
justify-content: center;
align-items: center;
border: 2px solid var(--gray-300, #b2b2b2);
border-radius: var(--border-radius-6, 6px);
background: var(--white, #fff);
transition: all 0.2s ease;
position: relative;
flex-shrink: 0;
}
.fod-checkbox .fod-checkbox-custom[b-cy43n4xp10]::after {
content: "";
display: block;
border: solid var(--white, #fff);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-top: -2px;
opacity: 0;
transition: opacity 0.2s ease;
}
.fod-checkbox .fod-checkbox-texts[b-cy43n4xp10] {
display: flex;
flex-direction: column;
gap: 2px;
}
/*#endregion Base Styles*/
/*#region Checked State*/
.fod-checkbox .fod-checkbox-input:checked + .fod-checkbox-custom[b-cy43n4xp10] {
background: var(--blue-sky-600, #0058D2);
border-color: var(--blue-sky-600, #0058D2);
}
.fod-checkbox .fod-checkbox-input:checked + .fod-checkbox-custom[b-cy43n4xp10]::after {
opacity: 1;
}
/*#endregion Checked State*/
/*#region Indeterminate State*/
.fod-checkbox--indeterminate .fod-checkbox-custom[b-cy43n4xp10] {
background: var(--blue-sky-600, #0058D2);
border-color: var(--blue-sky-600, #0058D2);
}
.fod-checkbox--indeterminate .fod-checkbox-custom[b-cy43n4xp10]::after {
opacity: 1;
border: none;
background: var(--white, #fff);
width: 10px;
height: 2px;
margin: 0;
transform: none;
}
/*#endregion Indeterminate State*/
/*#region Disabled State*/
.fod-checkbox--disabled[b-cy43n4xp10] {
cursor: not-allowed;
}
.fod-checkbox--disabled .fod-checkbox-custom[b-cy43n4xp10] {
background: var(--gray-200, #f1f1f1);
border-color: var(--gray-250, #d9d9d9);
cursor: not-allowed;
}
.fod-checkbox--disabled .fod-checkbox-input:checked + .fod-checkbox-custom[b-cy43n4xp10]::after {
border-color: var(--gray-300, #b2b2b2);
}
.fod-checkbox--disabled .fod-checkbox-label[b-cy43n4xp10],
.fod-checkbox--disabled .fod-checkbox-description[b-cy43n4xp10] {
color: var(--gray-300, #b2b2b2);
cursor: not-allowed;
}
/*#endregion Disabled State*/
/*#region ReadOnly State*/
.fod-checkbox--readonly[b-cy43n4xp10] {
cursor: default;
}
.fod-checkbox--readonly .fod-checkbox-custom[b-cy43n4xp10] {
cursor: default;
}
/*#endregion ReadOnly State*/
/*#region Focus State*/
.fod-checkbox .fod-checkbox-input:focus + .fod-checkbox-custom[b-cy43n4xp10] {
outline: 2px solid var(--blue-sky-500, #3379DD);
outline-offset: 1px;
}
/*#endregion Focus State*/
/*#region Error State*/
.fod-checkbox--error .fod-checkbox-custom[b-cy43n4xp10] {
border-color: var(--red-600, #d32f2f);
}
.fod-checkbox--error .fod-checkbox-input:checked + .fod-checkbox-custom[b-cy43n4xp10] {
background: var(--red-600, #d32f2f);
border-color: var(--red-600, #d32f2f);
}
.fod-checkbox--error.fod-checkbox--indeterminate .fod-checkbox-custom[b-cy43n4xp10] {
background: var(--red-600, #D32F2F);
border-color: var(--red-600, #D32F2F);
}
.fod-checkbox-error[b-cy43n4xp10] {
display: flex;
align-items: center;
gap: var(--spacing-4, 4px);
color: var(--red-600, #D32F2F);
font-size: var(--text-body-sm-font-size, 14px);
margin-block-start: -12px;
margin-inline-start: var(--spacing-28, 28px);
font-weight: 500;
}
/*#endregion Error State*/
/*#region Size Variants - Small*/
.fod-checkbox--small .fod-checkbox-custom[b-cy43n4xp10] {
width: var(--spacing-16, 16px);
height: var(--spacing-16, 16px);
}
.fod-checkbox--small .fod-checkbox-custom[b-cy43n4xp10]::after {
width: 3px;
height: 8px;
}
.fod-checkbox--small.fod-checkbox--indeterminate .fod-checkbox-custom[b-cy43n4xp10]::after {
width: 8px;
height: 2px;
}
.fod-checkbox--small .fod-checkbox-label[b-cy43n4xp10] {
font-size: var(--text-body-sm-font-size, 14px);
color: var(--gray-700, #383838);
}
.fod-checkbox--small .fod-checkbox-description[b-cy43n4xp10] {
font-size: var(--text-body-xs-font-size, 12px);
color: var(--gray-400, #757575);
line-height: 1.2;
}
/*#endregion Size Variants - Small*/
/*#region Size Variants - Medium*/
.fod-checkbox--medium .fod-checkbox-custom[b-cy43n4xp10] {
width: var(--spacing-20, 20px);
height: var(--spacing-20, 20px);
}
.fod-checkbox--medium .fod-checkbox-custom[b-cy43n4xp10]::after {
width: 5px;
height: 11px;
}
.fod-checkbox--medium.fod-checkbox--indeterminate .fod-checkbox-custom[b-cy43n4xp10]::after {
width: 10px;
height: 2px;
}
.fod-checkbox--medium .fod-checkbox-label[b-cy43n4xp10] {
font-size: var(--text-body-md-font-size, 16px);
color: var(--gray-700, #383838);
}
.fod-checkbox--medium .fod-checkbox-description[b-cy43n4xp10] {
font-size: var(--text-body-sm-font-size, 14px);
color: var(--gray-400, #757575);
line-height: 1.2;
}
/*#endregion Size Variants - Medium*/
/*#region Size Variants - Large*/
.fod-checkbox--large .fod-checkbox-custom[b-cy43n4xp10] {
width: var(--spacing-24, 24px);
height: var(--spacing-24, 24px);
}
.fod-checkbox--large .fod-checkbox-custom[b-cy43n4xp10]::after {
width: 6px;
height: 12px;
}
.fod-checkbox--large.fod-checkbox--indeterminate .fod-checkbox-custom[b-cy43n4xp10]::after {
width: 12px;
height: 2px;
}
.fod-checkbox--large .fod-checkbox-label[b-cy43n4xp10] {
font-size: var(--text-body-lg-font-size, 18px);
color: var(--gray-700, #383838);
}
.fod-checkbox--large .fod-checkbox-description[b-cy43n4xp10] {
font-size: var(--text-body-md-font-size, 16px);
color: var(--gray-400, #757575);
line-height: 1.2;
}
/*#endregion Size Variants - Large*/
/*#region Required Indicator*/
.fod-required-indicator[b-cy43n4xp10] {
color: var(--red-600, #D32F2F);
margin-inline-start: var(--spacing-4, 4px);
}
/*#endregion Required Indicator*/
/*#region Dark Theme Support*/
[data-theme=dark] .fod-checkbox .fod-checkbox-custom[b-cy43n4xp10] {
background: var(--gray-800, #1f1f1f);
border-color: var(--gray-500, #6b6b6b);
}
[data-theme=dark] .fod-checkbox .fod-checkbox-input:checked + .fod-checkbox-custom[b-cy43n4xp10] {
background: var(--blue-sky-500, #3379DD);
border-color: var(--blue-sky-500, #3379DD);
}
[data-theme=dark] .fod-checkbox--indeterminate .fod-checkbox-custom[b-cy43n4xp10] {
background: var(--blue-sky-500, #3379DD);
border-color: var(--blue-sky-500, #3379DD);
}
[data-theme=dark] .fod-checkbox--disabled .fod-checkbox-custom[b-cy43n4xp10] {
background: var(--gray-700, #383838);
border-color: var(--gray-600, #4d4d4d);
}
[data-theme=dark] .fod-checkbox .fod-checkbox-label[b-cy43n4xp10] {
color: var(--gray-200, #f1f1f1);
}
[data-theme=dark] .fod-checkbox .fod-checkbox-description[b-cy43n4xp10] {
color: var(--gray-400, #757575);
}
[data-theme=dark] .fod-checkbox-error[b-cy43n4xp10] {
color: var(--red-400, #F97066);
}
[data-theme=dark] .fod-required-indicator[b-cy43n4xp10] {
color: var(--red-400, #F97066);
}
/*#endregion Dark Theme Support*/
/*#region RTL Support*/
[dir="rtl"] .fod-checkbox[b-cy43n4xp10],
:host-context([dir="rtl"]) .fod-checkbox[b-cy43n4xp10] {
/* Logical properties handle RTL automatically */
}
/*#endregion RTL Support*/
/*#region Reduced Motion*/
@media (prefers-reduced-motion: reduce) {
.fod-checkbox .fod-checkbox-custom[b-cy43n4xp10],
.fod-checkbox .fod-checkbox-custom[b-cy43n4xp10]::after {
transition: none;
}
}
/*#endregion Reduced Motion*/
/* _content/FOD.UIComponents/Components/Input/FodInput.razor.rz.scp.css */
/* =====================================================
FodInput — CSS aligned to Design System (_input.scss)
Architecture:
- .fod-input-wrapper → bordered flex container (variant colors, size)
- .fod-input-control → borderless flex child (the actual )
- Leading/trailing icons → flex children, no absolute positioning
===================================================== */
.fod-input[b-t1mh6cxqtf] {
display: flex;
flex-direction: column;
gap: var(--spacing-4, 4px);
width: 100%;
}
/* -------------------------------------------------------
WRAPPER — bordered flex container
All visual styling (border, bg, colors) lives here.
Children flow via flexbox: [leading] [input] [trailing]
------------------------------------------------------- */
.fod-input-wrapper[b-t1mh6cxqtf] {
display: flex;
align-items: center;
gap: var(--spacing-4, 4px);
width: 100%;
box-sizing: border-box;
border-radius: var(--border-radius-8, 8px);
}
/* -------------------------------------------------------
SIZE VARIANTS (on wrapper)
------------------------------------------------------- */
.fod-input-wrapper--sm[b-t1mh6cxqtf] {
height: 32px;
padding: 0 var(--spacing-8, 8px);
font-size: var(--font-size-14, 14px);
}
.fod-input-wrapper--md[b-t1mh6cxqtf] {
height: var(--spacing-40, 40px);
padding: 0 var(--spacing-8, 8px);
font-size: var(--text-body-sm-font-size);
}
.fod-input-wrapper--lg[b-t1mh6cxqtf] {
height: var(--spacing-48, 48px);
padding: 0 var(--spacing-16, 16px);
font-size: var(--text-body-md-font-size);
}
/* -------------------------------------------------------
VARIANT: DEFAULT (on wrapper)
------------------------------------------------------- */
.fod-input-wrapper--default[b-t1mh6cxqtf] {
border: var(--border-width-1, 1px) var(--border-style-solid, solid) var(--gray-250);
background-color: var(--white);
color: var(--gray-900);
}
.fod-input-wrapper--default:hover:not(:has(:disabled))[b-t1mh6cxqtf] {
border-color: var(--gray-400);
box-shadow: 0 0 0 0.5px var(--gray-400);
}
.fod-input-wrapper--default:focus-within:not(:has(:disabled))[b-t1mh6cxqtf] {
border-color: var(--color-border-brand-default, rgba(0, 88, 210, 1));
outline: 1px solid var(--color-border-brand-default, rgba(0, 88, 210, 1));
box-shadow: 0 0 0 4px var(--blue-sky-200);
}
.fod-input-wrapper--default:has(:disabled)[b-t1mh6cxqtf] {
background-color: var(--gray-100);
border-color: var(--gray-250);
color: var(--gray-500);
cursor: not-allowed;
opacity: 0.7;
}
.fod-input-wrapper--default:has([readonly]):not(:has(:disabled))[b-t1mh6cxqtf] {
background-color: var(--gray-100);
border-color: var(--gray-200);
color: var(--gray-700);
cursor: default;
}
.fod-input-wrapper--default:has([readonly]):not(:has(:disabled)) .fod-input-control[b-t1mh6cxqtf]::placeholder {
color: var(--gray-500);
}
/* -------------------------------------------------------
VARIANT: WARNING (on wrapper)
------------------------------------------------------- */
.fod-input-wrapper--warning[b-t1mh6cxqtf] {
border: var(--border-width-1, 1px) var(--border-style-solid, solid) var(--apricot-500);
background-color: var(--white);
color: var(--gray-900);
}
.fod-input-wrapper--warning:hover:not(:has(:disabled))[b-t1mh6cxqtf] {
border-color: var(--apricot-600);
box-shadow: 0 0 0 0.5px var(--apricot-600);
}
.fod-input-wrapper--warning:focus-within:not(:has(:disabled))[b-t1mh6cxqtf] {
outline: 1px solid var(--apricot-600);
box-shadow: 0 0 0 4px var(--apricot-200);
}
.fod-input-wrapper--warning:has(:disabled)[b-t1mh6cxqtf] {
background-color: var(--gray-100);
border-color: var(--gray-250);
color: var(--gray-500);
cursor: not-allowed;
opacity: 0.7;
}
.fod-input-wrapper--warning:has([readonly]):not(:has(:disabled))[b-t1mh6cxqtf] {
background-color: var(--apricot-100);
border-color: var(--apricot-300);
color: var(--apricot-700);
cursor: default;
}
.fod-input-wrapper--warning:has([readonly]):not(:has(:disabled)) .fod-input-control[b-t1mh6cxqtf]::placeholder {
color: var(--apricot-500);
}
/* -------------------------------------------------------
VARIANT: DESTRUCTIVE (on wrapper)
------------------------------------------------------- */
.fod-input-wrapper--destructive[b-t1mh6cxqtf] {
border: var(--border-width-1, 1px) var(--border-style-solid, solid) var(--red-500);
background-color: var(--white);
color: var(--gray-900);
}
.fod-input-wrapper--destructive:hover:not(:has(:disabled))[b-t1mh6cxqtf] {
border-color: var(--red-600);
box-shadow: 0 0 0 0.5px var(--red-600);
}
.fod-input-wrapper--destructive:focus-within:not(:has(:disabled))[b-t1mh6cxqtf] {
outline: 1px solid var(--red-600);
box-shadow: 0 0 0 4px var(--red-200);
}
.fod-input-wrapper--destructive:has(:disabled)[b-t1mh6cxqtf] {
background-color: var(--gray-100);
border-color: var(--gray-250);
color: var(--gray-500);
cursor: not-allowed;
opacity: 0.7;
}
.fod-input-wrapper--destructive:has([readonly]):not(:has(:disabled))[b-t1mh6cxqtf] {
background-color: var(--red-100);
border-color: var(--red-300);
color: var(--red-700);
cursor: default;
}
.fod-input-wrapper--destructive:has([readonly]):not(:has(:disabled)) .fod-input-control[b-t1mh6cxqtf]::placeholder {
color: var(--red-500);
}
/* -------------------------------------------------------
VARIANT: SUCCESS (on wrapper)
------------------------------------------------------- */
.fod-input-wrapper--success[b-t1mh6cxqtf] {
border: var(--border-width-1, 1px) var(--border-style-solid, solid) var(--green-600);
background-color: var(--white);
color: var(--gray-900);
}
.fod-input-wrapper--success:hover:not(:has(:disabled))[b-t1mh6cxqtf] {
border-color: var(--green-700);
box-shadow: 0 0 0 0.5px var(--green-700);
}
.fod-input-wrapper--success:focus-within:not(:has(:disabled))[b-t1mh6cxqtf] {
outline: 1px solid var(--green-700);
box-shadow: 0 0 0 4px var(--green-200);
}
.fod-input-wrapper--success:has(:disabled)[b-t1mh6cxqtf] {
background-color: var(--gray-100);
border-color: var(--gray-250);
color: var(--gray-500);
cursor: not-allowed;
opacity: 0.7;
}
.fod-input-wrapper--success:has([readonly]):not(:has(:disabled))[b-t1mh6cxqtf] {
background-color: var(--green-100);
border-color: var(--green-300);
color: var(--green-800);
cursor: default;
}
.fod-input-wrapper--success:has([readonly]):not(:has(:disabled)) .fod-input-control[b-t1mh6cxqtf]::placeholder {
color: var(--green-500);
}
/* -------------------------------------------------------
STYLE VARIANT: TEXT (bottom border only, on wrapper)
------------------------------------------------------- */
.fod-input-wrapper--text[b-t1mh6cxqtf] {
border: none;
border-radius: 0;
padding-left: 0;
padding-right: 0;
background-color: transparent;
}
/* Text + default */
.fod-input-wrapper--text.fod-input-wrapper--default[b-t1mh6cxqtf] {
border-bottom: var(--border-width-1, 1px) var(--border-style-solid, solid) var(--gray-250);
}
.fod-input-wrapper--text.fod-input-wrapper--default:hover:not(:has(:disabled))[b-t1mh6cxqtf] {
border-bottom-color: var(--gray-400);
box-shadow: none;
}
.fod-input-wrapper--text.fod-input-wrapper--default:focus-within:not(:has(:disabled))[b-t1mh6cxqtf] {
border-bottom-color: var(--color-border-brand-default, rgba(0, 88, 210, 1));
outline: none;
box-shadow: 0 2px 0 0 var(--blue-sky-200);
}
.fod-input-wrapper--text.fod-input-wrapper--default:has(:disabled)[b-t1mh6cxqtf] {
background-color: transparent;
border-bottom-color: var(--gray-250);
}
.fod-input-wrapper--text.fod-input-wrapper--default:has([readonly]):not(:has(:disabled))[b-t1mh6cxqtf] {
background-color: transparent;
border-bottom-color: var(--gray-200);
}
/* Text + warning */
.fod-input-wrapper--text.fod-input-wrapper--warning[b-t1mh6cxqtf] {
border-bottom: var(--border-width-1, 1px) var(--border-style-solid, solid) var(--apricot-500);
}
.fod-input-wrapper--text.fod-input-wrapper--warning:hover:not(:has(:disabled))[b-t1mh6cxqtf] {
border-bottom-color: var(--apricot-600);
box-shadow: none;
}
.fod-input-wrapper--text.fod-input-wrapper--warning:focus-within:not(:has(:disabled))[b-t1mh6cxqtf] {
outline: none;
border-bottom-color: var(--apricot-600);
box-shadow: 0 2px 0 0 var(--apricot-200);
}
.fod-input-wrapper--text.fod-input-wrapper--warning:has(:disabled)[b-t1mh6cxqtf] {
background-color: transparent;
border-bottom-color: var(--gray-250);
}
.fod-input-wrapper--text.fod-input-wrapper--warning:has([readonly]):not(:has(:disabled))[b-t1mh6cxqtf] {
background-color: transparent;
border-bottom-color: var(--apricot-300);
}
/* Text + destructive */
.fod-input-wrapper--text.fod-input-wrapper--destructive[b-t1mh6cxqtf] {
border-bottom: var(--border-width-1, 1px) var(--border-style-solid, solid) var(--red-500);
}
.fod-input-wrapper--text.fod-input-wrapper--destructive:hover:not(:has(:disabled))[b-t1mh6cxqtf] {
border-bottom-color: var(--red-600);
box-shadow: none;
}
.fod-input-wrapper--text.fod-input-wrapper--destructive:focus-within:not(:has(:disabled))[b-t1mh6cxqtf] {
outline: none;
border-bottom-color: var(--red-600);
box-shadow: 0 2px 0 0 var(--red-200);
}
.fod-input-wrapper--text.fod-input-wrapper--destructive:has(:disabled)[b-t1mh6cxqtf] {
background-color: transparent;
border-bottom-color: var(--gray-250);
}
.fod-input-wrapper--text.fod-input-wrapper--destructive:has([readonly]):not(:has(:disabled))[b-t1mh6cxqtf] {
background-color: transparent;
border-bottom-color: var(--red-300);
}
/* Text + success */
.fod-input-wrapper--text.fod-input-wrapper--success[b-t1mh6cxqtf] {
border-bottom: var(--border-width-1, 1px) var(--border-style-solid, solid) var(--green-600);
}
.fod-input-wrapper--text.fod-input-wrapper--success:hover:not(:has(:disabled))[b-t1mh6cxqtf] {
border-bottom-color: var(--green-700);
box-shadow: none;
}
.fod-input-wrapper--text.fod-input-wrapper--success:focus-within:not(:has(:disabled))[b-t1mh6cxqtf] {
outline: none;
border-bottom-color: var(--green-700);
box-shadow: 0 2px 0 0 var(--green-200);
}
.fod-input-wrapper--text.fod-input-wrapper--success:has(:disabled)[b-t1mh6cxqtf] {
background-color: transparent;
border-bottom-color: var(--gray-250);
}
.fod-input-wrapper--text.fod-input-wrapper--success:has([readonly]):not(:has(:disabled))[b-t1mh6cxqtf] {
background-color: transparent;
border-bottom-color: var(--green-300);
}
/* -------------------------------------------------------
INPUT ELEMENT — borderless flex child
Takes remaining space, inherits color/font from wrapper.
------------------------------------------------------- */
.fod-input-control[b-t1mh6cxqtf] {
flex: 1;
min-width: 0;
height: 100%;
border: none;
background: transparent;
outline: none;
padding: 0;
font-size: inherit;
font-family: inherit;
color: inherit;
text-overflow: ellipsis;
box-sizing: border-box;
}
.fod-input-control[b-t1mh6cxqtf]::placeholder {
color: var(--gray-500);
}
.fod-input-control:disabled[b-t1mh6cxqtf] {
cursor: not-allowed;
pointer-events: none;
}
.fod-input-control[readonly][b-t1mh6cxqtf] {
pointer-events: none;
}
/* -------------------------------------------------------
ICONS / ADORNMENTS — flex children (no absolute positioning)
------------------------------------------------------- */
.fod-input-icon[b-t1mh6cxqtf] {
display: flex;
align-items: center;
flex-shrink: 0;
}
.fod-input-icon.checkmark[b-t1mh6cxqtf] {
color: var(--green-600);
}
/* -------------------------------------------------------
TRAILING CONTAINER — flex child, children flow via gap
------------------------------------------------------- */
.fod-input__trailing[b-t1mh6cxqtf] {
display: flex;
align-items: center;
gap: var(--spacing-4, 4px);
flex-shrink: 0;
}
/* SPIN BUTTONS (numeric) */
.fod-input__spinbuttons[b-t1mh6cxqtf] {
display: flex;
flex-direction: column;
}
.fod-input__spin[b-t1mh6cxqtf] {
border: none;
background: transparent;
color: var(--gray-700);
height: var(--spacing-20, 20px);
border-radius: var(--border-radius-4, 4px);
cursor: pointer;
}
.fod-input__spin:disabled[b-t1mh6cxqtf] {
cursor: not-allowed;
color: var(--gray-400);
}
/* -------------------------------------------------------
TEXTAREA MODE
------------------------------------------------------- */
.fod-input-wrapper.is-textarea[b-t1mh6cxqtf] {
height: auto;
align-items: stretch;
}
.fod-input-wrapper.is-textarea .fod-input-control[b-t1mh6cxqtf] {
min-height: var(--spacing-80, 80px);
padding-top: var(--spacing-8, 8px);
padding-bottom: var(--spacing-8, 8px);
resize: vertical;
}
/* -------------------------------------------------------
MESSAGE BELOW INPUT
------------------------------------------------------- */
.fod-input-message[b-t1mh6cxqtf] {
font-size: var(--text-body-sm-font-size, 14px);
margin-top: var(--spacing-4, 4px);
display: flex;
align-items: center;
gap: var(--spacing-4, 4px);
}
.fod-input-message.default[b-t1mh6cxqtf] {
color: var(--color-text-base-secondary, var(--gray-700));
}
.fod-input-message.warning[b-t1mh6cxqtf] {
color: var(--apricot-700);
}
.fod-input-message.destructive[b-t1mh6cxqtf] {
color: var(--red-600);
}
.fod-input-message.success[b-t1mh6cxqtf] {
color: var(--green-600);
}
.fod-input-message .icon[b-t1mh6cxqtf] {
font-size: 16px;
line-height: 1;
}
/* COUNTER */
.fod-input__counter[b-t1mh6cxqtf] {
font-size: var(--text-body-sm-font-size, 14px);
color: var(--gray-500);
margin-inline-start: auto;
white-space: nowrap;
}
/* _content/FOD.UIComponents/Components/Input/FodInputAdornment.razor.rz.scp.css */
.fod-input-icon[b-xog3iivjwz] {
display: flex;
align-items: center;
flex-shrink: 0;
pointer-events: none;
}
.fod-input-icon.checkmark[b-xog3iivjwz] {
color: var(--green-600);
}
/* _content/FOD.UIComponents/Components/Input/FodInputLabel.razor.rz.scp.css */
label[b-hhr95kt0ar] {
color: var(--gray-700);
display: block;
font-size: var(--text-body-sm-font-size, 14px);
margin-bottom: var(--spacing-6, 6px);
}
label.required[b-hhr95kt0ar]::after {
content: "*";
margin-left: var(--spacing-4, 4px);
color: var(--red-500);
}
/* _content/FOD.UIComponents/Components/Input/FodRadio.razor.rz.scp.css */
/*#region Radio Base Styles*/
.fod-radio[b-2rkeswzp6n] {
display: flex;
align-items: center;
gap: var(--spacing-8, 8px);
cursor: pointer;
width: fit-content;
position: relative;
}
.fod-radio:has(.fod-radio-description)[b-2rkeswzp6n] {
align-items: flex-start;
}
.fod-radio .fod-radio-input[b-2rkeswzp6n] {
position: absolute;
inset: 0;
opacity: 0;
margin: 0;
cursor: pointer;
}
.fod-radio .fod-radio-custom[b-2rkeswzp6n] {
display: inline-block;
position: relative;
border-radius: 50%;
border: 2px solid var(--gray-400, #ccc);
transition: border-color 0.2s, background-color 0.2s;
flex-shrink: 0;
}
.fod-radio .fod-radio-custom[b-2rkeswzp6n]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
background-color: var(--blue-sky-600, #0058D2);
transform: translate(-50%, -50%) scale(0);
transition: transform 0.2s ease-in-out;
}
.fod-radio .fod-radio-texts[b-2rkeswzp6n] {
display: flex;
flex-direction: column;
gap: 3px;
}
.fod-radio .fod-radio-label[b-2rkeswzp6n] {
font-size: var(--text-body-sm-font-size, 14px);
color: var(--gray-900, #111);
}
.fod-radio .fod-radio-description[b-2rkeswzp6n] {
font-size: var(--text-body-xs-font-size, 12px);
color: var(--gray-400, #757575);
line-height: 1.2;
}
/*#endregion Radio Base Styles*/
/*#region Checked State*/
.fod-radio--checked .fod-radio-custom[b-2rkeswzp6n] {
border-color: var(--blue-sky-600, #0058D2);
}
.fod-radio--checked .fod-radio-custom[b-2rkeswzp6n]::after {
transform: translate(-50%, -50%) scale(1);
}
/*#endregion Checked State*/
/*#region Focus State*/
.fod-radio .fod-radio-input:focus + .fod-radio-custom[b-2rkeswzp6n] {
outline: 2px solid var(--blue-sky-500, #4C9AFF);
outline-offset: 1px;
}
/*#endregion Focus State*/
/*#region Disabled State*/
.fod-radio--disabled[b-2rkeswzp6n] {
cursor: not-allowed;
}
.fod-radio--disabled .fod-radio-custom[b-2rkeswzp6n] {
border-color: var(--gray-250, #d9d9d9);
background-color: var(--gray-200, #f1f1f1);
cursor: not-allowed;
}
.fod-radio--disabled .fod-radio-custom[b-2rkeswzp6n]::after {
background-color: var(--gray-250, #d9d9d9);
}
.fod-radio--disabled .fod-radio-label[b-2rkeswzp6n] {
color: var(--gray-500, #aaa);
cursor: not-allowed;
}
.fod-radio--disabled .fod-radio-description[b-2rkeswzp6n] {
color: var(--gray-300, #b2b2b2);
cursor: not-allowed;
}
/*#endregion Disabled State*/
/*#region Error State*/
.fod-radio--error .fod-radio-custom[b-2rkeswzp6n] {
border-color: var(--red-600, #D32F2F);
}
.fod-radio--error .fod-radio-custom[b-2rkeswzp6n]::after {
background-color: var(--red-600, #D32F2F);
}
.fod-radio--error .fod-radio-label[b-2rkeswzp6n] {
color: var(--red-600, #D32F2F);
}
/*#endregion Error State*/
/*#region Size Variants - Small*/
.fod-radio--small .fod-radio-custom[b-2rkeswzp6n] {
width: 20px;
height: 20px;
}
.fod-radio--small .fod-radio-custom[b-2rkeswzp6n]::after {
width: 10px;
height: 10px;
}
.fod-radio--small .fod-radio-label[b-2rkeswzp6n] {
font-size: var(--text-body-sm-font-size, 14px);
}
/*#endregion Size Variants - Small*/
/*#region Size Variants - Medium*/
.fod-radio--medium .fod-radio-custom[b-2rkeswzp6n] {
width: 24px;
height: 24px;
}
.fod-radio--medium .fod-radio-custom[b-2rkeswzp6n]::after {
width: 12px;
height: 12px;
}
.fod-radio--medium .fod-radio-label[b-2rkeswzp6n] {
font-size: var(--text-body-md-font-size, 15px);
}
/*#endregion Size Variants - Medium*/
/*#region Dark Theme Support*/
[data-theme=dark] .fod-radio .fod-radio-custom[b-2rkeswzp6n] {
border-color: var(--gray-500, #6b6b6b);
background-color: var(--gray-800, #1f1f1f);
}
[data-theme=dark] .fod-radio--checked .fod-radio-custom[b-2rkeswzp6n] {
border-color: var(--blue-sky-500, #3379DD);
}
[data-theme=dark] .fod-radio .fod-radio-custom[b-2rkeswzp6n]::after {
background-color: var(--blue-sky-500, #3379DD);
}
[data-theme=dark] .fod-radio .fod-radio-label[b-2rkeswzp6n] {
color: var(--gray-200, #f1f1f1);
}
[data-theme=dark] .fod-radio .fod-radio-description[b-2rkeswzp6n] {
color: var(--gray-400, #757575);
}
[data-theme=dark] .fod-radio--disabled .fod-radio-custom[b-2rkeswzp6n] {
background-color: var(--gray-700, #383838);
border-color: var(--gray-600, #4d4d4d);
}
/*#endregion Dark Theme Support*/
/*#region Reduced Motion*/
@media (prefers-reduced-motion: reduce) {
.fod-radio .fod-radio-custom[b-2rkeswzp6n],
.fod-radio .fod-radio-custom[b-2rkeswzp6n]::after {
transition: none;
}
}
/*#endregion Reduced Motion*/
/* _content/FOD.UIComponents/Components/Input/FodRadioGroup.razor.rz.scp.css */
/*#region Radio Group Base Styles*/
.fod-radio-group[b-1tl5nrzv8m] {
display: flex;
flex-direction: column;
gap: var(--spacing-8, 8px);
}
.fod-radio-group-label[b-1tl5nrzv8m] {
display: block;
font-size: var(--text-body-md-font-size, 16px);
font-weight: 500;
color: var(--gray-900, #111);
margin-block-end: var(--spacing-8, 8px);
}
.fod-required-indicator[b-1tl5nrzv8m] {
color: var(--red-600, #D32F2F);
margin-inline-start: var(--spacing-4, 4px);
}
.fod-radio-group-items[b-1tl5nrzv8m] {
display: flex;
gap: var(--spacing-8, 8px);
}
.fod-radio-group-items.fod-radio-group--vertical[b-1tl5nrzv8m] {
flex-direction: column;
}
.fod-radio-group-items.fod-radio-group--horizontal[b-1tl5nrzv8m] {
flex-direction: row;
flex-wrap: wrap;
}
.fod-radio-group-error[b-1tl5nrzv8m] {
display: flex;
align-items: center;
gap: var(--spacing-4, 4px);
color: var(--red-600, #D32F2F);
font-size: var(--text-body-sm-font-size, 14px);
margin-block-start: var(--spacing-8, 8px);
}
/*#endregion Radio Group Base Styles*/
/*#region Dark Theme Support*/
[data-theme=dark] .fod-radio-group-label[b-1tl5nrzv8m] {
color: var(--gray-200, #f1f1f1);
}
[data-theme=dark] .fod-radio-group-error[b-1tl5nrzv8m] {
color: var(--red-400, #F97066);
}
[data-theme=dark] .fod-required-indicator[b-1tl5nrzv8m] {
color: var(--red-400, #F97066);
}
/*#endregion Dark Theme Support*/
/*#region RTL Support*/
[dir="rtl"] .fod-radio-group[b-1tl5nrzv8m],
:host-context([dir="rtl"]) .fod-radio-group[b-1tl5nrzv8m] {
/* Logical properties handle RTL automatically */
}
/*#endregion RTL Support*/
/* _content/FOD.UIComponents/Components/Input/FodTextField.razor.rz.scp.css */
.fod-textfield[b-ab4qqj1ak8] {
display: flex;
flex-direction: column;
gap: var(--spacing-4, 4px);
inline-size: 100%;
}
.fod-textfield--disabled[b-ab4qqj1ak8] {
opacity: 0.7;
pointer-events: none;
}
.fod-textfield--readonly[b-ab4qqj1ak8] {
opacity: 1;
}
.fod-textfield :global(label)[b-ab4qqj1ak8] {
display: flex;
align-items: center;
gap: var(--spacing-4, 4px);
font-size: var(--text-body-sm-font-size, 14px);
font-weight: 500;
color: var(--color-text-base-default, var(--gray-900));
}
.fod-textfield :global(label.required::after)[b-ab4qqj1ak8] {
color: var(--color-text-danger-default, var(--red-600));
}
.fod-textfield :global(.fod-input-wrapper)[b-ab4qqj1ak8] {
position: relative;
display: flex;
align-items: center;
}
.fod-textfield :global(.fod-input-wrapper.has-leading .fod-input-control)[b-ab4qqj1ak8] {
padding-inline-start: var(--spacing-40, 40px);
}
.fod-textfield :global(.fod-input-wrapper.has-trailing .fod-input-control)[b-ab4qqj1ak8] {
padding-inline-end: var(--spacing-40, 40px);
}
.fod-textfield :global(.fod-input-icon--leading)[b-ab4qqj1ak8],
.fod-textfield :global(.fod-input-icon--trailing)[b-ab4qqj1ak8] {
display: flex;
align-items: center;
color: var(--color-icon-base-secondary, var(--gray-500));
}
.fod-textfield :global(.fod-input-message)[b-ab4qqj1ak8] {
justify-content: space-between;
align-items: flex-start;
min-block-size: var(--spacing-20, 20px);
gap: var(--spacing-8, 8px);
}
.fod-textfield :global(.fod-input__counter)[b-ab4qqj1ak8] {
margin-inline-start: auto;
}
.fod-textfield :global(.fod-input-message.destructive) .fod-input__counter[b-ab4qqj1ak8] {
color: var(--color-text-danger-default, var(--red-600));
}
.fod-textfield--multiline :global(.fod-input-wrapper)[b-ab4qqj1ak8] {
align-items: flex-start;
}
.fod-textfield--multiline :global(.fod-input-control)[b-ab4qqj1ak8] {
resize: vertical;
min-block-size: var(--spacing-80, 80px);
}
.fod-textfield--multiline :global(.fod-input-icon--leading)[b-ab4qqj1ak8],
.fod-textfield--multiline :global(.fod-input-icon--trailing)[b-ab4qqj1ak8] {
inset-block-start: var(--spacing-12, 12px);
}
.fod-textfield--autogrow :global(textarea.fod-input-control)[b-ab4qqj1ak8] {
resize: none;
overflow: hidden;
}
/* _content/FOD.UIComponents/Components/Inputs/FodSelect.razor.rz.scp.css */
/*#region CSS Variables - MOVED TO MAIN.CSS
NOTE: CSS variables for this component have been moved to the global main.css file
due to Blazor CSS isolation limitations with :root selectors. See main.css for details.
*/
/*#region Root Component*/
.fod-select[b-b08mwj753s] {
position: relative;
display: flex;
flex-direction: column;
gap: var(--spacing-4, 4px);
min-inline-size: 0;
box-sizing: border-box;
}
.fod-select[hidden][b-b08mwj753s] {
display: none;
}
.fod-select--full-width[b-b08mwj753s] {
inline-size: 100%;
}
.fod-select--disabled[b-b08mwj753s] {
opacity: var(--fod-select-disabled-opacity);
pointer-events: none;
}
/*#endregion Root Component*/
/*#region Label*/
.fod-select__label[b-b08mwj753s] {
display: block;
font-weight: var(--font-weight-regular, 400);
font-size: var(--font-size-14, 14px);
line-height: var(--line-height-20, 20px);
margin-block-end: var(--spacing-6, 6px);
color: var(--color-text-base-secondary, var(--gray-700, #383838));
}
.fod-select__label--required[b-b08mwj753s]::after {
content: " *";
color: var(--fod-select-error-text);
}
/*#endregion Label*/
/*#region Trigger*/
.fod-select__trigger-container[b-b08mwj753s] {
position: relative;
}
.fod-select__trigger[b-b08mwj753s] {
display: flex;
align-items: center;
gap: 8px;
inline-size: 100%;
min-block-size: var(--spacing-40, 40px);
padding-inline: var(--fod-select-padding-inline);
background-color: var(--fod-select-bg);
border: var(--border-width-1, 1px) solid var(--fod-select-border-color);
border-radius: var(--fod-select-border-radius);
font-size: var(--fod-select-font-size);
color: var(--fod-select-text-color);
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fod-select__trigger:hover:not(:disabled):not(:focus-visible)[b-b08mwj753s] {
border-color: var(--gray-400);
box-shadow: 0 0 0 0.5px var(--gray-400);
}
.fod-select__trigger:focus-visible[b-b08mwj753s] {
border-color: var(--color-border-brand-default, #0058D2);
outline: none;
box-shadow: 0 0 0 4px rgba(0, 88, 210, 0.12);
}
.fod-select__trigger:disabled[b-b08mwj753s] {
background-color: var(--color-background-disabled-default, var(--gray-200));
border-color: var(--color-border-disabled-default, var(--gray-250));
color: var(--color-text-disabled-on-disabled, var(--gray-500));
cursor: not-allowed;
}
.fod-select--error .fod-select__trigger[b-b08mwj753s] {
border: var(--border-width-1, 1px) solid var(--color-border-danger-default, var(--red-600, #DC3545));
}
.fod-select--error .fod-select__trigger:hover:not(:disabled)[b-b08mwj753s],
.fod-select--error .fod-select__trigger:focus-visible[b-b08mwj753s] {
border-color: var(--color-border-danger-default, var(--red-600, #DC3545));
outline: none;
box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.12);
}
.fod-select--open .fod-select__trigger[b-b08mwj753s] {
border-color: var(--color-border-brand-default, #0058D2);
outline: none;
box-shadow: 0 0 0 4px rgba(0, 88, 210, 0.12);
}
/*#endregion Trigger*/
/*#region Trigger - Sizes*/
.fod-select--sm .fod-select__trigger[b-b08mwj753s] {
min-block-size: var(--fod-select-height-sm);
font-size: 13px;
}
.fod-select--md .fod-select__trigger[b-b08mwj753s] {
min-block-size: var(--fod-select-height-md);
}
.fod-select--lg .fod-select__trigger[b-b08mwj753s] {
min-block-size: var(--fod-select-height-lg);
font-size: 16px;
}
/*#endregion Trigger - Sizes*/
/*#region Trigger - Variants*/
.fod-select--outlined .fod-select__trigger[b-b08mwj753s] {
background-color: transparent;
}
.fod-select--outlined .fod-select__trigger:hover:not(:disabled):not(:focus-visible)[b-b08mwj753s] {
border-color: var(--gray-400);
box-shadow: 0 0 0 0.5px var(--gray-400);
}
.fod-select--outlined .fod-select__trigger:focus-visible[b-b08mwj753s] {
border-color: var(--color-border-brand-default, #0058D2);
outline: none;
box-shadow: 0 0 0 4px rgba(0, 88, 210, 0.12);
}
/* Primary Variant */
.fod-select--primary .fod-select__trigger[b-b08mwj753s] {
background-color: var(--color-background-base-default, var(--white, #FFFFFF));
color: var(--color-text-base-default, var(--black-1000, #121212));
border: var(--border-width-1, 1px) solid var(--color-border-brand-default, var(--blue-sky-600, #0058D2));
}
.fod-select--primary .fod-select__trigger:hover:not(:disabled)[b-b08mwj753s] {
border: var(--border-width-2, 2px) solid var(--color-border-brand-default, var(--blue-sky-600, #0058D2));
}
.fod-select--primary .fod-select__trigger:focus-visible[b-b08mwj753s] {
border: var(--border-width-2, 2px) solid var(--color-border-brand-default, var(--blue-sky-600, #0058D2));
}
.fod-select--primary .fod-select__placeholder[b-b08mwj753s] {
color: var(--color-text-base-default, var(--black-1000, #121212));
}
/* Secondary Variant */
.fod-select--secondary .fod-select__trigger[b-b08mwj753s] {
background-color: var(--color-background-base-default, var(--white, #FFFFFF));
color: var(--color-text-base-default, var(--black-1000, #121212));
border: var(--border-width-1, 1px) solid var(--blue-sky-300, #99BCED);
}
.fod-select--secondary .fod-select__trigger:hover:not(:disabled)[b-b08mwj753s] {
border: var(--border-width-2, 2px) solid var(--blue-sky-300, #99BCED);
}
.fod-select--secondary .fod-select__trigger:focus-visible[b-b08mwj753s] {
border: var(--border-width-2, 2px) solid var(--blue-sky-300, #99BCED);
}
.fod-select--secondary .fod-select__placeholder[b-b08mwj753s] {
color: var(--color-text-base-default, var(--black-1000, #121212));
}
/* Strict Variant */
.fod-select--strict .fod-select__trigger[b-b08mwj753s] {
background-color: var(--color-background-base-default, var(--white, #FFFFFF));
color: var(--color-text-base-default, var(--black-1000, #121212));
border: var(--border-width-1, 1px) solid var(--black-1000, #121212);
}
.fod-select--strict .fod-select__trigger:hover:not(:disabled)[b-b08mwj753s] {
border: var(--border-width-2, 2px) solid var(--black-1000, #121212);
}
.fod-select--strict .fod-select__trigger:focus-visible[b-b08mwj753s] {
border: var(--border-width-2, 2px) solid var(--black-1000, #121212);
}
.fod-select--strict .fod-select__placeholder[b-b08mwj753s] {
color: var(--color-text-base-default, var(--black-1000, #121212));
}
/* Neutral Variant */
.fod-select--neutral .fod-select__trigger[b-b08mwj753s] {
background-color: var(--color-background-base-default, var(--white, #FFFFFF));
color: var(--color-text-base-default, var(--black-1000, #121212));
border: var(--border-width-1, 1px) solid var(--color-border-base-secondary, var(--gray-300));
}
.fod-select--neutral .fod-select__trigger:hover:not(:disabled)[b-b08mwj753s] {
border: var(--border-width-2, 2px) solid var(--color-border-base-secondary, var(--gray-300));
}
.fod-select--neutral .fod-select__trigger:focus-visible[b-b08mwj753s] {
border: var(--border-width-2, 2px) solid var(--color-border-base-secondary, var(--gray-300));
}
.fod-select--neutral .fod-select__placeholder[b-b08mwj753s] {
color: var(--color-text-base-default, var(--black-1000, #121212));
}
/* Destructive Variant */
.fod-select--destructive .fod-select__trigger[b-b08mwj753s] {
background-color: var(--color-background-base-default, var(--white, #FFFFFF));
color: var(--color-text-base-default, var(--black-1000, #121212));
border: var(--border-width-1, 1px) solid var(--color-border-danger-default, var(--red-600, #DC3545));
}
.fod-select--destructive .fod-select__trigger:hover:not(:disabled)[b-b08mwj753s] {
border: var(--border-width-2, 2px) solid var(--color-border-danger-default, var(--red-600, #DC3545));
}
.fod-select--destructive .fod-select__trigger:focus-visible[b-b08mwj753s] {
border: var(--border-width-2, 2px) solid var(--color-border-danger-default, var(--red-600, #DC3545));
outline: none;
box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12);
}
.fod-select--destructive .fod-select__placeholder[b-b08mwj753s] {
color: var(--color-text-base-default, var(--black-1000, #121212));
}
/*#endregion Trigger - Variants*/
/*#region Backdrop*/
.fod-select__backdrop[b-b08mwj753s] {
position: fixed;
inset: 0;
z-index: 99;
background-color: transparent;
cursor: default;
}
/*#endregion Backdrop*/
/*#region Value Display*/
.fod-select__value[b-b08mwj753s] {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fod-select__placeholder[b-b08mwj753s] {
color: var(--color-text-base-tertiary, var(--gray-400, #757575));
}
/*#endregion Value Display*/
/*#region Chips*/
.fod-select__chips[b-b08mwj753s] {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.fod-select__chip[b-b08mwj753s] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background-color: var(--blue-sky-100);
border-radius: 4px;
font-size: 12px;
color: var(--gray-900);
}
.chip__label[b-b08mwj753s] {
max-inline-size: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chip__close[b-b08mwj753s] {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 16px;
block-size: 16px;
padding: 0;
background: none;
border: none;
border-radius: 50%;
font-size: 14px;
line-height: 1;
color: var(--gray-600);
cursor: pointer;
transition: background-color 0.2s ease;
}
.chip__close:hover[b-b08mwj753s] {
background-color: var(--gray-200);
}
.chip__close:focus-visible[b-b08mwj753s] {
outline: 2px solid var(--blue-sky-600);
outline-offset: 2px;
}
/*#endregion Chips*/
/*#region Icons*/
.fod-select__icon-start[b-b08mwj753s],
.fod-select__icon-clear[b-b08mwj753s],
.fod-select__icon-dropdown[b-b08mwj753s] {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fod-select__icon-clear[b-b08mwj753s] {
inline-size: 20px;
block-size: 20px;
padding: 0;
background: none;
border: none;
border-radius: 50%;
font-size: 18px;
line-height: 1;
color: var(--gray-600);
cursor: pointer;
transition: background-color 0.2s ease;
}
.fod-select__icon-clear:hover[b-b08mwj753s] {
background-color: var(--gray-200);
}
.fod-select__icon-dropdown[b-b08mwj753s] {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-icon-base-secondary, var(--gray-600, #444444));
transition: transform 0.2s ease;
}
.fod-select__icon-dropdown--open[b-b08mwj753s] {
transform: rotate(180deg);
}
.fod-select__trigger:disabled .fod-select__icon-dropdown[b-b08mwj753s] {
color: var(--color-icon-disabled-on-disabled, var(--gray-300));
}
/*#endregion Icons*/
/*#region Dropdown*/
.fod-select__dropdown[b-b08mwj753s] {
position: absolute;
inset-block-start: 100%;
inset-inline-start: 0;
inline-size: 100%;
margin-block-start: 8px;
background-color: var(--fod-select-dropdown-bg);
border: var(--border-width-1-5, 1.5px) solid var(--fod-select-border-color);
border-radius: var(--fod-select-dropdown-border-radius);
box-shadow: var(--fod-select-dropdown-shadow);
z-index: var(--fod-select-dropdown-z-index);
max-block-size: var(--fod-select-dropdown-max-height);
overflow: hidden;
padding: var(--spacing-8, 8px);
display: flex;
flex-direction: column;
}
.fod-select__dropdown--auto-width[b-b08mwj753s] {
inline-size: max-content;
max-inline-size: var(--fod-select-dropdown-max-width, none);
}
@media (max-width: 768px) {
.fod-select__dropdown[b-b08mwj753s] {
position: fixed;
inset-block-end: 0;
inset-inline: 0;
inset-block-start: auto;
inline-size: 100%;
max-block-size: 50vh;
border-radius: 16px 16px 0 0;
}
.fod-select__dropdown--auto-width[b-b08mwj753s] {
inline-size: 100%;
max-inline-size: none;
}
}
/*#endregion Dropdown*/
/*#region Search*/
.fod-select__search[b-b08mwj753s] {
padding: 6px;
}
.fod-select__search-input[b-b08mwj753s] {
inline-size: 100%;
padding: 8px 12px;
background-color: var(--fod-select-bg);
border: 1.5px solid var(--fod-select-border-color);
border-radius: 6px;
font-size: var(--fod-select-font-size);
color: var(--fod-select-text-color);
}
.fod-select__search-input:focus[b-b08mwj753s] {
outline: none;
border-color: var(--blue-sky-600);
box-shadow: var(--fod-select-focus-ring);
}
/*#endregion Search*/
/*#region Options List*/
.fod-select__list[b-b08mwj753s] {
list-style: none;
margin: 0;
margin-block-start: 6px;
padding: 4px;
overflow-y: auto;
flex: 1;
display: flex;
flex-direction: column;
gap: var(--spacing-4, 4px);
}
/*#endregion Options List*/
/*#region Option*/
/* Use ::deep to apply styles to dynamically rendered elements created via RenderTreeBuilder */
.fod-select__list[b-b08mwj753s] .fod-select__option {
display: flex;
align-items: center;
gap: var(--spacing-12, 12px);
padding: var(--fod-select-option-padding);
border-radius: 6px;
cursor: pointer;
transition: background-color 0.15s ease;
color: var(--color-text-base-secondary, var(--gray-700, #383838));
font-weight: var(--font-weight-medium, 500);
font-size: var(--font-size-14, 14px);
line-height: var(--line-height-20, 20px);
}
.fod-select__list[b-b08mwj753s] .fod-select__option:hover:not(.fod-select__option--disabled) {
background-color: var(--fod-select-option-bg-hover);
color: var(--color-text-brand-default, var(--blue-sky-600, #0058D2));
}
.fod-select__list[b-b08mwj753s] .fod-select__option--active {
background-color: var(--fod-select-option-bg-active);
}
.fod-select__list[b-b08mwj753s] .fod-select__option--selected {
background-color: var(--fod-select-option-bg-selected);
color: var(--color-text-brand-default, var(--blue-sky-600, #0058D2));
font-weight: 600;
}
.fod-select__list[b-b08mwj753s] .fod-select__option--selected .fod-icon {
color: var(--color-icon-brand-default, var(--blue-sky-600, #0058D2));
flex-shrink: 0;
margin-inline-start: auto;
}
.fod-select__list[b-b08mwj753s] .fod-select__option--disabled {
color: var(--fod-select-disabled-text);
cursor: not-allowed;
opacity: 0.6;
}
.fod-select__list[b-b08mwj753s] .fod-select__option-icon {
flex-shrink: 0;
}
.fod-select__list[b-b08mwj753s] .fod-select__option-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*#endregion Option*/
/*#region Loading & Empty States*/
/* Use ::deep for dynamically rendered loading/no-items states */
.fod-select__list[b-b08mwj753s] .fod-select__loading,
.fod-select__list[b-b08mwj753s] .fod-select__no-items {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
color: var(--gray-500);
font-size: 14px;
}
/*#endregion Loading & Empty States*/
/*#region Helper & Error Text*/
.fod-select__helper[b-b08mwj753s] {
font-size: 12px;
color: var(--gray-600);
}
.fod-select__error[b-b08mwj753s] {
font-size: 12px;
color: var(--fod-select-error-text);
}
/*#endregion Helper & Error Text*/
/*#region Screen Reader Only*/
.fod-select__sr-only[b-b08mwj753s] {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/*#endregion Screen Reader Only*/
/*#region RTL Support*/
[dir="rtl"] .fod-select__icon-dropdown[b-b08mwj753s] {
transform: scaleX(-1);
}
[dir="rtl"] .fod-select__icon-dropdown--open[b-b08mwj753s] {
transform: scaleX(-1) rotate(180deg);
}
/*#endregion RTL Support*/
/*#region Reduced Motion*/
@media (prefers-reduced-motion: reduce) {
.fod-select__trigger[b-b08mwj753s],
.fod-select__option[b-b08mwj753s],
.fod-select__icon-dropdown[b-b08mwj753s],
.chip__close[b-b08mwj753s] {
transition: none;
}
}
/*#endregion Reduced Motion*/
/* _content/FOD.UIComponents/Components/LanguageSwitch/FodLanguageSwitch.razor.rz.scp.css */
/* Base container */
.fod-language-switcher[b-vn3gnf89pj] {
position: relative;
display: inline-flex;
}
.fod-language-switcher--inline .fod-language-switcher__list[b-vn3gnf89pj] {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
}
.fod-language-switcher--inline .fod-language-switcher__list li[b-vn3gnf89pj] {
margin: 0;
}
.fod-language-switcher--inline .fod-language-switcher__list a[b-vn3gnf89pj] {
display: block;
padding: var(--spacing-8, 8px) var(--spacing-8, 8px);
color: var(--color-text-base-secondary, var(--gray-700, #616161));
text-decoration: underline;
font-size: var(--font-size-sm, 0.875rem);
font-weight: 500;
text-transform: capitalize;
transition: color 0.2s ease;
}
.fod-language-switcher--inline .fod-language-switcher__list a:hover[b-vn3gnf89pj] {
color: var(--blue-sky-600, #1976d2);
}
.fod-language-switcher--inline .fod-language-switcher__list a.active[b-vn3gnf89pj] {
color: var(--color-text-base-primary, #212121);
font-weight: 600;
}
.fod-language-switcher--disabled.fod-language-switcher--inline .fod-language-switcher__list a[b-vn3gnf89pj] {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
.fod-language-switcher__toggle[b-vn3gnf89pj] {
display: inline-flex;
align-items: center;
gap: var(--spacing-0, 0px);
padding: var(--spacing-6, 6px) var(--spacing-16, 16px);
padding-left: var(--spacing-4, 4px);
border-radius: var(--border-radius-24, 24px);
color: var(--color-text-base-secondary, var(--gray-700, #616161));
font-family: inherit;
font-size: var(--font-size-sm, 0.875rem);
font-weight: 500;
line-height: 1.5;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
}
.fod-language-switcher__toggle:focus-visible[b-vn3gnf89pj] {
outline: 2px solid var(--blue-sky-600, #1976d2);
outline-offset: 2px;
}
.fod-language-switcher__toggle:disabled[b-vn3gnf89pj] {
opacity: 0.5;
cursor: not-allowed;
}
.fod-language-switcher__icon[b-vn3gnf89pj] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-4, 4px);
color: var(--color-text-base-secondary, var(--gray-600, #757575));
}
/* Dropdown menu */
.fod-language-switcher__menu[b-vn3gnf89pj] {
position: absolute;
top: calc(100% + var(--spacing-8, 8px));
right: 0;
background: var(--color-background-base-default, var(--white, #ffffff));
border-radius: var(--border-radius-16, 16px);
box-shadow: var(--drop-shadow-300, 0 4px 12px rgba(0, 0, 0, 0.15));
padding: var(--spacing-8, 8px);
width: 150px;
z-index: var(--z-index-dropdown, 1200);
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateY(0);
}
@media (max-width: 768px) {
.fod-language-switcher__menu[b-vn3gnf89pj] {
right: 0;
left: -10px;
margin: 0 auto;
top: calc(100% + var(--spacing-8, 8px));
}
}
.fod-language-switcher__menu.hidden[b-vn3gnf89pj] {
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
}
.fod-language-switcher__menu ul[b-vn3gnf89pj] {
list-style: none;
margin: 0;
padding: 0;
}
.fod-language-switcher__menu ul a[b-vn3gnf89pj] {
color: var(--color-text-base-secondary, var(--gray-700, #616161));
display: block;
text-decoration: none;
}
.fod-language-switcher__menu ul li[b-vn3gnf89pj] {
display: flex;
align-items: center;
border-radius: var(--border-radius-8, 8px);
justify-content: space-between;
margin-bottom: 0;
padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
cursor: pointer;
transition: background-color 0.15s ease;
}
.fod-language-switcher__menu ul li:hover[b-vn3gnf89pj] {
background-color: var(--color-background-base-secondary, var(--gray-100, #f5f5f5));
}
.fod-language-switcher__menu ul li:hover a[b-vn3gnf89pj] {
color: var(--blue-sky-600, #1976d2);
}
.fod-language-switcher__menu ul li.focused[b-vn3gnf89pj] {
background-color: var(--color-background-base-secondary, var(--gray-100, #f5f5f5));
}
.fod-language-switcher__menu ul li.active[b-vn3gnf89pj] {
background-color: var(--blue-sky-100, rgba(25, 118, 210, 0.08));
}
.fod-language-switcher__menu ul li.active a[b-vn3gnf89pj] {
color: var(--blue-sky-600, #1976d2);
}
.fod-language-switcher__menu ul li.active .fod-language-switcher__check svg[b-vn3gnf89pj] {
color: var(--blue-sky-600, #1976d2);
opacity: 1;
visibility: visible;
}
.fod-language-switcher__item[b-vn3gnf89pj] {
flex: 1;
font-size: var(--font-size-sm, 0.875rem);
}
.fod-language-switcher__check[b-vn3gnf89pj] {
display: inline-flex;
align-items: center;
justify-content: center;
}
.fod-language-switcher__check svg[b-vn3gnf89pj] {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
color: var(--blue-sky-600, #1976d2);
}
/* States */
.fod-language-switcher--disabled .fod-language-switcher__toggle[b-vn3gnf89pj] {
opacity: 0.5;
cursor: not-allowed;
}
.fod-language-switcher--changing .fod-language-switcher__toggle[b-vn3gnf89pj] {
pointer-events: none;
}
/* Screen reader only text */
.fod-language-switcher__sr-only[b-vn3gnf89pj] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* _content/FOD.UIComponents/Components/Layout/FodContainer.razor.rz.scp.css */
/* #region Base Styles */
.fod-container[b-m9pp8e3t0c] {
width: 100%;
margin-inline: auto;
box-sizing: border-box;
padding-inline: var(--spacing-12, 12px);
padding-block: var(--spacing-16, 16px);
}
/* #endregion */
/* #region MaxWidth Modifiers */
.fod-container--sm[b-m9pp8e3t0c] {
max-width: 540px;
}
.fod-container--md[b-m9pp8e3t0c] {
max-width: 720px;
}
.fod-container--lg[b-m9pp8e3t0c] {
max-width: 960px;
}
.fod-container--xl[b-m9pp8e3t0c] {
max-width: 1248px;
}
.fod-container--xxl[b-m9pp8e3t0c] {
max-width: 1320px;
}
/* #endregion */
/* #region Fluid Modifier */
.fod-container--fluid[b-m9pp8e3t0c] {
max-width: none;
}
/* #endregion */
/* #region FullBleed Modifier */
.fod-container--fullbleed[b-m9pp8e3t0c] {
padding-inline: 0;
}
/* #endregion */
/* #region Safe-Area Support */
.fod-container--safearea[b-m9pp8e3t0c] {
padding-inline: max(env(safe-area-inset-left), var(--spacing-12, 12px))
max(env(safe-area-inset-right), var(--spacing-12, 12px));
}
/* #endregion */
/* #region Density Modifiers */
.fod-container--compact[b-m9pp8e3t0c] {
padding-inline: var(--spacing-8, 8px);
padding-block: var(--spacing-8, 8px);
}
/* #endregion */
/* _content/FOD.UIComponents/Components/Layout/FodDivider.razor.rz.scp.css */
/*#region Base Styles*/
.fod-divider[b-n7pmo28rup] {
border: 0;
margin: 0;
flex-shrink: 0;
background-color: var(--fod-divider-color, var(--color-border-base-default));
}
/*#endregion*/
/*#region Orientation*/
.fod-divider--horizontal[b-n7pmo28rup] {
block-size: var(--fod-divider-thickness, 1px);
inline-size: 100%;
}
.fod-divider--vertical[b-n7pmo28rup] {
inline-size: var(--fod-divider-thickness, 1px);
block-size: 100%;
align-self: stretch;
}
/*#endregion*/
/*#region Insets*/
.fod-divider--inset-padding[b-n7pmo28rup] {
margin-inline: var(--spacing-12);
inline-size: calc(100% - var(--spacing-12) * 2);
}
.fod-divider--inset-content[b-n7pmo28rup] {
margin-inline: var(--spacing-24);
inline-size: calc(100% - var(--spacing-24) * 2);
}
/*#endregion*/
/* _content/FOD.UIComponents/Components/Layout/FodGrid.razor.rz.scp.css */
/*
* FodGrid - 12-Column Grid System (Isolated CSS)
* Uses CSS custom properties for gap inheritance to handle nested grids correctly.
*/
/*#region Base Grid Styles*/
.fod-grid[b-llfrcl7ezz] {
display: flex;
flex-wrap: wrap;
--fod-grid-gap-x: 12px;
margin-inline-start: calc(-1 * var(--fod-grid-gap-x));
margin-inline-end: calc(-1 * var(--fod-grid-gap-x));
margin: var(--spacing-12, 12px) 0;
}
/*#endregion*/
/*#region Base Item Styles (via ::deep)*/
.fod-grid[b-llfrcl7ezz] > [class*="fod-grid-item"] {
padding-inline-start: var(--fod-grid-gap-x);
padding-inline-end: var(--fod-grid-gap-x);
box-sizing: border-box;
max-width: 100%;
min-width: 0;
}
/*#endregion*/
/*#region GapX Modifiers (Horizontal Spacing)*/
/* GapX 0 (0px total) */
.fod-grid.fod-grid--gap-x-0[b-llfrcl7ezz] {
--fod-grid-gap-x: 0px;
}
/* GapX 2 (2px total, 1px each side) */
.fod-grid.fod-grid--gap-x-2[b-llfrcl7ezz] {
--fod-grid-gap-x: 1px;
}
/* GapX 4 (4px total, 2px each side) */
.fod-grid.fod-grid--gap-x-4[b-llfrcl7ezz] {
--fod-grid-gap-x: 2px;
}
/* GapX 6 (6px total, 3px each side) */
.fod-grid.fod-grid--gap-x-6[b-llfrcl7ezz] {
--fod-grid-gap-x: 3px;
}
/* GapX 8 (8px total, 4px each side) */
.fod-grid.fod-grid--gap-x-8[b-llfrcl7ezz] {
--fod-grid-gap-x: 4px;
}
/* GapX 12 (12px total, 6px each side) */
.fod-grid.fod-grid--gap-x-12[b-llfrcl7ezz] {
--fod-grid-gap-x: 6px;
}
/* GapX 16 (16px total, 8px each side) */
.fod-grid.fod-grid--gap-x-16[b-llfrcl7ezz] {
--fod-grid-gap-x: 8px;
}
/* GapX 20 (20px total, 10px each side) */
.fod-grid.fod-grid--gap-x-20[b-llfrcl7ezz] {
--fod-grid-gap-x: 10px;
}
/* GapX 24 (24px total, 12px each side) - Default */
.fod-grid.fod-grid--gap-x-24[b-llfrcl7ezz] {
--fod-grid-gap-x: 12px;
}
/* GapX 32 (32px total, 16px each side) */
.fod-grid.fod-grid--gap-x-32[b-llfrcl7ezz] {
--fod-grid-gap-x: 16px;
}
/* GapX 40 (40px total, 20px each side) */
.fod-grid.fod-grid--gap-x-40[b-llfrcl7ezz] {
--fod-grid-gap-x: 20px;
}
/* GapX 48 (48px total, 24px each side) */
.fod-grid.fod-grid--gap-x-48[b-llfrcl7ezz] {
--fod-grid-gap-x: 24px;
}
/* GapX 56 (56px total, 28px each side) */
.fod-grid.fod-grid--gap-x-56[b-llfrcl7ezz] {
--fod-grid-gap-x: 28px;
}
/* GapX 64 (64px total, 32px each side) */
.fod-grid.fod-grid--gap-x-64[b-llfrcl7ezz] {
--fod-grid-gap-x: 32px;
}
/* GapX 72 (72px total, 36px each side) */
.fod-grid.fod-grid--gap-x-72[b-llfrcl7ezz] {
--fod-grid-gap-x: 36px;
}
/*#endregion*/
/*#region GapY Modifiers (Vertical Spacing)*/
.fod-grid.fod-grid--gap-y-0[b-llfrcl7ezz] { row-gap: 0; }
.fod-grid.fod-grid--gap-y-2[b-llfrcl7ezz] { row-gap: var(--spacing-2, 2px); }
.fod-grid.fod-grid--gap-y-4[b-llfrcl7ezz] { row-gap: var(--spacing-4, 4px); }
.fod-grid.fod-grid--gap-y-6[b-llfrcl7ezz] { row-gap: var(--spacing-6, 6px); }
.fod-grid.fod-grid--gap-y-8[b-llfrcl7ezz] { row-gap: var(--spacing-8, 8px); }
.fod-grid.fod-grid--gap-y-12[b-llfrcl7ezz] { row-gap: var(--spacing-12, 12px); }
.fod-grid.fod-grid--gap-y-16[b-llfrcl7ezz] { row-gap: var(--spacing-16, 16px); }
.fod-grid.fod-grid--gap-y-20[b-llfrcl7ezz] { row-gap: var(--spacing-20, 20px); }
.fod-grid.fod-grid--gap-y-24[b-llfrcl7ezz] { row-gap: var(--spacing-24, 24px); }
.fod-grid.fod-grid--gap-y-32[b-llfrcl7ezz] { row-gap: var(--spacing-32, 32px); }
.fod-grid.fod-grid--gap-y-40[b-llfrcl7ezz] { row-gap: var(--spacing-40, 40px); }
.fod-grid.fod-grid--gap-y-48[b-llfrcl7ezz] { row-gap: var(--spacing-48, 48px); }
.fod-grid.fod-grid--gap-y-56[b-llfrcl7ezz] { row-gap: var(--spacing-56, 56px); }
.fod-grid.fod-grid--gap-y-64[b-llfrcl7ezz] { row-gap: var(--spacing-64, 64px); }
.fod-grid.fod-grid--gap-y-72[b-llfrcl7ezz] { row-gap: var(--spacing-72, 72px); }
/*#endregion*/
/*#region Justify Content*/
.fod-grid.fod-grid--justify-start[b-llfrcl7ezz] { justify-content: flex-start; }
.fod-grid.fod-grid--justify-end[b-llfrcl7ezz] { justify-content: flex-end; }
.fod-grid.fod-grid--justify-center[b-llfrcl7ezz] { justify-content: center; }
.fod-grid.fod-grid--justify-between[b-llfrcl7ezz] { justify-content: space-between; }
.fod-grid.fod-grid--justify-around[b-llfrcl7ezz] { justify-content: space-around; }
.fod-grid.fod-grid--justify-evenly[b-llfrcl7ezz] { justify-content: space-evenly; }
/*#endregion*/
/*#region Align Items*/
.fod-grid.fod-grid--align-stretch[b-llfrcl7ezz] { align-items: stretch; }
.fod-grid.fod-grid--align-start[b-llfrcl7ezz] { align-items: flex-start; }
.fod-grid.fod-grid--align-end[b-llfrcl7ezz] { align-items: flex-end; }
.fod-grid.fod-grid--align-center[b-llfrcl7ezz] { align-items: center; }
.fod-grid.fod-grid--align-baseline[b-llfrcl7ezz] { align-items: baseline; }
/*#endregion*/
/*#region Align Content*/
.fod-grid.fod-grid--content-start[b-llfrcl7ezz] { align-content: flex-start; }
.fod-grid.fod-grid--content-end[b-llfrcl7ezz] { align-content: flex-end; }
.fod-grid.fod-grid--content-center[b-llfrcl7ezz] { align-content: center; }
.fod-grid.fod-grid--content-between[b-llfrcl7ezz] { align-content: space-between; }
.fod-grid.fod-grid--content-around[b-llfrcl7ezz] { align-content: space-around; }
.fod-grid.fod-grid--content-evenly[b-llfrcl7ezz] { align-content: space-evenly; }
.fod-grid.fod-grid--content-stretch[b-llfrcl7ezz] { align-content: stretch; }
/*#endregion*/
/*#region Density Modifiers*/
/* Compact density reduces spacing by ~50% */
.fod-grid.fod-grid--density-compact[b-llfrcl7ezz] {
--fod-grid-gap-x: 6px;
}
/*#endregion*/
/* _content/FOD.UIComponents/Components/Layout/FodItem.razor.rz.scp.css */
/*
* FodItem - Grid Item Styles (Isolated CSS)
* Span, offset, order, and alignment classes for the 12-column grid system.
*/
/*#region Item Span Classes - Base*/
.fod-grid-item-1[b-ujj8v7xc70] { width: 8.3333333333%; flex: 0 0 8.3333333333%; }
.fod-grid-item-2[b-ujj8v7xc70] { width: 16.6666666667%; flex: 0 0 16.6666666667%; }
.fod-grid-item-3[b-ujj8v7xc70] { width: 25%; flex: 0 0 25%; }
.fod-grid-item-4[b-ujj8v7xc70] { width: 33.3333333333%; flex: 0 0 33.3333333333%; }
.fod-grid-item-5[b-ujj8v7xc70] { width: 41.6666666667%; flex: 0 0 41.6666666667%; }
.fod-grid-item-6[b-ujj8v7xc70] { width: 50%; flex: 0 0 50%; }
.fod-grid-item-7[b-ujj8v7xc70] { width: 58.3333333333%; flex: 0 0 58.3333333333%; }
.fod-grid-item-8[b-ujj8v7xc70] { width: 66.6666666667%; flex: 0 0 66.6666666667%; }
.fod-grid-item-9[b-ujj8v7xc70] { width: 75%; flex: 0 0 75%; }
.fod-grid-item-10[b-ujj8v7xc70] { width: 83.3333333333%; flex: 0 0 83.3333333333%; }
.fod-grid-item-11[b-ujj8v7xc70] { width: 91.6666666667%; flex: 0 0 91.6666666667%; }
.fod-grid-item-12[b-ujj8v7xc70] { width: 100%; flex: 0 0 100%; }
.fod-grid-item-auto[b-ujj8v7xc70] { width: auto; flex: 0 0 auto; }
/*#endregion*/
/*#region Item Span Classes - xs (0px+)*/
@media (min-width: 0) {
.fod-grid-item-xs-1[b-ujj8v7xc70] { width: 8.3333333333%; flex: 0 0 8.3333333333%; }
.fod-grid-item-xs-2[b-ujj8v7xc70] { width: 16.6666666667%; flex: 0 0 16.6666666667%; }
.fod-grid-item-xs-3[b-ujj8v7xc70] { width: 25%; flex: 0 0 25%; }
.fod-grid-item-xs-4[b-ujj8v7xc70] { width: 33.3333333333%; flex: 0 0 33.3333333333%; }
.fod-grid-item-xs-5[b-ujj8v7xc70] { width: 41.6666666667%; flex: 0 0 41.6666666667%; }
.fod-grid-item-xs-6[b-ujj8v7xc70] { width: 50%; flex: 0 0 50%; }
.fod-grid-item-xs-7[b-ujj8v7xc70] { width: 58.3333333333%; flex: 0 0 58.3333333333%; }
.fod-grid-item-xs-8[b-ujj8v7xc70] { width: 66.6666666667%; flex: 0 0 66.6666666667%; }
.fod-grid-item-xs-9[b-ujj8v7xc70] { width: 75%; flex: 0 0 75%; }
.fod-grid-item-xs-10[b-ujj8v7xc70] { width: 83.3333333333%; flex: 0 0 83.3333333333%; }
.fod-grid-item-xs-11[b-ujj8v7xc70] { width: 91.6666666667%; flex: 0 0 91.6666666667%; }
.fod-grid-item-xs-12[b-ujj8v7xc70] { width: 100%; flex: 0 0 100%; }
.fod-grid-item-xs-auto[b-ujj8v7xc70] { width: auto; flex: 0 0 auto; }
}
/*#endregion*/
/*#region Item Span Classes - sm (576px+)*/
@media (min-width: 576px) {
.fod-grid-item-sm-1[b-ujj8v7xc70] { width: 8.3333333333%; flex: 0 0 8.3333333333%; }
.fod-grid-item-sm-2[b-ujj8v7xc70] { width: 16.6666666667%; flex: 0 0 16.6666666667%; }
.fod-grid-item-sm-3[b-ujj8v7xc70] { width: 25%; flex: 0 0 25%; }
.fod-grid-item-sm-4[b-ujj8v7xc70] { width: 33.3333333333%; flex: 0 0 33.3333333333%; }
.fod-grid-item-sm-5[b-ujj8v7xc70] { width: 41.6666666667%; flex: 0 0 41.6666666667%; }
.fod-grid-item-sm-6[b-ujj8v7xc70] { width: 50%; flex: 0 0 50%; }
.fod-grid-item-sm-7[b-ujj8v7xc70] { width: 58.3333333333%; flex: 0 0 58.3333333333%; }
.fod-grid-item-sm-8[b-ujj8v7xc70] { width: 66.6666666667%; flex: 0 0 66.6666666667%; }
.fod-grid-item-sm-9[b-ujj8v7xc70] { width: 75%; flex: 0 0 75%; }
.fod-grid-item-sm-10[b-ujj8v7xc70] { width: 83.3333333333%; flex: 0 0 83.3333333333%; }
.fod-grid-item-sm-11[b-ujj8v7xc70] { width: 91.6666666667%; flex: 0 0 91.6666666667%; }
.fod-grid-item-sm-12[b-ujj8v7xc70] { width: 100%; flex: 0 0 100%; }
.fod-grid-item-sm-auto[b-ujj8v7xc70] { width: auto; flex: 0 0 auto; }
}
/*#endregion*/
/*#region Item Span Classes - md (768px+)*/
@media (min-width: 768px) {
.fod-grid-item-md-1[b-ujj8v7xc70] { width: 8.3333333333%; flex: 0 0 8.3333333333%; }
.fod-grid-item-md-2[b-ujj8v7xc70] { width: 16.6666666667%; flex: 0 0 16.6666666667%; }
.fod-grid-item-md-3[b-ujj8v7xc70] { width: 25%; flex: 0 0 25%; }
.fod-grid-item-md-4[b-ujj8v7xc70] { width: 33.3333333333%; flex: 0 0 33.3333333333%; }
.fod-grid-item-md-5[b-ujj8v7xc70] { width: 41.6666666667%; flex: 0 0 41.6666666667%; }
.fod-grid-item-md-6[b-ujj8v7xc70] { width: 50%; flex: 0 0 50%; }
.fod-grid-item-md-7[b-ujj8v7xc70] { width: 58.3333333333%; flex: 0 0 58.3333333333%; }
.fod-grid-item-md-8[b-ujj8v7xc70] { width: 66.6666666667%; flex: 0 0 66.6666666667%; }
.fod-grid-item-md-9[b-ujj8v7xc70] { width: 75%; flex: 0 0 75%; }
.fod-grid-item-md-10[b-ujj8v7xc70] { width: 83.3333333333%; flex: 0 0 83.3333333333%; }
.fod-grid-item-md-11[b-ujj8v7xc70] { width: 91.6666666667%; flex: 0 0 91.6666666667%; }
.fod-grid-item-md-12[b-ujj8v7xc70] { width: 100%; flex: 0 0 100%; }
.fod-grid-item-md-auto[b-ujj8v7xc70] { width: auto; flex: 0 0 auto; }
}
/*#endregion*/
/*#region Item Span Classes - lg (992px+)*/
@media (min-width: 992px) {
.fod-grid-item-lg-1[b-ujj8v7xc70] { width: 8.3333333333%; flex: 0 0 8.3333333333%; }
.fod-grid-item-lg-2[b-ujj8v7xc70] { width: 16.6666666667%; flex: 0 0 16.6666666667%; }
.fod-grid-item-lg-3[b-ujj8v7xc70] { width: 25%; flex: 0 0 25%; }
.fod-grid-item-lg-4[b-ujj8v7xc70] { width: 33.3333333333%; flex: 0 0 33.3333333333%; }
.fod-grid-item-lg-5[b-ujj8v7xc70] { width: 41.6666666667%; flex: 0 0 41.6666666667%; }
.fod-grid-item-lg-6[b-ujj8v7xc70] { width: 50%; flex: 0 0 50%; }
.fod-grid-item-lg-7[b-ujj8v7xc70] { width: 58.3333333333%; flex: 0 0 58.3333333333%; }
.fod-grid-item-lg-8[b-ujj8v7xc70] { width: 66.6666666667%; flex: 0 0 66.6666666667%; }
.fod-grid-item-lg-9[b-ujj8v7xc70] { width: 75%; flex: 0 0 75%; }
.fod-grid-item-lg-10[b-ujj8v7xc70] { width: 83.3333333333%; flex: 0 0 83.3333333333%; }
.fod-grid-item-lg-11[b-ujj8v7xc70] { width: 91.6666666667%; flex: 0 0 91.6666666667%; }
.fod-grid-item-lg-12[b-ujj8v7xc70] { width: 100%; flex: 0 0 100%; }
.fod-grid-item-lg-auto[b-ujj8v7xc70] { width: auto; flex: 0 0 auto; }
}
/*#endregion*/
/*#region Item Span Classes - xl (1280px+)*/
@media (min-width: 1280px) {
.fod-grid-item-xl-1[b-ujj8v7xc70] { width: 8.3333333333%; flex: 0 0 8.3333333333%; }
.fod-grid-item-xl-2[b-ujj8v7xc70] { width: 16.6666666667%; flex: 0 0 16.6666666667%; }
.fod-grid-item-xl-3[b-ujj8v7xc70] { width: 25%; flex: 0 0 25%; }
.fod-grid-item-xl-4[b-ujj8v7xc70] { width: 33.3333333333%; flex: 0 0 33.3333333333%; }
.fod-grid-item-xl-5[b-ujj8v7xc70] { width: 41.6666666667%; flex: 0 0 41.6666666667%; }
.fod-grid-item-xl-6[b-ujj8v7xc70] { width: 50%; flex: 0 0 50%; }
.fod-grid-item-xl-7[b-ujj8v7xc70] { width: 58.3333333333%; flex: 0 0 58.3333333333%; }
.fod-grid-item-xl-8[b-ujj8v7xc70] { width: 66.6666666667%; flex: 0 0 66.6666666667%; }
.fod-grid-item-xl-9[b-ujj8v7xc70] { width: 75%; flex: 0 0 75%; }
.fod-grid-item-xl-10[b-ujj8v7xc70] { width: 83.3333333333%; flex: 0 0 83.3333333333%; }
.fod-grid-item-xl-11[b-ujj8v7xc70] { width: 91.6666666667%; flex: 0 0 91.6666666667%; }
.fod-grid-item-xl-12[b-ujj8v7xc70] { width: 100%; flex: 0 0 100%; }
.fod-grid-item-xl-auto[b-ujj8v7xc70] { width: auto; flex: 0 0 auto; }
}
/*#endregion*/
/*#region Item Span Classes - xxl (1440px+)*/
@media (min-width: 1440px) {
.fod-grid-item-xxl-1[b-ujj8v7xc70] { width: 8.3333333333%; flex: 0 0 8.3333333333%; }
.fod-grid-item-xxl-2[b-ujj8v7xc70] { width: 16.6666666667%; flex: 0 0 16.6666666667%; }
.fod-grid-item-xxl-3[b-ujj8v7xc70] { width: 25%; flex: 0 0 25%; }
.fod-grid-item-xxl-4[b-ujj8v7xc70] { width: 33.3333333333%; flex: 0 0 33.3333333333%; }
.fod-grid-item-xxl-5[b-ujj8v7xc70] { width: 41.6666666667%; flex: 0 0 41.6666666667%; }
.fod-grid-item-xxl-6[b-ujj8v7xc70] { width: 50%; flex: 0 0 50%; }
.fod-grid-item-xxl-7[b-ujj8v7xc70] { width: 58.3333333333%; flex: 0 0 58.3333333333%; }
.fod-grid-item-xxl-8[b-ujj8v7xc70] { width: 66.6666666667%; flex: 0 0 66.6666666667%; }
.fod-grid-item-xxl-9[b-ujj8v7xc70] { width: 75%; flex: 0 0 75%; }
.fod-grid-item-xxl-10[b-ujj8v7xc70] { width: 83.3333333333%; flex: 0 0 83.3333333333%; }
.fod-grid-item-xxl-11[b-ujj8v7xc70] { width: 91.6666666667%; flex: 0 0 91.6666666667%; }
.fod-grid-item-xxl-12[b-ujj8v7xc70] { width: 100%; flex: 0 0 100%; }
.fod-grid-item-xxl-auto[b-ujj8v7xc70] { width: auto; flex: 0 0 auto; }
}
/*#endregion*/
/*#region Item Offset Classes - Base*/
.fod-grid-item-offset-0[b-ujj8v7xc70] { margin-inline-start: 0; }
.fod-grid-item-offset-1[b-ujj8v7xc70] { margin-inline-start: 8.3333333333%; }
.fod-grid-item-offset-2[b-ujj8v7xc70] { margin-inline-start: 16.6666666667%; }
.fod-grid-item-offset-3[b-ujj8v7xc70] { margin-inline-start: 25%; }
.fod-grid-item-offset-4[b-ujj8v7xc70] { margin-inline-start: 33.3333333333%; }
.fod-grid-item-offset-5[b-ujj8v7xc70] { margin-inline-start: 41.6666666667%; }
.fod-grid-item-offset-6[b-ujj8v7xc70] { margin-inline-start: 50%; }
.fod-grid-item-offset-7[b-ujj8v7xc70] { margin-inline-start: 58.3333333333%; }
.fod-grid-item-offset-8[b-ujj8v7xc70] { margin-inline-start: 66.6666666667%; }
.fod-grid-item-offset-9[b-ujj8v7xc70] { margin-inline-start: 75%; }
.fod-grid-item-offset-10[b-ujj8v7xc70] { margin-inline-start: 83.3333333333%; }
.fod-grid-item-offset-11[b-ujj8v7xc70] { margin-inline-start: 91.6666666667%; }
.fod-grid-item-offset-auto[b-ujj8v7xc70] { margin-inline-start: auto; }
/*#endregion*/
/*#region Item Offset Classes - xs (0px+)*/
@media (min-width: 0) {
.fod-grid-item-offset-xs-0[b-ujj8v7xc70] { margin-inline-start: 0; }
.fod-grid-item-offset-xs-1[b-ujj8v7xc70] { margin-inline-start: 8.3333333333%; }
.fod-grid-item-offset-xs-2[b-ujj8v7xc70] { margin-inline-start: 16.6666666667%; }
.fod-grid-item-offset-xs-3[b-ujj8v7xc70] { margin-inline-start: 25%; }
.fod-grid-item-offset-xs-4[b-ujj8v7xc70] { margin-inline-start: 33.3333333333%; }
.fod-grid-item-offset-xs-5[b-ujj8v7xc70] { margin-inline-start: 41.6666666667%; }
.fod-grid-item-offset-xs-6[b-ujj8v7xc70] { margin-inline-start: 50%; }
.fod-grid-item-offset-xs-7[b-ujj8v7xc70] { margin-inline-start: 58.3333333333%; }
.fod-grid-item-offset-xs-8[b-ujj8v7xc70] { margin-inline-start: 66.6666666667%; }
.fod-grid-item-offset-xs-9[b-ujj8v7xc70] { margin-inline-start: 75%; }
.fod-grid-item-offset-xs-10[b-ujj8v7xc70] { margin-inline-start: 83.3333333333%; }
.fod-grid-item-offset-xs-11[b-ujj8v7xc70] { margin-inline-start: 91.6666666667%; }
.fod-grid-item-offset-xs-auto[b-ujj8v7xc70] { margin-inline-start: auto; }
}
/*#endregion*/
/*#region Item Offset Classes - sm (576px+)*/
@media (min-width: 576px) {
.fod-grid-item-offset-sm-0[b-ujj8v7xc70] { margin-inline-start: 0; }
.fod-grid-item-offset-sm-1[b-ujj8v7xc70] { margin-inline-start: 8.3333333333%; }
.fod-grid-item-offset-sm-2[b-ujj8v7xc70] { margin-inline-start: 16.6666666667%; }
.fod-grid-item-offset-sm-3[b-ujj8v7xc70] { margin-inline-start: 25%; }
.fod-grid-item-offset-sm-4[b-ujj8v7xc70] { margin-inline-start: 33.3333333333%; }
.fod-grid-item-offset-sm-5[b-ujj8v7xc70] { margin-inline-start: 41.6666666667%; }
.fod-grid-item-offset-sm-6[b-ujj8v7xc70] { margin-inline-start: 50%; }
.fod-grid-item-offset-sm-7[b-ujj8v7xc70] { margin-inline-start: 58.3333333333%; }
.fod-grid-item-offset-sm-8[b-ujj8v7xc70] { margin-inline-start: 66.6666666667%; }
.fod-grid-item-offset-sm-9[b-ujj8v7xc70] { margin-inline-start: 75%; }
.fod-grid-item-offset-sm-10[b-ujj8v7xc70] { margin-inline-start: 83.3333333333%; }
.fod-grid-item-offset-sm-11[b-ujj8v7xc70] { margin-inline-start: 91.6666666667%; }
.fod-grid-item-offset-sm-auto[b-ujj8v7xc70] { margin-inline-start: auto; }
}
/*#endregion*/
/*#region Item Offset Classes - md (768px+)*/
@media (min-width: 768px) {
.fod-grid-item-offset-md-0[b-ujj8v7xc70] { margin-inline-start: 0; }
.fod-grid-item-offset-md-1[b-ujj8v7xc70] { margin-inline-start: 8.3333333333%; }
.fod-grid-item-offset-md-2[b-ujj8v7xc70] { margin-inline-start: 16.6666666667%; }
.fod-grid-item-offset-md-3[b-ujj8v7xc70] { margin-inline-start: 25%; }
.fod-grid-item-offset-md-4[b-ujj8v7xc70] { margin-inline-start: 33.3333333333%; }
.fod-grid-item-offset-md-5[b-ujj8v7xc70] { margin-inline-start: 41.6666666667%; }
.fod-grid-item-offset-md-6[b-ujj8v7xc70] { margin-inline-start: 50%; }
.fod-grid-item-offset-md-7[b-ujj8v7xc70] { margin-inline-start: 58.3333333333%; }
.fod-grid-item-offset-md-8[b-ujj8v7xc70] { margin-inline-start: 66.6666666667%; }
.fod-grid-item-offset-md-9[b-ujj8v7xc70] { margin-inline-start: 75%; }
.fod-grid-item-offset-md-10[b-ujj8v7xc70] { margin-inline-start: 83.3333333333%; }
.fod-grid-item-offset-md-11[b-ujj8v7xc70] { margin-inline-start: 91.6666666667%; }
.fod-grid-item-offset-md-auto[b-ujj8v7xc70] { margin-inline-start: auto; }
}
/*#endregion*/
/*#region Item Offset Classes - lg (992px+)*/
@media (min-width: 992px) {
.fod-grid-item-offset-lg-0[b-ujj8v7xc70] { margin-inline-start: 0; }
.fod-grid-item-offset-lg-1[b-ujj8v7xc70] { margin-inline-start: 8.3333333333%; }
.fod-grid-item-offset-lg-2[b-ujj8v7xc70] { margin-inline-start: 16.6666666667%; }
.fod-grid-item-offset-lg-3[b-ujj8v7xc70] { margin-inline-start: 25%; }
.fod-grid-item-offset-lg-4[b-ujj8v7xc70] { margin-inline-start: 33.3333333333%; }
.fod-grid-item-offset-lg-5[b-ujj8v7xc70] { margin-inline-start: 41.6666666667%; }
.fod-grid-item-offset-lg-6[b-ujj8v7xc70] { margin-inline-start: 50%; }
.fod-grid-item-offset-lg-7[b-ujj8v7xc70] { margin-inline-start: 58.3333333333%; }
.fod-grid-item-offset-lg-8[b-ujj8v7xc70] { margin-inline-start: 66.6666666667%; }
.fod-grid-item-offset-lg-9[b-ujj8v7xc70] { margin-inline-start: 75%; }
.fod-grid-item-offset-lg-10[b-ujj8v7xc70] { margin-inline-start: 83.3333333333%; }
.fod-grid-item-offset-lg-11[b-ujj8v7xc70] { margin-inline-start: 91.6666666667%; }
.fod-grid-item-offset-lg-auto[b-ujj8v7xc70] { margin-inline-start: auto; }
}
/*#endregion*/
/*#region Item Offset Classes - xl (1280px+)*/
@media (min-width: 1280px) {
.fod-grid-item-offset-xl-0[b-ujj8v7xc70] { margin-inline-start: 0; }
.fod-grid-item-offset-xl-1[b-ujj8v7xc70] { margin-inline-start: 8.3333333333%; }
.fod-grid-item-offset-xl-2[b-ujj8v7xc70] { margin-inline-start: 16.6666666667%; }
.fod-grid-item-offset-xl-3[b-ujj8v7xc70] { margin-inline-start: 25%; }
.fod-grid-item-offset-xl-4[b-ujj8v7xc70] { margin-inline-start: 33.3333333333%; }
.fod-grid-item-offset-xl-5[b-ujj8v7xc70] { margin-inline-start: 41.6666666667%; }
.fod-grid-item-offset-xl-6[b-ujj8v7xc70] { margin-inline-start: 50%; }
.fod-grid-item-offset-xl-7[b-ujj8v7xc70] { margin-inline-start: 58.3333333333%; }
.fod-grid-item-offset-xl-8[b-ujj8v7xc70] { margin-inline-start: 66.6666666667%; }
.fod-grid-item-offset-xl-9[b-ujj8v7xc70] { margin-inline-start: 75%; }
.fod-grid-item-offset-xl-10[b-ujj8v7xc70] { margin-inline-start: 83.3333333333%; }
.fod-grid-item-offset-xl-11[b-ujj8v7xc70] { margin-inline-start: 91.6666666667%; }
.fod-grid-item-offset-xl-auto[b-ujj8v7xc70] { margin-inline-start: auto; }
}
/*#endregion*/
/*#region Item Offset Classes - xxl (1440px+)*/
@media (min-width: 1440px) {
.fod-grid-item-offset-xxl-0[b-ujj8v7xc70] { margin-inline-start: 0; }
.fod-grid-item-offset-xxl-1[b-ujj8v7xc70] { margin-inline-start: 8.3333333333%; }
.fod-grid-item-offset-xxl-2[b-ujj8v7xc70] { margin-inline-start: 16.6666666667%; }
.fod-grid-item-offset-xxl-3[b-ujj8v7xc70] { margin-inline-start: 25%; }
.fod-grid-item-offset-xxl-4[b-ujj8v7xc70] { margin-inline-start: 33.3333333333%; }
.fod-grid-item-offset-xxl-5[b-ujj8v7xc70] { margin-inline-start: 41.6666666667%; }
.fod-grid-item-offset-xxl-6[b-ujj8v7xc70] { margin-inline-start: 50%; }
.fod-grid-item-offset-xxl-7[b-ujj8v7xc70] { margin-inline-start: 58.3333333333%; }
.fod-grid-item-offset-xxl-8[b-ujj8v7xc70] { margin-inline-start: 66.6666666667%; }
.fod-grid-item-offset-xxl-9[b-ujj8v7xc70] { margin-inline-start: 75%; }
.fod-grid-item-offset-xxl-10[b-ujj8v7xc70] { margin-inline-start: 83.3333333333%; }
.fod-grid-item-offset-xxl-11[b-ujj8v7xc70] { margin-inline-start: 91.6666666667%; }
.fod-grid-item-offset-xxl-auto[b-ujj8v7xc70] { margin-inline-start: auto; }
}
/*#endregion*/
/*#region Item Order Classes - Base*/
.fod-grid-item-order-first[b-ujj8v7xc70] { order: -1; }
.fod-grid-item-order-last[b-ujj8v7xc70] { order: 13; }
.fod-grid-item-order-0[b-ujj8v7xc70] { order: 0; }
.fod-grid-item-order-1[b-ujj8v7xc70] { order: 1; }
.fod-grid-item-order-2[b-ujj8v7xc70] { order: 2; }
.fod-grid-item-order-3[b-ujj8v7xc70] { order: 3; }
.fod-grid-item-order-4[b-ujj8v7xc70] { order: 4; }
.fod-grid-item-order-5[b-ujj8v7xc70] { order: 5; }
.fod-grid-item-order-6[b-ujj8v7xc70] { order: 6; }
.fod-grid-item-order-7[b-ujj8v7xc70] { order: 7; }
.fod-grid-item-order-8[b-ujj8v7xc70] { order: 8; }
.fod-grid-item-order-9[b-ujj8v7xc70] { order: 9; }
.fod-grid-item-order-10[b-ujj8v7xc70] { order: 10; }
.fod-grid-item-order-11[b-ujj8v7xc70] { order: 11; }
.fod-grid-item-order-12[b-ujj8v7xc70] { order: 12; }
/*#endregion*/
/*#region Item Order Classes - xs (0px+)*/
@media (min-width: 0) {
.fod-grid-item-order-xs-first[b-ujj8v7xc70] { order: -1; }
.fod-grid-item-order-xs-last[b-ujj8v7xc70] { order: 13; }
.fod-grid-item-order-xs-0[b-ujj8v7xc70] { order: 0; }
.fod-grid-item-order-xs-1[b-ujj8v7xc70] { order: 1; }
.fod-grid-item-order-xs-2[b-ujj8v7xc70] { order: 2; }
.fod-grid-item-order-xs-3[b-ujj8v7xc70] { order: 3; }
.fod-grid-item-order-xs-4[b-ujj8v7xc70] { order: 4; }
.fod-grid-item-order-xs-5[b-ujj8v7xc70] { order: 5; }
.fod-grid-item-order-xs-6[b-ujj8v7xc70] { order: 6; }
.fod-grid-item-order-xs-7[b-ujj8v7xc70] { order: 7; }
.fod-grid-item-order-xs-8[b-ujj8v7xc70] { order: 8; }
.fod-grid-item-order-xs-9[b-ujj8v7xc70] { order: 9; }
.fod-grid-item-order-xs-10[b-ujj8v7xc70] { order: 10; }
.fod-grid-item-order-xs-11[b-ujj8v7xc70] { order: 11; }
.fod-grid-item-order-xs-12[b-ujj8v7xc70] { order: 12; }
}
/*#endregion*/
/*#region Item Order Classes - sm (576px+)*/
@media (min-width: 576px) {
.fod-grid-item-order-sm-first[b-ujj8v7xc70] { order: -1; }
.fod-grid-item-order-sm-last[b-ujj8v7xc70] { order: 13; }
.fod-grid-item-order-sm-0[b-ujj8v7xc70] { order: 0; }
.fod-grid-item-order-sm-1[b-ujj8v7xc70] { order: 1; }
.fod-grid-item-order-sm-2[b-ujj8v7xc70] { order: 2; }
.fod-grid-item-order-sm-3[b-ujj8v7xc70] { order: 3; }
.fod-grid-item-order-sm-4[b-ujj8v7xc70] { order: 4; }
.fod-grid-item-order-sm-5[b-ujj8v7xc70] { order: 5; }
.fod-grid-item-order-sm-6[b-ujj8v7xc70] { order: 6; }
.fod-grid-item-order-sm-7[b-ujj8v7xc70] { order: 7; }
.fod-grid-item-order-sm-8[b-ujj8v7xc70] { order: 8; }
.fod-grid-item-order-sm-9[b-ujj8v7xc70] { order: 9; }
.fod-grid-item-order-sm-10[b-ujj8v7xc70] { order: 10; }
.fod-grid-item-order-sm-11[b-ujj8v7xc70] { order: 11; }
.fod-grid-item-order-sm-12[b-ujj8v7xc70] { order: 12; }
}
/*#endregion*/
/*#region Item Order Classes - md (768px+)*/
@media (min-width: 768px) {
.fod-grid-item-order-md-first[b-ujj8v7xc70] { order: -1; }
.fod-grid-item-order-md-last[b-ujj8v7xc70] { order: 13; }
.fod-grid-item-order-md-0[b-ujj8v7xc70] { order: 0; }
.fod-grid-item-order-md-1[b-ujj8v7xc70] { order: 1; }
.fod-grid-item-order-md-2[b-ujj8v7xc70] { order: 2; }
.fod-grid-item-order-md-3[b-ujj8v7xc70] { order: 3; }
.fod-grid-item-order-md-4[b-ujj8v7xc70] { order: 4; }
.fod-grid-item-order-md-5[b-ujj8v7xc70] { order: 5; }
.fod-grid-item-order-md-6[b-ujj8v7xc70] { order: 6; }
.fod-grid-item-order-md-7[b-ujj8v7xc70] { order: 7; }
.fod-grid-item-order-md-8[b-ujj8v7xc70] { order: 8; }
.fod-grid-item-order-md-9[b-ujj8v7xc70] { order: 9; }
.fod-grid-item-order-md-10[b-ujj8v7xc70] { order: 10; }
.fod-grid-item-order-md-11[b-ujj8v7xc70] { order: 11; }
.fod-grid-item-order-md-12[b-ujj8v7xc70] { order: 12; }
}
/*#endregion*/
/*#region Item Order Classes - lg (992px+)*/
@media (min-width: 992px) {
.fod-grid-item-order-lg-first[b-ujj8v7xc70] { order: -1; }
.fod-grid-item-order-lg-last[b-ujj8v7xc70] { order: 13; }
.fod-grid-item-order-lg-0[b-ujj8v7xc70] { order: 0; }
.fod-grid-item-order-lg-1[b-ujj8v7xc70] { order: 1; }
.fod-grid-item-order-lg-2[b-ujj8v7xc70] { order: 2; }
.fod-grid-item-order-lg-3[b-ujj8v7xc70] { order: 3; }
.fod-grid-item-order-lg-4[b-ujj8v7xc70] { order: 4; }
.fod-grid-item-order-lg-5[b-ujj8v7xc70] { order: 5; }
.fod-grid-item-order-lg-6[b-ujj8v7xc70] { order: 6; }
.fod-grid-item-order-lg-7[b-ujj8v7xc70] { order: 7; }
.fod-grid-item-order-lg-8[b-ujj8v7xc70] { order: 8; }
.fod-grid-item-order-lg-9[b-ujj8v7xc70] { order: 9; }
.fod-grid-item-order-lg-10[b-ujj8v7xc70] { order: 10; }
.fod-grid-item-order-lg-11[b-ujj8v7xc70] { order: 11; }
.fod-grid-item-order-lg-12[b-ujj8v7xc70] { order: 12; }
}
/*#endregion*/
/*#region Item Order Classes - xl (1280px+)*/
@media (min-width: 1280px) {
.fod-grid-item-order-xl-first[b-ujj8v7xc70] { order: -1; }
.fod-grid-item-order-xl-last[b-ujj8v7xc70] { order: 13; }
.fod-grid-item-order-xl-0[b-ujj8v7xc70] { order: 0; }
.fod-grid-item-order-xl-1[b-ujj8v7xc70] { order: 1; }
.fod-grid-item-order-xl-2[b-ujj8v7xc70] { order: 2; }
.fod-grid-item-order-xl-3[b-ujj8v7xc70] { order: 3; }
.fod-grid-item-order-xl-4[b-ujj8v7xc70] { order: 4; }
.fod-grid-item-order-xl-5[b-ujj8v7xc70] { order: 5; }
.fod-grid-item-order-xl-6[b-ujj8v7xc70] { order: 6; }
.fod-grid-item-order-xl-7[b-ujj8v7xc70] { order: 7; }
.fod-grid-item-order-xl-8[b-ujj8v7xc70] { order: 8; }
.fod-grid-item-order-xl-9[b-ujj8v7xc70] { order: 9; }
.fod-grid-item-order-xl-10[b-ujj8v7xc70] { order: 10; }
.fod-grid-item-order-xl-11[b-ujj8v7xc70] { order: 11; }
.fod-grid-item-order-xl-12[b-ujj8v7xc70] { order: 12; }
}
/*#endregion*/
/*#region Item Order Classes - xxl (1440px+)*/
@media (min-width: 1440px) {
.fod-grid-item-order-xxl-first[b-ujj8v7xc70] { order: -1; }
.fod-grid-item-order-xxl-last[b-ujj8v7xc70] { order: 13; }
.fod-grid-item-order-xxl-0[b-ujj8v7xc70] { order: 0; }
.fod-grid-item-order-xxl-1[b-ujj8v7xc70] { order: 1; }
.fod-grid-item-order-xxl-2[b-ujj8v7xc70] { order: 2; }
.fod-grid-item-order-xxl-3[b-ujj8v7xc70] { order: 3; }
.fod-grid-item-order-xxl-4[b-ujj8v7xc70] { order: 4; }
.fod-grid-item-order-xxl-5[b-ujj8v7xc70] { order: 5; }
.fod-grid-item-order-xxl-6[b-ujj8v7xc70] { order: 6; }
.fod-grid-item-order-xxl-7[b-ujj8v7xc70] { order: 7; }
.fod-grid-item-order-xxl-8[b-ujj8v7xc70] { order: 8; }
.fod-grid-item-order-xxl-9[b-ujj8v7xc70] { order: 9; }
.fod-grid-item-order-xxl-10[b-ujj8v7xc70] { order: 10; }
.fod-grid-item-order-xxl-11[b-ujj8v7xc70] { order: 11; }
.fod-grid-item-order-xxl-12[b-ujj8v7xc70] { order: 12; }
}
/*#endregion*/
/*#region Item Align Self*/
.fod-grid-item--align-self-stretch[b-ujj8v7xc70] { align-self: stretch; }
.fod-grid-item--align-self-start[b-ujj8v7xc70] { align-self: flex-start; }
.fod-grid-item--align-self-end[b-ujj8v7xc70] { align-self: flex-end; }
.fod-grid-item--align-self-center[b-ujj8v7xc70] { align-self: center; }
.fod-grid-item--align-self-baseline[b-ujj8v7xc70] { align-self: baseline; }
/*#endregion*/
/* _content/FOD.UIComponents/Components/Layout/FodStack.razor.rz.scp.css */
/*#region Base Styles*/
.fod-stack[b-7kadzdl88e] {
display: flex;
}
/*#endregion*/
/*#region Direction*/
.fod-stack--row[b-7kadzdl88e] {
flex-direction: row;
}
.fod-stack--column[b-7kadzdl88e] {
flex-direction: column;
}
/*#endregion*/
/*#region Gap Modifiers*/
.fod-stack--gap-2[b-7kadzdl88e] {
gap: var(--spacing-2);
}
.fod-stack--gap-4[b-7kadzdl88e] {
gap: var(--spacing-4);
}
.fod-stack--gap-6[b-7kadzdl88e] {
gap: var(--spacing-6);
}
.fod-stack--gap-8[b-7kadzdl88e] {
gap: var(--spacing-8);
}
.fod-stack--gap-12[b-7kadzdl88e] {
gap: var(--spacing-12);
}
.fod-stack--gap-16[b-7kadzdl88e] {
gap: var(--spacing-16);
}
.fod-stack--gap-20[b-7kadzdl88e] {
gap: var(--spacing-20);
}
.fod-stack--gap-24[b-7kadzdl88e] {
gap: var(--spacing-24);
}
.fod-stack--gap-32[b-7kadzdl88e] {
gap: var(--spacing-32);
}
.fod-stack--gap-40[b-7kadzdl88e] {
gap: var(--spacing-40);
}
.fod-stack--gap-48[b-7kadzdl88e] {
gap: var(--spacing-48);
}
.fod-stack--gap-56[b-7kadzdl88e] {
gap: var(--spacing-56);
}
.fod-stack--gap-64[b-7kadzdl88e] {
gap: var(--spacing-64);
}
.fod-stack--gap-72[b-7kadzdl88e] {
gap: var(--spacing-72);
}
/*#endregion*/
/*#region Alignment*/
.fod-stack--align-start[b-7kadzdl88e] {
align-items: flex-start;
}
.fod-stack--align-center[b-7kadzdl88e] {
align-items: center;
}
.fod-stack--align-end[b-7kadzdl88e] {
align-items: flex-end;
}
.fod-stack--align-stretch[b-7kadzdl88e] {
align-items: stretch;
}
.fod-stack--align-baseline[b-7kadzdl88e] {
align-items: baseline;
}
/*#endregion*/
/*#region Justification*/
.fod-stack--justify-start[b-7kadzdl88e] {
justify-content: flex-start;
}
.fod-stack--justify-center[b-7kadzdl88e] {
justify-content: center;
}
.fod-stack--justify-end[b-7kadzdl88e] {
justify-content: flex-end;
}
.fod-stack--justify-between[b-7kadzdl88e] {
justify-content: space-between;
}
.fod-stack--justify-around[b-7kadzdl88e] {
justify-content: space-around;
}
.fod-stack--justify-evenly[b-7kadzdl88e] {
justify-content: space-evenly;
}
/*#endregion*/
/*#region Wrap*/
.fod-stack--wrap[b-7kadzdl88e] {
flex-wrap: wrap;
}
/*#endregion*/
/* _content/FOD.UIComponents/Components/List/FodList.razor.rz.scp.css */
/*
* FOD List Component Styles
*
* These styles follow the general FOD Design System approach and patterns from main.css,
* using FOD design tokens (spacing, colors, typography, etc.) for consistency.
* However, main.css does not contain specific list component examples to reuse directly.
* The implementation is based on FOD's general component patterns and conventions.
*/
/*#region Base Styles*/
.fod-list[b-fmf2nsrqxh] {
list-style: none;
margin: 0;
padding: 4px;
display: flex;
flex-direction: column;
width: 100%;
max-height: 220px;
outline: none;
/* Enable smooth scrolling for keyboard navigation */
scroll-behavior: smooth;
overflow: auto;
}
.fod-list__item[b-fmf2nsrqxh] {
display: block;
padding: var(--spacing-8, 8px) var(--spacing-12, 10px);
color: var(--color-text-base-default, var(--black, #121212));
font-size: var(--text-body-md-font-size, 16px);
font-family: var(--font-family-base, "Onest", sans-serif);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
user-select: none;
border-radius: var(--border-radius-6, 6px);
}
/*#endregion Base Styles*/
/*#region Bordered Variant*/
.fod-list--bordered[b-fmf2nsrqxh] {
border: 1px solid var(--color-border-base-default, #D9D9D9);
border-radius: var(--border-radius-8, 8px);
box-shadow: 0 6px 18px rgba(13, 23, 34, 0.08);
}
.fod-list--bordered .fod-list__item:not(:last-child)[b-fmf2nsrqxh] {
border-bottom: 1px solid var(--color-border-base-default, #D9D9D9);
}
/*#endregion Bordered Variant*/
/*#region Size Variants*/
.fod-list--sm .fod-list__item[b-fmf2nsrqxh] {
padding: var(--spacing-6, 6px) var(--spacing-8, 8px);
}
.fod-list--lg .fod-list__item[b-fmf2nsrqxh] {
padding: var(--spacing-12, 10px) var(--spacing-12, 12px);
}
/*#endregion Size Variants*/
/*#region Striped Variant*/
.fod-list--striped .fod-list__item:nth-child(even)[b-fmf2nsrqxh] {
background-color: var(--gray-200, #E5E5E5);
}
/*#endregion Striped Variant*/
/*#region Hoverable*/
.fod-list--hoverable .fod-list__item:hover[b-fmf2nsrqxh] {
background-color: var(--color-background-brand-secondary, var(--blue-sky-100, #E8F0FB));
color: var(--blue-sky-600);
}
/*#endregion Hoverable*/
/*#region Selected State*/
.fod-list__item--selected[b-fmf2nsrqxh] {
color: var(--blue-sky-600);
background-color: var(--color-background-brand-secondary, var(--blue-sky-100, #E8F0FB));
font-weight: var(--font-weight-bold, 600);
}
.fod-list--hoverable .fod-list__item--selected:hover[b-fmf2nsrqxh] {
background-color: var(--color-background-brand-secondary-hover, var(--blue-sky-200, #CCDEF6));
}
/*#endregion Selected State*/
/*#region Active State (Keyboard Focus)*/
.fod-list__item--active[b-fmf2nsrqxh] {
background-color: var(--color-background-brand-secondary, var(--blue-sky-100, #E8F0FB));
color: var(--blue-sky-600);
}
/*#endregion Active State (Keyboard Focus)*/
/*#region Selection Indicator Variant*/
.fod-list--with-indicator .fod-list__item--selected[b-fmf2nsrqxh] {
border-left: 4px solid var(--blue-sky-600);
background-color: var(--color-background-brand-secondary, var(--blue-sky-100, #E8F0FB));
}
.fod-list--with-indicator .fod-list__item--selected:first-child[b-fmf2nsrqxh] {
border-top-left-radius: var(--radius-md, 4px);
}
.fod-list--with-indicator .fod-list__item--selected:last-child[b-fmf2nsrqxh] {
border-bottom-left-radius: var(--radius-md, 4px);
}
.fod-list--with-indicator.fod-list--hoverable .fod-list__item--selected:hover[b-fmf2nsrqxh] {
background-color: var(--color-background-brand-secondary-hover, var(--blue-sky-200, #CCDEF6));
}
/*#endregion Selection Indicator Variant*/
/*#region Empty State*/
.fod-list__empty[b-fmf2nsrqxh] {
padding: var(--spacing-16, 16px);
text-align: center;
color: var(--color-text-secondary, #757575);
}
/*#endregion Empty State*/
/*#region Focus State*/
.fod-list:focus-visible[b-fmf2nsrqxh] {
outline: 2px solid var(--blue-sky-600, #0058D2);
outline-offset: -2px;
}
/*#endregion Focus State*/
/*#region Dark Mode Overrides */
:global([data-theme=dark]) .fod-list__item[b-fmf2nsrqxh] {
color: var(--gray-200, #E5E5E5);
}
:global([data-theme=dark]) .fod-list--hoverable .fod-list__item:hover[b-fmf2nsrqxh] {
background-color: var(--color-background-brand-secondary, var(--blue-sky-100, #E8F0FB));
color: var(--blue-sky-300, #7AB8F5);
}
:global([data-theme=dark]) .fod-list__item--selected[b-fmf2nsrqxh] {
color: var(--blue-sky-300, #7AB8F5);
background-color: var(--color-background-brand-secondary, var(--blue-sky-100, #E8F0FB));
}
:global([data-theme=dark]) .fod-list--hoverable .fod-list__item--selected:hover[b-fmf2nsrqxh] {
background-color: var(--color-background-brand-secondary-hover, var(--blue-sky-200, #CCDEF6));
}
:global([data-theme=dark]) .fod-list--striped .fod-list__item:nth-child(even)[b-fmf2nsrqxh] {
background-color: var(--gray-700, #616161);
}
:global([data-theme=dark]) .fod-list--with-indicator .fod-list__item--selected[b-fmf2nsrqxh] {
background-color: var(--color-background-brand-secondary, var(--blue-sky-100, #E8F0FB));
}
:global([data-theme=dark]) .fod-list--with-indicator.fod-list--hoverable .fod-list__item--selected:hover[b-fmf2nsrqxh] {
background-color: var(--color-background-brand-secondary-hover, var(--blue-sky-200, #CCDEF6));
}
:global([data-theme=dark]) .fod-list__empty[b-fmf2nsrqxh] {
color: var(--gray-400, #9E9E9E);
}
/*#endregion Dark Mode Overrides */
/* _content/FOD.UIComponents/Components/LoadingSpinner/FodLoadingSpinner.razor.rz.scp.css */
.fod-spinner[b-fc6zlm31ey] {
display: inline-block;
border-radius: 50%;
border-style: solid;
border-top-color: transparent !important;
animation: fod-spinner-rotate-b-fc6zlm31ey 0.8s linear infinite;
}
/* Sizes */
.fod-spinner--extra-small[b-fc6zlm31ey] {
width: var(--spacing-12, 12px);
height: var(--spacing-12, 12px);
border-width: 2px;
}
.fod-spinner--small[b-fc6zlm31ey] {
width: var(--spacing-16, 16px);
height: var(--spacing-16, 16px);
border-width: 2px;
}
.fod-spinner--medium[b-fc6zlm31ey] {
width: calc(var(--spacing-24) + 2px);
height: calc(var(--spacing-24) + 2px);
border-width: 3px;
}
.fod-spinner--large[b-fc6zlm31ey] {
width: calc(var(--spacing-32) + 2px);
height: calc(var(--spacing-32) + 2px);
border-width: 3px;
}
/* Colors */
.fod-spinner--brand[b-fc6zlm31ey] {
border-color: var(--blue-sky-600);
}
.fod-spinner--dark[b-fc6zlm31ey] {
border-color: var(--black, #121212);
}
.fod-spinner--light[b-fc6zlm31ey] {
border-color: var(--gray-100, #e0e0e0);
}
.fod-spinner--light-on-color[b-fc6zlm31ey] {
border-color: #fff;
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.fod-spinner--brand[b-fc6zlm31ey] {
border-color: var(--blue-sky-400, #78a9ff);
}
.fod-spinner--dark[b-fc6zlm31ey] {
border-color: var(--gray-100, #e0e0e0);
}
.fod-spinner--light[b-fc6zlm31ey] {
border-color: var(--gray-700, #525252);
}
}
@keyframes fod-spinner-rotate-b-fc6zlm31ey {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* _content/FOD.UIComponents/Components/Main/FodMainContent.razor.rz.scp.css */
.fod-main-content[b-ajy6neozqp] {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
}
/* _content/FOD.UIComponents/Components/PhoneInput/FodPhoneInput.razor.rz.scp.css */
/* =====================================================
FodPhoneInput — country selector prefix + text input
Architecture:
- .fod-phone-input → root wrapper (position: relative)
- .fod-phone-input__prefix-wrapper → hosts prefix or selector + dropdown
- .fod-phone-input__prefix → static display (single country)
- .fod-phone-input__selector → button trigger (multi-country)
- .fod-phone-input__dropdown → floating option list
- .fod-phone-input__backdrop → invisible click-outside layer
===================================================== */
.fod-phone-input[b-veei84y5iw] {
position: relative;
display: inline-flex;
flex-direction: column;
width: 100%;
}
/* -------------------------------------------------------
PREFIX WRAPPER
Sits inside StartAdornment — contains the flag, dial code
and optionally the dropdown. Separated from the input by
a right border to match the input's border style.
------------------------------------------------------- */
.fod-phone-input__prefix-wrapper[b-veei84y5iw] {
position: relative;
display: flex;
align-items: center;
color: var(--black);
height: 32px;
}
/* -------------------------------------------------------
STATIC PREFIX (single country — no dropdown)
------------------------------------------------------- */
.fod-phone-input__prefix[b-veei84y5iw] {
display: flex;
align-items: center;
gap: var(--spacing-4, 4px);
height: 100%;
cursor: default;
user-select: none;
border-radius: var(--border-radius-4, 4px);
padding: 0 var(--spacing-12) 0 var(--spacing-8);
background-color: var(--color-background-base-secondary, #F5F5F5);
}
/* -------------------------------------------------------
SELECTOR BUTTON (multiple countries)
------------------------------------------------------- */
.fod-phone-input__selector[b-veei84y5iw] {
display: flex;
align-items: center;
gap: var(--spacing-4, 4px);
border: none;
cursor: pointer;
height: 100%;
transition: background-color 120ms ease;
border-radius: var(--border-radius-4, 4px);
padding: 0 var(--spacing-4) 0 var(--spacing-8);
background-color: var(--color-background-base-secondary, #F5F5F5);
}
.fod-phone-input__selector:hover:not(:disabled)[b-veei84y5iw] {
background-color: var(--gray-100);
}
.fod-phone-input__selector:disabled[b-veei84y5iw] {
cursor: not-allowed;
color: var(--gray-500);
}
.fod-phone-input__selector--open[b-veei84y5iw] {
background-color: var(--gray-100);
}
/* -------------------------------------------------------
WAVING FLAG IMAGE
------------------------------------------------------- */
.fod-phone-input__flag[b-veei84y5iw] {
width: 20px;
height: 15px;
object-fit: cover;
border-radius: 2px;
display: block;
flex-shrink: 0;
}
/* -------------------------------------------------------
DIAL CODE TEXT
------------------------------------------------------- */
.fod-phone-input__dialcode[b-veei84y5iw] {
font-size: var(--text-body-sm-font-size, 14px);
font-weight: 500;
color: inherit;
white-space: nowrap;
}
/* -------------------------------------------------------
DROPDOWN PANEL
------------------------------------------------------- */
.fod-phone-input__dropdown[b-veei84y5iw] {
position: absolute;
top: calc(100% + var(--spacing-4, 4px));
left: 0;
z-index: 200;
background-color: var(--background-base-secondary, #F5F5F5);
border: 1px solid var(--gray-250);
border-radius: var(--border-radius-8, 8px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
min-width: 220px;
max-height: 240px;
overflow-y: auto;
padding: var(--spacing-4, 4px) 0;
}
/* -------------------------------------------------------
DROPDOWN OPTION ROW
------------------------------------------------------- */
.fod-phone-input__option[b-veei84y5iw] {
display: flex;
align-items: center;
gap: 0;
width: 100%;
height: 36px;
padding: 0 var(--spacing-8, 8px);
border: none;
border-radius: var(--border-radius-4, 4px);
background: transparent;
cursor: pointer;
text-align: left;
color: var(--gray-900);
font-size: var(--text-body-sm-font-size, 14px);
opacity: 1;
transition: background-color 100ms ease;
}
.fod-phone-input__option:hover[b-veei84y5iw] {
background-color: var(--gray-100);
}
.fod-phone-input__option--selected[b-veei84y5iw] {
background-color: var(--blue-sky-100);
color: var(--blue-sky-700, #0058d2);
font-weight: 500;
}
.fod-phone-input__option--selected:hover[b-veei84y5iw] {
background-color: var(--blue-sky-200);
}
.fod-phone-input__option-name[b-veei84y5iw] {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: var(--spacing-8, 8px);
}
.fod-phone-input__option-code[b-veei84y5iw] {
color: var(--gray-500);
font-size: var(--text-body-xs-font-size, 12px);
white-space: nowrap;
margin-left: var(--spacing-8, 8px);
}
/* -------------------------------------------------------
CLICK-OUTSIDE BACKDROP
------------------------------------------------------- */
.fod-phone-input__backdrop[b-veei84y5iw] {
position: fixed;
inset: 0;
z-index: 199;
background: transparent;
}
/* -------------------------------------------------------
DISABLED / READONLY STATES
------------------------------------------------------- */
.fod-phone-input--disabled .fod-phone-input__prefix[b-veei84y5iw],
.fod-phone-input--disabled .fod-phone-input__dialcode[b-veei84y5iw] {
color: var(--gray-500);
}
.fod-phone-input--readonly .fod-phone-input__selector[b-veei84y5iw] {
pointer-events: none;
}
/* _content/FOD.UIComponents/Components/Skeleton/FodSkeleton.razor.rz.scp.css */
/*#region [Keyframe Animations]*/
@keyframes fod-skeleton-pulse-b-z2gp906ai0 {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
@keyframes fod-skeleton-wave-b-z2gp906ai0 {
0% {
background-position: -200% center;
}
100% {
background-position: 200% center;
}
}
/*#endregion*/
/*#region [Base Styles]*/
.fod-skeleton[b-z2gp906ai0] {
background-color: #E5E5E5;
border-radius: var(--border-radius-base, 4px);
display: block;
inline-size: 100%;
block-size: 100%;
overflow: hidden;
}
[data-theme=dark] .fod-skeleton[b-z2gp906ai0] {
background-color: #424242;
}
/*#endregion*/
/*#region [Variant Styles]*/
.fod-skeleton--rectangle[b-z2gp906ai0] {
min-block-size: 20px;
}
.fod-skeleton--circle[b-z2gp906ai0] {
border-radius: 50%;
inline-size: 40px;
block-size: 40px;
min-inline-size: 40px;
min-block-size: 40px;
}
.fod-skeleton--text[b-z2gp906ai0] {
min-block-size: 1em;
border-radius: var(--border-radius-sm, 2px);
}
.fod-skeleton--text .fod-skeleton-line[b-z2gp906ai0] {
background-color: #E5E5E5;
border-radius: var(--border-radius-sm, 2px);
block-size: 1em;
inline-size: 100%;
}
[data-theme=dark] .fod-skeleton--text .fod-skeleton-line[b-z2gp906ai0] {
background-color: #424242;
}
.fod-skeleton--text .fod-skeleton-line:last-child[b-z2gp906ai0] {
inline-size: 80%;
}
.fod-skeleton--text[b-z2gp906ai0] {
display: flex;
flex-direction: column;
gap: var(--spacing-2, 8px);
}
.fod-skeleton--list[b-z2gp906ai0] {
display: flex;
flex-direction: column;
gap: var(--spacing-4, 16px);
}
.fod-skeleton--list .fod-skeleton-item[b-z2gp906ai0] {
background-color: #E5E5E5;
border-radius: var(--border-radius-base, 4px);
block-size: 48px;
inline-size: 100%;
}
[data-theme=dark] .fod-skeleton--list .fod-skeleton-item[b-z2gp906ai0] {
background-color: #424242;
}
/*#endregion*/
/*#region [Animation Styles]*/
.fod-skeleton--pulse[b-z2gp906ai0] {
animation: fod-skeleton-pulse-b-z2gp906ai0 1.5s ease-in-out infinite;
}
.fod-skeleton--pulse .fod-skeleton-line[b-z2gp906ai0],
.fod-skeleton--pulse .fod-skeleton-item[b-z2gp906ai0] {
animation: fod-skeleton-pulse-b-z2gp906ai0 1.5s ease-in-out infinite;
}
.fod-skeleton--wave[b-z2gp906ai0] {
background-image: linear-gradient(90deg, transparent, #F5F5F5, transparent);
background-size: 200% 100%;
animation: fod-skeleton-wave-b-z2gp906ai0 1.5s linear infinite;
}
[data-theme=dark] .fod-skeleton--wave[b-z2gp906ai0] {
background-image: linear-gradient(90deg, transparent, #616161, transparent);
}
.fod-skeleton--wave .fod-skeleton-line[b-z2gp906ai0],
.fod-skeleton--wave .fod-skeleton-item[b-z2gp906ai0] {
background-image: linear-gradient(90deg, transparent, #F5F5F5, transparent);
background-size: 200% 100%;
animation: fod-skeleton-wave-b-z2gp906ai0 1.5s linear infinite;
}
[data-theme=dark] .fod-skeleton--wave .fod-skeleton-line[b-z2gp906ai0],
[data-theme=dark] .fod-skeleton--wave .fod-skeleton-item[b-z2gp906ai0] {
background-image: linear-gradient(90deg, transparent, #616161, transparent);
}
/*#endregion*/
/*#region [Accessibility - Reduced Motion]*/
@media (prefers-reduced-motion: reduce) {
.fod-skeleton[b-z2gp906ai0],
.fod-skeleton--pulse[b-z2gp906ai0],
.fod-skeleton--wave[b-z2gp906ai0],
.fod-skeleton--pulse .fod-skeleton-line[b-z2gp906ai0],
.fod-skeleton--pulse .fod-skeleton-item[b-z2gp906ai0],
.fod-skeleton--wave .fod-skeleton-line[b-z2gp906ai0],
.fod-skeleton--wave .fod-skeleton-item[b-z2gp906ai0] {
animation: none;
}
}
/*#endregion*/
/* _content/FOD.UIComponents/Components/Table/FodPagination.razor.rz.scp.css */
/* Pagination Container */
.fod-pagination[b-kekfkoe70h] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-top: 1px solid var(--color-border-base-default, #d9d9d9);
gap: 16px;
flex-wrap: wrap;
}
/* Pagination Info */
.fod-pagination-info[b-kekfkoe70h] {
font-size: 13px;
color: var(--color-text-base-secondary, #666);
}
/* Pagination Actions */
.fod-pagination-actions[b-kekfkoe70h] {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
/* Page Size Selector */
.fod-pagination-page-size[b-kekfkoe70h] {
padding: 6px 12px;
border: 1px solid var(--color-border-base-default, #d9d9d9);
border-radius: 4px;
font-size: 13px;
background: var(--color-background-base-default, #ffffff);
cursor: pointer;
transition: border-color 0.2s;
}
.fod-pagination-page-size:hover:not(:disabled)[b-kekfkoe70h] {
border-color: var(--color-border-base-hover, #b3b3b3);
}
.fod-pagination-page-size:focus[b-kekfkoe70h] {
outline: none;
border-color: var(--color-border-primary-default, #1976d2);
box-shadow: 0 0 0 2px var(--color-background-primary-light, rgba(25, 118, 210, 0.1));
}
.fod-pagination-page-size:disabled[b-kekfkoe70h] {
opacity: 0.5;
cursor: not-allowed;
}
/* Pagination Buttons Container */
.fod-pagination-buttons[b-kekfkoe70h] {
display: flex;
gap: 4px;
align-items: center;
}
/* Ellipsis */
.fod-pagination-ellipsis[b-kekfkoe70h] {
padding: 6px 8px;
color: var(--color-text-base-secondary, #666);
font-size: 14px;
user-select: none;
}
/* Compact Nav - tighter spacing */
.fod-pagination--compact-nav[b-kekfkoe70h] {
gap: 8px;
padding: 8px 12px;
}
.fod-pagination--compact-nav .fod-pagination-actions[b-kekfkoe70h] {
gap: 8px;
}
/* Collapsed Pages - even tighter */
.fod-pagination--collapsed-pages .fod-pagination-buttons[b-kekfkoe70h] {
gap: 2px;
}
/* Collapse Anchor - relative wrapper for dropdown positioning */
.fod-pagination-collapse-anchor[b-kekfkoe70h] {
position: relative;
display: inline-flex;
}
/* Page Dropdown - opens above by default (pagination is usually at bottom) */
.fod-pagination-page-dropdown[b-kekfkoe70h] {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
z-index: 100;
background: var(--color-background-base-default, #ffffff);
border: 1px solid var(--color-border-base-default, #d9d9d9);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
padding: 4px;
margin-bottom: 4px;
max-height: 200px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 48px;
}
/* Opens below when near top of screen */
.fod-pagination-page-dropdown--below[b-kekfkoe70h] {
bottom: auto;
top: 100%;
margin-bottom: 0;
margin-top: 4px;
}
/* Dropdown Items */
.fod-pagination-page-dropdown__item[b-kekfkoe70h] {
padding: 6px 12px;
border: none;
background: transparent;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
color: var(--color-text-base-default, #333);
text-align: center;
white-space: nowrap;
transition: background-color 0.15s;
}
.fod-pagination-page-dropdown__item:hover[b-kekfkoe70h] {
background: var(--color-background-base-hover, #f0f0f0);
}
.fod-pagination-page-dropdown__item--current[b-kekfkoe70h] {
background: var(--color-background-primary-light, rgba(25, 118, 210, 0.1));
color: var(--color-text-primary-default, #1976d2);
font-weight: 600;
}
/* Mobile */
@media (max-width: 768px) {
.fod-pagination[b-kekfkoe70h] {
padding-left: 0;
padding-right: 0;
}
.fod-pagination-actions[b-kekfkoe70h] {
justify-content: center;
}
[b-kekfkoe70h] .fod-pagination-button {
padding: 8px 12px !important;
}
}
/* Dark Mode Support */
[data-theme="dark"] .fod-pagination[b-kekfkoe70h] {
background: var(--color-background-base-secondary, #2a2a2a);
border-color: var(--color-border-base-default, #444);
}
[data-theme="dark"] .fod-pagination-info[b-kekfkoe70h] {
color: var(--color-text-base-secondary, #999);
}
[data-theme="dark"] .fod-pagination-page-size[b-kekfkoe70h] {
background: var(--color-background-base-default, #1a1a1a);
color: var(--color-text-base-default, #e5e5e5);
border-color: var(--color-border-base-default, #444);
}
[data-theme="dark"] .fod-pagination-page-size:hover:not(:disabled)[b-kekfkoe70h] {
border-color: var(--color-border-base-hover, #666);
}
[data-theme="dark"] .fod-pagination-page-size:focus[b-kekfkoe70h] {
border-color: var(--color-border-primary-default, #42a5f5);
box-shadow: 0 0 0 2px var(--color-background-primary-dark, rgba(66, 165, 245, 0.1));
}
[data-theme="dark"] .fod-pagination-ellipsis[b-kekfkoe70h] {
color: var(--color-text-base-secondary, #999);
}
[data-theme="dark"] .fod-pagination-page-dropdown[b-kekfkoe70h] {
background: var(--color-background-base-default, #1a1a1a);
border-color: var(--color-border-base-default, #444);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .fod-pagination-page-dropdown__item[b-kekfkoe70h] {
color: var(--color-text-base-default, #e5e5e5);
}
[data-theme="dark"] .fod-pagination-page-dropdown__item:hover[b-kekfkoe70h] {
background: var(--color-background-base-hover, #333);
}
[data-theme="dark"] .fod-pagination-page-dropdown__item--current[b-kekfkoe70h] {
background: var(--color-background-primary-dark, rgba(66, 165, 245, 0.15));
color: var(--color-text-primary-default, #42a5f5);
}
/* _content/FOD.UIComponents/Components/Table/FodTable.razor.rz.scp.css */
/* Container */
.fod-table-container[b-2rxy24zk63] {
position: relative;
width: 100%;
max-width: 100%;
overflow: hidden;
background: var(--color-background-base-default, #ffffff);
}
/* Wrapper */
.fod-table-wrapper[b-2rxy24zk63] {
width: 100%;
overflow-x: auto;
}
/* Table */
.fod-table[b-2rxy24zk63] {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
color: var(--color-text-base-default, #121212);
}
/* Density - Comfortable (default) */
.fod-table-container--comfortable .fod-table-td[b-2rxy24zk63],
.fod-table-container--comfortable .fod-table-th[b-2rxy24zk63] {
padding: 16px 12px;
}
/* Density - Compact */
.fod-table-container--compact .fod-table-td[b-2rxy24zk63],
.fod-table-container--compact .fod-table-th[b-2rxy24zk63] {
padding: 8px 8px;
}
/* Header */
.fod-table-thead[b-2rxy24zk63] {
border-bottom: 2px solid var(--color-border-base-default, #d9d9d9);
}
.fod-table-thead--subtle[b-2rxy24zk63] {
background: var(--color-background-base-tertiary, #F1F1F1);
color: var(--gray-700);
}
.fod-table-thead--strong[b-2rxy24zk63] {
background: var(--gray-900);
color: var(--white);
}
.fod-table-thead--white[b-2rxy24zk63] {
background: var(--white);
color: var(--black);
}
.fod-table-thead--default[b-2rxy24zk63] {
background: var(--black);
color: var(--white);
}
.fod-table-thead--sticky[b-2rxy24zk63] {
position: sticky;
top: 0;
z-index: 10;
}
.fod-table-th[b-2rxy24zk63] {
text-align: left;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.05em;
white-space: nowrap;
user-select: none;
}
.fod-table-thead--default .fod-table-th[b-2rxy24zk63] {
color: var(--white);
}
.fod-table-thead--subtle .fod-table-th[b-2rxy24zk63] {
color: var(--gray-700);
}
.fod-table-thead--white .fod-table-th[b-2rxy24zk63] {
color: var(--black);
}
.fod-table-thead--strong .fod-table-th[b-2rxy24zk63] {
color: var(--white);
}
.fod-table-th--sortable[b-2rxy24zk63] {
cursor: pointer;
transition: background-color 0.2s;
}
.fod-table-th--sortable:hover[b-2rxy24zk63] {
background: var(--color-background-base-tertiary, #e5e5e5);
}
.fod-table-thead--default .fod-table-th--sortable:hover[b-2rxy24zk63] {
background: var( --color-background-base-inverse-default-hover, --gray-700);
}
.fod-table-th-content[b-2rxy24zk63] {
display: flex;
align-items: center;
gap: 8px;
}
.fod-table-sort-icon[b-2rxy24zk63] {
display: inline-flex;
align-items: center;
font-size: 10px;
opacity: 0.6;
}
.fod-table-th--align-left .fod-table-th-content[b-2rxy24zk63] {
justify-content: flex-start;
}
.fod-table-th--align-center .fod-table-th-content[b-2rxy24zk63] {
justify-content: center;
}
.fod-table-th--align-right .fod-table-th-content[b-2rxy24zk63] {
justify-content: flex-end;
}
/* Body */
.fod-table-tbody[b-2rxy24zk63] {
background: var(--color-background-base-default, #ffffff);
}
.fod-table-tr[b-2rxy24zk63] {
border-bottom: 1px solid var(--color-border-base-default, #e5e5e5);
transition: background-color 0.2s;
}
.fod-table--hover .fod-table-tr:hover[b-2rxy24zk63] {
background: var(--color-background-base-tertiary, #f5f5f5);
}
.fod-table--striped .fod-table-tr:nth-child(even)[b-2rxy24zk63] {
background: var(--color-background-base-secondary, #fafafa);
}
.fod-table-tr--selected[b-2rxy24zk63] {
background: var(--color-background-primary-light, #e3f2fd) !important;
}
.fod-table-tr--editing[b-2rxy24zk63] {
background: var(--color-background-warning-light, #fff3e0) !important;
}
.fod-table-td[b-2rxy24zk63] {
color: var(---color-text-base-secondary,#383838);
font-size: var(--text-body-sm-font-size, 14px);
line-height: 20px;
padding: 12px;
border-bottom: 1px solid var(--color-border-base-default, #e5e5e5);
}
.fod-table--bordered .fod-table-td[b-2rxy24zk63] {
border-left: 1px solid var(--color-border-base-default, #e5e5e5);
}
.fod-table--bordered .fod-table-td:first-child[b-2rxy24zk63] {
border-left: none;
}
.fod-table-cell-content[b-2rxy24zk63] {
display: flex;
align-items: center;
width: 100%;
}
.fod-table-td--align-left .fod-table-cell-content[b-2rxy24zk63] {
justify-content: flex-start;
}
.fod-table-td--align-center .fod-table-cell-content[b-2rxy24zk63] {
justify-content: center;
}
.fod-table-td--align-right .fod-table-cell-content[b-2rxy24zk63] {
justify-content: flex-end;
}
/* Sticky columns */
.fod-table-th--sticky-left[b-2rxy24zk63],
.fod-table-td--sticky-left[b-2rxy24zk63] {
position: sticky;
left: 0;
background: inherit;
z-index: 5;
}
.fod-table-th--sticky-right[b-2rxy24zk63],
.fod-table-td--sticky-right[b-2rxy24zk63] {
position: sticky;
right: 0;
background: inherit;
z-index: 5;
}
/* Checkbox column */
.fod-table-th--checkbox[b-2rxy24zk63],
.fod-table-td--checkbox[b-2rxy24zk63] {
width: 48px;
padding: 12px;
text-align: center;
}
.fod-table-checkbox[b-2rxy24zk63] {
cursor: pointer;
width: 18px;
height: 18px;
}
/* Expand column */
.fod-table-th--expand[b-2rxy24zk63],
.fod-table-td--expand[b-2rxy24zk63] {
width: 48px;
padding: 12px;
text-align: center;
}
.fod-table-expand-btn[b-2rxy24zk63] {
background: none;
border: none;
cursor: pointer;
padding: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background-color 0.2s, transform 0.2s;
}
.fod-table-expand-btn:hover[b-2rxy24zk63] {
background: var(--color-background-base-tertiary, #e5e5e5);
}
.fod-table-expand-icon[b-2rxy24zk63] {
display: inline-block;
transition: transform 0.2s;
font-size: 10px;
}
.fod-table-expand-icon.expanded[b-2rxy24zk63] {
transform: rotate(90deg);
}
/* Row detail */
.fod-table-row-detail[b-2rxy24zk63] {
background: var(--color-background-base-secondary, #f5f5f5);
}
.fod-table-td--detail[b-2rxy24zk63] {
padding: 16px;
}
/* Child rows (ChildItemsSelector) */
.fod-table-tr--child[b-2rxy24zk63] {
background: var(--color-background-base-secondary, #f5f5f5);
border-left: 3px solid var(--color-border-primary-default, #c7d2fe);
}
.fod-table-tr--child:not(:last-child)[b-2rxy24zk63] {
border-bottom: 1px solid var(--color-border-base-default, #e9edf1);
}
.fod-table-td--child-indent[b-2rxy24zk63] {
padding: 0 !important;
width: 32px;
}
/* Edit actions */
.fod-table-edit-actions[b-2rxy24zk63] {
background: var(--color-background-base-secondary, #fafafa);
}
.fod-table-edit-actions-content[b-2rxy24zk63] {
display: flex;
gap: 8px;
padding: 12px;
}
/* Toolbar */
.fod-table-toolbar[b-2rxy24zk63] {
padding: 12px 16px;
background: var(--color-background-info-light, #e3f2fd);
border-bottom: 1px solid var(--color-border-base-default, #d9d9d9);
display: flex;
align-items: center;
justify-content: space-between;
}
/* Loading */
.fod-table-loading[b-2rxy24zk63] {
padding: 48px;
text-align: center;
color: var(--color-text-base-secondary, #666);
}
/* Empty */
.fod-table-empty[b-2rxy24zk63] {
padding: 48px;
text-align: center;
color: var(--color-text-base-secondary, #666);
}
/* Pagination */
.fod-table-pagination[b-2rxy24zk63] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-top: 1px solid var(--color-border-base-default, #d9d9d9);
background: var(--color-background-base-secondary, #f5f5f5);
}
.fod-table-pagination-info[b-2rxy24zk63] {
font-size: 13px;
color: var(--color-text-base-secondary, #666);
}
.fod-table-pagination-actions[b-2rxy24zk63] {
display: flex;
align-items: center;
gap: 16px;
}
.fod-table-page-size[b-2rxy24zk63] {
padding: 6px 12px;
border: 1px solid var(--color-border-base-default, #d9d9d9);
border-radius: 4px;
font-size: 13px;
background: var(--color-background-base-default, #ffffff);
cursor: pointer;
}
.fod-table-pagination-buttons[b-2rxy24zk63] {
display: flex;
gap: 4px;
}
.fod-table-page-btn[b-2rxy24zk63] {
padding: 6px 12px;
border: 1px solid var(--color-border-base-default, #d9d9d9);
border-radius: 4px;
background: var(--color-background-base-default, #ffffff);
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s;
}
.fod-table-page-btn:hover:not(:disabled)[b-2rxy24zk63] {
background: var(--color-background-base-secondary, #f5f5f5);
}
.fod-table-page-btn:disabled[b-2rxy24zk63] {
opacity: 0.5;
cursor: not-allowed;
}
.fod-table-page-number[b-2rxy24zk63] {
padding: 6px 12px;
font-size: 13px;
color: var(--color-text-base-default, #121212);
}
/* Screen reader only */
.sr-only[b-2rxy24zk63] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Dark mode support */
[data-theme="dark"] .fod-table[b-2rxy24zk63] {
color: var(--color-text-base-default, #e5e5e5);
}
[data-theme="dark"] .fod-table-thead[b-2rxy24zk63] {
background: var(--color-background-base-secondary, #2a2a2a);
}
[data-theme="dark"] .fod-table-tbody[b-2rxy24zk63] {
background: var(--color-background-base-default, #1a1a1a);
}
[data-theme="dark"] .fod-table--hover .fod-table-tr:hover[b-2rxy24zk63] {
background: var(--color-background-base-tertiary, #3a3a3a);
}
[data-theme="dark"] .fod-table-tr--selected[b-2rxy24zk63] {
background: var(--color-background-primary-dark, #0d47a1) !important;
}
/* Edit input styles */
.fod-table-edit-input[b-2rxy24zk63] {
width: 100%;
padding: 6px 8px;
border: 1px solid var(--color-border-base-default, #d9d9d9);
border-radius: 4px;
font-size: 14px;
font-family: inherit;
background: var(--color-background-base-default, #ffffff);
color: var(--color-text-base-default, #121212);
outline: none;
transition: border-color 0.2s;
}
.fod-table-edit-input:focus[b-2rxy24zk63] {
border-color: var(--color-border-primary-default, #1976d2);
box-shadow: 0 0 0 2px var(--color-background-primary-light, rgba(25, 118, 210, 0.1));
}
.fod-table-edit-input:disabled[b-2rxy24zk63] {
background: var(--color-background-base-secondary, #f5f5f5);
cursor: not-allowed;
opacity: 0.6;
}
[data-theme="dark"] .fod-table-edit-input[b-2rxy24zk63] {
background: var(--color-background-base-secondary, #2a2a2a);
color: var(--color-text-base-default, #e5e5e5);
border-color: var(--color-border-base-default, #444);
}
[data-theme="dark"] .fod-table-edit-input:focus[b-2rxy24zk63] {
border-color: var(--color-border-primary-default, #42a5f5);
box-shadow: 0 0 0 2px var(--color-background-primary-dark, rgba(66, 165, 245, 0.1));
}
/* Footer row: export button left, pagination right */
.fod-table-footer-row[b-2rxy24zk63] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
}
.fod-table-footer-row__start[b-2rxy24zk63] {
display: flex;
align-items: center;
padding: 12px 16px;
}
.fod-table-footer-row__end[b-2rxy24zk63] {
display: flex;
align-items: center;
}
/* Remove duplicate border-top from FodPagination when inside footer row */
.fod-table-footer-row[b-2rxy24zk63] .fod-pagination {
border-top: none;
}
/* _content/FOD.UIComponents/Components/Table/FodTableSortIcon.razor.rz.scp.css */
/* _content/FOD.UIComponents/Providers/Dialog/FodDialogProvider.razor.rz.scp.css */
/*#region Dialog Host*/
.fod-dialog-host[b-ajs3aw033r] {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1300;
}
/*#endregion Dialog Host*/
/*#region Dialog Container*/
.fod-dialog-container[b-ajs3aw033r] {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
/*#endregion Dialog Container*/
/*#region Positioned Dialog Container*/
.fod-dialog-container--top[b-ajs3aw033r] {
align-items: flex-start;
justify-content: center;
padding-block-start: var(--fod-header-total-height, 112px);
}
.fod-dialog-container--bottom[b-ajs3aw033r] {
align-items: flex-end;
justify-content: center;
padding-block-end: var(--spacing-24, 24px);
}
/*#endregion Positioned Dialog Container*/
/*#region Backdrop*/
.fod-dialog-backdrop[b-ajs3aw033r] {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
pointer-events: auto;
}
[data-theme="dark"] .fod-dialog-backdrop[b-ajs3aw033r] {
background-color: rgba(0, 0, 0, 0.7);
}
/*#endregion Backdrop*/
/*#region Dialog*/
.fod-dialog[b-ajs3aw033r] {
position: relative;
display: flex;
flex-direction: column;
max-height: calc(100vh - var(--spacing-48, 48px));
max-width: calc(100vw - var(--spacing-32, 32px));
width: 100%;
max-width: 500px;
background-color: var(--color-background-base-default, #ffffff);
border-radius: var(--radius-8, 8px);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
pointer-events: auto;
overflow: hidden;
}
[data-theme="dark"] .fod-dialog[b-ajs3aw033r] {
background-color: var(--color-background-base-default, #1a1a1a);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
/*#endregion Dialog*/
/*#region Positioned Dialog*/
/* Positioned dialog variant (top/bottom) */
.fod-dialog--positioned[b-ajs3aw033r] {
/* Higher z-index for banners above header dropdowns */
z-index: 1160;
max-width: var(--fod-container-max-width, 800px);
width: calc(100% - var(--spacing-48, 48px));
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
/* Top positioned dialog animation */
.fod-dialog-container--top .fod-dialog--positioned[b-ajs3aw033r] {
animation: slideInFromTop-b-ajs3aw033r 0.3s ease-out forwards;
}
/* Bottom positioned dialog animation */
.fod-dialog-container--bottom .fod-dialog--positioned[b-ajs3aw033r] {
animation: slideInFromBottom-b-ajs3aw033r 0.3s ease-out forwards;
}
@keyframes slideInFromTop-b-ajs3aw033r {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInFromBottom-b-ajs3aw033r {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/*#endregion Positioned Dialog*/
/*#region Dialog Header*/
.fod-dialog-header[b-ajs3aw033r] {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
border-block-end: 1px solid var(--color-border-base-default, #e0e0e0);
}
[data-theme="dark"] .fod-dialog-header[b-ajs3aw033r] {
border-block-end-color: var(--color-border-base-default, #333333);
}
.fod-dialog-title[b-ajs3aw033r] {
margin: 0;
font-size: var(--font-size-lg, 18px);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-text-base-default, #1a1a1a);
line-height: 1.4;
}
[data-theme="dark"] .fod-dialog-title[b-ajs3aw033r] {
color: var(--color-text-base-default, #ffffff);
}
.fod-dialog-close[b-ajs3aw033r] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
margin-inline-start: var(--spacing-16, 16px);
background: transparent;
border: none;
border-radius: var(--radius-4, 4px);
font-size: 24px;
line-height: 1;
color: var(--color-text-base-muted, #666666);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.fod-dialog-close:hover[b-ajs3aw033r] {
background-color: var(--color-background-base-hover, #f0f0f0);
color: var(--color-text-base-default, #1a1a1a);
}
.fod-dialog-close:focus-visible[b-ajs3aw033r] {
outline: 2px solid var(--color-focus-ring, #0066cc);
outline-offset: 2px;
}
[data-theme="dark"] .fod-dialog-close[b-ajs3aw033r] {
color: var(--color-text-base-muted, #999999);
}
[data-theme="dark"] .fod-dialog-close:hover[b-ajs3aw033r] {
background-color: var(--color-background-base-hover, #333333);
color: var(--color-text-base-default, #ffffff);
}
/*#endregion Dialog Header*/
/*#region Dialog Content*/
.fod-dialog-content[b-ajs3aw033r] {
flex: 1;
overflow-y: auto;
padding: var(--spacing-24, 24px);
}
/*#endregion Dialog Content*/
/*#region Focus Trap*/
.fod-dialog-focus-trap[b-ajs3aw033r] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/*#endregion Focus Trap*/
/*#region Cookie Banner Compact Mode*/
.fod-cookie-banner--compact[b-ajs3aw033r] .fod-cookie-banner__actions {
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
}
.fod-cookie-banner--compact[b-ajs3aw033r] .fod-cookie-banner__actions > * {
inline-size: 100% !important;
width: 100% !important;
}
.fod-cookie-banner--compact[b-ajs3aw033r] .fod-cookie-banner__actions-end {
flex-direction: column-reverse !important;
order: 1;
}
.fod-cookie-banner--compact[b-ajs3aw033r] .fod-cookie-banner__actions-end > * {
inline-size: 100% !important;
width: 100% !important;
}
.fod-cookie-banner--compact[b-ajs3aw033r] .fod-cookie-banner__actions .fod-btn {
width: 100% !important;
max-width: 100% !important;
}
.fod-cookie-banner--compact[b-ajs3aw033r] .fod-cookie-banner__actions-end .fod-btn {
width: 100% !important;
max-width: 100% !important;
}
.fod-cookie-banner--compact[b-ajs3aw033r] .fod-cookie-banner__btn--manage {
order: 3;
}
/*#endregion Cookie Banner Compact Mode*/
/* _content/FOD.UIComponents/Providers/Skeleton/FodAppSkeleton.razor.rz.scp.css */
/*#region [Base Styles]*/
.fod-app-skeleton[b-zdbgvfpdzc] {
position: fixed;
inset: 0;
z-index: 1200;
background-color: var(--color-bg-base-default, #ffffff);
display: flex;
align-items: center;
justify-content: center;
padding-block-start: env(safe-area-inset-top, 0);
padding-inline-end: env(safe-area-inset-right, 0);
padding-block-end: env(safe-area-inset-bottom, 0);
padding-inline-start: env(safe-area-inset-left, 0);
}
[data-theme=dark] .fod-app-skeleton[b-zdbgvfpdzc] {
background-color: var(--color-bg-base-default, #1a1a1a);
}
/*#endregion*/
/*#region [Content Container]*/
.fod-app-skeleton__content[b-zdbgvfpdzc] {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-6, 24px);
}
/*#endregion*/
/*#region [Logo]*/
.fod-app-skeleton__logo[b-zdbgvfpdzc] {
max-inline-size: 200px;
max-block-size: 100px;
}
/*#endregion*/
/*#region [Message]*/
.fod-app-skeleton__message[b-zdbgvfpdzc] {
color: var(--color-text-base-default, #333333);
font-size: var(--font-size-base, 16px);
text-align: center;
}
[data-theme=dark] .fod-app-skeleton__message[b-zdbgvfpdzc] {
color: var(--color-text-base-default, #e5e5e5);
}
/*#endregion*/
/*#region [Progress]*/
.fod-app-skeleton__progress[b-zdbgvfpdzc] {
margin-block-start: var(--spacing-4, 16px);
}
/*#endregion*/
/* _content/FOD.UIComponents/Providers/Skeleton/FodSkeletonProvider.razor.rz.scp.css */
/*#region [Screen Reader Only]*/
.fod-sr-only[b-y9labt6y3w] {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/*#endregion*/
/* _content/FOD.UIComponents/Providers/Snackbar/FodSnackbarProvider.razor.rz.scp.css */
/*#region Snackbar Container*/
.fod-snackbar-container[b-wmrzpxe8um] {
position: fixed;
z-index: 1100;
display: flex;
flex-direction: column;
gap: var(--spacing-8, 8px);
pointer-events: none;
max-inline-size: calc(100vw - var(--spacing-32, 32px));
}
/* Top placements */
.fod-snackbar-container--top-start[b-wmrzpxe8um] {
inset-block-start: calc(var(--spacing-16, 16px) + env(safe-area-inset-top, 0px));
inset-inline-start: calc(var(--spacing-16, 16px) + env(safe-area-inset-left, 0px));
align-items: flex-start;
}
.fod-snackbar-container--top-center[b-wmrzpxe8um] {
inset-block-start: calc(var(--spacing-16, 16px) + env(safe-area-inset-top, 0px));
inset-inline-start: 50%;
transform: translateX(-50%);
align-items: center;
}
.fod-snackbar-container--top-end[b-wmrzpxe8um] {
inset-block-start: calc(var(--spacing-16, 16px) + env(safe-area-inset-top, 0px));
inset-inline-end: calc(var(--spacing-16, 16px) + env(safe-area-inset-right, 0px));
align-items: flex-end;
}
/* Bottom placements */
.fod-snackbar-container--bottom-start[b-wmrzpxe8um] {
inset-block-end: calc(var(--spacing-16, 16px) + env(safe-area-inset-bottom, 0px));
inset-inline-start: calc(var(--spacing-16, 16px) + env(safe-area-inset-left, 0px));
align-items: flex-start;
}
.fod-snackbar-container--bottom-center[b-wmrzpxe8um] {
inset-block-end: calc(var(--spacing-16, 16px) + env(safe-area-inset-bottom, 0px));
inset-inline-start: 50%;
transform: translateX(-50%);
align-items: center;
}
.fod-snackbar-container--bottom-end[b-wmrzpxe8um] {
inset-block-end: calc(var(--spacing-16, 16px) + env(safe-area-inset-bottom, 0px));
inset-inline-end: calc(var(--spacing-16, 16px) + env(safe-area-inset-right, 0px));
align-items: flex-end;
}
/*#endregion Snackbar Container*/