/* DJANGO Admin styles */

@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@400;500;600;700&display=swap');

/* VARIABLE DEFINITIONS */
html[data-theme="light"],
:root {
    --primary: #79aec8;
    --secondary: #417690;
    --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);

    --link-fg: #417893;
    --link-hover-color: #036;
    --link-selected-fg: #5b80b2;

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


    --input-border-color: #D3D3D6;
    --label-color: #2B2C2F;

    --error-fg: #eb484e;

    --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(--primary);
    --button-hover-bg: #609ab6;
    --default-button-bg: var(--secondary);
    --default-button-hover-bg: #205067;
    --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:'Darker Grotesque', sans-serif;
    --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";
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-family: var(--font-family-primary);
    color: var(--body-fg);
    background: var(--body-bg);
}

blockquote {
    font-size: 0.6875rem;
    color: #777;
    margin-left: 2px;
    padding-left: 10px;
    border-left: 5px solid #ddd;
}

code, pre {
    font-family: var(--font-family-monospace);
    color: var(--body-quiet-color);
    font-size: 0.75rem;
    overflow-x: auto;
}

pre.literal-block {
    margin: 10px;
    background: var(--darkened-bg);
    padding: 6px 8px;
}

code strong {
    color: #930;
}

hr {
    clear: both;
    color: var(--hairline-color);
    background-color: var(--hairline-color);
    height: 1px;
    border: none;
    margin: 0;
    padding: 0;
    line-height: 1px;
}

/* TEXT STYLES & MODIFIERS */

.small {
    font-size: 0.6875rem;
}

.mini {
    font-size: 0.625rem;
}

.help, p.help, form p.help, div.help, form div.help, div.help li {
    font-size: 0.6875rem;
    color: var(--body-quiet-color);
}

div.help ul {
     margin-bottom: 0;
}

.help-tooltip {
    cursor: help;
}


.quiet, a.quiet:link, a.quiet:visited {
    color: var(--body-quiet-color);
    font-weight: normal;
}

.clear {
    clear: both;
}

.nowrap {
    white-space: nowrap;
}

.hidden {
    display: none !important;
}

/* MODULES */

.module {
    border: none;
    margin-bottom: 30px;
    background: var(--body-bg);
}

.module p, .module ul, .module h3, .module h4, .module dl, .module pre {
    padding-left: 10px;
    padding-right: 10px;
}

.module blockquote {
    margin-left: 12px;
}

.module ul, .module ol {
    margin-left: 1.5em;
}

.module h3 {
    margin-top: .6em;
}

.module h2, .module caption, .inline-group h2 {
    margin: 0;
    padding: 8px;
    font-weight: 400;
    font-size: 0.8125rem;
    text-align: left;
    background: var(--primary);
    color: var(--header-link-color);
}

.module caption,
.inline-group h2 {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.module table {
    border-collapse: collapse;
}

.description {
    font-size: 0.75rem;
    padding: 5px 0 0 12px;
}

/* ACTION ICONS */

.viewlink, .inlineviewlink {
    padding-left: 16px;
    background: url(../../img/icon-viewlink.svg) 0 1px no-repeat;
}

.changelink, .inlinechangelink {
    padding-left: 16px;
    background: url(../../img/icon-changelink.svg) 0 1px no-repeat;
}


/* OBJECT HISTORY */

#change-history table {
    width: 100%;
}

#change-history table tbody th {
    width: 16em;
}

#change-history .paginator {
    color: var(--body-quiet-color);
    border-bottom: 1px solid var(--hairline-color);
    background: var(--body-bg);
    overflow: hidden;
}

/* PAGE STRUCTURE */

#container {
    position: relative;
    width: 100%;
    min-width: 980px;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#container > div {
    flex-shrink: 0;
}

#container > .main {
    display: flex;
    flex: 1 0 auto;
}

.main > .content {
    flex:  1 0;
    max-width: 100%;
}

.skip-to-content-link {
    position: absolute;
    top: -999px;
    margin: 5px;
    padding: 5px;
    background: var(--body-bg);
    z-index: 1;
}

.skip-to-content-link:focus {
    left: 0px;
    top: 0px;
}

.content-wrap {
    padding: 20px 30px;
}

.dashboard #content {
    width: 600px;
}

#content-main {
    float: left;
    width: 100%;
}

#content-related {
    float: right;
    width: 260px;
    position: relative;
    margin-right: -300px;
}

/* COLUMN TYPES */

.colMS {
    margin-right: 300px;
}

.colSM {
    margin-left: 300px;
}

.colSM #content-related {
    float: left;
    margin-right: 0;
    margin-left: -300px;
}

.colSM #content-main {
    float: right;
}

.popup .colM {
    width: auto;
}

/* HEADER */
#branding {
    display: flex;
}

#branding h1 {
    padding: 0;
    margin: 0;
    margin-inline-end: 20px;
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--header-branding-color);
}

#branding h1 a:link, #branding h1 a:visited {
    color: var(--accent);
}

#branding h2 {
    padding: 0 10px;
    font-size: 0.875rem;
    margin: -8px 0 8px 0;
    font-weight: normal;
    color: var(--header-color);
}

#branding a:hover {
    text-decoration: none;
}

#logout-form {
    display: inline;
}

#logout-form button {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-family-primary);
}

#user-tools {
    float: right;
    margin: 0 0 0 20px;
    text-align: right;
}

#user-tools, #logout-form button{
    padding: 0;
    font-weight: 300;
    font-size: 0.6875rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

#user-tools a, #logout-form button {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

#user-tools a:focus, #user-tools a:hover,
#logout-form button:active, #logout-form button:hover {
    text-decoration: none;
    border-bottom: 0;
}

#logout-form button:active, #logout-form button:hover {
    margin-bottom: 1px;
}

/* SIDEBAR */

#content-related {
    background: var(--darkened-bg);
}

#content-related .module {
    background: none;
}

#content-related h3 {
    color: var(--body-quiet-color);
    padding: 0 16px;
    margin: 0 0 16px;
}

#content-related h4 {
    font-size: 0.8125rem;
}

#content-related p {
    padding-left: 16px;
    padding-right: 16px;
}

#content-related .actionlist {
    padding: 0;
    margin: 16px;
}

#content-related .actionlist li {
    line-height: 1.2;
    margin-bottom: 10px;
    padding-left: 18px;
}

#content-related .module h2 {
    background: none;
    padding: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--hairline-color);
    font-size: 1.125rem;
    color: var(--body-fg);
}

.delete-confirmation form .cancel-link {
    margin: 0 0 0 10px;
}

/* POPUP */
.popup #content {
    padding: 20px;
}

.popup #container {
    min-width: 0;
}

.popup #header {
    padding: 10px 20px;
}

.base-svgs {
    display: none;
}