/* text sizes */
.text-xxl {
    font-size: 24px !important;
}

.text-xl {
    font-size: 20px !important;
}

.text-lg {
    font-size: 18px !important;
}

.text-md {
    font-size: 16px !important;
}

.text-base {
    font-size: 14px !important;
}

.text-sm {
    font-size: 12px !important;
}

.text-xs {
    font-size: 10px !important;
}

.text-xxs {
    font-size: 8px !important;
}

/* status styling */
.pending-status {
    text-align: center;
    padding: 5px;
    color: #1306f9;
    background-color: #1509f92e;
    border-radius: 20px;
    border: 1px solid #1306f9;
}

.approved-status {
    text-align: center;
    padding: 5px;
    color: #008000;
    background-color: #0080002f;
    border-radius: 20px;
    border: 1px solid #008000;
}

.completed-status {
    text-align: center;
    padding: 5px;
    color: #008000;
    background-color: #0080002f;
    border-radius: 20px;
    border: 1px solid #008000;
}

.rejected-status {
    text-align: center;
    padding: 5px;
    color: #ff0000;
    background-color: #ff00002c;
    border-radius: 20px;
    border: 1px solid #ff0000;
}


/* Gird from tailwind */
.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.gap-2 {
    gap: 0.5rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

.flex {
    display: flex;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

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

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

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

.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* details styling */
.info-header {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    margin: 0px;
}

.info-value {
    font-size: 16px;
    font-weight: 800;
    color: #000;
    margin: 0px;
}