/* ==========================================================================
   ForceFlow Docs — custom CSS
   Laatst bijgewerkt: augustus 2026
   Wijzigingen: volledige koppenschaal (h1 t/m h5) met correcte hiërarchie en
   witruimte + Help Scout-paars vervangen door ForceFlow-blauw.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Huisstijl-variabelen — pas hier één keer aan, werkt overal door
   -------------------------------------------------------------------------- */

:root {
  --ff-blue: #338ffa; /* primair, = header + zoekknop */
  --ff-blue-dark: #1a72d8; /* links, hover op knoppen */
  --ff-blue-darker: #0f5aae; /* active / hover op links */
  --ff-blue-soft: #f2f8ff; /* zachte achtergrondvlakken */

  --ff-ink: #1d2b36; /* koppen + bodytekst */
  --ff-ink-soft: #405261; /* secundaire tekst */
  --ff-muted: #556575; /* bijschriften, meta */
  --ff-border: #e5e9ec; /* lijnen en randen */
  --ff-bg-soft: #f9fafa;

  /* Verwijder deze regel als je terug wilt naar de themafont */
  --ff-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Basis / header
   -------------------------------------------------------------------------- */

footer.center p span,
footer p span {
  display: none;
}

a.brand img {
  width: 190px;
}

a[target="_blank"]::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: 2px;
  background-image: url(https://s3.amazonaws.com/helpscout.net/docs/assets/5e9f3f1604286364bc98bd9d/images/63274c0ab0f178684ee3ba4a/file-jRCoCt1xW8.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

#searchBar button {
  background-color: var(--ff-blue);
  border-color: var(--ff-blue);
}

#searchBar button:hover {
  background-color: var(--ff-blue-dark);
  border-color: var(--ff-blue-dark);
}

.image-badge {
  display: inline-block;
  min-width: 18px;
  border-radius: 50%;
  text-align: center;
  font-size: small;
  font-weight: bold;
  background: #f80505;
  color: #fefefe;
}

.icon-bar {
  background: #ffffff !important;
}

.navbar .nav .active a {
  font-weight: 500;
}

.navbar .nav > li > a {
  font-size: 15px;
  padding: 0 20px;
  -webkit-font-smoothing: auto;
}

/* --------------------------------------------------------------------------
   3. Artikel: leesbreedte en bodytekst
   -------------------------------------------------------------------------- */

#fullArticle {
  margin: 0 auto;
  max-width: 720px;
}

#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  font-family: var(--ff-font);
  color: var(--ff-ink);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 1.5em;
}

@media screen and (min-width: 768px) {
  #fullArticle p,
  #fullArticle ul,
  #fullArticle ol,
  #fullArticle li,
  #fullArticle blockquote,
  #fullArticle dd {
    font-size: 17px;
  }
}

#fullArticle li {
  margin-bottom: 0.5em;
}

#fullArticle li:last-child {
  margin-bottom: 0;
}

#fullArticle a {
  color: var(--ff-blue-dark);
}

#fullArticle a:hover,
#fullArticle a:focus {
  color: var(--ff-blue-darker);
}

#fullArticle strong {
  color: #253642;
}

#fullArticle a strong,
#fullArticle strong a {
  color: var(--ff-blue-dark);
}

strong,
b {
  font-weight: 700;
  -webkit-font-smoothing: auto;
}

/* --------------------------------------------------------------------------
   4. Koppen — h1 t/m h5
   Eén doorlopende schaal: elke stap kleiner in grootte én in witruimte.
   Kopregels krijgen ruim marge bóven en weinig eronder, zodat een kop
   optisch bij de tekst hoort die erna komt en niet aan de alinea ervoor plakt.
   -------------------------------------------------------------------------- */

#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
#fullArticle h4,
#fullArticle h5,
#fullArticle h6 {
  font-family: var(--ff-font);
  -webkit-font-smoothing: auto;
  color: var(--ff-ink);
  text-transform: none;
  letter-spacing: -0.01em;
}

/* h1 — artikeltitel */
#fullArticle h1,
#fullArticle h1.title {
  font-size: 30px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.7em;
}

/* h2 — hoofdsecties (meest gebruikt in de ForceFlow-artikelen) */
#fullArticle h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  margin: 2.2em 0 0.6em;
}

/* h3 — subsecties binnen een h2 */
#fullArticle h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  margin: 1.9em 0 0.5em;
}

/* h4 — kleinste inhoudelijke kop.
   In oudere artikelen is h4 vaak de énige tussenkop, daarom blijft hij
   duidelijk groter dan de bodytekst. */
#fullArticle h4 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  margin: 1.7em 0 0.45em;
}

/* h5 — label boven een klein blokje */
#fullArticle h5 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ff-ink-soft);
  margin: 1.4em 0 0.4em;
}

@media screen and (min-width: 768px) {
  #fullArticle h1,
  #fullArticle h1.title {
    font-size: 36px;
    line-height: 44px;
  }

  #fullArticle h2 {
    font-size: 28px;
    line-height: 38px;
  }

  #fullArticle h3 {
    font-size: 23px;
    line-height: 32px;
  }

  #fullArticle h4 {
    font-size: 20px;
    line-height: 29px;
  }

  #fullArticle h5 {
    font-size: 17px;
    line-height: 25px;
  }
}

/* Geen dubbele witruimte bovenaan een artikel of blok */
#fullArticle h1:first-child,
#fullArticle h2:first-child,
#fullArticle h3:first-child,
#fullArticle h4:first-child,
#fullArticle h5:first-child {
  margin-top: 0;
}

/* Kop direct na een kop: kleinere tussenruimte */
#fullArticle h1 + h2,
#fullArticle h2 + h3,
#fullArticle h3 + h4,
#fullArticle h4 + h5 {
  margin-top: 0.9em;
}

/* Tekst, lijsten en afbeeldingen sluiten strak aan onder een kop */
#fullArticle h1 + p,
#fullArticle h2 + p,
#fullArticle h3 + p,
#fullArticle h4 + p,
#fullArticle h5 + p,
#fullArticle h2 + ul,
#fullArticle h3 + ul,
#fullArticle h4 + ul,
#fullArticle h2 + ol,
#fullArticle h3 + ol,
#fullArticle h4 + ol {
  margin-top: 0;
}

/* Kop nooit alleen onderaan de pagina laten staan */
#fullArticle h2,
#fullArticle h3,
#fullArticle h4,
#fullArticle h5 {
  break-after: avoid;
  page-break-after: avoid;
}

/* --------------------------------------------------------------------------
   5. Categorie- en overzichtspagina's
   -------------------------------------------------------------------------- */

.contentWrapper p.descrip {
  color: var(--ff-muted);
  font-size: 18px;
  margin-bottom: 25px;
  margin-top: 0;
  line-height: 1.6;
}

@media screen and (min-width: 1000px) {
  .contentWrapper p.descrip {
    margin-bottom: 0;
    max-width: 30rem;
  }
}

.articleList {
  box-sizing: border-box;
  margin-top: 34px;
  padding-top: 25px;
  position: relative;
}

.articleList:before {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 4px;
  left: 0;
  background: var(--ff-blue);
}

.articleList li a:hover span {
  color: var(--ff-blue-darker);
  text-decoration: none;
}

.articleList li a i {
  display: none;
}

.articleList li {
  margin: 1em 0;
  padding-left: 0;
  font-size: 18px;
}

@media screen and (max-width: 768px) {
  .articleList li {
    font-size: 16px;
  }
}

.articleList a {
  margin-left: 0;
}

/* --------------------------------------------------------------------------
   6. Inhoudsopgave en definitielijsten binnen een artikel
   -------------------------------------------------------------------------- */

#fullArticle .index-list {
  background: var(--ff-blue-soft);
  border-left: 4px solid var(--ff-blue);
  margin: 2.5em 0;
  padding: 15px 0px;
}

#fullArticle .index-list:before,
#fullArticle .index-list:after {
  display: table;
  content: "";
  line-height: 0;
}

#fullArticle .index-list::after {
  clear: both;
}

#fullArticle .index-list ul {
  list-style: none;
  margin: 0.7em 25px 0em 0;
  float: left;
  width: 100%;
}

#fullArticle .index-list li {
  padding-left: 25px;
}

@media screen and (min-width: 1000px) {
  #fullArticle .index-list li {
    float: left;
    width: 45%;
  }
}

#fullArticle .index-list h4 {
  text-transform: uppercase;
  margin: 0;
  padding: 8px 26px 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.7px;
  color: var(--ff-muted);
}

#fullArticle dt {
  padding: 0;
  width: 26px;
  background: var(--ff-blue);
  color: #ffffff;
  height: 26px;
  line-height: 26px;
  font-weight: 500;
  font-size: 14px;
}

#fullArticle dd {
  margin-left: 40px;
}

/* --------------------------------------------------------------------------
   7. Zijbalk / categoriemenu
   -------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
  #sidebar {
    margin-top: 40px;
  }
}

#sidebar h3 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  text-transform: none;
  color: var(--ff-ink);
}

#sidebar .nav-list {
  margin: 20px 0;
}

#sidebar .nav-list a {
  font-size: 15px;
  color: var(--ff-ink-soft);
  padding: 8px 15px 8px 0;
}

#sidebar .nav-list a:hover {
  color: var(--ff-blue-dark);
}

#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
  font-weight: 500;
  color: #253642;
}

.icon-arrow:before {
  color: #253642;
}

#searchBar.sm button {
  width: 40px;
  top: 1px;
  right: 0;
  background: url("https://d2x2losda9vsjs.cloudfront.net/docs/assets/2019/icon-search.svg")
    center center no-repeat;
}

#searchBar.sm button:hover {
  background: url("https://d2x2losda9vsjs.cloudfront.net/docs/assets/2019/icon-search.svg")
    center center no-repeat;
}

#sidebar form .search-query {
  border: 1px solid #a5b2bd;
  border-radius: 5px;
  height: 42px;
  font-size: 14px;
}

#categoryHead .sort select {
  font-size: 12px;
  height: 28px;
}

#categoryHead .sort {
  position: relative;
  top: 0;
}

@media screen and (min-width: 1000px) {
  #categoryHead .sort {
    position: absolute;
    right: 0;
    top: 8px;
  }
}

/* --------------------------------------------------------------------------
   8. Artikel: hoofdcontainer en losse elementen
   -------------------------------------------------------------------------- */

#main-content {
  box-sizing: border-box;
  background: none;
}

@media screen and (max-width: 768px) {
  #main-content {
    margin: 20px 0 0;
  }
}

#fullArticle .callout-yellow,
#fullArticle .callout-blue,
#fullArticle .callout-red,
#fullArticle .callout-green,
#fullArticle .callout,
#fullArticle .private-note {
  border-left-width: 4px;
}

#fullArticle .callout-blue {
  background: var(--ff-blue-soft);
  border-color: var(--ff-blue);
  margin: 2em 0;
}

#fullArticle .callout-yellow,
#fullArticle .private-note {
  background: #fff6e3;
  border-color: #ffc555;
  margin: 2em 0 4em;
}

#fullArticle .callout-yellow.dashed {
  border-left-width: 1px;
}

#fullArticle .private-note {
  background: #fff6e3
    url("https://d2x2losda9vsjs.cloudfront.net/docs/assets/2019/icon--lock.svg")
    no-repeat top 18px right 18px;
  background-repeat: no-repeat;
  padding: 20px 24px;
}

/* Koppen binnen callouts blijven compact */
#fullArticle .callout > h2,
#fullArticle .callout > h3,
#fullArticle .callout > h4,
#fullArticle .callout-blue > h3,
#fullArticle .callout-blue > h4,
#fullArticle .callout-yellow > h3,
#fullArticle .callout-yellow > h4,
#fullArticle .callout-red > h4,
#fullArticle .callout-green > h4,
#fullArticle .private-note > h3,
#fullArticle .private-note > h4 {
  margin-top: 0;
  margin-bottom: 0.4em;
}

.articleFoot p,
.articleFoot time {
  font-family: var(--ff-font);
  font-style: normal;
  color: var(--ff-muted);
}

.articleFoot i {
  color: #c5ced6;
}

#sbContact {
  color: var(--ff-muted);
  border-bottom: 1px dotted #d5dce1;
}

#fullArticle .admin-edit {
  background-color: #fff;
  border: 1px solid #c2cbd3;
  box-shadow: none;
  color: var(--ff-blue-dark);
  font-size: 13px;
  height: 24px;
  line-height: 26px;
  margin-bottom: 30px;
  margin-top: -20px;
  width: auto;
  transition: all 0.2s ease-in-out;
}

#fullArticle .admin-edit:hover {
  border-color: var(--ff-blue);
}

.articleRatings {
  margin: 3em 0 4em;
  color: var(--ff-muted);
  background: #ffffff;
  box-shadow: none;
  border-radius: 5px;
  border: 2px solid var(--ff-border);
}

.icon-search::before {
  display: none;
}

.icon-article-doc {
  display: none;
}

.clean-image {
  border-style: none !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   9. Zoekresultaten
   -------------------------------------------------------------------------- */

#serp {
  box-sizing: border-box;
}

#serp h1 strong {
  color: var(--ff-blue-dark);
}

#serp .articleList > li {
  padding: 0.5em 0 1.5em;
  margin: 1em 0 0 0;
  border-bottom: 1px solid var(--ff-border);
}

#serp .articleList > li a {
  font-weight: 500;
  margin-bottom: 5px;
}

#serp .articleList > li p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#serp-dd {
  border-radius: 5px;
  border: none;
  top: 85px;
}

#serp-dd .result a {
  padding: 12px 15px;
}

#serp-dd .result > li.active {
  background: #f1f3f5;
}

#serp-dd .result > li {
  position: relative;
}

#serp-dd .result > li.active a {
  color: var(--ff-blue-darker) !important;
}

#serp-dd.sb {
  top: 45px;
  width: 375px;
}

#serp .articlesFound,
#serp .nada {
  color: #748494;
}

#serp-dd .result > li.private a {
  color: #748494;
}

#serp-dd .icon-private-w:before {
  display: none;
}

#serp-dd .icon-private-w {
  background-image: url("https://d2x2losda9vsjs.cloudfront.net/docs/assets/2019/icon--lock.svg");
  width: 24px;
  height: 24px;
  background-size: cover;
  display: inline-block;
  position: absolute;
  top: 9px;
}

/* --------------------------------------------------------------------------
   10. Contactformulier (modal en pagina)
   -------------------------------------------------------------------------- */

#contactModal {
  border: 0;
  width: 600px;
  margin-left: -300px;
  top: 8%;
}

#contactModal h2 {
  color: var(--ff-ink);
  font-family: var(--ff-font);
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.02em;
  border: 0;
  padding: 40px 0 10px 60px;
}

#contactModal .control-label {
  float: none;
  display: block;
  color: var(--ff-muted);
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 5px;
  padding: 0;
  text-align: left;
  width: 100%;
}

#contactModal .controls {
  margin: 0;
}

#contactModal input[type="text"],
#contactModal input[type="email"],
#contactModal textarea {
  box-sizing: border-box;
  min-height: 42px;
  width: 100%;
}

#contactModal .modal-body {
  padding: 15px 60px 40px;
}

#contactModal #md-message {
  padding: 14px;
  height: 70px;
  width: 100%;
}

#contactModal .form-actions {
  padding: 0;
}

#contactModal input[type="submit"].btn {
  width: 100%;
  background: var(--ff-blue);
  border-color: var(--ff-blue);
  height: 52px;
  transition: all 0.2s ease-in-out;
}

#contactModal input[type="submit"].btn:hover,
#contactModal input[type="submit"].btn:focus,
#contactModal input[type="submit"].btn:active {
  background: var(--ff-blue-dark);
  border-color: var(--ff-blue-dark);
  color: #fff;
}

#contactModal .icon-close:before {
  display: none;
}

#contactModal .icon-close {
  background-image: url("https://d2x2losda9vsjs.cloudfront.net/docs/assets/2019/icon--cross.svg");
  width: 24px;
  height: 24px;
  background-size: cover;
  display: inline-block;
  opacity: 0.7;
  transition: opacity 0.2s;
}

#contactModal #closeBtn {
  right: 14px;
}

#contactModal .icon-close:hover {
  opacity: 1;
}

#file-upload:focus {
  border: none !important;
  box-shadow: none !important;
}

#contactForm input,
#contactForm textarea {
  min-height: 42px;
  box-sizing: border-box;
  width: 100%;
}

#contactForm textarea {
  padding: 14px;
}

#contactForm input.btn {
  width: auto;
  height: 52px;
  min-width: 150px;
  background: var(--ff-blue);
  border-color: var(--ff-blue);
  transition: all 0.2s ease-in-out;
}

#contactForm input.btn:hover {
  background: var(--ff-blue-dark);
  border-color: var(--ff-blue-dark);
  color: #fff;
}

#contactForm input.btn:focus,
#contactForm input.btn:active {
  background: var(--ff-blue-darker);
  border: 1px solid var(--ff-blue-darker);
  color: #fff;
}

#contactForm .control-group,
#contactModal .control-group,
.abuse .control-group {
  margin-bottom: 20px;
}

.modal-backdrop {
  background: #10243a;
}

.modal-backdrop.in {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   11. Meldingen
   -------------------------------------------------------------------------- */

#contentArea > .appMessage {
  border-radius: 4px;
  color: #268c55;
  top: -25px;
  background: #e3fbee;
  border: 1px solid #56c288;
  font-size: 15px !important;
  width: 390px;
  margin: 0 auto;
  padding: 12px 30px;
  position: relative;
}

#contentArea > .appMessage em {
  background: none;
  color: #268c55;
  font-size: 16px;
  text-transform: none;
  font-weight: 500;
  margin-right: 0;
  padding-left: 22px;
  position: relative;
}

#contentArea > .appMessage em:before {
  content: "";
  background-image: url("https://d2x2losda9vsjs.cloudfront.net/docs/assets/2019/icon--check.svg");
  width: 24px;
  height: 24px;
  position: absolute;
  left: -4px;
  top: -2px;
}

.appMessage {
  background: #d6edff;
  color: var(--ff-blue-darker);
  font-size: 14px !important;
  padding: 12px 30px;
}

@media screen and (min-width: 768px) and (max-width: 999px) {
  .appMessage {
    padding: 12px 55px;
  }
}

@media screen and (min-width: 1000px) {
  .appMessage {
    padding: 12px 90px;
  }
}

.appMessage em {
  background: var(--ff-blue);
  font-weight: 500;
  line-height: 1.1;
}

/* --------------------------------------------------------------------------
   12. Printen en foutpagina's
   -------------------------------------------------------------------------- */

.icon-print:before {
  display: none;
}

.icon-print {
  background-image: url("https://d2x2losda9vsjs.cloudfront.net/docs/assets/2019/icon--print.svg");
  width: 24px;
  height: 24px;
  background-size: cover;
  display: inline-block;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.icon-print:hover {
  opacity: 1;
}

#errorContainer .icon-error {
  color: #ffc555;
  font-size: 36px;
}

#errorContainer p {
  color: var(--ff-muted);
}

/* --------------------------------------------------------------------------
   13. Reset voor de Docs Style Guide-demo
   https://docs.helpscout.net/article/40-docs-style-guide
   -------------------------------------------------------------------------- */

#fullArticle .demo-styles * {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#fullArticle .demo-styles pre {
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  padding: 8.5px;
  margin: 0 0 9px;
  font-size: 11px;
  line-height: 18px;
}

#fullArticle .demo-styles p,
#fullArticle .demo-styles ul,
#fullArticle .demo-styles ol,
#fullArticle .demo-styles li,
#fullArticle .demo-styles div,
#fullArticle .demo-styles blockquote,
#fullArticle .demo-styles dd,
#fullArticle .demo-styles table {
  font-size: 14px;
  color: #585858;
  line-height: 1.55em;
  margin-bottom: 1.5em;
}

#fullArticle .demo-styles blockquote {
  padding: 0 0 0 15px;
  margin: 0 0 18px;
  border-left: 5px solid #eee;
}

#fullArticle .demo-styles h1,
#fullArticle .demo-styles h2,
#fullArticle .demo-styles h3,
#fullArticle .demo-styles h4,
#fullArticle .demo-styles h5 {
  margin: 9px 0;
  font-family: inherit;
  line-height: 18px;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ff-ink);
}

#fullArticle .demo-styles h1,
#fullArticle .demo-styles h2,
#fullArticle .demo-styles h3 {
  line-height: 36px;
}

#fullArticle .demo-styles h1 {
  font-size: 33px;
}

#fullArticle .demo-styles h2 {
  font-size: 27px;
}

#fullArticle .demo-styles h3 {
  font-size: 21px;
}

#fullArticle .demo-styles h4 {
  font-size: 15px;
}

#fullArticle .demo-styles h5 {
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   14. HubSpot cookiemelding
   -------------------------------------------------------------------------- */

body div#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom {
  background: rgba(249, 250, 250, 0.95);
  border: 0;
  bottom: 0 !important;
  font-family: var(--ff-font);
  left: 0;
  line-height: 18px;
  max-width: 100%;
  padding: 20px;
  position: fixed;
  text-align: left;
  text-shadow: none !important;
  top: auto;
  z-index: 100000000 !important;
}

@media screen and (min-width: 768px) {
  body div#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom {
    border-radius: 6px;
    bottom: 15px !important;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    left: 50%;
    max-width: 480px;
    transform: translate3d(-50%, 0, 0);
  }
}

body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
  background: transparent !important;
  -webkit-font-smoothing: antialiased;
  padding: 0 !important;
}

body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p {
  font-size: 14.5px !important;
  line-height: 21px !important;
  margin-bottom: 0 !important;
  padding-right: 90px !important;
}

body
  div#hs-eu-cookie-confirmation
  div#hs-eu-cookie-confirmation-inner
  p:first-child {
  display: none;
}

@media screen and (max-width: 480px) {
  body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p {
    font-size: 14.5px !important;
  }
}

body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a {
  color: var(--ff-blue-dark) !important;
  font-size: 14px !important;
}

body
  div#hs-eu-cookie-confirmation
  div#hs-eu-cookie-confirmation-inner
  a#hs-eu-confirmation-button {
  color: white !important;
  font-weight: 500 !important;
  background: var(--ff-blue) !important;
  border: 0 !important;
  border-radius: 4px !important;
  padding: 7px 16px !important;
  margin: 0 !important;
}

body
  div#hs-eu-cookie-confirmation
  div#hs-eu-cookie-confirmation-inner
  div#hs-en-cookie-confirmation-buttons-area {
  display: inline-block;
  margin: 0 !important;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

body
  div#hs-eu-cookie-confirmation
  div#hs-eu-cookie-confirmation-inner
  div#hs-en-cookie-confirmation-buttons-area
  #hs-eu-confirmation-button {
  margin: 0 !important;
  font-size: 14.5px !important;
}