 body {
            font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
        }
        
        /* Table */
        .demo-table {
            border-collapse: collapse;
            font-size: 12px;
        }
        .demo-table th, 
        .demo-table td {
            border: 1px solid #E0FFFF !important; /* garis Border */
            padding: 1px 1px; /*padding table border*/
        }
        .demo-table .title {
            caption-side: bottom;
            margin-top: 12px;
        }
        
        /* Table Header */
        .demo-table thead th {
            /*background-color:#F5F5F5; /*header border*/
            background-color:#CCC; /*header border*/
            color: black;
            border-color: #E0FFFF !important;
            text-transform: uppercase;
            height: 1px;
        }
        
        /* Table Body */
        .demo-table tbody td {
            color: #353535;
        }
        .demo-table tbody td:first-child,
        .demo-table tbody td:last-child,
        .demo-table tbody td:nth-child(4) {
            text-align: right;
        }
        .demo-table tbody tr:nth-child(odd) td {
            /*background-color: #87CEFA; /* warna row detail */
        }
        .demo-table tbody tr:hover td {
            background-color:#CCC; /* Tunjuk Kursor */
            /*background-color:#F0FFFF; /* Tunjuk Kursor */
            color: black;
            border-color: #e0ffff !important;
            transition: all .2s;
        }
        
        /* Table Footer */
        .demo-table tfoot th {
            background-color: #e5f5ff;
        }
        .demo-table tfoot th:first-child {
            text-align: left;
        }
        .demo-table tbody td:empty /* data kosong */
        {
            /*background-color: #ffcccc;*/
        }
      