@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Roboto+Mono:wght@400;700&display=swap');

body {
  display: flex;
  flex-direction: column;
}

.dropdown-menu {
  z-index: 1025;
}

.breadcrumb {
  padding: .75rem 1rem;
  background-color: #e9ecef;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

@media only screen and (max-height: 420px) {
  .breadcrumb {
    display: none;
  }
}


.threshold-red .threshold-textcolor {
  color: var(--bs-danger);
  font-weight: 700;
}




tr.treven {
  background-color: #eee;
}

tr.trodd {
  background-color: #fff;
}

td.widecell {
  border-top: 1px solid #dee2e6;
  border-bottom: 0px;
}

th.widecell {
  border-top: 1px solid #dee2e6;
  border-bottom: 0px;
}

td.hcell {
  border-top: 1px solid #dee2e6;
  border-bottom: 0px;
}

th.hcell {
  border-top: 1px solid #dee2e6;
  border-bottom: 0px;
}

td.stablecell {
  border-top: 0px;
  border-bottom: 0px;
}

th.stablecell {
  border-top: 0px;
  border-bottom: 0px;
}

.audit {
  vertical-align: top;
}

.zoombar button.btn {
    padding-right: max( 1px, min( 0.5rem, calc( 3vw - 7px ) ) );
    padding-left: max( 1px, min( 0.5rem, calc( 3vw - 7px ) ) );
}

.fulltable th, .fulltable td {
    vertical-align: baseline;
}


@media (min-width: 576px) {
  td.stablecell-sm {
    border-top: 1px solid #dee2e6;
  }
  th.stablecell-sm {
    border-top: 1px solid #dee2e6;
  }
}

@media (min-width: 768px) {
  td.stablecell-md {
    border-top: 1px solid #dee2e6;
  }
  th.stablecell-md {
    border-top: 1px solid #dee2e6;
  }
}

@media (min-width: 960px) {
  td.stablecell-lg {
    border-top: 1px solid #dee2e6;
  }
  th.stablecell-lg {
    border-top: 1px solid #dee2e6;
  }
}

@media (min-width: 1140px) {
  td.stablecell-xl {
    border-top: 1px solid #dee2e6;
  }
  th.stablecell-xl {
    border-top: 1px solid #dee2e6;
  }
}


.if-charging {
  display: none;
}
.threshold-charging .if-charging {
  display: inline;
}
.if-ok {
  display: none;
}
.threshold-ok .if-ok {
  display: inline;
}
.if-mid {
  display: none;
}
.threshold-mid .if-mid {
  display: inline;
}
.if-low {
  display: none;
}
.threshold-low .if-low {
  display: inline;
}

.if-offline {
  display: none;
}
.offline .if-offline {
  display: inline;
}
.if-online {
  display: none;
}
.online .if-online {
  display: inline;
}

.if-offline-block {
  display: none;
}
.offline .if-offline-block {
  display: block;
}
.if-online-block {
  display: none;
}
.online .if-online-block {
  display: block;
}

.if-noalarm {
  display: none;
}
.noalarm .if-noalarm {
  display: inline;
}
.if-mutedalarm {
  display: none;
}
.mutedalarm .if-mutedalarm {
  display: inline;
}
.if-soundingalarm {
  display: none;
}
.soundingalarm .if-soundingalarm {
  display: inline;
}



.fulltable-measurement {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  text-align: right;
  white-space: nowrap;
  line-height: max( 1.4rem, calc( 2.5vw + 0.1rem) ) ;
}

.fulltable-measurement .scalar {
  font-size: max( 1rem, 2.5vw );
}
.fulltable-measurement .spacesuffix {
  font-size: max( 1rem, 2.0vw );
}





.ccard-container {
  display: flex;
  flex-wrap: wrap;
}
.ccard-inner {
  position: relative;
  margin-right: 1rem;
  margin-bottom: 1rem;
}
.ccard {
  z-index: -1;
  border: 1px solid #888888;
  box-shadow: 2px 2px 6px #0002;
  border-radius: 3px;
}

.threshold-red .ccard {
    background:radial-gradient(ellipse at top,#fff,#fffefe,#ffe6e6);
}

.ccard-body {
}
.ccard-title {
  font-weight: bold;
  margin-bottom: 0;
  border-bottom: 1px solid #e0e0e0;
  white-space: nowrap;
}
.ccard-text {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}
.ccard-measurement {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  padding: 0.2rem 0.8rem 0.2rem 0.8rem;
  text-align: center;
  white-space: nowrap;
}
.ccard-measurement .scalar {
  font-size: max(1.1rem, min( 5vw, max( 2rem, 3vw ) ) );
}
.ccard-measurement .spacesuffix {
  font-size: max(1.1rem, min( 4vw, max( 1.6rem, 2.2vw ) ) );
}
.scalar {
  text-align: right;
  display: inline-block;
}

.readingmax-measurement {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  text-align: center;
  white-space: nowrap;
}

.e-draggable {
  cursor: all-scroll;
}

.e-para {
  border-bottom: 1px dashed #808080;
}

.e-chart .e-sp {
  float:right;
}

.e-chart .e-del {
  border:0px;
}

.e-para-title .e-del {
  float:right;
  border:0px;
}

.e-chart-title .e-del {
  float:right;
  border:0px;
}


.dropdown-menu > .e-channel {
  display: block;
  width: 100%;
  padding: 0.25rem 1rem;
  clear: both;
  font-weight: 400;
  white-space: nowrap;
}

.e-rows > .e-channel {
  border-top: 1px solid #dee2e6;
  padding: 0.25rem;
}

.e-rows .e-sp {
  float:right;
}

.e-rows .e-del {
  border:0px;
}

.e-readings > .e-channel {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #888888;
  box-shadow: 2px 2px 6px #0002;
  border-radius: 3px;
  margin-right: 1rem;
  margin-bottom: 1rem;
  font-weight: bold;
  padding-left: 0.2rem;
  height: 3em;
}

.e-readings .e-sp {
  width: 2em;
}

.e-readings .e-del {
}

.chart {
  width: 440px;
  height: 200px;
  margin-bottom: 0.2em;
}

@media only screen and (max-width: 1500px) {
  .chart {
    width: calc(((100vw - 2rem) - 4rem)/3 - 2px);
    height: 200px;
  }
}

@media only screen and (max-width: 1000px) {
  .chart {
    width: calc(((100vw - 2rem) - 3rem)/2 - 2px);
    height: 200px;
  }
}

@media only screen and (max-width: 600px) {
  .chart {
    width: calc(((100vw - 2rem) - 2rem)/1 - 2px);
    height: 200px;
  }
}