body {

    background: #333333;
    font-family: 'Open Sans Condensed', sans-serif;
}

/* Shared "Open in ShotGrid" button. Used by the Lighting Diagram and the
   Contact Sheet. This defines the button's APPEARANCE only; each tool decides
   its own placement (e.g. absolute overlay vs. inline in a header). */
.shotgun_link {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background-color 0.15s;
}

.shotgun_link:hover {
    background-color: rgba(255, 255, 255, 0.85);
}

.shotgun_link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 3px;
    display: block;
}

/* Login screen (shown to anonymous users) */
.login-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 78vh;
}

.login-welcome {
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    white-space: nowrap;
}

.login-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    color: #ffffff;
    margin-bottom: 36px;
}

a.login-btn {
    background-color: rgba(70, 107, 184, 0.5);
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 14px 60px;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    transition: background-color 0.25s, color 0.25s;
}

a.login-btn:hover {
    background-color: rgba(255, 255, 255, 0.85);
    color: #466BB8;
}

.mr-auto, .mx-auto {

    margin-right: 0!important;
    margin-left: auto!important;
}

nav.bg-light {
    background-color: white!important;
}

.nav-item {

    margin: 0px 7px;
}

.nav-item p {

    color:red;
}

.btn-primary {
    background-color: #0084e6;
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: white;
    color: #0084e6;
}

a { color: #0084e6; font-weight: bold; }
a:hover { color: #ffffff; text-decoration: none; transition: color 0.3s; }

/* Design tokens. The studio palette, shared by every app -- Productivity
   Reports and Organization each carried their own identical copy, which is how
   a new app ends up inventing its own greys. Apps may add their own tokens on
   top (Productivity Reports has status colours); they should not restate these. */
:root {
    --accent: rgb(143, 174, 224);
    --accent-strong: #466BB8;
    --accent-dim: rgba(143, 174, 224, 0.6);
    --panel-bg: rgba(70, 107, 184, 0.12);
    --panel-border: rgba(70, 107, 184, 0.25);
    --panel-hover: rgba(70, 107, 184, 0.35);
    --glass-bg: rgba(16, 22, 37, 0.92);
    --text: rgba(255, 255, 255, 0.85);
    --text-dim: rgba(255, 255, 255, 0.55);
    --grid: rgba(143, 174, 224, 0.12);
    /* Thin accent scrollbar, as Daily Manager and Productivity Reports use. */
    --scroll-thumb: rgba(143, 174, 224, 0.4);
    /* Height of the shared header in base.html. Productivity Reports and Daily
       Manager both hardcode 82px in their own calc()s; new code uses this. */
    --header-h: 82px;
    --c-ok: #3fbf7f;
    --c-warn: #e0a458;
    --c-bad: #e06050;
}

/* Page title. This is the shared default every app inherits -- if a new app
   needs its own rule here, the default is probably wrong. Apps that render
   their own chrome instead (Productivity Reports, Daily Manager) hide it;
   Organization restyles it into a sticky header. Nothing else should. */
h1.page_title {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: normal;
    font-weight: 600;
    font-size: 44px;
    width: 100%;
    text-align: center;
    color: rgb(143, 174, 224);
    text-shadow: none;
    margin: 24px 0;
}

/* Pages that leave the block empty (the sheet, the diagram, the wiki) should
   not pay for an empty heading. */
h1.page_title:empty {
    display: none;
}

#deprecated li {
    background: #523f3f;
}

#deprecated li a{
    color: #c7c7c7;
}

#deprecated li:hover {
    background-color: white;
}

#deprecated li:hover a{
    color: red;
}

a.logo {
    font-size: 1.1em;
}

a.logo img {
    width: 50%;
    margin: 0% 3%;
}