﻿.invoice-container{
    width:100%;
    padding:10px;
    box-sizing:border-box;
    
}

.grid-card{
    background:#fff;
    border:1px solid #dfe5df;
    border-radius:12px;
    padding:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    overflow:hidden;
}

.invoice-grid{
    width:100%;
    border-collapse:collapse;
    background:#fff;
     border:none !important;
}

.invoice-grid th{
    background:#2e7d32;
    color:#fff;
    padding:10px;
    font-size:13px;
    text-align:center;
    border:1px solid #ddd;
}

.invoice-grid td{
    border:1px solid #e0e0e0;
    padding:6px;
    vertical-align:middle;
}

.grid-input{
    width:100%;
    border:1px solid #d5d5d5;
    border-radius:4px;
    padding:6px;
    font-size:13px;
    box-sizing:border-box;
}

.grid-input:focus{
    border-color:#2e7d32;
    outline:none;
}

.amount-label{
    font-weight:600;
    color:#2e7d32;
}

.btn-delete{
    background:#dc3545;
    color:#fff !important;
    padding:5px 10px;
    border-radius:4px;
    text-decoration:none;
}

/* ========================= */
/* MOBILE NO MORE TABLES     */
/* ========================= */

@media only screen and (max-width:768px){

    .invoice-grid thead{
        display:none;
    }

    .invoice-grid,
    .invoice-grid tbody,
    .invoice-grid tr,
    .invoice-grid td{
        display:block;
        width:100%;
    }

    .invoice-grid tr{
        background:#fff;
        border:1px solid #ddd;
        border-radius:12px;
        padding:12px;
        margin-bottom:15px;
        box-shadow:0 2px 8px rgba(0,0,0,.08);
    }

    .invoice-grid td{
        position:relative;
        padding:10px 10px 10px 42%;
        border:none;
        border-bottom:1px solid #f0f0f0;
        min-height:42px;
        word-break:break-word;
    }

    .invoice-grid td:last-child{
        border-bottom:none;
    }

    .invoice-grid td:before{
        content:attr(data-label);
        position:absolute;
        left:10px;
        top:10px;
        width:35%;
        font-weight:700;
        color:#2e7d32;
        white-space:nowrap;
    }
}