/* ------------------------------------------------------------------- 
  FONT-WEIGHT
---------------------------------------------------------------------- */

.font-thin {
    font-weight: 100;
}

.font-extralight {
    font-weight: 200;
}

.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

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

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

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

.font-extrabold {
    font-weight: 800;
}

.font-black {
    font-weight: 900;
}

/* ------------------------------------------------------------------- 
  FLEX DIRECTION 
---------------------------------------------------------------------- */

.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  
---------------------------------------------------------------------- */
.flex {
    display: flex
}
.flex-1 {
    flex: 1 1 0%;
}

.flex-auto {
    flex: 1 1 auto;
}

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

.flex-none {
    flex: none;
}

/* ------------------------------------------------------------------- 
  Display  
---------------------------------------------------------------------- */

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.inline-flex {
    display: inline-flex;
}
.tw-grid {
    display: grid;
}
.hidden {
    display: none;
}


.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;
}








/* ------------------------------------------------------------------- 
 CURSOR 
--------------------------------------------------------------------- */

.cursor-pointer {
    cursor: pointer;
}


/* ------------------------------------------------------------------- 
 TEXT DECORATION 
--------------------------------------------------------------------- */

.underline {
    text-decoration-line: underline;
}

.no-underline {
    text-decoration-line: none;
}



/* ------------------------------------------------------------------- 
 HOVER BG COLOR 
--------------------------------------------------------------------- */

/* COOL GREY */
.bg-gray-cool-050 {
    background: var(--gray-cool-050);
}

.bg-gray-cool-100 {
    background: var(--gray-cool-100);
}

.bg-gray-cool-200 {
    background: var(--gray-cool-200);
}
.bg-gray-cool-300 {
    background: var(--gray-cool-300);
}

.bg-gray-cool-400 {
    background: var(--gray-cool-400);
}
.bg-gray-cool-500 {
    background: var(--gray-cool-500);
}

.bg-gray-cool-600 {
    background: var(--gray-cool-600);
}
.bg-gray-cool-700 {
    background: var(--gray-cool-700);
}

.bg-gray-cool-800 {
    background: var(--gray-cool-800);
}
.bg-gray-cool-900 {
    background: var(--gray-cool-900);
}

/* VIVID BLUE */

.bg-blue-vivid-050 {
    background: var(--blue-vivid-050);
}

.bg-blue-vivid-100 {
    background: var(--blue-vivid-100);
}

.bg-blue-vivid-200 {
    background: var(--blue-vivid-200);
}

.bg-blue-vivid-300 {
    background: var(--blue-vivid-300);
}

.bg-blue-vivid-400 {
    background: var(--blue-vivid-400);
}

.bg-blue-vivid-500 {
    background: var(--blue-vivid-500);
}

.bg-blue-vivid-600 {
    background: var(--blue-vivid-600);
}

.bg-blue-vivid-700 {
    background: var(--blue-vivid-700);
}

.bg-blue-vivid-800 {
    background: var(--blue-vivid-800);
}

.bg-blue-vivid-900 {
    background: var(--blue-vivid-900);
}


/* CYAN BLUE */

.bg-cyan-vivid-050 {
    background: var(--cyan-vivid-050);
}

.bg-cyan-vivid-100 {
    background: var(--cyan-vivid-100);
}

.bg-cyan-vivid-200 {
    background: var(--cyan-vivid-200);
}

.bg-cyan-vivid-300 {
    background: var(--cyan-vivid-300);
}

.bg-cyan-vivid-400 {
    background: var(--cyan-vivid-400);
}

.bg-cyan-vivid-500 {
    background: var(--cyan-vivid-500);
}

.bg-cyan-vivid-600 {
    background: var(--cyan-vivid-600);
}

.bg-cyan-vivid-700 {
    background: var(--cyan-vivid-700);
}

.bg-cyan-vivid-800 {
    background: var(--cyan-vivid-800);
}

.bg-cyan-vivid-900 {
    background: var(--cyan-vivid-900);
}

/* ORANGE VIVID */

.bg-orange-vivid-050 {
    background: var(--orange-vivid-050);
}

.bg-orange-vivid-100 {
    background: var(--orange-vivid-100);
}

.bg-orange-vivid-200 {
    background: var(--orange-vivid-200);
}

.bg-orange-vivid-300 {
    background: var(--orange-vivid-300);
}

.bg-orange-vivid-400 {
    background: var(--orange-vivid-400);
}

.bg-orange-vivid-500 {
    background: var(--orange-vivid-500);
}

.bg-orange-vivid-600 {
    background: var(--orange-vivid-600);
}

.bg-orange-vivid-700 {
    background: var(--orange-vivid-700);
}

.bg-orange-vivid-800 {
    background: var(--orange-vivid-800);
}

.bg-orange-vivid-900 {
    background: var(--orange-vivid-900);
}

/* RED VIVID */

.bg-red-vivid-050 {
    background: var(--red-vivid-050);
}

.bg-red-vivid-100 {
    background: var(--red-vivid-100);
}

.bg-red-vivid-200 {
    background: var(--red-vivid-200);
}

.bg-red-vivid-300 {
    background: var(--red-vivid-300);
}

.bg-red-vivid-400 {
    background: var(--red-vivid-400);
}

.bg-red-vivid-500 {
    background: var(--red-vivid-500);
}

.bg-red-vivid-600 {
    background: var(--red-vivid-600);
}

.bg-red-vivid-700 {
    background: var(--red-vivid-700);
}

.bg-red-vivid-800 {
    background: var(--red-vivid-800);
}

.bg-red-vivid-900 {
    background: var(--red-vivid-900);
}

/* YELLOW VIVID */

.bg-yellow-vivid-050 {
    background: var(--yellow-vivid-050);
}

.bg-yellow-vivid-100 {
    background: var(--yellow-vivid-100);
}

.bg-yellow-vivid-200 {
    background: var(--yellow-vivid-200);
}

.bg-yellow-vivid-300 {
    background: var(--yellow-vivid-300);
}

.bg-yellow-vivid-400 {
    background: var(--yellow-vivid-400);
}

.bg-yellow-vivid-500 {
    background: var(--yellow-vivid-500);
}

.bg-yellow-vivid-600 {
    background: var(--yellow-vivid-600);
}

.bg-yellow-vivid-700 {
    background: var(--yellow-vivid-700);
}

.bg-yellow-vivid-800 {
    background: var(--yellow-vivid-800);
}

.bg-yellow-vivid-900 {
    background: var(--yellow-vivid-900);
}


/* TEAL */
.bg-tailwind-teal-050 {
    background: var(--tailwind-teal-050);
}

.bg-tailwind-teal-100 {
    background: var(--tailwind-teal-100);
}

.bg-tailwind-teal-200 {
    background: var(--tailwind-teal-200);
}

.bg-tailwind-teal-300 {
    background: var(--tailwind-teal-300);
}

.bg-tailwind-teal-400 {
    background: var(--tailwind-teal-400);
}

.bg-tailwind-teal-500 {
    background: var(--tailwind-teal-500);
}

.bg-tailwind-teal-600 {
    background: var(--tailwind-teal-600);
}

.bg-tailwind-teal-700 {
    background: var(--tailwind-teal-700);
}

.bg-tailwind-teal-800 {
    background: var(--tailwind-teal-800);
}

.bg-tailwind-teal-900 {
    background: var(--tailwind-teal-900);
}





/* ------------------------------------------------------------------- 
 HOVER TEXT COLOR 
--------------------------------------------------------------------- */

.text-tailwind-white {
    color: white;
}


/* GRAY COOL */
.text-gray-cool-050 {
    color: var(--gray-cool-050);
}

.text-gray-cool-100 {
    color: var(--gray-cool-100);
}

.text-gray-cool-200 {
    color: var(--gray-cool-200);
}

.text-gray-cool-300 {
    color: var(--gray-cool-300);
}

.text-gray-cool-400 {
    color: var(--gray-cool-400);
}

.text-gray-cool-500 {
    color: var(--gray-cool-500);
}

.text-gray-cool-600 {
    color: var(--gray-cool-600);
}

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

.text-gray-cool-800 {
    color: var(--gray-cool-800);
}

.text-gray-cool-900 {
    color: var(--gray-cool-900);
}


/* VIVID BLUE */

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

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

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

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

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

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

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

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

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

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


/* CYAN VIVID */

.text-cyan-vivid-050 {
    color: var(--cyan-vivid-050);
}

.text-cyan-vivid-100 {
    color: var(--cyan-vivid-100);
}

.text-cyan-vivid-200 {
    color: var(--cyan-vivid-200);
}

.text-cyan-vivid-300 {
    color: var(--cyan-vivid-300);
}

.text-cyan-vivid-400 {
    color: var(--cyan-vivid-400);
}

.text-cyan-vivid-500 {
    color: var(--cyan-vivid-500);
}

.text-cyan-vivid-600 {
    color: var(--cyan-vivid-600);
}

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

.text-cyan-vivid-800 {
    color: var(--cyan-vivid-800);
}

.text-cyan-vivid-900 {
    color: var(--cyan-vivid-900);
}



/* ORANGE VIVID */

.text-orange-vivid-050 {
    color: var(--orange-vivid-050);
}

.text-orange-vivid-100 {
    color: var(--orange-vivid-100);
}

.text-orange-vivid-200 {
    color: var(--orange-vivid-200);
}

.text-orange-vivid-300 {
    color: var(--orange-vivid-300);
}

.text-orange-vivid-400 {
    color: var(--orange-vivid-400);
}

.text-orange-vivid-500 {
    color: var(--orange-vivid-500);
}

.text-orange-vivid-600 {
    color: var(--orange-vivid-600);
}

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

.text-orange-vivid-800 {
    color: var(--orange-vivid-800);
}

.text-orange-vivid-900 {
    color: var(--orange-vivid-900);
}

/* RED VIVID */

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

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

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

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

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

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

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

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

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

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

/* YELLOW VIVID */

.text-yellow-vivid-050 {
    color: var(--yellow-vivid-050);
}

.text-yellow-vivid-100 {
    color: var(--yellow-vivid-100);
}

.text-yellow-vivid-200 {
    color: var(--yellow-vivid-200);
}

.text-yellow-vivid-300 {
    color: var(--yellow-vivid-300);
}

.text-yellow-vivid-400 {
    color: var(--yellow-vivid-400);
}

.text-yellow-vivid-500 {
    color: var(--yellow-vivid-500);
}

.text-yellow-vivid-600 {
    color: var(--yellow-vivid-600);
}

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

.text-yellow-vivid-800 {
    color: var(--yellow-vivid-800);
}

.text-yellow-vivid-900 {
    color: var(--yellow-vivid-900);
}


/* TEAL */
.text-tailwind-teal-050 {
    color: var(--tailwind-teal-050);
}

.text-tailwind-teal-100 {
    color: var(--tailwind-teal-100);
}

.text-tailwind-teal-200 {
    color: var(--tailwind-teal-200);
}

.text-tailwind-teal-300 {
    color: var(--tailwind-teal-300);
}

.text-tailwind-teal-400 {
    color: var(--tailwind-teal-400);
}

.text-tailwind-teal-500 {
    color: var(--tailwind-teal-500);
}

.text-tailwind-teal-600 {
    color: var(--tailwind-teal-600);
}

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

.text-tailwind-teal-800 {
    color: var(--tailwind-teal-800);
}

.text-tailwind-teal-900 {
    color: var(--tailwind-teal-900);
}