@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --primary: #212121;
    --primary-fg: #f7f7f7;
    --body-fg: #eeeeee;
    --body-bg: #111111;
    --body-quiet-color: #e0e0e0;
    --body-loud-color: #ffffff;
    --breadcrumbs-link-fg: #e0e0e0;
    --breadcrumbs-bg: var(--primary);
    --link-fg: #fafafa;
    --link-hover-color: #9a9e1a;
    --link-selected-fg: #7c7f16;
    --hairline-color: #272727;
    --border-color: #353535;
    --error-fg: #f44336;
    --message-success-bg: #006b1b;
    --message-warning-bg: #583305;
    --message-error-bg: #570808;
    --darkened-bg: #111;
    --selected-bg: #1b1b1b;
    --selected-row: #00363a;
    --close-button-bg: #333333;
    --close-button-hover-bg: #666666;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--body-fg);
    background-color: var(--body-bg);
}

#header {
    background-color: var(--primary);
    color: var(--primary-fg);
    min-height: 40px;
}

#header .logo {
    height: 20px;
}

input[type="submit"].default {
    background-color: var(--link-hover-color);
    color: var(--primary-fg);
}

input[type="submit"].default:hover, input[type="submit"]:hover {
    background-color: var(--link-selected-fg) !important;
}

/* Focus ring */
input:focus {
    outline: 2px solid var(--link-hover-color);
    outline-offset: 2px;
}

/* Sidebar */
.main>#nav-sidebar {
    visibility: visible !important;
}

#nav-sidebar {
    z-index: 15;
    flex: 0 0 275px;
    left: 0 !important;
    margin-left: 0 !important;
    border-top: 1px solid transparent;
    border-right: 1px solid var(--hairline-color);
    background-color: var(--body-bg);
    overflow: auto;

    /* Scrollbar */
    scrollbar-width: thin;
}

#toggle-nav-sidebar {
    display: none;
}