@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

:root {
    /* Primary */
    --primary-1: #6c8ba9;
    --primary-2: #55799c;
    --primary-3: #41678b;
    --primary-4: #2d5274;
    --primary-5: #22425f;
    --primary-base: #132a3f;
    --primary-6: #0a1d2f;
    --primary-7: #03111d;
    --primary-8: #03111d;

    /* Greyscale */
    --greyscale-0: #ffffff;
    --greyscale-05: #fcfcfd;
    --greyscale-1: #f9fafb;
    --greyscale-2: #f2f4f7;
    --greyscale-3: #eaecf0;
    --greyscale-4: #d0d5dd;
    --greyscale-5: #98a2b3;
    --greyscale-6: #667085;
    --greyscale-7: #475467;
    --greyscale-8: #344054;
    --greyscale-9: #1d2939;
    --greyscale-10: #101828;

    /* Green */
    --green-0: #daffee;
    --green-1: #75febe;
    --green-2: #53f3a9;
    --green-3: #3ce697;
    --green-4: #2da485;
    --green-5: #1bc777;
    --green-base: #12b76a;
    --green-6: #0dad63;
    --green-7: #09a35c;
    --green-8: #069151;
    --green-9: #037c44;
    --green-10: #026336;

    /* Yellow */
    --yellow-0: #fff4df;
    --yellow-1: #fffea1;
    --yellow-2: #ffdf27f;
    --yellow-3: #ffc761;
    --yellow-4: #ffbe47;
    --yellow-5: #ffb836;
    --yellow-base: #fdb022;
    --yellow-6: #faa416;
    --yellow-7: #f1a20f;
    --yellow-8: #df940b;
    --yellow-9: #d18905;
    --yellow-10: #b47502;

    /* Red */
    --red-0: #ffeeff;
    --red-1: #ffd7d7;
    --red-2: #ffb7b7;
    --red-3: #fea3a3;
    --red-4: #ff8e8e;
    --red-5: #ff8181;
    --red-base: #ff6b6b;
    --red-6: #ff5d5d;
    --red-7: #fd4f4f;
    --red-8: #fc4444;
    --red-9: #fc3333;
    --red-10: #ee1818;

    /* Purple */
    --purple-0: #e8ddff;
    --purple-1: #d9c8f4;
    --purple-2: #cbb3f0;
    --purple-3: #b999ea;
    --purple-4: #a880e5;
    --purple-5: #9666e0;
    --purple-base: #8a55dd;
    --purple-6: #7c3fd9;
    --purple-7: #6d2ad5;
    --purple-8: #5721ab;
    --purple-9: #4c1d95;
    --purple-10: #2c1155;

    /* Cyan */
    --cyan-0: #cde9f4;
    --cyan-1: #9bd3e9;
    --cyan-2: #7ec6e2;
    --cyan-3: #61b9db;
    --cyan-4: #44acd5;
    --cyan-5: #2ea0cc;
    --cyan-base: #28bcb3;
    --cyan-6: #257fa2;
    --cyan-7: #206f8e;
    --cyan-8: #1b5f79;
    --cyan-9: #164e63;
    --cyan-10: #09212a;

    /* Typography */
    --headline-36-size: 36px;
    /* --headline-36-line-height: 54px; */
    --headline-36-letter-spacing: -2%;

    --headline-28-size: 28px;
    /* --headline-28-line-height: 56px; */
    --headline-28-letter-spacing: -2%;

    --headline-24-size: 24px;
    /* --headline-24-line-height: 28px; */
    --headline-24-letter-spacing: -2%;

    --title-24-size: 24px;
    /* --title-24-line-height: 30px; */
    --title-24-letter-spacing: -2%;

    --title-20-size: 20px;
    /* --title-20-line-height: 28px; */
    --title-20-letter-spacing: -2%;

    --title-16-size: 16px;
    /* --title-16-line-height: 24px; */
    --title-16-letter-spacing: -2%;

    --title-14-size: 14px;
    /* --title-14-line-height: 18px; */
    --title-14-letter-spacing: -2%;

    --title-12-size: 12px;
    /* --title-12-line-height: 16px; */
    --title-12-letter-spacing: -2%;

    --title-10-size: 10px;
    /* --title-10-line-height: 12px; */
    --title-10-letter-spacing: -2%;

    --caption-20-size: 20px;
    /* --caption-20-line-height: 28px; */
    --caption-20-letter-spacing: 0%;

    --caption-16-size: 16px;
    /* --caption-16-line-height: 24px; */
    --caption-16-letter-spacing: 0%;

    --caption-14-size: 14px;
    /* --caption-14-line-height: 20px; */
    --caption-14-letter-spacing: 0%;

    --caption-12-size: 12px;
    /* --caption-12-line-height: 16px; */
    --caption-12-letter-spacing: 0%;

    --caption-10-size: 10px;
    /* --caption-10-line-height: 12px; */
    --caption-10-letter-spacing: 0%;

    --body-20-size: 20px;
    /* --body-20-line-height: 28px; */
    --body-20-letter-spacing: 0%;

    --body-16-size: 16px;
    /* --body-16-line-height: 24px; */
    --body-16-letter-spacing: 0%;

    --body-14-size: 14px;
    /* --body-14-line-height: 20px; */
    --body-14-letter-spacing: 0%;

    --body-12-size: 12px;
    /* --body-12-line-height: 18px; */
    --body-12-letter-spacing: 0%;
}

/* --- Global Styles --- */

/* primary */
.primary-1 {
    color: var(--primary-1);
}

.bg-primary-1 {
    background-color: var(--primary-1);
}

.primary-2 {
    color: var(--primary-2);
}

.bg-primary-2 {
    background-color: var(--primary-2);
}

.primary-3 {
    color: var(--primary-3);
}

.bg-primary-3 {
    background-color: var(--primary-3);
}

.primary-4 {
    color: var(--primary-4);
}

.bg-primary-4 {
    background-color: var(--primary-4);
}

.primary-5 {
    color: var(--primary-5);
}

.bg-primary-5 {
    background-color: var(--primary-5);
}

.primary-base {
    color: var(--primary-base);
}

.bg-primary-base {
    background-color: var(--primary-base);
}

.primary-6 {
    color: var(--primary-6);
}

.bg-primary-6 {
    background-color: var(--primary-6);
}

.primary-7 {
    color: var(--primary-7);
}

.bg-primary-7 {
    background-color: var(--primary-7);
}

.primary-8 {
    color: var(--primary-8);
}

.bg-primary-8 {
    background-color: var(--primary-8);
}

/* greyscale */

.greyscale-0 {
    color: var(--greyscale-0);
}

.bg-greyscale-0 {
    background-color: var(--greyscale-0);
}

.greyscale-1 {
    color: var(--greyscale-1);
}

.bg-greyscale-1 {
    background-color: var(--greyscale-1);
}

.greyscale-2 {
    color: var(--greyscale-2);
}

.bg-greyscale-2 {
    background-color: var(--greyscale-2);
}

.greyscale-3 {
    color: var(--greyscale-3);
}

.bg-greyscale-3 {
    background-color: var(--greyscale-3);
}

.greyscale-4 {
    color: var(--greyscale-4);
}

.bg-greyscale-4 {
    background-color: var(--greyscale-4);
}

.greyscale-5 {
    color: var(--greyscale-5);
}

.bg-greyscale-5 {
    background-color: var(--greyscale-5);
}

.greyscale-6 {
    color: var(--greyscale-6);
}

.bg-greyscale-6 {
    background-color: var(--greyscale-6);
}

.greyscale-7 {
    color: var(--greyscale-7);
}

.bg-greyscale-7 {
    background-color: var(--greyscale-7);
}

.greyscale-8 {
    color: var(--greyscale-8);
}

.bg-greyscale-8 {
    background-color: var(--greyscale-8);
}

.greyscale-9 {
    color: var(--greyscale-9);
}

.bg-greyscale-9 {
    background-color: var(--greyscale-9);
}

.greyscale-10 {
    color: var(--greyscale-10);
}

.bg-greyscale-10 {
    background-color: var(--greyscale-10);
}

/* green */

.green-0 {
    color: var(--green-0);
}

.bg-green-0 {
    background-color: var(--green-0);
}

.green-1 {
    color: var(--green-1);
}

.bg-green-1 {
    background-color: var(--green-1);
}

.green-2 {
    color: var(--green-2);
}

.bg-green-2 {
    background-color: var(--green-2);
}

.green-3 {
    color: var(--green-3);
}

.bg-green-3 {
    background-color: var(--green-3);
}

.green-4 {
    color: var(--green-4);
}

.bg-green-4 {
    background-color: var(--green-4);
}

.green-5 {
    color: var(--green-5);
}

.bg-green-5 {
    background-color: var(--green-5);
}

.green-base {
    color: var(--green-base);
}

.bg-green-base {
    background-color: var(--green-base);
}

.green-6 {
    color: var(--green-6);
}

.bg-green-6 {
    background-color: var(--green-6);
}

.green-7 {
    color: var(--green-7);
}

.bg-green-7 {
    background-color: var(--green-7);
}

.green-8 {
    color: var(--green-8);
}

.bg-green-8 {
    background-color: var(--green-8);
}

.green-9 {
    color: var(--green-9);
}

.bg-green-9 {
    background-color: var(--green-9);
}

.green-10 {
    color: var(--green-10);
}

.bg-green-10 {
    background-color: var(--green-10);
}

/* yellow */
.yellow-0 {
    color: var(--yellow-0);
}

.bg-yellow-0 {
    background-color: var(--yellow-0);
}

.yellow-1 {
    color: var(--yellow-1);
}

.bg-yellow-1 {
    background-color: var(--yellow-1);
}

.yellow-2 {
    color: var(--yellow-2);
}

.bg-yellow-2 {
    background-color: var(--yellow-2);
}

.yellow-3 {
    color: var(--yellow-3);
}

.bg-yellow-3 {
    background-color: var(--yellow-3);
}

.yellow-4 {
    color: var(--yellow-4);
}

.bg-yellow-4 {
    background-color: var(--yellow-4);
}

.yellow-5 {
    color: var(--yellow-5);
}

.bg-yellow-5 {
    background-color: var(--yellow-5);
}

.yellow-base {
    color: var(--yellow-base);
}

.bg-yellow-base {
    background-color: var(--yellow-base);
}

.yellow-6 {
    color: var(--yellow-6);
}

.bg-yellow-6 {
    background-color: var(--yellow-6);
}

.yellow-7 {
    color: var(--yellow-7);
}

.bg-yellow-7 {
    background-color: var(--yellow-7);
}

.yellow-8 {
    color: var(--yellow-8);
}

.bg-yellow-8 {
    background-color: var(--yellow-8);
}

.yellow-9 {
    color: var(--yellow-9);
}

.bg-yellow-9 {
    background-color: var(--yellow-9);
}

.yellow-10 {
    color: var(--yellow-10);
}

.bg-yellow-10 {
    background-color: var(--yellow-10);
}

/* red */
.red-0 {
    color: var(--red-0);
}

.bg-red-0 {
    background-color: var(--red-0);
}

.red-1 {
    color: var(--red-1);
}

.bg-red-1 {
    background-color: var(--red-1);
}

.red-2 {
    color: var(--red-2);
}

.bg-red-2 {
    background-color: var(--red-2);
}

.red-3 {
    color: var(--red-3);
}

.bg-red-3 {
    background-color: var(--red-3);
}

.red-4 {
    color: var(--red-4);
}

.bg-red-4 {
    background-color: var(--red-4);
}

.red-5 {
    color: var(--red-5);
}

.bg-red-5 {
    background-color: var(--red-5);
}

.red-base {
    color: var(--red-base);
}

.bg-red-base {
    background-color: var(--red-base);
}

.red-6 {
    color: var(--red-6);
}

.bg-red-6 {
    background-color: var(--red-6);
}

.red-7 {
    color: var(--red-7);
}

.bg-red-7 {
    background-color: var(--red-7);
}

.red-8 {
    color: var(--red-8);
}

.bg-red-8 {
    background-color: var(--red-8);
}

.red-9 {
    color: var(--red-9);
}

.bg-red-9 {
    background-color: var(--red-9);
}

.red-10 {
    color: var(--red-10);
}

.bg-red-10 {
    background-color: var(--red-10);
}

/* purple */
.purple-0 {
    color: var(--purple-0);
}

.bg-purple-0 {
    background-color: var(--purple-0);
}

.purple-1 {
    color: var(--purple-1);
}

.bg-purple-1 {
    background-color: var(--purple-1);
}

.purple-2 {
    color: var(--purple-2);
}

.bg-purple-2 {
    background-color: var(--purple-2);
}

.purple-3 {
    color: var(--purple-3);
}

.bg-purple-3 {
    background-color: var(--purple-3);
}

.purple-4 {
    color: var(--purple-4);
}

.bg-purple-4 {
    background-color: var(--purple-4);
}

.purple-5 {
    color: var(--purple-5);
}

.bg-purple-5 {
    background-color: var(--purple-5);
}

.purple-base {
    color: var(--purple-base);
}

.bg-purple-base {
    background-color: var(--purple-base);
}

.purple-6 {
    color: var(--purple-6);
}

.bg-purple-6 {
    background-color: var(--purple-6);
}

.purple-7 {
    color: var(--purple-7);
}

.bg-purple-7 {
    background-color: var(--purple-7);
}

.purple-8 {
    color: var(--purple-8);
}

.bg-purple-8 {
    background-color: var(--purple-8);
}

.purple-9 {
    color: var(--purple-9);
}

.bg-purple-9 {
    background-color: var(--purple-9);
}

.purple-10 {
    color: var(--purple-10);
}

.bg-purple-10 {
    background-color: var(--purple-10);
}

/* cyan */
.cyan-0 {
    color: var(--cyan-0);
}

.bg-cyan-0 {
    background-color: var(--cyan-0);
}

.cyan-1 {
    color: var(--cyan-1);
}

.bg-cyan-1 {
    background-color: var(--cyan-1);
}

.cyan-2 {
    color: var(--cyan-2);
}

.bg-cyan-2 {
    background-color: var(--cyan-2);
}

.cyan-3 {
    color: var(--cyan-3);
}

.bg-cyan-3 {
    background-color: var(--cyan-3);
}

.cyan-4 {
    color: var(--cyan-4);
}

.bg-cyan-4 {
    background-color: var(--cyan-4);
}

.cyan-5 {
    color: var(--cyan-5);
}

.bg-cyan-5 {
    background-color: var(--cyan-5);
}

.cyan-base {
    color: var(--cyan-base);
}

.bg-cyan-base {
    background-color: var(--cyan-base);
}

.cyan-6 {
    color: var(--cyan-6);
}

.bg-cyan-6 {
    background-color: var(--cyan-6);
}

.cyan-7 {
    color: var(--cyan-7);
}

.bg-cyan-7 {
    background-color: var(--cyan-7);
}

.cyan-8 {
    color: var(--cyan-8);
}

.bg-cyan-8 {
    background-color: var(--cyan-8);
}

.cyan-9 {
    color: var(--cyan-9);
}

.bg-cyan-9 {
    background-color: var(--cyan-9);
}

.cyan-10 {
    color: var(--cyan-10);
}

.bg-cyan-10 {
    background-color: var(--cyan-10);
}

/* --- Border Colors --- */

/* Primary */
.border-primary-1 {
    border-color: var(--primary-1);
}
.border-primary-2 {
    border-color: var(--primary-2);
}
.border-primary-3 {
    border-color: var(--primary-3);
}
.border-primary-4 {
    border-color: var(--primary-4);
}
.border-primary-5 {
    border-color: var(--primary-5);
}
.border-primary-base {
    border-color: var(--primary-base);
}
.border-primary-6 {
    border-color: var(--primary-6);
}
.border-primary-7 {
    border-color: var(--primary-7);
}

.border-primary-8 {
    border-color: var(--primary-8);
}
/* Greyscale */
.border-greyscale-0 {
    border-color: var(--greyscale-0);
}
.border-greyscale-1 {
    border-color: var(--greyscale-1);
}
.border-greyscale-2 {
    border-color: var(--greyscale-2);
}
.border-greyscale-3 {
    border-color: var(--greyscale-3);
}
.border-greyscale-4 {
    border-color: var(--greyscale-4);
}
.border-greyscale-5 {
    border-color: var(--greyscale-5);
}
.border-greyscale-6 {
    border-color: var(--greyscale-6);
}
.border-greyscale-7 {
    border-color: var(--greyscale-7);
}
.border-greyscale-8 {
    border-color: var(--greyscale-8);
}
.border-greyscale-9 {
    border-color: var(--greyscale-9);
}
.border-greyscale-10 {
    border-color: var(--greyscale-10);
}

/* Green */
.border-green-0 {
    border-color: var(--green-0);
}
.border-green-1 {
    border-color: var(--green-1);
}
.border-green-2 {
    border-color: var(--green-2);
}
.border-green-3 {
    border-color: var(--green-3);
}
.border-green-4 {
    border-color: var(--green-4);
}
.border-green-5 {
    border-color: var(--green-5);
}
.border-green-base {
    border-color: var(--green-base);
}
.border-green-6 {
    border-color: var(--green-6);
}
.border-green-7 {
    border-color: var(--green-7);
}
.border-green-8 {
    border-color: var(--green-8);
}
.border-green-9 {
    border-color: var(--green-9);
}
.border-green-10 {
    border-color: var(--green-10);
}

/* Yellow */
.border-yellow-0 {
    border-color: var(--yellow-0);
}
.border-yellow-1 {
    border-color: var(--yellow-1);
}
.border-yellow-2 {
    border-color: var(--yellow-2);
}
.border-yellow-3 {
    border-color: var(--yellow-3);
}
.border-yellow-4 {
    border-color: var(--yellow-4);
}
.border-yellow-5 {
    border-color: var(--yellow-5);
}
.border-yellow-base {
    border-color: var(--yellow-base);
}
.border-yellow-6 {
    border-color: var(--yellow-6);
}
.border-yellow-7 {
    border-color: var(--yellow-7);
}
.border-yellow-8 {
    border-color: var(--yellow-8);
}
.border-yellow-9 {
    border-color: var(--yellow-9);
}
.border-yellow-10 {
    border-color: var(--yellow-10);
}

/* Red */
.border-red-0 {
    border-color: var(--red-0);
}
.border-red-1 {
    border-color: var(--red-1);
}
.border-red-2 {
    border-color: var(--red-2);
}
.border-red-3 {
    border-color: var(--red-3);
}
.border-red-4 {
    border-color: var(--red-4);
}
.border-red-5 {
    border-color: var(--red-5);
}
.border-red-base {
    border-color: var(--red-base);
}
.border-red-6 {
    border-color: var(--red-6);
}
.border-red-7 {
    border-color: var(--red-7);
}
.border-red-8 {
    border-color: var(--red-8);
}
.border-red-9 {
    border-color: var(--red-9);
}
.border-red-10 {
    border-color: var(--red-10);
}

/* Purple */
.border-purple-0 {
    border-color: var(--purple-0);
}
.border-purple-1 {
    border-color: var(--purple-1);
}
.border-purple-2 {
    border-color: var(--purple-2);
}
.border-purple-3 {
    border-color: var(--purple-3);
}
.border-purple-4 {
    border-color: var(--purple-4);
}
.border-purple-5 {
    border-color: var(--purple-5);
}
.border-purple-base {
    border-color: var(--purple-base);
}
.border-purple-6 {
    border-color: var(--purple-6);
}
.border-purple-7 {
    border-color: var(--purple-7);
}
.border-purple-8 {
    border-color: var(--purple-8);
}
.border-purple-9 {
    border-color: var(--purple-9);
}
.border-purple-10 {
    border-color: var(--purple-10);
}

/* Cyan */
.border-cyan-0 {
    border-color: var(--cyan-0);
}
.border-cyan-1 {
    border-color: var(--cyan-1);
}
.border-cyan-2 {
    border-color: var(--cyan-2);
}
.border-cyan-3 {
    border-color: var(--cyan-3);
}
.border-cyan-4 {
    border-color: var(--cyan-4);
}
.border-cyan-5 {
    border-color: var(--cyan-5);
}
.border-cyan-base {
    border-color: var(--cyan-base);
}
.border-cyan-6 {
    border-color: var(--cyan-6);
}
.border-cyan-7 {
    border-color: var(--cyan-7);
}
.border-cyan-8 {
    border-color: var(--cyan-8);
}
.border-cyan-9 {
    border-color: var(--cyan-9);
}
.border-cyan-10 {
    border-color: var(--cyan-10);
}

/* --- Global Styles --- */

/* --- Hide Scrollbar --- */

.hide-scrollbar::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* --- End Hide Scrollbar --- */

/* --- Font Family --- */

.headline-36 {
    font-family: "Poppins", sans-serif;
    font-size: var(--headline-36-size);
    /* line-height: var(--headline-36-line-height); */
    letter-spacing: var(--headline-36-letter-spacing);
}

.headline-28 {
    font-family: "Poppins", sans-serif;
    font-size: var(--headline-28-size);
    /* line-height: var(--headline-28-line-height); */
    letter-spacing: var(--headline-28-letter-spacing);
}

.headline-24 {
    font-family: "Poppins", sans-serif;
    font-size: var(--headline-24-size);
    /* line-height: var(--headline-24-line-height); */
    letter-spacing: var(--headline-24-letter-spacing);
}

.title-24 {
    font-family: "Poppins", sans-serif;
    font-size: var(--title-24-size);
    /* line-height: var(--title-24-line-height); */
    letter-spacing: var(--title-24-letter-spacing);
}

.title-20 {
    font-family: "Poppins", sans-serif;
    font-size: var(--title-20-size);
    /* line-height: var(--title-20-line-height); */
    letter-spacing: var(--title-20-letter-spacing);
}

.title-16 {
    font-family: "Poppins", sans-serif;
    font-size: var(--title-16-size);
    /* line-height: var(--title-16-line-height); */
    letter-spacing: var(--title-16-letter-spacing);
}

.title-14 {
    font-family: "Poppins", sans-serif;
    font-size: var(--title-14-size);
    /* line-height: var(--title-14-line-height); */
    letter-spacing: var(--title-14-letter-spacing);
}

.title-12 {
    font-family: "Poppins", sans-serif;
    font-size: var(--title-12-size);
    /* line-height: var(--title-12-line-height); */
    letter-spacing: var(--title-12-letter-spacing);
}

.title-10 {
    font-family: "Poppins", sans-serif;
    font-size: var(--title-10-size);
    /* line-height: var(--title-10-line-height); */
    letter-spacing: var(--title-10-letter-spacing);
}

.caption-20 {
    font-family: "Poppins", sans-serif;
    font-size: var(--caption-20-size);
    /* line-height: var(--caption-20-line-height); */
    letter-spacing: var(--caption-20-letter-spacing);
}

.caption-16 {
    font-family: "Poppins", sans-serif;
    font-size: var(--caption-16-size);
    /* line-height: var(--caption-16-line-height); */
    letter-spacing: var(--caption-16-letter-spacing);
}

.caption-14 {
    font-family: "Poppins", sans-serif;
    font-size: var(--caption-14-size);
    /* line-height: var(--caption-14-line-height); */
    letter-spacing: var(--caption-14-letter-spacing);
}

.caption-12 {
    font-family: "Poppins", sans-serif;
    font-size: var(--caption-12-size);
    /* line-height: var(--caption-12-line-height); */
    letter-spacing: var(--caption-12-letter-spacing);
}

.caption-10 {
    font-family: "Poppins", sans-serif;
    font-size: var(--caption-10-size);
    /* line-height: var(--caption-10-line-height); */
    letter-spacing: var(--caption-10-letter-spacing);
}

.body-20 {
    font-family: "Poppins", sans-serif;
    font-size: var(--body-20-size);
    /* line-height: var(--body-20-line-height); */
    letter-spacing: var(--body-20-letter-spacing);
}

.body-16 {
    font-family: "Poppins", sans-serif;
    font-size: var(--body-16-size);
    /* line-height: var(--body-16-line-height); */
    letter-spacing: var(--body-16-letter-spacing);
}

.body-14 {
    font-family: "Poppins", sans-serif;
    font-size: var(--body-14-size);
    /* line-height: var(--body-14-line-height); */
    letter-spacing: var(--body-14-letter-spacing);
}

.body-12 {
    font-family: "Poppins", sans-serif;
    font-size: var(--body-12-size);
    /* line-height: var(--body-12-line-height); */
    letter-spacing: var(--body-12-letter-spacing);
}

/* --- End Font Family --- */

.border-primary {
    width: 32px;
    height: 32px;
    padding: 0.5rem;
    text-align: center;
    border-width: 4px;
    border-color: 1px solid var(--primary-8);
    border-top: 4px solid var(--primary-8);
    border-radius: 8px;
    background-color: var(--primary-5);
    color: var(--greyscale-0);
}

.border-danger {
    width: 32px;
    height: 32px;
    padding: 0.5rem;
    text-align: center;
    border-width: 4px;
    border-color: 1px solid var(--red-10);
    border-top: 4px solid var(--red-10);
    border-radius: 8px;
    background-color: var(--red-6);
    color: var(--greyscale-0);
}

.border-warning {
    width: 32px;
    height: 32px;
    padding: 0.5rem;
    text-align: center;
    border-width: 4px;
    border-color: 1px solid var(--yellow-10);
    border-top: 4px solid var(--yellow-10);
    border-radius: 8px;
    background-color: var(--yellow-7);
    color: var(--greyscale-0);
}

.border-outline-primary {
    width: 32px;
    height: 32px;
    padding: 0.5rem;
    text-align: center;
    border-width: 4px;
    border-color: 1px solid var(--greyscale-9);
    border-top: 4px solid var(--greyscale-9);
    border-radius: 8px;
    background-color: var(--greyscale-1);
    color: var(--greyscale-9);
}

.border-outline-secondary {
    width: 32px;
    height: 32px;
    padding: 0.5rem;
    text-align: center;
    border-width: 4px;
    border-color: 1px solid var(--greyscale-5);
    border-top: 4px solid var(--greyscale-5);
    border-radius: 8px;
    background-color: var(--greyscale-0);
    color: var(--greyscale-6);
}