/*
    CSS overrides to always use colours from light theme even if dark color scheme is used.
    Copied from https://github.com/django/django/blob/3591e1c1acbd7c13174275367c3fdf012cb0413b/django/contrib/admin/static/admin/css/base.css#L8
*/
@media (prefers-color-scheme: dark) {
    :root {
        --primary: #79aec8;
        --primary-fg: #fff;
        --body-fg: #333;
        --body-bg: #fff;
        --body-quiet-color: #666;
        --body-loud-color: #000;
        --breadcrumbs-link-fg: var(--body-bg);
        --breadcrumbs-bg: var(--primary);
        --link-fg: #447e9b;
        --link-hover-color: #036;
        --link-selected-fg: #5b80b2;
        --hairline-color: #e8e8e8;
        --border-color: #ccc;
        --error-fg: #ba2121;
        --message-success-bg: #dfd;
        --message-warning-bg: #ffc;
        --message-error-bg: #ffefef;
        --darkened-bg: #f8f8f8;
        --selected-bg: #e4e4e4;
        --selected-row: #ffc;
        --close-button-bg: #888;
        --close-button-hover-bg: #747474;
    }
}

body {
    font-family: 'Lato', Helvetica, sans-serif;
}

#header {
    background: #FFDD00;
    color: black;
}

#header a:link, #header a:visited {
    color: black;
}

.login #header h1 a {
    color: black !important;
}

#branding h1, #branding h1 a:link, #branding h1 a:visited {
    color: black;
}

#site-name {
    display: flex;
    align-items: center;
}

#branding span.site-environment {
    box-sizing: border-box;
    border-radius: 3px;
    font-size: 12px;
    color: #FFDD00;
    background: black;
    border: 1px solid black;
    padding: 1px 5px;
    margin-left: 10px;
}

#branding span.site-environment-production {
    color: #f44336;
    background: white;
    border: 1px solid #f44336;
}

div.breadcrumbs {
    background: #414141;
    color: #c4dce8;
}

.module h2, .module caption, .inline-group h2 {
    background: #FFDD00;
    color: black;
}

#user-tools a {
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

a:link, a:visited {
    color: #414141;
}

a.section:link, a.section:visited {
    color: black;
}

.button, input[type=submit],
input[type=button],
.submit-row
input,
a.button {
    background: #414141;
    color: #fff;
}

.button.default,
input[type=submit].default,
.submit-row input.default {
    color: black;
    background: #FFDD00;
}

.button:active,
input[type=submit]:active,
input[type=button]:active,
.button:focus,
input[type=submit]:focus,
input[type=button]:focus,
.button:hover,
input[type=submit]:hover,
input[type=button]:hover {
    background: #FFDD00;
    color: black;
}

.button.default:active,
input[type=submit].default:active,
.button.default:focus,
input[type=submit].default:focus,
.button.default:hover,
input[type=submit].default:hover {
    background: #414141;
    color: white;
}

.third-party-logins {
    margin-top: 5px;
}

.third-party-logins .login-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 250px;
}

.third-party-logins .login-logo img {
    width: 100%;
}