/*!
 * National Design System — Accessibility (optional add-on)
 * Version: 1.10.0
 * License: MIT
 * Repository: https://github.com/mazin-musleh/NDS-vanilla
 * Author: Mazin Musleh
 * Profile: https://www.linkedin.com/in/mazin-musleh/
 */
@media not (forced-colors: active) {
     :root[data-a11y~=monochrome] {
          filter: grayscale(1)
     }

     :root[data-a11y~=high-saturation] {
          filter: saturate(2)
     }

     :root[data-a11y~=low-saturation] {
          filter: saturate(0.5)
     }

     :root[data-a11y~=cvd-deutan] {
          filter: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='cvd-deutan' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix type='matrix' values='0.367 0.861 -0.228 0 0  0.280 0.673 0.047 0 0  -0.012 0.043 0.969 0 0  0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#cvd-deutan")
     }

     :root[data-a11y~=boost-contrast] {
          filter: contrast(1.15)
     }
}

:root[data-a11y~=high-contrast] {
     --_hc-bg: var(--colors-base-white);
     --_hc-fg: var(--colors-base-black);
     --_hc-link: var(--colors-primary-800);
     --_hc-link-hovered: var(--colors-primary-900);
     --_hc-link-pressed: var(--colors-primary-950);
     --_hc-link-visited: var(--colors-tertiary-900);
     --background-body: var(--_hc-bg);
     --background-default: var(--_hc-bg);
     --background-secondary: var(--_hc-bg);
     --background-primary: var(--_hc-fg);
     --background-card: var(--_hc-bg);
     --background-menu: var(--_hc-bg);
     --background-nav: var(--_hc-bg);
     --background-topbar: var(--_hc-bg);
     --background-footer: var(--_hc-bg);
     --background-sub-hero: var(--_hc-bg);
     --background-disabled: var(--_hc-bg);
     --background-stripe: var(--_hc-bg);
     --form-field-background-default: var(--_hc-bg);
     --form-field-background-lighter: var(--_hc-bg);
     --form-field-background-darker: var(--_hc-bg);
     --table-background-header: var(--_hc-bg);
     --table-background-cell: var(--_hc-bg);
     --table-background-row: var(--_hc-bg);
     --table-background-row-selected: var(--_hc-bg);
     --table-background-hover-selected: var(--_hc-bg);
     --table-cell-border: var(--_hc-fg);
     --table-text-head: var(--_hc-fg);
     --table-text-body: var(--_hc-fg);
     --avatar-background: var(--_hc-bg);
     --avatar-color: var(--_hc-fg);
     --text-default: var(--_hc-fg);
     --text-primary: var(--_hc-fg);
     --text-secondary: var(--_hc-fg);
     --text-secondary-paragraph: var(--_hc-fg);
     --text-tertiary: var(--_hc-fg);
     --text-display: var(--_hc-fg);
     --text-oncolor-primary: var(--colors-base-white);
     --text-oncolor-secondary: var(--colors-base-white);
     --link-primary: var(--_hc-link);
     --link-primary-hovered: var(--_hc-link-hovered);
     --link-primary-pressed: var(--_hc-link-pressed);
     --link-primary-focused: var(--_hc-link);
     --link-primary-visited: var(--_hc-link-visited);
     --border-neutral-primary: var(--_hc-fg);
     --border-neutral-secondary: var(--_hc-fg);
     --border-neutral-tertiary: var(--_hc-fg);
     --border-primary: var(--_hc-fg);
     --button-background-primary-default: var(--_hc-fg);
     --button-background-primary-hovered: var(--_hc-fg);
     --button-background-primary-pressed: var(--_hc-fg);
     --button-label-primary-default: var(--_hc-fg);
     --form-datecell-background-default: var(--_hc-fg);
     --form-datecell-background-hovered: var(--_hc-fg);
     --form-datecell-background-range: var(--colors-alpha-black-10)
}

:root[data-a11y~=high-contrast][data-theme~=dark] {
     --_hc-bg: var(--colors-base-black);
     --_hc-fg: var(--colors-base-white);
     --_hc-link: var(--colors-primary-300);
     --_hc-link-hovered: var(--colors-primary-200);
     --_hc-link-pressed: var(--colors-primary-100);
     --_hc-link-visited: var(--colors-secondary-300);
     --form-datecell-background-range: var(--colors-alpha-white-10)
}

:root[data-a11y~=high-contrast] .nds-topbar {
     --text-oncolor-primary: var(--_hc-fg);
     --text-oncolor-secondary: var(--_hc-fg);
     color: var(--_hc-fg)
}

:root[data-a11y~=high-contrast] .nds-btn.nds-primary:not(.nds-oncolor) {
     --btn-bg: var(--button-background-neutral-default);
     --btn-bg-hover: var(--button-background-neutral-hovered);
     --btn-bg-active: var(--button-background-neutral-pressed);
     --btn-bg-selected: var(--button-background-neutral-selected);
     --btn-color: var(--text-oncolor-primary);
     --btn-indicator-color: var(--button-indicator-primary);
     --btn-indicator-active: var(--button-indicator-primary);
     --btn-indicator-selected: var(--button-indicator-primary);
     --btn-loading-color: var(--text-oncolor-primary);
     --btn-loading-track: var(--colors-alpha-white-20)
}

:root[data-a11y~=high-contrast][data-theme~=dark] .nds-btn:is(.nds-primary, .nds-neutral):not(.nds-oncolor) {
     --btn-bg: var(--button-background-oncolor-default);
     --btn-bg-hover: var(--button-background-oncolor-hovered);
     --btn-bg-active: var(--button-background-oncolor-pressed);
     --btn-bg-selected: var(--button-background-oncolor-selected);
     --btn-bg-disabled: var(--button-background-disabled-oncolor);
     --btn-color-disabled: var(--text-default-oncolor-disabled);
     --btn-color: var(--colors-base-black);
     --btn-loading-color: var(--colors-base-black)
}

:root[data-a11y~=high-contrast] .nds-hero-section.nds-sub::before {
     display: none
}

:root[data-a11y~=high-contrast] .nds-bullet {
     --swiper-bullet-default: var(--_hc-bg);
     --swiper-bullet-active: var(--_hc-fg);
     --swiper-bullet-border: var(--_hc-fg)
}

:root[data-a11y~=high-contrast] .nds-avatar {
     outline: 2px solid var(--_hc-fg);
     outline-offset: -2px
}

:root[data-a11y~=high-contrast] .nds-sidemenu-toggle i {
     color: var(--_btn-color)
}

:root[data-a11y~=high-contrast] .nds-accessibility-panel .nds-grid>.nds-btn[data-state~=selected] {
     --btn-color: var(--_hc-bg)
}

:root[data-a11y~=high-contrast][data-theme~=dark] .nds-date-cell:is([data-state~=selected], [data-state~=range-start], [data-state~=range-end]) {
     --text-oncolor-primary: var(--_hc-bg)
}

:root[data-a11y~=high-contrast] .nds-content-section {
     --section-bg: var(--_hc-bg) !important;
     --section-title-color: var(--_hc-fg);
     --section-subtitle-color: var(--_hc-fg);
     --section-description-color: var(--_hc-fg);
     --section-text-color: var(--_hc-fg)
}

:root[data-a11y~=high-contrast] .nds-content-section:is(.nds-gradient-primary, .nds-gradient-green) {
     background: var(--_hc-bg)
}

:root[data-a11y~=high-contrast] .nds-footer {
     background: var(--_hc-bg) !important;
     color: var(--_hc-fg);
     --text-oncolor-primary: var(--_hc-fg);
     --text-oncolor-secondary: var(--_hc-fg);
     border-block-start: 1px solid var(--_hc-fg)
}

:root[data-a11y~=high-contrast] .nds-footer.nds-green {
     background: var(--_hc-fg) !important;
     color: var(--_hc-bg);
     --text-oncolor-primary: var(--_hc-bg);
     --text-oncolor-secondary: var(--_hc-bg);
     border-block-start: 0
}

:root[data-a11y~=high-contrast][data-theme~=dark] .nds-footer {
     background: var(--_hc-bg) !important;
     color: var(--_hc-fg);
     --text-oncolor-primary: var(--_hc-fg);
     --text-oncolor-secondary: var(--_hc-fg);
     border-block-start: 1px solid var(--_hc-fg)
}

:root[data-a11y~=dyslexia] {
     --nds-font-family: "OpenDyslexic", "Lexend", "Atkinson Hyperlegible", "Verdana", "Maqroo", var(--nds-font-brand), system-ui, sans-serif
}

:root[data-a11y~=dyslexia] body[class]>:is(header, main, footer) :is(p, li, dt, dd, blockquote) {
     font-weight: 500
}

:root {
     --user-line-height: normal;
     --user-letter-spacing: 0;
     --user-word-spacing: 0
}

:root[data-a11y~=font-step-1] {
     --user-font-scale: 1.15
}

:root[data-a11y~=font-step-2] {
     --user-font-scale: 1.3
}

:root[data-a11y~=font-step-3] {
     --user-font-scale: 1.5
}

:root:is([data-a11y~=font-step-1], [data-a11y~=font-step-2], [data-a11y~=font-step-3]) body[class]>:is(header, main, footer) {
     font-size: var(--typo-text-md-FS)
}

:root[data-a11y~=has-line-height] body[class]>:is(header, main, footer),
:root[data-a11y~=has-line-height] body[class]>:is(header, main, footer) :is(p, li, ul, ol, dl, dt, dd, blockquote) {
     line-height: var(--user-line-height)
}

:root[data-a11y~=has-letter-spacing] body[class]>:is(header, main, footer),
:root[data-a11y~=has-letter-spacing] body[class]>:is(header, main, footer) :is(p, li, ul, ol, dl, dt, dd, blockquote) {
     letter-spacing: var(--user-letter-spacing)
}

:root[data-a11y~=has-word-spacing] body[class]>:is(header, main, footer),
:root[data-a11y~=has-word-spacing] body[class]>:is(header, main, footer) :is(p, li, ul, ol, dl, dt, dd, blockquote) {
     word-spacing: var(--user-word-spacing)
}

:root[data-a11y~=text-align-start] body[class]>:is(header, main, footer),
:root[data-a11y~=text-align-start] body[class]>:is(header, main, footer) :is(p, li) {
     text-align: start !important
}

:root[data-a11y~=text-align-end] body[class]>:is(header, main, footer),
:root[data-a11y~=text-align-end] body[class]>:is(header, main, footer) :is(p, li) {
     text-align: end !important
}

:root[data-a11y~=text-align-justify] body[class]>:is(header, main, footer),
:root[data-a11y~=text-align-justify] body[class]>:is(header, main, footer) :is(p, li) {
     text-align: justify !important
}

:root[data-a11y~=highlight-titles] body[class]>:is(header, main, footer) :is(h1, h2, h3, h4, h5, h6) {
     outline: 2px solid var(--border-warning);
     outline-offset: 2px;
     background-color: var(--background-warning-faint);
     color: var(--text-warning) !important;
     padding-inline: var(--spacing-xs);
     border-radius: var(--radius-xs)
}

:root[data-a11y~=highlight-titles][data-theme~=dark] body[class]>:is(header, main, footer) :is(h1, h2, h3, h4, h5, h6),
:root[data-a11y~=highlight-links][data-theme~=dark] body[class]>:is(header, main, footer) a {
     outline-color: var(--border-warning-light)
}

:root[data-a11y~=highlight-titles][data-theme~=dark] body[class]>:is(header, main, footer) :is(h1, h2, h3, h4, h5, h6) {
     background-color: var(--colors-yellow-alpha-10)
}

:root[data-a11y~=highlight-links] body[class]>:is(header, main, footer) a {
     outline: 2px dashed var(--text-warning);
     outline-offset: 2px
}

:root[data-a11y~=highlight-links] body[class]>:is(header, main, footer) a:not(.nds-btn) {
     text-decoration: underline !important;
     text-underline-offset: 2px;
     text-decoration-thickness: 2px
}

.nds-a11y-mask {
     position: fixed;
     inset-inline: 0;
     inset-block-start: 0;
     height: 100vh;
     height: 100lvh;
     background-color: var(--colors-alpha-black-80);
     pointer-events: none;
     z-index: 850;
     will-change: transform;
     contain: layout paint style;
     transform: translate3d(0, -200vh, 0)
}

.nds-a11y-mask-controls {
     --a11y-text-FS: 14px;
     --a11y-text-LH: 20px;
     --a11y-font-family: var(--nds-font-brand);
     --nds-font-family: var(--a11y-font-family);
     font-size: var(--a11y-text-FS);
     line-height: var(--a11y-text-LH);
     font-family: var(--nds-font-family);
     position: fixed;
     left: 50%;
     inset-block-start: var(--spacing-md, 8px);
     z-index: 851;
     display: inline-flex;
     flex-direction: row;
     align-items: center;
     gap: var(--spacing-xs, 4px);
     padding: var(--spacing-xs, 4px);
     background-color: var(--background-card);
     color: var(--text-default);
     border: 1px solid var(--border-neutral-primary);
     border-radius: var(--radius-md, 8px);
     box-shadow: var(--shadow-lg);
     pointer-events: auto;
     will-change: transform;
     contain: layout paint style;
     transform: translate3d(-50%, -200vh, 0)
}

.nds-a11y-mask-controls .nds-btn[data-action=grab] {
     cursor: grab;
     min-width: 56px;
     touch-action: none
}

.nds-a11y-mask-controls .nds-btn[data-action=grab]:active,
.nds-a11y-mask-controls .nds-btn[data-action=grab][data-state~=dragging] {
     cursor: grabbing;
     background-color: var(--button-background-secondary-pressed)
}

@media(forced-colors: active) {
     .nds-a11y-mask {
          background-color: Canvas;
          forced-color-adjust: none
     }

     .nds-a11y-mask-top {
          border-block-end: 1px solid CanvasText
     }

     .nds-a11y-mask-bottom {
          border-block-start: 1px solid CanvasText
     }

     .nds-a11y-mask-controls {
          background-color: Canvas;
          color: CanvasText;
          border-color: CanvasText;
          forced-color-adjust: none
     }

     .nds-a11y-mask-controls button:focus-visible {
          outline-color: Highlight
     }
}

:root[data-a11y~=motor-impaired] body[class]>:is(header, main, footer) :is(.nds-btn, button, [role=button], a.nds-btn, input[type=button], input[type=submit]) {
     min-block-size: 48px;
     min-inline-size: 48px
}

:root[data-a11y~=reduce-motion] *,
:root[data-a11y~=reduce-motion] *::before,
:root[data-a11y~=reduce-motion] *::after {
     animation-duration: .001ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: .001ms !important;
     scroll-behavior: auto !important
}

:root[data-a11y~=reduce-motion] :is(.nds-progress-circle, .nds-progress-bar),
:root[data-a11y~=reduce-motion] :is(.nds-progress-circle, .nds-progress-bar) * {
     animation-duration: var(--progress-duration, 4000ms) !important;
     transition-duration: .3s !important
}

:root[data-a11y~=reduce-motion] :is(.nds-loading, [data-state~=loading])::after {
     animation-duration: 1s !important;
     animation-iteration-count: infinite !important
}

:is(.nds-accessibility-panel, .nds-accessibility-toggle) {
     --a11y-text-FS: 14px;
     --a11y-text-LH: 20px;
     --a11y-section-FS: 16px;
     --a11y-section-LH: 24px;
     --a11y-title-FS: 18px;
     --a11y-title-LH: 28px;
     --a11y-icon-FS: 24px;
     --a11y-font-family: var(--nds-font-brand);
     --a11y-btn-size: 40px;
     --a11y-btn-size-md: 32px;
     --a11y-btn-size-sm: 24px;
     --nds-font-family: var(--a11y-font-family);
     font-size: var(--a11y-text-FS);
     line-height: var(--a11y-text-LH);
     font-family: var(--nds-font-family)
}

:root :is(.nds-accessibility-panel .nds-btn, .nds-accessibility-toggle.nds-btn) {
     --btn-size: var(--a11y-btn-size);
     --_btn-FS: var(--a11y-text-FS);
     --_btn-LH: var(--a11y-text-LH)
}

:root :is(.nds-accessibility-panel .nds-btn, .nds-accessibility-toggle.nds-btn).nds-md {
     --btn-size: var(--a11y-btn-size-md)
}

:root :is(.nds-accessibility-panel .nds-btn, .nds-accessibility-toggle.nds-btn).nds-sm {
     --btn-size: var(--a11y-btn-size-sm)
}

.nds-accessibility-panel .nds-accordion .nds-accordion-btn,
.nds-accessibility-panel .nds-form-container.nds-switch-container .nds-form-header .nds-label {
     font-size: var(--a11y-section-FS);
     line-height: var(--a11y-section-LH)
}

.nds-accessibility-panel .nds-form-container .nds-label+.nds-info {
     font-size: var(--a11y-text-FS);
     line-height: var(--a11y-text-LH)
}

.nds-accessibility-panel .nds-tag {
     --tag-fs: var(--a11y-text-FS)
}

.nds-accessibility-toggle {
     padding: 0
}

.nds-accessibility-toggle i.hgi,
.nds-accessibility-toggle i.nds-icon {
     font-size: var(--a11y-icon-FS);
     line-height: 1
}

.nds-accessibility-panel {
     box-shadow: var(--shadow-lg)
}

.nds-accessibility-panel .nds-panel-title {
     font-size: var(--a11y-title-FS);
     line-height: var(--a11y-title-LH)
}

.nds-accessibility-quick {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-xs)
}

.nds-accessibility-panel .nds-panel-body {
     display: flex;
     flex-direction: column;
     overflow: hidden
}

.nds-accessibility-panel .nds-panel-body>.nds-scroll-more {
     flex: 1 1 auto;
     min-height: 0;
     --divider: var(--_panel-padding)
}

.nds-accessibility-panel .nds-panel-body>.nds-scroll-more .nds-show-more {
     margin-block: calc(var(--_panel-padding)/2*-1)
}

.nds-accessibility-panel .nds-scroll-more-content {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-xl)
}

.nds-accessibility-panel .nds-grid {
     --max-col: 3;
     --min-col: 2;
     --gap: var(--spacing-md)
}

.nds-accessibility-panel .nds-grid>.nds-btn {
     flex-direction: column;
     align-items: center;
     justify-content: center;
     --btn-width: 100%;
     --btn-height-min: 96px;
     --btn-radius: var(--radius-md)
}

.nds-accessibility-panel .nds-grid>.nds-btn>i {
     font-size: var(--a11y-icon-FS);
     line-height: 1
}

.nds-accessibility-panel .nds-grid>.nds-btn[data-state~=selected] {
     --_pd: var(--button-background-primary-default);
     --_ph: var(--button-background-primary-hovered);
     --_pp: var(--button-background-primary-pressed);
     --_pi: var(--button-indicator-primary);
     --btn-bg: var(--_pd);
     --btn-bg-hover: var(--_ph);
     --btn-bg-active: var(--_pp);
     --btn-bg-selected: var(--_pd);
     --btn-color: var(--text-oncolor-primary);
     --btn-border: var(--_pd);
     --btn-border-hover: var(--_ph);
     --btn-border-active: var(--_pp);
     --btn-border-selected: var(--_pd);
     --btn-indicator-color: var(--_pi);
     --btn-indicator-active: var(--_pi);
     --btn-indicator-selected: var(--_pi)
}

.nds-accessibility-tile-bars {
     display: inline-flex;
     gap: 3px;
     align-items: center;
     margin-block-start: var(--spacing-xs);
     pointer-events: none
}

.nds-accessibility-tile-bar {
     width: 14px;
     height: 3px;
     background-color: currentColor;
     border-radius: 2px;
     opacity: .25;
     transition: opacity var(--nds-transition)
}

.nds-accessibility-tile-bar.is-active {
     opacity: 1
}

.nds-accessibility-panel .nds-grid>.nds-btn:not([data-state~=selected]) .nds-accessibility-tile-bar {
     opacity: .18
}

.nds-accessibility-panel>.nds-scroll-more {
     flex: 1 1 auto;
     min-height: 0;
     --scroll-fade: 32px
}

.nds-accessibility-panel>.nds-scroll-more .nds-scroll-more-content {
     flex: unset
}

.nds-accessibility-panel .nds-panel-footer .nds-btn {
     --btn-width: 100%
}

.nds-accessibility-panel .nds-panel-footer .nds-btn.nds-progress .nds-progress-circle {
     --_progress-size: var(--progress-size, 24px);
     inset-inline-start: auto;
     inset-inline-end: var(--spacing-md)
}

.nds-accessibility-modes .nds-switch-container {
     padding-block: var(--spacing-sm)
}

.nds-a11y-count {
     margin-inline-start: var(--spacing-xs)
}

.nds-a11y-count:empty {
     display: none
}

@font-face {
     font-family: "OpenDyslexic";
     font-style: normal;
     font-weight: 400 500;
     font-display: swap;
     size-adjust: 92%;
     src: url(../fonts/OpenDyslexic-Regular.woff2) format("woff2");
     unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02
}

@font-face {
     font-family: "OpenDyslexic";
     font-style: normal;
     font-weight: 600 700;
     font-display: swap;
     size-adjust: 92%;
     src: url(../fonts/OpenDyslexic-Bold.woff2) format("woff2");
     unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02
}

@font-face {
     font-family: "Maqroo";
     font-style: normal;
     font-weight: 300;
     font-display: swap;
     size-adjust: 125%;
     src: url(../fonts/Maqroo-Regular.woff2) format("woff2");
     unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC
}