/* Zuto vertical nav tabs: fill the bar and center each label.
   Logo and actions stay at the edges. The link row uses the space between them. */

@media (min-width: 901px) {
  html body[data-zuto-vertical] #navbar .container.nav-container,
  html body[data-zuto-vertical] #navbar .nav-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body[data-zuto-vertical] #navbar #navMenu.nav-menu,
  html body.erp-body[data-zuto-vertical] #navbar #navMenu.zh-nav-menu {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: 2px !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    overflow: visible !important;
    padding: 0 8px !important;
  }

  html body[data-zuto-vertical] #navbar #navMenu.nav-menu > li,
  html body.erp-body[data-zuto-vertical] #navbar #navMenu.zh-nav-menu > li {
    flex: 1 1 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    /* Never shrink a label under its text. Extra space is shared equally. */
    min-width: min-content !important;
    margin: 0 !important;
  }

  html body[data-zuto-vertical] #navbar #navMenu.nav-menu > li > a,
  html body.erp-body[data-zuto-vertical] #navbar #navMenu.zh-nav-menu > li > a {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: min-content !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Sign-in and list buttons that live inside the menu stay content-sized. */
  html body[data-zuto-vertical] #navbar #navMenu > li.zuto-nav-auth-item {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    width: auto !important;
  }

  html body[data-zuto-vertical] #navbar #navMenu > li.zuto-nav-auth-item > a:not(.erp-login-orb),
  html body[data-zuto-vertical] #navbar #navMenu > li.zuto-nav-auth-item .zuto-signin-btn:not(.erp-login-orb),
  html body[data-zuto-vertical] #navbar #navMenu > li.zuto-nav-auth-item .zuto-list-btn {
    width: auto !important;
    min-width: max-content !important;
    flex: 0 0 auto !important;
  }

  html body[data-zuto-vertical] #navbar #navMenu > li.zuto-nav-auth-item .erp-login-orb {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
    padding: 0 !important;
  }

  /* The shell reserves ~32vw for a search pill. On these pages that pill
     sits on the row below, so the reservation just opens a hole in the tabs. */
  html body.erp-body[data-zuto-vertical] #navbar .nav-actions-group,
  html body.erp-body[data-zuto-vertical] #navbar #navActionsGroup {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    margin-right: 0 !important;
  }

  body[data-zuto-vertical="entertainment"] .ze-nav {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body[data-zuto-vertical="entertainment"] .ze-nav-menu {
    display: flex !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    justify-content: stretch !important;
    gap: 6px !important;
  }

  body[data-zuto-vertical="entertainment"] .ze-nav-menu > li {
    flex: 1 1 0 !important;
    display: flex !important;
    justify-content: center !important;
    min-width: min-content !important;
  }

  body[data-zuto-vertical="entertainment"] .ze-nav-menu > li > a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Entertainment: brand, tabs, and account actions share the nav.
     Search sits alone, centered, on the row below. */
  body[data-zuto-vertical="entertainment"] .ze-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "brand tabs actions"
      "search search search";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    padding: 0 16px 8px;
  }

  body[data-zuto-vertical="entertainment"] .ze-header-inner {
    display: contents !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body[data-zuto-vertical="entertainment"] .ze-header-start { grid-area: brand; }
  body[data-zuto-vertical="entertainment"] .ze-nav { grid-area: tabs; }
  body[data-zuto-vertical="entertainment"] .ze-header-actions { grid-area: actions; }

  body[data-zuto-vertical="entertainment"] .ze-search {
    grid-area: search;
    width: min(36rem, calc(100% - 48px)) !important;
    max-width: 36rem !important;
    margin: 0 auto !important;
    justify-self: center;
  }

  body[data-zuto-vertical="classified"] #navbar #us-trigger,
  body[data-zuto-vertical="classified"] #navbar .nav-actions-group .us-trigger {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(36rem, 70vw) !important;
    max-width: 36rem !important;
    min-width: 16rem !important;
    margin: 0 !important;
    z-index: 6 !important;
    display: inline-flex !important;
  }
}

/* Beat later Holidays chrome that pins bell, language, and Login
   back onto the search row. Search stays centered by itself. */
@media (min-width: 901px) {
  html body.erp-body[data-zuto-vertical] #navbar #util-bar .util-bar-inner {
    justify-content: center !important;
  }

  html body.erp-body[data-zuto-vertical="holidays"] #navbar #util-bar #utilAiSearchSlot,
  html body.erp-body[data-zuto-vertical="holidays"] #navbar #util-bar .util-ai-search-slot,
  html body.erp-body[data-zuto-vertical] #navbar #util-bar #utilAiSearchSlot {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    flex: 0 1 36rem !important;
    width: min(36rem, 70vw) !important;
  }

  html body.erp-body[data-zuto-vertical="holidays"] #navbar#navbar #util-bar .util-bar-inner > #navNotifWrap,
  html body.erp-body[data-zuto-vertical="holidays"] #navbar#navbar #util-bar .util-bar-inner > .util-lang-wrap,
  html body.erp-body[data-zuto-vertical="holidays"] #navbar#navbar #util-bar .util-bar-inner > #utilLangWrapper,
  html body.erp-body[data-zuto-vertical="holidays"] #navbar#navbar #util-bar .util-bar-inner > #navUserChip.is-authed,
  html body.erp-body[data-zuto-vertical="holidays"] #navbar#navbar #util-bar .util-bar-inner > #utilAuthGuest,
  html body.erp-body[data-zuto-vertical="holidays"] #navbar#navbar #util-bar .util-bar-inner > .nav-auth-buttons {
    position: absolute !important;
    top: calc(-1 * var(--erp-nav-main-h, 4rem) + 12px) !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 8 !important;
  }

  html body.erp-body[data-zuto-vertical="holidays"] #navbar#navbar .container.nav-container,
  html body.erp-body[data-zuto-vertical="holidays"] #navbar#navbar .nav-container {
    padding-right: 13.5rem !important;
  }

  html body.erp-body[data-zuto-vertical="holidays"] #navbar#navbar #util-bar .util-bar-inner {
    justify-content: center !important;
  }

  html body.erp-body[data-zuto-vertical="holidays"] #navbar#navbar #util-bar .util-bar-inner > .util-lang-wrap,
  html body.erp-body[data-zuto-vertical="holidays"] #navbar#navbar #util-bar .util-bar-inner > #utilLangWrapper {
    right: 1rem !important;
    left: auto !important;
  }

  html body.erp-body[data-zuto-vertical="holidays"] #navbar#navbar #util-bar .util-bar-inner > #navNotifWrap {
    right: 4.15rem !important;
    left: auto !important;
  }

  html body.erp-body[data-zuto-vertical="holidays"] #navbar#navbar #util-bar .util-bar-inner > #utilAuthGuest,
  html body.erp-body[data-zuto-vertical="holidays"] #navbar#navbar #util-bar .util-bar-inner > .nav-auth-buttons,
  html body.erp-body[data-zuto-vertical="holidays"] #navbar#navbar #util-bar .util-bar-inner > #navUserChip.is-authed {
    right: 7.3rem !important;
    left: auto !important;
    display: inline-flex !important;
  }
}

/* Phone: one nav row (logo, actions, bell, language), search centered under it. */
@media (max-width: 900px) {
  html body.erp-body[data-zuto-vertical] #navbar {
    display: flex !important;
    flex-direction: column !important;
  }

  html body.erp-body[data-zuto-vertical] #navbar .nav-container {
    order: 1 !important;
  }

  html body.erp-body[data-zuto-vertical] #navbar #util-bar {
    display: block !important;
    order: 2 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: 52px !important;
  }

  html body.erp-body[data-zuto-vertical] #navbar .nav-actions-group {
    position: static !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    visibility: visible !important;
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  html body.erp-body[data-zuto-vertical] #navbar .nav-container .mkt-btn-primary,
  html body.erp-body[data-zuto-vertical] #navbar .nav-container .nav-auth-buttons {
    display: inline-flex !important;
    visibility: visible !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
  }

  html body.erp-body[data-zuto-vertical] #navbar #util-bar #utilAiSearchSlot,
  html body.erp-body[data-zuto-vertical] #navbar #util-bar .util-ai-search-slot {
    display: block !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: min(36rem, calc(100% - 1.5rem)) !important;
    max-width: 36rem !important;
    height: auto !important;
    margin: 6px auto !important;
  }

  html body.erp-body[data-zuto-vertical] #navbar #util-bar #us-trigger {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.erp-body[data-zuto-vertical] #navbar #util-bar #navNotifWrap,
  html body.erp-body[data-zuto-vertical] #navbar #util-bar .util-lang-wrap,
  html body.erp-body[data-zuto-vertical] #navbar #util-bar #navUserChip.is-authed,
  html body.erp-body[data-zuto-vertical] #navbar:not(:has(.nav-container .login-btn)):not(:has(.nav-container .zuto-nav-signin-btn)):not(:has(.nav-container .zuto-signin-btn)) #util-bar #utilAuthGuest {
    top: calc(-1 * var(--erp-nav-main-h, 4rem) + 10px) !important;
  }
}

/* Colored section icons, and the Elinom-gradient Browse / Publish pill. */
html body[data-zuto-vertical] #navbar #navMenu > li > a.nav-link,
html body[data-zuto-vertical] .ze-nav-menu > li > a.ze-nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

html body[data-zuto-vertical] #navbar #navMenu > li > a .zuto-nav-ico,
html body[data-zuto-vertical] .ze-nav-menu > li > a .zuto-nav-ico {
  font-size: 1.05rem !important;
  line-height: 1 !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

html body[data-zuto-vertical] #navbar #navMenu > li > a.zuto-nav-browse,
html body[data-zuto-vertical] .ze-nav-menu > li > a.zuto-nav-browse {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  flex-direction: row !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 8px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(120deg, #38bdf8 0%, #6366f1 34%, #f472b6 67%, #f59e0b 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.35) !important;
  text-decoration: none !important;
}

html body[data-zuto-vertical] #navbar #navMenu > li:has(> a.zuto-nav-browse),
html body[data-zuto-vertical] .ze-nav-menu > li:has(> a.zuto-nav-browse) {
  flex: 0 0 auto !important;
  min-width: max-content !important;
}

/* Holidays has no Browse label. The current section uses the same pill. */
html body.erp-body[data-zuto-vertical="holidays"] #navbar #navMenu.zh-nav-menu > li > a.nav-link.zh-nav-link.is-active.zuto-nav-item,
html body.erp-body[data-zuto-vertical="holidays"] #navbar #navMenu.zh-nav-menu > li > a.nav-link.zh-nav-link.active.zuto-nav-item {
  background: linear-gradient(120deg, #38bdf8 0%, #6366f1 34%, #f472b6 67%, #f59e0b 100%) !important;
  background-image: linear-gradient(120deg, #38bdf8 0%, #6366f1 34%, #f472b6 67%, #f59e0b 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.35) !important;
}

html body[data-zuto-vertical="entertainment"] .ze-nav-menu > li > a.ze-nav-link:not(.zuto-nav-browse) {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  min-height: 0 !important;
  padding: 6px 8px !important;
  box-shadow: none !important;
}

html body[data-zuto-vertical] #navbar #navMenu > li > a.zuto-nav-browse .zuto-nav-ico,
html body[data-zuto-vertical] #navbar #navMenu > li > a.zuto-nav-browse .zuto-nav-caret,
html body[data-zuto-vertical] .ze-nav-menu > li > a.zuto-nav-browse .zuto-nav-ico,
html body[data-zuto-vertical] .ze-nav-menu > li > a.zuto-nav-browse .zuto-nav-caret,
html body[data-zuto-vertical] .zuto-nav-cta .zuto-nav-ico {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 0.95rem !important;
}

html body[data-zuto-vertical] .zuto-nav-cta,
html body[data-zuto-vertical] #navbar a.zuto-nav-cta,
html body[data-zuto-vertical] #navbar button.zuto-nav-cta,
html body[data-zuto-vertical="classified"] #navbar .nav-actions-group > a.zuto-nav-post-ad.zuto-nav-cta,
html body[data-zuto-vertical] a.mkt-btn-primary.zuto-nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-height: 42px !important;
  padding: 8px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(120deg, #38bdf8 0%, #6366f1 34%, #f472b6 67%, #f59e0b 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.35) !important;
  white-space: nowrap !important;
}

/* Phone drawer: each item spans the panel and the label stays centered. */
@media (max-width: 900px) {
  html body[data-zuto-vertical] #navbar #navMenu.nav-menu.mobile-open > li,
  html body[data-zuto-vertical] #navbar #navMenu.nav-menu.active > li,
  html body[data-zuto-vertical] #navbar #navMenu.zh-nav-menu.mobile-open > li {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  html body[data-zuto-vertical] #navbar #navMenu.nav-menu.mobile-open > li > a,
  html body[data-zuto-vertical] #navbar #navMenu.nav-menu.active > li > a,
  html body[data-zuto-vertical] #navbar #navMenu.zh-nav-menu.mobile-open > li > a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body[data-zuto-vertical="entertainment"] .ze-nav-menu.is-open {
    width: 100% !important;
    align-items: stretch !important;
  }

  body[data-zuto-vertical="entertainment"] .ze-nav-menu.is-open > li,
  body[data-zuto-vertical="entertainment"] .ze-nav-menu.is-open > li > a {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Navbar Login matches the erp.elinomtech.com round orb on every vertical. */
html body #navbar #loginBtn.erp-login-orb,
html body #navbar #zmLoginBtn.erp-login-orb,
html body #navbar .zuto-nav-signin-btn.erp-login-orb,
html body #navbar .zuto-signin-btn.erp-login-orb,
html body .ze-auth-guest .erp-login-orb {
  --erp-login-grad: linear-gradient(120deg, #38bdf8 0%, #6366f1 34%, #f472b6 67%, #f59e0b 100%);
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--erp-login-grad) !important;
  background-image: var(--erp-login-grad) !important;
  background-color: transparent !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow:
    0 0 0 2px rgb(56 189 248 / 28%),
    0 8px 18px rgb(99 102 241 / 28%),
    0 4px 12px rgb(245 158 11 / 22%) !important;
  overflow: hidden !important;
  gap: 0 !important;
  flex: 0 0 40px !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

html body #navbar #loginBtn.erp-login-orb.erp-login-orb--out,
html body #navbar #zmLoginBtn.erp-login-orb.erp-login-orb--out {
  --erp-login-grad: linear-gradient(120deg, #fb7185 0%, #e879f9 48%, #f59e0b 100%);
}

html body #navbar #loginBtn.erp-login-orb::before,
html body #navbar #zmLoginBtn.erp-login-orb::before,
html body #navbar .zuto-nav-signin-btn.erp-login-orb::before,
html body #navbar .zuto-signin-btn.erp-login-orb::before,
html body .ze-auth-guest .erp-login-orb::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 9px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 18%) !important;
  z-index: 1 !important;
}

html body #navbar #loginBtn.erp-login-orb .erp-login-orb-label,
html body #navbar #zmLoginBtn.erp-login-orb .erp-login-orb-label,
html body .ze-auth-guest .erp-login-orb .erp-login-orb-label {
  position: absolute !important;
  display: block !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

html body #navbar #loginBtn.erp-login-orb .erp-login-lock,
html body #navbar #zmLoginBtn.erp-login-orb .erp-login-lock,
html body #navbar .zuto-nav-signin-btn.erp-login-orb .erp-login-lock,
html body #navbar .zuto-signin-btn.erp-login-orb .erp-login-lock,
html body .ze-auth-guest .erp-login-orb .erp-login-lock {
  position: relative !important;
  display: inline-flex !important;
  z-index: 3 !important;
  color: #e11d48 !important;
  -webkit-text-fill-color: #e11d48 !important;
  font-size: 0.82rem !important;
  line-height: 1 !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
}

html body #navbar #loginBtn.erp-login-orb .erp-login-orb-text,
html body #navbar #zmLoginBtn.erp-login-orb .erp-login-orb-text,
html body .ze-auth-guest .erp-login-orb .erp-login-orb-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* Home search docks and the blocks under them share one full-width column. */
html body[data-zuto-vertical] .zc-home-inner,
html body[data-zuto-vertical] .za-home-inner,
html body[data-zuto-vertical] .zp-home-inner,
html body[data-zuto-vertical] .zb-home-inner,
html body[data-zuto-vertical] .zh-hero-inner,
html body[data-zuto-vertical] .mkt-hero-inner,
html body[data-zuto-vertical] .zuto-view .mkt-categories,
html body[data-zuto-vertical] .svc-wrap,
html body[data-zuto-vertical] .zh-results,
html body[data-zuto-vertical] .zh-panel,
html body[data-zuto-vertical] .mkt-vendor-banner,
html body[data-zuto-vertical] .ze-hero-inner,
html body[data-zuto-vertical] .ze-watch-inner,
html body[data-zuto-vertical] .ze-footer-main,
html body[data-zuto-vertical] .zm-hero-inner,
html body[data-zuto-vertical] .zm-section-inner {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

html body[data-zuto-vertical] .zuto-view {
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

html body[data-zuto-vertical] .zuto-view .mkt-categories {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body[data-zuto-vertical] .zuto-classified-search,
html body[data-zuto-vertical] .za-spec,
html body[data-zuto-vertical] .zp-search,
html body[data-zuto-vertical] .zb-finder,
html body[data-zuto-vertical] .zh-search,
html body[data-zuto-vertical] .zc-voice,
html body[data-zuto-vertical] .zc-growth {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html body[data-zuto-vertical] .zuto-promo-banner {
  max-width: none !important;
  width: calc(100% - 32px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

html body[data-zuto-vertical] .mkt-hero {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

html body[data-zuto-vertical] .mkt-vendor-cta {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* One 16px gutter on every Zuto home, including phones where generic section rules use 12px. */
html body[data-zuto-vertical] .zc-home,
html body[data-zuto-vertical] .za-home,
html body[data-zuto-vertical] .zp-home,
html body[data-zuto-vertical] .zb-home,
html body[data-zuto-vertical] .zm-hero,
html body[data-zuto-vertical] .zm-section,
html body[data-zuto-vertical] .ze-hero,
html body[data-zuto-vertical] .ze-rail-wrap,
html body[data-zuto-vertical] .ze-watch,
html body[data-zuto-vertical] .ze-empty,
html body[data-zuto-vertical] .ze-footer,
html body[data-zuto-vertical] .zm-footer-shell {
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}