/* ONCC Homepage Trend Chart v1.0 */

.onccf-home-trend__lead{
  margin:5px 0 0!important;
  color:#6a7a87!important;
  font-size:12px!important;
}

.onccf-home-trend__summary{
  margin-bottom:12px;
}

.onccf-home-trend-chart{
  position:relative;
  margin:12px 0 15px;
  padding:16px;
  border:1px solid #d8e1e7;
  border-radius:12px;
  background:#fff;
  box-shadow:0 4px 14px rgba(7,20,31,.035);
}

.onccf-home-trend-chart__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}

.onccf-home-trend-chart__head span,
.onccf-home-trend-chart__head strong,
.onccf-home-trend-chart__current small,
.onccf-home-trend-chart__current strong{
  display:block;
}

.onccf-home-trend-chart__head span{
  color:#758592;
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.onccf-home-trend-chart__head strong{
  margin-top:2px;
  color:#102a43;
  font-size:17px;
}

.onccf-home-trend-chart__current{
  text-align:right;
}

.onccf-home-trend-chart__current small{
  color:#758592;
  font-size:10px;
}

.onccf-home-trend-chart__current strong{
  margin-top:2px;
  color:#102a43;
  font-size:22px;
}

.onccf-home-trend-chart__canvas{
  position:relative;
  width:100%;
  min-height:280px;
}

.onccf-home-trend-chart__canvas svg{
  display:block;
  width:100%;
  height:auto;
  min-height:260px;
  overflow:visible;
}

.onccf-trend-grid{
  stroke:#e7edf1;
  stroke-width:1;
}

.onccf-trend-zero{
  stroke:#9aa8b2;
  stroke-width:1.25;
  stroke-dasharray:5 5;
}

.onccf-trend-axis-label{
  fill:#71818e;
  font-size:11px;
  font-family:inherit;
}

.onccf-trend-area{
  fill:rgba(18,59,82,.08);
}

.onccf-trend-line{
  fill:none;
  stroke:#123b52;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.onccf-trend-point{
  fill:#d3a53b;
  stroke:#fff;
  stroke-width:3;
  cursor:pointer;
  outline:none;
}

.onccf-trend-point:focus,
.onccf-trend-point:hover{
  r:7;
  fill:#b48218;
}

.onccf-home-trend-tooltip{
  position:absolute;
  z-index:4;
  top:68px;
  min-width:170px;
  display:grid;
  gap:3px;
  padding:9px 11px;
  border:1px solid #193b51;
  border-radius:8px;
  background:#092237;
  color:#fff;
  box-shadow:0 10px 28px rgba(7,20,31,.2);
  pointer-events:none;
  transform:translateX(-35%);
}

.onccf-home-trend-tooltip strong{
  color:#f1cf74;
  font-size:11px;
}

.onccf-home-trend-tooltip span{
  font-size:10.5px;
}

.onccf-home-trend-chart__empty{
  min-height:190px;
  display:grid;
  place-items:center;
  align-content:center;
  padding:26px;
  border:1px dashed #c9d3da;
  border-radius:10px;
  background:#f8fafb;
  text-align:center;
}

.onccf-home-trend-chart__empty strong{
  color:#102a43;
  font-size:17px;
}

.onccf-home-trend-chart__empty p{
  max-width:650px;
  margin:7px auto 0!important;
  color:#6b7c89!important;
  font-size:12.5px!important;
  line-height:1.65!important;
}

@media(max-width:760px){
  .onccf-home-trend-chart{
    padding:11px;
  }

  .onccf-home-trend-chart__head{
    align-items:flex-end;
    margin-bottom:7px;
  }

  .onccf-home-trend-chart__head strong{
    font-size:14px;
  }

  .onccf-home-trend-chart__current strong{
    font-size:18px;
  }

  .onccf-home-trend-chart__canvas{
    min-height:230px;
  }

  .onccf-home-trend-chart__canvas svg{
    min-height:220px;
  }

  .onccf-trend-axis-label{
    font-size:13px;
  }

  .onccf-home-trend-tooltip{
    top:55px;
    min-width:150px;
    transform:translateX(-20%);
  }

  .onccf-home-trend-chart__empty{
    min-height:150px;
    padding:18px 14px;
  }

  .onccf-home-trend-chart__empty strong{
    font-size:15px;
  }

  .onccf-home-trend-chart__empty p{
    font-size:12px!important;
  }
}