/* Functional reconstruction of img2/1.gif and 4.gif at 960 × 571.
   Shared admin/login styles stay in classic.css. Desktop physical left/right
   geometry follows the Arabic Java window even when the document is RTL. */
html:has(body.chat-client) {
  background: #d9d9e9;
}
body.chat-client {
  --classic-blue: #044889;
  --classic-panel: #6783c3;
  display: grid;
  grid-template-rows: 26px 22px minmax(0, 1fr) 19px;
  height: 100dvh;
  min-height: 0;
  min-width: 280px;
  overflow: hidden;
  font:
    11px Tahoma,
    Arial,
    sans-serif;
  color: #000080;
  background: #d9d9e9;
}
body.chat-client #app {
  grid-row: 3;
  height: 100%;
  min-height: 0;
  min-width: 0;
  outline: 0;
}
.chat-client .classic-caption {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 26px;
  padding: 1px 2px;
  direction: ltr;
  color: white;
  font:
    bold 14px Tahoma,
    Arial,
    sans-serif;
  text-shadow: 1px 1px #34355f;
  border-bottom: 1px solid #353560;
  background: linear-gradient(
    #989aca 0%,
    #7577ac 18%,
    #8e90bf 35%,
    #7275a5 46%,
    #5d5f94 80%,
    #8e90bd 100%
  );
}
.classic-caption-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.classic-window-icon {
  font-size: 15px;
  color: #c6f1ff;
}
.classic-window-controls {
  display: flex;
  gap: 2px;
}
body.chat-client .classic-window-controls button {
  width: 21px;
  height: 21px;
  min-height: 0;
  padding: 0;
  border-radius: 6px;
  color: #f5f7ff;
  border: 1px solid #151b47;
  font: 20px/17px Arial;
  background: linear-gradient(130deg, #bfc6e9, #7b80ba 60%, #555b99);
  box-shadow:
    inset 1px 1px #e5e8ff,
    inset -1px -1px #535b8e;
  text-shadow: 1px 1px #2e3563;
}
.classic-menubar {
  grid-row: 2;
  height: 22px;
  position: relative;
  direction: ltr;
  background: #d9d9e9;
  border-bottom: 2px groove #fff;
  z-index: 30;
}
body.chat-client #classic-menu-button {
  height: 19px;
  min-height: 0;
  padding: 1px 4px;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  color: #000;
  background: #fff;
  font:
    11px Arial,
    sans-serif;
}
body.chat-client #classic-menu-button[aria-expanded="true"] {
  background: #aaa9d0;
}
.classic-menu,
.classic-status-menu {
  position: absolute;
  background: white;
  color: #000060;
  padding: 2px;
  border: 1px solid #9c9cb8;
  border-top-color: #eee;
  border-left-color: #eee;
  box-shadow: 2px 2px 1px #5558;
  width: 176px;
  direction: ltr;
}
.classic-menu {
  left: 0;
  top: 20px;
  padding-bottom: 5px;
}
body.chat-client .classic-menu button {
  display: block;
  width: 100%;
  min-height: 20px;
  height: 20px;
  padding: 2px 12px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: white;
  color: #000060;
  font:
    10px Tahoma,
    Arial,
    sans-serif;
  text-align: left;
  white-space: nowrap;
}
body.chat-client
  .classic-menu
  button:is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: #aaa9d0;
  outline: none;
  color: #000060;
}
.classic-menu hr {
  margin: 3px 0;
  height: 1px;
  border: 0;
  background: #9c9ccb;
}
.classic-status-row {
  position: relative;
}
.classic-status-row > button::after {
  content: "▸";
  position: absolute;
  right: 3px;
}
.classic-status-menu {
  left: calc(100% - 1px);
  top: -1px;
  width: 108px;
}
body.chat-client .classic-status-menu button {
  padding-left: 12px;
}
.classic-status-menu [aria-checked="true"]::before {
  content: "✓";
  position: absolute;
  left: 2px;
}
body.chat-client .classic-chat-page {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(100% - 6px);
  /* The shared .page cap leaves a blank strip on wide popup viewports. */
  max-width: none;
  min-width: 0;
  height: calc(100% - 4px);
  padding: 0 9px 7px;
  margin: 2px 3px 1px;
  border: 1px solid #000;
  outline: 1px solid white;
  background: #044889;
  direction: ltr;
  overflow: hidden;
}
body.chat-client .page-heading {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  padding: 8px 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 4;
  pointer-events: none;
}
body.chat-client .page-heading > div:first-of-type {
  display: none;
}
body.chat-client .page-heading:not(:has(.banner img)) {
  display: none;
}
body.chat-client .banner {
  position: static;
  inset: auto;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  pointer-events: auto;
  overflow: hidden;
}
body.chat-client .banner a {
  display: flex;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
}
body.chat-client .banner img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
}
body.chat-client .top-banner-slide {
  grid-area: 1 / 1;
  min-width: 0;
  max-width: 100%;
  visibility: hidden;
  pointer-events: none;
}
body.chat-client .top-banner-slide[data-active="true"] {
  visibility: visible;
  pointer-events: auto;
}
body.chat-client .chat-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 182px;
  grid-template-rows: minmax(0, 1fr);
  gap: 9px;
  flex: 1;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 7px 8px 6px 9px;
  background: #6783c3;
  border: 1px solid #6f8cba;
  border-radius: 12px;
}
body.chat-client .chat-main {
  display: grid;
  grid-template-rows: 32px minmax(0, 1fr) 59px;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  min-height: 0;
  height: calc(100% - 1px);
  overflow: visible;
  position: relative;
}
body.chat-client .chat-room-heading {
  min-height: 0;
  height: 32px;
  padding: 3px 5px;
  border: 0;
  box-shadow: none;
  background: #eee;
  overflow: hidden;
  color: #000;
  font-size: 11px;
  border-right: 14px solid #d7d6ea;
}
body.chat-client .chat-room-heading h2 {
  font-size: 11px;
  font-weight: normal;
}
body.chat-client .chat-room-heading p {
  font-size: 10px;
  color: #000;
}
body.chat-client .messages {
  min-height: 0;
  width: 100%;
  padding: 2px 4px;
  background: #fff;
  color: #000;
  overflow: scroll;
  overflow-x: hidden;
  scrollbar-color: #d7d6eb #eee;
  scrollbar-width: auto;
  font:
    12px Tahoma,
    Arial,
    sans-serif;
}
.chat-client ::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
.chat-client ::-webkit-scrollbar-track {
  background: #eee;
}
.chat-client ::-webkit-scrollbar-thumb {
  background: #d7d6e9;
  border: 1px outset #ececff;
}
body.chat-client .message {
  gap: 4px;
  padding: 3px 0;
  margin: 0;
  line-height: 1.2;
  border: 0;
}
body.chat-client .message > img {
  width: 18px;
  height: 22px;
  margin: 0;
}
body.chat-client .message .body {
  display: block;
}
body.chat-client .message .byline {
  font-size: 11px;
  justify-content: flex-start;
  text-align: left;
}
body.chat-client .message .content {
  font-size: inherit;
  font-family: inherit;
}
body.chat-client .message .content.text-large {
  font-size: 15px;
}
body.chat-client .message.system {
  background: #eee;
  color: #000;
}
body.chat-client .message:is(.digicast, .broadcast) {
  background: #ffffc2;
  color: blue;
}
body.chat-client .messages .empty {
  margin: 0;
  padding: 2px;
  text-align: start;
  color: blue;
  font-size: 11px;
  background: #ffffc2;
}
/* Theme selection keeps the classic geometry; HostWega uses image 4's palette. */
body.chat-client[data-chat-theme]:not([data-chat-theme="hostwega"]) .messages {
  background: var(--surface);
  color: var(--fg);
  font-family: var(--chat-font);
}
body.chat-client[data-chat-theme]:not([data-chat-theme="hostwega"])
  .classic-chat-page {
  background: var(--accent);
}
body.chat-client[data-chat-theme]:not([data-chat-theme="hostwega"])
  .chat-layout {
  background: var(--bg);
}
body.chat-client[data-chat-theme="midnight"] .chat-room-heading,
body.chat-client[data-chat-theme="midnight"] .composer :is(input, textarea) {
  background: var(--surface);
  color: var(--fg);
}
body.chat-client .composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  gap: 5px;
  min-height: 0;
  height: 59px;
  padding: 11px 0 2px;
  grid-template-rows: 46px;
  align-items: start;
  border: 0;
  background: transparent;
}
body.chat-client .composer form {
  display: block;
  min-width: 0;
}
body.chat-client .composer :is(input, textarea) {
  display: block;
  width: 100%;
  min-width: 0;
  height: 46px;
  min-height: 0;
  border: 2px inset #cfcfe7;
  box-shadow: none;
  background: #eee;
  color: #000;
  border-radius: 0;
  font:
    13px Tahoma,
    Arial,
    sans-serif;
  padding: 2px 4px;
}
.chat-client .composer :is(input, textarea)::placeholder {
  color: transparent;
}
body.chat-client .formatting-toolbar {
  display: grid;
  grid-template-columns: 23px 23px;
  grid-template-rows: 22px 22px;
  gap: 3px 2px;
  margin-top: -3px;
}
body.chat-client .formatting-toolbar button {
  width: 23px;
  height: 22px;
  min-height: 0;
  padding: 0;
  font:
    bold 13px Georgia,
    serif;
  color: #000;
  border: 1px solid #3d508d;
  border-radius: 0;
  background: linear-gradient(#e6e8f4, #c6cbe5);
  box-shadow: inset 1px 1px white;
}
body.chat-client .formatting-toolbar button:last-child {
  color: #f2ac0d;
  font: bold 20px Arial;
}
body.chat-client .formatting-toolbar [data-style="italic"] {
  font-style: italic;
}
body.chat-client .people-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: calc(100% + 1px);
  position: relative;
  top: -2px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
body.chat-client .people-sidebar .panel-heading {
  padding: 0;
  height: 22px;
  min-height: 22px;
  border: 0;
}
body.chat-client .sidebar-tabs {
  gap: 1px;
  flex-wrap: nowrap;
  height: 22px;
  align-items: end;
}
body.chat-client .sidebar-tabs button {
  height: 23px;
  min-height: 0;
  padding: 2px 10px;
  border: 1px solid #26254f;
  border-bottom: 0;
  box-shadow: inset 1px 1px white;
  border-radius: 9px 9px 0 0;
  background: #a8a7bb;
  font-size: 10px;
  color: blue;
}
body.chat-client .sidebar-tabs [aria-selected="true"] {
  background: #eee;
  font-weight: normal;
  height: 22px;
}
body.chat-client .client-user-tools {
  background: #eee;
  padding: 6px 4px 0;
  border: 0;
  border-left: 1px solid white;
  border-right: 1px solid #333;
}
.classic-user-icons {
  display: flex;
  justify-content: space-between;
  height: 31px;
}
body.chat-client .classic-user-icons button {
  height: 28px;
  width: 28px;
  min-height: 0;
  padding: 1px;
  border: 1px solid #303355;
  background: linear-gradient(#95a7d2, #687ab5);
  box-shadow: inset 1px 1px #c5ceea;
}
.classic-user-icons img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.classic-all-users {
  display: flex;
  align-items: center;
  height: 20px;
  white-space: nowrap;
  font-size: 10px;
  color: blue;
}
body.chat-client .classic-all-users input {
  height: 13px;
  min-height: 0;
  margin: 0 4px 0 0;
  width: 13px;
  accent-color: #7476a3;
}
.classic-list-divider {
  border: 2px inset #ccc;
  height: 20px;
  background: #999;
  margin-bottom: 3px;
  width:100%; box-sizing:border-box; min-height:20px; padding:1px 3px; border-radius:0;
}
.classic-list-heading {
  height: 18px;
  background: #999;
  color: blue;
  border: 1px inset white;
  padding: 1px 4px;
  font-size: 10px;
}
body.chat-client .people-sidebar .list {
  display: block;
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: scroll;
  background: #fff;
  margin: 0;
  border: 2px inset #eee;
  border-top: 0;
  padding: 0;
  border-radius: 0 0 8px 8px;
  scrollbar-color: #d7d6eb #eee;
}
body.chat-client .people-sidebar .list-item {
  display: flex;
  width: 100%;
  height: 25px;
  min-height: 25px;
  gap: 3px;
  padding: 1px 3px;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  background: #eee;
  color: #009300;
  font:
    12px Tahoma,
    Arial,
    sans-serif;
}
body.chat-client .people-sidebar .list-item:nth-child(even) {
  background: #fff;
}
body.chat-client .people-sidebar .list-item.active {
  background: #3d3897;
  color: white;
}
body.chat-client .people-sidebar .list-item .avatar {
  width: 24px;
  height: 24px;
}
body.chat-client .people-sidebar .item-main {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  overflow: hidden;
}
body.chat-client .people-sidebar .list-item small {
  font-size: 0;
  display: flex;
}
body.chat-client .people-sidebar .status-icon {
  width: 12px;
  height: 12px;
}
body.chat-client .people-sidebar .rank {
  width: 14px;
  height: 14px;
}
body.chat-client .people-sidebar .sidebar-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 22px 26px;
  flex: 0 0 59px;
  gap: 4px 6px;
  padding: 8px 0 0;
  border: 0;
  background: transparent;
}
body.chat-client .sidebar-bottom button {
  min-height: 0;
  padding: 0;
  height: 22px;
  color: #fff000;
  font-size: 10px;
  background: linear-gradient(
    #b9c0df 0%,
    #8d99c5 20%,
    #6573b0 46%,
    #454d90 53%,
    #5265a2
  );
  border: 1px solid #334479;
  box-shadow: inset 1px 1px #c5cbe3;
  border-radius: 2px;
}
.classic-settings-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
}
body.chat-client .sidebar-bottom button[type="submit"] {
  grid-column: 1/-1;
  height: 26px;
  border: 3px double #d1d6ec;
  box-shadow: 0 0 0 1px #151e4d;
}
body.chat-client .classic-chat-page > .events-strip {
  display: none;
}
body.chat-client .footer-note {
  flex: 0 0 43px;
  min-height: 0;
  padding: 5px 9px;
  margin: 4px 0 1px;
  border: 1px solid #b3c0d7;
  border-radius: 12px;
  background: #eee;
  font:
    11px Tahoma,
    Arial,
    sans-serif;
  color: blue;
  text-align: center;
}
.classic-window-status {
  grid-row: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
  font:
    10px Arial,
    sans-serif;
  color: #000;
  border-top: 2px groove white;
  padding: 0 2px;
  background: #d9d9e9;
}
body.chat-client .classic-window-status #connection {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}
.chat-client .connection {
  color: inherit;
}
.classic-folded #app {
  visibility: hidden;
}
body.chat-client .modal {
  background: var(--original-outerBackground, #044889);
  border: 2px solid #aaa9cc;
  border-radius: 5px 5px 0 0;
  box-shadow: 2px 2px 4px #0008;
}
body.chat-client .dialog-head {
  direction: ltr;
  background: linear-gradient(#a0a0c9, #7375a4 55%, #9699bc);
  border: 0;
  min-height: 26px;
  color: white;
}
body.chat-client .dialog-head button {
  background: linear-gradient(#c0c4e2, #777caf);
  border: 1px solid #363c70;
  border-radius: 4px;
}
body.chat-client .modal > :is(form, .dialog-content) {
  background: var(--original-tabsBackground, #eee);
  border: 1px solid #b0c4df;
  border-radius: 10px;
  color: var(--original-tabsText, blue);
  margin: 8px;
  padding: 12px;
}
body.chat-client .modal .actions button {
  background: linear-gradient(#a1b0d9, #344f88);
  color: #fff000;
}
body.chat-client .modal::backdrop {
  background: transparent;
}
body.chat-client .modal .field {
  direction: ltr;
  text-align: left;
}
body.chat-client .modal .actions {
  direction: ltr;
}
.classic-event-log {
  max-height: 330px;
  overflow: auto;
  color: #000;
  font-size: 11px;
}
.classic-utilities {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
body.chat-client :is(.classic-user-popup,.classic-status-menu) {
  max-height:calc(100dvh - 70px);
  max-width:calc(100vw - 12px);
  overflow:auto;
}
@media (max-height:600px), (max-width:480px) {
  body.chat-client .classic-menu {
    max-height:calc(100dvh - 70px);
    max-width:calc(100vw - 12px);
    overflow:auto;
  }
  body.chat-client .classic-status-menu { position:static; width:100%; box-sizing:border-box; }
}
body.chat-client .page-heading { flex:none; }
/* Classic Site Options and audit windows stay inside the chat window. */
body.chat-client .classic-site-dialog {
  width: min(492px, calc(100vw - 16px));
  padding: 0;
  overflow: hidden;
}
.classic-options-frame {
  display: block;
  width: 100%;
  height: min(520px, calc(100dvh - 64px));
  border: 0;
  background: #044889;
}
body.chat-client .classic-audit-dialog {
  width: min(577px, calc(100vw - 16px));
}
.classic-log-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
body.chat-client .classic-log-filters .field {
  grid-template-columns: auto minmax(80px, 1fr);
  flex: 1;
}
.classic-audit-dialog .classic-event-log {
  height: min(270px, 45dvh);
  padding: 4px;
  border: 2px inset #d9d9e9;
  background: #eee;
  font:
    11px Tahoma,
    Arial,
    sans-serif;
  overflow-wrap: anywhere;
}
body.chat-client :focus-visible {
  outline: 1px dotted #000080;
  outline-offset: -3px;
}
@media (max-width: 640px) {
  body.chat-client .chat-layout {
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: 5px;
    padding: 5px;
  }
  body.chat-client .classic-chat-page {
    padding-inline: 4px;
  }
  body.chat-client .classic-user-icons button {
    width: 24px;
    height: 26px;
  }
  .classic-user-icons img {
    width: 20px;
    height: 20px;
  }
  .classic-all-users {
    font-size: 8px;
  }
  body.chat-client .composer {
    grid-template-columns: minmax(0, 1fr) 48px;
  }
  .classic-caption-text {
    font-size: 11px;
  }
  body.chat-client .classic-menu button {
    height: 25px;
    min-height: 25px;
  }
}
@media (max-width: 390px) {
  body.chat-client .chat-layout {
    grid-template-columns: minmax(0, 1fr) 116px;
  }
  body.chat-client .client-user-tools {
    padding: 2px;
  }
  body.chat-client .classic-user-icons button {
    width: 21px;
  }
  .classic-user-icons img {
    width: 17px;
    height: 20px;
  }
  body.chat-client .sidebar-tabs button {
    padding: 2px 6px;
  }
}

/* Four Settings tabs verified in the running English original, 2026-10-20. */
body.chat-client .classic-settings-dialog {
  width: min(446px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  color: #fff;
  background: #323f91;
  border: 1px solid #525252;
  border-radius: 0;
}
body.chat-client .classic-settings-dialog .dialog-head {
  color: #111;
  background: #f0f0f0;
  min-height: 28px;
  text-shadow: none;
}
body.chat-client .modal.classic-settings-dialog > form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 7px;
  border: 0;
  border-radius: 0;
  background: #323f91;
  color: #fff;
}
body.chat-client .modal.classic-settings-dialog > footer:empty {
  display: none;
}
.classic-settings-tabs {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
body.chat-client .classic-settings-tabs [role="tab"] {
  min-height: 23px;
  padding: 3px 12px;
  border: 1px solid #171943;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  color: white;
  background: #526a9a;
  font-weight: bold;
}
body.chat-client .classic-settings-tabs [aria-selected="true"] {
  background: #96aad1;
}
.classic-settings-panel {
  box-sizing: border-box;
  height: min(310px, 55dvh);
  overflow: auto;
  padding: 8px 10px;
  border: 1px solid #171943;
  background: #96aad1;
}
.classic-settings-panel[hidden] {
  display: none;
}
.classic-settings-panel h3 {
  margin: 0 0 8px;
  border-bottom: 1px solid #ddd;
  font-size: 12px;
  color: var(--original-tabsText, #fff);
}
body.chat-client .classic-settings-panel .field {
  margin-bottom: 8px;
  color: var(--original-tabsText, white);
}
.classic-settings-panel .icon-picker {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
}
body.chat-client .classic-settings-panel .icon-picker button {
  min-width: 0;
  padding: 3px;
  border: 1px solid transparent;
  box-shadow: none;
  background: transparent;
}
body.chat-client .classic-settings-panel .icon-picker button.selected {
  border-color: #111;
  box-shadow: inset 1px 1px white;
}
body.chat-client .classic-settings-panel .icon-picker img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
body.chat-client .classic-settings-dialog .actions {
  padding: 8px 0 0;
  flex-shrink: 0;
}
body.chat-client .classic-settings-dialog .actions button {
  color: #111;
  background: linear-gradient(white, #ddd);
}

/* Share the existing English presentation across translated interfaces. */
html[lang] body.chat-client[data-chat-theme="hostwega"] {
  --classic-blue: #323f91;
  --classic-panel: #96aad1;
}
html[lang]
  body.chat-client[data-chat-theme="hostwega"]
  .classic-chat-page {
  background: #323f91;
  border-radius: 0;
}
html[lang] body.chat-client[data-chat-theme="hostwega"] .chat-layout {
  background: #6872ad;
  border-radius: 0;
}
html[lang] body.chat-client[data-chat-theme="hostwega"] .messages {
  background: #eee;
  color: #333;
}
html[lang] body.chat-client[data-chat-theme="hostwega"] .client-user-tools,
html[lang] body.chat-client[data-chat-theme="hostwega"] .footer-note {
  background: #96aad1;
  border-radius: 0;
}
html[lang]
  body.chat-client[data-chat-theme="hostwega"]
  .sidebar-bottom
  button {
  color: #111;
  background: linear-gradient(white, #ddd);
}
/* Original bt star column and bi nickname marker retain native artwork size. */
body.chat-client img.user-star { width:auto; height:auto; max-width:24px; max-height:24px; object-fit:contain; flex:none; vertical-align:middle; margin-inline-end:4px; }

body.chat-client .people-sidebar .list-item.state-overlay { position:relative; }
body.chat-client .people-sidebar .list-item.state-overlay .status-icon { position:absolute; left:15px; bottom:0; z-index:1; }