.border-radius { border-radius: 5px }
.background--white { background-color: #fff }
.fit-content { width: fit-content }

/*    grid    */
.grid { display: grid }
.column-2 { grid-template-columns: repeat(2, 1fr) }
.column-4 { grid-template-columns: repeat(4, 1fr) }
.gap-1 {grid-gap: 1rem}
.gap-2 {grid-gap: 2rem}
.column-gap-2 { column-gap: 2rem}
.column-at-end { grid-column: -1 }
.column-at-1 { grid-column: 1 }
.column-at-2 { grid-column: 2 }
.column-at-3 { grid-column: 3 }
.column-full { grid-column: 1 / -1 }
.col-span-2 { grid-column: 2 span}
.col-span-3 { grid-column: 3 span}
.row-full { grid-row: 1 / -1 }


/*    flex    */
.flex { display: flex }
.justify-center { justify-content: center }
.align-center { align-items: center }
.space-between { justify-content: space-between }
.space-even { justify-content: space-evenly }
.space-around { justify-content: space-around }


/*   text   */
.font-1 { font-weight: 100 }
.font-2 { font-weight: 200 }
.font-3 { font-weight: 300 }
.font-4 { font-weight: 400 }
.font-5 { font-weight: 500 }
.font-6 { font-weight: 600 }
.font-7 { font-weight: 700 }
.font-8 { font-weight: 800 }

.text-decoration-none { text-decoration: none; }


/*    Margin    */
.ma_5 {margin: 0.5rem}
.ma-1 {margin: 1rem}
.ma-1_5 {margin: 1.5rem}
.ma-2 {margin: 2rem}
.ma-2_5 {margin: 2.5rem}
.ma-3 {margin: 3rem}

.mt_5 {margin-top: 0.5rem}
.mt-1 {margin-top: 1rem}
.mt-1_5 {margin-top: 1.5rem}
.mt-2 {margin-top: 2rem}
.mt-2_5 {margin-top: 2.5rem}
.mt-3 {margin-top: 3rem}

.mb_5 {margin-bottom: 0.5rem}
.mb-1 {margin-bottom: 1rem}
.mb-1_5 {margin-bottom: 1.5rem}
.mb-2 {margin-bottom: 2rem}
.mb-2_5 {margin-bottom: 2.5rem}
.mb-3 {margin-bottom: 3rem}



.dash-card {
    background-color: #fff;
    height: fit-content;
    padding: 1.5rem;
    border-radius: 5px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.dash-button {
    display: flex;
    align-items: center;
    margin: 0 1rem;
    width: fit-content;
    background-color: #fff;
    font-weight: 500;
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    cursor: pointer;
}

.dash-button a {
    text-decoration: none;
    color: var(--primary-color);
    font-size: 1rem;
}

.icn-btn {
    display: inline-block;
    color: var(--secondary-red);
    cursor: pointer;
}

.icn-btn:hover {
    transform: scale(1.1);
}

.lt-heading {
     margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--light-heading-color);
}
.alt-text {
    color: var(--secondary-text-color);
}
.alert-gray {
    background-color: #ebebeb;
    border-color: #d8d8d8;
}
.current,
.processing {
    background-color: #d3e1ae;
}
.expiring,
.expired {
    background-color: #ff9a9a;
}