@font-face {
    font-family: 'SegoeUIVF';
    src: url('/scripts/login/fonts/SegoeUIVF.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, SegoeUIVF, "Segoe UI", Roboto, Arial, sans-serif;
}

html {
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
}

body {
    font: 13px/20px -apple-system, BlinkMacSystemFont, SegoeUIVF, "Segoe UI", Roboto, Arial, sans-serif;
    margin: 0;
    width: 100vw;
    overflow-x: hidden;
    min-height: 100vh;
}

#form1 {
    width: 100%;
}

/* Make the page a column so footer can stick to bottom when content is short */
#form1 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    margin: 50px auto;
    width: 640px;
}

.login {
    position: relative;
    margin: 0 auto;
    padding: 20px 20px 20px;
    width: 310px;
}

.login p.submit {
    text-align: center;
}

.login-help {
    margin: 20px 0;
    font-size: 11px;
    color: white;
    text-align: center;
    text-shadow: 0 1px #2a85a1;
}

    .login-help a {
        color: #cce7fa;
        text-decoration: none;
    }

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

/* Placeholder styling (cross-browser) */
::-webkit-input-placeholder { color: #ccc; font-size: 14px; }
:-ms-input-placeholder { font-size: 14px; }
::-ms-input-placeholder { font-size: 14px; }
:-moz-placeholder { color: #c9c9c9 !important; font-size: 14px; }
::placeholder { font-size: 14px; }
.container {
    margin: 50px auto;
    width: 640px;
}

.login:before {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    z-index: -1;
}

.login h1 {
    margin: -20px -20px 21px;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.login p {
    margin: 20px 0 0;
}

    .login p:first-child {
        margin-top: 0;
    }

.login input[type=text], .login input[type=password] {
    width: 278px;
}

.login p.remember_me {
    float: left;
    line-height: 31px;
}

    .login p.remember_me label {
        font-size: 12px;
        color: #777;
        cursor: pointer;
    }

    .login p.remember_me input {
        position: relative;
        bottom: 1px;
        margin-right: 4px;
        vertical-align: middle;
    }

input {
    font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
    font-size: 14px;
}

    /*input[type=text], input[type=password] {*/
    /*margin: 5px;*/
    /*padding: 0 10px;
        width: 250px;
        height: 34px;
        color: #404040;
        background: white;
        border: 2px solid;
        border-color: gray;
    }*/

    input[type=text]:focus, input[type=password]:focus {
        border-color: gray;
    }

    input[type=submit] {
        color: #fff;
        background: #3388FF;
        display: flex;
        width: var(--width-xs, 384px);
        padding: var(--spacing-md, 10px) var(--spacing-lg, 12px);
        justify-content: center;
        align-items: center;
        gap: var(--spacing-xs, 4px);
        border-radius: var(--radius-sm, 6px);
        border: 1px solid var(--border-border-disabled, #D1D1D6);
        /*background: var(--background-bg-disabled, #F4F4F5);*/
        box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    }

        input[type=submit]:hover {
            background: #005a9e;
            /*border: 0px solid;*/
            border-color: #b4ccce #b3c0c8 #9eb9c2;
            cursor: pointer;
        }

        input[type=submit]:active {
            background: #005a9e;
            /* border: 0px solid; */
            border-color: #b4ccce #b3c0c8 #9eb9c2;
        }

        input[type=submit]:disabled {
            border-radius: var(--radius-sm, 6px);
            border: 1px solid var(--border-border-disabled, #D1D1D6);
            background: var(--background-bg-disabled, #F4F4F5);
            box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
            color: var(--text-text-disabled, #A0A0AB);
        }

    input[type=checkbox] {
        border: 1px solid #c0c0c0;
        margin: 0 0.1em 0 0;
        padding: 0;
        font-size: 16px;
        line-height: 1em;
        width: 1.25em;
        height: 1.25em;
        background: #fff;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ededed), to(#fbfbfb));
        -webkit-appearance: none;
        -webkit-box-shadow: 1px 1px 1px #fff;
        -webkit-border-radius: 0.25em;
        vertical-align: text-top;
        display: inline-block;
    }

        input[type=checkbox]:checked::after {
            content: "✔";
            display: block;
            text-align: center;
            font-size: 16px;
            height: 16px;
            line-height: 18px;
        }

.loginButton {
    text-align: center;
    padding: 8px 18px;
    height: 32px;
    width: 180px;
    font-size: 14px;
    color: #fff;
    background: #3388FF;
    border: 0px solid;
    border-color: #b4ccce #b3c0c8 #9eb9c2;
    outline: 0;
    text-decoration: none;
}

    .loginButton:hover {
        background: #005a9e;
        border: 0px solid;
        border-color: #b4ccce #b3c0c8 #9eb9c2;
        cursor: pointer;
    }

    .loginButton:active {
        background: #005a9e;
        border: 0px solid;
        border-color: #b4ccce #b3c0c8 #9eb9c2;
    }

.logoImage {
    display: flex;
    max-width: 150px;
    height: 32px;
    padding: 0.149px 0;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.language select {
    display: flex;
    padding: var(--spacing-md, 8px) var(--spacing-lg, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border-border-primary, #D1D1D6);
    background: var(--background-bg-primary, #FFF);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.securityLabel {
    font-weight: bold;
    font-size: 15px;
}

.link {
    color: darkblue;
    cursor: default;
}

.explanation {
    visibility: hidden;
    display: flex !important;
    padding: var(--spacing-lg, 12px);
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    border-radius: var(--radius-md, 8px);
    background: var(--background-bg-tertiary, #F4F4F5);
    position: absolute;
    top: 50%;
    left: 150%;
    /*white-space: pre;*/
    transform: translateY(-50%);
    color: var(--text-text-tertiary-600, #51525C);
    /* font-family: "Segoe UI Variable"; */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    white-space: pre-wrap;
    max-width: 500px;
    word-break: break-word;
    width: max-content;
}

.info:hover .explanation {
    visibility: visible;
    opacity: 1;
}

.logo-div {
    width: 100%;
    height: 100%;
    white-space: nowrap;
    text-align: center;
}

.languages-div {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

.powered-div {
    padding-top: 10px;
    text-align: center;
}

.red {
    color: red;
}

.font-14 {
    font-size: 14px;
}

.loginAzureADButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-text-tertiary-600, #51525C);
    background: var(--background-bg-primary, #FFF);
    width: 384px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #D1D1D6;
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none; /* important for LinkButton */
}

.ms-icon {
    width: 16px;
    height: 16px;
    /*background: url('/images/microsoft.png') no-repeat center;*/
    background-image: url('images/microsoft.png') !important;
    background-size: contain;
}

/* Hover / Active states: only change background color */
.loginAzureADButton {
    cursor: pointer !important;
    transition: background-color 180ms ease !important;
}

.loginAzureADButton:hover {
    background-color: rgba(60,120,220,0.04) !important; /* subtle bluish hover */
}

.loginAzureADButton:active {
    background-color: rgba(60,120,220,0.08) !important;
}

.loginAzureADButton:focus-visible {
    outline: 3px solid rgba(37,99,235,0.18) !important;
    outline-offset: 2px !important;
}

.center {
    text-align: center;
}

/* Header */
.top-bar {
    display: flex;
    width: 100%;
    padding: var(--spacing-2xl, 20px) var(--spacing-7xl, 64px);
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-border-secondary, #E4E4E7);
    /* background: var(--background-bg-primary, #FFF); */
}

.logo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 600;
}

.logo-badge {
    background: #2563eb;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 14px;
}

.logo-text {
    color: #2563eb;
}

.language {
    /*  border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;*/
}

/* Main layout */
.login-wrapper {
    /* allow flex parent to control height */
    flex: 1 1 auto;
    min-height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.login-panel {
    width: 100%;
    max-width: 385px;
    /* background: #ffffff; */
    margin-bottom: 0;
}

h1 {
    color: var(--text-text-primary-900, #1A1A1E);
    /* Display sm/Semibold */
    /*font-family: "Segoe UI Variable";*/
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 38px; /* 126.667% */
}

.subtitle {
    color: var(--text-text-tertiary-600, #51525C);
    /* Text md/Regular */
    /*font-family: "Segoe UI Variable";*/
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    align-self: stretch;
}
.subtitle2 {
    color: var(--text-text-tertiary-600, #51525C);
    /* Text md/Regular */
    /*font-family: "Segoe UI Variable";*/
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    align-self: stretch;
    margin-bottom: 32px;
}

/* Radio section */
.section-label {
    color: var(--text-text-secondary-700, #3F3F46);
    /* Text sm/Semibold */
    /*font-family: "Segoe UI Variable";*/
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
}

.radio-box {
    display: flex;
    padding: var(--spacing-3xl, 24px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2xl, 20px);
    align-self: stretch;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border-border-primary, #D1D1D6);
    /* Shadows/shadow-xs */
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    margin-bottom: 24px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    /*margin-bottom: 12px;*/
}

    .radio-option:last-child {
        margin-bottom: 0;
    }

    .radio-option input {
        accent-color: #2563eb;
    }

.info {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #9ca3af;
    color: #6b7280;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    cursor: pointer;
    position: relative;
}

/* Fields  */
.field {
    margin-bottom: 20px;
}

    .field label {
        color: var(--text-text-secondary-700, #3F3F46);
        /* Text sm/Semibold */
        /*font-family: "Segoe UI Variable";*/
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px; /* 142.857% */
    }

.required {
    color: var(--text-text-error-primary, #D92D20);
    /* Text sm/Semibold */
    /*font-family: "Segoe UI Variable";*/
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    display: flex;
    padding: var(--spacing-md, 10px) var(--spacing-lg, 12px);
    align-items: center;
    gap: var(--spacing-md, 8px);
    align-self: stretch;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border-border-primary, #D1D1D6);
    background: var(--background-bg-primary, #FFF);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    margin-top: 4px;
}

input::placeholder {
    color: #9ca3af;
    font-size: 14px;
}

/* Button */
.login-btn {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    background: #f3f4f6;
    color: #9ca3af;
    font-size: 15px;
}

/* Loading / disabled look for login button */
.login-btn.loading,
input.login-btn.loading {
    background-color: #f3f4f6 !important;
    color: #8d8d8d !important;
    border: 1px solid #e5e7eb !important;
    cursor: default !important;
    pointer-events: none !important;
    display: inline-block !important;
    text-align: center !important;
    padding: 10px !important;
    border-radius: 6px !important;
    /* position the icon just left of the centered text */
    padding-left: 0 !important;
    background-repeat: no-repeat !important;
    /* background-position: calc(50% - 80px) center !important;
    background-size: 20px 20px !important; */
    /* inline SVG hourglass (gray) */
    /* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'><path fill='%238d8d8d' d='M6 2h12v2l-4 4 4 4v2H6v-2l4-4-4-4V2z'/></svg>"); */
}

/* ensure keyboard focus doesn't show pointer when loading */
.login-btn.loading:focus,
input.login-btn.loading:focus {
    outline: none;
}

/* Footer */
.footer {
    display: flex;
    width: 100%;
    padding: var(--spacing-3xl, 24px) var(--spacing-8xl, 80px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    border-top: 1px solid var(--border-border-secondary, #E4E4E7);
    /* ensure footer doesn't push content on short pages */
    flex-shrink: 0;
}

    .footer a {
        color: #2563eb;
        text-decoration: none;
    }

.section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    align-self: stretch;
    margin-top: 40px;
}

.footer-text {
    margin: 0;
    color: var(--text-text-tertiary-600, #51525C);
    /* font-family: "Segoe UI Variable"; */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.input-error {
    color: var(--text-text-error-primary, #D92D20);
    /* Text sm/Regular */
    /*font-family: "Segoe UI Variable";*/
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

/* Ensure ASP.NET validation messages use the error color */
.field-validation-error,
span[data-val-controltovalidate],
span[data-valmsg-for],
.validation-summary-errors {
    color: var(--text-text-error-primary, #D92D20) !important;
}

.input-invalid {
    border: 1px solid var(--border-border-error, #FDA29B) !important;
}

.validation-summary-errors {
    color: var(--text-text-error-primary, #D92D20);
    /* Text sm/Regular */
    /*font-family: "Segoe UI Variable";*/
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

/*test*/
.custom-select {
    position: relative;
    font-family: Arial;
}

    .custom-select select {
        display: none; /*hide original SELECT element:*/
    }

.select-selected {
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border-border-primary, #D1D1D6);
    background: var(--background-bg-primary, #FFF);
    /* Shadows/shadow-xs */
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    display: flex;
    padding: var(--spacing-md, 10px) var(--spacing-lg, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    width: 160px;
}

    /*style the arrow inside the select element:*/
    .select-selected:after {
        position: absolute;
        content: "";
        top: 14px;
        right: 10px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-color: #fff transparent transparent transparent;
    }

    /*point the arrow upwards when the select box is open (active):*/
    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #fff transparent;
        top: 7px;
    }

/*style the items (options), including the selected item:*/
.select-items div, .select-selected {
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;
    color: var(--text-text-secondary-700, #3F3F46);
    /* Text sm/Regular */

    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

/*style items (options):*/
.select-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border-border-secondary, #E4E4E7);
    background: var(--background-bg-primary, #FFF);
    /* Shadows/shadow-lg */
    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
}

/*hide the items when the select box is closed:*/
.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: #F0F7FF; /* Light blue background */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M4.53033 12.9697C4.23744 12.6768 3.76256 12.6768 3.46967 12.9697C3.17678 13.2626 3.17678 13.7374 3.46967 14.0303L7.96967 18.5303C8.26256 18.8232 8.73744 18.8232 9.03033 18.5303L20.0303 7.53033C20.3232 7.23744 20.3232 6.76256 20.0303 6.46967C19.7374 6.17678 19.2626 6.17678 18.9697 6.46967L8.5 16.9393L4.53033 12.9697Z' fill='%233388FF'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center; /* Aligns SVG to the right with 12px margin */
    background-size: 20px; /* Adjust size of the checkmark */
    padding-right: 40px !important; /* Ensure text doesn't overlap the icon */
}

.select-arrow-active svg {
    transform: rotate(180deg);
}

.select-items div, .select-selected div {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    align-content: stretch;
    gap: 10px;
}
.select-selected div {
    flex-direction: row!important;
}

@media (max-width: 900px) {
    .top-bar {
        padding: 16px 24px;
    }

    .login-wrapper {
        min-height: auto;
        padding: 24px 16px 48px;
    }

    .login-panel {
        /* max-width: 480px; */
        margin-bottom: 40px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* ensure login button matches input widths on tablet */
    .login-panel .login-btn,
    .login-panel .loginAzureADButton,
    .login-panel input[type=submit] {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    .radio-box {
        padding: 16px;
    }

    .explanation {
        left: 0;
        top: 100%;
        transform: translateY(12px);
        width: min(280px, 90vw);
        white-space: normal;
        z-index: 2;
    }

    /* ensure tooltip centers under the icon on narrow screens rather than flowing off-screen */
    .info {
        position: relative;
        overflow: visible;
    }
    .info .explanation {
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(12px);
        width: min(320px, 92vw);
        max-width: 92vw;
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    }

    .footer {
        padding: 20px 24px;
    }
}

@media (max-width: 640px) {
    .top-bar {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .logoImage {
        max-width: 140px;
        height: auto;
    }

    .language,
    .custom-select {
        width: 100%;
    }

    .select-selected {
        width: 100%;
        justify-content: space-between;
    }

    .login-panel {
        max-width: 100%;
        width: 100%;
        margin: 0 auto 24px;
    }

    h1 {
        font-size: 24px;
        line-height: 32px;
    }

    .subtitle {
        font-size: 14px;
        line-height: 22px;
    }

    .subtitle2 {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 32px;
    }

    .field {
        margin-bottom: 16px;
    }

    input[type="text"],
    input[type="password"],
    .login-btn,
    .loginAzureADButton,
    input[type=submit] {
        width: 100%;
    }

    .radio-option {
        align-items: flex-start;
        gap: 8px;
    }

    .info {
        margin-top: 2px;
    }

    .footer {
        padding: 12px;
    }

    .footer-text {
        text-align: center;
    }
}

@media (max-width: 420px) {
    .top-bar {
        padding: 10px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .logoImage {
        max-width: 100px;
        height: auto;
    }

    /* keep language select inline with logo */
    .language,
    .custom-select {
        width: auto;
        max-width: 170px;
        flex: 0 0 auto;
    }

    .select-selected {
        width: auto;
        min-width: 110px;
    }

    .login-wrapper {
        padding: 16px 8px 32px;
    }

    .radio-box {
        gap: 16px;
    }
}