/*
 * ZewaTec Automation – Entwurf: Look & Feel der Muttergesellschaft Au2mate (au2mate.com)
 * Wird als letztes Stylesheet in jede Seite eingebunden (tools/build_theme.py) und überschreibt das Astra-Design.
 *
 * Au2mate-Werte (aus au2mate.com/wp-content/themes/yootheme/css/theme.1.css, Stand 10/2026):
 *   Schrift Quicksand · Primär #00b1cd · Sekundär #585754 · Header #666 · Text #666 · Muted #f9f9f9 · Akzent #f6410f
 *   Überschriften: Großbuchstaben, letter-spacing 4px · Menü: Großbuchstaben 13px, letter-spacing 1px · Buttons: eckig, 14px, letter-spacing 3px
 */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('/theme/fonts/quicksand-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('/theme/fonts/quicksand-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --a2m-primary: #00b1cd;
  --a2m-primary-dark: #009bb4;
  --a2m-secondary: #585754;
  --a2m-header: #666666;
  --a2m-text: #666666;
  --a2m-muted: #f9f9f9;
  --a2m-accent: #f6410f;

  /* Astra-Farbpalette auf Au2mate umstellen – betrifft alle Abschnitte, Buttons und Texte */
  --ast-global-color-0: var(--a2m-secondary) !important; /* bisher Navy: dunkle Abschnitte */
  --ast-global-color-1: var(--a2m-primary) !important;   /* bisher Blau: Links, Akzente */
  --ast-global-color-2: #4a4a48 !important;              /* Überschriften */
  --ast-global-color-3: var(--a2m-text) !important;      /* Fließtext */
  --ast-global-color-4: var(--a2m-muted) !important;     /* helle Abschnitte */
  --ast-global-color-6: #4a4a48 !important;
  --ast-global-color-8: #4a4a48 !important;
}

/* ---------- Grundtypografie ---------- */
html, body, button, input, select, textarea,
.ast-container, .entry-content, .site-footer {
  font-family: 'Quicksand', sans-serif !important;
}
body {
  font-weight: 300 !important;
  font-size: 17px;
  line-height: 1.5;
  color: var(--a2m-text);
}
p, li { font-weight: 300; }
strong, b { font-weight: 600; }

h1, h2, h3, h4, h5, h6,
.entry-content :where(h1, h2, h3, h4),
.wp-block-heading {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 4px;
  line-height: 1.2 !important;
}
h3, h4, h5, h6, .entry-content h3, .entry-content h4 { letter-spacing: 2px; }
.wp-block-post-title, .wp-block-post-title a { letter-spacing: 1px !important; }

a { color: var(--a2m-primary); }
a:hover { color: var(--a2m-primary-dark); }

/* ---------- Kopfzeile wie au2mate: grauer Balken, weißes Logo, Menü in Großbuchstaben ---------- */
#masthead,
#masthead .main-header-bar,
#masthead .ast-primary-header-bar,
.ast-theme-transparent-header #masthead .main-header-bar,
.ast-theme-transparent-header #masthead .ast-primary-header-bar {
  background: var(--a2m-header) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.ast-theme-transparent-header #masthead { position: relative !important; }
#masthead .site-primary-header-wrap { min-height: 100px; }
#masthead .site-logo-img img,
#masthead .custom-logo { filter: brightness(0) invert(1); }

/* Desktop-Kopfzeile (ab 922 px) – auf dem Handy gilt das Mobilmenü weiter unten */
@media (min-width: 922px) {
  #masthead .main-header-menu > .menu-item > .menu-link {
    color: rgba(255, 255, 255, .7) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 12px !important;
    min-height: 100px;
    position: relative;
    transition: color .1s ease-in-out;
  }
  #masthead .main-header-menu > .menu-item > .menu-link:hover,
  #masthead .main-header-menu > .current-menu-item > .menu-link,
  #masthead .main-header-menu > .current-menu-ancestor > .menu-link {
    color: #fff !important;
    background: transparent !important;
  }
  /* Aktiver Menüpunkt: türkiser Balken an der Unterkante (wie au2mate) */
  #masthead .main-header-menu > .current-menu-item > .menu-link::after,
  #masthead .main-header-menu > .current-menu-ancestor:not(.pll-parent-menu-item) > .menu-link::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 4px;
    background: var(--a2m-primary);
  }
  #masthead .main-header-menu .ast-icon svg,
  #masthead .main-header-menu .dropdown-menu-toggle { fill: rgba(255, 255, 255, .7) !important; color: rgba(255, 255, 255, .7) !important; }

  /* Untermenüs und Sprachauswahl: hellgraues Dropdown, wie au2mate */
  #masthead .main-header-menu .sub-menu {
    background: #f0f0f0 !important;
    border: 0 !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .15) !important;
    padding: 10px 0 !important;
    width: 220px;
  }
  #masthead .main-header-menu .sub-menu .menu-link {
    color: var(--a2m-text) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 20px !important;
    background: transparent !important;
  }
  #masthead .main-header-menu .sub-menu .menu-link:hover,
  #masthead .main-header-menu .sub-menu .current-menu-item > .menu-link { color: var(--a2m-primary) !important; }
  /* Sprachauswahl: nur Flaggen, schmal – Aufbau wie bei au2mate (Polylang-Flaggenmenü) */
  #masthead .pll-parent-menu-item .sub-menu { width: auto; min-width: 0; }
  #masthead .pll-parent-menu-item .sub-menu .menu-link { padding: 8px 18px !important; }
  #masthead .lang-item img { width: 16px !important; height: 11px !important; }
}

/* Mobilmenü (bis 921 px): hellgrau mit dunkler Schrift, kompakte Zeilen */
@media (max-width: 921px) {
  .ast-mobile-header-wrap .main-header-menu .menu-link,
  .ast-mobile-header-wrap .main-header-menu .sub-menu .menu-link {
    color: #4a4a48 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: transparent !important;
  }
  .ast-mobile-header-wrap .main-header-menu .sub-menu .menu-link { padding-left: 36px !important; font-size: 13px !important; }
  .ast-mobile-header-wrap .main-header-menu .current-menu-item > .menu-link,
  .ast-mobile-header-wrap .main-header-menu .menu-link:hover { color: var(--a2m-primary) !important; }
  .ast-mobile-header-wrap .main-header-menu .menu-link::after { content: none !important; }
  .ast-mobile-header-wrap .main-header-menu .ast-menu-toggle { color: #4a4a48 !important; border: 0 !important; }
  .ast-mobile-header-wrap .main-header-menu .ast-menu-toggle svg { fill: #4a4a48 !important; }
  .ast-mobile-header-wrap .main-header-menu .menu-item { border-bottom: 1px solid #e2e2e2 !important; }
  .ast-mobile-header-wrap .main-header-menu .sub-menu .menu-item { border-bottom: 0 !important; }
  .ast-mobile-header-wrap .pll-parent-menu-item .sub-menu .menu-link { padding: 10px 36px !important; }
}
.ast-mobile-header-wrap .ast-primary-header-bar,
.ast-header-break-point #masthead .main-header-bar { background: var(--a2m-header) !important; }
.ast-mobile-header-wrap .menu-toggle .ast-mobile-svg { fill: #fff !important; }
.ast-mobile-header-wrap .main-header-menu,
.ast-mobile-header-wrap .main-header-menu .sub-menu { background: #f0f0f0 !important; }
.ast-mobile-header-wrap .main-header-menu .menu-link {
  color: var(--a2m-text) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px !important;
  border-color: #e2e2e2 !important;
}

/* ---------- Hero-Bereiche: türkise Box wie auf au2mate.com ---------- */
.wp-block-cover .wp-block-cover__background { opacity: .25 !important; background: #fff !important; }
.wp-block-cover .wp-block-cover__inner-container {
  background: rgba(0, 177, 205, .88);
  max-width: 640px !important;
  margin: 0 auto 0 6vw !important;
  padding: 50px 50px 46px !important;
  text-align: left !important;
}
.wp-block-cover .wp-block-cover__inner-container :is(h1, h2, p) { color: #fff !important; text-align: left !important; }
.wp-block-cover .wp-block-cover__inner-container h1 {
  font-size: clamp(26px, 3vw, 36px) !important;
  letter-spacing: 2px;
  line-height: 1.25 !important;
}
/* Kleine Kopfzeile mit Linie, wie „AU2MATE ———“ */
.wp-block-cover .wp-block-cover__inner-container::before {
  content: 'ZewaTec Automation';
  display: block;
  width: max-content;
  max-width: 100%;
  padding-right: 166px;
  margin-bottom: 26px;
  background: linear-gradient(#fff, #fff) no-repeat right center / 150px 1px;
  color: #fff;
  font-size: 22px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
}
@media (max-width: 600px) {
  .wp-block-cover .wp-block-cover__inner-container { margin: 0 16px !important; padding: 30px 24px !important; }
  .wp-block-cover .wp-block-cover__inner-container::before { padding-right: 0; background: none; font-size: 16px; }
}

/* ---------- Buttons: eckig, Großbuchstaben, Türkis ---------- */
.wp-block-button__link,
.wp-element-button,
.ast-button,
button[type='submit'],
.wpforms-form button[type='submit'],
.wpforms-container .wpforms-form .wpforms-submit {
  font-family: 'Quicksand', sans-serif !important;
  background: var(--a2m-primary) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 43px !important;
  padding: 0 24px !important;
  box-shadow: none !important;
  transition: background-color .1s ease-in-out;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.wpforms-form button[type='submit']:hover { background: var(--a2m-primary-dark) !important; color: #fff !important; }

/* ---------- Abschnitte ---------- */
.has-ast-global-color-4-background-color { background-color: var(--a2m-muted) !important; }
.has-ast-global-color-0-background-color { background-color: var(--a2m-secondary) !important; }

/* ---------- Formulare ---------- */
.wpforms-form input[type='text'],
.wpforms-form input[type='email'],
.wpforms-form textarea {
  border-radius: 0 !important;
  border-color: #e5e5e5 !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 400 !important;
}
.wpforms-form input:focus,
.wpforms-form textarea:focus { border-color: var(--a2m-primary) !important; box-shadow: none !important; }
.wpforms-confirmation-container-full { background: #e6f7fa !important; border-color: var(--a2m-primary) !important; }

/* ---------- Footer: dunkelgrau wie Au2mate-Sekundärfarbe ---------- */
.site-footer,
.site-footer .site-below-footer-wrap,
.site-footer .site-primary-footer-wrap,
.site-footer .site-above-footer-wrap {
  background: var(--a2m-secondary) !important;
  color: rgba(255, 255, 255, .8) !important;
}
.site-footer a { color: rgba(255, 255, 255, .8) !important; }
.site-footer a:hover { color: #fff !important; }
.site-footer :is(p, li, h1, h2, h3, h4, strong) { color: rgba(255, 255, 255, .85) !important; }

/* ---------- Korrekturen nach erstem Screenshot ---------- */
/* Die Kopfzeile ist fixiert (bleibt beim Scrollen stehen) und liegt über dem Hero – Inhalte deshalb um ihre Höhe nach unten schieben */
:root { --a2m-header-h: 100px; }
.wp-block-cover {
  padding-top: calc(var(--a2m-header-h) + 50px) !important;
  padding-bottom: 50px !important;
  align-items: center !important;
}
.wp-block-cover.homepage-cover { min-height: calc(min(78vh, 720px) + var(--a2m-header-h)) !important; }
.wp-block-cover:not(.homepage-cover) { min-height: calc(320px + var(--a2m-header-h)) !important; }
.wp-block-cover:not(.homepage-cover) .wp-block-cover__inner-container { padding: 40px 50px !important; }
/* Mobil ist die fixierte Kopfzeile niedriger */
@media (max-width: 921px) { :root { --a2m-header-h: 106px; } }

/* Footer-Logo hell auf dunklem Grund */
.site-footer img { filter: brightness(0) invert(1); opacity: .9; }

/* Zeitstrahl „Über uns“: Punkte in Au2mate-Türkis */
.timeline .timeline-point { background-color: var(--a2m-primary) !important; }

/* ---------- Kopfzeile aufgeräumt wie au2mate.com: 100 px hoch, kompaktes Logo, keine Dropdown-Pfeile ---------- */
@media (min-width: 922px) {
  #masthead .site-primary-header-wrap,
  #masthead .ast-primary-header-bar .site-primary-header-wrap,
  #masthead .ast-builder-grid-row {
    min-height: 100px !important;
    height: 100px;
  }
  #masthead .site-primary-header-wrap.ast-container {
    max-width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  #masthead .main-header-menu > .menu-item > .menu-link {
    min-height: 100px !important;
    height: 100px;
    display: flex;
    align-items: center;
    padding: 0 12px !important;
  }
  /* Pfeile weg – Untermenüs öffnen beim Überfahren */
  #masthead .main-header-menu .ast-icon,
  #masthead .main-header-menu .dropdown-menu-toggle,
  #masthead .main-header-menu .ast-header-navigation-arrow { display: none !important; }
  #masthead .main-header-menu .menu-item-has-children > .menu-link { padding-right: 12px !important; }
  /* Untermenü bündig an der Unterkante der Kopfzeile */
  #masthead .main-header-menu > .menu-item > .sub-menu { top: 100px !important; margin-top: 0 !important; }
  /* Flagge wie bei au2mate: kleines Symbol ganz rechts */
  #masthead .pll-parent-menu-item > .menu-link { padding-left: 16px !important; padding-right: 0 !important; }
}


/* ---------- Untermenü exakt wie au2mate.com (uk-navbar-dropdown): #f0f0f0, 300 px, 20 px Innenabstand, Einträge 17 px / 300 ---------- */
@media (min-width: 922px) {
  #masthead .main-header-menu > .menu-item:not(.pll-parent-menu-item) > .sub-menu {
    width: 300px !important;
    padding: 20px !important;
    background: #f0f0f0 !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  #masthead .main-header-menu > .menu-item:not(.pll-parent-menu-item) > .sub-menu .menu-link {
    font-size: 17px !important;
    font-weight: 300 !important;
    letter-spacing: normal !important;
    line-height: 25.5px !important;
    padding: 5px 0 !important;
    color: #666 !important;
  }
  #masthead .main-header-menu .sub-menu .menu-link:hover,
  #masthead .main-header-menu .sub-menu .current-menu-item > .menu-link { color: var(--a2m-primary) !important; }
  #masthead .main-header-menu .sub-menu .menu-item { border: 0 !important; }
  /* Hover im Hauptmenü wie au2mate: Türkis; aktiver Punkt weiß mit Balken */
  #masthead .main-header-menu > .menu-item > .menu-link:hover { color: var(--a2m-primary) !important; }
  #masthead .main-header-menu > .current-menu-item > .menu-link:hover,
  #masthead .main-header-menu > .current-menu-ancestor > .menu-link:hover { color: #fff !important; }
}
@media (min-width: 922px) {
  #masthead .main-header-menu > .menu-item:not(.pll-parent-menu-item) > .sub-menu .menu-link { text-transform: uppercase; }
  /* Türkiser Balken auch beim Überfahren und solange das Untermenü offen ist */
  #masthead .main-header-menu > .menu-item:not(.pll-parent-menu-item):hover > .menu-link::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 4px;
    background: var(--a2m-primary);
  }
  #masthead .main-header-menu > .menu-item-has-children:not(.pll-parent-menu-item):hover > .menu-link { color: var(--a2m-primary) !important; }
}

/* Kopfzeile samt Untermenüs über dem Hero-Bildbereich (sonst liegt dessen Weißschleier über dem Dropdown) */
#masthead,
#masthead .main-header-bar-wrap { z-index: 1000 !important; }
@media (min-width: 922px) {
  #masthead .main-header-menu > .menu-item > .sub-menu .current-menu-item > .menu-link,
  #masthead .main-header-menu > .menu-item > .sub-menu .menu-link:hover { color: var(--a2m-primary) !important; }
}

/* Lange Komposita (Dänisch/Norwegisch/Schwedisch/Deutsch) im Hero sauber trennen statt mitten im Wort umbrechen */
.wp-block-cover .wp-block-cover__inner-container h1 {
  font-size: clamp(24px, 2.6vw, 34px) !important;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Sprachmenü wie au2mate: schmales hellgraues Feld mit Flaggen untereinander */
@media (min-width: 922px) {
  #masthead .pll-parent-menu-item > .sub-menu {
    width: 56px !important;
    min-width: 56px !important;
    padding: 10px 0 !important;
    background: #f0f0f0 !important;
    left: auto !important;
    right: -12px !important;
    box-shadow: none !important;
  }
  #masthead .pll-parent-menu-item > .sub-menu .menu-link {
    justify-content: center;
    padding: 9px 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
}

/* ---------- Aufteilung wie au2mate: Inhalt der Kopfzeile max. 1600 px breit und zentriert (uk-container-xlarge), 40 px Rand ---------- */
@media (min-width: 922px) {
  #masthead .site-primary-header-wrap.ast-container,
  #masthead .site-primary-header-wrap {
    max-width: 1680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box;
  }
  #masthead .site-header-primary-section-left,
  #masthead .site-branding,
  #masthead .ast-site-identity { padding-left: 0 !important; margin-left: 0 !important; }
  #masthead .site-header-primary-section-right { padding-right: 0 !important; }

  /* Sprachmenü exakt wie au2mate: 300 px, #f0f0f0, 20 px Innenabstand, alle 6 Flaggen linksbündig untereinander */
  #masthead .pll-parent-menu-item > .sub-menu {
    width: 300px !important;
    min-width: 300px !important;
    padding: 20px !important;
    /* Wie UIkit bei au2mate: linksbündig unter der Flagge, au2mate.js schiebt es bei Platzmangel nach links (15 px Abstand zum Rand) */
    left: var(--a2m-lang-left, 0px) !important;
    right: auto !important;
    top: 100px !important;
  }
  #masthead .pll-parent-menu-item > .sub-menu .menu-item { display: block; }
  #masthead .pll-parent-menu-item > .sub-menu .menu-link {
    justify-content: flex-start !important;
    padding: 5px 0 !important;
    line-height: 11px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  /* Flagge in der Kopfzeile mit türkisem Aktiv-Balken, wie bei au2mate */
  #masthead .main-header-menu > .pll-parent-menu-item:hover > .menu-link::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 4px;
    background: var(--a2m-primary);
  }
  #masthead .main-header-menu > .pll-parent-menu-item > .menu-link { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (min-width: 922px) {
  #masthead .pll-parent-menu-item > .sub-menu .menu-link img { display: block; }
  #masthead .main-header-menu > .pll-parent-menu-item:hover > .menu-link::after { left: 0; right: 0; }
}

/* ---------- Logo: beide Logos aus der Kopfzeile der bisherigen Seite („ZewaTec Automation | Part of Au2mate“), weiß ---------- */
#masthead .site-logo-img img.custom-logo,
.ast-mobile-header-wrap img.custom-logo {
  height: 48px !important;
  max-height: none !important;
  width: auto !important;
  max-width: none !important;
  filter: brightness(0) invert(1);
}
@media (max-width: 921px) { .ast-mobile-header-wrap img.custom-logo { height: 40px !important; } }

/* ---------- Schriftgröße und Abstände des Menüs in denselben Stufen wie au2mate.com (gemessen 10/2026) ---------- */
@media (min-width: 922px) and (max-width: 1239px) {
  #masthead .main-header-menu > .menu-item > .menu-link { font-size: 12px !important; padding: 0 9px !important; }
  #masthead .main-header-menu > .menu-item:not(.pll-parent-menu-item) > .menu-link::after { left: 9px; right: 9px; }
}
@media (min-width: 1240px) and (max-width: 1299px) {
  #masthead .main-header-menu > .menu-item > .menu-link { font-size: 11px !important; }
}
@media (min-width: 1520px) {
  #masthead .main-header-menu > .menu-item > .menu-link { font-size: 16px !important; padding: 0 20px !important; }
  #masthead .main-header-menu > .menu-item:not(.pll-parent-menu-item) > .menu-link::after { left: 20px; right: 20px; }
  #masthead .site-logo-img img.custom-logo { height: 72px !important; }
}


/* Sprachname neben der Flagge (5 px Abstand) – gleiche Schrift wie das Menü */
#masthead .pll-lang-name { font-size: inherit; letter-spacing: 1px; text-transform: uppercase; margin-left: 5px !important; }
@media (min-width: 922px) {
  #masthead .pll-parent-menu-item > .menu-link { display: flex !important; align-items: center; }
  #masthead .pll-parent-menu-item > .sub-menu .menu-link { display: flex !important; align-items: center; line-height: 21px !important; padding: 0 !important; font-size: 13px !important; color: #666 !important; }
  #masthead .pll-parent-menu-item > .sub-menu .menu-link:hover,
  #masthead .pll-parent-menu-item > .sub-menu .current-lang > .menu-link { color: var(--a2m-primary) !important; }
  #masthead .pll-parent-menu-item > .sub-menu .menu-link img { display: inline-block !important; }
}

/* Schmale Desktop-Fenster (922–1099 px): Menü kompakter, damit alles in eine Zeile passt */
@media (min-width: 922px) and (max-width: 1099px) {
  #masthead .main-header-menu > .menu-item > .menu-link { font-size: 11px !important; padding: 0 7px !important; letter-spacing: .5px; }
  #masthead .main-header-menu > .menu-item:not(.pll-parent-menu-item) > .menu-link::after { left: 7px; right: 7px; }
  #masthead .site-logo-img img.custom-logo { height: 38px !important; }
  #masthead .site-primary-header-wrap.ast-container, #masthead .site-primary-header-wrap { padding-left: 20px !important; padding-right: 20px !important; }
}