@dubai-design-system/components-js 3.12.5 → 3.12.6

package/dist/collection/global/global.css

@@ -0,0 +1,2988 @@
+:root {
+
+  /*Primary Variants*/
+  --dda-primary-0: #000000;
+  --dda-primary-4: #020D14;
+  --dda-primary-5: #04131E;
+  --dda-primary-6: #081C2B;
+  --dda-primary-10: #081D2D;
+  --dda-primary-12: #0B273D;
+  --dda-primary-17: #0D283B;
+  --dda-primary-20: #12334B;
+  --dda-primary-22: #153D59;
+  --dda-primary-24: #1A4361;
+  --dda-primary-25: #183F5B;
+  --dda-primary-30: #1E4B6A;
+  --dda-primary-35: #23567B;
+  --dda-primary-40: #2A638B;
+  --dda-primary-50: #3D7DAB;
+  --dda-primary-60: #5997C7;
+  --dda-primary-70: #75B2E3;
+  --dda-primary-80: #97CCFB;
+  --dda-primary-87: #B0D6F7;
+  --dda-primary-90: #CDE5FD;
+  --dda-primary-92: #D5E9FD;
+  --dda-primary-94: #E0EEFE;
+  --dda-primary-95: #E7F2FE;
+  --dda-primary-96: #E7F2FE;
+  --dda-primary-98: #EFF6FE;
+  --dda-primary-99: #FBFCFF;
+  --dda-primary-100: #FFFFFF;
+
+  --dda-color-primary-40: var(--dda-primary-40);
+  --dda-color-primary-30: var(--dda-primary-30);
+  --dda-color-primary-20: var(--dda-primary-20);
+  --dda-color-primary-10: var(--dda-primary-10);
+
+  --dda-on-primary-100: var(--dda-primary-100);
+  --dda-on-primary-98: var(--dda-primary-98);
+  --dda-on-primary-96: var(--dda-primary-96);
+  --dda-on-primary-94: var(--dda-primary-94);
+
+  --dda-primary-variant-96: var(--dda-primary-96);
+  --dda-primary-variant-95: var(--dda-primary-95);
+  --dda-primary-variant-94: var(--dda-primary-94);
+  --dda-primary-variant-92: var(--dda-primary-92);
+  --dda-primary-variant-87: var(--dda-primary-87);
+
+  --dda-on-primary-variant-40: var(--dda-primary-40);
+  --dda-on-primary-variant-30: var(--dda-primary-30);
+  --dda-on-primary-variant-25: var(--dda-primary-25);
+  --dda-on-primary-variant-20: var(--dda-primary-20);
+  --dda-on-primary-variant-12: var(--dda-primary-12);
+}
+:root[data-theme='dark'] {
+  --dda-color-primary-40: var(--dda-primary-70);
+  --dda-color-primary-30: var(--dda-primary-80);
+  --dda-color-primary-20: var(--dda-primary-90);
+  --dda-color-primary-10: var(--dda-primary-95);
+
+  --dda-on-primary-100: var(--dda-primary-10);
+  --dda-on-primary-98: var(--dda-primary-12);
+  --dda-on-primary-96: var(--dda-primary-17);
+  --dda-on-primary-94: var(--dda-primary-20);
+
+  --dda-primary-variant-96: var(--dda-primary-30);
+  --dda-primary-variant-95: var(--dda-primary-30);
+  --dda-primary-variant-94: var(--dda-primary-25);
+  --dda-primary-variant-92: var(--dda-primary-20);
+  --dda-primary-variant-87: var(--dda-primary-12);
+
+  --dda-on-primary-variant-40: var(--dda-primary-90);
+  --dda-on-primary-variant-30: var(--dda-primary-90);
+  --dda-on-primary-variant-25: var(--dda-primary-94);
+  --dda-on-primary-variant-20: var(--dda-primary-96);
+  --dda-on-primary-variant-12: var(--dda-primary-98);
+}
+
+
+:root {
+  --dda-secondary-0: #000000;
+  --dda-secondary-4: #000836;
+  --dda-secondary-5: #000A3D;
+  --dda-secondary-6: #000C43;
+  --dda-secondary-10: #001257;
+  --dda-secondary-12: #001561;
+  --dda-secondary-17: #092072;
+  --dda-secondary-20: #132778;
+  --dda-secondary-22: #192C7D;
+  --dda-secondary-24: #1E3181;
+  --dda-secondary-25: #213484;
+  --dda-secondary-30: #2E4090;
+  --dda-secondary-35: #3B4C9C;
+  --dda-secondary-40: #4758A9;
+  --dda-secondary-50: #6071C4;
+  --dda-secondary-60: #7A8BE0;
+  --dda-secondary-70: #95A6FD;
+  --dda-secondary-80: #B9C3FF;
+  --dda-secondary-87: #D2D8FF;
+  --dda-secondary-90: #DDE1FF;
+  --dda-secondary-92: #E5E6FF;
+  --dda-secondary-94: #ECECFF;
+  --dda-secondary-95: #F0EFFF;
+  --dda-secondary-96: #F3F2FF;
+  --dda-secondary-98: #FBF8FF;
+  --dda-secondary-99: #FEFBFF;
+  --dda-secondary-100: #FFFFFF;
+
+  --dda-color-secondary-40: var(--dda-secondary-40);
+  --dda-color-secondary-30: var(--dda-secondary-30);
+  --dda-color-secondary-20: var(--dda-secondary-20);
+  --dda-color-secondary-10: var(--dda-secondary-10);
+
+  --dda-on-secondary-100: var(--dda-secondary-100);
+  --dda-on-secondary-98: var(--dda-secondary-98);
+  --dda-on-secondary-96: var(--dda-secondary-96);
+  --dda-on-secondary-94: var(--dda-secondary-94);
+
+  --dda-secondary-variant-96: var(--dda-secondary-96);
+  --dda-secondary-variant-95: var(--dda-secondary-95);
+  --dda-secondary-variant-94: var(--dda-secondary-94);
+  --dda-secondary-variant-92: var(--dda-secondary-92);
+  --dda-secondary-variant-87: var(--dda-secondary-87);
+
+  --dda-on-secondary-variant-30: var(--dda-secondary-30);
+  --dda-on-secondary-variant-25: var(--dda-secondary-25);
+  --dda-on-secondary-variant-20: var(--dda-secondary-20);
+  --dda-on-secondary-variant-12: var(--dda-secondary-12);
+ 
+} 
+:root[data-theme='dark'] {
+  --dda-color-secondary-40: var(--dda-secondary-70);
+  --dda-color-secondary-30: var(--dda-secondary-80);
+  --dda-color-secondary-20: var(--dda-secondary-90);
+  --dda-color-secondary-10: var(--dda-secondary-95);
+
+  --dda-on-secondary-100: var(--dda-secondary-10);
+  --dda-on-secondary-98: var(--dda-secondary-12);
+  --dda-on-secondary-96: var(--dda-secondary-17);
+  --dda-on-secondary-94: var(--dda-secondary-20);
+
+  --dda-secondary-variant-96: var(--dda-secondary-30);
+  --dda-secondary-variant-95: var(--dda-secondary-30);
+  --dda-secondary-variant-94: var(--dda-secondary-25);
+  --dda-secondary-variant-92: var(--dda-secondary-20);
+  --dda-secondary-variant-87: var(--dda-secondary-12);
+
+  --dda-on-secondary-variant-30: var(--dda-secondary-90);
+  --dda-on-secondary-variant-25: var(--dda-secondary-94);
+  --dda-on-secondary-variant-20: var(--dda-secondary-96);
+  --dda-on-secondary-variant-12: var(--dda-secondary-98);
+}
+
+
+:root {
+  --dda-error-0: #000000;
+  --dda-error-4: #280000;
+  --dda-error-5: #2D0000;
+  --dda-error-6: #310001;
+  --dda-error-10: #410001;
+  --dda-error-12: #490001;
+  --dda-error-17: #5C0002;
+  --dda-error-20: #690003;
+  --dda-error-22: #710003;
+  --dda-error-24: #790004;
+  --dda-error-25: #7E0004;
+  --dda-error-30: #930005;
+  --dda-error-35: #A90008;
+  --dda-error-40: #C0000A;
+  --dda-error-50: #E62721;
+  --dda-error-60: #FF5545;
+  --dda-error-70: #FF8A7B;
+  --dda-error-80: #FFB4AA;
+  --dda-error-87: #FFCFC8;
+  --dda-error-90: #FFDAD5;
+  --dda-error-92: #FFE2DD;
+  --dda-error-94: #FFE9E6;
+  --dda-error-95: #FFEDEA;
+  --dda-error-96: #FFF0EE;
+  --dda-error-98: #FFF8F7;
+  --dda-error-99: #FFFBFF;
+  --dda-error-100: #FFFFFF;
+
+  --dda-color-error-50: var(--dda-error-50);
+  --dda-color-error-40: var(--dda-error-40);
+  --dda-color-error-30: var(--dda-error-30);
+  --dda-color-error-20: var(--dda-error-24);
+
+  --dda-on-error-100: var(--dda-error-100);
+  --dda-on-error-98: var(--dda-error-98);
+  --dda-on-error-96: var(--dda-error-96);
+  --dda-on-error-94: var(--dda-error-94);
+
+  --dda-error-variant-90: var(--dda-error-90);
+  --dda-error-variant-95: var(--dda-error-95);
+  --dda-error-variant-94: var(--dda-error-94);
+  --dda-error-variant-92: var(--dda-error-92);
+  --dda-error-variant-90: var(--dda-error-90);
+
+  --dda-on-error-variant-40: var(--dda-error-40);
+  --dda-on-error-variant-30: var(--dda-error-30);
+  --dda-on-error-variant-25: var(--dda-error-25);
+  --dda-on-error-variant-20: var(--dda-error-20);
+  --dda-on-error-variant-12: var(--dda-error-12);
+
+}
+:root[data-theme='dark'] {
+  --dda-color-error-50: var(--dda-error-80);
+  --dda-color-error-40: var(--dda-error-70);
+  --dda-color-error-30: var(--dda-error-90);
+  --dda-color-error-20: var(--dda-error-94);
+
+  --dda-on-error-100: var(--dda-error-10);
+  --dda-on-error-98: var(--dda-error-12);
+  --dda-on-error-96: var(--dda-error-17);
+  --dda-on-error-94: var(--dda-error-20);
+
+  --dda-error-variant-96: var(--dda-error-30);
+  --dda-error-variant-95: var(--dda-error-20);
+  --dda-error-variant-94: var(--dda-error-25);
+  --dda-error-variant-92: var(--dda-error-20);
+  --dda-error-variant-90: var(--dda-error-12);
+
+  --dda-on-error-variant-40: var(--dda-error-70);
+  --dda-on-error-variant-30: var(--dda-error-80);
+  --dda-on-error-variant-25: var(--dda-error-94);
+  --dda-on-error-variant-20: var(--dda-error-96);
+  --dda-on-error-variant-12: var(--dda-error-98);
+}
+
+
+:root {
+  --dda-warning-0: #000000;
+  --dda-warning-4: #180C00;
+  --dda-warning-5: #1B0E00;
+  --dda-warning-6: #1F1000;
+  --dda-warning-10: #2A1800;
+  --dda-warning-12: #2F1B00;
+  --dda-warning-17: #3D2500;
+  --dda-warning-20: #462B00;
+  --dda-warning-22: #4B2F00;
+  --dda-warning-24: #513300;
+  --dda-warning-25: #543500;
+  --dda-warning-30: #643F00;
+  --dda-warning-35: #734A00;
+  --dda-warning-40: #835400;
+  --dda-warning-50: #A46B00;
+  --dda-warning-60: #C78200;
+  --dda-warning-70: #EB9A00;
+  --dda-warning-80: #FFB956;
+  --dda-warning-87: #FFD39B;
+  --dda-warning-90: #FFDDB5;
+  --dda-warning-92: #FFE4C5;
+  --dda-warning-94: #FFEBD5;
+  --dda-warning-95: #FFEEDD;
+  --dda-warning-96: #FFF1E5;
+  --dda-warning-98: #FFF8F4;
+  --dda-warning-99: #FFFBFF;
+  --dda-warning-100: #FFFFFF;
+
+  --dda-color-warning-50: var(--dda-warning-50);
+  --dda-color-warning-40: var(--dda-warning-40);
+  --dda-color-warning-30: var(--dda-warning-30);
+  --dda-color-warning-20: var(--dda-warning-20);
+
+  --dda-on-warning-100: var(--dda-warning-100);
+  --dda-on-warning-98: var(--dda-warning-98);
+  --dda-on-warning-96: var(--dda-warning-96);
+  --dda-on-warning-94: var(--dda-warning-94);
+
+  --dda-warning-variant-90: var(--dda-warning-90);
+  --dda-warning-variant-95: var(--dda-warning-95);
+  --dda-warning-variant-94: var(--dda-warning-94);
+  --dda-warning-variant-92: var(--dda-warning-92);
+  --dda-warning-variant-90: var(--dda-warning-90);
+
+  --dda-on-warning-variant-40: var(--dda-warning-40);
+  --dda-on-warning-variant-30: var(--dda-warning-30);
+  --dda-on-warning-variant-25: var(--dda-warning-25);
+  --dda-on-warning-variant-20: var(--dda-warning-20);
+  --dda-on-warning-variant-12: var(--dda-warning-12);
+
+}
+:root[data-theme='dark'] {
+  --dda-color-warning-50: var(--dda-warning-80);
+  --dda-color-warning-40: var(--dda-warning-50);
+  --dda-color-warning-30: var(--dda-warning-90);
+  --dda-color-warning-20: var(--dda-warning-94);
+
+  --dda-on-warning-100: var(--dda-warning-10);
+  --dda-on-warning-98: var(--dda-warning-12);
+  --dda-on-warning-96: var(--dda-warning-17);
+  --dda-on-warning-94: var(--dda-warning-20);
+
+  --dda-warning-variant-96: var(--dda-warning-30);
+  --dda-warning-variant-95: var(--dda-warning-30);
+  --dda-warning-variant-94: var(--dda-warning-25);
+  --dda-warning-variant-92: var(--dda-warning-20);
+  --dda-warning-variant-90: var(--dda-warning-12);
+
+  --dda-on-warning-variant-40: var(--dda-warning-80);
+  --dda-on-warning-variant-30: var(--dda-warning-80);
+  --dda-on-warning-variant-25: var(--dda-warning-94);
+  --dda-on-warning-variant-20: var(--dda-warning-96);
+  --dda-on-warning-variant-12: var(--dda-warning-98);
+}
+
+:root {
+  --dda-success-0: #000000;
+  --dda-success-4: #001203;
+  --dda-success-5: #001504;
+  --dda-success-6: #001805;
+  --dda-success-10: #002108;
+  --dda-success-12: #00260A;
+  --dda-success-17: #00320F;
+  --dda-success-20: #003913;
+  --dda-success-22: #003E15;
+  --dda-success-24: #004318;
+  --dda-success-25: #004619;
+  --dda-success-30: #00531F;
+  --dda-success-35: #006025;
+  --dda-success-40: #0D6D2D;
+  --dda-success-50: #318744;
+  --dda-success-60: #4CA25B;
+  --dda-success-70: #67BD73;
+  --dda-success-80: #82DA8C;
+  --dda-success-87: #95EE9E;
+  --dda-success-90: #9EF7A6;
+  --dda-success-92: #A3FCAC;
+  --dda-success-94: #B8FFBB;
+  --dda-success-95: #C6FFC7;
+  --dda-success-96: #D3FFD2;
+  --dda-success-98: #EBFFE7;
+  --dda-success-99: #F6FFF1;
+  --dda-success-100: #FFFFFF;
+
+  --dda-color-success-50: var(--dda-success-50);
+  --dda-color-success-40: var(--dda-success-40);
+  --dda-color-success-30: var(--dda-success-30);
+  --dda-color-success-20: var(--dda-success-20);
+
+  --dda-on-success-100: var(--dda-success-100);
+  --dda-on-success-98: var(--dda-success-98);
+  --dda-on-success-96: var(--dda-success-96);
+  --dda-on-success-94: var(--dda-success-94);
+
+  --dda-success-variant-90: var(--dda-success-90);
+  --dda-success-variant-95: var(--dda-success-95);
+  --dda-success-variant-94: var(--dda-success-94);
+  --dda-success-variant-92: var(--dda-success-92);
+  --dda-success-variant-90: var(--dda-success-90);
+
+  --dda-on-success-variant-40: var(--dda-success-40);
+  --dda-on-success-variant-30: var(--dda-success-30);
+  --dda-on-success-variant-25: var(--dda-success-25);
+  --dda-on-success-variant-20: var(--dda-success-20);
+  --dda-on-success-variant-12: var(--dda-success-12);
+
+}
+:root[data-theme='dark'] {
+  --dda-color-success-50: var(--dda-success-80);
+  --dda-color-success-40: var(--dda-success-87);
+  --dda-color-success-30: var(--dda-success-90);
+  --dda-color-success-20: var(--dda-success-94);
+
+  --dda-on-success-100: var(--dda-success-10);
+  --dda-on-success-98: var(--dda-success-12);
+  --dda-on-success-96: var(--dda-success-17);
+  --dda-on-success-94: var(--dda-success-20);
+
+  --dda-success-variant-96: var(--dda-success-30);
+  --dda-success-variant-95: var(--dda-success-30);
+  --dda-success-variant-94: var(--dda-success-25);
+  --dda-success-variant-92: var(--dda-success-20);
+  --dda-success-variant-90: var(--dda-success-12);
+
+  --dda-on-success-variant-40: var(--dda-success-80);
+  --dda-on-success-variant-30: var(--dda-success-80);
+  --dda-on-success-variant-25: var(--dda-success-94);
+  --dda-on-success-variant-20: var(--dda-success-96);
+  --dda-on-success-variant-12: var(--dda-success-98);
+}
+
+
+:root {
+  --dda-info-0: #000000;
+  --dda-info-4: #001019;
+  --dda-info-5: #00131C;
+  --dda-info-6: #001620;
+  --dda-info-10: #001E2B;
+  --dda-info-12: #002331;
+  --dda-info-17: #002E3F;
+  --dda-info-20: #003548;
+  --dda-info-22: #00394E;
+  --dda-info-24: #003548;
+  --dda-info-25: #004157;
+  --dda-info-30: #004D66;
+  --dda-info-35: #005977;
+  --dda-info-40: #006687;
+  --dda-info-50: #0080A9;
+  --dda-info-60: #1A9CCA;
+  --dda-info-70: #47B7E6;
+  --dda-info-80: #73D2FF;
+  --dda-info-87: #ACE1FF;
+  --dda-info-90: #C1E8FF;
+  --dda-info-92: #CEEDFF;
+  --dda-info-94: #DBF1FF;
+  --dda-info-95: #E2F3FF;
+  --dda-info-96: #E8F6FF;
+  --dda-info-98: #F4FAFF;
+  --dda-info-99: #FBFCFF;
+  --dda-info-100: #FFFFFF;
+
+  --dda-color-info-50: var(--dda-info-50);
+  --dda-color-info-40: var(--dda-info-47);
+  --dda-color-info-30: var(--dda-info-30);
+  --dda-color-info-20: var(--dda-info-20);
+
+  --dda-on-info-100: var(--dda-info-100);
+  --dda-on-info-98: var(--dda-info-98);
+  --dda-on-info-96: var(--dda-info-96);
+  --dda-on-info-94: var(--dda-info-94);
+
+  --dda-info-variant-90: var(--dda-info-90);
+  --dda-info-variant-95: var(--dda-info-95);
+  --dda-info-variant-94: var(--dda-info-94);
+  --dda-info-variant-92: var(--dda-info-92);
+  --dda-info-variant-90: var(--dda-info-90);
+
+  --dda-on-info-variant-40: var(--dda-info-40);
+  --dda-on-info-variant-30: var(--dda-info-30);
+  --dda-on-info-variant-25: var(--dda-info-25);
+  --dda-on-info-variant-20: var(--dda-info-20);
+  --dda-on-info-variant-12: var(--dda-info-12);
+
+}
+:root[data-theme='dark'] {
+  --dda-color-info-50: var(--dda-info-80);
+  --dda-color-info-40: var(--dda-info-87);
+  --dda-color-info-30: var(--dda-info-90);
+  --dda-color-info-20: var(--dda-info-94);
+
+  --dda-on-info-100: var(--dda-info-10);
+  --dda-on-info-98: var(--dda-info-12);
+  --dda-on-info-96: var(--dda-info-17);
+  --dda-on-info-94: var(--dda-info-20);
+
+  --dda-info-variant-96: var(--dda-info-30);
+  --dda-info-variant-95: var(--dda-info-30);
+  --dda-info-variant-94: var(--dda-info-25);
+  --dda-info-variant-92: var(--dda-info-20);
+  --dda-info-variant-90: var(--dda-info-12);
+
+  --dda-on-info-variant-40: var(--dda-info-80);
+  --dda-on-info-variant-30: var(--dda-info-80);
+  --dda-on-info-variant-25: var(--dda-info-94);
+  --dda-on-info-variant-20: var(--dda-info-96);
+  --dda-on-info-variant-12: var(--dda-info-98);
+}
+
+
+:root {
+  --dda-neutral-0: #000000;
+  --dda-neutral-4: #0D0E11;
+  --dda-neutral-5: #101114;
+  --dda-neutral-6: #131316;
+  --dda-neutral-10: #1B1B1F;
+  --dda-neutral-12: #1F1F23;
+  --dda-neutral-17: #292A2D;
+  --dda-neutral-20: #303034;
+  --dda-neutral-22: #343438;
+  --dda-neutral-24: #39393C;
+  --dda-neutral-25: #3B3B3F;
+  --dda-neutral-30: #46464A;
+  --dda-neutral-35: #525256;
+  --dda-neutral-40: #5E5E62;
+  --dda-neutral-50: #77777A;
+  --dda-neutral-60: #919094;
+  --dda-neutral-70: #ACAAAF;
+  --dda-neutral-80: #C7C6CA;
+  --dda-neutral-87: #DBD9DD;
+  --dda-neutral-90: #E4E2E6;
+  --dda-neutral-92: #E9E7EC;
+  --dda-neutral-94: #EFEDF1;
+  --dda-neutral-95: #F2F0F4;
+  --dda-neutral-96: #F5F3F7;
+  --dda-neutral-98: #FBF8FD;
+  --dda-neutral-99: #FEFBFF;
+  --dda-neutral-100: #FFFFFF;
+
+  --dda-surface-100: var(--dda-neutral-100);
+  --dda-surface-96: var(--dda-neutral-96);
+  --dda-surface-94: var(--dda-neutral-94);
+  --dda-surface-92: var(--dda-neutral-92);
+  --dda-surface-90: var(--dda-neutral-90);
+  --dda-surface-0: var(--dda-neutral-0);
+
+  --dda-on-surface-10: var(--dda-neutral-10);
+  --dda-on-surface-20: var(--dda-neutral-20);
+  --dda-on-surface-30: var(--dda-neutral-30);
+  --dda-on-surface-40: var(--dda-neutral-40);
+  --dda-on-surface-0: var(--dda-neutral-0);
+}
+
+:root[data-theme='dark'] {
+
+  --dda-surface-0: var(--dda-neutral-100);
+  --dda-surface-100: var(--dda-neutral-10);
+  --dda-surface-96: var(--dda-neutral-24);
+  --dda-surface-94: var(--dda-neutral-12);
+  --dda-surface-92: var(--dda-neutral-17);
+  --dda-surface-90: var(--dda-neutral-22);
+
+  --dda-on-surface-0: var(--dda-neutral-100);
+  --dda-on-surface-10: var(--dda-neutral-100);
+  --dda-on-surface-20: var(--dda-neutral-90);
+  --dda-on-surface-30: var(--dda-neutral-80);
+  --dda-on-surface-40: var(--dda-neutral-70);
+}
+
+:root {
+  --dda-neutral-variant-0: #000000;
+  --dda-neutral-variant-4: #0B1218;
+  --dda-neutral-variant-5: #0B1218;
+  --dda-neutral-variant-6: #11131A;
+  --dda-neutral-variant-10: #161C22;
+  --dda-neutral-variant-12: #1D1F27;
+  --dda-neutral-variant-17: #20272D;
+  --dda-neutral-variant-20: #2A3038;
+  --dda-neutral-variant-22: #32343C;
+  --dda-neutral-variant-24: #373941;
+  --dda-neutral-variant-25: #383F45;
+  --dda-neutral-variant-30: #40484F;
+  --dda-neutral-variant-35: #4D525A;
+  --dda-neutral-variant-40: #595F66;
+  --dda-neutral-variant-50: #71787F;
+  --dda-neutral-variant-60: #8A9299;
+  --dda-neutral-variant-70: #A5ABB3;
+  --dda-neutral-variant-80: #C0C6CF;
+  --dda-neutral-variant-87: #D5DAE3;
+  --dda-neutral-variant-90: #DDE2EB;
+  --dda-neutral-variant-92: #E1EAF2;
+  --dda-neutral-variant-94: #E6EFF7;
+  --dda-neutral-variant-95: #EAF2F9;
+  --dda-neutral-variant-96: #F0F5FC;
+  --dda-neutral-variant-98: #F7FAFF;
+  --dda-neutral-variant-99: #FBFCFF;
+  --dda-neutral-variant-100: #FFFFFF;
+
+  --dda-surface-variant-90: var(--dda-neutral-variant-90);
+  --dda-surface-variant-87: var(--dda-neutral-variant-87);
+  --dda-surface-variant-80: var(--dda-neutral-variant-80);
+
+  --dda-on-surface-variant-50: var(--dda-neutral-variant-50);
+  --dda-on-surface-variant-40: var(--dda-neutral-variant-40);
+  --dda-on-surface-variant-30: var(--dda-neutral-variant-30);
+  --dda-on-surface-variant-25: var(--dda-neutral-variant-25);
+  --dda-on-surface-variant-20: var(--dda-neutral-variant-20);
+  --dda-on-surface-variant-12: var(--dda-neutral-variant-12);
+}
+
+
+:root[data-theme='dark'] {
+
+  --dda-surface-variant-90: var(--dda-neutral-variant-30);
+  --dda-surface-variant-87: var(--dda-neutral-variant-25);
+  --dda-surface-variant-80: var(--dda-neutral-variant-22);
+
+  --dda-on-surface-variant-50: var(--dda-neutral-variant-60);
+  --dda-on-surface-variant-40: var(--dda-neutral-variant-70);
+  --dda-on-surface-variant-30: var(--dda-neutral-variant-80);
+  --dda-on-surface-variant-25: var(--dda-neutral-variant-94);
+  --dda-on-surface-variant-20: var(--dda-neutral-variant-96);
+  --dda-on-surface-variant-12: var(--dda-neutral-variant-98);
+}
+
+
+:root {
+  --dda-color-purple: #904EDB;
+  --dda-color-purple-dark: #8044AE;
+  --dda-color-purple-variant: #F1E9FF;
+
+  --dda-color-teal: #23B7B1;
+  --dda-color-teal-variant: #E2FFFE;
+
+  --dda-color-green: #6FA31C;
+  --dda-color-green-variant: #BBE07F;
+
+  --dda-color-red: #DD6B51;
+  --dda-color-red-variant: #FFEBE6;
+
+  --dda-color-blue: #3081E0;
+  --dda-color-blue-variant: #E3F0FF;
+
+  --dda-color-orange: #CD9D22;
+  --dda-color-orange-variant: #FFF8E7;
+
+  --dda-color-yellow: #D3C800;
+  --dda-color-yellow-variant: #FFFBB9;
+}
+
+:root[data-theme='dark'] {
+  --dda-color-purple: #BC95E9;
+  --dda-color-purple-dark: #BC9CE1;
+  --dda-color-purple-variant: #572F84;
+
+  --dda-color-teal: #A7E2E0;
+  --dda-color-teal-variant: #156E6A;
+
+  --dda-color-green: #B2D973;
+  --dda-color-green-variant: #4B6E15;
+
+  --dda-color-red: #E29199;
+  --dda-color-red-variant: #7C2B33;
+
+  --dda-color-blue: #83B3EC;
+  --dda-color-blue-variant: #1D4D86;
+
+  --dda-color-orange: #E1C47A;
+  --dda-color-orange-variant: #7B5E14;
+
+  --dda-color-yellow: #E7DD11;
+  --dda-color-yellow-variant: #A9A221;
+}
+
+
+/* :root[data-theme='red'] {
+  
+}
+
+:root[data-theme='green'] {
+  
+} */
+
+:root{
+    --dda-fw-300: 300 !important;
+    --dda-fw-400: 400 !important;
+    --dda-fw-500: 500 !important;
+    --dda-fw-700: 700 !important;
+    
+    
+    --dda-fs-display-lg: 3.563rem;   /* 57px */
+    --dda-fs-display-md: 2.813rem;   /* 45px */
+    --dda-fs-display-sm: 2.25rem;    /* 36px */
+ 
+
+     --dda-fs-headline-lg: 2rem;     /* 32px */
+    --dda-fs-headline-md: 1.75rem;   /* 28px */
+    --dda-fs-headline-sm: 1.5rem;    /* 24px */
+
+
+    --dda-fs-title-lg: 1.375rem;     /* 22px */
+    --dda-fs-title-md: 1.25rem;      /* 20px */
+    --dda-fs-title-sm: 1.125rem;     /* 18px */
+
+
+    --dda-fs-body-lg: 1rem;          /* 16px */
+    --dda-fs-body-md: 0.875rem;      /* 14px */
+    --dda-fs-body-sm: 0.75rem;       /* 12px */
+
+
+    --dda-fs-label-lg: 0.875rem;     /* 14px */
+    --dda-fs-label-md: 0.75rem;      /* 12px */
+    --dda-fs-label-sm: 0.625rem;     /* 10px */
+
+
+    --dda-fs-tagline-lg: 0.75rem;    /* 12px */
+    --dda-fs-tagline-md: 0.625rem;   /* 10px */
+    --dda-fs-tagline-sm: 0.5rem;     /* 8px  */
+
+
+    --dda-h1: 3.563rem;
+    --dda-h2: 3rem;
+    --dda-h3: 2.5rem;
+    --dda-h4: 2.063rem;
+    --dda-h5: 1.75rem;
+    --dda-h6: 1.438rem;
+    --dda-title: 1.188rem;
+    --dda-body: 1rem;
+    --dda-caption: 0.813rem;
+    --dda-label: 0.688rem;
+}
+
+.dda-fw-300{ font-weight: var(--dda-fw-300);}
+.dda-fw-400{ font-weight: var(--dda-fw-400);}
+.dda-fw-500{ font-weight: var(--dda-fw-500);}
+.dda-fw-700{ font-weight: var(--dda-fw-700);}
+
+.dda-fs-display-lg{ font-size: var(--dda-fs-display-lg);}
+.dda-fs-display-md{ font-size: var(--dda-fs-display-md);}
+.dda-fs-display-sm{ font-size: var(--dda-fs-display-sm);}
+
+.dda-fs-headline-lg{ font-size: var(--dda-fs-headline-lg);}
+.dda-fs-headline-md{ font-size: var(--dda-fs-headline-md);}
+.dda-fs-headline-sm{ font-size: var(--dda-fs-headline-sm);}
+
+.dda-fs-title-lg{ font-size: var(--dda-fs-title-lg);}
+.dda-fs-title-md{ font-size: var(--dda-fs-title-md);}
+.dda-fs-title-sm{ font-size: var(--dda-fs-title-sm);}
+
+.dda-fs-body-lg{ font-size: var(--dda-fs-body-lg);}
+.dda-fs-body-md{ font-size: var(--dda-fs-body-md);}
+.dda-fs-body-sm{ font-size: var(--dda-fs-body-sm);}
+
+.dda-fs-label-lg{ font-size: var(--dda-fs-label-lg);}
+.dda-fs-label-md{ font-size: var(--dda-fs-label-md);}
+.dda-fs-label-sm{ font-size: var(--dda-fs-label-sm);}
+
+.dda-fs-tagline-lg{ font-size: var(--dda-fs-tagline-lg);}
+.dda-fs-tagline-md{ font-size: var(--dda-fs-tagline-md);}
+.dda-fs-tagline-sm{ font-size: var(--dda-fs-tagline-sm);}
+
+
+
+/*****************************************/
+/******************NEW********************/
+/*****************************************/
+
+:root {
+  /* Font Weights */
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+
+  /* Mobile Sizes (base = 16px) */
+  --font-display: 3rem;         /* 48px */
+  --font-h1: 2rem;              /* 32px */
+  --font-h2: 1.625rem;          /* 26px */
+  --font-h3: 1.375rem;          /* 22px */
+  --font-h4: 1.25rem;           /* 20px */
+  --font-h5: 1.125rem;          /* 18px */
+  --font-h6: 1rem;              /* 16px */
+  --font-body: 0.875rem;        /* 14px */
+  --font-caption: 0.875rem;     /* 14px */
+  --font-small: 0.75rem;        /* 12px */
+
+  --line-height-display: 3.5rem;      /* 56px */
+  --line-height-h1: 3rem;             /* 48px */
+  --line-height-h2: 2.5rem;           /* 40px */
+  --line-height-h3: 2.25rem;          /* 36px */
+  --line-height-h4: 2rem;             /* 32px */
+  --line-height-h5: 1.75rem;          /* 28px */
+  --line-height-h6: 1.5rem;           /* 24px */
+  --line-height-body: 1.25rem;        /* 20px */
+  --line-height-caption: 1.25rem;     /* 20px */
+  --line-height-small: 1rem;          /* 16px */
+}
+
+@media (min-width: 600px) {
+  /* Tablet */
+  :root {
+    --font-display: 3.75rem;     /* 60px */
+    --font-h1: 2.5rem;           /* 40px */
+    --font-h2: 2rem;             /* 32px */
+    --font-h3: 1.75rem;          /* 28px */
+    --font-h4: 1.5rem;           /* 24px */
+    --font-h5: 1.25rem;          /* 20px */
+    --font-h6: 1.125rem;         /* 18px */
+    --font-body: 1rem;           /* 16px */
+    --font-caption: 0.875rem;    /* 14px */
+    --font-small: 0.75rem;       /* 12px */
+
+    --line-height-display: 4.25rem;     /* 68px */
+    --line-height-h1: 3rem;             /* 48px */
+    --line-height-h2: 2.5rem;           /* 40px */
+    --line-height-h3: 2.25rem;          /* 36px */
+    --line-height-h4: 2rem;             /* 32px */
+    --line-height-h5: 1.75rem;          /* 28px */
+    --line-height-h6: 1.75rem;          /* 28px */
+    --line-height-body: 1.5rem;         /* 24px */
+    --line-height-caption: 1.25rem;     /* 20px */
+    --line-height-small: 1rem;          /* 16px */
+  }
+}
+
+@media (min-width: 1024px) {
+  /* Desktop */
+  :root {
+    --font-display: 4.25rem;     /* 68px */
+    --font-h1: 3rem;             /* 48px */
+    --font-h2: 2.5rem;           /* 40px */
+    --font-h3: 2rem;             /* 32px */
+    --font-h4: 1.75rem;          /* 28px */
+    --font-h5: 1.5rem;           /* 24px */
+    --font-h6: 1.25rem;          /* 20px */
+    --font-body: 1rem;           /* 16px */
+    --font-caption: 0.875rem;    /* 14px */
+    --font-small: 0.75rem;       /* 12px */
+
+    --line-height-display: 5rem;        /* 80px */
+    --line-height-h1: 3.5rem;           /* 56px */
+    --line-height-h2: 3rem;             /* 48px */
+    --line-height-h3: 2.5rem;           /* 40px */
+    --line-height-h4: 2rem;             /* 32px */
+    --line-height-h5: 2rem;             /* 32px */
+    --line-height-h6: 1.75rem;          /* 28px */
+    --line-height-body: 1.5rem;         /* 24px */
+    --line-height-caption: 1.25rem;     /* 20px */
+    --line-height-small: 1rem;          /* 16px */
+  }
+}
+
+@media (min-width: 1440px) {
+  /* Large Desktop */
+  :root {
+    --font-display: 4.75rem;     /* 76px */
+    --font-h1: 3.375rem;         /* 54px */
+    --font-h2: 2.8125rem;        /* 45px */
+    --font-h3: 2.3125rem;        /* 37px */
+    --font-h4: 2rem;             /* 32px */
+    --font-h5: 1.625rem;         /* 26px */
+    --font-h6: 1.375rem;         /* 22px */
+    --font-body: 1.125rem;       /* 18px */
+    --font-caption: 1rem;        /* 16px */
+    --font-small: 0.875rem;      /* 14px */
+
+    --line-height-display: 5.5rem;      /* 88px */
+    --line-height-h1: 4rem;             /* 64px */
+    --line-height-h2: 3.5rem;           /* 56px */
+    --line-height-h3: 2.75rem;          /* 44px */
+    --line-height-h4: 2.25rem;          /* 36px */
+    --line-height-h5: 2rem;             /* 32px */
+    --line-height-h6: 1.75rem;          /* 28px */
+    --line-height-body: 1.75rem;        /* 28px */
+    --line-height-caption: 1.5rem;      /* 24px */
+    --line-height-small: 1.25rem;       /* 20px */
+    
+  }
+}
+
+/* Base Typography Classes */
+.display               { font-size: var(--font-display); line-height: var(--line-height-display) !important; }
+h1, .h1, .dda-h1       { font-size: var(--font-h1) !important; line-height: var(--line-height-h1) !important; }
+h2, .h2, .dda-h2       { font-size: var(--font-h2) !important; line-height: var(--line-height-h2) !important; }
+h3, .h3, .dda-h3       { font-size: var(--font-h3) !important; line-height: var(--line-height-h3) !important; }
+h4, .h4, .dda-h4       { font-size: var(--font-h4) !important; line-height: var(--line-height-h4) !important; }
+h5, .h5, .dda-h5       { font-size: var(--font-h5) !important; line-height: var(--line-height-h5) !important; }
+h6, .h6, .dda-h6       { font-size: var(--font-h6) !important; line-height: var(--line-height-h6) !important; }
+.body, .dda-body       { font-size: var(--font-body) !important; line-height: var(--line-height-body) !important; }
+.caption, .dda-caption { font-size: var(--font-caption) !important; line-height: var(--line-height-caption) !important; }
+.small, .dda-small     { font-size: var(--font-small) !important; line-height: var(--line-height-small) !important; }
+
+/* Weight Variants */
+.display.Light,
+h1.Light, .h1.Light, .dda-h1.Light,
+h2.Light, .h2.Light, .dda-h2.Light,
+h3.Light, .h3.Light, .dda-h3.Light,
+h4.Light, .h4.Light, .dda-h4.Light,
+h5.Light, .h5.Light, .dda-h5.Light,
+h6.Light, .h6.Light, .dda-h6.Light,
+.body.Light, .dda-body.Light,
+.caption.Light, .dda-caption.Light,
+.small.Light,  .dda-small.Light{
+  font-weight: var(--font-weight-light);
+}
+
+.display.Regular,
+h1.Regular, .h1.Regular, .dda-h1.Regular,
+h2.Regular, .h2.Regular, .dda-h2.Regular,
+h3.Regular, .h3.Regular, .dda-h3.Regular,
+h4.Regular, .h4.Regular, .dda-h4.Regular,
+h5.Regular, .h5.Regular, .dda-h5.Regular,
+h6.Regular, .h6.Regular, .dda-h6.Regular,
+.body.Regular, .dda-body.Regular,
+.caption.Regular, .dda-caption.Regular,
+.small.Regular,  .dda-small.Regular{
+  font-weight: var(--font-weight-regular);
+}
+
+.display.Medium,
+h1.Medium, .h1.Medium, .dda-h1.Medium,
+h2.Medium, .h2.Medium, .dda-h2.Medium,
+h3.Medium, .h3.Medium, .dda-h3.Medium,
+h4.Medium, .h4.Medium, .dda-h4.Medium,
+h5.Medium, .h5.Medium, .dda-h5.Medium,
+h6.Medium, .h6.Medium, .dda-h6.Medium,
+.body.Medium, .dda-body.Medium,
+.caption.Medium, .dda-caption.Medium,
+.small.Medium,  .dda-small.Medium{
+  font-weight: var(--font-weight-medium);
+}
+
+.display.Bold,
+h1.Bold, .h1.Bold, .dda-h1.Bold,
+h2.Bold, .h2.Bold, .dda-h2.Bold,
+h3.Bold, .h3.Bold, .dda-h3.Bold,
+h4.Bold, .h4.Bold, .dda-h4.Bold,
+h5.Bold, .h5.Bold, .dda-h5.Bold,
+h6.Bold, .h6.Bold, .dda-h6.Bold,
+.body.Bold, .dda-body.Bold,
+.caption.Bold, .dda-caption.Bold,
+.small.Bold,  .dda-small.Bold{
+  font-weight: var(--font-weight-bold);
+}
+
+
+
+.dda-container,
+.dda-container-fluid,
+.dda-container-xxl,
+.dda-container-xl,
+.dda-container-lg,
+.dda-container-md,
+.dda-container-sm {
+  --dda-gutter-x: 1.5rem;
+  --dda-gutter-y: 0;
+  width: 100%;
+  padding-right: calc(var(--dda-gutter-x) * 0.5);
+  padding-left: calc(var(--dda-gutter-x) * 0.5);
+  margin-right: auto;
+  margin-left: auto;
+}
+.dda-w-25 {
+  width: 25% !important;
+}
+
+.dda-w-50 {
+  width: 50% !important;
+}
+
+.dda-w-75 {
+  width: 75% !important;
+}
+
+.dda-w-100 {
+  width: 100% !important;
+}
+.dda-h-100 {
+  height: 100% !important;
+}
+@media (min-width: 576px) {
+  .dda-container-sm, .dda-container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .dda-container-md, .dda-container-sm, .dda-container {
+    max-width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  .dda-container-lg, .dda-container-md, .dda-container-sm, .dda-container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .dda-container-xl, .dda-container-lg, .dda-container-md, .dda-container-sm, .dda-container {
+    max-width: 1140px;
+  }
+}
+@media (min-width: 1400px) {
+  .dda-container-xxl, .dda-container-xl, .dda-container-lg, .dda-container-md, .dda-container-sm, .dda-container {
+    max-width: 1320px;
+  }
+}
+:root {
+  --bs-breakpoint-xs: 0;
+  --bs-breakpoint-sm: 576px;
+  --bs-breakpoint-md: 768px;
+  --bs-breakpoint-lg: 992px;
+  --bs-breakpoint-xl: 1200px;
+  --bs-breakpoint-xxl: 1400px;
+}
+
+.dda-row {
+  --dda-gutter-x: 1.5rem;
+  --dda-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--dda-gutter-y));
+  margin-right: calc(-0.5 * var(--dda-gutter-x));
+  margin-left: calc(-0.5 * var(--dda-gutter-x));
+}
+.dda-row > * {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--dda-gutter-x) * 0.5);
+  padding-left: calc(var(--dda-gutter-x) * 0.5);
+  margin-top: var(--dda-gutter-y);
+}
+
+.dda-col {
+  flex: 1 0 0%;
+}
+
+
+.dda-col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.dda-col-1 {
+  flex: 0 0 auto;
+  width: 8.33333333%;
+}
+
+.dda-col-2 {
+  flex: 0 0 auto;
+  width: 16.66666667%;
+}
+
+.dda-col-3 {
+  flex: 0 0 auto;
+  width: 25%;
+}
+
+.dda-col-4 {
+  flex: 0 0 auto;
+  width: 33.33333333%;
+}
+
+.dda-col-5 {
+  flex: 0 0 auto;
+  width: 41.66666667%;
+}
+
+.dda-col-6 {
+  flex: 0 0 auto;
+  width: 50%;
+}
+
+.dda-col-7 {
+  flex: 0 0 auto;
+  width: 58.33333333%;
+}
+
+.dda-col-8 {
+  flex: 0 0 auto;
+  width: 66.66666667%;
+}
+
+.dda-col-9 {
+  flex: 0 0 auto;
+  width: 75%;
+}
+
+.dda-col-10 {
+  flex: 0 0 auto;
+  width: 83.33333333%;
+}
+
+.dda-col-11 {
+  flex: 0 0 auto;
+  width: 91.66666667%;
+}
+
+.dda-col-12 {
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+@media (min-width: 576px) {
+  .dda-col-sm {
+    flex: 1 0 0%;
+  }
+  .dda-col-sm-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .dda-col-sm-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .dda-col-sm-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+  .dda-col-sm-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .dda-col-sm-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+  .dda-col-sm-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+  .dda-col-sm-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .dda-col-sm-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+  .dda-col-sm-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+  .dda-col-sm-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .dda-col-sm-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+  .dda-col-sm-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+  .dda-col-sm-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
+@media (min-width: 768px) {
+  .dda-col-md {
+    flex: 1 0 0%;
+  }
+  .dda-col-md-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .dda-col-md-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .dda-col-md-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+  .dda-col-md-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .dda-col-md-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+  .dda-col-md-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+  .dda-col-md-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .dda-col-md-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+  .dda-col-md-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+  .dda-col-md-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .dda-col-md-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+  .dda-col-md-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+  .dda-col-md-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
+@media (min-width: 992px) {
+  .dda-col-lg {
+    flex: 1 0 0%;
+  }
+  .dda-col-lg-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .dda-col-lg-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .dda-col-lg-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+  .dda-col-lg-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .dda-col-lg-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+  .dda-col-lg-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+  .dda-col-lg-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .dda-col-lg-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+  .dda-col-lg-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+  .dda-col-lg-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .dda-col-lg-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+  .dda-col-lg-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+  .dda-col-lg-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
+@media (min-width: 1200px) {
+  .dda-col-xl {
+    flex: 1 0 0%;
+  }
+  .dda-col-xl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .dda-col-xl-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .dda-col-xl-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+  .dda-col-xl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .dda-col-xl-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+  .dda-col-xl-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+  .dda-col-xl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .dda-col-xl-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+  .dda-col-xl-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+  .dda-col-xl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .dda-col-xl-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+  .dda-col-xl-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+  .dda-col-xl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
+@media (min-width: 1400px) {
+  .dda-col-xxl {
+    flex: 1 0 0%;
+  }
+  .dda-col-xxl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .dda-col-xxl-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .dda-col-xxl-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+  .dda-col-xxl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .dda-col-xxl-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+  .dda-col-xxl-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+  .dda-col-xxl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .dda-col-xxl-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+  .dda-col-xxl-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+  .dda-col-xxl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .dda-col-xxl-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+  .dda-col-xxl-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+  .dda-col-xxl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
+.dda-d-inline {
+  display: inline !important;
+}
+
+.dda-d-inline-block {
+  display: inline-block !important;
+}
+
+.dda-d-block {
+  display: block !important;
+}
+
+.dda-d-grid {
+  display: grid !important;
+}
+
+.dda-d-inline-grid {
+  display: inline-grid !important;
+}
+
+.dda-d-table {
+  display: table !important;
+}
+
+.dda-d-table-row {
+  display: table-row !important;
+}
+
+.dda-d-table-cell {
+  display: table-cell !important;
+}
+
+.dda-d-flex {
+  display: flex !important;
+}
+
+.dda-d-inline-flex {
+  display: inline-flex !important;
+}
+
+.dda-d-none {
+  display: none !important;
+}
+
+.dda-flex-fill {
+  flex: 1 1 auto !important;
+}
+
+.dda-flex-row {
+  flex-direction: row !important;
+}
+
+.dda-flex-column {
+  flex-direction: column !important;
+}
+
+.dda-flex-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.dda-flex-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.dda-flex-grow-0 {
+  flex-grow: 0 !important;
+}
+
+.dda-flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+.dda-flex-shrink-0 {
+  flex-shrink: 0 !important;
+}
+
+.dda-flex-shrink-1 {
+  flex-shrink: 1 !important;
+}
+
+.dda-flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.dda-flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.dda-flex-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
+}
+
+.dda-justify-content-start {
+  justify-content: flex-start !important;
+}
+
+.dda-justify-content-end {
+  justify-content: flex-end !important;
+}
+
+.dda-justify-content-center {
+  justify-content: center !important;
+}
+
+.dda-justify-content-between {
+  justify-content: space-between !important;
+}
+
+.dda-justify-content-around {
+  justify-content: space-around !important;
+}
+
+.dda-justify-content-evenly {
+  justify-content: space-evenly !important;
+}
+
+.dda-align-items-start {
+  align-items: flex-start !important;
+}
+
+.dda-align-items-end {
+  align-items: flex-end !important;
+}
+
+.dda-align-items-center {
+  align-items: center !important;
+}
+
+.dda-align-items-baseline {
+  align-items: baseline !important;
+}
+
+.dda-align-items-stretch {
+  align-items: stretch !important;
+}
+
+.dda-align-content-start {
+  align-content: flex-start !important;
+}
+
+.dda-align-content-end {
+  align-content: flex-end !important;
+}
+
+.dda-align-content-center {
+  align-content: center !important;
+}
+
+.dda-align-content-between {
+  align-content: space-between !important;
+}
+
+.dda-align-content-around {
+  align-content: space-around !important;
+}
+
+.dda-align-content-stretch {
+  align-content: stretch !important;
+}
+
+.dda-align-self-auto {
+  align-self: auto !important;
+}
+
+.dda-align-self-start {
+  align-self: flex-start !important;
+}
+
+.dda-align-self-end {
+  align-self: flex-end !important;
+}
+
+.dda-align-self-center {
+  align-self: center !important;
+}
+
+.dda-align-self-baseline {
+  align-self: baseline !important;
+}
+
+.dda-dda-align-self-stretch {
+  align-self: stretch !important;
+}
+
+.dda-m-0 {
+  margin: 0 !important;
+}
+
+.dda-m-1 {
+  margin: 0.25rem !important;
+}
+
+.dda-m-2 {
+  margin: 0.5rem !important;
+}
+
+.dda-m-3 {
+  margin: 1rem !important;
+}
+
+.dda-m-4 {
+  margin: 1.5rem !important;
+}
+
+.dda-m-5 {
+  margin: 3rem !important;
+}
+
+.dda-m-auto {
+  margin: auto !important;
+}
+
+.dda-mx-0 {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+
+.dda-mx-1 {
+  margin-right: 0.25rem !important;
+  margin-left: 0.25rem !important;
+}
+
+.dda-mx-2 {
+  margin-right: 0.5rem !important;
+  margin-left: 0.5rem !important;
+}
+
+.dda-mx-3 {
+  margin-right: 1rem !important;
+  margin-left: 1rem !important;
+}
+
+.dda-mx-4 {
+  margin-right: 1.5rem !important;
+  margin-left: 1.5rem !important;
+}
+
+.dda-mx-5 {
+  margin-right: 3rem !important;
+  margin-left: 3rem !important;
+}
+
+.dda-mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+.dda-my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.dda-my-1 {
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+}
+
+.dda-my-2 {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+}
+
+.dda-my-3 {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.dda-my-4 {
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
+}
+
+.dda-my-5 {
+  margin-top: 3rem !important;
+  margin-bottom: 3rem !important;
+}
+
+.dda-my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+.dda-mt-0 {
+  margin-top: 0 !important;
+}
+
+.dda-mt-1 {
+  margin-top: 0.25rem !important;
+}
+
+.dda-mt-2 {
+  margin-top: 0.5rem !important;
+}
+
+.dda-mt-3 {
+  margin-top: 1rem !important;
+}
+
+.dda-mt-4 {
+  margin-top: 1.5rem !important;
+}
+
+.dda-mt-5 {
+  margin-top: 3rem !important;
+}
+
+.dda-mt-auto {
+  margin-top: auto !important;
+}
+
+.dda-me-0 {
+  margin-right: 0 !important;
+}
+
+.dda-me-1 {
+  margin-right: 0.25rem !important;
+}
+
+.dda-me-2 {
+  margin-right: 0.5rem !important;
+}
+
+.dda-me-3 {
+  margin-right: 1rem !important;
+}
+
+.dda-me-4 {
+  margin-right: 1.5rem !important;
+}
+
+.dda-me-5 {
+  margin-right: 3rem !important;
+}
+
+.dda-me-auto {
+  margin-right: auto !important;
+}
+
+.dda-mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.dda-mb-1 {
+  margin-bottom: 0.25rem !important;
+}
+
+.dda-mb-2 {
+  margin-bottom: 0.5rem !important;
+}
+
+.dda-mb-3 {
+  margin-bottom: 1rem !important;
+}
+
+.dda-mb-4 {
+  margin-bottom: 1.5rem !important;
+}
+
+.dda-mb-5 {
+  margin-bottom: 3rem !important;
+}
+
+.dda-mb-auto {
+  margin-bottom: auto !important;
+}
+
+.dda-ms-0 {
+  margin-left: 0 !important;
+}
+
+.dda-ms-1 {
+  margin-left: 0.25rem !important;
+}
+
+.dda-ms-2 {
+  margin-left: 0.5rem !important;
+}
+
+.dda-ms-3 {
+  margin-left: 1rem !important;
+}
+
+.dda-ms-4 {
+  margin-left: 1.5rem !important;
+}
+
+.dda-ms-5 {
+  margin-left: 3rem !important;
+}
+
+.dda-ms-auto {
+  margin-left: auto !important;
+}
+
+.dda-p-0 {
+  padding: 0 !important;
+}
+
+.dda-p-1 {
+  padding: 0.25rem !important;
+}
+
+.dda-p-2 {
+  padding: 0.5rem !important;
+}
+
+.dda-p-3 {
+  padding: 1rem !important;
+}
+
+.dda-p-4 {
+  padding: 1.5rem !important;
+}
+
+.dda-p-5 {
+  padding: 3rem !important;
+}
+
+.dda-px-0 {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+
+.dda-px-1 {
+  padding-right: 0.25rem !important;
+  padding-left: 0.25rem !important;
+}
+
+.dda-px-2 {
+  padding-right: 0.5rem !important;
+  padding-left: 0.5rem !important;
+}
+
+.dda-px-3 {
+  padding-right: 1rem !important;
+  padding-left: 1rem !important;
+}
+
+.dda-px-4 {
+  padding-right: 1.5rem !important;
+  padding-left: 1.5rem !important;
+}
+
+.dda-px-5 {
+  padding-right: 3rem !important;
+  padding-left: 3rem !important;
+}
+
+.dda-py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.dda-py-1 {
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+}
+
+.dda-py-2 {
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
+}
+
+.dda-py-3 {
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+
+.dda-py-4 {
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important;
+}
+
+.dda-py-5 {
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
+}
+
+.dda-pt-0 {
+  padding-top: 0 !important;
+}
+
+.dda-pt-1 {
+  padding-top: 0.25rem !important;
+}
+
+.dda-pt-2 {
+  padding-top: 0.5rem !important;
+}
+
+.dda-pt-3 {
+  padding-top: 1rem !important;
+}
+
+.dda-pt-4 {
+  padding-top: 1.5rem !important;
+}
+
+.dda-pt-5 {
+  padding-top: 3rem !important;
+}
+
+.dda-pe-0 {
+  padding-right: 0 !important;
+}
+
+.dda-pe-1 {
+  padding-right: 0.25rem !important;
+}
+
+.dda-pe-2 {
+  padding-right: 0.5rem !important;
+}
+
+.dda-pe-3 {
+  padding-right: 1rem !important;
+}
+
+.dda-pe-4 {
+  padding-right: 1.5rem !important;
+}
+
+.dda-pe-5 {
+  padding-right: 3rem !important;
+}
+
+.dda-pb-0 {
+  padding-bottom: 0 !important;
+}
+
+.dda-pb-1 {
+  padding-bottom: 0.25rem !important;
+}
+
+.dda-pb-2 {
+  padding-bottom: 0.5rem !important;
+}
+
+.dda-pb-3 {
+  padding-bottom: 1rem !important;
+}
+
+.dda-pb-4 {
+  padding-bottom: 1.5rem !important;
+}
+
+.dda-pb-5 {
+  padding-bottom: 3rem !important;
+}
+
+.dda-ps-0 {
+  padding-left: 0 !important;
+}
+
+.dda-ps-1 {
+  padding-left: 0.25rem !important;
+}
+
+.dda-ps-2 {
+  padding-left: 0.5rem !important;
+}
+
+.dda-ps-3 {
+  padding-left: 1rem !important;
+}
+
+.dda-ps-4 {
+  padding-left: 1.5rem !important;
+}
+
+.dda-ps-5 {
+  padding-left: 3rem !important;
+}
+/**/
+.no-gutters{
+  margin-right: 0;
+  margin-left: 0;
+}
+
+
+:root {
+  --gap-xs: 4px;
+  --gap-lg: 16px;
+
+}
+.dda-gap-xs{
+  gap: var(--gap-xs)
+}
+.dda-gap-lg{
+  gap: var(--gap-lg)
+}
+
+
+
+
+
+
+.dda-card {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: var(--dda-surface-100);
+  background-clip: border-box;
+  border: 1px solid var(--dda-surface-90);
+  border-radius: 12px;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
+  overflow: hidden;
+}
+.dda-card-header{
+  min-height: 60px;
+  padding: 10px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--dda-surface-90);
+}
+.dda-card .dda-card-header .dda-header-dots{
+  height: 25px ;
+  width: 25px ;
+  min-width: auto ;
+  padding: 0px ;
+  outline: 0;
+  margin-top: 6px;
+}
+
+.dda-card .dda-card-body {
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.dda-card .dda-card-footer{
+    border-top: 1px solid var(--dda-surface-90);
+    padding: 15px 1.25rem;
+}
+.dda-card .dda-card-title {
+  font-size: var(--font-h5);
+  font-weight: var(--font-weight-regular);
+  margin-bottom: 0;
+  color: var(--dda-on-surface-0);
+}
+.dda-card .dda-card-text {
+  font-size: var(--font-body);
+  color: var(--dda-on-surface-variant-30);
+}
+.dda-card .dda-card-text-small {
+  font-size: var(--dda-fs-body-md);
+  color: var(--dda-on-surface-variant-30);
+}
+.dda-card .dda-card-text-muted {
+  font-size: var(--dda-fs-body-md);
+  color: var(--dda-on-surface-variant-30);
+}
+.dda-card .dda-card-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.dda-card .image-chip{
+  position: absolute;
+  inset-inline-start: 10px;
+  inset-block-start: 10px;
+}
+.dda-card .dda-card-icon {
+  display: block;
+  margin-bottom: 15px;
+}
+.dda-card .dda-card-icon img {
+  height: 24px;
+}
+.dda-card .dda-card-link {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-end;
+  color: var(--dda-color-primary-40);
+  line-height: 0;
+  padding: 5px 0px;
+  font-size: var(--dda-fs-body-md);
+}
+.dda-card .dda-card-link i {
+    margin: 0px 5px;
+    font-size: var(--dda-fs-title-md);
+}
+.dda-card .card-image-label {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+}
+/*Image Card*/
+.dda-card .dda-card-img.image-card{
+  height: 190px
+}
+.dda-card .dda-image-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.dda-card .dda-card-button-wrap{
+  border-top: 1px solid var(--dda-surface-90);
+}
+.dda-card .chips-container{
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.dda-card .chips-container::-webkit-scrollbar {
+  display: none;                 /* Chrome, Safari, Opera */
+}
+.dda-card .chips-container li{
+  list-style: none;
+}
+.dda-card .dda-chip{
+  white-space: nowrap;
+}
+
+
+/**/
+
+.dda-banner-card{
+  width: 100%;
+  background-color: var(--dda-surface-100);
+  padding: 12px;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: 0px;
+  text-align: start;
+  /* transition: 0.3s; */
+  position: relative;
+}
+
+.dda-banner-card:hover{
+  box-shadow: 0px 0px 7px 4px rgba(0,0,0,0.05);
+}
+.dda-banner-card img{
+  width: 56px;
+  height: 56px; 
+}
+.dda-banner-card .dda-banner-card-title{
+  font-size: var(--font-h6);
+  color: var(--dda-on-surface-0);
+  font-weight: var(--font-weight-medium);
+  margin: 0;
+  padding: 0;
+}
+.dda-banner-card .dda-banner-card-description{
+  font-size: var(--font-caption);
+  color: var(--dda-on-surface-variant-30);
+  font-weight: var(--font-weight-regular);
+  padding: 0;
+  margin-top: 4px;
+  height: 43px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.dda-teamsection-card{
+  border-radius: 0px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--dda-surface-100);
+}
+.dda-teamsection-card img{
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.dda-teamsection-card .body-text{
+  color: var(--dda-on-surface-variant-30);
+}
+.teamsection-type-one-body{
+    width: 100%;
+    position: absolute;
+    bottom: 0px;
+}
+.teamsection-type-one-content{
+    background: rgb(255 255 255 / 98%);
+    padding: 8px 16px;
+    border-radius: 10px;
+    text-align: center;
+}
+.dda-teamsection-card .dda-social-icons-card{
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.dda-teamsection-card .dda-social-icons-card li a img{
+  width: 20px;
+  height: 20px;
+}
+.dda-teamsection-variant-four-body{
+  padding-inline-start: 20px;
+}
+.dda-teamsection-card .teamsection-type-five-body{
+  width: 100%;
+  height: 100%;
+  background: rgb(0, 0, 0);
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
+  padding: 20px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: end;
+  justify-content: center;
+}
+.dda-teamsection-card .teamsection-type-five-body div{
+  text-align: center;
+}
+.dda-teamsection-card .teamsection-type-five-body h5,
+.dda-teamsection-card .teamsection-type-five-body p{
+  color: #ffffff;
+}
+.dda-teamsection-card  .dda-teamsection-variant-six{
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.dda-teamsection-card  .dda-teamsection-variant-six img,
+.dda-teamsection-card  .dda-teamsection-variant-seven img,
+.dda-teamsection-card  .dda-teamsection-variant-eight img{
+  width: 56px;
+  height: 56px;
+}
+
+.dda-teamsection-card  .dda-teamsection-variant-seven{
+  background-color: var(--dda-neutral-98);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  text-align: center;
+  border-radius: 6px;
+}
+
+.dda-teamsection-card  .dda-teamsection-variant-eight{
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.dda-teamsection-card.image-rounded .dda-teamsection-variant-eight img{
+  border-radius: 100%;
+}
+
+.dda-information-card-image {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  margin: 0;
+  overflow: hidden;
+}
+
+/*Image Card*/
+.dda-card-event-date{
+  width: 60px;
+  height: 64px;
+  background: var(--dda-surface-100);
+  border: solid 1px var(--dda-surface-90);
+  border-radius: 6px;
+  position: absolute;
+  top: 15px;
+  inset-inline-start: 15px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+.dda-card .dda-avatar-group{
+  padding-inline-start: 13px !important;
+}
+.dda-card .dda-avatar-group li{
+  margin-inline-start: -13px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .dda-banner-card{
+    transition: 0.3s;
+  }
+}
+.dda-dashboard-header-main{
+  background-color: var(--dda-surface-100);
+  
+}
+.dda-db-header-top {
+  min-height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 30px;
+  border-bottom: 1px solid var(--dda-surface-90);
+}
+.dda-db-header-bottom{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0px 30px;
+  border-bottom: 1px solid var(--dda-surface-90);
+}
+.dda-db-header-left{
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.dda-db-header-left .logo {
+  width: 100px;
+  height: 37px;
+}
+
+.dda-dashboard-header-menu {
+  display: flex;
+  align-items: center;
+}
+
+.dda-dashboard-header-menu ul {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+.dda-dashboard-header-menu ul li {
+  display: inline-flex;
+}
+
+.dda-dashboard-header-menu ul li a.menu-item {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  padding: 0 16px;
+  text-decoration: none;
+  font-size: var(--font-caption);
+  color: var(--dda-on-surface-0);
+  font-weight: var(--dda-fw-400);
+  position: relative;
+}
+
+.dda-dashboard-header-menu.dda-menu-default ul li:hover a.menu-item {
+  background-color: var(--dda-neutral-variant-94);
+  color: var(--dda-color-primary-40);
+  font-weight: var(--dda-fw-700);
+}
+
+.dda-dashboard-header-menu.dda-menu-underline.full-height a.menu-item{
+  height: 69px;
+}
+.dda-dashboard-header-menu.dda-menu-underline ul li:hover a.menu-item::after{
+  content: "";
+  width: calc(100% - 32px);
+  height: 4px;
+  background: var(--dda-color-primary-40);
+  border-radius: 8px 8px 0px 0px;
+  position: absolute;
+  bottom: 0;
+  left: 16px; 
+}
+
+.dda-db-header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.dda-user-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.dda-user-details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.dda-user-name {
+  font-weight: var(--dda-fw-500);
+}
+
+.dda-user-role {
+  color: var(--dda-on-surface-variant-30);
+  font-size: var(--dda-fs-body-md);
+}
+
+
+/* @import url('./templates/dda-sticky-footer.css'); */
+.dda-dashboard-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 80px;
+  background: var(--dda-surface-100);
+  border-right: 1px solid var(--dda-surface-90);
+  z-index: 100;
+  /* transition: all 0.25s ease; */
+  padding-top: 16px;
+}
+.dda-dashboard-sidebar hr{
+  border-color: var(--dda-color-surface-99);
+}
+.db-icon-logo{
+  display: flex;
+  align-items: center;
+  padding: 0px 17px;
+  margin-bottom: 15px;
+}
+.db-icon-logo .db-logo{
+  width: 44px;
+  height: 44px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 0px;
+  border: transparent;
+  background: transparent;
+}
+.db-btn-container{
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 0 27px;
+}
+.db-btn-container .burdger-menu{
+  background: none;
+  outline: none;
+  border: 0px;
+  padding: 0px;
+  font-size: 16px;
+    color: var(--dda-on-surface-variant-30);
+}
+.sidebar-open .db-btn-container{
+    padding: 0 14px;
+}
+.db-btn-container .logo{
+    width: 100px;
+    display: none;
+}
+.sidebar-open .db-btn-container .logo{
+  display: block;
+}
+
+.db-logo .logo-icon{
+  width: 44px;
+  height: 44px;
+}
+.sidebar-open .db-icon-logo{
+  display: none;
+}
+.db-logo .logo{
+  display: none;
+  width: 150px;
+}
+.sidebar-open .db-logo .logo{
+  display: block;
+}
+.dashboard-sidebar-menu{
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 4px;
+  /* transition: all 0.25s ease; */
+}
+.dashboard-sidebar-menu li{
+    display: flex;
+    justify-content: center;
+}
+.dashboard-sidebar-menu li a{
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 15px;
+  font-size: 16px;
+  color: var(--dda-on-surface-variant-30);
+  font-weight: 700;
+  border-radius: 5px;
+}
+.dashboard-sidebar-menu li a:hover{
+  background-color: var(--dda-neutral-variant-94);
+  color: var(--dda-color-primary-40);
+}
+.dashboard-sidebar-menu li a i,
+.dashboard-sidebar-menu li a svg{
+  font-size: 20px;
+}
+.dashboard-sidebar-menu .text-wrap{
+  display: none;
+  align-items: center;
+  gap: 12px;
+}
+.dashboard-sidebar-menu .counter{
+  display: none;
+  height: 20px;
+  min-width: 20px;
+  border: solid 1px var(--dda-surface-90);
+  border-radius: 30px;
+  font-size: 14px;
+  text-align: center;
+}
+/**/
+.dda-dashboard-sidebar.sidebar-open{
+  width: 280px;
+}
+.sidebar-open .dashboard-sidebar-menu{
+  padding: 16px 0;
+}
+.sidebar-open .dashboard-sidebar-menu li a{
+  border-radius: 0;
+  width: 100%;
+  position: relative;
+}
+.sidebar-open .dashboard-sidebar-menu li a::before{
+  content: "";
+  width: 3px;
+  height: 100%;
+  background-color: var(--dda-color-primary-40);
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+}
+.sidebar-open .dashboard-sidebar-menu li a:hover{
+  background-color: var(--dda-neutral-variant-94);
+}
+.sidebar-open .dashboard-sidebar-menu li a:hover::before{
+  opacity: 1;
+}
+.dashboard-sidebar-menu .text-wrap{
+    display: flex;
+}
+
+.dashboard-sidebar-menu .menu-text{
+  display: none;
+}
+.dda-dashboard-sidebar.sidebar-open .counter{
+  display: block;
+}
+
+.dda-dashboard-sidebar.sidebar-open .menu-text{
+  display: block;
+}
+
+
+@media (prefers-reduced-motion: no-preference) {
+  .dda-dashboard-sidebar {
+    transition: all 0.25s ease;
+  }
+  .dashboard-sidebar-menu{
+    transition: all 0.25s ease;
+  }
+}
+.dda-table-container {
+    background: var(--dda-surface-100);
+    border: solid 1px var(--dda-surface-90);
+    border-radius: 10px;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
+
+}
+
+.dda-table-header,
+.dda-table-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    padding: 16px 24px 16px 24px;
+}
+
+.dda-table-header-content {
+    color: var(--dda-on-surface-0);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+}
+
+
+.dda-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.dda-table th,
+.dda-table td {
+    color: var(--dda-on-surface-0);
+    text-align: justify;
+    padding: 12px 24px;
+    border: 0px;
+    border-top: solid 1px var(--dda-surface-90);
+    border-bottom: solid 1px var(--dda-surface-90);
+}
+
+.dda-table th {
+    background-color: var(--dda-surface-96);
+    font-size: 14px;
+    font-weight: var(--dda-fw-500);
+}
+
+.dda-table-sm th,
+.dda-table-sm td {
+    padding: 8px;
+}
+
+.dda-table-striped tbody tr:nth-of-type(even) {
+    background-color: var(--dda-surface-96);
+}
+
+.dda-payment-info {
+    display: inline-flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.dda-payment-icon {
+    width: 58px;
+    height: 40px;
+    padding: 6px;
+    border: solid 1px var(--dda-surface-90);
+    border-radius: 8px;
+}
+
+.dda-user-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.dda-user-details {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.dda-user-name {
+    font-weight: var(--dda-fw-500);
+    color: var(--dda-on-surface-0);
+}
+
+.dda-user-role {
+    color: var(--dda-on-surface-variant-30);
+    font-size: var(--dda-fs-body-md);
+}
+.WB-footer{
+    background-color: var(--dda-surface-100);
+    color: var(--dda-on-surface-variant-30);
+}
+.WB-footer .entt-logo{
+    width: 135px;
+}
+.WB-footer .footer-menu{
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.WB-footer .footer-menu a{
+    color: var(--dda-on-surface-variant-30);
+}
+.WB-footer .footer-menu a:hover{
+    color: var(--dda-color-primary-40);
+}
+.WB-footer .line-seperater{
+    border-bottom: solid 1px #E0E3E2;
+    padding-top: 36px;
+    padding-bottom: 36px;
+}
+.footer-social-icn{
+    width: 24px;
+    height: 24px;
+}
+
+@media screen and (max-width: 992px) {
+    .WB-footer .line-seperater{
+        padding-top: 26px;
+        padding-bottom: 26px;
+    }
+}
+/* @import url('./templates/dda-header-main.css'); */
+
+
+.material-flat-icon {
+  font-variation-settings:
+  'FILL' 1,
+  'wght' 400,
+  'GRAD' 0,
+  'opsz' 24
+}
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  display: inline-block;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  -webkit-font-smoothing: antialiased;
+}
+
+:root{
+  --font-family-main: system-ui, sans-serif;
+}
+body {
+  background-color: var(--dda-surface-100) !important;
+  font-family: var(--font-family-main) !important;
+  font-size: var(--font-caption) !important;
+  font-weight: var(--font-weight-regular) !important;
+  line-height: 1.5;
+  color: var(--dda-on-surface-0) !important;
+  margin: 0;
+}
+legend{
+  font-size: inherit !important;
+}
+* {
+  box-sizing: border-box;
+}
+
+ul{
+  margin: 0;
+}
+a{
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+  padding: 0;
+}
+
+h1, .dda-h1 { font-size: var(--dda-h1);  font-weight: 400; }
+
+h2, .dda-h2 { font-size: var(--dda-h2);  font-weight: 400; }
+
+h3, .dda-h3 { font-size: var(--dda-h3);  font-weight: 400; }
+
+h4, .dda-h4 { font-size: var(--dda-h4);  font-weight: 400; }
+
+h5, .dda-h5 { font-size: var(--dda-h5);  font-weight: 400; }
+
+h6, .dda-h6 { font-size: var(--dda-h6);  font-weight: 400; }
+
+.dda-title { font-size: var(--dda-title);  font-weight: 500; }
+
+.dda-body { font-size: var(--dda-body);  font-weight: 400; }
+
+.dda-caption { font-size: var(--dda-caption);  font-weight: 400; }
+
+.dda-label { font-size: var(--dda-label);  font-weight: 400; }
+
+
+a,
+a:hover {
+  text-decoration: none !important;
+}
+
+button {
+  cursor: pointer;
+}
+
+ul {
+  margin: 0 !important;
+  padding: 0 !important;
+  list-style: none;
+}
+.dda-btn.cta-transparent{
+  background: none;
+  color: #ffffff;
+  border: 0px;
+}
+.dda-btn.cta-transparent:hover{
+  background: #ffffff;
+  color: inherit;
+}
+
+/*Colors*/
+.dda-bg-primary {
+  background-color: var(--dda-color-primary-40);
+}
+
+.dda-bg-secondary {
+  background-color: var(--dda-color-secondary);
+}
+
+.dda-color-primary {
+  color: var(--dda-color-primary-40);
+}
+.dda-color-secondary {
+  color: var(--dda-color-primary-40);
+}
+.dda-color-error {
+  color: var(--dda-color-error-40);
+}
+.dda-color-warning{
+  color: var(--dda-color-warning-40);
+}
+.dda-color-success{
+  color: var(--dda-color-warning-40);
+}
+.dda-color-info{
+  color: var(--dda-color-info-40);
+}
+.dda-color-neutral{
+  color: var(--dda-on-surface-40);
+}
+.dda-color-neutralvariant{
+  color: var(--dda-on-surface-variant-40);
+}
+
+.dda-color-black {
+  color: var(--dda-on-surface-0);
+}
+
+/**/
+.visualy-hidden {
+  position: absolute;
+  opacity: 0;
+  width: 0px;
+  overflow: hidden;
+}
+/* Border-radius classes */
+.dda-rounded-sm {
+  border-radius: 4px !important;
+}
+
+.dda-rounded-md {
+  border-radius: 8px !important;
+}
+
+.dda-rounded-lg {
+  border-radius: 12px !important;
+}
+
+.dda-rounded-circle {
+  border-radius: 100px !important;
+}
+
+.dda-gap-16 {
+  gap: 4rem !important;
+}
+
+.dda-gap-12 {
+  gap: 3rem !important;
+}
+
+.dda-gap-10 {
+  gap: 2.5rem !important;
+}
+
+.dda-gap-8 {
+  gap: 2rem !important;
+}
+
+.dda-gap-6 {
+  gap: 1.5rem !important;
+}
+
+.dda-gap-5 {
+  gap: 1.25rem !important;
+}
+
+.dda-gap-4 {
+  gap: 1rem !important;
+}
+
+.dda-gap-3 {
+  gap: .75rem !important;
+}
+
+.dda-gap-2 {
+  gap: .5rem !important;
+}
+
+.dda-gap-1 {
+  gap: 0.375rem !important;
+}
+
+.dda-text-center{
+  text-align: center;
+}
+::-ms-input-placeholder {
+  color: #8E9191;
+}
+::placeholder {
+  color: #8E9191;
+}
+
+
+
+
+
+.dda-items-start {
+  align-items: flex-start;
+}
+
+.dda-items-end {
+  align-items: flex-end;
+}
+
+.dda-items-center {
+  align-items: center;
+}
+
+.dda-items-baseline {
+  align-items: baseline;
+}
+
+.dda-items-stretch {
+  align-items: stretch;
+}
+
+
+.dda-position-static {
+  position: static !important;
+}
+
+.dda-position-relative {
+  position: relative !important;
+}
+
+.dda-position-absolute {
+  position: absolute !important;
+}
+
+.dda-position-fixed {
+  position: fixed !important;
+}
+
+.dda-position-sticky {
+  position: -webkit-sticky !important;
+  position: sticky !important;
+}
+
+.top-0 {
+  top: 0 !important;
+}
+
+.top-50 {
+  top: 50% !important;
+}
+
+.top-100 {
+  top: 100% !important;
+}
+
+.bottom-0 {
+  bottom: 0 !important;
+}
+
+.bottom-50 {
+  bottom: 50% !important;
+}
+
+.bottom-100 {
+  bottom: 100% !important;
+}
+
+.start-0 {
+  left: 0 !important;
+}
+
+.start-50 {
+  left: 50% !important;
+}
+
+.start-100 {
+  left: 100% !important;
+}
+
+.end-0 {
+  right: 0 !important;
+}
+
+.end-50 {
+  right: 50% !important;
+}
+
+.end-100 {
+  right: 100% !important;
+}
+
+
+.border-right {
+  border-inline-end: solid 1px #E5E5E5;
+}
+
+.visually-hidden{
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.maincontent{
+  padding-top: 170px;
+  padding-bottom: 100px;
+}
+
+@media screen and (max-width: 767px) {
+  .maincontent {
+      padding-top: 100px;
+  }
+}
+/*Temporary*/
+/* body{
+  height: 1550px;
+} */