/* === Elements === */
body {
    margin: 0;
    overflow-x: hidden;
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 24px 0;
    margin-top: 80px;
}

header {
    width: 100%;
    max-width: 550px;
    display: flex;
    justify-content: center;
}

input {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    margin-top: 8px;
    display: block;
}

input[type=checkbox] {
    display: inline-block;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    text-align: center;
    vertical-align: text-top;
}

input[type=checkbox] + label {
    margin-left: 16px;
}

main {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    width: 100%;
    max-width: 550px;
}

p {
    margin: 0 0 24px;
}

select {
    width: 100%;
    margin-top: 8px;
    padding: 16px 40px 16px 16px;
}

/* === Classes === */
.badge::before {
    position: relative;
    top: 6px;
    margin-right: 12px;
}

.block-button {
    box-sizing: border-box;
    padding: 14px 32px;
    display: block;
    margin-top: 12px;
    text-align: center;
}

.bupaPopupModalContent {
    padding: 12px 24px 24px;
    max-height: inherit;
    box-sizing: border-box;
}

#otp-help .bupaPopupModalContent,
#confirmExitPopupModal .bupaPopupModalContent {
    padding-top: 24px;
}

.buttons {
    margin: 24px 0 48px;
}

.columnRow {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
}

.columnRow_Item {
    width: 100%;
    box-sizing: border-box;
    padding: 0 24px;
}

.columnRow_Item h1,
.entry-item {
    margin-bottom: 24px;
}

.columnRow_Item > h1,
.create > h1 {
    margin: 0 0 24px;
}

.create {
    margin-top: 48px;
}

.create a {
    margin-left: .25rem;
}

.auto_selfAssertedSignInSignUp .create a {
    margin-left: 0;
}

.DropdownSingleSelect.CountryCode > .attrEntry {
    margin-bottom: 24px;
}

.errorMessage > .material-icons {
    margin-right: .5rem;
}

.error.itemLevel {
    position: relative;
    align-items: center;
    margin: .5rem 0;
    padding-left: 2rem;
}

.error.itemLevel > p {
    display: inline-block;
    margin: 0;
}

.error.pageLevel > p {
    margin: 0;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.footer-links {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    max-width: 502px;
    margin-top: 24px;
}

@media (max-width: 700px) {
    .footer-links {
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
    }

    .footer-links a {
        margin-top: 24px;
    }
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 0 40px;
    width: 100%;
    padding: 0 24px;
}

/* Set footer sticky on the bottom of the page */
.layout {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-image {
    height: 32px;
    display: block;
}

.modal,
.popup-modal {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.modal {
    overflow: auto;
}

.modal-content {
    width: 100%;
    max-height: inherit;
}

.modal-dialog {
    position: absolute;
    width: calc(100vw - 32px);
    max-width: 550px;
    max-height: calc(100vh - 32px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.modalCloseButton {
    display: flex;
    justify-content: flex-end;
    padding: calc((48px - 1.5rem) / 2); /* Adds padding to all sides of icon so that clickable size is always 48px */
}

.modalContentContainer {
    max-height: calc(100vh - 168px);
    padding: 4px;
}

.modalContentHeaderContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 24px;
}

.modalContentHeading {
    display: inline-block;
    margin-bottom: 24px;
}

.otp-digit {
    text-align: center;
    width: 13%;
}

/* Reduce L/R padding on smaller screens so digit can actually be seen */
@media (max-width: 400px) {
    .otp-digit {
        padding: 16px 8px;
    }
}

.otp-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.popup-modal {
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: rgb(0, 0, 0, 0.5);
}

.privacyText,
.termsAndConditionsText {
    box-sizing: border-box;
    padding: 8px;
    width: 100%;
}

.b2cTermsAndConditionsScreen label {
    font-weight: 500;
}

.requirements-heading {
    display: inline-block;
    margin-bottom: 8px;
}

.row {
    display: flex;
}

.socialBreakline {
    margin-top: 48px;
    margin-bottom: 16px;
}

.socialBreakline:after {
    background-color: gray;
    content: "";
}

.socialBreakline:before {
    right: .5em;
    margin-left: -50%
}

.socialButtons {
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 25px;
    padding-right: 25px;
}

.socialButtons img {
    height: 60%;
    vertical-align: middle;
    padding-right: 15px;
    padding-left: 15px
}

.termsAndConditionsText {
    overflow-y: scroll;
    height: 400px;
    margin-bottom: 24px;
}

.termsAndConditionsText h1,
.termsAndConditionsText h2 {
    padding: 10px 0;
    margin: 0 0 10px;
}

.termsAndConditionsText hr {
    margin: 40px 0;
}

.termsAndConditionsText + .gradientOverlay {
    width: 100%;
    height: 24px;
    transform: translateY(-24px);
}

.TextBox.VerificationCode > .attrEntry {
    margin-top: 24px;
}

.thin-hr {
    width: calc(100% - 48px);
    max-width: 502px;
    box-sizing: border-box;
    margin: 0 0 48px;
}

.layout .thin-hr {
    width: 100%;
}

.topErrorBanner {
    position: fixed;
    left: 0;
    right: 0;
    height: 42px;
    z-index: 10;
}

.topErrorBanner > .closeButton {
    position: absolute;
    top: .8rem;
    right: 1rem;
}

.topErrorBanner > .errorMessage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.verificationControlContent > .links-container {
    margin-top: 20px;
}

.verificationControlContent > .buttons {
    margin: 48px 0;
}

/* === Identifiers === */
#attributeList ul {
    margin: 0;
    padding: 0;
}

#currentPassword.touched + .error.itemLevel.show,
#email.touched + .error.itemLevel.show,
#newMobile.touched + .error.itemLevel.show,
#newPassword.touched + .error.itemLevel.show,
#reenterPassword.touched + .error.itemLevel.show,
#emailVerificationCode_cloned.touched ~ .error.itemLevel.show,
#phoneVerificationCode_cloned.touched ~ .error.itemLevel.show,
#TermsAccepted_true.touched ~ .error.itemLevel.show,
input[id="FirstSecurityQuestion.answer"].touched + .error.itemLevel.show {
    display: flex;
    min-height: 18px;
}

#forgotUsername-container,
#forgotPassword-container{
    margin-top: 12px;
}

#new-relic {
    position: absolute;
}

#new-user-footer {
    display: flex;
    flex-direction: column;
}

#new-user-footer span:nth-child(n+2) {
    margin-top: 16px;
}

#passwordRequirementsList {
    margin: 24px 0;
}

#resend-code-btn,
#confirm-exit-btn {
    margin-right: 16px;
}

#resend-code-btn:focus,
#confirm-exit-btn:focus,
.modal-close-btn:focus {
    transform: translateX(4px) translateY(-4px);
}

#retryCode {
    display: inline-block;
    box-sizing: border-box;
}

#simplemodal-data {
    display: inline-block !important;
    position: relative;
    width: 56px;
    height: 56px;
}

#socialSectionContainer {
    margin: 1rem auto;
}

#verifying_blurb {
    height: 100%;
}

#socialButtonsContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-gap: 10px;
    grid-auto-flow: column;
    height: 150px;
    max-width: 550px;
    margin: 3rem auto;
}

#test-rp-help-support h2,
#test-rp-help-support h3 {
    margin-bottom: 8px;
}

#test-rp-help-support ul {
    padding-left: 8px;
}

#test-rp-help-support li:before {
    margin-right: 8px;
}

@media (max-width:700px) {
    .block-button {
        max-width: 100%;
        margin-right: 0
    }

    .socialButtons {
        height: 45px;
        padding: 5px;
        margin: 5px;
    }

    #socialButtonsContainer {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-auto-flow: row;
        height: auto;
    }

    #retryCode,
    button:not(.modalCloseButton),
    button#skip,
    button.changeClaims,
    button.sendNewCode,
    input[type=button],
    input[type=submit] {
        width: 100%;
    }
}

/* Smaller modal; bring it higher than centre on taller screens */
@media (min-height: 780px) {
    #what-is-bupa-account-bluekey .modal-dialog,
    #otp-help .modal-dialog,
    #confirmExitPopupModal .modal-dialog {
        top: 385px;
    }
}

@media (max-width:1080px) {
    .b2cSecurityQuestionsScreen ul li {
        width: 100%;
        margin-left: 0;
    }

    .b2cSecurityQuestionsScreen ul li:nth-child(odd) {
        padding-top: 30px;
        margin-top: 30px;
    }

    .b2cSecurityQuestionsScreen ul li:nth-child(1) {
        padding: 0;
    }
}