.registration-refresh-page {
    box-sizing: border-box;
    min-height: calc(100vh - 139px);
    padding: 0 31px 31px;
    background: #f0f0f0;
    color: #212529;
    font-family: Inter, Arial, Helvetica, sans-serif;
}

    .registration-refresh-page,
    .registration-refresh-page *,
    .contentContainer,
    .contentContainer *,
    .waitingTextOverlay,
    .waitingTextOverlay *,
    .RadInput,
    .RadInput *,
    .RadComboBox,
    .RadComboBox *,
    .RadPicker,
    .RadPicker * {
        font-family: Inter, Arial, Helvetica, sans-serif !important;
    }

.registration-card,
.divInstructorCourseSignup {
    box-sizing: border-box;
    width: min(800px, 100%);
    margin: 0 auto;
    padding: 30px;
    border: 1px solid #e8e8e8;
    border-radius: 17px;
    background: #fff;
}

#registrationView {
    box-sizing: border-box;
    width: min(1100px, 100%);
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.titleInstructorCourseSignup {
    box-sizing: border-box;
    width: min(800px, 100%);
    margin: 0 auto;
    padding: 30px 30px 12px;
    border-bottom: 1px solid #bbb;
    color: #212529;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}

.registration-card .titleInstructorCourseSignup {
    width: 100%;
    padding: 0 0 13px;
}

.lblSignup {
    margin: 20px 0 18px;
    color: #333;
    font-size: 14.7px;
    line-height: 22px;
}

.divCourseInfo {
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 16px 20px;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: #fafafa;
}

    .divCourseInfo table {
        width: 100%;
        padding: 0 !important;
        border-collapse: collapse;
    }

    .divCourseInfo td {
        padding: 0;
        color: #333;
        font-size: 14.5px;
        line-height: 21px;
        vertical-align: top;
    }

    .divCourseInfo [id$="lblCoursename"] {
        color: #212529;
        font-weight: 700;
    }

    .divCourseInfo [id$="Label2"],
    .divCourseInfo [id$="lblAvailability"],
    .divCourseInfo [id$="Label3"] {
        color: #0a6c3b !important;
        font-weight: 700;
    }

    .divCourseInfo tr:nth-child(2) td:nth-child(2) {
        padding-left: 28px;
        white-space: nowrap;
    }

    .divCourseInfo tr:nth-child(2) td:nth-child(3) {
        white-space: nowrap;
    }

.chkSignup {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

    .chkSignup label,
    .chkConfirmation label,
    .chkConfirmation span {
        color: #333;
        font-size: 14.5px;
        line-height: 21px;
    }

    .chkSignup input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 2px 10px 0 0;
        vertical-align: top;
    }

.lnkCourseCalendar {
    display: block;
    margin: 0 0 18px;
    color: #06c !important;
    font-size: 14.5px;
    line-height: 21px;
    text-align: right;
}

.chkConfirmation {
    box-sizing: border-box;
    margin: 0 0 18px;
    padding: 13px 16px;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: #fafafa;
}

    .chkConfirmation span,
    .chkConfirmation label {
        display: inline;
        width: auto !important;
    }

.termsLinks,
.divInstructorCourseSignup > div:has(#lnkTPATerms) {
    margin-bottom: 28px;
    color: #bbb;
    font-size: 13.5px;
    line-height: 20px;
    text-align: center;
}

.divInstructorCourseSignup .termsLinks a {
    color: #06c !important;
}

.bottomNavigationInner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.navLink,
.navigationLink,
.PaymentButton {
    box-sizing: border-box;
    display: inline-flex !important;
    width: 147px;
    min-height: 41px;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 5px;
    background: #630b1a !important;
    color: #fff !important;
    cursor: pointer;
    font-size: 14.7px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    text-decoration: none !important;
    text-transform: none;
}

.previousLink {
    background: #adb5bd !important;
}

.professionalValidationMessage,
.codeConductValidationMessage {
    display: none;
    box-sizing: border-box;
    width: min(640px, 100%);
    margin: 18px auto 14px;
    padding: 10px 14px;
    border: 1px solid #c0392b;
    border-radius: 6px;
    background: #fdecea;
    color: #8a1c13;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
}

.codeConductValidationMessage ul {
    margin: 0;
    padding-left: 20px;
}

.codeConductValidationMessage li + li {
    margin-top: 5px;
}

.backgroundUploadMessage {
    box-sizing: border-box;
    width: min(640px, 100%);
    margin: 0 auto 14px;
    padding: 10px 14px;
    border: 1px solid #c0392b;
    border-radius: 6px;
    background: #fdecea;
    color: #8a1c13;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
}

.backgroundUploadMessageSuccess {
    border-color: #2e7d32;
    background: #edf7ed;
    color: #1b5e20;
}

.backgroundUploadMessageError {
    border-color: #c0392b;
    background: #fdecea;
    color: #8a1c13;
}

.section.backgroundCheckCombinedSection {
    box-sizing: border-box;
    width: min(800px, 100%);
    margin: 0 auto;
    padding: 30px 30px 0 !important;
    border: 1px solid rgba(33, 40, 44, 0.12);
    border-bottom: 0;
    border-radius: 17px 17px 0 0;
    background: #fff;
    color: #21282c;
    font-size: 13.5px;
    line-height: 21px;
}

.backgroundCheckCombinedSection fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.backgroundCheckCombinedSection .backgroundCheckContent,
.backgroundCheckCombinedSection .risActivityLeaderContent {
    box-sizing: border-box;
    width: 100%;
}

.backgroundCheckCombinedSection.hasBothChecks .risActivityLeaderContent {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(33, 40, 44, 0.08);
}

.backgroundCheckCombinedSection .requirementHeading {
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ced4da;
    font-size: 14.685px;
    font-weight: 700;
    line-height: 19.579px;
}

.backgroundCheckCombinedSection .requirementInfoBox {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 20px;
    padding: 14px 18px;
    border: 1px solid rgba(33, 40, 44, 0.3);
    border-radius: 6px;
    background: #fff;
}

.backgroundCheckCombinedSection .requirementInfoBox > span > p:first-child {
    display: none;
}

.backgroundCheckCombinedSection .requirementInfoBox p {
    margin: 0 0 10px !important;
    color: #21282c;
    font-size: 13.5px !important;
    line-height: 21px;
}

.backgroundCheckCombinedSection .requirementInfoBox p:last-child {
    margin-bottom: 0 !important;
}

.backgroundCheckCombinedSection .requirementInfoBox p[style*="font-size:17px"],
.backgroundCheckCombinedSection .requirementInfoBox p[style*="font-size: 17px"] {
    margin-left: 0 !important;
    color: #630b1a !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}

.backgroundCheckCombinedSection .requirementInfoBox a {
    color: #630b1a;
}

.backgroundCheckCombinedSection .documentUploadRow {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.backgroundCheckCombinedSection .documentUploadLabel {
    flex: 0 0 auto;
    color: rgba(33, 40, 44, 0.55);
    font-size: 14.513px;
    line-height: 19.351px;
    white-space: nowrap;
}

.backgroundCheckCombinedSection .documentUploadControl,
.backgroundCheckCombinedSection .documentFilePicker {
    box-sizing: border-box;
    width: 100% !important;
}

.backgroundCheckCombinedSection .documentUploadControl {
    min-width: 0;
    flex: 1 1 auto;
}

.backgroundCheckCombinedSection .documentFilePicker {
    display: flex;
    position: relative;
    align-items: center;
    gap: 16px;
}

.backgroundCheckCombinedSection .documentFileName {
    box-sizing: border-box;
    width: auto !important;
    min-width: 0;
    height: 35px;
    flex: 1 1 auto;
    padding: 7px 10px;
    border: 1px solid rgba(33, 40, 44, 0.3);
    border-radius: 5px;
    background: #fff;
    color: #21282c;
}

.backgroundCheckCombinedSection .documentFileSelect {
    box-sizing: border-box;
    width: 147px !important;
    height: 41px !important;
    flex: 0 0 147px;
    border: 0;
    border-radius: 5px;
    background: #f0f0f0;
    color: #21282c;
    font-size: 14.685px;
    font-weight: 700;
    line-height: 41px;
    text-align: center;
    cursor: pointer;
}

.backgroundCheckCombinedSection .documentNativeFile {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.backgroundCheckCombinedSection .backgroundDocumentSubmit {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid #630b1a;
    border-radius: 5px;
    background: #630b1a;
    color: #fff;
    font-size: 14.685px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.sectionsPanel.backgroundCheckActive {
    width: min(800px, 100%);
}

.section.ethicsCombinedSection {
    box-sizing: border-box;
    width: min(800px, 100%);
    margin: 0 auto;
    padding: 30px 30px 0 !important;
    border: 1px solid rgba(33, 40, 44, 0.12);
    border-bottom: 0;
    border-radius: 17px 17px 0 0;
    background: #fff;
    color: #21282c;
    font-size: 13.5px;
    line-height: 21px;
}

.ethicsCombinedSection .sectionFields {
    display: block;
    padding-bottom: 32px;
    border-bottom: 1px solid #dee2e6;
}

.ethicsCombinedSection .ethicsDocumentContainer,
.ethicsCombinedSection .acceptEthicsContainer,
.ethicsCombinedSection .declarationContent {
    display: block;
    box-sizing: border-box;
    width: 100%;
}

.ethicsCombinedSection .ethicsDocumentContainer {
    overflow: hidden;
    height: 280px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background: #f8f9fa;
}

.ethicsCombinedSection .ethicsDocument {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 280px;
    border: 0;
}

.ethicsCombinedSection .acceptEthicsContainer {
    margin-top: 20px;
}

.ethicsCombinedSection .acceptEthicsContainer span,
.ethicsCombinedSection .chkAcceptDeclaration span {
    width: auto !important;
}

.ethicsCombinedSection .acceptEthicsContainer input[type="checkbox"],
.ethicsCombinedSection .chkAcceptDeclaration input[type="checkbox"] {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 17px;
    height: 17px;
    margin: 0 8px 0 0;
    border: 2px solid #ced4da;
    border-radius: 7px;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    cursor: pointer;
    vertical-align: -4px;
}

.ethicsCombinedSection .acceptEthicsContainer input[type="checkbox"]:checked,
.ethicsCombinedSection .chkAcceptDeclaration input[type="checkbox"]:checked {
    border-color: #630b1a;
    background: #630b1a;
}

.ethicsCombinedSection .acceptEthicsContainer input[type="checkbox"]:checked::after,
.ethicsCombinedSection .chkAcceptDeclaration input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    transform: rotate(45deg);
    border: solid #fff;
    border-width: 0 2px 2px 0;
}

.ethicsCombinedSection .declarationContent {
    margin-top: 32px;
}

.ethicsCombinedSection .DeclarationfGoodCharacterTitle {
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dee2e6;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 21px;
    text-align: left;
}

.ethicsCombinedSection .declarationQuestions > div:not(.DeclarationfGoodCharacterTitle) {
    margin-bottom: 16px;
}

.ethicsCombinedSection .declarationQuestions > div > span {
    display: block;
}

.ethicsCombinedSection .declarationQuestions table {
    margin: 6px 0 0 8px;
    border-collapse: collapse;
}

.ethicsCombinedSection .declarationQuestions table td {
    padding: 0 16px 0 0;
}

.ethicsCombinedSection .declarationQuestions input[type="radio"] {
    box-sizing: border-box;
    width: 17px;
    height: 17px;
    margin: 0 6px 0 0;
    border: 2px solid #ced4da;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    vertical-align: -4px;
}

.ethicsCombinedSection .declarationQuestions input[type="radio"]:checked {
    border-color: #630b1a;
    background: #630b1a;
    box-shadow: inset 0 0 0 4px #fff;
}

.ethicsCombinedSection .declarationConfirmation {
    margin-top: 32px;
}

.ethicsCombinedSection .declarationText p {
    margin: 0 0 12px;
}

.ethicsCombinedSection .declarationText ul {
    margin: 0 0 12px;
    padding-left: 24px;
}

.ethicsCombinedSection .declarationText li {
    margin-bottom: 8px;
}

.ethicsCombinedSection .chkAcceptDeclaration {
    margin-top: 20px;
}

.ethicsCombinedSection .declarationContent .declarationDetails {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    height: 100px !important;
    min-height: 100px !important;
    padding: 8px 10px;
    border: 1px solid #d2d2d2;
    border-radius: 5px;
    background: #fafafa;
    color: #21282c;
    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 21px;
    resize: vertical;
}

.sectionsPanel:has(.ethicsCombinedSection:not([style*="display: none"])) {
    width: min(800px, 100%);
}

.sectionsPanel.ethicsActive {
    width: min(800px, 100%);
}

.sectionsPanel:has(.ethicsCombinedSection:not([style*="display: none"])) > .bottomNavigation {
    padding-top: 31px;
    border-color: rgba(33, 40, 44, 0.12);
}

.sectionsPanel.ethicsActive > .bottomNavigation {
    padding-top: 31px;
    border-color: rgba(33, 40, 44, 0.12);
}

.cancelLinkContainer {
    display: none;
}


.fieldValidator {
    display: block !important;
    color: #e07070 !important;
    font-size: 13.5px;
    font-style: italic;
    line-height: 20px;
}

.fieldValueContainer {
    position: relative;
}

.registrationFieldValidator {
    clear: both;
    display: block !important;
    position: relative;
    width: 348px !important;
    margin-left: 0;
    padding-top: 2px;
    color: #e07070 !important;
    font-size: 13.5px !important;
    font-style: italic;
    font-weight: 400 !important;
    line-height: 20px;
}

    .registrationFieldValidator::before {
        position: absolute;
        top: -27px;
        right: -22px;
        box-sizing: border-box;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #e07070;
        color: #fff;
        content: "x";
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
        line-height: 12px;
        text-align: center;
    }

    .registrationFieldValidator[style*="display:none"],
    .registrationFieldValidator[style*="display: none"],
    .registrationFieldValidator[style*="visibility:hidden"],
    .registrationFieldValidator[style*="visibility: hidden"] {
        display: none !important;
        visibility: hidden !important;
    }

.registrationRequiredValidator {
    display: block;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: 0 !important;
    line-height: 0;
}

#initialFields .fieldContainer:has(.registrationRequiredValidator[style*="inline"]) .riTextBox,
#initialFields .fieldContainer:has(.registrationRequiredValidator[style*="inline"]) input,
#initialFields .fullFieldContainer:has(.registrationRequiredValidator[style*="inline"]) .riTextBox,
#initialFields .fullFieldContainer:has(.registrationRequiredValidator[style*="inline"]) input {
    border-color: #ff0013 !important;
}

[id$="CustomValidator1"] {
    display: block;
    width: min(800px, 100%);
    margin: 12px auto;
    color: #e07070;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    text-align: center;
}

.stepsPanel {
    box-sizing: border-box;
    width: min(1138px, 100%);
    margin: 0 auto 28px;
    border-bottom: 1px solid #d2d2d2;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    min-height: 52px;
}

.stepsLabelContainer {
    display: none !important;
}

#registrationView:has(#initialFields:not([style*="display: none"])) > .stepsPanel {
    display: none !important;
}

.step {
    float: none !important;
}

.stepInner {
    position: relative;
    box-sizing: border-box;
    min-height: 58px;
    margin-top: 30px;
    padding: 18px 10px 7px;
    border-bottom: 3px solid transparent;
    color: rgba(33, 40, 44, 0.55);
    font-size: 14.7px;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
}

.stepNameContainer {
    white-space: nowrap;
}

.stepInner.inProgress {
    border-bottom-color: #212529;
    color: #212529;
    font-weight: 700;
}

.stepInner.completed {
    color: rgba(33, 40, 44, 0.55);
    font-weight: 400;
}

.stepStatusContainer {
    display: none;
}

.stepInner.completed .stepStatusContainer {
    position: absolute;
    top: -12px;
    left: 50%;
    display: block;
    width: 18px;
    height: 18px;
    margin: 0;
    transform: translateX(-50%);
    line-height: 18px;
}

    .stepInner.completed .stepStatusContainer span {
        display: inline-flex;
        box-sizing: border-box;
        width: 18px;
        height: 18px;
        align-items: center;
        justify-content: center;
        border: 1px solid #606060;
        border-radius: 50%;
        color: transparent;
        font-size: 0;
    }

        .stepInner.completed .stepStatusContainer span::after {
            content: "✓";
            color: #606060;
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
        }

.contentContainer {
    box-sizing: border-box;
    min-height: calc(100vh - 139px);
    padding: 0 31px 31px;
    background: #f0f0f0;
}

.sectionsPanel {
    box-sizing: border-box;
    width: min(980px, 100%);
    margin: 0 auto;
}


    .sectionsPanel > .bottomNavigation {
        box-sizing: border-box;
        overflow: hidden;
        width: 100%;
        margin: -1px auto 0 !important;
        padding: 0 30px 30px;
        border: 1px solid #e8e8e8;
        border-top: 0;
        border-radius: 0 0 17px 17px;
        background: #fff;
    }

.section {
    box-sizing: border-box;
    width: 100%;
    padding: 30px 30px 1px !important;
    border: 1px solid #e8e8e8;
    border-bottom: 0;
    border-radius: 17px 17px 0 0;
    background: #fff;
}

.clubSectionTitle {
    margin: 0 0 20px;
    color: #21282c;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
}

#professionalFields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 250px));
    justify-content: center;
    column-gap: 70px;
    row-gap: 18px;
    margin: 28px auto 0;
    padding-top: 26px;
    border-top: 1.5px solid #d2d2d2;
}

    #professionalFields .professionalSelect {
        box-sizing: border-box !important;
        width: 240px !important;
        height: 43px !important;
        min-height: 43px !important;
        padding: 0 12px !important;
        border: 1px solid rgba(33, 40, 44, 0.25) !important;
        border-radius: 6px !important;
        outline: 0;
        background: #fff !important;
        color: #21282c !important;
        box-shadow: none !important;
        font-family: Inter, Arial, Helvetica, sans-serif !important;
        font-weight: 400 !important;
    }

    #professionalFields .fieldContainer {
        display: grid;
        width: auto !important;
        grid-template-columns: 1fr;
        row-gap: 6px;
        clear: none !important;
        float: none !important;
        margin: 0;
    }

    #professionalFields .fieldLabelContainer,
    #professionalFields .fieldValueContainer {
        width: auto !important;
        float: none;
    }

    #professionalFields .fieldLabelContainer {
        padding-right: 0;
        line-height: 20px;
        text-align: left;
    }

    #professionalFields .fieldValueContainer {
        min-width: 0;
    }

    #professionalFields .fieldContainer[style*="font-size: 18px"] {
        grid-column: 1 / -1;
        grid-template-columns: 1fr auto;
        align-items: center;
        justify-self: center;
        column-gap: 12px;
        margin-top: 4px;
    }

        #professionalFields .fieldContainer[style*="font-size: 18px"] .fieldLabelContainer {
            margin-left: 0 !important;
            font-size: 14.7px;
            line-height: 22px;
            text-align: right;
        }

    #professionalFields .validatorContainer {
        margin-left: 0;
    }


    #professionalFields .professionalLanguageField {
        display: grid;
        grid-template-columns: auto auto;
        align-items: start;
        justify-content: start;
        column-gap: 8px;
        row-gap: 0;
        margin-top: 0;
    }

        #professionalFields .professionalLanguageField .fieldLabelContainer {
            width: auto !important;
            padding: 0;
            line-height: 20px;
            text-align: left;
        }

        #professionalFields .professionalLanguageField .fieldValueContainer {
            width: auto !important;
            min-width: 0;
        }

    #professionalFields .professionalLanguageList {
        width: auto !important;
        margin: 0;
        border-collapse: collapse;
    }

        #professionalFields .professionalLanguageList td {
            height: 24px;
            padding: 0 0 6px 0;
            vertical-align: middle;
            white-space: nowrap;
        }

        #professionalFields .professionalLanguageList input[type="radio"] {
            width: 15px;
            height: 15px;
            margin: 0 7px 0 0;
            vertical-align: middle;
        }

        #professionalFields .professionalLanguageList label {
            display: inline !important;
            margin: 0 !important;
            vertical-align: middle;
            color: #21282c;
            font-size: 14px;
            line-height: 20px;
        }


.sectionFields {
    box-sizing: border-box;
    width: 100%;
}

.initialInstructionsContainer,
.instructions {
    box-sizing: border-box;
    margin-bottom: 14px;
    color: #333;
    font-size: 14.7px;
    line-height: 21px;
}

#initialFields {
    box-sizing: border-box;
    padding: 20px 25px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

    #initialFields .fieldContainer,
    #initialFields .fullFieldContainer {
        width: 560px;
    }

    #initialFields .InitialfieldLabelContainer {
        width: 200px !important;
        white-space: nowrap;
    }

    #initialFields .fieldValueContainer {
        width: 348px !important;
    }

.waitingOverlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    background: rgba(232, 232, 232, 0.72);
}

.waitingTextOverlay {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9001;
    display: none;
    box-sizing: border-box;
    width: min(560px, calc(100vw - 32px));
    padding: 28px 32px;
    transform: translate(-50%, -50%);
    border: 1px solid #d2d2d2;
    border-radius: 17px;
    background: #fff;
    color: #212529;
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
}

.waitingImage {
    margin-top: 18px;
}

.fieldContainer,
.fullFieldContainer,
.creditCardField {
    box-sizing: border-box;
    width: 480px;
    margin: 0 auto 12px;
}

.fieldLeft {
    float: none !important;
}

.fieldLabelContainer,
.InitialfieldLabelContainer,
.leftFieldLabelContainer {
    box-sizing: border-box;
    float: left;
    width: 160px !important;
    padding-right: 12px;
    color: #4a4a4a;
    font-size: 14.5px;
    line-height: 39px;
    text-align: right;
}

.fieldValueContainer {
    box-sizing: border-box;
    float: left;
    width: 308px !important;
}

    .fieldValueContainer .RadInput,
    .fieldValueContainer .RadComboBox,
    .fieldValueContainer input[type="text"],
    .fieldValueContainer input[type="password"],
    .fieldValueContainer select {
        width: 100% !important;
    }

    .RadInput .riTextBox,
    .RadComboBox .rcbInner,
    .fieldValueContainer input[type="text"],
    .fieldValueContainer input[type="password"],
    .fieldValueContainer select {
        box-sizing: border-box !important;
        min-height: 39px !important;
        border: 1px solid #d2d2d2 !important;
        border-radius: 5px !important;
        background: #fafafa !important;
        color: #333 !important;
        box-shadow: none !important;
        font-family: Inter, Arial, Helvetica, sans-serif !important;
        font-size: 14.685px !important;
    }

        .RadInput .riTextBox.riEmpty,
        .RadInput .riTextBox.riEmpty:focus {
            color: #8a8a8a !important;
        }

    .fieldValueContainer input::placeholder {
        color: #8a8a8a;
        font-style: italic;
        opacity: 1;
    }

.validatorContainer {
    clear: both;
    margin-left: 172px;
}

.continueLinkContainer {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding-top: 31px;
}

#initialFields .validatorContainer {
    margin-left: 212px;
}

#bottomButtons {
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
    padding-top: 30px;
}

    #bottomButtons[style*="display: block"],
    #bottomButtons[style*="display:block"] {
        display: flex !important;
    }

#personalInfoFields input[readonly] {
    background: #fafafa !important;
    color: #606060 !important;
    border-color: #d2d2d2 !important;
    cursor: not-allowed;
}

#personalInfoFields .tpa-native-date {
    box-sizing: border-box;
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    background: #fff;
    color: #212529;
    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size: 14.5px;
}

#personalInfoFields [id$="pnlPersonalInfo"] {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 420px);
    column-gap: 72px;
    row-gap: 12px;
    justify-content: center;
}

#personalInfoFields .registrationInfoRow {
    display: contents;
}

#personalInfoFields .personalInfoFields,
#personalInfoFields .billingInfoFields,
#personalInfoFields .loginInfoFields {
    display: contents;
}

#personalInfoFields .fieldContainer,
#personalInfoFields .fullFieldContainer,
#personalInfoFields [id$="pnlPassword"],
#personalInfoFields .tpa-reg-nccp,
#personalInfoFields .tpa-reg-member-id {
    display: grid;
    width: auto !important;
    min-height: 40px;
    grid-template-columns: 135px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    clear: none !important;
    float: none !important;
    margin: 0;
}

#personalInfoFields .fieldLabelContainer,
#personalInfoFields .leftFieldLabelContainer {
    width: auto !important;
    float: none;
    margin: 0;
    padding-right: 0;
    color: rgba(33, 40, 44, 0.55);
    font-size: 14.513px;
    font-weight: 400;
    line-height: 19.351px;
    text-align: right;
}

#personalInfoFields .fieldValueContainer {
    width: auto !important;
    min-width: 0;
    float: none;
    border-bottom: 0;
    color: #212529;
    font-size: 14.5px;
    line-height: 28px;
}

    #personalInfoFields .fieldValueContainer .RadInput,
    #personalInfoFields .fieldValueContainer .riSingle,
    #personalInfoFields .fieldValueContainer .riTextBox,
    #personalInfoFields .fieldValueContainer .RadComboBox,
    #personalInfoFields .fieldValueContainer input[type="text"],
    #personalInfoFields .fieldValueContainer input[type="password"],
    #personalInfoFields .fieldValueContainer table,
    #personalInfoFields .fieldValueContainer select {
        width: 100% !important;
    }

    #personalInfoFields .fieldValueContainer .riTextBox,
    #personalInfoFields .fieldValueContainer .rcbInput,
    #personalInfoFields .fieldValueContainer input[type="text"],
    #personalInfoFields .fieldValueContainer input[type="password"] {
        min-height: 34px !important;
        padding: 0 10px !important;
        border: 1px solid #d2d2d2 !important;
        border-radius: 4px !important;
        background: #fff !important;
        box-sizing: border-box;
    }

    #personalInfoFields .fieldValueContainer table,
    #personalInfoFields .fieldValueContainer tbody,
    #personalInfoFields .fieldValueContainer tr,
    #personalInfoFields .fieldValueContainer td {
        border: 0 !important;
        background: transparent !important;
    }

#personalInfoFields .tpa-gender-select option,
#personalInfoFields .tpa-native-select option {
    background: #fff;
    color: #212529;
    font-family: Inter, Arial, Helvetica, sans-serif;
}

#personalInfoFields .validatorContainer {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    clear: none;
    float: none;
    margin-left: 0;
    line-height: 0;
}

#personalInfoFields .fieldContainer:has(.fieldValidator[style*="inline"]) input,
#personalInfoFields .fieldContainer:has(.fieldValidator[style*="inline"]) select,
#personalInfoFields .fieldContainer:has(.fieldValidator[style*="inline"]) .riTextBox,
#personalInfoFields .fieldContainer:has(.fieldValidator[style*="inline"]) .rcbInner,
#personalInfoFields [id$="pnlPassword"]:has(.fieldValidator[style*="inline"]) input {
    border-color: #ff0013 !important;
}


#personalInfoFields .tpa-reg-hidden-field {
    display: none !important;
}

#personalInfoFields .cacLockerButton {
    box-sizing: border-box;
    display: inline-flex;
    width: 214px;
    min-height: 35px;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border: 1px solid rgba(10, 108, 59, 0.4);
    border-radius: 5px;
    background: #e5f1e9;
    color: #0a6c3b !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    text-decoration: none !important;
}

#personalInfoFields .tpa-reg-member-id {
    grid-column: 1;
    grid-row: 2;
}

#personalInfoFields .tpa-reg-nccp {
    grid-column: 1;
    grid-row: 1;
    transform: translateY(-8px);
}

#personalInfoFields .registrationInfoRow .cacLockerButton {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    margin-right: -224px;
    transform: translateY(-8px);
}

#personalInfoFields .registrationInfoRow .tpa-reg-business-phone {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
}

#personalInfoFields .registrationInfoRow .tpa-reg-nccp,
#personalInfoFields .registrationInfoRow .tpa-reg-member-id {
    align-self: center;
}

#personalInfoFields .registrationInfoRow .tpa-reg-member-id {
    align-self: end;
    transform: translateY(-8px);
}

#personalInfoFields .tpa-reg-first-name,
#personalInfoFields .tpa-reg-last-name,
#personalInfoFields .tpa-reg-middle-name,
#personalInfoFields .tpa-reg-gender,
#personalInfoFields .tpa-reg-date-of-birth,
#personalInfoFields .tpa-reg-email-one,
#personalInfoFields .tpa-reg-password,
#personalInfoFields .tpa-reg-security-question,
#personalInfoFields .tpa-reg-security-answer {
    grid-column: 1;
}

#personalInfoFields .tpa-reg-business-phone,
#personalInfoFields .tpa-reg-address,
#personalInfoFields .tpa-reg-city,
#personalInfoFields .tpa-reg-province,
#personalInfoFields .tpa-reg-postal-code,
#personalInfoFields .tpa-reg-options {
    grid-column: 2;
}

#personalInfoFields .tpa-reg-first-name,
#personalInfoFields .tpa-reg-business-phone {
    grid-row: 3;
}

#personalInfoFields .tpa-reg-address {
    grid-row: 3;
}

#personalInfoFields .tpa-reg-last-name,
#personalInfoFields .tpa-reg-city {
    grid-row: 4;
}

#personalInfoFields .tpa-reg-middle-name,
#personalInfoFields .tpa-reg-province {
    grid-row: 5;
}

#personalInfoFields .tpa-reg-gender,
#personalInfoFields .tpa-reg-postal-code {
    grid-row: 6;
}

#personalInfoFields .tpa-reg-date-of-birth {
    grid-row: 7;
}

#personalInfoFields .tpa-reg-options {
    grid-row: 7 / span 4;
    align-self: start;
    align-items: start;
    grid-template-columns: 190px minmax(0, 1fr);
}

    #personalInfoFields .tpa-reg-options .fieldLabelContainer,
    #personalInfoFields .tpa-reg-options .leftFieldLabelContainer {
        padding-top: 0;
        text-align: right;
    }

    #personalInfoFields .tpa-reg-options .fieldValueContainer {
        border-bottom: 0;
    }

        #personalInfoFields .tpa-reg-options .fieldValueContainer > div {
            margin-bottom: 8px;
        }

#personalInfoFields .tpa-reg-email-one {
    grid-row: 8;
}

#personalInfoFields .tpa-reg-password {
    grid-row: 9;
}

#personalInfoFields .tpa-reg-security-question {
    grid-row: 10;
    align-items: start;
}

    #personalInfoFields .tpa-reg-security-question .fieldLabelContainer,
    #personalInfoFields .tpa-reg-security-question .leftFieldLabelContainer {
        padding-top: 4px;
    }

    #personalInfoFields .tpa-reg-security-question textarea {
        min-height: 46px !important;
        resize: vertical;
    }

#personalInfoFields .tpa-reg-security-answer {
    grid-row: 11;
}

#personalInfoFields .extraField {
    border-bottom: 0;
}

#personalInfoFields .tpa-reg-email-one > .extraField {
    display: none;
}

#personalInfoFields .tpa-reg-options label {
    color: #4a4a4a;
    font-size: 14.5px;
    line-height: 19px;
}

#personalInfoFields input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0 8px 0 0;
    vertical-align: -3px;
    accent-color: #630b1a;
}

@media (max-width: 860px) {
    .registration-refresh-page,
    .course-registration-page,
    .contentContainer {
        padding-right: 16px;
        padding-left: 16px;
    }

    .registration-card,
    .divInstructorCourseSignup,
    .section {
        padding: 22px;
    }

    .fieldContainer,
    .fullFieldContainer,
    .creditCardField,
    #personalInfoFields .fieldContainer,
    #personalInfoFields .fullFieldContainer {
        width: 100%;
    }

    #personalInfoFields .personalInfoFields {
        display: block;
    }

    .fieldLabelContainer,
    .InitialfieldLabelContainer,
    .leftFieldLabelContainer,
    #personalInfoFields .fieldLabelContainer,
    #personalInfoFields .leftFieldLabelContainer,
    .fieldValueContainer,
    #personalInfoFields .fieldValueContainer {
        float: none;
        width: 100% !important;
        padding-right: 0;
        text-align: left;
    }

    .validatorContainer {
        margin-left: 0;
    }
}

#topErrorContainer {
    width: min(1120px, 100%);
    margin: 0 auto 24px;
}

#registrationView:has(#initialFields:not([style*="display: none"])) #topErrorContainer {
    margin-bottom: 0;
}

#errorBar {
    display: none;
    padding: 14px 18px;
    border: 1px solid #c0392b;
    border-radius: 6px;
    background: #fdecea;
    color: #8a1c13;
    font-size: 14px;
    line-height: 1.5;
}

    #errorBar .errorBarInner {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

        #errorBar .errorBarInner::before {
            content: "!";
            display: inline-flex;
            width: 22px;
            height: 22px;
            flex: 0 0 22px;
            align-items: center;
            justify-content: center;
            margin-top: 1px;
            border-radius: 50%;
            background: #c0392b;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            line-height: 1;
        }

    #errorBar .errorLabel {
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font-size: inherit;
        line-height: inherit;
    }

.combinedClubSection .clubEditor,
.inlineSecondClubSection .clubEditor {
    box-sizing: border-box;
    width: min(700px, 100%);
    margin: 0 auto;
    color: #21282c;
}

.combinedClubSection .clubSelectionGrid,
.inlineSecondClubSection .clubSelectionGrid {
    display: flex;
    width: 240px;
    flex-direction: column;
    gap: 8px;
}

.combinedClubSection .clubField,
.inlineSecondClubSection .clubField {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.clubEditor {
    box-sizing: border-box;
    width: min(700px, 100%);
    margin: 0 auto;
    color: #21282c;
    font-family: Inter, Arial, Helvetica, sans-serif;
}

.clubSelectionGrid {
    display: flex;
    width: 240px;
    flex-direction: column;
    gap: 8px;
}

.clubField {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.clubFieldLabel {
    display: block;
    color: #21282c;
    font-size: 14.685px;
    font-weight: 400;
    line-height: 19.579px;
}

.clubSelect,
.clubTextBox,
.clubDate {
    box-sizing: border-box;
    width: 240px;
    padding: 0 12px;
    border: 1px solid rgba(33, 40, 44, 0.25);
    border-radius: 6px;
    outline: 0;
    background: #fff;
    color: #21282c;
    box-shadow: none;
    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size: 14.685px;
}

.clubSelect {
    height: 43px;
    min-height: 43px;
}

.clubTextBox {
    height: 39px;
    min-height: 39px;
}

.clubDate {
    height: 44px;
    min-height: 44px;
    border-radius: 5px;
}

.clubHelpText {
    display: block;
    width: 100%;
    margin-top: 5px;
    color: #21282c;
    font-size: 14.685px;
    line-height: 19.579px;
}

.combinedClubSection .clubSelectionGrid .clubHelpText,
.inlineSecondClubSection .clubSelectionGrid .clubHelpText {
    box-sizing: border-box;
    width: 700px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(33, 40, 44, 0.3);
    white-space: nowrap;
}

.combinedClubSection .clubSelect,
.combinedClubSection .clubSelect,
.inlineSecondClubSection .clubSelect,
.combinedClubSection .clubTextBox,
.inlineSecondClubSection .clubTextBox,
.combinedClubSection .clubDate,
.inlineSecondClubSection .clubDate {
    box-sizing: border-box;
    width: 240px;
    padding: 0 12px;
    border: 1px solid rgba(33, 40, 44, 0.25);
    border-radius: 6px;
    outline: 0;
    background: #fff;
    color: #21282c;
    box-shadow: none;
    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size: 14.685px;
}

.combinedClubSection .clubSelect,
.inlineSecondClubSection .clubSelect {
    height: 43px;
    min-height: 43px;
}

.combinedClubSection .clubTextBox,
.inlineSecondClubSection .clubTextBox {
    height: 39px;
    min-height: 39px;
}

.combinedClubSection .clubDate,
.inlineSecondClubSection .clubDate {
    height: 44px;
    min-height: 44px;
    border-radius: 5px;
}

    .combinedClubSection .clubSelect:focus,
    .combinedClubSection .clubTextBox:focus,
    .combinedClubSection .clubDate:focus,
    .inlineSecondClubSection .clubSelect:focus,
    .inlineSecondClubSection .clubTextBox:focus,
    .inlineSecondClubSection .clubDate:focus {
        border-color: #8a8a8a;
    }

.combinedClubSection .clubHelpText,
.inlineSecondClubSection .clubHelpText {
    display: block;
    width: 100%;
    margin-top: 5px;
    color: #21282c;
    font-size: 14.685px;
    font-weight: 400;
    line-height: 19.579px;
}

.combinedClubSection .clubManualSection,
.inlineSecondClubSection .clubManualSection {
    width: 100%;
    margin-top: 18px;
    padding-bottom: 8px;
}

.combinedClubSection .clubManualHelp,
.inlineSecondClubSection .clubManualHelp {
    width: 100%;
    margin-bottom: 8px;
}

.combinedClubSection .clubManualSection .clubTextBox,
.inlineSecondClubSection .clubManualSection .clubTextBox {
    width: 240px;
}

.combinedClubSection .clubValidator,
.inlineSecondClubSection .clubValidator {
    display: block;
    color: #e07070;
    font-size: 13px;
    line-height: 18px;
}

/* Primary Club */
.clubSectionTitle {
    margin: 0 0 20px;
    color: #21282c;
    font-size: 14.685px;
    font-weight: 700;
    line-height: 19.579px;
    text-align: center;
}

.combinedClubSection .clubStatusSection {
    margin-top: 0;
    padding-top: 20px;
    border-top: 0;
}

.primaryClubEditor .clubStatusSection {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.combinedClubSection .clubStatusTitle,
.inlineSecondClubSection .clubStatusTitle {
    display: block;
    margin: 0;
    padding: 23px 0;
    color: #21282c;
    font-size: 14.685px;
    font-weight: 700;
    line-height: 19.579px;
    text-align: center;
}

.combinedClubSection .clubStatusGrid,
.inlineSecondClubSection .clubStatusGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 36px;
    row-gap: 18px;
}

    .combinedClubSection .clubStatusGrid .clubSelect,
    .combinedClubSection .clubStatusGrid .clubDate,
    .inlineSecondClubSection .clubStatusGrid .clubSelect,
    .inlineSecondClubSection .clubStatusGrid .clubDate {
        width: 100%;
    }

.addAnotherClubContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 16px 0;
    border-top: 1px solid rgba(33, 40, 44, 0.3);
    border-bottom: 1px solid rgba(33, 40, 44, 0.3);
}

.sectionsPanel:has(.inlineSecondClubSection:not([style*="display: none"])) .addAnotherClubContainer {
    display: none;
}

.addAnotherClubLink {
    color: #21282c !important;
    font-size: 14.685px;
    font-weight: 400;
    line-height: 19.579px;
    text-decoration: underline !important;
}

    .addAnotherClubLink:hover,
    .addAnotherClubLink:focus {
        color: #630b1a !important;
    }


.inlineSecondClubSection {
    box-sizing: border-box;
    width: min(700px, 100%);
    margin: 28px auto 0 !important;
    padding: 36px 0 0 !important;
    border-top: 1px solid #d2d2d2;
}

.professionalSection {
    width: 100%;
    margin: 0 auto;
}

.secondClubSectionTitle {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0 0 24px;
    text-align: center;
}

    .secondClubSectionTitle > span {
        color: #21282c;
        font-size: 14.685px;
        font-weight: 700;
        line-height: 19.579px;
    }

    .secondClubSectionTitle .removeSecondClubLink,
    #lnkRemoveSecondClub {
        position: static !important;
        display: block !important;
        margin: 0 !important;
        color: #4a4a4a !important;
        font-size: 14.685px;
        font-weight: 400;
        line-height: 19.579px;
        text-decoration: underline !important;
    }

        .secondClubSectionTitle .removeSecondClubLink:hover,
        .secondClubSectionTitle .removeSecondClubLink:focus,
        #lnkRemoveSecondClub:hover,
        #lnkRemoveSecondClub:focus {
            color: #630b1a !important;
        }

.inlineSecondClubSection .clubStatusSection {
    width: 100%;
    margin: 4px auto 0;
    padding-top: 0;
}

.noClubOption {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 28px auto 0;
    color: #21282c;
    font-size: 14.685px;
    line-height: 19.579px;
}

    .noClubOption input[type="checkbox"] {
        width: 17px;
        height: 17px;
        margin: 0;
        vertical-align: -3px;
        accent-color: #630b1a;
    }

    .noClubOption label {
        margin: 0;
        cursor: pointer;
    }

@media (max-width: 700px) {
    .clubEditor,
    .clubSelectionGrid,
    .clubSelect,
    .clubTextBox,
    .clubDate,
    .clubManualSection .clubTextBox,
    .clubHelpText,
    .inlineSecondClubSection,
    .secondClubSectionTitle,
    #professionalFields {
        width: 100%;
    }

    .clubHelpText {
        white-space: normal;
    }

    .clubStatusGrid {
        grid-template-columns: 1fr;
    }
}


.subscriptionsSection {
    box-sizing: border-box;
    width: min(800px, 100%);
    margin: 0 auto;
    padding: 30px 30px 1px !important;
    border: 1px solid rgba(33, 40, 44, 0.12);
    border-bottom: 0;
    border-radius: 17px 17px 0 0;
    background: #fff;
}

    .subscriptionsSection .sectionFields {
        min-height: 0 !important;
    }

    .subscriptionsSection .instructions {
        box-sizing: border-box;
        width: 100%;
        margin: 0 0 29px;
        padding: 0 0 8px;
        border-bottom: 1px solid rgba(33, 40, 44, 0.3);
        color: #21282c;
        font-size: 14.685px;
        font-weight: 400;
        line-height: 19.579px;
    }

    .subscriptionsSection [id$="chklstSubscriptions"] {
        width: 100%;
        border-collapse: collapse;
        color: #21282c;
        font-size: 14.513px;
        line-height: 19.351px;
    }

        .subscriptionsSection [id$="chklstSubscriptions"] > tbody > tr > td {
            width: 50%;
            padding: 0 24px 9px 0;
            vertical-align: top;
        }

        .subscriptionsSection [id$="chklstSubscriptions"] input[type="checkbox"] {
            position: relative;
            display: inline-block;
            box-sizing: border-box;
            width: 17px;
            height: 17px;
            margin: 0 7px 0 0;
            border: 2px solid rgba(33, 40, 44, 0.25);
            border-radius: 7px;
            appearance: none;
            -webkit-appearance: none;
            background: #fff;
            cursor: pointer;
            vertical-align: -3px;
        }

            .subscriptionsSection [id$="chklstSubscriptions"] input[type="checkbox"]:checked {
                border-color: #630b1a;
                background: #630b1a;
            }

                .subscriptionsSection [id$="chklstSubscriptions"] input[type="checkbox"]:checked::after {
                    position: absolute;
                    top: 1px;
                    left: 4px;
                    width: 4px;
                    height: 8px;
                    border: solid #fff;
                    border-width: 0 2px 2px 0;
                    content: "";
                    transform: rotate(45deg);
                }

        .subscriptionsSection [id$="chklstSubscriptions"] label {
            color: #21282c;
            font-family: Inter, Arial, Helvetica, sans-serif;
            font-size: 14.513px;
            font-weight: 400;
            line-height: 19.351px;
            cursor: pointer;
        }

    .subscriptionsSection .noSubscriptionsContainer {
        margin-top: 10px;
        color: #21282c;
        font-size: 14.513px;
        line-height: 19.351px;
    }

.sectionsPanel:has(.subscriptionsSection:not([style*="display: none"])) {
    width: min(800px, 100%);
}

.sectionsPanel.subscriptionsActive {
    width: min(800px, 100%);
}

    .sectionsPanel:has(.subscriptionsSection:not([style*="display: none"])) > .bottomNavigation {
        padding-top: 12px;
        border-color: rgba(33, 40, 44, 0.12);
    }

    .sectionsPanel.subscriptionsActive > .bottomNavigation {
        padding-top: 12px;
        border-color: rgba(33, 40, 44, 0.12);
    }

@media (max-width: 600px) {
    .section.backgroundCheckCombinedSection {
        padding: 24px 20px 0 !important;
    }

    .backgroundCheckCombinedSection .documentUploadRow {
        display: block;
    }

    .backgroundCheckCombinedSection .documentUploadLabel {
        display: block;
        margin-bottom: 8px;
        white-space: normal;
    }

    .backgroundCheckCombinedSection .documentFilePicker {
        gap: 8px;
    }

    .backgroundCheckCombinedSection .documentFileSelect {
        width: 110px !important;
        flex-basis: 110px;
    }

    .section.ethicsCombinedSection {
        padding: 24px 20px 0 !important;
    }

    .ethicsCombinedSection .ethicsDocumentContainer,
    .ethicsCombinedSection .ethicsDocument {
        height: 220px;
    }

    .sectionsPanel:has(.ethicsCombinedSection:not([style*="display: none"])) > .bottomNavigation,
    .sectionsPanel.ethicsActive > .bottomNavigation {
        padding: 22px 20px 24px;
    }

    .subscriptionsSection {
        padding: 24px 20px !important;
    }

        .subscriptionsSection [id$="chklstSubscriptions"] > tbody > tr > td {
            display: block;
            width: 100%;
            padding-right: 0;
        }

    .sectionsPanel:has(.subscriptionsSection:not([style*="display: none"])) > .bottomNavigation {
        padding: 22px 20px 24px;
    }

    .sectionsPanel.subscriptionsActive > .bottomNavigation {
        padding: 22px 20px 24px;
    }
}

/* Payment step */
.sectionsPanel.paymentActive,
.sectionsPanel:has(.paymentSection:not([style*="display: none"])) {
    width: min(800px, 100%);
}

.section.paymentSection {
    box-sizing: border-box;
    width: min(800px, 100%);
    margin: 0 auto;
    padding: 30px 25px 0 !important;
    border: 1px solid rgba(33, 40, 44, 0.12);
    border-bottom: 0;
    border-radius: 17px 17px 0 0;
    background: #fff;
    color: #21282c;
}

.paymentSection > .sectionFields {
    padding: 0 !important;
}

.paymentSection .summaryHeaderContainer {
    margin-bottom: 20px;
    padding: 0 0 8px;
    border-bottom: 1px solid #ced4da;
    font-size: 14.685px;
    font-weight: 700;
    line-height: 20px;
}

.paymentSection .paymentLayout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.paymentSection .summaryContainer,
.paymentSection .paymentFields,
.paymentSection .paymentFieldsInner,
.paymentSection .paymentCardFields {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
}

.paymentSection .summaryTableContainer {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(33, 40, 44, 0.3);
    border-radius: 6px;
    background: #fff;
}

.paymentSection .paymentSummaryTable {
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0;
    background: #fff;
    color: #21282c;
    font-size: 14px;
    line-height: 21px;
}

.paymentSection .paymentSummaryTable th,
.paymentSection .paymentSummaryTable td {
    box-sizing: border-box;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid rgba(33, 40, 44, 0.12);
    background: #fff;
    text-align: left;
}

.paymentSection .paymentSummaryTable th {
    font-weight: 700;
}

.paymentSection .paymentSummaryTable th:last-child,
.paymentSection .paymentSummaryTable td:last-child,
.paymentSection .summary_Total,
.paymentSection .summaryAmountHeader {
    width: 105px;
    text-align: right !important;
    white-space: nowrap;
}

.paymentSection .paymentSummaryTable tr:last-child td {
    border-bottom: 0;
}

.paymentSection .paymentSummaryTable .summary_FullTotalRow td {
    background: #f0f0f0;
    font-weight: 700;
}

.paymentSection .paymentFieldsInner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.paymentSection .paymentSecurityMessage {
    display: block;
    width: 100%;
    min-height: 57px;
    margin: 0 0 12px;
    color: #21282c;
    font-size: 12.5px;
    line-height: 19px;
    text-align: left;
}

.paymentSection .creditCardDetails {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 16px 18px 14px;
    border: 1px solid rgba(33, 40, 44, 0.3);
    border-radius: 6px;
    background: #fff;
}

.paymentSection .creditCardLegend {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    color: #21282c;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 20px;
}

.paymentSection .creditCardField {
    display: grid;
    width: 100%;
    min-height: 35px;
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin: 0 0 12px;
}

.paymentSection .creditCardField:last-child {
    margin-bottom: 0;
}

.paymentSection .creditCardField .fieldLabelContainer,
.paymentSection .creditCardField .leftFieldLabelContainer {
    float: none;
    width: auto !important;
    padding: 0;
    color: rgba(33, 40, 44, 0.55);
    font-size: 13.5px;
    line-height: 19px;
    text-align: right;
}

.paymentSection .creditCardField .fieldValueContainer {
    float: none;
    width: auto !important;
    min-width: 0;
}

.paymentSection .creditCardField .validatorContainer {
    grid-column: 2;
    margin: -8px 0 0;
}

.paymentSection .creditCardField input[type="text"],
.paymentSection .creditCardField input[type="password"] {
    box-sizing: border-box;
    width: 100% !important;
    min-height: 35px !important;
    padding: 7px 10px;
    border: 1px solid rgba(33, 40, 44, 0.3) !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: #21282c !important;
    box-shadow: none !important;
    font-size: 13px !important;
}

.paymentSection .creditCardField:has(.fieldValidator[style*="inline"]) input[type="text"],
.paymentSection .creditCardField:has(.fieldValidator[style*="inline"]) input[type="password"] {
    border-color: #ff0013 !important;
}

.paymentSection [id$="pnlEnterCardNumber"] > div {
    float: none !important;
}

.paymentSection .expirySelects {
    display: flex;
    gap: 8px;
}

.paymentSection .paymentExpirySelect {
    box-sizing: border-box;
    width: 80px !important;
    min-width: 80px;
    height: 35px;
    min-height: 35px !important;
    padding: 0 10px;
    border: 1px solid rgba(33, 40, 44, 0.3) !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: #21282c !important;
    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size: 13px !important;
}


.paymentSection .paymentMessageContainer {
    margin: 12px 0;
    color: #630b1a;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
}

.paymentSection .paymentButtonContainer {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 0;
}

.paymentSection .PaymentButton {
    width: min(365px, 100%) !important;
    min-height: 40px;
    height: auto;
    padding: 8px 16px;
    white-space: normal;
    line-height: 19px;
}

.sectionsPanel.paymentActive > .bottomNavigation,
.sectionsPanel:has(.paymentSection:not([style*="display: none"])) > .bottomNavigation {
    box-sizing: border-box;
    width: 100%;
    margin: -1px auto 0 !important;
    padding: 31px 25px 24px;
    border: 1px solid rgba(33, 40, 44, 0.12);
    border-top: 0;
    border-radius: 0 0 17px 17px;
    background: #fff;
}

.sectionsPanel.paymentActive .nextLink,
.sectionsPanel:has(.paymentSection:not([style*="display: none"])) .nextLink {
    display: none !important;
}

.sectionsPanel.paymentActive .cancelLinkContainer,
.sectionsPanel:has(.paymentSection:not([style*="display: none"])) .cancelLinkContainer {
    display: block;
}

@media (max-width: 760px) {
    .section.paymentSection {
        padding: 24px 20px 0 !important;
    }

    .paymentSection .paymentLayout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .paymentSection .creditCardField {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .sectionsPanel.paymentActive > .bottomNavigation,
    .sectionsPanel:has(.paymentSection:not([style*="display: none"])) > .bottomNavigation {
        padding: 24px 20px;
    }
}

@media (max-width: 480px) {
    .paymentSection .creditCardField {
        display: block;
    }

    .paymentSection .creditCardField .fieldLabelContainer,
    .paymentSection .creditCardField .leftFieldLabelContainer {
        margin-bottom: 6px;
        text-align: left;
    }

    .paymentSection .creditCardField .validatorContainer {
        margin: 4px 0 0;
    }
}