:root {
    --bg-color: #252423;
    --font-color: rgba(255, 255, 255, 0.95);
    --select-arrow-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f2f2f2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --breadcrumb-font-color: #888888;
    --sidebar-bg-color: #201f1e;
    --sidebar-border-color: #31302f;
}

.sidebar .nav-item a.active {
    background-color: rgba(255,255,255,0.1);
    color: var(--white);
}

.sidebar .nav-item a:hover {
    background-color: rgba(255,255,255,0.05);
    color: var(--white);
}

.table a:hover {
    color: rgb(14, 118, 188);
}

.table.table-hover tr:hover td {
    background-color: #2c2c2c;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.form-control,
.form-control[readonly],
.form-control:focus {
    border-color: #444444;
}

/* The native date picker glyph is a dark image; invert it so it reads against the dark background. */
.form-control::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.75;
}

.form-control::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.tab-btn.tab-primary {
    color: var(--white);
}

.e-dialog,
.e-dlg-content {
    background-color: var(--bg-color);
}

.e-dialog,
.e-dlg-content,
.e-dlg-header,
.e-footer-content {
    color: var(--font-color);
}

.e-icon-dlg-close,
.e-icon-dlg-close:hover {
    color: var(--breadcrumb-font-color);
}

.e-treeview .e-list-item.e-hover > .e-fullrow,
.e-treeview .e-list-item.e-node-focus > .e-fullrow,
.e-treeview .e-list-item.e-node-focus.e-hover > .e-fullrow {
    background-color: rgba(255,255,255,0.05);
    color: var(--font-color);
}

.e-contextmenu-wrapper ul,
.e-contextmenu-container ul {
    background-color: #444;
    border-color: #333;
    color: var(--font-color);
}

    .e-contextmenu-wrapper ul .e-menu-item.e-focused,
    .e-contextmenu-container ul .e-menu-item.e-focused {
        background-color: #333;
    }

    .e-contextmenu-wrapper ul .e-separator,
    .e-contextmenu-container ul .e-separator {
        border-bottom-color: #333;
        border-bottom-width: 2px;
    }

.code-added {
    background-color: darkgreen;
}

.code-removed {
    background-color: darkred;
}

.code-changed {
    background-color: darkgoldenrod;
}

.code-moved {
    background-color: rebeccapurple;
}

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

.assistant-chat-bubble {
    background-color: #333;
}

.user-chat-bubble {
    background-color: #334;
}