/* ---------------------------------------------------------------------------
   The logged-out screens: login, password reset, change password, notice.

   Loaded as css_local, so it is the last stylesheet on these four pages and
   wins on a tie with app.css. That is why the colours below can be plain
   declarations rather than needing an !important, and it is also why the
   literals that used to be here were dangerous: they beat the theme silently.
   ------------------------------------------------------------------------ */

html {
    height: 100%;
}

body {
    background: #00152e;
}

/* The card sat against the top edge of the viewport, because this layout has no
   navbar to offset it and nothing else was reserving the space. The footer is
   absolutely positioned 6rem off the bottom, so the page was already built
   around the card being in the upper half; it just had no gap above it.

   4rem, dropping to 1.5rem on a short viewport. A phone in landscape is about
   375px tall, and 64px of it spent above a card carrying two inputs and a
   button is how the button ends up below the fold. */
.login-page {
    padding-top: 4rem;
}

@media (max-height: 600px) {
    .login-page {
        padding-top: 1.5rem;
    }
}

.logo-ext,
#logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
	margin-bottom: 1em;
}

/* White on black, black on white: the mark has to follow the card it sits on,
   and the card is --vd-surface, which is white in Light and near-navy in Dark.
   Two files rather than one, because these are <img> tags and the fills are
   explicit - currentColor has nothing to inherit inside an image. The navy one
   is the default so that a page rendering with no theme attribute at all still
   shows a mark on the light card that :root defines. */
.logo-wob {
    display: none;
}

[data-bs-theme="dark"] .logo-bow {
    display: none;
}

[data-bs-theme="dark"] .logo-wob {
    display: block;
}

/* TWO KINDS OF PANEL SHARE THIS FILE, and they do not want the same colours.

   Login is a .card, painted --vd-surface, so it follows the theme and goes dark.
   Change Password, Reset Password and Notice are a .main-div, which forces
   rgba(255, 255, 255, 0.9) with an !important and therefore stays light in both
   themes. Literals are RIGHT on the second kind and wrong on the first; tokens
   are the other way round. Handing the card's tokens to both would have turned
   these three headings near-white on near-white, which is the reported fault
   upside down.

   The .main-div panel is not white, either. It is 90% white over the navy body,
   so it renders about #e6e8ea, and that is what its text has to be measured
   against rather than #fff. */

h2 {
    color:#444444;   /* 7.93:1 on the panel */
    margin:0 0 1em 0;
    text-align: center;
}

/* #777777 measured 3.65:1 against the panel it is actually painted on - a fail,
   and it read as one: this is the paragraph under the heading on the password
   screens. It was only ever checked against pure white, where it is 4.48:1, and
   that misses too. #666666 is 4.67:1 and is the same grey one step down. */
.panel p {
    color:#666666;
    margin-bottom:30px;
    line-height:24px;
}

/* "Login", on the one panel here that follows the theme.

   It was the #444444 above, which is 9.7:1 on a white card and 1.8:1 on the dark
   one - the word was very nearly not there, which is what Stuart reported. A
   literal cannot follow a theme, so it is the token, and --vd-ink is the colour
   the card's own body text already uses: 16.2:1 in Light, 14.2:1 in Dark.

   .card p takes --vd-ink-soft for the same reason one level quieter. Nothing
   renders it today, and it is here so that the next paragraph added to this card
   does not arrive with the fault this rule exists to fix. */
.card h2 {
    color: var(--vd-ink);
}

.card p {
    color: var(--vd-ink-soft);
}


.login-form .form-control {
    background: #f7f7f7 none repeat scroll 0 0;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
}
.main-div {
    background-color: rgba(255, 255, 255, 0.9)!important;
    border-radius: 2px;
    margin: 10px auto 30px;
    padding: 50px 70px 70px 71px;

}

.login-form{ text-align:center;}

/* "Forgot password?", which lives inside the login CARD - so this one does take
   the token, unlike .back below. It is commented out in the template today; the
   token is here so that uncommenting it does not reintroduce a #777777 on a card
   that can be dark. */
.forgot a {
    color: var(--vd-accent);
    font-size: 14px;
    text-decoration: underline;
}
.login-form  .btn.btn-primary {

    font-size: 14px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0;
}
.forgot {
    text-align: left; margin-bottom:30px;
}

.login-form .btn.btn-primary.reset {
    background: #ff9900 none repeat scroll 0 0;
}
/* A literal, and deliberately: .back belongs to the .main-div screens, which stay
   light whatever the theme is. --vd-accent here would be #58a6ff in Dark, which
   is 2.1:1 on that panel - the theme's own token, failing, because the surface
   under it does not follow the theme with it. */
.back { text-align: left; margin-top:10px;}
.back a {color: #0b60c4; font-size: 13px;text-decoration: none;}


.footer-ext {
	position: absolute;
	bottom: 6rem;
	width: 100%;

}