body{
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    background:#d0d0d0;
}

.main-header {
    background-color: #fff;
    padding: 1.1rem 0;
}

.logo-img {
    max-height: 100px;
    height: auto;
}

.header-userinfo {
    font-size: 0.95rem;
}

.bg-appblue {
    background-color: #4da3e6;
}

.nav-pill {
    background-color: #2f8cdb;
    border-radius: 0.5rem;
    margin: 0 0.5rem;
    color: #fff !important;
    transition: background-color 0.15s;
}
.nav-pill:hover,
.nav-pill:focus {
    background-color: #1e7acb;
    color: #fff !important;
}
.nav-pill.active {
    background-color: rgba(255,255,255,0.4);
    color: #fff !important;
    pointer-events: none;
}

.navbar-brand img{height:64px;}
.navbar-clear{
    background:#3498db;
    border-bottom:3px solid #1d6fa8;
}
.navbar-clear .nav-link{
    color:#fff!important;
    font-weight:600;
}
.navbar-clear .nav-link.active,
.navbar-clear .nav-link.disabled{
    background:rgba(255,255,255,.45)!important;
    color:#1c1c1c!important;
}
.navbar-clear .btn-outline-light{
    --bs-btn-color:#fff;
    --bs-btn-border-color:#fff;
    --bs-btn-hover-bg:#fff;
    --bs-btn-hover-color:#0d6efd;
}

.brand-logo-bg {
    background-color: #fff;
    padding: 0rem 0rem;
    border-radius: 0.25rem;
}

.brand-logo-bg img {
    max-height: 2rem;
}

.text-dark-50 {
    color: rgba(0, 0, 0, 0.5) !important;
}

.panel{
    position:relative;
    width:900px;height:475px;
    background:#faf8eb;border-radius:32px;overflow:hidden;
    padding:1rem 1.8rem 1.8rem;margin:1rem auto;
}
.panel-frame{position:absolute;inset:0;width:900px;height:475px;pointer-events:none;z-index:1;}
.panel::after{
    content:'';
    position:absolute;
    inset:0;
    background:url("../img/clearamine_watermark.svg") center/68% no-repeat;
    opacity:1;
    z-index:20;
    width:430px;
    height:120px;
    top:200px;
    left:325px;
}

.panel-header{position:absolute;top:55px;left:500px;right:75px;height:22px;
              display:flex;align-items:center;font-size:.85rem;font-weight:600;z-index:4;}
.panel-footer{position:absolute;bottom:10px;left:500px;right:100px;height:22px;
              display:flex;align-items:center;font-size:1.2rem;font-weight:600;z-index:4;}
#updateTime{opacity:.7;}
.indicator{width:.65rem;height:.65rem;border-radius:50%;background:#adb5bd;box-shadow:0 0 0 2px #faf8eb,0 0 4px 2px rgba(0,0,0,.12);} 
.indicator-mobile{width:.65rem;height:.65rem;border-radius:50%;background:#adb5bd;box-shadow:0 0 0 2px #faf8eb,0 0 4px 2px rgba(0,0,0,.12);} 

.mobile-status{display:none;}

.layout-grid{
    z-index:3;display:grid;height:100%;padding-top:3.0rem;padding-left:3.5rem;
    grid-template-columns:275px 1fr;column-gap:2rem;
}

.gauge-big{position:relative;width:325px;justify-self:center;}

.rect-grid{
    display:grid;
    grid-template-columns:140px 140px 140px;
    grid-template-rows:200px 150px;
    row-gap:1rem;column-gap:1rem;
    align-items:center;justify-items:center;
}

canvas.gauge{width:325px!important;height:325px!important;}
canvas.gauge.small{width:150px!important;height:150px!important;}

.gauge-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateY(10%);}
.gauge-value{font-weight:700;font-size:2.1rem;}
.gauge-unit{font-size:.75rem;opacity:.8;}
.gauge-label.small{transform:translateY(25%);}
.gauge-label.small .gauge-value{font-size:1.4rem;}
.gauge-label.small .gauge-unit{font-size:.7rem;}

.gauge-curve{position:absolute;inset:0;pointer-events:none;}
.curve-text{font:700 1.2rem/1 "Helvetica Neue",Arial,sans-serif;fill:#1c1c1c;transform:translateY(-2%);}
.gauge-curve.small .curve-text{font-size:1rem;transform:translateY(-1%);}

.metric-card{
    width:140px;background:#e9ecef;border-radius:8px;padding:.45rem .8rem;
    text-align:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
}
.metric-value{font-size:1.34rem;font-weight:700;}
.metric-unit{font-size:.68rem;opacity:.68;}
.metric-label{font-size:.64rem;opacity:.8;margin-top:.12rem;}

.blink{animation:blinker 1s linear infinite;}@keyframes blinker{50%{opacity:0;}}
#alertBadge{font-size:1.35rem;letter-spacing:.05rem;font-weight:700;background:#ffb46a;color:#b03000;border:2px solid #b03000;padding:.15rem 1.2rem;}

@media (max-width: 991.98px){
  .panel{width:100%;height:auto;background:transparent;border-radius:0;padding:0;margin:0;}
  .panel::after{display:none;}
  .panel-frame{display:none;}
  .panel-header{display:none;}
  .panel-footer{display:none;}
  .indicator{display:none;}
  .mobile-status{display:flex;align-items:center;gap:.5rem;background:#faf8eb;border-bottom:1px solid rgba(0,0,0,.1);padding:.5rem .75rem;border-radius:.5rem;}
  .layout-grid{padding:.75rem .5rem 1rem .5rem;grid-template-columns:1fr;row-gap:1rem;}
  .gauge-big{width:auto;justify-self:center;}
  .rect-grid{grid-template-columns:1fr;grid-template-rows:auto;row-gap:1rem;column-gap:0;justify-items:center;align-items:center;}
  #gaugeBoxCo2{display:none!important;}
  #gaugeBoxRelh{display:none!important;}
  #metricAirTemp{display:none!important;}
  #metricAirPress{display:none!important;}
  #metricNcl3_1h{width:100%;max-width:320px;justify-self:center;}
  #metricNcl3_8h{width:100%;max-width:320px;justify-self:center;}
  canvas.gauge{width:150px!important;height:150px!important;}
  .gauge-label{transform:translateY(25%);}
  .gauge-label .gauge-value{font-size:1.4rem;}
  .gauge-label .gauge-unit{font-size:.7rem;}
  .gauge-curve{display:block;inset:0;}
  .gauge-curve .curve-text{font-size:1rem;transform:translateY(-1%);}
  .metric-card{width:100%;max-width:320px;justify-self:center;}
}