* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
}

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 13px;
  color: #111;
  padding: 4px 8px 24px 8px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- site header ---------- */
.site-header {
  /* Break out of the body padding so the red bar spans edge-to-edge. */
  margin: -4px -8px 14px -8px;
}
.topbar {
  background: #ff181b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 10px;
  font-size: 13px;
}
.topbar-welcome { white-space: nowrap; }
.topbar-links {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-links a {
  color: #fff;
  text-decoration: underline;
}
.topbar-links a:hover { text-decoration: none; }

.brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px 10px 12px;
  border-bottom: 1px solid #d9d9d9;
}
.header-kra { height: 66px; width: auto; }
.header-itax { height: 74px; width: auto; }

/* ---------- breadcrumb ---------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 20px 2px;
}
.breadcrumb .home-icon { width: 17px; height: 17px; display: block; }
.breadcrumb .home-label {
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: #1b1b1b;
}
.breadcrumb .crumb-sep { color: #444; font-size: 13px; }

/* ---------- search form ---------- */
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 2px;
  font-size: 13px;
}
.search label { font-weight: bold; color: #1b1b1b; }
.search input {
  font-family: inherit;
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid #9a9a9a;
  min-width: 240px;
}
.search button {
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background: #262626;
  border: none;
  padding: 5px 16px;
  cursor: pointer;
}
.search button:hover { background: #000; }

.placeholder {
  margin: 2px 0 0 2px;
  color: #666;
  font-style: italic;
}

/* Demo view reproduces the original results-only screen (no search form). */
body.demo .search,
body.demo .placeholder { display: none; }

/* ---------- results card ---------- */
.card {
  width: 1028px;
  max-width: 100%;
  margin-left: 12px;
  border: 2px solid #1c1c1c;
  background: #f6f6f6;
}
.card[hidden] { display: none; }

.card-title {
  background: #262626;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  padding: 4px 0;
  letter-spacing: 0.2px;
}

.fieldset {
  border: 1px solid #b2b2b2;
  margin: 10px 10px 6px 10px;
  padding: 4px 8px 8px 8px;
  position: relative;
  background: #f6f6f6;
}
.legend {
  position: absolute;
  top: -9px;
  left: 10px;
  background: #f6f6f6;
  padding: 0 6px;
  font-weight: bold;
  font-size: 13px;
  color: #1b1b1b;
}

table.form {
  width: 990px;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 12px;
}
table.form col.c1 { width: 229px; }
table.form col.c2 { width: 288px; }
table.form col.c3 { width: 207px; }
table.form col.c4 { width: 142px; }
table.form col.c5 { width: 38px; }
table.form col.c6 { width: 84px; }

table.form td {
  padding: 2px 4px 2px 14px;
  vertical-align: middle;
  height: 22px;
}
table.form td.value { padding-left: 8px; padding-right: 6px; }

.label {
  font-weight: bold;
  color: #1b1b1b;
  white-space: nowrap;
}

.value-box {
  display: block;
  min-height: 18px;
  padding: 1px 6px;
  background: #fcfcfc;
  border: 1px solid #e0e0e0;
  color: #3a3a3a;
  font-weight: normal;
  white-space: nowrap;
}
.value-box.empty-box { background: #fcfcfc; }

/* ---------- home button ---------- */
.actions {
  text-align: center;
  margin: 6px 0 6px 0;
}
.btn-home {
  background: #1c1c1c;
  color: #fff;
  border: none;
  padding: 5px 20px;
  font-weight: bold;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.btn-home:hover { background: #000; }

/* ---------- site footer ---------- */
.site-footer {
  /* margin-top:auto pushes the footer to the bottom, leaving the space
     above it just like the reference page. */
  margin-top: auto;
  width: 1028px;
  max-width: 100%;
  margin-left: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px 10px 14px;
  border-top: 1px solid #cfcfcf;
}

.footer-vision {
  width: 126px;
  height: auto;
  flex: 0 0 auto;
}

.footer-center {
  flex: 1 1 auto;
  text-align: center;
  color: #333;
  line-height: 1.45;
}
.footer-center p { margin: 0 0 8px 0; }
.footer-center p:last-child { margin-bottom: 0; }
.footer-center .footer-fine {
  color: #b8b8b8;
  font-size: 12px;
}

.footer-powered {
  flex: 0 0 auto;
  text-align: center;
}
.footer-powered-label {
  display: block;
  color: #333;
  margin-bottom: 2px;
}
.footer-lion {
  width: 60px;
  height: auto;
}