/* === Fonts === */
@font-face {
    font-family: "Montserrat";
    src: url('fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url('fonts/Montserrat-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Montserrat";
    src: url('fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url('fonts/Montserrat-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: "Material Icons";
    src: url('fonts/MaterialIcons-Regular.ttf') format('truetype');
}

/* === Animations === */
@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

/* === Scrollbar === */
*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-thumb {
    background-color: #979797;
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #171B25 !important;
}

/* === Scrollbar - Firefox === */
* {
    scrollbar-width: thin;
    scrollbar-color: #979797;
}

/* === Elements === */
body {
    font: var(--rds-font-body-md);
    color: var(--rds-color-neutral-text-default);
    line-height: var(--rds-font-line-height-150);
    font-size: var(--rds-font-size-1000);
}

input, select {
    color: var(--rds-color-neutral-text-default);
}

button, input, select {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: var(--rds-font-size-1000);
}

footer {
    background-color: #F2F4F8;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--rds-font-weight-bold);
    color: var(--rds-color-glue-text-strong);
	letter-spacing: var(--rds-font-letter-spacing-semicompressed);
}

h1, h2 {
    font: var(--rds-font-heading-lg);
    line-height: 2.5rem;
}

@media (max-width: 992px) {
    h1, h2 {
        font: var(--rds-font-heading-md);
        line-height: 2rem;
    }
}

h3 {
    font-size: 1.25rem;
    line-height: 1.5rem;
}

h4 {
    font-size: 1.125rem;
    line-height: 1.25rem;
}

h5 {
    font-size: 1rem;
    line-height: 1.125rem;
}

h6 {
    font-size: 0.875rem;
    line-height: 1rem;
}

input {
    border: 2px solid #929ba2;
    border-radius: 4px;
    line-height: 1.25rem;
}

label:not(#true_option) {
    font-weight: 700;
}

a {
    color: var(--rds-color-glue-text-default);
    font-weight: var(--rds-font-weight-bold);
    border-bottom: 1px solid var(--rds-color-glue-text-default);
    text-decoration: none;
}

input.touched.invalid {
    border: 2px solid #d90014 !important;
}

/* Placeholder text colour Chrome/Opera/Safari, Firefox 19+, Firefox 18-, Edge, IE 10+ */
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-moz-placeholder,
input::-ms-input-placeholder,
input:-ms-input-placeholder {
    color: #607285;
}

input[type=checkbox] {
    cursor: pointer;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type=checkbox]:checked {
    border: 0;
    background: #0069ff;
}

input[type=checkbox]:checked:after {
    font-family: "Material Icons";
    content: "check";
    font-size: 1.125rem;
    color: #fff;
}

input[type=checkbox] + label {
    cursor: pointer;
}

input:disabled,
select:disabled {
    color: #757575;
    border-color: #eaedf0;
    background-color: #c5cbd11a;
}

select {
    border: 2px solid #929ba2;
    border-radius: 4px;
    appearance: none;
    line-height: 1.25rem;
    background: url(../interfaceImgs/svgs/arrow_drop_down.svg) center right 1.2rem/.6rem no-repeat;
}

/* === Classes === */
.auto_selfAssertedFederatedActionNotAllowed #cancel,
.auto_selfAssertedNoMobileOnAccount #cancel,
.auto_selfAssertedNoMobileOnAccountBlocked #cancel,
.auto_selfAssertedFederatedDomainError #cancel,
.auto_selfAssertedGenericError #cancel,
.auto_selfAssertedUserEmailRecoverySuccess #cancel {
    display: block !important;
    background-color: #0069ff !important;
    border-color: #0069ff !important;
}

.badge {
    display: block;
    font-weight: 700;
    line-height: 1.25rem;
}

.badge::before {
    content: "\e5cc";
    font-family: 'Material Icons';
    font-size: 1.5rem;
}

.badge.error {
    color: #C50010;
}

.badge.error::before {
    content: "\e000" !important;
}

.badge.success {
    color: forestgreen !important;
}

.badge.success::before {
    content: "\e876" !important;
}

.modalContentHeaderContainer {
    border-bottom: 1px solid #D8D8D8;
}

/* Remove browser-native spinner controls on numeric OTP inputs */
.otp-group input[type=number] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    /* Mozilla Firefox requires "appearance: textfield;" */
    appearance: textfield;
}

.rds-alert {
    display: none;
    box-sizing: border-box;
    margin: 0 auto 16px;
    padding: var(--rds-spacing-300) var(--rds-spacing-200);
    border-radius: 4px;
    border: 2px solid;
    border-left: 8px solid;
    width: 100%;
}

.rds-alert.success {
    color: var(--rds-color-success-text-default);
}

.rds-alert.success::before {
    content: "check_circle_outline";
}

.rds-alert.error {
    color: var(--rds-color-danger-text-default);
}

.rds-alert.error::before {
    content: "error_outline";
}

.rds-alert.success::before,
.rds-alert.error::before {
    display: flex;
    font-family: "Material Icons";
    font-feature-settings: "liga";
    font-size: 2rem;
    position: relative;
    bottom: 8px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    height: 2.5rem;
}

.rds-alert-heading {
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 32px;
}

.rds-alert-body {
    color: black;
}

.signup-button,
.modal-close-btn {
    background: white;
    border: 3px solid #0069ff;
    color: #0069ff;
}

.signup-button:hover,
.modal-close-btn:hover {
    background: #0069ff !important;
    color: white;
}

.socialBreakline {
    color: gray;
    width: 100%;
    align-items: center;
    display: flex;
}

.socialBreakline:after {
    margin-left: 8px;
    flex: 1;
    height: 1px
}

.thin-hr {
    border: 0;
    border-style: solid;
    border-color: #dde1e6;
    border-width: 1px 0 0 0;
}

/* === Identifiers === */
#emailVerificationCode_cloned,
#phoneVerificationCode_cloned,
#otpCode_cloned {
    border: 0;
    border-bottom: 2px solid #929ba2;
    border-radius: 0;
    font-size: 1.5rem;
    font-weight: 700;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

#emailVerificationCode_cloned:focus,
#phoneVerificationCode_cloned:focus,
#otpCode_cloned:focus {
    box-shadow: 0 3px 0 0 #0d1846b2;
}

#emailVerificationCode_cloned.textInput.touched.invalid,
#phoneVerificationCode_cloned.textInput.touched.invalid,
#otpCode_cloned.textInput.touched.invalid {
    border: 0 !important;
    border-bottom: 2px solid #d90014 !important;
}

#emailVerificationCode_cloned.textInput.touched.invalid:focus,
#phoneVerificationCode_cloned.textInput.touched.invalid:focus,
#otpCode_cloned.textInput.touched.invalid:focus {
    box-shadow: 0 3px 0 0 #F04561B2;
}

#attributeList ul {
    list-style-type: none;
}

#attributeList ul fieldset {
    border: none;
}

#simplemodal-overlay {
    background: #FFF !important;
    opacity: 0.5 !important;
}

#simplemodal-data {
    background-color: #f4f4f4;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 8%), 0 3px 6px rgb(0 0 0 / 12%);
    text-align: center;
}

#test-rp-help-support ul {
    list-style: none;
}

#test-rp-help-support li:before {
    font-family: "Material Icons", sans-serif;
    content: "\e061";
    font-size: 0.375rem;
}

#verifying_blurb {
    font-size: 0;
    background: url(../interfaceImgs/svgs/loading.svg) center no-repeat;
}

#set-up-digi-id:hover {
    cursor: pointer;
}

#retryCode,
.block-button {
    border: 2px solid #0079c8;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.25rem;
    font-weight: 700;
}

.verificationInfoText > div,
.verificationSuccessText > div {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 8px 14px 8px 48px;
    font-size: .875em;
    color: #1c1404;
    border-radius: 4px;
    background: #fedee2;
    border: 1px solid #fdbec5;
}

.verificationErrorText > div,
.error.pageLevel,
.incident-banner {
    position: relative;
    box-sizing: border-box;
    margin: 0 0 32px;
    padding: var(--rds-spacing-300) var(--rds-spacing-200);
    border-radius: 4px;
    border: 2px solid var(--rds-color-danger-text-default);
    border-left: 8px solid var(--rds-color-danger-text-default);
}

.incident-banner {
    margin: 0 24px 32px 24px;
}
.incident-banner.info {
    border-color: var(--rds-color-glue-text-default);
}

.incident-banner.warning {
    border-color: var(--rds-color-warning-text-default);
}

.verificationErrorText > div::before,
.error.pageLevel::before,
.incident-banner::before {
    display: flex;
    font-family: "Material Icons";
    content: "error_outline";
    font-feature-settings: "liga";
    font-size: 2rem;
    position: relative;
    bottom: 8px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    color: var(--rds-color-danger-text-default);
}

.incident-banner.info::before
{
    color: var(--rds-color-glue-text-default);
}

.incident-banner.warning::before
{
    color: var(--rds-color-warning-text-default);
}

.incident-banner-heading {
    margin-bottom: 8px !important;
    font-size: var(--rds-font-size-1125);
    font-weight: var(--rds-font-weight-bold);
    color: var(--rds-color-danger-text-default);
}

.incident-banner-heading.info
{
    color: var(--rds-color-glue-text-default);
}

.incident-banner-heading.warning
{
    color: var(--rds-color-warning-text-default);
}

.verificationSuccessText > div {
    background: #f0fdef;
    border: 1px solid #008a00;
}

.verificationInfoText > div {
    background: #ffffed;
    border: 1px solid #ffeb6d;
}

.error.itemLevel::before,
.verificationInfoText > div::before,
.verificationSuccessText > div::before {
    font-family: "Material Icons";
    font-size: 1.5rem;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
}

.verificationInfoText > div::before,
.verificationSuccessText > div::before {
    left: 14px;
}

.error.itemLevel::before {
    content: "error";
    color: #c50010;
    left: 0;
}

.verificationSuccessText > div::before {
    content: "done";
    color: #008a00;
}

.verificationInfoText > div::before {
    content: "warning_amber";
    color: #b3910e;
}

.error.itemLevel,
.error.itemLevel > p {
    font-size: .875rem;
    color: #c50010;
}

.bupaPopupModalContent {
    background-color: #fff;
    border: 1px solid #888;
    border-radius: 8px;
}

.modalContentContainer {
    word-break: break-word;
    overflow-y: auto;
}

.modalContentHeading {
    font-size: 1.25rem;
    font-weight: 700;
}

.modalCloseButton {
    color: var(--rds-color-neutral-text-strong);
    background-color: #FFFFFF;
    border-style: none;
    font-size: 1.5rem;
    font-weight: 400;
}

.modalCloseButton::before {
    content: "close";
    font-family: "Material Icons";
}

.modalCloseButton:hover,
.modalCloseButton:focus {
    cursor: pointer;
    color: var(--rds-color-neutral-text-default);
    border-style: none;
    background-color: #FFFFFF;
}

.topErrorBanner {
    background-color: #d90014;
    color: #fff;
}

.topErrorBanner .material-icons {
    font-size: 1rem;
}

.errorMessage > .errorInfoLink {
    color: #fff;
}

.privacyText,
.termsAndConditionsText {
    border: 1px solid #f1efeb;
    line-height: 150%;
}

.termsAndConditionsText + .gradientOverlay {
    background-image: linear-gradient(180deg,rgba(255,255,255,0)0,#fff 15.1%,#f1f1f1 100%)
}

#new-relic {
    opacity: 0;
}

a:focus,
button:focus,
input:focus,
select:focus,
.profile-management-button:focus {
    -webkit-appearance: none;
    border-color: #0D1846;
    box-shadow: #0d1846b2 0 0 0 4px;
    outline: 0;
}

input.touched.invalid:focus,
select.touched.invalid:focus {
    box-shadow: #F04561B2 0 0 0 4px;
}

button,
input[type=button],
input[type=submit] {
    padding: 12px 16px;
    border-radius: 4px;
    font-weight: 700;
    line-height: 1.25rem;
    color: #fff;
    background-color: #0069ff;
    border: 0;
    cursor: pointer;
}

button:hover,
input[type=button]:hover,
input[type=submit]:hover {
    background-color: #005bde;
    border-color: #005bde;
}

button:active,
input[type=button]:active,
input[type=submit]:active {
    background-color: #004dbb;
    border-color: #004dbb;
}

.block-button[disabled],
button[disabled],
input[type=button][disabled],
input[type=submit][disabled] {
    cursor: not-allowed;
    background-color: #c5cbd110;
    border-color: transparent;
    color: #bdc3c9;
}

#retryCode,
.block-button,
button#skip,
button.changeClaims,
button.sendNewCode {
    background-color: transparent;
    border: 2px solid #013d92;
    color: #013d92;
}

#retryCode:hover,
.block-button:hover,
button#skip:hover,
button.changeClaims:hover,
button.sendNewCode:hover {
    background-color: #004dbb1a;
    border: 2px solid #004dbb;
    color: #004dbb;
}

#retryCode:active,
.block-button:active,
button#skip:active,
button.changeClaims:active,
button.sendNewCode:active {
    background-color: transparent;
    border: 2px solid #004dbb;
    color: #004dbb;
}

.deleteButtonAccColor {
    border-color: #d90014;
    background-color: #d90014;
}

.deleteButtonAccColor:hover,
button#cancel:hover {
    border-color: #ab000b;
    background-color: #ab000b;
}

.deleteButtonAccColor:active,
button#cancel:active {
    border-color: #6b0003;
    background-color: #6b0003;
}

#facebookButton {
    background-color: #1877f2;
    color: #fff;
}

#googleButton {
    background-color: #f8f8f8;
    color: #757575;
}

#appleButton {
    background-color: #000;
    color: #fff;
}

#microsoftButton {
    background-color: #2f2f2f;
    color: #fefefe;
}

.socialButtons {
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.8125rem;
}

.socialButtons:focus,
.socialButtons:hover {
    cursor: pointer;
}

#showHidePasswordIconContainer {
    background-size: 1.5rem;
    background-position: center;
    background-repeat: no-repeat;
}

#showHidePasswordIconContainer.show {
    background-image: url(../interfaceImgs/svgs/visibility_off.svg);
}

#showHidePasswordIconContainer.hide {
    background-image: url(../interfaceImgs/svgs/visibility_on.svg);
}

@media (max-width: 700px) {
    .socialButtons {
        border: 1px solid #000;
        border-radius: 25px;
    }
}

@media (max-width: 1080px) {
    .b2cSecurityQuestionsScreen ul li:nth-child(odd) {
        border-top: 1px solid #eaeaea;
    }

    .b2cSecurityQuestionsScreen ul li:nth-child(1) {
        border-style: none;
    }
}

/* css class not in use changes only used for asp version only */
.version-change {
    display: flex;
}