/* =========================================================
   WTG DARK THEME - STAFF LOGIN
   osTicket v1.18.4
   ========================================================= */

html,
body#loginBody {
    background: #0d1117 !important;
    color: #e6edf3 !important;
}

/* Remove stock keyboard/background image */
#brickwall,
#background {
    background: #0d1117 !important;
    background-image: none !important;
}

#blur {
    filter: none !important;
    -webkit-filter: none !important;
    background: #0d1117 !important;
}

/* Login card */
#loginBox {
    width: 420px !important;
    padding: 28px 32px 24px !important;

    background: #111a24 !important;
    border: 1px solid #34495e !important;
    border-radius: 8px !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.55),
        0 0 0 1px rgba(88,166,255,.06) !important;
}

/* Stock login.css creates the translucent white card here */
#loginBox:after {
    background: #111a24 !important;
    background-color: #111a24 !important;
    border: none !important;
    box-shadow: none !important;
}

/* =========================================================
   LOGO
   Keep isolated because WTG logo may change later
   ========================================================= */

#logo {
    margin: 0 0 12px 0 !important;
}

#logo a {
    height: 105px !important;
}

#logo a img {
    width: 300px !important;
    max-width: 300px !important;
    max-height: 95px !important;
    height: auto !important;
    filter: none !important;
}

/* =========================================================
   AUTH MESSAGE
   ========================================================= */

#login-message {
    color: #e6edf3 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 10px 0 20px !important;
}

.banner,
.banner small {
    color: #8b9caf !important;
}

/* =========================================================
   FORM
   ========================================================= */

#login {
    width: 260px !important;
}

#login fieldset {
    margin: 0 !important;
}

#login input[type="text"],
#login input[type="password"],
#login input[type="email"],
#login input[type="number"] {
    width: 100% !important;

    background: #0f1720 !important;
    background-color: #0f1720 !important;

    color: #e6edf3 !important;

    border: 1px solid #3b4d60 !important;
    border-radius: 4px !important;

    padding: 8px 10px !important;
    margin-bottom: 14px !important;

    box-shadow: none !important;
}

#login input::placeholder {
    color: #72869a !important;
    opacity: 1 !important;
}

#login input:focus {
    border-color: #2f81f7 !important;
    box-shadow: 0 0 0 2px rgba(47,129,247,.18) !important;
    outline: none !important;
}

/* =========================================================
   LOGIN / VERIFY BUTTON
   ========================================================= */

#login button[type="submit"],
#login .submit.button {
    background: #1f6feb !important;
    background-color: #1f6feb !important;

    color: #ffffff !important;

    border: 1px solid #2f81f7 !important;
    border-radius: 4px !important;

    box-shadow: none !important;

    height: 32px !important;
    line-height: 28px !important;
    padding: 1px 14px !important;
}

#login button[type="submit"]:hover,
#login .submit.button:hover {
    background: #2f81f7 !important;
    background-color: #2f81f7 !important;
    color: #ffffff !important;
}

/* Forgot password */
#reset-link {
    color: #58a6ff !important;
}

#reset-link:hover {
    color: #79c0ff !important;
}

/* =========================================================
   EXTERNAL AUTH
   ========================================================= */

hr {
    border-bottom-color: #34495e !important;
}

.external-auth-box {
    background: #16212c !important;
    border: 1px solid #34495e !important;
}

.external-auth-icon {
    color: #e6edf3 !important;
    border-right-color: #34495e !important;
}

.external-auth-name {
    color: #e6edf3 !important;
}

/* =========================================================
   COPYRIGHT
   ========================================================= */

#company {
    color: #8b9caf !important;
}

#company .content {
    background: #111a24 !important;
    color: #8b9caf !important;

    border: 1px solid #34495e !important;
    border-radius: 6px !important;

    box-shadow: none !important;
    text-shadow: none !important;

    padding: 3px 14px !important;
}

/* Powered by osTicket */
#poweredBy {
    background: #111a24 !important;
    color: #8b9caf !important;

    border: 1px solid #34495e !important;

    box-shadow: none !important;
    text-shadow: none !important;
}

/* Login AJAX verification popup */
#loading.dialog {
    background: #16212c !important;
    color: #e6edf3 !important;

    border: 1px solid #34495e !important;
}

/* Dynamic 2FA form */
#login label,
#login .field-label,
#login .required {
    color: #e6edf3 !important;
}

/* END WTG STAFF LOGIN THEME */

/* =========================================================
   WTG STAFF LOGIN - CONFIGURED BACKDROP
   Uses Admin Panel selected login backdrop
   Applies to normal login + 2FA login
   ========================================================= */

#brickwall {
    background-image:
        linear-gradient(
            rgba(13,17,23,0.58),
            rgba(13,17,23,0.68)
        ),
        url(../logo.php?backdrop) !important;

    background-color: #0d1117 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/*
 * Keep the login-card internal background dark.
 * We only want the configured image behind the card.
 */
#background {
    background: #111a24 !important;
    background-image: none !important;
}

#blur {
    background: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* END WTG STAFF LOGIN BACKDROP */