body {
  background: #fafafa;
  color: #333333;
  margin: 0;
  /* the shell (shell.css) owns the top-left corner: the rail and the top bar */
  padding-top: var(--shell-top, 48px);
  padding-left: var(--shell-left, 0px);
}

h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

h2{
  font-size:medium;
}

.content-section {
  background: #ffffff;
  padding: 10px 8px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

#qr-canvas {
  margin: auto;
  width: calc(100% - 20px);
  max-width: 400px;
}

#btn-scan-qr {
  cursor: pointer;
}

#btn-scan-qr img {
  height: 10em;
  padding: 15px;
  margin: 15px;
  background: white;
}

.accordion-body{
  padding:0;
}

.accordion-item{
  padding: 0;
}

.bg-success{
  color: white;

}

.bg-danger{
  color:white;
  
}
/* #qr-result {
  font-size: 1.2em;
  margin: 20px auto;
  padding: 20px;
  max-width: 700px;
  background-color: white;
} */

/* *.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
} */

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#cookieConsentHeader {
  color: white;
  font-size: 1.75em
}

/* empty states */
/* _empty_state.html: the card a Monitoring page shows when it has nothing to
   list. Same language as the signed-out door (monitor_door.html). */
.ss-empty {
  max-width: 480px;
  margin: 40px auto;
  padding: 28px 24px;
  text-align: center;
  background: var(--ss-chrome-card, #fff);
  border: 1px solid var(--ss-chrome-line, #DEE3DA);
  border-radius: 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ss-empty .ss-ic { width: 64px; height: 64px; color: var(--ss-chrome-navy, #1A3D6B); } /* single-tone symbols (the star) take the title's navy */
.ss-empty-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ss-chrome-navy, #1A3D6B);
  margin: 12px 0 4px;
}
.ss-empty-line {
  color: var(--ss-chrome-muted, #5D6B61);
  font-size: 1rem;
  line-height: 1.45;
  margin: 0;
}
.ss-empty-btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.ss-empty-btns a {
  min-width: 150px;
  padding: 11px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}
.ss-empty-primary { background: var(--ss-chrome-ink, #212529); color: #fff; }
.ss-empty-primary:hover, .ss-empty-primary:focus-visible { background: #343a40; color: #fff; }
.ss-empty-secondary {
  background: var(--ss-chrome-card, #fff);
  color: var(--ss-chrome-navy, #1A3D6B);
  border: 1.5px solid var(--ss-chrome-rule, #428BCA);
}
.ss-empty-secondary:hover, .ss-empty-secondary:focus-visible { background: var(--ss-chrome-paper, #EAF1F8); color: var(--ss-chrome-navy, #1A3D6B); }
@media (max-width: 480px) {
  .ss-empty { margin: 20px 10px; padding: 22px 16px; }
  .ss-empty-btns a { flex: 1 1 100%; }
}

/* ---- page header (Monitor settings pages) ---------------------------------
   One shape for every settings page: a subdued way back to the module bar's
   parent ("‹ Sites", "‹ Devices"), the page's real title in navy, and an
   optional primary action on the right. Colours from tokens.css.

     <div class="ss-page-head">
       <a class="ss-page-back" href="/userdevices">‹ Devices</a>
       <div class="ss-page-row">
         <h1 class="ss-page-title">Rick's Hub</h1>
         <div class="ss-page-actions"><button class="btn btn-success btn-sm">Save</button></div>
       </div>
     </div>
*/
.ss-page-head {
  margin: 14px 0 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--ss-chrome-line, #DEE3DA);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ss-page-back {
  display: inline-block;
  color: var(--ss-chrome-muted, #5D6B61);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 2px;
}
.ss-page-back:hover, .ss-page-back:focus-visible { color: var(--ss-chrome-navy, #1A3D6B); text-decoration: underline; }
.ss-page-row { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.ss-page-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--ss-chrome-navy, #1A3D6B);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.ss-page-actions { flex: none; display: flex; align-items: center; gap: 8px; }

/* battery meter (templates/_battery.html + static/js/sapspy-battery.js) */
.ss-bat { display: inline-block; width: 36px; height: 17px; vertical-align: middle; line-height: 0; }
.ss-bat svg { width: 100%; height: 100%; display: block; }
.ss-bat .ss-bat-body { fill: none; stroke: #444; stroke-width: 1.5; }
.ss-bat .ss-bat-nub { fill: #444; }
.ss-bat .ss-bat-fill { fill: #2e8b3d; width: calc(21px * var(--pct, 0) / 100); transition: width 250ms ease, fill 250ms ease; }
.ss-bat.is-mid .ss-bat-fill { fill: #d99a44; }
.ss-bat.is-low .ss-bat-fill { fill: #c62828; }
.ss-bat.is-unknown .ss-bat-fill { fill: #bbb; width: 0; }
.ss-bat.is-unknown .ss-bat-body { stroke: #999; }
@media (prefers-reduced-motion: reduce) { .ss-bat .ss-bat-fill { transition: none; } }