{{-- <style>
    .custom-table-0001 {
        /* position: absolute; */
        height: 25vh;
        min-height: 300px;
        width: 16vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* border: 0.5px solid rgb(216, 216, 216); */
        border-radius: 8px;
    }

    @media (max-width: 1540px) {
        .custom-table-0001 {
            width: 19vw;
        }
    }

    @media (max-width: 1385px) {
        .custom-table-0001 {
            width: 26vw;
        }
    }

    .custom-table-0001 table {
        border-collapse: collapse;
    }

    .custom-table-0001 thead {
        border-radius: 8px;
    }

    .custom-table-0001 thead td {
        /* border: 0.5px solid rgb(216, 216, 216); */
    }

    .custom-table-0001 tbody>tr {
        align-items: end;
    }

    .custom-table-0001 tbody td {
        height: 20px;
        width: 10px;
        /* border: 0.5px solid rgb(216, 216, 216); */
    }

    /* .custom-table-0001 table td {
        width: 25%
    } */

    .custom-table-0001 thead,
    thead>tr,
    thead>th {
        background-color: #1F51FF;
        height: 30px;
        color: white;
    }

    .custom-table-0001 tfoot,
    tfoot>tr,
    tfoot>td {
        background-color: #BFBFBF;
        border: 0.5px solid rgb(255, 255, 255);
        height: 30px;
        color: black;
        position: relative;
        font-weight: 800;
        bottom: 0;
    }

    .custom-table-0001 table .first-col {
        width: 32px;
    }

    .custom-table-0001 table>thead>tr>td {
        width: 100px;
        height: 30px;
    }

    .custom-table-0001 table.tbfoot tfoot tr td {
        /* width: 100px; */
    }

    .custom-table-0001 .middle-body {
        height: 100%;
        overflow: hidden;
        overflow-y: scroll
    }

    .custom-table-0001 tbody>tr:nth-child(odd) {
        background-color: #f9f9f9;
    }

    .custom-table-0001 .ob {
        width: 80px;
    }

    .custom-table-0001 .vol {
        width: 25%;
        text-align: center;
    }

    .custom-table-0001 .qtd {
        width: 30%;
        text-align: end;
        padding-right: 14px;
    }

    .tbintern {
        height: 5vh;
        min-height: 300px;
        width: 16vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border: 0.5px solid rgb(216, 216, 216);
        border-radius: 8px;
    }



    @media (max-width: 1540px) {
        .tbintern {
            width: 19vw;
        }
    }

    @media (max-width: 1385px) {
        .tbintern {
            width: 26vw;
        }
    }
</style>

<div class="custom-table-0001">

    <h4 title="OBs registradas"><strong>OBs</strong></h4>

    <div class="tbintern">
        <table>
            <thead>
                <tr>
                    <td style="border-radius: 8px 0 0 0" class="first-col">
                        <span class="glyphicon glyphicon-th-list"></span>
                    </td>
                    <td class="ob">ID</td>
                    <td class="vol">TALAO</td>
                    <td class="qtd" style="border-radius: 0 8px 0 0">SITUACAO</td>
                </tr>
            </thead>
        </table>
        <div class="middle-body">
            <table>
                <tbody>
                    <tr ng-repeat="data in [{OB: 1, VOLUMES: 2, QUANTIDADE: 3}]">
                        <td class="first-col"><span ng-if="vm.confProd.LAST_OB == data.OB"
                                title="Última OB registrada">🔵</span></td>
                        <td class="ob">@{{ data.ID }}</td>
                        <td class="vol">@{{ data.TALAO }}</td>
                        <td class="qtd">@{{ data.SITUACAO }} KG</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <table class="tbfoot" style="font-size: 1.1rem;">
            <tfoot>
                <tr>
                    <td style="border-radius: 0 0 0 8px; padding-left: 10px" class="first-col">TOTAIS</td>
                    <td class="ob"></td>
                    <td class="vol">                                    @{{ vm.OB.SELECTED.CONF_VOLUMES }}</td>
                    <td class="qtd" style="border-radius: 0 0 8px 0">   @{{ vm.OB.SELECTED.CONF_PESOB }} KG</td>
                </tr>
            </tfoot>
        </table>
    </div>
</div> --}}