﻿* {
   font-size: 0.80rem;
}

/* Breadcrums styles */
.progress-container .arrow-container .nav-counter {
   display: none;
}
/* End breadcrumb styles*/

/* ViewContainer styles */
#bodyContainer #viewContainer .fieldGroupContainer .fieldContainer {
   display: table;
   width: 100%;
}

   #bodyContainer #viewContainer .fieldGroupContainer .fieldContainer li {
      display: table-cell;
      vertical-align: top;
   }

      #bodyContainer #viewContainer .fieldGroupContainer .fieldContainer li > label {
         display: inline-block;
         line-height: 1.35em;
      }

#bodyContainer #viewContainer .fieldContainer[data-fieldkey="PayTypeImages"] {
   display: block;
   width: 100%;
   text-align: right;
}

   #bodyContainer #viewContainer .fieldContainer[data-fieldkey="PayTypeImages"] .imageContainer {
      display: inline-block;
      vertical-align: top;
      width: 13%;
      max-width: 5em;
   }
/* End viewContainer styles */

/* ViewContainer styles for BillInfo */
#bodyContainer #viewContainer[data-viewkey="BillInfo"] .fieldGroupContainer .fieldContainer li.labelContainer {
   width: 45%;
   height: 2.2em;
}
/* End viewContainer styles */

/* ViewContainer styles for PaymentInfo */
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldContainer[data-fieldkey='CVVImages'],
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldContainer[data-fieldkey='MicrImages'] {
   display: none;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] #thinPresentmentContainer {
}

   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] #thinPresentmentContainer .thinPresentmentRow {
      display: table;
      width: 100%;
   }

      #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] #thinPresentmentContainer .thinPresentmentRow .tpFieldContainer {
         display: table-row;
         width: inherit;
      }

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] #tpContainer .tpRow .tpHeader {
    width: 3em;
    height: auto;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] #tpContainer .tpRow .tpValue {
    width: 3em;
    height: auto;
}

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] #tpContainer .tpRow
{
    width:100%;
}

#viewContainer[data-viewkey="PaymentInfo"] #tpContainer .tpRow {
    display: flex !important;
    flex-flow: row nowrap;
}

         #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] #thinPresentmentContainer .thinPresentmentRow .tpFieldContainer .tpHeader {
            display: table-cell;
            vertical-align: top;
            width: 10.6rem;
         }

         #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] #thinPresentmentContainer .thinPresentmentRow .tpFieldContainer .tpValue {
            display: table-cell;
            vertical-align: top;
            padding: 4px;
            text-align: left;
         }

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentTypeList"],
#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PayTypeImages"] {
   display: table;
}

   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentTypeList"] .inputContainer {
   }

#bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PayTypeImages"] {
   width: 100%;
}

   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PayTypeImages"] .imageContainer {
      width: 13%;
   }
/* End ViewContainer styles for PaymentInfo */

/* Begin ViewContainer styles for SummaryInfo & ThankYouInfo */
#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer {
   display: block;
   vertical-align: top;
   width: auto;
}

   #bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer .fieldContainer[data-fieldkey='FeeAcceptanceCheckBox'] label {
      display: inline;
      vertical-align: top;
      line-height: 1.2rem;
      margin-left: 5px;
   }
    #bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer .fieldContainer[data-fieldkey='ACHFeeAcceptanceCheckBox'] label {
        display: inline;
        vertical-align: top;
        line-height: 1.2rem;
        margin-left: 5px;
 
    }
    #bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer .fieldContainer[data-fieldkey='CardFeeAcceptanceCheckBox'] label {
        display: inline;
        vertical-align: top;
        line-height: 1.2rem;
        margin-left: 5px;
    }
    #bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer .fieldContainer[data-fieldkey='CardFeeAcceptanceCheckBox'] label {
        display: inline;
        vertical-align: top;
        line-height: 1.2rem;
        margin-left: 5px;
    }
    #bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer .fieldContainer[data-fieldkey='NoFeeAcceptanceCheckBox'] label {
        display: inline;
        vertical-align: top;
        line-height: 1.2rem;
        margin-left: 5px;
        width: 100%;
    }

    #bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer .fieldContainer[data-fieldkey='NoFeeAcceptanceCheckBox'] .labelContainer {

        width: 100%;
    }
   #bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer .fieldContainer .labelContainer {
      width: 11rem;
   }

#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldContainer .inputContainer input[type='text'] {
   border: 0px;
}

#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer[data-fieldkey='PaymentDate'] {
   width: 100%;
}

#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldGroupContainer .fieldContainer .labelContainer label {
	 font-weight:600;
}

#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] #thankyouHeader {
   text-align: center;
   font-weight: 700;
	 margin-bottom:25px;
}

#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] .fieldContainer .inputContainer input[type='checkbox'] {
    vertical-align: top;
    display: inline-table;
    align-items: flex-start;
}

#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] #thankyouHeader .thankYouPara1,
#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] #thankyouHeader .thankYouReceipt,
#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] #thankyouHeader .thankYouPara4 {
   display:block;
	 line-height:1.6em;
}

#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] #thankyouHeader #btnPrint {
	 cursor:pointer;
	 font-size:2em;	
	 position:absolute;
	 top:0px;
	 right:0px;
	 transition:color 250ms;
}

#bodyContainer #viewContainer[data-viewkey="SummaryThankYou"] #thankyouHeader #btnPrint:hover {
	 color:red;
}
/* End ViewContainer styles for SummaryInfo */

/* Begin Footer Styles */
#footerContainer .FooterText {
	 font-weight:600;
	 line-height:1.6em;
}
/* End Footer Styles */

@media only screen and (min-width:380px) {

   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] #thinPresentmentContainer {
   }

      #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] #thinPresentmentContainer .thinPresentmentRow {
      }

         #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] #thinPresentmentContainer .thinPresentmentRow .tpFieldContainer {
            display: table-cell;
            width: 25%;
         }

            #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] #thinPresentmentContainer .thinPresentmentRow .tpFieldContainer .tpHeader {
               display: block;
               width: auto;
               font-size: 0.95em;
            }

            #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] #thinPresentmentContainer .thinPresentmentRow .tpFieldContainer .tpValue {
               display: block;
               width: auto;
               text-align: right;
            }

   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentAmount"],
   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="MerchantFeeAmount"],
   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="Total"] {
      display: inline-table;
      vertical-align: top;
      margin-right: 3px;
   }

   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentAmount"]
   {
      width: 54.3%;
   }

   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentDate"]
   {
       width: 70%;
   }

   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="MerchantFeeAmount"] {
      width: 43.3%;
   }

   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="Total"] {
      width: 54.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="Total"] .labelContainer {
         width: 10.6rem;
      }

   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="MerchantFeeAmount"] .inputContainer {
      width: 9rem;
   }

   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentTypeList"],
   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PayTypeImages"] {
      display: inline-table;
      vertical-align: top;
   }

   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PaymentTypeList"] {
      width: 17rem;
   }

   #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PayTypeImages"] {
      width: 37%;
      text-align: left;
      margin-left: 3px;
   }

      #bodyContainer #viewContainer[data-viewkey="PaymentInfo"] .fieldGroupContainer [data-fieldkey="PayTypeImages"] .imageContainer {
         width: 30%;
         max-width: 2.5rem;
      }
}
