/* 726 TECH 2017 - 2022 */


/* DATA TABLE BOX */

.DataTableBox {
    width: 100%;
    overflow-x: scroll;
    overflow-y: scroll;
    max-height: 70vh;
    max-width: 100%;
}

.DataTableBox.loading {
    overflow-x: hidden;
    overflow-y: hidden;
}

.DataTableBox.mini {
    max-height: 30vh;
}


/* DATA TABLE */

.DataTable {
    width: 100%;
    border-spacing: 0;
    max-width: 100%;
    overflow: auto;
}

.DataTable thead {
    background-color: #bfbfbf;
}

.DataTable thead th {
    background-color: #bfbfbf;
    position: sticky;
    top: 0;
    border: 1px solid #999;
    font-size: 1.75vh;
}

.DataTable tbody td {
    background-color: #fff;
    border: 1px solid #bfbfbf;
    color: #333;
    font-size: 1.75vh;
    padding: 0.5vh 0.25vw;
}

.DataTable tfoot td {
    position: sticky;
    bottom: 0;
    background-color: #eee;
    padding: 0.2vh 0.1vw 0 0.1vw;
    color: #333;
    font-size: 2.0vh;
    border-top: 1px solid #999;
}

.DataTable td.bold {
    font-weight: bold;
}

.DataTable td.center {
    text-align: center;
}

.DataTable td.right {
    text-align: right;
}

.DataTable td.mono {
    font-family: monospace;
}

.DataTable tr.bg-red td {
    background-color: #fff1f1;
}

.DataTable tr.bg-blue td {
    background-color: #efefff;
}

.DataTable tr.bg-gray td {
    background-color: #eee;
}

.DataTable tr.bg-green td {
    background-color: #efffef;
}

.DataTable tr.bg-yellow td {
    background-color: #ffffe1;
}

.DataTable tr.bg-purple td {
    background-color: #ffefff;
}

.DataTable tr.selected td {
    background-color: lightskyblue;
}


/* SKELETON BOX */

.SkeletonBox:empty {
    width: 96%;
    height: 60vh;
    background-image: linear-gradient( 100deg, rgba(235, 235, 235, 0), rgba(235, 235, 235, 0.5) 50%, rgba(235, 235, 235, 0) 80%), linear-gradient( lightgray 20px, transparent 0), linear-gradient( lightgray 20px, transparent 0), linear-gradient( lightgray 20px, transparent 0), linear-gradient( lightgray 20px, transparent 0);
    background-repeat: no-repeat;
    background-size: 50px 200px, /* highlight */
    150px 200px, 350px 200px, 300px 200px, 250px 200px;
    background-position: 20vw 10vh, /* highlight */
    30vw 10vh, 30vw 15vh, 30vw 20vh, 30vw 25vh;
    animation: shine 1s infinite;
}

@keyframes shine {
    to {
        background-position: 60vw 10vh, /* move highlight to right */
        30vw 10vh, 30vw 15vh, 30vw 20vh, 30vw 25vh;
    }
}