/* =========================
   FONTS
========================= */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap");
@import url("https://cdn.hugeicons.com/font/hgi-stroke-rounded.css");

@font-face {
  font-family: "IBMPlexSansArabic";
  src: url("/Style%20Library/LD2/ar-sa/innerfonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: "IBMPlexSansArabic";
  src: url("/Style%20Library/LD2/ar-sa/innerfonts/IBMPlexSansArabic-Medium.woff2") format("woff2");
  font-weight: 500;
}

@font-face {
  font-family: "IBMPlexSansArabic";
  src: url("/Style%20Library/LD2/ar-sa/innerfonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-weight: 600;
}

@font-face {
  font-family: "IBMPlexSansArabic";
  src: url("/Style%20Library/LD2/ar-sa/innerfonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
  font-weight: 700;
}

/* الفئة الأساسية لتفعيل خط الأيقونات وتحسين عرضه في المتصفحات. */
.hgi-stroke {
  font-family: "hgi-stroke-rounded" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* ربط أسماء الأيقونات المستخدمة في الصفحات بقيمها داخل ملف الخط المحلي. */
.hgi-stroke.hgi-arrow-down-01::before {
  content: "\3B5A";
}

.hgi-stroke.hgi-arrow-left-02::before {
  content: "\3B6B";
}

.hgi-stroke.hgi-arrow-right-02::before {
  content: "\3B7A";
}

.hgi-stroke.hgi-checkmark-circle-02::before {
  content: "\3DA7";
}

.hgi-stroke.hgi-filter::before {
  content: "\4031";
}

.hgi-stroke.hgi-home-05::before {
  content: "\415D";
}

.hgi-stroke.hgi-link-04::before {
  content: "\428C";
}

.hgi-stroke.hgi-mail-01::before {
  content: "\42EE";
}

.hgi-stroke.hgi-telephone::before {
  content: "\48B4";
}

.hgi-stroke.hgi-checkmark::before {
  content: "\2713";
  font-family: Arial, sans-serif !important;
  font-weight: 700;
}


/* 2) Font variables */
:root{
  --font-ar: "IBMPlexSansArabic", sans-serif;
}

/* =========================
   SPACING TOKENS
========================= */
:root {
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
}

/* =========================
   RADIUS
========================= */
:root {
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
}


:root {
  --colors-base-white: #ffffff;
  --colors-base-black: #161616;
  --colors-primary-sa-flag-25: #f7fdf9;
  --colors-primary-sa-flag-50: #f3fcf6;
  --colors-primary-sa-flag-100: #dff6e7;
  --colors-primary-sa-flag-200: #b8eacb;
  --colors-primary-sa-flag-300: #88d8ad;
  --colors-primary-sa-flag-400: #54c08a;
  --colors-primary-sa-flag-500-alpha-10: #25935f19;
  --colors-primary-sa-flag-500: #25935f;
  --colors-primary-sa-flag-600-primary: #1b8354;
  --colors-primary-sa-flag-700: #166a45;
  --colors-primary-sa-flag-800: #14573a;
  --colors-primary-sa-flag-900: #104631;
  --colors-primary-sa-flag-950: #092a1e;
  --colors-secondary-gold-25: #fffef7;
  --colors-secondary-gold-50: #fffef2;
  --colors-secondary-gold-100: #fffce6;
  --colors-secondary-gold-200: #fcf3bd;
  --colors-secondary-gold-300: #fae996;
  --colors-secondary-gold-400: #f7d54d;
  --colors-secondary-gold-500: #f5bd02;
  --colors-secondary-gold-600-primary: #dba102;
  --colors-secondary-gold-700: #b87b02;
  --colors-secondary-gold-800: #945c01;
  --colors-secondary-gold-900: #6e3c00;
  --colors-secondary-gold-950: #472400;
  --colors-tertiary-lavendar-25: #fefcff;
  --colors-tertiary-lavendar-50: #f9f5fa;
  --colors-tertiary-lavendar-100: #f2e9f5;
  --colors-tertiary-lavendar-200: #e1cce8;
  --colors-tertiary-lavendar-300: #ccadd9;
  --colors-tertiary-lavendar-400: #a57bba;
  --colors-tertiary-lavendar-500-primary: #80519f;
  --colors-tertiary-lavendar-600: #6d428f;
  --colors-tertiary-lavendar-700: #532d75;
  --colors-tertiary-lavendar-800: #3d1d5e;
  --colors-tertiary-lavendar-900: #281047;
  --colors-tertiary-lavendar-950: #16072e;
  --colors-neutral-25: #fcfcfd;
  --colors-neutral-50: #f9fafb;
  --colors-neutral-100: #f3f4f6;
  --colors-neutral-200: #e5e7eb;
  --colors-neutral-300: #d2d6db;
  --colors-neutral-400: #9da4ae;
  --colors-neutral-500: #6c727e;
  --colors-neutral-600: #4d5761;
  --colors-neutral-700: #384250;
  --colors-neutral-800: #1f2a37;
  --colors-neutral-900: #111927;
  --colors-neutral-950: #0c111b;
  --colors-blue-25: #f5faff;
  --colors-blue-50: #eff8ff;
  --colors-blue-100: #d1e9ff;
  --colors-blue-200: #b2ddff;
  --colors-blue-300: #84caff;
  --colors-blue-400: #53b0fd;
  --colors-blue-500: #2e90fa;
  --colors-blue-600: #156fee;
  --colors-blue-700: #175cd3;
  --colors-blue-800: #1849a9;
  --colors-blue-900: #194084;
  --colors-blue-950: #102a56;
  --colors-green-25: #f6fef9;
  --colors-green-50: #ecfdf3;
  --colors-green-100: #dcfae6;
  --colors-green-200: #abefc6;
  --colors-green-300: #75dfa6;
  --colors-green-400: #47cd89;
  --colors-green-500: #17b169;
  --colors-green-600: #069454;
  --colors-green-700: #067647;
  --colors-green-800: #085d3a;
  --colors-green-900: #074c30;
  --colors-green-950: #053321;
  --colors-yellow-25: #fffcf5;
  --colors-yellow-50: #fffaeb;
  --colors-yellow-100: #fef0c7;
  --colors-yellow-200: #fedf89;
  --colors-yellow-300: #fec84b;
  --colors-yellow-400: #fdb022;
  --colors-yellow-500: #f79009;
  --colors-yellow-600: #dc6803;
  --colors-yellow-700: #b54707;
  --colors-yellow-800: #93370c;
  --colors-yellow-900: #7a2e0e;
  --colors-yellow-950: #4e1d09;
  --colors-red-25: #fffbfa;
  --colors-red-50: #fef3f2;
  --colors-red-100: #fee4e2;
  --colors-red-200: #fecdca;
  --colors-red-300: #fca19b;
  --colors-red-400: #f97066;
  --colors-red-500: #f04437;
  --colors-red-600: #d92c20;
  --colors-red-700: #b42318;
  --colors-red-800: #912018;
  --colors-red-900: #7a2619;
  --colors-red-950: #54150c;
  --colors-gray-300: #cecfd2;
  --colors-gray-neutral-50: #f9fafb;  
  --colors-gray-neutral-200: #e5e7eb;
  --colors-gray-neutral-500: #6c737f;
  --colors-gray-neutral-600: #4d5761;
  --colors-gray-500: #667085;
  --colors-text-primary: #161b26;
  --colors-text-placeholder: #85888e;
  --colors-alpha-alpha-white-0: #ffffff00;
  --colors-alpha-alpha-white-10: #ffffff19;
  --colors-alpha-alpha-white-20: #ffffff33;
  --colors-alpha-alpha-white-30: #ffffff4c;
  --colors-alpha-alpha-white-40: #ffffff66;
  --colors-alpha-alpha-white-50: #ffffff7f;
  --colors-alpha-alpha-white-60: #ffffff99;
  --colors-alpha-alpha-white-70: #ffffffb2;
  --colors-alpha-alpha-white-80: #ffffffcc;
  --colors-alpha-alpha-white-90: #ffffffe5;
  --colors-alpha-alpha-white-100: #ffffff;
  --colors-alpha-alpha-black-0: #16161600;
  --colors-alpha-alpha-black-10: #16161619;
  --colors-alpha-alpha-black-20: #16161633;
  --colors-alpha-alpha-black-30: #1616164c;
  --colors-alpha-alpha-black-40: #16161666;
  --colors-alpha-alpha-black-50: #1616167f;
  --colors-alpha-alpha-black-60: #16161699;
  --colors-alpha-alpha-black-70: #161616b2;
  --colors-alpha-alpha-black-80: #161616cc;
  --colors-alpha-alpha-black-90: #161616e5;
  --colors-alpha-alpha-black-100: #161616;
  --colors-alpha-alpha-green-10: #1b835419;
  --colors-alpha-alpha-green-20: #1b835433;
  --colors-alpha-alpha-green-30: #1b83544c;
  --colors-alpha-alpha-green-40: #1b835466;
  --colors-alpha-alpha-green-50: #1b83547f;
  --colors-alpha-alpha-green-60: #1b835499;
  --colors-alpha-alpha-green-70: #1b8354b2;
  --colors-alpha-alpha-green-80: #1b8354cc;
  --colors-alpha-alpha-green-90: #1b8354e5;
  --colors-alpha-alpha-green-100: var(--colors-primary-sa-flag-600-primary);
  --field-border-error: #B42318;
  

  
}

:root {
  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
  --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  --shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
}

:root {
  --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-primary-disabled: var(--colors-gray-500: #667085;)
}

:root {
      --text-success: var(--colors-green-700);
      --text-info: var(--colors-blue-700);
      --background-brand-light: var(--colors-primary-sa-flag-50);
      --radius-full: 9999px;
}


/***************** New Values Added **************/

:root{
  --neutral-500: #6c737f;
  --neutral-700: #384250;
  --surface-hover: var(--colors-neutral-100);
  --radius-full: 9999px;
  --dga-font-family: var(--font-ar);
  --dga-color-bg: var(--colors-gray-neutral-50);
  --dga-color-surface: var(--colors-base-white);
  --dga-color-surface-hover: var(--colors-gray-neutral-50);
  --dga-color-primary: var(--colors-primary-sa-flag-600-primary);
  --dga-color-primary-hover: var(--colors-primary-sa-flag-700);
  --dga-color-primary-active: var(--colors-primary-sa-flag-800);
  --dga-color-primary-soft: #f0fdf4;
  --dga-color-focus: #84e1bc;
  --dga-color-title: #0d121c;
  --dga-color-text: var(--neutral-700);
  --dga-color-muted: #6b7280;
  --dga-color-strong: var(--colors-neutral-800);
  --dga-color-border: var(--colors-neutral-100);
  --dga-color-divider: var(--colors-primary-sa-flag-600-primary);
  --dga-shadow-card: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --pagination-text: var(--colors-base-black);
  --pagination-primary: var(--colors-primary-sa-flag-600-primary);
  --pagination-hover-bg: var(--colors-neutral-100);
  --pagination-focus-ring: rgba(27, 131, 84, 0.25);
  --pagination-disabled: var(--neutral-500);
  --pagination-size: 44px;
  --pagination-icon-size: 16px;
  --pagination-gap: 8px;
  --progress-completed: var(--colors-primary-sa-flag-600-primary);
  --progress-completed-hover: var(--colors-primary-sa-flag-700);
  --progress-upcoming: var(--colors-neutral-300);
  --progress-title: var(--colors-neutral-800);
  --progress-description: var(--neutral-700);
  --progress-black: var(--colors-base-black);
  --progress-white: var(--colors-base-white);
  --progress-marker-size: 32px;
  --progress-icon-size: 16px;
  --progress-line-size: 2px;
  --progress-gap: 8px;
  --progress-text-gap: 4px;
  --progress-text-offset: 16px;
  --dga-tabs-text: var(--colors-base-black);
  --dga-tabs-muted: var(--neutral-700);
  --dga-tabs-border: var(--colors-neutral-300);
  --dga-tabs-primary: var(--colors-primary-sa-flag-600-primary);
  --dga-tabs-hover: var(--colors-neutral-100);
  --dga-tabs-focus: var(--colors-base-black);
  --dga-tabs-radius: 4px;
  --dga-tabs-icon-size: 16px;
  --dga-tabs-gap: 4px;
  --dga-tabs-selector: 3px;
  color: var(--colors-neutral-800);
}


/* 3) Default (English / LTR) */
html, body{
  font-family: var(--font-ar);
  color: var(--colors-base-black) !important;
  background-color: var(--colors-neutral-50);
}

/* 4) Arabic pages (best) */
html, body :not(i[class^="fa"]):not(i[class*=" fa"]):not(.ms-qcb-glyph){
  font-family: var(--font-ar);
}



/* HugeIcons */
[class^="hi-"],
[class*=" hi-"],
[class^="hugeicon"],
[class*=" hugeicon"] {
  font-family: "HugeIcons" !important;
}
/* =========================
   TYPOGRAPHY ()
========================= */
.text-md {
  font: 400 16px/24px "IBMPlexSansArabic";
}

.text-sm {
  font: 400 14px/20px "IBMPlexSansArabic";
}

.text-xs {
  font: 400 12px/18px "IBMPlexSansArabic";
}

.text-md-bold {
  font: 700 16px/24px "IBMPlexSansArabic";
}

.text-sm-semibold {
  font: 600 14px/20px "IBMPlexSansArabic";
}


section.commuciate, section.discover, .news{
  background-color: var(--colors-primary-sa-flag-25)
}

section.bg-white {
    background-color: var(--colors-neutral-50) !important;
}

.dga-flex {
  display: flex;
}

.dga-flex-between {
  display: flex;
  justify-content: space-between;
}

.dga-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   LINKS ( DGA)
========================= */
a:not(.list-group-item) {
  color: var(--link-primary) !important;
  text-decoration: none;
}

a:hover:not(.list-group-item) {
  color: var(--link-primary-hovered) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

a:active:not(.list-group-item) {
  color: var(--link-primary-pressed) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

a:visited:not(.list-group-item) {
  color: var(--link-primary-visited) !important;
}

a:focus-visible:not(.list-group-item){
  color: var(--link-primary-focused) !important;
  outline: 2px solid #000;
  outline-offset: 2px;
}

a[aria-disabled="true"] {
  color: var(--link-primary-disabled) !important;
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.navbar-toggler:focus{
  outline: 2px solid #000;
  outline-offset: 2px;
}

/*buttons*/

.btn {
  padding-inline: 16px !important;
  font-size: 1rem;
  font-weight: 500 !important;
  line-height: 1.5rem;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  height: 40px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-kfu-solid {
  background-color: var(--link-primary);
  color: var(--colors-base-white) !important;
  border-color: var(--link-primary) !important;
}

.btn-kfu-solid:hover {
  background-color: var(--colors-primary-sa-flag-700) !important;
  border-color: var(--colors-primary-sa-flag-700) !important;
}

.btn-kfu-solid:active {
  background-color: var(--colors-primary-sa-flag-900) !important;
  border-color: var(--colors-primary-sa-flag-900) !important;
}

.btn-kfu-solid:focus-visible {
  outline: 2px solid var(--colors-base-black) !important;
  background-color: var(--link-primary) !important;
}

.btn-kfu-solid:disabled {
  background-color: var(--colors-neutral-100) !important;
  border-color: transparent !important;
  color: var(--colors-base-black) !important;
}

.btn:focus-visible {
  box-shadow: none;
}

.btn-kfu {
  background-color: var(--colors-base-white) !important;
  color: var(--colors-alpha-alpha-black-100) !important;
  border-color: #d2d6db !important;
}

.btn-kfu:hover {
  background-color: var(--colors-neutral-100) !important;
  color: var(--colors-alpha-alpha-black-100) !important;
  border-color: #c7ccd1 !important;
}

.btn-kfu:focus-visible {
  outline: 2px solid var(--colors-base-black) !important;
  background-color: var(--colors-base-white) !important;
}

.btn-gray {
  background-color: var(--colors-neutral-100) !important;
  color: var(--colors-text-primary) !important;
  border: 0 !important;
}

.btn-gray:hover {
  background-color: var(--colors-base-white) !important;
  color: var(--colors-text-primary) !important;
  border: 0 !important;
}

.btn-gray:focus-visible {
  outline: 2px solid var(--colors-base-black) !important;
  background-color: var(--colors-neutral-100) !important;
}

.dga-btn--primary-neutral--on-color{
  background-color: var(--colors-base-white);
    color: var(--colors-base-black);
}

.dga-btn--primary-neutral--on-color:hover {
   background-color: var(--colors-alpha-alpha-white-80);
   color: var(--colors-base-black);
}

.dga-btn--primary-neutral--on-color:active {
   background-color: var(--colors-alpha-alpha-white-60) !important;
   color: var(--colors-base-black) !important;
}

.dga-btn--primary-neutral--on-color:focus-visible{
  background-color: var(--colors-base-white);
    color: var(--colors-base-black);
    outline: 2px solid var(--colors-base-black) !important;
}

.container-xxl {
    max-width: 1480px;
}

/*accordion*/

.accordion-item {
  border: none !important;
margin-bottom: 0 !important;
}
.accordion-button{
  font-weight: 600;
  line-height: 24px;
  font-size: 1rem;
}

.accordion-button {
  border: none !important;
  box-shadow: none !important;
  position: relative;
  background: transparent !important;
  color: var(--colors-base-black) !important;
  border-radius: 0 !important;
}


.accordion-button::before {
  content: "";
  position: absolute;
  top: 0;
  right: 16px;
  left: 16px; 
  height: 1px;
  background-color: var(--colors-neutral-300);
}

.accordion-button:hover, .accordion-button:not(.collapsed):hover{
  background-color: var(--colors-neutral-100) !important;
      border-radius: 0 !important;
  box-shadow:none;
}
.accordion-button:active, .accordion-button:not(.collapsed):active{
  background-color: var(--colors-neutral-200) !important;
  color: var(--colors-base-black) !important;
  box-shadow:none;
}

.accordion-button:not(.collapsed){
  background-color: transparent !important;
  color: var(--colors-base-black) !important;
  box-shadow:none;
}

.accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-active-icon) !important;
}

/*accourdion focus behavior*/
.accordion-item:focus,
.accordion-item:focus-visible,
.accordion-item:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* إزالة شكل Bootstrap الافتراضي */
.accordion-button:focus {
  border-color: transparent;
  box-shadow: none;
}

/* التركيز بلوحة المفاتيح على الـ header فقط */
.accordion-button:focus-visible {
  position: relative;
  z-index: 2;

  outline: 2px solid #161616 !important;

  border-radius: 4px;
}

/*edit pages title*/
.top-24 {
    display: none !important;
}
.brown-hr {
    color: transparent !important;
        margin: 0 !important;
}

span.sub-title.fw-semibold, .container-fluid h5.mb-0 {
    font-size: 1.5rem;
    font-weight: 700 !important;
    line-height: 2.375;
}

/*hide icon nomber from ul/ol*/
/* ul{
  gap: 1rem;
  display: flex;
    flex-direction: column;
    padding-right: 2rem !important;
} */
ul.list-none{
      list-style: decimal;
    gap: 1rem;
    display: flex;
    flex-direction: column;
    padding-right: 2rem !important;
}

[dir="ltr"] ul.list-none {
  padding-right: 0;
  padding-left: 2rem !important;
}

ul.list-none li i.fa-duotone {
    display: none;
}

.d-flex .bg-number{
  display: none !important;
}

.no-decoration {
    list-style: none;
}

table strong {
    font-weight: 400;
}

.modal-header.bg-kfu.text-white {
    background-color: white !important;
    color: var(--colors-alpha-alpha-black-100) !important;
}



.modal .btn-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;

  filter: none !important;
  opacity: 1;

  --bs-btn-close-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23161616' d='M16.715 6.228a.75.75 0 0 1 1.06 0l.052.056a.75.75 0 0 1-.052 1.004l-4.536 4.535a.25.25 0 0 0 0 .354l4.536 4.536.052.056a.75.75 0 0 1-1.112 1.004l-4.536-4.536a.25.25 0 0 0-.316-.03l-.038.03-4.535 4.536a.75.75 0 0 1-1.06-1.06l4.535-4.536a.25.25 0 0 0 0-.354L6.229 7.288a.75.75 0 1 1 1.061-1.06l4.535 4.535a.25.25 0 0 0 .354 0z'/%3E%3C/svg%3E");

  background-color: transparent;
  background-image: var(--bs-btn-close-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}

.modal .btn-close:hover {
  background-color: var(--colors-neutral-100);
}

.modal .btn-close:active {
  background-color: var(--colors-neutral-200);
}

.modal .btn-close:focus-visible {
  background-color: #fff;
  outline: 2px solid var(--colors-base-black);
  box-shadow: none;
}

.modal .btn-close:focus,
.modal .btn-close:focus-visible {
  box-shadow: none;
}
/* ==========================================================================
   START: Card component styles
   Styles for card.html using the old card HTML structure.
   ========================================================================== */

/* Page background for pages that contain the old card image wrapper. */
/*body:has(.border-img) {
  min-height: 100vh;
  background-color: #f3f4f6;
}*/

/* Card box: old HTML uses Bootstrap utilities for the outer wrapper. */
.col-md-6.col-lg-4.mb-3:has(.border-img)>.border.rounded.bg-light {
  position: relative;
  height: 100%;
  min-height: 262px !important;
  overflow: hidden;
  padding: 24px 16px !important;
  border: 1px solid #edf0f2 !important;
  border-radius: 14px !important;
  background-color: var(--colors-base-white) !important;
  box-shadow: rgba(16, 24, 40, 0.1) 0px 4px 8px 2px, rgba(16, 24, 40, 0.06) 0px 2px 4px 2px !important;
  color: var(--colors-base-black);
  text-align: start;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.col-md-6.col-lg-4.mb-3:has(.border-img)>.border.rounded.bg-light:hover {
  /* border-color: #e5e7eb !important; */
  background-color: var(--colors-neutral-50) !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 10px 22px -10px rgba(16, 24, 40, 0.32), 0 3px 8px -3px rgba(16, 24, 40, 0.12);
  /* box-shadow: 0 10px 22px -10px rgba(16, 24, 40, 0.32), 0 3px 8px -3px rgba(16, 24, 40, 0.12); */
}

/* Force the old horizontal Bootstrap layout into the new vertical card design. */
.col-md-6.col-lg-4.mb-3:has(.border-img)>.border.rounded.bg-light>.d-flex {
  flex-direction: column !important;
  height: 100%;
  align-items: flex-start !important;
  gap: 0;
  text-align: start !important;
}

.col-md-6.col-lg-4 .border.rounded.border-secondary.bg-light, .col-md-6 .border.rounded.border-secondary,
.col-lg-6 .border.rounded.border-secondary.bg-light, .col-lg-6 .border.rounded.border-secondary {
    position: relative;
    height: 100%;
    /* min-height: 262px; */
    overflow: hidden;
   padding: 1rem !important;
     border-radius: 1rem;
    border: 1px solid var(--colors-neutral-100) !important;
    background-color: #ffffff !important;
    box-shadow: rgba(16, 24, 40, 0.1) 0px 4px 8px -2px, rgba(16, 24, 40, 0.06) 0px 2px 4px -2px;
   /*  color: #384250;
    text-align: start;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; */
}

.col-md-6.col-lg-4 .border.rounded.border-secondary.bg-light:hover, .col-md-6.col-lg-4 .border.rounded.border-secondary:hover,
.col-lg-6 .border.rounded.border-secondary.bg-light:hover, .col-lg-6 .border.rounded.border-secondary:hover {
 background-color: var(--colors-neutral-50);
    border: 1px solid var(--colors-base-white) !important;
}

/* Force the old horizontal Bootstrap layout into the new vertical card design. */
.col-md-6.col-lg-4 .border.rounded.border-secondary.bg-light>.d-flex {
  flex-direction: column !important;
  height: 100%;
  align-items: flex-start !important;
  gap: 0;
  text-align: start !important;
}
.col-md-6.col-lg-4 .border.rounded.border-secondary.bg-light h2.h2title {
    line-height: 48px;
}

/* Avatar thumbnail. */
.border-img {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  overflow: hidden;
  align-self: flex-start;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: #f0fdf4;
}

.border-img img {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: contain;
}

/* Card content wrapper. */
.border-img+div {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
 /* margin-top: 32px !important;*/
  margin-inline-start: 0 !important;
}

/* Card title. */
.border-img+div>.text-kfu {
  margin: 0 0 8px;
  color: var(--dga-color-title, #0d121c) !important;
  font: 700 18px / 28px var(--dga-font-family, "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif);
}

/* Card description. */
.border-img+div>p {
  display: -webkit-box;
  margin: 0 0 12px;
  overflow: hidden;
  color: var(--dga-color-muted, #6b7280);
  font: 400 16px / 24px var(--dga-font-family, "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif);
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  /* -webkit-line-clamp: 2;  */
}

/* Contact details. */
.border-img+div>.text-start, .d-flex:has(.border-img)>div:last-child>.text-start {
  color: #111827;
  font: 400 13px / 20px var(--dga-font-family, "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif);
  text-align: start !important;
}
 

.border-img+div>.text-start p, .d-flex:has(.border-img)>div:last-child>.text-start p {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
  margin-bottom: 4px;
  color: #000000;
  font-weight: 400;
}

.border-img+div>.text-start p:last-child, .d-flex:has(.border-img)>div:last-child>.text-start p:last-child {
  margin-bottom: 0;
}


.border-img+div .fa-phone-office,
.border-img+div .fa-envelope,
.dga-contact-icon {
  /* width: 19px;
  height: 19px;
  flex: 0 0 19px;
  margin-inline-end: 0 !important;
  color: var(--colors-base-black, #161616) !important;
  font-family: "hgi-stroke-rounded" !important;
  font-size: 19px;
  font-style: normal;
  line-height: 19px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
  width: 19px;
height: 19px;
/*flex: 0 0px 19px;
 margin-inline-end: 0 !important; */
color: var(--link-primary) !important;
font-family: "hgi-stroke-rounded" !important;
font-size: 19px;
font-style: normal;
/* line-height: 19px; */
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-left: 5px;
/*float: right;*/
display: inline-block;
}

.text-kfu {
    color: var(--colors-base-black, #161616) !important;
}

.border-img+div .fa-phone-office::before,
.border-img+div .fa-envelope::before {
  color: var(--dga-color-primary, #1b8354) !important;
}

.border-img+div .fa-phone-office::before {
  content: "\48B4";
}

.border-img+div .fa-envelope::before {
  content: "\42EE";
}

.border-img+div svg.fa-phone-office,
.border-img+div svg.fa-envelope,
.border-img+div svg.fa-phone-office *,
.border-img+div svg.fa-envelope * {
  color: var(--colors-primary-sa-flag-600-primary, #1b8354) !important;
  fill: var(--colors-primary-sa-flag-600-primary, #1b8354) !important;
  stroke: var(--colors-primary-sa-flag-600-primary, #1b8354) !important;
}

.border-img+div>.text-start p .text-kfu,
.d-flex:has(.border-img)>div:last-child>.text-start p .text-kfu {
  color: var(--colors-primary-sa-flag-600-primary, #1b8354) !important;
}



/* Email link. */
.border-img+div a, .d-flex:has(.border-img)>div:last-child a {
  color: var(--colors-primary-sa-flag-600-primary, #1b8354);
  text-decoration: none;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
} 

.border-img+div a:visited, .d-flex:has(.border-img)>div:last-child a:visited {
  color: var(--colors-primary-sa-flag-600-primary, #1b8354);
}

.border-img+div a:hover,
.border-img+div a:focus-visible {
  color: var(--colors-primary-sa-flag-700, #166a45);
  text-decoration: underline;
}

.border-img+div a:focus-visible {
  outline: 2px solid var(--dga-color-focus, #84e1bc);
  outline-offset: 2px;
}



.border-img+div a:hover,
.border-img+div a:focus-visible,
.d-flex:has(.border-img)>div:last-child a:hover,
.d-flex:has(.border-img)>div:last-child a:focus-visible {
  color: var(--colors-primary-sa-flag-700, #166a45);
  text-decoration: underline;
}

.border-img+div a:focus-visible,
.d-flex:has(.border-img)>div:last-child a:focus-visible {
  outline: 2px solid var(--dga-color-focus, #84e1bc);
  outline-offset: 2px;
}


@media (max-width: 767.98px) {
  .col-md-6.col-lg-4.mb-3:has(.border-img)>.border.rounded.bg-light>.d-flex, .col-md-6.col-lg-6.mb-3:has(.border-img)>.border.rounded>.d-flex {
    align-items: flex-start !important;
    text-align: start !important;
  }

  .border-img+div, .d-flex:has(.border-img)>div:last-child {
    width: 100%;
  }
}






/* END: Card component styles */

/********   New CSS For List     ****************/


.row:has(> .col-md-4 > #list-tab) {
  align-items: flex-start;
  color: var(--colors-base-black);
  font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 24px;
}

@media (min-width: 768px) {
  /* .row:has(> .col-md-4 > #list-tab) { flex-wrap: nowrap; } */
  .row:has(> .col-md-4 > #list-tab) > .col-md-4 {
   /*  width: max-content; */
    max-width: 320px;
    /* flex: 0 0 auto; */
  }
 /*  .row:has(> .col-md-4 > #list-tab) > .col-md-8 {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
  } */
}

.row:has(> .col-md-4 > #list-tab) #list-tab {
  width: max-content;
  max-width: 100%;
  gap: 4px;
  align-items: flex-start;
  border-radius: 0;
}

.row:has(> .col-md-4 > #list-tab) #list-tab .list-group-item {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--colors-base-black);
  font-size: 16px;
  line-height: 24px;
  text-align: start;
  white-space: nowrap;
}

.row:has(> .col-md-4 > #list-tab) #list-tab .list-group-item:hover,
.row:has(> .col-md-4 > #list-tab) #list-tab .list-group-item:focus-visible {
  background: #f3f4f6;
  color: #161616;
}

.row:has(> .col-md-4 > #list-tab) #list-tab .list-group-item.active {
  background: transparent;
  color: #161616;
  font-weight: 600;
}

.row:has(> .col-md-4 > #list-tab) #list-tab .list-group-item.active::after {
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 9999px;
  background: #1b8354;
  content: "";
}

.row:has(> .col-md-4 > #list-tab) .tab-content {
  min-width: 0;
  padding-inline-start: 12px;
  color: var(--colors-base-black);
  font-size: 16px;
  line-height: 24px;
}

.row:has(> .col-md-4 > #list-tab) .tab-content .fw-semibold {
    font-size: 1.2rem;
      line-height: 3;
}

h4.d-md-none.mt-4 {
    display: block !important;
}

.row:has(> .col-md-4 > #list-tab) .tab-content :where(h1,h2,h3,h4,h5,h6):not(.accordion *):not(table *) {
  margin-block: 0 12px;
  color: #0d121c;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  text-align: start;
  margin-bottom: 1.5rem !important;
}

.row:has(> .col-md-4 > #list-tab) .brown-hr { display: none !important; }

.row:has(> .col-md-4 > #list-tab) .tab-content p {
  margin-block: 0 16px;
  color: var(--colors-base-black);
  font-size: 16px;
  line-height: 28px;
}

/* .row:has(> .col-md-4 > #list-tab) .tab-content :where(ul,ol):not(.accordion *):not(table *) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block: 0 24px;
  padding: 0;
  color: #0d121c;
  list-style: none;
}
 */
.row:has(> .col-md-4 > #list-tab) .tab-content :where(ul,ol):not(.accordion *):not(table *) > li {
  display: list-item !important;
  align-items: flex-start;
}

/* .row:has(> .col-md-4 > #list-tab) .tab-content ul:not(.accordion *):not(table *) > li::before {
  content: "•";
  color: #161616;
} */

.row:has(> .col-md-4 > #list-tab) .accordion-item {
  border: 0;
  border-top: 1px solid #d2d6db;
  border-radius: 0;
}

.row:has(> .col-md-4 > #list-tab) .accordion-button {
  min-height: 56px;
  padding: 1rem;
  border: 0;
  background: #fff;
  box-shadow: none;
  color: #161616;
  font-size: 16px;
  font-weight: 600;
}

.row:has(> .col-md-4 > #list-tab) .table th,
.row:has(> .col-md-4 > #list-tab) .table td {
  border-color: #d2d6db;
  font-size: 16px;
  line-height: 24px;
}

@media (max-width: 767.98px) {
  .row:has(> .col-md-4 > #list-tab) .tab-content {
    width: 100%;
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}


.pdf-viewer {
  width: 100%;
  height: 60vh;
  /* Adjust height as needed */
  border-radius: 1rem;
  filter: drop-shadow(4px 4px 8px #ddd);
}

/***********  End CSS For List *****************/

/**abdulrahman*/
/*********** tables Start *********************/

.table-light {
    --bs-table-color: var(--colors-base-black);
    --bs-table-bg: #f3f4f6;
    --bs-table-border-color: #d2d6db;
    --bs-table-striped-bg: #ffffff;
    --bs-table-striped-color: #f5f5f6;
    --bs-table-active-bg: #f3f4f6;
    --bs-table-active-color: var(--colors-base-black);
    --bs-table-hover-bg: #e5e6e7;
    --bs-table-hover-color: var(--colors-base-black);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.table-responsive .table {
  
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: var(--bs-table-border-color);
}


.table-responsive .table>:not(caption)>*>* {
    padding: .5rem .5rem;
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
       /* background-color: #f9fafb;*/
    border-bottom-width: var(--bs-border-width);
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: #ffffff;
}



.table-striped>tbody>tr:nth-of-type(even)>* {
    background-color: #f5f5f6 !important;
}

.table-responsive thead
 {
    border-bottom: 1px solid var(--bs-table-border-color);
    border-top: 1px solid var(--bs-table-border-color);
    background-color: #f3f4f6 !important;
}

.table-responsive  table th {
  vertical-align: middle !important;
  height:48px;
    border-right: 1px solid var( --bs-table-border-color);
    padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
    color:var(--colors-base-black);
    font: 500 18px IBMPlexSansArabic;
    background-color: #f3f4f6 !important;
    /*text-align: center;*/
}

.table-responsive table td {
  vertical-align: middle !important;
  height: 64px;
    border-right: 1px solid #d2d6db;
    padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
    color:var(--colors-base-black);
    /*text-align: center;*/
    border-bottom: 1px solid #d2d6db;
    
    font: 400 16px IBMPlexSansArabic;
   /* font: 500 12px / 18px IBMPlexSansArabic;*/
}

.table-responsive tbody tr
{
    background: #f5f5f6;

}


.table-responsive tbody tr:hover {
    background-color: #e5e7eb;
}



.table-bordered>:not(caption)>*>* {
    border-width: 1px;
}



.table-bordered table td {
  vertical-align: middle !important;
  height: 64px;
    border-right: 1px solid #d2d6db !important;
    padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
    color:var(--colors-base-black);
    /*text-align: center;*/
    border-bottom: 1px solid #d2d6db;
    
    font: 500 16px IBMPlexSansArabic;
   /* font: 500 12px / 18px IBMPlexSansArabic;*/
}


table th {
  vertical-align: middle !important;
  height:48px;
    border-right: 1px solid var( --bs-table-border-color);
    padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
    color:var(--colors-base-black);
    font: 500 18px IBMPlexSansArabic;
    /*text-align: center;*/
    background-color: #fff;
}


table td {
  vertical-align: middle !important;
  height: 64px;
    border-right: 1px solid #d2d6db;
    padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
    color:var(--colors-base-black);
    /*text-align: center;*/
    border-bottom: 1px solid #d2d6db;
    
    background-color: #fff;
    font: 500 16px IBMPlexSansArabic;
   /* font: 500 12px / 18px IBMPlexSansArabic;*/
}

table tr {
    background-color: #fff;
}

.table {
  
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: var(--bs-table-border-color);
    background-color: #fff;
}


.table>:not(caption)>*>* {
    padding: .5rem .5rem;
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
    background-color: #fff;
    border-width: var(--bs-border-width);
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}


.list-none-custom {
    list-style: none;
    padding-right: 0;
    margin-bottom: 0;
}

.table-fixed-w{
  table-layout: fixed;
  width: 100%;
}

table td span.wbg {
    background-color: #fff;
    border: 1px solid #e7e9ec;
    /*display: block;*/
    border-radius: 7px;
    padding: 5px;
}


table td span.wbgpoint {
    background-color: #fff;
    /*border: 1px solid #e7e9ec;
    display: block;*/
    border-radius: 7px;
    padding: 5px;
}

table td span.wbgpoint i
{
  color: var(--colors-base-black);
}

table td span.wbgpoint img {
    width: 35px;
}


.justify-content-around {
    justify-content: right !important;
}
/*********** tables End *********************/

/*edit card icon*/
.bg-light i {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 20px;
    color: var(--colors-primary-sa-flag-700);
    line-height: 1.25rem;
    text-align: center;
    float: right;
    margin-left: 10px;
}

.bg-light h5 {
    line-height: 1.5rem;
}

.bg-light .text-start p {
    line-height: 1.5rem;
}

/* .bg-light .mt-3.ms-3.mt-md-0{
  margin-right: 0rem !important;
} */

/* .bg-light .mt-3.ms-3.mt-md-0 > h5 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
} */


/* ==========================================================================
   مكون ترقيم الصفحات
   ========================================================================== */

/* مساحة المعاينة تأخذ ارتفاع محتواها فقط وتبدأ من يمين أو يسار الصفحة حسب الاتجاه. */
.dga-embed .pagination-preview {
  display: flex;
  height: fit-content;
  min-height: 0;
  align-items: flex-start;
  justify-content: flex-start;
  direction: inherit;
}

.dga-embed .pagination-preview nav {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  direction: inherit;
}

/* أرقام الصفحات تعتمد على مؤشر سفلي بدلاً من خلفية بوتستراب الافتراضية. */
.dga-embed .dga-pagination {
  flex-wrap: wrap;
  gap: var(--pagination-gap);
  justify-content: flex-start;
  direction: inherit;
}

.dga-embed .dga-pagination .page-link {
  position: relative;
  min-width: var(--pagination-size);
  min-height: var(--pagination-size);
  padding: 8px 10px;
  border: 0;
  border-radius: 0.25rem;
  background-color: transparent;
  color: var(--pagination-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  touch-action: manipulation;
}

.dga-embed .dga-pagination .page-link:hover {
  background-color: var(--pagination-hover-bg);
  color: var(--pagination-text);
}

.dga-embed .dga-pagination .page-link:focus {
  background-color: var(--pagination-hover-bg);
  box-shadow: 0 0 0 0.2rem var(--pagination-focus-ring);
  color: var(--pagination-text);
}

.dga-embed .dga-pagination .page-link:active {
  background-color: var(--pagination-hover-bg);
}

.dga-embed .dga-pagination .active .page-link {
  background-color: transparent;
  color: var(--pagination-text);
}

.dga-embed .dga-pagination .active .page-link::after {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 10px;
  height: 3px;
  border-radius: var(--radius-full);
  background-color: var(--pagination-primary);
  content: "";
}

.dga-embed .dga-pagination .pagination-overflow {
  border-color: var(--pagination-text) !important;
  cursor: default;
}

.dga-embed .dga-pagination .pagination-overflow:focus {
  box-shadow: none;
}

.dga-embed .dga-pagination .disabled .page-link {
  background-color: transparent;
  color: var(--pagination-disabled);
  pointer-events: none;
}

/* تدوير الأسهم في الاتجاه من اليمين إلى اليسار يحافظ على دلالة السابق/التالي بصرياً. */
.dga-embed .pagination-icon {
  width: var(--pagination-icon-size);
  height: var(--pagination-icon-size);
  flex: 0 0 var(--pagination-icon-size);
  font-size: var(--pagination-icon-size);
  line-height: 1;
}

html[dir="rtl"] .dga-embed .pagination-icon {
  transform: rotate(180deg);
}


/* ==========================================================================
   مكون مؤشر التقدم
   ========================================================================== */

/* مساحة المعاينة تكفي لعرض المؤشر وحالاته التجريبية. */
.dga-embed .progress-preview {
  min-height: 240px;
}

/* الخطوات موزعة بالتساوي مع حد أدنى يمنع تكدس النصوص. */
.dga-embed .dga-progress {
  max-width: 720px;
  gap: var(--progress-gap);
}

.dga-embed .dga-progress-step {
  flex: 1 1 0;
  min-width: 158px;
}

/* علامة الخطوة تعرض الرقم أو علامة الاكتمال حسب الحالة. */
.dga-embed .dga-step-marker {
  width: var(--progress-marker-size);
  height: var(--progress-marker-size);
  flex: 0 0 var(--progress-marker-size);
  border-width: 2px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.dga-embed .dga-step-marker:focus-visible,
.dga-embed .is-focused .dga-step-marker {
  outline: 2px solid var(--progress-black);
  outline-offset: 1px;
  box-shadow: 0 0 0 1px var(--progress-white);
}

/* حالات المؤشر: مكتملة، حالية، وقادمة. */
.dga-embed .is-completed .dga-step-marker {
  border-color: var(--progress-completed);
  background-color: var(--progress-completed);
  color: var(--progress-white);
}

.dga-embed .is-completed .dga-step-marker:hover,
.dga-embed .is-completed.is-hover .dga-step-marker {
  border-color: var(--progress-completed-hover);
  background-color: var(--progress-completed-hover);
}

.dga-embed .is-current .dga-step-marker {
  border-color: var(--progress-completed);
  background-color: var(--progress-white);
  color: var(--progress-completed);
}

.dga-embed .is-upcoming .dga-step-marker {
  border-color: var(--progress-upcoming);
  background-color: var(--progress-white);
  color: var(--progress-upcoming);
}

.dga-embed .dga-step-line {
  height: var(--progress-line-size);
  background-color: var(--progress-upcoming);
}

.dga-embed .dga-step-line .progress-bar {
  background-color: var(--progress-completed);
}

/* نصوص الخطوات والحالات تبقى على سطر واحد في العرض القياسي. */
.dga-embed .dga-step-text {
  gap: var(--progress-text-gap);
  padding-inline-start: var(--progress-text-offset);
  margin-block-start: var(--progress-gap);
}

.dga-embed .dga-step-title {
  color: var(--progress-title);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  white-space: nowrap;
}

.dga-embed .dga-step-description,
.dga-embed .dga-state-label {
  color: var(--progress-description);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}

.dga-embed .dga-check-icon {
  width: var(--progress-icon-size);
  height: var(--progress-icon-size);
  flex: 0 0 var(--progress-icon-size);
  font-size: var(--progress-icon-size);
  line-height: 1;
}

.dga-embed .dga-state-example {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--progress-gap);
}


/* ==========================================================================
   مكون التبويبات
   ========================================================================== */

/* القواعد المشتركة بين التبويبات الأفقية والعمودية. */
.dga-tabs {
  color: var(--dga-tabs-muted);
  direction: inherit;
  text-align: start;
}

.dga-tab-list {
  max-width: 100%;
  direction: inherit;
}

/* زر التبويب يستخدم مؤشر العنصر الزائف بعد للحالة النشطة والتحويم. */
.dga-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dga-tabs-gap);
  border: 0;
  border-radius: var(--dga-tabs-radius);
  background-color: transparent;
  color: var(--dga-tabs-muted);
  letter-spacing: 0;
  text-align: start;
  unicode-bidi: isolate;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dga-tab:hover,
.dga-tab:focus-visible {
  background-color: var(--dga-tabs-hover);
  color: var(--dga-tabs-text);
}

.dga-tab:focus {
  box-shadow: none;
}

.dga-tab:focus-visible {
  outline: 2px solid var(--dga-tabs-focus);
  outline-offset: 2px;
}

.dga-tab.active,
.dga-tab.active:hover,
.dga-tab.active:focus-visible {
  background-color: var(--dga-tabs-hover);
  color: var(--dga-tabs-text);
}

.dga-tab.active::after,
.dga-tab:not(.active):hover::after,
.dga-tab:not(.active):focus-visible::after {
  position: absolute;
  border-radius: var(--radius-full);
  content: "";
}

.dga-tab.active::after {
  background-color: var(--dga-tabs-primary);
}

.dga-tab:not(.active):hover::after,
.dga-tab:not(.active):focus-visible::after {
  background-color: var(--dga-tabs-text);
}

.dga-tab__icon {
  width: var(--dga-tabs-icon-size);
  height: var(--dga-tabs-icon-size);
  flex: 0 0 var(--dga-tabs-icon-size);
  font-size: var(--dga-tabs-icon-size);
  line-height: 1;
}

/* التبويبات الأفقية تسمح بالتمرير عندما يزيد عدد التبويبات عن عرض الشاشة. */
.dga-tabs--horizontal {
  width: 100%;
}

.dga-tabs--horizontal .dga-tab-list {
  position: relative;
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.dga-tabs--horizontal .dga-tab-list::-webkit-scrollbar {
  display: none;
}

.dga-tabs--horizontal .dga-tab-list::before {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: var(--dga-tabs-selector);
  border-radius: var(--radius-full);
  background-color: var(--dga-tabs-border);
  content: "";
}

.dga-tabs--horizontal .nav-item {
  flex: 0 0 auto;
}

.dga-tabs--horizontal .dga-tab {
  min-height: 52px;
  padding: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.dga-tabs--horizontal .dga-tab.active {
  /*font-weight: 700;
      background-color: var(--dga-tabs-hover);*/
      font-weight: 700;
    background-color: transparent;
    border: 0px;
}


.dga-tabs--horizontal .dga-tab.active::after,
.dga-tabs--horizontal .dga-tab:not(.active):hover::after,
.dga-tabs--horizontal .dga-tab:not(.active):focus-visible::after {
  inset-inline: 16px;
  inset-block-end: 0;
  height: var(--dga-tabs-selector);
}

/* التبويبات العمودية تفصل قائمة التبويبات عن المحتوى بخط جانبي. */
.dga-tabs--vertical {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.dga-tabs--vertical .dga-tab-list {
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
}

.dga-tabs--vertical .dga-tab {
  width: 100%;
  justify-content: flex-start;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: start;
}

.dga-tabs--vertical .dga-tab.active {
  font-weight: 600;
}

.dga-tabs--vertical .dga-tab.active::after,
.dga-tabs--vertical .dga-tab:not(.active):hover::after,
.dga-tabs--vertical .dga-tab:not(.active):focus-visible::after {
  inset-block: 8px;
  inset-inline-start: 0;
  width: var(--dga-tabs-selector);
}

.dga-tab-panels {
  margin-block-start: 16px;
}

.dga-tabs--vertical .dga-tab-panels {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  margin-block-start: 0;
  padding-inline-start: 12px;
  border-inline-start: var(--dga-tabs-selector) solid var(--dga-tabs-border);
}

.dga-tab-panel {
  max-width: fit-content;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background-color: #ffffff;
  color: var(--dga-tabs-muted);
  direction: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: start;
  unicode-bidi: isolate;
}

/* الأكورديون المتداخل يحتاج عرضاً كاملاً حتى لا يتغير عرض الأب عند فتح العناصر الداخلية. */
.dga-accordion-fixed,
.dga-accordion-fixed .accordion,
.dga-tab-panel--accordion,
.dga-tab-panel--accordion>.accordion,
.dga-tab-panel--accordion .accordion .accordion {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* استجابات العرض تحافظ على قراءة المحتوى وتمنع خروج اللوحات عن الشاشة. */
@media (max-width: 991.98px) {
  .dga-tab-panel {
    max-width: 100%;
  }
}

@media (max-width: 767.98px) {
  .dga-tabs--vertical {
    flex-direction: column;
  }

  .dga-tabs--vertical .dga-tab-list {
    width: max-content;
    max-width: 100%;
  }

  .dga-tabs--vertical .dga-tab-panels,
  .dga-tab-panel {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .dga-pagination {
    gap: 6px;
  }

  .accordion-button {
    min-height: 52px;
    padding-inline: 1rem;
  }

  .accordion-body {
    padding-inline: 1rem;
  }

  .dga-progress {
    flex-direction: column;
  }

  .dga-progress-step {
    width: 100%;
  }
}

/*edit organization structure*/
.section-box .tabs-main .nav-pills .nav-link, button.nav-link.min-h-70, .section-box .nav-pills.tabs-main .nav-link{
    padding-inline: 16px !important;
  font-size: 1rem;
  font-weight: 500 !important;
  line-height: 1.5rem;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  min-height: 40px;
  cursor: pointer;
  transition: all 0.2s ease;
    background-color: var(--link-primary);
  color: var(--colors-base-white) !important;
  border-color: var(--link-primary);
  box-shadow: none;
  padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

button.nav-link.min-h-70 {
  min-height: 61px;
}
.section-box .tabs-main .nav-pills .nav-link:hover, button.nav-link.min-h-70:hover, .section-box .nav-pills.tabs-main .nav-link:hover {
  background-color: var(--colors-primary-sa-flag-700);
  border-color: var(--colors-primary-sa-flag-700);
}

.section-box .tabs-main .nav-pills .nav-link:active, button.nav-link.min-h-70:active, .section-box .nav-pills.tabs-main .nav-link:active {
  background-color: var(--colors-primary-sa-flag-900) !important;
  border-color: var(--colors-primary-sa-flag-900) !important;
}

.section-box .tabs-main .nav-pills .nav-link.active,  button.nav-link.min-h-70.active, .section-box .nav-pills.tabs-main .nav-link.active {
  background-color: var(--colors-primary-sa-flag-800) !important;
  border-color: var(--colors-primary-sa-flag-800) !important;
  box-shadow: none !important;
}

.section-box .tabs-main .nav-pills .nav-link:disabled, button.nav-link.min-h-70:disabled, .section-box .nav-pills.tabs-main .nav-link:disabled {
  background-color: var(--colors-neutral-100) !important;
  border-color: transparent !important;
  color: var(--colors-base-black) !important;
}

.section-box .tabs-main .nav-pills .nav-link:focus-visible, button.nav-link.min-h-70:focus-visible, .section-box .nav-pills.tabs-main .nav-link:focus-visible {
   outline: 2px solid var(--colors-base-black) !important;
  background-color: var(--link-primary);
}

.row.g-3.row-cols-1.row-cols-sm-2.row-cols-md-3.row-cols-lg-4 .title-card, .row.g-3.row-cols-1.row-cols-sm-2.row-cols-md-3.row-cols-lg-3 .title-card {
  background: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: start;
    text-align: start;
    font-weight: 400;
}

.row.g-3.row-cols-1.row-cols-sm-2.row-cols-md-3.row-cols-lg-4 .title-card::before, .row.g-3.row-cols-1.row-cols-sm-2.row-cols-md-3.row-cols-lg-3 .title-card::before {
     content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid var(--colors-base-black);
    flex-shrink: 0;
    margin-inline-end: 8px;
}

a.press-link{font-size: 1rem !important;}

/*tabs*/
.nav-underline .nav-item .nav-link {
    color: var(--colors-neutral-700);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.border-bottom-nav{
  border-bottom: 2px solid var(--colors-neutral-200);;
}

.nav-underline .nav-link:hover{
  background-color: var(--colors-neutral-100);
  font-weight: 400;
  border-bottom: 3px solid var(--colors-neutral-950);
}

.nav-underline .nav-link:active{
  background-color: var(--colors-neutral-200);
  font-weight: 400;
  border-bottom: 3px solid var(--colors-neutral-950);
}

.nav-underline .nav-link.active{
  color: var(--colors-neutral-900) !important;
  font-weight: 500;
  border-bottom: 3px solid var(--colors-primary-sa-flag-600-primary);
}
.nav-item .nav-link.active i{
   color: var(--colors-neutral-900) !important;
  font-weight: 500;
}