.datatable thead tr{
    border: 1px solid black;
}

.datatable thead tr th {
    font-weight: bold;
    text-align:center;
    background-color: #0DDFFF;
    border-right: 1px solid black;
    cursor: pointer;
    padding-top: 10px;
    padding-right: 18px;
    padding-bottom: 10px;
    padding-left: 18px;
}

.datatable thead tr th.both {
    background-image: url("datatable/sort_both.png");
    background-repeat: no-repeat;
    background-position: center right;
    border-bottom: 1px solid #111;
}

.datatable thead tr th.desc {
    background-image: url("datatable/sort_desc.png");
    background-repeat: no-repeat;
    background-position: center right;
    border-bottom: 1px solid #111;
}

.datatable thead tr th.asc {
    background-image: url("datatable/sort_asc.png");
    background-repeat: no-repeat;
    background-position: center right;
    border-bottom: 1px solid #111;
}

.datatable tbody tr:hover {
    background-color: #a0a0e5;
}

.datatable tr td:nth-child(1),
.datatable th:nth-child(1) {
    display: none;
}

.datatable tr:nth-child(even) {
    background: #cffaf8
}

.datatable tr:nth-child(odd) {
    background: #fffaff
}

.bg-1 {
    background-color: #7cc0ff !important;
}

.bg-2 {
    background-color: #86efac !important;
}

.bg-3 {
    background-color: #6c757d !important;
}

.bg-4 {
    background-color: #ff7584 !important;
}

.bg-5 {
    color: #ffFAA0 !important;
}

.fg-1 {
    color: #0000ff !important;
}

.fg-2 {
    color: #198754 !important;
}

.fg-3 {
    color: #0f0f0f !important;
}

.fg-4 {
    color: #ff0000 !important;
}

.fg-5 {
    color: #ffFAA0 !important;
}