*,
::before,
::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:;
    --tw-pan-y:;
    --tw-pinch-zoom:;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:;
    --tw-gradient-via-position:;
    --tw-gradient-to-position:;
    --tw-ordinal:;
    --tw-slashed-zero:;
    --tw-numeric-figure:;
    --tw-numeric-spacing:;
    --tw-numeric-fraction:;
    --tw-ring-inset:;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:;
    --tw-brightness:;
    --tw-contrast:;
    --tw-grayscale:;
    --tw-hue-rotate:;
    --tw-invert:;
    --tw-saturate:;
    --tw-sepia:;
    --tw-drop-shadow:;
    --tw-backdrop-blur:;
    --tw-backdrop-brightness:;
    --tw-backdrop-contrast:;
    --tw-backdrop-grayscale:;
    --tw-backdrop-hue-rotate:;
    --tw-backdrop-invert:;
    --tw-backdrop-opacity:;
    --tw-backdrop-saturate:;
    --tw-backdrop-sepia:;
    --tw-contain-size:;
    --tw-contain-layout:;
    --tw-contain-paint:;
    --tw-contain-style:;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:;
    --tw-pan-y:;
    --tw-pinch-zoom:;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:;
    --tw-gradient-via-position:;
    --tw-gradient-to-position:;
    --tw-ordinal:;
    --tw-slashed-zero:;
    --tw-numeric-figure:;
    --tw-numeric-spacing:;
    --tw-numeric-fraction:;
    --tw-ring-inset:;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:;
    --tw-brightness:;
    --tw-contrast:;
    --tw-grayscale:;
    --tw-hue-rotate:;
    --tw-invert:;
    --tw-saturate:;
    --tw-sepia:;
    --tw-drop-shadow:;
    --tw-backdrop-blur:;
    --tw-backdrop-brightness:;
    --tw-backdrop-contrast:;
    --tw-backdrop-grayscale:;
    --tw-backdrop-hue-rotate:;
    --tw-backdrop-invert:;
    --tw-backdrop-opacity:;
    --tw-backdrop-saturate:;
    --tw-backdrop-sepia:;
    --tw-contain-size:;
    --tw-contain-layout:;
    --tw-contain-paint:;
    --tw-contain-style:;
}

/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
    box-sizing: border-box;
    /* 1 */
    border-width: 0;
    /* 2 */
    border-style: solid;
    /* 2 */
    border-color: currentColor;
    /* 2 */
}

::before,
::after {
    --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
    line-height: 1.5;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    -moz-tab-size: 4;
    /* 3 */
    -o-tab-size: 4;
    tab-size: 4;
    /* 3 */
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* 4 */
    font-feature-settings: normal;
    /* 5 */
    font-variation-settings: normal;
    /* 6 */
    -webkit-tap-highlight-color: transparent;
    /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
    margin: 0;
    /* 1 */
    line-height: inherit;
    /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
    height: 0;
    /* 1 */
    color: inherit;
    /* 2 */
    border-top-width: 1px;
    /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
    color: inherit;
    text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
    font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* 1 */
    font-feature-settings: normal;
    /* 2 */
    font-variation-settings: normal;
    /* 3 */
    font-size: 1em;
    /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
    text-indent: 0;
    /* 1 */
    border-color: inherit;
    /* 2 */
    border-collapse: collapse;
    /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-feature-settings: inherit;
    /* 1 */
    font-variation-settings: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    font-weight: inherit;
    /* 1 */
    line-height: inherit;
    /* 1 */
    letter-spacing: inherit;
    /* 1 */
    color: inherit;
    /* 1 */
    margin: 0;
    /* 2 */
    padding: 0;
    /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
    text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
    -webkit-appearance: button;
    /* 1 */
    background-color: transparent;
    /* 2 */
    background-image: none;
    /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
    outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
    box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
}

ol,
ul,
menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
    padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
    resize: vertical;
}

    /*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

    input::-moz-placeholder,
    textarea::-moz-placeholder {
        opacity: 1;
        /* 1 */
        color: #9ca3af;
        /* 2 */
    }

    input::placeholder,
    textarea::placeholder {
        opacity: 1;
        /* 1 */
        color: #9ca3af;
        /* 2 */
    }

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
    cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
    cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    /* 1 */
    vertical-align: middle;
    /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
    max-width: 100%;
    height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
    display: none;
}

.container {
    width: 100%;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

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

.visible {
    visibility: visible;
}

.collapse {
    visibility: collapse;
}

.static {
    position: static;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.inset-0 {
    inset: 0px;
}

.inset-y-0 {
    top: 0px;
    bottom: 0px;
}

.bottom-0 {
    bottom: 0px;
}

.bottom-4 {
    bottom: 1rem;
}

.bottom-\[-40px\] {
    bottom: -40px;
}

.bottom-\[0px\] {
    bottom: 0px;
}

.bottom-\[27px\] {
    bottom: 27px;
}

.left-0 {
    left: 0px;
}

.left-3 {
    left: 0.75rem;
}

.left-5 {
    left: 1.25rem;
}

.left-7 {
    left: 1.75rem;
}

.left-\[-10\.5px\] {
    left: -10.5px;
}

.left-\[-1px\] {
    left: -1px;
}

.left-\[-628px\] {
    left: -628px;
}

.left-\[0px\] {
    left: 0px;
}

.left-\[268px\] {
    left: 268px;
}

.left-\[270px\] {
    left: 270px;
}

.left-\[280px\] {
    left: 280px;
}

.left-\[2px\] {
    left: 2px;
}

.left-\[302px\] {
    left: 302px;
}

.left-\[303px\] {
    left: 303px;
}

.left-\[30px\] {
    left: 30px;
}

.left-\[42px\] {
    left: 42px;
}

.left-\[61\.32px\] {
    left: 61.32px;
}

.left-\[95px\] {
    left: 95px;
}

.left-\[calc\(50\%_-_27px\)\] {
    left: calc(50% - 27px);
}

.left-\[calc\(50\%_-_36\.5px\)\] {
    left: calc(50% - 36.5px);
}

.left-\[calc\(50\%_-_52px\)\] {
    left: calc(50% - 52px);
}

.left-\[calc\(50\%_-_64px\)\] {
    left: calc(50% - 64px);
}

.left-\[calc\(50\%_-_76px\)\] {
    left: calc(50% - 76px);
}

.right-0 {
    right: 0px;
}

.right-3 {
    right: 0.75rem;
}

.right-4 {
    right: 1rem;
}

.right-\[-40px\] {
    right: -40px;
}

.right-\[0px\] {
    right: 0px;
}

.right-\[2px\] {
    right: 2px;
}

.top-0 {
    top: 0px;
}

.top-1\/2 {
    top: 50%;
}

.top-14 {
    top: 3.5rem;
}

.top-28 {
    top: 7rem;
}

.top-3 {
    top: 0.75rem;
}

.top-3\.5 {
    top: 0.875rem;
}

.top-4 {
    top: 1rem;
}

.top-5 {
    top: 1.25rem;
}

.top-7 {
    top: 1.75rem;
}

.top-\[-10\.39px\] {
    top: -10.39px;
}

.top-\[-10\.5px\] {
    top: -10.5px;
}

.top-\[-1px\] {
    top: -1px;
}

.top-\[0px\] {
    top: 0px;
}

.top-\[104px\] {
    top: 104px;
}

.top-\[153px\] {
    top: 153px;
}

.top-\[202px\] {
    top: 202px;
}

.top-\[248px\] {
    top: 248px;
}

.top-\[26px\] {
    top: 26px;
}

.top-\[2px\] {
    top: 2px;
}

.top-\[39px\] {
    top: 39px;
}

.top-\[65px\] {
    top: 65px;
}

.top-\[83px\] {
    top: 83px;
}

.top-\[92px\] {
    top: 92px;
}

.top-\[calc\(50\%_-_24px\)\] {
    top: calc(50% - 24px);
}

.top-\[calc\(50\%_-_52px\)\] {
    top: calc(50% - 52px);
}

.top-\[calc\(50\%_-_64px\)\] {
    top: calc(50% - 64px);
}

.top-\[calc\(50\%_-_76px\)\] {
    top: calc(50% - 76px);
}

.top-\[calc\(50\%_-_7px\)\] {
    top: calc(50% - 7px);
}

.z-10 {
    z-index: 10;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

.z-60 {
    z-index: 60;
}

.z-\[1\] {
    z-index: 1;
}

.col-span-1 {
    grid-column: span 1 / span 1;
}

.\!m-0 {
    margin: 0px !important;
}

.\!m-\[0\] {
    margin: 0 !important;
}

.m-0 {
    margin: 0px;
}

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

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

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.ml-3 {
    margin-left: 0.75rem;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-6 {
    margin-right: 1.5rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-12 {
    margin-top: 3rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

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

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.table {
    display: table;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

.size-10 {
    width: 2.5rem;
    height: 2.5rem;
}

.size-12 {
    width: 3rem;
    height: 3rem;
}

.size-6 {
    width: 1.5rem;
    height: 1.5rem;
}

.h-1\.5 {
    height: 0.375rem;
}

.h-10 {
    height: 2.5rem;
}

.h-11 {
    height: 2.75rem;
}

.h-12 {
    height: 3rem;
}

.h-14 {
    height: 3.5rem;
}

.h-16 {
    height: 4rem;
}

.h-2 {
    height: 0.5rem;
}

.h-2\.5 {
    height: 0.625rem;
}

.h-20 {
    height: 5rem;
}

.h-3 {
    height: 0.75rem;
}

.h-3\.5 {
    height: 0.875rem;
}

.h-32 {
    height: 8rem;
}

.h-4 {
    height: 1rem;
}

.h-40 {
    height: 10rem;
}

.h-5 {
    height: 1.25rem;
}

.h-6 {
    height: 1.5rem;
}

.h-7 {
    height: 1.75rem;
}

.h-8 {
    height: 2rem;
}

.h-80 {
    height: 20rem;
}

.h-9 {
    height: 2.25rem;
}

.h-\[104px\] {
    height: 104px;
}

.h-\[1096px\] {
    height: 1096px;
}

.h-\[110px\] {
    height: 110px;
}

.h-\[124px\] {
    height: 124px;
}

.h-\[133px\] {
    height: 133px;
}

.h-\[1382px\] {
    height: 1382px;
}

.h-\[1394px\] {
    height: 1394px;
}

.h-\[1479px\] {
    height: 1479px;
}

.h-\[1495px\] {
    height: 1495px;
}

.h-\[152px\] {
    height: 152px;
}

.h-\[1550px\] {
    height: 1550px;
}

.h-\[16\.48px\] {
    height: 16.48px;
}

.h-\[16\.5px\] {
    height: 16.5px;
}

.h-\[165px\] {
    height: 165px;
}

.h-\[17px\] {
    height: 17px;
}

.h-\[189px\] {
    height: 189px;
}

.h-\[18px\] {
    height: 18px;
}

.h-\[200px\] {
    height: 200px;
}

.h-\[20px\] {
    height: 20px;
}

.h-\[223px\] {
    height: 223px;
}

.h-\[22px\] {
    height: 22px;
}

.h-\[232px\] {
    height: 232px;
}

.h-\[246px\] {
    height: 246px;
}

.h-\[272px\] {
    height: 272px;
}

.h-\[280px\] {
    height: 280px;
}

.h-\[285px\] {
    height: 285px;
}

.h-\[306px\] {
    height: 306px;
}

.h-\[30px\] {
    height: 30px;
}

.h-\[34px\] {
    height: 34px;
}

.h-\[38px\] {
    height: 38px;
}

.h-\[42px\] {
    height: 42px;
}

.h-\[45px\] {
    height: 45px;
}

.h-\[46px\] {
    height: 46px;
}

.h-\[52px\] {
    height: 52px;
}

.h-\[57px\] {
    height: 57px;
}

.h-\[68px\] {
    height: 68px;
}

.h-\[72px\] {
    height: 72px;
}

.h-\[767px\] {
    height: 767px;
}

.h-\[85px\] {
    height: 85px;
}

.h-\[922px\] {
    height: 922px;
}

.h-\[calc\(100\%_-_27px\)\] {
    height: calc(100% - 27px);
}

.h-auto {
    height: auto;
}

.h-full {
    height: 100%;
}

.h-px {
    height: 1px;
}

.max-h-full {
    max-height: 100%;
}

.min-h-\[336px\] {
    min-height: 336px;
}

.min-h-full {
    min-height: 100%;
}

.min-h-screen {
    min-height: 100vh;
}

.w-1\.5 {
    width: 0.375rem;
}

.w-10 {
    width: 2.5rem;
}

.w-11 {
    width: 2.75rem;
}

.w-14 {
    width: 3.5rem;
}

.w-2 {
    width: 0.5rem;
}

.w-2\.5 {
    width: 0.625rem;
}

.w-24 {
    width: 6rem;
}

.w-3 {
    width: 0.75rem;
}

.w-3\.5 {
    width: 0.875rem;
}

.w-32 {
    width: 8rem;
}

.w-4 {
    width: 1rem;
}

.w-40 {
    width: 10rem;
}

.w-48 {
    width: 12rem;
}

.w-5 {
    width: 1.25rem;
}

.w-56 {
    width: 14rem;
}

.w-6 {
    width: 1.5rem;
}

.w-60 {
    width: 15rem;
}

.w-64 {
    width: 16rem;
}

.w-8 {
    width: 2rem;
}

.w-80 {
    width: 20rem;
}

.w-9 {
    width: 2.25rem;
}

.w-96 {
    width: 24rem;
}

.w-\[103px\] {
    width: 103px;
}

.w-\[104px\] {
    width: 104px;
}

.w-\[105px\] {
    width: 105px;
}

.w-\[1066px\] {
    width: 1066px;
}

.w-\[106px\] {
    width: 106px;
}

.w-\[1106px\] {
    width: 1106px;
}

.w-\[1112px\] {
    width: 1112px;
}

.w-\[115px\] {
    width: 115px;
}

.w-\[1160px\] {
    width: 1160px;
}

.w-\[116px\] {
    width: 116px;
}

.w-\[1170px\] {
    width: 1170px;
}

.w-\[1216px\] {
    width: 1216px;
}

.w-\[123px\] {
    width: 123px;
}

.w-\[136px\] {
    width: 136px;
}

.w-\[139px\] {
    width: 139px;
}

.w-\[140px\] {
    width: 140px;
}

.w-\[1440px\] {
    width: 1440px;
}

.w-\[146px\] {
    width: 146px;
}

.w-\[149px\] {
    width: 149px;
}

.w-\[152px\] {
    width: 152px;
}

.w-\[158px\] {
    width: 158px;
}

.w-\[165px\] {
    width: 165px;
}

.w-\[170px\] {
    width: 170px;
}

.w-\[174px\] {
    width: 174px;
}

.w-\[17px\] {
    width: 17px;
}

.w-\[180px\] {
    width: 180px;
}

.w-\[182px\] {
    width: 182px;
}

.w-\[184px\] {
    width: 184px;
}

.w-\[18px\] {
    width: 18px;
}

.w-\[190px\] {
    width: 190px;
}

.w-\[1925px\] {
    width: 1925px;
}

.w-\[200px\] {
    width: 200px;
}

.w-\[206px\] {
    width: 206px;
}

.w-\[211\.97px\] {
    width: 211.97px;
}

.w-\[212px\] {
    width: 212px;
}

.w-\[217px\] {
    width: 217px;
}

.w-\[218px\] {
    width: 218px;
}

.w-\[222px\] {
    width: 222px;
}

.w-\[22px\] {
    width: 22px;
}

.w-\[232px\] {
    width: 232px;
}

.w-\[238px\] {
    width: 238px;
}

.w-\[245px\] {
    width: 245px;
}

.w-\[246\.33px\] {
    width: 246.33px;
}

.w-\[246px\] {
    width: 246px;
}

.w-\[251px\] {
    width: 251px;
}

.w-\[2553px\] {
    width: 2553px;
}

.w-\[270px\] {
    width: 270px;
}

.w-\[280px\] {
    width: 280px;
}

.w-\[295px\] {
    width: 295px;
}

.w-\[30px\] {
    width: 30px;
}

.w-\[312px\] {
    width: 312px;
}

.w-\[321px\] {
    width: 321px;
}

.w-\[352px\] {
    width: 352px;
}

.w-\[360px\] {
    width: 360px;
}

.w-\[369px\] {
    width: 369px;
}

.w-\[36px\] {
    width: 36px;
}

.w-\[41\.97px\] {
    width: 41.97px;
}

.w-\[432px\] {
    width: 432px;
}

.w-\[469px\] {
    width: 469px;
}

.w-\[493px\] {
    width: 493px;
}

.w-\[57\.29px\] {
    width: 57.29px;
}

.w-\[57\.3px\] {
    width: 57.3px;
}

.w-\[636px\] {
    width: 636px;
}

.w-\[650px\] {
    width: 650px;
}

.w-\[656\.67px\] {
    width: 656.67px;
}

.w-\[670px\] {
    width: 670px;
}

.w-\[704px\] {
    width: 704px;
}

.w-\[76px\] {
    width: 76px;
}

.w-\[834px\] {
    width: 834px;
}

.w-\[836px\] {
    width: 836px;
}

.w-\[87px\] {
    width: 87px;
}

.w-\[88px\] {
    width: 88px;
}

.w-\[90px\] {
    width: 90px;
}

.w-\[91px\] {
    width: 91px;
}

.w-\[92px\] {
    width: 92px;
}

.w-\[98px\] {
    width: 98px;
}

.w-\[99px\] {
    width: 99px;
}

.w-full {
    width: 100%;
}

.w-px {
    width: 1px;
}

.w-screen {
    width: 100vw;
}

.min-w-\[126px\] {
    min-width: 126px;
}

.min-w-\[468px\] {
    min-width: 468px;
}

.min-w-\[71px\] {
    min-width: 71px;
}

.min-w-full {
    min-width: 100%;
}

.max-w-7xl {
    max-width: 80rem;
}

.max-w-\[1106px\] {
    max-width: 1106px;
}

.max-w-\[270px\] {
    max-width: 270px;
}

.max-w-full {
    max-width: 100%;
}

.max-w-lg {
    max-width: 32rem;
}

.max-w-md {
    max-width: 28rem;
}

.max-w-xs {
    max-width: 20rem;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-\[0\.9222\] {
    flex: 0.9222;
}

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

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

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

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

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

.table-auto {
    table-layout: auto;
}

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

.-translate-x-full {
    --tw-translate-x: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-5 {
    --tw-translate-x: 1.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-4 {
    --tw-translate-y: 1rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-45 {
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-90 {
    --tw-rotate: 90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
    cursor: pointer;
}

.resize-none {
    resize: none;
}

.resize {
    resize: both;
}

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

.grid-cols-\[1fr_2\.5fr_1fr\] {
    grid-template-columns: 1fr 2.5fr 1fr;
}

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

.flex-row-reverse {
    flex-direction: row-reverse;
}

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

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

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

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

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

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

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

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

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

.gap-1 {
    gap: 0.25rem;
}

.gap-1\.5 {
    gap: 0.375rem;
}

.gap-10 {
    gap: 2.5rem;
}

.gap-12 {
    gap: 3rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-2\.5 {
    gap: 0.625rem;
}

.gap-20 {
    gap: 5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-3\.5 {
    gap: 0.875rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.gap-\[141px\] {
    gap: 141px;
}

.gap-\[15px\] {
    gap: 15px;
}

.gap-\[5px\] {
    gap: 5px;
}

.gap-\[895px\] {
    gap: 895px;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

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

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

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

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

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

.divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--gray-200);
}

.self-stretch {
    align-self: stretch;
}

.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

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

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

.scroll-smooth {
    scroll-behavior: smooth;
}

.whitespace-pre-line {
    white-space: pre-line;
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-3xl {
    border-radius: 1.5rem;
}

.rounded-\[1000px\] {
    border-radius: 1000px;
}

.rounded-\[100px\] {
    border-radius: 100px;
}

.rounded-\[10px\] {
    border-radius: 10px;
}

.rounded-\[17px\] {
    border-radius: 17px;
}

.rounded-\[200px\] {
    border-radius: 200px;
}

.rounded-\[20px\] {
    border-radius: 20px;
}

.rounded-\[22px\] {
    border-radius: 22px;
}

.rounded-\[32px\] {
    border-radius: 32px;
}

.rounded-\[980px\] {
    border-radius: 980px;
}

.rounded-\[999px\] {
    border-radius: 999px;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-b-lg {
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.rounded-bl-xl {
    border-bottom-left-radius: 0.75rem;
}

.rounded-tl-xl {
    border-top-left-radius: 0.75rem;
}

.border {
    border-width: 1px;
}

.border-0 {
    border-width: 0px;
}

.border-2 {
    border-width: 2px;
}

.border-\[1px\] {
    border-width: 1px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-b-0 {
    border-bottom-width: 0px;
}

.border-b-2 {
    border-bottom-width: 2px;
}

.border-l {
    border-left-width: 1px;
}

.border-l-0 {
    border-left-width: 0px;
}

.border-l-2 {
    border-left-width: 2px;
}

.border-l-\[6px\] {
    border-left-width: 6px;
}

.border-r {
    border-right-width: 1px;
}

.border-r-0 {
    border-right-width: 0px;
}

.border-t {
    border-top-width: 1px;
}

.border-t-0 {
    border-top-width: 0px;
}

.border-t-\[1px\] {
    border-top-width: 1px;
}

.border-solid {
    border-style: solid;
}

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

.border-\[\#1877F2\] {
    --tw-border-opacity: 1;
    border-color: rgb(24 119 242 / var(--tw-border-opacity, 1));
}

.border-\[\#1877f2\] {
    --tw-border-opacity: 1;
    border-color: rgb(24 119 242 / var(--tw-border-opacity, 1));
}

.border-\[\#1a1a1a\] {
    --tw-border-opacity: 1;
    border-color: rgb(26 26 26 / var(--tw-border-opacity, 1));
}

.border-\[\#2064db\] {
    --tw-border-opacity: 1;
    border-color: rgb(32 100 219 / var(--tw-border-opacity, 1));
}

.border-\[\#298dfe\] {
    --tw-border-opacity: 1;
    border-color: rgb(41 141 254 / var(--tw-border-opacity, 1));
}

.border-\[\#2d2d2d\] {
    --tw-border-opacity: 1;
    border-color: rgb(45 45 45 / var(--tw-border-opacity, 1));
}

.border-\[\#808897\] {
    --tw-border-opacity: 1;
    border-color: rgb(128 136 151 / var(--tw-border-opacity, 1));
}

.border-\[\#91ebff\] {
    --tw-border-opacity: 1;
    border-color: rgb(145 235 255 / var(--tw-border-opacity, 1));
}

.border-\[\#9efb98\] {
    --tw-border-opacity: 1;
    border-color: rgb(158 251 152 / var(--tw-border-opacity, 1));
}

.border-\[\#C7C7C7\] {
    --tw-border-opacity: 1;
    border-color: rgb(199 199 199 / var(--tw-border-opacity, 1));
}

.border-\[\#DFE1E6\] {
    --tw-border-opacity: 1;
    border-color: rgb(223 225 230 / var(--tw-border-opacity, 1));
}

.border-\[\#E0E0E0\] {
    --tw-border-opacity: 1;
    border-color: rgb(224 224 224 / var(--tw-border-opacity, 1));
}

.border-\[\#c7c7c7\] {
    --tw-border-opacity: 1;
    border-color: rgb(199 199 199 / var(--tw-border-opacity, 1));
}

.border-\[\#d0d5dd\] {
    --tw-border-opacity: 1;
    border-color: rgb(208 213 221 / var(--tw-border-opacity, 1));
}

.border-\[\#dbe7ef\] {
    --tw-border-opacity: 1;
    border-color: rgb(219 231 239 / var(--tw-border-opacity, 1));
}

.border-\[\#deebf5\] {
    --tw-border-opacity: 1;
    border-color: rgb(222 235 245 / var(--tw-border-opacity, 1));
}

.border-\[\#dfe1e6\] {
    --tw-border-opacity: 1;
    border-color: rgb(223 225 230 / var(--tw-border-opacity, 1));
}

.border-\[\#e0e0e0\] {
    --tw-border-opacity: 1;
    border-color: rgb(224 224 224 / var(--tw-border-opacity, 1));
}

.border-\[\#e4eaf1\] {
    --tw-border-opacity: 1;
    border-color: rgb(228 234 241 / var(--tw-border-opacity, 1));
}

.border-\[\#eaecf0\] {
    --tw-border-opacity: 1;
    border-color: rgb(234 236 240 / var(--tw-border-opacity, 1));
}

.border-\[\#eeeff2\] {
    --tw-border-opacity: 1;
    border-color: rgb(238 239 242 / var(--tw-border-opacity, 1));
}

.border-\[\#fee69b\] {
    --tw-border-opacity: 1;
    border-color: rgb(254 230 155 / var(--tw-border-opacity, 1));
}

.border-aliceblue-500 {
    border-color: var(--aliceblue-500);
}

.border-border-color {
    border-color: var(--border-color);
}

.border-border-grey-light {
    border-color: var(--border-grey-light);
}

.border-button-color {
    border-color: var(--button-color);
}

.border-filter-sort-border {
    border-color: var(--filter-sort-border);
}

.border-gray-100 {
    border-color: var(--gray-100);
}

.border-gray-200 {
    border-color: var(--gray-200);
}

.border-gray-300 {
    border-color: var(--gray-300);
}

.border-green-200 {
    --tw-border-opacity: 1;
    border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.border-greyscale-100 {
    border-color: var(--greyscale-100);
}

.border-greyscale-border {
    border-color: var(--greyscale-border);
}

.border-red-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-select-border {
    border-color: var(--select-border);
}

.border-table-header-border {
    border-color: var(--table-header-border);
}

.border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-l-cards-border-100 {
    border-left-color: var(--cards-border-100);
}

.bg-\[\#003c8b\] {
    --tw-bg-opacity: 1;
    background-color: rgb(0 60 139 / var(--tw-bg-opacity, 1));
}

.bg-\[\#0DBDF6\] {
    --tw-bg-opacity: 1;
    background-color: rgb(13 189 246 / var(--tw-bg-opacity, 1));
}

.bg-\[\#0dbdf6\] {
    --tw-bg-opacity: 1;
    background-color: rgb(13 189 246 / var(--tw-bg-opacity, 1));
}

.bg-\[\#111\] {
    --tw-bg-opacity: 1;
    background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1));
}

.bg-\[\#15477f\] {
    --tw-bg-opacity: 1;
    background-color: rgb(21 71 127 / var(--tw-bg-opacity, 1));
}

.bg-\[\#1877F2\] {
    --tw-bg-opacity: 1;
    background-color: rgb(24 119 242 / var(--tw-bg-opacity, 1));
}

.bg-\[\#1877f2\] {
    --tw-bg-opacity: 1;
    background-color: rgb(24 119 242 / var(--tw-bg-opacity, 1));
}

.bg-\[\#1a1a1a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1));
}

.bg-\[\#2064DB\] {
    --tw-bg-opacity: 1;
    background-color: rgb(32 100 219 / var(--tw-bg-opacity, 1));
}

.bg-\[\#2064db\] {
    --tw-bg-opacity: 1;
    background-color: rgb(32 100 219 / var(--tw-bg-opacity, 1));
}

.bg-\[\#2087DB\] {
    --tw-bg-opacity: 1;
    background-color: rgb(32 135 219 / var(--tw-bg-opacity, 1));
}

.bg-\[\#298dfe\] {
    --tw-bg-opacity: 1;
    background-color: rgb(41 141 254 / var(--tw-bg-opacity, 1));
}

.bg-\[\#29cc39\]\/10 {
    background-color: rgb(41 204 57 / 0.1);
}

.bg-\[\#FDF2FA\]\/10 {
    background-color: rgba(253, 242, 250, 1);
}

.bg-\[\#ECFDF3\]\/10 {
    background-color: rgba(236, 253, 243, 1);
}

.bg-\[\#2ce\] {
    --tw-bg-opacity: 1;
    background-color: rgb(34 204 238 / var(--tw-bg-opacity, 1));
}

.bg-\[\#2d2d2d\] {
    --tw-bg-opacity: 1;
    background-color: rgb(45 45 45 / var(--tw-bg-opacity, 1));
}

.bg-\[\#344054\]\/70 {
    background-color: rgb(52 64 84 / 0.7);
}

.bg-\[\#7499c8\] {
    --tw-bg-opacity: 1;
    background-color: rgb(116 153 200 / var(--tw-bg-opacity, 1));
}

.bg-\[\#75b1ff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(117 177 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#7fbbfe\] {
    --tw-bg-opacity: 1;
    background-color: rgb(127 187 254 / var(--tw-bg-opacity, 1));
}

.bg-\[\#91ebff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(145 235 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#A0E8FF\] {
    --tw-bg-opacity: 1;
    background-color: rgb(160 232 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#D92D20\] {
    --tw-bg-opacity: 1;
    background-color: rgb(217 45 32 / var(--tw-bg-opacity, 1));
}

.bg-\[\#E3E9F4\] {
    --tw-bg-opacity: 1;
    background-color: rgb(227 233 244 / var(--tw-bg-opacity, 1));
}

.bg-\[\#ECF9F2\] {
    --tw-bg-opacity: 1;
    background-color: rgb(236 249 242 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F2F4F7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(242 244 247 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F8F9FA\] {
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F8F9FB\] {
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 251 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F8F9FC\] {
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 252 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FAFCFE\] {
    --tw-bg-opacity: 1;
    background-color: rgb(250 252 254 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FEF3F2\] {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 242 / var(--tw-bg-opacity, 1));
}

.bg-\[\#a0e8ff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(160 232 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#c6f8ff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(198 248 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#cdfdc6\] {
    --tw-bg-opacity: 1;
    background-color: rgb(205 253 198 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e3e9f4\] {
    --tw-bg-opacity: 1;
    background-color: rgb(227 233 244 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e4f1fe\] {
    --tw-bg-opacity: 1;
    background-color: rgb(228 241 254 / var(--tw-bg-opacity, 1));
}

.bg-\[\#eaeff5\] {
    --tw-bg-opacity: 1;
    background-color: rgb(234 239 245 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f1f3f7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(241 243 247 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f2f4f7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(242 244 247 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f4f9fe\] {
    --tw-bg-opacity: 1;
    background-color: rgb(244 249 254 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f5f6f7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(245 246 247 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f8f9fb\] {
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 251 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f8fbfe\] {
    --tw-bg-opacity: 1;
    background-color: rgb(248 251 254 / var(--tw-bg-opacity, 1));
}

.bg-\[\#fafcfe\] {
    --tw-bg-opacity: 1;
    background-color: rgb(250 252 254 / var(--tw-bg-opacity, 1));
}

.bg-\[\#fbdfb1\] {
    --tw-bg-opacity: 1;
    background-color: rgb(251 223 177 / var(--tw-bg-opacity, 1));
}

.bg-\[\#fcfcfd\] {
    --tw-bg-opacity: 1;
    background-color: rgb(252 252 253 / var(--tw-bg-opacity, 1));
}

.bg-\[\#fff4cb\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 244 203 / var(--tw-bg-opacity, 1));
}

.bg-\[transparent\] {
    background-color: transparent;
}

.bg-\[var\(--secondary\)\] {
    background-color: var(--secondary);
}

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

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

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

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

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

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

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

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

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

.bg-blue-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg-red-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

/*.bg-table-header-bg {
    background-color: var(--table-header-bg);
}*/

.bg-table-header-bg-templates {
    background-color: var(--table-header-bg-templates);
}

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

.bg-transparent {
    background-color: transparent;
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-white {
    --tw-gradient-from: #fff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-700 {
    --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}

.p-0\.5 {
    padding: 0.125rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-2\.5 {
    padding: 0.625rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-6 {
    padding: 1.5rem;
}

.px-0 {
    padding-left: 0px;
    padding-right: 0px;
}

.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.px-\[18px\] {
    padding-left: 18px;
    padding-right: 18px;
}

.px-\[19px\] {
    padding-left: 19px;
    padding-right: 19px;
}

.px-\[60px\] {
    padding-left: 60px;
    padding-right: 60px;
}

.px-\[71px\] {
    padding-left: 71px;
    padding-right: 71px;
}

.py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}

.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.py-\[11px\] {
    padding-top: 11px;
    padding-bottom: 11px;
}

.py-\[5px\] {
    padding-top: 5px;
    padding-bottom: 5px;
}

.py-\[94px\] {
    padding-top: 94px;
    padding-bottom: 94px;
}

.pb-0 {
    padding-bottom: 0px;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.pb-5 {
    padding-bottom: 1.25rem;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

.pb-8 {
    padding-bottom: 2rem;
}

.pb-\[218px\] {
    padding-bottom: 218px;
}

.pb-\[68px\] {
    padding-bottom: 68px;
}

.pl-1\.5 {
    padding-left: 0.375rem;
}

.pl-10 {
    padding-left: 2.5rem;
}

.pl-3 {
    padding-left: 0.75rem;
}

.pl-4 {
    padding-left: 1rem;
}

.pl-5 {
    padding-left: 1.25rem;
}

.pl-8 {
    padding-left: 2rem;
}

.pl-\[3px\] {
    padding-left: 3px;
}

.pr-10 {
    padding-right: 2.5rem;
}

.pr-2 {
    padding-right: 0.5rem;
}

.pr-20 {
    padding-right: 5rem;
}

.pr-3 {
    padding-right: 0.75rem;
}

.pr-4 {
    padding-right: 1rem;
}

.pr-5 {
    padding-right: 1.25rem;
}

.pr-6 {
    padding-right: 1.5rem;
}

.pr-\[17px\] {
    padding-right: 17px;
}

.pt-0 {
    padding-top: 0px;
}

.pt-0\.5 {
    padding-top: 0.125rem;
}

.pt-11 {
    padding-top: 2.75rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pt-5 {
    padding-top: 1.25rem;
}

.pt-6 {
    padding-top: 1.5rem;
}

.pt-8 {
    padding-top: 2rem;
}

.pt-\[31px\] {
    padding-top: 31px;
}

.pt-px {
    padding-top: 1px;
}

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

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

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

.align-bottom {
    vertical-align: bottom;
}

.font-\[inherit\] {
    font-family: inherit;
}

.font-plus-jakarta-sans {
    font-family: 'Plus Jakarta Sans';
}

.font-text-md-medium {
    font-family: Inter;
}

.text-17xl {
    font-size: 36px;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 22px;
}

.text-5xl {
    font-size: 24px;
}

.text-\[16px\] {
    font-size: 16px;
}

.text-\[24px\] {
    font-size: 24px;
}

.text-\[26px\] {
    font-size: 26px;
}

.text-\[32px\] {
    font-size: 32px;
}

.text-base {
    font-size: 16px;
}

.text-inherit {
    font-size: inherit;
}

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

.text-sm {
    font-size: 14px;
}

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

.text-xs {
    font-size: 12px;
}

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

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.uppercase {
    text-transform: uppercase;
}

.italic {
    font-style: italic;
}

.leading-\[140\%\] {
    line-height: 140%;
}

.leading-\[150\%\] {
    line-height: 150%;
}

.leading-\[18px\] {
    line-height: 18px;
}

.leading-\[20px\] {
    line-height: 20px;
}

.leading-\[24px\] {
    line-height: 24px;
}

.leading-\[30px\] {
    line-height: 30px;
}

.leading-\[32px\] {
    line-height: 32px;
}

.leading-\[44px\] {
    line-height: 44px;
}

.leading-\[normal\] {
    line-height: normal;
}

.tracking-\[-0\.02em\] {
    letter-spacing: -0.02em;
}

.tracking-\[-0\.4px\] {
    letter-spacing: -0.4px;
}

.tracking-\[normal\] {
    letter-spacing: normal;
}

.text-\[\#03983D\] {
    --tw-text-opacity: 1;
    color: rgb(3 152 61 / var(--tw-text-opacity, 1));
}

.text-\[\#0D0D12\] {
    --tw-text-opacity: 1;
    color: rgb(13 13 18 / var(--tw-text-opacity, 1));
}

.text-\[\#0D0E12\] {
    --tw-text-opacity: 1;
    color: rgb(13 14 18 / var(--tw-text-opacity, 1));
}

.text-\[\#0F7DDB\] {
    --tw-text-opacity: 1;
    color: rgb(15 125 219 / var(--tw-text-opacity, 1));
}

.text-\[\#0d0d12\] {
    --tw-text-opacity: 1;
    color: rgb(13 13 18 / var(--tw-text-opacity, 1));
}

.text-\[\#0d111a\] {
    --tw-text-opacity: 1;
    color: rgb(13 17 26 / var(--tw-text-opacity, 1));
}

.text-\[\#0d4dab\] {
    --tw-text-opacity: 1;
    color: rgb(13 77 171 / var(--tw-text-opacity, 1));
}

.text-\[\#101826\] {
    --tw-text-opacity: 1;
    color: rgb(16 24 38 / var(--tw-text-opacity, 1));
}

.text-\[\#101828\] {
    --tw-text-opacity: 1;
    color: rgb(16 24 40 / var(--tw-text-opacity, 1));
}

.text-\[\#111\] {
    --tw-text-opacity: 1;
    color: rgb(17 17 17 / var(--tw-text-opacity, 1));
}

.text-\[\#13bf24\] {
    --tw-text-opacity: 1;
    color: rgb(19 191 36 / var(--tw-text-opacity, 1));
}

.text-\[\#1877f2\] {
    --tw-text-opacity: 1;
    color: rgb(24 119 242 / var(--tw-text-opacity, 1));
}

.text-\[\#19603d\] {
    --tw-text-opacity: 1;
    color: rgb(25 96 61 / var(--tw-text-opacity, 1));
}

.text-\[\#1d2939\] {
    --tw-text-opacity: 1;
    color: rgb(29 41 57 / var(--tw-text-opacity, 1));
}

.text-\[\#2064DB\] {
    --tw-text-opacity: 1;
    color: rgb(32 100 219 / var(--tw-text-opacity, 1));
}

.text-\[\#2064db\] {
    --tw-text-opacity: 1;
    color: rgb(32 100 219 / var(--tw-text-opacity, 1));
}

.text-\[\#2087DB\] {
    --tw-text-opacity: 1;
    color: rgb(32 135 219 / var(--tw-text-opacity, 1));
}

.text-\[\#2089F9\] {
    --tw-text-opacity: 1;
    color: rgb(32 137 249 / var(--tw-text-opacity, 1));
}

.text-\[\#208AF7\] {
    --tw-text-opacity: 1;
    color: rgb(32 138 247 / var(--tw-text-opacity, 1));
}

.text-\[\#208af7\] {
    --tw-text-opacity: 1;
    color: rgb(32 138 247 / var(--tw-text-opacity, 1));
}

.text-\[\#232323\] {
    --tw-text-opacity: 1;
    color: rgb(35 35 35 / var(--tw-text-opacity, 1));
}

.text-\[\#344054\] {
    --tw-text-opacity: 1;
    color: rgb(52 64 84 / var(--tw-text-opacity, 1));
}

.text-\[\#364152\] {
    --tw-text-opacity: 1;
    color: rgb(54 65 82 / var(--tw-text-opacity, 1));
}

.text-\[\#364c62\] {
    --tw-text-opacity: 1;
    color: rgb(54 76 98 / var(--tw-text-opacity, 1));
}

.text-\[\#475467\] {
    --tw-text-opacity: 1;
    color: rgb(71 84 103 / var(--tw-text-opacity, 1));
}

.text-\[\#E4852E\] {
    --tw-text-opacity: 1;
    color: rgb(228 133 46 / var(--tw-text-opacity, 1));
}

.text-\[\#027A48\] {
    --tw-text-opacity: 1;
    color: rgb(2 122 72 / var(--tw-text-opacity, 1));
}

.text-\[\#69AFFE\] {
    --tw-text-opacity: 1;
    color: rgb(105 175 254 / var(--tw-text-opacity, 1));
}

.text-\[\#666688\] {
    --tw-text-opacity: 1;
    color: rgb(102 102 136 / var(--tw-text-opacity, 1));
}

.text-\[\#666C7E\] {
    --tw-text-opacity: 1;
    color: rgb(102 108 126 / var(--tw-text-opacity, 1));
}

.text-\[\#666d80\] {
    --tw-text-opacity: 1;
    color: rgb(102 109 128 / var(--tw-text-opacity, 1));
}

.text-\[\#667085\] {
    --tw-text-opacity: 1;
    color: rgb(102 112 133 / var(--tw-text-opacity, 1));
}

.text-\[\#6b7a99\] {
    --tw-text-opacity: 1;
    color: rgb(107 122 153 / var(--tw-text-opacity, 1));
}

.text-\[\#7e4408\] {
    --tw-text-opacity: 1;
    color: rgb(126 68 8 / var(--tw-text-opacity, 1));
}

.text-\[\#808599\] {
    --tw-text-opacity: 1;
    color: rgb(128 133 153 / var(--tw-text-opacity, 1));
}

.text-\[\#808797\] {
    --tw-text-opacity: 1;
    color: rgb(128 135 151 / var(--tw-text-opacity, 1));
}

.text-\[\#808897\] {
    --tw-text-opacity: 1;
    color: rgb(128 136 151 / var(--tw-text-opacity, 1));
}

.text-\[\#98A2B3\] {
    --tw-text-opacity: 1;
    color: rgb(152 162 179 / var(--tw-text-opacity, 1));
}

.text-\[\#98a2b3\] {
    --tw-text-opacity: 1;
    color: rgb(152 162 179 / var(--tw-text-opacity, 1));
}

.text-\[\#F04438\] {
    --tw-text-opacity: 1;
    color: rgb(240 68 56 / var(--tw-text-opacity, 1));
}

.text-\[\#eaeff5\] {
    --tw-text-opacity: 1;
    color: rgb(234 239 245 / var(--tw-text-opacity, 1));
}

.text-black {
    color: var(--black);
}

.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-button-color {
    color: var(--button-color);
}

.text-cornflowerblue-200 {
    color: var(--cornflowerblue-200);
}

.text-gray-400 {
    color: var(--gray-400);
}

.text-gray-500 {
    color: var(--gray-500);
}

.text-gray-600 {
    color: var(--gray-600);
}

.text-gray-700 {
    color: var(--gray-700);
}

.text-gray-800 {
    color: var(--gray-800);
}

.text-gray-900 {
    color: var(--gray-900);
}

.text-green-800 {
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-grey-1 {
    color: var(--grey-1);
}

.text-greyscale-0 {
    color: var(--greyscale-0);
}

.text-inherit {
    color: inherit;
}

.text-lightslategray {
    color: var(--lightslategray);
}

.text-modal-text-filter {
    color: var(--modal-text-filter);
}

.text-nav-buttons {
    color: var(--nav-buttons);
}

.text-nav-buttons-inactive {
    color: var(--nav-buttons-inactive);
}

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

.text-primary-500 {
    color: var(--primary-500);
}

.text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-800 {
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

/*.text-table-header-text {
    color: var(--table-header-text);
}*/

.text-text-buttons {
    color: var(--text-buttons);
}

.text-text-delete {
    color: var(--text-delete);
}

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

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

.text-text-text-secondary {
    color: var(--text-text-secondary);
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.placeholder-gray-500::-moz-placeholder {
    color: var(--gray-500);
}

.placeholder-gray-500::placeholder {
    color: var(--gray-500);
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-60 {
    opacity: 0.6;
}

.mix-blend-multiply {
    mix-blend-mode: multiply;
}

.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_1px_2px_rgba\(16\2c _24\2c _40\2c _0\.05\)\] {
    --tw-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    --tw-shadow-colored: 0px 1px 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_24px_48px_-12px_rgba\(16\2c _24\2c _40\2c _0\.18\)\] {
    --tw-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
    --tw-shadow-colored: 0px 24px 48px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
    /*    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);*/
    box-shadow: 0 0.25rem 1.875rem rgba(46, 45, 116, 0.05) !important;
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.outline {
    outline-style: solid;
}

.drop-shadow {
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-lg {
    --tw-backdrop-blur: blur(16px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.sidebar {
    transition-property: transform;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1024px) {
    .sidebar {
        --tw-translate-x: 0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
}

@media (max-width: 1023px) {
    .sidebar {
        --tw-translate-x: -100%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

        .sidebar.active {
            --tw-translate-x: 0px;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }
}

.\[backdrop-filter\:blur\(16px\)\] {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.\[border\:none\] {
    border: none;
}

.\[outline\:none\] {
    outline: none;
}

.\[row-gap\:20px\] {
    row-gap: 20px;
}

/* Light Theme */

:root {
    /* Body Styles */
    --light-icon-color: #343a40;
    /* or your preferred light theme color */
    --light-icon-filter: none;
    /* or any specific filter for light theme */
    --grey-1: #0d111a;
    --body-bg-blue: #FAFCFE;
    --body-bg-blue-two: #f5f6fa;
    --text-black-heading: #000000;
    --text-black: #771c1c;
    --dropdown-bg: #f4f9fe;
    /* Light background for dropdown */
    --notification-dot-circle: #808897;
    --cards-border-100: #DEEBF5;
    --icons-bg: #ffffff;
    --slategray-select: #666d80;
    --select-border: #e4eaf1;
    --text-buttons: #ffffff;
    --nav-buttons: #1877F2;
    --nav-buttons-inactive: #808897;
    --button-bg-red: #D92D20;
    --pink-700: #C11574;
    --pink-50: #FDF2FA;
    --greyscale-border: #dfe1e6;
    --border-grey-light: #eaecf0;
    --border-input-light: #D0D5DD;
    /* Modals Colors */
    --modal-text-filter: #344054;
    --setup-color: #808897;
    --table-header-bg: #F8F9FB;
    --table-header-bg-templates: #fcfcfd;
    --table-header-border: #DFE1E6;
    --table-header-text: #808897;
    /* Greyscale */
    --greyscale-0: #ffffff;
    --greyscale-100: #dfe1e6;
    --gray-100: #f2f4f7;
    --gray-200: #DBE7EF;
    --gray-300: #d0d5dd;
    --gray-400: #666D80;
    /* new color */
    --gray-500: #666D80;
    --gray-600: #475467;
    --gray-700: #344154;
    --gray-800: rgb(31, 41, 55);
    --gray-900: #101828;
    /* Colors */
    --darkslategray: #333333;
    --gainsboro: #dbe7ee;
    --darkslategray2: #11ff60;
    --aliceblue-100: #f4f9fe;
    --aliceblue-200: #e4f1fe;
    --aliceblue-300: #eaeff5;
    --aliceblue-400: #e6eef4;
    --aliceblue-500: #e4eaf1;
    --aliceblue-600: #deebf5;
    --aliceblue-700: #dbe7ef;
    --aliceblue-800: rgba(234, 244, 255, 0.7);
    --aliceblue-900: #F4F9FE;
    --tomato: #f25252;
    /* New Variable */
    --black: #000000;
    --lightslategray: #808897;
    --royalblue: #1877f2;
    --slategray: #666d80;
    --whitesmoke: #f1f3f7;
    --info-100: #c6f8ff;
    --info-200: #91ebff;
    --info-700: #0d4dab;
    --info-800: #076cd4;
    --positive-100: #cdfdc6;
    --positive-200: #9efb98;
    --positive-800: #19603d;
    --warning-100: #fff4cb;
    --warning-200: #fee69b;
    --warning-800: #7e4408;
    --lavender: #e3e9f4;
    --darkslateblue: #003c8b;
    --skyblue: #a0e8ff;
    --cornflowerblue-100: #76b1ff;
    --cornflowerblue-200: #0f7fd7;
    --steelblue: #7599c8;
    --deepskyblue: #0dbdf6;
    --primary-100: #bfddff;
    --primary-500: #3e98fe;
    --button-color: #2064db;
    --background-button: #2064db;
    /* Matches bg-[#2064db] */
    --background-filter: #f25252;
    /* Matches #f25252 */
    --text-text-secondary: #667085;
    --text-text-primary: #1a1a1a;
    --gray: rgba(255, 255, 255, 0.9);
    --silver-100: #b5bdc4;
    --silver-200: rgba(181, 189, 196, 0.09);
    /* New Variables */
    /* Text Colors */
    --text-primary: #0d0d12;
    --text-muted: #364c62;
    --text-delete: #f04438;
    --text-warning: #7E4408;
    --text-info: #0D4DAB;
    /* Button Colors */
    --edit-button-color: #208af7;
    /* Background Colors */
    --background-light: #f8f9fb;
    --background-secondary: #f2f4f8;
    /* New Variable */
    --background-delete: #fef3f2;
    --background-warning: #FEE69B;
    --background-info: #91EBFF;
    /* Border Colors */
    --border-color: #e0e0e0;
    --filter-sort-border: #c7c7c7;
    /* Box-Shadow Colors */
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-color-alt: rgba(31, 134, 240, 0.12);
    /* Icon Colors */
    --color-icon-light: #0d0d12;
    /* Icon color in light mode */
    /* Light theme variables */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --border-color: #e5e7eb;
    --accent-color: #2064db;
    --accent-hover: #1a56c5;
    --card-bg: #ffffff;
    --status-active: #dcfce7;
    --status-pending: #fff7ed;
    --status-process: #f0f9ff;
    --icon-filter: brightness(0) invert(0);
    /* Light theme */
    /* New Variables Needed */
    --bg-white: #ffffff;
    --header-text: #0d0d12;
    --border-muted: #d0d5dd;
    --button-primary: #2064db;
    --button-primary-border: #298dfe;
    --text-muted-secondary: #667085;
    --text-heading: #344054;
    --background-modal: rgba(52, 64, 84, 0.7);
}

/* Dark Theme */

.dark {
    --dark-icon-filter: invert(1);
    /* or any specific filter for dark theme */
    --dark-icon-color: #f8f9fa;
    /* or your preferred dark theme color */
    --bg-secondary: #9caab7;
    --grey-1: #d8d9dd;
    --background-secondary: #f2f4f8;
    --background-delete: #fef3f2;
    --text-delete: #f04438;
    /* Body Styles */
    --body-bg-blue: #1A1A1A;
    --body-bg-blue-two: #1A1A1A;
    --text-black-heading: #ffffff;
    --text-black: #FFFFFF;
    --dropdown-bg: #000000;
    /* Dark background for dropdown */
    --notification-dot-circle: #808897;
    --cards-border-100: #1A1A1A;
    --icons-bg: #111111;
    --slategray-select: #ffffff;
    --select-border: #808897;
    --text-buttons: #ffffff;
    --nav-buttons: #ffffff;
    --nav-buttons-inactive: #FFF;
    --button-bg-red: #D92D20;
    --pink-700: #C11574;
    --pink-50: #FDF2FA;
    --greyscale-border: #111111;
    --border-grey-light: #111111;
    --border-input-light: #111111;
    /* Modals Colors */
    --modal-text-filter: #ffffff;
    --setup-color: #808897;
    --table-header-bg: #1A1A1A;
    --table-header-bg-templates: #1A1A1A;
    --table-header-border: #2D2D2D;
    --table-header-text: #FFF;
    /* Greyscale */
    --greyscale-0: #111111;
    --greyscale-1: #1a1a1a;
    --greyscale-100: #2D2D2D;
    --gray-100: rgb(128 136 151);
    --gray-200: #2D2D2D;
    /* --gray-300: #2D2D2D; */
    --gray-300: #808897;
    --gray-400: #f4eaf5;
    /* new color */
    --gray-500: #808890;
    --gray-600: #EAEFF5;
    --gray-700: #fafafb;
    --gray-800: rgb(235, 239, 245);
    --gray-900: #FFF;
    /* Colors */
    --darkslategray: #ffffff;
    --gainsboro: #4a5568;
    --darkslategray2: #ff1111;
    --aliceblue-100: #2d3748;
    --aliceblue-200: #4a5568;
    --aliceblue-300: #000000;
    --aliceblue-400: #2c5282;
    --aliceblue-500: #111111;
    --aliceblue-600: #2c5282;
    --aliceblue-700: #2c5282;
    --aliceblue-800: rgba(44, 82, 130, 0.7);
    --aliceblue-900: #2d2d2d;
    --tomato: #f56565;
    /* Dark Variant */
    --black: #ffffff;
    --lightslategray: #a0aec0;
    --royalblue: #2064DB;
    --slategray: #667785;
    --whitesmoke: #2d3748;
    --info-100: #2c5282;
    --info-200: #63b3ed;
    --info-700: #4299e1;
    --info-800: #076cd4;
    --info-800-dark: #076cd4;
    /* Assuming same as light */
    --positive-100: #48bb78;
    --positive-200: #38a169;
    --positive-800: #2f855a;
    --warning-100: #f6ad55;
    --warning-200: #ed8936;
    --warning-800: #c05621;
    --lavender: #805ad5;
    --darkslateblue: #6b46c1;
    --skyblue: #63b3ed;
    --cornflowerblue-100: #4299e1;
    --cornflowerblue-200: #3182ce;
    --steelblue: #4299e1;
    --deepskyblue: #63b3ed;
    --primary-100: #2064DB;
    --primary-500: #3182ce;
    --button-color: #298dfe;
    --background-button: #2064db;
    /* Assuming same as light */
    --background-filter: #f25252;
    /* Assuming same as light */
    --text-text-secondary: #a0aec0;
    --text-text-primary: #ffffff;
    --text-muted: #FFF;
    --gray: rgba(215, 215, 215, 0.9);
    --silver-100: #2d3748;
    --silver-200: rgba(44, 82, 130, 0.09);
    /* New Dark Theme Variables */
    /* Text Colors */
    --text-primary-dark: #e0e0e0;
    /* Adjust as needed */
    --text-muted-dark: #cccccc;
    /* Adjust as needed */
    --text-delete-dark: #f56565;
    /* Adjust as needed */
    /* Button Colors */
    --edit-button-color-dark: #208af7;
    /* Assuming same as light */
    /* Background Colors */
    --background-light-dark: #2D2D2D;
    /* Typically same as body-bg-blue */
    --background-light: #2D2D2D;
    /* Typically same as body-bg-blue */
    --background-secondary: #4a5568;
    /* Example dark variant */
    --background-delete: #4a5568;
    /* Example dark variant */
    --border-color: #444444;
    /* Adjust as needed */
    --filter-sort-border: #555555;
    /* Adjust as needed */
    --background-secondary-dark: #4a5568;
    /* Example dark variant */
    --background-delete-dark: #4a5568;
    /* Example dark variant */
    /* Border Colors */
    --border-color-dark: #444444;
    /* Adjust as needed */
    --filter-sort-border-dark: #555555;
    /* Adjust as needed */
    /* Box-Shadow Colors */
    --shadow-color-dark: rgba(255, 255, 255, 0.3);
    --shadow-color-alt-dark: rgba(31, 134, 240, 0.12);
    /* Icon Colors */
    --color-icon-dark: #f3f4f6;
    /* Icon color in dark mode */
    /* Dark theme variables */
    --bg-primary: #1a1a1a;
    --bg-secondary: #111111;
    --bg-tertiary: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #eaeff5;
    --border-color: #2d2d2d;
    --accent-color: #2064db;
    --accent-hover: #1a56c5;
    --card-bg: #111111;
    --status-active: #cdfdc6;
    --status-pending: #fff4cb;
    --status-process: #c6f8ff;
    --icon-filter: brightness(0) invert(1);
    /* Dark theme */
    /* New Variables Needed */
    --bg-white: #1a1a1a;
    --header-text: #ffffff;
    --border-muted: #2d2d2d;
    --button-primary: #298dfe;
    --button-primary-border: #076cd4;
    --text-muted-secondary: #a0aec0;
    --text-heading: #ffffff;
}

.svg-icon path {
    fill: var(--text-primary);
    /* Apply only to the lines */
}

.svg-icon-nav path {
    fill: var(--nav-buttons);
    /* Apply only to the lines */
}

/* Custom Utility Classes */

/* Custom Text Colors */

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

.text-secondary {
    color: var(--text-text-secondary);
}

.text-muted {
    color: var(--text-muted);
}

.text-delete {
    color: var(--text-delete);
}

.text-warning {
    color: var(--text-warning);
}

.text-info {
    color: var(--text-info);
}

.text-lightslategray {
    color: var(--lightslategray);
}

.text-edit-button {
    color: var(--edit-button-color);
}

/* Custom Background Colors */

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

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

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

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

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

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

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

/* Custom Box Shadows */

/*.custom-shadow {
    box-shadow: var(--shadow-color), var(--info-800) 0px 0px 0px 1px, var(--shadow-color-alt);
}*/

.dark .custom-shadow {
    box-shadow: var(--shadow-color-dark), var(--info-800-dark) 0px 0px 0px 1px, var(--shadow-color-alt-dark);
}

/* Button Text Colors */

.text-white {
    color: var(--greyscale-0);
}

.text-gray-600 {
    color: var(--gray-600);
}

/* Responsive Design Enhancements */

@media (max-width: 768px) {
    .submenu-container {
        max-width: 100%;
        /* padding: 8px; */
    }

    .submenu-item {
        padding: 8px;
        font-size: 13px;
    }

    .submenu-text {
        margin-left: 11;
    }
}

/* General Styles */

body {
    margin: 0px;
    line-height: normal;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--body-bg-blue-two);
    color: var(--text-text-primary);
}

.shadow-md{

}

*,
::before,
::after {
    border-width: 0;
}

.header-shadow {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.notification-dot {
    background-color: var(--tomato);
    border: 2px solid var(--greyscale-0);
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.selected {
    background-color: var(--aliceblue-200) !important;
    color: var(--edit-button-color) !important;
    font-weight: 600;
    border-radius: 5px;
    /* padding: 5px; */
    padding-right: 5px;
}

/* Shadow for expanded menus only */

.submenu-container.expanded {
    background: var(--background-light);
    /* neumorphism-active state */
    box-shadow: 2px 2px 4px rgba(164, 209, 255, 0.15), 4px 4px 20px rgba(255, 255, 255, 0.25), inset -2px -2px 4px 2px rgba(255, 255, 255, 0.5), inset 1px 1px 4px 2px rgba(169, 169, 169, 0.4);
    border-radius: 10px;
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

.submenu-item:hover {
    color: var(--edit-button-color);
}

.submenu-item.active {
    color: var(--edit-button-color);
    font-weight: 600;
}

.submenu-item-dot.active-dot {
    background: var(--edit-button-color);
}

/* Submenu vertical line */

.submenu-container .submenu-line {
    position: absolute;
    left: -17px;
    width: 1px;
    /* Adjust thickness */
    background: var(--edit-button-color);
    /* Match blue color */
    height: calc(100% - 10px);
    /* Adjust height for alignment */
    border-radius: 4px;
    /* Rounded edges */
}

/* Submenu horizontal line connecting dots */


.submenu-horizontal-line {
    width: 10px;
    height: 1px;
    background: var(--edit-button-color);
    position: absolute;
    left: -17px;
    top: 75%;
    transform: translateY(-50%);
    transform: rotate(1deg);
}

/* Submenu item dot */

.bg-parent {
    background-color: #bfddff;
}

.submenu-item-dot {
    width: 6px;
    height: 6px;
    background: var(--edit-button-color);
    border-radius: 50%;
    position: absolute;
    left: -8px;
    top: 75%;
    transform: translateY(-50%);
}

.submenu-text {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    padding-left: 10px;
}

.submenu-container .submenu-chevron {
    transform: rotate(0deg);
}

.submenu-container.expanded .submenu-chevron {
    transform: rotate(180deg);
}

.submenu-container .hidden {
    display: none;
}

/* Charts Styles */

/* Chart Frame Styles */

.chart-frame {
    background: var(--greyscale-0);
    border: 1px solid var(--greyscale-100);
    border-radius: 12px;
    padding: 20px;
    width: 352px;
    /* For Total Position */
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.chart2 {
    width: 704px;
    /* For Ratio of Application Status */
    height: auto;
}

/* Chart Headers */

.chart-header {
    font-weight: 600;
    font-size: 18px;
    line-height: 140%;
    color: var(--text-primary);
}

/* Donut Chart Labels */

.donut-central-labels {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--slategray);
}

.donut-central-value {
    font-weight: 700;
    font-size: 32px;
    color: var(--text-primary);
}

/* Legend Styles */

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    font-size: 14px;
}

.legend-circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 5px;
}

.legend-value {
    font-weight: 600;
}

/* Bar Chart */

.chart-canvas {
    width: 100% !important;
    height: auto !important;
}

/* Tooltip Customization */

.chart-tooltip {
    background-color: var(--text-primary);
    color: var(--greyscale-0);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* DataTable Styles */

table.dataTable {
    border-collapse: collapse;
}

    table.dataTable thead th {
        border-bottom: 1px solid var(--greyscale-100) !important;
        padding: 8px 10px !important;
        text-align: left;
    }

    table.dataTable tbody td {
        /* border-bottom: 1px solid var(--greyscale-0); */
/*        padding: 13px !important;*/
        text-align: left !important;
    }

.dataTables_wrapper .dataTables_filter {
    display: none;
    /* Hidden to use custom search */
}

.dataTables_paginate {
    margin-top: 15px;
    display: flex;
    justify-content: end;
    padding-right: 10px;
}

    .dataTables_paginate .paginate_button {
        background: var(--greyscale-0);
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 5px 10px;
        margin: 0 2px;
        cursor: pointer;
    }

        .dataTables_paginate .paginate_button.current {
            background: var(--primary-500);
            color: var(--greyscale-0);
        }

/* Custom Card Styles */

/* Main Card Container */

.card-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 16px;
    gap: 20px;
    width: 278px;
    height: 160px;
    border-right: 1px solid var(--gainsboro);
    background: var(--greyscale-0);
    border-radius: 16px;
    /* Equivalent to rounded-xl */
}

/* Header Section */

.card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 246px;
    height: 38px;
}

/* Icon Container */

.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    width: 38px;
    height: 38px;
    background: var(--greyscale-0);
    border-radius: 32px;
    position: relative;
    /* For positioning the vector */
}

/* Icon Image */

.icon-image {
    width: 22px;
    height: 22px;
}

/* Icon Vector (Background) */

.icon-vector {
    position: absolute;
    left: 9.38%;
    right: 9.38%;
    top: 9.38%;
    bottom: 15.62%;
    background: var(--royalblue);
    border-radius: 50%;
    /* Ensures it's a circle */
}

/* Select Box */

.select-box {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    gap: 10px;
    width: 64px;
    height: 36px;
    background: var(--greyscale-0);
    border: 1px solid var(--greyscale-100);
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
}

/* Label Inside Select */

.select-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: var(--text-muted);
}

/* Caret Down Icon (Hidden by Default) */

.caret-down {
    display: none;
    width: 16px;
    height: 16px;
}

/* Card Body Section */

.card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 246px;
    height: 62px;
}

/* Total Projects Header */

.total-projects-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 246px;
    height: 22px;
}

/* Total Projects Text */

.total-project-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    /* 140% of 16px */
    color: var(--text-muted);
}

/* Projects Info Section */

.projects-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 246px;
    height: 36px;
}

/* Project Number */

.project-number {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    line-height: 36px;
    /* 138% of 26px */
    color: var(--text-text-primary);
}

/* Percentage Badge */

.percentage-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    width: 52px;
    height: 24px;
    background: var(--positive-100);
    border: 1px solid var(--positive-200);
    border-radius: 200px;
    /* Fully rounded */
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: var(--positive-800);
}

/* Badge Inner Elements */

.badge-inner {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Badge Circle */

.badge-circle {
    position: relative;
    width: 12px;
    height: 12px;
}

/* Badge Vector (Icon) */

.badge-vector {
    position: absolute;
    left: 17.59%;
    right: 17.59%;
    top: 16.67%;
    bottom: 16.67%;
    background: var(--positive-800);
    border-radius: 50%;
    /* Ensures it's a circle */
}

/* Percentage Text */

.percentage-text {
    width: 28px;
    height: 14px;
}

/* Updated Box-Shadow for elements */

.custom-shadow {
    box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.3), 0px 0px 0px 1px #076cd4, 0px 0px 0px 3px rgba(31, 134, 240, 0.12);
    /* box-shadow: var(--shadow-color), var(--info-800) 0px 0px 0px 1px, var(--shadow-color-alt); */
}

.dark .custom-shadow {
    box-shadow: var(--shadow-color-dark), var(--info-800-dark) 0px 0px 0px 1px, var(--shadow-color-alt-dark);
}

/* Additional Custom Classes as Needed */

/* Example for Hover States */

.hover-text-edit-button-color:hover {
    color: var(--edit-button-color);
}

/* Add responsive breakpoints */

@media (max-width: 1024px) {
    .dashboard-container {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

        .sidebar.active {
            display: block;
            position: fixed;
            z-index: 50;
        }
}

/* Add these to your existing CSS */

/* Additional responsive styles */

@media (max-width: 1024px) {
    .main-content {
        margin-left: 0;
    }
}

@media (min-width: 1024px) {
    .main-content {
        margin-left: 280px;
    }
}

.sidebar-collapsed .nav-text,
.sidebar-collapsed .submenu-text,
.sidebar-collapsed .submenu-horizontal-line,
.sidebar-collapsed .submenu-item-dot,
.sidebar-collapsed .submenu-chevron {
    position: absolute;
    visibility: hidden;
    opacity: 0;
}

.sidebar-collapsed #sidebar {
    /* If you want a narrower width when collapsed */
    width: 44px;
    /* or another suitable width */
}

/* Skeleton Loader Styles */

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* Specific Skeleton Styles */

.skeleton-header {
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.skeleton-sidebar {
    width: 16rem;
    height: 100vh;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-right: 1px solid #e5e7eb;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.sidebar-collapsed .skeleton-sidebar {
    width: 5rem;
}

/* Loading Top Bar */

#loading-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background-color: #2064DB;
    /* Customize as needed */
    width: 0%;
    z-index: 9999;
    transition: width 0.3s ease;
    display: none;
}

.sidebar-collapsed .nav-text,
.sidebar-collapsed .submenu-text,
.sidebar-collapsed .section-title {
    display: none;
}

.active-tab a {
    color: #fff !important;
    /* Adjust color for active tab */
}

.active-tab {
    background-color: var(--button-color);
    /* Adjust the active tab background color */
}

/* Theme specific colors for regular icons */

.sidebar-light .menu-icon {
    filter: var(--light-icon-filter);
}

.sidebar-dark .menu-icon {
    filter: var(--dark-icon-filter);
}

/* Theme specific colors for SVG paths */

.sidebar-light .svg-icon path,
.sidebar-light .svg-icon rect {
    fill: var(--light-icon-color);
}

.sidebar-dark .svg-icon path,
.sidebar-dark .svg-icon rect {
    fill: var(--dark-icon-color);
}

/* SVG icon colors */

.sidebar-light .svg-icon-nav {
    color: var(--light-icon-color);
}

.sidebar-dark .svg-icon-nav {
    color: var(--dark-icon-color);
}

/* ...existing code... */

.sidebar {
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

.sidebar-open {
    transform: translateX(0);
}

.submenu-container .submenu-content {
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

    .submenu-container .submenu-content.hidden {
        max-height: 0;
        padding: 0;
    }

    .submenu-container .submenu-content:not(.hidden) {
        max-height: 500px;
        /* Adjust as needed */
        /* padding: 0.5rem 0; */
    }

.nav-item.selected,
.submenu-item.selected {
    /* margin-left: 0.5rem;  */
}

.nav-item:hover {
    background-color: var(--aliceblue-200) !important;
    color: var(--edit-button-color) !important;
    font-weight: 600;
    border-radius: 5px;
    /* padding: 5px; */
    padding-right: 5px;
}

/* ...existing code... */

.no-transition {
    transition: none !important;
}

input[type="checkbox"] {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid #D0D5DD;
    border-radius: 6px;
    background-color: white;
    display: inline-block;
    position: relative;
    margin-right: 8px;
    cursor: pointer;
}

.toggle-container {
    display: flex;
    align-items: center;
}

/* Hide the default checkbox */
.toggle-input {
    display: none !important;
}

.toggle-label {
    width: 43px;
    height: 20px;
    background-color: #e4e4e4;
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    /* The toggle knob */
    .toggle-label::after {
        content: '';
        width: 16px;
        height: 16px;
        background-color: white;
        border-radius: 50%;
        position: absolute;
        top: 2px;
        left: 3px;
        transition: transform 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

/* Change background and move knob when checked */
.toggle-input:checked + .toggle-label {
    background-color: #3b82f6;
    /* Blue color */
}

    .toggle-input:checked + .toggle-label::after {
        transform: translateX(20px);
    }

input[type="checkbox"]:checked {
    background-color: #0F7FD7;
    border-color: #0F7FD7;
}

.alert-del-popup {
    position: absolute;
    top: -95px;
    width: 100%;
    z-index: 999999999999;
}

.alert-del-popup-bottom {
    position: absolute;
    bottom: -75px;
    width: 100%;
    z-index: 999999999999;
}

.details-row td::before {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    border: 1px solid #98A2B3;
    left: 16px;
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    /* Adjusted position */
    top: 3px;
    /* Adjusted position */
    width: 6px;
    /* Adjusted checkmark size */
    height: 10px;
    /* Adjusted checkmark size */
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(15, 127, 215, 0.2);
}

/* Profile Card Styles */

.profile-card {
    border-radius: 1rem;
    border-width: 1px;
    border-color: var(--border-muted);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Tab Styles */

.tab-btn {
    position: relative;
    min-width: 180px;
    border-bottom-width: 1px;
    border-color: var(--border-muted);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted-secondary);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

    .tab-btn:hover {
        color: var(--button-primary);
    }

    .tab-btn.active {
        border-bottom-width: 2px;
        border-color: var(--button-primary);
        background-color: transparent;
        color: var(--button-primary);
    }

/* Table Styles */

.tab-content {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

    .tab-content table {
        width: 100%;
        border-collapse: separate;
        --tw-border-spacing-x: 0px;
        --tw-border-spacing-y: 0px;
        border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
    }

    /*.tab-content th {
        border-bottom-width: 1px;
        border-color: var(--border-muted);
        background-color: var(--background-light);*/
/*        padding: 1rem;*/
        /*text-align: left;
        font-size: 14px;
        font-weight: 600;*/
        /* color: var(--button-primary); */
    /*}*/

    .tab-content td {
        border-bottom-width: 1px;
        border-color: var(--border-muted);
        padding: 1rem;
        font-size: 13px;
        font-weight: 500;
         color: var(--text-muted-secondary); 
    }

/*    .tab-content tr:hover td {
        background-color: var(--background-light);
    }*/

/* Remove the pseudo-element since we're using border instead */

.tab-btn.active::after {
    content: none;
}

/* Responsive Styles */

@media (max-width: 768px) {
    .profile-info-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

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

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

    .tab-btn {
        min-width: 120px;
        text-align: center;
    }
}

/* ...rest of existing code... */

.after\:absolute::after {
    content: var(--tw-content);
    position: absolute;
}

.after\:left-\[2px\]::after {
    content: var(--tw-content);
    left: 2px;
}

.after\:top-\[2px\]::after {
    content: var(--tw-content);
    top: 2px;
}

.after\:h-4::after {
    content: var(--tw-content);
    height: 1rem;
}

.after\:h-5::after {
    content: var(--tw-content);
    height: 1.25rem;
}

.after\:w-4::after {
    content: var(--tw-content);
    width: 1rem;
}

.after\:w-5::after {
    content: var(--tw-content);
    width: 1.25rem;
}

.after\:rounded-full::after {
    content: var(--tw-content);
    border-radius: 9999px;
}

.after\:border::after {
    content: var(--tw-content);
    border-width: 1px;
}

.after\:border-gray-300::after {
    content: var(--tw-content);
    border-color: var(--gray-300);
}

.after\:bg-white::after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.after\:transition-all::after {
    content: var(--tw-content);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.after\:content-\[\'\'\]::after {
    --tw-content: '';
    content: var(--tw-content);
}

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

.hover\:border-\[1px\]:hover {
    border-width: 1px;
}

.hover\:border-solid:hover {
    border-style: solid;
}

.hover\:border-silver-100:hover {
    border-color: var(--silver-100);
}

.hover\:bg-\[\#1d5bbf\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 91 191 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#F0F4F8\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(240 244 248 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-100:hover {
    background-color: var(--gray-100);
}

.hover\:bg-gray-300:hover {
    background-color: var(--gray-300);
}

.hover\:bg-red-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.hover\:bg-silver-200:hover {
    background-color: var(--silver-200);
}

.hover\:text-gray-500:hover {
    color: var(--gray-500);
}

.hover\:underline:hover {
    text-decoration-line: underline;
}

.focus\:border-blue-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.peer:checked ~ .peer-checked\:block {
    display: block;
}

.peer:checked ~ .peer-checked\:bg-\[\#2991FF\] {
    --tw-bg-opacity: 1;
    background-color: rgb(41 145 255 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:after\:translate-x-full::after {
    content: var(--tw-content);
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:checked ~ .peer-checked\:after\:border-white::after {
    content: var(--tw-content);
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.peer:focus ~ .peer-focus\:outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.peer:focus ~ .peer-focus\:ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.peer:focus ~ .peer-focus\:ring-4 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.peer:focus ~ .peer-focus\:ring-blue-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));
}

.peer:focus ~ .peer-focus\:ring-blue-500 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.peer:focus ~ .peer-focus\:ring-offset-2 {
    --tw-ring-offset-width: 2px;
}

@media (min-width: 640px) {
    .sm\:my-8 {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .sm\:block {
        display: block;
    }

    .sm\:inline-block {
        display: inline-block;
    }

    .sm\:h-screen {
        height: 100vh;
    }

    .sm\:w-full {
        width: 100%;
    }

    .sm\:max-w-3xl {
        max-width: 48rem;
    }

    .sm\:max-w-lg {
        max-width: 32rem;
    }

    .sm\:translate-y-0 {
        --tw-translate-y: 0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .sm\:scale-100 {
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .sm\:scale-95 {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

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

    .sm\:p-0 {
        padding: 0px;
    }

    .sm\:align-middle {
        vertical-align: middle;
    }
}

@media (min-width: 768px) {
    .md\:block {
        display: block;
    }

    .md\:flex {
        display: flex;
    }

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

    .md\:flex-row {
        flex-direction: row;
    }

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

    .md\:p-6 {
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .lg\:ml-20 {
        margin-left: 5rem;
    }

    .lg\:ml-64 {
        margin-left: 16rem;
    }

    .lg\:block {
        display: block;
    }

    .lg\:inline {
        display: inline;
    }

    .lg\:hidden {
        display: none;
    }

    .lg\:w-1\/2 {
        width: 50%;
    }

    .lg\:w-20 {
        width: 5rem;
    }

    .lg\:w-64 {
        width: 16rem;
    }

    .lg\:w-\[321px\] {
        width: 321px;
    }

    .lg\:w-\[369px\] {
        width: 369px;
    }

    .lg\:translate-x-0 {
        --tw-translate-x: 0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

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

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

    .lg\:flex-row {
        flex-direction: row;
    }

    .lg\:items-end {
        align-items: flex-end;
    }

    .lg\:pl-3 {
        padding-left: 0.75rem;
    }

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

    .lg\:text-\[24px\] {
        font-size: 24px;
    }
}

@media screen and (max-width: 1125px) {
    .mq1125\:flex-1 {
        flex: 1 1 0%;
    }

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

@media screen and (max-width: 1050px) {
    .mq1050\:box-border {
        box-sizing: border-box;
    }

    .mq1050\:pb-\[142px\] {
        padding-bottom: 142px;
    }

    .mq1050\:pb-\[61px\] {
        padding-bottom: 61px;
    }

    .mq1050\:pt-5 {
        padding-top: 1.25rem;
    }

    .mq1050\:pt-\[61px\] {
        padding-top: 61px;
    }

    .mq1050\:text-10xl {
        font-size: 29px;
    }

    .mq1050\:leading-\[35px\] {
        line-height: 35px;
    }
}

@media screen and (max-width: 750px) {
    .mq750\:min-w-full {
        min-width: 100%;
    }

    .mq750\:gap-\[70px\] {
        gap: 70px;
    }
}

@media screen and (max-width: 450px) {
    .mq450\:box-border {
        box-sizing: border-box;
    }

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

    .mq450\:gap-10 {
        gap: 2.5rem;
    }

    .mq450\:gap-4 {
        gap: 1rem;
    }

    .mq450\:gap-6 {
        gap: 1.5rem;
    }

    .mq450\:gap-\[35px\] {
        gap: 35px;
    }

    .mq450\:pb-10 {
        padding-bottom: 2.5rem;
    }

    .mq450\:pb-\[92px\] {
        padding-bottom: 92px;
    }

    .mq450\:pl-5 {
        padding-left: 1.25rem;
    }

    .mq450\:pr-5 {
        padding-right: 1.25rem;
    }

    .mq450\:pt-10 {
        padding-top: 2.5rem;
    }

    .mq450\:text-3xl {
        font-size: 22px;
    }

    .mq450\:text-\[19px\] {
        font-size: 19px;
    }

    .mq450\:leading-\[26px\] {
        line-height: 26px;
    }
}

/* dataTable  */

/* DataTables Pagination Buttons */
#dataTable_wrapper .dataTables_paginate .paginate_button {
    background-color: #f3f4f6;
    /* Tailwind's bg-gray-100 */
    border: 1px solid #d1d5db;
    /* Tailwind's border-gray-300 */
    color: #374151;
    /* Tailwind's text-gray-700 */
    border-radius: 0.25rem;
    /* Tailwind's rounded */
    padding: 0.25rem 0.5rem;
    /* Tailwind's px-2 py-1 */
    margin: 0 0.25rem;
    /* Tailwind's mx-1 */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dt-paging .dt-paging-button :hover {
    background-color: #e5e7eb !important;
}

.dt-paging .dt-paging-button.current {
    background-color: var(--button-color) !important;
    color: var(--text-buttons) !important;
    border: none !important;
    border-radius: 8px !important;
}

div.dt-container .dt-paging .dt-paging-button.current {
    color: #fff !important;
}

.dt-paging .dt-paging-button:hover {
    border-radius: 8px !important;
}

/*.dt-layout-row .dt-layout-start {
    padding-left: 20px;
}

.dt-layout-row .dt-layout-end {
    padding-right: 20px;
}*/

.dt-container .dt-input {
    border-radius: 8px !important;
}

.alert-success-popup {
    position: absolute;
    top: -66px;
    width: 71%;
    z-index: 999999999999;
    right: 0;
}


.custom-dropdown,
.custom-dropdown-questionnaire,
.custom-dropdown-question-type {
    position: relative;
    padding-right: 2rem;
}

    .custom-dropdown .arrow,
    .custom-dropdown-questionnaire .arrow,
    .custom-dropdown-question-type .arrow {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
    }

.question-type-modal .dropdown-list {
    position: absolute;
    right: -227px;
    top: 23%;
}

.preview-questionnaire-type-modal .dropdown-list {
    position: absolute;
    right: 53px;
    top: 40%;
    box-shadow: 8px 8px 60px 0px #08254714;
    width: 25%;
}

#editQuestionTypeModal .dropdown-list {
    position: absolute;
    right: -227px;
    top: 23%;
}


input[type="radio"] + label span:hover,
input[type="radio"] + label:hover span {
    transform: scale(1.2);
}

input[type="radio"]:checked + label span {
    background-color: #3490DC;
    box-shadow: 0px 0px 0px 2px #D4E8FF inset;
    border: 4px solid #D4E8FF;
    /* border: 10px double #D4E8FF; */
    outline: 1px solid #298DFE;
    outline-offset: 0px;
}


table.dataTable th {
    text-align: left !important;
}

div.dt-container.dt-empty-footer tbody > tr:last-child > * {
    border-bottom: 0px !important;
}


/* Dark mode logo */
html.dark .submenu-chevron-logo {
    content: url('../public/white-logo-DHRP.png');
}


.add-application-pool input[type="checkbox"]:checked {
    background-color: #bfddff;
    border-color: #2064DB;
}

    .add-application-pool input[type="checkbox"]:checked::after {
        content: '';
        border: solid #2064DB;
        border-width: 0 2px 2px 0;
    }

.purple-checkbox input[type="checkbox"]:checked {
    background-color: #5E56FF;
    border-color: #5E56FF;
}

    .purple-checkbox input[type="checkbox"]:checked::after {
        content: '';
        border: solid #fff;
        border-width: 0 2px 2px 0;
    }

.submenu-container .selected {
    background-color: transparent !important;
    color: var(--edit-button-color) !important;
    font-weight: 500;
    border-radius: 5px;
    /* padding: 0; */
    padding-right: 0;
}


.submenu-container {
    padding-left: 20px;
}

.recruiters-agency-list {
    list-style: disc;
    padding-left: 26px;
}

.recruiter-agency-checkbox input[type="checkbox"] {
    border-radius: 40px;
}

#line-dash::before {
    content: "";
    border-top: 1px dashed #1877f2;
    opacity: 0.5;
    width: 90px;
    height: 10px;
    margin-top: 17px;
    position: absolute;
    margin-left: -43px;
}

.indicator-box {
    width: 107px;
}


.header-shadow {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.notification-dot {
    background-color: #d90026;
    border: 2px solid #f4f7f9;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Transition for sidebar collapse/expand */
.transition-width {
    transition: width 0.3s ease;
}

/* Sidebar Collapsed State */
.sidebar-collapsed #sidebar {
    width: 5rem;
    /* Adjust as needed */
}

.sidebar-collapsed #main-content {
    margin-left: 5rem;
    /* Adjust as needed */
}

.sidebar-collapsed .nav-text {
    display: none;
}

/* Ensure the sidebar transitions smoothly */
#sidebar {
    transition: transform 0.3s ease, width 0.3s ease;
}

/* Additional styles for submenu chevrons */
.submenu-chevron.rotate-180 {
    transform: rotate(180deg);
}

/* Error message styling */
.error-message {
    color: #f04438;
    /* Corresponds to --text-delete */
    font-size: 0.875rem;
    /* text-sm */
    margin-top: 0.25rem;
    /* mt-1 */
    display: none;
    /* Hidden by default */
}

/* Red border for invalid inputs */
.input-error {
    border-color: #f04438;
    /* Corresponds to --text-delete */
}

.tab-button.active {
    color: #1d4ed8;
    /* Blue color */
    border-bottom: 2px solid #1d4ed8;
    /* Blue underline */
}

.nested-menu {
    display: none;
}

.active {
    font-weight: bold;
    color: #208AF7;
}

.neu-button {
    will-change: box-shadow;
    transition: .4s box-shadow;
    padding: 8px;
    border-radius: .8rem;
    border: 1px solid #dadada;
    background-color: transparent;
    box-shadow: -.17rem -.17rem .2rem transparent, 0rem 0 .4rem transparent, 0rem 0rem 0rem -.1rem #f8f8f8, -.17rem -.17rem .2rem #fcfcfc inset, .2rem .2rem .2rem #dadada inset;
    /* display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center; */
}

    .neu-button:hover {
        will-change: box-shadow;
        transition: .4s box-shadow;
        box-shadow: -.17rem -.17rem .2rem transparent, 0rem 0 .4rem transparent, 0rem 0rem 0rem -.1rem #f8f8f8, -.17rem -.17rem .2rem #fcfcfc inset, .2rem .2rem .2rem #dadada inset;
    }

    .neu-button:active::after {
        filter: invert(10%);
        will-change: filter;
        transition: .4s all;
    }

.add-after::after {
    content: "";
    display: block;
    width: 83%;
    height: 83%;
    background-size: 100% 100% !important;
    will-change: filter;
    transition: .4s all;
    filter: invert(0%);
}

.menu-line {
    position: relative;
    padding-left: 4px;
    padding-top: 7px;
}

    .menu-line::before {
        content: '';
        position: absolute;
        left: -17px;
        top: -10px;
        bottom: 0;
        width: 1px;
        background-color: #208AF7;
    }

.arrow {
    transition: transform 0.3s ease;
}

.rotate {
    transform: rotate(180deg);
}

.active-tab span {
    color: #fff;
}

.dt-search {
    display: none;
}

/*.dt-layout-start {
    padding-left: 19px;
}*/

.sidebar-collapsed .toggle-container {
    margin-left: -21px;
}

.donut-chart-figure {
    top: 30%;
    width: 100px;
    height: 100px;
    left: 30%;
    right: 43%;
    margin: 0 auto;
    /* z-index: 1; */
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/*.sidebar-collapsed .submenu-chevron-logo {
    margin-left: -10px;
}
*/

.dt-layout-row:first-child {
    display: flex;
    justify-content: space-between
}

    .dt-layout-row:first-child .dt-layout-cell.dt-layout-end .dt-search .dt-input {
        border: 1px solid #475467;
        border-radius: .5rem;
        color: #475467;
        height: 2.5rem;
        outline: none;
        padding: .3rem .5rem
    }

    .dt-layout-row:first-child .dt-layout-cell.dt-layout-end .dt-search label,
    .dt-layout-row:first-child .dt-layout-cell.dt-layout-start label {
        color: #475467;
    }

    .dt-layout-row:first-child .dt-layout-cell.dt-layout-start .dt-input {
        background-color: transparent;
        border: 1px solid #475467;
        border-radius: .5rem;
        color: #475467;
        height: 2.5rem;
        outline: none;
        padding: .3rem .5rem;
        display: none;
    }

#example_wrapper {
    color: #475467;
}

    #example_wrapper .dataTable thead {
        display: none
    }

.dt-layout-row:nth-child(3) {
    display: flex;
    justify-content: space-between
}

    .dt-layout-row:nth-child(3) .dt-layout-cell.dt-layout-end .dt-paging nav .first,
    .dt-layout-row:nth-child(3) .dt-layout-cell.dt-layout-end .dt-paging nav .last {
        display: none
    }

    .dt-layout-row:nth-child(3) .dt-layout-cell.dt-layout-end .dt-paging {
        background: var(--bg-secondary);
        border-radius: 1rem;
        color: #7e7e7e;
        margin-bottom: 0;
        padding: 3px;
    }

        .dt-layout-row:nth-child(3) .dt-layout-cell.dt-layout-end .dt-paging nav button {
            border: 0 solid #1eaae7 !important;
             border-radius:.5rem; 
/*            color: #1eaae7 !important;*/
            /* display:inline-block; */
            font-size: 16px;
            margin: .0625rem;
            padding: 1px 10px;
            transition: all .5s
        }

/*        .dt-layout-row:nth-child(3) .dt-layout-cell.dt-layout-end .dt-paging nav .next,
        .dt-layout-row:nth-child(3) .dt-layout-cell.dt-layout-end .dt-paging nav .previous {
            background: #e2e2e2 !important
        }*/

        .dt-layout-row:nth-child(3) .dt-layout-cell.dt-layout-end .dt-paging nav .current {
            background: #2064db !important;
            color: #fff !important;
            margin: 0 10px
        }

        .dt-layout-row:nth-child(3) .dt-layout-cell.dt-layout-end .dt-paging nav .disabled {
            color: #666 !important;
        }

    .dt-layout-row:nth-child(3) .dt-info {
        color: #777 !important;
        font-size: 14px;
    }

/*div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start {
    display: none;
}*/
.dt-length label {
    display: none;
}

div.dt-container .dt-paging .dt-paging-button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.2em;
    padding: 0.2em 0.9em;
    margin-left: 8px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: inherit !important;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    border: 1px solid #74747473 !important;
    font-size: 13px;
}
div.dt-container .dt-input {
    font-size: 13px;
    color: #7e7b7b !important;
}


.table-card-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    border-width: 0px;
    background-color: rgba(255, 255, 255, 1);
    font-size: 0.813rem;
    color: rgb(0, 0, 0);
    box-shadow: 0px 6px 16px 2px rgba(0, 0, 0, 0.05);
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order{
    right: 0px !important;
}

table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover {
    outline: none;
}

div.dt-container .dt-info {
    color: #625b5b;
/*    padding-top: 12px;*/
    font-size: 14px;
/*    padding-left: 10px;*/
}

div.dt-container.dt-empty-footer .dt-scroll-body{
    border-bottom: 0px !important;
}

.setup-link {
    color: #334155;
}

.setup-link svg circle {
fill: none; 
}

.setup-link.active {
color: #2563eb; 
font-weight: 500;
}

.setup-link.active svg circle {
    fill: #2563eb; 
}

.indicator-width{
    width: 84px !important;
}

.tabs-wrapper .dt-length {
    display: none !important;
}
@media (max-width: 640px) {
    .dt-paging nav {
        display: flex;
    }

    div.dt-container .dt-info {
        text-wrap: nowrap;
    }

    .dt-container .bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


#preloader-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background-color: #2064db;
    z-index: 9999;
    transition: width 0.5s linear;
}




/* Custom styles for all DataTables with the .custom-datatable class */
.custom-datatable tbody tr {
    border-bottom: 1px solid #e4e5e7; /* Matches border-border-color */
}

.custom-datatable tbody td {
    padding: 8px 10px !important;
    font-size: 0.75rem;
    /*    line-height: 1rem;*/
    /*font-weight: 500;*/ /* Matches font-medium */
    /*white-space: nowrap;*/ /* Matches text-nowrap */
}

.custom-datatable thead tr {
    background-color: var(--bg-secondary)
}

.custom-datatable thead th {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem; 
    padding-bottom: 0.5rem;
    font-size: 0.75rem; 
    font-weight: 500; 
}

/* Center the status column (assumed to be the second-to-last column, adjust as needed) */
.custom-datatable tbody td:nth-last-child(2) {
    text-align: center; /* Matches text-center for status column */
}

/* Style the action column (last column) */
.custom-datatable tbody td:last-child {
    display: flex;
    gap: 8px; /* Matches gap-2 */
    align-items: center;
/*    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;*/
}

/* Style DataTables controls */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 12px;
    margin: 0 2px;
    border: 1px solid #e4e5e7;
    border-radius: 4px;
    background-color: #ffffff;
    color: #374151;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background-color: #2064db; /* Matches bg-[#2064db] */
        color: #ffffff;
        border-color: #298dfe;
    }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #e4e5e7;
    border-radius: 4px;
    padding: 6px;
    font-size: 12px;
}

/* Ensure the table container has proper shadow and border */
.custom-datatable-container {
    width: 100%;
    overflow: auto;
    border-radius: 0.5rem; /* Matches rounded-lg */
    background-color: var(--greyscale-0) ;
/*    box-shadow: 0px 1px 2px 0 rgba(228, 229, 231, 0.24);*/
}


div.dt-container .dt-paging .dt-paging-button.disabled {
    color: #74747496 !important;
}

.dropdown-content {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.dropdown-content.open {
    max-height: 250px;
    opacity: 1;
    pointer-events: auto;
}

.sidebar-collapsed #brandDropdownBtn{
    display: none;
}

.sidebar-collapsed #sidebar:hover {
    width: 256px !important;
}

/* On hover, show nav-text */
.sidebar-collapsed #sidebar:hover .nav-text {
    display: contents !important; 
    opacity: 1 !important;
    visibility:visible !important;
}

.sidebar-collapsed #sidebar:hover .section-title {
    display: flex !important;
}

.sidebar-collapsed #sidebar #submenu-setups {
    max-height: 0;
}

.sidebar-collapsed #sidebar:hover #submenu-setups {
    max-height:revert!important;
}

.sidebar-collapsed #sidebar .setups-arrow {
    display: none !important;
}


::-webkit-scrollbar {
    background: transparent;
}

    ::-webkit-scrollbar:vertical {
        width: 6px;
    }

    ::-webkit-scrollbar:horizontal {
        height: 6px;
    }

::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb {
    background: #CFCFCF;
    border-radius: 20px;
}


/* Hide scrollbar by default */
.custom-scroll::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 24px;
    transition: background-color 0.3s ease-in-out;
}

.group:hover .custom-scroll::-webkit-scrollbar-thumb {
    background-color: #CFCFCF; 
}


.scrollToTop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    background: #007bff;
    color: white;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s ease-in-out;
}



.loader {
    --d: 22px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    color: #2064db;
    box-shadow: calc(1*var(--d)) calc(0*var(--d)) 0 0, calc(0.707*var(--d)) calc(0.707*var(--d)) 0 1px, calc(0*var(--d)) calc(1*var(--d)) 0 2px, calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px, calc(-1*var(--d)) calc(0*var(--d)) 0 4px, calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px, calc(0*var(--d)) calc(-1*var(--d)) 0 6px;
    animation: l27 1s infinite steps(8);
}

@keyframes l27 {
    100% {
        transform: rotate(1turn)
    }
}

a.disabled {
    pointer-events: none;
    cursor: default;
}

.error{
    color: red;
}

.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

.toast {
    min-width: 260px;
    background: #333;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    overflow: hidden;
    animation: slideIn 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.toast-body {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toast.success {
    background: #28a745;
}

.toast.error {
    background: #dc3545;
}

.toast.info {
    background: #17a2b8;
}

.toast.warning {
    background: #ffc107;
    color: #000;
}

.toast-progress {
    height: 4px;
    background: rgba(255,255,255,0.6);
    width: 100%;
    transform-origin: left;
}

@keyframes slideIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    to {
        opacity: 0;
        transform: translateX(120%);
    }
}

@keyframes progressAnim {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

.close-btn {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 16px;
    cursor: pointer;
    margin-left: 8px;
}


@keyframes bounceIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    60% {
        transform: scale(1);
        opacity: 1;
    }

    80% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

.animate-bounce-in {
    animation: bounceIn 0.6s ease;
}