#outerContainer {
  background-color: #2c2c2c !important; /* Pas de kleur hier aan */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><text x="100" y="120" text-anchor="middle" font-size="60" fill="rgba(224,224,224,0.03)" font-weight="bold" font-family="Arial,sans-serif" transform="rotate(-30 100 120)">SMRA</text></svg>');
  background-repeat: repeat;
}

#toolbarContainer {
  background-color: #febf11 !important;
}

#secondaryToolbarToggle {
  display: none;
}


#cursorToolButtons {
  display: none
}

#viewBookmark {
  display: none
}

#secondaryOpenFile {
  display: none
}

.horizontalToolbarSeparator {
  display: none
}

#editorStamp {
  display: none;
}

#editorFreeText {
  display: none;
}

#editorInk {
  display: none;
}

#editorHighlight {
  display: none;
}

#toolbarSidebar {
  display: none;
}

#sidebarContent {
  position: static;
}

#thumbnailView {
  overflow-x: hidden;
}

/* ---------------------------------------------------
   PDF.js custom toolbar buttons - navigatie
   Styling in jouw kleuren: #febf11 (geel) en #394a9c (blauw)
--------------------------------------------------- */

/* standaard icoontjes weghalen */
#firstPage.toolbarButton::before,
#lastPage.toolbarButton::before,
#previous.toolbarButton::before,
#next.toolbarButton::before {
  background: none !important;
  content: none !important;
  width: auto !important;
  height: auto !important;
}

/* eigen labels via content */
#firstPage::after {
  content: "⏮";
}
#previous::after {
  content: "◀";
}
#next::after {
  content: "▶";
}
#lastPage::after {
  content: "⏭";
}

/* basisstijl */
#firstPage, #previous, #next, #lastPage {
  min-width: 40px;
  padding: 4px 8px;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  color: #394a9c;
  background: transparent; /* geen achtergrond standaard */
  transition: background 0.2s, color 0.2s;
}

/* hover */
#firstPage:hover, #previous:hover, #next:hover, #lastPage:hover {
  background: #febf11;   /* geel bij hover */
  color: #000;           /* zwarte tekst voor contrast */
  cursor: pointer;
}

/* active (tijdens klik) */
#firstPage:active, #previous:active, #next:active, #lastPage:active {
  background: #394a9c;   /* blauw bij klik */
  color: #fff;           /* witte tekst */
}



/* Verberg ALLE mogelijke duplicaat print/download knoppen */
#secondaryPrint,
#secondaryDownload,
#secondaryToolbar #printButton,
#secondaryToolbar #downloadButton,
.visibleMediumView #secondaryPrint,
.visibleMediumView #secondaryDownload {
  display: none !important;
}

/* Ook verberg het hele visibleMediumView gedeelte */
.visibleMediumView {
  display: none !important;
}



/* Custom button - geen absolute positioning, gewoon in de flow */
#backToSiteButton {
  background: #394a9c !important;
  color: white !important;
  border: none !important;
  padding: 8px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  min-width: 40px !important;
  height: auto !important;
  flex: none !important;
}

#backToSiteButton:hover {
  background: #febf11 !important;
  color: #000 !important;
}

/* Zorg dat de knop zichtbaar is op kleine schermen */
@media all and (max-width: 750px) {
  #backToSiteButton {
    display: inline-block !important;
  }
}