/* Responsive CSS for min-width of 620px */
body {
   font-size: 0.85em;
}

#bodyContainer {
   margin-left: 1.5rem;
   margin-right: 1.5rem;
}

   #bodyContainer #viewContainer[data-viewkey="BillInfo"] .fieldGroupContainer {
      width: 80%;
      max-width: 24rem;
   }

   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldContainer[data-fieldkey='CVVImages'],
   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldContainer[data-fieldkey='MicrImages'] {
      width: 29%;      
      top: 12.4rem;
      right: 2.5rem;
   }

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

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

   /* Begin ViewContainer styles for SummaryInfo */
   #bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] #thankyouHeader {
      text-align: center;
   }

   #bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer .fieldContainer .labelContainer {
      width: 10.6rem;
   }
/* End ViewContainer styles for SummaryInfo */

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

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

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