/* NexIP V9.23 - detail page density and charts */

.nx-out-detail-page .nx-out-detail-hero{
  margin-bottom:12px!important;
  border-radius:20px;
}
.nx-out-detail-page .nx-out-detail-hero .aero-container{
  padding-top:20px!important;
  padding-bottom:22px!important;
}
.nx-out-detail-page .nx-out-detail-hero h1{
  font-size:clamp(26px,2.7vw,38px);
  line-height:1.12;
}
.nx-out-detail-page .nx-out-detail-hero-actions{
  margin-top:12px;
}
.nx-out-detail-page .nx22-clarity{
  gap:12px;
  margin:10px 0 14px;
}
.nx-out-detail-page .nx22-clarity-card{
  padding:13px 17px;
  border-radius:15px;
}
.nx-out-detail-page .nx22-clarity-card h3{
  font-size:16px;
  margin-bottom:5px;
}
.nx-out-detail-page .nx22-clarity-card p{
  font-size:12px;
  line-height:1.5;
}
.nx-out-detail-page .nx22-kicker{
  font-size:10px;
  margin-bottom:5px;
}
.nx-out-detail-page .nx-out-detail-livebar{
  padding-top:14px;
  padding-bottom:14px;
}
.nx-out-detail-page .nx-out-v6-chart{
  margin:12px 0!important;
  padding:18px!important;
  border-radius:17px;
}
.nx-out-detail-page .nx-out-v6-chart h2{
  font-size:22px;
  margin-bottom:4px;
}
.nx-out-detail-page .nx-out-v6-chart>p{
  margin:5px 0 10px;
  line-height:1.45;
}
.nx-out-detail-page .nx-out-v6-bars{
  height:146px!important;
  padding-top:9px!important;
  background:repeating-linear-gradient(
    to top,
    rgba(170,194,225,.19) 0 1px,
    transparent 1px 36px
  );
  border-bottom:1px solid #c9daef;
  border-radius:8px 8px 0 0;
}
.nx-out-detail-page .nx-out-v6-bars>*{
  min-width:2px;
  border-radius:4px 4px 0 0;
  transition:filter .15s ease;
}
.nx-out-detail-page .nx-out-v6-bars>*:hover{
  filter:brightness(.84) saturate(1.2);
}
.nx-out-detail-page .nx-out-v6-chart:has(
  .nx-out-v6-empty:not([hidden])
) .nx-out-v6-bars{
  height:64px!important;
}
.nx-out-detail-page .nx-out-v6-switch{
  gap:5px;
}
.nx-out-detail-page .nx-out-latency-chart{
  padding:17px!important;
  border-radius:17px;
}
.nx-out-detail-page .nx-out-latency-plot{
  padding:7px 8px!important;
  min-height:0!important;
  border-radius:14px;
  background:linear-gradient(180deg,#fcfeff,#f5faff);
}
.nx-out-detail-page .nx-out-latency-plot svg{
  height:174px!important;
  max-height:174px;
  width:100%;
}
.nx-out-detail-page .nx-out-latency-plot.nx23-ready
svg:not(.nx23-trend){
  display:none!important;
}
.nx-out-detail-page .nx-out-latency-plot .nx23-trend{
  display:block;
}
.nx-out-detail-page .nx-out-latency-axis{
  margin-top:7px;
  font-size:12px;
  color:#687f9e;
}
.nx-out-detail-page .nx-out-monitor-panel,
.nx-out-detail-page .nx-out-history,
.nx-out-detail-page .nx-out-incident-history{
  border-radius:17px;
}
.nx-out-detail-page #nx-out-community{
  width:100%;
  max-width:none;
  margin-top:14px;
  padding:18px;
  border-radius:17px;
}
.nx-out-detail-page #nx-out-community
.nx-out-community-grid{
  gap:12px;
}
.nx-out-detail-page #nx-out-community textarea{
  min-height:90px;
}
.nx-out-detail-page #nx-out-community
.nx-out-comment{
  padding:12px 14px;
}
@media(max-width:760px){
  .nx-out-detail-page .nx-out-detail-hero .aero-container{
    padding-top:15px!important;
    padding-bottom:16px!important;
  }
  .nx-out-detail-page .nx22-clarity{
    grid-template-columns:1fr;
  }
  .nx-out-detail-page .nx-out-v6-chart{
    padding:13px!important;
  }
  .nx-out-detail-page .nx-out-v6-bars{
    height:118px!important;
  }
  .nx-out-detail-page .nx-out-latency-plot svg{
    height:156px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .nx-out-detail-page .nx-out-v6-bars>*{
    transition:none;
  }
}
