/* SCROLLBAR */
/* width */
::-webkit-scrollbar {
    height: 7px;
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #555;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

body {
    height: 100vh;
}

/*
    Theme tokens and semantic utility classes
*/
:root {
    --background: #E5E7EB;
    --sidebar-foreground: #ffffff;
    --sidebar: #1E1E1E;
    --item: #ffffff;
    --item-foreground: #1E1E1E;
    --sidebar-hover: #374151;
    --sidebar-hover-foreground: #4b5563;
    --sidebar-active: #006cb1;
    --foreground: #111827;
    --card: #ffffff;
    --card-foreground: #1E1E1E;
    --input: #ffffff;
    --muted-foreground: #6b7280;
    --accent: #006cb1;
    --border: #d1d5db;
}

.dark {
    --background: #292c30;
    --foreground: #e5e7eb;
    --card: #1E1E1E;
    --item: #1E1E1E;
    --item-foreground: #e5e7eb;
    --card-foreground: #e5e7eb;
    --input: #222222;
    --muted-foreground: #9ca3af;
    --accent: #60a5fa;
    --border: #4b5563;
    --sidebar-foreground: #ffffff;
    --sidebar: #1E1E1E;
    --sidebar-hover: #374151;
    --sidebar-hover-foreground: #4b5563;
    --sidebar-active: #006cb1;
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-input: var(--input);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-border: var(--border);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar: var(--sidebar);
    --color-sidebar-hover: var(--sidebar-hover);
    --color-sidebar-hover-foreground: var(--sidebar-hover-foreground);
    --color-sidebar-active: var(--sidebar-active);
}

/* Runtime fallback: @theme utilities are not generated for this external css file in current setup. */
.bg-background {
    background-color: var(--background);
}

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

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

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

.text-card-foreground {
    color: var(--card-foreground);
}

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

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

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

.border-x-border {
    border-left-color: var(--border);
    border-right-color: var(--border);
}

.border-y-border {
    border-top-color: var(--border);
    border-bottom-color: var(--border);
}

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

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

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

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

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

.sidebar-foreground {
    color: var(--sidebar-foreground);
}

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

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

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

.dark .dark\:bg-item\/5 {
    background-color: color-mix(in srgb, var(--item) 5%, transparent);
}
.dark .dark\:bg-item\/10 {
    background-color: color-mix(in srgb, var(--item) 10%, transparent);
}
.dark .dark\:bg-item\/15 {
    background-color: color-mix(in srgb, var(--item) 15%, transparent);
}
.dark .dark\:bg-item\/20 {
    background-color: color-mix(in srgb, var(--item) 20%, transparent);
}
.dark .dark\:bg-item\/30 {
    background-color: color-mix(in srgb, var(--item) 30%, transparent);
}
.dark .dark\:bg-item\/40 {
    background-color: color-mix(in srgb, var(--item) 40%, transparent);
}
.dark .dark\:bg-item\/50 {
    background-color: color-mix(in srgb, var(--item) 50%, transparent);
}
.dark .dark\:bg-item\/60 {
    background-color: color-mix(in srgb, var(--item) 60%, transparent);
}
.dark .dark\:bg-item\/70 {
    background-color: color-mix(in srgb, var(--item) 70%, transparent);
}
.dark .dark\:bg-item\/80 {
    background-color: color-mix(in srgb, var(--item) 80%, transparent);
}
.dark .dark\:bg-item\/90 {
    background-color: color-mix(in srgb, var(--item) 90%, transparent);
}

.text-item {
    color: var(--item-foreground);
}

.sidebar-hover {
    background-color: var(--sidebar-hover);
}

.sidebar-hover-foreground {
    color: var(--sidebar-hover-foreground);
}

.sidebar-active {
    background-color: var(--sidebar-active);
}

/* Dark variant fallback for runtime-loaded classes */
.dark .dark\:bg-background {
    background-color: var(--background);
}

.dark .dark\:bg-card {
    background-color: var(--card);
}
.dark .dark\:bg-card\/5 {
    background-color: color-mix(in srgb, var(--card) 5%, transparent);
}
.dark .dark\:bg-card\/10 {
    background-color: color-mix(in srgb, var(--card) 10%, transparent);
}
.dark .dark\:bg-card\/15 {
    background-color: color-mix(in srgb, var(--card) 15%, transparent);
}
.dark .dark\:bg-card\/20 {
    background-color: color-mix(in srgb, var(--card) 20%, transparent);
}
.dark .dark\:bg-card\/30 {
    background-color: color-mix(in srgb, var(--card) 30%, transparent);
}
.dark .dark\:bg-card\/40 {
    background-color: color-mix(in srgb, var(--card) 40%, transparent);
}
.dark .dark\:bg-card\/50 {
    background-color: color-mix(in srgb, var(--card) 50%, transparent);
}
.dark .dark\:bg-card\/60 {
    background-color: color-mix(in srgb, var(--card) 60%, transparent);
}
.dark .dark\:bg-card\/70 {
    background-color: color-mix(in srgb, var(--card) 70%, transparent);
}
.dark .dark\:bg-card\/80 {
    background-color: color-mix(in srgb, var(--card) 80%, transparent);
}
.dark .dark\:bg-card\/90 {
    background-color: color-mix(in srgb, var(--card) 90%, transparent);
}

.dark .dark\:bg-input {
    background-color: var(--input);
}
.dark .dark\:bg-input\/5 {
    background-color: color-mix(in srgb, var(--input) 5%, transparent);
}
.dark .dark\:bg-input\/10 {
    background-color: color-mix(in srgb, var(--input) 10%, transparent);
}
.dark .dark\:bg-input\/15 {
    background-color: color-mix(in srgb, var(--input) 15%, transparent);
}
.dark .dark\:bg-input\/20 {
    background-color: color-mix(in srgb, var(--input) 20%, transparent);
}
.dark .dark\:bg-input\/30 {
    background-color: color-mix(in srgb, var(--input) 30%, transparent);
}
.dark .dark\:bg-input\/40 {
    background-color: color-mix(in srgb, var(--input) 40%, transparent);
}
.dark .dark\:bg-input\/50 {
    background-color: color-mix(in srgb, var(--input) 50%, transparent);
}
.dark .dark\:bg-input\/60 {
    background-color: color-mix(in srgb, var(--input) 60%, transparent);
}
.dark .dark\:bg-input\/70 {
    background-color: color-mix(in srgb, var(--input) 70%, transparent);
}
.dark .dark\:bg-input\/80 {
    background-color: color-mix(in srgb, var(--input) 80%, transparent);
}
.dark .dark\:bg-input\/90 {
    background-color: color-mix(in srgb, var(--input) 90%, transparent);
}

.dark .dark\:text-foreground {
    color: var(--foreground);
}

.dark .dark\:text-card-foreground {
    color: var(--card-foreground);
}

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

.dark .dark\:text-accent {
    color: var(--accent);
}

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

.dark .dark\:border-border\/5 {
    border-color: color-mix(in srgb, var(--border) 5%, transparent);
}
.dark .dark\:border-border\/10 {
    border-color: color-mix(in srgb, var(--border) 10%, transparent);
}
.dark .dark\:border-border\/15 {
    border-color: color-mix(in srgb, var(--border) 15%, transparent);
}
.dark .dark\:border-border\/20 {
    border-color: color-mix(in srgb, var(--border) 20%, transparent);
}
.dark .dark\:border-border\/30 {
    border-color: color-mix(in srgb, var(--border) 30%, transparent);
}
.dark .dark\:border-border\/40 {
    border-color: color-mix(in srgb, var(--border) 40%, transparent);
}
.dark .dark\:border-border\/50 {
    border-color: color-mix(in srgb, var(--border) 50%, transparent);
}
.dark .dark\:border-border\/60 {
    border-color: color-mix(in srgb, var(--border) 60%, transparent);
}
.dark .dark\:border-border\/70 {
    border-color: color-mix(in srgb, var(--border) 70%, transparent);
}
.dark .dark\:border-border\/80 {
    border-color: color-mix(in srgb, var(--border) 80%, transparent);
}
.dark .dark\:border-border\/90 {
    border-color: color-mix(in srgb, var(--border) 90%, transparent);
}

.dark .dark\:border-x-border {
    border-left-color: var(--border);
    border-right-color: var(--border);
}

.dark .dark\:border-y-border {
    border-top-color: var(--border);
    border-bottom-color: var(--border);
}

.dark .dark\:border-t-border {
    border-top-color: var(--border);
}

.dark .dark\:border-r-border {
    border-right-color: var(--border);
}

.dark .dark\:border-b-border {
    border-bottom-color: var(--border);
}

.dark .dark\:border-l-border {
    border-left-color: var(--border);
}

.dark .dark\:border-input {
    border-color: var(--input);
}

.dark .dark\:sidebar-foreground {
    color: var(--sidebar-foreground);
}

.dark .dark\:bg-sidebar {
    background-color: var(--sidebar);
}

.dark .dark\:bg-item {
    background-color: var(--item);
}

.dark .dark\:sidebar-hover {
    background-color: var(--sidebar-hover);
}

.dark .dark\:sidebar-hover-foreground {
    color: var(--sidebar-hover-foreground);
}

.dark .dark\:sidebar-active {
    background-color: var(--sidebar-active);
}

/* Improve contrast for semantic pills and circular badges in dark mode. */
.dark .rounded-full.dark\:bg-red-500\/20,
.dark .rounded-full.dark\:bg-red-500\/30,
.dark .rounded-full.dark\:bg-red-700\/20,
.dark .rounded-full.dark\:bg-red-700\/30 {
    background-color: oklch(57.7% 0.245 27.325 / 0.35) !important;
}

.dark .rounded-full.dark\:text-red-400,
.dark .rounded-full.dark\:text-red-500 {
    color: oklch(93.6% 0.032 17.717) !important;
}

.dark .rounded-full.dark\:border-red-500\/30,
.dark .rounded-full.dark\:border-red-500\/50,
.dark .rounded-full.dark\:border-red-700\/30,
.dark .rounded-full.dark\:border-red-700\/50,
.dark .rounded-full.dark\:border-red-800 {
    border-color: oklch(80.8% 0.114 19.571 / 0.6) !important;
}

.dark .rounded-full.dark\:bg-green-700\/20,
.dark .rounded-full.dark\:bg-green-700\/30,
.dark .rounded-full.dark\:bg-emerald-500\/15,
.dark .rounded-full.dark\:bg-emerald-600\/30 {
    background-color: oklch(59.6% 0.145 163.225 / 0.35) !important;
}

.dark .rounded-full.dark\:text-green-300,
.dark .rounded-full.dark\:text-green-400,
.dark .rounded-full.dark\:text-emerald-300,
.dark .rounded-full.dark\:text-emerald-400 {
    color: oklch(95% 0.052 163.051) !important;
}

.dark .rounded-full.dark\:border-green-700\/30,
.dark .rounded-full.dark\:border-green-700\/50,
.dark .rounded-full.dark\:border-emerald-400\/60 {
    border-color: oklch(84.5% 0.143 164.978 / 0.6) !important;
}

.dark .rounded-full.dark\:bg-blue-500\/20,
.dark .rounded-full.dark\:bg-blue-500\/30,
.dark .rounded-full.dark\:bg-blue-700\/15,
.dark .rounded-full.dark\:bg-blue-700\/20,
.dark .rounded-full.dark\:bg-blue-700\/30 {
    background-color: oklch(62.3% 0.214 259.815 / 0.35) !important;
}

.dark .rounded-full.dark\:text-blue-300,
.dark .rounded-full.dark\:text-blue-400,
.dark .rounded-full.dark\:text-blue-500 {
    color: oklch(93.2% 0.032 255.585) !important;
}

.dark .rounded-full.dark\:border-blue-500\/30,
.dark .rounded-full.dark\:border-blue-500\/50,
.dark .rounded-full.dark\:border-blue-700\/30,
.dark .rounded-full.dark\:border-blue-800 {
    border-color: oklch(80.9% 0.105 251.813 / 0.6) !important;
}

.dark .rounded-full.dark\:bg-yellow-700\/20,
.dark .rounded-full.dark\:bg-yellow-700\/30,
.dark .rounded-full.dark\:bg-yellow-600\/20,
.dark .rounded-full.dark\:bg-yellow-600\/30,
.dark .rounded-full.dark\:bg-amber-500\/15,
.dark .rounded-full.dark\:bg-amber-500\/20,
.dark .rounded-full.dark\:bg-amber-500\/30,
.dark .rounded-full.dark\:bg-amber-500\/35 {
    background-color: oklch(76.9% 0.188 70.08 / 0.35) !important;
}

.dark .rounded-full.dark\:text-yellow-300,
.dark .rounded-full.dark\:text-yellow-400,
.dark .rounded-full.dark\:text-amber-300,
.dark .rounded-full.dark\:text-amber-400 {
    color: oklch(96.2% 0.059 95.617) !important;
}

.dark .rounded-full.dark\:border-yellow-500\/50,
.dark .rounded-full.dark\:border-yellow-600\/30,
.dark .rounded-full.dark\:border-amber-300\/60 {
    border-color: oklch(90.5% 0.182 98.111 / 0.6) !important;
}

.dark .rounded-full.dark\:bg-gray-500\/20,
.dark .rounded-full.dark\:bg-gray-500\/30,
.dark .rounded-full.dark\:bg-gray-500\/35,
.dark .rounded-full.dark\:bg-gray-600\/30,
.dark .rounded-full.dark\:bg-gray-700\/30,
.dark .rounded-full.dark\:bg-slate-500\/20 {
    background-color: oklch(55.1% 0.027 264.364 / 0.45) !important;
}

.dark .rounded-full.dark\:text-gray-300,
.dark .rounded-full.dark\:text-gray-400,
.dark .rounded-full.dark\:text-slate-400 {
    color: oklch(96.7% 0.003 264.542) !important;
}

.dark .rounded-full.dark\:border-gray-400\/60,
.dark .rounded-full.dark\:border-gray-600,
.dark .rounded-full.dark\:border-gray-700\/60 {
    border-color: oklch(70.7% 0.022 261.325 / 0.65) !important;
}

.dark .rounded-full.dark\:bg-purple-700\/20,
.dark .rounded-full.dark\:bg-purple-700\/30 {
    background-color: oklch(55.8% 0.288 302.321 / 0.35) !important;
}

.dark .rounded-full.dark\:text-purple-300,
.dark .rounded-full.dark\:text-purple-400 {
    color: oklch(94.6% 0.033 307.174) !important;
}

.dark .rounded-full.dark\:border-purple-700\/30 {
    border-color: oklch(82.7% 0.119 306.383 / 0.6) !important;
}

.dark .rounded-full.dark\:bg-indigo-500\/20,
.dark .rounded-full.dark\:bg-indigo-600\/30 {
    background-color: oklch(58.5% 0.233 277.117 / 0.35) !important;
}

.dark .rounded-full.dark\:text-indigo-400 {
    color: oklch(93% 0.034 272.788) !important;
}

.dark .rounded-full.dark\:bg-cyan-500\/20 {
    background-color: oklch(60.9% 0.126 221.723 / 0.35) !important;
}

.dark .rounded-full.dark\:text-cyan-400 {
    color: oklch(95.6% 0.045 203.388) !important;
}

.dark .rounded-full.dark\:bg-orange-600\/20 {
    background-color: oklch(64.6% 0.222 41.116 / 0.35) !important;
}

.dark .rounded-full.dark\:text-orange-400 {
    color: oklch(95.4% 0.038 75.164) !important;
}

.dark .rounded-full.dark\:bg-rose-500\/20 {
    background-color: oklch(58.6% 0.253 17.585 / 0.35) !important;
}

.dark .rounded-full.dark\:text-rose-400 {
    color: oklch(94.1% 0.03 12.58) !important;
}

/* When document side-panel is open (page shrunk), hide optional blocks. */
#app-page.doc-panel-open .hide-when-doc-panel {
    display: none;
}

@media (min-width: 1024px) {
    #app-page.doc-panel-open .dp-hide-lg {
        display: none;
    }
}

@media (min-width: 1640px) {
    #app-page.doc-panel-open .dp-wide-show {
        display: block !important;
    }

    #app-page.doc-panel-open .dp-wide-w-auto {
        width: auto !important;
    }
}

#app-page.doc-panel-open .dp-w-auto {
    width: auto !important;
}

#app-page.doc-panel-open .dp-flex-col {
    flex-direction: column !important;
}

@media (max-width: 1440px) {
    #app-page.doc-panel-open .dp-xl-flex-col {
        display: flex !important;
        flex-direction: column !important;
    }

    #app-page.doc-panel-open .dp-xl-flex-col-reverse {
        flex-direction: column-reverse !important;
    }

    #app-page.doc-panel-open .dp-xl-items-start {
        align-items: start !important;
    }

    #app-page.doc-panel-open .dp-xl-gap-1 {
        gap: 0.25rem !important;
    }

    #app-page.doc-panel-open .dp-xl-gap-4 {
        gap: 1rem !important;
    }

    #app-page.doc-panel-open .dp-xl-colgap-4 {
        column-gap: 1rem !important;
    }

    #app-page.doc-panel-open .dp-xl-grid-1 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1640px) {
    #app-page.doc-panel-open .dp-2xl-flex-col {
        display: flex !important;
        flex-direction: column !important;
    }

    #app-page.doc-panel-open .dp-2xl-grid-cols-1 {
        grid-template-columns: 1fr !important;
    }
}

#app-page.doc-panel-open .dp-flex-col-reverse {
    flex-direction: column-reverse !important;
}

#app-page.doc-panel-open .dp-flex-col {
    display: flex !important;
    flex-direction: column !important;
}

html {
    /* font-size: 12px; */
    /*background: #2f373e;*/
    /* background-color: rgb(63 63 70); */
    /* background-color: rgb(229 231 235); */
    height: 100vh;
}

@media (min-width: 764px) {
    .xl\:w-min-120 {
        min-width: 40rem;
    }
}

@media (min-width: 1024px) {
    .lg\:w-80 {
        width: 22rem;
    }

    .lg\:w-100 {
        width: 25rem;
    }

    .lg\:w-min-120 {
        min-width: 40rem;
    }

    .lg\:w-min-100 {
        min-width: 30rem;
    }

    .lg\:position-initial {
        position: initial;
    }

    .lg\:rem-w-25 {
        min-width: 25rem;
        max-width: 25rem;
    }

    .lg\:rem-w-35 {
        min-width: 35rem;
        max-width: 35rem;
    }
}

.html-color {
    background-color: rgb(63 63 70);
    /*background: #2f373e;*/
}

.footer-red {
    /*color:#f56565;*/
    color: #f37878;
    font-weight: 600;
    text-shadow: 1px 1px 2px black;
}

.footer-red:hover {
    color: white;
}

/*


    inputs


 */

textarea:user-invalid,
select:user-invalid,
input:user-invalid {
    border-color: #f87171;
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.15);
    background-color: rgba(254, 242, 242, 0.5);
}

/* Safari renders date inputs with the value text at the top of tall inputs.
   Force the value to vertical-center to match Chrome/Firefox. */
input[type="date"]:not(.hidden),
input[type="datetime-local"]:not(.hidden),
input[type="month"]:not(.hidden),
input[type="time"]:not(.hidden) {
    -webkit-appearance: none;
    appearance: none;
    line-height: normal;
    min-height: 0;
    display: flex;
    align-items: center;
}
input[type="date"]:not(.hidden)::-webkit-datetime-edit,
input[type="datetime-local"]:not(.hidden)::-webkit-datetime-edit,
input[type="month"]:not(.hidden)::-webkit-datetime-edit,
input[type="time"]:not(.hidden)::-webkit-datetime-edit {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0;
}
input[type="date"]:not(.hidden)::-webkit-date-and-time-value,
input[type="datetime-local"]:not(.hidden)::-webkit-date-and-time-value,
input[type="month"]:not(.hidden)::-webkit-date-and-time-value,
input[type="time"]:not(.hidden)::-webkit-date-and-time-value {
    text-align: left;
    height: auto;
    min-height: 1.5em;
    line-height: 1.5;
}
input[type="date"]:not(.hidden)::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:not(.hidden)::-webkit-calendar-picker-indicator,
input[type="month"]:not(.hidden)::-webkit-calendar-picker-indicator,
input[type="time"]:not(.hidden)::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.5;
    margin-left: auto;
    padding: 0.25rem;
}
input[type="date"]:not(.hidden)::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]:not(.hidden)::-webkit-calendar-picker-indicator:hover,
input[type="month"]:not(.hidden)::-webkit-calendar-picker-indicator:hover,
input[type="time"]:not(.hidden)::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.dark textarea:user-invalid,
.dark select:user-invalid,
.dark input:user-invalid {
    background-color: rgba(127, 29, 29, 0.1);
}

/* When a borderless input lives inside a merged input group, lift the
   invalid state to the wrapper so the whole group goes red as one unit */
.input-group:has(:user-invalid) {
    border-color: #f87171;
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.15);
}
.input-group :user-invalid {
    border-color: transparent;
    box-shadow: none;
    background-color: transparent;
}

.invalid {
    border-color: #f87171;
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.15);
    background-color: rgba(254, 242, 242, 0.5);
    /*outline: 1px red dashed;*/
    /*outline-offset: -3px;*/
}

/*


    tailwind


*/

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.h-fixed {
    height: 3.4rem;
}

.w-fixed {
    width: 3.4rem;
}

.h-normal {
    height: 3.3rem;
}

.h-normal2 {
    height: 3.6rem;
}

.w-normal {
    width: 3.3rem;
}

.min-w-1\/4 {
    min-width: 25%;
}

.min-w-1\/2 {
    min-width: 50%;
}

.min-w-3 {
    min-width: 3rem;
}

.min-w-4 {
    min-width: 4rem;
}

.min-w-6 {
    min-width: 6rem;
}

.min-w-9 {
    min-width: 9rem;
}

.min-w-15 {
    min-width: 15rem;
}

/* w-80 originally */
.min-w-22 {
    min-width: 22rem;
}

.min-w-28 {
    min-width: 28rem;
}

.min-w-34 {
    min-width: 34rem;
}

.width-card {
    /* display: block; */
}

.blur {
    filter: blur(1px);
}

.min-w-rem-48 {
    min-width: 48rem;
}

.min-w-rem-64 {
    min-width: 64rem;
}

.rem-w-3 {
    min-width: 3rem;
    max-width: 3rem;
}

.rem-w-4 {
    min-width: 4rem;
    max-width: 4rem;
}

.rem-w-6 {
    min-width: 6rem;
    max-width: 6rem;
}

.rem-w-8 {
    min-width: 8rem;
    max-width: 8rem;
}

.rem-w-7 {
    min-width: 7rem;
    max-width: 7rem;
}

.rem-w-9 {
    min-width: 9rem;
    max-width: 9rem;
}

.rem-w-12 {
    min-width: 12rem;
    max-width: 12rem;
}

.rem-w-15 {
    min-width: 15rem;
    max-width: 15rem;
}

/* w-80 originally */
.rem-w-22 {
    min-width: 22rem;
    max-width: 22rem;
}

.rem-w-25 {
    min-width: 25rem;
    max-width: 25rem;
}

.blur {
    filter: blur(1px);
}

.blur-sm {
    filter: blur(2px);
}

.blur-md {
    filter: blur(3px);
}

.blur-lg {
    filter: blur(4px);
}

.w-72 {
    width: 18rem;
}

.w-80 {
    width: 22rem;
}

.w-100 {
    width: 30rem;
}

.w-110 {
    width: 35rem;
}

.w-120 {
    width: 40rem;
}

.w-min-32 {
    min-width: 8rem;
}

.w-min-48 {
    min-width: 12rem;
}

.w-min-72 {
    min-width: 18rem;
}

.w-min-80 {
    min-width: 22rem;
}

.w-min-100 {
    min-width: 30rem;
}

.w-min-110 {
    min-width: 35rem;
}

.w-min-120 {
    min-width: 40rem;
}

.w-max-72 {
    max-width: 18rem;
}

.w-max-80 {
    max-width: 22rem;
}

.w-max-100 {
    max-width: 30rem;
}

.w-max-110 {
    max-width: 35rem;
}

.w-max-120 {
    max-width: 40rem;
}

.max-w-4xl {
    max-width: 48rem;
}

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

.max-w-8xl {
    max-width: 98rem;
}

.max-w-screen-2xl {
    max-width: 1536px;
}

.max-w-screen-3xl {
    max-width: 1792px;
}

.max-w-screen-4xl {
    max-width: 2048px;
}

.max-w-screen-5xl {
    max-width: 2304px;
}

.striped-blue {
    background: repeating-linear-gradient(55deg,
            #4299e1 0px,
            #4299e1 10px,
            #90caf9 10px,
            #90caf9 20px);
}

.striped-red {
    background: repeating-linear-gradient(55deg,
            #f56565 0px,
            #f56565 10px,
            #feb2b2 10px,
            #feb2b2 20px);
}

.striped-green {
    background: repeating-linear-gradient(55deg,
            #38a169 0px,
            #38a169 10px,
            #68d391 10px,
            #68d391 20px);
}

.striped-gray {
    background: repeating-linear-gradient(55deg,
            #718096 0px,
            #718096 10px,
            #a0aec0 10px,
            #a0aec0 20px);
}

.link-card-blue {
    color: #006cb1;
}

.bg-link-card-blue {
    background-color: #006cb1;
    color: white;
}

.bg-card-blue-500 {
    background-color: #005a92;
    color: white;
}

.border-link-color {
    border-bottom-width: 1px;
    border-color: #006cb1;
}

.border-link-blue {
    border-color: #006cb1;
}

.max-h-100 {
    max-height: 30rem;
}

.clamp-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.min-h-normal2 {
    min-height: 3.6rem;
}

.bg-white-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;
    transition: background-color 9999s ease-in-out 0s;
}

.__remembered.bg-gray-700:not(.opacity-30) {
    background-color: rgb(55 65 81) !important;
}

.__remembered.bg-red-700:not(.opacity-30) {
    background-color: rgb(220 38 38) !important;
}

.__remembered.bg-blue-700:not(.opacity-30) {
    background-color: rgb(29 78 216) !important;
}

.__remembered.bg-green-700:not(.opacity-30) {
    background-color: rgb(21 128 61) !important;
}

.__remembered.bg-yellow-400:not(.opacity-30) {
    background-color: rgb(250 204 21) !important;
}

.__remembered.bg-purple-500:not(.opacity-30) {
    background-color: rgb(168 85 247) !important;
}

.__remembered.bg-white:not(.opacity-30) {
    background-color: rgb(255 255 255) !important;
    border-color: rgb(156 163 175) !important;
}

.__remembered.bg-yellow-600:not(.opacity-30) {
    background-color: rgb(217 119 6) !important;
}

.__remembered.border-gray-300:not(.opacity-30) {
    background-color: rgb(55 65 81) !important;
    color: white !important;
}

.__remembered.text-red-700:not(.opacity-30) {
    background-color: rgb(220 38 38) !important;
    color: white !important;
}

.__remembered.text-blue-700:not(.opacity-30) {
    background-color: rgb(29 78 216) !important;
    color: white !important;
}

.__remembered.text-green-700:not(.opacity-30) {
    background-color: rgb(21 128 61) !important;
    color: white !important;
}

.__remembered.text-yellow-600:not(.opacity-30) {
    background-color: rgb(250 204 21) !important;
    color: black !important;
}

.__remembered.text-purple-500:not(.opacity-30) {
    background-color: rgb(168 85 247) !important;
    color: white !important;
}

.__remembered.text-white:not(.opacity-30) {
    background-color: rgb(55 65 81) !important;
    color: white !important;
}

.__remembered.text-yellow-600:not(.opacity-30) {
    background-color: rgb(217 119 6) !important;
    color: white !important;
}

@media (max-width: 1724px) {
    .hidden-1724 {
        display: none !important;
    }
}

@media (max-width: 1724px) {
    .visible-1724 {
        display: flex !important;
    }
}

.w-18 {
    width: 4.5rem;
}

@keyframes modal-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modal-up {
    from {
        opacity: 0;
        transform: scale(.95) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-modal-fade {
    animation: modal-fade .2s ease-out;
}

.animate-modal-up {
    animation: modal-up .25s cubic-bezier(.16, 1, .3, 1);
}

@keyframes expand {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        max-height: 2000px;
        transform: translateY(0);
    }
}

.animate-expand {
    animation: expand .3s cubic-bezier(.16, 1, .3, 1);
}

@layer base {
    input[type="number"] {
        appearance: textfield;
        -moz-appearance: textfield;
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}