/* =========================================================
   BACKGROUNDS
========================================================= */
.bg-transparent {
    background-color: transparent;
}

.bg-light-gray {
    background-color: #FBFBFB;
    background-image: linear-gradient(200deg, #FBFBFB, #F5F5F5);
}

.bg-white {
    background-color: #FFF;
}

.bg-dark-gray {
    background-color: #555
}

.bg-light-blue-gradient {
    background-image: linear-gradient(200deg, #edf1f5, #FFFFFF);
}

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


/* =========================================================
   FONT COLORS
========================================================= */

.font-color-white {
    color: #FFFFFF;
}

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

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

.font-color-gray-dark {
    color: #444;
}

.font-color-gray-medium {
    color: #777;
}

.font-color-green-dark {
    color: var(--color-green);
}


/* =========================================================
   FONT SIZES & TYPOGRAPHY
========================================================= */

.font-size-x-large {
    font-size: 1.6rem;
}

.font-size-large {
    font-size: 1.2rem;
}

.font-size-medium {
    font-size: 1rem;
}

.font-size-small {
    font-size: 0.9rem;
}

.font-size-x-small {
    font-size: 0.8rem;
}

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

.font-italic {
    font-style: italic;
}

.font-family-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.letter-spacing-1 {
    letter-spacing: var(--space-8);
}


/* =========================================================
   LINE HEIGHT
========================================================= */

.line-height-1-25 {
    line-height: 1.25rem;
}

.line-height-1-5 {
    line-height: 1.5rem;
}

.line-height-2 {
    line-height: 2rem;
}


/* =========================================================
   TEXT ALIGNMENT
========================================================= */

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.vertical-align-top {
    vertical-align: top
}


/* =========================================================
   LISTS
========================================================= */

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


/* =========================================================
   MARGINS
========================================================= */
.margin-20 {
    margin: var(--space-20);
}

.margin-x-auto {
    margin-left: auto;
    margin-right: auto;
}

.margin-y-20 {
    margin-top: var(--space-20);
    margin-bottom: var(--space-20);
}

.margin-left-4 {
    margin-left: var(--space-4);
}

.margin-left-20 {
    margin-left: var(--space-20);
}

.margin-top-4 {
    margin-top: var(--space-4);
}

.margin-top-8 {
    margin-top: var(--space-8);
}

.margin-top-16 {
    margin-top: var(--space-16);
}

.margin-top-20 {
    margin-top: var(--space-20);
}

.margin-top-72 {
    margin-top: var(--space-72);
}

.margin-bottom-4 {
    margin-bottom: var(--space-4);
}

.margin-bottom-8 {
    margin-bottom: var(--space-8);
}

.margin-bottom-12 {
    margin-bottom: var(--space-12);
}

.margin-bottom-16 {
    margin-bottom: var(--space-16);
}

.margin-bottom-20 {
    margin-bottom: var(--space-20);
}

.margin-right-16 {
    margin-right: var(--space-16);
}


/* =========================================================
   PADDING
========================================================= */

.padding-4 {
    padding: var(--space-4);
}

.padding-8 {
    padding: var(--space-8);
}

.padding-12 {
    padding: var(--space-12);
}

.padding-16 {
    padding: var(--space-16);
}

.padding-20 {
    padding: var(--space-20);
}

.padding-left-40 {
    padding-left: var(--space-40);
}

.padding-top-20 {
    padding-top: var(--space-20);
}

.padding-x-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.padding-x-20 {
    padding-left: var(--space-20);
    padding-right: var(--space-20);
}


.padding-y-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.padding-y-12 {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.padding-right-40 {
    padding-right: var(--space-40);
}


/* =========================================================
   DISPLAY
========================================================= */

.display-none {
    display: none;
}

.display-flex {
    display: flex;
}

.display-block {
    display: block;
}


/* =========================================================
   FLEX UTILITIES
========================================================= */

.no-wrap {
    white-space: nowrap;
}

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

.flex-direction-column {
    flex-direction: column;
}

.flex-wrap-wrap {
    flex-wrap: wrap;
}

.flex-250 {
    flex: 1 1 250px;
}

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

.align-items-center {
    align-items: center;
}

.align-items-start {
    align-items: flex-start;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-space-between {
    justify-content: space-between;
}

.gap-4 {
    gap: var(--space-4);
}

.gap-8 {
    gap: var(--space-8);
}

.gap-12 {
    gap: var(--space-12);
}

.gap-16 {
    gap: var(--space-16);
}

.gap-20 {
    gap: var(--space-20);
}

.gap-24 {
    gap: var(--space-24);
}


/* =========================================================
   POSITIONING
========================================================= */

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-fixed {
    position: fixed;
}


/* =========================================================
   WIDTH & HEIGHT
========================================================= */

.width-full {
    width: 100%;
}

.min-width-175 {
    min-width: 175px;
}

.min-width-350 {
    min-width: 350px;
}

.max-width-450 {
    max-width: 450px;
}

.max-width-750 {
    max-width: 750px;
}

.max-height-175 {
    max-height: 175px;
}

.max-height-300 {
    max-height: 300px;
}

.width-16 {
    width: var(--space-16);
}

.height-16 {
    height: var(--space-16);
}

.width-20 {
    width: var(--space-20);
}

.height-20 {
    height: var(--space-20);
}

.width-40 {
    width: var(--space-40);
}

.height-0 {
    height: var(--space-0);
}

.height-40 {
    height: var(--space-40);
}


/* =========================================================
   BORDERS
========================================================= */

.border-0 {
    border: 0;
}

.border-light-blue-1 {
    border: 1px solid #e6efff;
}

.border-light-gray-1 {
    border: 1px solid #d1d5db;
}


.border-bottom-light-gray-1 {
    border-bottom: 1px solid #EEE;
}


.border-radius-8 {
    border-radius: var(--space-8);
}

.border-radius-12 {
    border-radius: var(--space-12);
}

.border-radius-20 {
    border-radius: var(--space-20);
}

.border-radius-top-8 {
    border-radius: var(--space-8) var(--space-8) 0 0;
}

.border-radius-top-12 {
    border-radius: var(--space-12) var(--space-12) 0 0;
}

.border-radius-bottom-8 {
    border-radius: 0 0 var(--space-8) var(--space-8);
}

.border-dashed {
    border: 1px dashed #AAA
}

.border-top-dashed {
    border-top: 1px dashed #AAA;
}

.border-collapse-collapse {
    border-collapse: collapse;
}


/* =========================================================
   EFFECTS & INTERACTION
========================================================= */

.box-sizing-border-box {
    box-sizing: border-box;
}

.box-shadow-large {
    box-shadow: 0 0 25px #dae7f5;
}

.pointer-events-none {
    pointer-events: none;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-not-allowed {
    cursor: not-allowed
}

.translate-y-half {
    transform: translateY(-50%);
}


/* =========================================================
   POSITION OFFSETS
========================================================= */

.left-0 {
    left: var(--space-0);
}

.left-12 {
    left: var(--space-12);
}

.right-0 {
    right: var(--space-0);
}

.right-12 {
    right: var(--space-12);
}

.top-0 {
    top: 0;
}

.top-half {
    top: 50%;
}


/* =========================================================
   OVERFLOW
========================================================= */

.overflow-hidden {
    overflow: hidden;
}

.overflow-x-auto {
    overflow-x: auto;
}