/*
    Systembubble Design Library v0.2.0
    Copyright 2025 The SystemBubble Team
    All rights reserved.
*/

/*
    Base       < 576px     Mobile
    SM         ≥ 576px     Large mobile / small devices
    MD         ≥ 768px     Tablet
    LG         ≥ 992px     Small desktop
    XL         ≥ 1200px    Desktop
    XXL        ≥ 1400px    Large desktop
*/
/* SM — 576px */
@media (min-width: 576px) {
}

/* MD — 768px */
@media (min-width: 768px) {
}

/* LG — 992px */
@media (min-width: 992px) {
}

/* XL — 1200px */
@media (min-width: 1200px) {
}

/* XXL — 1400px */
@media (min-width: 1400px) {
}


:root {
    /* Slate */
    --sb-slate-50: hsl(215 25% 97%);
    --sb-slate-100: hsl(215 22% 93%);
    --sb-slate-150: hsl(215 21% 89.5%);
    --sb-slate-200: hsl(215 20% 86%);
    --sb-slate-250: hsl(215 19% 80%);
    --sb-slate-300: hsl(215 18% 74%);
    --sb-slate-350: hsl(215 17% 67%);
    --sb-slate-400: hsl(215 16% 60%);
    --sb-slate-450: hsl(215 15.5% 54%);
    --sb-slate-500: hsl(215 15% 48%);
    --sb-slate-550: hsl(215 16% 43%);
    --sb-slate-600: hsl(215 17% 38%);
    --sb-slate-650: hsl(215 18% 34%);
    --sb-slate-700: hsl(215 19% 30%);
    --sb-slate-750: hsl(215 20% 26%);
    --sb-slate-800: hsl(215 21% 22%);
    --sb-slate-850: hsl(215 22.5% 18.5%);
    --sb-slate-900: hsl(215 24% 15%);
    --sb-slate-950: hsl(215 28% 9%);

    /* Gray */
    --sb-gray-50: hsl(220 14% 97%);
    --sb-gray-100: hsl(220 12% 93%);
    --sb-gray-150: hsl(220 11% 89.5%);
    --sb-gray-200: hsl(220 10% 86%);
    --sb-gray-250: hsl(220 9% 80%);
    --sb-gray-300: hsl(220 8% 74%);
    --sb-gray-350: hsl(220 7.5% 67%);
    --sb-gray-400: hsl(220 7% 60%);
    --sb-gray-450: hsl(220 6.5% 54%);
    --sb-gray-500: hsl(220 6% 48%);
    --sb-gray-550: hsl(220 6.5% 43%);
    --sb-gray-600: hsl(220 7% 38%);
    --sb-gray-650: hsl(220 7.5% 34%);
    --sb-gray-700: hsl(220 8% 30%);
    --sb-gray-750: hsl(220 8.5% 26%);
    --sb-gray-800: hsl(220 9% 22%);
    --sb-gray-850: hsl(220 9.5% 18.5%);
    --sb-gray-900: hsl(220 10% 15%);
    --sb-gray-950: hsl(220 12% 9%);

    /* Zinc */
    --sb-zinc-50: hsl(240 8% 97%);
    --sb-zinc-100: hsl(240 7% 93%);
    --sb-zinc-150: hsl(240 6.5% 89.5%);
    --sb-zinc-200: hsl(240 6% 86%);
    --sb-zinc-250: hsl(240 5.5% 80%);
    --sb-zinc-300: hsl(240 5% 74%);
    --sb-zinc-350: hsl(240 5% 67%);
    --sb-zinc-400: hsl(240 5% 60%);
    --sb-zinc-450: hsl(240 4.5% 54%);
    --sb-zinc-500: hsl(240 4% 48%);
    --sb-zinc-550: hsl(240 4.5% 43%);
    --sb-zinc-600: hsl(240 5% 38%);
    --sb-zinc-650: hsl(240 5.5% 34%);
    --sb-zinc-700: hsl(240 6% 30%);
    --sb-zinc-750: hsl(240 6.5% 26%);
    --sb-zinc-800: hsl(240 7% 22%);
    --sb-zinc-850: hsl(240 7.5% 18.5%);
    --sb-zinc-900: hsl(240 8% 15%);
    --sb-zinc-950: hsl(240 10% 9%);

    /* Neutral */
    --sb-neutral-50: hsl(0 0% 98%);
    --sb-neutral-100: hsl(0 0% 94%);
    --sb-neutral-150: hsl(0 0% 90.5%);
    --sb-neutral-200: hsl(0 0% 87%);
    --sb-neutral-250: hsl(0 0% 81%);
    --sb-neutral-300: hsl(0 0% 75%);
    --sb-neutral-350: hsl(0 0% 68%);
    --sb-neutral-400: hsl(0 0% 61%);
    --sb-neutral-450: hsl(0 0% 55%);
    --sb-neutral-500: hsl(0 0% 49%);
    --sb-neutral-550: hsl(0 0% 44%);
    --sb-neutral-600: hsl(0 0% 39%);
    --sb-neutral-650: hsl(0 0% 35%);
    --sb-neutral-700: hsl(0 0% 31%);
    --sb-neutral-750: hsl(0 0% 27%);
    --sb-neutral-800: hsl(0 0% 23%);
    --sb-neutral-850: hsl(0 0% 19%);
    --sb-neutral-900: hsl(0 0% 15%);
    --sb-neutral-950: hsl(0 0% 8%);

    /* Stone */
    --sb-stone-50: hsl(35 12% 97%);
    --sb-stone-100: hsl(35 10% 93%);
    --sb-stone-150: hsl(35 9.5% 89.5%);
    --sb-stone-200: hsl(35 9% 86%);
    --sb-stone-250: hsl(35 8.5% 80%);
    --sb-stone-300: hsl(35 8% 74%);
    --sb-stone-350: hsl(35 8% 67%);
    --sb-stone-400: hsl(35 8% 60%);
    --sb-stone-450: hsl(35 7.5% 54%);
    --sb-stone-500: hsl(35 7% 48%);
    --sb-stone-550: hsl(35 7.5% 43%);
    --sb-stone-600: hsl(35 8% 38%);
    --sb-stone-650: hsl(35 8.5% 34%);
    --sb-stone-700: hsl(35 9% 30%);
    --sb-stone-750: hsl(35 9.5% 26%);
    --sb-stone-800: hsl(35 10% 22%);
    --sb-stone-850: hsl(35 11% 18.5%);
    --sb-stone-900: hsl(35 12% 15%);
    --sb-stone-950: hsl(35 15% 9%);

    /* Red */
    --sb-red-50: hsl(0 100% 97%);
    --sb-red-100: hsl(0 95% 93%);
    --sb-red-150: hsl(0 93.5% 89.5%);
    --sb-red-200: hsl(0 92% 86%);
    --sb-red-250: hsl(0 91% 81%);
    --sb-red-300: hsl(0 90% 76%);
    --sb-red-350: hsl(0 89% 71%);
    --sb-red-400: hsl(0 88% 66%);
    --sb-red-450: hsl(0 87% 61%);
    --sb-red-500: hsl(0 86% 56%);
    --sb-red-550: hsl(0 85% 51.5%);
    --sb-red-600: hsl(0 84% 47%);
    --sb-red-650: hsl(0 83% 43%);
    --sb-red-700: hsl(0 82% 39%);
    --sb-red-750: hsl(0 81% 35%);
    --sb-red-800: hsl(0 80% 31%);
    --sb-red-850: hsl(0 79% 27%);
    --sb-red-900: hsl(0 78% 23%);
    --sb-red-950: hsl(0 76% 15%);

    /* Orange */
    --sb-orange-50: hsl(28 100% 97%);
    --sb-orange-100: hsl(28 97% 93%);
    --sb-orange-150: hsl(28 96% 89.5%);
    --sb-orange-200: hsl(28 95% 86%);
    --sb-orange-250: hsl(28 94% 81.5%);
    --sb-orange-300: hsl(28 93% 77%);
    --sb-orange-350: hsl(28 92% 72%);
    --sb-orange-400: hsl(28 91% 67%);
    --sb-orange-450: hsl(28 90% 62%);
    --sb-orange-500: hsl(28 89% 57%);
    --sb-orange-550: hsl(28 88% 52.5%);
    --sb-orange-600: hsl(28 87% 48%);
    --sb-orange-650: hsl(28 86% 44%);
    --sb-orange-700: hsl(28 85% 40%);
    --sb-orange-750: hsl(28 84% 36%);
    --sb-orange-800: hsl(28 83% 32%);
    --sb-orange-850: hsl(28 82% 28%);
    --sb-orange-900: hsl(28 81% 24%);
    --sb-orange-950: hsl(28 79% 16%);

    /* Amber */
    --sb-amber-50: hsl(42 100% 97%);
    --sb-amber-100: hsl(42 98% 93%);
    --sb-amber-150: hsl(42 97% 89.5%);
    --sb-amber-200: hsl(42 96% 86%);
    --sb-amber-250: hsl(42 95% 81.5%);
    --sb-amber-300: hsl(42 94% 77%);
    --sb-amber-350: hsl(42 93% 72%);
    --sb-amber-400: hsl(42 92% 67%);
    --sb-amber-450: hsl(42 91% 62%);
    --sb-amber-500: hsl(42 90% 57%);
    --sb-amber-550: hsl(42 89% 52.5%);
    --sb-amber-600: hsl(42 88% 48%);
    --sb-amber-650: hsl(42 87% 44%);
    --sb-amber-700: hsl(42 86% 40%);
    --sb-amber-750: hsl(42 85% 36%);
    --sb-amber-800: hsl(42 84% 32%);
    --sb-amber-850: hsl(42 83% 28%);
    --sb-amber-900: hsl(42 82% 24%);
    --sb-amber-950: hsl(42 80% 16%);

    /* Yellow */
    --sb-yellow-50: hsl(54 100% 97%);
    --sb-yellow-100: hsl(54 98% 93%);
    --sb-yellow-150: hsl(54 97% 89.5%);
    --sb-yellow-200: hsl(54 96% 86%);
    --sb-yellow-250: hsl(54 95% 81.5%);
    --sb-yellow-300: hsl(54 94% 77%);
    --sb-yellow-350: hsl(54 93% 72%);
    --sb-yellow-400: hsl(54 92% 67%);
    --sb-yellow-450: hsl(54 91% 62%);
    --sb-yellow-500: hsl(54 90% 57%);
    --sb-yellow-550: hsl(54 89% 52.5%);
    --sb-yellow-600: hsl(54 88% 48%);
    --sb-yellow-650: hsl(54 87% 44%);
    --sb-yellow-700: hsl(54 86% 40%);
    --sb-yellow-750: hsl(54 85% 36%);
    --sb-yellow-800: hsl(54 84% 32%);
    --sb-yellow-850: hsl(54 83% 28%);
    --sb-yellow-900: hsl(54 82% 24%);
    --sb-yellow-950: hsl(54 80% 16%);

    /* Lime */
    --sb-lime-50: hsl(84 100% 97%);
    --sb-lime-100: hsl(84 97% 93%);
    --sb-lime-150: hsl(84 96% 89.5%);
    --sb-lime-200: hsl(84 95% 86%);
    --sb-lime-250: hsl(84 94% 81.5%);
    --sb-lime-300: hsl(84 93% 77%);
    --sb-lime-350: hsl(84 92% 72%);
    --sb-lime-400: hsl(84 91% 67%);
    --sb-lime-450: hsl(84 90% 62%);
    --sb-lime-500: hsl(84 89% 57%);
    --sb-lime-550: hsl(84 88% 52.5%);
    --sb-lime-600: hsl(84 87% 48%);
    --sb-lime-650: hsl(84 86% 44%);
    --sb-lime-700: hsl(84 85% 40%);
    --sb-lime-750: hsl(84 84% 36%);
    --sb-lime-800: hsl(84 83% 32%);
    --sb-lime-850: hsl(84 82% 28%);
    --sb-lime-900: hsl(84 81% 24%);
    --sb-lime-950: hsl(84 79% 16%);

    /* Green */
    --sb-green-50: hsl(142 100% 97%);
    --sb-green-100: hsl(142 97% 93%);
    --sb-green-150: hsl(142 96% 89.5%);
    --sb-green-200: hsl(142 95% 86%);
    --sb-green-250: hsl(142 94% 81.5%);
    --sb-green-300: hsl(142 93% 77%);
    --sb-green-350: hsl(142 92% 72%);
    --sb-green-400: hsl(142 91% 67%);
    --sb-green-450: hsl(142 90% 62%);
    --sb-green-500: hsl(142 89% 57%);
    --sb-green-550: hsl(142 88% 52.5%);
    --sb-green-600: hsl(142 87% 48%);
    --sb-green-650: hsl(142 86% 44%);
    --sb-green-700: hsl(142 85% 40%);
    --sb-green-750: hsl(142 84% 36%);
    --sb-green-800: hsl(142 83% 32%);
    --sb-green-850: hsl(142 82% 28%);
    --sb-green-900: hsl(142 81% 24%);
    --sb-green-950: hsl(142 79% 16%);

    /* Emerald */
    --sb-emerald-50: hsl(160 100% 97%);
    --sb-emerald-100: hsl(160 97% 93%);
    --sb-emerald-150: hsl(160 96% 89.5%);
    --sb-emerald-200: hsl(160 95% 86%);
    --sb-emerald-250: hsl(160 94% 81.5%);
    --sb-emerald-300: hsl(160 93% 77%);
    --sb-emerald-350: hsl(160 92% 72%);
    --sb-emerald-400: hsl(160 91% 67%);
    --sb-emerald-450: hsl(160 90% 62%);
    --sb-emerald-500: hsl(160 89% 57%);
    --sb-emerald-550: hsl(160 88% 52.5%);
    --sb-emerald-600: hsl(160 87% 48%);
    --sb-emerald-650: hsl(160 86% 44%);
    --sb-emerald-700: hsl(160 85% 40%);
    --sb-emerald-750: hsl(160 84% 36%);
    --sb-emerald-800: hsl(160 83% 32%);
    --sb-emerald-850: hsl(160 82% 28%);
    --sb-emerald-900: hsl(160 81% 24%);
    --sb-emerald-950: hsl(160 79% 16%);

    /* Teal */
    --sb-teal-50: hsl(174 100% 97%);
    --sb-teal-100: hsl(174 97% 93%);
    --sb-teal-150: hsl(174 96% 89.5%);
    --sb-teal-200: hsl(174 95% 86%);
    --sb-teal-250: hsl(174 94% 81.5%);
    --sb-teal-300: hsl(174 93% 77%);
    --sb-teal-350: hsl(174 92% 72%);
    --sb-teal-400: hsl(174 91% 67%);
    --sb-teal-450: hsl(174 90% 62%);
    --sb-teal-500: hsl(174 89% 57%);
    --sb-teal-550: hsl(174 88% 52.5%);
    --sb-teal-600: hsl(174 87% 48%);
    --sb-teal-650: hsl(174 86% 44%);
    --sb-teal-700: hsl(174 85% 40%);
    --sb-teal-750: hsl(174 84% 36%);
    --sb-teal-800: hsl(174 83% 32%);
    --sb-teal-850: hsl(174 82% 28%);
    --sb-teal-900: hsl(174 81% 24%);
    --sb-teal-950: hsl(174 79% 16%);

    /* Cyan */
    --sb-cyan-50: hsl(192 100% 97%);
    --sb-cyan-100: hsl(192 97% 93%);
    --sb-cyan-150: hsl(192 96% 89.5%);
    --sb-cyan-200: hsl(192 95% 86%);
    --sb-cyan-250: hsl(192 94% 81.5%);
    --sb-cyan-300: hsl(192 93% 77%);
    --sb-cyan-350: hsl(192 92% 72%);
    --sb-cyan-400: hsl(192 91% 67%);
    --sb-cyan-450: hsl(192 90% 62%);
    --sb-cyan-500: hsl(192 89% 57%);
    --sb-cyan-550: hsl(192 88% 52.5%);
    --sb-cyan-600: hsl(192 87% 48%);
    --sb-cyan-650: hsl(192 86% 44%);
    --sb-cyan-700: hsl(192 85% 40%);
    --sb-cyan-750: hsl(192 84% 36%);
    --sb-cyan-800: hsl(192 83% 32%);
    --sb-cyan-850: hsl(192 82% 28%);
    --sb-cyan-900: hsl(192 81% 24%);
    --sb-cyan-950: hsl(192 79% 16%);

    /* Sky */
    --sb-sky-50: hsl(204 100% 97%);
    --sb-sky-100: hsl(204 97% 93%);
    --sb-sky-150: hsl(204 96% 89.5%);
    --sb-sky-200: hsl(204 95% 86%);
    --sb-sky-250: hsl(204 94% 81.5%);
    --sb-sky-300: hsl(204 93% 77%);
    --sb-sky-350: hsl(204 92% 72%);
    --sb-sky-400: hsl(204 91% 67%);
    --sb-sky-450: hsl(204 90% 62%);
    --sb-sky-500: hsl(204 89% 57%);
    --sb-sky-550: hsl(204 88% 52.5%);
    --sb-sky-600: hsl(204 87% 48%);
    --sb-sky-650: hsl(204 86% 44%);
    --sb-sky-700: hsl(204 85% 40%);
    --sb-sky-750: hsl(204 84% 36%);
    --sb-sky-800: hsl(204 83% 32%);
    --sb-sky-850: hsl(204 82% 28%);
    --sb-sky-900: hsl(204 81% 24%);
    --sb-sky-950: hsl(204 79% 16%);

    /* Blue */
    --sb-blue-50: hsl(217 100% 97%);
    --sb-blue-100: hsl(217 97% 93%);
    --sb-blue-150: hsl(217 96% 89.5%);
    --sb-blue-200: hsl(217 95% 86%);
    --sb-blue-250: hsl(217 94% 81.5%);
    --sb-blue-300: hsl(217 93% 77%);
    --sb-blue-350: hsl(217 92% 72%);
    --sb-blue-400: hsl(217 91% 67%);
    --sb-blue-450: hsl(217 90% 62%);
    --sb-blue-500: hsl(217 89% 57%);
    --sb-blue-550: hsl(217 88% 52.5%);
    --sb-blue-600: hsl(217 87% 48%);
    --sb-blue-650: hsl(217 86% 44%);
    --sb-blue-700: hsl(217 85% 40%);
    --sb-blue-750: hsl(217 84% 36%);
    --sb-blue-800: hsl(217 83% 32%);
    --sb-blue-850: hsl(217 82% 28%);
    --sb-blue-900: hsl(217 81% 24%);
    --sb-blue-950: hsl(217 79% 16%);

    /* Indigo */
    --sb-indigo-50: hsl(235 100% 97%);
    --sb-indigo-100: hsl(235 97% 93%);
    --sb-indigo-150: hsl(235 96% 89.5%);
    --sb-indigo-200: hsl(235 95% 86%);
    --sb-indigo-250: hsl(235 94% 81.5%);
    --sb-indigo-300: hsl(235 93% 77%);
    --sb-indigo-350: hsl(235 92% 72%);
    --sb-indigo-400: hsl(235 91% 67%);
    --sb-indigo-450: hsl(235 90% 62%);
    --sb-indigo-500: hsl(235 89% 57%);
    --sb-indigo-550: hsl(235 88% 52.5%);
    --sb-indigo-600: hsl(235 87% 48%);
    --sb-indigo-650: hsl(235 86% 44%);
    --sb-indigo-700: hsl(235 85% 40%);
    --sb-indigo-750: hsl(235 84% 36%);
    --sb-indigo-800: hsl(235 83% 32%);
    --sb-indigo-850: hsl(235 82% 28%);
    --sb-indigo-900: hsl(235 81% 24%);
    --sb-indigo-950: hsl(235 79% 16%);

    /* Violet */
    --sb-violet-50: hsl(255 100% 97%);
    --sb-violet-100: hsl(255 97% 93%);
    --sb-violet-150: hsl(255 96% 89.5%);
    --sb-violet-200: hsl(255 95% 86%);
    --sb-violet-250: hsl(255 94% 81.5%);
    --sb-violet-300: hsl(255 93% 77%);
    --sb-violet-350: hsl(255 92% 72%);
    --sb-violet-400: hsl(255 91% 67%);
    --sb-violet-450: hsl(255 90% 62%);
    --sb-violet-500: hsl(255 89% 57%);
    --sb-violet-550: hsl(255 88% 52.5%);
    --sb-violet-600: hsl(255 87% 48%);
    --sb-violet-650: hsl(255 86% 44%);
    --sb-violet-700: hsl(255 85% 40%);
    --sb-violet-750: hsl(255 84% 36%);
    --sb-violet-800: hsl(255 83% 32%);
    --sb-violet-850: hsl(255 82% 28%);
    --sb-violet-900: hsl(255 81% 24%);
    --sb-violet-950: hsl(255 79% 16%);

    /* Purple */
    --sb-purple-50: hsl(275 100% 97%);
    --sb-purple-100: hsl(275 97% 93%);
    --sb-purple-150: hsl(275 96% 89.5%);
    --sb-purple-200: hsl(275 95% 86%);
    --sb-purple-250: hsl(275 94% 81.5%);
    --sb-purple-300: hsl(275 93% 77%);
    --sb-purple-350: hsl(275 92% 72%);
    --sb-purple-400: hsl(275 91% 67%);
    --sb-purple-450: hsl(275 90% 62%);
    --sb-purple-500: hsl(275 89% 57%);
    --sb-purple-550: hsl(275 88% 52.5%);
    --sb-purple-600: hsl(275 87% 48%);
    --sb-purple-650: hsl(275 86% 44%);
    --sb-purple-700: hsl(275 85% 40%);
    --sb-purple-750: hsl(275 84% 36%);
    --sb-purple-800: hsl(275 83% 32%);
    --sb-purple-850: hsl(275 82% 28%);
    --sb-purple-900: hsl(275 81% 24%);
    --sb-purple-950: hsl(275 79% 16%);

    /* Fuchsia */
    --sb-fuchsia-50: hsl(300 100% 97%);
    --sb-fuchsia-100: hsl(300 97% 93%);
    --sb-fuchsia-150: hsl(300 96% 89.5%);
    --sb-fuchsia-200: hsl(300 95% 86%);
    --sb-fuchsia-250: hsl(300 94% 81.5%);
    --sb-fuchsia-300: hsl(300 93% 77%);
    --sb-fuchsia-350: hsl(300 92% 72%);
    --sb-fuchsia-400: hsl(300 91% 67%);
    --sb-fuchsia-450: hsl(300 90% 62%);
    --sb-fuchsia-500: hsl(300 89% 57%);
    --sb-fuchsia-550: hsl(300 88% 52.5%);
    --sb-fuchsia-600: hsl(300 87% 48%);
    --sb-fuchsia-650: hsl(300 86% 44%);
    --sb-fuchsia-700: hsl(300 85% 40%);
    --sb-fuchsia-750: hsl(300 84% 36%);
    --sb-fuchsia-800: hsl(300 83% 32%);
    --sb-fuchsia-850: hsl(300 82% 28%);
    --sb-fuchsia-900: hsl(300 81% 24%);
    --sb-fuchsia-950: hsl(300 79% 16%);

    /* Pink */
    --sb-pink-50: hsl(330 100% 97%);
    --sb-pink-100: hsl(330 97% 93%);
    --sb-pink-150: hsl(330 96% 89.5%);
    --sb-pink-200: hsl(330 95% 86%);
    --sb-pink-250: hsl(330 94% 81.5%);
    --sb-pink-300: hsl(330 93% 77%);
    --sb-pink-350: hsl(330 92% 72%);
    --sb-pink-400: hsl(330 91% 67%);
    --sb-pink-450: hsl(330 90% 62%);
    --sb-pink-500: hsl(330 89% 57%);
    --sb-pink-550: hsl(330 88% 52.5%);
    --sb-pink-600: hsl(330 87% 48%);
    --sb-pink-650: hsl(330 86% 44%);
    --sb-pink-700: hsl(330 85% 40%);
    --sb-pink-750: hsl(330 84% 36%);
    --sb-pink-800: hsl(330 83% 32%);
    --sb-pink-850: hsl(330 82% 28%);
    --sb-pink-900: hsl(330 81% 24%);
    --sb-pink-950: hsl(330 79% 16%);

    /* Rose */
    --sb-rose-50: hsl(345 100% 97%);
    --sb-rose-100: hsl(345 97% 93%);
    --sb-rose-150: hsl(345 96% 89.5%);
    --sb-rose-200: hsl(345 95% 86%);
    --sb-rose-250: hsl(345 94% 81.5%);
    --sb-rose-300: hsl(345 93% 77%);
    --sb-rose-350: hsl(345 92% 72%);
    --sb-rose-400: hsl(345 91% 67%);
    --sb-rose-450: hsl(345 90% 62%);
    --sb-rose-500: hsl(345 89% 57%);
    --sb-rose-550: hsl(345 88% 52.5%);
    --sb-rose-600: hsl(345 87% 48%);
    --sb-rose-650: hsl(345 86% 44%);
    --sb-rose-700: hsl(345 85% 40%);
    --sb-rose-750: hsl(345 84% 36%);
    --sb-rose-800: hsl(345 83% 32%);
    --sb-rose-850: hsl(345 82% 28%);
    --sb-rose-900: hsl(345 81% 24%);
    --sb-rose-950: hsl(345 79% 16%);

}


/*
    SystemBubble Design System
    Typography Atomic Utilities

    Naming:

    sb-[property]-[value]

    Decimal point:
    p

    Negative:
    n

    Examples:

    sb-fs-3p2
    sb-fw-700
    sb-ls-n0p15

    Mobile first
    Desktop breakpoint: 768px (md)
*/


/*
    Font Size Utilities

    Mobile first
*/


.sb-fs-0p5 {
    font-size: 0.5rem !important;
}

.sb-fs-0p625 {
    font-size: 0.625rem !important;
}

.sb-fs-0p75 {
    font-size: 0.75rem !important;
}

.sb-fs-0p875 {
    font-size: 0.875rem !important;
}

.sb-fs-1 {
    font-size: 1rem !important;
}

.sb-fs-1p125 {
    font-size: 1.125rem !important;
}

.sb-fs-1p25 {
    font-size: 1.25rem !important;
}

.sb-fs-1p375 {
    font-size: 1.375rem !important;
}

.sb-fs-1p5 {
    font-size: 1.5rem !important;
}

.sb-fs-1p625 {
    font-size: 1.625rem !important;
}

.sb-fs-1p75 {
    font-size: 1.75rem !important;
}

.sb-fs-1p875 {
    font-size: 1.875rem !important;
}

.sb-fs-2 {
    font-size: 2rem !important;
}

.sb-fs-2p125 {
    font-size: 2.125rem !important;
}

.sb-fs-2p25 {
    font-size: 2.25rem !important;
}

.sb-fs-2p375 {
    font-size: 2.375rem !important;
}

.sb-fs-2p5 {
    font-size: 2.5rem !important;
}

.sb-fs-2p625 {
    font-size: 2.625rem !important;
}

.sb-fs-2p75 {
    font-size: 2.75rem !important;
}

.sb-fs-2p875 {
    font-size: 2.875rem !important;
}

.sb-fs-3 {
    font-size: 3rem !important;
}

.sb-fs-3p125 {
    font-size: 3.125rem !important;
}

.sb-fs-3p2 {
    font-size: 3.2rem !important;
}

.sb-fs-3p25 {
    font-size: 3.25rem !important;
}

.sb-fs-3p375 {
    font-size: 3.375rem !important;
}

.sb-fs-3p5 {
    font-size: 3.5rem !important;
}

.sb-fs-3p625 {
    font-size: 3.625rem !important;
}

.sb-fs-3p75 {
    font-size: 3.75rem !important;
}

.sb-fs-3p875 {
    font-size: 3.875rem !important;
}

.sb-fs-4 {
    font-size: 4rem !important;
}

.sb-fs-4p25 {
    font-size: 4.25rem !important;
}

.sb-fs-4p5 {
    font-size: 4.5rem !important;
}

.sb-fs-4p75 {
    font-size: 4.75rem !important;
}

.sb-fs-5 {
    font-size: 5rem !important;
}

.sb-fs-5p5 {
    font-size: 5.5rem !important;
}

.sb-fs-6 {
    font-size: 6rem !important;
}

.sb-fs-6p5 {
    font-size: 6.5rem !important;
}

.sb-fs-7 {
    font-size: 7rem !important;
}

.sb-fs-7p5 {
    font-size: 7.5rem !important;
}

.sb-fs-8 {
    font-size: 8rem !important;
}

.sb-fs-9 {
    font-size: 9rem !important;
}

.sb-fs-10 {
    font-size: 10rem !important;
}


/*
    Small
*/

@media (min-width: 576px) {

    .sb-sm-fs-0p5 {
        font-size: 0.5rem !important;
    }

    .sb-sm-fs-0p625 {
        font-size: 0.625rem !important;
    }

    .sb-sm-fs-0p75 {
        font-size: 0.75rem !important;
    }

    .sb-sm-fs-0p875 {
        font-size: 0.875rem !important;
    }

    .sb-sm-fs-1 {
        font-size: 1rem !important;
    }

    .sb-sm-fs-1p125 {
        font-size: 1.125rem !important;
    }

    .sb-sm-fs-1p25 {
        font-size: 1.25rem !important;
    }

    .sb-sm-fs-1p375 {
        font-size: 1.375rem !important;
    }

    .sb-sm-fs-1p5 {
        font-size: 1.5rem !important;
    }

    .sb-sm-fs-1p625 {
        font-size: 1.625rem !important;
    }

    .sb-sm-fs-1p75 {
        font-size: 1.75rem !important;
    }

    .sb-sm-fs-1p875 {
        font-size: 1.875rem !important;
    }

    .sb-sm-fs-2 {
        font-size: 2rem !important;
    }

    .sb-sm-fs-2p125 {
        font-size: 2.125rem !important;
    }

    .sb-sm-fs-2p25 {
        font-size: 2.25rem !important;
    }

    .sb-sm-fs-2p375 {
        font-size: 2.375rem !important;
    }

    .sb-sm-fs-2p5 {
        font-size: 2.5rem !important;
    }

    .sb-sm-fs-2p625 {
        font-size: 2.625rem !important;
    }

    .sb-sm-fs-2p75 {
        font-size: 2.75rem !important;
    }

    .sb-sm-fs-2p875 {
        font-size: 2.875rem !important;
    }

    .sb-sm-fs-3 {
        font-size: 3rem !important;
    }

    .sb-sm-fs-3p125 {
        font-size: 3.125rem !important;
    }

    .sb-sm-fs-3p2 {
        font-size: 3.2rem !important;
    }

    .sb-sm-fs-3p25 {
        font-size: 3.25rem !important;
    }

    .sb-sm-fs-3p375 {
        font-size: 3.375rem !important;
    }

    .sb-sm-fs-3p5 {
        font-size: 3.5rem !important;
    }

    .sb-sm-fs-3p625 {
        font-size: 3.625rem !important;
    }

    .sb-sm-fs-3p75 {
        font-size: 3.75rem !important;
    }

    .sb-sm-fs-3p875 {
        font-size: 3.875rem !important;
    }

    .sb-sm-fs-4 {
        font-size: 4rem !important;
    }

    .sb-sm-fs-4p25 {
        font-size: 4.25rem !important;
    }

    .sb-sm-fs-4p5 {
        font-size: 4.5rem !important;
    }

    .sb-sm-fs-4p75 {
        font-size: 4.75rem !important;
    }

    .sb-sm-fs-5 {
        font-size: 5rem !important;
    }

    .sb-sm-fs-5p5 {
        font-size: 5.5rem !important;
    }

    .sb-sm-fs-6 {
        font-size: 6rem !important;
    }

    .sb-sm-fs-6p5 {
        font-size: 6.5rem !important;
    }

    .sb-sm-fs-7 {
        font-size: 7rem !important;
    }

    .sb-sm-fs-7p5 {
        font-size: 7.5rem !important;
    }

    .sb-sm-fs-8 {
        font-size: 8rem !important;
    }

    .sb-sm-fs-9 {
        font-size: 9rem !important;
    }

    .sb-sm-fs-10 {
        font-size: 10rem !important;
    }
}


/*
    Medium
*/

@media (min-width: 768px) {

    .sb-md-fs-0p5 {
        font-size: 0.5rem !important;
    }

    .sb-md-fs-0p625 {
        font-size: 0.625rem !important;
    }

    .sb-md-fs-0p75 {
        font-size: 0.75rem !important;
    }

    .sb-md-fs-0p875 {
        font-size: 0.875rem !important;
    }

    .sb-md-fs-1 {
        font-size: 1rem !important;
    }

    .sb-md-fs-1p125 {
        font-size: 1.125rem !important;
    }

    .sb-md-fs-1p25 {
        font-size: 1.25rem !important;
    }

    .sb-md-fs-1p375 {
        font-size: 1.375rem !important;
    }

    .sb-md-fs-1p5 {
        font-size: 1.5rem !important;
    }

    .sb-md-fs-1p625 {
        font-size: 1.625rem !important;
    }

    .sb-md-fs-1p75 {
        font-size: 1.75rem !important;
    }

    .sb-md-fs-1p875 {
        font-size: 1.875rem !important;
    }

    .sb-md-fs-2 {
        font-size: 2rem !important;
    }

    .sb-md-fs-2p125 {
        font-size: 2.125rem !important;
    }

    .sb-md-fs-2p25 {
        font-size: 2.25rem !important;
    }

    .sb-md-fs-2p375 {
        font-size: 2.375rem !important;
    }

    .sb-md-fs-2p5 {
        font-size: 2.5rem !important;
    }

    .sb-md-fs-2p625 {
        font-size: 2.625rem !important;
    }

    .sb-md-fs-2p75 {
        font-size: 2.75rem !important;
    }

    .sb-md-fs-2p875 {
        font-size: 2.875rem !important;
    }

    .sb-md-fs-3 {
        font-size: 3rem !important;
    }

    .sb-md-fs-3p125 {
        font-size: 3.125rem !important;
    }

    .sb-md-fs-3p2 {
        font-size: 3.2rem !important;
    }

    .sb-md-fs-3p25 {
        font-size: 3.25rem !important;
    }

    .sb-md-fs-3p375 {
        font-size: 3.375rem !important;
    }

    .sb-md-fs-3p5 {
        font-size: 3.5rem !important;
    }

    .sb-md-fs-3p625 {
        font-size: 3.625rem !important;
    }

    .sb-md-fs-3p75 {
        font-size: 3.75rem !important;
    }

    .sb-md-fs-3p875 {
        font-size: 3.875rem !important;
    }

    .sb-md-fs-4 {
        font-size: 4rem !important;
    }

    .sb-md-fs-4p25 {
        font-size: 4.25rem !important;
    }

    .sb-md-fs-4p5 {
        font-size: 4.5rem !important;
    }

    .sb-md-fs-4p75 {
        font-size: 4.75rem !important;
    }

    .sb-md-fs-5 {
        font-size: 5rem !important;
    }

    .sb-md-fs-5p5 {
        font-size: 5.5rem !important;
    }

    .sb-md-fs-6 {
        font-size: 6rem !important;
    }

    .sb-md-fs-6p5 {
        font-size: 6.5rem !important;
    }

    .sb-md-fs-7 {
        font-size: 7rem !important;
    }

    .sb-md-fs-7p5 {
        font-size: 7.5rem !important;
    }

    .sb-md-fs-8 {
        font-size: 8rem !important;
    }

    .sb-md-fs-9 {
        font-size: 9rem !important;
    }

    .sb-md-fs-10 {
        font-size: 10rem !important;
    }
}


/*
    Large
*/

@media (min-width: 992px) {

    .sb-lg-fs-0p5 {
        font-size: 0.5rem !important;
    }

    .sb-lg-fs-0p625 {
        font-size: 0.625rem !important;
    }

    .sb-lg-fs-0p75 {
        font-size: 0.75rem !important;
    }

    .sb-lg-fs-0p875 {
        font-size: 0.875rem !important;
    }

    .sb-lg-fs-1 {
        font-size: 1rem !important;
    }

    .sb-lg-fs-1p125 {
        font-size: 1.125rem !important;
    }

    .sb-lg-fs-1p25 {
        font-size: 1.25rem !important;
    }

    .sb-lg-fs-1p375 {
        font-size: 1.375rem !important;
    }

    .sb-lg-fs-1p5 {
        font-size: 1.5rem !important;
    }

    .sb-lg-fs-1p625 {
        font-size: 1.625rem !important;
    }

    .sb-lg-fs-1p75 {
        font-size: 1.75rem !important;
    }

    .sb-lg-fs-1p875 {
        font-size: 1.875rem !important;
    }

    .sb-lg-fs-2 {
        font-size: 2rem !important;
    }

    .sb-lg-fs-2p125 {
        font-size: 2.125rem !important;
    }

    .sb-lg-fs-2p25 {
        font-size: 2.25rem !important;
    }

    .sb-lg-fs-2p375 {
        font-size: 2.375rem !important;
    }

    .sb-lg-fs-2p5 {
        font-size: 2.5rem !important;
    }

    .sb-lg-fs-2p625 {
        font-size: 2.625rem !important;
    }

    .sb-lg-fs-2p75 {
        font-size: 2.75rem !important;
    }

    .sb-lg-fs-2p875 {
        font-size: 2.875rem !important;
    }

    .sb-lg-fs-3 {
        font-size: 3rem !important;
    }

    .sb-lg-fs-3p125 {
        font-size: 3.125rem !important;
    }

    .sb-lg-fs-3p2 {
        font-size: 3.2rem !important;
    }

    .sb-lg-fs-3p25 {
        font-size: 3.25rem !important;
    }

    .sb-lg-fs-3p375 {
        font-size: 3.375rem !important;
    }

    .sb-lg-fs-3p5 {
        font-size: 3.5rem !important;
    }

    .sb-lg-fs-3p625 {
        font-size: 3.625rem !important;
    }

    .sb-lg-fs-3p75 {
        font-size: 3.75rem !important;
    }

    .sb-lg-fs-3p875 {
        font-size: 3.875rem !important;
    }

    .sb-lg-fs-4 {
        font-size: 4rem !important;
    }

    .sb-lg-fs-4p25 {
        font-size: 4.25rem !important;
    }

    .sb-lg-fs-4p5 {
        font-size: 4.5rem !important;
    }

    .sb-lg-fs-4p75 {
        font-size: 4.75rem !important;
    }

    .sb-lg-fs-5 {
        font-size: 5rem !important;
    }

    .sb-lg-fs-5p5 {
        font-size: 5.5rem !important;
    }

    .sb-lg-fs-6 {
        font-size: 6rem !important;
    }

    .sb-lg-fs-6p5 {
        font-size: 6.5rem !important;
    }

    .sb-lg-fs-7 {
        font-size: 7rem !important;
    }

    .sb-lg-fs-7p5 {
        font-size: 7.5rem !important;
    }

    .sb-lg-fs-8 {
        font-size: 8rem !important;
    }

    .sb-lg-fs-9 {
        font-size: 9rem !important;
    }

    .sb-lg-fs-10 {
        font-size: 10rem !important;
    }
}


/*
    Extra Large
*/

@media (min-width: 1200px) {

    .sb-xl-fs-0p5 {
        font-size: 0.5rem !important;
    }

    .sb-xl-fs-0p625 {
        font-size: 0.625rem !important;
    }

    .sb-xl-fs-0p75 {
        font-size: 0.75rem !important;
    }

    .sb-xl-fs-0p875 {
        font-size: 0.875rem !important;
    }

    .sb-xl-fs-1 {
        font-size: 1rem !important;
    }

    .sb-xl-fs-1p125 {
        font-size: 1.125rem !important;
    }

    .sb-xl-fs-1p25 {
        font-size: 1.25rem !important;
    }

    .sb-xl-fs-1p375 {
        font-size: 1.375rem !important;
    }

    .sb-xl-fs-1p5 {
        font-size: 1.5rem !important;
    }

    .sb-xl-fs-1p625 {
        font-size: 1.625rem !important;
    }

    .sb-xl-fs-1p75 {
        font-size: 1.75rem !important;
    }

    .sb-xl-fs-1p875 {
        font-size: 1.875rem !important;
    }

    .sb-xl-fs-2 {
        font-size: 2rem !important;
    }

    .sb-xl-fs-2p125 {
        font-size: 2.125rem !important;
    }

    .sb-xl-fs-2p25 {
        font-size: 2.25rem !important;
    }

    .sb-xl-fs-2p375 {
        font-size: 2.375rem !important;
    }

    .sb-xl-fs-2p5 {
        font-size: 2.5rem !important;
    }

    .sb-xl-fs-2p625 {
        font-size: 2.625rem !important;
    }

    .sb-xl-fs-2p75 {
        font-size: 2.75rem !important;
    }

    .sb-xl-fs-2p875 {
        font-size: 2.875rem !important;
    }

    .sb-xl-fs-3 {
        font-size: 3rem !important;
    }

    .sb-xl-fs-3p125 {
        font-size: 3.125rem !important;
    }

    .sb-xl-fs-3p2 {
        font-size: 3.2rem !important;
    }

    .sb-xl-fs-3p25 {
        font-size: 3.25rem !important;
    }

    .sb-xl-fs-3p375 {
        font-size: 3.375rem !important;
    }

    .sb-xl-fs-3p5 {
        font-size: 3.5rem !important;
    }

    .sb-xl-fs-3p625 {
        font-size: 3.625rem !important;
    }

    .sb-xl-fs-3p75 {
        font-size: 3.75rem !important;
    }

    .sb-xl-fs-3p875 {
        font-size: 3.875rem !important;
    }

    .sb-xl-fs-4 {
        font-size: 4rem !important;
    }

    .sb-xl-fs-4p25 {
        font-size: 4.25rem !important;
    }

    .sb-xl-fs-4p5 {
        font-size: 4.5rem !important;
    }

    .sb-xl-fs-4p75 {
        font-size: 4.75rem !important;
    }

    .sb-xl-fs-5 {
        font-size: 5rem !important;
    }

    .sb-xl-fs-5p5 {
        font-size: 5.5rem !important;
    }

    .sb-xl-fs-6 {
        font-size: 6rem !important;
    }

    .sb-xl-fs-6p5 {
        font-size: 6.5rem !important;
    }

    .sb-xl-fs-7 {
        font-size: 7rem !important;
    }

    .sb-xl-fs-7p5 {
        font-size: 7.5rem !important;
    }

    .sb-xl-fs-8 {
        font-size: 8rem !important;
    }

    .sb-xl-fs-9 {
        font-size: 9rem !important;
    }

    .sb-xl-fs-10 {
        font-size: 10rem !important;
    }
}


/*
    Extra Extra Large
*/

@media (min-width: 1400px) {

    .sb-xxl-fs-0p5 {
        font-size: 0.5rem !important;
    }

    .sb-xxl-fs-0p625 {
        font-size: 0.625rem !important;
    }

    .sb-xxl-fs-0p75 {
        font-size: 0.75rem !important;
    }

    .sb-xxl-fs-0p875 {
        font-size: 0.875rem !important;
    }

    .sb-xxl-fs-1 {
        font-size: 1rem !important;
    }

    .sb-xxl-fs-1p125 {
        font-size: 1.125rem !important;
    }

    .sb-xxl-fs-1p25 {
        font-size: 1.25rem !important;
    }

    .sb-xxl-fs-1p375 {
        font-size: 1.375rem !important;
    }

    .sb-xxl-fs-1p5 {
        font-size: 1.5rem !important;
    }

    .sb-xxl-fs-1p625 {
        font-size: 1.625rem !important;
    }

    .sb-xxl-fs-1p75 {
        font-size: 1.75rem !important;
    }

    .sb-xxl-fs-1p875 {
        font-size: 1.875rem !important;
    }

    .sb-xxl-fs-2 {
        font-size: 2rem !important;
    }

    .sb-xxl-fs-2p125 {
        font-size: 2.125rem !important;
    }

    .sb-xxl-fs-2p25 {
        font-size: 2.25rem !important;
    }

    .sb-xxl-fs-2p375 {
        font-size: 2.375rem !important;
    }

    .sb-xxl-fs-2p5 {
        font-size: 2.5rem !important;
    }

    .sb-xxl-fs-2p625 {
        font-size: 2.625rem !important;
    }

    .sb-xxl-fs-2p75 {
        font-size: 2.75rem !important;
    }

    .sb-xxl-fs-2p875 {
        font-size: 2.875rem !important;
    }

    .sb-xxl-fs-3 {
        font-size: 3rem !important;
    }

    .sb-xxl-fs-3p125 {
        font-size: 3.125rem !important;
    }

    .sb-xxl-fs-3p2 {
        font-size: 3.2rem !important;
    }

    .sb-xxl-fs-3p25 {
        font-size: 3.25rem !important;
    }

    .sb-xxl-fs-3p375 {
        font-size: 3.375rem !important;
    }

    .sb-xxl-fs-3p5 {
        font-size: 3.5rem !important;
    }

    .sb-xxl-fs-3p625 {
        font-size: 3.625rem !important;
    }

    .sb-xxl-fs-3p75 {
        font-size: 3.75rem !important;
    }

    .sb-xxl-fs-3p875 {
        font-size: 3.875rem !important;
    }

    .sb-xxl-fs-4 {
        font-size: 4rem !important;
    }

    .sb-xxl-fs-4p25 {
        font-size: 4.25rem !important;
    }

    .sb-xxl-fs-4p5 {
        font-size: 4.5rem !important;
    }

    .sb-xxl-fs-4p75 {
        font-size: 4.75rem !important;
    }

    .sb-xxl-fs-5 {
        font-size: 5rem !important;
    }

    .sb-xxl-fs-5p5 {
        font-size: 5.5rem !important;
    }

    .sb-xxl-fs-6 {
        font-size: 6rem !important;
    }

    .sb-xxl-fs-6p5 {
        font-size: 6.5rem !important;
    }

    .sb-xxl-fs-7 {
        font-size: 7rem !important;
    }

    .sb-xxl-fs-7p5 {
        font-size: 7.5rem !important;
    }

    .sb-xxl-fs-8 {
        font-size: 8rem !important;
    }

    .sb-xxl-fs-9 {
        font-size: 9rem !important;
    }

    .sb-xxl-fs-10 {
        font-size: 10rem !important;
    }
}



/*
    Font Weight

    Unit: unitless
*/


/*
    Font Weight Utilities
*/

.sb-fw-100 {
    font-weight: 100 !important;
}

.sb-fw-150 {
    font-weight: 150 !important;
}

.sb-fw-200 {
    font-weight: 200 !important;
}

.sb-fw-250 {
    font-weight: 250 !important;
}

.sb-fw-300 {
    font-weight: 300 !important;
}

.sb-fw-350 {
    font-weight: 350 !important;
}

.sb-fw-400 {
    font-weight: 400 !important;
}

.sb-fw-450 {
    font-weight: 450 !important;
}

.sb-fw-500 {
    font-weight: 500 !important;
}

.sb-fw-550 {
    font-weight: 550 !important;
}

.sb-fw-600 {
    font-weight: 600 !important;
}

.sb-fw-650 {
    font-weight: 650 !important;
}

.sb-fw-700 {
    font-weight: 700 !important;
}

.sb-fw-750 {
    font-weight: 750 !important;
}

.sb-fw-800 {
    font-weight: 800 !important;
}

.sb-fw-850 {
    font-weight: 850 !important;
}

.sb-fw-900 {
    font-weight: 900 !important;
}

.sb-fw-950 {
    font-weight: 950 !important;
}

.sb-fw-1000 {
    font-weight: 1000 !important;
}


/*
    Font Weight Keywords
*/

.sb-fw-normal {
    font-weight: normal !important;
}

.sb-fw-bold {
    font-weight: bold !important;
}

.sb-fw-bolder {
    font-weight: bolder !important;
}

.sb-fw-lighter {
    font-weight: lighter !important;
}


/*
    Letter Spacing Utilities

    Unit: rem

    Negative:
    n = negative

    Decimal:
    p = decimal point
*/

.sb-ls-n0p005 {
    letter-spacing: -0.005rem !important;
}

.sb-ls-n0p01 {
    letter-spacing: -0.01rem !important;
}

.sb-ls-n0p015 {
    letter-spacing: -0.015rem !important;
}

.sb-ls-n0p02 {
    letter-spacing: -0.02rem !important;
}

.sb-ls-n0p025 {
    letter-spacing: -0.025rem !important;
}

.sb-ls-n0p03 {
    letter-spacing: -0.03rem !important;
}

.sb-ls-n0p035 {
    letter-spacing: -0.035rem !important;
}

.sb-ls-n0p04 {
    letter-spacing: -0.04rem !important;
}

.sb-ls-n0p045 {
    letter-spacing: -0.045rem !important;
}

.sb-ls-n0p05 {
    letter-spacing: -0.05rem !important;
}

.sb-ls-n0p06 {
    letter-spacing: -0.06rem !important;
}

.sb-ls-n0p07 {
    letter-spacing: -0.07rem !important;
}

.sb-ls-n0p08 {
    letter-spacing: -0.08rem !important;
}

.sb-ls-n0p09 {
    letter-spacing: -0.09rem !important;
}

.sb-ls-n0p1 {
    letter-spacing: -0.1rem !important;
}

.sb-ls-n0p11 {
    letter-spacing: -0.11rem !important;
}

.sb-ls-n0p12 {
    letter-spacing: -0.12rem !important;
}

.sb-ls-n0p13 {
    letter-spacing: -0.13rem !important;
}

.sb-ls-n0p14 {
    letter-spacing: -0.14rem !important;
}

.sb-ls-n0p15 {
    letter-spacing: -0.15rem !important;
}

.sb-ls-n0p16 {
    letter-spacing: -0.16rem !important;
}

.sb-ls-n0p17 {
    letter-spacing: -0.17rem !important;
}

.sb-ls-n0p18 {
    letter-spacing: -0.18rem !important;
}

.sb-ls-n0p19 {
    letter-spacing: -0.19rem !important;
}

.sb-ls-n0p2 {
    letter-spacing: -0.2rem !important;
}


/*
    Zero
*/

.sb-ls-0 {
    letter-spacing: 0 !important;
}


/*
    Positive Letter Spacing
*/

.sb-ls-0p005 {
    letter-spacing: 0.005rem !important;
}

.sb-ls-0p01 {
    letter-spacing: 0.01rem !important;
}

.sb-ls-0p015 {
    letter-spacing: 0.015rem !important;
}

.sb-ls-0p02 {
    letter-spacing: 0.02rem !important;
}

.sb-ls-0p025 {
    letter-spacing: 0.025rem !important;
}

.sb-ls-0p03 {
    letter-spacing: 0.03rem !important;
}

.sb-ls-0p035 {
    letter-spacing: 0.035rem !important;
}

.sb-ls-0p04 {
    letter-spacing: 0.04rem !important;
}

.sb-ls-0p045 {
    letter-spacing: 0.045rem !important;
}

.sb-ls-0p05 {
    letter-spacing: 0.05rem !important;
}

.sb-ls-0p06 {
    letter-spacing: 0.06rem !important;
}

.sb-ls-0p07 {
    letter-spacing: 0.07rem !important;
}

.sb-ls-0p08 {
    letter-spacing: 0.08rem !important;
}

.sb-ls-0p09 {
    letter-spacing: 0.09rem !important;
}

.sb-ls-0p1 {
    letter-spacing: 0.1rem !important;
}

.sb-ls-0p11 {
    letter-spacing: 0.11rem !important;
}

.sb-ls-0p12 {
    letter-spacing: 0.12rem !important;
}

.sb-ls-0p13 {
    letter-spacing: 0.13rem !important;
}

.sb-ls-0p14 {
    letter-spacing: 0.14rem !important;
}

.sb-ls-0p15 {
    letter-spacing: 0.15rem !important;
}

.sb-ls-0p16 {
    letter-spacing: 0.16rem !important;
}

.sb-ls-0p17 {
    letter-spacing: 0.17rem !important;
}

.sb-ls-0p18 {
    letter-spacing: 0.18rem !important;
}

.sb-ls-0p19 {
    letter-spacing: 0.19rem !important;
}

.sb-ls-0p2 {
    letter-spacing: 0.2rem !important;
}

/*
    Max-width
*/
/* Base — mobile */
.sb-mw-100 {
    max-width: 100%;
}

.sb-mw-90 {
    max-width: 90%;
}

.sb-mw-80 {
    max-width: 80%;
}

.sb-mw-70 {
    max-width: 70%;
}

.sb-mw-60 {
    max-width: 60%;
}

.sb-mw-50 {
    max-width: 50%;
}

/* md */
@media (min-width: 768px) {
    .sb-mw-md-100 {
        max-width: 100%;
    }

    .sb-mw-md-90 {
        max-width: 90%;
    }

    .sb-mw-md-80 {
        max-width: 80%;
    }

    .sb-mw-md-70 {
        max-width: 70%;
    }

    .sb-mw-md-60 {
        max-width: 60%;
    }

    .sb-mw-md-50 {
        max-width: 50%;
    }
}

/* lg */
@media (min-width: 992px) {
    .sb-mw-lg-100 {
        max-width: 100%;
    }

    .sb-mw-lg-90 {
        max-width: 90%;
    }

    .sb-mw-lg-80 {
        max-width: 80%;
    }

    .sb-mw-lg-70 {
        max-width: 70%;
    }

    .sb-mw-lg-60 {
        max-width: 60%;
    }

    .sb-mw-lg-50 {
        max-width: 50%;
    }
}

/* xl */
@media (min-width: 1200px) {
    .sb-mw-xl-100 {
        max-width: 100%;
    }

    .sb-mw-xl-90 {
        max-width: 90%;
    }

    .sb-mw-xl-80 {
        max-width: 80%;
    }

    .sb-mw-xl-70 {
        max-width: 70%;
    }

    .sb-mw-xl-60 {
        max-width: 60%;
    }

    .sb-mw-xl-50 {
        max-width: 50%;
    }
}

/* xxl */
@media (min-width: 1400px) {
    .sb-mw-xxl-100 {
        max-width: 100%;
    }

    .sb-mw-xxl-90 {
        max-width: 90%;
    }

    .sb-mw-xxl-80 {
        max-width: 80%;
    }

    .sb-mw-xxl-70 {
        max-width: 70%;
    }

    .sb-mw-xxl-60 {
        max-width: 60%;
    }

    .sb-mw-xxl-50 {
        max-width: 50%;
    }
}


/*
    SB Design System — Padding
    Mobile-first
*/

/*
    Base — All Sides
*/
.sb-p-0 {
    padding: 0 !important;
}

.sb-p-0p125 {
    padding: 0.125rem !important;
}

.sb-p-0p25 {
    padding: 0.25rem !important;
}

.sb-p-0p375 {
    padding: 0.375rem !important;
}

.sb-p-0p5 {
    padding: 0.5rem !important;
}

.sb-p-0p625 {
    padding: 0.625rem !important;
}

.sb-p-0p75 {
    padding: 0.75rem !important;
}

.sb-p-0p875 {
    padding: 0.875rem !important;
}

.sb-p-1 {
    padding: 1rem !important;
}

.sb-p-1p25 {
    padding: 1.25rem !important;
}

.sb-p-1p5 {
    padding: 1.5rem !important;
}

.sb-p-1p75 {
    padding: 1.75rem !important;
}

.sb-p-2 {
    padding: 2rem !important;
}

.sb-p-2p5 {
    padding: 2.5rem !important;
}

.sb-p-3 {
    padding: 3rem !important;
}

.sb-p-4 {
    padding: 4rem !important;
}


/*
    Base — Horizontal Padding
*/
.sb-px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sb-px-0p125 {
    padding-left: 0.125rem !important;
    padding-right: 0.125rem !important;
}

.sb-px-0p25 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.sb-px-0p5 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.sb-px-0p75 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.sb-px-1 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.sb-px-1p5 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.sb-px-2 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.sb-px-3 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

.sb-px-4 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
}


/*
    Base — Vertical Padding
*/
.sb-py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.sb-py-0p125 {
    padding-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
}

.sb-py-0p25 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.sb-py-0p5 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.sb-py-0p75 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.sb-py-1 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.sb-py-1p5 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.sb-py-2 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.sb-py-3 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.sb-py-4 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}


/*
    SM — 576px
*/
@media (min-width: 576px) {

    .sb-sm-p-0 {
        padding: 0 !important;
    }

    .sb-sm-p-0p25 {
        padding: 0.25rem !important;
    }

    .sb-sm-p-0p5 {
        padding: 0.5rem !important;
    }

    .sb-sm-p-0p75 {
        padding: 0.75rem !important;
    }

    .sb-sm-p-1 {
        padding: 1rem !important;
    }

    .sb-sm-p-1p5 {
        padding: 1.5rem !important;
    }

    .sb-sm-p-2 {
        padding: 2rem !important;
    }

    .sb-sm-p-3 {
        padding: 3rem !important;
    }

    .sb-sm-p-4 {
        padding: 4rem !important;
    }


    .sb-sm-px-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sb-sm-px-0p25 {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .sb-sm-px-0p5 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .sb-sm-px-0p75 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .sb-sm-px-1 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .sb-sm-px-1p5 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .sb-sm-px-2 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .sb-sm-px-3 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .sb-sm-px-4 {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }


    .sb-sm-py-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .sb-sm-py-0p25 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .sb-sm-py-0p5 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .sb-sm-py-0p75 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .sb-sm-py-1 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .sb-sm-py-1p5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .sb-sm-py-2 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .sb-sm-py-3 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .sb-sm-py-4 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}


/*
    MD — 768px
*/
@media (min-width: 768px) {

    .sb-md-p-0 {
        padding: 0 !important;
    }

    .sb-md-p-0p25 {
        padding: 0.25rem !important;
    }

    .sb-md-p-0p5 {
        padding: 0.5rem !important;
    }

    .sb-md-p-0p75 {
        padding: 0.75rem !important;
    }

    .sb-md-p-1 {
        padding: 1rem !important;
    }

    .sb-md-p-1p5 {
        padding: 1.5rem !important;
    }

    .sb-md-p-2 {
        padding: 2rem !important;
    }

    .sb-md-p-3 {
        padding: 3rem !important;
    }

    .sb-md-p-4 {
        padding: 4rem !important;
    }


    .sb-md-px-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sb-md-px-0p25 {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .sb-md-px-0p5 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .sb-md-px-0p75 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .sb-md-px-1 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .sb-md-px-1p5 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .sb-md-px-2 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .sb-md-px-3 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .sb-md-px-4 {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }


    .sb-md-py-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .sb-md-py-0p25 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .sb-md-py-0p5 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .sb-md-py-0p75 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .sb-md-py-1 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .sb-md-py-1p5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .sb-md-py-2 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .sb-md-py-3 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .sb-md-py-4 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}


/*
    LG — 992px
*/
@media (min-width: 992px) {

    .sb-lg-p-0 {
        padding: 0 !important;
    }

    .sb-lg-p-0p25 {
        padding: 0.25rem !important;
    }

    .sb-lg-p-0p5 {
        padding: 0.5rem !important;
    }

    .sb-lg-p-0p75 {
        padding: 0.75rem !important;
    }

    .sb-lg-p-1 {
        padding: 1rem !important;
    }

    .sb-lg-p-1p5 {
        padding: 1.5rem !important;
    }

    .sb-lg-p-2 {
        padding: 2rem !important;
    }

    .sb-lg-p-3 {
        padding: 3rem !important;
    }

    .sb-lg-p-4 {
        padding: 4rem !important;
    }


    .sb-lg-px-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sb-lg-px-0p25 {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .sb-lg-px-0p5 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .sb-lg-px-0p75 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .sb-lg-px-1 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .sb-lg-px-1p5 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .sb-lg-px-2 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .sb-lg-px-3 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .sb-lg-px-4 {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }


    .sb-lg-py-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .sb-lg-py-0p25 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .sb-lg-py-0p5 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .sb-lg-py-0p75 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .sb-lg-py-1 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .sb-lg-py-1p5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .sb-lg-py-2 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .sb-lg-py-3 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .sb-lg-py-4 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}


/*
    XL — 1200px
*/
@media (min-width: 1200px) {

    .sb-xl-p-0 {
        padding: 0 !important;
    }

    .sb-xl-p-0p25 {
        padding: 0.25rem !important;
    }

    .sb-xl-p-0p5 {
        padding: 0.5rem !important;
    }

    .sb-xl-p-0p75 {
        padding: 0.75rem !important;
    }

    .sb-xl-p-1 {
        padding: 1rem !important;
    }

    .sb-xl-p-1p5 {
        padding: 1.5rem !important;
    }

    .sb-xl-p-2 {
        padding: 2rem !important;
    }

    .sb-xl-p-3 {
        padding: 3rem !important;
    }

    .sb-xl-p-4 {
        padding: 4rem !important;
    }


    .sb-xl-px-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sb-xl-px-0p25 {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .sb-xl-px-0p5 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .sb-xl-px-0p75 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .sb-xl-px-1 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .sb-xl-px-1p5 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .sb-xl-px-2 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .sb-xl-px-3 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .sb-xl-px-4 {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }


    .sb-xl-py-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .sb-xl-py-0p25 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .sb-xl-py-0p5 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .sb-xl-py-0p75 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .sb-xl-py-1 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .sb-xl-py-1p5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .sb-xl-py-2 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .sb-xl-py-3 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .sb-xl-py-4 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}


/*
    XXL — 1400px
*/
@media (min-width: 1400px) {

    .sb-xxl-p-0 {
        padding: 0 !important;
    }

    .sb-xxl-p-0p25 {
        padding: 0.25rem !important;
    }

    .sb-xxl-p-0p5 {
        padding: 0.5rem !important;
    }

    .sb-xxl-p-0p75 {
        padding: 0.75rem !important;
    }

    .sb-xxl-p-1 {
        padding: 1rem !important;
    }

    .sb-xxl-p-1p5 {
        padding: 1.5rem !important;
    }

    .sb-xxl-p-2 {
        padding: 2rem !important;
    }

    .sb-xxl-p-3 {
        padding: 3rem !important;
    }

    .sb-xxl-p-4 {
        padding: 4rem !important;
    }


    .sb-xxl-px-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sb-xxl-px-0p25 {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .sb-xxl-px-0p5 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .sb-xxl-px-0p75 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .sb-xxl-px-1 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .sb-xxl-px-1p5 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .sb-xxl-px-2 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .sb-xxl-px-3 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    .sb-xxl-px-4 {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }


    .sb-xxl-py-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .sb-xxl-py-0p25 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .sb-xxl-py-0p5 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .sb-xxl-py-0p75 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .sb-xxl-py-1 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .sb-xxl-py-1p5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .sb-xxl-py-2 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .sb-xxl-py-3 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .sb-xxl-py-4 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}