:root,
body #root {
    --pistachio: #cfe57f;
    --midnight: #173d3c;
    --midnight-dark: #123030;
    --bs-btn-hover-bg: #697f1a;
    --dark-bg1: #141517;
    --dark-bg2: rgb(25, 26, 28);
    --dark-bg3: rgb(36, 37, 40);
    --link: #318180;
}

html body {
    background: #eceded;
    background-image: url(https://www.claytonutz.com/cfimages/cu-logo-background-grey.webp/public);
}

html.dark body {
  background: var(--dark-bg3);
}

body main.bg-background {
    background: linear-gradient(180deg, #eceded 0%, #eceded 30%, transparent 100%);
}

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

.focus-visible\:ring-ring:focus-visible,
.focus\:ring-ring:focus {
    --tw-ring-color: #var(var(--midnight)) !important;
}

body .data-\[state\=checked\]\:bg-primary[data-state=checked],
body .bg-primary {
    background-color: var(--midnight);
}

body .hover\:bg-primary\/90:hover,
.hover\:bg-primary:hover {
    background: var(--bs-btn-hover-bg) !important;
}

body .border-primary {
    border-color: var(--midnight);
}

.flex.min-h-0.flex-1.flex-col.gap-2.overflow-auto.group-data-\[collapsible\=icon\]\:overflow-hidden {
    background: var(--midnight);
}

svg.text-primary {
    color: var(--midnight) !important;
}

body [data-sidebar="group-label"] {
    color: lightgray;
}

.flex.flex-col.gap-2.p-2.py-3 {
    background: var(--midnight);
    color: white;
}

.flex.flex-col.gap-2.p-2.py-3 svg {
    color: white;
}

.hover\:text-accent-foreground:hover,
.hover\:text-muted-foreground:hover {
    background: var(--pistachio);
    color: black;
}

.hover\:text-accent-foreground:hover svg,
.hover\:text-muted-foreground:hover svg {
    color: black !important;
}

button#chat-submit,
#stop-button,
button#confirm {
    background: var(--midnight);
}

button#chat-submit:hover,
button#confirm:hover {
    background: var(--bs-btn-hover-bg);
}

#thread-history button {
    color: white;
    background: var(--midnight-dark);
}

#thread-history button[data-active="true"],
[data-active="true"] div#thread-options {
    background: var(--pistachio);
    color: black;
}

#thread-history button[data-active="false"]:hover,
[data-active="false"] div#thread-options {
    background: var(--bs-btn-hover-bg);
}

.to-transparent {
    background: none !important;
}

div#header {
    background: #e3e3e3;
}

div#thread-options {
    background: var(--midnight-dark);
}

div#thread-options:hover {
    background: var(--bs-btn-hover-bg);
    color: white;
}

a.watermark {
    display: none !important;
}

body .text-sidebar-foreground\/70 {
    color: lightgray;
}

.light a.cursor-pointer.uppercase.-translate-y-px.inline-flex.items-center.rounded-xl.bg-muted.px-1\.5.text-\[0\.7rem\].font-medium.text-muted-foreground.element-link.hover\:bg-primary.hover\:text-primary-foreground:not(:hover) {
    color: #318180;
}


.dark {
    .flex.min-h-0.flex-1.flex-col.gap-2.overflow-auto.group-data-\[collapsible\=icon\]\:overflow-hidden {
        background: var(--dark-bg2);
    }

    .flex.flex-col.gap-2.p-2.py-3,
    div#header {
        background: var(--dark-bg1);
    }

    .bg-background {
        background: var(--dark-bg3)
    }

    .dark\:bg-card {
        background: var(--dark-bg2);
    }

    .hover\:text-accent-foreground,
    .hover\:text-muted-foreground {
        &:hover {
            background: var(--dark-bg2);
            color: white;
        }

        &:hover svg {
            color: white !important;
        }
    }

    body .data-\[state\=checked\]\:bg-primary[data-state=checked],
    body .bg-primary {
        background: var(--pistachio);
        color: white;
    }

    body .border-primary {
        border-color: var(--pistachio);
    }

    body .bg-background[role="dialog"] {
        background: var(--dark-bg2);
    }
    
    body main.bg-background {
        background: var(--dark-bg3);
    }

    button#chat-submit span, #stop-button, button#confirm span {
        color: white;
    }

    svg.text-primary {
        color: var(--pistachio) !important;
    }
}