:root{
    --green: #1CA14D;
    --orange: #F97316;
    --red: #ef4444;
    --yellow: #fcd34d;
    --purple: #8b5cf6;
    --pink: #ec4899;
}

@font-face{
    font-family: "Password";
    src: url("/dist/fonts/passwords/51b459eae74df5b00ba922028ccb20be.eot");
    src: url("/dist/fonts/passwords/51b459eae74df5b00ba922028ccb20be.eot?#iefix")format("embedded-opentype"),
    url("/dist/fonts/passwords/51b459eae74df5b00ba922028ccb20be.woff")format("woff"),
    url("/dist/fonts/passwords/51b459eae74df5b00ba922028ccb20be.woff2")format("woff2"),
    url("/dist/fonts/passwords/51b459eae74df5b00ba922028ccb20be.ttf")format("truetype"),
    url("/dist/fonts/passwords/51b459eae74df5b00ba922028ccb20be.svg#Password")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

* {
    -webkit-font-smoothing: antialiased;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */

:root {
    --sb-track-color: var(--blue-100);
    --sb-thumb-color: var(--blue-300);
    --sb-size: 7px;
}

::-webkit-scrollbar {
    width: var(--sb-size);
    height: var(--sb-size)
}

::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 10px;
    border: none;
}

@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-color: var(--sb-thumb-color)
        var(--sb-track-color);
    }
}


/* Some color overrides */
.btn-secondary {
    color: var(--primary-600);
}

.btn-secondary:hover {
    color: white;
    background-color: #4986BE;
}

.btn-secondary:focus, .btn-secondary:not(:disabled):not(:disabled):active {
    color: #4986BE;
    background-color: rgba(73, 134, 190, 0.1);
    border: 1px solid #4986BE;
}

.btn-secondary:disabled {
    color: #EBEDEF;
    background-color: #9CA3AF;
}

/* Icon buttons to use in card-header's */
.btn-card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 2rem;
    height: 2rem;
    border: 1px solid #E8E8E8;
    background-color: var(--gray-100);
}

.btn.btn-sm {
    font-size: .875rem;
    height: 32px;
}

.btn.btn-sm i.icon {
    font-size: 18px;
}

.btn.btn-md, .btn {
    font-weight: 600;
    font-size: 1rem;
}
.btn.btn-md i.icon {
    font-size: 20px;
}

.btn.btn-lg {
    font-size: 16px;
    height: 60px;
}
.btn.btn-lg i.icon {
    font-size: 24px;
}

.btn.btn-square {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    padding: 0;
    width: 42px;
    height: 42px;
    min-width: 42px;
    max-width: 42px;
    min-height: 42px;
    max-height: 42px;
}

.btn.btn-square.btn-sm {
    width: 32px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    min-width: 32px;
    max-width: 32px;
}

.btn.btn-square.btn-lg {
    width: 60px;
    height: 60px;
    min-width: 60px;
    max-width: 60px;
    min-height: 60px;
    max-height: 60px;
}

/* Question mark to show tooltips */
.card-header-tooltip {
    color: var(--gray-300);
    font-size: .875rem;
    margin-left: .5rem;
}

/* Card-ception */
.card .card {
    background-color: #F9FAFB;
    border: 1px solid #f4f4f4;
}

/* Fixed height scrollable card content (300px) */
.card-content-h-300 {
    height: 300px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Empty card body, show if no data found */
.card-empty {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
    justify-content: center;
    align-items: center;
}

.card-empty .card-empty-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    color: var(--gray-200);
    font-size: 2rem;
}

.card-empty .card-empty-info {
    color: var(--gray-200);
    font-size: 1.25rem;
}

/* Welcome screen (dashboard) */
.welcome-screen-container {
    background-image: url('/dist/img/wallpaper_light.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right 0 bottom 25%;
    padding: 2.125rem;
    height: 100%;
}

.welcome-screen-datetime {
    display: flex;
    align-items: center;
}

.welcome-screen-today-title {
    color: var(--primary-900);
    font-weight: 600;
}

.welcome-screen-clock {
    color: var(--primary-900);
    font-size: 2.625rem;
    font-weight: 600;
    margin-left: 3rem;
}

.welcome-screen-meridiem {
    color: var(--primary-900);
    font-size: 1rem;
    font-weight: 500;
    margin-left: .5rem;
}

.welcome-screen-alert {
    background-color: #E21313!important;
    font-weight: 500;
    font-size: .875rem;
    padding: .625rem 1.125rem;
    margin: 0 0 0 1.5rem;
    border: none;
}

.welcome-screen-footer {
    display: flex;
    align-items: center;
    margin-top: 2.5rem;
}

/* Content Header (Page title/subtitle and buttons) */
.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    row-gap: 14px;
}
.content-header:has(.content-header-back) {
    margin-bottom: 18px;
}
.content-header.form-page-header {
    position: relative;
    justify-content: space-between;
    flex-direction: column;
    row-gap: 16px;
    background: url('/dist/img/form_header_light.png') no-repeat bottom;
    background-size: cover;
    height: 165px;
    padding: 48px 0 32px 0;
    border-radius: 4px;
}
.content-header.form-page-header.profile-bg {
    border: 1px solid var(--gray-200);
    background: url('/dist/img/profile_cover_light.png') no-repeat center;
    margin-bottom: 70px;
    @media (max-width: 480px) {
        margin-bottom: 100px;
    }
;
    background-size: cover;
}
.content-header.form-page-header .content-header-back {
    position: absolute;
    top: 16px;
    left: 12px;
    color: black;
}
.content-header.form-page-header.profile-bg .content-header-back {
    color: var(--primary-600);
}
.content-header.form-page-header .form-page-title {
    color: var(--primary-600);
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    margin: 0;
    text-align: center;
}
.content-header.form-page-header .form-page-description {
    color: var(--gray-600);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
}

.content-header-back {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 8px;
    color: var(--primary-600);
    line-height: 20px;
    text-decoration: none;
}
.content-header-back:hover{text-decoration: none; color: var(--primary-600)}

.content-header-back i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    font-size: 11px;
}

.content-header-back span {font-size: 16px; font-weight: 600}

.content-header-title, .content-header-title h4 {
    font-weight: 600;
}

.content-header-title h4 {
    margin-bottom: 8px;
    line-height: 29px;
}

.content-header-subtitle {
    color: var(--gray-500);
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 20px;
}

.content-header-buttons {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    row-gap: .5rem;
    width: fit-content;
}

.content-header-buttons .btn {
    width: fit-content;
}

.w-max-content {
    width: max-content;
}


.error-statement {
    color: var(--red, #E21313);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    line-height: normal;
}

/* checkbox */

input[type=checkbox]:checked + .checkmark svg path {
    fill: #fff;
}

input[type=checkbox]:checked + .checkmark {
    position: relative;
    top: 2px;
    float: left;
    margin-right: 8px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--primary-500);
    background-color: var(--primary-400);
    border-radius: 4px;
}


.checkmark {
    position: relative;
    top: 2px;
    float: left;
    margin-right: 8px;
    width: 30px;
    height: 30px;
    border: 1px solid #c5c5c5;
    background-color: #fff;
    border-radius: 4px;
}

.checkmark svg {
    position: absolute;
    top: 5px;
    left: 5px;
}

.checkmark svg path {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 71px;
    stroke-dashoffset: 71px;
    transition: all 0.6s ease;
}

.invisible {
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    opacity: 0;
}

.label-cbx {
    display: flex;
    align-items: center;
}

.label-cbx span {
    margin-top: 4px;
}


input[type=checkbox]:checked + .checkmark-sm,
tr.selected .checkmark-sm.row-select {
    position: relative;
    top: 2px;
    float: left;
    margin-right: 8px;
    width: 24px;
    height: 24px;
    border: 1px solid var(--primary-500);
    background-color: var(--primary-400);
    border-radius: 4px;
}

.checkmark-sm {
    position: relative;
    top: 2px;
    float: left;
    margin-right: 8px;
    width: 24px;
    height: 24px;
    border: 1px solid #c5c5c5;
    background-color: #fff;
    border-radius: 4px;
}

.checkmark-sm svg {
    position: absolute;
    top: 4px;
    left: 4px;
}


input[type=checkbox]:checked + .checkmark-lg {
    position: relative;
    top: 2px;
    float: left;
    margin-right: 8px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--primary-500);
    background-color: var(--primary-400);
    border-radius: 4px;
}

.checkmark-lg {
    position: relative;
    top: 2px;
    float: left;
    margin-right: 8px;
    width: 36px;
    height: 36px;
    border: 1px solid #c5c5c5;
    background-color: #fff;
    border-radius: 4px;
}

.checkmark-lg svg {
    position: absolute;
    top: 6px;
    left: 6px;
}

/* checkbox */


.form-control, .form-control.form-control-md {
    height: 42px;
    padding: 0.6rem 1rem !important;
}
.form-control.form-control-sm {
    height: 32px;
    padding: 0.275rem 0.7rem 0.275rem 0.2rem !important;
}
.form-control.form-control-lg {
    height: 60px;
}
.form-control.bootstrap-select {
}
.form-control.form-control-md.bootstrap-select {
    height: 42px !important;
}
.form-control.form-control-sm.bootstrap-select {
    height: 32px !important;
}
.form-control.form-control-lg.bootstrap-select {
    height: 60px !important;
}

.tooltip-inner {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    align-items: flex-start !important;
    border-radius: 8px !important;
    background-color: #000 !important;
    color: #fff !important;
}

.btn {
    /* padding: 0.390rem 1rem !important; */
}

.btn-primary:hover {
    background-color: #295DA8 !important;
    border-color: #295DA8 !important;
}

.btn-primary:focus, .btn-primary.focus {
    background-color: #295DA8 !important;
    border-color: #64AADE !important;
}

.btn-primary.disabled, .btn-primary:disabled {
    color: rgba(235, 237, 239, 1);
    background-color: var(--gray-400) !important;
    border: none !important;
}

.btn-secondary:focus, .btn-secondary.focus {
    color: rgba(73, 134, 190, 1) !important;
    background-color: rgba(73, 134, 190, 0.19) !important;
    border-color: rgba(73, 134, 190, 1) !important;
}

.btn-secondary.disabled, .btn-secondary:disabled {
    color: rgba(235, 237, 239, 1) !important;
    background-color: rgba(156, 163, 175, 1) !important;
}

.btn-outline-primary {
    color: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
}

.btn-outline-primary:hover {
    color: var(--primary-600) !important;
    background-color: var(--secondary) !important;
    border-color: var(--primary-600) !important;
}

.btn-outline-primary:focus {
    color: var(--primary-600) !important;
    background-color: #fff !important;
    border-color: var(--primary-900) !important;
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: rgba(235, 237, 239, 1) !important;
    background-color: var(--gray-400) !important;
    border: none !important;
}

.btn-lg, .btn-group-lg > .btn {
    padding: 1.06rem 1rem !important;
}

.btn-sm, .btn-group-sm > .btn {
    padding: 0.275rem 1rem !important;
}

.icon-command-key {
    background-image: url('data:image/svg+xml,<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.48377 3.98689H4.4901C4.4901 3.51772 4.4901 3.04759 4.4901 2.57799C4.4901 1.80876 3.89626 1.08065 2.98085 1.12711C2.39157 1.15674 1.89229 1.48056 1.69432 2.13302C1.51125 2.72973 1.70967 3.30322 2.18571 3.67052C2.25588 3.72504 2.33035 3.77308 2.40894 3.81463C2.48762 3.8561 2.56929 3.89037 2.65402 3.91755C2.73876 3.94463 2.82516 3.96409 2.91331 3.97602C3.00147 3.98794 3.08997 3.99206 3.17883 3.98838C3.60785 3.98189 4.03634 3.98838 4.47773 3.98838V7.00384C4.02047 7.00384 3.54996 7.00086 3.07988 7.00384C2.22579 7.01024 1.59537 7.6613 1.62607 8.48689C1.64739 9.04451 1.91554 9.47554 2.43657 9.72274C2.9255 9.95557 3.39952 9.92042 3.8453 9.62386C4.29116 9.32721 4.49457 8.89767 4.48861 8.36522C4.48563 7.92034 4.48861 7.47546 4.48861 7.00577H4.76219C6.14776 7.00577 7.53324 7.00577 8.91872 7.00577C9.68869 7.00577 10.4175 7.59906 10.371 8.51354C10.3413 9.10228 10.0172 9.60107 9.36405 9.79883C8.76679 9.98178 8.19278 9.78349 7.82516 9.30793C7.59262 9.0069 7.50605 8.6836 7.50701 8.31534C7.51043 6.40371 7.50701 4.4926 7.51 2.58097C7.51 1.70839 8.19278 1.08012 9.01722 1.1286C9.86825 1.17804 10.4279 1.84734 10.371 2.65461C10.3166 3.41542 9.74404 3.94726 8.99293 3.9854C8.5075 4.00959 8.01963 3.98978 7.53324 3.98978" stroke="%239CA3AF" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    width: .875rem;
    height: .875rem;
    display: inline-block;
}
.icon-half-day {
    background-image: url('data:image/svg+xml,<svg width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.43 0.300012C5.05 -0.289988 2.75 0.0300118 0.799999 0.940012C0.449999 1.10001 0.389998 1.58001 0.699998 1.80001C3.3 3.60001 5 6.60001 5 10C5 13.4 3.3 16.4 0.699998 18.2C0.379999 18.42 0.439999 18.9 0.789999 19.06C2.07 19.66 3.5 20 5 20C11.05 20 15.85 14.62 14.87 8.40001C14.26 4.48001 11.28 1.24001 7.43 0.300012Z" fill="%23323232"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    width: .875rem;
    height: .875rem;
    display: inline-block;
}

/* Flex Gap */
.gap-1 {
    gap: .25rem
}

.gap-2 {
    gap: .5rem
}

.gap-3 {
    gap: .75rem
}

.gap-4 {
    gap: 1rem
}

.gap-5 {
    gap: 1.25rem
}

.gap-6 {
    gap: 1.5rem
}

.gap-7 {
    gap: 2rem
}

.gap-8 {
    gap: 2.5rem
}

.gap-9 {
    gap: 3rem
}

.gap-10 {
    gap: 4rem
}

.gap-x-1 {
    column-gap: .25rem
}

.gap-x-2 {
    column-gap: .5rem
}

.gap-x-3 {
    column-gap: .75rem
}

.gap-x-4 {
    column-gap: 1rem
}

.gap-x-5 {
    column-gap: 1.25rem
}

.gap-x-6 {
    column-gap: 1.5rem
}

.gap-x-7 {
    column-gap: 2rem
}

.gap-x-8 {
    column-gap: 2.5rem
}

.gap-x-9 {
    column-gap: 3rem
}

.gap-x-10 {
    column-gap: 4rem
}

.gap-y-1 {
    row-gap: .25rem
}

.gap-y-2 {
    row-gap: .5rem
}

.gap-y-3 {
    row-gap: .75rem
}

.gap-y-4 {
    row-gap: 1rem
}

.gap-y-5 {
    row-gap: 1.25rem
}

.gap-y-6 {
    row-gap: 1.5rem
}

.gap-y-7 {
    row-gap: 2rem
}

.gap-y-8 {
    row-gap: 2.5rem
}

.gap-y-9 {
    row-gap: 3rem
}

.gap-y-10 {
    row-gap: 4rem
}

.text-hover-white:hover {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
}

.text-hover-dark:hover {
    color: #000 !important;
    fill: #000 !important;
    stroke: #000 !important;
}

.text-hover-primary:hover {
    color: var(--primary-600) !important;
    fill: var(--primary-600) !important;
    stroke: var(--primary-600) !important;
}

.text-hover-secondary:hover {
    color: var(--secondary) !important;
    fill: var(--secondary) !important;
    stroke: var(--secondary) !important;
}

.text-hover-danger:hover {
    color: var(--danger) !important;
    fill: var(--danger) !important;
    stroke: var(--danger) !important;
}

.text-hover-success:hover {
    color: var(--success) !important;
    fill: var(--success) !important;
    stroke: var(--success) !important;
}

.text-hover-warning:hover {
    color: var(--warning) !important;
    fill: var(--warning) !important;
    stroke: var(--warning) !important;
}

.text-hover-info:hover {
    color: var(--info) !important;
    fill: var(--info) !important;
    stroke: var(--info) !important;
}

.text-focus-white:focus {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
}

.text-focus-dark:focus {
    color: #000 !important;
    fill: #000 !important;
    stroke: #000 !important;
}

.text-focus-primary:focus {
    color: var(--primary-600) !important;
    fill: var(--primary-600) !important;
    stroke: var(--primary-600) !important;
}

.text-focus-secondary:focus {
    color: var(--secondary) !important;
    fill: var(--secondary) !important;
    stroke: var(--secondary) !important;
}

.text-focus-danger:focus {
    color: var(--danger) !important;
    fill: var(--danger) !important;
    stroke: var(--danger) !important;
}

.text-focus-success:focus {
    color: var(--success) !important;
    fill: var(--success) !important;
    stroke: var(--success) !important;
}

.text-focus-warning:focus {
    color: var(--warning) !important;
    fill: var(--warning) !important;
    stroke: var(--warning) !important;
}

.text-focus-info:focus {
    color: var(--info) !important;
    fill: var(--info) !important;
    stroke: var(--info) !important;
}

.text-focus-light:focus {
    color: var(--light) !important;
    fill: var(--light) !important;
    stroke: var(--light) !important;
}

.text-focus-dark:focus {
    color: var(--dark) !important;
    fill: var(--dark) !important;
    stroke: var(--dark) !important;
}

.text-focus-gray:focus {
    color: var(--gray-400) !important;
    fill: var(--gray-400) !important;
    stroke: var(--gray-400) !important;
}

.bg-hover-white:hover {
    background-color: #fff !important;
}

.bg-hover-dark:hover {
    background-color: #000 !important;
}

.bg-hover-primary:hover {
    background-color: var(--primary-600) !important;
}

.bg-hover-secondary:hover {
    background-color: var(--secondary) !important;
}

.bg-hover-danger:hover {
    background-color: var(--danger) !important;
}

.bg-hover-success:hover {
    background-color: var(--success) !important;
}

.bg-hover-warning:hover {
    background-color: var(--warning) !important;
}

.bg-hover-info:hover {
    background-color: var(--info) !important;
}

.bg-focus-white:focus {
    background-color: #fff !important;
}

.bg-focus-dark:focus {
    background-color: #000 !important;
}

.bg-focus-primary:focus {
    background-color: var(--primary-600) !important;
}

.bg-focus-secondary:focus {
    background-color: var(--secondary) !important;
}

.bg-focus-danger:focus {
    background-color: var(--danger) !important;
}

.bg-focus-success:focus {
    background-color: var(--success) !important;
}

.bg-focus-warning:focus {
    background-color: var(--warning) !important;
}

.bg-focus-info:focus {
    background-color: var(--info) !important;
}

.bg-focus-light:focus {
    background-color: var(--light) !important;
}

.bg-focus-dark:focus {
    background-color: var(--dark) !important;
}

.avatar {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    object-fit: contain;
    background: linear-gradient(180deg, #BFD5E8 0%, #4986BE 100%), linear-gradient(0deg, #FFFFFF, #FFFFFF);
    border-radius: 100%;
    border: 1px solid var(--gray-200);
    color: white;
    font-size: 1.0625rem;
    line-height: 1.0624rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    text-decoration: none !important;
}
a:hover:has(.avatar) {text-decoration: none !important}

.avatar.avatar-sm {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    font-size: .875rem;
    line-height: .875rem
}

.avatar.avatar-lg {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
}

.avatar.avatar-xl {
    width: 4rem;
    height: 4rem;
    min-width: 4rem;
    font-size: 1.5rem;
    line-height: 1.5rem
}

.avatar.avatar-2xl {
    width: 5rem;
    height: 5rem;
    min-width: 5rem;
    font-size: 1.5rem;
    line-height: 1.5rem
}

.avatar.avatar-navbar {
    width: 3.125rem;
    height: 3.125rem;
    min-width: 3.125rem;
    margin-right: 1rem;
}

.avatar-stack {
    display: inline-flex;
    position: relative;
    width: 78px;
    font-size: 12px;
    line-height: 12px;
}
.avatar-stack .avatar:nth-child(2) {
    position: absolute;
    left: 1.25rem;
    border: 2px solid white;
    font-size: 12px;
    line-height: 12px;
}
.avatar-stack .avatar:nth-child(3) {
    position: absolute;
    left: 2.5rem;
    border: 2px solid white;
    font-size: 12px;
    line-height: 12px;
}

body:has(.dashboard-bg) {
    background-size: cover;
    background: #FCFCFC url('/dist/img/dashboard_bg.png') no-repeat bottom;
    min-height: 100vh;
}

body.dark:has(.dashboard-bg) {
    background-size: cover;
    background: #0E1420 url('/dist/img/dashboard_dark_bg.png') no-repeat bottom !important;
    min-height: 100vh;
}

/* DATATABLE CSS */

.dt-buttons {
    display: none !important;
}

.table-buttons-off .dataTables_filter {
    display: none !important;
}

.dataTable tbody tr:hover {
    background-color: rgba(100, 170, 222, 0.20);; /* Replace with the color you want */
}

/* Custom CSS for DataTables pagination */
#t_paginate {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#t_length label {
    display: flex;
    align-items: center;
    column-gap: 1rem !important;
    margin-bottom: 0 !important;
}


/* Custom CSS for DataTables pagination */
#t2_paginate {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#t2_length label {
    display: flex;
    align-items: center;
    column-gap: 1rem !important;
    margin-bottom: 0 !important;
}

.dataTables_paginate .paginate_button.previous, .dataTables_paginate .paginate_button.next {
    font-size: 20px;
    padding: 0 5px;
    cursor: pointer;
}

.dataTables_paginate .paginate_button.disabled {
    cursor: default;
    opacity: 0.5;
}

#t_paginate {
    display: none;
}

#t2_paginate {
    display: none;
}

.dataTables_wrapper .bottom {
    display: flex !important;
    column-gap: 4rem !important;
    align-items: center !important;
    font-weight: 500 !important;
    margin-top: 1rem;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 0 !important;
}

.dataTables_wrapper tbody tr {
    height: 5rem !important;
}

.table-head-off thead {
    display: none !important;
}

/* DATATABLE CSS */

.circle-img {
    width: 48px;
    height: 48px;
}

.fs-8 {
    font-size: 0.5rem!important;
}

.fs-9 {
    font-size: 0.563rem!important;
}

.fs-10 {
    font-size: 0.625rem!important;
}

.fs-11 {
    font-size: 0.688rem!important;
}

.fs-12 {
    font-size: 0.75rem!important;
}

.fs-13 {
    font-size: 0.813rem!important;
}

.fs-14 {
    font-size: 0.875rem!important;
}

.fs-15 {
    font-size: 0.938rem!important;
}

.fs-16 {
    font-size: 1rem!important;
}

.fs-17 {
    font-size: 1.063rem!important;
}

.fs-18 {
    font-size:1.125rem!important;
}

.fs-19 {
    font-size: 1.188rem!important;
}

.fs-20 {
    font-size:1.25rem!important;
}

.fs-21 {
    font-size: 1.313rem!important;
}

.fs-22 {
    font-size: 1.375rem!important;
}

.fs-23 {
    font-size: 1.438rem!important;
}

.fs-24 {
    font-size: 1.5rem!important;
}

.fs-25 {
    font-size: 1.563rem!important;
}

.fs-26 {
    font-size: 1.625rem!important;
}

.event-today {
    display: inline-flex;
    padding: 10px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: #F97316;
    color: #FFF;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
}

.w-5 {
    width: 5% !important;
}

.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

.w-30 {
    width: 30% !important;
}

.w-35 {
    width: 35% !important;
}

.w-40 {
    width: 40% !important;
}

.w-45 {
    width: 45% !important;
}

.w-55 {
    width: 55% !important;
}

.w-60 {
    width: 60% !important;
}

.w-65 {
    width: 65% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}

.w-85 {
    width: 85% !important;
}

.w-90 {
    width: 90% !important;
}

.w-95 {
    width: 95% !important;
}

.sm {
    height: 32px !important;
}

.md {
    height: 42px !important;
}

.lg {
    height: 60px !important;
}

.switch-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    width: 28px;
    height: 28px;
    padding: 5px;
    border-radius: 4px;
    color: var(--gray-600);
    border: none;
    outline: none;
    background-color: transparent;
}

.switch-mode-btn:focus {outline: none; border: none;}

.switch-mode-btn.active {
    color: var(--primary-600);
    background-color: rgba(226, 235, 244, 1);
}


table.dataTable thead .sorting_asc{
    background-position: right 15px center !important;
    background-image: unset !important;
}

table.dataTable thead .sorting_desc{
    background-position: right 15px center !important;
    background-image: unset !important;
}

table.dataTable thead .sorting{
    background-position: right 15px center !important;
    background-image: unset !important;
    line-height: initial;
    white-space: nowrap;
}

.text-green{
    color: var(--green) !important;
}

.bg-green{
    background-color: var(--green) !important;
}

.text-orange{
    color: var(--orange) !important;
}

.bg-orange{
    background-color: var(--orange) !important;
}

.text-red{
    color: var(--red) !important;
}

.bg-red{
    background-color: var(--red) !important;
}

.text-purple{
    color: var(--purple) !important;
}

.bg-purple{
    background-color: var(--purple) !important;
}

.text-yellow{
    color: var(--yellow) !important;
}

.bg-yellow{
    background-color: var(--yellow) !important;
}

.text-pink{
    color: var(--pink) !important;
}

.bg-pink{
    background-color: var(--pink) !important;
}

.success-box{
    display: flex;
    padding: 5px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    border: 1px solid #B1F1C9;
    background: rgba(28, 161, 77, 0.10);
}
.secondary-box{
    display: flex;
    padding: 5px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    border: 1px solid #D1D5DC;
    background:rgba(75, 85, 99, 0.1);
    color:#4B5563;
}
.gray-letter {
    letter-spacing: 2px;
    font-size:1rem;
    color:var(--gray-400);
    font-weight:600;
    margin:10px 0px;
}
.warning-box{
    display: flex;
    padding: 5px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 1px solid #FDCCAA;
    background: rgba(249, 115, 22, 0.10);
}

.danger-box{
    display: flex;
    padding: 5px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 1px solid #FEB2B2;
    background: rgba(239, 68, 68, 0.10);
}

.info-box{
    display: flex;
    padding: 5px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 1px solid #CDE3F4;
    background: rgba(100, 170, 222, 0.20);
}
.purple-box{
    display: flex;
    padding: 5px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 1px solid rgba(207, 187, 251, 1);
    background: rgba(139, 92, 246, 0.05);
}

.orange-box {
    display: flex;
    padding: 5px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 1px solid rgba(254, 225, 205, 1);
    background-color: rgba(249, 115, 22, 0.1);
}

.yellow-box{
    display: flex;
    padding: 9px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 1px solid #FEF3CD;
    background: rgba(252, 211, 77, 0.10);
}

span.irs-bar {
    background: #1ca14d40!important;
    border: white!important;
    height: 7px!important;
    top: 37px!important;
}

span.irs-from, span.irs-to {
    background: #1CA14D!important;
}

span.irs-handle.from, span.irs-handle.to {
    box-shadow: none;
    background: #1aa14d!important;
    border: none!important;
    filter: drop-shadow(1px 1px 4px #0005);
    cursor: grab;
}

span.irs-grid {
}

span.irs-grid-pol {
    background-color: black!important;
}

span.irs-grid-text.js-grid-text-0 {
}

span.irs-grid span {
    color: #00000087!important;
}

span.irs-line {
    background: none!important;
    border: 1px solid white!important;
    filter: drop-shadow(1px 1px 1px #0003);
}

.announcement-title {font-weight: 500; font-size: 18px; line-height: 20px; margin: 16px 0;}
.announcement-title-big {font-weight: 600; font-size: 24px; line-height: 29px;margin:0}
.announcement-description {font-size: 16px;font-weight: 400;line-height: 20px;}
.announcement-author {display: flex;align-items:center;column-gap: 12px;overflow: hidden}
.announcement-author.reverse {display: flex;flex-direction: row-reverse;align-items:center;column-gap: 12px;}
.announcement-author-name {font-weight: 500; font-size: 16px; line-height: 20px; text-overflow: ellipsis; text-wrap: nowrap; overflow: hidden}
.announcement-date {font-weight: 400; font-size: 14px; color: var(--gray-500); line-height: 20px; text-overflow: ellipsis; text-wrap: nowrap; overflow: hidden}
.announcement-header {display: flex; justify-content: space-between; align-items: center;}
.announcement-header-right {display: flex; align-items: center; column-gap: 8px}
.announcement-fav {width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; outline: none; border: 1px solid rgba(232, 232, 232, 1); background-color: var(--gray-100); border-radius: 4px; color: rgba(107, 114, 128, 1)}
.announcement-fav:focus {outline: none;}
.announcement-priority {user-select: none;padding: 6px 16px; border-radius: 4px;height:36px;display: flex;align-items: center;justify-content: center;font-weight: 600;font-size: 14px;}
.announcement-priority.high {color: var(--red); background-color: rgba(226, 19, 19, 0.1);}
.announcement-priority.medium {color: var(--orange); background-color: rgba(249, 115, 22, 0.1);}
.announcement-priority.low {color: var(--primary-700); background-color: rgba(50, 100, 159, 0.1);}
table .announcement-priority {width: min-content}

.event-card-header-big-bg {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-900);
    background-image: url("/dist/img/event_card_big_bg.png");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: 162px;
    padding: 0;
    position: relative;
}
.today-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97px;
    height: 40px;
    padding: 10px 24px 10px 24px;
    border-radius: 4px;
    background-color: rgba(249, 115, 22, 1);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 20px;
}
.event-card-header-big-bg .today-badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    margin: 0;
}
.event-card-header-bg {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: var(--primary-900);
    background-image: url("/dist/img/event_card_bg.png");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: 146px;
    padding: 34px 60px 14px 60px;
    row-gap: 10px;
    column-gap: 0;
}
.event-card-title {display: inline-flex; align-items: center;font-weight: 500;font-size: 1.25rem;line-height: 24px;text-align: center;color:white;height: 48px}
.event-card-description {font-weight: 400;font-size: 1rem;line-height: 20px}
.event-title-participants {display: flex; align-items: center; font-weight: 600;font-size: 1rem;line-height: 20px;color: var(--primary-600); column-gap: 8px}
.event-badge-participants {width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-weight: 600;font-size: 0.5rem;line-height: 24px;color: white;background-color: var(--primary-600); border-radius: 100%}
.event-participant-entry {
    padding: 8px 20px;
    height: 66px;
    display: flex;
    align-items: center;
    column-gap: 12px;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
}
.event-participant-entry .event-participant {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    flex-grow: 1;
    overflow-x: hidden;
}
.event-participant-entry:last-child {
    border: none;
}
.event-participant-entry:has(.event-organizer-text) {
    background-color: rgba(73, 134, 190, 0.1);
}
.event-participant-entry .event-organizer-text {
    font-weight: 600;
    font-size:.875rem;
    line-height: 24px;
    color: var(--primary-600);
    margin: 0;
}
.event-participant-entry .event-participant-name {
    font-weight: 500;
    font-size: 1rem;
    line-height: 24px;
    margin: 0;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}
.event-participant-entry .event-participant-designation {
    font-weight: 500;
    font-size:.875rem;
    line-height: 24px;
    color: var(--gray-400);
    margin: 0;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

a.announcement-read-more, a.announcement-download-attachment, a.event-show-details {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 6px 16px;
    border-radius: 4px;
    color: rgba(73, 134, 190, 1);
    background-color: rgba(73, 134, 190, 0.1);
    outline: none;
    border: none;
    font-weight: 600;
    font-size:.875rem;
    text-decoration: none;
    user-select: none;
}
a.announcement-download-attachment i {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(73, 134, 190, 0.1);
    color: rgba(73, 134, 190, 1);
    width: 32px;
    height: 32px;
    border-radius: 4px;
    margin-left: 12px;
    font-size:.75rem;
}
a.announcement-read-more:focus, a.announcement-download-attachment:focus, a.event-show-details:focus {outline: none; border: none}
.text-ellipsis {overflow-x: hidden; text-overflow: ellipsis; text-wrap: nowrap; min-width: 0}

.dataTables_length label, .pagination-custom span{
    font-size:.875rem!important;
    font-weight: 600 !important;
}

table.dataTable td.dt-control:before{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    max-width: 20px;
    min-height: 20px;
    max-height: 20px;
    color: var(--gray-400) !important;
    border: unset !important;
    box-shadow: unset !important;
    border-radius: 100% !important;
    padding: 0 !important;
    background-color: var(--gray-200) !important;
    font-family: MyHR-7x24 !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 0 !important;
    margin: 0 auto !important;
    content: "\e915" !important;
}

table.dataTable tr.dt-hasChild td.dt-control:before {
    content: "\e94d" !important;
}

table thead{
    background-color: var(--primary-700) !important;
    color: #FFF !important;
}

.modal-body {overflow-y: auto}
.modal-body label {
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 1rem;
    line-height: 20px;
}

.modal-file-viewer {
    max-width: 70vw;
    height: calc(100vh - 168px);
    margin: 84px auto;
}
.modal-file-viewer .modal-body {display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0;height:100%}
.modal-file-viewer .modal-content {border-radius: 0; height: 100%}
.modal-file-viewer .modal-body iframe {height: 100%;width: 100%}
.modal-file-viewer .modal-body img {width:100%;height: 100%;object-fit: contain}
.modal-file-viewer .modal-body:has(img) {
    background-image: linear-gradient(45deg, var(--gray-200) 25%, transparent 25%), linear-gradient(-45deg, var(--gray-200) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--gray-200) 75%), linear-gradient(-45deg, transparent 75%, var(--gray-200) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.back-button{
    color: var(--primary-600, #4986BE);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.top-banner{
    width: 100%;
    height: 120px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #D9E6F2;
    padding: 1rem;
}

button.btn.dropdown-toggle.btn-select.bs-placeholder:focus,
button.btn.dropdown-toggle.btn-select.bs-placeholder:active {outline: none !important}

.button-tab {
    background-color: unset;
    outline: none;
    color: var(--gray-500);
    border-radius: 0;
    padding: 10px 14px !important;

    &.active {
        color: var(--primary-700);
        border-bottom: 1px solid var(--primary-700);
    }

    &:hover {
        color: var(--gray-600);
    }

    &.active:hover {color:var(--primary-700);}
}

a.announcement-viewers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 6px 16px;
    border-radius: 4px;
    color: var(--green);
    background-color: rgba(28, 161, 77, 0.1);
    outline: none;
    border: none;
    font-weight: 600;
    font-size:.875rem;
    text-decoration: none;
    user-select: none;
    column-gap: 4px;
}
a.announcement-viewers:focus{outline: none; border: none}

.btn-red-secondary{
    border-radius: 4px;
    background: rgba(226, 19, 19, 0.10);
    display: flex;
    padding: 6px 22px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    color: var(--red, #E21313);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    transition: all 0.2s ease-in-out;
}

.text-passive{
    color: #BAB8B8;
    font-size:.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

a.announcement-read-more:hover{
    background-color: rgba(73, 134, 190, 0.2);
    cursor: pointer;
}

.uploaded-file{
    display: flex;
    padding: 12px 24px;
    align-items: center;
    gap: 12px;
    border: 1px solid #F0F0F0;
    background: #FFF;
}

.uploaded-file a{
    color: var(--primary-600, #4986BE);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
}

.uploaded-file a:hover{
    color: var(--primary);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    cursor: pointer;
    text-decoration: none;
}

.profile-header {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 20px;
    position: absolute;
    bottom: -55px;
    left: 38px;


    @media (max-width: 480px) {
        gap: 10px;
        align-items: center;
        justify-content: end;
        text-align: center;
        bottom: -100px;
        left: 0;
        right: 0;
        width: 100%;
        flex-direction: column;
    }
}
.profile-header-title {
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 24px;
    margin: 0;
}
.profile-header-subtitle {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 24px;
    color: var(--gray-400);
    margin: 0;
}
.profile-header-photo {
    position: relative;
}
.profile-header .avatar {
    width: 100px;
    height: 100px;
    min-width: 100px;
    max-width: 100px;
    min-height: 100px;
    max-height: 100px;
}
.profile-header .button-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    max-width: 30px;
    min-width: 30px;
    height: 30px;
    max-height: 30px;
    min-height: 30px;
    border-radius: 100%;
    line-height: 0;
    padding: 0 !important;
    position: absolute;
    bottom: 0;
    left: 70px;
}
.tab-section-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 20px;
    color: var(--gray-400);
    text-transform: uppercase;
}
.tab-section-title:not(:first-of-type) {
    margin-top: 32px;
}
.card-section-title {
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    color: var(--gray-400);
    text-transform: uppercase;
}
.form-label {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25rem;
}
.form-label-description {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    display: block;
}

.section-label {
    color: var(--gray-400);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 1.25rem;
    margin-bottom: 16px;
}

.section-label:has(+ .section-description) {
    margin-bottom: 8px;
}

.section-description {
    color: var(--gray-600);
    font-size: 1rem;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 20px;
}

.recipients-box{
    max-height: 450px;
    overflow-y: auto;
}

.pointer{
    cursor: pointer;
}

.glow-effect {
    transition: box-shadow 0.5s ease-in-out;
}

.glow {
    box-shadow: 0 0 20px 5px var(--primary); /* Replace with your desired glow effect */
}

.slide-effect {
    transition: left 0.5s ease-in-out;
    position: relative; /* Set the element position to relative to enable sliding */
    left: 0; /* Initial position */
}

.card-body {background-position: bottom right; background-repeat: no-repeat}
.bg-center-right {background-position: center right}

.justify-self-end {justify-self: end!important;}
.justify-self-start {justify-self: start!important;}
.justify-self-center {justify-self: center!important;}
.justify-self-stretch {justify-self: stretch!important;}

.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 490px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
    border-radius: 0 !important;
}

.modal.right .modal-body {
    padding: 15px 15px 80px;
}
/*Right*/
.modal.right.fade .modal-dialog {
    right: 0px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right .modal-content .modal-body {
    padding: 0 28px 28px 28px;
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}

.modal.right .modal-dialog .modal-content {
    background: var(--gray-50);
}

.pulse-sidebar {
    animation: pulse-animation-sidebar 2s infinite;
}

@keyframes pulse-animation-sidebar {
    0% {}
    50% {
        background-color: var(--primary-200);
    }
    100% {}
}

.input-icon-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    margin: 0;
    transition: border-color .15s ease-in-out;
    color: var(--gray-600);
}

.input-group-append .input-icon-label {
    border-right: 1px solid var(--gray-200);
    border-radius: 0 4px 4px 0;
}
.input-group-prepend .input-icon-label {
    border-left: 1px solid var(--gray-200);
    border-radius: 4px 0 0 4px;
}

.input-group-prepend:has(+ .form-control-sm) .input-icon-label {
    width: 32px;
    height: 32px;
}

.input-group-prepend:has(+ .form-control-lg) .input-icon-label {
    width: 60px;
    height: 60px;
}

.input-group-prepend:has(+ .form-control:focus) .input-icon-label {
    border-color: var(--primary-500);
}

.input-group-prepend:has(.input-icon-label) + .form-control {
    border-left: none !important;
    padding-left: 0 !important;
}

.input-group-append:has(+ .form-control:focus) .input-icon-label {
    border-color: var(--primary-500);
}

.input-group-append:has(.input-icon-label) + .form-control {
    border-right: none !important;
}
.btn:disabled {
    background-color: var(--gray-400)!important;
    border-color: var(--gray-500);
}

.bg-primary\/90 {background-color: color-mix(in srgb, var(--primary) 90%, transparent) !important}
.bg-primary\/80 {background-color: color-mix(in srgb, var(--primary) 80%, transparent) !important}
.bg-primary\/70 {background-color: color-mix(in srgb, var(--primary) 70%, transparent) !important}
.bg-primary\/60 {background-color: color-mix(in srgb, var(--primary) 60%, transparent) !important}
.bg-primary\/50 {background-color: color-mix(in srgb, var(--primary) 50%, transparent) !important}
.bg-primary\/40 {background-color: color-mix(in srgb, var(--primary) 40%, transparent) !important}
.bg-primary\/30 {background-color: color-mix(in srgb, var(--primary) 30%, transparent) !important}
.bg-primary\/20 {background-color: color-mix(in srgb, var(--primary) 20%, transparent) !important}
.bg-primary\/10 {background-color: color-mix(in srgb, var(--primary) 10%, transparent) !important}
.bg-primary-50\/90 {background-color: color-mix(in srgb, var(--primary-50) 90%, transparent) !important}
.bg-primary-50\/80 {background-color: color-mix(in srgb, var(--primary-50) 80%, transparent) !important}
.bg-primary-50\/70 {background-color: color-mix(in srgb, var(--primary-50) 70%, transparent) !important}
.bg-primary-50\/60 {background-color: color-mix(in srgb, var(--primary-50) 60%, transparent) !important}
.bg-primary-50\/50 {background-color: color-mix(in srgb, var(--primary-50) 50%, transparent) !important}
.bg-primary-50\/40 {background-color: color-mix(in srgb, var(--primary-50) 40%, transparent) !important}
.bg-primary-50\/30 {background-color: color-mix(in srgb, var(--primary-50) 30%, transparent) !important}
.bg-primary-50\/20 {background-color: color-mix(in srgb, var(--primary-50) 20%, transparent) !important}
.bg-primary-50\/10 {background-color: color-mix(in srgb, var(--primary-50) 10%, transparent) !important}
.bg-primary-100\/90 {background-color: color-mix(in srgb, var(--primary-100) 90%, transparent) !important}
.bg-primary-100\/80 {background-color: color-mix(in srgb, var(--primary-100) 80%, transparent) !important}
.bg-primary-100\/70 {background-color: color-mix(in srgb, var(--primary-100) 70%, transparent) !important}
.bg-primary-100\/60 {background-color: color-mix(in srgb, var(--primary-100) 60%, transparent) !important}
.bg-primary-100\/50 {background-color: color-mix(in srgb, var(--primary-100) 50%, transparent) !important}
.bg-primary-100\/40 {background-color: color-mix(in srgb, var(--primary-100) 40%, transparent) !important}
.bg-primary-100\/30 {background-color: color-mix(in srgb, var(--primary-100) 30%, transparent) !important}
.bg-primary-100\/20 {background-color: color-mix(in srgb, var(--primary-100) 20%, transparent) !important}
.bg-primary-100\/10 {background-color: color-mix(in srgb, var(--primary-100) 10%, transparent) !important}
.bg-primary-200\/90 {background-color: color-mix(in srgb, var(--primary-200) 90%, transparent) !important}
.bg-primary-200\/80 {background-color: color-mix(in srgb, var(--primary-200) 80%, transparent) !important}
.bg-primary-200\/70 {background-color: color-mix(in srgb, var(--primary-200) 70%, transparent) !important}
.bg-primary-200\/60 {background-color: color-mix(in srgb, var(--primary-200) 60%, transparent) !important}
.bg-primary-200\/50 {background-color: color-mix(in srgb, var(--primary-200) 50%, transparent) !important}
.bg-primary-200\/40 {background-color: color-mix(in srgb, var(--primary-200) 40%, transparent) !important}
.bg-primary-200\/30 {background-color: color-mix(in srgb, var(--primary-200) 30%, transparent) !important}
.bg-primary-200\/20 {background-color: color-mix(in srgb, var(--primary-200) 20%, transparent) !important}
.bg-primary-200\/10 {background-color: color-mix(in srgb, var(--primary-200) 10%, transparent) !important}
.bg-primary-300\/90 {background-color: color-mix(in srgb, var(--primary-300) 90%, transparent) !important}
.bg-primary-300\/80 {background-color: color-mix(in srgb, var(--primary-300) 80%, transparent) !important}
.bg-primary-300\/70 {background-color: color-mix(in srgb, var(--primary-300) 70%, transparent) !important}
.bg-primary-300\/60 {background-color: color-mix(in srgb, var(--primary-300) 60%, transparent) !important}
.bg-primary-300\/50 {background-color: color-mix(in srgb, var(--primary-300) 50%, transparent) !important}
.bg-primary-300\/40 {background-color: color-mix(in srgb, var(--primary-300) 40%, transparent) !important}
.bg-primary-300\/30 {background-color: color-mix(in srgb, var(--primary-300) 30%, transparent) !important}
.bg-primary-300\/20 {background-color: color-mix(in srgb, var(--primary-300) 20%, transparent) !important}
.bg-primary-300\/10 {background-color: color-mix(in srgb, var(--primary-300) 10%, transparent) !important}
.bg-primary-400\/90 {background-color: color-mix(in srgb, var(--primary-400) 90%, transparent) !important}
.bg-primary-400\/80 {background-color: color-mix(in srgb, var(--primary-400) 80%, transparent) !important}
.bg-primary-400\/70 {background-color: color-mix(in srgb, var(--primary-400) 70%, transparent) !important}
.bg-primary-400\/60 {background-color: color-mix(in srgb, var(--primary-400) 60%, transparent) !important}
.bg-primary-400\/50 {background-color: color-mix(in srgb, var(--primary-400) 50%, transparent) !important}
.bg-primary-400\/40 {background-color: color-mix(in srgb, var(--primary-400) 40%, transparent) !important}
.bg-primary-400\/30 {background-color: color-mix(in srgb, var(--primary-400) 30%, transparent) !important}
.bg-primary-400\/20 {background-color: color-mix(in srgb, var(--primary-400) 20%, transparent) !important}
.bg-primary-400\/10 {background-color: color-mix(in srgb, var(--primary-400) 10%, transparent) !important}
.bg-primary-500\/90 {background-color: color-mix(in srgb, var(--primary-500) 90%, transparent) !important}
.bg-primary-500\/80 {background-color: color-mix(in srgb, var(--primary-500) 80%, transparent) !important}
.bg-primary-500\/70 {background-color: color-mix(in srgb, var(--primary-500) 70%, transparent) !important}
.bg-primary-500\/60 {background-color: color-mix(in srgb, var(--primary-500) 60%, transparent) !important}
.bg-primary-500\/50 {background-color: color-mix(in srgb, var(--primary-500) 50%, transparent) !important}
.bg-primary-500\/40 {background-color: color-mix(in srgb, var(--primary-500) 40%, transparent) !important}
.bg-primary-500\/30 {background-color: color-mix(in srgb, var(--primary-500) 30%, transparent) !important}
.bg-primary-500\/20 {background-color: color-mix(in srgb, var(--primary-500) 20%, transparent) !important}
.bg-primary-500\/10 {background-color: color-mix(in srgb, var(--primary-500) 10%, transparent) !important}
.bg-primary-600\/90 {background-color: color-mix(in srgb, var(--primary-600) 90%, transparent) !important}
.bg-primary-600\/80 {background-color: color-mix(in srgb, var(--primary-600) 80%, transparent) !important}
.bg-primary-600\/70 {background-color: color-mix(in srgb, var(--primary-600) 70%, transparent) !important}
.bg-primary-600\/60 {background-color: color-mix(in srgb, var(--primary-600) 60%, transparent) !important}
.bg-primary-600\/50 {background-color: color-mix(in srgb, var(--primary-600) 50%, transparent) !important}
.bg-primary-600\/40 {background-color: color-mix(in srgb, var(--primary-600) 40%, transparent) !important}
.bg-primary-600\/30 {background-color: color-mix(in srgb, var(--primary-600) 30%, transparent) !important}
.bg-primary-600\/20 {background-color: color-mix(in srgb, var(--primary-600) 20%, transparent) !important}
.bg-primary-600\/10 {background-color: color-mix(in srgb, var(--primary-600) 10%, transparent) !important}
.bg-primary-700\/90 {background-color: color-mix(in srgb, var(--primary-700) 90%, transparent) !important}
.bg-primary-700\/80 {background-color: color-mix(in srgb, var(--primary-700) 80%, transparent) !important}
.bg-primary-700\/70 {background-color: color-mix(in srgb, var(--primary-700) 70%, transparent) !important}
.bg-primary-700\/60 {background-color: color-mix(in srgb, var(--primary-700) 60%, transparent) !important}
.bg-primary-700\/50 {background-color: color-mix(in srgb, var(--primary-700) 50%, transparent) !important}
.bg-primary-700\/40 {background-color: color-mix(in srgb, var(--primary-700) 40%, transparent) !important}
.bg-primary-700\/30 {background-color: color-mix(in srgb, var(--primary-700) 30%, transparent) !important}
.bg-primary-700\/20 {background-color: color-mix(in srgb, var(--primary-700) 20%, transparent) !important}
.bg-primary-700\/10 {background-color: color-mix(in srgb, var(--primary-700) 10%, transparent) !important}
.bg-primary-800\/90 {background-color: color-mix(in srgb, var(--primary-800) 90%, transparent) !important}
.bg-primary-800\/80 {background-color: color-mix(in srgb, var(--primary-800) 80%, transparent) !important}
.bg-primary-800\/70 {background-color: color-mix(in srgb, var(--primary-800) 70%, transparent) !important}
.bg-primary-800\/60 {background-color: color-mix(in srgb, var(--primary-800) 60%, transparent) !important}
.bg-primary-800\/50 {background-color: color-mix(in srgb, var(--primary-800) 50%, transparent) !important}
.bg-primary-800\/40 {background-color: color-mix(in srgb, var(--primary-800) 40%, transparent) !important}
.bg-primary-800\/30 {background-color: color-mix(in srgb, var(--primary-800) 30%, transparent) !important}
.bg-primary-800\/20 {background-color: color-mix(in srgb, var(--primary-800) 20%, transparent) !important}
.bg-primary-800\/10 {background-color: color-mix(in srgb, var(--primary-800) 10%, transparent) !important}
.bg-primary-900\/90 {background-color: color-mix(in srgb, var(--primary-900) 90%, transparent) !important}
.bg-primary-900\/80 {background-color: color-mix(in srgb, var(--primary-900) 80%, transparent) !important}
.bg-primary-900\/70 {background-color: color-mix(in srgb, var(--primary-900) 70%, transparent) !important}
.bg-primary-900\/60 {background-color: color-mix(in srgb, var(--primary-900) 60%, transparent) !important}
.bg-primary-900\/50 {background-color: color-mix(in srgb, var(--primary-900) 50%, transparent) !important}
.bg-primary-900\/40 {background-color: color-mix(in srgb, var(--primary-900) 40%, transparent) !important}
.bg-primary-900\/30 {background-color: color-mix(in srgb, var(--primary-900) 30%, transparent) !important}
.bg-primary-900\/20 {background-color: color-mix(in srgb, var(--primary-900) 20%, transparent) !important}
.bg-primary-900\/10 {background-color: color-mix(in srgb, var(--primary-900) 10%, transparent) !important}

.bg-gray\/90 {background-color: color-mix(in srgb, var(--gray) 90%, transparent) !important}
.bg-gray\/80 {background-color: color-mix(in srgb, var(--gray) 80%, transparent) !important}
.bg-gray\/70 {background-color: color-mix(in srgb, var(--gray) 70%, transparent) !important}
.bg-gray\/60 {background-color: color-mix(in srgb, var(--gray) 60%, transparent) !important}
.bg-gray\/50 {background-color: color-mix(in srgb, var(--gray) 50%, transparent) !important}
.bg-gray\/40 {background-color: color-mix(in srgb, var(--gray) 40%, transparent) !important}
.bg-gray\/30 {background-color: color-mix(in srgb, var(--gray) 30%, transparent) !important}
.bg-gray\/20 {background-color: color-mix(in srgb, var(--gray) 20%, transparent) !important}
.bg-gray\/10 {background-color: color-mix(in srgb, var(--gray) 10%, transparent) !important}
.bg-gray-50\/90 {background-color: color-mix(in srgb, var(--gray-50) 90%, transparent) !important}
.bg-gray-50\/80 {background-color: color-mix(in srgb, var(--gray-50) 80%, transparent) !important}
.bg-gray-50\/70 {background-color: color-mix(in srgb, var(--gray-50) 70%, transparent) !important}
.bg-gray-50\/60 {background-color: color-mix(in srgb, var(--gray-50) 60%, transparent) !important}
.bg-gray-50\/50 {background-color: color-mix(in srgb, var(--gray-50) 50%, transparent) !important}
.bg-gray-50\/40 {background-color: color-mix(in srgb, var(--gray-50) 40%, transparent) !important}
.bg-gray-50\/30 {background-color: color-mix(in srgb, var(--gray-50) 30%, transparent) !important}
.bg-gray-50\/20 {background-color: color-mix(in srgb, var(--gray-50) 20%, transparent) !important}
.bg-gray-50\/10 {background-color: color-mix(in srgb, var(--gray-50) 10%, transparent) !important}
.bg-gray-100\/90 {background-color: color-mix(in srgb, var(--gray-100) 90%, transparent) !important}
.bg-gray-100\/80 {background-color: color-mix(in srgb, var(--gray-100) 80%, transparent) !important}
.bg-gray-100\/70 {background-color: color-mix(in srgb, var(--gray-100) 70%, transparent) !important}
.bg-gray-100\/60 {background-color: color-mix(in srgb, var(--gray-100) 60%, transparent) !important}
.bg-gray-100\/50 {background-color: color-mix(in srgb, var(--gray-100) 50%, transparent) !important}
.bg-gray-100\/40 {background-color: color-mix(in srgb, var(--gray-100) 40%, transparent) !important}
.bg-gray-100\/30 {background-color: color-mix(in srgb, var(--gray-100) 30%, transparent) !important}
.bg-gray-100\/20 {background-color: color-mix(in srgb, var(--gray-100) 20%, transparent) !important}
.bg-gray-100\/10 {background-color: color-mix(in srgb, var(--gray-100) 10%, transparent) !important}
.bg-gray-200\/90 {background-color: color-mix(in srgb, var(--gray-200) 90%, transparent) !important}
.bg-gray-200\/80 {background-color: color-mix(in srgb, var(--gray-200) 80%, transparent) !important}
.bg-gray-200\/70 {background-color: color-mix(in srgb, var(--gray-200) 70%, transparent) !important}
.bg-gray-200\/60 {background-color: color-mix(in srgb, var(--gray-200) 60%, transparent) !important}
.bg-gray-200\/50 {background-color: color-mix(in srgb, var(--gray-200) 50%, transparent) !important}
.bg-gray-200\/40 {background-color: color-mix(in srgb, var(--gray-200) 40%, transparent) !important}
.bg-gray-200\/30 {background-color: color-mix(in srgb, var(--gray-200) 30%, transparent) !important}
.bg-gray-200\/20 {background-color: color-mix(in srgb, var(--gray-200) 20%, transparent) !important}
.bg-gray-200\/10 {background-color: color-mix(in srgb, var(--gray-200) 10%, transparent) !important}
.bg-gray-300\/90 {background-color: color-mix(in srgb, var(--gray-300) 90%, transparent) !important}
.bg-gray-300\/80 {background-color: color-mix(in srgb, var(--gray-300) 80%, transparent) !important}
.bg-gray-300\/70 {background-color: color-mix(in srgb, var(--gray-300) 70%, transparent) !important}
.bg-gray-300\/60 {background-color: color-mix(in srgb, var(--gray-300) 60%, transparent) !important}
.bg-gray-300\/50 {background-color: color-mix(in srgb, var(--gray-300) 50%, transparent) !important}
.bg-gray-300\/40 {background-color: color-mix(in srgb, var(--gray-300) 40%, transparent) !important}
.bg-gray-300\/30 {background-color: color-mix(in srgb, var(--gray-300) 30%, transparent) !important}
.bg-gray-300\/20 {background-color: color-mix(in srgb, var(--gray-300) 20%, transparent) !important}
.bg-gray-300\/10 {background-color: color-mix(in srgb, var(--gray-300) 10%, transparent) !important}
.bg-gray-400\/90 {background-color: color-mix(in srgb, var(--gray-400) 90%, transparent) !important}
.bg-gray-400\/80 {background-color: color-mix(in srgb, var(--gray-400) 80%, transparent) !important}
.bg-gray-400\/70 {background-color: color-mix(in srgb, var(--gray-400) 70%, transparent) !important}
.bg-gray-400\/60 {background-color: color-mix(in srgb, var(--gray-400) 60%, transparent) !important}
.bg-gray-400\/50 {background-color: color-mix(in srgb, var(--gray-400) 50%, transparent) !important}
.bg-gray-400\/40 {background-color: color-mix(in srgb, var(--gray-400) 40%, transparent) !important}
.bg-gray-400\/30 {background-color: color-mix(in srgb, var(--gray-400) 30%, transparent) !important}
.bg-gray-400\/20 {background-color: color-mix(in srgb, var(--gray-400) 20%, transparent) !important}
.bg-gray-400\/10 {background-color: color-mix(in srgb, var(--gray-400) 10%, transparent) !important}
.bg-gray-500\/90 {background-color: color-mix(in srgb, var(--gray-500) 90%, transparent) !important}
.bg-gray-500\/80 {background-color: color-mix(in srgb, var(--gray-500) 80%, transparent) !important}
.bg-gray-500\/70 {background-color: color-mix(in srgb, var(--gray-500) 70%, transparent) !important}
.bg-gray-500\/60 {background-color: color-mix(in srgb, var(--gray-500) 60%, transparent) !important}
.bg-gray-500\/50 {background-color: color-mix(in srgb, var(--gray-500) 50%, transparent) !important}
.bg-gray-500\/40 {background-color: color-mix(in srgb, var(--gray-500) 40%, transparent) !important}
.bg-gray-500\/30 {background-color: color-mix(in srgb, var(--gray-500) 30%, transparent) !important}
.bg-gray-500\/20 {background-color: color-mix(in srgb, var(--gray-500) 20%, transparent) !important}
.bg-gray-500\/10 {background-color: color-mix(in srgb, var(--gray-500) 10%, transparent) !important}
.bg-gray-600\/90 {background-color: color-mix(in srgb, var(--gray-600) 90%, transparent) !important}
.bg-gray-600\/80 {background-color: color-mix(in srgb, var(--gray-600) 80%, transparent) !important}
.bg-gray-600\/70 {background-color: color-mix(in srgb, var(--gray-600) 70%, transparent) !important}
.bg-gray-600\/60 {background-color: color-mix(in srgb, var(--gray-600) 60%, transparent) !important}
.bg-gray-600\/50 {background-color: color-mix(in srgb, var(--gray-600) 50%, transparent) !important}
.bg-gray-600\/40 {background-color: color-mix(in srgb, var(--gray-600) 40%, transparent) !important}
.bg-gray-600\/30 {background-color: color-mix(in srgb, var(--gray-600) 30%, transparent) !important}
.bg-gray-600\/20 {background-color: color-mix(in srgb, var(--gray-600) 20%, transparent) !important}
.bg-gray-600\/10 {background-color: color-mix(in srgb, var(--gray-600) 10%, transparent) !important}
.bg-gray-700\/90 {background-color: color-mix(in srgb, var(--gray-700) 90%, transparent) !important}
.bg-gray-700\/80 {background-color: color-mix(in srgb, var(--gray-700) 80%, transparent) !important}
.bg-gray-700\/70 {background-color: color-mix(in srgb, var(--gray-700) 70%, transparent) !important}
.bg-gray-700\/60 {background-color: color-mix(in srgb, var(--gray-700) 60%, transparent) !important}
.bg-gray-700\/50 {background-color: color-mix(in srgb, var(--gray-700) 50%, transparent) !important}
.bg-gray-700\/40 {background-color: color-mix(in srgb, var(--gray-700) 40%, transparent) !important}
.bg-gray-700\/30 {background-color: color-mix(in srgb, var(--gray-700) 30%, transparent) !important}
.bg-gray-700\/20 {background-color: color-mix(in srgb, var(--gray-700) 20%, transparent) !important}
.bg-gray-700\/10 {background-color: color-mix(in srgb, var(--gray-700) 10%, transparent) !important}
.bg-gray-800\/90 {background-color: color-mix(in srgb, var(--gray-800) 90%, transparent) !important}
.bg-gray-800\/80 {background-color: color-mix(in srgb, var(--gray-800) 80%, transparent) !important}
.bg-gray-800\/70 {background-color: color-mix(in srgb, var(--gray-800) 70%, transparent) !important}
.bg-gray-800\/60 {background-color: color-mix(in srgb, var(--gray-800) 60%, transparent) !important}
.bg-gray-800\/50 {background-color: color-mix(in srgb, var(--gray-800) 50%, transparent) !important}
.bg-gray-800\/40 {background-color: color-mix(in srgb, var(--gray-800) 40%, transparent) !important}
.bg-gray-800\/30 {background-color: color-mix(in srgb, var(--gray-800) 30%, transparent) !important}
.bg-gray-800\/20 {background-color: color-mix(in srgb, var(--gray-800) 20%, transparent) !important}
.bg-gray-800\/10 {background-color: color-mix(in srgb, var(--gray-800) 10%, transparent) !important}
.bg-gray-900\/90 {background-color: color-mix(in srgb, var(--gray-900) 90%, transparent) !important}
.bg-gray-900\/80 {background-color: color-mix(in srgb, var(--gray-900) 80%, transparent) !important}
.bg-gray-900\/70 {background-color: color-mix(in srgb, var(--gray-900) 70%, transparent) !important}
.bg-gray-900\/60 {background-color: color-mix(in srgb, var(--gray-900) 60%, transparent) !important}
.bg-gray-900\/50 {background-color: color-mix(in srgb, var(--gray-900) 50%, transparent) !important}
.bg-gray-900\/40 {background-color: color-mix(in srgb, var(--gray-900) 40%, transparent) !important}
.bg-gray-900\/30 {background-color: color-mix(in srgb, var(--gray-900) 30%, transparent) !important}
.bg-gray-900\/20 {background-color: color-mix(in srgb, var(--gray-900) 20%, transparent) !important}
.bg-gray-900\/10 {background-color: color-mix(in srgb, var(--gray-900) 10%, transparent) !important}

.bg-red\/90 {background-color: color-mix(in srgb, var(--red) 90%, transparent) !important}
.bg-red\/80 {background-color: color-mix(in srgb, var(--red) 80%, transparent) !important}
.bg-red\/70 {background-color: color-mix(in srgb, var(--red) 70%, transparent) !important}
.bg-red\/60 {background-color: color-mix(in srgb, var(--red) 60%, transparent) !important}
.bg-red\/50 {background-color: color-mix(in srgb, var(--red) 50%, transparent) !important}
.bg-red\/40 {background-color: color-mix(in srgb, var(--red) 40%, transparent) !important}
.bg-red\/30 {background-color: color-mix(in srgb, var(--red) 30%, transparent) !important}
.bg-red\/20 {background-color: color-mix(in srgb, var(--red) 20%, transparent) !important}
.bg-red\/10 {background-color: color-mix(in srgb, var(--red) 10%, transparent) !important}

.bg-orange\/90 {background-color: color-mix(in srgb, var(--orange) 90%, transparent) !important}
.bg-orange\/80 {background-color: color-mix(in srgb, var(--orange) 80%, transparent) !important}
.bg-orange\/70 {background-color: color-mix(in srgb, var(--orange) 70%, transparent) !important}
.bg-orange\/60 {background-color: color-mix(in srgb, var(--orange) 60%, transparent) !important}
.bg-orange\/50 {background-color: color-mix(in srgb, var(--orange) 50%, transparent) !important}
.bg-orange\/40 {background-color: color-mix(in srgb, var(--orange) 40%, transparent) !important}
.bg-orange\/30 {background-color: color-mix(in srgb, var(--orange) 30%, transparent) !important}
.bg-orange\/20 {background-color: color-mix(in srgb, var(--orange) 20%, transparent) !important}
.bg-orange\/10 {background-color: color-mix(in srgb, var(--orange) 10%, transparent) !important}

.bg-green\/90 {background-color: color-mix(in srgb, var(--green) 90%, transparent) !important}
.bg-green\/80 {background-color: color-mix(in srgb, var(--green) 80%, transparent) !important}
.bg-green\/70 {background-color: color-mix(in srgb, var(--green) 70%, transparent) !important}
.bg-green\/60 {background-color: color-mix(in srgb, var(--green) 60%, transparent) !important}
.bg-green\/50 {background-color: color-mix(in srgb, var(--green) 50%, transparent) !important}
.bg-green\/40 {background-color: color-mix(in srgb, var(--green) 40%, transparent) !important}
.bg-green\/30 {background-color: color-mix(in srgb, var(--green) 30%, transparent) !important}
.bg-green\/20 {background-color: color-mix(in srgb, var(--green) 20%, transparent) !important}
.bg-green\/10 {background-color: color-mix(in srgb, var(--green) 10%, transparent) !important}

.bg-purple\/90 {background-color: color-mix(in srgb, var(--purple) 90%, transparent) !important}
.bg-purple\/80 {background-color: color-mix(in srgb, var(--purple) 80%, transparent) !important}
.bg-purple\/70 {background-color: color-mix(in srgb, var(--purple) 70%, transparent) !important}
.bg-purple\/60 {background-color: color-mix(in srgb, var(--purple) 60%, transparent) !important}
.bg-purple\/50 {background-color: color-mix(in srgb, var(--purple) 50%, transparent) !important}
.bg-purple\/40 {background-color: color-mix(in srgb, var(--purple) 40%, transparent) !important}
.bg-purple\/30 {background-color: color-mix(in srgb, var(--purple) 30%, transparent) !important}
.bg-purple\/20 {background-color: color-mix(in srgb, var(--purple) 20%, transparent) !important}
.bg-purple\/10 {background-color: color-mix(in srgb, var(--purple) 10%, transparent) !important}

.bg-pink\/90 {background-color: color-mix(in srgb, var(--pink) 90%, transparent) !important}
.bg-pink\/80 {background-color: color-mix(in srgb, var(--pink) 80%, transparent) !important}
.bg-pink\/70 {background-color: color-mix(in srgb, var(--pink) 70%, transparent) !important}
.bg-pink\/60 {background-color: color-mix(in srgb, var(--pink) 60%, transparent) !important}
.bg-pink\/50 {background-color: color-mix(in srgb, var(--pink) 50%, transparent) !important}
.bg-pink\/40 {background-color: color-mix(in srgb, var(--pink) 40%, transparent) !important}
.bg-pink\/30 {background-color: color-mix(in srgb, var(--pink) 30%, transparent) !important}
.bg-pink\/20 {background-color: color-mix(in srgb, var(--pink) 20%, transparent) !important}
.bg-pink\/10 {background-color: color-mix(in srgb, var(--pink) 10%, transparent) !important}























.border-primary\/90 {border-color: color-mix(in srgb, var(--primary) 90%, transparent) !important}
.border-primary\/80 {border-color: color-mix(in srgb, var(--primary) 80%, transparent) !important}
.border-primary\/70 {border-color: color-mix(in srgb, var(--primary) 70%, transparent) !important}
.border-primary\/60 {border-color: color-mix(in srgb, var(--primary) 60%, transparent) !important}
.border-primary\/50 {border-color: color-mix(in srgb, var(--primary) 50%, transparent) !important}
.border-primary\/40 {border-color: color-mix(in srgb, var(--primary) 40%, transparent) !important}
.border-primary\/30 {border-color: color-mix(in srgb, var(--primary) 30%, transparent) !important}
.border-primary\/20 {border-color: color-mix(in srgb, var(--primary) 20%, transparent) !important}
.border-primary\/10 {border-color: color-mix(in srgb, var(--primary) 10%, transparent) !important}
.border-primary-50\/90 {border-color: color-mix(in srgb, var(--primary-50) 90%, transparent) !important}
.border-primary-50\/80 {border-color: color-mix(in srgb, var(--primary-50) 80%, transparent) !important}
.border-primary-50\/70 {border-color: color-mix(in srgb, var(--primary-50) 70%, transparent) !important}
.border-primary-50\/60 {border-color: color-mix(in srgb, var(--primary-50) 60%, transparent) !important}
.border-primary-50\/50 {border-color: color-mix(in srgb, var(--primary-50) 50%, transparent) !important}
.border-primary-50\/40 {border-color: color-mix(in srgb, var(--primary-50) 40%, transparent) !important}
.border-primary-50\/30 {border-color: color-mix(in srgb, var(--primary-50) 30%, transparent) !important}
.border-primary-50\/20 {border-color: color-mix(in srgb, var(--primary-50) 20%, transparent) !important}
.border-primary-50\/10 {border-color: color-mix(in srgb, var(--primary-50) 10%, transparent) !important}
.border-primary-100\/90 {border-color: color-mix(in srgb, var(--primary-100) 90%, transparent) !important}
.border-primary-100\/80 {border-color: color-mix(in srgb, var(--primary-100) 80%, transparent) !important}
.border-primary-100\/70 {border-color: color-mix(in srgb, var(--primary-100) 70%, transparent) !important}
.border-primary-100\/60 {border-color: color-mix(in srgb, var(--primary-100) 60%, transparent) !important}
.border-primary-100\/50 {border-color: color-mix(in srgb, var(--primary-100) 50%, transparent) !important}
.border-primary-100\/40 {border-color: color-mix(in srgb, var(--primary-100) 40%, transparent) !important}
.border-primary-100\/30 {border-color: color-mix(in srgb, var(--primary-100) 30%, transparent) !important}
.border-primary-100\/20 {border-color: color-mix(in srgb, var(--primary-100) 20%, transparent) !important}
.border-primary-100\/10 {border-color: color-mix(in srgb, var(--primary-100) 10%, transparent) !important}
.border-primary-200\/90 {border-color: color-mix(in srgb, var(--primary-200) 90%, transparent) !important}
.border-primary-200\/80 {border-color: color-mix(in srgb, var(--primary-200) 80%, transparent) !important}
.border-primary-200\/70 {border-color: color-mix(in srgb, var(--primary-200) 70%, transparent) !important}
.border-primary-200\/60 {border-color: color-mix(in srgb, var(--primary-200) 60%, transparent) !important}
.border-primary-200\/50 {border-color: color-mix(in srgb, var(--primary-200) 50%, transparent) !important}
.border-primary-200\/40 {border-color: color-mix(in srgb, var(--primary-200) 40%, transparent) !important}
.border-primary-200\/30 {border-color: color-mix(in srgb, var(--primary-200) 30%, transparent) !important}
.border-primary-200\/20 {border-color: color-mix(in srgb, var(--primary-200) 20%, transparent) !important}
.border-primary-200\/10 {border-color: color-mix(in srgb, var(--primary-200) 10%, transparent) !important}
.border-primary-300\/90 {border-color: color-mix(in srgb, var(--primary-300) 90%, transparent) !important}
.border-primary-300\/80 {border-color: color-mix(in srgb, var(--primary-300) 80%, transparent) !important}
.border-primary-300\/70 {border-color: color-mix(in srgb, var(--primary-300) 70%, transparent) !important}
.border-primary-300\/60 {border-color: color-mix(in srgb, var(--primary-300) 60%, transparent) !important}
.border-primary-300\/50 {border-color: color-mix(in srgb, var(--primary-300) 50%, transparent) !important}
.border-primary-300\/40 {border-color: color-mix(in srgb, var(--primary-300) 40%, transparent) !important}
.border-primary-300\/30 {border-color: color-mix(in srgb, var(--primary-300) 30%, transparent) !important}
.border-primary-300\/20 {border-color: color-mix(in srgb, var(--primary-300) 20%, transparent) !important}
.border-primary-300\/10 {border-color: color-mix(in srgb, var(--primary-300) 10%, transparent) !important}
.border-primary-400\/90 {border-color: color-mix(in srgb, var(--primary-400) 90%, transparent) !important}
.border-primary-400\/80 {border-color: color-mix(in srgb, var(--primary-400) 80%, transparent) !important}
.border-primary-400\/70 {border-color: color-mix(in srgb, var(--primary-400) 70%, transparent) !important}
.border-primary-400\/60 {border-color: color-mix(in srgb, var(--primary-400) 60%, transparent) !important}
.border-primary-400\/50 {border-color: color-mix(in srgb, var(--primary-400) 50%, transparent) !important}
.border-primary-400\/40 {border-color: color-mix(in srgb, var(--primary-400) 40%, transparent) !important}
.border-primary-400\/30 {border-color: color-mix(in srgb, var(--primary-400) 30%, transparent) !important}
.border-primary-400\/20 {border-color: color-mix(in srgb, var(--primary-400) 20%, transparent) !important}
.border-primary-400\/10 {border-color: color-mix(in srgb, var(--primary-400) 10%, transparent) !important}
.border-primary-500\/90 {border-color: color-mix(in srgb, var(--primary-500) 90%, transparent) !important}
.border-primary-500\/80 {border-color: color-mix(in srgb, var(--primary-500) 80%, transparent) !important}
.border-primary-500\/70 {border-color: color-mix(in srgb, var(--primary-500) 70%, transparent) !important}
.border-primary-500\/60 {border-color: color-mix(in srgb, var(--primary-500) 60%, transparent) !important}
.border-primary-500\/50 {border-color: color-mix(in srgb, var(--primary-500) 50%, transparent) !important}
.border-primary-500\/40 {border-color: color-mix(in srgb, var(--primary-500) 40%, transparent) !important}
.border-primary-500\/30 {border-color: color-mix(in srgb, var(--primary-500) 30%, transparent) !important}
.border-primary-500\/20 {border-color: color-mix(in srgb, var(--primary-500) 20%, transparent) !important}
.border-primary-500\/10 {border-color: color-mix(in srgb, var(--primary-500) 10%, transparent) !important}
.border-primary-600\/90 {border-color: color-mix(in srgb, var(--primary-600) 90%, transparent) !important}
.border-primary-600\/80 {border-color: color-mix(in srgb, var(--primary-600) 80%, transparent) !important}
.border-primary-600\/70 {border-color: color-mix(in srgb, var(--primary-600) 70%, transparent) !important}
.border-primary-600\/60 {border-color: color-mix(in srgb, var(--primary-600) 60%, transparent) !important}
.border-primary-600\/50 {border-color: color-mix(in srgb, var(--primary-600) 50%, transparent) !important}
.border-primary-600\/40 {border-color: color-mix(in srgb, var(--primary-600) 40%, transparent) !important}
.border-primary-600\/30 {border-color: color-mix(in srgb, var(--primary-600) 30%, transparent) !important}
.border-primary-600\/20 {border-color: color-mix(in srgb, var(--primary-600) 20%, transparent) !important}
.border-primary-600\/10 {border-color: color-mix(in srgb, var(--primary-600) 10%, transparent) !important}
.border-primary-700\/90 {border-color: color-mix(in srgb, var(--primary-700) 90%, transparent) !important}
.border-primary-700\/80 {border-color: color-mix(in srgb, var(--primary-700) 80%, transparent) !important}
.border-primary-700\/70 {border-color: color-mix(in srgb, var(--primary-700) 70%, transparent) !important}
.border-primary-700\/60 {border-color: color-mix(in srgb, var(--primary-700) 60%, transparent) !important}
.border-primary-700\/50 {border-color: color-mix(in srgb, var(--primary-700) 50%, transparent) !important}
.border-primary-700\/40 {border-color: color-mix(in srgb, var(--primary-700) 40%, transparent) !important}
.border-primary-700\/30 {border-color: color-mix(in srgb, var(--primary-700) 30%, transparent) !important}
.border-primary-700\/20 {border-color: color-mix(in srgb, var(--primary-700) 20%, transparent) !important}
.border-primary-700\/10 {border-color: color-mix(in srgb, var(--primary-700) 10%, transparent) !important}
.border-primary-800\/90 {border-color: color-mix(in srgb, var(--primary-800) 90%, transparent) !important}
.border-primary-800\/80 {border-color: color-mix(in srgb, var(--primary-800) 80%, transparent) !important}
.border-primary-800\/70 {border-color: color-mix(in srgb, var(--primary-800) 70%, transparent) !important}
.border-primary-800\/60 {border-color: color-mix(in srgb, var(--primary-800) 60%, transparent) !important}
.border-primary-800\/50 {border-color: color-mix(in srgb, var(--primary-800) 50%, transparent) !important}
.border-primary-800\/40 {border-color: color-mix(in srgb, var(--primary-800) 40%, transparent) !important}
.border-primary-800\/30 {border-color: color-mix(in srgb, var(--primary-800) 30%, transparent) !important}
.border-primary-800\/20 {border-color: color-mix(in srgb, var(--primary-800) 20%, transparent) !important}
.border-primary-800\/10 {border-color: color-mix(in srgb, var(--primary-800) 10%, transparent) !important}
.border-primary-900\/90 {border-color: color-mix(in srgb, var(--primary-900) 90%, transparent) !important}
.border-primary-900\/80 {border-color: color-mix(in srgb, var(--primary-900) 80%, transparent) !important}
.border-primary-900\/70 {border-color: color-mix(in srgb, var(--primary-900) 70%, transparent) !important}
.border-primary-900\/60 {border-color: color-mix(in srgb, var(--primary-900) 60%, transparent) !important}
.border-primary-900\/50 {border-color: color-mix(in srgb, var(--primary-900) 50%, transparent) !important}
.border-primary-900\/40 {border-color: color-mix(in srgb, var(--primary-900) 40%, transparent) !important}
.border-primary-900\/30 {border-color: color-mix(in srgb, var(--primary-900) 30%, transparent) !important}
.border-primary-900\/20 {border-color: color-mix(in srgb, var(--primary-900) 20%, transparent) !important}
.border-primary-900\/10 {border-color: color-mix(in srgb, var(--primary-900) 10%, transparent) !important}

.border-gray\/90 {border-color: color-mix(in srgb, var(--gray) 90%, transparent) !important}
.border-gray\/80 {border-color: color-mix(in srgb, var(--gray) 80%, transparent) !important}
.border-gray\/70 {border-color: color-mix(in srgb, var(--gray) 70%, transparent) !important}
.border-gray\/60 {border-color: color-mix(in srgb, var(--gray) 60%, transparent) !important}
.border-gray\/50 {border-color: color-mix(in srgb, var(--gray) 50%, transparent) !important}
.border-gray\/40 {border-color: color-mix(in srgb, var(--gray) 40%, transparent) !important}
.border-gray\/30 {border-color: color-mix(in srgb, var(--gray) 30%, transparent) !important}
.border-gray\/20 {border-color: color-mix(in srgb, var(--gray) 20%, transparent) !important}
.border-gray\/10 {border-color: color-mix(in srgb, var(--gray) 10%, transparent) !important}
.border-gray-50\/90 {border-color: color-mix(in srgb, var(--gray-50) 90%, transparent) !important}
.border-gray-50\/80 {border-color: color-mix(in srgb, var(--gray-50) 80%, transparent) !important}
.border-gray-50\/70 {border-color: color-mix(in srgb, var(--gray-50) 70%, transparent) !important}
.border-gray-50\/60 {border-color: color-mix(in srgb, var(--gray-50) 60%, transparent) !important}
.border-gray-50\/50 {border-color: color-mix(in srgb, var(--gray-50) 50%, transparent) !important}
.border-gray-50\/40 {border-color: color-mix(in srgb, var(--gray-50) 40%, transparent) !important}
.border-gray-50\/30 {border-color: color-mix(in srgb, var(--gray-50) 30%, transparent) !important}
.border-gray-50\/20 {border-color: color-mix(in srgb, var(--gray-50) 20%, transparent) !important}
.border-gray-50\/10 {border-color: color-mix(in srgb, var(--gray-50) 10%, transparent) !important}
.border-gray-100\/90 {border-color: color-mix(in srgb, var(--gray-100) 90%, transparent) !important}
.border-gray-100\/80 {border-color: color-mix(in srgb, var(--gray-100) 80%, transparent) !important}
.border-gray-100\/70 {border-color: color-mix(in srgb, var(--gray-100) 70%, transparent) !important}
.border-gray-100\/60 {border-color: color-mix(in srgb, var(--gray-100) 60%, transparent) !important}
.border-gray-100\/50 {border-color: color-mix(in srgb, var(--gray-100) 50%, transparent) !important}
.border-gray-100\/40 {border-color: color-mix(in srgb, var(--gray-100) 40%, transparent) !important}
.border-gray-100\/30 {border-color: color-mix(in srgb, var(--gray-100) 30%, transparent) !important}
.border-gray-100\/20 {border-color: color-mix(in srgb, var(--gray-100) 20%, transparent) !important}
.border-gray-100\/10 {border-color: color-mix(in srgb, var(--gray-100) 10%, transparent) !important}
.border-gray-200\/90 {border-color: color-mix(in srgb, var(--gray-200) 90%, transparent) !important}
.border-gray-200\/80 {border-color: color-mix(in srgb, var(--gray-200) 80%, transparent) !important}
.border-gray-200\/70 {border-color: color-mix(in srgb, var(--gray-200) 70%, transparent) !important}
.border-gray-200\/60 {border-color: color-mix(in srgb, var(--gray-200) 60%, transparent) !important}
.border-gray-200\/50 {border-color: color-mix(in srgb, var(--gray-200) 50%, transparent) !important}
.border-gray-200\/40 {border-color: color-mix(in srgb, var(--gray-200) 40%, transparent) !important}
.border-gray-200\/30 {border-color: color-mix(in srgb, var(--gray-200) 30%, transparent) !important}
.border-gray-200\/20 {border-color: color-mix(in srgb, var(--gray-200) 20%, transparent) !important}
.border-gray-200\/10 {border-color: color-mix(in srgb, var(--gray-200) 10%, transparent) !important}
.border-gray-300\/90 {border-color: color-mix(in srgb, var(--gray-300) 90%, transparent) !important}
.border-gray-300\/80 {border-color: color-mix(in srgb, var(--gray-300) 80%, transparent) !important}
.border-gray-300\/70 {border-color: color-mix(in srgb, var(--gray-300) 70%, transparent) !important}
.border-gray-300\/60 {border-color: color-mix(in srgb, var(--gray-300) 60%, transparent) !important}
.border-gray-300\/50 {border-color: color-mix(in srgb, var(--gray-300) 50%, transparent) !important}
.border-gray-300\/40 {border-color: color-mix(in srgb, var(--gray-300) 40%, transparent) !important}
.border-gray-300\/30 {border-color: color-mix(in srgb, var(--gray-300) 30%, transparent) !important}
.border-gray-300\/20 {border-color: color-mix(in srgb, var(--gray-300) 20%, transparent) !important}
.border-gray-300\/10 {border-color: color-mix(in srgb, var(--gray-300) 10%, transparent) !important}
.border-gray-400\/90 {border-color: color-mix(in srgb, var(--gray-400) 90%, transparent) !important}
.border-gray-400\/80 {border-color: color-mix(in srgb, var(--gray-400) 80%, transparent) !important}
.border-gray-400\/70 {border-color: color-mix(in srgb, var(--gray-400) 70%, transparent) !important}
.border-gray-400\/60 {border-color: color-mix(in srgb, var(--gray-400) 60%, transparent) !important}
.border-gray-400\/50 {border-color: color-mix(in srgb, var(--gray-400) 50%, transparent) !important}
.border-gray-400\/40 {border-color: color-mix(in srgb, var(--gray-400) 40%, transparent) !important}
.border-gray-400\/30 {border-color: color-mix(in srgb, var(--gray-400) 30%, transparent) !important}
.border-gray-400\/20 {border-color: color-mix(in srgb, var(--gray-400) 20%, transparent) !important}
.border-gray-400\/10 {border-color: color-mix(in srgb, var(--gray-400) 10%, transparent) !important}
.border-gray-500\/90 {border-color: color-mix(in srgb, var(--gray-500) 90%, transparent) !important}
.border-gray-500\/80 {border-color: color-mix(in srgb, var(--gray-500) 80%, transparent) !important}
.border-gray-500\/70 {border-color: color-mix(in srgb, var(--gray-500) 70%, transparent) !important}
.border-gray-500\/60 {border-color: color-mix(in srgb, var(--gray-500) 60%, transparent) !important}
.border-gray-500\/50 {border-color: color-mix(in srgb, var(--gray-500) 50%, transparent) !important}
.border-gray-500\/40 {border-color: color-mix(in srgb, var(--gray-500) 40%, transparent) !important}
.border-gray-500\/30 {border-color: color-mix(in srgb, var(--gray-500) 30%, transparent) !important}
.border-gray-500\/20 {border-color: color-mix(in srgb, var(--gray-500) 20%, transparent) !important}
.border-gray-500\/10 {border-color: color-mix(in srgb, var(--gray-500) 10%, transparent) !important}
.border-gray-600\/90 {border-color: color-mix(in srgb, var(--gray-600) 90%, transparent) !important}
.border-gray-600\/80 {border-color: color-mix(in srgb, var(--gray-600) 80%, transparent) !important}
.border-gray-600\/70 {border-color: color-mix(in srgb, var(--gray-600) 70%, transparent) !important}
.border-gray-600\/60 {border-color: color-mix(in srgb, var(--gray-600) 60%, transparent) !important}
.border-gray-600\/50 {border-color: color-mix(in srgb, var(--gray-600) 50%, transparent) !important}
.border-gray-600\/40 {border-color: color-mix(in srgb, var(--gray-600) 40%, transparent) !important}
.border-gray-600\/30 {border-color: color-mix(in srgb, var(--gray-600) 30%, transparent) !important}
.border-gray-600\/20 {border-color: color-mix(in srgb, var(--gray-600) 20%, transparent) !important}
.border-gray-600\/10 {border-color: color-mix(in srgb, var(--gray-600) 10%, transparent) !important}
.border-gray-700\/90 {border-color: color-mix(in srgb, var(--gray-700) 90%, transparent) !important}
.border-gray-700\/80 {border-color: color-mix(in srgb, var(--gray-700) 80%, transparent) !important}
.border-gray-700\/70 {border-color: color-mix(in srgb, var(--gray-700) 70%, transparent) !important}
.border-gray-700\/60 {border-color: color-mix(in srgb, var(--gray-700) 60%, transparent) !important}
.border-gray-700\/50 {border-color: color-mix(in srgb, var(--gray-700) 50%, transparent) !important}
.border-gray-700\/40 {border-color: color-mix(in srgb, var(--gray-700) 40%, transparent) !important}
.border-gray-700\/30 {border-color: color-mix(in srgb, var(--gray-700) 30%, transparent) !important}
.border-gray-700\/20 {border-color: color-mix(in srgb, var(--gray-700) 20%, transparent) !important}
.border-gray-700\/10 {border-color: color-mix(in srgb, var(--gray-700) 10%, transparent) !important}
.border-gray-800\/90 {border-color: color-mix(in srgb, var(--gray-800) 90%, transparent) !important}
.border-gray-800\/80 {border-color: color-mix(in srgb, var(--gray-800) 80%, transparent) !important}
.border-gray-800\/70 {border-color: color-mix(in srgb, var(--gray-800) 70%, transparent) !important}
.border-gray-800\/60 {border-color: color-mix(in srgb, var(--gray-800) 60%, transparent) !important}
.border-gray-800\/50 {border-color: color-mix(in srgb, var(--gray-800) 50%, transparent) !important}
.border-gray-800\/40 {border-color: color-mix(in srgb, var(--gray-800) 40%, transparent) !important}
.border-gray-800\/30 {border-color: color-mix(in srgb, var(--gray-800) 30%, transparent) !important}
.border-gray-800\/20 {border-color: color-mix(in srgb, var(--gray-800) 20%, transparent) !important}
.border-gray-800\/10 {border-color: color-mix(in srgb, var(--gray-800) 10%, transparent) !important}
.border-gray-900\/90 {border-color: color-mix(in srgb, var(--gray-900) 90%, transparent) !important}
.border-gray-900\/80 {border-color: color-mix(in srgb, var(--gray-900) 80%, transparent) !important}
.border-gray-900\/70 {border-color: color-mix(in srgb, var(--gray-900) 70%, transparent) !important}
.border-gray-900\/60 {border-color: color-mix(in srgb, var(--gray-900) 60%, transparent) !important}
.border-gray-900\/50 {border-color: color-mix(in srgb, var(--gray-900) 50%, transparent) !important}
.border-gray-900\/40 {border-color: color-mix(in srgb, var(--gray-900) 40%, transparent) !important}
.border-gray-900\/30 {border-color: color-mix(in srgb, var(--gray-900) 30%, transparent) !important}
.border-gray-900\/20 {border-color: color-mix(in srgb, var(--gray-900) 20%, transparent) !important}
.border-gray-900\/10 {border-color: color-mix(in srgb, var(--gray-900) 10%, transparent) !important}

.border-red\/90 {border-color: color-mix(in srgb, var(--red) 90%, transparent) !important}
.border-red\/80 {border-color: color-mix(in srgb, var(--red) 80%, transparent) !important}
.border-red\/70 {border-color: color-mix(in srgb, var(--red) 70%, transparent) !important}
.border-red\/60 {border-color: color-mix(in srgb, var(--red) 60%, transparent) !important}
.border-red\/50 {border-color: color-mix(in srgb, var(--red) 50%, transparent) !important}
.border-red\/40 {border-color: color-mix(in srgb, var(--red) 40%, transparent) !important}
.border-red\/30 {border-color: color-mix(in srgb, var(--red) 30%, transparent) !important}
.border-red\/20 {border-color: color-mix(in srgb, var(--red) 20%, transparent) !important}
.border-red\/10 {border-color: color-mix(in srgb, var(--red) 10%, transparent) !important}

.border-orange\/90 {border-color: color-mix(in srgb, var(--orange) 90%, transparent) !important}
.border-orange\/80 {border-color: color-mix(in srgb, var(--orange) 80%, transparent) !important}
.border-orange\/70 {border-color: color-mix(in srgb, var(--orange) 70%, transparent) !important}
.border-orange\/60 {border-color: color-mix(in srgb, var(--orange) 60%, transparent) !important}
.border-orange\/50 {border-color: color-mix(in srgb, var(--orange) 50%, transparent) !important}
.border-orange\/40 {border-color: color-mix(in srgb, var(--orange) 40%, transparent) !important}
.border-orange\/30 {border-color: color-mix(in srgb, var(--orange) 30%, transparent) !important}
.border-orange\/20 {border-color: color-mix(in srgb, var(--orange) 20%, transparent) !important}
.border-orange\/10 {border-color: color-mix(in srgb, var(--orange) 10%, transparent) !important}

.border-green\/90 {border-color: color-mix(in srgb, var(--green) 90%, transparent) !important}
.border-green\/80 {border-color: color-mix(in srgb, var(--green) 80%, transparent) !important}
.border-green\/70 {border-color: color-mix(in srgb, var(--green) 70%, transparent) !important}
.border-green\/60 {border-color: color-mix(in srgb, var(--green) 60%, transparent) !important}
.border-green\/50 {border-color: color-mix(in srgb, var(--green) 50%, transparent) !important}
.border-green\/40 {border-color: color-mix(in srgb, var(--green) 40%, transparent) !important}
.border-green\/30 {border-color: color-mix(in srgb, var(--green) 30%, transparent) !important}
.border-green\/20 {border-color: color-mix(in srgb, var(--green) 20%, transparent) !important}
.border-green\/10 {border-color: color-mix(in srgb, var(--green) 10%, transparent) !important}

.border-purple\/90 {border-color: color-mix(in srgb, var(--purple) 90%, transparent) !important}
.border-purple\/80 {border-color: color-mix(in srgb, var(--purple) 80%, transparent) !important}
.border-purple\/70 {border-color: color-mix(in srgb, var(--purple) 70%, transparent) !important}
.border-purple\/60 {border-color: color-mix(in srgb, var(--purple) 60%, transparent) !important}
.border-purple\/50 {border-color: color-mix(in srgb, var(--purple) 50%, transparent) !important}
.border-purple\/40 {border-color: color-mix(in srgb, var(--purple) 40%, transparent) !important}
.border-purple\/30 {border-color: color-mix(in srgb, var(--purple) 30%, transparent) !important}
.border-purple\/20 {border-color: color-mix(in srgb, var(--purple) 20%, transparent) !important}
.border-purple\/10 {border-color: color-mix(in srgb, var(--purple) 10%, transparent) !important}

.border-pink\/90 {border-color: color-mix(in srgb, var(--pink) 90%, transparent) !important}
.border-pink\/80 {border-color: color-mix(in srgb, var(--pink) 80%, transparent) !important}
.border-pink\/70 {border-color: color-mix(in srgb, var(--pink) 70%, transparent) !important}
.border-pink\/60 {border-color: color-mix(in srgb, var(--pink) 60%, transparent) !important}
.border-pink\/50 {border-color: color-mix(in srgb, var(--pink) 50%, transparent) !important}
.border-pink\/40 {border-color: color-mix(in srgb, var(--pink) 40%, transparent) !important}
.border-pink\/30 {border-color: color-mix(in srgb, var(--pink) 30%, transparent) !important}
.border-pink\/20 {border-color: color-mix(in srgb, var(--pink) 20%, transparent) !important}
.border-pink\/10 {border-color: color-mix(in srgb, var(--pink) 10%, transparent) !important}

.right.modal.fade .modal-dialog {
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out;
}

.right.modal.fade.show .modal-dialog {
    transform: translateX(0) ;
}

ul.dropdown-menu.inner.show {
    box-shadow: none!important;
    font-size: .9rem;
}

.form-control .dropdown-menu {border: 1px solid var(--gray-200);filter: drop-shadow(0px 1px 16px #0001);}

.form-control .dropdown-menu .active {
    background-color: var(--primary-700);
}

.dropdown-menu input {
    filter: drop-shadow(1px 1px 1px #0001);
    border: 1px solid var(--gray-100);
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
    border-radius: unset !important;
}

body.dark {
    .swal2-title {
        color: #000 !important;
    }

    .custom-pagination-button{
        border: 1px solid var(--gray-700, #374151) !important;
        background: var(--gray-800, #1F2937) !important;
        color: #fff !important;
    }

    .bottom select{
        color: #fff !important;
        border: 1px solid var(--gray-700, #374151) !important;
        background: var(--gray-800, #1F2937) !important;
    }

    .custom-pagination-select{
        color: #fff !important;
        border: 1px solid var(--gray-700, #374151) !important;
        background: var(--gray-800, #1F2937) !important;
    }

    .announcement-priority.low{
        background-color: rgba(100, 170, 222, 0.80) !important;
        color: #fff !important;
    }

    .announcement-priority.medium{
        background-color: rgba(249, 115, 22, 0.80) !important;
        color: #fff !important;
    }

    .announcement-priority.high{
        background-color: rgba(226, 19, 19, 0.80) !important;
        color: #fff !important;
    }

    .top-banner{
        background: #29445D;
    }

    .monthly-bg{
        background-color: var(--gray-700);
    }

    .welcome-screen-container{
        /*padding: 2rem 1rem 2rem 1rem;*/
    }

    .success-box{
        color: #fff !important;
        border: 1px solid #B1F1C9;
        background: rgba(28, 161, 77, 0.8) !important;
    }
    .secondary-box{
        background:rgba(75, 85, 99, 0.1);
    }
    .warning-box{
        color: #fff !important;
        border: 1px solid #FDCCAA;
        background: rgba(249, 115, 22, 0.8) !important;
    }

    .danger-box{
        color: #fff !important;
        border: 1px solid #FEB2B2;
        background: rgba(239, 68, 68, 0.8) !important;
    }

    .info-box{
        color: #fff !important;
        border: 1px solid #CDE3F4;
        background: rgba(100, 170, 222, 0.8) !important;
    }
    .purple-box{
        color: #fff !important;
        border: 1px solid rgba(207, 187, 251, 1);
        background: rgba(139, 92, 246, 0.8) !important;
    }

    .orange-box {
        color: #fff !important;
        border: 1px solid rgba(254, 225, 205, 1);
        background-color: rgba(249, 115, 22, 0.8) !important;
    }

    .yellow-box{
        color: #fff !important;
        border: 1px solid #FEF3CD;
        background: rgba(252, 211, 77, 0.8) !important;
    }

    #feedback-highlighter, #feedback-overview, #feedback-submit-success{
        background-color: var(--gray-700) !important;
    }

    #feedback-submit-close-btn{
        color: #fff !important;
        border: 1px solid #FEB2B2;
        background: rgba(239, 68, 68, 0.8) !important;
    }

}

.dataTable tbody tr {
    transition: background-color .05s ease-in-out;
}
.dataTable tbody tr:hover {
    background-color: rgba(100, 170, 222, 0.20) !important;
}
table.dataTable tbody tr.selected > * {
    color: black;
    box-shadow: inset 0 0 0 9999px rgba(28, 161, 77, 0.20) !important;
}
label.label-cbx {margin-bottom: unset}

.dataTables_length label{
    margin-bottom: 0 !important;
}

.daterangepicker td.start-date {
    border-radius: 4px 0 0 4px !important;
}
.daterangepicker td.end-date {
    border-radius: 0 4px 4px 0 !important;
}
.daterangepicker td.start-date.end-date {
    border-radius: 4px !important;
}

.monthly-bg{
    background-color: var(--gray-100);
    border-radius: 4px;
    padding:12px 0px 3px 12px;
}

@media (max-width: 480px) {


    .welcome-screen-clock{
        font-size: 2rem !important;
        width: auto !important;
    }
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff !important;
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: white !important;
}
.custom-control-label::before {background-color: var(--gray-500) !important}
.custom-control-label::after {background-color: white !important}

.bg-dark-dark{
    background-color: var(--gray-800) !important;
}


.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff !important;
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: white !important;
}
.custom-control-label::before {background-color: var(--gray-500) !important}
.custom-control-label::after {background-color: white !important}
.date-picker-wrapper .month-wrapper {border: none;}
.drp_top-bar input[type=button] {width: 100px!important}
.date-picker-wrapper {
    box-shadow: unset!important;
    background: white!important;
    border: 1px solid var(--gray-200);
    filter: drop-shadow(2px 2px 12px #0003);
    font-family: 'Inter', sans-serif
}

.drp-buttons button {min-width: 150px!important;}
.daterangepicker .drp-calendar.left .calendar-table {padding: 0px!important;}

.dark-none {display: block;}
.dark-block {display: none;}


@media (max-width: 1000px) {

    input.form-control,textarea.form-control {font-size:16px!important;}
    table tr, table td, table a, table button, table span {white-space: nowrap;}

}

@media (max-width: 700px) {

    .btn {}
    .bankList, .allowanceList, .deductionList, .taxList {grid-template-columns: repeat(1,1fr)!important; padding: 10px!important;}
    .btn.btn-md, .btn {font-weight: 600;font-size: 14px;height: 42px;white-space: nowrap;}
    .card-body { padding: 0.5rem!important;}
    .leaves-container {padding: 10px 12px 14px 12px!important;}
    .pageHeader {flex-direction: column-reverse;}
    .pageHeader > div:nth-child(1) {width: 100%!important;flex-wrap: wrap;}
    .pageHeader > div:nth-child(2) {width: 100%!important;margin-bottom: 10px;}
    .pageHeader > div:nth-child(1) > div:nth-child(1) {width: 100%!important;}
    .pageHeader > div:nth-child(1) > select {width: calc(100% - 108px)!important;}
    .pageHeader > div:nth-child(1) > div {width: 82px;}

    .pageHeaderNotView {flex-direction: column-reverse;}
    .pageHeaderNotView > div:nth-child(1) {width: 100%!important;flex-wrap: wrap;gap: 10px;}
    .pageHeaderNotView > div:nth-child(2) {width: 100%!important;margin-bottom: 10px;}
    .pageHeaderNotView > div:nth-child(1) > div:nth-child(1) {width: 100%!important;max-width: 100%!important;flex: 100%!important;}
    .pageHeaderNotView > div:nth-child(1) > select {width: 100%!important;}
    .pageHeaderNotView > div:nth-child(1) > div {width: 82px;}
}

.dataTables_wrapper .bottom {flex-wrap: wrap; row-gap: 10px}



body:not(.dark) .filter-option-inner-inner, body:not(.dark) .form-control {
    background-color: var(--white);
    color: black!important;!importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;
}

.btn.btn-secondary {
    color: white;
}

.bootstrap-select .btn.btn-select {
    font-weight: normal;
    outline: none !important;
    &[aria-expanded=true]:not([aria-disabled=true]) {outline: none !important; border-color: var(--primary-500)}
    &:focus:not([aria-disabled=true]), &:focus-visible:not([aria-disabled=true]), &:focus-within:not([aria-disabled=true]), &:active:not([aria-disabled=true]) {outline: none !important; border-color: var(--primary-500)}
}

.btn-select[aria-disabled=true] {
    background-color: #e6e9ed;
    color: #a3acb5;
    font-weight: normal;
    opacity: 1;
    cursor: default;

    & .filter-option-inner-inner {
        color: #a3acb5 !important;
        font-weight: normal;
    }
}

.toggle.btn {
    min-height:42px!important;
}

#t_wrapper.dataTables_wrapper tbody tr {
    height: unset !important;
}

tr {
    vertical-align: middle !important;
    font-size: .875rem!important;
}


.table thead th {
    vertical-align: middle !important;
    border-right: 1px solid #fff;
    font-size: .875rem!important;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.table.dataTable tbody tr td {
    vertical-align: middle;
}
.date-picker-wrapper .month-wrapper table th, .date-picker-wrapper .month-wrapper table td {
    vertical-align: middle;
    text-align: center;
    line-height: 14px;
    margin: 0px;
    padding: 4px;
    width: 23px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}
.date-picker-wrapper span.prev, .date-picker-wrapper span.next {
    font-size: 0px;
}

.date-picker-wrapper span.prev:before, .date-picker-wrapper span.next:before {
    content: "\f104";
    font-family: 'FontAwesome';
    font-size: 0.9rem;
    line-height: 2;
}


.date-picker-wrapper  span.next:before {
    content: "\f105";
}

.btn-group.btn-group-sm.btn-block {
    display: flex!important;
    margin: 3px 12px;
    justify-content: flex-end;
    margin-top: -14px;
    max-width: 159px;
    border-radius: 44px;
    position: absolute;
    right: 0;
}

.btn-group.btn-group-sm.btn-block button {
    border: unset!important;
    border-radius: 20px!important;
    font-size: 0.8rem;
    padding: 0px!important;
    font-weight: 500;
    color: var(--blue-700);
}
li.dropdown-header.optgroup-2 {
    cursor: pointer;
}
button.swal2-cancel {
    background-color: #98a2b32e!important;
    color: #98A2B3!important;
}