@charset "UTF-8";
@import "https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";
@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap";

:root {
    --text-default: #161616;
    --link-neutral: #384250;
    --colors-base-white: #ffffff;
    --colors-base-black: #000000;
    --colors-alpha-white: 0deg 0% 100%;
    --colors-alpha-black: 0deg 0% 0%;
    /* Text size */
    --display-2xl: 4.5rem;
    --display-xl: 3.75rem;
    --display-lg: 3rem;
    --display-md: 2.25rem;
    --display-sm: 1.875rem;
    --display-xs: 1.5rem;
    --text-xl: 1.25rem;
    --text-lg: 1.125rem;
    --text-md: 1rem;
    --text-sm: 0.875rem;
    --text-xs: 0.75rem;
    --text-2xs: 0.75rem;
    /* font weight */
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    /* Neutral Colors - gray*/
    --colors-gray-25: #fcfcfd;
    --colors-gray-50: #f9fafb;
    --colors-gray-100: #F3F4F6;
    --colors-gray-200: #E5E7EB;
    --colors-gray-300: #D2D6DB;
    --colors-gray-400: #9DA4AE;
    --colors-gray-500: #6C737F;
    --colors-gray-600: #4D5761;
    --colors-gray-700: #384250;
    --colors-gray-800: #1F2A37;
    --colors-gray-900: #111927;
    --colors-gray-950: #0D121C;
    /* Primary Colors - green*/
    --colors-brand-25: #f7fdf9;
    --colors-brand-50: #f3fcf6;
    --colors-brand-100: #dff6e7;
    --colors-brand-200: #b8eacb;
    --colors-brand-300: #88d8ad;
    --colors-brand-400: #54c08a;
    --colors-brand-500: #25935f;
    --colors-brand-600: #1b8354;
    --colors-brand-700: #166a45;
    --colors-brand-800: #14573a;
    --colors-brand-900: #104631;
    --colors-brand-950: #092a1e;
    /* Error Colors - red*/
    --colors-error-25: #fffbfa;
    --colors-error-50: #fef3f2;
    --colors-error-100: #fee4e2;
    --colors-error-200: #fecdca;
    --colors-error-300: #fda29b;
    --colors-error-400: #f97066;
    --colors-error-500: #f04438;
    --colors-error-600: #d92d20;
    --colors-error-700: #b42318;
    --colors-error-800: #912018;
    --colors-error-900: #7a271a;
    --colors-error-950: #55160c;
    /* Warning Colors*/
    --colors-warning-25: #fffcf5;
    --colors-warning-50: #fffaeb;
    --colors-warning-100: #fef0c7;
    --colors-warning-200: #fedf89;
    --colors-warning-300: #fec84b;
    --colors-warning-400: #fdb022;
    --colors-warning-500: #f79009;
    --colors-warning-600: #dc6803;
    --colors-warning-700: #b54708;
    --colors-warning-800: #93370d;
    --colors-warning-900: #7a2e0e;
    --colors-warning-950: #4e1d09;
    /* Info Colors*/
    --colors-info-25: #f5faff;
    --colors-info-50: #eff8ff;
    --colors-info-100: #d1e9ff;
    --colors-info-200: #b2ddff;
    --colors-info-300: #84caff;
    --colors-info-400: #53b1fd;
    --colors-info-500: #2e90fa;
    --colors-info-600: #1570ef;
    --colors-info-700: #175cd3;
    --colors-info-800: #1849a9;
    --colors-info-900: #194185;
    --colors-info-950: #102a56;
    /* Sucess Colors*/
    --colors-success-25: #f6fef9;
    --colors-success-50: #ecfdf3;
    --colors-success-100: #dcfae6;
    --colors-success-200: #abefc6;
    --colors-success-300: #75e0a7;
    --colors-success-400: #47cd89;
    --colors-success-500: #17b26a;
    --colors-success-600: #079455;
    --colors-success-700: #067647;
    --colors-success-800: #085d3a;
    --colors-success-900: #074d31;
    --colors-success-950: #053321;
    /* below  Note validated yet */
    --gradient-gray-600-500-90deg: linear-gradient(90deg, var(--colors-gray-600) 0%, var(--colors-gray-500) 100%);
    --gradient-gray-700-600-45deg: linear-gradient(45deg, var(--colors-gray-700) 0%, var(--colors-gray-600) 100%);
    --gradient-gray-800-600-45deg: linear-gradient(45deg, var(--colors-gray-800) 0%, var(--colors-gray-600) 100%);
    --gradient-gray-800-600-90deg: linear-gradient(90deg, var(--colors-gray-800) 0%, var(--colors-gray-600) 100%);
    --gradient-gray-800-700-26-5deg: linear-gradient(26.5deg, var(--colors-gray-600) 0%, var(--colors-gray-700) 100%);
    --gradient-gray-900-600-45deg: linear-gradient(45deg, var(--colors-gray-900) 0%, var(--colors-gray-600) 100%);
    --gradient-brand-600-500-90deg: linear-gradient(90deg, var(--colors-brand-600) 0%, var(--colors-brand-500) 100%);
    --gradient-brand-700-600-45deg: linear-gradient(45deg, var(--colors-brand-700) 0%, var(--colors-brand-600) 100%);
    --gradient-brand-800-600-45deg: linear-gradient(45deg, var(--colors-brand-800) 0%, var(--colors-brand-600) 100%);
    --gradient-brand-800-600-90deg: linear-gradient(90deg, var(--colors-brand-800) 0%, var(--colors-brand-600) 100%);
    --gradient-brand-800-700-26-5deg: linear-gradient(26.5deg, var(--colors-brand-600) 0%, var(--colors-brand-700) 100%);
    --gradient-brand-900-600-45deg: linear-gradient(45deg, var(--colors-brand-900) 0%, var(--colors-brand-600) 100%);
    --colors-text-primary: var(--colors-gray-950);
    --colors-text-primary_on-brand: var(--colors-base-white);
    --colors-text-secondary: var(--colors-gray-700);
    --colors-text-secondary_on-brand: hsla(var(--colors-alpha-white)/70%);
    --colors-text-tertiary: var(--colors-gray-600);
    --colors-text-quarterary: var(--colors-gray-500);
    --colors-text-white: var(--colors-base-white);
    --colors-text-disabled: var(--colors-gray-500);
    --colors-text-placeholder: var(--colors-gray-500);
    --colors-text-brand-primary: var(--colors-brand-800);
    --colors-text-brand-secondary: var(--colors-brand-700);
    --colors-text-error-primary: var(--colors-error-600);
    --colors-border-primary: var(--colors-gray-300);
    --colors-border-secondary: var(--colors-gray-200);
    --colors-border-disabled: var(--colors-gray-300);
    --colors-border-disabled_subtle: var(--colors-gray-200);
    --colors-border-brand: var(--colors-brand-300);
    --colors-border-error: var(--colors-error-300);
    --colors-fg-primary: var(--colors-gray-900);
    --colors-fg-quinary-400: var(--colors-gray-400);
    --colors-fg-tertiary-600: var(--colors-gray-600);
    -xs: 0 1px 2px 0 rgba(16, 24, 40, .05);
    --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
    --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.1);
    --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
    --shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
    --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
    --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
    --radius-none: 0;
    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-4xl: 24px;
    --radius-full: 9999px;
    --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-80: 320px;
    --spacing-96: 384px;
    --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;
    --spacing-none: var(--spacing-0);
    --spacing-xxs: var(--spacing-0․5);
    --spacing-xs: var(--spacing-1);
    --spacing-sm: var(--spacing-1․5);
    --spacing-md: var(--spacing-2);
    --spacing-lg: var(--spacing-3);
    --spacing-xl: var(--spacing-4);
    --spacing-2xl: var(--spacing-5);
    --spacing-3xl: var(--spacing-6);
    --spacing-4xl: var(--spacing-8);
    --spacing-5xl: var(--spacing-10);
    --spacing-6xl: var(--spacing-12);
    --spacing-7xl: var(--spacing-16);
    --spacing-8xl: var(--spacing-20);
    --spacing-9xl: var(--spacing-24);
    --spacing-10xl: var(--spacing-32);
    --spacing-11xl: var(--spacing-40);
    --width-xxs: var(--spacing-80);
    --width-xs: var(--spacing-96);
    --width-sm: var(--spacing-120);
    --width-md: var(--spacing-140);
    --width-lg: var(--spacing-160);
    --width-xl: var(--spacing-192);
    --width-2xl: var(--spacing-256);
    --width-3xl: var(--spacing-320);
    --width-4xl: var(--spacing-360);
    --width-5xl: var(--spacing-400);
    --width-6xl: var(--spacing-480);
    --paragraph-max-width: var(--spacing-180);
    --container-padding-mobile: var(--spacing-4);
    --container-padding-desktop: var(--spacing-8);
    --container-max-width-desktop: var(--spacing-320);
    --border-width: 3px;
    --border-radius: 17px;
    --br-lg: 28px;
    --border-radius-large: 32px;
    --border-radius-xlarge: 48px;
    --border-radius-full: 50%;
    --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-80: 320px;
    --spacing-96: 384px;
    --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;
    --spacing-none: var(--spacing-0);
    --spacing-xxs: var(--spacing-0․5);
    --spacing-xs: var(--spacing-1);
    --spacing-sm: var(--spacing-1․5);
    --spacing-md: var(--spacing-2);
    --spacing-lg: var(--spacing-3);
    --spacing-xl: var(--spacing-4);
    --spacing-2xl: var(--spacing-5);
    --spacing-3xl: var(--spacing-6);
    --spacing-4xl: var(--spacing-8);
    --spacing-5xl: var(--spacing-10);
    --spacing-6xl: var(--spacing-12);
    --spacing-7xl: var(--spacing-16);
    --spacing-8xl: var(--spacing-20);
    --spacing-9xl: var(--spacing-24);
    --spacing-10xl: var(--spacing-32);
    --spacing-11xl: var(--spacing-40);
    --width-xxs: var(--spacing-80);
    --width-xs: var(--spacing-96);
    --width-sm: var(--spacing-120);
    --width-md: var(--spacing-140);
    --width-lg: var(--spacing-160);
    --width-xl: var(--spacing-192);
    --width-2xl: var(--spacing-256);
    --width-3xl: var(--spacing-320);
    --width-4xl: var(--spacing-360);
    --width-5xl: var(--spacing-400);
    --width-6xl: var(--spacing-480);
    --paragraph-max-width: var(--spacing-180);
    --container-padding-mobile: var(--spacing-4);
    --container-padding-desktop: var(--spacing-8);
    --container-max-width-desktop: var(--spacing-320);
    --radius-none: 0;
    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-4xl: 24px;
    --radius-full: 9999px;
    --colors-base-white: #ffffff;
    --colors-base-black: #000000;
    --colors-alpha-white: 0deg 0% 100%;
    --colors-alpha-black: 0deg 0% 0%;
    --colors-gray-25: #FCFCFD;
    --colors-gray-50: #F9FAFB;
    --colors-gray-100: #F2F4F7;
    --colors-gray-200: #EAECF0;
    --colors-gray-300: #D0D5DD;
    --colors-gray-400: #98A2B3;
    --colors-gray-500: #667085;
    --colors-gray-600: #475467;
    --colors-gray-800: #182230;
    --colors-gray-900: #101828;
    --colors-gray-25: #FAFAFA;
    --colors-gray-50: #F5F5F6;
    --colors-gray-100: #F0F1F1;
    --colors-gray-200: #ECECED;
    --colors-gray-300: #CECFD2;
    --colors-gray-400: #94969C;
    --colors-gray-500: #85888E;
    --colors-gray-600: #61646C;
    --colors-gray-700: #333741;
    --colors-gray-800: #1F242F;
    --colors-gray-900: #161B26;
    --colors-gray-950: #0C111D;
    --colors-brand-25: #F7FDF9;
    --colors-brand-50: #F3FCF6;
    --colors-brand-100: #DFF6E7;
    --colors-brand-200: #B8EACB;
    --colors-brand-300: #88D8AD;
    --colors-brand-400: #54C08A;
    --colors-brand-500: #25935F;
    --colors-brand-600: #1B8354;
    --colors-brand-700: #166A45;
    --colors-brand-800: #14573A;
    --colors-brand-900: #104631;
    --colors-brand-950: #092A1E;
    --colors-error-25: #FFFBFA;
    --colors-error-50: #FEF3F2;
    --colors-error-100: #FEE4E2;
    --colors-error-200: #FECDCA;
    --colors-error-300: #FDA29B;
    --colors-error-400: #F97066;
    --colors-error-500: #F04438;
    --colors-error-600: #D92D20;
    --colors-error-700: #B42318;
    --colors-error-800: #912018;
    --colors-error-900: #7A271A;
    --colors-error-950: #55160C;
    --colors-warning-25: #FFFCF5;
    --colors-warning-50: #FFFAEB;
    --colors-warning-100: #FEF0C7;
    --colors-warning-200: #FEDF89;
    --colors-warning-300: #FEC84B;
    --colors-warning-400: #FDB022;
    --colors-warning-500: #F79009;
    --colors-warning-600: #DC6803;
    --colors-warning-700: #B54708;
    --colors-warning-800: #93370D;
    --colors-warning-900: #7A2E0E;
    --colors-warning-950: #4E1D09;
    --colors-success-25: #F6FEF9;
    --colors-success-50: #ECFDF3;
    --colors-success-100: #DCFAE6;
    --colors-success-200: #ABEFC6;
    --colors-success-300: #75E0A7;
    --colors-success-400: #47CD89;
    --colors-success-500: #17B26A;
    --colors-success-600: #079455;
    --colors-success-700: #067647;
    --colors-success-800: #085D3A;
    --colors-success-900: #074D31;
    --colors-success-950: #053321;
    --colors-info-25: #F5FAFF;
    --colors-info-50: #EFF8FF;
    --colors-info-100: #D1E9FF;
    --colors-info-200: #B2DDFF;
    --colors-info-300: #84CAFF;
    --colors-info-400: #53B1FD;
    --colors-info-500: #2E90FA;
    --colors-info-600: #1570EF;
    --colors-info-700: #175CD3;
    --colors-info-800: #1849A9;
    --colors-info-900: #194185;
    --colors-info-950: #102A56;
    --colors-gray-blue-25: #FCFCFD;
    --colors-gray-blue-50: #F8F9FC;
    --colors-gray-blue-100: #EAECF5;
    --colors-gray-blue-200: #D5D9EB;
    --colors-gray-blue-300: #B3B8DB;
    --colors-gray-blue-400: #717BBC;
    --colors-gray-blue-500: #4E5BA6;
    --colors-gray-blue-600: #3E4784;
    --colors-gray-blue-700: #363F72;
    --colors-gray-blue-800: #293056;
    --colors-gray-blue-900: #101323;
    --colors-gray-blue-950: #0D0F1C;
    --colors-gray-cool-25: #FCFCFD;
    --colors-gray-cool-50: #F9F9FB;
    --colors-gray-cool-100: #EFF1F5;
    --colors-gray-cool-200: #DCDFEA;
    --colors-gray-cool-300: #B9C0D4;
    --colors-gray-cool-400: #7D89B0;
    --colors-gray-cool-500: #5D6B98;
    --colors-gray-cool-600: #4A5578;
    --colors-gray-cool-700: #404968;
    --colors-gray-cool-800: #30374F;
    --colors-gray-cool-900: #111322;
    --colors-gray-cool-950: #0E101B;
    --colors-gray-modern-25: #FCFCFD;
    --colors-gray-modern-50: #F8FAFC;
    --colors-gray-modern-100: #EEF2F6;
    --colors-gray-modern-200: #E3E8EF;
    --colors-gray-modern-300: #CDD5DF;
    --colors-gray-modern-400: #9AA4B2;
    --colors-gray-modern-500: #697586;
    --colors-gray-modern-600: #4B5565;
    --colors-gray-modern-700: #364152;
    --colors-gray-modern-800: #202939;
    --colors-gray-modern-900: #121926;
    --colors-gray-modern-950: #0D121C;
    --colors-gray-neutral-25: #FCFCFD;
    --colors-gray-neutral-50: #F9FAFB;
    --colors-gray-neutral-100: #F3F4F6;
    --colors-gray-neutral-200: #E5E7EB;
    --colors-gray-neutral-300: #D2D6DB;
    --colors-gray-neutral-400: #9DA4AE;
    --colors-gray-neutral-500: #6C737F;
    --colors-gray-neutral-600: #4D5761;
    --colors-gray-neutral-700: #384250;
    --colors-gray-neutral-800: #1F2A37;
    --colors-gray-neutral-900: #111927;
    --colors-gray-neutral-950: #0D121C;
    --colors-gray-iron-25: #FCFCFC;
    --colors-gray-iron-50: #FAFAFA;
    --colors-gray-iron-100: #F4F4F5;
    --colors-gray-iron-200: #E4E4E7;
    --colors-gray-iron-300: #D1D1D6;
    --colors-gray-iron-400: #A0A0AB;
    --colors-gray-iron-500: #70707B;
    --colors-gray-iron-600: #51525C;
    --colors-gray-iron-700: #3F3F46;
    --colors-gray-iron-800: #26272B;
    --colors-gray-iron-900: #1A1A1E;
    --colors-gray-iron-950: #131316;
    --colors-gray-true-25: #FCFCFC;
    --colors-gray-true-50: #FAFAFA;
    --colors-gray-true-100: #F5F5F5;
    --colors-gray-true-200: #E5E5E5;
    --colors-gray-true-300: #D6D6D6;
    --colors-gray-true-400: #A3A3A3;
    --colors-gray-true-500: #737373;
    --colors-gray-true-600: #525252;
    --colors-gray-true-700: #424242;
    --colors-gray-true-800: #292929;
    --colors-gray-true-900: #141414;
    --colors-gray-true-950: #0F0F0F;
    --colors-gray-warm-25: #FDFDFC;
    --colors-gray-warm-50: #FAFAF9;
    --colors-gray-warm-100: #F5F5F4;
    --colors-gray-warm-200: #E7E5E4;
    --colors-gray-warm-300: #D7D3D0;
    --colors-gray-warm-400: #A9A29D;
    --colors-gray-warm-500: #79716B;
    --colors-gray-warm-600: #57534E;
    --colors-gray-warm-700: #44403C;
    --colors-gray-warm-800: #292524;
    --colors-gray-warm-900: #1C1917;
    --colors-gray-warm-950: #171412;
    --colors-moss-25: #FAFDF7;
    --colors-moss-50: #F5FBEE;
    --colors-moss-100: #E6F4D7;
    --colors-moss-200: #CEEAB0;
    --colors-moss-300: #ACDC79;
    --colors-moss-400: #86CB3C;
    --colors-moss-500: #669F2A;
    --colors-moss-600: #4F7A21;
    --colors-moss-700: #3F621A;
    --colors-moss-800: #335015;
    --colors-moss-900: #2B4212;
    --colors-moss-950: #1A280B;
    --colors-green-light-25: #FAFEF5;
    --colors-green-light-50: #F3FEE7;
    --colors-green-light-100: #E3FBCC;
    --colors-green-light-200: #D0F8AB;
    --colors-green-light-300: #A6EF67;
    --colors-green-light-400: #85E13A;
    --colors-green-light-500: #66C61C;
    --colors-green-light-600: #4CA30D;
    --colors-green-light-700: #3B7C0F;
    --colors-green-light-800: #326212;
    --colors-green-light-900: #2B5314;
    --colors-green-light-950: #15290A;
    --colors-green-25: #F6FEF9;
    --colors-green-50: #EDFCF2;
    --colors-green-100: #D3F8DF;
    --colors-green-200: #AAF0C4;
    --colors-green-300: #73E2A3;
    --colors-green-400: #3CCB7F;
    --colors-green-500: #16B364;
    --colors-green-600: #099250;
    --colors-green-700: #087443;
    --colors-green-800: #095C37;
    --colors-green-900: #084C2E;
    --colors-green-950: #052E1C;
    --colors-Teal-25: #F6FEFC;
    --colors-Teal-50: #F0FDF9;
    --colors-Teal-100: #CCFBEF;
    --colors-Teal-200: #99F6E0;
    --colors-Teal-300: #5FE9D0;
    --colors-Teal-400: #2ED3B7;
    --colors-Teal-500: #15B79E;
    --colors-Teal-600: #0E9384;
    --colors-Teal-700: #107569;
    --colors-Teal-800: #125D56;
    --colors-Teal-900: #134E48;
    --colors-Teal-950: #0A2926;
    --colors-cyan-25: #F5FEFF;
    --colors-cyan-50: #ECFDFF;
    --colors-cyan-100: #CFF9FE;
    --colors-cyan-200: #A5F0FC;
    --colors-cyan-300: #67E3F9;
    --colors-cyan-400: #22CCEE;
    --colors-cyan-500: #06AED4;
    --colors-cyan-600: #088AB2;
    --colors-cyan-700: #0E7090;
    --colors-cyan-800: #155B75;
    --colors-cyan-900: #164C63;
    --colors-cyan-950: #0D2D3A;
    --colors-blue-light-25: #F5FBFF;
    --colors-blue-light-50: #F0F9FF;
    --colors-blue-light-100: #E0F2FE;
    --colors-blue-light-200: #B9E6FE;
    --colors-blue-light-300: #7CD4FD;
    --colors-blue-light-400: #36BFFA;
    --colors-blue-light-500: #0BA5EC;
    --colors-blue-light-600: #0086C9;
    --colors-blue-light-700: #026AA2;
    --colors-blue-light-800: #065986;
    --colors-blue-light-900: #0B4A6F;
    --colors-blue-light-950: #062C41;
    --colors-blue-dark-25: #F5F8FF;
    --colors-blue-dark-50: #EFF4FF;
    --colors-blue-dark-100: #D1E0FF;
    --colors-blue-dark-200: #B2CCFF;
    --colors-blue-dark-300: #84ADFF;
    --colors-blue-dark-400: #528BFF;
    --colors-blue-dark-500: #2970FF;
    --colors-blue-dark-600: #155EEF;
    --colors-blue-dark-700: #004EEB;
    --colors-blue-dark-800: #0040C1;
    --colors-blue-dark-900: #00359E;
    --colors-blue-dark-950: #002266;
    --colors-indigo-25: #F5F8FF;
    --colors-indigo-50: #EEF4FF;
    --colors-indigo-100: #E0EAFF;
    --colors-indigo-200: #C7D7FE;
    --colors-indigo-300: #A4BCFD;
    --colors-indigo-400: #8098F9;
    --colors-indigo-500: #6172F3;
    --colors-indigo-600: #444CE7;
    --colors-indigo-700: #3538CD;
    --colors-indigo-800: #2D31A6;
    --colors-indigo-900: #2D3282;
    --colors-indigo-950: #1F235B;
    --colors-violet-25: #FBFAFF;
    --colors-violet-50: #F5F3FF;
    --colors-violet-100: #ECE9FE;
    --colors-violet-200: #DDD6FE;
    --colors-violet-300: #C3B5FD;
    --colors-violet-400: #A48AFB;
    --colors-violet-500: #875BF7;
    --colors-violet-600: #7839EE;
    --colors-violet-700: #6927DA;
    --colors-violet-800: #5720B7;
    --colors-violet-900: #491C96;
    --colors-violet-950: #2E125E;
    --colors-purple-25: #FAFAFF;
    --colors-purple-50: #F4F3FF;
    --colors-purple-100: #EBE9FE;
    --colors-purple-200: #D9D6FE;
    --colors-purple-300: #BDB4FE;
    --colors-purple-400: #9B8AFB;
    --colors-purple-500: #7A5AF8;
    --colors-purple-600: #6938EF;
    --colors-purple-700: #5925DC;
    --colors-purple-800: #4A1FB8;
    --colors-purple-900: #3E1C96;
    --colors-purple-950: #27115F;
    --colors-fuchsia-25: #FEFAFF;
    --colors-fuchsia-50: #FDF4FF;
    --colors-fuchsia-100: #FBE8FF;
    --colors-fuchsia-200: #F6D0FE;
    --colors-fuchsia-300: #EEAAFD;
    --colors-fuchsia-400: #E478FA;
    --colors-fuchsia-500: #D444F1;
    --colors-fuchsia-600: #BA24D5;
    --colors-fuchsia-700: #9F1AB1;
    --colors-fuchsia-800: #821890;
    --colors-fuchsia-900: #6F1877;
    --colors-fuchsia-950: #47104C;
    --colors-pink-25: #FEF6FB;
    --colors-pink-50: #FDF2FA;
    --colors-pink-100: #FCE7F6;
    --colors-pink-200: #FCCEEE;
    --colors-pink-300: #FAA7E0;
    --colors-pink-400: #F670C7;
    --colors-pink-500: #EE46BC;
    --colors-pink-600: #DD2590;
    --colors-pink-700: #C11574;
    --colors-pink-800: #9E165F;
    --colors-pink-900: #851651;
    --colors-pink-950: #4E0D30;
    --colors-rosé-25: #FFF5F6;
    --colors-rosé-50: #FFF1F3;
    --colors-rosé-100: #FFE4E8;
    --colors-rosé-200: #FECDD6;
    --colors-rosé-300: #FEA3B4;
    --colors-rosé-400: #FD6F8E;
    --colors-rosé-500: #F63D68;
    --colors-rosé-600: #E31B54;
    --colors-rosé-700: #C01048;
    --colors-rosé-800: #A11043;
    --colors-rosé-900: #89123E;
    --colors-rosé-950: #510B24;
    --colors-orange-dark-25: #FFF9F5;
    --colors-orange-dark-50: #FFF4ED;
    --colors-orange-dark-100: #FFE6D5;
    --colors-orange-dark-200: #FFD6AE;
    --colors-orange-dark-300: #FF9C66;
    --colors-orange-dark-400: #FF692E;
    --colors-orange-dark-500: #FF4405;
    --colors-orange-dark-600: #E62E05;
    --colors-orange-dark-700: #BC1B06;
    --colors-orange-dark-800: #97180C;
    --colors-orange-dark-900: #771A0D;
    --colors-orange-dark-950: #57130A;
    --colors-orange-25: #FEFAF5;
    --colors-orange-50: #FEF6EE;
    --colors-orange-100: #FDEAD7;
    --colors-orange-200: #F9DBAF;
    --colors-orange-300: #F7B27A;
    --colors-orange-400: #F38744;
    --colors-orange-500: #EF6820;
    --colors-orange-600: #E04F16;
    --colors-orange-700: #B93815;
    --colors-orange-800: #932F19;
    --colors-orange-900: #772917;
    --colors-orange-950: #511C10;
    --colors-yellow-25: #FEFDF0;
    --colors-yellow-50: #FEFBE8;
    --colors-yellow-100: #FEF7C3;
    --colors-yellow-200: #FEEE95;
    --colors-yellow-300: #FDE272;
    --colors-yellow-400: #FAC515;
    --colors-yellow-500: #EAAA08;
    --colors-yellow-600: #CA8504;
    --colors-yellow-700: #A15C07;
    --colors-yellow-800: #854A0E;
    --colors-yellow-900: #713B12;
    --colors-yellow-950: #542C0D;
    --radius-0: 0;
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-16: 16px;
    --radius-24: 24px;
    --radius-9999: 9999px;
    --components-card-radius: var(--spacing-4);
    --radius-none: var(--radius-0);
    --radius-xs: var(--radius-2);
    --radius-sm: var(--radius-4);
    --radius-md: var(--radius-8);
    --radius-lg: var(--radius-16);
    --radius-xl: var(--radius-24);
    --radius-full: var(--radius-9999);
    --colors-base-white: #ffffff;
    --colors-base-black: #161616;
    --colors-primary-sa-flag-25: #f7fdf9;
    --colors-primary-sa-flag-50: #f3fcf6;
    --colors-primary-sa-flag-100: #dff6e7;
    --colors-primary-sa-flag-200: #b8eacb;
    --colors-primary-sa-flag-300: #88d8ad;
    --colors-primary-sa-flag-400: #54c08a;
    --colors-primary-sa-flag-500-alpha-10: #25935f19;
    --colors-primary-sa-flag-500: #25935f;
    --colors-primary-sa-flag-600-primary: #1b8354;
    --colors-primary-sa-flag-700: #166a45;
    --colors-primary-sa-flag-800: #14573a;
    --colors-primary-sa-flag-900: #104631;
    --colors-primary-sa-flag-950: #092a1e;
    --colors-secondary-gold-25: #fffef7;
    --colors-secondary-gold-50: #fffef2;
    --colors-secondary-gold-100: #fffce6;
    --colors-secondary-gold-200: #fcf3bd;
    --colors-secondary-gold-300: #fae996;
    --colors-secondary-gold-400: #f7d54d;
    --colors-secondary-gold-500: #f5bd02;
    --colors-secondary-gold-600-primary: #dba102;
    --colors-secondary-gold-700: #b87b02;
    --colors-secondary-gold-800: #945c01;
    --colors-secondary-gold-900: #6e3c00;
    --colors-secondary-gold-950: #472400;
    --colors-tertiary-lavendar-25: #fefcff;
    --colors-tertiary-lavendar-50: #f9f5fa;
    --colors-tertiary-lavendar-100: #f2e9f5;
    --colors-tertiary-lavendar-200: #e1cce8;
    --colors-tertiary-lavendar-300: #ccadd9;
    --colors-tertiary-lavendar-400: #a57bba;
    --colors-tertiary-lavendar-500-primary: #80519f;
    --colors-tertiary-lavendar-600: #6d428f;
    --colors-tertiary-lavendar-700: #532d75;
    --colors-tertiary-lavendar-800: #3d1d5e;
    --colors-tertiary-lavendar-900: #281047;
    --colors-tertiary-lavendar-950: #16072e;
    --colors-neutral-25: #fcfcfd;
    --colors-neutral-50: #f9fafb;
    --colors-neutral-100: #f3f4f6;
    --colors-neutral-200: #e5e7eb;
    --colors-neutral-300: #d2d6db;
    --colors-neutral-400: #9da4ae;
    --colors-neutral-500: #6c727e;
    --colors-neutral-600: #4d5761;
    --colors-neutral-700: #384250;
    --colors-neutral-800: #1f2a37;
    --colors-neutral-900: #111927;
    --colors-neutral-950: #0c111b;
    --colors-blue-25: #f5faff;
    --colors-blue-50: #eff8ff;
    --colors-blue-100: #d1e9ff;
    --colors-blue-200: #b2ddff;
    --colors-blue-300: #84caff;
    --colors-blue-400: #53b0fd;
    --colors-blue-500: #2e90fa;
    --colors-blue-600: #156fee;
    --colors-blue-700: #175cd3;
    --colors-blue-800: #1849a9;
    --colors-blue-900: #194084;
    --colors-blue-950: #102a56;
    --colors-green-25: #f6fef9;
    --colors-green-50: #ecfdf3;
    --colors-green-100: #dcfae6;
    --colors-green-200: #abefc6;
    --colors-green-300: #75dfa6;
    --colors-green-400: #47cd89;
    --colors-green-500: #17b169;
    --colors-green-600: #069454;
    --colors-green-700: #067647;
    --colors-green-800: #085d3a;
    --colors-green-900: #074c30;
    --colors-green-950: #053321;
    --colors-yellow-25: #fffcf5;
    --colors-yellow-50: #fffaeb;
    --colors-yellow-100: #fef0c7;
    --colors-yellow-200: #fedf89;
    --colors-yellow-300: #fec84b;
    --colors-yellow-400: #fdb022;
    --colors-yellow-500: #f79009;
    --colors-yellow-600: #dc6803;
    --colors-yellow-700: #b54707;
    --colors-yellow-800: #93370c;
    --colors-yellow-900: #7a2e0e;
    --colors-yellow-950: #4e1d09;
    --colors-red-25: #fffbfa;
    --colors-red-50: #fef3f2;
    --colors-red-100: #fee4e2;
    --colors-red-200: #fecdca;
    --colors-red-300: #fca19b;
    --colors-red-400: #f97066;
    --colors-red-500: #f04437;
    --colors-red-600: #d92c20;
    --colors-red-700: #b42318;
    --colors-red-800: #912018;
    --colors-red-900: #7a2619;
    --colors-red-950: #54150c;
    --colors-alpha-alpha-white-0: #ffffff00;
    --colors-alpha-alpha-white-10: #ffffff19;
    --colors-alpha-alpha-white-20: #ffffff33;
    --colors-alpha-alpha-white-30: #ffffff4c;
    --colors-alpha-alpha-white-40: #ffffff66;
    --colors-alpha-alpha-white-50: #ffffff7f;
    --colors-alpha-alpha-white-60: #ffffff99;
    --colors-alpha-alpha-white-70: #ffffffb2;
    --colors-alpha-alpha-white-80: #ffffffcc;
    --colors-alpha-alpha-white-90: #ffffffe5;
    --colors-alpha-alpha-white-100: #ffffff;
    --colors-alpha-alpha-black-0: #16161600;
    --colors-alpha-alpha-black-10: #16161619;
    --colors-alpha-alpha-black-20: #16161633;
    --colors-alpha-alpha-black-30: #1616164c;
    --colors-alpha-alpha-black-40: #16161666;
    --colors-alpha-alpha-black-50: #1616167f;
    --colors-alpha-alpha-black-60: #16161699;
    --colors-alpha-alpha-black-70: #161616b2;
    --colors-alpha-alpha-black-80: #161616cc;
    --colors-alpha-alpha-black-90: #161616e5;
    --colors-alpha-alpha-black-100: #161616;
    --colors-alpha-alpha-green-10: #1b835419;
    --colors-alpha-alpha-green-20: #1b835433;
    --colors-alpha-alpha-green-30: #1b83544c;
    --colors-alpha-alpha-green-40: #1b835466;
    --colors-alpha-alpha-green-50: #1b83547f;
    --colors-alpha-alpha-green-60: #1b835499;
    --colors-alpha-alpha-green-70: #1b8354b2;
    --colors-alpha-alpha-green-80: #1b8354cc;
    --colors-alpha-alpha-green-90: #1b8354e5;
    --gradient-gray-600-500-90deg: linear-gradient(90deg, var(--colors-gray-600) 0%, var(--colors-gray-500) 100%);
    --gradient-gray-700-600-45deg: linear-gradient(45deg, var(--colors-gray-700) 0%, var(--colors-gray-600) 100%);
    --gradient-gray-800-600-45deg: linear-gradient(45deg, var(--colors-gray-800) 0%, var(--colors-gray-600) 100%);
    --gradient-gray-800-600-90deg: linear-gradient(90deg, var(--colors-gray-800) 0%, var(--colors-gray-600) 100%);
    --gradient-gray-800-700-26-5deg: linear-gradient(26.5deg, var(--colors-gray-600) 0%, var(--colors-gray-700) 100%);
    --gradient-gray-900-600-45deg: linear-gradient(45deg, var(--colors-gray-900) 0%, var(--colors-gray-600) 100%);
    --gradient-brand-600-500-90deg: linear-gradient(90deg, var(--colors-brand-600) 0%, var(--colors-brand-500) 100%);
    --gradient-brand-700-600-45deg: linear-gradient(45deg, var(--colors-brand-700) 0%, var(--colors-brand-600) 100%);
    --gradient-brand-800-600-45deg: linear-gradient(45deg, var(--colors-brand-800) 0%, var(--colors-brand-600) 100%);
    --gradient-brand-800-600-90deg: linear-gradient(90deg, var(--colors-brand-800) 0%, var(--colors-brand-600) 100%);
    --gradient-brand-800-700-26-5deg: linear-gradient(26.5deg, var(--colors-brand-600) 0%, var(--colors-brand-700) 100%);
    --gradient-brand-900-600-45deg: linear-gradient(45deg, var(--colors-brand-900) 0%, var(--colors-brand-600) 100%);
    --colors-text-primary: var(--colors-gray-900);
    --colors-text-primary_on-brand: var(--colors-base-white);
    --colors-text-secondary: var(--colors-gray-700);
    --colors-text-secondary_on-brand: hsla(var(--colors-alpha-white)/70%);
    --colors-text-tertiary: var(--colors-gray-600);
    --colors-text-quarterary: var(--colors-gray-500);
    --colors-text-white: var(--colors-base-white);
    --colors-text-disabled: var(--colors-gray-500);
    --colors-text-placeholder: var(--colors-gray-500);
    --colors-text-brand-primary: var(--colors-brand-800);
    --colors-text-brand-secondary: var(--colors-brand-700);
    --colors-text-error-primary: var(--colors-error-600);
    --colors-border-primary: var(--colors-gray-300);
    --colors-border-secondary: var(--colors-gray-200);
    --colors-border-disabled: var(--colors-gray-300);
    --colors-border-disabled_subtle: var(--colors-gray-200);
    --colors-border-brand: var(--colors-brand-300);
    --colors-border-error: var(--colors-error-300);
    --colors-fg-primary: var(--colors-gray-900);
    --colors-fg-quinary-400: var(--colors-gray-400);
    --colors-fg-tertiary-600: var(--colors-gray-600);
    --background-white: var(--colors-base-white);
    --background-body: var(--colors-neutral-50);
    --background-menu: var(--colors-base-white);
    --background-card: var(--colors-base-white);
    --background-surface-oncolor: var(--colors-base-white);
    --background-black: var(--colors-base-black);
    --background-brand-light: var(--colors-primary-sa-flag-50);
    --background-neutral-800: var(--colors-neutral-800);
    --background-neutral-400: var(--colors-neutral-400);
    --background-neutral-300: var(--colors-neutral-300);
    --background-neutral-200: var(--colors-neutral-200);
    --background-neutral-100: var(--colors-neutral-100);
    --background-neutral-50: var(--colors-neutral-50);
    --background-neutral-25: var(--colors-neutral-25);
    --background-primary: var(--colors-primary-sa-flag-600-primary);
    --background-primary-400: var(--colors-primary-sa-flag-400);
    --background-primary-200: var(--colors-primary-sa-flag-200);
    --background-primary-50: var(--colors-primary-sa-flag-50);
    --background-primary-25: var(--colors-primary-sa-flag-25);
    --background-secondary: var(--colors-secondary-gold-600-primary);
    --background-secondary-50: var(--colors-secondary-gold-50);
    --background-secondary-25: var(--colors-secondary-gold-25);
    --background-tertiary: var(--colors-tertiary-lavendar-600);
    --background-tertiary-50: var(--colors-tertiary-lavendar-50);
    --background-tertiary-25: var(--colors-tertiary-lavendar-25);
    --background-success: var(--colors-green-600);
    --background-success-light: var(--colors-green-50);
    --background-success-50: var(--colors-green-50);
    --background-success-25: var(--colors-green-25);
    --background-info: var(--colors-blue-600);
    --background-info-light: var(--colors-blue-50);
    --background-info-50: var(--colors-blue-50);
    --background-info-25: var(--colors-blue-25);
    --background-warning: var(--colors-yellow-600);
    --background-warning-light: var(--colors-yellow-50);
    --background-warning-50: var(--colors-yellow-50);
    --background-warning-25: var(--colors-yellow-25);
    --background-error: var(--colors-red-600);
    --background-error-light: var(--colors-red-50);
    --background-error-50: var(--colors-red-50);
    --background-error-25: var(--colors-red-25);
    --background-sa-flag: var(--colors-green-900);
    --background-sa-flag-50: var(--colors-green-50);
    --background-sa-flag-25: var(--colors-green-25);
    --background-notification-white: var(--colors-base-white);
    --text-default: var(--colors-base-black);
    --text-primary: var(--colors-primary-sa-flag-600-primary);
    --text-secondary: var(--colors-secondary-gold-600-primary);
    --text-tertiary: var(--colors-tertiary-lavendar-500-primary);
    --text-primary-sa-flag: var(--colors-primary-sa-flag-800);
    --text-display: var(--colors-neutral-800);
    --text-primary-paragraph: var(--colors-neutral-700);
    --text-secondary-paragraph: var(--colors-neutral-500);
    --text-oncolor-primary: var(--colors-base-white);
    --text-oncolor-secondary: var(--alpha-white-80);
    --text-oncolor-tertiary: var(--alpha-white-70);
    --text-success: var(--colors-green-700);
    --text-info: var(--colors-blue-700);
    --text-warning: var(--colors-yellow-700);
    --text-error: var(--colors-red-700);
    --text-primary-light: var(--colors-primary-sa-flag-300);
    --text-secondary-light: var(--colors-secondary-gold-300);
    --text-tertiary-light: var(--colors-tertiary-lavendar-300);
    --text-default-disabled: var(--colors-neutral-400);
    --text-default-oncolor-disabled: var(--alpha-white-40);
    --border-white: var(--colors-base-white);
    --border-white-40: var(--alpha-white-40);
    --button-background-black-default: var(--colors-neutral-950);
    --button-background-black-hovered: var(--colors-neutral-800);
    --button-background-black-pressed: var(--colors-neutral-600);
    --button-background-black-selected: var(--colors-neutral-700);
    --button-background-black-focused: var(--colors-neutral-950);
    --button-background-primary-default: var(--colors-primary-sa-flag-600-primary);
    --button-background-primary-hovered: var(--colors-primary-sa-flag-700);
    --button-background-primary-pressed: var(--colors-primary-sa-flag-900);
    --button-background-primary-selected: var(--colors-primary-sa-flag-800);
    --button-background-primary-focused: var(--colors-primary-sa-flag-600-primary);
    --button-background-neutral-default: var(--colors-neutral-100);
    --button-background-neutral-hovered: var(--colors-neutral-100);
    --button-background-neutral-pressed: var(--colors-neutral-200);
    --button-background-neutral-selected: var(--colors-neutral-200);
    --button-background-neutral-focused: var(--colors-neutral-100);
    --button-background-danger-primary-default: var(--colors-red-600);
    --button-background-danger-primary-hovered: var(--colors-red-700);
    --button-background-danger-primary-pressed: var(--colors-red-900);
    --button-background-danger-primary-selected: var(--colors-red-800);
    --button-background-danger-primary-focused: var(--colors-red-600);
    --button-label-danger-primary-default-oncolor: var(--colors-red-200);
    --button-label-danger-primary-hovered-oncolor: var(--colors-red-300);
    --button-label-danger-primary-pressed-oncolor: var(--colors-red-400);
    --button-background-danger-secondary-default: var(--colors-red-50);
    --button-background-danger-secondary-hovered: var(--colors-red-100);
    --button-background-danger-secondary-pressed: var(--colors-red-200);
    --button-background-danger-secondary-selected: var(--colors-red-50);
    --button-background-danger-secondary-focused: var(--colors-red-50);
    --button-background-oncolor-default: var(--colors-base-white);
    --button-background-oncolor-hovered: var(--alpha-white-80);
    --button-background-oncolor-pressed: var(--alpha-white-60);
    --button-background-oncolor-selected: var(--alpha-white-70);
    --button-background-oncolor-focused: var(--alpha-white-100);
    --button-background-transparent-default: var(--alpha-white-0);
    --button-background-transparent-hovered: var(--alpha-white-20);
    --button-background-transparent-pressed: var(--alpha-white-40);
    --button-background-transparent-selected: var(--alpha-white-30);
    --button-background-transparent-focused: var(--alpha-white-0);
    --button-background-disabled-on-color: var(--alpha-white-20);
    --button-label-transparent-hovered-on-color: var(--colors-primary-sa-flag-400);
    --border-black: var(--colors-base-black);
    --border-primary: var(--colors-primary-sa-flag-600-primary);
    --border-primary-light: var(--colors-primary-sa-flag-200);
    --border-secondary: var(--colors-secondary-gold-600-primary);
    --border-secondary-light: var(--colors-secondary-gold-200);
    --border-tertiary: var(--colors-tertiary-lavendar-500-primary);
    --border-tertiary-light: var(--colors-tertiary-lavendar-200);
    --border-neutral-primary: var(--colors-neutral-300);
    --border-neutral-secondary: var(--colors-neutral-200);
    --border-neutral-tertiary: var(--colors-neutral-100);
    --border-background-white: var(--colors-neutral-100);
    --border-background-neutral: var(--colors-neutral-300);
    --border-transparent-10: var(--alpha-white-10);
    --border-oncolor-transparent-30: var(--colors-alpha-alpha-white-30);
    --border-success: var(--colors-green-700);
    --button-label-transparent-pressed-on-color: var(--colors-primary-sa-flag-300);
    --border-success-light: var(--colors-green-200);
    --border-info: var(--colors-blue-700);
    --button-label-transparent-selected-on-color: var(--colors-primary-sa-flag-400);
    --border-info-light: var(--colors-blue-200);
    --button-icon-transparent-hovered-on-color: var(--background-primary-400);
    --border-warning: var(--colors-yellow-700);
    --border-warning-light: var(--colors-yellow-200);
    --border-error: var(--colors-red-700);
    --button-icon-transparent-pressed-on-color: var(--colors-primary-sa-flag-300);
    --border-error-light: var(--colors-red-200);
    --button-icon-transparent-selected-on-color: var(--colors-primary-sa-flag-400);
    --border-disabled: var(--colors-neutral-400);
    --link-primary: var(--colors-primary-sa-flag-600-primary);
    --link-primary-hovered: var(--colors-primary-sa-flag-400);
    --link-primary-pressed: var(--colors-primary-sa-flag-300);
    --link-primary-focused: var(--colors-primary-sa-flag-600-primary);
    --link-primary-visited: var(--colors-primary-sa-flag-800);
    --link-icon-primary-hovered: var(--colors-primary-sa-flag-400);
    --link-icon-primary-pressed: var(--colors-primary-sa-flag-300);
    --link-icon-primary-focused: var(--colors-primary-sa-flag-600-primary);
    --link-icon-primary-visited: var(--colors-primary-sa-flag-800);
    --link-secondary: var(--colors-secondary-gold-600-primary);
    --link-secondary-hovered: var(--colors-secondary-gold-400);
    --link-secondary-pressed: var(--colors-secondary-gold-300);
    --link-secondary-focused: var(--colors-secondary-gold-600-primary);
    --link-secondary-visited: var(--colors-secondary-gold-900);
    --link-tertiary: var(--colors-tertiary-lavendar-500-primary);
    --link-tertiary-hovered: var(--colors-tertiary-lavendar-400);
    --link-tertiary-pressed: var(--colors-tertiary-lavendar-300);
    --link-tertiary-focused: var(--colors-tertiary-lavendar-500-primary);
    --link-tertiary-visited: var(--colors-tertiary-lavendar-800);
    --link-neutral: var(--colors-neutral-700);
    --link-neutral-hovered: var(--colors-neutral-500);
    --link-icon-neutral-hovered: var(--colors-neutral-500);
    --link-neutral-pressed: var(--colors-neutral-400);
    --link-icon-neutral-pressed: var(--colors-neutral-400);
    --link-neutral-focused: var(--colors-neutral-700);
    --link-icon-neutral-focused: var(--colors-neutral-700);
    --link-neutral-visited: var(--colors-neutral-600);
    --link-icon-neutral-visited: var(--colors-neutral-600);
    --link-danger: var(--colors-red-600);
    --link-danger-hovered: var(--colors-red-700);
    --link-icon-danger-hovered: var(--colors-red-700);
    --link-danger-pressed: var(--colors-red-900);
    --link-icon-danger-pressed: var(--colors-red-900);
    --link-danger-focused: var(--colors-red-600);
    --link-icon-danger-focused: var(--colors-red-600);
    --link-danger-visited: var(--colors-red-800);
    --link-icon-danger-visited: var(--colors-red-800);
    --link-oncolor: var(--colors-base-white);
    --link-oncolor-hovered: var(--colors-alpha-alpha-white-80);
    --link-icon-oncolor-hovered: var(--alpha-white-80);
    --link-oncolor-pressed: var(--colors-alpha-alpha-white-60);
    --link-icon-oncolor-pressed: var(--alpha-white-60);
    --link-oncolor-focused: var(--colors-base-white);
    --link-link-oncolor-focused: var(--colors-base-white);
    --link-oncolor-visited: var(--colors-alpha-alpha-white-90);
    --link-icon-oncolor-visited: var(--alpha-white-90);
    --link-oncolor-disabled: var(--colors-alpha-alpha-white-30);
    --link-icon-oncolor-disabled: var(--alpha-white-30);
    --icon-oncolor: var(--colors-base-white);
    --tag-background-neutral: var(--colors-neutral-600);
    --tag-background-neutral-light: var(--colors-neutral-50);
    --tag-background-on-color: var(--colors-alpha-alpha-white-20);
    --tag-text-neutral: var(--colors-neutral-800);
    --tag-text-success: var(--colors-green-800);
    --tag-text-info: var(--colors-blue-800);
    --tag-text-warning: var(--colors-yellow-800);
    --tag-text-error: var(--colors-red-800);
    --tag-icon-neutral: var(--colors-neutral-800);
    --tag-icon-success: var(--colors-green-800);
    --tag-icon-info: var(--colors-blue-800);
    --tag-icon-warning: var(--colors-yellow-800);
    --tag-icon-error: var(--colors-red-800);
    --tag-background-success: var(--colors-green-700);
    --tag-background-success-light: var(--colors-green-50);
    --tag-background-info: var(--colors-blue-600);
    --tag-background-info-light: var(--colors-blue-50);
    --tag-background-warning: var(--colors-yellow-700);
    --tag-background-warning-light: var(--colors-yellow-50);
    --tag-background-error: var(--colors-red-600);
    --tag-background-error-light: var(--colors-red-50);
    --tag-border-neutral: var(--colors-neutral-600);
    --tag-border-neutral-light: var(--colors-neutral-50);
    --tag-border-on-color: var(--colors-alpha-alpha-white-60);
    --tag-border-success: var(--colors-green-700);
    --tag-border-success-light: var(--colors-green-200);
    --tag-border-info: var(--colors-blue-700);
    --tag-border-info-light: var(--colors-blue-200);
    --tag-border-warning: var(--colors-yellow-700);
    --tag-border-warning-light: var(--colors-yellow-200);
    --tag-border-error: var(--colors-red-700);
    --tag-border-error-light: var(--colors-red-200);
    --tag-dot: var(--colors-alpha-alpha-white-60);
    --form-text-form-title: var(--text-default);
    --controls-control-primary: var(--alpha-white-0);
    --table-cell-border: var(--colors-neutral-300);
    --table-cell-border-inverse: var(--border-black);
    --table-text-head: var(--colors-neutral-700);
    --table-text-body: var(--text-default);
    --table-background-disabled: var(--background-disabled);
    --table-background-hover-selected: var(--colors-neutral-50);
    --table-background-header: var(--colors-neutral-100);
    --table-background-row: var(--colors-neutral-50);
    --controls-control-primary-checked: var(--colors-primary-sa-flag-600-primary);
    --controls-control-primary-hovered: var(--colors-primary-sa-flag-800);
    --controls-control-primary-pressed: var(--colors-primary-sa-flag-800);
    --controls-control-primary-focused: var(--colors-primary-sa-flag-600-primary);
    --controls-control-neutral-checked: var(--colors-neutral-950);
    --controls-control-neutral-hovered: var(--colors-neutral-600);
    --controls-control-neutral-pressed: var(--colors-neutral-600);
    --controls-control-neutral-focused: var(--colors-neutral-950);
    --controls-control-primary--readonly: var(--alpha-white-0);
    --controls-control-pressed: var(--colors-neutral-300);
    --controls-control-ripple-effect: var(--colors-neutral-200);
    --controls-control-border: var(--colors-neutral-500);
    --form-text-form-paragraph: var(--text-secondary-paragraph);
    --form-field-text-label: var(--text-default);
    --form-field-text-placeholder: var(--text-secondary-paragraph);
    --form-field-text-hovered: var(--text-default);
    --stepper-button-completed: var(--colors-primary-sa-flag-600-primary);
    --tooltip-background-light: var(--colors-base-white);
    --tooltip-text-heading-light: var(--text-display);
    --tooltip-text-paragraph-light: var(--text-primary-paragraph);
    --tooltip-background-dark: var(--colors-neutral-800);
    --tooltip-text-heading-dark: var(--colors-neutral-50);
    --tooltip-text-paragraph-dark: var(--colors-neutral-100);
    --alpha-white-0: var(--colors-alpha-alpha-white-0);
    --alpha-white-10: var(--colors-alpha-alpha-white-10);
    --alpha-white-20: var(--colors-alpha-alpha-white-20);
    --alpha-white-30: var(--colors-alpha-alpha-white-30);
    --alpha-white-40: var(--colors-alpha-alpha-white-40);
    --alpha-white-50: var(--colors-alpha-alpha-white-50);
    --alpha-white-60: var(--colors-alpha-alpha-white-60);
    --alpha-white-70: var(--colors-alpha-alpha-white-70);
    --alpha-white-80: var(--colors-alpha-alpha-white-80);
    --alpha-white-90: var(--colors-alpha-alpha-white-90);
    --alpha-white-100: var(--colors-alpha-alpha-white-100);
    --alpha-black-0: var(--colors-alpha-alpha-black-0);
    --alpha-black-10: var(--colors-alpha-alpha-black-10);
    --alpha-black-20: var(--colors-alpha-alpha-black-20);
    --alpha-black-30: var(--colors-alpha-alpha-black-30);
    --alpha-black-40: var(--colors-alpha-alpha-black-40);
    --alpha-black-50: var(--colors-alpha-alpha-black-50);
    --alpha-black-60: var(--colors-alpha-alpha-black-60);
    --alpha-black-70: var(--colors-alpha-alpha-black-70);
    --alpha-black-80: var(--colors-alpha-alpha-black-80);
    --alpha-black-90: var(--colors-alpha-alpha-black-90);
    --alpha-black-100: var(--colors-alpha-alpha-black-100);
    --background-disabled: var(--colors-neutral-200);
    --background-disabled-primary: var(--colors-primary-sa-flag-200);
    --background-inverse-disabled: var(--colors-neutral-100);
    --stepper-button-completed-hovered: var(--colors-primary-sa-flag-700);
    --stepper-button-current: var(--colors-primary-sa-flag-600-primary);
    --stepper-button-current-hovered: var(--colors-primary-sa-flag-700);
    --stepper-button-upcomming: var(--colors-neutral-300);
    --stepper-button-upcomming-hovered: var(--colors-neutral-400);
    --stepper-button-background: var(--colors-base-white);
    --stepper-text-primary: var(--text-display);
    --stepper-text-secondary: var(--text-primary-paragraph);
    --stepper-text-tertiary: var(--text-secondary-paragraph);
    --stepper-line-completed: var(--colors-primary-sa-flag-600-primary);
    --stepper-line-completed-hovered: var(--colors-primary-sa-flag-700);
    --stepper-line-current: var(--colors-neutral-300);
    --stepper-line-upcomming: var(--colors-neutral-300);
    --stepper-line-upcomming-hovered: var(--colors-neutral-400);
    --form-field-text-focused: var(--text-primary-paragraph);
    --form-field-text-pressed: var(--text-primary-paragraph);
    --form-field-text-filled: var(--text-default);
    --form-field-text-readonly: var(--text-default);
    --form-field-text-helper: var(--text-secondary-paragraph);
    --form-field-background-default: var(--background-card);
    --form-field-background-lighter: var(--colors-neutral-25);
    --form-field-background-darker: var(--colors-neutral-100);
    --form-field-background-pressed: var(--colors-neutral-100);
    --form-field-border-default: var(--colors-neutral-400);
    --form-field-border-hovered: var(--colors-neutral-700);
    --form-field-border-pressed: var(--colors-neutral-950);
    --form-field-border-error: var(--border-error);
    --form-option-background-hover: var(--colors-neutral-100);
    --form-option-background-pressed: var(--colors-neutral-200);
    --form-datecell-background-default: var(--colors-primary-sa-flag-600-primary);
    --form-datecell-background-hovered: var(--colors-primary-sa-flag-700);
    --icon-default: var(--colors-base-black);
    --form-datecell-background-pressed: var(--colors-primary-sa-flag-900);
    --form-datecell-background-focused: var(--colors-primary-sa-flag-600-primary);
    --form-datecell-today-background-default: var(--alpha-white-0);
    --form-datecell-today-background-hovered: var(--colors-neutral-200);
    --form-datecell-today-background-pressed: var(--colors-neutral-300);
    --icon-default-500: var(--colors-neutral-500);
    --form-datecell-today-background-focused: var(--alpha-white-0);
    --form-datecell-background-disabled: #ffffff;
    --form-datecell-background-600: var(--colors-primary-sa-flag-600-primary);
    --form-datecell-background-300: var(--colors-primary-sa-flag-300);
    --form-datecell-background-200: var(--colors-primary-sa-flag-200);
    --form-datecell-background-100: var(--colors-primary-sa-flag-100);
    --controls-control-icon-hovered: var(--icon-oncolor);
    --alpha-primary-10: #1b835419;
    --icon-default-400: var(--colors-neutral-400);
    --icon-primary: var(--colors-primary-sa-flag-600-primary);
    --alpha-primary-20: #1b835433;
    --icon-primary-light: var(--colors-primary-sa-flag-50);
    --alpha-warning-10: #dc680319;
    --icon-primary-400: var(--colors-primary-sa-flag-400);
    --alpha-warning-20: #dc680333;
    --alpha-error-10: #d92c2019;
    --alpha-error-20: #d92c2033;
    --alpha-info-10: #156fee19;
    --alpha-info-20: #156fee33;
    --alpha-success-10: #06945419;
    --alpha-success-20: #06945433;
    --icon-neutral: var(--colors-neutral-700);
    --icon-neutral-light: var(--colors-neutral-50);
    --icon-secondary: var(--colors-secondary-gold-600-primary);
    --icon-secondary-light: var(--colors-secondary-gold-50);
    --icon-tertiary: var(--colors-tertiary-lavendar-500-primary);
    --icon-tertiary-light: var(--colors-tertiary-lavendar-50);
    --icon-success: var(--colors-green-700);
    --icon-success-light: var(--colors-green-50);
    --icon-info: var(--colors-blue-700);
    --icon-info-light: var(--colors-blue-50);
    --icon-warning: var(--colors-yellow-700);
    --icon-warning-light: var(--colors-yellow-50);
    --icon-error: var(--colors-red-700);
    --icon-error-light: var(--colors-red-50);
    --icon-default-disabled: var(--colors-neutral-400);
    --icon-default-oncolor-disabled: var(--colors-alpha-alpha-white-40);
    --control-disabled: var(--colors-neutral-400);
    --featuredicons-icon-oncolor: var(--colors-base-white);
    --featuredicons-icon-success: var(--colors-green-700);
    --featuredicons-icon-default: var(--colors-base-black);
    --featuredicons-icon-error: var(--colors-red-700);
    --featuredicons-icon-secondary: var(--colors-secondary-gold-600-primary);
    --featuredicons-icon-default-500: var(--colors-neutral-500);
    --featuredicons-background-error-light: var(--colors-red-50);
    --featuredicons-background-info-light: var(--colors-blue-50);
    --featuredicons-background-warning-light: var(--colors-yellow-50);
    --featuredicons-background-success-light: var(--colors-green-50);
    --featuredicons-background-brand-light: var(--colors-primary-sa-flag-50);
    --featuredicons-background-default-light: var(--colors-neutral-50);
    --featuredicons-icon-default-400: var(--colors-neutral-400);
    --featuredicons-icon-primary: var(--colors-primary-sa-flag-600-primary);
    --featuredicons-icon-primary-light: var(--colors-primary-sa-flag-50);
    --featuredicons-icon-primary-400: var(--colors-primary-sa-flag-400);
    --featuredicons-icon-neutral: var(--colors-neutral-700);
    --featuredicons-icon-neutral-light: var(--colors-neutral-50);
    --featuredicons-icon-secondary-light: var(--colors-secondary-gold-50);
    --featuredicons-icon-tertiary: var(--colors-tertiary-lavendar-500-primary);
    --featuredicons-icon-tertiary-light: var(--colors-tertiary-lavendar-50);
    --featuredicons-icon-success-light: var(--colors-green-50);
    --featuredicons-icon-info: var(--colors-blue-700);
    --featuredicons-icon-info-light: var(--colors-blue-50);
    --featuredicons-icon-warning: var(--colors-yellow-700);
    --featuredicons-bg-icon-warning-light: var(--background-warning-50);
    --featuredicons-bg-icon-error-light: var(--background-error-50);
    --featuredicons-bg-icon-brand-light: var(--colors-primary-sa-flag-50);
    --featuredicons-bg-icon-info-light: var(--background-info-50);
    --featuredicons-bg-icon-success-light: var(--background-success-50);
    --controls-control-icon-pressed: var(--icon-oncolor);
    --controls-control-icon-disabled: var(--colors-base-white);
    --notification-background-error-light: var(--colors-red-50);
    --notification-background-info-light: var(--colors-blue-50);
    --notification-background-warning-light: var(--colors-yellow-50);
    --notification-background-success-light: var(--colors-green-50);
    --notification-background-brand-light: var(--colors-primary-sa-flag-50);
    --notification-background-default-light: var(--colors-neutral-50);
    --notification-background-default-50: var(--background-neutral-50);
    --notification-background-success-50: var(--background-success-50);
    --notification-background-warning-50: var(--background-warning-50);
    --notification-background-error-50: var(--background-error-50);
    --notification-background-brand-50: var(--colors-primary-sa-flag-50);
    --notification-background-info-50: var(--background-info-50);
    --notification-background-default-25: var(--background-neutral-25);
    --notification-background-success-25: var(--background-success-25);
    --notification-background-warning-25: var(--background-warning-25);
    --notification-background-error-25: var(--background-error-25);
    --notification-background-brand-25: var(--background-primary-25);
    --notification-background-info-25: var(--background-info-25);
    --notification-text-success: var(--text-success);
    --notification-text-error: var(--text-error);
    --notification-text-info: var(--text-info);
    --notification-text-warning: var(--text-warning);
    --notification-text-brand: var(--text-primary);
    --controls-control-text-error: var(--text-error) --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, .05);
    --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, .06), 0px 1px 3px 0px rgba(16, 24, 40, .1);
    --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, .06), 0px 4px 8px -2px rgba(16, 24, 40, .1);
    --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, .03), 0px 12px 16px -4px rgba(16, 24, 40, .08);
    --shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, .03), 0px 20px 24px -4px rgba(16, 24, 40, .08);
    --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, .18);
    --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, .14);
    --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: 384px;
    --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;
    --width-xxs: var(--spacing-80);
    --width-xs: var(--spacing-96);
    --width-sm: var(--spacing-120);
    --width-md: var(--spacing-140);
    --width-lg: var(--spacing-160);
    --width-xl: var(--spacing-192);
    --width-2xl: var(--spacing-256);
    --width-3xl: var(--spacing-320);
    --width-4xl: var(--spacing-360);
    --width-5xl: var(--spacing-400);
    --width-6xl: var(--spacing-480);
    --maxwidth-paragraph-max-width: var(--spacing-180);

    --ibmBold: var(--IBM-b);
    --ibmlight: "IBM Light";
    --ibmmedium: "IBM Medium";

}

@media only screen and (min-width: 1025px) {
    :root {
        --tooltip-padding: var(--spacing-2);
        --tooltip-gap: var(--spacing-2);
        --tab-button-gap: var(--spacing-1);
        --notification-gap: var(--spacing-4);
        --notification-padding: var(--spacing-4);
        --notification-h-padding: var(--spacing-6);
        --notification-alert-v-padding: var(--spacing-2);
        --notification-alert-h-padding: var(--spacing-6);
        --notification-toast-v-padding: var(--spacing-4);
        --notification-toast-desktop-h-padding: var(--spacing-6);
        --notification-toast-mobile-h-padding: var(--spacing-4);
        --tab-horizontal-tab-md-button-v-padding: var(--spacing-3);
        --tab-horizontal-tab-md-button-h-padding: var(--spacing-4);
        --tab-horizontal-tab-sm-button-v-padding: var(--spacing-2);
        --tab-horizontal-tab-sm-button-h-padding: var(--spacing-3);
        --tab-vertical-tab-md-button-v-padding: var(--spacing-1-5);
        --tab-vertical-tab-md-button-h-padding: var(--spacing-3);
        --tab-vertical-tab-sm-button-v-padding: var(--spacing-0-5);
        --tab-vertical-tab-sm-button-h-padding: var(--spacing-1-5);
        --table-cell-gap: var(--spacing-2);
        --table-cell-v-padding: var(--spacing-2);
        --table-cell-h-padding: var(--spacing-4);
        --control-vertical-gap: var(--spacing-1);
        --control-title-error-gap: var(--spacing-4);
        --control-switch-error-icon-gap: var(--spacing-2);
        --control-radio-error-icon-gap: var(--spacing-4);
        --control-switch-description-padding: var(--spacing-16);
        --control-radio-description-padding: var(--spacing-12);
        --form-label-gap: var(--spacing-1);
        --form-field-label-gap: var(--spacing-2);
        --form-input-padding: var(--spacing-0);
        --form-input-gap: var(--spacing-0);
        --form-textarea-padding: var(--spacing-0);
        --form-textarea-gap: var(--spacing-0);
        --form-select-padding: var(--spacing-0);
        --form-select-gap: var(--spacing-0);
        --accordion-lg-header-padding: var(--spacing-4);
        --accordion-lg-header-gap: var(--spacing-4);
        --accordion-md-header-padding: var(--spacing-3);
        --accordion-md-header-gap: var(--spacing-12);
        --accordion-sm-header-padding: var(--spacing-2);
        --accordion-sm-header-gap: var(--spacing-2);
        --card-lg-padding: var(--spacing-8);
        --section-padding: var(--spacing-8);
        --section-gap: var(--spacing-8);
        --text-content-gap: var(--spacing-2);
        --icon-text-gap: var(--spacing-2);
        --buttons-lg-gap: var(--spacing-1);
        --model-padding: var(--spacing-6);
        --buttons-lg-padding: var(--spacing-4);
        --model-gap: var(--spacing-2);
        --buttons-md-gap: var(--spacing-1);
        --buttons-md-padding: var(--spacing-3);
        --buttons-sm-gap: var(--spacing-1);
        --buttons-sm-padding: var(--spacing-2);
        --model-content-bottom-padding: var(--spacing-4);
        --buttons-group-gap: var(--spacing-2);
        --button-menu-gap: var(--spacing-2);
        --button-menu-v-padding: var(--spacing-2);
        --button-menu-h-padding: var(--spacing-2);
        --link-md-gap: var(--spacing-2);
        --link-sm-gap: var(--spacing-1);
        --link-links-group-gap: var(--spacing-3);
        --progressindicator-progress-indicator-gap: var(--spacing-2);
        --progressindicator-progress-text-content-side-padding: var(--spacing-4);
        --pagination-item-sm-padding: var(--spacing-1);
        --pagination-item-md-padding: var(--spacing-1-5);
        --pagination-item-lg-padding: var(--spacing-2);
        --pagination-items-padding: var(--spacing-2);
        --spacing-none: var(--spacing-0);
        --spacing-xxs: var(--spacing-0-5);
        --spacing-xs: var(--spacing-1);
        --spacing-sm: var(--spacing-1-5);
        --spacing-md: var(--spacing-2);
        --spacing-lg: var(--spacing-3);
        --spacing-xl: var(--spacing-4);
        --spacing-2xl: var(--spacing-5);
        --spacing-3xl: var(--spacing-6);
        --spacing-4xl: var(--spacing-8);
        --spacing-5xl: var(--spacing-10);
        --spacing-6xl: var(--spacing-12);
        --spacing-7xl: var(--spacing-16);
        --spacing-8xl: var(--spacing-20);
        --spacing-9xl: var(--spacing-24);
        --spacing-10xl: var(--spacing-32);
        --spacing-11xl: var(--spacing-40);
        --card-lg-gap: var(--spacing-6);
        --card-md-padding: var(--spacing-8);
        --card-md-gap: var(--spacing-6);
        --card-sm-padding: var(--spacing-8);
        --card-sm-gap: var(--spacing-6);
    }
}

@media only screen and (min-width: 768px) {
    :root {
        --tooltip-padding: var(--spacing-2);
        --tooltip-gap: var(--spacing-2);
        --tab-button-gap: var(--spacing-1);
        --notification-gap: var(--spacing-4);
        --notification-padding: var(--spacing-4);
        --notification-h-padding: var(--spacing-6);
        --notification-alert-v-padding: var(--spacing-2);
        --notification-alert-h-padding: var(--spacing-6);
        --notification-toast-v-padding: var(--spacing-4);
        --notification-toast-desktop-h-padding: var(--spacing-6);
        --notification-toast-mobile-h-padding: var(--spacing-4);
        --tab-horizontal-tab-md-button-v-padding: var(--spacing-3);
        --tab-horizontal-tab-md-button-h-padding: var(--spacing-4);
        --tab-horizontal-tab-sm-button-v-padding: var(--spacing-2);
        --tab-horizontal-tab-sm-button-h-padding: var(--spacing-3);
        --tab-vertical-tab-md-button-v-padding: var(--spacing-1-5);
        --tab-vertical-tab-md-button-h-padding: var(--spacing-3);
        --tab-vertical-tab-sm-button-v-padding: var(--spacing-0-5);
        --tab-vertical-tab-sm-button-h-padding: var(--spacing-1-5);
        --table-cell-gap: var(--spacing-2);
        --table-cell-v-padding: var(--spacing-2);
        --table-cell-h-padding: var(--spacing-4);
        --control-vertical-gap: var(--spacing-1);
        --control-title-error-gap: var(--spacing-3);
        --control-switch-error-icon-gap: var(--spacing-2);
        --control-radio-error-icon-gap: var(--spacing-4);
        --control-switch-description-padding: var(--spacing-16);
        --control-radio-description-padding: var(--spacing-12);
        --form-label-gap: var(--spacing-1);
        --form-field-label-gap: var(--spacing-2);
        --form-input-padding: var(--spacing-0);
        --form-input-gap: var(--spacing-0);
        --form-textarea-padding: var(--spacing-0);
        --form-textarea-gap: var(--spacing-0);
        --form-select-padding: var(--spacing-0);
        --form-select-gap: var(--spacing-0);
        --accordion-lg-header-padding: var(--spacing-4);
        --accordion-lg-header-gap: var(--spacing-4);
        --accordion-md-header-padding: var(--spacing-3);
        --accordion-md-header-gap: var(--spacing-3);
        --accordion-sm-header-padding: var(--spacing-2);
        --accordion-sm-header-gap: var(--spacing-2);
        --card-lg-padding: var(--spacing-6);
        --section-padding: var(--spacing-6);
        --section-gap: var(--spacing-6);
        --text-content-gap: var(--spacing-2);
        --icon-text-gap: var(--spacing-2);
        --buttons-lg-gap: var(--spacing-1);
        --model-padding: var(--spacing-6);
        --buttons-lg-padding: var(--spacing-4);
        --model-gap: var(--spacing-2);
        --buttons-md-gap: var(--spacing-1);
        --buttons-md-padding: var(--spacing-3);
        --buttons-sm-gap: var(--spacing-1);
        --buttons-sm-padding: var(--spacing-2);
        --model-content-bottom-padding: var(--spacing-4);
        --buttons-group-gap: var(--spacing-2);
        --button-menu-gap: var(--spacing-2);
        --button-menu-v-padding: var(--spacing-2);
        --button-menu-h-padding: var(--spacing-2);
        --link-md-gap: var(--spacing-2);
        --link-sm-gap: var(--spacing-1);
        --link-links-group-gap: var(--spacing-3);
        --progressindicator-progress-indicator-gap: var(--spacing-2);
        --progressindicator-progress-text-content-side-padding: var(--spacing-4);
        --pagination-item-sm-padding: var(--spacing-1);
        --pagination-item-md-padding: var(--spacing-1-5);
        --pagination-item-lg-padding: var(--spacing-2);
        --pagination-items-padding: var(--spacing-2);
        --spacing-none: var(--spacing-0);
        --spacing-xxs: var(--spacing-0-5);
        --spacing-xs: var(--spacing-1);
        --spacing-sm: var(--spacing-1-5);
        --spacing-md: var(--spacing-2);
        --spacing-lg: var(--spacing-3);
        --spacing-xl: var(--spacing-4);
        --spacing-2xl: var(--spacing-5);
        --spacing-3xl: var(--spacing-6);
        --spacing-4xl: var(--spacing-8);
        --spacing-5xl: var(--spacing-10);
        --spacing-6xl: var(--spacing-12);
        --spacing-7xl: var(--spacing-16);
        --spacing-8xl: var(--spacing-20);
        --spacing-9xl: var(--spacing-24);
        --spacing-10xl: var(--spacing-32);
        --spacing-11xl: var(--spacing-40);
        --card-lg-gap: var(--spacing-6);
        --card-md-padding: var(--spacing-6);
        --card-md-gap: var(--spacing-5);
        --card-sm-padding: var(--spacing-6);
        --card-sm-gap: var(--spacing-5);
    }
}

@media only screen and (max-width: 767px) {
    :root {
        --tooltip-padding: var(--spacing-2);
        --tooltip-gap: var(--spacing-2);
        --tab-button-gap: var(--spacing-1);
        --notification-gap: var(--spacing-2);
        --notification-padding: var(--spacing-3);
        --notification-h-padding: var(--spacing-4);
        --notification-alert-v-padding: var(--spacing-2);
        --notification-alert-h-padding: var(--spacing-4);
        --notification-toast-v-padding: var(--spacing-3);
        --notification-toast-desktop-h-padding: var(--spacing-4);
        --notification-toast-mobile-h-padding: var(--spacing-4);
        --tab-horizontal-tab-md-button-v-padding: var(--spacing-2);
        --tab-horizontal-tab-md-button-h-padding: var(--spacing-3);
        --tab-horizontal-tab-sm-button-v-padding: var(--spacing-1);
        --tab-horizontal-tab-sm-button-h-padding: var(--spacing-2);
        --tab-vertical-tab-md-button-v-padding: var(--spacing-1);
        --tab-vertical-tab-md-button-h-padding: var(--spacing-2);
        --tab-vertical-tab-sm-button-v-padding: var(--spacing-0-5);
        --tab-vertical-tab-sm-button-h-padding: var(--spacing-1);
        --table-cell-gap: var(--spacing-1);
        --table-cell-v-padding: var(--spacing-1);
        --table-cell-h-padding: var(--spacing-3);
        --control-vertical-gap: var(--spacing-1);
        --control-title-error-gap: var(--spacing-2);
        --control-switch-error-icon-gap: var(--spacing-1);
        --control-radio-error-icon-gap: var(--spacing-12);
        --control-switch-description-padding: var(--spacing-16);
        --control-radio-description-padding: var(--spacing-12);
        --form-label-gap: var(--spacing-1);
        --form-field-label-gap: var(--spacing-2);
        --form-input-padding: var(--spacing-0);
        --form-input-gap: var(--spacing-0);
        --form-textarea-padding: var(--spacing-0);
        --form-textarea-gap: var(--spacing-0);
        --form-select-padding: var(--spacing-0);
        --form-select-gap: var(--spacing-0);
        --accordion-lg-header-padding: var(--spacing-4);
        --accordion-lg-header-gap: var(--spacing-4);
        --accordion-md-header-padding: var(--spacing-3);
        --accordion-md-header-gap: var(--spacing-3);
        --accordion-sm-header-padding: var(--spacing-2);
        --accordion-sm-header-gap: var(--spacing-2);
        --card-lg-padding: var(--spacing-4);
        --section-padding: var(--spacing-4);
        --section-gap: var(--spacing-4);
        --text-content-gap: var(--spacing-1);
        --icon-text-gap: var(--spacing-1);
        --buttons-lg-gap: var(--spacing-1);
        --model-padding: var(--spacing-4);
        --buttons-lg-padding: var(--spacing-4);
        --model-gap: var(--spacing-1);
        --buttons-md-gap: var(--spacing-1);
        --buttons-md-padding: var(--spacing-3);
        --buttons-sm-gap: var(--spacing-1);
        --buttons-sm-padding: var(--spacing-2);
        --model-content-bottom-padding: var(--spacing-2);
        --buttons-group-gap: var(--spacing-1);
        --button-menu-gap: var(--spacing-2);
        --button-menu-v-padding: var(--spacing-2);
        --button-menu-h-padding: var(--spacing-2);
        --link-md-gap: var(--spacing-1);
        --link-sm-gap: var(--spacing-1);
        --link-links-group-gap: var(--spacing-2);
        --progressindicator-progress-indicator-gap: var(--spacing-4);
        --progressindicator-progress-text-content-side-padding: var(--spacing-3);
        --pagination-item-sm-padding: var(--spacing-1);
        --pagination-item-md-padding: var(--spacing-1-5);
        --pagination-item-lg-padding: var(--spacing-2);
        --pagination-items-padding: var(--spacing-1);
        --spacing-none: var(--spacing-0);
        --spacing-xxs: var(--spacing-0-5);
        --spacing-xs: var(--spacing-1);
        --spacing-sm: var(--spacing-1-5);
        --spacing-md: var(--spacing-2);
        --spacing-lg: var(--spacing-3);
        --spacing-xl: var(--spacing-4);
        --spacing-2xl: var(--spacing-5);
        --spacing-3xl: var(--spacing-6);
        --spacing-4xl: var(--spacing-8);
        --spacing-5xl: var(--spacing-10);
        --spacing-6xl: var(--spacing-12);
        --spacing-7xl: var(--spacing-16);
        --spacing-8xl: var(--spacing-20);
        --spacing-9xl: var(--spacing-24);
        --spacing-10xl: var(--spacing-32);
        --spacing-11xl: var(--spacing-40);
        --card-lg-gap: var(--spacing-4);
        --card-md-padding: var(--spacing-4);
        --card-md-gap: var(--spacing-3);
        --card-sm-padding: var(--spacing-4);
        --card-sm-gap: var(--spacing-3);
    }
}

:root {
    --IBM-b: 'IBM-bold';
    --IBM-regular: 'IBM-regular';
    --IBM-sb: 'IBM-sb';
    --blue-color: #22B0E9;
    --light-blue-color: #7cdaff7a;
    --blue-color-hover: #197ca3;
    --orange-color: #D37B60;
    --light-orange-color: #ffa589b3;
    --orange-color-hover: #a15d49;
    --purple-color: #77478E;
    --purple-color-hover: #553663;
    --red-color: #B62C3F;
    --red-color-hover: #9d2b3a;
    --light-red-color: #ff96a57a;
    --mint-green-color: #6AC6BB;
    --green-color: #0DA290;
    --bckground-green-color: #6effed54;
    --light-green-color: #5A935D;
    --green-color-hover-hover: #095e54;
    --green-color-hover: #0a786b;
    --navy-blue-color: #00162E;
    --txt-color: #7e7e7e;
    --light-grey-color: #efefef;
    --light-gray-background: #f8f8f8;
    --black-color: #545454;
    --grey-color: #6E96A2;
    --background: #FAFAFA;
    --dark-grey-color: #4D6C75;
    --transition: all .3s ease-in-out;
    --dark-background: #ECECEC;
    --tab-background-color: #efefef;
}

@font-face {
    font-family: IBM-bold;
    src: url("/themes/uoj_theme/fonts/IBMPlexSansArabic-Bold.ttf");
}

@font-face {
    font-family: IBM-sb;
    src: url("/themes/uoj_theme/fonts/IBMPlexSansArabic-SemiBold.ttf");
}

@font-face {
    font-family: IBM-regular;
    src: url("/themes/uoj_theme/fonts/IBMPlexSansArabic-Regular.ttf");
}
ul li{
    position:relative;
}
.ajax-progress.ajax-progress-fullscreen{
    display:none!important;
}
.swiper-button-next:after, .swiper-button-prev:after{
display:none;
}

.eservices-container header{
 
    z-index: 0;
}
.eservices-container header span{
    width: fit-content;
    margin-right:auto;
    position: relative;
    left:0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-md);
    padding: var(--spacing-0) var(--spacing-xl);
    height: 40px;
}
.eservices-container .form-text{
    flex: 1;
    border: 1px solid #9DA4AE;
    outline: 0;
    background: transparent;
    color: #384250;
    font-size: 16px;
    padding:var(--spacing-0) var(--spacing-5xl);
    height:40px;
    border-radius:var(--radius-sm);
    position: relative;
    width: 100%;
    transform: translateY(var(--spacing-xl));
}
.eservices-container .js-form-item-title{
position:relative;
}
.eservices-container .js-form-item-title::after{
    content: "";
    position: absolute;
    bottom: -17px;
    right: 0;
    background-color: #000;
    width: 27.6rem;
    scale: 1;
    height: 2px;
    transition: all .6s ease-in-out;
}
.eservices-container .js-form-item-title.active::after{
    scale: 1;
}
.eservices-container .js-form-item-title:has(.form-text){
    position:relative;
}
.eservices-container .js-form-item-title:has(.form-text)::before{
    content:"";
    position:absolute;
    top: calc(50% + var(--spacing-xl));
    transform: translateY(-50%);
    right: 0.7rem;
    background-image:url("/themes/uoj_theme/media/SearchTextbox.png");
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    height: 1rem;
    width: 1rem;
}
.eservices-container header span i{
    display:none;
}
.eservices-container .fieldset-wrapper>div:first-child {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-5xl);
}
.eservices-container .fieldset-wrapper>div:first-child .form-radios.form--inline{
    display:flex;
    overflow-x: auto;
}
.eservices-container .fieldset-wrapper>div:first-child .js-form-item {
    background-color: white;
    color: var(--text-default);
    font-size: var(--text-sm);
    position: relative;
}

.eservices-container .fieldset-wrapper>div:first-child .js-form-item::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 3px;
    border-radius: var(--radius-full);
    background-color: var(--border-neutral-secondary);
    z-index: 1;
}

.eservices-container .fieldset-wrapper>div:first-child .js-form-item:has([checked="checked"])::after {
    background-color: var(--border-primary);
}

.eservices-container .fieldset-wrapper>div:first-child .js-form-item:hover::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 3px;
    border-radius: var(--radius-full) !important;
    background-color: var(--border-black);
    z-index: 1;
}

.eservices-container .fieldset-wrapper>div:first-child .js-form-item .form-radio {
    display: none;
}

.eservices-container .fieldset-wrapper>div:first-child .js-form-item.js-form-type-radio label {
    padding: var(--spacing-xl);
    gap: var(--tab-button-gap);
    display: flex;
    flex-wrap: nowrap;
    width: fit-content;
}

/* APP TITLE SECTION SPACING START */
.university-services .uj-container .uj-title-section,
.opportunities-main .uj-title-section,
.uni-programs .uj-title-section{
    margin-bottom: var(--spacing-3xl);
}

/* APP TITLE SECTION SPACING END */
/* SUBPAGES - PAGE HEADER START */
.page-header-section {
    padding: 0;
    background-color: var(--background-primary-25);
}

.page-header-section img {
    width: calc(100% - 0rem);
    height: auto;
}

.page-header-section .uj-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}
.custom-section .intro-section img{
    width: 600px;
    height: auto;
}
.custom-section .intro-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:var(--spacing-xl);
}
.custom-section .intro-section .intro-text {
    font-size: var(--text-md);
    color: var(--text-display);
    flex: 1;
    text-align: start;
}
/* SUBPAGES - PAGE HEADER END */
.supreme-president .uj-card .uj-card-img img {
    object-position: top;
}
html body .tab-content ul li::before,
html body .card ul li::before,
.faqs.ES-material ul li::before{
    height: 0.5rem;
    width: 0.5rem;
    background-color: var(--border-primary);
    content: '';
    position: absolute;
    top: 0.5rem;
    transform: none;
    right: -8px;
}

.nav-tabs li::before {
    display: none;
}

p {
    font-family: var(--IBM-regular);
}

p.description,
div.description p {
    color: var(--text-default);
    font-size: var(--text-md);
    line-height: 24px;
    text-align: inherit;
}
/* DIGITAL STAMP */
.digital-stamp-card {
    padding: 8px 0px;
    background: #F3F4F6;
    z-index: 99;
    position: relative;
}

.digital-stamp-card .digital-stamp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1376px;
    max-width: var(--container-max-width-desktop);
    margin: auto;
}

.digital-stamp-card .digital-stamp-header h6 {
    margin: 0px;
    color: #161616;
    font-size: 14px;
}

.digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
    cursor: pointer;
}

.digital-stamp-card .digital-stamp-header .btn-digital-stamp-card span {
    color: #1B8354;
    font-size: 14px;
}

.digital-stamp-card .digital-stamp-header .btn-digital-stamp-card svg,
.digital-stamp-card .digital-stamp-header .btn-digital-stamp-card img {
    transition: 0.3s;
}

.digital-stamp-card .digital-stamp-header.open .btn-digital-stamp-card svg,
.digital-stamp-card .digital-stamp-header.open .btn-digital-stamp-card img {
    transform: rotate(180deg);
}

.btn-digital-stamp-card img {
    margin-right: 4px;
    margin-left: 4px;
}

.digital-stamp-card .digital-stamp-body {
    padding-top: 40px;
    padding-bottom: 32px;
    display: none;
    max-width: 1376px;
    margin: auto;
}

.digital-stamp-card .digital-stamp-body .digital-stamp-container {
    margin-bottom: 32px;
    display: flex;
    gap: 32px;
}

.digital-stamp-card .digital-stamp-body .digital-stamp-container .box {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.digital-stamp-card .digital-stamp-body .digital-stamp-container .box .img-border-rounded {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #067647;
    border-radius: 100%;
}

.digital-stamp-card .digital-stamp-body .digital-stamp-container .box h6 {
    margin-top: 0px;
    margin-bottom: 12px;
    color: #161616;
    font-size: 18px;
}

.digital-stamp-card .digital-stamp-body .digital-stamp-container .box .green-text {
    color: #1B8354;
}

.digital-stamp-card .digital-stamp-body .digital-stamp-container .box p {
    margin: 0px;
    color: #384250;
    font-size: 16px;
}

.digital-stamp-card .digital-stamp-body .stamp-link-box {
    padding: 8px 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    background: #FFF;
}

.digital-stamp-card .digital-stamp-body .stamp-link-box p {
    margin: 0px;
    color: #161616;
    font-size: 16px;
}

.digital-stamp-card .digital-stamp-body .stamp-link-box a {
    color: #1B8354;
    font-size: 16px;
    text-decoration: underline;
}

.stamp-ar {
    direction: rtl;
}

.stamp-en {
    direction: ltr;
}

/* DIGITAL STAMP */
.testimonials .deco-prev {
    right: 0;
}
.testimonials .deco-next {
    left: 0;
}

.uj-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: var(--container-padding-mobile);
}

.Ramdan-button {
    position: fixed;
    bottom: 10px;
    right: 75px;
    width: 70px;
    height: 70px;
    background-color: #1B8354;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 100;
    text-decoration: none;
}

.sidebar-active::after {
    content: "";
    background-color: rgba(0, 0, 0, 0.47);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 3;
    transition: all 0.3s ease 0s;
}
.profile .swiper {
    transform: translate3d(0px, 0, 0);
    padding: 0;
    text-align: center;
    /* border-bottom: 3px solid var(--border-background-neutral); */
    overflow: visible;
}
.tabbed-swiper .swiper-wrapper {
    flex-wrap: nowrap;
}
.tabbed-swiper .swiper-button-prev.swiper-button-disabled.swiper-button-lock,
.tabbed-swiper .swiper-button-next.swiper-button-disabled.swiper-button-lock {
    display: none !important;
}
.tabbed-swiper .deco1 {
    right: 0 !important;
    left: auto !important;
    top: 1rem;
}

div#cookieModal {
    height: 25rem;
    bottom: 1rem;
    width: 22rem;
    top: auto;
    left: 50%;
    right: auto;
    overflow: hidden;
    transform: translateX(-50%);
    z-index: 9;
}
.description li {
    position: relative;
    padding-right: 2rem;
    margin: var(--spacing-xs) 0;
}

.description li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0.6rem;
    background-color: var(--border-primary);
    height: .8rem;
    width: .8rem;
}

@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes fade-right {
    0% {
        opacity: 0;
        transform: translateX(200%);
    }

    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

@keyframes fade-left {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

#sidePanelLink.no-click {
    cursor: pointer;
}

.available-programs .swiper-pagination {
    z-index: 1;
}

.available-programs .swiper-pagination .swiper-pagination-bullet {
    border-color: white !important;
}

/* ALL RATINGS PAGE STYLES */
.allratings {
    padding-top: 11rem;
    padding-bottom: 5rem;
}

.allratings .ratingsSection {
    display: flex;
}

.allratings .headerSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.allratings .col-lg-4>.card,
.allratings .col-lg-8>.card {
    border: 1px solid #e0e0e0;
}

.allratings .col-lg-4>.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.allratings .col-lg-4>.card .topsection {
    padding: 2rem 2.5rem 0;
}

.allratings .col-lg-4>.card h4 {
    margin-bottom: 2rem;
}

.allratings .col-lg-8>.card .topsection {
    padding: 2rem 2.5rem;
}

.allratings .dropdownsSection {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 3rem;
}

.allratings .dropdownsSection .dropdown {
    margin-bottom: 1rem;
}

.allratings .dropdownsSection .dropdown button {
    margin-left: 1rem;
    padding: 1rem;
    background-color: white;
    min-width: 17rem;
    text-align: right;
    position: relative;
}

.allratings .dropdownsSection .dropdown .dropdown-menu {
    width: 100%;
    border-radius: 0;
    border: none;
    right: 0;
    text-align: right;
    max-height: 20rem;
    overflow: auto;
    min-width: 17rem;
}

.allratings .dropdown::after {
    content: "";
    width: 0.7rem;
    height: 0.9rem;
    background-image: url("/themes/uoj_theme/media/chevron-down-green.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    top: 63%;
    position: absolute;
    transform: translateY(-50%);
    border: none;
    display: block;
    left: 2rem;
    right: auto;
}

.allratings .dropdownsSection .dropdown .dropdown-menu .dropdown-item {
    padding: 1rem
}

.allratings .col-lg-8>.card .row .col-lg-6 {
    height: auto;
    flex: 1 1 0%;
    margin-bottom: 1rem;
}

.allratings .col-lg-8>.card .row .col-lg-6:nth-child(2n+1) {
    padding-right: 0;
}

.allratings .col-lg-8>.card .row .col-lg-6:nth-child(2n+2) {
    padding-left: 0;
}

.allratings .col-lg-8>.card .row .col-lg-6 .card {
    height: 100%;
}

.allratings .card .bottomsection {
    background-color: #f9f9f9;
    padding: 1rem 2.5rem;
}

.allratings .card .bottomsection p {
    margin-bottom: 0;
}

.allratings .col-lg-8 .card .col-lg-6 .card .card-body {
    background-color: #f9f9f9;
}

.allratings .col-lg-8 .card .col-lg-6 .card .reasons {
    padding: 1rem;
}

.allratings .col-lg-8 .card .col-lg-6 .card .reasons p {
    font-size: 1rem;
    color: var(--txt-color);
}

.allratings .col-lg-8 .card .col-lg-6 .card .reasons p span {
    color: var(--green-color);
    margin-left: .5rem;
    font-family: var(--IBM-b);
}

.allratings .headerSection .additionalinfo {
    text-decoration: underline;
}

.allratings .col-lg-8 .card .topsection .row {
    margin-top: 2rem;
    align-items: stretch;
}

.allratings .col-lg-6 .card .cardheader {
    background-color: #f5f5f5;
    padding: 2rem 1.5rem;
}

.allratings .col-lg-6 .card .cardheader h6 {
    font-size: .9rem;
}

.allratings .col-lg-6 .card .cardheader span {
    color: var(--green-color);
    margin-left: .5rem;
    font-weight: 600;
    font-size: 1.3rem;
}

.allratings .card .bottomsection span {
    font-family: var(--IBM-b);
    margin: 0 0.3rem;
}

.allratings h2 {
    font-weight: 600;
    color: var(--black-color);
}

.rating {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.rating span {
    color: var(--blue-color);
    min-width: 2.2rem;
}

/* ALL RATINGS PAGE STYLES */
.uoj-weather {
    display: flex !important;
}

body.overflow {
    overflow: hidden;
}

.header-pattern img {
    height: 100%;
    width: 100%;
}

.df-messenger-wrapper {
    z-index: 2 !important;
}

#messageList {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 1rem;
    direction: rtl;
}

[scope="df-messenger"] {
    padding: 50rem;
}

.sub .old-version {
    display: none !important;
}

html,
body {
    -webkit-user-select: text;
    user-select: text;
}

a:focus-visible {
    outline: none;
}

.df-chat-icon {
    height: 30px;
    top: 15px;
    width: 36px;
}

.input-box-wrapper input {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.tabpane-swiper .swiper-button-prev:after,
.tabpane-swiper .swiper-button-next:after,
.services-container .swiper-button-prev::after,
.services-container .swiper-button-next::after,
.quick-links.swiper .swiper-button-prev::after,
.quick-links.swiper .swiper-button-next::after {
    content: '' !important;
}

.uj-container:has(.opportunities-container) {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
}

.opportunities-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
}

.old-version {
    position: absolute;
    top: calc(78.7vh - 10.5vh);
    display: flex;
    font-size: 0.8rem;
    z-index: 2;
    color: #dedede;
    background-color: rgb(0 0 0 / 70%);
    padding: 1.3rem 1.1rem 1.3rem 2.3rem;
    border-top-left-radius: 20px;
    background-image: url("/themes/uoj_theme/media/mockup-pat.webp");
    background-size: cover;
    background-repeat: no-repeat;
    transition: all .3s ease-in-out;
    animation: .7s fade-up forwards;
    display: none;
}

.old-version:hover {
    color: white;
}

.sub .old-version {
    display: none;
}

.old-version .mockup-container {
    position: relative;
    width: 4.6rem;
    height: auto;
    margin-left: 1rem;
    transition: all .3s ease-in-out;
}

.old-version .mockup-container img {
    position: absolute;
    width: 100%;
    transform: translateY(-1rem);
}

.read-more .prompt {
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, .95), rgb(255, 255, 255)) !important;
    padding-top: 1rem !important;
    text-align: right !important;
    padding-bottom: 1rem;
}

.read-more .prompt .button {
    text-shadow: unset !important;
    color: var(--link-primary);
    font-family: var(--IBM-sb);
    padding: 0 !important;
    text-decoration: underline;
    line-height: 3;
    transition: .3s all ease;
}

.read-more .prompt .button:hover {
    color: var(--link-primary-hovered);
}

ul {
    list-style-type: none;
}

profile .tab-content ul li {
    position: relative;
    color: var(--text-default);
    font-size: var(--text-md);
    line-height: 24px;
}

.goals.access {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.agent-profile .tab-content ul {
    padding: 0;
    margin-bottom: 0;
}

.agent-profile .tab-content ul li {
    position: relative;
    padding: 0 var(--spacing-md) 0 0;
    font-size: var(--text-md);
}
.agent-profile .tab-content ul li:not(:last-child) {
    margin-bottom: var(--spacing-md); 
}
/* AMINATIONS START */
@keyframes spFadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes seacrh-close {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes search-open {
    0% {
        opacity: 1;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes acc-reveal {
    0% {
        transform: translateY(-1rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes poll-answers-reveal {
    0% {
        transform: translateX(3rem);
        opacity: 0;
    }

    100% {
        transform: translateX(0rem);
        opacity: 1;
    }
}

@keyframes bar1 {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    }
}

@keyframes mobile-menu {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0%);
    }
}

@keyframes mobile-menu-close {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(-100%);
    }
}

@keyframes tab-reveal {
    0% {
        transform: translateY(20rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes dropdownanimation {
    from {
        transform: translateY(40%);
        opacity: 0;
    }

    to {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes dropdownanimationscroll {
    from {
        transform: translateY(40%);
        opacity: 0;
    }

    to {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes dropdownanimationmobile {
    from {
        top: -1rem;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

@keyframes dropdownanimationlang {
    from {
        top: 0rem;
        opacity: 0;
    }

    to {
        top: 2.7rem;
        opacity: 1;
    }
}

@keyframes dropdownanimationsearch {
    from {
        top: -.5rem;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

/* Membership Details */
.appointments.membership-details .accordion ul li {
    max-height: unset;
    height: unset;
}

.appointments.membership-details .body-container {
    padding: 0;
}

.appointments.membership-details .type span {
    color: black;
    position: relative;
    line-height: 2;
    font-family: var(--IBM-sb);
}

.appointments.membership-details .type::after {
    content: "";
    top: 2.7rem;
    right: 0;
    position: absolute;
    height: 0.6rem;
    width: 0.6rem;
    background-color: var(--border-primary);
}

.appointments.membership-details #accordion .type ul {
    display: block;
}

.appointments.membership-details .type {
    font-size: 1rem;
    padding: 2rem 1.5rem;
    position: relative
}

.appointments.membership-details .type:not(:last-child) {
    border-bottom: 1px solid #D4D4D4;
}

.appointments.membership-details .type .points {
    margin: 1.2rem 0 0;
    color: grey;
    font-size: .9rem;
}

.appointments.membership-details .type ul li {
    height: auto;
    width: auto;
    border-bottom: none !important;
    overflow: unset;
    margin: unset;
    position: relative;
}

.appointments.membership-details .type ul li:not(:last-child) {
    margin-bottom: .8rem;
}

.appointments.membership-details .type ul li::before {
    content: '-\00a0\00a0';
}

/* Enrollment */
.enrollment-section .col-lg-6 .card .content .readmore {
    background-color: white;
    color: black;
    font-size: 1rem;
    padding: 0.5rem 2.5rem;
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
    position: relative;
    transition: unset;
    width: fit-content;
    margin: auto;
}

.enrollment-section .col-lg-6 .card .content .readmore:hover {
    background-color: var(--blue-color);
    color: white;
}

.enrollment-section .col-lg-6 .card .content {
    z-index: 2;
    color: white;
    text-align: center;
}

.enrollment-section .col-lg-6 .card .content .subtitle {
    font-size: 1rem;
    position: relative;
    width: fit-content;
    margin: auto;
}

.enrollment-section .col-lg-6 .card .content .subtitle::after {
    width: 50%;
    height: .1rem;
    background-color: rgba(255, 255, 255, 0.5);
    content: '';
    position: absolute;
    bottom: -.5rem;
    display: flex;
    left: 25%;
}

.enrollment-section .col-lg-6 .card .content .title {
    font-size: 1.8rem;
    font-family: var(--IBM-sb);
    margin: 1.5rem 0 2rem;
}

.enrollment-section .col-lg-6 .card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

.enrollment-section .col-lg-6 .card .card-image {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.enrollment-section .col-lg-6 .card {
    position: relative;
    height: 19rem;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 1rem;
}
.enrollment-section .enrollment-rules {
    margin-top: 3rem;
}
.enrollment-section {
    height: auto;
    padding: 0 0 6rem 0;
}
.ribbon {
    margin-top: -35px;
    height: 7px;
    border-radius: 1px;
}

.svg-chart-container {
    height: 100%;
}

.node-button-g .node-button-foreign-object,
.node-button-g.expanded .node-button-foreign-object {
    height: 3rem !important;
    width: 3rem !important;
    background-color: white;
    border-radius: 50%;
    x: -25 !important;
    y: -28 !important;
    border: 1px solid lightgray;
    position: relative;
    background-repeat: no-repeat;
    background-position: 1rem;
    background-size: 1rem;
    background-image: url(/themes/uoj_theme/media/expand.svg) !important;
}

.node-button-g.collapsed .node-button-foreign-object {
    height: 3rem !important;
    width: 3rem !important;
    background-color: white;
    border-radius: 50%;
    x: -25 !important;
    y: -28 !important;
    border: 1px solid lightgray;
    position: relative;
    background-repeat: no-repeat;
    background-position: 1rem;
    background-size: 1rem;
    background-image: url(/themes/uoj_theme/media/collapsed.svg) !important;
}

.node_member .member-name-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.node_member .member-name-container .member-name {
    font-size: .9rem;
    text-align: center;
}

.node-button-foreign-object .node-button-div>div {
    display: none;
}

.ribbon.first-row {
    background-color: var(--red) !important;
}

.ribbon.second-row {
    background-color: var(--green);
}

.ribbon.third-row {
    background-color: var(--yellow);
}

.ribbon.fourth-row {
    background-color: var(--blue);
}

.ribbon.fifth-row {
    background-color: var(--purple);
}

.ribbon.sixth-row {
    background-color: var(--dark-gray);
}

.department.first-row {
    color: var(--red);
}

.department.second-row {
    color: var(--green);
}

.department.third-row {
    color: var(--yellow);
}

.department.fourth-row {
    color: var(--blue);
}

.department.fifth-row {
    color: var(--purple);
}

.department.sixth-row {
    color: var(--dark-gray);
}

.position-name {
    font-size: 0.8rem !important;
    color: #757575 !important;
    margin-top: 5px;
}

.department {
    border-top: 1px solid #f1f1f1;
    text-align: center;
    font-size: 0.75rem;
    padding-top: 1rem !important;
}

.small-img {
    margin-top: -30px;
    border-radius: 100px;
    width: 65px;
    height: 65px;
}

.person-details {
    padding: 20px;
    padding-top: 35px;
    text-align: center;
}

.navbar .dropdown-menu {
    position: relative;
    top: 0;
    right: 0;
    box-shadow: none;
    text-align: right;
    margin-top: 0.6rem;
    background-color: white;
    left: 0;
    border-radius: 0 !important;
    opacity: 1;
    border: none;
    padding: 0;
    animation: dropdownanimationmobile .5s;
}

.navbar .dropdown-menu .dropdown-item:not(:last-child),
.navbar .dropdown-menu li:not(:last-child) a {
    border-bottom: 1px solid rgb(228, 228, 228);
}

/* ANIMATIONS END */
html {
    overflow-x: hidden;
}

html,
body {
    margin: 0px;
    padding: 0px !important;
}

body {
    background-color: #fafafa;
}

a:hover {
    color: var(--link-primary-hovered);
    text-decoration: none;
}

button {
    border: none;
    outline: none;
}

h1,
h2,
h3 {
    line-height: 1.5;
}

.library-tabs .description {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.container.description {
    width: 100%;
}

.container.description img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card.no-link {
    cursor: auto;
    pointer-events: none;
}

.select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}

.select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 16px;
    color: var(--black-color);
    width: 220px;
    height: 40px;
}

/* SUPERVISOR START */
.supervisor {
    display: flex;
    align-items: center;
}

.supervisor .profile {
    height: 3rem;
    width: 3rem;
    margin-left: 1rem;
    display: none;
}

.supervisor .profile img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.agent-profile .nav-tabs li.swiper-slide-active a::after {
    top: 2.47rem;
}

div#associatesLoader {
    right: 49%;
}

.uoj-notifcations path {
    fill: #1d8254;
}
#profileContainer .left-section {
    margin-top: 0;
}

#profileContainer .right-section {
    top: 0;
}

.profile .tabs-wrapper div:not(.tabbed-swiper) ul.nav.nav-tabs {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
    flex-wrap: nowrap;
}

.agent-profile.profile ul#scroller {
    padding-left: 2rem;
    padding-right: 2rem;
}

.agent-profile.profile .tab-pane {
    width: 100% !important;
}

.profile .tabbed-swiper {
    position: relative !important;
    margin: 0;
}

.profile .swiper .swiper-button-prev,
.profile .swiper .swiper-button-next {
    display: block !important;
}

.profile .tabs-wrapper {
    position: relative;
}

.profile .swiper-button-next,
.profile .swiper-button-prev,
.president-tabview span.left,
.president-tabview span.right {
    position: absolute;
    height: 30px;
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    left: -50px;
    top: 8px;
    cursor: pointer;
    color: #ffffff;
}

.profile .swiper-button-prev {
    right: 1.5rem;
    top: 1.4rem;
    background-repeat: no-repeat;
    background-size: 93%;
    background-image: url('/themes/uoj_theme/media/chev.svg');
    background-position: center;
    z-index: 2;
}

.profile .swiper-slide {
    width: fit-content;
    margin: 0!important;
}

.profile .swiper-button-prev,
.profile .swiper-button-next {
    display: block !important;
}

.president-tabview .swiper-button-next {
    right: 6.5rem;
    top: 7.1rem;
    background-repeat: no-repeat;
    background-size: 93%;
    background-image: url('/themes/uoj_theme/media/chev.svg');
    background-position: center;
    z-index: 2;
    display: none;
}

.profile .swiper-button-next {
    left: .5rem;
    top: 1.3rem;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-size: 93%;
    background-image: url(/themes/uoj_theme/media/chev.svg);
    background-position: center;
    z-index: 2;
    transform: scaleX(-1);
    display: block !important;
    height: 100%;
}

.profile .swiper-button-prev::after,
.profile .swiper-button-next::after {
    content: "" !important;
}

.agent-profile span.left {
    top: 1.5rem;
}

.agent-profile span.right {
    top: 1.5rem;
}

.profile .swiper .swiper-button-prev,
.profile .swiper .swiper-button-next {
    display: block;
    height: 100%;
}

.president-tabview span.left {
    left: 6.4rem;
    top: 7.1rem;
    background-repeat: no-repeat;
    background-size: 93%;
    background-image: url('/themes/uoj_theme/media/chev.svg');
    background-position: center;
    z-index: 2;
    transform: scaleX(-1);
    display: none;
}

.president-tabview.padding .nav-tabs {
    padding: 0;
}

.contact-us .map-container .leaflet-popup-tip {
    transform: rotate(0deg);
}

.contact-us .leaflet-popup-tip-container {
    top: 4.3rem !important;
    left: 49.6% !important;
    transform: rotate(53deg) !important;
    z-index: -1;
}

/* PERSONAL PROFILE END */
.description.container h4 {
    font-size: 1rem;
    line-height: 2.2;
    margin-bottom: 2rem;
}

.description.container ul {
    padding: 0;
}

.description.container h4 span,
.description.container p span {
    font-family: var(--IBM-sb);
}

.college.deanship.agencies-t.tabular-view .nav li:nth-child(2) a.nav-link::before {
    background-image: url(/themes/uoj_theme/media/project-members.svg);
}

.agencies-advisors {
    background-color: white;
}

.agency hr {
    margin: 0 4rem;
}

.agency .be-in-contact a {
    margin-right: .5rem;
}

.quick-links.dean {
    border-top: 1px solid #D9D9D9;
}



.Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card .card-body .card-text ul a {
    margin-right: .5rem;
    transition: .3s all ease;
    color: var(--link-primary);
}

.Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card .card-body .card-text ul a:hover {
    color: var(--link-primary-hovered);
}
.Deanship-agencies.contact-information .agencies-tiles .uj-container {
    margin-top: 0;
    display: flex;
    flex-direction: column;
}

.Deanship-agencies.contact-information .agencies-tiles .row {
    justify-content: space-between;
    width: 100%;
    margin: 0;
}
.tabular-view .tab-content .tab-pane{ 
    padding: var(--spacing-4xl); 
}
.Deanship-agencies.contact-information .agencies-tiles .col-lg-6 {
    padding: 0;
    max-width: 49%;
    margin-bottom: unset;
}

.Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card {
    border: 1px solid #D9D9D9 !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card .card-body {
    padding: 0;
}

.Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card .card-body .card-title {
    padding: var(--spacing-2xl) var(--spacing-3xl);
    background-color: #F9F9F9;
    width: 100%;
    font-size: var(--text-xl);
    font-family: var(--IBM-sb);
}

.Deanship-agencies.contact-information .agencies-tiles .col-lg-6 .card .card-body .card-text {
    padding: 0rem 1.5rem;
}

.college-standouts.deans .leader-msg .achievement {
    color: var(--green-color);
}
.news-advertisements.deanship {
    background-color: white;
}

.College-sections.departs.dean {
    background-color: #8ACFEA;
}

.college.deanship.tabular-view .college-annual-report .item a.item-cta {
    transition: .3s all ease;
}

.college.deanship.tabular-view .college-annual-report .item a.item-cta:hover {
    color: var(--link-primary-hovered);
}

.college.deanship.tabular-view .college-annual-report.files .item a.item-cta:hover {
    color: var(--blue-color-hover);
}
.survey-msg .survey-title {
    font-size: 1.4rem;
    font-family: var(--IBM-b);
    padding-bottom: 1.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid #E0E0E0;
}

.survey-msg .msg-container {
    line-height: 2;
}

.survey-msg .msg-container ul li {
    position: relative;
}

.survey-msg .msg-container ul li::before {
    content: "";
    top: .6rem;
    right: -1.8rem;
    position: absolute;
    height: .6rem;
    width: .6rem;
    background-color: var(--blue-color);
}

/* MAP START */
.map-filter {
    min-width: 7.4rem;
    text-align: right;
    position: relative;
    min-height: 3.5rem;
    opacity: 1;
    display: flex;
    flex-direction: column;
    border-radius: 0.8rem;
    background-color: white;
    border-left: 1px solid #e4e4e4;
}

.map-filter span:first-child {
    width: 100%;
    display: block;
    margin: auto;
    transition: all .3s ease-in-out;
}

.map-filter span:first-child::after {
    content: "";
    position: absolute;
    background-image: url('/themes/uoj_theme/media/Icon\ feather-arrow-down.svg');
    top: 0;
    left: 1rem;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    width: .75rem;
}

.map-filter .dropdown-menu {
    width: auto;
    min-width: 24rem;
    max-height: 19rem;
    overflow: hidden auto;
    border: none;
    right: unset;
    text-align: right;
    left: -1rem !important;
}

.popup-body a {
    float: right;
    padding: 0.5rem 1.5rem 2rem;
    position: relative;
}

.popup-body p.description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    text-align: right;
    overflow: hidden;
    font-size: .9rem;
    padding: 0 1.5rem 2rem 1rem;
    line-height: 2.3;
    margin-bottom: 0;
    color: #585858;
    margin-top: .7rem;
}

.Building-Detail-Container .building-info-container {
    margin: auto;
    background-color: white;
    border-radius: 1rem;
}

.Building-Detail-Container .building-info-container .popup-body {
    padding: 0 1rem;
    line-height: 2;
    margin-bottom: 1rem;
}

.Building-Detail-Container .building-info-container .popup-body.isempty {
    min-height: 8rem;
}

.Building-Detail-Container .building-info-container .popup-body .read-more {
    color: var(--blue-color);
    text-decoration: underline;
}

.right-section svg:hover path {
    fill: var(--blue-color-hover);
}

#map .leaflet-bar a:hover {
    background-color: #ebebeb;
}

.leaflet-popup-close-button:hover {
    color: var(--blue-color-hover) !important;
}

#map .leaflet-control-fullscreen-button:hover {
    background-color: #ebebeb !important;
}

.dropdown .map-filter:hover {
    background-color: #ebebeb;
}

#tree {
    cursor: grab;
    width: auto;
}

.side-panel .general-info ul {
    padding-right: 0;
}

.side-panel .general-info ul li:first-child {
    border-top: 1px solid #E1E1E1;
}

.side-panel .general-info ul li {
    border-bottom: 1px solid #E1E1E1;
    padding: 1.2rem 2rem;
    display: flex;
}

.side-panel .diploma-list .list:not(:first-child) {
    border-top: 1px solid #E1E1E1;
    border-bottom: 1px solid #e1e1e1;
}

.side-panel .diploma-list .list {
    margin-bottom: 2rem;
}
.news-details-link {
    width: 100%;
    justify-content: flex-end;
    display: flex;
}

.uni-inovations .news-details-link {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
.faqs.ES-material ul li:not(:first-child) {
    margin-top: .5rem;
}

.side-panel .general-info ul li .category {
    color: #828282;
    margin-left: 1rem;
}

.faqs.ES-material ul {
    padding-inline-start: 30px;
}

.faqs.ES-material ul li {
    position: relative;
}

.faqs.ES-material ul li::before {
    right: -1.2rem;
}

.content-viewer-alt-dark .research-production {
    background: var(--background-neutral-50);
    border-bottom: 1px solid var(--border-background-neutral);
}

.content-viewer-alt-dark .research-production .production-thumb img {
    width: 100%;
    margin-bottom: 2rem;
}

.content-viewer-alt .research-production {
    display: flex;
    background-color: var(--background-neutral-50);
}
.content-viewer-alt-dark.re-production .story img {
    object-fit: cover;
}
.content-viewer-alt-dark.re-production .story .our-story,
.content-viewer-alt-dark.re-production .story .image-container {
    margin-left: 0;
}
.content-viewer-alt-dark.re-production .story .image-container {
    max-height: unset;
}
.content-viewer-alt .research-production::before,
.content-viewer-alt-dark .research-production:before {
    content: unset;
}

.content-viewer-alt .research-production .production-thumb {
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.content-viewer-alt .research-production .desc {
    width: 100%;
}

.content-viewer-alt .research-production .production-thumb img {
    width: 100%;
    border-radius:var(--spacing-lg);
    object-fit:cover;
}

.care-tiles.policies .row-cards {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--spacing-xl);
}

.care-tiles.policies .row-cards .col-lg-4 {
    padding: 0;
    max-width: 100%;
}
.care-tiles.policies .nav {
    justify-content: center;
    display: flex;
    margin-bottom: 3rem;
}

.care-tiles.policies .nav .nav-item .nav-link {
    background-color: unset;
    padding: .7rem 2rem;
}

.care-tiles.policies span {
    margin: 2rem auto;
}

.care-tiles.policies .nav .nav-item .nav-link:hover {
    color: var(--blue-color-hover);
}

.care-tiles.policies .nav .nav-item .nav-link.active {
    color: var(--blue-color);
    border-bottom: 2px solid var(--blue-color);
}

.orgchart-container {
    width: 100%;
    height: 31rem;
    position: relative;
}

.orgchart-container::after {
    position: absolute;
    top: 0;
    width: 95vw;
    height: 3rem;
    content: '';
    background-image: linear-gradient(to bottom, #f8f8f8, transparent);
    pointer-events: none;
}

.orgchart-container::before {
    position: absolute;
    bottom: -1rem;
    width: 95vw;
    height: 3rem;
    content: '';
    background-image: linear-gradient(to top, #f8f8f8, transparent);
    z-index: 1;
    pointer-events: none;
}

#tree.boc-light {
    background-color: #f8f8f8;
}

#tree:active {
    cursor: grabbing;
}

#tree::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    background-image: linear-gradient(to right, #f8f8f8, transparent);
    width: 3rem;
    height: 100%;
    pointer-events: none;
}

#tree::before {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    background-image: linear-gradient(to left, #f8f8f8, transparent);
    width: 3rem;
    height: 100%;
    pointer-events: none;
}

.Responsible-details .contactcta .call svg circle,
.Responsible-details .contactcta .mail svg circle {
    fill: rgba(34, 176, 233, 0.1);
    transition: .3s all ease;
}

.Responsible-details .contactcta .call svg:hover circle,
.Responsible-details .contactcta .mail svg:hover circle {
    fill: var(--blue-color);
}

.Responsible-details .contactcta .call svg path,
.Responsible-details .contactcta .mail svg path {
    stroke: var(--blue-color);
}

.Responsible-details .contactcta .call svg:hover path,
.Responsible-details .contactcta .mail svg:hover path {
    stroke: white;
}

.leaflet-popup-close-button {
    right: auto !important;
    left: 1.5rem !important;
    color: var(--blue-color) !important;
    top: 1rem !important;
    font-size: 2.6rem !important;
}

.disabled .map-filter span {
    opacity: 0.6;
}

.dropdown.main .map-filter {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.select-department .dropdown .map-filter {
    border-left: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.select-location .dropdown .map-filter {
    border-radius: 0;
}

.dropdown.clicked .map-filter span:first-child {
    font-size: 0.8rem;
    color: var(--txt-color);
}

.map-filter span {
    font-weight: var(--default-font-sb);
}

.disabled .map-filter span:first-child::after {
    background-image: url(/themes/uoj_theme/media/Icon\ feather-arrow-down-disabled.svg);
}

.dropdown.clicked #clickedValue,
#clickedFaculty,
#clickedDepartment,
#clickedBuilding {
    font-size: .9rem !important;
    color: black !important;
    max-width: 13ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: .3s all ease;
}

.dropdown .dropdown-menu#departments {
    display: none;
}

.select-location.disabled,
.select-department.disabled {
    pointer-events: none;
}

.select-styled {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    padding: 8px 15px;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.Coordinates {
    color: var(--txt-color);
    margin-top: .3rem;
    display: flex;
}

.select-styled:after {
    content: "";
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-color: var(--black-color) transparent transparent transparent;
    position: absolute;
    top: 16px;
    left: 10px;
}

.select-styled:active:after,
.select-styled.active:after {
    top: 9px;
    border-color: transparent transparent #fff transparent;
}

.building-overview .left-section {
    text-align: left;
}

.building-overview .Coordinates {
    font-size: .7rem;
    color: var(--txt-color);
}

.leaflet-top {
    bottom: 0.5rem;
    left: 1rem !important;
    align-items: end;
    top: auto !important;
    display: flex;
    flex-direction: column-reverse;
}

.selected-marker {
    opacity: 1 !important;
}

.leaflet-marker-icon {
    transition: .3s all ease;
}

.leaflet-tile-pane {
    opacity: .8;
    transition: .3s all ease;
}

.leaflet-tile-pane.active {
    opacity: .6;
}

.map-container #map {
    background-color: black;
    height: 30vh;
}

#map {
    height: calc(100vh - 8rem);
    background-color: black;
}

#map .leaflet-control-zoom {
    border: none;
    outline: none;
    box-shadow: none;
}

#map .leaflet-control-fullscreen-button {
    border-radius: 0.8rem !important;
    color: var(--blue-color) !important;
    background-color: white !important;
    background-image: url(/themes/uoj_theme/media/fullscreen-svgrepo-com.svg);
    background-size: 50%;
    background-position: center;
    height: 2.4rem;
    width: 2.4rem;
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    margin-left: 0 !important;
}

#map .leaflet-bar a {
    color: var(--blue-color);
    margin: 0.5rem 0;
    display: flex;
    background-color: #ffffffe6;
    backdrop-filter: blur(10px);
    -webskit-backdrop-filter: blur(10px);
    align-items: center;
    transition: .3s all ease;
    border: 1px solid #e2e2e2;
    justify-content: center;
}

#map .leaflet-control-fullscreen-button {
    border-radius: 0.8rem !important;
    color: var(--blue-color) !important;
    background-color: #ffffffe6 !important;
    background-image: url(/themes/uoj_theme/media/fullscreen-svgrepo-com.svg);
    background-size: 45%;
    background-position: center;
    height: 2.8rem;
    width: 2.6rem;
    backdrop-filter: blur(10px);
    -webskit-backdrop-filter: blur(10px);
}

.leaflet-control-zoom .leaflet-control-zoom-in {
    margin-bottom: 0 !important;
    border-top-left-radius: .8rem !important;
    border-top-right-radius: .8rem !important;
}

.leaflet-control-zoom .leaflet-control-zoom-out {
    margin-top: 0 !important;
    border-bottom-left-radius: .8rem !important;
    border-bottom-right-radius: .8rem !important;
}

.select-department .dropdown .dropdown-menu.show#departments {
    display: initial;
    width: 100%;
    border: none;
    outline: none;
    height: auto;
}

.dropdown .map-filter {
    padding: 0.3rem .6rem;
}

.dropdown .map-filter:hover {
    background-color: #ebebeb;
}

.disabled .dropdown-menu.show {
    display: none;
}

/* MAP END */
/* GOOGLE ORG CHART START */
table.google-visualization-orgchart-table {
    border-collapse: inherit;
}

.google-visualization-orgchart-node {
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, .125) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-top: 5px solid var(--blue-color) !important;
    padding: 1.5rem 1.8rem !important;
    font-size: 1rem !important;
    font-family: var(--IBM-regular) !important;
}

.google-visualization-orgchart-noderow-medium {
    border-top: 5px solid var(--blue-color);
}

.google-visualization-orgchart-noderow-medium [title="navy-blue"] {
    border-top: 5px solid var(--navy-blue-color) !important;
}

.google-visualization-orgchart-noderow-medium [title="red"] {
    border-top: 5px solid var(--red-color) !important;
}

.google-visualization-orgchart-noderow-medium [title="green"] {
    border-top: 5px solid var(--green-color) !important;
}

.google-visualization-orgchart-noderow-medium [title="orange"] {
    border-top: 5px solid var(--orange-color) !important;
}

.google-visualization-orgchart-noderow-medium [title="dark-grey"] {
    border-top: 5px solid var(--dark-grey-color) !important;
}

.google-visualization-orgchart-noderow-medium [title="purple"] {
    border-top: 5px solid var(--purple-color) !important;
}

.google-visualization-orgchart-noderow-medium [title="mint-green"] {
    border-top: 5px solid var(--mint-green-color) !important;
}

.google-visualization-orgchart-nodesel {
    padding: 3rem 2.5rem !important;
}

.google-visualization-orgchart-connrow-medium {
    height: 24px !important;
}

.google-visualization-orgchart-lineleft {
    border-left: 1px solid rgba(0, 0, 0, .125) !important;
}

.google-visualization-orgchart-linebottom {
    border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
}

.google-visualization-orgchart-lineright {
    border-right: 1px solid rgba(0, 0, 0, .125) !important;
}

.president-tabview .nav-item .nav-link.active {
    background-color: white;
    border-top: 7px solid var(--blue-color);
}

.hamburger-submenu ul.ham-menu li,
.hamburger-submenu ul.ham-menu li a {
    border: none;
    padding: 0;
    font-size: 1rem;
    padding: .1rem 0.1rem;
    color: #495057;
    margin-bottom: 1rem;
    display: block;
}

.hamburger-submenu .ham-menu li.sub-title span {
    color: var(--navy-blue-color);
    font-size: 1.3rem;
}

.hamburger-submenu .ham-menu ul {
    padding: 1rem;
}

.hamburger-submenu ul.ham-menu,
.hamburger-submenu ul.ham-menu .subham-menu {
    display: none;
    padding: 1rem 1rem;
}

.hamburger-submenu .nav-item .head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-direction: row;
    font-size: 1.4rem;
    padding-right: 2rem;
}


.hamburger-submenu .nav-item .icon svg {
    height: 1.5rem;
    width: 1.5rem;
    transform: rotate(90deg);
}

.hamburger-submenu .nav-item .icon {
    transition: all .3s ease-in-out;
}

.hamburger-submenu .nav-item.blue .icon {
    display: inline-block;
}

.hamburger-submenu .nav-item.blue .nav-link {
    color: var(--blue-color);
    padding: 0;
}

.hamburger-submenu .nav-item .ham-menu .nav-link {
    color: #495057;
    margin-bottom: 1rem;
    font-size: 1rem;
    padding: .1rem .6rem;
}

.hamburger-submenu {
    transform: translateX(-100%);
    width: 26.2rem;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    background-color: rgb(242, 242, 242);
    transition: all .3s ease-in-out;
    padding-bottom: 6rem;
    overflow: auto;
}

.main-menu-container .menu-links {
    padding: 0 5rem;
    width: 100%;
}

.hamburger-submenu::before {
    position: absolute;
    top: 0rem;
    left: -1rem;
    width: 77%;
    opacity: 0.5;
    height: 100%;
    transform: scale(0.9);
    background-image: url("/themes/uoj_theme/media/pattern-main-menu.svg");
    pointer-events: none;
    content: "";
}

.hamburger-submenu.enabled {
    transform: translateX(0%);
}

.hamburger-submenu .header {
    padding: 2rem 0.5rem;
    display: flex;
    align-items: baseline;
    background-color: white;
}

.hamburger-submenu .go-back,
.hamburger-submenu .header .title {
    cursor: pointer;
}

.hamburger-submenu .go-back .icon {
    transform: scaleX(0);
}

.hamburger-submenu .header .icon {
    height: 2rem;
    width: 2rem;
}

.hamburger-submenu .header .title {
    color: var(--blue-color);
    font-size: 1.5rem;
}

.hamburger-submenu .close-btn {
    display: block !important;
    top: 1.7rem !important;
    left: 1.7rem;
}

.hamburger-submenu .sub-title:first-child {
    margin-top: 1.5rem;
}

.hamburger-submenu ul {
    list-style-type: none;
    padding: 0;
}

.hamburger-submenu ul li {
    display: block;
    font-size: 1.4rem;
    padding: 0.8rem 0rem;
    border-bottom: 1px solid rgb(208, 208, 207);
}

.hamburger-submenu ul li:last-child {
    border-bottom: none;
}

.hamburger-submenu ul li.blue .icon {
    transform: rotate(-180deg);
}

.main-menu .menu-content .menu-links ul li.link {
    font-size: 1.5rem;
    margin-bottom: 1.8rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.main-menu .menu-content .menu-links ul li .icon {
    height: 2rem;
    width: 2rem;
}

.main-menu .menu-content .menu-links ul .go-back .icon {
    transform: scaleX(1) !important;
}

.main-menu-container .main-menu .close-btn,
.hamburger-submenu .close-btn {
    position: absolute;
    top: 1rem;
    right: -4rem;
    z-index: 99;
    opacity: 1;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    display: none;
    height: 3rem;
    width: 3rem;
}

.main-menu-container .main-menu .close-btn svg,
.hamburger-submenu .close-btn svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* HAMBURGER SUBMENU END */
.story-img img {
    object-fit: cover !important;
}

.filter-table #table thead {
    display: none;
}

.filter-table .right-section {
    border: none;
}

.right-section .direction {
    cursor: pointer;
}

.right-section img {
    transform: scaleX(-1);
}

.gallery-container.container {
    min-height: 24rem;
}

.gallery-container .mason-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.gallery-container .mason-item.col-lg-4 {
    max-width: 93%;
    margin-bottom: 30px;
    padding: 0;
}

.select-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: white;
}

.select-options li {
    margin: 0;
    padding: 12px 0;
    text-indent: 15px;
    border-top: 1px solid #f5f5f5;
    -moz-transition: all 0.15s ease-in;
    -o-transition: all 0.15s ease-in;
    -webkit-transition: all 0.15s ease-in;
    transition: all 0.15s ease-in;
}

.select-options li:hover,
.select-options li.is-selected {
    background: #fff;
}

.select-options li[rel="hide"] {
    display: none;
}

.filter-labels {
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    margin: var(--spacing-4xl) 0 var(--spacing-5xl);
}

.filter-labels span {
    margin-left: .4rem;
    min-width: max-content;
}

.filter-labels label {
    cursor: pointer;
    background-color: #f3f4f6;
    padding: var(--spacing-xs) var(--spacing-lg);
    margin: 0;
    width: 100%;
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    height: 40px;
    color: var(--text-default);
    flex-shrink: inherit;
    text-align: center;
    align-content: center;
}

.filter-labels label.active {
    background-color: var(--button-background-primary-default);
    color: #fff;
}

.submenu-item .nav-link {
    cursor: pointer;
}

.third-layer li {
    padding: .5rem 2rem !important;
    cursor: pointer;
}

.third-layer {
    display: none;
}

.third-layer div.nav-link {
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.hamburger-submenu ul .submenu-item label:hover,
.third-layer div.nav-link:hover {
    color: var(--blue-color);
}

.hamburger-submenu ul .submenu-item label {
    padding: .5rem 1rem;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.hamburger-submenu ul.submenu-item .nav-item {
    cursor: pointer;
}

.leaflet-popup-content-wrapper {
    width: 20rem;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    overflow: hidden;
}

.leaflet-popup-tip-container {
    left: -.6rem !important;
    margin-top: -1px;
    bottom: 162px !important;
    overflow: hidden;
    transform: rotate(90deg) !important;
    pointer-events: none;
}

.hamburger-submenu ul.third-layer li:last-child {
    border-bottom: none;
}

.filters-container {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 2rem;
}

.filters-container .filter-btn {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.filters-container .search-box {
    width: 100%;
}

.bg-light-gray {
    background-color: var(--background-neutral-50);
}

.gray-bg {
    background-color: var(--background-neutral-50);
}

.news-content .news-thumbnail {
    position: relative;
    z-index: 0;
}

.news-content .news-thumbnail img {
    z-index: 1
}

.card {
    border: none;
    border-radius: 0;
    width: 100%;
}

.accordion-container.empty-accordion {
    cursor: unset;
    pointer-events: none;
}

.accordion-container.empty-accordion .accordion svg {
    Display: none;
}

#clickedValue,
#clickedFaculty,
#clickedBuilding {
    font-size: .7rem;
    padding-left: 2rem;
    color: #878787;
}

.menu-div {
    cursor: pointer;
    color: var(--black-color);
    transition: all .3s ease-in-out;
}

.menu-div:hover {
    color: var(--blue-color);
}

.filter-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0rem 1rem 1rem;
    width: 100%;
}

.filter-section .filter-btn {
    color: var(--txt-color);
    padding: .7rem 2rem;
    cursor: pointer;
    margin: 0 .3rem;
    transition: all .3s ease-in-out;
}

.filter-section .filter-btn.active {
    color: var(--blue-color);
    border-bottom: 2px solid var(--blue-color);
}

.filter-section .filter-btn.active:hover {
    border-bottom: 2px solid var(--blue-color);
}

.filter-section .filter-btn:hover {
    color: var(--blue-color-hover);
}

df-messenger {
    --df-messenger-button-titlebar-color: var(--green-color);
    --df-messenger-titlebar-padding: 1rem;
    --df-messenger-input-box-padding: 0 2rem;
}

.aca-filter .dropdown button.btn.btn-light.dropdown-toggle {
    border: none;
    padding: .8rem .75rem;
}

.aca-filter .filter-dp {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

.aca-filter .dp-container {
    display: none;
}

.aca-filter .dropdown-menu.radio i {
    text-align: right;
}

.aca-filter .filter-dp .dropdown {
    width: 100%;
    margin: .5rem 0;
    position: relative;
    background-color: white;
    height: 40px;
}

.aca-filter .filter-dp .dropdown button{
border: 1px solid #9DA4AE !important;
height: 40px;
}

.filter-policies.aca-filter .filter-dp .dropdown {
    width: 100%;
}
.programs-section {
    height: 60%;
    overflow: scroll;
}

.agent-profile .tabs-wrapper {
    background-color: white;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-neutral-primary);
}

.aca-filter .filter-dp .dropdown:last-child {
    margin-left: 0;
}

.filter-table table {
    width: 100%;
    margin-bottom: 2rem;
}

.filter-table table td {
    display: flex;
    flex-direction: column;
}

.filter-table .Table-container {
    width: 100%;
    overflow-x: auto;
}

.filter-table table thead th,
.filter-table table tbody tr:nth-child(even),
.filter-table table tbody tr.show:nth-child(even) {
    background-color: #efefef;
}

th,
td {
    padding: 12px;
}

select {
    margin: 1em 0;
}

.filter-table table th,
.filter-table table td {
    white-space: nowrap;
    width: auto;
}

.filter-table table tr.hide {
    display: none;
}

.result-section {
    background-color: #f5f5f5;
    padding: 2rem 0;
}

.result-section .result-body {
    padding: 2rem 0;
    position: relative;
}

.filter-table table tr.show {
    display: table-row;
}

.result-body .card .card-body {
    padding: 2rem 1rem 2.5rem;
    display: flex;
    flex-direction: column;
}

.result-body .card {
    margin-bottom: 2rem;
}

.result-body .card .card-body .card-title {
    font-size: 1.4rem;
    color: black;
    margin-bottom: 1rem;
    transition: .3s all ease;
}

.result-body .card .card-body .card-text {
    color: var(--txt-color);
    line-height: 2;
}


.result-body .card .card-footer {
    background-color: transparent;
    padding: 2rem;
}

.result-body .card .card-footer a {
    color: var(--blue-color);
    text-decoration: none;
    transition: all .3s ease-in-out;
}

.result-body .card .card-footer a:hover {
    color: var(--blue-color-hover);
}

.result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: grey;
}

.result-header .dropdown {
    border: 1px solid #e1dfdf;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.result-header .dropdown button {
    background-color: transparent;
    padding: 1rem 2.3rem;
    font-family: var(--IBM-regular);
}

.show-count label {
    color: var(--orange-color);
    margin: 0 .2rem;
}

.show-count .page-numb,
.show-count .res-count,
.show-count .page-count {
    font-weight: 500;
    margin: 0 .2rem;
}

.details-panel .spinner-border {
    position: absolute;
    right: 45%;
    top: 50%;
    border: .25em solid var(--blue-color);
    border-right-color: transparent;
}

#block-facultydepartments {
    min-height: 20rem;
    position: relative;
}

#block-facultydepartments .spinner-border {
    border: .25em solid var(--blue-color);
    border-right-color: transparent;
    right: 49%;
    top: 17rem;
    display: none;
    position: absolute;
}

.submission-success {
    display: none;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

lottie-player {
    height: 10rem !important;
}

.submission-success .main .animation {
    margin: auto;
}

.submission-success .success-message {
    font-size: 1.4rem;
    font-family: var(--IBM-b);
}

.labels-header {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.submission-success .success-submessage {
    color: var(--gray-color);
}

.tabs.panel-tabs .card .icon {
    width: auto;
    height: 3rem;
    display: flex;
}
.life-jeddah .card .icon {
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
}

.main-error-message {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1rem;
    background-color: rgb(255, 214, 214);
}

.main-error-message span {
    color: red;
    margin: 0 1rem;
}

.main-error-message svg {
    height: 1.5rem;
    width: 1.5rem;
    display: block;
}

.main-error-message svg path {
    fill: red;
}

form.user-login-form {
    margin: 2rem auto;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
}

form.user-login-form .form-item-name,
form.user-login-form .form-item-pass {
    margin-bottom: 2rem;
}

form.user-login-form .submit-button {
    background-color: var(--blue-color);
    outline: none;
    border: none;
    color: white;
    padding: 0.7rem 2rem;
}

body.stop-animation .fade-left,
body.stop-animation .fade-right,
body.stop-animation .fade-up,
body.stop-animation .fade-in,
body.stop-animation .zoom-in,
body.stop-animation .fade-down {
    opacity: 1;
}

a.about-vision {
    position: relative;
    background-color: var(--button-background-primary-default);
    color: white;
    font-size: var(--text-md);
    padding: var(--spacing-0) var(--buttons-lg-padding);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--IBM-sb);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

a.about-vision:hover {
    background-color: var(--button-background-primary-hovered);
}

.vision-guidelines {
    margin: 1.5rem 0 1rem 0;
}

.vision-guidelines-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.particles-container .contents {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    padding: 0px;
    border-radius: 0;
    border: 1px solid #fff;
}

.particles-container .contents .logo {
    width: 15rem;
    height: auto;
}

.particles-container .contents .logo img {
    width: 100%;
    height: 100%;
}

.par-img {
    height: 100%;
}

.particles-container .contents .txt {
    margin: 2.5rem 0;
}

.contents .txt span {
    font-size: 1.8rem;
    color: var(--navy-blue-color);
    text-align: center;
    z-index: 1;
    display: block;
    line-height: 1.4;
}

.news-content h1 {
    font-size: var(--display-xs);
    padding: 0!important;
    margin: var(--spacing-xl) 0;
    font-family: var(--IBM-b);
}
.wrapper .uoj-logo {
    width: 14rem !important;
    height: auto !important;
}

.masonry-grid_item.column {
    width: 100%;
    margin-bottom: 1rem;
}

#slide-10-layer-6,
#slide-10-layer-10 {
    direction: rtl;
    left: -1px;
    text-align: center !important;
    color: rgb(39, 93, 116) !important;
    font-size: 44px !important;
    line-height: 64px !important;
}

.sub .topnav .links a,
body.toolbar-horizontal .topnav .links a {
    color: var(--black-color);
}

.sub .topnav .links a:hover,
body.toolbar-horizontal .topnav .links a:hover {
    color: rgb(82, 82, 82);
}

.container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

body {
    font-family: var(--IBM-regular);
    text-align: right;
    font-size: var(--text-md);
}

h2.error-message {
    display: none;
    font-size: 1.1rem;
    color: red;
    margin: auto;
}

h1.mx-auto.text-center.mb-5 {
    margin-bottom: 5rem !important;
}

.input-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    width: 100%;
}

.input-error .input__field {
    border: 1px solid red !important;
}

.form-check-inline .form-check-input {
    margin-left: 0.3rem;
}

.dropdown-menu.radio {
    right: 0px;
    left: auto !important;
    width: 100%;
    border: none;
    box-shadow: rgba(177, 177, 177, 0.4) 0px 10px 20px;
    margin: 0;
    padding: var(--spacing-md);
    max-height: 14rem;
    height: auto;
    overflow: auto;
    top: .5rem!important;
    border: 1px solid var(--border-neutral-primary);
}

.associates-tiles .dropdown-menu.radio {
    right: 0rem;
    left: auto !important;
    width: 100%;
    border: none;
    box-shadow: rgba(177, 177, 177, 0.4) 0px 10px 20px;
    border-radius: 0;
}

.menu-mobile-icon #menu path {
    fill: var(--black-color);
}

.topnav .logo-container .long img,
.scroll .logo-container .long img {
    width: 4rem;
}

.rating .stars-container,
.left-section .card .rating {
    display: flex;
    align-items: end;
    direction: ltr;
    margin: 1rem 0 1.5rem;
    justify-content: center;
}

.rating .stars-container .star,
.left-section .card .rating .star {
    height: 1.4rem;
    width: 1.4rem;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 .1rem;
    background-size: 100%;
}

.details #detailsDesc {
    line-height: 2.2;
    font-size: 1rem;
    color: var(--txt-color);
}

.rating .stars-container .rating-value {
    color: var(--blue-color);
}

.rating .stars-container .star.empty,
.left-section .card .rating .star.empty {
    background-image: url("/themes/uoj_theme/media/Icon\ ionic-ios-star-empty.svg");
}

.rating .stars-container .star.full,
.left-section .card .rating .star.full {
    background-image: url("/themes/uoj_theme/media/Icon\ ionic-ios-star.svg");
}

.rating .stars-container .star.half,
.left-section .card .rating .star.half {
    background-image: url("/themes/uoj_theme/media/Icon\ ionic-ios-star-half.svg");
}

.details-panel img {
    border: none;
    border-radius: 0;
    max-height: 20rem;
    object-fit: scale-down;
}

.details-panel .list ul {
    list-style-type: none;
}

.details-panel .list ul li {
    color: var(--txt-color);
    line-height: 2.2;
    position: relative;
    padding: 0 1rem;
    text-align: justify;
}

.details-panel .list ul li::before {
    content: '';
    position: absolute;
    top: .8rem;
    right: -1rem;
    background-color: var(--blue-color);
    height: .8rem;
    width: .8rem;
}

.details-panel .accordion-container ul li::before {
    content: '';
    position: absolute;
    top: 1.3rem;
    right: -2rem;
    background-color: var(--blue-color);
    height: .8rem;
    width: .8rem;
}

.details-panel .accordion-container ul li::marker {
    display: none;
    font-size: 0;
}

.sec-layer {
    position: fixed;
    top: 21rem;
    left: 0;
    width: 100%;
    background-color: white;
    transform: translateX(-100%);
    height: 90%;
    transition: all .3s ease-in-out;
    overflow: auto;
}

.sec-layer.active {
    transform: translateX(0);
}

.sec-layer .header {
    display: flex;
    align-items: baseline;
}

.sec-layer .header {
    padding: 2rem 2rem 0rem;
}

.details-panel .accordion-group .collapse>span {
    padding: 1rem 1.2rem;
}

.sec-layer .header .go-back .icon {
    height: 2rem;
    width: 2rem;
}

.sec-layer .header .program-title {
    font-size: 1.7rem;
}

.ac-prog {
    padding: 0.3rem 1.2rem;
    color: var(--blue-color);
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.ac-prog:hover {
    color: var(--blue-color-hover);
}

.logo-container div svg,
.topnav .logo-container div img {
    width: 2.4rem;
}

.white-logo {
    display: none;
}

.colored-logo {
    display: block;
}

.vertical-line {
    border-left: 0.03rem solid rgba(54, 54, 54, 0.29);
}

.scroll .vertical-line {
    border: 0.03rem solid rgba(54, 54, 54, 0.29);
}

.scroll .accessibility svg path {
    fill: var(--black-color);
}

.scroll .menu path {
    stroke: var(--black-color);
    fill: var(--black-color);
}

.modal-header .close-btn {
    opacity: 1;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.modal-header .close-btn:hover {
    opacity: 0.6;
}

.modal-backdrop {
    display: none !important;
}

.modal.acc-modal {
    width: 100%;
    height: auto;
    font-family: var(--IBM-regular);
    left: 0rem;
    top: auto;
    bottom: 0;
    z-index: 102;
    background-color: white;
    transform: translateY(100%);
    transition: all .3s ease-in-out;
    z-index: 102;
    display: block !important;
}

.acc-modal.enabled {
    transform: translateY(-4rem);
}

.acc-modal .modal-header {
    border: none;
    padding: 1rem 1rem 1rem;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 0px !important;
}

.acc-modal .modal-header .title {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.acc-modal .modal-body {
    background-color: var(--background);
}

.acc-modal .modal-body .title {
    text-align: right;
    font-size: 1.1rem;
}

.acc-modal .modal-body .imm-reader .title {
    margin-left: 1rem;
}

.acc-modal .modal-body .txt-size,
.acc-modal .modal-body .imm-reader,
.acc-modal .modal-body .colors {
    display: flex;
    background-color: white;
    padding: 1rem;
    position: relative;
}

.acc-modal .modal-body .reader {
    display: flex;
    position: relative;
}

.decrease.disabled,
.increase.disabled {
    pointer-events: none;
    background-color: lightgray !important;
}

.acc-modal .modal-body .txt-size .increase,
.acc-modal .modal-body .txt-size .decrease,
.acc-modal .modal-body .imm-reader .reader .btn-reader {
    height: 2rem;
    width: 2rem;
    background-color: var(--blue-color);
    border-radius: 50%;
    padding: 0.3rem;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease 0s;
    cursor: pointer;
}

.acc-modal .modal-body .txt-size .increase:hover,
.acc-modal .modal-body .txt-size .decrease:hover,
.acc-modal .modal-body .imm-reader .reader .btn-reader:hover {
    background-color: var(--blue-color-hover);
}

.acc-modal .modal-body .txt-size .increase img,
.acc-modal .modal-body .txt-size .decrease img,
.acc-modal .modal-body .imm-reader .reader img {
    height: 80%;
    width: 80%;
}

.acc-modal .modal-body .txt-size .result {
    background-color: var(--background);
    padding: 0rem 3.5rem;
    border-radius: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.acc-modal .modal-body .txt-size .result input {
    border: none;
    background-color: transparent;
    text-align: center;
    width: 100%;
}

.acc-modal .modal-body .imm-reader .result {
    background-color: var(--background);
    padding: 0.1rem 4.2rem;
    margin-right: 1rem;
    border-radius: 3rem;
}

.acc-modal .modal-body .txt-size .increase {
    position: absolute;
    left: 0;
}

.acc-modal .modal-body .txt-size .decrease {
    position: absolute;
    right: 0;
}

.acc-modal .modal-body .imm-reader,
.acc-modal .modal-body .txt-size .acc-modal .modal-body .colors {
    margin: 0.2rem 0px;
}

.acc-modal .modal-body .colors {
    flex-direction: column;
}

.acc-modal .modal-body .colors .colors-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 1rem;
    align-items: flex-start;
    width: 20rem;
    gap: 0 1rem;
}

.font-editor {
    display: flex;
    width: 46%;
    margin-right: 1.5rem;
    position: relative;
}

.acc-modal .modal-body .colors .colors-list .color {
    display: flex;
    position: relative;
    text-align: right;
    align-items: center;
    justify-content: flex-start;
    width: 44%;
    margin-bottom: 1rem;
    padding: 0.5rem 1.8rem;
    cursor: pointer;
    transition: all .4s ease-in-out;
    border-radius: 3rem;
}

.protanopia {
    filter: url("#protanopia");
}

.deuteranopia {
    filter: url("#deuteranopia");
}

.achromatopia {
    filter: grayscale(100%);
}

.news-video video {
    width: 100%;
}

.details-panel.uni-pillars .side-panel {
    height: 100%;
    width: 100%;
}

.swiper-container.tabpane-swiper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 1rem;
}
.swiper-container.tabpane-swiper .swiper-wrapper{
    margin-bottom:var(--spacing-3xl);
}
.details-panel.uni-pillars .row {
    position: relative;
}

.details-panel.uni-pillars .row:not(:last-child):after {
    position: absolute;
    height: 100%;
    width: 100%;
    content: '';
    background-repeat: no-repeat;
    bottom: -80%;
    left: 29%;
    transform: scale(.6);
    background-image: url(/themes/uoj_theme/media/Pillar-arrow.svg);
}

.details-panel.uni-pillars .row:not(:first-child) {
    margin-top: 1.8rem;
}

.details-panel.uni-pillars .row {
    align-items: center;
    justify-content: center;
}

.details-panel.uni-pillars .pillar-c {
    width: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}


.details-panel.uni-pillars .row:nth-child(2) .col-md-4:first-child .card {
    float: left;
}

.details-panel.uni-pillars .row:nth-child(2) .col-md-4:last-child .card {
    float: right;
}

.details-panel.uni-pillars {
    background-color: #F7F7F7;
    width: 52rem !important;
}

.details-panel.uni-pillars .title {
    padding: 2rem;
    background-color: white;
}

.protanopia.color::before {
    background-color: var(--orange-color);
    height: 1.2rem;
    width: 1.2rem;
    border-radius: 50%;
    content: "";
    position: absolute;
    right: 0.5rem;
    opacity: 0.5;
}

.deuteranopia.color::before {
    background-color: var(--green-color);
    height: 1.2rem;
    width: 1.2rem;
    border-radius: 50%;
    content: "";
    position: absolute;
    right: 0.5rem;
    opacity: 0.5;
}

.tritanopia {
    filter: url("#tritanopia");
}

.filter-colors {
    display: none;
}

.tritanopia.color::before {
    background-color: var(--blue-color);
    height: 1.2rem;
    width: 1.2rem;
    border-radius: 50%;
    content: "";
    position: absolute;
    right: 0.5rem;
    opacity: 0.5;
}

.achromatopia.color::before {
    background-color: var(--txt-color);
    height: 1.2rem;
    width: 1.2rem;
    border-radius: 50%;
    content: "";
    position: absolute;
    right: 0.5rem;
    opacity: 0.5;
}

.reset.color::before {
    background-color: var(--navy-blue-color);
    height: 1.2rem;
    width: 1.2rem;
    border-radius: 50%;
    content: "";
    position: absolute;
    right: 0.5rem;
    opacity: 0.5;
}

.color label {
    margin-right: 0.5rem;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
    cursor: pointer;
}

.acc-modal .modal-body .imm-reader .reader .btn-reader {
    position: absolute;
    right: 1rem;
    top: -1px;
}

.acc-modal .color.active {
    background-color: #f8f8f8;
    border: .2rem solid var(--blue-color);
}

.acc-modal .color {
    border: .2rem solid transparent;
}

.national-priorities {
    margin-bottom: 5rem;
}

.national-priorities .tiles-container {
    display: flex;
    flex-wrap: wrap;
}

.national-priorities .tiles-container .col-lg-3 {
    padding: 0;
}

.national-priorities .tiles-container .col-lg-3 .card {
    overflow: hidden;
    margin-bottom: 1rem;
}


.national-priorities .tiles-container .card-img-top {
    height: 26rem;
    min-height: unset;
    transition: all .3s ease-in-out;
}

.national-priorities .tiles-container .card-img-top::before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5));
    content: '';
}

.national-priorities .tiles-container .card-img-top::after {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .2);
    content: '';
}

.national-priorities .tiles-container .card-img-overlay {
    display: flex;
    align-items: end;
}

.national-priorities .tiles-container .card {
    cursor: pointer;
}

.national-priorities .tiles-container .card-img-overlay .card-title {
    color: white;
    font-size: 1.3rem;
    margin-bottom: unset;
}

.research-priorities {
    display: none;
}

.updated-policies {
    background-color: var(--background-neutral-50);
}

.research-priorities .uj-container,
.updated-policies .uj-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xl);
}

.research-priorities img {
    height: 48rem;
}

.research-priorities .research-info {
    padding: 0 5rem 0 0;
}

.research-priorities .research-info .research-info-title {
    font-size: 2.5rem;
    font-family: var(--IBM-sb);
    color: #484848;
}

.research-priorities .research-info .research-info-description {
    font-size: 1.2rem;
    margin: 3rem 0;
    color: #828282;
    line-height: 2.3;
}

.research-priorities .accordion {
    margin: 0;
}

.research-priorities .accordion-container {
    border: 1px solid #E8E8E8;
    padding: 2rem 1.5rem;
}

.research-priorities .accordion {
    position: relative;
    display: flex;
    align-items: center;
}

.research-priorities .accordion-group {
    position: relative;
}

.research-priorities .accordion-group:not(:first-child) {
    margin-top: 1.5rem;
}

.research-priorities .accordion-group .pattern {
    position: absolute;
    top: .8rem;
    left: 1.5rem;
}

.research-priorities .accordion-container .accordion span {
    font-size: 1.2rem;
}

.research-priorities .accordion-container .accordion svg {
    transform: rotate(0deg);
    transition: .3s all ease;
}

.research-priorities .accordion-container .accordion.collapsed svg {
    transform: rotate(90deg);
}

.research-priorities .accordion-container .accordion-detail {
    margin: 1.5rem 3rem 0 1rem;
    color: #828282;
    line-height: 2.2;
    font-size: 1rem;
    width: 85%;
}

.updated-policies .news-advertisements {
    background-color: unset;
    padding-top: unset;
    padding-bottom: unset;
}

.side-panel .list {
    margin-top: 3rem;
    padding: 0 2rem;
}

.RP.side-panel .list h4 {
    margin-bottom: 2rem;
}

.updated-policies .news-advertisements .icon img {
    width: 4.5rem;
    height: 4rem;
}

.updated-policies .icon {
    display: none;
}

.side-panel-attr p {
    margin-bottom: 2rem;
}

.side-panel-attr h5 {
    margin-bottom: 2rem;
    color: black;
}

.side-panel-attr ul {
    padding: 0;
}

.side-panel-attr ul li:not(:last-child) {
    margin-bottom: .5rem;
}

.side-panel-attr ul li {
    position: relative;
    padding-right: 2rem;
}

.side-panel-attr ul li::after {
    position: absolute;
    top: .8rem;
    right: 0;
    width: .8rem;
    height: .8rem;
    background-color: var(--blue-color);
    content: '';
    display: none;
}

.Supported-research-programs.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+1) .card .pattern svg ellipse {
    fill: var(--border-primary);
}

.Supported-research-programs.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+2) .card .pattern svg ellipse {
    fill: var(--border-primary);
}

.news-advertisements.innovations .card .card-title {
    bottom: 2rem;
}

.news-advertisements.innovations .card .card-title .card-desc {
    font-size: 1rem;
    color: silver;
    margin-top: 1rem;
    opacity: 0;
    transition: .3s all ease;
}

.research-production {
    background-color: white;
    position: relative;
    padding: 3rem 1rem 2rem;
}

.research-production::before {
    content: '';
    top: 0;
    right: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/themes/uoj_theme/media/research-pat.png);
    background-size: cover;
}

.research-production .title,
.research-collaboration .title {
    font-size: 1.8rem;
    margin-bottom: 2rem;
}

.research-production .desc {
    color: var(--text-default);
    line-height: 24px;
    font-size: var(--text-md);
    width: 100%;
    text-align: justify;
}

.research-collaboration .desc {
    color: #828282;
    line-height: 2;
    font-size: 1.3rem;
}

.research-production img {
    height: 100%;
}

.research-production .production-thumb {
    display: flex;
    justify-content: flex-end;
}

.research-collaboration {
    padding-top: 10rem;
    padding-bottom: 8rem;
}

.research-collaboration img {
    width: 100%;
    height: 100%;
}

.research-production .col-md-6:first-child {
    padding-top: 0rem;
}

.research-collaboration .col-md-6:nth-child(2) {
    padding-right: 6rem;
}

.research-collaboration .row:nth-child(2) .col-md-6:nth-child(2) {
    padding-right: 4rem;
}

.research-collaboration .row:nth-child(2) .col-md-6:nth-child(1) {
    padding-top: 4rem;
    padding-left: 6rem;
}

.research-collaboration .row:nth-child(2) .col-md-6:nth-child(2) {
    transform: translateY(-4rem);
}

.main-menu-container .main-menu {
    width: 32rem;
    height: 100%;
    position: fixed;
    left: 0px;
    transform: translateX(-100%);
    top: 0px;
    background-color: rgb(242, 242, 242);
    z-index: 101;
    display: flex;
    transition: all 0.3s ease 0s;
}

.main-menu-container.enabled .main-menu {
    transform: translateX(0px);
}

.main-menu-container .dimmer {
    background-color: rgba(0, 0, 0, 0.47);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1;
    opacity: 0;
    transition: all 0.3s ease 0s;
    pointer-events: none;
}

.main-menu-container .dimmer.activated {
    opacity: 1;
    z-index: 99;
}

.main-menu-container.enabled .dimmer {
    pointer-events: all;
    opacity: 1;
    z-index: 101;
}

.main-menu-container .main-menu .right-options {
    width: 22%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border-left: 1px solid rgb(208, 208, 207);
    position: relative;
    overflow: hidden;
}

.main-menu-container .main-menu .logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-menu-container .main-menu .logo img {
    width: 4rem;
}

.main-menu-container .main-menu .devider {
    height: 40%;
    width: 1px;
    background-color: rgb(208, 208, 207);
}

.main-menu-container .main-menu .social-icons {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main-menu-container .main-menu .social-icons a {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    opacity: 1;
    transition: all 0.3s ease 0s;
}

.main-menu-container .main-menu .social-icons a svg {
    width: 4rem;
    height: auto;
}

.main-menu-container .main-menu .social-icons a:first-child:hover svg g:first-child {
    fill: rgb(255 0 0 / 20%);
}

.main-menu-container .main-menu .social-icons a:first-child:hover svg g:last-child path,
.main-menu-container .main-menu .social-icons a:first-child:hover svg g:first-child circle:last-child {
    stroke: var(--red-color);
}

.main-menu-container .main-menu .social-icons a:nth-child(2):hover svg g:first-child {
    fill: rgb(13 162 144 / 20%);
}

.main-menu-container .main-menu .social-icons a:nth-child(2):hover svg path {
    fill: var(--green-color);
}

.main-menu-container .main-menu .social-icons a:nth-child(2):hover svg g circle:last-child {
    stroke: var(--green-color);
}

.main-menu-container .main-menu .social-icons a:nth-child(3):hover svg g:first-child ellipse:last-child {
    fill: rgb(0 34 71 / 20%);
    stroke: var(--navy-blue-color);
}

.main-menu-container .main-menu .social-icons a:nth-child(3):hover svg g:last-child g>path {
    fill: var(--navy-blue-color);
    stroke: var(--navy-blue-color);
}

.main-menu-container .main-menu .social-icons a:last-child:hover svg g:first-child path:first-child {
    fill: rgb(34 176 233 / 20%);
}

.main-menu-container .main-menu .social-icons a:last-child:hover svg g:first-child path:last-child {
    fill: var(--blue-color);
}

.main-menu-container .main-menu .social-icons a:last-child:hover svg>path {
    stroke: var(--blue-color);
}

.panel-tabs.tabs {
    flex-direction: column;
}

.main-menu-container .main-menu .menu-content {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 87%;
    flex-direction: column;
    align-items: center;
    align-self: center;
    position: relative;
    overflow: hidden;
}

.main-menu-container .main-menu .menu-content::after {
    position: absolute;
    top: 0rem;
    left: -1rem;
    width: 77%;
    opacity: 0.5;
    height: 100%;
    transform: scale(0.9);
    background-image: url("/themes/uoj_theme/media/pattern-main-menu.svg");
    pointer-events: none;
    content: "";
}

.main-menu-container .main-menu .close-btn:hover {
    opacity: 0.7;
}

.main-menu-container .main-menu .close-btn img {
    width: 80%;
}

.main-menu .menu-content .main-logo {
    display: flex;
}

.main-menu .menu-content .main-logo img {
    width: 90%;
}

.main-menu .menu-content .menu-links ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.main-menu .menu-content .menu-links ul a {
    color: var(--black-color);
    transition: all 0.3s ease 0s;
}

.main-menu .menu-content .menu-links ul a:hover {
    color: var(--blue-color);
    text-decoration: none;
    transition: all 0.3s ease 0s;
}

.main-menu .menu-content .menu-links ul a.selected {
    color: var(--blue-color);
    position: relative;
}

.main-menu .menu-content .menu-links ul a.selected::after {
    position: absolute;
    content: "";
    top: 1.35rem;
    right: -3rem;
    width: 0.8rem;
    border-radius: 50%;
    height: 0.8rem;
    background-color: var(--blue-color);
}

.main-menu .menu-content .sign-in,
.hamburger-submenu .sign-in {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.5rem;
    margin-top: 1.8rem;
    border-top: 1px solid rgba(192, 192, 192, 0.46);
}

.main-menu .menu-content .sign-in a.btn,
.hamburger-submenu .sign-in a.btn {
    width: fit-content;
    background-color: var(--blue-color);
    padding: 1rem 4rem;
    font-family: var(--IBM-sb);
    color: white;
    transition: all 0.3s ease 0s;
    cursor: pointer;
}

.main-menu .menu-content .sign-in a.btn:hover,
.hamburger-submenu .sign-in a.btn:hover {
    background-color: var(--blue-color-hover);
}

.main-menu .social-icons a:last-child {
    margin-bottom: 0px;
}

.main-menu .social-icons img {
    width: 2.5rem;
}

.close {
    opacity: 1;
    transition: all 0.3s ease 0s;
}

.weather-side-menu .close {
    pointer-events: all;
}

.weather-side-menu {
    position: fixed;
    top: 0px;
    left: 0px;
    transform: translateX(-100%);
    z-index: 5;
    height: 100vh;
    width: 100vw;
    transition: all 0.3s ease 0s;
    display: none;
    background-color: rgb(242, 242, 242);
}

.weather-side-menu.toggled {
    transform: translateX(0px);
}

.weather-side-menu .menu-label {
    padding: 1.5rem 4rem;
    background-color: white;
    text-align: center;
    width: 100%;
    font-size: 2rem;
}

.weather-side-menu .feed {
    margin: 3rem 1rem;
}

.weather-side-menu .feed .location-detail:first-child {
    margin-top: 0px;
}

.weather-side-menu .feed .location-detail {
    padding: 1.5rem 1rem;
    background-color: white;
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.filter-table table {
    border-top: 1px solid #dbd9d9;
    border-bottom: 1px solid #dbd9d9;
}

.filter-table .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.filter-table .header .right-section {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    justify-content: space-between;
}

.filter-table .header .right-section h3 {
    font-size: 1.1rem;
    margin-bottom: 0;
}

.filter-table tr {
    display: flex;
    flex-direction: column;
}

.filter-table tr td::before {
    font-family: var(--IBM-regular);
}

.filter-table tr td {
    display: flex;
    flex-direction: column;
    font-family: var(--IBM-b);
}

.filter-table tr td::before {
    content: attr(data-title);
}

.details-panel .panel-tabs.subject-tabs {
    padding: 1.5rem 0 0;
}

.filter-table .header .right-section .label-count {
    background-color: #22b1e940;
    color: #0db6f9;
    padding: .5rem .6rem;
    border-radius: .5rem;
}

.filter-table .dropdown button {
    border: 1px solid #dbd9d9;
    padding: 0.7rem 1.5rem;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
}

.filter-table .dropdown .dropdown-menu {
    width: 100%;
}

.filter-table .header .caret svg {
    height: 1rem;
    width: 1rem;
    transform: rotate(90deg);
}

.weather-side-menu .feed .location-detail:nth-child(2n+1) {
    border-top: 0.4rem solid var(--blue-color);
}

.weather-side-menu .feed .location-detail:nth-child(2n+3) {
    border-top: 0.4rem solid var(--green-color);
}

.weather-side-menu .feed .location-detail:nth-child(2n+2) {
    border-top: 0.4rem solid var(--orange-color);
}

.weather-side-menu .feed .location-detail .status {
    align-items: center;
    display: flex;
}

.weather-side-menu .feed .location-detail .status .detail {
    margin-right: 1.5rem;
}

.weather-side-menu .feed .location-detail .status .detail .city {
    font-size: 1.1rem;
    font-family: var(--IBM-b);
}

.weather-side-menu .feed .location-detail .status .detail .city-condition {
    font-size: 1.1rem;
    color: rgb(130, 130, 130);
}

.weather-side-menu .feed .location-detail .condition {
    align-items: center;
    display: flex;
    flex-direction: row-reverse;
}

.weather-side-menu .feed .location-detail .condition .low {
    padding-left: 1rem;
    border-left: 1px solid rgb(221, 221, 221);
    font-size: 2rem;
    font-family: var(--IBM-sb);
    display: flex;
    align-items: center;
    font-size: 1.5rem;
}

.weather-side-menu .feed .location-detail .condition .high {
    margin-right: 1rem;
    font-size: 1.5rem;
    font-family: var(--IBM-sb);
    display: flex;
    align-items: center;
}

.weather-side-menu .feed .location-detail .condition .high sup {
    margin-left: 0.2rem;
}

.notifications-side-menu.toggled {
    pointer-events: all;
}

.notifications-side-menu .menu-container {
    background-color: rgb(244, 244, 244);
    width: 100vw;
    float: left;
    height: 100%;
    overflow-y: auto;
}

.notifications-side-menu .menu-label {
    padding: 1.5rem 4rem;
    background-color: white;
    text-align: center;
    width: 100%;
    font-size: 2rem;
}

.notifications-side-menu .notifications {
    display: flex;
    padding: 2rem 1rem;
    width: 100%;
    flex-direction: column;
    color: rgb(88, 88, 88);
}

.notifications-side-menu .notifications .item .date {
    font-size: 1.2rem;
    margin-top: 3rem;
}

.notifications-side-menu .notifications .item:first-child .date {
    margin-top: 0px;
}

.notifications-side-menu .notifications .item {
    width: 100%;
}

.notifications-side-menu .notifications .item .content {
    display: flex;
    flex-direction: row;
    margin-top: 1rem;
    background-color: white;
    width: 100%;
    padding: 1.2rem 2rem 1.2rem;
    justify-content: space-between;
    position: relative;
    align-items: center;
}

.notifications-side-menu .notifications .item .content::after {
    position: absolute;
    top: 0px;
    right: 0px;
    content: "";
    width: 0.7rem;
    height: 100%;
    background-color: var(--button-background-primary-default);
}

.notifications-side-menu .notifications .item .content .desc {
    font-size: var(--text-md);
    margin-left: 1rem;
    color: var(--text-default);
}

.notifications-side-menu .notifications .item .content .time {
    color: var(--text-default);
    text-wrap: nowrap;
}

.side-menu,
.details-panel {
    position: fixed;
    top: 0px;
    left: 0px;
    transform: translateX(-100%);
    z-index: 1001;
    height: 100vh;
    transition: all 0.3s ease 0s;
    display: none;
}

.side-menu.toggled,
.details-panel.toggled {
    transform: translateX(0px);
    flex-direction: column;
    display: flex !important;
}

.twitter-side-menu {
    background-color: rgb(244, 244, 244);
}

.twitter-side-menu.toggled {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.polls-side-menu {
    display: none;
}

.polls-side-menu .menu-container {
    background-color: rgb(244, 244, 244);
    width: 100vw;
    float: left;
    height: 100vh;
    overflow: auto;
}

.polls-side-menu .questions-section {
    margin: 3rem 2rem;
    background-color: white;
    padding: 2rem;
}

.polls-side-menu .questions-section .question {
    font-size: 1.1rem;
}

.polls-side-menu .questions-section .answers {
    margin: 2rem 0px;
}

.polls-side-menu .questions-section .submit-button {
    background-color: var(--blue-color);
    padding: 0.5rem 2rem;
    text-align: center;
    width: fit-content;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease 0s;
}

.polls-side-menu .questions-section .submit-button:hover {
    background-color: var(--blue-color-hover);
}

.polls-side-menu .menu-label {
    padding: 1.5rem 4rem;
    background-color: white;
    text-align: center;
    width: 100%;
    font-size: 2rem;
}

.polls-side-menu .questions-section .answers input:last-child {
    margin-bottom: 0px;
}

.polls-side-menu .questions-section .answers input {
    margin-bottom: 1.5rem;
}

.polls-side-menu .questions-section .answers label {
    padding-right: 0.5rem;
    color: rgb(112, 112, 112);
}

.polls-side-menu .answers-section {
    margin: 3rem 1.5rem;
    background-color: white;
    padding: 2rem 0px;
    flex-direction: column;
    transition: all 0.3s ease 0s;
    transform: translateX(0rem);
    justify-content: center;
    animation: 0.3s ease 0s 1 normal none running poll-answers-reveal;
}

.polls-side-menu .answers-section h5 {
    padding: 0 1rem;
    margin-bottom: 2rem;
}

.polls-side-menu .answers-section .result {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 0px;
    margin-bottom: 1rem;
}

.polls-side-menu .answers-section .result .percentage {
    width: 50%;
    margin-left: 1.5rem;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    position: relative;
}

.polls-side-menu .answers-section .result .percentage::after {
    top: -0.8rem;
    left: 0px;
    height: 3.3rem;
    width: 0.07rem;
    background-color: rgb(112, 112, 112);
    content: "";
    position: absolute;
}

.polls-side-menu .answers-section .result:nth-child(n) .percentage .bar {
    background-color: var(--blue-color);
    height: 20px;
}

.polls-side-menu .answers-section .result:nth-child(2n) .percentage .bar {
    background-color: var(--orange-color);
    height: 20px;
}

.polls-side-menu .answers-section .result:nth-child(3n) .percentage .bar {
    background-color: var(--green-color);
    height: 20px;
}

.polls-side-menu .answers-section .result .desc {
    width: 54%;
    margin-top: 1.5rem;
    text-align: center;
}

.polls-side-menu .answers-section .result .percentage .text {
    text-align: left;
    margin-left: 1rem;
    font-family: var(--IBM-b);
}

.twitter-side-menu .twitter-timeline-container {
    overflow: scroll;
    display: flex;
    width: 100%;
}

.twitter-side-menu .twitter-timeline-container .main-jeddah,
.twitter-side-menu .twitter-timeline-container .jeddah-news {
    display: none;
}

.twitter-side-menu .twitter-timeline-container .main-jeddah.active,
.twitter-side-menu .twitter-timeline-container .jeddah-news.active {
    display: block;
    width: 100%;
}

.twitter-side-menu .accounts-handler {
    width: 15%;
    background-color: rgb(244, 244, 244);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.twitter-side-menu .accounts-handler .account {
    width: 3rem;
    height: 3rem;
    background-color: white;
    border-radius: 50%;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid silver;
    transition: all 0.3s ease 0s;
    cursor: pointer;
}

.twitter-side-menu .accounts-handler .account:hover {
    border: 1px solid var(--green-color);
}

.twitter-side-menu .accounts-handler .account.selected {
    border: 4px solid var(--green-color);
}

.twitter-side-menu .accounts-handler .account img {
    width: 50%;
    height: 50%;
}

.side-menu-container {
    position: fixed;
    z-index: 10;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 0px;
    display: flex;
    visibility: hidden;
    transition: width 0.8s ease 0s;
}

.side-menu-main-div {
    background-color: rgb(242, 242, 242);
    width: 85%;
    height: 100%;
    display: flex;
}

.side-menu-close-div {
    background-color: transparent;
    width: 15%;
    height: 100%;
}

.close-btn-div {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid white;
    float: right;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.side-menu-content-div {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0px;
    justify-content: space-between;
    background-image: url("/themes/uoj_theme/media/Layer 3.svg");
}

.side-menu-link-div {
    display: flex;
    align-items: center;
    justify-content: end;
}

.side-menu-link-div p {
    font-family: var(--IBM-regular);
    font-size: 24px;
    margin-right: 10px;
}

.side-menu-link-div div {
    width: 10px;
    height: 10px;
    background-color: rgb(36, 156, 210);
    border-radius: 50%;
}

.side-menu-btn-div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.horizontal-line-break {
    border-top: 1px solid black;
    width: 85%;
    opacity: 0.3;
}

.side-menu-btn {
    background-color: rgb(34, 176, 233);
    color: white;
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    margin-top: 9%;
}

.side-menu-btn p {
    font-size: 15px;
    font-family: var(--IBM-regular);
}

.active-side-link {
    color: rgb(36, 156, 210);
}

.side-menu-socials-div {
    width: 20%;
    height: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px 30px;
}

.side-menu-vertical-line {
    border: 1px solid rgb(215, 213, 213);
    height: 40%;
}

.side-menu-social-icon-div {
    border: 1px solid black;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebuttons {
    left: 0px;
    top: 60%;
    z-index: 100;
    position: fixed;
    transition: all 0.3s ease 0s;
}

.sidebuttons>div {
    cursor: pointer;
}

.sidebuttons .twitter-side a {
    display: flex;
    justify-content: flex-end;
}

.uoj-events {
    transform: scale(1) translateX(0px);
    transition: all 0.3s ease 0s;
    background-color: var(--button-background-primary-default);
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    padding: var(--spacing-3xl) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--spacing-lg);
}

html:has(.events-side-menu.side-menu.toggled) .uoj-events {
    transform: scale(1) translateX(32rem);
}

html:has(.events-side-menu.side-menu.toggled) .uoj-events svg.calendar {
    display: none;
}

html:has(.events-side-menu.side-menu.toggled) .uoj-events svg.close {
    display: block;
}

html .uoj-events svg.close {
    display: none;
}

.sidebuttons>.other-toggles>div span {
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    transform-origin: center;
    font-size: var(--text-md);
    font-family: var(--IBM-sb);
    color: white;
}

.sidebuttons>div.twitter-side:hover,
.sidebuttons>.other-toggles>div:hover {
    background-color: var(--button-background-primary-hovered);
}

.sidebuttons.toggled {
    top: 18rem;
    z-index: 1000;
}

.dropdown-open .sidebuttons.toggled {
    z-index: 3;
}

.sidebuttons.toggled .other-toggles {
    transform: translateX(0px);
    display: flex;
}

.twitter-side-menu button.close {
    right: 9px;
    top: 9rem;
    position: absolute;
}

.uoj-notifcations {
    display: none !important;
}

.uoj-electronic {
    position: absolute;
    top: 16rem;
    left: 7.5rem;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    transition: all 0.6s ease-in-out 0s;
    display: none;
}

.uoj-electronic:hover {
    color: white;
    text-decoration: none;
}

.uoj-electronic:hover img {
    transform: scale(1.1);
}

.uoj-electronic .desc {
    z-index: 1;
    font-size: 1rem;
    text-align: center;
    margin: 0;
    line-height: 1.7;
    font-family: var(--IBM-b);
}

.uoj-electronic img {
    width: 6rem;
    position: absolute;
    transition: all 0.6s ease-in-out 0s;
}

.chatbot:hover {
    background-color: var(--green-color-hover);
}

.swiper.programs.container {
    margin-top: 2rem;
}

.available-programs .swiper .swiper-pagination {
    bottom: 1.5rem;
    z-index: 1;
    opacity: 1 !important;
}

.programs .card-img-overlay {
    display: flex;
    align-items: flex-end;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.header-pattern {
    position: absolute;
    right: 0px;
    top: 26.8%;
    z-index: 1;
    display: none;
}

#block-universitystatistics {
    position: relative;
}

.swiper-slide video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.header .dimmer,
.banner .swiper-slide::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.6);
    background-image: linear-gradient(rgba(0, 0, 0, 0.4) 10%, rgba(0, 0, 0, 0) 40%);
}

.header .dimmer-mobile {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 97;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
}
.uni-programs .swiper-button-disabled.programs-example {
    transition: all 0.3s ease 0s;
    opacity: 0 !important;
}

.uni-programs .swiper-button-prev.programs-example,
.swiper-button-next.programs-example {
    transform: translateY(-5rem);
    opacity: 0;
    transition: all 0.3s ease 0s;
}

.uni-programs .swiper.programs:hover .swiper-button-disabled.programs-example {
    transition: all 0.3s ease 0s;
    opacity: 0.4 !important;
}

.uni-programs .swiper.programs:hover .swiper-button-prev.programs-example,
.uni-programs .swiper.programs:hover .swiper-button-next.programs-example {
    transition: all 0.3s ease 0s;
    opacity: 1;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    border-radius: 100%;
    opacity: 1 !important;
    position: relative !important;
    width: 12px;
    height: 12px;
    background-color: #D6D6D6;
    margin: 9px var(--spacing-xs) !important;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-color: var(--stepper-button-completed) !important;
}

.about-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    background-color: var(--navy-blue-color);
}

.about-swiper-section .about-swiper .swiper-wrapper {
    margin-bottom: 4rem;
}

.main-menu .menu-content .menu-links ul li .icon {
    transform: scaleX(-1) !important;
}
.available-programs .swiper-pagination-bullet.swiper-pagination-bullet-active::after,
.competitions .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    position: absolute;
    top: 0.42rem;
    left: 0.4rem;
    background-color: white;
}

.available-programs .pattern-1 img,
.available-programs .pattern-2 img,
.functional-competitions .pattern-1 img,
.functional-competitions .pattern-2 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.news-advertisements {
    background-color: var(--background-neutral-50);
    width: 100%;
}
h1.title {
    color: var(--text-default);
    font-family: var(--IBM-b);
    font-size: var(--display-sm);
    position: relative;
}

.security-report .header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
}

.focus-area {
    padding: 0;
}

.focus-area h1.title {
    margin-bottom: 0rem;
}

.focus-area h3.title {
    text-align: center;
    color: #efb60a;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.our-story .section-h1.section-title {
    color: var(--black-color);
    font-family: var(--IBM-sb);
    padding: 0px 0px 1rem;
    font-size: 2.3rem;
}

.news-advertisements .section-toggle a {
    color: var(--txt-color);
    border-radius: 0;
}

.achievements .tab-pane.active {
    display: flex;
    flex-wrap: wrap;
}

.news-advertisements .section-toggle a.selected {
    color: var(--blue-color);
    position: relative;
}

.news-advertisements .section-toggle a.selected::after {
    position: absolute;
    top: 3rem;
    width: 100%;
    right: 0px;
    height: 2px;
    background-color: var(--blue-color);
}

.swiper.news-advertisements {
    height: auto;
    padding-bottom: 6rem;
    width: 90%;
    display: flex;
    justify-content: center;
}

.news-advertisements .news-item .card-img-overlay .day,
.all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .day {
    font-size: 2.5rem;
    font-family: var(--IBM-b);
}

.swiper.news-advertisements .swiper-slide {
    width: 100%;
    height: fit-content;
}

.news-detail-img img {
    height: 26.5rem !important;
    width: 100% !important;
    object-fit: cover;
}

.news-advertisements.department-news .nav-link.active {
    color: var(--orange-color) !important;
}



.news-advertisements.department-news .news-item .card {
    border-bottom: 10px solid var(--orange-color);
}

.news-advertisements .news-item .thumbnail img {
    transform: scale(1);
    transition: all 0.6s ease 0s;
}


.all-news .swiper-slide .card .card-img-top {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.news-advertisements .news-item .card-img-top img {
    object-fit: cover;
    object-position: center top;
    height: 100%;
    width: 100%;
    transition: all 0.6s ease-in-out 0s;
}

.news-advertisements .items {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.updated-policies .items {
    width: 100% !important;
}

.news-advertisements .items a {
    padding: 0;
}



.news-advertisements .news-item .card-img-overlay .date,
.all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .date {
    color: white;
    font-family: var(--IBM-sb);
    font-size: 2.5rem;
    z-index: 2;
}

.news-advertisements .news-item .card-img-overlay .date .month-year,
.all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .date .month-year {
    font-size: 1.2rem;
    color: rgb(240, 240, 240);
    font-family: var(--IBM-regular);
    margin-top: -.5rem;
}

.swiper.testimonials .swiper-wrapper {
    padding-bottom: var(--spacing-8xl);
    padding: var(--spacing-0) var(--spacing-0) var(--spacing-5xl);
    max-width: calc(100% - 6rem);
}

a.more-testimonials-btn img {
    transform: translateX(0px);
    transition: all 0.3s ease 0s;
}

a.more-testimonials-btn.read-more {
    margin: 0 0 2rem;
    padding-left: 2rem;
}

a.more-testimonials-btn:hover img,
.read-more img {
    transform: translateX(-0.5rem);
    transition: all 0.3s ease 0s;
}


.available-programs .read-more span::after {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: white;
    top: -0.5rem;
    left: 0.5rem;
    opacity: 0.3;
    content: "";
    border-radius: 50%;
    z-index: 89;
}

.uni-inovations {
    height: auto;
    width: 100%;
    position: relative;
    padding: 0;
}

.uni-inovations .section-title {
    color: var(--black-color);
    text-align: center;
    font-family: var(--IBM-sb);
    padding: 0px 0px 6.5rem;
    font-size: 2.3rem;
}

.uni-inovations .main-news {
    background-color: transparent;
    height: 26rem;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    margin-top: 2rem;
    border-radius: var(--radius-lg);
}

.uni-inovations .main-news .research .thumbnail {
    height: 100%;
    position: absolute;
    top: 0px;
    width: 100%;
}

.uni-inovations .main-news .research .thumbnail::after {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.59);
    z-index: 80;
    top: 0px;
    left: 0px;
    content: "";
}

.uni-inovations .main-news .research .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uni-inovations .main-news .research {
    height: 100%;
}

.uni-inovations .main-news .research .swiper-slide {
    display: flex;
}

.uni-inovations .main-news .research .swiper-slide .content a {
    color: rgb(255, 255, 255);
    opacity: 1;
    transition: all 0.3s ease 0s;
}

.uni-inovations .main-news .research .swiper-slide .content a:hover {
    color: white;
    text-decoration: none;
    opacity: 0.8;
    transition: all 0.3s ease 0s;
}

.uni-inovations .main-news .research .swiper-slide .content a span svg {
    transition: all 0.3s ease 0s;
}

.uni-inovations .main-news .research .swiper-slide .content a:hover span svg {
    transform: translateX(-0.5rem);
}

.uni-inovations .main-news .research .swiper-slide .content {
    z-index: 92;
    color: white;
    padding: 0 var(--spacing-3xl);
}

.uni-inovations .main-news .research .swiper-slide .content .title {
    font-size: var(--display-xs);
    font-family: var(--IBM-b);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

.uni-inovations .main-news .research .swiper-slide .content .date {
    color: var(--alpha-white-80);
    font-family: var(--IBM-sb);
    font-size: var(--text-md);
    margin: var(--spacing-lg) 0;
    display: flex;
    flex-direction: row-reverse;
    width: fit-content;
}

.uni-inovations .main-news .research .swiper-slide .content .date span {
    display: flex;
    padding-left: .8rem;
    align-items: center;
}

.uni-inovations .main-news .research .swiper-slide .content .date span img {
    width: 1.2rem;
}

.uni-inovations .main-news .research .swiper-slide .content .desc {
    font-size: var(--text-md);
    margin-top: var(--spacing-xl);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--alpha-white-80);
}

.uni-inovations .main-news .research .swiper-slide .content .read-more {
    margin-top: var(--spacing-xl);
}

.uni-inovations .main-news .research .swiper-slide .content .read-more a {
    font-size: var(--text-md);
    font-family: var(--IBM-b);
}

.uni-inovations .content .read-more span {
    margin-right: var(--spacing-md);
}

.uni-inovations .inovation-container {
    display: block;
}

.uni-inovations .inovation-container .inovations-detail .item:not(:last-child) { 
    border-bottom: 1px solid var(--border-background-neutral) 
}

.uni-inovations .inovation-container .inovations-detail {
    display: flex;
    flex-direction: row;
    justify-content: end;
    width: 100%;
    position: absolute;
    bottom: 4rem;
    z-index: 1;
    left: 1rem;
    border: 1px solid var(--border-background-neutral);
    border-right: unset;
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

.uni-inovations .inovation-container .inovations-detail .item {
    padding: .6rem;
    margin: .2rem;
    background-color: rgb(222, 222, 222);
    ;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    border-radius: 50%;
}

.uni-inovations .inovation-container .inovations-detail .item:hover {
    background-color: rgba(213, 213, 213, 0.1);
    transition: all 0.3s ease 0s;
}

.uni-inovations .inovation-container .inovations-detail .item.selected {
    transition: all 0.3s ease 0s;
    position: relative;
}
.uni-inovations .inovation-container .inovations-detail .desc {
    font-size: var(--text-xl);
    width: 100%;
    font-family: var(--IBM-b);
    line-height: 2.2;
    margin-bottom: var(--spacing-md);
    display: none;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.uni-inovations .inovation-container .inovations-detail .date {
    color: var(--text-display);
    font-family: var(--IBM-sb);
    font-size: var(--text-md);
    display: none;
    flex-direction: row-reverse;
    width: fit-content;
}
.uni-inovations .inovation-container .inovations-detail .date i{
color:var(--text-primary);
}
.uni-inovations .inovation-container .inovations-detail .date span {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

.uni-inovations .inovation-container .inovations-detail a.read-more,
.uni-inovations .inovation-container .inovations-detail a {
    color: var(--blue-color);
    font-size: 1rem;
    text-decoration: none;
}

.uni-testimonials {
    position: relative;
    width: 100%;
    padding: 0;
    background-color: var(--background-neutral-50);
}
.uni-testimonials.our-leaders{
    background-color:white;
}
.uni-testimonials .section-title {
    color: var(--black-color);
    text-align: center;
    font-family: var(--IBM-sb);
    padding: 0px 0px 4rem;
    font-size: 2.3rem;
}

.topnav .links-container {
    display: flex;
    align-items: center;
}

.topnav .links a:hover {
    color: white;
}

.topnav .navbar {
    width: 100%;
}

.navbar .navbar-brand {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
}

.topnav .languages .dropdown-toggle {
    color: white;
    font-size: .9rem;
    display: flex;
    align-items: center;
}

.languages .dropdown-menu li a {
    padding: .5rem 1rem;
    cursor: pointer;
    color: var(--black-color);
    font-size: .9rem;
    transition: all .3s ease-in-out;
}

.languages .dropdown-menu li a:hover {
    background-color: var(--light-gray-background);
    color: var(--blue-color);
}

.languages {
    position: relative;
    display: none;
}

.languages .dropdown-menu {
    top: 2.7rem;
    max-width: fit-content;
    animation: dropdownanimationlang .5s;
}

.navbar .dropdown .dropdown-menu a.dropdown-item,
.scroll .navbar .dropdown .dropdown-menu a.dropdown-item {
    padding: 0.8rem 1rem !important;
    font-size: .9rem;
}

.topnav .uoj-electronic-sub,
.topnav .electronic-button {
    display: none;
}

.topnav.scroll .uoj-electronic-sub {
    display: block;
    width: 2px;
    height: 3rem;
    background-color: rgba(192, 192, 192, 0.376);
    margin: 0 1rem;
}

.topnav.scroll .electronic-button {
    display: block;
    color: white;
    padding: 0.5rem 1.2rem;
    border-radius: 1rem;
    background: url("/themes/uoj_theme/media/electronic-button-scroll.svg") var(--blue-color);
    font-family: var(--IBM-sb);
    font-size: 0.95rem;
    opacity: 1;
    background-size: contain;
}

.topnav.scroll .electronic-button:hover {
    background: url("/themes/uoj_theme/media/electronic-button-scroll.svg") 0% 0% / contain rgb(23, 151, 202);
}

.scroll.topnav .links-container .links {
    margin: 0px 1.1rem;
    padding-right: 0rem;
}

.topnav .right-lnk .logo-container {
    display: flex;
    align-items: center;
    opacity: 1;
}

.mobile-menu .colored-logo {
    display: block;
}


.mobile-menu .nav-item .nav-link {
    color: var(--black-color);
}

.mobile-menu .colored-logo img {
    width: 2rem;
}

.mobile-menu .colored-logo.long img {
    width: 5rem;
}

.mobile-menu .vertical-line {
    border-left: 1px solid rgba(0, 0, 0, 0.51);
}

.scroll .colored-logo {
    display: block;
}

.scroll .white-logo {
    display: none;
}

.topnav .links-container .options {
    display: flex;
    align-items: center;
}

.topnav .links-container .options .language-selector .dropdown img {
    width: 2rem;
}

.topnav .options .accessibility,
.topnav .options .menu,
.topnav .options select {
    cursor: pointer;
    transition: all 0.3s ease 0s;
    opacity: 1;
    display: none;
}

.topnav .options .menu {
    padding: 0px 1.2rem 0px 0px !important;
}

.topnav .links-container .options select {
    margin-right: 0px;
}

.sub .topnav .links-container .options select,
body.toolbar-horizontal .topnav .links-container .options select {
    color: black;
    background-image: url("/themes/uoj_theme/media/chevron-down - alt.svg");
}

.sub .topnav .colored-logo {
    display: flex;
}

.sub .topnav .white-logo,
.sub .topnav a.electronic-button,
.sub .topnav .uoj-electronic-sub {
    display: none;
}

.sub .topnav .accessibility path {
    fill: var(--black-color);
}

.topnav .links-container .options .accessibility:hover,
.topnav .links-container .options .search:hover,
.topnav .links-container .options .menu:hover,
.topnav .links-container .options select:hover {
    transition: all 0.3s ease 0s;
    opacity: 0.7;
}

.topnav .links-container .options .language-selector {
    display: flex;
    color: white;
    align-items: center;
    font-size: 1.5rem;
    flex-direction: row-reverse;
}

.topnav .links-container .options .language-selector .dropdown {
    display: flex;
}

.topnav .logo-container .long img,
.scroll .logo-container .long img {
    width: 8.5rem;
    height: 3rem;
    object-fit: contain;
}

.vertical-line {
    height: 3rem;
    margin: 0px 0.7rem;
}

.navbar a.nav-link,
.navbar a.dropdown-toggle {
    color: rgb(241, 241, 241);
    font-size: 1rem;
    font-family: var(--IBM-sb);
    transition: all 0.3s ease 0s;
    text-overflow: ellipsis;
}

.topnav a:hover {
    opacity: 1;
    transition: all 0.3s ease 0s;
}

.topnav .icon {
    display: none;
}

.right-lnk {
    float: right;
}

.languages .icon {
    display: block;
    margin: 0 .3rem;
    display: none;
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: 100vh;
    transform: translateX(-100%);
    transition: all .3s ease-in-out;
    background-color: rgb(255, 255, 255);
    z-index: 101;
    overflow: hidden auto;
}

.mobile-menu .menu-close-btn {
    background-color: var(--navy-blue-color);
    height: 4rem;
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu .main-section {
    display: flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #EBEBEB;
}

.mobile-menu .main-section span {
    margin: 1rem 2rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.mobile-menu .mobile-log-in {
    padding: .8rem 1rem;
    margin: 2rem auto 1rem;
    display: flex;
    align-items: center;
    width: 90%;
    border-radius: .5rem;
    border: 1px solid #EBEBEB;
    transition: all 0.3s ease 0s;
    background-image: url('/themes/uoj_theme/media/Mask Group 7.png');
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
}

.mobile-menu .mobile-log-in>div .icon {
    height: 2.5rem;
    width: 2.5rem;
    background-color: #E8F7FD;
    border-radius: 100%;
    padding: 0.6rem;
    margin-left: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu .mobile-log-in>div .icon svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.mobile-menu .mobile-log-in>div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 1rem;
    color: var(--black-color);
}

.mobile-menu .menu-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    justify-content: space-between;
}

.mobile-menu .menu-header .logo-containers {
    display: flex;
    align-items: center;
}

.mobile-menu .menu-header .menu-close {
    display: flex;
    align-items: center;
}

.mobile-menu.re {
    top: -40rem;
    animation: 0.5s ease 0s 1 normal none running mobile-menu-re;
}

.menu-mobile-icon {
    display: block;
}

.scroll .vertical-line {
    margin: 0.1rem 1rem;
    height: 3rem;
}

.topnav .options .accessibility,
.topnav .options .search,
.topnav .options .menu-mobile-icon {
    padding: 0px 0.4rem;
    cursor: pointer;
    width: 2.5rem;
}

.topnav .options .accessibility svg,
.topnav .options .search svg,
.topnav .options .menu-mobile-icon svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.topnav .options .menu-mobile-icon {
    padding-left: 0px;
}

.scroll.topnav .options .menu {
    padding: 0px 0.8rem 0px 0px;
}

.mobile-menu .first.container {
    padding-bottom: 0;
}

.mobile-menu .second.container {
    padding-top: 0;
}

.mobile-menu .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 0;
}

.mobile-menu .navbar.second {
    padding-bottom: 1rem;
}

.mobile-menu .nav-item .nav-link {
    color: var(--black-color);
}

.mobile-menu .nav-item {
    color: var(--black-color);
    font-size: 1.1rem;
    position: relative;
    border-bottom: 1px solid #EBEBEB;
    padding: 0;
    list-style-type: none;
    width: 100%;
}

.mobile-menu .nav-item a {
    color: var(--black-color);
}

.mobile-menu .second.container .nav-item:last-child {
    border-bottom: none;
}

.mobile-menu .dropdown .nav-link {
    display: none;
}

.mobile-menu .nav-item .nav-link,
.mobile-menu .nav-item .dropdown-toggle {
    color: var(--black-color);
}

.mobile-menu .nav-item .dropdown-toggle {
    position: relative;
    display: block;
}

.mobile-menu .nav-item.sec-menu::before {
    position: absolute;
    top: 2rem;
    left: 2rem;
    width: 0.5rem;
    height: 0.7rem;
    background: url("/themes/uoj_theme/media/Icon ionic-ios-arrow-back-r.svg");
    background-repeat: no-repeat;
    background-size: 84%;
    content: '';
    transition: .3s all ease;
}

.mobile-menu .nav-item .dropdown.show .dropdown-toggle::before {
    transform: scale(1.2) rotate(180deg);
}

.mobile-menu .options {
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 103;
    background-color: #f9f9f9;
}

.mobile-menu .options .language-switch {
    width: 80%;
    display: flex;
    position: relative;
    align-items: center;
    border-left: 1px solid #dddddd;
    padding: 1.2rem 1rem 1.2rem 0rem;
}

.mobile-menu .language-switch.clicked::after {
    transform: rotate(90deg);
}

.mobile-menu .language-switch.clicked,
.mobile-menu .accessibility-button.clicked {
    background-color: #e4e4e4;
}

.mobile-menu .accessibility-button img {
    height: 2rem;
}

.mobile-menu .language-switch::after {
    position: absolute;
    top: 1.9rem;
    left: 1rem;
    width: 0.5rem;
    height: 0.7rem;
    background-repeat: no-repeat;
    background: url("/themes/uoj_theme/media/Icon ionic-ios-arrow-back-r.svg");
    background-size: 84%;
    transform: rotate(-90deg);
    background-repeat: no-repeat;
    content: '';
    transition: .3s all ease;
}

.mobile-menu .options .language-switch .icon {
    margin-left: .7rem;
}

.mobile-menu .options .accessibility-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
}

.mobile-menu .options .language-selector {
    border-left: 1px solid rgb(52, 70, 90);
    display: flex;
    justify-content: center;
    font-size: 1.1rem;
    padding: 1rem 0px;
    color: white;
    align-items: center;
    cursor: pointer;
}

.mobile-menu .options .language-selector a {
    color: white;
}

.mobile-menu .options .language-selector p {
    margin-bottom: 0;
}

.mobile-menu .options .language-selector,
.mobile-menu .options .accessibility {
    width: 50%;
}

.mobile-menu .options .accessibility {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0px;
    cursor: pointer;
}

.mobile-menu .options .accessibility svg {
    height: 1.5rem;
}

.swiper.testimonials .swiper-slide {
    width: 604px;
    transform: scale(0.65);
    opacity: .5;
    display: flex;
    transition: all 0.3s ease 0s;
    align-items: center;
    background-color: transparent;
}

.quote-bubble img {
    width: 50%;
    height: 50%;
}

.swiper.testimonials .swiper-slide-active {
    width: 604px;
    transform: scale(1);
    opacity: 1;
    display: flex;
    z-index: 98;
    align-items: center;
    transition: all 0.3s ease 0s;
    height: 120% !important;
}

.swiper.testimonials .swiper-slide-active .card {
    background-color: var(--background-card);
}

.testimonials .card {
    position: relative;
    width: 100%;
    margin: 0;
    height: 312px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-neutral-primary);
    background-color: transparent;
}

.uni-testimonials .swiper-button-prev:hover,
.uni-testimonials .swiper-button-next:hover {
    background-color: var(--button-background-neutral-hovered) !important;
}

.testimonials .card .card-body::before {
    content: "";
    position: absolute;
    top: 0rem;
    right: var(--spacing-3xl);
    height: 60px;
    width: 43px;
    background-image: url("/themes/uoj_theme/media/quote-start.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.testimonials .card .card-body::after {
    content: "";
    position: absolute;
    bottom: 0rem;
    left: var(--spacing-3xl);
    height: 60px;
    width: 43px;
    background-image: url("/themes/uoj_theme/media/quote-end.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.testimonials .card .card-body {
    position: relative;
    background-color: transparent;
    padding: var(--spacing-3xl);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonials .card .card-body .desc {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--text-lg);
    padding: var(--spacing-0) var(--spacing-7xl) var(--spacing-0) var(--spacing-4xl);
    color: var(--text-primary-paragraph);
    position: relative;
}

.testimonials .card .card-body .user {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.testimonials .card .card-body .user .card-img {
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    height: 48px;
    width: 48px;
    overflow: hidden;
    border: 2px solid var(--white);
}

.testimonials .card .card-body .user .card-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.testimonials .card .card-body .user .info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.testimonials .card .card-body .user .info .name {
    font-size: var(--text-xl);
    font-family: var(--IBM-sb);
}

.testimonials .card .card-body .user .info .position {
    font-size: var(--text-lg);
    color: var(--text-primary-paragraph);
    max-width: 97%;
}

.uni-testimonials a.more-testimonials-btn div {
    z-index: 1;
    position: relative;
}

.uni-testimonials .swiper-button-disabled.testimonials {
    transition: all 0.3s ease 0s;
    opacity: 0 !important;
}

.uni-testimonials .swiper.testimonials:hover .swiper-button-disabled.testimonials {
    transition: all 0.3s ease 0s;
    opacity: 0.4 !important;
}

.uni-testimonials .swiper-button-prev,
.uni-testimonials .swiper-button-next {
    height: 48px;
    width: 48px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-neutral-primary);
    display: none;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    position: relative;
}

.static-slider .swiper-button-prev,
.static-slider .swiper-button-next {
    height: 48px;
    width: 48px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-neutral-primary);
    display: none;
    scale: -1;
    background-color: white;
}

.static-slider .swiper-button-prev::after,
.static-slider .swiper-button-next::after {
    content: none;
    display: none;
}

.uni-testimonials .swiper-button-prev {
    scale: -1;
}

.uni-testimonials .swiper-button-prev::after,
.uni-testimonials .swiper-button-next::after {
    content: "" !important;
}

.uni-testimonials .swiper.testimonials:hover .swiper-button-prev.testimonials,
.uni-testimonials .swiper.testimonials:hover .swiper-button-next.testimonials {
    transition: all 0.3s ease 0s;
    opacity: 1;
}

.international-students .card-img-overlay .footer {
    background-color: transparent;
    margin: 2.5rem 0 1rem;
}

.leaflet-control-zoom .leaflet-control-zoom-in,
.leaflet-control-zoom .leaflet-control-zoom-out {
    width: 2.6rem !important;
    height: 2.6rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leaflet-control-zoom .leaflet-control-zoom-in span,
.leaflet-control-zoom .leaflet-control-zoom-out span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem !Important;
    line-height: 0px;
    text-indent: 0;
}

.leaflet-control-zoom.leaflet-bar.leaflet-control {
    margin: 0 !important;
}

.tab-links a {
    color: var(--black-color);
    text-decoration: none;
    transition: all 0.3s ease 0s;
}

.department-news .tab-links a:hover {
    color: var(--orange-color);
    transition: all 0.3s ease 0s;
}

.archiveNewsUrl{ gap: var(--spacing-sm); }

.tab-links li {
    margin: 0px;
    float: right;
    list-style: none;
    color: rgb(130, 130, 130);
    font-size: 1rem;
}


.functional-competitions .card .card-img-top {
    height: 25rem;
    object-fit: cover;
}

.accordion-body .card-img-top {
    /* min-height: fit-content; */
    height: 10rem;
    width: 100%;
}

.tab-links li a.active,
li a.active:hover,
.tab-links li a.active,
li a.active:hover {
    color: var(--blue-color);
}

.image-viewer.container {
    padding: 0;
}

.image-viewer img {
    height: 100%;
    width: 100%;
}

.news-advertisements .nav-pills .nav-link {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -2.5rem;
}
.news-ads {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xl);
}
.news-ads .load-more{
    margin:auto;
    display:flex;
    
}
.nav-pills .nav-link.active {
    position: relative;
    border-radius: 0;
    background-color: transparent !important;
    color: var(--txt-color);
    text-align: center;
}

.achievement .card .image-container img {
    height: 100%;
    width: 100%;
}

.links-container select {
    border: none;
    background-color: transparent;
    color: white;
    appearance: none;
    background-image: url("/themes/uoj_theme/media/chevron-down.svg");
    background-repeat: no-repeat;
    background-position: 2.7rem center;
    background-size: 1.3rem;
    font-size: 1.3rem;
    text-align: left;
    width: 4rem;
}

select option {
    background-color: white;
    color: black;
}

.search .modal-dialog.modal-dialog-centered {
    max-width: 100%;
    width: 100vw;
    height: 100vh;
    padding: 0px;
    margin: 0px;
    flex-direction: column;
}

.search .modal-dialog .modal-content::after {
    position: absolute;
    top: 0px;
    right: -27rem;
    content: "";
    width: 100%;
    height: 65%;
    background-image: url("/themes/uoj_theme/media/Repeat Grid 3.png");
    pointer-events: none;
}

.search .modal-dialog .modal-content {
    border: none;
    width: 100%;
    height: 100%;
    position: relative;
}

.search .modal-dialog .modal-content .logo {
    z-index: 10;
    height: 8rem;
    width: 8rem;
    margin-bottom: 1rem;
}

.search .modal-dialog .modal-content .logo img {
    height: 100%;
    width: 100%;
}

.search .modal-dialog .modal-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px;
    margin: 0px;
    background-color: var(--background);
}

.search button.close {
    position: absolute;
    left: 1rem;
    top: 1rem;
    border-radius: 50%;
    z-index: 1;
    height: 3rem;
    width: 3rem;
}

.associates-search .search-btn {
    padding: var(--spacing-0) var(--spacing-3xl);
    transition: all 0.3s ease 0s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--button-background-primary-default);
    color: white;
}

.associates-search .search-btn:hover {
background-color: var(--button-background-primary-hovered);
}

.filters-container .filter-btn .icon svg path{ 
    stroke: var(--button-background-primary-default); 
}

.search .search-btn {
    color: white;
    border: none;
    display: flex;
    align-items: center;
    height: 3rem;
    font-size: 1rem;
    font-family: var(--IBM-sb);
    margin: 0px;
    padding: 1.2rem;
    border-radius: 0px;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    background-color: var(--blue-color);
    position: relative;
    width: 100%;
    justify-content: center;
}

.associates-search .search-btn label {
    display: none;
}

.associates-search .search-btn .icon::before {
    background-image: url("/themes/uoj_theme/media/Icon\ feather-search.svg");
    background-repeat: no-repeat;
    background-position: .6rem center;
    background-size: 1.2rem;
    height: 1.2rem;
    content: "";
    position: relative;
    left: 0;
    top: .9rem;
    width: 3rem;
}

.right-panel {
    background-image: url("/themes/uoj_theme/media/pattern-main-menu.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20%;
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 5rem;
    left: 0px;
    opacity: 0.6;
}

.search-footer {
    background-image: url("/themes/uoj_theme/media/Intersection 2.jpg");
    width: 100%;
    position: relative;
    display: flex;
    align-items: start;
    flex-direction: column;
    padding: 1.5rem 0px;
    overflow: hidden;
    justify-content: start;
}

.search-footer.modal-footer {
    flex-direction: row;
}

.search-footer.modal-footer .std {
    width: 100%;
    padding-right: 1.5rem;
}

.search-footer.modal-footer .link {
    padding: 0;
    width: 40%;
    margin-bottom: 1rem;
}

.search-footer.modal-footer .link:nth-child(even) {
    margin-right: 1.5rem;
}

.search-footer::after {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(153, 153, 153, 0);
    content: "";
    pointer-events: none;
}

.search-footer .link {
    font-size: var(--text-md);
    font-family: var(--IBM-sb);
    display: flex;
    align-items: center;
    color: var(--text-default);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    width: fit-content;
}

.search-footer .link:hover {
    color: var(--link-primary-hovered);
}

.search-footer .link label {
    cursor: inherit;
}

.search-footer .link.no-click {
    cursor: no-drop !important;
}

.search-footer .link svg {
    width: 1rem;
    height: 1rem;
    margin-left: .7rem;
    transition: all 0.3s ease 0s;
}

.std {
    font-size: 1.2rem;
    padding: 2rem 2rem;
    font-family: var(--IBM-sb);
    position: relative;
    min-width: max-content;
}

.search select {
    background-image: url("/themes/uoj_theme/media/Icon feather-users.svg");
    background-repeat: no-repeat;
    background-position: left center;
    appearance: initial;
    display: flex;
}

.search button svg {
    height: 100%;
    width: 100%;
}

.dropdown-menu.radio .dropdown-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    padding: .3rem 1rem;
    padding: var(--spacing-md);
    border-radius: var(--spacing-sm);
}
.dropdown-menu.radio .dropdown-item.active { 
    background-color: var(--form-option-background-pressed); 
    color: revert; 
}
.dropdown-menu.radio .dropdown-item:hover { 
    background-color: var(--form-option-background-hover); 
}

.dropdown-menu.radio input {
    visibility: hidden;
    position: absolute;
    left: -30px;
}

.dropdown-menu.radio i {
    font-weight: normal;
    font-style: normal;
    display: block;
    text-align: right;
}

.search input.form-control {
    border: none;
    border-radius: 0px;
    font-size: .9rem;
    height: 100%;
    padding: 0px 1rem;
}

.search .input-group.mb-3 {
    display: flex;
    align-items: flex-start;
    padding: 0px;
    margin: 3rem 0px 0px;
    height: 3rem;
    width: 24rem !important;
    z-index: 90;
}

.search .input-group.mb-3 {
    display: flex;
    align-items: flex-start;
    padding: 0px;
    margin: 3rem 0px 0px;
    height: auto !important;
    width: 24rem !important;
    z-index: 90;
    flex-direction: column;
}

.search .input-group.mb-3,
.associates-search {
    display: flex;
    padding: 0px;
    height: 40px;
    width: 100%;
    gap: var(--spacing-3xl);
}

.search .dropdown {
    border-radius: 0px;
    background-color: white;
    height: 3rem;
    margin: .5rem 0;
    width: 100%;
    display: flex;
    transition: all 0.3s ease 0s;
}

.associates-search .dropdown {
    border-radius: var(--radius-sm);
    background-color: white;
    height: 100%;
    display: flex;
    transition: all 0.3s ease 0s;
    border: 1px solid #9DA4AE;
}

.associates-search .dropdown button {
    padding: 0px 1rem;
    border: none;
}
.search .dropdown button img {
    width: 80%;
}

.search .modal-dialog .input-group .form-control {
    padding-right: 3rem;
    border: none;
    outline: none;
    height: 3rem;
    width: 100%;
}

.associates-search .form-control {
    height: 100%;
    border: 1px solid #9DA4AE;
    border-radius: var(--radius-sm)!important;
    height: 40px;
}

.uni-side ins,
.users ins {
    display: none;
    width: 1.5rem;
    margin-right: 0.2rem;
    display: flex;
    align-items: center;
    position: relative;
}

.uni-side label,
.users label {
    margin-right: -.7rem;
}

.uni-side button::before,
.users button::before {
    display: none;
}

.uni-side ins::before {
    content: '';
    position: absolute;
    background-image: url('/themes/uoj_theme/media/chevron-down-green.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 0.5rem;
    width: 0.7rem;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}

.dropdown.users ins::before {
    content: '';
    position: absolute;
    background-image: url('/themes/uoj_theme/media/chevron-down-green.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 0.5rem;
    width: 0.7rem;
    right: 5px;
    top: 30px;
}

.uni-side ins img,
.users ins img {
    height: 100%;
    width: 100%;
    position: relative;
    display: none;
}

.dropdown button.btn.btn-light.dropdown-toggle:focus {
    box-shadow: none;
    background-color: unset;
    border-top: none;
    border-bottom: none;
}

.dropdown button.btn.btn-light.dropdown-toggle {
    background-color: white;
    height: 100%;
    min-width: 100%;
    font-size: 1rem;
    align-items: center;
    display: flex;
    border-radius: var(--radius-sm);
    color: var(
    --txt-color);
    padding: 0 1rem;
    position: relative;
}
.dropdown button.btn.btn-light.dropdown-toggle::after{
    content:""!important;
    position:absolute;
    height:2px;
    width:100%;
    background-color:#000;
    border: none;
    bottom:0;
    right:0;
    scale:0;
    transition: all .6s ease-in-out;
    opacity:1;
}
.dropdown.show button.btn.btn-light.dropdown-toggle::after{
    scale:1;
}
.associates-search .dropdown button.btn.btn-light.dropdown-toggle {
    border-right: none;
}

.dropdown button.btn.btn-light.dropdown-toggle::before {
    position: absolute;
    top: auto;
    left: 1rem;
    content: '';
    width: 10px;
    height: 10px;
    background: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z" fill="%23000000"></path></svg>');
}

.search .erase {
    position: absolute;
    right: 0rem;
    border: none;
    height: auto;
    width: 3rem;
    top: .5rem;
    border-radius: 100%;
    outline: none;
    text-align: center;
    font-weight: bold;
    padding: 2px;
    z-index: 3;
    background-color: transparent;
}

.search .erase:hover svg {
    opacity: 0.7;
}

.search .erase svg {
    width: 50%;
    height: 50%;
    opacity: 1;
    transition: all 0.3s ease 0s;
}

.sub .topnav a {
    color: var(--black-color);
}

.sub .topnav .vertical-line {
    border-left: 1px solid rgb(200, 200, 200);
}

.sub .topnav .options .language-selector {
    color: var(--black-color);
}

.sub .topnav .options .search path {
    stroke: var(--black-color);
}

.sub .topnav .options .menu path {
    fill: var(--black-color);
}

.uoj-breadcrumb {
    display: none;
    align-items: center;
}

.uoj-breadcrumb .page a {
    color: var(--link-neutral);
    font-size: var(--text-sm);
    transition: all 0.3s ease 0s;
}

.uoj-breadcrumb .page:last-child a {
    color: var(--text-default-disabled);
}

.uoj-breadcrumb .page a:hover {
    text-decoration: none;
    color: var(--link-neutral-hovered);
}

.uoj-breadcrumb .icon {
    display: flex;
    margin: 0px 0.5rem;
    align-items: center;
    width: 0.5rem;
}

.uoj-breadcrumb .icon img {
    width: 100%;
}

.news-content .title {
    margin: 2rem auto;
    line-height: 2.2;
    font-size: 1.2rem;
    font-family: var(--IBM-sb);
}

.news-content .more-info {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin: 1rem auto;
}

.news-content .more-info .date {
    display: flex;
    align-items: center;
    font-size: var(--text-md);
    flex-direction: row-reverse;
    gap: var(--spacing-sm);
}
.news-content .more-info .date i{
    color: var(--background-primary);
}
.news-content .more-info .date span {
    margin-left: 1rem;
    display: flex;
}

.news-content .more-info .share-options {
    display: flex;
    align-items: center;
    font-family: var(--IBM-sb);
    font-size: 0.9rem;
    color: rgb(107, 107, 107);
    display: none;
}

.news-content .more-info .share-options .icons {
    margin-right: 2rem;
    display: flex;
}

.news-content .more-info .share-options .icons a {
    display: flex;
    justify-content: center;
}

.news-content .more-info .share-options .icons a svg {
    width: 3rem;
    transform: rotate(90deg);
    display: flex;
    margin: 0px 0.5rem;
}

.news-content .more-info .share-options #share-icon1:hover #Ellipse_25 {
    fill: rgb(182, 44, 63);
}

.news-content .more-info .share-options #share-icon1:hover path {
    stroke: rgb(255, 255, 255);
}

.news-content .more-info .share-options #share-icon2:hover #Ellipse_25 {
    fill: rgb(119, 71, 142);
}

.news-content .more-info .share-options #share-icon2:hover path {
    fill: rgb(255, 255, 255);
}

.news-content .more-info .share-options #share-icon3:hover #Ellipse_25 {
    fill: rgb(34, 176, 233);
}

.news-content .more-info .share-options #share-icon3:hover path {
    stroke: rgb(255, 255, 255);
}

.news-content .more-info .share-options #share-icon4:hover #Path_925 path:first-child {
    fill: rgb(0, 34, 71);
}

.news-content .more-info .share-options #share-icon4:hover #Icon_feather-facebook {
    stroke: rgb(255, 255, 255);
}

.news-content {
    margin-bottom: 3rem;
    min-height: 40rem;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: space-between;
}

.news-content .news-thumbnail {
    margin-top: 2rem;
    display: flex;
    float: left;
    width: auto;
}

.news-thumbnail.container {
    width: auto;
    z-index: 2;
}

.news-content .news-thumbnail img,
.news-thumbnail img {
    height: 28rem;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-lg);
}

.news-content .news-thumbnail img {
    object-fit: contain;
}

.news-thumbnail.news-detail-img {
    margin-top: 0rem;
}
label {
    margin-bottom: unset;
}
.all-news .swiper-wrapper {
    height: 27rem;
}

.news-container .all-news .swiper-slide .card {
    height: 100%;
    border-radius: 0px;
    overflow: hidden;
    transition: all 0.3s ease 0s;
}

.news-container .all-news .swiper-slide .news-card .image-container img {
    height: 100%;
    transition: all 0.6s ease 0s;
    width: 100%;
    object-fit: cover;
}

.news-container .all-news .swiper-slide:nth-child(3n+1) .card {
    border-bottom: 10px solid var(--blue-color);
}

.news-container .all-news .swiper-slide:nth-child(3n+2) .card {
    border-bottom: 10px solid var(--orange-color);
}

.news-container .all-news .swiper-slide:nth-child(3n+3) .card {
    border-bottom: 10px solid var(--green-color);
}

h1.section-title {
    font-family: var(--IBM-b);
}

.our-story h1.section-title,
.bar-chart h1.section-title {
    padding: 0;
}

.bar-chart h1.section-title::before {
    display: none;
}


.all-news-container a:hover .card-title {
    color: var(--blue-color);
}


.all-news.swiper {
    position: relative !important;
    height: 32.5rem;
}

.patt svg,
.patt img {
    max-width: 4rem;
    min-width: 4rem;
}

.all-news-container .card-section .card .day {
    font-family: var(--IBM-b);
}

.all-news-container .card-section .card .date .month-year {
    font-size: 1.2rem;
    color: rgb(240, 240, 240);
    margin-top: -.5rem;
    font-family: var(--IBM-regular);
}

.about-us .description,
.contact-us-container .description,
.departments .description,
.open-data .description,
.bar-chart .content .description,
.future-leader .description,
.safe-speech .description,
.f-services .description,
.all-news-container .description {
    font-size: var(--text-sm);
    color: var(--text-default);
    line-height: 24px;
    width: 100%;
}

.values .description {
    font-size: var(--text-md);
    line-height: 24px;
    color: var(--text-default);
}

.uni-values .num {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.all-news-container .topic {
    display: none;
}

.all-news-container .topic::before {
    top: -0.2rem;
    right: 0px;
    position: relative;
    content: "";
    display: inline-block;
    margin: 0px 0px 0px 0.5rem;
    transition: all 0.2s ease 0s;
    height: 1px;
    width: 2rem;
    background-color: var(--blue-color);
}

.all-news-container .card .card-text {
    line-height: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-size: 1rem;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    color: var(--txt-color);
}

.research-innovation.all-news-container .col-lg-4 .card .card-text {
    display: none;
}
.scroll .logo-container .colored-logo img {
    height: 4rem;
    width: auto;
}

.deco2 {
    background: linear-gradient(to left, transparent 0%, rgba(255, 255, 255, 1) 50%);
    height: 100%;
    width: 3rem;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    display: none;
}

.pattern-image {
    padding: 0 0px 3rem;
}

.pattern-image a {
    background-color: var(--button-background-primary-default);
    color: white;
    padding: var(--spacing-0) var(--buttons-lg-padding);
    height: 40px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    font-family: var(--IBM-sb);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pattern-image a span {
    font-family: var(--IBM-sb);
    font-size: var(--text-md);
}

.pattern-image a img {
    height: 1.5rem;
    width: 1.5rem;
    margin-left: 0.5rem;
    display: none;
}

.pattern-image a:hover {
    background-color: var(--button-background-primary-hovered);
}

[id="customBackground"] {
    background-image: url("http://emilyhayman.com/codepens/filter-1.jpg");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    height: 100%;
    transition: background-image 0.55s ease 0s;
}

[id="customBackground"]::after {
    content: "";
    inset: 0px;
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: rgb(0, 0, 0);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease-in 0s;
    will-change: opacity;
}

[id="customBackground"].cityscape {
    background-image: url("http://emilyhayman.com/codepens/filter-1.jpg");
}

[id="customBackground"].bus {
    background-image: url("http://emilyhayman.com/codepens/filter-2.jpg");
}

[id="customBackground"].cactus {
    background-image: url("http://emilyhayman.com/codepens/filter-3.jpg");
}

.custom-dropdown {
    position: absolute;
    cursor: pointer;
    min-width: 400px;
    margin-top: -41px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.custom-dropdown.active input[type="radio"]+label {
    visibility: visible;
    opacity: 1;
    height: auto;
}

.custom-dropdown:not(.active) input[type="radio"]:not(:checked)+label {
    visibility: hidden;
    opacity: 0;
    height: 0px;
    padding: 0px;
    margin: 0px;
}

.custom-dropdown input[type="radio"] {
    display: none;
    pointer-events: none;
}

.custom-dropdown input[type="radio"]:checked+label {
    z-index: 10;
}

.custom-dropdown label {
    cursor: pointer;
    position: relative;
    display: block;
    background-color: rgb(255, 255, 255);
    transition: all 0.25s ease-in-out 0s;
    backface-visibility: hidden;
    will-change: opacity;
}

.custom-dropdown::after {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    padding: 16px 19px 15px;
    border-left: 1px dotted rgb(204, 204, 204);
    position: absolute;
    top: 14px;
    height: 42px;
    right: 0px;
    font-size: 0.9em;
    z-index: 10;
    color: rgb(180, 180, 180);
    transition: none 0s ease 0s;
    pointer-events: none;
}

.custom-dropdown label {
    font-family: var(--IBM-regular);
    color: rgb(122, 122, 122);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 1.4em;
    padding: 22px 26px;
    margin-bottom: 10px;
}

.custom-dropdown.active::after {
    visibility: hidden;
}

.custom-dropdown.active input[type="radio"]:checked+label {
    color: rgb(0, 0, 0);
}

.custom-dropdown.active input[type="radio"]:checked+label:hover {
    color: rgb(255, 255, 255);
}

.custom-dropdown.active label:hover {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}

.custom-dropdown.active+[id="customBackground"] {
    filter: blur(3px);
}

.custom-dropdown.active+[id="customBackground"]::after {
    visibility: visible;
    opacity: 0.5;
}

.otherservices.aos-init.aos-animate {
    width: 100%;
}

.faqs .faqs-search {
    width: 100%;
    background-color: rgb(240, 240, 240);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.faqs .faqs-search input {
    width: 90%;
    padding: 2rem 1rem;
    border: none;
    font-size: 1rem;
    background: url("/themes/uoj_theme/media/Icon feather-search-alt.svg") 1rem center / 1.6rem no-repeat white;
}

.faqs.ES-material:not(.gray-bg) .faq-group {
    margin-top: var(--spacing-5xl);
}

.faqs .faq-group {
    height: auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4xl);
}

.faqs .faq-group .faq-item {
    height: fit-content;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xl);
    border-top: 1px solid var(--border-neutral-primary);
    gap: var(--spacing-xl);
    transition: all 0.3s ease;
}

.faqs .faq-group .faq-item .expand {
    display: flex;
    align-items: center;
    transform: rotate(0);
    transition: all 0.3s ease 0s;
}


.faqs .faq-group .faq-item .header.expanded .expand {
    transform: rotate(180deg);
}

.faqs .faq-group .faq-item .header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    align-items: center;
}

.faqs .faq-group .faq-item .header .faq-title {
    font-size: var(--text-md);
    color: var(--text-default);
    font-family: var(--IBM-sb);
}

.faqs .faq-group .faq-item .faq-parent {
    font-family: var(--IBM-sb);
    transition: all 0.3s ease-in-out;
    padding: 0;
}

.faqs .faq-group .faq-item .faq-details {
    padding: 0;
    margin: var(--spacing-xl) 0;
    font-family: var(--IBM-regular);
    color: var(--text-default);
    position: relative;
    font-size: var(--text-md);
    line-height: 24px;
    width: 100%;
}
.faqs .faq-group .faq-item .collapse .toggle {
    margin-left: var(--spacing-md);
    transform: rotate(90deg);
    height: fit-content;
    transition: all 0.3s ease 0s;
}
.faqs .faq-group .faq-item .faq-subheader {
    display: flex;
    transition: all 0.3s ease;
    font-size: var(--text-md);
    color: var(--text-default);
    font-family: var(--IBM-sb);
}

.faqs .faq-group .faq-item .faq-subheader:hover {
    color: var(--link-primary-hovered);
    cursor: pointer;
}

.faqs .faq-group .faq-item .faq-subheader.toggled .toggle {
    transform: rotate(0deg);
    height: fit-content;
    transform-origin: center;
}

.faqs .be-in-contact a:hover {
    text-decoration: none;
}

.faqs .be-in-contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    padding: 0;
}

.faqs .be-in-contact .main-desc {
    font-size: var(--text-lg);
    font-family: var(--IBM-sb);
}

.faqs .be-in-contact .secondary-desc {
    font-size: var(--text-md);
    color: var(--text-default);
    line-height: 24px;
    gap: var(--spacing-md);
}
.faqs .be-in-contact .secondary-desc:empty{
    display:none;
}
.faqs .be-in-contact .secondary-desc a {
    color: var(--link-primary);
    transition: all 0.3s ease 0s;
}

.faqs .be-in-contact .secondary-desc a:hover {
    color: var(--link-primary-hover);
}

hr.faq {
    margin: 2rem 0 1.5rem;
}

.faqs .be-in-contact .main-desc span>a {
    transition: all 0.3s ease 0s;
    font-family: var(--IBM-sb);
}

.contact-us {
    background-image: url("/themes/uoj_theme/media/Repeat Grid 9.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center top;
}

/* FIRST BRANCHES SECTION START */
.contact-us .branches:nth-child(1) .col-lg-6:nth-child(2) .card-title {
    color: var(--navy-blue-color);
}



.contact-us .branches .col-lg-6 .card-footer .icon:hover ellipse {
    opacity: 1;
}

.contact-us .branches .col-lg-6 .card-footer .icon path {
    stroke: var(--border-primary);
}

.contact-us .branches .col-lg-6:nth-child(2) .card-footer .icon:hover path {
    stroke: white;
}

.contact-us .branches .col-lg-6 .card-footer .icon #Path_1667,
.contact-us .branches .col-lg-6 .card-footer .icon #Path_1668,
.contact-us .branches .col-lg-6 .card-footer .icon #Path_1669,
.contact-us .branches .col-lg-6 .card-footer .icon #Path_1736 {
    fill: var(--border-primary);
    stroke: none;
}


.contact-us .branches .col-lg-6 .card-footer .icon ellipse {
    transition: all .3s ease-in-out;
    fill: var(--border-primary);
    opacity: .1;
}

.agency .be-in-contact {
    margin-bottom: 0;
    background-color: white;
    padding: 2rem 1rem;
}

/* SECOND BRANCHE - SECOND CARD START */
.contact-us .branches .col-lg-6 .card-footer .icon:hover #Path_1667,
.contact-us .branches .col-lg-6 .card-footer .icon:hover #Path_1668,
.contact-us .branches .col-lg-6 .card-footer .icon:hover #Path_1669,
.contact-us .branches .col-lg-6 .card-footer .icon:hover #Path_1736 {
    fill: white;
}

/* SECOND BRANCHE - SECOND CARD END */
.contact-us .branches .col-lg-6 .card-footer .icon:hover path {
    stroke: white;
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon:hover path {
    stroke: white;
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon:hover #Path_1667,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon:hover #Path_1668,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon:hover #Path_1669,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(1) .card-footer .icon:hover #Path_1736 {
    fill: white;
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon:hover path {
    stroke: white;
}

.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1667,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1668,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1669,
.contact-us .branches:nth-child(3) .col-lg-6:nth-child(2) .card-footer .icon:hover #Path_1736 {
    fill: white;
}


.contact-us .branches .col-lg-6 .card .pattern ellipse {
    fill: var(--border-primary)
}

.contact-us .services {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.contact-us .services .service {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
    padding: 0 0 2rem 0;
    border-bottom: 1px solid #dfdfdf
}

.contact-us .services .service:last-child {
    border-bottom: none;
    padding: 0;
}

.contact-us .branches .card .card-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-us .services .service:nth-child(3) {
    border-left: none;
}

.contact-us .services .service .description {
    color: var(--text-default);
    width: 88%;
    line-height: 24px;
    font-size: var(--text-md);
    text-align: center;
}

.contact-us .services .service a.start {
    color: var(--link-primary);
    text-decoration: underline;
    cursor: pointer;
    margin-top: 1rem;
    transition: all 0.3s ease 0s;
}

.contact-us .contact-infos {
    background-color: rgb(250, 250, 250);
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    color: rgb(104, 104, 104);
    font-size: 1.1rem;
    padding-bottom: 0;
    padding-top: 0;
}

.contact-us .contact-infos .phone,
.contact-us .contact-infos .email,
.contact-us .contact-infos .fax {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
    font-size: var(--text-md);
    color: var(--text-default);
    justify-content: flex-end;
    background-color: white;
    padding: 1rem 1.5rem;
}

.contact-us .contact-infos .email,
.contact-us .contact-infos .phone {
    border-bottom: 1px solid rgb(213, 213, 213);
}

.contact-us .contact-infos .phone img,
.contact-us .contact-infos .email img,
.contact-us .contact-infos .fax img {
    margin-left: 1rem;
    height: 1.5rem;
}

.contact-us .contact-infos .fax {
    position: relative;
    padding: 0.85rem 1.9rem;
}

.contact-us .contact-infos .phone span,
.contact-us .contact-infos .fax span {
    direction: ltr;
}

.contact-us .map {
    background-color: rgb(227, 227, 227);
    height: 55vh;
    width: 100%;
    z-index: 1;
}

.contact-us .map-container {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
}

.contact-us .map-container .zoom-controls {
    position: absolute;
    bottom: 5rem;
    right: 2rem;
    z-index: 2;
}

.contact-us .map-container .print {
    position: absolute;
    bottom: 2.5rem;
    right: 2rem;
    z-index: 2;
    background-color: white;
    border: 1px solid rgba(192, 192, 192, 0.42);
    height: 3rem;
    width: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease 0s;
}

.contact-us .map-container .print:hover {
    background-color: rgb(226, 226, 226);
}

.contact-us .map-container .zoom-controls .zoom-in,
.contact-us .map-container .zoom-controls .zoom-out {
    width: 2.5rem;
    height: 2.5rem;
    background-color: white;
    border: 1px solid rgba(192, 192, 192, 0.42);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease 0s;
    cursor: pointer;
}

.contact-us .map-container .zoom-controls .zoom-in {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.contact-us .map-container .zoom-controls .zoom-out {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.contact-us .map-container .zoom-controls .zoom-in:hover,
.contact-us .map-container .zoom-controls .zoom-out:hover {
    background-color: rgb(226, 226, 226);
}

.contact-us .branches-otherservices {
    background-color: rgb(250, 250, 250);
    flex-wrap: wrap;
}

.branches-otherservices .col-lg-6 {
    padding: 0;
}

.contact-us .branches-otherservices .branches .contents {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.contact-us .branches-otherservices .branches .contents.card-columns {
    column-count: 1;
}

.contact-us .branches-otherservices .otherservices .contents.card-columns {
    column-count: 1;
}

.contact-us .branches-otherservices .branches .item {
    background-color: white;
    padding: 1.8rem 2rem;
    margin-bottom: 3.5rem;
    height: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.contact-us .branches-otherservices .branches .item .pattern {
    position: absolute;
    top: 1rem;
    left: 0rem;
}

.contact-us .branches-otherservices .branches .item img,
.contact-us .branches-otherservices .otherservices .item img {
    height: 2.5rem;
    width: fit-content;
}

.contact-us .branches-otherservices .branches .item .details,
.contact-us .branches-otherservices .otherservices .item .details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-us .branches-otherservices .branches .card:last-child .item .details .identification {
    color: var(--green-color);
}

.contact-us .branches-otherservices .branches .item .details .identification {
    color: var(--blue-color);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-family: var(--IBM-sb);
}

.contact-us .branches-otherservices .branches .item .details .number,
.contact-us .branches-otherservices .otherservices .item .details .number {
    font-size: 1.8rem;
    color: rgb(104, 104, 104);
}

.contact-us .branches-otherservices .otherservices .item .pattern {
    position: absolute;
    top: 1rem;
    left: 0px;
}

.contact-us .branches-otherservices .otherservices {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

.contact-us .branches-otherservices .otherservices .item {
    background-color: white;
    padding: 1.8rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.contact-us .branches-otherservices .otherservices .item .details .identification {
    color: var(--orange-color);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-family: var(--IBM-sb);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(1) {
    border-bottom: 0.5rem solid var(--orange-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(1) .item .pattern ellipse {
    fill: var(--orange-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(1) .item .pattern path {
    stroke: var(--orange-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(2) {
    border-bottom: 0.5rem solid var(--red-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(2) .item .identification {
    color: var(--red-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(2) .pattern ellipse {
    fill: var(--red-color);
}

.contact-us .branches-otherservices .card:nth-child(2) .item .pattern path {
    stroke: var(--red-color);
}

.contact-us .branches-otherservices .otherservices .card .item {
    background-color: white;
    padding: 1.8rem 2rem;
    height: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.contact-us .branches-otherservices .otherservices .card,
.contact-us .branches-otherservices .branches .card {
    border: none;
    border-radius: 0px;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-background-neutral);
    border-radius: var(--radius-md);
}

.contact-us .branches-otherservices .otherservices .card:last-child {
    border-bottom: 0.5rem solid var(--purple-color);
    margin-bottom: 0px;
}

.contact-us .branches-otherservices .otherservices .card:nth-child(3) {
    border-bottom: 0.5rem solid var(--mint-green-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(3) .item .details .identification {
    color: var(--mint-green-color);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-family: var(--IBM-sb);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(3) .item .pattern ellipse {
    fill: var(--mint-green-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(3) .item .pattern path {
    stroke: var(--mint-green-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(4) .item .identification {
    color: var(--purple-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(4) .item .pattern ellipse {
    fill: var(--purple-color);
}

.contact-us .branches-otherservices .otherservices .card:nth-child(4) .item .pattern path {
    stroke: var(--purple-color);
}

.contact-us .map-container .leaflet-popup {
    height: 5rem;
}

.contact-us .map-container .leaflet-popup-content {
    min-width: 20rem;
    width: 100%;
}

.contact-us .map-container .leaflet-popup-content-wrapper,
.contact-us .map-container .leaflet-popup-tip {
    height: 100%;
    border-radius: 0;
}

.contact-us .map-container .leaflet-popup-content .location-name {
    text-align: right;
}

.contact-us .map-container .leaflet-popup-content .location-details {
    height: 4rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.3rem 1rem 0;
}

.contact-us .map-container .leaflet-popup-close-button {
    position: absolute;
    top: -0.3rem !important;
    left: 0.2rem !important;
}

.contact-us .map-container .leaflet-popup-close-button span {
    font-size: 1.4rem;
    color: black;
}

.contact-us .map-container .leaflet-popup-content .location-directions {
    height: 2.3rem;
    width: 2.3rem;
    border-right: 1px solid lightgrey;
    padding-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.contact-us .map-container .leaflet-popup-content .location-directions img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.menu {
    display: none;
}

.topnav a {
    display: flex;
    align-items: center;
}

.topnav .links {
    display: none;
}

.topnav.mobile .right-lnk .logo-container div:first-child svg>g>path {
    fill: var(--blue-color);
}

.topnav.mobile .menu-mobile-icon svg>path,
.sub .topnav .menu-mobile-icon svg>path {
    fill: var(--black-color);
}

.topnav.mobile .search svg>g>path,
.sub .topnav .search svg>g>path {
    stroke: var(--black-color);
}

.topnav.mobile .vertical-line {
    background-color: grey;
}

.error_newsletter {
    min-height: 2rem;
    margin-top: 1rem;
    color: red;
    display: none;
}
.col-lg-6.column-1 {
    padding-right: 0px;
}

.col-lg-6.column-2 {
    padding-left: 0px;
}

.pattern-image .row {
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.story .uj-container {
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;
    gap: var(--spacing-24);
}

.story .image-container {
    height: 15rem;
    position: relative;
    margin-bottom: 2rem;
}

.uni-values .column {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.uni-values .column .val-content .content {
    color: var(--text-default);
}

.uni-values .column .val-content .num {
    background-color: var(--border-primary);
    color: white;
    padding: 0rem 0.5rem;
    border-right: 10px solid var(--border-success);
    margin-left: 1rem;
    border-radius: var(--radius-md);
}

.story.uoj .image-container img {
    object-fit: contain;
}

.story .image-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top;
}

.story .image-container video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.all-news-container .card-columns {
    column-gap: unset;
}

.all-news-container .card-columns .col-lg-4 .card .date {
    color: white;
    font-family: var(--IBM-sb);
    font-size: 3rem;
    margin: -1rem 0rem 0rem 0.5rem;
    text-align: left;
}

.all-news-container .card-columns .col-lg-4 .card .date .information {
    font-size: 1.3rem;
    color: rgb(240, 240, 240);
    font-family: var(--IBM-regular);
}

.all-news-container .topic::before {
    top: -0.2rem;
    right: 0px;
    position: relative;
    content: "";
    display: inline-block;
    margin: 0px 0px 0px 0.5rem;
    transition: all 0.2s ease 0s;
    height: 1px;
    width: 2rem;
    background-color: var(--blue-color);
}

.all-news-container .card .img-container::after {
    background-color: rgba(0, 0, 0, 0.5);
}

.our-story .title {
    font-size: var(--display-sm);
    font-family: var(--IBM-b);
    color: var(--text-default);
    margin-bottom: var(--spacing-xl);
}

.our-story .subtitle {
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-6);
    font-family: var(--IBM-sb);
}

.our-story .description {
    font-size: var(--text-md);
    color: var(--text-default);
    line-height: 24px;
    text-align: justify;
}

.about-swiper {
    overflow: hidden;
}

.about-swiper .swiper-wrapper .swiper-slide {
    display: flex;
    flex-direction: column;
    height: fit-content;
}

.about-swiper .swiper-wrapper .swiper-slide .card {
    border: 1px solid var(--border-neutral-primary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: white;
    height: 9rem;
    margin-bottom: 2rem;
    border-radius: var(--radius-lg);
}

.about-swiper .swiper-wrapper .swiper-slide .card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.about-swiper .swiper-wrapper .swiper-slide .card .card-body .content .subt {
    color: var(--text-display);
    font-size: var(--text-md);
    line-height: 24px;
}

.about-swiper .swiper-wrapper .swiper-slide .card .card-body .number {
    font-size: 2.5rem;
}

.image-viewer {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.particles-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.particles-container {
    height: 62vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
}

.goals .card-text,
.goals .card-title,
.volunteering .volunteer-tiles .card .card-title {
    width: 95%;
    font-size: var(--text-lg);
    font-family: var(--ibmbold);
}

.volunteering .tab-pane {
    width: 100% !important;
}

.volunteering .nav-tabs .nav-item.slick-current.slick-active .nav-link {
    background-color: white;
}

.goals-container {
    background-color: var(--background-body);
    width: 100%;
    height: auto;
    background-size: cover;
}
.goals li,
.volunteering .volunteer-tiles .card .card-text li,
.Deanship-agencies .agencies-tiles .card .card-text li {
    line-height: 24px;
    font-size: var(--text-md);
    color: var(--text-default);
    padding: 0 var(--spacing-xl) 0 0;
    margin-right: var(--spacing-md);
    list-style-type: none;
    position: relative;
    width: fit-content;
    text-align: right;
}

.goals li:last-child,
.volunteering .volunteer-tiles .card .card-body .card-text li:last-child,
.Deanship-agencies .agencies-tiles .card .card-body .card-text li:last-child {
    margin-bottom: 0;
}

.achievements .swiper {
    display: flex;
    height: 40rem;
}

.values {
    background-color: white;
}

.values .uj-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
}

.uni-values {
    padding: 2.5rem 0;
    font-size: 1.2rem;
}

.uni-values .column .val-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: var(--display-md);
    margin-bottom: 1.5rem;
    min-width: 9rem;
}

.about-swiper {
    max-height: 70rem;
    height: fit-content !important;
    z-index: 0;
    position: relative !important;
}
.plan .more-news {
    display: flex;
    color: white;
    background-color: var(--button-background-primary-default);
    padding: var(--spacing-0) var(--buttons-lg-padding);
    height: 40px;
    float: left;
    left: 0;
    position: absolute;
    bottom: 0;
    text-decoration: none;
    transition: all 0.3s ease-in-out 0s;
    border: none;
    font-size: var(--text-md);
    font-family: var(--IBM-sb);
    align-items: center;
    justify-content: center;
    gap: var(--buttons-lg-gap);
    border-bottom-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    flex-direction: row-reverse;
}

.plan .more-news:hover {
    background-color: var(--button-background-primary-hovered);
}

.plan .more-news::after {
    content: "";
    position: relative;
    background-image: url("/themes/uoj_theme/media/pdf.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 1.5rem;
    width: 1.1rem;
    display: block;
}

.plan .more-news.newclass::after {
    background-image: url("/themes/uoj_theme/media/clickHere.svg");
    transform: scaleX(-1);
    height: 1.5rem;
    width: 1.5rem;
}

.goals .card-text ul,
.volunteering .volunteer-tiles .card .card-text ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.achievements {
    background: url("/themes/uoj_theme/media/Intersection 2.jpg");
}

.achievements .nav-pills,
.news-advertisements .nav-pills {
    flex-wrap: nowrap;
}

.about-swiper-section {
    position: relative;
    margin-top: 3rem;
    background: var(--background);
}
.pattern-image .row .patt {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .7rem 15px;
    border-bottom: 1px solid #c0c0c0ab;
}

.pattern-image .row.six .patt:last-child {
    border-bottom: unset;
}

.pattern-image .row .patt .txt {
    font-size: var(--text-md);
    margin: 0 1.5rem 0;
    width: 27rem;
}

.details-panel {
    transform: translateX(-100%);
    width: 100%;
    height: 100vh;
    background-color: white;
}

.details-panel .side-panel {
    overflow-y: auto;
}

#DepartmentsFilterDropdown {
    transform: none !important;
    overflow-y: scroll;
    max-height: 20rem;
    width: fit-content;
    text-align: right;
    top: 3.4rem !important;
}

.details-panel .title {
    font-size: var(--text-xl);
    padding: 1rem 2rem 1rem;
    line-height: 2;
    font-family: var(--IBM-b);
}

.care-tiles.uni-files .download-file {
    display: flex;
    position: absolute;
    top: 0;
    font-size: 1.3rem;
    left: 0;
    font-family: var(--IBM-sb);
    color: #797979;
    padding: 1rem 1.8rem;
    background-color: #FAFAFA;
    border-bottom: 1px solid #E3E3E3;
    border-right: 1px solid #e3e3e3;
    width: 5rem;
    transition: width .3s;
    height: auto;
    align-items: center;
}

.care-tiles.uni-files .download-file:hover {
    width: 12rem;
}

.care-tiles.uni-files .download-file span {
    position: absolute;
    left: .5rem;
    opacity: 0;
    pointer-events: none;
}

.care-tiles.uni-files .download-file:hover span {
    opacity: 1;
    left: 1.5rem;
    transition: all ease-in-out .3s;
}

.care-tiles.uni-files .download-file .icon svg {
    width: 1.6rem;
    height: 1.6rem;
}

.care-tiles.uni-files .col-lg-4:nth-child(6n+1) .card .download-file .icon svg path {
    stroke: var(--blue-color);
}

.care-tiles.uni-files .col-lg-4:nth-child(6n+2) .card .download-file .icon svg path {
    stroke: var(--green-color);
}

.care-tiles.uni-files .col-lg-4:nth-child(6n+3) .card .download-file .icon svg path {
    stroke: var(--orange-color);
}

.care-tiles.uni-files .col-lg-4:nth-child(6n+4) .card .download-file .icon svg path {
    stroke: var(--purple-color);
}

.care-tiles.uni-files .col-lg-4:nth-child(6n+5) .card .download-file .icon svg path {
    stroke: var(--red-color);
}

.care-tiles.uni-files .col-lg-4:nth-child(6n+6) .card .download-file .icon svg path {
    stroke: var(--navy-blue-color);
}

label.js-form-required {
    margin-bottom: .5rem;
}

#edit-name--description,
#edit-pass--description {
    margin-top: .8rem;
    color: #828282;
    font-size: .95rem;
}

.form-actions.js-form-wrapper.form-wrapper {
    width: 100%;
}

.login-container input {
    border: 1px solid #bfbfbf;
    padding: 0.4rem;
}

.left-section form.user-login-form .submit-button {
    background-color: var(--blue-color);
    outline: none;
    border: none;
    color: white;
    font-family: var(--IBM-regular);
    padding: 0.8rem 2.5rem;
    width: fit-content;
    margin-top: 0.5rem;
    transition: .3s all ease;
}

.left-section form.user-login-form .submit-button:hover {
    background-color: var(--blue-color-hover);
    outline: none;
    border: none;
    color: white;
    font-family: var(--IBM-regular);
    padding: 0.8rem 2.5rem;
    width: fit-content;
    margin-top: 0.5rem;
    transition: .3s all ease;
}

.drupal-login .left-section {
    display: flex;
    align-items: center;
}

.login .left-section {
    margin-top: unset;
}

.login .right-section {
    top: 0;
}

.details-panel .description {
    font-size: var(--text-md);
    padding: 0rem 2rem;
    line-height: 24px;
    text-wrap: wrap;
    word-wrap: break-word;
}

.details-panel .close {
    position: absolute;
    top: 1.5rem;
    z-index: 99;
    left: 1.5rem;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
}

.details-panel .accordion-group {
    margin-top: 1rem;
}

.details-panel .accordion-group .accordion-container div:nth-child(2) {
    margin-bottom: 1.2rem;
    padding: 0 2rem;
}

.details-panel .accordion-group .accordion-container .accordion-content ul li {
    position: relative;
    color: var(--txt-color);
    line-height: 3;
}

.sec-layer .accordion-group .accordion-container {
    margin-bottom: 0;
}

.accordion-group .ranking-items-div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.details-panel .accordion-group .ranking-items-div .accordion-content {
    color: var(--txt-color);
}

.details-panel .accordion-group .ranking-items-div .accordion-content p {
    margin: 0;
    padding: 0;
}

.details-panel .accordion-group .ranking-items-div span:first-child {
    margin-left: .5rem;
}

.details-panel .accordion-group .ranking-items-div {
    padding: 0 !important;
}

.details-panel .accordion-group .ranking-items-div:not(:last-child) {
    margin-bottom: .5rem;
}

.details-panel .accordion-group .accordion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 1.2rem 2rem;
    border-top: 1px solid #e5e5e5;
    margin: 0;
}

.details-panel .accordion-group .accordion:last-child {
    border-bottom: 1px solid lightgray;
}

.details-panel .accordion-group .accordion-content p {
    padding: 0 1rem;
    line-height: 2;
    margin: 0;
}

.details-panel .accordion-group .accordion-content ul {
    padding-right: 2rem;
}

.details-panel .accordion-group .accordion span {
    font-size: var(--text-md);
    font-family: var(--IBM-sb);
}

.details-panel .tabs {
    padding: 0 1rem;
}

.details-panel .tabs .program-title {
    font-size: 1.1rem;
    margin-right: 1rem;
    margin-bottom: 1.5rem;
}

.details-panel .accordion-group .accordion svg {
    border-radius: 100%;
    background-color: var(--blue-color);
    stroke-width: 3;
    transition: all 0.3s ease-in-out 0s;
}

.details-panel .accordion-group .accordion svg g {
    position: relative;
    bottom: 0.5rem;
}

.details-panel .accordion-group .accordion svg {
    transform: rotate(-90deg);
}

.details-panel .accordion-group .accordion[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

.departments .cards-section,
.f-services .cards-section {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    gap: var(--spacing-xl);
    margin: 3rem 0;
}

.f-services .cards-section .col-lg-4 {
    padding: 0 !important;
}

.departments .bg-light-gray,
.f-services .bg-light-gray {
    padding-top: 3rem;
}

.departments .cards-section .col-lg-4.col-md-6 {
    padding: 0px;
}

.departments .cards-section a,
.f-services .cards-section a {
    width: fit-content;
}

.departments .cards-section .card::after {
    content: "";
    position: absolute;
    inset: 0px;
    z-index: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.47) 50%, rgba(0, 0, 0, 0.47) 50%, rgba(0, 0, 0, 0.47) 50%, rgba(0, 0, 0, 0.47) 50%);
}

.departments .input-group-append,
.f-services .input-group-append {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--blue-color);
    padding: 1rem 2rem;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.departments .input-group-append:hover,
.f-services .input-group-append:hover {
    background-color: var(--blue-color-hover);
}

.departments .dept-search,
.f-services .dept-search {
    border-radius: 0px;
    border: none;
    background-color: transparent;
    font-size: 1.1rem;
    color: white;
    padding: 0px;
    margin-left: 0.5rem;
    display: none;
}

.departments .input-group,
.f-services .input-group {
    margin-bottom: 6rem;
}

.departments input.form-control,
.f-services input.form-control {
    padding: 1rem;
    height: 100%;
    border-radius: 0px;
    border: none;
}

.departments .cards-section .card {
    height: 12rem;
    overflow: hidden;
    cursor: pointer;
}

.departments .cards-section .card .card-img-overlay {
    z-index: 1;
}

.f-services .cards-section .card {
    width: 100%;
}

.departments .cards-section .col-lg-4 .card {
    border-bottom: 10px solid var(--border-primary);
}

.departments .cards-section .col-lg-4 .card svg g,
.f-services .cards-section .col-lg-4 .card svg g {
    stroke: var(--border-primary);
}

.departments .cards-section .col-lg-4 .card svg path,
.f-services .cards-section .col-lg-4 .card svg path {
    fill: var(--border-primary);
}

.departments .card .card-img-top {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: all 0.6s ease-in-out 0s;
}

.departments .card .card-img-overlay .card-title,
.f-services .card .card-img-overlay .card-title {
    background-color: white;
    align-items: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    margin: 0px;
    padding: .8rem 1rem;
    font-size: .9rem;
}

.departments .card .card-img-overlay .card-title svg,
.f-services .card .card-img-overlay .card-title svg {
    display: none;
}

.departments .card .card-img-overlay .card-title span,
.f-services .card .card-img-overlay .card-title span {
    margin-left: 0.5rem;
    color: var(--black-color);
}

.departments .cards-section .card .logo,
.f-services .cards-section .card .logo {
    height: 2.8rem;
    width: 2.8rem;
}

.departments .cards-section .card .logo img,
.f-services .cards-section .card .logo img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.borderless {
    border: none;
    border-radius: 0px;
}

.service.col-md-4 .image {
    margin-bottom: .8rem;
    width: 8rem;
}

.service.col-md-4 .image img {
    height: 100%;
    width: 100%;
    object-fit: scale-down;
}

.data-tiles.container {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--background);
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.data-tiles .col-lg-3 .pattern,
.about-swiper .pattern,
.goals-container .pattern,
.volunteering .volunteer-tiles .col-lg-6 .card .pattern,
.deanship-agencies .agencies-tiles .col-lg-6 .card .pattern,
.contact-zone .col-lg-6 .card .pattern {
    position: absolute;
    top: .7rem;
    left: 5.25rem;
    width: 1.3rem;
    height: 1.3rem;
}

.data-tiles .col-lg-3 .pattern svg,
.about-swiper .pattern svg,
.goals-container .pattern svg,
.contact-zone .col-lg-6 .card .pattern svg {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.data-tiles .col-lg-3 .card {
    border: none;
    min-height: 16rem;
    height: 100%;
    position: relative;
    border-radius: 0px;
}

.data-tiles .col-lg-3 {
    margin-bottom: 2rem;
}

.data-tiles .col-lg-3.col-md-6 {
    padding: 0px;
}

.data-tiles .col-lg-3 .card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.data-tiles .col-lg-3 .card .card-body .info .card-title {
    color: var(--txt-color);
    font-size: 1.1rem;
}

.data-tiles .col-lg-3 .card .card-body .info .value,
.about-swiper .swiper-slide .card .value {
    color: var(--text-primary-sa-flag);
    font-size: var(--display-lg);
    line-height: 60px;
}

#chartdiv {
    width: 100%;
    height: 700px;
}

g[aria-labelledby="id-66-title"] {
    display: none;
}

#chart_div {
    width: 100%;
    height: 300px;
}

#chart_div svg>rect {
    fill: transparent
}

.bar-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bar-chart h1.section-title,
.bar-chart p.description {
    text-align: center;
}

.events-side-menu .close {
    position: absolute;
    top: 1.7rem;
    left: 1.7rem;
}

.events-side-menu.toggled {
    pointer-events: all;
}

.events-side-menu .menu-container {
    background-color: #F4F4F4;
    width: 100vw;
    float: left;
    height: 100%;
    overflow-y: auto;
}

.events-side-menu .menu-label {
    padding: var(--spacing-5xl);
    background-color: #074D31;
    color: white;
    font-size: var(--display-xs);
    font-family: var(--IBM-b);
    text-align: start;
    width: 100%;
}

.events-side-menu .events .month-container:not(:first-child) {
    margin-top: 3rem;
}

.show-calendar-page a {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-neutral-primary);
    padding: var(--spacing-0) var(--buttons-lg-padding);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-20);
    height: 50px;
    color: var(--text-default);
    font-weight: var(--IBM-sb);
    width: 100%;
}

.events-side-menu .events .month-container .desc {
    font-size: 1.2rem;
}

.events-side-menu .events {
    display: flex;
    padding: 2rem 1rem;
    width: 100%;
    flex-direction: column;
    color: rgb(88, 88, 88);
}

.number-of-days-left {
    background-color: #f4f9f5;
    border: 1px solid #3b4f44;
    border-radius: var(--radius-full);
    padding: var(--spacing-xs) var(--spacing-3xl)
}

.number-of-days-left span {
    color: #3b4f44;
    font-size: var(--text-sm);
    font-family: var(--IBM-sb);
}

.events-side-menu .events .item {
    width: 100%;
    height: 100%;
    margin-top: 1.5rem;
    border: 1px solid var(--border-neutral-primary);
    background-color: var(--background-card);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
}

.time svg rect,
.location svg path {
    fill: var(--button-background-primary-default);
}

.time svg g:first-child,
.location svg path {
    stroke: var(--button-background-primary-default);
}

.events-side-menu .events .item .event-date {
    display: flex;
    font-size: 2rem;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-lg);
    color: var(--text-primary);
    font-family: var(--IBM-b);
    border: 1px solid var(--border-neutral-primary);
    border-radius: var(--radius-md);
    background: linear-gradient(211deg, rgba(217, 217, 217, 0) 1.37%, rgba(217, 217, 217, 0.2) 96.69%);
}

.events-side-menu .events .item .event-date .month {
    margin-top: -0.5rem;
    font-size: var(--text-md);
    font-family: var(--ibmmedium);
    color: var(--text-default);
    font-weight: 500;
}

.events-side-menu .events .item .content {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    gap: var(--card-lg-gap);
}

.events-side-menu .events .item .content .detail {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--spacing-xl);
    color: rgb(155, 155, 155);
    align-items: flex-start;
}

.events-side-menu .events .item .content .detail .name {
    color: var(--text-display);
    font-size: var(--text-md);
    font-family: var(--IBM-b);
}

.events-side-menu .events .item .content .detail .time-location .time {
    display: flex;
    flex-direction: row-reverse;
    font-size: 0.9rem;
}

.events-side-menu .events .item .content .detail .time-location .location {
    display: flex;
    flex-direction: row-reverse;
    font-size: 0.9rem;
    justify-content: flex-end;
    margin-top: .5rem;
}

.events-side-menu .events .item .content .detail .time-location .location .icon,
.events-side-menu .events .item .content .detail .time-location .time .icon {
    display: flex;
    align-items: center;
    margin-left: 0.5rem;
}

.swiper-slide .gridItems {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: -webkit-fill-available;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.swiper-slide .gridItems .card-img-top {
    min-height: fit-content;
}

.swiper-slide .grid-item {
    width: 100%;
}

.swiper-slide .grid-item:nth-child(3) .card,
.swiper-slide .grid-item:first-child .card {
    height: 32.4rem;
}

.swiper-slide .grid-item .card-img-top img,
.swiper-slide .grid-item .card-img-top {
    height: 100%;
    width: 100%;
    transition: all 0.6s ease-in-out 0s;
    object-fit: cover;
    object-position: center top;
}

.swiper-slide .gridItems .grid-item .card .card-img-top::after {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 12rem;
    width: 100%;
    content: "";
    background-image: linear-gradient(0deg, rgb(0, 0, 0), rgb(255 0 0 / 0%));
}

.swiper-slide .gridItems .grid-item .card {
    height: 11rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.swiper-slide .gridItems .card-img-overlay {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.swiper-slide .gridItems .card-img-overlay .card-title {
    color: white;
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.swiper-slide .gridItems .card-img-overlay .icon {
    height: 1.8rem;
    width: 1.8rem;
}

.swiper-slide .gridItems .card-img-overlay .icon img {
    height: 100%;
    width: 100%;
}

.available-programs {
    background-color: var(--background-neutral-50);
    position: relative;
    overflow: hidden;
    padding: 0 0 1rem;
    min-height: 64rem;
}

.available-prog-swiper .swiper-pagination-bullet,
.competitions .swiper-pagination-bullet {
    border: 1px solid white !important;
}

.available-prog-swiper.swiper-pagination-bullet.swiper-pagination-bullet-active {
    border: 1px solid white !important;
}

.available-programs .read-more {
    color: white;
    padding: 0px 6rem;
    margin: 0rem 0rem 2rem;
}

.available-programs .section-title {
    text-align: center;
    font-size: 3.4rem;
    color: white;
}

.available-prog-swiper {
    height: 100% !important;
}

.enrollment.swiper {
    height: 50vh;
    width: 100%;
}

.enrollment.swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.enrollment.swiper img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.enrollment.swiper .swiper-slide .content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.enrollment.swiper .swiper-slide .title {
    font-size: 2rem;
    color: white;
}

.enrollment.swiper .swiper-slide::after {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    content: "";
    background-color: rgba(0, 0, 0, 0.5);
}

.appointments {
    background-color: var(--background);
    padding: 0 15px;
}

.appointments .accordion {
    margin: 2rem 0 3rem;
}

.accordion {
    margin: 50px auto;
}

.accordion ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
}

.accordion ul li {
    position: relative;
    transition: all 500ms ease 0s !important;
    display: flex;
    margin: 0.5rem 0;
    background-color: white;
    cursor: pointer;
}

.accordion ul li:first-child {
    margin-right: 0px;
}

.accordion ul li:last-child {
    margin-left: 0px;
}

.accordion .season-header .title {
    font-size: 1.6rem;
    margin-top: 1rem;
    font-family: var(--IBM-sb);
    text-align: center;
}

.accordion ul li {
    border-bottom: 8px solid var(--border-primary);
}

.accordion ul li .season-title,
.accordion ul li .season-header .title {
    color: var(--border-primary);
}

.accordion ul li div.season-container {
    display: none;
    width: 100%;
    position: relative;
    padding: 15px 20px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-family: var(--IBM-regular);
    transition: all .3s ease-in-out 0s;
}

.season .pattern {
    position: absolute;
    left: 1.25rem;
    top: 1.25rem;
    display: none;
}

.accordion ul li div.season-container .body-container {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 400ms ease 0s;
    min-width: 100%;
}

.accordion ul li[aria-expanded="true"] {
    width: 100%;
}

.accordion li[aria-expanded="true"] .season-container.show {
    display: flex;
    flex-direction: column;
}

.accordion li[aria-expanded="true"] .season-title label {
    transform: rotate(0deg);
    align-items: start;
    justify-content: start;
    width: fit-content;
}

.accordion li[aria-expanded="true"] .season-container .body-container {
    opacity: 1;
    transform: translateX(0px);
}

.accordion ul li div.season-title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem;
}

.accordion ul li[aria-expanded="true"] div.season-title {
    display: none;
}

.accordion ul li .season-header .month-container {
    display: flex;
}

.accordion ul li div.season-title label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    white-space: nowrap;
    width: 100%;
}

.season-container .season-header {
    font-size: 1.4rem;
    font-family: var(--IBM-regular);
}

.season-container .season-body {
    font-family: var(--IBM-regular);
}

.season-container .season-body .header .date {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.accordion ul li .season-container .season-body .header .date {
    background-color: var(--background-primary-50);
    color: var(--text-primary);
    border-radius:var(--radius-sm);
    padding: 0.6rem;
}
.accordion ul li .season-container .season-body .header .date .from,
.accordion ul li .season-container .season-body .header .date .to {
    position: relative;
    display: flex;
    align-items: center;
}

.accordion ul li .date .from svg,
.accordion ul li .date .to svg {
    height: 1rem;
    width: 1rem;
    margin: 0px 0.6rem;
    display: none;
}

.accordion ul li .date .arrow {
    margin: 0px 0.6rem;
}

.accordion ul li .date .from svg path,
.accordion ul li .date .to svg path {
    stroke: var(--border-primary);
}

.accordion ul li .pattern ellipse,
.accordion ul li .arrow svg path {
    fill: var(--border-primary);
}

.season-title .pattern {
    left: 3rem;
}

.season-container .season-body .header .certificate {
    padding: 0.6rem 1.6rem;
    color: var(--text-default);
    background-color: var(--background-neutral-50);
    margin: 1rem 0;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.season-container .season-body .information {
    color: black;
    margin-top: 1rem;
    font-weight: 600;
    min-width: 100%;
    justify-content: start;
    align-items: start;
    text-align: center;
    line-height: 2;
}

.season-container .season-body .body-container {
    padding: 2.5rem 0px;
    border-bottom: 1px solid rgb(211, 209, 209);
}

.season-container .season-body .body-container:last-child {
    border-bottom: none;
    padding-bottom: 1rem;
}

.international-students {
    position: relative;
    height: 59.5vh;
}

.international-students img.card-img-top {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.international-students .card-img-overlay {
    background-color: white;
    height: fit-content;
    right: 15px;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    bottom: 15px;
    padding: 2rem 1.5rem;
}

.international-students .card-img-overlay .header .title {
    font-size: var(--display-sm);
    font-weight: 600;
    color: var(--text-default);
    margin-bottom: 1rem;
}

.international-students.opendt-apply .card-img-overlay .header .title {
    color: var(--light-green-color);
}

.international-students .pattern {
    position: absolute;
    top: 1rem;
    left: 2rem;
    display: none;
}

.international-students .pattern img {
    width: 5rem;
    height: 4rem;
}

.international-students .card-img-overlay .body {
    font-size: var(--text-md);
    color: var(--text-default);
}

.international-students .card-img-overlay .txt-container {
    max-height: 14rem;
    overflow-y: auto;
}

.international-students .card-img-overlay .footer a {
    background-color: var(--button-background-primary-default);
    color: white;
    width: fit-content;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.international-students .card-img-overlay .footer a:hover {
    background-color: var(--button-background-primary-hovered);
}

.international-students.opendt-apply .card-img-overlay .footer a {
    background-color: var(--light-green-color)
}

.steps-container {
    position: relative;
}

.svg-container {
    margin-top: 5rem;
}

.svg-container img {
    height: 100%;
    width: 100%;
    object-fit: fill;
    object-position: top;
}

.information {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.head {
    font-size: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.reports {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 2.5rem;
}

.reports .report {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.reports .report .description {
    width: 80%;
    text-align: center;
    color: var(--text-default);
    line-height: 24px;
    font-size: var(--text-md);
    margin-top: 1rem;
}

.reports .report .icon {
    padding: 1.5rem;
    max-width: 6rem;
    max-height: 6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tag-background-success-light);
}
.reports .report .icon i{
    font-size:2rem;
    color:var(--text-primary);
}
.reports .report .icon img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.security-report {
    padding: 0 15px;
}

.security-report .header .description {
    color: var(--text-default);
    width: 100%;
}
.tabular-view .nav-link .icon {
    height: 2rem;
    width: 2rem;
    margin-left: .5rem;
}

.tabular-view .nav-link .icon svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.tabular-view .tab-content {
    background-color: white;
}

.tabular-view .labels .incident-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--spacing-4xl);
    gap: var(--spacing-xl);
}

.tabular-view .labels .label {
    width: 100%;
    background-color: #f3f4f6;
    border-radius: var(--radius-full);
    margin: 0;
    padding: var(--spacing-none) var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
    height: 40px;
}

.tabular-view .labels .incident-details .label.active {
    background-color: var(--button-background-primary-default);
    color: white;
}

.tabular-view .labels .incident-details .label:hover:not(.active) {
    background-color: rgb(233 233 233);
}
.tabular-view .text-area{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-xl);
}
.tabular-view .case-description textarea {
    display: flex;
    flex-direction: column;
    width: 100%;
    outline: 0px;
    font-size: var(--text-md);
    padding: var(--spacing-md) var(--spacing-xl);
    border: 1px solid #9DA4AE;
    border-radius: var(--radius-sm);
}
.tabular-view .case-description .extent-of-influence {
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

.tabular-view .case-description .extent-of-influence .title {
    margin-bottom: var(--spacing-2xl);
    font-size: var(--text-xl);
}
.tabular-view .case-description .extent-of-influence .choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
}
.submit-buttons button.submit {
    color: white;
    background-color: var(--button-background-primary-default);
    transition: all 0.3s ease-in-out 0s;
}
.submit-buttons .reset:hover {
    color: var(--link-primary-hovered);
}

.tabular-view .submit-buttons .reset .icon {
    margin: 0px 0.5rem;
}

.tabular-view .nav li.slick-active.slick-current a.nav-link span {
    font-size: 1rem;
    color: var(--txt-color);
}

.tabular-view .nav li.slick-slide a.nav-link .icon {
    height: 1.5rem;
    width: 1.5rem;
    margin-left: 0.5rem;
    display: none;
}

.tabular-view .nav li.slick-slide a.nav-link .icon svg {
    height: 100%;
    width: 100%;
}

.tabular-view .nav li.slick-slide a.nav-link .icon svg path,
.tabular-view .nav li.slick-slide a.nav-link .icon svg line {
    stroke: var(--blue-color);
}

.tabular-view .tab-content .tab-pane textarea:focus {
    border-color: var(--blue-color);
}

.tabular-view .tab-content .tab-pane .submit-buttons .reset .icon svg path {
    fill: var(--link-primary);
}

.tabular-view .tab-content .tab-pane .submit-buttons .reset:hover .icon svg path {
    fill: var(--link-primary-hovered);
}
.tabular-view .nav li.slick-slide a.nav-link {
    border-radius: 0px;
    background-color: var(--tab-background-color);
    height: 4rem;
    margin: 0px 1rem;
    position: relative;
    padding: 1rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: grayscale(100%);
    font-size: 1rem;
}
.tabular-view .nav li:first-child a.nav-link::before {
    height: 1.6rem;
    width: 1.5rem;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-left: 0.7rem;
}

.tabular-view .nav li:nth-child(2) a.nav-link::before {
    background-image: url("/themes/uoj_theme/media/ic-security-unsecured.svg");
    height: 1.6rem;
    width: 1.5rem;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-left: 0.7rem;
}

.tabular-view .nav li.slick-current.slick-active a.nav-link {
    background-color: white;
    filter: grayscale(0%);
    justify-content: center;
}

.tabular-view .description {
    line-height: 2;
    font-size: 1rem;
    color: var(--txt-color);
    width: 100%;
}

.form-check-label {
    margin: 1rem 0rem 1rem 3rem;
}

.form-check-label input {
    position: relative;
    margin-left: 1rem;
}

.form-container form .fields {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
}

.input-section form .input-item {
    width: 45%;
}

.form-container form .input-item {
    width: 100%;
    margin-bottom: 0rem;
    height: 5rem;
}

.input-section .form [class*="col-"] div {
    display: flex;
}
.input-section .input__area {
    height: 150px;
    margin-bottom: 30px;
}

.input-section .input__field,
.form-container form .input__field {
    position: relative;
    width: 100%;
    color: rgb(35, 31, 32);
    font-weight: 400;
    border: 1px solid #9DA4AE;
    padding: var(--spacing-0) var(--spacing-lg);
    height: 40px;
    border-radius: var(--radius-sm);
}

input[type="date"] {
    padding: 12px 20px;
    border: 1px solid rgb(236, 237, 238);
    background-color: transparent !important;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    display: block !important;
}
/* Custom styles for the placeholder text */
::-webkit-input-placeholder {
    color: #999;
}

:-moz-placeholder {
    color: #999;
}

::-moz-placeholder {
    color: #999;
}

:-ms-input-placeholder {
    color: #999;
}

.tabular-view .tab-content .tab-pane .input-section .input__field:focus,
.form-container form .input__field:focus {
    border-color: var(--blue-color);
}
.form-container form .input__label {
    color: rgb(128 145 164);
    cursor: text;
    position: relative;
    top: -3.4rem;
    right: 13px;
    padding: 0px 5px;
    transition: all 0.5s ease 0s;
    z-index: 1;
    border: none;
}

form .error-msg-span {
    color: red;
    margin-right: 1rem;
}

.spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: conic-gradient(#0000 10%, #22b0e9);
    mask: radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 0);
    animation: spinner-zp9dbg 1s infinite linear;
    margin: auto;
}

@keyframes spinner-zp9dbg {
    to {
        transform: rotate(1turn);
    }
}

.tabular-view .tab-content .tab-pane .input-section .input__field:focus+.input__label,
.tabular-view .tab-content .tab-pane .input-section .input--filled,
.form-container form .input__field:focus+.input__label,
.form-container form .input--filled {
    transform: translate3d(0px, -24px, 0px);
    background: white;
    color: var(--blue-color);
    font-size: 0.8rem;
}
.tabular-view .tab-content .tab-pane .input-section .input-error .input__field:focus+.input__label,
.tabular-view .tab-content .tab-pane .input-section .input-error .input--filled,
.form-container form .input-error .input__field:focus+.input__label,
.form-container form .input--filled {
    color: red;
}
.opportunities-main {
    background-color: var(--light-grey-color);
    padding: 0 0 3rem 0;
}

.opportunities-main .swiper.opportunities .uj-card-actions {
    gap: var(--spacing-xl);
}

.opportunities-main .swiper.opportunities.availablevacancies .swiper-pagination {
    bottom: unset;
    margin-top: 0;
}

.opportunities-main .swiper.opportunities.availablevacancies .swiper-slide {
    margin-top: 0 !important;
}

.opportunities.swiper .swiper-wrapper {
    height: auto;
    flex-direction: row;
}

.functional-competitions {
    background-color: var(--background-neutral-50);
    position: relative;
    overflow: hidden;
}

.functional-competitions.swiper-pagination {
    bottom: 2rem;
}

.functional-competitions h1.title,
.proxies h1.title,
.uni-inovations h1.title,
.college-programs h1.title{
    margin-bottom: var(--spacing-3xl);
}

.competitions .swiper-slide {
    position: relative;
    height: 100%;
}

.loadMore.uj-btn {
    display: flex;
    margin: auto;
    width: fit-content;
}

.survey-form-container {
    margin-top: 2rem;
}

.survey-form-container .js-form-item.form-item.form-wrapper.webform-section {
    padding: 2rem 0;
    background: white;
}

.survey-form-container .js-form-item.form-item.form-wrapper.webform-section:not(:first-child) {
    border-top: 1px solid #e0e0e0;
}

.survey-form-container .js-form-item.form-item.form-wrapper.webform-section .webform-section-wrapper> :first-child:not(.description) {
    margin: 2rem 1rem;
}

.survey-form-container .js-form-item.form-item.form-wrapper.webform-section .webform-section-wrapper> :first-child:not(.description)> :first-child {
    border-top: 1px solid #e0e0e0;
    padding-top: 2rem;
    width: 100%;
}

.js-form-item.js-form-type-radio {
    box-sizing: border-box;
    background: #ffffff;
    color: #222;
    height: auto;
    width: 50%;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
}

.js-form-item.js-form-type-radio * {
    box-sizing: border-box;
}

.js-form-item.js-form-type-radio input.form-radio {
    appearance: none;
    background-color: #ffffff;
    width: 22px;
    height: 22px;
    border: 1px solid #cccfdb;
    margin: 0;
    border-radius: 50%;
    display: grid;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.js-form-item.js-form-type-radio input.form-radio::before {
    content: "";
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    transform: scale(0);
    transition: 0.3s transform ease-in-out;
    box-shadow: inset 6px 6px #ffffff;
}

.js-form-item.js-form-type-radio input.form-radio:checked {
    background: var(--blue-color);
    border-color: var(--blue-color);
}

.js-form-item.js-form-type-radio input.form-radio:checked::before {
    transform: scale(1);
}

.js-form-item.js-form-type-radio label {
    cursor: pointer;
    padding: 6px 8px;
}

.js-form-item.js-form-type-radio label:not(:last-child) {
    margin-right: 6px;
}

h2.webform-section-title {
    margin-right: 1rem;
    font-family: var(--IBM-b);
    position: relative;
    font-size: 1.4rem;
}

h2.webform-section-title::after {
    position: absolute;
    content: '';
    left: -1rem;
    width: 8rem;
    height: 10rem;
    top: -4rem;
    transform: scale(.4);
    background-repeat: no-repeat !important;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120.33" height="163.051" viewBox="0 0 120.33 163.051"><g id="Group_3742" data-name="Group 3742" transform="translate(57.588 -15.189) rotate(30)" opacity="0.1"><circle id="Ellipse_21" data-name="Ellipse 21" cx="21.363" cy="21.363" r="21.363" transform="translate(0 72.449)" fill="%2322b0e9"/><circle id="Ellipse_23" data-name="Ellipse 23" cx="16.719" cy="16.719" r="16.719" transform="translate(1.858 29.723)" fill="%2322b0e9"/><circle id="Ellipse_24" data-name="Ellipse 24" cx="14.861" cy="14.861" r="14.861" transform="translate(46.442 46.442)" fill="%2322b0e9"/><ellipse id="Ellipse_25" data-name="Ellipse 25" cx="18.577" cy="18.577" rx="18.577" ry="18.577" transform="translate(35.296)" fill="%2322b0e9"/><ellipse id="Ellipse_22" data-name="Ellipse 22" cx="22.602" cy="22.292" rx="22.602" ry="22.292" transform="translate(53.872 104.029)" fill="%2322b0e9"/><path id="Path_235" data-name="Path 235" d="M42.382,109.425,20.42,94.013,0,65.116V37.374H15.413L39.3,51.63h4.625L39.3,40.842,35.062,10.4,22.732,0,33.5,5.589" transform="translate(16.25 9.622)" fill="none" stroke="%2322b0e9" stroke-width="2"/></g></svg>');
}

.survey-form-container .js-form-item.form-item .webform-section-wrapper .description {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1.8rem;
    margin: 1.8rem 0 1.8rem;
}

.survey-form-container .js-form-item.form-item .webform-section-wrapper .description .webform-element-description {
    color: #828282;
    margin-right: 1.5rem;
}

.survey-form-container .webform-element-description pre {
    font-size: 1.2rem;
    color: #828282;
    margin-top: 1rem;
    overflow: hidden;
    font-family: var(--IBM-regular);
}

.survey-form-container .uj-webform-container.js-form-item-name {
    margin: 3rem 0;
    font-size: 1.5rem;
}

legend#edit-choose-1--wrapper-legend {
    margin: 2rem 0;
}

.survey-form-container .fieldset-wrapper .js-webform-radios {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.survey-form-container .fieldset-wrapper .js-webform-radios .js-form-item-choose-1 {
    margin-left: 2rem;
}

.survey-form-container #edit-actions.form-actions.js-form-wrapper.form-wrapper {
    background-color: white;
    padding: 0 1.5rem 4rem;
}

.survey-form-container #edit-actions.form-actions.js-form-wrapper.form-wrapper input.submit-button,
.webform-button--submit {
    background-color: var(--blue-color);
    padding: .7rem 2.5rem;
    color: white;
    transition: .3s all ease;
    margin: 0;
}

.survey-form-container #edit-actions.form-actions.js-form-wrapper.form-wrapper input.submit-button:hover,
.webform-button--submit:hover {
    background-color: var(--blue-color-hover);
}

.survey-form-container #NafathError.error-msg-span {
    display: none;
    padding: 1rem;
    background-color: #ff00001f;
    color: red;
    border-radius: .4rem;
    width: 100%;
}

.opportunities .col-lg-4:nth-child(6n+6) .card .icon svg path {
    stroke: var(--dark-grey-color);
}

#AdfsLoginSpinner,
#NafathLoginSpinner {
    display: none;
}

.opportunities .swiper-slide .card .date {
    display: flex;
    align-items: center;
}

.opportunities .swiper-slide .card .date svg {
    width: 1rem;
    margin-left: 0.5rem;
}

.competitions .card-img-overlay {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: white;
    flex-direction: row-reverse;
    font-size: 1.1rem;
    z-index: 1;
}

.tabular-view label {
    font-weight: 500;
    position: relative;
    font-size: var(--text-md);
    color: var(--text-default);
}

.tabular-view label input {
    opacity: 0;
    display: none;
}

.tabular-view .tab-content .tab-pane label input:checked+span::before {
    box-shadow: inset 0 0 0 0.36em var(--border-primary);
    border: none;
}

.tabular-view label span {
    display: flex;
    align-items: center;
    border-radius: var(--radius-full);
    transition: all 0.25s ease 0s;
    color: var(--black-color);
}

.tabular-view label span::before {
    display: flex;
    flex-shrink: 0;
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-left: 0.5em;
    transition: all 0.25s ease 0s;
    background-color: #fff;
    border: 1px solid #cccfdb;
}

.news-content .news-thumbnail-img img.research-img {
    width: 100%;
    padding: 1rem;
}

.news-content .news-thumbnail-img {
    flex-wrap: wrap;
}

.care-tiles{
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.care-tiles .col-md-6 {
    padding: 0;
    max-width: 32%;
}

.care-tiles .uj-card .pattern {
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 5rem;
    height: 5rem
}

.care-tiles .card .pattern svg {
    width: 100%;
    height: 100%;
}

.care-tiles .card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
}

.care-tiles .card .card-body .card-title {
    font-size: var(--text-lg);
    margin-bottom: 0;
    color: var(--text-default);
    font-family: var(--IBM-b);
}

.care-tiles .col-lg-4 .card {
    border-top: 10px solid var(--border-primary);
    position: relative;
    min-height: 11rem;
    border-radius: var(--spacing-lg);
}

.care-tiles .col-lg-4 .card .pattern ellipse {
    fill: var(--button-background-primary-default);
}

.quick-links {
    display: flex;
    overflow-x: auto;
    background-image: none;
    position: relative !important;
}

.quick-links .swiper-slide {
    width: fit-content;
}

.quick-links .link {
    display: flex;
    align-items: center;
    margin: .5rem 0;
}

.research_thumb {
    padding: 2rem 0;
    background-color: var(--background-neutral-50);
}

.research_thumb .story .image-container img {
    object-fit: unset;
}

.quick-links .std::after {
    display: none;
}

.quick-links .logo {
    position: absolute;
    left: 2rem;
    top: 1.5rem;
    width: 4rem;
    justify-content: center;
    display: none;
}

.quick-links .logo img {
    width: 4.5rem;
}

.quick-links .link svg ellipse {
    transition: .3s all ease;
}

.quick-links .link:nth-child(2n+1) svg ellipse {
    fill: var(--border-primary);
}

.quick-links .link:hover svg ellipse {
    fill: var(--border-primary);
}
.college .tab-content .slick-track {
    width: 100% !important;
    margin: 0;
    display: flex;
}

.university-services .nav-tabs .nav-item.slick-active.slick-current .nav-link {
    color: var(--txt-color);
}

.college.tabular-view .nav li.slick-active.slick-current a.nav-link {
    background-color: white;
    filter: grayscale(0%);
}

.college-programs .programs-container {
    padding: 2rem 0;
}

.college-programs .programs-container .program {
    border: 1px solid var(--border-neutral-primary);
    height: auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.college-programs.container {
    background-color: white;
    padding: 0 15px;
}

.college-programs .programs-container .program .program-name {
    font-size: var(--text-xl);
    padding: var(--spacing-2xl) var(--spacing-3xl);
    background-color: #F9F9F9;
}

.college-programs .programs-container .program .contents .item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--border-background-neutral);
    align-items: center;
    cursor: pointer;
    font-size: var(--text-md);
}

.college-programs .programs-container .program .contents .contents-container {
    overflow: auto;
    padding: var(--spacing-2xl) var(--spacing-3xl);
}


.college-programs .programs-container .col-lg-4 .contents .item .cta circle {
    transition: .3s all ease;
    fill: var(--border-primary);
}
.college-programs .programs-container .program .contents .item:first-child {
    padding-top: 0;
}

.college-programs .programs-container .program .contents .item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.College-sections {
    background-color: #fff;
}

.College-sections .col-lg-4:last-child {
    margin-bottom: 0;
}

.College-sections.departs {
    background-color: #19607C;
}

.College-sections .card .thumbnail {
    position: relative;
}



.login .code-verification {
    margin: 2rem 0;
    background-color: #FAFAFA;
    border: 1px solid #E8E8E8;
    border-radius: 0.6rem;
    padding: 1.2rem 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.login .code-verification .code-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #828282;
}

.login .code-verification .code-text .code {
    margin-top: 0.3rem;
    font-size: 2.5rem;
    color: #484848;
    letter-spacing: 0.2rem;
    font-family: var(--IBM-b);
}

.login .code-verification .timer-text {
    border-top: 1px solid #E8E8E8;
    width: 100%;
    text-align: center;
    padding-top: 0.8rem;
    margin-top: 1rem;
    color: #828282;
}

.login .code-verification .timer-text .timer {
    margin-right: 0.3rem;
    color: #484848;
    font-family: var(--IBM-b);
}

.login .code-verification .timer-text span:first-child {
    margin-left: .3rem;
}

.login .code-verification .timer-text span:last-child {
    margin-right: 0.3rem;
    font-family: var(--IBM-b);
    color: #484848;
}

.College-sections .card .thumbnail::after {
    position: absolute;
    content: '';
    width: 5rem;
    height: 4rem;
    background-repeat: no-repeat;
    top: 1rem;
    right: 1rem;
    background-image: url("/themes/uoj_theme/media/Layer\ 2\ -\ College.svg");
}

.College-sections .card .thumbnail::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0rem;
    background-image: linear-gradient(45deg, rgba(0, 0, 0, .0), rgba(0, 0, 0, .2), rgba(0, 0, 0, .8));
}

.college-news.achievements .nav-link.active {
    color: var(--blue-color);
    background-color: transparent;
    border-bottom-color: var(--blue-color);
}

.college-news.achievements .nav-link:hover {
    color: var(--blue-color);
}

.achievements.college-news .swiper-slide .card {
    border-bottom: 10px solid var(--blue-color);
}
.college.tabular-view .statistic {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #D6D6D6;
    margin-bottom: 1.5rem;
    flex: auto;
    max-width: none;
    width: auto;
    gap: var(--spacing-md);
}

.college.tabular-view .statistic .icon img {
    width: 3rem;
    height: 2.5rem;
}

.college.tabular-view .statistic:last-child {
    border-bottom: none;
}

.college.tabular-view .statistic .desc {
    color: var(--text-display);
    font-size: var(--text-md);
    text-align: center;
    line-height: 24px;
}

.college.tabular-view .statistic .count {
    font-size: var(--display-lg);
    line-height: 60px;
    color: var(--text-primary-sa-flag) !important;
}

.college.tabular-view .statistic:nth-child(1) .count {
    color: var(--red-color);
}

.college.tabular-view .statistic:nth-child(2) .count {
    color: var(--blue-color);
}

.college.tabular-view .statistic:nth-child(3) .count {
    color: var(--green-color);
}

.college.tabular-view .statistic:nth-child(4) .count {
    color: var(--purple-color);
}

.college.tabular-view .statistic:nth-child(5) .count {
    color: var(--orange-color);
}

.college .partnership:hover {
    border: 1px solid #e7e7e7;
}




.college .college-annual-report .item {
    display: flex;
    flex-direction: column;
    padding-bottom: 1.5rem;
    width: 100%;
}

.link-holder:hover {
    background-color: rgb(0 0 0 / 4%);
}

.college .college-annual-report .item:not(:first-child) {
    padding-top: 1.5rem;
}

.college .college-annual-report .item:not(:last-child) {
    border-bottom: 1px solid #E2E2E2;
}

.spinner-loader-container .spinner-border {
    border: 0.25em solid var(--blue-color);
    border-right-color: transparent;
}

.research-int.enabled ul li {
    padding: 0 2rem;
    position: relative;
    margin-bottom: .5rem;
}

.research-int.enabled ul li::before {
    content: '';
    position: absolute;
    top: 0.4rem;
    right: 0;
    background-color: var(--blue-color);
    height: 0.8rem;
    width: 0.8rem;
}

.research-int.enabled .empty {
    height: 100%;
}

.spinner-loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.research-int .spinner-loader-container {
    height: unset;
    position: relative;
    display: block;
}

.research-int .spinner-loader-container .spinner-border.result {
    top: 50%;
    left: 46%;
    position: absolute;
}

.college .college-annual-report .item .item-desc {
    display: flex;
    align-items: center;
    line-height: 2;
    margin-bottom: .3rem;
}

.college .college-annual-report .item .item-desc .icon {
    display: none;
}

.college .college-annual-report .item a.item-cta {
    color: var(--link-primary);
    transition: .3s all ease;
    font-size: var(--text-md);
}

.news-content .news-detail a {
    color: var(--blue-color);
}

.college .college-annual-report .item .item-desc .icon svg {
    width: 2rem;
    height: 2rem;
    filter: brightness(0) saturate(100%) invert(43%) sepia(89%) saturate(333%) hue-rotate(101deg) brightness(80%) contrast(100%);
}

.college .college-annual-report .item .item-desc .name {
    font-size: var(--text-md);
}
.college .affliated-members-desc {
    text-align: center;
    font-family: var(--IBM-sb);
    line-height: 2.1;
}

.college .affliated-members input {
    border: 1px solid #9DA4AE;
    color:#384250;
    border-radius: var(--radius-sm)!important;
    padding: var(--spacing-0) var(--spacing-xl);
    font-family: var(--IBM-regular);
    width: 100%;
    height: 40px;
}
.college .affliated-members input:placeholder{
     color:#384250;
}
.affliated-members{
    display:flex;
    align-items:center;
    gap:24px;
}
.college .affliated-members input:focus {
    box-shadow: 0 0 0 0.2rem rgba(240, 156, 83, 0.11);
}
.college .affliated-members .search-affliated-btn svg {
    margin-right: .5rem;
    width: 1.1rem;
    height: 1.1rem;
}

.steps-container {
    content: '';
    background: url("/themes/uoj_theme/media/group\ 2400.svg") var(--background);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position-x: 15rem;
}

.steps-app {
    padding-top: 0;
    padding-bottom: 0;
    background-color: #ECECEC;
}

.steps {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 2rem 0 0;
    margin: 0rem 0;
}

.step {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    margin-bottom: 1rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #dfdfdf;
}

.step:last-child {
    border-bottom: unset;
}

.step:nth-child(even) .instruction {
    content: "";
    width: 100%;
    padding-bottom: 0rem;
}

.instruction.no-date {
    font-weight: 600;
}

.step:nth-child(even) .instruction.no-date {
    bottom: 12rem;
}

.step:nth-child(odd) .instruction {
    top: 17rem;
}

.step .instruction {
    min-height: fit-content;
    content: '';
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step .header .num {
    font-size: 2rem;
    font-weight: 700;
    margin-left: 0.6rem;
}

.step .header {
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
    position: relative;
    min-width: 17.6rem;
    justify-content: center;
}

.step .header span {
    text-align: center;
}

.step .header .title {
    font-size: 1.6rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.step .start-date,
.step .end-date {
    display: flex;
    justify-content: start;
    margin-bottom: 1rem;
}

.step .from,
.step .to {
    margin-left: .4rem;
    border-radius: 2rem;
}

.step .date {
    border-radius: 2rem;
}

.step .schedule {
    margin-top: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.step:nth-child(5n+1) .num {
    color: var(--blue-color);
}

.step:nth-child(5n+2) .num {
    color: var(--orange-color);
}

.step:nth-child(5n+3) .num {
    color: var(--green-color);
}

.step:nth-child(5n+4) .num {
    color: var(--red-color);
}

.step:nth-child(5n+5) .num {
    color: var(--purple-color);
}

.step:nth-child(5n+1) .start-date .from,
.step:nth-child(5n+1) .start-date .date,
.step:nth-child(5n+1) .end-date .to,
.step:nth-child(5n+1) .end-date .date {
    background-color: #a3ddf3;
    padding: .5rem 1rem;
}

.step:nth-child(5n+2) .start-date .from,
.step:nth-child(5n+2) .start-date .date,
.step:nth-child(5n+2) .end-date .to,
.step:nth-child(5n+2) .end-date .date {
    background-color: #d37b609c;
    padding: .3rem .8rem;
}

.step:nth-child(5n+3) .start-date .from,
.step:nth-child(5n+3) .start-date .date,
.step:nth-child(5n+3) .end-date .to,
.step:nth-child(5n+3) .end-date .date {
    background-color: #a6e8e0;
    padding: .5rem 1rem;
}

.step:nth-child(5n+4) .start-date .from,
.step:nth-child(5n+4) .start-date .date,
.step:nth-child(5n+4) .end-date .to,
.step:nth-child(5n+4) .end-date .date {
    background-color: #b62c3e99;
    padding: .5rem 1rem;
}

.step:nth-child(5n+5) .start-date .from,
.step:nth-child(5n+5) .start-date .date,
.step:nth-child(5n+5) .end-date .to,
.step:nth-child(5n+5) .end-date .date {
    background-color: #78478eab;
    padding: .5rem 1rem;
}

.step .instruction span {
    line-height: 2;
    text-align: center;
}

.tabular-view .tab-content .input-item,
.tabular-view .tab-content .input-item item {
    width: 100%;
}
.form-container textarea {
    width: 100%;
    border: 1px solid rgb(236, 237, 238);
    padding: 15px;
}

.submit-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    font-size: 1rem;
    gap: var(--spacing-xl);
}

.registration-footer .stamp-img {
    height: 4rem;
    width: 10rem;
    display: block;
}

.registration-footer .stamp-img img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.mobile-apps .social-icons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #cccccc;
    margin-top: 2rem;
    padding-top: 2rem;
}

.mobile-apps .social-icons a {
    margin: 0 .3rem;
}

.associates-tiles.container {
    min-height: 46rem;
}

.associates-tiles .spinner-border {
    position: absolute;
}

.associates-tiles .card .card-body .card-text.res-interests {
    text-decoration: underline;
    transition: all .3s ease-in-out;
    color: var(--link-primary) !important;
}

.associates-tiles .card .card-body .card-text.res-interests:hover {
    color: var(--link-primary-hovered)!important;
}

.university-services .services-container {
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    padding: 0;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.university-services .tab-pane {
    width: 100% !important;
    background-color: white;
}

.partner-con .services-container .swiper-button-next {
    transform: translateX(0rem) scale(.7) rotate(0);
    transition: .3s all ease;
    left: -5rem;
    z-index: 3;
}

.partner-con .services-container .swiper-button-prev {
    transform: translateX(0rem) scale(.7) rotate(180deg);
    transition: .3s all ease;
    right: -5rem;
    z-index: 3;
}

.university-services .services-container .col-lg-3 .card {
    border: 1px solid rgba(0, 0, 0, .125);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    height: 16rem;
}

.std-activities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3xl);
}

.std-activities .col-lg-4 {
    padding: 0;
    flex: 0 0 32%;
    max-width: 32%;
}
.std-activities .uj-card p{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp: 4;
    overflow:hidden;
    height: 96px;
}
.testimonials-container {
    background-color: #F4F4F4;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.testimonials-container .col-lg-4 {
    margin-bottom: 1rem;
}

.testimonials-container .card {
    margin-right: 0;
}

.testimonials .col-lg-4:nth-child(6n+1) .card-body {
    border-bottom: 5px solid var(--blue-color);
}

.testimonials .col-lg-4:nth-child(6n+4) .card .card-body {
    border-bottom: 5px solid var(--purple-color);
}

.testimonials .col-lg-4:nth-child(6n+5) .card .card-body {
    border-bottom: 5px solid var(--red-color);
}

.testimonials .col-lg-4:nth-child(6n+3) .card .card-body {
    border-bottom: 5px solid var(--green-color);
}

.testimonials .col-lg-4:nth-child(6n+2) .card .card-body {
    border-bottom: 5px solid var(--orange-color);
}

.testimonials .col-lg-4:nth-child(6n+6) .card .card-body {
    border-bottom: 5px solid var(--dark-grey-color);
}

.library-tabs {
    background-color: var(--background);
    padding-bottom: 2.5rem;
    padding-top: 0;
}


.cyber-tabview .nav-tabs .nav-item .nav-link {
    padding: 1.4rem 2rem;
}

.cyber-tabview .slick-track {
    width: 100% !important;
}

.cyber-tabview .nav-tabs .slick-track {
    display: flex;
}

.cyber-tabview .nav-tabs .slick-track li {
    width: 100% !important;
    flex: 1 0 100%
}

.nav-tabs .nav-item .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    border: none;
    border-radius: 0;
    transition: all .3s ease-in-out;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link {
    color: var(--text-default);
    font-size: var(--text-sm);
    padding: var(--spacing-xl);
    display: flex;
}

.library-tabs .tab {
    background-color: white;
}

.library-tabs ul li.slick-current.slick-active a {
    color: var(--blue-color);
}

.library-tabs .tab-pane {
    background-color: white;
    border-top: none;
    overflow: hidden;
}

.library-tabs .tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1rem;
    border-bottom: 2px solid #F4F4F4;
}

.library-tabs .tab:last-child {
    border-bottom: none;
}

.library-tabs .tab .content {
    display: flex;
    align-items: center;
}

.library-tabs .tab .content .card-text {
    color: var(--text-default);
    font-size: var(--text-md);
}

.library-tabs .tab .content svg {
    height: 1.5rem;
    width: 1.5rem;
    display: block;
    margin-left: .5rem;
}
.library-tabs .tab-pane .content svg path {
    stroke: var(--border-primary);
}
.library-tabs .tab-pane.download {
    font-size: .8rem;
}

.library-tabs .tab-pane .download {
    color: var(--link-primary);
}
.library-tabs .tab-pane .download:hover {
    color: var(--link-primary-hovered);
}
.interest .icon {
    height: 1.5rem;
    width: 1.5rem;
    transform: scaleX(-1);
}

.interest {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.form-container {
    background-color: var(--background);
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.form-container form {
    background-color: white;
    padding: 1rem 3rem 3rem 3rem;
}

.form-container form input {
    width: 49%;
    margin-left: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e6e3e3;
    padding: 0.7rem;
}

.form-container form input:nth-child(2n+2) {
    margin-left: 0;
}

.form-container form input[type='date'] {
    width: 100%;
    margin-left: 0;
}

.form-container form input[type='checkbox'] {
    width: fit-content;
    display: flex;
    align-items: center;
}

.form-container form .file__value--remove {
    width: 10px;
    height: 10px;
    background-size: contain;
    margin-left: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.953' height='20.953' viewBox='0 0 20.953 20.953'%3E%3Cpath id='Icon_ionic-md-close' data-name='Icon ionic-md-close' d='M28.477,9.619l-2.1-2.1L18,15.9,9.619,7.523l-2.1,2.1L15.9,18,7.523,26.381l2.1,2.1L18,20.1l8.381,8.381,2.1-2.1L20.1,18Z' transform='translate(-7.523 -7.523)' fill='%22B0E9'/%3E%3C/svg%3E%0A");
}

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

.boxes {
    margin: 2rem 0;
}

.checkboxes {
    display: flex;
    align-items: baseline;
    margin-bottom: 1rem;
    color: var(--txt-color);
    line-height: 2.2;
}

/* OPEN DATA END */
/* FORM */
.form-container form .uploader {
    margin-top: 1rem;
    text-align: center;
    padding: 2rem 2rem;
    border: 2px dashed rgb(213, 213, 213);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: all 0.3s ease 0s;
}

.form-container form .file__input svg {
    width: 3rem;
    height: auto;
    display: block;
    margin: auto;
}

.form-container form .uploader-info {
    display: flex;
    flex-direction: column;
}

.form-container form .uploader-info label {
    margin-top: 1rem;
}

.form-container form .file__input--label {
    cursor: pointer;
}

.form-container form .uploader-info label.authorized-files {
    color: var(--txt-color);
    margin-bottom: 1rem;
}

.form-container form .uploader-info label:first-child {
    color: var(--blue-color);
    font-size: 2rem;
    font-weight: bold;
}

.form-container form .uploader .file__input--file {
    display: none;
}

/* ASSOCIATES DIRECTORY START */
.associates-tiles {
    background-color: var(--background);
    padding-bottom: 6rem;
}

.associates-tiles .card .pattern {
    position: absolute;
    left: 1.25rem;
    bottom: -1.55rem;
    width: 12rem;
    display: none;
}

.associates-tiles .card .pattern svg {
    height: 100%;
    width: 100%;
}

.associates-tiles .card {
    margin-bottom: var(--spacing-xl);
}

.associates-tiles .card {
    border-bottom: 10px solid var(--border-primary);
    padding: 0;
}

.associates-tiles .card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}

.associates-tiles .card .card-body .positions {
    display: flex;
    flex-direction: column-reverse;
}

.associates-tiles .card .card-body .card-title {
    width: fit-content;
    margin-bottom: 1rem;
    margin: auto;
    font-size: displa;
}
.associates-tiles .card .card-body .profile {
    width: 12rem;
    height: 12rem;
    border-radius: 100%;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.associates-tiles .card .card-body .informations {
    width: 100%;
}

.associates-tiles .card .card-body .profile img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 100%;
}

.profile .personal-profile {
    position: absolute;
    background-color: #f9f9f9;
    padding: 1rem 1rem 1.5rem;
    bottom: 0;
    right: 0rem;
    width: 100%;
    color: var(--link-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
    font-size: .9rem;
}

.profile .personal-profile:hover {
    color: white;
    background-color: var(--button-background-primary-default);
}

.associates-tiles .card .card-body .positions .position {
    background-color: var(--light-grey-color);
    font-size: 0.9rem;
    text-align: center;
}
.associates-tiles .card .card-body .icon.mail svg path {
    stroke: none;
    fill: var(--blue-color);
}

.associates-tiles .card .pattern svg ellipse {
    fill: var(--blue-color);
}

.associates-tiles .card .card-body .positions>div {
    display: flex;
    flex-direction: column;
}

.associates-tiles .card .card-body .member-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.associates-tiles .card .card-body .member-info .information {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-width: 35%;
    width: fit-content;
    margin: .5rem;
}

.associates-tiles .card .card-body .member-info .information .icon {
    margin-left: 1.5rem;
}

.associates-tiles .card .card-body .member-info .information .icon svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.pattern-before svg {
    height: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    display: none;
}

.volunteering .uj-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
}
.volunteering .uj-container:empty{
 display:none;
}
.volunteering .nav.nav-tabs {
    justify-content: center;
}
.volunteering .volunteer-tiles,
.deanship-agencies .agencies-tiles {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+1) .card .pattern svg ellipse {
    fill: var(--border-primary);
}

.volunteering .volunteer-tiles .col-lg-6:nth-child(2n+2) .card .pattern svg ellipse {
    fill: var(--border-primary);
}

.volunteering .volunteer-tiles .col-lg-6 .card .pattern svg,
.deanship-agencies .agencies-tiles .col-lg-6 .card .pattern svg {
    width: 100%;
    height: 100%;
}

.accordions {
    margin-top: 2.5rem;
}

.established-initiatives {
    padding: 0 15px 2.5rem;
}

.accordions .accordion .header {
    justify-content: space-between;
    align-items: center;
    display: flex;
    cursor: pointer;
}

.accordions .accordion .header .expand {
    transition: all .3s ease-in-out;
    width: 2rem;
    height: 2rem;
}

.accordions .accordion .header .expand img {
    width: 100%;
    height: 100%;
}

.accordions .accordion {
    background-color: rgb(252, 252, 252);
    border: 2px solid rgb(238, 238, 238);
    padding: 1rem;
    width: 100%;
    transition: all 0.3s ease 0s;
    margin: 1rem 0
}

.accordions .accordion .header[aria-expanded="true"] .expand {
    transform: rotate(180deg);
}

.accordions .header:hover .question {
    color: var(--blue-color);
}

.accordions .accordion-body .tiles-container {
    display: flex;
    flex-wrap: wrap;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid rgb(238, 238, 238);
}

.accordions .accordion-body .tiles-container .col-lg-6 {
    padding-left: 0;
    padding-right: 0;
}

.accordions .accordion-body .card .card-img-top img {
    margin: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}


.accordions .accordion-body img {
    margin-right: .5rem;
}

.accordions .accordion-body .col-lg-6 {
    margin-bottom: 2rem;
}

.accordions .accrodion .accordion-body .col-lg-6 .card .card-img-top img {
    transition: all .3s ease-in-out;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.details-panel .apply-link {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: var(--blue-color);
}

.details-panel .apply-link span {
    margin: 1rem;
}

.details-panel .apply-link:hover {
    color: var(--blue-color-hover);
}

.details-panel .apply-link:hover svg g path {
    stroke: var(--blue-color-hover);
}

.life-jeddah {
    margin-top: 2rem;
    background-color: var(--background-neutral-50);
}

.life-jeddah .uj-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
}

.life-jeddah .tiles-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.tab-content .slick-slide.slick-active,
.tab-content .slick-slide {
    display: none;
    height: fit-content;
    flex-direction: column;
}

.tab-content .slick-slide.slick-active {
    opacity: 1 !important;
}

.news-advertisements.innovations .items {
    width: 100% !important;
}

.tab-content .slick-slide.slick-current.slick-active {
    display: flex;
}

.left-section .slick-list.draggable {
    border-bottom: unset;
}

.slick-list.draggable {
    width: 100%;
    height: 100%;
}

.tabular-view .tab-content .tab-pane.slick-current.slick-active {
    display: block;
    height: min-content !important;
    width: 100% !important;
    right: 0px !important;
    z-index: 0 !important;
    opacity: 1 !important;
    overflow: hidden;
    padding: 1rem;
}

.tabular-view .tab-content .tab-pane .d-flex {
    flex-direction: column;
}

.news-advertisements .slick-prev,
.news-advertisements .slick-next {
    width: 2.2rem !important;
}

.slick-prev,
.slick-next {
    position: absolute;
    top: 0;
    content: "";
    height: 100%;
    z-index: 8;
    width: 2.5rem !important;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0;
    background-color: white;
}

.profile .deco1::before {
    content: "";
    position: absolute;
    height: 5.5rem;
    width: 3.1rem;
    top: 0;
    right: 0;
    background: linear-gradient(to left, white, #ffffffe0);
    z-index: 2;
    display: none;
}

.profile .deco1 {
    position: absolute;
    top: 0;
    left: auto;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 1) 50%);
    z-index: 99;
    width: 3rem;
    display: none;
}

.president-tabview .deco1::before {
    content: "";
    position: absolute;
    height: 4rem;
    width: 3.1rem;
    top: 5.9rem;
    right: 6rem;
    background: linear-gradient(to left, white, rgb(255 255 255 / 60%));
    z-index: 2;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: none;
}

.profile .deco2::before {
    content: "";
    position: absolute;
    height: 5.5rem;
    width: 3.1rem;
    top: 0;
    left: 0;
    background: linear-gradient(to right, white, #ffffff);
    z-index: 2;
    display: none;
}

.president-tabview .deco2::before {
    content: "";
    position: absolute;
    height: 5.5rem;
    width: 3.1rem;
    top: 6rem;
    left: 6rem;
    background: linear-gradient(to right, white, rgb(255 255 255 / 60%));
    z-index: 2;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: none;
}

.security-tab-view .slick-prev,
.president-tabview .slick-prev {
    background-size: 80%;
    right: 0;
}

.president-tabview .slick-prev {
    background-color: rgb(225, 219, 219);
}

.security-tab-view .slick-next {
    left: 0;
}

.input-section .form,
.form-container form .fields.open-dt {
    flex-direction: row;
    flex-wrap: wrap;
}

.form-container button[disabled] {
    filter: grayscale(100%);
    pointer-events: none;
}

.college li.nav-item.slick-slide {
    height: fit-content;
    width: auto;
}

.tab-pane .row {
    flex-direction: column;
}

.library-tabs .tab-content .slick-track,
.library-tabs .tab-content .slick-track .tab-pane {
    width: 100% !important;
}

.slick-track {
    width: 100%;
}

.profile .slick-track {
    display: flex;
}

.news-advertisements .tab-pane {
    height: auto;
}

.news-advertisements .tab-pane .row {
    gap: var(--spacing-xl);
    margin: 0;
}

.news-advertisements .tab-content .slick-track {
    width: 100% !important;
}

.achievements .tab-links .slick-track,
.news-advertisements .tab-links .slick-track {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.news-advertisements .nav-pills {
    width: 100%;
    height: 3.5rem;
}

.volunteer-tiles .col-lg-6 {
    margin-bottom: 2rem;
}

#chartdiv {
    height: 350px !important;
}

#chartdiv tspan {
    font-size: 1rem;
}

.focus-area .focus-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.animation-zone {
    border: 1px solid #fafafa;
}

.ilustrator {
    position: absolute;
    top: 6.9rem;
    left: 2.6rem;
    height: 1.5rem;
    width: 1.5rem;
    display: block;
}

.focus-area .focus-body .animation-zone {
    width: fit-content !important;
    margin: auto;
}

.focus-area .focus-body .animation-zone,
.focus-area .focus-body .links {
    width: 100%;
    position: relative;
}

.focus-area .focus-body .links .link-holder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid rgb(235, 235, 235);
    color: var(--black-color);
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.focus-area .focus-body .links .link-holder .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.focus-area .focus-body .links .link-holder svg {
    transform: all .3s ease-in-out;
    width: 100%;
    height: 100%;
}

.focus-area .focus-body .links .link-holder:hover {
    color: black;
}

.focus-area .focus-body .links .link-holder svg path,
.focus-area .focus-body .links .link-holder svg g#Ellipse_71 {
    stroke: var(--blue-color);
}

.focus-area .focus-body .links .link-holder:hover svg path,
.focus-area .focus-body .links .link-holder:hover svg g#Ellipse_71 {
    stroke: var(--blue-color-hover);
}

.focus-area .focus-body .links .link-holder svg path {
    fill: var(--blue-color);
}

.focus-area .focus-body .links .link-holder:hover svg path {
    fill: var(--blue-color-hover);
}

.focus-area .focus-body .links .link-holder:last-child {
    border-bottom: none;
}

.focus-area .focus-body .links .link-holder .link {
    font-size: 1.1rem;
    font-family: var(--IBM-sb);
}

.focus-area .focus-body .animation-zone lottie-player {
    height: auto !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.focus-area .links {
    background: url("/themes/uoj_theme/media/focus\ area\ background.webp"), #fafafa;
    background-repeat: no-repeat;
    background-size: 100%;
}

.exit-fullscreen {
    display: none;
}

p {
    font-family: var(--IBM-regular);
}

* {
    font-family: var(--IBM-regular);
}

.survey-form-container fieldset.radios--wrapper.js-form-item.webform-type-radios {
    margin: 0 1.5rem 3rem;
}

.survey-form-container fieldset.radios--wrapper.js-form-item.js-webform-type-webform-radios-other {
    margin-right: 6rem;
}

.survey-form-container .js-form-item.form-item.js-form-type-radio {
    margin-bottom: .5rem;
}

.survey-form-container .js-form-item.form-item.js-form-type-radio label {
    padding-right: 1rem;
    font-size: 1rem;
    width: max-content;
}

fieldset legend {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    line-height: 2;
}

.survey-form-container .js-form-item.form-item.js-form-type-textfield {
    margin: 0 1.5rem 3rem 0;
    transition: .3s all ease;
}

.survey-form-container .js-form-item.form-item.js-form-type-textfield input:focus-visible,
.survey-form-container .js-form-item.form-item.js-form-type-textarea textarea:focus-visible {
    outline: 1.5px solid var(--blue-color);
    border: none;
}

.survey-form-container .js-form-item.form-item.js-form-type-textfield input {
    height: 2.5rem;
    border-color: #cfcfcf;
    border-style: solid;
    border-width: 1px;
    width: 95%;
}

.survey-form-container label {
    font-size: 1.1rem;
}

.survey-form-container .js-form-item.form-item.js-form-type-textfield label,
.survey-form-container .js-form-item.form-item.js-form-type-textarea label {
    margin-bottom: 1.5rem;
}

.survey-form-container .js-form-item.form-item.js-form-type-textarea {
    margin: 1.5rem 1.5rem 1.5rem 0;
}

.survey-form-container .js-form-item.form-item.js-form-type-textarea textarea {
    border-color: #cfcfcf;
    border-style: solid;
    border-width: 1px;
    resize: none;
    width: 95%
}
.map {
    width: 100%;
    margin: 0 auto;
    background-color: rgb(227, 227, 227);
    height: 100vh;
    z-index: 1;
    position: relative;
}

.test .fullscreen {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 46px;
    background-color: rgb(255, 255, 255);
    border: 2px solid rgba(0, 0, 0, 0.2);
    transition: .3s all ease;
    font-family: var(--IBM-regular);
    z-index: 100000;
}

.test .fullscreen:hover {
    background-color: rgb(237, 237, 237);
    transition: .3s all ease;
    cursor: pointer;
}

.test {
    position: absolute;
    top: 9rem;
    right: 1rem;
    display: flex;
    border: 1px solid #e2e2e2;
    border-radius: 1rem;
    transition: .3s all ease;
    align-items: center;
    z-index: 2;
}

.test.sensor {
    top: -9rem;
    opacity: 0;
}

.test .select-location select,
.test select {
    width: auto;
    padding: 0 .5rem;
    display: flex;
    outline: none;
    border: none;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: white;
    z-index: 99 !important;
    border: 2px solid rgba(0, 0, 0, 0.2);
    font-family: var(--IBM-regular);
    font-size: 1rem;
    margin-left: 1rem;
}

.leaflet-control {
    border-radius: 0 !important;
}

.leaflet-popup-content {
    margin: 0 !important;
    width: auto !important;
}

.leaflet-popup-content-wrapper {
    padding: 0 !important;
}

.demo {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.info-container {
    padding: 0rem 1rem 1rem;
    text-align: right;
    width: 15rem;
}

.building-info-container {
    text-align: right;
    width: auto;
}

.Building-Detail-Container .left-section {
    margin-top: 0;
}

.left-section {
    margin-top: 1.6rem;
}

.right-section {
    position: relative;
    top: -.7rem;
    padding: 0 2.2rem;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.Building-Overview .Coordinates {
    font-size: .9rem;
    color: #878787;
}

.building-info-container .Building-Overview {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
}

.building-info-container .Building-Overview h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.building-info-container .Responsible-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .8rem 1rem;
    border-top: 1px solid #E3E3E3;
    width: 100%;
    backdrop-filter: blur(14px);
    background-color: #f6f6f6;
    -webkit-backdrop-filter: blur(15px);
}

.building-info-container .Responsible-details .name {
    font-size: .9rem;
}

.building-info-container .Responsible-details .position {
    font-size: .8rem;
    margin-top: .4rem;
    color: #585858;
}

.building-info-container .Responsible-details .contactcta {
    display: flex;
    align-items: center;
}

.building-info-container .Responsible-details .contactcta svg {
    width: 3rem;
    height: auto;
}

.building-info-container .Responsible-details .contactcta a {
    margin: 0 .5rem;
}

.building-info-container .Responsible-details .contactcta a img {
    width: 3.5rem;
    height: 3.5rem;
}

.demo .info-container h2 {
    margin-bottom: 0;
    margin-top: 1.5rem;
}

.demo img {
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.details-div {
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 102;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transform: translateX(-130vw);
    transition: .3s all ease;
}

.details-div.active {
    transform: translateX(0);
}

.details-div .close {
    position: absolute;
    top: 1rem;
    left: 1rem;
}

.map-location-details .details-div .close-btn:hover {
    opacity: .7;
}

.map-location-details .details-div .details-div-desc {
    padding: 2rem;
    line-height: 2.2;
    color: #585858;
}

.map-location-details .details-div-options {
    padding: 1.3rem 2rem;
    border-top: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
}

.map-location-details .details-div-options a svg {
    width: 4.2rem;
    height: 4.2rem;
}

.map-location-details .details-div-options a:not(:last-child) {
    margin-left: 1.5rem;
}

.details-div .cover {
    width: 100%;
    height: 18rem;
}

.details-div .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.details-div .details {
    padding: 1.8rem 1.5rem 1rem;
}

.details #detailsTitle {
    font-size: 1.8rem;
}

.details-div-options #Call ellipse,
.details-div-options #Mail ellipse,
.details-div-options #Direction ellipse,
.details-div-options #Share ellipse {
    fill: rgba(34, 176, 233, 0.1);
    transition: .3s all ease;
}

.map-location-details .details-div-options {
    padding: 1.3rem 2rem;
    border-top: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
}

.map-location-details .details-div-options a svg {
    width: 4.2rem;
    height: 4.2rem;
}

.map-location-details .details-div-options a:not(:last-child) {
    margin-left: 1.5rem;
}

.details-div-options #Call:hover ellipse,
.details-div-options #Mail:hover ellipse,
.details-div-options #Direction:hover ellipse,
.details-div-options #Share:hover ellipse,
.details-div-options #Direction path {
    fill: var(--blue-color);
}

.details-div-options #Call:hover path,
.details-div-options #Mail:hover path,
.details-div-options #Share:hover path {
    stroke: white;
}

.details-div-options #Call path,
.details-div-options #Mail path,
.details-div-options #Share path {
    stroke: var(--blue-color);
}

.details-div-options #Direction:hover path {
    fill: white;
}

.map-page .footer {
    display: none;
}

.details #detailsCoordinates {
    line-height: 2.2;
    font-size: 1rem;
    color: var(--txt-color);
}

#departments.disabled {
    pointer-events: none;
    background-color: #f1f1f1;
    color: #b9b9b9;
}

#departments {
    width: auto;
    padding: 0 .5rem;
    display: flex;
    outline: none;
    border: none;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: white;
    z-index: 99 !important;
    border: 2px solid rgba(0, 0, 0, 0.2);
    font-family: var(--IBM-regular);
    font-size: 1rem;
    margin-left: 1rem;
}

.tabs .nav-tabs {
    padding: 0 1rem;
    display: flex;
}

.tabs .nav-tabs .nav-item .nav-link {
    background-color: transparent;
    padding: 1rem 0 1.5rem 2rem;
    border: none;
}

.tabs .nav-tabs .nav-item .nav-link:hover {
    color: var(--blue-color-hover);
}

.tabs .nav-tabs .nav-item .nav-link.active {
    border: none !important;
    color: var(--blue-color);
}

.tabs .tiles {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--background);
    padding: 2rem 1rem 0;
}

.tabs .tiles .col-md-6 {
    padding: 0;
}

.tabs .tiles .card {
    margin-bottom: 2rem;
    height: 15rem;
}

.tabs .tiles .col-md-6 .card .card-body .pattern {
    position: absolute;
    left: 1rem;
    top: .6rem;
}

.tabs .tiles .col-md-6 .card .card-body .card-text {
    font-size: 1rem;
    color: var(--txt-color);
}

.tabs .tiles .col-md-6 .card .card-body .number {
    font-size: 2rem;
    color: var(--blue-color);
}

.tabs .tiles .col-md-6 .card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 10px solid var(--blue-color);
}

.org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}

.agencies-oc.org-chart {
    padding-bottom: 5rem;
}

.org-chart .main,
.org-chart .sub-main {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.org-chart .chart-members {
    position: relative;
    margin-top: 1rem;
    width: 100%;
}

.org-chart .col-lg-4,
.org-chart.deanship .col-lg-3 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.org-chart .col-lg-4 .card {
    background-color: white;
    border-radius: none;
    border: 1px solid #dfdfdf;
    height: 10rem;
    position: relative;
    overflow: initial;
    margin-bottom: 5rem;
    width: 85%;
}

.org-chart .col-lg-4 .card .card-body,
.org-chart.deanship .col-lg-3 .card .card-body {
    border-top: 7px solid var(--blue-color);
}

.org-chart .main .col-lg-4 .card::after {
    content: "";
    position: absolute;
    top: 121%;
    left: 50%;
    height: 5rem;
    width: 2px;
    background-color: #dfdfdf;
}

.org-chart .col-lg-4 .card .profile,
.org-chart.deanship .col-lg-3 .card .profile {
    position: absolute;
    top: -2rem;
    right: 44%;
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
}

.org-chart .col-lg-4 .card .profile img,
.org-chart.deanship .col-lg-3 .card .profile img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.org-chart .col-lg-4 .card .card-body .pattern,
.org-chart.deanship .col-lg-3 .card .card-body .pattern {
    position: absolute;
    left: 1.25rem;
    top: 1.25rem;
}

.org-chart .col-lg-4 .card .card-body .card-title {
    margin-top: 2rem;
    font-size: 1.5rem;
}

.org-chart .chart-members::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #dfdfdf;
}

.org-chart .chart-members .right-side::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 5rem;
    width: 2px;
    background-color: #dfdfdf;
}

.org-chart .chart-members .col-lg-4:nth-child(6n+1) .card .card-body {
    border-top: 7px solid var(--orange-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+2) .card .card-body {
    border-top: 7px solid var(--green-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+3) .card .card-body {
    border-top: 7px solid var(--purple-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+4) .card .card-body {
    border-top: 7px solid var(--light-green-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+5) .card .card-body {
    border-top: 7px solid var(--navy-blue-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+6) .card .card-body {
    border-top: 7px solid var(--red-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+1) .card .card-body .pattern ellipse {
    fill: var(--orange-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+2) .card .card-body .pattern ellipse {
    fill: var(--green-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+3) .card .card-body .pattern ellipse {
    fill: var(--purple-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+4) .card .card-body .pattern ellipse {
    fill: var(--light-green-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+5) .card .card-body .pattern ellipse {
    fill: var(--navy-blue-color);
}

.org-chart .chart-members .col-lg-4:nth-child(6n+6) .card .card-body .pattern ellipse {
    fill: var(--red-color);
}

.org-chart .chart-members .left-side::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 5rem;
    width: 2px;
    background-color: #dfdfdf;
}

.org-chart .chart-members .cards-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0rem;
    position: relative;
    padding: 5rem 0rem 0;
}

.org-chart.deanship .col-lg-3:nth-child(5n+1) .card .card-body {
    border-top: 10px solid var(--orange-color);
}

.org-chart.deanship .col-lg-3:nth-child(5n+2) .card .card-body {
    border-top: 10px solid var(--green-color);
}

.org-chart.deanship .col-lg-3:nth-child(5n+3) .card .card-body {
    border-top: 10px solid var(--purple-color);
}

.org-chart.deanship .col-lg-3:nth-child(5n+4) .card .card-body {
    border-top: 10px solid var(--red-color);
}

.org-chart.deanship .col-lg-3:nth-child(5n+5) .card .card-body {
    border-top: 10px solid var(--blue-color);
}

.org-chart.deanship .main .col-lg-4 .card::after {
    content: "";
    position: absolute;
    top: 99%;
    left: 50%;
    height: 7.2rem;
    width: 2px;
    background-color: #dfdfdf;
}

.org-chart.deanship .col-lg-4 .card {
    background-color: white;
    border-radius: none;
    border: 1px solid #dfdfdf;
    height: 7rem;
    position: relative;
    overflow: initial;
    margin-bottom: 5rem;
    width: 85%;
}

.org-chart.deanship .col-lg-4 .card .card-title {
    margin-top: 1rem;
}

.org-chart.deanship .chart-members .col-lg-3:nth-child(5),
.org-chart.deanship .chart-members .col-lg-3:nth-child(9) {
    transform: translateX(-6rem);
}

.org-chart.deanship .chart-members .col-lg-3:nth-child(5) .card:after {
    position: absolute;
    width: 2.5px;
    height: 18.6rem;
    background-color: #dfdfdf;
    content: '';
    top: -5.1rem;
    right: -3rem;
}

.org-chart.deanship .chart-members .col-lg-3:nth-child(7) .card:after {
    position: absolute;
    width: 2.5px;
    height: 28.3rem;
    background-color: #dfdfdf;
    content: '';
    top: -5.1rem;
    right: -3rem;
}

.org-chart.deanship .chart-members .col-lg-3:nth-child(5) .card:before,
.org-chart.deanship .chart-members .col-lg-3:nth-child(9) .card:before,
.org-chart.deanship .chart-members .col-lg-3:nth-child(6) .card:before,
.org-chart.deanship .chart-members .col-lg-3:nth-child(10) .card:before,
.org-chart.deanship .chart-members .col-lg-3:nth-child(14) .card:before,
.chart-members .col-lg-3:nth-child(7) .card:before,
.chart-members .col-lg-3:nth-child(11) .card:before,
.chart-members .col-lg-3:nth-child(15) .card:before {
    position: absolute;
    width: 3rem;
    height: 2.5px;
    background-color: #dfdfdf;
    content: '';
    top: 3.8rem;
    right: -3rem;
}

.org-chart.deanship .chart-members .col-lg-3:nth-child(6),
.org-chart.deanship .chart-members .col-lg-3:nth-child(10),
.org-chart.deanship .chart-members .col-lg-3:nth-child(14) {
    transform: translateX(-12.25rem);
}

.org-chart.deanship .chart-members .col-lg-3:nth-child(7),
.org-chart.deanship .chart-members .col-lg-3:nth-child(11),
.org-chart.deanship .chart-members .col-lg-3:nth-child(15) {
    transform: translateX(-18rem);
}

.org-chart.deanship .chart-members::before {
    content: "";
    position: absolute;
    top: 0;
    left: 11rem;
    width: 67rem;
    height: 2px;
    background-color: #dfdfdf;
}

.org-chart.deanship .chart-members .left-side::before {
    content: "";
    position: absolute;
    top: 0;
    left: 11rem;
    height: 5rem;
    width: 2px;
    background-color: #dfdfdf;
}

.org-chart.deanship .chart-members .left-side::after {
    content: "";
    position: absolute;
    top: 0;
    left: 33rem;
    height: 5rem;
    width: 2px;
    background-color: #dfdfdf;
}

.org-chart.deanship .chart-members .right-side::before {
    content: "";
    position: absolute;
    top: 0;
    right: 10rem;
    height: 5rem;
    width: 2px;
    background-color: #dfdfdf;
}

.org-chart.deanship .chart-members .right-side::after {
    content: "";
    position: absolute;
    top: 0;
    right: 32rem;
    height: 37.9rem;
    width: 2px;
    background-color: #dfdfdf;
}

.org-chart.deanship .col-lg-3 .card {
    background-color: white;
    border-radius: none;
    border: 1px solid #dfdfdf;
    height: auto;
    position: relative;
    overflow: initial;
    z-index: 1;
    margin-bottom: 3rem;
    width: 100%;
}

.org-chart.deanship .col-lg-3 .card .card-body .card-title {
    margin-top: 1rem;
    font-size: 1.05rem;
}

.agencies-advisors .card .buttons-container .btn {
    width: 100% !important;
    border-left: none !important;
}

.agencies-advisors .card {
    overflow: hidden;
}

.agencies-oc .col-lg-4 .card .card-body .card-title {
    margin-top: 1rem;
    font-size: 1.2rem;
    line-height: 1.6;
}

.agencies-oc .chart-members::before {
    content: "";
    position: absolute;
    top: 0;
    left: 28rem;
    width: 28.8rem;
    height: 2px;
    background-color: #dfdfdf;
}

.agencies-oc .chart-members .right-side::before {
    content: "";
    position: absolute;
    top: 0;
    right: 30rem;
    height: 43.6rem;
    width: 2px;
    background-color: #dfdfdf;
}

.agencies-oc .chart-members .left-side::before {
    content: "";
    position: absolute;
    top: 0;
    left: 28rem;
    height: 8.2rem;
    width: 2px;
    background-color: #dfdfdf;
}

.agencies-oc .col-lg-4 .card {
    background-color: white;
    border-radius: none;
    border: 1px solid #dfdfdf;
    height: auto;
    position: relative;
    overflow: initial;
    margin-bottom: 2rem;
    width: 85%;
}

.agencies-oc .main .col-lg-4 {
    flex-direction: column;
}

.agencies-oc .main .card:nth-child(2) .card-body {
    border-top: 10px solid #002247;
}

.agencies-oc .col-lg-4 {
    padding: 0;
}

.agencies-oc .col-lg-4:nth-child(3n+3) {
    justify-content: flex-end;
}

.agencies-oc .col-lg-4:nth-child(3n+3) .card::after {
    position: absolute;
    top: 3.5rem;
    right: -3.3rem;
    content: '';
    width: 3.3rem;
    height: 2px;
    background-color: #dfdfdf;
}

.agencies-oc .col-lg-4:nth-child(3) .card {
    transform: translateX(14.5rem);
}

.agencies-oc .col-lg-4:nth-child(3) .card::after {
    content: unset;
}

.agencies-oc .col-lg-4:nth-child(3) .card::before {
    position: absolute;
    top: 6.6rem;
    left: 54%;
    content: '';
    width: 2px;
    height: 26.2rem;
    background-color: #dfdfdf;
}

.agencies-oc .main .col-lg-4 .card::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    height: 4.2rem;
    width: 2px;
    background-color: #dfdfdf;
}

.agencies-oc .chart-members .col-lg-4:nth-child(3n+1) .card::after {
    position: absolute;
    top: 3.5rem;
    left: -5.4rem;
    content: '';
    width: 5.4rem;
    height: 2px;
    background-color: #dfdfdf;
}

.agencies-oc .col-lg-4:nth-child(3n+1) {
    justify-content: flex-start;
}

.agencies-oc .chart-members .col-lg-4:nth-child(3n+1) {
    transform: translateY(4rem)
}

.agencies-t .president-tabview {
    padding-top: 0;
    padding-bottom: 0;
}

.agencies-t .president-tabview.tab-pane ul li::before {
    content: "";
    position: absolute;
    top: 0.7rem;
    right: -2.5rem;
    background-color: var(--red-color);
    height: 1rem;
    width: 1rem;
}

.president-office-oc .col-lg-4 {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.president-office-oc .title {
    Margin-bottom: 5rem;
}

.president-office-oc {
    padding-bottom: 6rem;
}

.president-office-oc .main .col-lg-4 .card::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    height: 7.1rem;
    width: 2px;
    background-color: #dfdfdf;
}

.president-office-oc .col-lg-4 .card {
    height: auto;
    margin-bottom: 1.5rem;
    Z-index: 2;
}

.president-office-oc .main .card:first-child .card-body {
    padding: 2rem;
}

.president-office-oc .main .card:first-child .card-title {
    font-size: 1.5rem !important;
}

.president-office-oc .main .card:nth-child(2) .card-body {
    border-top-color: #002247;
}

.president-office-oc .col-lg-4 .card .card-body .card-title {
    margin-top: 1rem;
    font-size: 1.2rem;
    text-align: center;
}

.president-office-oc.org-chart .chart-members::before {
    content: "";
    position: absolute;
    top: 2rem;
    left: 16.55%;
    width: 67%;
    height: 2px;
    background-color: #dfdfdf;
}

.president-office-oc.org-chart .chart-members .left-side::before {
    content: "";
    position: absolute;
    top: 2rem;
    left: 14.5rem;
    height: 65rem;
    width: 2px;
    background-color: #dfdfdf;
}

.president-office-oc.org-chart .chart-members .right-side::before {
    content: "";
    position: absolute;
    top: 2rem;
    right: 14.5rem;
    height: 64rem;
    width: 2px;
    background-color: #dfdfdf;
}

.president-office-oc.org-chart .main .col-lg-4 .card::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    height: 10.1rem;
    width: 2px;
    background-color: #dfdfdf;
}

.depart-container {
    padding: 1rem 1rem 1rem;
}

.research-int .res-title {
    font-size: 2rem;
    margin-bottom: 0rem;
    padding: 1rem 2rem;
}

.research-int {
    transform: translateX(-100%);
    position: fixed;
    transition: all .3s ease-in-out;
    background-color: white;
    left: 0;
    height: 100vh;
    top: 0;
    width: 100%;
    z-index: 101;
}

.res-interests {
    cursor: pointer;
}

.research-int .close-btn {
    position: absolute;
    top: 1rem;
    display: none;
    position: absolute;
    z-index: 99;
    left: 1.5rem;
}

.research-int .close-btn svg {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
}

.research-int .close-btn svg line#Line_135,
.research-int .close-btn svg line#Line_136 {
    stroke: #fff;
}

.research-int .research {
    margin-bottom: 1rem;
    cursor: pointer;
    font-size: 1.4rem;
    padding: 0 2rem;
}

.research-int.enabled {
    transform: translateX(0);
}

.research-int .image-container {
    height: 11rem;
}

.research-int .image-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.mason-container .load-more {
    margin: auto;
    display: flex;
    width: fit-content;
}

.mason-container .load-more:hover {
    background-color: var(--blue-color-hover);
}

.single-card.col-lg-6 {
    max-width: 100% !important;
    width: 100%;
    flex: 0 0 100%;
}

.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
    margin-bottom: 3rem;
}

.leaflet-popup {
    width: max-content;
}

.map.map-page .leaflet-popup {
    left: 35px !important;
    min-height: 11rem;
    height: auto;
    bottom: -10.7rem !important;
}

.supreme-president .uj-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.uj-card-footer .social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    width: 100%;
    background-color: #fff;
}

.uj-card .social-icons .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-neutral-primary);
    background-color: transparent;
    padding: var(--spacing-none) var(--buttons-md-padding);
    height: 40px;
    width: 40px;
    font-size: 1.25rem;
}

.profile-section .social-icons .icon:hover svg ellipse,
.profile-section .social-icons .icon.instagram:hover svg path:first-child {
    opacity: 1;
    fill: var(--border-primary);
}

.uj-card-footer .social-icons .icon svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.profile-section .social-icons a.twitter.icon:hover path {
    stroke: white;
}

.profile-section .social-icons a.instagram.icon:hover path:nth-child(2) {
    fill: white;
}

.profile-section .social-icons a.facebook.icon:hover path {
    stroke: white;
}

.roles.container {
    Padding-bottom: 2rem;
}

.supreme-president.president-cv .president-informations::after {
    display: none;
}

.supreme-president .president-informations::after {
    content: '';
    position: absolute;
    top: -5rem;
    left: 0rem;
    background-image: url('/themes/uoj_theme/media/Path\ 1702.png');
    height: 5rem;
    width: 5rem;
    background-size: 100%;
    background-position: top;
    background-repeat: no-repeat;
}

.proxies .cards-container .col-lg-4 .card .card-body .social-icons .twitter.Icon svg path {
    fill: var(--border-primary);
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+4) .card .e-actions a:hover svg ellipse {
    fill: var(--red-color);
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+3) .card .e-actions a:hover svg ellipse {
    fill: var(--green-color);
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+2) .card .e-actions a:hover svg ellipse {
    fill: var(--orange-color);
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+1) .card .e-actions a:hover svg ellipse {
    fill: var(--blue-color);
}

.college.tabular-view.E-services .tab-pane .card .e-actions a svg * {
    transition: .3s all ease;
}

.college.tabular-view.E-services .tab-pane .card .e-actions a:hover svg path {
    stroke: white;
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+4) .card .e-actions svg ellipse {
    fill: #F8E9EB;
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+4) .card .e-actions svg path {
    stroke: var(--red-color);
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+3) .card .e-actions svg ellipse {
    fill: #E6F6F4;
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+3) .card .e-actions svg path {
    stroke: var(--green-color);
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+2) .card .e-actions svg ellipse {
    fill: #FBF1EF;
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+2) .card .e-actions svg path {
    stroke: var(--orange-color);
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+1) .card .e-actions svg ellipse {
    fill: #E8F7FD;
}

.college.tabular-view.E-services .tab-pane:nth-child(4n+1) .card .e-actions svg path {
    stroke: var(--blue-color);
}

.college.tabular-view.E-services .card .card-content {
    display: flex;
    flex-direction: column;
    min-height: Calc(100% - 6rem);
    padding: 1.5rem 1rem;
    justify-content: space-between;
}

.college.tabular-view.E-services .card .card-body .e-actions .mail,
.college.tabular-view.E-services .card .card-body .e-actions .Like,
.college.tabular-view.E-services .card .card-body .e-actions .share,
.college.tabular-view.E-services .card .card-body .e-actions .Bookmark {
    width: 3rem;
    height: 3rem;
}

.college.tabular-view.E-services .card .card-body .e-actions svg {
    height: 100%;
    width: 100%;
}

.college.tabular-view.E-services .card .card-body .e-actions {
    display: flex;
    column-gap: 1rem;
}

.college.tabular-view.E-services .card .card-body {
    padding: 0;
    height: 100%;
}

.college.tabular-view.E-services .card .card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #828282;
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 1rem;
}

.college.tabular-view.E-services .card .card-title img {
    width: 3.5rem;
    object-fit: contain;
    height: 3rem;
    margin-left: 1rem;
}

.college.tabular-view.E-services .card .card-title {
    padding: 1rem;
    background-color: #F9F9F9;
    font-size: 1.2rem;
    font-family: var(--IBM-sb);
    display: flex;
    margin-bottom: 0;
    align-items: center;
}

.college.tabular-view.E-services .card {
    border: 1px solid #D9D9D9;
    margin-bottom: 1.8rem;
}

.college.tabular-view.E-services .nav li:first-child a.nav-link::before {
    background-image: url("/themes/uoj_theme/media/e-globe.svg");
}

.college.tabular-view.E-services .nav li:nth-child(2) a.nav-link::before {
    background-image: url("/themes/uoj_theme/media/e-uni.svg");
    filter: brightness(0) saturate(100%) invert(80%) sepia(28%) saturate(5053%) hue-rotate(313deg) brightness(88%) contrast(90%);
}

.college.tabular-view.E-services .nav li:nth-child(3) a.nav-link::before {
    background-image: url("/themes/uoj_theme/media/e-employee.svg");
    filter: brightness(0) saturate(100%) invert(45%) sepia(65%) saturate(4642%) hue-rotate(149deg) brightness(99%) contrast(90%);
}

.college.tabular-view.E-services .nav li:nth-child(4) a.nav-link::before {
    background-image: url("/themes/uoj_theme/media/e-card.svg");
    filter: brightness(0) saturate(100%) invert(36%) sepia(74%) saturate(3586%) hue-rotate(331deg) brightness(72%) contrast(97%);
}

.college.tabular-view.E-services .nav li:nth-child(5) a.nav-link::before {
    content: "";
    background-image: url("/themes/uoj_theme/media/e-users.svg");
    height: 1.6rem;
    width: 1.5rem;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-left: 0.7rem;
    display: none;
}

.supreme-president .president-informations .president-name,
.agent-cv .agent-name {
    font-size: var(--display-sm);
    font-family: var(--IBM-b);
    text-align: start;
}

.supreme-president .president-informations .position,
.agent-cv .position {
    color: var(--text-primary-sa-flag);
    font-size: var(--text-md);
    text-align: start;
    margin: var(--spacing-md) 0 var(--spacing-xl);
}

.supreme-president .president-informations .description p {
    text-align: center;
}

.agent-cv .card .card-img-top {
    min-height: 25rem;
    height: 25rem;
}

.supreme-president .president-informations .buttons-container {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    gap: var(--spacing-xl);
}

.supreme-president .president-informations p.description {
    line-height: 2.7;
    margin-top: 4rem;
}

.advisors.container {
    padding-top: 0rem;
    padding-bottom: 2rem;
}

.proxies .cards-container,
.advisors .cards-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
}

.proxies .cards-container .card .card-body,
.advisors .cards-container .card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: var(--spacing-2xl);
}

.uj-card .social-icons {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: auto;
}

.proxies .cards-container .col-lg-4 .card .card-body .buttons-container,
.advisors .cards-container .col-lg-3 .card .card-body .buttons-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
}

.proxies .cards-container .col-lg-4 .card .card-body .buttons-container .btn,
.advisors .cards-container .col-lg-3 .card .card-body .buttons-container .btn {
    display: flex;
    align-items: center;
    height: 40px;
    border-radius: var(--radius-sm);
    padding: var(--spacing-0) var(--buttons-lg-padding);
    gap: var(--buttons-lg-gap);
    border: none !important;
    font-size: var(--text-md);
}

.proxies .cards-container .col-lg-4 .card .card-body .buttons-container .btn:first-child,
.advisors .cards-container .col-lg-3 .card .card-body .buttons-container .btn:first-child {
    background-color: var(--button-background-primary-default);
    color: white;
}

.proxies .cards-container .col-lg-4 .card .card-body .buttons-container .btn:first-child:hover,
.advisors .cards-container .col-lg-4 .card .card-body .buttons-container .btn:first-child:hover {
    background-color: var(--button-background-primary-hovered);
}

.proxies .cards-container .col-lg-4 .card .card-body .buttons-container .btn:last-child,
.advisors .cards-container .col-lg-3 .card .card-body .buttons-container .btn:last-child,
.supreme-president .president-informations .buttons-container .btn:last-child{
    background-color: var(--button-background-neutral-default);
    color: var(--text-default);
}

.proxies .cards-container .col-lg-4 .card .card-body .buttons-container .btn:last-child:hover,
.advisors .cards-container .col-lg-4 .card .card-body .buttons-container .btn:last-child:hover,
.supreme-president .president-informations .buttons-container .btn:last-child:hover{
    background-color: var(--button-background-neutral-pressed);
}

.roles .title {
    font-size: var(--display-xs);
    font-family: var(--IBM-b);
}

.roles ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom:unset;
}

.roles ul li {
    list-style-type: none;
    color: var(--text-default);
    line-height: 24px;
    font-size: var(--text-md);
    position: relative;
    padding: 0 2rem;
    margin-bottom: var(--spacing-xl);
}

.roles ul li::before {
    content: '';
    position: absolute;
    right: 0;
    background-color: var(--border-primary);
    height: .8rem;
    width: .8rem;
    top: 0.6rem;
}
.contact-zone.container {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.contact-zone .col-lg-6 .card .card-body .card-title {
    font-size: 1.4rem;
    font-weight: 600;
}

.contact-zone .uj-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-xl);
}
.contact-zone .col-lg-6{
    padding:0;
    max-width: 49%;
}
.contact-zone .col-lg-6 .card {
    position: relative;
}
.contact-zone .col-lg-6 .card .card-info{
    padding:var(--spacing-md);
}
.contact-zone .col-lg-6 .card .card-info .uj-btn--lg{
    margin-top:var(--spacing-md);
    width: fit-content;
}
.contact-zone .col-lg-6 .card {
    min-height: 14rem;
}
.contact-zone .col-lg-6 .card .card-info p{
    max-width:90%;
}
.contact-zone .col-lg-6:nth-child(2n+1) .card .card-body .card-text ul li {
    line-height: 2;
    font-size: 1rem;
    list-style-type: none;
    display: inline-block;
    position: relative;
    color: var(--txt-color);
    margin-bottom: 0.7rem;
    text-align: inherit;
}

.contact-zone .col-lg-6 .card .card-body ul {
    margin-bottom: 0;
}

.contact-zone .col-lg-6 .card .card-body .card-text {
    width: 90%;
}

.president-informations .bottom-section,
.agent-cv .bottom-section {
    display: flex;
    flex-direction: column;
}
.president-informations .bottom-section .nationality {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.president-informations .bottom-section>.level,
.agent-cv .bottom-section>.level,
.president-informations .bottom-section>.nationality,
.agent-cv .bottom-section>.nationality {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.uj-card .social-icons .icon:hover {
    background-color: var(--button-background-neutral-hovered); 
    color: var(--link-primary) !important; 
}
.president-informations .bottom-section .title,
.agent-cv .bottom-section .title {
    color: var(--txt-color);
    margin-bottom: var(--spacing-xs);
}



.president-tabview ul li {
    list-style-type: none;
    display: inline-block;
    color: var(--txt-color);
    font-size: 1rem;
    line-height: 2.2;
    position: relative;
}

.president-tabview {
    padding-top: 6rem;
    padding-bottom: 6rem;
    position: relative;
}

.president-tabview .tab-pane {
    padding: 6rem 3rem;
}

.president-tabview .slick-list.draggable .nav-item {
    height: 100%;
    white-space: nowrap;
    margin-bottom: 0;
    height: 5rem;
}

.president-tabview .tab-pane ul li::before {
    content: "";
    position: absolute;
    top: 0.7rem;
    right: -2.5rem;
    background-color: var(--blue-color);
    height: 1rem;
    width: 1rem;
}

.president-tabview .tab-content {
    background-color: white;
    height: 100%;
}

.agent-cv {
    display: flex;
    align-items: flex-start;
    padding-top: 4rem;
    flex-direction: column;
    padding-bottom: 4rem;
}

.agent-cv .card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.agent-cv .card .social-icons {
    display: flex;
    align-items: center;
}

.agent-cv .card .card-body .social-icons .icon {
    height: 3rem;
    width: 3rem;
    margin-left: 1rem;
    cursor: pointer;
}

.agent-cv .card .card-body .social-icons .icon:last-child {
    margin-left: 0;
}

.agent-cv .card .card-body .social-icons .icon svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.clearFContainer {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.clear-filter span {
    text-decoration: underline;
    color: var(--link-primary);
    cursor: pointer;
}

.agent-cv .col-lg-4 {
    padding: 0;
}

.map-location-details .details-div .details-div-desc {
    padding: 2rem;
    line-height: 2.2;
    color: #585858;
}

.map-container .gotomap {
    position: absolute;
    bottom: 0;
    left: 1rem;
    z-index: 2;
    display: flex;
    align-items: baseline;
    background-color: var(--button-background-primary-default);
    padding: 1rem 1.5rem;
    transition: all .3s ease-in-out;
}

.map-container .gotomap:hover {
    background-color: var(--button-background-primary-hovered);
}

.map-container .gotomap .icon {
    height: 1rem;
    width: 1rem;
    margin-left: .5rem;
    position: relative;
}

.map-container .gotomap .icon svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform: translateY(-3px);
}

.map-container .gotomap span {
    color: var(--white);
    font-size: 0.8rem;
}

a#StudyPlanLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 1.4rem 1rem 1.4rem;
    border-top: 1px solid #e5e5e5;
    margin: 0;
    font-size: 1.1rem;
    border-bottom: 1px solid #e5e5e5;
    color: #212529;
    color: var(--blue-color);
}



.accordion-container .contact-infos .icon svg ellipse {
    fill: var(--border-primary);
    opacity: .1;
}

.accordion-container .contact-infos .icon:hover svg ellipse {
    opacity: 1;
}

.accordion-container .pattern ellipse {
    fill: var(--border-primary);
}

.map-popup .contact-info-zone .icon:hover svg path,
.accordion-container .contact-infos .icon:hover svg path,
.branches .card .card-footer .icon:hover svg path {
    stroke: #fff !important;
}

.accordion-container .contact-infos .icon svg path {
    stroke: var(--border-primary);
}

.accordion-container .contact-infos .icon:hover svg path {
    stroke: var(--white);
}

.accordion-container .contact-accordion[aria-expanded="true"] svg {
    transform: rotate(0deg);
}

.accordion-container .contact-infos .icon g#directions-svgrepo-com path#Path_1667,
.accordion-container .contact-infos .icon g#directions-svgrepo-com path#Path_1668,
.accordion-container .contact-infos .icon g#directions-svgrepo-com #Path_1669,
.accordion-container .contact-infos .icon #internet-svgrepo-com #Path_1736 {
    fill: var(--border-primary);
    stroke: none;
}

.map-popup .contact-info-zone .icon:hover g#directions-svgrepo-com path#Path_1667,
.map-popup .contact-info-zone .icon:hover g#directions-svgrepo-com path#Path_1668,
.map-popup .contact-info-zone .icon:hover g#directions-svgrepo-com #Path_1669,
.accordion-container .contact-infos .icon:hover g#directions-svgrepo-com path#Path_1667,
.accordion-container .contact-infos .icon:hover g#directions-svgrepo-com path#Path_1668,
.accordion-container .contact-infos .icon:hover g#directions-svgrepo-com #Path_1669,
.branches .card .card-footer .icon:hover g#directions-svgrepo-com #Path_1667,
.branches .card .card-footer .icon:hover g#directions-svgrepo-com #Path_1668,
.branches .card .card-footer .icon:hover g#directions-svgrepo-com #Path_1669 {
    fill: #fff;
    stroke: none;
}

.map-popup .contact-info-zone .icon:hover #internet-svgrepo-com #Path_1736,
.accordion-container .contact-infos .icon:hover #internet-svgrepo-com #Path_1736,
.branches .card .card-footer .icon:hover #internet-svgrepo-com #Path_1736 {
    fill: #fff;
    stroke: none;
}

.map-popup .pattern {
    position: absolute;
    left: 2rem;
    top: 2rem;
}

.contact-us .accordions-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4xl);
}

.contact-us .accordion-container {
    position: relative;
    width: 48%;
    border-top: 1px solid var(--border-neutral-primary);
    padding: var(--spacing-xl);
}

.accordion-container .contact-accordion>span {
    font-size: var(--text-md);
    color: var(--text-default);
    font-family: var(--IBM-sb);
    line-height: 24px;
}

.accordion-container .contact-accordion {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accordion-container .pattern {
    position: absolute;
    left: 1.5rem;
    top: 1.8rem;
    display: none;
}

.contact-collapse {
    padding: 0 2rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-collapse .contact-infos {
    background-color: transparent;
    margin: 1.5rem 0 0;
}

.contact-collapse .contact-infos .icon {
    height: 2.5rem;
    width: 2.5rem;
}

.contact-collapse .contact-infos .icon svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.contact-collapse .contact-infos .icon {
    margin: 0 .5rem;
}

.contact-collapse .contact-infos .icon:first-child {
    margin: 0 0 0 .5rem;
}

.accordion-container .contact-collapse .informations .subtitle {
    color: var(--txt-color);
    margin-bottom: .5rem;
}

.accordion-container .contact-collapse .informations .location {
    font-size: var(--text-sm);
}

.accordion-container .contact-collapse .informations {
    padding-right: 1rem;
}

.accordion-container .contact-collapse .informations {
    border-right: 3px solid var(--border-primary);
}


.branches .card-footer {
    background-color: transparent;
    display: flex;
    align-items: center;
    padding: .5rem 1rem 1.5rem;
    border: none;
}

.branches .card .pattern {
    position: absolute;
    left: 1rem;
    top: 1rem;
    height: 5rem;
    width: 5rem;
    display: none;
}

.branches .card .card-body .card-title {
    color: var(--text-default);
    font-size: var(--text-lg);
    font-family: var(--IBM-sb);
    margin-bottom: 1rem;
}

.branches .card .card-body .card-text {
    color: var(--txt-color);
    margin-bottom: .5rem;
}

.branches .card .card-body .location {
    font-size: .9rem;
}

.branches .card .pattern svg {
    height: 100%;
    width: 100%;
}

.branches .card-footer .icon {
    height: 2.5rem;
    width: 2.5rem;
    display: block;
    margin: 0 0.4rem;
}

.branches .card-footer .icon svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.right-section .card .rating .star {
    background-image: url("/themes/uoj_theme/media/Icon\ ionic-ios-star-empty.svg");
    height: 1.8rem;
    width: 1.8rem;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 .2rem;
}

.profile .uj-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    overflow: hidden;
    margin-top: 3rem;
}

.profile .right-section {
    border: none;
    padding: 0;
}

.profile .left-section.col-lg-9 {
    padding: 0;
}
.right-section .card .pattern {
    position: absolute;
    left: 0rem;
    top: .7rem;
}

.right-section .card .profile-img {
    overflow: hidden;
    height: 6rem;
    width: 6rem;
    border-radius: 50%;
    /* margin-top: 2.5rem; */
    margin: auto;
}

.right-section .card .profile-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform: none;
}

.right-section .card .name {
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 1rem;
    text-align: center;
    width: 80%;
    margin: auto;
}

.right-section .card .position {
    margin: .5rem auto;
    color: var(--txt-color);
}
.right-section .card .contact-zone .icon svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.right-section .card .contact-zone .icon:hover svg path {
    stroke: #fff;
}

.right-section .card .contact-zone .icon.instagram:hover svg path {
    fill: none;
    stroke: none;
}

.right-section .card .contact-zone .icon:hover svg #insta-footer-logo {
    fill: #fff;
}

.right-section .card .review-cv {
    display: flex;
    padding: 0.8rem 0 0;
    border-top: 1px solid #8080802b;
    justify-content: center;
    width: 100%;
}

.right-section .card .review-cv span {
    color: var(--link-primary);
    transition: all .3s ease-in-out;
    cursor: pointer;
}

.right-section .card .review-cv:hover {
    transition: all .3s ease-in-out;
}

.right-section .card .review-cv:hover span {
    color: var(--link-primary-hovered);
}

.right-section .card .review-cv .icon {
    height: 1.8rem;
    width: 1.2rem;
    margin-left: .7rem;
}

.right-section .card .review-cv .icon svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform: translateY(-3px);
}

.right-section .card .review-cv .icon svg path {
    stroke: var(--link-primary);
}

.profile .left-section .card {
    margin-bottom: 1rem;
    border-radius: .5rem;
}

.profile .left-section .card:last-child .card-body {
    padding: 0;
}

.profile .left-section .card .card-header {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.profile .left-section .card .labels {
    display: flex;
    align-items: flex-start;
}

.profile .left-section .card .labels .label:last-child .icon svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.left-section .card-header .card-title {
    font-size: 1.4rem;
    font-weight: 600;
}

.profile .left-section .card .infos-container {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 2rem;
}

.profile .left-section .card .infos-container .information {
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    white-space: nowrap;
}

.profile .left-section .card .infos-container .information .description {
    text-wrap: wrap;
}

.profile .left-section .card .infos-container .information:not(:last-child) {
    margin-bottom: 2rem;
}

.profile .left-section .card .infos-container .information .title {
    color: var(--txt-color);
    font-size: 1rem;
    margin-bottom: .5rem;
}
.profile .left-section .card .nav-tabs li:not(.swiper-slide-active):hover, 
.agent-profile .tabs-wrapper .nav-tabs li:not(.swiper-slide-active):hover{
    background-color: var(--button-background-neutral-hovered);
}
.agent-profile.profile .nav-tabs .nav-link {
    display: flex;
    justify-content: center;
    padding: 0;
}
.profile .left-section .card .nav-tabs .nav-item.slick-active.slick-current .nav-link {
    color: var(--blue-color);
    border-top: none;
}
.profile .left-section .card .tab-pane.slick-current.slick-active {
    display: block;
    opacity: 1 !important;
}

.profile .left-section .card .card-body {
    padding: 2rem 1rem;
}

.profile .left-section .card .tab-pane ul {
    list-style-type: none;
    padding-right: 2.5rem;
}

.profile .left-section .card .tab-pane ul li {
    position: relative;
}

.right-section .work-hours .officeworkHours .schedule {
    display: inline;
    text-align: center;
    font-size: 1rem;
    width: max-content;
    padding: 1rem;
    padding-right: 0;
}

.right-section .work-hours .officeworkHours .schedule>div {
    display: flex;
    align-items: baseline;
}

.right-section span.header {
    text-align: right;
    color: var(--txt-color);
    border: none;
    font-weight: 500;
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 0rem;
    width: 50%;
}

.right-section span.header:first-child {
    padding-right: 1rem;
    padding-left: 1rem;
}

.right-section .schedule span {
    border: none;
    padding: 1.7rem 1rem;
    width: 50%;
}

.work-hours span#officeHoursEmpty {
    width: 100%
}

.right-section table td.schedule .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 .3rem;
}

.right-section .card.work-hours {
    border-top: 1px solid rgba(0, 0, 0, .125);
    overflow: hidden;
    align-items: initial;
}
.right-section .card.work-hours .card-title {
    font-size: 1.4rem;
    padding-right: 1rem;
    padding-top: 1.5rem;
    font-weight: 600;
}

button.input-group-text.dept-search {
    background-color: var(--blue-color);
    border-radius: 0;
}

button.input-group-text.dept-search span {
    color: white;
    margin-left: 0.7rem;
}

.search.input-group .form-control {
    border-radius: 0;
    padding: .6rem 1rem;
    border: none;
}

.search.input-group {
    padding-bottom: 3rem;
    z-index: 2;
}

.result-body .card:hover .card-title {
    color: var(--blue-color);
}

.result-body .card {
    display: flex;
    flex-direction: column;
    height: fit-content;
}

.result-body .card .card-img {
    width: 100%;
    height: auto;
}

.result-body .card .card-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.associates-tiles.spinner-border.result {
    position: absolute;
}

#SearchLoadMore,
#UniversityPoliciesLoader {
    display: none;
    margin: 1rem auto;
}

li.nav-item.has-child ul {
    padding-right: 0;
}

li.nav-item.has-child ul.show {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

li.nav-item.has-child ul li.nav-item div.head {
    justify-content: flex-start;
    align-items: start;
}

#sectors .nav-link {
    margin-right: 2rem;
}

.profile .left-section .card {
    border: 1px solid rgba(0, 0, 0, .125);
}

.functional-competitions .card {
    overflow: hidden;
    height: 25rem;
}

.established-initiatives .accordion .card .category {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--blue-color);
    color: white;
    z-index: 1;
    padding: .5rem 2rem;
}

.contact-us .map-container .leaflet-popup-content-wrapper {
    display: flex;
    align-items: center;
}

.details-panel .tabs {
    display: flex;
    flex-wrap: wrap;
}

.details-panel .tabs .card .card-title {
    color: var(--txt-color);
    font-size: 1.1rem;
    min-width: fit-content;
}

.details-panel .tabs .card .card-text {
    color: var(--black-color);
    font-size: 1rem;
}

.details-panel .tiles .col-lg-4:nth-child(3n+1) {
    padding-right: 0;
}

.details-panel .tiles .col-lg-4:nth-child(3n+3) {
    padding-left: 0;
}

.details-panel .labels {
    display: flex;
    align-items: center;
    padding: 0 1rem 1rem;
}

.details-panel .labels .label {
    display: flex;
    align-items: baseline;
    padding: .5rem 1.5rem;
    font-size: .8rem;
    margin-left: 1rem;
}

.details-panel .labels .label:first-child {
    background-color: #00baff40;
    color: var(--blue-color);
}

.details-panel .labels .label:last-child {
    border: 1px solid lightgray;
}

.details-panel .labels .label:last-child .icon {
    margin-left: .4rem;
    height: 1rem;
    width: 1rem;
}

.details-panel .labels .label:last-child .icon img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.details-panel .card-img-overlay {
    display: none !important;
}

.details-panel .side-panel .card-img-overlay {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    border: 1px solid white;
    height: fit-content;
    width: fit-content;
    padding: 0.3px .7rem;
    left: 4rem;
    right: auto;
    top: 3rem;
    z-index: 75;
}

.details-panel .side-panel {
    position: relative;
    padding-bottom: 4rem;
}

.details-panel .side-panel .card-img-overlay .from,
.details-panel .side-panel .card-img-overlay .to {
    color: white;
    font-size: .7rem;
}

.details-panel .side-panel .card-img-overlay .icon svg {
    margin: 0 .5rem;
    height: .7rem;
    width: .7rem;
    position: relative;
}

.details #detailsTitle {
    margin-bottom: 0;
    font-size: 1.4rem;
}

.details #detailsCoordinates {
    line-height: 2.2;
    font-size: 1rem;
    color: var(--txt-color);
}

.map-location-details .details-div-options {
    padding: 1rem 2rem;
    border-top: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
}

.map-location-details .details-div-options a:not(:last-child) {
    margin-left: 1.5rem;
}

.map-location-details .details-div .details-div-desc {
    padding: 1rem 2rem;
    line-height: 2.2;
    color: #585858;
}

.map-location-details .details-div-options a svg {
    width: 3rem;
    height: 3rem;
}

.map-location-details .details-div .close-btn {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    opacity: 1;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .5);
    transition: .3s all ease;
    cursor: pointer;
    height: 2.8rem;
    width: 2.8rem;
}

.map-location-details .details-div .close-btn svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.map-location-details .details-div .close-btn:hover {
    opacity: .7;
}

.work-hours span {
    color: var(--txt-color);
    width: 50%;
    padding: 1.4rem 1rem;
}

.work-hours .schedule .from,
.work-hours .schedule .to {
    text-wrap: balance;
    font-size: .9rem;
}

.work-hours .schedule .icon {
    align-items: center;
    justify-content: center;
}

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty .icon {
    height: 8rem !important;
    width: 8rem !important;
    margin-bottom: 1rem;
}

.empty .icon img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.empty .message-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.empty .message-txt {
    color: var(--txt-color);
    font-size: .8rem;
}

.details-panel .img-holder::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(0 0 0 / 40%);
    z-index: 60;
}

.details-panel .img-holder {
    position: relative;
}

.f-services .spinner-border {
    right: 45%;
    position: relative;
    z-index: 3;
    margin-top: 5rem;
    margin-bottom: 2rem;
    display: none;
}

.faq-loader.spinner-border {
    position: relative;
    right: 50%;
    display: none;
}

.submit-button {
    border: none;
    outline: none;
}

.open-data-iframe {
    height: 50vh;
}

.about-swiper-section .card .icon {
    height: 3rem;
    width: 3rem;
    display: none;
}

.about-swiper-section .card .icon img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

p.contact-mail.container {
    font-weight: 600;
    font-size: 1.3rem;
    margin: 1.3rem 0;
}

.login {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    background-color: white;
}

.login .right-section {
    position: relative;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    height: auto;
    background: linear-gradient(196deg, #22B0E9, #187396, #013874, #77478E);
}

.login .right-section h4.title {
    font-size: 1.8rem;
    color: white;
    margin-bottom: 1.5rem;
    margin-top: 4rem;
}

.login .right-section p.description {
    color: white;
    margin: 0;
    padding: 0;
    font-weight: 500;
}

.login .right-section .header .small-logo img {
    height: 4rem;
    width: 4rem;
}

.login .right-section .header .long-logo img {
    width: 11rem;
    height: 4.5rem;
    object-fit: contain;
}

.login .right-section img {
    transform: scaleX(1);
}

.login .right-section .header {
    display: flex;
    align-items: center;
}

.login .right-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("/themes/uoj_theme/media/login-pattern.png");
    background-size: 100%;
    background-position: left bottom;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
}

.login .left-section {
    padding: 2rem 1rem;
    position: relative;
    height: auto;
    overflow: auto;
    background-color: white;
}

.login .left-section form {
    width: 100%;
    position: relative;
}

.login .left-section form input {
    position: relative;
    width: 99%;
    color: rgb(35, 31, 32);
    font-weight: 400;
    border: 1px solid rgb(236, 237, 238);
    padding: 12px 20px;
    outline: 0px;
    z-index: 1;
    background: transparent;
}

.login .left-section form .text-box {
    position: relative;
    margin-bottom: 1.5rem;
}

.login .left-section .text-box .input__field:focus {
    border-color: var(--blue-color);
}

.login .left-section form button {
    background-color: var(--blue-color);
    transition: all .3s ease-in-out;
    padding: 0.9rem 2.1rem;
    color: white;
    font-family: var(--IBM-regular);
    font-size: 1rem;
}

.login .left-section form button:hover {
    background-color: var(--blue-color-hover);
}

.left-section .header {
    display: flex;
    align-items: center;
}

.left-section .header img {
    height: 3rem;
    width: 3rem;
    margin-left: 1rem;
}

.left-section .header .title {
    font-size: 1.4rem;
    font-weight: 600;
}

.left-section .body .choice-change {
    margin: 2rem auto;
    text-align: center;
    position: relative;
    color: var(--txt-color);
}

.left-section .body .choice-change::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 45%;
    top: .7rem;
    right: 0;
    background-color: lightgray;
}

.left-section .body .choice-change::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 45%;
    top: .7rem;
    left: 0;
    background-color: lightgray;
}

.left-section p.description {
    margin: 1.2rem 0;
    width: 100%;
}

.left-section form:last-child button {
    background-color: var(--green-color);
    transition: var(--transition);
}

.left-section form:last-child button:hover {
    background-color: var(--green-color-hover);
}

.left-section .title-section {
    display: flex;
    align-items: center;
}

.left-section .title-section .title {
    font-size: 1.4rem;
    font-weight: 600;
}

.left-section .title-section img {
    height: 2.5rem;
    width: 2.5rem;
    margin-left: 1rem;
}

.left-section .text-box .input__label {
    color: rgb(106, 121, 137);
    cursor: text;
    position: absolute;
    top: 3.6px;
    right: 20px;
    padding: 10px 5px;
    font-size: .9rem;
    background-color: white;
    z-index: 0;
    transition: var(--transition);
}

.left-section .text-box .input__field:focus+.input__label,
.left-section .text-box .input--filled {
    transform: translate3d(0px, -24px, 0px);
    background: white;
    color: var(--blue-color);
    font-size: 0.8rem;
    z-index: 1;
}

.login .left-section form .input__label.input-has-value {
    transform: translate3d(0px, -24px, 0px);
    font-size: 0.8rem;
    background-color: white;
    z-index: 1;
}

.image-container .social-icons .icon:hover path#path1009 {
    stroke: white;
    fill: white;
}

.image-container .social-icons .icon path {
    transition: all .3s ease-in-out;
}

.proxies .cards-container .col-lg-4 .card .card-body .social-icons .icon:hover svg ellipse {
    opacity: 1
}

.proxies .cards-container .col-lg-4 .card .card-body .social-icons .icon:nth-child(3n+1):hover svg path {
    stroke: white;
    fill: white;
}

.proxies .cards-container .col-lg-4 .card .card-body .social-icons .icon:nth-child(3n+2):hover svg path#Icon_awesome-instagram {
    fill: white;
}

.proxies .cards-container .col-lg-4 .card .card-body .social-icons .icon:hover svg path {
    stroke: white;
}

.proxies .cards-container .col-lg-4 .card .card-body .social-icons .icon:hover path#Path_1701 {
    opacity: 1;
}

.beta-ribbon {
    width: 100%;
    background-color: #c5285a;
    text-align: center;
    padding: 0.5rem 0;
    color: white;
    position: relative;
    z-index: 5;
    display: none;
}

.clear-filter{ 
    margin: var(--spacing-xl) 0; 
}

.aca-filter .dropdown::after {
    content: '';
    background-image: url('/themes/uoj_theme/media/chevron-down-green.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    left: 1rem;
    top: 50%;
    transform: translateY(-30%);
    height: 0.7rem;
    width: 0.7rem;
    position: absolute;
}

#PoliciesContentTab {
    opacity: 1 !important;
    width: 100%;
}

.android path {
    fill: white;
}

.care-tiles span.no-result {
    text-align: center;
    width: 100%;
    display: block;
}

.survey-form-container {
    background-color: white;
}

.form-required::before {
    content: '*';
    color: red;
    margin-left: .1rem;
}

.college .slick-track {
    display: flex;
}

.college .tabular-view {
    overflow: hidden;
}

.reader #rsmpl_container .rs-player-loadindicator,
.reader .rsbtn .rs-player-loadindicator {
    left: 0 !important;
    right: 0;
    width: 100%;
}

.dropdown-menu-container {
    position: relative;
}

.quick-links .swiper-wrapper {
    height: 100%;
    width: 80%;
    position: relative;
    align-items: center;
}

.poll-view-form .submit-button {
    background-color: var(--blue-color);
    color: white;
    padding: .8rem 2rem;
    margin: 0 1.5rem;
}

.services-container .swiper-slide[aria-label="1 / 1"] {
    width: 100% !important;
}

.quick-links.swiper .swiper-button-prev {
    height: 2rem;
    width: 2rem;
    display: none;
    right: 10.4rem;
    top: 2.6rem;
    transform: scaleX(-1) translate(0);
}

.quick-links.swiper .swiper-button-next {
    height: 2rem;
    width: 2rem;
    left: 5rem;
    top: 2.6rem;
    transform: translate(0);
    display: none;
}

.quick-links .swiper-button-prev.swiper-button-disabled,
.quick-links .swiper-button-next.swiper-button-disabled {
    display: none !important;
}

.quick-links .swiper-button-prev svg,
.quick-links .swiper-button-next svg,
.quick-links .swiper-button-prev svg g,
.quick-links .swiper-button-next svg g {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.mobile-menu nav.navbar {
    padding: 0;
}

.mobile-menu .nav-item .nav-link {
    padding: 1.5rem 2rem;
}

.mobile-menu .nav-item .nav-link:hover,
.sec-menu-container .nav-item a:hover,
.mobile-menu .nav-item .dropdown-toggle:hover {
    color: var(--blue-color);
}

.mobile-menu .nav-item .nav-link:hover,
.sec-menu-container .links-container .nav-item a:hover,
.mobile-menu .nav-item .dropdown-toggle:hover {
    background-color: #fbfafa;
}

.mobile-menu .navbar .dropdown .dropdown-menu a.dropdown-item {
    border: none;
}

.mobile-menu .navbar .dropdown-menu {
    background-color: transparent;
}

.news-advertisements.container .items a:nth-child(n+2) {
    display: none;
}
.sec-menu-container {
    position: fixed;
    background-color: white;
    width: 100%;
    height: calc(100vh - 4.1rem);
    top: 0;
    transform: translateX(-100%);
    transition: all .3s ease-in-out;
    left: 0;
    z-index: 1;
}

.sec-menu-container.active {
    transform: translateX(0%);
}

.sec-menu-container .top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem 0 0rem;
}

.sec-menu-container .sec-layer-information {
    display: flex;
    align-items: center;
    margin: 1rem;
    color: var(--blue-color);
}

.sec-menu-container .sec-layer-information .icon {
    transform: scaleX(-1);
    margin-left: .7rem;
    cursor: pointer;
}

.sec-menu-container .links-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sec-menu-container .nav-item .nav-link {
    color: var(--black-color);
}

.mobile-menu .languages-popup {
    position: fixed;
    bottom: 0;
    right: 1rem;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    border-radius: .5rem;
    background-color: white;
    width: 80% !important;
    margin: auto;
    transform: translateY(100%);
    opacity: 0;
    transition: all .3s ease-in-out;
    z-index: 2;
}

.languages-popup .languages-list {
    padding: 1rem;
    width: 100%;
}

.languages-popup .languages-popup-header {
    font-size: 1.3rem;
    padding: 1rem 2rem;
    border-bottom: 1px solid lightgrey;
    width: 100%;
}

.mobile-menu .languages-popup.active {
    transform: translateY(-5rem);
    opacity: 1;
    display: flex !important;
}

.lang-popup-overlay.active {
    display: block;
}

.lang-popup-overlay {
    content: "";
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    background-color: #07070759;
}

.mobile-menu .languages-popup .languages-list a.language.active {
    background-color: #f9f9f9;
}

.mobile-menu .languages-popup .languages-list a.language {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    color: var(--black-color);
    position: relative;
    transition: all .3s ease-in-out;
    border-radius: 0.7rem;
    padding: 1rem 1rem;
}

.mobile-menu .languages-popup .languages-list a.language.active::after {
    content: "";
    background-image: url("/themes/uoj_theme/media/Icon awesome-check.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 1.4rem;
    left: 1rem;
    height: 1.5rem;
    width: 1.5rem;
}

.mobile-menu .languages-popup .languages-list a.language .icon {
    height: 2rem;
    width: 2rem;
    margin-left: .7rem;
}

.mobile-menu .languages-popup .languages-list a.language .icon img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.tab-pane .e-service-cards {
    padding-left: 1rem;
    padding-right: 1rem;
}

.quick-links-container {
    display: flex;
    align-items: center;
    background-color: white;
    border-top: 1px solid var(--background-neutral-300);
}

.quick-links.swiper::before {
    content: "";
    position: absolute;
    z-index: 2;
    right: 0rem;
    top: 0;
    height: 100%;
    background: linear-gradient(45deg, white, transparent);
    width: 1rem;
    display: none;
}

.quick-links.swiper::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0rem;
    top: 0;
    height: 100%;
    background: linear-gradient(45deg, white, transparent);
    width: 1rem;
}

.contact-section-informations {
    display: flex;
    padding-right: 1rem;
    padding-left: 1rem;
    margin: 0;
}

.col-lg-7.contact-us {
    padding: 0;
}

.contact-section-informations .col-lg-5 h2.section-title {
    margin: 0;
    text-align: right;
}

.contact-information-zone .cinformation {
    display: flex;
    align-items: baseline;
    margin-bottom: 1.5rem;
}

.contact-information-zone .cinformation a {
    color: var(--blue-color);
    transition: all .3s ease-in-out;
}

.contact-information-zone .cinformation a:hover {
    color: var(--blue-color-hover);
}

.contact-information-zone .cinformation .icon {
    height: 1.5rem;
    width: 1.5rem;
    margin-left: .7rem;
}

.contact-information-zone .cinformation .icon img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.contact-section-informations .map-container {
    overflow: hidden;
}

.contact-section-informations .map-container #map {
    height: 70vh;
    width: 100%;
}
.contact-section-informations .col-lg-5 p.description {
    margin-bottom: 4rem;
}

.contact-section-informations .col-lg-5 .ctopic {
    font-weight: 600;
    margin-left: .7rem;
    font-size: 1rem;
    color: var(--black-color);
}

.emerg-services ul li {
    position: relative;
    display: flex;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.emerg-services ul li .ctopic {
    font-weight: 600;
    margin-left: 1rem;
    color: var(--black-color);
}



.emerg-services ul li::before {
    content: "";
    position: absolute;
    height: 1rem;
    width: 1rem;
    background-color: var(--blue-color);
    top: 0.3rem;
    right: -2rem;
}

.university-services .emerg-tabs .nav-item .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.university-services .emerg-tabs .nav-item .nav-link .icon {
    height: 1.5rem;
    width: 1.5rem;
    margin-left: .7rem;
    display: none;
    filter: grayscale(1);
}

.university-services .emerg-tabs .nav-item .nav-link.active .icon {
    filter: grayscale(0);
}

.university-services .emerg-tabs .nav-item .nav-link .icon svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.established-initiatives .accordion .card {
    cursor: pointer;
}

.steps-app .read-more-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.enrollment-section .col-lg-6 .card .card-image::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 60%);
}

.emerg-services {
    padding: 1rem;
}

.associates-tiles .fade-up {
    opacity: 1 !important;
}


input[type="date"]:focus.no-content:before {
    content: '' !important;
}

input[type="date"] {
    display: flex;
}

.contact-section-informations.informations-contact {
    background-color: white;
    border-bottom: 1.5px solid #eaeaea;
}

.contact-section-informations.informations-contact .map-container #map {
    height: 40vh;
}

.contact-section-informations.informations-contact .section-title {
    padding: 2rem 0 0;
    font-family: var(--IBM-sb);
}

.contact-section-informations.informations-contact .contact-information-zone {
    font-size: 1.1rem;
}

.contact-section-informations {
    background-color: white;
}

.mobile-menu .first .sec-menu .nav-item:last-child {
    display: block;
}

.contact-us .services .service a.start.no-click {
    cursor: no-drop;
}

.leaflet-popup::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    background-color: white;
    height: 1rem;
    width: 1rem;
    top: 36%;
    transform: rotate(45deg);
}

.leaflet-popup-tip-container {
    display: none;
}

a#LoginMobileView:hover {
    background-color: #EBEBEB;
}

.tab-pane.pbi {
    padding: 0 !important;
}

.feedback-v2 .feedback-section {
    position: relative;
    width: 100%;
    background-color: white;
}

.feedback-v2 .rating,
.feedback-v2 .feedback-ques {
    padding: 0;
}

.feedback-v2 .rating {
    border-top: 8px solid var(--navy-blue-color);
}

.feedback-v2 .feedback-ques {
    border-top: 8px solid var(--green-color);
    transition: transform 0.5s ease;
    transform: translateY(0);
    position: relative;
    z-index: 2;
    background-color: white;
}

.feedback-v2 .feedback-ques .closebtn {
    margin-right: auto;
    display: none;
    position: relative;
    z-index: 1;
    float: left;
    border: 0;
    padding: 1rem;
    transition: opacity 0.3s ease;
    background-color: transparent;
}

.feedback-v2 #Line_135,
.feedback-v2 line#Line_136 {
    stroke: black;
}

.feedback-v2 .feedback-ques .closebtn:hover {
    opacity: 0.4;
}

.feedback-v2 .feedback-ques.opened .closebtn {
    display: inline-block;
}

.feedback-v2 .col-md-6>div {
    padding-top: 2rem;
    padding-bottom: 2rem;
    position: relative;
    height: 100%;
}

.feedback-v2 .feedback-ques.opened>div {
    border-right: 1px solid #dedede;
}

.feedback-v2 .rating>div {
    border-left: 1px solid #dedede;
}

.feedback-v2 .rating>div::before {
    content: url(/themes/uoj_theme/media//about-s2-t1.svg);
    position: absolute;
    left: 1rem;
    top: 0;
}

.feedback-v2 .feedback-ques>div::before {
    content: url(/themes/uoj_theme/media//about-s2-t2.svg);
    position: absolute;
    left: 1rem;
    top: 0;
}

.feedback-v2 .title {
    font-family: var(--IBM-b);
    margin-bottom: 2rem;
}

.feedback-v2 .feedback-buttons li a {
    border-radius: 99rem;
    background-color: transparent;
    padding: 0.5rem 1.75rem;
    border: 1px solid #dedede;
    margin-left: 1rem;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
}

.feedback-v2 .feedback-buttons li a.active {
    background-color: #0DA29012;
    border-color: var(--green-color);
}

.feedback-v2 .feedback-buttons li:hover a {
    background-color: #0DA29012;
    border-color: var(--green-color);
}

.feedback-v2 .feedback-ques .tab-content .title {
    margin-top: 4rem;
}

.feedback-v2 .published-time {
    border-top: 1px solid #e8e8e8;
    background-color: #FAFAFA;
    display: flex;
    padding-top: 1rem;
    padding-bottom: 1rem;
    z-index: 2;
    align-items: center;
}

.published-time svg {
    position: absolute;
    left: 1rem;
    right: auto;
    display: none;
}

.published-time span svg {
    position: relative;
    left: unset;
    right: unset;
    display: block;
}

.feedback-v2 .published-time p {
    color: #484848;
    margin-bottom: 0;
    font-size: 0.8rem;
}

.feedback-v2 .published-time span {
    margin-left: 1rem;
}

.rating-text {
    color: #777777;
    font-size: 0.8rem;
    margin: 1rem 0 0;
}

input[type="checkbox"] {
    scale: 1.2;
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    background-color: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 1rem;
    border-radius: 2px;
}

input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='white'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 77%;
    background-color: var(--green-color);
    border-color: var(--green-color);
}

.reason-option {
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.btn.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.send-review {
    padding: 0.5rem 1.5rem;
    background-color: var(--green-color);
    border-color: var(--green-color);
    transition: all 0.3s ease;
    border-radius: 0;
    color: white;
    margin-top: 2rem;
    font-family: var(--IBM-regular);
}

.send-review:hover {
    background-color: #096c60;
    border-color: #096c60;
    color: white;
}

.another-reason-smile,
.another-reason-sad {
    display: none;
    border-bottom: 2px solid #e5e5e5;
}

.another-reason-smile input,
.another-reason-sad input {
    background-color: transparent;
    border: 0;
}

.another-reason-smile input:focus,
.another-reason-sad input:focus {
    outline: none;
}

.feedback-ques .submitted {
    display: flex;
    align-items: center;
    height: 3rem;
    margin-right: -1rem;
}

.feedback-ques .submitted .message {
    color: #5F5F5F;
    margin: 0;
}

.feedback-v2 lottie-player {
    height: auto !important;
}

.rating__display {
    font-size: 1em;
    font-weight: 500;
    min-height: 1.25em;
    position: absolute;
    top: 100%;
    width: 100%;
    text-align: center;
}

.rating__stars,
.feedback-v2 .feedback-buttons {
    display: flex;
    position: relative;
    align-items: center;
    flex-wrap: nowrap;
}

.rating__star {
    display: block;
    overflow: visible;
    pointer-events: none;
    width: 2em;
    height: 2em;
}

.rating__star-ring,
.rating__star-fill,
.rating__star-line,
.rating__star-stroke {
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.rating__star-ring,
.rating__star-fill,
.rating__star-line {
    stroke: var(--dark-blue);
}

.rating__star-fill {
    fill: var(--dark-blue);
    transform: scale(0);
    transition: fill var(--trans-dur) var(--bezier), transform var(--trans-dur) var(--bezier);
}

.rating__star-line {
    stroke-dasharray: 12 13;
    stroke-dashoffset: -13;
}

.rating__star-stroke {
    stroke: #c7cad1;
    transition: stroke var(--trans-dur);
}

.rating__label {
    cursor: pointer;
    padding: 0.125em;
    font-size: 0.9rem;
}

.rating__label:last-of-type {
    margin-left: 1rem;
}

.rating__label--delay1 .rating__star-ring,
.rating__label--delay1 .rating__star-fill,
.rating__label--delay1 .rating__star-line,
.rating__label--delay1 .rating__star-stroke {
    animation-delay: 0.05s;
}

.rating__label--delay2 .rating__star-ring,
.rating__label--delay2 .rating__star-fill,
.rating__label--delay2 .rating__star-line,
.rating__label--delay2 .rating__star-stroke {
    animation-delay: 0.1s;
}

.rating__label--delay3 .rating__star-ring,
.rating__label--delay3 .rating__star-fill,
.rating__label--delay3 .rating__star-line,
.rating__label--delay3 .rating__star-stroke {
    animation-delay: 0.15s;
}

.rating__label--delay4 .rating__star-ring,
.rating__label--delay4 .rating__star-fill,
.rating__label--delay4 .rating__star-line,
.rating__label--delay4 .rating__star-stroke {
    animation-delay: 0.2s;
}

.rating__input {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
}

.rating__input:hover~[data-rating]:not([hidden]) {
    display: none;
}

.rating__input-1:hover~[data-rating="1"][hidden],
.rating__input-2:hover~[data-rating="2"][hidden],
.rating__input-3:hover~[data-rating="3"][hidden],
.rating__input-4:hover~[data-rating="4"][hidden],
.rating__input-5:hover~[data-rating="5"][hidden],
.rating__input:checked:hover~[data-rating]:not([hidden]) {
    display: block;
}

.rating__input-1:hover~.rating__label:first-of-type .rating__star-stroke,
.rating__input-2:hover~.rating__label:nth-of-type(-n + 2) .rating__star-stroke,
.rating__input-3:hover~.rating__label:nth-of-type(-n + 3) .rating__star-stroke,
.rating__input-4:hover~.rating__label:nth-of-type(-n + 4) .rating__star-stroke,
.rating__input-5:hover~.rating__label:nth-of-type(-n + 5) .rating__star-stroke {
    stroke: var(--dark-blue);
    transform: scale(1);
}

.rating__input-1:checked~.rating__label:first-of-type .rating__star-ring,
.rating__input-2:checked~.rating__label:nth-of-type(-n + 2) .rating__star-ring,
.rating__input-3:checked~.rating__label:nth-of-type(-n + 3) .rating__star-ring,
.rating__input-4:checked~.rating__label:nth-of-type(-n + 4) .rating__star-ring,
.rating__input-5:checked~.rating__label:nth-of-type(-n + 5) .rating__star-ring {
    animation-name: starRing;
}

.rating__input-1:checked~.rating__label:first-of-type .rating__star-stroke,
.rating__input-2:checked~.rating__label:nth-of-type(-n + 2) .rating__star-stroke,
.rating__input-3:checked~.rating__label:nth-of-type(-n + 3) .rating__star-stroke,
.rating__input-4:checked~.rating__label:nth-of-type(-n + 4) .rating__star-stroke,
.rating__input-5:checked~.rating__label:nth-of-type(-n + 5) .rating__star-stroke {
    animation-name: starStroke;
}

.rating__input-1:checked~.rating__label:first-of-type .rating__star-line,
.rating__input-2:checked~.rating__label:nth-of-type(-n + 2) .rating__star-line,
.rating__input-3:checked~.rating__label:nth-of-type(-n + 3) .rating__star-line,
.rating__input-4:checked~.rating__label:nth-of-type(-n + 4) .rating__star-line,
.rating__input-5:checked~.rating__label:nth-of-type(-n + 5) .rating__star-line {
    animation-name: starLine;
}

.rating__input-1:checked~.rating__label:first-of-type .rating__star-fill,
.rating__input-2:checked~.rating__label:nth-of-type(-n + 2) .rating__star-fill,
.rating__input-3:checked~.rating__label:nth-of-type(-n + 3) .rating__star-fill,
.rating__input-4:checked~.rating__label:nth-of-type(-n + 4) .rating__star-fill,
.rating__input-5:checked~.rating__label:nth-of-type(-n + 5) .rating__star-fill {
    animation-name: starFill;
}

.rating__input-1:not(:checked):hover~.rating__label:first-of-type .rating__star-fill,
.rating__input-2:not(:checked):hover~.rating__label:nth-of-type(2) .rating__star-fill,
.rating__input-3:not(:checked):hover~.rating__label:nth-of-type(3) .rating__star-fill,
.rating__input-4:not(:checked):hover~.rating__label:nth-of-type(4) .rating__star-fill,
.rating__input-5:not(:checked):hover~.rating__label:nth-of-type(5) .rating__star-fill {
    fill: var(--navy-blue-color);
}

.rating__sr {
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
}

.result-body .spinner-border.result {
    position: absolute;
    right: 50%;
    top: 1rem;
}

button.resetSearch {
    color: var(--blue-color);
    white-space: nowrap;
    text-decoration: underline;
}

.polls-side-menu .answers-section .result .percentage .text {
    min-width: 13%;
}

.opportunities .swiper-slide .card .date span {
    font-size: var(--text-sm);
}






.eservices-container .fieldset-wrapper>div:first-child .form-radios.form--inline {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    white-space: nowrap;
}

.eservices-container .fieldset-wrapper>div:first-child .form-radios.form--inline::-webkit-scrollbar {
    display: none;
}

.eservices-container .fieldset-wrapper>div:first-child .form-radios.form--inline .form-item {
    scroll-snap-align: start;
}

.eservices-container .fieldset-wrapper>div:first-child .form-radios.form--inline label {
    white-space: nowrap;
}



@media (prefers-color-scheme: dark) {
    :root {
        --bg: #17181c;
        --fg: #e3e4e8;
    }

    .rating__star-stroke {
        stroke: #454954;
    }
}

@keyframes starRing {

    from,
    20% {
        animation-timing-function: ease-in;
        opacity: 1;
        r: 8px;
        stroke-width: 16px;
        transform: scale(0);
    }

    35% {
        animation-timing-function: ease-out;
        opacity: 0.5;
        r: 8px;
        stroke-width: 16px;
        transform: scale(1);
    }

    50%,
    to {
        opacity: 0;
        r: 16px;
        stroke-width: 0;
        transform: scale(1);
    }
}

@keyframes starFill {

    from,
    40% {
        animation-timing-function: ease-out;
        transform: scale(0);
    }

    60% {
        animation-timing-function: ease-in-out;
        transform: scale(1.2);
    }

    80% {
        transform: scale(0.9);
    }

    to {
        transform: scale(1);
    }
}

@keyframes starStroke {
    from {
        transform: scale(1);
    }

    20%,
    to {
        transform: scale(0);
    }
}

@keyframes starLine {

    from,
    40% {
        animation-timing-function: ease-out;
        stroke-dasharray: 1 23;
        stroke-dashoffset: 1;
    }

    60%,
    to {
        stroke-dasharray: 12 13;
        stroke-dashoffset: -13;
    }
}

.rating-text {
    margin-top: 1rem;
}

.rating form {
    display: flex;
    flex-direction: column;
}

.feedback-v2 .feedback-buttons {
    margin-bottom: 1rem;
}

button#zoom-in,
button#zoom-out {
    height: 3rem;
    width: 3rem;
    padding: 0.7rem;
    background-color: white;
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--radius-sm);
}

button#zoom-in svg,
button#zoom-out svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

button#zoom-in {
    border-bottom: 1px solid #d6caca;
}

.zoom-in-out {
    position: absolute;
    right: 0rem;
    top: -3rem;
    display: none;
    flex-direction: column;
    z-index: 1;
    gap: var(--spacing-sm);
}

.card.kaffa-card {
    width: calc(100% - 2rem);
    margin: 0 1rem 2rem;
}

.card.kaffa-card .card-img-top img.mobile-image {
    display: block;
}

.card.kaffa-card .card-img-top img {
    width: 100%;
    height: auto;
    display: none;
}

.fixed-button {
    position: absolute;
    bottom: 36%;
    right: 50%;
    transform: translateX(50%);
    z-index: 1;
    padding: 0.3rem 1.6rem;
    border: none;
    font-size: 0.73rem;
    cursor: pointer;
    background-color: white;
    color: #22B0E9;
    font-family: var(--IBM-regular);
    transition: all .3s ease-in-out;
}

.fixed-button:hover {
    background-color: var(--blue-color);
    color: white;
}

.swiper-labels.swiper {
    margin: 0;
}

.allratings .rating__star-fill {
    transform: scale(1);
}

.allratings [for="rating-10"] .rating__star-fill,
.allratings [for="rating-14"] .rating__star-fill,
.allratings [for="rating-15"] .rating__star-fill,
.allratings [for="rating-18"] .rating__star-fill,
.allratings [for="rating-19"] .rating__star-fill,
.allratings [for="rating-20"] .rating__star-fill,
.allratings [for="rating-22"] .rating__star-fill,
.allratings [for="rating-23"] .rating__star-fill,
.allratings [for="rating-24"] .rating__star-fill,
.allratings [for="rating-25"] .rating__star-fill {
    transform: scale(0);
}

.university-services .tab-content .slick-track {
    width: 100% !important;
}

.left-section .card .card-body .infos-container .information.description {
    text-wrap: balance;
}

.news-content.vacancy-details {
    flex-direction: row;
}

.news-content.vacancy-details .news-detail-text {
    width: fit-content;
}

.news-content.vacancy-details .news-detail a.apply-now {
    background-color: var(--blue-color);
    color: white;
    padding: .5rem 2rem;
}

.tabular-view .case-description {
    display: flex;
    flex-direction: column-reverse;
}

.View-Form-Table-UJ {
    padding: 10rem 1rem 4rem;
}

.View-Form-Table-UJ table,
.View-Form-Table-UJ table th,
.View-Form-Table-UJ table td {
    border: 1px solid lightgray;
    border-collapse: collapse;
}

.View-Form-Table-UJ table td,
.View-Form-Table-UJ table th {
    width: auto;
}

.pager__items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pagination-items-padding);
}
.pager__items .pager__item {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: var(--pagination-item-sm-padding);
    height: 24px;
    width: 24px;
    border-radius: var(--radius-sm);
}
.pager__items .pager__item a{
    color:var(--text-default);
    width: 100%;
    text-align: center;
}
.pager__items .pager__item:hover{ background-color: var(--button-background-neutral-hovered); }
.pager__items .pager__item.is-active::after{
    content:"";
    position:absolute;
    bottom:0;
    right: 3px;
    height:3px;
    width:16px;
    border-radius:var(--radius-full);
    background-color:var(--background-primary);
}
/* COOKIES STYLES START */
.cookiesModal .modal-dialog {
    bottom: 0rem;
    top: auto;
    position: absolute;
    width: 100%;
    border-radius: .5rem;
    overflow: hidden;
    margin: auto;
}

.cookiesModal .modal-dialog .modal-content {
    border-radius: 0;
}

.cookiesModal .content-container {
    padding-right: 2.5rem;
    padding-left: 3.5rem;
}

.cookiesModal .modal-content {
    border-radius: 0.625rem;
    text-align: right;
}

.cookiesModal .modal-body {
    font-size: 1rem;
}

.cookiesModal .btn-primary {
    border: none;
    border-radius: var(--radius-sm);
    padding: .5rem 2rem;
    outline: 1px solid var(--border-neutral-primary);
    background-color: transparent;
    color: var(--text-default);
    font-family: var(--IBM-sb)
}

.cookiesModal .btn-primary:hover {
    background-color: var(--button-background-neutral-default);
}

.cookiesModal .terms-link a:hover {
    color: var(--link-primary-hovered);
}

.cookiesModal .terms-link a {
    color: var(--link-primary);
    text-decoration: underline;
}


.cookiesModal .modal-header {
    border-bottom: none;
}

.cookiesModal .modal-footer {
    border-top: none;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.cookiesModal .modal-body p {
    color: var(--text-default);
    text-align: right;
}

.cookiesModal .btn-close {
    border: none;
    background-color: white;
    width: 21px;
    position: absolute;
    left: 1rem;
    top: 1rem;
}

.cookiesModal .btn-close #SVGRepo_iconCarrier path {
    stroke: rgb(34, 102, 53);
}

.College-sections>a,
.sections>a {
    display: none;
}

/* COOKIES STYLES END */
.all-news-container {
    margin-top: var(--spacing-3xl);
}
.all-news-container.achievements-innovation{
    margin-top:0;
}

.all-news-container.achievements-innovation .uj-card a:first-child{ display: flex; flex-direction: column; gap: var(--spacing-3xl); }

@media (max-width: 768px) {
    .digital-stamp-card {
        padding: 8px 16px;
    }

    .digital-stamp-card .digital-stamp-header {
        flex-wrap: wrap;
    }

    .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
        flex: 100%;
        margin-right: 33px;
    }

    .digital-stamp-card .digital-stamp-body .digital-stamp-container {
        flex-direction: column;
    }
}
.uj-structure-page {
    direction: rtl;
    font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    color: #1f2a37;
    background: #ffffff;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 16px 44px;
  }

  .uj-structure-page * {
    box-sizing: border-box;
  }

  .uj-structure-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #6c737f;
    font-size: 14px;
    margin-bottom: 18px;
  }

  .uj-structure-breadcrumb a {
    color: #1b8354;
    text-decoration: none;
    font-weight: 600;
  }

  .uj-structure-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-background-neutral);
    border-radius: 24px;
    background:
      radial-gradient(circle at 10% 15%, rgba(27, 131, 84, 0.13), transparent 32%),
      linear-gradient(135deg, #fff 0%, #ffffff 58%, #fff 100%);
    padding: var(--spacing-3xl) var(--spacing-4xl);
    margin-bottom: var(--spacing-5xl);
  }

  .uj-structure-hero::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 7px;
    height: 100%;
    background: #1b8354;
  }

  .uj-structure-badge {
    display: inline-flex;
    align-items: center;
    background: var(--tag-background-success-light);
    color: var(--tag-text-success);
    border: 1px solid var(--tag-border-success-light);
    border-radius: var(--radius-sm);
    padding: var(--spacing-none) var(--spacing-md);
    font-size: var(--text-xs);
    font-weight: 700;
    margin-bottom: 16px;
    height: 24px;
  }

  .uj-structure-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #1b8354;
    border-radius: 50%;
    display: none;
  }

  .uj-structure-title {
    margin: 0 0 var(--spacing-lg);
    color: var(--text-default);
    font-size: var(--display-sm);
    font-family: var(--ibmBold);
  }

  .uj-structure-desc {
    max-width: 860px;
    margin: 0;
    color: #384250;
    font-size: 17px;
    line-height: 1.9;
  }

  .uj-structure-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
  }

  .uj-structure-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--buttons-lg-gap);
    height: 40px;
    padding: var(--spacing-none) var(--spacing-xl);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    font-family: var(--IBM-sb);
    text-decoration: none;
    transition: 0.2s ease;
  }

  .uj-structure-btn-primary {
    background: var(--button-background-primary-default);
    color: #ffffff !important;
  }

  .uj-structure-btn-primary:hover,
  .uj-structure-btn-primary:focus {
    background: #166a45;
    border-color: #166a45;
    color: #ffffff !important;
  }

  .uj-structure-btn-secondary {
    background: var(--button-background-neutral-default);
    color: var(--text-default)!important;
    /* border-color: #a4acb9; */
  }

  .uj-structure-btn-secondary:hover,
  .uj-structure-btn-secondary:focus {
    background: #f3f4f6;
    color: #14573a !important;
  }

  .uj-structure-update {
    border: 1px solid var(--tag-border-success-light);
    background: var(--tag-background-success-light);
    color: var(--text-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3xl) var(--spacing-4xl);
    margin-bottom: var(--spacing-5xl);
  }

  .uj-structure-update h2 {
    margin: 0 0 var(--spacing-lg);
    color: var(--text-primary);
    font-size: var(--display-sm);
    font-family: var(--ibmBold);
  }

  .uj-structure-update p {
    margin: 0;
    color: #14532d;
    font-size: 16px;
    line-height: 1.9;
  }

  .uj-structure-section {
    margin-top: 22px;
  }

  .uj-structure-section-head {
    margin-bottom: 16px;
  }

  .uj-structure-section-title {
    margin: 0 0 8px;
    color: #0d121c;
    font-size: 25px;
    font-weight: 800;
  }

  .uj-structure-section-desc {
    margin: 0;
    color: #4d5761;
    font-size: 15px;
    line-height: 1.8;
  }

  .uj-org-chart {
    position: relative;
    border: 1px solid var(--border-background-neutral);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3xl) var(--spacing-4xl);
    background: #ffffff;
    overflow: hidden;
    margin: var(--spacing-3xl) 0;
  }

  .uj-org-chart::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 100% 0%, rgba(27, 131, 84, 0.06), transparent 26%),
      radial-gradient(circle at 0% 100%, rgba(27, 131, 84, 0.05), transparent 30%);
    pointer-events: none;
  }

  .uj-org-level {
    position: relative;
    z-index: 1;
  }

  .uj-org-root {
    display: flex;
    justify-content: center;
    margin-bottom: 26px;
  }

  .uj-org-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #d2d6db;
    border-radius: 18px;
    padding: 16px 18px;
    min-height: 76px;
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.05);
  }

  .uj-org-card-main {
    background: var(--background-primary);
    color: #ffffff;
    min-width: 240px;
    text-align: center;
  }

  .uj-org-card-main .uj-org-card-title,
  .uj-org-card-main .uj-org-card-subtitle {
    color: #ffffff;
  }

  .uj-org-card-title {
    display: block;
    /* color: #0d121c; */
    font-size: var(--text-md);
    font-family: var(--IBM-sb);
    /* line-height: 1.6; */
  }

  .uj-org-card-subtitle {
    display: block;
    margin-top: 3px;
    color: #6c737f;
    font-size: 13px;
    line-height: 1.5;
  }

  .uj-org-branch {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 14px;
  }

  .uj-org-group {
    border: 1px solid var(--border-background-neutral);
    border-radius: var(--radius-lg);
    background: #fcfcfd;
    padding: var(--spacing-xl);
  }

  .uj-org-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
  }

  .uj-org-group-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #ecfdf3;
    color: #1b8354;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex: 0 0 auto;
  }

  .uj-org-group-title {
    margin: 0;
    color: #0d121c;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
  }

  .uj-org-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
  }

  .uj-org-list li {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--border-background-neutral);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--text-default);
    font-size: var(--text-sm);
  }

  .uj-org-list li::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    background: #1b8354;
    border-radius: 50%;
    vertical-align: middle;
    display: none;
  }

  .uj-structure-grid {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 20px;
    align-items: start;
    margin-top: 22px;
  }

  .uj-pdf-card {
    background: #ffffff;
    border: 1px solid var(--border-background-neutral);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .uj-pdf-card-header {
    padding: var(--spacing-3xl) var(--spacing-4xl);
    border-bottom: 1px solid var(--border-background-neutral);
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .uj-pdf-card-header h2 {
    margin: 0;
    color: var(--text-default);
    font-size: var(--text-xl);
    font-family: var(--IBM-b);
  }

  .uj-pdf-card-header span {
    color: #6c737f;
    font-size: 13px;
  }

  .uj-pdf-viewer {
    padding: var(--spacing-3xl) var(--spacing-4xl);
  }

  .uj-pdf-frame {
    width: 100%;
    height: 680px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #f9fafb;
    overflow: hidden;
  }

  .uj-pdf-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  .uj-side-card {
    background: #ffffff;
    border: 1px solid var(--border-background-neutral);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3xl) var(--spacing-4xl);
  }

  .uj-side-card h2 {
    margin: 0 0 var(--spacing-lg);
    color: var(--text-default);
    font-size: var(--text-xl);
    font-family: var(--ibmBold);
  }

  .uj-side-card p {
    margin: 0;
    color: #4d5761;
    font-size: 15px;
    line-height: 1.8;
  }

  .uj-meta-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
  }

  .uj-meta-item {
    border: 1px solid var(--border-background-neutral);
    border-radius: var(--radius-md);
    var(
    --spacing-md): 12px 14px;
    background: #fcfcfd;
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .uj-meta-label {
    display: block;
    color: #6c737f;
    font-size: 13px;
    margin-bottom: 4px;
  }

  .uj-meta-value {
    display: block;
    color: var(--text-default);
    font-family: var(--IBM-sb);
  }
.tabular-view{
    background-color:white;
    border: 1px solid var(--border-background-neutral);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--spacing-2xl) var(--spacing-4xl) calc(var(--spacing-7xl) - 1rem) var(--spacing-4xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6xl);
}
  @media (max-width: 1100px) {
    .uj-org-branch {
      grid-template-columns: repeat(2, 1fr);
    }

    .uj-structure-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 700px) {
    .uj-structure-page {
      padding: 16px 10px 34px;
    }

    .uj-structure-hero {
      padding: 30px 22px;
      border-radius: 18px;
    }

    .uj-structure-title {
      font-size: 27px;
    }

    .uj-structure-desc {
      font-size: 15px;
    }

    .uj-structure-actions {
      flex-direction: column;
    }

    .uj-structure-btn {
      width: 100%;
    }

    .uj-org-chart {
      padding: 18px;
      border-radius: 18px;
    }

    .uj-org-branch {
      grid-template-columns: 1fr;
    }

    .uj-org-card-main {
      min-width: 100%;
    }

    .uj-pdf-frame {
      height: 520px;
    }

    .uj-pdf-card-header {
      flex-direction: column;
      align-items: flex-start;
    }
  }
@media screen and (min-width: 600px) {
    .old-version {
        top: calc(74.7vh - 2.6rem);
    }
    .college.tabular-view .statistic:last-child {
        border-left: none;
    }

    .slick-track {
        margin: auto;
    }
    .tabular-view .nav-tabs .slick-list .slick-track {
        list-style-type: none;
        display: flex;
    }

    .story .image-container {
        margin-left: 0rem;
    }

    .associates-tiles .card .card-body .informations {
        margin: 0 4rem;
    }
    .associates-tiles .card .card-body .positions {
        display: flex;
        justify-content: space-between;
    }
    .testimonials-container .col-lg-4 {
        margin-bottom: 30px;
    }

    .events-side-menu .menu-container {
        width: 32.688rem;
    }

    .events-side-menu.toggled button.close {
        position: absolute;
        top: 2rem;
        left: 2rem;
        right: auto;
    }

    .details-panel .close {
        left: 4rem;
        background-color: unset;
        border-radius: unset;
    }

    .details-panel {
        width: 600px !important;
    }

    .twitter-side-menu button.close {
        right: 15px;
    }

    .twitter-side-menu.toggled {
        width: 32rem;
    }

    .contact-us .branches-otherservices .otherservices .contents.card-columns,
    .contact-us .branches-otherservices .branches .contents.card-columns {
        column-count: 2;
    }

    .news-advertisements .items {
        flex-flow: row wrap;
    }

    .twitter-side-menu,
    .notifications-side-menu .menu-container,
    .weather-side-menu,
    .polls-side-menu {
        width: 32rem;
    }

    .notifications-side-menu button.close,
    .weather-side-menu button.close,
    .polls-side-menu button.close {
        position: absolute;
        top: 1.5rem;
        left: 33.4rem;
        right: auto;
    }

    .news-advertisements .news-item .card-img-top img,
    .achievements .card .card-img-top img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

    .shortcuts .open-data .icon svg,
    .shortcuts .map .icon svg,
    .shortcuts .accessibility-services .icon svg {
        width: unset;
    }

    .search svg,
    .accessibility svg,
    .menu svg {
        height: 1.7rem;
    }

    .uoj-electronic img {
        width: 8rem;
    }

    .headline .content::after {
        content: "";
        background-color: rgba(255, 255, 255, 0.7);
        position: absolute;
        top: 4rem;
        right: -10rem;
        height: 0.2rem;
        width: 8rem;
        display: none !important;
    }

    .header-pattern {
        display: block;
    }

    .sidebuttons {
        top: 20rem;
    }

    .vertical-line {
        height: 3.6rem;
    }

    .faqs .faqs-search input {
        width: 60%;
    }

    .shortcuts {
        flex-direction: row;
        padding: 3rem 15px;
    }

    .otherservices .contents {
        flex-direction: row;
    }

    .tabular-view .labels .label {
        width: fit-content;
    }

    .submit-buttons {
        flex-direction: row;
    }
}

@media(min-width: 768px) {


    .searchbox-container {

        top: 11.2rem;
    }

    .fixed-button {
        bottom: 31%;
        padding: 0.5rem 1.3rem;
        font-size: 1rem;
    }

    .feedback-v2 .published-time p {
        font-size: 1rem;
    }

    .feedback-v2 .feedback-ques {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateY(calc(100% - 12.2rem));
    }

    .feedback-v2 .feedback-ques.opened {
        transform: translateY(0);
        top: auto;
    }

    .contact-section-informations.informations-contact .section-title {
        padding: 5rem 0 0;
    }

    .acc-modal .modal-body .txt-size .decrease {
        left: 4.5rem;
    }

    #map {
        height: calc(100vh - 8.6rem);
    }

    .leaflet-top {
        bottom: 0.5rem;
    }

    .col-lg-7 .leaflet-popup {
        opacity: 1 !important;
    }

    .dropdown.clicked #clickedValue,
    #clickedFaculty,
    #clickedDepartment,
    #clickedBuilding {
        max-width: 26ch;
    }

    .test {
        top: 9.8rem;
    }

    .map-filter {
        min-width: 15.35rem;
    }

    .tabular-view label span::before {
        width: 15px;
        height: 15px;
    }

    .opportunities-main .swiper.opportunities.availablevacancies .swiper-pagination {
        margin-top: 1rem;
    }

    .leaflet-popup-tip-container {
        left: -.6rem !important;
        bottom: 164px !important;
    }

    .details-panel .accordion-group .collapse>span {
        padding: 1rem 2rem;
    }

    .details-panel .accordion-group .collapse p span>span {
        padding: 0 !important;
    }

    .ac-prog {
        padding: 0.3rem 2rem;
    }

    .contact-us .leaflet-popup-tip-container {
        top: 4.5rem !important;
    }

    .modal-content g#Ellipse_27,
    line#Line_135,
    line#Line_136 {
        stroke: black;
    }

    .college-programs .programs-container .col-lg-4 {
        min-width: 100%;
        flex: 0 0 100%;
    }

    .College-sections .col-lg-4 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .tabular-view .tab-content .tab-pane .col-lg-6 {
        max-width: 100%;
    }

    .content-viewer-alt .research-production .production-thumb img {
        width: 70%;
    }

    .research-production .row {
        flex-direction: column;
    }

    .research-production .col-md-6 {
        max-width: 100%;
    }

    .departments .cards-section .col-lg-4.col-md-6 {
        padding: 0px 10px;
    }
    .available-programs .pattern-1,
    .functional-competitions .pattern-1 {
        top: -2rem;
    }

    .news-advertisements .news-item.col-lg-4:last-child {
        display: none;
    }

    .survey-form-container .js-form-item.form-item.js-form-type-radio {
        margin-left: 2rem;
        margin-bottom: unset;
    }

    .result-body .card .card-body .card-text {
        line-height: 2.2;
    }

    .result-body .card .card-body {
        padding: 2rem;
    }

    .result-body .card .card-img {
        width: 25rem;
        height: auto;
        max-height: 15rem;
    }

    .result-body .card {
        flex-direction: row;
    }

    .result-section {
        padding: 4rem 0;
    }

    .contact-zone .col-lg-6 .card .card-body .card-title {
        font-size: 1.5rem;
    }

    .contact-zone .col-lg-6:nth-child(2n+1) .card .card-body .card-text ul {
        padding: 0 2rem;
    }

    .contact-zone .col-lg-6:nth-child(2n+1) .card .card-body .card-text ul li {

        width: 100%;
    }

    #chartdiv {
        margin-bottom: 4rem;
        padding-top: 2rem;
    }

    .open-data-iframe {
        height: 100vh;
    }

    #chart_div {
        height: 400px;
    }

    .right-section table.table.borderless .schedule {
        font-size: .8rem;
    }
    .profile .left-section .card .tab-pane ul {
        padding-right: 3rem;
    }
    .profile .left-section .card .infos-container .information .title {
        font-size: 0.8rem;
        margin-bottom: unset;
    }

    .profile .left-section .card .labels,
    .profile .left-section .card .infos-container {
        padding: 0 1.25rem;
    }
    .left-section .card-header .card-title {
        font-size: 1.5rem;
    }

    .profile .left-section .card .card-header {
        padding: .75rem 1.25rem;
    }

    .right-section .card.work-hours .card-title {
        padding-right: 1rem;
        padding-left: 1rem;
        padding-top: 1.4rem;
    }

    .profile .left-section .card .card-body {
        padding: 2rem;
    }

    .right-section .card .review-cv .icon {
        height: 1.7rem;
        width: 1rem;
        margin-left: .5rem;
    }
    .right-section .card .profile-img {
        height: 10rem;
        width: 10rem;
    }

    .all-news-container .card .card-text {
        line-height: 2.2;
    }

    .all-news.swiper {
        height: 35rem;
    }

    .gallery-container .mason-item.col-lg-4 {
        max-width: 58%;
        padding: 0 50px;
    }

    .care-tiles.container .col-md-6 {
        padding: 0 15px;
    }
    .agency .be-in-contact {
        padding: 3rem 6rem;
    }
    .tabs .nav-tabs {
        display: flex;
    }

    .tabs .nav-tabs .nav-item .nav-link {
        padding: 1rem;
    }

    .tabs .tiles .col-md-6 {
        padding: 0 15px;
    }

    .details-panel .tabs .program-title {
        font-size: 1.2rem;
        margin-right: 2rem;
    }

    .details-panel .accordion-group .accordion-content p {
        padding: 0.5rem 2rem;
        line-height: 2.2;
    }

    .details-panel .apply-link {
        padding: 0 2rem;
    }

    a#StudyPlanLink {
        font-size: 1.25rem;
        padding: 1.4rem 2rem 1.4rem;
    }
    .season-container .season-body .body-container {
        padding: 2rem 0px;
    }
    .filter-table .dropdown button {
        width: auto;
    }

    .filter-table .header .right-section {
        justify-content: unset;
        width: auto;
        margin: 3rem 1rem 0;
    }

    .filter-table .header .right-section .label-count {
        padding: .5rem 1rem;
        margin: 0 1rem;
    }

    .filter-table .header .right-section h3 {
        font-size: 1.75rem;
        margin-bottom: .5rem;
    }

    .filter-table .header {
        flex-direction: row;
        margin-bottom: 3rem;
    }

    .f-services .spinner-border {
        right: 50%;
        margin-top: unset;
    }

    .js-form-item.js-form-type-radio {
        height: 40px;
        flex-flow: row wrap;
    }

    fieldset legend {
        line-height: 2.2;
    }

    .survey-form-container .js-form-item.form-item .webform-section-wrapper .description {
        padding-bottom: 3rem;
        margin: 1.8rem 0 3rem;
    }

    .js-form-item.js-form-type-radio {
        height: 64px;
    }

    .survey-form-container .js-form-item.form-item.form-wrapper.webform-section .webform-section-wrapper> :first-child:not(.description) {
        margin: 3rem 0;
    }

    .details-panel .labels .label {
        padding: .7rem 2rem;
    }

    .details-panel .tabs .card .card-title {
        font-size: 1.2rem;
    }
    .details-panel .accordion-group .accordion {
        padding: 1.4rem 2rem 1.4rem;
    }

    .details-panel .accordion-group {
        margin-top: 2rem;
    }

    .details-panel .labels {
        padding: 0 2rem;
    }

    .details-panel .spinner-border {
        right: 270px;
    }
    .accordion-body .card-img-top {
        height: 18rem;
    }

    .accordions .accordion-body .tiles-container .col-lg-6 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .accordions .accordion-body .tiles-container {
        padding-top: 5rem;
    }

    .accordions .accordion .header .expand {
        width: auto;
        height: auto;
    }

    .accordions {
        margin-top: unset;
    }

    .accordions .accordion {
        padding: 2rem;
        margin: 50px 0;
    }
    .college.tabular-view.E-services .card .card-text {
        line-height: 2.2;
        margin-bottom: 2rem;
    }

    .college.tabular-view.E-services .card .card-content {
        padding: 2rem 1.5rem;
    }

    hr.faq {
        margin: 3rem 4rem;
    }

    .faqs .faqs-search input {
        width: 70%;
    }
    .introduction {
        margin-bottom: 4rem;
    }

    .reports {
        margin-top: 4rem;
    }

    .reports .report .icon {
        padding: 2rem;
        width: 7rem;
        height: 7rem;
    }

    .reports .report .description {
        width: 60%;
    }
    .labels-header {
        margin-top: var(--spacing-5xl);
    }
    .tabular-view .description {
        line-height: 2.2;
    }
    .left-section .header img {
        margin-left: 1.5rem;
    }
    .associates-tiles .card .card-body .member-info .information {
        margin: var(--spacing-md);
    }

    .uni-side label,
    .users label {
        margin-right: unset;
    }

    .uni-side ins::before {
        right: 0;
        /* top: 7px; */
    }
    .org-chart.container {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .orgchart-container::before {
        bottom: -1rem;
    }

    .news-content {
        margin-bottom: 5rem;
    }
    .news-detail-img img {
        height: 32.5rem !important;
        width: 28rem !important;
    }

    .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
        top: 0.3rem;
        left: 0.35rem;
        height: 0.4rem;
        width: 0.4rem;
    }

    .navbar .dropdown-menu {
        top: 4.8rem;
        border-top: 0.3rem solid var(--blue-color);
        position: absolute;
        right: 0rem;
        box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
        animation: dropdownanimation .5s;
        min-width: 12rem;
    }

    .navbar .languages .dropdown-menu {
        min-width: max-content;
    }

    .scroll .navbar .dropdown-menu {
        top: 5.5rem;
        animation: dropdownanimationscroll .5s;
    }

    .search .erase {
        height: 100%;
        width: 3rem;
        top: unset;
    }

    .search-footer.modal-footer .std {
        padding-right: 2rem;
    }

    .dropdown button.btn.btn-light.dropdown-toggle::before {
        content: unset;
    }

    .search .search-btn {
        width: auto;
        justify-content: unset;
        height: 100%;
    }

    .dropdown button.btn.btn-light.dropdown-toggle {
        border-right: 1px solid #ebebeb;
        padding: .375rem .75rem;
    }

    .associates-search button.btn.btn-light.dropdown-toggle {
        padding: var(--spacing-md);
    }

    .search .dropdown {
        height: 100%;
        width: auto;
        margin: unset;
    }

    .search .modal-dialog .input-group .form-control {
        height: 100%;
        padding-right: 4rem;
        width: auto;
    }

    .polls-side-menu .answers-section .result .desc {
        margin-top: unset;
        text-align: right;
    }

    .polls-side-menu .answers-section .result {
        flex-direction: row;
        margin-bottom: unset;
    }

    .polls-side-menu .answers-section {
        margin: 3rem 1.5rem;
        padding: 4rem 0px;
    }

    .polls-side-menu .menu-container {
        width: 100%;
    }

    .weather-side-menu .menu-label,
    .polls-side-menu .menu-label {
        padding: 2rem 4rem;
        font-size: 2.5rem;
    }

    .news-advertisements .items a {
        padding: 15px;
    }

    .news-advertisements .news-item.col-lg-4:nth-child(2) {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }

    .events-side-menu .events .item .content .detail .time-location .time {
        border-left: 1px solid rgb(216, 216, 216);
        padding-left: 1rem;
    }

    .events-side-menu .events .item .content .detail .time-location .location {
        padding-right: 1rem;
        justify-content: unset;
        margin-top: unset;
    }

    .events-side-menu .events {
        padding: 2rem;
    }

    .events-side-menu .events .month-container .desc {
        font-size: 1.4rem;
        color: var(--text-default);
        font-family: var(--IBM-sb);
    }

    .notifications-side-menu .notifications .item .content {
        margin-top: 1.5rem;
        padding: 1.8rem 3rem 1.8rem 1rem;
    }

    .notifications-side-menu .notifications {
        padding: 2rem;
    }

    .notifications-side-menu .notifications .item .date {
        font-size: 1.2rem;
        font-family: var(--IBM-sb);
        color: var(--text-default);
    }

    .notifications-side-menu button.close,
    .weather-side-menu button.close,
    .polls-side-menu button.close {
        top: 2.5rem;
    }

    .notifications-side-menu .menu-label {
        padding: 2rem 4rem;
        font-size: 2.5rem;
    }

    .side-menu.toggled,
    .details-panel.toggled {
        width: 32rem;
    }

    .registration-footer .stamp-img {
        width: 12rem;
    }

    .shortcuts .open-data .icon svg,
    .shortcuts .map .icon svg,
    .shortcuts .accessibility-services .icon svg {
        width: 9rem;
    }

    a.more-testimonials-btn.read-more {
        margin: 2rem 0;
    }

    .news-advertisements .nav-pills .nav-link {
        margin-right: 0.5rem;
    }

    .focus-area .focus-body .links .link-holder .icon {
        width: auto;
        height: auto;
    }

    .focus-area .focus-body .animation-zone {
        width: 50% !important;
        margin: unset;
    }

    .focus-area h3.title {
        margin-bottom: 4rem;
        font-size: 1.2rem;
    }

    .focus-area {
        padding: 2rem 0 0rem 0;
    }
    .swiper.programs .swiper-slide:last-child {
        padding-left: unset;
    }
    .swiper.programs.container {
        margin-top: 4rem;
    }
    .search .erase {
        right: 0.5rem;
    }

    .search .erase svg {
        width: 60%;
        height: 60%;
    }

    .search input.form-control {
        font-size: 1rem;
        padding: 0px 3rem;
    }

    .search .input-group.mb-3 {
        height: 3.5rem !important;
        width: 40rem !important;
        flex-direction: row;
    }
    .uni-inovations .main-news .research .swiper-slide {
        align-items: flex-end;
        padding-bottom: var(--spacing-5xl);
    }

    .uni-inovations .inovation-container .inovations-detail {
        bottom: 3.5rem;
    }
    .uni-inovations .main-news .research .swiper-slide .content .date span img {
        width: auto;
    }

    .uni-inovations .main-news .research .swiper-slide .content .date span {
        padding-left: 1rem;
    }
    .news-advertisements .news-item .card-img-overlay .day,
    .all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .day {
        font-size: 3.5rem;
    }
    .college-programs .programs-container {
        padding: 3rem 0;
        flex-direction: column;
    }

    .college .college-annual-report .item .item-desc .name {
        margin-right: 1rem;
    }

    .college .college-annual-report .item .item-desc .icon {
        display: block;
    }

    .college .college-annual-report .item .item-desc .name {
        margin-right: 1.5rem;
    }
    .college .affliated-members input {
        width: auto;
    }
    .college.tabular-view .statistic .icon img {
        display: none;
    }

    .contact-us .services .service:last-child {
        border-bottom: none;
        padding: 15px;
    }

    .contact-collapse .contact-infos {
        margin: 2rem 0 0;
    }

    .accordion-container .contact-collapse .informations .subtitle {
        margin-bottom: 1rem;
    }

    .contact-collapse .contact-infos .icon:first-child {
        margin: 0 .5rem;
    }

    .branches .card-footer {
        padding: 1.4rem 1rem;
    }

    .branches .card .card-body .card-text {
        margin-bottom: 1rem;
    }

    .map-container .gotomap {
        padding: 1rem;
    }

    .contact-us .contact-infos .phone,
    .contact-us .contact-infos .email,
    .contact-us .contact-infos .fax {
        font-size: 1rem;
        padding: 1rem 3rem;
    }

    .contact-us .contact-infos {
        margin: 3rem 0px 0px;
    }

    .contact-us .services .service a.start {
        margin-top: 2rem;
    }

    .service.col-md-4 .image {
        margin-bottom: 2rem;
    }

    .contact-us.deliver-voice .services .service {
        margin-bottom: 5rem;
    }

    .contact-us .services .service {
        margin-bottom: 3rem;
        padding: 15px;
        border-bottom: none;
    }
    .faqs.ES-material ul {
        padding-inline-start: 20px;
    }
    .faqs .faq-group .faq-item .faq-details::after {
        right: 2rem;
    }

    .faqs .faq-group .faq-item .faq-details {
        width: 95%;
    }
    .filter-policies.aca-filter .filter-dp .dropdown {
        width: 50%;
    }

    .care-tiles .card .pattern {
        position: absolute;
        top: 1.25rem;
        left: 1.25rem;
        width: auto;
        height: auto;
    }

    #PoliciesContentTab {
        width: auto;
    }

    .care-tiles.policies {
        padding: 3rem 0;
    }
    .aca-filter .dropdown button.btn.btn-light.dropdown-toggle {
        padding: 1rem;
    }

    .aca-filter .filter-dp .dropdown {
        width: 33%;
        margin: 0;
    }

    .aca-filter .filter-dp {
        display: flex;
        align-items: center;
        flex-direction: row;
        margin-bottom: 0rem;
        gap: var(--spacing-3xl);
    }

    .filters-container {
        margin-top: unset;
    }

    .opportunities-main.container {
        padding-top: 2rem;
        padding-bottom: 6rem;
    }

    .step:nth-child(5n+1) .num,
    .step:nth-child(5n+2) .num,
    .step:nth-child(5n+3) .num,
    .step:nth-child(5n+4) .num,
    .step:nth-child(5n+5) .num {
        color: unset;
    }

    .step .instruction span {
        line-height: 1.8;
        text-align: right;
    }

    .step .end-date {
        margin-right: unset;
    }

    .step .start-date {
        margin-bottom: 1rem;
    }

    .step .schedule {
        display: block;
    }

    .steps-app {
        padding-top: unset;
        padding-bottom: unset;
    }

    .international-students .card-img-overlay .footer {
        margin: 2rem 0;
    }

    .international-students .card-img-overlay {
        padding: 1.25rem;
    }

    .season-container .season-body .body-container:last-child {
        padding-bottom: 2rem;
    }

    .season-container .season-body .body-container {
        padding: 1.5rem 0px;
    }

    .season-container .season-body .information {
        margin-top: 2rem;
        font-weight: 600;
        min-width: 100%;
        justify-content: start;
        align-items: start;
        text-align: unset;
    }

    .accordion ul li .date .from svg,
    .accordion ul li .date .to svg {
        display: flex;
    }

    .season-container .season-header {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .accordion .season-header .title {
        font-size: 2rem;
    }

    .appointments .accordion {
        margin: 50px auto;
    }

    .appointments {
        padding-top: 2rem;
        padding-bottom: 4rem;
        padding-left: 15px;
        padding-right: 15px;
    }

    .swiper-slide .gridItems .card-img-overlay .icon {
        height: 2.5rem;
        width: 2.5rem;
    }

    .swiper-slide .gridItems .card-img-overlay .card-title {
        font-size: 1.1rem;
        margin-bottom: .5rem;
    }

    .swiper-slide .gridItems .grid-item .card {
        margin-bottom: 2rem;
        height: 15rem;
    }

    .available-programs {
        padding: 0 0 4rem 0;
        min-height: auto;
    }

    .std {
        font-size: 1.1rem;
    }

    .functional-competitions .card .card-img-top {
        height: 100%;
        object-fit: cover;
    }

    .competitions .card-img-overlay {
        font-size: 1.3rem;
    }

    .functional-competitions .card,
    .functional-competitions .card .card-img {
        height: 100%;
    }

    .slick-list.draggable {
        width: 100%;
        height: 100%;
        border-bottom: unset;
    }

    .life-jeddah {
        margin-top: unset;
    }

    .news-detail-img.container {
        margin-left: 3.5rem;
        margin: 2rem auto;
    }

    .uoj-breadcrumb {
        display: flex;
    }
    .about-swiper-section {
        padding-right: unset;
    }

    .pattern-image {
        padding: 3rem 0px;
    }

    .story .image-container {
        height: auto;
    }

    .news-advertisements .news-item .card-img-top::after {
        height: 100%;
    }

    .achievements .news-advertisements .slick-prev {
        right: 1rem;
    }

    .achievements .news-advertisements .slick-next {
        left: 1rem;
    }

    .news-advertisements .nav-pills {
        height: 4rem;
    }

    a.about-vision {
        margin: 1rem auto;
    }

    .particles-container .contents .txt {
        margin: 2rem 0;
    }

    .contents .txt span {
        font-size: 2.5rem;
    }

    .particles-container .contents .logo {
        width: auto;
    }

    .uni-values .column .val-content {
        margin-bottom: 2rem;
    }

    .values {
        padding-bottom: 2rem;
    }

    .gals .card-text ul,
    .volunteering .volunteer-tiles .card .card-text ul {
        padding-inline-start: 11px;
    }

    .goals .card-text,
    .goals .card-title,
    .volunteering .volunteer-tiles .card .card-title {
        width: 90%;
    }

    .story .uj-container {
        margin-bottom: unset;
        flex-direction: column;
    }

    .contact-us .contact-infos .fax::after {
        top: 0px;
        left: 0px;
        position: absolute;
        height: 2rem;
        width: 2rem;
        content: "";
        border-width: 46px 34px 20px 15px;
        border-style: solid;
        border-color: #fafafa transparent transparent #fafafa;
    }

    .contact-us .contact-infos {
        flex-wrap: nowrap;
    }

    .contact-us .branches .card .card-inner {
        flex-direction: row;
        align-items: flex-end;
    }

    .departments .cards-section .col-lg-4.col-md-6,
    .data-tiles .col-lg-3.col-md-6 {
        padding: 0 15px;
    }

    .focus-area .focus-body {
        flex-direction: row;
    }
    .contact-us .contact-infos .fax::after {
        top: 0px;
        left: 0px;
        position: absolute;
        height: 2rem;
        width: 2rem;
        content: "";
        border-width: 46px 34px 20px 15px;
        border-style: solid;
        border-color: #fafafa transparent transparent #fafafa;
    }

    .contact-us .contact-infos {
        flex-wrap: nowrap;
    }

    .contact-us .branches .card .card-inner {
        flex-direction: row;
        align-items: flex-end;
    }

    .departments .cards-section .col-lg-4.col-md-6,
    .data-tiles .col-lg-3.col-md-6 {
        padding: 0 15px;
    }
}

@media screen and (min-width: 992px) {
    .faqs .faq-group .faq-item{
width:47%;
    }
.f-services .cards-section .col-lg-4 {
    max-width: 32.4%;
}
    .proxies .cards-container .col-lg-4,
.advisors .cards-container .col-lg-4{
    padding:0;
    max-width: 32.4%;
}
    .events-side-menu.toggled button.close{
        display:none;
    }
    .views-exposed-form {
    transform: translateY(-40px);
}
.eservices-container .form-text{
   
    width: 27.6rem;
}
    .care-tiles.policies .row-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }

    .static-slider .swiper-button-prev,
    .static-slider .swiper-button-next {
        display: flex;
    }

    .swiper.testimonials .swiper-slide {
        padding: 1.5rem;
    }

    .testimonials .deco-prev,
    .testimonials .deco-next {
        height: 100%;
        width: 3rem;
        background-color: #f9fafb;
        position: absolute;
        z-index: 1;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .testimonials.leaders .deco-prev,
    .testimonials.leaders .deco-next{
        background-color:#fff;
    }
    .uni-testimonials .swiper-button-prev,
    .uni-testimonials .swiper-button-next {
        display: flex;
    }

    .university-message .col-12 {
        max-width: 32%;
        flex: 0 0 32%;
    }

    .filter-table tr td::before {
        display: none;
    }
    .tabbed-swiper {
        padding: 1.2rem 4rem;
    }

    div#cookieModal {
        min-height: 18rem;
        bottom: 1rem;
        width: 30rem;
        top: auto;
        left: 1rem;
        right: auto;
        overflow: hidden;
        transform: none;
    }

    .acc-modal .modal-body .txt-size .result {
        padding: 0.2rem 3.5rem;
    }

    .news-content {
        flex-wrap: nowrap;
    }

    .tabular-view .tab-content .tab-pane .d-flex {
        flex-direction: row;
    }

    .filter-labels label {
        width: max-content;
    }

    .right-section .card .profile-img {
        height: 7rem;
        width: 7rem;
    }

    .profile .left-section .card .nav-tabs .nav-item.slick-current.slick-active .nav-link::after {
        content: '';
        position: absolute;
        height: 2px;
        width: 100%;
        background-color: var(--blue-color);
        bottom: 0rem;
        right: 0;
    }

    .research-int .close-btn svg ellipse,
    .research-int .close-btn svg line#Line_135,
    .research-int .close-btn svg line#Line_136 {
        stroke: #fff;
    }

    .research-int .close-btn svg {
        background-color: transparent;
    }

    .result-body .card .card-img {
        width: 25rem;
        height: auto;
    }

    .national-priorities .tiles-container .col-lg-3 {
        padding: 0 15px;
    }

    p.description,
    div.description p {
        text-align: justify;
    }

    .contact-zone .col-lg-6:nth-child(2n+1) .card .card-body .card-text ul li {
        text-align: justify;
    }

    .polls-side-menu .answers-section h5 {
        padding: 0 2rem;
    }

    .research-int .close-btn {
        right: -4.3rem;
    }

    .research-int {
        width: 32rem;
    }

    .achievements .tab-pane.active {
        flex-direction: row !important;
    }

    body.toolbar-horizontal .topnav.sub {
        top: 5rem !important;
        position: relative;
        background-color: white;
    }

    .allratings .dropdownsSection .dropdown {
        margin-bottom: 0rem;
    }

    .swiper-labels.swiper .swiper-wrapper .swiper-slide {
        flex-shrink: inherit;
    }

    .profile .deco1 {
        right: 0rem;
    }

    .js-form-item.js-form-type-radio {
        width: max-content;
    }

    .fixed-button {
        bottom: 28%;
        right: 5%;
        transform: translateX(0);
        padding: 0.8rem 3rem;
    }

    .card.kaffa-card .card-img-top img {
        display: block
    }

    .card.kaffa-card .card-img-top img.mobile-image {
        display: none;
    }

    .fixed-button {
        padding: 0.8rem 2rem;
    }

    .zoom-in-out {
        top: 4rem;
        display: flex;
    }

    .published-time svg {
        display: block;
    }

    .reason-option {
        font-size: 1rem;
    }

    .college .college-annual-report .item .item-desc {
        margin-bottom: 0;
    }

    .college .college-annual-report .item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .news-content .news-detail-text {
        width: 53%;
        margin: 0;
    }

    .data-tiles .col-lg-3 .pattern,
    .about-swiper .pattern,
    .goals-container .pattern,
    .volunteering .volunteer-tiles .col-lg-6 .card .pattern,
    .deanship-agencies .agencies-tiles .col-lg-6 .card .pattern,
    .contact-zone .col-lg-6 .card .pattern {
        left: 1.25rem;
    }

    .contact-section-informations.informations-contact .map-container #map {
        height: 100vh;
    }

    .emerg-services {
        padding: 0 3rem;
    }

    .enrollment-section .col-lg-6 .card {
        height: 28rem;
    }

    .enrollment-section .col-lg-6 .card .content .title {
        font-size: 2.8rem;
    }

    .enrollment-section .col-lg-6 .card .card-image::before {
        position: absolute;
        bottom: -1.5rem;
        right: -1.5rem;
        content: '';
        width: 25rem;
        height: 23rem;
        background-color: #6E96A2;
        z-index: 0;
    }

    .enrollment-section .col-lg-6:not(:first-child) .card .card-image::before {
        top: -1.5rem;
        left: -1.5rem;
        right: unset;
        bottom: unset;
        background-color: #6AC6BB;
    }

    .enrollment-section .col-lg-6:not(:first-child) .card::after {
        transform: scale(.95) scaleX(1);
    }

    .enrollment-section .col-lg-6 .card::after {
        content: '';
        position: absolute;
        top: .2rem;
        left: 0;
        width: 100%;
        transform: scale(.95) scaleX(-1);
        z-index: 2;
        height: 100%;
        background-image: url("/themes/uoj_theme/media/enrollment-decorations.png");
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
    }

    .data-tiles .col-lg-3 .pattern,
    .about-swiper .pattern,
    .goals-container .pattern,
    .volunteering .volunteer-tiles .col-lg-6 .card .pattern,
    .deanship-agencies .agencies-tiles .col-lg-6 .card .pattern,
    .contact-zone .col-lg-6 .card .pattern {
        width: 5.5rem;
        height: 5.5rem;
    }

    .college-programs .programs-container .program .contents .contents-container {
        height: 28.5rem;
    }

    .images-holder.container.description img {
        object-fit: contain;
        margin: 0;
        padding: 1rem;
        display: inline-block;
    }

    .side-panel.dep .sec-layer {
        top: 0;
        height: 100%;
    }

    .opportunities.availablevacancies .card {
        height: auto !important;
    }

    .quick-links .logo {
        display: block;
    }

    .quick-links.swiper::before,
    .quick-links.swiper::after {
        display: none;
    }

    .tab-pane .e-service-cards {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .main-menu .menu-content .menu-links ul .head a {
        font-size: 1rem;
    }

    .quick-links.swiper .swiper-button-prev.swiper-button-disabled,
    .quick-links.swiper .swiper-button-next.swiper-button-disabled {
        display: none !important;
    }

    .topnav .links-container {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }

    .news-advertisements.container .items a:nth-child(n+2) {
        display: block;
    }



    .quick-links.swiper .swiper-button-prev {
        height: 100%;
        width: 5rem;
        opacity: 1;
        display: flex !important;
        right: 0rem;
        top: 0rem;
        transform: scaleX(-1) translate(0);
        align-items: center;
        justify-content: center;
        bottom: 0;
        margin: 0;
        background-image: linear-gradient(90deg, rgb(255 255 255), 50%, rgb(255 255 255), rgb(255 255 255 / 0%));
    }

    .quick-links.swiper .swiper-button-prev svg circle,
    .quick-links.swiper .swiper-button-next svg circle {
        fill: transparent;
    }

    .quick-links.swiper .swiper-button-prev svg path,
    .quick-links.swiper .swiper-button-next svg path {
        fill: var(--blue-color);
    }

    .quick-links.swiper .swiper-button-prev svg,
    .quick-links.swiper .swiper-button-next svg {
        width: 3rem;
    }

    .quick-links.swiper .swiper-button-next {
        height: 100%;
        width: 5rem;
        display: flex !important;
        align-items: center;
        justify-content: center;
        left: 0;
        top: 0rem;
        opacity: 1;
        transform: translate(0);
        bottom: 0;
        margin: 0;
        background-image: linear-gradient(90deg, rgb(255 255 255), 50%, rgb(255 255 255), rgb(255 255 255 / 0%));
    }
    .services-container .swiper-slide[aria-label="1 / 1"] {
        width: 18rem !important;
    }

    .acc-modal .modal-body .txt-size .decrease {
        position: absolute;
        left: 8.6rem;
    }

    .modal.acc-modal {
        transform: translateY(0px);
        min-width: 20rem;
        top: 8rem;
        bottom: auto;
        width: auto;
        animation: 0.5s ease 0s 1 normal none running acc-reveal;
        transition: all 0.3s ease 0s;
        box-shadow: rgba(177, 177, 177, 0.4) 0px 10px 20px;
        height: fit-content;
        padding: 0px !important;
        overflow: visible;
    }

    .modal.acc-modal {
        transform: translateY(0px);
        animation: 0.5s ease 0s 1 normal none running acc-reveal;
        transition: all 0.3s ease 0s;
        box-shadow: rgba(177, 177, 177, 0.4) 0px 10px 20px;
        height: fit-content;
        padding: 0px !important;
        overflow: visible;
        display: none !important;
    }

    .modal.acc-modal.show {
        display: block !important;
    }

    .scrolling.acc-modal {
        left: 8rem;
    }

    .acc-modal::before {
        content: "";
        display: block;
        width: 0px;
        height: 0px;
        top: -1.5rem;
        left: 10.8rem;
        position: fixed;
        border-color: transparent rgba(255, 0, 0, 0) white transparent;
        border-style: solid;
        border-width: 0px 19px 30px;
    }

    .scrolling.acc-modal::before {
        left: 12.3rem;
    }

    .polls-side-menu .answers-section .result .desc {
        width: 50%;
        margin-top: 1.5rem;
        text-align: center;
    }

    .search .std {
        background-color: transparent;
    }

    .languages {
        display: block;
        padding: 0 .8rem;
    }

    .deanship .college-annual-report.report-files .item:last-child {
        padding-bottom: 0;
    }

    .college.tabular-view.deanship .col-lg-3 {
        margin-bottom: 2rem;
    }

    .college.tabular-view.deanship .col-lg-3:nth-child(4n+4) {
        border-left: none;
    }

    .quick-links.swiper .swiper-wrapper {
        padding: 0 4rem 0 3rem !important;
    }

    .filter-table .header .right-section {
        margin: 3rem 3rem 0;
    }

    .old-version .mockup-container {
        position: relative;
        width: 8rem;
        height: auto;
        margin-left: 1rem;
    }

    .old-version {
        bottom: 6rem;
        top: auto;
        font-size: 1.1rem;
        padding: 1.3rem 2.5rem 1.3rem 3.5rem;
    }

    .old-version .mockup-container img {
        position: absolute;
        width: 100%;
        transform: translateY(-3rem);
    }

    .sections .col-lg-4 {
        margin-bottom: 0;
    }
    .president-informations .bottom-section .nationality,
    .president-informations .bottom-section>.level,
    .agent-cv .bottom-section>.level {
        align-items: flex-start;
    }

    .webform-button--submit {
        margin: 0 6rem 3rem;
    }

    [data-drupal-messages] {
        color: red;
        padding: 0 3rem;
    }

    .bar-chart {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .bar-chart h1.section-title,
    .bar-chart p.description {
        text-align: right;
    }

    .story .image-container {
        margin-bottom: 0;
    }

    .gray-bg.container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .beta-ribbon {
        position: fixed;
        top: 0;
    }

    .sub .beta-ribbon,
    body.toolbar-horizontal .beta-ribbon {
        position: relative;
    }

    .right-section .direction svg {
        width: 2rem;
    }

    .leaflet-popup-tip-container {
        left: -1.3rem !important;
        bottom: 240px !important;
    }

    .leaflet-popup-tip-container {
        left: -.45rem !important;
    }

    .Building-Detail-Container .building-info-container .popup-body {
        padding: 0 1.5rem;
    }

    .building-info-container .Responsible-details {
        padding: 1.2rem 1rem;
    }

    .building-info-container .Responsible-details .name {
        font-size: 1rem;
    }

    .building-info-container .Responsible-details .contactcta svg {
        width: 4rem;
    }

    .supervisor .profile {
        display: block;
    }

    .leaflet-popup-close-button {
        font-size: 3rem !important;
    }

    .right-section {
        padding: 0 0.8rem;
    }

    .Building-Detail-Container .left-section {
        margin-top: 1rem;
    }

    .building-info-container {
        width: 32rem;
    }

    .leaflet-popup-content-wrapper {
        width: auto;
        min-height: 10rem;
    }

    .map-location-details .details-div .close-btn svg {
        width: auto;
        height: auto;
    }

    .map-location-details .details-div .close-btn {
        border-radius: unset;
        background-color: unset;
        height: auto;
    }

    .details-div .details {
        padding: 1.8rem 2rem 1rem;
    }

    .map-location-details .details-div .close-btn {
        right: -5.5rem;
        top: 2rem;
    }

    .details-div {
        width: 33vw;
        transform: translateX(-40vw);
    }

    .dropdown.clicked #clickedValue,
    #clickedFaculty,
    #clickedDepartment,
    #clickedBuilding {
        font-size: 1rem !important;
        max-width: unset;
        overflow: unset;
        text-overflow: unset;
        white-space: unset;
    }

    .map-filter .dropdown-menu {
        min-width: 20rem;
        max-height: 19rem;
        right: 0;
        left: unset !important;
    }

    .leaflet-control-zoom .leaflet-control-zoom-in,
    .leaflet-control-zoom .leaflet-control-zoom-out {
        width: 3rem !important;
        height: 2.8rem !important;
    }

    #map .leaflet-control-fullscreen-button {
        height: 3.2rem;
        width: 3rem;
    }

    .map-filter span:first-child::after {
        left: 1.5rem;
        width: 1rem;
    }

    .dropdown .map-filter {
        padding: 0.6rem 1.5rem;
    }

    .map-filter {
        min-width: 20rem;
        min-height: 4.4rem;
    }

    .test {
        right: 6rem;
    }

    .leaflet-top {
        left: 5rem !important;
    }

    .shortcuts .open-data .icon svg,
    .shortcuts .map .icon svg,
    .shortcuts .accessibility-services .icon svg {
        width: 6.5rem;
    }
    .appointments.membership-details .accordion .season {
        height: 47rem;
    }
    .profile ul#scroller {
        padding-left: 2rem;
        padding-right: 4rem;
    }

    .president-informations .bottom-section .nationality {
        margin-top: unset;
    }

    .president-informations .bottom-section,
    .agent-cv .bottom-section {
        align-items: baseline;
    }

    .president-informations .bottom-section>.level,
    .agent-cv .bottom-section>.level {
        width: 30rem;
    }

    .filter-table tr td {
        font-family: var(--IBM-regular);
    }

    .map-container #map {
        background-color: black;
        height: 87vh;
    }

    .supreme-president .president-informations .buttons-container {
        flex-direction: row;
    }

    .library-tabs.container {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .vision-guidelines {
        margin: unset;
    }

    .patt svg,
    .patt img {
        max-width: 5rem;
        min-width: 5rem;
    }

    .patt {
        margin-bottom: 1.5rem;
    }

    .pattern-image .row .patt {
        display: flex;
        align-items: center;
        width: 15rem;
        padding: 1rem 15px;
        border-bottom: unset;
    }

    .pattern-image .row {
        align-items: center;
        margin: 0 15px;
    }

    .story .image-container img {
        height: 80%;
        width: 50%;
        object-fit: contain;
        object-position: top;
        margin: auto;
    }


    .about-swiper-section {
        margin-top: unset;
    }

    .particles-container {
        height: 74vh;
    }

    .uni-values .column .val-content {
        margin-bottom: 2.5rem;
    }

    .uni-values .num {
        width: 3.5rem;
        height: 3.5rem;
    }

    .uni-values {
        padding: unset;
    }

    .uni-values .column {
        margin: 0 4rem;
    }

    .uni-values .column {
        width: fit-content;
        align-items: start;
        flex-direction: column;
        justify-content: flex-start;
    }

    .uni-values {
        flex-direction: row;
        display: flex;
        font-size: 2rem;
        width: 100%;
        margin: auto;
        justify-content: center;
    }

    .search-footer.modal-footer .link {
        padding: 0 2rem;
        width: auto;
        margin-bottom: unset;
    }

    .search-footer.modal-footer .link:nth-child(even) {
        margin-right: unset;
    }

    .search-footer.modal-footer .std {
        width: auto;
    }
    .uni-inovations .inovation-container .inovations-detail .item.selected::after {
        position: absolute;
        top: 25%;
        right: -1rem;
        width: 0px;
        height: 0px;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        border-left: 30px solid rgb(244, 244, 244);
        z-index: 2;
        content: "";
    }
    .uni-inovations .main-news {
        height: 30rem;
        margin-top: unset;
    }

    .college-programs .programs-container .col-lg-4 {
        min-width: 33.3%;
        flex: 0 0 33.3%;
    }

    .college-programs .programs-container {
        flex-direction: row;
    }

    .college-programs .programs-container .program {
        height: 34rem;
    }

    .university-services.container {
        padding-top: 1rem;
        padding-bottom: 6rem;
    }

    .college.tabular-view .statistic {
        margin-bottom: 0rem;
    }

    .news-thumbnail.container {
        max-height: 40rem;
        overflow: hidden;
    }
    .gallery-container .mason-item.col-lg-4 {
        max-width: 32%;
        padding: 0 15px;
    }

    .filter-table #table thead {
        display: table-header-group;
    }

    .filter-table tr td:last-child:before,
    .filter-table tr td:nth-child(5):before,
    .filter-table tr td:nth-child(4):before,
    .filter-table tr td:nth-child(3):before,
    .filter-table tr td:first-child::before {
        content: '';
    }

    .filter-table table {
        border-top: unset;
        border-bottom: unset;
    }

    .filter-table tr {
        display: table-row;
    }

    .filter-table table td {
        display: table-cell;
    }
    #sidePanelListTitle {
        padding-right: 1rem;
    }
    .established-initiatives {
        padding: 15px 6rem;
    }

    .volunteering .nav.nav-tabs li.nav-item.slick-active.slick-current a.nav-link {
        color: var(--blue-color);
    }

    .profile.container .deco2,
    .profile.container .deco1 {
        display: block;
    }

    .profile .left-section .card .nav-tabs .nav-item .swiper-slide-active .nav-link,
    .profile .left-section .card .nav-tabs .nav-item.slick-active.slick-current .nav-link {
        color: var(--blue-color);
    }

    .profile .swiper-button-prev,
    .profile .swiper-button-next {
        top: 1rem;
    }

    .profile .left-section .card .infos-container .information {
        width: auto;
    }

    .rating .stars-container,
    .left-section .card .rating {
        justify-content: unset;
        margin: 0 1rem;
    }

    .associates-tiles .card .card-body .positions .rating {
        margin-top: -8rem;
        left: -5rem;
        top: 0;
    }

    .associates-tiles .card .pattern {
        display: block;
    }

    .associates-tiles .card .card-body .positions>div {
        flex-direction: row;
        align-items: center;
    }

    .associates-tiles .card .card-body .positions {
        display: flex;
        flex-direction: unset;
    }

    .profile .personal-profile {
        padding: 1.4rem 3rem;
    }

    .associates-tiles .card .card-body .profile {
        width: 20rem;
        height: 15rem;
    }

    .associates-tiles .card .card-body {
        padding: 2rem;
        flex-direction: row;
    }
    .orgchart-container {
        height: 48rem;
    }

    .roles.container {
        Padding-top: 4rem;
        Padding-bottom: 6rem;
    }

    .College-sections .col-lg-4 {
        max-width: 33.3%;
        flex: 0 0 33.3%;
    }

    .tabular-view .nav li.slick-slide a.nav-link {
        font-size: .8rem;
    }

    .contact-zone.container {
        flex-direction: row;
    }

    .roles ul li {
        max-width: 42%;
    }

    .roles ul li:nth-child(2n+2) {
        margin-right: 8rem;
    }

    .survey-form-container .js-form-item.form-item.form-wrapper.webform-section {
        padding: 3rem 0 0;
    }

    .survey-form-container #edit-actions.form-actions.js-form-wrapper.form-wrapper {
        padding: 0 6rem 8rem;
    }

    .survey-form-container .js-form-item.form-item .webform-section-wrapper .description .webform-element-description {
        margin-right: 6rem;
    }

    .survey-form-container .js-form-item.form-item.js-form-type-textarea textarea {
        width: 36rem;
    }

    .survey-form-container .js-form-item.form-item.js-form-type-textarea {
        margin: 1.5rem 6rem 1.5rem 0;
    }

    .survey-form-container .js-form-item.form-item.js-form-type-textfield input {
        width: 36rem;
    }

    .survey-form-container fieldset.radios--wrapper.js-form-item.webform-type-radios {
        margin: 0 6rem 3rem;
    }

    .survey-form-container .js-form-item.form-item.js-form-type-textfield {
        margin: 0 6rem 3rem 0;
    }

    .survey-form-container .js-form-item.form-item.form-wrapper.webform-section .webform-section-wrapper> :first-child:not(.description)> :last-child,
    .survey-form-container .js-form-item.form-item.form-wrapper.webform-section .webform-section-wrapper> :first-child:not(.description)> :first-child>* {
        margin-right: 6rem;
    }

    .survey-form-container .js-form-item.form-item.form-wrapper.webform-section .webform-section-wrapper> :first-child:not(.description)> :first-child {
        padding-top: 3rem;
    }

    h2.webform-section-title::after {
        left: 5rem;
        width: 7rem;
        height: 10rem;
        top: -2.5rem;
        transform: scale(.65);
    }

    h2.webform-section-title {
        margin-right: 6rem;
        font-size: 2rem;
    }

    .college.tabular-view.E-services .col-lg-6:last-child .card,
    .college.tabular-view.E-services .col-lg-6:nth-last-child(2) .card {
        margin-bottom: 0;
    }

    .tabular-view .tab-content .tab-pane .col-lg-6 {
        max-width: 50%;
    }

    .tab-pane .row {
        flex-direction: row;
        width: 100%;
    }
    .tab-pane .row .col-12{
        margin-bottom:var(--spacing-5xl)!important;
        padding: 0;
    }
    .college.tabular-view.E-services .card .card-title {
        padding: 1.5rem 2rem;
        font-size: 1.4rem;
    }

    .college.tabular-view.E-services .card {
        height: 22rem;
    }

    .card.kaffa-card {
        height: auto !important;
        margin: 3rem 3rem 0 3rem;
        width: calc(100% - 8rem);
    }
    .tabular-view .case-description .extent-of-influence {
        margin-bottom: 3rem;
    }

    .form-container form .fields {
        margin-top: 4rem;
    }

    .tabular-view .nav li.slick-active.slick-current a.nav-link span {
        color: var(--blue-color);
        font-size: .8rem;
    }

    .tabular-view .nav li.slick-slide a.nav-link .icon {
        display: block;
    }

    .reports .report {
        margin-bottom: 4rem;
    }

    .security-report {
        padding: 0 6rem;
    }

    .left-section p.description {
        margin: 0 0 1.2rem;
    }

    .login .right-section h4.title {
        font-size: 2rem;
        margin-bottom: 2rem;
        margin-top: 2rem;
    }

    .right-section {
        border-left: 1px solid #dbdbdb;
        left: 3rem;
    }
    .news-content .more-info .date {
        margin-bottom: 1rem;
    }
    .contact-collapse {
        align-items: center;
        padding: 0 1rem 1rem 1rem;
    }
    .content-viewer-alt-dark .research-production .production-thumb img {
        width: 90%;
        margin-bottom: unset;
    }
    .content-viewer-alt .research-production .production-thumb img {
        width: 100%;
    }

    .research-production .row {
        flex-direction: row;
    }

    .research-production .col-md-6 {
        max-width: 50%;
    }
    .research-production {
        padding: 0;
    }

    .research-production .col-md-6:first-child {
        padding-top: 6rem;
    }

    .Deanship-agencies.contact-information .agencies-tiles .uj-container {
        flex-direction: row;
    }

    .departments .cards-section .card .logo,
    .f-services .cards-section .card .logo {
        height: 4rem;
        width: 4rem;
    }

    .departments .card .card-img-overlay .card-title,
    .f-services .card .card-img-overlay .card-title {
        padding: 1rem 2rem;
    }

    .departments .card .card-img-overlay .card-title svg,
    .f-services .card .card-img-overlay .card-title svg {
        display: inline;
        width: 2rem;
        height: auto;
    }

    .supreme-president .president-informations .description p {
        text-align: right;
    }

    .departments .cards-section .col-lg-4.col-md-6 {
        padding: 0;
    }

    .departments .cards-section .card {
        height: 18rem;
        margin-bottom: 1rem;
    }

    .associates-search .search-btn .icon::before {
        background-position: 1.2rem center;
        background-size: 1.2rem;
        height: 1.2rem;
        top: 1rem;
        width: 3rem;
    }
    .functional-competitions.container {
        padding-top: 15px;
    }

    .competitions .swiper-slide {
        position: relative;
    }

    .slick-prev {
        right: 15px;
    }

    .slick-next {
        left: 15px;
    }

    .university-services .nav-tabs .nav-item.slick-active.slick-current .nav-link {
        color: var(--blue-color);
    }

    .shortcuts {
        padding: 4rem 15px;
    }

    .shortcuts .open-data .desc,
    .shortcuts .map .desc,
    .shortcuts .accessibility-services .desc {
        display: block;
    }

    .shortcuts .open-data,
    .shortcuts .map,
    .shortcuts .accessibility-services {
        margin-bottom: 2rem;
    }

    .shortcuts {
        flex-direction: row;
        padding: 3rem 0px;
    }

    .pattern-before svg {
        display: block;
    }

    .steps {
        padding: 6rem 1rem;
    }

    .international-students {
        height: 50vh;
    }

    .season-container .season-body .header .certificate {
        justify-content: unset;
        width: fit-content;
        text-align: center;
    }

    .season-container .season-body .header .date {
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
    }

    .accordion .season-header .title {
        text-align: right;
    }

    .enrollment.swiper {
        height: 80vh;
    }

    .swiper-slide .grid-item {
        max-width: 91%;
    }

    .swiper-slide .gridItems {
        padding-top: unset;
    }

    .story .image-container img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        border-radius: var(--radius-lg);
    }

    .story.plan.show-button-true .image-container img,
    .show-button-true img {
        object-fit: cover;
    }


    .news-advertisements .news-item.col-lg-4:last-child {
        display: block;
    }

    .topnav .links-container .options {
        transform: unset;
    }

    .login .left-section {
        padding: 2rem 5rem;
    }

    .login .right-section h4.title {
        margin-bottom: 2rem;
        margin-top: 0;
    }

    .login .right-section p.description.login .right-section p.description {
        width: 70%;
    }

    .login .left-section,
    .login .right-section {
        width: 50%;
        height: 100%;
    }

    .login .right-section {
        padding: 2rem 6rem 2rem;
        justify-content: space-between;
    }

    .login {
        flex-direction: row;
        height: 100vh;
    }

    .particles-container {
        height: 80vh;
    }

    .branches-otherservices .col-lg-6:nth-child(2n+2) {
        padding-right: 15px;
    }

    .branches-otherservices .col-lg-6:nth-child(2n+1) {
        padding-left: 15px;
    }

    .contact-collapse {
        flex-direction: row;
    }

    .branches .card .pattern,
    .accordion-container .pattern {
        display: block;
    }

    .contact-us .map {
        height: 77vh;
    }

    .contact-us .map-container .zoom-controls .zoom-in,
    .contact-us .map-container .zoom-controls .zoom-out {
        height: 3rem;
        width: 3rem;
    }

    .contact-us .map-container .zoom-controls {
        position: absolute;
        bottom: 1rem;
        top: auto;
        right: 2rem;
        z-index: 2;
    }

    .map-container .gotomap span {
        font-size: 1rem;
    }

    .map-container .gotomap {
        left: 1.4rem;
        bottom: .1rem;
        padding: 1.5rem 3rem;
    }

    .profile .left-section .card .infos-container .information {
        width: 50%;
    }

    .profile .left-section .card {
        margin-bottom: 1.5rem;
    }
    .slick-prev {
        right: 0;
    }

    .slick-next {
        left: 0;
    }

    .associates-tiles .card .card-body .card-title {
        margin: 0 0 1rem;
    }

    .profile .right-section {
        position: relative;
        left: 0rem;
        top: -0.3rem;
        /* padding: 0 0.6rem; */
    }

    .profile .left-section.col-lg-9 {
        padding: 0 15px;
    }

    .story.story-img {
        align-items: center;
        margin-bottom: 3rem;
    }

    .president-tabview ul li {
        display: block;
        margin-top: 1rem;
    }

    .agent-cv .col-lg-4 {
        padding: 0 15px;
    }

    .agent-cv {
        flex-direction: row;
    }

    .slick-track .tab-pane {
        width: 100% !important;
        right: 0 !important;
    }

    .slick-prev,
    .slick-next {
        width: 2.1rem !important;
        z-index: 6;
        background-color: transparent;
    }

    .supreme-president .president-informations p.description {
        padding: 0;
    }

    .president-informations .bottom-section,
    .agent-cv .bottom-section {
        flex-direction: row;
        margin-top:var(--spacing-3xl);
    }

    .supreme-president .president-informations .buttons-container {
        justify-content: flex-start;
        margin-top: 3rem;
    }

    .supreme-president .president-informations,
    .agent-cv .agent-informations {
        width: 70%;
        margin-right: var(--spacing-6xl);
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .supreme-president .uj-container {
        flex-direction: row;
    }

    .focus-area .focus-body {
        padding-right: 1rem;
    }

    .uni-inovations .inovation-container .inovations-detail .item.selected {
        background-color: rgba(213, 213, 213, 0.2)
    }

    .uni-inovations .inovation-container .inovations-detail .item {
        padding: var(--spacing-2xl) var(--spacing-3xl);
        border-radius: 0;
        background-color: transparent;
        margin: 0;
    }

    .uni-inovations .inovation-container .inovations-detail {
        flex-direction: column;
        position: initial;
    }

    .uni-inovations .inovation-container .inovations-detail .desc {
        display: -webkit-box;
    }

    .uni-inovations .inovation-container .inovations-detail .date {
        display: flex;
    }

    .departments .cards-section .col-lg-4.col-md-6 {
        padding: 0px 15px;
    }

    .departments .cards-section .col-lg-4.col-md-6:nth-child(3n+1) {
        padding-right: 0;
    }

    .departments .cards-section .col-lg-4.col-md-6:nth-child(3n+3) {
        padding-left: 0;
    }
    .life-jeddah .tiles-container .col-lg-3:last-child {
        padding-left: 0;
    }

    .animation svg {
        width: 104% !important;
        height: 107% !important;
        transform: translate3d(-2rem, 0px, 0px) !important;
    }

    .focus-area .focus-body .links .link-holder .link {
        font-size: 1.6rem;
    }

    .focus-area .focus-body .links .link-holder .icon {
        width: 2rem;
        height: 2rem;
    }

    .focus-area .focus-body .links .link-holder .link .icon {
        width: 2rem;
        height: 2rem;
    }

    .focus-area .focus-body .links .link-holder .link .icon svg {
        width: 100%;
        height: 100%;
    }

    .focus-area .focus-body .links .link-holder {
        padding: 2rem 2rem 2rem;
    }

    .ilustrator {
        top: 14.3rem;
        left: 11rem;
        height: 3rem;
        width: 3rem;
    }

    .nav-tabs .nav-item.slick-current.slick-active:nth-child(4n+1) .nav-link {
        border-top: 10px solid var(--blue-color);
        filter: grayscale(0);
    }

    .nav-tabs .nav-item.slick-active.slick-current:nth-child(4n+2) .nav-link {
        border-top: 10px solid var(--orange-color);
        filter: grayscale(0);
    }

    .nav-tabs .nav-item.slick-active.slick-current:nth-child(4n+3) .nav-link {
        border-top: 10px solid var(--green-color);
    }

    .nav-tabs .nav-item.slick-current.slick-active:nth-child(4n+4) .nav-link {
        border-top: 10px solid var(--red-color);
    }

    .president-tabview .nav-tabs .nav-item .nav-link {
        padding: 0.6rem 2.1rem;
        width: fit-content;
        white-space: nowrap;
    }

    .president-tabview .nav-tabs .nav-item.slick-active.slick-current .nav-link {
        border-top: 10px solid var(--blue-color);
        filter: grayscale(0);
        background-color: white;
    }
    #chartdiv {
        height: 700px !important;
    }
    .department-news .nav-pills .nav-link.active {
        border-bottom: 2px solid var(--orange-color);
    }
    .volunteering .nav.nav-tabs li.nav-item.slick-active.slick-current a.nav-link {
        color: var(--green-color);
        background-color: transparent;
        border: none;
    }
    .story .uj-container {
        flex-direction: row;
    }

    .achievements .news-advertisements .nav-pills .nav-link.active {
        color: var(--green-color) !important;
        border-bottom: 2px solid var(--green-color);
    }

    .achievements .tab-pane.slick-current.slick-active {
        display: flex;
    }

    .available-prog-swiper {
        max-height: 81vh;
        margin-top: 2rem;
    }
    .step .start-date,
    .step .end-date {
        display: flex;
        justify-content: center;
    }

    .step .header .num {
        font-size: 3.5rem;
    }
    .search .search-btn,
    .associates-search .search-btn label {
        display: block;
    }
    .tabular-view .nav li.slick-active.slick-current:nth-child(3) a.nav-link {
        border-top: 7px solid var(--green-color);
    }

    .tabular-view .nav li.slick-active.slick-current:nth-child(4) a.nav-link {
        border-top: 7px solid var(--red-color);
    }

    .college li.nav-item.slick-slide {
        height: 4rem;
    }

    .college.tabular-view .statistic {
        border-left: 1px solid #D6D6D6;
        border-bottom: none;
    }

    .tabular-view .tab-content .tab-pane:nth-child(2) .input-section .input-error .input__field:focus+.input__label,
    .tabular-view .tab-content .tab-pane:nth-child(2) .input-section .input--filled,
    .form-container form .input-error .input__field:focus+.input__label,
    .form-container form .input--filled {
        color: red;
    }

    .tabular-view .tab-content .tab-pane:nth-child(2) textarea:focus {
        border-color: var(--orange-color);
    }

    .university-services .nav-tabs .nav-item.slick-active.slick-current .nav-link {
        color: var(--txt-color);
    }

    .profile .nav-tabs .slick-slide {
        white-space: nowrap;
    }

    .tabular-view .nav-tabs .slick-track {
        transform: translate3d(0px, 0px, 0px) !important;
    }

.university-services .services-container .col-lg-3 .card {
        margin-bottom: none;
    }

    .university-services .tab-pane.partner-con .services-container {
        overflow: hidden;
    }

    .university-services .nav-tabs .nav-item.slick-active.slick-current:nth-child(4n+1) .nav-link {
        border-top: 9px solid var(--blue-color);
    }

    .university-services .nav-tabs .nav-item.slick-active.slick-current:nth-child(4n+2) .nav-link {
        border-top: 9px solid var(--orange-color);
    }

    .university-services .nav-tabs .nav-item.slick-active.slick-current:nth-child(4n+3) .nav-link {
        border-top: 9px solid var(--green-color);
    }

    .university-services .nav-tabs .nav-item.slick-active.slick-current:nth-child(4n+4) .nav-link {
        border-top: 9px solid var(--red-color);
    }

    .tabular-view .nav li.slick-slide:nth-child(2) a.nav-link .icon svg path,
    .tabular-view .nav li.slick-slide a.nav-link .icon svg line {
        stroke: var(--orange-color);
    }
    .tabular-view .tab-content .tab-pane:nth-child(2n+2) .submit-buttons .reset {
        color: var(--orange-color);
    }

    .tabular-view .tab-content .tab-pane:nth-child(2n+2) .submit-buttons .reset .icon svg path {
        fill: var(--orange-color);
    }

    .tabular-view .tab-content .tab-pane:nth-child(2n+2) label input:checked+span::before {
        box-shadow: inset 0 0 0 0.25em var(--orange-color);
    }

    .tabular-view .tab-content .tab-pane:nth-child(2n+2) .labels .label.active,
    .tabular-view .tab-content .tab-pane:nth-child(2n+2) .submit-buttons .submit {
        background-color: var(--orange-color);
    }

    .tabular-view .tab-content .tab-pane:nth-child(2n+2) .submit-buttons .submit:hover {
        background-color: var(--orange-color-hover);
    }

    .tabular-view .tab-content .tab-pane:nth-child(2n+2) .input-section .input__field:focus+.input__label,
    .tabular-view .tab-content .tab-pane:nth-child(2n+2) .input-section .input--filled {
        transform: translate3d(0px, -22px, 0px);
        background: white;
        color: var(--orange-color);
        font-size: 0.8rem;
    }

    .tabular-view .tab-content .tab-pane:nth-child(2n+2) .input-section .input__field:focus {
        border-color: var(--orange-color);
    }

    .tabular-view .nav li.slick-slide a.nav-link {
        height: 5rem;
        margin: 0 0rem 0 1rem;
        display: flex;
    }
    .tabular-view .nav li.slick-active.slick-current:nth-child(1) a.nav-link {
        border-top: 7px solid var(--blue-color);
        color: var(--txt-color);
    }

    .tabular-view .nav li.slick-active.slick-current:nth-child(2) a.nav-link {
        border-top: 7px solid var(--orange-color);
        color: var(--txt-color);
    }

    .tabular-view .nav li.slick-active.slick-current:nth-child(2) a.nav-link span {
        color: var(--orange-color);
    }

    .president-tabview .slick-prev,
    .president-tabview .slick-next {
        display: block !important;
        width: 2.9rem !important;
    }

    .president-tabview .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .president-tabview .nav-tabs.no-arrows {
        padding: 0;
    }

    .slick-prev,
    .slick-next {
        display: none !important;
    }

    .profile .slick-prev,
    .profile .slick-next {
        display: flex !important;
        height: 100%;
        width: 3rem;
        background-size: 100%;
    }

    .profile-tabs .slick-prev,
    .profile-tabs .slick-next {
        display: block !important;
    }

    .profile-tabs .slick-prev.slick-disabled,
    .profile-tabs .slick-next.slick-disabled {
        display: none !important;
    }

    .quick-links .link {
        margin: 0;
    }

    .quick-links {
        display: flex;
        align-items: center;
        padding: 0 0 0 6rem !important;
    }

    .dropdown.users ins::before {
        right: 13px;
    }

    .associates-search .dropdown button {
        padding: 0px 2rem;
    }

    .uni-side ins,
    .users ins {
        width: 1rem;
        margin-left: 0;
    }

    .dropdown button.btn.btn-light.dropdown-toggle label {
        display: block;
    }

    .associates-tiles .card .card-body .profile {
        margin-bottom: 0;
    }
    .std {
        border-left: 1.4px solid #e4e4e4;
        background-color: white;
        z-index: 2;
    }

    .std::before {
        content: "";
        position: absolute;
        width: 3.5rem;
        height: 2px;
        top: 2.9rem;
        right: -2.5rem;
        background-color: black;
    }

    .std::after {
        position: absolute;
        width: 1px;
        height: 4rem;
        top: -1rem;
        left: -2rem;
        background-color: rgb(222, 226, 230);
    }

    .chart-container {
        width: 60%;
    }

    .bar-chart .content {
        width: 40%;
    }

    .bar-chart {
        flex-direction: row;
        padding: 6rem 6rem 0;
    }

    .form-container form .input-item {
        width: 49%;
        margin-bottom: 0rem;
        height: 5rem;
    }

    .vision-guidelines-buttons {
        flex-direction: row;
    }
    a.more-testimonials-btn.read-more {
        margin: 0 0 2rem 0;
        overflow: visible;
    }

    .news-advertisements .section-toggle a,
    .acheivements .section-toggle a {
        margin: 0 .5rem;
    }
    .submit-buttons {
        margin-top: 2rem;
    }

    .tabular-view .tab-content .input-item,
    .tabular-view .tab-content .input-item .item {
        width: 48%;
    }

    .text-area .input-item,
    .text-area .item {
        width: 100% !important;
    }

    .form-container form .input-item.details {
        width: 100%;
    }

    .tabular-view .case-description {
        display: flex;
    }
    .form-container form .input-item:nth-child(2n+1) {
        margin-left: 1rem;
    }
    .tabular-view .tab-content {
        width: 100%;
    }

    .swiper-slide .gridItems .grid-item .card {
        height: 32rem;
    }

    .swiper-slide .grid-item.holder .card {
        height: 15rem;
    }

    .swiper-slide .grid-item {
        max-width: 34%;
        width: 100%;
        padding: 1rem;
    }

    .swiper-slide .gridItems {
        flex-direction: row;
    }

    .international-students .card-img-overlay .footer {
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .international-students .card-img-overlay {
        background-color: white;
        height: fit-content;
        width: 40%;
        padding: 2rem;
    }

    .season .pattern,
    .international-students .pattern {
        display: block;
    }

    .season-container .season-body .header .certificate {
        margin: 0 1rem;
    }

    .season-container .season-body .header .date {
        flex-direction: row;
    }

    .accordion ul li .date .arrow {
        transform: rotate(0);
    }

    .all-news .swiper-wrapper {
        height: 29rem;
    }

    .accordion ul li div.season-title {
        padding: 0;
    }

    .accordion ul {
        flex-direction: row;
    }

    .season-container .season-body .header {
        display: flex;
        align-items: center;
    }

    .accordion ul li {
        vertical-align: bottom;
        position: relative;
        width: 10rem;
        max-height: 36rem;
        height: 36rem;
        transition: all 500ms ease 0s !important;
        display: flex;
        margin: 0px 1rem;
        background-color: white;
        cursor: pointer;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .accordion ul li div.season-title label {
        transform: rotate(-90deg);
        font-size: 1.9rem;
    }

    .story .image-container img {
        display: block;
    }

    .enrollment.swiper .swiper-slide .title {
        font-size: 4rem;
    }

    .pattern-image .row {
        margin: auto auto 4rem;
        justify-content: space-between;
    }

    .news-content .news-thumbnail-img img.research-img {
        width: 33%;
    }

    .patt {
        margin-bottom: 3rem;
    }

    .patt:nth-child(2n+1) {
        flex-direction: row-reverse;
    }



    .story .our-story {
        margin-right: 0px;
    }

    .uj-container:has(>.testimonials) {
        padding: 0;
    }
    .uj-container:has(>.leaders) {
        padding: var(--spacing-5xl) 0;
    }
    .pattern-image {
        background-image: url("/themes/uoj_theme/media/brain+logo.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 36%;
    }

    .departments .input-group-append {
        padding: 1rem 2rem;
    }

    .departments .dept-search {
        display: block;
    }

    .departments .cards-section .col-lg-4.col-md-6:nth-child(3n+1),
    .data-tiles .col-lg-3:nth-child(4n+1) {
        padding-right: 0px;
    }

    .departments .cards-section .col-lg-4.col-md-6:nth-child(3n+3),
    .data-tiles .col-lg-3:nth-child(4n+4) {
        padding-left: 0px;
    }

    .twitter-side-menu.toggled button.close {
        position: absolute;
        top: 1.5rem;
        right: -4rem;
    }
    .uoj-breadcrumb .icon {
        width: 0.4rem;
        margin: 0px 0.5rem;
    }

    .contact-us .branches-otherservices .branches .item .pattern {
        left: -4.9rem;
    }

    .news-advertisements .news-item:last-child {
        margin-left: 0px;
    }

    .service.col-md-4 .image {
        width: 10rem;
        height: 10rem;
    }

    .news-content .more-info .devider {
        width: 1px;
        background-color: rgb(199, 199, 199);
        margin: 0px 1.5rem;
        height: 1rem;
        display: none;
    }

    .news-content .more-info .date {
        margin-bottom: 0px;
    }

    .news-content .more-info {
        flex-direction: row;
        align-items: center;
        width: fit-content;
        margin: 1rem 0;
        padding: 0;
    }

    .goals .column {
        max-width: 50%;
        margin-bottom: 2rem;
    }

    .goals .column:nth-child(4n+1),
    .goals .column:nth-child(4n+4) {
        padding-left: 1rem;
    }
    .goals{
        gap:var(--spacing-2xl);
        display: flex;
        flex-wrap: wrap;
    }
    .pattern-image .row {
        flex-direction: row;
    }

    .pattern-image .row.one {
        width: 48rem;
    }

    .pattern-image .row .patt {
        display: flex;
        align-items: center;
        width: 20rem;
    }

    .pattern-image .row {
        margin: auto auto 4rem;
        justify-content: space-between;
    }


    .story .our-story {
        width: 50%;
        flex: 1;
    }

    .story.research-production .our-story {
        margin-right: 0;
        margin-left: 4rem;
    }

    .content-viewer-alt-dark .story.research-production .our-story {
        margin-right: 0;
        margin-left: 0;
    }

    .story .image-container {
        width: 50%;
        max-height: 25rem;
        flex: 1;
    }

    .contact-us .contact-infos {
        flex-wrap: nowrap;
    }

    .contact-us .contact-infos .email,
    .contact-us .contact-infos .phone {
        border-left: 1px solid rgb(213, 213, 213);
        border-bottom: none;
    }

    .contact-us .contact-infos .fax {
        position: relative;
        padding: 1rem 3rem 1rem 5rem;
    }

    .contact-us .branches-otherservices .contents.card-columns {
        column-count: 1;
    }



    .news-advertisements .items {
        flex-direction: row;
    }

    .search button.close {
        top: 3rem;
        left: 3rem;
    }

    .search button.close svg g#Ellipse_27 {
        stroke: var(--black-color);
    }

    .search button.close svg line#Line_135,
    .search button.close svg line#Line_136 {
        stroke: var(--black-color);
    }

    .search-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }

    .quick-links {
        justify-content: start;
        background-image: none;
        position: relative !important;
    }

    .swiper.programs .swiper-slide .card .card-img-overlay .cta {
        height: 2rem;
        width: 2rem;
    }

    .uni-inovations .inovation-container .inovations-detail {
        width: 55%;
    }

    .uni-inovations .main-news {
        width: 50%;
    }

    .uni-inovations .inovation-container {
        display: flex;
        align-items: center;
        margin-top: 5rem;
    }

    .footer-bottom .social-icons {
        margin: 0px;
    }
    .tab-links li {
        font-size: 1.1rem;
        width: fit-content;
    }

    .swiper.programs .swiper-slide .card .card-img-overlay .card-title {
        font-size: 2rem;
    }

    .uoj-electronic {
        top: 8rem;
        left: 6rem;
        display: none;
    }
    .topnav .logo-container .long img,
    .scroll .logo-container .long img {
        width: 10rem;
        height: 4.5rem;
        object-fit: contain;
    }

    .logo-container div svg,
    .topnav .logo-container div img {
        width: 4rem;
        height: 4rem;
    }

    .section-title.aos-init.aos-animate {
        font-size: 4rem;
        margin-bottom: 3rem;
    }

    .uni-programs.container {
        padding-bottom: 10rem;
    }

    .vertical-line {
        border-left: 1px solid rgba(255, 255, 255, 0.51);
    }

    .colored-logo {
        display: none;
    }

    .white-logo {
        justify-content: center;
        display: flex;
    }

    .main-menu-container.enabled .main-menu .close-btn {
        display: block;
    }

    .topnav .links {
        display: flex;
        flex-direction: row;
        padding-right: 0;
        margin: 0 1.7rem;
        gap: 1rem;
    }

    .steps-app.container {
        background-color: #ECECEC;
        padding-top: 1rem;
        padding-bottom: 2rem;
    }

    .steps-app .pattern-before {
        display: none;
    }

    .steps-app .steps {
        padding: 0;
    }

    .contact-us .branches-otherservices .otherservices .services-1 .item,
    .contact-us .branches-otherservices .branches .item {
        width: 20rem;
    }

    h1.section-title::before {
        top: 3.3rem;
        right: 0px;
        position: absolute;
        content: "";
        display: inline-block;
        margin: 0px 0px 0px 1rem;
        transition: all 0.2s ease 0s;
        height: 5px;
        width: 5rem;
        background-color: var(--background-sa-flag);
    }

    .our-story h1.section-title::before {
        content: none;
    }

    .shortcuts .open-data,
    .shortcuts .map,
    .shortcuts .accessibility-services {
        margin-bottom: 0px;
    }

    .topnav .links a {
        padding: 0px 0 0 1rem;
    }

    .topnav .nav-item:first-child .nav-link {
        padding-right: 0;
    }

    .menu {
        display: block;
    }

    .menu-mobile-icon {
        display: none;
    }

    .topnav .navbar {
        padding-top: 15px;
        padding-bottom: 15px;
        flex-wrap: nowrap;
    }

    .navbar.navbar-expand-sm {
        flex-direction: row;
        justify-content: space-between;
    }

    .navbar-brand {
        display: flex;
    }

    .topnav .vertical-line,
    .topnav .options .language-selector,
    .topnav .options .accessibility,
    .topnav .right-lnk div:nth-child(3) {
        display: block;
    }

    .topnav .right-lnk .logo-container div:first-child svg {
        width: auto;
    }

    .topnav .options .accessibility,
    .topnav .options .search,
    .topnav .options .menu,
    .topnav .options select {
        display: flex;
        padding: 0px 0.8rem;
        width: 3rem;
    }

    .topnav .options .accessibility,
    .topnav .options .search,
    .topnav .options .menu,
    .topnav .options select {
        display: flex;
        padding: 0px 0.8rem;
        width: 2.8rem;
    }

    .scroll.topnav .options .menu {
        padding: 0px 0.8rem 0px 0px;
    }

    .scroll .search svg,
    .scroll .accessibility svg {
        height: 1.6rem;
    }

    .faqs .faqs-search input {
        width: 40%;
    }

    .patt {
        margin-bottom: 0px;
    }

    .footer-bottom.container {
        flex-direction: row;
    }

    .international-students {
        height: 74vh;
    }

    .main-menu-container .main-menu .social-icons a svg,
    .main-menu-container .main-menu .logo img {
        width: 3rem;
        height: auto;
    }

    .profile .swiper-button-prev,
    .profile .swiper-button-next {
        top: 1.4rem;
    }


    .contact-us .leaflet-popup-tip-container {
        top: 4.5rem !important;
        transform: rotate(50deg);
    }

    .map-container .gotomap {
        left: 1rem;
        bottom: 0;
    }

    .depart-container {
        padding: 4rem 4.5rem 3rem;
    }

    .focus-area .focus-body .animation-zone lottie-player {
        height: 40.1rem !important;
        width: 94% !important;
        display: block;
        margin: 0;
    }

    .focus-area .focus-body .animation-zone,
    .focus-area .focus-body .links {
        width: 50%;
    }

    .focus-area .focus-body {
        padding-right: 0rem;
    }

    .quick-links .logo {
        left: 0;
        top: 2rem;
        display: none;
    }

    .wrapper .uoj-logo {
        width: 20rem !important;
    }

    .contact-us .branches-otherservices .otherservices .card:nth-child(2) {
        margin-bottom: 0px;
    }

    .contact-us .branches-otherservices .otherservices .card,
    .contact-us .branches-otherservices .branches .card {
        margin-bottom: 2rem;
    }

    .contact-us .branches-otherservices .branches .contents.card-columns {
        column-count: 1;
    }

    .contact-us .branches-otherservices .otherservices .contents.card-columns {
        column-gap: 4rem;
    }

    .swiper.programs .swiper-slide .card .card-img-overlay .card-title {
        font-size: 1.3rem;
    }

    .uoj-electronic {
        top: 9rem;
        left: 11rem;
    }


    .all-news-container .col-lg-3 .card .img-container,
    .all-news-container .col-lg-3 .card .card-img-overlay {
        height: 14rem;
    }

    .all-news-container .col-lg-3 .card .card-title {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
    }

    .news-container {
        padding-right: 6rem;
    }

    .container {
        max-width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media screen and (min-width: 1024px) {
    #map {
        height: calc(100vh - 8.1rem);
    }

    .select-department .dropdown .dropdown-menu.show#departments {
        right: 0;
    }

    .leaflet-top {
        bottom: 1.5rem;
    }

    .survey-form-container {
        margin-top: 5rem;
    }

    .survey-msg .msg-container ul li::before {
        top: .75rem;
        height: .8rem;
        width: .8rem;
    }

    .survey-msg .msg-container {
        line-height: 2.2;
    }

    .survey-msg .survey-title {
        font-size: 2.3rem;
        padding-bottom: 3rem;
        margin: 3rem 0;
    }

    .leaflet-popup-tip-container {
        left: -.9rem !important;
        bottom: 122px !important;
    }

    .beta-ribbon {
        position: fixed;
    }

    .data-tiles .col-lg-3 .pattern,
    .about-swiper .pattern,
    .goals-container .pattern,
    .volunteering .volunteer-tiles .col-lg-6 .card .pattern,
    .deanship-agencies .agencies-tiles .col-lg-6 .card .pattern,
    .contact-zone .col-lg-6 .card .pattern {
        position: absolute;
        left: 5.25rem;
    }
}

@media(min-width: 1200px) {
    .uj-container {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        max-width: var(--container-max-width-desktop);
        padding: var(--spacing-5xl) var(--container-padding-mobile);
        border-radius: var(--radius-md);
    }

    .cookiesModal .modal-dialog {
        bottom: 0rem;
        left: 1rem;
        top: auto;
        position: absolute;
        width: 27rem;
        border-radius: .5rem;
        overflow: hidden;
    }
    .right-section .card .profile-img {
        height: 11rem;
        width: 11rem;
    }

    label[for="edit-please-mention-any-suggestions-or-comments-if-any-through-your-e"] {
        margin-right: 6rem !important;
        margin-left: 6rem !important;
    }

    .feedback-v2 .feedback-buttons {
        margin-bottom: 0;
    }

    .feedback-v2 .feedback-ques {
        transform: translateY(calc(100% - 10rem));
    }

    .rating form {
        flex-direction: row;
        align-items: center;
    }

    .feedback-leftzone {
        display: flex;
        align-items: center;
    }

    .published-time svg {
        left: 4rem;
    }

    .rating-text {
        margin-top: 0rem;
    }

    .rating-text {
        font-size: 0.9rem;
        text-wrap: nowrap;
    }

    .news-thumbnail.container {
        margin: 2rem 0rem 0 3.5rem;
    }
    .news-content {
        flex-wrap: nowrap;
    }

    .contact-section-informations {
        padding-right: 5rem;
        padding-left: 0;
    }

    .pattern-image .row.one {
        width: 48rem;
    }

    .pattern-image .row.two,
    .pattern-image .row.six {
        width: 75rem;
    }

    .pattern-image .row.three {
        width: 82rem;
    }

    .pattern-image .row.four {
        width: 91rem;
    }

    .pattern-image .row.five {
        width: 82rem;
    }

    .modal.scrolling.acc-modal {
        left: 12.6rem;
        top: 5.6rem;
    }

    .modal.acc-modal {
        top: 6rem;
    }

    .acc-modal::before {
        left: 11.2rem;
    }

    .headline .content::after {
        top: 6rem;
    }

    .scroll.topnav .options .accessibility,
    .scroll.topnav .options .search,
    .scroll.topnav .options select {
        width: 3rem;
    }

    .topnav .languages .dropdown-toggle {
        font-size: 1rem;
    }

    .scroll .vertical-line {
        margin: 0.1rem 1.2rem;
    }

    .modal.acc-modal {
        top: 6rem;
        left: 3.95rem;
    }

    .uni-inovations .main-news {
        width: 50%;
    }
    .college-programs.container {
        padding: 1rem 6rem;
    }

    .form-container form .input-item:nth-child(2n+1) {
        margin-left: 1.1rem;
    }

    .goals .column:nth-child(4n+1),
    .goals .column:nth-child(4n+4) {
        padding: 0px 0rem 0px 2rem;
    }
    .contact-us .map-container .zoom-controls {
        right: 6rem;
    }

    .map-container .gotomap {
        left: 5rem;
    }

    .pattern-image {
        background-size: 48%;
    }

    .international-students .card-img-overlay {
        right: 5rem;
    }

    .step .header .num {
        font-size: 2.5rem;
    }

    .step .header .title {
        font-size: 1.2rem;
    }

    .footer-contents .links-container .title {
        margin: 0 4rem;
    }

    .step {
        margin-bottom: 3rem;
        padding-bottom: unset;
        border-bottom: unset;
    }

    .step .header {
        justify-content: unset;
    }

    .steps .step .header {
        align-items: center;
        display: flex;
        justify-content: center;
        padding: 0 3rem;
    }

    .step .header {
        flex-direction: column;
        min-height: 13rem;
        max-height: 13rem;
        min-width: 13rem;
    }

    .step:nth-child(even) .instruction {
        transform: translateY(-41.8rem);
        content: "";
        bottom: 8rem;
        left: 50%;
        transform: translate(50%, -50%);
        width: 100%;
        padding-bottom: 2rem;
        min-height: fit-content;
    }

    .step:nth-child(n)::before,
    .step:nth-child(5n+1) .instruction::before {
        content: '';
        background-size: 100%;
        background-position: top;
        background-repeat: no-repeat;
        position: absolute;
        height: 5rem;
        width: 1rem;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .step:nth-child(5n+1)::before {
        content: none;
    }

    .step:nth-child(even)::before {
        top: 0;
    }

    .step:nth-child(odd)::before {
        bottom: -3rem;
        transform: translateY(0);
    }

    .step .instruction {
        min-height: fit-content;
        content: '';
        display: block;
        right: 50%;
        transform: translateX(50%);
        width: 100%;
    }

    .step .instruction {
        max-width: 18rem;
    }

    .step .instruction {
        position: absolute;
        text-align: center;
        min-height: 11rem;
    }

    .steps .step {
        flex-direction: row;
        margin-bottom: 0;
        align-items: center;
    }

    .step:nth-child(5n+5) .header {
        border-bottom: 2.6rem solid;
        border-image: linear-gradient(to left, #77478E 25%, #77478E 25%, #77478E 25%, #77478E 25%) 1 stretch repeat;
        padding: 0 3rem;
        border-right: 1.3rem solid;
    }

    .step:nth-child(5n+1) .header {
        border-right: 0rem solid;
        border-bottom: 2.6rem solid;
        border-left: 1.3rem solid;
        border-image: linear-gradient(to left, #22B0E9 58%, #22B0E9 35%, #D37B60 49%) 2 round repeat;
    }

    .step:nth-child(5n+2) .header {
        border-right: 1rem solid;
        border-top: 2rem solid;
        border-left: 1rem solid;
        border-image: linear-gradient(to left, #D37B60 25%, #D37B60 49%, #0DA290 50%) 2 stretch repeat;
    }

    .step:nth-child(5n+3) .header {
        border-right: 1.3rem solid;
        border-bottom: 2.6rem solid;
        border-left: 1.3rem solid;
        border-image: linear-gradient(to left, #0DA290 25%, #0DA290 49%, #B62C3F 50%) 1 stretch repeat;
    }

    .step:nth-child(5n+4) .header {
        border-right: 1.3rem solid;
        border-top: 2.6rem solid;
        border-left: 1.3rem solid;
        border-image: linear-gradient(to left, #B62C3F 25%, #B62C3F 51%, #77478E 31%) 2 stretch repeat;
    }

    .step:nth-child(5n+1) .instruction::before {
        background-image: url("/themes/uoj_theme/media/blue.svg");
        transform: rotate(180deg) translateY(3.5rem);
        height: 3rem;
    }

    .step:nth-child(5n+2)::before {
        background-image: url("/themes/uoj_theme/media/orange.svg");
    }

    .step:nth-child(5n+3)::before {
        background-image: url("/themes/uoj_theme/media/green.svg");
    }

    .step:nth-child(5n+4)::before {
        background-image: url("/themes/uoj_theme/media/red.svg");
    }

    .step:nth-child(5n+5)::before {
        background-image: url("/themes/uoj_theme/media/purple.svg");
    }

    .step:nth-child(5n) .instruction::before .step:nth-child(5n+2) .instruction::before,
    .step:nth-child(5n+4) .instruction::before {
        top: calc(100% + -2.7rem);
    }

    .step::after {
        content: "";
        width: 30%;
        height: 23px;
        border-bottom: solid 1.3rem transparent;
        border-top: solid 1.3rem transparent;
        position: absolute;
    }

    .step::after {
        border-bottom: 1.3rem solid transparent;
        border-top: 1.3rem solid transparent;
        border-top: 1.3rem solid transparent;
    }

    .step:nth-child(5n+2)::after {
        right: 8.6rem;
    }

    .step:nth-child(5n+5)::after {
        right: 17.6rem;
    }

    .step:nth-child(5n+1)::after {
        top: 17.4rem;
        right: 7.9rem;
    }

    .step:nth-child(5n+2)::after {
        top: -0.012rem;
        right: 8.6rem;
    }

    .step:nth-child(5n+3)::after {
        top: 17.4rem;
        right: 8.6rem;
    }

    .step:nth-child(5n+4)::after {
        top: -0.012rem;
        right: 8.9rem;
    }

    .step:nth-child(5n+5)::after {
        top: 17.4rem;
        right: 17.6rem;
    }

    .step:nth-child(5n+1)::before {
        content: '';
        background: url("/themes/uoj_theme/media/Group\ 2482.png") transparent;
        background-size: 56%;
        background-position: top;
        background-repeat: no-repeat;
        position: absolute;
        height: 11rem;
        width: 4rem;
        z-index: 1;
        bottom: 0;
        right: -4rem;
    }

    .steps {
        flex-direction: row;
        height: 50rem;
        padding: 0 6rem;
        justify-content: center;
        align-items: center;
    }

    a.more-testimonials-btn.read-more {
        padding-left: 5rem;
    }

    .container {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .focus-area .focus-body .links .link-holder {
        padding: 3rem 3rem 3.1rem 6rem;
    }

    .footer .footer-contents .mobile-apps {
        padding: 4rem 2rem 3rem 6rem;
    }

    .footer .footer-contents .newsletter {
        padding: 0rem 6rem 2rem 0px;
        margin-bottom: 0px;
    }


    .beta-ribbon,
    .sub .beta-ribbon,
    body.toolbar-horizontal .beta-ribbon {
        width: 10.5rem;
        padding: 9px;
        position: fixed;
        letter-spacing: .5px;
        font-size: .9rem;
        background-color: unset;
        background: url("/themes/uoj_theme/media/beta-ribbon.webp"), linear-gradient(45deg, #C61366, #C0163B) no-repeat fixed;
        top: 1.3rem;
        left: -2.9rem;
        background-size: 200%;
        background-position-x: 49%;
        background-position-y: center;
        transform: rotate(-45deg);
        font-family: var(--IBM-sb);
    }
}

@media(min-width: 1365px) {
    .step:nth-child(5n+2) .header {
        border-right: 1rem solid;
        border-top: 2rem solid;
        border-left: 1rem solid;
    }
}

@media screen and (min-width: 1400px) {
    .opportunities .swiper-slide .card .card-tex {
        height: 9rem;
    }
    #map {
        height: calc(100vh - 7.2rem);
    }

    .leaflet-top {
        bottom: 2.5rem;
    }

    .leaflet-popup-tip-container {
        left: -.55rem !important;
        bottom: 166px !important;
    }

    .test {
        top: 8.5rem;
    }

    .building-info-container .Responsible-details .contactcta svg,
    .right-section .direction svg {
        width: auto;
    }

    .right-section {
        left: 2.3rem;
        top: -1.1rem;
    }

    .leaflet-popup-close-button {
        font-size: 2.2rem !important;
    }

    .tabular-view label span::before {
        width: 22px;
        height: 22px;
    }

    .orgchart-container {
        height: 31rem;
    }

    .departments .cards-section .card {
        height: 20rem;
    }

    .footer .footer-contents .mobile-apps .stores .ios svg,
    .footer .footer-contents .mobile-apps .stores .android svg {
        width: auto;
        height: auto;
    }

    .search-footer .link svg {
        width: auto;
        height: auto;
    }

    .departments .card .card-img-overlay .card-title svg,
    .f-services .card .card-img-overlay .card-title svg {
        width: auto;
    }

    .step:nth-child(5n+1)::before {
        bottom: 0rem;
    }

    .beta-ribbon {
        top: 10px;
        left: -38px;
    }

    .data-tiles .col-lg-3 .pattern,
    .about-swiper .pattern,
    .goals-container .pattern,
    .volunteering .volunteer-tiles .col-lg-6 .card .pattern,
    .deanship-agencies .agencies-tiles .col-lg-6 .card .pattern,
    .contact-zone .col-lg-6 .card .pattern {
        left: 2.25rem;
    }

    .beta-ribbon {
        top: 1.2rem;
        left: -3rem;
    }

    .step::after {
        height: 2.6rem;
        border-bottom: solid 1.3rem transparent;
        border-top: solid 1.3rem transparent;
    }
}

@media only screen and (min-width: 1600px) {
    
    .college-programs .programs-container .program .contents .contents-container {
        height: 24.5vw;
    }

    .step:nth-child(5n+5) .header {
        padding: 4vw 3vw 4vw 3vw;
    }

    .step:nth-child(5n+4) .header {
        padding: 2vw 3vw 4vw 3vw;
    }

    .step:nth-child(odd) .instruction {
        top: 19vw;
    }

    .step:nth-child(5n+3) .instruction::before {
        transform: translateY(-1vw);
    }

    .sidebuttons.toggled .sidebuttons-toggler {
        top: 16.3vw;
    }

    .news-thumbnail.container {
        max-height: 39vw;
    }

    .service.col-md-4 .image {
        width: 10vw;
        height: 10vw;
    }

    .modal.acc-modal {
        top: 6vw;
    }

    .acc-modal::before {
        left: 9.7vw;
    }

    .old-version {
        bottom: 6vw;
    }

    .story .image-container {
        max-height: 25vw;
    }

    .college .college-annual-report .item a.item-cta {
        font-size: .9vw;
    }

    .polls-side-menu .answers-section .result .percentage .text {
        margin-left: 1vw;
    }

    .polls-side-menu .answers-section .result .percentage {
        margin-left: 1.5vw;
        margin-right: 0;
    }

    .polls-side-menu .answers-section .result {
        padding: .8vw 0;
    }

    .old-version .mockup-container {
        width: 8vw;
        margin-left: 1vw;
    }

    .old-version {
        bottom: 5.7vw;
        font-size: 1.1vw;
        padding: 1.3vw 2.5vw 1.3vw 3.5vw;
    }

    .old-version .mockup-container img {
        transform: translateY(-3vw);
    }

    .services-container::after {
        right: -2vw;
    }

    .partner-con .services-container .swiper-button-next {
        left: -4vw;
    }

    .partner-con .services-container .swiper-button-prev {
        right: -4vw;
    }
    .uni-inovations .inovation-container .inovations-detail .date span {
        margin-left: 1vw;
    }
    .news-advertisements .nav-pills .nav-link {
        margin-right: 0.5vw;
    }
    .college.tabular-view .nav li a.nav-link::before {
        height: 1.6vw !important;
        width: 1.5vw !important;
        margin-left: 0.7vw !important;
    }

    college.tabular-view .nav li:first-child a.nav-link::before {
        height: 1.6vw;
        width: 1.5vw;
        margin-left: 0.7vw;
    }

    .hamburger-submenu {
        width: 26.2vw;
    }
    .college .affliated-members .search-btn {
        padding: 0 2vw;
        font-size: 1vw;
    }
    .node_member .member-name-container .member-name {
        font-size: .9vw;
    }
    .agency .be-in-contact a {
        margin-right: .5vw;
    }

    .college .affliated-members .search-affliated-btn svg {
        margin-right: .5vw;
        height: 1.1vw;
        width: 1.1vw;
    }

    .departments .card .card-img-overlay .card-title,
    .f-services .card .card-img-overlay .card-title {
        padding: 1vw 2vw;
    }

    .departments .card .card-img-overlay .card-title span,
    .f-services .card .card-img-overlay .card-title span {
        margin-left: 0.5vw;
        font-size: 1vw;
    }

    .departments .cards-section .card .logo,
    .f-services .cards-section .card .logo {
        height: 4vw;
        width: 4vw;
    }

    .contact-zone.container {
        padding-top: 3vw;
        padding-bottom: 3vw;
    }

    .org-chart.container {
        padding-top: 1vw;
        padding-bottom: 1vw;
    }

    .advisors.container {
        padding-bottom: 2vw;
    }

    .profile .swiper-button-prev,
    .profile .swiper-button-next {
        top: 1vw;
    }

    .agent-profile .nav-tabs li a.active::after {
        top: 2.78vw;
    }

    .agent-profile.profile ul#scroller {
        padding-left: 2vw;
        padding-right: 4vw;
    }

    .main-menu-container .main-menu {
        width: 32vw;
    }

    .acc-modal .modal-body .txt-size .increase,
    .acc-modal .modal-body .txt-size .decrease,
    .acc-modal .modal-body .imm-reader .reader .btn-reader {
        height: 1.7vw;
        width: 1.7vw;
        padding: 0.3vw;
    }

    .form-container form .uploader-info label.authorized-files {
        margin-bottom: 1vw;
        margin-top: 1vw;
    }

    .footer .footer-contents .newsletter .newsletter-btn,
    .form-container form button {
        padding: 0.5vw 3vw;
        margin-top: 1.7vw;
    }

    .form-container form input {
        margin-left: 1vw;
        margin-bottom: 1vw;
        padding: 0.7vw;
    }

    .checkboxes {
        margin-bottom: 1vw;
    }

    .international-students .pattern {
        position: absolute;
        top: 1vw;
        left: 2vw;
    }
    .data-tiles .col-lg-3 .pattern,
    .about-swiper .pattern,
    .goals-container .pattern,
    .volunteering .volunteer-tiles .col-lg-6 .card .pattern,
    .deanship-agencies .agencies-tiles .col-lg-6 .card .pattern,
    .contact-zone .col-lg-6 .card .pattern {
        position: absolute;
        top: .7vw;
        left: 1.25vw;
        width: 5vw;
        height: 5vw;
    }

    .data-tiles .col-lg-3 .pattern,
    .about-swiper .pattern,
    .goals-container .pattern,
    .volunteering .volunteer-tiles .col-lg-6 .card .pattern,
    .deanship-agencies .agencies-tiles .col-lg-6 .card .pattern,
    .contact-zone .col-lg-6 .card .pattern {
        left: 1vw;
    }
    .care-tiles .card .pattern {
        top: 1.25vw;
        left: 1.25vw;
    }
    .profile-section .image-container {
        width: 15rem !important;
    }
    .details-panel .labels .label {
        padding: .7vw 2vw;
        font-size: 1vw;
    }
    .details-panel .tabs .card .card-text {
        font-size: 1vw;
    }

    .details-panel .tabs .card .card-title {
        font-size: 1.2vw;
    }
    .accordions .accordion-body img {
        margin-right: .5vw;
    }
    .accordions .accordion-body .card-text span {
        font-size: 1vw;
    }
    p.contact-mail.container {
        font-size: 1.3vw;
        margin: 1.3vw 0;
    }

    .goals .column:nth-child(4n+1),
    .goals .column:nth-child(4n+4) {
        padding: 0;
    }

    .tabular-view .submit-buttons .reset .icon {
        margin: 0 0.5vw;
    }
    .form-check-input {
        margin-top: .3vw;
        margin-left: -1.25vw
    }
    .tabular-view .case-description .extent-of-influence {
        margin-bottom: 3vw;
    }
    .tabular-view .description {
        font-size: 1vw;
    }

    .tabular-view .nav-link .icon {
        height: 2vw;
        width: 2vw;
        margin-left: .5vw;
    }

    .reports .report {
        margin-bottom: 4vw;
    }
    .contact-collapse .contact-infos .icon:first-child {
        margin: 0 .5vw;
    }

    .contact-collapse .contact-infos .icon {
        height: 2.5vw;
        width: 2.5vw;
    }

    .accordion-container .contact-collapse .informations .subtitle {
        margin-bottom: 1vw;
    }

    .branches .card .card-body .card-text {
        margin-bottom: 1vw;
    }

    .branches .card-footer .icon {
        height: 2.5vw;
        width: 2.5vw;
        margin: 0 0.4vw;
    }

    .branches .card .card-body .location {
        font-size: .9vw;
    }

    branches .card .card-body .card-text {
        margin-bottom: 1vw;
        font-size: 1vw;
    }

    .branches .card .card-body .card-title {
        margin-bottom: 4vw;
    }

    .branches .card .pattern {
        left: 1vw;
        top: 1vw;
        height: 5vw;
        width: 5vw;
    }

    .contact-us .branches-otherservices .otherservices .card,
    .contact-us .branches-otherservices .branches .card {
        margin-bottom: 2vw;
    }

    .contact-us .map-container .zoom-controls {
        right: 6vw;
    }

    .map-container .gotomap {
        left: 5vw;
    }

    .contact-us .contact-infos .phone img,
    .contact-us .contact-infos .email img,
    .contact-us .contact-infos .fax img {
        margin-left: 1vw;
        height: 1.5vw;
    }

    .contact-us .contact-infos .phone,
    .contact-us .contact-infos .email,
    .contact-us .contact-infos .fax {
        padding: 1vw 3vw;
    }

    .contact-us .services .service a.start {
        margin-top: 2vw;
    }

    .faqs .faqs-search input {
        padding: 2vw 1vw;
        font-size: 1vw;
    }
    .details-panel .list ul li::before {
        top: .8vw;
        right: -1vw;
        height: .8vw;
        width: .8vw;
    }

    .details-panel .list ul li {
        padding: 0 2vw;
    }
    #sidePanelListTitle {
        padding-right: 1vw;
    }

    .details-panel img {
        max-height: 20vw;
    }

    .details-panel .close {
        top: 2.3vw;
    }
    .functional-competitions.container {
        padding-bottom: 6vw;
    }

    .competitions .card-img-overlay {
        font-size: 1.3vw;
    }
    .life-jeddah .card .icon {
        width: 1.4vw;
        height: 1.4vw;
    }

    .life-jeddah .tiles-container .card .card-img-overlay .card-title {
        font-size: 1.1vw;
    }

    .life-jeddah .card,
    .life-jeddah .col-lg-3 .card .card-img-top img,
    .life-jeddah .col-lg-3 .card .card-img-top {
        height: 27vw;
    }

    .pattern-image a img {
        height: 1.5vw;
        width: 1.5vw;
        margin-left: 0.5vw;
    }

    .pattern-image {
        padding: 3vw 0;
    }

    .pattern-image .row {
        margin: auto auto 4vw;
    }

    .pattern-image .row.one {
        width: 48vw;
    }

    .pattern-image .row.two,
    .pattern-image .row.six {
        width: 75vw;
    }

    .pattern-image .row.three {
        width: 82vw;
    }

    .pattern-image .row.four {
        width: 91vw;
    }

    .pattern-image .row.five {
        width: 82vw;
    }

    .story.container {
        padding-top: 4vw;
        padding-bottom: 4vw;
    }
    .about-swiper .swiper-wrapper .swiper-slide .card {
        height: 9vw;
        margin-bottom: 2vw;
    }

    .news-advertisements .news-item .card-img-overlay .date .month-year,
    .all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .date .month-year {
        font-size: 1.2vw;
        margin-top: -.5vw;
    }

    .news-advertisements .news-item .card-img-overlay .day,
    .all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .day {
        font-size: 3.5vw;
    }

    .contents .txt span {
        font-size: 2.5vw;
    }

    .uni-values {
        font-size: 2vw;
    }
    .goals .column {
        padding: 0 2vw 0 0;
    }

    .goals .card ul li::before {
        height: 0.6vw;
        width: 0.6vw;
    }

    .content-viewer-alt-dark .story .image-container {
        margin-top: 0;
    }

    .story .image-container {
        max-height: 25vw;
    }

    .opportunities.availablevacancies .card {
        height: 23vw;
    }

    .opportunities .swiper-slide .card .date svg {
        width: 1vw;
        margin-left: 0.5vw;
    }

    .enrollment.swiper .swiper-slide .title {
        font-size: 3vw;
    }

    .container.description.fade-left h6 {
        font-size: 1vw;
    }

    .section-title.aos-init.aos-animate {
        font-size: 4vw;
        margin-bottom: 3vw;
    }

    .season-container .season-body .information {
        margin-top: 2vw;
    }

    .season-container .season-body .header .certificate {
        margin: 0 1vw;
    }

    .accordion ul li .date .from svg,
    .accordion ul li .date .to svg {
        height: 1vw;
        width: 1vw;
        margin: 0px 0.6vw;
    }

    .accordion .season-header .title {
        font-size: 2vw;
    }

    .footer .footer-contents .mobile-apps .stores {
        margin-top: 1vw;
    }

    .mobile-apps .social-icons {
        margin-top: 2vw;
        padding-top: 2vw;
    }

    .mobile-apps .social-icons div:first-child {
        font-size: 1vw;
    }

    .international-students .pattern img {
        width: 5vw;
        height: 4vw;
    }

    .shortcuts .open-data .desc,
    .shortcuts .map .desc,
    .shortcuts .accessibility-services .desc {
        font-size: 1.1vw;
    }

    .shortcuts .open-data .icon,
    .shortcuts .map .icon,
    .shortcuts .accessibility-services .icon {
        margin-bottom: 0.5vw;
    }

    .shortcuts .open-data .icon svg,
    .shortcuts .map .icon svg,
    .shortcuts .accessibility-services .icon svg {
        width: 6.5vw;
    }

    .step .date {
        border-radius: 2vw;
    }

    .step:nth-child(5n+3) .start-date .from,
    .step:nth-child(5n+3) .start-date .date,
    .step:nth-child(5n+3) .end-date .to,
    .step:nth-child(5n+3) .end-date .date {
        padding: .5vw 1vw;
    }

    .step .header .num {
        font-size: 3.5vw;
    }

    .step .header .title {
        font-size: 1.2vw;
    }

    .steps {
        height: 50vw;
    }

    .step .instruction span {
        font-size: 1vw;
    }

    .step:nth-child(even) .instruction {
        bottom: 10vw;
    }
    .uoj-breadcrumb .icon {
        width: 0.4vw;
        margin: 0 0.5vw;
    }

    .search svg,
    .accessibility svg,
    .menu svg {
        height: 1.7vw;
    }
    .registration-footer .stamp-img {
        width: 12vw;
    }
    .container {
        padding-left: 5vw;
        padding-right: 5vw;
    }
    .deco-prev,
    .deco-next {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 3rem;
        background-color: #f9fafb;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    .deco-prev .swiper-button-prev,
    .deco-next .swiper-button-next {
        position: relative;
        top: 0;
    }

    .deco-prev {
        right: 0;
    }

    .deco-next {
        left: 0;
    }

    .news-advertisements .news-item .card-img-overlay .date,
    .all-news .swiper-wrapper .swiper-slide .card .card-img-overlay .date {
        font-size: 2.5vw;
    }

    .tab-links li {
        font-size: 1.1vw;
    }

    .news-advertisements .section-toggle a,
    .acheivements .section-toggle a {
        margin: 0 0.5vw;
    }

    .focus-area .focus-body .links .link-holder .icon {
        width: 2vw;
        height: 2vw;
    }

    .focus-area .focus-body .links .link-holder .link {
        font-size: 1.6vw;
    }

    .focus-area .focus-body .links .link-holder {
        padding: 3vw 3vw 3.1vw 6vw;
    }
    .scroll.topnav .options .accessibility,
    .scroll.topnav .options .search,
    .scroll.topnav .options select {
        padding: 0px 0.8vw;
        width: 3vw;
    }

    .topnav.scroll .electronic-button {
        padding: 0.5vw 1.2vw;
        border-radius: 1vw;
        font-size: 0.95vw;
    }

    .uoj-electronic .desc {
        font-size: 1vw;
    }

    .uoj-electronic img {
        width: 8vw;
    }

    .topnav .options .accessibility,
    .topnav .options .search,
    .topnav .options .menu,
    .topnav .options select {
        padding: 0px 0.8vw;
        width: 2.8vw;
    }

    .logo-container div svg,
    .topnav .logo-container div img {
        width: 4vw;
        height: 4vw;
    }

    .uoj-electronic {
        top: 12vw;
        left: 11vw;
    }

    .beta-ribbon,
    .sub .beta-ribbon,
    body.toolbar-horizontal .beta-ribbon {
        width: 10.5vw;
        font-size: .9vw;
        top: 1.4vw;
        left: -2.8vw;
        background-size: 200%;
        background-position-x: 49%;
        transform: rotate(-45deg);
    }

    .leaflet-top {
        bottom: 1rem;
    }

    #map {
        height: calc(100vh - 6.7rem);
    }

    .right-section {
        top: -1.4rem;
    }

    .leaflet-popup-tip-container {
        left: -0.5rem !important;
        bottom: 154px !important;
    }
}