/*****************************************
    Custom breadcrumbs
*****************************************/
.btn-breadcrumb .btn:not(:last-child):after {
    content: " ";
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 10px solid white;
}
.btn-breadcrumb .btn:not(:last-child):before {
    content: " ";
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 10px solid rgb(173, 173, 173);
}

/** Default button **/
.btn-breadcrumb .btn.btn-default:not(:last-child):after {
  border-left: 10px solid #FFFFFF;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
  border-left: 10px solid #bfcad2;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
  border-left: 10px solid #ebebeb;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
  border-left: 10px solid #adadad;
}

/** Primary button **/
.btn-breadcrumb .btn.btn-primary:not(:last-child):after {
  border-left: 10px solid #428bca;
}
.btn-breadcrumb .btn.btn-primary:not(:last-child):before {
  border-left: 10px solid #357ebd;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):after {
  border-left: 10px solid #3276b1;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):before {
  border-left: 10px solid #285e8e;
}

.btn-breadcrumb .btn.btn-default:not(:last-child):after {
    content: url("data:image/svg+xml,<svg fill='%239bb0c5' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg' width='8' height='8'><g><path d='M6.5,4c-1.3,1.3-2.7,2.7-4,4C2.2,7.7,1.9,7.4,1.6,7.1c0.9-0.9,2-2,3-3C3.6,3,2.5,2,1.5,0.9c0.4-0.3,0.7-0.7,1-0.9C3.8,1.3,5.1,2.7,6.5,4z'/></g></svg>");
}

#dbq-document-class-list-breadcrumbs a.btn {
    color: #001323;
    background: 0;
    font-weight: 600;
}
    #dbq-document-class-list-breadcrumbs a.btn:hover {
        color: #0054F0;
    }
#dbq-document-class-list-breadcrumbs svg {
    fill: #001323;
}
    #dbq-document-class-list-breadcrumbs svg:hover {
        fill: #0054F0;
    }
    .btn-breadcrumb a {
        border: 0 !important;
    }
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
    border-left: 0 !important;
} 
.btn-breadcrumb .btn.btn-default:not(:last-child):after {
    border-left: 0 !important;
}
.btn-breadcrumb:hover .btn.btn-default:not(:last-child):after {
    border-left: 0 !important;
}


/*****************************************
    Styling for table cells
*****************************************/
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: 0px;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #eee;
}

.table>tbody>tr>span.row-button {
    background-color: rgba(0, 0, 0, 0);
    color: #888888; 
}

.table>tbody>tr>span.orange:hover, .table>tbody>tr>button.orange:hover {
    background-color: #ffc107 !important;
    border: 1px solid #ffc107 !important;
    color: #FFFFFF;
}
.table>tbody>tr>span.blue:hover, .table>tbody>tr>button.blue:hover {
    background-color: #3893d0 !important;
    border: 1px solid #3893d0 !important;
    color: #FFFFFF;
}
.table>tbody>tr>span.red:hover, .table>tbody>tr>button.red:hover {
    background-color: #b64f4b !important;
    border: 1px solid #b64f4b !important;
    color: #FFFFFF;
}
.table>tbody>tr>span.green:hover, .table>tbody>tr>button.green:hover {
    border: 1px solid #5cb85c !important;
    background-color: #5cb85c !important;
    color: #FFFFFF;
}


/*****************************************
    Document Class Dashboards
*****************************************/
/*#classlist-filters,*/
#classlist-dashboard-header {
}
/*.classlist-dashboard, <-- this one can never have shaddow or other styling..*/
/*
    div.element-graph,
    #document-topics .dbq-column .block,
    .dashboard-list-item-filters,
    div[data-topic-type-code='Dashboard'] section > .row .flex-container > .dbq-column, No background on columns..!! <-- if you want blocks separate each other vertically inside a column, in the document the column should get a "dbq-column-vertical-blocks" class i think?
*/
#document-class-list-filters,
#classlist-dashboard-footer,
#classlist-tree-grid,
#classlist-kanban-board,
#classlist-workflow,
.dashboard-list-item-filters,
.dashboard-list-item-content,
.dbq-document-class-list-tree,
.element-graph,
div[data-topic-type-code='Dashboard'] section > .row > div > div.element-graph, /*div[type="graph"] or div[data-element-type="Graph"]*/
#classlist-tiled-list, /* RUMM has this */
#content-wrapper .dbq-document-list-table-view .form-inline { /* GLT has this */ /*#classlist .classlist-window .classlist-window-content .xl-document, */
    background: #FFFFFF;
}
/*
    div[data-topic-type-code='Dashboard'] section > .row .flex-container > .dbq-column, No shadow on columns..!! can be multiple charts inside a column..
*/
#document-class-list-filters,
#classlist-dashboard-footer,
#classlist-tree-grid,
#classlist-kanban-board,
#classlist-workflow,
#classlist-timeline,
#classlist-tiled-list,
.dashboard-list-item-content,
.dbq-document-class-list-tree,
.element-graph,
div[data-topic-type-code='Dashboard'] section > .row > div > div.element-graph,
div[data-topic-type-code='Dashboard'] section > .row > div > .flex-container div.element-graph,
#content-wrapper .dbq-document-list-table-view .form-inline,
#dbq-content-container .tab-pane #classlist.active .dbq-no-data-available-container {
    /*box-shadow: 0px 3px 5px rgb(0 24 62 / 7%);*/ /* ATR portal -> dashboard -> 3- jaarlijkse trendlijn, DOUBLE SHADOWS otherwise*/
    -webkit-box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
    -moz-box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
    box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
}
/* IF element-graph is inside a dbq-column then no shadow (because there can be more charts in one dbq-column) */
/*div[data-topic-type-code='Dashboard'] section > .row .flex-container > .dbq-column > div.element-graph {
    box-shadow: none;
}*/
#dbq-content-container .tab-pane #classlist.active .element-graph .dbq-no-data-available-container,
#classlist-search-list #document-class-list-filters {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
/*div[data-topic-type-code='Dashboard'] section > .row .flex-container > .dbq-column.dbq-column-vertical-blocks { <-- not possible, 1 column can't get a unique class in documents
    background: 0;
    box-shadow: none;
} */
/* Separate blocks VERTICAL inside column (for this, a custom styling should be added, where a specific column should be cleansed of background and shadow) */
#document-topics .dbq-column > .block {
    background: #FFFFFF;
    /* box-shadow: 0px 3px 5px rgb(0 24 62 / 7%);  Note where this is a problem..!!! */
}
div[data-topic-type-code='Dashboard'] section > .row .flex-container > .dbq-column > .block { /* this shadow is for a unique situation, NOTE WHICH ONE!!?? */
    /*box-shadow: 0px 3px 5px rgb(0 24 62 / 7%);*/
    /* Problem (double shadow): Tijdregistratie Beheer -> maandoverzicht */
}
#document-topics .dbq-column > .block:nth-child(1) {
}
#document-topics .dbq-column .block.dbq-block-text {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
/*div[data-topic-type-code='Dashboard'] section > .row > div > div.element-graph {
    margin-bottom: 10px !important; // <-- causing double margin at CMS -> facturatie. and its should be top otherwise..
}*/
div[data-topic-type-code='Dashboard'] section > .row > div > .dbq-wrapper > div > .flex-container > .dbq-column,
.dbq-column .dbq-column { /*div[data-topic-type-code='Dashboard'] section > .row .flex-container > */
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

/*****************************************
    DocumentClassListMode: Timeline
*****************************************/

#classlist-timeline.classlist-container,
#classlist-timeline.classlist-container .mbsc-calendar-table {
    background: #fff; /*#F5F7F9*/
}

/*****************************************
    Document Class Function Buttons Popup
*****************************************/
.function-buttons-popup {
}
    .function-buttons-popup .function-buttons-container {
    }
        .function-buttons-popup .function-buttons-container .function-button-container {
            border-top: 1px solid #bfcad2;
        }
            .function-buttons-popup .function-buttons-container .function-button-container:first-of-type {
                border-top: 0 none;
            }


/*****************************************
    Custom checkbox 
*****************************************/
.document-class-list-filter.checkbox-bottom .cr .cr-icon {
}
.document-class-list-filter.checkbox-bottom label input[type="checkbox"] + .cr > .cr-icon {
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    /*transition: all .3s ease-in; <-- outcommented for dark/light switch */
}
.document-class-list-filter.checkbox-bottom label input[type="checkbox"]:checked + .cr > .cr-icon {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}
.document-class-list-filter.checkbox-bottom label input[type="checkbox"]:disabled + .cr {
    opacity: .5;
}

/*****************************************
    Document topic tab bar styling
*****************************************/
.document-class-list-tabs-container {
    background-color: #f8f8f8;
}
    .document-class-list-tabs-container .help-button {
        color: #b3baca;
    }
        .document-class-list-tabs-container .help-button svg.dbq-icon-20x20 {
            fill: #001323 !important;
        }
            .document-class-list-tabs-container .help-button svg.dbq-icon-20x20:hover {
                fill: #0054F0 !important;
            }
.class-list-menu-help svg {
    fill: #001323;
}
.dbq-application-rumm .class-list-menu-help svg { /* Needs to be placed in RUMM custom styling (and other custom styling with a (dark) background-image)*/
    fill: #FFFFFF;
}

.nav-tabs {
    background-color: #3c3c3c;
    border-bottom: 1px solid #e2e7f3;
}
        .nav-tabs > li > a {
            border: none;
            color: #FFFFFF;
        }

    .nav-tabs > li.active > a {
        border-width: 0;
        color: #FFFFFF !important;
    }
    .nav-tabs > li > a:focus, .nav-tabs > li > a:hover {
        color: #0054F0 !important;
    }
    .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
        border-width: 0;
        background-color: transparent;
        color: #0054F0 !important;
    }
            .nav-tabs > li > a::after { 
                content: "";
                background: #FFFFFF; 
                /*transition: all 250ms ease 0s; <-- outcommented for dark/light switch */
                transform: scale(0); 
            }
        .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after {
            border-bottom: 5px solid #0054F0;
        }
.tab-nav > li > a::after {
    background: white none repeat scroll 0% 0%;
    color: #FFFFFF;
}

/*****************************************
    Classlist specific document styling (CUSTOM DROPDOWN (bootstrap) / MULTISELECT)
*****************************************/
#classlist .document-class-list .dropdown-menu a, #classlist .document-class-list-tree .dropdown-menu a {
    /*background: #e5e7ec;*/
    color: #001323;
}
#class-list-menu .dropdown-menu {
    color: #001323;
    background-color: #e5e7ec;
    border: 2px solid #e5e7ec;
}
    #class-list-menu .dropdown-menu > li {
        background-color: #f5f7f9;
    }
        #class-list-menu .dropdown-menu > li > a {
            color: #001323 !important;
        }

#content-wrapper .form-inline {
    background: #FFFFFF;
    border-color: #e5e7ec;
    color: #001323;
}
    #content-wrapper .form-inline ::-webkit-input-placeholder, #content-wrapper .form-control::-webkit-input-placeholder {
        color: #0054F0 !important;
        /*opacity: 0.6 !important;*/
    }
    #content-wrapper .form-inline ::-moz-placeholder, #content-wrapper .form-control::-moz-placeholder {
        color: #0054F0 !important;
        /*opacity: 0.6 !important;*/
    }
    #content-wrapper .form-inline :-ms-input-placeholder, #content-wrapper .form-control:-ms-input-placeholder {
        color: #0054F0 !important;
        /*opacity: 0.6 !important;*/
    }
    #content-wrapper .form-inline :-moz-placeholder, #content-wrapper .form-control:-moz-placeholder {
        color: #0054F0 !important;
        /*opacity: 0.6 !important;*/
    }
#content-wrapper .dbq-document-list-table-view .form-inline {
    border: 0;
}
#content-wrapper .dbq-document-list-table-view table {
    border-collapse: collapse !important;
}
    #content-wrapper .dbq-document-list-table-view table th {
        color: #001323;
        font-weight: 600;
        text-transform: capitalize;
        font-size: 12px;
        line-height: 20px;
        padding: 5px 10px;
        margin: 0;
        border-bottom: 1px solid #e5e7ec !important;
    }
    #content-wrapper .dbq-document-list-table-view table tr {
        color: #001323;
        font-weight: 500;
        text-transform: capitalize;
        font-size: 12px;
        line-height: 20px;
        padding: -;
        margin: 0;
        background: #fff;
        border-bottom: 1px solid #e5e7ec !important;
    }
    #content-wrapper .dbq-document-list-table-view table tr td {
        padding: 5px 10px;
    }

/*****************************************
    Modal dialog styling
*****************************************/
.modal-dialog-loading {
    background-color: white;
}

/*****************************************
    Class list image modal dialog styling
*****************************************/
#classlist-image-modal .modal-dialog .modal-content {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

/*****************************************
    DocumentClassListMode: SearchList 
*****************************************/
#classlist-search-list {
}

    #classlist-search-list .dbq-scrollbar::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.3);
        -moz-box-shadow: inset 0 0 6px rgba(255,255,255,0.3);
        box-shadow: inset 0 0 6px rgba(255,255,255,0.3);
        background-color: #f8f8f8;
    }
    #classlist-search-list .dbq-scrollbar::-webkit-scrollbar {
        background-color: #FFFFFF;
    }
    #classlist-search-list .dbq-scrollbar::-webkit-scrollbar-thumb {
        background-color: #ddd;
    }

    #classlist-search-list #classlist-filters {
        background: #f8f8f8;
    }
        #classlist-search-list #classlist-filters #document-class-list-filters {
        }
        #classlist-search-list #classlist-filters .document-class-list-filter {
        }
        #classlist-search-list #classlist-filters .document-class-list-filter-title {
            border-bottom: 1px solid #e5e7ec !important;
            color: #bfcad2;
        }
            #classlist-search-list #classlist-filters .document-class-list-filter-title:hover {
                background: #F5F7F9;
            }
            #classlist-search-list #classlist-filters .document-class-list-filter-title .dbq-document-class-list-filter-title-text {
                color: #001323;
            }
            #classlist-search-list #classlist-filters .document-class-list-filter-title svg {
                fill: #bfcad2;
            }
                #classlist-search-list #classlist-filters .document-class-list-filter-title svg.dbq-arrow-down {
                    transform: rotate( 180deg );
                }
                #classlist-search-list #classlist-filters .document-class-list-filter-title svg.dbq-arrow-up {
                    transform: rotate( 0deg );
                }
        #classlist-search-list #classlist-filters .document-class-list-filter {
            border-top: 1px solid #e5e7ec !important;
        }
            #classlist-search-list #classlist-filters .document-class-list-filter:first-of-type {
                border-top: 0 !important;
            }

#classlist-search-list #classlist-search-list-table {
    background: #FFFFFF; /*This has to have a background because the table increases horizontal in width but the background (of search + pagination) not*/
}

    #classlist-search-list .loading-container {
        background-color: #FFFFFF;
        background: url(/DbqLibraries/DbqDeveloperTools/img/dbq-logo-gif-light.gif);
        background-repeat: no-repeat;
        background-size: 100px 100px;
    }
        /*.dbq-application-rumm #classlist-search-list .loading-container {
            background-color: #FFFFFF;
            background: url(/DbqLibraries/DbqDeveloperTools/img/cirdax-logo-gif.gif);
            background-repeat: no-repeat;
            background-size: 100px 100px;
        }*/
    
    #classlist-search-list #classlist-filters .document-class-list-filter .checkbox label .search-property-count {
        color: #001323;
    }

/*****************************************
    Classlist TreeGrid cell styling
*****************************************/
#classlist .document-class-list-tree tr {
    color: #4e4e4e;
    font-weight: 600;
}
        #classlist .document-class-list-tree tr.ui-iggrid-activerow.ui-state-focus {
            background: #FFFFFF;
            color: #333;
        }

    #classlist .document-class-list-tree .row-button {
        border: none;
    }
    
        #classlist .document-class-list .row-button.disabled,
        #classlist .document-class-list-tree .row-button.disabled {
            color: #bfcad2;
        }
#classlist .document-class-list-tree .image-container img {
}
#classlist .document-class-list-tree .image-container .icon-container {
    background-color: #FFFFFF;
    border-bottom-right-radius: 3px;
}
#classlist .document-class-list-tree tr:hover .ui-icon:before {
    color: #FFFFFF !important;
}
#classlist .document-class-list-tree .image-container .icon-container {
    background-color: #e5e7ec;
}
    #classlist .document-class-list-tree .image-container .icon-container svg {
        fill: #bfcad2;
        background: #e5e7ec;
    }

#classlist .document-class-list .row-button.blue:hover,
#classlist .document-class-list .row-button.green:hover,
#classlist .document-class-list .row-button.orange:hover,
#classlist .document-class-list .row-button.red:hover,
#classlist .document-class-list-tree .row-button.blue:hover,
#classlist .document-class-list-tree .row-button.green:hover,
#classlist .document-class-list-tree .row-button.orange:hover,
#classlist .document-class-list-tree .row-button.red:hover {
    background-color: transparent !important;
    border: 0 !important;
}

#classlist .document-class-list .row-button.blue:hover,
#classlist .document-class-list-tree .row-button.blue:hover {
    color: #3893d0;
}

#classlist .document-class-list .row-button.green:hover,
#classlist .document-class-list-tree .row-button.green:hover {
    color: #5cb85c;
}

#classlist .document-class-list .row-button.orange:hover,
#classlist .document-class-list-tree .row-button.orange:hover {
    color: #ffc107;
}

#classlist .document-class-list .row-button.red:hover,
#classlist .document-class-list-tree .row-button.red:hover {
    color: #b64f4b;
}

/*****************************************
    Content
*****************************************/
#content {
    color: #001323;
}
    #content .tab-content .tab-pane {
        background: 0;
    }

/*****************************************
    DocumentClassListMode: Default
*****************************************/
#classlist-top-buttons.classlist-container {
    background: #F5F7F9;
}

/* ****************************************
    classslist windows content
**************************************** */
/*.classlist-window-content #classlist-top-buttons, .classlist-window-content #classlist-filters, .classlist-window-content #classlist-tree-grid {
    margin: 0 !important;
}*/
/*.classlist-window {
    border-right: 1px solid #e2e7f3;
}
    .classlist-window:last-of-type {
        border-right: 0;
    }*/
#classlist .classlist-window .classlist-window-content {
    border-right: 1px solid #e2e7f3;
}

/*****************************************
    DocumentClassListMode: DashboardList
*****************************************/
#dashboard-list-container .dashboard-list-item .dashboard-list-item-overlay-wrapper .dashboard-list-item-remove-overlay {
    background-color: #FFFFFF;
    opacity: 0.8;
}

.dashboard-list-item-remove-overlay svg {
    fill: #D43E3E;
}

.dashboard-list-add-button-container:before,
.dashboard-list-add-button-container:after,
.dashboard-list-remove-button-container:before,
.dashboard-list-remove-button-container:after {
    content: " ";
    background-color: #e2e7f3;
}
#content-wrapper .dashboard-list-add-button-container button.btn-default:enabled, #content-wrapper .dashboard-list-remove-button-container button.btn-default:enabled {
    background: 0 !important;
    border: 2px solid #e2e7f3 !important;
    opacity: 1;
}

/*****************************************
    DocumentClassListMode: TiledList
*****************************************/
#classlist-tiled-list .document-class-list-tiles-load-more-button .document-class-list-tiles-load-button,
#classlist-tiled-list .document-class-list-tiles-loading-indicator a {
    color: #000000;
}
#classlist-tiled-list .document-class-list-tile {
    background-color: #FFFFFF;
    border: 1px solid #e5e7ec;
}

/*****************************************
    DocumentClassListMode: Developer Tools
*****************************************/
#classlist.class-list-developer-tools {
    background: #F5F7F9;
}
#dbq-document-class-list-breadcrumbs {
    background: #F5F7F9;
    border-bottom: 1px solid #e2e7f3;
}

#classlist.class-list-developer-tools #dbq-document-class-list-breadcrumbs a {
    color: #FFFFFF;
    background: #1D1E22;
    border: 1px solid #151618;
}
#classlist.class-list-developer-tools #dbq-document-class-list-breadcrumbs .btn.btn-default:not(:last-child):before {
    border-left: 10px solid #1D1E22;
}
#classlist.class-list-developer-tools #dbq-document-class-list-breadcrumbs .btn.btn-default:not(:last-child):after {
    border-left: 10px solid #1D1E22;
}

.btn-breadcrumb .btn:first-child svg {
    /*background: #2d79fe;
    fill: #FFFFFF;*/
}

/*****************************************
    DocumentClassListMode: Tree
*****************************************/
.dbq-document-class-list-tree {
    background: #fff;
}
    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item {
        background: 0;
    }
        .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object:last-child > .dbqdclt-item {
            border-bottom: 0;
        }

    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-hover .dropdown-toggle {
        opacity: 1;
    }

    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item span svg {
        fill: #43464c;
    }
    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item a {
        fill: #43464c;
        text-decoration: none;
    }

    /* Hover icons */
    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-hover span svg {
        fill: #FFFFFF !important;
    }
    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-selected span svg {
        fill: #001323 !important;
    }
    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-selected.dbqdclt-hover span svg {
        fill: #001323 !important;
    }

    /* Normal */
    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object {
        background: 0 !important;
    }
        .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object a {
            color: #43464c;
        }
        .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object svg {
            fill: #43464c;
        }

    /* Hover & selected background */
    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-hover {
        background: #0054F0 !important;
    }
    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-selected {
        background: #e5e7ec !important;
    }

    /* Hover & selected text */
    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-hover a {
        color: #ffffff !important;
        text-decoration: none;
    }
    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-selected a {
        color: #001323 !important;
        text-decoration: none;
        font-weight: 600;
    }
    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-selected:hover a {
        color: #001323 !important;
    }

    /* Hover over icons */
    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-hover .dbqdclt-arrow svg:hover {
        fill: #001323 !important;
    }
        .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-selected .dbqdclt-arrow svg:hover {
            fill: #2A75FF !important;
        }

    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-hover .dropdown svg:hover {
        fill: #001323 !important;
    }
        .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-selected .dropdown svg:hover {
            fill: #2A75FF !important;
        }

.dbqdclt-dropdown-menu {
    background: #e2e7f3;
    border: 0;
}

    .dbqdclt-dropdown-menu.dropdown-menu {
        background: #ffffff;
        border: 0;
        -webkit-box-shadow: 0 0 5px rgb(0 0 0 / 30%);
        box-shadow: 0 2px 10px rgb(0 0 0 / 30%);
    }

        .dbqdclt-dropdown-menu.dropdown-menu li {
            background: #ffffff;
        }

            .dbqdclt-dropdown-menu.dropdown-menu li a {
                color: #001323;
            }

            .dbqdclt-dropdown-menu.dropdown-menu li svg {
                fill: #43464c;
            }

            .dbqdclt-dropdown-menu.dropdown-menu li:hover {
                background: #0054F0 !important;
            }

                .dbqdclt-dropdown-menu.dropdown-menu li:hover a {
                    color: #ffffff !important;
                    text-decoration: none !important;
                }

                .dbqdclt-dropdown-menu.dropdown-menu li:hover svg {
                    fill: #ffffff !important;
                }

    .dbqdclt-dropdown-menu a {
        color: #001323;
    }



/*! ========================================================================
 * Bootstrap Toggle: bootstrap-toggle.css v2.2.0
 * http://www.bootstraptoggle.com
 * ========================================================================
 * Copyright 2014 Min Hur, The New York Times Company
 * Licensed under MIT
 * ======================================================================== */
.toggle-on{border:0;}
.toggle-off{border:0;}
.toggle-handle{border-width:0 1px}


/* Toggle btn (keep refreshing) */
.toggle.btn {
    background: #FFFFFF !important;
    border: 2px solid #e5e7ec !important;
}
.toggle-group .btn-primary {
    background: #1475c1 !important;
    border-color: #1475c1 !important;
}
.toggle-group label.btn-default {
    background: #FFFFFF !important;
    color: #FFFFFF !important;
    box-shadow: none;
}
    .toggle-group label.btn-default:hover {
        background: red;
        color: #000000;
    }
.toggle-group span.toggle-handle {
    background: #0054F0 !important;
    border: 0;
}
.checkbox-inline {
    border: 0 !important;
}
    .checkbox-inline:hover {
        background: #e5e7ec !important;
        border-color: #e5e7ec !important;
    }

    
/*! ========================================================================
 * Extra styling (bootstrap 4 + svg)
 * ======================================================================== */

#classlist-tiled-list .document-class-list-tiles-load-more-button .document-class-list-tiles-load-button, #classlist-tiled-list .document-class-list-tiles-loading-indicator a {
    color: #bfcad2;
}
#classlist-tiled-list .document-class-list-tile-count-container {
    color: #001323;
}
#classlist-tiled-list .document-class-list-tiles-load-button[data-type='1'] {
    color: #0054F0;
}
#classlist-tiled-list .document-class-list-tiles-load-button {
    border: 2px solid #e0e0e0;
}
    #classlist-tiled-list .document-class-list-tiles-load-button svg {
        fill: #323232;
    }
        #classlist-tiled-list .document-class-list-tiles-load-button svg:hover {
            fill: #0054F0;
        }
#classlist .classlist-toolbar-item {
    background: #e5e7ec;
    border: 1px solid #e5e7ec;
    color: #bfcad2; /*This styles are for: keep refrehsing () unilever -> logging -> een thread */
}
    #classlist .classlist-toolbar-item svg {
        fill: #0054F0;
    }
    #classlist .classlist-toolbar-item:hover {
        background: #0054F0;
        border: 1px solid #0054F0;
    }
        #classlist .classlist-toolbar-item:hover svg {
            fill: #001323;
        }
#content-wrapper #classlist #classlist-search-list-table .classlist-toolbar-item.checkbox-inline {
    color: #343f54;
    background: #FFFFFF !important;
    border: 2px solid #e5e7ec !important;
    /*box-shadow: 0px 1px 3px rgb(0 24 62 / 10%);*/
}

#classlist-tiled-list .document-class-list-tiles-load-more-button .document-class-list-tiles-load-button, #classlist-tiled-list .document-class-list-tiles-loading-indicator a {
    color: #001323;
}
    #classlist-tiled-list .document-class-list-tiles-loading-indicator a svg {
        fill: #0054F0;
    }

/* ****************************** 
    BS4
****************************** */
.modal #document-topics .checkbox {
    padding: 0;
    background: #FFFFFF;
    border: 2px solid #e5e7ec;
}
    .modal #document-topics .dbq-label-disabled + .checkbox {
        background: #e5e7ec;
    }
        /*.modal #document-topics .dbq-label-disabled + .checkbox:hover .cr {
            background: #e5e7ec !important; 
        }*/ /* !important is needed here, why was this needed..?? this causes disabled checkboxes to hover */
.modal #document-topics .dbq-no-file-found {
    padding: 10px;
    background: #e5e7ec;
    border: 2px solid #e5e7ec;
    font-weight: 600 !important;
}
.modal form[data-view-mode="View"] #document-topics .checkbox,
.modal form[data-view-mode="View"] #document-topics .dbq-no-file-found {
    background: #e5e7ec !important;
    border: 2px solid #e5e7ec !important;
}
    .modal #document-topics .checkbox:after {
        content: "";
        clear: both;
        display: table;
    }


.modal form[data-view-mode="View"] #document-topics .checkbox,
.modal form[data-view-mode="Delete"] #document-topics .checkbox {
    background: #e5e7ec !important;
    border: 2px solid #e5e7ec;
}
    .modal form[data-view-mode="View"] #document-topics .checkbox .cr,
    .modal form[data-view-mode="Delete"] #document-topics .checkbox .cr {
        background: #647987;
        border: 2px solid #647987;
    }
    .modal form[data-view-mode="View"] #document-topics .checkbox:hover .cr,
    .modal form[data-view-mode="Delete"] #document-topics .checkbox:hover .cr {
        background: #647987 !important;
        border: 2px solid #647987 !important;
    }
    .modal form[data-view-mode="View"] #document-topics .checkbox:hover .cr,
    .modal form[data-view-mode="Delete"] #document-topics .checkbox:hover .cr {
        background: #647987 !important;
        border: 2px solid #647987 !important;
    }
    .modal form[data-view-mode="View"] #document-topics .checkbox:hover input[type="checkbox"]:checked + .cr,
    .modal form[data-view-mode="Delete"] #document-topics .checkbox:hover input[type="checkbox"]:checked + .cr {
        border: 2px solid #0054F0 !important;
        background: #0054F0 !important;
    }
        .modal form[data-view-mode="View"] #document-topics .checkbox:hover input[type="checkbox"]:checked + .cr:hover,
        .modal form[data-view-mode="Delete"] #document-topics .checkbox:hover input[type="checkbox"]:checked + .cr:hover {
            opacity: 1;
            cursor: not-allowed;
        }

/* checkbox in form group (otherwise 2x disabled state) */
.modal form[data-view-mode="View"] #document-topics .dbq-form-group .checkbox,
.modal form[data-view-mode="View"] #document-topics .dbq-form-group label.dbq-label-disabled {
    background: #f0f2f5;
    border: 2px solid #f0f2f5 !important;
}
.modal form[data-view-mode="View"] #document-topics .dbq-form-group .checkbox,
.modal #document-topics .dbq-form-group .checkbox,
.modal #document-topics .dbq-form-group-padding .checkbox,
.modal #document-topics .dbq-form-group-no-padding .checkbox {
    padding: 0;
    border: 0 !important;
}

/* Checkbox filters */
#document-class-list-filters label {
    color: #001323;
    font-weight: 600;
}
#document-class-list-filters .document-class-list-filter {
    background: #FFFFFF;
    border: 0;
}
.cr {
    border: 2px solid #878e9f;
    background: #FFFFFF;
    cursor: pointer;
}
#document-class-list-filters .document-class-list-filter input[type="checkbox"]:checked + .cr, 
.checkbox input[type="checkbox"]:checked + .cr {
    border: 2px solid #004ad4 !important;
    background: #0054F0 !important;
}
#document-class-list-filters .document-class-list-filter:hover .cr, 
.checkbox:hover .cr {
    border: 2px solid #004ad4 !important;
    background: #0054F0 !important;
}
#document-class-list-filters .document-class-list-filter:hover input[type="checkbox"]:checked + .cr, 
.checkbox input[type="checkbox"]:checked + .cr:hover {
    border: 2px solid #004ad4 !important;
    background: #0054F0 !important;
}
form[data-view-mode="View"] #document-class-list-filters .document-class-list-filter input[type="checkbox"]:checked + .cr,
form[data-view-mode="View"] .checkbox input[type="checkbox"]:checked + .cr {
    border: 2px solid #0054F0 !important;
    background: #0054F0 !important;
}
form[data-view-mode="View"] #document-class-list-filters .document-class-list-filter:hover input[type="checkbox"]:checked + .cr,
form[data-view-mode="View"] .checkbox:hover input[type="checkbox"]:checked + .cr {
    border: 2px solid #0054F0 !important;
    background: #0054F0 !important;
}
#document-class-list-filters .document-class-list-filter input[type="checkbox"]:checked + .cr svg, 
.checkbox input[type="checkbox"]:checked + .cr svg {
    fill: #FFFFFF;
}
#document-class-list-filters .document-class-list-filter:hover input[type="checkbox"]:checked + .cr svg, 
.checkbox input[type="checkbox"]:checked + .cr:hover svg {
    display: none;
}

form[data-view-mode="View"] #document-class-list-filters .document-class-list-filter .cr,
form[data-view-mode="View"] .checkbox .cr {
    border: 2px solid #647987 !important;
    background: #647987 !important;
    cursor: not-allowed;
}
form[data-view-mode="View"] #document-class-list-filters .document-class-list-filter:hover .cr,
form[data-view-mode="View"] .checkbox:hover .cr {
    border: 2px solid #647987 !important;
    background: #647987 !important;
    cursor: not-allowed;
}
form[data-view-mode="View"] #document-class-list-filters .document-class-list-filter:hover,
form[data-view-mode="View"] div[data-element-type="InputProperty"] .cr,
#document-topics form[data-view-mode="View"] .dbq-form-group .row[data-element-type="InputProperty"] {
    cursor: not-allowed;
}
    form[data-view-mode="View"] #document-class-list-filters .document-class-list-filter:hover .checkbox input[type="checkbox"]:checked + .cr,
    form[data-view-mode="View"] input[type="checkbox"]:checked:hover + .cr {
        border: 2px solid #004ad4 !important;
        background: #0054F0 !important;
    }
        form[data-view-mode="View"] #document-class-list-filters .document-class-list-filter:hover .checkbox input[type="checkbox"]:checked + .cr svg,
        form[data-view-mode="View"] input[type="checkbox"]:checked:hover + .cr svg {
            display: block !important;
        }

.dbq-checkbox-label-filters {
    color: #001323;
}

/* ****************************** 
    Checkbox (custom)
****************************** */
.document-class-list-filter.checkbox {
    border: 2px solid #e5e7ec !important;
}
    .document-class-list-filter.checkbox label.dbq-checkbox-filters {
        background: 0 !important;
        border: 0 !important;
        padding: 0 !important;
    }
.document-class-list-filter.checkbox-bottom label.dbq-checkbox-filters {
    background: 0 !important;
    border: 2px solid #e5e7ec !important;
}
.document-class-list-filter span.dbq-checkbox-label-filters {
    cursor: pointer;
}
.document-class-list-filter label {
    color: #595F6E !important;
    background: #f5f7f9;
    border: 2px solid #e5e7ec;
    border-bottom: 0;
    font-weight: 600;
}
#classlist-search-list .document-class-list-filter label {
    color: #001323 !important;
    background: 0;
}
.document-class-list-filter.checkbox-bottom span.dbq-checkbox-label-filters {
    color: #595F6E !important;
    background: #f5f7f9;
    border: 0;
    border-bottom: 2px solid #e5e7ec;
    font-weight: 600;
}
    #classlist-search-list .document-class-list-filter.checkbox-bottom span.dbq-checkbox-label-filters, #classlist-search-list .document-class-list-filter label.dbq-checkbox {
        border: 0 !important;
    }
#classlist-search-list #document-class-list-filters .document-class-list-filter {
    max-width: 100% !important;
}

    #classlist-search-list #document-class-list-filters label.dbq-checkbox input {
        opacity: 0;
    }
.dbq-checkmark {
    background-color: #FFFFFF;
    border: 2px solid #e5e7ec;
}
#classlist-search-list #document-class-list-filters label.dbq-checkbox:hover input ~ .dbq-checkmark {
    background-color: #001323;
}
#classlist-search-list #document-class-list-filters label.dbq-checkbox input:checked ~ .dbq-checkmark {
    background-color: #0054F0;
    border: 2px solid #0054F0;
}
#classlist-search-list #document-class-list-filters label.dbq-checkbox .dbq-checkmark:after {
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate( 45deg );
    -ms-transform: rotate(45deg);
    transform: rotate( 45deg );
}
#classlist-search-list #classlist-filters {
    background: #FFFFFF;
}
#classlist-search-list #classlist-filters .document-class-list-filter-show-more {
    color: #0054F0;
}
    #classlist-search-list #classlist-filters .document-class-list-filter-show-more svg {
        fill: #0054F0;
    }
        #classlist-search-list #classlist-filters .document-class-list-filter-show-more svg.dbq-arrow-down {
            transform: rotate( 0deg );
        }
        #classlist-search-list #classlist-filters .document-class-list-filter-show-more svg.dbq-arrow-up {
            transform: rotate( 180deg );
        }

/* ****************************** 
********** Radio box (custom) **********
****************************** */

.radio-list-control, .checkbox-list-control {
    padding: 5px !important;
    background-color: #FFFFFF !important;
    border: 2px solid #e5e7ec !important;
}
form[data-view-mode="View"] .radio-list-select,
.dbq-label-disabled + .radio-list-select {
    height: 46px !important;
    padding: 11px 10px 9px !important;
    background-color: #e5e7ec !important;
    color: #001323 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}
    /*.radio-list-select select {
        padding: 0 5px !important;
        height: 30px !important;
        border: 0 !important; // <---- not possible, 5px around not clickable
    }*/

#document-topics .dbq-radio-container label.dbq-radio {
    border: 0;
    background: 0;
}
    #document-topics .dbq-radio-container label.dbq-radio input {
        opacity: 0;
    }
.dbq-radiomark {
    background-color: #FFFFFF;
    border: 2px solid #e5e7ec;
}
#document-topics .dbq-radio-container label.dbq-radio:hover input ~ .dbq-radiomark {
    background-color: #0054F0;
    border: 2px solid #004ad4;
}
#document-topics .dbq-radio-container label.dbq-radio input:checked ~ .dbq-radiomark {
    background-color: #0054F0;
    border: 2px solid #004ad4;
}
#document-topics .dbq-radio-container label.dbq-radio .dbq-radiomark:after {
    left: 5px;
    top: 5px;
    width: 6px;
    height: 6px;
    background: #FFFFFF;
}
#document-topics .dbq-radio-container .dbq-radiobox-value span {
    color: #001323;
}
#document-topics .checkbox label {
    color: #001323 !important;
}

#document-topics div[data-topic-type-code="Dashboard"] {
    background: 0; /*<-- more dynamic when every graph inside a dashboard has 10px margin*/
}

/* ************************************************************
    Loading spinner
************************************************************ */
.loading-view {
    background-color: #e5e7ec !important;
}
.dbq-loading-spinner-container {
    background: #FFFFFF;
}
    .modal .dbq-loading-spinner-container {
    }
.dbq-loading-spinner {
    background: url(/DbqLibraries/DbqDeveloperTools/img/dbq-logo-gif-light.gif);
    background-repeat: no-repeat;
    background-size: 100px 100px;
}

/* ************************************************************
    RUMM / Cirdax
************************************************************ */
#classlist-tiled-list {
    background: #FFFFFF;
}
    #classlist-tiled-list .document-class-list-tile {
        background-color: #ffffff;
        border: 3px solid #e5e7ec;
    }
h3.ellipsis {
    color: #0054F0 !important;
}
#classlist-tiled-list .document-class-list-tile img.project-building-image {
    border: 5px solid #ffffff;
}

#classlist-tiled-list .document-class-list-tiles-load-more-button .document-class-list-tiles-load-button, #classlist-tiled-list .document-class-list-tiles-loading-indicator a {
    color: #001323;
}
#classlist-tiled-list .document-class-list-tile-count-container {
    color: #001323;
}
#classlist-tiled-list .document-class-list-tiles-load-button[data-type='1'] {
    color: #0054F0;
}
#classlist-tiled-list .document-class-list-tiles-load-button {
    border: 3px solid #e5e7ec;
}
    #classlist-tiled-list .document-class-list-tiles-load-button svg {
        fill: #001323;
    }
    #classlist-tiled-list .document-class-list-tiles-load-button svg:hover {
        fill: #0054F0;
    }

#document-class-list-filters {
    background: #FFFFFF;
}
.dbq-application-rumm .tab-content #document-class-list-filters {
    background: #FFFFFF;
}

/*
    Custom MODULE styling
    - Tijssens
    - Tokcel
    ( CUSTOM ALWAYS AT BOTTOM ! )
*/
#docbuilder23313ba0-fa77-409b-9a75-934e9d5a90f9 div[data-topic-type-code='Dashboard'] section > .row .flex-container > .dbq-column:nth-child(3),
#docbuilderf970bab8-99f9-40c8-9e09-c3af66a4c7f2 div[data-topic-type-code='Dashboard'] section > .row .flex-container > .dbq-column:nth-child(2) {
    background: 0;
    box-shadow: none;
}

/* ******************************
    Timeline 
****************************** */
#classlist-timeline.fc .fc-view-harness {
    background: #FFFFFF;
}
#classlist-timeline.fc.classlist-container {
}
#classlist-timeline.fc table thead tr:hover,
#classlist-timeline.fc table thead tr th:hover,
#classlist-timeline.fc table tbody tr:hover {
    background: 0 !important;
    color: #001323 !important;
}
.table-bordered td,
.table-bordered th {
    border: 1px solid #dee2e6;
}
#content-wrapper #classlist-timeline.fc button.btn-primary.active {
    background: #011f58 !important;
    border: 2px solid #011f58 !important;
    color: #ffffff !important;
}
#classlist-timeline.fc button.fc-today-button:disabled {
    background: #e5e7ec !important;
    border: 2px solid #e5e7ec !important;
    color: #001323 !important;
    opacity: 1 !important;
}
    #classlist-timeline.fc button.fc-today-button:disabled:hover {
        background: #e5e7ec !important;
        border: 2px solid #e5e7ec !important;
        color: #001323 !important;
        opacity: 1 !important;
    }

#classlist-timeline.fc .fc-timeline table.table-bordered {
    border: 0;
    -webkit-box-shadow: 0px 3px 5px rgb(0 24 62 / 7%);
    -moz-box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
    box-shadow: 0px 3px 5px rgb(0 24 62 / 7%);
}
    #classlist-timeline.fc .fc-timeline table.table-bordered table.table-bordered {
        border: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

/* Header toolbar */
.fc-header-toolbar .fc-toolbar-title {
    color: #001323;
}
/* Header grid */
.fc-datagrid-header.fc-scrollgrid-sync-table th {
    border-bottom: 0 !important;
}

#classlist-timeline.fc .fc-scroller::-webkit-scrollbar-track {
    background-color: #FFFFFF !important;
}
#classlist-timeline.fc .fc-scroller::-webkit-scrollbar-thumb {
    border: 4px solid #FFFFFF !important;
}
#classlist-timeline.fc .fc-scroller::-webkit-scrollbar-corner {
    background-color: #FFFFFF !important;
}

/*#classlist-timeline.fc .fc-scrollgrid-section-liquid > td:first-of-type {
    border: 0;
}*/

/* Timeline needs border color.. but it's table inside table.. some border are not needed but hard to target.. so this is why nth-child is used.. */
.fc-scrollgrid-section-header td:nth-child(3) {
    border-top: 0 !important;
}
.fc-scrollgrid-section-body > td:nth-child(1) {
    border-bottom: 0 !important;
}
.fc-scrollgrid-section-body td:nth-child(3) {
    border-right: 0 !important;
    border-bottom: 0 !important;
}
.fc-scrollgrid-section-body .fc-daygrid-body td:nth-child(3) {
    border-bottom: 1px solid #dee2e6 !important;
}

/* Events */
#content-wrapper #classlist-timeline.fc .fc-timeline-event-harness .dropdown button.dropdown-toggle,
#content-wrapper #classlist-timeline.fc .fc-daygrid-event-harness .dropdown button.dropdown-toggle {
    background: 0 !important;
    border: 0 !important;
}
    #content-wrapper #classlist-timeline.fc .fc-timeline-event-harness .dropdown button.dropdown-toggle svg.dbqt-event-icon,
    #content-wrapper #classlist-timeline.fc .fc-daygrid-event-harness .dropdown button.dropdown-toggle svg.dbqt-event-icon {
        fill: #FFFFFF !important;
    }

.fc-list,
.fc-timegrid table.table-bordered,
.fc-daygrid table.table-bordered {
    border: 0 !important;
    -webkit-box-shadow: 0px 3px 5px rgb(0 24 62 / 7%);
    -moz-box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
    box-shadow: 0px 3px 5px rgb(0 24 62 / 7%);
}
    .fc-timegrid table.table-bordered table.table-bordered {
        border: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
.fc-timeline-slots .table-bordered {
    border-top: 0 !important;
}

.fc .fc-list-empty {
    background-color: #FFFFFF;
}

/* Day view */
.fc-timegrid-event-harness-inset .fc-timegrid-event {
    box-shadow: none;
}

/* reset.. */
.fc-daygrid-event {
    border: 0;
    padding: 0;
}
.fc-timeline-event .fc-event-main,
.fc-daygrid-event .fc-event-main {
    flex-grow: unset;
    flex-shrink: unset;
    min-width: 0;
    float: left;
    width: 100%;
    margin: 5px 0;
}

/* Event dropdown */
#content-wrapper #classlist-timeline.fc .fc-timeline-event-harness .dropdown button.dropdown-toggle {
}
    #content-wrapper #classlist-timeline.fc .fc-timeline-event-harness .dropdown button.dropdown-toggle svg {
        fill: #FFFFFF !important;
    }

#content-wrapper .ui-iggrid .ui-iggrid-scrolldiv {
}
.ui-iggrid tbody td, 
.ui-iggrid tbody th.ui-iggrid-rowselector-class, 
.ui-iggrid tfoot td, 
.ui-iggrid thead .ui-iggrid-editingcell {
    border-left: 1px solid transparent;
    border-top: 1px solid transparent;
    border-bottom: 1px solid #F0EFF4 !important;
}
#content-wrapper .ui-iggrid .ui-iggrid-header, 
#content-wrapper .ui-iggrid table th {
    border-bottom: 1px solid #F0EFF4 !important;
}
#content-wrapper .ui-iggrid tbody td,
#content-wrapper .ui-iggrid tbody th.ui-iggrid-rowselector-class,
#content-wrapper .ui-iggrid tfoot td,
#content-wrapper .ui-iggrid thead .ui-iggrid-editingcell {
    border-left: 0 !important;
    border-right: 0 !important;
}
#content-wrapper .ui-iggrid .ui-iggrid-header,
#content-wrapper .ui-iggrid table th,
#content-wrapper .ui-iggrid tbody td,
#content-wrapper .ui-iggrid tbody th.ui-iggrid-rowselector-class,
#content-wrapper .ui-iggrid tfoot td,
#content-wrapper .ui-iggrid thead .ui-iggrid-editingcell {
    border-bottom: 1px solid #F0EFF4;
}
.ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-state-active {
    background: #F5F7F9;
}
#content-wrapper .document-class-list-tree th span {
    color: #001323;
    font-weight: 600;
}

#classlist .document-class-list-tree .ui-widget-content .ui-state-active .row-button svg {
    fill: #595F6E;
}

/* ****************************** 
    ui-iggrid-results (pagination top-left of table)
****************************** */
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results {
    background: 0;
    border: 0;
    border-color: none;
    /*color: #0054F0;*/
}
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit {
    background: #FFFFFF !important;
    border: 2px solid #e5e7ec !important;
    color: #0054F0 !important;
}
    .ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit .ui-igedit-input,
    .ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit .ui-icon:before {
        color: #0054F0 !important;
    }
    .ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results:hover .ui-igedit {
        background-color: #0054F0 !important;
        border: 2px solid #004ad4 !important;
        color: #FFFFFF !important;
    }
        .ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results:hover .ui-igedit .ui-igedit-input,
        .ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results:hover .ui-igedit .ui-icon:before {
            color: #FFFFFF !important;
        }

.ui-state-hover, 
.ui-widget-content .ui-state-hover, 
.ui-widget-header .ui-state-hover, 
div.ui-iggrid-results:hover {
    background-color: none !important;
    border-color: none !important;
    cursor: pointer;
}

.ui-widget-content tr td.ui-state-hover,
.ui-widget-header tr td.ui-state-hover {
    background: #0054F0;
    background-color: #0054F0;
    color: #FFFFFF;
}






/* Tables */
.ui-iggrid .ui-widget-header, .ui-iggrid th, .ui-iggrid th.ui-state-default {
    background: #FFFFFF;
    color: #616161;
}
#classlist .document-class-list-tree tr {
    color: #43464c !important;
}
.ui-iggrid table th {
    background: #0c0c0c;
    color: #616161;
    border-right: 0;
    border-bottom: 1px solid #e5e7ec !important;
}
    .ui-iggrid table th:last-of-type {
        border: 0 !important;
        border-bottom: 1px solid #e5e7ec !important;
    }
.ui-iggrid tr {
    background: 0;
}
    .ui-iggrid tr.ui-ig-altrecord {
        background: 0;
    }

    .ui-iggrid tr#classlist .document-class-list-tree tr:hover {
        background: #0054F0;
        color: #FFFFFF;
    }
        .ui-iggrid tr#classlist .document-class-list-tree tr:hover .row-button {
            background: #0054F0;
            color: #FFFFFF !important;
        }

/* TABLES TableRow HOVER - override */
.ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-state-active {
    background: #F5F7F9;
}

.ui-widget-content tr td.ui-state-hover,
.ui-widget-header tr td.ui-state-hover {
    background: grey; /* need !important for override infragistics */
    background-color: grey;
    color: #FFFFFF;
}
#content-wrapper .ui-iggrid .ui-iggrid-tablebody td svg {
    fill: #43464c;
    width: 20px;
    height: 20px;
    padding: 2px;
}
#content-wrapper .ui-iggrid .ui-iggrid-tablebody td .row-button svg {
    fill: #0054F0;
}

#content-wrapper .ui-iggrid .ui-iggrid-tablebody td.ui-state-hover svg,
#content-wrapper .ui-iggrid .ui-iggrid-tablebody td.button-table-cell.ui-state-hover svg,
#content-wrapper .ui-iggrid .ui-iggrid-tablebody td.ui-state-hover .row-button svg {
    fill: #FFFFFF;
}
    #content-wrapper .ui-iggrid .ui-iggrid-tablebody td.button-table-cell.ui-state-hover svg:hover,
    #content-wrapper .ui-iggrid .ui-iggrid-tablebody td.ui-state-hover .row-button svg:hover {
        fill: #001323;
    }









#content-wrapper #classlist .form-control {
    /*background: 0; <-- this causing background of options or scrollbar..? in selectbox from filters to be white in dark mode (tijdregistratie, filters align left) */
    border: 2px solid #ced4da;
    color: #000000;
    fill: #000000;
}
    #content-wrapper .form-control#searchbox {
        padding: 2px 10px;
    }
#content-wrapper select.form-control {
    height: 34px;
    padding: 2px 5px;
}
#content-wrapper select.form-control option {
    background: #FFFFFF;
}
.form-control:focus {
    box-shadow: 0 0 0 0.2rem rgb(0 0 0 / 25%);
}


.ui-iggrid tbody td, 
.ui-iggrid tbody th.ui-iggrid-rowselector-class, 
.ui-iggrid tfoot td, 
.ui-iggrid thead .ui-iggrid-editingcell {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
    border-bottom: 1px solid #F0EFF4;
}
.ui-iggrid td.ui-state-default, 
.ui-iggrid td.ui-state-highlight, 
.ui-iggrid td.ui-state-hover {
    border: 1px solid transparent;
}

.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-page.ui-state-default, 
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item.ui-state-default {
    color: #000000;
    background-color: #FFFFFF;
    border: 2px solid #ced4da;
}
.ui-iggrid .ui-iggrid-paging li {
    color: #000000;
    background-color: #FFFFFF;
    border: 2px solid #ced4da;
}

.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-pagecurrent.ui-state-active {
    border: 2px solid #000000;
    background-color: #FFFFFF;
    color: #000000;
}

.ui-iggrid .ui-ig-altrecord td.ui-state-default.ui-state-hover,
.ui-iggrid .ui-ig-altrecord td.ui-state-hover,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-default.ui-state-hover,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-hover,
.ui-iggrid td.ui-state-hover,
.ui-iggrid th.ui-iggrid-rowselector-class.ui-state-hover,
.ui-iggrid-responsive-vertical tr.ui-ig-altrecord > td.ui-state-hover:first-child,
.ui-iggrid-responsive-vertical tr > td.ui-state-hover:first-child {
    border-top: 0;
    border-bottom: 0;
}
.ui-iggrid tr.ui-ig-altrecord.ui-state-focus td,
.ui-iggrid tr.ui-ig-altrecord.ui-state-focus th,
.ui-iggrid tr.ui-state-focus td,
.ui-iggrid tr.ui-state-focus th {
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid #e5e7ec !important;
}