/* Our color palette:
*/
:root {

  /* basic grey values */
  --black-text: #101010;
  --grey-dark: #444;
  --grey-medium-dark: #5c5c5c;
  --grey: #80889D;
  --grey-button: #979EAF;
  --grey-light: #C3C7D3;
  --grey-default-bg: #f4f6f9;
  --grey-verylight: #eff2f9;

  /* base colors */
  --blue-bright: #d1eefb;
  --blue-dark: #253077;
  --blue-medium-dark: #4267b1; /* not in official color palette, needed for links */
  --blue: #699fd6;
  --blue-light: #b8dcf7;
  --blue-verylight: #deeefa; /* not in official color palete */
  --blue-extremelight: #f0f7fc; /* not in official color palete */
  --green-dark: #263f35;
  --green: #418677;
  --green-light: #cde2d8;

  /* Accent colors */
  --blue-green: #4399ad;
  --blue-green-light: #C4E2E8;
  --pink: #e39cbe;
  --pink-light: #FBEFF5;
  --red: #aa2c31;
  --red-dark: #8d1c21;
  --limegreen: #D3DF46;
  --limegreen-light: #eaf19e; /* not in official color palete */
  --orange: #eb5d41;
  --orange-light: #ffb7a9; /* not in official color palette */
  --purple: #9d8ed6; /*not the purple from the official color palette (#862f82) */
  --green-accent: #2dad70;
  --gold: #A36F13;

  /* Variables to conveniently change a colour in multiple places at once */
  --header-bg: var(--blue-bright);
  --dimensie-c: var(--green);
  --dimensie-w: var(--blue-dark);
  --infobox: var(--blue-green);
  --infobox-light: var(--grey-verylight);
  --selected-aanbieder: var(--pink);
  --risk-or-warning: var(--orange);

}

/* ---- Base styling */

/* Make default font color slightly darker so it's readable on coloured backgrounds. */
.skin-blue {
  color: #1F1F1F;
}

/* Style links */
.skin-blue .box-body a {
  color: var(--blue-medium-dark);
}
.skin-blue .box-body a:hover {
  color: var(--blue);
}
.external-link-text {
  text-decoration: underline;
}

/* color of tab of modules in box */
.skin-blue .nav-tabs-custom>.nav-tabs>li.active {
    border-top-color: var(--blue-dark);
}

/* Buttons to toggle show/hide a div */
.toggle-div-button,
.toggle-div-button:active,
.toggle-div-button:focus,
.toggle-div-button:active:focus {
  color: var(--grey-dark);
  background-color: white;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0px 0px 5px 0px;
}
.toggle-div-button:hover {
  color: var(--grey);
  background-color: white;
}

.toggle-div-button-dark,
.toggle-div-button-dark:active,
.toggle-div-button-dark:focus,
.toggle-div-button-dark:active:focus {
  color: #bbc6cd;
  background-color: #222d32;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0px 0px 5px 0px;
}
.toggle-div-button-dark:hover {
  color: var(--grey-verylight);
  background-color: #222d32;
}

/* page background */
.content-wrapper {
  background-color: var(--grey-default-bg);
  /* height needs to be set to auto, otherwise scrolling during introjs tours does not work correctly */
  height: auto;
}

/* showModal adds padding-right to body after being closed, we need to overrule this */
body {
  padding-right: 0px!important;
}

/* ---- Main header and sidebar styling */

/* main header color and styling */
.skin-blue .main-header .navbar {
  background-color: var(--header-bg);
  margin-left: 0px;
  height: 75px;
}

.skin-blue .main-header {
  max-height: none;
}

/* want main header as full width - so remove header above sidebar (because this header gets collapsed) */
.skin-blue .main-header .logo {
    width: 0px;
    height: 75px;
    background-color: var(--header-bg);
}
.sidebar-mini.sidebar-collapse .main-header .logo {
    width: 0px;
}
.sidebar-mini.sidebar-collapse .main-header .navbar {
    margin-left: 0px;
}
.skin-blue .main-header .navbar .nav {
  float: none;
}
.header-logo {
  height: 50px;
}

/* style beta badge in sidebar*/
.sidebar .sidebar-menu>li .badge {
  margin-top: -3px;
  margin-left: 3px;
  background-color: var(--grey);
}

/* set top padding of sidebar menu to height of main header */
.main-sidebar {
  padding-top: 75px;
}
/* sidebar background */
.skin-blue .left-side, .skin-blue .main-sidebar, .skin-blue .wrapper {
  background-color: var(--grey-verylight);
}
/* color of hover/selected menu item */
.skin-blue .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li.menu-open>a, .skin-blue .sidebar-menu>li:hover>a {
    color: white;
    background: var(--blue-dark);
    border-left: solid 5px var(--blue-dark);
}
/* color of unselected menu items*/
.skin-blue .sidebar a {
    color: var(--black-text);
}
/* remove default sidebar toggle for normal widths - replaced with custom one */
@media (min-width: 768px) {
  .sidebar-toggle {
    display: none;
  }
}

#toggle_sidebar {
  size: 14px;
  position: fixed;
  bottom: 10px;
}

/* Needed to prevent #toggle_sidebar from moving to the bottom of the document instead of staying at the bottom of the window */
body.sidebar-mini.sidebar-collapse .main-sidebar {
  transform: none;
}

/* styling of gears icon for page settings */
.skin-blue .main-header .navbar .nav>li>a {
  height: 75px;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: var(--blue-dark);
}
.skin-blue .main-header .navbar .nav>li>a:hover {
  background: rgba(0, 0, 0, .1);
  color: var(--blue-dark);
}

#controlbar {
  padding-top: 0px;
  top: 75px;
  bottom: 0; /* bottom 0 is needed to make scroll y work with position fixed or absolute */
  overflow-y: auto;
}

#controlbar:has( .introjs-showElement) {
  z-index: 99999999 !important;
}

#controlbar.introjs-showElement {
  z-index: 99999999 !important;
}

.introjs-showElement:not(#controlbar) {
  position: relative;
}

.main-header .navbar-custom-menu {
  float: none;
}
.navbar-nav {
  float: none;
}

/* styling of gears icon for page settings */
.skin-blue .main-header .navbar .nav >li >a {
  height: 75px;
  display: flex;
  align-items: center;
  font-size: 16px;
}
/* Disable controlbarmenu (right-side menu) when not logged in */
.main-header .navbar-custom-menu > ul > li:nth-child(3) {
  float: right;
  display: none;
}

.main-header .navbar-custom-menu > ul > li:nth-child(2) {
  float: right;
}

/* Position text in center of page */
.main-header .navbar-custom-menu > ul > li:nth-child(1) {
  position: absolute;
  left: 1%;
  width: 100%;
  display: flex;
  align-items: center;
  height: 75px;
}

/* at this size, the left menu is minimized, and we need the 'bars' button (sidebar-toggle) to be able to open it */
@media (max-width: 767px) {
  .main-header .navbar-custom-menu > ul > li:nth-child(1) {
    margin-left: 30px;
  }
  .sidebar-toggle {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .header-logo {
    height: 25px; !important
  }
  #toggle_sidebar {
    display: none;
  }
}

/* ---- box module styling */

/* minimum height of a box when the side menu is opened */
.direct-chat-contacts-open > .box-body {
  min-height: 360px;
}
/* properly style a tabBox inside a sidebarMenu */
.direct-chat-contacts > .contacts-list > li {
  padding: 0px;
}
.direct-chat-contacts > .contacts-list > li .col-sm-12 {
  padding-left: 0px;
  padding-right: 10px;
}
.direct-chat-contacts > .contacts-list > li .col-sm-12 > .nav-tabs-custom {
  background: inherit;
  margin-bottom: 0px;
}
.direct-chat-contacts > .contacts-list > li .col-sm-12 > .nav-tabs-custom > .tab-content {
  background: inherit;
}
.direct-chat-contacts > .contacts-list > li .col-sm-12 > .nav-tabs-custom > .nav-tabs {
  border-bottom: none;
}
.direct-chat-contacts > .contacts-list > li .col-sm-12 > .nav-tabs-custom > .nav-tabs > li {
  margin-right: 0px;
}
.direct-chat-contacts > .contacts-list > li .col-sm-12 > .nav-tabs-custom > .nav-tabs > li > a {
  background: #222d32;
  color: #b8c7ce;
  border: none;
}
.direct-chat-contacts > .contacts-list > li .col-sm-12 > .nav-tabs-custom > .nav-tabs > li > a:hover {
  background: #222d32;
  color: #fff;
}
.direct-chat-contacts > .contacts-list > li .col-sm-12 > .nav-tabs-custom > .nav-tabs > li.active > a {
  background: inherit;
  color: #fff;
}

/* remove extra margins for tabs within a box */
.box-body > .col-sm-12 > .nav-tabs-custom {
  margin-left:-15px;
  margin-right:-15px;
  margin-bottom: 0px;
}

/* if a box contains just a single tab, then visually remove all tabs-related stuff to make space */
.no-single-tab > .col-sm-12 > .nav-tabs-custom {
  box-shadow: none;
}
.no-single-tab > .col-sm-12 > .nav-tabs-custom > ul {
  display: none;
}
.no-single-tab > .col-sm-12 > .nav-tabs-custom > .tab-content > .tab-pane {
  display: block;
}

/* don't show extra module title -> for print only */
.tegel > .col-sm-12 > .nav-tabs-custom > .tab-content > .tab-pane > h4 {
  display: none;
}

/* Fix layout of selectize boxes for module dependency control
  This will give the labels a fixed width and put them side-by-side with the
  selectizeInputs to save some vertical space
*/
.dep-control > div.shiny-input-container {
  display: flex;
  align-items: center;
}
.dep-control > div.shiny-input-container > div {
  flex-grow: 1;
}
.dep-control > div.shiny-input-container > div > div.selectize-control {
  margin-bottom: 0px;
}
.dep-control > div.shiny-input-container > label {
  width: 110px;
}

/* ---- Styling used throughout modules */
.no-data-warning {
  color: var(--grey-medium-dark);
}
.no-data-warning > p {
  margin: 0px; !important
}

.instruction {
  color: var(--grey-medium-dark);
}

.skin-blue .bttn-jelly.bttn-default:hover[disabled],
.skin-blue .bttn-jelly.bttn-default:focus {
  transform: none;
  box-shadow: none;
}

/* ---- mod_welcome */

/* Custom designs for boxes on welcome page*/

.inline-box {
  padding: 10px !important;
  background-color: var(--blue-dark);
  color: white;
}

.welcome-box {
  background-color: white;
  padding: 10px !important;
}
#welcome-box_welcome_logged_in-box .box.box-solid,
#welcome-box_welcome-box .box.box-solid {
  margin-bottom: 0px;
}
#welcome-box_welcome_logged_in-box .box.box-solid > .box-header .box-title,
#welcome-box_welcome-box .box.box-solid > .box-header .box-title{
  display: flex;
  color: var(--green-dark);
}
#welcome-box_welcome_logged_in-box .box.box-solid > .box-header .welcome-header-div,
#welcome-box_welcome-box .box.box-solid > .box-header .welcome-header-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.zigzag-background {
  position: fixed;
  margin-left: 20%;
  margin-top: -20px;
  -webkit-mask-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0)));
}

.main-header .message-banner,
.main-header .device-banner {
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: baseline;
}

.main-header .message-banner {
  background: var(--limegreen-light);
}
.main-header .device-banner {
  background: var(--risk-or-warning);
}

.main-header .message-banner span,
.main-header .device-banner span {
  flex: 0 1 100%;
  overflow: hidden;
}

.main-header .message-banner i.fa-screwdriver-wrench,
.main-header .device-banner i.fa-triangle-exclamation {
 margin-right: 8px;
}

.main-header .message-banner i.fa-xmark,
.main-header .device-banner i.fa-xmark {
 flex: 0 0 auto;
 cursor: pointer;
}

.welcome-box-intro {
  border-left: 10px solid var(--green-dark);
  padding: 10px !important;
}
.welcome-page-row .full-row {
  background-color: var(--grey-default-bg);
  flex: 1;
  padding: 10px;
}
.welcome-page-row {
  display: flex;
  flex-direction: row;
}
@media (max-width: 830px) {
  .welcome-page-row {
    display:block;
  }
}
.welcome-page-row .left-half,
.welcome-page-row .right-half {
  background-color: var(--grey-default-bg);
  flex: 0.5;
  padding: 10px;
  display: grid;
}
.welcome-page-row .left-half > div:first-child,
.welcome-page-row .right-half > div:first-child {
  display: flex;
}
.logos-span {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.org-logo {
  height: 50px;
  margin: 0px 50px 10px 50px
}
.org-logo-center {
  height: 50px;
  margin: 0px 10px 10px 10px
}
.org-logo-label {
  margin: 0px;
  color: var(--grey);
  font-size: 12px;
}
.request_account .bttn-jelly.bttn-default,
.page_zorgmarktanalyse .bttn-jelly.bttn-default,
.page_zorgaanbieder .bttn-jelly.bttn-default,
.page_analysis .bttn-jelly.bttn-default,
.page_info .bttn-jelly.bttn-default {
  background-color: var(--green-light);
  color: var(--green-dark);
  margin-bottom: 12px;
  margin-top: 10px;
  font-size: 16px;
}
.fa-circle-icon {
  background-color: var(--green-dark);
  color: white;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Modal styling */
.modal-header {
  background-color: var(--header-bg);
  color: var(--blue-dark);
  text-align: center;
}

/* app_server */
.pw-requirements p {
  margin: 0px;
}

/* To remove all extra padding from box module around welcome page module */

#welcome-box_welcome-box, #welcome-box_welcome_logged_in-box {
  padding: 0;
  margin: 0;
  box-shadow: none;
}
#welcome-box_welcome-box .box-header.with-border, #welcome-box_welcome_logged_in-box .box-header.with-border {
  display: none;
}
#welcome-box_welcome-box .box-body, #welcome-box_welcome_logged_in-box .box-body {
  padding: 0;
}
#welcome-box_welcome-box .nav-tabs-custom .tab-content, #welcome-box_welcome_logged_in-box .nav-tabs-custom .tab-content {
  padding: 0;
}
#welcome-box_welcome-box .container-fluid, #welcome-box_welcome_logged_in-box .container-fluid {
  padding: 0;
}

#welcome-box_welcome-welcome-account_request_inputs .shiny-input-container > label {
   margin-bottom: 0px; !important
}

/* ---- Governance module */

/* Custom infoBox that is smaller and looks nicer than default shinydashboard::infoBox */
.info-box-small .info-box-icon {
  font-size: xx-large; height: 60px; width: 60px;
  line-height: 60px; border-bottom-left-radius: 5px; border-top-left-radius: 5px; cursor: pointer;
  background: var(--infobox) !important;
  color: var(--infobox-light) !important;
}
.info-box-small .info-box-icon:hover {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  box-shadow: 2px 4px 2px;
  translate: -2px -4px;
}
.info-box-small .info-box-content {
  margin-left: 60px;
}
.info-box-small .info-box-text {
  text-transform: none;
}
.info-box-small .info-box {
  min-height: 60px;
  background: var(--infobox-light) !important;
}

.warning-emphasis {
  color: var(--risk-or-warning);
  font-weight: bold;
}
.negative-emphasis {
  /*color: var(--risk-or-warning);*/
  font-weight: bold;
}
.positive-emphasis {
  color: var(--blue-dark);
  font-weight: bold;
}
.neutral-emphasis {
  font-weight: bold;
}

/* ---- reactable: custom bar charts */

.reactable-barchart {
  display: flex;
  align-items: center;
}
.reactable-barchart .bg {
  flex-grow: 1;
  margin-left: 6px;
  background: var(--grey-verylight);
}
.reactable-barchart .bg .bar {
  height: 14px;
  background: var(--blue-green);
}

/* drag and drop borders */
.page-layout-column {
  padding-right: 10px;
  padding-left: 10px;
}

.page-layout-column-help {
  min-height: 20px;
  border-style: solid;
  border-color: darkgrey;
  border-width: 1px;
  box-shadow: 5px 5px 15px grey;
  padding-top: 15px;
  background: rgb(236, 240, 245);
}

.page-layout-row {
  margin-left: -10px;
  margin-right: -10px;
}

.page-layout-row-help {
  border-style: solid;
  border-color: darkgrey;
  border-width: 1px;
  box-shadow: 5px 5px 15px grey;
  padding: 10px;
  background: rgb(236, 240, 245);
}

.page-container-help {
  padding: 10px;
}

.col-sizer .fas {
  transform: rotate(45deg);
}
.col-sizer {
  margin-bottom: 15px;
}

.icon-stack-plus.fa-stack {
  width: 2em;
  font-size: 0.5em;
}

.icon-stack-plus .fas {
  transform: none;
}

.icon-stack-plus .fa-stack-1x {
  left: 10px;
  top: 5px;
}

/* Custom table rows icon because the fontawesome table-rows icon is not free. */
.table-rows-icon {
  background: url('table_rows.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 14px;
  width: 14px;
  display: block;
}


/* ---- mod_general_info */
/* Change padding and margin bottom of numbered lists with top AGB / SBI codes in module_general_info */
.top_codes ul {
  margin-bottom: 0;
  padding-left: 20px;
}

/* Change padding of numbered lists with all AGB / SBI codes in module_general_info */
.all_codes ul {
  padding-left: 20px;
}

/* ---- mod_news */

/* remove small tick marks from sliders */
.irs--shiny .irs-grid-pol.small {
  display: none;
}

.irs--shiny .irs-from, .irs--shiny .irs-to, .irs--shiny .irs-single {
  background-color: var(--blue-dark) !important;
}

.irs--shiny .irs-bar {
  background-color: var(--blue-dark) !important;
  border-top: 1px solid var(--blue-dark) !important;
  border-bottom: 1px solid var(--blue-dark) !important;
}

/* ---- introjs introtours
  Each introtour starts with a switch_tabs step that should be invisible. The switch_tabs
  steps are hidden in the introjs callback 'onbeforechange', but this callback doesn't work
  to hide the first step (I think because it is executed before any .introjs elements have been initiated?).
  For that reason I apply the CSS to hide the step here and undo this in the callback for non switch_tabs steps. */

/* The div selector is needed to increase the specificity of this CSS rule so that it overrides the default
  .introjs-overlay rules.*/
div.introjs-overlay {
  z-index: 9999999;
  background: rgba(33, 33, 33, 0.5);
  opacity: 1;
}

/* The introjs library applies inline CSS to the .introjs-helperLayer element, so the !important keyword is needed to
  override the inline CSS.*/
.introjs-helperLayer {
  box-shadow: none !important;
  opacity: 0 !important;
}

/* The div selector is again needed to increase the specificity of this rule.*/
div.introjs-tooltipReferenceLayer {
  display: none;
}

/* Custom class needed to override the inline CSS that inrojs adds to .introjs-helperLayer elements.*/
.helper-layer-grey {
  box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 1px 2px, rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
  opacity: 1 !important;
}

/* Don't hide the tooltip on the welcome page that doesn't have any switch_tab steps: */
.introjs-tooltipReferenceLayer:has( .show-all-steps, .page-settings-tour, .first-visit) {
  display: block;
}

.first-visit.introjs-tooltip, .show-all-steps.introjs-tooltip, .page-settings-tour.introjs-tooltip {
  min-width: 500px !important;
  max-width: 500px !important;
}


.page-settings-tour .introjs-prevbutton {
  display: none;
}

.my-floating-tooltip.introjs-tooltipReferenceLayer>.introjs-tooltip {
  top: 400px !important;
  position: fixed;
}

.first-visit .introjs-skipbutton {
  display: none;
}

div.introjs-tooltipReferenceLayer:not(.arrow-top-right) .introjs-arrow.right-bottom {
  bottom: 25px;
}

.arrow-top-right .introjs-arrow.right-bottom {
  top: 10px;
  bottom: unset;
}

.introjs-tooltip {
  min-width: 350px !important;
}

.control-sidebar-dark .nav-tabs.control-sidebar-tabs a:has(>.page-settings-introtour-icon) {
 pointer-events: none;
}

.control-sidebar-dark .nav-tabs.control-sidebar-tabs a:has(>.page-settings-introtour-icon):hover {
 background: #181f23;
}

.control-sidebar-dark .nav-tabs.control-sidebar-tabs a>.page-settings-introtour-icon {
 pointer-events: all;
 cursor: pointer;
}

/* ---- Indicator uitleg module*/
/* The indicator-uitleg-card class can be given to a shinydashboard::box as the class argument.*/
.indicator-uitleg-card {
  background: var(--grey-verylight);
  padding: 15px;
}

.box-solid:has(>.indicator-uitleg-card.no-risks-c) {
  border-left: solid 5px var(--dimensie-c);
}

.box-solid:has(>.indicator-uitleg-card.no-risks-w) {
  border-left: solid 5px var(--dimensie-w);
}

.box-solid:has(>.indicator-uitleg-card.no-risks-zma) {
  border-left: solid 5px var(--gold);
}

.box-solid:has(>.indicator-uitleg-card.risks) {
  border-left: solid 5px var(--risk-or-warning);
}

.indicator-uitleg-card h3 {
  margin: 2px 0px 2px 0px;
  font-weight: bold;
  font-size: 24px;
}

.indicator-uitleg-card h5 {
  font-weight: bold;
  margin: 0px 0px 2px 0px;
}

.indicator-uitleg-card ul {
  padding-left: 15px;
  margin: 0px;
}

.aandachtspunt {
  background: var(--blue-light);
  padding-left: 15px;
  color: var(--black-text);
  border-radius: 3px;
}

.indicatorscore-int ul {
  padding-left: 20px;
}
.indicatorscore-uitleg ol {
  padding-left: 20px;
}

/* ---- Network */
.network-selection-card {
  background: var(--grey-verylight);
  padding: 15px;
}

.network-selection-card h4 {
  font-size: 16px;
  margin: 0px 0px 2px 0px;
}

.network-selection-card .col-sm-5 {
  padding-right: 0px;
}

.box:has( .netwerk-selection-card) {
  border-top: 3px solid var(--grey-light);
}

.network-selection-card .bttn-jelly.bttn-default {
  color: #333;
  margin-top: 8px;
}

.network-plot-buttons {
  top: 30px;
  z-index: 50;
  display: flex;
  position: relative;
}

.general_info_select_org .bttn-jelly.bttn-default {
  padding: 0px 5px;
  font-size: 14px;
  color: #333;
  background: var(--grey-verylight);
}

.kvk-download-button.bttn-jelly.bttn,
.network-plot-buttons .bttn-jelly.bttn,
.network-download-button.bttn-jelly.bttn,
.list-table-buttons .bttn-jelly.bttn,
.list-trash-button.bttn-jelly.bttn {
    color: #333;
    margin-top: -5px;
    background: var(--grey-verylight);
    font-size: 16px;
}

.list-table-buttons .bttn-jelly.bttn.action-button {
  margin: 10px 0 10px 15px;
}

.network-plot-buttons .bttn-jelly.bttn.action-button {
  margin: 0 10px 0 0;
}

/* Hiding the header en nodesIdSelection select element to remove unwanted whitespace.*/
.visNetwork hr {
  display: none;
}

.visNetwork select {
  display: none !important;
}

/* ----Concern network */
/* styles.css */

.box:has( .concern-selection-card) {
  border-top: 0px;
}

/* Use flexbox so it also looks nice on smaller (laptop) screen */
.concern-selection-card {
    display: flex;
    flex-flow: row wrap;
    row-gap: 10px;
    padding: 15px;
}

.concern-selected-organisation {
    order 1;
    flex: 1 0 150px;
    box-sizing: border-box;
    padding: 5px;
}

.concern-ties {
    order 2;
    flex: 2 0 300px;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
}

.concern-ties-child {
    flex: 1 0 150px;
    padding: 5px;
    border-left: 3px solid var(--grey-button);
}

/* Change background colour of the tooltips in visNetwork plots */
div.vis-network + div {
    background-color: var(--grey-default-bg) !important;
}

/* ---- USERS */

.shiny-notification {
  position:fixed;
  top: calc(50%);
  left: calc(50%);
}
#users-box_user_list-box .box-header.with-border {
  display: none;
}
#users-box_user_list-box h4 {
  font-weight: bold;
  color: var(--blue-dark);
}

/* Reset color of downloadbutton links on user list page (were set to blue by manual link color styling) */
#users-box_user_list-box a {
  color: #444; !important
}

/* Allow variable height of fileinput progress bar for shinyfeedback */
.progress,.progress>.progress-bar {
  height: 100%;
}

.autofill_message {
  display: inline-flex;
  font-size: 11px;
  color: #999;
  font-style: italic;
}

.Reactable[id$="user_list"] .rt-td-inner {
  overflow: visible;
}

.user-buttons {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  justify-content: space-between;
}

.spacer {
  flex: 1;
}

.user-buttons button,a {
  flex: 0 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
}

/* ---- Search module */
.box-body .selectize-dropdown [data-selectable] .highlight {
  background: var(--limegreen-light);
}

.box-body .selectize-dropdown.form-control {
 padding-left: 5px;
}

#controlbar .btn-danger {
  background: var(--red);
  border-color: var(--red);
  color: white;
}

#controlbar .btn-danger.hover, .btn-danger:active, .btn-danger:hover {
  background-color: var(--red-dark);
  border-color: var(--red-dark);
}

#users-box_user_list-user_list-email_preview .container {
  width: fit-content;
  background-color: var(--grey-verylight);
}

/* ---- Webplot table */

.legend-item-webplot-table {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 20px;
}

.legend-item-webplot-table .no-risk {
  margin-right: 3px;
  width: 15px;
  height: 15px;
  aspect-ratio: 1;
  background-color: #FFFFFF;
  border: 1px solid black;
}

.legend-item-webplot-table .color-gradient {
  width: 200px;
  height: 15px;
  aspect-ratio: 1;
  background: linear-gradient(to right, #FDF6F4, #EB5B3F);
  border: 1px solid black;
  align-items: center;
  margin-left: 3px;
  margin-right: 3px;
}

/* ---- Print to PDF */

@media print {
  .box-tools {
    display: none;
  }
  html, body {
    overflow: hidden;
  }
  .page-layout-column > div > .box > .box-body .tab-pane {
    page-break-after: always !important;
  }
  /* don't show tabs in print */
  .tegel > .col-sm-12 > .nav-tabs-custom {
    box-shadow: none;
  }
  .tegel > .col-sm-12 > .nav-tabs-custom > ul {
    display: none;
  }
  .tegel > .col-sm-12 > .nav-tabs-custom > .tab-content > .tab-pane > h4 {
    display: block;
  }
  .no-single-tab > .col-sm-12 > .nav-tabs-custom > .tab-content > .tab-pane > h4 {
    display: none !important;
  }
  .no_print {
    display: none;
  }

  .print-warning {
      display: block !important;
  }

  .print-warning.hide-warning {
      display: none !important;
  }

  .rt-table {
    overflow: visible !important;
    height: 100% !important;
    max-height: fit-content !important;
  }

  .dataTables_scrollBody {
    overflow: visible !important;
    height: 100% !important;
    max-height: fit-content !important;
  }

  .shiny-notification {
    display: none;
  }

}

.print-only {
  display:none;
}
.print-show.print-only {
  display:block;
}


.print-tegel > .col-sm-12 > .nav-tabs-custom > .tab-content > .tab-pane {
    display: block;
}


.print-warning {
    display: none;
}

.tooltip-inner {
  font-size: 15px;
}

.tooltip {
  max-width: none;
}

.skin-blue .tooltip-inner {
  font-size: 14px;
}

.optgroup-header {
  font-size: 15px !important;
  color: black !important;
  background-color: #b8dcf7 !important;
  font-weight: bold !important;
}

/*
.print-warning.hide-warning {
    display: none;
}
*/

/* ----- Releases module */
/* Override default blue color for materialSwitch input with status primary */
.label-primary {
  background-color: var(--blue) !important;
}

/* ----- Map module */
/* Extra css selectors to ensure priority over default leaflet css rules */
.leaflet-popup-pane .leaflet-popup a.leaflet-popup-close-button {
  width: 20px;
  height: 20px;
}


/* ----- List module */
.dataTables_info {
  display: none;
}

/* ----- */
/* Div for algemene voorwaarden */
.algemene-voorwaarden-div {
  width: 85%;
  height: 250px;
  overflow-y: scroll;
  justify-items: center;
  margin: auto;
}

.zma-box-disclaimer {
  border-left: 5px solid var(--blue-dark);
  padding: 10px !important;
}

/* ----- */
/* Custom tag for ggz wachttijden uitleg */
.box-ggz-wtt-uitleg h5 {
  margin: 2px 0px 2px 0px;
  font-weight: bold;
}


/* ----- LIST */
.list_filter_div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list_filter_histoslider_outlier_switch_div {
  display: flex;
  justify-content: flex-end;
  margin-top: -10px;
  margin-bottom: -20px;
}
.list_filter_histoslider_outlier_switch_div .form-group {
  margin-bottom: 0px;
}
.list_filter_histoslider_div {
  margin-bottom: 10px;
}
.list_filter_input_div {
  width: 75%;
}
.list_filter_remove_button_div {
  width: 5%;
  height: 100%;
  margin-bottom: 15px;
}
#kvk_multi_input_warning {
  display: none;
  color: var(--risk-or-warning);
}

/* remove histoslider reset button */
div.histoslider-title {
  display: none; !important
}

/* icon should not grow or shrink */
.list-table-icon {
  flex: 0 0 15px;
  text-align: center;
}
.list-table-icon:hover {
  cursor: pointer;
  opacity: 0.5;
}

/* make reactable column resizer smaller */
.Reactable.list-reactable .rt-resizer {
  width: 25px;
}

/* set scrollbar on top of table in list reactable */
/* there is no option for this, so we use some weird trickery:  */
/* 1. rotate and mirror parental table so that scrollbar is at top */
/*    mirror is needed to avoid that horizontal scrolling with a trackpad is reversed */
.Reactable.list-reactable .rt-table {
  transform: rotate(180deg) scaleX(-1);
}
/* 2. rotate and mirror back table body and header so that content is properly visible */
.Reactable.list-reactable .rt-tbody {
  transform: rotate(180deg) scaleX(-1);
}
.Reactable.list-reactable .rt-thead {
  transform: rotate(180deg) scaleX(-1);
  order: 1; /* 3. header ends up on the bottom because of rotation, add back to the top of the table */
  margin-bottom: 10px; /* actually added on top */
}

.Reactable.list-reactable .list-calculation {
  width: fit-content;
  color: var(--blue-dark);
  border: solid 1px var(--blue-dark);
  border-radius: 3px;
  padding: 3px;
  background: var(--blue-verylight);
  font-weight: normal;
  margin-top: 2px;
}

.Reactable.list-reactable .rt-th:hover .list-calculation {
  display: block !important;
}

.list-table-buttons .shiny-input-container.form-group {
  margin-bottom: 0;
}

.list-table-dropdown {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 15px;
}

.list-table-buttons .list-table-dropdown .bttn-jelly.bttn.action-button {
  margin-bottom: 0;
}

/* ----- List categories module */
.skin-blue .vscomp-arrow {
  display: none;
}

.skin-blue .vscomp-wrapper.has-clear-button.has-value .vscomp-clear-button {
  display: none;
}

.skin-blue .vscomp-wrapper:not(.has-value) .vscomp-value {
    opacity: 1;
}

.skin-blue .vscomp-clear-button {
  right: 5px;
}

.skin-blue .vscomp-wrapper.has-clear-button .vscomp-toggle-button {
    padding-right: 7px;
    border-right: 0px;
    border-radius: 3px 0 0 3px;
    border-color: var(--grey);
}

.category-button {
  display: inline-flex;
  align-items: flex-end;
  margin: 0px 10px 0px 0px;
}

.category-button-chevron {
  display:flex;
  align-items: center;
  font-size: 16px;
  border: 1px solid var(--grey);
  border-radius: 0 3px 3px 0;
  margin-bottom: 15px;
  cursor: pointer;
  padding: 7px 0px;
}

.category-button-chevron .fas {
  padding: 0px 2px;
  line-height: 20px;
  color: var(--black-text);
}

.category-button-clear {
  display:flex;
  align-items: center;
  font-size: 14px;
  border-top: 1px solid var(--grey);
  border-bottom: 1px solid var(--grey);
  padding: 7px 5px 7px 0px;
  margin-bottom: 15px;
  cursor: pointer;
}

.category-button-clear-circle:hover {
  background: var(--grey-verylight);
  color: var(--black-text);
}

.category-button-clear-circle {
  border-radius: 50%;
  height: 20px;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--grey);
  line-height: 20px;
  height: 20px;
}

.skin-blue .vscomp-ele[disabled] .vscomp-wrapper {
    opacity: 1;
}

.skin-blue .vscomp-ele[disabled] {
    cursor: pointer;
}