body {
    background: #F5F7F9;
    border: 0; /* Base (scroll fix) */
}
#content-wrapper hr {
    border-top: 1px solid #e5e7ec;
}
#content-wrapper .btn.active.focus, #content-wrapper .btn.active:focus, #content-wrapper .btn.focus, #content-wrapper .btn:active.focus, #content-wrapper .btn:active:focus, #content-wrapper .btn:focus {
    outline: 0;
    outline: none;
    background-image: none;
    -webkit-box-shadow: none;m
    -moz-box-shadow: none;
    box-shadow: none;
}
#content-wrapper .btn-primary:not(:disabled):not(.disabled).active:focus, #content-wrapper .btn-primary:not(:disabled):not(.disabled):active:focus, #content-wrapper .show > .btn-primary.dropdown-toggle:focus {
    outline: 0;
    outline: none;
    background-image: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
#content-wrapper *:hover {
    -webkit-transition: none;
    -o-transition: none;
    -moz-transition: none;
    transition: none;
}

/* ****************************** 
    Scroll
****************************** */
/*
    (body background)
    Background:     #F5F7F9
    Width:          14px
*/
.modal ::-webkit-scrollbar-track, #navigator::-webkit-scrollbar-track, #wrapper ::-webkit-scrollbar-track, #dbq-notification-center .dbqnc-item-list::-webkit-scrollbar-track, .tab-content::-webkit-scrollbar-track, #content::-webkit-scrollbar-track, .classlist-window-content::-webkit-scrollbar-track {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    background-color: #F5F7F9 !important;
}
.modal ::-webkit-scrollbar, #navigator::-webkit-scrollbar, #wrapper ::-webkit-scrollbar, #dbq-notification-center .dbqnc-item-list::-webkit-scrollbar, .tab-content::-webkit-scrollbar, #content::-webkit-scrollbar, .classlist-window-content::-webkit-scrollbar {
    width: 14px !important;
    height: 14px !important;
    background-color: #F5F7F9 !important;
}
.modal ::-webkit-scrollbar-thumb, #navigator::-webkit-scrollbar-thumb, #wrapper ::-webkit-scrollbar-thumb, #dbq-notification-center .dbqnc-item-list::-webkit-scrollbar-thumb, .tab-content::-webkit-scrollbar-thumb, #content::-webkit-scrollbar-thumb, .classlist-window-content::-webkit-scrollbar-thumb {
    background-color: #bdcad8 !important;
    border: 4px solid #F5F7F9 !important;
}
    .modal ::-webkit-scrollbar-thumb:hover, #navigator::-webkit-scrollbar-thumb:hover, #wrapper ::-webkit-scrollbar-thumb:hover, #dbq-notification-center .dbqnc-item-list::-webkit-scrollbar-thumb:hover, .tab-content::-webkit-scrollbar-thumb:hover, #content::-webkit-scrollbar-thumb:hover, .classlist-window-content::-webkit-scrollbar-thumb:hover {
        background-color: #0054F0 !important;
    }
.modal ::-webkit-scrollbar-corner, #navigator::-webkit-scrollbar-corner, #wrapper ::-webkit-scrollbar-corner, #dbq-notification-center .dbqnc-item-list::-webkit-scrollbar-corner, .tab-content::-webkit-scrollbar-corner, #content::-webkit-scrollbar-corner, .classlist-window-content::-webkit-scrollbar-corner {
    background-color: #F5F7F9 !important;
}

/*
    (body background)
    Background:     #F5F7F9
    Width:          8px
*/
.tab-pane::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: #F5F7F9;
}
.tab-pane::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #F5F7F9;
}
.tab-pane::-webkit-scrollbar-thumb {
    background-color: #FFFFFF;
    border: 1px solid #F5F7F9;
}
    .tab-pane::-webkit-scrollbar-thumb:hover {
        background-color: #0054F0 !important;
    }
.tab-pane::-webkit-scrollbar-corner {
    background-color: #F5F7F9;
}

/*
    (WHITE background)
    Background:     #FFFFFF
    Width:          14px
*/
#content-wrapper table::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: #FFFFFF;
}
#content-wrapper table::-webkit-scrollbar {
    width: 14px;
    height: 14px;
    background-color: #FFFFFF;
}
#content-wrapper table::-webkit-scrollbar-thumb {
    background-color: #d3d9e2;
    border: 4px solid #FFFFFF;
}
    #content-wrapper table::-webkit-scrollbar-thumb:hover {
        background-color: #0054F0 !important;
    }
#content-wrapper table::-webkit-scrollbar-corner {
    background-color: #FFFFFF;
}

/* Select can also have the scrollbar so change the backgorund color of options */
select option {
    background: #F5F7F9 !important;
}

/*
    (Disabled background)
    Background:     #e5e7ec
    Width:          14px
*/
/* Disabled (textarea in modal) */
textarea:disabled::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: #e5e7ec !important;
}
textarea:disabled::-webkit-scrollbar {
    background-color: #e5e7ec;
    width: 14px;
    height: 14px;
}
textarea:disabled::-webkit-scrollbar-thumb {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 4px solid #e5e7ec !important;
}
    textarea:disabled::-webkit-scrollbar-thumb:hover {
        background-color: #0054F0 !important;
    }
textarea:disabled::-webkit-scrollbar-corner {
    background-color: #e5e7ec !important;
}
textarea:disabled::-webkit-resizer {
    border: 0;
}

/* ****************************** 
    Buttons
****************************** */
/* Primary */
/* Enabled */
#content-wrapper .btn-primary,
#content-wrapper button.btn-primary:enabled,
.modal-content .btn-primary,
.modal-content button.btn-primary:enabled,
#dbq-navbar-functions .btn-primary {
    background: #0054F0 !important;
    border: 2px solid #004ad4 !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    opacity: 1;
}
    #content-wrapper .btn-primary svg,
    #content-wrapper .btn-primary:enabled svg,
    .modal-content .btn-primary svg,
    .modal-content .btn-primary:enabled svg {
        fill: #FFFFFF !important;
    }
    /* Hover */
    #content-wrapper button.btn-primary:hover:enabled,
    #content-wrapper button.btn-primary:enabled:hover,
    .modal-content button.btn-primary:hover:enabled,
    .modal-content button.btn-primary:enabled:hover,
    #dbq-navbar-functions .btn-primary:hover:enabled,
    #dbq-navbar-functions .btn-primary:enabled:hover {
        background: #004ad4 !important;
        border: 2px solid #0040b7 !important;
        color: #FFFFFF !important;
        fill: #FFFFFF !important;
    }
    /* Disabled */
    #content-wrapper .btn-primary:disabled, .modal-content .btn-primary:disabled,
    #content-wrapper button.btn-primary:disabled, .modal-content button.btn-primary:disabled {
        background: #004ad4 !important;
        border: 2px solid #004ad4 !important;
        color: #FFFFFF !important;
        cursor: not-allowed !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
        opacity: 1;
    }

        #content-wrapper button.btn-primary.selected:disabled, #content-wrapper button.btn-primary:disabled.selected,
        .modal-content button.btn-primary.selected.disabled, .modal-content button.btn-primary.disabled.selected {
            background: #004ad4 !important;
            border: 2px solid #004ad4 !important;
            color: #FFFFFF !important;
            cursor: not-allowed !important;
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
            box-shadow: none !important;
            opacity: 1;
        }

            #content-wrapper button.btn-primary.selected:hover:disabled,
            #content-wrapper button.btn-primary.selected.disabled:hover,
            .modal-content button.btn-primary.selected:hover:disabled,
            .modal-content button.btn-primary.selected.disabled:hover {
                background: #004ad4 !important;
                border: 2px solid #004ad4 !important;
                color: #FFFFFF !important;
                cursor: not-allowed !important;
                -webkit-box-shadow: none !important;
                -moz-box-shadow: none !important;
                box-shadow: none !important;
                opacity: 1;
            }
/* Default + Secondary */
/* Enabled */
#content-wrapper button.btn-default, .modal-content button.btn-default,
#content-wrapper button.btn-default:enabled, .modal-content button.btn-default:enabled,
#content-wrapper button.btn-secondary, .modal-content button.btn-secondary,
#content-wrapper button.btn-secondary:enabled, .modal-content button.btn-secondary:enabled {
    background: 0 !important; /* if this need's to be a background, it should be specific, because background can be white or light-grey/blue or something else.. */
    border: 2px solid #e5e7ec !important;
    color: #0054F0 !important;
    fill: #0054F0 !important;
    opacity: 1;
}
    #content-wrapper button.btn-default svg, .modal-content button.btn-default svg,
    #content-wrapper button.btn-default:enabled svg, .modal-content button.btn-default:enabled svg,
    #content-wrapper button.btn-secondary svg, .modal-content button.btn-secondary svg,
    #content-wrapper button.btn-secondary:enabled svg, .modal-content button.btn-secondary:enabled svg {
        fill: #0054F0 !important;
    }
#content-wrapper #navigator .navigation-button svg {
    fill: #001323 !important;
}

    /* Hover */
    #content-wrapper button.btn-default:hover:enabled, .modal-content button.btn-default:hover:enabled,
    #content-wrapper button.btn-default:enabled:hover, .modal-content button.btn-default:enabled:hover,
    #content-wrapper button.btn-secondary:hover:enabled, .modal-content button.btn-secondary:hover:enabled,
    #content-wrapper button.btn-secondary:enabled:hover, .modal-content button.btn-secondary:enabled:hover {
        border: 2px solid #0054F0 !important;
    }

/* Disabled */
#content-wrapper button.btn-default:disabled, .modal-content button.btn-default:disabled,
#content-wrapper button.btn-default.disabled, .modal-content button.btn-default.disabled,
#content-wrapper button.btn-secondary:disabled, .modal-content button.btn-secondary:disabled,
#content-wrapper button.btn-secondary.disabled, .modal-content button.btn-secondary.disabled {
    background: #647987 !important;
    border: 2px solid #647987 !important;
    color: #FFFFFF !important;
    cursor: not-allowed !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    opacity: 1;
}

/* unique dropdown/multiselect, but is within button tags.. */
.modal-content button.btn-default.dropdown-toggle:disabled {
    color: #001323 !important;
}
.modal-content button.btn-default.dropdown-toggle:disabled:hover {
    color: #001323 !important;
}

    #content-wrapper button.btn-default:hover:disabled, .modal-content button.btn-default:hover:disabled,
    #content-wrapper button.btn-secondary:hover:disabled, .modal-content button.btn-secondary:hover:disabled {
        background: #647987 !important;
        border: 2px solid #647987 !important;
        color: #FFFFFF !important;
        cursor: not-allowed !important;
    }
/*
        Selected + default ?? cant be right..

        #content-wrapper button.btn-default.selected:disabled, #content-wrapper button.btn-default.disabled.selected,
    .modal-content button.btn-default.selected:disabled, .modal-content button.btn-default.disabled.selected,
    #content-wrapper button.btn-secondary.selected:disabled, #content-wrapper button.btn-secondary.disabled.selected,
    .modal-content button.btn-secondary.selected:disabled, .modal-content button.btn-secondary.disabled.selected {
        background: #647987 !important;
        border: 2px solid #647987 !important;
        color: #595F6E !important;
        cursor: not-allowed !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
        opacity: 1;
    }
    #content-wrapper button.btn-default.selected:hover:disabled, .modal-content button.btn-default.selected:hover:disabled,
    #content-wrapper button.btn-secondary.selected:hover:disabled, .modal-content button.btn-secondary.selected:hover:disabled {
        background: #647987 !important;
        border: 2px solid #647987 !important;
        color: #FFFFFF !important;
        cursor: not-allowed !important;
    }*/






/* Danger */
#content-wrapper .btn-secondary, .modal .btn-secondary, .modal .btn-default {
    background: #898d94 !important;
    border: 2px solid #81848a !important;
    color: #001323 !important;
    
    cursor: pointer;
    height: 100%; /*this height is for delete button next to inputs, in forms*/
}

#content-wrapper .btn-danger, .modal .btn-danger {
    background: #D5473C !important;
    border: 2px solid #c14036 !important;
    color: #FFFFFF !important;
    
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
}

#content-wrapper .btn-success, .modal .btn-success {
    background: #0fab46 !important;
    border: 2px solid #0e983f !important;
    color: #FFFFFF !important;
    
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
}

#content-wrapper .btn-link, .modal .btn-link {
    background: 0 !important;
    border: 2px solid rgba(0,0,0,0) !important;
    color: #001323 !important; /*color: #7C8DB5 !important;*/
    
    cursor: pointer;
}

    #content-wrapper .btn-link.btn-block, .modal .btn-link.btn-block {
        border: 0 !important;
    }

#content-wrapper .btn-primary:hover, .modal .btn-primary:hover {
    color: #FFFFFF !important;
    background: #008bef !important;
    border: 2px solid #008bef !important;
}

#content-wrapper .btn-secondary:hover, .modal .btn-secondary:hover, .modal .btn-default:hover {
    background: #81848a !important;
    border: 2px solid #777a80 !important;
    color: #001323 !important;
}

#content-wrapper .btn-danger:hover, .modal .btn-danger:hover {
    background: #c9302c !important;
    border: 2px solid #bb2723 !important;
    color: #FFFFFF !important;
}

#content-wrapper .btn-success:hover, .modal .btn-success:hover {
    background: #0e983f !important;
    border: 2px solid #0c8637 !important;
    color: #FFFFFF !important;
}

#content-wrapper .btn-link:hover, .modal .btn-link:hover {
    text-decoration: none;
    color: #0054F0 !important;
}

/* Enabled + hover */
#classlist button.classlist-toolbar-item:hover:enabled {
    background: #0054f0 !important;
    border: 2px solid #004ad4 !important;
    opacity: 1;
}

    #classlist button.classlist-toolbar-item:hover:enabled svg {
        fill: #FFFFFF !important;
    }

/* Disabled + hover */
#content-wrapper button.btn-primary:hover:disabled,
#content-wrapper button.btn-primary.disabled:hover,
.modal-content button.btn-primary:hover:disabled,
.modal-content button.btn-primary.disabled:hover {
    background: #0054F0 !important;
    border: 2px solid #0054F0 !important;
    color: #FFFFFF !important;
    cursor: not-allowed !important;
}

#content-wrapper button.btn-default:hover:disabled,
#content-wrapper button.btn-default.disabled:hover,
.modal-content button.btn-default:hover:disabled,
.modal-content button.btn-default.disabled:hover {
    background: #647987 !important;
    border: 2px solid #647987 !important;
    color: #FFFFFF !important;
    cursor: not-allowed !important;
}

/* Delete button */
button.btn-default.image-file-upload-clear:enabled svg {
    fill: #D5473C !important;
}

/* ****************************** 
    Top bar
****************************** */
.logo svg .dbq-logo-color-1, .navbar-brand svg .dbq-logo-color-1, #content-wrapper .navbar.dbq-application-navbar .navbar-brand svg .dbq-logo-color-1, svg.dbq-default-logo .dbq-logo-color-1 {
    fill: #EC6659; /*#111111*/
}
.logo svg .dbq-logo-color-2, .navbar-brand svg .dbq-logo-color-2, #content-wrapper .navbar.dbq-application-navbar .navbar-brand svg .dbq-logo-color-2, svg.dbq-default-logo .dbq-logo-color-2 {
    fill: #111111; /*#333333*/
}
.logo svg .dbq-logo-color-3, .navbar-brand svg .dbq-logo-color-3, #content-wrapper .navbar.dbq-application-navbar .navbar-brand svg .dbq-logo-color-3, svg.dbq-default-logo .dbq-logo-color-3 {
    fill: #555555;
}
.logo svg .dbq-logo-color-4, .navbar-brand svg .dbq-logo-color-4, #content-wrapper .navbar.dbq-application-navbar .navbar-brand svg .dbq-logo-color-4, svg.dbq-default-logo .dbq-logo-color-4 {
    fill: #000111;
}
.logo svg .dbq-logo-color-5, .navbar-brand svg .dbq-logo-color-5, #content-wrapper .navbar.dbq-application-navbar .navbar-brand svg .dbq-logo-color-5, svg.dbq-default-logo .dbq-logo-color-5 {
    fill: #565656;
}
.logo svg .dbq-logo-color-6, .navbar-brand svg .dbq-logo-color-6, #content-wrapper .navbar.dbq-application-navbar .navbar-brand svg .dbq-logo-color-6, svg.dbq-default-logo .dbq-logo-color-6 {
    fill: #989898;
}

#wrapper > header {
    background: 0;
    border-bottom: 1px solid #e2e7f3;
}
    /* Logo */
    #wrapper > header .logo {
        background: 0;
    }

/* User info */
#user_info {
    color: #001323;
}
    #user_info a {
        color: #0054F0 !important;
    }

/* Breadcrumbs */
        #wrapper > header .organisation #breadcrumbs svg {
            fill: #626D86;
        }
        #wrapper > header .organisation #breadcrumbs a#breadcrumb_home {
            color: #7b7c80;
        }
        #wrapper > header .organisation #breadcrumbs b {
            color: #626D86;
        }
        #wrapper > header .organisation #breadcrumbs a {
            background-color: none !important;
            color: #6b6b6b !important;
        }

/* Navbar */
.navbar-default {
    background: none;
    border: 0;
    border-bottom: 1px solid #e2e7f3 !important;
}
#class-list-menu .class-list-menu-user svg {
    fill: #001323;
}
#class-list-menu .class-list-menu-user:hover svg,
#dbq-notification-center-menu-container .dbqnc-toggle-button:hover svg {
    fill: #0054F0;
}
    #class-list-menu .class-list-menu-user .username {
        color: #8b8b8b;
    }

.navbar.dbq-application-navbar {
    border-bottom: 1px solid #e2e7f3 !important;
}

/* ****************************** 
    Notifications
****************************** */

    #dbq-notification-center-menu-container .dbqnc-toggle-button, #dbq-notification-center-menu .dbqnc-toggle-button {
        background: 0 !important;
    }
        #dbq-notification-center-menu-container .dbqnc-toggle-button svg, #dbq-notification-center-menu .dbqnc-toggle-button svg {
            fill: #001323;
        }
.dbq-application-rumm #dbq-notification-center-menu-container .dbqnc-toggle-button svg, .dbq-application-rumm #dbq-notification-center-menu .dbqnc-toggle-button svg, .class-list-menu-user svg {
    fill: #001323;
}
.dbqnc-badge-red {
    background-color: #E81625 !important;
    border: 2px solid #F5F7F9 !important;
}

#dbq-notification-center .dbqnc-item-list .dbqnc-item .dbqnc-item-message .dbqnc-name {
    color: #001323;
}

/* ****************************** 
    nav-tabs
****************************** */
.nav-tabs {
    background: #F5F7F9;
    border-bottom: 1px solid #e2e7f3;
}
    .nav-tabs > li > a {
        color: #001323;
        border-bottom: 0 !important;
    }
        .nav-tabs > li > a.active {
            background: 0 !important;
            color: #626D86;
        }
        .nav-tabs > li > a:hover {
            color: #0054F0;
        }
    .nav-tabs > li.active {
        background: #e5e7ec;
    }
        .nav-tabs > li.active > a {
            color: #001323 !important;
        }
            .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after {
                border-bottom: 0 !important;
                transition: none;
            }
            .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
                color: #001323 !important;
                border-width: 0;
            }

/*
    document-list-table-view
*/
#content-wrapper .dbq-document-list-table-view label {
    background: #ffffff;
    border: 2px solid #F5F7F9;
}
    #content-wrapper .dbq-document-list-table-view table svg {
        fill: #3a3b40;
    }
        #content-wrapper .dbq-document-list-table-view table svg:hover {
            fill: #0095ff;
        }
        #content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate li {
            background: #F5F7F9;
            border: 2px solid #F5F7F9;
        }
            #content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate li:hover {
                background: #3a3b40;
                border: 2px solid #3a3b40;
                cursor: pointer;
            }
            #content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate li:hover a {
                color: #fff;
                text-decoration: none;
            }
        #content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate .paginate_button.active {
            border: 2px solid #0095ff !important;
            background-color: #FFFFFF !important;
            color: #FFFFFF !important;
        }
            #content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate .paginate_button.active:hover {
                border: 2px solid #0095ff !important;
                background-color: #0095ff !important;
                color: #ffffff !important;
            }

/* ****************************** 
    ?
****************************** */
.input-group-addon {
    color: #595F6E;
    background-color: #f0f2f5;
    border-top: 2px solid #e5e7ec;
    border-bottom: 2px solid #e5e7ec;
    border-left: 2px solid #e5e7ec;
}
    .input-group-addon svg {
        background: #f0f2f5;
        fill: #595F6E;
    }
.form-group .searchbox-container .input-group-addon {
}
    .form-group .searchbox-container .input-group-addon svg {
        fill: #595F6E;
        /*padding: 2px 0;*/
        margin-right: 0;
    }
.input-group-addon.disabled,
form[data-view-mode="View"] .input-group-addon {
    color: #ffffff;
    background-color: #e5e7ec; /*#f0f2f5 <-- before dashboard change*/
    border-top: 2px solid #e5e7ec;
    border-bottom: 2px solid #e5e7ec;
    border-left: 2px solid #e5e7ec;
}
    .input-group-addon.disabled svg, form[data-view-mode="View"] .input-group-addon svg {
        background: #e5e7ec;
        fill: #595F6E;
    }
.form-group .searchbox-container .input-group-btn {
}
    .form-group .searchbox-container .input-group-btn svg {
        fill: #b3baca;
        padding: 0;
        margin-right: 0;
    }

.modal-dialog {
    -webkit-box-shadow: 0 0 30px rgba(0,0,0,0.2) !important;
    -moz-box-shadow: 0 0 30px rgba(0,0,0,0.2) !important;
    box-shadow: 0 0 30px rgba(0,0,0,0.2) !important;
}
.modal-content {
    border-bottom: 0 !important;
}
.modal-header {
    border-bottom: 1px solid #e5e7ec;
}

/* ****************************** 
    side_navigation
****************************** */
#side_navigation.side_navigation_document_editor {
    background-color: #626D86;
    border-right: 1px solid #eee;
    /*padding: 30px !important;*/
}
    #side_navigation.side_navigation_document_editor ul li span.hover {
        color: #445668;
    }
    #side_navigation.side_navigation_document_editor ul li span.active {
        color: #626D86;
    }
#versions .version_state.historic-version {
    color: #a2a2a2;
}
#side_navigation.side_navigation_document_editor span.row-button {
    color: #445668;
    border: 1px solid #3893d0;
}
    #side_navigation.side_navigation_document_editor span.row-button:hover, #side_navigation.side_navigation_document_editor ul li span.active {
        color: #626D86;
        background: #3893d0;
    }
#side_navigation.side_navigation_document_editor span.green {
    /*color: #5cb85c;*/
    color: #315f31;
    border: 1px solid #5cb85c !important;
}
#side_navigation.side_navigation_document_editor span.red {
    /*color: #b64f4b;*/
    color: #5f0502;
    border: 1px solid #b64f4b !important;
}
#side_navigation.side_navigation_document_editor span.orange {
    color: #ffc107;
    border: 1px solid #ffc107 !important;
}
#side_navigation.side_navigation_document_editor span.blue {
    /*color: #3893d0;*/
    color: #0054F0;
    border: 1px solid #0054F0 !important;
}

/* ****************************** 
    span. ??? 
****************************** */
span.button {
    color: #FFFFFF !important;
    background: #0054F0;
    border: 1px solid #0054F0;
}
    span.button:hover {
        color: #0054F0 !important;
        background: #FFFFFF;
        border: 1px solid #FFFFFF;
    }

/* ****************************** 
    ?
****************************** */
#submenu.editor {
    background: #FFFFFF;
}

/* ****************************** 
    Content table
****************************** */
.content-table thead tr:first-of-type {
    background: #FFFFFF;
}
.content-table tbody tr, .content-table thead tr {
    border-bottom: 1px solid #e0e6f3;
}
.content-table {
    border-top: 1px solid #e0e6f3;
}
    .content-table th, .content-table td {
        color: #b9b9b9;
    }
    .content-table input.search {
        background: #FFFFFF !important;
        border: 2px solid #e5e7ec !important;
        color: #626D86 !important;
        border: 0;
    }
    .content-table thead th {
        color: #626D86;
    }

/* ****************************** 
    Data visualisations
****************************** */
.ui-widget-content {
    border: 2px solid #e5e7ec !important;
    background: #FFFFFF;
    color: #626D86;
}

#content textarea, #content select {
    background: #e5e7ec;
    border-color: #e5e7ec;
    color: #0054F0;
    font-weight: 600;
}

.pagination li > a.active {
    background-color: #0054F0 !important;
    color: #626D86;
    border: 1px solid #0054F0 !important;
}

/* ****************************** 
    Modal / popup
****************************** */
.popup > div {
    background-color: #0c0c0c;
}

/* ****************************** 
    Notifications
****************************** */
#dbq-notification-center {
    background-color: #F5F7F9 !important;
    border-left: 1px solid #e2e7f3;
}
    #dbq-notification-center .dbqnc-navbar {
        color: #001323 !important;
        border-bottom: 1px solid #e2e7f3;
    }
        #dbq-notification-center .dbqnc-navbar .dbqnc-navbar-item:hover .dbqnc-navbar-item-title {
            color: #0054F0 !important;
        }
        #dbq-notification-center .dbqnc-navbar .dbqnc-navbar-item.dbqnc-active {
            border-bottom: 0 !important;
            background: #e5e7ec;
        }
            #dbq-notification-center .dbqnc-navbar .dbqnc-navbar-item.dbqnc-active .dbqnc-navbar-item-title {
                color: #001323 !important;
            }
                #dbq-notification-center .dbqnc-navbar .dbqnc-navbar-item.dbqnc-active:hover .dbqnc-navbar-item-title {
                    color: #001323 !important;
                }

    #dbq-notification-center .dbqnc-item-list .dbqnc-item, #dbq-notification-center .dbqnc-item-list .dbqnc-items-empty {
        background-color: #FFFFFF !important;
        color: #000000;
        -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.07);
        -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.07);
        box-shadow: 0px 3px 5px rgba(0,0,0,0.07);
    }
    #dbq-notification-center .dbqnc-navbar .dbqnc-navbar-item {
    }
    #dbq-notification-center .dbqnc-item-list .dbqnc-item .dbqnc-item-message .dbqnc-message-expander {
        color: #0054F0;
    }
        #dbq-notification-center .dbqnc-item-list .dbqnc-item .dbqnc-item-message .dbqnc-message-expander:hover {
            color: #0054F0;
        }
    #dbq-notification-center .dbqnc-item-list .dbqnc-item .dbqnc-item-message .max-lines-2 {
        color: #001323;
    }
    #dbq-notification-center .dbqnc-item-list .dbqnc-item .dbqnc-item-message .dbqnc-message-text {
        color: #001323;
    }
    #dbq-notification-center .dbqnc-item-list .dbqnc-item .dbqnc-item-image {
        border: 4px solid #f9f9f9;
    }

    #dbq-notification-center .dbqnc-item-list .dbqnc-item .dbqnc-item-message .dbqnc-create-time {
        color: #001323 !important;
    }

    #dbq-notification-center .dbqnc-item-list .dbqnc-button {
        background-color: #bdcad8 !important;
        color: #001323 !important;
    }

/* ****************************** 
    Unilever
****************************** */
.dbq-application-usc .gj-tree-bootstrap-3 ul.gj-list-bootstrap li.active > div {
    background-color: 0 !important;
}

/* ****************************** 
    Form styling
****************************** */
input[name="SelectTypeMinimumSelectCount"],
input[name="SelectTypeName"] {
}

/* ****************************** 
    CodeMirror
****************************** */
div[type='source-code-editor'] {
    border: 0;
}
.CodeMirror, div[name="RuleSourceCode"] {
    background: #FFFFFF;
}
    div[name="RuleSourceCode"] .CodeMirror {
        background: #ffffff;
        border: 2px solid #e5e7ec;
    }
    div[name="RuleSourceCode"] .CodeMirror-lines {
        color: #001323 !important;
    }
    div[name="RuleSourceCode"] .cm-keyword {
        color: #ff8b2b !important;
    }
    div[name="RuleSourceCode"] .cm-comment {
        color: #acb6ce !important;
    }
    div[name="RuleSourceCode"] .cm-string {
        color: #59c517 !important;
    }
    div[name="RuleSourceCode"] .cm-builtin {
        color: #f225ff !important;
    }
    div[name="RuleSourceCode"] .CodeMirror-scrollbar-filler {
        background: #e5e7ec;
    }
    div[name="RuleSourceCode"] .CodeMirror-gutters {
        background: #e5e7ec;
        border: 0;
    }
    div[name="RuleSourceCode"] .CodeMirror-linenumber {
        color: #505050;
    }
    div[name="RuleSourceCode"] .CodeMirror-cursor {
        border-left: 2px solid #626D86;
    }
    div[name="RuleSourceCode"] .CodeMirror-selected {
        /*background-color: #000000 !important;*/
        background-color: rgba(0,0,0,0.05) !important;
        /*color: #000 !important;*/
        opacity: 1;
    }
        div[name="RuleSourceCode"] .CodeMirror-selected .cm-comment {
            color: blue !important;
        }
    div[name="RuleSourceCode"] .CodeMirror-selectedtext {
        color: #000000 !important;
    }
    div[name="RuleSourceCode"] .cm-variable .CodeMirror-selected {
        color: #000000 !important;
    }

#document-topics .CodeMirror-linenumber,
.dbq-form .CodeMirror-linenumber {
    background: #e5e7ec;
}

/* ****************************** 
    Tijsens
****************************** */
.classlist-dashboard div[data-element-type="Graph"] {
    background: #FFFFFF;
}
.dbq-application-tsn .classlist-dashboard div[data-element-type="Text"],
.dbq-application-tkc .classlist-dashboard div[data-element-type="Text"] { /* .dbq-application-tsn div[data-element-type="Text"] */
    background: #FFFFFF;
    margin: 0 10px 10px 10px !important;
    width: calc(100% - 20px) !important;
}
.dbq-application-tsn .classlist-dashboard div[data-element-type="Header"],
.dbq-application-tkc .classlist-dashboard div[data-element-type="Header"] { /* .dbq-application-tsn div[data-element-type="Header"], <-- before, AND -> Tokcel needs this to.. so this needs to be in custom styling.. */
    background: #FFFFFF;
    margin: 10px 10px 0 10px !important;
    width: calc(100% - 20px) !important;
}
#classlist-dashboard-header div[data-element-type="Graph"] { /*folder-document-class-list-dashboard-document*/ /*#classlist-dashboard-header .dbq-column <-- on column can never be a shadow! */
    background: #FFFFFF;
}
.classlist-dashboard .topic .btn-default {
    border: 0;
}
.classlist-dashboard #document-topics .topic section,
.classlist-dashboard .dbq-form section {
    /*background: #e5e7ec; <-- not possible. for CMS -> TSN -> inspectiebeheer -> Kempenhaeghe totaal contract -> background graphics */
    background: 0;
}

/* ****************************** 
    Refresh infinite
****************************** */
#content-wrapper #classlist .classlist-toolbar-item.checkbox-inline {
    color: #001323;
    border: 2px solid #e5e7ec !important;
    line-height: 20px !important;
}
    #content-wrapper #classlist .classlist-toolbar-item.checkbox-inline .toggle-group {
        border-right: 1px solid #e5e7ec;
    }
    #content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh {
        border: 2px solid #e5e7ec !important;
        /*border: 0 !important; <-- was this, dont know why.. but for Portal -> DBQW -> Vacature reacties -> click tr -> infinite refresh needs a border*/
    }
        #content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh .btn-primary,
        #content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh .btn-default {
            border: 0 !important;
        }
#content-wrapper .toggle .toggle-group span.toggle-handle,
#content-wrapper .toggle:hover .toggle-group span.toggle-handle {
    float: left !important;
}
#content-wrapper .toggle.off .toggle-group span.toggle-handle,
#content-wrapper .toggle.off:hover .toggle-group span.toggle-handle {
    float: right !important;
}


/* ****************************** 
********** DbqScrollbar **********
****************************** */
.dbq-scrollbar {
}
    .dbq-scrollbar::-webkit-scrollbar-track {
        background: #FFFFFF !important;
        background-color: #FFFFFF !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }
    .dbq-scrollbar::-webkit-scrollbar-thumb {
        background: #e5e7ec !important;
        background-color: #e5e7ec !important;
        border: 1px solid #e2e7f3 !important;
    }
    .dbq-scrollbar::-webkit-scrollbar-corner {
        background: #FFFFFF !important;
    }

/* ****************************** 
    Date picker
****************************** */
.bootstrap-datetimepicker-widget {
    background: #FFFFFF;
    border: 0;
    color: #001323;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.05);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.05);
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
    .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
        border-left: 6px solid #FFFFFF;
        border-right: 6px solid #FFFFFF;
        border-bottom: 6px solid #FFFFFF;
    }
    .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
        border-left: 6px solid #FFFFFF;
        border-right: 6px solid #FFFFFF;
        border-top: 6px solid #FFFFFF;
    }
    .bootstrap-datetimepicker-widget table td.active {
        background-color: #0054F0;
    }
    .bootstrap-datetimepicker-widget table td.new {
        color: #aeb4c1;
    }
    .bootstrap-datetimepicker-widget table th.dow {
        color: #001323;
    }
    .bootstrap-datetimepicker-widget table thead tr:first-child th {
        padding: 10px 3px;
    }
        .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
            background: #e5e7ec !important; /*rgba(255,255,255,0.05);*/
        }
    .bootstrap-datetimepicker-widget table td.day:hover {
        background: #e5e7ec !important; /*rgba(255,255,255,0.05);*/
    }
    .bootstrap-datetimepicker-widget .prev, .bootstrap-datetimepicker-widget .next {
        color: #0054F0;
    }
    .dropdown-menu .datepicker svg {
        fill: #0054F0;
    }
.bootstrap-datetimepicker-widget table tr {
    background: #FFFFFF;
    color: #001323;
    border-bottom: 1px solid #FFFFFF;
}
    .bootstrap-datetimepicker-widget table tr:hover {
        background: #FFFFFF !important;
        color: #001323 !important;
        border-bottom: 1px solid #FFFFFF !important;
    }
.bootstrap-datetimepicker-widget table td span.active {
    background-color: #0054F0;
    color: #fff;
    text-shadow: none;
}
.bootstrap-datetimepicker-widget table td span:hover {
    background: #edeff1 !important;
    color: #001323 !important;
    fill: #001323 !important;
}
.bootstrap-datetimepicker-widget table td.old, .bootstrap-datetimepicker-widget table td.new {
    color: #aeb4c1 !important;
}

#content-wrapper #document-class-list-filters .bootstrap-datetimepicker-widget table tr {
    background: #ffffff;
    border-bottom: 1px solid #ffffff;
    color: #717886;
}
#content-wrapper #document-class-list-filters .bootstrap-datetimepicker-widget.dropdown-menu {
    background: #FFFFFF !important;
}
    #content-wrapper #document-class-list-filters .bootstrap-datetimepicker-widget.dropdown-menu li {
        background: #FFFFFF !important;
    }
        #content-wrapper #document-class-list-filters .bootstrap-datetimepicker-widget.dropdown-menu li:hover {
            background: 0 !important;
        }
#content-wrapper #document-class-list-filters .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: #e5e7ec !important;
}
#content-wrapper #document-class-list-filters .bootstrap-datetimepicker-widget table td.day:hover {
    background: #e5e7ec !important;
}

/* ****************************** 
    Date time picker
****************************** */
.bootstrap-datetimepicker-widget a[data-action] {
    color: #001323 !important;
}
    .bootstrap-datetimepicker-widget a[data-action]:hover {
        color: #0054F0 !important;
    }
.bootstrap-datetimepicker-widget table td span:hover {
    background: rgba(0,0,0,0.05);
}
.bootstrap-datetimepicker-widget table td.hour:hover {
    background: rgba(0,0,0,0.05);
}
.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: #0054F0;
}
.bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td.hour:hover, .bootstrap-datetimepicker-widget table td.minute:hover, .bootstrap-datetimepicker-widget table td.second:hover {
    background: rgba(0,0,0,0.05);
}

/* #navigator is the div with a scroll! */
#navigator {
    background: #F5F7F9;
    border-right: 1px solid #e2e7f3;
}
    #navigator .dbq-divider {
        border-bottom: 1px solid #e2e7f3 !important;
    }
    #navigator h3 {
        border-bottom: 1px solid #e2e7f3 !important;
    }
        /*#navigator h3.active {
            border-bottom: 0 !important;
        }*/
        #navigator h3:first-of-type {
            border-top: 0 !important;
        }

/* Navigator button */
#navigator .navigation-button {
    border-right: 0;
    border-left: 0;
    background: #e5e7ec !important;
    border: 0 !important;
    border-bottom: 1px solid #e2e7f3 !important;
}
#navigator .navigation-button .navigation-button-title {
    color: #001323;
}
    #navigator .navigation-button .navigation-button-title:hover {
        color: #0054F0;
        /*border-color: #FFFFFF;*/
    }
    #navigator .navigation-button svg {
        fill: #b3baca;
    }

/* Main menu icons */
svg .dbq-icon-color-1 {
    fill: #F5F7F9;
}
svg .dbq-icon-color-2 {
    fill: #001323;
}

/* ****************************** 
    Mainmenu restyling (CMS + Portal)
****************************** */
/* STRUCTUUR CMS: */
/*
    .left_col
    #navigator
    -----------------
    .foldertree-header + .foldertree-container
    ul.gj-list gj-list-bootstrap list-group
    li.list-group-item
    div[data-role="wrapper"]
    spacer/expander/icon/display/options
*/
/* end of STRUCTUUR CMS: */
/* STRUCTUUR Portal: */
/*
    #navigator
    .row
    ------------------
    .foldertree-header + .foldertree-container
    ul.gj-list gj-list-bootstrap list-group
    li.list-group-item
    div[data-role="wrapper"]
    spacer/expander/icon/display
*/
/* end of STRUCTUUR Portal: */

/* ##### .foldertree-header + .foldertree-container ##### */
.foldertree-header {
    background: 0 !important;
    color: #001323 !important;
    border-bottom: 0 !important;
}
    .foldertree-header svg {
        fill: #001323;
    }
        .foldertree-header svg.dbq-align-right {
            fill: #001323;
        }

/* foldertree-container */
#navigator .foldertree-container {
    /*border-bottom: 1px solid #e2e7f3 !important;*/ /*<-- not possible, sometimes 1 is empty */
}
    #navigator .foldertree-container:last-of-type {
        /*border-bottom: 0 !important;*/
    }
    .foldertree-container.dbq-active {
        /*border-top: 1px solid #e2e7f3; <-- this does not work together with margin-top of first element in Portals (the folder toggle) */
        border-bottom: 1px solid #e2e7f3;
    }
#navigator h3 {
    border-bottom: 1px solid #e2e7f3;
}
.foldertree-container > ul.gj-list-bootstrap > li:last-of-type {
    border-bottom: 0 !important;
    /*margin-bottom: 10px !important; <-- should be normal css + not possible for 2 ul's (amsterdam-dev) */
}

/* ##### ul.gj-list gj-list-bootstrap list-group ##### */
ul.gj-list-bootstrap {
}
    ul.gj-list-bootstrap li, .gj-tree-bootstrap-3 ul.gj-list-bootstrap li {
        background: 0;
        border: 0;
    }
        ul.gj-list-bootstrap li.active:first-of-type {
            background: #FFFFFF;
        }
        ul.gj-list-bootstrap li.active, .gj-tree-bootstrap-3 ul.gj-list-bootstrap li.active {
            background-color: #e5e7ec !important;
        }
            ul.gj-list-bootstrap li.active, .gj-tree-bootstrap-3 ul.gj-list-bootstrap li.active:hover {
                background-color: #e5e7ec !important;
            }
                .gj-tree-bootstrap-3 ul.gj-list-bootstrap li.active:hover svg {
                    fill: #0054f0 !important;
                }
                .gj-tree-bootstrap-3 ul.gj-list-bootstrap li.active:hover svg:hover {
                    fill: #001323 !important;
                }
        ul.gj-list-bootstrap li:hover {
            background: #0054F0 !important;
        }

/* Active */
        li.active > span, ul.gj-list-bootstrap li.active span[data-role="expander"].gj-tree-glyphicons-expander svg {
            fill: #0054f0 !important;
        }
        ul.gj-list-bootstrap li.dbq-expand-active-style.active span[data-role="expander"].gj-tree-glyphicons-expander svg {
            fill: #0054f0 !important;
        }
        ul.gj-list-bootstrap li.active > div[data-role="wrapper"] span[data-role="display"] {
            color: #001323 !important;
        }
        ul.gj-list-bootstrap li.active div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-1 {
            fill: #e5e7ec !important;
        }
        ul.gj-list-bootstrap li.dbq-expand-active-style.active div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-1 {
            fill: #F5F7F9 !important;
        }
        ul.gj-list-bootstrap li.active > div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-2 {
            fill: #001323 !important;
        }
        ul.gj-list-bootstrap li.active div[data-role="wrapper"] span[data-role="options"] svg {
            fill: #FFFFFF !important;
        }
/* Normal hover*/
li > span:hover, ul.gj-list-bootstrap li:hover span[data-role="expander"].gj-tree-glyphicons-expander svg {
    fill: #FFFFFF !important;
}
    li > span:hover, ul.gj-list-bootstrap li:hover span[data-role="expander"].gj-tree-glyphicons-expander svg:hover {
        fill: #001323 !important;
    }
ul.gj-list-bootstrap li:hover div[data-role="wrapper"] span[data-role="display"] {
    color: #FFFFFF !important;
}
ul.gj-list-bootstrap li:hover div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-1 {
    fill: #0054F0 !important;
}
ul.gj-list-bootstrap li:hover div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-2 {
    fill: #FFFFFF !important;
}
ul.gj-list-bootstrap li:hover div[data-role="wrapper"] span[data-role="options"] svg {
    fill: #FFFFFF !important;
}
/* Active hover*/
        li.active > span:hover, ul.gj-list-bootstrap li.active:hover span[data-role="expander"].gj-tree-glyphicons-expander svg {
            fill: #0054F0 !important;
        }
            ul.gj-list-bootstrap li.active span[data-role="expander"].gj-tree-glyphicons-expander svg:hover {
                fill: #001323 !important;
            }
            ul.gj-list-bootstrap li.dbq-expand-active-style.active span[data-role="expander"].gj-tree-glyphicons-expander svg:hover {
                fill: #001323 !important;
            }
        ul.gj-list-bootstrap li.active:hover > div[data-role="wrapper"] span[data-role="display"] {
            color: #001323 !important;
        }
        ul.gj-list-bootstrap li.active:hover div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-1 {
            fill: #e5e7ec !important;
        }
        ul.gj-list-bootstrap li.dbq-expand-active-style.active:hover div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-1 {
            fill: #F5F7F9 !important;
        }
        ul.gj-list-bootstrap li.active:hover > div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-2 {
            fill: #001323 !important;
        }
        ul.gj-list-bootstrap li.active:hover div[data-role="wrapper"] span[data-role="options"] svg {
            fill: #949DAC !important;
        }
        ul.gj-list-bootstrap li.active div[data-role="wrapper"] span[data-role="options"] svg:hover {
            fill: #001323 !important;
        }

/* ##### li.list-group-item ##### */
ul.gj-list-bootstrap li.list-group-item svg {
    fill: #626D86;
}

/* ##### div[data-role="wrapper"] ##### */
ul.gj-list-bootstrap li [data-role="wrapper"] {
}

/* ##### spacer/expander/icon/display/options ##### */
        ul.gj-list-bootstrap li [data-role="display"] {
            color: #001323 !important;
        }
/*ul.gj-list-bootstrap li.active > span[data-role="display"] {
    color: #626D86 !important;
}*/
/*.gj-tree-bootstrap-3 ul.gj-list-bootstrap li.active span[data-role="display"] {  > of :first-of-type werkt niet.. 
    /*color: #001323 !important;
}*/
.gj-tree-bootstrap-3 ul li [data-role="expander"].gj-tree-glyphicons-expander svg {
    fill: #0054f0;
}

/* Hover svg */
ul.gj-list-bootstrap li span[data-role="display"]:hover {
    color: #0054F0;
}
ul.gj-list-bootstrap li span[data-role="expander"]:hover svg,
ul.gj-list-bootstrap li span[data-role="options"]:hover svg,
ul.gj-list-bootstrap li span[data-role="expander"] svg:hover,
ul.gj-list-bootstrap li span[data-role="options"] svg:hover {
    fill: #001323 !important;
}
/* ****************************** ******************************
    expanded state (FIRST)
****************************** ****************************** */
ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style {
    background-color: #F5F7F9 !important;
    background: #F5F7F9 !important;
    border-bottom: 0 !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style ul.gj-list-bootstrap {
        border: 0;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style ul.gj-list-bootstrap li {
        background: 0 !important;
    }
/* stop hover styling on all other expanded state li */
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover {
        background: #F5F7F9 !important;
    }
        ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover span[data-role="expander"] svg {
            fill: #0054f0 !important;
        }
            ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover span[data-role="expander"] svg:hover {
                fill: #001323 !important;
            }
        ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover span[data-role="icon"] svg .dbq-icon-color-1 {
            fill: #F5F7F9 !important;
        }
        ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover span[data-role="icon"] svg .dbq-icon-color-2 {
            fill: #001323 !important;
        }
        ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover span[data-role="display"] {
            color: #001323 !important;
        }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover span[data-role="options"] svg {
        fill: #949DAC !important;
    }
/* single li (+hover) in expanded state */
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.active div[data-role="wrapper"] {
        background: #FFFFFF;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.active span[data-role="expander"] svg {
        fill: #949DAC !important;
    }
        ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.active span[data-role="expander"] svg:hover {
            fill: #001323 !important;
        }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.active span[data-role="icon"] svg .dbq-icon-color-1 {
        fill: #FFFFFF !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.active span[data-role="icon"] svg .dbq-icon-color-2 {
        fill: #0054F0 !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.active span[data-role="display"] {
        color: #0054F0 !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.active span[data-role="options"] svg {
        fill: #949DAC !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.active span[data-role="options"] svg:hover {
        fill: #001323 !important;
    }

/* text hover in expanded state */
ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li:hover span[data-role="display"] {
    color: #0054F0 !important;
}

/* ****************************** ******************************
    expanded state inside expanded state
****************************** ****************************** */
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style div[data-role="wrapper"] {
        /*background: #e5e7ec !important; 3 niveau further everything will get background..*/
        background: #F5F7F9 !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style span[data-role="expander"] svg {
        fill: #949DAC !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style span[data-role="icon"] svg .dbq-icon-color-1 {
        fill: #FFFFFF !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style span[data-role="icon"] svg .dbq-icon-color-2 {
        fill: #b3baca !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style span[data-role="display"] {
        color: #626D86 !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style span[data-role="options"] svg {
        fill: #949DAC !important;
    }
/* single li (+hover) in expanded->expanded state */
ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style li.active div[data-role="wrapper"] {
    background: #F5F7F9 !important;
}
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style li.active span[data-role="expander"] svg {
        fill: #949DAC !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style:hover span[data-role="expander"].gj-tree-glyphicons-expander svg {
        fill: #949DAC !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style li.active span[data-role="icon"] svg .dbq-icon-color-1 {
        fill: #FFFFFF !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style li.active span[data-role="icon"] svg .dbq-icon-color-2 {
        fill: #0054F0 !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style li.active span[data-role="display"] {
        color: #0054F0 !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style li.active span[data-role="options"] svg {
        fill: #949DAC !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style li.active:hover {
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style li.active span[data-role="options"] svg:hover {
        fill: #001323 !important;
    }

/* text hover in expanded-expanded state */
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.list-group-item.dbq-expand-active-style li:hover span[data-role="display"] {
        color: #0054F0 !important;
    }

/* ****************************** 
    Dropdown styling (topbar)
    .dropdown-menu <-- this class counts for -> (CUSTOM DROPDOWN (bootstrap) / MULTISELECT) .. BUT .. also for dropdown in topbar (profile)
****************************** */
#class-list-menu .dropdown-menu {
    background-color: #f5f7f9;
    border: 0;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
    #class-list-menu .dropdown-menu li.username {
        background: #FFFFFF;
        border-bottom: 1px solid #eceff3;
        color: #29343e;
    }
    #class-list-menu .dropdown-menu li.dropdown-header {
        background: #FFFFFF;
        border-top: 1px solid #eceff3;
        color: #8597ad;
    }
        #class-list-menu .dropdown-menu > li:hover > a {
            color: #0054F0 !important;
        }
            #class-list-menu .dropdown-menu > li:hover > a > svg {
                fill: #0054F0 !important;
            }
#class-list-menu .dropdown-header {
    color: #a9b4d4;
    background: #FFFFFF;
}
#class-list-menu .dropdown-menu .dbq-account-dropdown-divider {
    background-color: #eceff3 !important;
}
#class-list-menu .dropdown-menu svg {
    fill: #9ba1ab;
}

/*
    Dropdown in tables
*/
#content-wrapper .dropdown-menu {
    background: #FFFFFF;
    border: 0;
    -webkit-box-shadow: 0 0 5px rgba(0,50,138,0.24);
    -moz-box-shadow: 0 0 5px rgba(0,50,138,0.24);
    box-shadow: 0 0 5px rgba(0,50,138,0.24);
}
    #content-wrapper .dropdown-menu li {
        background: #f0f3f7;
    }
        #content-wrapper .dropdown-menu li a {
            color: #001323;
        }
        #content-wrapper .dropdown-menu li:hover {
            background: #0054F0 !important;
        }
            #content-wrapper .dropdown-menu li:hover a {
                color: #ffffff !important;
                text-decoration: none !important;
            }

/* ****************************** 
    RUMM - place icon
****************************** */
.icon-marker-before:before {
    background: url(/DbqLibraries/DbqDeveloperTools/img/dbq-place-icon-20x20-white.svg) right center no-repeat !important;
    background-size: 10px 10px;
    width: 12px;
    height: 12px;
    padding: 5px;
}

/* ****************************** 
    Theme Switch
****************************** */
.dbq-switch {
    /*background: #f5f7f9;*/
    border: 2px solid #e5e7ec;
}
.dbq-switch-handle {
    background: #0054F0;
    color: #ffffff;
}
    .dbq-switch-handle:before {
        background: linear-gradient(to bottom, #eeeeee, #ccc);
        background-image: -webkit-linear-gradient(top, #eeeeee, #ccc);
    }
.dbq-switch-input:checked ~ .dbq-switch-handle {
    color: #FFFFFF;
    background: #0054F0;
    border: 2px solid #004ad4;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}
    .dbq-switch:hover .dbq-switch-handle {
        background: #004ad4;
        border: 2px solid #0040b7;
    }
    .dbq-switch:hover .dbq-switch-input:checked ~ .dbq-switch-handle {
        background: #004ad4;
        border: 2px solid #0040b7;
    }

.dbq-switch-input {
    opacity: 0;
    top: 0;
    left: 0;
    box-sizing: content-box;
    /* toegevoegd voor sourceCode switch, anders was hij niet klikbaar */
    position: absolute;
    width: 100%;
    z-index: 999; /*9999*/
    cursor: pointer;
    /* new */
    height: 26px;
}
.dbq-switch-text {
    background: 0;
}
    .dbq-switch-text:before {
        content: attr(data-off);
        color: #001323;
    }
    .dbq-switch-text:after {
        content: attr(data-on);
        color: #001323;
    }
.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;
    }


/* ****************************** 
    Apex Charts
****************************** */
.element-graph {
    background: #FFFFFF;
}

/* Pie chart lines */
.apexcharts-pie-series path {
    stroke: #FFFFFF !important;
    stroke-width: 3px;
}
.apexcharts-datalabels rect {
    stroke: #FFFFFF !important;
    stroke-width: 1px;
}

.apexcharts-canvas ::-webkit-scrollbar {
    width: 10px !important;
}
.apexcharts-canvas ::-webkit-scrollbar-thumb {
    background-color: #e8e8e8 !important;
    border: 2px solid #FFFFFF;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.apexcharts-title-text {
    fill: #001323 !important;
}

/*
    Datalabels
*/
.apexcharts-datalabels text {
    color: #6f707b !important;
    fill: #6f707b !important;
    mix-blend-mode: multiply;
    font-weight: 600 !important;
}
.apexcharts-tooltip-text-y-value, .apexcharts-tooltip-text-goals-value, .apexcharts-tooltip-text-z-value {
    color: #6f707b !important;
    fill: #6f707b !important;
    mix-blend-mode: multiply;
    font-weight: 600 !important;
}
.apexcharts-tooltip-text-y-label {
    color: #6f707b !important;
    fill: #6f707b !important;
    mix-blend-mode: multiply;
    font-weight: 500 !important;
}
/* If IE11 unset blend-mode */
*::-ms-backdrop, .apexcharts-tooltip-text-y-label, .apexcharts-tooltip-text-y-value, .apexcharts-tooltip-text-goals-value, .apexcharts-tooltip-text-z-value, .apexcharts-datalabels text {
    mix-blend-mode: unset;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Columns / rows */
.apexcharts-grid-column:nth-child(even) {
    fill: rgba(252, 252, 252, 0.1) !important;
    opacity: 1 !important;
}
.apexcharts-grid-column:nth-child(odd) {
    fill: rgba(252, 252, 252, 0.2) !important;
    opacity: 1 !important;
}

.apexcharts-grid-row:nth-child(even) {
    fill: rgba(252, 252, 252, 0.1) !important;
    opacity: 1 !important;
}
.apexcharts-grid-row:nth-child(odd) {
    fill: rgba(252, 252, 252, 0.2) !important;
    opacity: 1 !important;
}

/* tooltip */
.apexcharts-tooltip {
    border: 4px solid #FFFFFF !important;
    background: #FFFFFF !important;
    -webkit-box-shadow: 0 0 20px rgba(0,13,37,0.2) !important;
    -moz-box-shadow: 0 0 20px rgba(0,13,37,0.2) !important;
    box-shadow: 0 0 20px rgba(0,13,37,0.2) !important;
    color: #001323 !important;
}
    .apexcharts-tooltip .apexcharts-tooltip-title {
        background: #FFFFFF !important;
        border-bottom: 4px solid #FFFFFF !important;
        color: #001323 !important;
    }
.apexcharts-tooltip-series-group {
}
.apexcharts-tooltip-y-group {
}
.apexcharts-tooltip * {
}
.apexcharts-tooltip-text-label {
    /*color: #FFFFFF;*/
    color: #737373 !important;
    mix-blend-mode: multiply;
    font-weight: 600 !important;
}
.apexcharts-tooltip-text-value, .apexcharts-tooltip-text-z-value {
    /*color: #777777 !important;*/
    color: #696969 !important;
    mix-blend-mode: multiply;
    font-weight: 500 !important;
}
.apexcharts-xaxistooltip {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    -webkit-box-shadow: 0 0 20px rgba(0,13,37,0.15) !important;
    -moz-box-shadow: 0 0 20px rgba(0,13,37,0.15) !important;
    box-shadow: 0 0 20px rgba(0,13,37,0.15) !important;
    color: #001323 !important;
    font-weight: 600 !important;
}
.apexcharts-xaxistooltip-bottom:before {
    border-bottom-color: #FFFFFF !important;
}
.apexcharts-xaxistooltip-bottom:after {
    border-bottom-color: #FFFFFF !important;
}
.apexcharts-tooltip.apexcharts-theme-dark {
    background: 0 !important;
}

.apexcharts-tooltip-series-group.apexcharts-active, .apexcharts-tooltip-series-group:last-child {
    padding-bottom: 0 !important;
}

/* 
    Legend 
*/
.apexcharts-series-markers-wrap circle {
    stroke: #FFFFFF !important;
}
.apexcharts-legend-marker {
    border: 4px solid #FFFFFF !important;
}
.apexcharts-legend-text {
    color: #001323 !important;
}

/* 
    GRID, X/Y 
*/
.apexcharts-gridline {
    stroke: #ececec !important;
}

.apexcharts-text tspan {
    fill: #c5c9d2 !important;
    font-weight: 500 !important;
}

.apexcharts-xaxis-title text, .apexcharts-yaxis-title text {
    fill: #001323 !important;
    font-weight: 600 !important;
}

/*
    toolbar styling
*/
.apexcharts-zoom-icon, .apexcharts-zoomin-icon, .apexcharts-zoomout-icon, .apexcharts-reset-icon, .apexcharts-pan-icon, .apexcharts-selection-icon, .apexcharts-menu-icon, .apexcharts-toolbar-custom-icon {
}
.apexcharts-toolbar {
    /*border-top: 1px solid #e5e7ec;*/
}
    .apexcharts-toolbar svg {
        stroke: none !important;
        fill: #001323 !important;
    }
.apexcharts-toolbar-custom-icon:hover svg, .apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg, .apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg, .apexcharts-theme-light .apexcharts-zoomin-icon:hover svg, .apexcharts-theme-light .apexcharts-zoomout-icon:hover svg, .apexcharts-theme-light .apexcharts-reset-icon:hover svg, .apexcharts-theme-light .apexcharts-menu-icon:hover svg {
    fill: #666 !important;
}
.apexcharts-toolbar .apexcharts-selected svg {
    stroke: none !important;
    fill: #0054F0 !important;
}

/*
    Menu (download)
*/
.apexcharts-menu {
    background: #FFFFFF !important;
    border: 4px solid #FFFFFF !important;
    -webkit-box-shadow: 2px 2px 25px rgba(0,0,0,0.1) !important;
    -moz-box-shadow: 2px 2px 25px rgba(0,0,0,0.1) !important;
    box-shadow: 2px 2px 25px rgba(0,0,0,0.1) !important;
}
    .apexcharts-menu .apexcharts-menu-item {
        color: #001323 !important;
    }
        .apexcharts-menu .apexcharts-menu-item:hover {
            background: #f4f4f4 !important;
            color: #0054F0 !important;
        }

/* selection area */
.apexcharts-selection-rect {
    fill: rgb(36, 41, 46, 0.5);
}

/* ****************************** 
    No data available overlay
****************************** */
.dbq-no-data-available-container {
    background: #FFFFFF;
}
    .dbq-no-data-available-container .dbq-no-data-available-image svg {
        fill: #0054F0;
    }
    .dbq-no-data-available-container .dbq-no-data-available-text {
        color: #001323;
    }

#document-topics .topic .dbq-graph-header h3,
.dbq-form .dbq-graph-header h3,
.dbq-no-data-chart-title {
    color: #001323;
}

/* ****************************** 
    Popup notification
****************************** */
.dbq-popup-notification-container {
    background: #ffffff;
    -webkit-box-shadow: 0 0 30px rgba(0,13,68,0.15);
    -moz-box-shadow: 0 0 30px rgba(0,13,68,0.15);
    box-shadow: 0 0 30px rgba(0,13,68,0.15);
}
    .dbq-popup-notification-container::after {
        content: " ";
        background: #ffffff;
    }
    .dbq-popup-notification-container h3 {
        color: #0054F0;
    }
    .dbq-popup-notification-container p {
        color: #43464c;
    }
    .dbq-popup-notification-container button {
    }
    .dbq-popup-notification-container button.btn-link {
        color: #0054F0;
    }
        .dbq-popup-notification-container button.btn-link:hover {
            color: #0050de;
        }
        .dbq-popup-notification-container button.btn-primary {
            background-color: #0054F0;
            border: 2px solid #004ad4;
            -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
            -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
            box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
        }
            .dbq-popup-notification-container button.btn-primary:hover {
                background: #004ad4 !important;
                border: 2px solid #0040b7 !important;
                -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.4);
                -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.4);
                box-shadow: 0px 1px 4px rgba(0,0,0,0.4);
            }

.modal-open .modal {
    background: rgb(0 4 14 / 70%);
}
.modal-backdrop {
    background-color: #06162A;
    opacity: 0.9;
}



/*
    Buttons left over.. need to replace probably
*/

input[type="checkbox"]:disabled, input[type="checkbox"]:disabled:hover {
    cursor: not-allowed !important;
}

#content-wrapper .input-group .form-control:first-child, #content-wrapper .input-group-addon:first-child, #content-wrapper .input-group-btn:first-child > .btn, #content-wrapper .input-group-btn:first-child > .btn-group > .btn, #content-wrapper .input-group-btn:first-child > .dropdown-toggle, #content-wrapper .input-group-btn:last-child > .btn-group:not(:last-child) > .btn, #content-wrapper .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
}

.dbq-graph-scale button {
    color: #626D86;
}

.file-download-button svg {
    fill: #FFFFFF;
}

#content-wrapper #navigator .navigation-button {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
.foldertree-header .foldertree-header-name, #navigator .navigation-button .navigation-button-title {
    font-weight: 600;
    color: #000000;
}


/* toggle (bulk changes) */
#classlist label.classlist-toolbar-item {
    background: 0;
}
    #classlist label.classlist-toolbar-item:hover {
        background: 0 !important;
    }
#classlist #classlist-search-list-table .classlist-toolbar-item {
}
#content-wrapper .toggle.btn {
    background: #fff !important;
    border-color: #FFF;
    /*border: 1px solid #e7e7e7 !important; <-- this is affecting (bulk-changes toggle in RUMM master data -> 2x 1st table row click -> product verzameling)*/
    border: 0 !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    margin-left: -3px !important;
}
#content-wrapper .toggle-group .btn-primary {
    background: #0054F0 !important;
    border: 2px solid #004ad4 !important;
    border-color: #004ad4 !important;
}
#content-wrapper .toggle-group label.btn-default {
    background: #fff !important;
    color: #0054f0 !important;
    border: 2px solid #0054f0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
    #content-wrapper .toggle-group label.btn-default:hover {
        background: red;
        color: #000;
    }
#content-wrapper .toggle-group span.toggle-handle {
    background: #0054f0 !important;
    border: 0;
}
#classlist .classlist-toolbar-item {
    /*color: #8c8c8c; <-- seems not right.. */
}

/*
    toggle button style override (bulk changes)
*/
#content-wrapper .toggle .btn.btn-primary, #content-wrapper .toggle button.btn.btn-primary:enabled,
#content-wrapper .toggle .btn.btn-default, #content-wrapper .toggle button.btn.btn-default:enabled {
    border: 0 !important;
}
    /* 2 times btn-primary.. this is the container item */
    #content-wrapper .toggle.btn.btn-primary:hover, #content-wrapper .toggle.btn.btn-primary:enabled:hover,
    #content-wrapper .toggle.btn.btn-default:hover, #content-wrapper .toggle.btn.btn-default:enabled:hover {
        border: 0 !important;
        color: #FFFFFF !important;
    }
    /* 2 times btn-primary.. this is the child item */
    #content-wrapper .toggle .btn.btn-primary:hover, #content-wrapper .toggle button.btn.btn-primary:enabled:hover,
    #content-wrapper .toggle .btn.btn-default:hover, #content-wrapper .toggle button.btn.btn-default:enabled:hover {
        background: #004ad4 !important;
        border: 0 !important; /*2px solid #0040b7*/
        color: #FFFFFF !important;
    }
        #content-wrapper .toggle .btn.btn-primary:hover span.toggle-handle, #content-wrapper .toggle button.btn.btn-primary:enabled:hover span.toggle-handle {
            background: #0040b7 !important;
        }
        #content-wrapper .toggle .btn.btn-default:hover span.toggle-handle, #content-wrapper .toggle button.btn.btn-default:enabled:hover span.toggle-handle {
            background: #004ad4 !important;
        }
/* on/off */
#content-wrapper .toggle .toggle-group span.toggle-handle {
    background: #0040b7 !important;
    border: 0 !important;
}
#content-wrapper .toggle.off .toggle-group span.toggle-handle {
    background: #004ad4 !important;
    border: 0 !important;
}
#content-wrapper .toggle .toggle-group span.toggle-handle:hover, #content-wrapper .toggle.off .toggle-group span.toggle-handle:hover {
    border: 0 !important;
}
#content-wrapper .toggle:hover .toggle-group span.toggle-handle, #content-wrapper .toggle.off:hover .toggle-group span.toggle-handle {
    background: #0040b7 !important;
}

/*
    Input list
*/
/* Enabled */
.modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.enabled,
.modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:enabled,
.modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.enabled,
.modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:enabled {
    background: 0 !important;
    border: 0 !important;
    border-left: 1px solid #e5e7ec !important;
}
    .modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.enabled svg,
    .modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:enabled svg,
    .modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.enabled svg,
    .modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:enabled svg {
        fill: #0054f0 !important;
    }
    /* Enabled hover */
    .modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.enabled:hover,
    .modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:enabled:hover,
    .modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.enabled:hover,
    .modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:enabled:hover {
        background: #0054f0 !important;
    }
        .modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.enabled:hover svg,
        .modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:enabled:hover svg,
        .modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.enabled:hover svg,
        .modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:enabled:hover svg {
            fill: #FFFFFF !important;
        }
/* Disabled */
.modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.disabled,
.modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:disabled,
.modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.disabled,
.modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:disabled {
    background: #e5e7ec !important;
    border-left: 1px solid #e5e7ec !important;
}
    .modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.disabled svg,
    .modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:disabled svg,
    .modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.disabled svg,
    .modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:disabled svg {
        fill: #001323 !important;
    }
/* Disabled hover */
    .modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.disabled:hover,
    .modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:disabled:hover,
    .modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.disabled:hover,
    .modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:disabled:hover {
        background: #e5e7ec !important;
        border-left: 1px solid #e5e7ec !important;
    }
        .modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.disabled:hover svg,
        .modal #document-topics div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:disabled:hover svg,
        .modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button.disabled:hover svg,
        .modal .dbq-form div[data-has-visible-remove-buttons="true"] .input-list-item-remove button.input-list-item-remove-button:disabled:hover svg {
            fill: #001323 !important;
        }

/* add btn */
#document-topics .input-list-item-add button.input-list-item-add-button:enabled:hover,
.dbq-form .input-list-item-add button.input-list-item-add-button:enabled:hover {
    background: #0054f0 !important;
}
    #document-topics .input-list-item-add button.input-list-item-add-button:enabled:hover svg,
    .dbq-form .input-list-item-add button.input-list-item-add-button:enabled:hover svg {
        fill: #FFFFFF !important;
    }
    #document-topics .input-list-item-add button.input-list-item-add-button:enabled:hover span,
    .dbq-form .input-list-item-add button.input-list-item-add-button:enabled:hover span {
        color: #FFFFFF !important;
    }
/* add button on top or bottom (ascending/descending) */
#document-topics .input-list[data-sort-direction="0"] .input-list-item-add button.input-list-item-add-button:enabled,
.dbq-form .input-list[data-sort-direction="0"] .input-list-item-add button.input-list-item-add-button:enabled {
    background: #f0f2f5 !important;
}
#document-topics .input-list[data-sort-direction="1"] .input-list-item-add button.input-list-item-add-button:enabled,
.dbq-form .input-list[data-sort-direction="1"] .input-list-item-add button.input-list-item-add-button:enabled {
    background: #f0f2f5 !important;
}
    #document-topics .input-list[data-sort-direction="0"] .input-list-item-add button.input-list-item-add-button:enabled:hover,
    #document-topics .input-list[data-sort-direction="1"] .input-list-item-add button.input-list-item-add-button:enabled:hover,
    .dbq-form .input-list[data-sort-direction="0"] .input-list-item-add button.input-list-item-add-button:enabled:hover,
    .dbq-form .input-list[data-sort-direction="1"] .input-list-item-add button.input-list-item-add-button:enabled:hover {
        background: #0054f0 !important;
    }

/* Input list styling (when disabled) when no add/remove buttons visible */
.input-list {
    background: #f0f2f5; /* <- in principle all input-list should have this background.. not: #F5F7F9 , note the situations where this should be different */
}
    .input-list .input-list-content {
        border: 2px solid #e5e7ec;
    }
form[data-view-mode="View"] div.input-list .input-list-content .input-list-item {
    /*border-bottom: 1px solid #F5F7F9; <-- if the disabled style should have different border-bottom */
}
    .input-list[data-has-visible-remove-buttons="false"] .input-list-item-remove-button-container {
        display: none;
    }
    .input-list .input-list-content .input-list-item:last-of-type, 
    form[data-view-mode="View"] .input-list-item:last-of-type {
        border-bottom: 0 !important;
    }

/* Add/remove dashboard */
/* This is ALSO for a custom select in a button tag.. CMS -> Facturatie -> voeg factuurtype toe */
#content-wrapper button.btn-default.dropdown-toggle:enabled, .modal-content button.btn-default.dropdown-toggle:enabled {
    background: #FFFFFF !important;
    border: 2px solid #e5e7ec !important;
    color: #001323 !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
    #content-wrapper button.btn-default.dropdown-toggle:enabled svg, .modal-content button.btn-default.dropdown-toggle:enabled svg {
        fill: #0054F0 !important;
    }
    #content-wrapper button.btn-default.dropdown-toggle:enabled#dashboard-list-add-button span {
        color: #0054F0;
    }

/* No items but we can see the add button */
div.input-list[data-has-visible-items="false"] .input-list-content {
    border: 0 !important;
}
div.input-list[data-has-visible-add-button="true"][data-has-visible-remove-buttons="true"][data-has-visible-items="false"] .input-list-item-add {
    border: 2px solid #e5e7ec !important;
}

/*
    Button list in modals
*/
#content-wrapper .button_list button.btn-primary:hover:enabled, .modal-content .button_list button.btn-primary:hover:enabled {
    background: #0054F0 !important;
    border: 2px solid #004ad4 !important;
}

/* Disabled form styling */
#document-topics .topic .form-control:disabled, #document-topics .topic .form-control.disabled,
.dbq-form .form-control:disabled, .dbq-form .form-control.disabled {
    background: #e5e7ec !important;
    border: 2px solid #e5e7ec !important;
    opacity: 1 !important;
    color: #001323 !important;
    cursor: not-allowed;
    -webkit-text-fill-color: #001323;
    -webkit-opacity: 1; /* Override iOS opacity change affecting text & background color */
}

/* add/remove dashboard buttons (Attero) */
.dbq-light-mode #content-wrapper .dashboard-list-add-button-container button.btn-default:enabled, .dbq-light-mode #content-wrapper .dashboard-list-remove-button-container button.btn-default:enabled {
    background: 0 !important;
    border: 2px solid #e2e7f3 !important;
    opacity: 1;
}
.dashboard-list-add-button-container button, .dashboard-list-remove-button-container button {
    background: 0 !important;
    border: 2px solid #e2e7f3 !important;
    opacity: 1;
}

/* Infinite refresh */
#content-wrapper button#classlist-refresh-button.btn-default:disabled, .modal-content button#classlist-refresh-button.btn-default:disabled,
#content-wrapper button#classlist-refresh-button.btn-default.disabled, .modal-content button#classlist-refresh-button.btn-default.disabled,
#content-wrapper button#classlist-refresh-button.btn-secondary:disabled, .modal-content button#classlist-refresh-button.btn-secondary:disabled,
#content-wrapper button#classlist-refresh-button.btn-secondary.disabled, .modal-content button#classlist-refresh-button.btn-secondary.disabled {
    background: #e5e7ec !important;
    border: 2px solid #e5e7ec !important;
}
    #content-wrapper button#classlist-refresh-button.btn-default:disabled:hover, .modal-content button#classlist-refresh-button.btn-default:disabled:hover,
    #content-wrapper button#classlist-refresh-button.btn-default.disabled:hover, .modal-content button#classlist-refresh-button.btn-default.disabled:hover,
    #content-wrapper button#classlist-refresh-button.btn-secondary:disabled:hover, .modal-content button#classlist-refresh-button.btn-secondary:disabled:hover,
    #content-wrapper button#classlist-refresh-button.btn-secondary.disabled:hover, .modal-content button#classlist-refresh-button.btn-secondary.disabled:hover {
        background: #e5e7ec !important;
        border: 2px solid #e5e7ec !important;
    }
        #content-wrapper button#classlist-refresh-button.btn-default:disabled svg, .modal-content button#classlist-refresh-button.btn-default:disabled svg,
        #content-wrapper button#classlist-refresh-button.btn-default.disabled svg, .modal-content button#classlist-refresh-button.btn-default.disabled svg,
        #content-wrapper button#classlist-refresh-button.btn-secondary:disabled svg, .modal-content button#classlist-refresh-button.btn-secondary:disabled svg,
        #content-wrapper button#classlist-refresh-button.btn-secondary.disabled svg, .modal-content button#classlist-refresh-button.btn-secondary.disabled svg
        #content-wrapper button#classlist-refresh-button.btn-default:disabled:hover svg, .modal-content button#classlist-refresh-button.btn-default:disabled:hover svg,
        #content-wrapper button#classlist-refresh-button.btn-default.disabled:hover svg, .modal-content button#classlist-refresh-button.btn-default.disabled:hover svg,
        #content-wrapper button#classlist-refresh-button.btn-secondary:disabled:hover svg, .modal-content button#classlist-refresh-button.btn-secondary:disabled:hover svg,
        #content-wrapper button#classlist-refresh-button.btn-secondary.disabled:hover svg, .modal-content button#classlist-refresh-button.btn-secondary.disabled:hover svg {
            fill: #001323 !important;
        }

#document-topics .topic .dbq-form-group-title p, #document-topics .topic .dbq-form-group-title span, .modal .form-group label, .modal #document-topics .dbq-custom-label p,
.dbq-form .dbq-form-group-title p, .dbq-form .dbq-form-group-title span, .modal .form-group label, .modal .dbq-form .dbq-custom-label p {
    margin: 0;
    padding: 7px 10px;
    background: #f0f2f5;
    border: 2px solid #e5e7ec;
    border-bottom: 0;
    color: #595F6E;
    font-weight: 600 !important;
    width: 100% !important; /* auto */
    /*float: left; float left not possible for noImageFound text, then it wil not float..*/
    float: left; /* needed for labels.. so make another solution for noImageFound */
    line-height: 12px;
}
form[data-view-mode="View"] #document-topics .topic .dbq-form-group-title p,
form[data-view-mode="View"] .dbq-form .dbq-form-group-title p {
    background: #e5e7ec;
    border: 2px solid #e5e7ec;
}

#document-topics .topic .dbq-form-group-title.dbq-label-disabled span.dbq-element-header-5, #document-topics .topic .dbq-form-group-title.dbq-label-disabled p,
.dbq-form .dbq-form-group-title.dbq-label-disabled span.dbq-element-header-5, .dbq-form .dbq-form-group-title.dbq-label-disabled p {
    background: #e5e7ec;
    border: 2px solid #e5e7ec;
    border-bottom: 0;
    opacity: 1 !important;
}

.dbq-label-disabled + .form-group .input-group-addon svg {
    background: #e5e7ec;
    color: #001323 !important;
}

#document-topics .multiple-select-selectmulti[data-is-read-only="true"],
.dbq-form .multiple-select-selectmulti[data-is-read-only="true"] {
    padding: 10px; /*15px*/
    background: #FFFFFF;
    border: 2px solid #e5e7ec;
    font-weight: 600;
}
.modal #document-topics .multiple-select-selectmulti[data-is-read-only="true"],
.modal .dbq-form .multiple-select-selectmulti[data-is-read-only="true"] { /*form[data-view-mode="View"] <-- data is read only should be enough */
    background: #e5e7ec;
}

/* Custom select (need to override button style) */
#document-topics .dbq-select-type-dropdown-tree button.btn-default.dropdown-toggle:disabled,
.dbq-form .dbq-select-type-dropdown-tree button.btn-default.dropdown-toggle:disabled {
    background: #e5e7ec !important;
    height: 50px !important;
    border: 2px solid #e5e7ec !important; /*border-top: 2px solid #e5e7ec !important; <-- why only border-top?? selectboxes in modal will get another border bottom/left/right*/
}
    #document-topics .dbq-select-type-dropdown-tree button.btn-default.dropdown-toggle:disabled svg,
    .dbq-form .dbq-select-type-dropdown-tree button.btn-default.dropdown-toggle:disabled svg {
        fill: #001323 !important;
    }

#document-topics .form-control.file-upload-filename:focus,
.dbq-form .form-control.file-upload-filename:focus {
    box-shadow: none;
}
/* Focus (Selected) */
#document-topics .form-control:focus,
.dbq-form .form-control:focus {
    border-color: #0054F0 !important;
    outline: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
#document-topics .topic .form-control:focus + .input-group-btn .image-file-upload-input,
.dbq-form .form-control:focus + .input-group-btn .image-file-upload-input {
    border-color: #0054F0 !important;
}
#document-topics .form-control.file-upload-filename:focus,
.dbq-form .form-control.file-upload-filename:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}


/*
    Text styling
*/
.dbq-wrapper, #content-wrapper .row.dbq-wrapper {
    background: #FFFFFF;
    color: #001323;
    -webkit-box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
    -moz-box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
    box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
}

/*
    no image found text
*/
.dbq-no-image-found-text {
    background: #e5e7ec !important;
    border: 2px solid #e5e7ec;
    color: #001323;
}

/*
    Document editor
*/
#document-editor-side-menu-container select option {
    background: #FFFFFF;
    color: #001323;
    fill: #001323;
}

/* **************************************************
    Titles + text
    - this are the other styling (from DocumentBuilder.css) DocumentBuilder.css should only be default styling.

    Rules:
    - Line height should always be 8 more than size ! (because of container margins etc.. with small margins it is obvious when it has a few pixels difference) SO if line-height is not enough.. change it voor all text and titles
    - Standard colors NO IMPORTANT should be possible to override
************************************************** */
#document-topics .topic h1,
.dbq-form h1 {
    color: #0054F0;
}
#document-topics .topic h4,
.dbq-form h4 {
    color: #0054F0;
}
#document-topics .topic p,
.dbq-form p {
    color: #43464c;
}
form[data-view-mode="View"] #document-topics .input-list p,
form[data-view-mode="View"] .dbq-form .input-list p {
    color: #001323;
}
.dbq-divider.input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="true"] {
    background: #e5e7ec !important;
}
    .dbq-divider.input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="true"] .input-list-content {
        background: #e5e7ec !important;
        border: 2px solid #e5e7ec !important;
    }
#document-topics .topic .action-button span,
.dbq-form .action-button span {
    background: #0054F0;
    border-color: #0054F0;
    color: #fff;
}


/*
    Tooltips on labels
*/
.tooltip-inner {
    background: #F9F8D9;
    color: #001323;
    -webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
    box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    border-top-color: #F9F8D9;
    /*box-shadow: 0px 1px 5px rgb(0 0 0 / 30%); <-- shadow not working on pseudo elements */
    -webkit-filter: drop-shadow(0px 1px 5px rgba(0,0,0,0.5));
    filter: drop-shadow(0px 1px 5px rgba(0,0,0,0.5));
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#000')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#000')";
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #F9F8D9;
    /*box-shadow: 0px 1px 5px rgb(0 0 0 / 30%); <-- shadow not working on pseudo elements */
    -webkit-filter: drop-shadow(0px 1px 5px rgba(0,0,0,0.5));
    filter: drop-shadow(0px 1px 5px rgba(0,0,0,0.5));
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#000')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#000')";
}


/* 
    validation styling always at bottom! 
*/
.validation-message.error {
    display: none;
    color: #fff !important;
    background: #D5473C !important;
    padding: 0 5px;
}
    .validation-message.error::before {
        content: '';
        width: 10px;
        height: 10px;
        border-right: 10px solid transparent !important;
        border-left: 0 !important;
        border-bottom: 10px solid #D5473C !important;
        position: absolute;
        left: 0;
        top: -10px;
    }
    .validation-message.error::after {
        content: '';
        width: 10px;
        height: 10px;
        border-left: 10px solid transparent;
        border-right: 0 !important;
        border-bottom: 10px solid #D5473C !important;
        position: absolute;
        right: 0;
        top: -10px;
    }

/*
    Error input
*/
#document-topics .topic .element .property input:not([type]).error,
#document-topics .topic .element .property input[type="date"].error,
#document-topics .topic .element .property input[type="datetime-local"].error,
#document-topics .topic .element .property input[type="email"].error,
#document-topics .topic .element .property input[type="number"].error,
#document-topics .topic .element .property input[type="password"].error,
#document-topics .topic .element .property input[type="search"].error,
#document-topics .topic .element .property input[type="tel"].error,
#document-topics .topic .element .property input[type="time"].error,
#document-topics .topic .element .property input[type="text"].error,
#document-topics .topic .element .property input[type="url"].error,
#document-topics .topic .form-control.error,
#document-topics .topic .element .button_list.error,
.dbq-form .element .property input:not([type]).error,
.dbq-form .element .property input[type="date"].error,
.dbq-form .element .property input[type="datetime-local"].error,
.dbq-form .element .property input[type="email"].error,
.dbq-form .element .property input[type="number"].error,
.dbq-form .element .property input[type="password"].error,
.dbq-form .element .property input[type="search"].error,
.dbq-form .element .property input[type="tel"].error,
.dbq-form .element .property input[type="time"].error,
.dbq-form .element .property input[type="text"].error,
.dbq-form .element .property input[type="url"].error,
.dbq-form .element .checkbox.error,
.dbq-form .form-control.error,
.dbq-form .element .button_list.error {
    background: #FEE5E4 !important;
    background-color: #FEE5E4 !important;
    border-color: #D5473C !important;
    color: #001323 !important;
}
    #document-topics .topic .form-control.error:focus,
    .dbq-form .form-control.error:focus {
        /*border-color: #D5473C !important;*/
        outline: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    /* group addon/append (icon or button) should also get error state */
    #document-topics .topic .form-control.error + .input-group-append button,
    .dbq-form .form-control.error + .input-group-append button {
        border-color: #D5473C !important;
    }


/*
    Custom arrow for select elements (not all.. example: CMS -> content management -> new folder -> the folderType selectbox )
    !!! this should be after error/validation styling otherwise the arrow will not be visible
*/
#document-topics .topic select.form-control,
#document-topics .topic select.form-control.error,
.dbq-form select.form-control,
.dbq-form select.form-control.error {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: transparent;
    background-repeat: no-repeat !important;
    background-repeat: no-repeat !important;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%230054F0' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><g><path d='M10,16L0,6l2-2l8,8l8-8l2,2L10,16z'/></g></svg>") !important;
    color: #001323 !important;
    background-position-x: calc(100% - 10px) !important;
    background-position-y: 50% !important;
    background-size: 10px 10px !important;
    border-radius: 0 0 10px 10px !important;
    padding-left: 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 30px 0 10px !important;
}
    #document-topics .topic select.form-control option,
    .dbq-form select.form-control option {
        background: #FFFFFF !important; /*#14181f <-- changed to this, but maybe that was for disabled */
        color: #001323 !important;
    }
#document-topics .topic .multiple-select-selectmulti select.form-control,
.dbq-form .multiple-select-selectmulti select.form-control {
    background-image: none !important;
    padding: 0 !important;
}


/* ****************************** 
    Hover indication for drag/drop on file input
****************************** */
.file-upload-hover {
    background-color: rgba(45,121,255,0.1) !important;
    border: 2px dashed #0054F0 !important;
}


/* ******************************
    Timeline 
****************************** */
#classlist-timeline.fc.classlist-container {
}
#classlist-timeline.fc table thead tr:hover,
#classlist-timeline.fc table thead tr th:hover,
#classlist-timeline.fc table tbody tr:hover {
    background: 0 !important;
    color: #001323 !important;
}
#content-wrapper #classlist-timeline.fc button.btn-primary.active {
    background: #011f58 !important;
    border: 0 !important;
    color: #ffffff !important;
}
#classlist-timeline.fc button.fc-today-button:disabled {
    background: #e5e7ec !important;
    border: 2px solid #e5e7ec !important;
    color: #001323 !important;
    opacity: 1 !important;
}
    #classlist-timeline.fc button.fc-today-button:disabled:hover {
        background: #e5e7ec !important;
        border: 2px solid #e5e7ec !important;
        color: #001323 !important;
        opacity: 1 !important;
    }
#classlist-timeline.fc .fc-view-harness {
    background: #FFFFFF;
}
#classlist-timeline.fc .fc-timeline table.table-bordered {
    border: 1px solid #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%);
}
    #classlist-timeline.fc .fc-timeline table.table-bordered table.table-bordered {
        border: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    #classlist-timeline.fc .fc-scroller::-webkit-scrollbar-track {
        background-color: #FFFFFF !important;
    }
#classlist-timeline.fc .fc-scroller::-webkit-scrollbar-thumb {
    border: 4px solid #FFFFFF !important;
}
#classlist-timeline.fc .fc-scrollgrid-section-liquid > td:first-of-type {
    border: 0;
}

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

/* Dropdown */
#content-wrapper .dropdown-menu .dropdown-item {
    color: #001323;
}

/*
    Pagination color override <--- DONT KNOW WHY... this is not good for portal styling..
*/
/*.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 {
    color: #0054F0;
}
.ui-iggrid .ui-iggrid-paging .ui-icon:before {
    color: #0054F0;
}
.ui-iggrid .ui-iggrid-paging .ui-iggrid-prevpageimgdisabled.ui-icon:before,
.ui-iggrid .ui-iggrid-paging .ui-iggrid-nextpageimgdisabled.ui-icon:before,
.ui-iggrid .ui-iggrid-paging .ui-iggrid-paging-item.ui-iggrid-firstpage .ui-iggrid-firstpageimgdisabled.ui-icon:before,
.ui-iggrid .ui-iggrid-paging .ui-iggrid-paging-item.ui-iggrid-lastpage .ui-iggrid-lastpageimgdisabled.ui-icon:before {
    color: #001323;
}
*/


#content-wrapper #classlist .form-control {
    border: 2px solid #e5e7ec;
}










/* 
    ##################################################
    default styling override 
    ##################################################
*/
.input-group-btn span,
.file-upload-input span {
    color: #0054F0;
}

.checkbox .cr .cr-icon {
    margin: 0;
}

.document-class-list-filter.checkbox-bottom span.dbq-checkbox-label-filters,
.document-class-list-filter label,
#document-class-list-filters .document-class-list-filter label {
    width: 100%;
    padding: 3px 5px;
}

#content-wrapper #classlist .form-control {
    border: 2px solid #e5e7ec;
}

#document-class-list-filters .document-class-list-filter.checkbox-bottom .cr {
    margin: 5px;
}

.modal #document-topics .dbq-form-group-title + .flex-container.dbq-form-group,
.modal .dbq-form .dbq-form-group-title + .flex-container.dbq-form-group {
    border: 2px solid #e5e7ec;
    background: #FFFFFF;
    margin: 0 0 10px 0;
}
.modal #document-topics .dbq-form-group-title.dbq-label-disabled + .flex-container.dbq-form-group,
.modal .dbq-form .dbq-form-group-title.dbq-label-disabled + .flex-container.dbq-form-group {
    border: 2px solid #e5e7ec;
    background: #e5e7ec;
    margin: 0 0 10px 0;
}

.dbq-form .dbq-form-group-title p,
.modal .dbq-form .row.dbq-form-group-title[data-element-type="Text"] p {
    padding: 7px 10px;
    background: #f0f2f5;
    border: 2px solid #e5e7ec;
    border-bottom: 0; /* why is this gone? needed for: Relatiebheer -> tab: tag categorien -> voeg toe btn (checkbox group) */
}
form[data-view-mode="View"] #document-topics .topic .dbq-form-group-title p,
.modal form[data-view-mode="View"] #document-topics .row.dbq-form-group-title[data-element-type="Text"] p,
form[data-view-mode="View"] .dbq-form .dbq-form-group-title p,
.modal form[data-view-mode="View"] .dbq-form .row.dbq-form-group-title[data-element-type="Text"] p {
    background: #e5e7ec;
}
#document-topics .dbq-form-group-title + .row[data-element-type="InputProperty"] .dbq-property-no-label .multiple-select-selectmulti,
.dbq-form .dbq-form-group-title + .row[data-element-type="InputProperty"] .dbq-property-no-label .multiple-select-selectmulti {
    /*border-top: 0;*/ /* content beheer -> options icon on hover folder -> wijzig afbeelding -> multiple select -> the border should be visible here.. so why was this 0?  */
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border: 1px solid #e5e7ec !important; /* This needs to be 1px ... otherwise all table border should change.. (active/hover/focus)*/
    background-color: #e5e7ec !important;
    color: #646a78 !important;
    fill: #646a78 !important;
}
.ui-widget-content tr td.ui-state-hover,
.ui-widget-header tr td.ui-state-hover {
    background: #0054F0 !important;
    background-color: #0054F0 !important;
    border-color: #0054F0 !important;
    color: #FFFFFF !important;
}

.file-upload input[type=file] {
    height: 46px;
}
#document-topics .topic .image-file-upload-input,
#document-topics .topic .file-upload-input,
#document-topics .image-file-upload .input-group-btn .btn,
.dbq-form .image-file-upload-input,
.dbq-form .file-upload-input,
.file-upload-clear,
#document-topics .image-file-upload .input-group-btn .btn,
.dbq-form .image-file-upload .input-group-btn .btn { /* This is needed to override default stlying */
    padding: 13px 10px;
}

#document-topics .topic .dbq-dynamic-properties-input-list .input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="true"] .dbq-form-group-title span,
.dbq-form .dbq-dynamic-properties-input-list .input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="true"] .dbq-form-group-title span {
    background: #e5e7ec;
}
form[data-view-mode="Modify"] #document-topics .topic .dbq-dynamic-properties-input-list .input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="true"] .dbq-form-group-title span,
form[data-view-mode="Modify"] .dbq-form .dbq-dynamic-properties-input-list .input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="true"] .dbq-form-group-title span {
    background: #f0f2f5;
}

.dbq-dynamic-properties-input-list .input-list .input-list-content {
    border: 2px solid #e5e7ec;
}

/* ****************************** 
    Timeline button override
****************************** */
#content-wrapper .fc button.btn:enabled {
    border-right: 2px solid #004ad4 !important;
    border-left: 0 !important;
    box-shadow: none !important;
}
    #content-wrapper .fc button.btn:enabled:hover {

    }
    #content-wrapper .fc button.btn:enabled:first-of-type {
        border-radius: 8px 0 0 8px !important;
        border-left: 2px solid #004ad4 !important;
    }
    #content-wrapper .fc button.btn:enabled:last-of-type {
        border-radius: 0 8px 8px 0 !important;
    }
    #content-wrapper .fc button.btn:enabled:first-of-type:hover {
        border-left: 2px solid #0040b7 !important;
    }
    #content-wrapper .fc button.btn:enabled:last-of-type:hover {
        border-right: 2px solid #0040b7 !important;
    }





/*
.dbq-form .btn.dbq-select-view-button {
    background: #FFFFFF;
    border-color: #e6e9ed;
}
.btn-outline-primary.dbq-select-view-button:hover svg,
.btn-outline-primary.dbq-select-add-button:hover svg {
    fill: #000000;
}
*/





form[data-view-mode="View"] .btn-outline-primary:not(:disabled):not(.disabled).active,
form[data-view-mode="View"] .btn-outline-primary:not(:disabled):not(.disabled):active,
form[data-view-mode="View"] .show > .btn-outline-primary.dropdown-toggle {
    background: #e5e7ec !important;
}
form[data-view-mode="View"] #document-topics .btn.dbq-select-view-button,
form[data-view-mode="View"] .dbq-form .btn.dbq-select-view-button {
    border: 0 !important;
}
form[data-view-mode="View"] #document-topics .btn.dbq-select-view-button:focus,
form[data-view-mode="View"] .dbq-form .btn.dbq-select-view-button:focus {
    background: #e5e7ec !important;
    border-right: 0 !important;
}
/* Disabled */
#document-topics .dbq-label-disabled + .form-group .btn.dbq-select-view-button,
form[data-view-mode="View"] #document-topics .btn.dbq-select-view-button,
form[data-view-mode="Delete"] #document-topics .btn.dbq-select-view-button,
#document-topics .dbq-label-disabled + .form-group .btn.dbq-select-add-button,
form[data-view-mode="View"] #document-topics .btn.dbq-select-add-button,
form[data-view-mode="Delete"] #document-topics .btn.dbq-select-add-button,
.dbq-form .dbq-label-disabled + .form-group .btn.dbq-select-view-button,
form[data-view-mode="View"] .dbq-form .btn.dbq-select-view-button,
form[data-view-mode="Delete"] .dbq-form .btn.dbq-select-view-button,
.dbq-form .dbq-label-disabled + .form-group .btn.dbq-select-add-button,
form[data-view-mode="View"] .dbq-form .btn.dbq-select-add-button,
form[data-view-mode="Delete"] .dbq-form .btn.dbq-select-add-button {
    background: #e5e7ec;
    border: 0;
}
    form[data-view-mode="View"] #document-topics .btn.dbq-select-view-button:focus,
    form[data-view-mode="Delete"] #document-topics .btn.dbq-select-view-button:focus,
    form[data-view-mode="View"] #document-topics .btn.dbq-select-add-button:focus,
    form[data-view-mode="Delete"] #document-topics .btn.dbq-select-add-button:focus,
    form[data-view-mode="View"] .dbq-form .btn.dbq-select-view-button:focus,
    form[data-view-mode="Delete"] .dbq-form .btn.dbq-select-view-button:focus,
    form[data-view-mode="View"] .dbq-form .btn.dbq-select-add-button:focus,
    form[data-view-mode="Delete"] .dbq-form .btn.dbq-select-add-button:focus {
        background: #e5e7ec !important;
        border: 0 !important;
        box-shadow: none;
    }
    /* Active + focus +++ NOT DISABLED */
#document-topics .btn.dbq-select-view-button:active:focus,
#document-topics .btn.dbq-select-add-button:active:focus,
.dbq-form .btn.dbq-select-view-button:active:focus,
.dbq-form .btn.dbq-select-add-button:active:focus {
    /* the border-left:0 border-top:0 is needed somewhere.. BUT not for BMS -> Medewerkers -> edit icon in table */
    background: #FFFFFF !important;
    border: 2px solid #e5e7ec !important;
    border-left: 0 !important;
    box-shadow: none !important;
}
    /* Active + focus +++ DISABLED*/
#document-topics .dbq-label-disabled + .form-group .btn.dbq-select-view-button:active:focus,
#document-topics .dbq-label-disabled + .form-group .btn.dbq-select-add-button:active:focus,
.dbq-form .dbq-label-disabled + .form-group .btn.dbq-select-view-button:active:focus,
.dbq-form .dbq-label-disabled + .form-group .btn.dbq-select-add-button:active:focus {
    background: #e5e7ec !important;
    border: 2px solid #e5e7ec !important;
    border-top: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}