:root { --font-family-base: "IBM Plex Sans", sans-serif; --font-family-arabic: "IBM Plex Sans Arabic", sans-serif; --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); --border-color: #e9ecef; --transform-direction: 1; } [dir="rtl"] { --transform-direction: -1; } :root { --main-color: #1b8354; --main-color-dark: #074d31; --alt-color: #7c2390; --white-color: white; --gray-color: gray; --gray-color-50: rgb(235, 235, 235); --card: #ffffff; --display: #1f2a37; --text-success: #085d3a; --border-success-light: #abefc6; --background-success-light: #ecfdf3; --text-info: #1849a9; --border-info-light: #b2ddff; --background-info-light: #eff8ff; --text-neutral: #1f2a37; --bs-dark: #161616; --neutral-secondary: #e5e7eb; --background-neutral-light: #f9fafb; --background-primary-default: #1b8354; --oncolor-primary: #ffffff; --default: #d2d6db; --neutral-primary: #161616; --SA-Flag: #074d31; --oncolor: #ffffff; } :root { font-size: 16px; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --display-2xl--medium: 2.8125rem; --display-2xl--semibold: 2.8125rem; --display-2xl--bold: 2.8125rem; --display-2xl--regular: 2.8125rem; --display-xl--regular: 2.25rem; --display-xl--medium: 2.25rem; --display-xl--semibold: 2.25rem; --display-xl--bold: 2.25rem; --display-lg--regular: 1.875rem; --display-lg--medium: 1.875rem; --display-lg--semibold: 1.875rem; --display-lg--bold: 1.875rem; --display-md--regular: 1.5rem; --display-md--medium: 1.5rem; --display-md--semibold: 1.5rem; --display-md--bold: 1.5rem; --display-sm--regular: 1.25rem; --display-sm--medium: 1.25rem; --display-sm--semibold: 1.25rem; --display-sm--bold: 1.25rem; --display-sm--medium-italic: 1.25rem; --display-xs--regular: 1rem; --display-xs--medium: 1rem; --display-xs--semibold: 1rem; --display-xs--bold: 1rem; --display-xs--medium-italic: 1rem; --text-xl--regular: 1rem; --text-xl--medium: 1rem; --text-xl--semibold: 1rem; --text-xl--bold: 1rem; --text-xl--regular-italic: 1rem; --text-xl--medium-italic: 1rem; --text-xl--semibold-italic: 1rem; --text-xl--bold-italic: 1rem; --text-xl--regular-underlined: 1rem; --text-lg--regular: 0.9375rem; --text-lg--medium: 0.9375rem; --text-lg--semibold: 0.9375rem; --text-lg--bold: 0.9375rem; --text-lg--regular-italic: 0.9375rem; --text-lg--medium-italic: 0.9375rem; --text-lg--semibold-italic: 0.9375rem; --text-lg--bold-italic: 0.9375rem; --text-lg--regular-underlined: 0.9375rem; --text-lg--medium-underlined: 0.9375rem; --text-md--regular: 0.875rem; --text-md--medium: 0.875rem; --text-md--semibold: 0.875rem; --text-md--bold: 0.875rem; --text-md--regular---italic: 0.875rem; --text-md--medium---italic: 0.875rem; --text-md--semibold---italic: 0.875rem; --text-md--bold---italic: 0.875rem; --text-md--regular---underlined: 0.875rem; --text-md--medium---underlined: 0.875rem; --text-sm--regular: 0.75rem; --text-sm--medium: 0.75rem; --text-sm--semibold: 0.75rem; --text-sm--bold: 0.75rem; --text-sm--regular-underlined: 0.75rem; --text-sm--medium-underlined: 0.75rem; --text-xs--regular: 0.625rem; --text-xs--medium: 0.625rem; --text-xs--semibold: 0.625rem; --text-xs--bold: 0.625rem; --text-2xs--regular: 0.5rem; --text-2xs--medium: 0.5rem; --text-2xs--semi-bold: 0.5rem; --text-2xs--bold: 0.5rem; --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05); --shadow-sm: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 1px 3px rgba(16, 24, 40, 0.05); --shadow-md: 0px 2px 4px rgba(16, 24, 40, 0.06), 0px 4px 8px rgba(16, 24, 40, 0.1); --shadow-lg: 0px 4px 6px rgba(16, 24, 40, 0.03), 0px 12px 16px rgba(16, 24, 40, 0.08); --shadow-xl: 0px 8px 8px rgba(16, 24, 40, 0.03), 0px 20px 24px rgba(16, 24, 40, 0.08); --shadow-2xl: 0px 24px 48px rgba(16, 24, 40, 0.18); --shadow-3xl: 0px 32px 64px rgba(16, 24, 40, 0.14); } :root { --container-max-width-desktop: var(--spacing-320); --container-padding-desktop: var(--spacing-8); --container-padding-mobile: var(--spacing-4); } :root { --colors-base-white: rgba(255, 255, 255, 1); --colors-base-black: rgba(22, 22, 22, 1); --colors-primary-sa-flag-25: rgba(247, 253, 249, 1); --colors-primary-sa-flag-50: rgba(243, 252, 246, 1); --colors-primary-sa-flag-100: rgba(223, 246, 231, 1); --colors-primary-sa-flag-200: rgba(184, 234, 203, 1); --colors-primary-sa-flag-300: rgba(136, 216, 173, 1); --colors-primary-sa-flag-400: rgba(84, 192, 138, 1); --colors-primary-sa-flag-500: rgba(37, 147, 95, 1); --colors-primary-sa-flag-600-primary: rgba(27, 131, 84, 1); --colors-primary-sa-flag-700: rgba(22, 106, 69, 1); --colors-primary-sa-flag-800: rgba(20, 87, 58, 1); --colors-primary-sa-flag-900: rgba(16, 70, 49, 1); --colors-primary-sa-flag-950: rgba(9, 42, 30, 1); --colors-secondary-gold-25: rgba(255, 254, 247, 1); --colors-secondary-gold-50: rgba(255, 254, 242, 1); --colors-secondary-gold-100: rgba(255, 252, 230, 1); --colors-secondary-gold-200: rgba(252, 243, 189, 1); --colors-secondary-gold-300: rgba(250, 233, 150, 1); --colors-secondary-gold-400: rgba(247, 213, 77, 1); --colors-secondary-gold-500: rgba(245, 189, 2, 1); --colors-secondary-gold-600-primary: rgba(219, 161, 2, 1); --colors-secondary-gold-700: rgba(184, 123, 2, 1); --colors-secondary-gold-800: rgba(148, 92, 1, 1); --colors-secondary-gold-900: rgba(110, 60, 0, 1); --colors-secondary-gold-950: rgba(71, 36, 0, 1); --colors-tertiary-lavendar-25: rgba(254, 252, 255, 1); --colors-tertiary-lavendar-50: rgba(249, 245, 250, 1); --colors-tertiary-lavendar-100: rgba(242, 233, 245, 1); --colors-tertiary-lavendar-200: rgba(225, 204, 232, 1); --colors-tertiary-lavendar-300: rgba(204, 173, 217, 1); --colors-tertiary-lavendar-400: rgba(165, 123, 186, 1); --colors-tertiary-lavendar-500-primary: rgba(128, 81, 159, 1); --colors-tertiary-lavendar-600: rgba(109, 66, 143, 1); --colors-tertiary-lavendar-700: rgba(83, 45, 117, 1); --colors-tertiary-lavendar-800: rgba(61, 29, 94, 1); --colors-tertiary-lavendar-900: rgba(40, 16, 71, 1); --colors-tertiary-lavendar-950: rgba(22, 7, 46, 1); --colors-neutral-25: rgba(252, 252, 253, 1); --colors-neutral-50: rgba(249, 250, 251, 1); --colors-neutral-10: rgba(210, 214, 219, 1); --colors-neutral-100: rgba(243, 244, 246, 1); --colors-neutral-200: rgba(229, 231, 235, 1); --colors-neutral-300: rgba(210, 214, 219, 1); --colors-neutral-400: rgba(157, 164, 174, 1); --colors-neutral-500: rgba(108, 115, 127, 1); --colors-neutral-600: rgba(77, 87, 97, 1); --colors-neutral-700: rgba(56, 66, 80, 1); --colors-neutral-800: rgba(31, 42, 55, 1); --colors-neutral-900: rgba(17, 25, 39, 1); --colors-neutral-950: #0d121c; --colors-green-25: rgba(246, 254, 249, 1); --colors-blue-25: rgba(245, 250, 255, 1); --colors-blue-50: rgba(239, 248, 255, 1); --colors-blue-100: rgba(209, 233, 255, 1); --colors-blue-200: rgba(178, 221, 255, 1); --colors-blue-300: rgba(132, 202, 255, 1); --colors-blue-400: rgba(83, 177, 253, 1); --colors-blue-500: rgba(46, 144, 250, 1); --colors-blue-600: rgba(21, 112, 239, 1); --colors-blue-700: rgba(23, 92, 211, 1); --colors-blue-800: rgba(24, 73, 169, 1); --colors-blue-900: rgba(25, 65, 133, 1); --colors-blue-950: rgba(16, 42, 86, 1); --colors-green-50: rgba(236, 253, 243, 1); --colors-green-100: rgba(220, 250, 230, 1); --colors-green-200: rgba(171, 239, 198, 1); --colors-green-300: rgba(117, 224, 167, 1); --colors-green-400: rgba(71, 205, 137, 1); --colors-green-500: rgba(23, 178, 106, 1); --colors-green-600: rgba(7, 148, 85, 1); --colors-green-700: rgba(6, 118, 71, 1); --colors-green-800: rgba(8, 93, 58, 1); --colors-green-900: rgba(7, 77, 49, 1); --colors-green-950: rgba(5, 51, 33, 1); --colors-yellow-25: rgba(255, 252, 245, 1); --colors-yellow-50: rgba(255, 250, 235, 1); --colors-yellow-100: rgba(254, 240, 199, 1); --colors-yellow-200: rgba(254, 223, 137, 1); --colors-yellow-300: rgba(254, 200, 75, 1); --colors-yellow-400: rgba(253, 176, 34, 1); --colors-yellow-500: rgba(247, 144, 9, 1); --colors-yellow-600: rgba(220, 104, 3, 1); --colors-yellow-700: rgba(181, 71, 8, 1); --colors-yellow-800: rgba(147, 55, 13, 1); --colors-yellow-900: rgba(122, 46, 14, 1); --colors-yellow-950: rgba(78, 29, 9, 1); --colors-red-25: rgba(255, 251, 250, 1); --colors-red-50: rgba(254, 243, 242, 1); --colors-red-100: rgba(254, 228, 226, 1); --colors-red-200: rgba(254, 205, 202, 1); --colors-red-300: rgba(253, 162, 155, 1); --colors-red-400: rgba(249, 112, 102, 1); --colors-red-500: rgba(240, 68, 56, 1); --colors-red-600: rgba(217, 45, 32, 1); --colors-red-700: rgba(180, 35, 24, 1); --colors-red-800: rgba(145, 32, 24, 1); --colors-red-900: rgba(122, 39, 26, 1); --colors-red-950: rgba(85, 22, 12, 1); --colors-alpha-alpha-white-0: rgba(255, 255, 255, 0); --colors-alpha-alpha-white-10: rgba(255, 255, 255, 0.10000000149011612); --colors-alpha-alpha-white-20: rgba(255, 255, 255, 0.20000000298023224); --colors-alpha-alpha-white-30: rgba(255, 255, 255, 0.30000001192092896); --colors-alpha-alpha-white-40: rgba(255, 255, 255, 0.4000000059604645); --colors-alpha-alpha-white-50: rgba(255, 255, 255, 0.5); --colors-alpha-alpha-white-60: rgba(255, 255, 255, 0.6000000238418579); --colors-alpha-alpha-white-70: rgba(255, 255, 255, 0.699999988079071); --colors-alpha-alpha-white-80: rgba(255, 255, 255, 0.800000011920929); --colors-alpha-alpha-white-90: rgba(255, 255, 255, 0.8999999761581421); --colors-alpha-alpha-white-100: rgba(255, 255, 255, 1); --colors-alpha-alpha-black-0: rgba(22, 22, 22, 0); --colors-alpha-alpha-black-10: rgba(22, 22, 22, 0.10000000149011612); --colors-alpha-alpha-black-20: rgba(22, 22, 22, 0.20000000298023224); --colors-alpha-alpha-black-30: rgba(22, 22, 22, 0.30000001192092896); --colors-alpha-alpha-black-40: rgba(22, 22, 22, 0.4000000059604645); --colors-alpha-alpha-black-50: rgba(22, 22, 22, 0.5); --colors-alpha-alpha-black-60: rgba(22, 22, 22, 0.6000000238418579); --colors-alpha-alpha-black-70: rgba(22, 22, 22, 0.699999988079071); --colors-alpha-alpha-black-80: rgba(22, 22, 22, 0.800000011920929); --colors-alpha-alpha-black-90: rgba(22, 22, 22, 0.8999999761581421); --colors-alpha-alpha-black-100: rgba(22, 22, 22, 1); --colors-alpha-alpha-600-primary-10: rgba(27, 131, 84, 0.10000000149011612); --colors-alpha-alpha-600-primary-20: rgba(27, 131, 84, 0.20000000298023224); --spacing-0: 0rem; --colors-alpha-alpha-600-primary-30: rgba(27, 131, 84, 0.30000001192092896); --colors-alpha-alpha-600-primary-40: rgba(27, 131, 84, 0.4000000059604645); --spacing-0_5: 0.125rem; --colors-alpha-alpha-600-primary-50: rgba(27, 131, 84, 0.5); --colors-alpha-alpha-600-primary-60: rgba(27, 131, 84, 0.6000000238418579); --colors-alpha-alpha-600-primary-70: rgba(27, 131, 84, 0.699999988079071); --colors-alpha-alpha-600-primary-80: rgba(27, 131, 84, 0.800000011920929); --colors-alpha-alpha-600-primary-90: rgba(27, 131, 84, 0.8999999761581421); --colors-alpha-alpha-600-primary-100: var( --colors-primary-sa-flag-600-primary ); --colors-alpha-alpha-yellow-10: rgba(220, 104, 3, 0.10000000149011612); --colors-alpha-alpha-yellow-20: rgba(220, 104, 3, 0.20000000298023224); --colors-alpha-alpha-red-10: rgba(217, 45, 32, 0.10000000149011612); --colors-alpha-alpha-red-20: rgba(217, 45, 32, 0.20000000298023224); --colors-alpha-alpha-blue-10: rgba(21, 112, 239, 0.10000000149011612); --colors-alpha-alpha-blue-20: rgba(21, 112, 239, 0.20000000298023224); --colors-alpha-alpha-green-10: rgba(7, 148, 85, 0.10000000149011612); --colors-alpha-alpha-green-20: rgba(7, 148, 85, 0.20000000298023224); --spacing-0: 0rem; --spacing-0_5: 0.125rem; --spacing-1: 0.25rem; --spacing-1_5: 0.375rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem; --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing-8: 2rem; --spacing-10: 2.5rem; --spacing-12: 3rem; --spacing-14: 3.5rem; --spacing-16: 4rem; --spacing-18: 4.5rem; --spacing-20: 5rem; --spacing-24: 6rem; --spacing-32: 8rem; --spacing-40: 10rem; --spacing-48: 12rem; --spacing-56: 14rem; --spacing-64: 16rem; --spacing-80: 20rem; --spacing-96: 24rem; --spacing-120: 30rem; --spacing-140: 35rem; --spacing-160: 40rem; --spacing-180: 45rem; --spacing-192: 48rem; --spacing-256: 64rem; --spacing-320: 80rem; --spacing-360: 90rem; --spacing-400: 100rem; --spacing-480: 120rem; --radius-0: 0rem; --radius-2: 0.125rem; --radius-4: 0.25rem; --radius-8: 0.5rem; --radius-16: 1rem; --radius-24: 1.5rem; --radius-9999: 9999px; } :root { --components-card-radius: var(--spacing-4); --radius-none: var(--radius-0); --radius-xs: var(--radius-2); --radius-sm: var(--radius-4); --radius-md: var(--radius-8); --radius-lg: var(--radius-16); --radius-xl: var(--radius-24); --radius-full: var(--radius-9999); } :root { --width-width-xxs: var(--spacing-80); --width-width-xs: var(--spacing-96); --width-width-sm: var(--spacing-120); --width-width-md: var(--spacing-140); --width-width-lg: var(--spacing-160); --width-width-xl: var(--spacing-192); --width-width-2xl: var(--spacing-256); --width-width-3xl: var(--spacing-320); --width-width-4xl: var(--spacing-360); --width-width-5xl: var(--spacing-400); --width-width-6xl: var(--spacing-480); --max-width-paragraph-max-width: var(--spacing-180); } :root { --tooltip-padding: var(--spacing-2); --tooltip-gap: var(--spacing-2); --tab-tab-button-gap: var(--spacing-1); --notification-notification-gap: var(--spacing-4); --notification-notification-padding: var(--spacing-4); --notification-notification-h-padding: var(--spacing-6); --notification-notification-alert-v-padding: var(--spacing-2); --notification-notification-alert-h-padding: var(--spacing-6); --notification-notification-toast-v-padding: var(--spacing-4); --notification-notification-toast-desktop-h-padding: var(--spacing-6); --notification-notification-toast-mobile-h-padding: var(--spacing-4); --tab-horizontal-tab-md-button-v-padding: var(--spacing-3); --tab-horizontal-tab-md-button-h-padding: var(--spacing-4); --tab-horizontal-tab-sm-button-v-padding: var(--spacing-2); --tab-horizontal-tab-sm-button-h-padding: var(--spacing-3); --tab-vertical-tab-md-button-v-padding: var(--spacing-1_5); --tab-vertical-tab-md-button-h-padding: var(--spacing-3); --tab-vertical-tab-sm-button-v-padding: var(--spacing-0_5); --tab-vertical-tab-sm-button-h-padding: var(--spacing-1_5); --table-cell-gap: var(--spacing-2); --table-cell-v-padding: var(--spacing-2); --table-cell-h-padding: var(--spacing-4); --control-control-vertical-gap: var(--spacing-1); --control-control-title-error-gap: var(--spacing-4); --control-control-switch-error-icon-gap: var(--spacing-2); --control-control-radio-error-icon-gap: var(--spacing-4); --control-control-switch-description-padding: var(--spacing-16); --control-control-radio-description-padding: var(--spacing-12); --form-label-gap: var(--spacing-1); --form-field-label-gap: var(--spacing-2); --form-input-padding: var(--spacing-0); --form-input-gap: var(--spacing-0); --form-textarea-padding: var(--spacing-0); --form-textarea-gap: var(--spacing-0); --form-select-padding: var(--spacing-0); --form-select-gap: var(--spacing-0); --form-iable-container: var(--spacing-2); --form-input-container-padding-left: var(--spacing-2); --form-input-container-padding-right: var(--spacing-4); --form-icon-enteredtext: var(--spacing-2); --form-icon-helpertext: var(--spacing-2); --form-prefix-suffix-padding-left: var(--spacing-4); --form-prefix-suffix-padding-right: var(--spacing-4); --form-prefix-suffix-padding-top-bottom: var(--spacing-0_5); --form-prefix-suffix-lable-icon: var(--spacing-1); --form-dropdown-container-padding-left-right: var(--spacing-4); --form-dropdown-icon-content: var(--spacing-1-); --form-textarea-container-padding-left-right: var(--spacing-4); --form-textarea-container-padding-top-bottom: var(--spacing-3); --accordion-accordion-lg-header-padding: var(--spacing-4); --accordion-accordion-lg-header-gap: var(--spacing-4); --accordion-accordion-md-header-padding: var(--spacing-3); --accordion-accordion-md-header-gap: var(--spacing-12); --accordion-accordion-sm-header-padding: var(--spacing-2); --accordion-accordion-sm-header-gap: var(--spacing-2); --card-card-lg-padding: var(--spacing-8); --section-section-padding: var(--spacing-8); --section-section-gap: var(--spacing-8); --text-content-gap: var(--spacing-2); --buttons-lg-gap: var(--spacing-1); --icon-text-gap: var(--spacing-2); --model-modal-padding: var(--spacing-6); --buttons-lg-padding: var(--spacing-4); --model-modal-gap: var(--spacing-2); --buttons-md-gap: var(--spacing-1); --buttons-md-padding: var(--spacing-3); --buttons-sm-gap: var(--spacing-1); --buttons-sm-padding: var(--spacing-2); --model-modal-content-bottom-padding: var(--spacing-4); --buttons-group-gap: var(--spacing-2); --button-menu-gap: var(--spacing-2); --button-menu-v-padding: var(--spacing-2); --button-menu-h-padding: var(--spacing-2); --link-md-gap: var(--spacing-2); --link-sm-gap: var(--spacing-1); --links-group-gap: var(--spacing-3); --progress-indicator-progress-indicator-gap: var(--spacing-2); --progress-indicator-progress-text-content-side-padding: var(--spacing-4); --pagination-pagination-item-sm-padding: var(--spacing-1); --pagination-pagination-item-md-padding: var(--spacing-1_5); --pagination-pagination-item-lg-padding: var(--spacing-2); --pagination-pagination-items-padding: var(--spacing-2); --global-spacing-none: var(--spacing-0); --global-spacing-xxs: var(--spacing-0_5); --global-spacing-xs: var(--spacing-1); --global-spacing-sm: var(--spacing-1_5); --global-spacing-md: var(--spacing-2); --global-spacing-lg: var(--spacing-3); --global-spacing-xl: var(--spacing-4); --global-spacing-2xl: var(--spacing-5); --global-spacing-3xl: var(--spacing-6); --global-spacing-4xl: var(--spacing-8); --global-spacing-5xl: var(--spacing-10); --global-spacing-6xl: var(--spacing-12); --global-spacing-7xl: var(--spacing-16); --global-spacing-8xl: var(--spacing-20); --global-spacing-9xl: var(--spacing-24); --global-spacing-10xl: var(--spacing-32); --global-spacing-11xl: var(--spacing-40); --card-card-lg-gap: var(--spacing-6); --card-card-md-padding: var(--spacing-8); --card-card-md-gap: var(--spacing-6); --card-card-sm-padding: var(--spacing-8); --card-card-sm-gap: var(--spacing-6); } @media screen and (max-width: 1024px) { :root { --components-card-radius: var(--spacing-4); --radius-none: var(--radius-0); --radius-xs: var(--radius-2); --radius-sm: var(--radius-4); --radius-md: var(--radius-8); --radius-lg: var(--radius-16); --radius-xl: var(--radius-24); --radius-full: var(--radius-9999); } :root { --tooltip-padding: var(--spacing-2); --tooltip-gap: var(--spacing-2); --tab-tab-button-gap: var(--spacing-1); --notification-notification-gap: var(--spacing-4); --notification-notification-padding: var(--spacing-4); --notification-notification-h-padding: var(--spacing-6); --notification-notification-alert-v-padding: var(--spacing-2); --notification-notification-alert-h-padding: var(--spacing-6); --notification-notification-toast-v-padding: var(--spacing-4); --notification-notification-toast-desktop-h-padding: var(--spacing-6); --notification-notification-toast-mobile-h-padding: var(--spacing-4); --tab-horizontal-tab-md-button-v-padding: var(--spacing-3); --tab-horizontal-tab-md-button-h-padding: var(--spacing-4); --tab-horizontal-tab-sm-button-v-padding: var(--spacing-2); --tab-horizontal-tab-sm-button-h-padding: var(--spacing-3); --tab-vertical-tab-md-button-v-padding: var(--spacing-1_5); --tab-vertical-tab-md-button-h-padding: var(--spacing-3); --tab-vertical-tab-sm-button-v-padding: var(--spacing-0_5); --tab-vertical-tab-sm-button-h-padding: var(--spacing-1_5); --table-cell-gap: var(--spacing-2); --table-cell-v-padding: var(--spacing-2); --table-cell-h-padding: var(--spacing-4); --control-control-vertical-gap: var(--spacing-1); --control-control-title-error-gap: var(--spacing-3); --control-control-switch-error-icon-gap: var(--spacing-2); --control-control-radio-error-icon-gap: var(--spacing-4); --control-control-switch-description-padding: var(--spacing-16); --control-control-radio-description-padding: var(--spacing-12); --form-label-gap: var(--spacing-1); --form-field-label-gap: var(--spacing-2); --form-input-padding: var(--spacing-0); --form-input-gap: var(--spacing-0); --form-textarea-padding: var(--spacing-0); --form-textarea-gap: var(--spacing-0); --form-select-padding: var(--spacing-0); --form-select-gap: var(--spacing-0); --form-iable-container: var(--spacing-2); --form-input-container-padding-left: var(--spacing-2); --form-input-container-padding-right: var(--spacing-4); --form-icon-enteredtext: var(--spacing-2); --form-icon-helpertext: var(--spacing-2); --form-prefix-suffix-padding-left: var(--spacing-4); --form-prefix-suffix-padding-right: var(--spacing-4); --form-prefix-suffix-padding-top-bottom: var(--spacing-0_5); --form-prefix-suffix-lable-icon: var(--spacing-1); --form-dropdown-container-padding-left-right: var(--spacing-4); --form-dropdown-icon-content: var(--spacing-1); --form-textarea-container-padding-left-right: var(--spacing-4); --form-textarea-container-padding-top-bottom: var(--spacing-3); --accordion-accordion-lg-header-padding: var(--spacing-4); --accordion-accordion-lg-header-gap: var(--spacing-4); --accordion-accordion-md-header-padding: var(--spacing-3); --accordion-accordion-md-header-gap: var(--spacing-3); --accordion-accordion-sm-header-padding: var(--spacing-2); --accordion-accordion-sm-header-gap: var(--spacing-2); --card-card-lg-padding: var(--spacing-6); --section-section-padding: var(--spacing-6); --section-section-gap: var(--spacing-6); --text-content-gap: var(--spacing-2); --buttons-lg-gap: var(--spacing-1); --icon-text-gap: var(--spacing-2); --model-modal-padding: var(--spacing-6); --buttons-lg-padding: var(--spacing-4); --model-modal-gap: var(--spacing-2); --buttons-md-gap: var(--spacing-1); --buttons-md-padding: var(--spacing-3); --buttons-sm-gap: var(--spacing-1); --buttons-sm-padding: var(--spacing-2); --model-modal-content-bottom-padding: var(--spacing-4); --buttons-group-gap: var(--spacing-2); --button-menu-gap: var(--spacing-2); --button-menu-v-padding: var(--spacing-2); --button-menu-h-padding: var(--spacing-2); --link-md-gap: var(--spacing-2); --link-sm-gap: var(--spacing-1); --links-group-gap: var(--spacing-3); --progress-indicator-progress-indicator-gap: var(--spacing-2); --progress-indicator-progress-text-content-side-padding: var(--spacing-4); --pagination-pagination-item-sm-padding: var(--spacing-1); --pagination-pagination-item-md-padding: var(--spacing-1_5); --pagination-pagination-item-lg-padding: var(--spacing-2); --pagination-pagination-items-padding: var(--spacing-2); --global-spacing-none: var(--spacing-0); --global-spacing-xxs: var(--spacing-0_5); --global-spacing-xs: var(--spacing-1); --global-spacing-sm: var(--spacing-1_5); --global-spacing-md: var(--spacing-2); --global-spacing-lg: var(--spacing-3); --global-spacing-xl: var(--spacing-4); --global-spacing-2xl: var(--spacing-5); --global-spacing-3xl: var(--spacing-6); --global-spacing-4xl: var(--spacing-8); --global-spacing-5xl: var(--spacing-10); --global-spacing-6xl: var(--spacing-12); --global-spacing-7xl: var(--spacing-16); --global-spacing-8xl: var(--spacing-20); --global-spacing-9xl: var(--spacing-24); --global-spacing-10xl: var(--spacing-32); --global-spacing-11xl: var(--spacing-40); --card-card-lg-gap: var(--spacing-6); --card-card-md-padding: var(--spacing-6); --card-card-md-gap: var(--spacing-5); --card-card-sm-padding: var(--spacing-6); --card-card-sm-gap: var(--spacing-5); } } @media screen and (max-width: 767px) { :root { --components-card-radius: var(--spacing-4); --radius-none: var(--radius-0); --radius-xs: var(--radius-2); --radius-sm: var(--radius-4); --radius-md: var(--radius-8); --radius-lg: var(--radius-16); --radius-xl: var(--radius-24); --radius-full: var(--radius-9999); } :root { --tooltip-padding: var(--spacing-2); --tooltip-gap: var(--spacing-2); --tab-tab-button-gap: var(--spacing-1); --notification-notification-gap: var(--spacing-2); --notification-notification-padding: var(--spacing-3); --notification-notification-h-padding: var(--spacing-4); --notification-notification-alert-v-padding: var(--spacing-2); --notification-notification-alert-h-padding: var(--spacing-4); --notification-notification-toast-v-padding: var(--spacing-3); --notification-notification-toast-desktop-h-padding: var(--spacing-4); --notification-notification-toast-mobile-h-padding: var(--spacing-4); --tab-horizontal-tab-md-button-v-padding: var(--spacing-2); --tab-horizontal-tab-md-button-h-padding: var(--spacing-3); --tab-horizontal-tab-sm-button-v-padding: var(--spacing-1); --tab-horizontal-tab-sm-button-h-padding: var(--spacing-2); --tab-vertical-tab-md-button-v-padding: var(--spacing-1); --tab-vertical-tab-md-button-h-padding: var(--spacing-2); --tab-vertical-tab-sm-button-v-padding: var(--spacing-0_5); --tab-vertical-tab-sm-button-h-padding: var(--spacing-1); --table-cell-gap: var(--spacing-1); --table-cell-v-padding: var(--spacing-1); --table-cell-h-padding: var(--spacing-3); --control-control-vertical-gap: var(--spacing-1); --control-control-title-error-gap: var(--spacing-2); --control-control-switch-error-icon-gap: var(--spacing-1); --control-control-radio-error-icon-gap: var(--spacing-12); --control-control-switch-description-padding: var(--spacing-16); --control-control-radio-description-padding: var(--spacing-12); --form-label-gap: var(--spacing-1); --form-field-label-gap: var(--spacing-2); --form-input-padding: var(--spacing-0); --form-input-gap: var(--spacing-0); --form-textarea-padding: var(--spacing-0); --form-textarea-gap: var(--spacing-0); --form-select-padding: var(--spacing-0); --form-select-gap: var(--spacing-0); --form-iable-container: var(--spacing-2); --form-input-container-padding-left: var(--spacing-2); --form-input-container-padding-right: var(--spacing-4); --form-icon-enteredtext: var(--spacing-2); --form-icon-helpertext: var(--spacing-2); --form-prefix-suffix-padding-left: var(--spacing-4); --form-prefix-suffix-padding-right: var(--spacing-4); --form-prefix-suffix-padding-top-bottom: var(--spacing-0_5); --form-prefix-suffix-lable-icon: var(--spacing-1); --form-dropdown-container-padding-left-right: var(--spacing-4); --form-dropdown-icon-content: var(--spacing-1); --form-textarea-container-padding-left-right: var(--spacing-4); --form-textarea-container-padding-top-bottom: var(--spacing-3); --accordion-accordion-lg-header-padding: var(--spacing-4); --accordion-accordion-lg-header-gap: var(--spacing-4); --accordion-accordion-md-header-padding: var(--spacing-3); --accordion-accordion-md-header-gap: var(--spacing-3); --accordion-accordion-sm-header-padding: var(--spacing-2); --accordion-accordion-sm-header-gap: var(--spacing-2); --card-card-lg-padding: var(--spacing-4); --section-section-padding: var(--spacing-4); --section-section-gap: var(--spacing-4); --text-content-gap: var(--spacing-1); --buttons-lg-gap: var(--spacing-1); --icon-text-gap: var(--spacing-1); --model-modal-padding: var(--spacing-4); --buttons-lg-padding: var(--spacing-4); --model-modal-gap: var(--spacing-2); --buttons-md-gap: var(--spacing-1); --buttons-md-padding: var(--spacing-3); --buttons-sm-gap: var(--spacing-1); --buttons-sm-padding: var(--spacing-2); --model-modal-content-bottom-padding: var(--spacing-2); --buttons-group-gap: var(--spacing-1); --button-menu-gap: var(--spacing-1); --button-menu-v-padding: var(--spacing-2); --button-menu-h-padding: var(--spacing-2); --link-md-gap: var(--spacing-1); --link-sm-gap: var(--spacing-1); --links-group-gap: var(--spacing-2); --progress-indicator-progress-indicator-gap: var(--spacing-4); --progress-indicator-progress-text-content-side-padding: var(--spacing-3); --pagination-pagination-item-sm-padding: var(--spacing-1); --pagination-pagination-item-md-padding: var(--spacing-1_5); --pagination-pagination-item-lg-padding: var(--spacing-2); --pagination-pagination-items-padding: var(--spacing-1); --global-spacing-none: var(--spacing-0); --global-spacing-xxs: var(--spacing-0_5); --global-spacing-xs: var(--spacing-1); --global-spacing-sm: var(--spacing-1_5); --global-spacing-md: var(--spacing-2); --global-spacing-lg: var(--spacing-3); --global-spacing-xl: var(--spacing-4); --global-spacing-2xl: var(--spacing-5); --global-spacing-3xl: var(--spacing-6); --global-spacing-4xl: var(--spacing-8); --global-spacing-5xl: var(--spacing-10); --global-spacing-6xl: var(--spacing-12); --global-spacing-7xl: var(--spacing-16); --global-spacing-8xl: var(--spacing-20); --global-spacing-9xl: var(--spacing-24); --global-spacing-10xl: var(--spacing-32); --global-spacing-11xl: var(--spacing-40); --card-card-lg-gap: var(--spacing-4); --card-card-md-padding: var(--spacing-4); --card-card-md-gap: var(--spacing-3); --card-card-sm-padding: var(--spacing-4); --card-card-sm-gap: var(--spacing-3); } } @media (prefers-color-scheme: light) { :root { --background-white: var(--colors-base-white); --background-body: var(--colors-neutral-50); --background-menu: var(--colors-base-white); --background-card: var(--colors-base-white); --background-surface-oncolor: var(--colors-base-white); --background-black: var(--colors-base-black); --background-neutral-800: var(--colors-neutral-800); --background-neutral-400: var(--colors-neutral-400); --background-neutral-300: var(--colors-neutral-300); --background-neutral-200: var(--colors-neutral-200); --background-neutral-100: var(--colors-neutral-100); --background-neutral-50: var(--colors-neutral-50); --background-neutral-25: var(--colors-neutral-25); --background-primary: var(--colors-primary-sa-flag-600-primary); --background-primary-400: var(--colors-primary-sa-flag-400); --background-primary-200: var(--colors-primary-sa-flag-200); --background-primary-50: var(--colors-primary-sa-flag-50); --background-primary-25: var(--colors-primary-sa-flag-25); --background-secondary: var(--colors-secondary-gold-600-primary); --background-secondary-50: var(--colors-secondary-gold-50); --background-secondary-25: var(--colors-secondary-gold-25); --background-tertiary: var(--colors-tertiary-lavendar-600); --background-tertiary-50: var(--colors-tertiary-lavendar-50); --background-tertiary-25: var(--colors-tertiary-lavendar-25); --background-success: var(--colors-green-600); --background-success-50: var(--colors-green-50); --background-success-25: var(--colors-green-25); --background-info: var(--colors-blue-600); --background-info-50: var(--colors-blue-50); --background-info-25: var(--colors-blue-25); --background-warning: var(--colors-yellow-600); --background-warning-50: var(--colors-yellow-50); --background-warning-25: var(--colors-yellow-25); --background-error: var(--colors-red-600); --background-error-50: var(--colors-red-50); --background-error-25: var(--colors-red-25); --background-sa-flag: var(--colors-green-900); --background-sa-flag-50: var(--colors-green-50); --background-sa-flag-25: var(--colors-green-25); --background-notification-white: var(--colors-base-white); --background-nav-header: var(--colors-primary-sa-flag-800); --text-default: var(--colors-base-black); --text-primary: var(--colors-primary-sa-flag-600-primary); --text-secondary: var(--colors-secondary-gold-600-primary); --text-tertiary: var(--colors-tertiary-lavendar-500-primary); --text-primary-sa-flag: var(--colors-primary-sa-flag-800); --text-display: var(--colors-neutral-800); --text-primary-paragraph: var(--colors-neutral-700); --text-secondary-paragraph: var(--colors-neutral-500); --text-oncolor-primary: var(--colors-base-white); --text-oncolor-secondary: var(--alpha-white-80); --text-oncolor-tertiary: var(--alpha-white-70); --text-success: var(--colors-green-700); --text-info: var(--colors-blue-700); --text-warning: var(--colors-yellow-700); --text-error: var(--colors-red-700); --text-primary-light: var(--colors-primary-sa-flag-300); --text-secondary-light: var(--colors-secondary-gold-300); --text-tertiary-light: var(--colors-tertiary-lavendar-300); --global-text-default-disabled: var(--colors-neutral-400); --global-text-default-oncolor-disabled: var(--alpha-white-40); --border-white: var(--colors-base-white); --border-white-40: var(--alpha-white-40); --button-background-black-default: var(--colors-neutral-950); --button-background-black-hovered: var(--colors-neutral-800); --button-background-black-pressed: var(--colors-neutral-600); --button-background-black-selected: var(--colors-neutral-700); --button-background-black-focused: var(--colors-neutral-950); --button-background-primary-default: var( --colors-primary-sa-flag-600-primary ); --button-background-primary-hovered: var(--colors-primary-sa-flag-700); --button-background-primary-pressed: var(--colors-primary-sa-flag-900); --button-background-primary-selected: var(--colors-primary-sa-flag-800); --button-background-primary-focused: var( --colors-primary-sa-flag-600-primary ); --button-background-neutral-default: var(--colors-neutral-100); --button-background-neutral-hovered: var(--colors-neutral-100); --button-background-neutral-pressed: var(--colors-neutral-200); --button-background-neutral-selected: var(--colors-neutral-200); --button-background-neutral-focused: var(--colors-neutral-100); --button-background-danger-primary-default: var(--colors-red-600); --button-background-danger-primary-hovered: var(--colors-red-700); --button-background-danger-primary-pressed: var(--colors-red-900); --button-background-danger-primary-selected: var(--colors-red-800); --button-background-danger-primary-focused: var(--colors-red-600); --button-label-danger-primary-default-oncolor: var(--colors-red-200); --button-label-danger-primary-hovered-oncolor: var(--colors-red-300); --button-label-danger-primary-pressed-oncolor: var(--colors-red-400); --button-background-danger-secondary-default: var(--colors-red-50); --button-background-danger-secondary-hovered: var(--colors-red-100); --button-background-danger-secondary-pressed: var(--colors-red-200); --button-background-danger-secondary-selected: var(--colors-red-50); --button-background-danger-secondary-focused: var(--colors-red-50); --button-background-oncolor-default: var(--colors-base-white); --button-background-oncolor-hovered: var(--alpha-white-80); --button-background-oncolor-pressed: var(--alpha-white-60); --button-background-oncolor-selected: var(--alpha-white-70); --button-background-oncolor-focused: var(--alpha-white-100); --button-background-transparent-default: var(--alpha-white-0); --button-background-transparent-hovered: var(--alpha-white-20); --button-background-transparent-pressed: var(--alpha-white-40); --button-background-transparent-selected: var(--alpha-white-30); --button-background-transparent-focused: var(--alpha-white-0); --button-background-disabled-on-color: var(--alpha-white-20); --button-label-transparent-hovered-on-color: var( --colors-primary-sa-flag-400 ); --border-black: var(--colors-base-black); --border-primary: var(--colors-primary-sa-flag-600-primary); --border-primary-light: var(--colors-primary-sa-flag-200); --border-secondary: var(--colors-secondary-gold-600-primary); --border-secondary-light: var(--colors-secondary-gold-200); --border-tertiary: var(--colors-tertiary-lavendar-500-primary); --border-tertiary-light: var(--colors-tertiary-lavendar-200); --border-neutral-primary: var(--colors-neutral-300); --border-neutral-secondary: var(--colors-neutral-200); --border-neutral-tertiary: var(--colors-neutral-100); --border-background-white: var(--colors-neutral-100); --border-background-neutral: var(--colors-neutral-300); --border-transparent-10: var(--alpha-white-10); --border-oncolor-transparent-30: var(--colors-alpha-alpha-white-30); --button-label-transparent-pressed-on-color: var( --colors-primary-sa-flag-300 ); --border-success: var(--colors-green-700); --border-success-light: var(--colors-green-200); --border-gray: var(--colors-neutral-10); --border-info: var(--colors-blue-700); --button-label-transparent-selected-on-color: var( --colors-primary-sa-flag-400 ); --border-info-light: var(--colors-blue-200); --border-warning: var(--colors-yellow-700); --button-icon-transparent-hovered-on-color: var(--background-primary-400); --border-warning-light: var(--colors-yellow-200); --button-icon-transparent-pressed-on-color: var( --colors-primary-sa-flag-300 ); --border-error: var(--colors-red-700); --border-error-light: var(--colors-red-200); --button-icon-transparent-selected-on-color: var( --colors-primary-sa-flag-400 ); --global-border-disabled: var(--colors-neutral-400); --link-primary: var(--colors-primary-sa-flag-600-primary); --link-primary-hovered: var(--colors-primary-sa-flag-400); --link-primary-pressed: var(--colors-primary-sa-flag-300); --link-primary-focused: var(--colors-primary-sa-flag-600-primary); --link-primary-visited: var(--colors-primary-sa-flag-800); --link-icon-primary-hovered: var(--colors-primary-sa-flag-400); --link-icon-primary-pressed: var(--colors-primary-sa-flag-300); --link-icon-primary-focused: var(--colors-primary-sa-flag-600-primary); --link-icon-primary-visited: var(--colors-primary-sa-flag-800); --link-secondary: var(--colors-secondary-gold-600-primary); --link-secondary-hovered: var(--colors-secondary-gold-400); --link-secondary-pressed: var(--colors-secondary-gold-300); --link-secondary-focused: var(--colors-secondary-gold-600-primary); --link-secondary-visited: var(--colors-secondary-gold-900); --link-tertiary: var(--colors-tertiary-lavendar-500-primary); --link-tertiary-hovered: var(--colors-tertiary-lavendar-400); --link-tertiary-pressed: var(--colors-tertiary-lavendar-300); --link-tertiary-focused: var(--colors-tertiary-lavendar-500-primary); --link-tertiary-visited: var(--colors-tertiary-lavendar-800); --link-neutral: var(--colors-neutral-700); --link-neutral-hovered: var(--colors-neutral-500); --link-icon-neutral-hovered: var(--colors-neutral-500); --link-neutral-pressed: var(--colors-neutral-400); --link-icon-neutral-pressed: var(--colors-neutral-400); --link-neutral-focused: var(--colors-neutral-700); --link-icon-neutral-focused: var(--colors-neutral-700); --link-neutral-visited: var(--colors-neutral-600); --link-icon-neutral-visited: var(--colors-neutral-600); --link-danger: var(--colors-red-600); --link-danger-hovered: var(--colors-red-700); --link-icon-danger-hovered: var(--colors-red-700); --link-danger-pressed: var(--colors-red-900); --link-icon-danger-pressed: var(--colors-red-900); --link-danger-focused: var(--colors-red-600); --link-icon-danger-focused: var(--colors-red-600); --link-danger-visited: var(--colors-red-800); --link-icon-danger-visited: var(--colors-red-800); --link-oncolor: var(--colors-base-white); --link-oncolor-hovered: var(--colors-alpha-alpha-white-80); --link-icon-oncolor-hovered: var(--alpha-white-80); --link-oncolor-pressed: var(--colors-alpha-alpha-white-60); --link-icon-oncolor-pressed: var(--alpha-white-60); --link-oncolor-focused: var(--colors-base-white); --link-link-oncolor-focused: var(--colors-base-white); --link-oncolor-visited: var(--colors-alpha-alpha-white-90); --link-icon-oncolor-visited: var(--alpha-white-90); --link-oncolor-disabled: var(--colors-alpha-alpha-white-30); --link-icon-oncolor-disabled: var(--alpha-white-30); --icon-oncolor: var(--colors-base-white); --tag-background-neutral: var(--colors-neutral-600); --tag-background-neutral-light: var(--colors-neutral-50); --tag-background-on-color: var(--colors-alpha-alpha-white-20); --tag-text-neutral: var(--colors-neutral-800); --tag-text-success: var(--colors-green-800); --tag-text-info: var(--colors-blue-800); --tag-text-warning: var(--colors-yellow-800); --tag-text-error: var(--colors-red-800); --tag-icon-neutral: var(--colors-neutral-800); --tag-icon-success: var(--colors-green-800); --tag-icon-info: var(--colors-blue-800); --tag-icon-warning: var(--colors-yellow-800); --tag-icon-error: var(--colors-red-800); --tag-background-success: var(--colors-green-700); --tag-background-success-light: var(--colors-green-50); --tag-background-info: var(--colors-blue-600); --tag-background-info-light: var(--colors-blue-50); --tag-background-warning: var(--colors-yellow-700); --tag-background-warning-light: var(--colors-yellow-50); --tag-background-error: var(--colors-red-600); --tag-background-error-light: var(--colors-red-50); --tag-border-neutral: var(--colors-neutral-600); --tag-border-neutral-light: var(--colors-neutral-50); --tag-border-on-color: var(--colors-alpha-alpha-white-60); --tag-border-success: var(--colors-green-700); --tag-border-success-light: var(--colors-green-200); --tag-border-info: var(--colors-blue-700); --tag-border-info-light: var(--colors-blue-200); --tag-border-warning: var(--colors-yellow-700); --tag-border-warning-light: var(--colors-yellow-200); --tag-border-error: var(--colors-red-700); --tag-border-error-light: var(--colors-red-200); --tag-dot: var(--colors-alpha-alpha-white-60); --form-text-form-title: var(--text-default); --control-primary: var(--alpha-white-0); --table-cell-border: var(--colors-neutral-300); --table-cell-border-inverse: var(--border-black); --table-text-head: var(--colors-neutral-700); --table-text-body: var(--text-default); --table-background-disabled: var(--global-background-disabled); --table-background-hover-selected: var(--colors-neutral-50); --table-background-header: var(--colors-neutral-100); --table-background-row: var(--colors-neutral-50); --control-primary-checked: var(--colors-primary-sa-flag-600-primary); --control-primary-hovered: var(--colors-primary-sa-flag-800); --control-primary-pressed: var(--colors-primary-sa-flag-900); --control-primary-focused: var(--colors-primary-sa-flag-600-primary); --control-neutral-checked: var(--colors-neutral-950); --control-neutral-hovered: var(--colors-neutral-600); --control-neutral-pressed: var(--colors-neutral-500); --control-neutral-focused: var(--colors-neutral-950); --control-primary--readonly: var(--alpha-white-0); --control-pressed: var(--colors-neutral-300); --control-ripple-effect: var(--colors-neutral-100); --control-border: var(--colors-neutral-500); --table-background-row-selected-hovered: var(--colors-primary-sa-flag-50); --form-text-form-paragraph: var(--text-secondary-paragraph); --table-boarder-row-selected-hovered: var(--colors-neutral-100); --form-field-text-label: var(--text-default); --table-background-row-select: var(--colors-primary-sa-flag-50); --table-background-row-hovered: var(--colors-neutral-100); --table-background-row-alt: var(--colors-neutral-50); --form-field-text-placeholder: var(--text-secondary-paragraph); --form-field-text-hovered: var(--text-default); --stepper-button-completed: var(--colors-primary-sa-flag-600-primary); --tooltip-background-light: var(--colors-base-white); --tooltip-text-heading-light: var(--text-display); --tooltip-text-paragraph-light: var(--text-primary-paragraph); --tooltip-background-dark: var(--colors-neutral-800); --tooltip-text-heading-dark: var(--colors-neutral-50); --tooltip-text-paragraph-dark: var(--colors-neutral-100); --alpha-white-0: var(--colors-alpha-alpha-white-0); --alpha-white-10: var(--colors-alpha-alpha-white-10); --alpha-white-20: var(--colors-alpha-alpha-white-20); --alpha-white-30: var(--colors-alpha-alpha-white-30); --alpha-white-40: var(--colors-alpha-alpha-white-40); --alpha-white-50: var(--colors-alpha-alpha-white-50); --alpha-white-60: var(--colors-alpha-alpha-white-60); --alpha-white-70: var(--colors-alpha-alpha-white-70); --alpha-white-80: var(--colors-alpha-alpha-white-80); --alpha-white-90: var(--colors-alpha-alpha-white-90); --alpha-white-100: var(--colors-alpha-alpha-white-100); --alpha-black-0: var(--colors-alpha-alpha-black-0); --alpha-black-10: var(--colors-alpha-alpha-black-10); --alpha-black-20: var(--colors-alpha-alpha-black-20); --alpha-black-30: var(--colors-alpha-alpha-black-30); --alpha-black-40: var(--colors-alpha-alpha-black-40); --alpha-black-50: var(--colors-alpha-alpha-black-50); --alpha-black-60: var(--colors-alpha-alpha-black-60); --alpha-black-70: var(--colors-alpha-alpha-black-70); --alpha-black-80: var(--colors-alpha-alpha-black-80); --alpha-black-90: var(--colors-alpha-alpha-black-90); --alpha-black-100: var(--colors-alpha-alpha-black-100); --global-background-disabled: var(--colors-neutral-200); --global-background-disabled-primary: var(--colors-primary-sa-flag-200); --global-background-inverse-disabled: var(--colors-neutral-100); --stepper-button-completed-hovered: var(--colors-primary-sa-flag-700); --stepper-button-current: var(--colors-primary-sa-flag-600-primary); --stepper-button-current-hovered: var(--colors-primary-sa-flag-700); --stepper-button-upcomming: var(--colors-neutral-300); --stepper-button-upcomming-hovered: var(--colors-neutral-400); --stepper-button-background: var(--colors-base-white); --stepper-text-primary: var(--text-display); --stepper-text-secondary: var(--text-primary-paragraph); --stepper-text-tertiary: var(--text-secondary-paragraph); --stepper-line-completed: var(--colors-primary-sa-flag-600-primary); --stepper-line-completed-hovered: var(--colors-primary-sa-flag-700); --stepper-line-current: var(--colors-neutral-300); --stepper-line-upcomming: var(--colors-neutral-300); --stepper-line-upcomming-hovered: var(--colors-neutral-400); --form-field-text-focused: var(--text-primary-paragraph); --form-field-text-pressed: var(--text-primary-paragraph); --form-field-text-filled: var(--text-default); --form-field-text-readonly: var(--text-default); --form-field-text-helper: var(--text-secondary-paragraph); --form-field-background-default: var(--background-card); --form-field-background-lighter: var(--colors-neutral-25); --form-field-background-darker: var(--colors-neutral-100); --form-field-background-pressed: var(--colors-neutral-100); --form-field-border-default: var(--colors-neutral-400); --form-field-border-hovered: var(--colors-neutral-700); --form-field-border-pressed: var(--colors-neutral-950); --form-field-border-error: var(--border-error); --form-option-background-hover: var(--colors-neutral-100); --form-option-background-pressed: var(--colors-neutral-200); --form-datecell-background-default: var( --colors-primary-sa-flag-600-primary ); --form-datecell-background-hovered: var(--colors-primary-sa-flag-700); --icon-default: var(--colors-base-black); --form-datecell-background-pressed: var(--colors-primary-sa-flag-900); --form-datecell-background-focused: var( --colors-primary-sa-flag-600-primary ); --form-datecell-today-background-default: var(--alpha-white-0); --form-datecell-today-background-hovered: var(--colors-neutral-200); --form-datecell-today-background-pressed: var(--colors-neutral-300); --icon-default-500: var(--colors-neutral-500); --form-datecell-today-background-focused: var(--alpha-white-0); --form-datecell-background-disabled: rgba(255, 255, 255, 1); --form-datecell-background-600: var(--colors-primary-sa-flag-600-primary); --form-datecell-background-300: var(--colors-primary-sa-flag-300); --form-datecell-background-200: var(--colors-primary-sa-flag-200); --form-datecell-background-100: var(--colors-primary-sa-flag-100); --control-icon-hovered: var(--icon-oncolor); --alpha-primary-10: var(--colors-alpha-alpha-600-primary-10); --icon-default-400: var(--colors-neutral-400); --icon-primary: var(--colors-primary-sa-flag-600-primary); --alpha-primary-20: var(--colors-alpha-alpha-600-primary-20); --icon-primary-light: var(--colors-primary-sa-flag-50); --alpha-warning-10: var(--colors-alpha-alpha-yellow-10); --icon-primary-400: var(--colors-primary-sa-flag-400); --alpha-warning-20: var(--colors-alpha-alpha-yellow-20); --alpha-error-10: var(--colors-alpha-alpha-red-10); --alpha-error-20: var(--colors-alpha-alpha-red-20); --alpha-info-10: var(--colors-alpha-alpha-blue-10); --alpha-info-20: var(--colors-alpha-alpha-blue-20); --alpha-success-10: var(--colors-alpha-alpha-green-10); --alpha-success-20: var(--colors-alpha-alpha-green-20); --icon-neutral: var(--colors-neutral-700); --icon-neutral-light: var(--colors-neutral-50); --icon-secondary: var(--colors-secondary-gold-600-primary); --icon-secondary-light: var(--colors-secondary-gold-50); --icon-tertiary: var(--colors-tertiary-lavendar-500-primary); --icon-tertiary-light: var(--colors-tertiary-lavendar-50); --icon-success: var(--colors-green-700); --icon-success-light: var(--colors-green-50); --icon-info: var(--colors-blue-700); --icon-info-light: var(--colors-blue-50); --icon-warning: var(--colors-yellow-700); --icon-warning-light: var(--colors-yellow-50); --icon-error: var(--colors-red-700); --icon-error-light: var(--colors-red-50); --global-icon-default-disabled: var(--colors-neutral-400); --background-warning-light: var(--background-warning-50); --background-error-light: var(--background-error-50); --global-icon-default-oncolor-disabled: var(--colors-alpha-alpha-white-40); --background-brand-light: var(--colors-primary-sa-flag-50); --global-control-disabled: var(--colors-neutral-400); --background-info-light: var(--background-info-50); --background-success-light: var(--background-success-50); --control-icon-pressed: var(--icon-oncolor); --control-icon-disabled: var(--colors-base-white); --form-textarea-scrollbar-bar: var(--background-neutral-300); --control-boarder-disabled: var(--colors-neutral-400); --control-disabled: var(--colors-neutral-300); --border-disabled: var(--colors-neutral-300); --unselected-tab-icon: var(--colors-neutral-700); } } @media (prefers-color-scheme: dark) { :root { --background-white: var(--colors-neutral-950); --background-body: var(--colors-neutral-900); --background-menu: var(--colors-neutral-800); --background-card: var(--colors-neutral-800); --surface-oncolor: var(--colors-base-white); --background-black: var(--colors-base-white); --background-neutral-800: var(--colors-neutral-600); --background-neutral-400: var(--colors-neutral-400); --background-neutral-300: var(--colors-neutral-500); --background-neutral-200: var(--colors-neutral-600); --background-neutral-100: var(--colors-neutral-800); --background-neutral-50: var(--colors-neutral-900); --background-neutral-25: var(--colors-neutral-950); --background-primary: var(--colors-primary-sa-flag-600-primary); --background-primary-400: var(--colors-primary-sa-flag-400); --background-primary-200: var(--colors-neutral-700); --background-primary-50: var(--colors-alpha-alpha-600-primary-10); --background-primary-25: var(--colors-primary-sa-flag-950); --background-secondary: var(--colors-secondary-gold-600-primary); --background-secondary-50: var(--colors-neutral-800); --background-secondary-25: var(--colors-neutral-900); --background-tertiary: var(--colors-tertiary-lavendar-600); --background-tertiary-50: var(--colors-neutral-800); --background-tertiary-25: var(--colors-neutral-900); --background-success: var(--colors-green-600); --background-success-50: var(--alpha-success-20); --background-success-25: var(--alpha-success-10); --background-info: var(--colors-blue-600); --background-info-50: var(--alpha-info-20); --background-info-25: var(--alpha-info-10); --background-warning: var(--colors-yellow-600); --background-warning-50: var(--alpha-warning-20); --background-warning-25: var(--alpha-warning-10); --background-error: var(--colors-red-600); --background-error-50: var(--alpha-error-20); --background-error-25: var(--alpha-error-10); --background-sa-flag: var(--colors-primary-sa-flag-600-primary); --background-sa-flag-50: var(--colors-neutral-800); --background-sa-flag-25: var(--colors-neutral-900); --background-notification-white: var(--colors-neutral-900); --background-nav-header: var(--colors-primary-sa-flag-800); --text-default: var(--colors-base-white); --text-primary: var(--colors-primary-sa-flag-400); --text-secondary: var(--colors-secondary-gold-400); --text-tertiary: var(--colors-tertiary-lavendar-400); --text-primary-sa-flag: var(--colors-primary-sa-flag-100); --text-display: var(--colors-neutral-50); --text-primary-paragraph: var(--colors-neutral-100); --text-secondary-paragraph: var(--colors-neutral-200); --text-oncolor-primary: var(--colors-base-white); --text-oncolor-secondary: var(--alpha-white-80); --text-oncolor-tertiary: var(--alpha-white-70); --text-success: var(--colors-green-400); --text-info: var(--colors-blue-400); --text-warning: var(--colors-yellow-400); --text-error: var(--colors-red-400); --text-primary-light: var(--colors-primary-sa-flag-400); --text-secondary-light: var(--colors-secondary-gold-400); --text-tertiary-light: var(--colors-tertiary-lavendar-400); --global-text-default-disabled: var(--colors-neutral-400); --global-text-default-oncolor-disabled: var(--alpha-black-40); --border-white: var(--colors-base-black); --border-white-40: var(--alpha-white-40); --button-background-black-default: var(--colors-neutral-950); --button-background-black-hovered: var(--colors-neutral-800); --button-background-black-pressed: var(--colors-neutral-600); --button-background-black-selected: var(--colors-neutral-700); --button-background-black-focused: var(--colors-neutral-950); --button-background-primary-default: var( --colors-primary-sa-flag-600-primary ); --button-background-primary-hovered: var(--colors-primary-sa-flag-700); --button-background-primary-pressed: var(--colors-primary-sa-flag-900); --button-background-primary-selected: var(--colors-primary-sa-flag-800); --button-background-primary-focused: var( --colors-primary-sa-flag-600-primary ); --button-background-neutral-default: var(--colors-neutral-800); --button-background-neutral-hovered: var(--colors-neutral-700); --button-background-neutral-pressed: var(--colors-neutral-600); --button-background-neutral-selected: var(--colors-neutral-700); --button-background-neutral-focused: var(--colors-neutral-800); --button-background-danger-primary-default: var(--colors-red-600); --button-background-danger-primary-hovered: var(--colors-red-700); --button-background-danger-primary-pressed: var(--colors-red-900); --button-background-danger-primary-selected: var(--colors-red-800); --button-background-danger-primary-focused: var(--colors-red-600); --button-label-danger-primary-default-oncolor: var(--colors-red-200); --button-label-danger-primary-hovered-oncolor: var(--colors-red-300); --button-label-danger-primary-pressed-oncolor: var(--colors-red-400); --button-background-danger-secondary-default: var(--colors-red-50); --button-background-danger-secondary-hovered: var(--colors-red-100); --button-background-danger-secondary-pressed: var(--colors-red-200); --button-background-danger-secondary-selected: var(--colors-red-50); --button-background-danger-secondary-focused: var(--colors-red-50); --button-background-oncolor-default: var(--colors-base-black); --button-background-oncolor-hovered: var(--alpha-white-80); --button-background-oncolor-pressed: var(--alpha-white-60); --button-background-oncolor-selected: var(--alpha-white-70); --button-background-oncolor-focused: var(--alpha-white-100); --button-background-transparent-default: var(--alpha-white-0); --button-background-transparent-hovered: var(--alpha-white-20); --button-background-transparent-pressed: var(--alpha-white-40); --button-background-transparent-selected: var(--alpha-white-30); --button-background-transparent-focused: var(--alpha-white-0); --button-background-disabled-on-color: var(--alpha-white-20); --button-label-transparent-hovered-on-color: var( --colors-primary-sa-flag-400 ); --border-black: var(--colors-base-white); --border-primary: var(--colors-primary-sa-flag-600-primary); --border-primary-light: var(--colors-green-200); --border-secondary: var(--colors-secondary-gold-600-primary); --border-secondary-light: var(--colors-secondary-gold-200); --border-tertiary: var(--colors-tertiary-lavendar-500-primary); --border-tertiary-light: var(--colors-tertiary-lavendar-200); --border-neutral-primary: var(--colors-neutral-500); --border-neutral-secondary: var(--colors-neutral-700); --border-neutral-tertiary: var(--colors-neutral-800); --border-background-white: var(--colors-neutral-600); --border-background-neutral: var(--colors-neutral-600); --border-transparent-10: var(--alpha-white-10); --border-oncolor-transparent-30: var(--colors-alpha-alpha-white-30); --button-label-transparent-pressed-on-color: var( --colors-primary-sa-flag-300 ); --border-success: var(--colors-green-500); --border-success-light: var(--colors-green-200); --border-info: var(--colors-blue-700); --button-label-transparent-selected-on-color: var( --colors-primary-sa-flag-400 ); --border-info-light: var(--colors-blue-200); --border-warning: var(--colors-yellow-700); --button-icon-transparent-hovered-on-color: var( --colors-primary-sa-flag-400 ); --border-warning-light: var(--colors-yellow-200); --button-icon-transparent-pressed-on-color: var( --colors-primary-sa-flag-300 ); --border-error: var(--colors-red-700); --border-error-light: var(--colors-red-200); --button-icon-transparent-selected-on-color: var( --colors-primary-sa-flag-400 ); --global-border-disabled: var(--colors-neutral-400); --link-primary: var(--colors-primary-sa-flag-600-primary); --link-primary-hovered: var(--colors-primary-sa-flag-400); --link-primary-pressed: var(--colors-primary-sa-flag-300); --link-primary-focused: var(--colors-primary-sa-flag-600-primary); --link-primary-visited: var(--colors-primary-sa-flag-800); --link-icon-primary-hovered: var(--colors-primary-sa-flag-400); --link-icon-primary-pressed: var(--colors-primary-sa-flag-300); --link-icon-primary-focused: var(--colors-primary-sa-flag-600-primary); --link-icon-primary-visited: var(--colors-primary-sa-flag-800); --link-secondary: var(--colors-secondary-gold-600-primary); --link-secondary-hovered: var(--colors-secondary-gold-400); --link-secondary-pressed: var(--colors-secondary-gold-300); --link-secondary-focused: var(--colors-secondary-gold-600-primary); --link-secondary-visited: var(--colors-secondary-gold-900); --link-tertiary: var(--colors-tertiary-lavendar-500-primary); --link-tertiary-hovered: var(--colors-tertiary-lavendar-400); --link-tertiary-pressed: var(--colors-tertiary-lavendar-300); --link-tertiary-focused: var(--colors-tertiary-lavendar-500-primary); --link-tertiary-visited: var(--colors-tertiary-lavendar-800); --link-neutral: var(--colors-neutral-200); --link-neutral-hovered: var(--colors-neutral-400); --link-icon-neutral-hovered: var(--colors-neutral-400); --link-neutral-pressed: var(--colors-neutral-500); --link-icon-neutral-pressed: var(--colors-neutral-500); --link-neutral-focused: var(--colors-neutral-200); --link-icon-neutral-focused: var(--colors-neutral-200); --link-neutral-visited: var(--colors-neutral-300); --link-icon-neutral-visited: var(--colors-neutral-300); --link-danger: var(--colors-red-600); --link-danger-hovered: var(--colors-red-700); --link-icon-danger-hovered: var(--colors-red-700); --link-danger-pressed: var(--colors-red-900); --link-icon-danger-pressed: var(--colors-red-900); --link-danger-focused: var(--colors-red-600); --link-icon-danger-focused: var(--colors-red-600); --link-danger-visited: var(--colors-red-800); --link-icon-danger-visited: var(--colors-red-800); --link-oncolor: var(--colors-base-white); --link-oncolor-hovered: var(--colors-alpha-alpha-white-80); --link-icon-oncolor-hovered: var(--alpha-white-80); --link-oncolor-pressed: var(--colors-alpha-alpha-white-60); --link-icon-oncolor-pressed: var(--alpha-white-60); --link-oncolor-focused: var(--colors-base-white); --link-link-oncolor-focused: var(--colors-base-white); --link-oncolor-visited: var(--colors-alpha-alpha-white-90); --link-icon-oncolor-visited: var(--alpha-white-90); --link-oncolor-disabled: var(--colors-alpha-alpha-white-30); --link-icon-oncolor-disabled: var(--alpha-white-30); --icon-oncolor: var(--colors-base-white); --tag-background-neutral: var(--colors-primary-sa-flag-600-primary); --tag-background-neutral-light: var(--colors-neutral-800); --tag-background-on-color: var(--colors-alpha-alpha-white-20); --tag-text-neutral: var(--colors-neutral-100); --tag-text-success: var(--colors-green-800); --tag-text-info: var(--colors-blue-800); --tag-text-warning: var(--colors-yellow-800); --tag-text-error: var(--colors-red-800); --tag-icon-neutral: var(--colors-neutral-100); --tag-icon-success: var(--colors-green-800); --tag-icon-info: var(--colors-blue-800); --tag-icon-warning: var(--colors-yellow-800); --tag-icon-error: var(--colors-red-800); --tag-background-success: var(--colors-green-700); --tag-background-success-light: var(--colors-green-50); --tag-background-info: var(--colors-blue-600); --tag-background-info-light: var(--colors-blue-50); --tag-background-warning: var(--colors-yellow-700); --tag-background-warning-light: var(--colors-yellow-50); --tag-background-error: var(--colors-red-600); --tag-background-error-light: var(--colors-red-50); --tag-border-neutral: var(--colors-neutral-300); --tag-border-neutral-light: var(--colors-neutral-800); --tag-border-on-color: var(--colors-alpha-alpha-white-60); --tag-border-success: var(--colors-green-700); --tag-border-success-light: var(--colors-green-200); --tag-border-info: var(--colors-blue-700); --tag-border-info-light: var(--colors-blue-200); --tag-border-warning: var(--colors-red-700); --tag-border-warning-light: var(--colors-yellow-200); --tag-border-error: var(--colors-red-700); --tag-border-error-light: var(--colors-red-200); --tag-dot: var(--colors-alpha-alpha-white-60); --form-text-form-title: var(--text-default); --control-primary: var(--alpha-white-0); --table-cell-border: var(--colors-neutral-600); --table-cell-border-inverse: var(--border-black); --table-text-head: var(--colors-neutral-300); --table-text-body: var(--text-default); --table-background-disabled: var(--global-background-disabled); --table-background-hover-selected: var(--colors-neutral-900); --table-background-header: var(--colors-neutral-900); --table-background-row: var(--colors-neutral-900); --control-primary-checked: var(--colors-primary-sa-flag-600-primary); --control-primary-hovered: var(--colors-primary-sa-flag-300); --control-primary-pressed: var(--colors-primary-sa-flag-400); --control-primary-focused: var(--colors-primary-sa-flag-600-primary); --control-neutral-checked: var(--colors-neutral-600); --control-neutral-hovered: var(--colors-neutral-400); --control-neutral-pressed: var(--colors-neutral-400); --control-neutral-focused: var(--colors-neutral-600); --control-primary--readonly: var(--alpha-white-0); --control-pressed: var(--colors-neutral-600); --control-ripple-effect: var(--colors-neutral-900); --control-border: var(--colors-neutral-400); --table-background-row-selected-hovered: var(--colors-primary-sa-flag-50); --form-text-form-paragraph: var(--text-secondary-paragraph); --table-boarder-row-selected-hovered: var(--colors-neutral-100); --form-field-text-label: var(--text-default); --table-background-row-select: var(--colors-primary-sa-flag-50); --table-background-row-hovered: var(--colors-neutral-100); --table-background-row-alt: rgba(255, 255, 255, 1); --form-field-text-placeholder: var(--text-secondary-paragraph); --form-field-text-hovered: var(--text-default); --stepper-button-completed: var(--colors-green-600); --tooltip-background-light: var(--colors-neutral-800); --tooltip-text-heading-light: var(--text-display); --tooltip-text-paragraph-light: var(--text-primary-paragraph); --tooltip-background-dark: var(--colors-base-white); --tooltip-text-heading-dark: var(--colors-neutral-800); --tooltip-text-paragraph-dark: var(--colors-neutral-700); --alpha-white-0: var(--colors-alpha-alpha-black-10); --alpha-white-10: var(--colors-alpha-alpha-black-10); --alpha-white-20: var(--colors-alpha-alpha-black-20); --alpha-white-30: var(--colors-alpha-alpha-black-30); --alpha-white-40: var(--colors-alpha-alpha-black-40); --alpha-white-50: var(--colors-alpha-alpha-black-50); --alpha-white-60: var(--colors-alpha-alpha-black-60); --alpha-white-70: var(--colors-alpha-alpha-black-70); --alpha-white-80: var(--colors-alpha-alpha-black-80); --alpha-white-90: var(--colors-alpha-alpha-black-90); --alpha-white-100: var(--colors-alpha-alpha-black-100); --alpha-black-0: var(--colors-alpha-alpha-white-10); --alpha-black-10: var(--colors-alpha-alpha-white-10); --alpha-black-20: var(--colors-alpha-alpha-white-20); --alpha-black-30: var(--colors-alpha-alpha-white-30); --alpha-black-40: var(--colors-alpha-alpha-white-40); --alpha-black-50: var(--colors-alpha-alpha-white-50); --alpha-black-60: var(--colors-alpha-alpha-white-60); --alpha-black-70: var(--colors-alpha-alpha-white-70); --alpha-black-80: var(--colors-alpha-alpha-white-80); --alpha-black-90: var(--colors-alpha-alpha-white-90); --alpha-black-100: var(--colors-alpha-alpha-white-100); --global-background-disabled: var(--colors-neutral-700); --global-background-disabled-primary: var(--colors-primary-sa-flag-700); --global-background-inverse-disabled: var(--colors-neutral-700); --stepper-button-completed-hovered: var(--colors-primary-sa-flag-700); --stepper-button-current: var(--colors-green-600); --stepper-button-current-hovered: var(--colors-primary-sa-flag-700); --stepper-button-upcomming: var(--colors-neutral-600); --stepper-button-upcomming-hovered: var(--colors-neutral-600); --stepper-button-background: var(--colors-base-white); --stepper-text-primary: var(--text-default); --stepper-text-secondary: var(--text-primary-paragraph); --stepper-text-tertiary: var(--text-secondary-paragraph); --stepper-line-completed: var(--colors-primary-sa-flag-600-primary); --stepper-line-completed-hovered: var(--colors-primary-sa-flag-700); --stepper-line-current: var(--colors-neutral-700); --stepper-line-upcomming: var(--colors-neutral-700); --stepper-line-upcomming-hovered: var(--colors-neutral-700); --form-field-text-focused: var(--text-primary-paragraph); --form-field-text-pressed: var(--text-primary-paragraph); --form-field-text-filled: var(--text-default); --form-field-text-readonly: var(--text-default); --form-field-text-helper: var(--text-secondary-paragraph); --form-field-background-default: var(--colors-neutral-800); --form-field-background-lighter: var(--colors-neutral-600); --form-field-background-darker: var(--colors-neutral-800); --form-field-background-pressed: rgba(77, 87, 97, 1); --form-field-border-default: var(--colors-neutral-500); --form-field-border-hovered: var(--colors-neutral-200); --form-field-border-pressed: var(--colors-neutral-25); --form-field-border-error: var(--border-error); --form-option-background-hover: var(--colors-neutral-500); --form-option-background-pressed: var(--colors-neutral-700); --form-datecell-background-default: var( --colors-primary-sa-flag-600-primary ); --form-datecell-background-hovered: var(--colors-primary-sa-flag-700); --icon-default: var(--colors-base-white); --form-datecell-background-pressed: var(--colors-primary-sa-flag-900); --form-datecell-background-focused: var( --colors-primary-sa-flag-600-primary ); --form-datecell-today-background-default: var(--alpha-white-0); --form-datecell-today-background-hovered: var(--colors-neutral-700); --form-datecell-today-background-pressed: var(--colors-neutral-600); --icon-default-500: var(--colors-neutral-200); --form-datecell-today-background-focused: var(--alpha-white-0); --form-datecell-background-disabled: rgba(255, 255, 255, 1); --form-datecell-background-600: var(--colors-primary-sa-flag-600-primary); --form-datecell-background-300: var(--colors-primary-sa-flag-300); --form-datecell-background-200: var(--colors-primary-sa-flag-400); --form-datecell-background-100: var(--colors-primary-sa-flag-300); --control-icon-hovered: var(--colors-primary-sa-flag-800); --alpha-primary-10: rgba(22, 106, 69, 0.10000000149011612); --icon-default-400: var(--colors-neutral-500); --icon-primary: var(--colors-primary-sa-flag-400); --alpha-primary-20: rgba(22, 106, 69, 0.20000000298023224); --icon-primary-light: var(--colors-primary-sa-flag-50); --alpha-warning-10: rgba(181, 71, 8, 0.10000000149011612); --icon-primary-400: var(--colors-primary-sa-flag-200); --alpha-warning-20: rgba(181, 71, 8, 0.20000000298023224); --alpha-error-10: rgba(180, 35, 24, 0.10000000149011612); --alpha-error-20: rgba(180, 35, 24, 0.20000000298023224); --alpha-info-10: rgba(23, 92, 211, 0.10000000149011612); --alpha-info-20: rgba(23, 92, 211, 0.20000000298023224); --alpha-success-10: rgba(6, 118, 71, 0.10000000149011612); --alpha-success-20: rgba(6, 118, 71, 0.20000000298023224); --icon-neutral: var(--colors-neutral-400); --icon-neutral-light: var(--colors-neutral-950); --icon-secondary: var(--colors-secondary-gold-400); --icon-secondary-light: var(--colors-secondary-gold-50); --icon-tertiary: var(--colors-tertiary-lavendar-400); --icon-tertiary-light: var(--colors-tertiary-lavendar-50); --icon-success: var(--colors-green-400); --icon-success-light: var(--colors-green-50); --icon-info: var(--colors-blue-400); --icon-info-light: var(--colors-blue-50); --icon-warning: var(--colors-yellow-400); --icon-warning-light: var(--colors-yellow-50); --icon-error: var(--colors-red-400); --icon-error-light: var(--colors-red-50); --global-icon-default-disabled: var(--colors-base-white); --background-warning-light: var(--alpha-warning-10); --background-error-light: var(--alpha-error-10); --global-icon-default-oncolor-disabled: var(--colors-base-white); --background-brand-light: var(--alpha-primary-10); --global-control-disabled: var(--colors-alpha-alpha-white-30); --background-info-light: var(--alpha-info-10); --background-success-light: var(--alpha-success-10); --control-icon-pressed: var(--colors-primary-sa-flag-800); --control-icon-disabled: var(--colors-neutral-400); --form-textarea-scrollbar-bar: var(--colors-neutral-600); --control-boarder-disabled: var(--alpha-black-30); --control-disabled: var(--colors-neutral-300); --border-disabled: var(--colors-neutral-500); --unselected-tab-icon: var(--colors-neutral-100); } .btn-default { color: var(--text-oncolor-primary); } .btn-light { background-color: var(--button-background-oncolor-default); border-color: var(--border-background-neutral); color: var(--text-default); } } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans/IBMPlexSans-Regular.woff2") format("woff2"), url("../fonts/IBMPlexSans/IBMPlexSans-Regular.woff") format("woff"), url("../fonts/IBMPlexSans/IBMPlexSans-Regular.eot"); font-weight: 400; font-style: normal; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans/IBMPlexSans-Medium.woff2") format("woff2"), url("../fonts/IBMPlexSans/IBMPlexSans-Medium.woff") format("woff"), url("../fonts/IBMPlexSans/IBMPlexSans-Medium.eot"); font-weight: 500; font-style: normal; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans/IBMPlexSans-Bold.woff2") format("woff2"), url("../fonts/IBMPlexSans/IBMPlexSans-Bold.woff") format("woff"), url("../fonts/IBMPlexSans/IBMPlexSans-Bold.eot"); font-weight: 700; font-style: normal; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSans/IBMPlexSansArabic-Regular.woff2") format("woff2"), url("../fonts/IBMPlexSans/IBMPlexSansArabic-Regular.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSans/IBMPlexSansArabic-Thin.woff2") format("woff2"), url("../fonts/IBMPlexSans/IBMPlexSansArabic-Thin.woff") format("woff"); font-weight: 100; font-style: normal; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSans/IBMPlexSansArabic-ExtraLight.woff2") format("woff2"), url("../fonts/IBMPlexSans/IBMPlexSansArabic-ExtraLight.woff") format("woff"); font-weight: 200; font-style: normal; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSans/IBMPlexSansArabic-Light.woff2") format("woff2"), url("../fonts/IBMPlexSans/IBMPlexSansArabic-Light.woff") format("woff"); font-weight: 300; font-style: normal; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSans/IBMPlexSansArabic-Medium.woff2") format("woff2"), url("../fonts/IBMPlexSans/IBMPlexSansArabic-Medium.woff") format("woff"); font-weight: 500; font-style: normal; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSans/IBMPlexSansArabic-SemiBold.woff2") format("woff2"), url("../fonts/IBMPlexSans/IBMPlexSansArabic-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSans/IBMPlexSansArabic-Bold.woff2") format("woff2"), url("../fonts/IBMPlexSans/IBMPlexSansArabic-Bold.woff") format("woff"); font-weight: 700; font-style: normal; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSans/IBMPlexSansArabic-ExtraBold.woff2") format("woff2"), url("../fonts/IBMPlexSans/IBMPlexSansArabic-ExtraBold.woff") format("woff"); font-weight: 800; font-style: normal; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSans/IBMPlexSansArabic-Black.woff2") format("woff2"), url("../fonts/IBMPlexSans/IBMPlexSansArabic-Black.woff") format("woff"); font-weight: 900; font-style: normal; } @font-face { font-family: "zatca_font_bold"; src: url("../fonts/IBMPlexSans/IBMPlexSansArabic-Medium.woff2") format("woff2"), url("../fonts/IBMPlexSans/IBMPlexSansArabic-Medium.woff") format("woff"); font-weight: normal; font-style: normal; } .btn.btn-primary:disabled, .btn.btn-secondry:disabled, .btn.btn-primary[disabled], .btn.btn-secondry[disabled], input[type="button"][disabled], input[type="reset"][disabled], input[type="submit"][disabled], button[disabled][disabled] { cursor: not-allowed; color: #9da4ae !important; background-color: #e5e7eb !important; border-color: #e5e7eb !important; } :not(.btn-check) + .btn:visited { color: var(--bs-btn-active-color); } .cancel-btn { background-color: rgba(0, 0, 0, 0) !important; color: var(--colors-red-700) !important; border: 1px solid var(--colors-red-200) !important; padding: 0 var(--spacing-3); font-size: var(--text-base); font-weight: 500; border-radius: var(--radius-sm); transition: all 0.15s ease; } .cancel-btn:hover { background-color: #fee4e2 !important; color: var(--colors-red-700) !important; border-color: var(--colors-red-200) !important; } .cancel-btn:focus { box-shadow: 0 0 0 3px var(--colors-red-100); } .btn, .btn-close { font-size: var(--text-xl--regular); font-weight: 500; } .btn:not(.w-100), .btn-close:not(.w-100) { width: -moz-fit-content !important; width: fit-content !important; } .btn:focus-visible, .btn-close:focus-visible { border: 1px solid var(--oncolor-primary) !important; box-shadow: none !important; outline: 2px solid var(--neutral-primary) !important; } a:focus-visible { box-shadow: none !important; outline: 2px solid var(--neutral-primary) !important; } .rocket-mind-and-chat img { mix-blend-mode: darken; } .zp-fle-input.zp-file-input:focus-visible ~ .zp-fle-select span { border: 1px solid var(--oncolor-primary) !important; box-shadow: none !important; outline: 2px solid var(--neutral-primary) !important; } .card { --bs-card-border-radius: 16px; min-height: 100%; display: flex; flex-direction: column; } .card-header { flex-shrink: 0; } .card-header .icon-container { width: 40px; height: 40px; background-color: var(--colors-primary-sa-flag-50); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--colors-green-700); } .card-header { flex-shrink: 0; } .card-header .icon-container { width: 40px; height: 40px; background-color: var(--colors-primary-sa-flag-50); border-radius: 50%; display: flex; justify-content: center; align-items: center; } .card-header .icon-container img { max-width: 100%; max-height: 100%; padding: 10px; filter: grayscale(100%) sepia(100%) hue-rotate(114deg) contrast(2); } .card-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 0.5rem; } .card-body .card-category { width: -moz-fit-content; width: fit-content; margin-top: auto; padding: 0.125rem 0.5rem; background-color: var(--colors-neutral-50); border: 1px solid var(--colors-neutral-200); border-radius: var(--radius-md); } .card-img { min-height: 150px; max-height: 250px; -o-object-fit: cover; object-fit: cover; margin-bottom: var(--spacing-4); } .card .btn { display: flex; align-items: center; } .ms-core-overlay { background-color: rgba(0, 0, 0, 0); } .ms-core-pageTitle, .ms-core-listMenu-root, .ms-core-listMenu-item, .ms-core-navigation { font-family: inherit; } #s4-bodyContainer { padding: 0; width: 100% !important; } #contentBox { margin: 0; min-width: auto; } .ms-core-listMenu-horizontalBox { display: none; } input[type="button"], input[type="reset"], input[type="submit"], button { min-width: inherit; padding: inherit; border: inherit; margin-right: inherit; font-family: inherit; font-size: inherit; } input[type="button"].btn.btn-primary, input[type="reset"].btn.btn-primary, input[type="submit"].btn.btn-primary, button.btn.btn-primary { background-color: var(--colors-primary-sa-flag-600-primary); border: 1px solid var(--colors-primary-sa-flag-600-primary); color: var(--colors-base-white); padding: var(--spacing-2) var(--spacing-4); } input[type="button"].btn.btn-primary:hover, input[type="reset"].btn.btn-primary:hover, input[type="submit"].btn.btn-primary:hover, button.btn.btn-primary:hover { background-color: var(--colors-primary-sa-flag-700); border: 1px solid var(--colors-primary-sa-flag-700); color: var(--colors-base-white); } input[type="button"].btn.btn-outline-primary, input[type="reset"].btn.btn-outline-primary, input[type="submit"].btn.btn-outline-primary, button.btn.btn-outline-primary { background-color: var(--colors-base-white); border: 1px solid var(--colors-primary-sa-flag-600-primary); color: var(--colors-primary-sa-flag-600-primary); } input[type="button"].btn.btn-outline-primary:hover, input[type="reset"].btn.btn-outline-primary:hover, input[type="submit"].btn.btn-outline-primary:hover, button.btn.btn-outline-primary:hover { background-color: var(--colors-primary-sa-flag-50); border: 1px solid var(--colors-primary-sa-flag-50); color: var(--colors-primary-sa-flag-600-primary); } img[src*="spcommon"] { max-width: inherit !important; } div#s4-workspace { overflow-x: hidden; } #s4-bodyContainer { padding-bottom: 0px; } #RibbonCont { display: none !important; } a:visited { color: inherit; } .settingsContainer { width: 30px; padding-top: 10px; } .ms-srch-sb-border, .ms-core-header .ms-srch-sb-borderFocused { height: 32px; background: #fff; } .ms-srch-sb > input { display: inline-block; border-style: none; outline-style: none; height: 30px; margin: 0px 5px 0px 0px; padding: 2px; width: 220px; background-color: #fff; } .ms-srch-sb > .ms-srch-sb-searchLink { margin-top: 4px; margin-left: 4px; } .ms-siteactions-root > span > a.ms-core-menu-root { width: 30px; } h1, h2, h3, h4, h5, h6, .ms-h1, .ms-h2, .ms-h3, .ms-h4, .ms-h5, .ms-h6, .ms-headerFont { font-family: inherit; color: inherit; margin: 0; } #ctl00_PlaceHolderMain_ctl01__ControlWrapper_RichHtmlField { height: auto !important; } .ms-webpart-zone { display: block; margin: 0; } .ms-dlgOverlay { background-color: rgba(0, 0, 0, 0.4); } .ms-dlgContent { border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-lg); } .ms-listviewtable { border: none; margin: 0; } .ms-listviewtable th, .ms-listviewtable td { padding: var(--spacing-2); border: 1px solid var(--colors-base-200); } .ms-srch-sb { border: 1px solid var(--colors-base-200); border-radius: var(--border-radius-sm); } .ms-srch-sb:focus-within { border-color: var(--colors-primary-sa-flag-600-primary); } .ms-status-msg { background-color: var(--colors-base-50); border: 1px solid var(--colors-base-200); border-radius: var(--border-radius-sm); padding: var(--spacing-2); } .page_utilities { position: absolute; inset-block-start: -5px; inset-inline-end: 15px; } .form-group { position: relative; } .form-label span { color: #b42318; font-weight: bold; } .form-control { --line-c1: var(--colors-neutral-700); --line-c2: var(--colors-neutral-100); background: linear-gradient(var(--line-c1), var(--line-c1)), linear-gradient(white, white); background-repeat: no-repeat; background-position: bottom center; background-size: 0 2px, auto; height: 40px; border: var(--bs-border-width) solid var(--colors-neutral-300); } .form-control:hover { border-color: var(--colors-neutral-400); } .form-control:focus { --line-c2: #fff; background-size: 100% 2px, auto; } .form-control.invalid { --line-c1: var(--colors-red-700); border-color: var(--colors-red-700); } .form-control.invalid:focus { border-color: var(--colors-red-700); } .form-control:disabled { background-image: unset !important; } .form-control:disabled:hover { border-color: rgba(0, 0, 0, 0); } .form-error { --invalid-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23b42318'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23b42318' stroke='none'/%3e%3c/svg%3e"); background-image: var(--invalid-icon); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); padding-inline-start: calc(1.5em + 0.75rem); color: #b42318; } .form-error:dir(ltr) { background-position: left calc(0.375em + 0.1875rem) center; } textarea.form-control { height: auto; max-height: 100px; overflow-y: scroll; } input[type="file"] { position: absolute; width: 100%; height: 100%; visibility: hidden; } .sa-uploader { position: relative; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } .sa-uploader-multi .multi { position: relative; display: flex; flex-direction: column; gap: 1rem; cursor: pointer; text-align: center; align-items: center; border: 2px dashed var(--colors-neutral-300); border-radius: var(--spacing-1); padding: 1rem; } div.file-name { padding: 0.375rem var(--spacing-3); height: 40px; width: 100%; border-radius: var(--spacing-1); background-color: var(--colors-neutral-100); border: 1px solid var(--colors-neutral-300); } .form-select { appearance: auto; -webkit-appearance: auto; -moz-appearance: auto; position: relative; padding: 8px; padding-inline-end: 1rem; --line-c1: var(--colors-neutral-700); --line-c2: var(--colors-neutral-100); background: linear-gradient(var(--line-c1), var(--line-c1)), linear-gradient(white, white); background-repeat: no-repeat; background-position: bottom center; background-size: 0 2px, auto; height: 40px; transition: all 0.2s ease-out; border: var(--bs-border-width) solid #9da4ae; } .form-select:hover { border-color: var(--colors-neutral-400); } .form-select:focus:not(:focus-visible) { --line-c2: #fff; background-size: 100% 2px, auto; box-shadow: var(--shadow-md); } .form-select.invalid { --line-c1: var(--colors-red-700); border-color: var(--colors-red-700); } .form-select.invalid:focus { border-color: var(--colors-red-700); } .form-select:disabled { background-image: unset !important; } .select2-container--focus .select2-selection { box-shadow: inset 0 -2px 0 var(--colors-neutral-700); } .input-group { overflow: hidden; border-radius: var(--radius-4); border: 1px solid rgba(0, 0, 0, 0); padding: var(--spacing-1_5) var(--spacing-3); align-items: center; gap: var(--spacing-3); --line-c1: var(--colors-neutral-700); --line-c2: var(--colors-neutral-100); background: linear-gradient(var(--line-c1), var(--line-c1)), linear-gradient(white, white); background-repeat: no-repeat; background-position: bottom center; background-size: 0 2px, auto; height: 40px; transition: all 0.2s ease-out; border: var(--bs-border-width) solid #9da4ae; } .input-group * { border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: rgba(0, 0, 0, 0); text-align: start; height: auto; } .input-group > :not(input.form-control) { flex: unset; width: auto; } .input-group *[class^="form"] { box-shadow: none !important; background: rgba(0, 0, 0, 0); } .input-group.has-error { border-color: #b42318 !important; } .input-group:hover { border-color: #384250; } .input-group.focused { --line-c2: #fff; background-size: 100% 2px, auto; box-shadow: var(--shadow-md); border-color: var(--colors-neutral-400); } .input-group .form-control:focus-visible { --line-c2: #fff; background-size: 100% 2px, auto; box-shadow: var(--shadow-md); box-shadow: var(--shadow-md); border-color: var(--colors-neutral-400); } .dropdown { cursor: pointer; } .dropdown-toggle { color: var(--bs-dropdown-link-color); display: block; padding: var(--spacing-1_5) var(--spacing-3); text-align: start; border: 1px solid rgba(0, 0, 0, 0); border-radius: var(--radius-4); --line-c1: var(--colors-neutral-700); --line-c2: var(--colors-neutral-100); background: linear-gradient(var(--line-c1), var(--line-c1)), linear-gradient(white, white); background-repeat: no-repeat; background-position: bottom center; background-size: 0 2px, auto; height: 40px; transition: all 0.2s ease-out; border: var(--bs-border-width) solid #9da4ae; } .dropdown-toggle::after { content: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6.60372 8.55529C6.7256 8.71666 7.08951 9.1984 7.30624 9.47611C7.74031 10.0323 8.33342 10.7714 8.97323 11.5083C9.61627 12.2489 10.2918 12.9702 10.8919 13.5005C11.1928 13.7663 11.4571 13.9684 11.6753 14.0999C11.8804 14.2235 12.0016 14.2493 12.0016 14.2493C12.0016 14.2493 12.1192 14.2235 12.3244 14.0999C12.5425 13.9684 12.8068 13.7663 13.1078 13.5005C13.7079 12.9702 14.3834 12.2489 15.0264 11.5083C15.6662 10.7714 16.2593 10.0323 16.6934 9.47608C16.9101 9.19837 17.2735 8.7173 17.3954 8.55593C17.6411 8.22241 18.1111 8.15047 18.4446 8.3961C18.7781 8.64173 18.8494 9.11123 18.6037 9.44476L18.6018 9.4473C18.474 9.61655 18.0971 10.1156 17.8759 10.3989C17.4321 10.9677 16.8216 11.7286 16.1591 12.4917C15.4997 13.2511 14.7741 14.0298 14.101 14.6245C13.7653 14.9212 13.425 15.1879 13.0988 15.3845C12.7932 15.5687 12.4063 15.75 11.9998 15.75C11.5933 15.75 11.2064 15.5687 10.9008 15.3845C10.5747 15.1879 10.2344 14.9212 9.89869 14.6245C9.22557 14.0298 8.4999 13.2511 7.84058 12.4917C7.17803 11.7286 6.5676 10.9677 6.12372 10.399C5.90243 10.1154 5.52551 9.61637 5.39793 9.44747L5.39628 9.44528C5.15064 9.11176 5.22154 8.64179 5.55506 8.39615C5.88857 8.15053 6.35808 8.22179 6.60372 8.55529Z' fill='currentColor'/%3e%3c/svg%3e"); width: 20px; height: 20px; display: inline-block; inset-inline-end: var(--spacing-3); position: absolute; margin-left: unset; vertical-align: unset; border: unset; transition: transform 0.2s ease-in-out; } .dropdown-toggle:hover { border-color: #384250 !important; } .dropdown-toggle:focus, .dropdown-toggle.show { --line-c2: #fff; background-size: 100% 2px, auto; box-shadow: var(--shadow-md); border-color: var(--colors-neutral-400) !important; } .dropdown-toggle.show::after { transform: scaleY(-1); } .dropdown-menu { text-align: start; box-shadow: var(--shadow-md); z-index: 9999; padding: 0.5rem; margin-top: 0.5rem !important; border-color: #d2d6db; } .dropdown-menu li:last-of-type a { margin-bottom: 0; } .dropdown-menu .dropdown-item { padding: var(--Global-spacing-md, 0.5rem); align-items: center; font-size: 0.875rem; font-weight: 400; line-height: 1.25rem; padding-inline-end: 1.5rem; border-radius: var(--Radius-radius-sm, 0.25rem); color: #161616; } @media (max-width: 992px) { .dropdown-menu .dropdown-item { white-space: normal; } } .dropdown-menu .dropdown-item:hover { background: var(--Form-option-background-hover, #f3f4f6); color: var(--Text-text-default, #161616); } .dropdown-menu .dropdown-item.active { background: rgba(0, 0, 0, 0); position: relative; padding-inline-end: 2.5rem; color: var(--Text-text-default, #161616); } .dropdown-menu .dropdown-item.active::after { content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3e%3cpath d='M16.9166 5.5L7.74992 14.6667L3.58325 10.5' stroke='%23161616' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"); position: absolute; top: 50%; inset-inline-end: 0.75rem; transform: translateY(-50%); width: 21px; height: 21px; pointer-events: none; } .dropdown-header { color: var(--neutral-primary); font-size: 14px; font-weight: bold; } .tel-element .input-group { padding: 0; } .tel-element input { padding: 0 !important; text-align: start; direction: ltr; } .tel-element .input-group-text { height: 100%; background: var(--colors-neutral-100) !important; padding: var(--spacing-0_5) var(--spacing-4) !important; color: var(--colors-neutral-500) !important; border: none !important; border-radius: 0 !important; font-weight: 400; white-space: nowrap; border-inline-end: 1px solid var(--colors-neutral-200) !important; } .tel-element .country-code-select { flex: 0 0 auto; width: auto; min-width: 90px; height: 100%; background-color: var(--colors-neutral-100) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23697586' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-size: 12px 12px !important; background-position: left 0.75rem center !important; padding: var(--spacing-2) var(--spacing-4) !important; padding-left: 2rem !important; color: var(--colors-neutral-700) !important; border: none !important; border-radius: 0 !important; font-weight: 400; font-size: 14px; white-space: nowrap; border-inline-end: 1px solid var(--colors-neutral-200) !important; cursor: pointer; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; } .tel-element .country-code-select:focus { box-shadow: none !important; outline: none !important; } [dir="rtl"] .tel-element .input-group { flex-direction: row-reverse; } [dir="rtl"] .tel-element .input-group .form-control { padding: 0.5rem !important; } [dir="rtl"] .tel-element .input-group .form-control:hover { background: rgba(0, 0, 0, 0); } [dir="rtl"] .tel-element .country-code-select { background-position: left 0.75rem center; padding-left: 2rem !important; padding-right: var(--spacing-4) !important; } .top-header { background-color: var(--colors-neutral-100); border-bottom: 1px solid var(--colors-neutral-300); color: #fff; transition: transform 0.3s ease-in-out; } .top-header .top-header-layout { display: flex; align-items: flex-start; justify-content: space-between; } @media (max-width: 992px) { .top-header .top-header-layout { flex-direction: column; } } .top-header .top-header-tools-container { display: flex; align-items: center; gap: 6px; } @media (max-width: 992px) { .top-header .top-header-tools-container { margin-inline-start: auto; } } .top-header .contact-us span { color: var(--colors-neutral-700); font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.5rem; } .top-header .lang-switch { position: relative; padding-inline-end: 1rem; } .top-header .lang-switch::before { content: ""; position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 1.25rem; background-color: #d2d6db; } .top-header .lang-switch span { color: var(--colors-neutral-700); font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.5rem; } .top-header .date-display { font-size: var(--text-md--regular); display: flex; flex-direction: row; justify-content: center; align-items: center; gap: var(--spacing-2); color: #fff; } @media (max-width: 576px) { .top-header .date-display { font-size: var(--text-sm--regular); } } .top-header .date-display i { font-size: var(--text-lg--regular); color: inherit; } .top-header .top-header-tools { display: flex; justify-content: flex-end; align-items: center; gap: 0.375rem; } .top-header .top-header-tools .top-header-tool { background-color: rgba(0, 0, 0, 0); padding: 0; border: 0; } .top-header .top-header-tools .top-header-tool:hover { background-color: #f3f4f6; border-radius: 4px; color: #161616; } .top-header .accessibility-toggle-container { position: relative; } .top-header .accessibility-toggle-container #accessibilityToggle:focus-visible { outline: 2px solid #161616; border-radius: 4px; box-shadow: none; } .top-header .accessibility-toggle-container .accessibility-arrow { transition: transform 0.3s ease; } .top-header .accessibility-toggle-container #accessibilityPanel { z-index: 9999; min-width: 10rem; max-width: 10rem; width: 10rem; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; inset-inline-end: 0; inset-inline-start: auto; } .top-header .accessibility-toggle-container #accessibilityPanel .accessibility-panel { width: 10rem; transform: translateY(-0.625rem); transition: transform 0.3s ease-in-out; padding: 0; border-radius: var(--Radius-radius-md, 0.5rem); border: 1px solid #d2d6db; background: #fff; } .top-header .accessibility-toggle-container #accessibilityPanel .accessibility-section { border-bottom: 1px solid #d2d6db; padding-bottom: 0.5rem; } .top-header .accessibility-toggle-container #accessibilityPanel .accessibility-section:last-child { border-bottom: none; } .top-header .accessibility-toggle-container #accessibilityPanel .accessibility-section h6 { white-space: nowrap; color: var(--Text-text-display, #1f2a37); text-align: center; font-size: 0.75rem; font-weight: 700; line-height: 1.125rem; padding: var(--Button-button-menu-v-padding, 0.5rem) var(--Button-button-menu-h-padding, 0.5rem); } .top-header .accessibility-toggle-container #accessibilityPanel .accessibility-section .d-flex { gap: 0 !important; } .top-header .px-sm-2 { padding-inline: var(--spacing-4) !important; } .beta-version { display: flex; align-items: center; justify-content: center; border-radius: var(--Radius-radius-sm, 0.25rem); border: 1px solid var(--Border-border-success, #067647); color: var(--Text-text-primary, #1b8354); font-size: 0.75rem; font-weight: 400; line-height: normal; width: 5rem; padding: 0.125rem; justify-content: center; align-items: center; cursor: auto !important; } @media (max-width: 576px) { .beta-version { display: none; } } .beta-version-mobile { display: none; } @media (max-width: 576px) { .beta-version-mobile { display: flex; margin: 0 1rem; } } .digital-stamp-card { padding: 0.5rem 2rem; background: #f3f4f6; } @media (max-width: 992px) { .digital-stamp-card { order: 2; padding-inline: 0; } } .digital-stamp-card .digital-stamp-header { display: flex; align-items: center; gap: 0.5rem; } .digital-stamp-card .digital-stamp-header .digital-stamp-header-info { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 992px) { .digital-stamp-card .digital-stamp-header .digital-stamp-header-info { flex-wrap: nowrap; } .digital-stamp-card .digital-stamp-header .digital-stamp-header-info svg { flex-shrink: 0; } } .digital-stamp-card .digital-stamp-header h6 { margin: 0px; color: #161616; font-size: 0.875rem; line-height: 1.25rem; } .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card { cursor: pointer; } .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card:hover { color: #54c08a !important; text-decoration-line: underline; text-decoration-style: solid; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card:hover span, .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card:hover svg { color: #54c08a !important; } .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card span { color: #1b8354; font-size: 0.875rem; line-height: 1.25rem; } .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card svg, .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card img { transition: 0.3s; } .digital-stamp-card .digital-stamp-header.open .btn-digital-stamp-card svg, .digital-stamp-card .digital-stamp-header.open .btn-digital-stamp-card img { transform: rotate(180deg); } .btn-digital-stamp-card img { margin-right: 4px; margin-left: 4px; } .digital-stamp-card .digital-stamp-body { padding-top: 2.5rem; padding-bottom: 2rem; display: none; } .digital-stamp-card .digital-stamp-body .digital-stamp-container { margin-bottom: 2.5rem; display: flex; gap: 1rem; } .digital-stamp-card .digital-stamp-body .digital-stamp-container .box { display: flex; align-items: flex-start; gap: 1.5rem; } @media (max-width: 992px) { .digital-stamp-card .digital-stamp-body .digital-stamp-container .box { gap: 0.75rem; } } .digital-stamp-card .digital-stamp-body .digital-stamp-container .box .img-border-rounded { padding: 14px 16px; display: flex; align-items: center; justify-content: center; border: 1px solid #067647; border-radius: 100%; } .digital-stamp-card .digital-stamp-body .digital-stamp-container .box h6 { margin-top: 0px; margin-bottom: 0.75rem; color: #161616; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; } .digital-stamp-card .digital-stamp-body .digital-stamp-container .box .green-text { color: #1b8354; } .digital-stamp-card .digital-stamp-body .digital-stamp-container .box p { margin: 0px; color: #384250; font-size: 1rem; line-height: 1.5rem; } .digital-stamp-card .digital-stamp-body .stamp-link-box { display: flex; padding: var(--Global-spacing-md, 0.5rem) var(--Global-spacing-3xl, 1.5rem); align-items: center; align-content: flex-start; gap: 1.125rem; flex-wrap: wrap; background-color: #fff; border-radius: 0.5rem; } .digital-stamp-card .digital-stamp-body .stamp-link-box p { margin: 0px; color: #161616; font-size: 1rem; line-height: 1.5rem; } .digital-stamp-card .digital-stamp-body .stamp-link-box a { color: #1b8354; font-size: 1rem; line-height: 1.5rem; text-decoration-line: underline; text-decoration-style: solid; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .digital-stamp-card .digital-stamp-body .stamp-link-box a:hover { color: #54c08a; } .stamp-ar { direction: rtl; } .stamp-en { direction: ltr; } @media (max-width: 768px) { .digital-stamp-card .digital-stamp-header { flex-wrap: wrap; } .digital-stamp-card .digital-stamp-body .digital-stamp-container { flex-direction: column; } .digital-stamp-card .img-border-rounded { padding: 0.5rem !important; } .digital-stamp-card .img-border-rounded svg { width: 1rem !important; height: 1rem !important; } } .accessibility-panel .top-header-tool img { width: 2.5rem; height: 2.5rem; } .accessibility-panel .top-header-tool button:hover { border-radius: 4px; } .header-wrapper { position: sticky; top: 0; inset-inline-start: 0; inset-inline-end: 0; z-index: 1050; } .header { border-bottom: 1px solid #d2d6db; background-color: var(--colors-base-white); position: relative; z-index: 1000; transition: transform 0.3s ease-in-out; } @media (max-width: 992px) { .header { position: static; } } .header.sticky { position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0; background-color: var(--colors-base-white); box-shadow: var(--header-shadow); animation: slideDown 0.3s ease-in-out; } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } .header .navbar { padding: 0; } .header .navbar .navbar-brand { padding: 0; } .header .navbar .navbar-brand img { height: 50px; width: auto; } @media (max-width: 768px) { .header .navbar .navbar-brand img { height: 40px; } } @media (max-width: 576px) { .header .navbar .navbar-brand img { height: 35px; } } .header .navbar .navbar-toggler { border: none; } .header .navbar .navbar-toggler:focus { box-shadow: none; } .header .navbar .navbar-toggler .navbar-toggler-icon { background-image: none; position: relative; display: inline-block; width: 24px; height: 24px; vertical-align: middle; } .header .navbar .navbar-toggler .navbar-toggler-icon::before, .header .navbar .navbar-toggler .navbar-toggler-icon::after, .header .navbar .navbar-toggler .navbar-toggler-icon > span { content: ""; position: absolute; inset-inline-start: 0; width: 24px; height: 2px; background-color: var(--neutral-primary); transition: all 0.3s ease; } .header .navbar .navbar-toggler .navbar-toggler-icon::before { top: 5px; } .header .navbar .navbar-toggler .navbar-toggler-icon > span { top: 50%; transform: translateY(-50%); } .header .navbar .navbar-toggler .navbar-toggler-icon::after { bottom: 5px; } .header .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before { top: 50%; transform: translateY(-50%) rotate(45deg); } .header .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon > span { opacity: 0; } .header .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after { bottom: 50%; transform: translateY(50%) rotate(-45deg); } .header .navbar-nav { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin: 0; } @media (max-width: 992px) { .header .navbar-nav { margin: 0; } } .header .navbar-nav .nav-item { margin: 0; position: static; } @media (max-width: 992px) { .header .navbar-nav .nav-item { margin: 0; width: 100%; } .header .navbar-nav .nav-item:last-child { border-bottom: none; } } .header .navbar-nav .nav-item .nav-link { padding: var(--spacing-6) var(--spacing-2); color: var(--bs-dark); font-weight: 500; transition: color 0.3s ease, background-color 0.3s ease; border-radius: var(--radius-lg); position: relative; } @media (max-width: 992px) { .header .navbar-nav .nav-item .nav-link { padding: var(--spacing-3); margin: var(--spacing-1) 0; } .header .navbar-nav .nav-item .nav-link:focus-visible { box-shadow: none; outline: none !important; } } .header .navbar-nav .nav-item .nav-link:hover::before { background-color: var(--colors-neutral-300); } @media (max-width: 992px) { .header .navbar-nav .nav-item .nav-link:hover { background-color: rgba(0, 0, 0, 0); } .header .navbar-nav .nav-item .nav-link:hover::before { background-color: rgba(0, 0, 0, 0); } } .header .navbar-nav .nav-item .nav-link.show::before { background-color: var(--colors-primary-sa-flag-400); } @media (max-width: 992px) { .header .navbar-nav .nav-item .nav-link.show::before { display: none; } } .header .navbar-nav .nav-item.dropdown { position: static; } @media (max-width: 992px) { .header .navbar-nav .nav-item.dropdown { position: relative; } } .header .navbar-nav .nav-item.dropdown .nav-link { display: flex; align-items: center; gap: 0.25rem; } .header .navbar-nav .nav-item.dropdown .nav-link .dropdown-arrow { width: 16px; height: 16px; padding: 4px; box-sizing: content-box; border-radius: 50%; cursor: pointer; transition: transform 0.3s ease, background-color 0.2s ease; } .header .navbar-nav .nav-item.dropdown .nav-link .dropdown-arrow:hover { background-color: var(--colors-neutral-100, #f3f4f6); } @media (max-width: 992px) { .header .navbar-nav .nav-item.dropdown .nav-link .dropdown-arrow { display: block; } } .header .navbar-nav .nav-item.dropdown .nav-link i { font-size: var(--text-sm--regular); font-weight: bolder; } @media (max-width: 992px) { .header .navbar-nav .nav-item.dropdown .nav-link i { display: none !important; } } @media (max-width: 992px) { .header .navbar-nav .nav-item.dropdown .nav-link { width: 100%; justify-content: space-between; padding: 12px 16px; margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; color: #161616; border-radius: 4px; gap: 8px; } .header .navbar-nav .nav-item.dropdown .nav-link.show .dropdown-arrow { transform: rotate(180deg); } } .header .navbar-nav .nav-item.dropdown .toggle-dropdown { position: absolute; inset-inline-end: var(--spacing-3); top: var(--spacing-3); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--radius-full); transition: background-color 0.3s ease; z-index: 1; } .header .navbar-nav .nav-item.dropdown .toggle-dropdown i { transition: transform 0.3s ease; font-size: 1rem; } .header .navbar-nav .nav-item.dropdown .toggle-dropdown i.rotate { transform: rotate(180deg); } .header .navbar-nav .nav-item.dropdown .toggle-dropdown:hover { background-color: var(--colors-neutral-100); } @media (min-width: 992px) { .header .navbar-nav .nav-item.dropdown .toggle-dropdown { display: none; } } @media (min-width: 992px) { .header .navbar-nav .nav-item.dropdown .sub-menu-wrapper-main { display: none; position: absolute; inset-inline-start: 0; inset-inline-end: 0; width: 100%; z-index: 1000; } } @media (max-width: 992px) { .header .navbar-nav .nav-item.dropdown .sub-menu-wrapper-main { position: static; } } @media (min-width: 992px) { .header .navbar-nav .nav-item.dropdown:hover > .sub-menu-wrapper-main, .header .navbar-nav .nav-item.dropdown.show > .sub-menu-wrapper-main { display: block; } .header .navbar-nav .nav-item.dropdown:hover .sub-menu-wrapper-main .dropdown-menu, .header .navbar-nav .nav-item.dropdown.show .sub-menu-wrapper-main .dropdown-menu { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin-top: 0; } .header .navbar-nav .nav-item.dropdown:hover .dropdown-menu-container, .header .navbar-nav .nav-item.dropdown.show .dropdown-menu-container { display: flex; flex-wrap: wrap; list-style: none; } } .header .navbar-nav .nav-item.dropdown .dropdown-menu { position: absolute; inset-inline-start: 0; inset-inline-end: 0; width: 100%; margin-top: 0; padding: 1.5rem; border: none; animation: fadeIn 0.3s ease; padding-inline-start: 255px !important; } @media (max-width: 992px) { .header .navbar-nav .nav-item.dropdown .dropdown-menu { padding-inline-start: 0 !important; } } .header .navbar-nav .nav-item.dropdown .dropdown-menu { margin-top: 0 !important; } .header .navbar-nav .nav-item.dropdown .dropdown-menu ul { display: block; width: 100%; padding: 0 !important; } @media (min-width: 992px) { .header .navbar-nav .nav-item.dropdown .dropdown-menu ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(19.75rem, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(8, 1fr); } } @media (max-width: 992px) { .header .navbar-nav .nav-item.dropdown .dropdown-menu { position: static; box-shadow: none; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out; display: block; opacity: 0; } .header .navbar-nav .nav-item.dropdown .dropdown-menu .mega-title { padding: 0 1rem; display: none; } .header .navbar-nav .nav-item.dropdown .dropdown-menu.show { max-height: 1000px; opacity: 1; padding: 0; transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out; } .header .navbar-nav .nav-item.dropdown .dropdown-menu.closing { max-height: 0; opacity: 0; padding: 0; transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out; } } .header .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-menu-container { list-style: none; } .header .navbar-nav .nav-item.dropdown .dropdown-menu.show { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; } .header .navbar-nav .nav-item.dropdown .dropdown-menu li { margin-bottom: 0.5rem; } @media (max-width: 992px) { .header .navbar-nav .nav-item.dropdown .dropdown-menu li { width: 100%; margin-bottom: 0; } } .header .navbar-nav .nav-item.dropdown .dropdown-menu li a { font-size: 1rem; font-weight: 500; color: var(--colors-neutral-800); padding-block: 0.75rem !important; padding-inline: 1.5rem 0 !important; margin-inline: 1rem !important; display: block; border-radius: 5px; transition: color 0.3s ease, background-color 0.3s ease; text-align: start; } @media (max-width: 992px) { .header .navbar-nav .nav-item.dropdown .dropdown-menu li a { font-size: 14px; font-weight: 400; line-height: 20px; color: #161616; padding: 12px 16px 12px 16px !important; padding-inline-start: 2.5rem !important; margin: 0 !important; border-radius: 4px; } } .header .navbar-nav .nav-item.dropdown .dropdown-menu li a:hover { color: var(--bs-dark); background-color: var(--colors-neutral-100); } .header .navbar .mobile-header-tools { padding: 1rem; } @media (min-width: 992px) { .header .navbar .mobile-header-tools { display: none; } } .header .navbar .mobile-header-tools .e-service-btn { display: flex; margin-top: 0.5rem; } .header .navbar .mobile-header-tools .e-service-btn .btn { width: 100%; justify-content: flex-start; padding: 0.75rem 1rem; border-radius: var(--radius-lg); background-color: var(--colors-neutral-50); } .header .navbar .mobile-header-tools .e-service-btn .btn:hover { background-color: var(--colors-neutral-100); } .header .navbar .mobile-header-tools .e-service-btn .btn img { margin-inline-end: 0.5rem; } .header .navbar .header-tools .lang-switch .btn, .header .navbar .header-tools .e-service-btn .btn, .header .navbar .header-tools .search-box .btn { color: var(--bs-dark); font-size: 1rem; border-radius: 20px; transition: color 0.3s ease, background-color 0.3s ease; display: flex; align-items: center; } .header .navbar .header-tools .lang-switch .btn:hover, .header .navbar .header-tools .e-service-btn .btn:hover, .header .navbar .header-tools .search-box .btn:hover { color: var(--main-color-dark); background-color: var(--colors-alpha-alpha-600-primary-10); } @media (max-width: 576px) { .header .navbar .header-tools .lang-switch .btn, .header .navbar .header-tools .e-service-btn .btn, .header .navbar .header-tools .search-box .btn { padding: 0.4rem 0.75rem; font-size: 0.875rem; } } .header .navbar .header-tools { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: var(--spacing-4); margin-inline-start: auto; } @media (max-width: 992px) { .header .navbar .header-tools { margin: var(--spacing-4) 0 0; padding-top: var(--spacing-4); width: 100%; justify-content: space-between; border-top: 1px solid var(--border-color); } } @media (max-width: 576px) { .header .navbar .header-tools { justify-content: center; gap: var(--spacing-3); } } @media (max-width: 992px) { .header .navbar .header-tools .search-box { order: 3; } } .header .navbar .header-tools .search-box .btn { padding: 0.5rem; } .header .navbar .header-tools .lang-switch .btn, .header .navbar .header-tools .e-service-btn .btn { padding: 0.5rem 1rem; gap: 0.5rem; justify-content: center; } @media (max-width: 992px) { .header .navbar .header-tools .lang-switch { order: 1; } } @media (max-width: 992px) { .header .navbar .header-tools .e-service-btn { order: 2; } } .header .navbar .header-tools .e-service-btn .btn i { font-size: 1.2rem; } .menu-item-grid { width: 100%; } @media (min-width: 576px) { .menu-item-grid { width: 100%; } } @media (min-width: 768px) { .menu-item-grid { width: 50%; } } @media (min-width: 992px) { .menu-item-grid { width: 50%; } } @media (min-width: 1200px) { .menu-item-grid { width: 25%; } } .menu-item-full { width: 100%; } .search-modal { background-color: var(--main-color-dark); } .search-modal .modal-content { background: none; border: none; } .search-modal .modal-header { border: none; padding: 2rem; justify-content: flex-end; } .search-modal .modal-header .btn-close { background-color: #fff; padding: 1rem; border-radius: 50%; opacity: 0.7; transition: opacity 0.3s ease, background-color 0.3s ease; margin-inline-start: auto; } .search-modal .modal-header .btn-close:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.2); } .search-modal .modal-body { padding: 0; } .search-modal .search-form h2 { color: var(--text-neutral); font-weight: 600; margin-bottom: 2rem; font-size: 1.25rem; } .search-modal .search-form .input-group { border: 2px solid var(--border-color); border-radius: 5px; padding: 0.5rem; background-color: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .search-modal .search-form .input-group:focus-within { border-color: var(--main-color-dark); box-shadow: 0 15px 50px rgba(27, 131, 84, 0.15); } .search-modal .search-form .input-group .form-control { border: none; font-size: 1.25rem; background: none; color: var(--text-neutral); } .search-modal .search-form .input-group .form-control:focus { box-shadow: none; } .search-modal .search-form .input-group .form-control::-moz-placeholder { color: #6c757d; opacity: 0.7; } .search-modal .search-form .input-group .form-control::placeholder { color: #6c757d; opacity: 0.7; } .search-modal .search-form .input-group .search-btn { padding: 0.75rem 2rem; font-size: 1.5rem; color: #fff; background-color: var(--main-color-dark); border-radius: 50px; margin-left: 0.5rem; transition: background-color 0.3s ease; } .search-modal .search-form .input-group .search-btn:hover { background-color: var(--main-color-dark); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 992px) { .body-overflow-hidden { overflow: hidden; } .overlay-block { display: none; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; transition: opacity 0.3s ease; } #navbarNav { position: fixed; inset-inline-start: -100%; top: 0; width: 85%; height: 100vh; background-color: var(--colors-base-white); z-index: 1001; transition: inset-inline-start 0.3s ease; overflow-y: auto; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); } #navbarNav.show { inset-inline-start: 0; } #navbarNav .navbar-nav { padding: 16px; padding-bottom: 80px; } #navbarNav .mobile-nav-header { display: flex; justify-content: flex-end; padding: 16px; } #navbarNav .mobile-nav-header .close-nav-btn { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--bs-dark); padding: var(--spacing-2); cursor: pointer; transition: color 0.3s ease; } #navbarNav .mobile-nav-header .close-nav-btn:hover { color: var(--main-color); } } .footer { background-color: var(--colors-neutral-100); color: var(--colors-neutral-700); padding: 3rem 0; } .footer h5 { border-bottom: 1px solid var(--colors-neutral-300); padding-bottom: 15px; } .footer h6 { border-bottom: 1px solid var(--colors-neutral-300); color: var(--neutral-primary); } .footer li { list-style: none; } .footer li a { color: var(--colors-neutral-700); text-decoration: none; transition: opacity 0.3s ease; font-size: 0.875rem; } .footer li a:hover { opacity: 0.7; text-decoration: none; } .footer .list-unstyled a, .footer .copyright .links a { position: static; } .footer .list-unstyled a:hover, .footer .copyright .links a:hover { opacity: 0.7; text-decoration: none; } .footer .footer-section .social-media-icons { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .footer .footer-section .social-media-icons a { padding: 0; width: 32px !important; height: 32px !important; opacity: 1; transition: opacity 0.3s ease; opacity: 1; border-radius: 4px; border: 1px solid var(--colors-neutral-300); display: flex; align-items: center; justify-content: center; } .footer .footer-section .social-media-icons a:hover { background-color: hsla(0, 0%, 100%, 0.3); } .footer .footer-section .social-media-icons a i { padding: 0.5rem; display: inline-block; width: 45px; height: 45px; line-height: 30px; color: #fff; border: 1px solid hsla(0, 0%, 100%, 0.3); transition: opacity 0.3s ease; border-radius: 5px; text-align: center; font-size: 1.1rem; } .footer .footer-section .social-media-icons a { opacity: 0.6; } .footer .accessibility-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .footer .accessibility-tools .btn { padding: 0; transition: opacity 0.3s ease; opacity: 1; width: 32px !important; height: 32px !important; border-radius: 4px; border: 1px solid var(--colors-neutral-300); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; } .footer .accessibility-tools .btn:hover { background-color: hsla(0, 0%, 100%, 0.3); opacity: 0.6; } .footer .app-downloads { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .footer .app-downloads a { display: block; padding: 0; transition: opacity 0.3s ease; width: 32px !important; height: 32px !important; border-radius: 4px; border: 1px solid var(--colors-neutral-300); font-size: 1.1rem; text-align: center; } .footer .app-downloads a:hover { background-color: hsla(0, 0%, 100%, 0.3); opacity: 0.6; } .copyright { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; } .copyright .bottom-links { margin-bottom: 40px; display: flex; gap: 1rem; flex-wrap: wrap; } @media (max-width: 768px) { .copyright .copyright-text { justify-content: center; } } .copyright .copyright-text .copyright-inner p:first-of-type { color: var(--neutral-primary); font-weight: 600; font-size: 0.875rem; } .copyright .copyright-text .copyright-inner p:last-of-type { color: var(--neutral-primary); font-size: 0.875rem; font-weight: 400; } .copyright .copyright-text .LastUpdate { color: var(--neutral-primary); font-size: 0.875rem; font-weight: 400; } .copyright hr { border-color: hsla(0, 0%, 100%, 0.1); } .footer-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-logos img { max-width: 200px; } .footer-logos img.dga-cert { max-width: 106px; } @media (max-width: 768px) { .footer-logos { justify-content: center; } .footer-logos .footer-logo { height: 40px; } } .menu-parent { text-align: center; } .menu-parent button { height: inherit !important; } .menu-parent .floating-menu-list button { padding: 0 !important; } .menu-parent .floating-menu-list { border-radius: 0.5rem; background: #fff; margin-bottom: var(--global-spacing-md); box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06); padding: var(--global-spacing-xl); } .menu-parent .floating-menu-list a { display: flex; height: 2.5rem; min-width: 2.5rem; max-width: 2.5rem; min-height: 2.5rem; max-height: 2.5rem; padding: var(--Global-spacing-none, 0rem) var(--Button-buttons-lg-padding, 1rem); justify-content: center; align-items: center; gap: var(--Button-buttons-lg-gap, 0.25rem); align-self: center; border-radius: var(--Radius-radius-sm, 0.25rem); background: var(--Button-button-background-neutral-default, #f3f4f6); cursor: pointer; } .news-cards .card-title { color: #1f2a37; } .news-cards .card-text { color: #1f2a37; } .news-cards .news-image { height: 250px; -o-object-fit: cover; object-fit: cover; border-radius: 10px; } .news-cards .news-badge { color: #1f2a37; background-color: #f9fafb; border: 1px solid #e5e7eb; } .banner-section { padding: 0; } .banner-section .btn-more { color: #161616; background-color: #fff; border-color: #fff; border-radius: 5px; transition: all 0.4s ease; } .banner-section .btn-more:hover { color: #fff; background-color: #1b8354; border-color: #1b8354; } .banner-section .banner-slider { direction: ltr; } .banner-section .banner-slider .slick-slide { position: relative; min-height: 500px; padding: 0 1.5rem; } @media (max-width: 576px) { .banner-section .banner-slider .slick-slide { min-height: 700px; } } .banner-section .banner-slider .slick-slide .text-wrap { position: relative; z-index: 1; } .banner-section .banner-slider .slick-slide .img-wrap-banner { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .banner-section .banner-slider .slick-slide .img-wrap-banner::after { content: ""; background-color: #161616; opacity: 0.6; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .banner-section .banner-slider .slick-slide .img-wrap-banner img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; } .banner-section .banner-slider .slick-slide .sub-label-banner { color: #6c737f; } .banner-section .banner-slider .slick-prev::after, .banner-section .banner-slider .slick-next::after { content: none; } .banner-section .banner-slider .slick-prev::before, .banner-section .banner-slider .slick-next::before { content: none; } .banner-section .banner-slider .slick-prev, .banner-section .banner-slider .slick-next { width: 48px; height: 48px; left: 0; bottom: -100px; top: auto; display: flex; align-items: center; justify-content: center; background-color: #f3f4f6; border-radius: 50%; transition: all 0.4s ease; } .banner-section .banner-slider .slick-prev:hover, .banner-section .banner-slider .slick-next:hover { background-color: #1b8354; } .banner-section .banner-slider .slick-prev:hover path, .banner-section .banner-slider .slick-next:hover path { fill: #fff; } .banner-section .banner-slider .slick-prev { left: 70px; } .banner-section .banner-slider .slick-dots { bottom: 100px; top: auto; display: flex; justify-content: center; align-items: center; padding-top: 0; width: auto; right: 0; left: 0; } .banner-section .banner-slider li button { width: 16px; height: 16px; padding: 0; } .banner-section .banner-slider li button:before { font-size: 17px; width: auto; height: auto; text-decoration: none; transition: opacity 0.3s ease; color: #e5e7eb; opacity: 1; } .banner-section .banner-slider li.slick-active button:before { color: #1b8354; } @media (max-width: 576px) { .banner-slider-section .banner-slider-slider .slick-prev, .banner-slider-section .banner-slider-slider .slick-next { top: auto; bottom: -100px; } .banner-slider-section .banner-slider-slider .slick-prev { right: auto; left: 80px; } .banner-slider-section .banner-slider-slider .slick-next { right: auto; left: 10px; } } .partners-section { padding: 3rem 0 6rem 0; } .partners-section .partners-slider { direction: ltr; } .partners-section .partners-slider .slick-slide { display: flex; justify-content: center; align-items: center; border: 1px solid var(--Border-border-neutral-primary); color: #000 !important; } .partners-section .partners-slider .slick-slide img { border: 1px solid #d2d6db; border-radius: 1rem; padding: 1rem; width: 117px; height: 100px; -o-object-fit: contain; object-fit: contain; } .partners-section .partners-slider .slick-prev::after, .partners-section .partners-slider .slick-next::after { content: none; } .partners-section .partners-slider .slick-prev::before, .partners-section .partners-slider .slick-next::before { content: none; } .partners-section .partners-slider .slick-prev, .partners-section .partners-slider .slick-next { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: #f3f4f6; border-radius: 4px; transition: all 0.4s ease; } .partners-section .partners-slider .slick-prev:hover, .partners-section .partners-slider .slick-next:hover { background-color: #1b8354; } .partners-section .partners-slider .slick-prev:hover path, .partners-section .partners-slider .slick-next:hover path { fill: #fff; } .partners-section .partners-slider .slick-dots { top: -70px; display: flex; justify-content: end; padding-top: 3rem; } .partners-section .partners-slider li button { width: 16px; height: 16px; padding: 0; } .partners-section .partners-slider li button:before { font-size: 17px; width: auto; height: auto; text-decoration: none; transition: opacity 0.3s ease; color: #e5e7eb; opacity: 1; } .partners-section .partners-slider li.slick-active button:before { color: #1b8354; } .partners-section h2 { color: var(--bs-dark); font-weight: 600; margin-bottom: 3rem; max-width: 80%; } .partners-section .sub-head-section { color: var(--bs-dark); max-width: 80%; } @media (max-width: 576px) { .partners-section .partners-slider .slick-prev, .partners-section .partners-slider .slick-next { top: auto; bottom: -100px; } .partners-section .partners-slider .slick-prev { right: 0; left: auto; } .partners-section .partners-slider .slick-next { right: 60px; left: auto; } } .important-links-section { padding: 3rem 0 6rem 0; } .important-links-section .important-links-slider { direction: ltr; } .important-links-section .important-links-slider .slick-slide { border: 1px solid #d2d6db; color: #000; border-radius: 16px; padding: 1rem; margin: 0.75rem; } .important-links-section .important-links-slider .slick-slide .img-wrap { background-color: #f9fafb; border-radius: 16px; position: relative; width: 94px !important; height: 126px; padding-right: 1rem; margin-left: 1.75rem; flex: none; } .important-links-section .important-links-slider .slick-slide .btn-visit { color: #1b8354; } .important-links-section .important-links-slider .slick-slide .img-main { border-radius: 1rem; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; width: 93px; height: 81px; } .important-links-section .important-links-slider .slick-slide .sub-label { color: #6c737f; } .important-links-section .important-links-slider .slick-prev::after, .important-links-section .important-links-slider .slick-next::after { content: none; } .important-links-section .important-links-slider .slick-prev::before, .important-links-section .important-links-slider .slick-next::before { content: none; } .important-links-section .important-links-slider .slick-prev, .important-links-section .important-links-slider .slick-next { width: 48px; height: 48px; left: 0; bottom: -100px; top: auto; display: flex; align-items: center; justify-content: center; background-color: #f3f4f6; border-radius: 50%; transition: all 0.4s ease; } .important-links-section .important-links-slider .slick-prev:hover, .important-links-section .important-links-slider .slick-next:hover { background-color: #1b8354; } .important-links-section .important-links-slider .slick-prev:hover path, .important-links-section .important-links-slider .slick-next:hover path { fill: #fff; } .important-links-section .important-links-slider .slick-prev { left: 70px; } .important-links-section .important-links-slider .slick-dots { bottom: -70px; top: auto; display: flex; justify-content: end; padding-top: 0; width: auto; right: 0; left: auto; } .important-links-section .important-links-slider li button { width: 16px; height: 16px; padding: 0; } .important-links-section .important-links-slider li button:before { font-size: 17px; width: auto; height: auto; text-decoration: none; transition: opacity 0.3s ease; color: #e5e7eb; opacity: 1; } .important-links-section .important-links-slider li.slick-active button:before { color: #1b8354; } .important-links-section h2 { color: var(--bs-dark); font-weight: 600; max-width: 80%; } .important-links-section .sub-head-section { color: var(--bs-dark); max-width: 80%; } @media (max-width: 576px) { .important-links-section .important-links-slider .slick-prev, .important-links-section .important-links-slider .slick-next { top: auto; bottom: -100px; } .important-links-section .important-links-slider .slick-prev { right: auto; left: 80px; } .important-links-section .important-links-slider .slick-next { right: auto; left: 10px; } } .events-section { padding: 3rem 0; position: relative; background-repeat: no-repeat; background-size: cover; min-height: 462px; display: flex; align-items: center; justify-content: center; } .events-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../images/events-cover.png); background-repeat: no-repeat; background-size: cover; opacity: 0.85; z-index: -2; } .events-section::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: -1; } @media (max-width: 576px) { .events-section { background-size: cover; } } .events-section .events-slider { direction: ltr; } .events-section .events-slider .slick-slide { color: #000; border-radius: 16px; padding: 1rem 0; margin: 0.75rem 0; } .events-section .events-slider .slick-slide .img-main { border-radius: 1rem; height: 224px; -o-object-fit: cover; object-fit: cover; width: 308px; } @media (max-width: 576px) { .events-section .events-slider .slick-slide .img-main { width: auto; } } .events-section .events-slider .slick-slide .stat-label { color: #1f2a37; font-size: 18px; } .events-section .events-slider .slick-slide .sub-label { color: #6c737f; } .events-section .events-slider .slick-slide .label-badge { color: #1849a9; background-color: #eff8ff; border: 1px solid #b2ddff; } .events-section .events-slider .slick-prev::after, .events-section .events-slider .slick-next::after { content: none; } .events-section .events-slider .slick-prev::before, .events-section .events-slider .slick-next::before { content: none; } .events-section .events-slider .slick-prev, .events-section .events-slider .slick-next { width: 48px; height: 48px; left: 0; bottom: -100px; top: auto; display: flex; align-items: center; justify-content: center; background-color: #f3f4f6; border-radius: 50%; transition: all 0.4s ease; } .events-section .events-slider .slick-prev:hover, .events-section .events-slider .slick-next:hover { background-color: #1b8354; } .events-section .events-slider .slick-prev:hover path, .events-section .events-slider .slick-next:hover path { fill: #fff; } .events-section .events-slider .slick-prev { left: 70px; } .events-section .events-slider .slick-dots { bottom: -70px; top: auto; display: flex; justify-content: end; padding-top: 0; width: auto; right: 0; left: auto; } .events-section .events-slider li button { width: 16px; height: 16px; padding: 0; } .events-section .events-slider li button:before { font-size: 17px; width: auto; height: auto; text-decoration: none; transition: opacity 0.3s ease; color: #e5e7eb; opacity: 1; } .events-section .events-slider li.slick-active button:before { color: #1b8354; } .events-section h2 { color: var(--bs-dark); font-weight: 600; max-width: 80%; } .events-section .sub-head-section { color: var(--bs-dark); max-width: 80%; } @media (max-width: 576px) { .events-section .events-slider .slick-prev, .events-section .events-slider .slick-next { top: auto; bottom: -100px; } .events-section .events-slider .slick-prev { right: auto; left: 80px; } .events-section .events-slider .slick-next { right: auto; left: 10px; } } .services_container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1rem 0; } @media screen and (max-width: 1200px) { .services_container { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media screen and (max-width: 992px) { .services_container { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media screen and (max-width: 576px) { .services_container { grid-template-columns: repeat(1, 1fr); gap: 1.25rem; } } .services_container.list-view { grid-template-columns: 1fr; } .services_container.list-view .card .card-body { display: block !important; } @media (min-width: 768px) { .services_container.list-view .card .card-body { flex-direction: row; align-items: center; flex-wrap: wrap; } .services_container.list-view .card .card-body .card-title { flex: 0 0 100%; margin-bottom: 1rem; } .services_container.list-view .card .card-body .service-description { flex: 1 1 40%; margin-bottom: 0; padding-inline-end: 1rem; } .services_container.list-view .card .card-body .tax-types-container { flex: 0 0 auto; margin-bottom: 0; } .services_container.list-view .card .card-body .time { flex: 1 1 auto; margin-bottom: 0; padding: 0 1.5rem; } .services_container.list-view .card .card-body .d-flex { flex: 0 0 auto; margin-top: 0; justify-content: start !important; } } @media (max-width: 992px) { .filter-sidebar-container { position: fixed; top: 0; inset-inline-start: -100%; width: 100%; max-width: 320px; height: 100vh; z-index: 1050; transition: inset-inline-start 0.3s ease; padding: 0; } .filter-sidebar-container.show { inset-inline-start: 0; } } .filter-sidebar { border: 1px solid #cbd5e1; border-radius: 10px; } @media (max-width: 992px) { .filter-sidebar { height: 100vh; overflow-y: auto; border-radius: 0; position: relative; top: 0; background-color: #fff; margin: 0; inset-inline-start: 0; width: 100%; max-width: 280px; } } .filter-sidebar .close-section { display: none; border-bottom: 1px solid #cbd5e1; } @media (max-width: 992px) { .filter-sidebar .close-section { display: flex; justify-content: space-between; } } .filter-sidebar .close-section .filter-sidebar__title { border: 0; } .filter-sidebar .filter-sidebar__title { border-bottom: 1px solid #cbd5e1; padding: 20px; } .filter-sidebar .filter-sidebar__label { font-weight: 700; font-size: 0.75rem; margin-bottom: 15px; display: block; } .filter-sidebar .filter-sidebar__section { padding: 20px; border-bottom: 1px solid #cbd5e1; } .filter-sidebar .filter-sidebar__section .form-check { margin-bottom: 15px; display: flex; align-items: center; font-size: 0.875rem; } .filter-sidebar .btn-show-all { display: block; } .filter-toggle-btn-container { display: none; } @media (max-width: 992px) { .filter-toggle-btn-container { display: block; } } .filter-toggle-btn-container .filter-toggle-btn { display: block; background-color: #fff; border: 1px solid #d2d6db; padding: 0.4rem 0; font-weight: 600; transition: all 0.2s ease-in-out; width: 100%; color: #161616; border-radius: 8px; text-align: center; } .filter-toggle-btn-container .filter-toggle-btn:hover { background-color: #0d121c; color: #fff; } @media (max-width: 992px) { .sort-dropdown-container { display: none; } } #sortBy .dropdown-toggle .sort-icon { margin-right: 0.5rem; } @media (max-width: 992px) { #sortBy .sort-text { display: none; } } .sort-toggle-btn-container { display: none; } @media (max-width: 992px) { .sort-toggle-btn-container { display: block; } } .sort-toggle-btn-container .sort-toggle-btn { display: block; background-color: #fff; border: 1px solid #d2d6db; padding: 0.4rem 0; font-weight: 600; transition: all 0.2s ease-in-out; width: 100%; color: #161616; border-radius: 8px; text-align: center; } .sort-toggle-btn-container .sort-toggle-btn:hover { background-color: #0d121c; color: #fff; } @media (max-width: 992px) { .filter-close-btn { margin: 1rem; } } .filter-sidebar__title { font-weight: 700; } .d-flex .filter-sidebar__title { margin-bottom: 0; } @media (min-width: 992px) { .d-flex .filter-sidebar__title { display: none; } } @media (max-width: 992px) { .filter-sidebar__form .filter-sidebar__title { display: none; } } .service-card__meta, .card .time { font-size: 0.75rem; color: #4d5761; } .custom-badge { display: inline-block; background: #f9fafb; color: #1a2530; border-radius: 8px; padding: 0.25rem 1rem; font-size: 0.75rem; font-weight: 700; line-height: 1.5; border: 1px solid #e5e7eb; margin-bottom: 1rem; text-align: center; width: -moz-fit-content; width: fit-content; margin: 5px; } .service-description { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.5rem; } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; text-align: center; background-color: var(--colors-neutral-50); border: 1px solid var(--border-color); border-radius: var(--radius-lg); margin: 2rem 0; } .empty-state__icon { font-size: 3rem; color: var(--info-color); margin-bottom: 1rem; } .empty-state__icon i { display: inline-block; } .empty-state__title { font-size: var(--display-sm--medium); color: var(--text-neutral); margin-bottom: 0.5rem; font-weight: 500; } .empty-state__description { font-size: var(--text-base); color: var(--colors-neutral-600); max-width: 24rem; margin: 0 auto; } @media screen and (max-width: 576px) { .view-toggle { display: none; } } .view-toggle .btn-group { display: flex; } .view-toggle .btn-group .btn-icon { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; background-color: var(--background-neutral-light); border: 1px solid var(--border-color); transition: all 0.2s ease; } @media (min-width: 768px) { .view-toggle .btn-group .btn-icon { width: 2.5rem; height: 2.5rem; } } .view-toggle .btn-group .btn-icon:first-child { border-end-start-radius: var(--radius-md); border-start-start-radius: var(--radius-md); border-end-end-radius: 0; border-start-end-radius: 0; } .view-toggle .btn-group .btn-icon:last-child { border-end-end-radius: var(--radius-md); border-start-end-radius: var(--radius-md); border-end-start-radius: 0; border-start-start-radius: 0; border-inline-start: none; } .view-toggle .btn-group .btn-icon:hover { background-color: var(--neutral-secondary); } .view-toggle .btn-group .btn-icon.active { background-color: var(--background-primary-default); color: var(--oncolor-primary); } .view-toggle .btn-group .btn-icon.active i { color: var(--oncolor-primary); } .view-toggle .btn-group .btn-icon i { font-size: 1.125rem; color: var(--text-neutral); } @media (min-width: 768px) { .view-toggle .btn-group .btn-icon i { font-size: 1.25rem; } } .services-count { color: #6c737f; } .filter-count { font-size: 0.75rem; } .voice-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; overflow-x: hidden; overflow-y: auto; background-color: rgba(0, 0, 0, 0); transition: background-color 0.3s ease-in-out; } .voice-modal.show { display: block; background-color: rgba(0, 0, 0, 0.5); } .voice-modal.show .modal-content { opacity: 1; transform: translateY(0); } .voice-modal .modal-content { background: #fff; border: none; margin: 2rem auto; max-width: 600px; position: relative; opacity: 0; transform: translateY(-20px); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; border-radius: 15px; overflow: hidden; } .voice-modal .modal-header { border: none; justify-content: flex-end; } .voice-modal .modal-header .btn-close { background-color: #fff; padding: 1rem; border-radius: 50%; opacity: 0.7; transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out; } .voice-modal .modal-header .btn-close:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.2); } .voice-modal .modal-body { padding: 0; } .voice-modal .voice-form h2 { color: var(--main-color-dark); font-weight: 600; margin-bottom: 2rem; padding: 0 2rem; } .voice-modal .voice-form .voice-content { background: #fff; padding: 2rem; padding-top: 0; } .voice-modal .voice-form .voice-content p { color: var(--text-neutral); font-size: 1.1rem; line-height: 1.6; margin-bottom: 2rem; } .voice-modal .voice-form .voice-content .commands-list { text-align: right; } .voice-modal .voice-form .voice-content .commands-list h3 { color: var(--main-color-dark); font-weight: 600; margin-bottom: 1rem; font-size: 1.2rem; } .voice-modal .voice-form .voice-content .commands-list ul { list-style: none; padding: 0; margin: 0; } .voice-modal .voice-form .voice-content .commands-list ul li { color: var(--text-neutral); font-size: 1rem; padding: 0.5rem; border-radius: 8px; transition: background-color 0.3s ease; } .voice-modal .voice-form .voice-content .btn-primary:hover { background-color: var(--main-color-dark); opacity: 0.9; } .cookies-notification { position: fixed; z-index: 1050; max-width: 550px; bottom: 1rem; } [dir="rtl"] .cookies-notification { right: 1rem; left: auto; } [dir="ltr"] .cookies-notification { left: 1rem; right: auto; } .cookies-notification { display: none; } .cookies-notification.show { display: block; } .cookies-notification .modal-content { border-radius: 0.5rem; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); background-color: #fff; } .cookies-notification .modal-body { padding: 1.5rem; } .cookies-notification .cookie-icon { font-size: 1.5rem; min-width: 2rem; display: flex; align-items: center; justify-content: center; } .cookies-notification .cookie-content { flex: 1; } .cookies-notification .cookie-content h5 { font-weight: 600; margin-bottom: 0; } .cookies-notification .cookie-content p { font-size: 0.875rem; color: #555; margin-bottom: 0; } .cookies-notification #acceptCookies { padding: 0.375rem 1.5rem; font-weight: 500; } .cookies-notification .btn-close { padding: 0.25rem; background-size: 0.75rem; } .search-panel { position: absolute; top: 100%; left: 0; width: 100%; height: 0; min-height: 0; z-index: 1; overflow: hidden; pointer-events: none; padding: 0 !important; transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .search-panel.show { height: 300px; pointer-events: auto; overflow: visible; padding: 0; } .search-panel__container { width: 100%; height: 300px; background: #fff; border-radius: 0 0 1rem 1rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 1.5px 3px rgba(0, 0, 0, 0.03); border-top: 1px solid #e4e4e4; position: relative; margin: 0 auto; display: flex; flex-direction: column; justify-content: flex-start; } .search-panel .input-group { background: #fff; border: 1px solid #9da4ae; overflow: visible; } .search-panel__body { background: #fff; flex: 1 1 auto; overflow-y: visible; display: flex; flex-direction: column; justify-content: flex-start; } .search-panel__form { width: 100%; display: flex; align-items: center; gap: 1rem; position: relative; } .search-panel__form .form-control { background: #fff; border: 1px solid #ced4da; font-size: 1rem; color: #222; } .search-panel__form .btn-success { min-width: 80px; } .search-panel__form .btn-light { background: #f8f9fa; } .search-panel__form .btn-ai-search { white-space: nowrap; display: flex; width: 157px; justify-content: center; gap: 5px; } .search-panel__suggestions { margin-top: 1.5rem; } .search-panel__suggestions .fw-semibold { color: #198754; } .search-panel__suggestions .btn-outline-secondary { background: #fff; border: 1px solid #ced4da; color: #222; font-size: 0.95rem; } .search-panel__suggestions .btn-outline-secondary:hover { background: #f0f0f0; } .nav-pills .nav-link { color: #fff; background: rgba(0, 0, 0, 0); border: 1px solid hsla(0, 0%, 100%, 0.5); border-radius: 20px; padding: 0.5rem 1.5rem; transition: background-color 0.3s ease; } .nav-pills .nav-link.active { background: hsla(0, 0%, 100%, 0.2); border-color: rgba(0, 0, 0, 0); } .nav-pills .nav-link:hover:not(.active) { background: hsla(0, 0%, 100%, 0.1); } .search-suggestions-dropdown { position: absolute; top: 100%; left: 0; right: 0; max-height: 0; overflow: hidden; background: #fff; border-radius: 0 0 0.375rem 0.375rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 1060; transition: max-height 0.2s ease-out; border: 1px solid #ced4da; border-top: none; } .search-suggestions-dropdown.is-open { max-height: 16rem; overflow-y: auto; } .search-suggestions-dropdown .search-suggestion-header { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: #6c757d; background-color: #f8f9fa; border-bottom: 1px solid #e9ecef; } .search-suggestions-dropdown .search-suggestion-item { padding: 0.75rem 1rem; cursor: pointer; border-bottom: 1px solid #f5f5f5; transition: background-color 0.2s ease; font-size: 0.95rem; } .search-suggestions-dropdown .search-suggestion-item:last-child { border-bottom: none; } .search-suggestions-dropdown .search-suggestion-item:hover, .search-suggestions-dropdown .search-suggestion-item.active { background-color: #f8f9fa; } .search-suggestions-dropdown .search-suggestion-item strong { color: #198754; font-weight: 600; } .search-suggestions-dropdown .search-suggestion-item--autocorrect .match { color: inherit; font-weight: normal; } .search-suggestions-dropdown .search-suggestion-item--autocorrect .correction { color: #dc3545; font-weight: 600; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: #dc3545; text-decoration-thickness: 1px; text-underline-offset: 2px; } .slick-wrapper .slick-item { margin-inline-start: var(--spacing-2); height: 230px; } .slick-wrapper .slick-dots { inset-block-start: 110%; bottom: unset; text-align: start; } .slick-wrapper .slick-dots li { margin: 0; } .slick-wrapper .slick-dots li button:before { font-size: 10px; color: var(--colors-neutral-700); } .slick-wrapper .slick-dots li.slick-active button:before { color: var(--colors-primary-sa-flag-800); } .slick-wrapper button[class^="slick"] { background-color: var(--colors-primary-sa-flag-800); inset-block-start: 115%; inset-inline-end: 0; border-radius: var(--radius-sm); width: 40px; height: 40px; z-index: 7; } .slick-wrapper button[class^="slick"]::before { color: #fff; } .slick-wrapper button[class^="slick"].slick-prev { inset-inline-start: calc(100% - 90px); } .ratings .bi-star-fill, .ratings-modal .bi-star-fill { color: #e6e6e6; font-size: 1.5rem; cursor: pointer; margin: 0 2px; } .ratings .bi-star-fill.rating-color, .ratings-modal .bi-star-fill.rating-color { color: #1b8354; } .rating-container { padding: 10px 0; } .rating-info .rating-value { font-size: 1.2rem; font-weight: bold; margin-right: 5px; } .rating-info .rating-total { font-size: 0.9rem; } .btn-service-rating { background-color: #198754; color: #fff; padding: 8px 16px; border-radius: 4px; } .btn-service-rating:hover { background-color: rgb(17.03125, 91.96875, 57.225); } .rating-modal-wrapper { padding: 20px 0; } .rating-modal-wrapper .ratings-modal { margin: 20px 0; } .rating-modal-wrapper .ratings-modal .bi-star-fill { font-size: 2rem; margin: 0 5px; } .rating-msg { color: #198754; font-weight: 500; } .feedback-wrapper { display: flex; gap: 20px; position: absolute; background: #fff; width: 100%; height: 0px; overflow: hidden; visibility: hidden; z-index: -1; transition: all 0.4s ease-in-out; } .feedback-wrapper.show { height: auto; visibility: visible; z-index: 8; } .action-buttons { color: #161616; background-color: rgba(0, 0, 0, 0); font-size: 23px; } .action-buttons i.bi-volume-up { font-size: 29px; } .breadcrumb-link { color: #384250; font-size: 14px; line-height: 20px; } .breadcrumb-link:last-of-type { color: #9da4ae; } .breadcrumb i { color: #9da4ae; font-size: 12px; } .new-card { min-height: 100%; display: flex; flex-direction: column; border: 1px solid var(--colors-neutral-400); border-radius: var(--radius-md); padding: 1rem; height: 295px; transition: all 0.3s ease; background-color: #fff; } @media screen and (max-width: 600px) { .new-card { height: auto !important; } } .new-card.skeleton-card { background-color: #fff; overflow: hidden; position: relative; } .new-card.skeleton-card::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) ); animation: shimmer 2s infinite; } .new-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } .new-card-title { font-weight: 700; font-size: var(--text-lg); line-height: 28px; margin-bottom: 0; } .new-card-header { flex-shrink: 0; } .new-card-header .icon-container { width: 40px; height: 40px; background-color: var(--background-neutral-light); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--colors-green-700); } .new-card-header { flex-shrink: 0; } .new-card-header .icon-container { width: 40px; height: 40px; background-color: var(--background-neutral-light); border-radius: 50%; display: flex; justify-content: center; align-items: center; } .new-card-header .icon-container img { max-width: 100%; max-height: 100%; padding: 10px; filter: brightness(0) saturate(100%) invert(0%) sepia(9%) saturate(269%) hue-rotate(329deg) brightness(96%) contrast(83%); } .new-card-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; font-weight: 400; font-size: 16px; line-height: 24px; } .new-card-body .new-card-category { width: -moz-fit-content; width: fit-content; margin-top: auto; padding: 0.125rem 0.5rem; background-color: var(--colors-neutral-50); border: 1px solid var(--colors-neutral-200); border-radius: var(--radius-md); } .new-card-img { min-height: 150px; max-height: 250px; -o-object-fit: cover; object-fit: cover; margin-bottom: var(--spacing-4); } .new-card-action { display: flex; gap: 0.5rem; background-color: #f3f4f6; padding: 0.25rem 1rem; color: var(--colors-neutral-900); font-weight: 500; } @keyframes shimmer { 100% { transform: translateX(100%); } } .contact-card-skeleton .skeleton-circle { width: 40px; height: 40px; border-radius: 50%; background-color: #e5e7eb; } .contact-card-skeleton .skeleton-title { height: 24px; width: 70%; background-color: #e5e7eb; border-radius: var(--radius-md); margin-bottom: 1rem; } .contact-card-skeleton .skeleton-label { height: 16px; width: 60%; background-color: #e5e7eb; border-radius: var(--radius-md); margin-bottom: 0.5rem; } .contact-card-skeleton .skeleton-value { height: 16px; width: 40%; background-color: #e5e7eb; border-radius: var(--radius-md); margin-bottom: 0.5rem; } .contact-card-skeleton .skeleton-action { height: 32px; width: 80px; background-color: #e5e7eb; border-radius: var(--radius-md); } .contact-card-skeleton .info-group { margin-bottom: 1rem; } .contact-us-note { font-size: 14px; font-weight: 400; color: #161616; margin-top: 5rem; justify-content: end; } @media screen and (max-width: 600px) { .contact-us-note { margin-top: 3rem; } } .contact-us-survay { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--main-color); padding: 1rem 0; margin-top: 1rem; gap: 8px; } @media screen and (max-width: 600px) { .contact-us-survay { flex-direction: column; padding: 1rem 0; } } .contact-us-survay-question { font-weight: 400; font-size: 16px; line-height: 24px; display: flex; gap: 1rem; align-items: center; } .contact-us-survay-note { font-weight: 400; font-size: 14px; line-height: 20px; } @media screen and (max-width: 600px) { .contact-us-survay-note { display: none; } } .card-info { min-height: 100%; display: flex; flex-direction: column; border: 1px solid var(--colors-neutral-400); border-radius: var(--radius-md); padding: 1rem; height: 265px; } .card-info-title { font-weight: 700; font-size: var(--text-lg); line-height: 28px; margin-bottom: 0; } .card-info-header { flex-shrink: 0; } .card-info-header .icon-container { width: 40px; height: 40px; background-color: var(--colors-primary-sa-flag-50); border-radius: 50%; display: flex; justify-content: center; align-items: center; } .card-info-header .icon-container img { max-width: 100%; max-height: 100%; padding: 10px; filter: grayscale(100%) sepia(100%) hue-rotate(114deg) contrast(2); } .card-info .info-value { margin-top: 3rem; text-decoration: underline; direction: ltr; } .new-card { min-height: 100%; display: flex; flex-direction: column; border: 1px solid var(--colors-neutral-400); border-radius: var(--radius-md); padding: 1rem; height: 295px; transition: all 0.3s ease; background-color: #fff; } @media screen and (max-width: 600px) { .new-card { height: auto !important; } } .new-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } .new-card-title { font-weight: 700; font-size: var(--text-lg); line-height: 28px; margin-bottom: 0; margin-top: 24px; color: #1f2a37; } .new-card-header { flex-shrink: 0; } .new-card-header .icon-container { width: 40px; height: 40px; background-color: #f9fafb; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .new-card-header .icon-container img { max-width: 100%; max-height: 100%; padding: 10px; } .new-card .info-value { margin-top: 3rem; direction: ltr; } .new-card .icon-newContactCardContainer { width: 48px; height: 48px; border-radius: 50%; background-color: #f9fafb; display: flex; align-items: center; justify-content: center; } .new-card .icon-newContactCardContainer.drak-bg { background-color: #f9fafb; } .new-card .icon-newContactCardContainer div { width: 28px; height: 28px; } .new-card .icon-newContactCardContainer div img { -o-object-fit: contain; object-fit: contain; height: 100%; filter: brightness(0) saturate(100%); -webkit-filter: brightness(0) saturate(100%); opacity: 0.87; } .tabs .nav-tabs { position: relative; overflow: auto hidden; flex-wrap: nowrap; width: 100%; word-break: keep-all; border-bottom: none; } .tabs .nav-tabs .nav-link:hover, .tabs .nav-tabs .nav-link:focus { isolation: auto; } .tabs .nav-tabs::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: #d2d6db; z-index: 0; } .tabs .nav-link { background-color: rgba(0, 0, 0, 0); border: none; color: #384250; font-size: 14px; position: relative; width: -moz-max-content; width: max-content; padding-bottom: 0.5rem; } .tabs .nav-link::after { content: ""; position: absolute; bottom: 1px; left: 0; width: 100%; height: 3px; background-color: rgba(0, 0, 0, 0); z-index: 1; transition: background-color 0.2s ease; } .tabs .nav-link:hover:not(.active)::after { background-color: rgba(27, 131, 84, 0.3); } .tabs .nav-link.active { font-weight: 700; color: #161616; background-color: rgba(0, 0, 0, 0); } .tabs .nav-link.active::after { background-color: #1b8354; } .tabs .nav-link.active:hover::after, .tabs .nav-link.active:active::after { background-color: #1b8354; } input[type="button"].btn.btn-outline-secondary, input[type="reset"].btn.btn-outline-secondary, input[type="submit"].btn.btn-outline-secondary, button.btn.btn-outline-secondary { color: var(--Text-text-default, #161616); border-radius: var(--Radius-radius-sm, 4px); border: 1px solid var(--Border-border-neutral-primary, #d2d6db); } input[type="button"].btn.btn-outline-secondary:hover, input[type="reset"].btn.btn-outline-secondary:hover, input[type="submit"].btn.btn-outline-secondary:hover, button.btn.btn-outline-secondary:hover { border: 1px solid var(--Border-border-neutral-secondary, #e5e7eb); background: var(--Button-button-background-neutral-default, #f3f4f6); } select { position: relative; } select.form-select, ::picker(select) { -webkit-appearance: base-select; -moz-appearance: base-select; appearance: base-select; padding: 0.5rem 1rem; position: relative; } select.form-select:focus { border-bottom: 1px solid var(--colors-neutral-400); } ::picker(select) { opacity: 0; transition: all 0.4s allow-discrete; } ::picker(select) { max-height: 20rem; overflow-y: auto; } ::picker(select):popover-open { opacity: 1; } ::picker(select) { top: calc(anchor(bottom) + 0.5rem); } select:not(:disabled)::picker-icon { color: #999; transition: 0.4s rotate; content: url("data:image/svg+xml,%3Csvg%20width%3D%2712%27%20height%3D%277%27%20viewBox%3D%270%200%2012%207%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1.1281%200.254404C1.22967%200.388883%201.53293%200.790336%201.71353%201.02176C2.07526%201.48527%202.56952%202.10118%203.10269%202.71526C3.63856%203.33244%204.20148%203.93352%204.70158%204.37539C4.95234%204.59695%205.17262%204.76531%205.35439%204.87489C5.52535%204.97796%205.62634%204.99939%205.62634%204.99939C5.62634%204.99939%205.72436%204.97795%205.89531%204.8749C6.07709%204.76532%206.29737%204.59696%206.54813%204.37539C7.04822%203.93352%207.61115%203.33244%208.14701%202.71525C8.68018%202.10116%209.17444%201.48525%209.53617%201.02173C9.71678%200.790305%2010.0196%200.38942%2010.1212%200.25494C10.3259%20-0.0229959%2010.7175%20-0.0829425%2010.9955%200.121751C11.2734%200.326445%2011.3328%200.717694%2011.1281%200.99563L11.1265%200.997727C11.02%201.13876%2010.7059%201.55463%2010.5216%201.79077C10.1517%202.26475%209.64302%202.89884%209.09089%203.53476C8.54146%204.16757%207.93673%204.81649%207.3758%205.31212C7.09605%205.5593%206.81247%205.78156%206.54067%205.94542C6.28602%206.09893%205.96361%206.25%205.62485%206.25C5.28609%206.25%204.96368%206.09893%204.70904%205.94541C4.43723%205.78156%204.15366%205.5593%203.87391%205.31212C3.31298%204.81649%202.70825%204.16758%202.15882%203.53477C1.60669%202.89886%201.098%202.26478%200.728099%201.7908C0.543709%201.55453%200.22964%201.13871%200.1233%200.997924L0.1219%200.996069C-0.082796%200.718135%20-0.0237165%200.326489%200.254218%200.121793C0.532143%20-0.0828953%200.923396%20-0.0235072%201.1281%200.254404Z%27%20fill%3D%27%23161616%27%2F%3E%3C%2Fsvg%3E"); position: absolute; left: 16px; top: 6px; z-index: 99; } .calendars select:not(:disabled)::picker-icon { position: unset; } [dir="ltr"] select:not(:disabled)::picker-icon { left: auto; right: 16px; } select:disabled::picker-icon { content: ""; } select:open::picker-icon { rotate: 180deg; } select:open { --line-c2: #fff; background-size: 100% 2px, auto; } ::picker(select) { border: none; padding: var(--Global-spacing-md, 0.5rem) 1rem; border-radius: var(--radius-sm, 0.25rem); border: 1px solid var(--Border-border-neutral-primary, #d2d6db); background: var(--Form-field-background-default, #fff); box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03); } option { padding: var(--Global-spacing-md, 0.5rem); display: flex; flex-direction: row-reverse; justify-content: space-between; border-radius: var(--Radius-radius-sm, 0.25rem); color: var(--Text-text-default, #161616); font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; } select option:hover { background: var(--Form-option-background-hover, #f3f4f6) !important; } select option:focus { background: #fff !important; } option[value="-1"] { color: var(--Form-option-text-disabled, #6c737f); } option:checked { background: #fff; } option:not(:disabled)::checkmark, .select2-container--default .select2-results__option--selected::after { content: url("data:image/svg+xml,%3Csvg%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2020%2020%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M16.6666%205L7.49992%2014.1667L3.33325%2010%27%20stroke%3D%27%23161616%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"); position: relative; top: 6px; } .select2-container--default .select2-results__option--selected { display: flex; align-items: center; justify-content: space-between; } option:disabled::checkmark { content: ""; } option:disabled { color: var(--Form-field-text-placeholder, #6c737f); } @starting-style { ::picker(select):popover-open { opacity: 0; } } .link-copy { color: var(--Link-link-primary, #1b8354); cursor: pointer; font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; transition: all 0.3s ease-in-out; } .link-copy:hover { text-decoration: underline; color: var(--Link-link-primary-hover, #54c08a); } .select-chip { display: flex; height: 32px; padding: var(--Global-spacing-none, 0) var(--Global-spacing-lg, 12px); justify-content: center; align-items: center; gap: var(--Global-spacing-xs, 4px); border-radius: 4px; background: var(--Chip-chip-background-neutral-default, #f3f4f6); } ul.select2-results__options::-webkit-scrollbar { width: 0.5rem; } ul.select2-results__options::-webkit-scrollbar-thumb { border-radius: var(--radius-full, 624.9375rem); background: var(--Background-background-neutral-300, #d2d6db); width: 0.5rem; } ul.select2-results__options::-webkit-scrollbar-track { border-radius: var(--Radius-radius-md, 0.5rem) 0 0 var(--Radius-radius-md, 0.5rem); background: var(--Background-background-neutral-25, #fcfcfd); } .select2-container--open .select2-selection__arrow { transform: scaleY(-1) translateY(-13px); } .select2-results__options .select2-results__option--disabled:first-child { display: none; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #161616 !important; } .select2-container--default .select2-selection--single span.select2-selection__rendered[title*="اختر"], .select2-container--default .select2-selection--single span.select2-selection__rendered[title*="Choose"] { color: var(--Form-field-text-placeholder, #6c737f) !important; } .select2-container .select2-selection--single .select2-selection__rendered { padding-inline-start: 8px !important; padding-inline-end: 20px !important; } [dir="ltr"] .select2-container--default .select2-selection--multiple::after, [dir="ltr"] .select2-container .select2-selection--single .select2-selection__arrow::after { left: -0.5rem; } .select2-results__options { padding-inline-start: 8px !important; } .select2-results__options .select2-results__option { border-radius: 4px; } .form-check.align-items-start { flex-wrap: wrap; } .form-check.align-items-start .form-check-input { flex-shrink: 0; } .form-check.align-items-start .form-check-label { flex: 1; } .form-check.align-items-start .errorMsg { flex-basis: 100%; } .form-values h4 { font-size: var(--text-sm); font-weight: 400; margin-bottom: 0.5rem; line-height: 1.25rem; color: var(--colors-neutral-500); } .form-values .label-value, .form-values > span { font-size: var(--text-base); font-weight: 500; line-height: 1.5rem; color: var(--colors-neutral-800); } .resultVAlign .label-value { color: var(--text-neutral); } .resultVAlign .label-value.secondary { color: var(--neutral-primary); } .main-tabs, .region-buttons { display: flex; margin-bottom: 10px; } .main-tabs a, .region-buttons a { padding: 8px 14px; background: #f3f4f6; border: none; cursor: pointer; font-weight: 400; font-size: 18px; color: #161616; position: relative; } .main-tabs a.active, .region-buttons a.active { background: #0d121c; color: #fff; } .main-tabs a.active::after, .main-tabs a.active::before, .region-buttons a.active::after, .region-buttons a.active::before { content: none !important; } .main-tabs a::after, .region-buttons a::after { content: ""; position: absolute; bottom: 3px; left: 0; height: 85%; background-color: #d2d6db; width: 1px; } .main-tabs a:dir(ltr):first-child, .region-buttons a:dir(ltr):first-child { border-radius: 10px 0 0 10px; } .main-tabs a:dir(ltr):first-child::after, .region-buttons a:dir(ltr):first-child::after { content: none; } .main-tabs a:dir(ltr):last-child, .region-buttons a:dir(ltr):last-child { border-radius: 0 10px 10px 0; } .main-tabs a:dir(rtl):last-child, .region-buttons a:dir(rtl):last-child { border-radius: 10px 0 0 10px; } .main-tabs a:dir(rtl):last-child::after, .region-buttons a:dir(rtl):last-child::after { content: none; } .main-tabs a:dir(rtl):first-child, .region-buttons a:dir(rtl):first-child { border-radius: 0 10px 10px 0; } #filter-dropdown { float: right; } .custom-zoom { position: absolute; bottom: 20px; left: 20px; z-index: 100; } .custom-zoom a { display: flex; justify-content: center; align-items: center; background: #0d121c; border-radius: 100px; font-size: 28px; width: 56px; height: 56px; margin-bottom: 5px; color: #fff; cursor: pointer; } @keyframes skeleton-loading { 0% { background-position: -12.5rem 0; } 100% { background-position: calc(12.5rem + 100%) 0; } } .skeleton { background-color: #f3f3f3; background-image: linear-gradient(90deg, #f3f3f3, #eee, #f3f3f3); background-size: 12.5rem 100%; background-repeat: no-repeat; border-radius: 0.25rem; display: inline-block; line-height: 1; width: 100%; animation: skeleton-loading 1.5s ease-in-out infinite; } .skeleton-image { height: 15.625rem; width: 100%; border-radius: var(--radius-md); } .skeleton-title { height: 1.75rem; margin-bottom: 1rem; width: 80%; } .skeleton-text { height: 1rem; margin-bottom: 0.5rem; } .skeleton-text:last-child { width: 60%; } .skeleton-date { height: 0.75rem; width: 40%; margin-top: 1rem; } .media-card { min-height: 100%; display: flex; flex-direction: column; border: 0.0625rem solid var(--colors-neutral-400); border-radius: var(--radius-md); padding: 16px; transition: all 0.3s ease; } .media-card:hover { box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); transform: translateY(-0.125rem); } .media-card-title { font-weight: 700; font-size: var(--text-lg); line-height: 1.75rem; margin-bottom: 0; color: #161616 !important; } .media-card-icon { height: 15.625rem; -o-object-fit: cover; object-fit: cover; border-radius: var(--radius-md); } .media-card-icon img { width: 100%; height: 15.625rem; -o-object-fit: cover; object-fit: cover; border-radius: var(--radius-md); } .media-card-search { height: 2.5rem; } .media-card-search input { width: 100%; border-radius: var(--radius-md); color: #161616; } .media-card-search input::-moz-placeholder { color: #6c737f; } .media-card-search input::placeholder { color: #6c737f; } .media-card-search button { font-size: 1rem; color: #161616; } .media-card-description { font-weight: 400; font-size: 1rem; line-height: 1.5rem; color: #1f2a37; } .media-card-date { font-weight: 400; font-size: 0.75rem; color: #4d5761; } .media-card-action { display: flex; gap: 8px; background-color: #f3f4f6; padding: 4px 16px; color: var(--colors-neutral-900); font-weight: 500; border-radius: var(--radius-md); transition: all 0.2s ease; } .media-card-action:hover { background-color: #e5e7eb; } .dropdown .dropdown-toggle { padding: 0 var(--global-spacing-xl); transition: all 0.3s ease; display: flex; align-items: center; min-height: 2.5rem; gap: 0.25rem; padding-inline-end: 2.5rem; margin: 0 !important; color: var(--Form-field-text-filled, #161616); font-size: 1rem; font-weight: 400; line-height: 1.5rem; } .dropdown .dropdown-toggle:focus-visible { outline: 0; } .dropdown .dropdown-toggle span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dropdown .dropdown-toggle::after { top: 0.6rem; } .dropdown .dropdown-toggle.item-dropdown { min-width: 12.5rem; } @media (max-width: 48rem) { .dropdown .dropdown-toggle.item-dropdown { min-width: 100%; } } @media (max-width: 48rem) { .dropdown:has(.item-dropdown) { width: 100%; } } .filter, .filter:hover, .filter:active { background: #0d121c !important; color: #fff !important; border: none !important; } .filter::after, .filter:hover::after, .filter:active::after { filter: brightness(0) saturate(100%) invert(100%) sepia(94%) saturate(5%) hue-rotate(259deg) brightness(105%) contrast(100%) !important; } .sort.dropdown-toggle::after { display: none !important; } .sort { text-align: center; } .dropdown-animated { min-width: 100%; transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease; opacity: 0; max-height: 0; display: block; overflow: hidden; transform: translateY(-0.625rem); z-index: 1000; border: 0.0625rem solid #e5e7eb; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); } .dropdown-animated.show { opacity: 1; max-height: -moz-max-content; max-height: max-content; transform: translateY(0); overflow: auto; } .dropdown-animated .dropdown-item { transition: all 0.2s ease; } @media (max-width: 61.9988rem) { .filter-btn, .mobile-sort-toggle { color: #161616 !important; border: 0.0625rem solid #d2d6db !important; border-radius: var(--radius-md); font-size: 1rem !important; display: flex; align-items: center; justify-content: center; padding: 0; min-width: 40px; } .filter-btn { background-color: #161616 !important; color: #fff !important; } .mobile-search-group { flex-grow: 1; } .offcanvas .offcanvas-body { flex-direction: column; display: flex; } .offcanvas .close-section { display: block; text-align: end; border-bottom: 1px solid var(--colors-neutral-300); padding: var(--global-spacing-xl) var(--global-spacing-md); padding-bottom: 0; } .offcanvas .close-section .filter-sidebar__title { border: 0; margin: var(--global-spacing-lg) 0; padding: 0; text-align: start; font-size: 1.5rem; font-style: normal; font-weight: 600; line-height: 2rem; } .offcanvas .list-group { gap: var(--global-spacing-lg, 0.75rem); } .offcanvas h6 { color: var(--Form-field-text-label, #161616); font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; } .offcanvas .list-group-item { padding: var(--global-spacing-md, 0.5rem); border: 0; border-radius: 0; color: #161616; font-size: 0.875rem; font-weight: 400; line-height: 1.25rem; } .offcanvas .list-group-item.active { background-color: rgba(0, 0, 0, 0); } } @media (max-width: 992px) { .media-card { height: auto; padding: 12px; } .media-card-icon { height: 11.25rem; } .media-card-icon img { height: 11.25rem; } } .zatca-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff; z-index: 9999; } .zatca-loader--hidden { display: none; } .zatca-loader img { width: 4rem; height: 4rem; } .skeleton-loader { background-color: #f0f0f0; background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100% ); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: 4px; } .skeleton-loader.skeleton-title { height: 2rem; width: 60%; margin-bottom: 1rem; } .skeleton-loader.skeleton-text { height: 1rem; width: 80%; margin-bottom: 0.75rem; } .skeleton-loader.skeleton-btn { height: 2.5rem; width: 3.5rem; border-radius: 50%; } .skeleton-loader.skeleton-icon { height: 2.5rem; width: 2.5rem; border-radius: 50%; } .social-media-skeleton { margin-bottom: 2rem; } .social-media-skeleton.d-none { display: none !important; } .social-media-skeleton .skeleton-loader { margin-bottom: 0.5rem; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .social-actions { gap: 0.5rem; margin: 0; padding: 0; } .social-actions .social-action-btn { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.25rem; color: #212529; text-decoration: none; transition: all 0.2s ease-in-out; } .social-actions .social-action-btn:hover { background-color: #e9ecef; color: #000; } .social-actions .social-action-btn i { font-size: 1.3rem; } .social-actions .share-wrapper, .social-actions .volume-wrapper { position: relative; } .social-actions .share-wrapper:hover .share-options, .social-actions .share-wrapper:hover .audio-options, .social-actions .volume-wrapper:hover .share-options, .social-actions .volume-wrapper:hover .audio-options { opacity: 1; visibility: visible; pointer-events: auto; } .social-actions .share-wrapper .share-options, .social-actions .share-wrapper .audio-options, .social-actions .volume-wrapper .share-options, .social-actions .volume-wrapper .audio-options { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 0.5rem; margin-bottom: 0.5rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.2s ease-in-out; z-index: 1000; } .social-actions .share-wrapper .share-options::after, .social-actions .share-wrapper .audio-options::after, .social-actions .volume-wrapper .share-options::after, .social-actions .volume-wrapper .audio-options::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); border-top: 6px solid #dee2e6; } .social-actions .share-wrapper .share-options ul, .social-actions .share-wrapper .audio-options ul, .social-actions .volume-wrapper .share-options ul, .social-actions .volume-wrapper .audio-options ul { display: flex; gap: 0.5rem; } .social-actions .share-option { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: #fff; text-decoration: none; transition: all 0.2s ease-in-out; border-radius: 0.25rem; } .social-actions .share-option.facebook { background-color: #1877f2; } .social-actions .share-option.facebook:hover { background-color: rgb(11.4549180328, 95.1639344262, 203.5450819672); } .social-actions .share-option.linkedin { background-color: #0a66c2; } .social-actions .share-option.linkedin:hover { background-color: rgb(7.5, 76.5, 145.5); } .social-actions .share-option.x-twitter { background-color: #000; } .social-actions .share-option.x-twitter:hover { background-color: #333; } .social-actions .share-option i { font-size: 1.1rem; } .social-actions .audio-option { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: #212529; text-decoration: none; transition: all 0.2s ease-in-out; border-radius: 0.25rem; background-color: #f8f9fa; border: 1px solid #dee2e6; } .social-actions .audio-option:hover { background-color: #e9ecef; color: #000; } .social-actions .audio-option i { font-size: 1.1rem; } .pagination, #Paging { padding-inline-end: 0; list-style: none; border-radius: var(--radius-8); display: flex; flex-wrap: wrap; justify-content: flex-end; } @media screen and (max-width: 768px) { .pagination, #Paging { justify-content: center; } } .pagination .page-item, .pagination li, #Paging .page-item, #Paging li { margin: 0 0.25rem; } .pagination .page-item.active .page-link, .pagination .page-item#PagingSelf a, .pagination li.active .page-link, .pagination li#PagingSelf a, #Paging .page-item.active .page-link, #Paging .page-item#PagingSelf a, #Paging li.active .page-link, #Paging li#PagingSelf a { border-color: var(--main-color); font-weight: 600; color: #161616 !important; background-color: var(--white-color) !important; } .pagination .page-item.disabled .page-link, .pagination li.disabled .page-link, #Paging .page-item.disabled .page-link, #Paging li.disabled .page-link { color: var(--neutral-400); cursor: not-allowed; background-color: var(--neutral-50); border-color: rgba(0, 0, 0, 0); pointer-events: none; opacity: 0.5; } .pagination .page-link, .pagination a, #Paging .page-link, #Paging a { position: relative; display: flex; align-items: center; justify-content: center; padding: 0.5rem; margin-inline-start: -1px; color: #161616 !important; background-color: var(--white-color) !important; border: 0; border-bottom: 3px solid rgba(0, 0, 0, 0); transition: all 0.2s ease-in-out; border-radius: 0 !important; width: auto; height: auto; } .pagination .page-link:hover, .pagination a:hover, #Paging .page-link:hover, #Paging a:hover { color: var(--main-color-dark); background-color: #f3f4f6; border-radius: 5px; } .pagination .page-link--prev, .pagination .page-link--next, .pagination a--prev, .pagination a--next, #Paging .page-link--prev, #Paging .page-link--next, #Paging a--prev, #Paging a--next { font-size: 1rem; font-weight: bold; } .pagination .page-link--prev i, .pagination .page-link--next i, .pagination a--prev i, .pagination a--next i, #Paging .page-link--prev i, #Paging .page-link--next i, #Paging a--prev i, #Paging a--next i { font-size: 1rem; } .pagination .page-link--prev:hover, .pagination .page-link--next:hover, .pagination a--prev:hover, .pagination a--next:hover, #Paging .page-link--prev:hover, #Paging .page-link--next:hover, #Paging a--prev:hover, #Paging a--next:hover { border-bottom-color: rgba(0, 0, 0, 0); } @media (max-width: 576px) { .pagination .page-item { margin: 0 0.125rem; } .pagination .page-link { min-width: 2rem; height: 2rem; padding: 0.25rem; font-size: 0.875rem; } } a#PageLinkNext::before, a#PageLinkPrev::before { display: inline-block; font-family: bootstrap-icons !important; font-style: normal; font-weight: 400 !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -0.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a#PageLinkNext::before { content: ""; } a#PageLinkPrev::before { content: ""; } a#PageLinkNext span, a#PageLinkPrev span { display: none; } .nextPrev[disabled] { pointer-events: none; } .invoice-electronic { background: url(https://zatca.gov.sa/Style%20Library/GAZTinternet/new/images/electronic_invoicing-bg.png) no-repeat 50%; background-size: 100% 100%; } .invoice-electronic .new-card { height: 230px !important; } @media screen and (max-width: 600px) { .invoice-electronic .new-card { height: auto !important; } } .evaluation-card { min-height: 100%; display: flex; flex-direction: column; border: 1px solid var(--colors-neutral-400); border-radius: var(--radius-md); padding: 1rem; background-color: #fff; } .evaluation-card-title { font-size: 18px; font-weight: 700; line-height: 28px; } .evaluation-card-share { font-size: 16px; font-weight: 400; line-height: 24px; } .evaluation-card-rate { font-size: 12px; font-weight: 400; } .evaluation-card-body { flex: 1 1 auto; } .evaluation-card .star-rating { font-size: 1.2rem; line-height: 1; } .evaluation-card .star-rating i { margin-right: 2px; } .evaluation-card .star-rating .text-warning { color: #1b8354 !important; } .evaluation-card .star-rating .text-secondary { color: #6c757d !important; } [dir="rtl"] .evaluation-card .star-rating i { transform: scaleX(-1); display: inline-block; } .evaluation-card-container.slick-wrapper button { border-radius: 50%; } .evaluation-card-container.slick-wrapper button.slick-arrow { color: #fff; font-size: 18px; } .evaluation-card-container.slick-wrapper button.slick-arrow::before { content: none; } .evaluation-card-container.slick-wrapper button.slick-disabled { background-color: #e5e7eb; color: #9da4ae; } @media (max-width: 576px) { .evaluation-card-container.slick-wrapper .slick-dots { width: 75%; } } .evaluation-card-container.slick-wrapper .slick-dots li { margin: 0 5px !important; } .evaluation-card-container.slick-wrapper .slick-dots li button:before { font-size: 20px; } .live-broadcast-bar { background: #f7fdf9; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; } .live-broadcast-bar__title { color: #222; font-size: 1rem; flex-grow: 1; } .live-broadcast-bar .btn-success { min-width: 110px; background: #25935f; border-color: #25935f; } .live-broadcast-bar .btn-success:hover, .live-broadcast-bar .btn-success:focus { background: #1b8354; border-color: #1b8354; } .table-controls { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; margin-bottom: 2rem; } .table-controls .search-filter-wrapper { display: flex; gap: 1rem; width: 100%; position: relative; } .table-controls .search-input-wrapper { flex: 1; min-width: 0; } .table-controls .search-input { position: relative; width: 100%; } .table-controls .search-input .form-control { padding-inline-start: 2.5rem; } .table-controls .search-input .search-icon { position: absolute; inset-inline-start: 1rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: var(--colors-neutral-500); pointer-events: none; } .table-controls .filter-button-wrapper { flex-shrink: 0; } .table-controls .btn-filter { display: flex; align-items: center; justify-content: center; gap: var(--spacing-1); height: 2.5rem; padding: 0 var(--spacing-4); background-color: var(--colors-neutral-950); border: none; border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: 500; line-height: 1.5rem; color: var(--colors-base-white); cursor: pointer; transition: background-color 0.2s ease; } .table-controls .btn-filter svg { width: 1.5rem; height: 1.5rem; color: currentColor; } .table-controls .btn-filter .chevron-icon { width: 1.25rem; height: 1.25rem; } .table-controls .btn-filter:hover { background-color: var(--colors-neutral-900); } .table-controls .btn-filter:active { background-color: var(--colors-neutral-800); } .table-controls .btn-filter:focus { outline: none; box-shadow: 0 0 0 3px rgba(13, 18, 28, 0.2); } .pagination-wrapper { display: flex; justify-content: space-between; margin-top: 1rem; } .pagination-wrapper .dropdown .dropdown-toggle { border: 1px solid var(--colors-neutral-300); } @media screen and (max-width: 767px) { .table-controls { flex-direction: column-reverse; gap: var(--spacing-3); } .table-controls .search-input-wrapper, .table-controls .filter-button-wrapper { width: 100%; } .table-controls .btn-filter { width: 100%; } } .custom-table { border: 1px solid var(--colors-neutral-300); border-radius: var(--radius-md); overflow-x: auto; } .custom-table .table { margin-bottom: 0; } .custom-table .table .th-content { display: flex; justify-content: space-between; } .custom-table .table tbody tr { border-bottom: 1px solid var(--colors-neutral-300); } .custom-table .table tbody tr:last-child { border-bottom: none; } .custom-table .table tbody tr:has(> td:first-child .form-check-input:checked) > td { background-color: #f3fcf6; } .custom-table .table tbody tr.total td { background-color: #f9fafb; } .custom-table .table tbody tr td { border: none; border-inline-end: 1px solid var(--colors-neutral-300); } .custom-table .table tbody tr td:last-child { border-inline-end: none; } .custom-table .table tbody tr td .td-text { display: block; width: 100%; } .custom-table .table tbody tr td .td-text.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #resultsTableBody td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .table-striped td, .table-striped th { min-width: 52px; } .sort-btn { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: 0; background-color: var(--colors-neutral-100); border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background-color 0.2s ease; } .sort-btn svg { width: 1rem; height: 1rem; color: var(--colors-neutral-700); } .sort-btn:hover { background-color: var(--colors-neutral-200); } .sort-btn:active { background-color: var(--colors-neutral-300); } .sort-btn.sort-asc svg { transform: rotate(180deg); } .sort-btn.sort-desc svg { transform: rotate(0deg); } .action-btn { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; margin-inline: auto; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background-color 0.2s ease; } .action-btn svg { width: 1.25rem; height: 1.25rem; color: var(--colors-neutral-700); } [dir="rtl"] .action-btn svg { transform: rotate(180deg); } .action-btn:hover { background-color: var(--colors-neutral-200); } .action-btn:active { background-color: var(--colors-neutral-300); } .status-badge { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--spacing-2); min-height: 1.5rem; padding: 4px 1rem; border-radius: var(--radius-full); font-size: 1rem; font-weight: 500; line-height: 1.25rem; } .status-badge .status-indicator { width: 0.625rem; height: 0.625rem; border-radius: 50%; min-width: 0.625rem; min-height: 0.625rem; } .status-badge .status-text { text-align: start; } .status-badge.status-success { background-color: var(--colors-green-50); color: var(--bs-success-800); } .status-badge.status-success .status-indicator { background-color: var(--bs-success-800); } .status-badge.status-info { background-color: var(--colors-blue-50); color: var(--bs-info-800); } .status-badge.status-info .status-indicator { background-color: var(--bs-info-800); } .status-badge.status-warning { background-color: var(--colors-yellow-50); color: var(--bs-warning-800); } .status-badge.status-warning .status-indicator { background-color: var(--bs-warning-800); } .status-badge.status-danger { background-color: var(--colors-red-50); color: var(--bs-danger-800); } .status-badge.status-danger .status-indicator { background-color: var(--bs-danger-800); } @media screen and (max-width: 1024px) { .custom-table .table thead th, .custom-table .table tbody td { padding: var(--table-cell-v-padding) var(--table-cell-h-padding); } } @media screen and (max-width: 767px) { .custom-table .table thead th, .custom-table .table tbody td { padding: var(--table-cell-v-padding) var(--table-cell-h-padding); font-size: var(--text-sm); } .custom-table .table thead th { min-height: 2.5rem; } .custom-table .table thead th .th-text { font-size: var(--text-xs); } .custom-table .table tbody td { min-height: 3rem; } .status-badge { min-height: 1.25rem; } .action-btn { width: 1.75rem; height: 1.75rem; } .action-btn svg { width: 1rem; height: 1rem; } } .table-responsive { border-radius: var(--radius-md); } .table-responsive table { margin-bottom: 0; } .table-responsive thead { background-color: var(--colors-neutral-100); } .table-responsive tbody tr:last-child td { border-bottom: none; } .filter-panel { background-color: var(--colors-base-white); border: 1px solid var(--colors-neutral-300); border-radius: var(--radius-sm); position: absolute; inset-inline-end: 0; top: 3rem; z-index: 100; } .filter-panel .filter-panel-content { display: flex; flex-direction: column; max-height: 600px; overflow-y: auto; } .filter-panel .filter-section { padding: 1rem 0.5rem; border-bottom: 1px solid var(--colors-neutral-200); } .filter-panel .filter-section:last-of-type { border-bottom: none; } .filter-panel .filter-section .search-input { padding: 1rem 0; } .filter-panel .filter-label { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 1rem; } .filter-panel .filter-label .filter-label-text { font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; color: var(--colors-neutral-900); } .filter-panel .filter-label .filter-label-count { font-size: 0.875rem; font-weight: 400; line-height: 1.25rem; color: var(--colors-neutral-500); } .filter-panel .filter-options { display: flex; flex-direction: column; gap: 0.75rem; } .filter-panel .filter-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-radius: var(--radius-sm); cursor: pointer; transition: background-color 0.2s ease; } .filter-panel .filter-option:hover { background-color: var(--colors-neutral-50); } .filter-panel .filter-option .form-check-input { width: 1rem; height: 1rem; margin: 0; cursor: pointer; border: 1px solid var(--colors-neutral-500); border-radius: 0.125rem; } .filter-panel .filter-option .form-check-input:checked { background-color: var(--colors-neutral-950); border-color: var(--colors-neutral-950); } .filter-panel .filter-option .form-check-input:focus { box-shadow: 0 0 0 3px rgba(13, 18, 28, 0.1); } .filter-panel .filter-option .filter-option-label { flex: 1; display: flex; align-items: baseline; gap: 0.25rem; margin: 0; font-size: 0.875rem; font-weight: 400; line-height: 1.25rem; color: var(--colors-neutral-900); cursor: pointer; } .filter-panel .filter-option .filter-option-label .filter-option-count { color: var(--colors-neutral-500); } .filter-panel .filter-show-more { display: flex; align-items: center; justify-content: center; gap: 0.25rem; width: 100%; margin-top: 0.75rem; padding: 0.5rem 0.75rem; background-color: rgba(0, 0, 0, 0); border: none; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; color: var(--colors-neutral-900); cursor: pointer; transition: background-color 0.2s ease; text-decoration: none; } .filter-panel .filter-show-more svg { width: 1.25rem; height: 1.25rem; color: currentColor; } .filter-panel .filter-show-more:hover { background-color: var(--colors-neutral-50); color: var(--colors-primary-sa-flag-600-primary); text-decoration: none; } .filter-panel .filter-actions { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 0.5rem; border-top: 1px solid var(--colors-neutral-200); } .table-empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; } @media screen and (max-width: 767px) { .filter-panel .filter-actions { flex-direction: column; gap: 0.5rem; } } .w-4 { width: 4rem; } .toggleDirection { position: fixed; left: 1%; top: 15%; z-index: 99; } [dir="ltr"] .toggleDirection { left: initial; right: 1%; } fieldset.step { display: none; } fieldset.step.current-step { display: block; } body { overflow: initial !important; } #progressbar li.previous-step { color: var(--bs-dark); } #progressbar li.current-step:before { border-color: var(--background-primary-default); color: var(--background-primary-default); } #progressbar li.previous-step:after, #progressbar li.previous-step:before { border-color: var(--background-primary-default); background: var(--background-primary-default); color: #fff !important; } [dir="ltr"] #progressbar li:after { right: 0; left: 25px; } [dir="ltr"] #progressbar #step01 .step-text { right: 0; left: 120%; } .alert { display: flex; align-items: center; font-size: 1rem !important; font-weight: 600 !important; position: relative; border: 1px solid #d2d6db !important; border-radius: 8px; } .alert::before { font-size: 1.2rem; margin-inline-end: 0.75rem; display: inline-block; } .alert-with-title { padding: 1rem; padding-inline-start: 2.5rem; align-items: start; flex-direction: column; } .alert-with-title .alert-title { font-weight: 600; font-size: 16px; line-height: 24px; color: #1f2a37; margin-bottom: 12px; } .alert-with-title .alert-desc { font-size: 14px; line-height: 20px; font-weight: 400; color: #384250; } .alert.alert-warning { border-inline-start: 5px solid #fd7e14 !important; } .alert.alert-danger { border-inline-start: 5px solid rgba(217, 45, 32, 0.7) !important; } .alert.alert-success { border-inline-start: 5px solid #28a745 !important; } .alert.alert-question { border-inline-start: 5px solid #e5e7eb !important; } .alert.alert-info { border-inline-start: 5px solid rgba(21, 112, 239, 0.7) !important; } .alert.alert-warning { background-color: #fff; color: #1f2a37; padding-inline-start: 2.5rem; padding-inline-end: 1rem; } .alert.alert-warning::before { content: ""; display: inline-block; background-image: url("../images/alert/alert-warning.svg"); background-size: contain; background-repeat: no-repeat; width: 1.5rem; height: 1.5rem; position: absolute; left: 0.75rem; top: 50%; inset-inline-start: 0.75rem; transform: translateY(-50%); } .alert.alert-danger { background-color: #fff; color: #1f2a37; padding-inline-start: 2.5rem; padding-inline-end: 1rem; } .alert.alert-danger::before { content: ""; display: inline-block; background-image: url("../images/alert/alert-danger.svg"); background-size: contain; background-repeat: no-repeat; width: 1.5rem; height: 1.5rem; position: absolute; left: 0.75rem; top: 50%; inset-inline-start: 0.75rem; transform: translateY(-50%); } .alert.alert-success { background-color: #fff; color: #1f2a37; } .alert.alert-success::before { content: ""; display: inline-block; background-image: url("../images/alert/success.svg"); background-size: contain; background-repeat: no-repeat; width: 1.5rem; height: 1.5rem; position: absolute; left: 0.75rem; top: 50%; inset-inline-start: 0.75rem; transform: translateY(-50%); } .alert.alert-info { background-color: #fff; color: #1f2a37; } .alert.alert-info::before { content: ""; display: inline-block; background-image: url("../images/alert/alert-info.svg"); background-size: contain; background-repeat: no-repeat; width: 1.5rem; height: 1.5rem; position: absolute; left: 0.75rem; top: 50%; inset-inline-start: 0.75rem; transform: translateY(-50%); } .alert.alert-question { background-color: #fff; color: #1f2a37; } .alert.alert-question::before { content: ""; display: inline-block; background-image: url("../images/alert/alert-neutral.svg"); background-size: contain; background-repeat: no-repeat; width: 1.5rem; height: 1.5rem; position: absolute; left: 0.75rem; top: 50%; inset-inline-start: 0.75rem; transform: translateY(-50%); } .alert.alert-with-title { padding-block: 1rem !important; } .alert.alert-with-title::before { transform: none !important; top: 16px; } @media screen and (max-width: 767px) { .alert.alert-warning, .alert.alert-danger, .alert.alert-success, .alert.alert-question, .alert.alert-info { align-items: flex-start; flex-direction: column; padding: 1rem !important; padding-inline-start: 1rem !important; padding-block-start: calc(1rem - 8px) !important; overflow: clip; position: relative; border-inline-start: 1px solid #d2d6db !important; border-block-start: 0.5rem solid rgba(0, 0, 0, 0) !important; text-align: start; } .alert.alert-warning { border-block-start-color: rgba(220, 104, 3, 0.7) !important; } .alert.alert-danger { border-block-start-color: rgba(217, 45, 32, 0.7) !important; } .alert.alert-success { border-block-start-color: rgba(7, 148, 85, 0.7) !important; } .alert.alert-question { border-block-start-color: #e5e7eb !important; } .alert.alert-info { border-block-start-color: rgba(21, 112, 239, 0.7) !important; } .alert.alert-warning::before, .alert.alert-danger::before, .alert.alert-success::before, .alert.alert-question::before, .alert.alert-info::before { position: relative !important; top: auto !important; left: auto !important; inset-inline-start: auto !important; transform: none !important; width: 1.5rem !important; height: 1.5rem !important; background-size: contain; background-repeat: no-repeat; background-position: center; padding: 0.5rem; border-radius: 50%; box-sizing: content-box; display: block; margin-bottom: 1rem; } .alert.alert-warning::before { background-color: #fff8f5; } .alert.alert-danger::before { background-color: #fef3f2; } .alert.alert-success::before { background-color: #ecfdf3; } .alert.alert-question::before { background-color: #f9fafb; } .alert.alert-info::before { background-color: #eff8ff; } .alert.alert-with-title { padding: 1rem; padding-inline-start: 1rem; gap: 1rem; } .alert.alert-with-title .alert-title { font-size: 1rem; line-height: 1.5rem; width: 100%; } .alert.alert-with-title .alert-desc { font-size: 0.875rem; line-height: 1.25rem; width: 100%; } .alert .alert-actions { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; align-items: flex-end; } .alert .alert-actions .btn { width: 100%; } } .otp-modal-dialog { max-width: 37.5rem; } .otp-modal-content { border-radius: 0.5rem; box-shadow: 0px 32px 64px -12px rgba(16, 24, 40, 0.14); padding: 1.5rem; } .otp-modal-header { padding: 0 !important; border: none !important; position: relative; min-height: 2rem; } .otp-close-btn { position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; padding: 0; margin: 0 !important; background: rgba(0, 0, 0, 0); border: none; border-radius: 0.25rem; display: flex; align-items: center; justify-content: center; opacity: 1; } .otp-close-btn:hover { background-color: #f3f4f6; } .otp-close-btn::before { display: none; } .otp-close-btn svg { width: 1.25rem; height: 1.25rem; color: #111927; } .otp-modal-body { padding: 0 !important; margin-top: 0 !important; text-align: right !important; display: flex; flex-direction: column; gap: 1.5rem; } .otp-header-section { display: flex; flex-direction: column; gap: 0.5rem; } .otp-modal-title { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 700; font-size: 1.875rem; line-height: 2.375rem; color: #1f2a37; margin: 0; } .otp-modal-description { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5rem; color: #1f2a37; margin: 0; } .otp-phone-input-group { display: flex; flex-direction: column; gap: 0.5rem; } .otp-label { display: flex; gap: 0.25rem; font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; color: #111927; margin: 0; } .otp-label .required-asterisk { color: #b42318; } .otp-phone-input-wrapper { position: relative; display: flex; align-items: center; height: 2.5rem; border: 1px solid #9da4ae; border-radius: 0.25rem; background-color: #fff; } .otp-phone-input-wrapper:focus-within { border-color: #1b8354; outline: none; } .otp-phone-input { flex: 1; border: none; height: 100%; padding: 0 1rem; font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5rem; color: #384250; background: rgba(0, 0, 0, 0); } .otp-phone-input:focus { outline: none; box-shadow: none; } .otp-country-code { display: flex; align-items: center; gap: 0.25rem; padding: 0.125rem 1rem; background-color: #f3f4f6; height: 100%; border-radius: 0 0.25rem 0.25rem 0; } .otp-country-code svg { width: 1.25rem; height: 1.25rem; } .otp-country-text { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5rem; color: #111927; } .otp-verification-section { display: flex; flex-direction: column; gap: 1.5rem; } .otp-input-container { display: flex; gap: 0.5rem; max-width: 31.8125rem; } .otp-input { width: 3.4375rem; height: 2.5rem; border: 1px solid #9da4ae; border-radius: 0.25rem; text-align: center; font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5rem; color: #6c737f; background-color: #fff; box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.1); } .otp-input:focus { outline: none; border-color: #1b8354; box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.1); } .otp-input::-moz-placeholder { color: #6c737f; } .otp-input::placeholder { color: #6c737f; } .otp-timer-text { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5rem; color: #1f2a37; text-align: right; margin: 0; } .otp-timer-text strong { font-weight: 700; } .otp-modal-footer { padding: 0 !important; border: none !important; margin: 0 !important; display: flex; gap: 1rem; } .otp-btn-back { background-color: #f3f4f6; color: #111927; border: none; font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.5rem; padding: 0.5rem 1rem; height: 2.5rem; border-radius: 0.25rem; } .otp-btn-back:hover { background-color: #e5e7eb; color: #111927; } .otp-btn-confirm { background-color: #1b8354; color: #fff; border: none; font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.5rem; padding: 0.5rem 1rem; height: 2.5rem; border-radius: 0.25rem; } .otp-btn-confirm:hover { background-color: #166a45; } .notes-title { color: var(--Text-text-default, #161616); font-size: 1.25rem; font-weight: 600; line-height: 1.875rem; } @media screen and (max-width: 750px) { .modal-dialog-centered { min-width: auto !important; } .modal-body { max-height: calc(100vh - 180px); overflow-y: auto; overflow-x: hidden; } } .modal-body { text-align: start !important; } .modal.update-profile-modal { overscroll-behavior: contain; } .modal.update-profile-modal .user-profile { padding: 0.5rem 0.75rem !important; } body.modal-open { overflow: hidden !important; } html:has(body.modal-open) { overflow: hidden !important; } body.modal-open #s4-workspace, body.modal-open .dga-main-container { overflow: hidden !important; } .select-wrapper { position: relative; } .select-wrapper select { appearance: none; -webkit-appearance: none; -moz-appearance: none; } .form-select:focus { border-bottom: 2px solid #0d121c; } .select-wrapper::after { content: "▼"; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; transition: 0.2s; color: #333; } .select-wrapper.disabled::after { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5.5031%207.1294C5.60467%207.26388%205.90793%207.66534%206.08853%207.89676C6.45026%208.36027%206.94452%208.97618%207.47769%209.59026C8.01356%2010.2074%208.57648%2010.8085%209.07658%2011.2504C9.32734%2011.472%209.54762%2011.6403%209.72939%2011.7499C9.90035%2011.853%2010.0013%2011.8744%2010.0013%2011.8744C10.0013%2011.8744%2010.0994%2011.853%2010.2703%2011.7499C10.4521%2011.6403%2010.6724%2011.472%2010.9231%2011.2504C11.4232%2010.8085%2011.9861%2010.2074%2012.522%209.59025C13.0552%208.97616%2013.5494%208.36025%2013.9112%207.89673C14.0918%207.66531%2014.3946%207.26442%2014.4962%207.12994C14.7009%206.852%2015.0925%206.79206%2015.3705%206.99675C15.6484%207.20145%2015.7078%207.59269%2015.5031%207.87063L15.5015%207.87273C15.395%208.01376%2015.0809%208.42963%2014.8966%208.66577C14.5267%209.13975%2014.018%209.77384%2013.4659%2010.4098C12.9165%2011.0426%2012.3117%2011.6915%2011.7508%2012.1871C11.471%2012.4343%2011.1875%2012.6566%2010.9157%2012.8204C10.661%2012.9739%2010.3386%2013.125%209.99985%2013.125C9.66109%2013.125%209.33868%2012.9739%209.08404%2012.8204C8.81223%2012.6566%208.52866%2012.4343%208.24891%2012.1871C7.68798%2011.6915%207.08325%2011.0426%206.53382%2010.4098C5.98169%209.77386%205.473%209.13978%205.1031%208.6658C4.91871%208.42953%204.60464%208.01371%204.4983%207.87292L4.4969%207.87107C4.2922%207.59313%204.35128%207.20149%204.62922%206.99679C4.90714%206.7921%205.2984%206.85149%205.5031%207.1294Z%22%20fill%3D%22%239DA4AE%22/%3E%3C/svg%3E"); } .form-select option { background-color: #fff; color: #000; } .select-wrapper select:focus + .select-wrapper::after { content: "▲"; } .select-wrapper:focus-within::after { content: "▲"; } .select-wrapper::after { content: ""; background-image: url("../images/arrow-down.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; width: 1rem; height: 1rem; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; transition: 0.2s; } .select-wrapper:focus-within::after { content: ""; background-image: url("../images/arrow-up.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; width: 1rem; height: 1rem; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; transition: 0.2s; } .form-select:disabled { background-color: #fff; color: #9da4ae; border-color: #9da4ae; } .form-select:disabled option { color: #9da4ae; } .label-disable { color: #9da4ae; } .form-select.readonly { pointer-events: none; background-color: #fff; color: #161616; } .select-wrapper { position: relative; } *[dir="ltr"] .select-wrapper::after { right: 1rem !important; left: auto; } .select2-container--default .select2-selection--single { height: 40px !important; padding: 6px 12px; box-sizing: border-box; position: relative; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; display: flex; align-items: center; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: normal; color: #333; padding-right: 30px; flex: 1; } .select2-container .select2-selection--single .select2-selection__arrow b { display: none; } .select2-container .select2-selection--single .select2-selection__arrow { width: 30px; height: 100%; top: 0; right: 0; position: absolute; pointer-events: none; background: none !important; border: none; } .select2-container--default .select2-selection--multiple { min-height: 40px; padding: 6px 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; } .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple { position: relative; padding-left: 30px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; } .select2-container--default .select2-selection--multiple::after, .select2-container .select2-selection--single .select2-selection__arrow::after { content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.0031 7.1294C6.10467 7.26388 6.40793 7.66534 6.58853 7.89676C6.95026 8.36027 7.44452 8.97618 7.97769 9.59026C8.51356 10.2074 9.07648 10.8085 9.57658 11.2504C9.82734 11.472 10.0476 11.6403 10.2294 11.7499C10.4004 11.853 10.5013 11.8744 10.5013 11.8744C10.5013 11.8744 10.5994 11.853 10.7703 11.7499C10.9521 11.6403 11.1724 11.472 11.4231 11.2504C11.9232 10.8085 12.4861 10.2074 13.022 9.59025C13.5552 8.97616 14.0494 8.36025 14.4112 7.89673C14.5918 7.66531 14.8946 7.26442 14.9962 7.12994C15.2009 6.852 15.5925 6.79206 15.8705 6.99675C16.1484 7.20145 16.2078 7.59269 16.0031 7.87063L16.0015 7.87273C15.895 8.01376 15.5809 8.42963 15.3966 8.66577C15.0267 9.13975 14.518 9.77384 13.9659 10.4098C13.4165 11.0426 12.8117 11.6915 12.2508 12.1871C11.971 12.4343 11.6875 12.6566 11.4157 12.8204C11.161 12.9739 10.8386 13.125 10.4998 13.125C10.1611 13.125 9.83868 12.9739 9.58404 12.8204C9.31223 12.6566 9.02866 12.4343 8.74891 12.1871C8.18798 11.6915 7.58325 11.0426 7.03382 10.4098C6.48169 9.77386 5.973 9.13978 5.6031 8.6658C5.41871 8.42953 5.10464 8.01371 4.9983 7.87292L4.9969 7.87107C4.7922 7.59313 4.85128 7.20149 5.12922 6.99679C5.40714 6.7921 5.7984 6.85149 6.0031 7.1294Z' fill='%23161616'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; transition: 0.2s all ease-in-out; } .select2-container--open .select2-selection--multiple::after, .select2-container--open .select2-selection--single .select2-selection__arrow::after { transform: rotate(180deg); top: 42%; } .select2-container--disabled .select2-selection--single .select2-selection__arrow::after, .select2-container--disabled .select2-selection--multiple::after { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5.5031%207.1294C5.60467%207.26388%205.90793%207.66534%206.08853%207.89676C6.45026%208.36027%206.94452%208.97618%207.47769%209.59026C8.01356%2010.2074%208.57648%2010.8085%209.07658%2011.2504C9.32734%2011.472%209.54762%2011.6403%209.72939%2011.7499C9.90035%2011.853%2010.0013%2011.8744%2010.0013%2011.8744C10.0013%2011.8744%2010.0994%2011.853%2010.2703%2011.7499C10.4521%2011.6403%2010.6724%2011.472%2010.9231%2011.2504C11.4232%2010.8085%2011.9861%2010.2074%2012.522%209.59025C13.0552%208.97616%2013.5494%208.36025%2013.9112%207.89673C14.0918%207.66531%2014.3946%207.26442%2014.4962%207.12994C14.7009%206.852%2015.0925%206.79206%2015.3705%206.99675C15.6484%207.20145%2015.7078%207.59269%2015.5031%207.87063L15.5015%207.87273C15.395%208.01376%2015.0809%208.42963%2014.8966%208.66577C14.5267%209.13975%2014.018%209.77384%2013.4659%2010.4098C12.9165%2011.0426%2012.3117%2011.6915%2011.7508%2012.1871C11.471%2012.4343%2011.1875%2012.6566%2010.9157%2012.8204C10.661%2012.9739%2010.3386%2013.125%209.99985%2013.125C9.66109%2013.125%209.33868%2012.9739%209.08404%2012.8204C8.81223%2012.6566%208.52866%2012.4343%208.24891%2012.1871C7.68798%2011.6915%207.08325%2011.0426%206.53382%2010.4098C5.98169%209.77386%205.473%209.13978%205.1031%208.6658C4.91871%208.42953%204.60464%208.01371%204.4983%207.87292L4.4969%207.87107C4.2922%207.59313%204.35128%207.20149%204.62922%206.99679C4.90714%206.7921%205.2984%206.85149%205.5031%207.1294Z%22%20fill%3D%22%239DA4AE%22/%3E%3C/svg%3E"); } .select2-selection__choice { margin-top: 0 !important; } .select2-container .select2-search--inline .select2-search__field { height: 25px; } .custom-single-select .select2-selection__choice { width: 100%; } .custom-single-select .select2-selection__choice { background-color: rgba(0, 0, 0, 0) !important; border: none !important; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { border: none !important; } *[dir="ltr"] .select2-container--default .select2-selection--multiple::after { left: 0; right: 10px; } *[dir="ltr"] .select2-container--default.select2-container--focus .select2-selection--multiple, *[dir="ltr"] .select2-container--default .select2-selection--multiple { padding-left: 0; padding-right: 30px; } .select2-selection--single.select2-selection--multiple .select2-selection__arrow.opened { transform: rotate(180deg); } .RegRadio.fixRadio input[type="radio"] { -moz-appearance: none; appearance: none; -webkit-appearance: none; background-color: rgba(0, 0, 0, 0); border: 2px solid #ccc; border-radius: 50%; width: 18px; height: 18px; vertical-align: sub; margin-right: 10px; position: relative; cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s; z-index: 1; position: relative; } .RegRadio.fixRadio input[type="radio"]:checked::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background-color: #1b8354; border-radius: 50%; transform: translate(-50%, -50%); z-index: 2; } .RegRadio.fixRadio input[type="radio"]:hover:after { content: ""; background: #f3f4f6; width: 48px; height: 48px; display: block; position: relative; bottom: 13px; z-index: 0; border-radius: 50%; left: 13px; mix-blend-mode: color-burn; } [dir="ltr"] .RegRadio.fixRadio input[type="radio"]:hover:after { left: auto; right: 13px; } .RegRadio.fixRadio input[type="radio"]:focus-visible { outline: none; } .RegRadio.fixRadio input[type="radio"]:focus-visible:not(:hover)::after { content: ""; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; border: 2px solid var(--Border-border-black, #161616); transform: translate(-50%, -50%); pointer-events: none; } .RegRadio.fixRadio input[type="radio"]:checked:hover::before { background-color: #14573a; } .RegRadio.fixRadio input[type="radio"]:checked:hover { border-color: #14573a; } .RegRadio.fixRadio input[type="radio"]:checked { border-color: #1b8354; } .RegRadio.fixRadio input[type="radio"]:checked { color: #1b8354; font-weight: bold; } .RegRadio.fixRadio label { cursor: pointer; margin-left: 4px; padding-inline-start: 0.5rem; color: #1f2a37; font-weight: bold; } .RegRadio.fixRadio .radio-label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: pointer; font-size: 14px; } .RegRadio.fixRadio .form-helper { font-size: 0.875rem; color: #384250; margin-top: 0.25rem; margin-bottom: 0.5rem; } .RegRadio.fixRadio .form-alert { font-size: 0.875rem; color: #b42318; margin-top: 0.25rem; } .RegRadio.fixRadio #Gender_RD_block tr { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .RegRadio.fixRadio #Gender_RD_block td { display: flex; align-items: center; gap: 0.5rem; } .form-check-input[type="checkbox"]:hover:not(:active)::before { content: ""; background: #f3f4f6; width: 40px; height: 40px; display: block; position: relative; bottom: 9px; z-index: 0; border-radius: 50%; left: 9px; mix-blend-mode: darken; } [dir="ltr"] .form-check-input[type="checkbox"]:hover:not(:active)::before { left: auto; right: 9px; } .form-check-input[type="checkbox"]:focus-visible:not(:hover) { border-radius: var(--radius-2, 2px); outline: 2px solid var(--Border-border-black, #161616); outline-offset: 4px; mix-blend-mode: multiply; } .form-check-input[type="checkbox"]:checked:hover { background-color: #14573a; } .accordion-item { border-right: 0; border-left: 0; border-radius: 0 !important; } .accordion-item .fw-medium { color: var(--Text-text-display, #1f2a37); font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; } .accordion-item .accordion-body { padding: 0.5rem 1rem 1.5rem 1rem; } .icon-wrapper-secondary { width: 3rem; height: 3rem; background-color: var(--background-neutral-light); } .pref-wrapper { border-color: var(--neutral-secondary) !important; } .pref-wrapper .pref-card { border-color: var(--default) !important; } .pref-wrapper .pref-card .pref-user-info .pref-user-name { line-height: 1.875rem; } .pref-wrapper .pref-card .pref-user-info .pref-user-role { line-height: 1.25rem; color: #085d3a; } .pref-wrapper .pref-card .pref-user-info .pref-user-username { line-height: 1.5rem; color: #384250; } .pref-wrapper .pref-card .pref-last-login { color: #6c737f; line-height: 1.25rem; } .pref-wrapper .pref-card .pref-last-login span { color: var(--neutral-primary); line-height: 1.25rem; } .dga-calendar-input-wrapper { position: relative; display: inline-block; width: 100%; } .dga-calendar-input-wrapper .dga-calendar-input { width: 100%; padding-inline-end: 2.5rem; padding-inline-start: 1rem; cursor: pointer; } .dga-calendar-input__picker { position: absolute; top: calc(100% + 0.5rem); z-index: 1050; background: #fff; border: 1px solid #d2d6db; border-radius: 0.5rem; padding: 1rem; box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.18); width: 26.5rem; max-width: 100%; overflow: auto; } @media (max-width: 450px) { .dga-calendar-input__picker { padding: 0.5rem; } } [dir="rtl"] .dga-calendar-input__picker { right: 0; } [dir="ltr"] .dga-calendar-input__picker { left: 0; } .dga-calendar-input__switcher { display: flex; padding: 0.75rem; margin-bottom: 1rem; justify-content: end; } .dga-calendar-input__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .dga-calendar-input__header .dga-calendar-input__info { display: flex; align-items: center; margin-inline-start: 1rem; } .dga-calendar-input__header .dga-calendar-input__info .dropdown .btn { border: none; box-shadow: none !important; } .dga-calendar-input__header .dga-calendar-input__info .dropdown .dropdown-menu { max-height: 18rem !important; overflow-y: auto; } .dga-calendar-input__header .dga-calendar-input__month { color: var(--Text-text-default, #161616); font-size: 1rem; font-weight: 500; line-height: 1.5rem; margin: 0; } .dga-calendar-input__header .dga-calendar-input__nav { display: flex; gap: 0.25rem; } .dga-calendar-input__header .dga-calendar-input__nav a { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.25rem; transition: background-color 0.2s; } .dga-calendar-input__header .dga-calendar-input__nav a:hover { background-color: #f3f4f6; } [dir="rtl"] .dga-calendar-input__header .dga-calendar-input__nav a svg { transform: scaleX(-1); } .dga-calendar-input__table { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0.5rem; } @media (max-width: 450px) { .dga-calendar-input__table { border-spacing: 0.25; } } .dga-calendar-input__table .dga-calendar-input__days-row th { background-color: rgba(0, 0, 0, 0) !important; color: var(--text-text-tertiary, #64748b); text-align: center; font-size: 1rem; font-weight: 400 !important; line-height: 1.5rem; border: 0; } @media (max-width: 450px) { .dga-calendar-input__table .dga-calendar-input__days-row th { font-size: 0.75rem; } } .dga-calendar-input__table .dga-calendar-input__days-row th .dga-calendar-input__day-short { display: none; } @media (max-width: 450px) { .dga-calendar-input__table .dga-calendar-input__days-row th .dga-calendar-input__day-full { display: none; } .dga-calendar-input__table .dga-calendar-input__days-row th .dga-calendar-input__day-short { display: inline; } } .dga-calendar-input__table th, .dga-calendar-input__table td { padding: 0 !important; border: none; text-align: center; vertical-align: middle; width: 3rem !important; min-width: 3rem !important; max-width: 3rem !important; height: 3rem !important; } @media (max-width: 450px) { .dga-calendar-input__table th, .dga-calendar-input__table td { width: 2rem !important; height: 2rem !important; } } .dga-calendar-input__table th { background: rgba(0, 0, 0, 0); border: none; padding-bottom: 0.5rem; color: var(--text-text-tertiary, #64748b); font-size: 1rem; font-weight: 400; line-height: 1.5rem; } .dga-calendar-input__table .dga-calendar-input__cell { cursor: pointer; } .dga-calendar-input__table .dga-calendar-input__cell-num { width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; color: var(--Text-text-default, #161616); font-size: 1rem; font-weight: 400; line-height: 1.5rem; border-radius: 50%; margin: 0 auto; transition: background-color 0.2s, color 0.2s; } @media (max-width: 450px) { .dga-calendar-input__table .dga-calendar-input__cell-num { width: 2rem; height: 2rem; font-size: 0.75rem; } } .dga-calendar-input__table .dga-calendar-input__cell-num:hover { background: #e5e7eb; } .dga-calendar-input__table .dga-calendar-input__cell-num.dga-calendar-input__cell--selected { background: var(--bs-primary); color: #fff; } .dga-calendar-input__table .dga-calendar-input__cell-num.dga-calendar-input__cell--selected:hover { background: #166a45; } .dga-calendar-input__table .dga-calendar-input__cell--today .dga-calendar-input__cell-num { border: 2px solid var(--bs-primary); color: var(--bs-primary); font-weight: 700; } .dga-calendar-input__table .dga-calendar-input__cell--today .dga-calendar-input__cell-num:hover { background: #dff6e7; } .dga-calendar-input__table .dga-calendar-input__cell--today .dga-calendar-input__cell-num.dga-calendar-input__cell--selected { background: var(--bs-primary); color: #fff; border: 2px solid var(--bs-primary); font-weight: 400; } .dga-calendar-input__table .dga-calendar-input__cell--disabled { cursor: not-allowed; opacity: 0.4; } .dga-calendar-input__table .dga-calendar-input__cell--disabled .dga-calendar-input__cell-num { color: var(--text-text-tertiary, #64748b); cursor: not-allowed; pointer-events: none; } .dga-calendar-input__table .dga-calendar-input__cell--disabled .dga-calendar-input__cell-num:hover { background: rgba(0, 0, 0, 0); } .dga-calendar-input__table .dga-calendar-input__cell--other-month .dga-calendar-input__cell-num { color: #6c737f; } .dga-calendar-input__table .dga-calendar-input__cell--other-month .dga-calendar-input__cell-num:hover { background: #f3f4f6; } .calendars { border-radius: 8px; } .calendars a.calendars-cmd { width: 40px; height: 40px; } .calendars .calendars-month-year { -webkit-appearance: base-select; -moz-appearance: base-select; appearance: base-select; padding-inline-end: 10px; font-weight: 500; } .calendars .calendars-month-year:first-child::picker-icon { content: ""; } .calendars .calendars-month a { color: #161616; } @media (max-width: 380px) { .calendars-popup { padding-inline: 0 !important; max-width: 100%; width: calc(100% - 16px); margin-inline: 8px; } .calendars { zoom: 0.9; } } @media print { body * { visibility: hidden; } .show-search-results, .show-search-results * { visibility: visible; } .show-search-results { position: absolute; right: 0; top: 0; width: 100%; } .show-search-results .collapse:not(.show) { display: block; } .show-search-results .sub-title.mb4 { margin-inline-start: 2rem; } .show-search-results button { display: none !important; } @page { margin: 1cm; } .search-result-box { page-break-inside: avoid; } } .dga-main-container { flex: 1; min-width: 0; max-width: calc(100% - 327px); } @media (max-width: 991.98px) { .dga-main-container { max-width: 100%; } } .dga-nav-drawer { display: flex; flex-direction: column; width: 327px; height: 100%; background-color: var(--bs-white, white); position: relative; isolation: isolate; } .dga-nav-drawer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background-color: var(--neutral-secondary, #d2d6db); z-index: 2; } .dga-nav-drawer__user-section { display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 16px; background-color: var(--background-neutral-light, #f9fafb); border-left: 1px solid var(--neutral-secondary, #d2d6db); flex-shrink: 0; z-index: 3; } .dga-nav-drawer__user-info { display: flex; flex-direction: column; gap: 8px; width: 100%; } .dga-nav-drawer__user-header { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; width: 100%; } .dga-nav-drawer__notification { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: rgba(0, 0, 0, 0); border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; flex-shrink: 0; } .dga-nav-drawer__notification:hover { background-color: #f3f4f6; } .dga-nav-drawer__notification svg { width: 20px; height: 20px; } .dga-nav-drawer__notification-badge { position: absolute; top: -2px; right: -2px; display: flex; align-items: center; justify-content: center; height: 16px; min-width: 16px; padding: 0 4px; background-color: #d92d20; border-radius: 8px; font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 12px; font-weight: 600; line-height: 18px; color: #fff; } .dga-nav-drawer__user-name { display: flex; flex-direction: column; align-items: flex-end; } .dga-nav-drawer__user-name span { font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--display, #1f2a37); text-align: right; } .dga-nav-drawer__profile-link { display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 8px 16px; border-radius: 4px; text-decoration: none; color: var(--neutral-primary, #161616); transition: background-color 0.2s ease; } .dga-nav-drawer__profile-link:hover { background-color: #f3f4f6; color: var(--neutral-primary, #161616); text-decoration: none; } .dga-nav-drawer__profile-link span { flex: 1; font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; text-align: right; } .dga-nav-drawer__chevron { width: 16px; height: 16px; flex-shrink: 0; } .dga-nav-drawer__menu { display: flex; flex-direction: column; flex: 1; overflow-y: auto; overflow-x: hidden; background-color: var(--bs-white, white); z-index: 1; } .dga-nav-drawer__list { display: flex; flex-direction: column; padding: 16px; padding-bottom: 80px; margin: 0; list-style: none; } .dga-nav-drawer__item { position: relative; width: 100%; } .dga-nav-drawer__link { display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; width: 100%; padding: 8px 16px; border-radius: 4px; text-decoration: none; color: var(--neutral-primary, #161616); transition: background-color 0.2s ease, color 0.2s ease; } .dga-nav-drawer__link:hover { background-color: #f3f4f6; color: var(--neutral-primary, #161616); text-decoration: none; } .dga-nav-drawer__text { flex: 1; font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; text-align: right; } .dga-nav-drawer__icon { width: 16px; height: 16px; flex-shrink: 0; color: currentColor; } .dga-nav-drawer__indicator { display: none; } .dga-nav-drawer__item--active .dga-nav-drawer__link { background-color: var(--neutral-secondary, #e5e7eb); color: var(--background-primary-default, #1b8354); } .dga-nav-drawer__item--active .dga-nav-drawer__indicator { display: block; position: absolute; top: 6px; bottom: 6px; right: 0; width: 6px; background-color: var(--background-primary-default, #1b8354); border-radius: 9999px; } .dga-nav-drawer__item:not(.dga-nav-drawer__item--active) .dga-nav-drawer__link:hover { background-color: #f3f4f6; } aside { height: 100vh; max-width: 330px; border-inline-end: 1px solid var(--colors-neutral-300); } aside .links__header { padding-block: var(--spacing-4); padding-inline-start: var(--spacing-4); padding-inline-end: var(--spacing-4); background: var(--background-neutral-50); } aside .links .close-aside { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background-color: var(--colors-neutral-100); border-radius: 50%; cursor: pointer; margin-inline-start: auto; transition: background-color 0.15s ease; } aside .links .close-aside:hover { background-color: var(--colors-neutral-200); } aside .links__header-inner { display: flex; justify-content: space-between; align-items: center; margin-block-end: var(--spacing-4); } aside .links__info { text-align: right; } aside .links__title { font-size: var(--text-md); font-weight: 600; color: var(--text-default); max-width: 262px; } aside .links__code { color: var(--colors-neutral-500); font-size: var(--text-sm); font-weight: 400; } aside .links__notification img { max-width: 100%; } aside .links__status { width: -moz-fit-content; width: fit-content; background: var(--background-sucscess-50); padding: var(--spacing-2); display: flex; align-items: center; gap: var(--spacing-1) var(--spacing-3); } aside .links__status-indicator { width: 10px; height: 10px; border-radius: 50%; background: var(--colors-green-800); } aside .links__status-text { font-size: var(--text-sm); } aside .links__nav-item { position: relative; } aside .links__nav-item.selected .links__nav-link { background-color: var(--background-success-25); color: var(--text-success); } aside .links__nav-item.selected .links__nav-link .links__nav-title img { filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(1000%) hue-rotate(120deg) brightness(0.9); } aside .links__nav-item--has-submenu { position: relative; margin-block-start: 0; } aside .links__nav-item--has-submenu #profile-toggle { position: relative; padding-block: var(--spacing-3); padding-inline-start: var(--spacing-4); padding-inline-end: var(--spacing-4); transition: background 0.15s ease, color 0.15s ease; } aside .links__nav-item--has-submenu #profile-toggle::before { content: ""; display: inline-block; height: 24px; width: 0.375rem; position: absolute; inset-inline-start: 0; background-color: var(--colors-neutral-400); border-radius: 3px; opacity: 0; transition: opacity 0.15s ease; } aside .links__nav-item--has-submenu #profile-toggle:hover, aside .links__nav-item--has-submenu #profile-toggle:focus { background-color: var(--colors-neutral-100); color: var(--text-default); } aside .links__nav-item--has-submenu #profile-toggle:hover::before, aside .links__nav-item--has-submenu #profile-toggle:focus::before { opacity: 1; } aside .links__nav-link { background: none; border: none; color: var(--text-default); text-align: right; width: 100%; font-size: var(--text-md); font-weight: 500; cursor: pointer; display: block; transition: background 0.15s ease, color 0.15s ease; } aside .links__nav-link:hover { background-color: var(--colors-neutral-100); color: var(--text-success); } aside .links__nav-link.open img:last-child { transform: rotate(-180deg); } aside .links__nav-link--label { cursor: default; pointer-events: none; } aside .links__nav-link--label:hover { background: none; color: var(--text-default); } aside .links__nav-link-content { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--spacing-2); } aside .links__nav-link-content > img:last-child { width: 16px; height: 16px; -o-object-fit: contain; object-fit: contain; flex-shrink: 0; transition: transform 0.15s ease; } aside .links__nav-title { display: flex; align-items: center; gap: var(--spacing-2); font-weight: 500; font-size: var(--text-md); color: inherit; } aside .links__nav-title img { width: 20px; height: 20px; -o-object-fit: contain; object-fit: contain; flex-shrink: 0; } aside .links__nav-title span { line-height: 1.5; } aside .links__submenu { flex-direction: column; padding: var(--spacing-2) 0 !important; margin: 0 var(--spacing-4) !important; } aside .links__submenu--active { display: flex; } aside .links__menu .links__submenu--active { margin-block-end: var(--spacing-2) !important; border-block-end: 1px solid var(--colors-neutral-300); } aside .links__submenu-link { position: relative; color: var(--text-default); padding: 0 !important; padding-inline-start: var(--spacing-6) !important; padding-block: var(--spacing-2) !important; font-size: var(--text-md); font-weight: 400; display: block; text-decoration: none; line-height: 1.5; } aside .links__submenu-link::before { content: ""; display: inline-block; height: 24px; width: 0.375rem; position: absolute; inset-inline-start: 0; background-color: var(--colors-neutral-400); border-radius: 3px; opacity: 0; transition: opacity 0.15s ease; } aside .links__submenu-link:hover { background: var(--colors-neutral-100) !important; color: var(--text-default); } aside .links__submenu-link:hover::before { opacity: 1; } aside .links__submenu-link:focus { outline: 2px solid var(--colors-primary-sa-flag-600-primary); outline-offset: -2px; } aside .links__menu { display: flex; flex-direction: column; } aside .links__menu .links__nav-item .links__nav-link { position: relative; } aside .links__menu .links__nav-item .links__nav-link::before { content: ""; display: inline-block; height: 24px; width: 0.375rem; position: absolute; inset-inline-start: 0; background-color: var(--colors-neutral-400); border-radius: 3px; opacity: 0; transition: opacity 0.15s ease; } aside .links__menu .links__nav-item.selected .links__nav-link::before, aside .links__menu .links__nav-item .links__nav-link:hover::before { opacity: 1; } aside .links__menu .links__nav-link { padding-block: var(--spacing-3); padding-inline-start: var(--spacing-4); padding-inline-end: var(--spacing-4); } aside .auth-btn-group { list-style: none; } aside .auth-btn-group li { color: #000; } aside .auth-btn-group li a { display: block; padding: 0.5rem; font-weight: 500; padding-inline-start: var(--spacing-4); color: var(--neutral-primary, #161616); position: relative; } aside .auth-btn-group li a::before { content: ""; display: inline-block; height: 1.5rem; width: 0.375rem; position: absolute; inset-inline-start: 0; background-color: var(--colors-neutral-400); border-radius: 3px; opacity: 0; transition: opacity 0.15s ease; } aside .auth-btn-group li a:hover { background: var(--colors-neutral-100); } aside .auth-btn-group li a:hover::before { opacity: 1; } @media (max-width: 991.98px) { .dga-nav-drawer { width: 100%; max-width: 327px; } } @media (max-width: 575.98px) { .dga-nav-drawer { width: 100%; max-width: 100%; } } @media (max-width: 991px) { .floating-btn { position: fixed; top: 15.5rem !important; inset-inline-start: -2px; z-index: 1; align-items: center; justify-content: center; background-color: var(--colors-neutral-950); } .floating-btn:hover { background-color: var(--text-neutral) !important; } [dir="ltr"] .floating-btn img.arrow { transform: rotate(180deg); } aside.show { inset-inline-start: 0; } aside { position: fixed; top: 0; width: 85%; height: 100vh; z-index: 1001; transition: inset-inline-start 0.15s ease; inset-inline-start: -100%; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); background-color: var(--colors-base-white); } aside .links { max-width: 100%; border-inline-start: none; } } @media (max-width: 767px) { .floating-btn { top: 17.5rem !important; } } [dir="ltr"] .dga-nav-drawer::after { left: auto; right: 0; } [dir="ltr"] .dga-nav-drawer__user-section { border-left: none; border-right: 1px solid var(--neutral-secondary, #d2d6db); } [dir="ltr"] .dga-nav-drawer__user-header { flex-direction: row; } [dir="ltr"] .dga-nav-drawer__user-name { align-items: flex-start; } [dir="ltr"] .dga-nav-drawer__user-name span { text-align: left; } [dir="ltr"] .dga-nav-drawer__profile-link { flex-direction: row; } [dir="ltr"] .dga-nav-drawer__profile-link span { text-align: left; } [dir="ltr"] .dga-nav-drawer__chevron { transform: rotate(180deg); } [dir="ltr"] .dga-nav-drawer__link { flex-direction: row; } [dir="ltr"] .dga-nav-drawer__text { text-align: left; } [dir="ltr"] .dga-nav-drawer__item--active .dga-nav-drawer__indicator { right: auto; left: 0; } *[dir="ltr"] aside { border-inline-start: none; border-inline-end: 1px solid var(--colors-neutral-300); } *[dir="ltr"] .links { text-align: left; } *[dir="ltr"] .links__header { text-align: left; padding-inline-start: var(--spacing-4); padding-inline-end: var(--spacing-4); } *[dir="ltr"] .links__info { text-align: left; } *[dir="ltr"] .links__nav-link { text-align: left; } *[dir="ltr"] .links__nav-item.selected .links__nav-link { border-inline-start: none; border-inline-end: 4px solid var(--colors-green-600); } *[dir="ltr"] .links__nav-item--has-submenu #profile-toggle { padding-inline-start: var(--spacing-4); padding-inline-end: var(--spacing-4); } *[dir="ltr"] .links__submenu-link { text-align: left; padding-block: var(--spacing-2); padding-inline-start: var(--spacing-4); padding-inline-end: var(--spacing-4); } *[dir="ltr"] .links__menu .links__nav-link { padding-block: var(--spacing-3); padding-inline-start: var(--spacing-4); padding-inline-end: var(--spacing-4); } .global-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; display: none; opacity: 0; transition: opacity 0.3s ease; cursor: pointer; } .global-backdrop.show { display: block; opacity: 1; } .progress-summary .indicator { width: 10px; height: 10px; border-radius: 50%; } .progress-summary .indicator.primary { background-color: #54c08a; } .progress-summary .indicator.info { background-color: #b2ddff; } .progress-summary .indicator.danger { background-color: #fecdca; } .progress-summary .progress { height: 20px; border-radius: 10rem; } .progress-summary .progress .progress-bar { border-radius: 0; } .progress-summary .progress .progress-bar.primary { background-color: #54c08a; } .progress-summary .progress .progress-bar.info { background-color: #b2ddff; } .progress-summary .progress .progress-bar.danger { background-color: #fecdca; } .progress-summary .progress .progress-bar .progress-bar-text { font-size: 0.75rem; font-weight: bold; color: var(--neutral-primary); } .tag { height: 1.5rem; border-radius: 0.25rem; border: 1px solid rgba(0, 0, 0, 0); width: -moz-fit-content; width: fit-content; padding-inline: 1rem; text-align: center; } .tag.warning { border-color: #fedf89; background-color: #fffaeb; } .tag.warning .tag-text { color: #93370d; } .tag .tag-text { font-size: 1rem; font-weight: 500; line-height: 1.5rem; } .base-carousel .carousel-item { height: 500px; position: relative; } .base-carousel .carousel-item::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--main-color-dark); } .base-carousel .carousel-item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .base-carousel .carousel-caption { text-align: right; right: 0; left: 0; bottom: 50%; transform: translateY(50%); z-index: 2; } .base-carousel .carousel-caption h3 { margin-bottom: 1rem; opacity: 0; transform: translateY(20px); animation: slideUp 0.5s ease forwards; animation-delay: 0.2s; } .base-carousel .carousel-caption p { margin-bottom: 1.5rem; opacity: 0; transform: translateY(20px); animation: slideUp 0.5s ease forwards; animation-delay: 0.4s; } .base-carousel .carousel-caption .btn { opacity: 0; transform: translateY(20px); animation: slideUp 0.5s ease forwards; animation-delay: 0.6s; padding: 0.75rem 2rem; } .base-carousel .carousel-indicators button { width: 12px; height: 12px; border-radius: 50%; background-color: hsla(0, 0%, 100%, 0.5); border: none; margin: 0 5px; } .base-carousel .carousel-indicators button.active { background-color: var(--main-color); } .base-carousel .carousel-control-prev, .base-carousel .carousel-control-next { width: 50px; height: 50px; background-color: var(--main-color); border-radius: 4px; top: 50%; transform: translateY(-50%); z-index: 3; } .base-carousel .carousel-control-prev:hover, .base-carousel .carousel-control-next:hover { background-color: rgba(0, 0, 0, 0.8); } .vertical-navs .nav-link { color: var(--colors-neutral-500); font-size: var(--text-md--regular); position: relative; transition: all 0.3s; } .vertical-navs .nav-link::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); height: 100%; width: 5px; background-color: var(--main-color); border-radius: var(--radius-16); opacity: 0; transition: all 0.3s; } .vertical-navs .nav-link:hover, .vertical-navs .nav-link.active { color: var(--colors-neutral-800); font-weight: bold; } .vertical-navs .nav-link:hover::before, .vertical-navs .nav-link.active::before { opacity: 1; } .accordion-button::after { margin-left: unset; margin-inline-start: auto; } .nav-pills .nav-link { color: var(--colors-neutral-500); position: relative; transition: all 0.3s; } .nav-pills .nav-link::before { content: ""; position: absolute; inset-inline-start: 0; top: 97%; height: 3px; width: 50%; transform: translateX(-50%); background-color: var(--main-color); border-radius: var(--radius-16); opacity: 0; transition: all 0.3s; } .nav-pills .nav-link:hover { color: var(--colors-neutral-800); } .nav-pills .nav-link.active { background-color: rgba(0, 0, 0, 0); color: var(--colors-neutral-800); font-weight: bold; } .nav-pills .nav-link.active::before { opacity: 1; } .search-suggestions { position: absolute; z-index: 1000; background-color: var(--white-color); border: 1px solid var(--neutral-200); border-radius: var(--radius-8); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); max-height: 15rem; overflow-y: auto; margin-top: 0.25rem; top: 100%; } .search-suggestion-header { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--neutral-500); background-color: var(--neutral-50); border-bottom: 1px solid var(--neutral-100); } .search-suggestion-item { padding: 0.75rem 1rem; cursor: pointer; transition: all 0.2s ease-in-out; font-size: 0.875rem; color: var(--neutral-700); } .search-suggestion-item:hover, .search-suggestion-item.active, .search-suggestion-item.selected { background-color: var(--primary-50); color: var(--main-color); } .search-suggestion-item:not(:last-child) { border-bottom: 1px solid var(--neutral-100); } .search-suggestion-item .highlight, .search-suggestion-item .match { color: var(--main-color); font-weight: 600; } @media (max-width: 576px) { .search-suggestions { max-height: 12rem; } .search-suggestion-header { padding: 0.5rem 0.75rem; font-size: 0.75rem; } .search-suggestion-item { padding: 0.5rem 0.75rem; font-size: 0.75rem; } } .side-menu { position: absolute; top: 0; } [dir="rtl"] .side-menu { right: 0; } [dir="ltr"] .side-menu { left: 0; } .side-menu { width: 300px; background-color: var(--bs-white); box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05); height: 100%; border-right: 1px solid var(--bs-gray-200); font-family: var(--font-family-arabic); direction: rtl; } .side-menu .menu-header { padding: 1rem; border-bottom: 1px solid var(--bs-gray-200); } .side-menu .menu-header .company-title { font-size: 0.875rem; font-weight: 600; color: var(--bs-dark); display: flex; align-items: center; justify-content: space-between; } .side-menu .menu-header .company-title .badge { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 1rem; font-weight: normal; } .side-menu .menu-header .company-title .badge.badge-success { background-color: var(--bs-success-bg-subtle); color: var(--bs-success); } .side-menu .menu { list-style: none; padding: 0; margin: 0; } .side-menu .menu-item { position: relative; border-bottom: 1px solid var(--bs-gray-200); } .side-menu .menu-item.active > .menu-link { font-weight: 600; } .side-menu .menu-item.has-submenu.open .submenu { display: block; } .side-menu .menu-item.has-submenu.open .menu-arrow { transform: rotate(180deg); } .side-menu .menu-link { display: flex; align-items: center; padding: 0.75rem 1rem; color: var(--bs-dark); text-decoration: none; transition: all 0.3s ease; position: relative; font-size: 0.875rem; } .side-menu .menu-link .menu-icon { margin-left: 0.75rem; font-size: 1rem; width: 1.25rem; text-align: center; color: var(--bs-gray-600); } .side-menu .menu-link .menu-arrow { position: absolute; left: 1rem; width: 0.75rem; height: 0.75rem; transition: transform 0.3s ease; } .side-menu .menu-link .menu-arrow:before { content: ""; position: absolute; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--bs-gray-600); border-bottom: 2px solid var(--bs-gray-600); transform: rotate(45deg); } .side-menu .menu-link .menu-arrow.open { transform: rotate(180deg); } .side-menu .menu-link:hover { background-color: var(--bs-gray-100); } .side-menu .submenu { list-style: none; padding: 0; margin: 0; display: none; background-color: var(--bs-gray-100); } .side-menu .submenu-item.active > .submenu-link { font-weight: 600; } .side-menu .submenu-link { display: block; padding: 0.75rem 3rem 0.75rem 1rem; color: var(--bs-gray-700); text-decoration: none; transition: all 0.3s ease; font-size: 0.875rem; } .side-menu .submenu-link:hover { background-color: var(--bs-gray-200); } .dashboard-content { padding: 2.5rem 2rem; } @media (max-width: 768px) { .dashboard-content { padding: 1rem 0.75rem; } } .new-search-container { padding: var(--spacing-5) var(--spacing-4); border-radius: var(--radius-md); border: 1px solid var(--colors-neutral-300); margin-bottom: 1.5rem; } .tab-description { color: var(--colors-neutral-950); font-size: var(--text-base); font-style: normal; font-weight: 400; line-height: 1.5rem; margin: 1.5rem 0; } .search-result-box { padding: var(--spacing-4); border-radius: var(--radius-md); border: 1px solid var(--colors-neutral-300); } .select2-search--dropdown .select2-search__field { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4IiBmaWxsPSJub25lIj4KICA8cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIGZpbGw9IiNGNUY1RjUiLz4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTguMTI1IDBDMy42Mzc2OSAwIDAgMy42Mzc2OSAwIDguMTI1QzAgMTIuNjEyMyAzLjYzNzY5IDE2LjI1IDguMTI1IDE2LjI1QzEwLjE0MzcgMTYuMjUgMTEuOTkwNCAxNS41MTM4IDEzLjQxMTQgMTQuMjk1M0wxNi44NDk3IDE3LjczMzZDMTcuMDkzOCAxNy45Nzc3IDE3LjQ4OTUgMTcuOTc3NyAxNy43MzM2IDE3LjczMzZDMTcuOTc3NyAxNy40ODk1IDE3Ljk3NzcgMTcuMDkzOCAxNy43MzM2IDE2Ljg0OTdMMTQuMjk1MyAxMy40MTE0QzE1LjUxMzggMTEuOTkwNCAxNi4yNSAxMC4xNDM3IDE2LjI1IDguMTI1QzE2LjI1IDMuNjM3NjkgMTIuNjEyMyAwIDguMTI1IDBaTTEuMjUgOC4xMjVDMS4yNSA0LjMyODA0IDQuMzI4MDQgMS4yNSA4LjEyNSAxLjI1QzExLjkyMiAxLjI1IDE1IDQuMzI4MDQgMTUgOC4xMjVDMTUgMTEuOTIyIDExLjkyMiAxNSA4LjEyNSAxNUM0LjMyODA0IDE1IDEuMjUgMTEuOTIyIDEuMjUgOC4xMjVaIiBmaWxsPSIjMTYxNjE2Ii8+Cjwvc3ZnPg=="); background-repeat: no-repeat; background-size: 1.25rem !important; } [dir="rtl"] .select2-search--dropdown .select2-search__field { background-position: right 0.75rem center; } [dir="ltr"] .select2-search--dropdown .select2-search__field { background-position: left 0.75rem center; } .select2-search--dropdown .select2-search__field { padding-inline-start: 2.5rem !important; } .select2-results__option { font-size: 14px; padding: 8px 16px !important; color: #161616; } .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable:not( .select2-results__option--selected ) { background-color: #f3f4f6 !important; color: #161616 !important; } .select2-dropdown.select2-dropdown--below { border-radius: var(--radius-sm, 0.25rem) !important; border: 1px solid var(--Border-border-neutral-primary, #d2d6db) !important; overflow: hidden; box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03); margin-top: 0.5rem; } .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-radius: 0.25rem !important; } .select2-container--default .select2-results__option--selected { background-color: #fff !important; color: #161616 !important; } .shipment-tracker-card { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--colors-neutral-300); padding: var(--spacing-4); gap: var(--spacing-6); background-color: var(--colors-base-white); margin-bottom: 1.5rem; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .shipment-tracker-card:hover { border-color: var(--colors-neutral-400); } .shipment-tracker-card.shipment-tracker-card--disabled:hover { border-color: var(--colors-neutral-300); cursor: inherit; } .shipment-tracker-card:focus-within { border-color: var(--colors-primary-sa-flag-600-primary); box-shadow: 0 0 0 3px rgba(27, 131, 84, 0.1); } .shipment-tracker-card--disabled .shipment-tracker-card__icon { color: #9da4ae; } .shipment-tracker-card__icon { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .shipment-tracker-card__icon img { width: 100%; height: 100%; transition: transform 0.3s ease; } [data-bs-toggle="collapse"]:not(.collapsed) .shipment-tracker-card__icon img { transform: rotate(180deg); } .shipment-tracker-card__content { flex: 1 0 0; display: flex; flex-direction: column; gap: var(--spacing-2); } .shipment-tracker-card__meta { width: 100%; display: flex; padding-inline-end: var(--spacing-6); color: var(--colors-neutral-500); font-size: 0.75rem; line-height: 1; font-family: var(--font-family-arabic); } .shipment-tracker-card__header { width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-2); } .shipment-tracker-card--disabled .shipment-tracker-card__title { color: #9da4ae; } .shipment-tracker-card__title { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-2); font-size: 1.125rem; font-weight: 700; line-height: 1.75rem; color: var(--colors-neutral-950); margin: 0; font-family: var(--font-family-arabic); } .shipment-tracker-card__status-icon { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--colors-success-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .shipment-tracker-card__status-icon::before { content: ""; display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--colors-success-600); } .shipment-tracker-card__description { width: 100%; padding-inline-end: var(--spacing-6); color: var(--colors-neutral-700); font-size: var(--text-base); line-height: 1.5rem; margin: 0; font-family: var(--font-family-arabic); } .shipment-tracker-list { display: flex; flex-direction: column; gap: var(--spacing-3); } .tracker-timeline { display: flex; flex-direction: column; gap: 0; } .tracker-step { display: flex; gap: var(--spacing-2); min-height: 6.25rem; } .tracker-step--active .tracker-step__dot { border: 4px solid var(--colors-primary-sa-flag-600-primary); } .tracker-step--done .tracker-step__dot { border: 4px solid var(--colors-primary-sa-flag-600-primary); background-color: var(--colors-primary-sa-flag-600-primary); } .tracker-step--done .tracker-step__line { background-color: var(--colors-primary-sa-flag-600-primary); } .tracker-step__line-container { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; margin-top: 0.25rem; } .tracker-step__dot { width: 1rem; height: 1rem; border-radius: 50%; background-color: var(--colors-base-white); border: 2px solid var(--colors-neutral-300); flex-shrink: 0; } .tracker-step__line { width: 2px; flex-grow: 0.95; margin-top: 4px; background-color: var(--colors-neutral-300); } .tracker-step__content { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-2); padding-top: 0; } .tracker-step__title { font-size: 1rem; font-weight: 500; line-height: 1.5rem; color: var(--colors-neutral-950); margin: 0; text-align: start; font-family: var(--font-family-arabic); } .tracker-step__title-inactive { font-size: 1rem; font-weight: 400; line-height: 1.5rem; color: #161616 !important; margin: 0; text-align: start; font-family: var(--font-family-arabic); } .tracker-step__description { font-size: 0.875rem; font-weight: 400; line-height: 1.25rem; color: var(--colors-neutral-700); margin: 0; text-align: start; font-family: var(--font-family-arabic); } .tracker-step__timestamp { font-size: 0.75rem; font-weight: 400; line-height: normal; color: var(--colors-neutral-500); text-align: start; font-family: var(--font-family-arabic); } @media screen and (max-width: 767px) { .new-search-container { padding: var(--spacing-4) var(--spacing-3); } .search-result-box { padding: var(--spacing-3); } .shipment-tracker-card { padding: var(--spacing-3); } .shipment-tracker-card__title { font-size: 1rem; } .shipment-tracker-card__meta, .shipment-tracker-card__description { padding-inline-end: var(--spacing-4); } } .service-tracker-list { display: flex; flex-direction: column; gap: var(--spacing-3); } .service-tracker-card { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--colors-neutral-300); background-color: var(--colors-base-white); overflow: hidden; padding: 1rem; } .service-tracker-card:hover { background-color: var(--colors-neutral-50); } .service-tracker-card:focus { outline: none; box-shadow: inset 0 0 0 2px var(--colors-primary-sa-flag-600-primary); } .service-tracker-card__header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-6); background: none; border: none; cursor: pointer; text-align: right; transition: background-color 0.2s ease; } .service-tracker-card__header[aria-expanded="true"] .service-tracker-card__icon svg, .service-tracker-card__header[aria-expanded="true"] .service-tracker-card__icon img { transform: rotate(180deg); } .service-tracker-card__content { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-2); min-width: 0; } .service-tracker-card__content p.fw-medium { color: var(--Text-text-default, #161616); font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .service-tracker-card__content .accordion-body { padding: 40px 16px 16px 16px; } .service-tracker-card__meta { display: flex; padding-inline-start: calc(1rem + var(--spacing-2)); color: #6c737f; line-height: 1; font-size: 12px; font-weight: 400; font-family: var(--font-family-arabic); } .service-tracker-card__title-wrapper { display: flex; align-items: center; gap: var(--spacing-2); width: 100%; } .service-tracker-card__title-content { display: flex; align-items: center; gap: var(--spacing-2); flex: 1; min-width: 0; } .service-tracker-card__title { color: var(--Text-text-default, #161616); font-size: 16px; font-weight: 600; line-height: 24px; } .service-tracker-card__tag { display: inline-flex; align-items: center; padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-sm, 4px); border-radius: var(--radius-sm, 4px); border: 1px solid var(--Border-border-neutral-secondary, #e5e7eb); background: var(--Tag-tag-background-neutral-light, #f9fafb); color: var(--Tag-tag-text-neutral, #1f2a37); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; } .service-tracker-card__tag.status-released { border: 1px solid var(--Tag-tag-border-info-light, #b2ddff); background: var(--Tag-tag-background-info-light, #eff8ff); color: var(--Tag-tag-text-info, #1849a9); } .service-tracker-card__tag.status-review { border: 1px solid var(--Tag-tag-border-warning-light, #fedf89); background: var(--Tag-tag-background-warning-light, #fffaeb); color: var(--Tag-tag-text-warning, #93370d); } .service-tracker-card__tag.status-customs { border: 1px solid var(--Tag-tag-border-info-light, #b2ddff); background: var(--Tag-tag-background-info-light, #eff8ff); color: var(--Tag-tag-text-info, #1849a9); } .service-tracker-card__tag.status-accepted { border: 1px solid var(--Tag-tag-border-success-light, #abefc6); background: var(--Tag-tag-background-success-light, #ecfdf3); color: var(--Tag-tag-text-success, #085d3a); } .service-tracker-card__tag.status-returned { border: 1px solid var(--Tag-tag-border-error-light, #fecdca); background: var(--Tag-tag-background-error-light, #fef3f2); color: var(--Tag-tag-text-error, #912018); } .service-tracker-card__tag.status-appointment { border: 1px solid var(--Tag-tag-border-info-light, #b2ddff); background: var(--Tag-tag-background-info-light, #eff8ff); color: var(--Tag-tag-text-info, #1849a9); } .service-tracker-card__tag.status-arrived { border: 1px solid var(--Tag-tag-border-success-light, #abefc6); background: var(--Tag-tag-background-success-light, #ecfdf3); color: var(--Tag-tag-text-success, #085d3a); } .service-tracker-card__tag.status-arrived-returned { border: 1px solid var(--Tag-tag-border-warning-light, #fedf89); background: var(--Tag-tag-background-warning-light, #fffaeb); color: var(--Tag-tag-text-warning, #93370d); } .service-tracker-card__tag.status-examination { border: 1px solid var(--Tag-tag-border-info-light, #b2ddff); background: var(--Tag-tag-background-info-light, #eff8ff); color: var(--Tag-tag-text-info, #1849a9); } .service-tracker-card__tag.status-oga { border: 1px solid var(--Tag-tag-border-info-light, #b2ddff); background: var(--Tag-tag-background-info-light, #eff8ff); color: var(--Tag-tag-text-info, #1849a9); } .service-tracker-card__tag.status-held { border: 1px solid var(--Tag-tag-border-error-light, #fecdca); background: var(--Tag-tag-background-error-light, #fef3f2); color: var(--Tag-tag-text-error, #912018); } .service-tracker-card__tag.status-ready { border: 1px solid var(--Tag-tag-border-success-light, #abefc6); background: var(--Tag-tag-background-success-light, #ecfdf3); color: var(--Tag-tag-text-success, #085d3a); } .service-tracker-card__tag.status-pledge { border: 1px solid var(--Tag-tag-border-info-light, #b2ddff); background: var(--Tag-tag-background-info-light, #eff8ff); color: var(--Tag-tag-text-info, #1849a9); } .service-tracker-card__tag.status-partial { border: 1px solid var(--Tag-tag-border-warning-light, #fedf89); background: var(--Tag-tag-background-warning-light, #fffaeb); color: var(--Tag-tag-text-warning, #93370d); } .service-tracker-card__tag.status-released-pledge { border: 1px solid var(--Tag-tag-border-success-light, #abefc6); background: var(--Tag-tag-background-success-light, #ecfdf3); color: var(--Tag-tag-text-success, #085d3a); } .service-tracker-card__icon { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--colors-neutral-700); } .service-tracker-card__icon svg { width: 100%; height: 100%; transition: transform 0.3s ease; } .service-tracker-card__icon img { transition: transform 0.3s ease; } .current-tracker-step::before { content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3e%3ccircle cx='8' cy='8' r='6' fill='white' stroke='%231B8354' stroke-width='4'/%3e%3c/svg%3e"); display: block; width: 1rem; height: 1rem; } .done-tracker-step::before { content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3e%3cpath d='M10.2019 5.50453C10.3885 5.30097 10.3748 4.98469 10.1712 4.79809C9.96764 4.6115 9.65135 4.62525 9.46476 4.82881L6.15096 8.44386L4.85355 7.14645C4.65829 6.95119 4.34171 6.95119 4.14645 7.14645C3.95118 7.34171 3.95118 7.65829 4.14645 7.85356L5.81311 9.52022C5.90955 9.61666 6.04118 9.66951 6.17753 9.66655C6.31387 9.66359 6.44309 9.60506 6.53524 9.50453L10.2019 5.50453Z' fill='%231B8354'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.16667 14.3333C3.20863 14.3333 0 11.1247 0 7.16667C0 3.20863 3.20863 0 7.16667 0C11.1247 0 14.3333 3.20863 14.3333 7.16667C14.3333 11.1247 11.1247 14.3333 7.16667 14.3333ZM1 7.16667C1 10.5724 3.76091 13.3333 7.16667 13.3333C10.5724 13.3333 13.3333 10.5724 13.3333 7.16667C13.3333 3.76091 10.5724 1 7.16667 1C3.76091 1 1 3.76091 1 7.16667Z' fill='%231B8354'/%3e%3c/svg%3e"); display: block; width: 1rem; height: 1rem; } .disabled-tracker-step::before { content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3e%3ccircle cx='8' cy='8' r='7' fill='white' stroke='%23D2D6DB' stroke-width='2'/%3e%3c/svg%3e"); display: block; width: 1rem; height: 1rem; } .disabled-tracker-step ~ .service-tracker-card__title { color: var(--global-text-default-disabled, #9da4ae); } .service-tracker-card__body { padding: 0 var(--spacing-4) var(--spacing-4); display: flex; flex-direction: column; gap: var(--spacing-6); } .service-tracker-section { display: flex; flex-direction: column; gap: var(--spacing-4); } .service-tracker-section__title { font-size: var(--text-base); font-weight: 600; line-height: 1.5rem; color: var(--colors-neutral-950); margin: 0; font-family: var(--font-family-arabic); } .service-tracker-table { margin-bottom: 0; border-collapse: collapse; width: 100%; font-family: var(--font-family-arabic); } .service-tracker-table thead { background-color: var(--colors-neutral-50); border-bottom: 1px solid var(--colors-neutral-300); } .service-tracker-table thead th { padding: var(--spacing-3) var(--spacing-4); text-align: right; font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; color: var(--colors-neutral-700); border: none; white-space: nowrap; } .service-tracker-table tbody tr { border-bottom: 1px solid var(--colors-neutral-200); } .service-tracker-table tbody tr:nth-child(even) { background-color: var(--colors-neutral-25); } .service-tracker-table tbody tr:hover { background-color: var(--colors-neutral-50); } .service-tracker-table tbody tr:last-child { border-bottom: none; } .service-tracker-table tbody td { padding: var(--spacing-4); text-align: right; font-size: var(--text-base); line-height: 1.5rem; color: var(--colors-neutral-900); border: none; vertical-align: middle; } @media screen and (max-width: 767px) { .service-tracker-card__header { padding: var(--spacing-3); gap: var(--spacing-3); } .service-tracker-card__body { padding: 0 var(--spacing-3) var(--spacing-3); } .service-tracker-card__title { font-size: 1rem; } .service-tracker-card__meta { padding-inline-end: var(--spacing-4); font-size: 0.6875rem; } .service-tracker-card__tag { font-size: 0.75rem; padding: 0.25rem var(--spacing-2); } .service-tracker-table { font-size: 0.875rem; } .service-tracker-table thead th { padding: var(--spacing-2) var(--spacing-3); font-size: 0.75rem; } .service-tracker-table tbody td { padding: var(--spacing-3); font-size: 0.875rem; } } .service-tracker-section .table-responsive { border-radius: var(--radius-sm); border: 1px solid var(--colors-neutral-300); overflow: hidden; } .importer-info { display: flex; flex-direction: column; gap: var(--spacing-6); width: 100%; } .importer-info .accordion { border: none; gap: var(--spacing-3); display: flex; flex-direction: column; } .importer-info .accordion-item { border: 1px solid var(--colors-neutral-300); border-radius: var(--radius-sm); background-color: var(--colors-base-white); margin-bottom: 0; } .importer-info .accordion-item:not(:last-child) { margin-bottom: var(--spacing-3); } .importer-info .accordion-header { margin-bottom: 0; } .importer-info .accordion-button { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-4); background-color: rgba(0, 0, 0, 0); color: var(--colors-neutral-950); font-size: var(--text-base); font-weight: 400; line-height: 1.5rem; font-family: var(--font-family-arabic); text-align: start; border: none; box-shadow: none; } .importer-info .accordion-button:not(.collapsed) { background-color: rgba(0, 0, 0, 0); color: var(--colors-neutral-950); box-shadow: none; } .importer-info .accordion-button:not(.collapsed) .accordion-icon { transform: rotate(180deg); } .importer-info .accordion-button:focus { box-shadow: inset 0 0 0 2px var(--colors-primary-sa-flag-600-primary); border-color: rgba(0, 0, 0, 0); } .importer-info .accordion-button:hover { background-color: var(--colors-neutral-50); } .importer-info .accordion-button::after { display: none; } .importer-info .accordion-button span { flex: 1; text-align: start; } .importer-info .accordion-icon { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--colors-neutral-700); transition: transform 0.3s ease; } .importer-info .accordion-collapse { border-top: 1px solid var(--colors-neutral-200); } .importer-info .accordion-body { padding: var(--spacing-4); padding-top: var(--spacing-5); } .details-section { display: flex; flex-direction: column; gap: var(--spacing-4); width: 100%; } .details-section__title { font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; color: var(--colors-neutral-950); margin: 0; font-family: var(--font-family-arabic); text-align: start; } .details-section__content { display: flex; flex-wrap: wrap; gap: var(--spacing-6) var(--spacing-10); justify-content: flex-end; width: 100%; } .details-section__content--attachments { flex-direction: column; gap: var(--spacing-4); } .detail-item { display: flex; flex-direction: column; gap: var(--spacing-2); width: calc(50% - var(--spacing-5)); text-align: start; } .detail-item--full { width: 100%; } .detail-item__label { font-size: 0.875rem; font-weight: 400; line-height: 1.25rem; color: var(--colors-neutral-500); font-family: var(--font-family-arabic); display: block; } .detail-item__value { font-size: var(--text-base); font-weight: 500; line-height: 1.5rem; color: var(--colors-neutral-900); font-family: var(--font-family-arabic); display: block; word-wrap: break-word; } .detail-item__help-text { font-size: 0.875rem; font-weight: 400; line-height: 1.25rem; color: var(--colors-neutral-700); } .file-upload { display: flex; flex-direction: column; gap: var(--spacing-4); width: 100%; } .file-upload__label { font-size: var(--text-base); font-weight: 400; line-height: 1.5rem; color: var(--colors-neutral-950); font-family: var(--font-family-arabic); text-align: start; display: block; } .file-item { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2); background-color: var(--colors-neutral-100); border: 1px solid var(--colors-neutral-300); border-radius: var(--radius-sm); width: 100%; } .file-item__icon { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--colors-neutral-700); } .file-item__icon svg { width: 100%; height: 100%; } .file-item__close { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--colors-neutral-700); cursor: pointer; transition: color 0.2s ease; } .file-item__close:hover { color: var(--colors-neutral-950); } .file-item__close svg { width: 100%; height: 100%; } .file-item__name { flex: 1; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; color: var(--colors-neutral-950); font-family: var(--font-family-arabic); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-item__status { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; flex-shrink: 0; } .file-item__status svg { width: 100%; height: 100%; } @media screen and (max-width: 767px) { .importer-info { gap: var(--spacing-5); } .importer-info .accordion-button { padding: var(--spacing-3); gap: var(--spacing-2); font-size: 0.9375rem; } .importer-info .accordion-body { padding: var(--spacing-3); padding-top: var(--spacing-4); } .importer-info .accordion-icon { width: 0.875rem; height: 0.875rem; } .details-section { gap: var(--spacing-3); } .details-section__content { gap: var(--spacing-4) var(--spacing-6); } .detail-item { width: 100%; } .details-section__title { font-size: 0.8125rem; } .detail-item__label { font-size: 0.8125rem; } .detail-item__value { font-size: 0.9375rem; } .file-upload__label { font-size: 0.9375rem; } .file-item { padding: var(--spacing-2); } .file-item__name { font-size: 0.8125rem; } } .user-profile .indicator { background-color: var(--colors-tertiary-lavendar-500-primary); width: 3px; height: 80%; position: absolute; top: 50%; transform: translateY(-50%); } .user-profile .content .info .location-tag { width: -moz-fit-content; width: fit-content; } .user-profile .action .switch-user-btn { width: var(--spacing-8) !important; height: var(--spacing-8) !important; } .side-modal.offcanvas-end { top: 0; inset-inline-start: auto; inset-inline-end: 0; transform: translate(calc(var(--transform-direction, 1) * 100%), 0); } .side-modal.offcanvas-end.show { transform: translate(0, 0); } .icon-wrapper { width: var(--spacing-6); height: var(--spacing-6); } .service-details-wrapper { position: relative; } .service-details-wrapper:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 280px; background-color: var(--colors-primary-sa-flag-25); z-index: -1; } .service-details .service-breadcrumb nav ul { display: flex; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0; } .service-details .service-breadcrumb nav ul li { font-size: var(--text-sm); color: var(--text-display); } .service-details .service-breadcrumb nav ul li a { color: inherit; text-decoration: none; } .service-details .service-breadcrumb nav ul li a:hover { color: var(--main-color); } .service-details .service-breadcrumb nav ul li.active { color: var(--gray-color); } .service-details .service-breadcrumb nav ul li i { font-size: var(--text-xs); } .service-details .service-content h1 { font-family: var(--font-family-arabic); font-size: var(--text-2xl); font-weight: bold; color: var(--text-display); margin-bottom: var(--spacing-6); } .service-details .service-content .service-tags { margin-bottom: var(--spacing-6); } .service-details .service-content .service-tags .tag { display: inline-block; padding: var(--spacing-2) var(--spacing-4); margin-left: var(--spacing-2); border-radius: var(--radius-sm); background-color: var(--main-color); color: var(--white-color); font-size: var(--text-sm); } .service-details .service-content .service-tags .tag.tag-light { background-color: var(--colors-neutral-50); color: var(--text-display); } .service-details .service-content .service-description { margin-bottom: var(--spacing-6); } .service-details .service-content .service-description p { color: var(--text-display); font-size: var(--text-base); line-height: 1.6; } .service-details .service-content .service-links { margin-bottom: var(--spacing-8); } .service-details .service-content .service-links .link { color: var(--main-color); text-decoration: none; margin-left: var(--spacing-6); font-size: var(--text-base); } .service-details .service-content .service-links .link i { margin-left: var(--spacing-2); } .service-details .service-content .service-links .link:hover { text-decoration: underline; } .service-details .service-tabs .nav-tabs { border-bottom: 0; margin-bottom: var(--spacing-6); } .service-details .service-tabs .nav-tabs .nav-item { margin-bottom: -2px; } .service-details .service-tabs .nav-tabs .nav-link { border: none; padding: var(--spacing-3) var(--spacing-6); color: var(--text-display); position: relative; background: none; } .service-details .service-tabs .nav-tabs .nav-link.active { font-weight: 500; } .service-details .service-tabs .nav-tabs .nav-link.active:after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background-color: var(--main-color); } .service-details .service-tabs .steps-list { list-style: none; counter-reset: steps; padding: 0; } .service-details .service-tabs .steps-list li { position: relative; padding: var(--spacing-4) var(--spacing-8) var(--spacing-4) 0; font-size: var(--text-base); line-height: 1.6; color: var(--main-color); } .service-details .service-tabs .steps-list li:last-child { border-bottom: none; } .service-details .service-tabs .steps-list li:before { counter-increment: steps; content: counter(steps) "-"; position: absolute; right: 0; color: var(--main-color); font-weight: 500; } .service-details #serviceCarousel { padding: var(--spacing-6) 0; } .service-details #serviceCarousel .carousel-inner .carousel-item .row { display: flex; margin: 0 calc(var(--spacing-4) * -1); } .service-details #serviceCarousel .carousel-inner .carousel-item .row > * { flex: 0 0 25%; max-width: 25%; padding: 0 var(--spacing-4); } .service-details #serviceCarousel .carousel-inner .carousel-item .service-card { height: 100%; margin: 0; } .service-details #serviceCarousel .carousel-indicators { position: relative; margin: var(--spacing-6) 0 0; display: none; } .service-details #serviceCarousel .carousel-indicators.show-indicators { display: flex; } .service-details #serviceCarousel .carousel-indicators [data-bs-target] { width: var(--spacing-2); height: var(--spacing-2); border-radius: 50%; background-color: var(--colors-neutral-200); border: none; margin: 0 var(--spacing-1); opacity: 1; transition: all 0.3s ease; } .service-details #serviceCarousel .carousel-indicators [data-bs-target].active { background-color: var(--main-color); transform: scale(1.2); } .service-details .service-sidebar .info-card { background: var(--white-color); border-radius: var(--radius-md); padding: var(--spacing-6); border: 1px solid var(--colors-neutral-200); } .service-details .service-sidebar .info-card .info-item { padding: var(--spacing-2) 0; } .service-details .service-sidebar .info-card .info-item:first-child { padding-top: 0; } .service-details .service-sidebar .info-card .info-item:last-child { border-bottom: none; padding-bottom: 0; } .service-details .service-sidebar .info-card .info-item .title-wrapper { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: 0; } .service-details .service-sidebar .info-card .info-item .title-wrapper i { color: var(--main-color); font-size: var(--text-lg); } .service-details .service-sidebar .info-card .info-item .title-wrapper h3 { font-size: var(--text-base); font-weight: 500; color: var(--text-display); margin: 0; } .service-details .service-sidebar .info-card .info-item p { font-size: var(--text-sm); color: var(--text-display); margin: 0; } .service-details .service-sidebar .info-card .info-item .payment-methods { margin-top: 10px; } .service-details .service-sidebar .info-card .info-item .payment-methods img { height: var(--spacing-8); width: auto; } .service-details .service-sidebar .info-card .info-item .faq-link, .service-details .service-sidebar .info-card .info-item .eservice-link, .service-details .service-sidebar .info-card .info-item .ERS-link, .service-details .service-sidebar .info-card .info-item .sla-link { color: var(--main-color); text-decoration: none; font-size: var(--text-sm); } .service-details .service-sidebar .info-card .info-item .faq-link:hover, .service-details .service-sidebar .info-card .info-item .eservice-link:hover, .service-details .service-sidebar .info-card .info-item .ERS-link:hover, .service-details .service-sidebar .info-card .info-item .sla-link:hover { text-decoration: underline; } .service-details .service-sidebar .info-card .info-item .app-stores { display: flex; flex-wrap: wrap; gap: var(--spacing-2); } .service-details .service-sidebar .info-card .info-item .app-stores img { height: var(--spacing-10); width: auto; } .service-details.other-services { background-color: #f9fafb; padding: var(--spacing-6) 0; } .service-details.other-services .service-grid .row > *:first-child { margin-right: 0; } .service-details.other-services .service-grid .row .service-card { height: 100%; margin: 0; } .service-tabs .nav-tabs { border-bottom: 0; margin-bottom: var(--spacing-6); } .service-tabs .nav-tabs .nav-item { margin-bottom: -2px; } .service-tabs .nav-tabs .nav-link { border: none; padding: var(--spacing-3) var(--spacing-6); color: var(--text-display); position: relative; background: none; } .service-tabs .nav-tabs .nav-link.active { font-weight: 500; } .service-tabs .nav-tabs .nav-link.active:after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background-color: var(--main-color); } .service-tabs .steps-list { list-style: none; counter-reset: steps; padding: 0; } .service-tabs .steps-list li { position: relative; padding: var(--spacing-4) var(--spacing-8) var(--spacing-4) 0; font-size: var(--text-base); line-height: 1.6; color: var(--main-color); } .service-tabs .steps-list li:last-child { border-bottom: none; } .service-tabs .steps-list li:before { counter-increment: steps; content: counter(steps) "-"; position: absolute; right: 0; color: var(--main-color); font-weight: 500; } .eService-panel { background-color: #fff; border-radius: 8px; padding: 1rem 1.8rem; } .eService-panel-row { display: flex; justify-content: space-between; align-items: center; } .video_container { box-shadow: none; } .servicePaymentGateways { display: flex; flex-wrap: wrap; gap: 10px; } .service_details_title:after { width: 90%; } .about_service_blocks { justify-content: space-around; flex-wrap: nowrap; margin: 15px 0; } #smsService span { display: none; } #smsService span.linkActive { display: block; } #sms-yes input[type="checkbox"] { width: 24px; height: 24px; } .about-service-item.devices-block { display: none; } .withMobApps .about-service-item.devices-block { display: flex; } .content-well-srv-channels li { display: none; } .showed-xs { display: none; } .edit_mode .about-service-item.publish-date-block { width: 32%; } .paymentitems { display: flex; justify-content: space-between; width: 100%; min-width: 300px; } .paymentitems .paymentitem input[type="checkbox"] { width: 24px; height: 24px; } .servicePaymentGateways img { display: none; } .servicePaymentGateways img.activePayment { display: inline-block; } @media (max-width: 768px) { .showed-xs { display: inherit; } .service_details_title:after { content: none; } } .linksitems, .paymentitems { display: none; } .edit_mode .paymentitems { display: flex; } .edit_mode .linksitems { display: block; } body:not(.edit_mode) div#faqCat { display: none; } .linksitems, .paymentitems { display: none; } .edit_mode .paymentitems { display: flex; } .edit_mode .linksitems { display: block; } body:not(.edit_mode) div#faqCat { display: none; } .content-well-srv-channels li.linkActive { display: list-item; list-style: disc; margin: auto 2rem; } .btn-download { width: 100%; padding: var(--spacing-3); background-color: var(--colors-neutral-50); border: 1px solid var(--colors-neutral-200); color: var(--text-display); border-radius: var(--radius-sm); transition: all 0.2s; } .btn-download:hover { background-color: var(--colors-neutral-200); } .card .card-title { color: var(--text-neutral); } .media { padding: 2rem 0; background-color: var(--main-color-dark); } .media .news-header { margin-bottom: 0.75rem; } .media .news-header h2 { font-size: 1.125rem; font-weight: 600; color: var(--bs-white); margin: 0; } .media #newsCarousel { background-color: rgba(0, 0, 0, 0); border: 3px solid var(--bs-white); border-radius: 0.5rem; overflow: hidden; } .media #newsCarousel .carousel-inner { border-radius: 0.5rem; } .media #newsCarousel .news-card { background-color: rgba(0, 0, 0, 0); } .media #newsCarousel .news-card img { height: 200px; width: 100%; -o-object-fit: cover; object-fit: cover; } .media #newsCarousel .news-card .news-content { background-color: rgba(0, 0, 0, 0); padding: 1rem; text-align: right; position: absolute; bottom: 0; right: 0; left: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); } .media #newsCarousel .news-card .news-content h5 { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; line-height: 1.5; color: var(--bs-white); } .media #newsCarousel .news-card .news-content .news-meta { display: flex; justify-content: space-between; align-items: center; } .media #newsCarousel .news-card .news-content .news-meta .date { font-size: 0.75rem; color: var(--bs-white); opacity: 0.8; } .media #newsCarousel .news-card .news-content .news-meta .read-more { background-color: var(--colors-green-700); color: var(--bs-white); text-decoration: none; font-size: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 0.25rem; transition: all 0.3s ease; } .media #newsCarousel .carousel-indicators { position: absolute; bottom: 0.5rem; margin: 0; justify-content: center; } .media #newsCarousel .carousel-indicators button { width: 6px; height: 6px; border-radius: 50%; background-color: var(--bs-white); border: none; margin: 0 3px; opacity: 0.5; } .media #newsCarousel .carousel-indicators button.active { opacity: 1; background-color: var(--bs-white); } @media (max-width: 768px) { .media { padding: 1.5rem 0; } .media .news-card .news-content { padding: 0.75rem; } .media .news-card .news-content h5 { font-size: 0.75rem; } } .hero-slider .carousel-item { height: 600px; overflow: hidden; position: relative; } .hero-slider .carousel-item::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); z-index: 1; } .hero-slider .carousel-item .slider-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .hero-slider .carousel-item .carousel-caption { position: absolute; z-index: 2; transform: translateY(-50%); top: 50%; right: 0; left: 0; text-align: start; bottom: auto; padding: 0 4rem; } .hero-slider .carousel-item .carousel-caption h2 { font-size: 3.5rem; font-weight: 700; margin-bottom: 1rem; color: #fff; } @media (max-width: 992px) { .hero-slider .carousel-item .carousel-caption h2 { font-size: 2rem; } } .hero-slider .carousel-item .carousel-caption p { font-size: 1.25rem; margin-bottom: 2rem; color: hsla(0, 0%, 100%, 0.9); max-width: 500px; } .hero-slider .carousel-item .carousel-caption .btn { font-size: 0.875rem; padding: 0.75rem 2rem; background-color: #fff; color: #000; border: none; border-radius: 5px; font-weight: 500; transition: all 0.3s ease; } .hero-slider .carousel-item .carousel-caption .btn:hover { background-color: var(--main-color); color: #fff; } .hero-slider .carousel-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 8px; } .hero-slider .carousel-dots .dot { width: 10px; height: 10px; border-radius: 50%; background-color: hsla(0, 0%, 100%, 0.5); cursor: pointer; transition: all 0.3s ease; } .hero-slider .carousel-dots .dot.active { background-color: var(--main-color); transform: scale(1.2); } .hero-slider .carousel-control-prev, .hero-slider .carousel-control-next { z-index: 3; width: 5%; } .services-section { padding: 3rem 0; background-color: var(--bs-white); } .services-section .section-header { margin-bottom: 1.5rem; } .services-section .section-header .btn { color: var(--bs-dark); } .services-section .section-header h2 { font-size: 1.75rem; font-weight: 600; color: var(--bs-dark); margin: 0; } .services-section .card { border-color: #d2d6db; padding-bottom: 20px; } .services-section .card .card-header h2 { font-weight: 700; } .services-section .card .card-body { padding: 1rem 1.5rem 1.5rem; justify-content: flex-start; } .services-section .card .card-body ul { margin: 0; padding: 0; list-style: none; } .services-section .card .card-body ul li { margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--bs-gray-200); } .services-section .card .card-body ul li:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; } .services-section .card .card-body ul li a { color: var(--main-color); display: flex; align-items: center; text-decoration: none; font-size: 0.9375rem; transition: color 0.2s ease; line-height: 1.5; justify-content: space-between; } .services-section .card .card-body ul li a:hover { color: var(--bs-success); } .services-section .card .card-body ul li a i { font-size: 0.875rem; color: var(--bs-success); margin-right: 0.5rem; } .services-section .card .see-all { text-align: end; padding: 0 1.5rem; } @media (max-width: 992px) { .services-section .card { margin-bottom: 1.5rem; } .services-section .section-header h2 { font-size: 1.5rem; } } @media (max-width: 768px) { .services-section .section-header h2 { font-size: 1.25rem; } } .services-cards { padding: 3rem 0; margin-bottom: 2rem; } .services-cards .service-card { background-color: var(--bs-white); border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1.5rem; height: 100%; position: relative; transition: all 0.3s ease; } .services-cards .service-card .service-icon { width: 48px; height: 48px; background-color: rgba(25, 135, 84, 0.1); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .services-cards .service-card .service-icon i { font-size: 1.5rem; color: var(--colors-green-700); } .services-cards .service-card h3 { font-size: 1.125rem; font-weight: 600; color: var(--bs-dark); margin-bottom: 0.75rem; } .services-cards .service-card p { font-size: 0.875rem; color: var(--bs-gray-600); line-height: 1.5; margin-bottom: 2rem; } .services-cards .service-card .read-more { position: absolute; bottom: 1.5rem; right: 1.5rem; color: var(--colors-green-700); text-decoration: none; } .services-cards .service-card .read-more i { font-size: 1.25rem; } .services-cards .service-card:hover { border-color: var(--colors-green-700); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } @media (max-width: 768px) { .services-cards .service-card { margin-bottom: 1rem; } .services-cards .service-card h3 { font-size: 1rem; } .services-cards .service-card p { font-size: 0.875rem; margin-bottom: 1.5rem; } } .zakat-evasion { padding: 3rem 0; background-color: var(--colors-primary-sa-flag-100); } .zakat-evasion h2 { color: var(--main-color); font-weight: 600; } .zakat-evasion P { color: var(--colors-alpha-alpha-black-100); font-weight: 400; } .zakat-evasion .card h2 { color: var(--colors-alpha-alpha-black-100); } .statistics { padding: 2.5rem 0; background-color: var(--colors-neutral-50); } .statistics h2 { color: var(--bs-dark); font-weight: 600; margin-bottom: 3rem; } .statistics .sub-head-section { color: var(--bs-dark); } .statistics .row > div:last-child .stat-card { border-inline-end: none; } .statistics .stat-card { padding: 2rem; } .statistics .stat-card .icon-wrapper { width: 40px; height: 40px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border-radius: 50%; background-color: #f3fcf6; color: var(--colors-base-black); } .statistics .stat-card .stat-value { font-weight: 400; color: #14573a; margin-bottom: 1rem; font-size: 3rem; } @media (max-width: 576px) { .statistics .stat-card .stat-value { font-size: 2.2rem; } } .statistics .stat-card .stat-label { color: var(--colors-neutral-800); font-size: 1rem; } .journey-cards { padding: 2.5rem 0; background-color: #fff; } .journey-cards .icon-container { margin-left: auto; margin-right: 0; font-size: 1.5rem; } .evasionradio { position: absolute; opacity: 0; width: 0; height: 0; } .evasionReport__smallButtonWrapper { border: 2px solid #ddd; border-radius: 8px; padding: 10px; margin: 5px; cursor: pointer; transition: all 0.3s ease; } .DivTaxType.active { border-color: #007bff; background-color: rgba(0, 123, 255, 0.1); } .radio__checkmarkWrapper { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } .radio__icon img { width: 50px; height: 50px; -o-object-fit: contain; object-fit: contain; } .radio__text { font-size: 14px; text-align: center; color: #333; } .form__fieldGroup.evasionReport__choices { display: flex; justify-content: center; align-items: center; } .evasionReport__inputWrapper.taxTypeChkList { display: flex; flex-direction: column; } input.evasionradio:checked ~ span { background: var(--colors-alpha-alpha-600-primary-10); } .evasionReport__choiceSmall.DivTaxType { min-width: 140px; } label.radio__container { width: 90%; margin-inline: 10px; } .findNearest__column.form-control { height: 300px; width: 100%; } div#map-canvas { width: 100%; height: 100%; } .page-title { font-weight: 700; font-size: 30px; line-height: 38px; color: #161616; } .page-discription { font-weight: 400; font-size: 16px; line-height: 24px; color: #161616; } .page-sub-title { font-weight: 700; font-size: 20px; line-height: 32px; color: #161616; } .page-hyperlink, .page-hyperlink:hover, .page-hyperlink:active { font-size: 16px; line-height: 24px; font-weight: 500; color: #161616; } .page-hyperlink:hover, .page-hyperlink:hover:hover, .page-hyperlink:active:hover { text-decoration: underline; } .gm-style .gm-style-iw-c { display: block !important; background-color: #1b8f3f; padding: 0; } .gm-style-iw-d { overflow: auto !important; } button.gm-ui-hover-effect { width: 48px !important; height: 48px !important; top: auto !important; right: auto !important; } button.gm-ui-hover-effect span { background-color: #fff !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22/%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22/%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22/%3E%3C/svg%3E") !important; } .gm-style .gm-style-iw-tc::after { background: #1b8f3f !important; } .gm-style-iw-chr { position: absolute; right: 0; left: 0; } .social-media-btn.linkedIn { position: relative; top: -2px; } .login-screens-main-wrapper .calc-height-vh { min-height: calc(100vh - 47px); } @media (max-width: 991.98px) { .login-screens-main-wrapper .calc-height-vh { min-height: calc(100vh - 170px); } } .login-screens-main-wrapper .login-logo-wrapper { border-bottom: 1px solid var(--colors-neutral-300); } .login-screens-main-wrapper .login-image { position: absolute; inset: 0; -o-object-fit: cover; object-fit: cover; } .login-screens-main-wrapper .login-title-main { font-size: var(--display-lg--semibold); color: var(--text-neutral); } .login-screens-main-wrapper .login-title-sub { color: var(--text-neutral); } .login-screens-main-wrapper .para { font-size: var(--text-lg--regular); color: var(--colors-neutral-800); } .login-screens-main-wrapper hr { border-color: var(--colors-neutral-300); } .login-screens-main-wrapper .login-nafath-sub-title { font-size: var(--text-md--regular); color: var(--colors-neutral-700); white-space: nowrap; } .login-screens-main-wrapper .login-nafath-sub-title hr { border-color: var(--colors-neutral-300); } .login-screens-main-wrapper .user-reset-pass, .login-screens-main-wrapper .uni-new-user { color: var(--colors-primary-sa-flag-600-primary); font-size: var(--text-md--regular); margin-bottom: var(--spacing-3); } .login-screens-main-wrapper .user-reset-pass:hover, .login-screens-main-wrapper .uni-new-user:hover { color: var(--colors-primary-sa-flag-700); } .login-screens-main-wrapper .form-label { color: var(--colors-neutral-800); font-weight: 400; } .login-screens-main-wrapper .form-control.has-icon { padding-inline-end: var(--spacing-6); } .login-screens-main-wrapper p { color: var(--colors-neutral-800); } .login-screens-main-wrapper .p-alt { color: var(--colors-neutral-500); font-size: var(--text-md--regular); } .login-screens-main-wrapper a.text-primary:hover { color: var(--colors-primary-sa-flag-400) !important; text-decoration: underline !important; } .login-screens-main-wrapper .alert { border: 1px solid var(--colors-neutral-300); border-inline-end-width: 7px; border-inline-end-style: solid; } .login-screens-main-wrapper .alert.alert-warning { border-inline-end-color: var(--colors-yellow-600); } @media (max-width: 575.98px) { .login-screens-main-wrapper .alert { border-inline-end-width: 1px; border-inline-end-color: var(--colors-neutral-300); border-block-start-width: 7px; } .login-screens-main-wrapper .alert.alert-warning { border-block-start-color: var(--colors-yellow-600); } } .login-screens-main-wrapper .sub-para { color: var(--colors-neutral-400); position: absolute; top: -36px; } .login-screens-main-wrapper .dimmed-text { color: var(--colors-neutral-400); } .login-screens-main-wrapper .otp-input { width: 55px; margin-inline: var(--spacing-1); text-align: center; } .login-screens-main-wrapper .login-content-wrapper { padding: var(--spacing-32) var(--spacing-14) var(--spacing-4); } @media (max-width: 991px) { .login-screens-main-wrapper .login-content-wrapper { padding: var(--spacing-12) var(--spacing-4); } } .login-screens-main-wrapper .login-content-wrapper form { padding-bottom: var(--spacing-0_5); } .login-screens-main-wrapper .login-content-wrapper form .req-opt { padding-inline: 1rem !important; } .login-screens-main-wrapper .login-content-wrapper form .req-opt label { font-size: 90%; color: var(--colors-neutral-800); } .login-screens-main-wrapper .login-content-wrapper form .req-opt label span { font-weight: 400; font-size: var(--text-base); color: var(--colors-neutral-800); } .login-screens-main-wrapper .login-content-wrapper form .req-opt label span::before { content: "* "; color: var(--colors-red-700); font-weight: 400; } .login-screens-main-wrapper .login-content-wrapper form .req-opt .btn-group-md { margin-top: 24px !important; } .login-screens-main-wrapper .login-content-wrapper form .form-label { font-size: 90%; color: var(--colors-neutral-800); } .login-screens-main-wrapper .login-content-wrapper form .form-label span { font-weight: 400; font-size: var(--text-base); color: var(--colors-neutral-800); } .login-screens-main-wrapper .login-content-wrapper form .form-label span::before { content: "* "; color: var(--colors-red-700); font-weight: 400; } .login-screens-main-wrapper .login-content-wrapper a { font-size: var(--text-md--regular); } .login-screens-main-wrapper .nafaz-logo { max-width: 75px; } .login-screens-main-wrapper .box-counter { width: 70px; height: 70px; border: 1px solid var(--colors-neutral-300); border-radius: var(--radius-lg); color: var(--colors-neutral-800); font-size: var(--text-2xl); } .eye-icon { position: absolute; inset-inline-end: var(--spacing-3); bottom: var(--spacing-3); } .toggle-password { position: relative; inset-inline-start: var(--spacing-3); top: 50% !important; transform: translateY(-50%) !important; z-index: 9; cursor: pointer; display: inline-block; width: 1.25rem; height: 1.25rem; } .toggle-password::after { content: ""; position: absolute; top: 50%; inset-inline-start: 0; width: 1.25rem; height: 1.25rem; background: url("../images/icons/eye-icon.svg") no-repeat center center; background-size: contain; transform: translateY(-50%) !important; pointer-events: none; transition: background-image 0.2s ease; } .toggle-password.show-password::after { background-image: url("../images/icons/eye-icon-open.svg"); } [dir="ltr"] .toggle-password { inset-inline-start: var(--spacing-3) !important; inset-inline-end: auto !important; } .form-control.has-icon { padding-inline-start: var(--spacing-10); } .p-light { color: var(--colors-neutral-500) !important; } .btn-default { background-color: var(--colors-neutral-200); color: var(--colors-neutral-400); border: 0 !important; } .btn-default:hover, .btn-default:active, .btn-default:focus { background-color: var(--colors-neutral-300) !important; color: var(--colors-neutral-800); } .btn-white { background-color: var(--colors-neutral-100); color: var(--colors-neutral-800); border: 0 !important; } .btn-white:hover, .btn-white:active, .btn-white:focus { background-color: var(--colors-neutral-100) !important; color: var(--colors-neutral-800); } .btn-white-danger { background-color: var(--colors-base-white); color: var(--colors-red-700); border: 1px solid var(--colors-red-200) !important; } .btn-white-danger:hover, .btn-white-danger:active, .btn-white-danger:focus { background-color: var(--colors-base-white); color: var(--colors-red-700); border: 1px solid var(--colors-red-200) !important; } .modal p { color: var(--colors-neutral-700); } .recaptcha-link { z-index: 1; } @media (max-width: 575.98px) { .flex-100-mob { flex: 100%; } .flex-1 { flex: 1; } } @media (min-width: 1200px) { .w-550-desktop { width: 550px; } .w-412-desktop { width: 412px; } .w-320-desktop { width: 320px; } .w-250-desktop { width: 250px; } } .login-right-side-wrapper { position: relative; min-height: 100vh; background: url("../images/right-side.jpg") no-repeat center center; background-size: cover; } .login-right-side-wrapper .gov-logo { max-width: 18.75rem; z-index: 2; } .login-right-side-wrapper .recaptcha-link { position: absolute; inset-inline-end: 0; bottom: 0; padding: var(--spacing-4); z-index: 3; } .login-right-side-wrapper .recaptcha-link img { max-width: 6.25rem; } .calc-height-vh { display: flex; flex-wrap: wrap; } .login-card__nafath-link { color: #319795; } .login-card-nafath-otp .nafath-otp-content { border-radius: var(--radius-md); border: 1px solid var(--neutral-secondary); } .otp-container { justify-content: start !important; direction: inherit !important; } .otp-container2 { justify-content: start !important; } .login-success-modal__icon { width: 40px; height: 40px; background-color: var(--colors-primary-sa-flag-100); } .error-container { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 5rem; } .error-container img { max-width: 100%; width: 458px; margin-bottom: 4rem; } .error-container h1 { font-size: 2.5rem; color: #333; margin-bottom: 10px; } .error-container p { font-size: 1.2rem; color: #666; } .error-container .btn { margin-top: 2.5rem; } .declaration-details-container { border: 1px solid #d2d6db; border-radius: 1rem; padding: 1rem; display: flex; flex-direction: column; gap: 1.5rem; } .declaration-info-grid { display: flex; flex-wrap: wrap; gap: 1.5rem 5rem; } .info-item { display: flex; flex-direction: column; gap: 0.5rem; text-align: right; width: calc(50% - 4rem); } @media screen and (max-width: 1400px) { .info-item { width: calc(50% - 2.5rem); } } @media screen and (max-width: 768px) { .info-item { width: 100%; } } .info-label { font-size: 0.875rem; font-weight: 400; line-height: 1.25rem; color: #6c737f; margin: 0; } .info-value { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; color: #111927; margin: 0; word-break: break-all; } .btn-download-declaration { background-color: #f3f4f6; border: none; border-radius: 0.25rem; padding: 0 1rem; height: 44px; display: flex; align-items: center; justify-content: center; gap: 0.25rem; cursor: pointer; align-self: flex-start; } .btn-download-declaration:hover { background-color: #e5e7eb; } .btn-download-declaration span { font-size: 1rem; font-weight: 500; line-height: 1.5rem; color: #111927; } .btn-download-declaration svg { width: 24px; height: 24px; } @media screen and (max-width: 768px) { .declaration-details-container { padding: 1rem; } .declaration-info-grid { gap: 1rem; } .btn-download-declaration { width: 100%; } } *[dir="rtl"] { direction: rtl; text-align: right; } html { font-size: 16px; } body { font-family: var(--font-family-arabic); line-height: 1.6; font-size: 16px; } .zatca-loader { align-items: center; background-color: #fff; bottom: 0; color: #002447; display: flex; flex-direction: column; justify-content: center; left: 0; position: fixed; right: 0; text-align: center; top: 0; z-index: 9999; } h1, h2, h3, h4, h5, h6, p { margin: 0; } ul { padding: unset; } a { text-decoration: none; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .horizontal-scroll { display: flex; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; gap: 1rem; padding: 1rem 0; } .horizontal-scroll::-webkit-scrollbar { display: none; } .horizontal-scroll > * { flex: 0 0 auto; width: 75%; } @media (min-width: 992px) { .horizontal-scroll > * { width: calc((100% - 6rem) / 7); } } .bg-primary { background-color: var(--main-color-dark) !important; } #contentBox { margin-left: 0; margin-right: 0; min-width: auto; } ul { margin: 0; padding: 0; } .breadcrumb { margin-top: 15px; } .breadcrumb ul { margin: 0; padding: 0; } .breadcrumb ul li { white-space: nowrap; display: flex; } .breadcrumb > ul > li > a, .breadcrumb > ul > li > span { display: none; } .breadcrumb > ul > li > ul > li > span { display: none; } .breadcrumb .s4-breadcrumb-arrowcont:before { content: "/"; display: inline-block; height: 14px; margin: 0 5px; width: 0; } .breadcrumb .ms-breadcrumbCurrentNode { color: var(--bs-breadcrumb-item-active-color); text-decoration: none; } .evasionradio { position: absolute; opacity: 0; width: 0; height: 0; } .evasionReport__smallButtonWrapper { border: 2px solid #ddd; border-radius: 8px; padding: 10px; margin: 5px; cursor: pointer; transition: all 0.3s ease; } .DivTaxType.active { border-color: #007bff; background-color: rgba(0, 123, 255, 0.1); } .radio__checkmarkWrapper { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } .radio__icon img { width: 50px; height: 50px; -o-object-fit: contain; object-fit: contain; } .radio__text { font-size: 14px; text-align: center; color: #333; } .form__fieldGroup.evasionReport__choices { display: flex; justify-content: center; align-items: center; } .evasionReport__inputWrapper.taxTypeChkList { display: flex; flex-direction: column; } input.evasionradio:checked ~ span { background: var(--colors-alpha-alpha-600-primary-10); } .evasionReport__choiceSmall.DivTaxType { min-width: 140px; } label.radio__container { width: 90%; margin-inline: 10px; } .findNearest__column.form-control { height: 300px; width: 100%; } div#map-canvas { width: 100%; height: 100%; } [dir="ltr"] .bi-chevron-left, [dir="ltr"] .bi-arrow-left { transform: scaleX(-1); } .btn-success, .btn-success:hover { color: #fff; } .border-success { border-color: var(--border-gray) !important; } .gray-bg { background-color: #f9fafb; } .flex-none { flex: none; } .animated-arrow { transition: transform 0.5s ease-in-out; } a:hover .animated-arrow { transform: translateX(-15px); } .btn-show-all { background-color: #f3f4f6; transition: all 0.33s ease-in-out; color: var(--bs-dark); display: flex; align-items: center; } .btn-show-all:hover, .btn-show-all:focus, .btn-show-all:active { color: var(--bs-dark); background-color: var(--colors-primary-sa-flag-100); } .medium { font-size: 90% !important; } .line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.4em; max-height: 2.8em; word-break: break-word; } .cookies-options { background: rgba(0, 36, 71, 0.7); bottom: 0; color: #fff; font-size: 15px; left: 0; padding: 11px 25px; position: fixed; right: 0; z-index: 9999999999; } .cookies-options .d-flex { align-items: center; flex-wrap: nowrap; justify-content: space-between; } .cookies-options a:not(.btn) { color: #fff; text-decoration: underline; } .cookies-options .btn { background: #0996d4; border-radius: 8px; color: #fff; font-size: 15px; padding: 5px 22px 5px; text-transform: capitalize; } .home-lastupdate-container .last-update { text-align: end; padding-top: var(--spacing-3) !important; padding-bottom: var(--spacing-3) !important; } .clip-half { clip-path: inset(0 0 50% 0); width: 100%; height: 200% !important; }