anglicanaid.css

body {
    font-family: Lato,Arial,Helvetica,sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    -webkit-overflow-scrolling: touch;
    color: #616161;
}

/*#page_block_below_fold,
#page_block_below_fold .section-block {
    height: auto !important;
}
*/

#page_block_below_fold .form-container {
    position: relative;
    background-color: #fff;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,.08);
    z-index: 1;
    height:1300px;
}

#page_block_below_fold .form-container > *{
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    height: auto !important;
}

@media (min-width: 64em) {
    #page_block_below_fold .form-container {
        padding: 40px 20px;
        margin-left: 40px;
    }
}

#bbox-root {
    min-height: 300px;
}

#bbox-msg-wrapper img {
    display: block;
    margin: auto;
}
/*
#element-2 {
    top: 0;
    position: relative;
    width: 100%;
}*/

#page_block_below_fold .form-container h6 {
    font-size: 30px !important;
    line-height: 1.3 !important;
    font-weight: 300;
    text-align: center !important;
    margin: 0 auto 30px;
    max-width: 440px;
    color: #000;
}

#page_block_below_fold .form-container h6:before {
    content: "";
    bottom: -10px;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: rgba(0,0,0,.05);
    position: absolute;
}

.BBFormSection {
    display: none;
}

#reCAPTCHASection.BBFormSection{
    
    display:block;
}

.BBFormContainer[data-bbox-part-id="130d676f-6384-483a-8ad6-34d7f5b901a2"] #reCAPTCHADisclosure{
    
    margin-left:0 !important;
}

body.show-payment-step #mongo-form  .BBFormSection.BBFormButtonRow,body.show-payment-step #mongo-form .BBFormSection.BBDFormSectionPaymentInfo{
    
    display:block;
}

div.BBFormErrorBlock.BBFormInlineError {
    display: block !important;
    }

/*

.BBFormSection.BBFormSectionRecurrenceInfo{
    
    display:block;
}

.BBFormSection.BBDFormSectionGiftInfo {
    display: block;
}
*/

.BBFormSectionRecurrenceInfo,
.BBDFormSectionBillingInfo {
/*  display: block;*/
}

#mongo-form #bboxdonation_recurrence_divRecurrenceInfo .BBRecurrenceFieldContainer{
    
    display:none;
}

#mongo-form .BBFormContainer .BBFormFieldContainer {
    margin: 0 auto 2rem;
    padding: 0 10px;
}

#mongo-form .donation-highlight-text{
 margin-bottom:25px; 
}

.donate-form__steps {
    padding: 0;
    display: flex;
    list-style: none;
    margin: 0 auto 30px;
    justify-content: space-between;
    max-width: 440px;
    opacity: 0;
}

.donate-form__step {
    text-align: center;
    padding-bottom: 15px;
    color: #000;
}

.donate-form__step--current {
    border-bottom: 3px solid rgba(71,108,122,.5);
}

.donate-form__step__index {
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.donate-form__step__label {
    font-size: 20px;
}

.BBFormRadioList .BBFormRadioItem {
    width: 47%;
    display: inline-block !important;
}

.BBFormRadioList .BBFormRadioItem:last-child {
    width: 96%;
    display: block !important;
}



.BBFormRadioButtonContainer {
    display: block;
    width: 100%;
    clear: both;
}

.BBFormRadioList .BBFormRadioItem label {
    display: flex !important;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    text-align: center !important;
    border: 2px solid #eaeaea !important;
    padding: 20px 25px !important;
    margin-bottom: 10px;
    position: relative;
    border-radius: 0 !important;
    float: none !important;
}

#mongo-form .BBFormRadioLabelGivingLevelOther {
    flex-direction: unset;
}

.BBFormRadioList .BBFormRadioItem label:hover {
    background: none !important;
}

.BBFormRadioList .BBFormRadioItem label .BBFormRadioAmount,
.BBFormRadioList .BBFormRadioItem label .BBFormRadioDescriptionOther {
    color: #000;
    font-size: 24px;
    margin-bottom: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    flex-grow: 0;
}

.BBFormSectionHeading,
.BBFormRadioLabelGivingLevelOther .BBFormRadioDescription {
    display: none !important;
}


#mongo-form .BBFormRadioLabelGivingLevelOther .BBFormGiftOtherAmount {
    display: block;
    font-size: 24px;
    line-height: 40px;
    border: none;
    border-bottom: 2px solid rgba(0,0,0,.05);
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    white-space: nowrap;
    max-width: 70%;
    margin-left: 20px;
    margin-bottom: 0;
}

.BBFormRadioList .BBFormRadioItem label .BBFormRadioDescription {
    color: #616161;
    flex-grow: 1;
    font-size: 16px;
    line-height: 24px;
}

@media (min-width: 48em) {
.BBFormRadioList .BBFormRadioItem label .BBFormRadioAmount,
.BBFormRadioList .BBFormRadioItem label .BBFormRadioDescriptionOther {
    margin-bottom: 0;
    margin-right: 0px;
    flex-basis: 0px;
}
}

#mongo-form .BBFormRadioLabelGivingLevelOther span {
    top: 0 !important;
    visibility: visible;
    text-overflow: unset;
    overflow: visible;
}

.BBFormRadioList .BBFormRadioItem label.BBFormRadioLabelGivingLevelSelected {
    border-color: #476c7a !important;
    background-color: #eef3f7 !important;
    cursor: default !important;
}

.BBFormRadioLabelGivingLevelSelected .BBFormRadioDescriptionOther{
    
    width:unset !important;
}

#mongo-form .has-inline-error+*, 
#mongo-form .has-inline-error>input {
    border-color: #e91c0d!important;
}

#mongo-form .BBFormContainer[data-bbox-part-id="130d676f-6384-483a-8ad6-34d7f5b901a2"] .BBFormSortCodeTextbox{
    
    width:150px !important;

}

#mongo-form #bboxdonation_payment_txtCSC{
    
    width:150px !important;
}

#mongo-form div#bboxdonation_divThanks{
line-height:27px !important;
}

#mongo-form input[type=email], 
#mongo-form input[type=tel], 
#mongo-form input[type=text], 
#mongo-form select,
#mongo-form textarea {
    height: 45px;
    background-color: #f7f7f7;
    width: 100%;
    padding: 0 15px;
    border: none;
    border-bottom: 2px solid rgba(0,0,0,.05);
    outline: none;
    opacity: 1;
    line-height: 1.15;
    font-size: 16px;
    color: #000;
    border-radius: 0 !important;
    max-width: 100%;
}

#mongo-form textarea {
    resize: vertical;
    min-height: 55px;
    padding: 16px 15px 10px;
}

#mongo-form select {
    padding-right: 40px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAYAAAB4MH11AAAABGdBTUEAALGPC/xhBQAAAetJREFUOBGlUs9LFVEUPucO+h7owhaZkG76HxQLadubkLBcKdVKRORNttAgxwfR9BBJ/PVaSAlB9kMQf230LRUX6s62bitIFLSF4mB3TufMY5xh5hVIF4b73e985zvDOQfN7KBJgO8IwEOlnhWnnDn4j3O3L9fpeXoECBEUditCeEtA1wGogTz95U526BURs5c8kiO5WutPRFAvnuTRNGay9vdSgdCRay9eTV15PDs6cBKyf0eP+l9XHbhHH9j4QVSFgD8UGNgLgGfRgAgP3ONN03pRH+XLYdGINm4unsrAHr8VpmU3e0DLQHAtasJ/8FMZqm110tmJ8gFuteym3wQr3IG6gPNvhH0F2LZWyG8rIQSkK7CRq+5GhZKotbeeseyOKC9YuHOCjYQ5e4iXeIrOLyBgZSz/rTZd0wIIy/IOD6V5gJ/Z0JFBymc+GXopHC9GOtQx4lzxEK+AT2yLb2Dl8gTe80AU3rhQwtQeciXEOzm8VnBsROSND0+iQBDKZHMPAfUMDy8VcOVu3jgXyOgqvnE+lo2XIwMu8zR3k7Reig8/iHNL9tEw7hcnnK0LLgYuZhDj/ackVqrKJkD8mogzJ7F/mUuOkUiMEXs7679u3b43e6rdam7HDS7mosL3tamajvlx+zAmTzz/AP06xEvhrez3AAAAAElFTkSuQmCC);
    background-size: 12px 6px;
    background-position: center right 18px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#mongo-form input.has-error,
#mongo-form select.has-error {
    border-bottom-color: #e91c0d!important;
}

#mongo-form input[type=email]:focus,
#mongo-form input[type=tel]:focus,
#mongo-form input[type=text]:focus,
#mongo-form select:focus,
#mongo-form textarea:focus {
    box-shadow: none !important;
}

.BBFormFieldContainerRequired {
    position: relative;
}

#mongo-form .error-text {
    color: #e91c0d;
    text-transform: none;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0;
    white-space: nowrap;
    margin-top: 4px;
    display: none;
}

#mongo-form .error-text.inline-error {
    position: absolute;
    left: 10px;
    top: 90px;  
}

#mongo-form #fldIndivInfo .error-text.inline-error {
    left: calc(20% + 14px);
}

#mongo-form #fldIndivInfo .error-text.last-error {
    left: 60%;
}

#mongo-form .error-text.postcode-error {
    left: 50%;
}

#mongo-form input[type="checkbox"],
#mongo-form input[type="radio"] {
    display: none;
}

/*.BBFormCheckboxLabel:before,
.BBFormCheckboxLabel:after {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: -42px;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 2px;
}

.BBFormCheckboxLabel:after {
    color: white;
    font-size: 8px;
    box-shadow: inset 0px 0px 0px 2px #cfcfcf;
}

.BBFormCheckboxLabel:before {
    content: "";
    background-color: white;
}

input:checked + .BBFormCheckboxLabel:after {
    box-shadow: inset 0px 0px 0px 2px #476c7a;
}

input:checked + .BBFormCheckboxLabel:before {
    background-color: #476c7a;
}*/

#mongo-form .BBFormFieldLabel,#mongo-form .single-donation-btn {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2.2px;
    color: #000;
    width: 100% !important;
    float: none !important;
    text-align: left !important;
}

#mongo-form #bboxdonation_recurrence_divRecurrenceCheckbox {
    display: flex;
    flex-wrap: wrap;
}

#mongo-form #bboxdonation_recurrence_divRecurrenceCheckbox .BBFormCheckboxLabel,#mongo-form .single-donation-btn {
    display: inline-block;
    height: 40px;
    padding: 0 20px;
    color: #616161;
    line-height: 40px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #c1b4aa;
    cursor: pointer;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    white-space: nowrap;
    margin: 0 10px 16px;
    width: auto !important;
    font-size: 10px;
}

#mongo-form #bboxdonation_recurrence_divRecurrenceCheckbox input:checked + .BBFormCheckboxLabel,
#mongo-form #bboxdonation_recurrence_divRecurrenceCheckbox .BBFormCheckboxLabel.active,#mongo-form .single-donation-btn.monthly-not-active {
    box-shadow: inset 0 0 0 2px #476c7a;
    background-color: #eef3f7;
    color: #000;
}

#bboxdonation_recurrence_divRecurrenceCheckbox .BBFormCheckboxLabel:before,
#bboxdonation_recurrence_divRecurrenceCheckbox .BBFormCheckboxLabel:after {
    display: none;
}

#mongo-form .BBFormFieldRecurrenceInfo select {
    display: inline-block;
    background: none;
    height: auto;
    width: auto;
    appearance: auto;
    padding-left: 5px;
    padding-right: 10px;
}

.contents .button-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 25px;
    opacity: 0;
}

.button-wrapper .button,
#mongo-form .BBFormButtonRow .BBFormSubmitbutton {
    min-width: 180px;
    text-align: center;
    position: relative;
    border-radius: 50px;
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    padding: 20px 50px;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 2.2px;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    background-color: #53778D;
    border: 2px solid #53778D;
    display: block;
    width: auto;
    cursor: pointer;
    outline: none;
    box-shadow: none;
}

.button--orange .button__inner,
#mongo-form .BBFormButtonRow .BBFormSubmitbutton .button__inner {
    position: relative;
    display: inline-block;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.button--orange .button__inner:before,
#mongo-form .BBFormButtonRow .BBFormSubmitbutton .button__inner:before {
    /*font-family: Iconfont!important;
    font-style: normal;
    font-weight: 400!important;
    content: "\F109";*/
    content: '';
    vertical-align: top;
    position: absolute;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: -5px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    opacity: 0;
    background-image: url('https://v.fastcdn.co/u/06e81d16/52368825-0-icons8-forward-30.png');
    background-size: 16px auto;
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 16px;
    margin-top: -2px;
}

.button-wrapper .button:hover,
#mongo-form .BBFormButtonRow .BBFormSubmitbutton:hover {
    background-color: #4b6b7e;
    border-color: #4b6b7e;
    opacity: 1;
}
.button-wrapper .button:hover .button__inner,
#mongo-form .BBFormButtonRow .BBFormSubmitbutton:hover .button__inner {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
}

.button-wrapper .button:hover .button__inner:before,
#mongo-form .BBFormButtonRow .BBFormSubmitbutton:hover .button__inner:before {
    -webkit-transform: translateX(12px) translateY(-50%);
    transform: translateX(12px) translateY(-50%);
    opacity: 1;
}

/*#mongo-form .BBFormButtonRow #bboxdonation_btnSecurePayment {
    margin: auto;
    display: block !important;
}*/

.BBFormContainer[data-bbox-part-id="32e42585-f953-46c5-950f-9c75b87bd3b9"] {
    padding: 0;
    border-radius: 0;
}
.BBFormContainer[data-bbox-part-id="32e42585-f953-46c5-950f-9c75b87bd3b9"] .BBFormFieldContainer {
    margin-left: 0;
    margin-right: 0;
}

#mongo-form .BBFormContainer[data-bbox-part-id="32e42585-f953-46c5-950f-9c75b87bd3b9"] .BBThreeFields .BBFormSelectList {
    max-width: 20%;
}
#mongo-form .BBFormContainer[data-bbox-part-id="32e42585-f953-46c5-950f-9c75b87bd3b9"] .BBThreeFields .BBFormTextbox {
    max-width: calc(40% - 14px);
}
#mongo-form .BBFormContainer[data-bbox-part-id="32e42585-f953-46c5-950f-9c75b87bd3b9"] .BBTwoFields .BBFormSelectList,
#mongo-form #bboxdonation_billing_billingAddress_txtAUPostCode {
    max-width: calc(50% - 8px);
}

#bboxdonation_payment_lblCCType {
    display: block !important;
}

#mongo-form .BBFormContainer .BBFormFieldContainer .BBFormFieldContainer {
    padding: 0;
}

@media (max-width: 1024px) {
    #page_block_below_fold .form-container {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        padding-left: 15px;
        padding-right: 15px;
    }
    #mongo-form .BBFormContainer {
        padding: 0;
    }
    .donate-form__steps {
        max-width: 90%;
    }
    #element-90 {
        width: 50%;
        margin-left: 20px;
    }
    #mongo-form #fldIndivInfo .error-text.last-error {
        left: calc(20% + 14px);
        top: 105px;
    }
    #mongo-form .error-text.postcode-error {
        left: 10px;
        top: 105px;
    }
}

@media (max-width: 767px) {
    #page_block_below_fold .form-container {
    }
    #element-90 {
        width: 100%;
        left: 0;
        margin-left: 0;
    }
    .donate-form__steps {
        max-width: 100%;
    }
    .BBFormContainer[data-bbox-part-id="32e42585-f953-46c5-950f-9c75b87bd3b9"] .BBFormFieldContainer {
        margin-left: 0;
        margin-right: 0;
    }
    .BBFormRadioList .BBFormRadioItem label {
        flex-direction: column-reverse;
        justify-content: space-between;
    }
    .BBFormRadioList .BBFormRadioItem label {
        text-align: center !important;
    }
    #mongo-form #bboxdonation_recurrence_divRecurrenceCheckbox {
        justify-content: center;
        align-items: center;
    }
    .BBFormContainer[data-bbox-part-id="32e42585-f953-46c5-950f-9c75b87bd3b9"] .BBFormFieldRecurrenceInfo {
        padding-left: 0;
        text-align: center;
    }
    #mongo-form #fldIndivInfo .error-text.inline-error {
        left: calc(20% + 10px);
    }
    #mongo-form #fldIndivInfo .error-text.last-error {
        left: calc(20% + 10px);
        top: 105px;
    }
}

@media (max-width: 350px) {
    #page_block_below_fold .form-container {
        padding-left: 10px;
        padding-right: 10px;
    }
    #mongo-form .BBFormContainer .BBFormFieldContainer {
        padding: 0;
    }
    #mongo-form .error-text.inline-error,
    #mongo-form .error-text.postcode-error {
        left: 0;
    }
    #mongo-form #fldIndivInfo .error-text.inline-error,
    #mongo-form #fldIndivInfo .error-text.last-error {
        left: calc(20% + 10px);
    }
    #mongo-form .error-text.postcode-error {
        top: 105px;
    }
}

@media (min-width: 1025px) and (max-width: 1250px) {
    #element-90 {
        max-width: 50%;
    }
    #mongo-form #fldIndivInfo .error-text.last-error {
        left: calc(20% + 14px);
        top: 105px;
    }
}


#mongo-form * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
  .BBFormContainer[data-bbox-part-id="32e42585-f953-46c5-950f-9c75b87bd3b9"] .BBFormSubmitbutton {
    background-color: #00B200;
    border: 0 solid #00B200;
    box-shadow: 1px 1px 1px #CCC;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 4.4em;
    padding: 15px 30px;
    font-weight: bold;
    margin-left: 0;
    height: auto;
}