html[data-theme="light"],
:root {
    --primary: #79aec8;
    --secondary: #2d3545;
    --accent: #f5dd5d;
    --primary-fg: #fff;

    --body-fg: #333;
    --body-bg: #fff;
    --body-quiet-color: #666;
    --body-loud-color: #000;

    --header-color: #ffc;
    --header-branding-color: var(--accent);
    --header-bg: var(--secondary);
    --header-link-color: var(--primary-fg);

    --breadcrumbs-fg: #c4dce8;
    --breadcrumbs-link-fg: var(--body-bg);
    --breadcrumbs-bg: #485365;

    --link-fg: #417893;
    --link-hover-color: #036;
    --link-selected-fg: var(--secondary);

    --hairline-color: #e8e8e8;
    --border-color: #ccc;

    --error-fg: #ba2121;

    --message-success-bg: #dfd;
    --message-warning-bg: #ffc;
    --message-error-bg: #ffefef;

    --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
    --selected-bg: #e4e4e4; /* E.g. selected table cells */
    --selected-row: #ffc;

    --button-fg: #fff;
    --button-bg: var(--secondary);
    --button-hover-bg: #205067;
    --default-button-bg: #205067;
    --default-button-hover-bg: var(--secondary);
    --close-button-bg: #747474;
    --close-button-hover-bg: #333;
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #a41515;

    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--close-button-bg);
    --object-tools-hover-bg: var(--close-button-hover-bg);

    --font-family-primary:
        "Segoe UI",
        system-ui,
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-family-monospace:
        ui-monospace,
        Menlo,
        Monaco,
        "Cascadia Mono",
        "Segoe UI Mono",
        "Roboto Mono",
        "Oxygen Mono",
        "Ubuntu Monospace",
        "Source Code Pro",
        "Fira Mono",
        "Droid Sans Mono",
        "Courier New",
        monospace,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.25rem;
}

/* Formset record name */
.module table .original p {
    display: none;
}

.breadcrumbs a {
    font-size: 0.9rem;
}

#site-name img {
    max-height: 30px;
}

.submit-row a.deletelink {
    height: 35px;
}

.toggle-nav-sidebar {
    background-color: var(--secondary);
    border-right: 1px solid #52607c;
}

.toggle-nav-sidebar:hover, .toggle-nav-sidebar:focus {
    background-color: #52607c;
}

#nav-sidebar {
    background-color: var(--secondary);
}

.sidebar-nav {
    display: block;
    margin: 0;
    padding: 0;
    background-color: var(--secondary);
}

.sidebar-nav .nav-item {
    width: 100%;
}

.sidebar-nav .nav-item .nav-link {
    color: #fff;
    border-bottom: solid 1px #485365;
    padding: 15px 20px;
    display: block;
}

.sidebar-nav .nav-item .nav-link.active {
    color: #00abff;
    font-weight: bold;
}

.sidebar-nav .nav-item .nav-link:hover,
.sidebar-nav .nav-item .nav-link:focus,
.sidebar-nav .sub-nav a:hover,
.sidebar-nav .sub-nav a:focus {
    background: #191c21;
    text-decoration: none;
}

.sidebar-nav .sub-nav {
    padding: 0;
}

.sidebar-nav .sub-nav li {
    display: block;
}

.sidebar-nav .sub-nav a {
    color: #fff;
    padding: 5px 10px 5px 30px;
    display: block;
    font-size: 12px;
}

#changelist-filter-extra-actions {
    padding-left: 10px;
}