/* Styles for Login.aspx. Extracted/authored to comply with the Content-Security-Policy
   (style-src has no 'unsafe-inline'). Do not re-add inline style="" attributes.
   The full-screen background is the Bing "picture of the day", applied by Login.page.js
   (document.body.style.backgroundImage); the gradient below is the fallback. */

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    background: linear-gradient(135deg, #7b4b8a 0%, #b06a7a 45%, #d98f5f 100%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.has-bg {
    background-color: #333;
}

/* Full-screen layout; login panel anchored to the right (matches the design). */
.login-page {
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* padding: 40px 6% 40px 20px;*/
    padding: 1% 8% 1% 1%;
}

/* Translucent dark panel on the right. */
.login-box {

    width: 30%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 28px 63px 34px;
    background-color: rgba(30, 25, 28, 0.55);
    color: #ffffff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    padding-bottom: 380px;
    padding-top: 190px;
}

.login-logo {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 3px;
    margin-bottom: 18px;
}

.login-logo img {
    display: block;
    height: 80px;
    width: auto;
}

.login-welcome {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 24px;
    color: #f2f2f2;
    text-align: center;
}

.login-field {
    margin-bottom: 16px;
}

.login-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0 none;
    background-color: rgba(240, 240, 240, 0.92);
    color: #333333;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
}

.login-input:focus {
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(213, 43, 30, 0.4);
}

.login-field-label {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #e2e2e2;
}

.login-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0 none;
    background-color: #d52b1e;
    color: #ffffff;
    padding: 13px 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.15s ease-in-out;
}

.login-button:hover {
    background-color: #b8241a;
}

.login-links {
    margin-top: 18px;
    font-size: 13px;
    color: #f0f0f0;
}

.login-link-row {
    margin-bottom: 4px;
    font-weight: 600;
}

.login-links a {
    color: #f2a13a;
    text-decoration: none;
    font-weight: 600;
}

.login-links a:hover {
    text-decoration: underline;
}

.login-msg {
    margin-top: 12px;
}

/* Utilities */
.u-hidden {
    display: none;
}

.u-text-left {
    text-align: left;
}

.ft-cpr {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    text-align: center;
    color: #f5f5f5;
    background-color: rgba(0, 0, 0, 0.35);
    padding: 5px 10px 3px;
    line-height: 18px;
    font-size: 12px;
}

/* CSP-clean replacement for the former CustomValidator ForeColor="Red" inline style. */
.error-msg {
    color: #e91e3e;
    font-size: 12px;
    font-family: Tahoma, Arial, sans-serif;
}

/* ------------------------------------------------------------------------------------
   User-selection modal. The dialog is created by jQuery UI in this (Login) page's DOM,
   but no jQuery UI theme stylesheet is loaded, so the chrome is styled here to match the
   design: red title bar with a white close (x) and a white body hosting the iframe. */
.ui-dialog {
    position: absolute;
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    padding: 0;
    z-index: 1001;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.ui-dialog .ui-dialog-titlebar {
    position: relative;
    background: #d52b1e;
    color: #ffffff;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 14px;
}

.ui-dialog .ui-dialog-title {
    display: block;
    margin-right: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -11px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0 none;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    overflow: hidden;
    text-indent: -9999px;
}

.ui-dialog .ui-dialog-titlebar-close:after {
    content: "\00d7";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    text-indent: 0;
    font-size: 14px;
    color: #ffffff;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
    display: none;
}

.ui-dialog .ui-dialog-content {
    padding: 0;
    background: #ffffff;
}

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.3;
    z-index: 1000;
}