/* I LOVE MY JOB - payroll, tax and official payslip UI v3. */

.tax-shell {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  min-width: 0;
  color: var(--color-text, var(--ink, #171717));
}

.tax-shell *,
.tax-shell *::before,
.tax-shell *::after,
.slip-a4 *,
.slip-a4 *::before,
.slip-a4 *::after {
  box-sizing: border-box;
}

.tax-shell :is(button, a, input, select, textarea):focus-visible,
.payslip-official-banner :is(button, a):focus-visible {
  outline: 3px solid var(--color-focus, #735b00);
  outline-offset: 3px;
}

.tax-shell :is(input, select, textarea) {
  width: 100%;
  min-height: 44px;
  border: 1.5px solid var(--color-border-control, #85868b);
  border-radius: var(--radius-control, .8rem);
  background: var(--color-surface, #fff);
  color: var(--color-text, #171717);
}

.tax-shell input:is([type="checkbox"], [type="radio"]) {
  width: 1.1rem;
  min-width: 1.1rem;
  height: 1.1rem;
  min-height: 1.1rem;
  margin: 0;
  border-radius: .25rem;
}

.tax-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: .75rem;
  min-width: 0;
  overflow: hidden;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: var(--radius-hero, 1.6rem);
  background:
    radial-gradient(circle at 92% 8%, rgb(242 201 76 / .34), transparent 15rem),
    linear-gradient(145deg, #171717, #292a2d);
  color: #fff;
  box-shadow: var(--shadow-panel, 0 8px 24px rgb(0 0 0 / .08));
}

.tax-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -3rem;
  bottom: -4.5rem;
  width: 12rem;
  aspect-ratio: 1;
  border: 1.25rem solid rgb(242 201 76 / .13);
  border-radius: 50%;
  pointer-events: none;
}

.tax-hero > * {
  position: relative;
  min-width: 0;
}

.tax-hero :is(h1, h2, h3, p) { margin: 0; }

.tax-hero :is(h1, h2) {
  max-width: 20ch;
  font-size: clamp(1.45rem, 4vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.tax-hero p {
  max-width: 68ch;
  color: rgb(255 255 255 / .78);
}

.tax-hero .btn.ghost {
  border-color: rgb(255 255 255 / .58);
  background: rgb(255 255 255 / .11);
  color: #fff;
  box-shadow: none;
}

.tax-hero .btn.ghost:hover {
  border-color: rgb(255 255 255 / .82);
  background: rgb(255 255 255 / .18);
  box-shadow: none;
}

.tax-hero .tag.gold {
  border: 1px solid rgb(242 201 76 / .78);
  background: #f2c94c;
  color: #171717;
}

.tax-hero .num,
.tax-stat .num,
.tax-stat > strong,
.tax-stat > b {
  font-variant-numeric: tabular-nums;
}

.tax-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .75rem;
  min-width: 0;
}

.tax-stat {
  display: grid;
  align-content: start;
  gap: .35rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--color-border, #e2e2dd);
  border-radius: var(--radius-panel, 1.1rem);
  background: var(--color-surface, #fff);
  color: var(--color-text, #171717);
  box-shadow: var(--shadow-panel, 0 1px 2px rgb(0 0 0 / .05));
}

.tax-stat > :first-child:not(.num) {
  color: var(--color-text-muted, #5f6065);
  font-size: calc(.78rem * var(--font-scale, 1));
  font-weight: 600;
}

.tax-stat > :is(strong, b, .num) {
  overflow-wrap: anywhere;
  color: var(--color-text, #171717);
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  line-height: 1.2;
}

.tax-breakdown,
.tax-claims {
  min-width: 0;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid var(--color-border, #e2e2dd);
  border-radius: var(--radius-panel, 1.1rem);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-panel, 0 1px 2px rgb(0 0 0 / .05));
}

.tax-breakdown {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.tax-breakdown table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tax-breakdown :is(th, td) {
  padding: .7rem .65rem;
  border-bottom: 1px solid var(--color-border, #e2e2dd);
  text-align: left;
  vertical-align: top;
}

.tax-breakdown :is(th, td):not(:first-child) { text-align: right; }

.tax-breakdown th {
  color: var(--color-text-muted, #5f6065);
  font-size: calc(.76rem * var(--font-scale, 1));
  font-weight: 700;
  white-space: nowrap;
}

.tax-breakdown tr:last-child td { border-bottom: 0; }

.tax-claims {
  display: grid;
  gap: .75rem;
}

.tax-claim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .7rem 1rem;
  align-items: center;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--color-border, #e2e2dd);
  border-radius: var(--radius-control, .8rem);
  background: var(--color-surface-muted, #f1f1ed);
}

.tax-claim > * { min-width: 0; }

.tax-claim :is(h3, h4, p) {
  margin-block: 0;
  overflow-wrap: anywhere;
}

.tax-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: max-content;
  max-width: 100%;
  min-height: 30px;
  padding: .25rem .7rem;
  border: 1px solid #b28300;
  border-radius: 999px;
  background: #fff5cf;
  color: #6b5100;
  font-size: calc(.72rem * var(--font-scale, 1));
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.tax-status::before {
  content: "";
  width: .48rem;
  height: .48rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.tax-status:is(.is-approved, .approved, [data-status="approved"]) {
  border-color: #13804a;
  background: #e7f5ec;
  color: #0b663a;
}

.tax-status:is(.is-rejected, .rejected, [data-status="rejected"]) {
  border-color: #b92d37;
  background: #fbeaec;
  color: #8a1c24;
}

.tax-status:is(.is-draft, .draft, [data-status="draft"]) {
  border-color: #85868b;
  background: #ededed;
  color: #4e4f53;
}

.tax-status:is(.is-review, .review, [data-status="review"]) {
  border-color: #1174a8;
  background: #e8f3fa;
  color: #075e94;
}

.tax-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.tax-actions :is(button, .btn, a) {
  min-height: 44px;
  max-width: 100%;
}

.workflow-steps {
  counter-reset: payroll-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: .65rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-step {
  counter-increment: payroll-step;
  position: relative;
  display: grid;
  grid-template-columns: 2.15rem minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  padding: .7rem;
  border: 1px solid var(--color-border, #e2e2dd);
  border-radius: var(--radius-control, .8rem);
  background: var(--color-surface, #fff);
  color: var(--color-text-muted, #5f6065);
  font-size: calc(.78rem * var(--font-scale, 1));
  font-weight: 650;
}

.workflow-step::before {
  content: counter(payroll-step);
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--color-surface-muted, #f1f1ed);
  color: inherit;
  font-family: var(--font-en, sans-serif);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.workflow-step:is(.is-current, [aria-current="step"]) {
  border-color: var(--color-brand-strong, #d5a900);
  background: var(--gold-bg, rgb(242 201 76 / .13));
  color: var(--color-brand-ink, #6b5100);
  box-shadow: 0 0 0 2px rgb(242 201 76 / .16);
}

.workflow-step.is-complete {
  border-color: #13804a;
  color: #0b663a;
}

.workflow-step.is-complete::before { background: #e7f5ec; }

.workflow-step.is-rejected {
  border-color: #b92d37;
  color: #8a1c24;
}

.payroll-policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .75rem;
  min-width: 0;
}

.payroll-policy-grid > * {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--color-border, #e2e2dd);
  border-radius: var(--radius-control, .8rem);
  background: var(--color-surface, #fff);
}

.payroll-policy-grid :is(label, legend) {
  color: var(--color-text-muted, #5f6065);
  font-size: calc(.76rem * var(--font-scale, 1));
  font-weight: 700;
}

.payroll-period-card {
  position: relative;
  display: grid;
  gap: .75rem;
  min-width: 0;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid var(--color-border, #e2e2dd);
  border-left: .3rem solid var(--color-brand-strong, #d5a900);
  border-radius: var(--radius-panel, 1.1rem);
  background: var(--color-surface, #fff);
  color: var(--color-text, #171717);
  box-shadow: var(--shadow-panel, 0 1px 2px rgb(0 0 0 / .05));
}

.payroll-period-card > * { min-width: 0; }

.payroll-period-card :is(h2, h3, h4, p) {
  margin-block: 0;
  overflow-wrap: anywhere;
}

.payroll-period-card[data-status="approved"] { border-left-color: #13804a; }
.payroll-period-card[data-status="rejected"] { border-left-color: #b92d37; }
.payroll-period-card[data-status="draft"] { border-left-color: #85868b; }

.payslip-official-banner {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  min-width: 0;
  padding: .85rem 1rem;
  border: 1px solid #b28300;
  border-radius: var(--radius-control, .8rem);
  background: #fff5cf;
  color: #4f3d00;
  font-size: calc(.8rem * var(--font-scale, 1));
  line-height: 1.45;
}

.payslip-official-banner > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.slip-a4 {
  --slip-ink: #171717;
  --slip-muted: #57585c;
  --slip-border: #c9c9c4;
  --slip-soft: #f3f3ef;
  --slip-gold: #d5a900;
  position: relative;
  box-sizing: border-box;
  isolation: isolate;
  width: min(100%, 210mm);
  min-height: 297mm;
  margin-inline: auto;
  padding: 13mm;
  overflow: hidden;
  border: 1px solid var(--slip-border);
  border-radius: .6rem;
  background: #fff;
  color: var(--slip-ink);
  box-shadow: 0 16px 44px rgb(0 0 0 / .11);
  font-family: var(--font-th, "IBM Plex Sans Thai", sans-serif);
  font-size: 10.5pt;
  line-height: 1.4;
  color-scheme: light;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.slip-a4 :is(h1, h2, h3, h4, p) { margin-block: 0; }

.slip-a4 :is(h1, h2) {
  color: var(--slip-ink);
  font-size: 16pt;
  line-height: 1.25;
}

.slip-a4 :is(h3, h4) {
  color: var(--slip-ink);
  font-size: 12pt;
  line-height: 1.3;
}

.slip-a4 .muted { color: var(--slip-muted) !important; }

.slip-a4 table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--slip-ink);
  font-size: 9.5pt;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.slip-a4 :is(th, td) {
  padding: 2.2mm 1.5mm;
  border-bottom: .25mm solid var(--slip-border);
  overflow-wrap: anywhere;
  vertical-align: top;
}

.slip-a4 th {
  background: var(--slip-soft);
  color: var(--slip-muted);
  font-weight: 700;
}

.slip-a4 .net {
  display: flex;
  justify-content: space-between;
  gap: 8mm;
  margin-top: 5mm;
  padding: 3mm 4mm;
  border: .25mm solid #b28300;
  border-radius: 2mm;
  background: #fff5cf;
  color: #171717;
  font-weight: 700;
}

.slip-a4 :is(.num, .r) {
  font-family: var(--font-en, "Inter", sans-serif);
  font-variant-numeric: tabular-nums;
}

.slip-a4 :is(section, tr, .net, .payslip-official-banner, .signature-block) {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Large signed snapshots can legitimately span more than one A4 page. */
.slip-a4 :is(table, tbody) {
  break-inside: auto;
  page-break-inside: auto;
}

.slip-a4 thead { display: table-header-group; }
.slip-a4 tfoot { display: table-footer-group; }

.slip-watermark {
  position: absolute;
  z-index: 0;
  top: 47%;
  left: 50%;
  width: max-content;
  max-width: 78%;
  transform: translate(-50%, -50%) rotate(-28deg);
  color: #7a7a76;
  font-family: var(--font-en, sans-serif);
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  opacity: .09;
  pointer-events: none;
  text-align: center;
  text-transform: uppercase;
  user-select: none;
}

.slip-a4 > :not(.slip-watermark) {
  position: relative;
  z-index: 1;
}

.slip-a4.is-official .slip-watermark { display: none; }

.payslip-company-logo {
  display: block;
  flex: 0 0 auto;
  width: 32mm;
  max-width: 35%;
  height: auto;
  max-height: 22mm;
  object-fit: contain;
  object-position: right top;
}

.signature-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14mm;
  align-items: end;
  margin-top: 14mm;
  color: var(--slip-muted);
  text-align: center;
}

.signature-block > * {
  min-width: 0;
  padding-top: 2.5mm;
  border-top: .25mm solid var(--slip-border);
  overflow-wrap: anywhere;
}

.signature-block img {
  display: block;
  width: auto;
  max-width: 48mm;
  height: auto;
  max-height: 18mm;
  margin: -20mm auto 2mm;
  object-fit: contain;
}

.print-only { display: none !important; }

/* Six-item mobile navigation without changing the desktop sidebar. */
@media (max-width: 919px) {
  body .tabbar.six-tabs,
  body .tabbar[data-tab-count="6"] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    justify-content: stretch;
  }

  body .tabbar.six-tabs > button,
  body .tabbar[data-tab-count="6"] > button {
    width: 100%;
    min-width: 0;
    padding: .3rem .08rem;
    gap: .08rem;
    overflow: hidden;
    font-size: clamp(.52rem, 2.5vw, .66rem);
  }

  body .tabbar.six-tabs > button .ico,
  body .tabbar[data-tab-count="6"] > button .ico {
    width: 1.25rem;
    height: 1.25rem;
  }

  body .tabbar.six-tabs > button .ico .app-icon,
  body .tabbar[data-tab-count="6"] > button .ico .app-icon {
    width: 1.18rem;
    height: 1.18rem;
  }

  body .tabbar.six-tabs > button > span:not(.ico):not(.badge),
  body .tabbar[data-tab-count="6"] > button > span:not(.ico):not(.badge) {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body .tabbar.six-tabs > button .badge,
  body .tabbar[data-tab-count="6"] > button .badge {
    top: 1px;
    right: 1px;
  }
}

@supports selector(.tabbar:has(> :nth-child(6):last-child)) {
  @media (max-width: 919px) {
    body .tabbar:has(> :nth-child(6):last-child) {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 0;
      justify-content: stretch;
    }

    body .tabbar:has(> :nth-child(6):last-child) > button {
      width: 100%;
      min-width: 0;
      padding: .3rem .08rem;
      gap: .08rem;
      overflow: hidden;
      font-size: clamp(.52rem, 2.5vw, .66rem);
    }

    body .tabbar:has(> :nth-child(6):last-child) > button .ico {
      width: 1.25rem;
      height: 1.25rem;
    }

    body .tabbar:has(> :nth-child(6):last-child) > button .ico .app-icon {
      width: 1.18rem;
      height: 1.18rem;
    }

    body .tabbar:has(> :nth-child(6):last-child) > button > span:not(.ico):not(.badge) {
      display: block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    body .tabbar:has(> :nth-child(6):last-child) > button .badge {
      top: 1px;
      right: 1px;
    }
  }
}

/* Delegated HR can receive a seventh payroll tab. Keep every target usable. */
@media (max-width: 919px) {
  body .tabbar.seven-tabs,
  body .tabbar[data-tab-count="7"] {
    display: flex;
    gap: 0;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: inline proximity;
    -webkit-overflow-scrolling: touch;
  }

  body .tabbar.seven-tabs > button,
  body .tabbar[data-tab-count="7"] > button {
    flex: 0 0 72px;
    width: 72px;
    min-width: 72px;
    padding: .3rem .12rem;
    gap: .08rem;
    overflow: hidden;
    font-size: calc(.62rem * var(--font-scale, 1));
    scroll-snap-align: start;
  }

  body .tabbar.seven-tabs > button .ico,
  body .tabbar[data-tab-count="7"] > button .ico {
    width: 1.16rem;
    height: 1.16rem;
  }

  body .tabbar.seven-tabs > button > span:not(.ico):not(.badge),
  body .tabbar[data-tab-count="7"] > button > span:not(.ico):not(.badge) {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@supports selector(.tabbar:has(> :nth-child(7):last-child)) {
  @media (max-width: 919px) {
    body .tabbar:has(> :nth-child(7):last-child) {
      display: flex;
      gap: 0;
      justify-content: flex-start;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scrollbar-width: thin;
      scroll-snap-type: inline proximity;
      -webkit-overflow-scrolling: touch;
    }

    body .tabbar:has(> :nth-child(7):last-child) > button {
      flex: 0 0 72px;
      width: 72px;
      min-width: 72px;
      padding: .3rem .12rem;
      gap: .08rem;
      overflow: hidden;
      font-size: calc(.62rem * var(--font-scale, 1));
      scroll-snap-align: start;
    }

    body .tabbar:has(> :nth-child(7):last-child) > button .ico {
      width: 1.16rem;
      height: 1.16rem;
    }

    body .tabbar:has(> :nth-child(7):last-child) > button > span:not(.ico):not(.badge) {
      display: block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

@media screen and (max-width: 700px) {
  .tax-summary-grid,
  .payroll-policy-grid,
  .workflow-steps { grid-template-columns: 1fr; }

  .tax-claim { grid-template-columns: minmax(0, 1fr); }

  .tax-claim .tax-status { justify-self: start; }

  .tax-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .tax-actions :is(button, .btn, a) { width: 100%; }

  .slip-a4 {
    min-height: 0;
    padding: 1rem;
    border-radius: var(--radius-panel, 1.1rem);
    font-size: 9.5pt;
  }

  .slip-a4 table { font-size: 8.5pt; }

  .payslip-company-logo {
    width: 30mm;
    max-width: 34%;
  }

  .signature-block {
    grid-template-columns: 1fr;
    gap: 10mm;
  }
}

@media (forced-colors: active) {
  .tax-stat,
  .tax-breakdown,
  .tax-claims,
  .tax-claim,
  .tax-status,
  .workflow-step,
  .payroll-policy-grid > *,
  .payroll-period-card,
  .payslip-official-banner,
  .slip-a4 {
    border: 1px solid CanvasText;
  }

  .tax-status::before { forced-color-adjust: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tax-shell *,
  .tax-shell *::before,
  .tax-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@page {
  size: A4 portrait;
  margin: 12mm;
}

@media print {
  body > :not(#printArea) {
    display: none !important;
  }

  html,
  body {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    color: #171717 !important;
    color-scheme: light !important;
  }

  #printArea {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 186mm !important;
    max-width: 186mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #printArea,
  #printArea * {
    visibility: visible !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  .print-only { display: block !important; }
  .no-print { display: none !important; }

  .slip-a4,
  .slip.slip-a4,
  html[data-theme="dark"] .slip-a4 {
    width: 186mm !important;
    min-width: 186mm !important;
    max-width: 186mm !important;
    min-height: 273mm !important;
    margin: 0 !important;
    padding: 8mm !important;
    overflow: visible !important;
    border: .25mm solid #c9c9c4 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #171717 !important;
    box-shadow: none !important;
    font-family: "IBM Plex Sans Thai", Tahoma, sans-serif !important;
    font-size: 10pt !important;
    line-height: 1.35 !important;
    color-scheme: light !important;
  }

  .slip-a4 :is(h1, h2) { font-size: 16pt !important; }
  .slip-a4 :is(h3, h4) { font-size: 12pt !important; }

  .slip-a4 table,
  .slip.slip-a4 table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    color: #171717 !important;
    font-size: 9.5pt !important;
    line-height: 1.3 !important;
  }

  .slip-a4 :is(th, td) {
    padding: 2mm 1.4mm !important;
    color: #171717 !important;
    overflow-wrap: anywhere !important;
  }

  .slip-a4 th { background: #f3f3ef !important; }
  .slip-a4 .muted { color: #57585c !important; }

  .slip-a4 :is(section, tr, .net, .payslip-official-banner, .signature-block) {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .slip-a4 :is(table, tbody) {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  .signature-block {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14mm !important;
  }

  .payslip-company-logo {
    width: 32mm !important;
    max-width: 35% !important;
    max-height: 22mm !important;
  }

  .payslip-official-banner {
    border-color: #b28300 !important;
    background: #fff5cf !important;
    color: #4f3d00 !important;
    font-size: 9pt !important;
  }
}