html .btn-primary:active,
html .btn-primary.active,
.show > html .btn-primary.dropdown-toggle {
  background-color: #d16935 !important;
  background-image: none !important;
  border-color: #d16935 #d16935 #d16935 !important;
  box-shadow: 0 0 0 0.1rem rgb(204 136 2) !important;
}

#formSelectTenant label {
    display: inline-block;
    margin-left: 5px;
    font-weight: normal;
}
#formSelectTenant select {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}
#formSelectTenant .remember-me-container {
    margin-bottom: 15px;
}

.dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown-toggle {
    background: #fff;
    border: 1px solid #ccc;
    padding: 0.4rem 1rem;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .dropdown-toggle .caret {
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
  }
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    border: 1px solid #ccc;
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0.2rem 0;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
  }
  .dropdown-menu[hidden] {
    display: none;
  }
  .dropdown-menu li {
    padding: 0.5rem 1rem;
    cursor: pointer;
  }
  .dropdown-menu li:hover,
  .dropdown-menu li[aria-selected="true"] {
    background: #f0f0f0;
  }

  .screenshot { 
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 4px #787878b8;
    width: 100%;
    max-width: 590px;
    flex-direction: column;
    align-items: center;
    font-family: sans-serif;
    position: relative;
    display: block;     /* Voorkomt ook witruimte en zorgt voor correcte layout */
    height: auto;       /* Behoudt de juiste aspect ratio */
  }

  .screenshot-link {
  display: inline-block; /* Zorgt dat de link zich als een blok gedraagt maar niet onnodig uitrekt */
  width: 100%;           /* De link mag de volledige breedte van zijn parent (de kolom) innemen */
  max-width: 590px;      /* Maar niet breder worden dan dit */

  /* Stijlen die de 'lijst' maken, verplaatst van .screenshot naar hier */
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 4px #787878b8;

  /* Deze zijn goed om te houden */
  font-family: sans-serif; /* Hoewel dit waarschijnlijk niet zichtbaar is */
  position: relative;
  line-height: 0; /* Voorkomt een kleine witruimte onder de afbeelding */
}


    /* Container for all cards */
    #dashboard {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: center; /* Optioneel: Lijn kaarten links uit */
    }
    .comments ul {
      padding-inline-start: 10px;
    }
    /* Individual site card */
    .site-card {
      background: #f4f4f4;
      border-radius: 8px;
      box-shadow: 0 1px 4px rgb(120 120 120 / 72%);
      width: 100%;
      max-width: 400px;
      padding: 0.5rem;
      display: flex
  ;
      flex-direction: column;
      align-items: center;
      font-family: sans-serif;
      position: relative;
    }
    /* Title */
    .site-card h2 {
      font-size: 0.9rem;
      margin-bottom: 0.4rem;
      text-align: center;
    }
    /* Circle for grade */
    .grade-circle {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: bold;
      color: #fff;
      margin-bottom: 0.5rem;
    }
    /* Metrics list */
    .metrics { list-style: none; padding: 0; margin: 0; width: 50%; }
    .metrics li {
      display: flex;
      align-items: center;
      margin: 0.3rem 0;
      font-size: 0.8rem;
    }
    .metrics li span.label { flex-grow: 1; }
    .metrics li span.value { margin-left: auto; }
    /* Collapsible comments */
    .comments-toggle {
      font-size: 0.7rem;
      color: #007BFF;
      background: none;
      border: none;
      cursor: pointer;
      margin-top: 0.3rem;
      padding: 0;
    }
    .comments { display: none; font-size: 0.75rem; color: #333; margin-top: 0.3rem; text-align: left; width: 100%; }

button.crawling {
    background: #808080 !important; /* Grijze achtergrond voor crawling */
    color: white !important; /* Witte tekst voor betere leesbaarheid op grijs */
}
button.crawling small {
    color: white !important; /* Witte tekst voor small element ook */
}

button.crawl-done {
    /* Standaard button styling wordt gebruikt als basis */
}

button:disabled, /* Standaard browser styling voor disabled */
button.crawl-done { /* Extra styling specifiek voor crawl-done als je dat wilt */
    /* background-color: #e9ecef; */ /* Lichtgrijs, vaak standaard voor disabled */
    /* border-color: #ced4da; */
    /* color: #6c757d; */
    /* cursor: not-allowed; */ /* Al door browser voor :disabled */
}

button.crawl-error {
    border: 2px solid red !important; /* Duidelijkere rode border */
    background-color: #ffe0e0 !important; /* Lichtrode achtergrond */
}
button.crawl-error small {
    color: #d00 !important; /* Donkerdere rode tekst voor contrast */
}

/* Optionele styling voor de <a> tag als de button erin disabled is */
a.link-disabled {
    opacity: 0.65; /* Maak de hele link wat vager */
    cursor: not-allowed; /* Verander muiscursor */
}
/* Je wilt misschien de standaard link-styling overschrijven als die te dominant is */
a.link-disabled:hover,
a.link-disabled:focus {
    text-decoration: none; /* Verwijder hover effecten */
}
.tooltip-cluster2 {
    opacity: 0;
    position: absolute;
    pointer-events: none; /* Heel belangrijk */
    background: rgba(245, 245, 245, 0.9);
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 11px;
    color: #333;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    z-index: 100; /* Zorg dat het bovenaan staat */
    /* Voeg eventueel max-width toe en white-space: normal als de tekst te lang wordt */
}
 
/* Add here all your CSS customizations 
.node circle { fill: #999; }
.node circle{ stroke:#fff; stroke-width:3px; fill:#555; }
*/
#cluster_chart .node-group { color: #000 !important; }
.node { box-sizing: border-box; position: absolute; overflow: hidden; }
.node text { font: 11px sans-serif;  cursor:pointer; }
.node--internal circle { fill: #77f; }
.node--internal text { text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff; }
.node-label { padding: 4px; line-height: 1em; white-space: pre; color: #fff; }
.node-value { color: rgba(0,0,0,0.8); font-size: 8px; margin-top: 1px; }

.link {fill: none; stroke: #555; stroke-opacity: 0.4; stroke-width: 1.5px; }

.grid-item { float: left; width: 202px; background: #e6e5e4; border: 1px solid #b6b5b4; }

input#demo_q {box-shadow:inset 0 0 4px #eee; width:120px; margin:0; padding:6px 12px; border-radius:4px; border:1px solid silver; font-size:1.1em;}

.wait-cursor { cursor: wait !important; }
#loading-spinnner {  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; }

div#boomstructuur, div#cluster, div#img_grid { height: 100%; width: 100%; overflow: auto; }
div#boomstructuur svg,
    div#cluster svg, 
    div#treemap_zoom svg, 
    div#treemap svg { height: 100%; width: 100%; overflow: auto; }

div#treemap, div#treemap_zoom { position: relative; width: 100%; height: 1040px; overflow: auto;
  border: 1px solid white; /* Geeft wat scheiding tussen de nodes */
  box-sizing: border-box; /* Zorgt dat padding/border binnen width/height vallen */
  font-size: 0.9em; /* Of wat je wilt */
  text-align: center;
}
div#treemap .node-label {
  /* Stijl voor het label, bv. padding, text-overflow */
  padding: 1px;
  width: 100%;
  height: 80%; /* Geef het label meer ruimte */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; /* Als je meerdere regels via \n hebt */
  word-break: break-word; /* Om lange woorden af te breken */
}

div#treemap .node-value {
  /* Stijl voor de waarde, bv. kleiner lettertype, andere kleur */
  font-size: 8px;
  color: #333;
  position: absolute;
  bottom: 1px;
  width: 100%;
  text-align: center;
}

#treemap_zoom { background: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.grandparent rect { fill: white; }
.grandparent:hover rect { fill: lightgrey; cursor: pointer;}
.children rect.parent, .grandparent text,
.grandparent rect { cursor: pointer; }

div.tooltip { position: absolute; text-align: center; width: 150px; /*height: 28px; */ padding: 2px; font: 12px sans-serif; background: lightgrey; border: 0px; border-radius: 8px; pointer-events: none; }

@keyframes bake-pie { from { transform: rotate(0deg) translate3d(0,0,0); } }
.pieID { display: inline-block; vertical-align: top; }
.pieID2 { display: inline-block; vertical-align: top; }
.pie { height: 200px; width: 200px; position: relative; margin: 0 30px 30px 0; }
.pie::before { content: ""; display: block; position: absolute; z-index: 1; width: 100px; height: 100px; background: #EEE; border-radius: 50%; top: 50px; left: 50px; }
.pie::after { content: ""; display: block; width: 120px; height: 2px; background: rgba(0,0,0,0.1); border-radius: 50%; box-shadow: 0 0 3px 4px rgba(0,0,0,0.1); margin: 220px auto; }
.slice { position: absolute; width: 200px; height: 200px; clip: rect(0px, 200px, 200px, 100px); animation: bake-pie 1s; }
.slice span { display: block; position: absolute; top: 0; left: 0; background-color: black; width: 200px; height: 200px; border-radius: 50%; clip: rect(0px, 200px, 200px, 100px); }
.legend { list-style-type: none; margin: 0; background: #FFF; padding: 15px; font-size: 12px; box-shadow: 1px 1px 0 #DDD, 2px 2px 0 #BBB; }
.legend li { width: 150px; height: 1.15em; padding-left: 0.5em; border-left: 1.25em solid black; margin-bottom: 1em; }
.legend em { font-style: normal; }
.legend span { float: right; }

.day { fill: #fff; stroke: black; stroke-width: .3px; }
.month, .month-path { fill: none; stroke: white; stroke-width: 1px; }
.year-title { font-size: 18px; letter-spacing: 10px; fill: #00B0DD; }

#info { top: 10px; left: 40px; font-size: 13px; }
.header { position: fixed; left: 0; top: 0; height: 33px; width: 100%; background: #ffff00; opacity: 0.9; z-index: 22; background: #00B0DD; color: white; }
svg text { font-size: 11px; text-transform: uppercase; fill: #3d3d3d; }

.d3-tip { line-height: 1; font-weight: bold; padding: 12px; background: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 2px; }
/* Creates a small triangle extender for the tooltip */
.d3-tip:after { box-sizing: border-box; display: inline; font-size: 10px; width: 100%; line-height: 1; color: rgba(0, 0, 0, 0.8); content: "\25BC"; position: absolute; text-align: center; }

/* Style northward tooltips differently */
.d3-tip.n:after { margin: -1px 0 0 0; top: 100%; left: 0; }
.bar { fill: orange ; }
.bar:hover { fill: red ; border: 1px solid red; }
.day:hover { fill: grey ; border: 1px solid red; }

.top-button-bar {
  display: flex;
  justify-content: space-between; /* Dit duwt de linker- en rechtergroep uit elkaar */
  align-items: flex-start;      /* Lijn de groepen aan de bovenkant uit */
  margin-bottom: 20px;          /* Ruimte onder de knoppenbalk */
}

.button-group-left {
  display: flex;
  flex-wrap: wrap; /* Zorgt dat knoppen naar een nieuwe regel gaan als er geen ruimte is */
  gap: 8px;        /* Ruimte tussen de knoppen */
}

/* De rechtergroep heeft geen speciale styling nodig, tenzij je dat wilt */
.button-group-right {
  /* Leeg, tenzij je specifieke styling wilt toevoegen */
}