@charset "UTF-8";

input::placeholder {
    color: transparent;
}

input {
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1), inset 0px -2px 0px rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    height: 43px;
    display: block;
    width: 100% !important;
    font-size: 1rem;
    line-height: 1;
    color: #495057;
    background-color: #fff;
    background-image: none;
    background-clip: padding-box;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    padding: 0.8rem 0.8rem;
    padding-left: 10px;
}

input:disabled {
    opacity: 0.5;
}

#email.invalid {
    border: 1px solid #e63246 !important;
}

#forgotPassword {
    position: absolute;
    bottom: 10px;
}

.buttons {
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
}

.buttons > div {
    display: flex;
    align-content: center;
    justify-content: right;
}

button:not(.nav-language-item, .nav-menu-button, .accountButton) {
    background-color: transparent;
    font-weight: 600;
    border: none;
}

button:not(#cancel, .nav-language-item, .nav-menu-button) {
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    font-size: 1rem;
    line-height: 1;
    transition: all 0.15s ease-in-out;
    box-shadow: 0px 2px 4px rgba(44, 152, 240, 0.24), 0px 3px 6px rgba(44, 152, 240, 0.30);
    margin: 1px;
    border-radius: 5px;
    font-weight: 700;
    height: 43px;
}

button:not(:disabled, .nav-language-item, .nav-menu-button) {
    color: #2C98F0;
}

button:hover {
    cursor: pointer;
    opacity: 0.75;
}

button:disabled {
    opacity: 0.6;
    cursor: default !important;
}

button#nextBtn,
button#continue {
    color: #fff;
    height: 43px;
    background: #2C98F0 !important;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 12px;
}

button#previousBtn {
    color: #2C98F0;
    height: 43px;
    background: #fff;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 12px;
    border: 2px solid #2C98F0;
}

button#cancel {
    color: #2C98F0;
    min-height: 43px;
    padding-left: 13px;
    border: 0;
    box-shadow: none;
}

button#newPassword_toggler, button#oldPassword_toggler {
    color: #2C98F0;
    background-color: transparent;
    position: absolute;
    right: 10px;
    transform: translateY(-44px);
    font-weight: normal !important;
    font-size: 12px;
    border-color: transparent;
    box-shadow: none;
}

button#newPassword_toggler > i, button#oldPassword_toggler > i {
    color: grey;
    font-size: 14px;
}

button#newPassword_toggler:hover, button#oldPassword_toggler:hover {
    opacity: 0.6;
}

#steps {
    text-align: center;
    font-weight: 300;
    font-size: 12px;
    line-height: 14px;
    color: #65778a;
    margin-bottom: 0;
}

#newPassword_label {
    margin-top: 0;
}

#newPassword_label span.text-muted {
    margin-top: 0;
}

input#newPassword {
    padding-right: 120px;
}

ul {
    list-style-type: none;
}

.create p a {
    padding-left: 5px;
}

.error p {
    margin: 0;
    padding: 0.3rem 0.6rem;
    text-align: center;
    background-color: #F5D7D7;
    color: #890F0F;
}

.error.itemLevel {
    display: none;
    order: 2;
    margin-top: 3px;
}

.helpLink {
    display: none;
}

.helpText {
    display: none;
}

.verificationErrorText,
.error.pageLevel {
    color: #9c3333;
}

#attributeList ul {
    padding-left: 0;
}

.attrEntry label {
    margin-top: 1rem;
    margin-bottom: 0;
}

.sendButton,
.verifyButton,
.editButton,
.defaultButton {
    margin-top: 1rem;
}

.buttons.verify {
    margin-top: 1rem;
}

button[disabled] {
    background-color: rgba(0, 0, 0, .12);
    color: rgba(0, 0, 0, .38);
}

.error.itemLevel.show {
    display: block;
}

.attrEntry.validate input:invalid {
    outline: #a61e0c solid 1px;
    background-color: #fce8e8;
}

/* IE11 flexbox fix for vertical align */
.flex-wrapper {
    display: flex;
    flex-direction: column;
}

.intro {
    display: none;
}

#cancel:hover {
    text-decoration: underline;
}

.btnPrimary {
    white-space: normal;
    min-height: 43px !important;
    max-width: none;
}

.btnSecundary {
    min-height: 43px !important;
    background-color: #fff !important;
    color: #2C98F0 !important;
    border-color: #2C98F0 !important;
}

#password_validations {
    color: #495869;
    margin-top: 15px;
}

.validations-table tr td {
    vertical-align: top;
    padding-left: 5px;
}

tr td {
    font-size: 14px;
    line-height: 14px;
    color: #495869;
}

#password_validation_table {
    margin-left: 10px;
    margin-top: 18px;
}

#password_validation_table tr td {
    padding-top: 3px;
    padding-bottom: 3px;
}

.validationError {
    background-color: rgba(255, 0, 0, 0.15);
    color: #FF0000;
}

.validationSucces {
    background-color: rgba(47, 194, 178, 0.2);
    color: #2FC2B2;
}

.inputValidationError {
    padding: 5px;
    display: none;
}

.validationIcon {
    margin-left: 2px;
    margin-right: 5px;
}

.error.itemLevel.show {
    display: none !important;
}

.error.pageLevel {
    display: none;
}

.verificationSuccessText {
    display: none !important;
}

.verificationErrorText {
    display: none !important;
}

.verificationErrorTest {
    display: none !important;
}

.verificationInfoText {
    display: none !important;
}

.verifying-modal {
    display: none !important;
}

.quicklinks-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    max-width: 100%;
    z-index: 99;
}

.quicklink-card {
    border-bottom: 8px solid #2C8EF0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(252, 252, 252);
    width: 126px;
    height: 126px;
    border-radius: 5px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15), 0px 3px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    margin: 5px;
    padding: 7px;
    text-decoration: none;
}

a.quicklink-card:hover {
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.5);
    opacity: 1;
    text-decoration: none;
    background-color: #fff;
    margin-top: 6px;
    margin-bottom: 4px;
}

.quicklink-title {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .quicklink-title h3 {
        text-align: center;
        font-weight: 600;
        font-size: 14px;
        color: #495869;
    }

.quicklink-subtitle {
    height: 100%;
    width: 100%;
    text-align: center;
    font-weight: 300;
    font-size: 12px;
    line-height: 14px;
    color: #65778a;
}

.entry-item {
    display: flex;
    flex-direction: column;
}

.dropdown-menu {
    top: 100%;
}

.loginbody {
    margin-bottom: 55px;
}

#forgotPassword {
    position: relative !important;
    float: right;
    top: 0 !important;
    color: #0E6FBE !important;
    font-size: 12px;
    text-decoration: underline;
    content: 'Forgot password?' !important;
}

.divider {
    border: none;
    padding: 0;
    margin: 0;
}

#api > .divider {
    order: 2;
}

#api > .divider h2 {
    display: block;
    text-align: center;
    margin-top: 24px;
    margin-bottom: 12px;
    font-weight: bold;
}

.social .options button:not(#cancel, .nav-language-item, .nav-menu-button, #AzureADExchangeHidden) {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    width: 100%;
}

#localAccountForm button:not(#cancel, .nav-language-item, .nav-menu-button, #AzureADExchangeHidden) {
    font-size: 1.25rem;
    width: 100%;
}

#localAccountForm button:hover#next {
    background-color: #2C98F0 !important;
    color: #fff;
}

.create {
    position: absolute;
    bottom: -55px;
    text-align: center;
    width: 100%;
}

.create p {
    text-align: center;
    font-weight: 300;
    font-size: 12px;
    line-height: 14px;
    color: #65778a;
}

.create > p {
    margin-bottom: 7px;
}

#FacebookExchange {
    background: #3B5998;
    color: #fff;
    padding-right: 100px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid #3B5998;
}

#FacebookExchange::before {
    content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' class='bi bi-facebook' viewBox='0 0 16 16'><path d='M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z'/></svg>");
    color: #fff;
    margin-right: 70px;
}

#LinkedInExchange {
    background: #0E76A8;
    color: #fff;
    padding-right: 105px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid #0E76A8;
}

#LinkedInExchange::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" class="bi bi-linkedin" viewBox="0 0 16 16"><path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/></svg>');
    color: #fff;
    margin-right: 75px;
}

#AzureADExchange {
    background: #FFF;
    color: #D40A80;
    padding-right: 70px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    height: 43px;
    border: 2px solid #D40A80;
    display: none;
}

#AzureADExchange::before {
    content: url('#{CustomerPortalBaseUrl}#/img/icon.png');
    color: #fff;
    margin-right: 35px;
}

#AzureADExchange:hover {
    background-color: #D40A80;
    color: #fff;
}

#AzureADExchangeHidden {
    background: #FFF;
    color: #D40A80;
    padding-right: 70px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 2px solid #D40A80;
    display: none;
}

#createAccount {
    font-weight: 800;
    font-size: 13px;
    color: #0E6FBE !important;
}

.social {
    order: 3;
    margin-bottom: 55px;
}

.localAccountForm {
    order: 1;
}

.localAccountForm #next {
    background: #FFF;
    border: 2px solid #2C98F0;
    color: #2C98F0;
}

.social .intro h2 {
    text-align: center;
    font-weight: 300;
    font-size: 12px;
    line-height: 14px;
    color: #65778a;
    margin-bottom: 12px;
}

.entry-item > input {
    order: 1;
}

.entry-item [for=password] {
    display: inline-block;
}

.error p:before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkred" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>');
    float: left;
    margin-left: 10px;
    padding-top: 1px;
}

.rememberMe input {
    display: inline-block;
    width: 10% !important;
    height: auto;
    box-shadow: none;
}

.social .intro {
    display: block;
}

.changeemail #continue, .changeemail #email_ver_but_send, .changeemail #email_ver_but_verify, .changeemail #email_ver_but_resend, .changeemail #email_ver_but_edit {
    display: none !important;
}

.changeemail .buttons.verify {
    display: block;
}

#api .social {
    display: none;
}

#api .divider {
    display: none;
}

@media only screen and (max-width: 543px) {
    .login {
        margin-top: 30px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .quicklink-card {
        width: 45%;
    }

}

@media only screen and (max-width: 400px) {
    #FacebookExchange::before {
        content: '';
        padding-left: 20px;
    }

    #LinkedInExchange::before {
        content: '';
        padding-left: 20px;
    }
}

input#email::placeholder {
    color: #868e96 !important;
}