:root{
    --border-brand: #D6BBFB;
    --border-primary: #D0D5DD;
    --text-placeholder: #667085;
    --text-secondary-700: #344054;
    --brand-solid: #7F56D9;
    --teriary-color-fg: #6941C6;
    --teriary-color-fg-hover: #53389E;
    --secondary-border: #D0D5DD;
    --secondary-bg-hover: #F9FAFB;
    --text-teriary: #475467;

    --colors-base-black: #000000;
    --colors-base-transparent: #ffffff00;
    --colors-base-white: #ffffff;
    --colors-blue-100: #d1e9ff;
    --colors-blue-200: #b2ddff;
    --colors-blue-25: #f5faff;
    --colors-blue-300: #84caff;
    --colors-blue-400: #53b1fd;
    --colors-blue-50: #eff8ff;
    --colors-blue-500: #2e90fa;
    --colors-blue-600: #1570ef;
    --colors-blue-700: #175cd3;
    --colors-blue-800: #1849a9;
    --colors-blue-900: #194185;
    --colors-blue-950: #102a56;
    --colors-blue-dark-100: #d1e0ff;
    --colors-blue-dark-200: #b2ccff;
    --colors-blue-dark-25: #f5f8ff;
    --colors-blue-dark-300: #84adff;
    --colors-blue-dark-400: #528bff;
    --colors-blue-dark-50: #eff4ff;
    --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-blue-light-100: #e0f2fe;
    --colors-blue-light-200: #b9e6fe;
    --colors-blue-light-25: #f5fbff;
    --colors-blue-light-300: #7cd4fd;
    --colors-blue-light-400: #36bffa;
    --colors-blue-light-50: #f0f9ff;
    --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-brand-100: #f4ebff;
    --colors-brand-200: #e9d7fe;
    --colors-brand-25: #fcfaff;
    --colors-brand-300: #d6bbfb;
    --colors-brand-400: #b692f6;
    --colors-brand-50: #f9f5ff;
    --colors-brand-500: #9e77ed;
    --colors-brand-600: #7f56d9;
    --colors-brand-700: #6941c6;
    --colors-brand-800: #53389e;
    --colors-brand-900: #42307d;
    --colors-brand-950: #2c1c5f;
    --colors-cyan-100: #cff9fe;
    --colors-cyan-200: #a5f0fc;
    --colors-cyan-25: #f5feff;
    --colors-cyan-300: #67e3f9;
    --colors-cyan-400: #22ccee;
    --colors-cyan-50: #ecfdff;
    --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-error-100: #fee4e2;
    --colors-error-200: #fecdca;
    --colors-error-25: #fffbfa;
    --colors-error-300: #fda29b;
    --colors-error-400: #f97066;
    --colors-error-50: #fef3f2;
    --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-fuchsia-100: #fbe8ff;
    --colors-fuchsia-200: #f6d0fe;
    --colors-fuchsia-25: #fefaff;
    --colors-fuchsia-300: #eeaafd;
    --colors-fuchsia-400: #e478fa;
    --colors-fuchsia-50: #fdf4ff;
    --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-gray-dark-mode-alpha-100: #fffffff0;
    --colors-gray-dark-mode-alpha-200: #ffffffeb;
    --colors-gray-dark-mode-alpha-25: #fffffffa;
    --colors-gray-dark-mode-alpha-300: #ffffffcc;
    --colors-gray-dark-mode-alpha-400: #ffffff8f;
    --colors-gray-dark-mode-alpha-50: #fffffff5;
    --colors-gray-dark-mode-alpha-500: #ffffff80;
    --colors-gray-dark-mode-alpha-600: #ffffff59;
    --colors-gray-dark-mode-alpha-700: #ffffff29;
    --colors-gray-dark-mode-alpha-800: #ffffff14;
    --colors-gray-dark-mode-alpha-900: #ffffff0a;
    --colors-gray-dark-mode-alpha-950: #ffffff00;
    --colors-gray-dark-mode-100: #f0f1f1;
    --colors-gray-dark-mode-200: #ececed;
    --colors-gray-dark-mode-25: #fafafa;
    --colors-gray-dark-mode-300: #cecfd2;
    --colors-gray-dark-mode-400: #94969c;
    --colors-gray-dark-mode-50: #f5f5f6;
    --colors-gray-dark-mode-500: #85888e;
    --colors-gray-dark-mode-600: #61646c;
    --colors-gray-dark-mode-700: #333741;
    --colors-gray-dark-mode-800: #1f242f;
    --colors-gray-dark-mode-900: #161b26;
    --colors-gray-dark-mode-950: #0c111d;
    --colors-gray-light-mode-100: #f2f4f7;
    --colors-gray-light-mode-200: #eaecf0;
    --colors-gray-light-mode-25: #fcfcfd;
    --colors-gray-light-mode-300: #d0d5dd;
    --colors-gray-light-mode-400: #98a2b3;
    --colors-gray-light-mode-50: #f9fafb;
    --colors-gray-light-mode-500: #667085;
    --colors-gray-light-mode-600: #475467;
    --colors-gray-light-mode-700: #344054;
    --colors-gray-light-mode-800: #182230;
    --colors-gray-light-mode-900: #101828;
    --colors-gray-light-mode-950: #0c111d;
    --colors-gray-blue-100: #eaecf5;
    --colors-gray-blue-200: #d5d9eb;
    --colors-gray-blue-25: #fcfcfd;
    --colors-gray-blue-300: #b3b8db;
    --colors-gray-blue-400: #717bbc;
    --colors-gray-blue-50: #f8f9fc;
    --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-100: #eff1f5;
    --colors-gray-cool-200: #dcdfea;
    --colors-gray-cool-25: #fcfcfd;
    --colors-gray-cool-300: #b9c0d4;
    --colors-gray-cool-400: #7d89b0;
    --colors-gray-cool-50: #f9f9fb;
    --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-iron-100: #f4f4f5;
    --colors-gray-iron-200: #e4e4e7;
    --colors-gray-iron-25: #fcfcfc;
    --colors-gray-iron-300: #d1d1d6;
    --colors-gray-iron-400: #a0a0ab;
    --colors-gray-iron-50: #fafafa;
    --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-modern-100: #eef2f6;
    --colors-gray-modern-200: #e3e8ef;
    --colors-gray-modern-25: #fcfcfd;
    --colors-gray-modern-300: #cdd5df;
    --colors-gray-modern-400: #9aa4b2;
    --colors-gray-modern-50: #f8fafc;
    --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-100: #f3f4f6;
    --colors-gray-neutral-200: #e5e7eb;
    --colors-gray-neutral-25: #fcfcfd;
    --colors-gray-neutral-300: #d2d6db;
    --colors-gray-neutral-400: #9da4ae;
    --colors-gray-neutral-50: #f9fafb;
    --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-true-100: #f5f5f5;
    --colors-gray-true-200: #e5e5e5;
    --colors-gray-true-25: #fcfcfc;
    --colors-gray-true-300: #d6d6d6;
    --colors-gray-true-400: #a3a3a3;
    --colors-gray-true-50: #fafafa;
    --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-100: #f5f5f4;
    --colors-gray-warm-200: #e7e5e4;
    --colors-gray-warm-25: #fdfdfc;
    --colors-gray-warm-300: #d7d3d0;
    --colors-gray-warm-400: #a9a29d;
    --colors-gray-warm-50: #fafaf9;
    --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-green-100: #d3f8df;
    --colors-green-200: #aaf0c4;
    --colors-green-25: #f6fef9;
    --colors-green-300: #73e2a3;
    --colors-green-400: #3ccb7f;
    --colors-green-50: #edfcf2;
    --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-green-light-100: #e3fbcc;
    --colors-green-light-200: #d0f8ab;
    --colors-green-light-25: #fafef5;
    --colors-green-light-300: #a6ef67;
    --colors-green-light-400: #85e13a;
    --colors-green-light-50: #f3fee7;
    --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-indigo-100: #e0eaff;
    --colors-indigo-200: #c7d7fe;
    --colors-indigo-25: #f5f8ff;
    --colors-indigo-300: #a4bcfd;
    --colors-indigo-400: #8098f9;
    --colors-indigo-50: #eef4ff;
    --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-moss-100: #e6f4d7;
    --colors-moss-200: #ceeab0;
    --colors-moss-25: #fafdf7;
    --colors-moss-300: #acdc79;
    --colors-moss-400: #86cb3c;
    --colors-moss-50: #f5fbee;
    --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-orange-100: #fdead7;
    --colors-orange-200: #f9dbaf;
    --colors-orange-25: #fefaf5;
    --colors-orange-300: #f7b27a;
    --colors-orange-400: #f38744;
    --colors-orange-50: #fef6ee;
    --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-orange-dark-100: #ffe6d5;
    --colors-orange-dark-200: #ffd6ae;
    --colors-orange-dark-25: #fff9f5;
    --colors-orange-dark-300: #ff9c66;
    --colors-orange-dark-400: #ff692e;
    --colors-orange-dark-50: #fff4ed;
    --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-pink-100: #fce7f6;
    --colors-pink-200: #fcceee;
    --colors-pink-25: #fef6fb;
    --colors-pink-300: #faa7e0;
    --colors-pink-400: #f670c7;
    --colors-pink-50: #fdf2fa;
    --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-purple-100: #ebe9fe;
    --colors-purple-200: #d9d6fe;
    --colors-purple-25: #fafaff;
    --colors-purple-300: #bdb4fe;
    --colors-purple-400: #9b8afb;
    --colors-purple-50: #f4f3ff;
    --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-rosé-100: #ffe4e8;
    --colors-rosé-200: #fecdd6;
    --colors-rosé-25: #fff5f6;
    --colors-rosé-300: #fea3b4;
    --colors-rosé-400: #fd6f8e;
    --colors-rosé-50: #fff1f3;
    --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-success-100: #dcfae6;
    --colors-success-200: #abefc6;
    --colors-success-25: #f6fef9;
    --colors-success-300: #75e0a7;
    --colors-success-400: #47cd89;
    --colors-success-50: #ecfdf3;
    --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-teal-100: #ccfbef;
    --colors-teal-200: #99f6e0;
    --colors-teal-25: #f6fefc;
    --colors-teal-300: #5fe9d0;
    --colors-teal-400: #2ed3b7;
    --colors-teal-50: #f0fdf9;
    --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-violet-100: #ece9fe;
    --colors-violet-200: #ddd6fe;
    --colors-violet-25: #fbfaff;
    --colors-violet-300: #c3b5fd;
    --colors-violet-400: #a48afb;
    --colors-violet-50: #f5f3ff;
    --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-warning-100: #fef0c7;
    --colors-warning-200: #fedf89;
    --colors-warning-25: #fffcf5;
    --colors-warning-300: #fec84b;
    --colors-warning-400: #fdb022;
    --colors-warning-50: #fffaeb;
    --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-yellow-100: #fef7c3;
    --colors-yellow-200: #feee95;
    --colors-yellow-25: #fefdf0;
    --colors-yellow-300: #fde272;
    --colors-yellow-400: #fac515;
    --colors-yellow-50: #fefbe8;
    --colors-yellow-500: #eaaa08;
    --colors-yellow-600: #ca8504;
    --colors-yellow-700: #a15c07;
    --colors-yellow-800: #854a0e;
    --colors-yellow-900: #713b12;
    --colors-yellow-950: #542c0d;
    --Component-colors-Utility-Gray-utility-gray-50: #F9FAFB;

    /* override bootstrap */
    --bs-body-color: #101828 !important;

    --radius-sm: 0.375rem;

    --dodl-primary: #7F56D9;
}

body{
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    overflow-x: hidden;
}

.css-delete-arrows::-webkit-outer-spin-button,
.css-delete-arrows::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.colors-brand-700 {
    color: var(--colors-brand-700);
}

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

.fit-content{
    width: fit-content;
}

/* For WebKit browsers (e.g., Chrome, Safari) */
.scrollbar::-webkit-scrollbar {
  width: 6px;
    height: 6px;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #D0D5DD; /* Color of the thumb */
  border-radius: 6px; /* Roundness of the thumb */
}

.scrollbar::-webkit-scrollbar-track {
  background-color: white; /* Color of the track */
}

/* For Firefox */
.scrollbar-scrollbar-thumb {
  background-color: #D0D5DD; /* Color of the thumb */
  border-radius: 6px; /* Roundness of the thumb */
}

.scrollbar-scrollbar-track {
  background-color: white; /* Color of the track */
}

/* Apply scrollbar colors to Firefox */
.scrollbar {
  scrollbar-color: #D0D5DD;
  /* overflow: scroll; */
}

.scrollbar-timeframe::-webkit-scrollbar-thumb{
    border-radius: var(--radius-md, 0.5rem);

    /* background: var(--component-colors-utility-gray-utility-gray-400, #EAECF0); */
}

.scrollbar-timeframe::-webkit-scrollbar{
    height: 16px;
    border-radius: var(--radius-md, 0.5rem);
}

.scrollbar-timeframe::-webkit-scrollbar-track {
    /* full width */
    box-shadow: inset 0 0 10px 10px #EAECF0;
    /* border: solid 3px transparent; */
}

.scrollbar-timeframe::-webkit-scrollbar-thumb {
    /* inside */
    border-radius: var(--radius-md, 0.5rem);
    box-shadow: inset 0 0 10px 10px #98A2B3;
    border: solid 4px #EAECF0;
    /* border-left: 16px solid #EAECF0;
    border-right: 16px solid #EAECF0; */
}





.border-utility-gray-300{
    border-color: #D0D5DD;
}

.text-secondary-700{
    color: var(--text-secondary-700);
}

.text-quarterary-500{
    color: #667085;
}

.text-tertiary-600{
    color: #475467;
}

.grid{
    display: grid;
    grid-template-rows: repeat(var(--bs-rows, 1), 1fr);
    grid-template-columns: repeat(var(--bs-columns, 12), 1fr);
    /* gap: var(--bs-gap, 1.5rem); */
}

.grid .g-col-6 {
    grid-column: auto/span 6;
}

.grid .g-col-4 {
    grid-column: auto/span 4;
}

.grid .g-col-3 {
    grid-column: auto/span 3;
}

/* start spacing */


/* end spacing */

/* START Fonts */

.text-2xl{
    font-size: 4.5rem;
    line-height: 5.625rem;
    letter-spacing: -0.09rem;
}

.text-xl{
    font-size: 3.75rem;
    line-height: 4.5rem;
    letter-spacing: -0.075rem;
}

.text-lg{
    font-size: 3rem;
    line-height: 3.75rem;
    letter-spacing: -0.06rem;
}

.text-md{
    font-size: 2.25rem;
    line-height: 2.75rem;
    letter-spacing: -0.045rem;
}

.text-sm{
    font-size: 1.875rem;
    line-height: 2.375rem;
}

.text-xs{
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-xxl{
    font-size: 1.375rem;
    line-height: 1.875rem;
}

.text-sxl{
    font-size: 1.25rem;
    line-height: 1.875rem;
}

.text-slg{
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-smd{
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-ssm{
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-sxs{
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.text-sxxs{
    font-size: 0.625rem;
    line-height: 1.125rem;
}

.display-md{
    font-family: Lato;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.375rem;
    text-decoration-line: underline;
}

.ff-lato{
    font-family: Lato;
}

/* END Fonts */

/* START FONT WEIGHT */
.font-normal{
    font-weight: 400;
}

.font-medium{
    font-weight: 500;
}

.font-semibold{
    font-weight: 600;
}

.font-bold{
    font-weight: 700;
}

.fw-heavy{
    font-weight: 800;
}
/* END FONT WEIGHT */


/* START SOME CLASSES */
.h-20px{
    height: 20px;
}

.w-20px{
    width: 20px;
}

.h-24px{
    height: 24px;
}

.h-32px{
    height: 32px;
}


.h-48px{
    height: 48px;
}

.h-158px{
    height: 158px;
}

.h-126px{
    height: 126px;
}

.w-32px{
    width: 32px;
}

.w-24px{
    width: 24px;
}

.w-28px{
    width: 28px;
}

.h-28px{
    height: 28px;
}

.w-48px{
    width: 48px;
}

.w-16px{
    width: 16px;
}

.h-16px{
    height: 16px;
}

.w-42px{
    width: 42px;
}

.max-w-45px{
    max-width: 45px;
}

.max-w-50px{
    max-width: 50px;
}

.h-42px{
    height: 42px;
}

.w-164px{
    width: 164px;
}

.max-w-280px{
    max-width: 280px;
}

.w-72px{
    width: 72px;
}

.max-w-480px{
    max-width: 480px;
}

.mb-6px{
    margin-bottom: 6px;
}

.mb-12px{
    margin-bottom: 0.75rem;
}

.mb-32px{
    margin-bottom: 2rem;
}

.p-16px{
    padding: 16px;
}

.pt-12px{
    padding-top: 12px;
}

.px-2px{
    padding-left: 2px;
    padding-right: 2px;
}

.px-24px{
    padding-left: 24px;
    padding-right: 24px;
}

.pb-13px{
    padding-bottom: 13px;
}

.pb-24px{
    padding-bottom: 24px;
}

.top-20px{
    top: 20px;
}

.top-6px{
    top: 6px;
}

.right-6px{
    right: 6px;
}

.bottom-20px{
    bottom: 20px;
}

.start-20px{
    left: 20px;
}

.end-20px{
    right: 20px;
}

.p-12px{
    padding: 12px;
}

.gap-2px{
    gap: 2px;
}

.gap-4px{
    gap: 0.25rem;
}

.gap-6px{
    gap: 6px;
}

.gap-8px{
    gap: 8px;
}

.gap-20px{
    gap: 1.25rem;
}

.gap-24px{
    gap: 1.5rem;
}

.gap-16px{
    gap: 1rem;
}

.gap-12px{
    gap: 0.75rem;
}

.mr-32px{
    margin-right: 2rem;
}

.mr-14px{
    margin-right: 0.875rem;
}

.mt-48px{
    margin-top: 3rem;
}

.mt-24px{
    margin-top: 1.5rem;
}

.ml-auto{
    margin-left: auto;
}

.ml-14px{
    margin-left: 14px;
}

.pl-42px{
    padding-left: 42px !important;
}

.p-14px{
    padding: 14px !important;
}

.p-20px{
    padding: 20px;
}

.py-20px{
    padding-top: 20px;
    padding-bottom: 20px;
}

.py-6px{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.py-7px{
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

.px-12px{
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.px-11px{
    padding-left: 11px !important;
    padding-right: 11px !important;
}

.px-9px{
    padding-left: 9px !important;
    padding-right: 9px !important;
}

.px-6px{
    padding-left: 6px !important;
    padding-right: 6px !important;
}


.p-6px{
    padding: 6px;
}

.min-w-166px{
    min-width: 166px;
}

.max-w-320px{
    max-width: 320px;
}

.max-w-900px{
    max-width: 900px;
}

.text-primary-900{
    color: #101828;
}

p{
    margin-bottom: 0;
}

.bottom-6px{
    bottom: 6px;
}

.left-6px{
    left: 6px;
}

.text-teriary{
    color: var(--text-teriary);
}

.text-utility-gray-700{
    color: var(--component-colors-utility-gray-utility-gray-700, #344054);
}

.divider{
    background-color: #EAECF0;
    border-color: #EAECF0;
    opacity: 1;
}

.separator{
    background-color: #475467;
    border-radius: 100px;
    width: 0.3125rem;
    height: 0.3125rem;
}
.truncate{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-content{
    border-radius: var(--radius-xl, 0.75rem);
    background: var(--colors-background-bg-primary, #FFF);
    box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
}

.modal-footer{
    padding: 2rem 1.5rem 1.5rem 1.5rem;
}

.modal-ai-wizard__input-box{
    border-top: 1px solid var(--component-colors-utility-gray-utility-gray-300, #D0D5DD);
    border-bottom: 1px solid var(--component-colors-utility-gray-utility-gray-300, #D0D5DD);
    background: var(--component-colors-utility-gray-utility-gray-100, #F2F4F7);
}

.bg-gray-light-mode-100{
    background: var(--colors-gray-light-mode-100) !important;
}

/* .btn.focus,
.btn:focus,
.btn:active,
.btn:visited,
.input,
.input:focus,
div,
div:focus,
span,
span:focus,
textarea,
textarea:focus,
.form-control:focus,
.form-control,
.form-control:active{
    outline: none;
    box-shadow: none;
    border: none;
} */

/* END SOME CLASSES */


/* START FORMS */
.page-link{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: var(--spacing-md, 0.5rem);
    border-radius: var(--spacing-md, 0.5rem);
}

a.page-link:hover,
a.page-link.active{
    background: var(--colors-background-bg-primary-hover, #EAECF0);
}

textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
    border: 1px solid var(--border-brand);
    box-shadow: 0px 0px 0px 4px rgba(158, 119, 237, 0.24), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.cursor-pointer{
    cursor: pointer;
}

input.form-control{
    padding: 10px 14px;
    text-overflow: ellipsis;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border-radius: 0.5rem;
    border: 1px solid var(--border-primary);
}

.form-group .form-group__label{
    margin-bottom: 6px;
    color: var(--text-secondary-700);
}

.form-radio-item{
    transition: all 0.25s linear;
    gap: 12px;
    margin: 0;
    display: flex;
    padding: var(--spacing-xl, 1rem);
    align-items: flex-start;
    align-self: stretch;

    border-radius: var(--radius-xl, 0.75rem);
    border: 1px solid var(--component-colors-utility-gray-utility-gray-300, #D0D5DD);
    outline: 1px solid transparent;
    background: var(--colors-background-bg-primary, #FFF);
}

.form-radio-item.active {
    border: 1px solid var(--colors-border-border-brand-solid, #7F56D9);
    outline: 1px solid var(--colors-border-border-brand-solid, #7F56D9);
}


.form-radio-item__input{
    width: 22px;
    height: 22px;
    margin: 0 !important;
}

.form-radio-item__label{
    display: flex;
    align-items: center;
    line-height: 22px;
}

.form-check-input, .form-control{
    transition: all 0.25s linear;
}

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

.form-check-input:focus{
    border-color: var(--brand-solid);
    box-shadow: 0px 0px 0px 4px rgba(158, 119, 237, 0.24);
}

.form-check-label{
    color: var(--text-secondary-700);
}

input.form-control::placeholder{
    color: var(--text-placeholder);
}
/* END FORMS */

/* START BUTTON */
.link.link-ghost,
.link.link-ghost:focus{
    transition: all 0.25s linear;
    color: var(--brand-solid);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
}

.link.link-ghost:hover{
    color: var(--teriary-color-fg-hover);
}

.list-avatar{
    padding: var(--spacing-lg, 0.75rem) var(--spacing-xl, 1rem);
    border-bottom: 1px solid var(--colors-border-border-secondary, #EAECF0);
}

.list-export{
    display: flex;
    padding: var(--spacing-xl, 1rem) var(--spacing-3xl, 1.5rem);
    justify-content: space-between;
    align-items: center;

    border-radius: var(--spacing-00-px, 0rem);
    border-top: 1px solid var(--component-colors-utility-gray-utility-gray-300, #D0D5DD);
    border-bottom: 1px solid var(--component-colors-utility-gray-utility-gray-300, #D0D5DD);
    background: var(--component-colors-utility-gray-utility-gray-50, #F9FAFB);
}

.list-export .list-export__title{
    color: var(--component-colors-utility-gray-utility-gray-800, #182230);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5rem;
}

.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    border-radius: 0.5rem;
}

.btn.disabled img{
    filter: invert(62%) sepia(29%) saturate(163%) hue-rotate(179deg) brightness(99%) contrast(87%);
}

.btn.disabled{
    color: var(--colors-foreground-fg-disabled, #98A2B3);
}

.btn.sm{
    padding: 0.5rem 0.75rem;
    line-height: 20px;
    font-size: 0.875rem;
    gap: 6px;
}

.btn.sm img{
    width: 16px;
    height: 16px;
}

.btn.md{
    padding: 0.625rem 0.875rem;
    line-height: 20px;
    font-size: 0.875rem;
    gap: 6px;
}

.btn.md img{
    width: 16px;
    height: 16px;
}

.btn.lg{
    padding: 0.625rem 1rem;
    line-height: 24px;
    gap: 8px;
}

.btn.lg img{
    width: 16px;
    height: 16px;
}

.btn.xl{
    padding: 0.75rem 1.125rem;
    line-height: 24px;
    gap: 8px;
}

.btn.xl img{
    width: 18px;
    height: 18px;
}

.btn.xl-2{
    padding: 1rem 1.375rem;
    line-height: 28px;
    gap: 12px;
}

.btn.xl-2 img{
    width: 24px;
    height: 24px;
}

.btn.sm-icon{
    padding: 0.5rem !important;
}

.btn.sm-icon img{
    width: 20px;
    height: 20px;
}

.btn{
    transition: all 0.25s linear;
}

.btn.btn-primary{
    background-color: var(--brand-solid);
    border-color: var(--brand-solid);
}

.btn.btn-primary:hover{
    background-color: var(--teriary-color-fg);
    border-color: var(--teriary-color-fg);
}

.btn.btn-primary:focus{
    box-shadow: 0px 0px 0px 4px rgba(158, 119, 237, 0.24), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    background-color: var(--teriary-color-fg);
    border-color: var(--teriary-color-fg);
}

.btn.btn-black{
    border: 1px solid var(--component-colors-utility-gray-utility-gray-900, #101828);
    background: var(--component-colors-utility-gray-utility-gray-900, #101828);
    color: #F9FAFB;
}

.btn.btn-black:hover{
    border: 1px solid var(--component-colors-utility-gray-utility-gray-700, #344054);
    background: var(--component-colors-utility-gray-utility-gray-700, #344054);
}

.btn.btn-black:focus{
    border: 1px solid var(--component-colors-utility-gray-utility-gray-900, #101828);
    background: var(--component-colors-utility-gray-utility-gray-900, #101828);
    color: #F9FAFB;
}

.btn-outline .icon-chevron-down{
    transition: all 0.25s linear;
}

.btn-outline.show .icon-chevron-down{
    transform: rotate(180deg);
}

.icon-loading{
    animation-name: loading;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transform: rotate(360deg);
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.btn.btn-secondary{
    background-color: white;
    border-color: var(--secondary-border);
    color: var(--text-secondary-700);
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus{
    background-color: var(--secondary-bg-hover);
    border-color: var(--secondary-border);
    color: var(--text-secondary-700);
}

.btn.btn-secondary:focus,
.btn.btn-gradient:focus,
.btn.btn-black:focus,
.btn.btn-editor-gray:focus,
.btn.btn-teritary:focus{
    box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, 0.14), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.btn.btn-secondary,
.btn.btn-gradient,
.btn.btn-black,
.btn.btn-editor-gray,
.btn-teritary{
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.btn-webinar {
    position: relative;
    overflow: hidden;
  }

  .btn-webinar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transform: skewX(-25deg);
    filter: blur(2px);
    animation: mirrorShine 3s ease-in-out infinite;
  }

  @keyframes mirrorShine {
    0% {
      left: -75%;
    }
    100% {
      left: 125%;
    }
  }


  @keyframes pulsate {
    0%, 100% {
      transform: scale(0.5);
    }
    50% {
      transform: scale(1);
    }
  }

  .btn.btn-webinar svg {
    animation: pulsate 1.5s ease-in-out infinite;
  }

.btn.btn-gradient{
    color: #562A72;
    border: 1px solid var(--custom-gradients-button-primary-stroke, #AF60FF);
    background: var(--custom-gradients-button-primary-bg, linear-gradient(94deg, #FFFFF4 1.89%, #FFEAF5 100%));
    /* background: linear-gradient(white, white) padding-box,
    linear-gradient(to bottom, #FBC2EB, #A18CD1) border-box;
    border: 2px solid transparent; */
}

.btn.btn-gradient:hover{
    border: 1px solid var(--custom-gradients-button-primary-hover-stroke, #FF98CE);
    background: var(--custom-gradients-button-primary-hover-bg, linear-gradient(94deg, #FFEAF5 1.89%, #FFFDD7 100%));
}

.btn.btn-gradient:focus{
    border: 1px solid var(--custom-gradients-button-primary-stroke, #AF60FF);
    background: var(--custom-gradients-button-primary-bg, linear-gradient(94deg, #FFFFF4 1.89%, #FFEAF5 100%));
}

.btn.btn-editor-gray{
    border: 1px solid var(--component-colors-utility-gray-blue-utility-gray-blue-300, #B3B8DB);
    background: var(--component-colors-utility-gray-blue-utility-gray-blue-100, #EAECF5);
    color: var(--component-colors-utility-gray-utility-gray-800, #182230);

}

.btn.btn-editor-gray:hover,
.btn.btn-editor-gray:focus{
    border: 1px solid var(--component-colors-utility-gray-blue-utility-gray-blue-400, #717BBC);
    background: var(--component-colors-utility-gray-blue-utility-gray-blue-200, #D5D9EB);
    color: var(--component-colors-utility-gray-utility-gray-800, #182230);

}

.btn.btn-teritary{
    /* display: flex; */
    /* padding: var(--spacing-xs, 0.25rem) var(--spacing-md, 0.5rem); */
    /* justify-content: center; */
    /* align-items: center; */
    /* gap: var(--spacing-xs, 0.25rem); */
    /* border-radius: var(--radius-xs, 0.25rem); */
    background: var(--colors-purple-100, #EBE9FE);
    color: var(--component-colors-components-buttons-tertiary-color-button-tertiary-color-fg, #6941C6);
}

.btn.btn-teritary:hover{
    border: 1px solid transparent;
    background-color: transparent;
}

.btn.btn-teritary:focus{
    background: var(--colors-purple-100, #EBE9FE);
    border: 1px solid transparent;
}

.btn.btn-round.lg img{
    width: 18px;
    height: 18px;
}

.btn.btn-round.lg{
    padding: 13px !important;
    height: fit-content;
}

.btn.btn-round.md img{
    width: 20px;
    height: 20px;
}

.btn.btn-round.md {
    padding: 7px !important;
    height: fit-content;
}

.btn.btn-round.sm img{
    width: 15px;
    height: 15px;
}

.btn.btn-round.sm{
    padding: 7px !important;
    height: fit-content;
}

.btn.btn-round.btn-secondary{
    border-radius: 100%;
    border: 1px solid var(--component-colors-utility-gray-utility-gray-300, #D0D5DD);
    background: var(--colors-base-white, #FFF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.btn.btn-round.btn-secondary:hover{
    border-radius: 100%;
    border: 1px solid var(--component-colors-utility-gray-utility-gray-400, #98A2B3);
    background: var(--component-colors-utility-gray-utility-gray-200, #EAECF0);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

/* start tooltip */
.tooltip{
    background-color: #0C111D;
    border-radius: var(--radius-md, 0.5rem);
    color: var(--colors-text-text-white, #FFF);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.125rem;
}

.tooltip .tooltip-inner{
    background-color: #0C111D;
    padding: var(--spacing-md, 0.5rem) var(--spacing-lg, 0.75rem);
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before{
    border-top-color: #0C111D !important;
}

[data-bs-toggle="tooltip"]:focus{
    outline:none ;
}
/* end tooltip */


/* start input */
.textarea-custom{
    display: flex;
    /*width: 15.5rem;*/
    height: 9.6875rem;
    min-height: var(--spacing-32128-px, 8rem);
    padding: var(--spacing-lg, 0.75rem) 0.875rem 2.4375rem 0.875rem;
    align-items: flex-start;
    gap: var(--spacing-md, 0.5rem);
    resize: none;
    color: var(--colors-text-text-primary-900, #101828);

}

.textarea-custom--parent .textarea-custom--actions{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid var(--component-colors-utility-gray-utility-gray-300, #D0D5DD);
    /* background: var(--White, #FFF); */

    display: flex;
    padding: 0.375rem 0.75rem 0.3125rem 0.75rem;
    justify-content: space-between;
    align-items: center;
}

.textarea-custom--parent .textarea-custom--actions svg{
    cursor: pointer;
    width: 20px;
    height: 20px;
    fill: transparent;
    stroke: #98A2B3;
}

.textarea-custom--parent .textarea-custom--actions svg:hover,
.textarea-custom--parent .textarea-custom--actions svg.active{
    stroke: #344054;
}

.textarea-custom--parent .textarea-custom--actions .textarea-custom--actions__stroke{
    width: var(--spacing-520-px, 0.0625rem);
    height: var(--spacing-00-px, 1.25rem);
    background: #C5C5C5;
}
/* end input */


/* start setting */

.setting{
    display: flex;
    padding: var(--spacing-lg, 0.75rem) 0rem;

    justify-content: space-between;
    align-items: center;
}

.setting svg{
    fill: transparent;
    stroke: #98A2B3;
}





/* end setting */


.badge{
    display: inline-flex;
    padding: var(--spacing-xxs, 0.125rem) var(--spacing-md, 0.5rem);
    align-items: center;
    color: var(--component-colors-utility-gray-blue-utility-gray-blue-700, #363F72);
    text-align: center;
    border-radius: var(--radius-full, 624.9375rem);
}

.badge.gray-blue{
    border: 1px solid var(--component-colors-utility-gray-blue-utility-gray-blue-200, #D5D9EB);
    background: var(--component-colors-utility-gray-blue-utility-gray-blue-50, #F8F9FC);
}

.badge.purple{
    border: 1px solid var(--component-colors-utility-purple-utility-purple-200, #D9D6FE);
    background: var(--component-colors-utility-purple-utility-purple-50, #F4F3FF);
    color: #5925DC;
}

.badge.custom-black{
    border-radius: var(--radius-xs, 0.25rem);
    border: 1px solid var(--component-colors-utility-gray-utility-gray-600, #475467);
    background: var(--component-colors-utility-gray-utility-gray-700, #344054);
    padding: var(--spacing-xs, 0.25rem);
    color: var(--colors-base-white, #FFF);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 0.875rem;
}

/* END BUTTON */






.headline-dashboard{
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    color: #344054;
}

.headline-dashboard img{
    width: 24px;
    height: 24px;
}

.headline-section{
    color: var(--colors-text-text-secondary-700, #344054);
    font-family: Lato;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-decoration: none;
    /* border-bottom: 1px solid #D0D5DD; */
}

.headline-section span{
    position: absolute;
    left: 0;
    bottom: -6px;
    background: #D0D5DD;
    width: 100%;
    height: 1px;
}


/* start shadow */
.shadow-xs{
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
/* end shadow */


.online-round{
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full, 624.9375rem);
    border: 1.5px solid var(--colors-background-bg-primary, #FFF);
    background: var(--colors-foreground-fg-success-secondary, #17B26A);
}

.offline-round{
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full, 624.9375rem);
    border: 1.5px solid var(--colors-background-bg-primary, #FFF);
    background: var(--colors-text-text-error-primary-600, #D92D20);
}










/* START Login Page */
.login{
    /* background-image: ; */
    background-image: url("../images/login/login-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

.login .login-box{
    max-width: 360px;
}

/* END Login Page */

/* START Navbar */
.navbar{
    padding: 10px 2rem;
}

.nav-link{
    border-radius: var(--radius-sm, 0.375rem);
    background: var(--colors-background-bg-primary, #FFF);
    padding: var(--spacing-md, 0.5rem) var(--spacing-lg, 0.75rem);
    align-items: center;
    gap: var(--spacing-md, 0.5rem);
    transition: all 0.25s linear;
}

.nav-link:hover{
    background: var(--colors-background-bg-primary-hover, #EAECF0);
}

.nav-link:focus{
    box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, 0.14);
}

.nav-link.current{
    background: var(--colors-background-bg-active, #F2F4F7);
}

.nav-item__btn{
    border-radius: var(--radius-sm, 0.375rem);
    border-color: transparent;
    background: var(--colors-background-bg-primary, #FFF);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-1040-px, 2.5rem);
    height: var(--spacing-1040-px, 2.5rem);
    padding: var(--spacing-md, 0.5rem);
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    padding: 10px;
    transition: all 0.25s linear;
}

.nav-item__btn:hover{
    background: var(--colors-background-bg-primary-hover, #EAECF0);
}

.nav-item__btn:focus{
    box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, 0.14);
}

.navigation{
    border-bottom: 1px solid var(--colors-border-border-secondary, #EAECF0);
    background: var(--colors-background-bg-primary, #FFF);
}

.pagination-text{
    color: var(--colors-foreground-fg-secondary-700, #344054);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* END Navbar */

/* start dropdwn */
    .dropdown .dropdown-custom svg{
        fill: transparent;
        stroke: #667085;
        transition: all 0.25s linear;
    }

    .dropdown-custom.dropdown-toggle::after{
        content: none;
    }

    .dropdown-custom.dropdown-toggle.show svg{
        transform: rotate(180deg);
    }
/* end dropdown */

/* start card */
.card-table{
    display: flex;
    align-items: center;
    gap: var(--spacing-lg, 0.75rem);
}

.card-table img{
    display: flex;
    width: var(--spacing-2080-px, 5rem);
    height: 2.875rem;
    align-items: flex-end;
    border-radius: var(--radius-md, 0.5rem);
    border: 1px solid var(--component-colors-utility-gray-utility-gray-500, #667085);
}

.card-table p{
    color: var(--colors-text-text-primary-900, #101828);
}


.card-create{
    transition: all 0.25s linear;
    border-radius: var(--radius-md, 0.5rem);
}


.card-create img{
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
}

.card-create__hover,
.card-create:hover .card-create__border,
.card-create__hover,
.card-timeframe--create:hover .card-create__border{
    opacity: 0;
    display: none;
}

.card-create:hover .card-create__hover,
.card-create__border,
.card-timeframe--create:hover .card-create__hover{
    opacity: 1;
    display: block;
}

.btn-plus:focus, .btn-plus,
.card-timeframe--create:focus, .card-timeframe--create{
    outline: none;
    border: none;
}
/* .card-timeframe--create */
.card-create .btn-plus .btn-plus__first-layer,
.card-timeframe--create .btn-plus .btn-plus__first-layer{
    transition: all 0.25s linear;
    position: relative;
}

.card-create .btn-plus .btn-plus__first-layer::before,
.card-timeframe--create .btn-plus .btn-plus__first-layer::before{
    transition: all 0.25s linear;
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    height: 58px;
    width: 58px;
    border-radius: 100px;
    padding: 5px;
    background: var(--border-primary, #D0D5DD);
    opacity: 0.5;
}

.card-timeframe--create .btn-plus .btn-plus__first-layer::before{
    height: 42px;
    width: 42px;
    top: -4px;
    left: -4px;
}

.card-create .btn-plus .btn-plus__second-layer,
.card-timeframe--create .btn-plus .btn-plus__second-layer{
    transition: all 0.25s linear;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 100px;
    background: var(--text-placeholder, #667085);
}

.card-timeframe--create .btn-plus .btn-plus__second-layer{
    width: 34px;
    height: 34px;
}

.card-create .btn-plus .btn-plus__second-layer img,
.card-timeframe--create .btn-plus .btn-plus__second-layer img{
    transition: all 0.25s linear;
    height: 30px;
    width: 30px;
}

.card-timeframe--create .btn-plus .btn-plus__second-layer img{
    height: 18px;
    width: 18px;
}

.card-create:hover .btn-plus .btn-plus__first-layer,
.card-timeframe--create:hover .btn-plus .btn-plus__first-layer{
    transition: all 0.25s linear;
    position: relative;
}

.card-create:hover .btn-plus .btn-plus__first-layer::before{
    transition: all 0.25s linear;
    content: '';
    position: absolute;
    top: -7px;
    left: -7px;
    height: 72px;
    width: 72px;
    border-radius: 100px;
    padding: 7px;
    background: linear-gradient(0deg, #FBC8D4 0%, #9795F0 100%);
    opacity: 0.5;
}


.card-create:hover .btn-plus .btn-plus__second-layer
{
    transition: all 0.25s linear;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 100px;
    background: linear-gradient(135deg, #CE9FFC 0%, #7367F0 100%);
}

.card-create:hover .btn-plus .btn-plus__second-layer img{
    transition: all 0.25s linear;
    height: 30px;
    width: 30px;
}


/* project */
.card-project{
    border-radius: 0.5rem;
    border: 1px solid var(--gradient-linear-color-02, white);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

    background: linear-gradient(180deg, #FFFFFF 0%, #F3F5F7 100%) padding-box,
    linear-gradient(to bottom, #FBC2EB, #A18CD1) border-box;
    position: relative;
    z-index: 2;
    border: 1px solid transparent;
}

.card-project__parent:hover .card-project__bg{
    right: -0.375rem;
    bottom: -0.375rem;
}

.card-project__parent{
    transition: all 0.25s linear;
    position: relative;
}

.card-project__bg{
    position: absolute;
    right: 0rem;
    bottom: 0rem;
    border-radius: 0.5rem;
    transition: all 0.25s linear;

    background: var(--gradient-linear-color-02, linear-gradient(180deg, #FBC2EB 0%, #A18CD1 105.25%));
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    width: 100%;
    height: 100%;
}

.card-project__content-img{
    transition: all 0.25s linear;
}

.card-project__content-img.default{
    display: block;
    opacity: 0.3;
}

.card-project__content-img.hover{
    display: none;
    opacity: 0;
}

.card-project__parent:hover .card-project__content-img.hover{
    display: block;
    opacity: 1;
}

.card-project__parent:hover .card-project__content-img.default{
    display: none;
    opacity: 0;
}

.card-project p{
    font-size: 0.875rem;
    line-height: 1rem;
}

.card-project .card-project__content-img{
    /*height: 100%;*/
    /*width: 100%;*/
    /*position: absolute;*/
    /*object-fit: contain;*/
    background: rgba(255, 255, 255, 0.80);
}

.card-tutorial_BACK{
    border-radius: 0.5rem;
    background: linear-gradient(white, white) padding-box,
    linear-gradient(to bottom, #FF274E, #8FFF00) border-box;
    border: 1px solid transparent;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    overflow: hidden;
    outline: 1px solid transparent;

    transition: all 0.25s linear;
}


.card-tutorial__image-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-out;
  }
  .card-tutorial__image-hover:hover {
    opacity: 1;
  }

.card-tutorial_image-hover
{
    width:410px;
    height: 296px;
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}
.card-tutorial_image-hover:hover
{
    background-image: url('hover-image.jpg'); /* Change on hover */
}

.card-tutorial__header{
    position: relative;
}

.card-tutorial__header-box{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;

    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(2px);
    transition: all 0.25s linear;
}

.card-tutorial__content{
    background: linear-gradient(269deg, #F2FFEB 2.97%, #FFF0F4 99.31%);
}

.card-tutorial:hover .card-tutorial__content{
    background: linear-gradient(269deg, #F8FFF3 2.97%, #FFF8F9 99.31%);
}

.card-tutorial:hover .card-tutorial__header-box{
    background: none;
    backdrop-filter: none;
}

.card-tutorial .card-tutorial__btn {
    position: relative;
    z-index: 3;
    transition: all 0.25s linear;
}

.card-tutorial .card-tutorial__btn .card-tutorial__default,
.card-tutorial .card-tutorial__btn .card-tutorial__hover{
    transition: all 0.25s linear;
}

.card-tutorial .card-tutorial__btn .card-tutorial__default{
    display: block;
    opacity: 1;
}
.card-tutorial:hover .card-tutorial__btn .card-tutorial__default{
    display: none;
    opacity: 0;
}

.card-tutorial .card-tutorial__btn .card-tutorial__hover{
    display: none;
    opacity: 0;
}
.card-tutorial:hover .card-tutorial__btn .card-tutorial__hover{
    display: block;
    opacity: 1;
}

.card-tutorial:hover{
    background: linear-gradient(white, white) padding-box,
    linear-gradient(to bottom, #9300D9, #9300D9) border-box;
    outline-color: #9300D9;
}

.card-library{
    position: relative;
    border: 2px solid transparent;
    outline: 1px solid #667085;
    transition: all 0.25s linear;

    border-radius: var(--radius-md, 0.5rem);
    overflow: hidden;
}

.card-library img:not(.card-library .dropdown-menu img){
    border-radius: var(--radius-md, 0.5rem);
}


.card-library:hover,
.card-library__timeframe.active{
    background: linear-gradient(white, white) padding-box,
    linear-gradient(to right, #7000FF, #CE90FF, #AB40FF, #EF31FF) border-box;
    outline-color: #9300D9;
    border: 2px solid transparent;
    outline: 0px solid transparent;
}

.card-library img{
    width: 167px;
    height: 97px;
}


.card-library--wizard button{
    width: calc(100% - 12px) !important;
}

.card-library--wizard button{
    opacity: 0;
}

.card-library--wizard:hover button{
    opacity: 1;
}

.card-library .badge{
    position: absolute;
    bottom: 4px;
    left: 4px;
}


.card-library__timeframe{
    position: relative;
    transition: all 0.25s linear;
}

.card-library__timeframe .slide-number{
    display: flex;
    padding: var(--spacing-xs, 0.25rem) var(--spacing-312-px, 0.75rem);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-md, 0.5rem);
    border: 1px solid var(--component-colors-utility-gray-blue-utility-gray-blue-300, #B3B8DB);
    background: var(--component-colors-utility-gray-blue-utility-gray-blue-200, #D5D9EB);
    color: var(--colors-base-black, #000);
    font-family: Inter;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1rem;
    position: absolute;
    left: 6px;
    bottom: 6px;
    transition: all 0.25s linear;
}

.card-library__timeframe:hover{
    background: linear-gradient(white, white) padding-box,
    linear-gradient(to right, #344054, #344054) border-box;
    outline-color: #9300D9;
    border: 2px solid transparent;
    outline: 0px solid transparent;
}

.card-library__timeframe:hover .slide-number{
    border: 1px solid var(--component-colors-utility-gray-blue-utility-gray-blue-600, #3E4784);
    background: var(--component-colors-utility-gray-blue-utility-gray-blue-500, #4E5BA6);
    color: white;
}

.card-timeframe--create img{
    width: 199px;
    height: 114px;
}


.card-library__timeframe img{
    width: 195px;
    height: 110px;
}

.tag-default{
    position: absolute;
    bottom: 5px;

    display: inline-flex;
    padding: 0.375rem;
    align-items: center;
    gap: 0.25rem;

    border-radius: var(--radius-sm, 0.375rem);
    border: 1px solid var(--component-colors-utility-gray-utility-gray-300, #D0D5DD);
    background: var(--component-colors-utility-gray-utility-gray-100, #F2F4F7);

    font-size: 0.875rem;
    line-height: 0.875rem;
}

.i-dodl-project-tag {
    position: absolute;
    bottom: 5px;

    display: inline-flex;
    padding: 0.375rem;
    align-items: center;
    gap: 0.25rem;

    font-size: 0.875rem;
    line-height: 0.875rem;
}

.i-dodl-project-duration-tag {
    border-radius: var(--radius-sm, 0.375rem);
    border: 1px solid var(--component-colors-utility-gray-utility-gray-300, #D0D5DD);
    background: var(--component-colors-utility-gray-utility-gray-100, #F2F4F7);
}

.left-5 {
    left: 5px;
}

.right-5 {
    right: 5px;
}

.tag-default img{
    max-width: 14px;
    height: auto;
}

.dropdown-menu{
    /* display: flex; */
    padding: var(--spacing-xs, 0.25rem) 0rem;

    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.dropdown-item__block{
    padding: 0.0625rem var(--spacing-sm, 0.375rem);
    width: 100%;
}

.dropdown-item img{
    width: 1rem;
    height: 1rem;
}

.dropdown-item{
    padding: 9px 10px;
    /*border-radius: var(--radius-sm, 0.375rem);*/
    /* margin: 0.0625rem var(--spacing-sm, 0.375rem); */
}

.dropdown-item:hover{
    background: #EAECF0;
}

.avatar{
    border-radius: var(--radius-full, 624.9375rem);
    border: 0.75px solid var(--component-colors-components-avatars-avatar-contrast-border, rgba(0, 0, 0, 0.08));
    width: 2.5rem;
    height: 2.5rem;
}

#tableArrowDown img{
    transition: all 0.25s linear;
}

#tableArrowDown.active img{
    transform: rotate(180deg);
}

.featured-icon{
    border-radius: var(--radius-lg, 0.625rem);
    box-shadow: 0px 0px 10px 0px rgba(107, 19, 149, 0.20);

    background: linear-gradient(white, white) padding-box,
    linear-gradient(to right, rgba(127, 17, 224, 0.3), rgba(37, 117, 252, 0.3)) border-box;
    border: 2px solid transparent;
    padding: 12px;
}

.btn-close{
    background: none;
    width: 44px;
    height: 44px;
    padding: 0 !important;
}

/* .btn-close:hover{
    --bs-btn-close-color: #98A2B3;
    color: #98A2B3;
} */

.library{
    background: var(--colors-base-white, #FFF);
    width: 350px;
    border-right: 1px solid #98A2B3;
    position: absolute;
    top: 64px;
    left: 0 ;

    /* 182px - 74px */
    height: calc(100vh - 246px);
    min-height: 302px;
}

.library-footer{
    border-top: 1px solid var(--component-colors-utility-gray-utility-gray-400, #98A2B3);
    border-bottom: 1px solid var(--component-colors-utility-gray-utility-gray-400, #98A2B3);

    background: #FFF;
}

.library-main .tab-content{
    height: calc(100vh - 541px);
}

.library-main .nav-pills,
.library-form{
    padding: var(--spacing-3xl, 1.5rem) var(--spacing-lg, 0.75rem) 0rem var(--spacing-lg, 0.75rem);
}

.library-main .tab-content{
    padding: 0 var(--spacing-lg, 0.25rem) 0rem var(--spacing-lg, 0.75rem);
    margin-right: 0.25rem;
}



.library .nav-pills{
    position: relative;
}

.library .nav-pills::after{
    content: '';
    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid var(--colors-border-border-secondary, #EAECF0);
}

.library-header{
    border-bottom: 1px solid #D0D5DD;
    background-color: #F9FAFB;

}

.nav-pills .nav-item .nav-link{
    color: var(--colors-text-text-quarterary-500, #667085);

    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;

    display: flex;
    padding: 0rem var(--spacing-md, 0.5rem) var(--spacing-lg, 0.75rem) var(--spacing-md, 0.5rem);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md, 0.5rem);
    background-color: transparent;
    border-radius: 0;

    border-bottom: 3px solid transparent;
    z-index: 1;
}

.nav-pills .nav-item .nav-link:focus{
    box-shadow: none;
    outline: none;
}

.nav-pills .nav-item .nav-link:hover{
    /* background: var(--colors-background-bg-brand-primary-alt, #F9F5FF); */
    color: var(--colors-text-text-brand-secondary-700, #6941C6);
    border-bottom: 3px solid var(--colors-foreground-fg-brand-primary-alt, #7F56D9);
}

.nav-pills .nav-item .nav-link.active{
    color: var(--colors-text-text-brand-secondary-700, #6941C6);
    border-bottom: 3px solid var(--colors-foreground-fg-brand-primary-alt, #7F56D9);
}



/* start dashboard */

.dashboard-main{
    display: flex;
    padding: 3rem 1.5rem 2rem 1.5rem;

    flex-direction: column;
    align-items: center;
    gap: 3rem;

    align-self: stretch;
}

.dashboard-main__header{

}

.dashboard-main__header .dashboard-main__header-title{
    font-family: Lato;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 800;
    line-height: 2.125rem;
}

.projects-table{
    border-radius: var(--radius-xl, 0.75rem);
    border: 1px solid var(--colors-border-border-secondary, #EAECF0);
    background: var(--colors-background-bg-primary, #FFF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
}

.projects-table thead tr th{
    color:#475467;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.125rem;
    padding: var(--spacing-lg, 0.75rem) var(--spacing-3xl, 1.5rem);
}

.projects-table tbody tr th,
.projects-table tbody tr td{
    padding: var(--spacing-xl, 1rem) var(--spacing-3xl, 1.5rem);
    vertical-align: middle;
}

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

.projects-table table {
    --bs-table-border-color: #EAECF0;
}


/* end dashboard */


.page-editor{
    background: var(--component-colors-utility-gray-utility-gray-200, #EAECF0);
}

.canvas{
    display: flex;
    /* width: 100%; */
    min-height: calc(100vh - 63px - 182px);
    /* //246px */
    padding: var(--spacing-2xl, 1.25rem);
    margin-left: 350px;
    margin-right: 300px;
}

.canvas .canvas-page{
    border-radius: var(--spacing-14-px, 0.25rem);
    border: 1px solid var(--component-colors-utility-gray-utility-gray-300, #D0D5DD);
    background: white;
}

.canvas .canvas-bar{
    border-radius: var(--radius-xl, 0.75rem);
    border: 1px solid var(--component-colors-utility-gray-blue-utility-gray-blue-300, #B3B8DB);
    background: var(--component-colors-utility-gray-utility-gray-300, #D0D5DD);

    padding: var(--spacing-lg, 0.75rem);
    width: calc(100% - 40px);
}

.timeline-container{
    background: var(--colors-base-white, #FFF);
    height: 182px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

.timeline-container .timeline-top{
    display: flex;
    padding: 0rem var(--container-padding-mobile, 1rem);
    align-items: end;
    gap: var(--spacing-10xl, 8rem);
    background: var(--component-colors-utility-gray-utility-gray-200, #EAECF0);
    border-top: 1px solid var(--component-colors-utility-gray-utility-gray-400, #98A2B3);
    width: fit-content;
    height: 26px;
}

.timeline-container .timeline-chunk{
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-sm, 0.375rem);
}

.timeline-container .timeline-chunk .timeline-chunk__line{
    width: 0.0625rem;
    height: var(--spacing-28-px, 0.5rem);
    border-radius: 0.0625rem 0.0625rem 0rem 0rem;
    background: var(--component-colors-utility-gray-utility-gray-300, #D0D5DD);
}

.timeline-container .timeline-chunk .timeline-chunk__text{
    color: var(--component-colors-utility-gray-utility-gray-400, #98A2B3);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.125rem;
}

.timeline-container .timeline-middle{
    display: flex;
    background: var(--colors-base-white, #FFF);
    padding: var(--spacing-lg, 0.75rem);
    align-items: center;
    gap: 0.625rem;
    max-height: 134px;
}




.timeline-container .timeline-bottom{
    display: flex;
    padding: 0rem var(--spacing-lg, 0.75rem) var(--spacing-sm, 0.375rem) var(--spacing-lg, 0.75rem);

    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
}

.inspector{
    position: absolute;
    right: 0;
    top: 64px;
    background: var(--colors-base-white, #FFF);
    max-width: 300px;
    width: 100%;
    height: calc(100vh - 246px);
    min-height: 302px;
    border-left: 1px solid var(--component-colors-utility-gray-utility-gray-400, #98A2B3);
}

.inspector .inspector-header{
    display: flex;
    padding: var(--spacing-xl, 1rem);
    align-items: center;
    gap: var(--spacing-md, 0.5rem);
}

.inspector .inspector-content{
    display: flex;
    padding: 0.625rem;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
}

.inspector-accordion .accordion-body{
    /* display: flex; */
    /* width: 17.5rem; */
    padding: 0.75rem 1rem;
    width: 100%;

    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: center; */
    /* gap: var(--spacing-xl, 1rem); */
}

.inspector-accordion .accordion-button{
    /* border-bottom: 1px solid var(--component-colors-utility-gray-utility-gray-300, #D0D5DD); */
    background: var(--component-colors-utility-gray-utility-gray-100, #F2F4F7);
    box-shadow: none;
    border-color: transparent;
    border-bottom: 1px solid var(--component-colors-utility-gray-utility-gray-300, #D0D5DD);

}

.inspector-accordion .accordion-button:focus{
    box-shadow: none;
    border-color: transparent;
}

.inspector-accordion .accordion-item{
    border-color: #D0D5DD;
}

.inspector-accordion .accordion-button::after{
   background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgOUwxMiAxNUwxOCA5IiBzdHJva2U9IiMzNDQwNTQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=")
}



.gettingstartedoverlay{
    opacity:0.7;
    background-color:#000;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}

/* (A) SPEECH BOX */
.gettingstarted-speech {
    text-align:left;
    color: #fff;

    max-width: 40ch;

     /* triangle dimension */
     --b: 2em; /* base */
     --h: 1em; /* height */

     --p: 52%; /* triangle position (0%:left 100%:right) */
     --r: 0.4em; /* the radius */

     background: rgb(112,0,255);
     padding: 1em;
     border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2) min(var(--r),var(--p) - var(--b)/2)/var(--r);
     background: 0 0/100% calc(100% + var(--h))
     linear-gradient(45deg, rgba(112,0,255,1) 0%, rgba(158,56,255,1) 45%); /* the gradient */
     position: absolute;
     z-index: 20;
     margin-top: -150px;
     margin-left:20px;

  }

  .gettingstarted-speech::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 calc(-1*var(--h));
    background-image: inherit;
    clip-path: polygon(min(100%,var(--p) + var(--b)/2) calc(100% - var(--h)),var(--p) 100%,max(0%,var(--p) - var(--b)/2) calc(100% - var(--h)),50% 50%);
  }

  .gray-light-text-500{
      color: var(--colors-gray-light-mode-500);
  }

.image-card
{
    background: #FFFFFF;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tooltip-inner {
     max-width: 360px;
     /* If max-width does not work, try using width instead */
 }

.dodl-play-audio:hover{
    background: var(--colors-gray-light-mode-100);
}
#togglePassword {
    top: 50%;
    transform: translateY(-50%);
}

.w-120 {
    width: 120px !important;
}