/* ===== Allgemeines ===== */
#vis_container {
  font-family: Play-Regular;
  color: #C2C2C2;
}

/* ===== Header ===== */
.ws-bg_header {
  background: rgb(236, 238, 241);
  background: linear-gradient(180deg, rgba(236, 238, 241, 1) 0%, rgba(224, 222, 219, 1) 30%, rgba(213, 209, 204, 0.3337710084033614) 100%);
}

.ws_seitentitel {
  z-index: 10;
  font-family: Jura-DemiBold;
  font-size: 65px;
  color: #d5d1cc;
  text-shadow: 2px 2px 3px rgba(36, 36, 36, 50);
}

/* ===== Navigation ===== */
.ws-navbutton {
  background: rgb(20, 24, 52);
  background: radial-gradient(circle, rgba(20, 24, 52, 1) 0%, rgba(19, 22, 47, 1)100%);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .5);
  filter: blur(0.2px);
  border-width: 0.1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, .425);
  color: rgb(236, 238, 241);
}

/* ===== Content ===== */
.ws-bg_content {
  z-index: 0;
  background: #536976;
  background: -webkit-linear-gradient(to bottom, #292E49, #536976);
  background: linear-gradient(to bottom, #292E49, #536976);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .5);
  filter: blur(0.2px);
  border-width: 0.1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, .425);
}

.ws-ueberschrift, .ws-ueberschrift-wetter, .table-status-headline, .table-status-headline1, .ws-ueberschrift-tanke {
  z-index: 3;
  font-family: RussoOne-Regular;
  text-align: center;
  font-size: 30px;
  font-style: normal;
  font-variant: small-caps;
  line-height: 1.6;
  background: rgb(20, 24, 52);
  background: radial-gradient(circle, rgba(20, 24, 52, 1) 0%, rgba(19, 22, 47, 1)100%);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
  box-shadow: 0 5px 18px #0e0e23;
  border-radius: 20px 20px 0px 0px;
  border-width: 0.1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, .425);
  color: #ebeae5;
  letter-spacing: .1em;
  text-shadow:
    -1px -1px 1px #111,
    2px 2px 1px #363636;
}

.ws-ueberschrift-grafana {
  z-index: 3;
  font-family: RussoOne-Regular;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-variant: small-caps;
  line-height: 1.6;
  background: rgb(20, 24, 52);
  background: radial-gradient(circle, rgba(20, 24, 52, 1) 0%, rgba(19, 22, 47, 1)100%);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
  box-shadow: 0 5px 18px #0e0e23;
  border-radius: 20px 20px 0px 0px;
  border-width: 0.1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, .425);
  color: #ebeae5;
  letter-spacing: .1em;
  text-shadow:
    -1px -1px 1px #111,
    2px 2px 1px #363636;
}

/* ===== Tabelle-Status ===== */
.table-status-headline1 {
  border-radius: 0px 0px 0px 0px;
}

.table-status {
  width: 95%;
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
}

.table-status .table-status-icon {
  width: 10%;
}

.table-status .table-status-icon img {
  width: 40px;
  height: auto;
}

.table-status .table-status-device {
  //margin-left: 15px;
  width: 50%;
}

.table-status .table-status-time {
  width: 30%;
  text-align: right;
}

/* ===== Kalender ===== */
.ws_cal {
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .425);
}

.ws_cal span.icalNormal, .ws_cal span.icalPreWarn, .ws_cal span.icalPrePreWarn, .ws_cal span.icalWarn {
  display: block;
  float: left;
  width: 300px;
}

.ws_cal br {
  content: "";
  margin: 2px 0;
  display: block;
  font-size: 20%;
  border-bottom: 1px solid rgba(255, 255, 255, .425);
}

/* ===== Tabelle Auto ===== */
.auto_status {
  width: 100%;
}

.auto_status .auto_status-kopf {
  font-size: xx-large;
  text-align: left;
  color: #FFF;
}

.auto_status-kopf-img {
  width: 20px;
}

.auto_status .auto_status-spalte01, .auto_status .auto_status-spalte02 {
  font-size: x-large;
  width: 50%;
}

.auto_status .auto_status-spalte01 {
  text-align: left;
}

.auto_status .auto_status-spalte02 {
  text-align: right;
}

/* ===== Tabelle WS-NAS ===== */
.lw_nas {
  border-collapse: collapse;
  width: 100%;
}

.lw_nas table, .lw_nas th, .lw_nas td {
  border: 1px solid rgba(255, 255, 255, .425);
  padding: 10px;
}

.lw_nas .lw_nas-kopf {
  background: rgb(20, 24, 52);
  background: radial-gradient(circle, rgba(20, 24, 52, 1) 0%, rgba(19, 22, 47, 1)100%);
  font-size: xx-large;
  text-align: left;
  color: #FFF;
}

.lw_nas .lw_nas-spalte01, .lw_nas .lw_nas-spalte02, .lw_nas .lw_nas-spalte03 {
  font-size: x-large;
  width: 33%;
  text-align: left;
}

/* ===== Tabelle SV-Amazon ===== */
.sv_amazon {
  border-collapse: collapse;
  width: 100%;
}

.sv_amazon table, .sv_amazon td {
  padding: 10px;
}

.sv_amazon-spalte01, .sv_amazon-spalte03 {
  border: 1px solid rgba(255, 255, 255, .425);
  border-right: none;
}

.sv_amazon-spalte02, .sv_amazon-spalte04 {
  border: 1px solid rgba(255, 255, 255, .425);
  border-left: none;
}

.sv_amazon-spalte01, .sv_amazon-spalte03 {
  width: 100px;
}

.sv_amazon-spalte02 {
  width: 800px;
}

.sv_amazon-spalte01-img, .sv_amazon-spalte03-img {
  width: 90px;
}

.sv_amazon .sv_amazon-kopf {
  background: rgb(20, 24, 52);
  background: radial-gradient(circle, rgba(20, 24, 52, 1) 0%, rgba(19, 22, 47, 1)100%);
  font-size: xx-large;
  text-align: left;
  color: #FFF;
}

.sv_amazon .sv_amazon-spalte01, .sv_amazon .sv_amazon-spalte02, .sv_amazon .sv_amazon-spalte03 {
  font-size: x-large;
  text-align: left;
}

/* ===== Wetter ===== */
/* == Überschrift == */
.ws-ueberschrift-wetter {
  text-align: left;
}

.table-wetter-ueberschrift {
  width: 100%;
}

.table-wetter-ueberschrift .table-wetter-ueberschrift-tag {
  width: 50%;
  padding-left: 20px;
}

.table-wetter-ueberschrift .table-wetter-ueberschrift-temp {
  text-align: right;
  padding-right: 20px;
}

/* == MinMax-Temp == */
.table-wetter-minmaxtemp {
  width: 100%;
  font-size: x-large;
}

.table-wetter-minmaxtemp .table-wetter-minmaxtemp-name {
  text-align: left;
  width: 50%;
}

.table-wetter-minmaxtemp .table-wetter-minmaxtemp-wert {
  text-align: right;
}

/* == Werte == */
.table-wetter-werte {
  width: 100%;
  font-size: large;
  line-height: 0.1;
}

.table-wetter-werte .table-wetter-werte-icon {
  text-align: left;
  width: 5%;
}

.table-wetter-werte .table-wetter-werte-icon img {
  width: 40px;
  height: auto;
}

.table-wetter-werte .table-wetter-werte-wert {
  text-align: left;
  vertical-align: middle;
}

/* ===== Tankstellen ===== */
.ws-ueberschrift-tanke {
  font-size: 20px;
}

/* ===== Radio ===== */
.radiobutton {
  color: white;
  border-radius: 30px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
  border: 0.5px solid #29323C;
}

.radiobutton-aktiv {
  color: white;
  border-radius: 30px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(13, 193, 26, 0.11), 0 -8px 16px rgba(13, 193, 26, 0.11);
  border: 0.5px solid #29323C;
}

.radio-img img {
  width: 210px;
  height: auto;
}

.radio-titel {
  //color: #acaa20;
  font-family: RussoOne-Regular;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-variant: small-caps;
  line-height: 1.6;
  text-shadow:
    -1px -1px 1px #111,
    2px 2px 1px #363636;
}

/* ===== Snow Overlay ===== */
.snow,
.snow:before,
.snow:after {
  position: absolute;
  top: -600px;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: radial-gradient(6px 6px at 358px 522px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 141px 28px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 561px 306px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 484px 385px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 167px 21px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 158px 448px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 481px 282px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 17px 469px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 70px 201px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 182px 576px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 549px 128px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 113px 83px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 303px 492px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 109px 490px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 432px 295px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 592px 540px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 162px 198px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 371px 74px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 505px 97px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 92px 461px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 200px 428px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 424px 388px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 330px 234px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 576px 155px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 212px 289px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 66px 482px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 544px 500px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 42px 307px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 240px 109px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 322px 275px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 582px 96px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 159px 135px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 535px 302px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 475px 206px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 42px 97px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 475px 360px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 233px 224px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 284px 332px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 299px 129px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 100px 178px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 7px 60px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 452px 245px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 367px 30px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 155px 360px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 369px 321px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 457px 164px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 294px 236px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 131px 510px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 515px 349px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 88px 583px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 292px 100px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 502px 570px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 216px 234px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 127px 412px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 355px 128px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 29px 360px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 586px 558px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 6px 370px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 400px 247px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 305px 233px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 392px 381px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 107px 224px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 314px 80px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 458px 495px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 320px 81px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 299px 349px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 101px 481px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 303px 328px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 389px 100px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 467px 245px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0));
  background-size: 600px 600px;
  animation: snow 3s linear infinite;
  content: "";
}

.snow:after {
  margin-left: -200px;
  opacity: 0.4;
  animation-duration: 6s;
  animation-direction: reverse;
  filter: blur(3px);
}

.snow:before {
  animation-duration: 9s;
  animation-direction: reverse;
  margin-left: -300px;
  opacity: 0.65;
  filter: blur(1.5px);
}

@keyframes snow {
  to {
    transform: translateY(600px);
  }
}

/* ===== Snow Overlay ===== */
.rain__drop {
  -webkit-animation-delay: calc(var(--d) * 1s);
  animation-delay: calc(var(--d) * 1s);
  -webkit-animation-duration: calc(var(--a) * 1s);
  animation-duration: calc(var(--a) * 1s);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: drop;
  animation-name: drop;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  height: 30px;
  left: calc(var(--x) * 1%);
  position: absolute;
  top: calc((var(--y) + 50) * -1px);
}

.rain__drop path {
  fill: #a1c6cc;
  opacity: var(--o);
  transform: scaleY(calc(var(--s) * 1.5));
}

@-webkit-keyframes drop {
  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(100vh);
  }
}

@keyframes drop {
  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(100vh);
  }
}

/* ===== Tabelle Adapter ===== */
.adapter_status {
  width: 100%;
}

.adapter_status .adapter_status-spalte01, .adapter_status .adapter_status-spalte02 {
  font-size: 16px;
}

.adapter_status .adapter_status-spalte01 {
  text-align: left;
  width: 50%;
}

.adapter_status .adapter_status-spalte02 {
  text-align: right;
  width: 50%;
}

/* ===== Status ===== */
.ws-status-uberschrift {
  color: #ebeae5;
  text-shadow: rgba(0, 0, 0, 0.9) 3px 3px 4px;
  font-family: Play-Regular;
  font-size: large;
  text-align: center;
}

.ws-status-uptime {
  color: #ebeae5;
  text-shadow: rgba(0, 0, 0, 0.9) 3px 3px 4px;
  font-family: Play-Regular;
  font-size: x-small;
  text-align: center;
}

.ws-status-pic {
  background: #d00a1c;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .5);
  filter: blur(0.2px);
  border-width: 0.1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, .425);
  color: rgb(236, 238, 241);
  padding: 10px;
}

.ws-status-pic-aktiv {
  background: #2d9217;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .5);
  filter: blur(0.2px);
  border-width: 0.1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, .425);
  color: rgb(236, 238, 241);
  padding: 10px;
}