@font-face {
    font-family: 'Rasa';
    font-display: swap;
    font-style: normal;
    font-weight: 300 700;
    src: url("../fonts/Rasa-VariableFont_wght.woff2") format("woff2");
}

@font-face {
    font-family: 'Rasa';
    font-display: swap;
    font-style: italic;
    font-weight: 300 700;
    src: url("../fonts/Rasa-Italic-VariableFont_wght.woff2") format("woff2");
}

@font-face {
    font-family: 'Host Grotesk';
    font-display: swap;
    font-style: normal;
    font-weight: 300 800;
    src: url("../fonts/HostGrotesk-VariableFont_wght.woff2") format("woff2");
}

@font-face {
    font-family: 'Host Grotesk';
    font-display: swap;
    font-style: italic;
    font-weight: 300 800;
    src: url("../fonts/HostGrotesk-Italic-VariableFont_wght.woff2") format("woff2");
}

:root {
    /**
     * (16 * 1) * 1.200 
     */
    --text-x5l: 2.986rem;
    --text-x4l: 2.488rem;
    --text-x3l: 2.074rem;
    --text-x2l: 1.728rem;
    --text-xl: 1.44rem;
    --text-l: 1.2rem;

    --text-m: 1rem;

    /**
     * (16 - 1) * 1.414 
     */
    --text-s: .911rem;
    --text-xs: .867rem;
    --text-x2s: .823rem;
    --text-x3s: .779rem;
    --text-x4s: .734rem;
    --text-x5s: .690rem;
    --text-x6s: .646rem;
    --text-x7s: .602rem;
    --text-x8s: .558rem;

    --light: #ffffff;
    --dark: #02000b;

    --gray-1: #222052;
    --gray-2: #3b3965;
    --gray-3: #545179;
    --gray-4: #6c6a8c;
    --gray-5: #85839f;
    --gray-6: #9d9cb2;
    --gray-7: #b6b5c5;
    --gray-8: #cecdd9;
    --gray-9: #e7e6ec;

    --primary-light: #1b1923;
    --primary: #02000b;
    --primary-dark: #02000a;

    --secondary-light: #d1f2eb;
    --secondary: #a3e4d7;
    --secondary-dark: #76d7c4;

    --danger-light: #f1948a;
    --danger: #ec7063;
    --danger-dark: #bd5a4f;

    --warning-light: #f7dc6f;
    --warning: #f4d03f;
    --warning-dark: #f1c40f;

    --success-light: #7dcea0;
    --success: #52be80;
    --success-dark: #27ae60;

    --heading-font: "Rasa", serif;
    --global-font: "Host Grotesk", sans-serif;
}

body {
    color: var(--dark);
    font-family: var(--global-font);
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    margin-bottom: .5em;
    font-weight: 800;
    font-family: var(--heading-font);
}

p {
    margin-bottom: 1em;
}

a {
    color: inherit;
    text-decoration: none;
}

b {
    font-weight: 600;
}

ol, ul {
    margin-top: 0;
    margin-bottom: 1em;
    padding-left: 2em;
}

/*//////////////////////////////////////////////////////////
Layout
/////////////////////////////////////////////////////////*/

.wrapper {
    margin: 4.5em 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1em;
}

/*///// Flex /////*/

.flex        { display: flex }
.flex-row    { flex-direction: row }
.flex-column { flex-direction: column }

.flex-align-start  { align-items: flex-start }
.flex-align-center { align-items: center }
.flex-align-end    { align-items: flex-end }

.flex-justify-start   { justify-content: flex-start }
.flex-justify-end     { justify-content: flex-end }
.flex-justify-center  { justify-content: center }
.flex-justify-between { justify-content: space-between }

.flex-wrap   { flex-wrap: wrap }
.flex-nowrap { flex-wrap: nowrap }

.flex-shrink-0 { flex-shrink: 0 }

.gap-025  { gap: .25em }
.gap-05   { gap: .5em }
.gap-1    { gap: 1em }
.gap-1-5  { gap: 1.5em }
.gap-2    { gap: 2em }

/*///// Grid /////*/

.grid { display: grid }

.grid-6 { grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr )) }
.grid-4 { grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr )) }
.grid-3 { grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr )) }
.grid-2 { grid-template-columns: repeat( auto-fill, minmax( 380px, 1fr )) }

/**
 * Update: v1.0.1 
 */
.grid-fill-min-400 { grid-template-columns: repeat( auto-fill, minmax( 400px, 1fr ) ) }
.grid-fill-min-300 { grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) ) }
.grid-fill-min-250 { grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr ) ) }
.grid-fill-min-200 { grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) ) }
.grid-fill-min-100 { grid-template-columns: repeat( auto-fill, minmax( 100px, 1fr ) ) }

.grid-fit-min-400 { grid-template-columns: repeat( auto-fit, minmax( 400px, 1fr ) ) }
.grid-fit-min-300 { grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) ) }
.grid-fit-min-250 { grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) ) }
.grid-fit-min-200 { grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) ) }
.grid-fit-min-100 { grid-template-columns: repeat( auto-fit, minmax( 100px, 1fr ) ) }

.grid-gap-025 { grid-gap: .25em }
.grid-gap-05  { grid-gap: .5em }
.grid-gap-1   { grid-gap: 1em }
.grid-gap-1-5 { grid-gap: 1.5em }
.grid-gap-2   { grid-gap: 2em }
.grid-gap-2-5 { grid-gap: 2.5em }
.grid-gap-3   { grid-gap: 3em }

/*///// Position /////*/

.position-fixed    { position: fixed }
.position-relative { position: relative }
.position-absolute { position: absolute }

.top-0   { top: 0 }
.top-05  { top: .5em }
.top-1   { top: 1em }
.top-1-5 { top: 1.5em }
.top-2   { top: 2em }

.left-0   { left: 0 }
.left-05  { left: .5em }
.left-1   { left: 1em }
.left-1-5 { left: 1.5em }
.left-2   { left: 2em }

.right-0   { right: 0 }
.right-05  { right: .5em }
.right-1   { right: 1em }
.right-1-5 { right: 1.5em }
.right-2   { right: 2em }

.bottom-0   { bottom: 0 }
.bottom-05  { bottom: .5em }
.bottom-1   { bottom: 1em }
.bottom-1-5 { bottom: 1.5em }
.bottom-2   { bottom: 2em }

/*///// Display /////*/

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

/*///// Overflow /////*/

.overflow-auto     { overflow: auto }
.overflow-hidden   { overflow: hidden }
.overflow-x-scroll { overflow-x: scroll }
.overflow-y-scroll { overflow-y: scroll }

/*///// Float /////*/

.float-left { float: left }
.float-right { float: right }

/*//////////////////////////////////////////////////////////
Colors & Backgrounds
/////////////////////////////////////////////////////////*/

/*///// Colors /////*/

.gray-1 { color: var(--gray-1) }
.gray-2 { color: var(--gray-2) }
.gray-3 { color: var(--gray-3) }
.gray-4 { color: var(--gray-4) }
.gray-5 { color: var(--gray-5) }
.gray-6 { color: var(--gray-6) }
.gray-7 { color: var(--gray-7) }
.gray-8 { color: var(--gray-8) }
.gray-9 { color: var(--gray-9) }

.color-dark  { color: var(--dark) }
.color-light { color: var(--light) }

.color-primary-light { color: var(--primary-light) }
.color-primary       { color: var(--primary) }
.color-primary-dark  { color: var(--primary-dark) }

.color-secondary-light { color: var(--secondary-light) }
.color-secondary       { color: var(--secondary) }
.color-secondary-dark  { color: var(--secondary-dark) }

.color-danger-light { color: var(--danger-light) }
.color-danger       { color: var(--danger) }
.color-danger-dark  { color: var(--danger-dark) }

.color-warning-light { color: var(--warning-light) }
.color-warning       { color: var(--warning) }
.color-warning-dark  { color: var(--warning-dark) }

.color-success-light { color: var(--success-light) }
.color-success       { color: var(--success) }
.color-success-dark  { color: var(--success-dark) }

/*///// Backgrounds /////*/

.bg-gray-1 { background: var(--gray-1) }
.bg-gray-2 { background: var(--gray-2) }
.bg-gray-3 { background: var(--gray-3) }
.bg-gray-4 { background: var(--gray-4) }
.bg-gray-5 { background: var(--gray-5) }
.bg-gray-6 { background: var(--gray-6) }
.bg-gray-7 { background: var(--gray-7) }
.bg-gray-8 { background: var(--gray-8) }
.bg-gray-9 { background: var(--gray-9) }

.bg-dark  { background: var(--dark) }
.bg-light { background: var(--light) }

.bg-primary-light { background: var(--primary-light) }
.bg-primary       { background: var(--primary) }
.bg-primary-dark  { background: var(--primary-dark) }

.bg-secondary-light { background: var(--secondary-light) }
.bg-secondary       { background: var(--secondary) }
.bg-secondary-dark  { background: var(--secondary-dark) }

.bg-danger-light { background: var(--danger-light) }
.bg-danger       { background: var(--danger) }
.bg-danger-dark  { background: var(--danger-dark) }

.bg-warning-light { background: var(--warning-light) }
.bg-warning       { background: var(--warning) }
.bg-warning-dark  { background: var(--warning-dark) }

.bg-success-light { background: var(--success-light) }
.bg-success       { background: var(--success) }
.bg-success-dark  { background: var(--success-dark) }

/*//////////////////////////////////////////////////////////
Typography
/////////////////////////////////////////////////////////*/

.heading-font { font-family: var(--heading-font) }
.global-font  { font-family: var(--global-font) }

/*///// Font Weight /////*/

.font-w300 { font-weight: 300 }
.font-w400 { font-weight: 400 }
.font-w500 { font-weight: 500 }
.font-w600 { font-weight: 600 }
.font-w700 { font-weight: 700 }
.font-w800 { font-weight: 800 }
.font-w900 { font-weight: 900 }

/*///// Text Alignt /////*/

.text-left    { text-align: left }
.text-center  { text-align: center }
.text-right   { text-align: right }
.text-justify { text-align: justify }

/*///// Text Style /////*/

.text-italic        { font-style: italic }
.text-bold          { font-weight: bold }
.text-underline     { text-decoration: underline }
.text-line-through  { text-decoration: line-through }

/*///// Text Size /////*/

.text-l   { font-size: var(--text-l) }
.text-xl  { font-size: var(--text-xl) }
.text-x2l { font-size: var(--text-x2l) }
.text-x3l { font-size: var(--text-x3l) }
.text-x4l { font-size: var(--text-x4l) }
.text-x5l { font-size: var(--text-x5l) }

.text-m   { font-size: var(--text-m) }

.text-s   { font-size: var(--text-s) }
.text-xs  { font-size: var(--text-xs) }
.text-x2s { font-size: var(--text-x2s) }
.text-x3s { font-size: var(--text-x3s) }
.text-x4s { font-size: var(--text-x4s) }
.text-x5s { font-size: var(--text-x5s) }
.text-x6s { font-size: var(--text-x6s) }
.text-x7s { font-size: var(--text-x7s) }
.text-x8s { font-size: var(--text-x8s) }

/*///// Line Height /////*/

.lh-1   { line-height: 1 }
.lh-1-1 { line-height: 1.1 }
.lh-1-2 { line-height: 1.2 }
.lh-1-3 { line-height: 1.3 }
.lh-1-4 { line-height: 1.4 }
.lh-1-5 { line-height: 1.5 }
.lh-1-6 { line-height: 1.6 }
.lh-1-7 { line-height: 1.7 }
.lh-1-8 { line-height: 1.8 }

/*///// Wrap /////*/

.white-space-nowrap { white-space: nowrap }

.text-wrap { text-wrap: wrap }
.text-no-wrap { text-wrap: nowrap }

.text-ellipsis { text-overflow: ellipsis; }

/*//////////////////////////////////////////////////////////
Sizing
/////////////////////////////////////////////////////////*/

.w-100vh { width: 100vh }
.w-auto  { width: auto }
.w-100   { width: 100% }
.w-90    { width: 90% }
.w-80    { width: 80% }
.w-70    { width: 70% }
.w-60    { width: 60% }
.w-50    { width: 50% }
.w-40    { width: 40% }
.w-30    { width: 30% }
.w-20    { width: 20% }
.w-10    { width: 10% }

.h-100vh { height: 100vh }
.h-auto  { height: auto }
.h-100   { height: 100% }
.h-90    { height: 90% }
.h-80    { height: 80% }
.h-70    { height: 70% }
.h-60    { height: 60% }
.h-50    { height: 50% }
.h-40    { height: 40% }
.h-30    { height: 30% }
.h-20    { height: 20% }
.h-10    { height: 10% }

/*///// Margin & Padding /////*/

.reset-margin  { margin: 0 !important }
.reset-padding { padding: 0 !important }

/*///// Margin /////*/

.m-2-5 { margin: 2.5em }
.m-2   { margin: 2em }
.m-1-5 { margin: 1.5em }
.m-1   { margin: 1em }
.m-05  { margin: .5em }

.mt-5   { margin-top: 5em }
.mt-4-5 { margin-top: 4.5em }
.mt-4   { margin-top: 4em }
.mt-3-5 { margin-top: 3.5em }
.mt-3   { margin-top: 3em }
.mt-2-5 { margin-top: 2.5em }
.mt-2   { margin-top: 2em }
.mt-1-5 { margin-top: 1.5em }
.mt-1   { margin-top: 1em }
.mt-05  { margin-top: .5em }

.mr-5   { margin-right: 5em }
.mr-4-5 { margin-right: 4.5em }
.mr-4   { margin-right: 4em }
.mr-3-5 { margin-right: 3.5em }
.mr-3   { margin-right: 3em }
.mr-2-5 { margin-right: 2.5em }
.mr-2   { margin-right: 2em }
.mr-1-5 { margin-right: 1.5em }
.mr-1   { margin-right: 1em }
.mr-05  { margin-right: .5em }

.mb-5   { margin-bottom: 5em }
.mb-4-5 { margin-bottom: 4.5em }
.mb-4   { margin-bottom: 4em }
.mb-3-5 { margin-bottom: 3.5em }
.mb-3   { margin-bottom: 3em }
.mb-2-5 { margin-bottom: 2.5em }
.mb-2   { margin-bottom: 2em }
.mb-1-5 { margin-bottom: 1.5em }
.mb-1   { margin-bottom: 1em }
.mb-05  { margin-bottom: .5em }

.ml-5   { margin-left: 5em }
.ml-4-5 { margin-left: 4.5em }
.ml-4   { margin-left: 4em }
.ml-3-5 { margin-left: 3.5em }
.ml-3   { margin-left: 3em }
.ml-2-5 { margin-left: 2.5em }
.ml-2   { margin-left: 2em }
.ml-1-5 { margin-left: 1.5em }
.ml-1   { margin-left: 1em }
.ml-05  { margin-left: .5em }

/*///// Padding /////*/

.p-2-5 { padding: 2.5em }
.p-2   { padding: 2em }
.p-1-5 { padding: 1.5em }
.p-1   { padding: 1em }
.p-05  { padding: .5em }

.pt-5   { padding-top: 5em }
.pt-4-5 { padding-top: 4.5em }
.pt-4   { padding-top: 4em }
.pt-3-5 { padding-top: 3.5em }
.pt-3   { padding-top: 3em }
.pt-2-5 { padding-top: 2.5em }
.pt-2   { padding-top: 2em }
.pt-1-5 { padding-top: 1.5em }
.pt-1   { padding-top: 1em }
.pt-05  { padding-top: .5em }

.pb-5   { padding-bottom: 5em }
.pb-4-5 { padding-bottom: 4.5em }
.pb-4   { padding-bottom: 4em }
.pb-3-5 { padding-bottom: 3.5em }
.pb-3   { padding-bottom: 3em }
.pb-2-5 { padding-bottom: 2.5em }
.pb-2   { padding-bottom: 2em }
.pb-1-5 { padding-bottom: 1.5em }
.pb-1   { padding-bottom: 1em }
.pb-05  { padding-bottom: .5em }

/*//////////////////////////////////////////////////////////
Misc
/////////////////////////////////////////////////////////*/

/*///// Border /////*/

.hrl {
    display: block;
    width: 100%;
    height: .5px;
    background: var(--gray-9);
}

/*///// Border Radius /////*/

.br-s  { border-radius: .5em }
.br-m  { border-radius: 1em }
.br-l  { border-radius: 1.5em }
.br-xl { border-radius: 2em }

/*///// Cursor /////*/

.cursor-pointer { cursor: pointer }

/*///// Rotate /////*/

.rotate-45  { transform: rotate(45deg) }
.rotate-90  { transform: rotate(90deg) }
.rotate-135 { transform: rotate(135deg) }
.rotate-180 { transform: rotate(180deg) }
.rotate-225 { transform: rotate(225deg) }
.rotate-270 { transform: rotate(270deg) }
.rotate-315 { transform: rotate(315deg) }

/*///// Transition /////*/

.transition-5s { transition: all .5s ease-out }
.transition-4s { transition: all .4s ease-out }
.transition-3s { transition: all .3s ease-out }
.transition-2s { transition: all .2s ease-out }

/*///// Text hover /////*/

.text-hover-dark {
    background-image: linear-gradient(var(--dark), var(--dark));
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0% 2px;
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
}

.text-hover-dark:hover {
    background-size: 100% 2px;
}

/*//////////////////////////////////////////////////////////
Image
/////////////////////////////////////////////////////////*/

.aspect-ratio-18-9 { aspect-ratio: 18/9 }
.aspect-ratio-9-18 { aspect-ratio: 9/18 }
.aspect-ratio-16-9 { aspect-ratio: 16/9 }
.aspect-ratio-9-16 { aspect-ratio: 9/16 }
.aspect-ratio-4-3  { aspect-ratio: 4/3 } 
.aspect-ratio-3-4  { aspect-ratio: 3/4 } 
.aspect-ratio-3-2  { aspect-ratio: 3/2 } 
.aspect-ratio-2-3  { aspect-ratio: 2/3 } 
.aspect-ratio-1-1  { aspect-ratio: 1/1 } 

.image-fluid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.image-hover img {
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
}

.image-hover:hover img {
    transform: scale(1.1);
}

.image-circle-s {
    width: 25px;
    height: 25px;
    border-radius: 25px;
    object-fit: cover;
}

.image-circle-m {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    object-fit: cover;
}

.image-circle-l {
    width: 35px;
    height: 35px;
    border-radius: 35px;
    object-fit: cover;
}

/*//////////////////////////////////////////////////////////
Call to Action (CTA)
/////////////////////////////////////////////////////////*/

.btn-xs {
    display: inline-block;
    padding: .125em .5em;
}

.btn-s {
    display: inline-block;
    padding: .25em .75em;
}

.btn-m {
    display: inline-block;
    padding: .5em 1em;
}

.btn-l {
    display: inline-block;
    padding: .75em 1.25em;
}

.btn-xl {
    display: inline-block;
    padding: 1em 1.5em;
}

.btn-rounded {
    border-radius: 100px;
}

/*///// separator /////*/

.btn-circle-s {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border-radius: 25px;
}

.btn-circle-m {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 30px;
}

.btn-circle-l {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border-radius: 35px;
}

.btn-circle-xl {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 40px;
}

.btn-circle-x2l {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 45px;
}

.btn-circle-x3l {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50px;
}

.btn-shadow {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/*///// separator /////*/

.btn-gray {
    background: var(--gray-9);
    color: var(--gray-1);
    border: 1px solid var(--gray-9);
}

.btn-gray:hover {
    background: var(--gray-8);
    border: 1px solid var(--gray-8);
}

.btn-border-gray {
    border: 1px solid var(--gray-9);
    color: var(--dark);
}

.btn-border-gray:hover {
    border: 1px solid var(--gray-8);
    color: var(--dark);
}

/*///// separator /////*/

.btn-dark {
    background: var(--dark);
    color: var(--light);
}

.btn-border-dark {
    border: 1px solid var(--dark);
    color: var(--dark);
}

.btn-border-dark:hover {
    background: var(--dark);
    color: var(--light);
}

/*///// separator /////*/

.btn-light {
    background: var(--light);
    color: var(--dark);
    border: 1px solid var(--light);
}

.btn-border-light {
    border: 1px solid var(--light);
    color: var(--light);
}

.btn-border-light:hover {
    background: var(--light);
    color: var(--dark);
}

/*///// separator /////*/

.btn-primary {
    background: var(--primary);
    color: var(--light);
    border: 1px solid var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border: 1px solid var(--primary-dark);
}

.btn-border-primary {
    border: 1px solid var(--primary);
    color: var(--primary);
}

.btn-border-primary:hover {
    background: var(--primary);
    color: var(--light);
}

/*///// separator /////*/

.btn-danger {
    background: var(--danger);
    color: var(--light);
    border: 1px solid var(--danger);
}

.btn-danger:hover {
    background: var(--danger-dark);
    border: 1px solid var(--danger-dark);
}

.btn-border-danger {
    border: 1px solid var(--danger);
    color: var(--danger);
}

.btn-border-danger:hover {
    background: var(--danger);
    color: var(--light);
}

/*///// separator /////*/

.btn-warning {
    background: var(--warning);
    color: var(--light);
    border: 1px solid var(--warning);
}

.btn-warning:hover {
    background: var(--warning-dark);
    border: 1px solid var(--warning-dark);
}

.btn-border-warning {
    border: 1px solid var(--warning);
    color: var(--warning);
}

.btn-border-warning:hover {
    background: var(--warning);
    color: var(--light);
}

/*///// separator /////*/

.btn-success {
    background: var(--success);
    color: var(--light);
    border: 1px solid var(--success);
}

.btn-success:hover {
    background: var(--success-dark);
    border: 1px solid var(--success-dark);
}

.btn-border-success {
    border: 1px solid var(--success);
    color: var(--success);
}

.btn-border-success:hover {
    background: var(--success);
    color: var(--light);
}

/*///// Table /////*/

.table-group {
    overflow: hidden;
    margin-bottom: 1em;
}

.table-group-table {
    overflow: auto;
}

.table-group table {
    border-collapse: collapse;
    width: 100%;
    table-layout: auto;
    white-space: nowrap;
}

.table-group table th {
    padding: .5em;
    color: var(--dark);
    background: var(--dark);
    color: var(--light);
    font-weight: 500;
    font-size: var(--text-s);
}

.table-group table td {
    padding: 1em;
    border-bottom: 1px solid var(--gray-9);
    font-size: var(--text-xs);
}

/*///// Form /////*/

.input-group {
    margin-bottom: 1.5em;
}

.input-group label {
    display: inline-block;
    font-size: var(--text-xs);
    margin-bottom: .5em;
}

.input-group.label-style {
    margin-bottom: 1em;
}

.input-group.label-style label {
    background: var(--light);
    margin: 0;
    padding: 0 .2em;
    margin-left: 1em;
    transform: translateY(.8em);
    color: var(--gray-5);
}

.input-group input, 
.input-group textarea, 
.input-group select {
    width: 100%;
    padding: .8em 1em;
    border: none;
    border: 1px solid var(--gray-8);
    font-family: inherit;
    line-height: inherit;
    outline: none;
    background: transparent;
    font-size: var(--text-xs);
}

.input-group input:not(input[type=checkbox], input[type=radio]):focus, 
.input-group textarea:focus, 
.input-group select:focus {
    outline: 1px solid var(--dark);
    border: 1px solid var(--dark);
}

.input-group input[type=checkbox],
.input-group input[type=radio] {
    display: inline-block;
    width: auto;
}

/*///// Custom Checkbox /////*/

.custom-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5em;
}

.custom-checkbox-input {
    position: relative;
}

.custom-checkbox-input {
    width: 15px;
    height: 15px;
}

.custom-checkbox-input span {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 10px;
    text-align: center;
    border: 1px solid var(--gray-8);
}

.custom-checkbox-input span:before {
    display: inline-block;
    font: var(--fa-font-solid);
    content: "\f00c";
    font-size: var(--text-x5s);
    color: transparent;
}

.custom-checkbox-input input {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.custom-checkbox-input input:checked ~ span {
    background: var(--dark);
    border: 1px solid var(--dark);
}

.custom-checkbox-input input:checked ~ span:before {
    color: var(--light);
}

.custom-checkbox label {
    margin: 0;
}

/*///// Alert Box /////*/

.alert-box-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 0 1em;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2em;
    background: rgba(0, 0, 0, .5);
    z-index: 1000;
}

.alert-box {
    overflow: hidden;
    width: 400px;
    height: auto;
    background: var(--light);
}

.alert-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    background: var(--dark);
    color: var(--light);
    padding: 1em;
}

.alert-box-header span:nth-child(2) {
    cursor: pointer;
}

.alert-box-entry {
    padding: 2em 1em;
    text-align: center;
}

.alert-box-entry h2 {
    font-family: var(--font);
    font-weight: 600;
}

.alert-box-entry p {
    margin-bottom: 0;
    color: var(--gray-4);
    font-size: var(--text-s);
}

.alert-box-footer {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    border-top: 2px dotted var(--gray-9);
}

@media (max-width: 420px) {
    .alert-box {
        width: 100%;
    }
}