/* Is this needed in source? */
.row {
    width: 100%;
    align-content: flex-start;
}

.usms-container.form__container {
    min-height: 600px;
}

.payment-information--form,
.payment-information--confirmation,
.cancel-auto-renew--form,
.enroll-auto-renew--confirmation,
.cancel-auto-renew--confirmation {
    display: none;
}

.usms-container.form__container h3,
.usms-container .billing-information h3,
.usms-container .payment-information h3 {
    margin: 0 0 1rem;
    display: inline-flex;
}

.payment-information a,
.billing-information a {
    text-decoration: underline;
}

/* .payment-information--summary {
    margin-top: 3rem;
} */

@media (min-width: 1200px) {
    .payment-information--summary {
        margin-top: 0;
    }
}

.card-number,
.card-expiration {
    display: inline-flex;
}

.card-expiration {
        padding-left: 2.5rem;
}

.payment-information--summary a,
.card-expiration + a {
    display: flex;
    margin: 1rem 0;
}

.payment-information--summary h3 {
    margin: 3rem 0 2rem;
}

.payment-information--form .form-group {
    margin: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: end
}

.payment-information--form > div {
    margin-bottom: 2rem;
}

.payment-information--form .form-group.agree-terms {
    margin: 1rem 0 3rem;
    align-items: start;
    flex-wrap: nowrap;
}

/*
.payment-information--form .form-group.agree-terms-auto-renew {
    margin-top: -1rem;
}
*/

.form-group.agree-terms .help-block {
    margin-left: -2.6rem;
}

.payment-information--form .checkbox-label + span {
    padding-top: 0.5rem;
}

.payment-information--form input[type=email], 
.payment-information--form input[type=number], 
.payment-information--form input[type=password], 
.payment-information--form input[type=tel], 
.payment-information--form input[type=text], 
.payment-information--form select {
    box-sizing: content-box;
    padding: 0.25rem 0 0.5rem;
    font-size: 1.75rem;
    text-indent: 15px;
    height: 3.4rem;
    margin: 0.5rem 0;
    color: #656565;
    box-shadow: none;
}

.payment-information--submit {
    margin: 1rem 0 0;
}

.payment-information--submit .agree-terms {
    padding-left: 2.5rem;
}

.payment-information--form .checkbox-label {
    margin-left: 0;
}

/* Overrides source form container styling */
/* @media (max-width: 991px) {
    .payment-information--form,
    .cancel-auto-renew--form,
    .cancel-auto-renew--confirmation {
        padding-top: 3rem;
        border-top: 1px solid #CCC;
        margin-top: 3rem;
    }
} */

@media (min-width: 1200px) {
    .cancel-auto-renew-message {
        margin: -1rem 0 2rem;
    }
}

@media (min-width: 1200px) {
    .payment-information--form {
        margin: 0 0 3rem;
    }
    .modal-dialog {
        top: 30%;
    }
}

#enrollAutoRenew {
    margin-top: 3rem;
}

.payment-information--summary a:disabled {
    color: #CCC;
}

#btnEnrollAutoRenew,
#btnEditCreditCard,
#btnCancelAutoRenew {
    display: block;
    color: #0068ad;
    font-size: 1.4rem;
    margin: 1rem 0;
}

button#btnEnrollAutoRenew[disabled],
button#btnEditCreditCard[disabled],
button#btnCancelAutoRenew[disabled] {
    color: #ddd;
    background-color: none;
}

@media (min-width: 992px) {
    .cancel-auto-renew--form, 
    .cancel-auto-renew--confirmation {
        padding-top: 2rem;
    }
    .enroll-auto-renew--confirmation {
        padding-top: 5rem;
    }
    .payment-information--confirmation {
        padding-top: 3rem;
    }
}

/* This overrides existing css in source. Needs to be scoped to Plans and Payment */
@media (min-width: 992px) {
    .usms-container.form__container > .row > [class*=col-lg-]:nth-of-type(2),
    .usms-container.form__container > .row > [class*=col-md-]:nth-of-type(2),
    .usms-container.form__container > .row > [class*=col-sm-]:nth-of-type(2) {
        border: 0 none;
        margin-top: 0rem;
        padding-top: 0rem;
    }
    .usms-container.form__container>.row>[class*=col-lg-]:nth-of-type(3), 
    .usms-container.form__container>.row>[class*=col-md-]:nth-of-type(3), 
    .usms-container.form__container>.row>[class*=col-sm-]:nth-of-type(3) {
        border-top: 0 none;
        margin-top: 1rem;
        padding-top: 0;
        border-left: 1px solid #ccc;
    }
}



.payment-information--summary .message-year-plus {
    font-size: 1.6rem;
}

.payment-information--summary .message-year-plus a {
    display: inline-flex;
    margin: unset;
    padding: unset;
}