body {
  font-family: Arial, sans-serif;
  background: #1b1b2a;
  color: #f5f5f5;
  text-align: center;
  margin: 0;
  padding: 0 10px;
}

h1 {
  margin-top: 20px;
}

#status {
  margin: 10px 0;
  font-weight: bold;
  color: #00ffff;
}

:root {
  --blib-font-size-main: 256px;
  --blib-font-size-sub: 156px;
  --blib-logo-color: #c0c0c0;
  /* Metal 1 Color */
  --blib-sub-color: #876e07;
  /* Gold 12 Color */
  --blib-shadow-color-black-half: rgba(0, 0, 0, 0.5);
  --blib-background-gradient-basic-darkgray-135: linear-gradient(135deg, #121212, #3e3e3e);
}

.bootlib-logo-container {
  font-size: 10px;;
  text-align: center;
  position: relative;
}

.bootlib-logo-text {
  font-size: var(--blib-font-size-main);
  font-weight: bold;
  color: var(--blib-logo-color);
  background: linear-gradient(90deg, #f0f0f0, #b3b3b3, #666666);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 8px var(--blib-shadow-color-black-half), 0 -2px 4px rgba(255, 255, 255, 0.3);
  display: inline-block;
  vertical-align: middle;
}

.bootlib-lib-text {
  font-size: calc(var(--blib-font-size-sub) / 2.66);
  font-weight: bold;
  color: var(--blib-sub-color);
  position: absolute;
  top: calc(var(--blib-font-size-sub) / 5.33);
  center: calc(-1 * var(--blib-font-size-sub) * 90.005);
  text-shadow: 0 2px 5px var(--blib-shadow-color-black-half);
  transform: translateY(-50%);
}

.bootlib-lib-text-logo {
  font-family: "f2";
  margin-left: -350px;
  font-size: calc(var(--blib-font-size-sub) / 5.66);
  font-weight: bold;
  color:  #b3b3b3;
  position: absolute;
  top: calc(var(--blib-font-size-sub) / 50.33);
  center: calc(-1 * var(--blib-font-size-sub) * 90.005);
  text-shadow: 0 2px 5px var(--blib-shadow-color-black-half);
  transform: translateY(-50%);
}

.fontData {
  font-family: "f3";
  font-size: 70px;
  font-weight: 900px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #060ca6;
  text-shadow: 0 1px 0 #777,
    0 -1px 1px #eee,
    0px 4px 3px rgba(0, 0, 0, 0.4),
    0px 8px 13px rgba(0, 0, 0, 0.1),
    0px 18px 23px rgba(0, 0, 0, 0.1);
}

.fontDatab {
  font-family: "f3";
  font-size: 100px;
  font-weight: 900px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #e5214c;
  text-shadow: 0 1px 0 #777,
    0 -2px 2px #eee,
    0px 4px 3px rgba(0, 0, 0, 0.4),
    0px 8px 13px rgba(0, 0, 0, 0.1),
    0px 18px 23px rgba(0, 0, 0, 0.1);
}

.fontDataOpis {
  font-family: "f4";
  font-size: 300%;
  font-weight: 900px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #000007;
  text-shadow: 0 1px 0 #777,
    0 -1px 1px #eee,
    0px 4px 3px rgba(0, 0, 0, 0.4),
    0px 8px 13px rgba(0, 0, 0, 0.1),
    0px 18px 23px rgba(0, 0, 0, 0.1);
    
}

.opis {
  height: 180px;
  padding: 20px;
  border-radius: 50px;
  background: linear-gradient(to bottom, #ffffff0d 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.40) 120%) #176306;
  box-shadow: 10px 10px 30px #111, -10px -10px 30px #444;
  text-align: center;
  }


.container {
  align-items: center;  /* wyśrodkowanie w pionie*/
  position: center;     /*wyśrodkowanie w poziomie*/
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
  max-width: 1500px;
  /* W tym miejscu wprowadzam szerokość kontenera - ilość wskaźników */
  margin: 0 auto;
  padding-bottom: 40px;
}

.card {
  padding: 20px;
  border-radius: 150px;
  background: linear-gradient(to bottom, #ffffff0d 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.40) 120%) #9898984a;
  box-shadow: 10px 10px 30px #111, -10px -10px 30px #444;
  text-align: center;
}

@font-face {
  font-family: 'f2';
  src: url('../Font/zekton_rg.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'f3';
  src: url('../Font/Montserrat-Regular.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'f4';
  src: url('../Font/zekton_rg.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
}
.gheader {
  font-family: "f2";
  font-size: xx-large;
  font-weight: 900px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #000;
  text-shadow: 0 1px 0 #777,
    0 -1px 1px #eee,
    0px 4px 3px rgba(0, 0, 0, 0.4),
    0px 8px 13px rgba(0, 0, 0, 0.1),
    0px 18px 23px rgba(0, 0, 0, 0.1);
}

.gheadera {
  font-family: "f2";
  font-size: x-large;
  font-weight: 900px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #000;
  text-shadow: 0 1px 0 #777,
    0 -1px 1px #eee,
    0px 4px 3px rgba(0, 0, 0, 0.4),
    0px 8px 13px rgba(0, 0, 0, 0.1),
    0px 18px 23px rgba(0, 0, 0, 0.1);
}

.gheaderb {
  font-family: "f2";
  font-size: x-large;
  font-weight: 900px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #000;
  text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0, 0, 0, .1),
    0 0 5px rgba(0, 0, 0, .1),
    0 1px 3px rgba(0, 0, 0, .3),
    0 3px 5px rgba(0, 0, 0, .2),
    0 5px 10px rgba(0, 0, 0, .25),
    0 10px 10px rgba(0, 0, 0, .2),
    0 20px 20px rgba(0, 0, 0, .15);
}

.card span {
  font-weight: bold;
  margin-bottom: 12px;
  display: block;
  font-size: 20px;
}

.card canvas {
  width: 100% !important;
  height: auto !important;
  max-width: 400px;
  max-height: 400px;
  border-radius: 35%;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  align-items: left;
  box-shadow: 0 32px 16px 0 rgba(0, 0, 0, 0.14), 0 7px 30px 0 rgba(0, 0, 0, 0.19);
  color: rgb(241, 243, 241);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.40) 120%) #9898984a;
  background-blend-mode: multiply, multiply;
  font-family: 'Montserrat+Alternates', sans-serif;
  height: 350px;
  width: 350px;
  text-align: left;
}

/* kontener datepickera */
.datepicker-container {
  margin: 40px auto 60px auto;
  max-width: 300px;
  text-align: center;
}

/* styl Flatpickr podobny do Grafana */
.flatpickr-calendar {
  background-color: #1b1b2a !important;
  color: #f5f5f5 !important;
  border: 1px solid #555 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background-color: #00ffff !important;
  color: #000 !important;
}

.flatpickr-day.today {
  border-color: #00ffff !important;
}

.flatpickr-time input {
  color: #f5f5f5 !important;
  background: #2b2b3a !important;
}

body {
  font-family: Arial, sans-serif;
  background: #474748;
  color: #f5f5f5;
  text-align: center;
  margin: 0;
  padding: 0 10px;
}

.top-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.datepicker-container {
  margin-top: 10px;
  max-width: 350px;
  width: 100%;
  text-align: center;
}

/* styl Flatpickr podobny do Grafana */
.flatpickr-calendar {
  background-color: #1b1b2a !important;
  color: #f5f5f5 !important;
  border: 1px solid #555 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background-color: #00ffff !important;
  color: #000 !important;
}

.flatpickr-day.today {
  border-color: #00ffff !important;
}

.flatpickr-time input {
  color: #f5f5f5 !important;
  background: #2b2b3a !important;
}



/* sPrzyciski */


.relay-btn {
  padding: 12px 25px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.3s;
}

.relay-btn:hover {
  opacity: 0.8;
  filter: blur(0.5px);
  color: rgb(229, 232, 86);
}

/* pozostałe style panelu i wskaźników pozostają bez zmian */