/*ANIMATE*/

.h-left{
  position:static;
  float: left;
  padding:0 10% 70px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width: 50%;
}

.h-stats{
  display:flex;
  gap:30px;
  margin-top:14px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.09);
}

.h-sn{
  font-size:2em;
  font-weight:700;
  color:var(--brand_blue);
  line-height:1;
}

.h-sl{
  font-size:0.8em;
  color:var(--grey);
  margin-top:4px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.h-right{
  position:static;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 0 0 0;
  width: 40%;
}

.h-vis{
  width:500px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(0,159,227,.22);
  border-radius:5px;
  overflow:hidden;
}

.h-vis-hd{
  background:var(--mid_blue);
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:6px;
  border-bottom:2px solid var(--brand_blue);
}

.h-vis p{
  margin: 0;
}

.hd{
  width:7px;
  height:7px;
  border-radius:50%;
}

.green {
  background-color: #22C55E;
}

.orange {
  background-color: #F59E0B;
}

.red {
  background-color: #EF4444;
}

.h-vis-b{
  padding:16px;
}

.hvl{
  font-size:0.7em;
  color:var(--brand_blue);
  letter-spacing:.1em;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:9px;
}

.hbr{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
}

.hbl{
  font-size:0.8em;
  color:var(--grey);
  width:120px;
  flex-shrink:0;
}

.hbt{
  flex:1;
  height:5px;
  background:rgba(255,255,255,.07);
  border-radius:3px;
}

.hbf{
  height:100%;
  border-radius:3px;
  background:var(--brand_blue);
  width:0;
  transition:width 1.2s ease;
}

.hbv{
  font-size:0.8em;
  color:var(--off);
  width:24px;
  text-align:right;
}

.hg{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:14px;
}

.hc{
  background:rgba(0,159,227,.08);
  border:1px solid rgba(0,159,227,.17);
  border-radius:3px;
  padding:9px 11px;
}

.hcn{
  font-size:1.1em;
  font-weight:700;
  color:var(--brand_blue);
  line-height:1;
}

.hcl{
  font-size:0.7em;
  color:var(--grey);
  margin-top:3px;
}

.hst{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:11px;
  font-size:0.8em;
  color:var(--grey);
}

.dot-g{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#22C55E;
  flex-shrink:0;
  animation:pu 2s infinite;
}

@media screen and (max-width: 1080px){

/*DASHBOARD*/

.h-left {
  width: 90%;
}

.h-right {
  width: 70%;
  justify-content: left;
}

.h-vis {
  width: 100%;
}

}


@media screen and (max-width: 768px){ 

.h-stats {
  gap: 15px;
} 

.h-right {
  width: 100%;
  justify-content: left;
}

}


@media screen and (max-width: 576px){

.h-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

}