@alicloud/cloud-charts/lib/Wnumbercard/index.css


.cloud-wnumbercard-data-item-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  font-family: var(--widgets-font-family-txd-m-number, SFProMedium, TXDDINMediumNumber, Helvetica Neue, Helvetica, PingFang SC, Microsoft YaHei, Arial, sans-serif);
  position: relative;
}
.cloud-wnumbercard-data-item-container.cloud-wnumbercard-none-card {
  background: transparent;
}
.cloud-wnumbercard-data-item-container.cloud-wnumbercard-none-card.cloud-wnumbercard-clickable {
  cursor: pointer;
}
.cloud-wnumbercard-data-item-container.cloud-wnumbercard-none-card.cloud-wnumbercard-clickable:hover {
  background: var(--widgets-color-container-background, #f7f7f7);
}
.cloud-wnumbercard-data-item-container.cloud-wnumbercard-none-card.cloud-wnumbercard-clickable:active {
  background: var(--widgets-numbercard-color-click, #f0f7ff);
}
.cloud-wnumbercard-data-item-container.cloud-wnumbercard-fill-card {
  background: var(--widgets-color-container-background, #f7f7f7);
}
.cloud-wnumbercard-data-item-container.cloud-wnumbercard-fill-card.cloud-wnumbercard-clickable {
  cursor: pointer;
}
.cloud-wnumbercard-data-item-container.cloud-wnumbercard-fill-card.cloud-wnumbercard-clickable:hover {
  background: var(--widgets-numbercard-color-hover, rgba(229, 229, 229, 0.5));
}
.cloud-wnumbercard-data-item-container.cloud-wnumbercard-fill-card.cloud-wnumbercard-clickable:active {
  background: var(--widgets-numbercard-color-click, #f0f7ff);
}
.cloud-wnumbercard-data-item-container.cloud-wnumbercard-image-card {
  background: var(--widgets-color-container-background, #f7f7f7);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: right;
}
.cloud-wnumbercard-data-item-container.cloud-wnumbercard-image-card.cloud-wnumbercard-clickable {
  cursor: pointer;
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-item-content {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-main-content {
  min-width: 0;
  flex: 1;
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-label-value-container {
  display: flex;
  align-items: center;
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-item-label-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-item-label {
  font-size: var(--widgets-font-size-1, 12px);
  color: var(--widgets-color-text-2, #696969);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.5;
  max-width: 100%;
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-item-value {
  display: flex;
  align-items: flex-end;
  line-height: 1;
  color: var(--widgets-numbercard-color-text, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-item-value .cloud-wnumbercard-item-unit {
  font-size: var(--widgets-font-size-1, 12px);
  margin-left: 2px;
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-value-number.small {
  font-size: var(--widgets-font-size-3, 16px);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-value-number.medium {
  font-size: var(--widgets-font-size-5, 24px);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-normal {
  color: var(--widgets-color-normal, #0064c8);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-success {
  color: var(--widgets-color-green, #23b066);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-warning {
  color: var(--widgets-color-orange, #f98e1a);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-error {
  color: var(--widgets-color-red, #e84738);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-help {
  color: var(--widgets-color-yellow, #fac31e);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-mention {
  color: var(--widgets-color-purple, #6b67e0);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-p1 {
  color: var(--widgets-color-p1, #bf0030);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-p2 {
  color: var(--widgets-color-p2, #e84738);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-p3 {
  color: var(--widgets-color-p3, #f98e1a);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-p4 {
  color: var(--widgets-color-p4, #fac31e);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-p5 {
  color: var(--widgets-color-p5, #d1bb4f);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-p6 {
  color: var(--widgets-color-p6, #00bacf);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-p7 {
  color: var(--widgets-color-p7, #1289b8);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-default {
  color: var(--widgets-numbercard-color-text, #1a1a1a);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-question-icon {
  width: 14px;
  height: 14px;
  margin-left: 2px;
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-container {
  display: flex;
  flex-direction: row;
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-value-tag {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 20px;
  border-radius: 2px;
  margin-left: 8px;
  padding: 0 8px;
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-value-tag .cloud-wnumbercard-tag-trend {
  width: 10px;
  height: 12px;
  margin-right: 4px;
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-value-tag .cloud-wnumbercard-tag-value {
  font-size: var(--widgets-font-size-1, 12px);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-label-tag {
  height: 12px;
  display: flex;
  align-items: center;
  border-radius: 1px;
  margin-left: 8px;
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-label-tag .cloud-wnumbercard-tag-value {
  font-size: var(--widgets-font-size-1, 12px);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.normal {
  background: var(--widgets-color-bg-normal, rgba(202, 227, 253, 0.5));
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.normal span {
  color: var(--widgets-color-normal, #0064c8);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.normal svg {
  fill: var(--widgets-color-normal, #0064c8);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.success {
  background: var(--widgets-color-bg-green, rgba(209, 244, 225, 0.5));
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.success span {
  color: var(--widgets-color-green, #23b066);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.success svg {
  fill: var(--widgets-color-green, #23b066);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.warning {
  background: var(--widgets-color-bg-orange, rgba(255, 224, 191, 0.5));
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.warning span {
  color: var(--widgets-color-orange, #f98e1a);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.warning svg {
  fill: var(--widgets-color-orange, #f98e1a);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.error {
  background: var(--widgets-color-bg-red, rgba(252, 206, 202, 0.5));
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.error span {
  color: var(--widgets-color-red, #e84738);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.error svg {
  fill: var(--widgets-color-red, #e84738);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.help {
  background: var(--widgets-color-bg-yellow, rgba(255, 242, 204, 0.5));
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.help span {
  color: var(--widgets-color-yellow, #fac31e);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.help svg {
  fill: var(--widgets-color-yellow, #fac31e);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.mention {
  background: var(--widgets-color-bg-purple, rgba(215, 215, 252, 0.5));
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.mention span {
  color: var(--widgets-color-purple, #6b67e0);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.mention svg {
  fill: var(--widgets-color-purple, #6b67e0);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p1 {
  background: var(--widgets-color-bg-p1, rgba(242, 194, 206, 0.5));
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p1 span {
  color: var(--widgets-color-p1, #bf0030);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p1 svg {
  fill: var(--widgets-color-p1, #bf0030);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p2 {
  background: var(--widgets-color-bg-p2, rgba(252, 206, 202, 0.5));
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p2 span {
  color: var(--widgets-color-p2, #e84738);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p2 svg {
  fill: var(--widgets-color-p2, #e84738);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p3 {
  background: var(--widgets-color-bg-p3, rgba(255, 224, 191, 0.5));
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p3 span {
  color: var(--widgets-color-p3, #f98e1a);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p3 svg {
  fill: var(--widgets-color-p3, #f98e1a);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p4 {
  background: var(--widgets-color-bg-p4, rgba(255, 242, 204, 0.5));
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p4 span {
  color: var(--widgets-color-p4, #fac31e);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p4 svg {
  fill: var(--widgets-color-p4, #fac31e);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p5 {
  background: var(--widgets-color-bg-p5, rgba(255, 245, 196, 0.5));
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p5 span {
  color: var(--widgets-color-p5, #d1bb4f);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p5 svg {
  fill: var(--widgets-color-p5, #d1bb4f);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p6 {
  background: var(--widgets-color-bg-p6, rgba(174, 226, 235, 0.5));
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p6 span {
  color: var(--widgets-color-p6, #00bacf);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p6 svg {
  fill: var(--widgets-color-p6, #00bacf);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p7 {
  background: var(--widgets-color-bg-p7, rgba(175, 222, 240, 0.5));
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p7 span {
  color: var(--widgets-color-p7, #1289b8);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.p7 svg {
  fill: var(--widgets-color-p7, #1289b8);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.default {
  background: var(--widgets-numbercard-color-hover, rgba(229, 229, 229, 0.5));
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.default span {
  color: var(--widgets-color-text-2, #696969);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-tag-item.default svg {
  fill: var(--widgets-color-text-2, #696969);
}
.cloud-wnumbercard-data-item-container .cloud-wnumbercard-item-chart {
  display: flex;
  align-items: center;
  width: 100%;
}

.cloud-wnumbercard-data-overview-container {
  width: 100%;
  height: 100%;
}
.cloud-wnumbercard-data-overview-container .cloud-wnumbercard-data-overview-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.cloud-wnumbercard-data-overview-container .cloud-wnumbercard-divider {
  display: inline-block;
  width: 1px;
  background: var(--widgets-map-area-bg, #e5e5e5);
  height: 40px;
}