/* Responsive CSS for min-width of 820px */
* {
    font-size: 0.9rem;
}

#body {
    max-width: 70.75rem;
    margin-left: auto;
    margin-right: auto;
}

#bodyContainer #viewContainer[data-viewkey="BillInfo"] .fieldGroupContainer {
    margin-top: 10px;
    width: 80%;
    max-width: 30rem;
}

#bodyContainer #viewContainer .fieldGroupContainer .fieldContainer li > label {
    display: inline-block;
    line-height: 1.85em;
    vertical-align: middle;
}

#bodyContainer #viewContainer .fieldGroupContainer .fieldContainer .labelContainer {
    width: 11.6rem;
}

#CVVHelp, #AcctRouteHelp {
    width: 38%;
}
/* End viewContainer styles */

/* ViewContainer styles for PaymentInfo */
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentAmount"] {
    width: 42.3%;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentDate"] {
    width: 50%;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="MerchantFeeAmount"] {
    width: 10.8rem;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="Total"] {
    width: 25.3%;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentAmount"] .labelContainer,
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="MerchantFeeAmount"] .labelContainer,
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentDate"] .labelContainer {
    width: 10.6rem;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="Total"] .labelContainer {
    width: 4.6rem;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer .fieldContainer[data-fieldkey="PaymentTypeList"] {
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PayTypeImages"] {
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentAmountList"],
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] #ajaxPlaceHolder .fieldContainer,
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer .fieldContainer[data-fieldkey="EmailAddress"],
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer .fieldContainer[data-fieldkey="associated"],
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer .fieldContainer[data-fieldkey="Nickname"] {
    width: 65%;
}

/* ViewContainer styles for PaymentInfo */
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentAmount"],
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PayByOption"],
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentDate"] {
    width: 42.3%;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="MerchantFeeAmount"] {
    margin-left: 2rem;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="Total"] {
    margin-left: 3.5rem;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentAmount"] .labelContainer,
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="MerchantFeeAmount"] .labelContainer,
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentDate"] .labelContainer {
    width: 11.6rem;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="Total"] .labelContainer {
    width: 4.6rem;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer .fieldContainer[data-fieldkey="PaymentTypeList"],
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer .fieldContainer[data-fieldkey="PaymentAmountList"] {
    width: 28rem;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldContainer[data-fieldkey='CVVImages'],
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldContainer[data-fieldkey='MicrImages'] {
    right: 3rem;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldContainer[data-fieldkey='MicrImages'],
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldContainer[data-fieldkey='CVVImages'] {
    position: absolute;
    width: 29%;
    max-width: 13.3rem;
    top: 12.4rem;
    right: 1rem;
    box-shadow: 0px 0px 10px #646569;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="MerchantFeeAmount"] {
    margin-left: 1rem;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="Total"] {
    margin-left: 1rem;
}

#bodyContainer #viewContainer #submitContainer {
    margin-top: 52px;
}

#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer[data-fieldkey='BillAccountNumber'] .fieldContainer .labelContainer {
    width: 50%;
}

#bodyContainer #viewContainer[data-viewkey="BillInfo"] .fieldGroupContainer {
    /*max-width: 22rem;*/
    margin-right: auto;
    margin-left: auto;
}

#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] #thankyouHeader {
    text-align: left;
    margin-left: 0.95em;
    margin-right: 0.95em;
}

    #bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] #thankyouHeader .thankYouPara1,
    #bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] #thankyouHeader .thankYouReceipt,
    #bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] #thankyouHeader .thankYouPara4 {
        display: inline-block;
        line-height: 1.6em;
    }

#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer {
    display: inline-block;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer .fieldContainer[data-fieldkey="SelectAmount"] .inputContainer {
    width: 16.6rem;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer .fieldContainer[data-fieldkey="SelectAmount"] .labelContainer {
    width: 11.6rem;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer .fieldContainer[data-fieldkey="SelectAmount"] {
    width: 28rem;
}

#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer .fieldContainer .labelContainer {
    width: 9.6rem;
}

#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer[data-fieldkey='BillAccountNumber'] {
    width: 48%;
}

#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer[data-fieldkey='ajaxPlaceHolder'] {
    width: 44%;
}

#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer[data-fieldkey='PaymentDate'] .labelContainer {
    width: 44%;
}
/* End ViewContainer styles for PaymentInfo */

@media only screen and (min-width: 920px) {
    #bodyContainer #viewContainer[data-viewkey="BillInfo"] .fieldGroupContainer {
        width: 80%;
        /*max-width: 30rem;*/
    }
}

@media only screen and (min-width: 1020px) {
    #bodyContainer #viewContainer[data-viewkey="BillInfo"] .fieldGroupContainer {
        width: 80%;
        max-width: 30rem;
    }
}