/*****************************************
    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 #fff;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
  border-left: 10px solid #d4d4d4;
}
.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='%23494e5d' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><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: #dcdcdc;
    background: 0;
    font-weight: 600;
}
    #dbq-document-class-list-breadcrumbs a.btn:hover {
        color: #0088FF;
    }
#dbq-document-class-list-breadcrumbs svg {
    fill: #dcdcdc;
}
    #dbq-document-class-list-breadcrumbs svg:hover {
        fill: #0088FF;
    }
    .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: #FDFDFD;
}
.table>tbody>tr>span.blue:hover, .table>tbody>tr>button.blue:hover {
    background-color: #3893d0 !important;
    border: 1px solid #3893d0 !important;
    color: #FDFDFD;
}
.table>tbody>tr>span.red:hover, .table>tbody>tr>button.red:hover {
    background-color: #b64f4b !important;
    border: 1px solid #b64f4b !important;
    color: #FDFDFD;
}
.table>tbody>tr>span.green:hover, .table>tbody>tr>button.green:hover {
    border: 1px solid #5cb85c !important;
    background-color: #5cb85c !important;
    color: #FDFDFD;
}


/*****************************************
    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,
    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,
#classlist-timeline,
#classlist-tiled-list,
.dashboard-list-item-filters,
.dashboard-list-item-content,
.dbq-document-class-list-tree,
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: #1A1E23;
}
/*
    .dashboard-list-item-filters,
    div[data-topic-type-code='Dashboard'] section > .row > div > div.element-graph, 
    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-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 { /* this is inspectiebeheer -> click on item in table -> 2 charts vertical in 1 column */
    /*box-shadow: 0px 2px 10px rgb(0 0 0 / 40%);*/ /* ATR portal -> dashboard -> 3- jaarlijkse trendlijn, DOUBLE SHADOWS otherwise*/
    -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 10px rgba(0,0,0,0.4);
}
    /* 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: #1A1E23;
    /*box-shadow: 0px 2px 10px rgb(0 0 0 / 40%);  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 2px 10px rgb(0 0 0 / 40%);*/
    /* 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;
}
        #document-topics .dbq-column .block .element-graph {
           /* box-shadow: none;*/
        }
        #document-topics .dbq-column .block > div:first-child {
            height: 100%;
        }
/*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
    DocumentClassListMode: Calendar
*****************************************/

#classlist-timeline.classlist-container,
#classlist-timeline.classlist-container .mbsc-calendar-table {
    background: #1A1E23;
}

#classlist-calendar.classlist-container,
#classlist-calendar.classlist-container .mbsc-calendar-table {
    background: #1A1E23;
}

.mbsc-material-dark.mbsc-eventcalendar {
    background: #1A1E23;
}

.dbqdcltl-context-menu .dbqdcltl-dropdown-menu li {
    color: #9197A1;
}

    .dbqdcltl-context-menu .dbqdcltl-dropdown-menu li svg {
        fill: #9197A1;
    }

/*****************************************
    DocumentClassListMode: Kanban board
*****************************************/

.dbqdclkb-container {
}

    .dbqdclkb-container .dbqdclkb-columns {
    }

        .dbqdclkb-container .dbqdclkb-columns .dbqdclkb-column {
        }

            .dbqdclkb-container .dbqdclkb-columns .dbqdclkb-column .dbqdclkb-column-title {
            }

                .dbqdclkb-container .dbqdclkb-columns .dbqdclkb-column .dbqdclkb-column-title .dbqdclkb-column-name {
                    color: #dcdcdc;
                }

                .dbqdclkb-container .dbqdclkb-columns .dbqdclkb-column .dbqdclkb-column-title .dbqdclkb-column-item-count {
                    color: #dcdcdc;
                    background: #1A1E23;
                }

.dbqdclkb-item {
    background: #3c414c;
    border-color: #c0c0c0;
}

    .dbqdclkb-item .dbqdclkb-item-summary {
    }

        .dbqdclkb-item .dbqdclkb-item-summary span {
            color: #dcdcdc;
        }

.dbqdclkb-item-tag {
    background: #3c414c;
    color: #dcdcdc;
}

/*****************************************
    DocumentClassListMode: Workflow
*****************************************/

.dbqdclw-container {
    --dfBackgroundColor: #1a1e23;
    --dfBackgroundImage: linear-gradient(to right, #1f262f 1px, transparent 1px), linear-gradient(to bottom, #1f262f 1px, transparent 1px);
    --dfNodeBackgroundColor: #000;
    --dfNodeTextColor: #dcdcdc;
    --dfNodeBorderColor: #1f262f;
    --dfNodeBoxShadowColor: rgba(0, 0, 0, 1);
    --dfNodeHoverBackgroundColor: #111;
    --dfNodeHoverTextColor: #dcdcdc;
    --dfNodeHoverBorderColor: #1f262f;
    --dfNodeHoverBoxShadowColor: #4ea9ff;
    --dfNodeSelectedBackgroundColor: #111;
    --dfNodeSelectedTextColor: #dcdcdc;
    --dfNodeSelectedBorderColor: #333;
    --dfNodeSelectedBoxShadowColor: rgba(0, 0, 0, 1);
    --dfInputBackgroundColor: #000;
    --dfInputBorderColor: #1f262f;
    --dfInputHoverBackgroundColor: #1f262f;
    --dfInputHoverBorderColor: #000000;
    --dfOutputBackgroundColor: #000;
    --dfOutputBorderColor: #1f262f;
    --dfOutputHoverBackgroundColor: #1f262f;
    --dfOutputHoverBorderColor: #000000;
    --dfLineColor: #4682b4;
    --dfLineHoverColor: #4682b4;
    --dfLineSelectedColor: #43b993;
    --dfRerouteBorderColor: #000000;
    --dfRerouteBackgroundColor: #ffffff;
    --dfRerouteHoverBorderColor: #000000;
    --dfRerouteHoverBackgroundColor: #ffffff;
    --dfDeleteColor: #ffffff;
    --dfDeleteBackgroundColor: #000000;
    --dfDeleteBorderColor: #ffffff;
    --dfDeleteHoverColor: #000000;
    --dfDeleteHoverBackgroundColor: #ffffff;
    --dfDeleteHoverBorderColor: #000000;
}

    .dbqdclw-container .dbqdclw-node-types-container {
        background: #1a1e23;
        border-left-color: #1f262f;
    }

        .dbqdclw-container .dbqdclw-node-types-container .dbqdclw-node-type {
            border-bottom-color: #1f262f;
            color: #dcdcdc;
        }

            .dbqdclw-container .dbqdclw-node-types-container .dbqdclw-node-type svg {
                fill: #dcdcdc;
            }

/*****************************************
    DocumentClassListFolders
*****************************************/

.dbqdclf-container {
}

    .dbqdclf-container .dbqdclf-folder {
        background: #1A1E23;
        color: #dcdcdc;
        -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%);
    }

        .dbqdclf-container .dbqdclf-folder svg {
            fill: #dcdcdc;
        }

/*****************************************
    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 #d4d4d4;
        }
            .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 {
    border: 2px solid #60636f;
}
.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 {
}
    .document-class-list-tabs-container .help-button {
        color: #fff;
    }
        .document-class-list-tabs-container .help-button svg.dbq-icon-20x20, .document-class-list-tabs-container .help-button svg.dbq-icon-30x30 {
            fill: #FDFDFD !important;
        }
            .document-class-list-tabs-container .help-button svg.dbq-icon-20x20:hover, .document-class-list-tabs-container .help-button svg.dbq-icon-30x30:hover {
                fill: #0075db !important;
            }
.class-list-menu-help svg {
    fill: #FDFDFD;
}

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

        .nav-tabs > li.active > a {
            border-width: 0;
            /*background-color: #fff;*/
            color: #d4d4d4 !important;
        }
            .nav-tabs > li > a:focus, .nav-tabs > li > a:hover {
                color: #0088FF !important;
            }
                .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
                    border-width: 0;
                    background-color: transparent;
                    color: #fff !important;
                }
            .nav-tabs > li > a::after { 
                content: "";
                background: #fff; 
                /*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 #0088FF;
        }
.tab-nav > li > a::after {
    background: white none repeat scroll 0% 0%;
    color: #fff;
}

/*****************************************
    Classlist specific document styling (CUSTOM DROPDOWN (bootstrap) / MULTISELECT)
*****************************************/
#classlist .document-class-list .dropdown-menu a,
#classlist .document-class-list-tree .dropdown-menu a {
    background: #292f37;
    color: #d4d4d4;
}
#class-list-menu .dropdown-menu {
    color: #d4d4d4;
    background-color: #121416;
}
    #class-list-menu .dropdown-menu > li {
        background-color: #1a1e23;
    }
        #class-list-menu .dropdown-menu > li > a {
            color: #ced1d8 !important;
        }

#content-wrapper .form-inline {
    background: #1A1E23;
    border-color: #3c414c;
    color: #FDFDFD;
}
    #content-wrapper .form-inline ::-webkit-input-placeholder, #content-wrapper .form-control::-webkit-input-placeholder {
        color: #0088FF !important;
    }
    #content-wrapper .form-inline ::-moz-placeholder, #content-wrapper .form-control::-moz-placeholder {
        color: #0088FF !important;
    }
    #content-wrapper .form-inline :-ms-input-placeholder, #content-wrapper .form-control:-ms-input-placeholder {
        color: #0088FF !important;
    }
    #content-wrapper .form-inline :-moz-placeholder, #content-wrapper .form-control:-moz-placeholder {
        color: #0088FF !important;
    }

/*****************************************
    Classlist TreeGrid Settings
*****************************************/

.dcls-modal {
}

    .dcls-modal .dcls-modal-body {
        
    }

        .dcls-modal .dcls-modal-body ul {
            
        }

            .dcls-modal .dcls-modal-body ul li {
                
            }

                .dcls-modal .dcls-modal-body ul li svg {
                    fill: #fff;
                }

/*****************************************
    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: #fff;
    }
    #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: 0 !important;
            color: #d4d4d4;
        }
            #classlist-search-list #classlist-filters .document-class-list-filter-title:hover {
                background: #292f37;
            }
            #classlist-search-list #classlist-filters .document-class-list-filter-title .dbq-document-class-list-filter-title-text {
                color: #d4d4d4;
            }
            #classlist-search-list #classlist-filters .document-class-list-filter-title svg {
                fill: #d4d4d4;
            }
                #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 #292f37 !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: #1A1E23; /*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: #1A1E23;
        background: url(/DbqLibraries/DbqDeveloperTools/img/dbq-logo-gif.gif); /*loading-spinner.gif*/
        background-repeat: no-repeat;
        background-size: 100px 100px;
    }
    #classlist-search-list #classlist-filters .document-class-list-filter .checkbox label .search-property-count {
        color: #777;
    }

/*****************************************
    Classlist TreeGrid cell styling
*****************************************/
/*#classlist .document-class-list-tree tr {
    color: #d4d4d4;
    font-weight: 600;
}*/
        #classlist .document-class-list-tree tr.ui-iggrid-activerow.ui-state-focus {
            background: #fff;
            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: #d4d4d4;
        }
#classlist .document-class-list-tree .image-container img {
}
#classlist .document-class-list-tree .image-container .icon-container {
    background-color: #fff;
    border-bottom-right-radius: 3px;
}
#classlist .document-class-list-tree tr:hover .ui-icon:before {
    color: #FFF !important;
}
#classlist .document-class-list-tree .image-container .icon-container {
    background-color: #121416;
}
    #classlist .document-class-list-tree .image-container .icon-container svg {
        fill: #d4d4d4;
        background: #121416;
    }

#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: #d4d4d4;
}
    #content .tab-content .tab-pane {
        background: 0;
    }

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

/* ****************************************
    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 #1A1E23;
}
    .classlist-window:last-of-type {
        border-right: 0;
    }

/*****************************************
    DocumentClassListMode: DashboardList
*****************************************/

#dashboard-list-container .dashboard-list-item .dashboard-list-item-overlay-wrapper .dashboard-list-item-remove-overlay {
    background-color: #1A1E23;
    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: #1A1E23;
}
/*.dashboard-list-add-button-container button, .dashboard-list-remove-button-container button {
    background: 0 !important;
    border: 1px solid #1A1E23 !important;
}*/
#content-wrapper .dashboard-list-add-button-container button.btn-default:enabled, #content-wrapper .dashboard-list-remove-button-container button.btn-default:enabled {
    background: #121416 !important;
    border: 2px solid #3c414c !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: #000;
}
#classlist-tiled-list .document-class-list-tile {
    background-color: #292f37;
    border: 1px solid #292f37;
}

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

#classlist.class-list-developer-tools #dbq-document-class-list-breadcrumbs a {
    color: #fff;
    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;
}

/*****************************************
    DocumentClassListMode: Tree
*****************************************/

.dbq-document-class-list-tree {
    background: #1A1E23;
}
    .dbq-document-class-list-tree .dbqdclt-folder-document-object .dbqdclt-item {
        background: 0;
        border-bottom: 1px solid #151f2d;
    }
        .dbq-document-class-list-tree .dbqdclt-folder-document-object .dbqdclt-item:last-of-type {
            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: #c3c6ce;
    }
    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item a {
        fill: #c3c6ce;
        text-decoration: none;
    }

    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-hover span svg {
        fill: #FDFDFD;
    }
    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-selected span svg {
        fill: #FDFDFD;
    }

    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-hover a {
        color: #FDFDFD;
        text-decoration: none;
    }
    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-selected a {
        color: #FDFDFD;
        text-decoration: none;
    }

    .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object {
        background: 0 !important;
        border-bottom: 0;
    }
        .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object a {
            color: #dadcde;
        }
        .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object svg {
            fill: #dadcde;
        }

        .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-hover {
            background: #0088FF !important;
        }
        .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-selected {
            background: #3c414c !important;
            /*border: 2px solid #2b2b2b;*/
        }
            .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object:first-child > .dbqdclt-item.dbqdclt-selected {
            }
            .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-hover a {
                color: #FDFDFD !important;
            }
        .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-selected a {
            color: #FDFDFD !important;
        }
        .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-hover .dbqdclt-arrow svg:hover {
            fill: #121416 !important;
        }
        .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-selected .dbqdclt-arrow svg:hover {
            fill: #0088FF !important;
        }
        .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-hover .dropdown svg:hover {
            fill: #121416 !important;
        }
        .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-selected .dropdown svg:hover {
            fill: #0088FF !important;
        }

.dbqdclt-dropdown-menu {
    background: #1A1E23;
    border: 0;
    -webkit-box-shadow: 0 0 5px rgba(255,255,255,0.7);
    -moz-box-shadow: 0 0 5px rgba(255,255,255,0.7);
    box-shadow: 0 0 5px rgba(255,255,255,0.7);
}

    .dbqdclt-dropdown-menu.dropdown-menu {
        background: #1A1E23;
        border: 0;
        -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,1);
        -moz-box-shadow: 0 0 10px 1px rgba(0,0,0,1);
        box-shadow: 0 0 10px 1px rgba(0,0,0,1);
    }

        .dbqdclt-dropdown-menu.dropdown-menu li {
        }

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

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


            .dbqdclt-dropdown-menu.dropdown-menu li:hover {
                background: #0088FF !important;
            }

                .dbqdclt-dropdown-menu.dropdown-menu li:hover a {
                    color: #FDFDFD !important;
                }

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

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


/*! ========================================================================
 * 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: #1A1E23 !important;
    border: 2px solid #3c414c !important;
}
.toggle-group .btn-primary {
    background: #1475c1 !important;
    border-color: #1475c1 !important;
}
.toggle-group label.btn-default {
    background: #1A1E23 !important;
    color: #fff !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
    .toggle-group label.btn-default:hover {
        background: red;
        color: #000;
    }
.toggle-group span.toggle-handle {
    background: #0088FF !important;
    border: 0;
}
.checkbox-inline {
    border: 0 !important;
}
    .checkbox-inline:hover {
        background: #3c414c !important;
        border-color: #3c414c !important;
    }

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

.dbq-application-rumm #dbq-notification-center-menu-container .dbqnc-toggle-button svg, .dbq-application-rumm #dbq-notification-center-menu .dbqnc-toggle-button svg, .class-list-menu-user svg {
    fill: #fff;
}
/* Go to tools btn (cirdax/RUMM)*/
.go-to-tools-button {
    background: url(/DbqLibraries/DbqDeveloperTools/img/button-background-go-to-tools-blue.svg) no-repeat scroll 0 0 transparent; /*-dark-mode*/
    background-color: transparent;
    color: transparent;
    background-size: 100% auto !important;
}
#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: #d4d4d4;
}
#classlist-tiled-list .document-class-list-tile-count-container {
    color: #4e4e4e;
}
#classlist-tiled-list .document-class-list-tiles-load-button[data-type='1'] {
    color: #0088FF;
}
#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: #0088FF;
        }
#classlist .classlist-toolbar-item {
    background: #3c414c;
    border: 1px solid #3c414c;
    color: #d4d4d4; /*This styles are for: keep refrehsing () unilever -> logging -> een thread */
}
    #classlist .classlist-toolbar-item svg {
        fill: #d4d4d4;
    }
    #classlist .classlist-toolbar-item:hover {
        background: #0088FF;
        border: 1px solid #0088FF;
    }
        #classlist .classlist-toolbar-item:hover svg {
            fill: #fff;
        }
#content-wrapper #classlist #classlist-search-list-table .classlist-toolbar-item.checkbox-inline {
    color: #343f54;
    border: 2px solid #0059ff !important;
    -webkit-box-shadow: 0px 3px 5px rgba(0,24,62,0.1);
    -moz-box-shadow: 0px 3px 5px rgba(0,24,62,0.1);
    box-shadow: 0px 3px 5px rgba(0,24,62,0.1);
}

/* ****************************** 
********** Search list **********
****************************** */
#classlist-search-list #classlist-filters .document-class-list-filter-title {
    border-bottom: 1px solid #292f37 !important;
}
    #classlist-search-list #classlist-filters .document-class-list-filter-title .dbq-document-class-list-filter-title-text {
        color: #d4d4d4;
    }
    #classlist-search-list #classlist-filters .document-class-list-filter-title svg {
        fill: #d4d4d4;
    }

#classlist-search-list #classlist-filters .document-class-list-filter {
    border-top: 1px solid #292f37 !important;
}
    #classlist-search-list #classlist-filters .document-class-list-filter:first-of-type {
        border-top: 0 !important;
    }

/* ****************************** 
    BS4
****************************** */
.modal #document-topics .checkbox {
    padding: 0;
    background: #1A1E23 !important;
    border: 2px solid #3c414c;
}
    form[data-view-mode="Delete"] .modal #document-topics .checkbox {
        padding: 0;
        background: 0 !important;
        border: 0;
    }
        form[data-view-mode="Delete"] .modal #document-topics .checkbox .cr {
            border: 2px solid #3c414c;
            background: #3c414c;
        }
.modal #document-topics .dbq-no-file-found {
    padding: 10px;
    background: #26292f;
    border: 2px solid #26292f;
    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: #26292f !important;
    border: 2px solid #26292f !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: #26292f !important;
    border: 2px solid #26292f;
}
    .modal form[data-view-mode="View"] #document-topics .checkbox .cr,
    .modal form[data-view-mode="Delete"] #document-topics .checkbox .cr {
        background: #3c414c;
        border: 2px solid #3c414c;
    }
    .modal form[data-view-mode="View"] #document-topics .checkbox:hover .cr,
    .modal form[data-view-mode="Delete"] #document-topics .checkbox:hover .cr {
        background: #3c414c !important;
        border: 2px solid #3c414c !important;
    }
    .modal form[data-view-mode="View"] #document-topics .checkbox:hover .cr,
    .modal form[data-view-mode="Delete"] #document-topics .checkbox:hover .cr {
        background: #3c414c !important;
        border: 2px solid #3c414c !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 #0075DB !important;
        background: #0075DB !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: #1A1E23;
    border: 2px solid #26292f !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;
}

/* Checkbox filters */
#document-class-list-filters {
}
    #document-class-list-filters label {
        color: #d4d4d4;
        /*font-weight: 600; <-- if this is needed change the other filter labels also */
    }
    #document-class-list-filters .document-class-list-filter {
        cursor: pointer;
        background: #1A1E23;
        border: 0; /*2px solid #3c414c*/
    }
.cr {
    border: 2px solid #3e4352;
    background: #1A1E23;
    cursor: pointer;
}
#document-class-list-filters .document-class-list-filter input[type="checkbox"]:checked + .cr, .checkbox input[type="checkbox"]:checked + .cr {
    border: 2px solid #0088FF !important;
    background: #0075DB !important;
}
#document-class-list-filters .document-class-list-filter:hover .cr, .checkbox:hover .cr {
    border: 2px solid #0088FF !important;
    background: #0075DB !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 #0088FF !important;
    background: #0075DB !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 #0075DB !important;
    background: #0075DB !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 #0075DB !important;
    background: #0075DB !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;
}

#document-class-list-filters .document-class-list-filter .cr {
    border: 2px solid #60636f;
}
form[data-view-mode="View"] #document-class-list-filters .document-class-list-filter .cr,
form[data-view-mode="View"] .checkbox .cr {
    border: 2px solid #3c414c !important;
    background: #3c414c !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 #3c414c !important;
    background: #3c414c !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 #0088FF !important;
        background: #0075DB !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;
        }

/* Form group styling (group of checkboxes for example) */
#document-topics .dbq-form-group, #document-topics .dbq-form-group-padding, #document-topics .dbq-form-group-no-padding {
    background: #1A1E23; /*!important <-- disabled checkbox group in relatiebeheer not good with this !important */
    border: 2px solid #3c414c;
}
form[data-view-mode="View"] #document-topics .dbq-form-group, form[data-view-mode="View"] #document-topics .dbq-form-group-padding, form[data-view-mode="View"] #document-topics .dbq-form-group-no-padding {
    background: #26292f !important;
    border: 2px solid #26292f;
}
#document-topics .dbq-form-group-padding[data-read-only="true"], #document-topics .dbq-form-group-no-padding[data-read-only="true"] {
    background: #26292f !important;
    border: 2px solid #26292f;
}
#document-class-list-filters .document-class-list-filter input.form-control {
    background-color: #1A1E23;
    border: 2px solid #3c414c;
}

#document-topics .dbq-colon-first p {
    color: #FDFDFD !important;
}
#document-topics .dbq-colon-second p {
    background: #3c414c;
    color: #FDFDFD !important;
}

.checkbox .dbq-checkbox-label-filters {
    color: #FDFDFD;
}
.checkbox-bottom .dbq-checkbox-label-filters {
    color: #d4d4d4;
}


/* ****************************** 
    Checkbox (custom)
****************************** */
.document-class-list-filter.checkbox {
    border: 2px solid #3c414c !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 #3c414c !important;
}
.document-class-list-filter span.dbq-checkbox-label-filters {
    cursor: pointer;
}
.document-class-list-filter label {
    background: #2b3039;
    border: 2px solid #3c414c;
    border-bottom: 0;
    font-weight: 600;
    cursor: pointer;
}
.document-class-list-filter.checkbox-bottom span.dbq-checkbox-label-filters {
    background: #292f37;
    border: 0;
    border-bottom: 2px solid #3c414c;
}
#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 {
}
    #classlist-search-list #document-class-list-filters label.dbq-checkbox input {
        opacity: 0;
    }
.dbq-checkmark {
    background-color: #1A1E23;
    border: 2px solid #3c414c;
}
#classlist-search-list #document-class-list-filters label.dbq-checkbox:hover input ~ .dbq-checkmark {
    background-color: #0e72b9;
}
#classlist-search-list #document-class-list-filters label.dbq-checkbox input:checked ~ .dbq-checkmark {
    background-color: #0088FF;
    border: 2px solid #0088FF;
}
#classlist-search-list #document-class-list-filters label.dbq-checkbox .dbq-checkmark:after {
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate( 45deg );
    -ms-transform: rotate(45deg);
    transform: rotate( 45deg );
}
#classlist-search-list #classlist-filters {
    background: #1A1E23;
}
#classlist-search-list #classlist-filters .document-class-list-filter-show-more {
    color: #0088FF;
}
    #classlist-search-list #classlist-filters .document-class-list-filter-show-more svg {
        fill: #0088FF;
    }
        #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 {
    border: 2px solid #3c414c;
    padding: 5px;
}
.radio-list-select {
    padding: 5px !important;
    background-color: #1A1E23 !important;
    border: 2px solid #3c414c !important;
}
#document-topics .dbq-radio-container label.dbq-radio {
    border: 0;
    background: 0;
}
#document-topics .dbq-radio-container label.dbq-radio {
}
    #document-topics .dbq-radio-container label.dbq-radio input {
        opacity: 0;
    }
.dbq-radiomark {
    background-color: #1A1E23;
    border: 2px solid #3c414c;
}
#document-topics .dbq-radio-container label.dbq-radio:hover input ~ .dbq-radiomark {
    background: #0075DB;
    border: 2px solid #0088FF;
}
#document-topics .dbq-radio-container label.dbq-radio input:checked ~ .dbq-radiomark {
    background: #0075DB;
    border: 2px solid #0088FF;
}
    #document-topics .dbq-radio-container label.dbq-radio:hover input:checked ~ .dbq-radiomark {
        background: #0075DB;
        border: 2px solid #0088FF;
    }
        #document-topics .dbq-radio-container label.dbq-radio:hover input:checked ~ .dbq-radiomark:after {
            display: none;
        }
#document-topics .dbq-radio-container label.dbq-radio .dbq-radiomark:after {
    left: 5px;
    top: 5px;
    width: 6px;
    height: 6px;
    background: #fff;
}
#document-topics .dbq-radio-container .dbq-radiobox-value span {
    color: #FDFDFD;
}
#document-topics .checkbox label {
    color: #FDFDFD !important;
}

#document-topics div[data-topic-type-code="Dashboard"] {
    background: 0; /*graphs need to be separted for more dynamic*/
}

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


/* ************************************************************
    RUMM / Cirdax
************************************************************ */
#classlist-tiled-list {
    background: #1A1E23;
}
    #classlist-tiled-list .document-class-list-tile {
        background-color: #292f37;
        border: 1px solid #292f37;
    }
h3.ellipsis{
    color: #d4d4d4 !important;
}
#classlist-tiled-list .document-class-list-tile img.project-building-image {
    border: 5px solid #3c3c3c;
}
.go-to-tools-button {
    background: url(/DbqLibraries/DbqDeveloperTools/img/button-background-go-to-tools-dark-v2.svg) no-repeat scroll 0 0 transparent !important; /*-dark-mode*/
    background-color: transparent;
    color: transparent;
    background-size: 200px auto;
}

#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: #d4d4d4;
}
    #classlist-tiled-list .document-class-list-tile-count-container {
        color: #4e4e4e;
    }
#classlist-tiled-list .document-class-list-tiles-load-button[data-type='1'] {
    color: #0088FF;
}
#classlist-tiled-list .document-class-list-tiles-load-button {
    border: 3px solid #3c414c;
}
#classlist-tiled-list .document-class-list-tiles-load-button svg {
    fill: #d4d4d4;
}
    #classlist-tiled-list .document-class-list-tiles-load-button svg:hover {
        fill: #0088FF;
    }

#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: #2c344a;
}
    #classlist-tiled-list .document-class-list-tiles-loading-indicator a svg {
        fill: #2D79FF;
    }

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

/*
    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;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}


/* ******************************
    Timeline 
****************************** */
#classlist-timeline.fc .fc-view-harness {
    background: #1A1E23;
}
#classlist-timeline.fc.classlist-container {
}
#classlist-timeline.fc table thead tr,
#classlist-timeline.fc table thead tr th,
#classlist-timeline.fc table tbody tr,
#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; /* No background! otherwise you won't see the lines of the other table.. */
    color: #FDFDFD !important;
    border-color: #292f37;
}
.table-bordered td,
.table-bordered th {
    border: 1px solid #292f37 !important;
    border-top: 0 !important; /* <-- this one is needed because otherwise the table strokes are no aligned to each other..*/
}
    .table-bordered td:first-of-type {
        border-left: 0 !important;
        border-right: 0 !important;
        /*border-top: 1px solid #1A1E23 !important;*/ /* needs to be a border.. because otherwise tables not overlapping correctly */
    }
.fc-scrollgrid-section-header td {
    border-right: 0 !important;
    border-top: 1px solid #1A1E23 !important;
}
#content-wrapper #classlist-timeline.fc button.btn-primary.active {
    background: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
    color: #001323 !important;
}
#classlist-timeline.fc button.fc-today-button:disabled {
    background: #3c414c !important;
    border: 2px solid #3c414c !important;
    color: #FDFDFD !important;
    opacity: 1 !important;
}
    #classlist-timeline.fc button.fc-today-button:disabled:hover {
        background: #3c414c !important;
        border: 2px solid #3c414c !important;
        color: #FDFDFD !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: #FFFFFF;
}
/* Header grid */
.fc-datagrid-header.fc-scrollgrid-sync-table th {
    border-bottom: 0 !important;
}
.fc-timeline-header .fc-timeline-header-row.fc-timeline-header-row-chrono {
    border-top: 1px solid #292f37;
}

#classlist-timeline.fc .fc-scroller::-webkit-scrollbar-track {
    background-color: #1A1E23 !important;
}
#classlist-timeline.fc .fc-scroller::-webkit-scrollbar-thumb {
    border: 4px solid #1A1E23 !important;
}
#classlist-timeline.fc .fc-scroller::-webkit-scrollbar-corner {
    background-color: #1A1E23 !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 #292f37 !important;
}

/* Events */
#content-wrapper #classlist-timeline.fc .fc-timeline-event .dropdown button.dropdown-toggle,
#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 .dropdown button.dropdown-toggle svg.dbqt-event-icon,
    #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 2px 10px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 10px rgba(0,0,0,0.4);
}
    .fc-timegrid table.table-bordered table.table-bordered {
        border: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
.fc .fc-list-empty {
    background-color: #1A1E23;
}
.fc .fc-list-empty-cushion {
    color: #FFFFFF;
}
.fc .fc-list-sticky .fc-list-day > * {
    background: #1A1E23;
}
.fc .fc-list-event:hover td {
    background-color: #1A1E23;
}
.fc-direction-ltr .fc-list-table .fc-list-event-graphic {
    padding-right: 14px;
}

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

.fc .fc-daygrid-day.fc-day-today {
    background-color: rgb(130 151 255 / 15%);
}

/* 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;
    }

    
.document-class-list-tree tr[aria-selected="true"] td.ui-state-active svg {
    fill: #fff !important;
}
    .ui-iggrid-pagesizedropdown:hover .ui-igedit-dropdown-button {
        color: #fff !important;
    }


.ui-state-hover .icon-view:before, .ui-state-hover .icon-edit:before, .ui-state-hover .icon-delete:before, .ui-state-hover .icon-launch:before {
    color: #fff !important;
}

.ui-state-hover svg {
    fill: #fff !important;
}

.ui-iggrid .ui-iggrid-tablebody td span.row-button:hover svg {
    fill: #001335 !important;
}

.ui-iggrid li.ui-iggrid-page:hover > a, .ui-iggrid li.ui-iggrid-pagecurrent:hover > a, .ui-iggrid .ui-iggrid-paging-item:hover > a, .ui-state-hover a {
    color: #fff;
}
.ui-iggrid .ui-iggrid-footer .ui-state-active { /*, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active*/
    border: 0 !important; /*2px solid #0075DB <-- no border, this is the arrow in select..*/
    background-color: #3c414c !important;
    color: #FDFDFD !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item.ui-state-hover {
    border: 2px solid #0075DB !important;
    background-color: #0075DB !important;
    color: #fff !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-page.ui-iggrid-page-hover {
    border: 2px solid #0075DB !important;
    background-color: #0075DB !important;
    color: #fff !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-pagecurrent.ui-state-active {
    border: 2px solid #0075DB !important;
    background-color: #1A1E23 !important;
}


/*****************************************
    Infragistics override
*****************************************/
.document-class-list-tree tr[aria-selected="true"] td.ui-state-active {
    border-color: #1A1E23;
}
.ui-iggrid-toolbar .form-control {
    background: #1A1E23 !important;
    background-color: #1A1E23 !important;
    border-color: #3c414c !important;
    color: #FDFDFD !important;
}
    .ui-iggrid-toolbar .form-control:focus {
        color: #FDFDFD;
        background-color: #1A1E23;
        border-color: #0088FF !important;
        outline: 0;
        -webkit-box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
        -moz-box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
        /*box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);*/
    }
.ui-state-hover input, .ui-state-hover select {
    /*color: #fff !important;*/
}
.ui-state-hover .ui-icon::before {
    color: #fff !important;
}
.ui-iggrid-paging-item .ui-state-hover {
    border: 2px solid #0088FF !important;
    background: #0088FF !important;
    color: #fff !important;
}
.ui-state-focus, .ui-widget-content .ui-state-focus {
    border: 0 !important; /*border: 1px solid transparent !important;*/
}
.ui-iggrid .ui-iggrid-toolbar, .ui-iggrid .ui-iggrid-footer {
    background-color: transparent !important;
    border-bottom: 0 !important;
}
.ui-iggrid .ui-iggrid-table>tbody>tr>td:first-child, .ui-iggrid .ui-iggrid-tablebody>tr>td:first-child {
    border-left: 0 !important;
}
.ui-iggrid .ui-iggrid-table>tbody>tr:first-child, .ui-iggrid .ui-iggrid-tablebody>tr:first-child {
    border-top: 1px solid black;
}
.ui-iggrid .ui-iggrid-table>tbody>tr>td:last-child, .ui-iggrid .ui-iggrid-tablebody>tr>td:last-child {
    border-right: 0 !important;
}

.ui-iggrid .ui-iggrid-scrolldiv {
    border-bottom: 0 !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* ************************************************************
******************** Tables ********************
************************************************************ */
.ui-iggrid .ui-widget-header, .ui-iggrid th, .ui-iggrid th.ui-state-default {
    background: #1A1E23;
    color: #616161;
}
#classlist .document-class-list-tree tr {
    color: #dadcde;
    font-weight: 600;
}
.ui-iggrid table th {
    background: #0c0c0c;
    color: #616161;
    border-right: 0;
    border-bottom: 1px solid #3c414c !important;
}
    .ui-iggrid table th:last-of-type {
        border: 0 !important;
        border-bottom: 1px solid #3c414c !important;
    }
.ui-iggrid tr {
    background: 0;
    color: #8B8B8B;
}
    .ui-iggrid tr.ui-ig-altrecord {
        background: 0;
        color: #8B8B8B;
    }

    .ui-iggrid tr#classlist .document-class-list-tree tr:hover {
        background: #0088FF;
        color: #fff;
    }
        .ui-iggrid tr#classlist .document-class-list-tree tr:hover .row-button {
            background: #0088FF;
            color: #fff !important;
        }

/* Alle border prefill, infragistics voegt over borders toe die voor verschuivingen zorgen.. */
div[data-is-multiselect="true"] .ui-iggrid .ui-iggrid-table > tbody > tr > td {
    border-top: 1px solid #1A1E23 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #292f37 !important;
    border-left: 0 !important;
    background: #1A1E23 !important;
}
    div[data-is-multiselect="true"] .ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-state-active {
        border-top: 1px solid #3c414c !important;
        border-right: 0 !important;
        border-bottom: 1px solid #3c414c !important;
        border-left: 0 !important;
        background: #3c414c !important;
    }
    div[data-is-multiselect="true"] .ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-state-hover {
        border-top: 1px solid #0088FF !important;
        border-right: 0 !important;
        border-bottom: 1px solid #0088FF !important;
        border-left: 0 !important;
        background: #0088FF !important;
    }

.ui-iggrid td {
    border: 1px solid transparent;
}
.ui-iggrid td.ui-state-hover {
    border: 1px solid transparent;
}
.ui-iggrid .ui-iggrid-table > tbody > tr > td:first-child, .ui-iggrid .ui-iggrid-tablebody > tr > td:first-child {
    border-left: 0 !important; /*1px solid #1A1E23*/
}

.ui-iggrid .ui-iggrid-pagedropdowncontainer.ui-state-default, .ui-iggrid .ui-iggrid-pagesizedropdown.ui-state-default {
    background: 0;
    border: 0;
}
.ui-iggrid .ui-iggrid-results .ui-igedit-dropdown-button {
    background: 0;
    border: 0;
}
.ui-iggrid .ui-iggrid-paging .ui-igedit-input, .ui-iggrid .ui-iggrid-results .ui-igedit-input {
    background: 0;
    color: #dadcde;
}

.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results {
    background: #1A1E23;
    border-color: #3c414c;
    color: #dadcde;
}

.ui-iggrid .ui-iggrid-toolbar {
    background: #1A1E23 !important;
    background-color: #1A1E23 !important;
}
.ui-iggrid .ui-iggrid-footer {
    background: #1A1E23 !important;
}

    .ui-iggrid .ui-iggrid-footer .ui-iggrid-results {
        color: #dcdcdc !important;
    }



/* ****************************** 
    UI-Igrid styles
****************************** */
/* 
    General
*/
.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,
.ui-iggrid-pagedropdowncontainer, .ui-iggrid-pagedropdowncontainer .ui-state-default {
    border: 0 !important;
    background: 0 !important;
    background-color: none !important;
    cursor: pointer;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabeldisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabeldisabled,
.ui-iggrid .ui-iggrid-paging .ui-igedit-input {
    color: #FDFDFD !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-icon:before,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-icon:before,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default:hover .ui-icon:before,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default:hover .ui-icon:before,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-iggrid-prevpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-iggrid-nextpagelabel,
.ui-iggrid .ui-iggrid-paging .ui-igedit-input {
    color: #FFFFFF !important;
}

/* 
    Normal
*/
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default .ui-iggrid-firstpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-lastpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabeldisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabeldisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default .ui-iggrid-firstpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-lastpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimg,
.ui-iggrid-pagedropdowncontainer .ui-state-default,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-page.ui-state-default {
    border: 2px solid #3c414c !important;
    background-color: #1A1E23 !important;
    opacity: 1 !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default .ui-iggrid-firstpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-lastpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimg,
.ui-iggrid-pagedropdowncontainer .ui-state-default .ui-icon:before {
    color: #0088FF !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabel {
    color: #0088FF !important;
}
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default .ui-iggrid-firstpageimgdisabled,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-lastpageimgdisabled,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimgdisabled,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimgdisabled {
        color: #A0A3B1 !important;
    }
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabeldisabled,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabeldisabled {
        color: #A0A3B1 !important;
    }
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabeldisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimgdisabled {
    border-left: 0 !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabeldisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimgdisabled {
    border-right: 0 !important;
}
/*
    Disabled
*/
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default .ui-iggrid-firstpageimgdisabled,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-lastpageimgdisabled,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimgdisabled,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabeldisabled,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimgdisabled,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabeldisabled {
        /*opacity: .35 !important;*/
        background: #3c414c !important;
        border: 2px solid #3c414c !important;
        color: #A0A3B1 !important;
        opacity: 1 !important;
    }

/*
    Normal Hover
*/
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging ul.ui-iggrid-pagelist li.ui-iggrid-page.ui-state-default:hover {
    background: #0069d4 !important;
    border: 2px solid #0075DB !important;
}
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-paging ul.ui-iggrid-pagelist li.ui-iggrid-page.ui-state-default:hover a {
        color: #FFFFFF !important;
    }
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default:hover .ui-iggrid-firstpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default:hover .ui-iggrid-lastpageimg {

}
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-iggrid-prevpageimg,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-iggrid-nextpageimg,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-iggrid-prevpagelabel,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-iggrid-nextpagelabel,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default:hover .ui-iggrid-firstpageimg,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default:hover .ui-iggrid-lastpageimg,
    .ui-iggrid-pagedropdowncontainer:hover .ui-state-default {
        background: #0069d4 !important;
        border: 2px solid #0075DB !important;
        color: #FFFFFF !important;
    }
    .ui-iggrid-pagedropdowncontainer:hover .ui-state-default .ui-igedit-input,
    .ui-iggrid-pagedropdowncontainer:hover .ui-state-default .ui-icon:before {
        color: #FFFFFF !important;
    }
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-iggrid-nextpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-iggrid-prevpagelabel {
    border-left: 0 !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-iggrid-prevpageimg,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-iggrid-nextpagelabel {
    border-right: 0 !important;
}
/*
    Disabled hover
*/
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default:hover .ui-iggrid-firstpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default:hover .ui-iggrid-lastpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-lastpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimgdisabled {
    color: #A0A3B1 !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-prevpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default .ui-iggrid-nextpagelabel,
.ui-iggrid .ui-iggrid-paging .ui-igedit-input {
    color: #0088FF !important;
}
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default .ui-iggrid-prevpagelabeldisabled,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabeldisabled {
        color: #A0A3B1 !important;
    }
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-iggrid-prevpageimgdisabled.ui-icon:before,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-iggrid-nextpageimgdisabled.ui-icon:before,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default:hover .ui-iggrid-firstpageimgdisabled.ui-icon:before,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default:hover .ui-iggrid-lastpageimgdisabled.ui-icon:before,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-prevpage.ui-state-default:hover .ui-iggrid-prevpagelabeldisabled.ui-iggrid-prevpagelabel,
    .ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default:hover .ui-iggrid-nextpagelabeldisabled.ui-iggrid-nextpagelabel {
        color: #A0A3B1 !important;
    }
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default:hover .ui-iggrid-firstpageimgdisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-lastpage.ui-state-default:hover .ui-iggrid-lastpageimgdisabled {
    background: #3c414c !important;
    border: 2px solid #3c414c !important;
    color: #FDFDFD !important;
}

.ui-iggrid-pagedropdowncontainer:hover .ui-igedit-button-common {
    background: 0 !important; /*#0088FF */
    border: 0 !important; /* #0088FF */
}
    .ui-iggrid-pagedropdowncontainer:hover .ui-state-hover.ui-state-default .ui-icon {
        color: #ffffff;
    }
    .ui-iggrid .ui-iggrid-footer .ui-state-default.ui-igedit-button-common {
        border: 0 !important;
    }

/* ****************************** 
    ui-iggrid-results (pagination top-left of table)
****************************** */
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results {
    background: 0;
    border: 0;
    border-color: none;
    /*color: #0088FF;*/
}
    .ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit {
        background: #1A1E23 !important;
        border: 2px solid #3c414c !important;
        color: #0088FF !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: #0088FF !important;
    }
    .ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results:hover .ui-igedit {
        background: #0075DB !important;
        border: 2px solid #0088FF !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;
    color: #fff !important;
    cursor: pointer;
}

/*
    TABLES TableRow HOVER
*/
.ui-widget-content tr td.ui-state-hover,
.ui-widget-header tr td.ui-state-hover {
    background: #0075DB !important;
    background-color: #0075DB !important;
    border: 1px solid #0075DB !important;
    border-bottom: 1px solid #0088FF !important;
    color: #FFFFFF !important;
}
#content-wrapper .ui-iggrid .ui-iggrid-tablebody td svg {
    fill: #dadcde !important;
}
#content-wrapper .ui-iggrid .ui-iggrid-tablebody td .row-button svg {
    fill: #0088FF !important;
}
#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 !important;
}
        #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 !important;
        }

/*
    active state after click on view-button
*/
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle {
    background: #0088FF !important;
    border: 2px solid #004ad4 !important;
}

#content-wrapper .ui-iggrid .ui-iggrid-scrolldiv {
}
#content-wrapper .ui-iggrid .ui-iggrid-header, #content-wrapper .ui-iggrid table th {
    border-bottom: 1px solid #292f37 !important;
}
#content-wrapper .document-class-list-tree th span {
    color: #FFFFFF;
    font-weight: 600;
}

/* ###################$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

    NEW OVERRIDES -> need to be structered

###################$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */










/* TABLES TableRow HOVER - override */
#content-wrapper .ui-iggrid .ui-iggrid-scrolldiv {
}
#content-wrapper .ui-iggrid .ui-iggrid-header,
#content-wrapper .ui-iggrid table th {
    border-bottom: 1px solid #292f37;
}
#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 #292f37; /* <-- in light this is not needed */
    border-left: 0 !important;
    border-right: 0 !important;
}
.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: #0088FF;
}

#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: #FDFDFD;
    }






#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: #FFFFFF;
    fill: #FFFFFF;
}
    #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: #000000;
    }
.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 #292f37 !important;
}
.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: #FFFFFF;
    background-color: #000000;
    border: 2px solid #3c414c;
}
.ui-iggrid .ui-iggrid-paging li {
    color: #FFFFFF;
    background-color: #000000;
    border: 2px solid #3c414c;
}

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

.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-state-active, 
.ui-widget-content .ui-state-active, 
.ui-widget-header .ui-state-active {
    color: #ffffff !important;
    fill: #ffffff !important;
}
#content-wrapper .ui-iggrid .ui-iggrid-tablebody td.ui-state-active .row-button svg {
    fill: #ffffff !important;
}