body {
    font-size: 14px;
    font-weight: 500;
}

h1 {
    margin-bottom: 10px; 
}

#content > h1 {
    font-weight: 600;
    display: inline-block;
}

/* Display aliases as monospace, surrounded by a lightgrey box */
#content > h2, .inline_label {
    background: var(--darkened-bg);
    display: inline-block;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid var(--hairline-color);
    font-family: monospace;
    margin-left: 3px;
}

a:hover {
    text-decoration: underline;
}

/* Pen icon for inline edit links */
.customedit {
    background: url(../admin/img/icon-changelink.svg) 0 1px no-repeat;
    padding-left: 16px;
}

#header {
    color: var(--primary-fg);
    height: 80px;
}

#main {
    border-top: 4px solid var(--link-fg);
}

#branding h1 {
    color: #f6f6f6;
    text-transform: none;
    font-weight: 500;
    font-size: var(--header-font-size);
}

/* Hide light/dark theme toggle */
.theme-toggle {
    display: none !important;
}

/* Align dashboard contents a bit centered on wide screens  */
@media (min-width: 1024px) {
    .dashboard #content {
        padding-left: 140px;
    }
}

/* Hide 'add' and 'edit' buttons on index page  */
.dashboard #content-main .addlink,
.dashboard #content-main .changelink {
    display: none !important;
}

.module caption {
    text-transform: none;
}

.object-tools a:link {
    background-color: var(--default-button-bg);
}

.object-tools a:link:hover {
    background-color: var(--default-button-hover-bg);
    text-decoration: none;
}

#branding h1 a:link {
    color: rgba(0, 0, 0, 0);
}

div.breadcrumbs {
    padding-left: 138px;
    padding-top: 0px;
}

div.breadcrumbs a:hover {
    color: var(--link-hover-color);
}

.help, p.help, form p.help, div.help, form div.help, div.help li {
    font-size: 12px;
}

.help code {
    background-color: var(--darkened-bg);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    color: var(--body-fg);
}

.module caption {
    background: var(--body-medium-color);
    font-size: 14px;
}

.inline-related > h3 > b {
    display: none;
}

/* Styling of captions and stacked inline headings */
.module h2, .module caption, .inline-group h2 {
    background: var(--body-medium-color);
    font-weight: 600 !important;
    text-transform: none !important;
    font-size: 15px !important;
}

/* Filter box styling (right side of screen) */
#changelist-filter li.selected {
    border-left: 5px solid var(--link-selected-fg) !important;
}

#changelist-filter details > summary::before {
    color: var(--body-fg) !important;
}

/* Sets horizontal scrollbar for dataconnection and chartparameter inlines correctly in Chrome */
.inline-group {
    display: grid;
    overflow-x: auto !important;
}

/* Show alias of inline item more clearly, style same as other aliases */
.inline-group .tabular td.original p {
    font-size: 11px !important;
    color: var(--body-fg) !important;
    font-family: monospace;
}

/* Styling of autocomplete fields ('select2'-based) */
.select2-container {
    font-weight: initial;
    max-width: 400px;
}
.select2-dropdown {
    min-width: max-content !important;
    border: 1px solid var(--border-color) !important;
    padding-bottom: 2px;
}
.select2-search__field {
    border-radius: 3px;
}
.select2-results {
    background-color: var(--body-bg);
}   
.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
    background-color: var(--border-color) !important;
    color: var(--body-loud-color) !important;
}
.select2-results__option {
    padding: 3px !important;
}
.select2-selection--multiple .select2-selection__choice {
    background-color: var(--body-medium-color) !important;
    border: 1px solid var(--body-medium-color) !important;
    color: var(--body-bg) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--body-bg) !important;
}

/*  Style selected paginator as a button */  
#changelist-form > p > span {
    color: var(--body-bg);
    background: var(--link-selected-fg);
}

#user_form .selector-chosen h2 {
    background: var(--body-medium-color);    
}

#user-tools a:hover {
    color: var(--link-hover-color);
}

#logout-form button:hover {
    color: var(--link-hover-color);
}

select {
    font-family: var(--font-family-primary);
}

td {
    font-size: 14px;
}

th {
    font-weight: 500;
    font-size: 14px;
}

li {
    font-size: 14px;
}

input, textarea, select, .form-row p, form .button {
    font-size: 14px;
}

.mini {
    font-size: 13px;
}

div.jsoneditor-field {
    font-family: var(--font-family-primary) !important;
    font-size: 14px !important;
}

label {
    font-size: 14px;
}

.module h2, .module caption, .inline-group h2 {
    font-weight: 600;
}

.inline-group .tabular tr.add-row td a {
    font-size: 13px !important;
}

.inline-heading {
    background: var(--heading-bg) !important;
}

/* Hide 'add' and 'edit' buttons on foreign key fields  */
.related-widget-wrapper-link {
    display: none;
}

/* Use min() so the field fills its container up to 1100px, staying responsive on narrow screens */
.text-wide {
    width: min(1100px, 100%) !important;
    field-sizing: content;
    min-height: 2em;
    max-height: 300px;
    overflow-y: auto;
}

@media (max-width: 600px) {
    .text-wide {
        max-height: 150px;
    }
}

.log {
    font-family: monospace;
    background-color: var(--header-bg);
    color: #fff;
    font-size: 12px;
}

/* Coloured pill for indicating a task status */
.status-pill {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
}

/* Specific status modifiers */
.status--disabled {
    color: #546E7A;
    background-color: #edf1f3;
}

.status--enabled {
    color: #263238;
    background-color: #e6ecee;
}

.status--pending {
    color: #440154;
    background-color: #f6d5fe;
}

.status--queued {
    color: #e9edf6;
    background-color: #3b528b;
}

.status--in_progress {
    color: #004D40;
    background-color: #d4fff8;
}

.status--stopping {
    color: #FF8F00;
    background-color: #fff4e5;
}

.status--stopped {
    color: #FF6F00;
    background-color: #fff1e5;
}

.status--success {
    color: #28a745;
    background-color: #e7f9eb;
}

.status--failed {
    color: #D32F2F;
    background-color: #fbeaea;
}