/*
  style3EW — refactor met CSS custom properties
  - Kleurenpalet op basis van bestaande wt-blue / wt-green / wt-red
  - Variabelen hernoemd naar k1, k2, k3 (k = kleur)
  - Klassenamen (wt-blue, wt-green, wt-red, etc.) ongewijzigd voor backward compatibility
  - Alle eerdere hardcoded hex-waarden voor deze paletten vervangen door var(--k*)
*/
:root{
  /* Basistekst en achtergrond */
  --font-family-base: Verdana, sans-serif;
  --font-size-base: 14px;
  --line-height-base: 1.4;
  /* ===== k1: BLUE-palet (op basis van #034f84) ===== */
  --k1: #034f84;          /* wt-blue */
  --k1-l1: #0479cc;       /* wt-blue-l1 (tekst: #fff) */
  --k1-l2: #21a0fa;       /* wt-blue-l2 (tekst: #fff) */
  --k1-l3: #6bc0fc;       /* wt-blue-l3 */
  --k1-l4: #b2defe;       /* wt-blue-l4 */
  --k1-l5: #e9f5ff;       /* wt-blue-l5 */
  --k1-d2: #023e68;       /* wt-blue-d2 */
  --k1-d3: #02365b;       /* wt-blue-d3 */
  --k1-d4: #022e4e;       /* wt-blue-d4 */
  --k1-d5: #012641;       /* wt-blue-d5 */
  --k1-text: #ffffff;     /* primaire tekst op k1/donker */
  /* ===== k2: GREEN-palet (op basis van #459c48) ===== */
  --k2: #459c48;          /* wt-green */
  --k2-l1: #60b963;       /* wt-green-l1 (tekst: #fff) */
  --k2-l2: #88cb8a;       /* wt-green-l2 */
  --k2-l3: #b0dcb1;       /* wt-green-l3 */
  --k2-l4: #d7eed8;       /* wt-green-l4 */
  --k2-l5: #f3faf3;       /* wt-green-l5 */
  --k2-d1: #3e8c40;       /* wt-green-d1 */
  --k2-d2: #377d39;       /* wt-green-d2 */
  --k2-d3: #306d32;       /* wt-green-d3 */
  --k2-d4: #295e2b;       /* wt-green-d4 */
  --k2-d5: #224e24;       /* wt-green-d5 */
  --k2-text: #ffffff;     /* primaire tekst op k2/donker */
  /* ===== k3: RED-palet (op basis van #cc0000) ===== */
  --k3: #cc0000;          /* wt-red */
  --k3-l1: #ff0a0a;       /* wt-red-l1 (tekst: #fff) */
  --k3-l2: #ff4747;       /* wt-red-l2 */
  --k3-l3: #ff8585;       /* wt-red-l3 */
  --k3-l4: #ffc2c2;       /* wt-red-l4 */
  --k3-l5: #ffeded;       /* wt-red-l5 */
  --k3-l6: #fff4f4;       /* wt-red-l6 */
  --k3-d1: #b80000;       /* wt-red-d1 */
  --k3-d2: #a30000;       /* wt-red-d2 */
  --k3-d3: #8f0000;       /* wt-red-d3 */
  --k3-d4: #7a0000;       /* wt-red-d4 */
  --k3-d5: #660000;       /* wt-red-d5 */
  --k3-text: #ffffff;     /* primaire tekst op k3/donker */
  /* Overige vaste kleuren die bleven staan in het origineel */
  --gold: #f1c00e;
  --silver: #cccccc;
  --yellow-500: #ffeb3b; /* w3-text-yellow */
  --link-blue: #0000ff;  /* .MJ (historisch) */
  --accent-deep: #252060; /* diverse hover/shadow accenten */
  --xlink: #ff0000;      /* .xlink */
  --numslider-track: #d3d3d3;
  --focus-blue: #024575; /* input focus rim */
  --switch-bg: #cccccc;  /* .slider bg */
  --muted-bg: #fff5cc;   /* disabled form-control */
  --contextmenu-bg: #ffe680;
}
html, body{
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}
@media (max-width: 992px) {
  .wt-dynafont{ font-size: .75em; }
}
/* ====== Inputs: slider (numslider) ====== */
.numslider{
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: var(--numslider-track);
  outline: none;
  opacity: .7;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
}
.numslider:hover{ opacity: 1; }
.numslider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 45px;
  top: -10px;
  background: var(--k2-l1);
  cursor: pointer;
}
.numslider::-moz-range-thumb{
  width: 25px;
  height: 45px;
  top: -10px;
  background: var(--k2-l1);
  cursor: pointer;
}
/* ===== Tabs/Menu ===== */
.wt-tab-text{ padding-right: 15px; padding-bottom: 4px; }
.wt-tab{ width: 180px; max-width: 33%; height: 30px; }
.wt-kop{ padding: 5px 16px; }
.wt-menuItem{
  border: solid 1px;
  font-size: 1.25em;
}
.wt-menuItem:hover:not(.w3-border-gray){
  background-color: var(--k3-l5) !important; /* #ffeded */
}
.wt-menuBlok{ display: none; background-color: #fff; }
@media (max-width: 992px) {
  .wt-menuBlok{
    position: absolute;
    top: 20px;
    left: 65px;
    font-size: .9em;
    overflow: auto;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.2), 0 4px 20px 0 rgba(0,0,0,.19);
  }
  .wt-menuItem{ margin: 10px 8px 0 8px; font-size: .9em; padding: 5px 7px; }
  .wt-menuLogo{ float: right; transform: scale(.7); }
  @keyframes leftIn { from{ left: -100px; } to{ left: 0; } }
  .wt-menuVbar{ display: none; left: 0; background-color: #fff; height: 100%; width: fit-content; }
  .wt-vMenu{ display: block; animation-name: leftIn; animation-duration: .5s; }
  .wt-menuVPanel{ top: 44px; height: 100%; width: fit-content; }
  .wt-menuHPanel{ padding: 4px 8px; }
  .wt-menuMarge{ margin-top: 44px; }
}
@media (min-width: 993px) {
  .wt-menuBlok{ position: absolute; width: calc(100% - 90px) !important; padding-top: 8px; }
  .wt-menuItem{ margin-left: 20px; }
  .wt-menuLogo{ margin-right: 40px; }
  .wt-menuBars, .wt-menuBreak{ display: none; }
  .wt-menuVbar{ top: 6px; left: 90px; max-width: 1280px; margin: auto; }
  .wt-menuHPanel{ padding: 8px 16px; }
  .wt-menuMarge{ margin-top: 52px; }
}
/* ===== W3 helper overrides ===== */
.w3-bar .w3-bar-item, .w3-bar-block .w3-bar-item, .w3-btn, .w3-button{ padding: 5px 16px; }
.w3-select{ padding: 5px 0; }
.MJ{ color: var(--link-blue); }
.wt-chatgreen{ color: #000 !important; background-color: #e2ffc7 !important; }
/* ===== Share buttons ===== */
ul.share-buttons{ list-style: none; padding: 0; }
ul.share-buttons .sr-only{
  position: absolute; clip: rect(1px, 1px, 1px, 1px);
  padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden;
}
ul.share-buttons img{ width: 32px; }
ul.share-buttons li{ display: inline; }
.xlink{ color: var(--xlink); }
.w3-button{ padding: 5px 16px; }
.w3-input{ padding: 4px; }
.w3-radio{ width: 18px; height: 18px; top: 3px; }
.w3-check{ width: 20px; height: 20px; top: 4px; }
.w3-col, .w3-rest{ overflow: hidden; }
.wt-goud{ color: #fff !important; background-color: var(--gold) !important; }
.wt-text-goud{ color: var(--gold) !important; }
.wt-zilver{ color: #fff !important; background-color: var(--silver) !important; }
.wt-text-zilver{ color: var(--silver) !important; }
/* ===== BLUE scale (k1) ===== */
.wt-blue-l5{ color: #000 !important; background-color: var(--k1-l5) !important; }
.wt-blue-l4{ color: #000 !important; background-color: var(--k1-l4) !important; }
.wt-blue-l3{ color: #000 !important; background-color: var(--k1-l3) !important; }
.wt-blue-l2{ color: var(--k1-text) !important; background-color: var(--k1-l2) !important; }
.wt-blue-l1{ color: var(--k1-text) !important; background-color: var(--k1-l1) !important; }
.wt-blue{    color: var(--k1-text) !important; background-color: var(--k1) !important; }
.wt-blue-d2{ color: var(--k1-text) !important; background-color: var(--k1-d2) !important; }
.wt-blue-d3{ color: var(--k1-text) !important; background-color: var(--k1-d3) !important; }
.wt-blue-d4{ color: var(--k1-text) !important; background-color: var(--k1-d4) !important; }
.wt-blue-d5{ color: var(--k1-text) !important; background-color: var(--k1-d5) !important; }
.wt-blue-light{ color: #000 !important; background-color: var(--k1-l5) !important; }
.wt-blue-dark{ color: var(--k1-text) !important; background-color: var(--k1-d5) !important; }
.wt-blue-action{ color: var(--k1-text) !important; background-color: var(--k1-d5) !important; }
.wt-text-blue{ color: var(--k1) !important; }
.wt-text-blue-l1{ color: var(--k1-l1); }
.wt-border-blue{ border-color: var(--k1) !important; }
.wt-hover-blue:hover{ color: var(--k1-text) !important; background-color: var(--k1) !important; }
.wt-hover-text-blue:hover{ color: var(--k1) !important; }
.wt-hover-border-blue:hover{ border-color: var(--k1) !important; }
/* ===== RED scale (k3) ===== */
.wt-red-l6{ color: #000 !important; background-color: var(--k3-l6) !important; }
.wt-red-l5{ color: #000 !important; background-color: var(--k3-l5) !important; }
.wt-red-l4{ color: #000 !important; background-color: var(--k3-l4) !important; }
.wt-red-l3{ color: #000 !important; background-color: var(--k3-l3) !important; }
.wt-red-l2{ color: var(--k3-text) !important; background-color: var(--k3-l2) !important; }
.wt-red-l1{ color: var(--k3-text) !important; background-color: var(--k3-l1) !important; }
.wt-red-d1{ color: var(--k3-text) !important; background-color: var(--k3-d1) !important; }
.wt-red-d2{ color: var(--k3-text) !important; background-color: var(--k3-d2) !important; }
.wt-red-d3{ color: var(--k3-text) !important; background-color: var(--k3-d3) !important; }
.wt-red-d4{ color: var(--k3-text) !important; background-color: var(--k3-d4) !important; }
.wt-red-d5{ color: var(--k3-text) !important; background-color: var(--k3-d5) !important; }
.wt-red-light{ color: #000 !important; background-color: var(--k3-l5) !important; }
.wt-red-dark{ color: var(--k3-text) !important; background-color: var(--k3-d5) !important; }
.wt-red-action{ color: var(--k3-text) !important; background-color: var(--k3-d5) !important; }
.wt-red{ color: var(--k3-text) !important; background-color: var(--k3) !important; }
.wt-text-red{ color: var(--k3) !important; }
.wt-border-red{ border-color: var(--k3) !important; }
.wt-hover-red:hover{ color: var(--k3-text) !important; background-color: var(--k3) !important; }
.wt-hover-text-red:hover{ color: var(--k3) !important; }
.wt-hover-border-red:hover{ border-color: var(--k3) !important; }
/* ===== GREEN scale (k2) ===== */
.wt-green-l5{ color: #000 !important; background-color: var(--k2-l5) !important; }
.wt-green-l4{ color: #000 !important; background-color: var(--k2-l4) !important; }
.wt-green-l3{ color: #000 !important; background-color: var(--k2-l3) !important; }
.wt-green-l2{ color: #000 !important; background-color: var(--k2-l2) !important; }
.wt-green-l1{ color: var(--k2-text) !important; background-color: var(--k2-l1) !important; }
.wt-green-d1{ color: var(--k2-text) !important; background-color: var(--k2-d1) !important; }
.wt-green-d2{ color: var(--k2-text) !important; background-color: var(--k2-d2) !important; }
.wt-green-d3{ color: var(--k2-text) !important; background-color: var(--k2-d3) !important; }
.wt-green-d4{ color: var(--k2-text) !important; background-color: var(--k2-d4) !important; }
.wt-green-d5{ color: var(--k2-text) !important; background-color: var(--k2-d5) !important; }
.wt-green-light{ color: #000 !important; background-color: var(--k2-l5) !important; }
.wt-green-dark{ color: var(--k2-text) !important; background-color: var(--k2-d5) !important; }
.wt-green-action{ color: var(--k2-text) !important; background-color: var(--k2-d5) !important; }
.wt-green{ color: var(--k2-text) !important; background-color: var(--k2) !important; }
.wt-text-green{ color: var(--k2) !important; }
.wt-border-green{ border-color: var(--k2) !important; }
.wt-hover-green:hover{ color: var(--k2-text) !important; background-color: var(--k2) !important; }
.wt-hover-text-green:hover{ color: var(--k2) !important; }
.wt-hover-border-green:hover{ border-color: var(--k2) !important; }
/* ===== Diverse component styles ===== */
#contextmenu li{ background-color: var(--contextmenu-bg); }
/* Switch */
.switch{ position: relative; display: inline-block; margin-left: 2px; margin-right: 5px; width: 32px; height: 14px; }
.switch input{ opacity: 0; width: 0; height: 0; }
.slider{
  border-radius: 34px; position: absolute; cursor: pointer;
  top: 3px; left: 0; right: 0; bottom: -3px;
  background-color: var(--switch-bg);
  -webkit-transition: .4s; transition: .4s;
}
.slider:before{
  border-radius: 50%; position: absolute; content: ""; height: 20px; width: 20px;
  left: -3px; bottom: -3px; border: 1px solid var(--k2-d3);
  background-color: #fff; -webkit-transition: .4s; transition: .4s;
}
input:checked + .slider{ background-color: var(--k2-l2); }
input:focus + .slider{ box-shadow: 0 0 1px var(--focus-blue); }
input:checked + .slider:before{ background-color: var(--k2); transform: translateX(16px); }
.form{ padding-top: 15px; padding-bottom: 15px; }
@media (max-width:767px) {
  label{ margin-bottom: 0; }
}
.form-group{ margin-bottom: 5px; padding-top: 5px; }
.pagination > li > a, .pagination > li > span{ padding: 5px 7px; }
.panel > .list-group .list-group-item:hover, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus, #contextmenu li:hover, #contextmenu li:focus{
  color: #cc2900;
  background-color: var(--accent-deep);
}
.panel > .list-group .list-group-item{ color: var(--accent-deep); }
div.circle{
  border-radius: 0 / 50px 50px 0;
  border-style: solid; border-width: 18px; width: 0; height: 0;
}
.list-group-item{ padding: 7px 15px; }
/* ===== Grids & spacing ===== */
.row.header{ margin-top: 10px; }
@-moz-document url-prefix() { fieldset{ display: table-cell; } }
/* ===== Blink helper ===== */
.blink_text{ animation: 2s blinker linear infinite; }
@-moz-keyframes blinker { 0%{opacity:1} 80%{opacity:1} 90%{opacity:.2} 100%{opacity:1} }
@-webkit-keyframes blinker { 0%{opacity:1} 80%{opacity:1} 90%{opacity:.2} 100%{opacity:1} }
@keyframes blinker { 0%{opacity:1} 80%{opacity:1} 90%{opacity:.2} 100%{opacity:1} }
/* ===== Viewport & visibility helpers ===== */
@-ms-viewport { width: device-width; }
.visible-xs, .visible-sm, .visible-md, .visible-lg{ display: none !important; }
@media (max-width: 767px) { .visible-xs{ display: block !important; } }
@media (min-width: 768px) and (max-width: 991px) { .visible-sm{ display: block !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .visible-md{ display: block !important; } }
@media (min-width: 1200px) { .visible-lg{ display: block !important; } }
@media (max-width: 767px) { .hidden-xs{ display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .hidden-sm{ display: none !important; } }