body {
    font-size: 15px;
    color: #343d44;
    font-family: "segoe-ui", "open-sans", tahoma, arial;
    padding: 0;
    margin: 0;
}
        table {
        display: block;
        height: 400px;
        overflow-y: auto;
        overflow-x: auto;
        }

        th {
        background: white;
        position: sticky;
        top: 0;
        }

table td {
    transition: all .5s;
}


/* Table */
.data-table {
    border-collapse: collapse;
    font-size: 14px;
    width: 95%;
}

.data-table th, 
.data-table td {
    border: 1px solid #e1edff;
    padding: 7px 17px;
}
.data-table caption {
    margin: 7px;
}

/* Table Header */
.data-table thead th {
    background-color: #508abb;
    color: #FFFFFF;
    border-color: #6ea1cc !important;
    text-transform: uppercase;
}

/* Table Body */
.data-table tbody td {
    color: #353535;
}
.data-table tbody td:first-child,
.data-table tbody td:nth-child(4),
.data-table tbody td:last-child {
    text-align: center;
}

.data-table tbody tr:nth-child(odd) td {
    background-color: #f4fbff;
}
.data-table tbody tr:hover td {
    background-color: #ffffa2;
    border-color: #ffff0f;
}

/* Table Footer */
.data-table tfoot th {
    background-color: #e5f5ff;
    text-align: right;
}
.data-table tfoot th:first-child {
    text-align: left;
}
.data-table tbody td:empty
{
    background-color: #ffcccc;
}



        /* Style the button that is used to open and close the collapsible content */
        .collapsible {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 6px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        }

        /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
        .active, .collapsible:hover {
        background-color: #ccc;
        }

        /* Style the collapsible content. Note: hidden by default */
        .content {
        padding: 0 18px;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.8s ease-out;
        }

        .collapsible:after {
        content: '\02795'; /* Unicode character for "plus" sign (+) */
        font-size: 13px;
        color: white;
        float: right;
        margin-left: 5px;
        }

        .active:after {
        content: "\2796"; /* Unicode character for "minus" sign (-) */
        }