/* KC METEO — ANALYTICS ENHANCEMENTS v1 */


.kc-attention {
  margin-bottom: 9px;
  padding: 10px 11px;

  border-radius: 14px;

  background:
    rgba(25, 52, 68, .68);

  border:
    1px solid
    rgba(123, 202, 199, .10);
}


.kc-attention header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  margin-bottom: 7px;
}


.kc-attention header strong {
  font-size: 11px;
}


.kc-attention header small {
  color:
    rgba(172, 198, 207, .68);

  font-size: 8px;
}


.kc-attention-rows {
  display: grid;
  gap: 4px;
}


.kc-attention-row {
  display: grid;

  grid-template-columns:
    105px
    72px
    minmax(0, 1fr);

  align-items: center;

  min-height: 23px;

  padding: 0 7px;

  border-radius: 8px;

  background:
    rgba(8, 28, 40, .35);

  font-size: 8px;
}


.kc-attention-row > span {
  color:
    rgba(177, 202, 210, .78);
}


.kc-attention-row > strong {
  color:
    rgba(244, 249, 250, .96);

  font-size: 9px;
}


.kc-attention-row > small {
  overflow: hidden;

  color:
    rgba(152, 187, 198, .70);

  text-overflow: ellipsis;
  white-space: nowrap;
}


.kc-chart-active-guide {
  stroke:
    rgba(255, 188, 52, .96);

  stroke-width: 1.5;

  stroke-dasharray:
    3 2;

  pointer-events: none;
}


.kc-chart-tooltip {
  position: absolute;

  z-index: 20;

  display: none;

  width: 150px;

  padding: 7px 9px;

  border-radius: 9px;

  border:
    1px solid
    rgba(103, 222, 214, .36);

  background:
    rgba(8, 27, 38, .96);

  box-shadow:
    0 7px 20px
    rgba(0, 0, 0, .28);

  pointer-events: none;
}


.kc-chart-tooltip.visible {
  display: grid;

  gap: 3px;
}


.kc-chart-tooltip strong {
  color:
    rgba(104, 225, 213, .98);

  font-size: 9px;
}


.kc-chart-tooltip span {
  color:
    rgba(239, 248, 250, .92);

  font-size: 8px;
}