div.dt-button-collection button.dt-button {
    background: lightgrey !important;
    color: black;
}

div.dt-button-collection button.dt-button.active {
    background: #398bf7 !important;
    color: white;
}

/* align selected columns */
th.dt-center, td.dt-center { text-align: center; }
th.dt-right, td.dt-right { text-align: right; }

/* Make context menu visible, also when only 1 entry in the datatable */
/* See https://datatables.net/forums/discussion/50607/changing-datatables-scrollbody-overflow */
/*Check: https://coder-coder.com/z-index-isnt-working/*/
        .dataTables_scrollBody {
            /*overflow-x causes issues with very wide tables*/
            overflow-y: visible !important;
            /*overflow: visible !important;*/
        }
        /*.dataTables_scrollHead {*/
            /*!*overflow-x causes issues with very wide tables*!*/
            /*overflow-y: visible !important;*/
            /*!*overflow: visible !important;*!*/
        /*}*/

/* Smaller padding for datatable to maximize table area */
.card-body-datatable {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 10px;
    padding-bottom: 3px;
}


/* context menu header via data attribute "data-menutitle" */
.data-title:before {
    content: attr(data-menutitle);  /* set via contextMenu.events */
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: #DDD;
    padding: 2px;

    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
}
.data-title :first-child {
    margin-top: 20px;
}

/* small font in select2 select boxes */
.select2-results__option, .select2-selection__rendered
{
    font-size: small;
}