@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@700;900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);

:root {
    --base-unit: 16px;
    --border-base: 1px;
    --border-thick: 2px;
    --border-thicker: 4px;
    --border-thickest: 8px;
      
    --color-blue--100: #cfe2ff;
    --color-blue--200: #9ec5fe;
    --color-blue--300: #6ea8fe;
    --color-blue--400: #3d8bfd;
    --color-blue--500: #0d6efd;
    --color-blue--600: #0a58ca;
    --color-blue--700: #084298;
    --color-blue--800: #052c65;
    --color-blue--900: #031633;
    
    --color-indigo--100: #e0cffc;
    --color-indigo--200: #c29ffa;
    --color-indigo--300: #a370f7;
    --color-indigo--400: #8540f5;
    --color-indigo--500: #6610f2;
    --color-indigo--600: #520dc2;
    --color-indigo--700: #3d0a91;
    --color-indigo--800: #290661;
    --color-indigo--900: #140330;

    --color-purple--100: #e2d9f3;
    --color-purple--200: #c5b3e6;
    --color-purple--300: #a98eda;
    --color-purple--400: #8c68cd;
    --color-purple--500: #6f42c1;
    --color-purple--600: #59359a;
    --color-purple--700: #432874;
    --color-purple--800: #2c1a4d;
    --color-purple--900: #160d27;

    --color-pink--100: #f7d6e6;
    --color-pink--200: #efadce;
    --color-pink--300: #e685b5;
    --color-pink--400: #de5c9d;
    --color-pink--500: #d63384;
    --color-pink--600: #ab296a;
    --color-pink--700: #801f4f;
    --color-pink--800: #561435;
    --color-pink--900: #2b0a1a;

    --color-red--100: #f8d7da;
    --color-red--200: #f1aeb5;
    --color-red--300: #ea868f;
    --color-red--400: #e35d6a;
    --color-red--500: #dc3545;
    --color-red--600: #b02a37;
    --color-red--700: #842029;
    --color-red--800: #58151c;
    --color-red--900: #2c0b0e;

    --color-orange--100: #ffe5d0;
    --color-orange--200: #fecba1;
    --color-orange--300: #feb272;
    --color-orange--400: #fd9843;
    --color-orange--500: #fd7e14;
    --color-orange--600: #ca6510;
    --color-orange--700: #984c0c;
    --color-orange--800: #653208;
    --color-orange--900: #331904;

    --color-yellow--100: #fff3cd;
    --color-yellow--200: #ffe69c;
    --color-yellow--300: #ffda6a;
    --color-yellow--400: #ffcd39;
    --color-yellow--500: #ffc107;
    --color-yellow--600: #cc9a06;
    --color-yellow--700: #997404;
    --color-yellow--800: #664d03;
    --color-yellow--900: #332701;

    --color-green--100: #d1e7dd;
    --color-green--200: #a3cfbb;
    --color-green--300: #75b798;
    --color-green--400: #479f76;
    --color-green--500: #198754;
    --color-green--600: #146c43;
    --color-green--700: #0f5132;
    --color-green--800: #0a3622;
    --color-green--900: #051b11;

    --color-teal--100: #d2f4ea;
    --color-teal--200: #a6e9d5;
    --color-teal--300: #79dfc1;
    --color-teal--400: #4dd4ac;
    --color-teal--500: #20c997;
    --color-teal--600: #1aa179;
    --color-teal--700: #13795b;
    --color-teal--800: #0d503c;
    --color-teal--900: #06281e;

    --color-cyan--100: #cff4fc;
    --color-cyan--200: #9eeaf9;
    --color-cyan--300: #6edff6;
    --color-cyan--400: #3dd5f3;
    --color-cyan--500: #0dcaf0;
    --color-cyan--600: #0aa2c0;
    --color-cyan--700: #087990;
    --color-cyan--800: #055160;
    --color-cyan--900: #032830;

    --color-grey--100: #f8f9fa;
    --color-grey--200: #e9ecef;
    --color-grey--300: #dee2e6;
    --color-grey--400: #ced4da;
    --color-grey--500: #adb5bd;
    --color-grey--600: #6c757d;
    --color-grey--700: #495057;
    --color-grey--800: #343a40;
    --color-grey--900: #212529;

    --color-white: #fff;
    --color-black: #000;

    --color-taupe--100: #f9f8f6;
    --color-taupe--200: #f1f0e9;
    --color-taupe--300: #dfddd2;
    --color-taupe--400: #b8b6ad;
    --color-taupe--500: #96948d;
    --color-taupe--600: #797772;
    --color-taupe--700: #595854;
    --color-taupe--800: #3c3b39;
    --color-taupe--900: #272625;
    --color-taupe--1000: #1d1c1b;

    --color-lime--100: #f9fbf3;
    --color-lime--200: #eaf2d9;
    --color-lime--300: #d1e4aa;
    --color-lime--400: #99c242;
    --color-lime--500: #72a00d;
    --color-lime--600: #5b800a;
    --color-lime--700: #466308;
    --color-lime--800: #2f4205;
    --color-lime--900: #1f2b03;
    --color-lime--1000: #172003;

    --color-hyper--100: #cddbec;
    --color-hyper--200: #9db7d8;
    --color-hyper--300: #6e95c3;
    --color-hyper--400: #3f72ae;
    --color-hyper--500: #004f98;
    --color-hyper--600: #004281;
    --color-hyper--700: #00366b;
    --color-hyper--800: #002a56;
    --color-hyper--900: #001f42;
    
    --color-maug--100: #cedae3;
    --color-maug--200: #9eb7c7;
    --color-maug--300: #6f94ac;
    --color-maug--400: #407291;
    --color-maug--500: #005176;;
    --color-maug--600: #00405f;
    --color-maug--700: #003049;
    --color-maug--800: #002134;
    --color-maug--900: #001320;
    
    --radius-base: 8px;
    --radius-small: 4px;
    --radius-large: 16px;
    --radius-larger: 24px;
    --radius-circle: 100%;
    --space-minuscule: 1px;
    --space-smallest: 2px;
    --space-smaller: 4px;
    --space-small: 8px;
    --space-slim: 12px;
    --space-base: 16px;
    --space-large: 24px;
    --space-larger: 32px;
    --space-largest: 48px;
    --space-extravagant: 64px;
    --shadow-low: 0px 1px 2px rgba(0,0,0,.25),0px 0px 2px rgba(0,0,0,.1);
    --shadow-base: 0px 1px 4px 0px rgba(0,0,0,.1),0px 4px 12px 0px rgba(0,0,0,.05);
    --shadow-high: 0px 16px 16px 0px rgba(0,0,0,.075),0px 0px 8px 0px rgba(0,0,0,.05);
    --shadow-focus: 0px 0px 0px 2px var(--color-surface),0px 0px 0px 4px var(--color-focus);
    --timing-quick: 100ms;
    --timing-base: 200ms;
    --timing-slow: 300ms;
    --timing-slower: 400ms;
    --timing-slowest: 500ms;
    --timing-loading: 1000ms;
    --timing-loading--extended: 2000ms;
    --opacity-overlay: 0.8;
    --opacity-pressed: 0.6;
    --elevation-default: 0;
    --elevation-base: 1;
    --elevation-menu: 6;
    --elevation-datepicker: 6;
    --elevation-modal: 1001;
    --elevation-tooltip: 1002;
    --elevation-toast: 1003;
    --typography--letterSpacing-base: 0;
    --typography--letterSpacing-loose: 0.4;
    --typography--fontFamily-normal: Inter,Helvetica,Arial,sans-serif;
    --typography--fontFamily-display: Poppins,Helvetica,Arial,sans-serif;
    --typography--lineHeight-large: 1.34;
    --typography--lineHeight-larger: 1.5;
    --typography--lineHeight-largest: 1.75;
    --typography--lineHeight-jumbo: 2;
    --typography--lineHeight-extravagant: 4;
    --typography--lineHeight-base: 1.25;
    --typography--lineHeight-tight: 1.2;
    --typography--lineHeight-tighter: 1.143;
    --typography--lineHeight-tightest: 1.12;
    --typography--lineHeight-minuscule: 1.08;
    --typography--fontSize-extravagant: 48px;
    --typography--fontSize-jumbo: 36px;
    --typography--fontSize-largest: 24px;
    --typography--fontSize-larger: 20px;
    --typography--fontSize-large: 16px;
    --typography--fontSize-base: 14px;
    --typography--fontSize-small: 12px;
    --typography--fontSize-smaller: 10px;
}

/* Bootstrap Button Colors */
.btn-blue {
    color: var(--color-white);
    background-color: var(--color-blue--500);
    border-color: var(--color-blue--600);
}
.btn-blue:hover {
    color: var(--color-blue--100);
    background-color: var(--color-blue--400);
    border-color: var(--color-blue--500);
}

.btn-hyper {
    color: var(--color-white);
    background-color: var(--color-hyper--500);
    border-color: var(--color-hyper--600);
}
.btn-hyper:hover {
    color: var(--color-hyper--100);
    background-color: var(--color-hyper--400);
    border-color: var(--color-hyper--500);
}

.btn-maug {
    color: var(--color-white);
    background-color: var(--color-maug--500);
    border-color: var(--color-maug--600);
}
.btn-maug:hover {
    color: var(--color-maug--100);
    background-color: var(--color-maug--400);
    border-color: var(--color-maug--500);
}

.btn-indigo {
    color: var(--color-white);
    background-color: var(--color-indigo--500);
    border-color: var(--color-indigo--600);
}
.btn-indigo:hover {
    color: var(--color-indigo--100);
    background-color: var(--color-indigo--400);
    border-color: var(--color-indigo--500);
}

.btn-purple {
    color: var(--color-white);
    background-color: var(--color-purple--500);
    border-color: var(--color-purple--600);
}
.btn-purple:hover {
    color: var(--color-purple--600);
    background-color: var(--color-purple--300);
    border-color: var(--color-purple--200);
}

.btn-pink {
    color: var(--color-white);
    background-color: var(--color-pink--500);
    border-color: var(--color-pink--600);
}
.btn-pink:hover {
    color: var(--color-pink--100);
    background-color: var(--color-pink--400);
    border-color: var(--color-pink--500);
}

.btn-red {
    color: var(--color-white);
    background-color: var(--color-red--500);
    border-color: var(--color-red--600);
}
.btn-red:hover {
    color: var(--color-red--100);
    background-color: var(--color-red--400);
    border-color: var(--color-red--500);
}

.btn-orange {
    color: var(--color-white);
    background-color: var(--color-orange--500);
    border-color: var(--color-orange--600);
}
.btn-orange:hover {
    color: var(--color-orange--100);
    background-color: var(--color-orange--400);
    border-color: var(--color-orange--500);
}

.btn-yellow {
    color: var(--color-white);
    background-color: var(--color-yellow--500);
    border-color: var(--color-yellow--600);
}
.btn-yellow:hover {
    color: var(--color-yellow--100);
    background-color: var(--color-yellow--400);
    border-color: var(--color-yellow--500);
}

.btn-green {
    color: var(--color-white);
    background-color: var(--color-green--500);
    border-color: var(--color-green--600);
}
.btn-green:hover {
    color: var(--color-green--100);
    background-color: var(--color-green--400);
    border-color: var(--color-green--500);
}

.btn-teal {
    color: var(--color-white);
    background-color: var(--color-teal--500);
    border-color: var(--color-teal--600);
}
.btn-teal:hover {
    color: var(--color-teal--100);
    background-color: var(--color-teal--400);
    border-color: var(--color-teal--500);
}

.btn-cyan {
    color: var(--color-white);
    background-color: var(--color-cyan--500);
    border-color: var(--color-cyan--600);
}
.btn-cyan:hover {
    color: var(--color-cyan--100);
    background-color: var(--color-cyan--400);
    border-color: var(--color-cyan--500);
}

.btn-grey {
    color: var(--color-white);
    background-color: var(--color-grey--500);
    border-color: var(--color-grey--600);
}
.btn-grey:hover {
    color: var(--color-grey--100);
    background-color: var(--color-grey--400);
    border-color: var(--color-grey--500);
}

.btn-taupe {
    color: var(--color-white);
    background-color: var(--color-taupe--500);
    border-color: var(--color-taupe--600);
}
.btn-taupe:hover {
    color: var(--color-taupe--100);
    background-color: var(--color-taupe--400);
    border-color: var(--color-taupe--500);
}

.btn-lime {
    color: var(--color-white);
    background-color: var(--color-lime--500);
    border-color: var(--color-lime--600);
}
.btn-lime:hover {
    color: var(--color-lime--100);
    background-color: var(--color-lime--400);
    border-color: var(--color-lime--500);
}

/* Inline Buttons */
.inlineButton {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 0.375rem 0.625rem 0.375rem var(--space-small);
    font-size: var(--typography--fontSize-small);
    line-height: 1;
    color: var(--color-heading);
    background-color: var(--color-grey--100);
    border-radius: var(--radius-large);
    overflow: hidden;
}
.inlineButton::before {
    content: "";
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: block;
    width: var(--space-small);
    height: var(--space-small);
    margin-top: var(--space-smallest);
    margin-right: 0.375rem;
    border-radius: 50%;
}
.inlineButton--blue {
    color: var(--color-blue--700);
    background-color: var(--color-blue--200);
}
.inlineButton--blue::before {
    background-color: var(--color-blue--700);
}
.inlineButton--indigo {
    color: var(--color-indigo--700);
    background-color: var(--color-indigo--200);
}
.inlineButton--indigo::before {
    background-color: var(--color-indigo--700);
}
.inlineButton--purple {
    color: var(--color-white);
    background-color: var(--color-purple--500);
}
.inlineButton--purple::before {
    background-color: var(--color-purple--100);
}
.inlineButton--pink {
    color: var(--color-pink--700);
    background-color: var(--color-pink--200);
}
.inlineButton--pink::before {
    background-color: var(--color-pink--700);
}
.inlineButton--red {
    color: var(--color-red--700);
    background-color: var(--color-red--200);
}
.inlineButton--red::before {
    background-color: var(--color-red--700);
}
.inlineButton--orange {
    color: var(--color-orange--700);
    background-color: var(--color-orange--200);
}
.inlineButton--orange::before {
    background-color: var(--color-orange--700);
}
.inlineButton--yellow {
    color: var(--color-yellow--700);
    background-color: var(--color-yellow--200);
}
.inlineButton--yellow::before {
    background-color: var(--color-orange--700);
}
.inlineButton--green {
    color: var(--color-green--700);
    background-color: var(--color-green--200);
}
.inlineButton--green::before {
    background-color: var(--color-green--700);
}
.inlineButton--teal {
    color: var(--color-teal--700);
    background-color: var(--color-teal--200);
}
.inlineButton--teal::before {
    background-color: var(--color-teal--700);
}
.inlineButton--cyan {
    color: var(--color-cyan--700);
    background-color: var(--color-cyan--200);
}
.inlineButton--cyan::before {
    background-color: var(--color-cyan--700);
}
.inlineButton--grey {
    color: var(--color-grey--700);
    background-color: var(--color-grey--200);
}
.inlineButton--grey::before {
    background-color: var(--color-grey--700);
}
.inlineButton--taupe {
    color: var(--color-taupe--700);
    background-color: var(--color-taupe--200);
}
.inlineButton--taupe::before {
    background-color: var(--color-taupe--700);
}
.inlineButton--lime {
    color: var(--color-lime--700);
    background-color: var(--color-lime--200);
}
.inlineButton--lime::before {
    background-color: var(--color-lime--700);
}
.inlineButton--hyper {
    color: var(--color-white);
    background-color: var(--color-hyper--500);
}
.inlineButton--hyper::before {
    background-color: var(--color-hyper--100);
}
.inlineButton--maug {
    color: var(--color-white);
    background-color: var(--color-maug--500);
}
.inlineButton--maug::before {
    background-color: var(--color-maug--100);
}