body {
    background: #121416;
}
#content-wrapper hr {
    border-top: 1px solid #121416;
}
#content-wrapper .btn {
    color: #0075DB;
}
    #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;
        -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;
}
#content-wrapper .btn.focus, #content-wrapper .btn:focus, #content-wrapper .btn:hover {
    color: #fff;
}

/* ****************************** 
    Scroll
****************************** */
/*
    (body background)
    Background:     #121416
    Width:          14px
*/
.modal ::-webkit-scrollbar-track, #navigator::-webkit-scrollbar-track, .multiple-select-selectmulti select::-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: #121416 !important;
}
.modal ::-webkit-scrollbar, #navigator::-webkit-scrollbar, .multiple-select-selectmulti select::-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: #121416 !important;
}
.modal ::-webkit-scrollbar-thumb, #navigator::-webkit-scrollbar-thumb, .multiple-select-selectmulti select::-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: #515662 !important;
    border: 4px solid #121416 !important;
}
    .modal ::-webkit-scrollbar-thumb:hover, #navigator::-webkit-scrollbar-thumb:hover, .multiple-select-selectmulti select::-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: #0075DB !important;
    }
.modal ::-webkit-scrollbar-corner, #navigator::-webkit-scrollbar-corner, .multiple-select-selectmulti select::-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: #121416 !important;
}

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

/*
    (secondary background)
    Background:     #1A1E23
    Width:          14px
*/
#content-wrapper table::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: #1A1E23;
}
#content-wrapper table::-webkit-scrollbar {
    width: 14px;
    height: 14px;
    background-color: #1A1E23;
}
#content-wrapper table::-webkit-scrollbar-thumb {
    background-color: #3c414c;
    border: 4px solid #1A1E23;
}
    #content-wrapper table::-webkit-scrollbar-thumb:hover {
        background-color: #0075DB !important;
    }
#content-wrapper table::-webkit-scrollbar-corner {
    background-color: #1A1E23;
}

/*
    (Disabled background)
    Background:     #26292f
    Width:          14px
*/
textarea:disabled::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: #26292f !important;
}
textarea:disabled::-webkit-scrollbar {
    background-color: #26292f;
    width: 14px;
    height: 14px;
}
textarea:disabled::-webkit-scrollbar-thumb {
    background: #3c414c !important;
    background-color: #3c414c !important;
    border: 4px solid #26292f !important;
}
    textarea:disabled::-webkit-scrollbar-thumb:hover {
        background-color: #0075DB !important;
    }
textarea:disabled::-webkit-scrollbar-corner {
    background-color: #26292f !important;
}
textarea:disabled::-webkit-resizer {
    border: 0;
}

/* ****************************** 
    Buttons
****************************** */
/* Primary */
/* Enabled */
#content-wrapper .btn-primary, .modal-content .btn-primary,
#content-wrapper button.btn-primary:enabled, .modal-content button.btn-primary:enabled {
    background: #0075DB !important;
    border: 2px solid #0088FF !important;
    
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,1) !important;
    -moz-box-shadow: 0px 2px 5px rgba(0,0,0,1) !important;
    box-shadow: 0px 2px 5px rgba(0,0,0,1) !important;
    opacity: 1;
}
    #content-wrapper .btn-primary svg, .modal-content .btn-primary svg,
    #content-wrapper .btn-primary:enabled svg, .modal-content .btn-primary:enabled svg {
        fill: #FDFDFD !important;
    }
    #content-wrapper button.btn-primary:hover:enabled, .modal-content button.btn-primary:hover:enabled,
    #content-wrapper button.btn-primary:enabled:hover, .modal-content button.btn-primary:enabled:hover {
        background: #0069d4 !important;
        border: 2px solid #0075DB !important;
    }
/* 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: #1A1E23 !important;
    border: 2px solid #3c414c !important;
    
    color: #0088FF !important;
    fill: #0088FF !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: #0088FF !important;
    }
    #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 #0075DB !important;
    }
/* Refresh + Export (tables) */
/* Enabled */
    #classlist button.classlist-toolbar-item:hover:enabled {
        background: #0075DB !important;
        border: 2px solid #0088FF !important;
        opacity: 1;
    }

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


#content-wrapper .btn-primary, .modal .btn-primary {
    background: #0075DB !important;
    border: 2px solid #0088FF !important;
    color: #fff !important;
    
    -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.7) !important;
    -moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.7) !important;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.7) !important;
    cursor: pointer;
}
#content-wrapper .dbq-graph-toolbar .btn-primary svg {
    fill: #FFFFFF !important;
}
#content-wrapper .btn-secondary, .modal .btn-secondary {
    background: #4a4f58 !important;
    border: 2px solid #585b61 !important;
    color: #fff !important;
    
    cursor: pointer;
}
#content-wrapper .btn-danger, .modal .btn-danger {
    background: #b7221e !important;
    border: 2px solid #ca2f2a !important;
    color: #fff !important;
    
    -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,7) !important;
    -moz-box-shadow: 0px 2px 5px rgba(0,0,0,7) !important;
    box-shadow: 0px 2px 5px rgba(0,0,0,7) !important;
    cursor: pointer;
}
#content-wrapper .btn-success, .modal .btn-success {
    background: #458c36 !important;
    border: 2px solid #44a24b !important;
    color: #FFFFFF !important;
    
    -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,7) !important;
    -moz-box-shadow: 0px 2px 5px rgba(0,0,0,7) !important;
    box-shadow: 0px 2px 5px rgba(0,0,0,7) !important;
    cursor: pointer;
}
#content-wrapper .btn-link, .modal .btn-link {
    background: 0 !important;
    border: 2px solid rgba(0,0,0,0) !important;
    color: #0088FF !important;
    cursor: pointer;
}
    #content-wrapper .btn-link.btn-block, .modal-content .btn-link.btn-block {
        border: 0 !important;
    }
    #content-wrapper .btn-link:hover, .modal .btn-link:hover {
        color: #FFFFFF !important;
        text-decoration: none;
    }
.modal-footer .btn-link {
    color: #FFFFFF !important;
}
    .modal-footer .btn-link:hover {
        color: #0088FF !important;
    }


#content-wrapper .btn-primary:hover, .modal .btn-primary:hover {
    color: #FFFFFF !important;
    background: #0075DB !important;
    border: 2px solid #2a9cff !important;
}
#content-wrapper .btn-secondary:hover, .modal .btn-secondary:hover {
    color: #FFFFFF !important;
    background: #585b61 !important;
    border: 2px solid #6a6d73 !important;
}
#content-wrapper .btn-danger:hover, .modal .btn-danger:hover {
    color: #FFFFFF !important;
    background: #ca2f2a !important;
    border: 2px solid #e23934 !important;
}
#content-wrapper .btn-success:hover, .modal .btn-success:hover {
    color: #FFFFFF !important;
    background: #2f7134 !important;
    border: 2px solid #448237 !important;
}

.dashboard-list-remove-button-container button.btn-default:enabled, #dashboard-list-add-button:enabled {
    padding: 8px 10px !important;
}
.dashboard-list-remove-button-container button.btn-default svg, #dashboard-list-add-button svg {
    width: 25px !important;
    height: 20px !important;
    padding: 5px 10px 5px 5px !important;
}
    
/* Disabled */
#content-wrapper button.btn-primary:disabled, .modal #document-topics button.btn-primary:disabled,
#content-wrapper button.btn-primary.disabled, .modal #document-topics button.btn-primary.disabled,
#content-wrapper button.btn-primary:disabled, .modal .dbq-form button.btn-primary:disabled,
#content-wrapper button.btn-primary.disabled, .modal .dbq-form button.btn-primary.disabled {
    background: #0075DB !important;
    border: 2px solid #0075DB !important;
    opacity: 1;
    color: #fff !important;
    cursor: not-allowed !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
    #content-wrapper button.btn-primary.selected:disabled, #content-wrapper button.btn-primary:disabled.selected, #content-wrapper button.btn-primary.selected.disabled, #content-wrapper button.btn-primary.disabled.selected {
        background: #0075DB !important;
        border: 2px solid #0075DB !important;
        opacity: 1;
        cursor: not-allowed !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }
        #content-wrapper button.btn-primary.selected:hover:disabled, #content-wrapper button.btn-primary.selected.disabled:hover {
            background: #0075DB !important;
            border: 2px solid #0075DB !important;
            opacity: 1;
            color: #fff !important;
            cursor: not-allowed !important;
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
            box-shadow: none !important;
        }
#content-wrapper button.btn-default:disabled, .modal #document-topics button.btn-default:disabled,
#content-wrapper button.btn-default.disabled, .modal #document-topics button.btn-default.disabled,
#content-wrapper button.btn-secondary:disabled, .modal #document-topics button.btn-secondary:disabled,
#content-wrapper button.btn-secondary.disabled, .modal #document-topics button.btn-secondary.disabled,
#content-wrapper button.btn-default:disabled, .modal .dbq-form button.btn-default:disabled,
#content-wrapper button.btn-default.disabled, .modal .dbq-form button.btn-default.disabled,
#content-wrapper button.btn-secondary:disabled, .modal .dbq-form button.btn-secondary:disabled,
#content-wrapper button.btn-secondary.disabled, .modal .dbq-form button.btn-secondary.disabled {
    background: #3c414c !important;
    border: 2px solid #3c414c !important;
    opacity: 1;
    color: #fff !important;
    cursor: not-allowed !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
    #content-wrapper button.btn-default.selected:disabled, #content-wrapper button.btn-default:disabled.selected,
    #content-wrapper button.btn-default.selected.disabled, #content-wrapper button.btn-default.disabled.selected,
    #content-wrapper button.btn-secondary.selected:disabled, #content-wrapper button.btn-secondary:disabled.selected,
    #content-wrapper button.btn-secondary.selected.disabled, #content-wrapper button.btn-secondary.disabled.selected {
        background: #3c414c !important;
        border: 2px solid #3c414c !important;
        opacity: 1;
        cursor: not-allowed !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }
        #content-wrapper button.btn-default.selected:hover:disabled, #content-wrapper button.btn-default.selected.disabled:hover,
        #content-wrapper button.btn-secondary.selected:hover:disabled, #content-wrapper button.btn-secondary.selected.disabled:hover {
            background: #3c414c !important;
            border: 2px solid #3c414c !important;
            opacity: 1;
            color: #fff !important;
            cursor: not-allowed !important;
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
            box-shadow: none !important;
        }
/* Disabled + hover */
#content-wrapper button.btn-primary:hover:disabled, #content-wrapper button.btn-primary.disabled:hover {
    background: #0075DB !important;
    border: 2px solid #0075DB !important;
    opacity: 1;
    cursor: not-allowed !important;
}
#content-wrapper button.btn-default:hover:disabled, #content-wrapper button.btn-default.disabled:hover {
    background: #3c414c !important;
    border: 2px solid #3c414c !important;
    opacity: 1;
    cursor: not-allowed !important;
}

/* Delete button (is needed here to override) */
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; /*#FDFDFD*/
}
.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: #FDFDFD; /*#E6E6E6*/
}
.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: #F2F2F2;
}
.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: #9197A1;
}
.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: #cdcdcd;
}
.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 #1A1E23;
}
    /* Logo */
    #wrapper > header .logo {
        background: 0;
    }

/* User info */
#user_info {
    color: #5f7faf;
}
    #user_info a {
        color: #0075DB;
    }

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

/* Navbar */
.navbar-default {
    background: none;
    border: 0;
    border-bottom: 1px solid #1A1E23;
}
    #class-list-menu .class-list-menu-user svg {
        fill: #FDFDFD;
    }
#class-list-menu .class-list-menu-user:hover svg,
#dbq-notification-center-menu-container .dbqnc-toggle-button:hover svg {
    fill: #0088FF;
}
    #class-list-menu .class-list-menu-user .username {
        color: #8b8b8b;
    }


.navbar.dbq-application-navbar {
    border-bottom: 1px solid #1f262f !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: #FDFDFD;
        }
.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: #FDFDFD;
}
.dbqnc-badge-red {
    background-color: #E81625 !important;
    border: 2px solid #121416 !important;
}

/* ****************************** 
    nav-tabs
****************************** */
.nav-tabs {
    background: #121416;
    border-bottom: 1px solid #1f262f;
}
    .nav-tabs > li > a {
        color: #dcdcdc;
        border-bottom: 0 !important;
    }
        .nav-tabs > li > a.active {
            background: 0 !important;
            color: #dcdcdc;
        }
        .nav-tabs > li > a:hover {
            color: #0075DB;
        }

    .nav-tabs > li.active {
        background: #3c414c;
    }
        .nav-tabs > li.active > a {
            color: #FDFDFD !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: #fff;
                border-width: 0;
            }

/*
    document-list-table-view
*/
#content-wrapper .dbq-document-list-table-view label {
    background: #FDFDFD;
    border: 2px solid #1A1E23;
}
#content-wrapper .dbq-document-list-table-view table svg {
    fill: #9197A1;
}
        #content-wrapper .dbq-document-list-table-view table svg:hover {
            fill: #0088FF;
        }
#content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate li {
    background: #1A1E23;
    border: 2px solid #1A1E23;
}
    #content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate li:hover {
        background: #9197A1;
        border: 2px solid #9197A1;
        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 #0075DB !important;
    background-color: #FDFDFD !important;
    color: #FDFDFD !important;
}
    #content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate .paginate_button.active:hover {
        border: 2px solid #0075DB !important;
        background-color: #0075DB !important;
        color: #FDFDFD !important;
    }

/* ****************************** 
    ?
****************************** */
.form-group .searchbox-container .input-group-addon {
}
    .form-group .searchbox-container .input-group-addon input.form-control {
        border-left: 0 !important;
    }
    .form-group .searchbox-container .input-group-addon svg {
        fill: #a7aab2;
        /*padding: 4px 0; <-- this is not good for disabled searchform in: gebruikers & beveiliging -> tab: adres */
        margin-right: 0;
    }
.form-group .searchbox-container .input-group-btn {
}
    .form-group .searchbox-container .input-group-btn svg {
        fill: #9197A1;
        padding: 0;
        margin-right: 0;
    }

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

/* ****************************** 
    side_navigation
****************************** */
#side_navigation.side_navigation_document_editor {
    background-color: #9197A1;
    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: #9197A1;
    }
#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: #9197A1;
        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: #0075DB;
    border: 1px solid #0075DB !important;
}

/* ****************************** 
    span. ??? 
****************************** */
span.button {
    color: #fff !important;
    background: #0075DB;
    border: 1px solid #0075DB;
}
    span.button:hover {
        color: #0075DB !important;
        background: #fff;
        border: 1px solid #fff;
    }

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

/* ****************************** 
    Content table
****************************** */
.content-table thead tr:first-of-type {
    background: #1A1E23;
}
.content-table tbody tr, .content-table thead tr {
    border-bottom: 1px solid #292f37;
}
.content-table {
    border-top: 1px solid #151618;
}
    .content-table th, .content-table td {
        color: #b9b9b9;
    }
    .content-table input.search {
        background: #1b1b1b !important;
        border-color: #1b1b1b !important;
        color: #9197A1 !important;
        border: 0;
    }
    .content-table thead th {
        color: #9197A1;
    }

/* ****************************** 
    Data visualisations
****************************** */
.ui-widget-content {
    border: 1px solid #1A1E23 !important;
    background: #1A1E23;
    color: #9197A1;
}

#content textarea, #content select {
    background: #3c414c;
    border-color: #3c414c;
    color: #9197A1;
    font-weight: 600;
}

.pagination li > a.active {
    background-color: #0075DB !important;
    color: #9197A1;
    border: 1px solid #0075DB !important;
}

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

/* ****************************** 
    ?
****************************** */
.input-group-addon {
    color: #a7aab2;
    background-color: #26292f;
    border-top: 2px solid #3c414c;
    border-bottom: 2px solid #3c414c;
    border-left: 2px solid #3c414c;
}
    .input-group-addon svg {
        background: #26292f;
        fill: #a7aab2;
    }
.form-group .searchbox-container .input-group-addon {
    /*color: #3c414c;
    background-color: #292f37;
    border: 2px solid #3c414c; <-- light-mode doesnt have this.................*/
    /*border-top: 2px solid #3c414c;
    border-bottom: 2px solid #3c414c;
    border-left: 2px solid #3c414c; <-- some addon's need border-right.. make unique situation for addon's without border right OR probably the other addon's have a input next to it without a border-left */
    /*border-right: 0 !important;*/ /* NOTE where .. the input next to it has a border.. BECAUSE cms TSN -> inspectiebeheer -> add btn -> input list -> this addon's need a border-right.. */
}
    .form-group .searchbox-container .input-group-addon svg {
        fill: #a7aab2;
        /*padding: 2px 0; <-- this is not good for disabled searchform in: gebruikers & beveiliging -> tab: adres */
        margin-right: 0;
    }
.input-group-addon.disabled,
form[data-view-mode="View"] .input-group-addon,
form[data-view-mode="Delete"] .input-group-addon {
    color: #FDFDFD !important;
    background: #15191f !important; /*#26292f <-- before dashboard change*/
    /*border-top: 2px solid #26292f !important;
        border-bottom: 2px solid #26292f !important;
        border-left: 2px solid #26292f !important; <-- some addon's need border-right.. make unique situation for addon's without border right */
    border: 2px solid #26292f; /* 2px solid #15191f; <-- form-group icon in modals don't need this color.. Did change this but don't know for what */
    cursor: not-allowed !important;
}
    .input-group-addon.disabled svg,
    form[data-view-mode="View"] .input-group-addon svg,
    form[data-view-mode="Delete"] .input-group-addon svg {
        background: #26292f;
        fill: #FDFDFD;
    }
.form-group .searchbox-container .input-group-btn {
}
    .form-group .searchbox-container .input-group-btn svg {
        fill: #a7aab2;
        padding: 0;
        margin-right: 0;
    }
    form[data-view-mode="View"] .form-control.datepicker {
        border: 2px solid #26292f !important;
    }

/* ****************************** 
    Notifications
****************************** */
#dbq-notification-center {
    background-color: #121416 !important;
    border-left: 1px solid #1A1E23;
}
    #dbq-notification-center .dbqnc-navbar {
        color: #dcdcdc !important;
        border-bottom: 1px solid #1A1E23;
    }
        #dbq-notification-center .dbqnc-navbar .dbqnc-navbar-item.dbqnc-active {
            border-bottom: 0 !important;
            background: #3c414c;
            color: #FDFDFD !important;
        }
    #dbq-notification-center .dbqnc-item-list .dbqnc-item, #dbq-notification-center .dbqnc-item-list .dbqnc-items-empty {
        background-color: #1A1E23 !important;
        color: #FDFDFD;
        -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.4);
        -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.4);
        box-shadow: 0px 2px 10px rgba(0,0,0,0.4);
    }
    #dbq-notification-center .dbqnc-navbar .dbqnc-navbar-item {
    }
        #dbq-notification-center .dbqnc-item-list .dbqnc-item .dbqnc-item-message .dbqnc-message-expander {
            color: #0075DB;
        }
        #dbq-notification-center .dbqnc-item-list .dbqnc-item .dbqnc-item-message .dbqnc-message-expander:hover {
            color: #fff;
        }
        #dbq-notification-center .dbqnc-item-list .dbqnc-item .dbqnc-item-message .max-lines-2 {
            color: #9197A1;
        }
    #dbq-notification-center .dbqnc-item-list .dbqnc-item .dbqnc-item-image {
        border: 4px solid #121416;
    }

    #dbq-notification-center .dbqnc-item-list .dbqnc-item .dbqnc-item-message .dbqnc-create-time {
        color: #FDFDFD !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: #1A1E23;
}
    div[name="RuleSourceCode"] .CodeMirror {
        background: #191919;
    }
    div[name="RuleSourceCode"] .CodeMirror-lines {
        color: #c7c7c7 !important;
    }
    div[name="RuleSourceCode"] .cm-keyword {
        color: #d88b4b !important;
    }
    div[name="RuleSourceCode"] .cm-comment {
        color: #5f7faf !important;
    }
    div[name="RuleSourceCode"] .cm-string {
        color: #87ca5e !important;
    }
    div[name="RuleSourceCode"] .cm-builtin {
        color: #ead800 !important;
    }
    div[name="RuleSourceCode"] .CodeMirror-scrollbar-filler {
        background: #1A1E23;
    }
    div[name="RuleSourceCode"] .CodeMirror-gutters {
        background: #3c414c;
        border: 0;
    }
    div[name="RuleSourceCode"] .CodeMirror-linenumber {
        color: #505050;
    }
    div[name="RuleSourceCode"] .CodeMirror-cursor {
        border-left: 2px solid #9197A1;
    }
    div[name="RuleSourceCode"] .CodeMirror-selected {
        background-color: #000 !important;
        color: blue !important;
        opacity: 1;
    }
        div[name="RuleSourceCode"] .CodeMirror-selected .cm-comment {
            color: blue !important;
        }
    div[name="RuleSourceCode"] .CodeMirror-selectedtext {
        color: #000 !important;
    }
    div[name="RuleSourceCode"] .cm-variable .CodeMirror-selected {
        color: #000 !important;
    }

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


/* ****************************** 
    Tijsens
****************************** */
.classlist-dashboard div[data-element-type="Graph"] {
    background: #1A1E23;
}
.classlist-dashboard #document-topics .row div[data-element-type="Text"],
.classlist-dashboard .dbq-form .row div[data-element-type="Text"] { /* .dbq-application-tsn div[data-element-type="Text"] */
    /*background: #1A1E23; <-- should not have a background for .input-list-content*/
    /*margin-bottom: 10px !important; <-- custom labels get affected by this.. solution: custom styling for documents..*/
    /*box-shadow: 0px 2px 10px rgb(0 0 0 / 40%); */ /* ^^^--- this should be a class to add in documents.. */
}
.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: #1A1E23;
}
.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: #1A1E23;
}
#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: #1A1E23;
}
.classlist-dashboard .topic .btn-default {
    border: 0;
}
.classlist-dashboard #document-topics .topic section,
.classlist-dashboard .dbq-form section {
    /*background: #121416; <-- not possible. for CMS -> TSN -> inspectiebeheer -> Kempenhaeghe totaal contract -> background graphics */
    background: 0;
}

/* ****************************** 
    Refresh infinite
****************************** */
#content-wrapper #classlist .classlist-toolbar-item.checkbox-inline {
    color: #d4d4d4;
    background: #1A1E23;
    border: 2px solid #3c414c !important;
    line-height: 20px !important;
}
    #content-wrapper #classlist .classlist-toolbar-item.checkbox-inline .toggle-group {
        border-right: 1px solid #3c414c;
    }
    #content-wrapper #classlist .classlist-toolbar-item.checkbox-inline, 
    #content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh {
        border: 2px solid #3c414c !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 .btn-primary,
        #content-wrapper #classlist .classlist-toolbar-item.checkbox-inline .btn-default,
        #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: #1A1E23 !important;
        background-color: #1A1E23 !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }
    .dbq-scrollbar::-webkit-scrollbar-thumb {
        background: #3c414c !important;
        background-color: #3c414c !important;
        border: 1px solid #1A1E23 !important;
    }
    .dbq-scrollbar::-webkit-scrollbar-corner {
        background: #1A1E23 !important;
    }

/* ****************************** 
    Date picker
****************************** */
.bootstrap-datetimepicker-widget {
    background: #121416;
    color: #fff;
}
    .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #121416;
    }
    .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #121416;
    }
    .bootstrap-datetimepicker-widget table td.active {
        background-color: #0075DB;
    }
    .bootstrap-datetimepicker-widget table td.old, .bootstrap-datetimepicker-widget table td.new {
        color: #656b77;
    }
    .bootstrap-datetimepicker-widget table th.dow {
        color: #656b77;
    }
    .bootstrap-datetimepicker-widget table thead tr:first-child th {
        /*padding: 10px 15px !important; <- padding causing problem for td width */ /*10px 3px*/
        margin: 5px;
    }
        .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
            background: rgba(255,255,255,0.05);
        }
    .bootstrap-datetimepicker-widget table td.day:hover {
        background: rgba(255,255,255,0.05);
    }
    .bootstrap-datetimepicker-widget table td span.active {
        background-color: #0075DB;
    }

/* ****************************** 
    Date time picker
****************************** */
.bootstrap-datetimepicker-widget a {
    color: #fff !important;
}
    .bootstrap-datetimepicker-widget a:hover {
        color: #0075DB !important;
    }
.bootstrap-datetimepicker-widget table td span:hover {
    background: rgba(255,255,255,0.05);
}
.bootstrap-datetimepicker-widget table td.hour:hover {
    background: rgba(255,255,255,0.05);
}
.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: #0075DB;
}
.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(255,255,255,0.05);
}

/* ****************************** 
    Base (scroll fix)
****************************** */
body {
    border: 0;
}

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

/* Navigator button */
#navigator .navigation-button {
    background: #121416 !important;
    border: 0 !important;
    border-bottom: 1px solid #1A1E23 !important;
}
    #navigator .navigation-button .navigation-button-title {
        color: #5f7faf;
    }
        #navigator .navigation-button .navigation-button-title:hover {
            color: #0075DB;
            border-color: #1A1E23;
        }
    #navigator .navigation-button svg {
        fill: #9197A1;
    }

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

/* ****************************** 
    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: #dcdcdc !important;
    border-bottom: 0 !important;
    
}
    .foldertree-header svg {
        fill: #dcdcdc;
    }
        .foldertree-header svg.dbq-align-right {
            fill: #dcdcdc;
        }

/* foldertree-container */
#navigator .foldertree-container {
    /*border-bottom: 1px solid #1A1E23 !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 #1A1E23;
        border-bottom: 1px solid #1A1E23;
    }
    .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: #1A1E23;
        }
        ul.gj-list-bootstrap li.active, .gj-tree-bootstrap-3 ul.gj-list-bootstrap li.active {
            background-color: #3c414c !important;
        }
            ul.gj-list-bootstrap li.active, .gj-tree-bootstrap-3 ul.gj-list-bootstrap li.active:hover {
                background-color: #3c414c !important;
            }
        ul.gj-list-bootstrap li:hover {
            background: #26292f !important;
        }

/* Active */
li.active > span, ul.gj-list-bootstrap li.active span[data-role="expander"].gj-tree-glyphicons-expander svg {
    fill: #0088FF !important;
}
        ul.gj-list-bootstrap li.active > div[data-role="wrapper"] span[data-role="display"] {
            color: #FDFDFD !important;
        }
    ul.gj-list-bootstrap li.active div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-1 {
        fill: #3c414c !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: #121416 !important;
    }
    ul.gj-list-bootstrap li.dbq-expand-active-style.active span[data-role="expander"].gj-tree-glyphicons-expander svg:hover {
        fill: #FDFDFD !important;
    }
        ul.gj-list-bootstrap li.active > div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-2 {
            fill: #FFFFFF !important;
        }
ul.gj-list-bootstrap li.active div[data-role="wrapper"] span[data-role="options"] svg {
    fill: #c3c6ce !important;
}
/* Normal hover*/
li > span:hover, ul.gj-list-bootstrap li:hover span[data-role="expander"].gj-tree-glyphicons-expander svg {
    fill: #0088FF !important;
}
ul.gj-list-bootstrap li:hover span[data-role="expander"].gj-tree-glyphicons-expander:hover svg {
    fill: #FDFDFD !important;
}
ul.gj-list-bootstrap li:hover div[data-role="wrapper"] span[data-role="display"] {
    color: #FDFDFD !important;
}
    ul.gj-list-bootstrap li:hover div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-1 {
        fill: #26292f !important;
    }
ul.gj-list-bootstrap li:hover div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-2 {
    fill: #FDFDFD !important;
}
ul.gj-list-bootstrap li:hover div[data-role="wrapper"] span[data-role="options"] svg {
    fill: #FDFDFD !important;
}
/* Active hover*/
li.active > span:hover, ul.gj-list-bootstrap li.active:hover span[data-role="expander"].gj-tree-glyphicons-expander svg {
    fill: #0088FF !important;
}
ul.gj-list-bootstrap li.active span[data-role="expander"].gj-tree-glyphicons-expander svg:hover {
    fill: #FDFDFD !important;
}
ul.gj-list-bootstrap li.active:hover > div[data-role="wrapper"] span[data-role="display"] {
    color: #FDFDFD !important;
}
ul.gj-list-bootstrap li.active:hover div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-1 {
    fill: #3c414c !important;
}
        ul.gj-list-bootstrap li.active:hover > div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-2 {
            fill: #FDFDFD !important;
        }
ul.gj-list-bootstrap li.active:hover div[data-role="wrapper"] span[data-role="options"] svg {
    fill: #9197A1 !important;
}
    ul.gj-list-bootstrap li.active div[data-role="wrapper"] span[data-role="options"] svg:hover {
        fill: #0088FF !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.active > div[data-role="wrapper"] span[data-role="display"] {
        fill: #FDFDFD !important;
    }
ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-1 {
    fill: #121416 !important;
}
ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-2 {
    fill: #dcdcdc !important;
}
        ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover li.active div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-1 {
            fill: #121416 !important;
        }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover li.active div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-2 {
        fill: #FDFDFD !important;
    }
        ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover li.active div[data-role="wrapper"] span[data-role="display"] {
            fill: #dcdcdc !important;
        }
        ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover li:hover div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-1 {
            fill: #121416 !important;
        }
        ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover li:hover div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-2 {
            fill: #dcdcdc !important;
        }
        ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover li.active:hover div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-1 {
            fill: #121416 !important;
        }
            ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover li.active:hover div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-2 {
                fill: #FDFDFD !important;
            }
            ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover li.active:hover div[data-role="wrapper"] span[data-role="display"] {
                fill: #FDFDFD !important;
            }

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

/* ##### 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: #dcdcdc;
}
ul.gj-list-bootstrap li.active > span[data-role="display"] {
    color: #9197A1;
}
.gj-tree-bootstrap-3 ul li [data-role="expander"].gj-tree-glyphicons-expander svg {
    fill: #0088FF;
}
ul.gj-list-bootstrap li.active div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-1 {
    fill: #121416;
}

/* Hover svg */
ul.gj-list-bootstrap li span[data-role="display"]:hover {
    color: #FDFDFD;
}
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: #0088FF !important;
}

/* ****************************** ******************************
    expanded state (FIRST)
****************************** ****************************** */
ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style {
    background-color: #121416 !important;
    background: #121416 !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: #121416 !important;
}
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover span[data-role="expander"] svg {
        fill: #0088FF !important; /*#9197A1*/
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover span[data-role="icon"] svg .dbq-icon-color-1 {
        fill: #dcdcdc !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover span[data-role="icon"] svg .dbq-icon-color-2 {
        fill: #b3baca !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover span[data-role="display"] {
        color: #dcdcdc !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover span[data-role="options"] svg {
        fill: #9197A1 !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: #3c414c;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.active span[data-role="expander"] svg {
        fill: #FDFDFD !important;
    }
        ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.active span[data-role="expander"] svg:hover {
            fill: #0088FF !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: #3c414c !important; /*fill: #3c414c !important;*/
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover li.active div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-1,
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style:hover li.active:hover div[data-role="wrapper"] span[data-role="icon"] svg .dbq-icon-color-1 {
        fill: #3c414c !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: #FDFDFD !important; /*fill: #121416 !important;*/
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.active span[data-role="display"] {
        color: #FDFDFD !important;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.active span[data-role="options"] svg {
        fill: #FDFDFD !important;
    }
        ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style li.active span[data-role="options"] svg:hover {
            fill: #0088FF !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: #FDFDFD !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: #f3f4f7 !important; 3 niveau further everything will get background..*/
    }
    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: #b6b9c1 !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: #121416 !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: #FDFDFD !important; /*#b3baca*/
    }
    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: #FDFDFD !important; /*#8e96a9*/
    }
    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: #b6b9c1 !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: #FDFDFD !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: #b6b9c1 !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: #b6b9c1 !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: #121416 !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: #0095ff !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: #0095ff !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: #b6b9c1 !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: #3a3b40 !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: #0095ff !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: #1A1E23;
    border: 0;
    -webkit-box-shadow: 0 2px 20px rgba(0,0,0,99) !important;
    -moz-box-shadow: 0 2px 20px rgba(0,0,0,99) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,99) !important;
}
    #class-list-menu .dropdown-menu li.username {
        background: #1e232b;
        border-bottom: 1px solid #292f37;
        color: #FDFDFD;
    }
    #class-list-menu .dropdown-menu li.dropdown-header {
        background: #1e232b;
        border-top: 1px solid #292f37;
        color: #ced1d8;
    }
    #class-list-menu .dropdown-menu > li:hover > a {
        color: #0088FF !important;
    }
        #class-list-menu .dropdown-menu > li:hover > a > svg {
            fill: #0088FF !important;
        }
#class-list-menu .dropdown-header {
    color: #545454;
    background: #1A1E23;
}
#class-list-menu .dropdown-menu .dbq-account-dropdown-divider {
    background-color: none !important;
    border-bottom: 1px solid #292f37;
}
#class-list-menu .dropdown-menu svg {
    fill: #FDFDFD;
}

/* Add/remove dashboard */
#content-wrapper button.btn-default.dropdown-toggle:enabled, .modal-content button.btn-default.dropdown-toggle:enabled {
    color: #0075DB !important;
}
    #content-wrapper button.btn-default.dropdown-toggle:enabled svg, .modal-content button.btn-default.dropdown-toggle:enabled svg {
        fill: #0088FF !important;
    }

/*
    Dropdown in tables
*/
#content-wrapper .dropdown-menu {
    background: #1A1E23;
    border: 0;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,5);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,5);
    box-shadow: 0 0 5px rgba(0,0,0,5);
}
    #content-wrapper .dropdown-menu li {
        background: #3c414c;
    }
        #content-wrapper .dropdown-menu li a {
            color: #9197A1;
            text-decoration: none !important;
        }
        #content-wrapper .dropdown-menu li:hover {
            background: #0075DB !important;
        }
            #content-wrapper .dropdown-menu li:hover a {
                color: #FDFDFD !important;
            }

#content-wrapper #document-class-list-filters .bootstrap-datetimepicker-widget.dropdown-menu {
    background: #0c0c0c !important;
}
    #content-wrapper #document-class-list-filters .bootstrap-datetimepicker-widget.dropdown-menu li {
        background: 0 !important;
    }
        #content-wrapper #document-class-list-filters .bootstrap-datetimepicker-widget.dropdown-menu li:hover {
            background: 0 !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: #121416;
    border: 2px solid #3c414c;
}
    .dbq-switch:hover .dbq-switch-handle {
        background: #0069d4;
        border: 2px solid #0075DB;
    }
    .dbq-switch:hover .dbq-switch-input:checked ~ .dbq-switch-handle {
        background: #0069d4;
        border: 2px solid #0075DB;
    }
.dbq-switch-input {
    opacity: 0;
}
.dbq-switch-text {
    background: 0;
}
    .dbq-switch-text:before {
        content: attr(data-off);
        color: #FDFDFD;
    }
    .dbq-switch-text:after {
        content: attr(data-on);
        color: #303E65;
    }
.dbq-switch-input:checked ~ .dbq-switch-text {
    background: #292f37;
}
    .dbq-switch-input:checked ~ .dbq-switch-text:before {
        /*opacity: 0;*/
    }
    .dbq-switch-input:checked ~ .dbq-switch-text:after {
        opacity: 1;
    }
.dbq-switch-handle {
    background: #0075DB;
    border: 2px solid #0088FF;
    color: #FDFDFD;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,9);
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,9);
    box-shadow: 0 2px 5px rgba(0,0,0,9);
}
    .dbq-switch-handle:before {
        background: linear-gradient(to bottom, #eeeeee, #9197A1);
        background-image: -webkit-linear-gradient(top, #eeeeee, #9197A1);
    }
.dbq-switch-input:checked ~ .dbq-switch-handle {
    background: #0075DB; /*#0075DB*/
    color: #FDFDFD;
}


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

/* Pie chart lines */
.apexcharts-pie-series path {
    stroke: #1A1E23 !important;
    stroke-width: 3px;
}
.apexcharts-datalabels rect {
    stroke: #1A1E23 !important;
    stroke-width: 1px;
}
.apexcharts-title-text {
    fill: #9197A1 !important;
}

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

/*
    Datalabels
*/
.apexcharts-datalabels text {
    color: #696969 !important;
    fill: #696969 !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: #696969 !important;
    fill: #696969 !important;
    mix-blend-mode: multiply;
    font-weight: 600 !important;
}
.apexcharts-tooltip-text-y-label {
    color: #696969 !important;
    fill: #696969 !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(0,0,0,0.05) !important;
    opacity: 1 !important;
}
.apexcharts-grid-column:nth-child(odd) {
    fill: rgba(0,0,0,0.15) !important;
    opacity: 1 !important;
}

.apexcharts-grid-row:nth-child(even) {
    fill: rgba(0,0,0,0.05) !important;
    opacity: 1 !important;
}
.apexcharts-grid-row:nth-child(odd) {
    fill: rgba(0,0,0,0.15) !important;
    opacity: 1 !important;
}

/* tooltip */
.apexcharts-tooltip {
    border: 4px solid #121416 !important;
    background: #121416 !important;
    -webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8) !important;
    -moz-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8) !important;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8) !important;
    color: #9197A1 !important;
}
    .apexcharts-tooltip .apexcharts-tooltip-title {
        background: #121416 !important;
        border-bottom: 4px solid #121416 !important;
        color: #9197A1 !important;
    }
.apexcharts-tooltip-series-group {
}
.apexcharts-tooltip-y-group {
}
.apexcharts-tooltip * {
}
.apexcharts-tooltip-text-label {
    /*color: #5f7faf !important;*/
    color: #696969 !important;
    mix-blend-mode: multiply;
    font-weight: 600 !important;
}
.apexcharts-tooltip-text-value, .apexcharts-tooltip-text-z-value {
    color: #696969 !important;
    mix-blend-mode: multiply;
    font-weight: 500 !important;
}
.apexcharts-xaxistooltip {
    background: #121416 !important;
    border-color: #121416 !important;
    -webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.6) !important;
    -moz-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.6) !important;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.6) !important;
    color: #9197A1 !important;
    font-weight: 600 !important;
}
.apexcharts-xaxistooltip-bottom:before {
    border-bottom-color: #121416 !important;
}
.apexcharts-xaxistooltip-bottom:after {
    border-bottom-color: #121416 !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: #1A1E23 !important;
}
.apexcharts-legend-marker {
    border: 4px solid #1A1E23 !important;
}
.apexcharts-legend-text {
    color: #FDFDFD !important;
}

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

.apexcharts-text tspan {
    fill: #5d5d5d !important;
    font-weight: 600 !important;
    font-size: 11px;
}

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

.apexcharts-grid line.apexcharts-xaxis-tick {
    stroke: #2C2C2C;
}
/*
    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 #3c414c;*/
}
    .apexcharts-toolbar svg {
        stroke: none !important;
        fill: #FDFDFD !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: #d4d4d4 !important;
}
.apexcharts-toolbar .apexcharts-selected svg {
    stroke: none !important;
    fill: #0088FF !important;
}

/*
    Menu (download)
*/
.apexcharts-menu {
    border: 4px solid #1A1E23 !important;
    background: #1A1E23 !important;
    -webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.6) !important;
    -moz-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.6) !important;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.6) !important;
}
    .apexcharts-menu .apexcharts-menu-item {
        color: #9197A1 !important;
    }
        .apexcharts-menu .apexcharts-menu-item:hover {
            background: #121416 !important;
            color: #0075DB !important;
        }

/* selection area */
.apexcharts-selection-rect {
    fill: rgb(255, 255, 255, 0.8);
}

/* ****************************** 
    No data available overlay
****************************** */
.dbq-no-data-available-container {
    background: #1A1E23;
}
    .dbq-no-data-available-container .dbq-no-data-available-image svg {
        fill: #0088FF;
    }
    .dbq-no-data-available-container .dbq-no-data-available-text {
        color: #FDFDFD;
    }

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

/* ****************************** 
    Popup notification
****************************** */
.dbq-popup-notification-container {
    background: #1A1E23;
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.9);
    -moz-box-shadow: 0 2px 10px rgba(0,0,0,0.9);
    box-shadow: 0 2px 10px rgba(0,0,0,0.9);
}
    .dbq-popup-notification-container::after {
        content: " ";
        background: #1A1E23;
    }
    .dbq-popup-notification-container h3 {
        color: #0088ff;
    }
    .dbq-popup-notification-container p {
        color: #cfd3e4;
    }
    .dbq-popup-notification-container button {
    }
        .dbq-popup-notification-container button.btn-link {
            color: #0088ff;
        }
        .dbq-popup-notification-container button.btn-link:hover {
            color: #FDFDFD;
        }
        .dbq-popup-notification-container button.btn-primary {
            background: #0075DB;
            border: 2px solid #0088FF;
            -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.8);
            -moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.8);
            box-shadow: 0px 2px 5px rgba(0,0,0,0.8);
        }
            .dbq-popup-notification-container button.btn-primary:hover {
                background: #0069d4 !important;
                border: 2px solid #0075DB !important;
            }

#dbq-notification-center .dbqnc-navbar .dbqnc-navbar-item.dbqnc-active:hover .dbqnc-navbar-item-title {
    color: #FDFDFD !important;
}

.modal-backdrop {
    background-color: #010408;
    opacity: 0.9 !important;
}












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

input[type="checkbox"]:disabled, input[type="checkbox"]:disabled:hover {
    cursor: not-allowed !important;
}
.dbq-graph-scale button {
    color: #9197A1;
}

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

#content-wrapper .dbq-export-button {
    padding: 3px !important;
    margin-bottom: 10px;
}
    #content-wrapper .dbq-export-button svg {
        fill: #fff !important;
    }

.modal .form-control {
    color: #FDFDFD;
    background-color: #292f37;
    border: 1px solid #292f37;
}

.image-file-upload-filename, .file-upload-filename {
    pointer-events: none !important;
    cursor: default !important;
}
.image-file-upload-clear:hover {
    background: #d03131 !important;
}

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

/* 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: #FDFDFD !important;
    border-color: #FDFDFD;*/
    /*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: #0075DB !important;
    border: 2px solid #0088FF !important;
    border-color: #0088FF !important;
}
#content-wrapper .toggle-group label.btn-default {
    background: #1A1E23 !important;
    color: #0088FF !important;
    border: 2px solid #0075DB;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
    #content-wrapper .toggle-group label.btn-default:hover {
        background: #FFF;
        color: #000;
    }
#content-wrapper .toggle-group span.toggle-handle {
    background: #0075DB !important;
    border: 0;
}
#classlist .classlist-toolbar-item {
    color: #8c8c8c;
}

/*
    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: #0088FF !important;
        border: 2px solid #0040b7 !important; <-- before the change from toggle/switch */
        background: #0069d4 !important;
        border: 0 !important; /*2px solid #0075DB*/
        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: #0088FF !important;
    border: 0 !important;
}
#content-wrapper .toggle.off .toggle-group span.toggle-handle {
    background: #3c414c !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: #0075DB !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 #3c414c !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: #0088FF !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: #0088FF !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: #3c414c !important;
    border-left: 1px solid #3c414c !important;
    opacity: 1;
}
    .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: #FDFDFD !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: #3c414c !important;
        border-left: 1px solid #3c414c !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: #FDFDFD !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: #0075DB !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;
    }

/* Input list styling (when disabled) when no add/remove buttons visible */
.input-list {
    /*background: #191b20; <- #26292f*/
}
    .input-list .input-list-content {
        border: 2px solid #3c4150;
    }
form[data-view-mode="View"] div.input-list .input-list-content .input-list-item {
    border-bottom: 1px solid #3c4150; /*1px solid #1A1E23 <-- for a input list disabled is this color not visible.. */
}
.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 */
#content-wrapper button.btn-default.dropdown-toggle:enabled, .modal-content button.btn-default.dropdown-toggle:enabled {
    background: #1A1E23 !important;
    border: 2px solid #3c414c !important;
    color: #FFFFFF !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: #0088FF !important;
    }

/* 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: #26292f !important;
    border: 2px solid #26292f !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: #26292f !important;
        border: 2px solid #26292f !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: #FDFDFD !important;
        }

/* 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 #3c414c !important;
}

/*
    Button list in modals
*/
#content-wrapper .button_list button.btn-primary:hover:enabled, .modal-content .button_list button.btn-primary:hover:enabled {
    background: #0075DB !important;
    border: 2px solid #0088FF !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: #26292f !important;
    border: 2px solid #26292f !important;
    color: #FFF !important;
    cursor: not-allowed;
    opacity: 1 !important;
    text-indent: 0 !important;
}

/* view + add eye (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: #26292f;
}

#document-topics .btn.dbq-select-view-button,
#document-topics .btn.dbq-select-add-button,
.dbq-form .btn.dbq-select-view-button,
.dbq-form .btn.dbq-select-add-button {
    background: #1a1e23;
    border-color: #3c414c;
}

.btn-outline-primary.dbq-select-view-button:hover svg,
.btn-outline-primary.dbq-select-add-button:hover svg {
    fill: #FFFFFF;
}

/* ****************************** 
    document-topics
****************************** */
#document-topics .checkbox label,
.dbq-form .checkbox label {
    background: 0;
    color: #091118;
    border: 0;
    /*border-top: 2px solid #3c414c; <-- this border-top should be more specific, in much situations its not needed..*/
}
.modal #document-topics .dbq-form-group .dbq-form-group-title-label,
.modal .dbq-form .dbq-form-group .dbq-form-group-title-label {
    display: none;
}
.modal #document-topics .dbq-form-group .checkbox label,
.modal .dbq-form .dbq-form-group .checkbox label {
    display: block;
    border: 0 !important;
    padding: 5px !important;
}
#document-topics h2,
.dbq-form h2 {
    color: #d0d0d0;
}
#document-topics h3,
.dbq-form h3 {
    color: #d0d0d0;
}
#document-topics .dbq-graph-header h3,
.dbq-form .dbq-graph-header h3 {
    color: #9197A1;
}
.popover-title {
    background-color: #0c0c0c !important;
    border-bottom: 1px solid #e8eaef !important;
}
.popover-content {
    background-color: #0c0c0c !important;
    color: #FDFDFD !important;
}
#document-topics .form-control,
.dbq-form .form-control {
    color: #9197A1;
    background-color: #1A1E23 !important;
    border: 2px solid #3c414c !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
#document-topics .input-list .form-control,
#document-topics .input-list .dbq-form-group-title-label,
.dbq-form .input-list .form-control,
.dbq-form .input-list .dbq-form-group-title-label {
    border: 2px solid #3c414c !important;
}
    #document-topics .input-list .dbq-form-group-title-label.dbq-label-disabled,
    .dbq-form .input-list .dbq-form-group-title-label.dbq-label-disabled {
        border: 2px solid #26292f !important;
    }
    #document-topics .input-list .dbq-form-group-title-label,
    .dbq-form .input-list .dbq-form-group-title-label {
        border-bottom: 0 !important;
    }
#document-topics .input-group .form-control.datepicker,
.dbq-form .input-group .form-control.datepicker {
    border: 2px solid #3c414c !important;
}
    #document-topics .input-group .form-control.datepicker:disabled,
    form[data-view-mode="View"] #document-topics .input-group .form-control.datepicker,
    .dbq-form .input-group .form-control.datepicker:disabled,
    form[data-view-mode="View"] .dbq-form .input-group .form-control.datepicker {
        border: 2px solid #26292f !important;
        border-left: 0 !important;
    }
form[data-view-mode="View"] #document-topics label,
form[data-view-mode="View"] .dbq-form label {
    /*border: 2px solid #26292f !important; <-- dont know why? but this isn't needed.. check at light mode how this is handled if you need border */
    /*border-left: 0 !important; <-- not possible, almost all labels need this.. */
}
#document-topics .input-group .form-control.file-upload-filename,
.dbq-form .input-group .form-control.file-upload-filename {
    border: 2px solid #3c414c !important;
    border-right: 0 !important;
}
#document-topics .input-group.file-upload-hover .form-control.file-upload-filename,
.dbq-form .input-group.file-upload-hover .form-control.file-upload-filename {
    border: 0 !important;
}
#document-topics .input-group button.file-upload-clear,
.dbq-form .input-group button.file-upload-clear {
    border-right: 0 !important;
}

#content-wrapper .form-control {
    border: 2px solid #3c414c;
    color: #FDFDFD;
    background-color: #1A1E23;
    padding: 2px;
}
    #content-wrapper .form-control#searchbox {
        padding: 2px 10px;
    }
#content-wrapper select.form-control option {
    background: #121416;
}
#content-wrapper #document-class-list-filters .document-class-list-filter .form-control {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
.modal .form-control {
    /*background-color: #FDFDFD !important;
    border: 2px solid #CED6E3 !important;*/
}
    #content-wrapper .form-control[disabled], #content-wrapper .form-control[readonly], #content-wrapper fieldset[disabled] .form-control, #content-wrapper .form-control:disabled {
        opacity: 1 !important;
    }
#document-topics select[multiple="multiple"],
.dbq-form select[multiple="multiple"] {
}

#document-topics .topic select.form-control,
.dbq-form select.form-control {
}
    /* If data-inspect-folder-document-id = NOT EMPTY -> and eye icon is visible */
    #document-topics .topic select.form-control[data-inspect-folder-document-id][data-inspect-add-rule-code=''],
    .dbq-form select.form-control[data-inspect-folder-document-id][data-inspect-add-rule-code=''] {
        border-right: 2px solid #3c414c !important; /*2px solid #3c414c !important;*/
        /*border-right: 0 !important;*/ /* border should not be visible here!!!!!!!!!!!! BMS -> medewerkers -> edit icon in table */
    }
        #document-topics .topic select.form-control[data-inspect-folder-document-id][data-inspect-add-rule-code='']:disabled,
        .dbq-form select.form-control[data-inspect-folder-document-id][data-inspect-add-rule-code='']:disabled {
            border-right: 2px solid #26292f !important;
        }
        /* if there is a Inspect rule code -> add button is visible */
        /* Geen documentID = altijd geen knoppen */
    #document-topics .topic select.form-control[data-inspect-add-rule-code=''],
    .dbq-form select.form-control[data-inspect-add-rule-code=''] {
        border-right: 0 !important; /* !important is needed.. Don't know why */
    }
        #document-topics .topic select.form-control[data-inspect-add-rule-code='']:focus,
        .dbq-form select.form-control[data-inspect-add-rule-code='']:focus {
            border-right: 2px solid #0075DB !important;
            z-index: 890;
        }

#document-topics hr,
.dbq-form hr {
    border-top: 1px solid #3c414c;
}
#document-topics .dbq-form-group-title-label,
.dbq-form .dbq-form-group-title-label {
    background: #26292f;
    border: 2px solid #3c414c;
    border-bottom: 0;
    color: #a7aab2;
}
    #document-topics .dbq-form-group-title-label.dbq-label-disabled,
    .dbq-form .dbq-form-group-title-label.dbq-label-disabled {
        background: #26292f;
        border: 2px solid #26292f;
        border-bottom: 0;
        opacity: 1 !important;
    }
#document-topics div[data-topic-name="Dashboard"] .dbq-form-group-title-label.dbq-label-disabled,
.dbq-form div[data-topic-name="Dashboard"] .dbq-form-group-title-label.dbq-label-disabled {
    background: #1A1E23;
    border: 2px solid #1A1E23;
    border-bottom: 0;
    opacity: 1 !important;
}
#document-topics div[data-topic-name="Dashboard"].topic .form-control:disabled,
#document-topics div[data-topic-name="Dashboard"].topic .form-control.disabled,
.dbq-form div[data-topic-name="Dashboard"].topic .form-control:disabled,
.dbq-form div[data-topic-name="Dashboard"].topic .form-control.disabled {
    background: #1A1E23 !important;
    border: 2px solid #1A1E23 !important;
}
#content-wrapper div[data-topic-name="Dashboard"].topic .input-list-item-content select.form-control:disabled,
#content-wrapper div[data-topic-name="Dashboard"].topic .input-list-item-content select.form-control.disabled {
    background: #3c414c !important;
    border: 2px solid #3c414c !important;
}
.ui-iggrid td.ui-state-active.ui-state-focus,
.ui-iggrid td.ui-state-focus,
.ui-iggrid tr.ui-state-focus td,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-iggrid .ui-state-active,
.ui-iggrid tr.ui-ig-altrecord.ui-state-focus td, .ui-iggrid tr.ui-ig-altrecord.ui-state-focus th, .ui-iggrid tr.ui-state-focus td, .ui-iggrid tr.ui-state-focus th {
    background: #3c414c !important;
    background-color: #3c414c !important;
    border: 1px solid #3c414c !important;
}
tr.ui-state-hover,
tr.ui-state-hover td,
tr.ui-state-hover td.ui-state-focus
tr.ui-state-hover.ui-state-focus td,
tr.ui-state-hover.ui-state-focus td.ui-state-focus,
td.ui-state-hover,
tr.ui-state-hover td.ui-state-hover.ui-state-focus,
tr.ui-state-hover.ui-state-focus td.ui-state-hover.ui-state-focus {
    background: #0075DB !important;
    background-color: #0075DB !important;
    border: 1px solid #0075DB !important;
}

#document-topics .dbq-form-group-title-label svg,
.dbq-form .dbq-form-group-title-label svg {
    fill: #a7aab2;
}
    #document-topics .dbq-form-group-title-label svg:hover,
    .dbq-form .dbq-form-group-title-label svg:hover {
        fill: #FFEC97;
    }
#document-topics .input-list .dbq-form-group-title-label,
.dbq-form .input-list .dbq-form-group-title-label {
    background: #26292f !important;
    background-color: #26292f !important;
}
    #document-topics .input-list .dbq-form-group-title-label.dbq-label-disabled,
    .dbq-form .input-list .dbq-form-group-title-label.dbq-label-disabled {
        background: #26292f !important;
        background-color: #26292f !important;
    }
#document-topics .input-list .input-group-addon,
.dbq-form .input-list .input-group-addon {
    background: #26292f !important;
    background-color: #26292f !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: #26292f;
    /*background-image: linear-gradient(#1A1E23, #1e2333);*/
    border: 2px solid #3c414c;
    border-bottom: 0;
    color: #a7aab2;
    font-weight: 600 !important;
    width: 100% !important;
    float: left;
    line-height: 12px;
}
    #document-topics .topic .dbq-form-group-title p > span,
    .dbq-form .dbq-form-group-title p > span { /* In case a span is within a p*/
        margin: 0;
        padding: 0;
        background: 0;
        border: 0;
        border-bottom: 0;
        float: none;
        margin-left: 5px;
        font-size: 16px !important;
    }

/*form[data-view-mode="View"] .dbq-form label, <-- this one is not possible (every label is getting a double border)*/
form[data-view-mode="Delete"] #document-topics .topic .dbq-form-group-title p,
form[data-view-mode="Delete"] #document-topics .topic .dbq-form-group-title span,
form[data-view-mode="Delete"] .dbq-form .dbq-form-group-title p,
form[data-view-mode="Delete"] .dbq-form .dbq-form-group-title span,
form[data-view-mode="Delete"] .modal .form-group label
form[data-view-mode="View"] #document-topics .topic .dbq-form-group-title p,
form[data-view-mode="View"] #document-topics .topic .dbq-form-group-title span,
form[data-view-mode="View"] .dbq-form .dbq-form-group-title p,
form[data-view-mode="View"] .dbq-form .dbq-form-group-title span,
form[data-view-mode="View"] .modal .form-group label {
    background: #26292f;
    border: 2px solid #26292f;
    color: #a7aab2;
}
form[data-view-mode="View"] #document-topics .checkbox label,
form[data-view-mode="View"] .dbq-form .checkbox label,
form[data-view-mode="View"] .modal .form-group .checkbox label {
    background: #26292f;
    border: 2px solid #26292f;
    color: #a7aab2;
}
#document-topics label.dbq-label-disabled,
.dbq-form label.dbq-label-disabled {
    background: #26292f;
    border: 2px solid #26292f;
    border-bottom: 0;
    color: #a7aab2;
}
#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: #26292f;
    border: 2px solid #26292f;
    color: #a7aab2;
}

.dbq-label-disabled + .form-group .input-group-addon svg {
    background: #26292f;
    color: #a7aab2 !important;
    fill: #a7aab2 !important;
}

#document-topics .multiple-select-selectmulti[data-is-read-only="true"],
.dbq-form .multiple-select-selectmulti[data-is-read-only="true"] {
    /*padding: 5px; <-- different padding needed when this is disabled.. */
    padding: 15px 13px; /* why: 10px 13px ??? this makes it 40px height instead of 50px.. Changed this for delete form */
    background: #26292f;
    border: 0;
    /*border: 2px solid #26292f; <-- causing double borders at -> CMS -> relatiebeheer -> add btn -> (tab) tags */
    font-weight: 600;
}
.modal form[data-view-mode="View"] #document-topics .multiple-select-selectmulti[data-is-read-only="true"],
.modal form[data-view-mode="View"] .dbq-form .multiple-select-selectmulti[data-is-read-only="true"] {
    background: #26292f;
}

/* 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: #26292f !important;
    border: 2px solid #26292f !important;
}
    #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: #FFFFFF !important;
    }

/* Focus (Selected) */
#document-topics .form-control:focus,
.dbq-form .form-control:focus {
    border-color: #0075DB !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: #0075DB !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: #1A1E23;
    color: #fff;
    /*-webkit-box-shadow: 0px 2px 10px rgba(8,104,254,0.4);
    -moz-box-shadow: 0px 2px 10px rgba(8,104,254,0.4);
    box-shadow: 0px 2px 10px rgba(8,104,254,0.4);*/
    -webkit-box-shadow: 0px 2px 10px rgb(0 0 0 / 40%);
    -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 10px rgb(0 0 0 / 40%);
}

/*
    no image found text
*/
.dbq-no-image-found-text {
    background: #26292f !important;
    border: 2px dashed #26292f;
    color: #FDFDFD;
}


/* **************************************************
    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: #dcdcdc;
}
#document-topics .topic h4,
.dbq-form h4 {
    color: #0088FF;
}
#document-topics .topic p,
.dbq-form p {
    color: #a7aab2;
}
form[data-view-mode="View"] #document-topics .input-list p,
form[data-view-mode="View"] .dbq-form .input-list p {
    color: #FFFFFF;
}
.dbq-divider.input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="true"] {
    background: #26292f;
}
.dbq-divider.input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="true"] .input-list-content {
    border: 2px solid #26292f;
}
#document-topics .topic .action-button span,
.dbq-form .action-button span {
    background: #0088FF;
    border-color: #0088FF;
}

/*
    Tooltips on labels
*/
.tooltip-inner {
    background: #F9F8D9; /*#FFEC97*/
    color: #001323;
    -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.7);
    -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.7);
    box-shadow: 0px 2px 10px rgba(0,0,0,0.7);
}
.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 2px 10px rgb(0 0 0 / 70%));
    filter: drop-shadow(0px 2px 10px rgb(0 0 0 / 70%));
    -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 2px 10px rgb(0 0 0 / 70%));
    filter: drop-shadow(0px 2px 10px rgb(0 0 0 / 70%));
    -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 !important;
        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: #210100 !important;
    background-color: #210100 !important;
    border-color: #D5473C !important;
    color: #FFFFFF !important;
}
    #document-topics .topic .form-control.error:focus,
    .dbq-form .form-control.error:focus {
        /*border-color: #ff766c !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-image: url("data:image/svg+xml;utf8,<svg fill='%230088FF' 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: #FFFFFF !important;
    background-position-x: calc(100% - 10px) !important;
    background-position-y: 50% !important;
    background-size: 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: #1A1E23 !important; /*#121416 <-- changed to this, but maybe that was for disabled */
        color: #FFFFFF !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 #0075DB !important;
}
.modal-content .file-upload-hover button.btn-default:enabled {
    border: 0 !important;
}

/* Dark mode table override*/
.table {
    color: #FFFFFF !important;
}
    .table thead th {
        border-bottom: 2px solid #292f37 !important;
    }



/*
    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: #0075DB;
}
.ui-iggrid .ui-iggrid-paging .ui-icon:before {
    color: #0075DB;
}
.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: #A0A3B1;
}*/



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



































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

.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;
}

#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 #3c414c;
    background: #1a1e23;
    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 #26292f;
    background: #26292f;
}

#document-topics .topic .dbq-form-group-title p,
.modal #document-topics .row.dbq-form-group-title[data-element-type="Text"] p,
.dbq-form .dbq-form-group-title p,
.modal .dbq-form .row.dbq-form-group-title[data-element-type="Text"] p {
    padding: 7px 10px;
    background: #26292f;
    border: 2px solid #3c414c;
    border-bottom: 0;
}
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,
.modal form[data-view-mode="Delete"] #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,
.modal form[data-view-mode="Delete"] .dbq-form .row.dbq-form-group-title[data-element-type="Text"] p {
    background: #26292f;
    border: 2px solid #26292f;
}
#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 #3c414c !important; /* This needs to be 1px ... otherwise all table border should change.. (active/hover/focus)*/
    background-color: #3c414c !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}
.ui-widget-content tr td.ui-state-hover,
.ui-widget-header tr td.ui-state-hover {
    background: #0075DB !important;
    background-color: #0075DB !important;
    border-color: #0075DB !important;
    color: #FFFFFF !important;
}

.file-upload input[type=file] {
    height: 46px;
}
#document-topics .topic .image-file-upload-input,
#document-topics .topic .file-upload-input,
.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: #26292F;
}
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: #26292F;
}

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

/* ****************************** 
    Timeline button override
****************************** */
#content-wrapper .fc button.btn:enabled {
    border-right: 2px solid #0088ff !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 #0088ff !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 #0075DB !important;
    }
    #content-wrapper .fc button.btn:enabled:hover { /*#content-wrapper .fc button.btn:enabled:last-of-type:hover */
        border-right: 2px solid #0075DB !important;
    }

#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: #FFFFFF !important;
}
#content-wrapper #classlist-timeline.fc button.btn-primary.active {
    background: #FFFFFF !important;
    border: 0 !important;
    color: #001323 !important;
}
#classlist-timeline.fc button.fc-today-button:disabled {
    background: #3c414c !important;
    border: 2px solid #3c414c !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
}
    #classlist-timeline.fc button.fc-today-button:disabled:hover {
        background: #3c414c !important;
        border: 2px solid #3c414c !important;
        color: #FFFFFF !important;
        opacity: 1 !important;
    }
#classlist-timeline.fc .fc-view-harness {
    background: #1A1E23;
}
#classlist-timeline.fc .fc-timeline table.table-bordered {
    border: 1px solid #1A1E23;
    -webkit-box-shadow: 0px 2px 10px rgb(0 0 0 / 40%);
    -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 10px rgb(0 0 0 / 40%);
}
    #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: #1A1E23 !important;
}
#classlist-timeline.fc .fc-scroller::-webkit-scrollbar-thumb {
    border: 4px solid #1A1E23 !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: #FFFFFF;
}
    #content-wrapper .dropdown-menu .dropdown-item:hover {
        background-color: #121416;
    }















/* MOET WSS OOK WEER VERDEELD WORDEN ...? classlist??? overschrijft hij dan nog???? wss weer een gedeelte wel/niet... */

/* ****************************** 
    Kennisbank
    - breadcrumbs
****************************** */
#classlist-knowledge-base .dbqkbc-breadcrumbs-container {
    border-bottom: 1px solid #1f262f;
}
    #classlist-knowledge-base .dbqkbc-breadcrumbs-container .btn svg {
        fill: #dcdcdc;
    }
    #classlist-knowledge-base .dbqkbc-breadcrumbs-container .btn span {
        color: #dcdcdc
    }
        #classlist-knowledge-base .dbqkbc-breadcrumbs-container .btn svg:hover {
            fill: #0088FF;
        }
        #classlist-knowledge-base .dbqkbc-breadcrumbs-container .btn span:hover {
            color: #0088FF;
        }
        .dbqkbc-breadcrumbs-container .btn:not(:last-child):after {
            content: url("data:image/svg+xml,<svg fill='%23494e5d' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><g><path d='M6.5,4c-1.3,1.3-2.7,2.7-4,4C2.2,7.7,1.9,7.4,1.6,7.1c0.9-0.9,2-2,3-3C3.6,3,2.5,2,1.5,0.9c0.4-0.3,0.7-0.7,1-0.9C3.8,1.3,5.1,2.7,6.5,4z'/></g></svg>");
        }

/* ****************************** 
    Kennisbank
    - header tekst
****************************** */
.dbqkbc-folder-header-container h2 {
    color: #FFFFFF;
}
.dbqkbc-folder-header-container p {
    color: #dcdcdc;
}
.dbqkbfc-search-container .dbqkbfc-input-search {
    background: #121416 !important; /* <-- important, because knowledgebase is after this styles..?*/
    border: 2px solid #3c414c !important;
    color: #FFFFFF !important;
}
    .dbqkbfc-search-container .dbqkbfc-input-search::-webkit-input-placeholder {
        color: #0088FF !important;
    }
    .dbqkbfc-search-container .dbqkbfc-input-search::-moz-placeholder {
        color: #0088FF !important;
    }
    .dbqkbfc-search-container .dbqkbfc-input-search:-ms-input-placeholder {
        color: #0088FF !important;
    }
    .dbqkbfc-search-container .dbqkbfc-input-search:-ms-input-placeholder {
        color: #0088FF !important;
    }
.dbqkbfc-search-container .dbqkbfc-input-search svg {
    fill: #FFFFFF;
}

/* ****************************** 
    Kennisbank
    - folders + articles
****************************** */
.dbqkbc-folders-container .dbqkbc-folder-categories-container h3,
.dbqkbc-articles-container .dbqkbc-articles h3,
.dbqkba-articles-container .dbqkba-articles h3 {
    color: #FFFFFF;
}
.dbqkbf-folder,
.dbqkba-article {
    background: #1A1E23 !important;
    border-color: #1A1E23 !important;
    box-shadow: 0px 2px 10px rgb(0 0 0 / 40%);
    -webkit-box-shadow: 0px 2px 10px rgb(0 0 0 / 40%);
    -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 10px rgb(0 0 0 / 40%);
}
    .dbqkbf-folder h4, 
    .dbqkba-article h4 {
        color: #FFFFFF;
    }
    .dbqkbf-folder h5,
    .dbqkba-article h5 {
        color: #0088FF;
    }
    .dbqkbf-folder p,
    .dbqkba-article p {
        color: #dcdcdc;
    }
#content-wrapper #classlist-knowledge-base button svg,
#content-wrapper #classlist-knowledge-base .btn-primary:enabled svg {
    fill: #0088FF !important;
}
#content-wrapper #classlist-knowledge-base .btn-primary.dbqkbc-function-button {
    background: #0075DB !important;
    border: 2px solid #0088FF !important;
}
    #content-wrapper #classlist-knowledge-base .btn-primary.dbqkbc-function-button:hover {
        background: #0069d4 !important;
        border: 2px solid #0075DB !important;
    }
#content-wrapper #classlist-knowledge-base .dbqkbf-folder button:hover,
#content-wrapper #classlist-knowledge-base .dbqkba-article button:hover {
    background: #0075DB !important;
    border: 2px solid #0088FF !important;
}
#content-wrapper #classlist-knowledge-base .dbqkbpc-pages li.dbqkbpc-page.active {
    border: 2px solid #0088FF;
    color: #FFFFFF;
}

#content-wrapper #classlist-knowledge-base .dropdown-item {
    color: #ffffff;
}
    #content-wrapper #classlist-knowledge-base .dropdown-item:hover {
        background: #121416;
    }










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: #26292f !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: #26292f !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: #26292f;
    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: #26292f !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 {
    background: #1a1e23 !important;
    border: 2px solid #3c414c !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: #26292f !important;
    border: 2px solid #26292f !important;
    border-top: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}