* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    color: #000000;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.cover {
    background:
            linear-gradient(169deg,
            rgba(11, 77, 199, 0.8) 12.66%,
            rgba(62, 184, 216, 0.24) 86.73%,
            rgba(0, 221, 165, 0.24) 101.97%)
            no-repeat local center center,
            url(/adfs/portal/illustration/illustration.jpg?id=44D2EE26CE4285ABEA3A8A930AAA74DB8AF38E14A4EE586EA30DF0B320313447&rp=8c8d5016-7d08-ef11-8bf7-00155dc03802)
            no-repeat -12px center/auto 100%;
    width: 100%;
    min-height: 550px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

#content {
    background-color: rgb(0, 85, 152) !important;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 !important;
    min-width: 876px !important;
    min-height: 550px;
}

#content main {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: white !important;
    width: 100%;
}

.passwordIcon {
    color: #5E6784;
    display: block;
    line-height: 0;
    position: absolute;
    text-align: center;
    z-index: 2;
    cursor: pointer;
    left: unset;
    pointer-events: all;
    right: 50px;
    transition: .2s;
}

#passwordInput:focus-visible, #userNameInput:focus-visible {
    outline: 3px solid #5177ce;
}

#formsAuthenticationArea {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.errorUsernamePaginated {
    padding-left: 54px;
}

.successIcon {
    color: #00956c;
}

#validationIcons {
    margin-top: 4px;
    position: absolute;
    right: 15%;
}

.d-none {
    display: none !important;
}

.passwordIcon svg {
    width: 16px;
}

body {
    font-size: 0.9em;
}

/*#noScript {*/
/*    margin: 16px;*/
/*    color: Black;*/
/*}*/

/*:lang(en-GB) {*/
/*    quotes: '\2018' '\2019' '\201C' '\201D';*/
/*}*/

/*:lang(zh) {*/
/*    font-family: 微软雅黑;*/
/*}*/

/*@-ms-viewport {*/
/*    width: device-width;*/
/*}*/

/*@-moz-viewport {*/
/*    width: device-width;*/
/*}*/

/*@-o-viewport {*/
/*    width: device-width;*/
/*}*/

/*@-webkit-viewport {*/
/*    width: device-width;*/
/*}*/

/*@viewport {*/
/*    width: device-width;*/
/*}*/

/* Theme layout styles */

#fullPage {
    position: absolute;
    bottom: 0;
    top: 0;
    width: 100%;
}

#brandingWrapper {
    background-color: #4488dd;
    height: 100%;
    width: 100%;
}

#branding {
    /* A background image will be added to the #branding element at run-time once the illustration image is configured in the theme. 
       Recommended image dimensions: 1420x1200 pixels, JPG or PNG, 200 kB average, 500 kB maximum. */
    background-color: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

#contentWrapper {
    background-color: transparent;
    height: 0;
    width: 100%;
}

#content {
    /* Set content to center */
    position: fixed;
    top: 51%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: #fff;

    /* Set size margins */
    margin-bottom: 28px;
    margin-left: auto;
    margin-right: auto;
    min-height: 264px;
    min-width: 320px;
    max-width: 412px;
    width: 360px;
    height: auto;
    padding: 36px;

    /* Add drop shadow */
    box-shadow: 0 10px 30px 2px rgba(49, 49, 49, .5);
    border: 0;
    border-radius: 5px;
}

#header {
    position: absolute;
    left: 23px;
    top: 24px;
    font-size: 2em;
    font-weight: lighter;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0 0 0 0;
    margin: 0;
    height: 36px;
    width: 338px;
    background-color: transparent;
}

#header img {
    width: 128px;
}

#loginFormPaginated {
    margin-top: 15px
}

.loginIcons {
    color: #5E6784;
    display: block;
    left: 54px;
    line-height: 0;
    pointer-events: none;
    position: absolute;
    text-align: center;
    top: 49%;
    transform: translateY(-50%);
    z-index: 2;
}

#passwordReminder {
    display: flex;
    justify-content: center;
}

#introduction {
    padding-left: 36px;
    padding-right: 27px;
}

#loginMessage, #mfaHeader {
    box-sizing: border-box;
    color: #373e57;
    direction: ltr;
    display: block;
    font-weight: 700;
    font-size: 24px;
    height: auto;
    line-height: 28px;
    margin: 16px -2px 12px;
    padding: 0;
    text-align: center;
    text-size-adjust: 100%;
    width: 350px;
    background-color: transparent;
}

.system {
    width: 350px;
    color: #5e6784;
    text-align: center;
    font-size: 16px;
    padding-bottom: 20px;
}

#loginForm {
    width: 350px;
}

#workArea, #header {
    word-wrap: break-word;
}

#workArea {
    padding-left: 48px;
    padding-right: 36px;
    margin-bottom: 4%;
    margin-top: 135px;
    background-color: transparent;
}

#footerPlaceholder {
    height: 0;
}

#footerLinks {
    text-align: center;
}

.pageLink.footerLink {
    color: #5177ce;
}

#copyright {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    direction: ltr;
    display: none; /*inline-block;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    height: 28px;
    line-height: 28px;
    margin-left: 8px;
    margin-right: 8px;
    text-align: left;
    text-size-adjust: 100%;
}

#userNameArea, #passwordArea {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    color: rgb(38, 38, 38);
    direction: ltr;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: normal;
    line-height: 20px;
    margin-left: 0;
    text-align: left;
    text-size-adjust: 100%;
    width: 100%;
    margin-bottom: 12px;
}

#updatePasswordForm #submitButton, #cancelButton {
    width: 48%;
}

#oldPasswordArea, #newPasswordArea {
    margin-bottom: 7px;
}

#errorMessage {
    margin-top: 5px;
}

.pageLink {
    box-sizing: border-box;
    direction: ltr;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 28px;
    line-height: 28px;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    text-size-adjust: 100%;
    text-decoration: none;
}

#footerLinks > div {
    top: 90.5%;
    width: 358px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.divider {
    font-size: 18px;
    padding: 0 8px;
    color: #5177ce;
    opacity: 0.7;
}

#home, #helpDesk {
    margin-top: 3px;
}

#home:hover, #helpDesk:hover, #introduction a:hover, #differentVerificationOption:hover, #viewDetailsLink:hover, #linksDiv a:hover{
    text-decoration: underline;
    text-underline-offset: 1.5px;
}

.clear {
    clear: both;
}

.float {
    float: left;
}

.floatReverse {
    float: right;
}

.indent {
    margin-left: 16px;
}

.indentNonCollapsible {
    padding-left: 16px;
}

.hidden {
    display: none;
}

.notHidden {
    display: inherit;
}

.error {
    color: #e81123;
    margin-top: 0;
    margin-bottom: 12px !important;
    width: 282px;
}

.actionLink {
    margin-top: 5px;
    margin-bottom: 8px;
    display: block;
}

a {
    color: #5177ce;
    text-decoration: none;
    background-color: transparent;
    word-wrap: normal;
}

ul {
    list-style-type: disc;
}

ul, ol, dd {
    padding: 0 0 0 16px;
}

h1, h2, h3, h4, h5, label {
    margin-bottom: 8px;
}

.submitMargin {
    margin-top: 18px;
    margin-bottom: 18px;
}

.topFieldMargin {
    margin-top: 8px;
}

.fieldMargin {
    margin-bottom: 8px;
}

.groupMargin {
    margin-bottom: 0;
}

.sectionMargin {
    margin-bottom: 64px;
}

.block {
    display: block;
}

#errorTextPassword {
    padding-left: 27px;
    padding-right: 27px;
}

.autoWidth {
    width: auto;
}

.fullWidth {
    width: 282px;
}

.fullWidthIndent {
    width: 326px;
}

.smallTopSpacing {
    margin-top: 15px;
}

.mediumTopSpacing {
    margin-top: 25px;
}

.largeTopSpacing {
    margin-top: 25px;
}

.smallBottomSpacing {
    margin-bottom: 5px;
}

.mediumBottomSpacing {
    margin-bottom: 15px;
}

.largeBottomSpacing {
    margin-bottom: 25px;
}

#openingMessage {
    margin-bottom: 4px;
}
input::placeholder {
    color: #a4a8b9;
}

input::-webkit-input-placeholder {
    color: #a4a8b9;
}
input::-moz-placeholder {
    color: #a4a8b9;
}
input:-ms-input-placeholder {
    color: #a4a8b9;
}
input::-ms-input-placeholder {
    color: #a4a8b9;
}

input {
    color: #373e57 !important;
    max-width: 100%;
    font-family: inherit;
    margin-top: 0;
    margin-bottom: 0;
}

input[type="radio"], input[type="checkbox"] {
    vertical-align: middle;
    margin-bottom: 0;
}

.errorText {
    display: inline-block;
}

.authOptionsError {
    display: inline-block;
}

.authOptionsErrorText {
    padding-bottom: 20px;
    display: inline-block;
}

.error {
    position: relative;
}

#kmsiArea {
    padding-bottom: 16px;
}

#kmsiArea.kmsiAreaPaginated {
    padding-top: 0px;
    padding-bottom: 12px;
    padding-left: 36px;
}

.authOptionsTitlePaginated {
    font-weight: normal;
    font-size: 1.25em;
    font-family: Arial, Helvetica, sans-serif;
}

.buttonAreaPaginated {
    padding: 0 0 55px 0;
    position: relative;
}

.bannerContainer {
    display: flex;
    align-items: center;
    padding-left: 48px;
    padding-bottom: 12px;
}

.identityBanner {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.09em;
    padding-left: 36px;
}

.back {
    position: absolute;
    color: #373e57;
    display: flex;
    cursor: pointer;
    transition: left .5s ease;
    left: 48px;
}

.back:hover {
    left: 44px;
}

#optionIcon {
    float: left;
}

.optionButtonContainer:hover {
    background: #f4f4f4;
}

.optionButton {
    align-items: flex-start;
    box-sizing: border-box;
    cursor: pointer;
    direction: ltr;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-stretch: normal;
    font-style: normal;
    font-variant-caps: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-weight: normal;
    height: 36px;
    letter-spacing: normal;
    line-height: 18px;
    margin: 0 0 11px;
    max-width: 100%;
    min-width: 165px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 4px 12px;
    position: relative;
    text-indent: 0;
    text-overflow: ellipsis;
    text-rendering: auto;
    text-shadow: none;
    text-size-adjust: 100%;
    touch-action: manipulation;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    word-spacing: 0;
    writing-mode: horizontal-tb;
    -webkit-appearance: none;
    -webkit-rtl-ordering: logical;
    -webkit-border-image: none;
}

span.next {
    background-color: rgb(0, 221, 165);
    border: 0;
    border-radius: 5px;
    box-shadow: 6px 6px 5px -2px rgba(0, 0, 0, .17);
    -webkit-box-shadow: 6px 6px 5px -2px rgba(0, 0, 0, .17);
    -moz-box-shadow: 6px 6px 5px -2px rgba(0, 0, 0, .17);
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: 45px;
    margin-bottom: 12px;
    text-align: center;
    transition: .2s;
    width: 282px;
    line-height: 45px;
    cursor: pointer;

}

#nextButtonArea {
    display: flex;
    justify-content: center;
    align-items: center;
}

#passwordPage {
    position: relative;
}

#passwordPage #loginForm {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*span.submit.submitPaginated {*/
/*    height: 32px;*/
/*    line-height: 21px;*/
/*    min-width: 15px;*/
/*    bottom: -75px;*/
/*    width: 108px;*/
/*    float: right;*/
/*}*/

span.submit, input[type="submit"] {
    background-color: rgb(0, 221, 165);
    border: 0;
    border-radius: 5px;
    box-shadow: 6px 6px 5px -2px rgba(0, 0, 0, .17);
    -webkit-box-shadow: 6px 6px 5px -2px rgba(0, 0, 0, .17);
    -moz-box-shadow: 6px 6px 5px -2px rgba(0, 0, 0, .17);
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: 45px;
    margin-bottom: 12px;
    text-align: center;
    transition: .2s;
    width: 282px;
    line-height: 45px;
    cursor: pointer;
}

input[type="submit"]:hover, span.submit:hover, span.next:hover {
    opacity: 0.8;
}

input[type="submit"]:focus-visible, span.submit:focus-visible, span.next:focus-visible {
    outline: 3px solid #5177ce;
}

span.rightHalfWidthButton {
    width: 108px;
    float: right;
}

input.text.textPaginated {
    border-top: none;
    border-left: none;
    border-right: none;
}

input.text.textPaginated:focus {
    border: none;
}

input.text {
    background-color: #f2f6fb;
    border: none;
    background-image: none;
    border-bottom-color: rgba(0, 0, 0, 0.6);
    border-radius: 5px;
    box-sizing: border-box;
    color: rgb(38, 38, 38);
    cursor: auto;
    direction: ltr;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-stretch: normal;
    font-style: normal;
    font-variant-caps: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-weight: normal;
    height: 45px;
    letter-spacing: normal;
    line-height: 20px;
    margin: 0;
    max-width: 100%;
    outline: rgb(38, 38, 38) none 0;
    padding: 0 78px 0 50px;
    text-align: start;
    text-indent: 0;
    text-rendering: auto;
    text-shadow: none;
    text-size-adjust: 100%;
    text-transform: none;
    user-select: text;
    word-spacing: 0;
    writing-mode: horizontal-tb;
    -webkit-appearance: none;
    -webkit-locale: "en";
    -webkit-rtl-ordering: logical;
    -webkit-border-image: none;
}


select {
    height: 28px;
    min-width: 60px;
    max-width: 100%;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: none;
    padding: 2px;
    font-family: inherit;
}

h1, .giantText {
    font-size: 2.0em;
    font-weight: lighter;
}

h2, .bigText {
    font-size: 1.33em;
    font-weight: lighter;
}

h3, .normalText {
    font-size: 1.0em;
    font-weight: normal;
}

h4, .smallText {
    font-size: 0.9em;
    font-weight: normal;
}

h4 {
    font-size: 0.7em;
    font-weight: normal;
}

h5, .tinyText {
    font-size: 0.8em;
    font-weight: normal;
}

.hint {
    color: #999999;
}

.emphasis {
    font-weight: 700;
    color: #2F2F2F;
}

.smallIcon {
    height: 20px;
    padding-right: 12px;
    vertical-align: middle;
}

.largeIcon {
    height: 48px;
    /* width:48px; */
    vertical-align: middle;
}

.largeTextNoWrap {
    height: 48px;
    display: table-cell; /* needed when in float*/
    vertical-align: middle;
    white-space: nowrap;
    font-size: 1.2em;
}

.idp {
    height: 48px;
    clear: both;
    padding: 8px;
    overflow: hidden;
    cursor: pointer;
}

.idp:hover {
    background-color: #cccccc;
    cursor: pointer;
}

.idpDescription {
    width: 80%;
    cursor: pointer;
}

.submit.nextButton {
    margin-left: -2px;
}

.submitMargin.submitModified {
    margin-bottom: 60px;
}

.submit.modifiedSignIn {
    display: block;
    width: auto;
    float: right;
}

#submissionArea {
    margin-top: 8px;
}

@media (max-width: 998px) {
    #content {
        min-width: 680px !important;
    }

    .cover {
        background-size: cover;
        background-position: 43%;
    }

    #introduction {
        padding-left: 33px!important;
    }
}

@media (max-width: 768px) {
    #content {
        min-width: 450px !important;
        min-height: 440px !important;
        top: 51% !important;
    }

    #header {
        top: -60px;
        left: 0;
    }

    .cover {
        display: none !important;
    }

    #content main {
        border-radius: 5px;
    }

    #workArea {
        margin-top: 90px !important;
    }

    #introduction {
        padding-left: 43px !important;
    }
}

@media (max-width: 575px) {
    #kmsiArea.kmsiAreaPaginated {
        padding-left: 0 !important;
    }

    #footerLinks > div {
        margin-top: 5px;
        width: 85.5%;
    }

    #content {
        max-width: 94% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #introduction a {
        margin-left: 0;
        padding-left: 0;
    }

    #introduction {
        padding-left: 0 !important;
        padding-right: 0!important;
    }

    .cover {
        display: none !important;
    }

    #loginMessage,
    .system,
    #userNameInput,
    #nextButton,
    #introduction,
    #passwordBannerContainer,
    #passwordInput,
    #submitButton,
    #loginForm,
    #errorPassword,
    #mfaHeader {
        width: 100% !important;
    }

    #workArea {
        padding-left: 20px;
        padding-right: 20px;
    }

    .loginIcons {
        left: 25px !important;
    }

    #validationIcons {
        right: 22px;
    }

    .errorUsernamePaginated {
        width: 100%;
        padding-left: 26px;
    }


    .passwordIcon {
        right: 22px;
    }

    .bannerContainer {
        padding-left: 25px;
    }

    .back {
        left: 19px;
    }

    .identityBanner {
        padding-left: 26px;
    }

    .back:hover {
        left: 14px;
    }
    #header img {
        width: 123px !important;
    }
}

#mfaGreetingDescription, #instructionsDiv, #linksDiv {
    color: #5e6784;
}

@keyframes ProgressFlagAnimation2 {
    from {
        left: 0;
    }
    to {
        left: 300px;
    }
}

@keyframes ProgressFlagAnimation3 {
    from {
        left: 0;
    }
    to {
        left: 250px;
    }
}

@keyframes ProgressFlagAnimation4 {
    from {
        left: 0;
    }
    to {
        left: 200px;
    }
}

.ProgressFlag > div {
    width: 2px;
    height: 2px;
    margin: 0 5px;
    background: blue;
    position: relative;
    -webkit-animation: ProgressFlagAnimation2 1.45s infinite ease-in-out !important; /* Chrome, Safari, Opera */
    -webkit-animation-delay: -2s; /* Chrome, Safari, Opera */
    animation: ProgressFlagAnimation2 5s infinite ease-in-out !important;
    animation-delay: -2s;
    text-align: center;
    display: inline-block;
}

#mfaHeader {
    text-align: left !important;
}

#errorDiv {
    width: 100%;
    text-align: justify;
}

#mfaHeader, #mfaHeader, #customHeader {
    text-align: justify;
}

@media (max-width: 400px) {
    .ProgressFlag > div {
        -webkit-animation: ProgressFlagAnimation3 1.45s infinite ease-in-out !important; /* Chrome, Safari, Opera */
        -webkit-animation-delay: -2s; /* Chrome, Safari, Opera */
        animation: ProgressFlagAnimation3 5s infinite ease-in-out !important;
        animation-delay: -2s;
    }
}

@media (max-width: 350px) {
    .ProgressFlag > div {
        -webkit-animation: ProgressFlagAnimation4 1.45s infinite ease-in-out !important; /* Chrome, Safari, Opera */
        -webkit-animation-delay: -2s; /* Chrome, Safari, Opera */
        animation: ProgressFlagAnimation4 5s infinite ease-in-out !important;
        animation-delay: -2s;
    }
}

#mfaHeader, #mfaGreetingDescription {
    text-align: justify;
}

#mfaGreetingDescription {
    margin-bottom: 20px;
}

@media (max-height: 500px) {
    #content {
        min-width: 450px !important;
        top: 50%;
        min-height: 230px !important;
    }

    #content main {
        border-radius: 5px !important;
    }

    .cover {
        display: none !important;
    }

    #header {
        display: none !important;
    }

    #workArea {
        margin-top: 20px !important;
    }

    .system {
        padding-bottom: 0;
    }

    #introduction, #passwordReminder {
        padding-bottom: 20px;
    }

    #footerLinks {
        display: none;
    }
}

@media (max-height: 560px) {
    #header {
        display: none;
    }

    .cover {
        display: none;
    }

    #content {
        min-width: 450px !important;
        min-height: 490px;
    }

    #content main {
        border-radius: 5px !important;
    }
}

#introduction a {
    padding-bottom: 2px;
}