.invoice-container {
    display: grid;
    grid-template-rows: 5rem 1fr 5rem;
    height: calc(100dvh - 45px);
}

.dialog-invoices-container {

}

.dialog-invoices-container > section:nth-child(1) {
    padding-top: 3rem;
}

.dialog-invoices-container > section:nth-child(2) {
    min-height: 400px;
    max-height: 600px;
    overflow-y: auto;
}

.invoice-top-menu {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
}

.invoice-options {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.invoice-options-date-range {
    width: 380px;
}

.invoice-option-filter {
    width: 150px;
}

.invoice-page-body {
    margin: 1rem;
    
    & li {
        margin-top: .5rem;
    }
}

.invoice-page-status-message {
    display: grid;
    place-items: center;
    height: inherit;
}

.invoice-table-grid {
    display: grid;
    grid-template-columns: 6.5rem repeat(10, minmax(4rem, 10rem)) 1fr;
    gap: 0;
    /*height: calc(100dvh - 240px);*/
    overflow-x: hidden;
    padding-inline: .5rem;

    & h6, & p {
        text-align: center;
    }
    
    & h6:nth-child(1), & p:nth-child(1) {
        text-align: start;
    }

    & p:nth-child(9), & h6:nth-child(9) {
        text-align: end;
    }

    & div {
        display: grid;
        justify-self: end;
    }

    & h6:last-child {
        text-align: end;
    }

    & > .flex {
        flex-direction: row-reverse;
    }
}


.invoice-table-header {
    border-bottom: 1px solid var(--mud-palette-tertiary);
    padding-block: .5rem;
    overflow-y: hidden;
}

.invoice-table-body {
    height: inherit;
    overflow-y: auto;
}

.invoice-table-footer {
    display: grid;
    grid-template-columns: 1fr repeat(3, auto);
    gap: 2rem;
    
    & > div {
        text-align: end;
    }
}