/* =========================================================
   KONECTA VIZ V14
   ========================================================= */

.kc-v14-zone{
  margin:0 0 18px;
}

.kc-v14-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px;
}

.kc-v14-3{grid-column:span 3}
.kc-v14-4{grid-column:span 4}
.kc-v14-5{grid-column:span 5}
.kc-v14-6{grid-column:span 6}
.kc-v14-7{grid-column:span 7}
.kc-v14-8{grid-column:span 8}
.kc-v14-12{grid-column:span 12}

.kc-v14-card{
  position:relative;
  overflow:hidden;
  min-height:160px;
  border:1px solid rgba(92,164,234,.15);
  border-radius:19px;
  background:
    radial-gradient(circle at 88% 0%,rgba(43,140,255,.10),transparent 38%),
    linear-gradient(155deg,#0d2239,#081827);
  box-shadow:
    0 14px 35px rgba(0,0,0,.13);
}

.kc-v14-card:before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-120px;
  top:-130px;
  border-radius:50%;
  border:28px solid rgba(50,224,255,.025);
}

.kc-v14-inner{
  position:relative;
  z-index:2;
  padding:17px;
}

.kc-v14-label{
  color:#6f88a2;
  font-size:7px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.kc-v14-title{
  margin-top:5px;
  color:#eef7ff;
  font-size:11px;
  font-weight:800;
}

.kc-v14-value{
  margin-top:13px;
  font-size:25px;
  line-height:1;
  font-weight:850;
  letter-spacing:-1px;
}

.kc-v14-chart{
  height:105px;
  margin-top:12px;
}

.kc-v14-chart.large{
  height:230px;
}

.kc-v14-chart canvas{
  width:100%;
  height:100%;
  display:block;
}

/* segmented gauge */

.kc-segment-gauge{
  display:flex;
  gap:4px;
  margin-top:20px;
}

.kc-segment-gauge i{
  flex:1;
  height:10px;
  border-radius:99px;
  background:rgba(255,255,255,.055);
}

.kc-segment-gauge i.on:nth-child(-n+3){
  background:linear-gradient(90deg,#2b8cff,#32e0ff);
  box-shadow:0 0 8px rgba(50,224,255,.18);
}

.kc-segment-gauge i.on:nth-child(n+4):nth-child(-n+6){
  background:linear-gradient(90deg,#32e0ff,#8bf56c);
}

.kc-segment-gauge i.on:nth-child(n+7){
  background:linear-gradient(90deg,#ffad52,#ff5e76);
}

/* dot matrix */

.kc-dot-matrix{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:5px;
  margin-top:14px;
}

.kc-dot-matrix i{
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(83,137,190,.10);
}

.kc-dot-matrix i.blue{
  background:#2b8cff;
  box-shadow:0 0 7px rgba(43,140,255,.35);
}

.kc-dot-matrix i.cyan{
  background:#32e0ff;
  box-shadow:0 0 7px rgba(50,224,255,.35);
}

.kc-dot-matrix i.purple{
  background:#9c73ff;
  box-shadow:0 0 7px rgba(156,115,255,.35);
}

/* stat pills */

.kc-stat-pills{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:13px;
}

.kc-stat-pill{
  padding:7px 9px;
  border:1px solid rgba(97,166,233,.12);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  font-size:7px;
  color:#8097ae;
}

.kc-stat-pill strong{
  margin-left:4px;
  color:#e8f4ff;
}

/* activity histogram */

.kc-mini-histogram{
  height:95px;
  display:flex;
  align-items:flex-end;
  gap:4px;
  margin-top:14px;
}

.kc-mini-histogram i{
  flex:1;
  min-width:4px;
  border-radius:4px 4px 1px 1px;
  background:linear-gradient(180deg,#32e0ff,#2b8cff);
  transition:height .4s ease;
}

.kc-mini-histogram i:nth-child(3n){
  background:linear-gradient(180deg,#9c73ff,#2b8cff);
}

.kc-mini-histogram i:nth-child(5n){
  background:linear-gradient(180deg,#ef62d5,#9c73ff);
}

/* glow text */

.kc-glow-cyan{
  color:#32e0ff;
  text-shadow:0 0 16px rgba(50,224,255,.24);
}

.kc-glow-lime{
  color:#8bf56c;
  text-shadow:0 0 16px rgba(139,245,108,.22);
}

.kc-glow-purple{
  color:#9c73ff;
  text-shadow:0 0 16px rgba(156,115,255,.24);
}

.kc-glow-orange{
  color:#ffad52;
  text-shadow:0 0 16px rgba(255,173,82,.23);
}

/* scanning shine */

.kc-v14-card.kc-animated:after{
  content:"";
  position:absolute;
  top:-50%;
  left:-70%;
  width:40%;
  height:200%;
  transform:rotate(20deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.025),
    transparent
  );
  animation:kcScan 8s linear infinite;
}

@keyframes kcScan{
  0%{left:-70%}
  100%{left:140%}
}

@media(max-width:1050px){

  .kc-v14-3,
  .kc-v14-4{
    grid-column:span 6;
  }

  .kc-v14-5,
  .kc-v14-7,
  .kc-v14-8{
    grid-column:span 12;
  }

}

@media(max-width:720px){

  .kc-v14-3,
  .kc-v14-4,
  .kc-v14-5,
  .kc-v14-6,
  .kc-v14-7,
  .kc-v14-8,
  .kc-v14-12{
    grid-column:span 12;
  }

}