@tailwind base;
@tailwind components;
@tailwind utilities;

.badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.85em; /* 14px */
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem; /* 6px */
    background-color: #eaeff2;
    color: #333;
    margin-right: 0.5em; /* Space between badges */
}
.badge.blue {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.8em; /* 14px */
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem; /* 6px */
    background-color: #c4d7ff;
    color: #3159c8;
    margin-right: 0.5em; /* Space between badges */
}

.bg-gray-200 {
    background-color: #e2e8f0;
    color: #1a202c;
}

.bg-yellow-200 {
    background-color: #fefcbf;
    color: #b7791f;
}

.bg-green-200 {
    background-color: #c6f6d5;
    color: #2f855a;
}

.badge-custom {
    background: linear-gradient(to right, #003399 12%, #EEEEEE 10%);
    color: black;
    width: 120px;
    height: 25px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    vertical-align: center;
    position: relative;
    border: 1px solid #000000;
    border-radius: 3px;
    margin: auto;
}

.black-text {
    color: black;
    margin-left: 16px;
    font-size: 1em;
    position: absolute;
    font-weight: 600;
    align: center;
    letter-spacing: 2px;

}

.bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity)) /* #dcfce7 */;
}

.bg-yellow-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 249 195 / var(--tw-bg-opacity)) /* #fef9c3 */;
}


.bg-red-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity)) /* #fee2e2 */;
}

.text-green-400 {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity)) /* #4ade80 */;
}

.text-orange-400 {
    --tw-text-opacity: 1;
    color: rgb(251 146 60 / var(--tw-text-opacity)) /* #fb923c */;
}

.text-yellow-400 {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity)) /* #facc15 */;
}

.text-blue-400 {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity)) /* #60a5fa */;

}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem /* 24px */ * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem /* 24px */ * var(--tw-space-y-reverse));
}

.gap-x-4 {
    column-gap: 1rem /* 16px */;
}

.-bottom-6 {
    bottom: -1.5rem /* -24px */;
}

.left-0 {
    left: 0px;
}

.top-0 {
    top: 0px;
}

.w-6 {
    width: 1.5rem /* 24px */;
}

.h-6 {
    height: 1.5rem /* 24px */;
}

.h-1\.5 {
    height: 0.375rem /* 6px */;
}

.w-1\.5 {
    width: 0.375rem /* 6px */;
}

.flex-none {
    flex: none;
}

.w-px {
    width: 1px;
}

.bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgba(var(--gray-200), var(--tw-bg-opacity));
}

.ring-gray-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(var(--gray-300), var(--tw-ring-opacity));
}

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

.py-0\.5 {
    padding-top: 0.125rem /* 2px */;
    padding-bottom: 0.125rem /* 2px */;
}

.leading-5 {
    line-height: 1.25rem /* 20px */;
}

.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgba(var(--gray-900), var(--tw-text-opacity));
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgba(var(--gray-500), var(--tw-text-opacity));
}

.bg-orange-400 {     --tw-bg-opacity: 1;     background-color: rgb(251 146 60 / var(--tw-bg-opacity)); }
.bg-yellow-400 {     --tw-bg-opacity: 1;     background-color: rgb(250 204 21 / var(--tw-bg-opacity)); }
.bg-blue-400 {       --tw-bg-opacity: 1;     background-color: rgb(96 165 250 / var(--tw-bg-opacity)); }
.bg-green-400 {     --tw-bg-opacity: 1;     background-color: rgb(74 222 128 / var(--tw-bg-opacity)); }

.mt-6 {     margin-top: 1.5rem/* 24px */; }
.gap-x-3 {     column-gap: 0.75rem/* 12px */; }
.pb-12 {     padding-bottom: 3rem/* 48px */; }
.inset-x-0 {     left: 0px;     right: 0px; }
.bottom-0 {     bottom: 0px; }
.pl-3 {     padding-left: 0.75rem/* 12px */; }
.pr-2 {     padding-right: 0.5rem/* 8px */; }
.justify-between {     justify-content: space-between; }