/* IPS Systems public theme, versioned to invalidate legacy browser caches. */
@import url("https://fonts.googleapis.com/css2?family=Michroma&family=Poppins:wght@300;400;500;600;700&display=swap");

:root {
    --ips-black: #131211;
    --ips-panel: #1a1918;
    --ips-ink: #292929;
    --ips-warm: #f3f1ec;
    --ips-paper: #fffdf8;
    --ips-muted: #737373;
    --ips-line: #d8d3ca;
    --ips-orange: #f39a00;
}

html, body, input, button, select, textarea {
    font-family: Poppins, "Segoe UI", Arial, sans-serif;
}

body.login {
    min-height: 100vh;
    color: var(--ips-ink);
    background:
        radial-gradient(circle at 18% 8%, rgba(243, 154, 0, .16) 0, transparent 34rem),
        linear-gradient(145deg, #f8f6f1, var(--ips-warm));
}

body.login header.public-brandbar {
    display: flex;
    min-height: 74px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px max(22px, calc((100vw - 1120px) / 2));
    color: #fff;
    background: rgba(19, 18, 17, .98);
    border-top: 4px solid var(--ips-orange);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.public-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
}

.public-brand:hover,
.public-brand:focus { color: #fff; text-decoration: none; }
.public-brand img { width: 46px; height: 46px; object-fit: contain; }
.public-brand span { display: flex; flex-direction: column; line-height: 1.15; }
.public-brand strong,
#login-wrapper h4 {
    font-family: Michroma, Arial, sans-serif;
    font-weight: 400;
}
.public-brand strong { color: #d5d5d5; font-size: 13px; letter-spacing: .02em; }
.public-brand small { margin-top: 5px; color: var(--ips-orange); font-size: 9px; letter-spacing: .08em; }
.public-brandbar > b { color: #bcb8b1; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }

body.login #body { margin-top: 68px; }
.public-language-switcher { color: var(--ips-muted); }
.public-language-switcher a { color: #5f5b54; }
.public-language-switcher a:hover,
.public-language-switcher a:focus,
.public-language-switcher a.active { color: #a96500; }

#login-wrapper.well {
    overflow: hidden;
    width: min(420px, 100%);
    padding: 0 34px 34px;
    background: var(--ips-paper);
    border: 1px solid var(--ips-line);
    border-radius: 4px;
    box-shadow: 0 24px 70px rgba(39, 30, 16, .1);
}

#login-wrapper h4 {
    margin: 0 -34px 30px;
    padding: 25px 34px;
    color: #ece9e3;
    background: linear-gradient(135deg, #191816, #0d0c0b);
    border-bottom: 2px solid var(--ips-orange);
    font-size: 18px;
    line-height: 1.5;
}

#login-wrapper .input-group { width: 100%; margin-top: 16px; }
#login-wrapper .input-group-addon {
    min-width: 44px;
    color: #9b620d;
    background: #f3eee5;
    border-color: #d9d1c6;
    border-radius: 3px 0 0 3px;
}
#login-wrapper .form-control {
    height: 46px;
    color: var(--ips-ink);
    background: #fff;
    border-color: #d9d1c6;
    border-radius: 0 3px 3px 0;
    box-shadow: none;
}
#login-wrapper .form-control:focus {
    border-color: var(--ips-orange);
    box-shadow: 0 0 0 3px rgba(243, 154, 0, .14);
}
#login-wrapper .input-group:last-child { margin-top: 26px; }
#login-wrapper #submit {
    width: 100%;
    min-height: 46px;
    color: #171717;
    background: linear-gradient(135deg, #ffad00, #dc8200);
    border: 0;
    border-radius: 3px;
    font-family: Poppins, "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    box-shadow: none;
}
#login-wrapper #submit:hover,
#login-wrapper #submit:focus { background: linear-gradient(135deg, #ffba2e, #ee9200); }

#login-footer { color: #6f6a62; }
#login-footer a { color: #a96500; }
#main-bottom-footer { position: static; margin-top: 38px; }

@media (max-width: 560px) {
    body.login header.public-brandbar { min-height: 66px; padding-inline: 16px; }
    .public-brand img { width: 40px; height: 40px; }
    .public-brand small { display: none; }
    .public-brandbar > b { font-size: 9px; text-align: right; }
    body.login #body { margin-top: 42px; }
    #body .container { padding-inline: 14px; }
    #login-wrapper.well { padding-inline: 24px; }
    #login-wrapper h4 { margin-inline: -24px; padding-inline: 24px; }
    .public-language-switcher { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}