/* ===== Basis kaart (gedeeld) ===== */
.rovea-card{
  position:relative; display:block; border-radius:var(--rdg-radius,20px); overflow:hidden;
  background:#fff; text-decoration:none; color:inherit;
  box-shadow:0 10px 26px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease;
}
.rovea-card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.18),0 6px 16px rgba(0,0,0,.12); }
.rovea-card-media{ position:absolute; inset:0 0 44px 0; background-size:cover; background-position:center; }
.rovea-card-title{
  position:absolute; left:0; right:0; bottom:0; min-height:44px; padding:6px 8px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-weight:700; color:#fff; line-height:1.2; font-size:14px;
  background:var(--cat-color,#0d47a1);
}

/* Eenvoudig fallback grid (onzichtbaar als je layout gebruikt) */
.rovea-grid{ --rovea-cols:4; display:grid; grid-template-columns:repeat(var(--rovea-cols),1fr); gap:18px; }
.rovea-grid .rovea-card::before{ content:""; display:block; padding-bottom:100%; }

/* ===== Basis kaart ===== */
.rovea-card{
  position:relative; display:block; border-radius:var(--rdg-radius,20px); overflow:hidden;
  background:#fff; text-decoration:none; color:inherit;
  box-shadow:0 10px 26px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease;
}
.rovea-card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.18),0 6px 16px rgba(0,0,0,.12); }
.rovea-card-media{ position:absolute; inset:0 0 44px 0; background-size:cover; background-position:center; }
.rovea-card-title{
  position:absolute; left:0; right:0; bottom:0; min-height:44px; padding:6px 8px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-weight:700; color:#fff; line-height:1.2; font-size:14px;
  background:var(--cat-color,#0d47a1);
}

/* ===== Eenvoudig fallback grid ===== */
.rovea-grid{ --rovea-cols:4; display:grid; grid-template-columns:repeat(var(--rovea-cols),1fr); gap:18px; }
.rovea-grid .rovea-card::before{ content:""; display:block; padding-bottom:100%; }

/* ===== 4×3 — 1 2 3 4 / 5 PHOTO 6 / 7 8 9 10 ===== */
.rovea-gridwelcome-alt{
  --tile-w:120px; --tile-h:120px; --gap:22px; --center-h:120px;
  --intro-color:#0d47a1; --photo-fit:cover; --photo-pos:center;

  display:grid;
  grid-template-columns: repeat(4, var(--tile-w));
  grid-template-rows: repeat(3, var(--tile-h));
  grid-template-areas:
    "pos1 pos2 pos3 pos4"
    "pos5 photo photo pos6"
    "pos7 pos8 pos9 pos10";
  gap:var(--gap);
  justify-content:center; align-items:center;
}
.rovea-gridwelcome-alt .pos1{ grid-area:pos1; }
.rovea-gridwelcome-alt .pos2{ grid-area:pos2; }
.rovea-gridwelcome-alt .pos3{ grid-area:pos3; }
.rovea-gridwelcome-alt .pos4{ grid-area:pos4; }
.rovea-gridwelcome-alt .pos5{ grid-area:pos5; }
.rovea-gridwelcome-alt .pos6{ grid-area:pos6; }
.rovea-gridwelcome-alt .pos7{ grid-area:pos7; }
.rovea-gridwelcome-alt .pos8{ grid-area:pos8; }
.rovea-gridwelcome-alt .pos9{ grid-area:pos9; }
.rovea-gridwelcome-alt .pos10{ grid-area:pos10; }
.rovea-gridwelcome-alt .photo{ grid-area:photo; width:calc(2 * var(--tile-w) + var(--gap)); height:var(--center-h); border-radius:12px; overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.08); }
.rovea-gridwelcome-alt .photo img{ width:100%; height:100%; object-fit:var(--photo-fit); object-position:var(--photo-pos); display:block; }

.rovea-gridwelcome-alt .rgw-intro .rovea-card-title{ background:var(--intro-color)!important; }
.rovea-gridwelcome-alt .rgw-intro{ position:relative; width:var(--tile-w); height:var(--tile-h); }
.rovea-gridwelcome-alt .rgw-intro .rgw-intro-body{
  position:absolute; inset:0 0 44px 0; padding:10px; display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:13px; line-height:1.35;
}

@media (max-width:900px){ .rovea-gridwelcome-alt{ --tile-w:110px; --tile-h:110px; } }
@media (max-width:640px){
  .rovea-gridwelcome-alt{ --tile-w:100px; --tile-h:100px; display:flex; flex-direction:column; align-items:center; gap:16px; }
}
/* Responsive fix midden-afbeelding */
@media (max-width: 900px){
  .rovea-gridwelcome-alt{ --tile-w:110px; --tile-h:110px; }
  .rovea-gridwelcome-alt .photo{
    max-width: 100%;
    width: auto;
  }
}

@media (max-width: 640px){
  .rovea-gridwelcome-alt{
    --tile-w:100px; --tile-h:100px;
    display:flex; flex-direction:column; align-items:center; gap:16px;
  }
  .rovea-gridwelcome-alt .photo{
    width: 100% !important;
    height: var(--center-h) !important;
    max-width: 100%;
  }
  .rovea-gridwelcome-alt .photo img{
    width: 100%;
    height: 100%;
  }
}
/* ===== Middenafbeelding als tegel met optionele titelbalk ===== */
.rovea-gridwelcome-alt .photo .rdg-center-card{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  color:inherit;
  text-decoration:none;
  overflow:hidden;
}
.rovea-gridwelcome-alt .photo .rdg-center-media{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  background:#eee;
}
.rovea-gridwelcome-alt .photo.has-center-title .rdg-center-media{ bottom:44px; }
.rovea-gridwelcome-alt .photo .rdg-center-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:var(--photo-fit);
  object-position:var(--photo-pos);
}
.rovea-gridwelcome-alt .photo .rdg-center-title{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  min-height:44px;
  padding:6px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-sizing:border-box;
  font-weight:700;
  color:#fff;
  line-height:1.2;
  font-size:14px;
}
.rovea-gridwelcome-alt .photo .rdg-center-card[href]{ cursor:pointer; }

/* ===== v7.1.0: non-destructieve afbeelding uitsnede per tegel ===== */
.rovea-card-media{
  overflow:hidden;
  background-color:#eef1f4;
}
.rovea-card-media > img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:50% 50%;
  transition:transform .18s ease;
  will-change:transform;
}

/* =========================================================
 * v7.2.0 — doorlopend raster wanneer middenafbeelding uit staat
 * ========================================================= */
.rovea-flow-grid{
  --tile-w:120px;
  --tile-h:120px;
  --gap:22px;
  --rdg-cols:4;
  --rdg-rows:3;
  --intro-color:#0d47a1;
  display:grid;
  grid-template-columns:repeat(var(--rdg-cols), minmax(0,var(--tile-w)));
  gap:var(--gap);
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:100%;
}
.rovea-flow-grid > .rovea-card,
.rovea-flow-grid .rgw-card,
.rovea-flow-grid .rgw-intro{
  width:100%;
  height:var(--tile-h);
  min-width:0;
}
.rovea-flow-grid .rgw-intro .rovea-card-title{
  background:var(--intro-color) !important;
}
.rovea-flow-grid .rgw-intro{
  position:relative;
}
.rovea-flow-grid .rgw-intro .rgw-intro-body{
  position:absolute;
  inset:0 0 44px 0;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:13px;
  line-height:1.35;
}

@media (max-width:900px){
  .rovea-flow-grid{
    --tile-w:110px;
    --tile-h:110px;
    gap:min(var(--gap),16px);
  }
}
@media (max-width:640px){
  .rovea-flow-grid{
    --tile-w:100px;
    --tile-h:100px;
    gap:min(var(--gap),12px);
    grid-template-columns:repeat(var(--rdg-cols), minmax(72px,var(--tile-w)));
    justify-content:start;
    overflow-x:auto;
    padding-bottom:4px;
  }
}
.rovea-flow-grid .rdg-flow-slot{
  width:100%;
  height:var(--tile-h);
  min-width:0;
}
.rovea-flow-grid .rdg-flow-slot > .rovea-card{
  width:100%;
  height:100%;
}


/* v7.6.2 — automatische tekstpassing */
.rovea-card-title{
  box-sizing:border-box;
  max-width:100%;
  overflow:hidden;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
}

/* v8: automatische tekstpassing gebruikt een begrensde titelbalk. */
.rovea-card-title{
  box-sizing:border-box;
  overflow:hidden;
  white-space:normal;
}

/* v9 — robuuste automatische tekstpassing */
.rovea-card-title .rdg-title-text{
  display:block;
  width:auto;
  max-width:100%;
  margin:0 auto;
  text-align:center;
  white-space:normal;
  line-height:inherit;
  hyphens:auto;
}


/* v19: tegelafbeeldingen vullen altijd de volledige tegelvorm.
   De titelbalk ligt als overlay bovenop de afbeelding. */
.rovea-card .rovea-card-media,
.rovea-circle-layout .rdg-circle-slot .rovea-card-media,
.rovea-flow-grid .rovea-card-media,
.rovea-gridwelcome-alt .rovea-card-media{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}
.rovea-card .rovea-card-media > img,
.rovea-circle-layout .rdg-circle-slot .rovea-card-media > img,
.rovea-flow-grid .rovea-card-media > img,
.rovea-gridwelcome-alt .rovea-card-media > img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.rovea-card .rovea-card-title,
.rovea-circle-layout .rdg-circle-slot .rovea-card-title{
  z-index:3;
}


/* v20: grid-vullende tegelafbeelding — voorkom wit vlak door uitzoomen/intrinsieke limieten. */
.rovea-card .rovea-card-media > img,
.rovea-circle-layout .rdg-circle-slot .rovea-card-media > img,
.rovea-flow-grid .rovea-card-media > img,
.rovea-gridwelcome-alt .rovea-card-media > img{
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
}


/* v23: respecteer per tegel de gekozen afbeeldingsmodus.
   'Hele afbeelding' (contain) toont de volledige bron zonder afsnijden;
   'Vullen & afsnijden' (cover) blijft beschikbaar per tegel. */
.rovea-card .rovea-card-media > img,
.rovea-circle-layout .rdg-circle-slot .rovea-card-media > img,
.rovea-flow-grid .rovea-card-media > img,
.rovea-gridwelcome-alt .rovea-card-media > img{
  object-position:center center;
}


/* v24: 'Hele afbeelding passend' vult de volledige tegelvorm zonder crop.
   De browser mag de bron hiervoor exact naar de tegelverhouding schalen. */
.rovea-card-media > img[style*="object-fit:fill"]{
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
}

/* =========================================================
 * v7.24.2 — klassiek dashboardgrid: foto krijgt uitsluitend
 * de ruimte BOVEN de titelbalk. Dit herstelt het oorspronkelijke
 * gedrag en raakt de cirkel/ovale speciale layout niet.
 * ========================================================= */
.rdg-classic-grid .rovea-card .rovea-card-media{
  position:absolute !important;
  inset:0 0 var(--tile-title-h,44px) 0 !important;
  width:auto !important;
  height:auto !important;
  overflow:hidden !important;
}
.rdg-classic-grid .rovea-card .rovea-card-title{
  height:var(--tile-title-h,44px) !important;
  min-height:var(--tile-title-h,44px) !important;
  max-height:var(--tile-title-h,44px) !important;
  box-sizing:border-box !important;
}
.rdg-classic-grid .rovea-card .rovea-card-media > img{
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
}



/* =========================================================
 * v7.25.0 — titel is optioneel.
 * Zonder titelbalk gebruikt de afbeelding de volledige tegelruimte.
 * ========================================================= */
.rovea-card.rdg-no-title .rovea-card-media,
.rdg-classic-grid .rovea-card.rdg-no-title .rovea-card-media,
.rovea-circle-layout .rdg-circle-slot .rovea-card.rdg-no-title .rovea-card-media,
.rovea-flow-grid .rovea-card.rdg-no-title .rovea-card-media{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}
.rovea-card.rdg-no-title .rovea-card-title{display:none !important;}


/* =========================================================
 * v7.30.2 — kaderloze frontend
 * Alleen het dashboard zelf blijft zichtbaar. De stage heeft geen eigen
 * achtergrond/kader en een gedetecteerde omliggende host kan door JS dezelfde
 * behandeling krijgen als het grid daar de enige inhoud is.
 * ========================================================= */
.rdg-dashboard-stage{
  display:block;
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible;
  box-sizing:border-box;
}
.rdg-grid-host-clean{
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
/* Veel voorkomende shortcode/block-wrappers mogen zelf ook nooit een kaart
   rond het grid tekenen. De parent wordt alleen door JS opgeschoond wanneer
   die vrijwel uitsluitend uit het dashboard bestaat. */
.wp-block-shortcode:has(> .rdg-dashboard-stage),
.widget_text:has(.rdg-dashboard-stage),
.textwidget:has(> .rdg-dashboard-stage){
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}


/* v7.30.1: extra theme-bestendigheid voor de exclusief gedetecteerde hosts.
   De inline !important-stijlen uit frontend.js zijn leidend; deze regels vangen
   ook pseudo-elementen op die sommige themes als kaartachtergrond gebruiken. */
html body .rdg-grid-host-clean,
html body .rdg-dashboard-stage.rdg-grid-host-clean{
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
html body .rdg-grid-host-clean::before,
html body .rdg-grid-host-clean::after{
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}


/* v7.30.2: ook page/article/main wrappers die door de veilige JS-detectie
   exclusief aan het dashboard zijn gekoppeld, verliezen hun theme-card styling. */
html body main.rdg-grid-host-clean,
html body article.rdg-grid-host-clean,
html body section.rdg-grid-host-clean,
html body .entry-content.rdg-grid-host-clean,
html body .site-main.rdg-grid-host-clean,
html body .post.rdg-grid-host-clean,
html body .page.rdg-grid-host-clean{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* =========================================================
 * v7.30.3 — hoofdsite fallback voor theme-kaarten rondom het grid.
 * Alleen de visuele kaartlaag verdwijnt; spacing blijft intact.
 * ========================================================= */
html body .rdg-grid-chrome-clean,
html body .rdg-grid-chrome-clean:hover,
html body .rdg-grid-chrome-clean:focus,
html body .rdg-grid-chrome-clean:active{
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
html body .rdg-grid-chrome-clean::before,
html body .rdg-grid-chrome-clean::after{
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* CSS-only vangnet voor veelgebruikte WordPress/theme wrappers. Dit is bewust
   beperkt tot wrappers die direct of via één inhoudslaag het dashboard bevatten. */
html body .entry-content:has(> .rdg-dashboard-stage),
html body .wp-block-post-content:has(> .rdg-dashboard-stage),
html body .wp-block-shortcode:has(> .rdg-dashboard-stage),
html body .wp-block-group__inner-container:has(> .rdg-dashboard-stage),
html body .entry-content > *:has(> .rdg-dashboard-stage),
html body .wp-block-post-content > *:has(> .rdg-dashboard-stage){
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}


/* =========================================================
 * v7.30.4 — definitieve kaderloze layoutlaag.
 * Op de hoofdsite bleek de zichtbare kaart ook rechtstreeks op de layoutcontainer
 * te kunnen worden gezet door site-specifieke CSS. Voorouder-opruiming ziet zo'n
 * descendant niet. Daarom neutraliseren we ook de daadwerkelijke top-level layouts.
 * De tegels zelf blijven volledig ongemoeid.
 * ========================================================= */
html body .rdg-dashboard-stage > .rovea-gridwelcome-alt,
html body .rdg-dashboard-stage > .rovea-flow-grid,
html body .rdg-dashboard-stage > .rovea-grid,
html body .rdg-dashboard-stage > .rovea-grid232,
html body .rdg-dashboard-stage > .rovea-circle-wrap {
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Klassieke/flow/2-3-2 grids hebben zelf geen functionele buitenpadding nodig.
   Dit voorkomt dat oude site-CSS toch een groot leeg paneel rond de tegels maakt. */
html body .rdg-dashboard-stage > .rovea-gridwelcome-alt,
html body .rdg-dashboard-stage > .rovea-flow-grid,
html body .rdg-dashboard-stage > .rovea-grid,
html body .rdg-dashboard-stage > .rovea-grid232 {
  padding:0 !important;
  border-radius:0 !important;
}

html body .rdg-dashboard-stage > .rovea-gridwelcome-alt::before,
html body .rdg-dashboard-stage > .rovea-gridwelcome-alt::after,
html body .rdg-dashboard-stage > .rovea-flow-grid::before,
html body .rdg-dashboard-stage > .rovea-flow-grid::after,
html body .rdg-dashboard-stage > .rovea-grid232::before,
html body .rdg-dashboard-stage > .rovea-grid232::after,
html body .rdg-dashboard-stage > .rovea-circle-wrap::before,
html body .rdg-dashboard-stage > .rovea-circle-wrap::after {
  content:none !important;
  display:none !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}


/* =========================================================
 * v7.30.5 — sitebreed buitenkader verwijderen.
 * Alleen structurele pagina-wrappers verliezen hun kaart/chrome.
 * Spacing en interne componenten blijven behouden.
 * ========================================================= */
html body.rdg-site-borderless-page .rdg-site-shell-clean,
html body.rdg-site-borderless-page .rdg-site-shell-clean:hover,
html body.rdg-site-borderless-page .rdg-site-shell-clean:focus,
html body.rdg-site-borderless-page .rdg-site-shell-clean:active{
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
html body.rdg-site-borderless-page .rdg-site-shell-clean::before,
html body.rdg-site-borderless-page .rdg-site-shell-clean::after{
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* CSS-fallback wanneer theme-JS een wrapper na onze eerste scan opnieuw opmaakt. */
html body.rdg-site-borderless-page main,
html body.rdg-site-borderless-page #main,
html body.rdg-site-borderless-page #primary,
html body.rdg-site-borderless-page .site-main,
html body.rdg-site-borderless-page .content-area,
html body.rdg-site-borderless-page .site-content,
html body.rdg-site-borderless-page article.page,
html body.rdg-site-borderless-page article.type-page,
html body.rdg-site-borderless-page .entry-content,
html body.rdg-site-borderless-page .wp-block-post-content{
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}


/* =========================================================
 * v7.30.6 — ook gewone pagina's, categorieën en archieven kaderloos.
 * De vorige sitewide fallback was door letterlijke \n-tekens in de CSS niet
 * volledig actief en miste bovendien taxonomy/archive wrappers.
 * ========================================================= */
html body.rdg-site-borderless-page .rdg-page-panel-clean,
html body.rdg-site-borderless-page .rdg-page-panel-clean:hover,
html body.rdg-site-borderless-page .rdg-page-panel-clean:focus,
html body.rdg-site-borderless-page .rdg-page-panel-clean:active,
html body.rdg-site-borderless-page .archive-content,
html body.rdg-site-borderless-page .category-content,
html body.rdg-site-borderless-page .taxonomy-content,
html body.rdg-site-borderless-page .term-content,
html body.rdg-site-borderless-page .archive-description,
html body.rdg-site-borderless-page .category-description,
html body.rdg-site-borderless-page .taxonomy-description,
html body.rdg-site-borderless-page .term-description,
html body.rdg-site-borderless-page body.archive article,
html body.rdg-site-borderless-page body.category article{
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
html body.rdg-site-borderless-page .rdg-page-panel-clean::before,
html body.rdg-site-borderless-page .rdg-page-panel-clean::after{
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}


/* =========================================================
 * v7.30.7 — ademruimte tussen websiteheader en dashboardgrid.
 * De sitebrede borderless-opruiming haalt de oude wrapper-padding weg;
 * daarom krijgt alleen het dashboard zelf bewust weer een nette bovenspatie.
 * Dit verandert geen enkele tegel, layout of gewone contentpagina.
 * ========================================================= */
html body .rdg-dashboard-stage{
  margin-top:32px !important;
  margin-right:auto !important;
  margin-bottom:0 !important;
  margin-left:auto !important;
}
@media (max-width:900px){
  html body .rdg-dashboard-stage{ margin-top:24px !important; }
}
@media (max-width:640px){
  html body .rdg-dashboard-stage{ margin-top:18px !important; }
}