#jwod-overview .ov-kpi-icon {
  display: block;
  width: 31px;
  height: 31px;
  background: currentColor;
  -webkit-mask: var(--ov-kpi-image) center / contain no-repeat;
  mask: var(--ov-kpi-image) center / contain no-repeat;
}

#jwod-overview .ov-kpi-conversations { --ov-kpi-image: url('/overview/images/total_conversations.svg'); }
#jwod-overview .ov-kpi-contacts { --ov-kpi-image: url('/overview/images/new_contacts.svg'); }
#jwod-overview .ov-kpi-messages { --ov-kpi-image: url('/overview/images/mssages_sent.svg'); }
#jwod-overview .ov-kpi-resolution { --ov-kpi-image: url('/overview/images/resolution_rate.svg'); }
#jwod-overview .ov-kpi-response { --ov-kpi-image: url('/overview/images/response_time.svg'); }

#jwod-overview .ov-channel-stat i.has-image {
  background: #fff;
  border: 1px solid #edf0f4;
}

#jwod-overview .ov-channel-stat i img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

#jwod-overview .ov-channel-stats {
  padding: 10px 14px 12px;
}

#jwod-overview .ov-channel-stat {
  min-height: 58px;
  padding: 7px 10px;
}

#jwod-overview .ov-channel-stat > span {
  color: var(--ov-ink);
  font-weight: 800;
}

#jwod-overview .ov-channel-stat > strong {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 6px;
}

#jwod-overview .ov-channel-value {
  color: var(--ov-ink);
  font-size: 16px;
  font-weight: 800;
}

#jwod-overview .ov-channel-status {
  margin: 0;
  color: #16a34a;
}

#jwod-overview .ov-channel-trend {
  display: inline-flex;
  margin-left: auto;
  align-items: center;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

#jwod-overview .ov-channel-trend.up { color: #16a34a; }
#jwod-overview .ov-channel-trend.down { color: #e5484d; }
#jwod-overview .ov-channel-trend.flat,
#jwod-overview .ov-channel-trend.loading { color: #98a2b3; }

#jwod-overview .ov-avatar-wrap {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
}

#jwod-overview .ov-avatar-channel {
  position: absolute;
  z-index: 2;
  right: -3px;
  bottom: -2px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: none;
}

#jwod-overview .ov-avatar-channel img {
  display: block;
  width: 12px;
  height: 12px;
  object-fit: contain;
}

#jwod-overview .ov-integration-grid a {
  display: grid;
  height: 56px;
  place-items: center;
  color: #ff5a1f;
  background: #fff;
  border: 1px solid var(--ov-line);
  border-radius: 8px;
  font-size: 22px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

#jwod-overview .ov-integration-grid a:hover {
  border-color: #cfd5df;
  box-shadow: 0 8px 18px rgba(16, 24, 40, .08);
  transform: translateY(-2px);
}

#jwod-overview .ov-integration-grid img {
  display: block;
  width: 31px;
  height: 31px;
  object-fit: contain;
}

#jwod-overview .ov-tip-card {
  position: relative;
  min-height: 248px;
  overflow: hidden;
  padding: 20px;
  background:
    radial-gradient(circle at 90% 12%, rgba(20, 202, 111, .12), transparent 34%),
    linear-gradient(135deg, #f5fbf7 0%, #eef8f2 100%);
  border: 1px solid #e2eee7;
  border-radius: var(--ov-radius);
}

#jwod-overview .ov-tip-card::before {
  position: absolute;
  right: -48px;
  bottom: -65px;
  width: 210px;
  height: 210px;
  content: '';
  border: 1px solid rgba(19, 190, 102, .16);
  border-radius: 50%;
}

#jwod-overview .ov-tip-copy {
  position: relative;
  z-index: 2;
  width: 70%;
}

#jwod-overview .ov-tip-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #344054;
  font-size: 10px;
  font-weight: 700;
}

#jwod-overview .ov-tip-label b {
  color: #bad200;
  font-size: 16px;
}

#jwod-overview .ov-tip-card h2 {
  margin: 13px 0 7px;
  color: var(--ov-ink);
  font-size: 15px;
  line-height: 1.45;
}

#jwod-overview .ov-tip-card p {
  margin: 0;
  color: #475467;
  font-size: 10px;
  line-height: 1.65;
}

#jwod-overview .ov-tip-card a {
  display: grid;
  width: 118px;
  height: 36px;
  margin-top: 14px;
  place-items: center;
  color: #151515;
  background: var(--ov-accent);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

#jwod-overview .ov-tip-card a:hover { background: var(--ov-accent-strong); }

#jwod-overview .ov-tip-visual {
  position: absolute;
  z-index: 1;
  right: 8px;
  bottom: 9px;
  width: 112px;
  height: 132px;
}

#jwod-overview .ov-tip-orbit {
  position: absolute;
  right: -14px;
  bottom: 2px;
  width: 116px;
  height: 70px;
  border: 1px dashed rgba(16, 185, 129, .33);
  border-radius: 50%;
  transform: rotate(-18deg);
}

#jwod-overview .ov-tip-sheet {
  position: absolute;
  display: grid;
  width: 64px;
  height: 88px;
  place-items: end center;
  padding: 9px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(16, 185, 129, .18);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(16, 120, 74, .12);
}

#jwod-overview .ov-tip-sheet::before,
#jwod-overview .ov-tip-sheet::after {
  position: absolute;
  right: 9px;
  left: 9px;
  height: 3px;
  content: '';
  background: #e8f1ec;
  border-radius: 8px;
}

#jwod-overview .ov-tip-sheet::before { top: 17px; }
#jwod-overview .ov-tip-sheet::after { top: 26px; width: 30px; right: auto; }
#jwod-overview .ov-tip-sheet-one { right: 7px; bottom: 5px; transform: rotate(10deg); }
#jwod-overview .ov-tip-sheet-two { right: 50px; bottom: 26px; transform: rotate(-8deg); }

#jwod-overview .ov-tip-sheet img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

@media (max-width: 560px) {
  #jwod-overview .ov-tip-copy { width: 68%; }
  #jwod-overview .ov-tip-card { min-height: 230px; }
}