@charset "UTF-8";
/*@if $dir == ltr {
}
@else if $dir == rtl {
}*/
@import url(/lib/dga-icons/dga-icon.css);
/* 

SINGLE BREAKBPOINT


max-width: 0px
	@include media-breakpoint-only(xs) { ... }
max-width: 575.98px
	@include media-breakpoint-only(sm) { ... }
max-width: 767.98px	
	@include media-breakpoint-only(md) { ... }
max-width: 991.98px		
	@include media-breakpoint-only(lg) { ... }
max-width: 1199.98px	
	@include media-breakpoint-only(xl) { ... }
max-width: 1399.98px	
	@include media-breakpoint-only(xxl) { ... }


MLUTI BREAKPOINT

	@include media-breakpoint-between(xs, sm) { ... }
	@include media-breakpoint-between(sm, md) { ... }
	@include media-breakpoint-between(md, lg) { ... }
	@include media-breakpoint-between(lg, xl) { ... }
	@include media-breakpoint-between(xl, xxl) { ... }

*/
/*=================== PRIMITIVES ===================*/
:root {
  /*========== COLORS ==========*/
  /*---- Base ----*/
  --white: #FFFFFF;
  --black: #000000;
  --icon-default: #161616;
  /*---- Primary SA Flag ----*/
  --SAFlag-25: #F7FDF9;
  --SAFlag-50: #F3FCF6;
  --SAFlag-100: #DFF6E7;
  --SAFlag-200: #B8EACB;
  --SAFlag-300: #88D8AD;
  --SAFlag-400: #54C08A;
  --SAFlag-500: #25935F;
  --SAFlag-600: #1B8354;
  --SAFlag-700: #166A45;
  --SAFlag-800: #14573A;
  --SAFlag-900: #104631;
  --SAFlag-950: #092A1E;
  --SAFlag-primary: var(--SAFlag-600);
  /*---- Secondary Gold ----*/
  --secondary-gold-25: #FFFEF7;
  --secondary-gold-50: #FFFEF2;
  --secondary-gold-100: #FFFCE6;
  --secondary-gold-200: #FCF3BD;
  --secondary-gold-300: #FAE996;
  --secondary-gold-400: #F7D54D;
  --secondary-gold-500: #F5BD02;
  --secondary-gold-600: #DBA102;
  --secondary-gold-700: #B87B02;
  --secondary-gold-800: #945C01;
  --secondary-gold-900: #6E3C00;
  --secondary-gold-950: #472400;
  --secondary-gold-primary: var(--secondary-gold-600);
  /*---- Tertiary Lavendar ----*/
  --tertiary-lavendar-25: #FEFCFF;
  --tertiary-lavendar-50: #F9F5FA;
  --tertiary-lavendar-100: #F2E9F5;
  --tertiary-lavendar-200: #E1CCE8;
  --tertiary-lavendar-300: #CCADD9;
  --tertiary-lavendar-400: #A57BBA;
  --tertiary-lavendar-500: #80519F;
  --tertiary-lavendar-600: #6D428F;
  --tertiary-lavendar-700: #532D75;
  --tertiary-lavendar-800: #3D1D5E;
  --tertiary-lavendar-900: #281047;
  --tertiary-lavendar-950: #16072E;
  --tertiary-lavendar-primary: var(--tertiary-lavendar-500);
  /*---- Backgrounds ----*/
  --background-white: #FFFFFF;
  --background-body: #F9FAFB;
  --background-topbar: var(--background-primary);
  --background-menu: #FFFFFF;
  --background-card: #FFFFFF;
  --background-oncolor: #FFFFFF;
  --background-black: #161616;
  --background-neutral-800: #1F2A37;
  --background-neutral-400: #9DA4AE;
  --background-neutral-300: #D2D6DB;
  --background-neutral-200: #E5E7EB;
  --background-neutral-100: #F3F4F6;
  --background-neutral-50: #F9FAFB;
  --background-neutral-25: #FCFCFD;
  --background-primary: var(--SAFlag-600);
  --background-primary-400: var(--SAFlag-400);
  --background-primary-200: var(--SAFlag-200);
  --background-primary-50: var(--SAFlag-50);
  --background-primary-25: var(--SAFlag-25);
  --background-secondary: var(--secondary-gold-primary);
  --background-secondary-50: var(--secondary-gold-50);
  --background-secondary-25: var(--secondary-gold-25);
  --background-tertiary: var(--tertiary-lavendar-600);
  --background-tertiary-50: var(--tertiary-lavendar-50);
  --background-tertiary-25: var(--tertiary-lavendar-25);
  --background-success: var(--green-600);
  --background-success-50: var(--green-50);
  --background-success-25: var(--green-25);
  --background-info: var(--blue-600);
  --background-info-50: var(--blue-50);
  --background-info-25: var(--blue-25);
  --background-warning: var(--yellow-600);
  --background-warning-50: var(--yellow-50);
  --background-warning-25: var(--yellow-25);
  --background-error: var(--red-600);
  --background-error-50: var(--red-50);
  --background-error-25: var(--red-25);
  --background-SA-Flag: var(--green-900);
  --background-SA-Flag-50: var(--green-50);
  --background-SA-Flag-25: var(--green-25);
  --background-notification-white: var(--white);
  --background-nav-header: var(---SAFlag-800);
  /*---- Neutral ----*/
  --neutral-25: #FCFCFD;
  --neutral-50: #F9FAFB;
  --neutral-100: #F3F4F6;
  --neutral-200: #E5E7EB;
  --neutral-300: #D2D6DB;
  --neutral-400: #9DA4AE;
  --neutral-500: #6C737F;
  --neutral-600: #4D5761;
  --neutral-700: #384250;
  --neutral-800: #1F2A37;
  --neutral-900: #111927;
  --neutral-950: #0D121C;
  /*---- Green ----*/
  --green-25: #F6FEF9;
  --green-50: #ECFDF3;
  --green-100: #DCFAE6;
  --green-200: #ABEFC6;
  --green-300: #75E0A7;
  --green-400: #47CD89;
  --green-500: #17B26A;
  --green-600: #079455;
  --green-700: #067647;
  --green-800: #085D3A;
  --green-900: #074D31;
  --green-950: #053321;
  /*---- blue ----*/
  --blue-25: #F5FAFF;
  --blue-50: #EFF8FF;
  --blue-100: #D1E9FF;
  --blue-200: #B2DDFF;
  --blue-300: #84CAFF;
  --blue-400: #53B1FD;
  --blue-500: #2E90FA;
  --blue-600: #1570EF;
  --blue-700: #175CD3;
  --blue-800: #1849A9;
  --blue-900: #194185;
  --blue-950: #102A56;
  /*---- yellow ----*/
  --yellow-25: #FFFCF5;
  --yellow-50: #FFFAEB;
  --yellow-100: #FEF0C7;
  --yellow-200: #FEDF89;
  --yellow-300: #FEC84B;
  --yellow-400: #FDB022;
  --yellow-500: #F79009;
  --yellow-600: #DC6803;
  --yellow-700: #B54708;
  --yellow-800: #93370D;
  --yellow-900: #7A2E0E;
  --yellow-950: #4E1D09;
  /*---- red ----*/
  --red-25: #FFFBFA;
  --red-50: #FEF3F2;
  --red-100: #FEE4E2;
  --red-200: #FECDCA;
  --red-300: #FDA29B;
  --red-400: #F97066;
  --red-500: #F04438;
  --red-600: #D92D20;
  --red-700: #B42318;
  --red-800: #912018;
  --red-900: #7A271A;
  --red-950: #55160C;
  /*---- Alpha-white ----*/
  --alpha-white-0: rgba(255,255,255, 0.0);
  --alpha-white-10: rgba(255,255,255, 0.1);
  --alpha-white-20: rgba(255,255,255, 0.2);
  --alpha-white-30: rgba(255,255,255, 0.3);
  --alpha-white-40: rgba(255,255,255, 0.4);
  --alpha-white-50: rgba(255,255,255, 0.5);
  --alpha-white-60: rgba(255,255,255, 0.6);
  --alpha-white-70: rgba(255,255,255, 0.7);
  --alpha-white-80: rgba(255,255,255, 0.8);
  --alpha-white-90: rgba(255,255,255, 0.9);
  --alpha-white-100: rgba(255,255,255, 1.0);
  --alpha-white-900: rgba(255,255,255, 0);
  /*---- alpha-black ----*/
  --alpha-black-0: rgba(0,0,0, 0.0);
  --alpha-black-10: rgba(0,0,0, 0.1);
  --alpha-black-20: rgba(0,0,0, 0.2);
  --alpha-black-30: rgba(0,0,0, 0.3);
  --alpha-black-40: rgba(0,0,0, 0.4);
  --alpha-black-50: rgba(0,0,0, 0.5);
  --alpha-black-60: rgba(0,0,0, 0.6);
  --alpha-black-70: rgba(0,0,0, 0.7);
  --alpha-black-80: rgba(0,0,0, 0.8);
  --alpha-black-90: rgba(0,0,0, 0.9);
  --alpha-black-100: rgba(0,0,0, 1.0);
  /*---- alpha-primary ----*/
  --alpha-primary-10: rgba(27,131,84, 0.1);
  --alpha-primary-20: rgba(27,131,84, 0.2);
  --alpha-primary-30: rgba(27,131,84, 0.3);
  --alpha-primary-40: rgba(27,131,84, 0.4);
  --alpha-primary-50: rgba(27,131,84, 0.5);
  --alpha-primary-60: rgba(27,131,84, 0.6);
  --alpha-primary-70: rgba(27,131,84, 0.7);
  --alpha-primary-80: rgba(27,131,84, 0.8);
  --alpha-primary-90: rgba(27,131,84, 0.9);
  --alpha-primary-100: var(--SAFlag-primary);
  /*---- alpha-yellow ----*/
  --alpha-yellow-10: rgba(220,104,3, 0.1);
  --alpha-yellow-20: rgba(220,104,3, 0.2);
  --alpha-yellow-30: rgba(220,104,3, 0.3);
  --alpha-yellow-40: rgba(220,104,3, 0.4);
  --alpha-yellow-50: rgba(220,104,3, 0.5);
  --alpha-yellow-60: rgba(220,104,3, 0.6);
  --alpha-yellow-70: rgba(220,104,3, 0.7);
  --alpha-yellow-80: rgba(220,104,3, 0.8);
  --alpha-yellow-90: rgba(220,104,3, 0.9);
  --alpha-yellow-100: rgba(220,104,3, 1.0);
  /*---- alpha-red ----*/
  --alpha-red-10: rgba(217,45,10, 0.1);
  --alpha-red-20: rgba(217,45,10, 0.2);
  /*---- alpha-blue ----*/
  --alpha-blue-10: rgba(21,112,239, 0.1);
  --alpha-blue-20: rgba(21,112,239, 0.2);
  /*---- alpha-green ----*/
  --alpha-green-10: rgba(7,148,85, 0.1);
  --alpha-green-20: rgba(7,148,85, 0.2);
  /*========== SPACING ==========*/
  --spacing-0: 0px;
  --spacing-0_5: 2px;
  --spacing-1: 4px;
  --spacing-1_5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-32: 128px;
  --spacing-40: 160px;
  --spacing-48: 192px;
  --spacing-56: 224px;
  --spacing-64: 256px;
  --spacing-96: 284px;
  --spacing-80: 320px;
  --spacing-120: 480px;
  --spacing-140: 560px;
  --spacing-160: 640px;
  --spacing-180: 720px;
  --spacing-192: 768px;
  --spacing-256: 1024px;
  --spacing-320: 1280px;
  --spacing-360: 1440px;
  --spacing-400: 1600px;
  --spacing-480: 1920px;
  /*========== RADIUS ==========*/
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-9999: 99999px;
  --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);
  /*========== TEXT ==========*/
  --text-default: var(--black);
  --text-primary: var(--SAFlag-primary);
  --text-secondary: var(--secondary-gold-primary);
  --text-tertiary: var(--tertiary-lavendar-primary);
  --text-primary-sa-flag: var(--SAFlag-800);
  --text-display: var(--neutral-800);
  --text-primary-paragraph: var(--neutral-700);
  --text-secondary-paragraph: var(--neutral-500);
  --text-oncolor-primary: var(--white);
  --text-oncolor-secondary: var(--alpha-white-80);
  --text-oncolor-tertiary: var(--alpha-white-70);
  --text-success: var(--green-700);
  --text-info: var(--blue-700);
  --text-warning: var(--yellow-700);
  --text-error: var(--red-700);
  --text-primary-light: var(--SAFlag-300);
  --text-secondary-light: var(--secondary-gold-300);
  --text-tertiary-light: var(--tertiary-lavendar-300);
}

:root {
  /* Typography - Size */
  --font-size-display: var*--;
  --font-size-h1: 32px;
  --font-size-h2: 28px;
  --font-size-h3: 26px;
  --font-size-h4: 22px;
  --font-size-h5: 20px;
  --font-size-h6: 18px;
  --font-size-base: 16px;
  --font-size-s: 14px;
  --font-size-xs: 12px;
  --font-size-xxs: 10px;
  /* Typography - Weight */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;
  /* Color - Primary */
  --color-primary: #1B8354;
  --color-primary-25: #F7FDF9;
  --color-primary-50: #F3FCF6;
  --color-primary-100: #DFF6E7;
  --color-primary-200: #B8EACB;
  --color-primary-300: #88D8AD;
  --color-primary-400: #54C08A;
  --color-primary-500: #25935F;
  --color-primary-600: #1B8354;
  --color-primary-700: #166A45;
  --color-primary-800: #14573A;
  --color-primary-900: #104631;
  --color-primary-950: #092A1E;
  --color-primary-hover: #1B8354;
  --color-primary-selected: rgba(20, 110, 245, .12);
  --color-primary-lightest: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9));
  /* Color - Secondary (GOLD) */
  --color-secondary: #F5BD02;
  --color-secondary-25: #FFFEF7;
  --color-secondary-50: #FFFEF2;
  --color-secondary-100: #FFFCE6;
  --color-secondary-200: #FCF3BD;
  --color-secondary-300: #FAE996;
  --color-secondary-400: #F7D54D;
  --color-secondary-500: #F5BD02;
  --color-secondary-600: #DBA102;
  --color-secondary-700: #B87B02;
  --color-secondary-800: #945C01;
  --color-secondary-000: #6E3C00;
  --color-secondary-950: #472400;
  /* Color - Secondary Lavender) */
  --color-secondary-lavender: #80519F;
  --color-secondary-lavender-25: #FEFCFF;
  --color-secondary-lavender-50: #F9F5FA;
  --color-secondary-lavender-100: #F2E9F5;
  --color-secondary-lavender-200: #E1CCE8;
  --color-secondary-lavender-300: #CCADD9;
  --color-secondary-lavender-400: #A57BBA;
  --color-secondary-lavender-500: #80519F;
  --color-secondary-lavender-600: #6D428F;
  --color-secondary-lavender-700: #532D75;
  --color-secondary-lavender-800: #3D1D5E;
  --color-secondary-lavender-000: #281047;
  --color-secondary-lavender-950: #472400;
  /* Color - Extended */
  --color-red-lightest: #faeaea;
  --color-red-lighter: #e9aaaa;
  --color-red-light: #d96a6a;
  --color-red: #c92a2a;
  --color-red-dark: #ab2424;
  --color-red-darker: #8d1d1d;
  --color-red-darkest: #6f1717;
  --color-pink-lightest: #fbebf0;
  --color-pink-lighter: #efadc4;
  --color-pink-light: #e27098;
  --color-pink: #d6336c;
  --color-pink-dark: #b62b5c;
  --color-pink-darker: #96244c;
  --color-pink-darkest: #761c3b;
  --color-grape-lightest: #f7ecfa;
  --color-grape-lighter: #dfb2e9;
  --color-grape-light: #c678d9;
  --color-grape: #ae3ec9;
  --color-grape-dark: #9435ab;
  --color-grape-darker: #7a2b8d;
  --color-grape-darkest: #60226f;
  --color-violet-lightest: #f1edfd;
  --color-violet-lighter: #c6b6f6;
  --color-violet-light: #9b7fef;
  --color-violet: #7048e8;
  --color-violet-dark: #5f3dc5;
  --color-violet-darker: #4e32a2;
  --color-violet-darkest: #3e2880;
  --color-indigo-lightest: #eceffd;
  --color-indigo-lighter: #b3c1f7;
  --color-indigo-light: #7b92f1;
  --color-indigo: #4263eb;
  --color-indigo-dark: #3854c8;
  --color-indigo-darker: #2e45a5;
  --color-indigo-darkest: #243681;
  --color-blue-lightest: #e8f2fa;
  --color-blue-lighter: #a3c9ea;
  --color-blue-light: #5fa1db;
  --color-blue: #1a79cb;
  --color-blue-dark: #1667ad;
  --color-blue-darker: #12558e;
  --color-blue-darkest: #0e4370;
  --color-cyan-lightest: #e7f2f4;
  --color-cyan-lighter: #9eccd3;
  --color-cyan-light: #56a6b2;
  --color-cyan: #0d8091;
  --color-cyan-dark: #0b6d7b;
  --color-cyan-darker: #095a66;
  --color-cyan-darkest: #074650;
  --color-teal-lightest: #e6f2ef;
  --color-teal-lighter: #9cccbd;
  --color-teal-light: #52a58c;
  --color-teal: #087f5b;
  --color-teal-dark: #076c4d;
  --color-teal-darker: #065940;
  --color-teal-darkest: #044632;
  --color-green-lightest: #ebf7ed;
  --color-green-lighter: #afe0b8;
  --color-green-light: #73c982;
  --color-green: #37b24d;
  --color-green-dark: #2f9741;
  --color-green-darker: #267d36;
  --color-green-darkest: #1e622a;
  --color-lime-lightest: #f1f8e8;
  --color-lime-lighter: #c7e3a2;
  --color-lime-light: #9ecd5c;
  --color-lime: #74b816;
  --color-lime-dark: #639c13;
  --color-lime-darker: #51810f;
  --color-lime-darkest: #40650c;
  --color-orange-lightest: #fef0e6;
  --color-orange-lighter: #fcc29c;
  --color-orange-light: #f99551;
  --color-orange: #f76707;
  --color-orange-dark: #d25806;
  --color-orange-darker: #ad4805;
  --color-orange-darkest: #883904;
  --color-yellow-lightest: #fef5e5;
  --color-yellow-lighter: #fbd999;
  --color-yellow-light: #f8bc4c;
  --color-yellow: #f59f00;
  --color-yellow-dark: #d08700;
  --color-yellow-darker: #ac6f00;
  --color-yellow-darkest: #875700;
  /* Color - Neutral */
  --color-neutral-0: #ffffff;
  --color-neutral-1: #f8f9fa;
  --color-neutral-2: #f1f3f5;
  --color-neutral-3: #e9ecef;
  --color-neutral-4: #dee2e6;
  --color-neutral-5: #ced4da;
  --color-neutral-6: #adb5bd;
  --color-neutral-7: #6a7178;
  --color-neutral-8: #4f575e;
  --color-neutral-9: #272b30;
  --color-neutral-10: #101213;
  --color-neutral-25: #FCFCFD;
  /* Color - Semantic */
  --color-error-light: #FFFBFA;
  --color-error: #F04438;
  --color-error-25: #FFFBFA;
  --color-error-50: #FEF3F2;
  --color-error-100: #FEE4E2;
  --color-error-200: #FECDCA;
  --color-error-300: #FDA29B;
  --color-error-400: #F97066;
  --color-error-500: #F04438;
  --color-error-600: #D92D20;
  --color-error-700: #B42318;
  --color-error-800: #912018;
  --color-error-900: #7A271A;
  --color-error-950: #55160C;
  --color-warning-light: #FFFCF5;
  --color-warning: #F79009;
  --color-warning-25: #FFFCF5;
  --color-warning-50: #FFFAEB;
  --color-warning-100: #FEF0C7;
  --color-warning-200: #FEDF89;
  --color-warning-300: #FEC84B;
  --color-warning-400: #FDB022;
  --color-warning-500: #F79009;
  --color-warning-600: #DC6803;
  --color-warning-700: #B54708;
  --color-warning-800: #93370D;
  --color-warning-900: #7A2E0E;
  --color-warning-950: #4E1D09;
  --color-success-light: #F6FEF9;
  --color-success: #17B26A;
  --color-success-25: #F6FEF9;
  --color-success-50: #ECFDF3;
  --color-success-100: #DCFAE6;
  --color-success-200: #ABEFC6;
  --color-success-300: #75E0A7;
  --color-success-400: #47CD89;
  --color-success-500: #17B26A;
  --color-success-600: #079455;
  --color-success-700: #151817;
  --color-success-800: #085D3A;
  --color-success-900: #074D31;
  --color-success-950: #053321;
  --color-info-light: #F5FAFF;
  --color-info: #2E90FA;
  --color-info-25: #F5FAFF;
  --color-info-50: #ECFDF3;
  --color-info-100: #D1E9FF;
  --color-info-200: #B2DDFF;
  --color-info-300: #84CAFF;
  --color-info-400: #53B1FD;
  --color-info-500: #2E90FA;
  --color-info-600: #1570EF;
  --color-info-700: #175CD3;
  --color-info-800: #1849A9;
  --color-info-900: #194185;
  --color-info-950: #102A56;
  /* Gradient Style */
  --color-gradient-600-500: linear-gradient(90deg, rgba(27,131,84,1) 0%, rgba(37,147,95,1) 100%);
  --color-gradient-700-600: linear-gradient(45deg, rgba(22,106,69,1) 0%, rgba(27,131,84,1) 100%);
  --color-gradient-950-600: linear-gradient(45deg, rgba(20,87,58,1) 0%, rgba(27,131,84,1) 100%);
  --color-gradient-800-600: linear-gradient(90deg, rgba(20,87,58,1) 0%, rgba(27,131,84,1) 100%);
  --color-gradient-800-700: linear-gradient(26.5deg, rgba(20,87,58,1) 0%, rgba(22,106,69,1) 100%);
  --color-gradient-900-600: linear-gradient(45deg, rgba(16,70,49,1) 0%, rgba(27,131,84,1) 100%);
  /* Text Color */
  /*Dark Text colors on Light backgrounds*/
  --color-text-gray-600: #4D5761;
  --color-text-gray-700: #384250;
  --color-text-gray-950: #0D121C;
  /*Light Text colors on dark backgrounds*/
  --color-text-white-60: rgba(255,255,255,0.6);
  --color-text-white-70: rgba(255,255,255,0.7);
  --color-text-white: rgba(255,255,255,1);
  /*Platforms Code Text Colors on Light Backgrounds*/
  --color-text-sa-500: #4D5761;
  --color-text-sa-600: #384250;
  --color-text-sa-800: #0D121C;
  /*Semantic Text Colors on Light Backgrounds*/
  --color-text-error-600: #D92D20;
  --color-text-warning-600: #DC6803;
  --color-text-success-600: #1B8354;
  --color-text-info-600: #1570EF;
  /*Border Colors*/
  --border-white: var(--white);
  --border-white-40: var(--alpha-white-40);
  --border-black: var(--black);
  --border-primary: var(--SAFlag-primary);
  --border-primary-light: var(--SAFlag-200);
  --border-secondary: var(--secondary-gold-primary);
  --border-secondary-light: var(--secondary-gold-200);
  --border-tertiary: var(--tertiary-lavendar-primary);
  --border-tertiary-light: var(--tertiary-lavendar-200);
  --border-neutral-primary: var(--neutral-300);
  --border-neutral-secondary: var(--neutral-200);
  --border-neutral-tertiary: var(--neutral-100);
  --border-background-white: var(--neutral-100);
  --border-background-neutral: var(--neutral-300);
  --border-transparent-10: var(--alpha-white-10);
  --border-oncolor-transparent-30: var(--alpha-white-30);
  --border-success: var(--green-700);
  --border-success-light: var(--green-200);
  --border-info: var(--blue-700);
  --border-info-light: var(--blue-200);
  --border-warning: var(--yellow-700);
  --border-warning-light: var(--yellow-200);
  --border-error: var(--red-700);
  --border-error-light: var(--red-200);
  --border-disabled: var(--neutral-300);
  /* Typography */
  --font-family: "IBM Plex Sans Arabic", sans-serif;
  --text-display-xxl: 72px;
  --text-display-xl: 60px;
  --text-display-lg: 48px;
  --text-display-md: 36px;
  --text-display-sm: 30px;
  --text-display-xS: 24px;
  --text-text-xl: 20px;
  --text-text-lg: 18px;
  --text-text-md: 16px;
  --text-text-sm: 14px;
  --text-text-xS: 12px;
  --text-text-xxS: 10px;
  --font-display-xxl: var(--text-display-xxl)/90px var(--font-family);
  --font-display-xl: var(--text-display-xl)/72px var(--font-family);
  --font-display-lg: var(--text-display-lg)/60px var(--font-family);
  --font-display-md: var(--text-display-md)/44px var(--font-family);
  --font-display-sm: var(--text-display-sm)/38px var(--font-family);
  --font-display-xS: var(--text-display-xs)/32px var(--font-family);
  --font-text-xl: var(--text-text-xl)/30px var(--font-family);
  --font-text-lg: var(--text-text-lg)/28px var(--font-family);
  --font-text-md: var(--text-text-md)/24px var(--font-family);
  --font-text-sm: var(--text-text-sm)/20px var(--font-family);
  --font-text-xS: var(--text-text-xs)/18px var(--font-family);
  --font-text-xxS: var(--text-text-xxs)/18px var(--font-family);
  /* Space - Sizes */
  --space-none: 0;
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-xxl: 20px;
  --space-3xl: 24px;
  --space-4xl: 32px;
  --space-5xl: 40px;
  --space-6xl: 48px;
  --space-7xl: 64px;
  --space-8xl: 80px;
  --space-9xl: 96px;
  --space-10xl: 128px;
  --space-11xl: 160px;
  /* Width - Sizes */
  --width-xxs: 320px;
  --width-xs: 384px;
  --width-sm: 480px;
  --width-md: 560px;
  --width-lg: 640px;
  --width-xl: 768px;
  --width-xxl: 1024px;
  --width-3xl: 1280px;
  --width-4xl: 1440px;
  --width-5xl: 1600px;
  --width-6xl: 1920px;
  --paragraph-max-width: 720px;
  /* Border Radius */
  --border-radius-none: 0px;
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-full: 100%;
  /* Border Size */
  --border-size-none: 0;
  --border-size-s: 1px;
  --border-size-m: 2px;
  --border-size-l: 3px;
  /* Elevation / Shadow */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px 0px rgba(16, 24, 40, 0.10), 0 1px 2px 0px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 16px -6px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
  --shadow-xxl: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
  --shadow-xxxl: 0 32px 64px -14px rgba(16, 24, 40, 0.14);
  /* Blur Effect */
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(24px);
  --blur-xl: blur(40px);
  /* App Settings */
  --color-background-body: #F9FAFB;
  --header-size: 72px;
  --side-menu-size: 256px;
  /* BOOTSTRAP CUSTOMISE */
  --bs-table-bg: --neutral-300;
}

/* BUTTONS */
a {
  text-decoration: none;
  color: var(--SAFlag-600);
}

a:hover {
  color: var(--color-primary-400);
}

.demo-wrapper {
  width: 1440px;
  max-width: 90%;
  padding: 30px 40px;
  margin: 0 auto;
  background-color: #FFF;
}

.dark-wrapper {
  background-color: var(--neutral-800);
  padding: 40px;
}

/* ================================================================ */
/*  $1 - Resets                                                     */
/* ================================================================ */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
  color: var(--color-neutral-9);
  font-family: "IBM Plex Sans Arabic", BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font: var(--font-text-md);
  overflow: auto;
  overflow-x: hidden;
  -moz-osx-font-smoothing: grayscale;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -servicestudio-overflow: initial;
}

body {
  background-color: var(--color-background-body);
  font: var(--font-text-md);
  margin: 0;
  -webkit-overflow-scrolling: touch;
  direction: rtl;
  text-align: right;
}

.form-row {
  padding-bottom: 20px;
}

/*======================================= GLOBAL =======================================*/
.rounded {
  border-radius: var(--radius-full) !important;
}

.form-label em {
  color: var(--color-error);
  font-size: var(--font-size-s);
  font-weight: var(--font-regular);
}

.form-control:focus {
  box-shadow: none;
  transition: all 0.35s ease-in-out;
}

/*==================================== COMPONENETS ====================================*/
/*--- DATE PICKER ---*/
.datepicker {
  background-color: #fff;
  border: none;
  border-radius: 0 !important;
}

.datepicker-dropdown {
  top: 0;
  left: 0;
}

.datepicker table tr td.today, span.focused {
  border-radius: 50% !important;
  background-image: linear-gradient(#FFF3E0, #FFE0B2);
}

.datepicker table tr td.today.range {
  background-image: linear-gradient(#eeeeee, #eeeeee) !important;
  border-radius: 0 !important;
}

/*Weekday title*/
thead tr:nth-child(3) th {
  font-weight: bold !important;
  padding-top: 10px;
  padding-bottom: 10px;
}

.dow, .old-day, .day, .new-day {
  width: 40px !important;
  height: 40px !important;
  border-radius: 0px !important;
}

.old-day:hover, .day:hover, .new-day:hover, .month:hover, .year:hover, .decade:hover, .century:hover {
  border-radius: 50% !important;
  background-color: #eee;
}

.flatpickr-calendar {
  padding: var(--space-xl);
  width: max-content;
}

.flatpickr-calendar.open {
  direction: rtl;
}

.flatpickr-day.selected.endRange::before,
.flatpickr-day.startRange.endRange::before,
.flatpickr-day.endRange.endRange::before {
  left: 50%;
}

.flatpickr-day.selected.startRange::before,
.flatpickr-day.startRange.startRange::before,
.flatpickr-day.endRange.startRange::before {
  right: 50%;
}

.flatpickr-monthDropdown-months {
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-medium) !important;
}

.flatpickr-current-month {
  padding-top: 0px;
  height: 40px;
  line-height: 40px;
}

.flatpickr-months .flatpickr-month {
  height: 40px;
  line-height: 40px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  padding: 0 0.5ch 0 0;
}

.flatpickr-current-month input.cur-year {
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-medium) !important;
  padding: 0 0.5ch 0 0;
  text-align: end;
}

.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  width: 40px;
  height: 40px;
  left: unset !important;
  right: unset;
  padding: 0px;
}

.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
  width: 40px;
  height: 40px;
  fill: var(--icon-default);
}

.numInputWrapper span {
  left: 0;
  right: unset;
  padding: 0 2px 0 4px;
}

.flatpickr-calendar.active {
  border-radius: 50% !important;
  background-image: linear-gradient(#90CAF9, #64B5F6) !important;
  color: #fff !important;
}

.range-start, .range-end {
  border-radius: 50% !important;
  background-image: linear-gradient(#FFA726, #FFA726) !important;
}

.prev, .next, .datepicker-switch {
  border-radius: 0 !important;
  padding: 10px 10px 10px 10px !important;
  text-transform: uppercase;
  font-size: 14px;
  opacity: 0.8;
}

.prev:hover, .next:hover, .datepicker-switch:hover {
  background-color: inherit !important;
  opacity: 1;
}

.btn-black {
  background-color: #37474F !important;
  color: #fff !important;
  width: 100%;
}

.btn-black:hover {
  color: #fff !important;
  background-color: #000 !important;
}

span.flatpickr-weekday {
  font-weight: var(--font-regular);
  color: var(--text-tertiary);
}

.flatpickr-day {
  line-height: 36px;
  transition: all 0.25s ease-in-out;
  color: var(--text-default);
}

.flatpickr-day:hover {
  background-color: var(--neutral-200);
  border-color: transparent;
}

.flatpickr-day:focus {
  background-color: var(--neutral-300);
  border-color: transparent;
}

.flatpickr-day.today {
  border-color: var(--SAFlag-600);
  color: var(--SAFlag-600);
  border-width: 2px;
  font-weight: var(--font-bold);
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
  background-color: var(--SAFlag-600);
  border-color: var(--SAFlag-600);
  color: var(--text-oncolor-primary);
}

.flatpickr-day.selected:hover {
  background-color: var(--SAFlag-700);
}

.flatpickr-day.selected:focus {
  background-color: var(--SAFlag-900);
}

.flatpickr-day.today:hover {
  background-color: var(--color-primary-100);
  border-color: var(--SAFlag-600);
  color: var(--SAFlag-600);
  border-width: 2px;
}

.flatpickr-day.today:focus {
  background-color: var(--color-primary-200);
  border-color: var(--SAFlag-600);
  color: var(--SAFlag-600);
  border-width: 2px;
}

.flatpickr-day.selected.today {
  background-color: var(--SAFlag-600);
  box-shadow: 0 0 0 1px #FFFFFF inset;
}

.flatpickr-day.selected.today:hover {
  box-shadow: 0 0 0 1px #FFFFFF inset;
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: var(--text-oncolor-primary);
}

.flatpickr-day.selected.today:focus {
  box-shadow: 0 0 0 1px #FFFFFF inset;
  background-color: var(--SAFlag-900);
  border-color: var(--SAFlag-900);
  color: var(--text-oncolor-primary);
}

.flatpickr-day.flatpickr-disabled {
  color: var(--neutral-400);
}

.flatpickr-day.flatpickr-disabled:hover {
  color: var(--neutral-500);
}

.flatpickr-day.today.flatpickr-disabled {
  background-color: transparent;
  border-color: var(--neutral-400);
  color: var(--neutral-400);
}

.flatpickr-day.selected.startRange::before, .flatpickr-day.startRange.startRange::before, .flatpickr-day.endRange.startRange::before {
  background-color: var(--SAFlag-100);
}

.flatpickr-day.selected.endRange::before, .flatpickr-day.startRange.endRange::before, .flatpickr-day.endRange.endRange::before {
  background-color: var(--SAFlag-100);
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  -webkit-box-shadow: -2px 0 0 var(--SAFlag-100), 5px 0 0 var(--SAFlag-100);
  box-shadow: -2px 0 0 var(--SAFlag-100), 5px 0 0 var(--SAFlag-100);
}

.flatpickr-day.inRange {
  background-color: var(--SAFlag-100);
  -webkit-box-shadow: -5px 0 0 var(--SAFlag-100), 5px 0 0 var(--SAFlag-100);
  box-shadow: -5px 0 0 var(--SAFlag-100), 5px 0 0 var(--SAFlag-100);
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 var(--SAFlag-100);
  box-shadow: -10px 0 0 var(--SAFlag-100);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--SAFlag-600);
}

.flatpickr-months .flatpickr-prev-month:focus svg,
.flatpickr-months .flatpickr-next-month:focus svg {
  fill: var(--SAFlag-800);
}

/*--- END DATE PICKER ---*/
html, body {
  font-family: var(--font-family);
}

/*--- ACCORDION ---*/
.accordion-item {
  border: 0px;
  border-top: 1px var(--border-neutral-primary) solid !important;
}

.accordion-item:last-child {
  border-bottom: 1px var(--border-neutral-primary) solid !important;
}

.accordion-item * {
  transition: all 0.35s ease-in-out;
}

.accordion-header .accordion-button {
  font-size: var(--text-text-md);
  font-weight: var(--font-semi-bold);
  color: var(--text-default);
  border: 2px solid transparent;
}

.accordion-header .accordion-button:hover {
  background-color: var(--neutral-100);
}

.accordion-header .accordion-button:focus {
  box-shadow: none;
  background-color: var(--neutral-25);
  /*border: 2px var(--border-black) solid;*/
}

.accordion-header .accordion-button:disabled {
  border-top: 1px var(--border-neutral-primary) solid;
  color: var(--neutral-400);
}

.accordion-header .accordion-button:after {
  background-size: 0.9rem;
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  border-bottom: 0px none transparent;
  box-shadow: none;
}

.accordion-item.disabled .accordion-body {
  color: var(--neutral-400);
}

/*--- END ACCORDION ---*/
/*--- AVATAR ---*/
.avatar {
  position: relative;
  background-color: var(--neutral-100);
  border: 4px solid var(--border-white);
  text-align: center;
  overflow: hidden;
  border-radius: var(--radius-8);
}

.avatar > img {
  position: absolute;
  z-index: 1;
  width: 100%;
  min-height: 100%;
  top: 50%;
  right: -0.5px;
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  object-fit: cover;
}

.avatar-xxl {
  width: 120px;
  height: 120px;
}

.avatar-xl {
  width: 80px;
  height: 80px;
}

.avatar-l {
  width: 64px;
  height: 64px;
}

.avatar-md {
  width: 48px;
  height: 48px;
}

.avatar-sm {
  width: 40px;
  height: 40px;
}

.avatar-xs {
  width: 32px;
  height: 32px;
}

.avatar-xxs {
  width: 24px;
  height: 24px;
}

.avatar > span, .avatar > i {
  position: relative;
  vertical-align: top;
}

.avatar .icon-user {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(/images//controls/default_user.svg);
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
}

.avatar-xxl > span {
  font-size: 36px;
  line-height: 115px;
  font-weight: var(--font-regular);
}

.avatar-xl > span {
  font-size: 30px;
  line-height: 75px;
  font-weight: var(--font-regular);
}

.avatar-l > span {
  font-size: 20px;
  line-height: 58px;
  font-weight: var(--font-medium);
}

.avatar-md > span {
  font-size: 16px;
  line-height: 42px;
  font-weight: var(--font-medium);
}

.avatar-sm > span {
  font-size: 14px;
  line-height: 33px;
  font-weight: var(--font-semi-bold);
}

.avatar-xs > span {
  font-size: 12px;
  line-height: 26px;
  font-weight: var(--font-semi-bold);
}

.avatar-xxs > span {
  font-size: 10px;
  line-height: 18px;
  font-weight: var(--font-bold);
}

.avatar-xxl i {
  font-size: 70px;
  line-height: 110px;
}

.avatar-xl > i {
  font-size: 48px;
  line-height: 72px;
}

.avatar-l > i {
  font-size: 36px;
  line-height: 56px;
}

.avatar-md > i {
  font-size: 28px;
  line-height: 40px;
}

.avatar-sm > i {
  font-size: 22px;
  line-height: 32px;
}

.avatar-xs > i {
  font-size: 18px;
  line-height: 24px;
}

.avatar-xxs > i {
  font-size: 12px;
  line-height: 16px;
}

/*--- END AVATAR ---*/
/*--- BREADCRUMB ---*/
.breadcrumb {
  font-size: var(--font-size-s);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--neutral-400);
  content: "❯";
}

.breadcrumb-item a {
  text-decoration: none;
  color: var(--neutral-700);
}

.breadcrumb-item.active {
  color: var(--neutral-400);
}

/*--- END BREADCRUMB ---*/
/*--- BUTTONS ---*/
.dga-btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-weight: var(--font-medium);
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: all 0.35s ease-in-out;
  border: 2px solid transparent;
  border-radius: var(--border-radius-sm);
  height: 40px;
  font-size: var(--font-size-base);
  padding: var(--space-none) var(--space-xl);
}

a.dga-btn {
  line-height: 37px;
}

.dga-btn:focus {
  box-shadow: 0 0 0 1px #FFFFFF inset;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.dga-btn.btn-lg {
  height: 40px;
  font-size: var(--font-size-base);
  padding: var(--space-none) var(--space-xl);
}

.dga-btn.btn-md {
  height: 36px;
  font-size: var(--font-size-s);
  padding: var(--space-none) var(--space-lg);
}

.dga-btn.btn-sm {
  height: 30px;
  font-size: var(--font-size-xs);
  padding: var(--space-none) var(--space-md);
}

.dga-btn:disabled {
  cursor: not-allowed;
}

/* --- Normal --- */
.dga-neutral {
  background-color: var(--neutral-950);
  color: var(--text-oncolor-primary);
}

.dga-neutral:hover {
  background-color: var(--neutral-800);
}

.dga-neutral:focus {
  background-color: var(--neutral-950);
  border: 2px solid var(--neutral-950);
}

.dga-neutral:disabled {
  background-color: var(--neutral-200);
  color: var(--neutral-400);
}

.dga-primary {
  background-color: var(--color-primary);
  color: var(--text-oncolor-primary);
}

.dga-primary:hover {
  color: var(--text-oncolor-primary);
  background-color: var(--color-primary-700);
}

.dga-primary:focus {
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.dga-primary:disabled {
  background-color: var(--neutral-200);
  color: var(--neutral-400);
}

.dga-secondary-solid {
  background-color: var(--neutral-100);
}

.dga-secondary-solid:hover {
  background-color: var(--neutral-200);
}

.dga-secondary-solid:focus {
  background-color: var(--neutral-200);
  color: var(--text-default);
  border: 2px solid var(--text-default);
}

.dga-secondary-solid:disabled {
  background-color: var(--neutral-200);
  color: var(--neutral-400);
}

.dga-secondary-outline {
  background-color: var(--alpha-white-0);
  border-color: var(--neutral-300);
  color: var(--text-default);
}

.dga-secondary-outline.on-color {
  color: var(--neutral-25);
}

.dga-secondary-outline:hover {
  background-color: var(--neutral-100);
  border-color: var(--neutral-200);
}

.dga-secondary-outline.on-color:hover {
  color: var(--text-primary);
}

.dga-secondary-outline:focus {
  background-color: var(--alpha-white-0);
  color: var(--text-default);
  border: 2px solid var(--text-default);
}

.dga-secondary-outline:disabled {
  background-color: var(--alpha-white-0);
  border-color: var(--neutral-200);
  color: var(--neutral-400);
}

.dga-transparent {
  background-color: var(--alpha-white-0);
}

.dga-transparent:hover {
  color: var(--SAFlag-700);
}

.dga-transparent:focus {
  color: var(--text-default);
  border: 2px solid var(--text-default);
}

.dga-transparent:disabled {
  color: var(--neutral-400);
}

/* --- Destructive --- */
.dga-destructive-primary {
  background-color: var(--red-600);
  color: var(--text-oncolor-primary);
}

.dga-destructive-primary:hover {
  background-color: var(--red-700);
}

.dga-destructive-primary:focus {
  background-color: var(--red-600);
  border: 2px solid var(--border-black);
}

.dga-destructive-secondary-solid {
  background-color: var(--red-50);
  color: var(--text-error);
}

.dga-destructive-secondary-solid:hover {
  background-color: var(--red-100);
}

.dga-destructive-secondary-solid:focus {
  background-color: var(--red-50);
  border: 2px solid var(--border-black);
}

.dga-destructive-secondary-outline {
  background-color: var(--alpha-white-0);
  color: var(--text-error);
  border-color: var(--border-error-light);
}

.dga-destructive-secondary-outline:hover {
  background-color: var(--red-100);
  border-color: var(--border-error-light);
}

.dga-destructive-secondary-outline:focus {
  background-color: var(--alpha-white-0);
  color: var(--text-error);
  border: 2px solid var(--text-default);
}

.dga-destructive-transparent {
  background-color: var(--alpha-white-0);
  color: var(--text-error);
}

.dga-destructive-transparent:hover {
  background-color: var(--red-100);
}

.dga-destructive-transparent:focus {
  background-color: var(--alpha-white-0);
  border: 2px solid var(--border-black);
}

/*--- END BUTTONS ---*/
/*--- CARD ---*/
.card {
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  box-shadow: none !important;
  transition: all 0.35s ease;
}

.card:hover {
  background-color: var(--neutral-50);
}

.card:focus {
  border-color: var(--border-black);
}

.card.disabled {
  background-color: var(--neutral-200);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}

.card.disabled .card-title, .card.disabled .card-text {
  color: var(--neutral-400);
}

.card.disabled button {
  opacity: 0.7;
}

.card.disabled * {
  cursor: none !important;
}

.card.default {
  border-color: transparent;
}

.card.stroke {
  border-color: var(--neutral-300);
}

.card.shadow {
  box-shadow: var(--shadow-md) !important;
}

.card-icon {
  position: relative;
  display: block;
  margin-bottom: var(--space-3xl);
}

.card-title {
  color: var(--text-display);
  margin-bottom: var(--space-md);
  font-weight: var(--font-bold);
  font-size: var(--font-size-h6);
  line-height: 1.6;
}

.card-text {
  color: var(--text-display);
  font-weight: var(--font-regular);
  font-size: var(--font-size-base);
  margin-bottom: var(--space-3xl);
}

.card-footer-action {
  position: relative;
  display: block;
}

.card-header-action {
  position: absolute;
  top: 15px;
  left: var(--space-md);
}

.card-footer-action button {
  margin-left: var(--space-xl);
}

/*--- ICONS ---*/
.dga-icon {
  display: inline-block;
  text-align: center;
}

.icon-block {
  font-weight: var(--font-bold);
  border-radius: var(--border-radius-full);
  background-color: var(--color-primary-100);
  color: var(--text-primary);
  padding: var(--space-lg);
  font-size: 24px;
}

.dga-icon.outline {
  border: 1px solid;
}

.dga-icon.xl {
  padding: calc(var(--space-lg) + 2px);
  font-size: 28px;
  line-height: 28px;
}

.dga-icon.lg {
  padding: var(--space-lg);
  font-size: 24px;
  line-height: 24px;
}

.dga-icon.md {
  padding: calc(var(--space-md) + 2px);
  font-size: 20px;
  line-height: 20px;
}

.dga-icon.sm {
  padding: var(--space-md);
  font-size: 16px;
  line-height: 16px;
}

.dga-icon.brand {
  background-color: var(--color-primary-100);
  color: var(--text-primary);
}

.dga-icon.brand.light {
  background-color: var(--color-primary-100);
  color: var(--text-primary);
}

.dga-icon.brand.outline {
  background-color: var(--alpha-white-0);
  border-color: var(--green-700);
  color: var(--text-primary);
}

.dga-icon.brand.dark {
  background-color: var(--color-success-600);
  color: var(--color-text-white);
}

.dga-icon.gray {
  background-color: var(--neutral-50);
  color: var(--text-default);
}

.dga-icon.gray.light {
  background-color: var(--neutral-50);
  color: var(--text-default);
}

.dga-icon.gray.outline {
  background-color: var(--alpha-white-0);
  border-color: var(--neutral-300);
  color: var(--neutral-700);
}

.dga-icon.gray.dark {
  background-color: var(--neutral-400);
  color: var(--color-text-white);
}

.dga-icon.error {
  background-color: var(--red-50);
  color: var(--color-error-700);
}

.dga-icon.error.light {
  background-color: var(--red-50);
  color: var(--color-error-700);
}

.dga-icon.error.outline {
  background-color: var(--alpha-white-0);
  border-color: var(--color-error-700);
  color: var(--color-error-700);
}

.dga-icon.error.dark {
  background-color: var(--red-600);
  color: var(--color-text-white);
}

.dga-icon.warning {
  background-color: var(--yellow-50);
  color: var(--color-warning-700);
}

.dga-icon.warning.light {
  background-color: var(--yellow-50);
  color: var(--color-warning-700);
}

.dga-icon.warning.outline {
  background-color: var(--alpha-white-0);
  border-color: var(--color-warning-700);
  color: var(--color-warning-700);
}

.dga-icon.warning.dark {
  background-color: var(--yellow-600);
  color: var(--color-text-white);
}

.dga-icon.success {
  background-color: var(--color-success-50);
  color: var(--green-700);
}

.dga-icon.success.light {
  background-color: var(--color-success-50);
  color: var(--green-700);
}

.dga-icon.success.outline {
  background-color: var(--alpha-white-0);
  border-color: var(--green-700);
  color: var(--green-700);
}

.dga-icon.success.dark {
  background-color: var(--color-success-600);
  color: var(--color-text-white);
}

.dga-icon.info {
  background-color: var(--blue-50);
  color: var(--color-info-700);
}

.dga-icon.info.light {
  background-color: var(--blue-50);
  color: var(--color-info-700);
}

.dga-icon.info.outline {
  background-color: var(--alpha-white-0);
  border-color: var(--color-info-700);
  color: var(--color-info-700);
}

.dga-icon.info.dark {
  background-color: var(--color-text-info-600);
  color: var(--color-text-white);
}

.dga-icon.rounded {
  border-radius: var(--border-radius-full);
}

.dga-icon.careved {
  border-radius: var(--border-radius-md);
}

/*--- END ICONS ---*/
/*--- CHECKBOX ---*/
.form-check {
  display: flex;
  align-items: center;
}

.form-check label {
  font-weight: var(--font-medium);
  font-size: var(--font-size-base);
  color: var(--neutral-800);
  vertical-align: top;
  padding-right: var(--space-md);
}

.form-check label span {
  display: block;
  font-weight: var(--font-regular);
  font-size: var(--font-size-s);
  color: var(--neutral-700);
  padding: var(--space-xs) var(--space-none);
}

.form-check .validation {
  position: relative;
  display: block;
  font-size: var(--font-size-s);
  font-weight: var(--font-medium);
  margin-right: -1.5rem;
}

.form-check .validation.error {
  color: var(--text-error);
}

.form-check .validation.success {
  color: var(--text-success);
}

.form-check .validation.info {
  color: var(--text-info);
}

.form-check .validation.warning {
  color: var(--text-warning);
}

.form-check .validation i {
  vertical-align: top;
  margin-left: var(--space-lg);
}

.check-lg {
  min-height: 30PX;
}

.check-lg label {
  line-height: 24px;
}

.check-md {
  min-height: 26PX;
}

.check-md label {
  line-height: 20px;
}

.check-md .form-check-input {
  width: 20px !important;
  height: 20px !important;
}

.check-sm {
  min-height: 22PX;
}

.check-sm label {
  line-height: 16px;
}

.check-sm .form-check-input {
  width: 16px !important;
  height: 16px !important;
}

.form-check-input {
  width: 20px;
  height: 20px;
  border-color: var(--neutral-500);
  transition: all 0.25s ease-in-out;
}

.form-check-input[type=checkbox] {
  border-radius: var(--border-radius-xs) !important;
}

.check-lg .form-check-input {
  width: 24px;
  height: 24px;
}

.check-md .form-check-input {
  width: 20px;
  height: 20px;
}

.check-sm .form-check-input {
  width: 16px;
  height: 16px;
}

.form-check-input:focus {
  border-color: var(--neutral-500);
  box-shadow: 0 0 0 0.45rem var(--neutral-100);
  -webkit-border-radius: var(--radius-full);
  -moz-border-radius: var(--radius-full);
  border-radius: var(--radius-full);
}

.check-primary .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.check-primary .form-check-input:checked:hover {
  background-color: var(--color-primary-800);
  border-color: var(--color-primary-800);
}

.check-neutral .form-check-input:checked {
  background-color: var(--neutral-950);
  border-color: var(--neutral-950);
}

.check-neutral .form-check-input:checked:hover {
  background-color: var(--neutral-600);
  border-color: var(--neutral-600);
}

input[readonly].form-check-input:checked {
  background-color: var(--neutral-100);
  border-color: var(--neutral-400);
  background-size: 60%;
}

input[readonly].form-check-input:checked:hover {
  background-color: var(--neutral-100);
  border-color: var(--neutral-400);
}

.check-primary input[readonly].form-check-input:checked {
  background-image: url(/images/primary_checbox.svg);
}

.check-primary .form-check-input[type=checkbox]:indeterminate {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url(/images/check_indeterminate.svg);
  background-size: 60%;
}

.check-primary .form-check-input[type=checkbox]:indeterminate:hover {
  background-color: var(--color-primary-800);
  border-color: var(--color-primary-800);
  background-image: url(/images/check_indeterminate.svg);
  background-size: 60%;
}

.check-neutral .form-check-input[type=checkbox]:indeterminate {
  background-color: var(--neutral-950);
  border-color: var(--neutral-950);
  background-image: url(/images/check_indeterminate.svg);
  background-size: 60%;
}

.check-neutral .form-check-input[type=checkbox]:indeterminate:hover {
  background-color: var(--neutral-600);
  border-color: var(--neutral-600);
  background-image: url(/images/check_indeterminate.svg);
  background-size: 60%;
}

.check-neutral input[readonly].form-check-input:checked {
  background-image: url(/images/neutral_checbox.svg);
}

input[readonly].form-check-input:indeterminate {
  background-color: var(--neutral-100) !important;
  border-color: var(--neutral-400) !important;
  background-size: 60%;
}

.check-primary input[readonly].form-check-input:indeterminate {
  background-image: url(/images/primary_indeterminate.svg);
}

.check-neutral input[readonly].form-check-input:indeterminate {
  background-image: url(/images/neutral_indeterminate.svg);
}

input[disabled].form-check-input:checked {
  background-color: var(--neutral-300);
  border-color: var(--neutral-300);
}

input[disabled].form-check-input:checked:hover {
  background-color: var(--neutral-300);
  border-color: var(--neutral-300);
}

.check-primary input[disabled].form-check-input:indeterminate {
  background-color: var(--neutral-300);
  border-color: var(--neutral-300);
}

.check-neutral input[disabled].form-check-input:indeterminate {
  background-color: var(--neutral-300);
  border-color: var(--neutral-300);
}

/*--- END CHECKBOX ---*/
/*--- CONTENT SWITCHER ---*/
.btn-group .btn {
  transition: all 0.35s ease-in-out;
}

.btn-group .btn-outline-primary {
  border-color: var(--neutral-300);
  color: var(--text-default);
  font-size: var(--font-size-h6);
  background-color: var(--neutral-100);
}

.btn-group .btn-outline-primary:hover {
  border-color: var(--neutral-300);
  color: var(--text-default);
  background-color: var(--neutral-100);
}

.btn-group .btn-check:checked + .btn {
  background-color: var(--neutral-950);
  border-color: var(--neutral-950);
  color: var(--neutral-100);
}

.OnColor.btn-group .btn-outline-primary {
  border-color: var(--border-transparent-10);
  color: var(--text-oncolor-primary);
  font-size: var(--font-size-h6);
  background-color: var(--alpha-white-20);
}

.OnColor.btn-group .btn-outline-primary:hover {
  border-color: var(--border-transparent-10);
  color: var(--text-oncolor-primary);
  background-color: var(--alpha-white-20);
}

.OnColor.btn-group .btn-check:checked + .btn {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-oncolor-primary);
}

/*--- END CONTENT SWITCHER ---*/
/*--- SELECT DROPDOWN ---*/
select.form-control {
  background-color: var(--color-neutral-0);
  border-color: var(--neutral-400);
  height: 40px;
  transition: all 0.35s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNTAzMSA3LjEyOTRDNS42MDQ2NyA3LjI2Mzg4IDUuOTA3OTMgNy42NjUzNCA2LjA4ODUzIDcuODk2NzZDNi40NTAyNiA4LjM2MDI3IDYuOTQ0NTIgOC45NzYxOCA3LjQ3NzY5IDkuNTkwMjZDOC4wMTM1NiAxMC4yMDc0IDguNTc2NDggMTAuODA4NSA5LjA3NjU4IDExLjI1MDRDOS4zMjczNCAxMS40NzIgOS41NDc2MiAxMS42NDAzIDkuNzI5MzkgMTEuNzQ5OUM5LjkwMDM1IDExLjg1MyAxMC4wMDEzIDExLjg3NDQgMTAuMDAxMyAxMS44NzQ0QzEwLjAwMTMgMTEuODc0NCAxMC4wOTk0IDExLjg1MyAxMC4yNzAzIDExLjc0OTlDMTAuNDUyMSAxMS42NDAzIDEwLjY3MjQgMTEuNDcyIDEwLjkyMzEgMTEuMjUwNEMxMS40MjMyIDEwLjgwODUgMTEuOTg2MSAxMC4yMDc0IDEyLjUyMiA5LjU5MDI1QzEzLjA1NTIgOC45NzYxNiAxMy41NDk0IDguMzYwMjUgMTMuOTExMiA3Ljg5NjczQzE0LjA5MTggNy42NjUzMSAxNC4zOTQ2IDcuMjY0NDIgMTQuNDk2MiA3LjEyOTk0QzE0LjcwMDkgNi44NTIgMTUuMDkyNSA2Ljc5MjA2IDE1LjM3MDUgNi45OTY3NUMxNS42NDg0IDcuMjAxNDUgMTUuNzA3OCA3LjU5MjY5IDE1LjUwMzEgNy44NzA2M0wxNS41MDE1IDcuODcyNzNDMTUuMzk1IDguMDEzNzYgMTUuMDgwOSA4LjQyOTYzIDE0Ljg5NjYgOC42NjU3N0MxNC41MjY3IDkuMTM5NzUgMTQuMDE4IDkuNzczODQgMTMuNDY1OSAxMC40MDk4QzEyLjkxNjUgMTEuMDQyNiAxMi4zMTE3IDExLjY5MTUgMTEuNzUwOCAxMi4xODcxQzExLjQ3MSAxMi40MzQzIDExLjE4NzUgMTIuNjU2NiAxMC45MTU3IDEyLjgyMDRDMTAuNjYxIDEyLjk3MzkgMTAuMzM4NiAxMy4xMjUgOS45OTk4NSAxMy4xMjVDOS42NjEwOSAxMy4xMjUgOS4zMzg2OCAxMi45NzM5IDkuMDg0MDQgMTIuODIwNEM4LjgxMjIzIDEyLjY1NjYgOC41Mjg2NiAxMi40MzQzIDguMjQ4OTEgMTIuMTg3MUM3LjY4Nzk4IDExLjY5MTUgNy4wODMyNSAxMS4wNDI2IDYuNTMzODIgMTAuNDA5OEM1Ljk4MTY5IDkuNzczODYgNS40NzMgOS4xMzk3OCA1LjEwMzEgOC42NjU4QzQuOTE4NzEgOC40Mjk1MyA0LjYwNDY0IDguMDEzNzEgNC40OTgzIDcuODcyOTJMNC40OTY5IDcuODcxMDdDNC4yOTIyIDcuNTkzMTMgNC4zNTEyOCA3LjIwMTQ5IDQuNjI5MjIgNi45OTY3OUM0LjkwNzE0IDYuNzkyMSA1LjI5ODQgNi44NTE0OSA1LjUwMzEgNy4xMjk0WiIgZmlsbD0iIzE2MTYxNiIvPgo8L3N2Zz4K");
  background-repeat: no-repeat;
  background-position-y: 50%;
  background-size: 20px;
  background-position-x: var(--space-md);
}

select.select-lg {
  height: 40px;
  font-size: var(--font-size-base);
}

select.select-md {
  height: 32px;
  line-height: 1;
  font-size: var(--font-size-s);
}

select.form-control:required:invalid {
  color: var(--neutral-500);
}

select.form-control option[value=""][disabled] {
  display: none;
}

select.form-control option {
  color: var(--text-default);
}

select.form-control:hover {
  border-color: var(--neutral-700);
}

select.form-control:focus {
  border-color: var(--neutral-700);
  -webkit-box-shadow: inset 0px -1.2px 0px 0px var(--neutral-700);
  -moz-box-shadow: inset 0px -1.2px 0px 0px var(--neutral-700);
  box-shadow: inset 0px -1.2px 0px 0px var(--neutral-700);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjQ5NjkgMTIuODcwNkMxNC4zOTUzIDEyLjczNjEgMTQuMDkyMSAxMi4zMzQ3IDEzLjkxMTUgMTIuMTAzMkMxMy41NDk3IDExLjYzOTcgMTMuMDU1NSAxMS4wMjM4IDEyLjUyMjMgMTAuNDA5N0MxMS45ODY0IDkuNzkyNTYgMTEuNDIzNSA5LjE5MTQ4IDEwLjkyMzQgOC43NDk2MUMxMC42NzI3IDguNTI4MDUgMTAuNDUyNCA4LjM1OTY5IDEwLjI3MDYgOC4yNTAxMUMxMC4wOTk2IDguMTQ3MDQgOS45OTg2NiA4LjEyNTYxIDkuOTk4NjYgOC4xMjU2MUM5Ljk5ODY2IDguMTI1NjEgOS45MDA2NCA4LjE0NzA0IDkuNzI5NjkgOC4yNTAxQzkuNTQ3OTEgOC4zNTk2OCA5LjMyNzYzIDguNTI4MDQgOS4wNzY4NyA4Ljc0OTYxQzguNTc2NzggOS4xOTE0OCA4LjAxMzg1IDkuNzkyNTYgNy40Nzc5OSAxMC40MDk4QzYuOTQ0ODIgMTEuMDIzOCA2LjQ1MDU2IDExLjYzOTcgNi4wODg4MyAxMi4xMDMzQzUuOTA4MjIgMTIuMzM0NyA1LjYwNTM5IDEyLjczNTYgNS41MDM4MiAxMi44NzAxQzUuMjk5MTIgMTMuMTQ4IDQuOTA3NDUgMTMuMjA3OSA0LjYyOTUyIDEzLjAwMzJDNC4zNTE1OCAxMi43OTg2IDQuMjkyMjEgMTIuNDA3MyA0LjQ5NjkgMTIuMTI5NEw0LjQ5ODQ4IDEyLjEyNzNDNC42MDUgMTEuOTg2MiA0LjkxOTExIDExLjU3MDQgNS4xMDMzOSAxMS4zMzQyQzUuNDczMjkgMTAuODYwMiA1Ljk4MTk4IDEwLjIyNjIgNi41MzQxMSA5LjU5MDI0QzcuMDgzNTQgOC45NTc0MyA3LjY4ODI3IDguMzA4NTEgOC4yNDkyIDcuODEyODhDOC41Mjg5NSA3LjU2NTcgOC44MTI1MyA3LjM0MzQzIDkuMDg0MzMgNy4xNzk1OEM5LjMzODk4IDcuMDI2MDcgOS42NjEzOSA2Ljg3NSAxMC4wMDAyIDYuODc1QzEwLjMzODkgNi44NzUgMTAuNjYxMyA3LjAyNjA3IDEwLjkxNiA3LjE3OTU5QzExLjE4NzggNy4zNDM0NCAxMS40NzEzIDcuNTY1NyAxMS43NTExIDcuODEyODhDMTIuMzEyIDguMzA4NTEgMTIuOTE2NyA4Ljk1NzQyIDEzLjQ2NjIgOS41OTAyM0MxNC4wMTgzIDEwLjIyNjEgMTQuNTI3IDEwLjg2MDIgMTQuODk2OSAxMS4zMzQyQzE1LjA4MTMgMTEuNTcwNSAxNS4zOTU0IDExLjk4NjMgMTUuNTAxNyAxMi4xMjcxTDE1LjUwMzEgMTIuMTI4OUMxNS43MDc4IDEyLjQwNjkgMTUuNjQ4NyAxMi43OTg1IDE1LjM3MDggMTMuMDAzMkMxNS4wOTI5IDEzLjIwNzkgMTQuNzAxNiAxMy4xNDg1IDE0LjQ5NjkgMTIuODcwNloiIGZpbGw9IiMxNjE2MTYiLz4KPC9zdmc+Cg==");
}

select.form-control.select-error {
  border-color: var(--red-700);
}

select.form-control.select-error:focus {
  border-color: var(--red-700);
  -webkit-box-shadow: inset 0px -1.2px 0px 0px var(--red-700);
  -moz-box-shadow: inset 0px -1.2px 0px 0px var(--red-700);
  box-shadow: inset 0px -1.2px 0px 0px var(--red-700);
}

select.form-control.select-light {
  border-color: var(--alpha-white-0);
}

select.form-control.select-light:hover {
  border-color: var(--neutral-400);
}

select.form-control.select-dark {
  border-color: var(--alpha-white-0);
  background-color: var(--neutral-100);
}

select.form-control.select-dark:hover {
  border-color: var(--neutral-400);
}

select.form-control.select-error-dark {
  background-color: var(--neutral-100);
  border-color: var(--red-700);
}

select.form-control.select-error-dark:focus {
  border-color: var(--red-700);
  -webkit-box-shadow: inset 0px -1.2px 0px 0px var(--red-700);
  -moz-box-shadow: inset 0px -1.2px 0px 0px var(--red-700);
  box-shadow: inset 0px -1.2px 0px 0px var(--red-700);
}

/* CUSTOM SELECT*/
.select.btn-group {
  width: 100%;
}

.select.btn-group .select-btn {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--neutral-400);
  height: 40px;
  padding-right: var(--space-lg);
  padding-left: var(--space-lg);
  font-size: var(--font-size-base);
  background-color: var(--white);
  color: var(--neutral-500);
  transition: all 0.35s ease;
  text-align: right;
}

.select.btn-group .select-btn:hover {
  border-color: var(--neutral-500);
}

.select.btn-group.select-lg .select-btn {
  height: 40px;
  font-size: var(--font-size-base);
}

.select.btn-group.select-md .select-btn {
  height: 32px;
  font-size: var(--font-size-s);
}

.select.btn-group .select-btn::after {
  position: absolute;
  content: "";
  height: 100%;
  top: 0;
  width: 20px;
  line-height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  border: 0px;
  margin-right: 0;
  margin-left: 0;
  background-size: 100%;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNTAzMSA3LjEyOTRDNS42MDQ2NyA3LjI2Mzg4IDUuOTA3OTMgNy42NjUzNCA2LjA4ODUzIDcuODk2NzZDNi40NTAyNiA4LjM2MDI3IDYuOTQ0NTIgOC45NzYxOCA3LjQ3NzY5IDkuNTkwMjZDOC4wMTM1NiAxMC4yMDc0IDguNTc2NDggMTAuODA4NSA5LjA3NjU4IDExLjI1MDRDOS4zMjczNCAxMS40NzIgOS41NDc2MiAxMS42NDAzIDkuNzI5MzkgMTEuNzQ5OUM5LjkwMDM1IDExLjg1MyAxMC4wMDEzIDExLjg3NDQgMTAuMDAxMyAxMS44NzQ0QzEwLjAwMTMgMTEuODc0NCAxMC4wOTk0IDExLjg1MyAxMC4yNzAzIDExLjc0OTlDMTAuNDUyMSAxMS42NDAzIDEwLjY3MjQgMTEuNDcyIDEwLjkyMzEgMTEuMjUwNEMxMS40MjMyIDEwLjgwODUgMTEuOTg2MSAxMC4yMDc0IDEyLjUyMiA5LjU5MDI1QzEzLjA1NTIgOC45NzYxNiAxMy41NDk0IDguMzYwMjUgMTMuOTExMiA3Ljg5NjczQzE0LjA5MTggNy42NjUzMSAxNC4zOTQ2IDcuMjY0NDIgMTQuNDk2MiA3LjEyOTk0QzE0LjcwMDkgNi44NTIgMTUuMDkyNSA2Ljc5MjA2IDE1LjM3MDUgNi45OTY3NUMxNS42NDg0IDcuMjAxNDUgMTUuNzA3OCA3LjU5MjY5IDE1LjUwMzEgNy44NzA2M0wxNS41MDE1IDcuODcyNzNDMTUuMzk1IDguMDEzNzYgMTUuMDgwOSA4LjQyOTYzIDE0Ljg5NjYgOC42NjU3N0MxNC41MjY3IDkuMTM5NzUgMTQuMDE4IDkuNzczODQgMTMuNDY1OSAxMC40MDk4QzEyLjkxNjUgMTEuMDQyNiAxMi4zMTE3IDExLjY5MTUgMTEuNzUwOCAxMi4xODcxQzExLjQ3MSAxMi40MzQzIDExLjE4NzUgMTIuNjU2NiAxMC45MTU3IDEyLjgyMDRDMTAuNjYxIDEyLjk3MzkgMTAuMzM4NiAxMy4xMjUgOS45OTk4NSAxMy4xMjVDOS42NjEwOSAxMy4xMjUgOS4zMzg2OCAxMi45NzM5IDkuMDg0MDQgMTIuODIwNEM4LjgxMjIzIDEyLjY1NjYgOC41Mjg2NiAxMi40MzQzIDguMjQ4OTEgMTIuMTg3MUM3LjY4Nzk4IDExLjY5MTUgNy4wODMyNSAxMS4wNDI2IDYuNTMzODIgMTAuNDA5OEM1Ljk4MTY5IDkuNzczODYgNS40NzMgOS4xMzk3OCA1LjEwMzEgOC42NjU4QzQuOTE4NzEgOC40Mjk1MyA0LjYwNDY0IDguMDEzNzEgNC40OTgzIDcuODcyOTJMNC40OTY5IDcuODcxMDdDNC4yOTIyIDcuNTkzMTMgNC4zNTEyOCA3LjIwMTQ5IDQuNjI5MjIgNi45OTY3OUM0LjkwNzE0IDYuNzkyMSA1LjI5ODQgNi44NTE0OSA1LjUwMzEgNy4xMjk0WiIgZmlsbD0iIzE2MTYxNiIvPgo8L3N2Zz4K");
  transition: all 0.25s ease-in-out;
  left: 12px;
}

.select.btn-group .select-btn.show::after {
  transform: rotate(180deg);
}

.select.btn-group .select-btn.show {
  -webkit-box-shadow: inset 0px -1.2px 0px 0px var(--neutral-500);
  -moz-box-shadow: inset 0px -1.2px 0px 0px var(--neutral-500);
  box-shadow: inset 0px -1.2px 0px 0px var(--neutral-500);
}

.select.btn-group .dropdown-menu {
  width: 100%;
  margin-top: 8px;
}

.select.btn-group .dropdown-menu .dropdown-item {
  position: relative;
  font-size: var(--font-size-s);
  height: 37px;
}

.select.btn-group .select-btn.selected, .select.btn-group .dropdown-menu .dropdown-item {
  color: var(--icon-default);
}

.select.btn-group .dropdown-menu .dropdown-item:focus {
  background-color: var(--neutral-200);
}

.select.btn-group .dropdown-menu .dropdown-item.selected::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 9px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjY2NjYgNS41TDcuNDk5OTIgMTQuNjY2N0wzLjMzMzI1IDEwLjUiIHN0cm9rZT0iIzE2MTYxNiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
  left: 14px;
}

.select.btn-group.select-error .select-btn {
  border-color: var(--red-700);
}

.select.btn-group.select-error .select-btn.show {
  -webkit-box-shadow: inset 0px -1.2px 0px 0px var(--red-700);
  -moz-box-shadow: inset 0px -1.2px 0px 0px var(--red-700);
  box-shadow: inset 0px -1.2px 0px 0px var(--red-700);
}

.select.btn-group.select-light .select-btn {
  border-color: var(--alpha-white-0);
}

.select.btn-group.select-light .select-btn.show {
  border-color: var(--neutral-400);
  -webkit-box-shadow: inset 0px -1.2px 0px 0px var(--neutral-500);
  -moz-box-shadow: inset 0px -1.2px 0px 0px var(--neutral-500);
  box-shadow: inset 0px -1.2px 0px 0px var(--neutral-500);
}

.select.btn-group.select-light:hover .select-btn {
  border-color: var(--neutral-400);
}

.select.btn-group.select-dark .select-btn {
  border-color: var(--alpha-white-0);
  background-color: var(--neutral-100);
}

.select.btn-group.select-dark .select-btn.show {
  border-color: var(--neutral-400);
  -webkit-box-shadow: inset 0px -1.2px 0px 0px var(--neutral-500);
  -moz-box-shadow: inset 0px -1.2px 0px 0px var(--neutral-500);
  box-shadow: inset 0px -1.2px 0px 0px var(--neutral-500);
}

.select.btn-group.select-dark:hover .select-btn {
  border-color: var(--neutral-400);
}

.select.btn-group.select-error-dark .select-btn {
  background-color: var(--neutral-100);
  border-color: var(--red-700);
}

.select.btn-group.select-error-dark .select-btn.show {
  -webkit-box-shadow: inset 0px -1.2px 0px 0px var(--red-700);
  -moz-box-shadow: inset 0px -1.2px 0px 0px var(--red-700);
  box-shadow: inset 0px -1.2px 0px 0px var(--red-700);
}

/*--- END SELECT DROPDOWN ---*/
/*--- FILE UPLOAD ---*/
.filepond--root .filepond--drop-label {
  background-color: var(--neutral-100);
}

.filepond--root .filepond--drop-label {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='rgb(210, 214, 219)' stroke-width='3' stroke-dasharray='16%2c 11' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
  border-radius: 4px;
}

.filepond--drop-label.filepond--drop-label label {
  padding: var(--space-3xl);
}

.filepond--root {
  height: max-content !important;
}

.filepond--drop-label.filepond--drop-label label h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-medium);
  margin: var(--space-xxl);
  color: var(--neutral-800);
}

.filepond--drop-label.filepond--drop-label label .upload-desc {
  font-size: var(--font-size-xs);
  color: var(--neutral-700);
  margin-bottom: var(--space-3xl);
}

.filepond--drop-label label span.filepond--label-action {
  font-size: var(--font-size-s);
  font-weight: var(--font-medium);
}

.filepond--item {
  background-color: var(--neutral-100);
  border: 1px solid var(--neutral-300);
}

.filepond--action-remove-item {
  color: var(--icon-default) !important;
}

.filepond--file-info .filepond--file-info-main {
  font-size: var(--font-size-s) !important;
  color: var(--text-default);
}

.filepond--processing-complete-indicator {
  float: right;
}

.filepond--root {
  text-align: right;
}

.filepond--file-status {
  text-align: left;
}

.filepond--file .filepond--file-action-button {
  left: 0px;
}

.upload-container h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-regular);
}

.upload-container span.file-upload-desc {
  font-size: var(--font-size-xs);
  font-weight: var(--font-regular);
  padding: var(--space-lg) var(--space-none);
}

.single-upload-holder .inputfile + label {
  background-color: var(--neutral-950);
  padding: var(--space-none) var(--space-lg);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-s);
}

.single-upload-holder .inputfile + label:hover {
  background-color: var(--neutral-800);
}

.single-upload-holder .inputfile + label:focus {
  background-color: var(--neutral-950);
  box-shadow: 0 0 0 1px #FFFFFF inset;
  border: 1px solid var(--icon-default);
}

.single-upload-holder .inputfile + label.UploadFileName {
  width: 100%;
  display: block;
  background-color: var(--neutral-100);
  border: 1px solid var(--neutral-300);
  height: 36px;
  line-height: 36px;
}

.single-upload-holder .inputfile + label.UploadFileName > span {
  position: relative;
  font-size: var(--font-size-s);
  color: var(--text-default);
  display: block;
}

.clrupload {
  left: 0px;
}

.alert {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border: 1px solid var(--neutral-300);
  padding: var(--space-xl) var(--space-3xl) var(--space-md);
  -webkit-box-shadow: inset -8px 0px 0px 0px var(--neutral-200);
  -moz-box-shadow: inset -8px 0px 0px 0px var(--neutral-200);
  box-shadow: inset -8px 0px 0px 0px var(--neutral-200);
}

.alert .alert-text {
  display: inline-flex;
  flex-direction: row;
  margin-bottom: var(--space-xl);
}

.alert-text > span {
  margin-left: var(--space-lg);
}

.alert-text .alert-details h6 {
  font-weight: var(--font-semi-bold);
  font-size: var(--font-size-base);
  color: var(--neutral-800);
  margin-bottom: var(--space-md);
}

.alert-text .alert-details > span {
  font-size: var(--font-size-s);
  color: var(--neutral-700);
}

.alert.light-neutral {
  background-color: var(--white);
  border-color: var(--neutral-300);
  -webkit-box-shadow: inset -8px 0px 0px 0px var(--neutral-200);
  -moz-box-shadow: inset -8px 0px 0px 0px var(--neutral-200);
  box-shadow: inset -8px 0px 0px 0px var(--neutral-200);
}

.alert.light-info {
  background-color: var(--white);
  border-color: var(--neutral-300);
  -webkit-box-shadow: inset -8px 0px 0px 0px rgba(21, 112, 239, 0.7);
  -moz-box-shadow: inset -8px 0px 0px 0px rgba(21, 112, 239, 0.7);
  box-shadow: inset -8px 0px 0px 0px rgba(21, 112, 239, 0.7);
}

.alert.light-destructive {
  background-color: var(--white);
  border-color: var(--neutral-300);
  -webkit-box-shadow: inset -8px 0px 0px 0px rgba(217, 45, 32, 0.7);
  -moz-box-shadow: inset -8px 0px 0px 0px rgba(217, 45, 32, 0.7);
  box-shadow: inset -8px 0px 0px 0px rgba(217, 45, 32, 0.7);
}

.alert.light-warning {
  background-color: var(--white);
  border-color: var(--neutral-300);
  -webkit-box-shadow: inset -8px 0px 0px 0px rgba(220, 104, 3, 0.7);
  -moz-box-shadow: inset -8px 0px 0px 0px rgba(220, 104, 3, 0.7);
  box-shadow: inset -8px 0px 0px 0px rgba(220, 104, 3, 0.7);
}

.alert.light-success {
  background-color: var(--white);
  border-color: var(--neutral-300);
  -webkit-box-shadow: inset -8px 0px 0px 0px rgba(7, 148, 85, 0.7);
  -moz-box-shadow: inset -8px 0px 0px 0px rgba(7, 148, 85, 0.7);
  box-shadow: inset -8px 0px 0px 0px rgba(7, 148, 85, 0.7);
}

.alert.colored-neutral {
  background-color: var(--neutral-25);
  border-color: var(--neutral-300);
  -webkit-box-shadow: inset -8px 0px 0px 0px rgba(229, 231, 235, 0.7);
  -moz-box-shadow: inset -8px 0px 0px 0px rgba(229, 231, 235, 0.7);
  box-shadow: inset -8px 0px 0px 0px rgba(229, 231, 235, 0.7);
}

.alert.colored-info {
  background-color: var(--blue-25);
  border-color: var(--blue-200);
  -webkit-box-shadow: inset -8px 0px 0px 0px rgba(21, 112, 239, 0.7);
  -moz-box-shadow: inset -8px 0px 0px 0px rgba(21, 112, 239, 0.7);
  box-shadow: inset -8px 0px 0px 0px rgba(21, 112, 239, 0.7);
}

.alert.colored-info .alert-text .alert-details h6 {
  color: var(--text-info);
}

.alert.colored-destructive {
  background-color: var(--red-25);
  border-color: var(--red-200);
  -webkit-box-shadow: inset -8px 0px 0px 0px rgba(217, 45, 32, 0.7);
  -moz-box-shadow: inset -8px 0px 0px 0px rgba(217, 45, 32, 0.7);
  box-shadow: inset -8px 0px 0px 0px rgba(217, 45, 32, 0.7);
}

.alert.colored-destructive .alert-text .alert-details h6 {
  color: var(--text-error);
}

.alert.colored-warning {
  background-color: var(--color-warning-25);
  border-color: var(--color-warning-200);
  -webkit-box-shadow: inset -8px 0px 0px 0px rgba(220, 104, 3, 0.7);
  -moz-box-shadow: inset -8px 0px 0px 0px rgba(220, 104, 3, 0.7);
  box-shadow: inset -8px 0px 0px 0px rgba(220, 104, 3, 0.7);
}

.alert.colored-warning .alert-text .alert-details h6 {
  color: var(--text-warning);
}

.alert.colored-success {
  background-color: var(--color-success-25);
  border-color: var(--color-success-200);
  -webkit-box-shadow: inset -8px 0px 0px 0px rgba(7, 148, 85, 0.7);
  -moz-box-shadow: inset -8px 0px 0px 0px rgba(7, 148, 85, 0.7);
  box-shadow: inset -8px 0px 0px 0px rgba(7, 148, 85, 0.7);
}

.alert.colored-success .alert-text .alert-details h6 {
  color: var(--text-success);
}

/*--- END FILE UPLOAD ---*/
/*--- LINK ---*/
.lnk {
  position: relative;
  display: inline-block;
  text-decoration: none;
  border: 1px solid transparent;
}

.lnk.inline {
  text-decoration: underline;
}

.lnk-lg {
  font-size: var(--font-size-h6);
  line-height: 26px;
}

.lnk-md {
  font-size: var(--font-size-base);
  line-height: 24px;
}

.lnk-sm {
  font-size: var(--font-size-s);
  line-height: 20px;
}

.lnk-primary {
  color: var(--color-primary);
}

.lnk-neutral {
  color: var(--neutral-700);
}

.lnk-oncolor {
  color: var(--white);
}

.lnk-primary:hover {
  color: var(--color-primary-400);
}

.lnk-neutral:hover {
  color: var(--neutral-500);
}

.lnk-oncolor:hover {
  color: var(--alpha-white-80);
}

.lnk:focus {
  border: 1px solid var(--icon-default);
}

.lnk-primary:focus {
  color: var(--color-primary-hover);
  border-color: var(--icon-default);
}

.lnk-neutral:focus {
  color: var(--neutral-700);
  border-color: var(--icon-default);
}

.lnk-oncolor:focus {
  color: var(--white);
  border-color: var(--white);
}

/*--- END LINK ---*/
/*--- LIST ---*/
.list {
  position: relative;
  display: block;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.list-primary {
  color: var(--text-primary);
}

.list-neutral {
  color: var(--text-default);
}

.list .list-item {
  height: 24px;
  line-height: 24px;
  font-size: var(--font-size-base);
}

.list-icon > .list-item:before {
  content: url("/images/primary-check-circle.svg");
  height: 16px;
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-top: 3px;
  margin-left: var(--space-md);
}

.list-icon.list-primary > .list-item:before, .list-icon.list-primary .sub-list .list > .list-item:before {
  content: url("/images/primary-check-circle.svg");
}

.list-icon.list-neutral > .list-item:before, .list-icon.list-neutral .sub-list .list > .list-item:before {
  content: url("/images/neutral-check-circle.svg");
}

.list-icon.list-oncolor > .list-item:before, .list-icon.list-oncolor .sub-list .list > .list-item:before {
  content: url("/images/oncolor-check-circle.svg");
}

.list .sub-list {
  margin-right: var(--space-3xl);
}

.sub-list .list > .list-item:before {
  height: 16px;
  width: 16px;
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-top: 3px;
  margin-left: var(--space-md);
}

.list-unorder > .list-item:before {
  text-align: center;
  content: "‑";
  font-weight: var(--font-bold);
  width: 16px;
  height: 16px;
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-left: var(--space-md);
}

.list-unorder .sub-list .list-item:before {
  text-align: center;
  content: "•";
  font-weight: var(--font-bold);
  width: 16px;
  height: 16px;
  line-height: 16px;
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-left: var(--space-md);
}

.list-ordered {
  list-style: decimal;
}

.list-ordered .list-item {
  margin-right: var(--space-3xl);
}

.list-ordered li.sub-list {
  list-style: none;
  margin-right: var(--space-none);
}

.list-ordered .sub-list ul li:nth-child(1)::before {
  content: "أ.";
}

.list-ordered .sub-list ul li:nth-child(2)::before {
  content: "ب.";
}

.list-ordered .sub-list ul li:nth-child(3)::before {
  content: "ج.";
}

.list-ordered .sub-list ul li:nth-child(4)::before {
  content: "د.";
}

.list-ordered .sub-list ul li:nth-child(5)::before {
  content: "ه.";
}

.list-ordered .sub-list ul li:nth-child(6)::before {
  content: "و.";
}

.list-ordered .sub-list ul li:nth-child(7)::before {
  content: "ز.";
}

.list-ordered .sub-list ul li:nth-child(8)::before {
  content: "ح.";
}

.list-ordered .sub-list ul li:nth-child(9)::before {
  content: "ط.";
}

.list-ordered .sub-list ul li:nth-child(10)::before {
  content: "ي.";
}

.list-ordered .sub-list ul li:nth-child(11)::before {
  content: "ك.";
}

.list-ordered .sub-list ul li:nth-child(12)::before {
  content: "ل.";
}

.list-ordered .sub-list ul li:nth-child(13)::before {
  content: "م.";
}

.list-ordered .sub-list ul li:nth-child(14)::before {
  content: "ن.";
}

.list-ordered .sub-list ul li:nth-child(15)::before {
  content: "س.";
}

.list-ordered .sub-list ul li:nth-child(16)::before {
  content: "ع.";
}

.list-ordered .sub-list ul li:nth-child(17)::before {
  content: "ف.";
}

.list-ordered .sub-list ul li:nth-child(18)::before {
  content: "ص.";
}

.list-ordered .sub-list ul li:nth-child(19)::before {
  content: "ق.";
}

.list-ordered .sub-list ul li:nth-child(20)::before {
  content: "ر.";
}

.list-ordered .sub-list ul li:nth-child(21)::before {
  content: "ش.";
}

.list-ordered .sub-list ul li:nth-child(22)::before {
  content: "ت.";
}

.list-ordered .sub-list ul li:nth-child(23)::before {
  content: "ث.";
}

.list-ordered .sub-list ul li:nth-child(24)::before {
  content: "خ.";
}

.list-ordered .sub-list ul li:nth-child(25)::before {
  content: "ذ.";
}

.list-ordered .sub-list ul li:nth-child(26)::before {
  content: "ض.";
}

.list-ordered .sub-list ul li:nth-child(27)::before {
  content: "ظ.";
}

.list-ordered .sub-list ul li:nth-child(28)::before {
  content: "غ.";
}

/*--- END LIST ---*/
/*--- LOADER ---*/
.loader {
  width: 32px;
  height: 32px;
  border: 3px solid var(--neutral-100);
  border-bottom-color: green;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.loader.loader-oncolor {
  border-color: var(--alpha-white-30);
  border-bottom-color: var(--white);
}

.loader.loader-primary {
  border-bottom-color: var(--color-primary);
}

.loader.loader-neutral {
  border-bottom-color: var(--icon-default);
}

.loader-xxl {
  width: 44px;
  height: 44px;
  border-width: 4px;
}

.loader-xl {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

.loader-lg {
  width: 36px;
  height: 36px;
  border-width: 3px;
}

.loader-md {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.loader-sm {
  width: 28px;
  height: 28px;
  border-width: 2px;
}

.loader-xs {
  width: 24px;
  height: 24px;
  border-width: 2px;
}

.loader-xxs {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*--- END LOADER ---*/
/*--- MODAL ---*/
.modal-header {
  align-items: start;
  padding: var(--space-3xl) var(--space-3xl) var(--space-md);
  border-bottom: none;
}

.modal-header .btn-close {
  background-size: 12px !important;
}

.modal-header .modal-title {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
  font-size: var(--font-size-h6);
  font-weight: var(--font-semi-bold);
  color: var(--neutral-800);
}

.modal-header .modal-title i {
  display: block;
  margin-bottom: var(--space-md);
}

.modal-body {
  padding: var(--space-none) var(--space-3xl) var(--space-xl) var(--space-3xl);
  color: var(--neutral-700);
  font-size: var(--font-size-s);
}

.modal-footer {
  border-top: none;
  padding: var(--space-none) var(--space-3xl) var(--space-3xl) var(--space-3xl);
  flex-wrap: nowrap;
}

.modal-footer .action-item {
  position: relative;
  display: inline-flex;
  width: 100%;
}

.modal-footer .action-item.first {
  justify-content: start;
}

.modal-footer .action-item.end {
  justify-content: end;
}

.modal-footer .action-item.start button {
  margin-left: var(--space-md);
}

.modal-footer .action-item.end button {
  margin-right: var(--space-md);
}

.modal-sm .modal-footer {
  flex-direction: column;
}

.modal-sm .modal-footer .action-item {
  flex-direction: column;
  margin: 0px;
}

.modal-sm .modal-footer .action-item button {
  margin-right: 0px !important;
  margin-left: 0px !important;
  margin-bottom: var(--space-md);
}

/*--- END MODAL ---*/
/*--- SWITCH ---*/
.form-switch .form-check-input {
  width: 48px;
  height: 24px;
  margin: 0px;
  border-radius: var(--radius-9999) !important;
  border-color: var(--neutral-950);
  --bs-form-switch-bg: url(/images/switch-default-icon.svg) !important;
}

.form-switch:hover .form-check-input {
  --bs-form-switch-bg: url(/images/switch-hover-icon.svg);
}

.form-switch:focus .form-check-input {
  --bs-form-switch-bg: url(/images/switch-focus-icon.svg) !important;
}

.form-check-input:checked {
  --bs-form-switch-bg: url(/images/switch-active-icon.svg) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary);
}

.form-check-input:checked:hover {
  --bs-form-switch-bg: url(/images/switch-active-icon.svg);
  background-color: var(--color-primary-800) !important;
  border-color: var(--color-primary-800) !important;
}

.form-check-input:checked:focus {
  --bs-form-switch-bg: url(/images/switch-active-icon.svg);
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

input[disabled].form-check-input:checked {
  --bs-form-switch-bg: url(/images/switch-active-icon.svg) !important;
  background-color: var(--neutral-300) !important;
}

/*--- END SWITCH ---*/
/*--- MENU ---*/
.menu-sub-head {
  position: relative;
  display: block;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-md) var(--space-none) var(--space-xl);
}

.menu-item {
  position: relative;
  display: flex;
  width: 100%;
  padding: var(--space-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-regular);
}

.menu-item span {
  position: relative;
  display: inline-flex;
  font-size: var(--font-size-base);
  font-weight: var(--font-regular);
  width: 100%;
}

.menu-item-icon {
  position: relative;
  display: inline-flex;
  width: 24px;
  min-width: 24px;
  height: 24px;
  background-image: url(/images/menu-item-icon.svg);
  margin-left: var(--space-md);
}

.menu-item em {
  position: relative;
  display: inline-flex;
  height: 24px;
  width: 24px;
  min-width: max-content;
  text-align: center;
  font-style: normal;
}

.menu-item em .form-check {
  padding-right: var(--space-none);
  padding-left: var(--space-none);
}

.menu-item.check-item em {
  background-image: url(/images/menu-check.svg);
}

.menu-area {
  background-color: var(---white);
  border: 1px solid var(--neutral-300);
  border-radius: var(--border-radius-md);
}

.menu-block {
  padding: var(--space-md);
  border-bottom: 1px solid var(--neutral-300);
}

.menu-block:last-child {
  border-bottom: transparent;
}

/*--- END MENU ---*/
/*--- TAGS ---*/
.dga-tag {
  position: relative;
  display: inline-grid !important;
  width: fit-content;
  min-width: max-content;
  grid-auto-flow: column;
  grid-column-gap: var(--space-xs);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.tag-md {
  height: 32px;
  line-height: 32px;
  font-size: var(--font-size-base) !important;
  padding: var(--space-none) var(--space-lg);
  font-weight: var(--font-medium) !important;
}

.tag-md > i {
  font-size: var(--font-size-base) !important;
}

.tag-sm {
  height: 24px;
  line-height: 24px;
  font-size: var(--font-size-xs) !important;
  padding: var(--space-none) var(--space-md);
  font-weight: var(--font-medium) !important;
}

.tag-sm > i {
  font-size: var(--font-size-xs) !important;
}

.tag-xs {
  height: 20px;
  line-height: 20px;
  font-size: var(--font-size-xxs) !important;
  padding: var(--space-none) var(--space-md);
  font-weight: var(--font-semi-bold) !important;
}

.tag-xs > i {
  font-size: var(--font-size-xxs) !important;
}

.tag-neutral {
  color: var(--neutral-800);
  background-color: var(--neutral-50);
  border-color: var(--neutral-200);
}

.tag-success {
  color: var(--color-success-800);
  background-color: var(--color-success-50);
  border-color: var(--green-200);
}

.tag-error {
  color: var(--color-error-800);
  background-color: var(--color-error-50);
  border-color: var(--color-error-200);
}

.tag-warning {
  color: var(--color-warning-800);
  background-color: var(--color-warning-50);
  border-color: var(--color-warning-200);
}

.tag-info {
  color: var(--color-info-800);
  background-color: var(--color-info-50);
  border-color: var(--color-info-200);
}

.tag-oncolor {
  color: var(--text-oncolor-primary);
  background-color: var(--alpha-white-20);
  border-color: transparent;
}

.tag-oncolor.tag-outline {
  color: var(--text-oncolor-primary);
  background-color: transparent;
  border-color: var(--alpha-white-60);
}

/*--- END TAGS ---*/
/*--- SYSTEM TAGS ---*/
.dga-stag {
  position: relative;
  display: inline-block;
  font-weight: var(--font-medium);
  color: var(--neutral-800);
  border-radius: var(--radius-9999);
}

.dga-stag.inverted {
  color: var(--white);
  background-color: var(--neutral-600);
}

.dga-stag:before {
  position: relative;
  display: inline-block;
  content: "";
  width: 10px;
  height: 10px;
  background-color: var(--neutral-600);
  border-radius: var(--radius-full);
  vertical-align: middle;
  margin-left: var(--space-md);
}

.dga-stag.inverted:before {
  background-color: var(--alpha-white-60);
}

.dga-stag.subtle, .dga-stag.inverted {
  padding-right: var(--space-md);
  padding-left: var(--space-md);
}

.dga-stag.subtle.lg, .dga-stag.inverted.lg {
  padding-right: var(--space-xl);
  padding-left: var(--space-xl);
}

.dga-stag.lg {
  height: 32px;
  line-height: 32px;
  font-size: var(--font-size-base);
}

.dga-stag.md {
  height: 24px;
  line-height: 24px;
  font-size: var(--font-size-s);
}

.dga-stag.sm {
  height: 20px;
  line-height: 20px;
  font-size: var(--font-size-xxs);
}

.dga-stag.neutral.subtle {
  background-color: var(--neutral-50);
  color: var(--neutral-800);
}

.dga-stag.neutral.subtle:before {
  background-color: var(--neutral-600);
}

.dga-stag.neutral.ghost:before {
  background-color: var(--neutral-600);
}

.dga-stag.info.subtle {
  background-color: var(--blue-50);
  color: var(--blue-800);
}

.dga-stag.info.subtle:before {
  background-color: var(--blue-800);
}

.dga-stag.info.ghost:before {
  background-color: var(--blue-800);
}

.dga-stag.success.subtle {
  background-color: var(--color-success-50);
  color: var(--color-success-800);
}

.dga-stag.success.subtle:before {
  background-color: var(--color-success-800);
}

.dga-stag.success.ghost:before {
  background-color: var(--color-success-800);
}

.dga-stag.warning.subtle {
  background-color: var(--color-warning-50);
  color: var(--color-warning-800);
}

.dga-stag.warning.subtle:before {
  background-color: var(--color-warning-800);
}

.dga-stag.warning.ghost:before {
  background-color: var(--color-warning-800);
}

.dga-stag.error.subtle {
  background-color: var(--color-error-50);
  color: var(--color-error-800);
}

.dga-stag.error.subtle:before {
  background-color: var(--color-error-800);
}

.dga-stag.error.ghost:before {
  background-color: var(--color-error-800);
}

.dga-stag.inverted:before {
  background-color: var(--alpha-white-60);
}

.dga-stag.inverted {
  color: var(--white);
}

.dga-stag.neutral.inverted {
  background-color: var(--neutral-600);
}

.dga-stag.info.inverted {
  background-color: var(--color-info-600);
}

.dga-stag.success.inverted {
  background-color: var(--color-success-600);
}

.dga-stag.warning.inverted {
  background-color: var(--color-warning-600);
}

.dga-stag.error.inverted {
  background-color: var(--color-error-600);
}

/*--- END SYSTEM TAGS ---*/
/*--- NOTIFICATION ---*/
.notification {
  position: relative;
  display: flex;
  border-radius: var(--radius-xs);
  width: 100%;
  padding: var(--space-xl) var(--space-3xl);
  background-color: var(--color-background-body);
  align-items: center;
}

.notification::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  opacity: 0.6;
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  background-color: var(--icon-default);
}

.notification-content {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-column-gap: var(--space-md);
  width: 100%;
  height: 40px;
  line-height: 40px;
  align-items: center;
  justify-content: start;
  font-size: var(--font-size-base);
}

.notification-content > em {
  position: relative;
  display: inline;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.notification-content > h6 {
  position: relative;
  display: inline;
  font-weight: var(--font-bold);
  margin-bottom: 0;
}

.notification-content > span {
  position: relative;
  display: inline;
  width: 100%;
  font-weight: var(--font-regular);
}

.notification > em {
  background-image: url(/images/mini_close.svg);
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  opacity: 0.9;
  transition: all 0.35s ease-in-out;
}

.notification > em:hover {
  opacity: 0.35;
}

.notification-critical {
  background-color: var(--color-error-50);
  color: var(--text-error);
}

.notification-critical::after {
  background-color: var(--color-error-600);
}

.notification-critical .notification-content > em {
  background-image: url(/images/icon-critical.svg);
}

.notification-warning {
  background-color: var(--color-warning-50);
  color: var(--text-warning);
}

.notification-warning::after {
  background-color: var(--color-warning-600);
}

.notification-warning .notification-content > em {
  background-image: url(/images/icon-warning.svg);
}

.notification-success {
  background-color: var(--color-success-50);
  color: var(--text-success);
}

.notification-success::after {
  background-color: var(--color-success-600);
}

.notification-success .notification-content > em {
  background-image: url(/images/icon-success.svg);
}

.notification-info {
  background-color: var(--color-info-50);
  color: var(--text-info);
}

.notification-info::after {
  background-color: var(--color-info-600);
}

.notification-info .notification-content > em {
  background-image: url(/images/icon-info.svg);
}

.notification-neutral {
  background-color: var(--color-background-body);
  color: var(--text-neutral);
}

.notification-neutral::after {
  background-color: var(--icon-default);
}

.notification-neutral .notification-content > em {
  background-image: url(/images/icon-neutral.svg);
}

/*--- END NOTIFICATION ---*/
/*--- TOAST ---*/
.toast-container {
  width: 464px;
}

.toast {
  align-items: start;
  display: flex;
  flex-direction: column;
  border: 0px none transparent;
  width: 100%;
  padding: var(--space-xl) var(--space-3xl);
  overflow: hidden;
  border-radius: var(--radius-8);
  background-color: var(--white);
}

.toast::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 100%;
  top: 0;
  opacity: 0.7;
  background-color: var(--neutral-200);
  right: 0px;
  border-radius: var(--radius-0) var(--radius-8) var(--radius-8) var(--radius-0);
}

.toast-body {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-column-gap: var(--space-lg);
  flex-direction: row;
  align-items: start;
  width: 100%;
}

.toast .toast-body .toast-content {
  width: 100%;
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

.toast .toast-body .toast-content h6 {
  font-weight: var(--font-semi-bold);
  font-size: var(--font-size-base);
}

.toast .toast-body .toast-content span {
  font-size: var(--font-size-s);
}

.toast .toast-body .btn-close {
  float: left;
}

.btn-close {
  width: 20px;
  height: 20px;
  background-size: 11px;
}

.toast .toast-action {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-column-gap: var(--space-md);
  padding-right: var(--space-6xl);
}

.toast.toast-neutral::before {
  background-color: var(--neutral-200);
}

.toast.toast-info::before {
  background-color: var(--color-info-600);
}

.toast.toast-error::before {
  background-color: var(--color-text-error-600);
}

.toast.toast-warning::before {
  background-color: var(--color-text-warning-600);
}

.toast.toast-success::before {
  background-color: var(--color-text-success-600);
}

/*--- END TOAST ---*/
/*--- PAGINIATION ---*/
.pagination {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: var(--space-md);
  justify-content: center;
}

.page-item a {
  height: 100%;
  padding: var(--space-none) var(--space-xs);
  border: 0px transparent none;
  text-align: center;
  color: var(--text-default);
  background-color: transparent;
  border-radius: var(--radius-4);
  border: 2px solid transparent;
}

.page-item.active a {
  background-color: transparent;
  border-color: transparent;
  color: var(--icon-default);
  border-bottom: 2px solid var(--color-primary);
}

.page-item:hover, .page-item:hover a {
  border-radius: var(--radius-4);
  color: var(--text-default);
  background-color: var(--neutral-100);
  border-color: transparent;
}

.page-item:focus, .page-item a:focus {
  width: 100%;
  height: 100%;
  border: 2px solid var(--icon-default);
  box-shadow: none;
}

.page-prev, .page-next {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

.page-prev {
  background-image: url(../images/icons/arrow-right.svg);
}

.page-next {
  background-image: url(../images/icons/arrow-left.svg);
}

.pagination-lg .page-item {
  height: 40px;
  line-height: 40px;
  font-size: var(--font-size-base);
}

.pagination-lg .page-item a {
  padding: var(--space-none) var(--space-md);
}

.pagination-lg .page-prev, .pagination-lg .page-next {
  width: 40px !important;
}

.pagination-lg .page-item.extra-items a {
  width: 40px;
}

.pagination-md .page-item {
  height: 32px;
  line-height: 32px;
  font-size: var(--font-size-base);
}

.pagination-md .page-item a {
  padding: var(--space-none) var(--space-sm);
}

.pagination-md .page-prev, .pagination-md .page-next {
  width: 32px !important;
}

.pagination-md .page-item.extra-items a {
  width: 32px;
}

.pagination-sm .page-item {
  height: 24px;
  line-height: 24px;
  font-size: var(--font-size-s);
}

.pagination-sm .page-item a {
  padding: var(--space-none) var(--space-xs);
}

.pagination-sm .page-prev, .pagination-sm .page-next {
  width: 24px !important;
}

.pagination-sm .page-item.extra-items a {
  width: 24px;
}

.page-item.extra-items a {
  text-align: center;
  color: var(--icon-default);
  border-radius: var(--radius-4);
  border: 1px solid var(--icon-default);
}

/*--- END PAGINIATION ---*/
/*--- RADIO ---*/
.primary-radio .form-check-input, .neutral-radio .form-check-input {
  width: 24px;
  height: 24px;
}

.primary-radio .form-check-input {
  border-color: var(--neutral-500) !important;
}

.primary-radio .form-check-input:checked {
  background-color: transparent !important;
  background-image: url(/images/controls/radio-primary_default.svg) !important;
  background-size: 15px;
  border-color: var(--color-primary) !important;
}

.primary-radio .form-check-input:checked:hover {
  background-image: url(/images/controls/radio-primary_hover.svg) !important;
  border-color: var(--color-primary-800) !important;
}

.primary-radio input[disabled].form-check-input {
  border-color: var(--neutral-400) !important;
  background-color: transparent !important;
}

.primary-radio input[disabled].form-check-input:checked {
  background-image: url(/images/controls/radio-disabled.svg) !important;
  border-color: var(--neutral-400) !important;
  background-color: transparent !important;
}

.neutral-radio .form-check-input {
  border-color: var(--neutral-950) !important;
}

.neutral-radio .form-check-input:checked {
  background-color: transparent !important;
  background-image: url(/images/controls/radio-neutral_default.svg) !important;
  background-size: 15px;
  border-color: var(--neutral-950) !important;
}

.neutral-radio .form-check-input:checked:hover {
  background-image: url(/images/controls/radio-neutral_hover.svg) !important;
  border-color: var(--neutral-600) !important;
}

.neutral-radio input[disabled].form-check-input {
  border-color: var(--neutral-400) !important;
  background-color: transparent !important;
}

.neutral-radio input[disabled].form-check-input:checked {
  background-image: url(/images/controls/radio-disabled.svg) !important;
  border-color: var(--neutral-400) !important;
  background-color: transparent !important;
}

/*--- END RADIO ---*/
/*--- RATING ---*/
.rateit {
  display: -moz-inline-box;
  display: inline-block;
  position: relative;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.rateit * {
  background-repeat: no-repeat;
}

.rateit .rateit-range {
  position: relative;
  display: -moz-inline-box;
  display: inline-block;
  background: url(/images/controls/rate-empty.svg);
  background-size: 48px;
  height: 48px;
  outline: none;
}

.rateit .rateit-range * {
  display: block;
}

/* for IE 6 */
* html .rateit, * html .rateit .rateit-range {
  display: inline;
}

/* for IE 7 */
* + html .rateit, * + html .rateit .rateit-range {
  display: inline;
}

.rateit .rateit-hover, .rateit .rateit-selected {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
}

.rateit .rateit-hover-rtl, .rateit .rateit-selected-rtl {
  left: auto;
  right: 0;
}

.rateit .rateit-hover {
  background: url(/images/controls/rate-default.svg);
  background-size: 48px;
  color: rgb(239, 197, 41);
}

.rate-default .rateit-hover {
  background: url(/images/controls/rate-default.svg);
}

.rate-brand .rateit-hover {
  background: url(/images/controls/rate-brand.svg);
}

.rateit .rateit-hover-rtl {
  background-position: right -48px;
}

.rateit .rateit-selected {
  background: url(/images/controls/rate-default.svg);
  background-size: 48px;
  color: rgb(191, 66, 66);
}

.rate-default .rateit-selected {
  background: url(/images/controls/rate-default.svg);
}

.rate-brand .rateit-selected {
  background: url(/images/controls/rate-brand.svg);
}

.rateit .rateit-selected-rtl {
  background-position: right -48px;
}

.rateit .rateit-preset {
  background: url(/images/controls/rate-default.svg);
  background-size: 48px;
  color: rgb(239, 107, 34);
}

.rate-default .rateit-preset {
  background: url(/images/controls/rate-default.svg);
}

.rate-brand .rateit-preset {
  background: url(/images/controls/rate-brand.svg);
}

.rateit .rateit-preset-rtl {
  background: url(/images/controls/rate-empty.svg);
  background-size: 48px;
}

.rateit button.rateit-reset {
  /*background: url(../scss/delete.gif) 0 0;*/
  width: 48px;
  height: 48px;
  /*display: -moz-inline-box;*/
  display: none !important;
  float: left;
  outline: none;
  border: none;
  padding: 0;
}

.rateit .rateit-reset span {
  display: none;
}

.rateit button.rateit-reset:hover, .rateit button.rateit-reset:focus {
  background-position: 0 -48px;
}

.rateit-font .rateit-range {
  background: none;
  height: auto;
  width: 240px;
}

.rateit-font .rateit-empty {
  color: #ccc;
}

.rateit-font .rateit-range > div, .rateit-font .rateit-range > span {
  background: none;
  overflow: hidden;
  cursor: default;
}

.rateit.rateit-font .rateit-reset {
  font-size: inherit;
  background: none;
  width: 0.6em;
  height: 0.6em;
  margin-top: 0.2em;
  background: gray;
  border-radius: 50%;
  position: relative;
}

.rateit.rateit-font .rateit-reset span {
  display: block;
  font-weight: bold;
  color: white;
  height: calc(50% - 0.045em);
  top: 0;
  position: absolute;
  border-bottom: 0.09em solid white;
  width: 72%;
  margin-left: 14%;
}

.rateit.rateit-font .rateit-reset:hover, .rateit.rateit-font button.rateit-reset:focus {
  background: #e6574b; /* Old browsers */
  background: radial-gradient(ellipse at center, #e6574b 55%, #f6836b 77%, #f9d3cc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-position: 0 0;
}

.rate-lg .rateit-range {
  width: 240px !important;
  background-size: 48px;
  height: 48px !important;
}

.rate-lg .rateit-hover {
  background-size: 48px;
}

.rate-lg .rateit-hover-rtl {
  height: 48px !important;
  background-position: right -48px;
}

.rate-lg .rateit-selected {
  background-size: 48px !important;
}

.rate-lg .rateit-selected-rtl {
  width: 48px !important;
  height: 48px !important;
  background-position: right -48px !important;
}

.rate-lg .rateit-preset {
  background-size: 48px !important;
}

.rate-lg .rateit-preset-rtl {
  background-size: 48px !important;
}

.rate-lg button.rateit-reset {
  width: 48px !important;
  height: 48px !important;
}

.rate-lg button.rateit-reset:hover, .rate-lg button.rateit-reset:focus {
  background-position: 0 -48px !important;
}

.rate-md .rateit-range {
  width: 160px !important;
  background-size: 32px;
  height: 32px !important;
}

.rate-md .rateit-hover {
  background-size: 32px;
  height: 100% !important;
}

.rate-md .rateit-hover-rtl {
  height: 32px !important;
  background-position: right -32px;
}

.rate-md .rateit-selected {
  background-size: 32px !important;
  height: 100% !important;
}

.rate-md .rateit-selected-rtl {
  width: 32px !important;
  height: 32px !important;
  background-position: right -32px !important;
}

.rate-md .rateit-preset {
  background-size: 32px !important;
  height: 32px !important;
}

.rate-md .rateit-preset-rtl {
  background-size: 32px !important;
  height: 32px !important;
}

.rate-md button.rateit-reset {
  width: 32px !important;
  height: 32px !important;
}

.rate-md button.rateit-reset:hover, .rate-md button.rateit-reset:focus {
  background-position: 0 -32px !important;
}

.rate-sm .rateit-range {
  width: 120px !important;
  background-size: 24px;
  height: 24px !important;
}

.rate-sm .rateit-hover {
  background-size: 24px;
  height: 24px !important;
}

.rate-sm .rateit-hover-rtl {
  height: 24px !important;
  background-position: right -24px;
}

.rate-sm .rateit-selected {
  background-size: 24px !important;
  height: 24px !important;
}

.rate-sm .rateit-selected-rtl {
  width: 24px !important;
  height: 24px !important;
  background-position: right -24px !important;
}

.rate-sm .rateit-preset {
  background-size: 24px !important;
  height: 24px !important;
}

.rate-sm .rateit-preset-rtl {
  background-size: 24px !important;
  height: 24px !important;
}

.rate-sm button.rateit-reset {
  width: 24px !important;
  height: 24px !important;
}

.rate-sm button.rateit-reset:hover, .rate-md button.rateit-reset:focus {
  background-position: 0 -24px !important;
}

/*--- END RATING ---*/
/*--- INDICATORS ---*/
.indicators {
  position: relative;
  display: flex;
  list-style-position: inside;
  list-style-type: none;
  counter-reset: li;
  transition: all 0.35s ease-in-out;
}

.indicators * {
  transition: all 0.35s ease-in-out;
}

.indicators.horizontal {
  flex-direction: row;
}

.indicators.vertical {
  flex-direction: column;
}

.indicators .indicator {
  position: relative;
  display: block;
  flex-direction: row;
}

.indicators li.indicator:before {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 32px;
  height: 32px;
  line-height: 28px;
  font-weight: var(--font-medium);
  font-size: var(--font-size-base);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  counter-increment: li;
  content: counter(li, decimal);
  transition: all 0.35s ease-in-out;
}

.indicators li.indicator.current:before {
  color: var(--color-primary);
}

.indicators li.indicator.upcoming:before {
  color: var(--neutral-300);
  border-color: var(--neutral-300);
}

.indicators li.indicator.upcoming:hover:before {
  color: var(--neutral-400);
  border-color: var(--neutral-400);
}

.indicators li.indicator.upcoming:hover .indicator-bar {
  background-color: var(--neutral-400);
}

.indicators.horizontal .indicator {
  flex-direction: column;
  width: 100%;
}

.indicators.vertical .indicator {
  flex-direction: row;
  padding-bottom: 32px;
  height: 100%;
}

.indicators .indicator .indicator-check {
  position: relative;
  background-image: url(../images/controls/white_check.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
  display: none;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--white);
  border: 2px solid transparent;
}

.indicators .indicator.completed .indicator-check {
  display: inline-block;
  vertical-align: top;
}

.indicators .indicator.completed:before {
  visibility: hidden;
  display: inline-block;
  opacity: 0;
  height: 0px;
  width: 0px;
  overflow: hidden;
}

.indicators ::marker {
  position: absolute;
  top: 0;
  width: 30px;
  height: 30px;
  background-color: red;
  z-index: 10000;
  color: green;
}

.indicators.horizontal .indicator .indicator-bar {
  position: absolute;
  display: block;
  width: calc(100% - 32px);
  height: 1px;
  background-color: var(--color-primary);
  top: 16px;
  left: 0;
}

.indicators.vertical .indicator .indicator-bar {
  position: absolute;
  display: block;
  height: calc(100% - 32px);
  width: 1px;
  background-color: var(--color-primary);
  top: 32px;
  right: 16px;
}

.indicators .indicator:last-child .indicator-bar {
  display: none;
}

.indicators .indicator .indicator-text label {
  font-size: var(--font-size-base);
  font-weight: var(--font-regular);
  color: var(--neutral-800);
}

.indicators .indicator .indicator-text span {
  font-size: var(--font-size-s);
  font-weight: var(--font-regular);
  color: var(--neutral-700);
  margin-top: var(--space-xs);
}

.indicators.horizontal .indicator .indicator-text {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: var(--space-md);
  padding-left: var(--space-xl);
}

.indicators.vertical .indicator .indicator-text {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  max-width: calc(100% - 36px);
  padding-right: var(--space-md);
}

.indicators .indicator.upcoming .indicator-check {
  background-color: transparent;
  border-color: var(--neutral-300);
  color: var(--neutral-300);
}

.indicators .indicator.upcoming:hover .indicator-check {
  border-color: var(--neutral-400);
  color: var(--neutral-400);
}

.indicators .indicator.upcoming .indicator-bar {
  background-color: var(--neutral-300);
}

.indicators .indicator.upcoming .indicator-text label, .indicators .indicator.upcoming .indicator-text span {
  color: var(--neutral-500);
}

.indicators .indicator.completed .indicator-check {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
  margin-right: -8px;
}

.indicators .indicator.completed:hover .indicator-check {
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
}

.indicators .indicator.current .indicator-check {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.indicators .indicator.current .indicator-bar {
  background-color: var(--neutral-300);
}

.indicators .indicator.current .indicator-text label {
  font-weight: var(--font-medium);
}

.indicators.dots .indicator.completed .indicator-check {
  width: 16px;
  height: 16px;
  background-image: none;
}

.indicators.dots.vertical .indicator.completed .indicator-check {
  top: 4px;
}

.indicators.dots li.indicator.current:before {
  font-size: 0px;
  width: 16px;
  height: 16px;
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 3px var(--color-primary);
}

.indicators.dots.vertical li.indicator:before {
  top: 4px;
}

.indicators.dots li.indicator.upcoming:before {
  font-size: 0px;
  width: 16px;
  height: 16px;
  border-color: var(--neutral-300);
}

.indicators.dots li.indicator.upcoming:hover:before {
  border-color: var(--neutral-400);
}

.indicators.dots.horizontal .indicator .indicator-bar {
  width: calc(100% - 16px);
  top: 8px;
}

.indicators.dots.vertical .indicator .indicator-bar {
  height: calc(100% - 14px);
  top: 21px;
  right: 7.5px;
}

/*--- END INDICATORS ---*/
/*--- TABS ---*/
.dga-tabs {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  max-height: fit-content;
}

.dga-tabs.horizontal {
  flex-direction: column;
}

.dga-tabs.vertical {
  flex-direction: row;
}

.dga-tabs .nav-pills .nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  border: 3px solid transparent;
}

.dga-tabs .nav-pills .nav-link:focus-visible {
  border-color: var(--icon-default);
}

.dga-tabs.horizontal .nav-pills {
  border-bottom: 2px solid var(--neutral-300);
}

.dga-tabs.horizontal .nav-pills.no-border {
  border-bottom: 0px transparent none;
}

.dga-tabs.vertical .nav-pills {
  flex-direction: column;
}

.dga-tabs .nav-pills .nav-link {
  border-radius: var(--border-radius-sm);
  color: var(--neutral-700);
}

.dga-tabs .nav-pills .nav-link {
  position: relative;
}

.dga-tabs .nav-pills .nav-link:hover {
  background-color: var(--neutral-100);
}

.dga-tabs .nav-pills .nav-link[disabled] {
  color: var(--neutral-400);
}

.dga-tabs.tabs-lg .nav-pills .nav-link {
  height: 40px;
  line-height: 20px;
  font-size: var(--font-size-base);
  padding: var(--space-md) var(--space-lg);
}

.dga-tabs.tabs-md .nav-pills .nav-link {
  height: 32px;
  line-height: 16px;
  font-size: var(--font-size-s);
  padding: var(--space-sm) var(--space-lg);
}

.dga-tabs.tabs-sm .nav-pills .nav-link {
  height: 24px;
  line-height: 12px;
  font-size: var(--font-size-s);
  padding: var(--space-xxs) var(--space-sm);
}

.dga-tabs .nav-pills .nav-link i {
  vertical-align: top;
  font-weight: var(--font-regular) !important;
  margin-left: var(--space-xs);
}

.dga-tabs .nav-pills .nav-link.active {
  background-color: transparent;
  color: var(--text-default);
  font-weight: var(--font-bold);
}

.dga-tabs.horizontal .nav-pills .nav-link.active:after {
  position: absolute;
  content: "";
  bottom: -5px;
  width: 90%;
  height: 3px;
  background-color: var(--color-primary);
  right: 5%;
}

.dga-tabs.vertical .nav-pills .nav-link:after {
  position: absolute;
  content: "";
  top: 10%;
  height: 80%;
  width: 3px;
  opacity: 0;
  transition: all 0.35s linear;
  right: 0%;
}

.dga-tabs.vertical .nav-pills .nav-link.active:after {
  opacity: 1;
  background-color: var(--color-primary);
}

.dga-tabs.vertical .nav-pills .nav-link:hover:after {
  opacity: 1;
  background-color: var(--icon-default);
}

.dga-tabs .nav-pills .nav-link.active[disabled] {
  color: var(--neutral-400);
}

.dga-tabs .nav-pills .nav-link.active[disabled]:after {
  background-color: var(--neutral-400);
}

.dga-tabs.horizontal .tab-content {
  padding: var(--space-xl) var(--space-md);
}

.dga-tabs.vertical .tab-content {
  padding: var(--space-md) var(--space-xl);
}

/*--- END TABS ---*/
/*--- TABLE ---*/
table thead tr {
  border-top: 1px solid var(--neutral-300);
  border-bottom: 1px solid var(--neutral-300);
}

table.contained thead tr {
  border-right: 1px solid var(--neutral-300);
  border-left: 1px solid var(--neutral-300);
  height: 48px;
  line-height: 30px;
}

table thead tr th {
  background-color: var(--neutral-100) !important;
  color: var(--neutral-700) !important;
  padding: var(--space-xl) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-medium);
}

table thead tr th {
  border-left: 1px solid var(--neutral-300);
}

table tbody tr td {
  padding: var(--space-xl) var(--space-md);
  border-bottom: 1px solid var(--neutral-300) !important;
  background-color: transparent;
  font-size: var(--font-size-base);
  height: 64px;
  vertical-align: middle !important;
}

table.compact tbody tr td {
  height: 48px;
}

table.alternate-rows tbody tr:nth-child(even) td {
  background-color: var(--neutral-50) !important;
}

table tbody tr td:first-child {
  border-left: 1px solid var(--neutral-300) !important;
}

table.contained tbody tr {
  border-right: 1px solid var(--neutral-300) !important;
  border-left: 1px solid var(--neutral-300) !important;
}

table .form-check {
  padding-right: 0px;
  padding-left: 0px;
  width: fit-content;
  margin: 0 auto;
}

table .form-check .form-check-input {
  margin-right: 0px;
  margin-left: 0px;
}

table .control-cell {
  min-width: 52px;
}

table .action-cell {
  min-width: 64px;
  text-align: center;
}

/*--- END TABLE ---*/
/*--- TOOLTIP ---*/
.tooltip-inner {
  max-width: 280px !important;
  display: inline-flex;
  padding: var(--space-md);
}

.tooltip-block {
  position: relative;
  display: block;
  text-align: right;
  padding-right: var(--space-md);
  padding-left: var(--space-s);
}

.tooltip-inner:before {
  position: relative;
  display: inline-block;
  content: url(/images/controls/question_icon.svg);
  top: 2px;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  right: 0px;
}

.tooltip.show {
  -webkit-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.25);
}

.tooltip-block h6 {
  font-size: var(--font-size-xs);
  font-weight: var(--font-semi-bold);
  height: 18px;
  line-height: 18px;
  margin-top: 1px;
  margin-bottom: var(--space-s);
}

.dark .tooltip-block h6 {
  color: var(--neutral-50);
}

.light .tooltip-block h6 {
  color: var(--neutral-800);
}

.tooltip-block span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-regular);
  padding-bottom: var(--space-s);
}

.dark .tooltip-block span {
  color: var(--neutral-100);
}

.light .tooltip-block span {
  color: var(--neutral-700);
}

.dark.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .dark.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--neutral-800) !important;
}

.dark.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .dark.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--neutral-800) !important;
}

.dark.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .dark.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--neutral-800) !important;
}

.dark.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .dark.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: var(--neutral-800) !important;
}

.dark .tooltip-inner {
  background-color: var(--neutral-800);
}

.light.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .light.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--white) !important;
}

.light.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .light.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--white) !important;
}

.light.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .light.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--white) !important;
}

.light.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .light.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: var(--white) !important;
}

.light .tooltip-inner {
  background-color: var(--white);
}

/*--- END TOOLTIP ---*/
/*--- TEXTAREA ---*/
.form-control {
  border-color: var(--neutral-400);
  overflow-y: scroll;
  color: var(--icon-default);
  text-align: right;
}

.form-control.error {
  border-color: var(--color-error-700);
  overflow-y: scroll;
  color: var(--icon-default);
}

.form-control[disabled] {
  color: var(--neutral-400);
}

.form-control:hover {
  border-color: var(--neutral-700);
}

.form-control.error:hover {
  border-color: var(--color-error-700);
}

.form-control:focus {
  border-color: var(--neutral-700);
  border-bottom-width: 3px;
  border-bottom-color: var(--neutral-950);
  box-shadow: none;
  background-color: var(--neutral-100);
}

.form-control.error:focus {
  border-color: var(--color-error-700);
  border-bottom-color: var(--color-error-700);
}

.form-control[readonly] {
  border-color: var(--neutral-300);
  background-color: var(--alpha-white-0);
}

.form-control[readonly]:hover {
  border-color: var(--neutral-300);
  background-color: var(--alpha-white-0);
}

.form-control[readonly]:focus {
  border-color: var(--neutral-300);
  background-color: var(--alpha-white-0);
  border-bottom-width: 1px;
}

.form-control[disabled], .form-control.error[disabled] {
  border-color: var(--neutral-300);
  background-color: transparent;
}

textarea::-webkit-scrollbar {
  width: 16px; /* Adjust the width as needed */
}

textarea::-webkit-scrollbar-thumb {
  width: 8px;
  background-color: var(--neutral-300); /* Change the thumb color */
  -webkit-box-shadow: inset 0px 0px 0px 4px var(--neutral-100);
  -moz-box-shadow: inset 0px 0px 0px 4px var(--neutral-100);
  box-shadow: inset 0px 0px 0px 4px var(--neutral-100);
  border-right: 1px solid var(--neutral-400);
}

textarea::-webkit-scrollbar-track {
  background-color: var(--neutral-100); /* Change the track color */
  border-bottom: 1px solid var(--neutral-400);
  z-index: 1000;
  border-right: 1px solid var(--neutral-400);
  border-radius: var(--radius-sm) var(--radius-none) var(--radius-none) var(--radius-sm);
}

textarea::-webkit-scrollbar-thumb:hover {
  background-color: var(--neutral-300);
}

textarea::-webkit-resizer {
  border: 0px solid var(--neutral-400);
  background: var(--neutral-100);
  box-shadow: none;
  outline: none;
  background-repeat: no-repeat;
  background-size: 80%;
  background-position-y: 70%;
  border-right: 1px solid var(--neutral-400);
  border-bottom-left-radius: var(--radius-sm);
  background-image: url(/images/controls/resize_bg_rtl.svg);
}

.form-control::placeholder {
  color: var(--neutral-400);
  opacity: 1;
}

.form-control::-ms-input-placeholder { /* Edge 12 -18 */
  color: var(--neutral-400);
}

.form-control {
  padding-top: 0px;
  padding-bottom: 0px;
}

textarea.form-control {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.form-control.lg {
  height: 40px;
  line-height: 40px;
}

.form-control.md {
  height: 32px;
  line-height: 32px;
}

/*--- END TEXTAREA ---*/
/*--- STRUCTURED LIST ---*/
.structured-list {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--border-radius-md);
}

.structured-list.contained {
  border: 1px solid var(--neutral-300);
}

.structured-list .list-head .list-head-row, .structured-list .list-body .list-body-row {
  position: relative;
  display: inline-flex;
  flex-direction: row;
}

.structured-list .list-head, .structured-list .list-body {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

.structured-list .list-head .list-head-row > div, .structured-list .list-body .list-body-row > div {
  width: 100%;
}

.structured-list .list-head .list-head-row {
  border-bottom: 1px solid var(--neutral-300);
}

.structured-list.row-divider .list-body .list-body-row {
  border-bottom: 1px solid var(--neutral-300);
}

.structured-list.row-divider .list-body .list-body-row:last-child {
  border-bottom: 0px;
}

.structured-list.col-divider .list-body .list-body-row .list-col {
  border-right: 1px solid var(--neutral-300);
}

.structured-list.col-divider .list-body .list-body-row .list-col:first-child {
  border-right: 0px solid var(--neutral-300);
}

.structured-list .list-head .list-head-row > div.list-col {
  height: 48px;
  line-height: 48px;
  font-size: var(--font-size-xs);
  border-right: 1px solid var(--neutral-300);
}

.structured-list .list-body .list-body-row > div.list-col {
  height: 64px;
  line-height: 64px;
  font-size: var(--font-size-base);
}

.structured-list.compact .list-body .list-body-row > div.list-col {
  height: 48px;
  line-height: 48px;
}

.structured-list .list-head .list-head-row > div.list-col:first-child {
  border-right: 0px solid var(--neutral-300);
}

.structured-list .list-col {
  color: var(--icon-default);
  padding-right: var(--space-xl);
  padding-left: var(--space-xl);
}

/*--- END STRUCTURED LIST ---*/
.inline-tabs > .nav-pills {
  max-width: fit-content;
}

.dga-tabs .nav-pills .nav-link > img {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
}

.tags-list {
  position: relative;
  display: flex;
  width: 100%;
  list-style: none;
  margin: 0px 0 var(--space-3xl);
  padding: 0;
  gap: var(--space-md);
}