.client-invoices.active,
.client-offers.active{
    cursor: pointer;
}
.client-invoices{
    color: #0066ff;
}
.client-offers{
    color: #00aa66;
}
.client-invoices.active:hover,
.client-offers.active:hover{
    background-color: #fff;
    background-image: url(../img/arrow-forward.svg);
    background-size: 20px;
    background-position: right 5px center;
    background-repeat: no-repeat;
}


/****** INVOICES LIST *******/
#document-list-container{
    display: none;
    height: 100%;
    width: 100%;

    position: fixed;
    padding-top: 39px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 0;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */

    transition: padding-left .3s, padding-right .3s;
}
#document-list-container.side{
    padding-left: 440px;
}

#document-list-container.right-side{
    padding-right: 250px;

}

#document-list-container.side .invoice{
    grid-template-columns: 40px 100px 100px auto 100px;
}
#document-list-container.side .offer{
    grid-template-columns: 40px 100px 100px auto 100px;
}
#document-list-container.side .invoice-client{
    display: none;
}

#document-list{
    position: relative;
    border-top: 1px solid #ccc;
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    background:#eee;
    padding-bottom: 80px;
}

.list-title{
    box-sizing: border-box;
    font-size: 15px;
    letter-spacing: .05em;
    padding: 12px 60px 0px;
    font-family: roboto, Helvetica, sans-serif;
    color: #999;
    border-bottom: 1px solid #ccc;
    height: 40px;
    box-sizing: border-box;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.month-title{
    box-sizing: border-box;
    font-size: 15px;
    letter-spacing: .05em;
    border-bottom: 1px solid #ccc;
    padding: 12px 60px 0px;
    font-family: roboto, Helvetica, sans-serif;
    color: #999;
    height: 40px;
    box-sizing: border-box;
    text-transform: uppercase;
}
.month-total{
    display:grid;
    grid-template-columns: auto 300px 100px;
    box-sizing: border-box;
    color: #999;
    height: 40px;
    box-sizing: border-box;
}
.month-total div{
    box-sizing: border-box;
    padding: 12px 5px;
}
.month-total .total-title{
    text-align: left;
}

.quarter-total{
    display:grid;
    grid-template-columns: auto 300px 100px;
    box-sizing: border-box;
    height: 40px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    color: #999;
    margin-top: 40px;
}
.quarter-total div{
    box-sizing: border-box;
    padding: 12px 5px;
}
.quarter-total .total-title{
    text-align: right;
}

#document-list .warning{
    padding: 12px 60px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    color: #f00;
    font-style: italic;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice,
.offer{
    display:grid;
    grid-template-columns: 40px 100px 100px auto 300px 100px;
    box-sizing: border-box;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    height: 40px;
    overflow: hidden;
}
.offer{
    color: #00aa66;
}
.invoice{
    color:#06f;
}
.expired,
.client-missing{
    color: #FF4050; /* #f30; */
}
.rejected{
    color: #ccc;
}
.pending{
   /* color: #666;*/
   color: #999;
}

.invoice:hover,
.offer:hover{
    background:#fff;
}

.invoice:active,
.offer:active{
    background:#ddd;
}

.invoice div,
.offer div{
    box-sizing: border-box;
    padding: 12px 5px;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.invoice-nr,
.invoice-date,
.invoice-state{
    text-align: center;
}
.invoice-amount{
    text-align: right;
    padding-right: 10px !important;
}
.invoice-state{
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    /* background-color: #eee; */
    background-position: center center;
    background-size: 14px;
    background-repeat: no-repeat;
}
.offer .invoice-state{
    border: none;
}
.invoice-state.pending{
    /* background-image: url('../img/label-pending.svg'); */
    background-image: url('../img/label-unpaid.svg');
}
.invoice-state.rejected{
    background-image: url('../img/label-rejected.svg');
}
.invoice-state.paid,
.invoice-state.accepted{
    /*background-color: #0a6;*/
    background-image: url('../img/label-paid.svg');
}
.invoice-state.unpaid{
    /*background-color: #06F;*/
    background-image: url('../img/label-unpaid.svg');
}
.invoice-state.expired{
    /*background-color: #f30;*/
    background-image: url('../img/label-expired.svg');
}


/* Mobile */
@media screen and (max-width: 600px), screen and (max-device-width: 700px) {

    .month-total{
        grid-template-columns: auto auto 100px;
    }

    
}