:root{
    /* colors */
    --blue-delta: #1297EC;
    --yellow-beta: #ED6E38;
    --echo: #00F2DE;
    --black: #3D3D3D;
    --dark-purple: #5663A9;
    --white: #FFFFFF;
    --gray-EAEAEA: #EAEAEA;
    --gray-F4F4F4: #F4F4F4;
    --orange-F87516: #F87516;
    --yellow-FDBF4D: #FDBF4D;
    --red-F45153: #F45153;
    --green-00A69A: #00A69A;
    --purple-4153AF: #4153AF;
    --violet-8C48B6: #8C48B6;

    /* alert */
    --green-00A739: #00A739;
    --green-soft: #00A73910;
    --yellow-F49C1E: #F49C1E;
    --yellow-soft: #F49C1E10;
    --red-ED4C5C: #ED4C5C;
    --red-soft: #ED4C5C10;
    --purple-5A75FF: #5A75FF;
    --purple-soft: #5A75FF10;



    /* font size */
    --font-caption: 32rem; /* 12px */
    --font-body-2: .875rem; /* 14px */
    --font-body-1: 1rem;
    --font-subtitle-1: 1.125rem; /* 18px */
    --font-subtitle: 1.25rem; /* 20px */
    --font-title-1: 1.375rem; /* 22px */
    --font-title: 1.625rem; /* 24px */

    /* font families */
    --monserrat: 'Montserrat', sans-serif;

    /* font weight */
    --fw-900: 900;
    --fw-800: 800;
    --fw-700: 700;
    --fw-600: 600;
    --fw-500: 500;
    --fw-400: 400;
    --fw-300: 300;
    --fw-200: 200;
    --fw-100: 100;
    
    /* space */
    --sm: 1em;
    --md: 2em;
    --lg: 3em;
    --xl: 4em;
    --2xl: 5em;



    --opacity-10: 0.1;
    --opacity-25: 0.2,
    --opacity-50: 0.5;
    --opacity-75: 0.7;


}

.text-sm{
    font-size: var(--font-caption); 
}

.text-sm{
    font-size: var(--font-body-2);
}

.text-base{
    font-size: var(--font-body-1);
}

.text-lg{
    font-size: var(--font-subtitle-1);
}

.text-xl{
    font-size: var(--font-subtitle);
}

.text-2xl{
    font-size: var(--font-title-1);
}

.text-3xl{
    font-size: var(--font-title);
}

/* padding */
.py-1{
    padding-top: var(--sm);
    padding-bottom: var(--sm);
}

.py-2{
    padding-top: var(--md);
    padding-bottom: var(--md);
}

.px-2{
    padding-right: var(--md);
    padding-left: var(--md);
}

.p-1{
    padding: var(--sm);
}

.p-2{
    padding: var(--md);
}

.p-3{
    padding: var(--lg);
}

.p-4{
    padding: var(--xl);
}

.p-5{
    padding: var(--2xl);
}

.pt-1{
    padding-top: var(--sm);
}



/* text colors */
.text-primary{
    color: var(--blue-delta);
}

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

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

.text-blue{
    color: var(--blue-delta);
}

.text-red{
    color: var(--red-F45153);
}

/* font weight */
.fw-900{
    font-weight: var(--fw-900);
}

.fw-800{
    font-weight: var(--fw-800);
}

.fw-700{
    font-weight: var(--fw-700);
}

.fw-600{
    font-weight: var(--fw-600);
}
.fw-500{
    font-weight: var(--500);
}

.fw-400{
    font-weight: var(--fw-400);
}

.fw-300{
    font-weight: var(--fw-300);
}

.fw-200{
    font-weight: var(--fw-200);
}

.fw-100{
    font-weight: var(--fw-100);
}


/* font style */
.text-monserrat{
    font-family: var(--monserrat);
}


.border{
    border: 1px solid var(--gray-EAEAEA);
}

.border-b{
    border-bottom: 1px solid var(--gray-EAEAEA);
}
.border-t{
    border: 1px solid var(--gray-EAEAEA);
}

/* border radius */
.rounded-1{
    border-radius: 1rem;
}

.rounded-2{
    border-radius: 2rem;
}

.rounded-3{
    border-radius: 4rem;
}

.rounded-4{
    border-radius: 4rem;
}

.rounded-5{
    border-radius: 5rem;
}

/* line height */
.lh-150{
    line-height: 150%;
}

/* opacity */
.opacity-10{
    opacity: var(--opacity-10);
}

.opacity-25{
    opacity: var(--opacity-25);
}

.opacity-50{
    opacity: var(--opacity-50);
}

.opacity-75{
    opacity: var(--opacity-75);
}

/* position */
.position-relative{
    position: relative;
}


/* list */
.list-style-none{
    list-style: none;
}


/* overflow */
.overflow-y-auto{
    overflow-y: auto;
}

.overflow-y-none{
    overflow-y: none;
}


/* card */
.card{
    background-color: var(--white);
}

.display-none{
    display: none;
}

.alert-gh{
    padding: 1rem 2rem;
}

.alert-success-small{
    background-color: var(--green-soft);
    color: var(--green-00A739);
    border: 1px solid var(--green-00A739);
}

.alert-danger-small{
    background-color: var(--red-soft);
    color: var(--red-ED4C5C);
    border: 1px solid var(--red-ED4C5C);
}

.alert-warning-small{
    background-color: var(--yellow-soft);
    color: var(--yellow-F49C1E);
    border: 1px solid var(--yellow-F49C1E);
}

.alert-info-small{
    background-color: var(--purple-soft);
    color: var(--purple-5A75FF);
    border: 1px solid var(--purple-5A75FF);
}