.billing-index .clientsphere-title-icon {
    background: #e9f5fb;
    color: #07536d;
}

.billing-index .clientsphere-reset {
    align-items: center;
    display: inline-flex;
    text-decoration: none;
}

.billing-index-client-select {
    flex-basis: 190px;
}

.billing-index-period-navigation {
    align-items: center;
    background: #fff;
    border: 1px solid var(--client-line);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(15, 23, 42, .035);
    display: flex;
    justify-content: space-between;
    min-height: 58px;
    padding: .65rem .8rem;
}

.billing-index-period-navigation a,
.billing-index-period-navigation strong {
    align-items: center;
    display: inline-flex;
    gap: .45rem;
}

.billing-index-period-navigation a {
    border: 1px solid var(--client-line);
    border-radius: 8px;
    color: #526176;
    font-weight: 800;
    min-height: 38px;
    padding: .45rem .75rem;
    text-decoration: none;
}

.billing-index-period-navigation a:hover {
    border-color: var(--client-primary);
    color: var(--client-primary);
}

.billing-index-period-navigation strong {
    color: #172033;
    font-size: 1rem;
    text-transform: capitalize;
}

.billing-index-period-navigation strong i {
    color: var(--client-primary);
    font-size: 1.15rem;
}

.billing-index-date {
    align-items: center;
    display: inline-flex;
    flex: 0 0 158px;
    gap: .45rem;
}

.billing-index-date span {
    color: #738097;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.billing-index-date input {
    background: #fff;
    border: 1px solid var(--client-line);
    border-radius: 8px;
    color: #46566b;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    min-height: 42px;
    min-width: 0;
    padding: .55rem .65rem;
    width: 100%;
}

.billing-index-table {
    min-width: 1180px;
}

.billing-index-table .billing-index-align-right,
.billing-index-table .billing-index-amount {
    text-align: right;
}

.billing-index-document-name {
    display: grid;
    gap: .2rem;
}

.billing-index-document-name small {
    color: #96a3b6;
    font-size: .75rem;
    font-weight: 700;
}

.billing-index-amount {
    color: #263449 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.billing-index-amount.is-due {
    color: #b45309 !important;
}

.billing-index-status.is-draft,
.billing-index-status.is-muted {
    background: #edf2f7;
    color: #64748b;
}

.billing-index-status.is-info {
    background: #e0f2fe;
    color: #0369a1;
}

.billing-index-status.is-warning {
    background: #fff4d7;
    color: #b45309;
}

.billing-index-status.is-success {
    background: #c9f6dd;
    color: #057a4f;
}

.billing-index-status.is-danger {
    background: #fee2e2;
    color: #b91c1c;
}

.billing-index-period-summary {
    align-items: center;
    background: #f8fafc;
    border-top: 1px solid var(--client-soft-line);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}

.billing-index-period-summary > span {
    color: #738097;
    font-size: .88rem;
    font-weight: 700;
}

.billing-index-period-summary dl {
    align-items: center;
    display: flex;
    gap: 1.5rem;
    margin: 0;
}

.billing-index-period-summary dl > div {
    display: grid;
    gap: .2rem;
    text-align: right;
}

.billing-index-period-summary dt {
    color: #7a879a;
    font-size: .72rem;
    text-transform: uppercase;
}

.billing-index-period-summary dd {
    color: #344258;
    font-size: .95rem;
    font-weight: 900;
    margin: 0;
}

.billing-index-period-summary .is-net {
    border-left: 1px solid var(--client-line);
    padding-left: 1.5rem;
}

.billing-index-period-summary .is-net dd {
    color: var(--client-primary);
    font-size: 1.1rem;
}

.billing-index-overview {
    padding-bottom: .8rem;
}

.billing-index-side-stat {
    align-items: center;
    border-bottom: 1px solid var(--client-soft-line);
    color: #66758d;
    display: flex;
    font-size: .9rem;
    font-weight: 800;
    justify-content: space-between;
    margin: 0 1rem;
    padding: .8rem 0;
}

.billing-index-side-stat strong {
    color: #273449;
    font-size: 1rem;
}

.billing-index-overview .billing-index-overdue-link {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #b45309;
    justify-content: space-between;
    min-height: 46px;
}

.billing-index-overdue-link strong {
    font-size: 1rem;
}

@media (max-width: 760px) {
    .billing-index-period-navigation span {
        display: none;
    }

    .billing-index-period-summary,
    .billing-index-period-summary dl {
        align-items: stretch;
        flex-direction: column;
    }

    .billing-index-period-summary dl {
        gap: .7rem;
    }

    .billing-index-period-summary dl > div {
        display: flex;
        justify-content: space-between;
        text-align: left;
    }

    .billing-index-period-summary .is-net {
        border-left: 0;
        border-top: 1px solid var(--client-line);
        padding-left: 0;
        padding-top: .7rem;
    }

    .billing-index-date,
    .billing-index-client-select {
        flex: 1 1 100%;
    }

    .billing-index .clientsphere-heading-actions,
    .billing-index .clientsphere-heading-actions .clientsphere-btn {
        width: 100%;
    }
}