.joinRenewFormRow {
    margin-bottom: 100px;
}

#joinRenewContainer {
    border: 2px solid #E5E5E5;
    border-radius: 8px;
}

    #joinRenewContainer .joinRenewModuleHeading {
        font: 400 23px/32px Lora, sans-serif;
        color: #2B2F32;
        padding-bottom: 20px;
    }

    #joinRenewContainer .stepsNavigation {
        text-align: center;
        padding: 15px 0 0 0;
        border-bottom: 2px solid #E5E5E5;
        margin-bottom: 0;
    }

    #joinRenewContainer .btnJoinRenewFlowStep {
        text-align: center;
        color: #ABAFB1;
        cursor: pointer;
    }

        #joinRenewContainer .btnJoinRenewFlowStep.disabled {
            pointer-events: none;
        }

    #joinRenewContainer .joinRenewInputGroup:not(:last-child):not(.twoFundsDonation) {
        margin-bottom: 20px;
    }

    #joinRenewContainer .joinRenewModuleSubheading,
    #joinRenewContainer .btnJoinRenewFlowStep,
    #joinRenewContainer .summaryInfoSection,
    .donationFundMobile {
        font: 400 16px/24px DM Sans, sans-serif;
        text-align: left;
    }

    #joinRenewContainer .btnJoinRenewFlowStep {
        display: inline-block;
        padding: 0 5px 12px 5px;
        border-bottom: 4px solid transparent;
        margin-bottom: -3px;
    }

        #joinRenewContainer .btnJoinRenewFlowStep:not(:last-child) {
            margin-right: 20px;
        }

        #joinRenewContainer .btnJoinRenewFlowStep.active {
            border-bottom: 3px solid #5570F1;
            color: #2B2F32;
        }

    #joinRenewContainer .joinRenewStep {
        padding: 40px 40px 0 40px;
    }

    #joinRenewContainer .membershipForm {
        padding-bottom: 40px;
    }

    #joinRenewContainer .joinRenewStepHeading {
        font: 600 16px/24px DM Sans, sans-serif;
        color: #2B2F32;
        padding: 30px 0 15px 0;
    }

    #joinRenewContainer .joinRenewSectionHeading {
        font: 600 16px/24px DM Sans, sans-serif;
        color: #2B2F32;
        padding: 10px 0px;
    }

    #joinRenewContainer .joinRenewInputGroup .joinRenewGroupLabel {
        font: 400 12px/normal DM Sans, sans-serif;
        color: #5E6366;
    }

    #joinRenewContainer .joinRenewInputGroup .joinRenewInput,
    #joinRenewContainer .joinRenewInputGroup .selfDescribedInput,
    #joinRenewContainer .joinRenewInputGroup textarea {
        width: 100%;
        height: 52px;
        box-sizing: border-box;
        padding: 8px 16px;
        border: 1px solid #CFD3D4;
        border-radius: 8px;
        margin-top: 10px;
    }

    #joinRenewContainer .joinRenewInputGroup.error .joinRenewInput,
    #joinRenewContainer .joinRenewInputGroup.error .selfDescribedInput {
        border-color: #F57E77;
    }

    #joinRenewContainer .joinRenewInputGroup.error .validationLabel {
        color: #F57E77;
    }

    #joinRenewContainer .joinRenewInputGroup textarea {
        min-height: 150px;
        padding: 16px;
        color: #5E6366;
    }

    #joinRenewContainer .joinRenewInputGroup .joinRenewInput,
    #joinRenewContainer .joinRenewInputGroup .selfDescribedInput,
    #joinRenewContainer .joinRenewInputGroup .joinRenewInput::placeholder,
    #joinRenewContainer .joinRenewInputGroup .selfDescribedInput::placeholder,
    #joinRenewContainer .joinRenewInputGroup .joinRenewLabel,
    #joinRenewContainer .joinRenewInputGroup textarea {
        font: 400 16px/normal DM Sans, sans-serif;
        text-align: left;
        color: #2B2F32;
    }

        #joinRenewContainer .joinRenewInputGroup .joinRenewInput:focus-visible,
        #joinRenewContainer .joinRenewInputGroup .selfDescribedInput:focus-visible,
        #joinRenewContainer textarea:focus-visible {
            outline: none !important;
            border-color: #5570F1;
        }

    #joinRenewContainer .joinRenewInputGroup .joinRenewLabel {
        margin-top: 10px;
        padding-left: 3px;
    }


    #joinRenewContainer .btnJoinRenewFlowNavigationBtn,
    .membershipError .btnJoinRenewFlowNavigationBtn {
        width: 100%;
        height: 52px;
        box-sizing: border-box;
        padding: 17px 16px 17px 16px;
        border-radius: 8px;
        margin-bottom: 15px;
    }

    #joinRenewContainer .joinRenewModuleInfo {
        font: 400 14px/normal DM Sans, sans-serif;
        color: #696A6A;
        padding: 0 40px 40px 40px;
    }

    #joinRenewContainer .hiddenJoinRenewGroup {
        display: none !important;
    }

    #joinRenewContainer .careerStageExplanation div {
        font: 400 14px/normal DM Sans, sans-serif;
        color: #ABAFB1;
        margin-top: 5px;
    }

    #joinRenewContainer select:disabled {
        background-color: #DDE2E5;
    }

    #joinRenewContainer #btnJoinRenewFlowContinue,
    .membershipSuccess #btnJoinRenewFlowContinue,
    .membershipError #btnJoinRenewFlowBack {
        font: 400 20px/normal DM Sans, sans-serif;
        color: #ffffff;
        height: 60px;
        background-color: #5570F1;
    }

        #joinRenewContainer #btnJoinRenewFlowContinue:hover,
        .membershipSuccess #btnJoinRenewFlowContinue:hover,
        .membershipError #btnJoinRenewFlowBack:hover {
            color: #5570F1 !important;
            background-color: #ffffff;
            border: 1px solid #5570F1;
        }

        #joinRenewContainer #btnJoinRenewFlowContinue:focus,
        #joinRenewContainer #btnJoinRenewFlowContinue:focus-visible,
        .membershipSuccess #btnJoinRenewFlowContinue:focus,
        .membershipSuccess #btnJoinRenewFlowContinue:focus-visible,
        .membershipError #btnJoinRenewFlowBack:focus,
        .membershipError #btnJoinRenewFlowBack:focus-visible {
            outline: none !important;
        }

        #joinRenewContainer #btnJoinRenewFlowContinue:disabled,
        #joinRenewContainer #btnJoinRenewFlowContinue:disabled:hover {
            color: #ffffff !important;
            border: 1px solid #ADADAD;
        }

        #joinRenewContainer #btnJoinRenewFlowContinue:disabled {
            background-color: #ADADAD;
        }

    #joinRenewContainer #btnJoinRenewFlowBack,
    .membershipError #btnJoinRenewFlowContinue {
        font: 400 20px/normal DM Sans, sans-serif;
        color: #000000;
        height: 60px;
        background-color: #ffffff;
        border: 1px solid #000000;
    }

        #joinRenewContainer #btnJoinRenewFlowBack:hover,
        .membershipError #btnJoinRenewFlowContinue:hover {
            color: #ffffff !important;
            background-color: #000000;
            border: 1px solid #ffffff;
        }

        #joinRenewContainer #btnJoinRenewFlowBack:focus,
        #joinRenewContainer #btnJoinRenewFlowBack:focus-visible,
        .membershipError #btnJoinRenewFlowContinue:focus,
        .membershipError #btnJoinRenewFlowContinue:focus-visible {
            outline: none !important;
        }

    #joinRenewContainer .stepSubmitNavigation {
        margin-top: 40px;
    }

    #joinRenewContainer .joinRenewModuleInfo.error {
        color: #F57E77;
    }

    #joinRenewContainer .joinRenewRow .joinRenewCol:nth-child(2n+1) {
        padding-left: 0px;
    }

    #joinRenewContainer .joinRenewRow .joinRenewCol:nth-child(2n+2) {
        padding-right: 0px;
    }

    #joinRenewContainer .joinRenewRow .col-sm-12:first-child {
        padding-left: 0px;
    }

    #joinRenewContainer .joinRenewTwoColumnGrid {
        padding-bottom: 20px;
    }

    #joinRenewContainer .donationValues {
        padding-bottom: 10px;
    }

    #joinRenewContainer .joinRenewRadioButton {
        width: 20px;
        height: 20px;
        box-sizing: border-box;
        border: 3px solid white;
        border-radius: 4px;
        outline: 2px solid #CFD3D4;
        margin-top: 0px;
        margin-right: 5px;
        appearance: none;
        background: white;
        vertical-align: middle;
    }

        #joinRenewContainer .joinRenewRadioButton:checked,
        .ethnicityContainer input[type='checkbox']:checked {
            background-color: #5570F1;
            outline: 2px solid #5570F1;
            background-image: url(../../images/tick.png);
            background-size: cover;
        }

            #joinRenewContainer .joinRenewRadioButton:checked + label:before {
                width: 30px;
            }

    #joinRenewContainer #OtherAmount {
        width: 100%;
        height: 34px;
        font: 400 12px/normal DM Sans, sans-serif;
        text-align: right;
        color: #83898C;
        border: 1px solid #CFD3D4;
        border-radius: 8px;
    }

    #joinRenewContainer .giftInputLabel {
        color: #5E6366;
    }

    #joinRenewContainer .joinRenewRowDonate.joinRenewRowDonatePadding {
        padding-bottom: 25px;
    }

    #joinRenewContainer #customAmountLabel {
        line-height: 34px;
    }

    #joinRenewContainer .cardIcons svg {
        width: 35px;
    }

    #joinRenewContainer .donationRangeValues,
    #joinRenewContainer .splitDonationRangeValues {
        font: 400 13px/normal DM Sans, sans-serif;
        color: #F57E77;
        display: none;
        margin-top: 5px;
    }

    #joinRenewContainer .splitDonationRangeValues {
        color: #ABAFB1;
    }

.joinRenewDisabled {
    opacity: 0.7;
    pointer-events: none;
}

.joinRenewCalendar {
    background-image: url(../../images/calendar-icon.png);
    background-repeat: no-repeat;
    background-position: center right 10px;
    padding-right: 40px !important;
    background-size: 20px;
}

.bootstrap-datetimepicker-widget {
    color: black;
}

.ethnicityContainer {
    margin-top: 10px;
}

    .ethnicityContainer .checkboxInputGroup:not(:last-of-type) {
        margin-bottom: 16px;
    }

    .ethnicityContainer .ethnicityContainerCenter {
        display: flex;
        align-items: center;
    }

    .ethnicityContainer .ethnicityInputContainer {
        display: flex;
    }

    .ethnicityContainer input[type='checkbox'] {
        width: 25px;
        height: 25px;
        border-radius: 8px;
        vertical-align: middle;
        border: 1px solid #CFD3D4;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        cursor: pointer;
        margin-top: 0;
        margin-right: 8px;
    }

        .ethnicityContainer input[type='checkbox']:checked {
            border: 3px solid white;
            border-radius: 4px;
            appearance: none;
        }

        .ethnicityContainer input[type='checkbox']:disabled {
            background-color: #CFD3D4;
        }

#joinRenewContainer .joinRenewInputGroup .joinRenewInput.ethnicityInput {
    margin-top: 20px;
}

#joinRenewContainer .summaryInfoSection {
    display: flex;
    margin-top: 16px;
}

    #joinRenewContainer .summaryInfoSection .summaryLabel {
        width: 70%;
    }

        #joinRenewContainer .summaryInfoSection .summaryLabel .summaryMainLabel,
        #joinRenewContainer .summaryInfoSection:not(.summaryTotalAmount) .summaryPrice {
            font-weight: 700;
        }

    #joinRenewContainer .summaryInfoSection .summaryPrice {
        width: 30%;
        text-align: right;
    }

    #joinRenewContainer .summaryInfoSection.summaryTotalAmount {
        font: 400 23px/32px Lora, sans-serif;
        margin-top: 32px;
    }

#joinRenewContainer .summarySublabel {
    color: #AFB1AB;
    margin-top: 8px;
    width: 70%;
}

#joinRenewContainer .learnMore {
    margin-bottom: 25px;
}

    #joinRenewContainer .learnMore a {
        color: #ABAFB1;
        background-color: transparent;
        border-color: #ABAFB1;
    }

        #joinRenewContainer .learnMore a:hover {
            color: #5570F1;
            border-color: #5570F1;
        }

.membershipSuccess {
    text-align: center;
}

    .membershipSuccess .membershipSuccessHeading {
        font-size: 41px;
        line-height: 49px;
        font-family: Lora, sans-serif;
    }

    .membershipSuccess .membershipSuccessSubheading {
        font-size: 23px;
        line-height: 32px;
        font-weight: 400;
        font-family: DM Sans, sans-serif;
        margin-top: 32px;
    }

    .membershipSuccess .imageContainer {
        width: 50%;
        margin: 32px auto 0 auto;
    }

        .membershipSuccess .imageContainer img {
            width: 100%;
        }

    .membershipSuccess .btnJoinRenewFlowNavigationBtn {
        width: 50%;
        margin-top: 48px;
        margin-bottom: 40px;
    }


    .membershipSuccess #btnJoinRenewFlowContinue {
        display: inline-block;
        padding: 17px 16px 17px 16px;
        border-radius: 8px;
        min-width: fit-content;
    }

.valuePropsOfferings.fullWidthContainer {
    margin-right: 0px;
    margin-left: 0px;
    position: relative;
}

.valuePropsOfferings {
    background-color: #EDF2F4;
    padding: 64px 0;
}

    .valuePropsOfferings .innerContainer {
        margin: auto;
    }

    .valuePropsOfferings .offering:hover {
        transform: scale(1.01);
        transition-property: transform;
        transition-duration: 0.3s;
    }

    .valuePropsOfferings .heading {
        margin-top: 16px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .valuePropsOfferings .subheading {
        margin-top: 8px;
        margin-bottom: 0;
        padding: 0;
        border: 0;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .valueProps .icon svg {
        font-size: 48px;
        color: #000;
    }

.valueProps .heading {
    font: 400 24px/31px DM Sans, sans-serif;
    color: #000;
}

.valueProps .subheading {
    font: 400 16px/24px DM Sans, sans-serif;
    color: #555555;
}

.valueProps .ctaButton {
    margin-top: 32px;
    text-align: center;
}

.offerings .title {
    font: 400 32px/48px Lora, sans-serif;
    margin-bottom: 32px;
}

.offerings .offeringImage {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background-size: cover;
}

.offerings div.offeringImage {
    background-color: #D9D9D9;
}

.offerings .heading {
    font: 700 25px/37px DM Sans, sans-serif;
    color: #242424;
}

.offerings .subheading {
    font: 500 20px/30px DM Sans, sans-serif;
    color: #898989;
}

.offerings a {
    display: block;
    padding: 0;
    border: 0;
    background: none;
}

.membershipError {
    width: 70%;
    margin: auto;
    text-align: center;
}

    .membershipError .membershipErrorHeading {
        font: 500 45px/64px Lora, sans-serif;
    }

    .membershipError .membershipErrorDescription {
        font: 400 23px/32px DM Sans, sans-serif;
        margin-top: 16px;
    }

    .membershipError .stepSubmitNavigation {
        width: 70%;
        margin-top: 48px;
    }

.showOnMobile {
    display: none;
}

.unsuccssfullPaymentButtonGroup {
    margin-bottom: 25px;
}

@media (min-width: 768px) {
    #main-container {
        overflow: inherit;
    }
}

@media (max-width: 991px) {
    .joinRenewCol {
        padding: 0;
    }

    .ethnicityContainer .joinRenewCol:first-of-type .checkboxInputGroup:not(:last-of-type) {
        margin-bottom: 16px;
    }

    .valueProp:not(:last-of-type),
    .offering:not(:last-of-type) {
        margin-bottom: 32px;
    }

    #joinRenewContainer .joinRenewStep {
        padding: 32px 16px 0 16px;
    }

    #joinRenewContainer .btnJoinRenewFlowStep {
        font: 400 12px/16px DM Sans, sans-serif;
        color: #696A6A;
        padding: 0 5px 16px 5px;
    }

    #joinRenewContainer .joinRenewModuleHeading {
        font: 400 21px/32px Lora, sans-serif;
        padding-bottom: 8px;
    }

    #joinRenewContainer .joinRenewModuleSubheading {
        font: 400 14px/24px DM Sans, sans-serif;
    }

    #joinRenewContainer .joinRenewInputGroup .joinRenewInput,
    #joinRenewContainer .joinRenewInputGroup .selfDescribedInput,
    #joinRenewContainer .joinRenewInputGroup .joinRenewInput::placeholder,
    #joinRenewContainer .joinRenewInputGroup .selfDescribedInput::placeholder,
    #joinRenewContainer .joinRenewInputGroup .joinRenewLabel,
    #joinRenewContainer .joinRenewInputGroup textarea {
        font: 400 14px/18px DM Sans, sans-serif;
    }

    #joinRenewContainer .joinRenewInputGroup .joinRenewLabel {
        display: inline;
    }

    #joinRenewContainer .studentInputGroup,
    #joinRenewContainer .nonStudentGroup,
    #joinRenewContainer .isVoterSubGroup,
    #joinRenewContainer #anonymousDonationSubGroup {
        margin-top: 10px;
    }

    .ethnicityContainer {
        margin-top: 0;
    }

        .ethnicityContainer .joinRenewCol {
            margin-top: 16px;
        }

    .professionalBackground .joinRenewCol:not(:last-of-type),
    .joinRenewTwoColumnGrid .joinRenewCol:not(:last-of-type) {
        margin-bottom: 16px;
    }

    #joinRenewContainer .joinRenewRowDonate.joinRenewRowDonatePadding {
        padding-bottom: 15px;
    }

    .donationValues .col-md-3.col-sm-12.joinRenewColContainer {
        width: fit-content;
        display: inline-block;
        margin-top: 10px;
        padding-left: 0;
        padding-right: 15px;
    }

    #joinRenewContainer .stepSubmitNavigation,
    .membershipError .stepSubmitNavigation,
    .membershipSuccess .btnJoinRenewFlowNavigationBtn {
        margin-top: 32px;
    }

    #joinRenewContainer .btnJoinRenewFlowNavigationBtn,
    .membershipError .btnJoinRenewFlowNavigationBtn {
        margin-bottom: 16px;
    }

    #joinRenewContainer .joinRenewModuleInfo {
        padding: 0 16px 40px 16px;
        color: #ABAFB1;
    }

    .membershipError {
        width: 100%;
    }

        .membershipError .membershipErrorHeading,
        .membershipSuccess .membershipSuccessHeading {
            font: 500 36px/46px Lora, sans-serif;
        }

        .membershipError .membershipErrorDescription,
        .membershipSuccess .membershipSuccessSubheading {
            font: 400 16px/22px DM Sans, sans-serif;
        }

    .membershipSuccess {
        text-align: left;
        padding: 0 16px;
        display: flex;
        flex-flow: row wrap;
        flex-direction: column;
    }

        .membershipSuccess .membershipSuccessHeading {
            order: 1;
        }

        .membershipSuccess .membershipSuccessSubheading {
            order: 2;
            margin-top: 16px;
        }

        .membershipSuccess .imageContainer {
            width: 100%;
            order: 3;
        }

        .membershipSuccess #btnJoinRenewFlowContinue {
            width: 100%;
            order: 4;
        }

    .offerings .heading {
        font: 700 20px/30px DM Sans, sans-serif;
    }

    .offerings .subheading {
        font: 500 14px/20px DM Sans, sans-serif;
    }

    .hideOnMobile {
        display: none;
    }

    .showOnMobile {
        display: block;
    }

    .membershipTypeLabelMobile {
        font: 400 14px/24px DM Sans, sans-serif;
    }

    .membershipTypeLabelMobile,
    .donationFundMobile,
    #joinRenewContainer .summarySublabel {
        width: 100%;
    }

    .membershipTypeLabelMobile,
    .donationFundMobile {
        margin-top: 8px;
    }

    #joinRenewContainer .summaryInfoSection .summaryMainLabel {
        font-size: 14px;
    }

    .leftAlignMobile .joinRenewColContainer,
    .leftAlignMobile .joinRenewCol {
        padding-left: 0;
    }

    #joinRenewContainer .stepSubmitNavigation .joinRenewRow {
        flex-direction: column-reverse;
        display: flex;
    }

    .unsuccssfullPaymentButtonGroup {
        margin-bottom: 17px;
    }
}

@media (min-width: 992px) {
    #joinRenewContainer .joinRenewColContainer {
        padding: 0;
    }

    .membershipSuccess {
        padding-left: 15%;
        padding-right: 15%;
    }
}