/*#region General */
#OnlinePaymentsPanel {
    display:flex;
    flex-direction:column;
}

#OnlinePaymentsPanel  .aspNetDisabled {
    background-color:#e6e6e6 !important;
    color: #bfbfbf !important ;
    border:none !important ;
}

#OnlinePaymentsPanel  input[disabled=disabled][type=radio] {
    display:none;
}


#OnlinePaymentsPanel #AccountPickerPanel.aspNetDisabled  input:not([checked=checked]) + label,
#OnlinePaymentsPanel #PaymentAmountPanel.aspNetDisabled  input:not([checked=checked]) + label {
    display:none;
}

#OnlinePaymentsPanel .aspNetDisabled input[checked=checked][disabled=disabled][type=radio] + label {
    color:black;
    font-weight:bold;
}

/*#endregion */


/*#region Account Picker */
#AccountPickerPanel {
    border: 1px solid grey;
    margin-bottom: 2em;
    padding-left: 1em;
    padding-bottom: 1em;
    width: 70%;
}

#AccountPickerPanel #pnlSelectAccountBody {
    margin-left:10px;
    padding: 1em 0px 1em 0px;
}

#AccountPickerPanel.aspNetDisabled #pnlSelectAccountBody {
    padding: 0px;
}

#AccountPickerPanel .accountPickerTitle {
    padding-top:15px;
}

#AccountPickerPanel table tr td span {
    display:flex;
    margin-bottom:1em;
}

#AccountPickerPanel.aspNetDisabled table tr td span {
    margin-bottom:0px;
}

#AccountPickerPanel.aspNetDisabled .panel-primary,
#AccountPickerPanel.aspNetDisabled .panel-body{
    background-color : #e6e6e6 !important;
}

#AccountPickerPanel .rentAccountSelectionDropdown label {
   margin-left:10px;
   margin-bottom:15px;
   width:90%;
}

#OnlinePaymentsPanel #pnlCurrentAccount {
    display:none;
}

/*#endregion */

/*#region Payment Amount Panel */
#PaymentAmountPanel {
    border:1px solid grey;
    margin-bottom:2em;
    padding:0px 0px 1em 1em;
    width:70%;
}

#PaymentAmountPanel .paymentAmountTitle {
    margin:15px 0px;
}

#PaymentAmountPanel #AmountOptions {
    margin-left:1em;
}

#PaymentAmountPanel .amountPanel {
    display: flex;
    margin-bottom: 1em;
}

#PaymentAmountPanel #AmountOptions span {
    margin-right:3px;
}

#PaymentAmountPanel #AmountOptions .validationTooltip {
    margin-left:1rem;
    color:red;
}

#PaymentAmountPanel .paymentProcessButtons {
    margin-top:10px;
}

#PaymentAmountPanel .currencyInfoLabel {
    margin-bottom:1rem;
    font-style:italic;
}

#OutstandingBalance_amountPanel label {
    margin: 0em 3em 0em 0.5em;
}

#SpecificAmount_amountPanel label {
    margin: 0.5em 3em 0em 0.5em;
}
/*#endregion */
/*#region Payment Method Panel */
#PaymentMethodPanel {
    border: 1px solid grey;
    margin-bottom: 2em;
    padding: 1em;
    width: 70%;
}

#PaymentMethodPanel .ui-widget {
    padding-right:1em;
}

#PaymentMethodPanel #CardOptionsTitles {
    display:flex;
    justify-content:space-between;
    margin-top:1rem;
    width:72%;
    font-weight:bold;
    font-size:1rem;
}

#PaymentMethodPanel .digitsTitle {
    margin-left:3rem;
}

#PaymentMethodPanel .expiryTitle {
    padding-right:3em;
}

#PaymentMethodPanel #pnlPaymentMethod {
    margin-left:1em;
}

#PaymentMethodPanel #CardOptions {
    display:flex;
    flex-direction:column;
    margin-top:1em;
    margin-bottom:1em;
}

#PaymentMethodPanel .cardPanel {
    padding-top: 1.2em;
    padding-bottom: 1.2em;
    padding-left: 0.6em;
    padding-right: 0.6em;
    border: 1px solid black;
    margin-top: 0.4em;
    display: flex;
    flex-direction: column;
    width: 100%;
}

#PaymentMethodPanel .cardSummary {
     display:flex;
     justify-content:space-between;
}

#PaymentMethodPanel .cardDetailsInner {
    margin-top:10px;
}

#PaymentMethodPanel .cardButton {
    width:90%;
    display:flex;
}

#PaymentMethodPanel input {
    margin:0;
}

#PaymentMethodPanel .cardButton label  {
    padding-left:10px;
    width:90%;
    display:flex;
    justify-content:space-between;
    margin-bottom:0;
}

#PaymentMethodPanel .cardButton .cardExpiry {
    width:40%;
    text-align:center;
}

#PaymentMethodPanel .cardExpiry.expired {
    color:red;
}

#PaymentMethodPanel .cardDetailsInner {
    display:flex;
    justify-content:space-between;
    width:95%;
}

#PaymentMethodPanel .cardHolderNamePanel {
    display:flex;
    flex-direction:column;
    margin-left:1.5rem;
    flex-grow:1;
}

#PaymentMethodPanel .cardHolderNameLabel {
    font-weight:bold;
    margin-bottom:5px;
}

#PaymentMethodPanel .cardAddressPanel {
    display:flex;
    flex-direction:column;
    margin-right:1.5rem;
}

#PaymentMethodPanel .addressLabel {
    font-weight: bold;
     margin-bottom:5px;
}
/*#endregion */

/*#region New Card Details Panel */

#CardDetailsPanel {
    border:1px solid grey;
    margin-bottom:2em;
    padding:1em;
    width:70%;
}

.cardDetails .disabled {
    background-color:lightgray;
}

#pnlCardDetails {
    display:flex;
    flex-direction:column;
}

#pnlCardDetails .saveCardContainer {
    margin-top:0.5em;
}

#pnlCardDetails .saveCardLabel {
    display:inline;
    margin-right:0.5em;
    font-weight:bold;
}

#pnlCardDetails #CardNameLabel {
    font-weight:bold;
    width:100%;
    display:block;
    margin-bottom:0.5em;
}

#pnlCardDetails .cardNameContainer {
    width:50%;
    margin-top:1em;
}

#pnlCardDetails .cardHolderName {
    width:100%;
    margin-bottom:0.5em;
}

#pnlCardDetails .cardNameToolTip {
    margin-left:1em;
    color:red;
    display:block;
    margin-top:0.5em;
    margin-bottom:0.5em;
}

#pnlCardDetails #AddressPanel {
    margin-top:1.5em;
}

#pnlCardDetails #ExistingAddressContainer {
    width:50%;
}

#pnlCardDetails #BillingAddressLookup {
    width:100%;
}

#pnlCardDetails #CardAddressPanel {
    margin-top:1em;
}

#pnlCardDetails #CardAddress {
    font-weight:bold;
}
#pnlCardDetails #Address2Container {
    width:100%;
}

#pnlCardDetails #AddressContainer .addressLabel,
#pnlCardDetails #AddressContainer .addressField
{
    margin-top:0.25em;
    width:100%;
}

#pnlCardDetails .addressLineContainer,
#pnlCardDetails #AddressContainer #Address2TextBox
{
    width:50%;
}

#pnlCardDetails #AddressContainer #Address2Label {
    width:60%;
}

#pnlCardDetails #AddressContainer #AddressTooltip {
    color:red;
}

#pnlCardDetails #ButtonContainer {
    margin-top:10px;
}

#pnlCardDetails .address2Inner {
    display:flex;
}

/*#endregion */

/*#region Summary Panel */

#SummaryPanel {
    border:1px solid grey;
    margin-bottom:2em;
    padding:1em;
    width:70%;
}

#SummaryPanel #SummaryDetails {
    width:60%;
}


#SummaryPanel #AccountDetails,
#SummaryPanel #AmountDetails,
#SummaryPanel #ExistingCardDetails,
#SummaryPanel #NameOnCard {
    display:flex;
    justify-content:space-between;
}

#SummaryPanel #AmountContainer {
    display:flex;
}

#SummaryPanel #ExistingCardFields {
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

#SummaryPanel #LastDigits,
#SummaryPanel #Expiry {
    display:flex;
    justify-content:flex-end;
}

#SummaryPanel #BillingAddress {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    margin-top:10px;
}

#SummaryPanel #AccountRefTitle,
#SummaryPanel #AmountTitle,
#SummaryPanel #ExistingCardTitle,
#SummaryPanel #NameOnCardTitle,
#SummaryPanel #BillingAddressTitle {
    margin-bottom:0.5em;
    font-weight:bold;
}

#SummaryPanel #BillingAddressField {
   display:flex;
   flex-direction:column;
   align-items:flex-end;
}

/*#endregion */

/*#region Responsive Changes */


@media only screen and (max-width : 768px) {
    #AccountPickerPanel,
    #PaymentAmountPanel,
    #PaymentMethodPanel,
    #CardDetailsPanel,
    #SummaryPanel {
        width:100%;
    }

      #PaymentMethodPanel #CardOptions a {
        flex-direction:column;
    }

    #PaymentMethodPanel #CardOptions a .cardHolderName {
        width:100%;
    }

    #pnlCardDetails #CardNameTextBox {
        width:100%;
    }

    #pnlCardDetails .addressLineContainer,
    #pnlCardDetails #AddressContainer #Address2TextBox {
        width:100%;
    }

    #pnlCardDetails .address2Inner {
        display:flex;
        flex-direction:column-reverse;
    }
}

@media only screen and (max-width : 576px) {

    #PaymentAmountPanel .amountPanel {
        display:inline-block;
    }

    #PaymentAmountPanel #SpecificAmountPanel {
        margin-left:30px;
    }

    #PaymentMethodPanel .expiryTitle {
        padding-right:0;
    }

    #PaymentMethodPanel .cardSummary {
        flex-wrap:wrap;
    }

    #PaymentMethodPanel .cardExpandButton {
        padding-left:2em;
        margin-top:1em
    }

    #PaymentMethodPanel .cardDetailsInner {
        flex-direction:column;
    }

    #PaymentMethodPanel .cardAddressPanel {
       margin-left:1.5em;
        margin-top:1em;
    }

    #pnlCardDetails .cardNameContainer {
        width: 100%;
    }

    #pnlCardDetails #ExistingAddressContainer {
    width: 100%;
    }

    #pnlCardDetails #CountryLookup {
        width: 100%;
    }

    #SummaryPanel #SummaryDetails {
        width:100%;
    }
}
/*#endregion */