svg {
    width: 20px;
    height: 20px;
}

/*
    * Not needed i gues?
    *
#content-wrapper .ui-iggrid .ui-iggrid-tablebody td svg,
#class-list-menu .dropdown-menu > li > a svg,
#classlist .document-class-list-tree .image-container .icon-container svg,
#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,
#classlist-tiled-list .document-class-list-tiles-loading-indicator a svg,
button.classlist-toolbar-item svg,
#classlist-search-list #classlist-filters .document-class-list-filter-title svg,
#classlist-search-list #classlist-filters .document-class-list-filter-show-more svg,
.dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dropdown svg,
.dbqdclt-dropdown-menu.dropdown-menu li svg,
.dbqdclt-dropdown-menu svg,
#class-list-menu .dropdown-menu svg {
    width: 20px;
    height: 20px;
}
*/

/*****************************************
    SVG
    - Help
*****************************************/
.document-class-list-tabs-container .help-button svg.dbq-icon-30x30,
.document-class-list-tabs-container .help-button svg.dbq-icon-20x20,
.class-list-menu-help svg {
    float: left;
    width: 30px;
    height: 30px;
}
.document-class-list-tabs-container .help-button svg.dbq-icon-20x20 {
    padding: 0;
}

/*****************************************
    SVG
    - Breadcrumbs
*****************************************/
.btn-breadcrumb .btn:first-child svg {
    margin: 0;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):after {
    /*
        # in URLs starts a fragment identifier. So, in order to make that work, write %23 instead of #. That is the value of escaped # character.
    */
    content: url("data:image/svg+xml,<svg fill='%23808080' 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>");
    border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;
    width: 8px;
    height: 20px;
    float: right;
    margin: 7px 0px;
    line-height: 20px !important;
}

/* Breadcrumbs <- this was another section probably it can be merged */
#dbq-document-class-list-breadcrumbs svg,
.btn-breadcrumb .btn:first-child svg {
    width: 16px;
    height: 16px;
    padding: 1px 0;
    margin: 2px 0 -2px;
}
#dbq-document-class-list-breadcrumbs svg {
    margin: 2px 0 -2px;
}
.btn-breadcrumb .btn:first-child svg {
    margin: 1px 0 -1px;
}
#dbq-document-class-list-breadcrumbs svg {
    float: left;
    width: 34px;
    height: 34px;
    padding: 10px;
    margin: 0;
}

/*****************************************
    SVG
    - .row-button
*****************************************/
#classlist .document-class-list-tree .ui-widget-content .ui-state-active .row-button svg {
    fill: #FFFFFF;
}
#content-wrapper .ui-iggrid .ui-iggrid-tablebody td svg {
    fill: #43464c;
    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 !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;
    }

/*****************************************
    SVG
    - #class-list-menu
*****************************************/
#class-list-menu .dropdown-menu > li > a svg {
    margin-right: 10px;
}
#class-list-menu .dropdown-menu svg {
    /*width: 16px;
    height: 16px;*/
    float: left;
    padding: 2px;
    margin: 0 10px 0 0;
}
#classlist .document-class-list-tree .image-container .icon-container svg {
    float: left;
    padding: 4px;
    margin: 0;
}

/*****************************************
    SVG
    - add/remove
*****************************************/
.dashboard-list-item-remove-overlay svg {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.dashboard-list-add-button-container button svg, 
.dashboard-list-remove-button-container button svg {
    float: left;
    width: 16px;
    height: 16px;
    margin: 2px 10px 2px 2px;
}

/*****************************************
    SVG
    - checkbox
*****************************************/
.document-class-list-filter.checkbox-bottom .cr svg {
    width: 10px;
    height: 10px;
}

/*****************************************
    SVG
    - timeline
*****************************************/
#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 {
    padding: 5px;
}

/*****************************************
    SVG
    - no data overlay
*****************************************/
.dbq-no-data-available-container .dbq-no-data-available-image svg {
    width: 250px;
    height: 100px;
    padding: 0 50px;
    fill: #cccccc;
}

/*****************************************
    SVG
    - #classlist-tiled-list
*****************************************/
#classlist-tiled-list .document-class-list-tiles-loading-indicator a svg {
    margin-right: 5px;
    -animation: glyphicon-refresh-animate1 .7s infinite linear;
    -webkit-animation: glyphicon-refresh-animate2 .7s infinite linear;
}

#classlist-tiled-list .document-class-list-tiles-load-button svg {
    width: 30px;
    height: 30px;
    padding: 8px;
}
    #classlist-tiled-list .document-class-list-tiles-load-button svg:hover {
        fill: #1B93F1;
    }
button.classlist-toolbar-item svg,
#content-wrapper button svg, 
#content-wrapper .btn-primary svg {
    float: left;
    padding: 3px;
    margin: 0;
}

/*****************************************
    SVG
    - #classlist-search-list
*****************************************/
#classlist-search-list #classlist-filters .document-class-list-filter-title svg {
    float: left;
    padding: 5px;
}
    #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-show-more svg {
    float: left;
    padding: 5px;
    margin: 0 10px 0 0;
}
    #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 );
    }

#document-class-list-filters .document-class-list-filter .cr svg {
    width: 16px;
    height: 16px;
    padding: 3px;
    margin: 0;
    top: 0;
    left: 0;
    float: left;
}

/*****************************************
    SVG
    - .dbq-document-class-list-tree
*****************************************/
.dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-chevron-right svg {
    transform: rotate(0deg) !important;
}
.dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-chevron-down svg {
    transform: rotate(90deg) !important;
}

.dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-arrow svg {
    /*margin: 0;
    width: 20px;
    height: 24px;
    padding: 4px 0; <-- before contentBeheer tree list change */
    /*float: left;
    margin: 0;
    width: 20px;
    height: 20px;
    padding: 4px; <-- nice but not same as mainmenu*/
    float: left;
    width: 10px;
    height: 10px;
    padding: 0;
    margin: 0;
}
.dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dropdown svg {
    padding: 4px;
    float: left;
    fill: #000000; /* default */
}
.dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dropdown-menu li svg {
    display: inline-block;
    margin: 0 10px 0 0;
}
.dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dropdown-menu li:hover svg {
    fill: #fff;
}

/*****************************************
    SVG
    - .dbqdclt-dropdown-menu
*****************************************/
.dbqdclt-dropdown-menu.dropdown-menu li svg {
    float: left;
    display: inline-block;
    margin: 0;
    padding: 2px;
}
.dbqdclt-dropdown-menu li svg {
    display: inline-block;
    margin: 0 10px 0 0;
}
.dbqdclt-dropdown-menu li:hover svg {
    fill: #fff;
}

/* ****************************** 
    White backgrounds
****************************** */
/* Tijdregistratie beheer -> Weekoverzicht */
.dbq-wrapper, #content-wrapper .row.dbq-wrapper {
    padding: 10px;
    margin-bottom: 10px !important;
    background: #FFFFFF;
    color: #001323;
    border-radius: 10px;
}
/* Tijdregistratie beheer -> Maandoverzicht */
#document-topics .dbq-column > .block {
    border-radius: 10px;
    /* this conflicts with TSN -> onderhoud */
    /*height: 100%;
    background: #FFFFFF;
    -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%);*/
}

/* ****************************** 
    Theme Switch
****************************** */
.dbq-switch {
    border-radius: 10px;
    background: #FFFFFF;
    border: 2px solid #ced4da;
}
.dbq-switch-theme {
    width: 200px;
    float: left;
    height: 20px;
    padding: 13px 0;
    position: relative;
    margin: 7px 15px;
}

/* Input */
.dbq-switch-input {
    opacity: 0;
    top: 0;
    left: 0;
    box-sizing: content-box;
    /* added for sourceCode switch, otherwise not clickable */
    position: absolute;
    width: 100%;
    z-index: 999;
    cursor: pointer;
    /* new */
    height: 26px;
}

/* Text ( before / after ) */
.dbq-switch-text {
    background: 0;
    border-radius: inherit;
}
    .dbq-switch-text:before {
        content: attr(data-off);
        color: #000000;
        right: 0;
        width: calc(50% - 2px);
        text-align: center;
    }
    .dbq-switch-text:after {
        content: attr(data-on);
        color: #000000;
        left: 0;
        width: calc(50% - 2px);
        text-align: center;
    }
    .dbq-switch-text:before, .dbq-switch-text:after {
        position: absolute;
        top: 50%;
        margin-top: -6px;
        font-size: 12px;
        line-height: 12px;
        font-weight: 600;
        box-sizing: content-box;
    }
.dbq-switch-input:checked ~ .dbq-switch-text {
    background: #FFFFFF;
}
    .dbq-switch-input:checked ~ .dbq-switch-text:before {
        /*opacity: 0;*/
    }
    .dbq-switch-input:checked ~ .dbq-switch-text:after {
        opacity: 1;
    }

/* Handle */
.dbq-switch-handle {
    border-radius: 7px;
    background: #000000;
    border: 2px solid #000000;
    color: #ffffff;
}
    .dbq-switch-handle:before {
        background: linear-gradient(to bottom, #eeeeee, #ccc);
        background-image: -webkit-linear-gradient(top, #eeeeee, #ccc);
        border-radius: 7px;
    }
.dbq-switch-input:checked ~ .dbq-switch-handle {
    color: #FFFFFF;
    background: #000000;
    border: 2px solid #000000;
    border-radius: 7px;
}
.dbq-switch-theme .dbq-switch-handle {
    width: 100px;
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    text-align: center;
    padding: 4px 0;
    position: absolute;
    top: 1px;
    left: 1px;
    height: 24px;
}
.dbq-switch-theme .dbq-switch-input:checked ~ .dbq-switch-handle {
    left: 95px;
}
.dbq-switch:hover .dbq-switch-handle,
.dbq-switch-input:checked:hover ~ .dbq-switch-handle {
    background: grey;
    border: 2px solid grey;
}

/*****************************************
    Nav-Tabs
*****************************************/
/* Document topic tab bar styling */
.document-class-list-tabs-container {
    position: relative;
}
    .document-class-list-tabs-container .nav-tabs.help-button-visible {
        width: calc(100% - 24px);
    }
    .document-class-list-tabs-container .help-button {
        top: 10px;
        right: 30px;
        width: 30px;
        height: 30px;
        /*display: none; */
        font-size: 24px;
        position: absolute;
    }

/* Help */
.class-list-menu-help {
    display: none;
    float: left;
    width: 30px;
    height: 30px;
    margin: 20px 10px 20px 20px;
}

/*****************************************
    Breadcrumbs
*****************************************/
/*
    * Also old?
    *
    .btn-breadcrumb .btn:not(:last-child):after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    margin-top: -17px;
    left: 100%;
    z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    margin-top: -17px;
    margin-left: 1px;
    left: 100%;
    z-index: 3;
}*/

.btn-breadcrumb .btn {
    padding: 7px 12px 7px 24px;
    font-size: 14px;
    line-height: 20px;
    /*height: 36px;*/
    height: auto;
}
    .btn-breadcrumb .btn span {
        padding: 7px 10px;
    }
.btn-breadcrumb .btn:last-child {
    padding: 7px 12px 7px 24px;
}
.btn-breadcrumb .btn:first-child {
    padding:9px 6px 10px 10px;
}
/*
    * i think this is old..
    *
    .btn-breadcrumb .btn.btn-default:not(:last-child):before {
    content: none;
}
    .btn-breadcrumb .btn.btn-default:not(:last-child):after {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        padding: 0;
        margin: 13px 0;
        position: relative;
        top: 0;
        left: 0;
    }*/
.btn-breadcrumb .btn,
.btn-breadcrumb .btn:first-child,
.btn-breadcrumb .btn:last-child {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 20px !important;
    display: flex;
}
#dbq-document-class-list-breadcrumbs {
    background: 0;
    border-bottom: 0; /*1px solid #d8d8d8*/
}
#dbq-document-class-list-breadcrumbs a.btn {
    transition: none;
    flex: none;
    /*font-size: 12px !important;
    line-height: 20px !important;*/
}
    #dbq-document-class-list-breadcrumbs a.btn:hover {
        transition: none;
    }

.btn-breadcrumb .btn:last-child {
    padding: 5px;
    margin: 0;
    font-size: 12px;
    line-height: 34px;
}

.btn-breadcrumb a {
    border: 0 !important;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
    content: none;
    border-left: 0;
}

#dbq-document-class-list-breadcrumbs {
    width: 100%;
    padding: 0;
    /*position: fixed;
    z-index: 1049; 1050 is a modal
    margin-top: -41px; <^-- not possible for pages without breadcrumbs*/
}
    #dbq-document-class-list-breadcrumbs .btn {
        user-select: all !important;
    }
    #dbq-document-class-list-breadcrumbs a.btn {
        font-weight: 600;
    }

/*****************************************
    Buttons
*****************************************/
#classlist button.classlist-toolbar-item {
    padding: 3px;
}
.ui-iggrid .ui-igedit-buttonimage,
.ui-iggrid-filtercell .ui-iggrid-filterbutton {
    margin-top: 0 !important;
    margin-left: 0 !important;
}

/*****************************************
    Class-List-Filters
*****************************************/




/*****************************************
    Tables
    - ui-iggrid
*****************************************/
/* Styling for table cells */
.table>tbody>tr>td {
    vertical-align: middle;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 4px 8px;
}
.table>tbody>tr>td.button-table-cell, .table>tfoot>tr>td.button-table-cell, .table>thead>tr>td.button-table-cell {
    padding: 0px;
}

.table > tbody > tr > td {
    vertical-align: middle;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 4px 8px;
    border-top: 0px;
}
.table-striped>tbody>tr:nth-of-type(odd) {
}
.table>tbody>tr>td.button-table-cell, .table>tfoot>tr>td.button-table-cell, .table>thead>tr>td.button-table-cell {
    padding: 0px;
}
.table>tbody>tr>span.row-button {
    cursor: pointer;
    display: inline-block;
    padding: 3px;
    margin-bottom: 0px;
    margin-left: 4px;
    vertical-align: middle;
    float: left;
}
.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;
}

/* Select in table */
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results,
#classlist button.classlist-toolbar-item {
    /*border-width: 2px;
    border-style: solid;
    border-radius: 10px;*/
    border-radius: 10px;
    border: 2px solid #ced4da;
    background: 0;
}
.ui-igedit-container {
    height: 26px;
}
.ui-iggrid .ui-iggrid-toolbar .ui-state-default {
    border: 0;
    border-radius: 10px !important;
}
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results span {
    line-height: 26px;
    font-size: 14px;
    height: 26px;
    padding: 0;
    display: inline-block !important;
}
    .ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results span.ui-iggrid-pagesizelabel {
        display: none !important;
    }

/* ****************************** 
    UI-Igrid styles  
****************************** */
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-page.ui-state-default {
    margin: 0 0 0 5px;
    padding: 6px 0px;
    line-height: 12px;
    font-size: 12px;
    font-weight: 600;
}
    .ui-iggrid-page {
        padding: 6px 5px !important;
    }
.ui-iggrid .ui-iggrid-paging {
    /*margin-top: 10px;*/
}
    .ui-iggrid .ui-iggrid-paging li {
        padding: 3px 8px !important;
    }
a.ui-iggrid-pagelink, a.ui-iggrid-pagelinkcurrent {
    font-size: 12px;
    line-height: 12px;
}
.ui-iggrid .ui-iggrid-paging .ui-igedit-input, .ui-iggrid .ui-iggrid-results .ui-igedit-input {
    line-height: 20px !important;
    font-size: 12px !important;
    padding: 0 0 0 10px !important;
}
.ui-igedit-input, .ui-iggrid .ui-iggrid-pager .ui-igedit-input {
    padding: 0 !important;
}
.ui-iggrid-pagedropdownlabels {
    display: none;
}
    .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-iggrid .ui-iggrid-paging .ui-iggrid-paging-item.ui-iggrid-prevpage span {
    padding: 7px 10px 7px 0 !important;
}
.ui-iggrid .ui-iggrid-paging .ui-iggrid-paging-item.ui-iggrid-nextpage span {
    padding: 7px 0 7px 10px !important;
}
.ui-iggrid .ui-iggrid-paging .ui-iggrid-paging-item.ui-iggrid-lastpage span {
    padding: 0 !important;
}
span[data-localeid="nextPageLabelText"] {
    padding: 0 0 0 10px;
}
span[data-localeid="prevPageLabelText"] {
    padding: 0 10px 0 0;
}
.ui-igeditor-input-container {
    border-radius: 10px 0 0 10px !important;
}

.ui-igcombo-listitemholder li.ui-state-default, .ui-igedit-dropdown .ui-igedit-listitem.ui-state-default, .ui-igedit-list .ui-igedit-listitem.ui-state-default, .ui-iggrid-columnmoving-dropdown-list li.ui-state-default, .ui-iggrid-featurechooser-list li.ui-state-default, .ui-iggrid-filterddlist li.ui-state-default, .ui-iggrid-hiding-dropdown-list li.ui-state-default {
    padding: 3px 5px;
}
    .ui-igedit-dropdown::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

.ui-iggrid-firstpage .ui-icon, .ui-iggrid-prevpage .ui-icon {
    left: 0 !important;
}

.ui-iggrid .ui-iggrid-addrow td a, .ui-iggrid .ui-iggrid-footer .ui-state-default a, .ui-iggrid .ui-iggrid-toolbar .ui-state-default a {
    float: left;
    font-size: 14px;
    line-height: 14px;
    font-weight: 600;
}

.ui-iggrid, .ui-iggrid .ui-iggrid-content, .ui-iggrid .ui-iggrid-headertable, .ui-iggrid .ui-widget-content, .ui-iggrid-scrolldiv table {
    border-collapse: collapse;
}

/*****************************************
    ui-iggrid
*****************************************/
.ui-iggrid .ui-iggrid-scrolldiv{
    margin-top: 0 !important;
}
.ui-iggrid .ui-iggrid-header, .ui-iggrid table th {
    padding: 10px;
}
/*.document-class-list-tree th span {
    font-weight: 500; <--------------------- this is Dynabloqs styling 
    text-transform: uppercase;
}*/
/*#classlist .document-class-list-tree tr {
    font-size: 14px;
    line-height: 20px;
}*/
.ui-igtreegrid-expandcell {
    min-width: 0;
    margin: 0;
    height: 20px;
    float: left;
}

.ui-iggrid .ui-iggrid-paging li {
    padding: 4px 10px;
    line-height: 20px;
    font-size: 14px;
    margin: 0 0 0 5px !important; /* for pagination */
}

.dbq-application-rumm .ui-iggrid {
    padding: 0 !important;
}

.ui-iggrid .ui-widget-content, .ui-iggrid-scrolldiv table {
    width: 100% !important; /* Added 100% width to override table width calculation from infragistics */
}


.ui-iggrid {
    height: 100%;
    padding: 0; /* can't add padding here, sometimes "ui-iggrid" is in a classlist. This will cause double padding/margin (example at WSP)*/
}
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results {
    float: left !important;
    margin-right: 15px;
    margin-top: 3px;
}
.ui-iggrid-toolbar #searchbox {
    height: 26px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
}
.ui-iggrid table th {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid #f4f4f4;
    font-size: 12px;
    line-height: 12px;
}
.ui-iggrid .ui-widget-header, .ui-iggrid th, .ui-iggrid th.ui-state-default {
    border-right: 0;
    border-color: #f4f4f4;
}
.ui-iggrid th:first-child {
    border-left: 0;
    border-right: 0;
    border-top: 0;
}
.ui-iggrid table td {
    overflow: visible; /* Overflow visible is required to be able to use the bootstrap dropdown menu's from within a table row */
}

    .ui-iggrid table td a.glyphicon {
        text-decoration: none;
    }

.ui-iggrid-pagelist {
    padding: 0 !important;
}
    .ui-iggrid-pagelist li {
        margin: 0 0 0 5px;
    }

.ui-iggrid-lastpage .ui-icon,
.ui-iggrid-nextpage .ui-icon,
body[dir=rtl] .ui-iggrid-featurechoosericoncontainer,
body[dir=rtl] .ui-iggrid-filtericoncontainer {
    right: 0 !important;
}

/* ************************************************************
******************** Tables ********************
************************************************************ */
.ui-iggrid .ui-iggrid-scrolldiv {
    overflow: visible !important; /* Overflow visible is required to be able to use the bootstrap dropdown menu's from within a table row */
    margin-top: 10px;
}
.ui-iggrid .ui-widget-header, .ui-iggrid th, .ui-iggrid th.ui-state-default {
    font-family: 'Poppins', sans-serif;
}
#classlist .document-class-list-tree tr {
    /*font-size: 14px;
    font-weight: 500;
    line-height: 20px;*/
}

/* All border prefill, infragistics add's borders everywhere.. */
.ui-iggrid .ui-iggrid-table > tbody > tr > td {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
}
    .ui-iggrid .ui-iggrid-table > tbody > tr > td.button-table-cell {
        padding: 0;
    }
    .ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-state-active {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 20px;
        font-weight: 500;
    }
    .ui-iggrid .ui-iggrid-table > tbody > tr > td.button-table-cell.ui-state-active {
        padding: 0;
    }
    .ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-state-hover {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 20px;
        font-weight: 500;
    }
    .ui-iggrid .ui-iggrid-table > tbody > tr > td.button-table-cell.ui-state-hover {
        padding: 0;
    }

.ui-iggrid tr .ui-icon {
    width: 20px !important;
    height: 20px !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-page.ui-state-default {
    /*padding: 6px 7px !important; <-- this padding is not good for [not selected] numbers in pagination in CMSv2*/
    padding: 3px 7px !important;
}
.ui-iggrid td.ui-state-default, .ui-iggrid td.ui-state-highlight, .ui-iggrid td.ui-state-hover {
    font-weight: 500;
}
.ui-iggrid .ui-iggrid-pagedropdowncontainer.ui-state-default, 
.ui-iggrid .ui-iggrid-pagesizedropdown.ui-state-default {
    height: 30px;
}

/* ******************************
    ui-iggrid styling (pagination tables)
****************************** */
/* general */
/* combine borders to width */
.ui-iggrid .ui-iggrid-pager *,
.ui-iggrid-firstpage,
.ui-iggrid-lastpage,
.ui-iggrid-prevpage,
.ui-iggrid-nextpage,
.ui-iggrid-pagedropdowncontainer {
    box-sizing: border-box;
}
.ui-iggrid-firstpage,
.ui-iggrid-lastpage,
.ui-iggrid-prevpage,
.ui-iggrid-nextpage,
.ui-iggrid-pagedropdowncontainer {
    height: 30px !important;
    margin: 0 0 0 5px !important;
    padding: 0 !important;
}
.ui-iggrid .ui-iggrid-paging .ui-iggrid-firstpage, .ui-iggrid .ui-iggrid-paging .ui-iggrid-lastpage, .ui-iggrid .ui-iggrid-paging .ui-iggrid-nextpage, .ui-iggrid .ui-iggrid-paging .ui-iggrid-prevpage, .ui-iggrid-pagedropdownlabels {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
    /* containers did lose width and height.. */
    .ui-iggrid-firstpage::after,
    .ui-iggrid-lastpage::after,
    .ui-iggrid-prevpage::after,
    .ui-iggrid-nextpage::after,
    .ui-iggrid .ui-iggrid-footer .ui-state-default.ui-igedit-button-common::after {
        content: "";
        clear: both;
        display: table;
    }

.ui-iggrid .ui-state-disabled {
    cursor: not-allowed !important;
}

.ui-icon:before, .ui-iggrid-collapsibleindicatorcontainer a .ui-iggrid-multiheader-collapsed:before, .ui-iggrid-collapsibleindicatorcontainer a .ui-iggrid-multiheader-expanded:before, .ui-iggrid-filtericon:before, .ui-iggrid-moving-indicator:before {
    width: 26px;
    height: 26px;
    display: block;
    position: absolute;
    top: 5px;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    line-height: 14px;
    font-size: 14px;
    text-indent: 0;
}
.ui-iggrid-paging .ui-icon:before {
    top: 0;
    line-height: 12px;
    font-size: 12px;
    padding: 7px;
    /*color: #000; <-- color should not be on this element, all custom styling will not override this */
}
.ui-iggrid .ui-iggrid-paging .ui-iggrid-paging-item.ui-iggrid-firstpage .ui-icon:before,
.ui-iggrid .ui-iggrid-paging .ui-iggrid-paging-item.ui-iggrid-lastpage .ui-icon:before {
    padding: 7px;
    height: 26px;
    width: 26px;
    /*color: #000; <-- color should not be on this element, all custom styling will not override this */
}

/*
    Numbers
*/
ul.ui-iggrid-pagelist {
    height: 30px !important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging ul.ui-iggrid-pagelist li.ui-iggrid-page.ui-state-default {
    padding: 6px 7px !important;
}

/*
    Normal
*/
.ui-iggrid .ui-iggrid-footer .ui-iggrid-firstpage.ui-state-default .ui-iggrid-firstpageimg,
.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-lastpageimg,
.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-prevpageimg,
.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-prevpage.ui-state-default .ui-iggrid-prevpageimgdisabled,
.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-nextpagelabel,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpagelabeldisabled,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-nextpage.ui-state-default .ui-iggrid-nextpageimgdisabled,
.ui-iggrid-pagedropdowncontainer .ui-state-default {
    font-size: 12px;
    line-height: 12px;
    font-weight: 600;
}

/* 
    First page & Last page
*/
.ui-iggrid .ui-iggrid-paging .ui-iggrid-firstpage,
.ui-iggrid .ui-iggrid-paging .ui-iggrid-prevpage {
    padding: 0 !important;
}
.ui-iggrid .ui-iggrid-paging .ui-icon,
.ui-iggrid .ui-iggrid-paging .ui-iggrid-paging-item span.ui-icon,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item.ui-iggrid-firstpage {
    width: 30px !important;
    height: 30px !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 12px !important;
}
/*.ui-iggrid .ui-iggrid-paging .ui-iggrid-pagedropdowncontainer .ui-icon {
    height: 26px !important;
    width: 26px !important;
}*/
    .ui-iggrid .ui-iggrid-footer .ui-state-default.ui-igedit-button-common {
        padding: 0 !important;
    }
    .ui-iggrid-firstpage .ui-icon, .ui-iggrid-prevpage .ui-icon {
        left: 0 !important;
    }

/* 
    Dropdown 
*/
.ui-iggrid .ui-iggrid-paging .ui-iggrid-pagedropdowncontainer .ui-igeditor-input-container span.ui-iggrid-pagedropdowncontainer {
    margin: 0 !important;
}
.ui-iggrid .ui-iggrid-paging .ui-iggrid-pagedropdowncontainer,
.ui-iggrid .ui-iggrid-paging .ui-iggrid-pagedropdowncontainer .ui-igedit-container {
    width: auto !important;
    /*height: 26px !important;*/
    height: 30px !important;
    margin: 0; /*0 0 0 5px <-- not possible, 2 of this class in the selectbox from paging*/
    padding: 0 !important;
    /**/
    padding: 0; /*5px 2px padding should be 0, otherwise not fulle clickable*/
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 10px !important;
}
    .ui-iggrid .ui-iggrid-paging .ui-iggrid-pagedropdowncontainer .ui-iggrid-pagedropdowncontainer,
    .ui-iggrid .ui-iggrid-paging .ui-iggrid-pagedropdowncontainer .ui-igedit-input {
        height: 26px !important;
        font-size: 14px !important;
    }
.ui-iggrid-pagedropdowncontainer .ui-state-default,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-page.ui-state-default {
    border: 2px solid #ced4da !important;
    background-color: #FFFFFF !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: #000000 !important;
}
    .ui-iggrid .ui-iggrid-paging .ui-iggrid-pagedropdowncontainer .ui-igedit-container {
        border-radius: 10px !important;
    }
.ui-igedit-input, .ui-iggrid .ui-iggrid-pager .ui-igedit-input {
    max-width: 50px;
    font-size: 14px;
    font-weight: 600;
    line-height: 26px;
}



/* ****************************** 
    ui-iggrid-results (pagination top-left of table)
****************************** */
.ui-chart-legend-item-text, .ui-chart-piechart-container, .ui-sparkline, .ui-widget, .ui-widget button, .ui-widget input, .ui-widget select, .ui-widget textarea {
    font-family: 'Poppins', sans-serif;
}
.ui-helper-clearfix:after,
.ui-helper-clearfix:before,
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results,
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results span,
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit .ui-igedit-input,
.ui-iggrid .ui-iggrid-results .ui-igedit-container,
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit-button-common,
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit-button-common .ui-icon,
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit-button-common .ui-icon:before,
.ui-igeditor-input-container,
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit,
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit .ui-igedit-input,
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit input,
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results span.ui-iggrid-pagesizelabel {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -o-user-select: none !important;
    user-select: none !important;
    /*pointer-events: none;*/
}
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results span,
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit .ui-igedit-input {
    float: left;
    height: 26px !important;
    line-height: 26px !important;
    font-size: 14px !important;
}

.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit-button-common {
    padding: 0 !important;
    width: 26px !important;
    height: 26px !important;
}
    .ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit-button-common .ui-icon {
        width: 26px !important;
        height: 26px !important;
    }
        .ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit-button-common .ui-icon:before {
            top: 0 !important;
            left: 0 !important;
            padding: 7px !important;
            font-size: 12px !important;
            line-height: 12px !important;
        }

.ui-iggrid .ui-iggrid-results .ui-icon,
.ui-iggrid .ui-iggrid-results .ui-iggrid-pagesizedropdown,
.ui-iggrid .ui-iggrid-results .ui-igedit-container {
    height: 26px;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 12px;
    font-weight: 600;
}
.ui-igedit-container,
.ui-igedit-input,
.ui-iggrid .ui-iggrid-toolbar .ui-state-default {
    background: 0;
}
.ui-iggrid .ui-iggrid-toolbar .ui-state-default:hover {
    background: 0;
}
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit-button-common .ui-icon:before {
    color: #000000;
}
.ui-iggrid .ui-iggrid-results .ui-igedit-dropdown-button {
}
.ui-iggrid .ui-iggrid-paging .ui-igedit-input, .ui-iggrid .ui-iggrid-results .ui-igedit-input {
    font-weight: 600;
}
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results {
    margin-top: 0;
    height: 30px;
    margin-right: 5px;
}
    .ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results span {
        line-height: 20px; /*14px*/
        font-size: 14px;
        height: 30px;
        padding: 0; /*3px 9px*/ /*7px 9px*/
    }
.ui-iggrid .ui-iggrid-toolbar {
    padding: 10px;
}
    .ui-iggrid .ui-iggrid-toolbar .form-inline .form-group {
        padding: 0;
    }
.ui-iggrid .ui-iggrid-footer {
    padding: 10px;
}

    .ui-iggrid .ui-iggrid-footer .ui-iggrid-results {
        font-weight: 600;
        line-height: 20px;
        font-size: 12px;
        padding: 5px 0;
        margin: 0;
        /* ^^^ This text is for result in tables.. (in: RUMM -> zoeken) */
    }
    .ui-iggrid .ui-iggrid-paging .ui-iggrid-lastpage, .ui-iggrid .ui-iggrid-paging .ui-iggrid-nextpage {
        padding-right: 0;
    }

.ui-iggrid .ui-iggrid-addrow + .ui-iggrid-activerow td:first-child, .ui-iggrid .ui-iggrid-table > tbody > tr > td:first-child, .ui-iggrid .ui-iggrid-tablebody > tr > td:first-child, .ui-iggrid th.ui-iggrid-rowselector-class:first-child, .ui-iggrid thead .ui-iggrid-editingcell:first-child {
    border: 0;
}
.ui-iggrid .ui-iggrid-results .ui-icon,
.ui-iggrid .ui-iggrid-results .ui-iggrid-pagesizedropdown,
.ui-iggrid .ui-iggrid-results .ui-igedit-container { /* This is the pagination top-left in tables */
    height: 30px;
}


#content-wrapper #classlist .form-control {
    border-radius: 5px;
    /*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 {
        border-radius: 10px;
        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;
    border-radius: 10px;
}
.ui-iggrid .ui-iggrid-paging li {
    color: #000000;
    background-color: #FFFFFF;
    border: 2px solid #ced4da;
    border-radius: 10px;
}

.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-pagecurrent.ui-state-active {
    border: 2px solid #000000;
    border-radius: 10px;
    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;
}

/* Infragistics override */
.document-class-list-tree {
    table-layout: auto !important;
}
    .document-class-list-tree th span {
        font-weight: bold; /* bold is default */
    }
    .document-class-list-tree tr:focus, 
    .document-class-list-tree th:focus, 
    .document-class-list-tree td:focus, 
    .document-class-list-tree td span:focus {
        outline: none;
    }

.ui-state-active a, 
.ui-state-active a:link, 
.ui-state-active a:visited {
    text-decoration: none;
    font-weight: 600; /* this also affects paging in tables */
    color: #000000;
}
/* override infragistics table active, important needed */
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border: 1px solid #3c3c3c !important;
    background-color: #3c3c3c !important;
    color: #FFFFFF !important;
}
/* Override extra focus from infragistics.. */
.ui-state-focus, .ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: 1px solid #3c3c3c !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
}
.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 #3c3c3c !important;
}
.ui-iggrid tr.ui-state-focus td {
    /*border-top: 1px solid #000000 !important;
    border-bottom: 1px solid #000000 !important;*/
    border-top: 0 !important;
    border-bottom: 0 !important;
}
/* After that, override it for paging.. */
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-pagecurrent.ui-state-active {
    border: 2px solid #3c3c3c !important;
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border-radius: 10px;
}

/* ****************************** 
    Tables
****************************** */
.ui-iggrid td {
    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;
}

.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;
    border-radius: 0 10px 10px 0;
}
.ui-iggrid .ui-iggrid-paging .ui-igedit-input, .ui-iggrid .ui-iggrid-results .ui-igedit-input {
    background: 0;
}

.ui-iggrid .ui-iggrid-toolbar {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border-radius: 3px 3px 0 0;
}
.ui-iggrid .ui-iggrid-footer {
    background: #FFFFFF !important;
}

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


/* ****************************** 
    ui-iggrid-results (pagination top-left of table)
****************************** */
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results {
    background: 0;
    border: 0;
    border-color: none;
}
.ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results .ui-igedit {
    background: #FFFFFF !important;
    border: 2px solid #e6e9ed !important;
    color: #000000 !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: #000000 !important;
    }
    .ui-iggrid .ui-iggrid-toolbar .ui-iggrid-results:hover .ui-igedit {
        background-color: #000000 !important;
        border: 2px solid #000000 !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;
}

/* TABLES TableRow HOVER */
#content-wrapper .ui-iggrid .ui-iggrid-scrolldiv {
}
#content-wrapper .ui-iggrid .ui-iggrid-header, 
#content-wrapper .ui-iggrid table th {
    border-bottom: 1px solid #F0EFF4;
}
#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;
}

.ui-widget-content tr td.ui-state-hover,
.ui-widget-header tr td.ui-state-hover {
    background: grey !important; /* need !important for override infragistics */
    background-color: grey !important;
    border-color: grey !important;
    color: #FFFFFF !important;
}

.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-radius: 10px;
}
.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-radius: 10px;
}
.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-radius: 0 10px 10px 0;
}
.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-radius: 10px 0 0 10px;
}
.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-radius: 0 10px 10px 0;
}
.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-radius: 10px 0 0 10px;
}
.ui-iggrid .ui-iggrid-footer .ui-state-default.ui-igedit-button-common {
    border-radius: 0 7px 7px 0;
}
.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 {
    border-radius: 10px;
}
.ui-iggrid .ui-iggrid-paging li {
    border-radius: 10px;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-pagecurrent.ui-state-active {
    border-radius: 10px;
}

.ui-iggrid-pagesizedropdown:hover .ui-igedit-dropdown-button {
    border-radius: 10px;
}

#content-wrapper #classlist .form-control {
    border-radius: 5px;
}
    #content-wrapper .form-control#searchbox {
        border-radius: 10px;
    }

.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-pagecurrent.ui-state-active {
    border-radius: 10px;
}

.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 {
    border-radius: 10px;
}
.ui-iggrid .ui-iggrid-paging li {
    border-radius: 10px;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-pagecurrent.ui-state-active {
    border-radius: 10px;
}

.ui-iggrid .ui-iggrid-toolbar {
    border-radius: 10px 10px 0 0;
}
.ui-iggrid .ui-iggrid-footer {
    border-radius: 0 0 10px 10px;
}
.ui-iggrid .ui-iggrid-results .ui-igedit-dropdown-button {
    border-radius: 0 10px 10px 0;
}

/*****************************************
    Document Class Dashboards
*****************************************/
#classlist-dashboard-header,
#classlist-dashboard-footer {
    float: left;
    width: 100%;
    padding: 0 5px;
}

#content-wrapper #classlist-search-list #document-class-list-filters .form-control {
    border-radius: 10px !important;
}
div[data-topic-type-code='Dashboard'] .element-graph,
#content-wrapper div[data-topic-type-code='Dashboard'] section > .row > div > div.row.element-graph {
    margin: 0 0 10px 0 !important;
    /*margin-bottom: 10px !important;*/ /* CMS -> Feed development -> statistics -> Needed for vertical margin between 2 charts */
    /* ^^^ BUT this add's also margin-bottom to charts that don't need it (bijv: CMS -> facturatie) */
}
    #content-wrapper div[data-topic-type-code='Dashboard'] section > .row > div > div.row.element-graph:last-of-type,
    div[data-topic-type-code='Dashboard'] .element-graph:last-of-type {
        margin-bottom: 0 !important; /* wass outcommented.. but it's needed for: cms TSN -> inspectiebeheer -> click tr -> then click tr with data! (in the table under the charts) -> charts vertical in 1 column.. */
    }
    /* For RSD we use spacers in documents.. */
    .dbq-application-rsd #content-wrapper div[data-topic-type-code='Dashboard'] section > .row > div > div.row.element-graph {
        margin: 0 !important;
    }

#document-topics .dbq-column > .block {
    margin-top: 10px !important;
    border-radius: 10px;
}
    #document-topics .dbq-column > .block:nth-child(1) {
        margin-top: 0 !important;
    }
        #document-topics .dbq-column .block > div:first-child {
            height: 100%;
        }

/*
    Don't know why this is used.. but in dashboards (Module: projectmanagement -> click tr) its not working right

div[data-topic-type-code='Dashboard'] section > .row .flex-container > .dbq-column div[data-element-type="Header"] {
    margin: 20px 20px 0 20px !important;
    width: calc(100% - 40px) !important;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600 !important;
}
div[data-topic-type-code='Dashboard'] section > .row .flex-container > .dbq-column div[data-element-type="Text"] {
    margin: 10px 20px 20px 20px !important;
    width: calc(100% - 40px) !important;
}
*/
span.tile-project-subtitle,
span.tile-project-attr-title {
    font-size: 14px !important;
}

/*****************************************
    Document Class Function Buttons Popup
*****************************************/
.function-buttons-popup {
}
    .function-buttons-popup .function-buttons-container {
    }
        .function-buttons-popup .function-buttons-container .function-button-container {
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
        }

/*****************************************
    Classlist document builder
*****************************************/
#classlist #docbuilder {
    height:100%;
}
    #classlist #docbuilder #document-topics {
        max-height:calc(100% - 0px);
        overflow-y: auto;
    }

#document-topics div[data-topic-type-code="Dashboard"] {
    /*margin: 0 10px;*/  /* ON THIS NO MARGINS!! can be different everywhere*/
    /* ^^^ CMS -> TSN -> gebruikers & beveiliging, (here is 0 10px needed) */
    /* ^^^ COMMENT BART: RUMM -> maps (home) -> heeft geen margin nodig.. */
    /* ^^^ COMMENT BART: RUMM -> performance dashboard -> heeft geen margin nodig.. */
    /* ^^^ COMMENT BART: CMS -> USC -> facturatie -> heeft geen margin nodig.. wel margin bottom ofzo.. */
    /* ^^^ COMMENT BART: CMS -> USC -> Verkoop -> heeft geen margin nodig.. wel margin bottom ofzo.. */
}

a.dropdown-toggle {
    float: left; /* Needed! otherwise the container will disappear and the click will not be accurate */
}
.dropdown-toggle::after {
    display: none;
}

/* this class counts for -> (CUSTOM DROPDOWN (bootstrap) / MULTISELECT) .. BUT .. also for dropdown in topbar (profile) */
.dropdown-menu {
    font-size: 14px; /* Override _dropdown.scss */
}
#class-list-menu .dropdown-menu {
    min-width: 200px;
    padding: 0;
    left: inherit;
    right: 9px;
    top: 69px;
    margin: 0;
    white-space: nowrap;
    background-color: #FFFFFF;
    border: 0;
    border-radius: 10px;
}
    #class-list-menu .dropdown-menu > li {
        float: left;
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        padding: 0; /*13px 20px*/
        margin: 0;
    }
#content-wrapper .dropdown-menu li {
    margin-bottom: 5px;
}
#content-wrapper .dropdown-menu li:last-of-type {
    margin-bottom: 0;
}
#content-wrapper .dropdown-menu li:after {
    content: "";
    clear: both;
    display: table;
}
#classlist .document-class-list .dropdown-menu a, #classlist .document-class-list-tree .dropdown-menu a {
    width: 100%;
    /*padding: 7px 13px !important;*/
    float: left;
}

.form-inline {
    font-size: 14px;
    line-height: 14px;
    padding: 0;
}
#classlist .form-inline .form-control {
    height: 30px;
    border-radius: 10px;
}
    #classlist .document-class-list .row-button {
        border: none;
        font-size: 14px !important;
        line-height: 20px;
    }

/* Profile dropdown */
#class-list-menu .dropdown-menu .dbq-account-dropdown-divider {
    height: 1px;
    padding: 0;
    border: 0;
    background: #ced4da;
}

#class-list-menu .dropdown-menu li.username {
    background: 0;
    border: 0;
    border-bottom: 1px solid #ced4da;
    height: 50px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    padding: 15px;
    float: left;
    width: 100%;
    margin-bottom: 7px;
}
ul.dropdown-menu[data-has-version-number="false"] li.dropdown-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: none;
}
ul.dropdown-menu, ul.dropdown-menu[data-has-version-number="false"] { /*[data-has-version-number="false"] <-- when false, attr is not added*/
    padding-bottom: 7px; /*!important <--?????*/
    margin-bottom: 7px; /*!important <--?????*/
}
ul.dropdown-menu[data-has-version-number="true"] {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
    ul.dropdown-menu[data-has-version-number="true"] li.dropdown-header {
        margin-top: 7px !important;
        padding-top: 7px !important;
    }
#class-list-menu .dropdown-menu > li > a {
    float: left;
    padding: 7px 15px; /*0 15px 15px 15px*/
    font-size: 14px;
    line-height: 20px; /* RUMM -> in profile-dropdown it must be 20px */
    font-weight: 400;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
#class-list-menu .dropdown-header {
    font-size: 11px;
    line-height: 11px;
    padding: 15px !important;
    margin: 0;
}
#class-list-menu .dropdown-menu .dbq-account-dropdown-divider {
    margin: 7px 0 !important;
    height: 1px;
}

#dbq-navbar-right #class-list-menu .dropdown-menu {
    padding-bottom: 7px;
    margin-bottom: 7px;
}

/*****************************************
    Classlist window styling
*****************************************/
#classlist .classlist-window {
    float: left;
    width: 100%;
    height: 100%;
    padding-left: 0px; /* This will reset the default bootstrap padding */
    padding-right: 0px; /* This will reset the default bootstrap padding */
}

    #classlist .classlist-window .classlist-window-tabs {
        float: left;
        width: 100%;
    }

    #classlist .classlist-window .classlist-window-content {
        float: left;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        margin: 0 0 10px 0;
        /* default */
        /*border-right: 1px solid #d8d8d8;*/
    }
    /*#classlist .classlist-window .classlist-window-content .xl-document {
        margin: 10px;
        padding: 10px;
    }*/
.classlist-window {
    /*border-right: 1px solid #1A1E23;*/
}

#classlist[data-class-list-display-mode='2'] .classlist-window {
    height: auto;
}

/* Kanban boards with a bottom window should always use 50% height in order to be able to scroll inside a column on the kanban board. */
#classlist[data-class-list-display-mode='2'][data-top-class-list-mode='16'] .classlist-window {
    height: 50%;
}

/* 
    Kanban board toggle between top, both and bottom window
    View Mode:
    0 = Top window
    1 = Both windows
    2 = Bottom window
*/
/* Top window */
#classlist[data-top-class-list-view-mode='0'][data-class-list-display-mode='2'][data-top-class-list-mode='16'] .classlist-window[data-window-index='0'] {
    height: 100%;
}

    #classlist[data-top-class-list-view-mode='0'][data-class-list-display-mode='2'][data-top-class-list-mode='16'] .classlist-window[data-window-index='0'] #classlist-kanban-board .dbqdclkb-columns {
        
    }

#classlist[data-top-class-list-view-mode='0'][data-class-list-display-mode='2'][data-top-class-list-mode='16'] .classlist-window[data-window-index='1'] {
    display: none !important;
}

/* Bottom window */
#classlist[data-top-class-list-view-mode='2'][data-class-list-display-mode='2'][data-top-class-list-mode='16'] .classlist-window[data-window-index='0'],
#classlist[data-top-class-list-view-mode='2'][data-class-list-display-mode='2'][data-top-class-list-mode='16'] .classlist-window[data-window-index='1'] {
    height: auto;
}

    #classlist[data-top-class-list-view-mode='2'][data-class-list-display-mode='2'][data-top-class-list-mode='16'] .classlist-window[data-window-index='0'] #classlist-kanban-board .dbqdclkb-columns {
        display: none !important;
    }


/*****************************************
    Classlist TreeGrid styling
*****************************************/
#classlist .document-class-list-tree {
    width: 100% !important; /* Added 100% width to override table width calculation from infragistics */
    /* COMMENT BART: dit zorgt voor horizontale scrollbar in de tabel, maar dan heb je weer het scroll probleem, dat je niet kunt scrollen wanneer je muis op de tabel staat 
    max-width: 100%;
    overflow-x: auto !important;
    float: left;
    display: inline-block; */
}

/*#classlist .document-class-list-tree tr {
    cursor: pointer;
}*/

    #classlist .document-class-list-tree .row-button {
        font-size: 14px;
        line-height: 14px;
        font-weight: 500;
        /*padding: 3px 10px !important; <-- not for default.. */
    }

        #classlist .document-class-list-tree .row-button.row-button-large {
            font-size: 16px !important;
            line-height: 16px;
        }
    
        #classlist .document-class-list .row-button.disabled,
        #classlist .document-class-list-tree .row-button.disabled {
            cursor: not-allowed;
        }
        
        #classlist .document-class-list .row-button.disabled:hover,
        #classlist .document-class-list-tree .row-button.disabled:hover {
            color: #ccc !important;
        }

#classlist-tree-grid.classlist-container {
    /* COMMENT BART: float: left; <-- Is nodig voor goed uitgelijnde 100% table, maar in CMS -> COC.. zorgt dat iig voor de horizontale scrollbalk van 1 extra pixel.. */
    min-width: calc(100% - 20px);
    margin: 10px !important; /* <-- because much pages end without 10px spacing on bottom, not sure yet if this is the right solution.. */
    border-radius: 10px;
}
#classlist-dashboard-header div[data-element-type="Graph"] {
    background: #FFFFFF;
    border-radius: 10px;
}


div[type="graph"] {
    /*display: flex;
    min-height: 200px !important;*/
}
.dbq-graph-single, .dbq-graph-multiple {
    display: flex;
}
.dbq-no-data-available-container {
    float: left;
    width: 100%;
    height: 100%;
    padding: 10px;
    min-height: 300px;
    /* position: relative; */ /* Styling without this is good for RUMM.. */
    border-radius: 10px;
    /* default */
    background: #FFFFFF;
}
    .dbq-no-data-available-container .dbq-no-data-available-center {
        float: left;
        width: 100%;
        height: 140px;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin-top: 25px;
    }
    .dbq-no-data-available-container .dbq-no-data-available-image {
        float: left;
        width: 100%;
        text-align: center;
    }
    .dbq-no-data-available-container .dbq-no-data-available-text {
        float: left;
        width: 100%;
        min-height: 40px;
        padding: 10px 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        text-align: center;
    }

    .dbq-no-data-available-container .dbq-no-data-available-wrapper {
        float: left;
        width: 100%;
        height: 100%;
        min-height: 200px;
        position: relative;
    }

.dbq-no-data-chart-title {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    padding: 10px;
}

/*****************************************
    Classlist Toolbar Styling
*****************************************/

#classlist .classlist-toolbar-item {
    margin-right: 5px; /* Refresh button needs 5px, but somewhere 15px is needed..? or was that old style? */
    padding: 3px; /* Refresh/download button needs 3px in CMS, (somewhere needed 5px, probably because that buttons had no border..) */
    height: 30px;
}

    #classlist .classlist-toolbar-item.btn-group,
    #classlist .classlist-toolbar-item.btn-group:hover {
        background: 0 none;
        border: 0 none;
        color: transparent;
        padding: 0;
    }

        #classlist .classlist-toolbar-item.btn-group.classlist-view-mode svg {
            padding: 0;
            margin-top: -3px;
            margin-left: -2px;
        }

        #classlist .classlist-toolbar-item.btn-group .btn {
            border-radius: 0;
            height: 30px;
            line-height: 13px;
        }

            #classlist .classlist-toolbar-item.btn-group .btn:first-of-type {
                border-radius: 10px 0 0 10px;
                border-right: 0 !important;
            }

            #classlist .classlist-toolbar-item.btn-group .btn:last-of-type {
                border-radius: 0 10px 10px 0;
                border-left: 0 !important;
            }

/*****************************************
    Classlist TreeGrid cell styling
*****************************************/
#classlist .document-class-list-tree .select-type-value {
    white-space: nowrap;
}

    #classlist .document-class-list-tree .select-type-value .select-type-value-icon {
        display: inline-block;
        max-height: 20px;
        margin-right: 5px;
    }

    #classlist .document-class-list-tree .select-type-value .select-type-value-name {
        display: inline-block;
        padding-right: 20px;
    }

#classlist .document-class-list-tree .image-container {
    position: relative;
}
    #classlist .document-class-list-tree .image-container img {
    }
    #classlist .document-class-list-tree .image-container .icon-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 16px;
        height: 16px;
        text-align: center;
        display: none;
        pointer-events: none;
    }
        #classlist .document-class-list-tree .image-container .icon-container i {
            font-size: 12px;
            top: -2px;
        }
    #classlist .document-class-list-tree td.ui-state-hover .icon-container {
        display: block;
    }

#classlist .document-class-list-tree .image-container .icon-container {
    width: 20px;
    height: 20px;
}

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

.dcls-modal {

}

    .dcls-modal .dcls-modal-body {
        max-height: 500px;
        overflow-y: auto;
    }

        .dcls-modal .dcls-modal-body ul {
            padding: 10px 0;
        }

            .dcls-modal .dcls-modal-body ul li {
                cursor: pointer;
                padding: 10px 30px;
            }

                .dcls-modal .dcls-modal-body ul li div {
                    display: inline-block;
                    width: calc(100% - 50px);
                    margin-left: 10px;
                    padding: 0 10px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    vertical-align: bottom;
                }

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

                    .dcls-modal .dcls-modal-body ul li svg:last-of-type {
                        float: right;
                    }

/*****************************************
    DocumentClassListMode: Default
*****************************************/
#classlist-tree-grid {
    clear: both;
}

.classlist-container {
    /*padding: 60px 20px; <--- ???? */
    padding: 0 10px;
    margin: 10px 0 0 0;
    float: left;
    width: 100%; /* Needed for list in "Content beheer" (CMS) */
}
    .classlist-container .dbq-document-class-list-tree {
        margin-bottom: 10px;
        width: 100%; /* Needed for list in "Content beheer" (CMS) */
        border-radius: 10px;
    }

#classlist-top-buttons.classlist-container {
    padding: 0; /*padding: 10px 0 0 0; <--- Sometimes there are no buttons, so a padding/margin will cause unneeded spacing */
}
#classlist-tree-grid.classlist-container {
    padding: 0 !important;
    /*height: 100%; <--- COMMENT BART: dit pushed de grafieken helemaal naar beneden bij work development, maarja dit is wel nodig om loading screen netjes in het midden te krijgen (ofja dit is ook nog bij elke pagina anders..)*/
}
#classlist-top-buttons {
    clear: both;
    /*margin-top: 20px; <-- not possible.. cms lokaal -> modules -> bedrijfsmiddelen (if button bar is empty, extra padding/margin)*/
    margin-top: 0;
}
    #classlist-top-buttons button {
        margin: 10px 10px 0 0 !important;
    }

#classlist-tree-grid .document-class-list-tree .dcltg-column-color {
    float: left;
    position: relative;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px;
    margin-right: 5px;
}

    #classlist-tree-grid .document-class-list-tree .dcltg-column-color:after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        box-shadow: inset 0 0 1px rgb(0 0 0 / 50%);
    }

/*****************************************
    DocumentClassListMode: DashboardList
*****************************************/
#dashboard-list-container {
    padding: 0; /* 0 10px <-- not possible! in this div are other divs that count for sections with 10px margin */
}
    #dashboard-list-container .dashboard-list-item {
        float: left;
        width: 100%;
    }
        #dashboard-list-container .dashboard-list-item .dashboard-list-item-overlay-wrapper {
            float: right;
            position: relative;
            width: calc(100% - 20px);
            margin: 10px 10px 0 10px;
        }
            #dashboard-list-container .dashboard-list-item .dashboard-list-item-overlay-wrapper .dashboard-list-item-content {
                margin: 0 !important;
                width: 100% !important;
            }
            #dashboard-list-container .dashboard-list-item .dashboard-list-item-overlay-wrapper .dashboard-list-item-filters {
                margin: 0 0 10px 0 !important;
                width: 100% !important;
            }
            #dashboard-list-container .dashboard-list-item .dashboard-list-item-overlay-wrapper .dashboard-list-item-remove-overlay {
                display: none;
                text-align: center;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 999;
            }   
                #dashboard-list-container .dashboard-list-item .dashboard-list-item-overlay-wrapper .dashboard-list-item-remove-overlay span {
                    top: calc(50% - 75px);
                    font-size: 150px;
                }

.dashboard-list-add-button-container, .dashboard-list-remove-button-container {
    clear: both;
    /*margin-bottom: 15px;*/
    margin: 0 10px;
    padding-top: 10px;
}
    .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: " ";
        width: calc(50% - 110px);
        height: 1px;
        margin: 0;
        vertical-align: middle;
        display: inline-block;
    }
    .dashboard-list-add-button-container button, .dashboard-list-remove-button-container button {
        width: 220px;
        line-height: 20px;
        padding: 10px;
        margin: 0;
    }
        .dashboard-list-add-button-container button span, .dashboard-list-remove-button-container button span {
            line-height: 20px;
            font-size: 14px;
            font-weight: 500;
            padding: 0; /*2px 0*/
            float: left;
        }

            .dropup .dropdown-toggle::after {
                display: none !important;
            }
.dashboard-list-add-button-container .caret {
    margin-left: 0 !important;
}

    .dashboard-list-add-button-container .dropup {
        display: inline-block;
    }
    .dashboard-list-add-button-container .caret {
        margin-left: 4px;
    }

.dashboard-list-add-button-container .dropup .dropdown-menu {
    width: 220px;
}

#content-wrapper .dashboard-list-add-button-container .dropdown-menu li {
    padding: 5px;
    text-align: center;
}

/*****************************************
    DocumentClassListMode: TiledList
*****************************************/
#classlist-tiled-list {
    float: left;
    width: 100%;
}
    #classlist-tiled-list .document-class-list-tile-template-container {
        display: none;
    }
    #classlist-tiled-list .document-class-list-tile-count-container {
        position: absolute;
        right: 20px;
    }
    #classlist-tiled-list .document-class-list-tiles-load-more-button,
    #classlist-tiled-list .document-class-list-tiles-loading-indicator {
        text-align: center;
        width: 100%;
    }
        #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 {
            display: inline-block;
            font-size: 18px;
            padding: 10px 30px;
            /*transition: all 0.25s ease-out; <-- outcommented for dark/light switch */
            -webkit-font-smoothing: antialiased;
            cursor: pointer;
        }
    #classlist-tiled-list .document-class-list-tiles-load-button[data-type='1'] {
        font-size: 14px;
        cursor: pointer;
    }
        #classlist-tiled-list .document-class-list-tiles-load-button[data-type='1']:hover {
            text-decoration: none;
        }
        #classlist-tiled-list .document-class-list-tiles-load-more-button .document-class-list-tiles-load-button:hover > span:first-child {
            text-decoration: none;
        }
            #classlist-tiled-list .document-class-list-tiles-load-more-button .document-class-list-tiles-load-button span {
                text-decoration: underline;
            }

            #classlist-tiled-list .document-class-list-tiles-load-more-button .document-class-list-tiles-load-button i {
                display: block;
            }
            /* OLD with glyph..
                #classlist-tiled-list .document-class-list-tiles-loading-indicator a .glyphicon-refresh-animate {
                margin-right: 5px;
                -animation: glyphicon-refresh-animate1 .7s infinite linear;
                -webkit-animation: glyphicon-refresh-animate2 .7s infinite linear;
            }
                @-webkit-keyframes glyphicon-refresh-animate2 {
                    from { -webkit-transform: rotate(0deg); }
                    to { -webkit-transform: rotate(360deg); }
                }
                @keyframes glyphicon-refresh-animate1 {
                    from { transform: scale(1) rotate(0deg);}
                    to { transform: scale(1) rotate(360deg);}
                }*/
        #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 {
            font-size: 14px;
            line-height: 20px;
            font-weight: 500;
            text-decoration: none;
        }
                @-webkit-keyframes glyphicon-refresh-animate2 {
                    from { -webkit-transform: rotate(0deg); }
                    to { -webkit-transform: rotate(360deg); }
                }
                @keyframes glyphicon-refresh-animate1 {
                    from { transform: scale(1) rotate(0deg);}
                    to { transform: scale(1) rotate(360deg);}
                }
    #classlist-tiled-list .document-class-list-tile {
        margin-top: 80px;
        margin-bottom: 15px;
        padding: 0 30px;
    }
        #classlist-tiled-list .document-class-list-tile .flex-container {
            clear: both;
        }
        #classlist-tiled-list .document-class-list-tile .flex-container .flex-item-1,
        #classlist-tiled-list .document-class-list-tile .flex-container .flex-item-2,
        #classlist-tiled-list .document-class-list-tile .flex-container .flex-item-3,
        #classlist-tiled-list .document-class-list-tile .flex-container .flex-item-4,
        #classlist-tiled-list .document-class-list-tile .flex-container .flex-item-5,
        #classlist-tiled-list .document-class-list-tile .flex-container .flex-item-6,
        #classlist-tiled-list .document-class-list-tile .flex-container .flex-item-7,
        #classlist-tiled-list .document-class-list-tile .flex-container .flex-item-8,
        #classlist-tiled-list .document-class-list-tile .flex-container .flex-item-9,
        #classlist-tiled-list .document-class-list-tile .flex-container .flex-item-10,
        #classlist-tiled-list .document-class-list-tile .flex-container .flex-item-11,
        #classlist-tiled-list .document-class-list-tile .flex-container .flex-item-12 {
            overflow: hidden;
        }

#classlist-tiled-list .document-class-list-tile {
    border-radius: 3px;
}

/*****************************************
    DocumentClassListMode: SearchList 
*****************************************/
#classlist-search-list {
    float: left;
    width: 100%;
    /*height: calc(100% - 74px); <-- not needed anymore..? */
    height: calc(100% - 20px);
    overflow-y: hidden;
}

    #classlist-search-list .dbq-scrollbar::-webkit-scrollbar-track {
        cursor: pointer;
    }
    #classlist-search-list .dbq-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    #classlist-search-list .dbq-scrollbar::-webkit-scrollbar-thumb {
    }

    #classlist-search-list #classlist-filters {
        float: left;
        clear: both;
        width: 275px !important;
        margin: 0 !important;
        height: 100%;
        overflow-y: auto;
    }

        #classlist-search-list #classlist-filters .document-class-list-filter {
            float: left;
            clear: both;
            margin: 0 0 20px 0;
        }

            #classlist-search-list #classlist-filters .document-class-list-filter .checkbox .filter-select-type-image {
                width: 20px;
                height: 20px;
                float: left;
                margin: 0 6px 0 0;
            }

            #classlist-search-list #classlist-filters .document-class-list-filter .checkbox label input[type="checkbox"] {
                display: block;
                float: left;
            }
            #classlist-search-list #classlist-filters .document-class-list-filter .checkbox label .search-property-text {
                float: left;
            }
            #classlist-search-list #classlist-filters .document-class-list-filter .checkbox label .search-property-count {
                /*float: left; <-- with float the value is not floating */
                margin-left: 3px;
                font-size: 11px;
            }

            #classlist-search-list #classlist-filters .document-class-list-filter .checklist-container {
                float: left;
            }

        #classlist-search-list #classlist-filters .document-class-list-filter-title {
            cursor: pointer;
            font-weight: 600;
            padding: 5px 0 5px 0;
            margin: 0 0 15px 0;
            width: 100%;
        }

            #classlist-search-list #classlist-filters .document-class-list-filter-title .document-class-list-filter-icon {
                float: right;
                margin: 2px 0px 0 0;
            }

    #classlist-search-list .loading-container {
        float: left;
        width: 100px;
        height: 100px;
        z-index: 999;
        position: relative;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
    }
        #classlist-search-list .loading-container span {
            line-height: 300px;
            font-size: 24px;
            display: none;
        }

    #classlist-search-list #classlist-search-list-table {
        float: left;
        width: calc(100% - 285px);
        height: 100%;
        overflow-x: auto;
        overflow-y: auto;
        margin-left: 15px;
    }

        /* This class overrides an igTreeGrid class. It overrides the expand button container. 
            Since search lists should never use tree structures, the spacing which is reserved for the expand button is not allowed. 
            This override makes sure it won't use any spacing, but only for search lists. */
        #classlist-search-list #classlist-search-list-table .ui-igtreegrid-expandcell {
            margin: 0;
            min-width: 0;
        }

    #classlist-search-list #classlist-search-bar {
        float: left;
        margin-left: 275px;
    }
        
        #classlist-search-list #classlist-search-bar label {
            float: left;
            margin: 7px 15px 7px 0;
        }

        #classlist-search-list #classlist-search-bar .form-group {
            float: left;
            width: 450px;
        }

/*****************************************
    DocumentClassListMode: Matterport
*****************************************/
#classlist-matterport {
    padding: 10px;
    margin: 0;
}

/*****************************************
    DocumentClassListMode: Developer Tools
*****************************************/
#classlist.class-list-developer-tools {
}
#classlist-developer-tools {
    height: 100%;
    width: 100%;
    margin-top: 0 !important;
}
.class-list-developer-tools #dbq-document-class-list-breadcrumbs {
    display: none;
}
.class-list-developer-tools .classlist-container {
    padding: 0;
}

/* DbqDeveloperTools override */
.class-list-developer-tools #accordion-sidebar .card-body button {
    height: 50px;
}
#content select {
    padding: 6px 7px 7px !important;
}

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

#classlist-timeline.classlist-container {
    position: relative;
    border-radius: 10px;
    padding: 0;
    margin: 10px;
    width: calc(100% - 20px);
    overflow: hidden;
}

#classlist-timeline .dbqdcltl-toolbar {
    margin-left: 5px;
}

#classlist-timeline .period-header-picker {
    -webkit-flex: 1 0 auto;
    -moz-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

    #classlist-timeline .period-header-picker label {
        min-width: 80px;
    }

.mbsc-calendar-row:last-of-type .mbsc-calendar-day {
    border-bottom: 0px;
}

.dbqdcltl-context-menu {
    position: absolute;
    display: none;
    z-index: 1000;
}

    .dbqdcltl-context-menu .dbqdcltl-dropdown-menu {
        position: static;
        display: block;
        border-radius: 10px;
    }

        .dbqdcltl-context-menu .dbqdcltl-dropdown-menu.dropdown-menu {
            padding: 10px;
            border-radius: 10px;
        }

            .dbqdcltl-context-menu .dbqdcltl-dropdown-menu.dropdown-menu li {
                white-space: nowrap;
                padding: 5px 7px;
                margin: 0 0 3px 0;
                line-height: 20px;
                font-size: 12px;
                font-weight: 500;
                border-radius: 7px;
                background: transparent !important;
            }

                .dbqdcltl-context-menu .dbqdcltl-dropdown-menu.dropdown-menu li:last-of-type {
                    margin: 0;
                }

                .dbqdcltl-context-menu .dbqdcltl-dropdown-menu.dropdown-menu li a {
                    line-height: 20px;
                    padding: 5px 10px;
                }

        .dbqdcltl-context-menu .dbqdcltl-dropdown-menu a {
            height: 100%;
            width: 100%;
        }


    .dbqdcltl-context-menu .dbqdcltl-dropdown-menu.dropdown-menu li svg {
        float: left;
        display: inline-block;
        margin: 0 5px 0 0;
        padding: 2px;
    }

    .dbqdcltl-context-menu .dbqdcltl-dropdown-menu li svg {
        display: inline-block;
        margin: 0 10px 0 0;
    }

    .dbqdcltl-context-menu .dbqdcltl-dropdown-menu li:hover svg {
        fill: #fff;
    }

.mbsc-popup-wrapper {
    z-index: 1001; /* The default value of the mobiscroll popup is extremely high, making it so that these popups are always on top. We do not want these popups to appear above our folder document popups */
}

.dbqdcltl-schedule-event {
    background: #0054F0;
    color: #fff;
    height: 100%;
    border-radius: 5px;
    top: 1px;
    right: 1px;
    left: 1px;
    bottom: 1px;
    position: absolute;
}

    .dbqdcltl-schedule-event .dbqdcltl-schedule-event-tags {
        position: absolute;
        top: 8px;
        right: 5px;
    }

        .dbqdcltl-schedule-event .dbqdcltl-schedule-event-tags.dbqdcltl-schedule-event-tags-bottom {
            top: initial;
            bottom: 7px;
        }

        .dbqdcltl-schedule-event .dbqdcltl-schedule-event-tags .dbqdcltl-schedule-event-tag {
            padding: 3px 6px;
            border-radius: 5px;
        }

.mbsc-material.mbsc-schedule-event-hover .mbsc-schedule-event-background:after {
    top: 0;
}

.mbsc-material.mbsc-schedule-event-inner {
    color: inherit;
    height: 100%;
}

.mbsc-material.mbsc-calendar-controls {
    padding-top: 0;
}

/* Timeline Settings */
.dcltls-modal {

}

    .dcltls-modal .dcltls-modal-body {
        margin: 20px 30px;
    }

        .dcltls-modal .dcltls-modal-body .dbq-form-group-title-label {
            padding: 4px 10px;
            cursor: default;
        }

            .dcltls-modal .dcltls-modal-body .dbq-form-group-title-label span {
                cursor: default;
            }

        .dcltls-modal .dcltls-modal-body .form-group {
            margin-bottom: 10px;
        }

        .dcltls-modal .dcltls-modal-body .form-group select.form-control {
            background-color: #fff;
        }

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

#classlist-kanban-board {
    /*height: 100%; Removed height 100% here since that would cause the scrollbar to be displayed during the initial load when there are filters or top add buttons. After initial load the height will be automatically updated anyway. */
    margin: 0;
    padding: 0;
    border-radius: 10px;
}

.dbqdclkb-container {
    float: left;
    width: 100%;
    height: 100%;
}

    .dbqdclkb-container .dbqdclkb-toolbar {
        height: 50px;
        padding: 10px;
    }

        .dbqdclkb-container .dbqdclkb-toolbar .dbqdclkb-search {
            border-radius: 10px !important;
        }

    .dbqdclkb-container .dbqdclkb-columns {
        float: left;
        width: 100%;
        height: calc(100% - 50px); /* 50px is the toolbar height */
    }

        .dbqdclkb-container .dbqdclkb-columns .dbqdclkb-column {
            float: left;
            height: calc(100% - 10px); /* 10px is the bottom margin */
            max-width: 640px;
            margin: 0 10px 10px 10px;
        }

            .dbqdclkb-container .dbqdclkb-columns .dbqdclkb-column .dbqdclkb-column-title {
                height: 40px;
                padding: 10px 0;
                position: relative;
            }

                .dbqdclkb-container .dbqdclkb-columns .dbqdclkb-column .dbqdclkb-column-title .dbqdclkb-column-name {
                    color: #001323;
                    font-size: 14px;
                    font-weight: 600;
                    display: block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-right: 20px;
                }

                .dbqdclkb-container .dbqdclkb-columns .dbqdclkb-column .dbqdclkb-column-title .dbqdclkb-column-item-count {
                    position: absolute;
                    top: 8px;
                    right: 0;
                    color: #001323;
                    font-size: 12px;
                    padding: 2px 5px;
                    border-radius: 5px;
                    background: #eee;
                }

            .dbqdclkb-container .dbqdclkb-columns .dbqdclkb-column .dbqdclkb-column-items {
                height: calc(100% - 40px);
                overflow-x: hidden;
                overflow-y: auto;
            }

.dbqdclkb-item-placeholder {
    float: left;
    border: 2px dashed #545454;
    width: 100%;
    border-radius: 5px;
    margin-top: 10px;
}

.dbqdclkb-item {
    float: left;
    width: 100%;
    cursor: pointer;
    background: #f5f5f5;
    border-radius: 5px;
    border-left: solid;
    border-width: 5px;
    border-color: #c0c0c0;
    padding: 10px;
    margin-top: 10px;
    box-shadow: inset 0 -1px 1px #0003, 0 1px 1px #00000014;
}

    .dbqdclkb-item:first-of-type {
        margin: 0;
    }

    .dbqdclkb-item:last-of-type {
        margin-bottom: 10px;
    }

    .dbqdclkb-item .dbqdclkb-item-summary {
        float: left;
        width: 100%;
        overflow: hidden;
    }

        .dbqdclkb-item .dbqdclkb-item-summary span {
            color: #001323;
            font-size: 13px;
            font-weight: 600;
            line-height: 20px;
        }

    .dbqdclkb-item .dbqdclkb-item-tags {
        float: left;
    }

        .dbqdclkb-item .dbqdclkb-item-tags.dbqdclkb-item-tags-top {
            float: left;
            clear: both;
        }

        .dbqdclkb-item .dbqdclkb-item-tags.dbqdclkb-item-tags-bottom {
            float: right;
        }

    .dbqdclkb-item.ui-sortable-helper {
        -webkit-transform: rotate(2deg);
        -moz-transform: rotate(2deg);
        -o-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
        transform: rotate(2deg);
    }

.dbqdclkb-item-tag {
    float: left;
    background: #eee;
    color: #001323;
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 5px;
    margin: 0 5px 5px 0;
}

.dbqdclkb-context-menu {
    position: absolute;
    display: none;
    z-index: 1000;
}

    .dbqdclkb-context-menu .dbqdclkb-dropdown-menu {
        position: static;
        display: block;
        border-radius: 10px;
    }

        .dbqdclkb-context-menu .dbqdclkb-dropdown-menu.dropdown-menu {
            padding: 10px;
            border-radius: 10px;
        }

            .dbqdclkb-context-menu .dbqdclkb-dropdown-menu.dropdown-menu li {
                white-space: nowrap;
                padding: 5px 7px;
                margin: 0 0 3px 0;
                line-height: 20px;
                font-size: 12px;
                font-weight: 500;
                border-radius: 7px;
                background: transparent !important;
            }

                .dbqdclkb-context-menu .dbqdclkb-dropdown-menu.dropdown-menu li:last-of-type {
                    margin: 0;
                }

                .dbqdclkb-context-menu .dbqdclkb-dropdown-menu.dropdown-menu li a {
                    line-height: 20px;
                    padding: 5px 10px;
                }

        .dbqdclkb-context-menu .dbqdclkb-dropdown-menu a {
            height: 100%;
            width: 100%;
        }


        .dbqdclkb-context-menu .dbqdclkb-dropdown-menu.dropdown-menu li svg {
            float: left;
            display: inline-block;
            margin: 0 5px 0 0;
            padding: 2px;
        }

        .dbqdclkb-context-menu .dbqdclkb-dropdown-menu li svg {
            display: inline-block;
            margin: 0 10px 0 0;
        }

        .dbqdclkb-context-menu .dbqdclkb-dropdown-menu li:hover svg {
            fill: #fff;
        }


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

#classlist-workflow {
    height: calc(100% - 20px);
    margin: 0;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
}

.dbqdclw-container {
    height: 100%;
    --dfBackgroundColor: #ffffff;
    --dfBackgroundSize: 20px;
    --dfBackgroundImage: linear-gradient(to right, rgba(239, 239, 239, 1) 1px, transparent 1px), linear-gradient(to bottom, rgba(239, 239, 239, 1) 1px, transparent 1px);
    --dfNodeType: flex;
    --dfNodeTypeFloat: none;
    --dfNodeBackgroundColor: #ffffff;
    --dfNodeTextColor: #000000;
    --dfNodeBorderSize: 2px;
    --dfNodeBorderColor: #000000;
    --dfNodeBorderRadius: 5px;
    --dfNodeMinHeight: 30px;
    --dfNodeMinWidth: 160px;
    --dfNodePaddingTop: 10px;
    --dfNodePaddingBottom: 10px;
    --dfNodeBoxShadowHL: 0px;
    --dfNodeBoxShadowVL: 0px;
    --dfNodeBoxShadowBR: 0px;
    --dfNodeBoxShadowS: 0px;
    --dfNodeBoxShadowColor: rgba(0, 0, 0, 1);
    --dfNodeHoverBackgroundColor: rgba(239, 239, 239, 1);
    --dfNodeHoverTextColor: #000000;
    --dfNodeHoverBorderSize: 2px;
    --dfNodeHoverBorderColor: #000000;
    --dfNodeHoverBorderRadius: 4px;
    --dfNodeHoverBoxShadowHL: 0px;
    --dfNodeHoverBoxShadowVL: 0px;
    --dfNodeHoverBoxShadowBR: 0px;
    --dfNodeHoverBoxShadowS: 0px;
    --dfNodeHoverBoxShadowColor: #4ea9ff;
    --dfNodeSelectedBackgroundColor: rgba(239, 239, 239, 1);
    --dfNodeSelectedTextColor: rgba(0, 0, 0, 1);
    --dfNodeSelectedBorderSize: 2px;
    --dfNodeSelectedBorderColor: #000000;
    --dfNodeSelectedBorderRadius: 4px;
    --dfNodeSelectedBoxShadowHL: 0px;
    --dfNodeSelectedBoxShadowVL: 0px;
    --dfNodeSelectedBoxShadowBR: 0px;
    --dfNodeSelectedBoxShadowS: 0px;
    --dfNodeSelectedBoxShadowColor: rgba(0, 0, 0, 1);
    --dfInputBackgroundColor: #ffffff;
    --dfInputBorderSize: 2px;
    --dfInputBorderColor: #000000;
    --dfInputBorderRadius: 50px;
    --dfInputLeft: -27px;
    --dfInputHeight: 20px;
    --dfInputWidth: 20px;
    --dfInputHoverBackgroundColor: #ffffff;
    --dfInputHoverBorderSize: 2px;
    --dfInputHoverBorderColor: #000000;
    --dfInputHoverBorderRadius: 50px;
    --dfOutputBackgroundColor: #ffffff;
    --dfOutputBorderSize: 2px;
    --dfOutputBorderColor: #000000;
    --dfOutputBorderRadius: 50px;
    --dfOutputRight: -3px;
    --dfOutputHeight: 20px;
    --dfOutputWidth: 20px;
    --dfOutputHoverBackgroundColor: #ffffff;
    --dfOutputHoverBorderSize: 2px;
    --dfOutputHoverBorderColor: #000000;
    --dfOutputHoverBorderRadius: 50px;
    --dfLineWidth: 5px;
    --dfLineColor: #4682b4;
    --dfLineHoverColor: #4682b4;
    --dfLineSelectedColor: #43b993;
    --dfRerouteBorderWidth: 2px;
    --dfRerouteBorderColor: #000000;
    --dfRerouteBackgroundColor: #ffffff;
    --dfRerouteHoverBorderWidth: 2px;
    --dfRerouteHoverBorderColor: #000000;
    --dfRerouteHoverBackgroundColor: #ffffff;
    --dfDeleteDisplay: block;
    --dfDeleteColor: #ffffff;
    --dfDeleteBackgroundColor: #000000;
    --dfDeleteBorderSize: 2px;
    --dfDeleteBorderColor: #ffffff;
    --dfDeleteBorderRadius: 50px;
    --dfDeleteTop: -15px;
    --dfDeleteHoverColor: #000000;
    --dfDeleteHoverBackgroundColor: #ffffff;
    --dfDeleteHoverBorderSize: 2px;
    --dfDeleteHoverBorderColor: #000000;
    --dfDeleteHoverBorderRadius: 50px;
    --dfDisabledBackgroundColor: #ffffff;
    --dfDisabledBackgroundImage: linear-gradient(to right, rgba(239, 239, 239, 1) 1px, transparent 1px), linear-gradient(to bottom, rgba(239, 239, 239, 1) 1px, transparent 1px);
    --dfDisabledNodeBackgroundColor: #e5e7ec;
    --dfDisabledNodeTextColor: #000000;
    --dfDisabledNodeBorderColor: #666;
    --dfDisabledInputBackgroundColor: #e5e7ec;
    --dfDisabledInputBorderColor: #666;
    --dfDisabledOutputBackgroundColor: #e5e7ec;
    --dfDisabledOutputBorderColor: #666;
}

    .dbqdclw-container .dbqdclw-drawing-container {
        float: left;
        width: calc(100% - 250px);
        height: 100%;
    }

        .dbqdclw-container .dbqdclw-drawing-container .dbqdclw-node {
            position: relative;
        }

            .dbqdclw-container .dbqdclw-drawing-container .dbqdclw-node .dbqdclw-node-summary {
                font-weight: 500;
                font-size: 16px;
            }

            .dbqdclw-container .dbqdclw-drawing-container .dbqdclw-node .dbqdclw-node-button {
                position: absolute;
                right: 0;
                top: calc(50% - 12px);
                width: 25px;
                height: 25px;
                display: none;
            }

            .dbqdclw-container .dbqdclw-drawing-container .dbqdclw-node .dbqdclw-node-button svg {
                top: 0;
                left: 1px;
            }

        .dbqdclw-container .dbqdclw-drawing-container .dbqdclw-drawflow-node:hover .dbqdclw-node-button {
            display: block;
        }

        .dbqdclw-container .dbqdclw-drawing-container .dbqdclw-node .dbqdclw-node-tags {
            margin-top: 5px;
        }

            .dbqdclw-container .dbqdclw-drawing-container .dbqdclw-node .dbqdclw-node-tags .dbqdclw-node-tag {
                display: inline-block;
                background: #eee;
                color: #000;
                border-radius: 5px;
                padding: 1px 5px;
                margin-right: 5px;
                font-size: 12px;
            }

    .dbqdclw-container .dbqdclw-node-types-container {
        float: right;
        width: 250px;
        height: 100%;
        overflow-y: auto;
        background: transparent;
        border-left: 1px solid #eee;
    }

        .dbqdclw-container .dbqdclw-node-types-container .dbqdclw-node-type {
            padding: 10px;
            border-bottom: 1px solid #eee;
            font-weight: 500;
            cursor: pointer;
        }

        .dbqdclw-container .dbqdclw-node-types-container .dbqdclw-node-type svg {
            margin-right: 10px;
        }

#drawflow {
    background: var(--dfBackgroundColor);
    background-size: var(--dfBackgroundSize) var(--dfBackgroundSize);
    background-image: var(--dfBackgroundImage);
}

.drawflow .drawflow-node {
    display: var(--dfNodeType);
    background: var(--dfNodeBackgroundColor);
    color: var(--dfNodeTextColor);
    border: var(--dfNodeBorderSize) solid var(--dfNodeBorderColor);
    border-radius: var(--dfNodeBorderRadius);
    min-height: var(--dfNodeMinHeight);
    width: auto;
    min-width: var(--dfNodeMinWidth);
    padding-top: var(--dfNodePaddingTop);
    padding-bottom: var(--dfNodePaddingBottom);
    -webkit-box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
    box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
}

    .drawflow .drawflow-node:hover {
        background: var(--dfNodeHoverBackgroundColor);
        color: var(--dfNodeHoverTextColor);
        border: var(--dfNodeHoverBorderSize) solid var(--dfNodeHoverBorderColor);
        border-radius: var(--dfNodeHoverBorderRadius);
        -webkit-box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
        box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
    }

    .drawflow .drawflow-node.selected {
        background: var(--dfNodeSelectedBackgroundColor);
        color: var(--dfNodeSelectedTextColor);
        border: var(--dfNodeSelectedBorderSize) solid var(--dfNodeSelectedBorderColor);
        border-radius: var(--dfNodeSelectedBorderRadius);
        -webkit-box-shadow: var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
        box-shadow: var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
    }

    .drawflow .drawflow-node .input {
        left: var(--dfInputLeft);
        background: var(--dfInputBackgroundColor);
        border: var(--dfInputBorderSize) solid var(--dfInputBorderColor);
        border-radius: var(--dfInputBorderRadius);
        height: var(--dfInputHeight);
        width: var(--dfInputWidth);
    }

        .drawflow .drawflow-node .input:hover {
            background: var(--dfInputHoverBackgroundColor);
            border: var(--dfInputHoverBorderSize) solid var(--dfInputHoverBorderColor);
            border-radius: var(--dfInputHoverBorderRadius);
        }

    .drawflow .drawflow-node .outputs {
        float: var(--dfNodeTypeFloat);
    }

    .drawflow .drawflow-node .output {
        right: var(--dfOutputRight);
        background: var(--dfOutputBackgroundColor);
        border: var(--dfOutputBorderSize) solid var(--dfOutputBorderColor);
        border-radius: var(--dfOutputBorderRadius);
        height: var(--dfOutputHeight);
        width: var(--dfOutputWidth);
    }

        .drawflow .drawflow-node .output:hover {
            background: var(--dfOutputHoverBackgroundColor);
            border: var(--dfOutputHoverBorderSize) solid var(--dfOutputHoverBorderColor);
            border-radius: var(--dfOutputHoverBorderRadius);
        }

.drawflow .connection .main-path {
    stroke-width: var(--dfLineWidth);
    stroke: var(--dfLineColor);
}

    .drawflow .connection .main-path:hover {
        stroke: var(--dfLineHoverColor);
    }

    .drawflow .connection .main-path.selected {
        stroke: var(--dfLineSelectedColor);
    }

.drawflow .connection .point {
    stroke: var(--dfRerouteBorderColor);
    stroke-width: var(--dfRerouteBorderWidth);
    fill: var(--dfRerouteBackgroundColor);
}

    .drawflow .connection .point:hover {
        stroke: var(--dfRerouteHoverBorderColor);
        stroke-width: var(--dfRerouteHoverBorderWidth);
        fill: var(--dfRerouteHoverBackgroundColor);
    }

.drawflow-delete {
    display: var(--dfDeleteDisplay);
    color: var(--dfDeleteColor);
    background: var(--dfDeleteBackgroundColor);
    border: var(--dfDeleteBorderSize) solid var(--dfDeleteBorderColor);
    border-radius: var(--dfDeleteBorderRadius);
    line-height: 25px;
}

.parent-node .drawflow-delete {
    top: var(--dfDeleteTop);
}

.drawflow-delete:hover {
    color: var(--dfDeleteHoverColor);
    background: var(--dfDeleteHoverBackgroundColor);
    border: var(--dfDeleteHoverBorderSize) solid var(--dfDeleteHoverBorderColor);
    border-radius: var(--dfDeleteHoverBorderRadius);
}
    
.dbqdclw-container.dbqdclw-read-only {
}

    .dbqdclw-container.dbqdclw-read-only .dbqdclw-node-types-container {
        display: none;
    }

    .dbqdclw-container.dbqdclw-read-only .dbqdclw-drawing-container {
        width: 100%;
    }

    .dbqdclw-container.dbqdclw-read-only .drawflow-node {
        background: var(--dfDisabledNodeBackgroundColor);
        color: var(--dfDisabledNodeTextColor);
        border-color: var(--dfDisabledNodeBorderColor);
        cursor: default;
    }

        .dbqdclw-container.dbqdclw-read-only .drawflow-node .output {
            background: var(--dfDisabledOutputBackgroundColor);
            border-color: var(--dfDisabledOutputBorderColor);
            cursor: default;
        }

        .dbqdclw-container.dbqdclw-read-only .drawflow-node .input {
            background: var(--dfDisabledInputBackgroundColor);
            border-color: var(--dfDisabledInputBorderColor);
            cursor: default;
        }

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

.dbqdclf-container {
    float: left;
    clear: both;
    width: 100%;
    padding: 5px;
}

    .dbqdclf-container .dbqdclf-folder {
        background: #fff;
        padding: 10px;
        border-radius: 10px;
        min-height: 50px;
        cursor: pointer;
        font-weight: 600;
        -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: #000;
            width: 32px;
            height: 32px;
            margin-right: 10px;
        }

    .dbqdclf-container .dbqdclf-col {
        padding: 5px;
    }

/*! ========================================================================
 * Bootstrap Toggle: bootstrap-toggle.css v2.2.0
 * http://www.bootstraptoggle.com
 * ========================================================================
 * Copyright 2014 Min Hur, The New York Times Company
 * Licensed under MIT
 * ======================================================================== */
.checkbox label .toggle, .checkbox-inline .toggle {
    margin-left: -20px;
    margin-right: 5px
}
.toggle{position:relative;overflow:hidden}
.toggle input[type=checkbox]{display:none}
.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;-moz-user-select:none;-webkit-user-select:none} /*transition:left .35s;-webkit-transition:left .35s; <-- outcommented for dark/light switch*/
.toggle.off .toggle-group{left:-100%}
.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;}
.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;}
.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;}
.toggle.btn{min-width:59px;min-height:34px}
.toggle-on.btn{padding-right:24px}
.toggle-off.btn{padding-left:24px}
.toggle.btn-lg{min-width:79px;min-height:45px}
.toggle-on.btn-lg{padding-right:31px}
.toggle-off.btn-lg{padding-left:31px}
.toggle-handle.btn-lg{width:40px}
.toggle.btn-sm{min-width:50px;min-height:30px}
.toggle-on.btn-sm{padding-right:20px}
.toggle-off.btn-sm{padding-left:20px}
.toggle.btn-xs{min-width:35px;min-height:22px}
.toggle-on.btn-xs{padding-right:12px}
.toggle-off.btn-xs{padding-left:12px}

/* Toggle btn (keep refreshing) */
.toggle.btn {
    height: 30px !important;
    min-height: 30px !important;
    float: left;
    font-size: 12px;
    font-weight: 600;
    margin-right: 10px;
    /*margin-top: -3px;*/ /* Bij RUMM portal -> master data -> organisatie -> xlw -> johan cruijf -> product verzameling */
}
.toggle-on.btn {
    padding: 7px 15px 8px 7px !important;
}
.toggle-off.btn {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 5px 8px 10px !important; /* Dit is inspectiebeheer -> project -> escalaties .. padding: 3px; <-- ergens anders moest dit 3 zijn..*/
}
.checkbox-inline {
    padding: 0 10px 0 19px;
}

/*! ========================================================================
 * Bootstrap Glyphicon Spinners
 * https://bootsnipp.com/snippets/djeAk
 * ======================================================================== */
.glyphicon.fast-right-spinner{-webkit-animation:glyphicon-spin-r 1s infinite linear;animation:glyphicon-spin-r 1s infinite linear}.glyphicon.normal-right-spinner{-webkit-animation:glyphicon-spin-r 2s infinite linear;animation:glyphicon-spin-r 2s infinite linear}.glyphicon.slow-right-spinner{-webkit-animation:glyphicon-spin-r 3s infinite linear;animation:glyphicon-spin-r 3s infinite linear}.glyphicon.fast-left-spinner{-webkit-animation:glyphicon-spin-l 1s infinite linear;animation:glyphicon-spin-l 1s infinite linear}.glyphicon.normal-left-spinner{-webkit-animation:glyphicon-spin-l 2s infinite linear;animation:glyphicon-spin-l 2s infinite linear}.glyphicon.slow-left-spinner{-webkit-animation:glyphicon-spin-l 3s infinite linear;animation:glyphicon-spin-l 3s infinite linear}@-webkit-keyframes glyphicon-spin-r{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes glyphicon-spin-r{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes glyphicon-spin-l{0%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes glyphicon-spin-l{0%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}

/*! ========================================================================
 * Extra styling (bootstrap 4 + svg)
 * ======================================================================== */
#classlist-tiled-list .document-class-list-tiles-load-more-button .document-class-list-tiles-load-button {
    padding: 0;
}
#classlist-tiled-list .document-class-list-tile-count-container {
    position: relative;
    right: 0;
    float: right;
    margin-right: 5px;
    font-weight: 500;
}
#classlist-tiled-list .document-class-list-tiles-load-button {
    padding: 0;
    margin: 0 5px;
}
#classlist .classlist-toolbar-item {
    line-height: 30px !important;
    font-weight: 400;
}
button.classlist-toolbar-item {
    padding: 8px;
}

/* ****************************** 
********** Search list **********
****************************** */
#classlist-search-list {
    /*height: calc(100% - 53px);*/ /* <- this height should be used at RUMM -> zoeken */
    /*height: calc(100% - 125px); <- this height should be used at RUMM -> master data -> organisatie -> xlw -> johan cruijf -> bulk wijzigingen */
}
    #classlist-search-list #classlist-filters {
    }
        #classlist-search-list #classlist-filters #document-class-list-filters {
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        #classlist-search-list #classlist-filters .document-class-list-filter {
            margin: 0;
            width: 100%;
        }
        #classlist-search-list #classlist-filters .document-class-list-filter-title {
            cursor: pointer;
            font-size: 14px;
            line-height: 20px;
            font-weight: 500;
            padding: 10px;
            margin: 0;
            width: 100%;
        }
            #classlist-search-list #classlist-filters .document-class-list-filter-title .dbq-document-class-list-filter-title-text {
                float: left;
                width: calc(100% - 20px);
                height: 20px;
            }
        #classlist-search-list #classlist-filters .checkbox-container {
            padding: 5px 10px 10px 10px;
        }
    #classlist-search-list #classlist-search-list-table {
        margin-left: 10px;
        width: calc(100% - 285px);
    }

#content select {
    padding: 5px !important;
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    height: 30px;
}

/*****************************************
    DocumentClassListMode: Tree
*****************************************/
.dbq-document-class-list-tree {
    float: left;
    border-radius: 3px;
}
    .dbq-document-class-list-tree .dbqdclt-hidden {
        display: none;
    }
    .dbq-document-class-list-tree .dbqdclt-disabled {
        cursor: not-allowed;
        pointer-events: none;
        opacity: 0.8;
    }
    .dbq-document-class-list-tree .dbqdclt-tree {
        list-style: none;
        margin: 0; /*margin: 0 0 0 20px;*/
        padding: 0;
    }
        .dbq-document-class-list-tree .dbqdclt-tree li .dbqdclt-item {
            /*padding: 0 0 0 20px !important;*/
            /*margin-left: -20px;*/
        }
    .dbq-document-class-list-tree > .dbqdclt-tree:first-of-type {
        /*margin: 10px 10px 5px 10px;*/ /*margin: 0 10px 0 10px; <-- before contentBeheer tree list change */
        margin: 0;
    }
        .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object {
            line-height: 24px;
            position: relative;
            margin: 0 !important; /*margin: 0 0 5px 0 !important;*/ /*margin: 0 0 10px 0 !important; <-- before contentBeheer tree list change */
            width: 100%;
            float: left;
        }
            .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object:first-of-type {
                padding: 0; /*padding: 10px 10px 0 10px;*/
            }
            .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object:last-of-type {
                margin: 0 !important;
                /*border-bottom: 0 !important;*/
            }
            .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object[data-has-children="false"] .dbqdclt-arrow {
                opacity: 0;
            }
            .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-arrow {
                float: left;
                display: inline-block;
                width: 10px;
                height: 10px;
                margin: 10px 0 10px 5px;
            }
            .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dropdown {
                float: right;
                margin: 5px 0;
                width: 20px;
                height: 20px;
            }
            .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dropdown-toggle {
                opacity: 0;
            }
            .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dropdown a {
                height: 100%;
                width: 100%;
            }
            .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item {
                position: relative;
                padding: 0 5px;
            }
                .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item > a {
                    float: left;
                    display: inline-block;
                    width: calc(100% - 50px);
                    max-width: calc(100% - 50px);
                    /*padding: 7px 5px; <-- before tree changes (contentBeheer)*/
                    padding: 5px 10px;
                    line-height: 20px;
                    font-size: 12px;
                    font-weight: 500;
                }
                .dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-hover {
                    cursor: pointer;
                }

/*****************************************
    DocumentClassListMode: Tree
*****************************************/
.dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item {
    border-radius: 0;
}
/* Normal */
.dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object {
    border-radius: 0;
}
/* Hover & selected background */
.dbq-document-class-list-tree .dbqdclt-tree .dbqdclt-folder-document-object .dbqdclt-item.dbqdclt-selected {
    border-radius: 0px;
}
/* First & last styling */
.dbq-document-class-list-tree > .dbqdclt-tree > .dbqdclt-folder-document-object > .dbqdclt-item.dbqdclt-selected:first-of-type {
    border-radius: 10px 10px 0 0;
}
/*.dbq-document-class-list-tree .dbqdclt-folder-document-object:last-of-type .dbqdclt-item.dbqdclt-selected {
    border-radius: 0 0 10px 10px;
}*/

.dbqdclt-dropdown-menu {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%,-50%);
    border-radius: 10px;
}
    .dbqdclt-dropdown-menu.dropdown-menu {
        padding: 10px;
        border-radius: 10px;
    }
        .dbqdclt-dropdown-menu.dropdown-menu li {
            white-space: nowrap;
            padding: 5px 7px;
            margin: 0 0 3px 0;
            line-height: 20px;
            font-size: 12px;
            font-weight: 500;
            border-radius: 7px;
        }
            .dbqdclt-dropdown-menu.dropdown-menu li:last-of-type {
                margin: 0;
            }
            .dbqdclt-dropdown-menu.dropdown-menu li a {
                line-height: 20px;
                padding: 5px 10px;
            }
    .dbqdclt-dropdown-menu a {
        height: 100%;
        width: 100%;
    }

/* Classlist specific document styling (CUSTOM DROPDOWN (bootstrap) / MULTISELECT) */
#classlist .document-class-list .dropdown-menu a,
#classlist .document-class-list-tree .dropdown-menu a {
    border-radius: 3px;
}
#content-wrapper .form-inline {
    border-radius: 10px;
}


#classlist ul.dropdown-menu {
    padding: 10px;
}
#classlist ul.dropdown-menu li {
    margin: 3px;
    padding: 3px 6px;
    background: #f4f4f4;
}
#classlist .dropdown-menu > li {
    background-color: #FFFFFF;
}

/* ****************************** 
********** Checkbox (custom) **********
****************************** */
#classlist-search-list #document-class-list-filters .dbq-checkbox-container {
    float: left;
    width: 100%;
    margin: 5px 0 0 0;
}
    #classlist-search-list #document-class-list-filters .dbq-checkbox-container[data-visible=true]:last-of-type {
        margin: 0 !important;
    }
    #classlist-search-list #document-class-list-filters label.dbq-checkbox {
        display: block;
        position: relative;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        /* new */
        padding-left: 0;
        margin-bottom: 0;
        /*width: 20px;
        min-width: 20px;
        height: 20px; <-- no width or height possible otherwise the values are not clickable */
        float: left;
        width: 100%;
    }
        #classlist-search-list #document-class-list-filters label.dbq-checkbox input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }
.dbq-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
}
.dbq-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
#classlist-search-list #document-class-list-filters label.dbq-checkbox input:checked ~ .dbq-checkmark:after {
    display: block;
}
#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 #document-class-list-filters .dbq-checkbox-value {
    float: left;
    width: calc(100% - 20px);
    padding: 0 0 0 30px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    display: inline-block;
    white-space: nowrap;
}
#classlist-search-list #classlist-filters .document-class-list-filter-show-more {
    float: left;
    width: 100%;
    margin: 10px 0 0 0;
    font-weight: 500;
    cursor: pointer;
}
#classlist-search-list #classlist-filters .document-class-list-filter-show-more-icon {
    margin: 0 6px 0 0;
}
.document-class-list-filter .dbq-classlist-search-number {
    padding: 10px;
    margin: 0;
}
    .document-class-list-filter .dbq-classlist-search-number .col-xs-4 {
        padding: 0;
        margin: 0;
        width: calc(100% / 3);
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        font-weight: 500;
        height: 30px;
    }

/*****************************************
    Document Class List Breadcrumbs
*****************************************/
#dbq-document-class-list-breadcrumbs {
    border-bottom: 1px solid #d8d8d8;
    /*padding: 20px 20px 0 20px;*/
}

/*****************************************
    Document Class List Filters
*****************************************/
#classlist-filters {
}
#document-class-list-filters {
    display: block;
    float: left;
    clear: both;
    width: 100%;
}
    #document-class-list-filters .document-class-list-filter-column {
        float: left;
    }
        #document-class-list-filters .document-class-list-filter-column .document-class-list-filter {
            clear: both;
        }
            #document-class-list-filters .document-class-list-filter-column .document-class-list-filter:first-of-type {
                clear: none;
            }

    #document-class-list-filters .document-class-list-filter {
        float: right;
        margin: 0 15px 20px 0;
        padding: 0 !important;
        /*min-height: 56px;*/ /* this min-height is important otherwise checkboxes (with label) will not float right */
    }
        #document-class-list-filters .document-class-list-filter .form-group {
            margin-bottom: 0 !important;
        }
    #document-class-list-filters.document-class-list-filters-left {
        padding: 0; /*0 20px*/
    }
        #document-class-list-filters.document-class-list-filters-left .document-class-list-filter {
            float: left;
        }

    #document-class-list-filters .document-class-list-filter .form-group {
        padding: 0 !important;
    }

/* ****************************** 
    BS4
****************************** */
.document-class-list-tiles-container {
    width: 100%;
}
    .document-class-list-tiles-container .col-lg-3, .document-class-list-tiles-container .col-md-4, .document-class-list-tiles-container .col-sm-6 {
        /*float: left;*/
        display: inline-block;
    }

#document-class-list-filters {
    width: 100%;
    margin: 0;
    /*margin: 0 10px 10px 10px; */ /* Bij CMS -> COC -> heeft de classlist iig een margin bottom nodig.. */
    border-radius: 10px;
    /* Default */
    background: #FFFFFF;
}
    #document-class-list-filters .document-class-list-filter {
        margin: 10px 10px 0 0; /*0 0 20px 10px
        height: 52px; <-- can not have a height, for the dropdown in RUMM, with the search posibilities */
        padding: 0; /*6px 2px 2px 2px*/
        border-radius: 10px;
        /* Default */
        background: #FFFFFF;
        border: 2px solid transparent;
        border: 0; /* this was in light style, so this hsould be default i guess? */
    }

.document-class-list-filters-left .document-class-list-filter {
    margin: 10px 0 0 10px !important;
}
#document-class-list-filters .document-class-list-filter label {
    margin: 0;
    padding: 0; /*0 2px 5px 5px*/
    float: left;
}
div[data-has-icon="false"] .dbq-checkbox-label-filters, 
div[data-has-icon="true"] .dbq-checkbox-label-filters,
#document-class-list-filters label {
    /*margin-bottom: 5px;*/
    font-weight: 500;
    font-size: 12px; /*!important <-- DONT use important here..*/
    line-height: 14px; /*!important <-- DONT use important here..*/ /* something needed 12px, but 14px is not needed for the checkboxes in #classList-filters*/
    min-width: 30px;
    position: relative;
}
#classlist-filters #document-class-list-filters label {
    line-height: 14px; /*!important <-- DONT use important here..*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
    #document-class-list-filters .document-class-list-filter-column {
        margin-right: 10px;
    }
#document-class-list-filters.document-class-list-filters-left {
    padding: 0 0 10px 0; /*10px*/ /*padding: 20px; <- padding 10px for RUMM filters under maps */ /*20px 0 0 20px <- CMS -> XLSYSTEM -> tijdregistratie -> the filters need this padding */
}
#document-class-list-filters .document-class-list-filter .filter-boolean-icon {
    float: left;
    display: inline-block;
    /*padding-right: 10px;*/
    width: 10px;
    height: 10px;
    padding: 0;
    margin: 10px 5px;
}
    #document-class-list-filters.document-class-list-filters-left .document-class-list-filter {
        float: left;
        /*height: 50px; <-- can not have a height */
        margin-bottom: 0;
    }
.document-class-list-filter.checkbox {
    border: 2px solid #ced4da !important;
}
#document-class-list-filters .document-class-list-filter .cr {
    float: left;
    width: 20px;
    height: 20px !important;
    /*margin: 0; For filters 5px is needed.. (at least for ContentBeheer) */
    margin: 5px;
    /* clear:both is important for .checkbox-bottom */
    clear: both;
    /* For this checkboxes it should be 2px border in default styling (just like te other filters..) */
    border: 2px solid #ced4da;
}
    #document-class-list-filters .document-class-list-filter.checkbox-bottom .cr {
        margin: 0; /* for default styling there should be no margin */
    }

#document-class-list-filters label input[type="checkbox"] + .cr > .cr-icon,
#document-class-list-filters .checkbox label input[type="checkbox"] + .cr > .cr-icon {
    opacity: 0;
    transform: scale(3) rotateZ(-20deg);
}
#document-class-list-filters label input[type="checkbox"]:checked + .cr > .cr-icon,
#document-class-list-filters .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon {
    opacity: 1;
    transform: scale(1) rotateZ(0deg);
}

    #document-class-list-filters .document-class-list-filter input.form-control {
        height: 34px;
    }
    #classlist-dashboard-header, #classlist-dashboard-footer {
        padding: 0;
        width: calc(100% - 20px);
    }

div[data-has-icon="false"] .dbq-checkbox-label-filters, 
div[data-has-icon="true"] .dbq-checkbox-label-filters {
    float: left;
    /*clear: both;*/
    margin: 0; /*!important <-- if this needs important.. then another stylesheet! */
    padding: 0 2px 5px 5px; /*!important <-- if this needs important.. then another stylesheet! */
    /*font-weight: 600;
    font-size: 12px;
    line-height: 14px; <-- before re-structuring.. */
}
div[data-has-icon="false"] .dbq-checkbox-label-filters {
    width: calc(100% - 30px);
}
div[data-has-icon="true"] .dbq-checkbox-label-filters {
    width: calc(100% - 50px);
}
.dbq-checkbox-filters {
    float: left;
    padding: 0 !important;
}

#classlist-top-buttons {
    width: calc(100% - 20px) !important;
    margin: 0 10px !important; /* buttons also have a padding */
}
/*#classlist-top-buttons,*/
#classlist-filters {
    width: calc(100% - 20px) !important;
    margin: 0 10px !important;
    float: left;
}
#classlist-dashboard-header,
#classlist-dashboard-footer,
#classlist-tree-grid,
#classlist-kanban-board,
#classlist-workflow,
.classlist-dashboard,
.dashboard-list-item-filters,
.dashboard-list-item-content {
    width: calc(100% - 20px) !important; /* this sections should all have the same width */
    margin: 10px 10px 0 10px !important; /* this sections should all have the same margin! */
    float: left;
}
#classlist-dashboard-header {
    padding: 0; /* 0 10px <-- removed, in "verkoop" it's 2x, (the 4 big titles) */
    border-radius: 10px;
}
#classlist .classlist-toolbar-item {
    font-size: 12px;
    line-height: 28px;
    float: left;
}

/*****************************************
    Custom checkbox 
*****************************************/
.document-class-list-filter.checkbox {
    padding: 2px !important;
}
    .document-class-list-filter.checkbox label.dbq-checkbox-filters {
        float: left;
        width: auto; /* this cant be "30px" .. sometimes (RUMM) an image is next to the checkbox */
    }
    .document-class-list-filter.checkbox span.dbq-checkbox-label-filters {
        float: left; /* this cant be "right" .. sometimes (RUMM) an image is next to the checkbox */
        /*width: calc(100% - 50px);*/
        padding: 8px 10px 8px 5px; /*!important <-- should not be important <-- THEN POSITION IT IN ANOTHER STYLESHEET */
    }
.document-class-list-filter.checkbox-bottom label.dbq-checkbox-filters {
    float: left;
    width: 100%;
    padding: 0 !important;
}

.document-class-list-filter.checkbox-bottom span.dbq-checkbox-label-filters, .document-class-list-filter label {
    /*float: left; <-- float causes the empty spacing of a repositioned checkbox */
    width: 100%;
    padding: 0;
    /*padding: 0 0 3px 0 !important;*/ /*3px 5px !important <-- for Dynabloqs.css*/
}
#classlist-search-list .document-class-list-filter label {
    width: auto; /*width: 100%;*/
    padding: 0 !important; /*3px 5px <-- this padding is not possible, searchlist filters (rumm, zoeken) needs no padding */
}
    .document-class-list-filter.checkbox-bottom label:after {
        content: '';
        display: table;
        clear: both;
    }
.document-class-list-filter.checkbox-bottom .cr .cr-icon {
    /*position: absolute;*/
    font-size: .8em;
    line-height: 0;
    /*top: 50%;
    left: 20%;*/
}
.document-class-list-filter.checkbox-bottom label input[type="checkbox"] {
    display: none;
}

/* ****************************** 
    Checkbox (custom)
****************************** */
.document-class-list-filter.checkbox-bottom .cr {
    border-radius: 5px;
}
.document-class-list-filter.checkbox-bottom label.dbq-checkbox-filters {
    border-radius: 7px;
}
.document-class-list-filter label {
    border-radius: 5px 5px 0 0;
}
.document-class-list-filter.checkbox-bottom span.dbq-checkbox-label-filters {
    border-radius: 5px 5px 0 0;
}

#classlist-search-list #document-class-list-filters label.dbq-checkbox {
    border-radius: 3px;
}
.dbq-checkmark {
    border-radius: 3px;
}

/* ****************************** 
    toggle switch (2 versions: bulk changes (bulkwijzigingen), keep refreshing (blijf verversen)(Refresh infinite))
****************************** */
/* toggle (bulk changes) */
#classlist div[data-is-multiselect="true"] .classlist-toolbar-item.checkbox-inline {
    font-size: 12px;
    font-weight: 500 !important;
    line-height: 20px !important; /* <-- this is affecting (bulk-changes toggle in RUMM master data -> 2x 1st table row click -> product verzameling)*/
}
#classlist .checkbox-inline.classlist-toolbar-item.classlist-toolbar-item-infinite-refresh {
    padding: 5px 0 !important;
}

/*
    This is 1 of the differences between "Keep refreshing" & "Bulk changes"
    - "Keep refreshing / infinite refresh" needs a margin-top
*/
.checkbox label .toggle,
.checkbox-inline .toggle {
    margin-left: -5px !important;
    margin-top: -3px !important;
    margin-right: 5px;
}
.checkbox-inline.classlist-toolbar-item-infinite-refresh .toggle {
    margin-top: -6px !important;
}
/*! ========================================================================
 * Bootstrap Toggle: bootstrap-toggle.css v2.2.0

======================================================================== !*/
.toggle-on{border-radius:0}
.toggle-off{border-radius:0}

/* Toggle btn (keep refreshing) */
.toggle.btn {
    border-radius: 3px;
}
.toggle-group span.toggle-handle {
    border-radius: 0 !important;
}

/* ****************************** 
    BS4
****************************** */
.modal #document-topics .checkbox {
    border-radius: 0 0 10px 10px; /*5px 5px 10px 10px <-- when should a checkbox ever have 5px radius????*/
}

.modal #document-topics .dbq-no-file-found {
    border-radius: 0 0 10px 10px;
}

/* 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 {
    border-radius: 10px;
}
    .modal form[data-view-mode="View"] #document-topics .dbq-form-group .checkbox label {
        border-radius: 0 0 10px 10px;
    }
    .modal form[data-view-mode="View"] #document-topics .dbq-form-group label.dbq-label-disabled {
        border-radius: 5px 5px 0 0;
    }
.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 {
    border-radius: 0;
}
#document-topics .dbq-form-group,
#document-topics .dbq-form-group-padding,
#document-topics .dbq-form-group-no-padding {
    border-radius: 0 0 10px 10px;
}

/* Checkbox filters */
#document-class-list-filters .document-class-list-filter {
    border-radius: 10px;
}

/* ****************************** 
    Radio box (custom)
****************************** */
.radio-list-control, .checkbox-list-control {
    width: 100%;
    float: left;
}
#document-topics .dbq-radio-container {
    /*margin: 0 0 5px 0;*/
}
    #document-topics .dbq-radio-container label.dbq-radio {
        float: left;
        width: 100% !important; /*20px*/
        height: 20px;
        margin: 5px;
        padding: 0;
        display: block;
        position: relative;
        padding-left: 0;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    #document-topics .dbq-radio-container label.dbq-radio input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }
.dbq-radiobox-value {
    float: left;
    width: calc(100% - 30px);
    margin-left: 30px;
}
.dbq-radiomark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
}
.dbq-radiomark:after {
    content: "";
    position: absolute;
    display: none;
}
#document-topics .dbq-radio-container label.dbq-radio input:checked ~ .dbq-radiomark:after {
    display: block;
}
#document-topics .dbq-radio-container label.dbq-radio .dbq-radiomark:after {
    left: 5px;
    top: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}
#document-topics .dbq-radio-container .dbq-radiobox-value span {
    float: left;
    width: 100%;
    padding: 0; /*5px*/
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
}
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
    margin: 0;
}

/* ****************************** 
********** Radio box (custom) **********
****************************** */
.radio-list-control, .checkbox-list-control {
    border-radius: 0 0 10px 10px;
}
.dbq-radiomark {
    border-radius: 50%;
}
#document-topics .dbq-radio-container label.dbq-radio .dbq-radiomark:after {
    border-radius: 50%;
}


/* ************************************************************
    Loading spinner
************************************************************ */
.loading-view {
    border-radius: 10px;
    background-color: #e6e9ed;
}
.dbq-loading-spinner-container {
    width: 100%;
    height: 100%;
    float: left;
    z-index: 999;
    border-radius: 10px;
    background: #FFFFFF;
}
    .modal .dbq-loading-spinner-container {
        border-radius: 0 0 10px 10px;
    }
.dbq-loading-spinner {
    float: left;
    width: 100px;
    height: 100px;
    z-index: 999;
    position: relative;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /* Dynabloqs logo */
    background: url(/DbqLibraries/DbqDeveloperTools/img/dbq-logo-gif-light.gif);
    background-repeat: no-repeat;
    background-size: 100px 100px;
}

/* ************************************************************
    Loading spinner
************************************************************ */
/*.dbq-application-rumm .dbq-loading-spinner {
    background: url(/DbqLibraries/DbqDeveloperTools/img/cirdax-logo-gif.gif);
    background-repeat: no-repeat;
    background-size: 100px 100px;
}*/
.dbq-loading-spinner-container {
    border-radius: 10px;
}
    .modal .dbq-loading-spinner-container {
        border-radius: 0 0 10px 10px;
    }

/*
    Modal full screen button
*/
.modal-fullscreen-button,
.modal-fullscreen-button:focus {
    float: right;
    background: 0 none;
    border: 0 none;
    outline: 0 none;
}

.modal-fullscreen {
    min-width: calc(100% - 60px) !important;
}

/* ************************************************************
    RUMM / Cirdax
************************************************************ */
#classlist-tiled-list {
    margin: 10px 10px 0 10px;
    width: calc(100% - 20px);
}

#classlist-tiled-list .flex-container span.ellipsis,
#classlist-tiled-list .flex-container p.ellipsis {
    margin-bottom: 0px !important;
    margin-top: 0 !important;
}

    #classlist-tiled-list .document-class-list-tiles-load-more-button .document-class-list-tiles-load-button {
        padding: 0;
    }
#classlist-tiled-list .document-class-list-tile-count-container {
    position: relative;
    right: 0;
    float: right;
    margin-right: 5px;
    margin-bottom: 30px;
    width: 100%;
    text-align: center;
}

#classlist-tiled-list .document-class-list-tiles-load-button {
    padding: 0;
    margin: 0 5px;
}

.embedded-map {
    margin-bottom: 0 !important;
}

#document-class-list-filters {
    margin-top: 10px;
    padding: 0 0 10px 0;
}
.dbq-application-rumm .document-class-list-tiles-container {
    width: 100%;
}
.dbq-application-rumm .document-class-list-tiles-container .col-lg-3, .dbq-application-rumm .document-class-list-tiles-container .col-md-4, .dbq-application-rumm .document-class-list-tiles-container .col-sm-6 {
    padding-left: 5px;
    padding-right: 5px;
    /*float: left;*/
}
.dbq-application-rumm .tab-content #document-class-list-filters {
    /*margin-bottom: 25px;*/
}
.dbq-application-rumm #classlist-tiled-list .document-class-list-tiles-load-more-button, .dbq-application-rumm #classlist-tiled-list .document-class-list-tiles-loading-indicator {
    width: 100%;
    float: left;
}

#document-class-list-filters,
#classlist-dashboard-footer,
#classlist-tree-grid,
.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;
}

/*! ========================================================================
 * Extra styling (bootstrap 4 + svg)
 * ======================================================================== */
#classlist-tiled-list .document-class-list-tiles-load-button {
    border-radius: 3px;
}
#classlist .classlist-toolbar-item {
    border-radius: 3px;
}
/* ************************************************************
    RUMM / Cirdax
************************************************************ */
#classlist-tiled-list .document-class-list-tile {
    border-radius: 3px;
}
#classlist-tiled-list .document-class-list-tiles-load-button {
    border-radius: 3px;
}
#document-class-list-filters {
    border-radius: 10px;
}

/* ******************************
    Timeline 
****************************** */
#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 {
    float: right;
    padding: 0 !important;
    margin: 0 !important;
}

.fc-timeline-event .dropdown .dropdown-menu {
    position: relative;
    z-index: 1000;
}

/*.fc .fc-scrollgrid-section > td {
    border: 0;
}*/
.fc-datagrid-cell-frame {
    float: left;
}
.fc .fc-datagrid-cell-cushion {
    padding: 5px;
    float: left;
    width: 100%;
    text-align: left;
}
.fc-timeline-event-harness {
}
.fc .fc-resource-timeline-divider {
    width: 0px;
}
.fc-direction-ltr .fc-timeline-slot {
    border-bottom: 0 !important;
}

.fc-event {
    height: 30px !important;
}

.fc-datagrid-body td.fc-datagrid-cell,
.fc-scrollgrid-sync-table td.fc-timeline-lane {
    padding: 3px 0;
}

.table-bordered td {
    border-top: 0;
}
.table-bordered thead td,
.table-bordered thead th {
    /*border-bottom: 0;*/
    border-bottom-width: 1px;
}

.fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk .btn-group {
    /*border: 2px solid #004ad4 !important;*/
    border-radius: 10px;
}
    .fc .fc-toolbar.fc-header-toolbar {
        margin-bottom: 10px;
    }
        .fc .fc-toolbar.fc-header-toolbar button.btn-primary,
        .fc .fc-toolbar.fc-header-toolbar button.btn-primary:enabled {
            padding: 3px 10px !important;
            /*margin-right: 3px;*/
            border: 0 !important;
            border-right: 1px solid #000 !important;
        }
        .fc .fc-toolbar.fc-header-toolbar button:last-of-type {
            margin-right: 0;
        }

.fc .fc-toolbar-title {
    font-size: 14px;
}

#classlist-timeline.fc .fc-view-harness {
    border-radius: 10px;
}

#classlist-timeline.fc .fc-timeline table.table-bordered {
    border-radius: 10px;
}
.fc-list,
.fc-timegrid table.table-bordered,
.fc-daygrid table.table-bordered {
    border-radius: 10px;
}
.fc .fc-list-empty {
    border-radius: 10px;
}

/*****************************************
    Class list image modal dialog styling
*****************************************/
@media (min-width: 576px) {
    #classlist-image-modal .modal-dialog {
        max-width: 500px;
    }
}
@media (min-width: 992px) {
    #classlist-image-modal .modal-dialog {
        max-width: 800px;
    }
}
@media (min-width: 1200px) {
    #classlist-image-modal .modal-dialog {
        max-width: 1140px;
    }
}

#classlist-image-modal .modal-dialog {
    width: fit-content;
    max-width: calc(100% - 60px);
}

.modal-dialog-loading {
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

/*****************************************
    Content
*****************************************/
#content {
    height: 100%;
    float: left;
}

#dbq-content-container .tab-pane #classlist.active {
    padding: 0;
}
    #dbq-content-container .tab-pane #classlist.active .dbq-no-data-available-container {
        margin: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
    }

#dbq-content-container .tab-pane {
    float: left;
    min-height: 100% !important;
    height: 100%;
    width: 100%;
    padding: 0;
}

    #dbq-content-container .tab-pane {
        height: 100%;
        padding: 0; /* this can't have a padding */
    }

    #dbq-content-container .tab-content {
        float: left;
        height: 100%;
        width: 100%;
        /* ^^^ above is important for developer tools */
        overflow: auto;
        max-height: -moz-calc(100% - 86px);
        max-height: -webkit-calc(100% - 86px);
        max-height: calc(100% - 86px);
    }