/* ---------------------------------------
    Basic portal styling LESS
--------------------------------------- */
/* ---------------------------------------
    Color & font settings
--------------------------------------- */
/* ---------------------------------------
    Login page
--------------------------------------- */
/* ---------------------------------------
    Header (navbar)
--------------------------------------- */
/* ---------------------------------------
    Sidebar (navigator)
--------------------------------------- */
/* ---------------------------------------
    Navigation tabs (nav-tabs)
--------------------------------------- */
/* ---------------------------------------
    Breadcrumbs
--------------------------------------- */
/* ---------------------------------------
    Content
--------------------------------------- */
/* ---------------------------------------
    Table
--------------------------------------- */
/* ---------------------------------------
    Pop-ups (modal)
--------------------------------------- */
/* ---------------------------------------
    General
--------------------------------------- */
/*****************************************
    SVG
*****************************************/
/*svg {
    width: 20px; <-- this is allready done in default stylesheets
    height: 20px;
}*/
#content-wrapper .input-group-addon svg,
#dbq-notification-center-menu .dbqnc-toggle-button svg,
#dbq-notification-center-menu-container .dbqnc-toggle-button 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 .dbqnc-toggle-button svg,
#dbq-notification-center-menu-container .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 .next svg,
.datepicker .prev 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 gj-list-bootstrap list-group ##### */
.gj-tree-bootstrap-3 ul.gj-list-bootstrap li,
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-add-button svg,
.dashboard-list-remove-button-container button.btn-default 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 .btn-primary svg.dbqdt-btn-icon-only,
#content-wrapper button 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-add-button svg,
.btn-outline-primary.dbq-select-view-button svg {
  width: 40px;
  height: 30px;
  padding: 5px 10px;
  border-radius: 10px;
  fill: #0054F0;
}

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

.dbq-label-disabled + .form-group .input-group-addon svg,
.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 .dbqnc-toggle-button,
#dbq-notification-center-menu-container .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;
}

#content-wrapper .nav-tabs > li > a,
#document-topic-tabs .nav-tabs > li > a,
#document-topics .nav-tabs > li > a,
.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-danger,
#content-wrapper .btn-info,
#content-wrapper .btn-link,
#content-wrapper .btn-primary,
#content-wrapper .btn-secondary,
#content-wrapper .btn-success,
#content-wrapper .btn-warning {
  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;
  }

  .modal-dialog {
    margin: 10px;
  }
}
@media only screen and (max-width: 1140px) and (min-width: 961px) {
  .modal-lg {
    max-width: 1100px;
  }

  .modal-dialog {
    margin: 30px;
  }
}
@media only screen and (min-width: 1141px) {
  .modal-lg {
    min-width: 1100px;
  }

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

#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 #document-topics .dbq-custom-label p,
.modal .form-group label {
  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 0 0 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 div.dataTables_wrapper div.dataTables_paginate li,
#content-wrapper .dbq-document-list-table-view label {
  border-radius: 10px;
}

/* ******************************
    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 {
  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 select,
#content-wrapper #content textarea {
  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;
  height: 50px;
}

#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[disabled],
#content-wrapper .form-control[readonly],
#content-wrapper fieldset[disabled] .form-control {
  cursor: not-allowed;
  pointer-events: all !important;
}

/* 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-add-button,
#document-topics .btn.dbq-select-view-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::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

/* ******************************
    Scroll
****************************** */
/*
    (body background)
*/
#content::-webkit-scrollbar,
#content::-webkit-scrollbar-corner,
#content::-webkit-scrollbar-thumb,
#content::-webkit-scrollbar-thumb:hover,
#content::-webkit-scrollbar-track,
#dbq-notification-center .dbqnc-item-list::-webkit-scrollbar,
#dbq-notification-center .dbqnc-item-list::-webkit-scrollbar-corner,
#dbq-notification-center .dbqnc-item-list::-webkit-scrollbar-thumb,
#dbq-notification-center .dbqnc-item-list::-webkit-scrollbar-thumb:hover,
#dbq-notification-center .dbqnc-item-list::-webkit-scrollbar-track,
#navigator::-webkit-scrollbar,
#navigator::-webkit-scrollbar-corner,
#navigator::-webkit-scrollbar-thumb,
#navigator::-webkit-scrollbar-thumb:hover,
#navigator::-webkit-scrollbar-track,
#wrapper ::-webkit-scrollbar,
#wrapper ::-webkit-scrollbar-corner,
#wrapper ::-webkit-scrollbar-thumb,
#wrapper ::-webkit-scrollbar-thumb:hover,
#wrapper ::-webkit-scrollbar-track,
.classlist-window-content::-webkit-scrollbar,
.classlist-window-content::-webkit-scrollbar-corner,
.classlist-window-content::-webkit-scrollbar-thumb,
.classlist-window-content::-webkit-scrollbar-thumb:hover,
.classlist-window-content::-webkit-scrollbar-track,
.modal ::-webkit-scrollbar,
.modal ::-webkit-scrollbar-corner,
.modal ::-webkit-scrollbar-thumb,
.modal ::-webkit-scrollbar-thumb:hover,
.modal ::-webkit-scrollbar-track,
.multiple-select-selectmulti select::-webkit-scrollbar,
.multiple-select-selectmulti select::-webkit-scrollbar-corner,
.multiple-select-selectmulti select::-webkit-scrollbar-thumb,
.multiple-select-selectmulti select::-webkit-scrollbar-thumb:hover,
.multiple-select-selectmulti select::-webkit-scrollbar-track,
.tab-content::-webkit-scrollbar,
.tab-content::-webkit-scrollbar-corner,
.tab-content::-webkit-scrollbar-thumb,
.tab-content::-webkit-scrollbar-thumb:hover,
.tab-content::-webkit-scrollbar-track {
  border-radius: 10px;
}

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

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

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

/* ****************************************
    DbqLibraries scroll override
**************************************** */
#content-wrapper .dbq-developer-tools ::-webkit-scrollbar-track,
.dbq-developer-tools ::-webkit-scrollbar-track {
  border-radius: 10px !important;
}

#content-wrapper .dbq-developer-tools ::-webkit-scrollbar-corner,
.dbq-developer-tools ::-webkit-scrollbar-corner {
  border-radius: 10px !important;
}

#content-wrapper .dbq-developer-tools ::-webkit-scrollbar-thumb,
.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-filters .document-class-list-filter label,
.document-class-list-filter label,
.document-class-list-filter.checkbox-bottom span.dbq-checkbox-label-filters {
  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: 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.active:after,
#side_navigation > .foldertree-header: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;
}

.gj-tree-bootstrap-3 ul.gj-list-bootstrap li,
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;
}

#document-topics .dbq-form-group-title-label label,
.dbq-element-header-5,
.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-add-button:enabled,
.dashboard-list-remove-button-container button.btn-default: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;
}

#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;
}*/
.apexcharts-canvas,
.dbq-element-graph-container,
.graph-chart-container,
.graph-container {
  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-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-left .apexcharts-legend-series,
.apexcharts-legend.apexcharts-align-right .apexcharts-legend-series {
  display: flex !important;
}

.apexcharts-legend-marker {
  top: 0 !important;
  min-width: 20px !important;
}

.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-multiple,
.dbq-graph-single {
  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;
  padding: 0;
}

.dbq-maintenance-container-center p {
  color: #8c9cb1;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
  padding: 0;
}

#content-wrapper .row.dbq-wrapper,
.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;
}

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

/* ******************************
    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-default,
#content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh div.btn-primary {
  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.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-default,
#content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh .btn-primary {
  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-on.btn,
#content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh .toggle.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-default,
#content-wrapper .toggle .btn.btn-primary,
#content-wrapper .toggle button.btn.btn-default:enabled,
#content-wrapper .toggle button.btn.btn-primary: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-default,
#content-wrapper .toggle .btn.btn-primary,
#content-wrapper .toggle button.btn.btn-default:enabled,
#content-wrapper .toggle button.btn.btn-primary:enabled {
  border-radius: 8px 0 0 8px !important;
}

/* toggle button style override (bulk changes) */
#content-wrapper .toggle .btn.btn-default,
#content-wrapper .toggle .btn.btn-primary,
#content-wrapper .toggle button.btn.btn-default:enabled,
#content-wrapper .toggle button.btn.btn-primary: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-on.btn,
#content-wrapper #classlist .classlist-toolbar-item.checkbox-inline.classlist-toolbar-item-infinite-refresh .toggle.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
************************************************** */
.file-upload-input span,
.input-group-btn span {
  /*color: #0054F0; <-- no default styling here, custom styling will not override it */
}

.file-upload input[type=file] {
  height: 46px;
}

#document-topics .topic .file-upload-input,
#document-topics .topic .image-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][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-form-group-no-padding,
#document-topics .dbq-label-disabled + .dbq-form-group-padding,
#document-topics .element .property .dbq-label-disabled + .button_list {
  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;
}