/*********************************** Subscription Info *********************************/

#subscriptions {
    margin-bottom: 20px;
}

#subscriptionsHeader {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#subscriptionsHeaderViewAll {
    width: auto;
}

#subscriptionsToggle {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

#subscriptionsToggleInput {
    width: fit-content;
}

#subscriptionsToggleLabel {
    font-size: 16px;
}

#subscriptionsSearch {
    margin-bottom: 20px;
}

#subscriptionsSearchInput {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    appearance: none;
}

#subscriptionsBody {

}

.subscription {

}

.subscriptionCheckbox {

}

.subscriptionOpen {

}

/*********
Subscription Bulk
 */

#subscriptionsBulk {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid var(--blue);
    flex-wrap: wrap;
}

#subscriptionsBulkTitle {
    width: 100%;
    font-weight: 700;
}

#subscriptionsBulk .button {
    width: auto;
}


/**********
Subscription Footer
 */

#subscriptionsFooter {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

#subscriptionsPerPage {
}

#subscriptionsPages:empty {
    display: none;
}

#subscriptionNew {
    width: auto;
    margin-left: auto;
}

/***********
Subscription Modal
 */


/* General */


#subscriptionModal {

}

#subscriptionModal .dialogContent {

}

#subscriptionModalID {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

#subscriptionModalID::before {
    height: 12px;
    width: 12px;
    content: "";
    border-radius: 50%;
    order: 1;
}

#subscriptionModalID[status="active"]::before {
    background-color: var(--success);
}

#subscriptionModalID[status="cancelled"]::before {
    background-color: var(--cancelled);
}

#subscriptionModalID::after {
    content: attr(status);
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 400;
    order: 2;
}

#subscriptionModalUpdated {
    font-size: 14px;
    margin-bottom: 10px;
}

#subscriptionModalCustomer {
    font-size: 16px;
    margin-bottom: 10px;
    text-decoration: underline;
    width: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

#subscriptionModalBillingInfo {
    font-size: 15px;
    margin-bottom: 20px;
    width: fit-content;
}

#subscriptionModalSummary {
    font-size: 15px;
    margin-bottom: 20px;
}

/* Plan Table */

#subscriptionModalPlan {
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
    border: 1px solid lightgray;
}

#subscriptionModalPlanImage {
    width: 35px;
    height: 35px;
}

#subscriptionModalPlanTitle {
}

#subscriptionModalPlanRenewal {
}

#subscriptionModalPlanCadence {
}

#subscriptionModalPlanPrice {
}

/* Actions */

#subscriptionModalActions {
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

#subscriptionModalActions .button {
    display: none;
}

#subscriptionModalActions .button.active {
    display: block;
    flex-grow: 1;
    font-size: 16px;
    padding: 10px;
    white-space: nowrap;
    width: fit-content;
}

/* Shipping Address */

#subscriptionModalAddress {
    margin-bottom: 40px;
}

#subscriptionModalAddressTitle {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

#subscriptionModalAddressForm {
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
    border: 1px solid lightgray;
}

#subscriptionModalAddressFormShipping {
    margin-bottom: 10px;
}

#subscriptionModalAddressFormUpdate {
}

@media (max-width: 800px) {
    #subscriptionModalAddressForm {
        grid-template-columns: 1fr;
    }
}

/* Prepaid Table */

#subscriptionModalPrepaid {
    display: none;
}

#subscriptionModalPrepaid.active {
    display: block;
    margin-bottom: 40px;
}

#subscriptionModalPrepaidTitle {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

#subscriptionModalPrepaidList {
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
    border: 1px solid lightgray;
}

#subscriptionModalPrepaidListSelectAll {

}

.subscriptionModalPrepaidListItem {

}

.subscriptionModalPrepaidListItemCheckbox {

}

.subscriptionModalPrepaidListItemCheckboxInput {

}

.subscriptionModalPrepaidListItemDate {

}

.subscriptionModalPrepaidListItemID {
}

.subscriptionModalPrepaidListItemPrice {
}

.subscriptionModalPrepaidListItemStatus {
    text-transform: capitalize;
}

.subscriptionModalPrepaidListItemStatus::before {
    height: 12px;
    width: 12px;
    content: "";
    border-radius: 50%;
    order: 1;
    display: inline-block;
    margin-right: 5px;
}

.subscriptionModalPrepaidListItemStatus[status="success"]::before {
    background-color: var(--success);
}

.subscriptionModalPrepaidListItemStatus[status="cancelled"]::before {
    background-color: var(--cancelled);
}

.subscriptionModalPrepaidListItemStatus[status="queued"]::before {
    background-color: var(--queued);
}

.subscriptionModalPrepaidListItemActions {
    display: flex;
    gap: 5px;
}

.subscriptionModalPrepaidListItemActions .button {
    display: block;
    flex-grow: 1;
    font-size: 14px;
    padding: 10px;
}

#subscriptionModalPrepaidActions {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

#subscriptionModalPrepaidActionsNew,
#subscriptionModalPrepaidActionsCancelSelected,
#subscriptionModalPrepaidActionsCancelAll {
    display: none;
}

#subscriptionModalPrepaidActionsNew.active,
#subscriptionModalPrepaidActionsCancelSelected.active,
#subscriptionModalPrepaidActionsCancelAll.active {
    display: block;
    width: fit-content;
    font-size: 14px;
    padding: 10px;
}

/* Billing History */


#subscriptionModalBilling {
    display: none;
}

#subscriptionModalBilling.active {
    display: block;
    margin-bottom: 40px;
}

#subscriptionModalBillingTitle {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

#subscriptionModalBillingList {
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
    border: 1px solid lightgray;
}

.subscriptionModalBillingListItem {

}

/* Exit */

.subscriptionModalExit {
    width: auto;
}

/* Browser */

#subscriptionModalBrowser {

}

#subscriptionModalBrowserFrame {
    margin-top: 30px;
    width: 100%;
    height: calc(100% - 40px);
}

@media (max-width: 800px) {

}