@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

:root {
    --color-white: #ffffff;
    --color-black: #000000;

    --color-gray-25: #fcfcfd;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f2f4f7;
    --color-gray-200: #eaecf0;
    --color-gray-300: #d0d5dd;
    --color-gray-400: #98a2b3;
    --color-gray-500: #667085;
    --color-gray-600: #475467;
    --color-gray-700: #344054;
    --color-gray-800: #1d2939;
    --color-gray-900: #101828;

    --color-primary-25: #fcfaff;
    --color-primary-50: #f9f5ff;
    --color-primary-100: #f4ebff;
    --color-primary-200: #e9d7fe;
    --color-primary-300: #d6bbfb;
    --color-primary-400: #b692f6;
    --color-primary-500: #9e77ed;
    --color-primary-600: #7f56d9;
    --color-primary-700: #6941c6;
    --color-primary-800: #53389e;
    --color-primary-900: #42307d;

    --color-error-25: #fffbfa;
    --color-error-50: #fef3f2;
    --color-error-100: #fee4e2;
    --color-error-200: #fecdca;
    --color-error-300: #fda29b;
    --color-error-400: #f97066;
    --color-error-500: #f04438;
    --color-error-600: #d92d20;
    --color-error-700: #b42318;
    --color-error-800: #912018;
    --color-error-900: #7a271a;

    --color-warning-25: #fffcf5;
    --color-warning-50: #fffaeb;
    --color-warning-100: #fef0c7;
    --color-warning-200: #fedf89;
    --color-warning-300: #fec84b;
    --color-warning-400: #fdb022;
    --color-warning-500: #f79009;
    --color-warning-600: #dc6803;
    --color-warning-700: #b54708;
    --color-warning-800: #93370d;
    --color-warning-900: #7a2e0e;

    --color-blue-25: #f5faff;
    --color-blue-50: #eff8ff;
    --color-blue-100: #d1e9ff;
    --color-blue-200: #b2ddff;
    --color-blue-300: #84caff;
    --color-blue-400: #53b1fd;
    --color-blue-500: #2e90fa;
    --color-blue-600: #1570ef;
    --color-blue-700: #175cd3;
    --color-blue-800: #1849a9;
    --color-blue-900: #194185;

    --color-success-25: #f6fef9;
    --color-success-50: #ecfdf3;
    --color-success-100: #d1fadf;
    --color-success-200: #a6f4c5;
    --color-success-300: #6ce9a6;
    --color-success-400: #32d583;
    --color-success-500: #12b76a;
    --color-success-600: #039855;
    --color-success-700: #027a48;
    --color-success-800: #05603a;
    --color-success-900: #054f31;

    --color-gray-blue-25: #fcfcfd;
    --color-gray-blue-50: #f8f9fc;
    --color-gray-blue-100: #eaecf5;
    --color-gray-blue-200: #d5d9eb;
    --color-gray-blue-300: #b3b8db;
    --color-gray-blue-400: #717bbc;
    --color-gray-blue-500: #4e5ba6;
    --color-gray-blue-600: #3e4784;
    --color-gray-blue-700: #363f72;
    --color-gray-blue-800: #293056;
    --color-gray-blue-900: #101323;

    --color-gray-cool-25: #fcfcfd;
    --color-gray-cool-50: #f9f9fb;
    --color-gray-cool-100: #eff1f5;
    --color-gray-cool-200: #dcdfea;
    --color-gray-cool-300: #b9c0d4;
    --color-gray-cool-400: #7d89b0;
    --color-gray-cool-500: #5d6b98;
    --color-gray-cool-600: #4a5578;
    --color-gray-cool-700: #404968;
    --color-gray-cool-800: #30374f;
    --color-gray-cool-900: #111322;

    --color-gray-modern-25: #fcfcfd;
    --color-gray-modern-50: #f8fafc;
    --color-gray-modern-100: #eef2f6;
    --color-gray-modern-200: #e3e8ef;
    --color-gray-modern-300: #cdd5df;
    --color-gray-modern-400: #9aa4b2;
    --color-gray-modern-500: #697586;
    --color-gray-modern-600: #4b5565;
    --color-gray-modern-700: #364152;
    --color-gray-modern-800: #202939;
    --color-gray-modern-900: #121926;

    --color-gray-neutral-25: #fcfcfd;
    --color-gray-neutral-50: #f9fafb;
    --color-gray-neutral-100: #f3f4f6;
    --color-gray-neutral-200: #e5e7eb;
    --color-gray-neutral-300: #d2d6db;
    --color-gray-neutral-400: #9da4ae;
    --color-gray-neutral-500: #6c737f;
    --color-gray-neutral-600: #4d5761;
    --color-gray-neutral-700: #384250;
    --color-gray-neutral-800: #1f2a37;
    --color-gray-neutral-900: #111927;

    --color-gray-iron-25: #fcfcfc;
    --color-gray-iron-50: #fafafa;
    --color-gray-iron-100: #f4f4f5;
    --color-gray-iron-200: #e4e4e7;
    --color-gray-iron-300: #d1d1d6;
    --color-gray-iron-400: #a0a0ab;
    --color-gray-iron-500: #70707b;
    --color-gray-iron-600: #51525c;
    --color-gray-iron-700: #3f3f46;
    --color-gray-iron-800: #26272b;
    --color-gray-iron-900: #18181b;

    --color-gray-true-25: #fcfcfc;
    --color-gray-true-50: #fafafa;
    --color-gray-true-100: #f5f5f5;
    --color-gray-true-200: #e5e5e5;
    --color-gray-true-300: #d6d6d6;
    --color-gray-true-400: #a3a3a3;
    --color-gray-true-500: #737373;
    --color-gray-true-600: #525252;
    --color-gray-true-700: #424242;
    --color-gray-true-800: #292929;
    --color-gray-true-900: #141414;

    --color-gray-warm-25: #fdfdfc;
    --color-gray-warm-50: #fafaf9;
    --color-gray-warm-100: #f5f5f4;
    --color-gray-warm-200: #e7e5e4;
    --color-gray-warm-300: #d7d3d0;
    --color-gray-warm-400: #a9a29d;
    --color-gray-warm-500: #79716b;
    --color-gray-warm-600: #57534e;
    --color-gray-warm-700: #44403c;
    --color-gray-warm-800: #292524;
    --color-gray-warm-900: #1c1917;

    --color-moss-25: #fafdf7;
    --color-moss-50: #f5fbee;
    --color-moss-100: #e6f4d7;
    --color-moss-200: #ceeab0;
    --color-moss-300: #acdc79;
    --color-moss-400: #86cb3c;
    --color-moss-500: #669f2a;
    --color-moss-600: #4f7a21;
    --color-moss-700: #3f621a;
    --color-moss-800: #335015;
    --color-moss-900: #2B42112;

    --color-green-light-25: #fafef5;
    --color-green-light-50: #f3fee7;
    --color-green-light-100: #e4fbcc;
    --color-green-light-200: #d0f8ab;
    --color-green-light-300: #a6ef67;
    --color-green-light-400: #85e13a;
    --color-green-light-500: #66c61c;
    --color-green-light-600: #4ca30d;
    --color-green-light-700: #3b7c0f;
    --color-green-light-800: #326212;
    --color-green-light-900: #2b5314;

    --color-green-25: #f6fef9;
    --color-green-50: #edfcf2;
    --color-green-100: #d3f8df;
    --color-green-200: #aaf0c4;
    --color-green-300: #73e2a3;
    --color-green-400: #3ccb7f;
    --color-green-500: #16b364;
    --color-green-600: #099250;
    --color-green-700: #087443;
    --color-green-800: #095c37;
    --color-green-900: #084c2e;

    --color-teal-25: #f6fefc;
    --color-teal-50: #f0fdf9;
    --color-teal-100: #ccfbef;
    --color-teal-200: #99f6e0;
    --color-teal-300: #5fe9d0;
    --color-teal-400: #2ed3b7;
    --color-teal-500: #15b79e;
    --color-teal-600: #0e9384;
    --color-teal-700: #107569;
    --color-teal-800: #125d56;
    --color-teal-900: #134e48;

    --color-cyan-25: #f5feff;
    --color-cyan-50: #ecfdff;
    --color-cyan-100: #cff9fe;
    --color-cyan-200: #a5f0fc;
    --color-cyan-300: #67e3f9;
    --color-cyan-400: #22ccee;
    --color-cyan-500: #06aed4;
    --color-cyan-600: #088ab2;
    --color-cyan-700: #0e7090;
    --color-cyan-800: #155b75;
    --color-cyan-900: #164c63;

    --color-blue-light-25: #f5fbff;
    --color-blue-light-50: #f0f9ff;
    --color-blue-light-100: #e0f2fe;
    --color-blue-light-200: #b9e6fe;
    --color-blue-light-300: #7cd4fd;
    --color-blue-light-400: #36bffa;
    --color-blue-light-500: #0ba5ec;
    --color-blue-light-600: #0086c9;
    --color-blue-light-700: #026aa2;
    --color-blue-light-800: #065986;
    --color-blue-light-900: #0b4a6f;

    --color-blue-25: #f5faff;
    --color-blue-50: #eff8ff;
    --color-blue-100: #d1e9ff;
    --color-blue-200: #b2ddff;
    --color-blue-300: #84caff;
    --color-blue-400: #53b1fd;
    --color-blue-500: #2e90fa;
    --color-blue-600: #1570ef;
    --color-blue-700: #175cd3;
    --color-blue-800: #1849a9;
    --color-blue-900: #194185;

    --color-blue-dark-25: #f5f8ff;
    --color-blue-dark-50: #eff4ff;
    --color-blue-dark-100: #d1e0ff;
    --color-blue-dark-200: #b2ccff;
    --color-blue-dark-300: #84adff;
    --color-blue-dark-400: #528bff;
    --color-blue-dark-500: #2970ff;
    --color-blue-dark-600: #155eef;
    --color-blue-dark-700: #004eeb;
    --color-blue-dark-800: #0040c1;
    --color-blue-dark-900: #00359e;

    --color-indigo-25: #f5f8ff;
    --color-indigo-50: #eef4ff;
    --color-indigo-100: #e0eaff;
    --color-indigo-200: #c7d7fe;
    --color-indigo-300: #a4bcfd;
    --color-indigo-400: #8098f9;
    --color-indigo-500: #6172f3;
    --color-indigo-600: #444ce7;
    --color-indigo-700: #3538cd;
    --color-indigo-800: #2d31a6;
    --color-indigo-900: #2d3282;

    --color-violet-25: #fbfaff;
    --color-violet-50: #f5f3ff;
    --color-violet-100: #ece9fe;
    --color-violet-200: #ddd6fe;
    --color-violet-300: #c3b5fd;
    --color-violet-400: #a48afb;
    --color-violet-500: #875bf7;
    --color-violet-600: #7839ee;
    --color-violet-700: #6927da;
    --color-violet-800: #5720b7;
    --color-violet-900: #491c96;

    --color-purple-25: #fafaff;
    --color-purple-50: #f4f3ff;
    --color-purple-100: #ebe9fe;
    --color-purple-200: #d9d6fe;
    --color-purple-300: #bdb4fe;
    --color-purple-400: #9b8afb;
    --color-purple-500: #7a5af8;
    --color-purple-600: #6938ef;
    --color-purple-700: #5925dc;
    --color-purple-800: #4a1fb8;
    --color-purple-900: #3e1c96;

    --color-fuchsia-25: #fefaff;
    --color-fuchsia-50: #fdf4ff;
    --color-fuchsia-100: #fbe8ff;
    --color-fuchsia-200: #f6d0fe;
    --color-fuchsia-300: #eeaafd;
    --color-fuchsia-400: #e478fa;
    --color-fuchsia-500: #d444f1;
    --color-fuchsia-600: #ba24d5;
    --color-fuchsia-700: #9f1ab1;
    --color-fuchsia-800: #821890;
    --color-fuchsia-900: #6f1877;

    --color-pink-25: #fef6fb;
    --color-pink-50: #fdf2fa;
    --color-pink-100: #fce7f6;
    --color-pink-200: #fcceee;
    --color-pink-300: #faa7e0;
    --color-pink-400: #f670c7;
    --color-pink-500: #ee46bc;
    --color-pink-600: #dd2590;
    --color-pink-700: #c11574;
    --color-pink-800: #9e165f;
    --color-pink-900: #851651;

    --color-rose-25: #fff5f6;
    --color-rose-50: #fff1f3;
    --color-rose-100: #ffe4e8;
    --color-rose-200: #fecdd6;
    --color-rose-300: #fea3b4;
    --color-rose-400: #fd6f8e;
    --color-rose-500: #f63d68;
    --color-rose-600: #e31b54;
    --color-rose-700: #c01048;
    --color-rose-800: #a11043;
    --color-rose-900: #89123e;

    --color-orange-dark-25: #fff9f5;
    --color-orange-dark-50: #fff4ed;
    --color-orange-dark-100: #ffe6d5;
    --color-orange-dark-200: #ffd6ae;
    --color-orange-dark-300: #ff9c66;
    --color-orange-dark-400: #ff692e;
    --color-orange-dark-500: #ff4405;
    --color-orange-dark-600: #e62e05;
    --color-orange-dark-700: #bc1b06;
    --color-orange-dark-800: #97180c;
    --color-orange-dark-900: #771a0d;

    --color-orange-25: #fefaf5;
    --color-orange-50: #fef6ee;
    --color-orange-100: #fdead7;
    --color-orange-200: #f9dbaf;
    --color-orange-300: #f7b27a;
    --color-orange-400: #f38744;
    --color-orange-500: #ef6820;
    --color-orange-600: #e04f16;
    --color-orange-700: #b93815;
    --color-orange-800: #932f19;
    --color-orange-900: #772917;

    --color-yellow-25: #fefdf0;
    --color-yellow-50: #fefbe8;
    --color-yellow-100: #fef7c3;
    --color-yellow-200: #feee95;
    --color-yellow-300: #fde272;
    --color-yellow-400: #fac515;
    --color-yellow-500: #eaaa08;
    --color-yellow-600: #ca8504;
    --color-yellow-700: #a15c07;
    --color-yellow-800: #854a0e;
    --color-yellow-900: #713b12;

    --size-1: 4px;
    --size-2: 8px;
    --size-3: 12px;
    --size-4: 16px;
    --size-5: 20px;
    --size-6: 24px;
    --size-8: 32px;
    --size-10: 40px;
    --size-12: 48px;
    --size-14: 56px;
    --size-16: 64px;
    --size-20: 80px;
    --size-24: 96px;
    --size-32: 128px;
    --size-40: 160px;
    --size-48: 192px;
    --size-56: 224px;
    --size-64: 256px;
    --size-sm: 640px;
    --size-md: 768px;
    --size-lg: 1024px;
    --size-xl: 1280px;
    --size-w-screen: 100vw;
    --size-h-screen: 100vh;

    --display-2xl-size: 72px;
    --display-2xl-line: 90px;
    --display-2xl-tracking: -2%;
    --display-xl-size: 60px;
    --display-xl-line: 72px;
    --display-xl-tracking: -2%;
    --display-lg-size: 48px;
    --display-lg-line: 60px;
    --display-lg-tracking: -2%;
    --display-md-size: 36px;
    --display-md-line: 44px;
    --display-md-tracking: -2%;
    --display-sm-size: 30px;
    --display-sm-line: 38px;
    --display-xs-size: 24px;
    --display-xs-line: 32px;

    --text-xl-size: 20px;
    --text-xl-line: 30px;
    --text-lg-size: 18px;
    --text-lg-line: 28px;
    --text-md-size: 16px;
    --text-md-line: 24px;
    --text-sm-size: 14px;
    --text-sm-line: 20px;
    --text-xs-size: 12px;
    --text-xs-line: 18px;
    --text-2xs-size: 10px;
    --text-2xs-line: 14px;
    --text-3xs-size: 8px;
    --text-3xs-line: 12px;

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.06),
        0px 1px 3px 0px rgba(16, 24, 40, 0.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);

    --blur-sm: blur(8px);
    --blur-md: blur(16px);
    --blur-lg: blur(24px);
    --blur-xl: blur(40px);

    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-2xl: 12px;
    --radius-full: 9999px;

    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-white);
    color: var(--color-gray-900);
}

/* start: Avatar */
.avatar-group {
    display: flex;
    align-items: center;
}
.avatar-group > .avatar {
    margin-left: calc(-1 * var(--size-2));
}
.avatar-group > .avatar:first-child {
    margin-left: 0;
}
.avatar {
    height: 40px;
    width: 40px;
    border-radius: var(--radius-full);
    position: relative;
    background-color: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-outline {
    box-shadow: 0 0 0 4px var(--color-white);
}
.avatar-outline-soft-primary {
    box-shadow: 0 0 0 4px var(--color-primary-100);
}
.avatar-sm {
    height: 32px;
    width: 32px;
}
.avatar-lg {
    height: 48px;
    width: 48px;
}
.avatar-fallback {
    font-size: var(--text-md-size);
    font-weight: var(--font-medium);
    color: var(--color-gray-600);
    line-height: 0;
}
.avatar-sm .avatar-fallback {
    font-size: var(--text-sm-size);
}
.avatar-lg .avatar-fallback {
    font-size: var(--text-lg-size);
}
.avatar-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}
.avatar-badge {
    position: absolute;
    bottom: calc(-1 * var(--size-1) / 2);
    right: calc(-1 * var(--size-1) / 2);
    width: var(--size-4);
    height: var(--size-4);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
}
.avatar-sm .avatar-badge {
    width: var(--size-3);
    height: var(--size-3);
    border-width: 1px;
}
.avatar-lg .avatar-badge {
    width: var(--size-5);
    height: var(--size-5);
}
.avatar-badge-success {
    background-color: var(--color-success-500);
}
/* end: Avatar */

/* start: Progress Bar */
.progress-bar {
    display: flex;
    align-items: center;
    column-gap: var(--size-3);
    row-gap: var(--size-2);
}
.progress-bar-column {
    flex-direction: column;
    align-items: flex-end;
}
.progress-bar-floating {
    position: relative;
}
.progress-bar-progress {
    height: var(--size-2);
    background-color: var(--color-gray-200);
    border-radius: var(--radius-full);
    position: relative;
    overflow: hidden;
    width: 100%;
}
.progress-bar-progress::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--color-primary-500);
    border-radius: var(--radius-full);
    width: var(--progress-percent, 0);
    min-width: var(--size-2);
}
.progress-bar-text {
    font-size: var(--text-sm-size);
    font-weight: var(--font-medium);
    color: var(--color-gray-700);
}
.progress-bar-floating .progress-bar-text {
    position: absolute;
    bottom: 100%;
    left: calc(var(--progress-percent) - (var(--size-14) / 2));
    width: var(--size-14);
    padding: var(--size-2);
    margin-bottom: var(--size-2);
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-lg);
    text-align: center;
    font-size: var(--text-xs-size);
    font-weight: var(--font-semibold);
}
/* end: Progress Bar */

/* start: Progress Circle */
.progress-circle {
    --circle-size: 180px;
    --circle-stroke-width: var(--size-5);
    --circle-radius: calc(var(--circle-size) / 2 - var(--circle-stroke-width) / 2);
    --circle-circumference: calc(2 * 3.1416 * var(--circle-radius));
    width: var(--circle-size);
    height: var(--circle-size);
    position: relative;
}
.progress-circle-gauge {
    --circle-circumference: calc(3.1416 * var(--circle-radius));
    height: calc(var(--circle-size) / 2 + var(--circle-stroke-width) / 2);
}
.progress-circle-svg {
    width: 100%;
    height: 100%;
    transform: rotateZ(-90deg);
}
.progress-circle-gauge .progress-circle-svg {
    transform: none;
}
.progress-circle-fill,
.progress-circle-track {
    stroke-width: var(--circle-stroke-width);
    r: var(--circle-radius);
    cx: calc(var(--circle-size) / 2);
    cy: calc(var(--circle-size) / 2);
    stroke-linecap: round;
    fill: transparent;
    stroke-dasharray: var(--circle-circumference);
}
.progress-circle-gauge .progress-circle-fill,
.progress-circle-gauge .progress-circle-track {
    transform-origin: center bottom;
    transform: rotate(180deg);
    cy: calc(var(--circle-size) / 2 + var(--circle-stroke-width));
}
.progress-circle-track {
    stroke: var(--color-gray-200);
    stroke-dashoffset: 0;
}
.progress-circle-fill {
    stroke: var(--color-primary-500);
    stroke-dashoffset: calc(var(--circle-circumference) * (1 - var(--progress-value, 0) / 100));
    transition: stroke-dashoffset 0.3s ease-in-out;
}
.progress-circle-gauge .progress-circle-fill {
    stroke-dasharray: calc(2 * var(--circle-circumference));
    stroke-dashoffset: calc((var(--circle-circumference) * (1 - var(--progress-value, 0) / 100)) + var(--circle-circumference));
}
.progress-circle-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--size-1);
}
.progress-circle-gauge .progress-circle-content {
    bottom: 0;
    transform: translateX(-50%);
}
.progress-circle-text {
    font-size: var(--text-xs-size);
    color: var(--color-gray-600);
}
.progress-circle-value {
    font-size: var(--display-sm-size);
    font-weight: var(--font-medium);
}
/* end: Progress Circle */

/* start: Slider */
.slider {
    height: var(--size-6);
    position: relative;
}
.slider-progress {
    height: var(--size-2);
    background-color: var(--color-gray-200);
    border-radius: var(--radius-full);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
}
.slider-progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--slider-left, 0);
    width: var(--slider-percent, 0);
    height: 100%;
    background-color: var(--color-primary-500);
    border-radius: var(--radius-full);
}
.slider-thumb {
    --slider-thumb-size: var(--size-6);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    background-color: var(--color-white);
    border: 2px solid var(--color-primary-500);
    border-radius: var(--radius-full);
    cursor: pointer;
}
.slider-thumb-top {
    z-index: var(--z-10);
}
.slider-thumb-text {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--size-2);
    font-size: var(--text-sm-size);
    font-weight: var(--font-medium);
    pointer-events: none;
}
/* end: Slider */

/* start: Date Picker */
.datepicker-floating {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--z-10);
}
.datepicker-floating-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: var(--blur-md);
}
.datepicker-wrapper {
    display: flex;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-100);
    box-shadow: var(--shadow-xl);
}
.datepicker-sidebar {
    width: var(--size-48);
    flex-shrink: 0;
    border-right: 1px solid var(--color-gray-200);
    padding: var(--size-4);
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
}
.datepicker-sidebar-item {
    width: 100%;
    height: var(--size-10);
    padding: 0 var(--size-4);
    display: flex;
    align-items: center;
    text-align: left;
    font-size: var(--text-sm-size);
    font-weight: var(--font-medium);
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
    border-radius: var(--radius-md);
}
.datepicker-sidebar-item:hover {
    background-color: var(--color-gray-50);
}
.datepicker-sidebar-item.active {
    background-color: var(--color-gray-100);
}
.datepicker-main {
    min-width: 0;
}
.datepicker-body {
    display: flex;
}
.datepicker-right {
    border-left: 1px solid var(--color-gray-200);
}
.datepicker-footer {
    padding: var(--size-4);
    border-top: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-4);
}
.datepicker-footer-column {
    flex-direction: column;
    align-items: stretch;
}
.datepicker-date {
    display: flex;
    align-items: center;
    gap: var(--size-3);
}
.datepicker-date-item {
    display: flex;
    align-items: center;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-300);
    box-shadow: var(--shadow-xs);
    height: var(--size-10);
    padding: var(--size-3);
}
.datepicker-footer-column .datepicker-date-item {
    width: 100%;
    min-width: 0;
    font-size: var(--text-sm-size);
}
.datepicker-action {
    display: flex;
    gap: var(--size-3);
}
.datepicker-footer-column .datepicker-action > * {
    width: 100%;
    min-width: 0;
}
.datepicker-calendar {
    padding: 16px;
}
.datepicker-calendar-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--size-3);
}
.datepicker-calendar-navigation-label {
    color: var(--color-gray-700);
    font-weight: var(--font-semibold);
}
.datepicker-calendar-navigation-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-8);
    height: var(--size-8);
    border-radius: var(--radius-full);
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
    color: var(--color-gray-500);
    user-select: none;
}
.datepicker-calendar-navigation-item:hover {
    background-color: var(--color-gray-50);
}
.datepicker-calendar-body {
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
}
.datepicker-calendar-row {
    display: flex;
}
.datepicker-calendar-item {
    width: var(--size-10);
    height: var(--size-10);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-gray-700);
}
.datepicker-calendar-week {
    font-weight: var(--font-medium);
    font-size: var(--text-sm-size);
}
.datepicker-calendar-day {
    background-color: transparent;
    cursor: pointer;
    border: none;
    outline: none;
    border-radius: var(--radius-full);
}
.datepicker-calendar-day:hover {
    background-color: var(--color-gray-50);
}
.datepicker-calendar-day.additional {
    color: var(--color-gray-400);
    pointer-events: none;
}
.datepicker-calendar-day.selected.start,
.datepicker-calendar-day.selected:first-child {
    border-top-left-radius: var(--radius-full);
    border-bottom-left-radius: var(--radius-full);
}
.datepicker-calendar-day.selected.end,
.datepicker-calendar-day.selected:last-child {
    border-top-right-radius: var(--radius-full);
    border-bottom-right-radius: var(--radius-full);
}
.datepicker-calendar-day.today {
    font-weight: var(--font-medium);
    background-color: var(--color-gray-100);
    position: relative;
}
.datepicker-calendar-day.today::before {
    content: '';
    position: absolute;
    bottom: var(--size-1);
    left: 50%;
    transform: translateX(-50%);
    width: var(--size-1);
    height: var(--size-1);
    background-color: var(--color-primary-600);
    border-radius: var(--radius-full);
}
.datepicker-calendar-day.selected {
    background-color: var(--color-gray-50);
    font-weight: var(--font-medium);
    border-radius: 0;
}
.datepicker-calendar-day.active {
    font-weight: var(--font-medium);
    background-color: var(--color-primary-600);
    color: var(--color-white);
}
.datepicker-calendar-day.today.active::before {
    background-color: var(--color-white);
}
/* end: Date Picker */

/* start: Button */
.btn {
    border: none;
    outline: none;
    text-decoration: none;
    cursor: pointer;
    font-size: var(--text-sm-size);
    font-weight: var(--font-semibold);
    line-height: var(--text-sm-line);
    padding: var(--size-2) var(--size-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-3);
    white-space: nowrap;
    border-radius: var(--radius-lg);
    height: var(--size-10);
    background-color: transparent;
    color: var(--color-black);
    transition-property: box-shadow, background-color, color, border-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}
.btn:disabled {
    pointer-events: none;
    opacity: 0.5;
}
.btn-sm {
    padding: var(--size-1) var(--size-3);
    height: var(--size-8);
    font-size: var(--text-xs-size);
    line-height: var(--text-xs-line);
}
.btn-lg {
    padding: var(--size-3) var(--size-5);
    height: var(--size-12);
    font-size: var(--text-md-size);
    line-height: var(--text-md-line);
}
.btn-icon {
    padding: 0;
    height: var(--size-10);
    width: var(--size-10);
}
.btn-icon.btn-sm {
    height: var(--size-8);
    width: var(--size-8);
}
.btn-icon.btn-lg {
    height: var(--size-12);
    width: var(--size-12);
}

/* Black */
.btn-black {
    color: var(--color-white);
    background-color: var(--color-black);
    box-shadow: var(--shadow-xs);
}
.btn-black:hover {
    background-color: var(--color-gray-900);
}
.btn-black:active,
.btn-black:focus-visible {
    box-shadow: 0 0 0 4px var(--color-gray-100);
}

/* Primary */
.btn-primary {
    color: var(--color-white);
    background-color: var(--color-primary-600);
    box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
    background-color: var(--color-primary-700);
}
.btn-primary:active,
.btn-primary:focus-visible {
    box-shadow: 0 0 0 4px var(--color-primary-100);
}
.btn-soft-primary {
    color: var(--color-primary-700);
    background-color: var(--color-primary-50);
}
.btn-soft-primary:hover {
    background-color: var(--color-primary-100);
}
.btn-soft-primary:active,
.btn-soft-primary:focus-visible {
    box-shadow: 0 0 0 4px var(--color-primary-200);
}
.btn-ghost-primary {
    color: var(--color-primary-700);
}
.btn-ghost-primary:hover {
    background-color: var(--color-primary-50);
    color: var(--color-primary-800);
}
.btn-ghost-primary:active,
.btn-ghost-primary:focus-visible {
    box-shadow: 0 0 0 4px var(--color-primary-100);
}
.btn-link-primary {
    color: var(--color-primary-700);
}
.btn-link-primary:hover {
    text-decoration: underline;
    text-underline-offset: var(--size-1);
}
.btn-link-primary:active,
.btn-link-primary:focus-visible {
    box-shadow: 0 0 0 4px var(--color-gray-100);
}

/* Error */
.btn-error {
    color: var(--color-white);
    background-color: var(--color-error-600);
    box-shadow: var(--shadow-xs);
}
.btn-error:hover {
    background-color: var(--color-error-700);
}
.btn-error:active,
.btn-error:focus-visible {
    box-shadow: 0 0 0 4px var(--color-error-100);
}
.btn-soft-error {
    color: var(--color-error-700);
    background-color: var(--color-error-50);
}
.btn-soft-error:hover {
    background-color: var(--color-error-100);
}
.btn-soft-error:active,
.btn-soft-error:focus-visible {
    box-shadow: 0 0 0 4px var(--color-error-200);
}
.btn-ghost-error {
    color: var(--color-error-700);
}
.btn-ghost-error:hover {
    background-color: var(--color-error-50);
    color: var(--color-error-800);
}
.btn-ghost-error:active,
.btn-ghost-error:focus-visible {
    box-shadow: 0 0 0 4px var(--color-error-100);
}
.btn-link-error {
    color: var(--color-error-700);
}
.btn-link-error:hover {
    text-decoration: underline;
    text-underline-offset: var(--size-1);
}
.btn-link-error:active,
.btn-link-error:focus-visible {
    box-shadow: 0 0 0 4px var(--color-gray-100);
}

/* Warning */
.btn-warning {
    color: var(--color-white);
    background-color: var(--color-warning-600);
    box-shadow: var(--shadow-xs);
}
.btn-warning:hover {
    background-color: var(--color-warning-700);
}
.btn-warning:active,
.btn-warning:focus-visible {
    box-shadow: 0 0 0 4px var(--color-warning-100);
}
.btn-soft-warning {
    color: var(--color-warning-700);
    background-color: var(--color-warning-50);
}
.btn-soft-warning:hover {
    background-color: var(--color-warning-100);
}
.btn-soft-warning:active,
.btn-soft-warning:focus-visible {
    box-shadow: 0 0 0 4px var(--color-warning-200);
}
.btn-ghost-warning {
    color: var(--color-warning-700);
}
.btn-ghost-warning:hover {
    background-color: var(--color-warning-50);
    color: var(--color-warning-800);
}
.btn-ghost-warning:active,
.btn-ghost-warning:focus-visible {
    box-shadow: 0 0 0 4px var(--color-warning-100);
}
.btn-link-warning {
    color: var(--color-warning-700);
}
.btn-link-warning:hover {
    text-decoration: underline;
    text-underline-offset: var(--size-1);
}
.btn-link-warning:active,
.btn-link-warning:focus-visible {
    box-shadow: 0 0 0 4px var(--color-gray-100);
}

/* Success */
.btn-success {
    color: var(--color-white);
    background-color: var(--color-success-600);
    box-shadow: var(--shadow-xs);
}
.btn-success:hover {
    background-color: var(--color-success-700);
}
.btn-success:active,
.btn-success:focus-visible {
    box-shadow: 0 0 0 4px var(--color-success-100);
}
.btn-soft-success {
    color: var(--color-success-700);
    background-color: var(--color-success-50);
}
.btn-soft-success:hover {
    background-color: var(--color-success-100);
}
.btn-soft-success:active,
.btn-soft-success:focus-visible {
    box-shadow: 0 0 0 4px var(--color-success-200);
}
.btn-ghost-success {
    color: var(--color-success-700);
}
.btn-ghost-success:hover {
    background-color: var(--color-success-50);
    color: var(--color-success-800);
}
.btn-ghost-success:active,
.btn-ghost-success:focus-visible {
    box-shadow: 0 0 0 4px var(--color-success-100);
}
.btn-link-success {
    color: var(--color-success-700);
}
.btn-link-success:hover {
    text-decoration: underline;
    text-underline-offset: var(--size-1);
}
.btn-link-success:active,
.btn-link-success:focus-visible {
    box-shadow: 0 0 0 4px var(--color-gray-100);
}

/* Blue */
.btn-blue {
    color: var(--color-white);
    background-color: var(--color-blue-600);
    box-shadow: var(--shadow-xs);
}
.btn-blue:hover {
    background-color: var(--color-blue-700);
}
.btn-blue:active,
.btn-blue:focus-visible {
    box-shadow: 0 0 0 4px var(--color-blue-100);
}
.btn-soft-blue {
    color: var(--color-blue-700);
    background-color: var(--color-blue-50);
}
.btn-soft-blue:hover {
    background-color: var(--color-blue-100);
}
.btn-soft-blue:active,
.btn-soft-blue:focus-visible {
    box-shadow: 0 0 0 4px var(--color-blue-200);
}
.btn-ghost-blue {
    color: var(--color-blue-700);
}
.btn-ghost-blue:hover {
    background-color: var(--color-blue-50);
    color: var(--color-blue-800);
}
.btn-ghost-blue:active,
.btn-ghost-blue:focus-visible {
    box-shadow: 0 0 0 4px var(--color-blue-100);
}
.btn-link-blue {
    color: var(--color-blue-700);
}
.btn-link-blue:hover {
    text-decoration: underline;
    text-underline-offset: var(--size-1);
}
.btn-link-blue:active,
.btn-link-blue:focus-visible {
    box-shadow: 0 0 0 4px var(--color-gray-100);
}

/* Outline */
.btn-outline {
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-white);
    box-shadow: var(--shadow-xs);
}
.btn-outline:hover {
    background-color: var(--color-gray-50);
}
.btn-outline:active,
.btn-outline:focus-visible {
    box-shadow: 0 0 0 4px var(--color-gray-100);
}

/* Ghost */
.btn-ghost:hover {
    background-color: var(--color-gray-50);
}
.btn-ghost:active,
.btn-ghost:focus-visible {
    box-shadow: 0 0 0 4px var(--color-gray-100);
}

/* Link */
.btn-link:hover {
    text-decoration: underline;
    text-underline-offset: var(--size-1);
}
.btn-link:active,
.btn-link:focus-visible {
    box-shadow: 0 0 0 4px var(--color-gray-100);
}
/* end: Button */

/* start: Icons */
.icon {
    --icon-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-8);
    height: var(--size-8);
    border: none;
    outline: none;
    border-radius: var(--icon-radius);
    background-color: var(--icon-background);
    color: var(--icon-foreground);
}

/* Circle */
.icon-circle {
    border-radius: var(--radius-full);
}

/* Size */
.icon-sm {
    --icon-radius: var(--radius-sm);
    --icon-ring-size: 4px;
    width: var(--size-6);
    height: var(--size-6);
}
.icon-lg {
    --icon-radius: var(--radius-lg);
    --icon-ring-size: 12px;
    width: var(--size-10);
    height: var(--size-10);
}
.icon-xl {
    --icon-radius: var(--radius-xl);
    --icon-ring-size: 16px;
    width: var(--size-12);
    height: var(--size-12);
}

/* Outline */
.icon-outline {
    --icon-background: var(--color-white);
    --icon-foreground: var(--color-gray-700);
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-xs);
}

/* Primary */
.icon-primary {
    --icon-ring-background: var(--color-primary-500);
    --icon-background: var(--color-primary-600);
    --icon-foreground: var(--color-white);
}
.icon-primary-soft {
    --icon-ring-background: var(--color-primary-50);
    --icon-background: var(--color-primary-100);
    --icon-foreground: var(--color-primary-700);
}

/* Gray */
.icon-gray {
    --icon-ring-background: var(--color-gray-500);
    --icon-background: var(--color-gray-600);
    --icon-foreground: var(--color-white);
}
.icon-gray-soft {
    --icon-ring-background: var(--color-gray-50);
    --icon-background: var(--color-gray-100);
    --icon-foreground: var(--color-gray-700);
}

/* Error */
.icon-error {
    --icon-ring-background: var(--color-error-500);
    --icon-background: var(--color-error-600);
    --icon-foreground: var(--color-white);
}
.icon-error-soft {
    --icon-ring-background: var(--color-error-50);
    --icon-background: var(--color-error-100);
    --icon-foreground: var(--color-error-700);
}

/* Warning */
.icon-warning {
    --icon-ring-background: var(--color-warning-500);
    --icon-background: var(--color-warning-600);
    --icon-foreground: var(--color-white);
}
.icon-warning-soft {
    --icon-ring-background: var(--color-warning-50);
    --icon-background: var(--color-warning-100);
    --icon-foreground: var(--color-warning-700);
}

/* Success */
.icon-success {
    --icon-ring-background: var(--color-success-500);
    --icon-background: var(--color-success-600);
    --icon-foreground: var(--color-white);
}
.icon-success-soft {
    --icon-ring-background: var(--color-success-50);
    --icon-background: var(--color-success-100);
    --icon-foreground: var(--color-success-700);
}

/* Ring */
.icon-ring {
    box-shadow: 0 0 0 var(--icon-ring-size, 8px) var(--icon-ring-background);
}

/* Glass */
.icon-glass {
    isolation: isolate;
    position: relative;
}
.icon-glass::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--icon-radius);
    backdrop-filter: var(--blur-md);
    border: 1px solid rgba(255, 255, 255, 0.6);
    background-color: rgba(255, 255, 255, 0.6);
    z-index: -1;
}
.icon-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--icon-radius);
    background-color: var(--icon-background);
    transform: rotateZ(15deg);
    transform-origin: right bottom;
    z-index: -2;
}
/* end: Icons */

/* start: Container */
.container-xl {
    max-width: var(--size-xl);
    width: 100%;
}
.container-lg {
    max-width: var(--size-lg);
    width: 100%;
}
.container-md {
    max-width: var(--size-md);
    width: 100%;
}
.container-sm {
    max-width: var(--size-sm);
    width: 100%;
}
/* end: Container */

/* start: Typography */
.text-xl {
    font-size: var(--text-xl-size);
    line-height: var(--text-xl-line);
}
.text-lg {
    font-size: var(--text-lg-size);
    line-height: var(--text-lg-line);
}
.text-md {
    font-size: var(--text-md-size);
    line-height: var(--text-md-line);
}
.text-sm {
    font-size: var(--text-sm-size);
    line-height: var(--text-sm-line);
}
.text-xs {
    font-size: var(--text-xs-size);
    line-height: var(--text-xs-line);
}
.text-display-2xl {
    font-size: var(--display-2xl-size);
    line-height: var(--display-2xl-line);
    letter-spacing: var(--display-2xl-tracking);
}
.text-display-xl {
    font-size: var(--display-xl-size);
    line-height: var(--display-xl-line);
    letter-spacing: var(--display-xl-tracking);
}
.text-display-lg {
    font-size: var(--display-lg-size);
    line-height: var(--display-lg-line);
    letter-spacing: var(--display-lg-tracking);
}
.text-display-md {
    font-size: var(--display-md-size);
    line-height: var(--display-md-line);
    letter-spacing: var(--display-md-tracking);
}
.text-display-sm {
    font-size: var(--display-sm-size);
    line-height: var(--display-sm-line);
}
.text-display-xs {
    font-size: var(--display-xs-size);
    line-height: var(--display-xs-line);
}
/* end: Typography */

/* start: Spacing */
/* Margin */
.m-1 {
    margin: var(--size-1);
}
.m-2 {
    margin: var(--size-2);
}
.m-3 {
    margin: var(--size-3);
}
.m-4 {
    margin: var(--size-4);
}
.m-5 {
    margin: var(--size-5);
}
.m-6 {
    margin: var(--size-6);
}
.m-8 {
    margin: var(--size-8);
}
.m-10 {
    margin: var(--size-10);
}
.m-12 {
    margin: var(--size-12);
}
.m-16 {
    margin: var(--size-16);
}
.m-20 {
    margin: var(--size-20);
}
.m-24 {
    margin: var(--size-24);
}
.m-32 {
    margin: var(--size-32);
}
.m-40 {
    margin: var(--size-40);
}
.m-48 {
    margin: var(--size-48);
}
.m-56 {
    margin: var(--size-56);
}
.m-64 {
    margin: var(--size-64);
}

/* Margin Top */
.mt-1 {
    margin-top: var(--size-1);
}
.mt-2 {
    margin-top: var(--size-2);
}
.mt-3 {
    margin-top: var(--size-3);
}
.mt-4 {
    margin-top: var(--size-4);
}
.mt-5 {
    margin-top: var(--size-5);
}
.mt-6 {
    margin-top: var(--size-6);
}
.mt-8 {
    margin-top: var(--size-8);
}
.mt-10 {
    margin-top: var(--size-10);
}
.mt-12 {
    margin-top: var(--size-12);
}
.mt-16 {
    margin-top: var(--size-16);
}
.mt-20 {
    margin-top: var(--size-20);
}
.mt-24 {
    margin-top: var(--size-24);
}
.mt-32 {
    margin-top: var(--size-32);
}
.mt-40 {
    margin-top: var(--size-40);
}
.mt-48 {
    margin-top: var(--size-48);
}
.mt-56 {
    margin-top: var(--size-56);
}
.mt-64 {
    margin-top: var(--size-64);
}

/* Margin Bottom */
.mb-1 {
    margin-bottom: var(--size-1);
}
.mb-2 {
    margin-bottom: var(--size-2);
}
.mb-3 {
    margin-bottom: var(--size-3);
}
.mb-4 {
    margin-bottom: var(--size-4);
}
.mb-5 {
    margin-bottom: var(--size-5);
}
.mb-6 {
    margin-bottom: var(--size-6);
}
.mb-8 {
    margin-bottom: var(--size-8);
}
.mb-10 {
    margin-bottom: var(--size-10);
}
.mb-12 {
    margin-bottom: var(--size-12);
}
.mb-16 {
    margin-bottom: var(--size-16);
}
.mb-20 {
    margin-bottom: var(--size-20);
}
.mb-24 {
    margin-bottom: var(--size-24);
}
.mb-32 {
    margin-bottom: var(--size-32);
}
.mb-40 {
    margin-bottom: var(--size-40);
}
.mb-48 {
    margin-bottom: var(--size-48);
}
.mb-56 {
    margin-bottom: var(--size-56);
}
.mb-64 {
    margin-bottom: var(--size-64);
}

/* Margin Left */
.ml-1 {
    margin-left: var(--size-1);
}
.ml-2 {
    margin-left: var(--size-2);
}
.ml-3 {
    margin-left: var(--size-3);
}
.ml-4 {
    margin-left: var(--size-4);
}
.ml-5 {
    margin-left: var(--size-5);
}
.ml-6 {
    margin-left: var(--size-6);
}
.ml-8 {
    margin-left: var(--size-8);
}
.ml-10 {
    margin-left: var(--size-10);
}
.ml-12 {
    margin-left: var(--size-12);
}
.ml-16 {
    margin-left: var(--size-16);
}
.ml-20 {
    margin-left: var(--size-20);
}
.ml-24 {
    margin-left: var(--size-24);
}
.ml-32 {
    margin-left: var(--size-32);
}
.ml-40 {
    margin-left: var(--size-40);
}
.ml-48 {
    margin-left: var(--size-48);
}
.ml-56 {
    margin-left: var(--size-56);
}
.ml-64 {
    margin-left: var(--size-64);
}

/* Margin Right */
.mr-1 {
    margin-right: var(--size-1);
}
.mr-2 {
    margin-right: var(--size-2);
}
.mr-3 {
    margin-right: var(--size-3);
}
.mr-4 {
    margin-right: var(--size-4);
}
.mr-5 {
    margin-right: var(--size-5);
}
.mr-6 {
    margin-right: var(--size-6);
}
.mr-8 {
    margin-right: var(--size-8);
}
.mr-10 {
    margin-right: var(--size-10);
}
.mr-12 {
    margin-right: var(--size-12);
}
.mr-16 {
    margin-right: var(--size-16);
}
.mr-20 {
    margin-right: var(--size-20);
}
.mr-24 {
    margin-right: var(--size-24);
}
.mr-32 {
    margin-right: var(--size-32);
}
.mr-40 {
    margin-right: var(--size-40);
}
.mr-48 {
    margin-right: var(--size-48);
}
.mr-56 {
    margin-right: var(--size-56);
}
.mr-64 {
    margin-right: var(--size-64);
}

/* Margin X (horizontal) */
.mx-1 {
    margin-left: var(--size-1);
    margin-right: var(--size-1);
}
.mx-2 {
    margin-left: var(--size-2);
    margin-right: var(--size-2);
}
.mx-3 {
    margin-left: var(--size-3);
    margin-right: var(--size-3);
}
.mx-4 {
    margin-left: var(--size-4);
    margin-right: var(--size-4);
}
.mx-5 {
    margin-left: var(--size-5);
    margin-right: var(--size-5);
}
.mx-6 {
    margin-left: var(--size-6);
    margin-right: var(--size-6);
}
.mx-8 {
    margin-left: var(--size-8);
    margin-right: var(--size-8);
}
.mx-10 {
    margin-left: var(--size-10);
    margin-right: var(--size-10);
}
.mx-12 {
    margin-left: var(--size-12);
    margin-right: var(--size-12);
}
.mx-16 {
    margin-left: var(--size-16);
    margin-right: var(--size-16);
}
.mx-20 {
    margin-left: var(--size-20);
    margin-right: var(--size-20);
}
.mx-24 {
    margin-left: var(--size-24);
    margin-right: var(--size-24);
}
.mx-32 {
    margin-left: var(--size-32);
    margin-right: var(--size-32);
}
.mx-40 {
    margin-left: var(--size-40);
    margin-right: var(--size-40);
}
.mx-48 {
    margin-left: var(--size-48);
    margin-right: var(--size-48);
}
.mx-56 {
    margin-left: var(--size-56);
    margin-right: var(--size-56);
}
.mx-64 {
    margin-left: var(--size-64);
    margin-right: var(--size-64);
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Margin Y (vertical) */
.my-1 {
    margin-top: var(--size-1);
    margin-bottom: var(--size-1);
}
.my-2 {
    margin-top: var(--size-2);
    margin-bottom: var(--size-2);
}
.my-3 {
    margin-top: var(--size-3);
    margin-bottom: var(--size-3);
}
.my-4 {
    margin-top: var(--size-4);
    margin-bottom: var(--size-4);
}
.my-5 {
    margin-top: var(--size-5);
    margin-bottom: var(--size-5);
}
.my-6 {
    margin-top: var(--size-6);
    margin-bottom: var(--size-6);
}
.my-8 {
    margin-top: var(--size-8);
    margin-bottom: var(--size-8);
}
.my-10 {
    margin-top: var(--size-10);
    margin-bottom: var(--size-10);
}
.my-12 {
    margin-top: var(--size-12);
    margin-bottom: var(--size-12);
}
.my-16 {
    margin-top: var(--size-16);
    margin-bottom: var(--size-16);
}
.my-20 {
    margin-top: var(--size-20);
    margin-bottom: var(--size-20);
}
.my-24 {
    margin-top: var(--size-24);
    margin-bottom: var(--size-24);
}
.my-32 {
    margin-top: var(--size-32);
    margin-bottom: var(--size-32);
}
.my-40 {
    margin-top: var(--size-40);
    margin-bottom: var(--size-40);
}
.my-48 {
    margin-top: var(--size-48);
    margin-bottom: var(--size-48);
}
.my-56 {
    margin-top: var(--size-56);
    margin-bottom: var(--size-56);
}
.my-64 {
    margin-top: var(--size-64);
    margin-bottom: var(--size-64);
}

/* Padding */
.p-1 {
    padding: var(--size-1);
}
.p-2 {
    padding: var(--size-2);
}
.p-3 {
    padding: var(--size-3);
}
.p-4 {
    padding: var(--size-4);
}
.p-5 {
    padding: var(--size-5);
}
.p-6 {
    padding: var(--size-6);
}
.p-8 {
    padding: var(--size-8);
}
.p-10 {
    padding: var(--size-10);
}
.p-12 {
    padding: var(--size-12);
}
.p-16 {
    padding: var(--size-16);
}
.p-20 {
    padding: var(--size-20);
}
.p-24 {
    padding: var(--size-24);
}
.p-32 {
    padding: var(--size-32);
}
.p-40 {
    padding: var(--size-40);
}
.p-48 {
    padding: var(--size-48);
}
.p-56 {
    padding: var(--size-56);
}
.p-64 {
    padding: var(--size-64);
}

/* Padding Top */
.pt-1 {
    padding-top: var(--size-1);
}
.pt-2 {
    padding-top: var(--size-2);
}
.pt-3 {
    padding-top: var(--size-3);
}
.pt-4 {
    padding-top: var(--size-4);
}
.pt-5 {
    padding-top: var(--size-5);
}
.pt-6 {
    padding-top: var(--size-6);
}
.pt-8 {
    padding-top: var(--size-8);
}
.pt-10 {
    padding-top: var(--size-10);
}
.pt-12 {
    padding-top: var(--size-12);
}
.pt-16 {
    padding-top: var(--size-16);
}
.pt-20 {
    padding-top: var(--size-20);
}
.pt-24 {
    padding-top: var(--size-24);
}
.pt-32 {
    padding-top: var(--size-32);
}
.pt-40 {
    padding-top: var(--size-40);
}
.pt-48 {
    padding-top: var(--size-48);
}
.pt-56 {
    padding-top: var(--size-56);
}
.pt-64 {
    padding-top: var(--size-64);
}

/* Padding Bottom */
.pb-1 {
    padding-bottom: var(--size-1);
}
.pb-2 {
    padding-bottom: var(--size-2);
}
.pb-3 {
    padding-bottom: var(--size-3);
}
.pb-4 {
    padding-bottom: var(--size-4);
}
.pb-5 {
    padding-bottom: var(--size-5);
}
.pb-6 {
    padding-bottom: var(--size-6);
}
.pb-8 {
    padding-bottom: var(--size-8);
}
.pb-10 {
    padding-bottom: var(--size-10);
}
.pb-12 {
    padding-bottom: var(--size-12);
}
.pb-16 {
    padding-bottom: var(--size-16);
}
.pb-20 {
    padding-bottom: var(--size-20);
}
.pb-24 {
    padding-bottom: var(--size-24);
}
.pb-32 {
    padding-bottom: var(--size-32);
}
.pb-40 {
    padding-bottom: var(--size-40);
}
.pb-48 {
    padding-bottom: var(--size-48);
}
.pb-56 {
    padding-bottom: var(--size-56);
}
.pb-64 {
    padding-bottom: var(--size-64);
}

/* Padding Left */
.pl-1 {
    padding-left: var(--size-1);
}
.pl-2 {
    padding-left: var(--size-2);
}
.pl-3 {
    padding-left: var(--size-3);
}
.pl-4 {
    padding-left: var(--size-4);
}
.pl-5 {
    padding-left: var(--size-5);
}
.pl-6 {
    padding-left: var(--size-6);
}
.pl-8 {
    padding-left: var(--size-8);
}
.pl-10 {
    padding-left: var(--size-10);
}
.pl-12 {
    padding-left: var(--size-12);
}
.pl-16 {
    padding-left: var(--size-16);
}
.pl-20 {
    padding-left: var(--size-20);
}
.pl-24 {
    padding-left: var(--size-24);
}
.pl-32 {
    padding-left: var(--size-32);
}
.pl-40 {
    padding-left: var(--size-40);
}
.pl-48 {
    padding-left: var(--size-48);
}
.pl-56 {
    padding-left: var(--size-56);
}
.pl-64 {
    padding-left: var(--size-64);
}

/* Padding Right */
.pr-1 {
    padding-right: var(--size-1);
}
.pr-2 {
    padding-right: var(--size-2);
}
.pr-3 {
    padding-right: var(--size-3);
}
.pr-4 {
    padding-right: var(--size-4);
}
.pr-5 {
    padding-right: var(--size-5);
}
.pr-6 {
    padding-right: var(--size-6);
}
.pr-8 {
    padding-right: var(--size-8);
}
.pr-10 {
    padding-right: var(--size-10);
}
.pr-12 {
    padding-right: var(--size-12);
}
.pr-16 {
    padding-right: var(--size-16);
}
.pr-20 {
    padding-right: var(--size-20);
}
.pr-24 {
    padding-right: var(--size-24);
}
.pr-32 {
    padding-right: var(--size-32);
}
.pr-40 {
    padding-right: var(--size-40);
}
.pr-48 {
    padding-right: var(--size-48);
}
.pr-56 {
    padding-right: var(--size-56);
}
.pr-64 {
    padding-right: var(--size-64);
}

/* Padding X (horizontal) */
.px-1 {
    padding-left: var(--size-1);
    padding-right: var(--size-1);
}
.px-2 {
    padding-left: var(--size-2);
    padding-right: var(--size-2);
}
.px-3 {
    padding-left: var(--size-3);
    padding-right: var(--size-3);
}
.px-4 {
    padding-left: var(--size-4);
    padding-right: var(--size-4);
}
.px-5 {
    padding-left: var(--size-5);
    padding-right: var(--size-5);
}
.px-6 {
    padding-left: var(--size-6);
    padding-right: var(--size-6);
}
.px-8 {
    padding-left: var(--size-8);
    padding-right: var(--size-8);
}
.px-10 {
    padding-left: var(--size-10);
    padding-right: var(--size-10);
}
.px-12 {
    padding-left: var(--size-12);
    padding-right: var(--size-12);
}
.px-16 {
    padding-left: var(--size-16);
    padding-right: var(--size-16);
}
.px-20 {
    padding-left: var(--size-20);
    padding-right: var(--size-20);
}
.px-24 {
    padding-left: var(--size-24);
    padding-right: var(--size-24);
}
.px-32 {
    padding-left: var(--size-32);
    padding-right: var(--size-32);
}
.px-40 {
    padding-left: var(--size-40);
    padding-right: var(--size-40);
}
.px-48 {
    padding-left: var(--size-48);
    padding-right: var(--size-48);
}
.px-56 {
    padding-left: var(--size-56);
    padding-right: var(--size-56);
}
.px-64 {
    padding-left: var(--size-64);
    padding-right: var(--size-64);
}

/* Padding Y (vertical) */
.py-1 {
    padding-top: var(--size-1);
    padding-bottom: var(--size-1);
}
.py-2 {
    padding-top: var(--size-2);
    padding-bottom: var(--size-2);
}
.py-3 {
    padding-top: var(--size-3);
    padding-bottom: var(--size-3);
}
.py-4 {
    padding-top: var(--size-4);
    padding-bottom: var(--size-4);
}
.py-5 {
    padding-top: var(--size-5);
    padding-bottom: var(--size-5);
}
.py-6 {
    padding-top: var(--size-6);
    padding-bottom: var(--size-6);
}
.py-8 {
    padding-top: var(--size-8);
    padding-bottom: var(--size-8);
}
.py-10 {
    padding-top: var(--size-10);
    padding-bottom: var(--size-10);
}
.py-12 {
    padding-top: var(--size-12);
    padding-bottom: var(--size-12);
}
.py-16 {
    padding-top: var(--size-16);
    padding-bottom: var(--size-16);
}
.py-20 {
    padding-top: var(--size-20);
    padding-bottom: var(--size-20);
}
.py-24 {
    padding-top: var(--size-24);
    padding-bottom: var(--size-24);
}
.py-32 {
    padding-top: var(--size-32);
    padding-bottom: var(--size-32);
}
.py-40 {
    padding-top: var(--size-40);
    padding-bottom: var(--size-40);
}
.py-48 {
    padding-top: var(--size-48);
    padding-bottom: var(--size-48);
}
.py-56 {
    padding-top: var(--size-56);
    padding-bottom: var(--size-56);
}
.py-64 {
    padding-top: var(--size-64);
    padding-bottom: var(--size-64);
}
/* end: Spacing */

/* start: Colors */
/* Background Colors */
.bg-white {
    background-color: var(--color-white);
}
.bg-black {
    background-color: var(--color-black);
}

.bg-gray-25 {
    background-color: var(--color-gray-25);
}
.bg-gray-50 {
    background-color: var(--color-gray-50);
}
.bg-gray-100 {
    background-color: var(--color-gray-100);
}
.bg-gray-200 {
    background-color: var(--color-gray-200);
}
.bg-gray-300 {
    background-color: var(--color-gray-300);
}
.bg-gray-400 {
    background-color: var(--color-gray-400);
}
.bg-gray-500 {
    background-color: var(--color-gray-500);
}
.bg-gray-600 {
    background-color: var(--color-gray-600);
}
.bg-gray-700 {
    background-color: var(--color-gray-700);
}
.bg-gray-800 {
    background-color: var(--color-gray-800);
}
.bg-gray-900 {
    background-color: var(--color-gray-900);
}

.bg-primary-25 {
    background-color: var(--color-primary-25);
}
.bg-primary-50 {
    background-color: var(--color-primary-50);
}
.bg-primary-100 {
    background-color: var(--color-primary-100);
}
.bg-primary-200 {
    background-color: var(--color-primary-200);
}
.bg-primary-300 {
    background-color: var(--color-primary-300);
}
.bg-primary-400 {
    background-color: var(--color-primary-400);
}
.bg-primary-500 {
    background-color: var(--color-primary-500);
}
.bg-primary-600 {
    background-color: var(--color-primary-600);
}
.bg-primary-700 {
    background-color: var(--color-primary-700);
}
.bg-primary-800 {
    background-color: var(--color-primary-800);
}
.bg-primary-900 {
    background-color: var(--color-primary-900);
}

.bg-error-25 {
    background-color: var(--color-error-25);
}
.bg-error-50 {
    background-color: var(--color-error-50);
}
.bg-error-100 {
    background-color: var(--color-error-100);
}
.bg-error-200 {
    background-color: var(--color-error-200);
}
.bg-error-300 {
    background-color: var(--color-error-300);
}
.bg-error-400 {
    background-color: var(--color-error-400);
}
.bg-error-500 {
    background-color: var(--color-error-500);
}
.bg-error-600 {
    background-color: var(--color-error-600);
}
.bg-error-700 {
    background-color: var(--color-error-700);
}
.bg-error-800 {
    background-color: var(--color-error-800);
}
.bg-error-900 {
    background-color: var(--color-error-900);
}

.bg-success-25 {
    background-color: var(--color-success-25);
}
.bg-success-50 {
    background-color: var(--color-success-50);
}
.bg-success-100 {
    background-color: var(--color-success-100);
}
.bg-success-200 {
    background-color: var(--color-success-200);
}
.bg-success-300 {
    background-color: var(--color-success-300);
}
.bg-success-400 {
    background-color: var(--color-success-400);
}
.bg-success-500 {
    background-color: var(--color-success-500);
}
.bg-success-600 {
    background-color: var(--color-success-600);
}
.bg-success-700 {
    background-color: var(--color-success-700);
}
.bg-success-800 {
    background-color: var(--color-success-800);
}
.bg-success-900 {
    background-color: var(--color-success-900);
}

.bg-warning-25 {
    background-color: var(--color-warning-25);
}
.bg-warning-50 {
    background-color: var(--color-warning-50);
}
.bg-warning-100 {
    background-color: var(--color-warning-100);
}
.bg-warning-200 {
    background-color: var(--color-warning-200);
}
.bg-warning-300 {
    background-color: var(--color-warning-300);
}
.bg-warning-400 {
    background-color: var(--color-warning-400);
}
.bg-warning-500 {
    background-color: var(--color-warning-500);
}
.bg-warning-600 {
    background-color: var(--color-warning-600);
}
.bg-warning-700 {
    background-color: var(--color-warning-700);
}
.bg-warning-800 {
    background-color: var(--color-warning-800);
}
.bg-warning-900 {
    background-color: var(--color-warning-900);
}

.bg-blue-25 {
    background-color: var(--color-blue-25);
}
.bg-blue-50 {
    background-color: var(--color-blue-50);
}
.bg-blue-100 {
    background-color: var(--color-blue-100);
}
.bg-blue-200 {
    background-color: var(--color-blue-200);
}
.bg-blue-300 {
    background-color: var(--color-blue-300);
}
.bg-blue-400 {
    background-color: var(--color-blue-400);
}
.bg-blue-500 {
    background-color: var(--color-blue-500);
}
.bg-blue-600 {
    background-color: var(--color-blue-600);
}
.bg-blue-700 {
    background-color: var(--color-blue-700);
}
.bg-blue-800 {
    background-color: var(--color-blue-800);
}
.bg-blue-900 {
    background-color: var(--color-blue-900);
}

/* Text Colors */
.text-muted {
    color: var(--color-gray-500);
}

.text-white {
    color: var(--color-white);
}
.text-black {
    color: var(--color-black);
}

.text-gray-25 {
    color: var(--color-gray-25);
}
.text-gray-50 {
    color: var(--color-gray-50);
}
.text-gray-100 {
    color: var(--color-gray-100);
}
.text-gray-200 {
    color: var(--color-gray-200);
}
.text-gray-300 {
    color: var(--color-gray-300);
}
.text-gray-400 {
    color: var(--color-gray-400);
}
.text-gray-500 {
    color: var(--color-gray-500);
}
.text-gray-600 {
    color: var(--color-gray-600);
}
.text-gray-700 {
    color: var(--color-gray-700);
}
.text-gray-800 {
    color: var(--color-gray-800);
}
.text-gray-900 {
    color: var(--color-gray-900);
}

.text-primary-25 {
    color: var(--color-primary-25);
}
.text-primary-50 {
    color: var(--color-primary-50);
}
.text-primary-100 {
    color: var(--color-primary-100);
}
.text-primary-200 {
    color: var(--color-primary-200);
}
.text-primary-300 {
    color: var(--color-primary-300);
}
.text-primary-400 {
    color: var(--color-primary-400);
}
.text-primary-500 {
    color: var(--color-primary-500);
}
.text-primary-600 {
    color: var(--color-primary-600);
}
.text-primary-700 {
    color: var(--color-primary-700);
}
.text-primary-800 {
    color: var(--color-primary-800);
}
.text-primary-900 {
    color: var(--color-primary-900);
}

.text-error-25 {
    color: var(--color-error-25);
}
.text-error-50 {
    color: var(--color-error-50);
}
.text-error-100 {
    color: var(--color-error-100);
}
.text-error-200 {
    color: var(--color-error-200);
}
.text-error-300 {
    color: var(--color-error-300);
}
.text-error-400 {
    color: var(--color-error-400);
}
.text-error-500 {
    color: var(--color-error-500);
}
.text-error-600 {
    color: var(--color-error-600);
}
.text-error-700 {
    color: var(--color-error-700);
}
.text-error-800 {
    color: var(--color-error-800);
}
.text-error-900 {
    color: var(--color-error-900);
}

.text-success-25 {
    color: var(--color-success-25);
}
.text-success-50 {
    color: var(--color-success-50);
}
.text-success-100 {
    color: var(--color-success-100);
}
.text-success-200 {
    color: var(--color-success-200);
}
.text-success-300 {
    color: var(--color-success-300);
}
.text-success-400 {
    color: var(--color-success-400);
}
.text-success-500 {
    color: var(--color-success-500);
}
.text-success-600 {
    color: var(--color-success-600);
}
.text-success-700 {
    color: var(--color-success-700);
}
.text-success-800 {
    color: var(--color-success-800);
}
.text-success-900 {
    color: var(--color-success-900);
}

.text-warning-25 {
    color: var(--color-warning-25);
}
.text-warning-50 {
    color: var(--color-warning-50);
}
.text-warning-100 {
    color: var(--color-warning-100);
}
.text-warning-200 {
    color: var(--color-warning-200);
}
.text-warning-300 {
    color: var(--color-warning-300);
}
.text-warning-400 {
    color: var(--color-warning-400);
}
.text-warning-500 {
    color: var(--color-warning-500);
}
.text-warning-600 {
    color: var(--color-warning-600);
}
.text-warning-700 {
    color: var(--color-warning-700);
}
.text-warning-800 {
    color: var(--color-warning-800);
}
.text-warning-900 {
    color: var(--color-warning-900);
}

.text-blue-25 {
    color: var(--color-blue-25);
}
.text-blue-50 {
    color: var(--color-blue-50);
}
.text-blue-100 {
    color: var(--color-blue-100);
}
.text-blue-200 {
    color: var(--color-blue-200);
}
.text-blue-300 {
    color: var(--color-blue-300);
}
.text-blue-400 {
    color: var(--color-blue-400);
}
.text-blue-500 {
    color: var(--color-blue-500);
}
.text-blue-600 {
    color: var(--color-blue-600);
}
.text-blue-700 {
    color: var(--color-blue-700);
}
.text-blue-800 {
    color: var(--color-blue-800);
}
.text-blue-900 {
    color: var(--color-blue-900);
}

/* Border Colors */
.border-white {
    border-color: var(--color-white);
}
.border-black {
    border-color: var(--color-black);
}

.border-gray-25 {
    border-color: var(--color-gray-25);
}
.border-gray-50 {
    border-color: var(--color-gray-50);
}
.border-gray-100 {
    border-color: var(--color-gray-100);
}
.border-gray-200 {
    border-color: var(--color-gray-200);
}
.border-gray-300 {
    border-color: var(--color-gray-300);
}
.border-gray-400 {
    border-color: var(--color-gray-400);
}
.border-gray-500 {
    border-color: var(--color-gray-500);
}
.border-gray-600 {
    border-color: var(--color-gray-600);
}
.border-gray-700 {
    border-color: var(--color-gray-700);
}
.border-gray-800 {
    border-color: var(--color-gray-800);
}
.border-gray-900 {
    border-color: var(--color-gray-900);
}

.border-primary-25 {
    border-color: var(--color-primary-25);
}
.border-primary-50 {
    border-color: var(--color-primary-50);
}
.border-primary-100 {
    border-color: var(--color-primary-100);
}
.border-primary-200 {
    border-color: var(--color-primary-200);
}
.border-primary-300 {
    border-color: var(--color-primary-300);
}
.border-primary-400 {
    border-color: var(--color-primary-400);
}
.border-primary-500 {
    border-color: var(--color-primary-500);
}
.border-primary-600 {
    border-color: var(--color-primary-600);
}
.border-primary-700 {
    border-color: var(--color-primary-700);
}
.border-primary-800 {
    border-color: var(--color-primary-800);
}
.border-primary-900 {
    border-color: var(--color-primary-900);
}

.border-error-300 {
    border-color: var(--color-error-300);
}
.border-success-300 {
    border-color: var(--color-success-300);
}
.border-warning-300 {
    border-color: var(--color-warning-300);
}
.border-blue-300 {
    border-color: var(--color-blue-300);
}
/* end: Colors */

/* start: Font Weight */
.font-normal {
    font-weight: var(--font-normal);
}
.font-medium {
    font-weight: var(--font-medium);
}
.font-semibold {
    font-weight: var(--font-semibold);
}
.font-bold {
    font-weight: var(--font-bold);
}
/* end: Font Weight */

/* start: Shadows */
.shadow-xs {
    box-shadow: var(--shadow-xs);
}
.shadow-sm {
    box-shadow: var(--shadow-sm);
}
.shadow-md {
    box-shadow: var(--shadow-md);
}
.shadow-lg {
    box-shadow: var(--shadow-lg);
}
.shadow-xl {
    box-shadow: var(--shadow-xl);
}
.shadow-2xl {
    box-shadow: var(--shadow-2xl);
}
.shadow-3xl {
    box-shadow: var(--shadow-3xl);
}
.shadow-none {
    box-shadow: none;
}
/* end: Shadows */

/* start: Border Radius */
.rounded-none {
    border-radius: 0;
}
.rounded-sm {
    border-radius: var(--radius-sm);
}
.rounded-md {
    border-radius: var(--radius-md);
}
.rounded-lg {
    border-radius: var(--radius-lg);
}
.rounded-xl {
    border-radius: var(--radius-xl);
}
.rounded-full {
    border-radius: var(--radius-full);
}
/* end: Border Radius */

/* start: Border Width */
.border {
    border-width: 1px;
    border-style: solid;
}
.border-0 {
    border-width: 0;
}
.border-2 {
    border-width: 2px;
    border-style: solid;
}
.border-4 {
    border-width: 4px;
    border-style: solid;
}
.border-8 {
    border-width: 8px;
    border-style: solid;
}

.border-t {
    border-top-width: 1px;
    border-top-style: solid;
}
.border-r {
    border-right-width: 1px;
    border-right-style: solid;
}
.border-b {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
.border-l {
    border-left-width: 1px;
    border-left-style: solid;
}
/* end: Border Width */

/* start: Display */
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.inline {
    display: inline;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.grid {
    display: grid;
}
.inline-grid {
    display: inline-grid;
}
.hidden {
    display: none;
}
/* end: Display */

/* start: Flexbox */
.flex-row {
    flex-direction: row;
}
.flex-row-reverse {
    flex-direction: row-reverse;
}
.flex-col {
    flex-direction: column;
}
.flex-col-reverse {
    flex-direction: column-reverse;
}

.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}
.items-center {
    align-items: center;
}
.items-baseline {
    align-items: baseline;
}
.items-stretch {
    align-items: stretch;
}

.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}
.justify-evenly {
    justify-content: space-evenly;
}

.flex-1 {
    flex: 1 1 0%;
}
.flex-auto {
    flex: 1 1 auto;
}
.flex-initial {
    flex: 0 1 auto;
}
.flex-none {
    flex: none;
}

.shrink-0 {
    flex-shrink: 0;
}
.shrink {
    flex-shrink: 1;
}
.grow-0 {
    flex-grow: 0;
}
.grow {
    flex-grow: 1;
}
/* end: Flexbox */

/* start: Width */
.w-auto {
    width: auto;
}
.w-full {
    width: 100%;
}
.w-screen {
    width: 100vw;
}
.w-1 {
    width: var(--size-1);
}
.w-2 {
    width: var(--size-2);
}
.w-3 {
    width: var(--size-3);
}
.w-4 {
    width: var(--size-4);
}
.w-5 {
    width: var(--size-5);
}
.w-6 {
    width: var(--size-6);
}
.w-8 {
    width: var(--size-8);
}
.w-10 {
    width: var(--size-10);
}
.w-12 {
    width: var(--size-12);
}
.w-16 {
    width: var(--size-16);
}
.w-20 {
    width: var(--size-20);
}
.w-24 {
    width: var(--size-24);
}
.w-32 {
    width: var(--size-32);
}
.w-40 {
    width: var(--size-40);
}
.w-48 {
    width: var(--size-48);
}
.w-56 {
    width: var(--size-56);
}
.w-64 {
    width: var(--size-64);
}
/* end: Width */

/* start: Height */
.h-auto {
    height: auto;
}
.h-full {
    height: 100%;
}
.h-screen {
    height: 100vh;
}
.h-1 {
    height: var(--size-1);
}
.h-2 {
    height: var(--size-2);
}
.h-3 {
    height: var(--size-3);
}
.h-4 {
    height: var(--size-4);
}
.h-5 {
    height: var(--size-5);
}
.h-6 {
    height: var(--size-6);
}
.h-8 {
    height: var(--size-8);
}
.h-10 {
    height: var(--size-10);
}
.h-12 {
    height: var(--size-12);
}
.h-16 {
    height: var(--size-16);
}
.h-20 {
    height: var(--size-20);
}
.h-24 {
    height: var(--size-24);
}
.h-32 {
    height: var(--size-32);
}
.h-40 {
    height: var(--size-40);
}
.h-48 {
    height: var(--size-48);
}
.h-56 {
    height: var(--size-56);
}
.h-64 {
    height: var(--size-64);
}
/* end: Height */

/* start: Position */
.static {
    position: static;
}
.fixed {
    position: fixed;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.sticky {
    position: sticky;
}
/* end: Position */

/* start: Positioning */
.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.top-0 {
    top: 0;
}
.right-0 {
    right: 0;
}
.bottom-0 {
    bottom: 0;
}
.left-0 {
    left: 0;
}
/* end: Positioning */

/* start: Overflow */
.overflow-auto {
    overflow: auto;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-visible {
    overflow: visible;
}
.overflow-scroll {
    overflow: scroll;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-auto {
    overflow-y: auto;
}
/* end: Overflow */

/* start: Text Align */
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-justify {
    text-align: justify;
}
/* end: Text Align */

/* start: Opacity */
.opacity-0 {
    opacity: 0;
}
.opacity-25 {
    opacity: 0.25;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-75 {
    opacity: 0.75;
}
.opacity-100 {
    opacity: 1;
}
/* end: Opacity */

/* start: Cursor */
.cursor-auto {
    cursor: auto;
}
.cursor-pointer {
    cursor: pointer;
}
.cursor-not-allowed {
    cursor: not-allowed;
}
/* end: Cursor */

/* start: Backdrop Blur */
.backdrop-blur-sm {
    backdrop-filter: var(--blur-sm);
}
.backdrop-blur-md {
    backdrop-filter: var(--blur-md);
}
.backdrop-blur-lg {
    backdrop-filter: var(--blur-lg);
}
.backdrop-blur-xl {
    backdrop-filter: var(--blur-xl);
}
/* end: Backdrop Blur */


@media (max-width: 768px) {
    .datepicker-sidebar,
    .datepicker-right {
        display: none;
    }
    .datepicker-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .datepicker-date-item {
        width: 100%;
        min-width: 0;
        font-size: var(--text-sm-size);
    }
    .datepicker-action > * {
        width: 100%;
        min-width: 0;
    }
}

/* toast */
.notyf__toast{
    border-radius: var(--radius-lg)!important;
}

/* ── Modal ───────────────────────────────────────────────────────── */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.5);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-backdrop.open {
    display: flex;
}

.modal {
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    animation: modal-in 0.18s ease;
}

@keyframes modal-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.modal-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-error-50);
    margin: 24px auto 0;
}

.modal-icon-wrap .material-symbols-rounded {
    font-size: 24px;
    color: var(--color-error-600);
}

.modal-body {
    padding: 16px 24px 24px;
    text-align: center;
}

.modal-title {
    font-size: var(--text-md-size);
    font-weight: var(--font-semibold);
    color: var(--color-gray-900);
    margin-bottom: 6px;
}

.modal-desc {
    font-size: var(--text-sm-size);
    color: var(--color-gray-500);
    line-height: 1.6;
}

.modal-footer {
    display: flex;
    gap: 12px;
    padding: 0 24px 24px;
}

.modal-footer .btn-modal {
    flex: 1;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-family: 'Poppins', sans-serif;
    font-size: var(--text-sm-size);
    font-weight: var(--font-medium);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.btn-modal-cancel {
    background: var(--color-white);
    color: var(--color-gray-700);
    border-color: var(--color-gray-300);
}

.btn-modal-cancel:hover { background: var(--color-gray-50); }

.btn-modal-confirm {
    background: var(--color-error-600);
    color: #fff;
    border-color: var(--color-error-600);
}

.btn-modal-confirm:hover { background: var(--color-error-700); border-color: var(--color-error-700); }
.btn-modal-confirm:disabled { opacity: 0.65; cursor: not-allowed; }