/*
Styles for the extender Row for a DataTables specific Table instance
*/

/*
Credit Card Form Styles
*/
.credit-card-exp input {
    width: 3ch;
    text-align: center;
}

.credit-card-wrapper label {
    margin: 0;
}

.credit-card-action-btns {
    display: flex;
}

.plan-credit-card-form {
    width: 100%;
}

.plan-credit-card-form .form-container {
    display: grid;
    width: 100%;
    grid-template-columns: 50% 50%;
}

.plan-credit-card-form .button-container {
    text-align: right;
    padding: 0 1em;
}

.plan-credit-card-form .form-container > div {
    padding: 1em;
}

.plan-credit-card-number {
    display: flex;
    margin-bottom: 1em;
}

.plan-credit-card-number > div {
    margin-right: 1em;
}

.plan-credit-card-address {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.plan-credit-card-city-state {
    display: flex;
    width: 100%;
}

.plan-credit-card-city-state > div {
    margin-right: 1em;
}

/**
Row table styles
 */
.customer-row-plans .plan-image img {
    width: 6em;
    height: 6em;
    max-width: 6em;
    min-height: 3em;
}

.customer-row-plans .plan-price-wrapper {
    display: flex;
    align-items: center;
}

.customer-row-plans button{
    padding: 0.25em;
}

.customer-row-plans .plan-price input {
    width: 6ch;
}

.customer-row-plans .plan-credit-card {

}