/*****************************************
    SVG
*****************************************/
/*svg {
    width: 20px; <-- this is allready done in default stylesheets
    height: 20px;
}*/
#dbq-notification-center-menu-container .dbqnc-toggle-button svg,
#dbq-notification-center-menu .dbqnc-toggle-button svg,
#content-wrapper .input-group-addon svg,
.dbq-dropdown-on-right-click-container .dbq-dropdown-close svg,
.dbq-maintenance-container-center button svg {
    width: 30px;
    height: 30px;
}

/*
    * Not needed i guess
    *
#content-wrapper .dbq-document-list-table-view table svg,
.classlist-dashboard .topic .btn-default svg,
#navigator .navigation-button svg,
.foldertree-header svg,
.foldertree-header svg.dbq-top-level-nav-icon,
.foldertree-header svg.dbq-align-right,
ul.gj-list-bootstrap li.list-group-item svg,
.dbq-list-item-icon-big svg, /* <-- was !important..*/ /*
[data-type="tree"] ul li [data-role="icon"] svg,
.dbq-element-graph-container a.dbq-export-button svg,
#content-wrapper button svg,
#content-wrapper .btn-primary svg {
    width: 20px;
    height: 20px;
}
*/

/*****************************************
    SVG
    - Breadcrumbs
*****************************************/
#wrapper > header .organisation #breadcrumbs svg {
    margin: 3px 10px;
}

/*****************************************
    SVG
    - notifications
*****************************************/
#dbq-notification-center-menu-container .dbqnc-toggle-button svg, 
#dbq-notification-center-menu .dbqnc-toggle-button svg {
    margin: 0;
    padding: 0;
}

/*****************************************
    SVG
    - dbq-document-list-table-view
*****************************************/
#content-wrapper .dbq-document-list-table-view table svg {
    fill: #3a3b40;
    margin: 0;
    padding: 2px;
}
    #content-wrapper .dbq-document-list-table-view table svg:hover {
        fill: #0095ff;
    }

/*****************************************
    SVG
    - .input-group-addon
*****************************************/
#content-wrapper .input-group-addon svg {
    padding: 5px;
}
.input-group-addon svg {
    height: 46px;
    border: 0;
    border-radius: 0 0 0 10px;
}

.classlist-dashboard .topic .btn-default svg {
    float: left;
    padding: 3px;
}

.datepicker .prev svg, 
.datepicker .next svg {
    float: left;
    margin: 0 9px !important;
    width: 16px !important;
    height: 16px !important;
}

.bootstrap-datetimepicker-widget .timepicker-picker table svg {
    margin: 0 !important;
}

#navigator .dbq-minimize-main-menu svg {
    padding: 5px 0 !important;
}

/*#classlist-tree-grid svg {
    width: 16px;
    height: 16px; <-- this is probably never good..
}*/

#navigator .foldertree-header {
    padding: 15px;
    height: 51px;
}

.foldertree-header svg {
    display: inline-block;
    margin: 0;
    padding: 0;
}
    .foldertree-header svg.dbq-top-level-nav-icon {
        float: left;
        padding: 0;
        margin: 0;
    }
    .foldertree-header svg.dbq-align-right {
        float: left; /*right*/
        display: inline-block;
        margin: 0;
        padding: 5px;
        transform: rotate(0deg);
    }
.foldertree-header.active svg.dbq-align-right {
    display: block;
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate( 180deg );
    transform: rotate( 180deg );
}

ul.gj-list-bootstrap li.list-group-item svg {
    float: left;
    margin: 0;
    padding: 5px 0;
}
.dbq-list-item-icon-big svg {
    padding: 0 !important;
    margin: 0 !important
}

[data-type="tree"] ul li [data-role="icon"] svg {
    padding: 0;
    margin: 0 !important;
}

.gj-tree-bootstrap-3 ul li [data-role="expander"].gj-tree-glyphicons-expander svg {
    float: left;
    width: 10px;
    height: 20px;
    margin: 0;
    padding: 5px 0;
}
    ul.gj-list li [data-role="options"] svg {
        margin: 0;
    }
    
/* Hover svg */
ul.gj-list-bootstrap li span[data-role="display"]:hover {
}
ul.gj-list-bootstrap li span[data-role="expander"] svg:hover, 
ul.gj-list-bootstrap li span[data-role="options"] svg:hover {
}
/* ##### ul.gj-list gj-list-bootstrap list-group ##### */
ul.gj-list-bootstrap li, .gj-tree-bootstrap-3 ul.gj-list-bootstrap li {
    border-radius: 10px;
}

/* ****************************** ******************************
    expanded state (FIRST)
****************************** ****************************** */
ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style {
    border-radius: 0 !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"] {
    border-radius: 10px;
}

#content-wrapper button.btn-default.dropdown-toggle:enabled svg, .modal-content button.btn-default.dropdown-toggle:enabled svg {
    width: 10px;
    height: 20px;
    padding: 5px 0;
}
.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;
}

.dbq-element-graph-container a.dbq-export-button svg {
    padding: 3px;
}

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


.dbq-maintenance-container-logo svg {
    float: left;
    width: auto; /*211px*/
    height: 50px;
}
.dbq-maintenance-container-center button.dbq-maintenance-tel svg {
    fill: #FFFFFF !important;
}
.dbq-maintenance-container-center button.dbq-maintenance-mail svg {
    fill: #0a0a0a !important;
}
    .dbq-maintenance-container-center button svg {
        float: left;
        margin-right: 10px;
    }

.dbq-maintenance-container-logo svg .dbq-logo-color-1 {
    fill: #111111;
}
.dbq-maintenance-container-logo svg .dbq-logo-color-2 {
    fill: #333333;
}
.dbq-maintenance-container-logo svg .dbq-logo-color-3 {
    fill: #555555;
}
.dbq-maintenance-container-logo svg .dbq-logo-color-4 {
    fill: #000111;
}
.dbq-maintenance-container-logo svg .dbq-logo-color-5 {
    fill: #3a3a3a;
}
.dbq-maintenance-container-logo svg .dbq-logo-color-6 {
    fill: #989898;
}

.dbq-dropdown-on-right-click-container .dbq-dropdown-close svg {
    padding: 0;
    margin: 35px;
    fill: #FFFFFF;
    float: left;
}
    .dbq-dropdown-on-right-click-container .dbq-dropdown-close:hover svg {
        fill: #0075DB;
    }

/* Normal + svg (icon) */
/*#content-wrapper .dbqdt-tool-topbar button svg {
    padding: 5px;
}*/
    #content-wrapper button svg.dbqdt-btn-icon-only, 
    #content-wrapper .btn-primary svg.dbqdt-btn-icon-only {
        padding: 0;
    }
#content-wrapper button.dbqdt-btn-build svg {
    padding: 1px;
}

#content-wrapper .dbq-graph-toolbar .btn-primary {
    padding: 5px;
}
#content-wrapper .dbq-graph-toolbar .btn-primary svg {
    padding: 3px;
}
#content-wrapper #classlist-tree-grid svg {
    margin: 0;
}

.btn-outline-primary.dbq-select-view-button svg,
.btn-outline-primary.dbq-select-add-button svg {
    width: 40px;
    height: 30px;
    padding: 5px 10px;
    border-radius: 10px;
    fill: #0054F0;
}
.btn-outline-primary.dbq-select-view-button:hover svg,
.btn-outline-primary.dbq-select-add-button:hover svg {
    fill: #000000;
}

.input-group-addon svg,
.dbq-label-disabled + .form-group .input-group-addon svg {
    border-radius: 0 0 0 8px;
}











#content-wrapper li {
    margin: 0;
}
#content-wrapper p {
    margin-bottom: 0;
}
#content-wrapper h4 {
    margin-top: 0; /* RUMM h4 has a margin top.. */
}
#content-wrapper .row {
    margin: 0; /*!important <-- in this file the bootstrap margin should always be overwritten..*/
}

/* ****************************** 
    Topbar    
****************************** */
/* Logo */
.navbar-brand {
    padding: 20px 35px;
}

/* User info */
#user_info {
    margin: 20px 35px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    height: 30px;
}

/* Breadcrumbs */
#wrapper > header .organisation {
    display: none;
}
    #wrapper > header .organisation #breadcrumbs a#breadcrumb_home {
        margin-right: 5px;
        padding: 2px 0 !important;
    }
    #wrapper > header .organisation #breadcrumbs b {
        float: left;
    }
    #wrapper > header .organisation #breadcrumbs a {
        padding: 0;
        margin-bottom: 0;
        list-style: none;
        float: left;
    }

/* ****************************** 
    Breadcrumbs
****************************** */
#content-wrapper #dbq-document-class-list-breadcrumbs .btn {
    padding: 0;
}
#wrapper > header .organisation #breadcrumbs a {
    border-radius: 10px;
}

/* Notifications */
#dbq-notification-center {
    overflow: hidden;
}
#dbq-notification-center-menu-container, .class-list-menu-help {
    padding: 0;
}
#dbq-notification-center-menu {
    float: left;
}
    #dbq-notification-center-menu-container .dbqnc-toggle-button, #dbq-notification-center-menu .dbqnc-toggle-button {
        float: left !important;
        width: 30px !important;
        height: 30px !important;
        /*margin: 20px 10px 20px 20px !important; <-- this happens allready in stylesheets on outer container */
        padding: 0 !important;
    }
.dbqnc-badge {
    margin-right: -4px;
    margin-top: -2px;
    padding: 4px !important;
    font-size: 10px;
    line-height: 10px !important;
    font-weight: 500;
}
.dbqnc-navbar-item-title .dbqnc-badge {
    padding: 3px !important;
    line-height: 11px !important;
    font-size: 11px;
    font-weight: 600;
    background: #ec1515;
    color: #FFF;
    border: 2px solid #f4f7fd;
}

/* ****************************** 
    Nav-tabs    
****************************** */
#content-wrapper .nav-tabs {
    /*height: 51px !important; <-- static height isn't possible if nav items need to float under each other */
    padding: 9px 10px !important;
}
    #content-wrapper .nav-tabs > li > a {
        border-bottom: 0 !important;
        float: left;
    }
    .nav-tabs > li > a,
    #content-wrapper .nav-tabs > li > a,
    #document-topics .nav-tabs > li > a,
    #document-topic-tabs .nav-tabs > li > a {
        font-family: 'Poppins', sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 20px;
        padding: 6px 14px;
    }
        #content-wrapper .nav-tabs > li > a:hover {
            padding: 6px 14px;
            text-decoration: none;
        }
    #content-wrapper .nav-tabs > li.active {
        border-radius: 10px;
    }
.nav-tabs > li.active > a {
    font-family: 'Poppins', sans-serif; /* Moved from DocumentClassList.css to here */
}
#content-wrapper .nav-tabs > li.active > a {
    text-decoration: none;
    float: left;
    font-weight: 600 !important;
}
            #content-wrapper .nav-tabs > li.active > a::after, #content-wrapper .nav-tabs > li:hover > a::after {
                transform: scale(0);
                text-decoration: none;
            }
            #content-wrapper .nav-tabs > li.active > a, #content-wrapper .nav-tabs > li.active > a:focus, #content-wrapper .nav-tabs > li.active > a:hover {
                height: auto;
            }

#content-wrapper .nav-tabs > li:first-of-type a {
    padding: 10px 15px 10px 0 !important;
}
#content-wrapper .nav-tabs.document-topic-tabs > li:first-of-type a,
.document-topic-tabs > li:first-of-type a {
    padding: 6px 14px 6px 0 !important;
}
#content-wrapper .nav-tabs.document-topic-tabs > li.active a,
.document-topic-tabs > li.active a {
    padding: 6px 14px !important; /*5px 12px <-- this padding happens also in ClassList.css */
}
#content-wrapper .classlist-window-tabs .nav-tabs > li:first-of-type a {
    padding: 6px 14px !important;
}
#content-wrapper .nav-tabs > li.active > a:first-of-type {
    padding: 6px 14px !important;
}
#content-wrapper .document-class-list-tabs-container .nav-tabs > li:first-of-type a {
    padding: 6px 14px !important;
}

.nav-tabs > li.active,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    border-radius: 10px;
}

#content-wrapper #submenu_folders {
    padding: 9px 10px !important;
}

/*
    Dynabloqs buttons
*/
/* ****************************** 
    Buttons
****************************** */
.btn {
    border-radius: 10px;
}
.btn:enabled
.btn.enabled {
    cursor: pointer;
}
.btn:disabled
.btn.disabled {
    cursor: not-allowed;
}

/* Normal forms */
#content-wrapper .btn {
    padding: 5px; /* was 8px, but the square button (with icon only) need 5px */
}
#content-wrapper #classlist-top-buttons .btn,
#content-wrapper .modal .modal-content .modal-footer button.btn {
    padding: 3px 10px;
}
#content-wrapper .dbq-graph-scale .btn {
    padding: 5px 10px;
}

/* Normal default */
    /*.dbq-developer-tools .btn,
.dbq-developer-tools .btn-primary,
.dbq-developer-tools .btn-secondary,
.dbq-developer-tools .btn-success,
.dbq-developer-tools .btn-danger,
.dbq-developer-tools .btn-warning,
.dbq-developer-tools .btn-info,
.dbq-developer-tools .btn-link <--------------- SHOULD BE IN DEVELOPERTOOLS...??!!!*/
    /*#document-topics .modal-footer .btn,
#document-topics .modal-footer .btn-primary,
#document-topics .modal-footer .btn-secondary,
#document-topics .modal-footer .btn-success,
#document-topics .modal-footer .btn-danger,
#document-topics .modal-footer .btn-warning,
#document-topics .modal-footer .btn-info,
#document-topics .modal-footer .btn-link <--------------- SHOULD BE IN DbqDocumentBuilder...??!!!*/
#content-wrapper .btn, 
#content-wrapper .btn-primary,
#content-wrapper .btn-secondary, 
#content-wrapper .btn-success, 
#content-wrapper .btn-danger, 
#content-wrapper .btn-warning, 
#content-wrapper .btn-info, 
#content-wrapper .btn-link {
    cursor: pointer;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    /*padding: 3px 10px; */ /* There will only be 2 padding's used.. so don't put it here.. what's here, should count for all buttons */
    /*border-width: 2px;
    border-style: solid;*/
}

#content-wrapper .input-group .form-control:first-child,
#content-wrapper .input-group-addon:first-child,
#content-wrapper .input-group-btn:first-child > .btn,
#content-wrapper .input-group-btn:first-child > .btn-group > .btn,
#content-wrapper .input-group-btn:first-child > .dropdown-toggle,
#content-wrapper .input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
#content-wrapper .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
    border-radius: 10px 0 0 3px;
}

/* ****************************** 
    document-topics  
****************************** */
#document-topic-tabs.nav-tabs {
    padding: 0 30px; /* top+bottom padding is done by li */
}
.alert {
    padding: 10px 30px;
}

.modal p {
    margin: 0;
}
/*.modal-lg {
    max-width: 900px !important;
}*/
@media only screen and (max-width: 960px) {
    .modal-lg {
        max-width: 920px !important;
    }
    .modal-dialog {
        margin: 10px;
    }
}
@media only screen and (max-width: 1140px) and (min-width: 961px) {
    .modal-lg {
        max-width: 1100px !important;
    }

    .modal-dialog {
        margin: 30px;
    }
}
@media only screen and (min-width: 1141px) {
    .modal-lg {
        min-width: 1100px !important;
    }
    .modal-dialog {
        margin: 30px auto;
    }
}
/*.modal-xl {
    max-width: 1100px !important;
}*/
#document-topics .dbq-form-group-title-label {
    padding: 0; /*3px 10px*/ /* this padding should not count for default styling */
}
#document-topics .topic .dbq-form-group-title p, #document-topics .topic .dbq-form-group-title span, .modal .form-group label {
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 12px !important;
    /* nowrap for labels in input lists (tijdregistratie) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
#document-topics .checkbox label {
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 13px 10px !important; /* Needed for checkbox (in modal) with label */
    text-indent: 0;
}
#document-topics h2 {
    font-size: 20px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
}
#document-topics hr {
    /*margin-top: 16px !important;
    margin-bottom: 16px !important; <-- TSN needs all sides margin */
    /*margin: 10px !important; <-- but documents, (tijdregistratie -> voeg werkdag toe) that needs 15px 0 margin..  */
    margin: 14px 0 !important; /* atleast for vovu -> uren */
}
    #document-topics div[data-add-rule-code="TimeBookingDayLineAdd"] hr {
        margin: 15px 0 !important;
    }
.dbq-application-vovu #document-topics hr {
    margin: 14px 0 !important;
}

#document-topics .dbq-form-group-title-label.dbq-label-disabled {
    padding: 0;
}
#document-topics .dbq-form-group-title-label[data-has-info-tooltip="true"] label,
#document-topics .dbq-form-group-title-label[data-has-info-tooltip="false"] label {
    padding: 4px 10px;
}

/* ****************************** 
    Forms in Documents    
****************************** */

/* development -> data -> tab: registry */
.classlist-dashboard #document-topics div[data-element-type="InputProperty"] {
    margin-bottom: 10px;
}

/*
    * THIS WAS FOR FOLDER TYPES form!! BUT: in some forms -> multiple .row are in .flex-container.. so, the rows need margin-bottom 20px.. [example: gebruikers & beveiliging -> voeg gebruiker toe]
    *
    #document-topics .row[data-element-type="InputProperty"] {
    margin: 0 0 20px 0 !important;
}
#document-topics .flex-container {
    margin: 0 0 20px 0 !important;
}
#document-topics .flex-container .row {
    margin: 0 !important;
}
    .flex-container div[data-element-type="InputProperty"] {
        margin: 0 !important;
    }
    .flex-container:last-of-type {
        margin: 0 !important;
    }
    #document-topics .topic .dbq-form-group-title {
        padding: 20px 0 5px 0 !important;
    }
*/
#document-topics .topic .form-group {
    /*z-index: 2; <-- can't.. datepicker can't position above inputs (in modals) with this z-index */
    position: relative;
    flex: 1; /* this flex is for "verzend bericht" form in portal GLT*/
}
    #content-wrapper .flex-container div[data-element-type="InputProperty"] {
        margin: 0;
    }
#content-wrapper .flex-container:last-of-type {
    margin: 0 !important;
}
#document-topics .topic .dbq-form-group-title {
    padding: 0 !important;
    /*margin: 10px 0 0 0 !important;  <-- is this needed for default styling? because it's not needed for BMS -> Development -> modals -> tab: folder types -> checkbox groups */
}
#document-topics .topic .dbq-custom-label {
    margin: 0 !important;
}
#document-topics .topic .dbq-required p:after {
    color: #b64f4b;
    content: '*';
    font-size: 1em;
}

.modal #document-topics .dbq-form-group-title + .flex-container.dbq-form-group {
    /*margin: 0 !important;*/
}

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

#document-topics .topic .dbq-form-group-title p,
.modal #document-topics .row.dbq-form-group-title[data-element-type="Text"] p {
    padding: 7px 10px;
    background: #f5f7f9;
    border: 2px solid #e6e9ed;
}
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 {
    background: #e6e9ed;
}
#document-topics .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?  */
}
#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 {
    background: #e6e9ed;
}
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 {
    background: #f5f7f9;
}
#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 {
    border-radius: 5px 5px 0 0;
}
.modal #document-topics .dbq-form-group-title + .flex-container.dbq-form-group {
    border-radius: 0 0 10px 10px !important;
}
#document-topics .dbq-form-group-title + .row[data-element-type="InputProperty"] .dbq-property-no-label .multiple-select-selectmulti {
    border-radius: 0 0 10px 10px;
}
#document-topics .dbq-form-group-title-label[data-has-info-tooltip="true"] label {
    width: calc(100% - 28px) !important;
}
#document-topics .dbq-form-group-title-label svg {
    margin: 4px;
}

#document-topics div.row[data-element-type="Text"] { /* this can probably have a margin bottom? (form P in forms) */
    /*margin: 0 0 10px 0; <-- can't have margin! check CMS -> contentbeheer -> refresh cache modal */ /* !important <-- cant have important, custom labels are also text element */
    margin: 0;
}

#content-wrapper .form-group {
    padding: 0; /*5px 0 10px <-- cant have padding top in -> local CMS -> TSN -> gebruikers & beveiliging -> voeg gebruiker toe */
}
    #content-wrapper .form-group .searchbox-container {
        padding: 0 !important;
    }
        #content-wrapper .form-group .searchbox-container .input-group-addon {
            border-radius: 3px 0 0 3px;
        }
    /*.form-group input[name="EmployeeWorkLineBeginTime"],*/
    #content-wrapper .form-group input[name="EmployeeWorkLineProductBeginCount"],
    #content-wrapper .form-group input[name="EmployeeWorkLineProductEndCount"],
    #content-wrapper .form-group select[name="EmployeeWorkLineIsSetup"] {
        margin-right: 5px !important;
        width: calc(100% - 5px) !important; /*<-- causing input problem in vuvu -> uren -> voeg werkdag toe */
    }
    #content-wrapper .form-group input[name="EmployeeWorkLineBeginTime"] {
        margin-right: 5px !important;
        width: calc(100% - 55px) !important;
    }
#content-wrapper label {
    margin: 0 0 5px;
    font-weight: 500;
    font-size: 12px; /* this is also for BMS filter label */
    line-height: 12px;
}
#content-wrapper .dbqdt-modal-normal-select-wrapper label {
    font-size: 12px;
    line-height: 12px;
}
.alert {
    margin-bottom: 0;
}
.modal-body {
    padding: 20px 30px;
}
.dbq-modal-header {
    margin-bottom: 0;
}

/*
    document-list-table-view
*/
#content-wrapper .dbq-document-list-table-view {
    padding: 10px;
}
    #content-wrapper .dbq-document-list-table-view table.dataTable {
        margin: 0 !important;
    }
#content-wrapper .dbq-document-list-table-view label {
    margin: 0 0 5px;
    font-weight: 500;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    padding: 0 10px;
    margin: 10px;
    border-radius: 3px;
    background: #ffffff;
    border: 2px solid #f3f4f7;
}
    #content-wrapper .dbq-document-list-table-view select.form-control {
        margin: 0 10px;
    }
    #content-wrapper .dbq-document-list-table-view .icon-view:before {
        display: none;
    }
    #content-wrapper .dbq-document-list-table-view table span.row-button {
        padding: 0;
    }
    #content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_info {
        float: left;
        width: auto;
        padding: 15px 10px;
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
    }
    #content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate {
        float: right;
        width: auto;
        padding: 0;
    }
        #content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate ul.pagination {
            margin: 0;
        }
        #content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate li {
            font-size: 12px;
            font-weight: 500;
            line-height: 20px;
            background: #f3f4f7;
            border: 2px solid #f3f4f7;
            margin: 0;
            margin-left: 5px;
            border-radius: 3px;
            padding: 3px 10px;
        }
            #content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate li:hover {
                background: #3a3b40;
                border: 2px solid #3a3b40;
                cursor: pointer;
            }
            #content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate li:hover a {
                color: #fff;
                text-decoration: none;
            }
        #content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate .paginate_button.active {
            border: 2px solid #0095ff !important;
            background-color: #FFFFFF !important;
            color: #FFFFFF !important;
        }
            #content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate .paginate_button.active:hover {
                border: 2px solid #0095ff !important;
                background-color: #0095ff !important;
                color: #ffffff !important;
            }

#content-wrapper .dbq-document-list-table-view label,
#content-wrapper .dbq-document-list-table-view div.dataTables_wrapper div.dataTables_paginate li {
    border-radius: 10px;
}


/* ****************************** 
    side_navigation  
****************************** */
#side_navigation {
}

/* ****************************** 
    span.button ??? 
****************************** */
#content-wrapper span.button:before {
    font-size: 16px;
    line-height: 16px;
    margin: 2px 5px 2px 0 !important;
}
#content-wrapper span.button b {
    font-size: 12px;
    line-height: 12px;
    font-weight: 600;
}

#content-wrapper span.add_icon.table {
    margin: 0;
}

#content-wrapper span.message_no_items {
    margin: 20px 0;
}

/* ****************************** 
    ?    
****************************** */

#versions {
    width: 100%;
}

#submenu.editor {
    float: left;
}

    #submenu.editor li {
        display: inline;
        margin-right: 30px;
        padding: 15px 0;
        font-size: 16px;
        cursor: pointer;
        line-height: 16px;
        float: left;
    }

#document_links {
    padding: 20px 40px;
}

#content-wrapper .col-xs-12, #content-wrapper #2bfcd7b690f6484798192104bf782433_chart_container {
    width: 100%;
}

#content-wrapper .field-container .cell_right {
    width: calc(100% - 150px);
}

/* ****************************** 
    Content table    
****************************** */
#content-wrapper .content-table thead tr:first-of-type {
    height: 50px;
}

#content-wrapper .content-table {
    margin: 0;
    line-height: 14px;
    font-size: 14px;
}

    #content-wrapper .content-table th, .content-table td {
        padding: 4px 10px;
    }

    #content-wrapper .content-table input.search {
        font-size: 14px;
        height: 30px;
        display: inline-block;
        padding: 5px 8px;
        vertical-align: middle;
        width: 220px;
        line-height: 14px;
    }

/* Search in table <-- where then..? because i can find only: form-control */
#content-wrapper .form-inline {
    border-radius: 10px;
}

/* ****************************** 
    Data visualisations 
****************************** */
#content-wrapper .ui-widget-content {
    font-family: 'Poppins', sans-serif;
}

#content-wrapper #content textarea, #content-wrapper #content select {
    font-weight: 500;
}

/* ****************************** 
    form-control  
****************************** */
#document-topics .form-control {
    border-radius: 0 0 10px 10px;
}
    #document-topics .form-control[data-is-translating='true'] {
        border-radius: 0 !important;
    }
#document-topics select.form-control[data-inspect-folder-document-id][data-inspect-add-rule-code] {
    border-radius: 0 0 10px 10px;
}

.dbqdb-translation-languages-container {
    float: right;
    padding: 10px 30px;
}

#content-wrapper .input-group-addon {
    padding: 5px;
}
#document-topics .topic form[data-view-mode="View"] .input-group-addon input.form-control {
    border-radius: 0 0 10px 0 !important;
}

#content-wrapper #document-class-list-filters .document-class-list-filter .form-control {
    box-shadow: none !important;
}
.modal .form-control {
    border: 2px solid #dde2e8 !important;
    color: #001323;
}

    
#content-wrapper .form-control {
    height: 26px; /*search bar in portal/cms cant have 30px*/
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    border: 0; /*important for select in filters*/
}
    #content-wrapper .form-control[name="search-value"] {
        height: 30px; /* for search bar in tables */
    }
#content-wrapper select.form-control {
    height: 34px;
    padding: 2px 5px;
}
    #content-wrapper .form-control[disabled], #content-wrapper .form-control[readonly], #content-wrapper fieldset[disabled] .form-control, #content-wrapper .form-control:disabled {
        cursor: not-allowed;
        pointer-events: all !important;
    }

#document-topics .topic 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=''] {
        border-right: 2px solid #e6e9ed !important;
        /*border-right: 0 !important;*/ /* border should not be visible here!!!!!!!!!!!! BMS -> medewerkers -> edit icon in table */
    }
    /* 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=''] {
        border-right: 0 !important; /* !important is needed.. Don't know why */
    }
        #document-topics .topic select.form-control[data-inspect-add-rule-code='']:focus {
            border-right: 2px solid #0054F0 !important;
            z-index: 890;
        }

#document-topics .input-group.date input.form-control {
    border-radius: 0 0 10px 0;
}

#document-topics .checkbox label {
    border-radius: 0;
}
    #document-topics .input-group .form-control.datetimepicker {
        border-radius: 0 0 10px 0;
    }
    #document-topics .input-group .form-control.datepicker {
        border-radius: 0 0 10px 0;
    }

#document-topics .multiple-select-selectmulti select.form-control {
    border-radius: 0 0 10px 10px;
}
/*#document-topics .dbq-input-no-label .form-control {
    border-radius: 10px;
}*/
#document-topics .dbq-input-no-label .input-group .form-control {
    border-radius: 0 10px 10px 0;
}
#document-topics .dbq-input-no-label .input-group .input-group-addon { /* #document-topics .dbq-input-no-label .input-group .cr-icon <-- why would this be a weird border-radius? */
    border-radius: 10px 0 0 10px;
}

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

.modal form[data-view-mode="View"] #document-topics .multiple-select-selectmulti[data-is-read-only="true"] {
    border-radius: 10px;
}
.modal form[data-view-mode="View"] #document-topics .multiple-select-selectmulti[data-is-read-only="true"] {
    border-radius: 10px;
}
.modal #document-topics .row[data-element-type="InputProperty"] .dbq-property-no-label .multiple-select-selectmulti-left {
    border-radius: 0 0 0 10px;
}

#document-topics .btn.dbq-select-view-button,
#document-topics .btn.dbq-select-add-button {
    /*border-radius: 0 0 10px 0; <-- don't do this, it's bad for: Relatiebeheer -> click TR -> modify icon in table -> view icon in modal*/
    margin: 0;
    padding: 8px;
}
/* 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 {
    background: #e6e9ed;
    border: 0;
    padding: 10px;
}
/*#document-topics .btn.dbq-select-view-button:focus {
    box-shadow: none;
    background: #FFFFFF !important;*/ /* probably this !important can be removed after al restructuring */
    /*border: 2px solid #e6e9ed !important;
    border-left: 0 !important;
} ^^^------------------------------------------ this causes the disabled view button to be white on click.. */
    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 {
        background: #e6e9ed !important;
        border: 0 !important;
        box-shadow: none;
    }

.btn-outline-primary.focus, 
.btn-outline-primary:focus {
    box-shadow: none;
}

#content-wrapper #content {
    background: 0;
    padding: 0 !important;
    /* float: left;
    width: 100%;
    height: 100%; <-- not possible for: attero */
    /*height: calc(100% - 50px) !important; <-- not possible for: modules -> gebruikers & beveiliging */
}
    #content-wrapper #content span.button {
        margin: 0 0 10px 0 !important;
    }

/* ****************************** 
    Input group addon
****************************** */
.input-group-addon {
    border-radius: 0 0 0 10px;
}
.form-group .searchbox-container .input-group-addon svg {
    height: 46px;
    padding: 13px 10px;
}
.form-group .searchbox-container .input-group-addon {
    border-radius: 0 0 0 10px;
}
.input-group-addon.disabled,
form[data-view-mode="View"] .input-group-addon {
    border-radius: 0 0 0 10px;
}
.form-group .searchbox-container .input-group-btn {
    border-radius: 0 10px 10px 0;
}
.input-group-addon {
    border-radius: 0 0 0 10px;
}
.form-group .searchbox-container .input-group-addon {
    border-radius: 0 0 0 10px;
}
.form-group .searchbox-container .input-group-btn {
    border-radius: 0 10px 10px 0;
}
.modal #document-topics .dbq-input-no-label .input-group.date .input-group-addon {
    border-radius: 10px 0 0 10px;
}

/* ****************************** 
    Content table
****************************** */
.content-table input.search {
    border-radius: 10px;
}

/* ****************************** 
    Notifications   
****************************** */
    #dbq-notification-center #dbq-notification-center-thread-items-container {
        height: calc(100% - 50px);
    }
    #dbq-notification-center .dbqnc-navbar {
        height: 51px !important;
    }
    #dbq-notification-center .dbqnc-navbar .dbqnc-navbar-item {
        float: left;
        cursor: pointer;
        width: auto !important;
        font-size: 15px;
        font-weight: 600;
        text-align: center;
        line-height: 64px;
        font-size: 12px !important;
        line-height: 12px !important;
        padding: 10px 15px;
        margin: 9px 0;
    }
        #dbq-notification-center .dbqnc-navbar .dbqnc-navbar-item:first-of-type {
            margin: 9px 0 9px 10px;
        }
    #dbq-notification-center .dbqnc-item-list .dbqnc-item .dbqnc-item-image {
        margin: 15px;
    }
    #dbq-notification-center .dbqnc-item-list .dbqnc-item .dbqnc-item-message {
        width: calc(100% - 102px);
        padding: 15px 15px 15px 0;
    }
        #dbq-notification-center .dbqnc-item-list .dbqnc-item .dbqnc-item-message .dbqnc-message-expander {
            text-decoration: none;
            font-weight: 500;
        }

#dbq-notification-center .dbqnc-item-list .dbqnc-item,
#dbq-notification-center .dbqnc-item-list .dbqnc-items-empty,
#dbq-notification-center .dbqnc-navbar .dbqnc-navbar-item {
    border-radius: 10px;
}

/* ****************************** 
    Popup notification
****************************** */
.dbq-popup-notification-container {
    z-index: 9999;
    position: fixed;
    top: 20px;
    right: 80px;
    width: 350px;
    height: auto;
    padding: 30px;
}
    .dbq-popup-notification-container::after {
        content: " ";
        width: 10px;
        height: 10px;
        position: absolute;
        top: 10px;
        right: -5px;
    }
    .dbq-popup-notification-container h3 {
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
    }
    .dbq-popup-notification-container p {
        font-size: 12px;
        line-height: 20px;
        font-weight: 400;
    }
    .dbq-popup-notification-container button {
        float: left;
        width: auto;
        clear: both;
        padding: 7px 15px;
        font-size: 12px;
        line-height: 20px;
        font-weight: 600;
        text-align: left;
    }
    .dbq-popup-notification-container button.btn-primary {
        margin-top: 5px;
    }
        .dbq-popup-notification-container button.btn-link {
            width: auto;
            padding: 0;
            margin-top: 10px;
            text-align: left;
            font-size: 12px;
            line-height: 20px;
            font-weight: 600;
        }
.dbq-popup-notification-container {
    border-radius: 10px;
}
    .dbq-popup-notification-container::after {
        border-radius: 50%;
    }
    .dbq-popup-notification-container button {
        border-radius: 10px;
    }
    .dbq-popup-notification-container button.btn-link {
        border-radius: 10px;
    }

/* ****************************** 
    Form styling    
****************************** */
input[name="SelectTypeMinimumSelectCount"], input[name="SelectTypeName"] {
    width: 100%; /*calc(100% - 5px) <-- inputs in modals cant have this.. (CMS -> development -> property types)*/
}

/* ****************************** 
    CodeMirror   
****************************** */
    div[name="RuleSourceCode"] .CodeMirror {
        width: 100%;
        height: 100%;
        float: left;
    }
    div[name="RuleSourceCode"] .cm-keyword {
        font-weight: 400;
    }
    div[name="RuleSourceCode"] .cm-builtin {
        font-weight: 400;
    }

#document-topics .CodeMirror-lines {
    padding: 0 !important;
}
#document-topics .CodeMirror-linenumber {
    width: 24px;
}
#document-topics .CodeMirror pre.CodeMirror-line, #document-topics .CodeMirror pre.CodeMirror-line-like {
    width: calc(100% - 24px);
    margin-left: 29px !important;
}
div[name="RuleSourceCode"] .CodeMirror {
    border-radius: 10px;
}

/* ****************************** 
    Bulk changes 
****************************** */
.document-class-list-tree tr[aria-selected="true"] td.ui-state-active {
    font-weight: 500;
}
    .document-class-list-tree tr[aria-selected="true"] td.ui-state-active.ui-state-hover {
        font-weight: 500;
    }

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

/* ****************************** 
    Tijsens 
****************************** */
.classlist-dashboard div[data-topic-name="Dashboard"] {
    padding: 0;
    margin: 0;
}
.classlist-dashboard div[data-element-type="Graph"] {
    padding: 0;
    float: left;
    width: 100%;
}
.classlist-dashboard div[data-element-type="Graph"] {
    /*height: 100%; <--THIS IS NEEDED, BUT -> TSN -> onderhoud -> right column.. 2 charts in 1 column + 2 extra headers so it's: 200% + 2 headers.. */
}
.classlist-dashboard div[type="graph"] {
    height: 100%;
    border-radius: 10px;
}
    .classlist-dashboard div[type="graph"].dbq-graph-full-screen {
        border-radius: 0;
    }
.classlist-dashboard #document-topics .topic[data-topic-name="Form"] div[data-element-type="Text"] {
    padding: 0;
}
.classlist-dashboard div[data-element-type="Text"] { /* .dbq-application-tsn div[data-element-type="Text"] */
    padding: 0; /*10px*/
}
.classlist-dashboard div[data-element-type="Header"] { /* .dbq-application-tsn div[data-element-type="Header"], <-- before, AND -> Tokcel needs this to..*/
    padding: 0; /* 10px 10px 0 10px <-- TIJSENS + TOKCEL --> DEZE PADDING ALLEEN IN HUN SITUATIE */
    /*padding: 10px 10px 0 10px;*/
    line-height: 20px; /*34px <-- not nice with background & margins*/
    font-weight: 500;
    font-size: 18px;
}
.classlist-dashboard #document-topics .topic div[data-element-type="Header"] {
    border-top: 0;
}
.classlist-dashboard .ui-chart-legend-items-list {
    margin: 0;
}
.classlist-dashboard .topic .btn-default {
    padding: 5px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}
.classlist-dashboard .topic .dbq-graph-scale .btn-default, .dbq-application-tsn .dbq-graph-scale .btn-default {
    padding: 5px 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}

.graph-container table {
    width: calc(100% - 10px) !important;
}

#classlist-search-list #classlist-filters .document-class-list-filter {
    width: 100% !important;
}

.dbq-checkbox-label-filters {
    max-width: 200px;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#document-class-list-filters .document-class-list-filter {
    max-width: 200px !important;
}
#classlist-filters .document-class-list-filter select {
    max-width: 200px !important;
}

div[data-document-name="Introductie"] {
    margin: 10px;
    width: calc(100% - 20px) !important;
}
    div[data-document-name="Introductie"] #document-topics .topic h1, div[data-document-name="Introductie"] #document-topics .topic p, div[data-document-name="Introductie"] #document-topics .topic h4 {
        padding: 10px !important;
    }

#content-wrapper input[type=checkbox], #content-wrapper input[type=radio] {
    margin: 0;
}
#content-wrapper .checkbox label, #content-wrapper .radio label {
    min-height: 12px;
    font-size: 12px;
    line-height: 20px;
}

/* ****************************** 
    DbqScrollbar    
****************************** */
.dbq-scrollbar {
}
    .dbq-scrollbar::-webkit-scrollbar {
        width: 8px !important;
        height: 8px !important;
    }

/* ****************************** 
    Scroll
****************************** */
/*
    (body background)
*/
.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,
.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,
.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,
.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,
.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 {
    border-radius: 10px;
}

/*
    (body background)
*/
.tab-pane::-webkit-scrollbar-track,
.tab-pane::-webkit-scrollbar,
.tab-pane::-webkit-scrollbar-corner,
.tab-pane::-webkit-scrollbar-thumb,
.tab-pane::-webkit-scrollbar-thumb:hover {
    border-radius: 10px;
}


/*
    (secondary background)
*/
#content-wrapper table::-webkit-scrollbar-track,
#content-wrapper table::-webkit-scrollbar,
#content-wrapper table::-webkit-scrollbar-corner,
#content-wrapper table::-webkit-scrollbar-thumb,
#content-wrapper table::-webkit-scrollbar-thumb:hover {
    border-radius: 10px;
}

/*
    (Disabled background)
*/
textarea:disabled::-webkit-scrollbar-track,
textarea:disabled::-webkit-scrollbar,
textarea:disabled::-webkit-scrollbar-corner,
textarea:disabled::-webkit-scrollbar-thumb,
textarea:disabled::-webkit-scrollbar-thumb:hover {
    border-radius: 10px;
}

/* ****************************************
    DbqLibraries scroll override
**************************************** */
.dbq-developer-tools ::-webkit-scrollbar-track, #content-wrapper .dbq-developer-tools ::-webkit-scrollbar-track {
    border-radius: 10px !important;
}
.dbq-developer-tools ::-webkit-scrollbar-corner, #content-wrapper .dbq-developer-tools ::-webkit-scrollbar-corner {
    border-radius: 10px !important;
}
.dbq-developer-tools ::-webkit-scrollbar-thumb, #content-wrapper .dbq-developer-tools ::-webkit-scrollbar-thumb {
    border-radius: 10px !important;
}
    
/* ****************************** 
    Date picker  
****************************** */
.bootstrap-datetimepicker-widget table thead tr:first-child th {
    padding: 10px 3px;
}

.bootstrap-datetimepicker-widget table th.picker-switch {
    width: 100% !important;
}

.bootstrap-datetimepicker-widget table th {
    height: 20px;
    line-height: 20px;
    width: 20px !important;
    padding: 10px 0;
    margin: 0;
}

.bootstrap-datetimepicker-widget table td.day {
    padding: 8px;
}
.bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second {
    width: 100px;
}


/* ****************************** 
    Date time picker    
****************************** */
.bootstrap-datetimepicker-widget {
    z-index: 999;
    position: absolute;
}
.bootstrap-datetimepicker-widget .datepicker {
    /*padding: 0 5px 0 0 !important; <-- for the datepicker in WSP this isnt working..*/
    padding: 0 !important; /*date-time picker needs this..*/
}
.bootstrap-datetimepicker-widget .timepicker-picker {
    height: 100%;
    width: 100%;
    float: left;
}
    .bootstrap-datetimepicker-widget .timepicker-picker table {
        height: 100%;
    }
        .bootstrap-datetimepicker-widget .timepicker-picker table tr {
            height: 100px;
        }

.bootstrap-datetimepicker-widget a[data-action] {
    padding: 10px !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    margin: 0 !important;
    padding: 4px !important;
    /*width: auto !important; <-- this isnt working for datetimepicker..*/
}

    .bootstrap-datetimepicker-widget table td span {
        float: left;
        display: inline-block;
        width: calc(25% - 10px);
        height: 54px;
        line-height: 54px;
        margin: 5px;
        padding: 0;
        cursor: pointer;
    }

.bootstrap-datetimepicker-widget .datepicker-decades .decade {
    line-height: 30px !important;
    width: calc(50% - 10px);
    margin: 5px;
    padding: 0;
    height: 30px;
}

#content-wrapper #document-class-list-filters .bootstrap-datetimepicker-widget .list-unstyled {
    padding: 5px;
}
#content-wrapper #document-class-list-filters .bootstrap-datetimepicker-widget.dropdown-menu li {
    padding: 0 !important;
}

.bootstrap-datetimepicker-widget table td span {
    border-radius: 4px;
}

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

/* ****************************** 
    Base (scroll fix)   
****************************** */
body {
    position: fixed;
}

.left_col {
    width: 280px;
    margin: 0;
    padding: 0;
}

/* #navigator is the div with a scroll! */
#navigator {
    display: inline-block;
    width: 280px;
    max-width: 280px;
    height: 100%;
    overflow: auto;
    flex: none;
    margin: 0;
    padding: 0;
}
.dbq-application-rumm #navigator {
    /*height: calc(100% - 70px); <-- not possible for portals */
    height: 100%;
}
    #navigator .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin: 0 !important;
        width: 100%;
        display: inline-block; /*display: block;*/
        flex-wrap: nowrap;
    }
.dbq-application-rumm #navigator .row {
    width: auto;
}
#navigator h3 {
    float: left; /* important for portals..*/
    /*display: inline-block; ..?*/
    white-space: nowrap;
    height: 50px;
    /*padding: 15px 10px 15px 35px !important;*/
    padding: 0 0 0 5px;
}
.dbq-application-rumm #navigator h3 {
    height: 50px;
}
#navigator h3.active {
    width: 100%;
}
    #navigator .dbq-minimize-main-menu {
        padding: 15px 30px !important;
    }

.dbq-application-rumm #document-topics .topic div[data-element-type="Header"] h2 {
    padding: 10px !important;
}
#classlist-tiled-list .document-class-list-tile img.project-building-image {
    margin-bottom: 30px;
}

/* Navigator button */
#navigator .navigation-button {
    width: 100%;
    margin: 0;
    padding: 0 0 0 35px !important; /*15px 0 15px 35px*/
    display: inline-block;
    white-space: nowrap;
}
    #navigator .navigation-button i {
        margin: 0 !important;
        padding: 3px 10px;
    }
    #navigator .navigation-button .navigation-button-title {
        width: calc(100% - 65px);
        font-size: 12px;
        line-height: 20px;
        font-weight: 500;
        padding: 0;
        float: left;
        text-align: left;
        /*margin-left: 5px;*/ /* portal tsn needs 5.. it was 15px*/
        margin: 15px 0 15px 5px;
    }
#navigator .navigation-button {
    border: 0 !important;
}
#content-wrapper #navigator .navigation-button {
    border-radius: 0 !important;
}
#navigator .navigation-button svg {
    float: left;
    padding: 0;
}
        
        .glyphicon-home:before {
            float: left;
            font-size: 12px;
            line-height: 12px;
        }

.right_col {
    overflow: hidden;
    display: inline-block;
    width: calc(100% - 280px);
    height: 100% !important;
}

#content {
    float: left;
    height: 100%;
    width: calc(100% - 280px);
    max-width: 100%;
    flex: none;
    overflow: auto;
}

    #content .tab-content, #content .tab-content .tab-pane {
        height: 100%;
    }

#classlist h4.dbq-no-data-text {
    margin: 10px;
    padding: 10px;
    background: #fff;
    color: #3a3b40;
    border-radius: 5px;
}

#dbq-content-container #content {
    float: left;
    height: 100%;
    width: 100%;
    max-width: 100%;
    flex: none;
    overflow: auto;
}

@media screen and (max-width: 1200px) {
    .left_col {
        width: 200px;
    }

    #navigator {
        width: 200px;
        max-width: 200px;
    }

    .right_col {
        width: calc(100% - 200px);
    }

    #content {
        width: calc(100% - 200px);
    }
}
/* ^^^ COMMENT BART: Hiermee wordt alleen het bootstrap mobile menu niet getriggered.. maarja dat wordt in productie ook niet gedaan zo ver ik kan zien? */
#classListControlContainer {
    overflow: hidden;
}

    #classListControlContainer .tab-pane {
        overflow: auto;
    }

/*#FolderTree, #SystemFolderTree, #PersonalTree {
    float: left;
    width: 100%;
}*/
/* ****************************** 
    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 {
    display: inline-block;
    width: 100%;
    transition: none;
    /*padding: 15px 20px !important;*/
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600;
}
    .foldertree-header span.foldertree-header-text {
        font-size: 12px;
        line-height: 20px;
        font-weight: 600;
        padding: 0 0 0 15px !important;
    }
            .foldertree-header.active {
                padding-bottom: 40px;
            }
                
    .foldertree-header span.dbq-link-text-main-menu {
        padding: 0 0 0 15px;
        display: inline-block;
    }
    .foldertree-header .foldertree-header-name {
        margin: 0;
        padding: 0;
        display: inline-block;
        /*width: calc(100% - 40px);
        padding: 0 0 0 15px;*/
        width: calc(100% - 60px);
        padding: 0 0 0 10px;
        font-size: 12px;
        line-height: 20px;
        font-weight: 500;
    }
#side_navigation > .foldertree-header:after,
#side_navigation > .foldertree-header.active:after {
    content: "" !important;
    clear: both !important;
    display: table !important;
}

/* foldertree-container */
.foldertree-container {
    /*width: 100%; <-- container can't have width, dont know why.. */
    /*height: 100%; <-- can't have height */
    display: inline-block;
    white-space: nowrap;
    /*float: left; <-- Not possible, but without a float there is a undeclareable padding/margin.. between the headers */
    float: left;
    padding: 0;
    margin: 0;
    min-width: 100%;
}
    .foldertree-container.dbq-active {
        padding: 0; /*10px 0*/
    }
/* ##### ul.gj-list gj-list-bootstrap list-group ##### */
.list-group {
    display: inline-block;
}
ul.gj-list-bootstrap {
    /*padding: 10px 0; <-- not possible, causing unwanted padding when hidden */
    padding: 0;
}
/*.foldertree-container:not([style*='display']):first-of-type, 
.foldertree-container:not([style*='none']):first-of-type { 
    padding: 10px 0 0 0;
}*/
/*, :not([style*='none']):first-of-type*/ /* > .gj-list-bootstrap:first-of-type*/
/*.foldertree-container:not([style*=display]):not([style*=none]),
.foldertree-container[style*=display]:not([style*=none]),
.foldertree-container[style*=none]:not([style*=display]),
.foldertree-container[style*=border][style*=none] {
    padding: 10px 0 0 0;
}*/
/*.foldertree-container:not([style*="display:none"]):first-of-type {
    padding: 10px 0 0 0;
}*/
/*:first-of-type or :nth-of-type(1) <-- not working with first-of-type BECAUSE:::?? it's not using [data-has-items="true"] ??? */
/*.foldertree-container[data-has-items="true"]:nth-of-type(1) {
    padding: 10px 0 0 0 !important;
}*/
.foldertree-container {
    /*padding: 10px 0 0 0; <-- i don't think this is the way.. */
}

ul.gj-list-bootstrap:empty {
    display: none;
}
    ul.gj-list-bootstrap li, .gj-tree-bootstrap-3 ul.gj-list-bootstrap li {
        padding: 0;
        margin: 0 10px !important;
        line-height: 20px;
        font-size: 14px;
        font-weight: 600;
        /* this is important! the text in menu item will not be under each other */
        width: calc(100% - 20px);
        white-space: nowrap;
        display: inline-block;
    }
        ul.gj-list-bootstrap li:hover {
            cursor: pointer;
        }
        
/* ##### li.list-group-item ##### */
#side_navigation ul {
    float: left;
    min-width: 100%;
}
ul.gj-list-bootstrap li.list-group-item {
    float: left;
    padding: 0 !important;
}
    ul.gj-list-bootstrap li.list-group-item:first-child {
        padding: 0 !important;
        /*margin-top: 10px !important; <-- should be 0 because otherwise you get to much margin when there are 2 ul's (amsterdam-dev) */
        margin-top: 0 !important;
    }

.dbq-element-header-5,
#document-topics .dbq-form-group-title-label label,
.modal #document-topics .row.dbq-form-group-title[data-element-type="Text"] p {
    margin: 0;
}

/*
    DIT ZOU MOETEN WERKEN !!!!!!!!!!!!!
    
    li[data-status="1"]:nth-child(odd) {
    background: #f00;
}*/

/*
    #navigator .foldertree-container:not([style*="display: none"]):first-of-type li:first-of-type 
    not selector not supported for ie11 and not working properly, it should be done with javascript they say on stack overflow
*/

/*
    THIS IS NOT WORKING!! because: the first of type can be invisible..

#navigator .foldertree-container:first-of-type {
    padding-top: 10px !important;
}
#navigator .foldertree-container:last-of-type {
    padding-top: 10px !important;
}*/

/*#navigator .foldertree-container[data-has-items="false"] {
    display: none; <--- DON'T HIDE THIS... the first 1 should always be visible with a margin, i don't see any other way anymore..
}*/
#navigator .foldertree-container:first-of-type {
    padding-top: 10px !important;
}
#navigator .foldertree-container[data-has-items="true"]:last-of-type {
    padding-bottom: 10px !important;
}
#navigator .foldertree-container:first-of-type:last-of-type {
    padding-bottom: 10px !important;
}

/*#navigator .foldertree-container[data-has-items="true"] {
    
    margin-top: 10px !important;
}
    #navigator .foldertree-container[data-has-items="true"]:nth-child(2n+0) {
        margin-top: 0 !important;
    }*/
/*#navigator .foldertree-container[data-has-items="true"]:first-of-type {
    margin-top: 10px !important;
}*/
/*:nth-child(even) <-- this does work, but first-of-type or first-child not.. WHY??? */
/*#navigator .foldertree-container[data-has-items="false"]:first-child,
#navigator .foldertree-container[data-has-items="true"]:first-child { 
    margin-top: 10px !important;
}*/
/*#navigator .foldertree-container[data-has-items="true"]:first-of-type {
    margin-top: 10px !important;
    padding-top: 10px !important;
}*/
/*#navigator li:first-child*/
/*#navigator .foldertree-container:first-of-type li:first-of-type,*/
/*#navigator .foldertree-container[data-has-items="true"]:first-of-type > ul > li:first-of-type {
    margin-top: 10px !important;
}*/
/*#navigator .foldertree-container[data-has-items="true"]:first-of-type > ul > li:first-of-type,
#navigator .foldertree-container[data-has-items="true"]:first-child > ul > li:first-of-type,
#navigator .foldertree-container[data-has-items="true"]:first-of-type ul li:first-of-type,*/
/*#navigator .foldertree-container[data-has-items="true"] ul li:first-of-type {
    margin-top: 10px !important;
}*/
/*#navigator li:last-child*/
/*#navigator .foldertree-container:last-of-type li:last-of-type*/
/*#navigator .foldertree-container[data-has-items="true"]:last-of-type > ul > li:last-of-type*/
/*#navigator .foldertree-container[data-has-items="true"] ul li:last-of-type*/
/*#navigator .foldertree-container[data-has-items="true"]:last-of-type > ul > li:last-of-type {
    margin-bottom: 10px !important;
}*/
ul.gj-list-bootstrap {
    /*margin-bottom: 10px !important; <-- should be 0 because otherwise you get to much margin when there are 2 ul's (amsterdam-dev) */
    margin-bottom: 0 !important;
}

ul.gj-list-bootstrap li.active > div[data-role="wrapper"] span[data-role="display"] {
    font-weight: 600;
}

.list-group {
    display: block;
    flex: none;
}

/* ##### div[data-role="wrapper"] ##### */
ul.gj-list-bootstrap li [data-role="wrapper"] {
    float: left;
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    padding: 10px !important;
}

/* ##### spacer/expander/icon/display/options ##### */
ul.gj-list-bootstrap li.list-group-item div[data-role="wrapper"] span[data-role="spacer"],
ul.gj-list-bootstrap li.list-group-item div[data-role="wrapper"] span[data-role="expander"],
ul.gj-list-bootstrap li.list-group-item div[data-role="wrapper"] span[data-role="icon"],
ul.gj-list-bootstrap li.list-group-item div[data-role="wrapper"] span[data-role="display"],
ul.gj-list-bootstrap li.list-group-item div[data-role="wrapper"] span[data-role="options"] {
    /*float: left;*/ /* needed for portals.. BUT not good for CMS -> mainMenu -> development ul*/
    display: inline-block;
    white-space: nowrap;
}
[data-type="tree"] ul li [data-role="icon"] {
    width: 20px !important;
    height: 20px !important;
    display: inline-block;
    padding: 0 !important; /*0 5px !important <-- this will cause a uneven space between icon and arrow */
    /*float: left;*/ /* needed for portals.. BUT not good for CMS -> mainMenu -> development ul*/
}
ul.gj-list-bootstrap li [data-role="display"] {
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    padding: 0 0 0 10px !important;
    text-transform: capitalize;
}
ul.gj-list li [data-role="options"] {
    display: inline-block;
}
    
ul.gj-list li [data-role="spacer"] {
    display: inline-block;
}
.gj-tree-bootstrap-3 ul li [data-role="expander"].gj-tree-glyphicons-expander {
    width: 10px;
    display: inline-block;
    margin: 0 5px 0 0;
}
.gj-tree-bootstrap-3 ul li [data-role="expander"].gj-tree-glyphicons-expander {
    width: 10px !important; /* Stylesheet.css contains a width, but this should override */
}
ul.gj-list li [data-role="options"] {
    width: 20px;
}

/* expanded state */
ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style {
    width: 100% !important;
    /*padding: 15px 0 10px 20px !important;*/
    padding: 0 0 0 10px !important;
    margin: 0 !important;
}
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style > ul.gj-list-bootstrap li {
        margin: 0 !important;
        white-space: nowrap;
        display: inline-block;
        /* ------------- min-width: 300px; <-- this is most of the time to big, and you want this to be flexible, But isn't possible..*/
        width: calc(100% - 10px);
        float: left;
    }
    ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style ul.gj-list-bootstrap {
        padding: 0 !important; /*10px 0 0 0*/
    }
        ul.gj-list-bootstrap li.list-group-item.dbq-expand-active-style ul.gj-list-bootstrap li {
            padding: 0 !important; /*10px 0*/
            /*------------- padding: 5px 0 !important; <-- This isn't working for Unilever portal */
        }

/* Add/remove dashboard */
#content-wrapper button.btn-default.dropdown-toggle:enabled, .modal-content button.btn-default.dropdown-toggle:enabled {
    padding: 13px 10px !important;
}
.dashboard-list-remove-button-container button.btn-default:enabled, #dashboard-list-add-button:enabled {
    padding: 8px 10px !important;
}

/*
    Dropdown in tables
*/
#content-wrapper .dropdown-menu {
    padding: 10px;
}
    #content-wrapper .dropdown-menu li {
        white-space: nowrap;
        /*padding: 7px 13px;*/
        margin: 0 0 3px 0;
    }
        #content-wrapper .dropdown-menu li:last-of-type {
            margin: 0;
        }

/*
    dropdown menu in tables (GLT) <-- if it is not good for GLT now, then it should be in default styling. Because more dropdowns will get affected.
*/
#content-wrapper .dropdown-menu li a {
    float: left;
    width: 100%;
    line-height: 20px;
    padding: 0 5px; /*padding: 0 5px; <-- this padding sometimes is good and sometimes not.. don't know where the good one was.. but it was both a dropdown coming from clicking on a table icon */
    border-radius: 5px;
}
#content-wrapper .button-table-cell .dropdown-menu li a {
    padding: 5px 10px; /* this one is good for projectmanagement -> tab: modellen -> 2nd table -> execute on object icon */
}
/* ****************************** 
    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 {
    border-radius: 10px;
}
    #class-list-menu .dropdown-menu li.username {
        border-radius: 10px 10px 0 0;
    }
    #class-list-menu .dropdown-menu li.dropdown-header {
        border-radius: 0 0 10px 10px;
    }
#class-list-menu .dropdown-header {
    border-radius: 0 0 3px 3px;
}

/* Add/remove dashboard */
.modal-content .dbq-select-type-dropdown-tree button.btn-default.dropdown-toggle:enabled {
    border-radius: 0 0 10px 10px !important;
}

/*
    Dropdown in tables
*/
#content-wrapper .dropdown-menu {
    border-radius: 10px;
}
    #content-wrapper .dropdown-menu li {
        border-radius: 10px;
    }

/* ****************************** 
    RUMM - place icon
****************************** */
.icon-marker-before:before {
    right: 0 !important;
    margin-right: 5px !important;
}

/* ****************************** 
    Apex Charts
****************************** */
/*.dbq-element-graph-container {
    padding: 10px;
}*/
.dbq-element-graph-container,
.graph-container,
.graph-chart-container,
.apexcharts-canvas {
    height: 100%;
}
    .dbq-element-graph-container a.dbq-export-button {
        margin: 10px !important;
        padding: 3px 5px !important;
    }

svg.apexcharts-svg {
    width: 100%;
    /*float: left;
    width: 100%; <-- this float and width were causing every div to freak out when closing the notifications container */
    height: calc(100% - 30px) !important;
    /*padding: 10px !important; <-- this needs to be inline styling (documentElementGraph.js) for the .PNG export*/
}
svg.apexcharts-svg foreignObject {
    /*float: left;
    height: 100%;*/
    float: left;
    height: auto;
    min-height: 10px;
    overflow: initial;
}
svg.apexcharts-svg .apexcharts-inner {
    float: left;
}

.apexcharts-yaxis {
    padding-left: 30px;
}

.apexcharts-svg .apexcharts-inner {
    position: relative !important;
    z-index: 1 !important;
}
.apexcharts-svg foreignObject { /*.apexcharts-legend {*/
    position: absolute !important;
    z-index: 999 !important; /*9999*/
    top: 0 !important;
    left: 0 !important;
}
    .apexcharts-svg foreignObject .apexcharts-legend {
        top: 0 !important;
        left: 0 !important;
        max-height: auto !important;
    }

.dbq-graph-scale button {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    padding: 5px 10px;
}

/* 
    tooltip (crosshair)
*/
.apexcharts-tooltip {
}
    .apexcharts-tooltip .apexcharts-tooltip-title {
        font-weight: 600 !important;
        font-size: 14px !important;
        line-height: 14px !important;
        padding: 10px !important;
        /*margin-bottom: 10px !important; <-- not possible, tooltip group (pie charts) need padding top so this is to much */
        margin-bottom: 0 !important;
    }

.apexcharts-legend {
    min-width: 50px;
    max-width: 200px;
    height: auto !important;
    padding: 4px !important;
    inset: initial !important;
    top: 0 !important;
    left: 0 !important;
}
.apexcharts-legend-series {
    width: 100%;
    margin: 0 !important;
}
.apexcharts-legend.apexcharts-align-right .apexcharts-legend-series, .apexcharts-legend.apexcharts-align-left .apexcharts-legend-series {
    display: flex !important;
}
.apexcharts-legend-marker {
    top: 0 !important;
    min-width: 20px !important;
}
.apexcharts-legend-marker {
}
.apexcharts-legend-text {
    font-weight: 500 !important;
    font-family: 'Poppins', sans-serif !important;
}

.apexcharts-menu {
    padding: 6px !important;
    margin-top: -150px;
}
    .apexcharts-menu .apexcharts-menu-item {
        padding: 5px 10px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 20px !important;
    }

.apexcharts-canvas ::-webkit-scrollbar-thumb {
    border-radius: 10px !important;
}

.apexcharts-legend-series:first-of-type {
    border-radius: 10px 0 0 3px;
}
.apexcharts-legend-series:last-of-type {
    border-radius: 0 3px 3px 0;
}

.apexcharts-menu {
    border-radius: 10px !important;
}
    .apexcharts-menu .apexcharts-menu-item {
        border-radius: 10px !important;
    }

/* ****************************** 
    No data available overlay
****************************** */
.dbq-graph-single, .dbq-graph-multiple {
    display: flex;
}
.dbq-no-data-available-container {
    float: left;
    padding: 10px;
    min-height: 300px;
    border-radius: 10px;
}
    .dbq-no-data-available-container .dbq-no-data-available-center {
        float: left;
        width: 100%;
        height: 140px;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin-top: 25px;
    }
    .dbq-no-data-available-container .dbq-no-data-available-image {
        float: left;
        width: 100%;
        text-align: center;
    }
    .dbq-no-data-available-container .dbq-no-data-available-text {
        float: left;
        width: 100%;
        min-height: 40px;
        padding: 10px 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        text-align: center;
    }

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

#document-topics .topic .dbq-graph-header h3,
.dbq-no-data-chart-title {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    padding: 10px;
}
#document-topics .topic .dbq-graph-header h3 {
    padding-top: 20px;
}
#document-topics .topic .dbq-colon-first,
#document-topics .topic .dbq-colon-second {
    padding: 5px 10px; /* tijdregistratiebeheer -> week/maand-overzicht*/
    margin: 3px;
}

.dbq-no-image-found-text {
    border-radius: 0 0 10px 10px;
    padding: 13px 10px;
}

/* ****************************** 
    Loading spinner on button (CMS/Portal)
****************************** */
.spinner-border-sm {
    float: left;
    width: 14px !important;
    height: 14px !important;
    margin: 3px 5px 3px 0 !important;
    border-width: 2px !important;
}

/* ****************************** 
    Checkbox list (folder types)
****************************** */
#document-topics .row[data-element-type="InputProperty"].dbq-checkbox-list {
    margin: 3px !important;
}

/* ****************************** 
    Maintenance / Under construction
****************************** */
.dbq-maintenance-container {
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 9999;
    background-size: cover;
}
.dbq-maintenance-container-center {
    width: 650px;
    position: absolute;
    top: 50%;
    left: 50px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0;
    background: #ffffff;
    border-radius: 10px;
}
.dbq-maintenance-container-logo {
    float: left;
    width: 100%;
    padding: 40px 50px;
    border-bottom: 1px solid #ececec;
}
.dbq-maintenance-container-text {
    float: left;
    width: 100%;
    padding: 50px;
    border-bottom: 1px solid #ececec;
}
.dbq-maintenance-container-buttons {
    float: left;
    width: 100%;
    padding: 40px 50px;
}
.dbq-maintenance-container-center button {
    margin: 0;
    border: 0;
    border-radius: 10px;
}
        .dbq-maintenance-container-center button:first-of-type {
            margin: 0 5px 0 0;
        }
        .dbq-maintenance-container-center button.dbq-maintenance-tel {
            padding: 15px 30px;
            background: #0a0a0a;
        }
            .dbq-maintenance-container-center button.dbq-maintenance-tel span {
                color: #FFFFFF !important;
            }
        .dbq-maintenance-container-center button.dbq-maintenance-mail {
            padding: 13px 30px;
            background: 0;
            border: 2px solid #0a0a0a;
        }
            .dbq-maintenance-container-center button.dbq-maintenance-mail span {
                color: #0a0a0a !important;
            }
        .dbq-maintenance-container-center button span {
            width: calc(100% - 40px);
            float: left;
            line-height: 30px;
            font-size: 16px;
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            font-weight: 600 !important;
        }
.dbq-maintenance-container-center h3 {
    color: #0a0a0a;
    font-size: 18px;
    font-weight: 600;
    line-height: 34px;
    margin: 0 0 5px 0;
    padding: 0;
}
.dbq-maintenance-container-center p {
    color: #8c9cb1;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
    padding: 0;
}


.dbq-wrapper,
#content-wrapper .row.dbq-wrapper {
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px !important;
}

/*
    Button footer all modals
*/
.modal .modal-content .modal-footer .btn {
    cursor: pointer;
    font-size: 12px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    padding: 3px 10px;
    border-width: 2px;
    border-style: solid;
}

/* Bootstrap override (otherwise a select will be 1px longer) */
.input-group-append {
    margin-left: 0;
}

/*
    Modals/dialogs/forms
*/
.modal-content {
    border-radius: 10px !important;
}
#document-topics .topic {
    border-radius: 0 0 10px 10px !important;
}

/* **************************************************
    Custom Dropdown on right click
************************************************** */
.dbq-dropdown-on-right-click-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    padding: 50px;
    margin: 0;
    background: #0b0e13;
    color: #FFF;
}
    .dbq-dropdown-on-right-click-container a {
        font-size: 18px;
        font-weight: 500;
        line-height: 20px;
        color: #FFFFFF;
        float: left;
    }
        .dbq-dropdown-on-right-click-container a:hover {
            color: #0075DB;
        }
    .dbq-dropdown-on-right-click-container .dbq-dropdown-close {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0;
        margin: 0;
        width: 100px;
        height: 100px;
        background: #0b0e13;
    }

/* **************************************************
    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
************************************************** */
#document-topics .topic h1 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
}
#document-topics .topic h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    text-transform: unset;
    padding: 0;
    margin: 0 !important;
}
.modal #document-topics h2 {
    margin: 20px 0 10px 0 !important;
}
#document-topics .topic h3 {
    font-size: 18px;
    line-height: 30px;
    font-weight: 600;
    text-transform: unset;
    /* this styles are needed for -> VOVU -> uren -> bekijk snippet overzicht */
    padding: 0;
    margin: 0;
}
    #document-topics .topic div[data-element-type="Graph"] h3 {
        float: left;
        width: 100%;
        font-size: 14px;
        line-height: 22px;
        font-weight: 500;
        padding: 0;
        text-align: center;
    }
    .dbq-application-vovu #document-topics .topic h3 { /* VOVU snipperoverzicht*/
        color: #1285d8 !important;
    }
    .dbq-application-vovu #document-topics .topic div[data-element-type="Header"] span { /* VOVU snipperoverzicht*/
        font-size: 12px;
        line-height: 20px;
        font-weight: 500;
        margin: 5px 0;
        /*color: #cccccc !important;*/
    }
#document-topics .topic h4 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-transform: unset;
    padding: 0;
    margin: 0;
}
#document-topics .topic h5 {
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    text-transform: unset;
    padding: 0;
    margin: 0;
}
#document-topics .topic p {
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    padding: 0;
    margin: 0;
}
#document-topics .topic .action-button span {
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 3px;
}

#document-topics .topic section {
    padding: 0;
}
.modal #document-topics .topic section {
    /*padding: 20px 30px;*/
    padding: 30px 30px 20px 30px;
}
.modal form[data-has-translatable-input-properties='true'] #document-topics .topic section {
    padding: 0px 30px 20px 30px;
}

/* ****************************** 
    Tijsens
****************************** */
.classlist-dashboard div[data-element-type="Graph"] {
    border-radius: 10px;
}
.dbq-application-tsn .classlist-dashboard div[data-element-type="Text"],
.dbq-application-tkc .classlist-dashboard div[data-element-type="Text"] {
    border-radius: 10px;
}
.dbq-application-tsn .classlist-dashboard div[data-element-type="Header"],
.dbq-application-tkc .classlist-dashboard div[data-element-type="Header"] {
    border-radius: 10px;
}
#classlist-dashboard-header div[data-element-type="Graph"] {
    border-radius: 10px;
}

/*
    Owl icon / help button -> kennisbank
*/
.document-class-list-tabs-container .help-button {
    display: none;
}

.form-group:empty {
    display: none;
}
#document-editor-container .form-group {
    margin-bottom: 1rem;
}

/*
    Tooltips on labels
*/
.tooltip.show {
    opacity: 1;
}
.tooltip-inner {
    max-width: 300px;
    padding: 10px 15px;
    border-radius: 10px;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    opacity: 1;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    opacity: 1;
}

#content-wrapper .toggle.btn {
    height: 26px !important;
    min-height: 26px !important;
    float: left;
    font-size: 12px;
    font-weight: 600;
    margin-right: 10px;
}
#content-wrapper .toggle-on.btn {
    font-size: 12px;
    font-weight: 600;
    padding: 7px 15px 8px 7px !important;
}
#content-wrapper .toggle-off.btn {
    font-size: 12px;
    font-weight: 600;
    padding: 7px 5px 8px 10px !important;
}
#content-wrapper .classlist-toolbar-item {
    width: 30px;
    padding: 3px;
}
#classlist .classlist-toolbar-item {
    line-height: 30px !important;
    font-weight: 400;
}
#content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh div.btn-primary,
#content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh div.btn-default {
    top: 3px;
}

/* 
    Infinite refresh
    (different types of infinite refresh)
    
    To test these 2 versions locally:
    - "keep refreshing" -> USC (unilever) local -> logging -> click TR (TableRow)
    - "keep refreshing" -> portal DBQW (dev) -> vacature reacties -> tab: alle vacature reacties -> click on TR (TableRow)
    - "bulk changes" -> cms TSN -> inspectiebeheer -> click tr (grote beek) -> tab: escalaties
    - "bulk changes" -> cms system -> data -> tab: threads
*/
#content-wrapper #classlist .classlist-toolbar-item.checkbox-inline {
    min-width: 160px;
    padding-right: 5px !important; /* this is for bulk changes toggle */
}
    #content-wrapper #classlist .classlist-toolbar-item.checkbox-inline .toggle-group {
    }
    #content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh {
        min-width: 180px; /*168px <-- depends on text in it.. 'keep refreshing' is longest value */
        padding: 3px !important;
        font-weight: 600;
    }
        #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;
        }
        #content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh div.btn-primary {
            height: 26px;
            min-height: 26px;
        }
        #content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh .toggle.btn,
        #content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh .toggle-on.btn {
            height: 26px;
            min-height: 26px;
            line-height: 26px !important;
            padding: 0 0 0 10px !important;
            font-size: 12px !important;
            line-height: 26px !important;
            font-weight: 600 !important;
        }
        #content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh .toggle-off.btn {
            height: 26px;
            min-height: 26px;
            line-height: 26px !important;
            padding: 0 10px 0 0 !important;
            font-size: 12px !important;
            line-height: 26px !important;
            font-weight: 600 !important;
        }

/*
    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 {
    padding: 0 !important;
    margin: 0 !important;
    height: 26px !important;
    line-height: 26px !important;
}
    #content-wrapper .toggle .btn.btn-default.toggle-handle, 
    #content-wrapper .toggle span.btn.btn-default.toggle-handle:enabled {
        width: 10px;
    }
/*
    This is the 2nd difference between "Keep refreshing" & "Bulk changes"
    - "Keep refreshing / infinite refresh" needs another padding
*/
#content-wrapper .toggle .btn.btn-primary,
#content-wrapper .toggle button.btn.btn-primary:enabled {
    padding-left: 10px !important;
    padding-right: 0 !important;
}
#content-wrapper .classlist-toolbar-item-infinite-refresh .toggle .btn.btn-primary,
#content-wrapper .classlist-toolbar-item-infinite-refresh .toggle button.btn.btn-primary:enabled {
    padding-left: 0 !important;
    padding-right: 5px !important;
}
#content-wrapper .toggle .btn.btn-default,
#content-wrapper .toggle button.btn.btn-default:enabled {
    padding-left: 0 !important;
    padding-right: 10px !important;
}
#content-wrapper .classlist-toolbar-item-infinite-refresh .toggle .btn.btn-default,
#content-wrapper .classlist-toolbar-item-infinite-refresh .toggle button.btn.btn-default:enabled {
    padding-left: 5px !important;
    padding-right: 0 !important;
}

/* toggle (bulk changes) */
#classlist #classlist-search-list-table .classlist-toolbar-item {
    border-radius: 10px !important;
}
#content-wrapper .toggle.btn {
    border-radius: 8px 0 0 8px !important;
}
#content-wrapper .toggle-group span.toggle-handle {
    border-radius: 0 !important;
}

/* 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-radius: 8px 0 0 8px !important;
}

/* 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-radius: 8px 0 0 8px !important;
}

#content-wrapper button.btn-default.dropdown-toggle:enabled, .modal-content button.btn-default.dropdown-toggle:enabled {
    border-radius: 10px !important;
}

.modal-content .dbq-select-type-dropdown-tree button.btn-default.dropdown-toggle:enabled {
    border-radius: 0 0 10px 10px !important;
}

/* Custom select (need to override button style) */
#document-topics .dbq-select-type-dropdown-tree button.btn-default.dropdown-toggle:disabled {
    border-radius: 0 0 10px 10px !important;
}

/* Custom select (need to override button style) */
#document-topics .dbq-select-type-dropdown-tree button.btn-default.dropdown-toggle:disabled {
    border-radius: 0 0 10px 10px !important;
}

/* ****************************** 
    Refresh infinite
****************************** */
#content-wrapper #classlist .classlist-toolbar-item.checkbox-inline {
    border-radius: 10px;
}
#content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh .toggle.btn,
#content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh .toggle-on.btn {
    border-radius: 8px 0 0 8px !important;
}
#content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh .toggle-off.btn {
    border-radius: 8px 0 0 8px !important;
}
#content-wrapper .toggle .toggle-group span.toggle-handle,
#content-wrapper .toggle:hover .toggle-group span.toggle-handle {
    border-radius: 8px 0 0 8px !important;
}
#content-wrapper .toggle.off .toggle-group span.toggle-handle,
#content-wrapper .toggle.off:hover .toggle-group span.toggle-handle {
    border-radius: 0 !important;
}

/* **************************************************
    File upload 
************************************************** */
.input-group-btn span,
.file-upload-input span {
    /*color: #0054F0; <-- no default styling here, custom styling will not override it */
}
.file-upload input[type=file] {
    height: 46px;
}
#document-topics .topic .image-file-upload-input, 
#document-topics .topic .file-upload-input, 
.file-upload-clear {
    padding: 13px 10px;
}
#document-topics .input-group .form-control.file-upload-filename {
    border-radius: 0 0 0 10px;
}
    #document-topics .input-group .form-control.image-file-upload-filename {
        border-radius: 0 0 10px 10px;
    }

#document-topics .input-group-btn button.btn.btn-default.image-file-upload-clear:enabled {
    border-right: 0 !important;
}

.image-file-upload-clear {
    border-radius: 0 !important;
}

/* **************************************************
    Checkbox 
************************************************** */
.checkbox .cr .cr-icon {
    margin: 0;
}
#document-topics .dbq-input-no-label .input-group .cr-icon {
    border-radius: 0 0 0 8px;
}
.checkbox .cr svg.cr-icon {
    /*width: 10px;
    height: 10px; <-- why? in Relatiebeheer -> modals -> it's not good with 10px */
}

/* ******************************
    input without a label AND when it has a custom label
    - added in light and dark. TODO: all border-radius in dynabloqs.css
****************************** */
/* default */
.modal #document-topics .topic .dbq-input-no-label input {
    border-radius: 10px;
}
/* custom label */
.modal #document-topics .topic .dbq-custom-label + .element > .property > .dbq-input-no-label input {
    border-radius: 0 0 10px 10px;
}
/* time picker */
.modal #document-topics .topic .dbq-custom-label + .element > .property > .dbq-input-no-label .date .input-group-addon {
    border-radius: 0 0 0 10px;
}
/* time picker */
.modal #document-topics .topic .dbq-custom-label + .element > .property > .dbq-input-no-label .date input {
    border-radius: 0 0 10px 0;
}
/* select */
.modal #document-topics .topic .dbq-custom-label + .element > .property > .dbq-input-no-label select {
    border-radius: 0 0 10px 10px;
}

/* **************************************************
    Input-list 
************************************************** */
.dbq-dynamic-properties-input-list .input-list .input-list-content {
    border: 2px solid #e6e9ed;
}

/* add button on top or bottom (ascending/descending) */
#document-topics .input-list[data-sort-direction="0"] .input-list-item-add button.input-list-item-add-button:enabled {
    border-radius: 0 0 8px 8px !important;
}
#document-topics .input-list[data-sort-direction="1"] .input-list-item-add button.input-list-item-add-button:enabled {
    border-radius: 8px 8px 0 0 !important;
}

/* No items but we can see the add button */
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-radius: 10px !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 button.input-list-item-add-button:enabled,
    #document-topics .input-list[data-sort-direction="0"][data-has-visible-items="false"] .input-list-item-add button.input-list-item-add-button:enabled {
        border-radius: 8px !important;
    }
    #document-topics .input-list[data-sort-direction="0"][data-has-visible-items="true"] .input-list-item-add button.input-list-item-add-button:enabled {
        border-radius: 0 0 8px 8px !important;
    }
.modal #document-topics .input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="true"] .row[data-element-type="InputProperty"] .dbq-property-no-label input {
    border-radius: 0 0 10px 10px;
}

/* ****************************** 
    Theme Switch
****************************** */
.dbq-switch {
    border-radius: 10px;
}
.dbq-switch-text {
    border-radius: inherit;
}
.dbq-switch-handle {
    border-radius: 7px;
}
    .dbq-switch-handle:before {
        border-radius: 7px;
    }

/* ****************************** 
    validation styling always at bottom!
****************************** */
.validation-message.error {
    border-radius: 0 0 5px 5px;
}

/* ****************************** 
    ???
****************************** */
/*#document-topics .dbq-form-group-padding,
#document-topics .element .property .button_list {
    border-radius: 0 0 10px 10px;
}
.property select[data-inspect-folder-document-id][data-inspect-add-rule-code][data-has-value="true"] {
    border-radius: 0 0 0 10px !important;
}
    .property select[data-inspect-folder-document-id][data-inspect-add-rule-code] + .input-group-append button.dbq-select-view-button {
        border-radius: 0 !important;
    }
    .property select[data-inspect-folder-document-id][data-inspect-add-rule-code] + .input-group-append button.dbq-select-add-button {
        border-radius: 0 0 0 10px !important;
    }
.modal #document-topics .row[data-element-type="InputProperty"] .dbq-property-no-label textarea {
    border-radius: 0 0 10px 10px;
}*/

/*
    * Only when labels got styling, so this needs to be in light/dark styles (or Dynabloqs.css? because it's a radius..)
*/
.property select[data-inspect-folder-document-id][data-inspect-add-rule-code] {
}
    .property select[data-inspect-folder-document-id][data-inspect-add-rule-code][data-selected-value=''] {
        border-radius: 0 0 0 10px !important;
    }
    .property select[data-inspect-folder-document-id][data-inspect-add-rule-code][data-selected-value] {
        border-radius: 0 0 10px 10px !important;
    }
    .property select[data-inspect-folder-document-id][data-inspect-add-rule-code][data-has-value="true"] { /* eye is visible here */
        border-radius: 0 0 0 10px !important;
    }

.dbq-select-add-button {
    background-color: #FFFFFF;
}

.property select[data-inspect-folder-document-id=''] {
    border-radius: 0 0 10px 10px !important;
}

.property select[data-inspect-add-rule-code=''] + .input-group-append > .dbq-select-view-button {
    height: 50px;
    border-radius: 0 0 10px 0 !important;
}


#document-topics .element .property .button_list {
    border-radius: 0 0 10px 10px;
}

#document-topics .element .property.dbq-property-no-label .button_list {
    border-radius: 10px;
}

#document-topics .dbq-form-group,
#document-topics .dbq-label-disabled + .dbq-form-group-padding,
#document-topics .element .property .dbq-label-disabled + .button_list,
#document-topics .dbq-form-group-no-padding {
    border-radius: 0 0 10px 10px;
}
.modal #document-topics .row[data-element-type="InputProperty"] .dbq-property-no-label, 
.modal #document-topics .row[data-element-type="InputProperty"] .dbq-property-no-label input, 
.modal #document-topics .row[data-element-type="InputProperty"] .dbq-property-no-label textarea,
#document-topics .dbq-input-no-label .form-control {
    border-radius: 0 0 10px 10px;
}


/* ****************************** 
    Dynabloqs Navbar Functions
****************************** */

#dbq-navbar-functions {
    float: right;
    padding: 18px 0;
}