/* css/both/animate.css */
@charset "UTF-8";

/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
 *
 * Copyright (c) 2022 Animate.css
 */
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat);
}
.animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: calc(1 * 2);
  animation-iteration-count: calc(1 * 2);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2);
}
.animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: calc(1 * 3);
  animation-iteration-count: calc(1 * 3);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3);
}
.animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
}
.animate__animated.animate__delay-2s {
  -webkit-animation-delay: calc(1s * 2);
  animation-delay: calc(1s * 2);
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2);
}
.animate__animated.animate__delay-3s {
  -webkit-animation-delay: calc(1s * 3);
  animation-delay: calc(1s * 3);
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3);
}
.animate__animated.animate__delay-4s {
  -webkit-animation-delay: calc(1s * 4);
  animation-delay: calc(1s * 4);
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4);
}
.animate__animated.animate__delay-5s {
  -webkit-animation-delay: calc(1s * 5);
  animation-delay: calc(1s * 5);
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5);
}
.animate__animated.animate__faster {
  -webkit-animation-duration: calc(1s / 2);
  animation-duration: calc(1s / 2);
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
}
.animate__animated.animate__fast {
  -webkit-animation-duration: calc(1s * 0.8);
  animation-duration: calc(1s * 0.8);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}
.animate__animated.animate__slow {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
}
.animate__animated.animate__slower {
  -webkit-animation-duration: calc(1s * 3);
  animation-duration: calc(1s * 3);
  -webkit-animation-duration: calc(var(--animate-duration) * 3);
  animation-duration: calc(var(--animate-duration) * 3);
}
@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }

  .animate__animated[class*='Out'] {
    opacity: 0;
  }
}
/* Attention seekers  */
@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
.animate__flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
@-webkit-keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
}
@-webkit-keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
@keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
.animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY;
}
@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.animate__swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}
@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: calc(1s * 1.3);
  animation-duration: calc(1s * 1.3);
  -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
  animation-duration: calc(var(--animate-duration) * 1.3);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
/* Back entrances */
@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
}
@-webkit-keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft;
}
@-webkit-keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight;
}
@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
}
/* Back exits */
@-webkit-keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutDown {
  -webkit-animation-name: backOutDown;
  animation-name: backOutDown;
}
@-webkit-keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutLeft {
  -webkit-animation-name: backOutLeft;
  animation-name: backOutLeft;
}
@-webkit-keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutRight {
  -webkit-animation-name: backOutRight;
  animation-name: backOutRight;
}
@-webkit-keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutUp {
  -webkit-animation-name: backOutUp;
  animation-name: backOutUp;
}
/* Bouncing entrances  */
@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__bounceIn {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
/* Bouncing exits  */
@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.animate__bounceOut {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
.animate__bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
.animate__bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}
/* Fading entrances  */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopLeft {
  -webkit-animation-name: fadeInTopLeft;
  animation-name: fadeInTopLeft;
}
@-webkit-keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopRight {
  -webkit-animation-name: fadeInTopRight;
  animation-name: fadeInTopRight;
}
@-webkit-keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomLeft {
  -webkit-animation-name: fadeInBottomLeft;
  animation-name: fadeInBottomLeft;
}
@-webkit-keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomRight {
  -webkit-animation-name: fadeInBottomRight;
  animation-name: fadeInBottomRight;
}
/* Fading exits */
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
.animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.animate__fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.animate__fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.animate__fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.animate__fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
@keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
.animate__fadeOutTopLeft {
  -webkit-animation-name: fadeOutTopLeft;
  animation-name: fadeOutTopLeft;
}
@-webkit-keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
@keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
.animate__fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight;
}
@-webkit-keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
@keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
.animate__fadeOutBottomRight {
  -webkit-animation-name: fadeOutBottomRight;
  animation-name: fadeOutBottomRight;
}
@-webkit-keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
@keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
.animate__fadeOutBottomLeft {
  -webkit-animation-name: fadeOutBottomLeft;
  animation-name: fadeOutBottomLeft;
}
/* Flippers */
@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animate__animated.animate__flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}
@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}
@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutX {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutY {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}
/* Lightspeed */
@-webkit-keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInRight {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInLeft {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutRight {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
@-webkit-keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutLeft {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
/* Rotating entrances */
@-webkit-keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
/* Rotating exits */
@-webkit-keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.animate__rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.animate__rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
/* Specials */
@-webkit-keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.animate__hinge {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.animate__rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}
/* Zooming entrances */
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}
/* Zooming exits */
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
.animate__zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
.animate__zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}
@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
/* Sliding entrances */
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
/* Sliding exits */
@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

/* css/both/animate_custom.css */
/* .drop {
    position: relative;
      width: 20px;
      height: 20px;
    top: -30px;
    margin: 0 auto;
      background: #FFF;
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      border-radius: 20px;
    -moz-animation-name: drip;
    -webkit-animation-name: drip;
    animation-name: drip;
    -moz-animation-timing-function: cubic-bezier(1,0,.91,.19);
    -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
    animation-timing-function: cubic-bezier(1,0,.91,.19);
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    margin: 175px auto;
  }
  
  .drop:before {
    content: "";
    position: absolute;
    width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 30px solid rgba(255,255,255,1);
    top: -22px;
  }
  
  .wave {
    position: relative;
    opacity: 0;
    top: 0;
      width: 2px;
      height: 1px;
    border: #FFF 7px solid;
      -moz-border-radius: 300px / 150px;
      -webkit-border-radius: 300px / 150px;
      border-radius: 300px / 150px;
    -moz-animation-name: ripple;
    -webkit-animation-name: ripple;
    animation-name: ripple;
    -moz-animation-delay: 2s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    margin: 175px auto;
  }
  
  .wave:after {
    content: "";
    position: absolute;
    opacity: 0;
    top: -5px;
    left: -5px;
      width: 2px;
      height: 1px;
    border: #FFF 5px solid;
      -moz-border-radius: 300px / 150px;
      -webkit-border-radius: 300px / 150px;
      border-radius: 300px / 150px;
    -moz-animation-name: ripple-2;
    -webkit-animation-name: ripple-2;
    animation-name: ripple-2;
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  
  @keyframes ripple {
      from {
        opacity: 1;
      }
      to {
        width: 600px;
        height: 300px;
        border-width: 1px;
        top: -100px;
        opacity: 0;
      }
  }
  
  @keyframes ripple-2 {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
    100% {
      width: 200px;
      height: 100px;
      border-width: 1px;
      top: 100px;
      left: 200px;
    }
  }
  
  @keyframes drip {
      to {
        top: 190px;
      }
  } */




  /* .circle{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:150px;
    height:150px;
    background:#ccc;
    border:5px solid #fff;
    box-shadow:0 0 0 5px #002F67;
    border-radius:50%;
    overflow:hidden;
  }
  .wave{
    position:relative;
    width:100%;
    height:100%;
    background:#002F67;
    border-radius:50%;
    box-shadow:inset 0 0 50px rgba(255,255,255,.5);
  }
  .wave:before,.wave:after{
    content:'';
    position:absolute;
    width:200%;
    height:200%;
    top:0;
    left:50%;
    transform:translate(-50%,-75%);
    background:#000;
  }
  .wave:before{
    border-radius:45%;
    background:rgba(255,255,255,1);
    animation:animate 5s linear infinite;
  }
  .wave:after{
    border-radius:40%;
    background:rgba(255,255,255,.5);
    animation:animate 10s linear infinite;
  }
  @keyframes animate{
    0%{
       transform:translate(-50%,-75%) rotate(0deg);
    }
    100%{
       transform:translate(-50%,-75%) rotate(360deg);
    }
  } */

/* css/both/bg.css */
/* Background image */
.bg-main {
    position: absolute !important;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url(../img/bg/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur( 7px ) brightness(60%);
    background-position: center;
    z-index: -1;
}

/* Background overlay */
.bg-main .overlay {
    width: inherit;
    height: inherit;
    position: absolute;
    background-color: rgb(54 83 109 / 7%)
}

/* css/both/bootstrap_fix.css */


.dropdown-toggle.hide-carret:after { content: none }

select {
    -webkit-appearance: menulist-button;
}

.table-dark {
    background-color: #212529 !important;
}

.progress-bg-dark {
    background-color: #2b2f34 !important;
}





/* table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

table tr:last-child th:first-child {
    border-top-left-radius: 10px;
}

table tr:last-child th:last-child {
    border-top-right-radius: 10px;
} */

table td {
    padding-left: 3px !important;
    padding-right: 3px !important;
}

table thead tr {
    cursor: default;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    line-height: 39px;
}

table tbody tr {
    cursor: default;
    text-align: center;
}



/* Bootstrap Accordion */

.card-header {
    padding: 0 !important;
}

.card-header:has(> button[ aria-expanded="true" ]) {
    background-color: #002F67 !important;
}

.card-header:has(> button[ aria-expanded="false" ]) {
    background-color: #212529 !important;
    border: 1px solid #002F67 !important;
}

.card-header .btn {
    color: #FFF !important;
    cursor: pointer !important;
    outline: none !important;
    padding: 15px !important;
}

.card-header .btn:hover {
    background-color: #2195f35a;
    outline: none !important;
}





.btn.btn-info {
    background-color: #012f66 !important;
    border-color: #012f66 !important;
}

.btn.btn-warning{
    color: white;
}


.progress-bar {
    transition: width 0.1s ease-out !important;
}




/* .dropdown-menu {
    border-radius: 15px;
}

.dropdown-header {
    border-radius: 10px 10px 0 0;
} */



.accordion {
    text-align: center;
}
 
.accordion.width {
    display: flex;
    width: 100%;
    height: 160px;
}
 
.accordion.width .card {
    flex-direction: row;
    min-width: min-content;
}
 
.accordion.width .card .card-header {
    cursor: pointer;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    border: 2px solid black;
}
 
.card-body {
    width: 100%;
}
 
.collapsing.width {
    transition: width 0.5s ease;
    /* height: auto; */
    /* width: 10px; */
}

/* css/both/checkbox_fix.css */





.tgl-flat:checked:not(:disabled)+.tgl-btn {
	border: 4px solid #2193F3 !important;
}

.tgl-flat:checked:not(:disabled)+.tgl-btn:after {
	background: #2193F3 !important;
}

.tgl-flat:not(:disabled)+.tgl-btn {
    border: 4px solid #b4bbc2 !important;
}

.tgl-flat:not(:disabled)+.tgl-btn:after {
	background: #b4bbc2 !important;
}

/* css/both/colors.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         hommie_colors
	@file           colors.css
**************************************************************************************************/

.text-main-color {
	color: #0054b8;
}

.bg-main-color {
	background-color: #002F67;
}

.bg-main-color-hover:hover {
	background-color: #012f664d !important;
	/* color: #FFFFFF !important; */
}

.bg-color {
	background-color: #212529;
}

.text-light {
	color: #ffffff;
}

.text-danger {
	color: #f53636;
}

.text-warning {
	color: #f96800;
}

.text-success {
	color: #00ff1a;
}

.text-disabled {
	color: rgb(104, 104, 104);
}

/* css/both/cursor.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         hommie_cursors
	@file           curors.css
**************************************************************************************************/

/* Cursors type configuration */
.cursor-alias {cursor: alias;}
.cursor-all-scroll {cursor: all-scroll;}
.cursor-auto {cursor: auto;}
.cursor-cell {cursor: cell;}
.cursor-context-menu {cursor: context-menu;}
.cursor-col-resize {cursor: col-resize;}
.cursor-copy {cursor: copy;}
.cursor-crosshair {cursor: crosshair;}
.cursor-default {cursor: default;}
.cursor-e-resize {cursor: e-resize;}
.cursor-ew-resize {cursor: ew-resize;}
.cursor-grab {cursor: -webkit-grab; cursor: grab;}
.cursor-grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.cursor-help {cursor: help;}
.cursor-move {cursor: move;}
.cursor-n-resize {cursor: n-resize;}
.cursor-ne-resize {cursor: ne-resize;}
.cursor-nesw-resize {cursor: nesw-resize;}
.cursor-ns-resize {cursor: ns-resize;}
.cursor-nw-resize {cursor: nw-resize;}
.cursor-nwse-resize {cursor: nwse-resize;}
.cursor-no-drop {cursor: no-drop;}
.cursor-none {cursor: none;}
.cursor-not-allowed {cursor: not-allowed;}
.cursor-pointer {cursor: pointer;}
.cursor-progress {cursor: progress;}
.cursor-row-resize {cursor: row-resize;}
.cursor-s-resize {cursor: s-resize;}
.cursor-se-resize {cursor: se-resize;}
.cursor-sw-resize {cursor: sw-resize;}
.cursor-text {cursor: text;}
.cursor-w-resize {cursor: w-resize;}
.cursor-wait {cursor: wait;}
.cursor-zoom-in {cursor: zoom-in;}
.cursor-zoom-out {cursor: zoom-out;}

/* Animation on hover cursor elements */
.animation-hover:hover {
	cursor: pointer;
	animation: headShake;
	animation-duration: 0.5s;
	overflow: hidden;
}

/* css/both/input_fix.css */

input:disabled {
    background-color: #848484 !important;
    color: rgb(198, 198, 198) !important;
}

input[ type=color ] {
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

input[ type=number ] {
    background-color: #33373B !important;
    color: #b4bbc2 !important;
    border: 1px solid #33373B !important;
}

input[ type=range ] {

}

.hidden-long-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
}

select {
    /* A reset of styles, including removing the default dropdown arrow */
    /* appearance: none; */
    background-color: #33373B !important;
    cursor: pointer !important;
    color: #b4bbc2 !important;
    border-left: 0px !important;
    border-top: 0px !important;
    border-bottom: 0px !important;
    border-right: 0px solid #33373B !important;
    border-radius: 10px !important;
    text-align: center !important;
    text-align: -webkit-center !important;
    outline: none !important;
    --select-border: #777 !important;
    --select-focus: none !important;
    --select-arrow: var(--select-border) !important;
}

/* css/both/lobibox_fix.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         lobibox
	@file           lobibox_fix.css
**************************************************************************************************/

.lobibox {
    border-radius: 15px;
}
.lobibox .lobibox-footer {
    border-radius: 0px 0px 10px 10px;
}
.lobibox .lobibox-header {
    border-radius: 10px 10px 0px 0px;
    color: #b4bbc2 !important;
    text-transform: uppercase;
    font-weight: 100;
}


/* Configure window parameters */
.lobibox.lobibox-info .lobibox-header,
.lobibox.lobibox-info .lobibox-footer,
.lobibox.lobibox-window {
    background-color: #002F67 !important;
    color: #b4bbc2 !important;
}

.lobibox.lobibox-info,
.lobibox.lobibox-window {
    border-color: #002F67 !important;
    color: white !important;
}

.lobibox.lobibox-info .lobibox-body,
.lobibox.lobibox-window  .lobibox-body {
    padding: 0;
    background-color: #2c3034 !important;
}

.lobibox .lobibox-body {
    color: #212121;
}


.lobibox-notify-wrapper {
    z-index: 2000 !important;
}

/* ok */
.lobibox-btn.lobibox-btn-default {
    color: #000 !important;
    background-color: #e2e2e2 !important;
    border-color: #dadada !important;
}

/* cancel */
.lobibox-btn.lobibox-btn-cancel {
    color: #fff !important;
    background-color: #002F67 !important;
    border-color: #dadada !important;
}

/* yes */
.lobibox-btn.lobibox-btn-yes {
    color: #000 !important;
    background-color: #e2e2e2 !important;
    border-color: #dadada !important;
}

/* no*/
.lobibox-btn.lobibox-btn-no {
    color: #000 !important;
    background-color: #e2e2e2 !important;
    border-color: #dadada !important;
}


.lobibox.lobibox-window .lobibox-body {
    border-left: 3px #225EB8 solid;
    border-right: 3px #225EB8 solid;
}

.lobibox.lobibox-window .lobibox-footer {
    background-color: #225EB8 !important;
}

.lobibox.lobibox-window {
    background-color: #225EB8 !important;
    border-width: 0 !important;
}

/* Lobibox alert - error */
.lobibox.lobibox-error .lobibox-header {
    text-transform: none !important;
    color: #fff !important;
}
.lobibox.lobibox-error .lobibox-footer {
    background-color: #fbfbfb !important;
}

/* css/both/reset.css */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}



/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
    border-style: none;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Misc
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
    display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
    display: none;
  }

/* css/both/scrollbars.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         hommie_css
	@file           scrollbars.css
**************************************************************************************************/

/* Scrollbars settings */
::-webkit-scrollbar {
	width: 0px;
	background-color: transparent;
}

/* Scrollbars background */
::-webkit-scrollbar-thumb {
	/* background-color: #002F67;
	background-image: -webkit-linear-gradient(45deg,
			rgba(255, 255, 255, 0.2) 25%,
			transparent 25%,
			transparent 50%,
			rgba(255, 255, 255, 0.2) 50%,
			rgba(255, 255, 255, 0.2) 75%,
			transparent 75%,
			transparent); */

	background: #888;
	opacity: 0;
	border-radius: 10px;
}

/* Scrollbars track */
::-webkit-scrollbar-track {
	/* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
	background-color: #363c42;
	/* background-color: #f5f5f5; */
}



/* width */
/* ::-webkit-scrollbar {
    width: 0px;
    background-color: transparent;
} */

/* Track */
/* ::-webkit-scrollbar-track {
    background-color: #363c42;
} */

/* Handle */
/* ::-webkit-scrollbar-thumb {
    background: #888;
    opacity: 0;
    border-radius: 10px;
} */

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #2193F3;
}

/* css/both/searching_form.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           searching_form.css
**************************************************************************************************/

.searching-form {
    display: inline-block;
    height: 38px;
    padding: 4px 0px 0px 0px;
    cursor: pointer;
}

.searching-form input {
    width: 300px;
    padding-right: 23px;
    border: 1px solid #ccc;
    outline: none;
    border-radius: 12px;
    height: 29px;
    font-size: small;

    /* -webkit-transition: width .2s ease;
    -o-transition: width .2s ease;
    transition: width .2s ease */
    background-color: #212529 !important;
    color: #ccc;
}

@media (max-width: 600px) {
    .searching-form input {
        width: 30px;
        padding-right: 16px;
    }
}

.searching-form input.focus {
    width: calc(100% - 12px);
    width: -o-calc(100% - 12px);
    width: -webkit-calc(100% - 12px);
    width: -moz-calc(100% - 12px);
    position: absolute;
    left: 6px;
}

.searching-form .fa-search-location {
    width: 30px;
    height: 28px;
    position: absolute;
    padding: 7px;
    right: -1px;
    top: 5px;
    color: #ccc;
}

/* css/both/window.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         hommie_window
	@file           window.css
**************************************************************************************************/

/* Main config DOM */
html, body {
	font-family: 'Open Sans';
	min-height: 100%;
}

.text-decoration-none {
	text-decoration: none !important;
}

.text-decoration-none:hover {
	text-decoration: none !important;
	color: currentcolor !important;
}

/* lib/1_jQuery/jquery-ui.css */
/*! jQuery UI - v1.11.4 - 2015-11-15
* http://jqueryui.com
* Copyright jQuery Foundation and other contributors; Licensed MIT */

.ui-widget{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget-content{border:1px solid #ddd;background:#fff;color:#333}.ui-widget-content a{color:#333}.ui-widget-header{border:1px solid #ddd;background:#e9e9e9;color:#333;font-weight:bold}.ui-widget-header a{color:#333}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #c5c5c5;background:#f6f6f6;font-weight:normal;color:#454545}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#454545;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #ccc;background:#ededed;font-weight:normal;color:#2b2b2b}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited{color:#2b2b2b;text-decoration:none}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #003eff;background:#007fff;font-weight:normal;color:#fff}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#fff;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #dad55e;background:#fffa90;color:#777620}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#777620}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #f1a899;background:#fddfdf;color:#5f3f3f}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#5f3f3f}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#5f3f3f}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("images/ui-icons_444444_256x240.png")}.ui-widget-header .ui-icon{background-image:url("images/ui-icons_444444_256x240.png")}.ui-state-default .ui-icon{background-image:url("images/ui-icons_777777_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url("images/ui-icons_555555_256x240.png")}.ui-state-active .ui-icon{background-image:url("images/ui-icons_ffffff_256x240.png")}.ui-state-highlight .ui-icon{background-image:url("images/ui-icons_777620_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("images/ui-icons_cc0000_256x240.png")}.ui-icon-blank{background-position:16px 16px}.ui-icon-carat-1-n{background-position:0 0}.ui-icon-carat-1-ne{background-position:-16px 0}.ui-icon-carat-1-e{background-position:-32px 0}.ui-icon-carat-1-se{background-position:-48px 0}.ui-icon-carat-1-s{background-position:-64px 0}.ui-icon-carat-1-sw{background-position:-80px 0}.ui-icon-carat-1-w{background-position:-96px 0}.ui-icon-carat-1-nw{background-position:-112px 0}.ui-icon-carat-2-n-s{background-position:-128px 0}.ui-icon-carat-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-64px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-64px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:0 -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:3px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:3px}.ui-widget-overlay{background:#aaa;opacity:.3;filter:Alpha(Opacity=30)}.ui-widget-shadow{margin:0 0 0 0;padding:5px;background:#666;opacity:.3;filter:Alpha(Opacity=30);border-radius:8px}

/* lib/1_jQuery/jquery-ui.min.css */
/*! jQuery UI - v1.11.4 - 2015-11-15
* http://jqueryui.com
* Includes: core.css, draggable.css, resizable.css, sortable.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&fwDefault=normal&cornerRadius=3px&bgColorHeader=e9e9e9&bgTextureHeader=flat&borderColorHeader=dddddd&fcHeader=333333&iconColorHeader=444444&bgColorContent=ffffff&bgTextureContent=flat&borderColorContent=dddddd&fcContent=333333&iconColorContent=444444&bgColorDefault=f6f6f6&bgTextureDefault=flat&borderColorDefault=c5c5c5&fcDefault=454545&iconColorDefault=777777&bgColorHover=ededed&bgTextureHover=flat&borderColorHover=cccccc&fcHover=2b2b2b&iconColorHover=555555&bgColorActive=007fff&bgTextureActive=flat&borderColorActive=003eff&fcActive=ffffff&iconColorActive=ffffff&bgColorHighlight=fffa90&bgTextureHighlight=flat&borderColorHighlight=dad55e&fcHighlight=777620&iconColorHighlight=777620&bgColorError=fddfdf&bgTextureError=flat&borderColorError=f1a899&fcError=5f3f3f&iconColorError=cc0000&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=666666&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=5px&offsetTopShadow=0px&offsetLeftShadow=0px&cornerRadiusShadow=8px
* Copyright jQuery Foundation and other contributors; Licensed MIT */

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-draggable-handle{-ms-touch-action:none;touch-action:none}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-sortable-handle{-ms-touch-action:none;touch-action:none}.ui-widget{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget-content{border:1px solid #ddd;background:#fff;color:#333}.ui-widget-content a{color:#333}.ui-widget-header{border:1px solid #ddd;background:#e9e9e9;color:#333;font-weight:bold}.ui-widget-header a{color:#333}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #c5c5c5;background:#f6f6f6;font-weight:normal;color:#454545}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#454545;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #ccc;background:#ededed;font-weight:normal;color:#2b2b2b}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited{color:#2b2b2b;text-decoration:none}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #003eff;background:#007fff;font-weight:normal;color:#fff}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#fff;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #dad55e;background:#fffa90;color:#777620}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#777620}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #f1a899;background:#fddfdf;color:#5f3f3f}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#5f3f3f}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#5f3f3f}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("images/ui-icons_444444_256x240.png")}.ui-widget-header .ui-icon{background-image:url("images/ui-icons_444444_256x240.png")}.ui-state-default .ui-icon{background-image:url("images/ui-icons_777777_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url("images/ui-icons_555555_256x240.png")}.ui-state-active .ui-icon{background-image:url("images/ui-icons_ffffff_256x240.png")}.ui-state-highlight .ui-icon{background-image:url("images/ui-icons_777620_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("images/ui-icons_cc0000_256x240.png")}.ui-icon-blank{background-position:16px 16px}.ui-icon-carat-1-n{background-position:0 0}.ui-icon-carat-1-ne{background-position:-16px 0}.ui-icon-carat-1-e{background-position:-32px 0}.ui-icon-carat-1-se{background-position:-48px 0}.ui-icon-carat-1-s{background-position:-64px 0}.ui-icon-carat-1-sw{background-position:-80px 0}.ui-icon-carat-1-w{background-position:-96px 0}.ui-icon-carat-1-nw{background-position:-112px 0}.ui-icon-carat-2-n-s{background-position:-128px 0}.ui-icon-carat-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-64px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-64px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:0 -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:3px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:3px}.ui-widget-overlay{background:#aaa;opacity:.3;filter:Alpha(Opacity=30)}.ui-widget-shadow{margin:0 0 0 0;padding:5px;background:#666;opacity:.3;filter:Alpha(Opacity=30);border-radius:8px}

/* lib/2_bootstrap/bootstrap.css */
/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

select {
  word-wrap: normal;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1, .h1 {
  font-size: 2.5rem;
}

h2, .h2 {
  font-size: 2rem;
}

h3, .h3 {
  font-size: 1.75rem;
}

h4, .h4 {
  font-size: 1.5rem;
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.display-1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-2 {
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-3 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

small,
.small {
  font-size: 80%;
  font-weight: 400;
}

mark,
.mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}

.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.blockquote-footer {
  display: block;
  font-size: 80%;
  color: #6c757d;
}

.blockquote-footer::before {
  content: "\2014\00A0";
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: 90%;
  color: #6c757d;
}

code {
  font-size: 87.5%;
  color: #e83e8c;
  word-break: break-word;
}

a > code {
  color: inherit;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #212529;
  border-radius: 0.2rem;
}

kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;
}

pre {
  display: block;
  font-size: 87.5%;
  color: #212529;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -ms-flex-order: 0;
  order: 0;
}

.order-1 {
  -ms-flex-order: 1;
  order: 1;
}

.order-2 {
  -ms-flex-order: 2;
  order: 2;
}

.order-3 {
  -ms-flex-order: 3;
  order: 3;
}

.order-4 {
  -ms-flex-order: 4;
  order: 4;
}

.order-5 {
  -ms-flex-order: 5;
  order: 5;
}

.order-6 {
  -ms-flex-order: 6;
  order: 6;
}

.order-7 {
  -ms-flex-order: 7;
  order: 7;
}

.order-8 {
  -ms-flex-order: 8;
  order: 8;
}

.order-9 {
  -ms-flex-order: 9;
  order: 9;
}

.order-10 {
  -ms-flex-order: 10;
  order: 10;
}

.order-11 {
  -ms-flex-order: 11;
  order: 11;
}

.order-12 {
  -ms-flex-order: 12;
  order: 12;
}

.offset-1 {
  margin-left: 8.333333%;
}

.offset-2 {
  margin-left: 16.666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.333333%;
}

.offset-5 {
  margin-left: 41.666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.333333%;
}

.offset-8 {
  margin-left: 66.666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.333333%;
}

.offset-11 {
  margin-left: 91.666667%;
}

@media (min-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-sm-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-sm-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-sm-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-sm-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-sm-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-sm-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-sm-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-sm-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-sm-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-sm-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-sm-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-sm-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-sm-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-sm-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-sm-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-sm-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.333333%;
  }
  .offset-sm-2 {
    margin-left: 16.666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.333333%;
  }
  .offset-sm-5 {
    margin-left: 41.666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.333333%;
  }
  .offset-sm-8 {
    margin-left: 66.666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.333333%;
  }
  .offset-sm-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 768px) {
  .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-md-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-md-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-md-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-md-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-md-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-md-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-md-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-md-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-md-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-md-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-md-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-md-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-md-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-md-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-md-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-md-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-md-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.333333%;
  }
  .offset-md-2 {
    margin-left: 16.666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.333333%;
  }
  .offset-md-5 {
    margin-left: 41.666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.333333%;
  }
  .offset-md-8 {
    margin-left: 66.666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.333333%;
  }
  .offset-md-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 992px) {
  .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-lg-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-lg-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-lg-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-lg-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-lg-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-lg-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-lg-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-lg-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-lg-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-lg-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-lg-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-lg-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-lg-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-lg-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-lg-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-lg-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.333333%;
  }
  .offset-lg-2 {
    margin-left: 16.666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.333333%;
  }
  .offset-lg-5 {
    margin-left: 41.666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.333333%;
  }
  .offset-lg-8 {
    margin-left: 66.666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.333333%;
  }
  .offset-lg-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-xl-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-xl-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-xl-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-xl-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-xl-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-xl-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-xl-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-xl-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-xl-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-xl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-xl-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-xl-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-xl-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-xl-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-xl-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-xl-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-xl-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-xl-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-xl-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-xl-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-xl-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-xl-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-xl-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-xl-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-xl-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.333333%;
  }
  .offset-xl-2 {
    margin-left: 16.666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.333333%;
  }
  .offset-xl-5 {
    margin-left: 41.666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.333333%;
  }
  .offset-xl-8 {
    margin-left: 66.666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.333333%;
  }
  .offset-xl-11 {
    margin-left: 91.666667%;
  }
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

.table tbody + tbody {
  border-top: 2px solid #dee2e6;
}

.table-sm th,
.table-sm td {
  padding: 0.3rem;
}

.table-bordered {
  border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
  color: #212529;
  background-color: rgba(0, 0, 0, 0.075);
}

.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: #b8daff;
}

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
  border-color: #7abaff;
}

.table-hover .table-primary:hover {
  background-color: #9fcdff;
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: #9fcdff;
}

.table-secondary,
.table-secondary > th,
.table-secondary > td {
  background-color: #d6d8db;
}

.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody + tbody {
  border-color: #b3b7bb;
}

.table-hover .table-secondary:hover {
  background-color: #c8cbcf;
}

.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
  background-color: #c8cbcf;
}

.table-success,
.table-success > th,
.table-success > td {
  background-color: #c3e6cb;
}

.table-success th,
.table-success td,
.table-success thead th,
.table-success tbody + tbody {
  border-color: #8fd19e;
}

.table-hover .table-success:hover {
  background-color: #b1dfbb;
}

.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
  background-color: #b1dfbb;
}

.table-info,
.table-info > th,
.table-info > td {
  background-color: #bee5eb;
}

.table-info th,
.table-info td,
.table-info thead th,
.table-info tbody + tbody {
  border-color: #86cfda;
}

.table-hover .table-info:hover {
  background-color: #abdde5;
}

.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
  background-color: #abdde5;
}

.table-warning,
.table-warning > th,
.table-warning > td {
  background-color: #ffeeba;
}

.table-warning th,
.table-warning td,
.table-warning thead th,
.table-warning tbody + tbody {
  border-color: #ffdf7e;
}

.table-hover .table-warning:hover {
  background-color: #ffe8a1;
}

.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
  background-color: #ffe8a1;
}

.table-danger,
.table-danger > th,
.table-danger > td {
  background-color: #f5c6cb;
}

.table-danger th,
.table-danger td,
.table-danger thead th,
.table-danger tbody + tbody {
  border-color: #ed969e;
}

.table-hover .table-danger:hover {
  background-color: #f1b0b7;
}

.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
  background-color: #f1b0b7;
}

.table-light,
.table-light > th,
.table-light > td {
  background-color: #fdfdfe;
}

.table-light th,
.table-light td,
.table-light thead th,
.table-light tbody + tbody {
  border-color: #fbfcfc;
}

.table-hover .table-light:hover {
  background-color: #ececf6;
}

.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
  background-color: #ececf6;
}

.table-dark,
.table-dark > th,
.table-dark > td {
  background-color: #c6c8ca;
}

.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
  border-color: #95999c;
}

.table-hover .table-dark:hover {
  background-color: #b9bbbe;
}

.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th {
  background-color: #b9bbbe;
}

.table-active,
.table-active > th,
.table-active > td {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
  background-color: rgba(0, 0, 0, 0.075);
}

.table .thead-dark th {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
}

.table .thead-light th {
  color: #495057;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.table-dark {
  color: #fff;
  background-color: #343a40;
}

.table-dark th,
.table-dark td,
.table-dark thead th {
  border-color: #454d55;
}

.table-dark.table-bordered {
  border: 0;
}

.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

.table-dark.table-hover tbody tr:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.075);
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-sm > .table-bordered {
    border: 0;
  }
}

@media (max-width: 767.98px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-md > .table-bordered {
    border: 0;
  }
}

@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-lg > .table-bordered {
    border: 0;
  }
}

@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-xl > .table-bordered {
    border: 0;
  }
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table-bordered {
  border: 0;
}

.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}

.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control::-webkit-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:disabled, .form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

select.form-control:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}

.col-form-label {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-label-lg {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  font-size: 1.25rem;
  line-height: 1.5;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  margin-bottom: 0;
  line-height: 1.5;
  color: #212529;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}

.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

.form-control-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.form-control-lg {
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

select.form-control[size], select.form-control[multiple] {
  height: auto;
}

textarea.form-control {
  height: auto;
}

.form-group {
  margin-bottom: 1rem;
}

.form-text {
  display: block;
  margin-top: 0.25rem;
}

.form-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row > .col,
.form-row > [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

.form-check {
  position: relative;
  display: block;
  padding-left: 1.25rem;
}

.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.25rem;
}

.form-check-input:disabled ~ .form-check-label {
  color: #6c757d;
}

.form-check-label {
  margin-bottom: 0;
}

.form-check-inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 0;
  margin-right: 0.75rem;
}

.form-check-inline .form-check-input {
  position: static;
  margin-top: 0;
  margin-right: 0.3125rem;
  margin-left: 0;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #28a745;
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: .1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(40, 167, 69, 0.9);
  border-radius: 0.25rem;
}

.was-validated .form-control:valid, .form-control.is-valid {
  border-color: #28a745;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center right calc(0.375em + 0.1875rem);
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:valid, .custom-select.is-valid {
  border-color: #28a745;
  padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated .custom-select:valid ~ .valid-feedback,
.was-validated .custom-select:valid ~ .valid-tooltip, .custom-select.is-valid ~ .valid-feedback,
.custom-select.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated .form-control-file:valid ~ .valid-feedback,
.was-validated .form-control-file:valid ~ .valid-tooltip, .form-control-file.is-valid ~ .valid-feedback,
.form-control-file.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: #28a745;
}

.was-validated .form-check-input:valid ~ .valid-feedback,
.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
.form-check-input.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
  color: #28a745;
}

.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
  border-color: #28a745;
}

.was-validated .custom-control-input:valid ~ .valid-feedback,
.was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback,
.custom-control-input.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
  border-color: #34ce57;
  background-color: #34ce57;
}

.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #28a745;
}

.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
  border-color: #28a745;
}

.was-validated .custom-file-input:valid ~ .valid-feedback,
.was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback,
.custom-file-input.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: .1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(220, 53, 69, 0.9);
  border-radius: 0.25rem;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
  background-repeat: no-repeat;
  background-position: center right calc(0.375em + 0.1875rem);
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:invalid, .custom-select.is-invalid {
  border-color: #dc3545;
  padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated .custom-select:invalid ~ .invalid-feedback,
.was-validated .custom-select:invalid ~ .invalid-tooltip, .custom-select.is-invalid ~ .invalid-feedback,
.custom-select.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .form-control-file:invalid ~ .invalid-feedback,
.was-validated .form-control-file:invalid ~ .invalid-tooltip, .form-control-file.is-invalid ~ .invalid-feedback,
.form-control-file.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: #dc3545;
}

.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
  color: #dc3545;
}

.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
  border-color: #dc3545;
}

.was-validated .custom-control-input:invalid ~ .invalid-feedback,
.was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback,
.custom-control-input.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
  border-color: #e4606d;
  background-color: #e4606d;
}

.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #dc3545;
}

.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
  border-color: #dc3545;
}

.was-validated .custom-file-input:invalid ~ .invalid-feedback,
.was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback,
.custom-file-input.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-inline {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-align: center;
  align-items: center;
}

.form-inline .form-check {
  width: 100%;
}

@media (min-width: 576px) {
  .form-inline label {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .form-inline .form-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .form-control-plaintext {
    display: inline-block;
  }
  .form-inline .input-group,
  .form-inline .custom-select {
    width: auto;
  }
  .form-inline .form-check {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
  }
  .form-inline .form-check-input {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
  }
  .form-inline .custom-control {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .form-inline .custom-control-label {
    margin-bottom: 0;
  }
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn:hover {
  color: #212529;
  text-decoration: none;
}

.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn.disabled, .btn:disabled {
  opacity: 0.65;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}

.btn-secondary:focus, .btn-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #545b62;
  border-color: #4e555b;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-success:focus, .btn-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

.btn-success.disabled, .btn-success:disabled {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #1e7e34;
  border-color: #1c7430;
}

.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}

.btn-info:focus, .btn-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}

.btn-info.disabled, .btn-info:disabled {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: #117a8b;
  border-color: #10707f;
}

.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}

.btn-warning {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:hover {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
}

.btn-warning:focus, .btn-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}

.btn-warning.disabled, .btn-warning:disabled {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  color: #212529;
  background-color: #d39e00;
  border-color: #c69500;
}

.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}

.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
}

.btn-danger:focus, .btn-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-danger.disabled, .btn-danger:disabled {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #bd2130;
  border-color: #b21f2d;
}

.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-light {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light:hover {
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}

.btn-light:focus, .btn-light.focus {
  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}

.btn-light.disabled, .btn-light:disabled {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
  color: #212529;
  background-color: #dae0e5;
  border-color: #d3d9df;
}

.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}

.btn-dark {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-dark:hover {
  color: #fff;
  background-color: #23272b;
  border-color: #1d2124;
}

.btn-dark:focus, .btn-dark.focus {
  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}

.btn-dark.disabled, .btn-dark:disabled {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #1d2124;
  border-color: #171a1d;
}

.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}

.btn-outline-primary {
  color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #007bff;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:focus, .btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
  color: #6c757d;
  background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.btn-outline-success {
  color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:focus, .btn-outline-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-outline-success.disabled, .btn-outline-success:disabled {
  color: #28a745;
  background-color: transparent;
}

.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-outline-info {
  color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:hover {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:focus, .btn-outline-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-outline-info.disabled, .btn-outline-info:disabled {
  color: #17a2b8;
  background-color: transparent;
}

.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:hover {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:focus, .btn-outline-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-warning.disabled, .btn-outline-warning:disabled {
  color: #ffc107;
  background-color: transparent;
}

.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:focus, .btn-outline-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-outline-danger.disabled, .btn-outline-danger:disabled {
  color: #dc3545;
  background-color: transparent;
}

.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:hover {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:focus, .btn-outline-light.focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

.btn-outline-light.disabled, .btn-outline-light:disabled {
  color: #f8f9fa;
  background-color: transparent;
}

.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
.show > .btn-outline-light.dropdown-toggle {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

.btn-outline-dark {
  color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:focus, .btn-outline-dark.focus {
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

.btn-outline-dark.disabled, .btn-outline-dark:disabled {
  color: #343a40;
  background-color: transparent;
}

.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
.show > .btn-outline-dark.dropdown-toggle {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

.btn-link {
  font-weight: 400;
  color: #007bff;
  text-decoration: none;
}

.btn-link:hover {
  color: #0056b3;
  text-decoration: underline;
}

.btn-link:focus, .btn-link.focus {
  text-decoration: underline;
  box-shadow: none;
}

.btn-link:disabled, .btn-link.disabled {
  color: #6c757d;
  pointer-events: none;
}

.btn-lg, .btn-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.btn-sm, .btn-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block + .btn-block {
  margin-top: 0.5rem;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

.fade {
  transition: opacity 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}

.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}

.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}

.dropdown-menu-left {
  right: auto;
  left: 0;
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

@media (min-width: 576px) {
  .dropdown-menu-sm-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 768px) {
  .dropdown-menu-md-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 992px) {
  .dropdown-menu-lg-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 1200px) {
  .dropdown-menu-xl-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xl-right {
    right: 0;
    left: auto;
  }
}

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}

.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}

.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
}

.dropright .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}

.dropright .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-toggle::after {
  vertical-align: 0;
}

.dropleft .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.125rem;
}

.dropleft .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}

.dropleft .dropdown-toggle::after {
  display: none;
}

.dropleft .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}

.dropleft .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle::before {
  vertical-align: 0;
}

.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] {
  right: auto;
  bottom: auto;
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item:hover, .dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa;
}

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #007bff;
}

.dropdown-item.disabled, .dropdown-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  display: block;
  padding: 0.5rem 1.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: 0.25rem 1.5rem;
  color: #212529;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover {
  z-index: 1;
}

.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 1;
}

.btn-toolbar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.btn-toolbar .input-group {
  width: auto;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
  margin-left: -1px;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-toggle-split {
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}

.dropdown-toggle-split::after,
.dropup .dropdown-toggle-split::after,
.dropright .dropdown-toggle-split::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle-split::before {
  margin-right: 0;
}

.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.btn-group-vertical {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: center;
  justify-content: center;
}

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  width: 100%;
}

.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: -1px;
}

.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn-group-toggle > .btn,
.btn-group-toggle > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.input-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control,
.input-group > .form-control-plaintext,
.input-group > .custom-select,
.input-group > .custom-file {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

.input-group > .form-control + .form-control,
.input-group > .form-control + .custom-select,
.input-group > .form-control + .custom-file,
.input-group > .form-control-plaintext + .form-control,
.input-group > .form-control-plaintext + .custom-select,
.input-group > .form-control-plaintext + .custom-file,
.input-group > .custom-select + .form-control,
.input-group > .custom-select + .custom-select,
.input-group > .custom-select + .custom-file,
.input-group > .custom-file + .form-control,
.input-group > .custom-file + .custom-select,
.input-group > .custom-file + .custom-file {
  margin-left: -1px;
}

.input-group > .form-control:focus,
.input-group > .custom-select:focus,
.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
  z-index: 3;
}

.input-group > .custom-file .custom-file-input:focus {
  z-index: 4;
}

.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .custom-file {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.input-group > .custom-file:not(:last-child) .custom-file-label,
.input-group > .custom-file:not(:last-child) .custom-file-label::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .custom-file:not(:first-child) .custom-file-label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group-prepend,
.input-group-append {
  display: -ms-flexbox;
  display: flex;
}

.input-group-prepend .btn,
.input-group-append .btn {
  position: relative;
  z-index: 2;
}

.input-group-prepend .btn:focus,
.input-group-append .btn:focus {
  z-index: 3;
}

.input-group-prepend .btn + .btn,
.input-group-prepend .btn + .input-group-text,
.input-group-prepend .input-group-text + .input-group-text,
.input-group-prepend .input-group-text + .btn,
.input-group-append .btn + .btn,
.input-group-append .btn + .input-group-text,
.input-group-append .input-group-text + .input-group-text,
.input-group-append .input-group-text + .btn {
  margin-left: -1px;
}

.input-group-prepend {
  margin-right: -1px;
}

.input-group-append {
  margin-left: -1px;
}

.input-group-text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.input-group-text input[type="radio"],
.input-group-text input[type="checkbox"] {
  margin-top: 0;
}

.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
  height: calc(1.5em + 1rem + 2px);
}

.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
  height: calc(1.5em + 0.5rem + 2px);
}

.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
  padding-right: 1.75rem;
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.custom-control {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
}

.custom-control-inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 1rem;
}

.custom-control-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #007bff;
  background-color: #007bff;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #80bdff;
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff;
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}

.custom-control-input:disabled ~ .custom-control-label {
  color: #6c757d;
}

.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #e9ecef;
}

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}

.custom-control-label::before {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
}

.custom-control-label::after {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: no-repeat 50% / 50% 50%;
}

.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #007bff;
  background-color: #007bff;
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.custom-radio .custom-control-label::before {
  border-radius: 50%;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.custom-switch {
  padding-left: 2.25rem;
}

.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: 0.5rem;
}

.custom-switch .custom-control-label::after {
  top: calc(0.25rem + 2px);
  left: calc(-2.25rem + 2px);
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  background-color: #adb5bd;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
  -webkit-transform: translateX(0.75rem);
  transform: translateX(0.75rem);
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-select:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-select:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

.custom-select[multiple], .custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 0.75rem;
  background-image: none;
}

.custom-select:disabled {
  color: #6c757d;
  background-color: #e9ecef;
}

.custom-select::-ms-expand {
  display: none;
}

.custom-select-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
}

.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
}

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0;
}

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  opacity: 0;
}

.custom-file-input:focus ~ .custom-file-label {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-file-input:disabled ~ .custom-file-label {
  background-color: #e9ecef;
}

.custom-file-input:lang(en) ~ .custom-file-label::after {
  content: "Browse";
}

.custom-file-input ~ .custom-file-label[data-browse]::after {
  content: attr(data-browse);
}

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.custom-file-label::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: calc(1.5em + 0.75rem);
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: #495057;
  content: "Browse";
  background-color: #e9ecef;
  border-left: inherit;
  border-radius: 0 0.25rem 0.25rem 0;
}

.custom-range {
  width: 100%;
  height: calc(1rem + 0.4rem);
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-range:focus {
  outline: none;
}

.custom-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-range:focus::-ms-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-range::-moz-focus-outer {
  border: 0;
}

.custom-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-webkit-slider-thumb {
    transition: none;
  }
}

.custom-range::-webkit-slider-thumb:active {
  background-color: #b3d7ff;
}

.custom-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-moz-range-thumb {
    transition: none;
  }
}

.custom-range::-moz-range-thumb:active {
  background-color: #b3d7ff;
}

.custom-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-ms-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-ms-thumb {
    transition: none;
  }
}

.custom-range::-ms-thumb:active {
  background-color: #b3d7ff;
}

.custom-range::-ms-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 0.5rem;
}

.custom-range::-ms-fill-lower {
  background-color: #dee2e6;
  border-radius: 1rem;
}

.custom-range::-ms-fill-upper {
  margin-right: 15px;
  background-color: #dee2e6;
  border-radius: 1rem;
}

.custom-range:disabled::-webkit-slider-thumb {
  background-color: #adb5bd;
}

.custom-range:disabled::-webkit-slider-runnable-track {
  cursor: default;
}

.custom-range:disabled::-moz-range-thumb {
  background-color: #adb5bd;
}

.custom-range:disabled::-moz-range-track {
  cursor: default;
}

.custom-range:disabled::-ms-thumb {
  background-color: #adb5bd;
}

.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-control-label::before,
  .custom-file-label,
  .custom-select {
    transition: none;
  }
}

.nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}

.nav-link:hover, .nav-link:focus {
  text-decoration: none;
}

.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-item {
  margin-bottom: -1px;
}

.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  border-color: #e9ecef #e9ecef #dee2e6;
}

.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills .nav-link {
  border-radius: 0.25rem;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #007bff;
}

.nav-fill .nav-item {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified .nav-item {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}

.tab-content > .tab-pane {
  display: none;
}

.tab-content > .active {
  display: block;
}

.navbar {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.navbar > .container,
.navbar > .container-fluid {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-brand:hover, .navbar-brand:focus {
  text-decoration: none;
}

.navbar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-collapse {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-align: center;
  align-items: center;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.navbar-toggler:hover, .navbar-toggler:focus {
  text-decoration: none;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}

@media (max-width: 575.98px) {
  .navbar-expand-sm > .container,
  .navbar-expand-sm > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-sm > .container,
  .navbar-expand-sm > .container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-sm .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .navbar-expand-md > .container,
  .navbar-expand-md > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-md > .container,
  .navbar-expand-md > .container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-md .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-lg .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  .navbar-expand-xl > .container,
  .navbar-expand-xl > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 1200px) {
  .navbar-expand-xl {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-xl > .container,
  .navbar-expand-xl > .container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-xl .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}

.navbar-expand {
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.navbar-expand > .container,
.navbar-expand > .container-fluid {
  padding-right: 0;
  padding-left: 0;
}

.navbar-expand .navbar-nav {
  -ms-flex-direction: row;
  flex-direction: row;
}

.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}

.navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.navbar-expand > .container,
.navbar-expand > .container-fluid {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.navbar-expand .navbar-collapse {
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}

.navbar-expand .navbar-toggler {
  display: none;
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7);
}

.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}

.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-text a {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-dark .navbar-brand {
  color: #fff;
}

.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}

.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}

.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-text a {
  color: #fff;
}

.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
  color: #fff;
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.card > hr {
  margin-right: 0;
  margin-left: 0;
}

.card > .list-group:first-child .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.card > .list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}

.card-link + .card-link {
  margin-left: 1.25rem;
}

.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.card-header + .list-group .list-group-item:first-child {
  border-top: 0;
}

.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-footer:last-child {
  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}

.card-header-tabs {
  margin-right: -0.625rem;
  margin-bottom: -0.75rem;
  margin-left: -0.625rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}

.card-img {
  width: 100%;
  border-radius: calc(0.25rem - 1px);
}

.card-img-top {
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card-img-bottom {
  width: 100%;
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-deck {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.card-deck .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-deck {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .card-deck .card {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

.card-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.card-group > .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-group {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  .card-group > .card {
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-top,
  .card-group > .card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-bottom,
  .card-group > .card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-top,
  .card-group > .card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-bottom,
  .card-group > .card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}

.card-columns .card {
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

.accordion > .card {
  overflow: hidden;
}

.accordion > .card:not(:first-of-type) .card-header:first-child {
  border-radius: 0;
}

.accordion > .card:not(:first-of-type):not(:last-of-type) {
  border-bottom: 0;
  border-radius: 0;
}

.accordion > .card:first-of-type {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion > .card:last-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.accordion > .card .card-header {
  margin-bottom: -1px;
}

.breadcrumb {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}

.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #6c757d;
}

.pagination {
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
}

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

.page-link:hover {
  z-index: 2;
  color: #0056b3;
  text-decoration: none;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.page-link:focus {
  z-index: 2;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .badge {
    transition: none;
  }
}

a.badge:hover, a.badge:focus {
  text-decoration: none;
}

.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}

.badge-primary {
  color: #fff;
  background-color: #007bff;
}

a.badge-primary:hover, a.badge-primary:focus {
  color: #fff;
  background-color: #0062cc;
}

a.badge-primary:focus, a.badge-primary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.badge-secondary {
  color: #fff;
  background-color: #6c757d;
}

a.badge-secondary:hover, a.badge-secondary:focus {
  color: #fff;
  background-color: #545b62;
}

a.badge-secondary:focus, a.badge-secondary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.badge-success {
  color: #fff;
  background-color: #28a745;
}

a.badge-success:hover, a.badge-success:focus {
  color: #fff;
  background-color: #1e7e34;
}

a.badge-success:focus, a.badge-success.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.badge-info {
  color: #fff;
  background-color: #17a2b8;
}

a.badge-info:hover, a.badge-info:focus {
  color: #fff;
  background-color: #117a8b;
}

a.badge-info:focus, a.badge-info.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.badge-warning {
  color: #212529;
  background-color: #ffc107;
}

a.badge-warning:hover, a.badge-warning:focus {
  color: #212529;
  background-color: #d39e00;
}

a.badge-warning:focus, a.badge-warning.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.badge-danger {
  color: #fff;
  background-color: #dc3545;
}

a.badge-danger:hover, a.badge-danger:focus {
  color: #fff;
  background-color: #bd2130;
}

a.badge-danger:focus, a.badge-danger.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.badge-light {
  color: #212529;
  background-color: #f8f9fa;
}

a.badge-light:hover, a.badge-light:focus {
  color: #212529;
  background-color: #dae0e5;
}

a.badge-light:focus, a.badge-light.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

.badge-dark {
  color: #fff;
  background-color: #343a40;
}

a.badge-dark:hover, a.badge-dark:focus {
  color: #fff;
  background-color: #1d2124;
}

a.badge-dark:focus, a.badge-dark.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-right: 4rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}

.alert-primary hr {
  border-top-color: #9fcdff;
}

.alert-primary .alert-link {
  color: #002752;
}

.alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}

.alert-secondary hr {
  border-top-color: #c8cbcf;
}

.alert-secondary .alert-link {
  color: #202326;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-success hr {
  border-top-color: #b1dfbb;
}

.alert-success .alert-link {
  color: #0b2e13;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert-info hr {
  border-top-color: #abdde5;
}

.alert-info .alert-link {
  color: #062c33;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert-warning hr {
  border-top-color: #ffe8a1;
}

.alert-warning .alert-link {
  color: #533f03;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-danger hr {
  border-top-color: #f1b0b7;
}

.alert-danger .alert-link {
  color: #491217;
}

.alert-light {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
}

.alert-light hr {
  border-top-color: #ececf6;
}

.alert-light .alert-link {
  color: #686868;
}

.alert-dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}

.alert-dark hr {
  border-top-color: #b9bbbe;
}

.alert-dark .alert-link {
  color: #040505;
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}

.progress {
  display: -ms-flexbox;
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

.progress-bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #007bff;
  transition: width 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  -webkit-animation: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    -webkit-animation: none;
    animation: none;
  }
}

.media {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
}

.media-body {
  -ms-flex: 1;
  flex: 1;
}

.list-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

.list-group-item-action {
  width: 100%;
  color: #495057;
  text-align: inherit;
}

.list-group-item-action:hover, .list-group-item-action:focus {
  z-index: 1;
  color: #495057;
  text-decoration: none;
  background-color: #f8f9fa;
}

.list-group-item-action:active {
  color: #212529;
  background-color: #e9ecef;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.list-group-item.disabled, .list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}

.list-group-item.active {
  z-index: 2;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.list-group-horizontal {
  -ms-flex-direction: row;
  flex-direction: row;
}

.list-group-horizontal .list-group-item {
  margin-right: -1px;
  margin-bottom: 0;
}

.list-group-horizontal .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0;
}

.list-group-horizontal .list-group-item:last-child {
  margin-right: 0;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0;
}

@media (min-width: 576px) {
  .list-group-horizontal-sm {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-sm .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-sm .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-sm .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 768px) {
  .list-group-horizontal-md {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-md .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-md .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-md .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 992px) {
  .list-group-horizontal-lg {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-lg .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-lg .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-lg .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-xl .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-xl .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xl .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

.list-group-flush .list-group-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.list-group-flush .list-group-item:last-child {
  margin-bottom: -1px;
}

.list-group-flush:first-child .list-group-item:first-child {
  border-top: 0;
}

.list-group-flush:last-child .list-group-item:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

.list-group-item-primary {
  color: #004085;
  background-color: #b8daff;
}

.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
  color: #004085;
  background-color: #9fcdff;
}

.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #004085;
  border-color: #004085;
}

.list-group-item-secondary {
  color: #383d41;
  background-color: #d6d8db;
}

.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
  color: #383d41;
  background-color: #c8cbcf;
}

.list-group-item-secondary.list-group-item-action.active {
  color: #fff;
  background-color: #383d41;
  border-color: #383d41;
}

.list-group-item-success {
  color: #155724;
  background-color: #c3e6cb;
}

.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
  color: #155724;
  background-color: #b1dfbb;
}

.list-group-item-success.list-group-item-action.active {
  color: #fff;
  background-color: #155724;
  border-color: #155724;
}

.list-group-item-info {
  color: #0c5460;
  background-color: #bee5eb;
}

.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
  color: #0c5460;
  background-color: #abdde5;
}

.list-group-item-info.list-group-item-action.active {
  color: #fff;
  background-color: #0c5460;
  border-color: #0c5460;
}

.list-group-item-warning {
  color: #856404;
  background-color: #ffeeba;
}

.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
  color: #856404;
  background-color: #ffe8a1;
}

.list-group-item-warning.list-group-item-action.active {
  color: #fff;
  background-color: #856404;
  border-color: #856404;
}

.list-group-item-danger {
  color: #721c24;
  background-color: #f5c6cb;
}

.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
  color: #721c24;
  background-color: #f1b0b7;
}

.list-group-item-danger.list-group-item-action.active {
  color: #fff;
  background-color: #721c24;
  border-color: #721c24;
}

.list-group-item-light {
  color: #818182;
  background-color: #fdfdfe;
}

.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
  color: #818182;
  background-color: #ececf6;
}

.list-group-item-light.list-group-item-action.active {
  color: #fff;
  background-color: #818182;
  border-color: #818182;
}

.list-group-item-dark {
  color: #1b1e21;
  background-color: #c6c8ca;
}

.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
  color: #1b1e21;
  background-color: #b9bbbe;
}

.list-group-item-dark.list-group-item-action.active {
  color: #fff;
  background-color: #1b1e21;
  border-color: #1b1e21;
}

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}

.close:hover {
  color: #000;
  text-decoration: none;
}

.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
  opacity: .75;
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

a.close.disabled {
  pointer-events: none;
}

.toast {
  max-width: 350px;
  overflow: hidden;
  font-size: 0.875rem;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  border-radius: 0.25rem;
}

.toast:not(:last-child) {
  margin-bottom: 0.75rem;
}

.toast.showing {
  opacity: 1;
}

.toast.show {
  display: block;
  opacity: 1;
}

.toast.hide {
  display: none;
}

.toast-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.25rem 0.75rem;
  color: #6c757d;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.toast-body {
  padding: 0.75rem;
}

.modal-open {
  overflow: hidden;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate(0, -50px);
  transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}

.modal.show .modal-dialog {
  -webkit-transform: none;
  transform: none;
}

.modal-dialog-scrollable {
  display: -ms-flexbox;
  display: flex;
  max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  content: "";
}

.modal-dialog-centered.modal-dialog-scrollable {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}

.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}

.modal-content {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.modal-footer > :not(:first-child) {
  margin-left: .25rem;
}

.modal-footer > :not(:last-child) {
  margin-right: .25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
  }
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
  }
  .modal-sm {
    max-width: 300px;
  }
}

@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
}

.tooltip.show {
  opacity: 0.9;
}

.tooltip .arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}

.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
  padding: 0.4rem 0;
}

.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
  bottom: 0;
}

.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  top: 0;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #000;
}

.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
  padding: 0 0.4rem;
}

.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  right: 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #000;
}

.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
  padding: 0.4rem 0;
}

.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
  top: 0;
}

.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  bottom: 0;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #000;
}

.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
  padding: 0 0.4rem;
}

.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
  right: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  left: 0;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #000;
}

.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 0.25rem;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: block;
  max-width: 276px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
}

.popover .arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0.5rem;
  margin: 0 0.3rem;
}

.popover .arrow::before, .popover .arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-popover-top, .bs-popover-auto[x-placement^="top"] {
  margin-bottom: 0.5rem;
}

.bs-popover-top > .arrow, .bs-popover-auto[x-placement^="top"] > .arrow {
  bottom: calc((0.5rem + 1px) * -1);
}

.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before {
  bottom: 0;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after {
  bottom: 1px;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: #fff;
}

.bs-popover-right, .bs-popover-auto[x-placement^="right"] {
  margin-left: 0.5rem;
}

.bs-popover-right > .arrow, .bs-popover-auto[x-placement^="right"] > .arrow {
  left: calc((0.5rem + 1px) * -1);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}

.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before {
  left: 0;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
  left: 1px;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: #fff;
}

.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] {
  margin-top: 0.5rem;
}

.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^="bottom"] > .arrow {
  top: calc((0.5rem + 1px) * -1);
}

.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before {
  top: 0;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
  top: 1px;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: #fff;
}

.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1rem;
  margin-left: -0.5rem;
  content: "";
  border-bottom: 1px solid #f7f7f7;
}

.bs-popover-left, .bs-popover-auto[x-placement^="left"] {
  margin-right: 0.5rem;
}

.bs-popover-left > .arrow, .bs-popover-auto[x-placement^="left"] > .arrow {
  right: calc((0.5rem + 1px) * -1);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}

.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before {
  right: 0;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after {
  right: 1px;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: #fff;
}

.popover-header {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}

.popover-header:empty {
  display: none;
}

.popover-body {
  padding: 0.5rem 0.75rem;
  color: #212529;
}

.carousel {
  position: relative;
}

.carousel.pointer-event {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  -webkit-transform: none;
  transform: none;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  z-index: 1;
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  transition: 0s 0.6s opacity;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    transition: none;
  }
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}

.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat 50% / 100% 100%;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}

.carousel-indicators li {
  box-sizing: content-box;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: .5;
  transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-indicators li {
    transition: none;
  }
}

.carousel-indicators .active {
  opacity: 1;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner-border .75s linear infinite;
  animation: spinner-border .75s linear infinite;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

@-webkit-keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
  }
}

@keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
  }
}

.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: spinner-grow .75s linear infinite;
  animation: spinner-grow .75s linear infinite;
}

.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.bg-primary {
  background-color: #007bff !important;
}

a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: #0062cc !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

a.bg-secondary:hover, a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
  background-color: #545b62 !important;
}

.bg-success {
  background-color: #28a745 !important;
}

a.bg-success:hover, a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
  background-color: #1e7e34 !important;
}

.bg-info {
  background-color: #17a2b8 !important;
}

a.bg-info:hover, a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
  background-color: #117a8b !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

a.bg-warning:hover, a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
  background-color: #d39e00 !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

a.bg-danger:hover, a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
  background-color: #bd2130 !important;
}

.bg-light {
  background-color: #f8f9fa !important;
}

a.bg-light:hover, a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
  background-color: #dae0e5 !important;
}

.bg-dark {
  background-color: #343a40 !important;
}

a.bg-dark:hover, a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
  background-color: #1d2124 !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.border {
  border: 1px solid #dee2e6 !important;
}

.border-top {
  border-top: 1px solid #dee2e6 !important;
}

.border-right {
  border-right: 1px solid #dee2e6 !important;
}

.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

.border-left {
  border-left: 1px solid #dee2e6 !important;
}

.border-0 {
  border: 0 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-right-0 {
  border-right: 0 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-left-0 {
  border-left: 0 !important;
}

.border-primary {
  border-color: #007bff !important;
}

.border-secondary {
  border-color: #6c757d !important;
}

.border-success {
  border-color: #28a745 !important;
}

.border-info {
  border-color: #17a2b8 !important;
}

.border-warning {
  border-color: #ffc107 !important;
}

.border-danger {
  border-color: #dc3545 !important;
}

.border-light {
  border-color: #f8f9fa !important;
}

.border-dark {
  border-color: #343a40 !important;
}

.border-white {
  border-color: #fff !important;
}

.rounded-sm {
  border-radius: 0.2rem !important;
}

.rounded {
  border-radius: 0.25rem !important;
}

.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

.rounded-right {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.rounded-bottom {
  border-bottom-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-left {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-lg {
  border-radius: 0.3rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-inline-flex {
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-md-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media print {
  .d-print-none {
    display: none !important;
  }
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-print-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

.flex-row {
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.flex-column {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex-row-reverse {
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}

.flex-wrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important;
}

.flex-fill {
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}

.flex-grow-0 {
  -ms-flex-positive: 0 !important;
  flex-grow: 0 !important;
}

.flex-grow-1 {
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  -ms-flex-negative: 1 !important;
  flex-shrink: 1 !important;
}

.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.justify-content-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}

.align-items-start {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

.align-items-end {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}

.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}

.align-items-baseline {
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}

.align-items-stretch {
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}

.align-content-start {
  -ms-flex-line-pack: start !important;
  align-content: flex-start !important;
}

.align-content-end {
  -ms-flex-line-pack: end !important;
  align-content: flex-end !important;
}

.align-content-center {
  -ms-flex-line-pack: center !important;
  align-content: center !important;
}

.align-content-between {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important;
}

.align-content-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important;
}

.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important;
}

.align-self-auto {
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
}

.align-self-start {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}

.align-self-end {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.align-self-baseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}

.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}

@media (min-width: 576px) {
  .flex-sm-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-sm-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-sm-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-sm-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-sm-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-sm-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-sm-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-sm-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-sm-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-sm-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-sm-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-sm-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-sm-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-sm-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-sm-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-sm-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-sm-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-sm-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-sm-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 768px) {
  .flex-md-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-md-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-md-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-md-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-md-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-md-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-md-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-md-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-md-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-md-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-md-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-md-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-md-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-md-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-md-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-md-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-md-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-md-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-md-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-md-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-md-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-md-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 992px) {
  .flex-lg-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-lg-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-lg-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-lg-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-lg-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-lg-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-lg-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-lg-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-lg-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-lg-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-lg-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-lg-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-lg-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-lg-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-lg-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-lg-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-lg-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-lg-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 1200px) {
  .flex-xl-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-xl-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-xl-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-xl-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-xl-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-xl-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-xl-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-xl-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-xl-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-xl-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-xl-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-xl-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-xl-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-xl-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-xl-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-xl-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-xl-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-xl-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-xl-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

@media (min-width: 576px) {
  .float-sm-left {
    float: left !important;
  }
  .float-sm-right {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
}

@media (min-width: 768px) {
  .float-md-left {
    float: left !important;
  }
  .float-md-right {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
}

@media (min-width: 992px) {
  .float-lg-left {
    float: left !important;
  }
  .float-lg-right {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .float-xl-left {
    float: left !important;
  }
  .float-xl-right {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.shadow-none {
  box-shadow: none !important;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.vw-100 {
  width: 100vw !important;
}

.vh-100 {
  height: 100vh !important;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-n1 {
  margin: -0.25rem !important;
}

.mt-n1,
.my-n1 {
  margin-top: -0.25rem !important;
}

.mr-n1,
.mx-n1 {
  margin-right: -0.25rem !important;
}

.mb-n1,
.my-n1 {
  margin-bottom: -0.25rem !important;
}

.ml-n1,
.mx-n1 {
  margin-left: -0.25rem !important;
}

.m-n2 {
  margin: -0.5rem !important;
}

.mt-n2,
.my-n2 {
  margin-top: -0.5rem !important;
}

.mr-n2,
.mx-n2 {
  margin-right: -0.5rem !important;
}

.mb-n2,
.my-n2 {
  margin-bottom: -0.5rem !important;
}

.ml-n2,
.mx-n2 {
  margin-left: -0.5rem !important;
}

.m-n3 {
  margin: -1rem !important;
}

.mt-n3,
.my-n3 {
  margin-top: -1rem !important;
}

.mr-n3,
.mx-n3 {
  margin-right: -1rem !important;
}

.mb-n3,
.my-n3 {
  margin-bottom: -1rem !important;
}

.ml-n3,
.mx-n3 {
  margin-left: -1rem !important;
}

.m-n4 {
  margin: -1.5rem !important;
}

.mt-n4,
.my-n4 {
  margin-top: -1.5rem !important;
}

.mr-n4,
.mx-n4 {
  margin-right: -1.5rem !important;
}

.mb-n4,
.my-n4 {
  margin-bottom: -1.5rem !important;
}

.ml-n4,
.mx-n4 {
  margin-left: -1.5rem !important;
}

.m-n5 {
  margin: -3rem !important;
}

.mt-n5,
.my-n5 {
  margin-top: -3rem !important;
}

.mr-n5,
.mx-n5 {
  margin-right: -3rem !important;
}

.mb-n5,
.my-n5 {
  margin-bottom: -3rem !important;
}

.ml-n5,
.mx-n5 {
  margin-left: -3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }
  .mt-sm-0,
  .my-sm-0 {
    margin-top: 0 !important;
  }
  .mr-sm-0,
  .mx-sm-0 {
    margin-right: 0 !important;
  }
  .mb-sm-0,
  .my-sm-0 {
    margin-bottom: 0 !important;
  }
  .ml-sm-0,
  .mx-sm-0 {
    margin-left: 0 !important;
  }
  .m-sm-1 {
    margin: 0.25rem !important;
  }
  .mt-sm-1,
  .my-sm-1 {
    margin-top: 0.25rem !important;
  }
  .mr-sm-1,
  .mx-sm-1 {
    margin-right: 0.25rem !important;
  }
  .mb-sm-1,
  .my-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-sm-1,
  .mx-sm-1 {
    margin-left: 0.25rem !important;
  }
  .m-sm-2 {
    margin: 0.5rem !important;
  }
  .mt-sm-2,
  .my-sm-2 {
    margin-top: 0.5rem !important;
  }
  .mr-sm-2,
  .mx-sm-2 {
    margin-right: 0.5rem !important;
  }
  .mb-sm-2,
  .my-sm-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-sm-2,
  .mx-sm-2 {
    margin-left: 0.5rem !important;
  }
  .m-sm-3 {
    margin: 1rem !important;
  }
  .mt-sm-3,
  .my-sm-3 {
    margin-top: 1rem !important;
  }
  .mr-sm-3,
  .mx-sm-3 {
    margin-right: 1rem !important;
  }
  .mb-sm-3,
  .my-sm-3 {
    margin-bottom: 1rem !important;
  }
  .ml-sm-3,
  .mx-sm-3 {
    margin-left: 1rem !important;
  }
  .m-sm-4 {
    margin: 1.5rem !important;
  }
  .mt-sm-4,
  .my-sm-4 {
    margin-top: 1.5rem !important;
  }
  .mr-sm-4,
  .mx-sm-4 {
    margin-right: 1.5rem !important;
  }
  .mb-sm-4,
  .my-sm-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-sm-4,
  .mx-sm-4 {
    margin-left: 1.5rem !important;
  }
  .m-sm-5 {
    margin: 3rem !important;
  }
  .mt-sm-5,
  .my-sm-5 {
    margin-top: 3rem !important;
  }
  .mr-sm-5,
  .mx-sm-5 {
    margin-right: 3rem !important;
  }
  .mb-sm-5,
  .my-sm-5 {
    margin-bottom: 3rem !important;
  }
  .ml-sm-5,
  .mx-sm-5 {
    margin-left: 3rem !important;
  }
  .p-sm-0 {
    padding: 0 !important;
  }
  .pt-sm-0,
  .py-sm-0 {
    padding-top: 0 !important;
  }
  .pr-sm-0,
  .px-sm-0 {
    padding-right: 0 !important;
  }
  .pb-sm-0,
  .py-sm-0 {
    padding-bottom: 0 !important;
  }
  .pl-sm-0,
  .px-sm-0 {
    padding-left: 0 !important;
  }
  .p-sm-1 {
    padding: 0.25rem !important;
  }
  .pt-sm-1,
  .py-sm-1 {
    padding-top: 0.25rem !important;
  }
  .pr-sm-1,
  .px-sm-1 {
    padding-right: 0.25rem !important;
  }
  .pb-sm-1,
  .py-sm-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-sm-1,
  .px-sm-1 {
    padding-left: 0.25rem !important;
  }
  .p-sm-2 {
    padding: 0.5rem !important;
  }
  .pt-sm-2,
  .py-sm-2 {
    padding-top: 0.5rem !important;
  }
  .pr-sm-2,
  .px-sm-2 {
    padding-right: 0.5rem !important;
  }
  .pb-sm-2,
  .py-sm-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-sm-2,
  .px-sm-2 {
    padding-left: 0.5rem !important;
  }
  .p-sm-3 {
    padding: 1rem !important;
  }
  .pt-sm-3,
  .py-sm-3 {
    padding-top: 1rem !important;
  }
  .pr-sm-3,
  .px-sm-3 {
    padding-right: 1rem !important;
  }
  .pb-sm-3,
  .py-sm-3 {
    padding-bottom: 1rem !important;
  }
  .pl-sm-3,
  .px-sm-3 {
    padding-left: 1rem !important;
  }
  .p-sm-4 {
    padding: 1.5rem !important;
  }
  .pt-sm-4,
  .py-sm-4 {
    padding-top: 1.5rem !important;
  }
  .pr-sm-4,
  .px-sm-4 {
    padding-right: 1.5rem !important;
  }
  .pb-sm-4,
  .py-sm-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-sm-4,
  .px-sm-4 {
    padding-left: 1.5rem !important;
  }
  .p-sm-5 {
    padding: 3rem !important;
  }
  .pt-sm-5,
  .py-sm-5 {
    padding-top: 3rem !important;
  }
  .pr-sm-5,
  .px-sm-5 {
    padding-right: 3rem !important;
  }
  .pb-sm-5,
  .py-sm-5 {
    padding-bottom: 3rem !important;
  }
  .pl-sm-5,
  .px-sm-5 {
    padding-left: 3rem !important;
  }
  .m-sm-n1 {
    margin: -0.25rem !important;
  }
  .mt-sm-n1,
  .my-sm-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-sm-n1,
  .mx-sm-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-sm-n1,
  .my-sm-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-sm-n1,
  .mx-sm-n1 {
    margin-left: -0.25rem !important;
  }
  .m-sm-n2 {
    margin: -0.5rem !important;
  }
  .mt-sm-n2,
  .my-sm-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-sm-n2,
  .mx-sm-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-sm-n2,
  .my-sm-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-sm-n2,
  .mx-sm-n2 {
    margin-left: -0.5rem !important;
  }
  .m-sm-n3 {
    margin: -1rem !important;
  }
  .mt-sm-n3,
  .my-sm-n3 {
    margin-top: -1rem !important;
  }
  .mr-sm-n3,
  .mx-sm-n3 {
    margin-right: -1rem !important;
  }
  .mb-sm-n3,
  .my-sm-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-sm-n3,
  .mx-sm-n3 {
    margin-left: -1rem !important;
  }
  .m-sm-n4 {
    margin: -1.5rem !important;
  }
  .mt-sm-n4,
  .my-sm-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-sm-n4,
  .mx-sm-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-sm-n4,
  .my-sm-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-sm-n4,
  .mx-sm-n4 {
    margin-left: -1.5rem !important;
  }
  .m-sm-n5 {
    margin: -3rem !important;
  }
  .mt-sm-n5,
  .my-sm-n5 {
    margin-top: -3rem !important;
  }
  .mr-sm-n5,
  .mx-sm-n5 {
    margin-right: -3rem !important;
  }
  .mb-sm-n5,
  .my-sm-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-sm-n5,
  .mx-sm-n5 {
    margin-left: -3rem !important;
  }
  .m-sm-auto {
    margin: auto !important;
  }
  .mt-sm-auto,
  .my-sm-auto {
    margin-top: auto !important;
  }
  .mr-sm-auto,
  .mx-sm-auto {
    margin-right: auto !important;
  }
  .mb-sm-auto,
  .my-sm-auto {
    margin-bottom: auto !important;
  }
  .ml-sm-auto,
  .mx-sm-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }
  .mt-md-0,
  .my-md-0 {
    margin-top: 0 !important;
  }
  .mr-md-0,
  .mx-md-0 {
    margin-right: 0 !important;
  }
  .mb-md-0,
  .my-md-0 {
    margin-bottom: 0 !important;
  }
  .ml-md-0,
  .mx-md-0 {
    margin-left: 0 !important;
  }
  .m-md-1 {
    margin: 0.25rem !important;
  }
  .mt-md-1,
  .my-md-1 {
    margin-top: 0.25rem !important;
  }
  .mr-md-1,
  .mx-md-1 {
    margin-right: 0.25rem !important;
  }
  .mb-md-1,
  .my-md-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-md-1,
  .mx-md-1 {
    margin-left: 0.25rem !important;
  }
  .m-md-2 {
    margin: 0.5rem !important;
  }
  .mt-md-2,
  .my-md-2 {
    margin-top: 0.5rem !important;
  }
  .mr-md-2,
  .mx-md-2 {
    margin-right: 0.5rem !important;
  }
  .mb-md-2,
  .my-md-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-md-2,
  .mx-md-2 {
    margin-left: 0.5rem !important;
  }
  .m-md-3 {
    margin: 1rem !important;
  }
  .mt-md-3,
  .my-md-3 {
    margin-top: 1rem !important;
  }
  .mr-md-3,
  .mx-md-3 {
    margin-right: 1rem !important;
  }
  .mb-md-3,
  .my-md-3 {
    margin-bottom: 1rem !important;
  }
  .ml-md-3,
  .mx-md-3 {
    margin-left: 1rem !important;
  }
  .m-md-4 {
    margin: 1.5rem !important;
  }
  .mt-md-4,
  .my-md-4 {
    margin-top: 1.5rem !important;
  }
  .mr-md-4,
  .mx-md-4 {
    margin-right: 1.5rem !important;
  }
  .mb-md-4,
  .my-md-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-md-4,
  .mx-md-4 {
    margin-left: 1.5rem !important;
  }
  .m-md-5 {
    margin: 3rem !important;
  }
  .mt-md-5,
  .my-md-5 {
    margin-top: 3rem !important;
  }
  .mr-md-5,
  .mx-md-5 {
    margin-right: 3rem !important;
  }
  .mb-md-5,
  .my-md-5 {
    margin-bottom: 3rem !important;
  }
  .ml-md-5,
  .mx-md-5 {
    margin-left: 3rem !important;
  }
  .p-md-0 {
    padding: 0 !important;
  }
  .pt-md-0,
  .py-md-0 {
    padding-top: 0 !important;
  }
  .pr-md-0,
  .px-md-0 {
    padding-right: 0 !important;
  }
  .pb-md-0,
  .py-md-0 {
    padding-bottom: 0 !important;
  }
  .pl-md-0,
  .px-md-0 {
    padding-left: 0 !important;
  }
  .p-md-1 {
    padding: 0.25rem !important;
  }
  .pt-md-1,
  .py-md-1 {
    padding-top: 0.25rem !important;
  }
  .pr-md-1,
  .px-md-1 {
    padding-right: 0.25rem !important;
  }
  .pb-md-1,
  .py-md-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-md-1,
  .px-md-1 {
    padding-left: 0.25rem !important;
  }
  .p-md-2 {
    padding: 0.5rem !important;
  }
  .pt-md-2,
  .py-md-2 {
    padding-top: 0.5rem !important;
  }
  .pr-md-2,
  .px-md-2 {
    padding-right: 0.5rem !important;
  }
  .pb-md-2,
  .py-md-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-md-2,
  .px-md-2 {
    padding-left: 0.5rem !important;
  }
  .p-md-3 {
    padding: 1rem !important;
  }
  .pt-md-3,
  .py-md-3 {
    padding-top: 1rem !important;
  }
  .pr-md-3,
  .px-md-3 {
    padding-right: 1rem !important;
  }
  .pb-md-3,
  .py-md-3 {
    padding-bottom: 1rem !important;
  }
  .pl-md-3,
  .px-md-3 {
    padding-left: 1rem !important;
  }
  .p-md-4 {
    padding: 1.5rem !important;
  }
  .pt-md-4,
  .py-md-4 {
    padding-top: 1.5rem !important;
  }
  .pr-md-4,
  .px-md-4 {
    padding-right: 1.5rem !important;
  }
  .pb-md-4,
  .py-md-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-md-4,
  .px-md-4 {
    padding-left: 1.5rem !important;
  }
  .p-md-5 {
    padding: 3rem !important;
  }
  .pt-md-5,
  .py-md-5 {
    padding-top: 3rem !important;
  }
  .pr-md-5,
  .px-md-5 {
    padding-right: 3rem !important;
  }
  .pb-md-5,
  .py-md-5 {
    padding-bottom: 3rem !important;
  }
  .pl-md-5,
  .px-md-5 {
    padding-left: 3rem !important;
  }
  .m-md-n1 {
    margin: -0.25rem !important;
  }
  .mt-md-n1,
  .my-md-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-md-n1,
  .mx-md-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-md-n1,
  .my-md-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-md-n1,
  .mx-md-n1 {
    margin-left: -0.25rem !important;
  }
  .m-md-n2 {
    margin: -0.5rem !important;
  }
  .mt-md-n2,
  .my-md-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-md-n2,
  .mx-md-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-md-n2,
  .my-md-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-md-n2,
  .mx-md-n2 {
    margin-left: -0.5rem !important;
  }
  .m-md-n3 {
    margin: -1rem !important;
  }
  .mt-md-n3,
  .my-md-n3 {
    margin-top: -1rem !important;
  }
  .mr-md-n3,
  .mx-md-n3 {
    margin-right: -1rem !important;
  }
  .mb-md-n3,
  .my-md-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-md-n3,
  .mx-md-n3 {
    margin-left: -1rem !important;
  }
  .m-md-n4 {
    margin: -1.5rem !important;
  }
  .mt-md-n4,
  .my-md-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-md-n4,
  .mx-md-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-md-n4,
  .my-md-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-md-n4,
  .mx-md-n4 {
    margin-left: -1.5rem !important;
  }
  .m-md-n5 {
    margin: -3rem !important;
  }
  .mt-md-n5,
  .my-md-n5 {
    margin-top: -3rem !important;
  }
  .mr-md-n5,
  .mx-md-n5 {
    margin-right: -3rem !important;
  }
  .mb-md-n5,
  .my-md-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-md-n5,
  .mx-md-n5 {
    margin-left: -3rem !important;
  }
  .m-md-auto {
    margin: auto !important;
  }
  .mt-md-auto,
  .my-md-auto {
    margin-top: auto !important;
  }
  .mr-md-auto,
  .mx-md-auto {
    margin-right: auto !important;
  }
  .mb-md-auto,
  .my-md-auto {
    margin-bottom: auto !important;
  }
  .ml-md-auto,
  .mx-md-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0 !important;
  }
  .mt-lg-0,
  .my-lg-0 {
    margin-top: 0 !important;
  }
  .mr-lg-0,
  .mx-lg-0 {
    margin-right: 0 !important;
  }
  .mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
  }
  .ml-lg-0,
  .mx-lg-0 {
    margin-left: 0 !important;
  }
  .m-lg-1 {
    margin: 0.25rem !important;
  }
  .mt-lg-1,
  .my-lg-1 {
    margin-top: 0.25rem !important;
  }
  .mr-lg-1,
  .mx-lg-1 {
    margin-right: 0.25rem !important;
  }
  .mb-lg-1,
  .my-lg-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-lg-1,
  .mx-lg-1 {
    margin-left: 0.25rem !important;
  }
  .m-lg-2 {
    margin: 0.5rem !important;
  }
  .mt-lg-2,
  .my-lg-2 {
    margin-top: 0.5rem !important;
  }
  .mr-lg-2,
  .mx-lg-2 {
    margin-right: 0.5rem !important;
  }
  .mb-lg-2,
  .my-lg-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-lg-2,
  .mx-lg-2 {
    margin-left: 0.5rem !important;
  }
  .m-lg-3 {
    margin: 1rem !important;
  }
  .mt-lg-3,
  .my-lg-3 {
    margin-top: 1rem !important;
  }
  .mr-lg-3,
  .mx-lg-3 {
    margin-right: 1rem !important;
  }
  .mb-lg-3,
  .my-lg-3 {
    margin-bottom: 1rem !important;
  }
  .ml-lg-3,
  .mx-lg-3 {
    margin-left: 1rem !important;
  }
  .m-lg-4 {
    margin: 1.5rem !important;
  }
  .mt-lg-4,
  .my-lg-4 {
    margin-top: 1.5rem !important;
  }
  .mr-lg-4,
  .mx-lg-4 {
    margin-right: 1.5rem !important;
  }
  .mb-lg-4,
  .my-lg-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-lg-4,
  .mx-lg-4 {
    margin-left: 1.5rem !important;
  }
  .m-lg-5 {
    margin: 3rem !important;
  }
  .mt-lg-5,
  .my-lg-5 {
    margin-top: 3rem !important;
  }
  .mr-lg-5,
  .mx-lg-5 {
    margin-right: 3rem !important;
  }
  .mb-lg-5,
  .my-lg-5 {
    margin-bottom: 3rem !important;
  }
  .ml-lg-5,
  .mx-lg-5 {
    margin-left: 3rem !important;
  }
  .p-lg-0 {
    padding: 0 !important;
  }
  .pt-lg-0,
  .py-lg-0 {
    padding-top: 0 !important;
  }
  .pr-lg-0,
  .px-lg-0 {
    padding-right: 0 !important;
  }
  .pb-lg-0,
  .py-lg-0 {
    padding-bottom: 0 !important;
  }
  .pl-lg-0,
  .px-lg-0 {
    padding-left: 0 !important;
  }
  .p-lg-1 {
    padding: 0.25rem !important;
  }
  .pt-lg-1,
  .py-lg-1 {
    padding-top: 0.25rem !important;
  }
  .pr-lg-1,
  .px-lg-1 {
    padding-right: 0.25rem !important;
  }
  .pb-lg-1,
  .py-lg-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-lg-1,
  .px-lg-1 {
    padding-left: 0.25rem !important;
  }
  .p-lg-2 {
    padding: 0.5rem !important;
  }
  .pt-lg-2,
  .py-lg-2 {
    padding-top: 0.5rem !important;
  }
  .pr-lg-2,
  .px-lg-2 {
    padding-right: 0.5rem !important;
  }
  .pb-lg-2,
  .py-lg-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-lg-2,
  .px-lg-2 {
    padding-left: 0.5rem !important;
  }
  .p-lg-3 {
    padding: 1rem !important;
  }
  .pt-lg-3,
  .py-lg-3 {
    padding-top: 1rem !important;
  }
  .pr-lg-3,
  .px-lg-3 {
    padding-right: 1rem !important;
  }
  .pb-lg-3,
  .py-lg-3 {
    padding-bottom: 1rem !important;
  }
  .pl-lg-3,
  .px-lg-3 {
    padding-left: 1rem !important;
  }
  .p-lg-4 {
    padding: 1.5rem !important;
  }
  .pt-lg-4,
  .py-lg-4 {
    padding-top: 1.5rem !important;
  }
  .pr-lg-4,
  .px-lg-4 {
    padding-right: 1.5rem !important;
  }
  .pb-lg-4,
  .py-lg-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-lg-4,
  .px-lg-4 {
    padding-left: 1.5rem !important;
  }
  .p-lg-5 {
    padding: 3rem !important;
  }
  .pt-lg-5,
  .py-lg-5 {
    padding-top: 3rem !important;
  }
  .pr-lg-5,
  .px-lg-5 {
    padding-right: 3rem !important;
  }
  .pb-lg-5,
  .py-lg-5 {
    padding-bottom: 3rem !important;
  }
  .pl-lg-5,
  .px-lg-5 {
    padding-left: 3rem !important;
  }
  .m-lg-n1 {
    margin: -0.25rem !important;
  }
  .mt-lg-n1,
  .my-lg-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-lg-n1,
  .mx-lg-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-lg-n1,
  .my-lg-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-lg-n1,
  .mx-lg-n1 {
    margin-left: -0.25rem !important;
  }
  .m-lg-n2 {
    margin: -0.5rem !important;
  }
  .mt-lg-n2,
  .my-lg-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-lg-n2,
  .mx-lg-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-lg-n2,
  .my-lg-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-lg-n2,
  .mx-lg-n2 {
    margin-left: -0.5rem !important;
  }
  .m-lg-n3 {
    margin: -1rem !important;
  }
  .mt-lg-n3,
  .my-lg-n3 {
    margin-top: -1rem !important;
  }
  .mr-lg-n3,
  .mx-lg-n3 {
    margin-right: -1rem !important;
  }
  .mb-lg-n3,
  .my-lg-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-lg-n3,
  .mx-lg-n3 {
    margin-left: -1rem !important;
  }
  .m-lg-n4 {
    margin: -1.5rem !important;
  }
  .mt-lg-n4,
  .my-lg-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-lg-n4,
  .mx-lg-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-lg-n4,
  .my-lg-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-lg-n4,
  .mx-lg-n4 {
    margin-left: -1.5rem !important;
  }
  .m-lg-n5 {
    margin: -3rem !important;
  }
  .mt-lg-n5,
  .my-lg-n5 {
    margin-top: -3rem !important;
  }
  .mr-lg-n5,
  .mx-lg-n5 {
    margin-right: -3rem !important;
  }
  .mb-lg-n5,
  .my-lg-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-lg-n5,
  .mx-lg-n5 {
    margin-left: -3rem !important;
  }
  .m-lg-auto {
    margin: auto !important;
  }
  .mt-lg-auto,
  .my-lg-auto {
    margin-top: auto !important;
  }
  .mr-lg-auto,
  .mx-lg-auto {
    margin-right: auto !important;
  }
  .mb-lg-auto,
  .my-lg-auto {
    margin-bottom: auto !important;
  }
  .ml-lg-auto,
  .mx-lg-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }
  .mt-xl-0,
  .my-xl-0 {
    margin-top: 0 !important;
  }
  .mr-xl-0,
  .mx-xl-0 {
    margin-right: 0 !important;
  }
  .mb-xl-0,
  .my-xl-0 {
    margin-bottom: 0 !important;
  }
  .ml-xl-0,
  .mx-xl-0 {
    margin-left: 0 !important;
  }
  .m-xl-1 {
    margin: 0.25rem !important;
  }
  .mt-xl-1,
  .my-xl-1 {
    margin-top: 0.25rem !important;
  }
  .mr-xl-1,
  .mx-xl-1 {
    margin-right: 0.25rem !important;
  }
  .mb-xl-1,
  .my-xl-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-xl-1,
  .mx-xl-1 {
    margin-left: 0.25rem !important;
  }
  .m-xl-2 {
    margin: 0.5rem !important;
  }
  .mt-xl-2,
  .my-xl-2 {
    margin-top: 0.5rem !important;
  }
  .mr-xl-2,
  .mx-xl-2 {
    margin-right: 0.5rem !important;
  }
  .mb-xl-2,
  .my-xl-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-xl-2,
  .mx-xl-2 {
    margin-left: 0.5rem !important;
  }
  .m-xl-3 {
    margin: 1rem !important;
  }
  .mt-xl-3,
  .my-xl-3 {
    margin-top: 1rem !important;
  }
  .mr-xl-3,
  .mx-xl-3 {
    margin-right: 1rem !important;
  }
  .mb-xl-3,
  .my-xl-3 {
    margin-bottom: 1rem !important;
  }
  .ml-xl-3,
  .mx-xl-3 {
    margin-left: 1rem !important;
  }
  .m-xl-4 {
    margin: 1.5rem !important;
  }
  .mt-xl-4,
  .my-xl-4 {
    margin-top: 1.5rem !important;
  }
  .mr-xl-4,
  .mx-xl-4 {
    margin-right: 1.5rem !important;
  }
  .mb-xl-4,
  .my-xl-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-xl-4,
  .mx-xl-4 {
    margin-left: 1.5rem !important;
  }
  .m-xl-5 {
    margin: 3rem !important;
  }
  .mt-xl-5,
  .my-xl-5 {
    margin-top: 3rem !important;
  }
  .mr-xl-5,
  .mx-xl-5 {
    margin-right: 3rem !important;
  }
  .mb-xl-5,
  .my-xl-5 {
    margin-bottom: 3rem !important;
  }
  .ml-xl-5,
  .mx-xl-5 {
    margin-left: 3rem !important;
  }
  .p-xl-0 {
    padding: 0 !important;
  }
  .pt-xl-0,
  .py-xl-0 {
    padding-top: 0 !important;
  }
  .pr-xl-0,
  .px-xl-0 {
    padding-right: 0 !important;
  }
  .pb-xl-0,
  .py-xl-0 {
    padding-bottom: 0 !important;
  }
  .pl-xl-0,
  .px-xl-0 {
    padding-left: 0 !important;
  }
  .p-xl-1 {
    padding: 0.25rem !important;
  }
  .pt-xl-1,
  .py-xl-1 {
    padding-top: 0.25rem !important;
  }
  .pr-xl-1,
  .px-xl-1 {
    padding-right: 0.25rem !important;
  }
  .pb-xl-1,
  .py-xl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-xl-1,
  .px-xl-1 {
    padding-left: 0.25rem !important;
  }
  .p-xl-2 {
    padding: 0.5rem !important;
  }
  .pt-xl-2,
  .py-xl-2 {
    padding-top: 0.5rem !important;
  }
  .pr-xl-2,
  .px-xl-2 {
    padding-right: 0.5rem !important;
  }
  .pb-xl-2,
  .py-xl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-xl-2,
  .px-xl-2 {
    padding-left: 0.5rem !important;
  }
  .p-xl-3 {
    padding: 1rem !important;
  }
  .pt-xl-3,
  .py-xl-3 {
    padding-top: 1rem !important;
  }
  .pr-xl-3,
  .px-xl-3 {
    padding-right: 1rem !important;
  }
  .pb-xl-3,
  .py-xl-3 {
    padding-bottom: 1rem !important;
  }
  .pl-xl-3,
  .px-xl-3 {
    padding-left: 1rem !important;
  }
  .p-xl-4 {
    padding: 1.5rem !important;
  }
  .pt-xl-4,
  .py-xl-4 {
    padding-top: 1.5rem !important;
  }
  .pr-xl-4,
  .px-xl-4 {
    padding-right: 1.5rem !important;
  }
  .pb-xl-4,
  .py-xl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-xl-4,
  .px-xl-4 {
    padding-left: 1.5rem !important;
  }
  .p-xl-5 {
    padding: 3rem !important;
  }
  .pt-xl-5,
  .py-xl-5 {
    padding-top: 3rem !important;
  }
  .pr-xl-5,
  .px-xl-5 {
    padding-right: 3rem !important;
  }
  .pb-xl-5,
  .py-xl-5 {
    padding-bottom: 3rem !important;
  }
  .pl-xl-5,
  .px-xl-5 {
    padding-left: 3rem !important;
  }
  .m-xl-n1 {
    margin: -0.25rem !important;
  }
  .mt-xl-n1,
  .my-xl-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-xl-n1,
  .mx-xl-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-xl-n1,
  .my-xl-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-xl-n1,
  .mx-xl-n1 {
    margin-left: -0.25rem !important;
  }
  .m-xl-n2 {
    margin: -0.5rem !important;
  }
  .mt-xl-n2,
  .my-xl-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-xl-n2,
  .mx-xl-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-xl-n2,
  .my-xl-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-xl-n2,
  .mx-xl-n2 {
    margin-left: -0.5rem !important;
  }
  .m-xl-n3 {
    margin: -1rem !important;
  }
  .mt-xl-n3,
  .my-xl-n3 {
    margin-top: -1rem !important;
  }
  .mr-xl-n3,
  .mx-xl-n3 {
    margin-right: -1rem !important;
  }
  .mb-xl-n3,
  .my-xl-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-xl-n3,
  .mx-xl-n3 {
    margin-left: -1rem !important;
  }
  .m-xl-n4 {
    margin: -1.5rem !important;
  }
  .mt-xl-n4,
  .my-xl-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-xl-n4,
  .mx-xl-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-xl-n4,
  .my-xl-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-xl-n4,
  .mx-xl-n4 {
    margin-left: -1.5rem !important;
  }
  .m-xl-n5 {
    margin: -3rem !important;
  }
  .mt-xl-n5,
  .my-xl-n5 {
    margin-top: -3rem !important;
  }
  .mr-xl-n5,
  .mx-xl-n5 {
    margin-right: -3rem !important;
  }
  .mb-xl-n5,
  .my-xl-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-xl-n5,
  .mx-xl-n5 {
    margin-left: -3rem !important;
  }
  .m-xl-auto {
    margin: auto !important;
  }
  .mt-xl-auto,
  .my-xl-auto {
    margin-top: auto !important;
  }
  .mr-xl-auto,
  .mx-xl-auto {
    margin-right: auto !important;
  }
  .mb-xl-auto,
  .my-xl-auto {
    margin-bottom: auto !important;
  }
  .ml-xl-auto,
  .mx-xl-auto {
    margin-left: auto !important;
  }
}

.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.text-justify {
  text-align: justify !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }
  .text-sm-right {
    text-align: right !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }
  .text-md-right {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}

@media (min-width: 992px) {
  .text-lg-left {
    text-align: left !important;
  }
  .text-lg-right {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}

@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
  }
  .text-xl-right {
    text-align: right !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.font-weight-light {
  font-weight: 300 !important;
}

.font-weight-lighter {
  font-weight: lighter !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.font-italic {
  font-style: italic !important;
}

.text-white {
  color: #fff !important;
}

.text-primary {
  color: #007bff !important;
}

a.text-primary:hover, a.text-primary:focus {
  color: #0056b3 !important;
}

.text-secondary {
  color: #6c757d !important;
}

a.text-secondary:hover, a.text-secondary:focus {
  color: #494f54 !important;
}

.text-success {
  color: #28a745 !important;
}

a.text-success:hover, a.text-success:focus {
  color: #19692c !important;
}

.text-info {
  color: #17a2b8 !important;
}

a.text-info:hover, a.text-info:focus {
  color: #0f6674 !important;
}

.text-warning {
  color: #ffc107 !important;
}

a.text-warning:hover, a.text-warning:focus {
  color: #ba8b00 !important;
}

.text-danger {
  color: #dc3545 !important;
}

a.text-danger:hover, a.text-danger:focus {
  color: #a71d2a !important;
}

.text-light {
  color: #f8f9fa !important;
}

a.text-light:hover, a.text-light:focus {
  color: #cbd3da !important;
}

.text-dark {
  color: #343a40 !important;
}

a.text-dark:hover, a.text-dark:focus {
  color: #121416 !important;
}

.text-body {
  color: #212529 !important;
}

.text-muted {
  color: #6c757d !important;
}

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

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

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-break {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.text-reset {
  color: inherit !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

@media print {
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  a:not(.btn) {
    text-decoration: underline;
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  @page {
    size: a3;
  }
  body {
    min-width: 992px !important;
  }
  .container {
    min-width: 992px !important;
  }
  .navbar {
    display: none;
  }
  .badge {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #dee2e6 !important;
  }
  .table-dark {
    color: inherit;
  }
  .table-dark th,
  .table-dark td,
  .table-dark thead th,
  .table-dark tbody + tbody {
    border-color: #dee2e6;
  }
  .table .thead-dark th {
    color: inherit;
    border-color: #dee2e6;
  }
}
/*# sourceMappingURL=bootstrap.css.map */

/* lib/3_bootstrap_checkbox/checkbox.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         e_led_frontend
	@file           /bootstrap_checbox/checkbox.css
**************************************************************************************************/

.tg-list {
	text-align: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.tg-list-item {
	margin: 0 2em;
}

h2 {
	color: #777;
}

h4 {
	color: #999;
}

.tgl {
	display: none;
}

.tgl,
.tgl:after,
.tgl:before,
.tgl *,
.tgl *:after,
.tgl *:before,
.tgl+.tgl-btn {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.tgl::-moz-selection,
.tgl:after::-moz-selection,
.tgl:before::-moz-selection,
.tgl *::-moz-selection,
.tgl *:after::-moz-selection,
.tgl *:before::-moz-selection,
.tgl+.tgl-btn::-moz-selection {
	background: none;
}

.tgl::selection,
.tgl:after::selection,
.tgl:before::selection,
.tgl *::selection,
.tgl *:after::selection,
.tgl *:before::selection,
.tgl+.tgl-btn::selection {
	background: none;
}

.tgl+.tgl-btn {
	outline: 0;
	/* display: block; */
	display: inline-flex;
	width: 4em;
	height: 2em;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tgl+.tgl-btn:after,
.tgl+.tgl-btn:before {
	position: relative;
	display: block;
	content: "";
	width: 50%;
	height: 100%;
}

.tgl+.tgl-btn:after {
	left: 0;
}

.tgl+.tgl-btn:before {
	display: none;
}

.tgl:checked+.tgl-btn:after {
	left: 50%;
}

.tgl-light+.tgl-btn {
	background: #f0f0f0;
	border-radius: 2em;
	padding: 2px;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
}

.tgl-light+.tgl-btn:after {
	border-radius: 50%;
	background: #fff;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
}

.tgl-light:checked+.tgl-btn {
	background: #9FD6AE;
}

.tgl-ios+.tgl-btn {
	background: #fbfbfb;
	border-radius: 2em !important;
	padding: 2px;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
	border: 1px solid #e8eae9;
}

.tgl-ios+.tgl-btn:after {
	border-radius: 2em !important;
	background: #fbfbfb;
	-webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
	transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.tgl-ios+.tgl-btn:active {
	box-shadow: inset 0 0 0 2em #e8eae9;
}

.tgl-ios+.tgl-btn:active:after {
	padding-right: .8em;
}

.tgl-ios:checked+.tgl-btn {
	background: #86d993;
}

.tgl-ios:checked+.tgl-btn:active {
	box-shadow: none;
}

.tgl-ios:checked+.tgl-btn:active:after {
	margin-left: -.8em;
}

.tgl-skewed+.tgl-btn {
	overflow: hidden;
	-webkit-transform: skew(-10deg);
	-ms-transform: skew(-10deg);
	transform: skew(-10deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	font-family: sans-serif;
	background: #888;
}

.tgl-skewed+.tgl-btn:after,
.tgl-skewed+.tgl-btn:before {
	-webkit-transform: skew(10deg);
	-ms-transform: skew(10deg);
	transform: skew(10deg);
	display: inline-block;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	width: 100%;
	text-align: center;
	position: absolute;
	line-height: 2em;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.tgl-skewed+.tgl-btn:after {
	left: 100%;
	content: attr(data-tg-on);
}

.tgl-skewed+.tgl-btn:before {
	left: 0;
	content: attr(data-tg-off);
}

.tgl-skewed+.tgl-btn:active {
	background: #888;
}

.tgl-skewed+.tgl-btn:active:before {
	left: -10%;
}

.tgl-skewed:checked+.tgl-btn {
	background: #86d993;
}

.tgl-skewed:checked+.tgl-btn:before {
	left: -100%;
}

.tgl-skewed:checked+.tgl-btn:after {
	left: 0;
}

.tgl-skewed:checked+.tgl-btn:active:after {
	left: 10%;
}

.tgl-flat+.tgl-btn {
	padding: 2px;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	background: none;
	border: 4px solid #090909;
	border-radius: 2em !important;
	margin: 0;
}

.tgl-flat+.tgl-btn:after {
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	background: #090909;
	content: "";
	border-radius: 1em;
}

.tgl-flat:checked+.tgl-btn {
	border: 4px solid #FFF;
}


.tgl-flat:checked+.tgl-btn:after {
	left: 50%;
	background: #FFF;
}

/* Disabled */
.tgl-flat:disabled+.tgl-btn {
	border-color: #848484 !important;
	cursor: default;
}
.tgl-flat:disabled+.tgl-btn:after {
	background: #848484 !important;
	cursor: default;
}


.tgl-flip+.tgl-btn {
	padding: 2px;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	font-family: sans-serif;
	-webkit-perspective: 100px;
	perspective: 100px;
}

.tgl-flip+.tgl-btn:after,
.tgl-flip+.tgl-btn:before {
	display: inline-block;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
	width: 100%;
	text-align: center;
	position: absolute;
	line-height: 2em;
	font-weight: bold;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 4px;
}

.tgl-flip+.tgl-btn:after {
	content: attr(data-tg-on);
	background: #02C66F;
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.tgl-flip+.tgl-btn:before {
	background: #FF3A19;
	content: attr(data-tg-off);
}

.tgl-flip+.tgl-btn:active:before {
	-webkit-transform: rotateY(-20deg);
	transform: rotateY(-20deg);
}

.tgl-flip:checked+.tgl-btn:before {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.tgl-flip:checked+.tgl-btn:after {
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
	left: 0;
	background: #7FC6A6;
}

.tgl-flip:checked+.tgl-btn:active:after {
	-webkit-transform: rotateY(20deg);
	transform: rotateY(20deg);
}

/* lib/bootstrap_table/bootstrap-table.css */
/**
 * @author zhixin wen <wenzhixin2010@gmail.com>
 * version: 1.22.0
 * https://github.com/wenzhixin/bootstrap-table/
 */
/* stylelint-disable annotation-no-unknown, max-line-length */
/* stylelint-enable annotation-no-unknown, max-line-length */
.bootstrap-table .fixed-table-toolbar::after {
  content: "";
  display: block;
  clear: both;
}

.bootstrap-table .fixed-table-toolbar .bs-bars,
.bootstrap-table .fixed-table-toolbar .search,
.bootstrap-table .fixed-table-toolbar .columns {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}

.bootstrap-table .fixed-table-toolbar .columns .btn-group > .btn-group {
  display: inline-block;
  margin-left: -1px !important;
}

.bootstrap-table .fixed-table-toolbar .columns .btn-group > .btn-group > .btn {
  border-radius: 0;
}

.bootstrap-table .fixed-table-toolbar .columns .btn-group > .btn-group:first-child > .btn {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.bootstrap-table .fixed-table-toolbar .columns .btn-group > .btn-group:last-child > .btn {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.bootstrap-table .fixed-table-toolbar .columns .dropdown-menu {
  text-align: left;
  max-height: 300px;
  overflow: auto;
  -ms-overflow-style: scrollbar;
  z-index: 1001;
}

.bootstrap-table .fixed-table-toolbar .columns label {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.4286;
}

.bootstrap-table .fixed-table-toolbar .columns-left {
  margin-right: 5px;
}

.bootstrap-table .fixed-table-toolbar .columns-right {
  margin-left: 5px;
}

.bootstrap-table .fixed-table-toolbar .pull-right .dropdown-menu {
  right: 0;
  left: auto;
}

.bootstrap-table .fixed-table-container {
  position: relative;
  clear: both;
}

.bootstrap-table .fixed-table-container .table {
  width: 100%;
  margin-bottom: 0 !important;
}

.bootstrap-table .fixed-table-container .table th,
.bootstrap-table .fixed-table-container .table td {
  vertical-align: middle;
  box-sizing: border-box;
}

.bootstrap-table .fixed-table-container .table thead th {
  vertical-align: bottom;
  padding: 0;
  margin: 0;
}

.bootstrap-table .fixed-table-container .table thead th:focus {
  outline: 0 solid transparent;
}

.bootstrap-table .fixed-table-container .table thead th.detail {
  width: 30px;
}

.bootstrap-table .fixed-table-container .table thead th .th-inner {
  padding: 0.75rem;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bootstrap-table .fixed-table-container .table thead th .sortable {
  cursor: pointer;
  background-position: right;
  background-repeat: no-repeat;
  padding-right: 30px !important;
}

.bootstrap-table .fixed-table-container .table thead th .sortable.sortable-center {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.bootstrap-table .fixed-table-container .table thead th .both {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC");
}

.bootstrap-table .fixed-table-container .table thead th .asc {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==");
}

.bootstrap-table .fixed-table-container .table thead th .desc {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII= ");
}

.bootstrap-table .fixed-table-container .table tbody tr.selected td {
  background-color: rgba(0, 0, 0, 0.075);
}

.bootstrap-table .fixed-table-container .table tbody tr.no-records-found td {
  text-align: center;
}

.bootstrap-table .fixed-table-container .table tbody tr .card-view {
  display: flex;
}

.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-title {
  font-weight: bold;
  display: inline-block;
  min-width: 30%;
  width: auto !important;
  text-align: left !important;
}

.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-value {
  width: 100% !important;
  text-align: left !important;
}

.bootstrap-table .fixed-table-container .table .bs-checkbox {
  text-align: center;
}

.bootstrap-table .fixed-table-container .table .bs-checkbox label {
  margin-bottom: 0;
}

.bootstrap-table .fixed-table-container .table .bs-checkbox label input[type="radio"],
.bootstrap-table .fixed-table-container .table .bs-checkbox label input[type="checkbox"] {
  margin: 0 auto !important;
}

.bootstrap-table .fixed-table-container .table.table-sm .th-inner {
  padding: 0.3rem;
}

.bootstrap-table .fixed-table-container.fixed-height:not(.has-footer) {
  border-bottom: 1px solid #dee2e6;
}

.bootstrap-table .fixed-table-container.fixed-height.has-card-view {
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}

.bootstrap-table .fixed-table-container.fixed-height .fixed-table-border {
  border-left: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6;
}

.bootstrap-table .fixed-table-container.fixed-height .table thead th {
  border-bottom: 1px solid #dee2e6;
}

.bootstrap-table .fixed-table-container.fixed-height .table-dark thead th {
  border-bottom: 1px solid #32383e;
}

.bootstrap-table .fixed-table-container .fixed-table-header {
  overflow: hidden;
}

.bootstrap-table .fixed-table-container .fixed-table-body {
  overflow-x: auto;
  overflow-y: auto;
  height: 100%;
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading {
  align-items: center;
  background: #fff;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  z-index: 1000;
  transition: visibility 0s, opacity 0.15s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.open {
  visibility: visible;
  opacity: 1;
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap {
  align-items: baseline;
  display: flex;
  justify-content: center;
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .loading-text {
  margin-right: 6px;
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap {
  align-items: center;
  display: flex;
  justify-content: center;
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-dot,
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap::after,
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap::before {
  content: "";
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: loading;
  background: #212529;
  border-radius: 50%;
  display: block;
  height: 5px;
  margin: 0 4px;
  opacity: 0;
  width: 5px;
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-dot {
  animation-delay: 0.3s;
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap::after {
  animation-delay: 0.6s;
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table-dark {
  background: #212529;
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table-dark .animation-dot,
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table-dark .animation-wrap::after,
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table-dark .animation-wrap::before {
  background: #fff;
}

.bootstrap-table .fixed-table-container .fixed-table-footer {
  overflow: hidden;
}

.bootstrap-table .fixed-table-pagination::after {
  content: "";
  display: block;
  clear: both;
}

.bootstrap-table .fixed-table-pagination > .pagination-detail,
.bootstrap-table .fixed-table-pagination > .pagination {
  margin-top: 10px;
  margin-bottom: 10px;
}

.bootstrap-table .fixed-table-pagination > .pagination-detail .pagination-info {
  line-height: 34px;
  margin-right: 5px;
}

.bootstrap-table .fixed-table-pagination > .pagination-detail .page-list {
  display: inline-block;
}

.bootstrap-table .fixed-table-pagination > .pagination-detail .page-list .btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.bootstrap-table .fixed-table-pagination > .pagination-detail .page-list .btn-group .dropdown-menu {
  margin-bottom: 0;
}

.bootstrap-table .fixed-table-pagination > .pagination ul.pagination {
  margin: 0;
}

.bootstrap-table .fixed-table-pagination > .pagination ul.pagination li.page-intermediate a {
  color: #c8c8c8;
}

.bootstrap-table .fixed-table-pagination > .pagination ul.pagination li.page-intermediate a::before {
  content: "\2B05";
}

.bootstrap-table .fixed-table-pagination > .pagination ul.pagination li.page-intermediate a::after {
  content: "\27A1";
}

.bootstrap-table .fixed-table-pagination > .pagination ul.pagination li.disabled a {
  pointer-events: none;
  cursor: default;
}

.bootstrap-table.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100% !important;
  background: #fff;
  height: calc(100vh);
  overflow-y: scroll;
}

.bootstrap-table.bootstrap4 .pagination-lg .page-link, .bootstrap-table.bootstrap5 .pagination-lg .page-link {
  padding: 0.5rem 1rem;
}

.bootstrap-table.bootstrap5 .float-left {
  float: left;
}

.bootstrap-table.bootstrap5 .float-right {
  float: right;
}

/* calculate scrollbar width */
div.fixed-table-scroll-inner {
  width: 100%;
  height: 200px;
}

div.fixed-table-scroll-outer {
  top: 0;
  left: 0;
  visibility: hidden;
  width: 200px;
  height: 150px;
  overflow: hidden;
}

@keyframes loading {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/* lib/hommie_big_data_chart/css/XY-cursors.css */







#XY-legend {
    position: absolute;
    top: 20px;
    left: 80px;
    font-size: 13px;
    padding: 4px;
    border: solid 1px #414141;
    z-index: 100;
}

#XY-legend div {
    padding: 5px;
}

.CoordXY {
    display: none;
    z-index: 10000;
    padding: 5px;
    position: absolute;
    font-size: 100%;
    overflow: hidden;
    height: 35px;
    vertical-align: middle;
    line-height: 27px;
    color: white;
    background: red;
}

#CordX {
    bottom: 24px;
    margin-left: -75px;
    white-space: nowrap;
    width: 150px;
    text-align: center;
}

#CordY {
    left:0;
    margin-top: -13.5px;
    width: 57px;
    text-align: right;
}

#CordY2 {
    right: 0;
    margin-top: -13.5px;
    width: 62px;
    text-align: left;
}

.line {
    z-index: 10;
    display: none;
    position: absolute;
    pointer-events: none;
    background-color: red;
}

#cursor-coord-x.xline {
    width                       : 1px;
    height: 100%;
}

#cursor-coord-y.yline {
    width                       : 100%;
    height                      : 1px;
}

/* lib/hommie_big_data_chart/css/legend.css */




/**
 * Default styles for the dygraphs charting library.
 */

 .dygraph-legend {
    position: absolute;
    font-size: 10px;
    z-index: 100;
    width: 290px;  /* labelsDivWidth */
    /*
    dygraphs determines these based on the presence of chart labels.
    It might make more sense to create a wrapper div around the chart proper.
    top: 0px;
    right: 2px;
    */
    /* background: white; */
    line-height: normal;
    text-align: left;
    overflow: hidden;

    cursor: default;

    background: rgba(0, 0, 0, 0.7);


    color: #FFF;
    border: solid 1px #414141;
    padding: 1px;
    /* background-color: transparent !important;
    font-weight: bold; */

    /* margin-right: -300px; */
    /* right: -290px !important; */
    /* top: 30px !important;
    left: 80px; */
  }
  
  .dygraph-legend table tr {
    cursor: pointer;
  }


/* LEGENDA DYGRAPH */
.chart-legend-title {
    text-align: center;
    width: 100%;
    height: 20px;
    display: table;
    position: relative;
    padding: 1px;
}

.dygraph-legend > span.highlight { border: 1px solid grey; }

/* .many .dygraph-legend > span { display: none; } */

/* .many .dygraph-legend > span.highlight { display: inline; } */


.dygraph-legend .table th, .table td {
  padding: 1px;
}

/* lib/hommie_big_data_chart/css/main.css */
/* STYLE WYKRESU */
#contentChart {
    /* position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    
     */
    display: none;
}

#WrapperChart {
    /* position: relative;
    display: inline-block;
    width: 100%;
    height:inherit; */
}

#chartdiv {



    /* position: relative;
     */
    /* padding-top: 20px !important; */
}


/* #chartdiv { */
    /* position: relative; */
    /* border-top: 1px solid; */
    /* width: 100%; */
    /* height: 100%; */
    /* padding-top: 19px; */
    /* height: calc(100% - 20px);
    height: -o-calc(100% - 20px);
    height: -webkit-calc(100% - 20px);
    height: -moz-calc(100% - 20px); */
/* } */




#chartdiv .dygraph-axis-label {
    font-size: 85%;
}


/* ZAKRES OD, DO - STOPKA NA DOLE WYKRESU */
#W-zakresOD {
    border-left-width   : 2px;
    padding-left        : 5px;
}

#W-zakresDO {
    border-right-width  :2px;
    padding-right       :5px;
}

#W-zakresOD,
#W-zakresDO {
    position            : absolute;
    font-size           : 100%;
    height              : 34px;
    bottom              : 3px;
    line-height         : 54px;
    border-style        : dotted;
    cursor              : pointer;
}

#W-zakresOD span,
#W-zakresDO span {
    /* position            : relative;
    display             : inline-block;
    white-space         : nowrap;
    width               : auto; */
}


















/* 
.variable_trend_chart {
    padding-top: 50px;
    height: 100%;
    width: 100%;
}

.variable_trend_chart div:first-child {
    height: 100%;
    width: 100%;
}


.variable_trend_chart .dygraph-legend {
    color: #000;
    border: solid 1px #414141;
} */







































.min-max-chart-label {
    cursor: pointer;
    text-align: center;
}

/* PRAWY I LEWY TOOLBAR WYKRESU */
.ChartToolbar>.chartToolLeft img,
.ChartToolbar>.chartToolRight i {
    margin-right: 5px;
}

.ChartToolbar>.chartToolRight i {
    /* margin: 0 13px 0 0; */
    
}

.ChartToolbar>.chartToolLeft img {
    margin: 0 0 0 13px;
}

.ChartToolbar>.chartPeriodSelector img {
    vertical-align: middle;
    height: 50px;
}

#PeriodTime {
    position: absolute;
    top: 1px;
    left: 0;
    cursor: default;
    font-size: 17px;
    width: 100%;
    text-align: center;
}






















































.paginate-left {
    transform: rotate(-90deg);
}

.paginate-left:hover {
    transform: rotate(-90deg) scale(1.25);
}

.paginate-right {
    transform: rotate(90deg);
}

.paginate-right:hover {
    transform: rotate(90deg) scale(1.25);
}

.paginate-down {
    transform: rotate(180deg);
}

.btn-chart {
    margin: 2px;
    height: 30px;
    cursor: pointer;
    line-height: 30px;
}

.parametr-lista {
    line-height: 30px;
}

.parametr-lista i {
    line-height: 15px;
    vertical-align: middle;
    font-size: 15px;
    cursor: default;
    margin-left: 10px;
}

.parametr-lista input {
    line-height: 15px;
    vertical-align: middle;
    /* margin-left: 10px !important; */
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.color-parametr-list {
    display: inline-block;
    vertical-align: middle;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    overflow: visible;
    position: absolute;
    width: 110px; 
    /* 80px */
    left: -76px;
    margin-top: 25px;
    z-index: 10000000;
}

.dropdown-content a {
    padding: 5px 16px 5px 16px!important;
    text-decoration: none;
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}

.show {
    display: block;
}

/* USTAWIENIA WYKRESU */
.LoadingDBSpinner .spinner {
    opacity: 1;
    border-width: 3px;
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px;
    left: 0;
    top: 0;
    margin-left: 5px;
    margin-top: 0px;
    vertical-align: middle;
}

#ChartKolorALL {
    font-size: 17px;
    color: #fff;
    margin: 0;
    text-align: center;
    line-height: 28px;
}

/* ANIMACJE ŁADOWANIA */
#loading {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -100px;
}

#mini-loading {
    position: absolute;
    right: 0px;
    bottom: 0px;
    display: none;
    width: 100px;
    height: 150px;
}






























#W-zakresOD,
#W-zakresDO {
    opacity: 0.6;
}

#PeriodTime {
    color: #FFF;
}

#W-Xcon a.active {
    background-color: #2193f3;
    color: #FFF;
}



.btn-chart {
    background-color: #262625;
    color: #FFF;
}

.btn-chart:hover {
    background-color: #356B35;
}

.btn-chart.active {
    background-color: #5bb75b;
}


































  /* styles for a solid line in the legend */
  .dygraph-legend-line {
    display: inline-block;
    position: relative;
    bottom: .5ex;
    padding-left: 1em;
    height: 1px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    /* border-bottom-color is set based on the series color */
  }
  
  /* styles for a dashed line in the legend, e.g. when strokePattern is set */
  .dygraph-legend-dash {
    display: inline-block;
    position: relative;
    bottom: .5ex;
    height: 1px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    /* border-bottom-color is set based on the series color */
    /* margin-right is set based on the stroke pattern */
    /* padding-left is set based on the stroke pattern */
  }
  
  .dygraph-roller {
    position: absolute;
    z-index: 10;
    /* display: block!important; */
  }
  
  /* LABEL Z NAZWĄ WYKRESU PO ZATRZYMANIU KURSORA NA Xms */
  .desc_series {
    position        : absolute;
    /* color           : black; */
    /* border          : solid 1px #000; */
    font-size       : 18px;
    padding         : 5px;
    white-space     : nowrap;
  }
  
  .back_from_chart {
    position: absolute;
    /* color: white; */
    /* background: rgba(255, 255, 255, 0.2); */
    top: 85px;
    left: 80px;
    font-size: 24px;
    border: solid 1px #414141;
    padding: 4px;
  }

  .back_from_chart div {
    padding: 5px;

  }

  .back_from_chart:hover {
    background: rgba(255, 255, 255, 0.5); 
  }

  .back_from_chart img {
    vertical-align: text-top;
    margin-left: -5px;
  }

  /* This class is shared by all annotations, including those with icons */
  .dygraph-annotation {
    position: absolute;
    z-index: 10;
    overflow: hidden;
  }
  
  .annotation-on-off-chart {
      font-size: 20px!important;
      vertical-align: middle!important;
      line-height: 25px!important;
  }
  
  /* This class only applies to annotations without icons */
  /* Old class name: .dygraphDefaultAnnotation */
  .dygraph-default-annotation {
    border: 1px solid black;
    background-color: white;
    text-align: center;
  }
  
  .dygraph-axis-label {
    /* position: absolute; */
    /* font-size: 14px; */
    z-index: 10;
    line-height: normal;
    overflow: hidden;
    /* color: #444;  /* replaces old axisLabelColor option */
  }
  
  .dygraph-axis-label-x {
  }
  
  .dygraph-axis-label-y {
  }
  
  .dygraph-axis-label-y2 {
  }
  
  .dygraph-title {
    font-weight: bold;
    z-index: 10;
    text-align: center;
    /* font-size: based on titleHeight option */
  }
  
  .dygraph-xlabel {
    text-align: center;
    /* font-size: based on xLabelHeight option */
  }
  






















  .form-group .control-label {
    padding-left: 0;
    padding-right: 0;
  }
  
  .form-group .U-SET {
    padding-left: 10px;
    padding-right: 0;
  }

  /* .form-group select.U-SET {
    padding-left: 3px;
    margin-left: 10px;
  } */

  


















  #drawing_chart {
    position: absolute;
    width: 100%;
    height: calc(100% - 73px);
    top: 50px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
}

/* lib/hommie_big_data_chart/css/measuring-cursors.css */
/********************************************************************************************************************
*************************************** W E B   M O D U L - W E B   S E R W I S *************************************
 @license       https://etia.pl
 @copyright     © Copyright 2018
 @author        Rafał Złotorzyński (r.zlotorzynski@etia.pl)
 @module        wm3_www
 @file          charts/chart-measuring-cursors.css
 @fileoverview  Kursory pomiarowe - style
********************************************************************************************************************/

/* KURSORY POMIAROWE A-B */
.measuring-cursors {
    position                    : absolute;
    z-index                     : 1000;
}

.measuring-cursors.y-line {
    width                       : 100%;
    height                      : 1px;
    background                  : red;
}

.measuring-cursors.x-line {
    width                       : 1px;
    background                  : red;
}

/* MASKOWANIE ZAWARTOŚCI W CELU POPRAWNEGO DZIAŁANIA EVENTU */
.mask-area-to-event {
    position                    : absolute;
    display                     : inline-block;
    background                  : red;
    opacity                     : 0.1;
    z-index                     : 10000;
    overflow                    : hidden;
}

/* STRZAŁKI KURSORÓW */
.measuring-cursors .handler {
    position                    : absolute;
    display                     : inline-block;
    text-align                  : center;
    background                  : red;
    color                       : white;
    vertical-align              : middle;
    font-weight                 : bold;
    font-size                   : 120%;
    cursor                      : pointer;
}

/* LEWA - STRZAŁKA */
.measuring-cursors.y-line div.handler:nth-of-type(1) {
    right                       : 0;
    height                      : 30px;
    line-height                 : 30px;
    width                       : 62px;
    border-radius               : 50% 0 0 50%;
    padding-left                : 15px;
    margin-top                  : -15px;
}

/* PRAWA - STRZAŁKA */
.measuring-cursors.y-line div.handler:nth-of-type(2) {
    left                        : 0;
    height                      : 30px;
    line-height                 : 30px;
    width                       : 57px;
    border-radius               : 0 50% 50% 0;
    padding-right               : 15px;
    margin-top                  : -15px;
}

/* GÓRA - STRZAŁKA */
.measuring-cursors.x-line .handler:nth-of-type(1) {
    top                         : 0;
    height                      : 62px;
    line-height                 : 62px;
    width                       : 30px;
    border-radius               : 0 0 50% 50%;
    margin-left                 : -15px;
}

/* DÓŁ - STRZAŁKA */
.measuring-cursors.x-line .handler:nth-of-type(2) {
    bottom                      : 0;
    height                      : 62px;
    line-height                 : 62px;
    width                       : 30px;
    border-radius               : 50% 50% 0 0;
    margin-left                 : -15px;
}








.measuring-cursors .cursor-A-y1,
.measuring-cursors .cursor-B-y1,
.measuring-cursors .cursor-A-y2,
.measuring-cursors .cursor-B-y2 {
    background: red;
    position: absolute;
    display: inline-block;
    color: white;
    height: 30px;
    vertical-align: middle;
    line-height: 31px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 110%;
    white-space: nowrap;
}


.measuring-cursors .cursor-A-y1 {
    left: 56px;
}

.measuring-cursors .cursor-B-y1 {
    left: 56px;
}

.measuring-cursors .cursor-A-y2 {
    right: 61px;
    text-align: right;
}

.measuring-cursors .cursor-B-y2 {
    right: 61px;
    text-align: right;
}







.measuring-cursors .cursor-A-x1 {
    background: red;
    position: absolute;
    display: inline-block;
    color: white;
    height: 30px;
    vertical-align: middle;
    line-height: 31px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 110%;
    bottom: 0;
    white-space: nowrap;
    margin-left: 15px;
}

/* lib/hommie_big_data_chart/css/settings.css */
#tabss .form-group .tgl-btn {
    margin-left: 10px;
  }






  #tabss .tab .select_axis {
    width: 60px;
    position: relative;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}



#tabss .form-horizontal {
    padding: 0;
}

#tabss .tab-content {
    padding: 0;
}

#tabss .tab-content:not(#tabb-1) {
    /* padding: 3px; */
}

#tabss .tabs-menu li.current {
    color: #131313!important;
    background: #D21F26!important;
}


select.compare-osc.compare-osc-object {
    margin: 10px 0;
}

/* table.oscylograms-list {

}

table.oscylograms-list thead {
    background: rgba( 210, 31, 38 , .6 );
}

table.oscylograms-list thead th {
    padding: 3px 5px;
}

table.oscylograms-list tbody {
    color: #131313;
}

table.oscylograms-list tbody th {
    padding: 3px 5px;
}

table.oscylograms-list .parameter-compare-name,
table.oscylograms-list .parameter-main-name {
    text-align: left;
}

table.oscylograms-list .parameter-compare-unit,
table.oscylograms-list .parameter-main-unit {
    text-align: left;
}

table.oscylograms-list tbody td {
    padding: 7px;
}

table.oscylograms-list tbody tr:nth-child(odd) {
    background: #f6f8fd;
}

table.oscylograms-list tbody tr:nth-child(even) {
    background: rgba( 210, 31, 38, 0.122);
}


.color-parametr-list {
    margin: 0 !important;
} */

/* lib/hommie_big_data_chart/css/statistic.css */
/********************************************************************************************************************
*************************************** W E B   M O D U L - W E B   S E R W I S *************************************
 @license       https://etia.pl
 @copyright     © Copyright 2018
 @author        Rafał Złotorzyński (r.zlotorzynski@etia.pl)
 @module        wm3_www
 @file          charts/chart-statistic.css
 @fileoverview  Prezentacja statystyk - style
********************************************************************************************************************/

.trend_desc_on_line {
    position        :absolute;
    display:inline-block;
    color: black;
    left: 80px;
    bottom: 80px;
    padding: 10px;
    font-size: 18px;
    height: auto;
}

.trend_desc_right {
    position        :absolute;
    display:inline-block;
    height:30px;
    font-size: 14px;
}

.trend_desc_right span:first-child {
    position: absolute;
    text-align: center;
    display: inline-block;
    font-weight: bold;

    top: -10px;
    right: 104px;
    padding: 2px;
    min-width: 29px;
}

.trend_desc_right span:first-child i {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    line-height: 14px;
    margin-left: 5px;
    font-weight: bolder;
}

.trend_desc_right span:nth-of-type(2) {
    position: absolute;
    text-align: center;
    display: inline-block;

    top: -7px;
}

.trend_desc_right span:nth-of-type(3) {
    position: absolute;
    margin-top: 10px;
}


.statistic_parametr {
    position: absolute;
    bottom: 26px;
    width: 100%;
    text-align: center;
}

.statistic_parametr i {
    margin-left: 10px;
}

.statistic_parametr i b {
    font-size:70%;
    padding-top:7px;
    vertical-align:sub;
}

.statistic_parametr value {
    font-weight: bold;
}

.statistic_parametr i:first-child {
    margin-left: 0 !important;
}

/* lib/hommie_big_data_chart/css/toolbar.css */





.ChartToolbar {
    height: 50px;
    border-bottom: solid 1px rgba(255, 255, 255, 0.4);
}

.chartToolLeft {
    /* position: relative; */
}

.chartPeriodSelector {
    /* position: relative;
    display: inline-block; */
    min-width: 200px;
}

.chartToolRight {
    text-align: right;
    /* line-height: 50px; */
}

.chartToolRight i {
    font-size: 35px;
    /* vertical-align: middle; */
}

.CenterToolbar {
    /* min-width: calc(50% - 70px);
    min-width: -o-calc(50% - 70px);
    min-width: -webkit-calc(50% - 70px);
    min-width: -moz-calc(50% - 70px);

    line-height: 50px; */
}

/* lib/hommie_big_data_chart/css/upload_file.css */




.get_chart_file {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
}

.get_chart_file form {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.get_chart_file form fieldset {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.get_chart_file form fieldset div:first-of-type {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

#filedrag {
    position: relative;
    display: none;
    font-weight: bold;
    text-align: center;
    padding: 15px;
    /* border: 2px dashed #555;
    border-radius: 7px; */
    cursor: default;
    /* max-width: 1000px; */
    height: 100%;
    width: 100%;
    margin: auto;
    position: relative;
    z-index: 100;
}

#filedrag i {
    width: 100%;
    top: 50%;
    position: relative;
    height: 30px;
    vertical-align: middle;
    margin-top: -15px;
    font-size: xx-large;
    font-weight: lighter;
    color: #555555;
}

#filedrag.hover {
	/* color: #f00; */
	/* border-color: #f00; */
	/* border-style: solid;
    box-shadow: inset 0 3px 4px #888; */
    

    background-color: rgba(210, 31, 38 , .4 );
}



/* lib/hommie_loading/loading.css */
.custom-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(17, 17, 17, 1.0);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.custom-loader {
  width: 100px;
  height: 100px;
  background-image: url('../img/main_logo_full.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Opcjonalnie: Dodaj animację obracania */
  animation: custom-spin 2s linear infinite;
}

@keyframes custom-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.custom-loading-message {
  margin-top: 20px;
  font-size: 18px;
  color: #FFFFFF;
}

.custom-loading-progress {
  margin-top: 10px;
  font-size: 16px;
  color: #FFFFFF;
}

/* lib/hommie_sliders/hommie_range_selector.css */




/* Styl dla elementów z klasą .hommie_range_selector */

.hommie_range_selector {
    -webkit-appearance: none; /* Wyłącza domyślny wygląd przeglądarki */
    appearance: none;
    width: 100%; /* Ustawia szerokość suwaka */
    height: 10px; /* Wysokość toru suwaka */
    background: linear-gradient(to right, green, yellow, red, #490464);
    border-radius: 5px; /* Zaokrągla krawędzie toru */
    outline: none; /* Usuwa obramowanie po kliknięciu */

    margin-top: 10px;
    margin-bottom: 10px;
}

/* Styl toru suwaka dla przeglądarek WebKit */
.hommie_range_selector::-webkit-slider-runnable-track {
    background: linear-gradient(to right, green, yellow, red, #490464);
    height: 10px;
    border-radius: 5px;
}

/* Styl toru suwaka dla Firefox */
.hommie_range_selector::-moz-range-track {
    background: linear-gradient(to right, green, yellow, red, #490464);
    height: 10px;
    border-radius: 5px;
}

/* Styl toru suwaka dla IE i Edge */
.hommie_range_selector::-ms-track {
    background: transparent;
    height: 10px;
    border-radius: 5px;
    border-color: transparent;
    color: transparent;
}

.hommie_range_selector::-ms-fill-lower {
    background: linear-gradient(to right, green, yellow, red, #490464);
    border-radius: 5px;
}

.hommie_range_selector::-ms-fill-upper {
    background: linear-gradient(to right, green, yellow, red, #490464);
    border-radius: 5px;
}

/* Styl suwaka (thumb) dla przeglądarek WebKit */
.hommie_range_selector::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: white;
    height: 30px; /* Wysokość suwaka */
    width: 30px;  /* Szerokość suwaka */
    margin-top: -10px; /* Pozycjonuje suwak, aby wystawał poza tor */
    border-radius: 50%; /* Ustawia suwak jako okrąg */
}

/* Styl suwaka (thumb) dla Firefox */
.hommie_range_selector::-moz-range-thumb {
    background: white;
    height: 30px;
    width: 30px;
    border: none;
    border-radius: 50%;
}

/* Styl suwaka (thumb) dla IE i Edge */
.hommie_range_selector::-ms-thumb {
    background: white;
    height: 30px;
    width: 30px;
    border: none;
    border-radius: 50%;
}

/* lib/hommie_sliders/hommie_sliders.css */
.range-slider {
	display: inline-block;
	width: 40px;
	position: relative;
	text-align: center;
	height: 300px;
	max-height: 100%;
	font-size: 21px;
}

.range-slider:before {
	display: none;
	position: absolute;
	top: -2em;
	left: .5em;
	content: attr(data-slider-value) "%";
	color: white;
	font-size: 90%;
}

.range-slider__thumb {
	position: absolute;
	left: 5px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	background: white;
	color: #777;
	font-size: 50%;
	box-shadow: 0 0 0 4px #3D3D4A;
	border-radius: 50%;
	pointer-events: none;
}

.range-slider__bar {
	left: 16px;
	bottom: 0;
	position: absolute;
	background: linear-gradient(dodgerblue, blue);
	pointer-events: none;
	width: 8px;
	border-radius: 10px;
}

.range-slider input[type=range][orient=vertical] {
	position: relative;
	margin: 0;
	height: 100%;
	width: 100%;
	display: inline-block;
	position: relative;
	writing-mode: bt-lr;
	-webkit-appearance: slider-vertical;
}

.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track,
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
	-webkit-appearance: none;
}

.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
	border: none;
	background: #343440;
	width: 8px;
	border-color: #343440;
	border-radius: 10px;
	box-shadow: 0 0 0 2px #3D3D4A;
}

.range-slider input[type=range][orient=vertical]::-moz-range-track {
	border: none;
	background: #343440;
	width: 8px;
	border-color: #343440;
	border-radius: 10px;
	box-shadow: 0 0 0 2px #3D3D4A;
}

.range-slider input[type=range][orient=vertical]::-ms-track {
	border: none;
	background: #343440;
	width: 8px;
	border-color: #343440;
	border-radius: 10px;
	box-shadow: 0 0 0 2px #3D3D4A;
	color: transparent;
	height: 100%;
}

.range-slider input[type=range][orient=vertical]::-ms-fill-lower,
.range-slider input[type=range][orient=vertical]::-ms-fill-upper,
.range-slider input[type=range][orient=vertical]::-ms-tooltip {
	display: none;
}

.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
	width: 30px;
	height: 30px;
	opacity: 0;
}

.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
	width: 30px;
	height: 30px;
	opacity: 0;
}

.range-slider input[type=range][orient=vertical]::-ms-thumb {
	width: 30px;
	height: 30px;
	opacity: 0;
}

.theme1 {
	background: linear-gradient(rgb(255, 255, 255), rgb(31, 31, 31));
}

.theme2 {
	background: linear-gradient( red , white );
}

.theme3 {
	background: linear-gradient(yellow, orange);
}

/* lib/hommie_widgets/widget-compass.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           widget-compass.css
**************************************************************************************************/

#compass {
		position: relative;
		width: 100px;
		height: 100px;
		margin: 30px;
	}
	
	#bezel {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border: 3px solid #eee;
		border-radius: 50%;
	}
	
	#axis {
		position: absolute;
		left: 44px;
		top: 44px;
		width: 5px;
		height: 5px;
		background: #fff;
		border: 3px solid #666;
		border-radius: 50%;
	}
	
	#needle {
		position: absolute;
		left: 48px;
		width: 2px;
		height: 80px;
		top: 8px;
		-webkit-animation: spin 2s ease infinite;
		-moz-animation: spin 2s ease infinite;
		animation: spin 2s ease infinite;
	}
	
	#needle:after {
		content: '';
		position: absolute;
		top: 0;
		left: -1px;
		width: 0;
		height: 0;
		border: 2px solid transparent;
		border-bottom: 40px solid #FF3600;
	}
	
	#needle:before {
		content: '';
		position: absolute;
		top: 40px;
		left: -1px;
		width: 0;
		height: 0;
		border: 2px solid transparent;
		border-top: 40px solid #666;
	}
	
	#N {
		position: absolute;
		top: 5px;
		left: 39px;
		color: #FF3600;
	}
	
	#E {
		position: absolute;
		right: 5px;
		top: 39px;
	}
	
	#S {
		position: absolute;
		bottom: 5px;
		left: 39px;
	}
	
	#W {
		position: absolute;
		left: 5px;
		top: 39px;
	}
	
	.dir {
		font-family: arial, sans-serif;
		color: #FFFFFF;
		font-size: 10px;
		background: #222;
		padding: 5px;
	}
	
	.quad {
		display: block;
		width: 1px;
		background: #575757;
		height: 80px;
		position: absolute;
		top: 8px;
		left: 48px;
	}
	
	#NWSE {
		transform: rotate(45deg);
	}
	
	#NESW {
		transform: rotate(-45deg);
	}
	
	#WE {
		transform: rotate(90deg);
	}
	
	@-moz-keyframes spin {
		100% {
			-moz-transform: rotate(360deg);
		}
	}
	
	@-webkit-keyframes spin {
		100% {
			-webkit-transform: rotate(360deg);
		}
	}
	
	@keyframes spin {
		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}













































	.compass {
		width: 400px;
		height: 400px;
		/* background-color: #f3f3f3; */
		border-radius: 100%;
		/* background-image: -webkit-linear-gradient(top, #f7f7f7, #ececec); */
		position: relative;
		margin: 0 auto;
		scale: 0.25;
		transform-origin: 0 0;
	}
	
	.compass-inner {
		width: 340px;
		height: 340px;
		background-color: #3d3d3d;
		border-radius: 100%;
		position: relative;
		left: 27.5px;
		top: 27.5px;
		border: 3px solid #c5c5c5;
	}

	.main-arrow {
		height: 100%;
		width: 30px;
		left: 155px;
		position: relative;
		padding-top: 5px;
		box-sizing: border-box;
		/* transform: rotate(20deg); */
		/* animation: spin 2s alternate infinite;
		-ms-transform: rotate(20deg);
		-o-transform: rotate(20deg);
		-o-animation: spin 2s alternate infinite;
		-moz-transform: rotate(20deg);
		-moz-animation: spin 2s alternate infinite;
		-webkit-transform: rotate(20deg);
		-webkit-animation: spin 2s alternate infinite; */
	}
	
	.arrow-up {
		width: 0;
		height: 0;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-bottom: 165px solid #ef5052;
		position: relative;
	}
	
	.arrow-down {
		-webkit-transform: rotate(180deg); /* Safari and Chrome */
		width: 0;
		transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		height: 0;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-bottom: 165px solid #f3f3f3;
		position: relative;
	}
	
	.north {
		font-size: 36px;
		color: #fff;
		position: absolute;
		left: 155px;
		top: 10px;
	}
	
	.east {
		font-size: 36px;
		color: #fff;
		position: absolute;
		left: 290px;
		top: 150px;
	}
	
	.west {
		font-size: 36px;
		color: #fff;
		position: absolute;
		left: 20px;
		top: 150px;
	}
	
	.south {
		font-size: 36px;
		color: #fff;
		position: absolute;
		left: 155px;
		top: 280px;
	}
	
	.angle {
		position: absolute;
		font-size: 60px;
		bottom: 85px;
		width: 100%;
		text-align: center;
		padding-left: 20px;
	}
	/* @keyframes spin {
		0% {
			transform: scale(1) rotate(0deg);
		}
		50% {
			transform: scale(1) rotate(80deg);
		}
		100% {
			transform: scale(1) rotate(-180deg);
		}
	}
	
	@-o-keyframes spin {
		0% {
			-webkit-transform: scale(1) rotate(0deg);
		}
		50% {
			-webkit-transform: scale(1) rotate(80deg);
		}
		100% {
			-webkit-transform: scale(1) rotate(-180deg);
		}
	}
	
	@-moz-keyframes spin {
		0% {
			-webkit-transform: scale(1) rotate(0deg);
		}
		50% {
			-webkit-transform: scale(1) rotate(80deg);
		}
		100% {
			-webkit-transform: scale(1) rotate(-180deg);
		}
	}
	
	@-webkit-keyframes spin {
		0% {
			-webkit-transform: scale(1) rotate(0deg);
		}
		50% {
			-webkit-transform: scale(1) rotate(80deg);
		}
		100% {
			-webkit-transform: scale(1) rotate(-180deg);
		}
	} */
	
@media ( max-width: 600px ) {
	.compass {
		width: 200px;
		height: 200px;
		text-align: center;
	}

	.compass-inner {
		width: 170px;
		height: 170px;
		left: 13px;
		top: 13px;
	}

	.main-arrow {
		width: 30px;
		left: 78px;
		width: 15px;
		padding-top: 3px;
	}

	.arrow-up {
		border-bottom: 82.5px solid #ef5052;
		border-left: 7.5px solid transparent;
		border-right: 7.5px solid transparent;
	}

	.arrow-down {
		border-bottom: 82.5px solid #f3f3f3;
		border-left: 7.5px solid transparent;
		border-right: 7.5px solid transparent;
	}

	.north {
		left: 78px;
		top: 10px;
		font-size: 16px;
	}

	.south {
		font-size: 16px;
		left: 78px;
		top: 140px;
	}

	.east {
		font-size: 16px;
		top: 72.5px;
		left: 145px;
	}

	.west {
		font-size: 16px;
		left: 10px;
		top: 72.5px;
	}
}

/* lib/hommie_widgets/widget-statistic.css */





.widget-parameter-body-values {
    color: #b4bbc2 !important;
    cursor: default;
}

.widget-trend {
    font-size: 26px;
}

.widget-trend.trend-up {
    transform: rotate(45deg);
}

.widget-trend.trend-up::before {
    content: "\f30c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transform: rotate(45deg);
}

.widget-trend.trend-down {
    transform: rotate(-45deg);
}

.widget-trend.trend-down::before {
    content: "\f309";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.widget-trend.trend-not-change::before {
    content: "\f30b";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* lib/hommie_widgets/widget-table.css */


/* Widget as like table */
.widget-table-group {
    background-color: #212224;
    border-radius: 15px;
    border: 2px solid #33373b;
    overflow: hidden;
}

.widget-table {
    overflow: hidden;
    margin-bottom: 0;
}

.widget-table thead tr {
    background-color: #33373B;
}

/* lib/hommie_widgets/widget-tils.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           widget-tils.css
**************************************************************************************************/

/* Contener */
.marker-widget {
    background-color: #33373B;
    color: #b4bbc2;
    height: 120px;
    border-radius: 15px;
    cursor: default;
}

/* Events - hover */
.marker-widget:not( [disabled] ):hover {
    background-color: #2193f3;
    color: #ffffff !important;
    cursor: pointer;
}

/* Header */
.marker-widget .marker-widget-header {
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    padding: 10px 0px 0px 0px;
    margin: 0;
}

.marker-widget .marker-widget-header .fas {
    margin-right: 5px;
}

.marker-widget .marker-widget-value {
    font-size: 50px;
    line-height: 70px;
    text-align: center;
    padding: 0;
    margin: 0;
}

/* Footer */
.marker-widget .marker-widget-footer,
/* Error */
.marker-widget .marker-widget-error {
    font-size: 12px;
    padding: 0px 10px 0px 10px;
    margin: 0;
    font-weight: lighter;
}

.marker-widget .marker-widget-footer .marker-widget-trend {
    /* position: relative; */
    /* display: flex; */
    /* font-size: 15px; */
    /* align-items: start; */
    /* justify-content: left; */
    /* left: 2px; */
    margin-right: 3px;
}

.marker-widget .marker-widget-footer .marker-widget-trend.trend-up {
    /* transform: rotate(45deg); */
}

.marker-widget .marker-widget-footer .marker-widget-trend.trend-up::before {
    content: "\f30c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.marker-widget .marker-widget-footer .marker-widget-trend.trend-down {
    /* transform: rotate(-45deg); */
}

.marker-widget .marker-widget-footer .marker-widget-trend.trend-down::before {
    content: "\f309";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.marker-widget .marker-widget-footer .marker-widget-trend.trend-not-change::before {
    content: "\f30b";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    /* font-size: 8px;
    vertical-align: 3px; */
}

/* Avg */
.marker-widget .marker-widget-footer .marker-widget-avg {
    /* position: absolute;
    font-size: 11px;
    bottom: -1px;
    left: 23px; */
}

/* Unit */
.marker-widget .marker-widget-footer .marker-widget-unit {
    font-size: 14px;
}

/* Min. and max. */
.marker-widget .marker-widget-footer .marker-widget-min-max {

}

.marker-widget .marker-widget-footer .marker-widget-max {
    /* top: -5px; */
    font-size: 12px;
    /* height: 15px; */
    /* position: relative; */
    display: flex;
    justify-content: right;
    align-items: flex-end;

    /* text-align: center; */
    line-height: 12px;
}

/* .marker-widget .marker-widget-footer .marker-widget-single-value-value-max { */
    /* font-size: 11px; */
    /* font-weight: 500; */
    /* position: relative; */
    /* height: 18px; */
    /* display: flex;
    justify-content: left;
    align-items: center;
    text-align: left;
    margin-left: 3px;
    line-height: 11px; */
/* } */

.marker-widget .marker-widget-footer .marker-widget-min {
    /* top: -4px; */
    font-size: 12px;
    /* height: 10px; */
    /* position: relative; */
    display: flex;
    justify-content: right;
    align-items: flex-start;
    /* text-align: center; */
    /* line-height: 11px; */
    line-height: 12px;
}

/* .marker-widget .marker-widget-footer .marker-widget-single-value-value-min { */
    /* font-size: 11px; */
    /* font-weight: 500; */
    /* position: relative; */
    /* display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 3px;
    line-height: 11px; */
/* } */







/* .marker-widget-single-value-value {
    position: relative;
    display: flex;
    margin-left: 0px;
    margin-right: 0px;
    justify-content: center;
    align-items: center;
    text-align: center;
} */

/* .marker-widget-single-value-icon {
    left: 10px;
    font-size: 16px;
    position: absolute;
} */

/* .marker-widget-single-value-description {
    position: relative;
    font-size: 11px;
    justify-content: center;
    font-weight: 400;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
} */

/* .marker-widget-single-value-unit-under {
    position: relative;
    font-size: 11px;
    justify-content: center;
    text-align: center;
    align-items: center;
    vertical-align: middle;
    top: -4px;
    height: 18px;
    font-weight: 400;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
} */

/* .marker-widget-two-widgets-in-row {
    width: 350px;
    height: 100px;
    background-color: transparent;
    border-radius: 15px;
    color: #b4bbc2;
} */

/* .marker-widget-single-value-parameter-parent-two-widgets-in-row {
    max-width: 47.5%;
    height: 100%;
    background-color: #33373B;
    border-radius: 15px;
    margin-bottom: 16px;
    margin-right: 16px;
    color: #b4bbc2;
} */

/* .marker-widget-single-value-hidden {
    display: none;
} */

/* .marker-widget-single-value-parent {
    position: relative;
    margin-left: 0px;
    margin-right: 0px;
    justify-content: center;
    text-align: center;
    align-items: center;
    top: 2px;
} */

/* .marker-widget-download-data-parent {
    position: absolute;
    font-weight: lighter;
    color: #b4bbc2;
    top: 50%;
    margin-top: -24px;
} */

/* .marker-widget-download-data {
    color: #2193F3;
} */





/* .marker-widget-single-value-value-font {
    font-size: 36px;
    font-weight: 400;
} */

/* .marker-widget-single-value-unit {
    left: 68px;
    top: 55px;
    position: relative;
    display: flex;
    justify-content: right;
    align-items: center;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
} */

/* .marker-widget-single-value-unit-font {
    font-size: 11px;
    font-weight: 400;
    padding-left: 0px;
    padding-right: 0px;
} */

/* lib/hommie_widgets/widget_timeline_control.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           widgets.css
**************************************************************************************************/

/* Widget timeline control */
.widget-timeline-group {

}

.widget-timeline {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    border: 1px solid rgba(143, 184, 220, 0.18);
    color: #f4f8fb;
    background:
        radial-gradient(circle at 8% 0, rgba(33, 147, 243, 0.17), transparent 34%),
        linear-gradient(145deg, #242a2f, #1b1e22);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    cursor: default;
    max-width: 100%;
}

.widget-timeline .widget-timeline-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 16px 8px;
}

.widget-timeline-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.widget-timeline-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(33, 147, 243, 0.36);
    border-radius: 11px;
    color: #79c2ff;
    background: rgba(33, 147, 243, 0.12);
}

.widget-timeline-heading span,
.widget-timeline-heading strong {
    display: block;
}

.widget-timeline-eyebrow {
    color: #8fb8dc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.widget-timeline-heading strong {
    font-size: 17px;
    line-height: 1.2;
}

.timeline-auto-refresh {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: #7f8b94;
    font-size: 9px;
    font-weight: 600;
}

.timeline-auto-refresh i {
    color: #20c997;
    font-size: 6px;
    filter: drop-shadow(0 0 4px rgba(32, 201, 151, 0.7));
}

.timeline-auto-refresh.updating i {
    animation: timeline-refresh-pulse 0.9s ease-in-out infinite alternate;
}

.timeline-auto-refresh.paused i {
    color: #ffc107;
    filter: none;
}

.timeline-auto-refresh.error i {
    color: #ff6574;
    filter: none;
}

@keyframes timeline-refresh-pulse {
    from { opacity: 0.35; transform: scale(0.75); }
    to { opacity: 1; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .timeline-auto-refresh.updating i {
        animation: none;
    }
}

.widget-timeline-period {
    display: flex;
    align-items: center;
    gap: 9px;
}

.widget-timeline-period-description {
    text-align: right;
}

.widget-timeline-period label {
    display: block;
    margin: 0;
    color: #9faab3;
    font-size: 11px;
    white-space: nowrap;
}

.timeline-available-label {
    display: block;
    margin-top: 1px;
    color: #6f9cc0;
    font-size: 9px;
    white-space: nowrap;
}

.widget-timeline-period .period-selector {
    width: auto;
    min-width: 132px;
    height: 38px;
    padding: 4px 30px 4px 12px;
    border: 1px solid rgba(143, 184, 220, 0.22);
    border-radius: 9px;
    color: #ffffff;
    background-color: #30373e;
    font-size: 13px;
    font-weight: 700;
}

.widget-timeline-selection {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 3px 16px 13px;
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
}

.timeline-selection-date span,
.timeline-selection-date strong {
    display: block;
}

.timeline-selection-date span {
    color: #8f9ba5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.timeline-selection-date strong {
    margin-top: 2px;
    font-size: 14px;
}

.timeline-selection-date-end {
    text-align: right;
}

.timeline-selection-duration {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #79c2ff;
}

.timeline-selection-duration span {
    padding: 3px 7px;
    border-radius: 99px;
    color: #d9efff;
    background: rgba(33, 147, 243, 0.12);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.widget-timeline-navigator {
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 0 16px 14px;
}

.widget-timeline-track-wrap {
    min-width: 0;
}

.widget-timeline .widget-timeline-range-bar {
    position: relative;
    width: 100%;
    height: 46px;
    overflow: visible;
    border: 1px solid rgba(143, 184, 220, 0.18);
    border-radius: 10px;
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, 0.07) calc(10% - 1px) 10%),
        #151a1f;
    box-shadow: inset 0 2px 9px rgba(0, 0, 0, 0.38);
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
}

.widget-timeline .widget-timeline-range-bar:focus-visible {
    outline: 2px solid #65b8ff;
    outline-offset: 2px;
}

.widget-timeline .widget-timeline-range-bar .data-range {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.data-range-line {
    position: absolute;
    top: 22px;
    height: 2px;
    width: 100%;
    background: rgba(143, 184, 220, 0.28);
}

.widget-timeline .widget-timeline-range-bar .current-range {
    position: absolute;
    top: 7px;
    height: 30px;
    min-width: 8px;
    overflow: hidden;
    border: 1px solid rgba(170, 220, 255, 0.72);
    border-radius: 8px;
    background: linear-gradient(90deg, #147bd1, #2aa8ff);
    box-shadow: 0 0 16px rgba(33, 150, 243, 0.42), inset 0 1px rgba(255, 255, 255, 0.25);
    pointer-events: none;
    transition: left 0.2s ease, width 0.2s ease;
}

.widget-timeline-range-bar.is-interacting .current-range {
    transition: none;
}

.current-range::before,
.current-range::after {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    width: 2px;
    border-left: 1px solid rgba(255, 255, 255, 0.72);
    border-right: 1px solid rgba(255, 255, 255, 0.72);
}

.current-range::before { left: 5px; }
.current-range::after { right: 5px; }

.timeline-cursor {
    position: absolute;
    top: 4px;
    bottom: 4px;
    z-index: 4;
    width: 1px;
    background: rgba(255, 255, 255, 0.75);
    opacity: 0;
    pointer-events: none;
}

.timeline-hover-tooltip {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 6;
    padding: 5px 8px;
    border-radius: 6px;
    color: #ffffff;
    background: #0d1115;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
}

.widget-timeline-range-bar.is-hovered .timeline-cursor,
.widget-timeline-range-bar.is-hovered .timeline-hover-tooltip {
    opacity: 1;
}

.widget-timeline-extremes {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 5px;
}

.widget-timeline-extremes span {
    overflow: hidden;
    color: #7f8a93;
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.timeline-interaction-hint {
    margin-top: 3px;
    color: #69757f;
    font-size: 9px;
    text-align: center;
}

.widget-timeline-actions {
    display: flex;
    gap: 5px;
}

.widget-timeline-actions-end {
    justify-content: flex-end;
}

.widget-timeline-button {
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid rgba(143, 184, 220, 0.18);
    border-radius: 9px;
    color: #bac5cd;
    background: #30363c;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.widget-timeline-button-icon {
    width: 40px;
    padding: 0;
}

.widget-timeline-button i {
    font-size: 13px;
}

.widget-timeline-button:not([disabled]):hover {
    border-color: #2193f3;
    color: #ffffff;
    background: #167ccc;
    transform: translateY(-1px);
}

.widget-timeline-button[disabled] {
    opacity: 0.34;
    cursor: not-allowed;
}

@media (max-width: 767.98px) {
    .widget-timeline .widget-timeline-top {
        align-items: stretch;
        flex-direction: column;
    }

    .widget-timeline-period {
        justify-content: space-between;
    }

    .widget-timeline-period-description {
        text-align: left;
    }

    .widget-timeline-period .period-selector {
        flex: 1 1 auto;
    }

    .widget-timeline-selection {
        gap: 6px;
    }

    .timeline-selection-date strong {
        font-size: 11px;
    }

    .timeline-selection-duration span,
    .timeline-interaction-hint {
        display: none;
    }

    .widget-timeline-navigator {
        grid-template-columns: 1fr 1fr;
    }

    .widget-timeline-track-wrap {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .widget-timeline-actions {
        grid-row: 2;
    }

    .widget-timeline-button {
        min-height: 44px;
        flex: 1 1 auto;
    }
}

@media (max-width: 420px) {
    .widget-timeline-selection {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .timeline-selection-duration {
        display: none;
    }

    .widget-timeline-button span {
        display: none;
    }
}


/* lib/hommie_widgets/widgets-text.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           widgets.css
**************************************************************************************************/


/* Widget variables group */
.widget-variables-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 5px;
}

.widget-variables-group .widget-variables {
    background-color: #212224;
    border-radius: 15px;
    border: 2px solid #33373b;
    cursor: default;
    max-width: 100%;
}

.widget-variables .widget-variables-icon {
    height: 36px;
    width: 36px;
    border-radius: 14px;
    color: #2193F3;
    padding: 5px;
}

.widget-variables .widget-variables-body {
    line-height: 15px;
    padding-right: 10px !important;
}

.widget-variables .widget-variables-body .widget-variables-name {
    font-size: 10px;
    color: #7b8086;
}

.widget-variables .widget-variables-body .widget-variables-state {
    font-size: 13px;
    color: #b4bbc2;
}

/* lib/lobibox/lobibox.css */
/* 
    Created on : Mar 19, 2014, 9:48:25 AM
    Author     : @arboshiki
*/
/* 
    Created on : Sep 19, 2014, 1:47:13 PM
    Author     : @arboshiki
*/
/*
    Author      : @arboshiki
*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,700,400,300);
/* 
    Created on : Aug 11, 2014, 5:14:12 PM
    Author     : @arboshiki
*/
.animated-super-fast {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated-fast {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated-slow {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes jumpUp {
  0% {
    -webkit-transform: translate3d(0, calc(230%), 0) scale3d(0, 1, 1);
    -webkit-animation-timing-function: ease-in;
  }
  40% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(0.02, 1.1, 1);
    -webkit-animation-timing-function: ease-out;
  }
  70% {
    -webkit-transform: translate3d(0, -40px, 0) scale3d(0.8, 1.1, 1);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
@keyframes jumpUp {
  0% {
    transform: translate3d(0, calc(230%), 0) scale3d(0, 1, 1);
    animation-timing-function: ease-in;
  }
  40% {
    transform: translate3d(0, 0, 0) scale3d(0.02, 1.1, 1);
    animation-timing-function: ease-out;
  }
  70% {
    transform: translate3d(0, -40px, 0) scale3d(0.8, 1.1, 1);
  }
  100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
@-webkit-keyframes expandOpen {
  0% {
    -webkit-transform: scale(1.8);
  }
  50% {
    -webkit-transform: scale(0.95);
  }
  80% {
    -webkit-transform: scale(1.05);
  }
  90% {
    -webkit-transform: scale(0.98);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes expandOpen {
  0% {
    transform: scale(1.8);
  }
  50% {
    transform: scale(0.95);
  }
  80% {
    transform: scale(1.05);
  }
  90% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes fadeInScale {
  0% {
    transform: scale(0);
    opacity: 0.0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes fadeInScale {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
  }
}
@keyframes zoomOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}
.jumpUp {
  -webkit-animation-name: jumpUp;
  animation-name: jumpUp;
}
.expandOpen {
  animation-name: expandOpen;
  -webkit-animation-name: expandOpen;
}
.fadeInScale {
  animation-name: fadeInScale;
  -webkit-animation-name: fadeInScale;
}
/* 
    Created on : Sep 19, 2014, 1:47:04 PM
    Author     : @arboshiki
*/
body.lobibox-open {
  overflow: hidden;
}
.lobibox {
  position: fixed;
  z-index: 10001;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  -webkit-box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.5);
}
.lobibox * {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.lobibox .lobibox-header {
  font-size: 20px;
  padding: 5px 10px;
  color: #eeeeee;
}
.lobibox .lobibox-header .btn-close {
  float: right;
  background-color: transparent;
  cursor: pointer;
  font-weight: 500;
  font-size: 25px;
  margin-top: -6px;
  border: none;
  outline: 0;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.lobibox .lobibox-header .btn-close:hover {
  color: #ed3d3d !important;
}
.lobibox .lobibox-body {
  overflow: hidden;
  display: table;
  position: relative;
  width: 100%;
  padding: 15px 20px;
  background-color: rgba(255, 255, 255, 0.98);
  font-size: 16px;
}
.lobibox .lobibox-body .lobibox-icon-wrapper {
  position: relative;
  height: 100%;
  display: table;
  font-size: 60px;
}
.lobibox .lobibox-body .lobibox-icon-wrapper .lobibox-icon {
  display: table-cell;
  vertical-align: middle;
}
.lobibox .lobibox-body .lobibox-body-text-wrapper {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  padding-left: 10px;
}
.lobibox .lobibox-footer {
  text-align: center;
  padding: 6px;
}
.lobibox .lobibox-footer > * {
  margin: 0 10px 0 0;
}
.lobibox .lobibox-footer.text-center {
  text-align: center;
}
.lobibox .lobibox-footer.text-left {
  text-align: left;
}
.lobibox .lobibox-footer.text-right {
  text-align: right;
}
.lobibox.lobibox-confirm {
  border: none;
}
.lobibox.lobibox-confirm .lobibox-header {
  color: #eeeeee;
  background-color: #3C2D2D;
}
.lobibox.lobibox-confirm .lobibox-body .lobibox-icon {
  color: #3C2D2D;
}
.lobibox.lobibox-confirm .lobibox-footer {
  background-color: #594343;
}
.lobibox.lobibox-success {
  border: 1px solid #29B87E;
}
.lobibox.lobibox-success .lobibox-header {
  color: #eeeeee;
  background-color: #29B87E;
}
.lobibox.lobibox-success .lobibox-body .lobibox-icon {
  color: #29B87E;
}
.lobibox.lobibox-success .lobibox-footer {
  background-color: #40d498;
}
.lobibox.lobibox-error {
  border: 1px solid #CA2121;
}
.lobibox.lobibox-error .lobibox-header {
  color: #eeeeee;
  background-color: #CA2121;
}
.lobibox.lobibox-error .lobibox-body .lobibox-icon {
  color: #CA2121;
}
.lobibox.lobibox-error .lobibox-footer {
  background-color: #e03e3e;
}
.lobibox.lobibox-info {
  border: 1px solid #2E79B4;
}
.lobibox.lobibox-info .lobibox-header {
  color: #eeeeee;
  background-color: #2E79B4;
}
.lobibox.lobibox-info .lobibox-body .lobibox-icon {
  color: #2E79B4;
}
.lobibox.lobibox-info .lobibox-footer {
  background-color: #4593d0;
}
.lobibox.lobibox-warning {
  border: 1px solid #CE812E;
}
.lobibox.lobibox-warning .lobibox-header {
  color: #eeeeee;
  background-color: #CE812E;
}
.lobibox.lobibox-warning .lobibox-body .lobibox-icon {
  color: #CE812E;
}
.lobibox.lobibox-warning .lobibox-footer {
  background-color: #d99a56;
}
.lobibox.lobibox-prompt {
  border: none;
}
.lobibox.lobibox-prompt .lobibox-header {
  color: #eeeeee;
  background-color: #3c2d2d;
}
.lobibox.lobibox-prompt .lobibox-body {
  padding: 20px;
}
.lobibox.lobibox-prompt .lobibox-body .lobibox-input {
  min-height: 38px;
  border: 1px solid #21cb91;
  width: 100%;
  padding: 5px;
  font-size: 18px;
  outline: 0;
}
.lobibox.lobibox-prompt .lobibox-body .lobibox-input:focus {
  background-color: #EEE;
}
.lobibox.lobibox-prompt .lobibox-body .lobibox-input.invalid {
  border-color: #DC2B2A;
}
.lobibox.lobibox-prompt .lobibox-body .lobibox-input-error-message {
  margin-top: 5px;
  margin-bottom: 0;
  font-size: 13px;
  color: #DC2B2A;
}
.lobibox.lobibox-prompt .lobibox-footer {
  background-color: #594343;
}
.lobibox.lobibox-progress .lobibox-header {
  background-color: #2F5D6D;
}
.lobibox.lobibox-progress .lobibox-body {
  padding: 15px;
  font-size: 16px;
}
.lobibox.lobibox-progress .lobibox-body .lobibox-progress-bar-wrapper {
  position: relative;
  height: 20px;
  border: 1px solid #c3c3c3;
  border-radius: 10px;
  background-color: #d5d5d5;
}
.lobibox.lobibox-progress .lobibox-body .lobibox-progress-bar-wrapper .lobibox-progress-bar {
  width: 0;
  border-radius: 10px;
  background-color: #468ba2;
  height: 100%;
  text-align: center;
}
.lobibox.lobibox-progress .lobibox-body .lobibox-progress-bar-wrapper .lobibox-progress-text {
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
}
.lobibox.lobibox-progress .lobibox-body .lobibox-progress-outer {
  margin-bottom: 0;
}
.lobibox.lobibox-progress .lobibox-body .lobibox-progress-outer .progress-bar {
  transition: none;
}
.lobibox.lobibox-progress .lobibox-body .lobibox-progress-outer [data-role="progress-text"] {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.7);
}
.lobibox.lobibox-window {
  border: 0px !important;
  border-radius: 15px;
}
.lobibox.lobibox-window .lobibox-header {
  background-color: #33373B;
  color: #eeeeee;
  font-size: 20px;
}
.lobibox.lobibox-window .lobibox-body {
  overflow: auto;
  display: block;
  font-size: 14px;
  padding: 15px;
  background-color: #33373B !important;
  border: 0px !important;
}
.lobibox.lobibox-window .lobibox-footer {
  background-color: #33373B !important;
  /* height: 0px !important; */
}
.lobibox.lobibox-window :last-child {
  /* border-bottom-right-radius: 3px; */
  /* border-bottom-left-radius: 3px; */
}
.lobibox.draggable .lobibox-header {
  cursor: move;
}
.lobibox .lobibox-btn {
  display: inline-block;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  line-height: initial;
}
.lobibox .lobibox-btn.lobibox-btn-cancel {
  color: #FFF;
  background-color: #CA2121;
  border-color: #CA2121;
}
.lobibox .lobibox-btn.lobibox-btn-cancel:hover,
.lobibox .lobibox-btn.lobibox-btn-cancel:focus,
.lobibox .lobibox-btn.lobibox-btn-cancel.focus,
.lobibox .lobibox-btn.lobibox-btn-cancel:active,
.lobibox .lobibox-btn.lobibox-btn-cancel.active,
.open > .dropdown-toggle.lobibox .lobibox-btn.lobibox-btn-cancel {
  color: #FFF;
  background-color: #9e1a1a;
  border-color: #951818;
}
.lobibox .lobibox-btn.lobibox-btn-cancel:active,
.lobibox .lobibox-btn.lobibox-btn-cancel.active,
.open > .dropdown-toggle.lobibox .lobibox-btn.lobibox-btn-cancel {
  background-image: none;
}
.lobibox .lobibox-btn.lobibox-btn-cancel.disabled,
.lobibox .lobibox-btn.lobibox-btn-cancel[disabled],
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-cancel,
.lobibox .lobibox-btn.lobibox-btn-cancel.disabled:hover,
.lobibox .lobibox-btn.lobibox-btn-cancel[disabled]:hover,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-cancel:hover,
.lobibox .lobibox-btn.lobibox-btn-cancel.disabled:focus,
.lobibox .lobibox-btn.lobibox-btn-cancel[disabled]:focus,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-cancel:focus,
.lobibox .lobibox-btn.lobibox-btn-cancel.disabled.focus,
.lobibox .lobibox-btn.lobibox-btn-cancel[disabled].focus,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-cancel.focus,
.lobibox .lobibox-btn.lobibox-btn-cancel.disabled:active,
.lobibox .lobibox-btn.lobibox-btn-cancel[disabled]:active,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-cancel:active,
.lobibox .lobibox-btn.lobibox-btn-cancel.disabled.active,
.lobibox .lobibox-btn.lobibox-btn-cancel[disabled].active,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-cancel.active {
  background-color: #CA2121;
  border-color: #CA2121;
}
.lobibox .lobibox-btn.lobibox-btn-cancel .badge {
  color: #CA2121;
  background-color: #FFF;
}
.lobibox .lobibox-btn.lobibox-btn-yes {
  color: #FFF;
  background-color: #29B87E;
  border-color: #29B87E;
}
.lobibox .lobibox-btn.lobibox-btn-yes:hover,
.lobibox .lobibox-btn.lobibox-btn-yes:focus,
.lobibox .lobibox-btn.lobibox-btn-yes.focus,
.lobibox .lobibox-btn.lobibox-btn-yes:active,
.lobibox .lobibox-btn.lobibox-btn-yes.active,
.open > .dropdown-toggle.lobibox .lobibox-btn.lobibox-btn-yes {
  color: #FFF;
  background-color: #208e61;
  border-color: #1e865c;
}
.lobibox .lobibox-btn.lobibox-btn-yes:active,
.lobibox .lobibox-btn.lobibox-btn-yes.active,
.open > .dropdown-toggle.lobibox .lobibox-btn.lobibox-btn-yes {
  background-image: none;
}
.lobibox .lobibox-btn.lobibox-btn-yes.disabled,
.lobibox .lobibox-btn.lobibox-btn-yes[disabled],
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-yes,
.lobibox .lobibox-btn.lobibox-btn-yes.disabled:hover,
.lobibox .lobibox-btn.lobibox-btn-yes[disabled]:hover,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-yes:hover,
.lobibox .lobibox-btn.lobibox-btn-yes.disabled:focus,
.lobibox .lobibox-btn.lobibox-btn-yes[disabled]:focus,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-yes:focus,
.lobibox .lobibox-btn.lobibox-btn-yes.disabled.focus,
.lobibox .lobibox-btn.lobibox-btn-yes[disabled].focus,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-yes.focus,
.lobibox .lobibox-btn.lobibox-btn-yes.disabled:active,
.lobibox .lobibox-btn.lobibox-btn-yes[disabled]:active,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-yes:active,
.lobibox .lobibox-btn.lobibox-btn-yes.disabled.active,
.lobibox .lobibox-btn.lobibox-btn-yes[disabled].active,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-yes.active {
  background-color: #29B87E;
  border-color: #29B87E;
}
.lobibox .lobibox-btn.lobibox-btn-yes .badge {
  color: #29B87E;
  background-color: #FFF;
}
.lobibox .lobibox-btn.lobibox-btn-no {
  color: #FFF;
  background-color: #0760B3;
  border-color: #0760B3;
}
.lobibox .lobibox-btn.lobibox-btn-no:hover,
.lobibox .lobibox-btn.lobibox-btn-no:focus,
.lobibox .lobibox-btn.lobibox-btn-no.focus,
.lobibox .lobibox-btn.lobibox-btn-no:active,
.lobibox .lobibox-btn.lobibox-btn-no.active,
.open > .dropdown-toggle.lobibox .lobibox-btn.lobibox-btn-no {
  color: #FFF;
  background-color: #054682;
  border-color: #054078;
}
.lobibox .lobibox-btn.lobibox-btn-no:active,
.lobibox .lobibox-btn.lobibox-btn-no.active,
.open > .dropdown-toggle.lobibox .lobibox-btn.lobibox-btn-no {
  background-image: none;
}
.lobibox .lobibox-btn.lobibox-btn-no.disabled,
.lobibox .lobibox-btn.lobibox-btn-no[disabled],
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-no,
.lobibox .lobibox-btn.lobibox-btn-no.disabled:hover,
.lobibox .lobibox-btn.lobibox-btn-no[disabled]:hover,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-no:hover,
.lobibox .lobibox-btn.lobibox-btn-no.disabled:focus,
.lobibox .lobibox-btn.lobibox-btn-no[disabled]:focus,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-no:focus,
.lobibox .lobibox-btn.lobibox-btn-no.disabled.focus,
.lobibox .lobibox-btn.lobibox-btn-no[disabled].focus,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-no.focus,
.lobibox .lobibox-btn.lobibox-btn-no.disabled:active,
.lobibox .lobibox-btn.lobibox-btn-no[disabled]:active,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-no:active,
.lobibox .lobibox-btn.lobibox-btn-no.disabled.active,
.lobibox .lobibox-btn.lobibox-btn-no[disabled].active,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-no.active {
  background-color: #0760B3;
  border-color: #0760B3;
}
.lobibox .lobibox-btn.lobibox-btn-no .badge {
  color: #0760B3;
  background-color: #FFF;
}
.lobibox .lobibox-btn.lobibox-btn-ok {
  color: #FFF;
  background-color: #0760B3;
  border-color: #0760B3;
}
.lobibox .lobibox-btn.lobibox-btn-ok:hover,
.lobibox .lobibox-btn.lobibox-btn-ok:focus,
.lobibox .lobibox-btn.lobibox-btn-ok.focus,
.lobibox .lobibox-btn.lobibox-btn-ok:active,
.lobibox .lobibox-btn.lobibox-btn-ok.active,
.open > .dropdown-toggle.lobibox .lobibox-btn.lobibox-btn-ok {
  color: #FFF;
  background-color: #054682;
  border-color: #054078;
}
.lobibox .lobibox-btn.lobibox-btn-ok:active,
.lobibox .lobibox-btn.lobibox-btn-ok.active,
.open > .dropdown-toggle.lobibox .lobibox-btn.lobibox-btn-ok {
  background-image: none;
}
.lobibox .lobibox-btn.lobibox-btn-ok.disabled,
.lobibox .lobibox-btn.lobibox-btn-ok[disabled],
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-ok,
.lobibox .lobibox-btn.lobibox-btn-ok.disabled:hover,
.lobibox .lobibox-btn.lobibox-btn-ok[disabled]:hover,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-ok:hover,
.lobibox .lobibox-btn.lobibox-btn-ok.disabled:focus,
.lobibox .lobibox-btn.lobibox-btn-ok[disabled]:focus,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-ok:focus,
.lobibox .lobibox-btn.lobibox-btn-ok.disabled.focus,
.lobibox .lobibox-btn.lobibox-btn-ok[disabled].focus,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-ok.focus,
.lobibox .lobibox-btn.lobibox-btn-ok.disabled:active,
.lobibox .lobibox-btn.lobibox-btn-ok[disabled]:active,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-ok:active,
.lobibox .lobibox-btn.lobibox-btn-ok.disabled.active,
.lobibox .lobibox-btn.lobibox-btn-ok[disabled].active,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-ok.active {
  background-color: #0760B3;
  border-color: #0760B3;
}
.lobibox .lobibox-btn.lobibox-btn-ok .badge {
  color: #0760B3;
  background-color: #FFF;
}
.lobibox .lobibox-btn.lobibox-btn-default {
  color: #000;
  background-color: #e2e2e2;
  border-color: #dadada;
}
.lobibox .lobibox-btn.lobibox-btn-default:hover,
.lobibox .lobibox-btn.lobibox-btn-default:focus,
.lobibox .lobibox-btn.lobibox-btn-default.focus,
.lobibox .lobibox-btn.lobibox-btn-default:active,
.lobibox .lobibox-btn.lobibox-btn-default.active,
.open > .dropdown-toggle.lobibox .lobibox-btn.lobibox-btn-default {
  color: #000;
  background-color: #c9c9c9;
  border-color: #bcbcbc;
}
.lobibox .lobibox-btn.lobibox-btn-default:active,
.lobibox .lobibox-btn.lobibox-btn-default.active,
.open > .dropdown-toggle.lobibox .lobibox-btn.lobibox-btn-default {
  background-image: none;
}
.lobibox .lobibox-btn.lobibox-btn-default.disabled,
.lobibox .lobibox-btn.lobibox-btn-default[disabled],
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-default,
.lobibox .lobibox-btn.lobibox-btn-default.disabled:hover,
.lobibox .lobibox-btn.lobibox-btn-default[disabled]:hover,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-default:hover,
.lobibox .lobibox-btn.lobibox-btn-default.disabled:focus,
.lobibox .lobibox-btn.lobibox-btn-default[disabled]:focus,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-default:focus,
.lobibox .lobibox-btn.lobibox-btn-default.disabled.focus,
.lobibox .lobibox-btn.lobibox-btn-default[disabled].focus,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-default.focus,
.lobibox .lobibox-btn.lobibox-btn-default.disabled:active,
.lobibox .lobibox-btn.lobibox-btn-default[disabled]:active,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-default:active,
.lobibox .lobibox-btn.lobibox-btn-default.disabled.active,
.lobibox .lobibox-btn.lobibox-btn-default[disabled].active,
fieldset[disabled] .lobibox .lobibox-btn.lobibox-btn-default.active {
  background-color: #e2e2e2;
  border-color: #dadada;
}
.lobibox .lobibox-btn.lobibox-btn-default .badge {
  color: #e2e2e2;
  background-color: #000;
}
.lobibox.lobibox-hidden {
  display: none;
}
.lobibox-backdrop {
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
/*
    Created on : Sep 19, 2014, 2:01:43 PM
    Author     : @arboshiki
*/
.lobibox-notify-wrapper {
  z-index: 5000;
  position: fixed;
}
.lobibox-notify-wrapper.top {
  top: 0px;
}
.lobibox-notify-wrapper.bottom {
  bottom: 0px;
}
.lobibox-notify-wrapper.left {
  left: 0px;
  margin-right: 0px;
}
.lobibox-notify-wrapper.right {
  right: 0px;
  margin-left: 0px;
}
.lobibox-notify-wrapper.right .lobibox-notify {
  margin-left: auto;
}
.lobibox-notify-wrapper.center {
  left: 50%;
}
.lobibox-notify-wrapper-large {
  z-index: 5000;
  position: fixed;
}
.lobibox-notify-wrapper-large.top {
  top: 0px;
}
.lobibox-notify-wrapper-large.bottom {
  bottom: 0px;
}
.lobibox-notify-wrapper-large.left {
  left: 0px;
}
.lobibox-notify-wrapper-large.left .lb-notify-tabs > li {
  float: left;
  margin-left: 0;
  margin-right: 2px;
}
.lobibox-notify-wrapper-large.right {
  right: 0px;
}
.lobibox-notify-wrapper-large .lb-notify-tabs {
  list-style: none;
  padding: 0;
  margin: 0 0 -5px 0;
}
.lobibox-notify-wrapper-large .lb-notify-tabs > li {
  float: right;
  margin-left: 2px;
}
.lobibox-notify-wrapper-large .lb-notify-tabs > li > a {
  text-align: center;
  display: table;
  text-decoration: none;
  font-size: 18px;
  height: 32px;
  color: #FFF;
  width: 28px;
  opacity: 0.6;
}
.lobibox-notify-wrapper-large .lb-notify-tabs > li > a:hover,
.lobibox-notify-wrapper-large .lb-notify-tabs > li > a:active,
.lobibox-notify-wrapper-large .lb-notify-tabs > li > a:focus,
.lobibox-notify-wrapper-large .lb-notify-tabs > li > a:hover:active {
  color: #FFF;
}
.lobibox-notify-wrapper-large .lb-notify-tabs > li > a .tab-control-icon {
  display: table-cell;
  vertical-align: middle;
}
.lobibox-notify-wrapper-large .lb-notify-tabs > li.lobibox-notify-default > a {
  background-color: rgba(28, 28, 28, 0.9);
  border-color: #141414;
}
.lobibox-notify-wrapper-large .lb-notify-tabs > li.lobibox-notify-default > a:hover {
  background-color: #1c1c1c;
  border-color: #0f0f0f;
}
.lobibox-notify-wrapper-large .lb-notify-tabs > li.lobibox-notify-error > a {
  background-color: rgba(202, 33, 33, 0.9);
  border-color: #bd1f1f;
}
.lobibox-notify-wrapper-large .lb-notify-tabs > li.lobibox-notify-error > a:hover {
  background-color: #CA2121;
  border-color: #b41d1d;
}
.lobibox-notify-wrapper-large .lb-notify-tabs > li.lobibox-notify-success > a {
  background-color: rgba(41, 184, 126, 0.9);
  border-color: #26ab75;
}
.lobibox-notify-wrapper-large .lb-notify-tabs > li.lobibox-notify-success > a:hover {
  background-color: #29B87E;
  border-color: #24a370;
}
.lobibox-notify-wrapper-large .lb-notify-tabs > li.lobibox-notify-warning > a {
  background-color: rgba(206, 129, 46, 0.9);
  border-color: #c1792b;
}
.lobibox-notify-wrapper-large .lb-notify-tabs > li.lobibox-notify-warning > a:hover {
  background-color: #CE812E;
  border-color: #b97429;
}
.lobibox-notify-wrapper-large .lb-notify-tabs > li.lobibox-notify-info > a {
  background-color: rgba(46, 121, 180, 0.9);
  border-color: #2b71a8;
}
.lobibox-notify-wrapper-large .lb-notify-tabs > li.lobibox-notify-info > a:hover {
  background-color: #2E79B4;
  border-color: #296ba0;
}
.lobibox-notify-wrapper-large .lb-notify-tabs > li.active > a {
  opacity: 1;
}
.lobibox-notify-wrapper-large .lb-notify-tabs:after {
  content: "";
  display: block;
  clear: both;
}
.lobibox-notify-wrapper-large .lb-notify-wrapper {
  background-color: transparent;
  padding: 0;
  border: none;
}
.lobibox-notify-wrapper-large .lb-notify-wrapper .lb-tab-pane {
  display: none;
}
.lobibox-notify-wrapper-large .lb-notify-wrapper .lb-tab-pane.active {
  display: block;
}
.lobibox-notify-wrapper-large .lb-notify-wrapper .lobibox-notify {
  min-height: 150px;
}
.lobibox-notify-wrapper-large .lb-notify-wrapper .lobibox-notify .lobibox-notify-icon-wrapper {
  width: 100px;
}
.lobibox-notify-wrapper-large .lb-notify-wrapper .lobibox-notify .lobibox-notify-icon > div .icon-el {
  font-size: 78px;
}
.lobibox-notify-wrapper-large .lb-notify-wrapper .lobibox-notify .lobibox-notify-body {
  margin: 13px 20px;
  margin-left: 130px;
}
.lobibox-notify {
  position: relative;
  min-height: 85px;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 14px;
  margin: 7px 0;
  border-radius: 0;
  border: 1px solid transparent;
  -webkit-box-shadow: 2px 2px 5px #aaa;
  box-shadow: 2px 2px 5px #aaa;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.lobibox-notify .lobibox-notify-icon-wrapper {
  position: absolute;
  left: 15px;
  width: 60px;
  height: 100%;
}
.lobibox-notify .lobibox-notify-icon {
  display: table;
  width: 100%;
  height: 100%;
}
.lobibox-notify .lobibox-notify-icon > div {
  display: table-cell;
  vertical-align: middle;
}
.lobibox-notify .lobibox-notify-icon > div > img {
  width: 100%;
  max-width: 100%;
  margin-top: 3px;
  border-radius: 4px;
}
.lobibox-notify .lobibox-notify-icon > div .icon-el {
  text-align: center;
  font-size: 55px;
}
.lobibox-notify .lobibox-notify-body {
  margin: 10px 20px;
  margin-left: 90px;
}
.lobibox-notify .lobibox-notify-title {
  font-size: 20px;
}
.lobibox-notify .lobibox-notify-msg {
  overflow: hidden;
}
.lobibox-notify .lobibox-close {
  position: absolute;
  text-align: center;
  border-radius: 50%;
  right: 10px;
  top: 10px;
  font-size: 20px;
  line-height: 19px;
  width: 19px;
  height: 19px;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.lobibox-notify .lobibox-close:hover {
  background-color: rgba(0, 0, 0, 0.5);
  font-weight: bold;
}
.lobibox-notify .lobibox-delay-indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
}
.lobibox-notify .lobibox-delay-indicator > div {
  position: relative;
  height: 100%;
  width: 0;
  background-color: #e8e8e8;
}
.lobibox-notify.lobibox-notify-default {
  border-color: #0f0f0f;
  background-color: #1c1c1c;
  color: #FFF;
}
.lobibox-notify.lobibox-notify-default:hover {
  background-color: #1c1c1c;
  border-color: #FFF;
}
.lobibox-notify.lobibox-notify-default .lobibox-close:hover {
  background-color: #4f4f4f;
}
.lobibox-notify.lobibox-notify-error {
  border-color: #b41d1d;
  background-color: #CA2121;
  color: #FFF;
}
.lobibox-notify.lobibox-notify-error:hover {
  background-color: #CA2121;
  border-color: #FFF;
}
.lobibox-notify.lobibox-notify-success {
  border-color: #24a370;
  background-color: #29B87E;
  color: #FFF;
}
.lobibox-notify.lobibox-notify-success:hover {
  background-color: #29B87E;
  border-color: #FFF;
}
.lobibox-notify.lobibox-notify-warning {
  border-color: #b97429;
  background-color: #CE812E;
  color: #FFF;
}
.lobibox-notify.lobibox-notify-warning:hover {
  background-color: #CE812E;
  border-color: #FFF;
}
.lobibox-notify.lobibox-notify-info {
  border-color: #296ba0;
  background-color: #2E79B4;
  color: #FFF;
}
.lobibox-notify.lobibox-notify-info:hover {
  background-color: #2E79B4;
  border-color: #FFF;
}
.lobibox-notify.rounded {
  border-radius: 30px;
}
.lobibox-notify:hover {
  cursor: pointer;
  -webkit-box-shadow: 3px 3px 10px #aaa;
  box-shadow: 3px 3px 10px #aaa;
}
.lobibox-notify.notify-mini {
  min-height: 36px;
}
.lobibox-notify.notify-mini .lobibox-notify-title {
  margin-top: -5px;
  font-size: 20px;
  line-height: 22px;
}
.lobibox-notify.notify-mini .lobibox-notify-msg {
  line-height: 16px;
}
.lobibox-notify.notify-mini .lobibox-notify-icon-wrapper {
  left: 12px;
  width: 32px;
}
.lobibox-notify.notify-mini .lobibox-notify-icon > div .icon-el {
  font-size: 32px;
}
.lobibox-notify.notify-mini .lobibox-notify-body {
  margin: 15px 30px 15px 56px;
}
.lobibox-notify.without-icon .lobibox-notify-body {
  margin-left: 20px;
}

/* lib/lobipanel/lobipanel.css */
.spinner-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
}
.spinner-windows8 {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 50px;
  height: 50px;
  margin-top: 100px;
}
.spinner-windows8 .wBall {
  position: absolute;
  width: 48px;
  height: 48px;
  opacity: 0;
  -moz-transform: rotate(225deg);
  -moz-animation: orbit 2.75s infinite;
  -webkit-transform: rotate(225deg);
  -webkit-animation: orbit 2.75s infinite;
  -ms-transform: rotate(225deg);
  -ms-animation: orbit 2.75s infinite;
  -o-transform: rotate(225deg);
  -o-animation: orbit 2.75s infinite;
  transform: rotate(225deg);
  animation: orbit 2.75s infinite;
}
.spinner-windows8 .wBall .wInnerBall {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #000000;
  left: 0px;
  top: 0px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  z-index: 2;
}
.spinner-windows8 .wBall:first-child {
  -moz-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  -ms-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.spinner-windows8 .wBall:nth-child(2) {
  -moz-animation-delay: 0.12s;
  -webkit-animation-delay: 0.12s;
  -ms-animation-delay: 0.12s;
  -o-animation-delay: 0.12s;
  animation-delay: 0.12s;
}
.spinner-windows8 .wBall:nth-child(3) {
  -moz-animation-delay: 0.24s;
  -webkit-animation-delay: 0.24s;
  -ms-animation-delay: 0.24s;
  -o-animation-delay: 0.24s;
  animation-delay: 0.24s;
}
.spinner-windows8 .wBall:nth-child(4) {
  -moz-animation-delay: 0.36s;
  -webkit-animation-delay: 0.36s;
  -ms-animation-delay: 0.36s;
  -o-animation-delay: 0.36s;
  animation-delay: 0.36s;
}
.spinner-windows8 .wBall:nth-child(5) {
  -moz-animation-delay: 0.48s;
  -webkit-animation-delay: 0.48s;
  -ms-animation-delay: 0.48s;
  -o-animation-delay: 0.48s;
  animation-delay: 0.48s;
}
@-moz-keyframes orbit {
  0% {
    opacity: 1;
    z-index: 99;
    -moz-transform: rotate(180deg);
    -moz-animation-timing-function: ease-out;
  }
  7% {
    opacity: 1;
    -moz-transform: rotate(300deg);
    -moz-animation-timing-function: linear;
    -moz-origin: 0%;
  }
  30% {
    opacity: 1;
    -moz-transform: rotate(410deg);
    -moz-animation-timing-function: ease-in-out;
    -moz-origin: 7%;
  }
  39% {
    opacity: 1;
    -moz-transform: rotate(645deg);
    -moz-animation-timing-function: linear;
    -moz-origin: 30%;
  }
  70% {
    opacity: 1;
    -moz-transform: rotate(770deg);
    -moz-animation-timing-function: ease-out;
    -moz-origin: 39%;
  }
  75% {
    opacity: 1;
    -moz-transform: rotate(900deg);
    -moz-animation-timing-function: ease-out;
    -moz-origin: 70%;
  }
  76% {
    opacity: 0;
    -moz-transform: rotate(900deg);
  }
  100% {
    opacity: 0;
    -moz-transform: rotate(900deg);
  }
}
@-webkit-keyframes orbit {
  0% {
    opacity: 1;
    z-index: 99;
    -webkit-transform: rotate(180deg);
    -webkit-animation-timing-function: ease-out;
  }
  7% {
    opacity: 1;
    -webkit-transform: rotate(300deg);
    -webkit-animation-timing-function: linear;
    -webkit-origin: 0%;
  }
  30% {
    opacity: 1;
    -webkit-transform: rotate(410deg);
    -webkit-animation-timing-function: ease-in-out;
    -webkit-origin: 7%;
  }
  39% {
    opacity: 1;
    -webkit-transform: rotate(645deg);
    -webkit-animation-timing-function: linear;
    -webkit-origin: 30%;
  }
  70% {
    opacity: 1;
    -webkit-transform: rotate(770deg);
    -webkit-animation-timing-function: ease-out;
    -webkit-origin: 39%;
  }
  75% {
    opacity: 1;
    -webkit-transform: rotate(900deg);
    -webkit-animation-timing-function: ease-out;
    -webkit-origin: 70%;
  }
  76% {
    opacity: 0;
    -webkit-transform: rotate(900deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(900deg);
  }
}
@-ms-keyframes orbit {
  0% {
    opacity: 1;
    z-index: 99;
    -ms-transform: rotate(180deg);
    -ms-animation-timing-function: ease-out;
  }
  7% {
    opacity: 1;
    -ms-transform: rotate(300deg);
    -ms-animation-timing-function: linear;
    -ms-origin: 0%;
  }
  30% {
    opacity: 1;
    -ms-transform: rotate(410deg);
    -ms-animation-timing-function: ease-in-out;
    -ms-origin: 7%;
  }
  39% {
    opacity: 1;
    -ms-transform: rotate(645deg);
    -ms-animation-timing-function: linear;
    -ms-origin: 30%;
  }
  70% {
    opacity: 1;
    -ms-transform: rotate(770deg);
    -ms-animation-timing-function: ease-out;
    -ms-origin: 39%;
  }
  75% {
    opacity: 1;
    -ms-transform: rotate(900deg);
    -ms-animation-timing-function: ease-out;
    -ms-origin: 70%;
  }
  76% {
    opacity: 0;
    -ms-transform: rotate(900deg);
  }
  100% {
    opacity: 0;
    -ms-transform: rotate(900deg);
  }
}
@-o-keyframes orbit {
  0% {
    opacity: 1;
    z-index: 99;
    -o-transform: rotate(180deg);
    -o-animation-timing-function: ease-out;
  }
  7% {
    opacity: 1;
    -o-transform: rotate(300deg);
    -o-animation-timing-function: linear;
    -o-origin: 0%;
  }
  30% {
    opacity: 1;
    -o-transform: rotate(410deg);
    -o-animation-timing-function: ease-in-out;
    -o-origin: 7%;
  }
  39% {
    opacity: 1;
    -o-transform: rotate(645deg);
    -o-animation-timing-function: linear;
    -o-origin: 30%;
  }
  70% {
    opacity: 1;
    -o-transform: rotate(770deg);
    -o-animation-timing-function: ease-out;
    -o-origin: 39%;
  }
  75% {
    opacity: 1;
    -o-transform: rotate(900deg);
    -o-animation-timing-function: ease-out;
    -o-origin: 70%;
  }
  76% {
    opacity: 0;
    -o-transform: rotate(900deg);
  }
  100% {
    opacity: 0;
    -o-transform: rotate(900deg);
  }
}
@keyframes orbit {
  0% {
    opacity: 1;
    z-index: 99;
    transform: rotate(180deg);
    animation-timing-function: ease-out;
  }
  7% {
    opacity: 1;
    transform: rotate(300deg);
    animation-timing-function: linear;
    origin: 0%;
  }
  30% {
    opacity: 1;
    transform: rotate(410deg);
    animation-timing-function: ease-in-out;
    origin: 7%;
  }
  39% {
    opacity: 1;
    transform: rotate(645deg);
    animation-timing-function: linear;
    origin: 30%;
  }
  70% {
    opacity: 1;
    transform: rotate(770deg);
    animation-timing-function: ease-out;
    origin: 39%;
  }
  75% {
    opacity: 1;
    transform: rotate(900deg);
    animation-timing-function: ease-out;
    origin: 70%;
  }
  76% {
    opacity: 0;
    transform: rotate(900deg);
  }
  100% {
    opacity: 0;
    transform: rotate(900deg);
  }
}
.tooltip {
  z-index: 20000;
}
body.lobipanel-minimized {
  padding-bottom: 36px;
}
.lobipanel {
  position: relative;
  margin-bottom: 15px;
}
.lobipanel > .panel-heading {
  padding: 5px;
  position: relative;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}
.lobipanel > .panel-heading > .panel-title {
  float: left;
  max-width: calc(100% - 30px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 30px;
  padding-left: 15px;
}
.lobipanel > .panel-heading > .panel-title h1,
.lobipanel > .panel-heading > .panel-title h2,
.lobipanel > .panel-heading > .panel-title h3,
.lobipanel > .panel-heading > .panel-title h4,
.lobipanel > .panel-heading > .panel-title h5,
.lobipanel > .panel-heading > .panel-title h6 {
  margin: 0;
  line-height: 30px;
}
.lobipanel > .panel-heading > .panel-title input {
  color: inherit;
  line-height: 30px;
  border-radius: 2px;
  padding: 0 5px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid transparent;
  outline: 0;
}
.lobipanel > .panel-heading > .panel-title input:focus {
  background-color: rgba(0, 0, 0, 0.15);
}
.lobipanel > .panel-heading .dropdown {
  display: inline-block;
  float: right;
  position: relative;
}
.lobipanel > .panel-heading .dropdown .dropdown-menu {
  left: auto;
  right: 0;
  min-width: 0;
  margin-top: 0;
  border-radius: 0;
}
.lobipanel > .panel-heading .dropdown .dropdown-menu > li > a .control-title {
  display: inline-block;
  margin-left: 15px;
}
.lobipanel > .panel-heading .dropdown .dropdown-menu .style-change-item {
  position: relative;
}
.lobipanel > .panel-heading .dropdown .dropdown-menu .style-change-item .style-list {
  position: absolute;
  background: #f5f5f5;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3);
  padding: 4px;
  display: none;
  width: 92px;
  top: 100%;
  right: 0;
  z-index: 2;
}
.lobipanel > .panel-heading .dropdown .dropdown-menu .style-change-item .style-list .style-item {
  cursor: pointer;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 2px;
  border: 2px solid #f5f5f5;
}
.lobipanel > .panel-heading .dropdown .dropdown-menu .style-change-item .style-list .style-item:hover {
  border-color: #FFF;
}
.lobipanel > .panel-heading .dropdown .dropdown-menu .style-change-item .style-list .style-item:active {
  box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.3);
}
.lobipanel > .panel-heading .dropdown .dropdown-menu .style-change-item .style-list.opened {
  display: block;
}
.lobipanel > .panel-heading .dropdown .dropdown-toggle {
  border: none;
  outline: 0;
  background-color: transparent;
  text-align: center;
  padding: 0;
  width: 30px;
  font-size: 14px;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.lobipanel > .panel-heading .dropdown .dropdown-toggle .panel-control-icon {
  top: 0;
  line-height: 30px;
}
.lobipanel > .panel-heading .dropdown .dropdown-toggle:hover,
.lobipanel > .panel-heading .dropdown .dropdown-toggle:hover:focus {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(0, 0, 0, 0.15);
}
.lobipanel > .panel-heading .dropdown.open .dropdown-toggle {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(0, 0, 0, 0.15);
}
.lobipanel > .panel-heading:before,
.lobipanel > .panel-heading:after {
  content: " ";
  display: table;
}
.lobipanel > .panel-heading:after {
  clear: both;
}
@media screen and (min-width: 768px) {
  .lobipanel .panel-heading .panel-title {
    max-width: calc(100% - 180px);
  }
  .lobipanel .panel-heading .dropdown .dropdown-menu {
    position: static;
    display: inline-block;
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    width: auto;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: transparent;
  }
  .lobipanel .panel-heading .dropdown .dropdown-menu > li {
    display: inline-block;
  }
  .lobipanel .panel-heading .dropdown .dropdown-menu > li > a {
    display: inline-block;
    cursor: pointer;
    color: inherit;
    padding: 0;
    outline: 0;
    text-align: center;
    width: 30px;
    font-size: 14px;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
  }
  .lobipanel .panel-heading .dropdown .dropdown-menu > li > a .panel-control-icon {
    top: 0;
    line-height: 30px;
    color: white;
  }
  .lobipanel .panel-heading .dropdown .dropdown-menu > li > a .control-title {
    display: none;
  }
  .lobipanel .panel-heading .dropdown .dropdown-menu > li > a:hover,
  .lobipanel .panel-heading .dropdown .dropdown-menu > li > a:focus:hover {
    text-shadow: 2px 2px 5px rgba(210, 31, 37, 0.6);
    background-color: rgba(210, 31, 37, 0.15);
  }
  .lobipanel .panel-heading .dropdown .dropdown-menu > li > a:focus {
    text-shadow: none;
    background-color: transparent;
  }
  .lobipanel .panel-heading .dropdown .dropdown-toggle {
    display: none;
  }
}
.lobipanel > .panel-body {
  overflow: auto;
  position: relative;
}
.lobipanel .panel-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.8;
}
.lobipanel.panel-collapsed > .panel-heading {
  border-bottom: none;
}
.lobipanel.panel-collapsed > .panel-heading .dropdown .dropdown-menu > li > a[data-func="unpin"],
.lobipanel.panel-collapsed > .panel-heading .dropdown .dropdown-menu > li > a[data-func="reload"],
.lobipanel.panel-collapsed > .panel-heading .dropdown .dropdown-menu > li > a[data-func="expand"] {
  display: none;
}
.lobipanel.panel-expanded,
.lobipanel.panel-unpin,
.lobipanel.panel-minimized.panel-unpin {
  margin-bottom: 0;
}
.lobipanel.panel-unpin {
  overflow: hidden;
  position: absolute;
  z-index: 10000;
  -webkit-box-shadow: 2px 2px 15px 5px rgba(10, 10, 10, 0.5);
  box-shadow: 2px 2px 15px 5px rgba(10, 10, 10, 0.5);
}
.lobipanel.panel-unpin > .panel-heading {
  cursor: move;
}
.lobipanel.panel-unpin.panel-minimized {
  float: left;
  position: static;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  min-width: 170px;
  margin-right: 5px;
}
.lobipanel.panel-unpin.panel-minimized > .panel-heading {
  padding: 0;
  cursor: pointer;
  border-bottom: none;
}
.lobipanel.panel-unpin.panel-minimized > .panel-heading .panel-title {
  max-width: calc(100% - 60px);
}
.lobipanel.panel-unpin.panel-minimized > .panel-heading .panel-title h1,
.lobipanel.panel-unpin.panel-minimized > .panel-heading .panel-title h2,
.lobipanel.panel-unpin.panel-minimized > .panel-heading .panel-title h3,
.lobipanel.panel-unpin.panel-minimized > .panel-heading .panel-title h4,
.lobipanel.panel-unpin.panel-minimized > .panel-heading .panel-title h5,
.lobipanel.panel-unpin.panel-minimized > .panel-heading .panel-title h6 {
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobipanel.panel-unpin.panel-minimized > .panel-heading .dropdown .dropdown-menu {
  position: static;
  display: inline-block;
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
  width: auto;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: transparent;
}
.lobipanel.panel-unpin.panel-minimized > .panel-heading .dropdown .dropdown-menu > li {
  display: inline-block;
}
.lobipanel.panel-unpin.panel-minimized > .panel-heading .dropdown .dropdown-menu > li > a {
  cursor: pointer;
  color: inherit;
  padding: 0;
  outline: 0;
  text-align: center;
  width: 30px;
  font-size: 14px;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.lobipanel.panel-unpin.panel-minimized > .panel-heading .dropdown .dropdown-menu > li > a .panel-control-icon {
  top: 0;
  line-height: 30px;
}
.lobipanel.panel-unpin.panel-minimized > .panel-heading .dropdown .dropdown-menu > li > a .control-title {
  display: none;
}
.lobipanel.panel-unpin.panel-minimized > .panel-heading .dropdown .dropdown-menu > li > a:hover,
.lobipanel.panel-unpin.panel-minimized > .panel-heading .dropdown .dropdown-menu > li > a:focus:hover {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(0, 0, 0, 0.15);
}
.lobipanel.panel-unpin.panel-minimized > .panel-heading .dropdown .dropdown-menu > li > a:focus {
  text-shadow: none;
  background-color: transparent;
}
.lobipanel.panel-unpin.panel-minimized > .panel-heading .dropdown .dropdown-toggle {
  display: none;
}
.lobipanel.panel-unpin.panel-minimized > .panel-heading .dropdown .dropdown-menu > li > a {
  display: none;
}
.lobipanel.panel-unpin.panel-minimized > .panel-heading .dropdown .dropdown-menu > li > a[data-func="close"],
.lobipanel.panel-unpin.panel-minimized > .panel-heading .dropdown .dropdown-menu > li > a[data-func="expand"] {
  display: inline-block;
}
.lobipanel.panel-unpin.panel-minimized > .panel-body,
.lobipanel.panel-unpin.panel-minimized > .panel-footer {
  display: none !important;
}
.lobipanel.panel-expanded > .panel-heading {
  cursor: default;
}
.lobipanel.panel-expanded > .panel-heading .dropdown .dropdown-menu > li > a[data-func="unpin"],
.lobipanel.panel-expanded > .panel-heading .dropdown .dropdown-menu > li > a[data-func="minimize"] {
  display: none;
}
.lobipanel.panel-expanded.panel-unpin > .panel-heading .panel-control[data-func="minimize"] {
  display: block;
}
.lobipanel-minimized-toolbar {
  position: fixed;
  height: 36px;
  padding: 2px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20000;
  background: rgba(34, 115, 182, 0.51);
}
.lobipanel-placeholder {
  background-color: #f9f5d1;
  border: 1px dashed #919191;
  margin-bottom: 15px;
}
.lobipanel-parent-sortable {
  min-height: 20px;
}


/* lib/scrollbar/perfect-scrollbar.css */
/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}


/* css/account/authorization.css */
/**************************************************************************************************
	@author         waterly.eu
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           authorization.css
	@description    Sign-in screen shown when there is no session
**************************************************************************************************/

.authorization-screen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Translucent so the public map stays readable behind the form */
    background: rgba(8, 12, 17, 0.72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    overflow-y: auto;
}

.authorization-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    padding: 28px 26px 26px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background: rgba(24, 32, 40, 0.92);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.authorization-close {
    position: absolute;
    right: 10px;
    top: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #7f8e99;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.authorization-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.authorization-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.authorization-logo img {
    height: 42px;
}

.authorization-title {
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
}

.authorization-subtitle {
    margin-top: 5px;
    margin-bottom: 20px;
    color: #7f8e99;
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
}

.authorization-feedback {
    display: none;
    margin-bottom: 14px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 121, 137, 0.28);
    border-radius: 8px;
    background: rgba(255, 121, 137, 0.1);
    color: #ff9aa6;
    font-size: 11px;
}

.authorization-feedback.is-visible {
    display: block;
}

.authorization-label {
    display: block;
    margin-bottom: 5px;
    color: #8b9aa5;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.authorization-input {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(10, 15, 20, 0.72);
    color: #ffffff;
    font-size: 13px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.authorization-input:focus {
    border-color: rgba(104, 189, 245, 0.55);
    box-shadow: 0 0 0 3px rgba(104, 189, 245, 0.12);
    outline: none;
}

.authorization-password {
    position: relative;
}

.authorization-password .authorization-input {
    padding-right: 44px;
}

.authorization-reveal {
    position: absolute;
    right: 6px;
    top: 4px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #8b9aa5;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

.authorization-reveal:hover,
.authorization-reveal:focus-visible {
    background: rgba(104, 189, 245, 0.1);
    color: #ffffff;
    outline: none;
}

.authorization-submit {
    width: 100%;
    margin-top: 4px;
    padding: 11px 14px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #2f9de0 0%, #1f6fb2 100%);
    color: #ffffff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    transition: filter 0.2s ease;
}

.authorization-submit:hover:not(:disabled) {
    filter: brightness(1.08);
}

.authorization-submit:disabled {
    cursor: default;
    filter: grayscale(0.45) brightness(0.85);
}


/* css/account/configuration.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           configuration.css
**************************************************************************************************/




.no-c2d-data, .no-read-c2d-data {
    font-size: 16px;
    border-top: 1px solid #002F67;
    border-bottom: 1px solid #002F67;
    font-weight: lighter;
    padding: 10px 0 10px 0;
    text-align: center;
    margin-top: 5px;
}

/* css/account/device_settings.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           device_settings.css
**************************************************************************************************/



/* css/account/firmwares.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           firmwares.css
**************************************************************************************************/

/* Tiles firmwares */
.firmwares-tile {
    border-radius: 10px;
    border: 2px dashed #002F67;
    text-decoration: none;
}

/* Tile title */
.firmwares-tile-title {
    font-size: larger;
    font-weight: bold;
    
}

/* Tile version */
.firmwares-tile-version {

}

.upload-container {
    cursor: pointer;
}

.container-firmware-upload {
    display: none;
    height: 100%;
}

.container-firmware-upload.active {
    display: inline-block;
}

/* css/account/floating_button.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           floating_button.css
**************************************************************************************************/

.fab-container {
    /* position: fixed; */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    bottom: 0px;
    left: 5px;
}
.fab-container:hover {
    height: 100%;
}
.fab-container:hover .sub-button:nth-child(2) {
    transform: translateY(-80px);
}
.fab-container:hover .sub-button:nth-child(3) {
    transform: translateY(-140px);
}
.fab-container:hover .sub-button:nth-child(4) {
    transform: translateY(-200px);
}
.fab-container:hover .sub-button:nth-child(5) {
    transform: translateY(-260px);
}
.fab-container:hover .sub-button:nth-child(6) {
    transform: translateY(-320px);
}
.fab-container .fab {
    position: relative;
    height: 70px;
    width: 70px;
    background-color: #28A745;
    border-radius: 50%;
    z-index: 2;
}
.fab-container .fab::before {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 35px;
    width: 35px;
    background-color: inherit;
    border-radius: 0 0 10px 0;
    z-index: -1;
}
.fab-container .fab .fab-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    border-radius: 50%;
}
.fab-container .fab .fab-content .material-icons {
    color: white;
    font-size: 31px;
}
.fab-container .sub-button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 10px;
    right: 10px;
    height: 50px;
    width: 50px;
    background-color: #28A745;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.fab-container .sub-button:hover {
    cursor: pointer;
}
.fab-container .sub-button .material-icons {
    color: white;
    padding-top: 6px;
}

/* css/account/fraction.css */
.fraction {
    display: flex;
    align-content: center;
    flex-direction: column;
}

.fraction-center {
    align-self: center;
}

.fraction-down {
    border-top: 1px solid;
    text-align: center;
}

/* css/account/main.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           main.css
**************************************************************************************************/

html {
	background-color: #212529;
}

body {
	font-family: "Open Sans";
	background-color: #212529;
	color: white;
}

/* css/account/main_frame.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           main_frame.css
**************************************************************************************************/

/* Main navbar website */
.navbar-website {
	position			: relative;
	height				: 60px;
    z-index             : 1019;
	padding				: 10px;
}

/* Main navbar items */
.navbar-website .nav-item {
    cursor              : pointer;
}

/* Main logo navabar */
.navbar-website .logo-text-navbar {
	background-color: #33373B;
	color: #b4bbc2;
	border-radius: 10px;
	cursor: pointer;
}

.navbar-website .logo-text-navbar:hover {
	background-color: #2193F3;
	color: #FFFFFF;
}

.navbar-website .website-logotype-navbar {

}

.navbar-website .logo-text-navbar img {
	height: 40px;
	/* margin-left: -10px; */
}

.navbar-website .website-name-navbar {
    line-height: 40px;
}

.navbar-website ul li.nav-item {
	margin-right: 10px;
}

.navbar-website ul li.nav-item:last-child {
	margin-right: 0px;
}

.navbar-website .nav-link {
	position: relative;
	background-color: #33373B;
	color: #b4bbc2 !important;
	border-radius: 10px;
	height: 40px;
	width: 40px;
	padding: 0;
}

.navbar-website .nav-link.show,
.navbar-website .nav-link:hover {
	background-color: #2193F3;
	color: #FFFFFF !important;
}

.navbar-website .nav-link [data-toggle="dropdown"] {
	height: inherit;
}

.navbar-website .nav-link [data-toggle="dropdown"] i {
	font-size: 20px;
}

.navbar-website .nav-link span.badge {
	right: -5px;
	top: -5px;
	border-radius: 5px;
	width: 18px;
	height: 18px;
	padding: 6px 0 0 0;
	display: none;
	font-size: 10px;
	text-align: center;
	vertical-align: middle;
	line-height: 6px;
}

.navbar-website .nav-link .dropdown-menu {
	border-width: 2px;
	z-index: 1019;
}




/* Menu tree for supages */
.navbar-website .navbar-menu-tree {

}

.navbar-website .navbar-menu-tree .nav-menu-tree-link {
	position: relative;
	background-color: #33373B;
	color: #b4bbc2;
	border-radius: 10px;
	height: 40px;
	cursor: pointer;
}

.navbar-website .nav-menu-tree-link:hover,
.navbar-website .nav-menu-tree-link.show {
	background-color: #2193F3;
	color: #FFFFFF;
}

.navbar-website .navbar-menu-tree .nav-menu-tree-link [data-toggle="dropdown"] {
	height: inherit;
}

.navbar-website .navbar-menu-tree .dropdown-menu {
    background-color: #33373B !important;
    color: #b4bbc2 !important;
	width: 500px;
	border-radius: 10px;
}

.navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-el {

}

.navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-el.active,
.navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-el:hover {
	background-color: #2193F3;
	color: #FFF;
}

.navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-el .dropdown-menu-icon {
	font-size: 16px;
}

.navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-el .dropdown-menu-name {
	font-weight: bold;
}

.navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-el .dropdown-menu-desc {
	font-size: smaller;
}

/* Menu tree for supages - scale  */
@media ( max-width: 767px ) {
	.navbar-website .navbar-menu-tree #show-subpages-list-dropdown span,
    .navbar-website .navbar-menu-tree #show-devices-list-dropdown span {
		display: none;
	}
}

/* Main page content */
.main-container-page {
    position: absolute;
    top: 0;
}

/* Sub-pages content */
.main-container-subpage {
	position: fixed;
    display: none;
    z-index: 1018;
	top: 56px;
    overflow-y: scroll;

    height: calc(100% - 56px);
    height: -o-calc(100% - 56px);
    height: -webkit-calc(100% - 56px);
    height: -moz-calc(100% - 56px);
}

.main-container-subpage > div:first-child {
	/* margin-bottom: 56px !important; */
	padding-top: 15px !important;
}






.language-body {

}

.language-body .user-settings-language {
	/* margin-bottom: 5px; */
}

.language-body .user-settings-language:hover,
.language-body .user-settings-language.selected {
	background-color: #2193F3;
	color: #FFFFFF;
}

.language-body .user-settings-language-icon {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 30px;
	background-color: #33373b;
	color: #FFFFFF;
	text-align: center;
}

.language-body .user-settings-language label {
	padding-left: 5px;
}

/* css/account/management.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           management.css
**************************************************************************************************/

/* Map main contener */
/* .contener-map {} */

/* Map child contener */
/* #main_map_content {} */


/* .devices-list-selector {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 500;
    cursor: pointer;
    font-size: 24px;
    width: 40px;
    height: 40px;
    background-color: #33373B;
    color: #b4bbc2;
    vertical-align: middle;
    border-radius: 10px;
    text-align: center;
    border: #000 0px solid;
    padding-top: 3px;
    margin-top: 50px;
}

.devices-list-selector:hover {
    background-color: #2193F3;
    color: #FFFFFF;
} */





.tiles-list-contener {
    position: absolute;
    display: none;
    z-index: 1020;
    top: 0;
    bottom: 0;
    right: 0px;
    width: 382px;
    overflow: auto;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: transparent;
    overflow-x: hidden;
}

.tiles-list-contener .tiles-list-title {
    color: #FFF;
    border-radius: 15px;
    font-size: 15px;
    line-height: 45px;
}

.tiles-list-contener-control {
    text-align: right;
}

.tiles-list-contener .close-tiles-list-contener.fa-times-circle {
    font-size: 25px;
    background-color: #33373B;
    border-radius: 15px;
    padding: 10px;
    margin-right: 15px;
    color: #b4bbc2 !important;
}

.tiles-list-contener .close-tiles-list-contener.fa-times-circle:hover {
    background-color: #2193f3;
    border-radius: 15px;
    padding: 10px;
    align-items: end;
    margin-right: 15px;
    color: #ffffff !important;
}

.tiles-list-contener .close-tiles-list-contener.fa-chevron-circle-right {
    position: absolute;
    font-size: 24px;
    top: 50%;
    left: -14px;
    margin-top: -14px;
    color: #002F67;
    background-color: #fff;
    border-radius: 50%;
}

/* Container - selected device on map */

.select-tile-contener {
    position: absolute;
    display: none;
    z-index: 1020;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(500px, calc(100vw - 24px));
    height: 100%;
    max-width: 500px;
    max-height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(101, 189, 218, 0.12);
    border-left: 0;
    border-radius: 0 26px 26px 0;
    background:
        radial-gradient(circle at 0 12%, rgba(45, 212, 191, 0.075), transparent 26%),
        radial-gradient(circle at 100% 72%, rgba(56, 189, 248, 0.065), transparent 32%),
        linear-gradient(90deg, rgba(4, 13, 21, 0.9), rgba(5, 15, 24, 0.86) 78%, rgba(6, 19, 29, 0.8));
    box-shadow:
        22px 0 52px -30px rgba(0, 0, 0, 0.98),
        8px 0 24px -18px rgba(56, 189, 248, 0.24),
        inset -1px 0 0 rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(15px) saturate(1.08);
    -webkit-backdrop-filter: blur(15px) saturate(1.08);
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.select-tile-contener::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.select-tile-contener::-webkit-scrollbar-track {
    margin-block: 24px;
    background: transparent;
}

.select-tile-contener::-webkit-scrollbar-thumb {
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
    background-color: transparent;
    transition: background-color 0.24s ease, box-shadow 0.24s ease;
}

.marker-panel-backdrop {
    position: fixed;
    z-index: 1010;
    inset: 0;
    display: none;
    background: rgba(0, 7, 12, 0.58);
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 0.28s ease;
}

.marker-panel-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
}

.marker-panel-scroll-cue {
    position: fixed;
    z-index: 1030;
    display: flex;
    height: 34px;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.marker-panel-scroll-cue.is-visible {
    opacity: 1;
}

.marker-panel-scroll-cue-up {
    border-radius: 0 26px 0 0;
    background: linear-gradient(to bottom, rgba(5, 15, 24, 0.82), rgba(5, 15, 24, 0.24) 58%, transparent);
}

.marker-panel-scroll-cue-down {
    border-radius: 0 0 26px 0;
    background: linear-gradient(to top, rgba(5, 15, 24, 0.82), rgba(5, 15, 24, 0.24) 58%, transparent);
}

.marker-panel-scroll-cue > span {
    display: inline-flex;
    min-width: 22px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    color: #75cfe6;
    background: transparent;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.58);
}

.marker-panel-scroll-cue-up > span {
    margin-top: -6px;
}

.marker-panel-scroll-cue-down > span {
    margin-bottom: -6px;
}

.marker-panel-scroll-cue i {
    font-size: 9px;
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.7));
    animation: marker-panel-scroll-direction 1.45s ease-in-out infinite;
}

.marker-panel-scroll-cue-up i {
    --scroll-cue-direction: -3px;
}

.marker-panel-scroll-cue-down i {
    --scroll-cue-direction: 3px;
}

.marker-panel-scroll-cue small {
    display: none;
}

@keyframes marker-panel-scroll-direction {
    0%, 100% { opacity: 0.55; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(var(--scroll-cue-direction)); }
}

.marker-panel-custom-scrollbar {
    position: fixed;
    z-index: 1032;
    display: none;
    width: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(103, 207, 235, 0.045);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.marker-panel-custom-scrollbar.has-overflow {
    display: block;
}

.marker-panel-custom-scrollbar.is-visible {
    opacity: 1;
}

.marker-panel-custom-scrollbar > i {
    display: block;
    width: 100%;
    min-height: 34px;
    border-radius: inherit;
    background: linear-gradient(
        to bottom,
        rgba(103, 232, 249, 0.18),
        rgba(83, 201, 230, 0.68) 22%,
        rgba(83, 201, 230, 0.68) 78%,
        rgba(103, 232, 249, 0.18)
    );
    box-shadow: 0 0 5px rgba(56, 189, 248, 0.16);
    transition: height 0.12s linear, transform 0.06s linear;
}

.select-tile-contener .marker-main-contener {

}

.select-tile-contener .marker-main-contener .marker-main-header {
    background-color: #33373B;
    color: #b4bbc2;
    height: 100px;
    border-radius: 15px;
}

.select-tile-contener .marker-main-contener .marker-widget-group {
    /* p-0 m-0 my-3 */
    padding: 0;
    margin: 0;
    margin-top: 20px;
    /* margin-bottom: 20px; */
}

.select-tile-contener .marker-main-contener .marker-widget-group .marker-widget-group-item {
    width: 50%;
}

.marker-atmosphere-widget {
    width: 100%;
    margin-bottom: 14px;
}

.marker-atmosphere-card {
    --atmosphere-border: rgba(146, 208, 255, 0.2);
    position: relative;
    overflow: hidden;
    color: #edf8ff;
    border: 1px solid var(--atmosphere-border);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(35, 62, 78, 0.96), rgba(17, 30, 40, 0.98) 55%, rgba(21, 39, 50, 0.97));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.marker-atmosphere-card::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 24px 24px;
    content: "";
    mask-image: linear-gradient(to bottom, black, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.marker-atmosphere-glow {
    position: absolute;
    z-index: 0;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    opacity: 0.19;
}

.marker-atmosphere-glow-hot {
    top: 40px;
    left: -75px;
    background: #ff8c42;
}

.marker-atmosphere-glow-cool {
    right: -70px;
    bottom: -50px;
    background: #22b8ff;
}

.marker-atmosphere-header,
.marker-atmosphere-body,
.marker-atmosphere-action {
    position: relative;
    z-index: 1;
}

.marker-atmosphere-header {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.marker-atmosphere-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.marker-atmosphere-heading-icon {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    color: #ffd166;
    border: 1px solid rgba(255, 209, 102, 0.2);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(255, 209, 102, 0.18), rgba(255, 142, 66, 0.08));
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
    font-size: 17px;
}

.marker-atmosphere-heading strong,
.marker-atmosphere-heading small {
    display: block;
}

.marker-atmosphere-heading strong {
    overflow: hidden;
    max-width: 175px;
    font-size: 14px;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-atmosphere-heading small {
    margin-top: 2px;
    color: #87a2b2;
    font-size: 9px;
    line-height: 11px;
}

.marker-atmosphere-status {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    color: #70e6b5;
    border: 1px solid rgba(70, 230, 181, 0.18);
    border-radius: 999px;
    background: rgba(70, 230, 181, 0.08);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.25px;
    text-transform: uppercase;
}

.marker-atmosphere-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 rgba(70, 230, 181, 0.55);
    animation: marker-atmosphere-pulse 2s infinite;
}

.marker-atmosphere-status.is-stale {
    color: #f5bd68;
    border-color: rgba(245, 189, 104, 0.2);
    background: rgba(245, 189, 104, 0.08);
}

@keyframes marker-atmosphere-pulse {
    70% { box-shadow: 0 0 0 6px rgba(70, 230, 181, 0); }
    100% { box-shadow: 0 0 0 0 rgba(70, 230, 181, 0); }
}

.marker-atmosphere-body {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    min-height: 190px;
}

.select-tile-contener .marker-main-contener .marker-widget-group .marker-atmosphere-widget .marker-widget-group-item {
    width: auto;
}

.marker-atmosphere-temperature,
.marker-atmosphere-metric {
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease;
}

.marker-atmosphere-temperature:hover,
.marker-atmosphere-metric:hover {
    background-color: rgba(71, 183, 255, 0.08);
}

.marker-atmosphere-temperature:active,
.marker-atmosphere-metric:active {
    transform: scale(0.985);
}

.marker-atmosphere-temperature.is-stale,
.marker-atmosphere-metric.is-stale {
    opacity: 0.62;
}

.marker-atmosphere-temperature {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 12px 11px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.marker-atmosphere-temperature-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.marker-atmosphere-thermo-scale {
    position: relative;
    width: 3px;
    height: 84px;
    flex: 0 0 3px;
    border-radius: 3px;
    background: repeating-linear-gradient(to top, rgba(233, 245, 255, 0.28) 0 2px, transparent 2px 7px);
}

.marker-atmosphere-thermo-scale span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--temperature-level);
    border-radius: 3px;
}

.marker-atmosphere-thermo-scale i {
    position: absolute;
    bottom: var(--temperature-level);
    left: 50%;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #ff8a5c;
    box-shadow: 0 0 9px rgba(255, 138, 92, 0.7);
    transform: translate(-50%, 50%);
}

.marker-atmosphere-temperature-copy {
    min-width: 0;
}

.marker-atmosphere-label {
    display: flex;
    overflow: hidden;
    align-items: center;
    gap: 5px;
    color: #9bb1bd;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.marker-atmosphere-label i {
    color: #ffb15d;
}

.marker-atmosphere-big-value {
    margin: 2px 0 3px;
    color: #fff;
    font-size: 38px;
    font-weight: 300;
    line-height: 45px;
    letter-spacing: -2px;
    text-shadow: 0 4px 18px rgba(255, 143, 72, 0.2);
}

.marker-atmosphere-big-value.is-empty {
    color: #ff7b86;
}

.marker-atmosphere-big-value small {
    margin-left: 3px;
    color: #ffbb73;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    vertical-align: top;
}

.marker-atmosphere-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #90a6b4;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.marker-atmosphere-trend.is-up { color: #62dfab; }
.marker-atmosphere-trend.is-down { color: #ff7b86; }

.marker-atmosphere-range {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 17px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    background: rgba(1, 11, 17, 0.22);
}

.marker-atmosphere-range span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    padding: 5px 2px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.marker-atmosphere-range span:last-child {
    border-right: 0;
}

.marker-atmosphere-range small {
    color: #708b9b;
    font-size: 7px;
    line-height: 9px;
}

.marker-atmosphere-range strong {
    color: #dcebf3;
    font-size: 10px;
    line-height: 13px;
}

.marker-atmosphere-secondary {
    display: grid;
    grid-template-rows: 1fr 1fr;
    min-width: 0;
}

.marker-atmosphere-metric {
    min-width: 0;
    padding: 10px;
}

.marker-atmosphere-metric:first-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.marker-atmosphere-metric-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.marker-atmosphere-metric-icon {
    display: flex;
    width: 23px;
    height: 23px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 11px;
}

.marker-atmosphere-humidity .marker-atmosphere-metric-icon {
    color: #5ed3ff;
    background: rgba(54, 190, 244, 0.12);
}

.marker-atmosphere-pressure .marker-atmosphere-metric-icon {
    color: #bca9ff;
    background: rgba(153, 127, 255, 0.12);
}

.marker-atmosphere-metric-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.marker-atmosphere-humidity-ring {
    display: grid;
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#4cc9f0 var(--humidity-level), rgba(76, 201, 240, 0.12) 0);
}

.marker-atmosphere-humidity-ring::before {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #1a2b35;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
    content: "";
}

.marker-atmosphere-humidity-ring span {
    position: absolute;
    color: #f0fbff;
    font-size: 13px;
    font-weight: 700;
}

.marker-atmosphere-humidity-ring small {
    color: #6fd9ff;
    font-size: 7px;
}

.marker-atmosphere-metric-content > div:last-child,
.marker-atmosphere-metric-caption {
    overflow: hidden;
    min-width: 0;
}

.marker-atmosphere-metric-content strong,
.marker-atmosphere-metric-content small,
.marker-atmosphere-metric-caption strong,
.marker-atmosphere-metric-caption small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-atmosphere-metric-content strong,
.marker-atmosphere-metric-caption strong {
    color: #dceaf1;
    font-size: 9px;
    line-height: 12px;
}

.marker-atmosphere-metric-content small,
.marker-atmosphere-metric-caption small {
    color: #708b9b;
    font-size: 8px;
    line-height: 11px;
}

.marker-atmosphere-pressure-value {
    margin-top: -3px;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 27px;
    letter-spacing: -0.8px;
}

.marker-atmosphere-pressure-value small {
    margin-left: 3px;
    color: #bca9ff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0;
}

.marker-atmosphere-pressure-scale {
    position: relative;
    height: 4px;
    margin: 2px 0 5px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(76, 201, 240, 0.35), rgba(188, 169, 255, 0.85), rgba(255, 143, 102, 0.45));
}

.marker-atmosphere-pressure-scale i {
    position: absolute;
    top: 50%;
    left: var(--pressure-level);
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #9e88f5;
    box-shadow: 0 0 9px rgba(158, 136, 245, 0.7);
    transform: translate(-50%, -50%);
}

.marker-atmosphere-action {
    padding: 5px 10px 6px;
    color: #607d8b;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 7px;
    text-align: center;
    text-transform: uppercase;
}

.marker-atmosphere-action i {
    margin-right: 4px;
    color: #4cc9f0;
}

/* Atmosphere widget — compact merged layout: temp + barometer on top, full-width humidity bar below. */
.marker-atmosphere-body {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas:
        "temperature gauge"
        "bar bar";
    grid-template-rows: auto auto;
    min-height: 0;
}

.marker-atmosphere-body.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 218px;
}

.marker-atmosphere-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 20px 12px;
    color: #7d99a9;
}

.marker-atmosphere-empty i {
    color: rgba(245, 189, 104, 0.75);
    font-size: 26px;
    filter: drop-shadow(0 0 10px rgba(245, 189, 104, 0.25));
}

.marker-atmosphere-empty span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.marker-atmosphere-temperature {
    grid-area: temperature;
    justify-content: center;
    padding: 12px 8px 6px 12px;
    border-right: 0;
}

.marker-atmosphere-gauge-metric {
    grid-area: gauge;
}

.marker-atmosphere-bar-metric {
    grid-area: bar;
}

.marker-atmosphere-metric {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.marker-atmosphere-temperature-main {
    gap: 14px;
}

.marker-atmosphere-thermo-scale {
    margin-left: 27px;
}

.marker-atmosphere-thermo-tick {
    position: absolute;
    right: calc(100% + 5px);
    bottom: var(--tick-level);
    display: flex;
    align-items: center;
    gap: 3px;
    color: #8ba4b2;
    font-size: 7px;
    font-style: normal;
    line-height: 8px;
    white-space: nowrap;
    transform: translateY(50%);
}

.marker-atmosphere-thermo-tick::after {
    width: 5px;
    height: 1px;
    background: rgba(229, 245, 255, 0.4);
    content: "";
}

.marker-atmosphere-thermo-tick b {
    font-weight: 700;
}

/* Kolumna obok wartości temperatury: trend nad jednostką. */
.marker-atmosphere-big-value {
    display: flex;
    align-items: stretch;
}

.marker-atmosphere-big-value-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    margin-left: 11px;
    padding: 2px 0 3px;
}

.marker-atmosphere-big-value-side .marker-atmosphere-trend {
    gap: 5px;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.2px;
}

.marker-atmosphere-big-value-side .marker-atmosphere-trend i {
    font-size: 14px;
}

.marker-atmosphere-big-value .marker-atmosphere-big-value-side small {
    margin-left: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 13px;
    vertical-align: baseline;
}

/* Barometr — łuk z igłą i znacznikami min/śr./max. */
.marker-atmosphere-gauge-metric .marker-atmosphere-metric-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 0;
}

.marker-atmosphere-round-gauge {
    position: relative;
    width: 148px;
    height: 148px;
}

.marker-atmosphere-round-gauge .marker-atmosphere-trend {
    justify-content: center;
    margin-top: 2px;
}

.marker-atmosphere-gauge-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.marker-atmosphere-gauge-svg path {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
}

.marker-atmosphere-gauge-svg .dial-tick {
    stroke: rgba(233, 245, 255, 0.16);
    stroke-width: 1;
}

.marker-atmosphere-gauge-svg .gauge-face {
    fill: rgba(6, 18, 26, 0.6);
}

.marker-atmosphere-gauge-svg line {
    stroke: #e8f0ff;
    stroke-width: 1.5;
}

.marker-atmosphere-gauge-svg text {
    fill: #8ba4b2;
    font-size: 8px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

.marker-atmosphere-gauge-value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #dcd6f5;
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
}

.marker-atmosphere-gauge-value em {
    margin-top: 3px;
    color: #7d99a9;
    font-size: 8px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.marker-atmosphere-gauge-value.is-empty {
    color: #ff7b86;
}

.marker-atmosphere-gauge-value small {
    margin-top: 2px;
    color: #8fa9b8;
    font-size: 8px;
    font-weight: 700;
}

/* Wilgotność — niebieski pasek na dole, na całą szerokość. */
.marker-atmosphere-bar-metric {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 4px 14px 6px 12px;
}

.marker-atmosphere-bar-primary {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.marker-atmosphere-bar-icon {
    display: flex;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    color: #5ed3ff;
    border-radius: 8px;
    background: rgba(54, 190, 244, 0.14);
    font-size: 13px;
}

.marker-atmosphere-bar-value {
    flex: 0 0 auto;
    margin: 0;
    color: #4cc9f0;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.8px;
    text-shadow: 0 3px 16px rgba(76, 201, 240, 0.22);
}

.marker-atmosphere-bar-value.is-empty {
    color: #ff7b86;
}

.marker-atmosphere-bar-value small {
    margin-left: 3px;
    color: #6fd9ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
}

.marker-atmosphere-bar-scale {
    position: relative;
    flex: 1 1 auto;
    height: 5px;
    margin: 0 6px 22px 2px;
    align-self: center;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(76, 201, 240, 0.18), rgba(76, 201, 240, 0.95));
}

.marker-atmosphere-bar-scale i {
    position: absolute;
    top: 50%;
    left: var(--marker-level);
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #4cc9f0;
    box-shadow: 0 0 9px rgba(76, 201, 240, 0.7);
    transform: translate(-50%, -50%);
}

.marker-atmosphere-scale-tick {
    position: absolute;
    top: 100%;
    left: var(--tick-level);
    display: flex;
    align-items: baseline;
    gap: 3px;
    padding: 2px 6px;
    margin-top: 7px;
    border: 1px solid rgba(109, 213, 237, 0.18);
    border-radius: 7px;
    background: rgba(2, 18, 27, 0.72);
    font-style: normal;
    white-space: nowrap;
    transform: translateX(-50%);
}

.marker-atmosphere-scale-tick::before {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 2px;
    height: 5px;
    border-radius: 2px;
    background: rgba(232, 247, 255, 0.65);
    content: "";
    transform: translateX(-50%);
}

.marker-atmosphere-scale-tick small {
    color: #7fa3b5;
    font-size: 7px;
    line-height: 9px;
    letter-spacing: 0.3px;
}

.marker-atmosphere-scale-tick b {
    color: #a9e4fb;
    font-size: 9px;
    font-weight: 700;
    line-height: 10px;
}

/* Atmosphere 2-in-1: two vertical gauges above a full-width pressure gradient. */
.marker-atmosphere-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "temperature humidity"
        "pressure pressure";
    grid-template-rows: 184px 108px;
}

.marker-atmosphere-temperature {
    min-height: 184px;
    padding: 14px 12px 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.marker-atmosphere-temperature-main {
    justify-content: center;
    gap: 17px;
}

.marker-atmosphere-thermo-scale {
    width: 5px;
    height: 118px;
    flex-basis: 5px;
    margin-left: 30px;
    background: rgba(255, 255, 255, 0.06);
}

.marker-atmosphere-thermo-scale span {
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(255, 145, 83, 0.24);
}

.marker-atmosphere-thermo-scale i {
    width: 12px;
    height: 12px;
    border-width: 3px;
}

.marker-atmosphere-thermo-tick {
    right: calc(100% + 7px);
    font-size: 9px;
    line-height: 11px;
}

.marker-atmosphere-thermo-tick b {
    font-size: 13px;
    font-weight: 800;
    line-height: 15px;
    text-shadow: 0 0 9px currentColor;
}

.marker-atmosphere-big-value {
    font-weight: 400;
    text-shadow: 0 4px 20px currentColor;
}

.marker-atmosphere-humidity-metric {
    grid-area: humidity;
    min-height: 184px;
    padding: 14px 12px 10px;
}

.marker-atmosphere-humidity-main {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.marker-atmosphere-humidity-copy {
    display: flex;
    min-width: 70px;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.marker-atmosphere-humidity-value {
    color: #5edcff;
    font-size: 40px;
    font-weight: 500;
    line-height: 44px;
    letter-spacing: -1.8px;
    text-shadow: 0 4px 20px rgba(94, 220, 255, 0.3);
}

.marker-atmosphere-humidity-value.is-empty {
    color: #ff7b86;
}

.marker-atmosphere-humidity-value small {
    margin-left: 3px;
    color: #7ce5ff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: top;
}

.marker-atmosphere-humidity-copy .marker-atmosphere-trend {
    font-size: 10px;
}

.marker-atmosphere-humidity-scale {
    position: relative;
    width: 5px;
    height: 118px;
    flex: 0 0 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
}

.marker-atmosphere-humidity-scale > span {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: linear-gradient(to top, #2450a8 0%, #238fc7 48%, #63ecff 100%);
    box-shadow: 0 0 12px rgba(76, 201, 240, 0.28);
}

.marker-atmosphere-humidity-scale > i {
    position: absolute;
    z-index: 2;
    bottom: var(--humidity-level);
    left: 50%;
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 12px #fff, 0 0 18px rgba(76, 201, 240, 0.95);
    transform: translate(-50%, 50%);
}

.marker-atmosphere-humidity-tick {
    position: absolute;
    bottom: var(--tick-level);
    left: calc(100% + 8px);
    display: flex;
    align-items: center;
    gap: 4px;
    color: #8bdff5;
    font-size: 9px;
    font-style: normal;
    line-height: 11px;
    white-space: nowrap;
    transform: translateY(50%);
}

.marker-atmosphere-humidity-tick::before {
    width: 5px;
    height: 1px;
    background: rgba(163, 231, 249, 0.5);
    content: "";
}

.marker-atmosphere-humidity-tick b {
    font-size: 11px;
    font-weight: 700;
    line-height: 13px;
}

.marker-atmosphere-pressure-metric {
    display: flex;
    min-height: 108px;
    flex-direction: column;
    grid-area: pressure;
    justify-content: center;
    padding: 11px 16px 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.marker-atmosphere-pressure-summary {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.marker-atmosphere-pressure-primary {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
}

.marker-atmosphere-pressure-value {
    margin: 0;
    color: #ceb1ff;
    font-size: 31px;
    font-weight: 650;
    line-height: 36px;
    letter-spacing: -1px;
    text-shadow: 0 4px 18px rgba(199, 160, 255, 0.25);
}

.marker-atmosphere-pressure-value.is-empty {
    color: #ff7b86;
}

.marker-atmosphere-pressure-value small {
    margin-left: 4px;
    color: #b995f6;
    font-size: 11px;
}

.marker-atmosphere-pressure-stats {
    display: grid;
    overflow: hidden;
    grid-template-columns: repeat(3, minmax(48px, 1fr));
    border: 1px solid rgba(202, 171, 255, 0.13);
    border-radius: 9px;
    background: rgba(137, 105, 205, 0.07);
}

.marker-atmosphere-pressure-stats span {
    display: flex;
    min-width: 48px;
    flex-direction: column;
    align-items: center;
    padding: 4px 7px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.marker-atmosphere-pressure-stats span:last-child {
    border-right: 0;
}

.marker-atmosphere-pressure-stats small {
    color: #746d91;
    font-size: 7px;
    line-height: 9px;
}

.marker-atmosphere-pressure-stats strong {
    margin-top: 1px;
    color: #ded7f5;
    font-size: 11px;
    line-height: 13px;
}

.marker-atmosphere-pressure-gradient {
    position: relative;
    width: 100%;
    height: 8px;
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #45dcf4 0%, #62cfea 24%, #9aaeff 48%, #cf8ee7 73%, #f4609e 100%);
    box-shadow: 0 0 14px rgba(150, 155, 255, 0.2);
}

.marker-atmosphere-pressure-gradient i {
    position: absolute;
    top: 50%;
    left: var(--pressure-level);
    width: 15px;
    height: 15px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px #fff, 0 0 18px rgba(207, 142, 231, 0.85);
    transform: translate(-50%, -50%);
}

/* Final compact layout: temperature and humidity stacked beside the barometer. */
.marker-atmosphere-body {
    grid-template-columns: minmax(0, 1.18fr) minmax(184px, 0.82fr);
    grid-template-areas: "readings gauge";
    grid-template-rows: 196px;
    min-height: 196px;
}

.marker-atmosphere-readings {
    display: grid;
    min-width: 0;
    grid-area: readings;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.select-tile-contener .marker-main-contener .marker-widget-group .marker-atmosphere-readings .marker-widget-group-item {
    width: 100%;
    grid-area: auto;
    justify-self: stretch;
}

.marker-atmosphere-readings .marker-atmosphere-temperature,
.marker-atmosphere-readings .marker-atmosphere-humidity-metric {
    min-height: 0;
    padding: 7px 12px;
    border: 0;
}

.marker-atmosphere-readings .marker-atmosphere-temperature {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.marker-atmosphere-readings .marker-atmosphere-temperature-main,
.marker-atmosphere-readings .marker-atmosphere-humidity-main {
    height: 100%;
    justify-content: center;
    gap: 18px;
}

.marker-atmosphere-readings .marker-atmosphere-thermo-scale,
.marker-atmosphere-readings .marker-atmosphere-humidity-scale {
    width: 5px;
    height: 74px;
    flex: 0 0 5px;
    margin-left: 35px;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-scale {
    order: -1;
}

.marker-atmosphere-readings .marker-atmosphere-big-value,
.marker-atmosphere-readings .marker-atmosphere-humidity-value {
    font-size: 38px;
    line-height: 42px;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-copy,
.marker-atmosphere-readings .marker-atmosphere-temperature-copy {
    min-width: 94px;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-copy {
    gap: 2px;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-tick {
    right: calc(100% + 7px);
    left: auto;
    flex-direction: row-reverse;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-tick::before {
    flex: 0 0 5px;
}

.marker-atmosphere-gauge-metric {
    display: flex;
    width: 100%;
    min-height: 196px;
    align-items: center;
    grid-area: gauge;
    justify-content: center;
    padding: 3px 6px;
    border: 0;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-metric-content {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-round-gauge {
    width: 184px;
    height: 184px;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-svg path {
    stroke-width: 6.5;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-svg .gauge-face {
    fill: rgba(10, 14, 31, 0.72);
    stroke: rgba(176, 151, 255, 0.08);
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-value {
    font-size: 27px;
    text-shadow: 0 0 18px currentColor;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-value small {
    color: #bba7f4;
    font-size: 9px;
}

/* Combined atmosphere readout: scales on the outside, values stacked in the middle. */
.marker-atmosphere-readings {
    grid-template-columns: 76px minmax(116px, 1fr) 52px;
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.select-tile-contener .marker-main-contener .marker-widget-group .marker-atmosphere-readings .marker-widget-group-item,
.marker-atmosphere-readings .marker-atmosphere-temperature-main,
.marker-atmosphere-readings .marker-atmosphere-humidity-main {
    display: contents;
}

.marker-atmosphere-readings .marker-atmosphere-thermo-scale {
    width: 5px;
    height: 142px;
    align-self: center;
    grid-column: 1;
    grid-row: 1 / 3;
    justify-self: end;
    margin: 0 9px 0 0;
}

.marker-atmosphere-readings .marker-atmosphere-temperature-copy {
    align-self: end;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    padding-bottom: 4px;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-copy {
    align-self: start;
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    padding-top: 4px;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-scale {
    width: 5px;
    height: 142px;
    align-self: center;
    grid-column: 3;
    grid-row: 1 / 3;
    justify-self: start;
    order: initial;
    margin: 0 0 0 9px;
}

.marker-atmosphere-readings .marker-atmosphere-big-value,
.marker-atmosphere-readings .marker-atmosphere-humidity-value {
    font-size: 38px;
    line-height: 40px;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-copy .marker-atmosphere-trend {
    align-self: center;
}

/* Reference layout: temperature with humidity below, barometer on the right. */
.marker-atmosphere-body {
    grid-template-columns: minmax(0, 1.14fr) minmax(188px, 0.86fr);
    grid-template-areas: "temperature gauge";
    grid-template-rows: 178px;
    min-height: 178px;
}

.select-tile-contener .marker-main-contener .marker-widget-group .marker-atmosphere-temperature,
.select-tile-contener .marker-main-contener .marker-widget-group .marker-atmosphere-gauge-metric {
    width: 100%;
}

.marker-atmosphere-temperature {
    min-height: 178px;
    grid-area: temperature;
    padding: 13px 10px 11px;
    border-right: 1px solid rgba(92, 194, 222, 0.12);
}

.marker-atmosphere-temperature-main {
    height: 100%;
    justify-content: center;
    gap: 22px;
}

.marker-atmosphere-temperature .marker-atmosphere-thermo-scale {
    width: 5px;
    height: 132px;
    flex: 0 0 5px;
    margin-left: 39px;
}

.marker-atmosphere-temperature-copy {
    display: flex;
    min-width: 128px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.marker-atmosphere-temperature .marker-atmosphere-big-value {
    font-size: 50px;
    font-weight: 400;
    line-height: 54px;
    letter-spacing: -2.2px;
}

.marker-atmosphere-temperature .marker-atmosphere-big-value-side {
    margin-left: 7px;
    padding-bottom: 7px;
    justify-content: flex-end;
}

.marker-atmosphere-temperature .marker-atmosphere-big-value .marker-atmosphere-big-value-side small {
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
}

.marker-atmosphere-reference-humidity {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
    padding-left: 3px;
    white-space: nowrap;
}

.marker-atmosphere-reference-humidity span {
    color: #728d9c;
    font-size: 9px;
    font-weight: 600;
}

.marker-atmosphere-reference-humidity strong {
    color: #55d9f2;
    font-size: 12px;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(85, 217, 242, 0.32);
}

.marker-atmosphere-reference-humidity.is-stale {
    opacity: 0.52;
}

.marker-atmosphere-gauge-metric {
    min-height: 178px;
    padding: 2px 5px;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-round-gauge {
    width: 174px;
    height: 174px;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-svg .gauge-face {
    fill: rgba(2, 23, 31, 0.74);
    stroke: rgba(95, 224, 187, 0.1);
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-value {
    font-size: 27px;
    text-shadow: 0 0 17px currentColor;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-value small {
    color: #9bcf91;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-value em {
    margin-top: 4px;
    color: #5e7c87;
    font-size: 8px;
}

/* Refined Glass — interior ported from the standalone weather widget. */
.marker-atmosphere-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.72), rgba(11, 16, 28, 0.95));
    box-shadow:
        0 30px 60px -15px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.marker-atmosphere-body {
    display: block;
    min-height: 196px;
}

.marker-atmosphere-glass-grid {
    position: relative;
    z-index: 2;
    display: grid;
    width: 100%;
    height: 196px;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    padding: 0 12px;
}

.marker-atmosphere-glass-temperature,
.marker-atmosphere-glass-humidity,
.marker-atmosphere-glass-pressure {
    min-width: 0;
}

.marker-atmosphere-glass-temperature {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 7px 0 2px;
}

.marker-atmosphere-glass-thermometer {
    position: relative;
    overflow: hidden;
    width: 9px;
    height: 70px;
    flex: 0 0 9px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 999px;
    background: rgba(8, 12, 22, 0.86);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.7);
}

.marker-atmosphere-glass-thermometer > span {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #3b82f6 0%, #22c55e 34.5%, #facc15 65.5%, #ef4444 86.2%, #c026d3 100%);
}

.marker-atmosphere-glass-thermometer > b {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    background: rgba(8, 12, 22, 0.86);
}

.marker-atmosphere-glass-thermometer > i {
    position: absolute;
    z-index: 2;
    right: -1px;
    left: -1px;
    height: 2.5px;
    border-radius: 999px;
    background: #fff;
}

.marker-atmosphere-glass-copy > small,
.marker-atmosphere-glass-pressure > small,
.marker-atmosphere-glass-ring-value > small {
    color: #64748b;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.marker-atmosphere-glass-value {
    display: flex;
    align-items: flex-end;
    margin-top: 5px;
    color: #fff;
    font-weight: 700;
    line-height: 0.9;
    transition: transform 0.35s ease;
    transform-origin: left center;
}

.marker-atmosphere-glass-value strong {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -1.2px;
}

.marker-atmosphere-glass-value span {
    margin: 0 0 3px 3px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
}

.marker-atmosphere-glass-value.is-empty {
    color: #ff7b86;
}

.marker-atmosphere-glass-copy .marker-atmosphere-trend,
.marker-atmosphere-glass-pressure .marker-atmosphere-trend {
    margin-top: 6px;
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.marker-atmosphere-glass-range,
.marker-atmosphere-glass-pressure-range {
    opacity: 0;
    color: #94a3b8;
    font-size: 9px;
    transition: opacity 0.35s ease;
}

.marker-atmosphere-glass-range {
    display: flex;
    gap: 8px;
    margin-top: 7px;
    line-height: 1.5;
    white-space: nowrap;
}

.marker-atmosphere-glass-range.is-centered {
    justify-content: center;
    margin-top: 2px;
}

.marker-atmosphere-card:hover .marker-atmosphere-glass-range,
.marker-atmosphere-card:hover .marker-atmosphere-glass-pressure-range {
    opacity: 1;
}

.marker-atmosphere-card:hover .marker-atmosphere-glass-value {
    transform: scale(0.9);
}

.marker-atmosphere-glass-divider {
    width: 1px;
    height: 88px;
    background: linear-gradient(to bottom, transparent, rgba(148, 163, 184, 0.3), transparent);
}

.marker-atmosphere-glass-humidity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.marker-atmosphere-glass-ring {
    position: relative;
    width: 96px;
    height: 96px;
}

.marker-atmosphere-glass-ring svg {
    position: absolute;
    inset: 0;
    width: 96px;
    height: 96px;
}

.marker-atmosphere-glass-ring .ring-track,
.marker-atmosphere-glass-ring .ring-fill {
    fill: none;
    stroke-linecap: round;
    stroke-width: 8;
    transform: rotate(135deg);
    transform-origin: 50px 50px;
}

.marker-atmosphere-glass-ring .ring-track {
    stroke: #1e293b;
    stroke-dasharray: 188.5 251.33;
}

.marker-atmosphere-glass-ring .ring-fill {
    stroke: url(#markerAtmosphereHumidityGradient);
    filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.5));
}

.marker-atmosphere-glass-ring .ring-dot {
    transform-origin: 50px 50px;
}

.marker-atmosphere-glass-ring .ring-dot circle {
    fill: #fff;
    stroke: #38bdf8;
    stroke-width: 2;
}

.marker-atmosphere-glass-ring-value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.marker-atmosphere-glass-ring-value > small {
    margin-bottom: 1px;
    letter-spacing: 0.12em;
}

.marker-atmosphere-glass-ring-value > div {
    display: flex;
    align-items: baseline;
    color: #fff;
    font-weight: 700;
    line-height: 0.9;
}

.marker-atmosphere-glass-ring-value strong {
    font-size: 30px;
}

.marker-atmosphere-glass-ring-value span {
    margin-left: 1px;
    color: #60a5fa;
    font-size: 13px;
}

.marker-atmosphere-glass-pressure {
    padding: 0 2px 0 8px;
}

.marker-atmosphere-glass-pressure-scale {
    position: relative;
    width: 100%;
    height: 7px;
    margin-top: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ec4899 0%, #22c55e 63.25%, #ec4899 100%);
    opacity: 0.9;
}

.marker-atmosphere-glass-pressure-scale > span,
.marker-atmosphere-glass-pressure-scale > b,
.marker-atmosphere-glass-pressure-scale > em,
.marker-atmosphere-glass-pressure-scale > i {
    position: absolute;
}

.marker-atmosphere-glass-pressure-scale > span {
    inset: 0;
    border-radius: inherit;
}

.marker-atmosphere-glass-pressure-scale > b {
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.4);
    filter: blur(1px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.marker-atmosphere-glass-pressure-scale > em {
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.35s ease;
}

.marker-atmosphere-glass-pressure-scale > i {
    z-index: 3;
    top: 50%;
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

.marker-atmosphere-card:hover .marker-atmosphere-glass-pressure-scale > b,
.marker-atmosphere-card:hover .marker-atmosphere-glass-pressure-scale > em {
    opacity: 1;
}

.marker-atmosphere-glass-pressure-range {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 8.5px;
}

.marker-atmosphere-glass-temperature.is-stale,
.marker-atmosphere-glass-humidity.is-stale,
.marker-atmosphere-glass-pressure.is-stale {
    opacity: 0.52;
}

/* 1c — Minimal Dashboard from the standalone widget. */
.marker-atmosphere-card {
    border: 1px solid rgba(109, 213, 237, 0.2);
    border-radius: 19px;
    background:
        radial-gradient(circle at 8% 10%, rgba(251, 146, 60, 0.1), transparent 28%),
        radial-gradient(circle at 94% 92%, rgba(59, 130, 246, 0.13), transparent 34%),
        linear-gradient(138deg, rgba(25, 39, 52, 0.96), rgba(7, 15, 24, 0.98));
    box-shadow:
        0 22px 46px -18px rgba(0, 0, 0, 0.78),
        0 0 28px rgba(42, 154, 196, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.marker-atmosphere-card::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(115, 190, 214, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(115, 190, 214, 0.09) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    content: "";
    mask-image: linear-gradient(to bottom, black, transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.marker-atmosphere-glow {
    display: block;
    opacity: 0.7;
}

.marker-atmosphere-minimal-header {
    min-height: 64px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(109, 213, 237, 0.1);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent);
}

.marker-atmosphere-minimal-header .marker-atmosphere-heading strong {
    color: #f3fbff;
    font-size: 14px;
    letter-spacing: 0.01em;
}

.marker-atmosphere-minimal-header .marker-atmosphere-heading small {
    display: block;
    margin-top: 3px;
    color: #7894a3;
    font-size: 9px;
}

.marker-atmosphere-minimal-header .marker-atmosphere-heading small i {
    margin-right: 3px;
    color: #6ea7ba;
}

.marker-atmosphere-minimal-header .marker-atmosphere-heading-icon {
    border-color: rgba(251, 191, 36, 0.28);
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.14), rgba(251, 146, 60, 0.05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 16px rgba(251, 191, 36, 0.08);
}

.marker-atmosphere-minimal-header .marker-atmosphere-status {
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid rgba(52, 211, 153, 0.28);
    border-radius: 999px;
    background: rgba(6, 78, 59, 0.26);
    color: #53ddb0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 14px rgba(52, 211, 153, 0.08);
}

.marker-atmosphere-minimal-header .marker-atmosphere-status i {
    width: 6px;
    height: 6px;
    background: #34d399;
}

.marker-atmosphere-minimal-header .marker-atmosphere-status.is-stale {
    border-color: rgba(251, 191, 36, 0.34);
    background: rgba(120, 78, 8, 0.24);
    color: #fbbf24;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 15px rgba(251, 191, 36, 0.1);
}

.marker-atmosphere-minimal-header .marker-atmosphere-status.is-stale i {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #fbbf24;
    font-size: 10px;
    box-shadow: none;
    animation: none;
}

.marker-atmosphere-body {
    min-height: 150px;
}

.marker-atmosphere-minimal-grid {
    position: relative;
    z-index: 2;
    display: grid;
    height: 150px;
    align-content: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 20px 10px 0;
}

.marker-atmosphere-minimal-metric {
    min-width: 0;
}

.marker-atmosphere-minimal-metric + .marker-atmosphere-minimal-metric {
    padding-left: 9px;
    border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.marker-atmosphere-minimal-label {
    display: flex;
    min-height: 24px;
    align-items: flex-start;
    justify-content: space-between;
}

.marker-atmosphere-minimal-label > span:first-child {
    padding-top: 1px;
    color: #64748b;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.marker-atmosphere-minimal-trend {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 24px;
    flex-direction: column;
    align-items: center;
    padding: 0 1px;
    color: #64748b;
    white-space: nowrap;
}

.marker-atmosphere-minimal-trend svg {
    width: 22px;
    height: 18px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px currentColor);
}

.marker-atmosphere-minimal-trend b {
    position: absolute;
    z-index: 4;
    top: 19px;
    right: 0;
    overflow: hidden;
    max-height: 0;
    padding: 0 2px;
    border-radius: 3px;
    background: rgba(7, 15, 24, 0.9);
    opacity: 0;
    font-size: 7px;
    font-weight: 800;
    line-height: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: translateY(-3px);
    transition: opacity 0.18s ease, transform 0.18s ease, max-height 0.18s ease;
}

.marker-atmosphere-card:hover .marker-atmosphere-minimal-trend b,
.marker-atmosphere-widget:hover .marker-atmosphere-minimal-trend b,
.marker-atmosphere-widget.is-details-visible .marker-atmosphere-minimal-trend b,
.marker-atmosphere-minimal-metric:hover .marker-atmosphere-minimal-trend b {
    max-height: 12px;
    opacity: 1;
    transform: translateY(0);
}

.marker-atmosphere-minimal-trend.is-up {
    color: #34d399;
}

.marker-atmosphere-minimal-trend.is-down {
    color: #fb7185;
}

.marker-atmosphere-minimal-value {
    display: flex;
    height: 35px;
    align-items: flex-start;
    margin-top: 6px;
    color: #f8fafc;
    font-weight: 700;
    line-height: 0.9;
    transition:
        height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: left top;
}

.marker-atmosphere-minimal-value strong {
    font-size: 39px;
    font-weight: 700;
    letter-spacing: -1.7px;
}

.marker-atmosphere-minimal-value span {
    margin: 3px 0 0 3px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.marker-atmosphere-minimal-metric:last-child .marker-atmosphere-minimal-value {
    align-items: flex-end;
}

.marker-atmosphere-minimal-metric:last-child .marker-atmosphere-minimal-value span {
    margin: 0 0 2px 3px;
    font-size: 11px;
}

.marker-atmosphere-minimal-value.is-empty {
    color: #ff7b86;
}

.marker-atmosphere-minimal-scale {
    position: relative;
    width: 100%;
    height: 6px;
    margin-top: 16px;
    overflow: visible;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
    opacity: 0.92;
}

.marker-atmosphere-minimal-scale.is-temperature {
    background: linear-gradient(90deg, #3b82f6 0%, #22c55e 34.5%, #facc15 65.5%, #ef4444 86.2%, #c026d3 100%);
}

.marker-atmosphere-minimal-scale.is-humidity {
    background: linear-gradient(90deg, #64748b 0%, #3b82f6 100%);
}

.marker-atmosphere-minimal-scale.is-pressure {
    background: linear-gradient(90deg, #38bdf8 0%, #34d399 63.25%, #fbbf24 100%);
}

.marker-atmosphere-minimal-scale > b,
.marker-atmosphere-minimal-scale > em,
.marker-atmosphere-minimal-scale > i {
    position: absolute;
}

.marker-atmosphere-minimal-scale > b,
.marker-atmosphere-minimal-scale > em {
    top: -3px;
    bottom: -3px;
    width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.55);
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.35s ease;
}

.marker-atmosphere-minimal-scale > i {
    z-index: 3;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

.marker-atmosphere-minimal-scale.is-humidity > i {
    border-color: #3b82f6;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.85), 0 0 3px rgba(255, 255, 255, 0.9);
}

.marker-atmosphere-minimal-stats {
    display: grid;
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    opacity: 0;
    text-align: center;
    transform: translateY(-4px);
    transition:
        max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        margin-top 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-atmosphere-minimal-stats > span {
    min-width: 0;
    padding: 0 3px;
}

.marker-atmosphere-minimal-stats > span + span {
    border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.marker-atmosphere-minimal-stats small,
.marker-atmosphere-minimal-stats strong {
    display: block;
}

.marker-atmosphere-minimal-stats small {
    overflow: hidden;
    color: #475569;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.marker-atmosphere-minimal-stats strong {
    margin-top: 3px;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
}

.marker-atmosphere-card:hover .marker-atmosphere-minimal-value,
.marker-atmosphere-widget:hover .marker-atmosphere-minimal-value,
.marker-atmosphere-widget.is-details-visible .marker-atmosphere-minimal-value,
.marker-atmosphere-minimal-metric:hover .marker-atmosphere-minimal-value {
    height: 28px;
    transform: translateY(2px) scale(0.76);
}

.marker-atmosphere-card:hover .marker-atmosphere-minimal-scale > b,
.marker-atmosphere-card:hover .marker-atmosphere-minimal-scale > em,
.marker-atmosphere-widget:hover .marker-atmosphere-minimal-scale > b,
.marker-atmosphere-widget:hover .marker-atmosphere-minimal-scale > em,
.marker-atmosphere-widget.is-details-visible .marker-atmosphere-minimal-scale > b,
.marker-atmosphere-widget.is-details-visible .marker-atmosphere-minimal-scale > em,
.marker-atmosphere-minimal-metric:hover .marker-atmosphere-minimal-scale > b,
.marker-atmosphere-minimal-metric:hover .marker-atmosphere-minimal-scale > em {
    opacity: 1;
}

.marker-atmosphere-card:hover .marker-atmosphere-minimal-stats,
.marker-atmosphere-widget:hover .marker-atmosphere-minimal-stats,
.marker-atmosphere-widget.is-details-visible .marker-atmosphere-minimal-stats,
.marker-atmosphere-minimal-metric:hover .marker-atmosphere-minimal-stats {
    max-height: 34px;
    margin-top: 7px;
    opacity: 1;
    transform: translateY(0);
}

.marker-atmosphere-minimal-metric.is-stale {
    opacity: 0.52;
}

@media (max-width: 767px) {
    .marker-atmosphere-body {
        display: block;
        min-height: 0;
    }

    .marker-atmosphere-glass-grid {
        height: auto;
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .marker-atmosphere-glass-divider {
        width: 100%;
        height: 1px;
        margin: 10px 0;
        background: linear-gradient(to right, transparent, rgba(148, 163, 184, 0.3), transparent);
    }

    .marker-atmosphere-minimal-grid {
        height: auto;
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 14px 18px;
    }

    .marker-atmosphere-minimal-metric + .marker-atmosphere-minimal-metric {
        padding-top: 18px;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.09);
        border-left: 0;
    }

    .marker-atmosphere-minimal-stats {
        max-height: 32px;
        margin-top: 10px;
        opacity: 1;
        transform: none;
    }

    .marker-atmosphere-temperature {
        padding-right: 12px;
    }

    .marker-atmosphere-metric {
        padding-right: 12px;
        padding-left: 12px;
    }
}

/* Map widgets loading experience */
.marker-main-contener {
    position: relative;
}

.select-tile-contener .marker-main-contener.is-loading {
    display: flex;
    min-height: 100%;
    box-sizing: border-box;
    flex-direction: column;
}

.marker-main-contener.is-loading > :not(.marker-main-contener-control):not(.marker-wait-for-data) {
    display: none !important;
}

.marker-wait-for-data {
    position: relative;
    isolation: isolate;
    display: flex;
    width: 100%;
    min-height: 500px;
    box-sizing: border-box;
    overflow: hidden;
    flex-direction: column;
    padding: 22px;
    border: 1px solid rgba(93, 207, 238, 0.22);
    border-radius: 22px;
    color: #eafaff;
    background:
        linear-gradient(rgba(125, 211, 252, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 15% 8%, rgba(45, 212, 191, 0.14), transparent 29%),
        radial-gradient(circle at 90% 72%, rgba(56, 189, 248, 0.13), transparent 34%),
        linear-gradient(145deg, rgba(15, 36, 49, 0.99), rgba(4, 13, 22, 0.995) 66%, rgba(7, 25, 36, 0.99));
    background-size: 28px 28px, 28px 28px, auto, auto, auto;
    box-shadow:
        0 28px 58px -28px rgba(0, 0, 0, 0.92),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    opacity: 1;
    transition: opacity 0.42s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.42s ease;
}

.select-tile-contener .marker-main-contener.is-loading > .marker-wait-for-data {
    min-height: 0;
    flex: 1 1 auto;
}

.marker-main-contener:not(.is-loading) > .marker-wait-for-data {
    position: absolute;
    z-index: 40;
    inset: 0;
    min-height: 100%;
}

.marker-wait-for-data.is-complete {
    filter: blur(7px);
    opacity: 0;
    pointer-events: none;
    transform: scale(1.025);
}

.marker-loading-ambient {
    position: absolute;
    z-index: -1;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(94, 234, 212, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.marker-loading-ambient-one {
    top: -110px;
    left: -82px;
    box-shadow:
        0 0 0 28px rgba(45, 212, 191, 0.025),
        0 0 0 58px rgba(45, 212, 191, 0.015);
    animation: marker-loading-orbit 7s linear infinite;
}

.marker-loading-ambient-two {
    right: -118px;
    bottom: -95px;
    border-color: rgba(56, 189, 248, 0.12);
    box-shadow:
        0 0 0 34px rgba(56, 189, 248, 0.024),
        0 0 0 70px rgba(56, 189, 248, 0.012);
    animation: marker-loading-orbit 9s linear infinite reverse;
}

.marker-loading-header {
    position: relative;
    display: grid;
    min-height: 74px;
    align-items: center;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 13px;
}

.marker-loading-beacon {
    position: relative;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(94, 234, 212, 0.22);
    border-radius: 50%;
    color: #5eead4;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.14), rgba(6, 25, 34, 0.92) 66%);
    box-shadow: 0 0 24px rgba(45, 212, 191, 0.12);
}

.marker-loading-beacon > i {
    position: relative;
    z-index: 2;
    font-size: 17px;
    filter: drop-shadow(0 0 6px rgba(94, 234, 212, 0.65));
    animation: marker-loading-drop 1.8s ease-in-out infinite;
}

.marker-loading-beacon > b {
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(94, 234, 212, 0.36);
    border-radius: inherit;
    opacity: 0;
    animation: marker-loading-sonar 2.4s ease-out infinite;
}

.marker-loading-beacon > b:last-child {
    animation-delay: 1.2s;
}

.marker-loading-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.marker-loading-copy > small {
    color: #5eead4;
    font-size: 7px;
    font-weight: 750;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.marker-loading-copy sup {
    position: relative;
    top: -0.18em;
    color: #38bdf8;
    font-size: 0.66em;
}

.marker-loading-copy > strong {
    margin-top: 4px;
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -0.025em;
}

.marker-loading-copy > em {
    position: relative;
    display: block;
    height: 15px;
    margin-top: 4px;
    overflow: hidden;
    color: #7393a2;
    font-size: 9px;
    font-style: normal;
}

.marker-loading-copy > em > span {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(8px);
    animation: marker-loading-message 6s ease-in-out infinite;
}

.marker-loading-copy > em > span:nth-child(2) { animation-delay: 2s; }
.marker-loading-copy > em > span:nth-child(3) { animation-delay: 4s; }

.marker-loading-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border: 1px solid rgba(56, 189, 248, 0.14);
    border-radius: 999px;
    color: #6f91a0;
    background: rgba(56, 189, 248, 0.055);
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.marker-loading-live > i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
    animation: marker-loading-live 1.4s ease-in-out infinite;
}

.marker-loading-hero {
    position: relative;
    display: grid;
    min-height: 180px;
    align-items: center;
    margin-top: 15px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, 0.1);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 20px;
}

.marker-loading-hero::after,
.marker-loading-grid > span::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(191, 239, 255, 0.075), transparent);
    content: "";
    pointer-events: none;
    transform: skewX(-14deg);
    animation: marker-loading-shimmer 1.9s ease-in-out infinite;
}

.marker-loading-gauge {
    position: relative;
    display: grid;
    width: 108px;
    height: 108px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from -38deg, #2dd4bf, #38bdf8 30%, rgba(96, 165, 250, 0.08) 31% 82%, #2dd4bf 84%, #38bdf8);
    box-shadow: 0 0 28px rgba(56, 189, 248, 0.12);
    animation: marker-loading-gauge 3.2s ease-in-out infinite;
}

.marker-loading-gauge::before {
    position: absolute;
    inset: 8px;
    border-radius: inherit;
    background: radial-gradient(circle at 35% 25%, #173544, #06121c 72%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
    content: "";
}

.marker-loading-gauge > span {
    position: relative;
    z-index: 1;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 50%;
    color: #67e8f9;
    font-size: 19px;
    background: rgba(5, 18, 27, 0.74);
}

.marker-loading-trace {
    position: relative;
    min-width: 0;
}

.marker-loading-line {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(137, 179, 195, 0.12);
}

.marker-loading-line-title { width: 58%; }
.marker-loading-line-copy { width: 38%; height: 5px; margin-top: 8px; }

.marker-loading-trace > svg {
    width: 100%;
    height: 72px;
    margin-top: 16px;
    overflow: visible;
}

.marker-loading-trace path {
    fill: none;
    stroke: #38bdf8;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 330;
    filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.62));
    vector-effect: non-scaling-stroke;
    animation: marker-loading-trace 2.4s ease-in-out infinite;
}

.marker-loading-scan {
    position: absolute;
    top: 48px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(transparent, #67e8f9 46%, transparent);
    box-shadow: 0 0 9px #38bdf8;
    animation: marker-loading-scan 2.4s ease-in-out infinite;
}

.marker-loading-grid {
    display: grid;
    margin-top: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.marker-loading-grid > span {
    position: relative;
    display: grid;
    min-height: 76px;
    overflow: hidden;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(125, 211, 252, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.018);
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
}

.marker-loading-grid > span::after {
    animation-delay: var(--loading-delay, 0s);
}

.marker-loading-grid > span:nth-child(2) { --loading-delay: 0.18s; }
.marker-loading-grid > span:nth-child(3) { --loading-delay: 0.36s; }
.marker-loading-grid > span:nth-child(4) { --loading-delay: 0.54s; }

.marker-loading-grid i {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(56, 189, 248, 0.1);
    border-radius: 9px;
    background: rgba(56, 189, 248, 0.06);
}

.marker-loading-grid b,
.marker-loading-grid small {
    display: block;
    border-radius: 999px;
    background: rgba(137, 179, 195, 0.1);
}

.marker-loading-grid b {
    width: 64%;
    height: 7px;
}

.marker-loading-grid small {
    width: 42%;
    height: 5px;
    margin: -19px 0 0 42px;
}

.marker-loading-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 15px;
    color: #4f7181;
}

.marker-loading-footer > span {
    position: relative;
    width: 22px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.1);
}

.marker-loading-footer > span > i {
    position: absolute;
    width: 9px;
    height: 100%;
    border-radius: inherit;
    background: #38bdf8;
    box-shadow: 0 0 7px #38bdf8;
    animation: marker-loading-footer 1.5s ease-in-out infinite alternate;
}

.marker-loading-footer small {
    font-size: 7px;
    letter-spacing: 0.035em;
}

.marker-loading-actions {
    display: none;
    width: min(310px, 100%);
    margin: 22px auto auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.marker-loading-action {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(251, 113, 133, 0.22);
    border-radius: 12px;
    color: #dbeaf0;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 750;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.marker-loading-action:hover,
.marker-loading-action:focus-visible {
    border-color: rgba(251, 113, 133, 0.48);
    color: #fff;
    background: rgba(251, 113, 133, 0.11);
    outline: 0;
    transform: translateY(-1px);
}

.marker-loading-action > i {
    color: #fb7185;
    font-size: 10px;
}

.marker-loading-action.is-pending {
    opacity: 0.65;
    pointer-events: none;
}

.marker-loading-retry {
    border-color: rgba(56, 189, 248, 0.24);
    background: rgba(56, 189, 248, 0.075);
}

.marker-loading-retry:hover,
.marker-loading-retry:focus-visible {
    border-color: rgba(56, 189, 248, 0.52);
    background: rgba(56, 189, 248, 0.14);
}

.marker-loading-retry > i {
    color: #67e8f9;
}

.marker-wait-for-data.is-error {
    justify-content: center;
    border-color: rgba(251, 113, 133, 0.28);
    background:
        radial-gradient(circle at 50% 24%, rgba(244, 63, 94, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(39, 24, 34, 0.99), rgba(12, 10, 18, 0.995));
    animation: marker-loading-error-enter 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-wait-for-data.is-error .marker-loading-header {
    width: min(390px, 100%);
    min-height: 66px;
    margin: auto auto 0;
    grid-template-columns: 58px minmax(0, 1fr) auto;
}

.marker-wait-for-data.is-error .marker-loading-beacon {
    width: 54px;
    height: 54px;
}

.marker-wait-for-data.is-error .marker-loading-copy > strong {
    font-size: 19px;
}

.marker-wait-for-data.is-error .marker-loading-copy > em {
    height: auto;
    min-height: 15px;
    overflow: visible;
}

.marker-wait-for-data.is-error .marker-loading-actions {
    display: grid;
}

.marker-wait-for-data.is-error .marker-loading-beacon {
    border-color: rgba(251, 113, 133, 0.28);
    color: #fb7185;
}

.marker-wait-for-data.is-error .marker-loading-beacon > i {
    animation: none;
}

.marker-wait-for-data.is-error .marker-loading-live {
    color: #fb7185;
}

.marker-wait-for-data.is-error .marker-loading-live > i {
    background: #fb7185;
    box-shadow: 0 0 8px #fb7185;
    animation: none;
}

.marker-wait-for-data.is-error .marker-loading-copy > em > span {
    opacity: 1;
    transform: none;
    animation: none;
}

.marker-wait-for-data.is-error .marker-loading-gauge,
.marker-wait-for-data.is-error .marker-loading-trace path,
.marker-wait-for-data.is-error .marker-loading-scan,
.marker-wait-for-data.is-error .marker-loading-grid > span::after,
.marker-wait-for-data.is-error .marker-loading-footer > span > i {
    animation: none;
}

.marker-wait-for-data.is-error .marker-loading-hero,
.marker-wait-for-data.is-error .marker-loading-grid,
.marker-wait-for-data.is-error .marker-loading-footer {
    display: none;
}

@keyframes marker-loading-orbit {
    to { transform: rotate(360deg); }
}

@keyframes marker-loading-drop {
    0%, 100% { opacity: 0.72; transform: translateY(-2px) scale(0.92); }
    50% { opacity: 1; transform: translateY(2px) scale(1.07); }
}

@keyframes marker-loading-sonar {
    0% { opacity: 0.7; transform: scale(0.82); }
    70%, 100% { opacity: 0; transform: scale(1.72); }
}

@keyframes marker-loading-message {
    0%, 28% { opacity: 0; transform: translateY(7px); }
    7%, 23% { opacity: 1; transform: translateY(0); }
    32%, 100% { opacity: 0; transform: translateY(-7px); }
}

@keyframes marker-loading-live {
    50% { opacity: 0.4; transform: scale(0.72); }
}

@keyframes marker-loading-gauge {
    0%, 100% { filter: hue-rotate(0deg); transform: rotate(-4deg); }
    50% { filter: hue-rotate(24deg); transform: rotate(7deg); }
}

@keyframes marker-loading-shimmer {
    from { left: -55%; }
    to { left: 125%; }
}

@keyframes marker-loading-trace {
    0% { stroke-dashoffset: 330; opacity: 0.2; }
    45%, 70% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: -330; opacity: 0.2; }
}

@keyframes marker-loading-scan {
    0% { left: 0; opacity: 0; }
    12%, 82% { opacity: 0.9; }
    100% { left: 100%; opacity: 0; }
}

@keyframes marker-loading-footer {
    from { left: 0; }
    to { left: 13px; }
}

@keyframes marker-loading-error-enter {
    0% { filter: saturate(0.65); transform: translateX(0); }
    28% { transform: translateX(-4px); }
    48% { transform: translateX(3px); }
    68% { transform: translateX(-2px); }
    100% { filter: saturate(1); transform: translateX(0); }
}

@media (max-width: 430px) {
    .marker-wait-for-data {
        min-height: min(540px, calc(88dvh - 58px));
        padding: 18px 14px 16px;
        border-radius: 18px;
    }

    .marker-loading-header {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px;
    }

    .marker-loading-live {
        display: none;
    }

    .marker-loading-beacon {
        width: 43px;
        height: 43px;
    }

    .marker-loading-copy > strong {
        font-size: 15px;
    }

    .marker-loading-hero {
        min-height: 164px;
        padding: 14px;
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 12px;
    }

    .marker-loading-gauge {
        width: 84px;
        height: 84px;
    }

    .marker-loading-gauge > span {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .marker-loading-grid > span {
        min-height: 66px;
        padding: 10px;
    }

    .marker-wait-for-data.is-error .marker-loading-header {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 11px;
    }

    .marker-wait-for-data.is-error .marker-loading-live {
        display: none;
    }

    .marker-loading-actions {
        margin-top: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marker-wait-for-data *,
    .marker-wait-for-data *::before,
    .marker-wait-for-data *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Device state notices — placed directly below the point action buttons. */
.marker-status-notices {
    position: relative;
    z-index: 6;
    display: grid;
    width: 100%;
    gap: 8px;
    margin: 10px 0;
}

.marker-status-notice {
    --notice-accent: #ff6473;
    --notice-glow: rgba(255, 73, 73, 0.22);
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 72px;
    overflow: hidden;
    box-sizing: border-box;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border: 1px solid color-mix(in srgb, var(--notice-accent) 48%, transparent);
    border-radius: 18px;
    color: #fff4f5;
    background:
        radial-gradient(circle at 5% 20%, color-mix(in srgb, var(--notice-accent) 22%, transparent), transparent 34%),
        linear-gradient(135deg, rgba(66, 18, 27, 0.98), rgba(31, 10, 17, 0.99));
    box-shadow:
        0 18px 38px -24px rgba(0, 0, 0, 0.95),
        0 0 30px -16px var(--notice-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.marker-status-notice::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.17;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    content: "";
    pointer-events: none;
    mask-image: linear-gradient(90deg, black, transparent 78%);
    -webkit-mask-image: linear-gradient(90deg, black, transparent 78%);
}

.marker-status-notice.is-service {
    --notice-accent: #ff5261;
    --notice-glow: rgba(255, 82, 97, 0.34);
}

.marker-status-notice.is-restricted {
    --notice-accent: #ff6b63;
    --notice-glow: rgba(255, 92, 82, 0.32);
    align-items: start;
    padding-top: 16px;
    padding-bottom: 16px;
}

.marker-status-notice-icon {
    position: relative;
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-self: center;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--notice-accent) 54%, rgba(255, 255, 255, 0.2));
    border-radius: 14px;
    color: #fff;
    background: color-mix(in srgb, var(--notice-accent) 22%, rgba(9, 15, 21, 0.86));
    box-shadow:
        0 0 22px -8px var(--notice-accent),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    font-size: 16px;
}

.marker-status-notice.is-restricted .marker-status-notice-icon {
    color: var(--notice-accent);
}

.marker-status-notice-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.marker-status-notice-copy strong {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.marker-status-notice-copy small {
    color: rgba(255, 235, 237, 0.76);
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.45;
}

.marker-status-notice.is-service .marker-status-notice-copy small {
    font-size: 11px;
    font-weight: 650;
}

.marker-status-notice-pulse {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--notice-accent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--notice-accent) 13%, transparent), 0 0 14px var(--notice-accent);
}

@media (max-width: 767px) {
    .marker-status-notice {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        padding-right: 14px;
        padding-left: 12px;
        border-radius: 16px;
    }

    .marker-status-notice-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .marker-status-notice-copy {
        padding-right: 6px;
    }
}

/* Water Quality Hero — WQI dashboard and the header of the marker panel.
   The full legacy WQI chart remains available directly below it. */
.marker-main-contener.has-water-hero > .marker-main-header,
.marker-main-contener.has-water-hero > .marker-legacy-subscribe-row {
    display: none;
}

.marker-water-hero-widget {
    width: 100%;
    margin-bottom: 10px;
}

.marker-water-hero-card {
    --water-ink: #effbff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 218px;
    border: 1px solid rgba(93, 207, 238, 0.24);
    border-radius: 20px;
    color: var(--water-ink);
    background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--wqi-color) 20%, transparent), transparent 34%),
        radial-gradient(circle at 94% 88%, rgba(14, 165, 233, 0.18), transparent 38%),
        linear-gradient(142deg, rgba(18, 39, 52, 0.98), rgba(5, 15, 24, 0.995) 64%, rgba(7, 27, 40, 0.99));
    box-shadow:
        0 24px 50px -23px rgba(0, 0, 0, 0.95),
        0 0 30px color-mix(in srgb, var(--wqi-color) 9%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.marker-water-release-badge {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 50%;
    min-width: 54px;
    padding: 3px 11px 5px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-top: 0;
    border-radius: 0 0 9px 9px;
    color: #b9cad3;
    background: rgba(28, 42, 52, 0.96);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-align: center;
    transform: translateX(-50%);
}

.marker-water-hero-card::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.17;
    background-image:
        linear-gradient(rgba(125, 211, 252, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, 0.09) 1px, transparent 1px);
    background-size: 28px 28px;
    content: "";
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.marker-water-hero-card::after {
    position: absolute;
    z-index: 0;
    right: -18%;
    bottom: -71px;
    left: -18%;
    height: 106px;
    border-radius: 45%;
    background: rgba(14, 165, 233, 0.08);
    box-shadow: 0 -12px 30px rgba(56, 189, 248, 0.05);
    content: "";
    pointer-events: none;
    transform: rotate(-2deg);
}

.marker-water-hero-ambient {
    position: absolute;
    z-index: -1;
    top: -60px;
    left: -45px;
    width: 175px;
    height: 175px;
    border: 1px solid color-mix(in srgb, var(--wqi-color) 28%, transparent);
    border-radius: 50%;
    opacity: 0.42;
    box-shadow:
        0 0 0 26px color-mix(in srgb, var(--wqi-color) 4%, transparent),
        0 0 0 52px color-mix(in srgb, var(--wqi-color) 2%, transparent);
    pointer-events: none;
}

.marker-water-hero-header {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    padding: 9px 13px;
    border-bottom: 1px solid rgba(125, 211, 252, 0.1);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent);
}

.marker-water-hero-title {
    display: flex;
    min-width: 0;
    max-width: 68%;
    align-items: center;
    gap: 9px;
}

.marker-water-hero-title > span {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--wqi-color) 38%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--wqi-color) 12%, rgba(255, 255, 255, 0.02));
    color: var(--wqi-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 17px color-mix(in srgb, var(--wqi-color) 12%, transparent);
}

.marker-water-hero-title strong,
.marker-water-hero-title small {
    display: block;
}

.marker-water-hero-title strong {
    overflow: hidden;
    max-width: 220px;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-hero-title small {
    margin-top: 2px;
    color: #5e7d8e;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.marker-water-hero-live {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 9px 4px;
    border: 1px solid rgba(52, 211, 153, 0.24);
    border-radius: 999px;
    background: rgba(6, 78, 59, 0.2);
    color: #53ddb0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.marker-water-hero-live > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.marker-water-hero-live > small {
    color: #78998e;
    font-size: 6px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
}

.marker-water-hero-live:not(.is-stale) > span > i:empty {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 9px #34d399;
}

.marker-water-hero-live.is-stale {
    border-color: rgba(251, 191, 36, 0.3);
    background: rgba(120, 78, 8, 0.2);
    color: #fbbf24;
}

.marker-water-hero-live.is-stale > small {
    color: #b58b39;
}

.marker-water-hero-content {
    position: relative;
    z-index: 2;
    display: grid;
    height: 135px;
    min-height: 135px;
    align-items: center;
    overflow: hidden;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px 8px;
    transition: grid-template-columns 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-water-hero-score,
.marker-water-hero-temperature {
    min-width: 0;
    border: 0;
    outline: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.marker-water-hero-score {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
}

.marker-water-hero-orbit {
    position: relative;
    display: grid;
    width: 104px;
    height: 104px;
    place-items: center;
    border: 1px solid rgba(125, 211, 252, 0.08);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.035), transparent 64%);
    box-shadow: 0 0 24px color-mix(in srgb, var(--wqi-color) 8%, transparent);
    transition: box-shadow 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-water-hero-orbit::before,
.marker-water-hero-orbit::after {
    position: absolute;
    border: 1px dashed rgba(125, 211, 252, 0.11);
    border-radius: 50%;
    content: "";
}

.marker-water-hero-orbit::before {
    inset: 7px;
}

.marker-water-hero-orbit::after {
    inset: 14px;
}

.marker-water-hero-score:hover .marker-water-hero-orbit,
.marker-water-hero-score:focus-visible .marker-water-hero-orbit {
    box-shadow: 0 0 34px color-mix(in srgb, var(--wqi-color) 20%, transparent);
    transform: scale(1.035);
}

.marker-water-hero-ring {
    position: relative;
    display: grid;
    width: 86px;
    height: 86px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from -90deg, var(--wqi-color) 0deg var(--wqi-angle), rgba(112, 150, 167, 0.13) var(--wqi-angle) 360deg);
    box-shadow: 0 0 16px color-mix(in srgb, var(--wqi-color) 18%, transparent);
}

.marker-water-hero-ring::before {
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 28%, rgba(28, 54, 68, 0.98), rgba(5, 15, 24, 0.99) 72%);
    content: "";
}

.marker-water-hero-ring > span {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.marker-water-hero-ring small {
    color: #688899;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.marker-water-hero-ring strong {
    margin-top: 3px;
    color: var(--wqi-color);
    font-size: 29px;
    font-weight: 750;
    letter-spacing: -1.5px;
    text-shadow: 0 0 15px color-mix(in srgb, var(--wqi-color) 30%, transparent);
}

.marker-water-hero-ring em {
    margin-top: 2px;
    color: #4f6c7a;
    font-size: 7px;
    font-style: normal;
    font-weight: 700;
}

.marker-water-hero-summary {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 110px;
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-water-hero-summary-current {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}

.marker-water-hero-history {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 12px;
    bottom: 78px;
    left: calc(100% - 170px);
    display: block;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    transition:
        top 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        right 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        bottom 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        left 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-water-hero-history > header,
.marker-water-hero-history > footer {
    position: absolute;
    z-index: 4;
    right: 0;
    left: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.marker-water-hero-history > header {
    top: 0;
}

.marker-water-hero-history > footer {
    bottom: 0;
}

.marker-water-hero-history > header small,
.marker-water-hero-history > footer {
    color: #547484;
    font-size: 6px;
}

.marker-water-hero-history > header {
    justify-content: flex-end;
}

.marker-water-hero-history > svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
    transition: height 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-water-history-axis {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.marker-water-history-axis line {
    stroke: rgba(148, 192, 211, 0.13);
    stroke-width: 1;
    stroke-dasharray: 3 5;
    vector-effect: non-scaling-stroke;
}

.marker-water-history-axis text {
    fill: #6f91a0;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.marker-water-history-area {
    stroke: none;
    opacity: 0.14;
    transition: opacity 0.22s ease;
}

.marker-water-history-line {
    fill: none;
    stroke: var(--wqi-color);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--wqi-color) 68%, transparent));
    transition: opacity 0.22s ease;
    vector-effect: non-scaling-stroke;
}

.marker-water-history-dot {
    fill: #f8fdff;
    stroke: var(--wqi-color);
    stroke-width: 2;
    opacity: 0;
    filter: drop-shadow(0 0 4px var(--wqi-color));
    transition: opacity 0.2s ease;
    vector-effect: non-scaling-stroke;
}

.marker-water-history-point {
    outline: 0;
}

.marker-water-history-point > line {
    stroke: color-mix(in srgb, var(--wqi-color) 30%, transparent);
    stroke-width: 0.7;
    opacity: 0;
    vector-effect: non-scaling-stroke;
}

.marker-water-history-point-visible {
    fill: #071018;
    stroke: var(--wqi-color);
    stroke-width: 1.5;
    opacity: 0;
    filter: drop-shadow(0 0 3px var(--wqi-color));
    vector-effect: non-scaling-stroke;
}

.marker-water-history-point-hit {
    fill: transparent;
    stroke: none;
    pointer-events: none;
}

.marker-water-history-point.is-active > line,
.marker-water-history-point:focus > line {
    opacity: 1;
}

.marker-water-history-point.is-active .marker-water-history-point-visible,
.marker-water-history-point:focus .marker-water-history-point-visible {
    fill: #fff;
    opacity: 1;
}

.marker-water-history-tooltip {
    position: absolute;
    z-index: 6;
    top: 50%;
    display: flex;
    min-width: 66px;
    flex-direction: column;
    align-items: center;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--wqi-color) 35%, transparent);
    border-radius: 10px;
    background: rgba(5, 15, 24, 0.97);
    box-shadow:
        0 9px 24px rgba(0, 0, 0, 0.42),
        0 0 18px color-mix(in srgb, var(--wqi-color) 12%, transparent);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 4px));
    transition: opacity 0.15s ease, transform 0.2s ease;
}

.marker-water-history-tooltip::after {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 1px solid color-mix(in srgb, var(--wqi-color) 35%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--wqi-color) 35%, transparent);
    background: rgba(5, 15, 24, 0.97);
    content: "";
    transform: translate(-50%, -4px) rotate(45deg);
}

.marker-water-history-tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 10px));
}

.marker-water-history-tooltip strong {
    color: var(--wqi-color);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.marker-water-history-tooltip small {
    margin-top: 3px;
    color: #7795a3;
    font-size: 8px;
    line-height: 1;
}

.marker-water-history-expand {
    display: none;
}

.marker-water-history-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #5b7b8b;
    font-size: 7px;
}

.marker-water-history-empty i {
    color: var(--wqi-color);
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .marker-water-hero-card:hover .marker-water-hero-summary {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-8px);
    }

    .marker-water-hero-card:hover .marker-water-hero-history {
        top: 10px;
        right: 12px;
        bottom: 8px;
        left: 130px;
        pointer-events: auto;
    }

    .marker-water-hero-card:hover .marker-water-hero-history > svg {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .marker-water-hero-card:hover .marker-water-hero-history > header,
    .marker-water-hero-card:hover .marker-water-hero-history > footer {
        opacity: 1;
        transform: translateY(0);
    }

    .marker-water-hero-card:hover .marker-water-history-axis,
    .marker-water-hero-card:hover .marker-water-history-dot {
        opacity: 1;
    }

    .marker-water-hero-card:hover .marker-water-history-area {
        opacity: 1;
    }

    .marker-water-hero-card:hover .marker-water-history-line {
        opacity: 1;
    }

    .marker-water-hero-card:hover .marker-water-history-point-hit {
        pointer-events: all;
        cursor: crosshair;
    }
}

.marker-water-hero-condition > span,
.marker-water-hero-condition > small {
    display: block;
}

.marker-water-hero-condition > span {
    color: var(--wqi-color);
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.marker-water-hero-condition > small {
    overflow: hidden;
    margin-top: 2px;
    color: #688899;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-hero-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.marker-water-hero-trend svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px currentColor);
}

.marker-water-hero-trend.is-better { color: #34d399; }
.marker-water-hero-trend.is-worse { color: #fb7185; }
.marker-water-hero-trend.is-flat { color: #7894a3; }

.marker-water-hero-spectrum {
    position: relative;
    isolation: isolate;
    height: 7px;
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #22c55e 0%,
        #84cc16 25%,
        #facc15 50%,
        #f97316 75%,
        #e11d48 100%
    );
    box-shadow:
        0 0 12px rgba(56, 189, 248, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.marker-water-hero-spectrum::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), transparent 55%);
    content: "";
    pointer-events: none;
}

.marker-water-hero-spectrum > i {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: var(--wqi-level);
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--wqi-bar-color, var(--wqi-color));
    box-shadow: 0 0 10px var(--wqi-bar-color, var(--wqi-color));
    transform: translate(-50%, -50%);
}

.marker-water-hero-spectrum > span {
    position: absolute;
    top: 8px;
    color: #476573;
    font-size: 6px;
    font-weight: 700;
}

.marker-water-hero-spectrum .is-best { left: 0; }
.marker-water-hero-spectrum .is-watch { left: 50%; transform: translateX(-50%); }
.marker-water-hero-spectrum .is-alert { right: 0; }

.marker-water-hero-stats {
    display: grid;
    margin-top: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marker-water-hero-stats > span {
    min-width: 0;
    text-align: center;
}

.marker-water-hero-stats > span + span {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.marker-water-hero-stats small,
.marker-water-hero-stats strong {
    display: block;
}

.marker-water-hero-stats small {
    color: #476573;
    font-size: 6px;
    font-weight: 700;
    text-transform: uppercase;
}

.marker-water-hero-stats strong {
    margin-top: 2px;
    color: #b9cfda;
    font-size: 10px;
}

.marker-water-hero-temperature {
    position: relative;
    display: flex;
    min-height: 118px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 9px 7px 7px;
    overflow: hidden;
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 15px;
    background:
        radial-gradient(circle at 50% 105%, rgba(14, 165, 233, 0.19), transparent 52%),
        linear-gradient(155deg, rgba(56, 189, 248, 0.08), rgba(255, 255, 255, 0.018));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.marker-water-hero-temperature:hover,
.marker-water-hero-temperature:focus-visible {
    border-color: rgba(56, 189, 248, 0.36);
    background:
        radial-gradient(circle at 50% 105%, rgba(14, 165, 233, 0.27), transparent 55%),
        linear-gradient(155deg, rgba(56, 189, 248, 0.12), rgba(255, 255, 255, 0.025));
    transform: translateY(-2px);
}

.marker-water-temperature-icon {
    position: absolute;
    top: 9px;
    right: 9px;
    color: #38bdf8;
    font-size: 11px;
    opacity: 0.75;
}

.marker-water-temperature-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.marker-water-temperature-copy > small {
    color: #5f7d8c;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.marker-water-temperature-copy > strong {
    margin-top: 5px;
    color: #e5f8ff;
    font-size: 25px;
    font-weight: 750;
    letter-spacing: -1px;
    line-height: 1;
}

.marker-water-temperature-copy > strong em {
    margin-left: 2px;
    color: #5d8295;
    font-size: 9px;
    font-style: normal;
}

.marker-water-temperature-copy > span {
    margin-top: 4px;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
}

.marker-water-temperature-copy > span.is-up { color: #fb923c; }
.marker-water-temperature-copy > span.is-down { color: #38bdf8; }
.marker-water-temperature-copy > span.is-flat { color: #7894a3; }

.marker-water-temperature-stats {
    display: grid;
    width: 100%;
    margin-top: 9px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marker-water-temperature-stats > span {
    min-width: 0;
    text-align: center;
}

.marker-water-temperature-stats > span + span {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.marker-water-temperature-stats small,
.marker-water-temperature-stats strong {
    display: block;
}

.marker-water-temperature-stats small {
    color: #456675;
    font-size: 6px;
    text-transform: uppercase;
}

.marker-water-temperature-stats strong {
    margin-top: 2px;
    color: #9fbac7;
    font-size: 7px;
}

.marker-water-hero-footer {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 29px;
    align-items: center;
    justify-content: center;
    padding: 5px 13px 7px;
    border-top: 1px solid rgba(125, 211, 252, 0.08);
    color: #4e6d7c;
    font-size: 7px;
    letter-spacing: 0.025em;
}

.marker-water-hero-brand {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    color: #87a5b3;
    font-size: 8px;
    font-weight: 650;
}

.marker-water-hero-brand > strong {
    color: #a6bfca;
    font-size: 8px;
    font-weight: 700;
}

.marker-water-hero-brand sup {
    position: relative;
    top: -0.25em;
    margin-left: 1px;
    color: #5de6b5;
    font-size: 6px;
    font-weight: 900;
    line-height: 0;
    text-shadow: 0 0 9px rgba(93, 230, 181, 0.42);
}

.marker-water-hero-brand > small {
    color: #4d6b79;
    font-size: 6px;
    font-weight: 500;
}

.marker-water-hero-brand > a {
    color: #52cbed;
    font-size: 7px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.marker-water-hero-brand > a:hover,
.marker-water-hero-brand > a:focus-visible {
    color: #7ee7ff;
    text-decoration: none;
    text-shadow: 0 0 9px rgba(82, 203, 237, 0.45);
}

.marker-water-hero-actions {
    position: relative;
    z-index: 3;
    display: grid;
    min-height: 52px;
    margin-top: 8px;
    padding: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.marker-water-hero-quick-action {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 4px;
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: 12px;
    outline: 0;
    color: #7292a1;
    background:
        radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.08), transparent 68%),
        linear-gradient(155deg, rgba(18, 39, 52, 0.96), rgba(5, 15, 24, 0.98));
    box-shadow:
        0 9px 18px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
    font: inherit;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.marker-water-hero-quick-action i {
    color: #60cdeb;
    font-size: 10px;
}

.marker-water-hero-quick-action span {
    overflow: hidden;
    font-size: 7px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-hero-quick-action:hover,
.marker-water-hero-quick-action:focus-visible {
    border-color: color-mix(in srgb, var(--wqi-color) 35%, transparent);
    color: #dff7ff;
    background: color-mix(in srgb, var(--wqi-color) 10%, rgba(255, 255, 255, 0.025));
    transform: translateY(-1px);
}

.marker-water-hero-quick-action:hover i,
.marker-water-hero-quick-action:focus-visible i {
    color: var(--wqi-color);
}

.marker-water-hero-card.is-stale .marker-water-hero-score,
.marker-water-hero-temperature.is-stale {
    opacity: 0.56;
}

@media (max-width: 430px) {
    .marker-water-hero-content {
        height: auto;
        grid-template-columns: 104px minmax(0, 1fr);
        overflow: visible;
    }

    .marker-water-hero-history {
        top: 10px;
        right: 12px;
        bottom: 78px;
        left: calc(100% - 150px);
    }

    .marker-water-hero-temperature {
        min-height: 88px;
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        padding: 9px 12px;
    }

    .marker-water-temperature-copy {
        align-items: flex-start;
    }

    .marker-water-temperature-stats {
        width: 52%;
        margin-top: 0;
    }

    .marker-water-hero-footer {
        gap: 6px;
    }

    .marker-water-hero-title {
        max-width: 60%;
    }

    .marker-water-hero-title strong {
        max-width: 150px;
    }

    .marker-water-hero-actions {
        min-height: 58px;
    }

    .marker-water-hero-quick-action {
        flex-direction: column;
        gap: 3px;
    }

    .marker-water-hero-quick-action span {
        font-size: 6px;
    }
}

.marker-water-temperature-widget {
    width: 100%;
    margin: 10px 0 4px;
}

.marker-water-temperature-card {
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 17px;
    outline: 0;
    color: #e8f8ff;
    background:
        radial-gradient(circle at 4% 50%, rgba(14, 165, 233, 0.18), transparent 30%),
        radial-gradient(circle at 92% 120%, rgba(45, 212, 191, 0.1), transparent 38%),
        linear-gradient(145deg, rgba(18, 39, 52, 0.98), rgba(5, 15, 24, 0.99));
    box-shadow:
        0 14px 28px -20px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.065);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.marker-water-temperature-card:hover,
.marker-water-temperature-card:focus-visible {
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow:
        0 16px 32px -20px rgba(0, 0, 0, 0.94),
        0 0 22px rgba(56, 189, 248, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.marker-water-temperature-card.is-stale {
    opacity: 0.58;
}

.marker-water-temperature-header {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 11px;
    border-bottom: 1px solid rgba(125, 211, 252, 0.08);
    background: rgba(255, 255, 255, 0.018);
}

.marker-water-temperature-heading {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.marker-water-temperature-heading > i {
    display: flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 9px;
    color: #67d8f8;
    background: rgba(14, 165, 233, 0.09);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.08);
}

.marker-water-temperature-heading strong,
.marker-water-temperature-heading small {
    display: block;
}

.marker-water-temperature-heading strong {
    font-size: 11px;
    font-weight: 750;
}

.marker-water-temperature-heading small {
    overflow: hidden;
    max-width: 230px;
    margin-top: 1px;
    color: #567887;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-temperature-trend {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-water-temperature-trend.is-up { color: #fb923c; }
.marker-water-temperature-trend.is-down { color: #38bdf8; }
.marker-water-temperature-trend.is-flat { color: #7894a3; }

.marker-water-temperature-body {
    display: grid;
    min-height: 66px;
    align-items: center;
    padding: 8px 11px 10px;
    grid-template-columns: 88px minmax(110px, 1fr) 142px;
    gap: 12px;
}

.marker-water-temperature-value {
    color: #eafaff;
    font-size: 28px;
    font-weight: 780;
    letter-spacing: -1.2px;
    line-height: 1;
}

.marker-water-temperature-value > small {
    margin-left: 2px;
    color: #65b8cf;
    font-size: 10px;
    font-weight: 700;
}

.marker-water-temperature-scale {
    position: relative;
    display: block;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #22d3ee 31%, #34d399 54%, #facc15 77%, #fb7185);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.1);
}

.marker-water-temperature-scale > i {
    position: absolute;
    inset: -4px 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    content: "";
}

.marker-water-temperature-scale > b {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: var(--water-temperature-level);
    width: 13px;
    height: 13px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #67e8f9;
    box-shadow: 0 0 11px rgba(103, 232, 249, 0.8);
    transform: translate(-50%, -50%);
}

.marker-water-temperature-scale > small {
    position: absolute;
    top: 11px;
    color: #4f7180;
    font-size: 6px;
    font-weight: 650;
}

.marker-water-temperature-scale > small.is-min { left: 0; }
.marker-water-temperature-scale > small.is-max { right: 0; }

.marker-water-temperature-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marker-water-temperature-summary > span {
    min-width: 0;
    text-align: center;
}

.marker-water-temperature-summary > span + span {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.marker-water-temperature-summary small,
.marker-water-temperature-summary strong {
    display: block;
}

.marker-water-temperature-summary small {
    color: #4e6f7f;
    font-size: 6px;
    text-transform: uppercase;
}

.marker-water-temperature-summary strong {
    margin-top: 3px;
    color: #a9c6d2;
    font-size: 9px;
}

@media (max-width: 430px) {
    .marker-water-temperature-body {
        min-height: 94px;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px;
        padding-bottom: 9px;
    }

    .marker-water-temperature-summary {
        grid-column: 1 / -1;
        padding-top: 5px;
    }
}

/* ==========================================================================
   Water oxygenation widget — dual concentric gauge (saturation + dissolved O2)
   ========================================================================== */

.marker-water-oxygen-widget {
    width: 100%;
    container-type: inline-size;
    container-name: oxygen;
    margin: 10px 0 4px;
    --oxygen-sat: #22d3ee;
    --oxygen-do: #a3e635;
    --oxygen-accent: #38e0f2;
}

.marker-water-oxygen-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 19px;
    color: #eafaff;
    background:
        radial-gradient(120% 78% at 50% -12%, rgba(34, 211, 238, 0.17), transparent 62%),
        radial-gradient(96% 62% at 50% 116%, rgba(163, 230, 53, 0.13), transparent 60%),
        linear-gradient(155deg, rgba(17, 39, 53, 0.985), rgba(5, 13, 21, 0.995));
    box-shadow:
        0 18px 34px -22px rgba(0, 0, 0, 0.92),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Faint instrument grid, fades out towards the bottom. */
.marker-water-oxygen-card::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
    background-size: 22px 22px;
    content: "";
    mask-image: linear-gradient(to bottom, black, transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.marker-water-oxygen-card.is-stale {
    border-color: rgba(251, 191, 36, 0.22);
}

/* Rising bubbles — the signature of the widget. */
.marker-water-oxygen-bubbles {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
    mask-image: linear-gradient(to top, transparent, black 22%, black 72%, transparent);
    -webkit-mask-image: linear-gradient(to top, transparent, black 22%, black 72%, transparent);
}

.marker-water-oxygen-bubbles > i {
    position: absolute;
    bottom: -14px;
    left: var(--bubble-x);
    width: var(--bubble-size);
    height: var(--bubble-size);
    border: 1px solid rgba(190, 245, 255, 0.42);
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.5), rgba(56, 224, 242, 0.06) 62%, transparent);
    animation: marker-water-oxygen-rise var(--bubble-duration) linear var(--bubble-delay) infinite;
}

@keyframes marker-water-oxygen-rise {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.62); }
    12% { opacity: 0.75; }
    72% { opacity: 0.5; }
    100% { opacity: 0; transform: translate3d(var(--bubble-drift), -232px, 0) scale(1.12); }
}

.marker-water-oxygen-header,
.marker-water-oxygen-body {
    position: relative;
    z-index: 1;
}

.marker-water-oxygen-header {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 9px;
    border-bottom: 1px solid rgba(125, 211, 252, 0.09);
    background: rgba(255, 255, 255, 0.02);
}

.marker-water-oxygen-title {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.marker-water-oxygen-title > i {
    position: relative;
    display: flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(34, 211, 238, 0.26);
    border-radius: 9px;
    color: #67e8f9;
    background: rgba(34, 211, 238, 0.1);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.14);
}

.marker-water-oxygen-title > i sub {
    font-size: 8px;
    font-weight: 700;
    vertical-align: -2px;
}

.marker-water-oxygen-title > i::after {
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(103, 232, 249, 0.5);
    border-radius: inherit;
    content: "";
    animation: marker-water-oxygen-halo 2.8s ease-out infinite;
}

@keyframes marker-water-oxygen-halo {
    0% { opacity: 0.55; transform: scale(1); }
    70% { opacity: 0; transform: scale(1.42); }
    100% { opacity: 0; transform: scale(1.42); }
}

.marker-water-oxygen-title strong,
.marker-water-oxygen-title small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-oxygen-title strong {
    font-size: 13px;
    font-weight: 780;
    letter-spacing: 0.01em;
}

.marker-water-oxygen-title small {
    margin-top: 1px;
    color: #5c7d8c;
    font-size: 7.5px;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.marker-water-oxygen-status {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 3px 7px;
    border: 1px solid rgba(52, 211, 153, 0.24);
    border-radius: 999px;
    color: #55dcae;
    background: rgba(6, 78, 59, 0.2);
    font-size: 7px;
    font-weight: 760;
    text-transform: uppercase;
}

.marker-water-oxygen-status > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.marker-water-oxygen-status > span > i:empty {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px #34d399;
    animation: marker-water-oxygen-pulse 2s ease-in-out infinite;
}

@keyframes marker-water-oxygen-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px #34d399; }
    50% { opacity: 0.45; box-shadow: 0 0 3px #34d399; }
}

.marker-water-oxygen-status > small {
    max-width: 96px;
    overflow: hidden;
    color: #6d9186;
    font-size: 6.5px;
    font-weight: 560;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.marker-water-oxygen-status.is-stale {
    border-color: rgba(251, 191, 36, 0.28);
    color: #fbbf24;
    background: rgba(120, 78, 8, 0.2);
}

.marker-water-oxygen-status.is-stale > small {
    color: #a98b4d;
}

.marker-water-oxygen-body {
    display: grid;
    align-items: center;
    gap: 10px 14px;
    padding: 9px 12px 11px;
    grid-template-columns: 152px minmax(0, 1fr);
}

.marker-water-oxygen-side {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

/* --- Concentric dual gauge ------------------------------------------------ */

.marker-water-oxygen-gauge {
    position: relative;
    display: block;
    width: 152px;
    max-width: 100%;
    justify-self: center;
    padding: 0;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.marker-water-oxygen-gauge > svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.marker-water-oxygen-ring-track {
    fill: none;
    stroke: rgba(120, 165, 188, 0.13);
    stroke-linecap: round;
}

.marker-water-oxygen-ring-track.is-outer { stroke-width: 8; }
.marker-water-oxygen-ring-track.is-inner { stroke-width: 6; }

/* --ring-start is the reading that is already on screen (zero on the first render), so a
   background refresh glides from the current value instead of sweeping from zero again. */
.marker-water-oxygen-ring-fill {
    fill: none;
    stroke: var(--ring-color);
    stroke-dasharray: var(--ring-level) 100;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ring-color) 62%, transparent));
    animation: marker-water-oxygen-sweep 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.marker-water-oxygen-ring-fill.is-outer { stroke-width: 8; }
.marker-water-oxygen-ring-fill.is-inner { stroke-width: 6; animation-delay: 0.12s; }

@keyframes marker-water-oxygen-sweep {
    from { stroke-dasharray: var(--ring-start) 100; }
}

/* Light pulse travelling along the filled part of each ring. */
.marker-water-oxygen-ring-comet {
    fill: none;
    stroke: #ffffff;
    stroke-dasharray: 3 100;
    stroke-linecap: round;
    animation: marker-water-oxygen-comet 3.8s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}

.marker-water-oxygen-ring-comet.is-outer { stroke-width: 5; }
.marker-water-oxygen-ring-comet.is-inner { stroke-width: 3.5; animation-delay: 0.9s; }

@keyframes marker-water-oxygen-comet {
    0% { opacity: 0; stroke-dashoffset: 0; }
    10% { opacity: 0.55; }
    70% { opacity: 0.4; }
    100% { opacity: 0; stroke-dashoffset: calc(var(--ring-level) * -1px); }
}

/* The cap keeps its final position in the cx/cy attributes — the travel is a pure CSS
   overlay, so browsers without geometry properties still park it in the right spot. */
.marker-water-oxygen-ring-cap {
    fill: #f6feff;
    stroke: var(--ring-color);
    stroke-width: 2;
    filter: drop-shadow(0 0 5px var(--ring-color));
    animation:
        marker-water-oxygen-cap-move 1.05s cubic-bezier(0.22, 1, 0.36, 1) both,
        marker-water-oxygen-cap 2.4s ease-in-out infinite;
}

.marker-water-oxygen-ring-cap.is-inner {
    animation-delay: 0.12s, 0s;
}

@keyframes marker-water-oxygen-cap-move {
    from { cx: var(--cap-start-x); cy: var(--cap-start-y); }
    to { cx: var(--cap-x); cy: var(--cap-y); }
}

@keyframes marker-water-oxygen-cap {
    0%, 100% { opacity: 1; r: 3.1; }
    50% { opacity: 0.72; r: 3.9; }
}

.marker-water-oxygen-ring-mark {
    stroke: rgba(226, 250, 255, 0.42);
    stroke-width: 1.4;
    stroke-linecap: round;
}

.marker-water-oxygen-ring-label {
    fill: #62808e;
    font-size: 6px;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-anchor: middle;
}

.marker-water-oxygen-ring-label.is-top {
    fill: #86adbd;
    font-size: 5.5px;
}

.marker-water-oxygen-core {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    width: 84px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translate(-50%, -54%);
}

.marker-water-oxygen-core > strong {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    color: var(--oxygen-sat);
    font-size: 31px;
    font-weight: 830;
    letter-spacing: -1.4px;
    line-height: 1;
    text-shadow: 0 0 18px color-mix(in srgb, var(--oxygen-sat) 45%, transparent);
}

.marker-water-oxygen-core > strong > i {
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
}

.marker-water-oxygen-core > small {
    margin-top: 1px;
    color: #6c8d9c;
    font-size: 7px;
    font-weight: 760;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.marker-water-oxygen-core > em {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    margin-top: 5px;
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--oxygen-do) 26%, transparent);
    border-radius: 999px;
    color: var(--oxygen-do);
    background: color-mix(in srgb, var(--oxygen-do) 10%, transparent);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.25;
}

.marker-water-oxygen-core > em > span {
    color: #8aa87c;
    font-size: 7px;
    font-weight: 700;
}

/* --- Verdict badge -------------------------------------------------------- */

.marker-water-oxygen-verdict {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--verdict-color) 34%, transparent);
    border-radius: 999px;
    color: var(--verdict-color);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--verdict-color) 16%, transparent), color-mix(in srgb, var(--verdict-color) 8%, transparent)),
        rgba(8, 20, 30, 0.72);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.marker-water-oxygen-verdict > i {
    font-size: 9px;
}

.marker-water-oxygen-verdict > small {
    overflow: hidden;
    margin-left: auto;
    color: #86a0ac;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.marker-water-oxygen-verdict.is-critical { --verdict-color: #fb7185; }
.marker-water-oxygen-verdict.is-low { --verdict-color: #fbbf24; }
.marker-water-oxygen-verdict.is-good { --verdict-color: #38bdf8; }
.marker-water-oxygen-verdict.is-optimal { --verdict-color: #34d399; }
.marker-water-oxygen-verdict.is-high { --verdict-color: #c084fc; }
.marker-water-oxygen-verdict.is-unknown { --verdict-color: #7894a3; }

/* --- Metric chips --------------------------------------------------------- */

.marker-water-oxygen-readings {
    display: grid;
    width: 100%;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr);
}

.marker-water-oxygen-metric {
    position: relative;
    display: grid;
    min-width: 0;
    overflow: hidden;
    align-items: center;
    gap: 0 10px;
    grid-template-columns: minmax(0, 1fr) minmax(54px, 96px);
    grid-template-areas:
        "name spark"
        "value spark"
        "foot foot";
    padding: 6px 9px 5px;
    border: 1px solid color-mix(in srgb, var(--oxygen-color) 20%, transparent);
    border-radius: 11px;
    outline: 0;
    color: inherit;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--oxygen-color) 11%, transparent), transparent 72%),
        rgba(8, 20, 30, 0.72);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.24s ease, box-shadow 0.24s ease;
}

.marker-water-oxygen-metric.is-stale {
    opacity: 0.58;
}

.marker-water-oxygen-name {
    display: flex;
    align-items: center;
    gap: 5px;
    grid-area: name;
    overflow: hidden;
    color: #8fadba;
    font-size: 7.5px;
    font-weight: 780;
    letter-spacing: 0.07em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.marker-water-oxygen-name::before {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: var(--oxygen-color);
    box-shadow: 0 0 6px var(--oxygen-color);
    content: "";
}

/* Optional conditions behind the oxygen solubility: air pressure and salinity. */
.marker-water-oxygen-context {
    display: flex;
    gap: 6px;
}

.marker-water-oxygen-context-item {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    align-items: center;
    gap: 7px;
    padding: 4px 8px;
    border: 1px solid rgba(125, 211, 252, 0.13);
    border-radius: 10px;
    background: rgba(8, 20, 30, 0.72);
}

.marker-water-oxygen-context-item.is-stale {
    opacity: 0.58;
}

.marker-water-oxygen-context-item > i {
    flex: 0 0 auto;
    color: #6ea6bd;
    font-size: 10px;
}

.marker-water-oxygen-context-item > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.marker-water-oxygen-context-item small {
    color: #6b8794;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.marker-water-oxygen-context-item strong {
    display: flex;
    align-items: baseline;
    gap: 3px;
    color: #d5e8f1;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.marker-water-oxygen-context-item strong > span {
    color: #7b98a6;
    font-size: 7px;
    font-weight: 700;
}

/* Short pulse marking a value that changed during a background refresh. */
.marker-water-oxygen-core > strong.is-updated,
.marker-water-oxygen-core > em.is-updated,
.marker-water-oxygen-reading.is-updated {
    animation: marker-water-oxygen-flash 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-water-oxygen-reading.is-updated {
    transform-origin: left center;
}

@keyframes marker-water-oxygen-flash {
    0% { transform: scale(1); }
    26% { filter: brightness(1.45); transform: scale(1.14); }
    58% { transform: scale(0.985); }
    100% { transform: scale(1); }
}

.marker-water-oxygen-reading {
    display: flex;
    align-items: baseline;
    gap: 3px;
    grid-area: value;
    margin-top: 1px;
    color: #f2fbff;
}

.marker-water-oxygen-reading > strong {
    font-size: 19px;
    font-weight: 820;
    letter-spacing: -0.6px;
    line-height: 1.1;
}

.marker-water-oxygen-reading > small {
    color: #7f9dab;
    font-size: 8px;
    font-weight: 700;
}

.marker-water-oxygen-spark {
    display: block;
    width: 100%;
    height: 30px;
    grid-area: spark;
    overflow: visible;
}

.marker-water-oxygen-average {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    grid-area: spark;
}

.marker-water-oxygen-average > small {
    color: #6b8794;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.marker-water-oxygen-average > strong {
    color: var(--oxygen-color);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
}

.marker-water-oxygen-metric.is-plain {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "name"
        "value"
        "foot";
}

.marker-water-oxygen-spark-line {
    fill: none;
    stroke: var(--oxygen-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
    opacity: 0.9;
}

.marker-water-oxygen-spark-area {
    fill: var(--oxygen-color);
    opacity: 0.13;
}

.marker-water-oxygen-spark-dot {
    fill: var(--oxygen-color);
    filter: drop-shadow(0 0 3px var(--oxygen-color));
}

.marker-water-oxygen-footline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    grid-area: foot;
    margin-top: 3px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.marker-water-oxygen-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 7px;
    font-weight: 780;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.marker-water-oxygen-trend.is-up { color: #34d399; }
.marker-water-oxygen-trend.is-down { color: #fb7185; }
.marker-water-oxygen-trend.is-flat { color: #7894a3; }

.marker-water-oxygen-range {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #648291;
    font-size: 6.5px;
    font-weight: 650;
    white-space: nowrap;
}

.marker-water-oxygen-range > b {
    color: #b7d1dc;
    font-weight: 780;
}

/* --- Interaction ---------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .marker-water-oxygen-metric:hover,
    .marker-water-oxygen-metric:focus-visible {
        border-color: color-mix(in srgb, var(--oxygen-color) 52%, transparent);
        box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--oxygen-color) 80%, transparent);
        transform: translateY(-2px);
    }

    .marker-water-oxygen-gauge:hover .marker-water-oxygen-core > strong,
    .marker-water-oxygen-gauge:focus-visible .marker-water-oxygen-core > strong {
        text-shadow: 0 0 26px color-mix(in srgb, var(--oxygen-sat) 70%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marker-water-oxygen-widget *,
    .marker-water-oxygen-widget *::before,
    .marker-water-oxygen-widget *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* --- Responsive ----------------------------------------------------------- */

@container oxygen (max-width: 430px) {
    .marker-water-oxygen-body {
        justify-items: center;
        gap: 9px;
        grid-template-columns: minmax(0, 1fr);
    }

    .marker-water-oxygen-gauge {
        width: 178px;
    }

    .marker-water-oxygen-side {
        width: 100%;
    }

    .marker-water-oxygen-core > strong { font-size: 35px; }
    .marker-water-oxygen-core > strong > i { font-size: 14px; }
    .marker-water-oxygen-core > em { font-size: 13px; }
}

@media (max-width: 767px) {
    .marker-water-oxygen-bubbles > i {
        animation: none;
        opacity: 0.3;
    }
}

.marker-water-ph-widget {
    width: 100%;
    margin: 10px 0 4px;
}

.marker-water-ph-card {
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 19px;
    outline: 0;
    color: #eef6ff;
    background:
        radial-gradient(circle at 8% 12%, rgba(239, 68, 68, 0.1), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(139, 92, 246, 0.12), transparent 34%),
        radial-gradient(circle at 50% -10%, rgba(34, 197, 94, 0.12), transparent 42%),
        linear-gradient(150deg, rgba(20, 33, 48, 0.98), rgba(5, 12, 20, 0.99));
    box-shadow:
        0 14px 28px -20px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.065);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.marker-water-ph-card:hover,
.marker-water-ph-card:focus-visible {
    border-color: var(--ph-color, rgba(148, 163, 184, 0.45));
    box-shadow:
        0 16px 32px -20px rgba(0, 0, 0, 0.94),
        0 0 24px rgba(148, 163, 184, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.marker-water-ph-card.is-stale {
    opacity: 0.58;
}

.marker-water-ph-header {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 11px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(255, 255, 255, 0.018);
}

.marker-water-ph-title {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.marker-water-ph-title > i {
    display: flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 9px;
    color: var(--ph-color, #94a3b8);
    background: rgba(148, 163, 184, 0.08);
    box-shadow: 0 0 14px rgba(148, 163, 184, 0.08);
}

.marker-water-ph-title strong,
.marker-water-ph-title small {
    display: block;
}

.marker-water-ph-title strong {
    font-size: 11px;
    font-weight: 750;
}

.marker-water-ph-title small {
    overflow: hidden;
    max-width: 230px;
    margin-top: 1px;
    color: #5d7385;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-ph-trend {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-water-ph-trend.is-up { color: #a78bfa; }
.marker-water-ph-trend.is-down { color: #fb923c; }
.marker-water-ph-trend.is-flat { color: #7894a3; }

.marker-water-ph-body {
    display: grid;
    align-items: center;
    padding: 8px 11px 12px;
    grid-template-columns: 186px minmax(0, 1fr);
    gap: 12px;
}

.marker-water-ph-dial {
    position: relative;
    width: 186px;
    height: 116px;
}

.marker-water-ph-dial > svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.marker-water-ph-track,
.marker-water-ph-optimal,
.marker-water-ph-fill {
    fill: none;
    stroke-linecap: round;
}

.marker-water-ph-track {
    stroke: rgba(148, 163, 184, 0.14);
    stroke-width: 11;
}

.marker-water-ph-optimal {
    stroke: rgba(34, 197, 94, 0.32);
    stroke-width: 15;
    stroke-linecap: butt;
    stroke-dasharray: var(--ph-optimal-length) 100;
    stroke-dashoffset: var(--ph-optimal-offset);
}

.marker-water-ph-fill {
    stroke-width: 11;
    stroke-dasharray: var(--ph-level) 100;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.14));
    transition: stroke-dasharray 0.6s ease;
}

.marker-water-ph-tick {
    stroke: rgba(203, 213, 225, 0.22);
    stroke-width: 1;
}

.marker-water-ph-tick.is-major {
    stroke: rgba(226, 232, 240, 0.5);
    stroke-width: 1.6;
}

.marker-water-ph-needle {
    stroke: #f8fafc;
    stroke-width: 2.6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(248, 250, 252, 0.5));
    transition: all 0.6s ease;
}

.marker-water-ph-hub {
    fill: #0b1520;
    stroke: var(--ph-color, #94a3b8);
    stroke-width: 2.4;
}

.marker-water-ph-legend {
    fill: #5d7385;
    font-size: 8px;
    font-weight: 650;
}

.marker-water-ph-legend.is-mid { text-anchor: middle; }
.marker-water-ph-legend.is-max { text-anchor: end; }

.marker-water-ph-value {
    position: absolute;
    bottom: 2px;
    left: 50%;
    display: flex;
    align-items: baseline;
    gap: 3px;
    transform: translateX(-50%);
}

.marker-water-ph-value > strong {
    color: #f2f9ff;
    font-size: 27px;
    font-weight: 780;
    letter-spacing: -1.2px;
    line-height: 1;
}

.marker-water-ph-value > small {
    color: var(--ph-color, #94a3b8);
    font-size: 10px;
    font-weight: 700;
}

.marker-water-ph-readings {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.marker-water-ph-state {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid var(--ph-color, #94a3b8);
    border-radius: 999px;
    color: var(--ph-color, #94a3b8);
    font-size: 8px;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-water-ph-state > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.marker-water-ph-range {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fb923c;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
}

.marker-water-ph-range.is-ok {
    color: #4ade80;
}

.marker-water-ph-stats {
    display: grid;
    margin-top: 1px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marker-water-ph-stats > span {
    min-width: 0;
    text-align: center;
}

.marker-water-ph-stats > span + span {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.marker-water-ph-stats small,
.marker-water-ph-stats strong {
    display: block;
}

.marker-water-ph-stats small {
    color: #55707f;
    font-size: 6px;
    text-transform: uppercase;
}

.marker-water-ph-stats strong {
    margin-top: 3px;
    color: #adc7d4;
    font-size: 9px;
}

@media (max-width: 767px) {
    .marker-water-ph-body {
        justify-items: center;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .marker-water-ph-dial {
        width: 226px;
        height: 140px;
    }

    .marker-water-ph-readings {
        width: 100%;
        align-items: center;
    }

    .marker-water-ph-state {
        align-self: center;
    }

    .marker-water-ph-stats {
        width: 100%;
    }
}

.marker-water-ec-widget {
    width: 100%;
    margin: 10px 0 4px;
}

.marker-water-ec-card {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 19px;
    color: #eef6ff;
    background:
        radial-gradient(circle at 12% 8%, rgba(56, 189, 248, 0.12), transparent 34%),
        radial-gradient(circle at 88% 96%, rgba(167, 139, 250, 0.12), transparent 36%),
        linear-gradient(150deg, rgba(18, 32, 46, 0.98), rgba(5, 12, 20, 0.99));
    box-shadow:
        0 14px 28px -20px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.065);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.marker-water-ec-card:hover {
    border-color: var(--ec-color, rgba(148, 163, 184, 0.45));
    box-shadow:
        0 16px 32px -20px rgba(0, 0, 0, 0.94),
        0 0 24px rgba(148, 163, 184, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.marker-water-ec-card.is-stale {
    opacity: 0.58;
}

.marker-water-ec-header {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 11px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(255, 255, 255, 0.018);
}

.marker-water-ec-title {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.marker-water-ec-title > i {
    display: flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 9px;
    color: var(--ec-color, #94a3b8);
    background: rgba(148, 163, 184, 0.08);
    box-shadow: 0 0 14px rgba(148, 163, 184, 0.08);
}

.marker-water-ec-title strong,
.marker-water-ec-title small {
    display: block;
}

.marker-water-ec-title strong {
    font-size: 11px;
    font-weight: 750;
}

.marker-water-ec-title small {
    overflow: hidden;
    max-width: 230px;
    margin-top: 1px;
    color: #5d7385;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-ec-status {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    color: #4ade80;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-water-ec-status > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.marker-water-ec-status > span > i:empty {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.marker-water-ec-status > small {
    color: #55707f;
    font-size: 6px;
    font-weight: 650;
    text-transform: none;
}

.marker-water-ec-status.is-stale {
    color: #fbbf24;
}

.marker-water-ec-body {
    display: flex;
    flex-direction: column;
    padding: 9px 11px 11px;
    gap: 9px;
}

.marker-water-ec-primary {
    display: block;
    width: 100%;
    padding: 8px 10px 9px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    outline: 0;
    background: rgba(255, 255, 255, 0.022);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.marker-water-ec-primary:hover,
.marker-water-ec-primary:focus-visible {
    border-color: var(--ec-color, rgba(148, 163, 184, 0.4));
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}

.marker-water-ec-primary.is-stale {
    opacity: 0.6;
}

.marker-water-ec-primary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.marker-water-ec-primary-label {
    overflow: hidden;
    color: #7f9bab;
    font-size: 7px;
    font-weight: 750;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.marker-water-ec-zone {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--ec-color, #94a3b8);
    border-radius: 999px;
    color: var(--ec-color, #94a3b8);
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-water-ec-zone > i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.marker-water-ec-primary-value {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 4px 0 9px;
}

.marker-water-ec-primary-value > strong {
    color: #f2f9ff;
    font-size: 30px;
    font-weight: 780;
    letter-spacing: -1.4px;
    line-height: 1;
}

.marker-water-ec-primary-value > small {
    color: var(--ec-color, #94a3b8);
    font-size: 10px;
    font-weight: 700;
}

.marker-water-ec-primary-value > em {
    margin-left: auto;
}

.marker-water-ec-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 7px;
    font-style: normal;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-water-ec-trend.is-up { color: #fb923c; }
.marker-water-ec-trend.is-down { color: #38bdf8; }
.marker-water-ec-trend.is-flat { color: #7894a3; }

.marker-water-ec-scale {
    position: relative;
    display: block;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #22d3ee 22%, #4ade80 44%, #facc15 68%, #fb923c 85%, #f472b6);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 14px rgba(56, 189, 248, 0.1);
}

.marker-water-ec-scale > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: var(--ec-level);
    width: 13px;
    height: 13px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ec-color, #94a3b8);
    box-shadow: 0 0 11px var(--ec-color, rgba(148, 163, 184, 0.8));
    transform: translate(-50%, -50%);
}

.marker-water-ec-scale > b {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 13px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.65);
    transform: translate(-50%, -50%);
}

.marker-water-ec-scale-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
}

.marker-water-ec-scale-legend > small {
    color: #4f7180;
    font-size: 6px;
    font-weight: 650;
}

.marker-water-ec-derived-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.marker-water-ec-derived {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    outline: 0;
    background: rgba(255, 255, 255, 0.022);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.marker-water-ec-derived:hover,
.marker-water-ec-derived:focus-visible {
    border-color: var(--ec-derived-color, rgba(148, 163, 184, 0.4));
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}

.marker-water-ec-derived.is-stale {
    opacity: 0.6;
}

.marker-water-ec-ring {
    position: relative;
    display: block;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
}

.marker-water-ec-ring > svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.marker-water-ec-ring-track,
.marker-water-ec-ring-fill {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
}

.marker-water-ec-ring-track {
    stroke: rgba(148, 163, 184, 0.16);
}

.marker-water-ec-ring-fill {
    stroke: var(--ec-derived-color, #94a3b8);
    stroke-dasharray: var(--ec-ring-level) 100;
    filter: drop-shadow(0 0 5px var(--ec-derived-color, rgba(148, 163, 184, 0.6)));
    transition: stroke-dasharray 0.6s ease;
}

.marker-water-ec-ring > b {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--ec-derived-color, #94a3b8);
    font-size: 12px;
    transform: translate(-50%, -50%);
}

.marker-water-ec-derived-body {
    min-width: 0;
    flex: 1 1 auto;
}

.marker-water-ec-derived-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    overflow: hidden;
    color: #7f9bab;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
    white-space: nowrap;
}

.marker-water-ec-derived-value {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin: 2px 0 4px;
}

.marker-water-ec-derived-value > strong {
    color: #f2f9ff;
    font-size: 18px;
    font-weight: 780;
    letter-spacing: -0.7px;
    line-height: 1;
}

.marker-water-ec-derived-value > small {
    color: var(--ec-derived-color, #94a3b8);
    font-size: 8px;
    font-weight: 700;
}

.marker-water-ec-derived-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marker-water-ec-derived-stats > span {
    min-width: 0;
    text-align: center;
}

.marker-water-ec-derived-stats > span + span {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.marker-water-ec-derived-stats small,
.marker-water-ec-derived-stats strong {
    display: block;
}

.marker-water-ec-derived-stats small {
    color: #55707f;
    font-size: 6px;
    text-transform: uppercase;
}

.marker-water-ec-derived-stats strong {
    margin-top: 2px;
    color: #adc7d4;
    font-size: 8px;
}

.marker-water-ec-factor {
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px dashed rgba(148, 163, 184, 0.25);
    border-radius: 999px;
    color: #6d8798;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
}

.marker-water-ec-factor > b {
    color: #e2f1fb;
    font-size: 9px;
}

.marker-water-ec-factor > em {
    color: #55707f;
    font-size: 6px;
    font-style: normal;
}

@media (max-width: 767px) {
    .marker-water-ec-derived-group {
        grid-template-columns: minmax(0, 1fr);
    }

    .marker-water-ec-primary-value > strong {
        font-size: 26px;
    }
}

.marker-multi-sensor-widget {
    width: 100%;
    margin: 10px 0 4px;
}

.marker-multi-sensor-card {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 19px;
    color: #eef6ff;
    background:
        radial-gradient(circle at 12% 8%, rgba(56, 189, 248, 0.12), transparent 34%),
        radial-gradient(circle at 88% 96%, rgba(167, 139, 250, 0.12), transparent 36%),
        linear-gradient(150deg, rgba(18, 32, 46, 0.98), rgba(5, 12, 20, 0.99));
    box-shadow:
        0 14px 28px -20px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.065);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.marker-multi-sensor-card:hover {
    border-color: var(--multi-color, rgba(148, 163, 184, 0.45));
    box-shadow:
        0 16px 32px -20px rgba(0, 0, 0, 0.94),
        0 0 24px rgba(148, 163, 184, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.marker-multi-sensor-card.is-stale {
    opacity: 0.58;
}

/* ── Nagłówek karty — układ wspólny z widgetami pojedynczych parametrów ── */
.marker-multi-sensor-header {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 11px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(255, 255, 255, 0.018);
}

.marker-multi-sensor-title {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.marker-multi-sensor-title > i {
    display: flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 9px;
    color: var(--multi-color, #94a3b8);
    background: rgba(148, 163, 184, 0.08);
    box-shadow: 0 0 14px rgba(148, 163, 184, 0.08);
}

.marker-multi-sensor-title > span {
    min-width: 0;
}

.marker-multi-sensor-title strong,
.marker-multi-sensor-title small {
    display: block;
}

.marker-multi-sensor-title strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 750;
}

.marker-multi-sensor-title strong > em {
    padding: 1px 5px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 5px;
    background: rgba(148, 163, 184, 0.08);
    color: var(--multi-color, #94a3b8);
    font-size: 7px;
    font-style: normal;
    font-weight: 750;
    letter-spacing: 0.2px;
}

.marker-multi-sensor-title small {
    overflow: hidden;
    max-width: 230px;
    margin-top: 1px;
    color: #5d7385;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-multi-sensor-status {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    color: #4ade80;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-multi-sensor-status > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.marker-multi-sensor-status > span > i:empty {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.marker-multi-sensor-status > small {
    color: #55707f;
    font-size: 6px;
    font-weight: 650;
    text-transform: none;
}

.marker-multi-sensor-status.is-stale {
    color: #fbbf24;
}

/* ── Tabela porównawcza sensorów ── */
.marker-multi-sensor-table {
    width: 100%;
    padding: 6px;
}

.marker-multi-sensor-columns,
.marker-multi-sensor-row {
    display: grid;
    grid-template-columns: minmax(78px, 1.35fr) repeat(var(--multi-columns, 4), minmax(42px, 1fr));
    align-items: stretch;
}

.marker-multi-sensor-columns {
    min-height: 26px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.marker-multi-sensor-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3px 2px;
    text-align: center;
}

.marker-multi-sensor-column strong {
    color: #94a3b8;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.3px;
    line-height: 11px;
    text-transform: uppercase;
}

.marker-multi-sensor-column small {
    color: #55707f;
    font-size: 6px;
    font-weight: 650;
    line-height: 9px;
}

.marker-multi-sensor-column.is-primary strong {
    color: var(--multi-color, #94a3b8);
}

.marker-multi-sensor-column.is-sensor {
    align-items: flex-start;
    padding-left: 8px;
    color: #55707f;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.marker-multi-sensor-row {
    min-height: 44px;
    margin-top: 4px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.022);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.marker-multi-sensor-row:hover {
    border-color: rgba(148, 163, 184, 0.26);
    background: rgba(255, 255, 255, 0.04);
}

.marker-multi-sensor-empty {
    margin-top: 4px;
    padding: 12px 10px;
    border: 1px dashed rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    color: #55707f;
    font-size: 9px;
    text-align: center;
}

.marker-multi-sensor-sensor,
.marker-multi-sensor-value {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.marker-multi-sensor-sensor {
    gap: 6px;
    justify-content: flex-start;
    padding: 6px 4px 6px 8px;
}

.marker-multi-sensor-sensor > b {
    flex: 0 0 auto;
    padding: 2px 5px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 6px;
    background: rgba(2, 6, 14, 0.5);
    color: var(--multi-color, #94a3b8);
    font-size: 8px;
    font-weight: 750;
}

.marker-multi-sensor-sensor > strong {
    overflow: hidden;
    min-width: 0;
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 650;
    line-height: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-multi-sensor-value {
    gap: 2px;
    padding: 6px 2px;
    color: #e2eef5;
    font-variant-numeric: tabular-nums;
}

.marker-multi-sensor-value strong {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.25px;
    line-height: 17px;
}

.marker-multi-sensor-value.is-primary strong {
    color: var(--multi-color, #eef6ff);
    font-size: 15px;
}

.marker-multi-sensor-value.is-stale {
    opacity: 0.5;
}

.marker-multi-sensor-value.is-empty strong {
    color: #55707f;
    font-size: 11px;
    font-weight: 650;
}

.marker-multi-sensor-trend {
    width: 7px;
    flex: 0 0 7px;
    font-size: 9px;
    font-style: normal;
    text-align: center;
}

.marker-multi-sensor-trend.is-up { color: #fb923c; }
.marker-multi-sensor-trend.is-down { color: #38bdf8; }
.marker-multi-sensor-trend.is-flat { color: transparent; }

@media (max-width: 500px) {
    .marker-multi-sensor-columns,
    .marker-multi-sensor-row {
        grid-template-columns: minmax(62px, 1.2fr) repeat(var(--multi-columns, 4), minmax(36px, 1fr));
    }

    .marker-multi-sensor-sensor {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2px;
    }

    .marker-multi-sensor-value strong { font-size: 12px; }

    .marker-multi-sensor-value.is-primary strong { font-size: 13px; }
}














/* .select-tile-contener .marker-custom-header .close-marker {
    position: absolute;
    font-size: 35px;
    background-color: #DC3545;
    color: #FFFFFF;
    top: 10px;
    left: 50%;
    margin-left: -12px;
    border-radius: 50%;
} */

.marker-main-contener-control {
    font-size: 25px;
    text-align: left;
    margin-left: 15px;
    /* color: #000; */
    /* background-color: #33373B; */
    /* border-radius: 15px; */
    /* color: #b4bbc2; */
    /* height: 50px; */
    /* p-0 m-0 mb-3 */
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
    text-align: center;
}

.marker-main-contener-control .close-tiles-contener {
    background-color: #33373B;
    border-radius: 15px;
    padding: 10px;
    align-items: end;
    margin-left: 15px;
    color: #b4bbc2 !important;
}

.marker-main-contener-control .close-tiles-contener:hover {
    background-color: #2193f3;
    color: #ffffff !important;
}

.marker-main-contener-control .close-tiles-contener-header {
    background-color: #33373B;
    border-radius: 15px;
    padding: 10px;
    align-items: end;
    margin-left: 10px;
    font-size: 20px;
    color: #b4bbc2 !important;
}

.tiles-list-contener .tiles-list-contener-control,
.marker-main-contener-control {
    display: none;
}

@media (max-width: 767px) {

    .select-tile-contener {
        position: fixed;
        top: auto;
        right: max(6px, env(safe-area-inset-right));
        bottom: max(4px, env(safe-area-inset-bottom));
        left: max(6px, env(safe-area-inset-left));
        height: min(94dvh, calc(100dvh - 8px)) !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none;
        max-height: calc(100vh - 8px) !important;
        max-height: min(94dvh, calc(100dvh - 8px)) !important;
        border: 1px solid rgba(101, 189, 218, 0.2);
        border-radius: 24px 24px 18px 18px;
        background:
            radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.1), transparent 28%),
            rgba(5, 14, 22, 0.96);
        box-shadow:
            0 -24px 58px rgba(0, 0, 0, 0.52),
            inset 0 1px 0 rgba(255, 255, 255, 0.07);
        opacity: 0;
        transform: translateY(calc(100% + 24px));
        transition:
            opacity 0.22s ease,
            transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .select-tile-contener::-webkit-scrollbar-track {
        margin-block: 32px;
    }

    .marker-panel-scroll-cue {
        height: 32px;
    }

    .marker-panel-scroll-cue-up {
        border-radius: 24px 24px 0 0;
    }

    .marker-panel-scroll-cue-down {
        border-radius: 0 0 18px 18px;
    }

    .select-tile-contener.active {
        opacity: 1;
        transform: translateY(0);
    }

    .select-tile-contener::before {
        position: absolute;
        z-index: 8;
        top: 7px;
        left: 50%;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: rgba(167, 211, 226, 0.34);
        content: "";
        pointer-events: none;
        transform: translateX(-50%);
    }

    .select-tile-contener .marker-main-contener {
        position: relative;
        padding: 46px 11px max(11px, env(safe-area-inset-bottom)) !important;
    }

    .select-tile-contener .marker-main-contener-control {
        position: absolute;
        z-index: 12;
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        padding: 0;
        margin: 0;
    }

    .select-tile-contener .marker-main-contener-control .close-tiles-contener {
        display: flex;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        border: 1px solid rgba(125, 211, 252, 0.14);
        border-radius: 50%;
        background: rgba(8, 22, 32, 0.88);
        color: #8eacb9 !important;
        font-size: 17px;
        box-shadow: 0 7px 18px rgba(0, 0, 0, 0.26);
    }

    .select-tile-contener .marker-water-hero-widget:first-of-type {
        margin-top: 0;
    }

    .tiles-list-contener .tiles-list-contener-control,
    .marker-main-contener-control {
        display: inline-block !important;
    }
}

.select-tile-contener-color {
    color: #bec5cc;
}

/* .select-tile-contener-button-color.tile-go-to-object,
.select-tile-contener-button-color.tile-fly-to,
.select-tile-contener-button-color.tile-open-marker,
.select-tile-contener-button-color.map-go-to-object { */
    /* background-color: #ffffff14; */
    /* box-shadow: inset 4px 0px 5px 0px #ffffff14; */
/* } */

.select-tile-contener-button-color:not( [disabled] ):hover {
    background-color: #2193f3 !important;
    color: #FFFFFF !important;
    cursor: pointer;
}

.select-tile-contener-hover:hover {
    background-color: #2193f3 !important;
    color: #FFFFFF !important;
    cursor: pointer;
    border-radius: 15px 0 0 15px;
}

.select-tile-contener-red-alert {
    color: #ff4949;
}

.select-tile-contener-orange-alert {
    color: #ffac26;
}

/* TILE CONTENER */
.tile-list-el {
    width: 350px;
    height: 100px;
    background-color: #33373B;
    border-radius: 15px;
    color: #b4bbc2;
}


/* TILE HEADER BY PK */
/* .select-tile-header-logo { */
    /* left: -3px;
    top: 25px; */
    /* justify-content: center;
    align-items: center; */
/* } */

/* .select-tile-header-logo div:first {} */

.select-tile-header-logo div img {
    width: 100%;
    max-width: 50px;
    border: 3px solid #ccc;
    border-radius: 50%;
}

.select-tile-header-logo .tile-wqi {
    /* backdrop-filter: blur(10px); */
    min-width: 20px;
    opacity: 0;
    top: 7px;
    font-size: 10px;
}

.select-tile-header-logo .tile-wqi-unit {
    bottom: 7px;
    font-size: 10px;
    opacity: 0;
}

.select-tile-header-name {
    left: 8px;
    font-weight: 600;
    font-size: 15px;
    top: 5px;
    /* margin-bottom: 0;
    margin-top: -10px; */
}



.select-tile-header-desc {
    left: 8px;
    top: 4px;
    font-size: 12px;
}

/* .select-tile-header-arrow-contener {
    position: relative;
    color: #bec5cc;
    background-color: #33373B;
    width: 50px;
    height: 100%;
    border-radius: 0px 15px 15px 0px;
} */

/* .select-tile-header-arrow-arrow { */
/* left: -8px;
    top: 27px; */
/* font-size: 46px; */
/* position: relative; */
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
/* text-align: center; */
/* } */

/* LITTLE ICON WITH VALUE BY PK */
.little-widget-icon-value-parent {
    /* float: left; */
    height: 40px;
    font-size: 14px;
    position: relative;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: default;
}

.little-widget-icon-value-value {
    font-size: 11px;
    top: -6px;
    font-weight: 600;
}

.little-widget-icon-value-value-little {
    font-size: 7px;
    font-weight: 600;
    line-height: 7px;
    top: -8px;
    justify-content: center;
}

.little-widget-icon-value-icon {
    margin-left: -17px;
    margin-top: 8px;
}



/* Sponsor */

/* Modern multi-parameter chart window. The legacy widget-chart-in-window remains untouched. */
.waterly-chart-lab {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: grid;
    padding: clamp(12px, 3vw, 34px);
    place-items: center;
    opacity: 0;
    transition: opacity 0.24s ease;
}

.waterly-chart-lab.is-visible { opacity: 1; }
.waterly-chart-lab.is-closing { opacity: 0; }

.waterly-chart-lab-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 8, 14, 0.74);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.waterly-chart-lab-window {
    position: relative;
    isolation: isolate;
    display: grid;
    width: min(1180px, 100%);
    height: min(760px, calc(100dvh - 40px));
    overflow: hidden;
    border: 1px solid rgba(103, 232, 249, 0.2);
    border-radius: 26px;
    color: #eafaff;
    background:
        radial-gradient(circle at 5% 0, rgba(45, 212, 191, 0.12), transparent 28%),
        radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.1), transparent 34%),
        linear-gradient(145deg, rgba(14, 35, 48, 0.985), rgba(4, 13, 22, 0.995) 62%);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    transform: translateY(16px) scale(0.985);
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.waterly-chart-lab.is-visible .waterly-chart-lab-window { transform: none; }

.waterly-chart-lab-window > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(148, 203, 222, 0.08);
}

.waterly-chart-lab-window > header div { display: flex; min-width: 0; flex-direction: column; }
.waterly-chart-lab-window > header small { color: #5eead4; font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.waterly-chart-lab-window > header sup { color: #38bdf8; font-size: .62em; }
.waterly-chart-lab-window > header strong { margin-top: 4px; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.04em; }
.waterly-chart-lab-window > header span { margin-top: 2px; color: #6e8d9a; font-size: 10px; }

.waterly-chart-lab-close {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(148, 203, 222, .14);
    border-radius: 12px;
    color: #8fb0bd;
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
}

.waterly-chart-lab-close:hover { color: #fff; border-color: rgba(103, 232, 249, .34); background: rgba(56, 189, 248, .09); }

.waterly-chart-lab-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 22px;
}

.waterly-chart-lab-periods {
    display: inline-flex;
    padding: 3px;
    border: 1px solid rgba(148, 203, 222, .1);
    border-radius: 11px;
    background: rgba(255, 255, 255, .018);
}

.waterly-chart-lab-tools-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.waterly-chart-lab-temperature {
    height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(56, 189, 248, .15);
    border-radius: 10px;
    color: #6f93a1;
    background: rgba(56, 189, 248, .035);
    font-size: 8px;
    font-weight: 700;
    cursor: pointer;
}

.waterly-chart-lab-temperature i { margin-right: 5px; color: #38bdf8; }
.waterly-chart-lab-temperature.is-active { border-color: rgba(56, 189, 248, .38); color: #dff8ff; background: rgba(56, 189, 248, .13); box-shadow: 0 0 16px rgba(56, 189, 248, .08); }

.waterly-chart-lab-periods button {
    padding: 7px 13px;
    border: 0;
    border-radius: 8px;
    color: #668694;
    background: transparent;
    font-size: 9px;
    font-weight: 750;
    cursor: pointer;
}

.waterly-chart-lab-periods button.is-active { color: #dffaff; background: rgba(56, 189, 248, .13); box-shadow: inset 0 0 0 1px rgba(103, 232, 249, .12); }

.waterly-chart-lab-toolbar label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid rgba(94, 234, 212, .15);
    border-radius: 11px;
    color: #5eead4;
    background: rgba(45, 212, 191, .055);
}

.waterly-chart-lab-toolbar select { height: 34px; max-width: 230px; border: 0; outline: 0; color: #9ec2ce; background: transparent; font-size: 9px; }

.waterly-chart-lab-series { display: flex; min-height: 40px; align-items: center; gap: 7px; padding: 0 22px 10px; overflow-x: auto; }
.waterly-chart-lab-series button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--series-color) 28%, transparent); border-radius: 999px; color: #cbe4ec; background: color-mix(in srgb, var(--series-color) 8%, transparent); font-size: 8px; cursor: pointer; }
.waterly-chart-lab-series button > i { width: 7px; height: 7px; border-radius: 50%; background: var(--series-color); box-shadow: 0 0 7px var(--series-color); }
.waterly-chart-lab-series button small { color: var(--series-color); }
.waterly-chart-lab-series button b { margin-left: 2px; color: #6b8995; font-size: 7px; }

.waterly-chart-lab-canvas { position: relative; min-height: 0; margin: 0 16px; padding: 12px 10px 8px; border: 1px solid rgba(148, 203, 222, .08); border-radius: 18px; background: rgba(2, 11, 18, .42); }
.waterly-chart-lab-canvas canvas { width: 100% !important; height: 100% !important; }
.waterly-chart-lab-loader,
.waterly-chart-lab-empty { position: absolute; z-index: 4; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 9px; border-radius: inherit; color: #7194a2; background: rgba(3, 13, 21, .78); font-size: 10px; }
.waterly-chart-lab-loader.is-visible,
.waterly-chart-lab-empty.is-visible { display: flex; }
.waterly-chart-lab-loader i { color: #38bdf8; font-size: 20px; }
.waterly-chart-lab-empty i { color: #5a7b89; font-size: 24px; }

.waterly-chart-lab-window > footer { display: flex; align-items: center; justify-content: space-between; padding: 13px 22px 16px; color: #577785; font-size: 8px; }
.waterly-chart-lab-window > footer i { margin-right: 5px; color: #38bdf8; }
.waterly-chart-lab-window > footer small { color: #4f7180; }

@media (max-width: 767px) {
    .waterly-chart-lab { padding: 5px; }
    .waterly-chart-lab-window { width: 100%; height: calc(100dvh - 10px); border-radius: 22px; }
    .waterly-chart-lab-window > header { padding: 15px 14px 12px; }
    .waterly-chart-lab-toolbar { align-items: stretch; flex-direction: column; padding: 10px 14px; }
    .waterly-chart-lab-tools-left { justify-content: space-between; }
    .waterly-chart-lab-periods { flex: 0 0 auto; }
    .waterly-chart-lab-temperature { min-width: 0; }
    .waterly-chart-lab-toolbar label { width: 100%; }
    .waterly-chart-lab-toolbar select { width: 100%; max-width: none; }
    .waterly-chart-lab-series { padding: 0 14px 8px; }
    .waterly-chart-lab-canvas { margin: 0 7px; padding: 8px 3px; }
    .waterly-chart-lab-window > footer { padding: 10px 14px 13px; }
    .waterly-chart-lab-window > footer small { display: none; }
}

.select-tile-contener .marker-main-contener-sponsor {
    position: relative;
    isolation: isolate;
    display: block;
    overflow: hidden;
    height: 88px;
    padding: 0;
    margin: 12px 0 4px;
    border: 1px solid rgba(109, 213, 237, 0.18);
    border-radius: 15px 15px 22px 22px;
    background:
        radial-gradient(circle at 9% 20%, rgba(251, 191, 36, 0.12), transparent 31%),
        radial-gradient(circle at 94% 100%, rgba(56, 189, 248, 0.13), transparent 38%),
        linear-gradient(135deg, rgba(24, 39, 51, 0.97), rgba(7, 15, 24, 0.99));
    background-color: #0b151f;
    box-shadow:
        0 20px 38px -22px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    color: inherit;
    cursor: pointer;
    opacity: 1;
    text-decoration: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.select-tile-contener .marker-main-contener-sponsor::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 12%;
    left: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.72), rgba(56, 189, 248, 0.72), transparent);
    content: "";
}

.select-tile-contener .marker-main-contener-sponsor::after {
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: 0.15;
    background-image:
        linear-gradient(rgba(109, 213, 237, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(109, 213, 237, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    content: "";
    pointer-events: none;
}

.select-tile-contener .marker-main-contener-sponsor:hover,
.select-tile-contener .marker-main-contener-sponsor:focus-visible {
    border-color: rgba(109, 213, 237, 0.42);
    outline: none;
    box-shadow:
        0 23px 42px -22px rgba(0, 0, 0, 0.95),
        0 0 24px rgba(56, 189, 248, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.select-tile-contener .marker-main-contener-sponsor.is-disabled {
    cursor: default;
    pointer-events: none;
}

.select-tile-contener .marker-main-contener-sponsor.is-disabled:hover {
    border-color: rgba(109, 213, 237, 0.18);
    box-shadow:
        0 20px 38px -22px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transform: none;
}

.select-tile-contener .marker-main-contener-sponsor.is-disabled .marker-sponsor-action {
    display: none;
}

.marker-sponsor-content {
    position: relative;
    z-index: 1;
    display: grid;
    height: 100%;
    align-items: center;
    grid-template-columns: 56px minmax(0, 1fr) 34px;
    gap: 11px;
    padding: 11px 13px;
}

.select-tile-header-sponsor-logo {
    display: flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(251, 191, 36, 0.24);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.12), rgba(255, 255, 255, 0.035));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 18px rgba(251, 191, 36, 0.06);
}

.select-tile-header-sponsor-logo img {
    width: auto;
    max-width: 42px;
    height: auto;
    max-height: 42px;
    object-fit: contain;
}

.select-tile-header-sponsor-description {
    min-width: 0;
    margin: 0;
    font-size: 10px;
    line-height: 1.15;
}

.select-tile-contener .marker-main-contener-sponsor .select-tile-header-sponsor-description-name {
    overflow: hidden;
    margin-top: 3px;
    color: #eef9ff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-tile-contener .marker-main-contener-sponsor .select-tile-header-sponsor-description-comment {
    color: #fbbf24;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.84;
}

.select-tile-header-sponsor-description-url {
    overflow: hidden;
    margin-top: 5px;
    color: #6f8e9e;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-sponsor-action {
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.07);
    color: #76d7f5;
    font-size: 11px;
    transform: rotate(45deg);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.marker-main-contener-sponsor:hover .marker-sponsor-action,
.marker-main-contener-sponsor:focus-visible .marker-sponsor-action {
    background: rgba(56, 189, 248, 0.16);
    color: #d9f7ff;
    transform: rotate(45deg) translate(-2px, -2px);
}

/* Sponsor - END */







/*  */

.tile-last-connect-human,
.map-last-connect-human {
    /* position: absolute; */
    /* bottom: -3px; */
    font-size: 8px;
    top: -8px;
    font-weight: 600;
    white-space: nowrap;
    /* transform-origin: center;
    left: 50%;
    transform: translate(-50%, 0%); */
}

.map-go-to-object {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.tile-go-to-object[disabled],
.map-go-to-object[disabled] {
    color: #6a6a6a;
}

.tile-go-to-object {
    height: 33.333%;
    border-top-right-radius: 15px;
}

.tile-fly-to {
    height: 33.333%;
}

.tile-open-marker {
    height: 33.333%;
    border-bottom-right-radius: 15px;
}


/* .arker-widget-group-item{ */
    /* cursor: pointer; */
/* } */

.widget-dynamic-chart-tile-hover:not( [disabled] ):hover {
    color: #04529c;
    cursor: pointer;
}

.widget-dynamic-chart-marker-hover:not( [disabled] ):hover {
    color: #2193f3;
    cursor: pointer;
}

/* .period-selector {
    color: #b4bbc2 !important;
    font-weight: 100;
    appearance: none !important;
}

.period-selector:hover {
    color: #2193F3 !important;
} */





















.marker-widget-service {
    background-color: #ff4949;
    color: #FFFFFF;
    border-radius: 15px;
}

/* Touch-first marker panel. No information on a small screen depends on hover. */
@media (max-width: 767px) {
    .marker-atmosphere-widget,
    .marker-atmosphere-widget *,
    .marker-atmosphere-widget *::before,
    .marker-atmosphere-widget *::after {
        animation: none !important;
        transition: none !important;
    }

    .marker-water-temperature-widget,
    .marker-water-temperature-widget *,
    .marker-water-temperature-widget *::before,
    .marker-water-temperature-widget *::after {
        animation: none !important;
        transition: none !important;
    }

    .marker-water-history-expand {
        position: absolute;
        z-index: 7;
        top: -2px;
        left: 0;
        display: inline-flex;
        height: 22px;
        align-items: center;
        gap: 4px;
        padding: 0 7px;
        border: 1px solid rgba(56, 189, 248, 0.2);
        border-radius: 999px;
        outline: 0;
        color: #72d7f3;
        background: rgba(7, 27, 40, 0.9);
        font: inherit;
    }

    .marker-water-hero-history {
        pointer-events: auto;
    }

    .marker-water-history-expand i {
        font-size: 7px;
    }

    .marker-water-history-expand span {
        font-size: 6px;
        font-weight: 750;
    }

    .marker-water-hero-card.is-history-expanded .marker-water-hero-content {
        height: auto;
        overflow: visible;
        grid-template-columns: minmax(0, 1fr);
    }

    .marker-water-hero-card.is-history-expanded .marker-water-hero-score,
    .marker-water-hero-card.is-history-expanded .marker-water-hero-summary {
        display: none;
    }

    .marker-water-hero-card.is-history-expanded .marker-water-hero-history {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: 190px;
        min-height: 190px;
        padding: 4px 0 0;
        border: 0;
        grid-column: 1 / -1;
    }

    .marker-water-hero-card.is-history-expanded .marker-water-hero-history > svg {
        height: 158px;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .marker-water-hero-card.is-history-expanded .marker-water-hero-history > header,
    .marker-water-hero-card.is-history-expanded .marker-water-hero-history > footer {
        opacity: 1;
        transform: translateY(0);
    }

    .marker-water-hero-card.is-history-expanded .marker-water-history-axis,
    .marker-water-hero-card.is-history-expanded .marker-water-history-area,
    .marker-water-hero-card.is-history-expanded .marker-water-history-line,
    .marker-water-hero-card.is-history-expanded .marker-water-history-dot {
        opacity: 1;
    }

    .marker-water-hero-card.is-history-expanded .marker-water-history-point-hit {
        pointer-events: all;
    }

    .marker-water-hero-card:not(.is-history-expanded) .marker-water-hero-history {
        cursor: zoom-in;
    }

    .marker-atmosphere-minimal-value {
        height: 28px;
        transform: translateY(2px) scale(0.76);
    }

    .marker-atmosphere-minimal-scale > b,
    .marker-atmosphere-minimal-scale > em {
        opacity: 1;
    }

    .marker-atmosphere-minimal-trend b {
        max-height: 12px;
        opacity: 1;
        transform: translateY(0);
    }

    .marker-atmosphere-glass-range,
    .marker-atmosphere-glass-pressure-range,
    .marker-atmosphere-glass-pressure-scale > b,
    .marker-atmosphere-glass-pressure-scale > em {
        opacity: 1;
    }

    .marker-atmosphere-temperature:hover,
    .marker-atmosphere-temperature:active,
    .marker-atmosphere-metric:hover,
    .marker-atmosphere-metric:active {
        background-color: transparent;
        transform: none !important;
    }

    .marker-atmosphere-glass-value,
    .marker-atmosphere-card:hover .marker-atmosphere-glass-value {
        transform: none !important;
    }

    .marker-water-hero-score:hover .marker-water-hero-orbit {
        box-shadow: 0 0 24px color-mix(in srgb, var(--wqi-color) 8%, transparent);
        transform: none;
    }

    .marker-water-hero-temperature:hover {
        border-color: rgba(56, 189, 248, 0.16);
        background:
            radial-gradient(circle at 50% 105%, rgba(14, 165, 233, 0.19), transparent 52%),
            linear-gradient(155deg, rgba(56, 189, 248, 0.08), rgba(255, 255, 255, 0.018));
        transform: none;
    }

    .marker-water-temperature-card:hover,
    .marker-water-temperature-card:focus-visible {
        border-color: rgba(56, 189, 248, 0.2);
        box-shadow:
            0 14px 28px -20px rgba(0, 0, 0, 0.9),
            inset 0 1px 0 rgba(255, 255, 255, 0.065);
        transform: none;
    }

    .marker-water-hero-quick-action:hover {
        border-color: rgba(125, 211, 252, 0.14);
        color: #7292a1;
        background:
            radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.08), transparent 68%),
            linear-gradient(155deg, rgba(18, 39, 52, 0.96), rgba(5, 15, 24, 0.98));
        transform: none;
    }

    .marker-water-hero-quick-action:hover i {
        color: #60cdeb;
    }

    .marker-water-hero-quick-action:active,
    .marker-water-history-expand:active {
        transform: scale(0.97);
    }

    .select-tile-contener .marker-main-contener-sponsor:hover {
        border-color: rgba(109, 213, 237, 0.18);
        box-shadow:
            0 20px 38px -22px rgba(0, 0, 0, 0.9),
            inset 0 1px 0 rgba(255, 255, 255, 0.07);
        transform: none;
    }

    .marker-main-contener-sponsor:hover .marker-sponsor-action {
        background: rgba(56, 189, 248, 0.07);
        color: #76d7f5;
        transform: rotate(45deg);
    }
}
/* Point browser */
.tiles-list-contener {
    width: min(440px, calc(100vw - 20px));
    max-height: 100% !important;
    padding: 14px;
    box-sizing: border-box;
    overflow: hidden;
    border-left: 1px solid rgba(89, 208, 255, .16);
    background:
        radial-gradient(circle at 90% 4%, rgba(50, 211, 187, .16), transparent 27%),
        linear-gradient(155deg, rgba(7, 23, 34, .97), rgba(5, 14, 23, .94));
    box-shadow: -24px 0 70px rgba(0, 0, 0, .42);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

.tiles-list-header {
    position: relative;
    padding: 14px 10px 16px;
}

.tiles-list-heading {
    padding-right: 52px;
}

.tiles-list-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #62d9c8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.tiles-list-eyebrow span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #48d8bf;
    box-shadow: 0 0 0 5px rgba(72, 216, 191, .11), 0 0 16px #48d8bf;
}

.tiles-list-heading h2 {
    margin: 8px 0 4px;
    color: #f4fbff;
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -.035em;
}

.tiles-list-heading p {
    margin: 0;
    color: #8da5b5;
    font-size: 12px;
}

.tiles-list-contener .close-tiles-list-contener {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 13px;
    background: rgba(255, 255, 255, .055);
    color: #a9bdc9;
    cursor: pointer;
    transition: .2s ease;
}

.tiles-list-contener .close-tiles-list-contener:hover {
    border-color: rgba(90, 211, 240, .35);
    background: rgba(57, 188, 221, .14);
    color: #fff;
    transform: rotate(4deg);
}

.tiles-list-search {
    position: relative;
    display: flex;
    height: 48px;
    align-items: center;
    margin-top: 18px;
    border: 1px solid rgba(118, 206, 231, .16);
    border-radius: 15px;
    background: rgba(1, 10, 17, .48);
    transition: .2s ease;
}

.tiles-list-search:focus-within {
    border-color: rgba(82, 215, 206, .58);
    box-shadow: 0 0 0 4px rgba(50, 211, 187, .08);
}

.tiles-list-search > i {
    margin-left: 16px;
    color: #57cdbf;
}

.tiles-list-search input {
    min-width: 0;
    flex: 1;
    padding: 0 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #edfaff;
    font-size: 13px;
}

.tiles-list-search input::placeholder {
    color: #637b8b;
}

.tiles-list-search-clear {
    display: none;
    width: 34px;
    height: 34px;
    margin-right: 7px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #708895;
    cursor: pointer;
}

.tiles-list-search.has-value .tiles-list-search-clear {
    display: block;
}

.tiles-list-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 2px 0;
    color: #7f96a4;
    font-size: 10px;
}

.tiles-list-location {
    padding: 2px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #63bdb5;
    font: inherit;
    cursor: pointer;
    transition: color .18s ease;
}

.tiles-list-location:hover:not(:disabled) {
    color: #91ede1;
}

.tiles-list-location:disabled {
    cursor: default;
}

.tiles-list-location i {
    margin-right: 4px;
}

.tiles-list-results {
    height: calc(100% - 194px);
    padding: 4px 6px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(84, 194, 199, .35) transparent;
}

.tiles-list-section {
    margin: 12px 0 22px;
}

.tiles-list-section:last-child {
    margin-bottom: 8px;
}

.tiles-list-section-header {
    position: sticky;
    z-index: 2;
    top: -4px;
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    margin: 0 -2px 8px;
    padding: 7px 8px;
    border-radius: 13px;
    background: linear-gradient(90deg, rgba(7, 23, 34, .96), rgba(7, 23, 34, .86));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.tiles-list-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tiles-list-section-heading > i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(91, 210, 203, .2);
    border-radius: 10px;
    background: rgba(54, 194, 185, .09);
    color: #61d1c5;
    font-size: 11px;
}

.tiles-list-section-heading strong,
.tiles-list-section-heading small {
    display: block;
}

.tiles-list-section-heading strong {
    color: #eaf8fc;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .02em;
}

.tiles-list-section-heading small {
    margin-top: 1px;
    color: #698391;
    font-size: 8px;
}

.tiles-list-section-count {
    display: grid;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    color: #77909e;
    font-size: 9px;
    font-weight: 700;
}

.is-favorites-section .tiles-list-section-heading > i {
    border-color: rgba(245, 190, 72, .25);
    background: rgba(245, 190, 72, .1);
    color: #f5c86e;
}

.is-favorites-section .tiles-list-section-count {
    color: #e9bd62;
}

.tile-list-el {
    width: 100% !important;
    height: auto;
    margin: 9px 0;
    overflow: hidden;
    border: 1px solid rgba(122, 190, 211, .13);
    border-radius: 18px;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025)),
        rgba(8, 24, 35, .82);
    color: #d9e9f0;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.tile-list-el:hover {
    border-color: rgba(73, 210, 202, .34);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .23), inset 0 1px rgba(255, 255, 255, .04);
    transform: translateY(-2px);
}

.tile-list-el.is-subscribed {
    border-color: rgba(245, 190, 72, .3);
    background: linear-gradient(125deg, rgba(245, 190, 72, .09), rgba(14, 39, 48, .78));
}

.tile-list-main {
    display: flex;
    width: 100%;
    min-height: 92px;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.tile-list-avatar {
    position: relative;
    display: grid;
    isolation: isolate;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--tile-quality-color, #8297a3) 66%, rgba(255, 255, 255, .2));
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .2), transparent 23%),
        color-mix(in srgb, var(--tile-quality-color, #8297a3) 18%, rgba(5, 16, 24, .94));
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--tile-quality-color, #8297a3) 8%, transparent),
        0 0 24px -8px var(--tile-quality-color, #8297a3),
        inset 0 1px 0 rgba(255, 255, 255, .13);
}

.tile-list-avatar::before {
    position: absolute;
    z-index: -1;
    inset: 5px;
    border: 1px solid color-mix(in srgb, var(--tile-quality-color, #8297a3) 45%, transparent);
    border-radius: inherit;
    content: "";
}

.tile-list-avatar-value {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--tile-quality-color, #8297a3);
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .62);
}

.tile-list-avatar-value small {
    margin-bottom: 2px;
    color: color-mix(in srgb, var(--tile-quality-color, #8297a3) 70%, white);
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .12em;
}

.tile-list-avatar-value strong {
    max-width: 48px;
    overflow: hidden;
    color: #f7fdff;
    font-size: 19px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
    text-overflow: ellipsis;
}

.tile-list-copy {
    display: block;
    min-width: 0;
    flex: 1;
}

.tile-list-topline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tile-display-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: #f2faff;
    font-size: 14px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tile-list-distance {
    flex: 0 0 auto;
    color: #73d8cc;
    font-size: 10px;
    font-weight: 700;
}

.tile-description {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #849aa8;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tile-list-meta {
    display: flex;
    min-height: 21px;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.tile-list-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    color: #89a3b0;
    font-size: 9px;
}

.tile-list-nearby,
.tile-list-subscribed {
    display: none !important;
}

.is-nearby .tile-list-nearby {
    display: inline-flex !important;
    background: rgba(51, 211, 186, .1);
    color: #66d8ca;
}

.is-subscribed .tile-list-subscribed {
    display: inline-flex !important;
    background: rgba(245, 190, 72, .12);
    color: #f5c86e;
}

.tile-list-chevron {
    color: #4c6574;
    font-size: 11px;
    transition: .2s ease;
}

.tile-list-main:hover .tile-list-chevron {
    color: #63d7ca;
    transform: translateX(3px);
}

.tile-list-actions {
    display: flex;
    min-height: 38px;
    border-top: 1px solid rgba(255, 255, 255, .055);
}

.tile-list-actions button {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .055);
    background: rgba(0, 0, 0, .09);
    color: #7893a1;
    font-size: 9px;
    cursor: pointer;
    transition: .18s ease;
    height: auto;
    border-radius: 0;
}

.tile-list-actions button:last-child {
    border-right: 0;
}

.tile-list-actions button:hover {
    background: rgba(54, 197, 192, .11);
    color: #dffcff;
}

.tiles-list-empty {
    display: none;
    height: calc(100% - 215px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #66808f;
    text-align: center;
}

.tiles-list-empty i {
    margin-bottom: 13px;
    color: #3dbcae;
    font-size: 28px;
}

.tiles-list-empty strong {
    color: #cce2ea;
    font-size: 13px;
}

.tiles-list-empty span {
    margin-top: 5px;
    font-size: 10px;
}

.tiles-list-contener.is-empty .tiles-list-results {
    display: none;
}

.tiles-list-contener.is-empty .tiles-list-empty {
    display: flex;
}

@media (max-width: 767px) {
    .tiles-list-contener {
        width: 100%;
        padding: 9px;
        border-left: 0;
    }

    .tiles-list-heading h2 {
        font-size: 21px;
    }

    .tile-list-main {
        min-height: 84px;
        padding: 12px;
    }
}


/* css/account/map_attribution.css */
/**************************************************************************************************
	@author         waterly.eu
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           map_attribution.css
	@description    Map contributors widget, moved out of the device diagnostics stylesheet so the
					main map and the diagnostics location map look the same
**************************************************************************************************/

.waterly-map-attribution {
    position: absolute;
    right: 10px;
    bottom: 12px;
    z-index: 1018;
    max-width: calc(100% - 82px);
    color: #c5d1d9;
    font-family: "Open Sans", sans-serif;
}

.waterly-map-attribution-content {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid rgba(143, 184, 220, 0.2);
    border-radius: 9px;
    background:
        linear-gradient(135deg, rgba(31, 43, 52, 0.92), rgba(13, 19, 24, 0.94));
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.32);
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
}

.waterly-map-attribution-logo {
    width: 9px;
    height: 12px;
    flex: 0 0 auto;
    background-color: #7bc9ff;
    -webkit-mask: url(../img/main_logo_white.svg) center / contain no-repeat;
    mask: url(../img/main_logo_white.svg) center / contain no-repeat;
}

.waterly-map-attribution-content .waterly-map-attribution-brand {
    margin-right: 2px;
    color: #7bc9ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.waterly-map-attribution-content > b {
    color: #586873;
    font-weight: 400;
}

.waterly-map-attribution-content a {
    color: #dce8ef;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.waterly-map-attribution-content a:hover,
.waterly-map-attribution-content a:focus-visible {
    color: #79c8ff;
    text-decoration: none;
    outline: none;
}

@media (max-width: 639.98px) {
    .waterly-map-attribution {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
    }

    .waterly-map-attribution-content {
        width: 100%;
        height: auto;
        min-height: 32px;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 3px 5px;
        padding: 5px 7px;
        font-size: 8px;
        line-height: 1.25;
        white-space: normal;
    }

    .waterly-map-attribution-content .waterly-map-attribution-brand {
        font-size: 8px;
    }
}


/* css/account/map_ui.css */
/**************************************************************************************************
	@author         waterly.eu
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           map_ui.css
	@description    Overlay interface of the main map.

					Every widget is registered as a MapTiler control, the way the alpha line does
					it, so the SDK containers stack and space them. Nothing here is positioned by
					hand - that was what made the widgets land on top of each other and merge on
					narrow screens.
**************************************************************************************************/

/******************************************** Shared look *****************************************/
    /* The visible navigation now lives inside the map. The former 64 px navbar
       reservation left an empty strip above every control. MapLibre controls
       already carry their own 10 px margin, so the corner itself starts at 0. */
    #main_map_content .maplibregl-ctrl-top-left,
    #main_map_content .maplibregl-ctrl-top-right {
        top: 0;
        z-index: 5;
    }

/**************************************** WQI widget, shared **************************************/
    /*
        Every presentation of the same numbers lives in one element and the variant class on
        #main_map_content decides which one is painted:
          .wqi-variant-gauge vertical gauge in the bottom left corner (the default)
          .wqi-variant-arc   flat arc hugging the left edge
          .wqi-variant-bar   horizontal bar in the bottom dock
          .wqi-variant-rail  the original vertical rail
          .wqi-variant-auto  arc from 1200 px up, bar below
        Switch it live with gis.set_wqi_variant( "rail" ).
    */
    #main_map_content {
        /* How much room the dock needs at the bottom, read by the SDK corner stacks */
        --wqi-dock-height: 42px;
        /* Room the bottom left stack leaves for the dock row underneath it */
        --wqi-bottom-left-pad: var(--wqi-dock-height);
        /* Height of the bottom left stack the gauge has to clear: cursor readout and scale */
        --wqi-corner-offset: 56px;
    }

    #main_map_content .wqi-legend-heading,
    #main_map_content .wqi-legend-body,
    #main_map_content .wqi-legend-arc,
    #main_map_content .wqi-legend-bar,
    #main_map_content .wqi-legend-gauge {
        display: none;
    }

    #main_map_content.wqi-variant-gauge .wqi-legend-gauge {
        display: block;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-heading {
        display: inline-flex;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-body {
        display: block;
    }

    #main_map_content.wqi-variant-arc .wqi-legend-arc {
        display: block;
    }

    #main_map_content.wqi-variant-bar .wqi-legend-bar,
    #main_map_content.wqi-variant-auto .wqi-legend-bar {
        display: flex;
    }

    /* Hidden on purpose: both are still in the markup, they are only waiting for a better place */
    #main_map_content .wqi-legend-visible-count,
    #main_map_content .wqi-legend-heading small {
        display: none;
    }

    #main_map_content .wqi-legend-empty {
        position: absolute;
        display: none;
        width: 26px;
        height: 26px;
        place-items: center;
        box-sizing: border-box;
        padding: 0;
        border: 1px solid rgba(143, 184, 220, 0.2);
        border-radius: 50%;
        background: rgba(7, 18, 27, 0.78);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.05);
        color: #738896;
        font-size: 10px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    #main_map_content .wqi-map-legend.is-empty .wqi-legend-empty {
        display: grid;
    }

    #main_map_content .wqi-map-legend.is-empty .wqi-gauge-span,
    #main_map_content .wqi-map-legend.is-empty .wqi-gauge-dot,
    #main_map_content .wqi-map-legend.is-empty .wqi-gauge-value,
    #main_map_content .wqi-map-legend.is-empty .wqi-gauge-ticks,
    #main_map_content .wqi-map-legend.is-empty .wqi-arc-bound,
    #main_map_content .wqi-map-legend.is-empty .wqi-arc-average,
    #main_map_content .wqi-map-legend.is-empty .wqi-arc-marks,
    #main_map_content .wqi-map-legend.is-empty .wqi-bar-bound,
    #main_map_content .wqi-map-legend.is-empty .wqi-bar-average,
    #main_map_content .wqi-map-legend.is-empty .wqi-bar-mark {
        display: none;
    }

    #main_map_content .wqi-map-legend.is-empty .wqi-arc-scale,
    #main_map_content .wqi-map-legend.is-empty .wqi-bar-track {
        opacity: 0.32;
    }

    /* Shared accents: the readings keep their identity in every variant */
    #main_map_content .wqi-map-legend .is-min { color: #42e2ce; }
    #main_map_content .wqi-map-legend .is-average { color: #f5d867; }
    #main_map_content .wqi-map-legend .is-max { color: #ff7a6d; }

/************************************ Gauge, bottom left corner ***********************************/
    /*
        Vertical gauge from the gauge-wqi-1a design: a thin rail with the minimum to maximum span
        filled in, three dots riding it and the readings spelled out next to them. It sits in the
        bottom left corner directly above the distance scale: gis_core.js measures that stack and
        writes its height plus a 20 px gap into --wqi-corner-offset. The position below adds the
        requested extra 20 px lift without changing the spacing logic shared with the map scale.

        Type follows the design: display numbers in the interface family, captions and ticks in a
        monospace face. The design's own webfonts are not loaded - the widget uses the stacks the
        application already ships.
    */
    #main_map_content.wqi-variant-gauge .wqi-map-legend {
        position: absolute;
        left: 10px;
        bottom: calc(var(--wqi-corner-offset) + 20px);
        width: 214px;
        height: 336px;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: none;
        pointer-events: none;
    }

    #main_map_content .wqi-legend-gauge {
        position: relative;
        height: 100%;
    }

    /*
        The widget is drawn straight onto the map, so it needs its own ground to stand on: a soft
        shadow that fades out well before the edges of the box. Without it labels and rail sink
        into whatever the tiles happen to show - rivers, roads, a bright city block.
    */
    #main_map_content .wqi-legend-gauge::before {
        position: absolute;
        inset: -36px -96px -36px -28px;
        background: radial-gradient(
            ellipse 72% 68% at 20% 50%,
            rgba(4, 11, 17, 0.76) 0%,
            rgba(4, 11, 17, 0.54) 28%,
            rgba(4, 11, 17, 0.24) 52%,
            rgba(4, 11, 17, 0) 72%
        );
        content: "";
        pointer-events: none;
    }

    /* An empty gauge has no values to separate from the map, so it needs no ambient shadow. */
    #main_map_content .wqi-map-legend.is-empty .wqi-legend-gauge::before {
        display: none;
    }

    #main_map_content .wqi-gauge-track {
        position: absolute;
        /* Ticks end flush with the left edge of the corner stack below */
        left: 37px;
        top: 16px;
        /* Room for the halves of the bottom tick and label that hang below the rail */
        bottom: 28px;
        width: 8px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.1);
    }

    #main_map_content .wqi-gauge-span {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 0;
        border-radius: 4px;
        transform-origin: bottom;
        animation: wqi-gauge-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    /* Ticks read to the left of the rail, each closed with a short dash */
    #main_map_content .wqi-gauge-ticks span {
        position: absolute;
        right: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        color: rgba(255, 255, 255, 0.32);
        font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
        font-size: 9px;
        font-variant-numeric: tabular-nums;
        transform: translateY(50%);
    }

    #main_map_content .wqi-gauge-ticks i {
        display: block;
        width: 5px;
        height: 1px;
        background: rgba(255, 255, 255, 0.22);
    }

    #main_map_content .wqi-gauge-dot {
        position: absolute;
        left: -8px;
        width: 24px;
        height: 24px;
        box-sizing: border-box;
        border: 2px solid currentColor;
        border-radius: 50%;
        background: rgba(22, 24, 26, 0.9);
        transform: translateY(50%);
        animation: wqi-gauge-in 0.7s 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    #main_map_content .wqi-gauge-value {
        position: absolute;
        left: 36px;
        transform: translateY(50%);
        animation: wqi-gauge-in 0.7s 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    #main_map_content .wqi-gauge-value b {
        display: block;
        color: #ffffff;
        font-family: "Open Sans", sans-serif;
        font-size: 30px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.02em;
        line-height: 1;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
    }

    #main_map_content .wqi-gauge-value i {
        display: block;
        margin-top: 4px;
        white-space: nowrap;
        color: currentColor;
        font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
        font-size: 9px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
        text-transform: uppercase;
    }

    /*
        Colour here means the water quality index of that reading, not whether it is the smallest
        or the largest one on screen - gis_core.js paints each from the shared ramp. This is only
        the neutral state before the first readings arrive.
    */
    #main_map_content .wqi-legend-gauge .wqi-gauge-dot,
    #main_map_content .wqi-legend-gauge .wqi-gauge-value {
        color: rgba(197, 219, 225, 0.55);
    }

    /* One visible point uses one marker on a focused ±10 scale. Showing the same value as
       minimum, average and maximum would create three overlapping labels with no added meaning. */
    #main_map_content .wqi-map-legend.is-single .wqi-gauge-dot.is-min,
    #main_map_content .wqi-map-legend.is-single .wqi-gauge-dot.is-max,
    #main_map_content .wqi-map-legend.is-single .wqi-gauge-value.is-min,
    #main_map_content .wqi-map-legend.is-single .wqi-gauge-value.is-max,
    #main_map_content .wqi-map-legend.is-single .wqi-bar-mark.is-min,
    #main_map_content .wqi-map-legend.is-single .wqi-bar-mark.is-max {
        display: none;
    }

    #main_map_content .wqi-map-legend.is-single .wqi-gauge-dot.is-average {
        width: 26px;
        height: 26px;
        border-width: 3px;
        box-shadow:
            0 0 0 5px color-mix(in srgb, currentColor 13%, transparent),
            0 0 18px -2px currentColor;
    }

    #main_map_content .wqi-map-legend.is-single .wqi-gauge-value.is-average b {
        font-weight: 750;
    }

    #main_map_content.wqi-variant-gauge .wqi-legend-empty {
        left: 28px;
        bottom: calc(50% - 13px);
    }

    @keyframes wqi-gauge-rise {
        from { transform: scaleY(0); }
        to { transform: scaleY(1); }
    }

    @keyframes wqi-gauge-in {
        from { opacity: 0; transform: translate(0, calc(50% + 6px)); }
        to { opacity: 1; transform: translateY(50%); }
    }

    @media (prefers-reduced-motion: reduce) {
        #main_map_content .wqi-gauge-span,
        #main_map_content .wqi-gauge-dot,
        #main_map_content .wqi-gauge-value {
            animation: none;
        }
    }

    /* Light theme, second half of the design */
    html[data-theme="light"] #main_map_content .wqi-legend-gauge::before {
        background: radial-gradient(
            ellipse 72% 68% at 20% 50%,
            rgba(244, 247, 250, 0.82) 0%,
            rgba(244, 247, 250, 0.56) 28%,
            rgba(244, 247, 250, 0.24) 52%,
            rgba(244, 247, 250, 0) 72%
        );
    }

    html[data-theme="light"] #main_map_content .wqi-gauge-track {
        background: rgba(0, 0, 0, 0.1);
    }

    html[data-theme="light"] #main_map_content .wqi-gauge-ticks span {
        color: rgba(0, 0, 0, 0.34);
    }

    html[data-theme="light"] #main_map_content .wqi-gauge-ticks i {
        background: rgba(0, 0, 0, 0.2);
    }

    html[data-theme="light"] #main_map_content .wqi-gauge-dot {
        background: #ffffff;
    }

    html[data-theme="light"] #main_map_content .wqi-gauge-value b {
        color: #16181a;
        text-shadow: none;
    }

    html[data-theme="light"] #main_map_content .wqi-gauge-value i {
        text-shadow: none;
    }

    html[data-theme="light"] #main_map_content .wqi-legend-gauge .wqi-gauge-dot,
    html[data-theme="light"] #main_map_content .wqi-legend-gauge .wqi-gauge-value {
        color: rgba(28, 54, 78, 0.55);
    }

/*************************************** Variant A: flat arc **************************************/
    /*
        A slice of a 1000 px circle: over the 360 px the widget is tall it bends by some 16 px, so
        it reads as a curve leaning against the edge instead of as a half circle eating the map.
        Geometry comes from WQI_ARC in gis_core.js, which draws the path and places the average.
    */
    #main_map_content.wqi-variant-arc .wqi-map-legend,
    #main_map_content.wqi-variant-rail .wqi-map-legend {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
    }

    #main_map_content.wqi-variant-arc .wqi-map-legend {
        width: 212px;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #main_map_content .wqi-legend-arc {
        position: relative;
        height: 360px;
    }

    #main_map_content .wqi-arc-canvas {
        position: absolute;
        left: 0;
        top: 0;
        overflow: visible;
    }

    #main_map_content .wqi-arc-base {
        fill: none;
        stroke: rgba(202, 234, 245, 0.12);
        stroke-width: 13;
        stroke-linecap: round;
    }

    #main_map_content .wqi-arc-scale {
        fill: none;
        stroke: url(#wqi-arc-ramp);
        stroke-width: 5;
        stroke-linecap: round;
        filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.45));
        transition: opacity 0.3s ease;
    }

    #main_map_content .wqi-arc-mark {
        stroke: rgba(6, 16, 24, 0.85);
        stroke-width: 1.4;
    }

    #main_map_content .wqi-arc-mark.is-min { fill: #42e2ce; }
    #main_map_content .wqi-arc-mark.is-average { fill: #f5d867; }
    #main_map_content .wqi-arc-mark.is-max { fill: #ff7a6d; }

    #main_map_content .wqi-arc-title {
        position: absolute;
        left: 20px;
        top: -44px;
        color: #eaf3f9;
        font-family: "Open Sans", sans-serif;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.16em;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
    }

    #main_map_content .wqi-arc-bound,
    #main_map_content .wqi-arc-average {
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: 1px;
        padding: 5px 9px;
        border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
        border-left: 2px solid currentColor;
        border-radius: 8px 12px 12px 8px;
        background: linear-gradient(120deg, rgba(9, 24, 34, 0.88), rgba(5, 14, 22, 0.72));
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        font-family: "Open Sans", sans-serif;
        white-space: nowrap;
    }

    #main_map_content .wqi-arc-bound b,
    #main_map_content .wqi-arc-average b {
        color: currentColor;
        font-size: 14px;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
    }

    #main_map_content .wqi-arc-bound i,
    #main_map_content .wqi-arc-average i {
        color: rgba(197, 219, 225, 0.55);
        font-size: 7px;
        font-style: normal;
        font-weight: 750;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    /* The ends of the scale are the extremes themselves, so they can be pinned to the ends */
    #main_map_content .wqi-arc-bound {
        left: 18px;
        transform: translateY(-50%);
    }

    #main_map_content .wqi-arc-bound.is-max { top: 0; }
    #main_map_content .wqi-arc-bound.is-min { top: 100%; }

    /* Left and top come from gis_core.js, which follows the curve */
    #main_map_content .wqi-arc-average {
        left: 26px;
        top: 50%;
        z-index: 2;
        padding: 7px 10px;
        transform: translateY(-50%);
    }

    #main_map_content .wqi-arc-average b {
        font-size: 17px;
    }

    #main_map_content.wqi-variant-arc .wqi-legend-empty {
        left: 22px;
        top: 50%;
        transform: translateY(-50%);
    }

/************************************ Variant B: horizontal bar ***********************************/
    #main_map_content.wqi-variant-bar .wqi-map-legend,
    #main_map_content.wqi-variant-auto .wqi-map-legend {
        position: relative;
        left: auto;
        top: auto;
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        border: 0;
        transform: none;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #main_map_content .wqi-legend-bar {
        position: relative;
        align-items: flex-end;
        gap: 12px;
        box-sizing: border-box;
        padding: 22px 14px 8px;
        border: 1px solid rgba(143, 184, 220, 0.2);
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(31, 43, 52, 0.94), rgba(13, 19, 24, 0.96));
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        font-family: "Open Sans", sans-serif;
    }

    #main_map_content .wqi-bar-title {
        color: #eaf3f9;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.14em;
        line-height: 1.6;
    }

    #main_map_content .wqi-bar-bound {
        display: flex;
        flex-direction: column;
        gap: 1px;
        line-height: 1.15;
        white-space: nowrap;
    }

    #main_map_content .wqi-bar-bound i {
        color: rgba(197, 219, 225, 0.5);
        font-size: 7px;
        font-style: normal;
        font-weight: 750;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    #main_map_content .wqi-bar-bound b {
        color: currentColor;
        font-size: 13px;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
    }

    #main_map_content .wqi-bar-track {
        position: relative;
        flex: 1 1 auto;
        min-width: 60px;
        height: 8px;
        margin-bottom: 5px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
        transition: opacity 0.3s ease;
    }

    #main_map_content .wqi-bar-mark {
        position: absolute;
        left: 0;
        top: 50%;
        width: 2px;
        height: 15px;
        border-radius: 99px;
        background: currentColor;
        box-shadow: 0 0 8px currentColor;
        transform: translate(-50%, -50%);
    }

    #main_map_content .wqi-bar-mark.is-average {
        width: 3px;
        height: 21px;
    }

    /*
        The label rides the track and is pulled back by its own position, so it stays inside the
        bar: flush left at the start, centred in the middle, flush right at the end.
    */
    #main_map_content .wqi-bar-average {
        position: absolute;
        left: 0;
        bottom: calc(100% + 8px);
        display: flex;
        align-items: baseline;
        gap: 5px;
        white-space: nowrap;
        transform: translateX(var(--wqi-shift, -50%));
    }

    #main_map_content .wqi-bar-average b {
        color: currentColor;
        font-size: 14px;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
    }

    #main_map_content .wqi-bar-average i {
        color: rgba(197, 219, 225, 0.5);
        font-size: 7px;
        font-style: normal;
        font-weight: 750;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    #main_map_content.wqi-variant-bar .wqi-legend-empty,
    #main_map_content.wqi-variant-auto .wqi-legend-empty {
        left: 50%;
        top: 50%;
        max-width: none;
        transform: translate(-50%, -50%);
    }

/************************************** Immersed WQI light rail ***********************************/
    #main_map_content.wqi-variant-rail .waterly-ctrl-legend.wqi-map-legend {
        left: 14px;
        top: 51%;
        width: 238px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: translateY(-45%);
        pointer-events: none;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend::before {
        position: absolute;
        left: 32px;
        top: 47px;
        width: 30px;
        height: 246px;
        border: 1px solid rgba(165, 225, 231, 0.1);
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(8, 20, 29, 0.3), rgba(8, 20, 29, 0.7), rgba(8, 20, 29, 0.28));
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.28), inset 0 0 18px rgba(153, 235, 229, 0.035);
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
        content: "";
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-heading {
        position: relative;
        display: inline-flex;
        min-width: 102px;
        box-sizing: border-box;
        gap: 12px;
        padding: 8px 9px 8px 12px;
        border: 1px solid rgba(143, 210, 220, 0.16);
        border-radius: 13px;
        background: linear-gradient(135deg, rgba(10, 25, 35, 0.76), rgba(5, 14, 22, 0.62));
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.035);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-heading b {
        font-size: 13px;
        text-shadow: 0 0 14px rgba(111, 234, 222, 0.42);
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-body {
        position: relative;
        display: block;
        width: 100%;
        height: 248px;
        padding: 12px 0 0;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-axis {
        position: absolute;
        left: 0;
        top: 15px;
        width: 29px;
        height: 220px;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-axis span {
        color: rgba(201, 225, 232, 0.65);
        text-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-track {
        position: absolute;
        left: 40px;
        top: 15px;
        width: 10px;
        height: 220px;
        overflow: visible;
        border-color: rgba(255, 255, 255, 0.28);
        box-shadow:
            0 0 7px rgba(149, 255, 0, 0.32),
            0 -30px 24px rgba(255, 0, 0, 0.14),
            inset 0 0 5px rgba(255, 255, 255, 0.36);
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-track::after {
        position: absolute;
        left: 1px;
        top: 0;
        width: 6px;
        height: 32%;
        border-radius: 999px;
        background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.7), transparent);
        content: "";
        opacity: 0.55;
        animation: wqi-rail-scan 4.2s ease-in-out infinite;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-track > i {
        left: -5px;
        width: 19px;
        background: rgba(225, 247, 249, 0.34);
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-zones {
        position: absolute;
        left: 58px;
        top: 15px;
        width: 84px;
        height: 220px;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-zones span {
        position: absolute;
        color: rgba(197, 219, 225, 0.29);
        font-size: 7px;
        font-weight: 750;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
        transform: translateY(-50%);
        white-space: nowrap;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-indicator {
        left: -7px;
        width: 25px;
        height: 1px;
        box-shadow: 0 0 10px currentColor, 0 0 3px currentColor;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-indicator::after {
        right: -3px;
        width: 7px;
        height: 7px;
        border: 2px solid rgba(7, 17, 25, 0.9);
        box-shadow: 0 0 9px currentColor;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stats {
        position: absolute;
        left: 69px;
        top: 15px;
        width: 158px;
        height: 220px;
        padding: 0;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stat {
        position: absolute;
        top: var(--wqi-position, 100%);
        left: 0;
        display: inline-grid;
        min-width: 63px;
        width: auto;
        box-sizing: border-box;
        grid-template-columns: auto auto;
        align-items: baseline;
        gap: 6px;
        padding: 5px 8px 5px 7px;
        border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
        border-left: 2px solid currentColor;
        border-radius: 8px 12px 12px 8px;
        background: linear-gradient(120deg, rgba(9, 24, 34, 0.88), rgba(5, 14, 22, 0.7));
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.3), 0 0 13px color-mix(in srgb, currentColor 10%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transform: translateY(-50%);
        transition: top 0.34s cubic-bezier(.2, .8, .2, 1);
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stat.is-average {
        left: 25px;
        z-index: 2;
        padding-block: 7px;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stat.is-max {
        left: 50px;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stat small {
        font-size: 7px;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stat strong {
        font-size: 14px;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-empty {
        position: absolute;
        left: 68px;
        top: 118px;
        max-width: 128px;
        padding: 7px 9px;
        border: 1px solid rgba(143, 184, 220, 0.12);
        border-radius: 10px;
        background: rgba(7, 18, 27, 0.62);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend.is-empty .wqi-legend-body {
        opacity: 0.72;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend.is-empty .wqi-legend-stats,
    #main_map_content.wqi-variant-rail .wqi-map-legend.is-empty .wqi-legend-indicator {
        display: none;
    }

    @keyframes wqi-rail-scan {
        0%, 100% { transform: translateY(-15%); opacity: 0.18; }
        50% { transform: translateY(225%); opacity: 0.72; }
    }

    @media (prefers-reduced-motion: reduce) {
        #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-track::after {
            animation: none;
        }
    }

    @media (max-width: 639.98px) {
        #main_map_content.wqi-variant-rail .waterly-ctrl-legend.wqi-map-legend {
            left: 7px;
            width: 188px;
            transform: translateY(-40%) scale(0.88);
            transform-origin: left center;
        }

        #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stat.is-average {
            left: 14px;
        }

        #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stat.is-max {
            left: 28px;
        }

        #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-zones {
            opacity: 0.65;
        }
    }

    #main_map_content .waterly-ctrl {
        border: 1px solid rgba(143, 184, 220, 0.2);
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(31, 43, 52, 0.92), rgba(13, 19, 24, 0.94));
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.32);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #c5d1d9;
        font-family: "Open Sans", sans-serif;
    }

    #main_map_content .waterly-ctrl-button {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #c5d1d9;
        cursor: pointer;
        font-size: 13px;
        transition: color 0.15s ease, background-color 0.15s ease;
    }

    #main_map_content .waterly-ctrl-button:hover {
        background-color: rgba(105, 189, 247, 0.14);
        color: #ffffff;
    }

    #main_map_content .waterly-ctrl-button.is-active {
        color: #69bdf7;
    }

    /* Primary map action: keep the point-list trigger unmistakably visible in
       both authenticated and public account-shell views. */
    #main_map_content .waterly-ctrl-list {
        position: relative;
        z-index: 3;
        overflow: visible;
        border-color: rgba(103, 232, 222, 0.42);
        background:
            radial-gradient(circle at 28% 18%, rgba(90, 231, 216, 0.22), transparent 48%),
            linear-gradient(145deg, rgba(20, 42, 53, 0.98), rgba(7, 18, 28, 0.98));
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.04);
        opacity: 1;
        visibility: visible;
    }

    #main_map_content .waterly-ctrl-list .devices-list-selector {
        display: flex !important;
        width: 44px;
        height: 44px;
        color: #8ce9df;
        font-size: 17px;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #main_map_content .waterly-ctrl-list:hover {
        border-color: rgba(130, 247, 236, 0.72);
        background: linear-gradient(145deg, rgba(24, 88, 94, 0.98), rgba(9, 39, 51, 0.98));
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48), 0 0 22px rgba(71, 214, 201, 0.2);
    }

    #main_map_content .waterly-ctrl-list:hover .devices-list-selector {
        color: #ffffff;
    }

/********************************************** Brand *********************************************/
    #main_map_content .waterly-ctrl-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 13px 7px 10px;
    }

    #main_map_content .waterly-ctrl-brand img {
        height: 18px;
    }

    #main_map_content .waterly-ctrl-brand span {
        color: #eaf3f9;
        font-size: 12px;
        font-weight: 800;
    }

/****************************************** Layer switcher ****************************************/
    #main_map_content .waterly-ctrl-layers {
        position: relative;
    }

    #main_map_content .map-layer-switcher {
        position: absolute;
        left: calc(100% + 6px);
        top: 0;
        display: none;
        min-width: 178px;
        padding: 6px;
        border: 1px solid rgba(143, 184, 220, 0.2);
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(31, 43, 52, 0.95), rgba(13, 19, 24, 0.97));
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.32);
    }

    #main_map_content .map-layer-switcher.is-open {
        display: block;
    }

    #main_map_content .map-layer-option {
        display: flex;
        flex-direction: column;
        gap: 1px;
        padding: 7px 9px;
        border-radius: 7px;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

    #main_map_content .map-layer-option:hover {
        background-color: rgba(105, 189, 247, 0.12);
    }

    #main_map_content .map-layer-option.selected {
        background-color: rgba(105, 189, 247, 0.2);
    }

    #main_map_content .map-layer-option strong {
        color: #eaf3f9;
        font-size: 11px;
        font-weight: 700;
    }

    #main_map_content .map-layer-option small {
        color: #8194a1;
        font-size: 9px;
    }

/********************************************* Legend *********************************************/
    #main_map_content.wqi-variant-rail .waterly-ctrl-legend {
        position: absolute;
        left: 12px;
        top: 50%;
        z-index: 5;
        width: 142px;
        box-sizing: border-box;
        margin: 0;
        padding: 12px 11px 11px;
        transform: translateY(-42%);
        cursor: default;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(143, 184, 220, 0.14);
    }

    #main_map_content.wqi-variant-rail .wqi-legend-heading > span {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-heading b {
        color: #eaf3f9;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.14em;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-heading small {
        color: #7f909d;
        font-size: 7px;
        white-space: nowrap;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-visible-count {
        padding: 4px 6px;
        border: 1px solid rgba(107, 222, 210, 0.18);
        border-radius: 999px;
        background: rgba(69, 203, 192, 0.08);
        color: #79dcd1;
        font-size: 8px;
        font-weight: 800;
        white-space: nowrap;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-body {
        display: grid;
        grid-template-columns: 29px 18px 1fr;
        gap: 9px;
        height: 240px;
        padding: 15px 0 5px;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-axis,
    #main_map_content.wqi-variant-rail .wqi-legend-track {
        position: relative;
        height: 220px;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-axis span {
        position: absolute;
        right: 0;
        color: #8095a3;
        font-size: 8px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        transform: translateY(-50%);
    }

    #main_map_content.wqi-variant-rail .wqi-legend-track {
        width: 14px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;
        background: linear-gradient(to top, #00ff15 0%, #95ff00 25%, #ffea00 50%, #ff8000 75%, #ff0000 100%);
        box-shadow:
            inset 0 0 0 1px rgba(0, 0, 0, 0.32),
            0 0 22px rgba(149, 255, 0, 0.13);
    }

    #main_map_content.wqi-variant-rail .wqi-legend-track > i {
        position: absolute;
        left: -4px;
        width: 20px;
        height: 1px;
        background-color: rgba(11, 18, 25, 0.5);
    }

    #main_map_content.wqi-variant-rail .wqi-legend-indicator {
        position: absolute;
        top: var(--wqi-position, 100%);
        left: -5px;
        z-index: 2;
        width: 24px;
        height: 2px;
        border-radius: 99px;
        background: currentColor;
        box-shadow: 0 0 8px currentColor;
        transform: translateY(-50%);
        transition: top 0.32s ease;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-indicator::after {
        position: absolute;
        right: -2px;
        top: 50%;
        width: 6px;
        height: 6px;
        border: 1px solid rgba(4, 13, 21, 0.9);
        border-radius: 50%;
        background: currentColor;
        content: "";
        transform: translateY(-50%);
    }

    #main_map_content.wqi-variant-rail .wqi-legend-indicator.is-min,
    #main_map_content.wqi-variant-rail .wqi-legend-stat.is-min { color: #42e2ce; }
    #main_map_content.wqi-variant-rail .wqi-legend-indicator.is-average,
    #main_map_content.wqi-variant-rail .wqi-legend-stat.is-average { color: #f5d867; }
    #main_map_content.wqi-variant-rail .wqi-legend-indicator.is-max,
    #main_map_content.wqi-variant-rail .wqi-legend-stat.is-max { color: #ff7a6d; }

    #main_map_content.wqi-variant-rail .wqi-legend-stats {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 7px;
        padding: 2px 0;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-stat {
        display: flex;
        min-width: 48px;
        flex-direction: column;
        gap: 1px;
        padding: 6px 7px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.035);
    }

    #main_map_content.wqi-variant-rail .wqi-legend-stat small {
        color: currentColor;
        font-size: 7px;
        font-weight: 900;
        letter-spacing: 0.1em;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-stat strong {
        color: #eefaff;
        font-size: 14px;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-empty {
        display: none;
        padding-top: 8px;
        color: #8194a1;
        font-size: 8px;
        line-height: 1.35;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend.is-empty .wqi-legend-indicator {
        display: none;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend.is-empty .wqi-legend-body {
        opacity: 0.5;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend.is-empty .wqi-legend-empty {
        display: block;
    }

/***************************************** Cursor position ****************************************/
    /* The live readout stays implemented and can be restored by removing this class. */
    #main_map_content .waterly-ctrl-cursor.is-temporarily-disabled {
        display: none !important;
    }

    #main_map_content .waterly-ctrl-cursor {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 5px 11px;
        font-size: 9px;
        font-variant-numeric: tabular-nums;
    }

    #main_map_content .waterly-ctrl-cursor i {
        margin-right: 4px;
        color: #69bdf7;
    }

    #main_map_content .waterly-ctrl-cursor.is-empty {
        color: #71818d;
    }

/****************************************** Bottom dock *******************************************/
    /*
        The water quality widget, the privacy button and the contributors share one dock. It spans
        the map and lets pointer events through, so the widget can float at the left edge in the
        arc variant while the footer stays pinned to the bottom, and the three can fold into one
        full width row - or into stacked rows - without moving any node.

        Layouts, all driven by width alone:
          >= 1200 px   arc at the left edge, contributors and privacy in the bottom right corner
          640-1199 px  one full width line: widget, contributors, privacy
          < 640 px     stacked: widget, then a full-width contributors and privacy row
    */
    #main_map_content .waterly-map-dock {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        display: flex;
        flex-wrap: wrap;
        /* The dock spans the map, so its contents have to be pinned to the bottom themselves */
        align-items: flex-end;
        align-content: flex-end;
        justify-content: flex-end;
        gap: 8px;
        padding: 0 10px 10px;
        box-sizing: border-box;
        pointer-events: none;
    }

    #main_map_content .waterly-map-dock > * {
        pointer-events: auto;
    }

    /* Laid out by the dock, not by its own corner offsets */
    #main_map_content .waterly-map-dock .waterly-map-attribution {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        order: 2;
        max-width: none;
    }

    #main_map_content .waterly-map-dock .map-privacy {
        order: 3;
    }

    /*
        MapLibre inserts controls at the front of the bottom containers, so the DOM order is the
        reverse of the order they were added in. Reading it back to front restores the intent:
        first added ends up highest. With zoom, locate and compass added in that order, the column
        reads +, -, locate, 3D from the top down, and it clears the dock underneath.
    */
    #main_map_content .maplibregl-ctrl-bottom-right {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-end;
    }

    #main_map_content .maplibregl-ctrl-bottom-right .maplibregl-ctrl {
        float: none;
    }

    #main_map_content .maplibregl-ctrl-bottom-right {
        padding-bottom: var(--wqi-dock-height);
    }

    #main_map_content .maplibregl-ctrl-bottom-left {
        padding-bottom: var(--wqi-bottom-left-pad);
    }

    #main_map_content .map-privacy {
        display: flex;
        height: 32px;
        align-items: center;
        gap: 6px;
        box-sizing: border-box;
        padding: 6px 10px;
        border: 1px solid rgba(143, 184, 220, 0.2);
        border-radius: 9px;
        background: linear-gradient(135deg, rgba(31, 43, 52, 0.92), rgba(13, 19, 24, 0.94));
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.32);
        color: #b6c4ce;
        cursor: pointer;
        font-family: "Open Sans", sans-serif;
        font-size: 9px;
        font-weight: 600;
        line-height: 1;
    }

    #main_map_content .map-privacy i {
        color: #69bdf7;
        font-size: 10px;
    }

    #main_map_content .map-privacy:hover {
        color: #ffffff;
    }

/**************************************** Dock breakpoints ****************************************/
    /* Medium: one full width line - widget, contributors, privacy */
    @media (min-width: 640px) and (max-width: 1199.98px) {
        #main_map_content {
            /* Contributors and privacy are pinned to the right, so the map scale no longer
               needs to reserve an empty footer row underneath itself on the left. */
            --wqi-bottom-left-pad: 0px;
        }

        #main_map_content.wqi-variant-bar,
        #main_map_content.wqi-variant-auto {
            --wqi-dock-height: 60px;
        }

        #main_map_content .waterly-map-dock {
            flex-wrap: nowrap;
            justify-content: flex-end;
        }

        #main_map_content.wqi-variant-bar .wqi-map-legend,
        #main_map_content.wqi-variant-auto .wqi-map-legend {
            order: 1;
        }

        #main_map_content .waterly-map-dock .map-privacy span {
            display: none;
        }

        #main_map_content .waterly-map-dock .map-privacy {
            width: 32px;
            height: 32px;
            flex: 0 0 32px;
            justify-content: center;
            padding: 0;
        }

        #main_map_content .waterly-map-dock .map-privacy i {
            font-size: 12px;
        }

    }

    /* Narrow: the widget takes a row of its own; contributors and the privacy icon fill the next */
    @media (max-width: 639.98px) {
        /* The vertical WQI gauge keeps its proportions but occupies 30% less space on the
           smallest screens. Scaling from the bottom-left preserves its gap above the map scale. */
        #main_map_content.wqi-variant-gauge .wqi-map-legend {
            transform: scale(.7);
            transform-origin: left bottom;
        }

        #main_map_content.wqi-variant-bar,
        #main_map_content.wqi-variant-auto {
            --wqi-dock-height: 100px;
        }

        /* The cursor readout is hidden here, so the gauge sits closer to the scale */
        #main_map_content {
            --wqi-corner-offset: 30px;
        }

        #main_map_content .waterly-map-dock {
            justify-content: space-between;
            padding: 0 8px 8px;
        }

        #main_map_content.wqi-variant-bar .wqi-map-legend,
        #main_map_content.wqi-variant-auto .wqi-map-legend {
            order: 1;
            flex: 1 0 100%;
        }

        #main_map_content .waterly-map-dock .waterly-map-attribution {
            flex: 1 1 0;
            min-width: 0;
        }

        #main_map_content .waterly-map-dock .waterly-map-attribution-content {
            justify-content: center;
            min-height: 36px;
        }

        #main_map_content .waterly-map-dock .map-privacy span {
            display: none;
        }

        #main_map_content .waterly-map-dock .map-privacy {
            width: 36px;
            height: 36px;
            flex: 0 0 36px;
            justify-content: center;
            padding-inline: 0;
            border-radius: 10px;
        }

        #main_map_content .waterly-map-dock .map-privacy i {
            font-size: 14px;
        }

        #main_map_content .wqi-legend-bar {
            gap: 9px;
            padding: 21px 10px 7px;
        }

        #main_map_content .wqi-bar-title {
            display: none;
        }
    }

    .waterly-map-copy-feedback {
        position: absolute;
        left: 50%;
        bottom: calc(var(--wqi-dock-height, 42px) + 14px);
        z-index: 6;
        max-width: calc(100% - 24px);
        padding: 7px 11px;
        border: 1px solid rgba(105, 189, 247, 0.32);
        border-radius: 9px;
        background: rgba(8, 20, 29, 0.94);
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.34);
        color: #eaf7ff;
        font-family: "Open Sans", sans-serif;
        font-size: 10px;
        font-variant-numeric: tabular-nums;
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, 5px);
        transition: opacity 0.16s ease, transform 0.16s ease;
        white-space: nowrap;
    }

    .waterly-map-copy-feedback.is-visible {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    /* Wide: the arc takes over and the dock keeps only the bottom right corner */
    @media (min-width: 1200px) {
        /* The footer lives on the right here, so the scale no longer needs to float above it. */
        #main_map_content {
            --wqi-bottom-left-pad: 0px;
        }

        #main_map_content.wqi-variant-auto .wqi-legend-bar {
            display: none;
        }

        #main_map_content.wqi-variant-auto .wqi-legend-arc {
            display: block;
        }

        #main_map_content.wqi-variant-auto .wqi-map-legend {
            position: absolute;
            left: 14px;
            top: 50%;
            width: 212px;
            flex: 0 0 auto;
            transform: translateY(-50%);
        }

        #main_map_content.wqi-variant-auto .wqi-legend-empty {
            left: 22px;
            top: 50%;
            max-width: 190px;
            transform: translateY(-50%);
        }
    }

/************************************** SDK controls restyled *************************************/
    #main_map_content .maplibregl-ctrl-group {
        border: 1px solid rgba(143, 184, 220, 0.2);
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(31, 43, 52, 0.92), rgba(13, 19, 24, 0.94));
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.32);
    }

    #main_map_content .maplibregl-ctrl-group button {
        width: 34px;
        height: 34px;
        background-color: transparent;
    }

    #main_map_content .maplibregl-ctrl-group button + button {
        border-top: 1px solid rgba(143, 184, 220, 0.14);
    }

    #main_map_content .maplibregl-ctrl-group button:hover {
        background-color: rgba(105, 189, 247, 0.14);
    }

    /* The SDK ships dark glyphs, which disappear on the dark panels */
    #main_map_content .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
        filter: invert(84%) sepia(6%) saturate(360%) hue-rotate(163deg) brightness(95%);
    }

    #main_map_content .maplibregl-ctrl-scale {
        padding: 3px 8px;
        border: 1px solid rgba(143, 184, 220, 0.2);
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(31, 43, 52, 0.92), rgba(13, 19, 24, 0.94));
        color: #b6c4ce;
        font-family: "Open Sans", sans-serif;
        font-size: 9px;
        font-weight: 600;
    }

/********************************************* Mobile *********************************************/
    @media (max-width: 639.98px) {
        /* The readout and the wordmark are the first things to go when space runs out */
        #main_map_content .waterly-ctrl-cursor,
        #main_map_content .waterly-ctrl-brand span {
            display: none;
        }

        #main_map_content.wqi-variant-rail .waterly-ctrl-legend {
            left: 6px;
            width: 124px;
            padding: 9px 8px;
            transform: translateY(-38%);
        }

        #main_map_content.wqi-variant-rail .wqi-legend-body {
            grid-template-columns: 25px 16px 1fr;
            gap: 7px;
            height: 194px;
            padding-top: 12px;
        }

        #main_map_content.wqi-variant-rail .wqi-legend-axis,
        #main_map_content.wqi-variant-rail .wqi-legend-track {
            height: 176px;
        }

        #main_map_content.wqi-variant-rail .wqi-legend-stat {
            min-width: 41px;
            padding: 5px;
        }

        #main_map_content.wqi-variant-rail .wqi-legend-stat strong {
            font-size: 12px;
        }

        #main_map_content .map-layer-switcher {
            left: 0;
            top: calc(100% + 6px);
        }
    }

/************************************** Unified map navigation ************************************/
    /* Notifications are temporarily disabled. Their template and application logic stay in the
       codebase, but the legacy node must remain hidden even if another layout moves it. */
    .navbar-nav-notification {
        display: none !important;
    }

    /* The old navbar controls remain in DOM as action delegates, but they no
       longer draw a second visual layer above the map. */
    .navbar-website .logo-text-navbar,
    .navbar-website .navbar-nav-theme,
    .navbar-website .navbar-nav-language,
    .navbar-website .navbar-nav-user,
    .navbar-website .navbar-nav-services-mode,
    .navbar-website .navbar-nav-notification {
        display: none !important;
    }

    body.no-session .navbar-website {
        height: 0;
        padding: 0;
        pointer-events: none;
    }

    /* In a signed-in session the transparent, 60 px legacy navbar still sits
       above the map (z-index 1019). Let clicks pass through its empty surface
       to the map-native controls. Real subpage and hardware entries explicitly
       opt back into pointer interaction. */
    body.has-session .navbar-website {
        pointer-events: none;
    }

    body.has-session .navbar-website .navbar-menu-tree,
    body.has-session .navbar-website .navbar-nav-usb,
    body.has-session .navbar-website .navbar-nav-programmer,
    body.has-session .navbar-website .navbar-nav-wireless-bridge {
        pointer-events: auto;
    }

    #main_map_content .waterly-ctrl-brand {
        padding: 0;
        overflow: hidden;
        pointer-events: auto;
    }

    #main_map_content .map-brand-home {
        display: flex;
        height: 38px;
        align-items: center;
        gap: 8px;
        padding: 0 13px 0 9px;
        border: 0;
        background: transparent;
        color: #eaf3f9;
        cursor: pointer;
        font: inherit;
    }

    #main_map_content .map-brand-home img {
        width: 20px;
        height: 20px;
        filter: drop-shadow(0 0 7px rgba(69, 190, 255, 0.35));
    }

    #main_map_content .map-brand-home span {
        background: linear-gradient(90deg, #2193f3 0%, #104673 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 1px 7px rgba(31, 148, 210, 0.24));
        font-family: "Avenir Next", "Nunito Sans", "Segoe UI", sans-serif;
        font-size: 13px;
        font-weight: 750;
        letter-spacing: 0.035em;
        line-height: 1;
    }

    #main_map_content .waterly-ctrl-brand:hover {
        border-color: rgba(93, 221, 211, 0.42);
        background: linear-gradient(135deg, rgba(28, 65, 72, 0.94), rgba(9, 26, 35, 0.96));
        box-shadow: 0 9px 25px rgba(0, 0, 0, 0.38), 0 0 18px rgba(71, 214, 201, 0.12);
    }

    #main_map_content .waterly-ctrl-actions {
        position: relative;
        z-index: 8;
        display: flex;
        overflow: visible;
        align-items: center;
        gap: 3px;
        padding: 4px;
        border-color: rgba(119, 206, 215, 0.25);
        border-radius: 14px;
        background:
            radial-gradient(circle at 82% 0, rgba(54, 213, 201, 0.1), transparent 48%),
            linear-gradient(135deg, rgba(18, 36, 46, 0.94), rgba(7, 17, 25, 0.96));
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.035);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        pointer-events: auto;
    }

    #main_map_content .waterly-ctrl-actions .waterly-ctrl-button {
        position: relative;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border: 1px solid transparent;
        border-radius: 11px;
        color: #9fb5c1;
        font-size: 15px;
        transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }

    #main_map_content .waterly-ctrl-actions .waterly-ctrl-button:hover,
    #main_map_content .waterly-map-action-wrap.is-open > .waterly-ctrl-button {
        border-color: rgba(90, 226, 213, 0.28);
        background: rgba(64, 207, 194, 0.12);
        box-shadow: inset 0 0 14px rgba(72, 218, 205, 0.06);
        color: #7ce5da;
    }

    #main_map_content .waterly-ctrl-actions .devices-list-selector {
        display: flex !important;
        width: 40px !important;
        height: 40px !important;
        color: #a9c1cc;
        font-size: 15px;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #main_map_content .waterly-ctrl-actions .devices-list-selector:hover {
        color: #7ce5da;
    }

    /* Signed-in, privileged users keep the real service and notification
       controls. Their nodes are moved here, so counters and dropdown logic are
       still driven by the existing application modules. */
    #main_map_content .waterly-ctrl-actions > .waterly-map-native-action {
        display: block;
        position: relative;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #main_map_content .waterly-map-native-action > .nav-link {
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
    }

    #main_map_content .waterly-map-native-action > .nav-link > [data-toggle="dropdown"] {
        position: relative;
        display: flex !important;
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        border-radius: 11px;
        background: transparent;
        color: #9fb5c1;
        cursor: pointer;
        font-size: 15px;
        transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }

    #main_map_content .waterly-map-native-action > .nav-link > [data-toggle="dropdown"]:hover,
    #main_map_content .waterly-map-native-action.show > .nav-link > [data-toggle="dropdown"],
    #main_map_content .waterly-map-native-action > .nav-link.show > [data-toggle="dropdown"] {
        border-color: rgba(90, 226, 213, 0.28);
        background: rgba(64, 207, 194, 0.12);
        box-shadow: inset 0 0 14px rgba(72, 218, 205, 0.06);
        color: #7ce5da;
    }

    #main_map_content .waterly-map-native-action .badge {
        right: -1px;
        top: -3px;
        min-width: 17px;
        padding: 3px 4px;
        border: 2px solid #10212b;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
        font-size: 7px;
        line-height: 9px;
    }

    #main_map_content .waterly-map-native-action > .nav-link > .dropdown-menu {
        right: 0 !important;
        left: auto !important;
        top: calc(100% + 10px) !important;
        margin: 0;
        transform: none !important;
    }

    #main_map_content .waterly-map-service-action .dropdown-menu {
        overflow: hidden;
        border: 1px solid rgba(119, 206, 215, 0.2);
        border-radius: 14px;
        background: linear-gradient(145deg, rgba(17, 35, 45, 0.98), rgba(5, 14, 21, 0.985));
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
    }

    #main_map_content .waterly-map-service-action .dropdown-header {
        color: #6f8b98;
        font-size: 9px;
        font-weight: 850;
        letter-spacing: 0.08em;
    }

    #main_map_content .waterly-map-service-action .dropdown-item {
        color: #abc0ca;
    }

    #main_map_content .waterly-map-service-action .dropdown-item:hover {
        background: rgba(73, 205, 193, 0.11);
        color: #efffff;
    }

    #main_map_content .waterly-map-action-wrap {
        position: relative;
    }

    #main_map_content .map-language-current {
        position: absolute;
        right: 3px;
        bottom: 2px;
        min-width: 15px;
        padding: 1px 3px;
        border-radius: 5px;
        background: #54cfc3;
        color: #06151c;
        font-size: 6px;
        font-weight: 950;
        line-height: 9px;
        letter-spacing: 0.02em;
        text-align: center;
    }

    #main_map_content .waterly-map-popover {
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        display: none;
        width: 174px;
        box-sizing: border-box;
        padding: 7px;
        border: 1px solid rgba(119, 206, 215, 0.2);
        border-radius: 14px;
        background:
            radial-gradient(circle at 100% 0, rgba(65, 210, 198, 0.1), transparent 44%),
            linear-gradient(145deg, rgba(17, 35, 45, 0.98), rgba(5, 14, 21, 0.985));
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    #main_map_content .waterly-map-action-wrap.is-open .waterly-map-popover {
        display: block;
        animation: waterly-map-popover-in 0.18s ease-out;
    }

    #main_map_content .waterly-map-popover > small {
        display: block;
        padding: 5px 7px 7px;
        color: #63808d;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: 0.14em;
    }

    #main_map_content .waterly-map-popover button {
        display: flex;
        width: 100%;
        min-height: 34px;
        box-sizing: border-box;
        align-items: center;
        gap: 9px;
        padding: 7px 9px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #a7bbc5;
        cursor: pointer;
        font-family: "Open Sans", sans-serif;
        font-size: 10px;
        text-align: left;
    }

    #main_map_content .waterly-map-popover button:hover,
    #main_map_content .waterly-map-popover button.is-selected {
        background: rgba(73, 205, 193, 0.11);
        color: #eafcff;
    }

    #main_map_content .map-language-option b {
        display: grid;
        width: 25px;
        height: 20px;
        place-items: center;
        border: 1px solid rgba(110, 217, 207, 0.18);
        border-radius: 6px;
        background: rgba(63, 198, 187, 0.08);
        color: #74d9cf;
        font-size: 8px;
    }

    #main_map_content .waterly-map-popover button > i {
        width: 21px;
        color: #6fd8cd;
        font-size: 12px;
        text-align: center;
    }

    @keyframes waterly-map-popover-in {
        from { opacity: 0; transform: translateY(-5px) scale(0.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @media (max-width: 639.98px) {
        #main_map_content .map-brand-home {
            width: 40px;
            height: 40px;
            justify-content: center;
            gap: 0;
            padding: 0;
        }

        #main_map_content .waterly-ctrl-actions {
            gap: 2px;
            padding: 3px;
        }

        #main_map_content .waterly-ctrl-actions .waterly-ctrl-button,
        #main_map_content .waterly-ctrl-actions .devices-list-selector {
            width: 37px !important;
            height: 37px !important;
            flex-basis: 37px;
        }

        #main_map_content .waterly-ctrl-actions > .waterly-map-native-action,
        #main_map_content .waterly-map-native-action > .nav-link,
        #main_map_content .waterly-map-native-action > .nav-link > [data-toggle="dropdown"] {
            width: 37px;
            height: 37px;
            flex-basis: 37px;
        }

        #main_map_content .waterly-map-notification-action .dropdown-menu {
            position: fixed !important;
            right: 8px !important;
            left: 8px !important;
            top: 58px !important;
            width: auto !important;
            max-width: none !important;
        }
    }

/********************************************* Compass ********************************************/
    /* Only devices that actually report an azimuth get this control */
    #main_map_content .waterly-ctrl-compass {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 11px 6px 8px;
    }

    #main_map_content .waterly-ctrl-compass.is-hidden {
        display: none;
    }

    #main_map_content .waterly-compass-rose {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border: 1px solid rgba(105, 189, 247, 0.35);
        border-radius: 50%;
        color: #69bdf7;
        font-size: 10px;
        transition: transform 0.35s cubic-bezier(.2, .8, .2, 1);
    }

    #main_map_content .waterly-compass-digit {
        color: #eaf3f9;
        font-size: 10px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }


/* css/account/marker_sections.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           marker_sections.css
	@todo           Grupy parametrów w markerze + przełącznik trybu (graficzny / kompaktowy)
**************************************************************************************************/

/* ───────────────────────── Przełącznik trybu ───────────────────────── */
.marker-mode-switch {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-bottom: 12px;
    padding: 3px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    background: rgba(2, 6, 14, 0.55);
    margin-left: auto;
    width: fit-content;
}

.marker-mode-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 200ms ease;
}

.marker-mode-button i { font-size: 10px; }

.marker-mode-button:hover { color: #e2e8f0; }

.marker-mode-button.is-active {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* ───────────────────────── Grupa parametrów ───────────────────────── */
.marker-group { margin-bottom: 14px; }

.marker-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 8px;
}

.marker-group-icon {
    display: flex;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 10px;
}

.marker-group-name {
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.marker-group-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.18), transparent);
}

.marker-group-count {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 5px;
    background: rgba(2, 6, 14, 0.5);
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
}

/* ───────────────────────── Kafelki ───────────────────────── */
.marker-group-tiles {
    display: grid;
    grid-template-columns: repeat(var(--group-columns, 2), minmax(0, 1fr));
    gap: 8px;
}

.select-tile-contener .marker-main-contener .marker-group-tiles .marker-tile.marker-widget-group-item {
    display: flex;
    width: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(2, 6, 14, 0.45);
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: all 180ms ease;
}

.marker-group-tiles .marker-tile:hover {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.06);
    transform: translateY(-1px);
}

.marker-tile-label {
    display: flex;
    overflow: hidden;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-tile-label i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
}

.marker-tile-value {
    margin-top: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
}

.marker-tile-value small {
    margin-left: 2px;
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
}

/* Wariant gęsty — jony */
.select-tile-contener .marker-main-contener .marker-group-tiles .marker-tile.marker-widget-group-item.is-dense {
    align-items: center;
    padding: 7px 6px;
    text-align: center;
}

.marker-tile.is-dense .marker-tile-label { font-size: 9px; }

.marker-tile.is-dense .marker-tile-value {
    margin-top: 2px;
    font-size: 13px;
}

/* ───────────────────────── Przełączanie trybów ─────────────────────────
   Domyślnie (tryb graficzny) kafelki kompaktowe są ukryte.
   W trybie kompaktowym chowamy duże widgety i pokazujemy kafelki.
   Klasa trybu siedzi na .marker-main-contener, bo duże widgety wody
   renderowane są bezpośrednio w nim, a nie w .marker-widget-group.       */
.marker-main-contener .marker-compact-tiles { display: none; }

.marker-main-contener.is-compact-mode .marker-compact-tiles { display: block; }

.marker-main-contener.is-compact-mode .marker-atmosphere-widget,
.marker-main-contener.is-compact-mode .marker-water-temperature-widget,
.marker-main-contener.is-compact-mode .marker-water-oxygen-widget,
.marker-main-contener.is-compact-mode .marker-water-ph-widget,
.marker-main-contener.is-compact-mode .marker-water-ec-widget {
    display: none;
}

/* Tabela multisensora zostaje w obu trybach — kafelki kompaktowe czytają wyłącznie
   dane jednosensorowe, więc bez niej tryb kompaktowy gubi odczyty EC i tlenu.      */

/* W trybie kompaktowym ORP siedzi już w kafelkach "Parametry podstawowe",
   więc osobna grupa o tej samej nazwie byłaby powtórzeniem.               */
.marker-main-contener.is-compact-mode .marker-parameter-groups .marker-group-basic {
    display: none;
}

/* Mniejsze ekrany — ciaśniejsze kafelki */
@media (max-width: 500px) {
    .marker-group-tiles { gap: 6px; }

    .select-tile-contener .marker-main-contener .marker-group-tiles .marker-tile.marker-widget-group-item {
        padding: 8px;
    }

    .marker-tile-value { font-size: 14px; }
    .marker-mode-button { padding: 5px 11px; font-size: 10px; }
}


/* css/account/next-sidebar.css */
/**
 * Skipped minification because the original files appears to be already minified.
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
/*!
 * Next Sidebar v1.0.1 
 * A simple sidebar menu for your dashboard
 * Extension and easy to integrate with Bootstrap 4 - 5 and others front end framework.
 * License : MIT
 * Author : Nelh Amstrong (https://github.com/Nelh/)
 */
.container-wide {
    min-height: 100vh;
    padding-left: 280px;
    -webkit-transition: width .2s ease;
    -o-transition: width .2s ease;
    transition: width .2s ease
}

@media screen and (min-width:1200px) {
    .container-wide {
        padding-left: 280px
    }
}

@media screen and (max-width:1199px) {
    .container-wide {
        padding-left: 0
    }
}

.is-collapsed .container-wide {
    padding-left: 280px
}

@media screen and (min-width:1200px) {
    .is-collapsed .container-wide {
        padding-left: 70px
    }
}

a {
    text-decoration: none
}

.sidebar {
    bottom: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    -webkit-transition: width .2s ease;
    -o-transition: width .2s ease;
    transition: width .2s ease;
    width: 280px;
    background-color: #444;
    color: #fff;
    z-index: 9999
}

.sidebar ul {
    list-style-type: none
}

@media screen and (min-width:1200px) {
    .sidebar {
        width: 280px
    }

    .sidebar .sidebar-inner .sidebar-logo {
        padding: 0 20px
    }

    .sidebar .sidebar-inner .sidebar-logo .logo-sm {
        display: none
    }

    .sidebar .sidebar-inner .sidebar-logo>a .logo {
        background-position: 0;
        width: 150px
    }

    .sidebar .sidebar-inner .sidebar-menu>li>a .title {
        display: inline-block
    }

    .sidebar .sidebar-inner .sidebar-menu li.dropdown .arrow {
        opacity: 1
    }

    .sidebar .sidebar-inner .sidebar-menu li.open>ul.dropdown-menu {
        display: block !important
    }
}

@media screen and (max-width:1199px) {
    .sidebar {
        left: -280px;
        width: 250px
    }
}

.sidebar-inner {
    position: relative;
    height: 100%
}

.sidebar-logo {
    line-height: 0;
    padding: 0 20px
}

.sidebar-logo a {
    display: inline-block;
    width: 100%;
    color: #fff
}

.sidebar-logo a .logo {
    background-position: 0;
    background-repeat: no-repeat;
    display: inline-block;
    min-height: 64px;
    width: 70px
}

.sidebar-logo a .logo img {
    width: 30px
}

.sidebar-logo a .logo-text {
    min-height: 64px
}

.sidebar-logo a .logo-text img {
    width: 120px
}

.sidebar-logo .mobile-toggle {
    display: none;
    float: right;
    font-size: 18px;
    line-height: 64px
}

.sidebar-logo .mobile-toggle a {
    color: #fff
}

@media screen and (max-width:1199px) {
    .sidebar-logo .mobile-toggle {
        display: inline-block
    }
}

@media screen and (min-width:1200px) {
    .sidebar-logo .mobile-toggle {
        display: none
    }
}

.sidebar-menu {
    height: calc(100vh - 65px);
    list-style: none;
    margin: 0;
    overflow: auto;
    padding: 0;
    position: relative
}

.sidebar-menu .dropdown-toggle:after {
    display: none
}

.sidebar-menu .sidebar-link.actived:before {
    background: #0f9aee;
    border-radius: 50%;
    content: "";
    display: block;
    height: 8px;
    left: -4px;
    position: absolute;
    top: calc(50% - 4px);
    width: 8px
}

.sidebar-menu li {
    position: relative;
    width: 100%;
    cursor: pointer;
}

.sidebar-menu li:hover:not( .active ) {
    background-color: #002F6773;
}

.sidebar-menu li.active {
    background-color: #002F67;
}

.sidebar-menu li.dropdown .arrow {
    font-size: 10px;
    line-height: 40px;
    position: absolute;
    right: 30px;
    -webkit-transition: width .05s ease-in;
    -o-transition: width .05s ease-in;
    transition: width .05s ease-in
}

@media screen and (max-width:1199px) {
    .sidebar-menu li.dropdown .arrow {
        right: 25px
    }
}

.sidebar-menu li.dropdown.open>a {
    color: #fff
}

.sidebar-menu li.dropdown.open>a .icon-holder {
    color: #0f9aee
}

.sidebar-menu li.dropdown.open>a>.arrow {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.sidebar-menu li.dropdown.open>.dropdown-menu {
    display: block
}

.sidebar-menu li.dropdown.open>.dropdown-menu .dropdown-menu {
    padding-left: 20px
}

.sidebar-menu li.dropdown.open>.dropdown-menu .arrow {
    line-height: 25px
}

.sidebar-menu li a {
    color: #fff;
    -webkit-transition: width .3s ease;
    -o-transition: width .3s ease;
    transition: width .3s ease
}

.sidebar-menu li a:focus,
.sidebar-menu li a:hover {
    color: #fff;
    text-decoration: none;
}

.sidebar-menu>li.dropdown ul.dropdown-menu {
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    float: none;
    padding-left: 50px;
    padding-top: 0;
    position: relative;
    width: 100%
}

.sidebar-menu>li.dropdown ul.dropdown-menu>li>a {
    display: block;
    padding: 10px 20px;
    font-size: 14px
}

.sidebar-menu>li.dropdown ul.dropdown-menu>li>a:focus,
.sidebar-menu>li.dropdown ul.dropdown-menu>li>a:hover {
    background-color: rgba(0, 0, 0, 0);
    color: #fff
}

.sidebar-menu>li.dropdown ul.dropdown-menu>li.actived a {
    color: #fff
}

.sidebar-menu>li>a {
    display: block;
    font-size: 15px;
    padding: 5px 15px;
    position: relative;
    white-space: nowrap
}

.sidebar-menu>li>a .icon-holder {
    border-radius: 6px;
    display: inline-block;
    font-size: 17px;
    height: 35px;
    left: 0;
    line-height: 35px;
    margin-right: 14px;
    position: relative;
    text-align: center;
    -webkit-transition: width .3s ease;
    -o-transition: width .3s ease;
    transition: width .3s ease;
    width: 35px
}

@media screen and (min-width:1200px) {
    .is-collapsed .sidebar {
        width: 70px
    }

    .is-collapsed .sidebar .sidebar-inner .sidebar-logo {
        padding: 0
    }

    .is-collapsed .sidebar .sidebar-inner .sidebar-logo .logo-sm {
        display: inline
    }

    .is-collapsed .sidebar .sidebar-inner .sidebar-menu {
        overflow-x: hidden
    }

    .is-collapsed .sidebar .sidebar-inner .sidebar-menu>li>a .title {
        display: none
    }

    .is-collapsed .sidebar .sidebar-inner .sidebar-menu li.dropdown .arrow {
        opacity: 0
    }

    .is-collapsed .sidebar:hover {
        width: 280px
    }

    .is-collapsed .sidebar:hover .sidebar-inner .sidebar-logo {
        padding: 0 20px
    }

    .is-collapsed .sidebar:hover .sidebar-inner .sidebar-logo .logo-sm {
        display: none
    }

    .is-collapsed .sidebar:hover .sidebar-inner .sidebar-menu>li>a .title {
        display: inline-block
    }

    .is-collapsed .sidebar:hover .sidebar-inner .sidebar-menu li.dropdown .arrow {
        opacity: 1
    }

    .is-collapsed .sidebar:hover .sidebar-inner .sidebar-menu li.open>ul.dropdown-menu {
        display: block !important
    }

    .is-collapsed .sidebar:hover ~ .container-wide {
        padding-left: 280px;
    }
}

@media screen and (max-width:1199px) {
    .is-collapsed .sidebar {
        width: 280px;
        left: 0
    }

    .is-collapsed .sidebar .sidebar-inner .sidebar-logo {
        padding: 0 20px
    }

    .is-collapsed .sidebar .sidebar-inner .sidebar-logo .logo-sm {
        display: none
    }

    .is-collapsed .sidebar .sidebar-inner .sidebar-logo>a .logo {
        background-position: 0;
        width: 150px
    }

    .is-collapsed .sidebar .sidebar-inner .sidebar-menu>li>a .title {
        display: inline-block
    }

    .is-collapsed .sidebar .sidebar-inner .sidebar-menu li.dropdown .arrow {
        opacity: 1
    }

    .is-collapsed .sidebar .sidebar-inner .sidebar-menu li.open>ul.dropdown-menu {
        display: block !important
    }
}



/* Footer */
@media screen and (min-width:1200px) {
    .sidebar .sidebar-inner .sidebar-footer {
        padding: 0 20px
    }

    .sidebar .sidebar-inner .sidebar-footer .footer-sm {
        display: none
    }

    .sidebar .sidebar-inner .sidebar-footer>a .footer {
        background-position: 0;
        width: 150px
    }
}

.sidebar-footer {
    line-height: 0;
    padding: 0 20px;
    bottom: 0px;
    position: absolute;
    width: 100%;
    cursor: default;
}

.sidebar-footer a {
    display: inline-block;
    width: 100%;
    color: #ccc;
    white-space: nowrap;
    text-decoration: none;
}

.sidebar-footer a .footer {
    background-position: 0;
    background-repeat: no-repeat;
    display: inline-block;
    min-height: 40px;
    width: 70px
}

.sidebar .system-ver {
    font-size: 10px;
    color: rgb(156, 156, 156) !important;
}

.sidebar-footer .footer-text {
    min-height: 30px
}

@media screen and (min-width:1200px) {
    .is-collapsed .sidebar .sidebar-inner .sidebar-footer {
        padding: 0
    }

    .is-collapsed .sidebar .sidebar-inner .sidebar-footer .footer-sm {
        display: inline
    }

    .is-collapsed .sidebar:hover .sidebar-inner .sidebar-footer {
        padding: 0 20px
    }

    .is-collapsed .sidebar:hover .sidebar-inner .sidebar-footer .footer-sm {
        display: none
    }
}

@media screen and (max-width:1199px) {
    .is-collapsed .sidebar .sidebar-inner .sidebar-footer {
        padding: 0 20px
    }

    .is-collapsed .sidebar .sidebar-inner .sidebar-footer .footer-sm {
        display: none
    }

    .is-collapsed .sidebar .sidebar-inner .sidebar-footer>a .footer {
        background-position: 0;
        width: 150px
    }
}

/* css/account/notification_events.css */
/********************************************************************************************************************
******************************************* MANAGER   -   WWW   APPLICATION *****************************************
 @license       https://etia.pl
 @copyright     © Copyright 2017 Rafał Złotorzyński (r.zlotorzynski@etia.pl)
 @author        Rafał Złotorzyński (r.zlotorzynski@etia.pl)
 @file          notification_events.css
 @fileoverview  Style notyfikacji i systemu zdarzeń
********************************************************************************************************************/

#notify_events .dropdown-toggle {
    /* visibility: hidden; */
    color: white;
}

#notify_events .badge-danger {
    display: none;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] {
    /* right: -50px; */
    width: 500px;
    /* margin: 15px 10px 0px -12px; */
    background: #285487f7;
}

/* AKCJE W HEADER */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .action-notification {
    position: relative;
    display: block;
    float: right;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .action-notification i.fa {
    margin-left: 5px;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .action-notification .fa-trash {
    color: #F00;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-footer {
    padding: 0px 9px;
    color: #666;
    font-size: 13px;
    border-top: solid #bfbfbf 1px;
    /* border-bottom: solid #bfbfbf 1px; */
    line-height: 30px;
    height: 30px;
    text-align: center;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-footer i {
    margin-right: 5px;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body .no-notification {
    text-align: center;
    vertical-align: middle;
    line-height: 53px;
}



/* SKALOWANIE */
/* @media ( max-width: 767px ) {
    .dropdown-menu.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] {
        width: 100% !important;
        position: fixed !important;
        left: "" !important;
        bottom: 0;
        top: 80px!important;
        margin: 0!important;
        transform: "" !important;
    }

    .dropdown-menu.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .dropdown-header {
        position: fixed;
        z-index: 100;
        width: 100%;
    }

    .dropdown-menu.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body {
        height: 100%;
        width: 100%;
        position: fixed!important;
        bottom: 0px;
        margin-bottom: 0px;
        top: 132px!important;
        background: white;
        max-height: calc(100% - 162px);
    }

    .dropdown-menu.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-footer {
        position: fixed;
        bottom: 0px;
        width: 100%;
    }
}
 */















/* 
.border-bottom-1 {
    border-bottom-width: 1px!important;
    border-bottom-style: solid!important;
    border-bottom-color: #e5e5e5!important;
} */

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body {
    list-style: none;
    padding: 0;
    overflow: auto;
    max-height: 400px;
}

/* .max-h-300 {
    max-height: 300px!important;
} */

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li:first-child {
    border-top: none;
}
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li {
    border-top: 1px solid #e2e2e2;
}


.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li.unread>.notification {
    background-color: #fff;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification:first-child {
    border: none;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li:not(.unread)>.notification {
    display: block;
    position: relative;
    background-color: #eee;
    padding: 6px;
    min-height: 63px;
    color: #333;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-image {
    float: left;
    width: 50px;
    height: 100%;
    text-align: center;
    position: absolute;
    display: inline-block;
    top: 0;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-image i {
    font-size: 23px;
    position: relative;
    vertical-align: middle;
    line-height: 63px;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-msg {
    margin-left: 56px;

}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-msg .body-text {
    bottom: 4px;
    position: absolute;
    display: inline-block;
    width: 100%;
    left: 0;
    padding-left: 61px;
    padding-right: 5px;
    font-size: 12px;
    font-style: italic;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-msg .date_event {
    display: inline-block;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-msg .date_events_time {
    display: inline-block;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-msg .date_event_from {
    margin-left: 7px;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-msg .body-text i {
    margin-right: 5px;
    color: #444;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-msg .notofication-title {
    display: inline-block;
    position: relative;
    float: right;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-sub-heading {
    margin: 0;
    font-size: 12px;
    padding-bottom: 20px;
    font-weight: 600;
}


.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification:first-child {
    border: none;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification {
    display: block;
    position: relative;
    background-color: #fff;
    padding: 6px;
    min-height: 65px;
    color: #333;
}




/* KLASY - TYPY - EVENTÓW ( walory kolorystyczne :) ) */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-image span {
    display: inline-block;
    position: absolute;
    height: 49px;
    width: 49px;
    left: 0px;
    top: 7px;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-image i {
    color: white;
}

/* SYSTEMOWY */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.system .notification-image span {
    background: rgba(75, 75, 75, 0.8);
}

/* INFORMACYJNY */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.info .notification-image span {
    background: rgba(33, 147, 243, 0.8);
}

/* SUKCES */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.success .notification-image span {
    background: rgba(97, 212, 31, 0.92);
}

/* BŁĄD */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.error .notification-image span {
    background: #dc3545;
}

/* ALARM */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.alarm .notification-image span {
    background: #ff8a00;
}

/* OSTRZEŻENIE */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.warning .notification-image span {
    background: rgb(255 203 0)
}

/* WIADOMOŚĆ OD ADMINISTRATORA */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.admin .notification-image span {
    background: #7d00ffbd;
}

/* NIEZDEFINIOWANY */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.default .notification-image span {
    background: rgba(75, 75, 75, 0.8);
}

/* css/account/privacy_consent.css */
#waterly-privacy {
	--privacy-primary: #2193f3;
	--privacy-primary-hover: #1976d2;
	--privacy-bg: #121c25;
	--privacy-bg-soft: #1b2833;
	--privacy-text: #f5f8fb;
	--privacy-muted: #b6c3ce;
	--privacy-border: #344653;
	--privacy-shadow: 0 -8px 36px rgba(0, 0, 0, 0.5);
	position: relative;
	z-index: 2147483000;
	font-family: "Open Sans", Arial, sans-serif;
	line-height: 1.5;
}

#waterly-privacy,
#waterly-privacy *,
#waterly-privacy *::before,
#waterly-privacy *::after {
	box-sizing: border-box;
}

#waterly-privacy[data-privacy-theme="light"] {
	--privacy-bg: #ffffff;
	--privacy-bg-soft: #f4f7fa;
	--privacy-text: #202833;
	--privacy-muted: #5d6a78;
	--privacy-border: #d9e0e7;
	--privacy-shadow: 0 -8px 36px rgba(0, 27, 57, 0.22);
}

#waterly-privacy [hidden] { display: none !important; }

.waterly-consent-banner {
	position: fixed;
	right: 16px;
	bottom: 16px;
	left: 16px;
	display: flex;
	align-items: center;
	gap: 28px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 22px 24px;
	color: var(--privacy-text);
	background: var(--privacy-bg);
	border: 1px solid var(--privacy-border);
	border-radius: 16px;
	box-shadow: var(--privacy-shadow);
	opacity: 0;
	pointer-events: none;
	transform: translateY(14px);
	transition: opacity 0.28s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.waterly-consent-banner.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.waterly-consent-copy { display: flex; flex: 1; gap: 16px; min-width: 0; }
.waterly-consent-icon {
	display: flex;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--privacy-primary);
	background: rgba(33, 147, 243, 0.12);
	border-radius: 12px;
	font-size: 20px;
}

.waterly-consent-copy h2,
.waterly-privacy-dialog h2,
.waterly-privacy-category h3 {
	margin: 0;
	color: var(--privacy-text);
	font-weight: 700;
}

.waterly-consent-copy h2 { margin-bottom: 4px; font-size: 18px; }
.waterly-consent-copy p {
	max-width: 760px;
	margin: 0 0 5px;
	color: var(--privacy-muted);
	font-size: 13px;
}

.waterly-consent-copy a,
.waterly-privacy-policy-link {
	color: var(--privacy-primary);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.waterly-consent-actions { display: flex; flex: 0 0 auto; gap: 10px; }
.waterly-consent-button,
.waterly-privacy-close,

.waterly-consent-button {
	min-height: 42px;
	padding: 9px 16px;
	border: 1px solid var(--privacy-primary);
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.waterly-consent-primary { color: #ffffff; background: var(--privacy-primary); }
.waterly-consent-primary:hover { background: var(--privacy-primary-hover); border-color: var(--privacy-primary-hover); }
.waterly-consent-secondary { color: var(--privacy-primary); background: transparent; }
.waterly-consent-secondary:hover {
	color: #ffffff;
	background: var(--privacy-primary-hover);
	border-color: var(--privacy-primary-hover);
}

.waterly-consent-button:focus-visible,
.waterly-privacy-close:focus-visible,


.waterly-privacy-backdrop {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(5, 14, 24, 0.72);
	backdrop-filter: blur(3px);
}

.waterly-privacy-dialog {
	width: 100%;
	max-width: 680px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 26px;
	color: var(--privacy-text);
	background: var(--privacy-bg);
	border: 1px solid var(--privacy-border);
	border-radius: 16px;
	box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
}

.waterly-privacy-dialog header {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	justify-content: space-between;
}

.waterly-privacy-dialog h2 { font-size: 22px; }
.waterly-privacy-dialog header p { margin: 6px 0 0; color: var(--privacy-muted); font-size: 14px; }
.waterly-privacy-close {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--privacy-muted);
	background: transparent;
	border: 1px solid var(--privacy-border);
	border-radius: 9px;
	font-size: 25px;
	line-height: 30px;
}

.waterly-privacy-categories { display: grid; gap: 12px; margin: 22px 0 16px; }
.waterly-privacy-category {
	display: flex;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	background: var(--privacy-bg-soft);
	border: 1px solid var(--privacy-border);
	border-radius: 12px;
}

.waterly-privacy-category h3 { font-size: 15px; }
.waterly-privacy-category p { margin: 4px 0 0; color: var(--privacy-muted); font-size: 12px; }
.waterly-privacy-category-toggle { cursor: pointer; }
.waterly-privacy-required {
	flex: 0 0 auto;
	color: var(--privacy-primary);
	font-size: 11px;
	font-weight: 700;
	text-align: right;
}

.waterly-privacy-switch { position: relative; flex: 0 0 46px; width: 46px; height: 26px; }
.waterly-privacy-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.waterly-privacy-switch span {
	position: absolute;
	inset: 0;
	background: #929ca7;
	border-radius: 20px;
	transition: background-color 0.2s ease;
}

.waterly-privacy-switch span::after {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	content: "";
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
	transition: transform 0.2s ease;
}

.waterly-privacy-switch input:checked + span { background: var(--privacy-primary); }
.waterly-privacy-switch input:checked + span::after { transform: translateX(20px); }
.waterly-privacy-storage { padding: 16px; border: 1px solid var(--privacy-border); border-radius: 12px; }
.waterly-privacy-storage h3 { margin: 0 0 10px; color: var(--privacy-text); font-size: 14px; font-weight: 700; }
.waterly-privacy-storage dl { display: grid; gap: 9px; margin: 0; }
.waterly-privacy-storage dl > div {
	display: grid;
	grid-template-columns: minmax(125px, 0.7fr) minmax(0, 1.8fr);
	gap: 12px;
}

.waterly-privacy-storage dt { color: var(--privacy-text); font-size: 12px; font-weight: 700; }
.waterly-privacy-storage dd { margin: 0; color: var(--privacy-muted); font-size: 12px; }
.waterly-privacy-controller { margin: 16px 0 5px; color: var(--privacy-muted); font-size: 12px; }
.waterly-privacy-dialog footer {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--privacy-border);
}

body.waterly-privacy-open { overflow: hidden; }

@media (max-width: 900px) {
	.waterly-consent-banner {
		align-items: stretch;
		flex-direction: column;
		gap: 16px;
		max-height: calc(100vh - 32px);
		overflow-y: auto;
	}
	.waterly-consent-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.waterly-consent-banner {
		right: 8px;
		bottom: 8px;
		left: 8px;
		padding: 18px;
		border-radius: 14px;
	}
	.waterly-consent-icon { display: none; }
	.waterly-consent-actions { grid-template-columns: 1fr; }
	.waterly-consent-actions .waterly-consent-primary { order: -1; }
	.waterly-privacy-backdrop { align-items: flex-end; padding: 8px; }
	.waterly-privacy-dialog { max-height: calc(100vh - 16px); padding: 20px; border-radius: 14px; }
	.waterly-privacy-category { align-items: flex-start; }
	.waterly-privacy-storage dl > div { grid-template-columns: 1fr; gap: 2px; }
	.waterly-privacy-dialog footer { flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
	#waterly-privacy * { scroll-behavior: auto !important; transition: none !important; }
}


/* css/account/profile.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         hommie_settings
	@file           settings.css
**************************************************************************************************/



.account-settings .user-profile {
    margin: 0 0 1rem 0;
    padding-bottom: 1rem;
    text-align: center;
}
.account-settings .user-profile .user-avatar {
    margin: 0 0 1rem 0;
}
.account-settings .user-profile .user-avatar i.fas,
.account-settings .user-profile .user-avatar img {
    width: 90px;
    height: 90px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.account-settings .user-profile .user-avatar i.fas {
    font-size: 100px;
}

.account-settings .user-profile h5.user-name {
    margin: 0 0 0.5rem 0;
}
.account-settings .user-profile h6.user-email {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 400;
}



.user-view-table td:first-child {
    width: 9rem;
}
.user-view-table td {
    padding-right: 0;
    padding-left: 0;
    border: 0;
}


.dropdown-item.active, .dropdown-item:active {
    background-color: transparent !important;
}

.dropdown-item.active, .dropdown-item:hover {
    background-color: #44444440 !important;
}

.on_mouse_over:hover {
    color: #2193F3;
}

.nav-link {
    /* color: #4a5568; */
    color: #FFF !important;
}
.card {
    /* box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06); */
    border: none;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    /* background-color: #090909; */
    background-color: unset;
    background-clip: border-box;
    /* border: 0 solid rgba(0,0,0,.125); */
    /* border-radius: .25rem; */
}

.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1rem;
}

.gutters-sm {
    margin-right: -8px;
    margin-left: -8px;
}

.gutters-sm>.col, .gutters-sm>[class*=col-] {
    padding-right: 8px;
    padding-left: 8px;
}
.mb-3, .my-3 {
    margin-bottom: 1rem!important;
}

.bg-gray-300 {
    background-color: #e2e8f0;
}
.h-100 {
    height: 100%!important;
}
.shadow-none {
    box-shadow: none!important;
}



.nav-item.nav-link {
    cursor: pointer;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #002F67;
}

.nav-item.nav-link i {
    width: 24px;
    height: 24px;
    font-size: 24px;
    vertical-align: middle;
    text-align: center;
    margin-right: 0.5rem !important;
}

.nav-item.nav-link span {
    font-size: 16px;
    vertical-align: middle;
}

.nav-item.nav-link:hover {
    color: #2193F3;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #FFF;
    background-color: #002F67;
    border-color: #dee2e6 #dee2e6 #fff;
}

.card-header .nav-tabs .nav-item {
    margin-bottom: 15px;
}





#map-waterly-location {
    border-radius: 15px;
    height: 400px;
    width: 100%;
}

.map-profile-subpage-attributes {
    position: absolute;
    bottom: 0;
    z-index: 1018;
    font-size: 10px;
}

.map-profile-subpage-attributes .map-profile-subpage-attributes-content {
    background-color: #212224;
    border-radius: 10px 0 0px 0;
    padding: 2px 10px;
}

/* css/account/session_visibility.css */
/**************************************************************************************************
	@author         waterly.eu
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           session_visibility.css
	@description    What a visitor without a session may see: the map and the sign-in entry only.
					body.no-session  - nobody is signed in
					body.has-session - a user is signed in
**************************************************************************************************/

/* Items that belong to a signed-in user */
body.no-session .session-only {
    display: none !important;
}

/* The sign-in entry only makes sense without a session */
body.has-session .no-session-only {
    display: none !important;
}

/* Language picker in the navbar - available in both states */
.navbar-nav-language .user-settings-language {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.navbar-nav-language .user-settings-language-label {
    min-width: 30px;
    padding: 2px 0;
    border-radius: 5px;
    background-color: #33373b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

.navbar-nav-language .user-settings-language.selected .user-settings-language-label {
    background-color: #1f6fb2;
}

/* Navigation that leads into account-only areas */
body.no-session .navbar-menu-tree,
body.no-session .navbar-nav-notification,
body.no-session .navbar-nav-usb,
body.no-session .navbar-nav-programmer,
body.no-session .navbar-nav-wireless-bridge,
body.no-session .navbar-nav-services-mode {
    display: none !important;
}

/* Side navigation and the sub-page container - sub-pages need an account */
body.no-session .next-sidebar,
body.no-session .main-container-subpage {
    display: none !important;
}

/* Laboratory navigation belongs to the authenticated workspace. Public visitors
   can inspect a point or move to it on the map, but cannot enter the lab. */
body.no-session .tile-go-to-object,
body.no-session .map-go-to-object {
    display: none !important;
}

/*
	Deliberately NOT hidden without a session, because these work on public data:
	.devices-list-selector   - opens the list of measurement points
	.tiles-list-contener     - the list itself
	.select-tile-contener    - readings of the point picked on the map
	.contener-map            - the map
*/

/******************************** Measurement point panel for visitors ****************************/
    /*
        Charts are blocked in show_chart_lab and show_statistic_parameter, so nothing inside the
        panel may advertise itself as clickable. The pointer is dropped wholesale rather than per
        class, because the clickable parameters carry a dozen different names across the widget
        stylesheets, and any new one would silently miss a targeted rule.
    */
    body.no-session .select-tile-contener,
    body.no-session .select-tile-contener * {
        cursor: default !important;
    }

    /* The controls that still do something keep their affordance */
    body.no-session .select-tile-contener a,
    body.no-session .select-tile-contener .close-tiles-contener,
    body.no-session .select-tile-contener .navigate-to-marker,
    body.no-session .select-tile-contener .marker-loading-action,
    body.no-session .select-tile-contener .marker-water-hero-quick-action[data-action="center"],
    body.no-session .select-tile-contener .marker-water-hero-quick-action[data-action="navigate"] {
        cursor: pointer !important;
    }

    /* Public readings are informational. Do not suggest a chart action with
       a hand cursor, hover lift or keyboard focus when charts require a session. */
    body.no-session .select-tile-contener .widget-dynamic-chart,
    body.no-session .select-tile-contener .marker-widget-group-item {
        pointer-events: none;
    }

    body.no-session .select-tile-contener .marker-group-tiles .marker-tile:hover,
    body.no-session .select-tile-contener .marker-group-tiles .marker-tile:focus-visible {
        border-color: rgba(255, 255, 255, 0.06);
        background: rgba(2, 6, 14, 0.45);
        transform: none;
    }

    /* The presentation switch is not rendered for visitors, this covers any stale markup */
    body.no-session .marker-mode-switch {
        display: none !important;
    }

    /* Account-only point actions must not exist visually in the public widget.
       The modern renderer omits them; these selectors also cover stale/legacy
       markup that may remain while the point data is refreshing. */
    body.no-session .select-tile-contener .marker-legacy-subscribe-row,
    body.no-session .select-tile-contener .marker-widget-subscribe,
    body.no-session .select-tile-contener .marker-water-hero-quick-action[data-action="subscribe"],
    body.no-session .select-tile-contener .marker-water-hero-quick-action[data-action="laboratory"] {
        display: none !important;
    }

    body.no-session .select-tile-contener .marker-water-hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


/* css/account/statistic.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           statistic.css
**************************************************************************************************/

/* Style for widget */

.widget-parameter-with-chart {
	position: relative;
	border: 3px solid #33373b;
	border-radius: 15px;
	height: 248px;
	background-color: #212224;
}

.widget-parameter-with-chart .widget-parameter-body {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
}

.widget-parameter-with-chart .widget-header {
	font-size: 17px;
	color: #2193F3;
}

.widget-parameter-with-chart .widget-unit {
	padding-left: 0.4rem;
	font-size: 18px;
	color: #b4bbc2;
	margin-left: -5px;
}

.widget-parameter-with-chart .widget-icon {
	font-size: 45px;
	color: #b4bbc2;
	margin-top: -10px;
}

.widget-parameter-with-chart .widget-icon i {
	vertical-align: bottom;
}

.widget-parameter-with-chart .widget-value {
	font-size: 45px;
	height: 68px;
	color: #b4bbc2;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 300px;
}

.widget-parameter-with-chart .widget-date {
	color: #b4bbc2;
	font-size: 12px;
	height: 18px;
	font-style: italic;
}

.widget-parameter-with-chart .chart-statistic-div {
	overflow: visible;
	height: 90px;
	border-radius: 15px;
	width: 100%;
	bottom: 0px;
	overflow: hidden;
}


/* Style for widget in window */

.widget-chart-in-window {
	position: relative;
}

.widget-chart-in-window .widget-parameter-body {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
}

.widget-chart-in-window .chart-statistic-div {
	overflow: visible;
	border-radius: 15px;
	left: "";
	max-width: 105%;
	width: "";
	bottom: "";
	height: 405px;
}

.widget-chart-in-window .widget-value {
	font-size: 66px;
	line-height: 66px;
	color: #b4bbc2;
}

.widget-chart-in-window .widget-unit {
	font-size: 16px;
	color: #b4bbc2;
	font-weight: lighter;
}


/* Style for legend */

.statistic-legend-probe {
	background: rgba(0, 0, 0, 0.7);
	border-radius: 5px;
	color: #b4bbc2;
	opacity: 1;
	pointer-events: none;
	position: absolute;
	transform: translate(-50%, 0);
	transition: all .1s ease;
	border: #b4bbc2 solid 1px;
}

.statistic-legend-probe table {
	margin: 0px;
	font-size: 16px;
}

.statistic-legend-probe table tr {
	background-color: inherit;
	border-width: 0;
}

.statistic-legend-probe table thead tr {
	cursor: default;
	height: 30px;
	text-align: center;
	vertical-align: middle;
	line-height: 30px;
}

.statistic-legend-probe table thead tr th {
	border-width: 0;
	white-space: nowrap;
	padding: 0 20px;
	font-weight: bold;
}

.statistic-legend-probe table tbody tr td {
	border-width: 0;
	text-align: center;
	padding: 0 20px !important;
	font-size: 25px;
	white-space: nowrap;
	margin-top: 10px;
}

.statistic-legend-probe table tbody tr td small {
	font-size: 10px;
	margin-left: 5px;
}

.statistic-legend-probe span {
	border-width: 0px;
	margin-right: 10px;
	height: 20px;
	width: 20px;
	display: inline-block;
}

.statistic-lobibox-button-hidden {
	visibility: hidden;
}

/* css/account/subpage_devices_diagnostic.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           devices_diagnostic.css
**************************************************************************************************/

/* Main contener */
.device-diagnostic-subpage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0 12px !important;
    overflow-y: auto !important;
    background: transparent;
}

.device-diagnostic-subpage::before,
.device-diagnostic-subpage::after {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 0;
    width: 12px;
    content: "";
    pointer-events: none;
    background: rgba(8, 14, 18, 0.22);
    -webkit-backdrop-filter: blur(12px) saturate(0.72);
    backdrop-filter: blur(12px) saturate(0.72);
}

.device-diagnostic-subpage::before {
    left: 0;
}

.device-diagnostic-subpage::after {
    right: 0;
}

@media (max-width: 767.98px) {
    .device-diagnostic-subpage {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .device-diagnostic-subpage::before,
    .device-diagnostic-subpage::after {
        display: none;
    }
}

.main-container-subpage:has(> .device-diagnostic-subpage) {
    position: fixed !important;
    inset: 56px 0 0;
    z-index: 1018;
    width: auto;
    height: auto;
    overflow: hidden;
    pointer-events: auto;
    overscroll-behavior: contain;
    background: transparent;
    animation: diagnostic-subpage-slide-in 0.38s cubic-bezier(0.22, 0.78, 0.24, 1) both;
}

.main-container-subpage:has(> .device-diagnostic-subpage) > .device-diagnostic-subpage {
    height: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

.main-container-subpage.diagnostic-is-collapsing {
    animation: diagnostic-subpage-slide-out 0.32s cubic-bezier(0.55, 0.08, 0.68, 0.53) both;
}

@keyframes diagnostic-subpage-slide-in {
    from { opacity: 0.86; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes diagnostic-subpage-slide-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0.9; transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .main-container-subpage:has(> .device-diagnostic-subpage),
    .main-container-subpage.diagnostic-is-collapsing {
        animation: none;
    }
}

.diagnostic-page-shell {
    position: relative;
    z-index: 1;
    min-height: 100%;
    border: 1px solid rgba(101, 184, 255, 0.17);
    border-width: 1px 1px 0;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 4% 0, rgba(33, 150, 243, 0.09), transparent 28%),
        linear-gradient(145deg, rgba(27, 33, 38, 0.98), rgba(18, 23, 27, 0.98));
    box-shadow: 0 15px 38px rgba(0, 0, 0, 0.2);
}

.diagnostic-sheet-toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(143, 184, 220, 0.12);
    background: rgba(16, 22, 27, 0.96);
    backdrop-filter: blur(16px);
}

.diagnostic-sheet-collapse {
    min-width: 190px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 0;
    border-radius: 10px;
    color: #dbe9f2;
    background: transparent;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
}

.diagnostic-sheet-collapse:hover,
.diagnostic-sheet-collapse:focus-visible {
    color: #ffffff;
    background: rgba(101, 184, 255, 0.09);
    outline: none;
}

.diagnostic-sheet-handle {
    width: 42px;
    height: 5px;
    border-radius: 5px;
    background: #66808f;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: background 0.18s ease, transform 0.18s ease;
}

.diagnostic-sheet-collapse:hover .diagnostic-sheet-handle,
.diagnostic-sheet-collapse:focus-visible .diagnostic-sheet-handle {
    background: #79c2ff;
    transform: scaleX(1.08);
}

.diagnostic-sheet-collapse-copy {
    min-width: 0;
    text-align: left;
}

.diagnostic-sheet-collapse-copy strong,
.diagnostic-sheet-collapse-copy small {
    display: block;
    white-space: nowrap;
}

.diagnostic-sheet-collapse-copy strong {
    font-size: 10px;
    line-height: 1.1;
}

.diagnostic-sheet-collapse-copy small {
    margin-top: 1px;
    color: #748792;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.diagnostic-sheet-collapse > i {
    color: #79c2ff;
    font-size: 11px;
}

.diagnostic-control-shell {
    padding-bottom: 10px;
}

.diagnostic-content-shell {
    padding: 8px;
    border-top: 1px solid rgba(143, 184, 220, 0.13);
    background: rgba(11, 15, 18, 0.14);
}

.diagnostic-control-shell .diagnostic-device-header {
    border: 0;
    border-bottom: 1px solid rgba(143, 184, 220, 0.13);
    border-radius: 17px 17px 0 0;
    box-shadow: none;
}

.diagnostic-control-shell .diagnostic-section-navigation {
    position: relative;
    top: auto;
    margin: 8px 10px 0 !important;
    box-shadow: none;
}

.diagnostic-control-shell .widget-timeline-group {
    width: auto;
    margin: 8px 10px 0 !important;
}

.diagnostic-content-shell .diagnostic-active-section-heading {
    margin-top: 0;
    scroll-margin-top: 12px;
}

.diagnostic-content-shell .diagnostic-section-stage {
    min-height: 400px;
}

.diagnostic-initial-loader {
    position: relative;
    display: none;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    margin: 2px 16px 13px;
    padding: 13px 15px 16px;
    overflow: hidden;
    border: 1px solid rgba(101, 184, 255, 0.22);
    border-radius: 11px;
    background: linear-gradient(115deg, rgba(33, 150, 243, 0.12), rgba(32, 201, 151, 0.055));
}

.diagnostic-initial-loader.is-visible {
    display: grid;
}

.diagnostic-initial-loader-visual {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #8acaff;
    background: rgba(33, 150, 243, 0.13);
}

.diagnostic-initial-loader-visual span,
.diagnostic-initial-loader-visual b {
    position: absolute;
    inset: 4px;
    content: "";
    border: 1px solid rgba(121, 194, 255, 0.4);
    border-radius: 50%;
    animation: diagnostic-loader-orbit 1.7s linear infinite;
}

.diagnostic-initial-loader-visual b {
    inset: 9px;
    border-color: rgba(32, 201, 151, 0.42);
    animation-direction: reverse;
    animation-duration: 1.1s;
}

@keyframes diagnostic-loader-orbit {
    to { transform: rotate(360deg); }
}

.diagnostic-initial-loader-copy strong,
.diagnostic-initial-loader-copy span {
    display: block;
}

.diagnostic-initial-loader-copy strong {
    color: #f4f9fd;
    font-size: 13px;
}

.diagnostic-initial-loader-copy span {
    margin-top: 2px;
    color: #8d9aa4;
    font-size: 10px;
}

.diagnostic-initial-loader-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.045);
}

.diagnostic-initial-loader-progress span {
    position: absolute;
    width: 36%;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, #2196f3, #20c997, transparent);
    animation: diagnostic-loader-progress 1.45s ease-in-out infinite;
}

@keyframes diagnostic-loader-progress {
    from { left: -38%; }
    to { left: 102%; }
}

.device-diagnostic-subpage.is-initial-loading .widget-timeline-selection,
.device-diagnostic-subpage.is-initial-loading .widget-timeline-navigator {
    opacity: 0.42;
    pointer-events: none;
}

.device-diagnostic-subpage.is-range-loading .widget-timeline::after {
    position: absolute;
    top: 0;
    left: -32%;
    z-index: 8;
    width: 32%;
    height: 3px;
    content: "";
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, #65b8ff, #20c997, transparent);
    animation: diagnostic-range-progress 1.2s ease-in-out infinite;
}

@keyframes diagnostic-range-progress {
    to { left: 100%; }
}

.device-diagnostic-subpage.is-range-loading .widget-timeline-range-bar,
.device-diagnostic-subpage.is-range-loading .period-selector,
.device-diagnostic-subpage.is-range-loading .widget-timeline-button {
    pointer-events: none;
}

.device-diagnostic-subpage .period-selector option:disabled {
    color: #66737c;
    background: #20262b;
}

.device-diagnostic-subpage.is-range-loading .current-range {
    animation: diagnostic-current-range-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes diagnostic-current-range-pulse {
    from { filter: brightness(0.9); }
    to { filter: brightness(1.25); }
}

.device-diagnostic-subpage .timeline-interaction-hint {
    min-height: 0;
    transition: color 0.18s ease;
}

.device-diagnostic-subpage .timeline-interaction-hint:empty { display: none; }
.device-diagnostic-subpage .timeline-interaction-hint.is-info,
.device-diagnostic-subpage .timeline-interaction-hint.is-error {
    display: block;
    min-height: 14px;
}
.device-diagnostic-subpage .timeline-interaction-hint.is-info { color: #79c2ff; }
.device-diagnostic-subpage .timeline-interaction-hint.is-error { color: #ff7886; }
.device-diagnostic-subpage .widget-timeline-range-bar.is-full-range { cursor: default; }

.device-diagnostic-subpage .timeline-auto-refresh {
    width: fit-content;
    min-height: 23px;
    margin-top: 5px;
    padding: 4px 8px;
    border: 1px solid rgba(32, 201, 151, 0.18);
    border-radius: 99px;
    color: #a5cdbf;
    background: rgba(32, 201, 151, 0.07);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.device-diagnostic-subpage .timeline-auto-refresh i {
    font-size: 7px;
}

.device-diagnostic-subpage .timeline-auto-refresh span {
    display: inline-block;
    min-width: 124px;
}

.device-diagnostic-subpage .timeline-auto-refresh.updating {
    border-color: rgba(101, 184, 255, 0.2);
    color: #a9d5f7;
    background: rgba(33, 150, 243, 0.08);
}

.device-diagnostic-subpage .timeline-auto-refresh.paused {
    border-color: rgba(255, 200, 87, 0.2);
    color: #d6bd78;
    background: rgba(255, 193, 7, 0.07);
}

.device-diagnostic-subpage .timeline-auto-refresh.error {
    border-color: rgba(255, 101, 116, 0.22);
    color: #e8a2aa;
    background: rgba(255, 101, 116, 0.07);
}

.device-diagnostic-subpage .timeline-auto-refresh .status-swap {
    animation: diagnostic-refresh-status-swap 0.32s ease both;
}

@keyframes diagnostic-refresh-status-swap {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 575.98px) {
    .diagnostic-initial-loader {
        margin-right: 11px;
        margin-left: 11px;
        padding-right: 11px;
        padding-left: 11px;
    }

    .diagnostic-initial-loader-copy span {
        line-height: 1.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .device-diagnostic-subpage .timeline-auto-refresh .status-swap {
        animation: none;
    }

    .diagnostic-initial-loader-visual span,
    .diagnostic-initial-loader-visual b,
    .diagnostic-initial-loader-progress span,
    .device-diagnostic-subpage.is-range-loading .widget-timeline::after,
    .device-diagnostic-subpage.is-range-loading .current-range {
        animation: none;
    }
}

.diagnostic-device-header {
    overflow: hidden;
    border: 1px solid rgba(79, 170, 241, 0.2);
    border-radius: 17px;
    color: #f4f8fb;
    background:
        radial-gradient(circle at 8% 12%, rgba(33, 147, 243, 0.22), transparent 30%),
        radial-gradient(circle at 88% 0, rgba(32, 201, 151, 0.09), transparent 27%),
        linear-gradient(145deg, #242b31, #171b1f);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
}

.diagnostic-device-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 18px 18px 14px;
}

.diagnostic-device-visual {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.diagnostic-device-radar {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(121, 194, 255, 0.48);
    border-radius: 50%;
    color: #b6ddff;
    background: radial-gradient(circle, rgba(33, 147, 243, 0.26), rgba(33, 147, 243, 0.04) 68%);
    box-shadow: inset 0 0 18px rgba(33, 147, 243, 0.14), 0 0 24px rgba(33, 147, 243, 0.13);
    font-size: 21px;
}

.diagnostic-device-radar::before,
.diagnostic-device-radar::after,
.diagnostic-device-radar span,
.diagnostic-device-radar b {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(121, 194, 255, 0.2);
    border-radius: 50%;
    animation: diagnostic-device-signal 2.8s ease-out infinite;
}

.diagnostic-device-radar::after {
    animation-delay: 0.9s;
}

.diagnostic-device-radar span {
    animation-delay: 1.8s;
}

.diagnostic-device-radar b {
    inset: 5px;
    border-color: rgba(32, 201, 151, 0.28);
    animation: none;
}

@keyframes diagnostic-device-signal {
    from { opacity: 0.55; transform: scale(0.82); }
    to { opacity: 0; transform: scale(1.35); }
}

.diagnostic-device-intro {
    min-width: 0;
}

.diagnostic-device-intro > span {
    display: block;
    color: #79b9eb;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.diagnostic-device-title {
    overflow: hidden;
    margin: 2px 0 1px;
    color: #ffffff;
    font-size: clamp(20px, 2.1vw, 28px);
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diagnostic-device-description {
    overflow: hidden;
    max-width: 720px;
    margin: 0;
    color: #98a5ae;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diagnostic-device-connection {
    min-width: 210px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.045);
}

.diagnostic-device-connection-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 10px;
    color: #9aa8b2;
    background: rgba(255, 255, 255, 0.06);
}

.diagnostic-device-connection.recent {
    border-color: rgba(32, 201, 151, 0.22);
    background: rgba(32, 201, 151, 0.065);
}

.diagnostic-device-connection.recent .diagnostic-device-connection-icon {
    color: #6ee0bd;
    background: rgba(32, 201, 151, 0.12);
}

.diagnostic-device-connection.stale {
    border-color: rgba(255, 193, 7, 0.2);
}

.diagnostic-device-connection.stale .diagnostic-device-connection-icon {
    color: #ffd45c;
    background: rgba(255, 193, 7, 0.1);
}

.diagnostic-device-connection span,
.diagnostic-device-connection strong,
.diagnostic-device-connection small {
    display: block;
}

.diagnostic-device-connection span {
    color: #84919a;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.diagnostic-device-connection strong {
    margin-top: 1px;
    color: #ffffff;
    font-size: 12px;
}

.diagnostic-device-connection strong i {
    font-style: normal;
}

.diagnostic-device-connection small {
    color: #79858e;
    font-size: 9px;
}

.diagnostic-device-metrics.widget-variables-group {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 8px !important;
}

.diagnostic-device-metrics .widget-variables {
    width: auto !important;
    min-width: 0;
    min-height: 70px;
    display: flex !important;
    align-items: center !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.diagnostic-device-metrics .widget-variables:hover {
    border-color: rgba(33, 147, 243, 0.3);
    background: rgba(33, 147, 243, 0.075);
    transform: translateY(-1px);
}

.diagnostic-device-metrics .widget-variables-icon {
    width: 38px;
    height: 38px;
    margin-left: 7px !important;
    flex: 0 0 auto;
    border: 1px solid rgba(121, 194, 255, 0.14);
    border-radius: 10px;
    color: #79b9eb;
    background: rgba(33, 147, 243, 0.08);
}

.diagnostic-device-metrics .widget-variables-body {
    min-width: 0;
    padding: 8px 8px !important;
    line-height: 1.2;
}

.diagnostic-device-metrics .widget-variables-name {
    overflow: hidden;
    color: #7f8d97 !important;
    font-size: 8px !important;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diagnostic-device-metrics .widget-variables-state {
    overflow: hidden;
    margin-top: 3px !important;
    color: #dce5eb !important;
    font-size: 11px !important;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diagnostic-device-metrics .widget-variables-state i {
    display: block;
    overflow: hidden;
    font-style: normal !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diagnostic-device-metrics .widget-variables-state i + i {
    margin-top: 2px;
    color: #71808a;
    font-size: 8px;
    font-weight: 500;
}

.diagnostic-device-metrics .widget-variables[data-id="ver_code"] .widget-variables-state {
    overflow: visible;
    text-overflow: clip;
}

.diagnostic-version-code {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    white-space: nowrap;
}

.diagnostic-version-product {
    padding: 3px 6px;
    border: 1px solid rgba(101, 184, 255, 0.32);
    border-radius: 6px;
    color: #79c2ff;
    background: rgba(33, 150, 243, 0.12);
    box-shadow: inset 0 0 10px rgba(33, 150, 243, 0.08);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.diagnostic-version-number {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.diagnostic-version-segment {
    font-size: 11px;
    font-weight: 900;
    text-shadow: 0 0 9px currentColor;
}

.diagnostic-version-segment.segment-1 { color: #ffca5f; }
.diagnostic-version-segment.segment-2 { color: #c997ff; }
.diagnostic-version-segment.segment-3 { color: #65ddb7; }
.diagnostic-version-segment.segment-4 { color: #ff8490; }

.diagnostic-version-dot {
    padding: 0 2px;
    color: #63727d;
    font-weight: 700;
}

.diagnostic-device-metrics .widget-variables[data-id="sn"] .widget-variables-state,
.diagnostic-device-metrics .widget-variables[data-id="t"] .widget-variables-state {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 10px !important;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
}

.diagnostic-device-metrics .widget-variables[data-id="lvl"] .widget-variables-icon,
.diagnostic-device-metrics .widget-variables[data-id="lvl"] .widget-variables-state {
    color: #c997ff !important;
}

.diagnostic-device-metrics .widget-variables[data-id="csq"] .widget-variables-icon,
.diagnostic-device-metrics .widget-variables[data-id="csq"] .widget-variables-state {
    color: #69dfbb !important;
}

.diagnostic-device-metrics .widget-variables[data-id="t"] .widget-variables-icon {
    color: #ffc95c !important;
}

@media (max-width: 991.98px) {
    .diagnostic-device-metrics.widget-variables-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .diagnostic-device-hero {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        padding: 15px 13px 11px;
    }

    .diagnostic-device-visual {
        width: 58px;
        height: 58px;
    }

    .diagnostic-device-radar {
        width: 46px;
        height: 46px;
    }

    .diagnostic-device-title {
        font-size: 19px;
    }

    .diagnostic-device-connection {
        min-width: 0;
        grid-column: 1 / -1;
    }

    .diagnostic-device-metrics.widget-variables-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .diagnostic-device-metrics .widget-variables {
        min-height: 64px;
    }
}

@media (max-width: 420px) {
    .diagnostic-device-metrics .widget-variables[data-id="sn"] .widget-variables-state,
    .diagnostic-device-metrics .widget-variables[data-id="t"] .widget-variables-state {
        font-size: 9px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .diagnostic-device-radar::before,
    .diagnostic-device-radar::after,
    .diagnostic-device-radar span {
        animation: none;
    }
}

.diagnostic-section-navigation {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    padding: 8px 10px;
    overflow: hidden;
    border: 1px solid rgba(143, 184, 220, 0.2);
    border-radius: 14px;
    color: #eaf4fa;
    background: rgba(21, 27, 32, 0.94);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(15px);
}

.diagnostic-section-navigation-copy {
    min-width: 128px;
    padding: 0 4px;
}

.diagnostic-section-navigation-copy span,
.diagnostic-section-navigation-copy strong {
    display: block;
}

.diagnostic-section-navigation-copy span {
    color: #71808b;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.diagnostic-section-navigation-copy strong {
    margin-top: 1px;
    color: #ffffff;
    font-size: 12px;
}

.diagnostic-section-tabs {
    min-width: 0;
    display: flex;
    flex: 1;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}

.diagnostic-section-tabs::-webkit-scrollbar {
    display: none;
}

.diagnostic-section-tab {
    position: relative;
    min-width: 106px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto;
    gap: 7px;
    padding: 0 13px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #87949e;
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.diagnostic-section-tab::after {
    position: absolute;
    right: 24%;
    bottom: 0;
    left: 24%;
    height: 2px;
    content: "";
    border-radius: 99px 99px 0 0;
    background: #65b8ff;
    box-shadow: 0 0 12px rgba(101, 184, 255, 0.7);
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.diagnostic-section-tab:hover {
    color: #c8d6df;
    background: rgba(255, 255, 255, 0.04);
}

.diagnostic-section-tab.active {
    border-color: rgba(101, 184, 255, 0.22);
    color: #ffffff;
    background: linear-gradient(145deg, rgba(33, 150, 243, 0.17), rgba(33, 150, 243, 0.06));
    transform: translateY(-1px);
}

.diagnostic-section-tab.active::after {
    opacity: 1;
    transform: translateY(0);
}

.diagnostic-section-tab > i {
    color: #6f94b1;
    font-size: 13px;
}

.diagnostic-section-tab.active > i {
    color: #79c2ff;
    filter: drop-shadow(0 0 7px rgba(33, 150, 243, 0.45));
}

.diagnostic-tab-status {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #59656e;
}

.diagnostic-tab-status.good { background: #20c997; box-shadow: 0 0 7px rgba(32, 201, 151, 0.65); }
.diagnostic-tab-status.warning { background: #ffc857; box-shadow: 0 0 7px rgba(255, 200, 87, 0.55); }
.diagnostic-tab-status.danger { background: #ff6574; box-shadow: 0 0 7px rgba(255, 101, 116, 0.6); }

.diagnostic-section-stage {
    position: relative;
    min-height: 420px;
}

.diagnostic-section-panel {
    padding-top: 8px;
    scroll-margin-top: 70px;
}

.diagnostic-section-panel[hidden] {
    display: none !important;
}

.diagnostic-section-panel.active.entering {
    animation: diagnostic-section-enter 0.24s ease both;
}

@keyframes diagnostic-section-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.diagnostic-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid rgba(143, 184, 220, 0.15);
    border-radius: 14px;
    color: #e7f0f6;
    background: linear-gradient(145deg, rgba(36, 43, 49, 0.96), rgba(24, 29, 33, 0.96));
}

.diagnostic-section-heading-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(101, 184, 255, 0.25);
    border-radius: 12px;
    color: #79c2ff;
    background: rgba(33, 150, 243, 0.1);
    font-size: 17px;
}

.diagnostic-section-heading-icon.system { color: #c997ff; border-color: rgba(201, 151, 255, 0.22); background: rgba(156, 39, 176, 0.09); }
.diagnostic-section-heading-icon.energy { color: #ffc857; border-color: rgba(255, 200, 87, 0.22); background: rgba(255, 193, 7, 0.08); }
.diagnostic-section-heading-icon.network { color: #65ddb7; border-color: rgba(32, 201, 151, 0.22); background: rgba(32, 201, 151, 0.08); }
.diagnostic-section-heading-icon.raw { color: #ffc857; border-color: rgba(255, 200, 87, 0.22); background: rgba(255, 193, 7, 0.08); }

.diagnostic-section-heading span,
.diagnostic-section-heading h2,
.diagnostic-section-heading p {
    display: block;
    margin: 0;
}

.diagnostic-section-heading span {
    color: #7892a6;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.diagnostic-section-heading h2 {
    margin-top: 1px;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.15;
}

.diagnostic-section-heading p {
    margin-top: 2px;
    color: #7c8993;
    font-size: 9px;
}

.diagnostic-active-section-heading {
    min-height: 72px;
    margin-top: 8px;
    scroll-margin-top: 70px;
    background:
        radial-gradient(circle at 0 50%, rgba(33, 150, 243, 0.1), transparent 28%),
        linear-gradient(145deg, rgba(36, 43, 49, 0.98), rgba(24, 29, 33, 0.98));
}

.diagnostic-active-section-copy {
    min-width: 0;
}

.diagnostic-active-section-heading .diagnostic-overview-health {
    margin-left: auto;
}

.diagnostic-overview-device-info {
    overflow: visible;
}

.diagnostic-overview-device-info-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px 2px;
}

.diagnostic-overview-device-info-heading > i {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(101, 184, 255, 0.2);
    border-radius: 9px;
    color: #79c2ff;
    background: rgba(33, 150, 243, 0.08);
}

.diagnostic-overview-device-info-heading span,
.diagnostic-overview-device-info-heading strong {
    display: block;
}

.diagnostic-overview-device-info-heading span {
    color: #72818b;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.diagnostic-overview-device-info-heading strong {
    margin-top: 1px;
    color: #dfe8ed;
    font-size: 10px;
}

.diagnostic-overview-device-metrics.widget-variables-group {
    gap: 8px;
    padding: 0 !important;
}

@media (min-width: 992px) {
    .diagnostic-overview-device-metrics.widget-variables-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.diagnostic-overview-device-metrics .widget-variables {
    position: relative;
    min-height: 126px;
    flex-direction: column;
    align-items: flex-start !important;
    padding: 13px 42px 12px 13px !important;
    border-color: rgba(143, 184, 220, 0.13);
    border-radius: 13px;
    background: linear-gradient(145deg, #22282d, #191d21);
}

.diagnostic-overview-device-metrics .widget-variables::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    content: "";
    background: #65b8ff;
}

.diagnostic-overview-device-metrics .widget-variables:hover {
    border-color: rgba(101, 184, 255, 0.3);
    background: linear-gradient(145deg, #252d33, #1b2024);
    transform: translateY(-2px);
}

.diagnostic-overview-device-metrics .widget-variables-icon {
    width: 32px;
    height: 32px;
    margin: 0 0 7px !important;
    border: 0;
    border-radius: 9px;
}

.diagnostic-overview-device-metrics .widget-variables-body {
    width: 100%;
    padding: 0 !important;
}

.diagnostic-overview-device-metrics .widget-variables-state {
    margin-top: 2px !important;
    color: #ffffff !important;
    font-size: 14px !important;
}

.diagnostic-overview-device-metrics .widget-variables[data-id="sn"] .widget-variables-state {
    font-size: 11px !important;
}

.diagnostic-overview-hero {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    overflow: hidden;
    border: 1px solid rgba(101, 184, 255, 0.18);
    border-radius: 16px;
    color: #f4f8fb;
    background:
        radial-gradient(circle at 8% 15%, rgba(33, 150, 243, 0.19), transparent 32%),
        radial-gradient(circle at 88% 0, rgba(32, 201, 151, 0.08), transparent 28%),
        linear-gradient(145deg, #222a30, #171c20);
}

.diagnostic-overview-hero span,
.diagnostic-overview-hero h2,
.diagnostic-overview-hero p {
    display: block;
    margin: 0;
}

.diagnostic-overview-hero > div:first-child > span {
    color: #79b9eb;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.diagnostic-overview-hero h2 {
    margin-top: 2px;
    color: #ffffff;
    font-size: clamp(20px, 2.3vw, 27px);
}

.diagnostic-overview-hero p {
    margin-top: 3px;
    color: #86949e;
    font-size: 10px;
}

.diagnostic-overview-health {
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.04);
}

.diagnostic-overview-health > i {
    color: #64717a;
    font-size: 8px;
}

.diagnostic-overview-health span,
.diagnostic-overview-health strong {
    display: block;
}

.diagnostic-overview-health span {
    color: #7c8992;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.diagnostic-overview-health strong {
    margin-top: 1px;
    font-size: 11px;
}

.diagnostic-overview-health.good { border-color: rgba(32, 201, 151, 0.22); background: rgba(32, 201, 151, 0.07); }
.diagnostic-overview-health.good > i { color: #20c997; box-shadow: 0 0 8px rgba(32, 201, 151, 0.65); }
.diagnostic-overview-health.warning { border-color: rgba(255, 200, 87, 0.22); background: rgba(255, 200, 87, 0.07); }
.diagnostic-overview-health.warning > i { color: #ffc857; }
.diagnostic-overview-health.danger { border-color: rgba(255, 101, 116, 0.24); background: rgba(255, 101, 116, 0.08); }
.diagnostic-overview-health.danger > i { color: #ff6574; }

.diagnostic-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.diagnostic-overview-card {
    position: relative;
    min-width: 0;
    min-height: 126px;
    padding: 13px 42px 12px 13px;
    overflow: hidden;
    border: 1px solid rgba(143, 184, 220, 0.13);
    border-radius: 13px;
    color: #e4edf3;
    background: linear-gradient(145deg, #22282d, #191d21);
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.diagnostic-overview-card:hover {
    border-color: rgba(101, 184, 255, 0.3);
    background: linear-gradient(145deg, #252d33, #1b2024);
    transform: translateY(-2px);
}

.diagnostic-overview-card::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    content: "";
    background: #5d6972;
}

.diagnostic-overview-card.good::before { background: #20c997; }
.diagnostic-overview-card.warning::before { background: #ffc857; }
.diagnostic-overview-card.danger::before { background: #ff6574; }

.diagnostic-overview-card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 7px;
    border-radius: 9px;
    color: #79c2ff;
    background: rgba(33, 150, 243, 0.1);
}

.diagnostic-overview-card.energy .diagnostic-overview-card-icon { color: #65ddb7; background: rgba(32, 201, 151, 0.09); }
.diagnostic-overview-card.pv .diagnostic-overview-card-icon { color: #ffc857; background: rgba(255, 193, 7, 0.09); }
.diagnostic-overview-card.system .diagnostic-overview-card-icon { color: #c997ff; background: rgba(156, 39, 176, 0.09); }
.diagnostic-overview-card.climate .diagnostic-overview-card-icon {
	gap: 4px;
	color: #68d7e8;
	background: linear-gradient(135deg, rgba(255, 159, 67, 0.12), rgba(0, 188, 212, 0.12));
}

.diagnostic-overview-card.climate .diagnostic-overview-card-icon .fa-thermometer-half {
	color: #ffad60;
}

.diagnostic-overview-card.climate .diagnostic-overview-card-icon .fa-tint {
	color: #49c8db;
	font-size: 10px;
}

.diagnostic-overview-card.worktime > strong {
    white-space: normal;
}

.diagnostic-overview-card > span,
.diagnostic-overview-card > strong,
.diagnostic-overview-card > small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diagnostic-overview-card > span {
    color: #7f8c95;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.diagnostic-overview-card > strong {
    margin-top: 2px;
    color: #ffffff;
    font-size: 14px;
}

.diagnostic-overview-card > small {
    margin-top: 2px;
    color: #71808a;
    font-size: 9px;
}

.diagnostic-overview-card-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    color: #56636d;
    font-size: 11px;
    transform: translateY(-50%);
    transition: color 0.18s ease, transform 0.18s ease;
}

.diagnostic-overview-card:hover .diagnostic-overview-card-arrow {
    color: #79c2ff;
    transform: translate(3px, -50%);
}

.diagnostic-overview-insights {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 10px;
    margin-top: 8px;
    padding: 13px;
    border: 1px solid rgba(143, 184, 220, 0.13);
    border-radius: 14px;
    color: #e5eef4;
    background: linear-gradient(145deg, #20262b, #181c20);
}

.diagnostic-overview-insights-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 7px;
}

.diagnostic-overview-insights-heading span,
.diagnostic-overview-insights-heading strong {
    display: block;
}

.diagnostic-overview-insights-heading span { color: #7792a7; font-size: 8px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.diagnostic-overview-insights-heading strong { margin-top: 2px; color: #ffffff; font-size: 13px; }
.diagnostic-overview-insights-heading > i { color: #c997ff; font-size: 18px; }

.diagnostic-overview-insights-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.diagnostic-overview-insights-list button {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: #8796a0;
    background: rgba(255, 255, 255, 0.035);
    text-align: left;
    cursor: pointer;
}

.diagnostic-overview-insights-list button:hover {
    border-color: rgba(101, 184, 255, 0.22);
    background: rgba(33, 150, 243, 0.065);
}

.diagnostic-overview-insights-list button > i:first-child { color: #79b9eb; }
.diagnostic-overview-insights-list button > i:last-child { color: #56636d; font-size: 9px; }
.diagnostic-overview-insights-list span,
.diagnostic-overview-insights-list strong,
.diagnostic-overview-insights-list small { display: block; min-width: 0; }
.diagnostic-overview-insights-list strong { overflow: hidden; color: #dce7ed; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.diagnostic-overview-insights-list small { overflow: hidden; margin-top: 1px; color: #6f7d87; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }

.diagnostic-system-snapshot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.diagnostic-system-group {
    overflow: hidden;
    border: 1px solid rgba(143, 184, 220, 0.13);
    border-radius: 13px;
    background: linear-gradient(145deg, #20262b, #181d21);
}

.diagnostic-system-group.storage,
.diagnostic-system-group.sleep {
    grid-column: 1 / -1;
}

.diagnostic-system-group-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(143, 184, 220, 0.1);
}

.diagnostic-system-group-heading > i {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(201, 151, 255, 0.2);
    border-radius: 9px;
    color: #c997ff;
    background: rgba(156, 39, 176, 0.08);
}

.diagnostic-system-group.storage .diagnostic-system-group-heading > i {
    color: #79c2ff;
    border-color: rgba(101, 184, 255, 0.2);
    background: rgba(33, 150, 243, 0.08);
}

.diagnostic-system-group.sleep .diagnostic-system-group-heading > i {
    color: #ffc95c;
    border-color: rgba(255, 200, 87, 0.2);
    background: rgba(255, 193, 7, 0.08);
}

.diagnostic-system-group-heading span,
.diagnostic-system-group-heading strong,
.diagnostic-system-group-heading small {
    display: block;
}

.diagnostic-system-group-heading strong {
    color: #e7f0f5;
    font-size: 11px;
}

.diagnostic-system-group-heading small {
    margin-top: 1px;
    color: #6f7d87;
    font-size: 8px;
}

.diagnostic-system-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(143, 184, 220, 0.08);
}

.diagnostic-system-storage-values {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.diagnostic-system-values > div {
    position: relative;
    min-width: 0;
    min-height: 58px;
    padding: 10px 12px;
    background: #1c2227;
}

.diagnostic-system-values > div::before {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 2px;
    content: "";
    border-radius: 0 2px 2px 0;
    background: #52616b;
}

.diagnostic-system-values > div.good::before { background: #20c997; }
.diagnostic-system-values > div.warning::before { background: #ffc857; }
.diagnostic-system-values > div.danger::before { background: #ff6574; }

.diagnostic-system-values span,
.diagnostic-system-values strong {
    display: block;
}

.diagnostic-system-values span {
    overflow: hidden;
    color: #71808a;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diagnostic-system-values strong {
    margin-top: 4px;
    color: #dce7ed;
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.diagnostic-system-values > div.good strong { color: #8ce8cb; }
.diagnostic-system-values > div.warning strong { color: #ffd674; }
.diagnostic-system-values > div.danger strong { color: #ff929d; }

.diagnostic-system-reset-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 5px;
}

.diagnostic-system-reset-values em {
    min-width: 0;
    font-style: normal;
}

.diagnostic-system-reset-values em + em {
    padding-left: 8px;
    border-left: 1px solid rgba(143, 184, 220, 0.13);
}

.diagnostic-system-reset-values small {
    display: block;
    overflow: hidden;
    color: #71808a;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diagnostic-system-reset-values strong {
    margin-top: 2px;
}

.diagnostic-system-value-wide {
    grid-column: 1 / -1;
}

.diagnostic-system-charts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    margin-top: 8px !important;
}

.diagnostic-system-charts .device-statistic {
    width: auto;
    flex: none;
}

.diagnostic-network-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 8px;
}

.diagnostic-network-summary > div {
    position: relative;
    min-width: 0;
    padding: 12px 12px 11px 46px;
    border: 1px solid rgba(143, 184, 220, 0.13);
    border-radius: 12px;
    color: #e8f0f5;
    background: linear-gradient(145deg, #22282d, #191d21);
}

.diagnostic-network-summary > div > i {
    position: absolute;
    left: 13px;
    top: 50%;
    color: #65ddb7;
    font-size: 18px;
    transform: translateY(-50%);
}

.diagnostic-network-summary span,
.diagnostic-network-summary strong,
.diagnostic-network-summary small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diagnostic-network-summary span { color: #778690; font-size: 8px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.diagnostic-network-summary strong { margin-top: 1px; color: #ffffff; font-size: 13px; }
.diagnostic-network-summary small { margin-top: 1px; color: #687780; font-size: 8px; }

.diagnostic-network-summary small.is-warning {
    color: #ffc95c;
}

.diagnostic-network-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.diagnostic-network-values em {
    min-width: 0;
    font-style: normal;
}

.diagnostic-network-values em + em {
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.diagnostic-network-values small {
    color: #687780;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
}

.diagnostic-network-values strong {
    color: #ffffff;
    font-size: 11px;
}

.diagnostic-network-technical {
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid rgba(143, 184, 220, 0.13);
    border-radius: 12px;
    background:
        radial-gradient(circle at 0 0, rgba(32, 201, 151, 0.07), transparent 34%),
        linear-gradient(145deg, #20262b, #181d21);
}

.diagnostic-network-technical-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(143, 184, 220, 0.1);
}

.diagnostic-network-technical-heading > div {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(32, 201, 151, 0.2);
    border-radius: 9px;
    color: #65ddb7;
    background: rgba(32, 201, 151, 0.08);
}

.diagnostic-network-technical-heading span,
.diagnostic-network-technical-heading strong,
.diagnostic-network-technical-heading small {
    display: block;
}

.diagnostic-network-technical-heading strong {
    color: #e7f0f5;
    font-size: 11px;
}

.diagnostic-network-technical-heading small {
    margin-top: 1px;
    color: #6f7d87;
    font-size: 8px;
}

.diagnostic-network-technical-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: rgba(143, 184, 220, 0.08);
}

.diagnostic-network-technical-grid > div {
    min-width: 0;
    padding: 10px 12px;
    background: #1c2227;
}

.diagnostic-network-technical-grid span,
.diagnostic-network-technical-grid strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diagnostic-network-technical-grid span {
    color: #71808a;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.diagnostic-network-technical-grid strong {
    margin-top: 3px;
    color: #dce7ed;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 10px;
}

.diagnostic-network-firmware-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    min-width: 0;
    margin-top: 3px;
}

.diagnostic-network-firmware-row .network-detail-firmware {
    min-width: 0;
    margin-top: 0;
}

.diagnostic-network-firmware-row .network-detail-firmware.is-current {
    color: #69dfbb;
}

.diagnostic-network-firmware-row .network-detail-firmware.is-outdated {
    color: #ff7c89;
}

.diagnostic-network-firmware .network-detail-firmware-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    overflow: visible;
    margin-top: 0;
    padding: 3px 6px;
    border: 1px solid rgba(255, 91, 107, 0.23);
    border-radius: 99px;
    color: #ff8d98;
    background: rgba(255, 77, 94, 0.1);
    font-size: 7px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.diagnostic-network-firmware .network-detail-firmware-status[hidden] {
    display: none;
}

.diagnostic-network-firmware .network-detail-firmware-status i {
    flex: 0 0 auto;
    color: #ff6675;
}

@media (max-width: 991.98px) {
    .diagnostic-section-navigation-copy {
        display: none;
    }

    .diagnostic-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .diagnostic-overview-insights {
        grid-template-columns: 1fr;
    }

    .diagnostic-overview-insights-list {
        grid-template-columns: 1fr;
    }

    .diagnostic-network-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .diagnostic-network-technical-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .diagnostic-system-storage-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .diagnostic-section-navigation {
        margin-right: -4px;
        margin-left: -4px;
        padding: 7px;
        border-radius: 12px;
    }

    .diagnostic-section-tab {
        min-width: 92px;
        height: 44px;
        padding: 0 10px;
    }

    .diagnostic-section-heading p {
        line-height: 1.35;
    }

    .diagnostic-system-charts {
        grid-template-columns: minmax(0, 1fr);
    }

    .diagnostic-system-snapshot {
        grid-template-columns: minmax(0, 1fr);
    }

    .diagnostic-system-group.storage,
    .diagnostic-system-group.sleep {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    .diagnostic-overview-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 15px;
    }

    .diagnostic-overview-health {
        min-width: 0;
    }

    .diagnostic-overview-grid,
    .diagnostic-network-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .diagnostic-network-technical-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .diagnostic-system-values,
    .diagnostic-system-storage-values {
        grid-template-columns: minmax(0, 1fr);
    }

    .diagnostic-system-value-wide {
        grid-column: auto;
    }

    .diagnostic-overview-card {
        min-height: 108px;
    }

    .diagnostic-section-heading {
        align-items: flex-start;
        padding: 12px;
    }

    .diagnostic-active-section-heading {
        flex-wrap: wrap;
    }

    .diagnostic-active-section-heading .diagnostic-overview-health {
        width: 100%;
        margin-left: 0;
    }

    .diagnostic-section-heading h2 {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .diagnostic-section-panel.active.entering {
        animation: none;
    }
}

.device-diagnostic-subpage-xyz {
    /* display: flex;
    flex-wrap: wrap;
    gap: 5px 5px; */
}

.device-diagnostic-subpage-xy {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #212224;
    border-radius: 15px;
    border: 2px solid #33373b;
    overflow: hidden;
}
.device-diagnostic-subpage-xy #map-diagnostic {
    width: 100%;
    flex: 1 1 auto;
    border-radius: 0;
    min-height: 390px;
    height: 42vh;
    max-height: 560px;
    background: #182129;
}
.device-diagnostic-subpage-xy .device-diagnostic-subpage-attributes {
    position: absolute;
    bottom: 0;
    z-index: 1018;
    font-size: 10px;
}
.device-diagnostic-subpage-xy .device-diagnostic-subpage-attributes .device-diagnostic-subpage-attributes-content {
    background-color: rgba(18, 24, 30, 0.88);
    backdrop-filter: blur(8px);
    border-radius: 10px 0 0px 0;
    padding: 2px 10px;
}

.device-diagnostic-subpage-xy.has-no-anchor .device-diagnostic-subpage-attributes {
    display: none !important;
}

.diagnostic-map-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(190px, 0.8fr) minmax(240px, 1.2fr);
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid rgba(143, 184, 220, 0.14);
    border-radius: 0;
    color: #f4f8fb;
    background:
        radial-gradient(circle at 8% 0, rgba(33, 147, 243, 0.12), transparent 38%),
        linear-gradient(145deg, #202a31, #171d22);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2);
}

.diagnostic-map-gesture-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1020;
    max-width: calc(100% - 32px);
    padding: 10px 14px;
    border-radius: 6px;
    color: #ffffff;
    background: rgba(18, 24, 30, 0.92);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.15s ease;
}

.diagnostic-map-gesture-hint.active {
    opacity: 1;
}

.diagnostic-map-panel-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.diagnostic-map-identity,
.diagnostic-map-panel-status {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}

.diagnostic-map-tool-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(33, 147, 243, 0.4);
    border-radius: 10px;
    color: #8dceff;
    background: rgba(33, 147, 243, 0.14);
}

.diagnostic-map-eyebrow {
    color: #8fb8dc;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.diagnostic-map-title {
    font-size: 16px;
    font-weight: 700;
}

.diagnostic-map-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.diagnostic-map-state.safe {
    color: #081f16;
    background: #20c997;
}

.diagnostic-map-state.critical {
    color: #ffffff;
    background: #ff4d5e;
}

.diagnostic-map-state-overlay {
    position: relative;
    min-height: 34px;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.34);
    pointer-events: none;
}

.diagnostic-map-status-stack {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1018;
    min-width: 190px;
    max-width: min(260px, calc(100% - 82px));
    display: grid;
    justify-items: end;
    gap: 6px;
    pointer-events: none;
}

.diagnostic-map-last-position-overlay {
    width: 100%;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid rgba(143, 184, 220, 0.2);
    border-radius: 9px;
    color: #eef6fa;
    background: rgba(13, 20, 25, 0.88);
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.diagnostic-map-last-position-overlay span,
.diagnostic-map-last-position-overlay strong,
.diagnostic-map-last-position-overlay small {
    display: block;
}

.diagnostic-map-last-position-overlay span {
    color: #8fa2ae;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.diagnostic-map-last-position-overlay strong {
    overflow: hidden;
    margin-top: 2px;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diagnostic-map-last-position-overlay small {
    margin-top: 1px;
    color: #8fa0aa;
    font-size: 8px;
}

.diagnostic-map-last-position-overlay small i {
    font-style: normal;
}

.diagnostic-map-state-overlay.safe {
    border-color: rgba(129, 255, 216, 0.38);
}

.diagnostic-map-state-overlay.critical {
    border-color: rgba(255, 197, 203, 0.42);
}

.diagnostic-map-toggle {
    width: 36px;
    height: 36px;
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    color: #dce7ef;
    background: rgba(255, 255, 255, 0.07);
}

.diagnostic-map-toggle i {
    transition: transform 0.2s ease;
}

.diagnostic-map-panel.is-collapsed .diagnostic-map-toggle i {
    transform: rotate(180deg);
}

.diagnostic-map-details {
    min-width: 0;
    overflow: hidden;
}

.diagnostic-map-metrics {
    display: grid;
    grid-template-columns: minmax(180px, 1.35fr) repeat(2, minmax(90px, 1fr));
    gap: 5px;
    margin-top: 0;
}

.diagnostic-map-metrics div {
    min-width: 0;
    padding: 7px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
}

.diagnostic-map-metrics span {
    display: block;
    color: #b4bbc2;
    font-size: 11px;
}

.diagnostic-map-metrics strong {
    display: block;
    margin-top: 2px;
    color: #ffffff;
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diagnostic-map-points-summary strong {
    display: flex;
    align-items: baseline;
    gap: 5px;
    overflow: visible;
}

.diagnostic-map-points-summary strong i {
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
}

.diagnostic-map-points-summary strong i.safe {
    color: #69dfbb;
}

.diagnostic-map-points-summary strong i.critical {
    color: #ff7c89;
}

.diagnostic-map-points-summary strong small {
    color: #84919a;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.diagnostic-map-points-summary strong b {
    width: 1px;
    height: 15px;
    margin: 0 2px;
    background: rgba(255, 255, 255, 0.12);
}

.diagnostic-map-last-position > small {
    display: block;
    overflow: hidden;
    margin-top: 1px;
    color: #7f8c95;
    font-size: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diagnostic-map-last-position > small i {
    font-style: normal;
}

.diagnostic-map-actions {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    margin-top: 0;
}

.diagnostic-map-footer {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: block;
    flex: 0 0 auto;
    padding: 8px 10px;
    border-top: 1px solid rgba(143, 184, 220, 0.14);
    color: #f4f8fb;
    background:
        radial-gradient(circle at 90% 100%, rgba(32, 201, 151, 0.07), transparent 36%),
        linear-gradient(145deg, #171d22, #1d252b);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);
}

.diagnostic-map-tool {
    min-width: 0;
    min-height: 40px;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 8px;
    border: 1px solid rgba(143, 184, 220, 0.18);
    border-radius: 8px;
    color: #d8e2e9;
    background: rgba(255, 255, 255, 0.06);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.diagnostic-map-tool:hover,
.diagnostic-map-tool:focus-visible {
    border-color: #2193F3;
    color: #ffffff;
    background: #167ccc;
    outline: none;
}

.diagnostic-map-actions .diagnostic-map-tool i {
    flex: 0 0 auto;
    color: #79c2ff;
    font-size: 14px;
}

.diagnostic-map-tool:hover i,
.diagnostic-map-tool:focus-visible i {
    color: #ffffff;
}

.diagnostic-map-show-anchor {
    border-color: rgba(32, 201, 151, 0.2);
    background: rgba(32, 201, 151, 0.065);
}

.diagnostic-map-show-anchor i {
    color: #69dfbb !important;
}

.diagnostic-map-show-anchor:hover i,
.diagnostic-map-show-anchor:focus-visible i {
    color: #ffffff !important;
}

.diagnostic-map-show-all.is-active {
    border-color: rgba(101, 184, 255, 0.58);
    color: #ffffff;
    background: rgba(33, 147, 243, 0.2);
    box-shadow: inset 0 0 0 1px rgba(101, 184, 255, 0.1);
}

.diagnostic-map-show-all.is-active i {
    color: #8fd0ff !important;
}

.device-diagnostic-subpage-xy .diagnostic-maptiler-popup {
    max-width: calc(100vw - 44px) !important;
}

.device-diagnostic-subpage-xy .diagnostic-maptiler-popup .maplibregl-popup-content {
    overflow-x: hidden;
    overflow-y: auto;
    width: min(300px, calc(100vw - 54px));
    min-width: min(270px, calc(100vw - 54px));
    max-height: min(370px, calc(100vh - 100px));
    box-sizing: border-box;
    padding: 0;
    border: 1px solid rgba(143, 184, 220, 0.2);
    border-radius: 13px;
    color: #eaf2f7;
    background:
        radial-gradient(circle at 10% 0, rgba(33, 150, 243, 0.14), transparent 42%),
        linear-gradient(145deg, rgba(27, 35, 42, 0.98), rgba(13, 18, 23, 0.98));
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.48);
    font-family: "Open Sans", sans-serif;
    line-height: 1.25;
}

.device-diagnostic-subpage-xy .diagnostic-maptiler-popup .maplibregl-popup-tip {
    border-top-color: #151c22;
    border-bottom-color: #151c22;
}

.device-diagnostic-subpage-xy .diagnostic-maptiler-popup .maplibregl-popup-close-button {
    top: 7px;
    right: 7px;
    z-index: 5;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 7px;
    color: #97a5ae;
    background: rgba(255, 255, 255, 0.055);
    font-size: 18px;
    line-height: 21px;
    transition: color 0.15s ease, background 0.15s ease;
}

.device-diagnostic-subpage-xy .diagnostic-maptiler-popup .maplibregl-popup-close-button:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.device-diagnostic-subpage-xy .maplibregl-ctrl-bottom-right {
    z-index: 1017;
}

.device-diagnostic-subpage-xy .maplibregl-ctrl-bottom-left {
    z-index: 1017;
}

.device-diagnostic-subpage-xy .maplibregl-ctrl-group {
    overflow: hidden;
    border: 1px solid rgba(143, 184, 220, 0.18);
    border-radius: 10px;
    background: rgba(18, 24, 30, 0.9);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
}

.device-diagnostic-subpage-xy .maplibregl-ctrl-group button {
    width: 34px;
    height: 34px;
    filter: invert(1);
}

.device-diagnostic-subpage-xy .maplibregl-ctrl-attrib {
    margin: 0 0 7px 7px;
    padding: 4px 9px;
    border: 1px solid rgba(143, 184, 220, 0.14);
    border-radius: 9px;
    color: rgba(220, 231, 239, 0.78);
    background: rgba(13, 19, 24, 0.72);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
    font-size: 9px;
    line-height: 1.3;
    backdrop-filter: blur(8px);
    opacity: 0.78;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.device-diagnostic-subpage-xy .maplibregl-ctrl-attrib:not(.maplibregl-compact):hover {
    border-color: rgba(143, 184, 220, 0.28);
    color: #f0f7fb;
    background: rgba(13, 19, 24, 0.9);
    opacity: 1;
}

.device-diagnostic-subpage-xy .maplibregl-ctrl-attrib a {
    color: inherit;
    text-decoration: none;
}

.device-diagnostic-subpage-xy .maplibregl-ctrl-attrib a:hover,
.device-diagnostic-subpage-xy .maplibregl-ctrl-attrib a:focus-visible {
    color: #8dceff;
    text-decoration: none;
}

.device-diagnostic-subpage-xy .maplibregl-ctrl-attrib.maplibregl-compact {
    min-height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    opacity: 1;
}

.device-diagnostic-subpage-xy .maplibregl-ctrl-attrib-button {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(143, 184, 220, 0.18);
    border-radius: 50%;
    background-color: rgba(13, 19, 24, 0.88);
    background-image: none;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.26);
}

.device-diagnostic-subpage-xy .maplibregl-ctrl-attrib-button::after {
    content: "i";
    color: #8dceff;
    font-family: Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
}



.diagnostic-map-popup {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px;
}

.diagnostic-map-popup-header {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding-right: 25px;
}

.diagnostic-map-popup-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(101, 184, 255, 0.24);
    border-radius: 9px;
    color: #7bc4fb;
    background: rgba(33, 150, 243, 0.1);
    font-size: 13px;
}

.diagnostic-map-popup-header span,
.diagnostic-map-popup-header strong {
    display: block;
}

.diagnostic-map-popup-header span {
    color: #7897b0;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.diagnostic-map-popup-header strong {
    margin-top: 1px;
    color: #f2f7fa;
    font-size: 12px;
}

.diagnostic-map-popup-header > b {
    padding: 4px 6px;
    border-radius: 99px;
    color: #72dfbd;
    background: rgba(32, 201, 151, 0.1);
    font-size: 7px;
    white-space: nowrap;
    text-transform: uppercase;
}

.diagnostic-map-popup.critical .diagnostic-map-popup-icon {
    border-color: rgba(255, 101, 116, 0.25);
    color: #ff8691;
    background: rgba(255, 101, 116, 0.11);
}

.diagnostic-map-popup.critical .diagnostic-map-popup-header > b {
    color: #ff98a2;
    background: rgba(255, 101, 116, 0.11);
}

.diagnostic-map-popup.anchor .diagnostic-map-popup-icon {
    border-color: rgba(32, 201, 151, 0.25);
    color: #69dfbb;
    background: rgba(32, 201, 151, 0.1);
}

.diagnostic-map-popup-time {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
}

.diagnostic-map-popup-time i {
    margin-right: 2px;
    color: #79b9eb;
}

.diagnostic-map-popup-time strong {
    color: #f4f8fb;
    font-size: 10px;
}

.diagnostic-map-popup-time span {
    margin-left: auto;
    color: #87949c;
    font-size: 9px;
}

.diagnostic-map-popup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-top: 6px;
}

.diagnostic-map-popup-grid > div {
    min-width: 0;
    padding: 6px 7px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.045);
}

.diagnostic-map-popup-grid span,
.diagnostic-map-popup-grid strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diagnostic-map-popup-grid span {
    color: #7c8992;
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
}

.diagnostic-map-popup-grid strong {
    margin-top: 2px;
    color: #f0f5f8;
    font-size: 10px;
}

.diagnostic-map-popup-coordinates {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    padding: 6px 8px;
    border: 1px solid rgba(101, 184, 255, 0.1);
    border-radius: 7px;
    background: rgba(33, 150, 243, 0.045);
}

.diagnostic-map-popup-coordinates > i {
    flex: 0 0 auto;
    color: #6eb5ec;
}

.diagnostic-map-popup-coordinates > div {
    min-width: 0;
}

.diagnostic-map-popup-coordinates span,
.diagnostic-map-popup-coordinates strong {
    display: block;
}

.diagnostic-map-popup-coordinates span {
    color: #71889b;
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
}

.diagnostic-map-popup-coordinates strong {
    overflow: hidden;
    margin-top: 1px;
    color: #c7d7e3;
    font-family: monospace;
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.diagnostic-map-empty {
    position: absolute;
    inset: 0;
    z-index: 1017;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    color: #b4bbc2;
    text-align: center;
    background: #212224;
}

.diagnostic-map-empty i {
    color: #2193F3;
    font-size: 28px;
}

.diagnostic-chart-empty {
    width: 100%;
    height: 100%;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #b4bbc2;
    text-align: center;
}

.diagnostic-chart-empty i {
    color: #2193F3;
    font-size: 24px;
}

.diagnostic-map-mount-icon div {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    background: #2193F3;
    box-shadow: 0 0 0 7px rgba(33, 147, 243, 0.20);
}

.diagnostic-map-mount-icon {
    width: 34px;
    height: 34px;
    cursor: pointer;
}

.diagnostic-map-point-marker {
    position: relative;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.38);
    cursor: pointer;
}

.diagnostic-map-point-marker span {
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: #20c997;
}

.diagnostic-map-point-marker.critical span {
    background: #ff4d5e;
}

.diagnostic-map-point-marker.last {
    width: 19px;
    height: 19px;
    border-width: 3px;
    box-shadow: 0 0 0 7px rgba(33, 147, 243, 0.18), 0 4px 15px rgba(0, 0, 0, 0.4);
}

.diagnostic-map-point-marker.last span {
    background: #2193F3;
}

.diagnostic-map-point-marker.last b {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    padding: 4px 7px;
    border: 1px solid rgba(143, 184, 220, 0.16);
    border-radius: 6px;
    color: #ffffff;
    background: rgba(18, 24, 30, 0.92);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    transform: translateX(-50%);
}

.diagnostic-distance-label,
.diagnostic-last-label {
    border: 0;
    border-radius: 4px;
    color: #ffffff;
    background: rgba(18, 24, 30, 0.92);
    box-shadow: none;
    font-size: 11px;
    font-weight: 700;
}

.device-diagnostic-subpage-r {
    position: relative;
    border-radius: 15px;
    border: 1px solid rgba(143, 184, 220, 0.18);
    height: 390px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #f4f8fb;
    background:
        radial-gradient(circle at 10% 0, rgba(33, 150, 243, 0.14), transparent 35%),
        linear-gradient(145deg, #20272d, #171b1f);
}

@media (min-width: 1200px) {
    .diagnostic-location-primary-row .device-diagnostic-subpage-xy,
    .diagnostic-location-primary-row .device-diagnostic-subpage-r {
        height: 490px;
        min-height: 490px;
        max-height: 490px;
    }

    .diagnostic-location-primary-row .device-diagnostic-subpage-xy #map-diagnostic {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .diagnostic-spatial-row .device-orientation-3d {
        height: 490px;
        min-height: 490px;
    }
}

.diagnostic-map-widget-placeholder {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
    border: 1px dashed rgba(111, 180, 225, 0.22);
    border-radius: 15px;
    color: #718b9a;
    background: rgba(7, 18, 25, 0.34);
    font-size: 10px;
    text-align: center;
}

.diagnostic-map-widget-placeholder i {
    color: #4daeea;
    font-size: 22px;
}

.diagnostic-map-viewer-sheet-host {
    padding: 14px;
}

.diagnostic-map-viewer-sheet-host .device-diagnostic-subpage-xy {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    border-color: rgba(101, 184, 255, 0.22);
}

.diagnostic-map-viewer-sheet-host .device-diagnostic-subpage-xy #map-diagnostic {
    height: auto;
    min-height: 0;
    max-height: none;
}

.device-orientation-3d {
    position: relative;
    height: 390px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(143, 184, 220, 0.18);
    border-radius: 15px;
    color: #f4f8fb;
    background:
        radial-gradient(circle at 88% 0, rgba(32, 201, 151, 0.08), transparent 28%),
        radial-gradient(circle at 15% 42%, rgba(33, 147, 243, 0.15), transparent 34%),
        linear-gradient(145deg, #20272d, #171b1f);
    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.17);
}

.gps-accuracy-widget {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}

.gps-accuracy-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gps-accuracy-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gps-accuracy-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(101, 184, 255, 0.28);
    border-radius: 11px;
    color: #79c2ff;
    background: rgba(33, 150, 243, 0.11);
    box-shadow: inset 0 0 16px rgba(33, 150, 243, 0.08);
}

.gps-accuracy-heading span,
.gps-accuracy-heading strong,
.gps-accuracy-heading small,
.gps-accuracy-quality span,
.gps-accuracy-quality strong {
    display: block;
}

.gps-accuracy-heading span {
    color: #8fb8dc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gps-accuracy-heading strong {
    margin-top: 1px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.15;
}

.gps-accuracy-heading small {
    margin-top: 2px;
    color: #77858f;
    font-size: 9px;
}

.gps-accuracy-quality {
    min-width: 166px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid rgba(143, 184, 220, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.gps-accuracy-quality > i { font-size: 17px; }
.gps-accuracy-quality span { color: #7f8d97; font-size: 8px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.gps-accuracy-quality strong { margin-top: 1px; font-size: 10px; }
.gps-accuracy-quality.excellent { color: #69dfbb; border-color: rgba(32, 201, 151, 0.22); background: rgba(32, 201, 151, 0.07); }
.gps-accuracy-quality.good { color: #79c2ff; border-color: rgba(33, 150, 243, 0.22); background: rgba(33, 150, 243, 0.07); }
.gps-accuracy-quality.limited { color: #ff8591; border-color: rgba(255, 101, 116, 0.22); background: rgba(255, 101, 116, 0.07); }

.gps-accuracy-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.gps-accuracy-kpis > div {
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.035);
}

.gps-accuracy-kpis > div.primary {
    border-color: rgba(32, 201, 151, 0.17);
    background: rgba(32, 201, 151, 0.055);
}

.gps-accuracy-kpis span,
.gps-accuracy-kpis strong,
.gps-accuracy-kpis small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gps-accuracy-kpis span { color: #82909a; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.gps-accuracy-kpis strong { margin-top: 1px; color: #ffffff; font-size: 12px; }
.gps-accuracy-kpis small { color: #687781; font-size: 8px; }
.gps-accuracy-kpis .primary strong { color: #69dfbb; }

.gps-accuracy-plots {
    min-height: 190px;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.gps-accuracy-plot {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 9px 9px 6px;
    border: 1px solid rgba(143, 184, 220, 0.12);
    border-radius: 10px;
    background: rgba(7, 15, 21, 0.26);
}

.gps-accuracy-plot-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px 5px;
}

.gps-accuracy-plot-title span,
.gps-accuracy-plot-title strong { display: block; }
.gps-accuracy-plot-title span { color: #74838e; font-size: 8px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.gps-accuracy-plot-title strong { margin-top: 1px; color: #dce8ef; font-size: 10px; }
.gps-accuracy-plot-title > i { color: #4e91c7; font-size: 13px; }

.gps-accuracy-canvas {
    position: relative;
    min-height: 155px;
    flex: 1;
}

.gps-accuracy-canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

.orientation-header {
    position: relative;
    z-index: 9;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.orientation-header-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.orientation-header-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(101, 184, 255, 0.28);
    border-radius: 11px;
    color: #79c2ff;
    background: rgba(33, 150, 243, 0.11);
    box-shadow: inset 0 0 16px rgba(33, 150, 243, 0.08);
}

.orientation-header-heading span,
.orientation-header-heading strong,
.orientation-header-heading small {
    display: block;
}

.orientation-header-heading span {
    color: #8fb8dc;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.orientation-header-heading strong {
    margin-top: 1px;
    font-size: 16px;
    line-height: 1.15;
}

.orientation-header-heading small {
    overflow: hidden;
    margin-top: 2px;
    color: #77858f;
    font-size: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.orientation-live {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid rgba(32, 201, 151, 0.2);
    border-radius: 99px;
    color: #65ddb7;
    background: rgba(32, 201, 151, 0.07);
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
    text-transform: uppercase;
}

.orientation-live i {
    font-size: 5px;
    filter: drop-shadow(0 0 5px rgba(32, 201, 151, 0.7));
}

.orientation-live.unavailable {
    border-color: rgba(255, 255, 255, 0.08);
    color: #76838c;
    background: rgba(255, 255, 255, 0.035);
}

.orientation-live.unavailable i {
    filter: none;
}

.orientation-content {
    min-height: 0;
    height: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    padding: 10px 12px 12px;
}

.orientation-views {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1;
    gap: 10px;
    height: auto;
}

.orientation-view {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(143, 184, 220, 0.16);
    border-radius: 11px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        rgba(7, 15, 21, 0.32);
    background-size: 20px 20px;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.16);
}

.orientation-view-label {
    position: absolute;
    left: 9px;
    right: 9px;
    top: 7px;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    pointer-events: none;
}

.orientation-view-label span {
    color: #8fb8dc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.orientation-view-label strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.orientation-compass {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(143, 184, 220, 0.36);
    border-radius: 50%;
    background:
        repeating-conic-gradient(from -1deg, rgba(143, 184, 220, 0.42) 0deg 1deg, transparent 1deg 15deg),
        radial-gradient(circle, transparent 55%, rgba(33, 147, 243, 0.09) 56% 70%, transparent 71%);
    transform: translate(-50%, -50%);
}

.orientation-top-view .orientation-compass {
    top: 58%;
    width: 132px;
    height: 132px;
}

.orientation-compass::before,
.orientation-compass::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: rgba(143, 184, 220, 0.18);
    transform: translate(-50%, -50%);
}

.orientation-compass::before {
    width: 1px;
    height: 84%;
}

.orientation-compass::after {
    width: 84%;
    height: 1px;
}

.orientation-compass > span {
    position: absolute;
    z-index: 2;
    color: #b4bbc2;
    font-size: 11px;
    font-weight: 800;
}

.orientation-compass .north {
    left: 50%;
    top: 7px;
    color: #ff4d5e;
    transform: translateX(-50%);
}

.orientation-compass .east {
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
}

.orientation-compass .south {
    left: 50%;
    bottom: 7px;
    transform: translateX(-50%);
}

.orientation-compass .west {
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
}

.orientation-heading {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    color: #20c997;
    transform: translate(-50%, -50%) rotate(var(--device-azimuth));
}

.orientation-top-view .orientation-heading {
    width: 103px;
    height: 103px;
}

.orientation-heading i {
    position: absolute;
    left: 50%;
    top: -4px;
    font-size: 18px;
    transform: translateX(-50%) rotate(-45deg);
}

.orientation-top-buoy {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 54px;
    height: 54px;
    transform: translate(-50%, -50%) rotate(var(--device-azimuth));
    transform-origin: 50% 50%;
    transition: transform 0.45s ease;
}

.top-buoy-ring {
    position: absolute;
    inset: 3px;
    border: 4px solid #f4f8fb;
    border-radius: 50%;
    background:
        radial-gradient(circle, #0d548c 0 26%, transparent 28%),
        conic-gradient(#ff596a 0 25%, #2193F3 25% 50%, #ff596a 50% 75%, #2193F3 75%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.42);
}

.top-buoy-body {
    position: absolute;
    left: 21px;
    top: 14px;
    z-index: 2;
    width: 12px;
    height: 26px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 6px;
    background: #2193F3;
}

.orientation-top-buoy > i {
    position: absolute;
    left: 50%;
    top: -10px;
    z-index: 4;
    color: #20c997;
    font-size: 18px;
    filter: drop-shadow(0 0 4px rgba(32, 201, 151, 0.7));
    transform: translateX(-50%);
}

.orientation-scene {
    position: absolute;
    left: 50%;
    top: 53%;
    width: 210px;
    height: 205px;
    perspective: 620px;
    transform: translate(-50%, -50%);
}

.orientation-side-view .orientation-scene {
    top: 61%;
    transform: translate(-50%, -50%) scale(0.72);
}

.orientation-upright-axis {
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 25px;
    z-index: 0;
    border-left: 1px dashed rgba(255, 255, 255, 0.22);
}

.orientation-upright-axis::after {
    content: "PION";
    position: absolute;
    left: 5px;
    top: 3px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.orientation-water {
    position: absolute;
    left: 5px;
    bottom: 7px;
    z-index: 1;
    width: 200px;
    height: 75px;
    overflow: hidden;
    border: 1px solid rgba(74, 181, 255, 0.42);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(32, 201, 151, 0.08), rgba(33, 147, 243, 0.25) 48%, rgba(12, 63, 99, 0.62) 100%);
    box-shadow: inset 0 10px 22px rgba(89, 194, 255, 0.12), 0 8px 22px rgba(0, 0, 0, 0.3);
    transform: rotateX(58deg);
}

.orientation-water .wave {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(132, 215, 255, 0.45);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.orientation-water .wave-one {
    width: 70px;
    height: 28px;
}

.orientation-water .wave-two {
    width: 125px;
    height: 48px;
}

.orientation-water .wave-three {
    width: 180px;
    height: 66px;
}

.orientation-scene::after {
    content: "";
    position: absolute;
    left: 22px;
    bottom: 55px;
    z-index: 4;
    width: 166px;
    height: 12px;
    border-top: 2px solid rgba(120, 211, 255, 0.65);
    border-radius: 50%;
    filter: drop-shadow(0 0 4px rgba(33, 147, 243, 0.7));
}

.orientation-buoy {
    position: absolute;
    left: 55px;
    top: 4px;
    z-index: 3;
    width: 100px;
    height: 172px;
    transform-origin: 50% 82%;
    transform-style: preserve-3d;
    transform: translateY(var(--device-depth-shift)) rotateZ(var(--device-screen-tilt)) rotateX(var(--device-depth-tilt));
    transition: transform 0.45s ease;
}

.buoy-light {
    position: absolute;
    left: 41px;
    top: 17px;
    z-index: 7;
    width: 18px;
    height: 19px;
    border: 2px solid #d7e7f2;
    border-radius: 7px 7px 3px 3px;
    background: rgba(255, 205, 64, 0.35);
}

.buoy-light i {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffd54f;
    box-shadow: 0 0 9px 3px rgba(255, 213, 79, 0.75);
}

.buoy-mast {
    position: absolute;
    left: 47px;
    top: 35px;
    z-index: 5;
    width: 6px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 3px;
    background: linear-gradient(90deg, #aebac3, #ffffff 45%, #7d8992);
}

.buoy-collar {
    position: absolute;
    left: 28px;
    top: 73px;
    z-index: 6;
    width: 44px;
    height: 13px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #ff4d5e;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35);
}

.buoy-body {
    position: absolute;
    left: 31px;
    top: 77px;
    z-index: 5;
    width: 38px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 45% 45% 38% 38% / 22% 22% 68% 68%;
    color: #ffffff;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.24), transparent 38%, rgba(255, 255, 255, 0.18) 55%, rgba(0, 0, 0, 0.2)),
        #2193F3;
    box-shadow: 5px 7px 12px rgba(0, 0, 0, 0.28);
}

.buoy-body span {
    margin-top: -8px;
    font-size: 13px;
    font-weight: 900;
}

.buoy-float {
    position: absolute;
    left: 15px;
    top: 119px;
    z-index: 6;
    width: 70px;
    height: 27px;
    border: 3px solid #f4f8fb;
    border-radius: 50%;
    background:
        radial-gradient(ellipse, #0d548c 0 28%, transparent 30%),
        linear-gradient(180deg, #ff6574, #d82f42);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.32);
}

.buoy-keel {
    position: absolute;
    left: 41px;
    top: 137px;
    z-index: 2;
    width: 18px;
    height: 34px;
    clip-path: polygon(12% 0, 88% 0, 65% 100%, 35% 100%);
    background: linear-gradient(90deg, #0d4f80, #208acb 50%, #093757);
    opacity: 0.85;
}

.orientation-tilt-reference {
    position: absolute;
    left: 5px;
    top: 54px;
    z-index: 0;
    width: 140px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #20c997 18%, #ffffff 50%, #ff4d5e 82%, transparent);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
    transform: translateY(var(--device-pitch-shift)) rotate(var(--device-roll));
    transition: transform 0.45s ease;
}

.orientation-tilt-reference::before,
.orientation-tilt-reference::after {
    content: "";
    position: absolute;
    top: -5px;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.orientation-tilt-reference::before {
    left: 35px;
}

.orientation-tilt-reference::after {
    right: 35px;
}

.orientation-tilt-reference span {
    position: absolute;
    left: 50%;
    top: 5px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    transform: translateX(-50%);
}

.orientation-device {
    position: absolute;
    left: 15px;
    top: 20px;
    width: 120px;
    height: 70px;
    z-index: 1;
    transform-style: preserve-3d;
    transform: rotateX(calc(-22deg + var(--device-pitch))) rotateY(calc(28deg + var(--device-roll))) rotateZ(var(--device-azimuth));
    transition: transform 0.45s ease;
}

.orientation-face {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.38);
    color: #ffffff;
    background: linear-gradient(145deg, #238fe8, #125da0);
    backface-visibility: visible;
}

.orientation-face.front,
.orientation-face.back {
    width: 120px;
    height: 70px;
}

.orientation-face.front {
    transform: translateZ(22px);
}

.orientation-face.back {
    transform: rotateY(180deg) translateZ(22px);
}

.orientation-face.left,
.orientation-face.right {
    width: 44px;
    height: 70px;
    left: 38px;
    background: linear-gradient(145deg, #176eaf, #0d487b);
}

.orientation-face.left {
    transform: rotateY(-90deg) translateZ(60px);
}

.orientation-face.right {
    transform: rotateY(90deg) translateZ(60px);
}

.orientation-face.top,
.orientation-face.bottom {
    width: 120px;
    height: 44px;
    top: 13px;
}

.orientation-face.top {
    color: #20c997;
    background: linear-gradient(145deg, #2ba7f4, #187cc5);
    transform: rotateX(90deg) translateZ(35px);
}

.orientation-face.bottom {
    background: #0d416e;
    transform: rotateX(-90deg) translateZ(35px);
}

.orientation-face.front span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.orientation-face.top i {
    font-size: 17px;
}

.orientation-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.orientation-metrics div {
    position: relative;
    min-width: 0;
    min-height: 39px;
    padding: 6px 7px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.055);
}

.orientation-metrics .orientation-metric-angle {
    padding-left: 27px;
    border-color: rgba(101, 184, 255, 0.12);
    background: rgba(33, 150, 243, 0.055);
}

.orientation-metrics .orientation-metric-angle > i {
    position: absolute;
    left: 8px;
    top: 50%;
    color: #79b9eb;
    font-size: 10px;
    transform: translateY(-50%);
}

.orientation-metrics .orientation-metric-roll > i { color: #c997ff; }
.orientation-metrics .orientation-metric-pitch > i { color: #65ddb7; }

.orientation-metrics span,
.orientation-metrics strong {
    display: block;
}

.orientation-metrics span {
    overflow: hidden;
    color: #9faab3;
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.orientation-metrics strong {
    margin-top: 1px;
    color: #ffffff;
    font-size: 12px;
}

.orientation-spatial-stage {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(138px, 0.8fr) minmax(0, 1.35fr);
    flex: 1;
    gap: 8px;
}

.orientation-bearing-panel,
.orientation-water-panel {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(143, 184, 220, 0.16);
    border-radius: 11px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
        rgba(7, 15, 21, 0.34);
    background-size: 20px 20px;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.18);
}

.orientation-stage-label {
    position: absolute;
    left: 9px;
    top: 7px;
    z-index: 12;
}

.orientation-stage-label span,
.orientation-stage-label strong {
    display: block;
}

.orientation-stage-label span {
    color: #7d9cb6;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.orientation-stage-label strong {
    margin-top: 1px;
    color: #eef6fb;
    font-size: 10px;
}

.orientation-bearing-ring {
    position: absolute;
    left: 50%;
    top: 53%;
    width: 126px;
    height: 126px;
    border: 1px solid rgba(113, 186, 241, 0.32);
    border-radius: 50%;
    background:
        repeating-conic-gradient(from -1deg, rgba(143, 184, 220, 0.33) 0deg 1deg, transparent 1deg 15deg),
        radial-gradient(circle, rgba(33, 147, 243, 0.04) 0 52%, rgba(33, 147, 243, 0.12) 53% 55%, transparent 56%);
    box-shadow: 0 0 24px rgba(33, 147, 243, 0.08);
    transform: translate(-50%, -50%);
}

.orientation-bearing-ring::before,
.orientation-bearing-ring::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: "";
    z-index: 0;
    background: rgba(143, 184, 220, 0.16);
    transform: translate(-50%, -50%);
}

.orientation-bearing-ring::before {
    width: 1px;
    height: 84%;
}

.orientation-bearing-ring::after {
    width: 84%;
    height: 1px;
}

.orientation-bearing-ring > span {
    position: absolute;
    z-index: 4;
    color: #7f8e98;
    font-size: 8px;
    font-weight: 900;
}

.orientation-bearing-ring > .north {
    left: 50%;
    top: 4px;
    color: #ff6978;
    transform: translateX(-50%);
}

.orientation-bearing-ring > .east {
    right: 6px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
}

.orientation-bearing-ring > .south {
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
}

.orientation-bearing-ring > .west {
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
}

.orientation-bearing-model {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 78px;
    height: 78px;
    transform: translate(-50%, -50%) rotate(var(--device-azimuth));
    transition: transform 0.5s ease;
}

.orientation-bearing-model img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.5));
    user-select: none;
}

.orientation-bearing-heading {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    width: 100px;
    height: 100px;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--device-azimuth));
    transition: transform 0.5s ease;
}

.orientation-bearing-heading i {
    position: absolute;
    left: 50%;
    top: -8px;
    color: #66d9b5;
    font-size: 15px;
    filter: drop-shadow(0 0 5px rgba(32, 201, 151, 0.7));
    transform: translateX(-50%) rotate(-45deg);
}

.orientation-bearing-value {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 5px;
    z-index: 8;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 4px 7px;
    border: 1px solid rgba(101, 184, 255, 0.12);
    border-radius: 7px;
    background: rgba(9, 18, 25, 0.76);
}

.orientation-bearing-value span {
    color: #81909a;
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
}

.orientation-bearing-value strong {
    color: #ffffff;
    font-size: 11px;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orientation-water-panel {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.orientation-water-panel.tilted {
    border-color: rgba(255, 193, 91, 0.26);
}

.orientation-water-panel.critical,
.orientation-water-panel.capsized,
.orientation-water-panel.inverted {
    border-color: rgba(255, 101, 116, 0.32);
    box-shadow: inset 0 0 25px rgba(255, 70, 86, 0.07);
}

.orientation-water-scene {
    position: absolute;
    inset: 26px 0 0;
    overflow: hidden;
    perspective: 680px;
}

.orientation-vertical-reference {
    position: absolute;
    left: 50%;
    top: 5px;
    bottom: 9px;
    z-index: 1;
    border-left: 1px dashed rgba(255, 255, 255, 0.28);
}

.orientation-vertical-reference span {
    position: absolute;
    left: 5px;
    top: 0;
    color: rgba(255, 255, 255, 0.36);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.orientation-roll-reference {
    position: absolute;
    left: 50%;
    top: 47%;
    z-index: 2;
    width: 176px;
    height: 176px;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.orientation-roll-dial {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(121, 194, 255, 0.18);
    border-radius: 50%;
    background:
        repeating-conic-gradient(from -0.5deg, rgba(121, 194, 255, 0.28) 0deg 1deg, transparent 1deg 10deg),
        radial-gradient(circle, transparent 0 76%, rgba(33, 150, 243, 0.035) 77% 100%);
    opacity: 0.68;
}

.orientation-roll-dial::before,
.orientation-roll-dial::after {
    position: absolute;
    left: 50%;
    content: "";
    background: rgba(255, 255, 255, 0.28);
    transform: translateX(-50%);
}

.orientation-roll-dial::before {
    top: -3px;
    width: 2px;
    height: 10px;
}

.orientation-roll-dial::after {
    bottom: -3px;
    width: 2px;
    height: 10px;
}

.orientation-device-axis {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 158px;
    background: linear-gradient(180deg, #69dfbb, rgba(105, 223, 187, 0.18));
    box-shadow: 0 0 8px rgba(32, 201, 151, 0.42);
    transform: translate(-50%, -50%) rotate(var(--device-model-roll));
    transform-origin: 50% 50%;
    transition: transform 0.5s ease;
}

.orientation-device-axis::before {
    position: absolute;
    left: 50%;
    top: -4px;
    width: 8px;
    height: 8px;
    content: "";
    border-top: 2px solid #69dfbb;
    border-right: 2px solid #69dfbb;
    transform: translateX(-50%) rotate(-45deg);
}

.orientation-device-axis i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 2px solid #69dfbb;
    border-radius: 50%;
    background: #14252a;
    transform: translate(-50%, -50%);
}

.orientation-roll-reference > span {
    position: absolute;
    top: 50%;
    color: rgba(121, 194, 255, 0.48);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.orientation-roll-reference .roll-left {
    left: -3px;
    transform: translateY(-50%);
}

.orientation-roll-reference .roll-right {
    right: -5px;
    transform: translateY(-50%);
}

.orientation-pitch-reference {
    position: absolute;
    right: 7px;
    top: 27px;
    bottom: 34px;
    z-index: 9;
    width: 38px;
    pointer-events: none;
}

.orientation-pitch-reference > span {
    position: absolute;
    right: 0;
    color: #738999;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.orientation-pitch-reference .pitch-front {
    top: -1px;
}

.orientation-pitch-reference .pitch-back {
    bottom: 11px;
}

.pitch-rail {
    position: absolute;
    right: 7px;
    top: 11px;
    bottom: 22px;
    width: 5px;
    border: 1px solid rgba(121, 194, 255, 0.24);
    border-radius: 99px;
    background: rgba(5, 12, 17, 0.72);
}

.pitch-rail i {
    position: absolute;
    left: -5px;
    right: -5px;
    top: 50%;
    border-top: 1px solid rgba(255, 255, 255, 0.34);
}

.pitch-rail b {
    position: absolute;
    left: 50%;
    top: var(--device-pitch-indicator);
    width: 11px;
    height: 11px;
    border: 2px solid #17242c;
    border-radius: 50%;
    background: #c997ff;
    box-shadow: 0 0 8px rgba(201, 151, 255, 0.55);
    transform: translate(-50%, -50%);
    transition: top 0.5s ease;
}

.orientation-pitch-reference > strong {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #d5b8f3;
    font-size: 6px;
    white-space: nowrap;
}

.orientation-real-model {
    position: absolute;
    left: 50%;
    top: -3px;
    z-index: 4;
    width: 132px;
    height: 204px;
    transform: translateX(-50%) rotateZ(var(--device-model-roll)) rotateX(var(--device-model-pitch));
    transform-origin: 50% 59%;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.orientation-real-model img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.48));
    user-select: none;
}

.orientation-water-surface {
    position: absolute;
    left: -8%;
    right: -8%;
    top: 58%;
    z-index: 6;
    height: 44%;
    overflow: hidden;
    border-top: 2px solid rgba(114, 209, 255, 0.76);
    background: linear-gradient(180deg, rgba(37, 145, 212, 0.2), rgba(7, 55, 91, 0.68));
    box-shadow: 0 -3px 13px rgba(65, 184, 250, 0.16), inset 0 10px 22px rgba(113, 211, 255, 0.08);
    transform: rotateX(7deg);
}

.orientation-water-surface::before {
    position: absolute;
    left: 0;
    right: 0;
    top: -5px;
    height: 11px;
    content: "";
    background: radial-gradient(ellipse at center, transparent 42%, rgba(121, 214, 255, 0.42) 44% 47%, transparent 49%);
    background-size: 55px 10px;
}

.orientation-water-surface i {
    position: absolute;
    left: 50%;
    border: 1px solid rgba(113, 211, 255, 0.18);
    border-radius: 50%;
    transform: translateX(-50%);
}

.orientation-water-surface i:nth-child(1) {
    top: 8px;
    width: 46%;
    height: 13px;
}

.orientation-water-surface i:nth-child(2) {
    top: 22px;
    width: 72%;
    height: 19px;
}

.orientation-water-surface i:nth-child(3) {
    top: 38px;
    width: 92%;
    height: 24px;
}

.orientation-spatial-legend {
    position: absolute;
    left: 7px;
    right: 49px;
    bottom: 5px;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 6px;
    background: rgba(8, 17, 23, 0.72);
    backdrop-filter: blur(5px);
}

.orientation-spatial-legend span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #83929c;
    font-size: 6px;
    white-space: nowrap;
}

.orientation-spatial-legend span i {
    width: 12px;
    height: 1px;
    display: block;
}

.orientation-spatial-legend .reference i {
    border-top: 1px dashed rgba(255, 255, 255, 0.55);
}

.orientation-spatial-legend .device-axis i {
    background: #69dfbb;
    box-shadow: 0 0 4px rgba(32, 201, 151, 0.45);
}

.orientation-spatial-legend > strong {
    margin-left: auto;
    color: #82e0c3;
    font-size: 7px;
    white-space: nowrap;
}

.orientation-three-toolbar {
    position: absolute;
    right: 7px;
    top: 7px;
    z-index: 24;
    display: flex;
    align-items: center;
    gap: 5px;
}

.orientation-wave-status,
.orientation-weather-status {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border: 1px solid rgba(121, 194, 255, 0.14);
    border-radius: 7px;
    color: #7792a4;
    background: rgba(7, 16, 23, 0.7);
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-transform: uppercase;
    backdrop-filter: blur(7px);
}

.orientation-wave-status i,
.orientation-weather-status i {
    color: #62b9ef;
    font-size: 8px;
}

.orientation-weather-status {
    border-color: rgba(255, 185, 92, 0.18);
    color: #a6b2b9;
    text-transform: none;
}

.orientation-weather-status i,
.orientation-weather-status b {
    color: #ffc26f;
}

.orientation-weather-status b,
.orientation-weather-status em {
    overflow: hidden;
    max-width: 118px;
    font-style: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.orientation-weather-status em {
    color: #94a3ad;
}

.orientation-three-action {
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(121, 194, 255, 0.2);
    border-radius: 8px;
    color: #c5d9e7;
    background: rgba(8, 20, 29, 0.84);
    font-size: 9px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.orientation-three-action:hover,
.orientation-three-action:focus-visible {
    border-color: rgba(101, 184, 255, 0.55);
    color: #ffffff;
    background: rgba(33, 147, 243, 0.68);
    outline: none;
    transform: translateY(-1px);
}

.orientation-three-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 44%, rgba(55, 151, 214, 0.13), transparent 38%),
        linear-gradient(180deg, rgba(7, 18, 26, 0.52), rgba(3, 11, 17, 0.86));
    isolation: isolate;
}

.orientation-three-stage::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent 72%);
}

.orientation-three-stage canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: none;
}

.orientation-three-stage canvas:active {
    cursor: grabbing;
}

.orientation-three-loading,
.orientation-three-error {
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 15;
    min-width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    padding: 12px;
    color: #7f9aae;
    text-align: center;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.orientation-three-loading i,
.orientation-three-error i {
    margin-bottom: 4px;
    color: #5db9f2;
    font-size: 16px;
}

.orientation-three-loading strong,
.orientation-three-loading span,
.orientation-three-error strong,
.orientation-three-error span {
    display: block;
}

.orientation-three-loading strong,
.orientation-three-error strong {
    color: #dcebf4;
    font-size: 9px;
}

.orientation-three-loading span,
.orientation-three-error span {
    max-width: 190px;
    font-size: 7px;
    line-height: 1.4;
}

.orientation-three-stage.is-ready .orientation-three-loading {
    visibility: hidden;
    opacity: 0;
}

.orientation-three-loading.is-error i,
.orientation-three-error i {
    color: #ff7c89;
}

.orientation-three-metrics {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 6px;
    z-index: 14;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    pointer-events: none;
}

.orientation-three-metrics > div {
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 7px;
    background: rgba(5, 14, 20, 0.72);
    backdrop-filter: blur(7px);
}

.orientation-three-metrics span,
.orientation-three-metrics strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.orientation-three-metrics span {
    color: #768a98;
    font-size: 5px;
    font-weight: 800;
    text-transform: uppercase;
}

.orientation-three-metrics strong {
    margin-top: 1px;
    color: #f2f8fb;
    font-size: 9px;
}

.orientation-three-metrics .azimuth {
    border-left: 2px solid #58c9ff;
}

.orientation-three-metrics .tilt {
    border-left: 2px solid #8dceff;
}

.orientation-three-metrics.has-wave-data {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.orientation-three-metrics .wave-height,
.orientation-three-metrics .wave-period,
.orientation-three-metrics .wave-direction {
    border-left: 2px solid #4fb8e9;
}

.orientation-three-metrics .azimuth strong { color: #7bd5ff; }
.orientation-three-metrics .tilt strong { color: #a5dbff; }
.orientation-three-metrics .wave-height strong,
.orientation-three-metrics .wave-period strong,
.orientation-three-metrics .wave-direction strong { color: #8fdcff; }

.orientation-three-help {
    position: absolute;
    left: 50%;
    bottom: 72px;
    z-index: 14;
    display: none;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(121, 194, 255, 0.14);
    border-radius: 99px;
    color: #8da4b3;
    background: rgba(5, 14, 20, 0.7);
    font-size: 8px;
    white-space: nowrap;
    pointer-events: none;
    backdrop-filter: blur(8px);
    transform: translateX(-50%);
}

.orientation-water-panel:not(.is-expanded) .orientation-three-help.is-visible {
    display: flex;
    bottom: 70px;
    color: #c5dceb;
    background: rgba(7, 20, 29, 0.9);
    animation: orientation-zoom-hint-in 0.18s ease-out;
}

@keyframes orientation-zoom-hint-in {
    from {
        opacity: 0;
        transform: translate(-50%, 5px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

body.orientation-viewer-open {
    overflow: hidden !important;
}

.orientation-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 12040;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    visibility: hidden;
    overflow: hidden;
    background: rgba(2, 7, 11, 0);
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(0);
    transition:
        visibility 0s linear 0.32s,
        opacity 0.24s ease,
        background 0.24s ease,
        backdrop-filter 0.24s ease;
}

.orientation-viewer-overlay.is-open {
    visibility: visible;
    background: rgba(2, 7, 11, 0.78);
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(8px);
    transition-delay: 0s;
}

.orientation-viewer-sheet {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(101, 184, 255, 0.3);
    border-radius: 24px;
    background: #061019;
    box-shadow: 0 28px 100px rgba(0, 0, 0, 0.68), 0 0 45px rgba(41, 139, 205, 0.12);
    transform: translateY(calc(100% + 24px));
    transition: transform 0.32s cubic-bezier(0.2, 0.82, 0.2, 1);
}

.orientation-viewer-overlay.is-open .orientation-viewer-sheet {
    transform: translateY(0);
}

.orientation-viewer-sheet-grabber {
    position: absolute;
    inset: 0 0 auto;
    z-index: 4;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(20, 42, 57, 0.96), rgba(8, 22, 31, 0.68));
    pointer-events: none;
}

.orientation-viewer-sheet-grabber i {
    width: 46px;
    height: 4px;
    border-radius: 99px;
    background: rgba(152, 204, 235, 0.44);
    box-shadow: 0 0 14px rgba(79, 181, 244, 0.18);
}

.orientation-viewer-sheet-host {
    position: absolute;
    inset: 20px 0 0;
}

.orientation-water-panel-placeholder {
    min-width: 0;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    border: 1px dashed rgba(111, 180, 225, 0.2);
    border-radius: 11px;
    color: #6d8797;
    background: rgba(7, 18, 25, 0.3);
    font-size: 9px;
    text-align: center;
}

.orientation-water-panel-placeholder i {
    color: #5e9fc8;
    font-size: 18px;
    opacity: 0.7;
}

.orientation-water-panel.is-expanded {
    position: relative;
    inset: auto;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #061019;
    box-shadow: none;
}

.orientation-water-panel.is-expanded .orientation-stage-label {
    left: 18px;
    top: 16px;
}

.orientation-water-panel.is-expanded .orientation-stage-label span {
    font-size: 9px;
}

.orientation-water-panel.is-expanded .orientation-stage-label strong {
    font-size: 15px;
}

.orientation-water-panel.is-expanded .orientation-stage-label strong::after {
    content: " · Waterly ONE";
    color: #76bce9;
    font-weight: 700;
}

.orientation-water-panel.is-expanded .orientation-three-toolbar {
    right: 16px;
    top: 15px;
}

.orientation-water-panel.is-expanded .orientation-wave-status,
.orientation-water-panel.is-expanded .orientation-weather-status {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 8px;
}

.orientation-water-panel.is-expanded .orientation-three-action {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    font-size: 11px;
}

.orientation-water-panel.is-expanded .orientation-three-reference {
    left: 18px;
    top: 67px;
    gap: 7px;
    padding: 9px 10px;
}

.orientation-water-panel.is-expanded .orientation-three-reference span {
    font-size: 8px;
}

.orientation-water-panel.is-expanded .orientation-three-metrics {
    left: 18px;
    right: 18px;
    bottom: 16px;
    gap: 8px;
}

.orientation-water-panel.is-expanded .orientation-three-metrics > div {
    padding: 9px 11px;
    border-radius: 10px;
}

.orientation-water-panel.is-expanded .orientation-three-metrics span {
    font-size: 7px;
}

.orientation-water-panel.is-expanded .orientation-three-metrics strong {
    font-size: 14px;
}

.orientation-water-panel.is-expanded .orientation-three-help {
    display: flex;
}

.orientation-assessment {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(145px, 1fr) minmax(210px, 1.25fr);
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border: 1px solid rgba(32, 201, 151, 0.18);
    border-radius: 10px;
    background: rgba(32, 201, 151, 0.055);
}

.orientation-assessment-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #69dfbb;
    background: rgba(32, 201, 151, 0.13);
    font-size: 12px;
}

.orientation-assessment-copy {
    min-width: 0;
}

.orientation-assessment-copy span,
.orientation-assessment-copy strong,
.orientation-assessment-copy small {
    display: block;
}

.orientation-assessment-copy span {
    color: #78a99a;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.orientation-assessment-copy strong {
    margin-top: 1px;
    color: #dff9f1;
    font-size: 11px;
}

.orientation-assessment-copy small {
    overflow: hidden;
    margin-top: 1px;
    color: #7f918d;
    font-size: 7px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.orientation-assessment-metrics {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.orientation-assessment-metrics > div {
    min-width: 0;
    padding: 5px 6px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.045);
}

.orientation-assessment-metrics span,
.orientation-assessment-metrics strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.orientation-assessment-metrics span {
    color: #82908f;
    font-size: 6px;
    font-weight: 800;
    text-transform: uppercase;
}

.orientation-assessment-metrics strong {
    margin-top: 1px;
    color: #f3f8f7;
    font-size: 10px;
}

.orientation-assessment-metrics > .azimuth {
    border-left: 2px solid #58c9ff;
    background: rgba(33, 150, 243, 0.075);
}

.orientation-assessment-metrics > .tilt {
    border-left: 2px solid #79c2ff;
    background: rgba(33, 150, 243, 0.075);
}

.orientation-assessment-metrics.has-wave-data {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.orientation-assessment-metrics.has-weather-data {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.orientation-assessment-metrics.has-wave-data.has-weather-data {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.orientation-assessment-metrics > .wave-height,
.orientation-assessment-metrics > .wave-period,
.orientation-assessment-metrics > .wave-direction {
    border-left: 2px solid #4fb8e9;
    background: rgba(43, 159, 214, 0.075);
}

.orientation-assessment-metrics > .wind-speed,
.orientation-assessment-metrics > .wind-direction {
    border-left: 2px solid #f6b85e;
    background: rgba(255, 169, 70, 0.07);
}

.orientation-assessment-metrics > .azimuth strong { color: #7bd5ff; }
.orientation-assessment-metrics > .tilt strong { color: #8dceff; }
.orientation-assessment-metrics > .wave-height strong,
.orientation-assessment-metrics > .wave-period strong,
.orientation-assessment-metrics > .wave-direction strong { color: #8fdcff; }
.orientation-assessment-metrics > .wind-speed strong,
.orientation-assessment-metrics > .wind-direction strong { color: #ffc87d; }

.orientation-weather-empty {
    width: min(360px, 100%);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}

.orientation-weather-empty > div {
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid rgba(255, 178, 79, 0.15);
    border-radius: 8px;
    background: rgba(255, 159, 67, 0.055);
}

.orientation-weather-empty span,
.orientation-weather-empty strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.orientation-weather-empty span {
    color: #8d98a0;
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
}

.orientation-weather-empty strong {
    margin-top: 2px;
    color: #ffc87d;
    font-size: 10px;
}


.orientation-assessment.tilted {
    border-color: rgba(255, 193, 91, 0.24);
    background: rgba(255, 193, 91, 0.055);
}

.orientation-assessment.tilted .orientation-assessment-icon {
    color: #ffd078;
    background: rgba(255, 193, 91, 0.13);
}

.orientation-assessment.critical,
.orientation-assessment.capsized,
.orientation-assessment.inverted {
    border-color: rgba(255, 101, 116, 0.26);
    background: rgba(255, 101, 116, 0.06);
}

.orientation-assessment.critical .orientation-assessment-icon,
.orientation-assessment.capsized .orientation-assessment-icon,
.orientation-assessment.inverted .orientation-assessment-icon {
    color: #ff8994;
    background: rgba(255, 101, 116, 0.13);
}

.orientation-assessment.critical .orientation-assessment-copy strong,
.orientation-assessment.capsized .orientation-assessment-copy strong,
.orientation-assessment.inverted .orientation-assessment-copy strong {
    color: #ffdfe2;
}

.orientation-empty-state {
    min-height: 0;
    height: auto;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    color: #7a8892;
    text-align: center;
}

.orientation-empty-state > div {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    border: 1px solid rgba(101, 184, 255, 0.18);
    border-radius: 14px;
    color: #6aaee5;
    background: rgba(33, 150, 243, 0.07);
    font-size: 19px;
}

.orientation-empty-state strong {
    color: #dbe6ed;
    font-size: 12px;
}

.orientation-empty-state span {
    max-width: 270px;
    font-size: 9px;
    line-height: 1.45;
}

#chart-container {
    flex: 1;
}
#accuracy-chart {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 767.98px) {
    .device-diagnostic-subpage-xy #map-diagnostic {
        min-height: 480px;
        height: 64vh;
        max-height: 640px;
    }

    .diagnostic-map-panel {
        width: 100%;
        display: block;
        padding: 9px 10px;
        border-radius: 0;
        box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2);
    }

    .diagnostic-map-toggle {
        display: flex;
    }

    .diagnostic-map-panel.is-collapsed .diagnostic-map-details {
        display: none;
    }

    .diagnostic-map-panel-main {
        min-height: 38px;
    }

    .diagnostic-map-tool-icon {
        width: 34px;
        height: 34px;
    }

    .diagnostic-map-eyebrow {
        font-size: 8px;
    }

    .diagnostic-map-title {
        font-size: 13px;
    }

    .diagnostic-map-state {
        padding: 5px 7px;
        font-size: 10px;
    }

    .diagnostic-map-status-stack {
        top: 10px;
        right: 10px;
        min-width: min(190px, calc(100% - 72px));
        max-width: min(230px, calc(100% - 72px));
    }

    .diagnostic-map-state-overlay {
        min-height: 32px;
        padding: 7px 10px;
    }

    .diagnostic-map-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 8px;
    }

    .diagnostic-map-metrics div {
        padding: 6px 8px;
    }

    .diagnostic-map-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0;
    }

    .diagnostic-map-footer {
        display: block;
        padding: 9px 10px 10px;
    }

    .diagnostic-map-points-summary strong {
        gap: 4px;
    }

    .diagnostic-map-points-summary strong small {
        font-size: 7px;
    }

    .diagnostic-map-tool {
        min-height: 46px;
        padding: 6px 5px;
        font-size: 10px;
    }

    .diagnostic-map-actions .diagnostic-map-tool i {
        font-size: 15px;
    }

    .device-diagnostic-subpage-xy .device-diagnostic-subpage-attributes {
        top: 0;
        bottom: auto;
        justify-content: flex-start !important;
        pointer-events: none;
    }

    .device-diagnostic-subpage-xy .device-diagnostic-subpage-attributes .device-diagnostic-subpage-attributes-content {
        border-radius: 0 0 8px 0;
        background: rgba(18, 24, 30, 0.72);
    }
}

@media (max-width: 575.98px) {
    .orientation-viewer-overlay {
        padding: 8px;
    }

    .orientation-viewer-sheet {
        width: 100%;
        height: 100%;
        border-radius: 18px;
    }

    .device-diagnostic-subpage-r {
        height: 680px;
    }

    .gps-accuracy-widget {
        padding: 12px;
    }

    .gps-accuracy-header {
        align-items: stretch;
        flex-direction: column;
    }

    .gps-accuracy-quality {
        min-width: 0;
    }

    .gps-accuracy-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gps-accuracy-plots {
        grid-template-columns: minmax(0, 1fr);
    }

    .device-orientation-3d {
        height: 480px;
    }

    .orientation-content {
        padding: 10px 10px 12px;
    }

    .orientation-views {
        height: auto;
    }

    .orientation-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .orientation-spatial-stage {
        grid-template-columns: minmax(116px, 0.72fr) minmax(0, 1.28fr);
    }

    .orientation-bearing-ring {
        width: 108px;
        height: 108px;
    }

    .orientation-bearing-model {
        width: 66px;
        height: 66px;
    }

    .orientation-real-model {
        width: 120px;
        height: 185px;
    }

    .orientation-water-panel:not(.is-expanded) .orientation-wave-status {
        display: none;
    }

    .orientation-water-panel:not(.is-expanded) .orientation-weather-status em {
        display: none;
    }

    .orientation-three-metrics,
    .orientation-three-metrics.has-wave-data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .orientation-three-reference {
        top: 36px;
        padding: 5px 6px;
    }

    .orientation-water-panel.is-expanded {
        inset: auto;
        border-radius: 0;
    }

    .orientation-water-panel.is-expanded .orientation-wave-status,
    .orientation-water-panel.is-expanded .orientation-weather-status {
        display: none;
    }

    .orientation-water-panel.is-expanded .orientation-three-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .orientation-water-panel.is-expanded .orientation-three-help {
        display: none;
    }

    .orientation-assessment {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 6px 8px;
    }

    .orientation-assessment-metrics {
        grid-column: 1 / -1;
    }

    .orientation-assessment-metrics.has-wave-data,
    .orientation-assessment-metrics.has-weather-data,
    .orientation-assessment-metrics.has-wave-data.has-weather-data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .orientation-view-label {
        align-items: flex-start;
        flex-direction: column;
        gap: 0;
    }

    .orientation-header {
        padding-right: 10px;
        padding-left: 10px;
    }

    .orientation-header-heading small {
        max-width: 185px;
    }

    .orientation-top-view .orientation-compass {
        top: 61%;
        width: 116px;
        height: 116px;
    }

    .orientation-top-view .orientation-heading {
        width: 89px;
        height: 89px;
    }

    .orientation-side-view .orientation-scene {
        top: 62%;
        transform: translate(-50%, -50%) scale(0.67);
    }
}

@media (prefers-reduced-motion: reduce) {
    .orientation-viewer-overlay,
    .orientation-viewer-sheet {
        transition: none;
    }
}

.device-diagnostic-subpage-z {
    background-color: #212224;
    border-radius: 15px;
    border: 2px solid #33373b;
    height: 200px;
    display: flex;
    flex-direction: column;
}
#elevation-chart-container {
    flex: 1;
}
#elevation-chart {
    width: 100% !important;
    height: 100% !important;
}



























/* .device-diagnostic-description {
	height: 500px;
	background-color: #33373b87;
	border-radius: 15px;
	margin-top: -6px;
	min-width: 450px;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 0px;
	padding-right: 0px;
} */







/* Stats charts */

.diagnostic-energy-section {
	overflow: hidden;
	border: 1px solid rgba(255, 193, 7, 0.2);
	border-radius: 16px;
	color: #f4f8fb;
	background:
		radial-gradient(circle at 8% 0, rgba(255, 193, 7, 0.14), transparent 29%),
		radial-gradient(circle at 94% 18%, rgba(32, 201, 151, 0.1), transparent 27%),
		linear-gradient(145deg, #22282d, #171b1f);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.diagnostic-energy-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 17px 10px;
}

.diagnostic-energy-heading {
	display: flex;
	align-items: center;
	gap: 11px;
}

.diagnostic-energy-heading-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border: 1px solid rgba(255, 193, 7, 0.38);
	border-radius: 12px;
	color: #ffd45c;
	background: rgba(255, 193, 7, 0.12);
	box-shadow: 0 0 18px rgba(255, 193, 7, 0.08);
}

.diagnostic-energy-heading span,
.diagnostic-energy-heading strong {
	display: block;
}

.diagnostic-energy-heading span {
	color: #d4b65e;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.diagnostic-energy-heading strong {
	font-size: 17px;
}

.diagnostic-energy-health {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 99px;
	color: #bac4cb;
	background: rgba(255, 255, 255, 0.05);
	font-size: 10px;
	font-weight: 700;
	white-space: nowrap;
}

.diagnostic-energy-health i {
	font-size: 7px;
}

.diagnostic-energy-health.charging {
	border-color: rgba(32, 201, 151, 0.28);
	color: #7de5c6;
	background: rgba(32, 201, 151, 0.1);
}

.diagnostic-energy-health.discharging {
	border-color: rgba(255, 77, 94, 0.28);
	color: #ff8995;
	background: rgba(255, 77, 94, 0.1);
}

.diagnostic-energy-live {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
	gap: 8px;
	padding: 0 10px 8px;
}

.diagnostic-energy-flow-card,
.diagnostic-energy-dac-card {
	min-width: 0;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 12px;
	background: rgba(8, 13, 17, 0.34);
}

.diagnostic-energy-flow-card {
	padding: 11px;
}

.diagnostic-energy-card-label {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #95a2ab;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.diagnostic-energy-card-label i {
	color: #ffc107;
}

.diagnostic-energy-flow {
	display: grid;
	grid-template-columns: minmax(92px, 1fr) 34px minmax(102px, 1fr) 34px minmax(92px, 1fr);
	align-items: center;
	gap: 3px;
	min-height: 150px;
	padding-top: 4px;
}

.energy-flow-node {
	min-width: 0;
	text-align: center;
}

.energy-flow-node > span,
.energy-flow-node > strong,
.energy-flow-node > small {
	display: block;
}

.energy-flow-node > span {
	margin-top: 7px;
	color: #8f9ba4;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.energy-flow-node > strong {
	overflow: hidden;
	margin-top: 2px;
	font-size: 18px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.energy-flow-node > small {
	overflow: hidden;
	color: #7e8991;
	font-size: 9px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.energy-flow-node-icon,
.energy-battery-shell,
.energy-dac-orbit {
	width: 58px;
	height: 58px;
	margin: 0 auto;
}

.energy-flow-node-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 193, 7, 0.42);
	border-radius: 50%;
	color: #ffd45c;
	background: radial-gradient(circle, rgba(255, 193, 7, 0.19), rgba(255, 193, 7, 0.04));
	box-shadow: 0 0 22px rgba(255, 193, 7, 0.12);
	font-size: 24px;
}

.energy-flow-link {
	position: relative;
	height: 2px;
	background: linear-gradient(90deg, rgba(255, 193, 7, 0.15), #ffc107, rgba(32, 201, 151, 0.25));
}

.energy-flow-link::before {
	content: "";
	position: absolute;
	left: 0;
	top: -2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ffe184;
	box-shadow: 0 0 8px #ffc107;
	animation: energy-flow-pulse 2.1s linear infinite;
}

.energy-flow-link i {
	position: absolute;
	right: -2px;
	top: 50%;
	color: #55d8b1;
	font-size: 10px;
	transform: translateY(-50%);
}

.energy-flow-link-out::before {
	animation-delay: 0.8s;
}

.diagnostic-energy-flow-card.flow-paused .energy-flow-link {
	opacity: 0.35;
}

.diagnostic-energy-flow-card.flow-paused .energy-flow-link::before {
	display: none;
}

@keyframes energy-flow-pulse {
	from { left: 0; opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	to { left: calc(100% - 5px); opacity: 0; }
}

.energy-dac-orbit {
	position: relative;
	border: 1px solid rgba(116, 183, 255, 0.34);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(33, 147, 243, 0.2), rgba(33, 147, 243, 0.02) 65%);
	box-shadow: inset 0 0 18px rgba(33, 147, 243, 0.1), 0 0 20px rgba(33, 147, 243, 0.09);
}

.energy-dac-orbit::before,
.energy-dac-orbit::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.energy-dac-orbit::before {
	width: 34px;
	height: 34px;
	border: 1px dashed rgba(121, 194, 255, 0.48);
}

.energy-dac-orbit::after {
	width: 10px;
	height: 10px;
	background: #2193F3;
	box-shadow: 0 0 12px #2193F3;
}

.energy-dac-orbit i,
.energy-dac-orbit b,
.energy-dac-orbit em {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #79c2ff;
	box-shadow: 0 0 6px #2193F3;
}

.energy-dac-orbit i { transform: translate(-26px, -2px); }
.energy-dac-orbit b { transform: translate(20px, -2px); }
.energy-dac-orbit em { transform: translate(-2px, 20px); }

.energy-battery-shell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, 0.72);
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.04);
}

.energy-battery-shell::after {
	content: "";
	position: absolute;
	right: -5px;
	top: 20px;
	width: 4px;
	height: 17px;
	border-radius: 0 3px 3px 0;
	background: rgba(255, 255, 255, 0.72);
}

.energy-battery-fill {
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 4px;
	height: var(--energy-battery-level, 0%);
	max-height: calc(100% - 8px);
	border-radius: 7px;
	background: linear-gradient(180deg, #58e0b7, #159c74);
	box-shadow: 0 0 12px rgba(32, 201, 151, 0.35);
	transition: height 0.4s ease;
}

.energy-battery-shell > i {
	position: relative;
	z-index: 2;
	color: #ffffff;
	font-size: 21px;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.diagnostic-energy-balance-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 11px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.045);
}

.diagnostic-energy-balance-strip > div:first-child span,
.diagnostic-energy-balance-strip > div:first-child strong {
	display: block;
}

.diagnostic-energy-balance-strip > div:first-child span {
	color: #8f9ba4;
	font-size: 9px;
	text-transform: uppercase;
}

.diagnostic-energy-balance-strip > div:first-child strong {
	font-size: 15px;
}

.energy-balance-direction {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 10px;
	font-weight: 700;
	text-align: right;
}

.diagnostic-energy-balance-strip.positive .energy-balance-direction { color: #66dfb9; }
.diagnostic-energy-balance-strip.negative .energy-balance-direction { color: #ff7f8c; }
.diagnostic-energy-balance-strip.neutral .energy-balance-direction { color: #9aa5ad; }

.diagnostic-energy-dac-card {
	display: flex;
	flex-direction: column;
	min-height: 232px;
	padding: 11px;
	background:
		radial-gradient(circle at 82% 15%, rgba(33, 147, 243, 0.13), transparent 35%),
		rgba(8, 13, 17, 0.34);
}

.diagnostic-energy-dac-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.diagnostic-energy-dac-header span,
.diagnostic-energy-dac-header > div > strong {
	display: block;
}

.diagnostic-energy-dac-header span {
	color: #79c2ff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.diagnostic-energy-dac-header > div > strong {
	margin-top: 2px;
	font-size: 12px;
}

.energy-dac-current {
	min-width: 66px;
	padding: 5px 8px;
	border: 1px solid rgba(121, 194, 255, 0.2);
	border-radius: 8px;
	text-align: right;
	background: rgba(33, 147, 243, 0.08);
}

.energy-dac-current small,
.energy-dac-current strong {
	display: block;
}

.energy-dac-current small {
	color: #81909a;
	font-size: 8px;
	text-transform: uppercase;
}

.energy-dac-current strong {
	color: #ffffff;
	font-size: 16px;
}

.diagnostic-energy-dac-chart-wrap {
	position: relative;
	min-height: 160px;
	flex: 1 1 auto;
	margin-top: 5px;
}

#diagnostic-energy-dac-chart {
	width: 100% !important;
	height: 100% !important;
}

.diagnostic-energy-dac-empty {
	position: absolute;
	inset: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	color: #74828c;
	text-align: center;
}

.diagnostic-energy-dac-empty.active {
	display: flex;
}

.diagnostic-energy-dac-empty i {
	margin-bottom: 5px;
	color: #3b8cca;
	font-size: 22px;
}

.diagnostic-energy-dac-empty strong {
	color: #9eabb4;
	font-size: 12px;
}

.diagnostic-energy-dac-empty span {
	max-width: 240px;
	font-size: 9px;
}

.diagnostic-energy-charts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
	padding: 0 5px 5px;
}

.diagnostic-battery-climate-charts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	padding: 0 5px 7px;
}

.diagnostic-battery-climate-charts:empty {
	display: none;
}

.diagnostic-energy-now {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	padding: 0 10px 9px;
}

.energy-now-item {
	--energy-card-accent: #79c2ff;
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 144px;
	padding: 0;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--energy-card-accent) 20%, rgba(255, 255, 255, 0.05));
	border-radius: 16px;
	color: inherit;
	background:
		radial-gradient(circle at 0 0, color-mix(in srgb, var(--energy-card-accent) 13%, transparent), transparent 42%),
		linear-gradient(145deg, rgba(27, 34, 40, 0.92), rgba(11, 17, 22, 0.92));
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.16);
	font: inherit;
	text-align: left;
	cursor: pointer;
	appearance: none;
	transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.energy-now-item::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--energy-card-accent), color-mix(in srgb, var(--energy-card-accent) 28%, transparent), transparent 86%);
	opacity: 0.82;
}

.energy-now-item:hover,
.energy-now-item:focus-visible {
	border-color: color-mix(in srgb, var(--energy-card-accent) 48%, transparent);
	background:
		radial-gradient(circle at 0 0, color-mix(in srgb, var(--energy-card-accent) 18%, transparent), transparent 44%),
		linear-gradient(145deg, rgba(31, 40, 47, 0.96), rgba(13, 21, 27, 0.96));
	outline: none;
	transform: translateY(-1px);
}

.energy-now-card-head {
	min-width: 0;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 13px 13px 9px;
}

.energy-now-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid color-mix(in srgb, var(--energy-card-accent) 24%, transparent);
	border-radius: 12px;
	color: var(--energy-card-accent);
	background: color-mix(in srgb, var(--energy-card-accent) 11%, transparent);
	box-shadow: inset 0 0 16px color-mix(in srgb, var(--energy-card-accent) 7%, transparent);
	font-size: 17px;
}

.energy-now-card-head > span {
	overflow: hidden;
	color: #9ba9b2;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.065em;
	line-height: 1.25;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: normal;
}

.energy-now-open {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 9px;
	color: #71808a;
	background: rgba(255, 255, 255, 0.03);
	font-size: 11px;
	transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.energy-now-item:hover .energy-now-open,
.energy-now-item:focus-visible .energy-now-open {
	border-color: color-mix(in srgb, var(--energy-card-accent) 32%, transparent);
	color: var(--energy-card-accent);
	background: color-mix(in srgb, var(--energy-card-accent) 10%, transparent);
}

.energy-now-card-body {
	min-width: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	flex: 1 1 auto;
	padding: 4px 14px 14px;
}

.energy-now-reading {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.energy-now-reading > strong {
	display: block;
	overflow: hidden;
	color: #f1f6f9;
	font-size: clamp(22px, 2.25vw, 31px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.05;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.energy-now-reading > small {
	display: block;
	overflow: hidden;
	margin-top: 5px;
	color: #798892;
	font-size: 9px;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.energy-now-battery-values {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	min-width: 0;
	gap: 9px;
}

.energy-battery-level {
	color: #f4f7fb;
	font-size: clamp(27px, 2.6vw, 36px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	white-space: nowrap;
}

.energy-battery-voltage {
	color: #ffbd73 !important;
	font-size: clamp(11px, 1.2vw, 14px) !important;
	font-weight: 800;
	white-space: nowrap;
}

.energy-now-status {
	max-width: 46%;
	flex: 0 1 auto;
	align-self: flex-end;
	margin: 0;
	padding: 6px 10px;
	overflow: hidden;
	border-radius: 99px;
	color: #98a4ac;
	background: rgba(255, 255, 255, 0.06);
	font-size: 10px;
	font-style: normal;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.energy-battery-direction.positive {
	color: #70e4bf;
	background: rgba(32, 201, 151, 0.13);
}

.energy-battery-direction.negative {
	color: #ff8793;
	background: rgba(255, 77, 94, 0.13);
}

.energy-now-pv .energy-pv-state {
	max-width: 46%;
	margin: 0;
	font-size: 11px;
	font-weight: 800;
}

.energy-now-battery {
	--energy-card-accent: #aa8dff;
}

.energy-now-balance {
	--energy-card-accent: #b27cff;
}

.energy-now-pv {
	--energy-card-accent: #5bc8ff;
}

.energy-analyzer-title {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 12px 13px 2px;
}

.energy-analyzer-title > span {
	min-width: 0;
}

.energy-analyzer-settings {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 6px;
	margin-left: auto;
}

.energy-analyzer-title-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	border: 1px solid rgba(91, 184, 255, 0.2);
	border-radius: 9px;
	color: #79c2ff;
	background: rgba(33, 147, 243, 0.08);
}

.energy-analyzer-title span,
.energy-analyzer-title strong,
.energy-analyzer-title small {
	display: block;
}

.energy-analyzer-title strong {
	color: #e5edf2;
	font-size: 15px;
}

.energy-analyzer-title small {
	margin-top: 1px;
	color: #697883;
	font-size: 8px;
}

.energy-analyzer-unit-switch {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid rgba(121, 194, 255, 0.18);
	border-radius: 10px;
	background: rgba(5, 12, 17, 0.5);
}

.energy-analyzer-aggregation-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid rgba(121, 194, 255, 0.18);
	border-radius: 10px;
	background: rgba(5, 12, 17, 0.5);
}

.energy-analyzer-aggregation-switch > span {
	padding: 0 6px;
	color: #7f8e98;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.energy-analyzer-aggregation-switch button {
	padding: 6px 9px;
	border: 0;
	border-radius: 7px;
	color: #73838e;
	background: transparent;
	font: inherit;
	font-size: 9px;
	font-weight: 800;
	cursor: pointer;
}

.energy-analyzer-aggregation-switch button.active {
	color: #dff3ff;
	background: linear-gradient(135deg, rgba(33, 147, 243, 0.3), rgba(91, 184, 255, 0.14));
	box-shadow: inset 0 0 0 1px rgba(91, 184, 255, 0.24);
}

.energy-analyzer-unit-switch button {
	min-width: 42px;
	padding: 6px 10px;
	border: 0;
	border-radius: 7px;
	color: #73838e;
	background: transparent;
	font: inherit;
	font-size: 10px;
	font-weight: 800;
	cursor: pointer;
}

.energy-analyzer-unit-switch button.active {
	color: #dff3ff;
	background: linear-gradient(135deg, rgba(33, 147, 243, 0.3), rgba(91, 184, 255, 0.14));
	box-shadow: inset 0 0 0 1px rgba(91, 184, 255, 0.24);
}

.energy-now-pv.charging-on {
	border-color: rgba(32, 201, 151, 0.26);
}

.energy-now-pv.charging-on .energy-pv-state {
	color: #70e4bf;
	background: rgba(32, 201, 151, 0.13);
}

.energy-now-pv.charging-off {
	border-color: rgba(255, 77, 94, 0.22);
}

.energy-now-pv.charging-off .energy-pv-state {
	color: #ff8793;
	background: rgba(255, 77, 94, 0.12);
}

.energy-analyzer-series {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	padding: 10px 9px 8px;
}

.energy-summary-region {
	margin: 9px 9px 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.065);
	border-radius: 11px;
	background: rgba(5, 10, 14, 0.3);
}

.energy-summary-visible {
	border-color: rgba(91, 184, 255, 0.13);
	background:
		linear-gradient(135deg, rgba(33, 147, 243, 0.045), transparent 48%),
		rgba(5, 10, 14, 0.28);
}

.energy-summary-sample {
	margin-top: 6px;
	border-color: rgba(255, 255, 255, 0.075);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 55%),
		rgba(5, 10, 14, 0.22);
}

.energy-summary-caption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 9px 0;
}

.energy-summary-caption span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #92a3ae;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.energy-summary-visible .energy-summary-caption span {
	color: #79c2ff;
}

.energy-summary-sample .energy-summary-caption span {
	color: #aeb9c0;
}

.energy-summary-caption small {
	overflow: hidden;
	color: #697983;
	font-size: 8px;
	font-weight: 700;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.energy-summary-region .energy-analyzer-series {
	padding: 7px;
}

.energy-summary-region .energy-analyzer-inspector {
	padding: 7px;
}

.energy-summary-sample + .energy-analyzer-chart-shell {
	margin-top: 8px;
}

.energy-flow-total-card {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: 2px 8px;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid rgba(85, 219, 234, 0.24);
	border-radius: 9px;
	background:
		linear-gradient(135deg, rgba(85, 219, 234, 0.1), rgba(33, 147, 243, 0.035)),
		rgba(255, 255, 255, 0.02);
}

.energy-flow-total-card > i {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	grid-row: 1 / 3;
	border-radius: 8px;
	color: #76e4ef;
	background: rgba(85, 219, 234, 0.11);
}

.energy-flow-total-card span,
.energy-flow-total-card small,
.energy-flow-total-card strong {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.energy-flow-total-card span {
	color: #d5e4e9;
	font-size: 9px;
	font-weight: 800;
}

.energy-flow-total-card small {
	margin-top: 1px;
	color: #71828b;
	font-size: 7px;
	font-weight: 500;
}

.energy-flow-total-card > strong {
	grid-column: 2;
	color: #76e4ef;
	font-size: 14px;
}

.energy-series-toggle {
	position: relative;
	display: grid;
	grid-template-columns: 10px minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: 0 7px;
	min-width: 0;
	padding: 8px 9px;
	border: 1px solid color-mix(in srgb, var(--energy-series-color) 25%, transparent);
	border-radius: 9px;
	color: #dbe5eb;
	background: color-mix(in srgb, var(--energy-series-color) 7%, rgba(255, 255, 255, 0.02));
	font: inherit;
	text-align: left;
	cursor: pointer;
	appearance: none;
	transition: opacity 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.energy-series-toggle > i {
	width: 8px;
	height: 8px;
	grid-row: 1 / 3;
	margin-top: 3px;
	border: 2px solid var(--energy-series-color);
	border-radius: 3px;
	background: transparent;
	box-shadow: 0 0 9px color-mix(in srgb, var(--energy-series-color) 42%, transparent);
}

.energy-series-toggle.is-active > i {
	background: var(--energy-series-color);
}

.energy-series-toggle[data-energy-series="batteryNet"].is-active > i {
	border-color: #b994ff;
	background: linear-gradient(180deg, #55dfb7 0 48%, #ff7b89 52% 100%);
}

.energy-series-toggle > span,
.energy-series-toggle > strong,
.energy-series-toggle small {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.energy-series-toggle > span {
	color: #bbc7ce;
	font-size: 9px;
	font-weight: 800;
}

.energy-series-toggle small {
	margin-top: 1px;
	color: #687781;
	font-size: 7px;
	font-weight: 500;
}

.energy-series-toggle > strong {
	grid-column: 2;
	margin-top: 4px;
	color: var(--energy-series-color);
	font-size: 12px;
}

.energy-series-toggle:not(.is-active) {
	opacity: 0.42;
	background: rgba(255, 255, 255, 0.015);
}

.energy-series-toggle.is-unavailable {
	opacity: 0.2;
	cursor: not-allowed;
}

.energy-now-battery > .energy-now-icon {
	color: #b8a3ff;
	background: rgba(140, 96, 255, 0.11);
}

.energy-now-balance.positive {
	border-color: rgba(32, 201, 151, 0.22);
	background: rgba(32, 201, 151, 0.055);
}

.energy-now-balance.positive > .energy-now-icon {
	color: #55dfb7;
	background: rgba(32, 201, 151, 0.13);
}

.energy-now-balance.negative {
	border-color: rgba(255, 77, 94, 0.22);
	background: rgba(255, 77, 94, 0.055);
}

.energy-now-balance.negative > .energy-now-icon {
	color: #ff7b89;
	background: rgba(255, 77, 94, 0.13);
}

.energy-now-dac > .energy-now-icon {
	color: #ffd45c;
	background: rgba(255, 193, 7, 0.11);
}

.diagnostic-energy-analyzer {
	margin: 0 10px 10px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.085);
	border-radius: 14px;
	background:
		radial-gradient(circle at 2% 5%, rgba(33, 147, 243, 0.09), transparent 26%),
		radial-gradient(circle at 98% 0, rgba(32, 201, 151, 0.07), transparent 28%),
		linear-gradient(150deg, rgba(14, 20, 25, 0.86), rgba(8, 12, 16, 0.78));
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 14px 32px rgba(0, 0, 0, 0.16);
}

.energy-analyzer-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding: 15px 16px 11px;
}

.energy-analyzer-heading > div:first-child > span,
.energy-analyzer-heading > div:first-child > strong,
.energy-analyzer-heading > div:first-child > small {
	display: block;
}

.energy-analyzer-heading > div:first-child > span {
	color: #72b7eb;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.energy-analyzer-heading > div:first-child > strong {
	margin-top: 2px;
	color: #edf4f8;
	font-size: 18px;
}

.energy-analyzer-heading > div:first-child > small {
	margin-top: 2px;
	color: #73818a;
	font-size: 9px;
}

.energy-analyzer-legend {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 7px 13px;
	max-width: 520px;
	padding-top: 5px;
}

.energy-analyzer-legend span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #8a98a1;
	font-size: 8px;
	font-weight: 700;
	white-space: nowrap;
}

.energy-analyzer-legend i {
	width: 9px;
	height: 9px;
	border-radius: 3px;
	background: #2193f3;
	box-shadow: 0 0 8px rgba(33, 147, 243, 0.28);
}

.energy-analyzer-legend .battery-charge i {
	background: #20c997;
	box-shadow: 0 0 8px rgba(32, 201, 151, 0.28);
}

.energy-analyzer-legend .battery-discharge i {
	background: #ff4d5e;
	box-shadow: 0 0 8px rgba(255, 77, 94, 0.28);
}

.energy-analyzer-legend .radiation i {
	height: 2px;
	border-radius: 0;
	background: #ff9f43;
	box-shadow: 0 0 8px rgba(255, 159, 67, 0.36);
}

.energy-analyzer-legend .dac i {
	height: 2px;
	border-radius: 0;
	background: #ffc107;
	box-shadow: 0 0 8px rgba(255, 193, 7, 0.34);
}

.energy-analyzer-kpis {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 5px;
	padding: 0 10px 9px;
}

.energy-analyzer-kpis > div {
	min-width: 0;
	padding: 8px 9px;
	border: 1px solid rgba(255, 255, 255, 0.055);
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.025);
}

.energy-analyzer-kpis span,
.energy-analyzer-kpis strong,
.energy-analyzer-kpis small {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.energy-analyzer-kpis span {
	color: #72808a;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.energy-analyzer-kpis strong {
	margin-top: 3px;
	color: #dbe5eb;
	font-size: 14px;
}

.energy-analyzer-kpis small {
	margin-top: 1px;
	color: #6e7b84;
	font-size: 8px;
}

.energy-analyzer-kpis .charge {
	border-color: rgba(32, 201, 151, 0.16);
	background: rgba(32, 201, 151, 0.04);
}

.energy-analyzer-kpis .charge strong {
	color: #55dfb7;
}

.energy-analyzer-kpis .discharge {
	border-color: rgba(255, 77, 94, 0.16);
	background: rgba(255, 77, 94, 0.04);
}

.energy-analyzer-kpis .discharge strong {
	color: #ff7b89;
}

.energy-analyzer-chart-shell {
	position: relative;
	height: 455px;
	margin: 0 9px;
	padding: 8px 8px 23px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	background: rgba(5, 9, 12, 0.34);
}

.energy-analyzer-chart-shell canvas {
	width: 100% !important;
	height: 100% !important;
}

.energy-analyzer-axis-label {
	position: absolute;
	left: 13px;
	z-index: 2;
	color: #687681;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	pointer-events: none;
}

.energy-analyzer-axis-source {
	top: 9px;
	color: #5f9fd1;
}

.energy-analyzer-axis-battery {
	bottom: 9px;
	color: #d16b75;
}

.energy-analyzer-axis-label i {
	margin-right: 4px;
}

.diagnostic-energy-analyzer-empty {
	position: absolute;
	inset: 8px 8px 23px;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	border-radius: 9px;
	color: #6e7c85;
	background: rgba(9, 14, 18, 0.93);
	text-align: center;
}

.energy-chart-range-reset {
	position: absolute;
	right: 13px;
	top: 13px;
	z-index: 7;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 9px;
	border: 1px solid rgba(91, 184, 255, 0.28);
	border-radius: 8px;
	opacity: 0;
	color: #91c9ed;
	background: rgba(12, 25, 34, 0.9);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
	font: inherit;
	font-size: 8px;
	font-weight: 800;
	pointer-events: none;
	transform: translateY(-5px);
	transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.energy-chart-range-reset.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.energy-chart-range-reset:hover {
	color: #ffffff;
	border-color: rgba(91, 184, 255, 0.5);
	background: rgba(23, 51, 69, 0.96);
}

.energy-chart-range-reset > i {
	font-size: 9px;
}

.energy-analyzer-chart-shell > .reset-zoom,
.energy-analyzer-chart-shell > .energy-crosshair-zoom-disabled {
	display: none !important;
}

.diagnostic-energy-analyzer-empty.active {
	display: flex;
}

.diagnostic-energy-analyzer-empty i {
	margin-bottom: 7px;
	color: #3f94d5;
	font-size: 28px;
}

.diagnostic-energy-analyzer-empty strong {
	color: #a8b4bc;
	font-size: 13px;
}

.diagnostic-energy-analyzer-empty span {
	max-width: 370px;
	font-size: 9px;
}

.energy-analyzer-inspector {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	gap: 6px;
	padding: 8px 9px;
}

.energy-inspector-time,
.energy-inspector-equation {
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.025);
}

.energy-inspector-time {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 9px 11px;
}

.energy-inspector-time span,
.energy-inspector-time strong {
	display: block;
}

.energy-inspector-time span {
	color: #6d7b84;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.energy-inspector-time strong {
	margin-top: 3px;
	color: #cbd5db;
	font-size: 11px;
}

.energy-inspector-equation {
	display: grid;
	grid-template-columns: repeat(3, minmax(88px, 1fr));
	align-items: center;
	gap: 5px;
	padding: 6px;
}

.energy-inspector-equation > .fa-long-arrow-alt-right {
	color: #56646e;
}

.energy-equation-source,
.energy-equation-target,
.energy-equation-load,
.energy-equation-battery-balance,
.energy-equation-battery-level,
.energy-equation-battery-voltage,
.energy-equation-power,
.energy-equation-radiation,
.energy-equation-dac {
	min-width: 0;
	padding: 6px 7px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
}

.energy-equation-source i,
.energy-equation-target i,
.energy-equation-load i,
.energy-equation-battery-balance i,
.energy-equation-battery-level i,
.energy-equation-battery-voltage i,
.energy-equation-power i,
.energy-equation-radiation i {
	float: left;
	margin: 3px 6px 8px 0;
	color: #5bb8ff;
}

.energy-equation-target.battery-charge i {
	color: #55dfb7;
}

.energy-equation-target.battery-discharge i {
	color: #ff7b89;
}

.energy-equation-radiation i {
	color: #ffb15f;
}

.energy-equation-battery-balance i {
	color: #b994ff;
}

.energy-equation-battery-balance strong.positive {
	color: #55dfb7;
}

.energy-equation-battery-balance strong.negative {
	color: #ff7b89;
}

.energy-equation-source span,
.energy-equation-target span,
.energy-equation-load span,
.energy-equation-battery-balance span,
.energy-equation-battery-level span,
.energy-equation-battery-voltage span,
.energy-equation-power span,
.energy-equation-radiation span,
.energy-equation-dac span,
.energy-equation-source strong,
.energy-equation-target strong,
.energy-equation-load strong,
.energy-equation-battery-balance strong,
.energy-equation-battery-level strong,
.energy-equation-battery-voltage strong,
.energy-equation-power strong,
.energy-equation-radiation strong,
.energy-equation-dac strong {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.energy-equation-source span,
.energy-equation-target span,
.energy-equation-load span,
.energy-equation-battery-balance span,
.energy-equation-battery-level span,
.energy-equation-battery-voltage span,
.energy-equation-power span,
.energy-equation-radiation span,
.energy-equation-dac span {
	color: #697781;
	font-size: 7px;
	font-weight: 800;
	text-transform: uppercase;
}

.energy-equation-source strong,
.energy-equation-target strong,
.energy-equation-load strong,
.energy-equation-battery-balance strong,
.energy-equation-battery-level strong,
.energy-equation-battery-voltage strong,
.energy-equation-power strong,
.energy-equation-radiation strong,
.energy-equation-dac strong {
	color: #d4dee4;
	font-size: 10px;
}

.energy-equation-target.inactive {
	opacity: 0.34;
}

.energy-equation-load {
	border: 1px solid rgba(85, 219, 234, 0.16);
	background: rgba(85, 219, 234, 0.055);
}

.energy-equation-load i,
.energy-equation-load strong {
	color: #76e4ef;
}

.energy-equation-radiation {
	border: 1px solid rgba(255, 159, 67, 0.13);
	background: rgba(255, 159, 67, 0.055);
}

.energy-equation-radiation strong {
	color: #ffc078;
}

.energy-equation-battery-level i,
.energy-equation-battery-level strong {
	color: #b8a8ff;
}

.energy-equation-battery-voltage i,
.energy-equation-battery-voltage strong {
	color: #ffb566;
}

.energy-equation-power i,
.energy-equation-power strong {
	color: #7ee787;
}

.energy-equation-dac {
	text-align: center;
}

.energy-equation-dac strong {
	color: #ffd45c;
}

.energy-analyzer-quality {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 6px 16px;
	padding: 0 13px 11px;
	color: #65737d;
	font-size: 8px;
}

.energy-analyzer-quality span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.energy-analyzer-quality strong {
	color: #8b99a2;
}

.energy-quality-model.ok {
	color: #55b99b;
}

.energy-quality-model.warning {
	color: #e0ad4d;
}

.energy-quality-dac.available {
	color: #c49d36;
}

.energy-quality-dac.missing {
	color: #626f78;
}

@media (max-width: 1199.98px) {
	.energy-analyzer-series {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.energy-analyzer-kpis {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.energy-inspector-equation {
		grid-template-columns: repeat(3, minmax(88px, 1fr));
	}

	.energy-inspector-equation > .fa-long-arrow-alt-right {
		display: none;
	}
}

.diagnostic-energy-charts .device-statistic {
	min-width: 0;
}

@media (max-width: 991.98px) {
	.diagnostic-energy-charts {
		grid-template-columns: 1fr;
	}

	.diagnostic-energy-now {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.diagnostic-energy-now .energy-now-battery {
		grid-column: 1 / -1;
	}

	.energy-analyzer-series {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.energy-analyzer-heading {
		flex-direction: column;
		gap: 8px;
	}

	.energy-analyzer-legend {
		justify-content: flex-start;
		max-width: none;
	}

	.energy-analyzer-inspector {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 575.98px) {
	.diagnostic-battery-climate-charts {
		grid-template-columns: 1fr;
	}

	.diagnostic-energy-header {
		align-items: flex-start;
		flex-direction: column;
	}

	.diagnostic-energy-health {
		align-self: stretch;
		justify-content: center;
	}

	.diagnostic-energy-live {
		padding-right: 6px;
		padding-left: 6px;
	}

	.diagnostic-energy-now {
		grid-template-columns: 1fr;
		padding-right: 6px;
		padding-left: 6px;
	}

	.diagnostic-energy-now .energy-now-battery {
		grid-column: auto;
	}

	.energy-analyzer-series {
		grid-template-columns: 1fr;
		padding-right: 5px;
		padding-left: 5px;
	}

	.energy-summary-caption {
		align-items: flex-start;
		flex-direction: column;
		gap: 2px;
	}

	.energy-summary-caption small {
		width: 100%;
		text-align: left;
	}

	.diagnostic-energy-analyzer {
		margin-right: 6px;
		margin-left: 6px;
	}

	.energy-analyzer-title {
		flex-wrap: wrap;
	}

	.energy-analyzer-settings {
		width: 100%;
		justify-content: flex-start;
		margin-left: 0;
	}

	.energy-analyzer-title > span {
		min-width: 0;
		flex: 1 1 calc(100% - 42px);
	}

	.energy-analyzer-unit-switch {
		width: 100%;
		justify-content: stretch;
		margin-left: 0;
	}

	.energy-analyzer-unit-switch button {
		flex: 1 1 50%;
	}

	.energy-analyzer-heading {
		padding: 13px 12px 10px;
	}

	.energy-analyzer-heading > div:first-child > strong {
		font-size: 15px;
	}

	.energy-analyzer-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-right: 6px;
		padding-left: 6px;
	}

	.energy-analyzer-chart-shell {
		height: 365px;
		margin-right: 5px;
		margin-left: 5px;
		padding-right: 2px;
		padding-left: 2px;
	}

	.energy-analyzer-inspector {
		padding-right: 5px;
		padding-left: 5px;
	}

	.energy-inspector-equation {
		grid-template-columns: 1fr;
	}

	.energy-analyzer-quality {
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: column;
		gap: 3px;
		padding-left: 9px;
	}

	.diagnostic-energy-flow {
		grid-template-columns: minmax(74px, 1fr) 20px minmax(78px, 1fr) 20px minmax(74px, 1fr);
		min-height: 140px;
	}

	.energy-flow-node-icon,
	.energy-battery-shell,
	.energy-dac-orbit {
		width: 48px;
		height: 48px;
	}

	.energy-flow-node > strong {
		font-size: 14px;
	}

	.energy-dac-orbit::before {
		width: 29px;
		height: 29px;
	}

	.energy-dac-orbit i { transform: translate(-22px, -2px); }
	.energy-dac-orbit b { transform: translate(16px, -2px); }
	.energy-dac-orbit em { transform: translate(-2px, 16px); }

	.diagnostic-energy-balance-strip {
		align-items: flex-start;
		flex-direction: column;
	}

	.energy-balance-direction {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.energy-flow-link::before {
		animation: none;
	}
}

.device-statistic {
	min-width: 0;
	flex: 1 1 420px;
	max-width: 100%;
	padding: 5px !important;
}

.diagnostic-statistic-widget .widget-parameter-with-chart {
	height: 392px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.085) !important;
	border-radius: 15px;
	color: #dce5eb;
	background:
		radial-gradient(circle at 94% 0, color-mix(in srgb, var(--diagnostic-chart-color, #2193f3) 13%, transparent), transparent 29%),
		linear-gradient(150deg, #242a2f, #181c20) !important;
	box-shadow: 0 13px 30px rgba(0, 0, 0, 0.17);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.diagnostic-statistic-widget .widget-parameter-with-chart:hover {
	border-color: color-mix(in srgb, var(--diagnostic-chart-color, #2193f3) 34%, transparent) !important;
	box-shadow: 0 17px 34px rgba(0, 0, 0, 0.24);
	transform: translateY(-1px);
}

.diagnostic-statistic-widget .widget-parameter-body {
	position: relative;
	top: auto;
	left: auto;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.diagnostic-chart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 84px;
	padding: 13px 14px 9px;
}

.diagnostic-chart-identity {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 10px;
	cursor: pointer;
}

.diagnostic-chart-identity:focus-visible {
	border-radius: 10px;
	outline: 2px solid rgba(82, 184, 255, 0.72);
	outline-offset: 4px;
}

.diagnostic-statistic-widget .widget-icon {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	border: 1px solid color-mix(in srgb, var(--diagnostic-chart-color, #2193f3) 32%, transparent);
	border-radius: 12px;
	color: var(--diagnostic-chart-color, #2193f3);
	background: color-mix(in srgb, var(--diagnostic-chart-color, #2193f3) 10%, transparent);
	box-shadow: inset 0 0 17px color-mix(in srgb, var(--diagnostic-chart-color, #2193f3) 7%, transparent);
	font-size: 18px;
}

.diagnostic-chart-title {
	min-width: 0;
	flex: 1 1 auto;
}

.diagnostic-chart-expand {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border: 1px solid rgba(101, 184, 255, 0.2);
	border-radius: 9px;
	color: #82bddf;
	background: rgba(33, 147, 243, 0.07);
	font-size: 10px;
	transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.diagnostic-chart-expand:hover {
	border-color: rgba(101, 184, 255, 0.48);
	color: #d8f0ff;
	background: rgba(33, 147, 243, 0.16);
	transform: translateY(-1px);
}

.diagnostic-chart-title > span,
.diagnostic-chart-reading > span,
.diagnostic-chart-stat > span {
	display: block;
	color: #77858f;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

.diagnostic-statistic-widget .widget-header {
	display: -webkit-box;
	overflow: hidden;
	margin-top: 2px;
	color: #eaf2f7;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.18;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.diagnostic-statistic-widget .widget-header .fa-info-circle {
	color: #71808a;
	font-size: 10px;
}

.diagnostic-statistic-widget .widget-date {
	overflow: hidden;
	width: auto;
	height: auto;
	margin-top: 3px;
	color: #77858e;
	font-size: 9px;
	font-style: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.diagnostic-statistic-widget .widget-date i {
	font-style: normal;
}

.diagnostic-chart-reading {
	min-width: 112px;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, 0.065);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.035);
	text-align: right;
}

.diagnostic-chart-reading > span i {
	margin-right: 3px;
	color: var(--diagnostic-chart-color, #2193f3);
	font-size: 6px;
	filter: drop-shadow(0 0 4px var(--diagnostic-chart-color, #2193f3));
}

.diagnostic-chart-reading > div {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 4px;
	margin-top: 1px;
}

.diagnostic-statistic-widget .widget-value {
	width: auto;
	max-width: 150px;
	height: auto;
	margin: 0;
	color: #ffffff;
	font-size: 23px;
	font-weight: 800;
	line-height: 1.05;
}

.diagnostic-statistic-widget .widget-unit {
	margin: 0;
	padding: 0;
	color: #8f9ca5;
	font-size: 10px;
}

.diagnostic-chart-insights {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 5px;
	padding: 0 10px 8px;
}

.diagnostic-chart-stat {
	min-width: 0;
	padding: 7px 8px;
	border: 1px solid rgba(255, 255, 255, 0.055);
	border-radius: 9px;
	background: rgba(8, 13, 17, 0.24);
}

.diagnostic-chart-stat strong {
	display: block;
	overflow: hidden;
	margin-top: 2px;
	color: #cbd5dc;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.diagnostic-chart-stat-trend strong {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--diagnostic-chart-color, #2193f3);
}

.diagnostic-chart-stat .widget-trend {
	width: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
}

.diagnostic-chart-stat .widget-trend-label {
	overflow: hidden;
	font-style: normal;
	text-overflow: ellipsis;
}

.diagnostic-chart-stat-unit {
	margin-left: 4px;
	color: #7f8d96;
	font-size: 8px;
	font-weight: 700;
}

.diagnostic-chart-stage {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	margin: 0 8px;
	padding: 5px 7px;
	border: 1px solid rgba(255, 255, 255, 0.055);
	border-radius: 11px;
	background: rgba(7, 12, 16, 0.3);
}

.diagnostic-chart-stage-label {
	position: absolute;
	left: 12px;
	top: 7px;
	z-index: 2;
	color: #64727c;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	pointer-events: none;
}

.diagnostic-chart-stage-label i {
	margin-right: 4px;
	color: var(--diagnostic-chart-color, #2193f3);
}

.diagnostic-statistic-widget .chart-statistic-div,
.device-statistic.statistic-dual-axis .chart-statistic-div {
	position: relative;
	flex: 1 1 auto;
	height: auto;
	min-height: 176px;
	overflow: hidden;
	border-radius: 8px;
}

.diagnostic-statistic-widget .chart-statistic-div canvas {
	width: 100% !important;
	height: 100% !important;
}

.diagnostic-chart-interaction-hint {
	position: absolute;
	right: 11px;
	top: 7px;
	z-index: 2;
	color: #5f6d76;
	font-size: 8px;
	pointer-events: none;
}

.diagnostic-chart-interaction-hint i {
	margin-right: 3px;
}

.diagnostic-chart-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex: 0 0 auto;
	padding: 8px 12px 9px;
	color: #87959e;
	font-size: 9px;
	font-weight: 600;
}

.diagnostic-chart-footer span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.diagnostic-chart-footer i {
	margin-right: 4px;
	color: #61717c;
}

.diagnostic-chart-footer strong {
	color: #aebac2;
}

.diagnostic-chart-footer .widget-range {
	color: #aebac2;
	font-size: 9px;
	font-weight: 700;
}

.diagnostic-chart-reset-zoom {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 8px;
	border: 1px solid rgba(82, 184, 255, 0.34);
	border-radius: 8px;
	opacity: 0;
	color: #9dd9ff;
	background: rgba(12, 28, 40, 0.9);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
	font-size: 8px;
	font-weight: 800;
	pointer-events: none;
	transform: translateY(-4px);
	transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.diagnostic-chart-reset-zoom.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.diagnostic-chart-reset-zoom:hover {
	color: #dff3ff;
	background: rgba(24, 57, 78, 0.96);
}

.diagnostic-statistic-widget canvas.is-selecting-range {
	cursor: col-resize;
}

.diagnostic-location-failure-count {
	position: absolute;
	left: 10px;
	top: 8px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 7px;
	border: 1px solid rgba(255, 77, 94, 0.3);
	border-radius: 7px;
	color: #ff98a2;
	background: rgba(66, 17, 24, 0.82);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	font-size: 8px;
	font-weight: 800;
	pointer-events: none;
}

body.diagnostic-chart-viewer-open {
	overflow: hidden !important;
}

.diagnostic-chart-viewer-overlay {
	z-index: 12060;
	padding: 16px 16px 0;
}

.diagnostic-chart-viewer-sheet {
	width: min(1500px, 100%);
	height: min(900px, calc(100vh - 16px));
	border-bottom: 0;
	border-radius: 24px 24px 0 0;
	background:
		radial-gradient(circle at 90% 0, rgba(33, 147, 243, 0.11), transparent 31%),
		linear-gradient(150deg, #172129, #0d1419);
}

.diagnostic-chart-sheet-toolbar {
	position: absolute;
	inset: 0 0 auto;
	z-index: 7;
	min-height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid rgba(143, 184, 220, 0.12);
	background: rgba(16, 22, 27, 0.96);
	backdrop-filter: blur(16px);
}

.diagnostic-chart-sheet-toolbar .diagnostic-chart-viewer-collapse {
	width: auto;
	min-width: 190px;
	height: auto;
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) 22px;
	align-items: center;
	justify-content: initial;
	gap: 8px;
	padding: 5px 10px;
	border: 0;
	border-radius: 10px;
	color: #dbe9f2;
	background: transparent;
	font-size: inherit;
	font-weight: inherit;
}

.diagnostic-chart-sheet-toolbar .diagnostic-chart-viewer-collapse:hover,
.diagnostic-chart-sheet-toolbar .diagnostic-chart-viewer-collapse:focus-visible {
	color: #ffffff;
	background: rgba(101, 184, 255, 0.09);
	outline: none;
}

.diagnostic-chart-viewer-header {
	position: absolute;
	inset: 42px 0 auto;
	z-index: 5;
	min-height: 66px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 16px;
	border-bottom: 1px solid rgba(143, 184, 220, 0.13);
	background: rgba(10, 20, 27, 0.82);
	backdrop-filter: blur(14px);
}

.diagnostic-chart-viewer-header > div {
	min-width: 0;
}

.diagnostic-chart-viewer-identity {
	display: flex;
	align-items: center;
	gap: 12px;
}

.diagnostic-chart-viewer-icon {
	width: 40px;
	height: 40px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	border: 1px solid rgba(103, 232, 249, 0.2);
	border-radius: 12px;
	color: #67e8f9;
	background: rgba(103, 232, 249, 0.08);
	font-size: 17px;
}

.diagnostic-chart-viewer-identity > div {
	min-width: 0;
}

.diagnostic-chart-viewer-header span,
.diagnostic-chart-viewer-header strong,
.diagnostic-chart-viewer-header small {
	display: block;
}

.diagnostic-chart-viewer-identity > div > span {
	color: #6fa8cc;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.diagnostic-chart-viewer-header strong {
	overflow: hidden;
	margin-top: 1px;
	color: #eef7fc;
	font-size: 17px;
	font-weight: 800;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.diagnostic-chart-viewer-header small {
	margin-top: 1px;
	color: #758995;
	font-size: 9px;
}

.diagnostic-chart-viewer-host {
	position: absolute;
	inset: 108px 14px 0;
	min-height: 0;
}

.diagnostic-chart-viewer-host > .device-statistic {
	width: 100%;
	height: 100%;
	max-width: none;
	padding: 0 !important;
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .widget-parameter-with-chart {
	height: 100%;
	overflow: hidden;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;
	transform: none;
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .widget-parameter-with-chart:hover {
	border: 0 !important;
	box-shadow: none;
	transform: none;
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-header {
	display: none;
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-stage {
	order: 1;
	margin: 10px 8px 0;
	padding: 8px 10px 12px;
	border-color: rgba(101, 184, 255, 0.13);
	border-radius: 16px;
	background: rgba(2, 8, 15, 0.54);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-insights {
	order: 2;
	gap: 8px;
	padding: 10px 8px 8px;
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-stat {
	padding: 10px 11px;
	border-color: rgba(255, 255, 255, 0.07);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.035);
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-stat strong {
	margin-top: 4px;
	font-size: 14px;
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-footer {
	order: 3;
	padding: 3px 12px 12px;
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .chart-statistic-div {
	min-height: 320px;
}

.diagnostic-chart-widget-placeholder {
	min-width: 0;
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 8px;
	border: 1px dashed rgba(101, 184, 255, 0.22);
	border-radius: 15px;
	color: #718d9e;
	background: rgba(9, 20, 27, 0.38);
	font-size: 9px;
	text-align: center;
}

.diagnostic-chart-widget-placeholder i {
	color: #54b8f5;
	font-size: 20px;
	opacity: 0.78;
}

@media (max-width: 575.98px) {
	.diagnostic-chart-viewer-overlay {
		padding: 8px 8px 0;
	}

	.diagnostic-chart-viewer-sheet {
		height: calc(100vh - 8px);
		border-radius: 18px 18px 0 0;
	}

	.diagnostic-chart-viewer-header {
		padding: 9px 11px;
	}

	.diagnostic-chart-viewer-header strong {
		font-size: 14px;
	}

	.diagnostic-chart-viewer-icon {
		width: 34px;
		height: 34px;
		flex-basis: 34px;
		font-size: 14px;
	}

	.diagnostic-chart-viewer-header small {
		display: none;
	}

	.diagnostic-chart-sheet-toolbar .diagnostic-chart-viewer-collapse {
		width: auto;
		min-width: 190px;
	}

	.diagnostic-chart-viewer-host {
		inset: 108px 8px 0;
	}

	.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-insights {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-stage {
		margin-right: 0;
		margin-left: 0;
	}
}

.diagnostic-statistic-widget .download-data {
	position: absolute !important;
	left: 50% !important;
	top: 58% !important;
	z-index: 5;
	width: auto;
	margin: 0 !important;
	padding: 9px 12px !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	background: rgba(15, 20, 24, 0.88);
	font-size: 9px;
	transform: translate(-50%, -50%);
}

.diagnostic-statistic-widget .chart-statistic-div .no-data {
	top: 50% !important;
	margin: 0 !important;
	color: #73818a;
	font-size: 10px !important;
	transform: translateY(-50%);
}

@media (max-width: 575.98px) {
	.diagnostic-statistic-widget .widget-parameter-with-chart {
		height: 440px;
	}

	.diagnostic-chart-header {
		align-items: stretch;
		flex-direction: column;
		gap: 7px;
	}

	.diagnostic-chart-reading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}

	.diagnostic-chart-insights {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.diagnostic-statistic-widget .chart-statistic-div,
	.device-statistic.statistic-dual-axis .chart-statistic-div {
		height: 151px;
	}

	.diagnostic-chart-interaction-hint {
		display: none;
	}

	.diagnostic-chart-footer {
		align-items: flex-start;
		flex-direction: column;
		gap: 2px;
	}
}

/* Description table */

/* .table-device-date {
	font-size: 16px;
	font-weight: bolder;
	color: #2193f3;
} */

/* Diagnostic table */

.diagnostic-table-hover tr:hover {
	background-color: #23292f;
}




























#waterTankChart {
    width: 200px;
    height: 500px;
    margin: 0 auto;
    background: linear-gradient(to top, #e0e0e0, #f5f5f5);
    border: 2px solid #9e9e9e;
    border-radius: 10px;
    box-sizing: border-box;
    position: relative;
}


/* css/account/subpage_events.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           subpage_events.css
**************************************************************************************************/

.container-events {
    padding-top: 15px;
    padding-right: 30px;
}

.container-events ul {
    margin: 0;
    /* margin-top: 100px; */
    list-style: none;
    position: relative;
    padding: 0 0 0 120px;
    color: #fff;
    font-size: 13px;
}

.container-events ul:before {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    border-left: 2px dashed #fff;
}

.container-events ul li {
    position: relative;
    margin-left: 30px;
    padding: 14px;
    border-radius: 6px;
    /* width: 250px; */
    box-shadow: 0 0 4px #0000001f, 0 2px 2px #00000014;
}

.container-events ul li.event-system {
    /* background-color: rgba(33, 147, 243, 0.4); */
    background-color: #4b4b4bcc;
}

.container-events ul li.event-info {
    /* background-color: rgba(33, 147, 243, 0.4); */
    background-color: #4b4b4bcc;
}

.container-events ul li.event-success {
    /* background-color: rgba(40, 167, 69, 0.4); */
    background-color: #61d41feb;
}

.container-events ul li.event-error {
    /* background-color: rgba(220, 53, 69, 0.6); */
    background-color: #dc3545;
}

.container-events ul li.event-alarm {
    /* background-color: rgba(220, 53, 69, 0.4); */
    background-color: #ff8a00;
}

.container-events ul li.event-warning {
    /* background-color: rgba(255, 215, 105, 0.4); */
    background-color: #ffcb00
}

.container-events ul li.event-admin {
    /* background-color: rgba(33, 147, 243, 0.4); */
    background-color: #7b00ffbd;
}

.container-events ul li.event-undefined {
    /* background-color: rgba(255, 255, 255, 0.4); */
    background-color: #4b4b4bcc;
}

.container-events ul li:not(:first-child) {
    margin-top: 60px;
}

.container-events ul li>span {
    width: 2px;
    height: 100%;
    background: #fff;
    left: -30px;
    top: 0;
    position: absolute;
}

.container-events ul li>span:before,
.container-events ul li>span:after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    background: #002F67;
    left: -5px;
    top: 0;
}

.container-events ul li span:after {
    top: 100%;
}

.container-events ul li>div {
    margin-left: 10px;
}

.container-events div .type {
    font-weight: 1;
    font-size: 12px;
    margin-left: -10px;
    margin-bottom: -5px;
}

.container-events div .info {
    margin-top: 4px;
    margin-left: -10px;
    text-align: left;
    font-size: 16px;
}

.container-events div>div {
    margin-top: 5px;
}

.container-events span.number {
    height: 100%;
}

.container-events span.number span {
    position: absolute;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    left: -100px;
    top: -4px;
    width: 100px;
}

.container-events span.date span {
    position: absolute;
    text-align: center;
    font-size: 12px;
    left: -100px;
    top: 20px;
    width: 100px;
}

.container-events div .title {
    margin-top: -5px;
    margin-left: -10px;
    text-align: left;
    font-weight: bolder;
    font-size: 18px;
}

.contain er-events span.number span:first-child {
    top: 0;
}

.container-events span.number span:last-child {
    top: 100%;
}

/* css/account/subpage_laboratory.css */
/**************************************************************************************************
    Waterly laboratory analysis workbench
**************************************************************************************************/

.main-container-subpage:has(> .laboratory-workbench) {
    position: fixed !important;
    inset: 56px 0 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    background:
        radial-gradient(circle at 8% 0%, rgba(0, 188, 212, 0.11), transparent 30%),
        radial-gradient(circle at 96% 8%, rgba(54, 115, 214, 0.10), transparent 28%),
        #071017;
}

.laboratory-workbench {
    position: relative;
    display: block;
    width: 100%;
    min-height: calc(100dvh - 56px);
    color: #dce7ed;
    font-family: "Open Sans", sans-serif;
}

.laboratory-shell {
    width: min(100%, 1780px);
    margin: 0 auto;
    padding: clamp(12px, 1.7vw, 26px);
}

.laboratory-shell button,
.laboratory-shell input,
.laboratory-shell select {
    font-family: inherit;
}

.laboratory-hero,
.laboratory-command-deck,
.laboratory-navigation,
.laboratory-analysis-tools,
.laboratory-parameter-section,
.laboratory-snapshot-card {
    border: 1px solid rgba(133, 179, 204, 0.13);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.laboratory-hero {
    position: relative;
    display: flex;
    min-height: 128px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    overflow: hidden;
    border-radius: 22px 22px 8px 8px;
    background:
        linear-gradient(112deg, rgba(12, 40, 51, 0.96), rgba(7, 22, 31, 0.98)),
        #0b1922;
}

.laboratory-hero::before {
    position: absolute;
    top: -90px;
    left: 18%;
    width: 350px;
    height: 240px;
    border-radius: 50%;
    background: rgba(29, 190, 202, 0.10);
    content: "";
    filter: blur(22px);
    pointer-events: none;
}

.laboratory-hero-main,
.laboratory-live-status,
.laboratory-time-control,
.laboratory-primary-actions,
.laboratory-time-heading,
.laboratory-snapshot-card,
.laboratory-section-heading,
.laboratory-error-heading {
    display: flex;
    align-items: center;
}

.laboratory-hero-main {
    position: relative;
    min-width: 0;
    gap: 17px;
}

.laboratory-hero-visual {
    position: relative;
    display: grid;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    place-items: center;
    border: 1px solid rgba(72, 221, 223, 0.24);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(27, 190, 196, 0.18), rgba(54, 115, 214, 0.08));
    color: #64e4df;
    font-size: 28px;
}

.laboratory-hero-visual::after {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(100, 228, 223, 0.15);
    border-radius: 16px;
    content: "";
}

.laboratory-hero-visual span,
.laboratory-hero-visual b {
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(100, 228, 223, 0.15);
    border-radius: 25px;
    animation: laboratory-orbit 7s linear infinite;
}

.laboratory-hero-visual b {
    inset: -11px;
    border-style: dashed;
    opacity: 0.45;
    animation-direction: reverse;
    animation-duration: 12s;
}

@keyframes laboratory-orbit { to { transform: rotate(360deg); } }

.laboratory-hero-copy {
    min-width: 0;
}

.laboratory-eyebrow,
.laboratory-navigation-copy span,
.laboratory-time-heading span,
.laboratory-section-heading span,
.laboratory-table-heading span,
.laboratory-error-heading span,
.laboratory-snapshot-card span {
    display: block;
    color: #7891a1;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.laboratory-hero-copy h1 {
    margin: 4px 0 5px;
    color: #fff;
    font-size: clamp(22px, 2.3vw, 34px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.laboratory-hero-copy p {
    max-width: 780px;
    margin: 0;
    color: #8ba2b0;
    font-size: 12px;
    line-height: 1.55;
}

.laboratory-live-status {
    position: relative;
    min-width: 245px;
    flex: 0 0 auto;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid rgba(102, 224, 190, 0.16);
    border-radius: 15px;
    background: rgba(8, 28, 35, 0.72);
}

.laboratory-live-status > i {
    color: #667781;
    font-size: 9px;
}

.laboratory-live-status.live > i {
    color: #32d39b;
    animation: laboratory-live-pulse 1.8s ease-in-out infinite;
}

.laboratory-live-status.stale > i { color: #ffc857; }
.laboratory-live-status.offline > i { color: #ff6574; }

@keyframes laboratory-live-pulse {
    50% { opacity: 0.45; filter: drop-shadow(0 0 6px #32d39b); }
}

.laboratory-live-status span,
.laboratory-live-status strong,
.laboratory-live-status small {
    display: block;
}

.laboratory-live-status span {
    color: #748894;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.laboratory-live-status strong {
    margin-top: 2px;
    color: #f2f8fa;
    font-size: 12px;
}

.laboratory-live-status small {
    margin-top: 2px;
    color: #687984;
    font-size: 8px;
}

.laboratory-command-deck {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 8px;
    padding: 13px 15px;
    border-radius: 8px 8px 17px 17px;
    background: rgba(10, 27, 36, 0.93);
}

.laboratory-time-control { min-width: 0; gap: 17px; }
.laboratory-time-heading { gap: 10px; }

.laboratory-time-heading > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: rgba(51, 196, 203, 0.09);
    color: #57d7d5;
}

.laboratory-time-heading strong {
    display: block;
    margin-top: 2px;
    color: #edf6f8;
    font-size: 10px;
}

.laboratory-period-navigator {
    display: flex;
    height: 38px;
    align-items: stretch;
    padding: 2px;
    border: 1px solid rgba(126, 164, 183, 0.16);
    border-radius: 11px;
    background: rgba(2, 12, 18, 0.62);
}

.laboratory-period-navigator .period-selector {
    width: auto;
    min-width: 148px;
    height: 32px;
    padding: 4px 30px 4px 11px;
    border: 0;
    border-right: 1px solid rgba(126, 164, 183, 0.12);
    border-left: 1px solid rgba(126, 164, 183, 0.12);
    border-radius: 0;
    outline: 0;
    background: #0b1b24;
    color: #dcebef;
    font-size: 10px;
    font-weight: 700;
}

.laboratory-icon-button,
.laboratory-action-button,
.laboratory-view-switch button,
.laboratory-search-clear,
.laboratory-empty-filter button {
    border: 0;
    outline: 0;
    cursor: pointer;
}

.laboratory-icon-button {
    width: 34px;
    padding: 0;
    background: transparent;
    color: #78909c;
    font-size: 10px;
    transition: 160ms ease;
}

.laboratory-icon-button:hover:not([disabled]) {
    border-radius: 8px;
    background: rgba(73, 209, 211, 0.09);
    color: #62dddc;
}

.laboratory-icon-button[disabled] { cursor: default; opacity: .25; }

.laboratory-primary-actions { flex: 0 0 auto; gap: 8px; }

.laboratory-action-button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(126, 164, 183, 0.16);
    border-radius: 10px;
    background: rgba(17, 39, 49, 0.9);
    color: #a9bbc4;
    font-size: 10px;
    font-weight: 700;
    transition: 180ms ease;
}

.laboratory-action-button:hover {
    transform: translateY(-1px);
    border-color: rgba(90, 220, 218, 0.28);
    color: #eef9fa;
}

.laboratory-action-primary {
    border-color: rgba(62, 210, 208, 0.23);
    background: linear-gradient(135deg, #168d95, #1b6ca2);
    color: #fff;
}

.laboratory-snapshot {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.laboratory-snapshot-card {
    position: relative;
    min-height: 91px;
    gap: 12px;
    padding: 14px;
    overflow: hidden;
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(14, 37, 47, .96), rgba(9, 25, 33, .96));
}

.laboratory-snapshot-card::after {
    position: absolute;
    right: -24px;
    bottom: -38px;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background: var(--laboratory-accent, #4dd6d4);
    content: "";
    filter: blur(38px);
    opacity: .11;
}

.laboratory-snapshot-icon {
    display: grid;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--laboratory-accent, #4dd6d4) 12%, transparent);
    color: var(--laboratory-accent, #4dd6d4);
    font-size: 15px;
}

.laboratory-snapshot-card.temperature { --laboratory-accent: #ffb85c; }
.laboratory-snapshot-card.chemistry { --laboratory-accent: #b58bff; }
.laboratory-snapshot-card.oxygen { --laboratory-accent: #70b7ff; }
.laboratory-snapshot-card.sensors { --laboratory-accent: #64df9e; }

.laboratory-snapshot-card strong,
.laboratory-snapshot-card small {
    display: block;
}

.laboratory-snapshot-card strong {
    margin-top: 2px;
    color: #fff;
    font-size: 18px;
    letter-spacing: -.025em;
    white-space: nowrap;
}

.laboratory-snapshot-card small {
    margin-top: 2px;
    overflow: hidden;
    color: #697f8b;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.laboratory-analysis-launcher {
    position: relative;
    display: flex;
    min-height: 98px;
    align-items: center;
    gap: 15px;
    margin-top: 12px;
    padding: 15px 17px;
    overflow: hidden;
    border: 1px solid rgba(104, 214, 220, .17);
    border-radius: 17px;
    background:
        radial-gradient(circle at 75% -50%, rgba(74, 220, 215, .16), transparent 38%),
        linear-gradient(135deg, rgba(12, 38, 48, .98), rgba(7, 22, 30, .99));
    box-shadow: 0 18px 46px rgba(0, 0, 0, .19);
}

.laboratory-analysis-launcher-icon {
    position: relative;
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border: 1px solid rgba(94, 227, 222, .22);
    border-radius: 14px;
    background: rgba(75, 215, 212, .09);
    color: #65e1dd;
    font-size: 17px;
}

.laboratory-analysis-launcher-icon span {
    position: absolute;
    inset: -5px;
    border: 1px dashed rgba(94, 227, 222, .12);
    border-radius: 18px;
}

.laboratory-analysis-launcher-copy {
    min-width: 0;
    flex: 1;
}

.laboratory-analysis-launcher-copy > span {
    display: block;
    color: #6f8995;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.laboratory-analysis-launcher-copy h2 {
    margin: 2px 0;
    color: #f2f9fa;
    font-size: 14px;
    font-weight: 750;
}

.laboratory-analysis-launcher-copy p {
    margin: 0;
    color: #70858f;
    font-size: 8px;
}

.laboratory-analysis-open {
    display: inline-flex;
    min-height: 38px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(87, 223, 219, .24);
    border-radius: 10px;
    background: linear-gradient(135deg, #168d95, #1b6ca2);
    color: #fff;
    cursor: pointer;
    font-size: 9px;
    font-weight: 750;
    transition: 170ms ease;
}

.laboratory-analysis-open:hover { transform: translateY(-1px); filter: brightness(1.08); }

.laboratory-analysis-window[hidden] { display: none !important; }

.laboratory-analysis-window {
    position: fixed;
    z-index: 10050;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% -8%, rgba(36, 175, 186, .15), transparent 30%),
        #050e14;
    animation: laboratory-analysis-window-enter .24s ease both;
}

@keyframes laboratory-analysis-window-enter {
    from { opacity: 0; transform: scale(.985); }
}

body.laboratory-analysis-window-open { overflow: hidden !important; }

.laboratory-analysis-window-bar {
    display: flex;
    min-height: 54px;
    flex: 0 0 54px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 14px;
    border-bottom: 1px solid rgba(123, 167, 185, .13);
    background: rgba(7, 20, 27, .96);
}

.laboratory-analysis-window-bar > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.laboratory-analysis-window-bar > div > i { color: #61ddda; }
.laboratory-analysis-window-bar span { color: #728995; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.laboratory-analysis-window-bar strong { overflow: hidden; color: #e8f2f4; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.laboratory-analysis-window-close {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid rgba(128, 163, 181, .15);
    border-radius: 9px;
    background: rgba(16, 36, 45, .8);
    color: #a4b6be;
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
}

.laboratory-analysis-window-close:hover { border-color: rgba(255, 113, 132, .25); color: #ff8997; }

.laboratory-explorer {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid rgba(104, 214, 220, .17);
    border-radius: 18px;
    background:
        radial-gradient(circle at 78% -20%, rgba(53, 187, 203, .10), transparent 34%),
        linear-gradient(145deg, rgba(11, 31, 41, .98), rgba(5, 17, 24, .99));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .26);
}

.laboratory-analysis-window > .laboratory-explorer {
    width: calc(100% - 24px);
    min-height: 0;
    flex: 1;
    margin: 12px;
}

.laboratory-analysis-window .laboratory-explorer-body {
    height: calc(100% - 82px);
    min-height: 0;
}

.laboratory-analysis-window .laboratory-series-panel,
.laboratory-analysis-window .laboratory-explorer-plot {
    min-height: 0;
}

.laboratory-analysis-window .laboratory-explorer-canvas {
    min-height: 260px;
}

.laboratory-explorer-header {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 17px;
    border-bottom: 1px solid rgba(126, 164, 183, .11);
}

.laboratory-explorer-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.laboratory-explorer-icon {
    position: relative;
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border: 1px solid rgba(88, 224, 220, .20);
    border-radius: 13px;
    background: rgba(64, 210, 210, .09);
    color: #63e1de;
}

.laboratory-explorer-icon span {
    position: absolute;
    inset: -4px;
    border: 1px dashed rgba(88, 224, 220, .14);
    border-radius: 16px;
}

.laboratory-explorer-heading > div:last-child > span,
.laboratory-series-panel-heading span {
    display: block;
    color: #718995;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.laboratory-explorer-heading h2 {
    margin: 1px 0;
    color: #f5fafb;
    font-size: 17px;
    font-weight: 750;
}

.laboratory-explorer-heading p {
    margin: 0;
    color: #6c828e;
    font-size: 9px;
}

.laboratory-explorer-modes {
    display: flex;
    flex: 0 0 auto;
    padding: 3px;
    border: 1px solid rgba(126, 164, 183, .13);
    border-radius: 11px;
    background: rgba(3, 13, 19, .7);
}

.laboratory-explorer-modes button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #677e89;
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
}

.laboratory-explorer-modes button.active {
    background: rgba(72, 211, 208, .11);
    color: #70e4e0;
    box-shadow: inset 0 0 0 1px rgba(95, 224, 220, .08);
}

.laboratory-explorer-body {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    min-height: 500px;
}

.laboratory-series-panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 12px;
    border-right: 1px solid rgba(126, 164, 183, .11);
    background: rgba(4, 15, 21, .46);
}

.laboratory-series-panel-heading {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.laboratory-series-panel-heading strong {
    display: block;
    margin-top: 2px;
    color: #dce9ed;
    font-size: 10px;
}

.laboratory-series-clear {
    padding: 5px 7px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #63808b;
    cursor: pointer;
    font-size: 8px;
    font-weight: 700;
}

.laboratory-series-clear:hover { background: rgba(255, 101, 116, .08); color: #ff8692; }

.laboratory-series-search {
    display: flex;
    height: 34px;
    align-items: center;
    gap: 8px;
    margin: 8px 0 9px;
    padding: 0 10px;
    border: 1px solid rgba(126, 164, 183, .12);
    border-radius: 9px;
    background: rgba(3, 12, 17, .72);
}

.laboratory-series-search i { color: #5a7380; font-size: 9px; }

.laboratory-series-search input {
    min-width: 0;
    height: 100%;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #dce9ed;
    font-size: 9px;
}

.laboratory-series-list {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(83, 124, 142, .36) transparent;
}

.laboratory-series-option {
    display: grid;
    min-height: 43px;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #8297a1;
    cursor: pointer;
    text-align: left;
    transition: 150ms ease;
}

.laboratory-series-option:hover {
    border-color: rgba(126, 164, 183, .11);
    background: rgba(83, 137, 155, .055);
    color: #d7e5e9;
}

.laboratory-series-option.is-selected {
    border-color: color-mix(in srgb, var(--series-color) 28%, transparent);
    background: color-mix(in srgb, var(--series-color) 9%, transparent);
    color: #f3f9fa;
}

.laboratory-series-option > i {
    width: 7px;
    height: 7px;
    border: 2px solid var(--series-color);
    border-radius: 50%;
    background: transparent;
}

.laboratory-series-option.is-selected > i {
    background: var(--series-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--series-color) 70%, transparent);
}

.laboratory-series-option span,
.laboratory-series-option strong,
.laboratory-series-option small {
    display: block;
    min-width: 0;
}

.laboratory-series-option strong {
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.laboratory-series-option small {
    margin-top: 2px;
    overflow: hidden;
    color: #5e7580;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.laboratory-series-option em {
    color: var(--series-color);
    font-size: 8px;
    font-style: normal;
}

.laboratory-series-limit {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 9px 4px 0;
    color: #566e79;
    font-size: 7px;
    line-height: 1.4;
}

.laboratory-series-limit i { margin-top: 1px; color: #4eaaa9; }
.laboratory-series-limit.is-warning { color: #ff9d75; animation: laboratory-limit-shake .32s ease 2; }
.laboratory-series-limit.is-warning i { color: #ff8e69; }

@keyframes laboratory-limit-shake {
    35% { transform: translateX(3px); }
    70% { transform: translateX(-3px); }
}

.laboratory-explorer-plot {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.laboratory-explorer-toolbar {
    display: flex;
    min-height: 53px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(126, 164, 183, .08);
}

.laboratory-explorer-legend {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.laboratory-explorer-legend::-webkit-scrollbar { display: none; }

.laboratory-explorer-legend-item {
    display: inline-flex;
    min-width: max-content;
    align-items: center;
    gap: 6px;
    color: #8398a2;
    font-size: 8px;
    font-weight: 700;
}

.laboratory-explorer-legend-item i {
    width: 14px;
    height: 3px;
    border-radius: 999px;
    background: var(--series-color);
    box-shadow: 0 0 7px color-mix(in srgb, var(--series-color) 48%, transparent);
}

.laboratory-explorer-summary {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.laboratory-explorer-summary span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #617783;
    font-size: 8px;
}

.laboratory-explorer-summary i { color: #4ccfcd; }
.laboratory-explorer-summary strong { color: #d9e8eb; }

.laboratory-explorer-canvas {
    position: relative;
    min-height: 390px;
    flex: 1;
    padding: 12px 14px 4px;
}

.laboratory-explorer-canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

.laboratory-explorer-empty {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    background: radial-gradient(circle, rgba(21, 62, 73, .16), transparent 48%);
    color: #617985;
    text-align: center;
}

.laboratory-explorer-empty.is-visible { display: flex; }
.laboratory-explorer-empty i { margin-bottom: 4px; color: #4ccfcd; font-size: 31px; opacity: .8; }
.laboratory-explorer-empty strong { color: #dce9ed; font-size: 12px; }
.laboratory-explorer-empty span { font-size: 8px; }

.laboratory-explorer-footer {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 14px;
    border-top: 1px solid rgba(126, 164, 183, .08);
    color: #5a717d;
    font-size: 7px;
}

.laboratory-explorer-footer i { margin-right: 5px; color: #54b8b7; }

.laboratory-statistic .laboratory-analyze {
    display: inline-flex;
    height: 28px;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border: 1px solid rgba(128, 163, 181, .16);
    border-radius: 9px;
    background: rgba(6, 19, 26, .86);
    color: #6e858f;
    cursor: pointer;
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
    transition: 160ms ease;
}

.laboratory-statistic .laboratory-analyze:hover {
    border-color: rgba(84, 218, 215, .32);
    color: #b9f5f2;
    background: rgba(22, 62, 70, .82);
}

.laboratory-statistic .laboratory-analyze.is-active { border-color: rgba(84, 218, 215, .24); color: #61ddda; }

.laboratory-navigation {
    display: flex;
    min-height: 62px;
    align-items: center;
    gap: 18px;
    margin-top: 12px;
    padding: 8px 10px 8px 17px;
    border-radius: 16px 16px 7px 7px;
    background: rgba(10, 27, 36, .95);
}

.laboratory-navigation-copy {
    width: 130px;
    flex: 0 0 130px;
}

.laboratory-navigation-copy strong {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: 12px;
}

.laboratory-tabs {
    display: flex;
    min-width: 0;
    flex: 1;
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: none;
}

.laboratory-tabs::-webkit-scrollbar { display: none; }

.laboratory-tab {
    position: relative;
    display: inline-flex;
    min-width: max-content;
    min-height: 43px;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #7b909b;
    cursor: pointer;
    font-size: 9px;
    font-weight: 750;
    transition: 180ms ease;
}

.laboratory-tab::after {
    position: absolute;
    right: 12px;
    bottom: 4px;
    left: 12px;
    height: 2px;
    border-radius: 999px;
    background: #4dd6d4;
    content: "";
    opacity: 0;
    transform: scaleX(.25);
    transition: 180ms ease;
}

.laboratory-tab:hover { background: rgba(72, 208, 208, .055); color: #c4d5db; }
.laboratory-tab.active { background: rgba(72, 208, 208, .09); color: #eaf9fa; }
.laboratory-tab.active::after { opacity: 1; transform: scaleX(1); }
.laboratory-tab.active i { color: #5ee0dd; }

.laboratory-favorites-count {
    display: grid;
    min-width: 17px;
    height: 17px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 200, 87, .13);
    color: #ffc857;
    font-size: 8px;
}

.laboratory-analysis-tools {
    position: sticky;
    z-index: 8;
    top: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: rgba(7, 20, 28, .94);
    backdrop-filter: blur(16px);
}

.laboratory-search {
    position: relative;
    display: flex;
    height: 37px;
    min-width: 220px;
    max-width: 520px;
    flex: 1;
    align-items: center;
    margin: 0;
    border: 1px solid rgba(126, 164, 183, .14);
    border-radius: 10px;
    background: rgba(4, 14, 20, .72);
}

.laboratory-search > i {
    margin-left: 13px;
    color: #66808d;
    font-size: 10px;
}

.laboratory-search-input {
    min-width: 0;
    height: 100%;
    flex: 1;
    padding: 0 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #eef6f8;
    font-size: 10px;
}

.laboratory-search-input::placeholder { color: #536975; }

.laboratory-search-clear {
    width: 30px;
    align-self: stretch;
    background: transparent;
    color: #617582;
    opacity: 0;
    pointer-events: none;
}

.laboratory-search.has-value .laboratory-search-clear { opacity: 1; pointer-events: auto; }

.laboratory-view-switch {
    display: flex;
    height: 37px;
    padding: 3px;
    border: 1px solid rgba(126, 164, 183, .14);
    border-radius: 10px;
    background: rgba(4, 14, 20, .72);
}

.laboratory-view-switch button {
    width: 31px;
    border-radius: 7px;
    background: transparent;
    color: #5e7480;
    font-size: 10px;
}

.laboratory-view-switch button.active {
    background: rgba(74, 210, 209, .11);
    color: #61dcda;
}

.laboratory-result-count {
    display: flex;
    min-width: 80px;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    color: #738995;
    font-size: 9px;
}

.laboratory-result-count strong { color: #d9e7eb; font-size: 13px; }

.laboratory-analysis-stage { padding: 13px 0 40px; }

.laboratory-parameter-section {
    margin-bottom: 10px;
    padding: 14px;
    border-radius: 17px;
    background: linear-gradient(150deg, rgba(11, 29, 38, .95), rgba(7, 20, 27, .97));
    animation: laboratory-section-enter .3s ease both;
}

@keyframes laboratory-section-enter {
    from { opacity: 0; transform: translateY(7px); }
}

.laboratory-parameter-section[hidden],
.laboratory-statistic[hidden] { display: none !important; }

.laboratory-section-heading {
    gap: 12px;
    margin-bottom: 12px;
    padding: 2px 2px 10px;
    border-bottom: 1px solid rgba(128, 163, 181, .09);
}

.laboratory-section-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(77, 214, 212, .15);
    border-radius: 13px;
    background: rgba(77, 214, 212, .08);
    color: #57dbd8;
}

.laboratory-section-icon.chemistry { border-color: rgba(181,139,255,.18); background: rgba(181,139,255,.08); color: #b58bff; }
.laboratory-section-icon.biology { border-color: rgba(80,210,144,.18); background: rgba(80,210,144,.08); color: #59d99a; }
.laboratory-section-icon.environment { border-color: rgba(255,184,92,.18); background: rgba(255,184,92,.08); color: #ffb85c; }
.laboratory-section-icon.technical { border-color: rgba(112,183,255,.18); background: rgba(112,183,255,.08); color: #70b7ff; }

.laboratory-section-heading h2 {
    margin: 1px 0 1px;
    color: #f5fafb;
    font-size: 15px;
    font-weight: 700;
}

.laboratory-section-heading p {
    margin: 0;
    color: #6e828d;
    font-size: 9px;
}

.laboratory-chart-grid,
.laboratory-multi-sensor-errors {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.laboratory-multi-sensors {
    display: grid !important;
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.laboratory-multi-sensor-errors {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
}

.laboratory-statistic {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    border-radius: 14px;
    transition: transform 180ms ease, opacity 180ms ease;
}

.laboratory-statistic:hover { z-index: 2; transform: translateY(-2px); }

.laboratory-statistic .laboratory-pin {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(128, 163, 181, .16);
    border-radius: 9px;
    background: rgba(6, 19, 26, .86);
    color: #647986;
    cursor: pointer;
    font-size: 9px;
    transition: 160ms ease;
}

.laboratory-statistic .laboratory-pin:hover {
    border-color: rgba(255, 200, 87, .26);
    color: #ffd879;
    background: rgba(67, 52, 18, .62);
}

.laboratory-statistic .laboratory-pin.is-pinned {
    border-color: rgba(255, 200, 87, .25);
    color: #ffc857;
}

.laboratory-statistic .laboratory-widget-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.laboratory-statistic.diagnostic-statistic-widget .widget-parameter-with-chart {
    height: 410px;
}

.laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-header {
    min-height: 82px;
}

.laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-footer {
    min-height: 45px;
    padding-top: 6px;
    padding-bottom: 7px;
}

.laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-stage {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--diagnostic-chart-color, #55ddd8) 4%, transparent), transparent 46%),
        rgba(7, 12, 16, .34);
}

.laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-title > span {
    color: color-mix(in srgb, var(--diagnostic-chart-color, #55ddd8) 62%, #73838d);
}

.laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-expand {
    border-color: color-mix(in srgb, var(--diagnostic-chart-color, #55ddd8) 24%, transparent);
    color: color-mix(in srgb, var(--diagnostic-chart-color, #55ddd8) 72%, #cce5ee);
    background: color-mix(in srgb, var(--diagnostic-chart-color, #55ddd8) 8%, transparent);
}

.laboratory-workbench.is-compact .laboratory-chart-grid,
.laboratory-workbench.is-compact .laboratory-multi-sensor-errors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.laboratory-workbench.is-compact .laboratory-statistic {
    font-size: .88em;
}

.laboratory-workbench.is-compact .laboratory-parameter-section {
    padding: 10px;
}

.laboratory-table-card,
.laboratory-error-zone {
    overflow: hidden;
    border: 1px solid rgba(128, 163, 181, .12);
    border-radius: 14px;
    background: rgba(5, 17, 24, .64);
}

.laboratory-table-heading,
.laboratory-error-heading {
    display: flex;
    min-height: 55px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(128, 163, 181, .1);
}

.laboratory-table-heading strong,
.laboratory-error-heading strong {
    display: block;
    margin-top: 2px;
    color: #edf6f8;
    font-size: 11px;
}

.laboratory-table-hint {
    color: #657a86 !important;
    font-size: 8px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.laboratory-table-hint i { margin-right: 5px; color: #51d3d1; }
.laboratory-table-scroll { max-height: 430px; overflow: auto; }

.laboratory-table-card .widget-table {
    margin: 0;
    background: transparent;
    color: #bdcdd4;
    font-size: 10px;
}

.laboratory-table-card .widget-table thead th {
    position: sticky;
    z-index: 1;
    top: 0;
    padding: 10px 12px;
    border: 0;
    background: #0c202a;
    color: #708793;
    font-size: 8px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.laboratory-table-card .widget-table tbody td {
    padding: 8px 12px;
    border-top-color: rgba(128, 163, 181, .08);
}

.laboratory-table-card .widget-table tbody tr:hover {
    background: rgba(73, 208, 208, .06);
    color: #fff;
}

.laboratory-error-zone { margin-top: 10px; padding-bottom: 10px; }
.laboratory-error-heading { justify-content: flex-start; border-bottom: 0; }

.laboratory-workbench.is-favorites-mode .laboratory-table-card,
.laboratory-workbench.is-favorites-mode .laboratory-error-heading {
    display: none;
}

.laboratory-workbench.is-favorites-mode .laboratory-error-zone {
    margin-top: 0;
    border: 0;
    background: transparent;
}

.laboratory-error-heading > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: rgba(112, 183, 255, .08);
    color: #70b7ff;
}

.laboratory-error-grid { padding: 0 10px; }

.water-outside-alarm {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 12px 15px;
    border: 1px solid rgba(255, 101, 116, .24);
    border-radius: 13px;
    background: rgba(255, 101, 116, .07);
}

.water-outside-alarm-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: rgba(255, 101, 116, .12);
    color: #ff7886;
}

.water-outside-alarm strong,
.water-outside-alarm label { display: block; margin: 0; }
.water-outside-alarm strong { color: #ff9ba5; font-size: 11px; }
.water-outside-alarm label { margin-top: 2px; color: #a97980; font-size: 9px; }

.laboratory-empty-filter {
    min-height: 280px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: #617783;
    text-align: center;
}

.laboratory-empty-filter:not([hidden]) { display: flex; }
.laboratory-empty-filter > i { margin-bottom: 4px; color: #4ccecc; font-size: 30px; }
.laboratory-empty-filter strong { color: #e5f0f3; font-size: 14px; }
.laboratory-empty-filter span { font-size: 9px; }

.laboratory-empty-filter button {
    margin-top: 7px;
    padding: 8px 13px;
    border-radius: 9px;
    background: rgba(77, 214, 212, .11);
    color: #61dcda;
    font-size: 9px;
    font-weight: 700;
}

.laboratory-sensor-instance {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(128, 163, 181, .10);
    border-radius: 16px;
    background:
        radial-gradient(circle at 0 0, rgba(85, 221, 216, .055), transparent 27%),
        rgba(7, 22, 29, .62);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

.laboratory-sensor-instance-header {
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 13px;
    border-bottom: 1px solid rgba(128, 163, 181, .08);
    line-height: 1.35;
}

.laboratory-sensor-instance-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.laboratory-sensor-instance-identity > div { min-width: 0; }

.laboratory-sensor-instance-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid rgba(85, 221, 216, .18);
    border-radius: 11px;
    background: rgba(85, 221, 216, .08);
    color: #61dcda;
    font-size: 14px;
}

.laboratory-sensor-instance-name {
    overflow: hidden;
    color: #e7f1f3;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.laboratory-sensor-instance-desc {
    overflow: hidden;
    margin-top: 2px;
    color: #728792;
    font-size: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.laboratory-sensor-slot {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid rgba(112, 169, 255, .16);
    border-radius: 9px;
    background: rgba(112, 169, 255, .07);
    color: #82b6e8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.laboratory-sensor-parameters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
}

.laboratory-sensor-parameters:has(> .laboratory-statistic:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.laboratory-sensor-instance .laboratory-statistic.diagnostic-statistic-widget .widget-parameter-with-chart {
    height: 392px;
}

.laboratory-multi-sensor-errors .laboratory-sensor-instance {
    height: 100%;
}

.laboratory-multi-sensor-errors .laboratory-sensor-parameters {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1199px) {
    .laboratory-snapshot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .laboratory-workbench.is-compact .laboratory-chart-grid,
    .laboratory-workbench.is-compact .laboratory-multi-sensor-errors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .laboratory-sensor-parameters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
    .laboratory-shell { padding: 9px; }
    .laboratory-hero { align-items: flex-start; flex-direction: column; }
    .laboratory-live-status { width: 100%; min-width: 0; }
    .laboratory-command-deck { align-items: stretch; flex-direction: column; }
    .laboratory-time-control { align-items: stretch; justify-content: space-between; }
    .laboratory-primary-actions { justify-content: flex-end; }
    .laboratory-navigation { align-items: flex-start; flex-direction: column; gap: 7px; }
    .laboratory-navigation-copy { width: auto; flex-basis: auto; }
    .laboratory-tabs { width: 100%; }
    .laboratory-chart-grid,
    .laboratory-multi-sensor-errors,
    .laboratory-workbench.is-compact .laboratory-chart-grid,
    .laboratory-workbench.is-compact .laboratory-multi-sensor-errors { grid-template-columns: 1fr; }
    .laboratory-sensor-parameters,
    .laboratory-sensor-parameters:has(> .laboratory-statistic:nth-child(4)) {
        grid-template-columns: minmax(0, 1fr);
    }
    .laboratory-explorer-header { align-items: flex-start; flex-direction: column; }
    .laboratory-explorer-modes { align-self: stretch; }
    .laboratory-explorer-modes button { flex: 1; justify-content: center; }
    .laboratory-explorer-body { grid-template-columns: 1fr; }
    .laboratory-series-panel {
        border-right: 0;
        border-bottom: 1px solid rgba(126, 164, 183, .11);
    }
    .laboratory-series-list {
        display: grid;
        max-height: 143px;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, 43px);
        grid-auto-columns: minmax(165px, 210px);
        overflow-x: auto;
        overflow-y: hidden;
    }
    .laboratory-series-limit { display: none; }
    .laboratory-explorer-canvas { min-height: 350px; }
    .laboratory-analysis-window > .laboratory-explorer {
        overflow-y: auto;
    }
    .laboratory-analysis-window .laboratory-explorer-body {
        height: auto;
    }
}

@media (max-width: 590px) {
    .laboratory-hero { min-height: 0; padding: 17px 15px; }
    .laboratory-hero-visual { width: 54px; height: 54px; flex-basis: 54px; border-radius: 17px; font-size: 21px; }
    .laboratory-hero-copy p { display: none; }
    .laboratory-snapshot { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
    .laboratory-snapshot-card { min-width: 210px; scroll-snap-align: start; }
    .laboratory-time-control { flex-direction: column; }
    .laboratory-time-heading { display: none; }
    .laboratory-period-navigator .period-selector { min-width: 0; flex: 1; }
    .laboratory-primary-actions .laboratory-action-button { flex: 1; justify-content: center; }
    .laboratory-analysis-tools { flex-wrap: wrap; }
    .laboratory-search { width: 100%; max-width: none; flex-basis: 100%; }
    .laboratory-result-count { margin-left: auto; }
    .laboratory-section-heading p,
    .laboratory-table-hint { display: none; }
    .laboratory-parameter-section { padding: 10px; }
    .laboratory-analysis-launcher { align-items: flex-start; flex-wrap: wrap; }
    .laboratory-analysis-launcher-copy { width: calc(100% - 66px); flex-basis: calc(100% - 66px); }
    .laboratory-analysis-launcher-copy p { display: none; }
    .laboratory-analysis-open { width: 100%; justify-content: center; }
    .laboratory-analysis-window-bar { padding-right: 9px; padding-left: 9px; }
    .laboratory-analysis-window-close span { display: none; }
    .laboratory-analysis-window > .laboratory-explorer { width: calc(100% - 12px); margin: 6px; }
    .laboratory-explorer { border-radius: 15px; }
    .laboratory-explorer-heading p { display: none; }
    .laboratory-explorer-heading h2 { font-size: 14px; }
    .laboratory-explorer-modes button span { display: none; }
    .laboratory-explorer-toolbar { align-items: flex-start; flex-direction: column; }
    .laboratory-explorer-summary { align-self: flex-end; }
    .laboratory-explorer-canvas { min-height: 315px; padding: 8px 5px 2px; }
    .laboratory-explorer-footer { align-items: flex-start; flex-direction: column; }
    .laboratory-statistic.diagnostic-statistic-widget .widget-parameter-with-chart { height: 470px; }
    .laboratory-statistic .diagnostic-chart-footer {
        align-items: stretch;
    }
    .laboratory-statistic .laboratory-widget-actions {
        width: 100%;
        margin-top: 4px;
        margin-left: 0;
    }
    .laboratory-statistic .laboratory-analyze { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .laboratory-hero-visual span,
    .laboratory-hero-visual b,
    .laboratory-live-status.live > i,
    .laboratory-parameter-section { animation: none !important; }
}

/*==================================================================================================
    Auto refresh, dynamic sections and the analytic explorer
==================================================================================================*/

.laboratory-autorefresh { position: relative; }
.laboratory-autorefresh b {
    min-width: 34px;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(126, 164, 183, .12);
    color: #8ea3ad;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: center;
}

.laboratory-autorefresh.is-active {
    border-color: rgba(84, 218, 215, .3);
    color: #a9efec;
}

.laboratory-autorefresh.is-active > i { color: #5ee0dd; }
.laboratory-autorefresh.is-active b { background: rgba(84, 218, 215, .14); color: #7fe3e0; }
.laboratory-autorefresh.is-paused > i,
.laboratory-autorefresh.is-paused b { color: #ffc857; }
.laboratory-autorefresh.is-paused b { background: rgba(255, 200, 87, .13); }
.laboratory-autorefresh:not(.is-active) { opacity: .62; }

.laboratory-live-status.is-updated {
    border-color: rgba(84, 218, 215, .35);
    animation: laboratory-live-flash .9s ease;
}

@keyframes laboratory-live-flash {
    0% { box-shadow: 0 0 0 0 rgba(84, 218, 215, .35); }
    100% { box-shadow: 0 0 0 12px rgba(84, 218, 215, 0); }
}

.laboratory-tab[hidden] { display: none !important; }

.laboratory-tab-count {
    display: grid;
    min-width: 17px;
    height: 17px;
    place-items: center;
    border-radius: 999px;
    background: rgba(126, 164, 183, .1);
    color: #7d939e;
    font-size: 8px;
}

.laboratory-tab.active .laboratory-tab-count { background: rgba(84, 218, 215, .14); color: #7fe3e0; }

/* Multi-sensor blocks are mounted straight into the category grid */
.laboratory-chart-grid > .laboratory-sensor-instance { grid-column: 1 / -1; }
.laboratory-sensor-instance[hidden] { display: none !important; }

/* ---------------------------------------- Series panel ---------------------------------------- */
.laboratory-series-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 12px 9px;
}

.laboratory-series-category {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid rgba(126, 164, 183, .14);
    border-radius: 999px;
    background: rgba(4, 14, 20, .6);
    color: #6f8792;
    cursor: pointer;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: 160ms ease;
}

.laboratory-series-category:hover { border-color: rgba(84, 218, 215, .26); color: #c2d6dc; }
.laboratory-series-category.is-active { border-color: rgba(84, 218, 215, .34); background: rgba(22, 62, 70, .7); color: #8feae7; }
.laboratory-series-category b { color: inherit; opacity: .75; }

/* ------------------------------------- Explorer settings bar ---------------------------------- */
.laboratory-explorer-settings {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(126, 164, 183, .08);
    background: rgba(4, 14, 20, .35);
}

.laboratory-explorer-toggles {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
    gap: 4px;
}

.laboratory-explorer-toggles button,
.laboratory-explorer-zoom button,
.laboratory-explorer-exports button {
    display: inline-flex;
    height: 27px;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid rgba(126, 164, 183, .14);
    border-radius: 9px;
    background: rgba(6, 19, 26, .8);
    color: #708791;
    cursor: pointer;
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
    transition: 160ms ease;
}

.laboratory-explorer-toggles button:hover,
.laboratory-explorer-zoom button:hover,
.laboratory-explorer-exports button:hover {
    border-color: rgba(84, 218, 215, .3);
    background: rgba(22, 62, 70, .78);
    color: #bff3f0;
}

.laboratory-explorer-toggles button.is-active,
.laboratory-explorer-exports button.is-active {
    border-color: rgba(84, 218, 215, .36);
    background: rgba(30, 82, 88, .62);
    color: #8feae7;
}

.laboratory-explorer-window {
    display: inline-flex;
    height: 27px;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid rgba(126, 164, 183, .14);
    border-radius: 9px;
    background: rgba(6, 19, 26, .8);
    color: #708791;
    font-size: 8px;
}

.laboratory-explorer-window.is-disabled { opacity: .45; }
.laboratory-explorer-window i { color: #4ccfcd; }

.laboratory-explorer-window select {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #b8ccd3;
    font-size: 8px;
    font-weight: 700;
    outline: 0;
}

.laboratory-explorer-window select option { background: #0a1b24; color: #cfe2e7; }

.laboratory-explorer-zoom,
.laboratory-explorer-exports { display: inline-flex; gap: 4px; }

/* ---------------------------------------- Canvas + zoom --------------------------------------- */
.laboratory-explorer-canvas { cursor: crosshair; }

.laboratory-explorer-zoom-badge {
    position: absolute;
    z-index: 3;
    top: 16px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 8px;
    border: 1px solid rgba(84, 218, 215, .26);
    border-radius: 999px;
    background: rgba(4, 15, 21, .92);
    color: #8feae7;
    font-size: 8px;
    font-weight: 700;
}

.laboratory-explorer-zoom-badge[hidden] { display: none !important; }

.laboratory-explorer-zoom-badge button {
    padding: 2px 7px;
    border: 0;
    border-radius: 999px;
    background: rgba(84, 218, 215, .16);
    color: #b6f3f0;
    cursor: pointer;
    font-size: 7px;
    font-weight: 800;
}

.laboratory-explorer-legend-item {
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: 160ms ease;
}

.laboratory-explorer-legend-item:hover { color: #d7e8ec; }
.laboratory-explorer-legend-item.is-hidden { opacity: .38; text-decoration: line-through; }

/* ------------------------------------------- Insights ----------------------------------------- */
.laboratory-explorer-insights {
    display: flex;
    max-height: 220px;
    flex-direction: column;
    gap: 8px;
    padding: 9px 14px 11px;
    border-top: 1px solid rgba(126, 164, 183, .08);
    background: rgba(4, 14, 20, .35);
}

.laboratory-explorer-insights.is-hidden { display: none; }
.laboratory-insights-scroll { min-height: 0; overflow: auto; }

.laboratory-insights-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 8px;
}

.laboratory-insights-table thead th {
    position: sticky;
    top: 0;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(126, 164, 183, .12);
    background: rgba(7, 21, 28, .97);
    color: #66808d;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
}

.laboratory-insights-table thead th:first-child { text-align: left; }

.laboratory-insights-table tbody th {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    color: #cfe0e5;
    font-size: 8px;
    font-weight: 700;
    text-align: left;
}

.laboratory-insights-table tbody th i {
    width: 9px;
    height: 3px;
    flex: 0 0 9px;
    border-radius: 999px;
}

.laboratory-insights-table tbody td {
    padding: 5px 6px;
    border-top: 1px solid rgba(126, 164, 183, .06);
    color: #8ba0aa;
    text-align: right;
    white-space: nowrap;
}

.laboratory-insights-table tbody tr { cursor: pointer; transition: 140ms ease; }
.laboratory-insights-table tbody tr:hover { background: rgba(84, 218, 215, .05); }
.laboratory-insights-table tbody tr.is-hidden { opacity: .4; }
.laboratory-insights-table tbody td strong { color: #e6f2f4; }
.laboratory-insights-table tbody td.is-up { color: #5fdca4; }
.laboratory-insights-table tbody td.is-down { color: #ff8997; }

.laboratory-insights-correlation[hidden] { display: none !important; }

.laboratory-insights-correlation-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    color: #66808d;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.laboratory-insights-correlation-heading i { color: #4ccfcd; }
.laboratory-insights-correlation-body { display: flex; flex-wrap: wrap; gap: 5px; }

.laboratory-correlation-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid rgba(126, 164, 183, .14);
    border-radius: 999px;
    background: rgba(6, 19, 26, .8);
    color: #93a8b2;
    font-size: 8px;
    font-weight: 700;
}

.laboratory-correlation-chip i {
    width: 8px;
    height: 3px;
    border-radius: 999px;
}

.laboratory-correlation-chip em { color: #56707d; font-style: normal; }
.laboratory-correlation-chip b { color: #cfe0e5; }
.laboratory-correlation-chip.is-strong { border-color: rgba(95, 220, 164, .3); }
.laboratory-correlation-chip.is-strong b { color: #5fdca4; }
.laboratory-correlation-chip.is-medium { border-color: rgba(255, 200, 87, .24); }
.laboratory-correlation-chip.is-medium b { color: #ffc857; }
.laboratory-correlation-chip.is-weak { opacity: .75; }

/* The explorer window has to fit the settings bar and the statistics without growing */
.laboratory-analysis-window .laboratory-explorer-plot { overflow: hidden; }
.laboratory-analysis-window .laboratory-explorer-canvas { min-height: 200px; }
.laboratory-analysis-window .laboratory-explorer-insights { max-height: 33%; }

@media (max-width: 850px) {
    .laboratory-explorer-settings { align-items: stretch; flex-direction: column; }
    .laboratory-explorer-zoom,
    .laboratory-explorer-exports { justify-content: flex-end; }
    .laboratory-explorer-insights { max-height: 260px; }
    .laboratory-analysis-window .laboratory-explorer-insights { max-height: 260px; }
}

@media (max-width: 590px) {
    .laboratory-explorer-toggles button span { display: none; }
    .laboratory-explorer-toggles button { justify-content: center; flex: 1; }
    .laboratory-explorer-help { display: none; }
    .laboratory-autorefresh span { display: none; }
}


/* css/account/subpages.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           subpages.css
**************************************************************************************************/

/* No data subpage info */

.no-data-subpage {
    font-size: 16px;
    border-top: 1px solid #002F67;
    border-bottom: 1px solid #002F67;
    font-weight: lighter;
    padding: 10px 0 10px 0;
    text-align: center;
    margin-top: 5px;
}


/* Widgets - up page */

.subpage-widget-group {
    background-color: #33373B;
    color: #b4bbc2;
    border-radius: 10px;
    height: 40px;
    line-height: 40px;
    cursor: default;
    font-weight: lighter;
    cursor: pointer;
    font-size: 16px;
}

.subpage-widget-square {
    width: 40px;
    text-align: center;
}

.subpage-widget {
    background-color: #33373B;
    color: #b4bbc2;
    border-radius: 10px;
    height: 40px;
    cursor: default;
    font-weight: lighter;
    cursor: pointer;
    font-size: 16px;
}

.subpage-widget:not( [disabled] ):hover,
.subpage-widget select:hover {
    background-color: #2193f3 !important;
    color: #FFFFFF !important;
    border-color: #2193f3 !important;
}

.widget-data-date {
    cursor: default;
}




/* Widget as like header */
/* Usage for Parametry tryb specjalisty */
.widget-header-tils {
    background-color: #33373B;
    color: #b4bbc2;
    border-radius: 10px;
    cursor: default;
    font-size: 24px;
    font-weight: lighter;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    text-align: center;
}











/* Subpage load error */
.main-container-subpage {
	position: relative;
}

/*
	The account, service and device subpages are sheets over the map. Their first row reuses the
	diagnostic collapse control, giving every full-screen view the same obvious route back.
*/
.main-container-subpage > .subpage-map-toolbar {
	padding-top: 0 !important;
	flex: 0 0 auto;
}

.main-container-subpage.diagnostic-is-collapsing {
	overflow: hidden;
}

.message-box-subpage-error {
	position: absolute;
	inset: 0;
	z-index: 9999;
	min-height: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 32px;
	color: #edf5fa;
	background:
		radial-gradient(circle at 18% 14%, rgba(33, 150, 243, 0.12), transparent 32%),
		radial-gradient(circle at 86% 78%, rgba(32, 201, 151, 0.075), transparent 30%),
		linear-gradient(145deg, rgba(20, 27, 32, 0.985), rgba(10, 15, 19, 0.99));
}

.subpage-error-ambient {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.subpage-error-ambient i {
	position: absolute;
	border: 1px solid rgba(108, 184, 241, 0.12);
	border-radius: 50%;
}

.subpage-error-ambient i:nth-child(1) {
	left: -120px;
	top: -180px;
	width: 420px;
	height: 420px;
}

.subpage-error-ambient i:nth-child(2) {
	right: -90px;
	bottom: -170px;
	width: 360px;
	height: 360px;
}

.subpage-error-ambient i:nth-child(3) {
	left: 50%;
	top: 50%;
	width: 680px;
	height: 680px;
	border-style: dashed;
	opacity: 0.32;
	transform: translate(-50%, -50%);
}

.subpage-error-card {
	position: relative;
	z-index: 1;
	width: min(820px, 100%);
	min-height: 330px;
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid rgba(143, 184, 220, 0.18);
	border-radius: 20px;
	background: linear-gradient(145deg, rgba(31, 40, 47, 0.96), rgba(18, 24, 29, 0.97));
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
	backdrop-filter: blur(14px);
}

.subpage-error-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-right: 1px solid rgba(255, 255, 255, 0.055);
	background:
		linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
		radial-gradient(circle, rgba(33, 150, 243, 0.13), transparent 62%),
		rgba(8, 15, 20, 0.38);
	background-size: 24px 24px, 24px 24px, auto, auto;
}

.subpage-error-signal {
	position: relative;
	width: 112px;
	height: 112px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(101, 184, 255, 0.25);
	border-radius: 50%;
	color: #75bff7;
	background: rgba(33, 150, 243, 0.08);
	font-size: 36px;
	box-shadow: inset 0 0 35px rgba(33, 150, 243, 0.08), 0 0 38px rgba(33, 150, 243, 0.08);
}

.subpage-error-signal span,
.subpage-error-signal b {
	position: absolute;
	inset: -14px;
	border: 1px dashed rgba(101, 184, 255, 0.2);
	border-radius: 50%;
	animation: subpage-error-orbit 13s linear infinite;
}

.subpage-error-signal b {
	inset: -30px;
	border-color: rgba(32, 201, 151, 0.12);
	animation-direction: reverse;
	animation-duration: 19s;
}

.subpage-error-warning {
	position: absolute;
	left: calc(50% + 24px);
	top: calc(50% + 24px);
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid #1d272e;
	border-radius: 50%;
	color: #1b1112;
	background: #ff6978;
	font-size: 12px;
	font-weight: 900;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.42), 0 0 16px rgba(255, 101, 116, 0.22);
}

@keyframes subpage-error-orbit {
	to { transform: rotate(360deg); }
}

.subpage-error-content {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 34px 38px;
}

.subpage-error-eyebrow {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #ff8994;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.subpage-error-eyebrow i {
	font-size: 6px;
	filter: drop-shadow(0 0 5px rgba(255, 101, 116, 0.62));
}

.message-box-subpage-error h1 {
	max-width: 540px;
	margin: 8px 0 0;
	color: #f5f9fb;
	font-size: clamp(23px, 3vw, 34px);
	font-weight: 800;
	line-height: 1.14;
}

.message-box-subpage-error p {
	max-width: 560px;
	margin: 12px 0 0;
	color: #95a4ae;
	font-size: 12px;
	line-height: 1.65;
}

.subpage-error-feedback {
	display: none;
	margin-top: 12px;
	padding: 8px 10px;
	border: 1px solid rgba(255, 101, 116, 0.2);
	border-radius: 8px;
	color: #f4abb2;
	background: rgba(255, 101, 116, 0.065);
	font-size: 10px;
	line-height: 1.4;
}

.subpage-error-feedback.is-visible {
	display: block;
}

.subpage-error-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
}

.subpage-error-action {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid rgba(143, 184, 220, 0.18);
	border-radius: 10px;
	font-size: 11px;
	font-weight: 800;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.subpage-error-action.primary {
	border-color: rgba(101, 184, 255, 0.4);
	color: #ffffff;
	background: linear-gradient(135deg, #218fdc, #1672b8);
	box-shadow: 0 8px 20px rgba(19, 111, 178, 0.24);
}

.subpage-error-action.secondary {
	color: #cbd7de;
	background: rgba(255, 255, 255, 0.05);
}

.subpage-error-action:hover,
.subpage-error-action:focus-visible {
	color: #ffffff;
	border-color: rgba(121, 194, 255, 0.55);
	background: #218fdc;
	outline: none;
	transform: translateY(-1px);
}

.subpage-error-action:disabled {
	cursor: wait;
	opacity: 0.72;
	transform: none;
}

.subpage-error-action.is-loading i {
	animation: subpage-error-retry-spin 0.9s linear infinite;
}

@keyframes subpage-error-retry-spin {
	to { transform: rotate(360deg); }
}

.subpage-error-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 18px;
	padding-top: 13px;
	border-top: 1px solid rgba(255, 255, 255, 0.055);
	color: #71808a;
	font-size: 9px;
}

.subpage-error-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.subpage-error-meta i {
	color: #6595b8;
}

@media (max-width: 680px) {
	.message-box-subpage-error {
		align-items: flex-start;
		min-height: 100%;
		padding: 18px 12px;
		overflow-y: auto;
	}

	.subpage-error-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.subpage-error-visual {
		min-height: 145px;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.055);
	}

	.subpage-error-signal {
		width: 76px;
		height: 76px;
		font-size: 25px;
	}

	.subpage-error-warning {
		left: calc(50% + 16px);
		top: calc(50% + 14px);
		width: 30px;
		height: 30px;
	}

	.subpage-error-content {
		padding: 24px 20px 22px;
	}

	.subpage-error-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.subpage-error-action {
		width: 100%;
	}

	.subpage-error-meta {
		align-items: flex-start;
		flex-direction: column;
		gap: 7px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.subpage-error-signal span,
	.subpage-error-signal b,
	.subpage-error-action.is-loading i {
		animation: none;
	}
}


/* css/account/widget_chart_lab.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           widget_chart_lab.css
	@todo           Zbiorczy wykres parametrów (nowy widget) — style okna i renderu SVG
**************************************************************************************************/

/* Kontener modalu */
.waterly-chart-lab-v2 {
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 260ms ease;
}

.waterly-chart-lab-v2.is-visible { opacity: 1; }
.waterly-chart-lab-v2.is-closing { opacity: 0; }

.waterly-chart-lab-v2.is-bottom-sheet {
    z-index: 12060;
    align-items: flex-end;
    padding: 16px 16px 0;
}

.waterly-chart-lab-v2 .wcl2-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 14, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Okno */
.waterly-chart-lab-v2 .wcl2-window {
    position: relative;
    display: flex;
    overflow: hidden;
    overflow: clip;
    width: 100%;
    max-width: 1600px;
    max-height: 100%;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.9) 100%);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    transform: translateY(8px) scale(0.99);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.waterly-chart-lab-v2.is-visible .wcl2-window { transform: translateY(0) scale(1); }

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-window {
    width: min(1500px, 100%);
    height: min(900px, calc(100vh - 16px));
    border-bottom: 0;
    border-color: rgba(101, 184, 255, 0.3);
    border-radius: 24px 24px 0 0;
    background:
        radial-gradient(circle at 90% 0, rgba(33, 147, 243, 0.11), transparent 31%),
        linear-gradient(150deg, #172129, #0d1419);
    box-shadow: 0 28px 100px rgba(0, 0, 0, 0.68), 0 0 45px rgba(41, 139, 205, 0.12);
    transform: translateY(calc(100% + 32px));
    transition: transform 320ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

.waterly-chart-lab-v2.is-bottom-sheet.is-visible .wcl2-window {
    transform: translateY(0);
}

.waterly-chart-lab-v2.is-bottom-sheet.is-closing .wcl2-window {
    transform: translateY(calc(100% + 32px));
}

.waterly-chart-lab-v2 .wcl2-sheet-toolbar {
    position: relative;
    z-index: 7;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border-bottom: 1px solid rgba(143, 184, 220, 0.12);
    background: linear-gradient(180deg, rgba(20, 42, 57, 0.96), rgba(8, 22, 31, 0.68));
    backdrop-filter: blur(16px);
}

.waterly-chart-lab-v2 .wcl2-sheet-collapse {
    width: auto;
    min-width: 190px;
    height: auto;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 0;
    border-radius: 10px;
    color: #dbe9f2;
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease;
}

.waterly-chart-lab-v2 .wcl2-sheet-collapse:hover,
.waterly-chart-lab-v2 .wcl2-sheet-collapse:focus-visible {
    color: #ffffff;
    background: rgba(101, 184, 255, 0.09);
    outline: none;
}

.waterly-chart-lab-v2 .wcl2-sheet-handle {
    width: 46px;
    height: 4px;
    border-radius: 99px;
    background: rgba(152, 204, 235, 0.44);
    box-shadow: 0 0 14px rgba(79, 181, 244, 0.18);
}

.waterly-chart-lab-v2 .wcl2-sheet-collapse-copy {
    min-width: 0;
    text-align: left;
}

.waterly-chart-lab-v2 .wcl2-sheet-collapse-copy strong,
.waterly-chart-lab-v2 .wcl2-sheet-collapse-copy small {
    display: block;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-sheet-collapse-copy strong {
    font-size: 10px;
    line-height: 1.1;
}

.waterly-chart-lab-v2 .wcl2-sheet-collapse-copy small {
    margin-top: 1px;
    color: #748792;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.waterly-chart-lab-v2 .wcl2-sheet-collapse > i {
    color: #79c2ff;
    font-size: 11px;
}

/* Poświaty tła */
.waterly-chart-lab-v2 .wcl2-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

.waterly-chart-lab-v2 .wcl2-glow-a {
    top: -70px;
    left: -60px;
    width: 220px;
    height: 220px;
    background: rgba(56, 189, 248, 0.12);
}

.waterly-chart-lab-v2 .wcl2-glow-b {
    right: -50px;
    bottom: -80px;
    width: 260px;
    height: 260px;
    background: rgba(139, 92, 246, 0.1);
}

/* Nagłówek */
.waterly-chart-lab-v2 .wcl2-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
}

.waterly-chart-lab-v2 .wcl2-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.waterly-chart-lab-v2 .wcl2-heading-icon {
    display: flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    color: #67e8f9;
    border: 1px solid rgba(103, 232, 249, 0.2);
    border-radius: 12px;
    background: rgba(103, 232, 249, 0.08);
    font-size: 17px;
}

.waterly-chart-lab-v2 .wcl2-heading strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-heading small {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    color: #94a3b8;
    font-size: 10px;
}

.waterly-chart-lab-v2 .wcl2-live {
    display: flex;
    align-items: center;
    gap: 6px;
}

.waterly-chart-lab-v2 .wcl2-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: wcl2-pulse 2s infinite;
}

@keyframes wcl2-pulse {
    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.waterly-chart-lab-v2 .wcl2-sep { color: #475569; }

.waterly-chart-lab-v2 .wcl2-header-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.waterly-chart-lab-v2 .wcl2-range-source {
    display: inline-flex;
    max-width: min(52vw, 520px);
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    overflow: hidden;
    border: 1px solid rgba(103, 232, 249, 0.2);
    border-radius: 999px;
    background: rgba(8, 145, 178, 0.08);
    color: #a5f3fc;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-range-source i {
    color: #67e8f9;
}

/* Przełącznik okresu */
.waterly-chart-lab-v2 .wcl2-periods {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 999px;
    background: rgba(2, 6, 14, 0.6);
}

.waterly-chart-lab-v2 .wcl2-period {
    padding: 5px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 200ms ease;
}

.waterly-chart-lab-v2 .wcl2-period:hover { color: #e2e8f0; }

.waterly-chart-lab-v2 .wcl2-period.is-active {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #fff;
}

.waterly-chart-lab-v2 .wcl2-close {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 50%;
    background: rgba(2, 6, 14, 0.6);
    color: #94a3b8;
    cursor: pointer;
    font-size: 13px;
    transition: all 200ms ease;
}

.waterly-chart-lab-v2 .wcl2-close:hover {
    background: rgba(51, 65, 85, 0.8);
    color: #fff;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-toolbar .wcl2-sheet-collapse {
    width: auto;
    min-width: 190px;
    height: auto;
    display: grid;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #dbe9f2;
    font-size: inherit;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-toolbar .wcl2-sheet-collapse:hover,
.waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-toolbar .wcl2-sheet-collapse:focus-visible {
    background: rgba(101, 184, 255, 0.09);
    color: #ffffff;
}

.waterly-chart-lab-v2 .wcl2-collapse {
    width: auto;
    min-width: 86px;
    padding: 0 12px;
    gap: 7px;
    border-radius: 10px;
    color: #acdfff;
    background: rgba(33, 147, 243, 0.1);
    font-size: 10px;
    font-weight: 800;
}

/* Pole wykresu */
.waterly-chart-lab-v2 .wcl2-plot {
    position: relative;
    z-index: 2;
    height: 46vh;
    min-height: 300px;
    max-height: 620px;
    flex: 1 1 auto;
    margin: 0 16px;
    border: 1px solid rgba(30, 41, 59, 0.8);
    border-radius: 16px;
    background: rgba(2, 6, 14, 0.4);
}

.waterly-chart-lab-v2 .wcl2-svg,
.waterly-chart-lab-v2 .wcl2-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.waterly-chart-lab-v2 .wcl2-overlay { pointer-events: none; }

.waterly-chart-lab-v2 .wcl2-grid {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 1;
}

.waterly-chart-lab-v2 .wcl2-draw {
    transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.waterly-chart-lab-v2 .wcl2-area {
    opacity: 1;
}

.waterly-chart-lab-v2 .wcl2-area.is-animated {
    opacity: 0;
    animation: wcl2-fade 1.2s ease 0.3s forwards;
}

@keyframes wcl2-fade { to { opacity: 1; } }

.waterly-chart-lab-v2 .wcl2-bar.is-animated {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: wcl2-bar-grow 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes wcl2-bar-grow {
    from { opacity: 0; transform: scaleY(0.08); }
    to { opacity: 1; transform: scaleY(1); }
}

.waterly-chart-lab-v2 .wcl2-guide {
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.waterly-chart-lab-v2 .wcl2-dot {
    fill: #0b1120;
    stroke-width: 2;
}

/* Osie */
.waterly-chart-lab-v2 .wcl2-axis-y {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Kolumna pojedynczej osi Y — jedna na parametr */
.waterly-chart-lab-v2 .wcl2-axis-column {
    position: absolute;
    padding: 0 6px;
}

.waterly-chart-lab-v2 .wcl2-axis-column.is-left { text-align: right; }
.waterly-chart-lab-v2 .wcl2-axis-column.is-right { text-align: left; }

/* Bez text-transform — symbole jednostek mają własną pisownię (µS, hPa, mg/l, ppm) */
.waterly-chart-lab-v2 .wcl2-axis-unit {
    position: absolute;
    top: -18px;
    right: 6px;
    left: 6px;
    overflow: hidden;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2px;
    opacity: 0.9;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-axis-column.is-left .wcl2-axis-unit { text-align: right; }
.waterly-chart-lab-v2 .wcl2-axis-column.is-right .wcl2-axis-unit { text-align: left; }

.waterly-chart-lab-v2 .wcl2-axis-y-tick {
    position: absolute;
    right: 6px;
    left: 6px;
    overflow: hidden;
    font-size: 9px;
    font-weight: 600;
    opacity: 0.85;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-axis-x {
    position: absolute;
    bottom: 5px;
    left: 0;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    color: #64748b;
    font-size: 9px;
    pointer-events: none;
}

/* Tooltip */
.waterly-chart-lab-v2 .wcl2-tooltip {
    position: absolute;
    z-index: 20;
    min-width: 150px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(8, 14, 24, 0.94);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    font-size: 11px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}

.waterly-chart-lab-v2 .wcl2-tooltip.is-visible { opacity: 1; }

.waterly-chart-lab-v2 .wcl2-tooltip-time {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.6);
    color: #64748b;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.waterly-chart-lab-v2 .wcl2-tooltip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 0;
}

.waterly-chart-lab-v2 .wcl2-tooltip-row span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #cbd5e1;
}

.waterly-chart-lab-v2 .wcl2-tooltip-row i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.waterly-chart-lab-v2 .wcl2-tooltip-row strong {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.waterly-chart-lab-v2 .wcl2-tooltip-row em,
.waterly-chart-lab-v2 .wcl2-chip em {
    margin-left: 3px;
    color: #64748b;
    font-size: 9px;
    font-style: normal;
}

.waterly-chart-lab-v2 .wcl2-catch {
    position: absolute;
    z-index: 10;
    inset: 0;
    cursor: crosshair;
    touch-action: none;
}

.waterly-chart-lab-v2.is-selecting .wcl2-catch { cursor: col-resize; }
.waterly-chart-lab-v2.is-panning .wcl2-catch { cursor: grabbing; }

.waterly-chart-lab-v2 .wcl2-selection {
    position: absolute;
    top: 28px;
    bottom: 22px;
    z-index: 12;
    border-right: 1px solid rgba(103, 232, 249, 0.8);
    border-left: 1px solid rgba(103, 232, 249, 0.8);
    border-radius: 4px;
    background:
        linear-gradient(90deg, rgba(34, 211, 238, 0.08), rgba(56, 189, 248, 0.22)),
        repeating-linear-gradient(-45deg, transparent 0 8px, rgba(255, 255, 255, 0.025) 8px 10px);
    box-shadow: inset 0 0 18px rgba(34, 211, 238, 0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 100ms ease;
}

.waterly-chart-lab-v2 .wcl2-selection.is-visible { opacity: 1; }

.waterly-chart-lab-v2 .wcl2-reset-zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: 999px;
    background: rgba(8, 20, 34, 0.9);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    color: #bae6fd;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px);
    transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.waterly-chart-lab-v2 .wcl2-reset-zoom.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.waterly-chart-lab-v2 .wcl2-reset-zoom:hover {
    border-color: rgba(125, 211, 252, 0.58);
    color: #fff;
}

/* Loader i stan pusty */
.waterly-chart-lab-v2 .wcl2-loader,
.waterly-chart-lab-v2 .wcl2-empty {
    position: absolute;
    z-index: 15;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(2, 6, 14, 0.7);
    color: #64748b;
    font-size: 12px;
}

.waterly-chart-lab-v2 .wcl2-loader.is-visible,
.waterly-chart-lab-v2 .wcl2-empty.is-visible { display: flex; }

.waterly-chart-lab-v2 .wcl2-loader i { color: #38bdf8; font-size: 22px; }
.waterly-chart-lab-v2 .wcl2-empty i { color: rgba(148, 163, 184, 0.4); font-size: 26px; }

/* Statystyki zakresu */
.waterly-chart-lab-v2 .wcl2-statistics {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 10px 18px 0;
}

.waterly-chart-lab-v2 .wcl2-stat-card {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid color-mix(in srgb, var(--series-color) 20%, rgba(255, 255, 255, 0.04));
    border-radius: 11px;
    color: inherit;
    background: color-mix(in srgb, var(--series-color) 5%, rgba(2, 6, 14, 0.42));
    font: inherit;
    text-align: left;
    appearance: none;
}

.waterly-chart-lab-v2 .wcl2-stat-card-header {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.waterly-chart-lab-v2 .wcl2-stat-card-header i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--series-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--series-color) 55%, transparent);
}

.waterly-chart-lab-v2 .wcl2-stat-card-header strong {
    overflow: hidden;
    color: #dce7ef;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-stat-card-header small {
    margin-left: auto;
    color: #596a79;
    font-size: 8px;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-stat-card > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 7px;
}

.waterly-chart-lab-v2 .wcl2-stat-card > div > span {
    min-width: 0;
    padding: 5px 6px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
}

.waterly-chart-lab-v2 .wcl2-stat-card > div small,
.waterly-chart-lab-v2 .wcl2-stat-card > div strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-stat-card > div small {
    color: #657583;
    font-size: 7px;
    text-transform: uppercase;
}

.waterly-chart-lab-v2 .wcl2-stat-card > div strong {
    margin-top: 2px;
    color: #f1f6f9;
    font-size: 10px;
}

.waterly-chart-lab-v2 .wcl2-stat-card > div em {
    margin-left: 2px;
    color: #687885;
    font-size: 7px;
    font-style: normal;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-header {
    order: 0;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-statistics {
    order: 1;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    padding: 10px 18px;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-stat-card {
    width: 100%;
    padding: 10px 11px;
    cursor: pointer;
    transition: opacity 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-stat-card:hover {
    border-color: color-mix(in srgb, var(--series-color) 45%, rgba(255, 255, 255, 0.08));
    background: color-mix(in srgb, var(--series-color) 9%, rgba(2, 6, 14, 0.5));
    transform: translateY(-1px);
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-stat-card.is-off {
    opacity: 0.42;
    border-color: rgba(148, 163, 184, 0.13);
    background: rgba(2, 6, 14, 0.38);
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-stat-card.is-off .wcl2-stat-card-header i {
    background: transparent;
    box-shadow: none;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-stat-card:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--series-color) 70%, white);
    outline-offset: 2px;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-plot {
    order: 2;
    height: auto;
    min-height: 260px;
    max-height: none;
    flex: 1 1 auto;
    margin: 0 16px 20px;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-legend {
    order: 3;
    display: none;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-footer {
    order: 4;
    display: none;
}

/* Legenda */
.waterly-chart-lab-v2 .wcl2-legend {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px 0;
}

.waterly-chart-lab-v2 .wcl2-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 9px;
    border: 1px solid;
    border-color: color-mix(in srgb, var(--series-color) 30%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--series-color) 8%, transparent);
    color: inherit;
    cursor: pointer;
    transition: all 200ms ease;
}

.waterly-chart-lab-v2 .wcl2-chip.is-off {
    border-color: rgba(100, 116, 139, 0.28);
    background: rgba(71, 85, 105, 0.08);
    color: #64748b;
    opacity: 0.62;
    filter: grayscale(1);
}

.waterly-chart-lab-v2 .wcl2-chip.is-off .wcl2-chip-dot {
    background: #64748b;
    box-shadow: none;
}

.waterly-chart-lab-v2 .wcl2-chip.is-off .wcl2-chip-copy small,
.waterly-chart-lab-v2 .wcl2-chip.is-off .wcl2-chip-copy strong,
.waterly-chart-lab-v2 .wcl2-chip.is-off .wcl2-chip-copy em,
.waterly-chart-lab-v2 .wcl2-chip.is-off .wcl2-chip-remove {
    color: #64748b;
}

.waterly-chart-lab-v2 .wcl2-chip-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: var(--series-color);
    box-shadow: 0 0 6px color-mix(in srgb, var(--series-color) 55%, transparent);
}

.waterly-chart-lab-v2 .wcl2-chip-copy {
    display: block;
    text-align: left;
}

.waterly-chart-lab-v2 .wcl2-chip-copy small {
    display: block;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.2;
}

.waterly-chart-lab-v2 .wcl2-chip-copy strong {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
}

.waterly-chart-lab-v2 .wcl2-chip-remove {
    margin-left: 2px;
    color: #64748b;
    font-size: 10px;
    transition: color 200ms ease;
}

.waterly-chart-lab-v2 .wcl2-chip-remove:hover { color: #fff; }

/* Stopka — porównania */
.waterly-chart-lab-v2 .wcl2-footer {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(30, 41, 59, 0.7);
}

.waterly-chart-lab-v2 .wcl2-quick,
.waterly-chart-lab-v2 .wcl2-compare-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 200ms ease;
}

.waterly-chart-lab-v2 .wcl2-action-label { display: inline; }

.waterly-chart-lab-v2 .wcl2-quick {
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.08);
    color: #7dd3fc;
}

.waterly-chart-lab-v2 .wcl2-quick.is-active {
    border-color: rgba(56, 189, 248, 0.7);
    background: rgba(56, 189, 248, 0.22);
    color: #e0f2fe;
}

.waterly-chart-lab-v2 .wcl2-compare { position: relative; }

.waterly-chart-lab-v2 .wcl2-compare-toggle {
    border: 1px dashed rgba(100, 116, 139, 0.8);
    background: transparent;
    color: #94a3b8;
}

.waterly-chart-lab-v2 .wcl2-compare-toggle:hover {
    border-color: rgba(148, 163, 184, 1);
    color: #fff;
}

.waterly-chart-lab-v2 .wcl2-compare-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 60;
    width: 240px;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: #0b111c;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.75);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px) scale(0.98);
    transform-origin: bottom left;
    transition: all 200ms ease;
}

.waterly-chart-lab-v2 .wcl2-compare-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.waterly-chart-lab-v2 .wcl2-compare-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 200ms ease;
}

.waterly-chart-lab-v2 .wcl2-compare-item:hover { background: rgba(255, 255, 255, 0.06); }

.waterly-chart-lab-v2 .wcl2-compare-item i {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
}

.waterly-chart-lab-v2 .wcl2-compare-item span {
    flex: 1 1 auto;
    color: #e2e8f0;
    font-size: 12px;
}

.waterly-chart-lab-v2 .wcl2-compare-item small,
.waterly-chart-lab-v2 .wcl2-compare-empty {
    color: #64748b;
    font-size: 10px;
}

.waterly-chart-lab-v2 .wcl2-compare-empty { padding: 10px; }

.waterly-chart-lab-v2 .wcl2-hint {
    margin-left: auto;
    color: #64748b;
    font-size: 10px;
}

.waterly-chart-lab-v2 .wcl2-hint-zoom { display: none; }
.waterly-chart-lab-v2.is-zoomed .wcl2-hint-default { display: none; }
.waterly-chart-lab-v2.is-zoomed .wcl2-hint-zoom { display: inline; }

/* Wąskie ekrany — okno na pełną powierzchnię, mniej ozdobników */
@media (max-width: 820px) {
    .waterly-chart-lab-v2 { padding: 0; }

    .waterly-chart-lab-v2 .wcl2-window {
        max-width: none;
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .waterly-chart-lab-v2.is-bottom-sheet {
        padding: 8px 8px 0;
    }

    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-window {
        width: 100%;
        height: calc(100vh - 8px);
        border: 1px solid rgba(101, 184, 255, 0.3);
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
    }

    .waterly-chart-lab-v2 .wcl2-header {
        flex-wrap: wrap;
        padding: 14px 14px 10px;
    }
    .waterly-chart-lab-v2 .wcl2-heading-icon { display: none; }
    .waterly-chart-lab-v2 .wcl2-heading strong { font-size: 14px; }
    .waterly-chart-lab-v2 .wcl2-header-tools {
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
    }

    /* Wykres zabiera całą dostępną wysokość */
    .waterly-chart-lab-v2 .wcl2-plot {
        height: auto;
        min-height: 0;
        max-height: none;
        margin: 0 8px;
    }

    .waterly-chart-lab-v2 .wcl2-statistics {
        display: flex;
        overflow-x: auto;
        padding: 9px 12px 1px;
        scrollbar-width: none;
    }

    .waterly-chart-lab-v2 .wcl2-statistics::-webkit-scrollbar { display: none; }
    .waterly-chart-lab-v2 .wcl2-stat-card {
        min-width: min(88vw, 420px);
        flex: 0 0 min(88vw, 420px);
    }

    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-statistics {
        display: grid;
        grid-template-columns: 1fr;
        overflow-x: visible;
        padding: 0 10px 8px;
    }

    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-stat-card {
        width: 100%;
        min-width: 0;
    }

    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-plot {
        margin: 0 8px 20px;
    }

    /* Legenda przewijana w poziomie zamiast zawijania w wiele rzędów */
    .waterly-chart-lab-v2 .wcl2-legend {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 10px 12px 2px;
        scrollbar-width: none;
    }

    .waterly-chart-lab-v2 .wcl2-legend::-webkit-scrollbar { display: none; }
    .waterly-chart-lab-v2 .wcl2-chip { flex: 0 0 auto; }

    .waterly-chart-lab-v2 .wcl2-footer {
        margin-top: 10px;
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    }

    .waterly-chart-lab-v2 .wcl2-hint { display: none; }

    /* Podpowiedź dotykowa zamiast kursora */
    .waterly-chart-lab-v2 .wcl2-catch { cursor: default; }
}

@media (max-width: 680px) {
    .waterly-chart-lab-v2 .wcl2-compare-toggle .wcl2-action-label { display: none; }

    .waterly-chart-lab-v2 .wcl2-compare-toggle {
        width: 34px;
        height: 34px;
        justify-content: center;
        padding: 0;
    }

    .waterly-chart-lab-v2 .wcl2-reset-zoom span { display: none; }
    .waterly-chart-lab-v2 .wcl2-reset-zoom {
        width: 32px;
        height: 32px;
        justify-content: center;
        padding: 0;
    }
}

/* Bardzo wąskie ekrany — priorytet dla wykresu */
@media (max-width: 520px) {
    .waterly-chart-lab-v2 .wcl2-periods {
        overflow-x: auto;
        max-width: calc(100vw - 70px);
        scrollbar-width: none;
    }
    .waterly-chart-lab-v2 .wcl2-periods::-webkit-scrollbar { display: none; }
    .waterly-chart-lab-v2 .wcl2-periods { padding: 1px; }
    .waterly-chart-lab-v2 .wcl2-period { padding: 4px 9px; font-size: 10px; }
    .waterly-chart-lab-v2 .wcl2-quick span,
    .waterly-chart-lab-v2 .wcl2-compare-toggle { font-size: 10px; }
    .waterly-chart-lab-v2 .wcl2-compare-menu { width: calc(100vw - 40px); }
    .waterly-chart-lab-v2 .wcl2-tooltip { min-width: 130px; font-size: 10px; }
}


/* css/account/zz_navbar_footer.css */
/**************************************************************************************************
	@author         waterly.eu
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           zz_navbar_footer.css
	@description    Dolna nawigacja telefonu (Mapa / Punkty / Więcej) razem z arkuszem "Więcej".

	                Widoczna wyłącznie na wąskich ekranach - to ten sam próg (767 px), na którym
	                panel punktu pomiarowego zamienia się w arkusz. Powyżej niego wraca menu
	                mapy w prawym górnym rogu.

	                Odstępy od paska home biorą się ze zmiennych z zzz_safe_area.css (domyślnie 0px).
**************************************************************************************************/

/****************************************** Zmienne wspólne ***************************************/
	:root {
		/* Wysokość samego paska, bez strefy bezpiecznej pod nim */
		--waterly-footer-height: 58px;
		/*
			Ile miejsca dolny pasek zabiera pozostałym warstwom. Poza telefonem paska nie ma,
			więc 0px - dzięki temu reguły w zzz_safe_area.css nie potrzebują własnych breakpointów.
		*/
		--waterly-footer-offset: 0px;
	}

	@media (max-width: 767px) {
		:root {
			--waterly-footer-offset: var(--waterly-footer-height);
		}
	}

/***************************************** Pasek nawigacji ****************************************/
	.waterly-navbar-footer,
	.waterly-more-menu {
		display: none;
	}

	@media (max-width: 767px) {
		.waterly-navbar-footer {
			position: fixed;
			z-index: 1030;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			height: calc(var(--waterly-footer-height) + var(--safe-bottom, 0px));
			padding-bottom: var(--safe-bottom, 0px);
			padding-left: var(--safe-left, 0px);
			padding-right: var(--safe-right, 0px);
			border-top: 1px solid rgba(143, 184, 220, 0.16);
			background: linear-gradient(180deg, rgba(12, 24, 33, 0.94), rgba(6, 14, 21, 0.97));
			box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.38);
			backdrop-filter: blur(14px) saturate(1.1);
			-webkit-backdrop-filter: blur(14px) saturate(1.1);
		}

		/*
			Menu mapy w prawym górnym rogu dubluje teraz dolny pasek - jego funkcje przeniosły się
			do zakładek i do arkusza "Więcej". Odstępy dolnych warstw mapy o wysokość paska
			ustawia zzz_safe_area.css przez --waterly-footer-offset.
		*/
		#main_map_content .waterly-ctrl-actions {
			display: none !important;
		}
	}

	.waterly-navbar-footer-item {
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #8ea3b1;
		font-family: "Open Sans", sans-serif;
		font-size: 11px;
		font-weight: 600;
		transition: color 0.16s ease;
	}

	.waterly-navbar-footer-item i {
		font-size: 17px;
	}

	.waterly-navbar-footer-item.is-active {
		color: #64d9f5;
	}

	.waterly-navbar-footer-item:active {
		color: #ffffff;
	}

/****************************************** Arkusz "Więcej" ***************************************/
	@media (max-width: 767px) {
		.waterly-more-menu {
			position: fixed;
			z-index: 1029;
			inset: 0;
			display: block;
			visibility: hidden;
			opacity: 0;
			transition: opacity 0.2s ease, visibility 0.2s ease;
		}

		.waterly-more-menu.is-open {
			visibility: visible;
			opacity: 1;
		}
	}

	.waterly-more-menu-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(3, 9, 14, 0.55);
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
	}

	.waterly-more-menu-sheet {
		position: absolute;
		right: max(6px, var(--safe-right, 0px));
		bottom: calc(var(--waterly-footer-height) + var(--safe-bottom, 0px) + 6px);
		left: max(6px, var(--safe-left, 0px));
		max-height: calc(100dvh - var(--waterly-footer-height) - var(--safe-top, 0px) - var(--safe-bottom, 0px) - 24px);
		padding: 8px 14px 16px;
		overflow-y: auto;
		border: 1px solid rgba(101, 189, 218, 0.2);
		border-radius: 22px;
		background:
			radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.1), transparent 30%),
			rgba(5, 14, 22, 0.97);
		box-shadow: 0 -24px 58px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.07);
		color: #d7e6ef;
		font-family: "Open Sans", sans-serif;
		overscroll-behavior: contain;
		transform: translateY(14px);
		transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.waterly-more-menu.is-open .waterly-more-menu-sheet {
		transform: translateY(0);
	}

	.waterly-more-menu-grabber {
		width: 42px;
		height: 4px;
		margin: 0 auto 10px;
		border-radius: 999px;
		background: rgba(167, 211, 226, 0.34);
	}

	.waterly-more-menu-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12px;
	}

	.waterly-more-menu-header strong {
		color: #eaf7ff;
		font-size: 15px;
		font-weight: 800;
	}

	.waterly-more-menu-close {
		display: flex;
		width: 32px;
		height: 32px;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(143, 184, 220, 0.2);
		border-radius: 11px;
		background: rgba(20, 36, 47, 0.9);
		color: #9fb5c1;
		font-size: 14px;
	}

	.waterly-more-menu-section {
		margin-bottom: 14px;
	}

	.waterly-more-menu-section[hidden] {
		display: none;
	}

	.waterly-more-menu-section h6 {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 0 8px;
		color: #7f97a6;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.waterly-more-menu-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.waterly-more-menu-chip {
		display: flex;
		min-height: 44px;
		flex: 1 1 calc(50% - 8px);
		align-items: center;
		justify-content: center;
		gap: 7px;
		padding: 8px 10px;
		border: 1px solid rgba(143, 184, 220, 0.18);
		border-radius: 13px;
		background: rgba(16, 31, 41, 0.86);
		color: #c2d4df;
		font-size: 12px;
		font-weight: 600;
	}

	/* Wybór na całą szerokość - tryb automatyczny stoi nad parą jasny/ciemny */
	.waterly-more-menu-chip.is-wide {
		flex: 1 1 100%;
	}

	.waterly-more-menu-chip b {
		color: #eaf7ff;
		font-size: 12px;
		font-weight: 800;
	}

	.waterly-more-menu-chip.is-selected {
		border-color: rgba(90, 226, 213, 0.42);
		background: rgba(64, 207, 194, 0.14);
		color: #7ce5da;
	}

	.waterly-more-menu-chip.is-selected b {
		color: #7ce5da;
	}

	.waterly-more-menu-rows {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.waterly-more-menu-row {
		display: flex;
		min-height: 48px;
		align-items: center;
		gap: 12px;
		padding: 10px 14px;
		border: 1px solid rgba(143, 184, 220, 0.18);
		border-radius: 13px;
		background: rgba(16, 31, 41, 0.86);
		color: #d7e6ef;
		font-size: 13px;
		font-weight: 600;
		text-align: left;
	}

	.waterly-more-menu-row i {
		width: 18px;
		color: #69bdf7;
		text-align: center;
	}

	.waterly-more-menu-version {
		padding-top: 4px;
		color: #64798a;
		font-size: 10px;
		text-align: center;
	}

/******************************************** Motyw jasny *****************************************/
	html[data-theme="light"] .waterly-navbar-footer {
		border-top-color: rgba(20, 60, 90, 0.12);
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(240, 246, 250, 0.98));
		box-shadow: 0 -12px 30px rgba(15, 42, 66, 0.12);
	}

	html[data-theme="light"] .waterly-navbar-footer-item {
		color: #5a6b78;
	}

	html[data-theme="light"] .waterly-navbar-footer-item.is-active {
		color: #1183c9;
	}

	html[data-theme="light"] .waterly-more-menu-sheet {
		border-color: rgba(20, 60, 90, 0.14);
		background: #ffffff;
		box-shadow: 0 -24px 58px rgba(15, 42, 66, 0.22);
		color: #223442;
	}

	html[data-theme="light"] .waterly-more-menu-header strong {
		color: #12222e;
	}

	html[data-theme="light"] .waterly-more-menu-chip,
	html[data-theme="light"] .waterly-more-menu-row,
	html[data-theme="light"] .waterly-more-menu-close {
		border-color: rgba(20, 60, 90, 0.14);
		background: #f3f7fa;
		color: #223442;
	}

	html[data-theme="light"] .waterly-more-menu-chip b {
		color: #12222e;
	}

	html[data-theme="light"] .waterly-more-menu-chip.is-selected {
		border-color: rgba(17, 131, 201, 0.4);
		background: rgba(17, 131, 201, 0.12);
		color: #0f6ea8;
	}

	html[data-theme="light"] .waterly-more-menu-chip.is-selected b {
		color: #0f6ea8;
	}


/* css/account/zz_theme.css */
/**************************************************************************************************
	@module         interface_theme
	@description    Light/dark theme overrides. Dark remains the visual baseline of the legacy UI.
**************************************************************************************************/

:root {
	--waterly-page-bg: #212529;
	--waterly-surface: #33373b;
	--waterly-surface-soft: #293139;
	--waterly-text: #ffffff;
	--waterly-text-muted: #b4bbc2;
	--waterly-border: rgba(255, 255, 255, 0.14);
	--waterly-accent: #2193f3;
	color-scheme: dark;
}

html[data-theme="light"] {
	--waterly-page-bg: #f4f7fa;
	--waterly-surface: #ffffff;
	--waterly-surface-soft: #eaf0f5;
	--waterly-text: #17212b;
	--waterly-text-muted: #526170;
	--waterly-border: rgba(28, 54, 78, 0.16);
	--waterly-accent: #147ac1;
	color-scheme: light;
}

html,
body,
html[data-theme] body {
	background-color: var(--waterly-page-bg);
	color: var(--waterly-text);
}

/*
	Ekran ładowania z index.html rysuje się na stałym granacie marki i sam ustala kolory tekstu.
	Motyw jasny nie może go rozjaśniać - wcześniej ta reguła wygrywała specyficznością i podpis
	"#save water with us" stawał się granatowy na granatowym.
*/
html[data-theme="light"] .save-water:not(.waterly-boot *) {
	color: var(--waterly-text);
}

/* The control stays in the source and can be re-enabled by removing this class. */
#main_map_content .waterly-ctrl-layers.is-temporarily-disabled {
	display: none !important;
}

/* Theme selector next to the language selector */
.navbar-nav-theme .theme-body {
	min-width: 180px;
}

.navbar-nav-theme .user-settings-theme {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.navbar-nav-theme .user-settings-theme > i {
	width: 22px;
	color: var(--waterly-text-muted);
	text-align: center;
}

.navbar-nav-theme .user-settings-theme:hover,
.navbar-nav-theme .user-settings-theme.selected {
	background-color: var(--waterly-accent);
	color: #ffffff;
}

.navbar-nav-theme .user-settings-theme:hover > i,
.navbar-nav-theme .user-settings-theme.selected > i {
	color: #ffffff;
}

/* Shared legacy surfaces */
html[data-theme="light"] .bg-color,
html[data-theme="light"] .table-dark,
html[data-theme="light"] .progress-bg-dark,
html[data-theme="light"] .main-container-subpage,
html[data-theme="light"] .card,
html[data-theme="light"] .card-body,
html[data-theme="light"] .card-header,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .list-group-item,
html[data-theme="light"] .table,
html[data-theme="light"] .searching-form {
	background-color: var(--waterly-surface) !important;
	color: var(--waterly-text) !important;
	border-color: var(--waterly-border) !important;
}

html[data-theme="light"] .text-light,
html[data-theme="light"] .table-dark,
html[data-theme="light"] .table-dark th,
html[data-theme="light"] .table-dark td {
	color: var(--waterly-text) !important;
}

html[data-theme="light"] .text-muted,
html[data-theme="light"] small,
html[data-theme="light"] .dropdown-header {
	color: var(--waterly-text-muted) !important;
}

html[data-theme="light"] .dropdown-item,
html[data-theme="light"] .nav-link,
html[data-theme="light"] .card-header .btn {
	color: var(--waterly-text) !important;
}

html[data-theme="light"] .dropdown-item:hover,
html[data-theme="light"] .dropdown-item:focus {
	background-color: var(--waterly-surface-soft);
	color: var(--waterly-text);
}

html[data-theme="light"] .form-control,
html[data-theme="light"] .custom-select,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
	background-color: #ffffff !important;
	color: #17212b !important;
	border-color: rgba(28, 54, 78, 0.22) !important;
}

html[data-theme="light"] .form-control:disabled,
html[data-theme="light"] .form-control[readonly],
html[data-theme="light"] input:disabled,
html[data-theme="light"] select:disabled,
html[data-theme="light"] textarea:disabled {
	background-color: #e8edf2 !important;
	color: #687683 !important;
}

/* Navbar and account shell */
html[data-theme="light"] .navbar-website .logo-text-navbar,
html[data-theme="light"] .navbar-website .nav-link,
html[data-theme="light"] .navbar-website .navbar-menu-tree .nav-menu-tree-link,
html[data-theme="light"] .navbar-website .navbar-menu-tree .dropdown-menu,
html[data-theme="light"] .language-body .user-settings-language-icon,
html[data-theme="light"] .navbar-nav-language .user-settings-language-label {
	background-color: var(--waterly-surface) !important;
	color: var(--waterly-text-muted) !important;
	border-color: var(--waterly-border) !important;
	box-shadow: 0 4px 14px rgba(31, 55, 75, 0.12);
}

html[data-theme="light"] .navbar-website .nav-link.show,
html[data-theme="light"] .navbar-website .nav-link:hover,
html[data-theme="light"] .navbar-website .logo-text-navbar:hover,
html[data-theme="light"] .language-body .user-settings-language:hover,
html[data-theme="light"] .language-body .user-settings-language.selected {
	background-color: var(--waterly-accent) !important;
	color: #ffffff !important;
}

html[data-theme="light"] .navbar-nav-language .user-settings-language.selected .user-settings-language-label {
	background-color: var(--waterly-accent) !important;
	color: #ffffff !important;
}

/* Map overlay controls follow the map's matching light style. */
html[data-theme="light"] #main_map_content .waterly-ctrl:not(.waterly-ctrl-footer):not(.waterly-ctrl-legend):not(.waterly-ctrl-list),
html[data-theme="light"] #main_map_content .map-privacy,
html[data-theme="light"] #main_map_content .maplibregl-ctrl-group,
html[data-theme="light"] #main_map_content .maplibregl-ctrl-scale,
html[data-theme="light"] #main_map_content .map-layer-switcher,
html[data-theme="light"] #main_map_content .waterly-map-popover,
html[data-theme="light"] #main_map_content .waterly-map-service-action .dropdown-menu {
	border-color: rgba(28, 73, 104, 0.18);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 8px 24px rgba(31, 55, 75, 0.18);
	color: #344b5c;
}

html[data-theme="light"] #main_map_content .waterly-ctrl-brand span,
html[data-theme="light"] #main_map_content .waterly-ctrl-button,
html[data-theme="light"] #main_map_content .map-privacy,
html[data-theme="light"] #main_map_content .waterly-map-popover button,
html[data-theme="light"] #main_map_content .waterly-map-service-action .dropdown-item {
	color: #344b5c;
}

html[data-theme="light"] #main_map_content .waterly-ctrl-brand span {
	background: linear-gradient(90deg, #2193f3 0%, #104673 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 1px 5px rgba(16, 70, 115, 0.12));
}

/* Contributors and privacy form one footer row and use the same opaque light surface. */
html[data-theme="light"] #main_map_content .map-privacy,
html[data-theme="light"] #main_map_content .waterly-map-attribution-content {
	border-color: rgba(28, 73, 104, 0.18);
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(31, 55, 75, 0.18);
}

html[data-theme="light"] #main_map_content .waterly-map-attribution {
	color: #526879;
}

html[data-theme="light"] #main_map_content .waterly-map-attribution-logo {
	background-color: #147ac1;
}

html[data-theme="light"] #main_map_content .waterly-map-attribution-content .waterly-map-attribution-brand {
	color: #147ac1;
}

html[data-theme="light"] #main_map_content .waterly-map-attribution-content > b {
	color: #a3b0ba;
}

html[data-theme="light"] #main_map_content .waterly-map-attribution-content a {
	color: #344b5c;
}

html[data-theme="light"] #main_map_content .waterly-map-attribution-content a:hover,
html[data-theme="light"] #main_map_content .waterly-map-attribution-content a:focus-visible {
	color: #0d659f;
}

html[data-theme="light"] #main_map_content .waterly-ctrl-button:hover,
html[data-theme="light"] #main_map_content .waterly-map-popover button:hover,
html[data-theme="light"] #main_map_content .waterly-map-popover button.is-selected {
	background: rgba(20, 122, 193, 0.1);
	color: #0d659f;
}

html[data-theme="light"] #main_map_content .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
	filter: none;
}

html[data-theme="light"] #main_map_content .waterly-ctrl-list {
	border-color: rgba(22, 150, 139, 0.34);
	background: rgba(245, 255, 253, 0.96);
	box-shadow: 0 9px 24px rgba(31, 55, 75, 0.18);
}

html[data-theme="light"] #main_map_content .waterly-ctrl-list .devices-list-selector {
	color: #147d73;
}

/* Chromium can promote the several small legend blurs into one pale rectangle over a light map. */
html[data-theme="light"] #main_map_content .wqi-map-legend::before,
html[data-theme="light"] #main_map_content .wqi-map-legend .wqi-legend-heading,
html[data-theme="light"] #main_map_content .wqi-map-legend .wqi-legend-stat,
html[data-theme="light"] #main_map_content .wqi-map-legend .wqi-legend-empty {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/**************************************************************************************************
	Point browser - lista punktów pomiarowych z wyszukiwarką (.tiles-list-contener)

	Panel był rysowany wyłącznie w wersji ciemnej: w motywie jasnym zostawał ciemny prostokąt,
	a pole wyszukiwania robiło się białą plamą, bo łapała je ogólna reguła dla input powyżej.
	Poniżej pełny komplet powierzchni, tekstów i stanów w wersji jasnej.
**************************************************************************************************/

/* Powierzchnia panelu */
html[data-theme="light"] .tiles-list-contener {
	border-left-color: rgba(28, 73, 104, 0.14);
	background:
		radial-gradient(circle at 90% 4%, rgba(20, 150, 139, 0.08), transparent 27%),
		linear-gradient(155deg, #ffffff, #f2f6fa);
	box-shadow: -24px 0 70px rgba(31, 55, 75, 0.16);
}

/* Nagłówek */
html[data-theme="light"] .tiles-list-eyebrow {
	color: #12897c;
}

html[data-theme="light"] .tiles-list-eyebrow span {
	background: #16a394;
	box-shadow: 0 0 0 5px rgba(22, 163, 148, 0.12);
}

html[data-theme="light"] .tiles-list-heading h2 {
	color: #12222e;
}

html[data-theme="light"] .tiles-list-heading p {
	color: #5b6f7e;
}

html[data-theme="light"] .tiles-list-contener .close-tiles-list-contener {
	border-color: rgba(28, 73, 104, 0.16);
	background: #ffffff;
	color: #52697a;
	box-shadow: 0 4px 14px rgba(31, 55, 75, 0.1);
}

html[data-theme="light"] .tiles-list-contener .close-tiles-list-contener:hover {
	border-color: rgba(20, 122, 193, 0.4);
	background: rgba(20, 122, 193, 0.1);
	color: #0f6ea8;
}

/* Wyszukiwarka - ogólna reguła dla input ma !important, więc tutaj też jest potrzebny */
html[data-theme="light"] .tiles-list-search {
	border-color: rgba(28, 73, 104, 0.18);
	background: #ffffff;
	box-shadow: 0 4px 14px rgba(31, 55, 75, 0.08);
}

html[data-theme="light"] .tiles-list-search:focus-within {
	border-color: rgba(22, 163, 148, 0.55);
	box-shadow: 0 0 0 4px rgba(22, 163, 148, 0.12);
}

html[data-theme="light"] .tiles-list-search > i {
	color: #16a394;
}

html[data-theme="light"] .tiles-list-search input {
	border: 0 !important;
	background: transparent !important;
	color: #17212b !important;
}

html[data-theme="light"] .tiles-list-search input::placeholder {
	color: #8496a3;
}

html[data-theme="light"] .tiles-list-search-clear {
	background: transparent;
	color: #6d8290;
}

/* Podsumowanie i przycisk lokalizacji */
html[data-theme="light"] .tiles-list-summary {
	color: #64798a;
}

html[data-theme="light"] .tiles-list-location {
	color: #12897c;
}

html[data-theme="light"] .tiles-list-location:hover:not(:disabled) {
	color: #0d6f65;
}

/* Lista */
html[data-theme="light"] .tiles-list-results {
	scrollbar-color: rgba(28, 73, 104, 0.28) transparent;
}

html[data-theme="light"] .tiles-list-section-header {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.97), rgba(242, 246, 250, 0.92));
}

html[data-theme="light"] .tiles-list-section-heading > i {
	border-color: rgba(22, 163, 148, 0.28);
	background: rgba(22, 163, 148, 0.1);
	color: #12897c;
}

html[data-theme="light"] .tiles-list-section-heading strong {
	color: #12222e;
}

html[data-theme="light"] .tiles-list-section-heading small {
	color: #6b7f8d;
}

html[data-theme="light"] .tiles-list-section-count {
	border-color: rgba(28, 73, 104, 0.14);
	background: rgba(28, 73, 104, 0.05);
	color: #5b6f7e;
}

html[data-theme="light"] .is-favorites-section .tiles-list-section-heading > i {
	border-color: rgba(198, 145, 20, 0.3);
	background: rgba(230, 176, 40, 0.14);
	color: #a8790a;
}

html[data-theme="light"] .is-favorites-section .tiles-list-section-count {
	color: #a8790a;
}

/* Kafelek punktu */
html[data-theme="light"] .tile-list-el {
	border-color: rgba(28, 73, 104, 0.14);
	background: #ffffff;
	color: #2a3d4b;
	box-shadow: 0 10px 26px rgba(31, 55, 75, 0.08);
}

html[data-theme="light"] .tile-list-el:hover {
	border-color: rgba(22, 163, 148, 0.4);
	box-shadow: 0 14px 34px rgba(31, 55, 75, 0.14);
}

html[data-theme="light"] .tile-list-el.is-subscribed {
	border-color: rgba(198, 145, 20, 0.32);
	background: linear-gradient(125deg, rgba(230, 176, 40, 0.12), #ffffff);
}

/*
	Awatar WQI: na białej karcie tarcza musi być jasna, a wartość bierze kolor jakości wody,
	zamiast białego tekstu z cieniem dobranego pod ciemne tło.
*/
html[data-theme="light"] .tile-list-avatar {
	background:
		radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.9), transparent 26%),
		color-mix(in srgb, var(--tile-quality-color, #8297a3) 14%, #ffffff);
	box-shadow:
		0 0 0 5px color-mix(in srgb, var(--tile-quality-color, #8297a3) 10%, transparent),
		0 6px 18px -10px rgba(31, 55, 75, 0.5);
}

html[data-theme="light"] .tile-list-avatar-value {
	text-shadow: none;
}

html[data-theme="light"] .tile-list-avatar-value small {
	color: color-mix(in srgb, var(--tile-quality-color, #8297a3) 72%, #1d2b36);
}

html[data-theme="light"] .tile-list-avatar-value strong {
	color: color-mix(in srgb, var(--tile-quality-color, #8297a3) 78%, #10202b);
}

html[data-theme="light"] .tile-display-name {
	color: #12222e;
}

html[data-theme="light"] .tile-list-distance {
	color: #12897c;
}

html[data-theme="light"] .tile-description {
	color: #5b6f7e;
}

html[data-theme="light"] .tile-list-meta > span {
	background: rgba(28, 73, 104, 0.06);
	color: #5b6f7e;
}

html[data-theme="light"] .is-nearby .tile-list-nearby {
	background: rgba(22, 163, 148, 0.12);
	color: #12897c;
}

html[data-theme="light"] .is-subscribed .tile-list-subscribed {
	background: rgba(230, 176, 40, 0.16);
	color: #a8790a;
}

html[data-theme="light"] .tile-list-chevron {
	color: #9aabb7;
}

html[data-theme="light"] .tile-list-main:hover .tile-list-chevron {
	color: #12897c;
}

/* Pasek akcji kafelka */
html[data-theme="light"] .tile-list-actions {
	border-top-color: rgba(28, 73, 104, 0.1);
}

html[data-theme="light"] .tile-list-actions button {
	border-right-color: rgba(28, 73, 104, 0.1);
	background: rgba(28, 73, 104, 0.03);
	color: #5b6f7e;
}

html[data-theme="light"] .tile-list-actions button:hover {
	background: rgba(22, 163, 148, 0.1);
	color: #0d6f65;
}

/* Stan pusty */
html[data-theme="light"] .tiles-list-empty {
	color: #64798a;
}

html[data-theme="light"] .tiles-list-empty i {
	color: #16a394;
}

html[data-theme="light"] .tiles-list-empty strong {
	color: #12222e;
}

/**************************************************************************************************
	Selected point - szczegóły wybranego punktu na mapie (.select-tile-contener)

	Panel ma osobne, bogate wizualnie widgety. W jasnym motywie zachowujemy wodny charakter,
	ale wszystkie powierzchnie, teksty, kontrolki i stany dostają rzeczywisty wariant light.
**************************************************************************************************/

html[data-theme="light"] .select-tile-contener {
	color-scheme: light;
	border-color: rgba(28, 73, 104, 0.15);
	background:
		radial-gradient(circle at 0 10%, rgba(22, 163, 148, 0.09), transparent 29%),
		radial-gradient(circle at 100% 72%, rgba(20, 122, 193, 0.08), transparent 35%),
		linear-gradient(90deg, #ffffff, #f5f9fb 76%, #eef6f8);
	box-shadow:
		22px 0 52px -30px rgba(31, 55, 75, 0.38),
		8px 0 24px -18px rgba(20, 122, 193, 0.24),
		inset -1px 0 rgba(28, 73, 104, 0.08);
	color: #243b49;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

html[data-theme="light"] .marker-panel-backdrop {
	background: rgba(207, 220, 228, 0.58);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

html[data-theme="light"] .marker-panel-scroll-cue-up {
	background: linear-gradient(to bottom, rgba(247, 251, 253, 0.96), rgba(247, 251, 253, 0.58) 58%, transparent);
}

html[data-theme="light"] .marker-panel-scroll-cue-down {
	background: linear-gradient(to top, rgba(239, 247, 249, 0.96), rgba(239, 247, 249, 0.58) 58%, transparent);
}

html[data-theme="light"] .marker-panel-scroll-cue > span {
	color: #147ab0;
	text-shadow: none;
}

html[data-theme="light"] .marker-panel-scroll-cue i {
	filter: none;
}

html[data-theme="light"] .marker-panel-custom-scrollbar {
	background: rgba(28, 73, 104, 0.08);
}

html[data-theme="light"] .marker-panel-custom-scrollbar > i {
	background: linear-gradient(to bottom, rgba(20, 150, 139, 0.3), rgba(20, 122, 193, 0.7) 22%, rgba(20, 122, 193, 0.7) 78%, rgba(20, 150, 139, 0.3));
	box-shadow: none;
}

html[data-theme="light"] .select-tile-contener .marker-main-header {
	border: 1px solid rgba(28, 73, 104, 0.13);
	background: #ffffff;
	color: #52697a;
}

html[data-theme="light"] .select-tile-contener .select-tile-contener-color {
	color: #52697a;
}

html[data-theme="light"] .select-tile-contener .select-tile-header-name {
	color: #173241;
}

html[data-theme="light"] .select-tile-contener .select-tile-header-desc {
	color: #617987;
}

html[data-theme="light"] .select-tile-contener .marker-main-contener-control .close-tiles-contener {
	border-color: rgba(28, 73, 104, 0.16);
	background: #ffffff;
	color: #52697a !important;
	box-shadow: 0 5px 16px rgba(31, 55, 75, 0.11);
}

html[data-theme="light"] .select-tile-contener .marker-main-contener-control .close-tiles-contener:hover {
	border-color: rgba(20, 122, 193, 0.38);
	background: #eaf5fb;
	color: #0f6ea8 !important;
}

/* Najważniejsza karta pozostaje skupiona na jakości wody, lecz bez ciemnej tafli. */
html[data-theme="light"] .select-tile-contener .marker-water-hero-card {
	--water-ink: #173241;
	border-color: color-mix(in srgb, var(--wqi-color, #16a394) 25%, rgba(28, 73, 104, 0.16));
	background:
		radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--wqi-color, #16a394) 13%, transparent), transparent 35%),
		radial-gradient(circle at 94% 88%, rgba(14, 165, 233, 0.09), transparent 40%),
		linear-gradient(142deg, #ffffff, #f2f9fb 65%, #eaf5f8);
	box-shadow:
		0 20px 40px -28px rgba(31, 55, 75, 0.46),
		0 0 24px color-mix(in srgb, var(--wqi-color, #16a394) 7%, transparent),
		inset 0 1px rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-card::before,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-card::before,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-card::after,
html[data-theme="light"] .select-tile-contener .marker-main-contener-sponsor::after {
	background-image:
		linear-gradient(rgba(28, 73, 104, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(28, 73, 104, 0.055) 1px, transparent 1px);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-card::after {
	background: rgba(14, 165, 233, 0.07);
	box-shadow: 0 -12px 30px rgba(56, 189, 248, 0.04);
}

html[data-theme="light"] .select-tile-contener .marker-water-release-badge {
	border-color: rgba(28, 73, 104, 0.14);
	background: rgba(255, 255, 255, 0.96);
	color: #587080;
	box-shadow: 0 7px 17px rgba(31, 55, 75, 0.1);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-header {
	border-bottom-color: rgba(28, 73, 104, 0.1);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.62), transparent);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-title strong,
html[data-theme="light"] .select-tile-contener .marker-water-hero-summary strong {
	color: #173241;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-title small,
html[data-theme="light"] .select-tile-contener .marker-water-hero-summary small,
html[data-theme="light"] .select-tile-contener .marker-water-hero-ring small,
html[data-theme="light"] .select-tile-contener .marker-water-hero-ring em,
html[data-theme="light"] .select-tile-contener .marker-water-hero-stats small,
html[data-theme="light"] .select-tile-contener .marker-water-hero-history > header small,
html[data-theme="light"] .select-tile-contener .marker-water-hero-history > footer {
	color: #607b8b;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-stats strong,
html[data-theme="light"] .select-tile-contener .marker-water-temperature-copy > strong {
	color: #173241;
}

html[data-theme="light"] .select-tile-contener .marker-water-temperature-copy > small,
html[data-theme="light"] .select-tile-contener .marker-water-temperature-copy > strong em,
html[data-theme="light"] .select-tile-contener .marker-water-temperature-stats small {
	color: #607b8b;
}

html[data-theme="light"] .select-tile-contener .marker-water-temperature-stats strong {
	color: #365666;
}

html[data-theme="light"] .select-tile-contener .marker-water-temperature-stats > span + span {
	border-left-color: rgba(28, 73, 104, 0.11);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-live {
	border-color: rgba(18, 145, 113, 0.24);
	background: rgba(22, 163, 122, 0.1);
	color: #117d61;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-live > small {
	color: #5d8175;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-orbit {
	border-color: rgba(20, 122, 193, 0.11);
	background: radial-gradient(circle, rgba(255, 255, 255, 0.92), rgba(224, 242, 247, 0.5) 64%, transparent 65%);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-orbit::before,
html[data-theme="light"] .select-tile-contener .marker-water-hero-orbit::after {
	border-color: rgba(20, 122, 193, 0.16);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-ring::before {
	border-color: rgba(28, 73, 104, 0.08);
	background: radial-gradient(circle at 38% 28%, #ffffff, #edf6f8 74%);
}

html[data-theme="light"] .select-tile-contener .marker-water-history-point-visible {
	fill: #ffffff;
}

html[data-theme="light"] .select-tile-contener .marker-water-history-tooltip {
	border-color: color-mix(in srgb, var(--wqi-color, #16a394) 32%, rgba(28, 73, 104, 0.16));
	background: rgba(255, 255, 255, 0.98);
	color: #173241;
	box-shadow: 0 9px 24px rgba(31, 55, 75, 0.16);
}

html[data-theme="light"] .select-tile-contener .marker-water-history-tooltip::after {
	background: #ffffff;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-temperature,
html[data-theme="light"] .select-tile-contener .marker-water-hero-quick-action {
	border-color: rgba(28, 73, 104, 0.13);
	background: rgba(255, 255, 255, 0.72);
	color: #274452;
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.85);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-temperature:hover,
html[data-theme="light"] .select-tile-contener .marker-water-hero-quick-action:hover {
	border-color: rgba(20, 122, 193, 0.35);
	background: #e8f5fa;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-footer {
	border-top-color: rgba(28, 73, 104, 0.09);
	background: rgba(233, 244, 247, 0.62);
	color: #607b8b;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-brand,
html[data-theme="light"] .select-tile-contener .marker-water-hero-brand > strong {
	color: #365666;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-brand > small {
	color: #718692;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-quick-action i {
	color: #147ab0;
}

/* Ostrzeżenie statusu znajduje się bezpośrednio pod akcjami punktu. */
html[data-theme="light"] .select-tile-contener .marker-status-notice {
	--notice-accent: #d92f3d;
	--notice-glow: rgba(217, 47, 61, 0.16);
	border-color: rgba(217, 47, 61, 0.38);
	background:
		radial-gradient(circle at 5% 20%, rgba(235, 72, 84, 0.13), transparent 36%),
		linear-gradient(135deg, #fff8f8, #fdecef);
	box-shadow:
		0 16px 32px -24px rgba(109, 24, 35, 0.42),
		0 0 24px -17px var(--notice-glow),
		inset 0 1px rgba(255, 255, 255, 0.92);
	color: #721b25;
}

html[data-theme="light"] .select-tile-contener .marker-status-notice::before {
	opacity: 0.34;
	background-image:
		linear-gradient(rgba(180, 42, 54, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(180, 42, 54, 0.06) 1px, transparent 1px);
}

html[data-theme="light"] .select-tile-contener .marker-status-notice.is-service,
html[data-theme="light"] .select-tile-contener .marker-status-notice.is-restricted {
	--notice-accent: #d92f3d;
	--notice-glow: rgba(217, 47, 61, 0.18);
}

html[data-theme="light"] .select-tile-contener .marker-status-notice-icon {
	border-color: rgba(217, 47, 61, 0.35);
	background: #ffffff;
	box-shadow:
		0 8px 18px -12px rgba(127, 24, 35, 0.48),
		inset 0 1px rgba(255, 255, 255, 0.9);
	color: #d92f3d;
}

html[data-theme="light"] .select-tile-contener .marker-status-notice-copy strong {
	color: #7f1d29;
}

html[data-theme="light"] .select-tile-contener .marker-status-notice-copy small,
html[data-theme="light"] .select-tile-contener .marker-status-notice.is-service .marker-status-notice-copy small {
	color: #9d3c46;
}

html[data-theme="light"] .select-tile-contener .marker-status-notice-pulse {
	background: #d92f3d;
	box-shadow: 0 0 0 5px rgba(217, 47, 61, 0.12), 0 0 12px rgba(217, 47, 61, 0.5);
}

/* Atmosfera: jasna karta wspierająca, wyraźnie spokojniejsza od karty jakości wody. */
html[data-theme="light"] .select-tile-contener .marker-atmosphere-card {
	--atmosphere-border: rgba(28, 73, 104, 0.15);
	border-color: var(--atmosphere-border);
	background:
		radial-gradient(circle at 8% 10%, rgba(251, 146, 60, 0.09), transparent 30%),
		radial-gradient(circle at 94% 92%, rgba(59, 130, 246, 0.08), transparent 36%),
		linear-gradient(138deg, #ffffff, #f3f8fa);
	box-shadow:
		0 18px 38px -26px rgba(31, 55, 75, 0.43),
		inset 0 1px rgba(255, 255, 255, 0.9);
	color: #203845;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-header {
	border-bottom-color: rgba(28, 73, 104, 0.1);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.62), transparent);
}

html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-header .marker-atmosphere-heading strong,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-value,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-stats strong {
	color: #173241;
}

html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-header .marker-atmosphere-heading small,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-label > span:first-child,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-value span,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-stats small {
	color: #627b89;
}

html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-metric + .marker-atmosphere-minimal-metric,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-stats > span + span {
	border-left-color: rgba(28, 73, 104, 0.11);
}

html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-trend b {
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 4px 12px rgba(31, 55, 75, 0.13);
}

/* Tryb kompaktowy */
html[data-theme="light"] .select-tile-contener .marker-mode-switch {
	border-color: rgba(28, 73, 104, 0.14);
	background: rgba(232, 240, 244, 0.8);
}

html[data-theme="light"] .select-tile-contener .marker-mode-button {
	color: #627987;
}

html[data-theme="light"] .select-tile-contener .marker-mode-button:hover {
	color: #0f6ea8;
}

html[data-theme="light"] .select-tile-contener .marker-mode-button.is-active {
	background: #ffffff;
	color: #147d73;
	box-shadow: 0 3px 10px rgba(31, 55, 75, 0.12);
}

html[data-theme="light"] .select-tile-contener .marker-group-name {
	color: #294552;
}

html[data-theme="light"] .select-tile-contener .marker-group-line {
	background: linear-gradient(90deg, rgba(28, 73, 104, 0.18), transparent);
}

html[data-theme="light"] .select-tile-contener .marker-group-count {
	border-color: rgba(28, 73, 104, 0.1);
	background: rgba(28, 73, 104, 0.06);
	color: #617987;
}

html[data-theme="light"] .select-tile-contener .marker-group-tiles .marker-tile.marker-widget-group-item {
	border-color: rgba(28, 73, 104, 0.12);
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 7px 18px rgba(31, 55, 75, 0.06);
	color: #223c49;
}

html[data-theme="light"] .select-tile-contener .marker-group-tiles .marker-tile:hover {
	border-color: rgba(20, 150, 139, 0.35);
	background: #eefaf7;
}

html[data-theme="light"] .select-tile-contener .marker-tile-label,
html[data-theme="light"] .select-tile-contener .marker-tile-value small {
	color: #667d8b;
}

html[data-theme="light"] .select-tile-contener .marker-tile-value {
	color: #173241;
}

/* Ładowanie oraz karta sponsora nie mogą migać ciemną powierzchnią przy otwieraniu panelu. */
html[data-theme="light"] .select-tile-contener .marker-wait-for-data {
	border-color: rgba(28, 73, 104, 0.14);
	background:
		radial-gradient(circle at 50% 35%, rgba(20, 150, 139, 0.1), transparent 36%),
		linear-gradient(145deg, #ffffff, #eef6f8);
	box-shadow: 0 18px 40px -28px rgba(31, 55, 75, 0.46);
	color: #294552;
}

html[data-theme="light"] .select-tile-contener .marker-loading-header,
html[data-theme="light"] .select-tile-contener .marker-loading-footer {
	border-color: rgba(28, 73, 104, 0.1);
	background: rgba(255, 255, 255, 0.55);
}

html[data-theme="light"] .select-tile-contener .marker-loading-copy > strong {
	color: #173241;
}

html[data-theme="light"] .select-tile-contener .marker-loading-copy > small,
html[data-theme="light"] .select-tile-contener .marker-loading-copy > em,
html[data-theme="light"] .select-tile-contener .marker-loading-footer {
	color: #617987;
}

html[data-theme="light"] .select-tile-contener .marker-loading-beacon {
	border-color: rgba(20, 150, 139, 0.24);
	background: radial-gradient(circle, rgba(22, 163, 148, 0.14), rgba(255, 255, 255, 0.92) 68%);
	box-shadow: 0 0 20px rgba(20, 150, 139, 0.1);
}

html[data-theme="light"] .select-tile-contener .marker-main-contener-sponsor {
	border-color: rgba(28, 73, 104, 0.14);
	background:
		radial-gradient(circle at 9% 20%, rgba(251, 191, 36, 0.1), transparent 32%),
		radial-gradient(circle at 94% 100%, rgba(56, 189, 248, 0.08), transparent 39%),
		linear-gradient(135deg, #ffffff, #f1f7f9);
	background-color: #ffffff;
	box-shadow:
		0 18px 34px -25px rgba(31, 55, 75, 0.4),
		inset 0 1px rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .select-tile-contener .marker-main-contener-sponsor:hover,
html[data-theme="light"] .select-tile-contener .marker-main-contener-sponsor:focus-visible {
	border-color: rgba(20, 150, 139, 0.35);
	box-shadow: 0 20px 38px -24px rgba(31, 55, 75, 0.48);
}

html[data-theme="light"] .select-tile-contener .select-tile-header-sponsor-logo {
	border-color: rgba(198, 145, 20, 0.22);
	background: rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .select-tile-contener .marker-main-contener-sponsor .select-tile-header-sponsor-description-name {
	color: #173241;
}

html[data-theme="light"] .select-tile-contener .select-tile-header-sponsor-description-url {
	color: #617987;
}

html[data-theme="light"] .select-tile-contener .marker-sponsor-action {
	border-color: rgba(20, 122, 193, 0.2);
	background: rgba(20, 122, 193, 0.08);
	color: #147ab0;
}

@media (max-width: 767px) {
	html[data-theme="light"] .select-tile-contener {
		background:
			radial-gradient(circle at 0 8%, rgba(22, 163, 148, 0.08), transparent 28%),
			linear-gradient(160deg, #ffffff, #eef6f8);
		box-shadow: 0 -22px 52px -30px rgba(31, 55, 75, 0.42);
	}

	html[data-theme="light"] .select-tile-contener::before {
		background: rgba(28, 73, 104, 0.24);
	}
}


/* css/account/zzz_safe_area.css */
/**************************************************************************************************
	@author         waterly.eu
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           zzz_safe_area.css
	@description    Strefy bezpieczne (notch, Dynamic Island, pasek home, zaokrąglenia ekranu).

	                Aplikacja natywna renderuje WebView od krawędzi do krawędzi
	                (ContentView.swift -> .ignoresSafeArea), a index.html deklaruje
	                viewport-fit=cover. Dzięki temu mapa jest pełnoekranowa, ale każdy element
	                interfejsu musi sam odsunąć się od stref niebezpiecznych - robi to ten plik.

	                Ładowany jako ostatni arkusz z css/account (kolejność alfabetyczna w bundlu),
	                więc nadpisuje pozycjonowanie z map_ui.css, main_frame.css i pozostałych.

	                Zmienne mają wartości domyślne 0px, więc w zwykłej przeglądarce i na desktopie
	                nic się nie zmienia - reguły są bezpieczne do stosowania bez klasy .native-app.
**************************************************************************************************/

/******************************************* Zmienne bazowe ***************************************/
	:root {
		--safe-top: env(safe-area-inset-top, 0px);
		--safe-right: env(safe-area-inset-right, 0px);
		--safe-bottom: env(safe-area-inset-bottom, 0px);
		--safe-left: env(safe-area-inset-left, 0px);

		/* Minimalny oddech interfejsu przy krawędzi ekranu - używany razem ze strefami */
		--safe-gutter: 10px;

		/* Gotowe odstępy: odstęp bazowy powiększony o strefę bezpieczną danej krawędzi */
		--safe-gutter-top: calc(var(--safe-gutter) + var(--safe-top));
		--safe-gutter-right: calc(var(--safe-gutter) + var(--safe-right));
		--safe-gutter-bottom: calc(var(--safe-gutter) + var(--safe-bottom));
		--safe-gutter-left: calc(var(--safe-gutter) + var(--safe-left));
	}

/**************************************** Klasy pomocnicze ****************************************/
	/*
		Odpowiedniki klas z linii alpha (styles/apple.scss), żeby szablony można było przenosić
		między projektami bez przepisywania. Nazwy zachowane 1:1.
	*/
	.p-apple-safe-area {
		padding-top: var(--safe-top);
		padding-right: var(--safe-right);
		padding-bottom: var(--safe-bottom);
		padding-left: var(--safe-left);
	}

	.pt-apple-safe-area { padding-top: var(--safe-top); }
	.pr-apple-safe-area { padding-right: var(--safe-right); }
	.pb-apple-safe-area { padding-bottom: var(--safe-bottom); }
	.pl-apple-safe-area { padding-left: var(--safe-left); }

	.m-apple-safe-area {
		margin-top: var(--safe-top);
		margin-right: var(--safe-right);
		margin-bottom: var(--safe-bottom);
		margin-left: var(--safe-left);
	}

	.mt-apple-safe-area { margin-top: var(--safe-top); }
	.mr-apple-safe-area { margin-right: var(--safe-right); }
	.mb-apple-safe-area { margin-bottom: var(--safe-bottom); }
	.ml-apple-safe-area { margin-left: var(--safe-left); }

	.frame-apple-safe-area {
		top: var(--safe-top);
		right: var(--safe-right);
		bottom: var(--safe-bottom);
		left: var(--safe-left);
	}

/****************************************** Kontrolki mapy ****************************************/
	/*
		Rogi SDK: pionowo odsuwamy je zawsze (notch w pionie, pasek home na dole), poziomo
		strefy są niezerowe tylko w orientacji poziomej - wtedy zaokrąglenia ekranu i wcięcie
		kamery zjadałyby przyciski przy lewej lub prawej krawędzi.
	*/
	#main_map_content .maplibregl-ctrl-top-left,
	#main_map_content .maplibregl-ctrl-top-right {
		/* MapLibre adds the regular 10 px control margin. Add only the actual
		   safe-area inset here, otherwise the top gutter is counted twice. */
		top: var(--safe-top);
	}

	#main_map_content .maplibregl-ctrl-top-left,
	#main_map_content .maplibregl-ctrl-bottom-left {
		left: var(--safe-left);
	}

	#main_map_content .maplibregl-ctrl-top-right,
	#main_map_content .maplibregl-ctrl-bottom-right {
		right: var(--safe-right);
	}

	/*
		Dolne stosy trzymają się nad dokiem WQI - dokładamy do tego pasek home oraz wysokość
		dolnej nawigacji telefonu (--waterly-footer-offset jest 0px tam, gdzie paska nie ma).
	*/
	#main_map_content .maplibregl-ctrl-bottom-right {
		padding-bottom: calc(var(--wqi-dock-height) + var(--safe-bottom) + var(--waterly-footer-offset, 0px));
	}

	#main_map_content .maplibregl-ctrl-bottom-left {
		padding-bottom: calc(var(--wqi-bottom-left-pad) + var(--safe-bottom) + var(--waterly-footer-offset, 0px));
	}

	/*
		Dok: widget WQI, atrybucja i prywatność. Padding pisany w całości, bo map_ui.css ustawia
		go skrótem i punktowa zmiana jednej krawędzi byłaby nadpisana przez breakpointy poniżej.
	*/
	#main_map_content .waterly-map-dock {
		padding: 0 var(--safe-gutter-right) calc(var(--safe-gutter-bottom) + var(--waterly-footer-offset, 0px)) var(--safe-gutter-left);
	}

	/* Komunikat "skopiowano" wychodzi znad doku, więc też musi ominąć pasek home */
	.waterly-map-copy-feedback {
		bottom: calc(var(--wqi-dock-height, 42px) + 14px + var(--safe-bottom) + var(--waterly-footer-offset, 0px));
	}

	/* Wąskie ekrany: map_ui.css schodzi z odstępem do 8 px - trzymamy tę samą proporcję */
	@media (max-width: 639.98px) {
		#main_map_content .waterly-map-dock {
			padding:
				0
				calc(8px + var(--safe-right))
				calc(8px + var(--safe-bottom) + var(--waterly-footer-offset, 0px))
				calc(8px + var(--safe-left));
		}
	}

	/* Gauge przy lewej krawędzi w orientacji poziomej */
	#main_map_content.wqi-variant-gauge .wqi-map-legend {
		left: calc(var(--safe-gutter) + var(--safe-left));
	}

	/* Panel warstw i popovery nie mogą schować się pod paskiem home */
	#main_map_content .map-layer-switcher,
	#main_map_content .waterly-map-popover {
		max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 96px);
		overflow-y: auto;
	}

/****************************************** Rama aplikacji ****************************************/
	/*
		Górny pasek legacy jest przezroczysty i w widoku mapy praktycznie pusty, ale wciąż trzyma
		pozycje elementów sprzętowych (USB, programator, mostek) w sesji zalogowanej.
	*/
	body.has-session .navbar-website {
		margin-top: var(--safe-top);
		margin-left: var(--safe-left);
		margin-right: var(--safe-right);
	}

	/*
		Podstrony (profil, zdarzenia, laboratorium...) to osobna, przewijana warstwa nad mapą.
		Startuje pod paskiem 56 px, który sam zjeżdża o strefę górną, a na dole zostawia miejsce
		na pasek home - inaczej ostatni wiersz listy jest nieklikalny.
	*/
	.main-container-subpage {
		top: calc(56px + var(--safe-top));
		height: calc(100% - 56px - var(--safe-top));
		padding-bottom: var(--safe-bottom);
		padding-left: var(--safe-left);
		padding-right: var(--safe-right);
		/* Bezwładne przewijanie iOS bez wychodzenia gestem poza kontener */
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

/************************************ Panele punktów pomiarowych **********************************/
	/*
		Lista punktów: panel pełnej wysokości przy prawej krawędzi. Sam ma padding 14 px, więc
		nagłówek chowałby się pod notchem, a ostatni wiersz pod paskiem home.
	*/
	.tiles-list-contener {
		padding-top: calc(14px + var(--safe-top));
		padding-right: calc(14px + var(--safe-right));
		padding-bottom: calc(14px + var(--safe-bottom));
		padding-left: calc(14px + var(--safe-left));
	}

	/*
		Panel punktu pomiarowego na telefonie jest arkuszem dokowanym do dolnej krawędzi
		(management.css, breakpoint 767 px). Wysokość 94dvh sięgała pod Dynamic Island razem
		z przyciskiem zamknięcia w prawym górnym rogu - odejmujemy obie strefy, żeby górna
		krawędź arkusza zatrzymała się pod wyspą.
	*/
	@media (max-width: 767px) {
		.select-tile-contener {
			bottom: calc(max(4px, var(--safe-bottom)) + var(--waterly-footer-offset, 0px));
			height: min(
				94dvh,
				calc(100dvh - 12px - var(--safe-top) - var(--safe-bottom) - var(--waterly-footer-offset, 0px))
			) !important;
			max-height: min(
				94dvh,
				calc(100dvh - 12px - var(--safe-top) - var(--safe-bottom) - var(--waterly-footer-offset, 0px))
			) !important;
		}

		/* Lista punktów też kończy się nad paskiem nawigacji */
		.tiles-list-contener {
			padding-bottom: calc(14px + var(--safe-bottom) + var(--waterly-footer-offset, 0px));
		}
	}

/************************************* Zgody i okna modalne ***************************************/
	.waterly-consent-banner {
		right: calc(16px + var(--safe-right));
		bottom: calc(16px + var(--safe-bottom) + var(--waterly-footer-offset, 0px));
		left: calc(16px + var(--safe-left));
	}

	.waterly-privacy-backdrop {
		padding:
			calc(20px + var(--safe-top))
			calc(20px + var(--safe-right))
			calc(20px + var(--safe-bottom))
			calc(20px + var(--safe-left));
	}

	.waterly-privacy-dialog {
		/* 100dvh zamiast 100vh: pasek adresu Safari nie ucina wtedy stopki okna */
		max-height: calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom));
	}


/* fonts/FontAwesome/font-awesome.css */
/*!
 * Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
.fa,
.fas,
.far,
.fal,
.fad,
.fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1; }

.fa-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -.0667em; }

.fa-xs {
  font-size: .75em; }

.fa-sm {
  font-size: .875em; }

.fa-1x {
  font-size: 1em; }

.fa-2x {
  font-size: 2em; }

.fa-3x {
  font-size: 3em; }

.fa-4x {
  font-size: 4em; }

.fa-5x {
  font-size: 5em; }

.fa-6x {
  font-size: 6em; }

.fa-7x {
  font-size: 7em; }

.fa-8x {
  font-size: 8em; }

.fa-9x {
  font-size: 9em; }

.fa-10x {
  font-size: 10em; }

.fa-fw {
  text-align: center;
  width: 1.25em; }

.fa-ul {
  list-style-type: none;
  margin-left: 2.5em;
  padding-left: 0; }
  .fa-ul > li {
    position: relative; }

.fa-li {
  left: -2em;
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit; }

.fa-border {
  border: solid 0.08em #eee;
  border-radius: .1em;
  padding: .2em .25em .15em; }

.fa-pull-left {
  float: left; }

.fa-pull-right {
  float: right; }

.fa.fa-pull-left,
.fas.fa-pull-left,
.far.fa-pull-left,
.fal.fa-pull-left,
.fab.fa-pull-left {
  margin-right: .3em; }

.fa.fa-pull-right,
.fas.fa-pull-right,
.far.fa-pull-right,
.fal.fa-pull-right,
.fab.fa-pull-right {
  margin-left: .3em; }

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear; }

.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
          animation: fa-spin 1s infinite steps(8); }

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg); }

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg); }

.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg); }

.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1); }

.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
          transform: scale(1, -1); }

.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(-1, -1);
          transform: scale(-1, -1); }

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical,
:root .fa-flip-both {
  -webkit-filter: none;
          filter: none; }

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em; }

.fa-stack-1x,
.fa-stack-2x {
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%; }

.fa-stack-1x {
  line-height: inherit; }

.fa-stack-2x {
  font-size: 2em; }

.fa-inverse {
  color: #fff; }

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-500px:before {
  content: "\f26e"; }

.fa-accessible-icon:before {
  content: "\f368"; }

.fa-accusoft:before {
  content: "\f369"; }

.fa-acquisitions-incorporated:before {
  content: "\f6af"; }

.fa-ad:before {
  content: "\f641"; }

.fa-address-book:before {
  content: "\f2b9"; }

.fa-address-card:before {
  content: "\f2bb"; }

.fa-adjust:before {
  content: "\f042"; }

.fa-adn:before {
  content: "\f170"; }

.fa-adversal:before {
  content: "\f36a"; }

.fa-affiliatetheme:before {
  content: "\f36b"; }

.fa-air-freshener:before {
  content: "\f5d0"; }

.fa-airbnb:before {
  content: "\f834"; }

.fa-algolia:before {
  content: "\f36c"; }

.fa-align-center:before {
  content: "\f037"; }

.fa-align-justify:before {
  content: "\f039"; }

.fa-align-left:before {
  content: "\f036"; }

.fa-align-right:before {
  content: "\f038"; }

.fa-alipay:before {
  content: "\f642"; }

.fa-allergies:before {
  content: "\f461"; }

.fa-amazon:before {
  content: "\f270"; }

.fa-amazon-pay:before {
  content: "\f42c"; }

.fa-ambulance:before {
  content: "\f0f9"; }

.fa-american-sign-language-interpreting:before {
  content: "\f2a3"; }

.fa-amilia:before {
  content: "\f36d"; }

.fa-anchor:before {
  content: "\f13d"; }

.fa-android:before {
  content: "\f17b"; }

.fa-angellist:before {
  content: "\f209"; }

.fa-angle-double-down:before {
  content: "\f103"; }

.fa-angle-double-left:before {
  content: "\f100"; }

.fa-angle-double-right:before {
  content: "\f101"; }

.fa-angle-double-up:before {
  content: "\f102"; }

.fa-angle-down:before {
  content: "\f107"; }

.fa-angle-left:before {
  content: "\f104"; }

.fa-angle-right:before {
  content: "\f105"; }

.fa-angle-up:before {
  content: "\f106"; }

.fa-angry:before {
  content: "\f556"; }

.fa-angrycreative:before {
  content: "\f36e"; }

.fa-angular:before {
  content: "\f420"; }

.fa-ankh:before {
  content: "\f644"; }

.fa-app-store:before {
  content: "\f36f"; }

.fa-app-store-ios:before {
  content: "\f370"; }

.fa-apper:before {
  content: "\f371"; }

.fa-apple:before {
  content: "\f179"; }

.fa-apple-alt:before {
  content: "\f5d1"; }

.fa-apple-pay:before {
  content: "\f415"; }

.fa-archive:before {
  content: "\f187"; }

.fa-archway:before {
  content: "\f557"; }

.fa-arrow-alt-circle-down:before {
  content: "\f358"; }

.fa-arrow-alt-circle-left:before {
  content: "\f359"; }

.fa-arrow-alt-circle-right:before {
  content: "\f35a"; }

.fa-arrow-alt-circle-up:before {
  content: "\f35b"; }

.fa-arrow-circle-down:before {
  content: "\f0ab"; }

.fa-arrow-circle-left:before {
  content: "\f0a8"; }

.fa-arrow-circle-right:before {
  content: "\f0a9"; }

.fa-arrow-circle-up:before {
  content: "\f0aa"; }

.fa-arrow-down:before {
  content: "\f063"; }

.fa-arrow-left:before {
  content: "\f060"; }

.fa-arrow-right:before {
  content: "\f061"; }

.fa-arrow-up:before {
  content: "\f062"; }

.fa-arrows-alt:before {
  content: "\f0b2"; }

.fa-arrows-alt-h:before {
  content: "\f337"; }

.fa-arrows-alt-v:before {
  content: "\f338"; }

.fa-artstation:before {
  content: "\f77a"; }

.fa-assistive-listening-systems:before {
  content: "\f2a2"; }

.fa-asterisk:before {
  content: "\f069"; }

.fa-asymmetrik:before {
  content: "\f372"; }

.fa-at:before {
  content: "\f1fa"; }

.fa-atlas:before {
  content: "\f558"; }

.fa-atlassian:before {
  content: "\f77b"; }

.fa-atom:before {
  content: "\f5d2"; }

.fa-audible:before {
  content: "\f373"; }

.fa-audio-description:before {
  content: "\f29e"; }

.fa-autoprefixer:before {
  content: "\f41c"; }

.fa-avianex:before {
  content: "\f374"; }

.fa-aviato:before {
  content: "\f421"; }

.fa-award:before {
  content: "\f559"; }

.fa-aws:before {
  content: "\f375"; }

.fa-baby:before {
  content: "\f77c"; }

.fa-baby-carriage:before {
  content: "\f77d"; }

.fa-backspace:before {
  content: "\f55a"; }

.fa-backward:before {
  content: "\f04a"; }

.fa-bacon:before {
  content: "\f7e5"; }

.fa-bacteria:before {
  content: "\e059"; }

.fa-bacterium:before {
  content: "\e05a"; }

.fa-bahai:before {
  content: "\f666"; }

.fa-balance-scale:before {
  content: "\f24e"; }

.fa-balance-scale-left:before {
  content: "\f515"; }

.fa-balance-scale-right:before {
  content: "\f516"; }

.fa-ban:before {
  content: "\f05e"; }

.fa-band-aid:before {
  content: "\f462"; }

.fa-bandcamp:before {
  content: "\f2d5"; }

.fa-barcode:before {
  content: "\f02a"; }

.fa-bars:before {
  content: "\f0c9"; }

.fa-baseball-ball:before {
  content: "\f433"; }

.fa-basketball-ball:before {
  content: "\f434"; }

.fa-bath:before {
  content: "\f2cd"; }

.fa-battery-empty:before {
  content: "\f244"; }

.fa-battery-full:before {
  content: "\f240"; }

.fa-battery-half:before {
  content: "\f242"; }

.fa-battery-quarter:before {
  content: "\f243"; }

.fa-battery-three-quarters:before {
  content: "\f241"; }

.fa-battle-net:before {
  content: "\f835"; }

.fa-bed:before {
  content: "\f236"; }

.fa-beer:before {
  content: "\f0fc"; }

.fa-behance:before {
  content: "\f1b4"; }

.fa-behance-square:before {
  content: "\f1b5"; }

.fa-bell:before {
  content: "\f0f3"; }

.fa-bell-slash:before {
  content: "\f1f6"; }

.fa-bezier-curve:before {
  content: "\f55b"; }

.fa-bible:before {
  content: "\f647"; }

.fa-bicycle:before {
  content: "\f206"; }

.fa-biking:before {
  content: "\f84a"; }

.fa-bimobject:before {
  content: "\f378"; }

.fa-binoculars:before {
  content: "\f1e5"; }

.fa-biohazard:before {
  content: "\f780"; }

.fa-birthday-cake:before {
  content: "\f1fd"; }

.fa-bitbucket:before {
  content: "\f171"; }

.fa-bitcoin:before {
  content: "\f379"; }

.fa-bity:before {
  content: "\f37a"; }

.fa-black-tie:before {
  content: "\f27e"; }

.fa-blackberry:before {
  content: "\f37b"; }

.fa-blender:before {
  content: "\f517"; }

.fa-blender-phone:before {
  content: "\f6b6"; }

.fa-blind:before {
  content: "\f29d"; }

.fa-blog:before {
  content: "\f781"; }

.fa-blogger:before {
  content: "\f37c"; }

.fa-blogger-b:before {
  content: "\f37d"; }

.fa-bluetooth:before {
  content: "\f293"; }

.fa-bluetooth-b:before {
  content: "\f294"; }

.fa-bold:before {
  content: "\f032"; }

.fa-bolt:before {
  content: "\f0e7"; }

.fa-bomb:before {
  content: "\f1e2"; }

.fa-bone:before {
  content: "\f5d7"; }

.fa-bong:before {
  content: "\f55c"; }

.fa-book:before {
  content: "\f02d"; }

.fa-book-dead:before {
  content: "\f6b7"; }

.fa-book-medical:before {
  content: "\f7e6"; }

.fa-book-open:before {
  content: "\f518"; }

.fa-book-reader:before {
  content: "\f5da"; }

.fa-bookmark:before {
  content: "\f02e"; }

.fa-bootstrap:before {
  content: "\f836"; }

.fa-border-all:before {
  content: "\f84c"; }

.fa-border-none:before {
  content: "\f850"; }

.fa-border-style:before {
  content: "\f853"; }

.fa-bowling-ball:before {
  content: "\f436"; }

.fa-box:before {
  content: "\f466"; }

.fa-box-open:before {
  content: "\f49e"; }

.fa-box-tissue:before {
  content: "\e05b"; }

.fa-boxes:before {
  content: "\f468"; }

.fa-braille:before {
  content: "\f2a1"; }

.fa-brain:before {
  content: "\f5dc"; }

.fa-bread-slice:before {
  content: "\f7ec"; }

.fa-briefcase:before {
  content: "\f0b1"; }

.fa-briefcase-medical:before {
  content: "\f469"; }

.fa-broadcast-tower:before {
  content: "\f519"; }

.fa-broom:before {
  content: "\f51a"; }

.fa-brush:before {
  content: "\f55d"; }

.fa-btc:before {
  content: "\f15a"; }

.fa-buffer:before {
  content: "\f837"; }

.fa-bug:before {
  content: "\f188"; }

.fa-building:before {
  content: "\f1ad"; }

.fa-bullhorn:before {
  content: "\f0a1"; }

.fa-bullseye:before {
  content: "\f140"; }

.fa-burn:before {
  content: "\f46a"; }

.fa-buromobelexperte:before {
  content: "\f37f"; }

.fa-bus:before {
  content: "\f207"; }

.fa-bus-alt:before {
  content: "\f55e"; }

.fa-business-time:before {
  content: "\f64a"; }

.fa-buy-n-large:before {
  content: "\f8a6"; }

.fa-buysellads:before {
  content: "\f20d"; }

.fa-calculator:before {
  content: "\f1ec"; }

.fa-calendar:before {
  content: "\f133"; }

.fa-calendar-alt:before {
  content: "\f073"; }

.fa-calendar-check:before {
  content: "\f274"; }

.fa-calendar-day:before {
  content: "\f783"; }

.fa-calendar-minus:before {
  content: "\f272"; }

.fa-calendar-plus:before {
  content: "\f271"; }

.fa-calendar-times:before {
  content: "\f273"; }

.fa-calendar-week:before {
  content: "\f784"; }

.fa-camera:before {
  content: "\f030"; }

.fa-camera-retro:before {
  content: "\f083"; }

.fa-campground:before {
  content: "\f6bb"; }

.fa-canadian-maple-leaf:before {
  content: "\f785"; }

.fa-candy-cane:before {
  content: "\f786"; }

.fa-cannabis:before {
  content: "\f55f"; }

.fa-capsules:before {
  content: "\f46b"; }

.fa-car:before {
  content: "\f1b9"; }

.fa-car-alt:before {
  content: "\f5de"; }

.fa-car-battery:before {
  content: "\f5df"; }

.fa-car-crash:before {
  content: "\f5e1"; }

.fa-car-side:before {
  content: "\f5e4"; }

.fa-caravan:before {
  content: "\f8ff"; }

.fa-caret-down:before {
  content: "\f0d7"; }

.fa-caret-left:before {
  content: "\f0d9"; }

.fa-caret-right:before {
  content: "\f0da"; }

.fa-caret-square-down:before {
  content: "\f150"; }

.fa-caret-square-left:before {
  content: "\f191"; }

.fa-caret-square-right:before {
  content: "\f152"; }

.fa-caret-square-up:before {
  content: "\f151"; }

.fa-caret-up:before {
  content: "\f0d8"; }

.fa-carrot:before {
  content: "\f787"; }

.fa-cart-arrow-down:before {
  content: "\f218"; }

.fa-cart-plus:before {
  content: "\f217"; }

.fa-cash-register:before {
  content: "\f788"; }

.fa-cat:before {
  content: "\f6be"; }

.fa-cc-amazon-pay:before {
  content: "\f42d"; }

.fa-cc-amex:before {
  content: "\f1f3"; }

.fa-cc-apple-pay:before {
  content: "\f416"; }

.fa-cc-diners-club:before {
  content: "\f24c"; }

.fa-cc-discover:before {
  content: "\f1f2"; }

.fa-cc-jcb:before {
  content: "\f24b"; }

.fa-cc-mastercard:before {
  content: "\f1f1"; }

.fa-cc-paypal:before {
  content: "\f1f4"; }

.fa-cc-stripe:before {
  content: "\f1f5"; }

.fa-cc-visa:before {
  content: "\f1f0"; }

.fa-centercode:before {
  content: "\f380"; }

.fa-centos:before {
  content: "\f789"; }

.fa-certificate:before {
  content: "\f0a3"; }

.fa-chair:before {
  content: "\f6c0"; }

.fa-chalkboard:before {
  content: "\f51b"; }

.fa-chalkboard-teacher:before {
  content: "\f51c"; }

.fa-charging-station:before {
  content: "\f5e7"; }

.fa-chart-area:before {
  content: "\f1fe"; }

.fa-chart-bar:before {
  content: "\f080"; }

.fa-chart-line:before {
  content: "\f201"; }

.fa-chart-pie:before {
  content: "\f200"; }

.fa-check:before {
  content: "\f00c"; }

.fa-check-circle:before {
  content: "\f058"; }

.fa-check-double:before {
  content: "\f560"; }

.fa-check-square:before {
  content: "\f14a"; }

.fa-cheese:before {
  content: "\f7ef"; }

.fa-chess:before {
  content: "\f439"; }

.fa-chess-bishop:before {
  content: "\f43a"; }

.fa-chess-board:before {
  content: "\f43c"; }

.fa-chess-king:before {
  content: "\f43f"; }

.fa-chess-knight:before {
  content: "\f441"; }

.fa-chess-pawn:before {
  content: "\f443"; }

.fa-chess-queen:before {
  content: "\f445"; }

.fa-chess-rook:before {
  content: "\f447"; }

.fa-chevron-circle-down:before {
  content: "\f13a"; }

.fa-chevron-circle-left:before {
  content: "\f137"; }

.fa-chevron-circle-right:before {
  content: "\f138"; }

.fa-chevron-circle-up:before {
  content: "\f139"; }

.fa-chevron-down:before {
  content: "\f078"; }

.fa-chevron-left:before {
  content: "\f053"; }

.fa-chevron-right:before {
  content: "\f054"; }

.fa-chevron-up:before {
  content: "\f077"; }

.fa-child:before {
  content: "\f1ae"; }

.fa-chrome:before {
  content: "\f268"; }

.fa-chromecast:before {
  content: "\f838"; }

.fa-church:before {
  content: "\f51d"; }

.fa-circle:before {
  content: "\f111"; }

.fa-circle-notch:before {
  content: "\f1ce"; }

.fa-city:before {
  content: "\f64f"; }

.fa-clinic-medical:before {
  content: "\f7f2"; }

.fa-clipboard:before {
  content: "\f328"; }

.fa-clipboard-check:before {
  content: "\f46c"; }

.fa-clipboard-list:before {
  content: "\f46d"; }

.fa-clock:before {
  content: "\f017"; }

.fa-clone:before {
  content: "\f24d"; }

.fa-closed-captioning:before {
  content: "\f20a"; }

.fa-cloud:before {
  content: "\f0c2"; }

.fa-cloud-download-alt:before {
  content: "\f381"; }

.fa-cloud-meatball:before {
  content: "\f73b"; }

.fa-cloud-moon:before {
  content: "\f6c3"; }

.fa-cloud-moon-rain:before {
  content: "\f73c"; }

.fa-cloud-rain:before {
  content: "\f73d"; }

.fa-cloud-showers-heavy:before {
  content: "\f740"; }

.fa-cloud-sun:before {
  content: "\f6c4"; }

.fa-cloud-sun-rain:before {
  content: "\f743"; }

.fa-cloud-upload-alt:before {
  content: "\f382"; }

.fa-cloudflare:before {
  content: "\e07d"; }

.fa-cloudscale:before {
  content: "\f383"; }

.fa-cloudsmith:before {
  content: "\f384"; }

.fa-cloudversify:before {
  content: "\f385"; }

.fa-cocktail:before {
  content: "\f561"; }

.fa-code:before {
  content: "\f121"; }

.fa-code-branch:before {
  content: "\f126"; }

.fa-codepen:before {
  content: "\f1cb"; }

.fa-codiepie:before {
  content: "\f284"; }

.fa-coffee:before {
  content: "\f0f4"; }

.fa-cog:before {
  content: "\f013"; }

.fa-cogs:before {
  content: "\f085"; }

.fa-coins:before {
  content: "\f51e"; }

.fa-columns:before {
  content: "\f0db"; }

.fa-comment:before {
  content: "\f075"; }

.fa-comment-alt:before {
  content: "\f27a"; }

.fa-comment-dollar:before {
  content: "\f651"; }

.fa-comment-dots:before {
  content: "\f4ad"; }

.fa-comment-medical:before {
  content: "\f7f5"; }

.fa-comment-slash:before {
  content: "\f4b3"; }

.fa-comments:before {
  content: "\f086"; }

.fa-comments-dollar:before {
  content: "\f653"; }

.fa-compact-disc:before {
  content: "\f51f"; }

.fa-compass:before {
  content: "\f14e"; }

.fa-compress:before {
  content: "\f066"; }

.fa-compress-alt:before {
  content: "\f422"; }

.fa-compress-arrows-alt:before {
  content: "\f78c"; }

.fa-concierge-bell:before {
  content: "\f562"; }

.fa-confluence:before {
  content: "\f78d"; }

.fa-connectdevelop:before {
  content: "\f20e"; }

.fa-contao:before {
  content: "\f26d"; }

.fa-cookie:before {
  content: "\f563"; }

.fa-cookie-bite:before {
  content: "\f564"; }

.fa-copy:before {
  content: "\f0c5"; }

.fa-copyright:before {
  content: "\f1f9"; }

.fa-cotton-bureau:before {
  content: "\f89e"; }

.fa-couch:before {
  content: "\f4b8"; }

.fa-cpanel:before {
  content: "\f388"; }

.fa-creative-commons:before {
  content: "\f25e"; }

.fa-creative-commons-by:before {
  content: "\f4e7"; }

.fa-creative-commons-nc:before {
  content: "\f4e8"; }

.fa-creative-commons-nc-eu:before {
  content: "\f4e9"; }

.fa-creative-commons-nc-jp:before {
  content: "\f4ea"; }

.fa-creative-commons-nd:before {
  content: "\f4eb"; }

.fa-creative-commons-pd:before {
  content: "\f4ec"; }

.fa-creative-commons-pd-alt:before {
  content: "\f4ed"; }

.fa-creative-commons-remix:before {
  content: "\f4ee"; }

.fa-creative-commons-sa:before {
  content: "\f4ef"; }

.fa-creative-commons-sampling:before {
  content: "\f4f0"; }

.fa-creative-commons-sampling-plus:before {
  content: "\f4f1"; }

.fa-creative-commons-share:before {
  content: "\f4f2"; }

.fa-creative-commons-zero:before {
  content: "\f4f3"; }

.fa-credit-card:before {
  content: "\f09d"; }

.fa-critical-role:before {
  content: "\f6c9"; }

.fa-crop:before {
  content: "\f125"; }

.fa-crop-alt:before {
  content: "\f565"; }

.fa-cross:before {
  content: "\f654"; }

.fa-crosshairs:before {
  content: "\f05b"; }

.fa-crow:before {
  content: "\f520"; }

.fa-crown:before {
  content: "\f521"; }

.fa-crutch:before {
  content: "\f7f7"; }

.fa-css3:before {
  content: "\f13c"; }

.fa-css3-alt:before {
  content: "\f38b"; }

.fa-cube:before {
  content: "\f1b2"; }

.fa-cubes:before {
  content: "\f1b3"; }

.fa-cut:before {
  content: "\f0c4"; }

.fa-cuttlefish:before {
  content: "\f38c"; }

.fa-d-and-d:before {
  content: "\f38d"; }

.fa-d-and-d-beyond:before {
  content: "\f6ca"; }

.fa-dailymotion:before {
  content: "\e052"; }

.fa-dashcube:before {
  content: "\f210"; }

.fa-database:before {
  content: "\f1c0"; }

.fa-deaf:before {
  content: "\f2a4"; }

.fa-deezer:before {
  content: "\e077"; }

.fa-delicious:before {
  content: "\f1a5"; }

.fa-democrat:before {
  content: "\f747"; }

.fa-deploydog:before {
  content: "\f38e"; }

.fa-deskpro:before {
  content: "\f38f"; }

.fa-desktop:before {
  content: "\f108"; }

.fa-dev:before {
  content: "\f6cc"; }

.fa-deviantart:before {
  content: "\f1bd"; }

.fa-dharmachakra:before {
  content: "\f655"; }

.fa-dhl:before {
  content: "\f790"; }

.fa-diagnoses:before {
  content: "\f470"; }

.fa-diaspora:before {
  content: "\f791"; }

.fa-dice:before {
  content: "\f522"; }

.fa-dice-d20:before {
  content: "\f6cf"; }

.fa-dice-d6:before {
  content: "\f6d1"; }

.fa-dice-five:before {
  content: "\f523"; }

.fa-dice-four:before {
  content: "\f524"; }

.fa-dice-one:before {
  content: "\f525"; }

.fa-dice-six:before {
  content: "\f526"; }

.fa-dice-three:before {
  content: "\f527"; }

.fa-dice-two:before {
  content: "\f528"; }

.fa-digg:before {
  content: "\f1a6"; }

.fa-digital-ocean:before {
  content: "\f391"; }

.fa-digital-tachograph:before {
  content: "\f566"; }

.fa-directions:before {
  content: "\f5eb"; }

.fa-discord:before {
  content: "\f392"; }

.fa-discourse:before {
  content: "\f393"; }

.fa-disease:before {
  content: "\f7fa"; }

.fa-divide:before {
  content: "\f529"; }

.fa-dizzy:before {
  content: "\f567"; }

.fa-dna:before {
  content: "\f471"; }

.fa-dochub:before {
  content: "\f394"; }

.fa-docker:before {
  content: "\f395"; }

.fa-dog:before {
  content: "\f6d3"; }

.fa-dollar-sign:before {
  content: "\f155"; }

.fa-dolly:before {
  content: "\f472"; }

.fa-dolly-flatbed:before {
  content: "\f474"; }

.fa-donate:before {
  content: "\f4b9"; }

.fa-door-closed:before {
  content: "\f52a"; }

.fa-door-open:before {
  content: "\f52b"; }

.fa-dot-circle:before {
  content: "\f192"; }

.fa-dove:before {
  content: "\f4ba"; }

.fa-download:before {
  content: "\f019"; }

.fa-draft2digital:before {
  content: "\f396"; }

.fa-drafting-compass:before {
  content: "\f568"; }

.fa-dragon:before {
  content: "\f6d5"; }

.fa-draw-polygon:before {
  content: "\f5ee"; }

.fa-dribbble:before {
  content: "\f17d"; }

.fa-dribbble-square:before {
  content: "\f397"; }

.fa-dropbox:before {
  content: "\f16b"; }

.fa-drum:before {
  content: "\f569"; }

.fa-drum-steelpan:before {
  content: "\f56a"; }

.fa-drumstick-bite:before {
  content: "\f6d7"; }

.fa-drupal:before {
  content: "\f1a9"; }

.fa-dumbbell:before {
  content: "\f44b"; }

.fa-dumpster:before {
  content: "\f793"; }

.fa-dumpster-fire:before {
  content: "\f794"; }

.fa-dungeon:before {
  content: "\f6d9"; }

.fa-dyalog:before {
  content: "\f399"; }

.fa-earlybirds:before {
  content: "\f39a"; }

.fa-ebay:before {
  content: "\f4f4"; }

.fa-edge:before {
  content: "\f282"; }

.fa-edge-legacy:before {
  content: "\e078"; }

.fa-edit:before {
  content: "\f044"; }

.fa-egg:before {
  content: "\f7fb"; }

.fa-eject:before {
  content: "\f052"; }

.fa-elementor:before {
  content: "\f430"; }

.fa-ellipsis-h:before {
  content: "\f141"; }

.fa-ellipsis-v:before {
  content: "\f142"; }

.fa-ello:before {
  content: "\f5f1"; }

.fa-ember:before {
  content: "\f423"; }

.fa-empire:before {
  content: "\f1d1"; }

.fa-envelope:before {
  content: "\f0e0"; }

.fa-envelope-open:before {
  content: "\f2b6"; }

.fa-envelope-open-text:before {
  content: "\f658"; }

.fa-envelope-square:before {
  content: "\f199"; }

.fa-envira:before {
  content: "\f299"; }

.fa-equals:before {
  content: "\f52c"; }

.fa-eraser:before {
  content: "\f12d"; }

.fa-erlang:before {
  content: "\f39d"; }

.fa-ethereum:before {
  content: "\f42e"; }

.fa-ethernet:before {
  content: "\f796"; }

.fa-etsy:before {
  content: "\f2d7"; }

.fa-euro-sign:before {
  content: "\f153"; }

.fa-evernote:before {
  content: "\f839"; }

.fa-exchange-alt:before {
  content: "\f362"; }

.fa-exclamation:before {
  content: "\f12a"; }

.fa-exclamation-circle:before {
  content: "\f06a"; }

.fa-exclamation-triangle:before {
  content: "\f071"; }

.fa-expand:before {
  content: "\f065"; }

.fa-expand-alt:before {
  content: "\f424"; }

.fa-expand-arrows-alt:before {
  content: "\f31e"; }

.fa-expeditedssl:before {
  content: "\f23e"; }

.fa-external-link-alt:before {
  content: "\f35d"; }

.fa-external-link-square-alt:before {
  content: "\f360"; }

.fa-eye:before {
  content: "\f06e"; }

.fa-eye-dropper:before {
  content: "\f1fb"; }

.fa-eye-slash:before {
  content: "\f070"; }

.fa-facebook:before {
  content: "\f09a"; }

.fa-facebook-f:before {
  content: "\f39e"; }

.fa-facebook-messenger:before {
  content: "\f39f"; }

.fa-facebook-square:before {
  content: "\f082"; }

.fa-fan:before {
  content: "\f863"; }

.fa-fantasy-flight-games:before {
  content: "\f6dc"; }

.fa-fast-backward:before {
  content: "\f049"; }

.fa-fast-forward:before {
  content: "\f050"; }

.fa-faucet:before {
  content: "\e005"; }

.fa-fax:before {
  content: "\f1ac"; }

.fa-feather:before {
  content: "\f52d"; }

.fa-feather-alt:before {
  content: "\f56b"; }

.fa-fedex:before {
  content: "\f797"; }

.fa-fedora:before {
  content: "\f798"; }

.fa-female:before {
  content: "\f182"; }

.fa-fighter-jet:before {
  content: "\f0fb"; }

.fa-figma:before {
  content: "\f799"; }

.fa-file:before {
  content: "\f15b"; }

.fa-file-alt:before {
  content: "\f15c"; }

.fa-file-archive:before {
  content: "\f1c6"; }

.fa-file-audio:before {
  content: "\f1c7"; }

.fa-file-code:before {
  content: "\f1c9"; }

.fa-file-contract:before {
  content: "\f56c"; }

.fa-file-csv:before {
  content: "\f6dd"; }

.fa-file-download:before {
  content: "\f56d"; }

.fa-file-excel:before {
  content: "\f1c3"; }

.fa-file-export:before {
  content: "\f56e"; }

.fa-file-image:before {
  content: "\f1c5"; }

.fa-file-import:before {
  content: "\f56f"; }

.fa-file-invoice:before {
  content: "\f570"; }

.fa-file-invoice-dollar:before {
  content: "\f571"; }

.fa-file-medical:before {
  content: "\f477"; }

.fa-file-medical-alt:before {
  content: "\f478"; }

.fa-file-pdf:before {
  content: "\f1c1"; }

.fa-file-powerpoint:before {
  content: "\f1c4"; }

.fa-file-prescription:before {
  content: "\f572"; }

.fa-file-signature:before {
  content: "\f573"; }

.fa-file-upload:before {
  content: "\f574"; }

.fa-file-video:before {
  content: "\f1c8"; }

.fa-file-word:before {
  content: "\f1c2"; }

.fa-fill:before {
  content: "\f575"; }

.fa-fill-drip:before {
  content: "\f576"; }

.fa-film:before {
  content: "\f008"; }

.fa-filter:before {
  content: "\f0b0"; }

.fa-fingerprint:before {
  content: "\f577"; }

.fa-fire:before {
  content: "\f06d"; }

.fa-fire-alt:before {
  content: "\f7e4"; }

.fa-fire-extinguisher:before {
  content: "\f134"; }

.fa-firefox:before {
  content: "\f269"; }

.fa-firefox-browser:before {
  content: "\e007"; }

.fa-first-aid:before {
  content: "\f479"; }

.fa-first-order:before {
  content: "\f2b0"; }

.fa-first-order-alt:before {
  content: "\f50a"; }

.fa-firstdraft:before {
  content: "\f3a1"; }

.fa-fish:before {
  content: "\f578"; }

.fa-fist-raised:before {
  content: "\f6de"; }

.fa-flag:before {
  content: "\f024"; }

.fa-flag-checkered:before {
  content: "\f11e"; }

.fa-flag-usa:before {
  content: "\f74d"; }

.fa-flask:before {
  content: "\f0c3"; }

.fa-flickr:before {
  content: "\f16e"; }

.fa-flipboard:before {
  content: "\f44d"; }

.fa-flushed:before {
  content: "\f579"; }

.fa-fly:before {
  content: "\f417"; }

.fa-folder:before {
  content: "\f07b"; }

.fa-folder-minus:before {
  content: "\f65d"; }

.fa-folder-open:before {
  content: "\f07c"; }

.fa-folder-plus:before {
  content: "\f65e"; }

.fa-font:before {
  content: "\f031"; }

.fa-font-awesome:before {
  content: "\f2b4"; }

.fa-font-awesome-alt:before {
  content: "\f35c"; }

.fa-font-awesome-flag:before {
  content: "\f425"; }

.fa-font-awesome-logo-full:before {
  content: "\f4e6"; }

.fa-fonticons:before {
  content: "\f280"; }

.fa-fonticons-fi:before {
  content: "\f3a2"; }

.fa-football-ball:before {
  content: "\f44e"; }

.fa-fort-awesome:before {
  content: "\f286"; }

.fa-fort-awesome-alt:before {
  content: "\f3a3"; }

.fa-forumbee:before {
  content: "\f211"; }

.fa-forward:before {
  content: "\f04e"; }

.fa-foursquare:before {
  content: "\f180"; }

.fa-free-code-camp:before {
  content: "\f2c5"; }

.fa-freebsd:before {
  content: "\f3a4"; }

.fa-frog:before {
  content: "\f52e"; }

.fa-frown:before {
  content: "\f119"; }

.fa-frown-open:before {
  content: "\f57a"; }

.fa-fulcrum:before {
  content: "\f50b"; }

.fa-funnel-dollar:before {
  content: "\f662"; }

.fa-futbol:before {
  content: "\f1e3"; }

.fa-galactic-republic:before {
  content: "\f50c"; }

.fa-galactic-senate:before {
  content: "\f50d"; }

.fa-gamepad:before {
  content: "\f11b"; }

.fa-gas-pump:before {
  content: "\f52f"; }

.fa-gavel:before {
  content: "\f0e3"; }

.fa-gem:before {
  content: "\f3a5"; }

.fa-genderless:before {
  content: "\f22d"; }

.fa-get-pocket:before {
  content: "\f265"; }

.fa-gg:before {
  content: "\f260"; }

.fa-gg-circle:before {
  content: "\f261"; }

.fa-ghost:before {
  content: "\f6e2"; }

.fa-gift:before {
  content: "\f06b"; }

.fa-gifts:before {
  content: "\f79c"; }

.fa-git:before {
  content: "\f1d3"; }

.fa-git-alt:before {
  content: "\f841"; }

.fa-git-square:before {
  content: "\f1d2"; }

.fa-github:before {
  content: "\f09b"; }

.fa-github-alt:before {
  content: "\f113"; }

.fa-github-square:before {
  content: "\f092"; }

.fa-gitkraken:before {
  content: "\f3a6"; }

.fa-gitlab:before {
  content: "\f296"; }

.fa-gitter:before {
  content: "\f426"; }

.fa-glass-cheers:before {
  content: "\f79f"; }

.fa-glass-martini:before {
  content: "\f000"; }

.fa-glass-martini-alt:before {
  content: "\f57b"; }

.fa-glass-whiskey:before {
  content: "\f7a0"; }

.fa-glasses:before {
  content: "\f530"; }

.fa-glide:before {
  content: "\f2a5"; }

.fa-glide-g:before {
  content: "\f2a6"; }

.fa-globe:before {
  content: "\f0ac"; }

.fa-globe-africa:before {
  content: "\f57c"; }

.fa-globe-americas:before {
  content: "\f57d"; }

.fa-globe-asia:before {
  content: "\f57e"; }

.fa-globe-europe:before {
  content: "\f7a2"; }

.fa-gofore:before {
  content: "\f3a7"; }

.fa-golf-ball:before {
  content: "\f450"; }

.fa-goodreads:before {
  content: "\f3a8"; }

.fa-goodreads-g:before {
  content: "\f3a9"; }

.fa-google:before {
  content: "\f1a0"; }

.fa-google-drive:before {
  content: "\f3aa"; }

.fa-google-pay:before {
  content: "\e079"; }

.fa-google-play:before {
  content: "\f3ab"; }

.fa-google-plus:before {
  content: "\f2b3"; }

.fa-google-plus-g:before {
  content: "\f0d5"; }

.fa-google-plus-square:before {
  content: "\f0d4"; }

.fa-google-wallet:before {
  content: "\f1ee"; }

.fa-gopuram:before {
  content: "\f664"; }

.fa-graduation-cap:before {
  content: "\f19d"; }

.fa-gratipay:before {
  content: "\f184"; }

.fa-grav:before {
  content: "\f2d6"; }

.fa-greater-than:before {
  content: "\f531"; }

.fa-greater-than-equal:before {
  content: "\f532"; }

.fa-grimace:before {
  content: "\f57f"; }

.fa-grin:before {
  content: "\f580"; }

.fa-grin-alt:before {
  content: "\f581"; }

.fa-grin-beam:before {
  content: "\f582"; }

.fa-grin-beam-sweat:before {
  content: "\f583"; }

.fa-grin-hearts:before {
  content: "\f584"; }

.fa-grin-squint:before {
  content: "\f585"; }

.fa-grin-squint-tears:before {
  content: "\f586"; }

.fa-grin-stars:before {
  content: "\f587"; }

.fa-grin-tears:before {
  content: "\f588"; }

.fa-grin-tongue:before {
  content: "\f589"; }

.fa-grin-tongue-squint:before {
  content: "\f58a"; }

.fa-grin-tongue-wink:before {
  content: "\f58b"; }

.fa-grin-wink:before {
  content: "\f58c"; }

.fa-grip-horizontal:before {
  content: "\f58d"; }

.fa-grip-lines:before {
  content: "\f7a4"; }

.fa-grip-lines-vertical:before {
  content: "\f7a5"; }

.fa-grip-vertical:before {
  content: "\f58e"; }

.fa-gripfire:before {
  content: "\f3ac"; }

.fa-grunt:before {
  content: "\f3ad"; }

.fa-guilded:before {
  content: "\e07e"; }

.fa-guitar:before {
  content: "\f7a6"; }

.fa-gulp:before {
  content: "\f3ae"; }

.fa-h-square:before {
  content: "\f0fd"; }

.fa-hacker-news:before {
  content: "\f1d4"; }

.fa-hacker-news-square:before {
  content: "\f3af"; }

.fa-hackerrank:before {
  content: "\f5f7"; }

.fa-hamburger:before {
  content: "\f805"; }

.fa-hammer:before {
  content: "\f6e3"; }

.fa-hamsa:before {
  content: "\f665"; }

.fa-hand-holding:before {
  content: "\f4bd"; }

.fa-hand-holding-heart:before {
  content: "\f4be"; }

.fa-hand-holding-medical:before {
  content: "\e05c"; }

.fa-hand-holding-usd:before {
  content: "\f4c0"; }

.fa-hand-holding-water:before {
  content: "\f4c1"; }

.fa-hand-lizard:before {
  content: "\f258"; }

.fa-hand-middle-finger:before {
  content: "\f806"; }

.fa-hand-paper:before {
  content: "\f256"; }

.fa-hand-peace:before {
  content: "\f25b"; }

.fa-hand-point-down:before {
  content: "\f0a7"; }

.fa-hand-point-left:before {
  content: "\f0a5"; }

.fa-hand-point-right:before {
  content: "\f0a4"; }

.fa-hand-point-up:before {
  content: "\f0a6"; }

.fa-hand-pointer:before {
  content: "\f25a"; }

.fa-hand-rock:before {
  content: "\f255"; }

.fa-hand-scissors:before {
  content: "\f257"; }

.fa-hand-sparkles:before {
  content: "\e05d"; }

.fa-hand-spock:before {
  content: "\f259"; }

.fa-hands:before {
  content: "\f4c2"; }

.fa-hands-helping:before {
  content: "\f4c4"; }

.fa-hands-wash:before {
  content: "\e05e"; }

.fa-handshake:before {
  content: "\f2b5"; }

.fa-handshake-alt-slash:before {
  content: "\e05f"; }

.fa-handshake-slash:before {
  content: "\e060"; }

.fa-hanukiah:before {
  content: "\f6e6"; }

.fa-hard-hat:before {
  content: "\f807"; }

.fa-hashtag:before {
  content: "\f292"; }

.fa-hat-cowboy:before {
  content: "\f8c0"; }

.fa-hat-cowboy-side:before {
  content: "\f8c1"; }

.fa-hat-wizard:before {
  content: "\f6e8"; }

.fa-hdd:before {
  content: "\f0a0"; }

.fa-head-side-cough:before {
  content: "\e061"; }

.fa-head-side-cough-slash:before {
  content: "\e062"; }

.fa-head-side-mask:before {
  content: "\e063"; }

.fa-head-side-virus:before {
  content: "\e064"; }

.fa-heading:before {
  content: "\f1dc"; }

.fa-headphones:before {
  content: "\f025"; }

.fa-headphones-alt:before {
  content: "\f58f"; }

.fa-headset:before {
  content: "\f590"; }

.fa-heart:before {
  content: "\f004"; }

.fa-heart-broken:before {
  content: "\f7a9"; }

.fa-heartbeat:before {
  content: "\f21e"; }

.fa-helicopter:before {
  content: "\f533"; }

.fa-highlighter:before {
  content: "\f591"; }

.fa-hiking:before {
  content: "\f6ec"; }

.fa-hippo:before {
  content: "\f6ed"; }

.fa-hips:before {
  content: "\f452"; }

.fa-hire-a-helper:before {
  content: "\f3b0"; }

.fa-history:before {
  content: "\f1da"; }

.fa-hive:before {
  content: "\e07f"; }

.fa-hockey-puck:before {
  content: "\f453"; }

.fa-holly-berry:before {
  content: "\f7aa"; }

.fa-home:before {
  content: "\f015"; }

.fa-hooli:before {
  content: "\f427"; }

.fa-hornbill:before {
  content: "\f592"; }

.fa-horse:before {
  content: "\f6f0"; }

.fa-horse-head:before {
  content: "\f7ab"; }

.fa-hospital:before {
  content: "\f0f8"; }

.fa-hospital-alt:before {
  content: "\f47d"; }

.fa-hospital-symbol:before {
  content: "\f47e"; }

.fa-hospital-user:before {
  content: "\f80d"; }

.fa-hot-tub:before {
  content: "\f593"; }

.fa-hotdog:before {
  content: "\f80f"; }

.fa-hotel:before {
  content: "\f594"; }

.fa-hotjar:before {
  content: "\f3b1"; }

.fa-hourglass:before {
  content: "\f254"; }

.fa-hourglass-end:before {
  content: "\f253"; }

.fa-hourglass-half:before {
  content: "\f252"; }

.fa-hourglass-start:before {
  content: "\f251"; }

.fa-house-damage:before {
  content: "\f6f1"; }

.fa-house-user:before {
  content: "\e065"; }

.fa-houzz:before {
  content: "\f27c"; }

.fa-hryvnia:before {
  content: "\f6f2"; }

.fa-html5:before {
  content: "\f13b"; }

.fa-hubspot:before {
  content: "\f3b2"; }

.fa-i-cursor:before {
  content: "\f246"; }

.fa-ice-cream:before {
  content: "\f810"; }

.fa-icicles:before {
  content: "\f7ad"; }

.fa-icons:before {
  content: "\f86d"; }

.fa-id-badge:before {
  content: "\f2c1"; }

.fa-id-card:before {
  content: "\f2c2"; }

.fa-id-card-alt:before {
  content: "\f47f"; }

.fa-ideal:before {
  content: "\e013"; }

.fa-igloo:before {
  content: "\f7ae"; }

.fa-image:before {
  content: "\f03e"; }

.fa-images:before {
  content: "\f302"; }

.fa-imdb:before {
  content: "\f2d8"; }

.fa-inbox:before {
  content: "\f01c"; }

.fa-indent:before {
  content: "\f03c"; }

.fa-industry:before {
  content: "\f275"; }

.fa-infinity:before {
  content: "\f534"; }

.fa-info:before {
  content: "\f129"; }

.fa-info-circle:before {
  content: "\f05a"; }

.fa-innosoft:before {
  content: "\e080"; }

.fa-instagram:before {
  content: "\f16d"; }

.fa-instagram-square:before {
  content: "\e055"; }

.fa-instalod:before {
  content: "\e081"; }

.fa-intercom:before {
  content: "\f7af"; }

.fa-internet-explorer:before {
  content: "\f26b"; }

.fa-invision:before {
  content: "\f7b0"; }

.fa-ioxhost:before {
  content: "\f208"; }

.fa-italic:before {
  content: "\f033"; }

.fa-itch-io:before {
  content: "\f83a"; }

.fa-itunes:before {
  content: "\f3b4"; }

.fa-itunes-note:before {
  content: "\f3b5"; }

.fa-java:before {
  content: "\f4e4"; }

.fa-jedi:before {
  content: "\f669"; }

.fa-jedi-order:before {
  content: "\f50e"; }

.fa-jenkins:before {
  content: "\f3b6"; }

.fa-jira:before {
  content: "\f7b1"; }

.fa-joget:before {
  content: "\f3b7"; }

.fa-joint:before {
  content: "\f595"; }

.fa-joomla:before {
  content: "\f1aa"; }

.fa-journal-whills:before {
  content: "\f66a"; }

.fa-js:before {
  content: "\f3b8"; }

.fa-js-square:before {
  content: "\f3b9"; }

.fa-jsfiddle:before {
  content: "\f1cc"; }

.fa-kaaba:before {
  content: "\f66b"; }

.fa-kaggle:before {
  content: "\f5fa"; }

.fa-key:before {
  content: "\f084"; }

.fa-keybase:before {
  content: "\f4f5"; }

.fa-keyboard:before {
  content: "\f11c"; }

.fa-keycdn:before {
  content: "\f3ba"; }

.fa-khanda:before {
  content: "\f66d"; }

.fa-kickstarter:before {
  content: "\f3bb"; }

.fa-kickstarter-k:before {
  content: "\f3bc"; }

.fa-kiss:before {
  content: "\f596"; }

.fa-kiss-beam:before {
  content: "\f597"; }

.fa-kiss-wink-heart:before {
  content: "\f598"; }

.fa-kiwi-bird:before {
  content: "\f535"; }

.fa-korvue:before {
  content: "\f42f"; }

.fa-landmark:before {
  content: "\f66f"; }

.fa-language:before {
  content: "\f1ab"; }

.fa-laptop:before {
  content: "\f109"; }

.fa-laptop-code:before {
  content: "\f5fc"; }

.fa-laptop-house:before {
  content: "\e066"; }

.fa-laptop-medical:before {
  content: "\f812"; }

.fa-laravel:before {
  content: "\f3bd"; }

.fa-lastfm:before {
  content: "\f202"; }

.fa-lastfm-square:before {
  content: "\f203"; }

.fa-laugh:before {
  content: "\f599"; }

.fa-laugh-beam:before {
  content: "\f59a"; }

.fa-laugh-squint:before {
  content: "\f59b"; }

.fa-laugh-wink:before {
  content: "\f59c"; }

.fa-layer-group:before {
  content: "\f5fd"; }

.fa-leaf:before {
  content: "\f06c"; }

.fa-leanpub:before {
  content: "\f212"; }

.fa-lemon:before {
  content: "\f094"; }

.fa-less:before {
  content: "\f41d"; }

.fa-less-than:before {
  content: "\f536"; }

.fa-less-than-equal:before {
  content: "\f537"; }

.fa-level-down-alt:before {
  content: "\f3be"; }

.fa-level-up-alt:before {
  content: "\f3bf"; }

.fa-life-ring:before {
  content: "\f1cd"; }

.fa-lightbulb:before {
  content: "\f0eb"; }

.fa-line:before {
  content: "\f3c0"; }

.fa-link:before {
  content: "\f0c1"; }

.fa-linkedin:before {
  content: "\f08c"; }

.fa-linkedin-in:before {
  content: "\f0e1"; }

.fa-linode:before {
  content: "\f2b8"; }

.fa-linux:before {
  content: "\f17c"; }

.fa-lira-sign:before {
  content: "\f195"; }

.fa-list:before {
  content: "\f03a"; }

.fa-list-alt:before {
  content: "\f022"; }

.fa-list-ol:before {
  content: "\f0cb"; }

.fa-list-ul:before {
  content: "\f0ca"; }

.fa-location-arrow:before {
  content: "\f124"; }

.fa-lock:before {
  content: "\f023"; }

.fa-lock-open:before {
  content: "\f3c1"; }

.fa-long-arrow-alt-down:before {
  content: "\f309"; }

.fa-long-arrow-alt-left:before {
  content: "\f30a"; }

.fa-long-arrow-alt-right:before {
  content: "\f30b"; }

.fa-long-arrow-alt-up:before {
  content: "\f30c"; }

.fa-low-vision:before {
  content: "\f2a8"; }

.fa-luggage-cart:before {
  content: "\f59d"; }

.fa-lungs:before {
  content: "\f604"; }

.fa-lungs-virus:before {
  content: "\e067"; }

.fa-lyft:before {
  content: "\f3c3"; }

.fa-magento:before {
  content: "\f3c4"; }

.fa-magic:before {
  content: "\f0d0"; }

.fa-magnet:before {
  content: "\f076"; }

.fa-mail-bulk:before {
  content: "\f674"; }

.fa-mailchimp:before {
  content: "\f59e"; }

.fa-male:before {
  content: "\f183"; }

.fa-mandalorian:before {
  content: "\f50f"; }

.fa-map:before {
  content: "\f279"; }

.fa-map-marked:before {
  content: "\f59f"; }

.fa-map-marked-alt:before {
  content: "\f5a0"; }

.fa-map-marker:before {
  content: "\f041"; }

.fa-map-marker-alt:before {
  content: "\f3c5"; }

.fa-map-pin:before {
  content: "\f276"; }

.fa-map-signs:before {
  content: "\f277"; }

.fa-markdown:before {
  content: "\f60f"; }

.fa-marker:before {
  content: "\f5a1"; }

.fa-mars:before {
  content: "\f222"; }

.fa-mars-double:before {
  content: "\f227"; }

.fa-mars-stroke:before {
  content: "\f229"; }

.fa-mars-stroke-h:before {
  content: "\f22b"; }

.fa-mars-stroke-v:before {
  content: "\f22a"; }

.fa-mask:before {
  content: "\f6fa"; }

.fa-mastodon:before {
  content: "\f4f6"; }

.fa-maxcdn:before {
  content: "\f136"; }

.fa-mdb:before {
  content: "\f8ca"; }

.fa-medal:before {
  content: "\f5a2"; }

.fa-medapps:before {
  content: "\f3c6"; }

.fa-medium:before {
  content: "\f23a"; }

.fa-medium-m:before {
  content: "\f3c7"; }

.fa-medkit:before {
  content: "\f0fa"; }

.fa-medrt:before {
  content: "\f3c8"; }

.fa-meetup:before {
  content: "\f2e0"; }

.fa-megaport:before {
  content: "\f5a3"; }

.fa-meh:before {
  content: "\f11a"; }

.fa-meh-blank:before {
  content: "\f5a4"; }

.fa-meh-rolling-eyes:before {
  content: "\f5a5"; }

.fa-memory:before {
  content: "\f538"; }

.fa-mendeley:before {
  content: "\f7b3"; }

.fa-menorah:before {
  content: "\f676"; }

.fa-mercury:before {
  content: "\f223"; }

.fa-meteor:before {
  content: "\f753"; }

.fa-microblog:before {
  content: "\e01a"; }

.fa-microchip:before {
  content: "\f2db"; }

.fa-microphone:before {
  content: "\f130"; }

.fa-microphone-alt:before {
  content: "\f3c9"; }

.fa-microphone-alt-slash:before {
  content: "\f539"; }

.fa-microphone-slash:before {
  content: "\f131"; }

.fa-microscope:before {
  content: "\f610"; }

.fa-microsoft:before {
  content: "\f3ca"; }

.fa-minus:before {
  content: "\f068"; }

.fa-minus-circle:before {
  content: "\f056"; }

.fa-minus-square:before {
  content: "\f146"; }

.fa-mitten:before {
  content: "\f7b5"; }

.fa-mix:before {
  content: "\f3cb"; }

.fa-mixcloud:before {
  content: "\f289"; }

.fa-mixer:before {
  content: "\e056"; }

.fa-mizuni:before {
  content: "\f3cc"; }

.fa-mobile:before {
  content: "\f10b"; }

.fa-mobile-alt:before {
  content: "\f3cd"; }

.fa-modx:before {
  content: "\f285"; }

.fa-monero:before {
  content: "\f3d0"; }

.fa-money-bill:before {
  content: "\f0d6"; }

.fa-money-bill-alt:before {
  content: "\f3d1"; }

.fa-money-bill-wave:before {
  content: "\f53a"; }

.fa-money-bill-wave-alt:before {
  content: "\f53b"; }

.fa-money-check:before {
  content: "\f53c"; }

.fa-money-check-alt:before {
  content: "\f53d"; }

.fa-monument:before {
  content: "\f5a6"; }

.fa-moon:before {
  content: "\f186"; }

.fa-mortar-pestle:before {
  content: "\f5a7"; }

.fa-mosque:before {
  content: "\f678"; }

.fa-motorcycle:before {
  content: "\f21c"; }

.fa-mountain:before {
  content: "\f6fc"; }

.fa-mouse:before {
  content: "\f8cc"; }

.fa-mouse-pointer:before {
  content: "\f245"; }

.fa-mug-hot:before {
  content: "\f7b6"; }

.fa-music:before {
  content: "\f001"; }

.fa-napster:before {
  content: "\f3d2"; }

.fa-neos:before {
  content: "\f612"; }

.fa-network-wired:before {
  content: "\f6ff"; }

.fa-neuter:before {
  content: "\f22c"; }

.fa-newspaper:before {
  content: "\f1ea"; }

.fa-nimblr:before {
  content: "\f5a8"; }

.fa-node:before {
  content: "\f419"; }

.fa-node-js:before {
  content: "\f3d3"; }

.fa-not-equal:before {
  content: "\f53e"; }

.fa-notes-medical:before {
  content: "\f481"; }

.fa-npm:before {
  content: "\f3d4"; }

.fa-ns8:before {
  content: "\f3d5"; }

.fa-nutritionix:before {
  content: "\f3d6"; }

.fa-object-group:before {
  content: "\f247"; }

.fa-object-ungroup:before {
  content: "\f248"; }

.fa-octopus-deploy:before {
  content: "\e082"; }

.fa-odnoklassniki:before {
  content: "\f263"; }

.fa-odnoklassniki-square:before {
  content: "\f264"; }

.fa-oil-can:before {
  content: "\f613"; }

.fa-old-republic:before {
  content: "\f510"; }

.fa-om:before {
  content: "\f679"; }

.fa-opencart:before {
  content: "\f23d"; }

.fa-openid:before {
  content: "\f19b"; }

.fa-opera:before {
  content: "\f26a"; }

.fa-optin-monster:before {
  content: "\f23c"; }

.fa-orcid:before {
  content: "\f8d2"; }

.fa-osi:before {
  content: "\f41a"; }

.fa-otter:before {
  content: "\f700"; }

.fa-outdent:before {
  content: "\f03b"; }

.fa-page4:before {
  content: "\f3d7"; }

.fa-pagelines:before {
  content: "\f18c"; }

.fa-pager:before {
  content: "\f815"; }

.fa-paint-brush:before {
  content: "\f1fc"; }

.fa-paint-roller:before {
  content: "\f5aa"; }

.fa-palette:before {
  content: "\f53f"; }

.fa-palfed:before {
  content: "\f3d8"; }

.fa-pallet:before {
  content: "\f482"; }

.fa-paper-plane:before {
  content: "\f1d8"; }

.fa-paperclip:before {
  content: "\f0c6"; }

.fa-parachute-box:before {
  content: "\f4cd"; }

.fa-paragraph:before {
  content: "\f1dd"; }

.fa-parking:before {
  content: "\f540"; }

.fa-passport:before {
  content: "\f5ab"; }

.fa-pastafarianism:before {
  content: "\f67b"; }

.fa-paste:before {
  content: "\f0ea"; }

.fa-patreon:before {
  content: "\f3d9"; }

.fa-pause:before {
  content: "\f04c"; }

.fa-pause-circle:before {
  content: "\f28b"; }

.fa-paw:before {
  content: "\f1b0"; }

.fa-paypal:before {
  content: "\f1ed"; }

.fa-peace:before {
  content: "\f67c"; }

.fa-pen:before {
  content: "\f304"; }

.fa-pen-alt:before {
  content: "\f305"; }

.fa-pen-fancy:before {
  content: "\f5ac"; }

.fa-pen-nib:before {
  content: "\f5ad"; }

.fa-pen-square:before {
  content: "\f14b"; }

.fa-pencil-alt:before {
  content: "\f303"; }

.fa-pencil-ruler:before {
  content: "\f5ae"; }

.fa-penny-arcade:before {
  content: "\f704"; }

.fa-people-arrows:before {
  content: "\e068"; }

.fa-people-carry:before {
  content: "\f4ce"; }

.fa-pepper-hot:before {
  content: "\f816"; }

.fa-perbyte:before {
  content: "\e083"; }

.fa-percent:before {
  content: "\f295"; }

.fa-percentage:before {
  content: "\f541"; }

.fa-periscope:before {
  content: "\f3da"; }

.fa-person-booth:before {
  content: "\f756"; }

.fa-phabricator:before {
  content: "\f3db"; }

.fa-phoenix-framework:before {
  content: "\f3dc"; }

.fa-phoenix-squadron:before {
  content: "\f511"; }

.fa-phone:before {
  content: "\f095"; }

.fa-phone-alt:before {
  content: "\f879"; }

.fa-phone-slash:before {
  content: "\f3dd"; }

.fa-phone-square:before {
  content: "\f098"; }

.fa-phone-square-alt:before {
  content: "\f87b"; }

.fa-phone-volume:before {
  content: "\f2a0"; }

.fa-photo-video:before {
  content: "\f87c"; }

.fa-php:before {
  content: "\f457"; }

.fa-pied-piper:before {
  content: "\f2ae"; }

.fa-pied-piper-alt:before {
  content: "\f1a8"; }

.fa-pied-piper-hat:before {
  content: "\f4e5"; }

.fa-pied-piper-pp:before {
  content: "\f1a7"; }

.fa-pied-piper-square:before {
  content: "\e01e"; }

.fa-piggy-bank:before {
  content: "\f4d3"; }

.fa-pills:before {
  content: "\f484"; }

.fa-pinterest:before {
  content: "\f0d2"; }

.fa-pinterest-p:before {
  content: "\f231"; }

.fa-pinterest-square:before {
  content: "\f0d3"; }

.fa-pizza-slice:before {
  content: "\f818"; }

.fa-place-of-worship:before {
  content: "\f67f"; }

.fa-plane:before {
  content: "\f072"; }

.fa-plane-arrival:before {
  content: "\f5af"; }

.fa-plane-departure:before {
  content: "\f5b0"; }

.fa-plane-slash:before {
  content: "\e069"; }

.fa-play:before {
  content: "\f04b"; }

.fa-play-circle:before {
  content: "\f144"; }

.fa-playstation:before {
  content: "\f3df"; }

.fa-plug:before {
  content: "\f1e6"; }

.fa-plus:before {
  content: "\f067"; }

.fa-plus-circle:before {
  content: "\f055"; }

.fa-plus-square:before {
  content: "\f0fe"; }

.fa-podcast:before {
  content: "\f2ce"; }

.fa-poll:before {
  content: "\f681"; }

.fa-poll-h:before {
  content: "\f682"; }

.fa-poo:before {
  content: "\f2fe"; }

.fa-poo-storm:before {
  content: "\f75a"; }

.fa-poop:before {
  content: "\f619"; }

.fa-portrait:before {
  content: "\f3e0"; }

.fa-pound-sign:before {
  content: "\f154"; }

.fa-power-off:before {
  content: "\f011"; }

.fa-pray:before {
  content: "\f683"; }

.fa-praying-hands:before {
  content: "\f684"; }

.fa-prescription:before {
  content: "\f5b1"; }

.fa-prescription-bottle:before {
  content: "\f485"; }

.fa-prescription-bottle-alt:before {
  content: "\f486"; }

.fa-print:before {
  content: "\f02f"; }

.fa-procedures:before {
  content: "\f487"; }

.fa-product-hunt:before {
  content: "\f288"; }

.fa-project-diagram:before {
  content: "\f542"; }

.fa-pump-medical:before {
  content: "\e06a"; }

.fa-pump-soap:before {
  content: "\e06b"; }

.fa-pushed:before {
  content: "\f3e1"; }

.fa-puzzle-piece:before {
  content: "\f12e"; }

.fa-python:before {
  content: "\f3e2"; }

.fa-qq:before {
  content: "\f1d6"; }

.fa-qrcode:before {
  content: "\f029"; }

.fa-question:before {
  content: "\f128"; }

.fa-question-circle:before {
  content: "\f059"; }

.fa-quidditch:before {
  content: "\f458"; }

.fa-quinscape:before {
  content: "\f459"; }

.fa-quora:before {
  content: "\f2c4"; }

.fa-quote-left:before {
  content: "\f10d"; }

.fa-quote-right:before {
  content: "\f10e"; }

.fa-quran:before {
  content: "\f687"; }

.fa-r-project:before {
  content: "\f4f7"; }

.fa-radiation:before {
  content: "\f7b9"; }

.fa-radiation-alt:before {
  content: "\f7ba"; }

.fa-rainbow:before {
  content: "\f75b"; }

.fa-random:before {
  content: "\f074"; }

.fa-raspberry-pi:before {
  content: "\f7bb"; }

.fa-ravelry:before {
  content: "\f2d9"; }

.fa-react:before {
  content: "\f41b"; }

.fa-reacteurope:before {
  content: "\f75d"; }

.fa-readme:before {
  content: "\f4d5"; }

.fa-rebel:before {
  content: "\f1d0"; }

.fa-receipt:before {
  content: "\f543"; }

.fa-record-vinyl:before {
  content: "\f8d9"; }

.fa-recycle:before {
  content: "\f1b8"; }

.fa-red-river:before {
  content: "\f3e3"; }

.fa-reddit:before {
  content: "\f1a1"; }

.fa-reddit-alien:before {
  content: "\f281"; }

.fa-reddit-square:before {
  content: "\f1a2"; }

.fa-redhat:before {
  content: "\f7bc"; }

.fa-redo:before {
  content: "\f01e"; }

.fa-redo-alt:before {
  content: "\f2f9"; }

.fa-registered:before {
  content: "\f25d"; }

.fa-remove-format:before {
  content: "\f87d"; }

.fa-renren:before {
  content: "\f18b"; }

.fa-reply:before {
  content: "\f3e5"; }

.fa-reply-all:before {
  content: "\f122"; }

.fa-replyd:before {
  content: "\f3e6"; }

.fa-republican:before {
  content: "\f75e"; }

.fa-researchgate:before {
  content: "\f4f8"; }

.fa-resolving:before {
  content: "\f3e7"; }

.fa-restroom:before {
  content: "\f7bd"; }

.fa-retweet:before {
  content: "\f079"; }

.fa-rev:before {
  content: "\f5b2"; }

.fa-ribbon:before {
  content: "\f4d6"; }

.fa-ring:before {
  content: "\f70b"; }

.fa-road:before {
  content: "\f018"; }

.fa-robot:before {
  content: "\f544"; }

.fa-rocket:before {
  content: "\f135"; }

.fa-rocketchat:before {
  content: "\f3e8"; }

.fa-rockrms:before {
  content: "\f3e9"; }

.fa-route:before {
  content: "\f4d7"; }

.fa-rss:before {
  content: "\f09e"; }

.fa-rss-square:before {
  content: "\f143"; }

.fa-ruble-sign:before {
  content: "\f158"; }

.fa-ruler:before {
  content: "\f545"; }

.fa-ruler-combined:before {
  content: "\f546"; }

.fa-ruler-horizontal:before {
  content: "\f547"; }

.fa-ruler-vertical:before {
  content: "\f548"; }

.fa-running:before {
  content: "\f70c"; }

.fa-rupee-sign:before {
  content: "\f156"; }

.fa-rust:before {
  content: "\e07a"; }

.fa-sad-cry:before {
  content: "\f5b3"; }

.fa-sad-tear:before {
  content: "\f5b4"; }

.fa-safari:before {
  content: "\f267"; }

.fa-salesforce:before {
  content: "\f83b"; }

.fa-sass:before {
  content: "\f41e"; }

.fa-satellite:before {
  content: "\f7bf"; }

.fa-satellite-dish:before {
  content: "\f7c0"; }

.fa-save:before {
  content: "\f0c7"; }

.fa-schlix:before {
  content: "\f3ea"; }

.fa-school:before {
  content: "\f549"; }

.fa-screwdriver:before {
  content: "\f54a"; }

.fa-scribd:before {
  content: "\f28a"; }

.fa-scroll:before {
  content: "\f70e"; }

.fa-sd-card:before {
  content: "\f7c2"; }

.fa-search:before {
  content: "\f002"; }

.fa-search-dollar:before {
  content: "\f688"; }

.fa-search-location:before {
  content: "\f689"; }

.fa-search-minus:before {
  content: "\f010"; }

.fa-search-plus:before {
  content: "\f00e"; }

.fa-searchengin:before {
  content: "\f3eb"; }

.fa-seedling:before {
  content: "\f4d8"; }

.fa-sellcast:before {
  content: "\f2da"; }

.fa-sellsy:before {
  content: "\f213"; }

.fa-server:before {
  content: "\f233"; }

.fa-servicestack:before {
  content: "\f3ec"; }

.fa-shapes:before {
  content: "\f61f"; }

.fa-share:before {
  content: "\f064"; }

.fa-share-alt:before {
  content: "\f1e0"; }

.fa-share-alt-square:before {
  content: "\f1e1"; }

.fa-share-square:before {
  content: "\f14d"; }

.fa-shekel-sign:before {
  content: "\f20b"; }

.fa-shield-alt:before {
  content: "\f3ed"; }

.fa-shield-virus:before {
  content: "\e06c"; }

.fa-ship:before {
  content: "\f21a"; }

.fa-shipping-fast:before {
  content: "\f48b"; }

.fa-shirtsinbulk:before {
  content: "\f214"; }

.fa-shoe-prints:before {
  content: "\f54b"; }

.fa-shopify:before {
  content: "\e057"; }

.fa-shopping-bag:before {
  content: "\f290"; }

.fa-shopping-basket:before {
  content: "\f291"; }

.fa-shopping-cart:before {
  content: "\f07a"; }

.fa-shopware:before {
  content: "\f5b5"; }

.fa-shower:before {
  content: "\f2cc"; }

.fa-shuttle-van:before {
  content: "\f5b6"; }

.fa-sign:before {
  content: "\f4d9"; }

.fa-sign-in-alt:before {
  content: "\f2f6"; }

.fa-sign-language:before {
  content: "\f2a7"; }

.fa-sign-out-alt:before {
  content: "\f2f5"; }

.fa-signal:before {
  content: "\f012"; }

.fa-signature:before {
  content: "\f5b7"; }

.fa-sim-card:before {
  content: "\f7c4"; }

.fa-simplybuilt:before {
  content: "\f215"; }

.fa-sink:before {
  content: "\e06d"; }

.fa-sistrix:before {
  content: "\f3ee"; }

.fa-sitemap:before {
  content: "\f0e8"; }

.fa-sith:before {
  content: "\f512"; }

.fa-skating:before {
  content: "\f7c5"; }

.fa-sketch:before {
  content: "\f7c6"; }

.fa-skiing:before {
  content: "\f7c9"; }

.fa-skiing-nordic:before {
  content: "\f7ca"; }

.fa-skull:before {
  content: "\f54c"; }

.fa-skull-crossbones:before {
  content: "\f714"; }

.fa-skyatlas:before {
  content: "\f216"; }

.fa-skype:before {
  content: "\f17e"; }

.fa-slack:before {
  content: "\f198"; }

.fa-slack-hash:before {
  content: "\f3ef"; }

.fa-slash:before {
  content: "\f715"; }

.fa-sleigh:before {
  content: "\f7cc"; }

.fa-sliders-h:before {
  content: "\f1de"; }

.fa-slideshare:before {
  content: "\f1e7"; }

.fa-smile:before {
  content: "\f118"; }

.fa-smile-beam:before {
  content: "\f5b8"; }

.fa-smile-wink:before {
  content: "\f4da"; }

.fa-smog:before {
  content: "\f75f"; }

.fa-smoking:before {
  content: "\f48d"; }

.fa-smoking-ban:before {
  content: "\f54d"; }

.fa-sms:before {
  content: "\f7cd"; }

.fa-snapchat:before {
  content: "\f2ab"; }

.fa-snapchat-ghost:before {
  content: "\f2ac"; }

.fa-snapchat-square:before {
  content: "\f2ad"; }

.fa-snowboarding:before {
  content: "\f7ce"; }

.fa-snowflake:before {
  content: "\f2dc"; }

.fa-snowman:before {
  content: "\f7d0"; }

.fa-snowplow:before {
  content: "\f7d2"; }

.fa-soap:before {
  content: "\e06e"; }

.fa-socks:before {
  content: "\f696"; }

.fa-solar-panel:before {
  content: "\f5ba"; }

.fa-sort:before {
  content: "\f0dc"; }

.fa-sort-alpha-down:before {
  content: "\f15d"; }

.fa-sort-alpha-down-alt:before {
  content: "\f881"; }

.fa-sort-alpha-up:before {
  content: "\f15e"; }

.fa-sort-alpha-up-alt:before {
  content: "\f882"; }

.fa-sort-amount-down:before {
  content: "\f160"; }

.fa-sort-amount-down-alt:before {
  content: "\f884"; }

.fa-sort-amount-up:before {
  content: "\f161"; }

.fa-sort-amount-up-alt:before {
  content: "\f885"; }

.fa-sort-down:before {
  content: "\f0dd"; }

.fa-sort-numeric-down:before {
  content: "\f162"; }

.fa-sort-numeric-down-alt:before {
  content: "\f886"; }

.fa-sort-numeric-up:before {
  content: "\f163"; }

.fa-sort-numeric-up-alt:before {
  content: "\f887"; }

.fa-sort-up:before {
  content: "\f0de"; }

.fa-soundcloud:before {
  content: "\f1be"; }

.fa-sourcetree:before {
  content: "\f7d3"; }

.fa-spa:before {
  content: "\f5bb"; }

.fa-space-shuttle:before {
  content: "\f197"; }

.fa-speakap:before {
  content: "\f3f3"; }

.fa-speaker-deck:before {
  content: "\f83c"; }

.fa-spell-check:before {
  content: "\f891"; }

.fa-spider:before {
  content: "\f717"; }

.fa-spinner:before {
  content: "\f110"; }

.fa-splotch:before {
  content: "\f5bc"; }

.fa-spotify:before {
  content: "\f1bc"; }

.fa-spray-can:before {
  content: "\f5bd"; }

.fa-square:before {
  content: "\f0c8"; }

.fa-square-full:before {
  content: "\f45c"; }

.fa-square-root-alt:before {
  content: "\f698"; }

.fa-squarespace:before {
  content: "\f5be"; }

.fa-stack-exchange:before {
  content: "\f18d"; }

.fa-stack-overflow:before {
  content: "\f16c"; }

.fa-stackpath:before {
  content: "\f842"; }

.fa-stamp:before {
  content: "\f5bf"; }

.fa-star:before {
  content: "\f005"; }

.fa-star-and-crescent:before {
  content: "\f699"; }

.fa-star-half:before {
  content: "\f089"; }

.fa-star-half-alt:before {
  content: "\f5c0"; }

.fa-star-of-david:before {
  content: "\f69a"; }

.fa-star-of-life:before {
  content: "\f621"; }

.fa-staylinked:before {
  content: "\f3f5"; }

.fa-steam:before {
  content: "\f1b6"; }

.fa-steam-square:before {
  content: "\f1b7"; }

.fa-steam-symbol:before {
  content: "\f3f6"; }

.fa-step-backward:before {
  content: "\f048"; }

.fa-step-forward:before {
  content: "\f051"; }

.fa-stethoscope:before {
  content: "\f0f1"; }

.fa-sticker-mule:before {
  content: "\f3f7"; }

.fa-sticky-note:before {
  content: "\f249"; }

.fa-stop:before {
  content: "\f04d"; }

.fa-stop-circle:before {
  content: "\f28d"; }

.fa-stopwatch:before {
  content: "\f2f2"; }

.fa-stopwatch-20:before {
  content: "\e06f"; }

.fa-store:before {
  content: "\f54e"; }

.fa-store-alt:before {
  content: "\f54f"; }

.fa-store-alt-slash:before {
  content: "\e070"; }

.fa-store-slash:before {
  content: "\e071"; }

.fa-strava:before {
  content: "\f428"; }

.fa-stream:before {
  content: "\f550"; }

.fa-street-view:before {
  content: "\f21d"; }

.fa-strikethrough:before {
  content: "\f0cc"; }

.fa-stripe:before {
  content: "\f429"; }

.fa-stripe-s:before {
  content: "\f42a"; }

.fa-stroopwafel:before {
  content: "\f551"; }

.fa-studiovinari:before {
  content: "\f3f8"; }

.fa-stumbleupon:before {
  content: "\f1a4"; }

.fa-stumbleupon-circle:before {
  content: "\f1a3"; }

.fa-subscript:before {
  content: "\f12c"; }

.fa-subway:before {
  content: "\f239"; }

.fa-suitcase:before {
  content: "\f0f2"; }

.fa-suitcase-rolling:before {
  content: "\f5c1"; }

.fa-sun:before {
  content: "\f185"; }

.fa-superpowers:before {
  content: "\f2dd"; }

.fa-superscript:before {
  content: "\f12b"; }

.fa-supple:before {
  content: "\f3f9"; }

.fa-surprise:before {
  content: "\f5c2"; }

.fa-suse:before {
  content: "\f7d6"; }

.fa-swatchbook:before {
  content: "\f5c3"; }

.fa-swift:before {
  content: "\f8e1"; }

.fa-swimmer:before {
  content: "\f5c4"; }

.fa-swimming-pool:before {
  content: "\f5c5"; }

.fa-symfony:before {
  content: "\f83d"; }

.fa-synagogue:before {
  content: "\f69b"; }

.fa-sync:before {
  content: "\f021"; }

.fa-sync-alt:before {
  content: "\f2f1"; }

.fa-syringe:before {
  content: "\f48e"; }

.fa-table:before {
  content: "\f0ce"; }

.fa-table-tennis:before {
  content: "\f45d"; }

.fa-tablet:before {
  content: "\f10a"; }

.fa-tablet-alt:before {
  content: "\f3fa"; }

.fa-tablets:before {
  content: "\f490"; }

.fa-tachometer-alt:before {
  content: "\f3fd"; }

.fa-tag:before {
  content: "\f02b"; }

.fa-tags:before {
  content: "\f02c"; }

.fa-tape:before {
  content: "\f4db"; }

.fa-tasks:before {
  content: "\f0ae"; }

.fa-taxi:before {
  content: "\f1ba"; }

.fa-teamspeak:before {
  content: "\f4f9"; }

.fa-teeth:before {
  content: "\f62e"; }

.fa-teeth-open:before {
  content: "\f62f"; }

.fa-telegram:before {
  content: "\f2c6"; }

.fa-telegram-plane:before {
  content: "\f3fe"; }

.fa-temperature-high:before {
  content: "\f769"; }

.fa-temperature-low:before {
  content: "\f76b"; }

.fa-tencent-weibo:before {
  content: "\f1d5"; }

.fa-tenge:before {
  content: "\f7d7"; }

.fa-terminal:before {
  content: "\f120"; }

.fa-text-height:before {
  content: "\f034"; }

.fa-text-width:before {
  content: "\f035"; }

.fa-th:before {
  content: "\f00a"; }

.fa-th-large:before {
  content: "\f009"; }

.fa-th-list:before {
  content: "\f00b"; }

.fa-the-red-yeti:before {
  content: "\f69d"; }

.fa-theater-masks:before {
  content: "\f630"; }

.fa-themeco:before {
  content: "\f5c6"; }

.fa-themeisle:before {
  content: "\f2b2"; }

.fa-thermometer:before {
  content: "\f491"; }

.fa-thermometer-empty:before {
  content: "\f2cb"; }

.fa-thermometer-full:before {
  content: "\f2c7"; }

.fa-thermometer-half:before {
  content: "\f2c9"; }

.fa-thermometer-quarter:before {
  content: "\f2ca"; }

.fa-thermometer-three-quarters:before {
  content: "\f2c8"; }

.fa-think-peaks:before {
  content: "\f731"; }

.fa-thumbs-down:before {
  content: "\f165"; }

.fa-thumbs-up:before {
  content: "\f164"; }

.fa-thumbtack:before {
  content: "\f08d"; }

.fa-ticket-alt:before {
  content: "\f3ff"; }

.fa-tiktok:before {
  content: "\e07b"; }

.fa-times:before {
  content: "\f00d"; }

.fa-times-circle:before {
  content: "\f057"; }

.fa-tint:before {
  content: "\f043"; }

.fa-tint-slash:before {
  content: "\f5c7"; }

.fa-tired:before {
  content: "\f5c8"; }

.fa-toggle-off:before {
  content: "\f204"; }

.fa-toggle-on:before {
  content: "\f205"; }

.fa-toilet:before {
  content: "\f7d8"; }

.fa-toilet-paper:before {
  content: "\f71e"; }

.fa-toilet-paper-slash:before {
  content: "\e072"; }

.fa-toolbox:before {
  content: "\f552"; }

.fa-tools:before {
  content: "\f7d9"; }

.fa-tooth:before {
  content: "\f5c9"; }

.fa-torah:before {
  content: "\f6a0"; }

.fa-torii-gate:before {
  content: "\f6a1"; }

.fa-tractor:before {
  content: "\f722"; }

.fa-trade-federation:before {
  content: "\f513"; }

.fa-trademark:before {
  content: "\f25c"; }

.fa-traffic-light:before {
  content: "\f637"; }

.fa-trailer:before {
  content: "\e041"; }

.fa-train:before {
  content: "\f238"; }

.fa-tram:before {
  content: "\f7da"; }

.fa-transgender:before {
  content: "\f224"; }

.fa-transgender-alt:before {
  content: "\f225"; }

.fa-trash:before {
  content: "\f1f8"; }

.fa-trash-alt:before {
  content: "\f2ed"; }

.fa-trash-restore:before {
  content: "\f829"; }

.fa-trash-restore-alt:before {
  content: "\f82a"; }

.fa-tree:before {
  content: "\f1bb"; }

.fa-trello:before {
  content: "\f181"; }

.fa-tripadvisor:before {
  content: "\f262"; }

.fa-trophy:before {
  content: "\f091"; }

.fa-truck:before {
  content: "\f0d1"; }

.fa-truck-loading:before {
  content: "\f4de"; }

.fa-truck-monster:before {
  content: "\f63b"; }

.fa-truck-moving:before {
  content: "\f4df"; }

.fa-truck-pickup:before {
  content: "\f63c"; }

.fa-tshirt:before {
  content: "\f553"; }

.fa-tty:before {
  content: "\f1e4"; }

.fa-tumblr:before {
  content: "\f173"; }

.fa-tumblr-square:before {
  content: "\f174"; }

.fa-tv:before {
  content: "\f26c"; }

.fa-twitch:before {
  content: "\f1e8"; }

.fa-twitter:before {
  content: "\f099"; }

.fa-twitter-square:before {
  content: "\f081"; }

.fa-typo3:before {
  content: "\f42b"; }

.fa-uber:before {
  content: "\f402"; }

.fa-ubuntu:before {
  content: "\f7df"; }

.fa-uikit:before {
  content: "\f403"; }

.fa-umbraco:before {
  content: "\f8e8"; }

.fa-umbrella:before {
  content: "\f0e9"; }

.fa-umbrella-beach:before {
  content: "\f5ca"; }

.fa-uncharted:before {
  content: "\e084"; }

.fa-underline:before {
  content: "\f0cd"; }

.fa-undo:before {
  content: "\f0e2"; }

.fa-undo-alt:before {
  content: "\f2ea"; }

.fa-uniregistry:before {
  content: "\f404"; }

.fa-unity:before {
  content: "\e049"; }

.fa-universal-access:before {
  content: "\f29a"; }

.fa-university:before {
  content: "\f19c"; }

.fa-unlink:before {
  content: "\f127"; }

.fa-unlock:before {
  content: "\f09c"; }

.fa-unlock-alt:before {
  content: "\f13e"; }

.fa-unsplash:before {
  content: "\e07c"; }

.fa-untappd:before {
  content: "\f405"; }

.fa-upload:before {
  content: "\f093"; }

.fa-ups:before {
  content: "\f7e0"; }

.fa-usb:before {
  content: "\f287"; }

.fa-user:before {
  content: "\f007"; }

.fa-user-alt:before {
  content: "\f406"; }

.fa-user-alt-slash:before {
  content: "\f4fa"; }

.fa-user-astronaut:before {
  content: "\f4fb"; }

.fa-user-check:before {
  content: "\f4fc"; }

.fa-user-circle:before {
  content: "\f2bd"; }

.fa-user-clock:before {
  content: "\f4fd"; }

.fa-user-cog:before {
  content: "\f4fe"; }

.fa-user-edit:before {
  content: "\f4ff"; }

.fa-user-friends:before {
  content: "\f500"; }

.fa-user-graduate:before {
  content: "\f501"; }

.fa-user-injured:before {
  content: "\f728"; }

.fa-user-lock:before {
  content: "\f502"; }

.fa-user-md:before {
  content: "\f0f0"; }

.fa-user-minus:before {
  content: "\f503"; }

.fa-user-ninja:before {
  content: "\f504"; }

.fa-user-nurse:before {
  content: "\f82f"; }

.fa-user-plus:before {
  content: "\f234"; }

.fa-user-secret:before {
  content: "\f21b"; }

.fa-user-shield:before {
  content: "\f505"; }

.fa-user-slash:before {
  content: "\f506"; }

.fa-user-tag:before {
  content: "\f507"; }

.fa-user-tie:before {
  content: "\f508"; }

.fa-user-times:before {
  content: "\f235"; }

.fa-users:before {
  content: "\f0c0"; }

.fa-users-cog:before {
  content: "\f509"; }

.fa-users-slash:before {
  content: "\e073"; }

.fa-usps:before {
  content: "\f7e1"; }

.fa-ussunnah:before {
  content: "\f407"; }

.fa-utensil-spoon:before {
  content: "\f2e5"; }

.fa-utensils:before {
  content: "\f2e7"; }

.fa-vaadin:before {
  content: "\f408"; }

.fa-vector-square:before {
  content: "\f5cb"; }

.fa-venus:before {
  content: "\f221"; }

.fa-venus-double:before {
  content: "\f226"; }

.fa-venus-mars:before {
  content: "\f228"; }

.fa-vest:before {
  content: "\e085"; }

.fa-vest-patches:before {
  content: "\e086"; }

.fa-viacoin:before {
  content: "\f237"; }

.fa-viadeo:before {
  content: "\f2a9"; }

.fa-viadeo-square:before {
  content: "\f2aa"; }

.fa-vial:before {
  content: "\f492"; }

.fa-vials:before {
  content: "\f493"; }

.fa-viber:before {
  content: "\f409"; }

.fa-video:before {
  content: "\f03d"; }

.fa-video-slash:before {
  content: "\f4e2"; }

.fa-vihara:before {
  content: "\f6a7"; }

.fa-vimeo:before {
  content: "\f40a"; }

.fa-vimeo-square:before {
  content: "\f194"; }

.fa-vimeo-v:before {
  content: "\f27d"; }

.fa-vine:before {
  content: "\f1ca"; }

.fa-virus:before {
  content: "\e074"; }

.fa-virus-slash:before {
  content: "\e075"; }

.fa-viruses:before {
  content: "\e076"; }

.fa-vk:before {
  content: "\f189"; }

.fa-vnv:before {
  content: "\f40b"; }

.fa-voicemail:before {
  content: "\f897"; }

.fa-volleyball-ball:before {
  content: "\f45f"; }

.fa-volume-down:before {
  content: "\f027"; }

.fa-volume-mute:before {
  content: "\f6a9"; }

.fa-volume-off:before {
  content: "\f026"; }

.fa-volume-up:before {
  content: "\f028"; }

.fa-vote-yea:before {
  content: "\f772"; }

.fa-vr-cardboard:before {
  content: "\f729"; }

.fa-vuejs:before {
  content: "\f41f"; }

.fa-walking:before {
  content: "\f554"; }

.fa-wallet:before {
  content: "\f555"; }

.fa-warehouse:before {
  content: "\f494"; }

.fa-watchman-monitoring:before {
  content: "\e087"; }

.fa-water:before {
  content: "\f773"; }

.fa-wave-square:before {
  content: "\f83e"; }

.fa-waze:before {
  content: "\f83f"; }

.fa-weebly:before {
  content: "\f5cc"; }

.fa-weibo:before {
  content: "\f18a"; }

.fa-weight:before {
  content: "\f496"; }

.fa-weight-hanging:before {
  content: "\f5cd"; }

.fa-weixin:before {
  content: "\f1d7"; }

.fa-whatsapp:before {
  content: "\f232"; }

.fa-whatsapp-square:before {
  content: "\f40c"; }

.fa-wheelchair:before {
  content: "\f193"; }

.fa-whmcs:before {
  content: "\f40d"; }

.fa-wifi:before {
  content: "\f1eb"; }

.fa-wikipedia-w:before {
  content: "\f266"; }

.fa-wind:before {
  content: "\f72e"; }

.fa-window-close:before {
  content: "\f410"; }

.fa-window-maximize:before {
  content: "\f2d0"; }

.fa-window-minimize:before {
  content: "\f2d1"; }

.fa-window-restore:before {
  content: "\f2d2"; }

.fa-windows:before {
  content: "\f17a"; }

.fa-wine-bottle:before {
  content: "\f72f"; }

.fa-wine-glass:before {
  content: "\f4e3"; }

.fa-wine-glass-alt:before {
  content: "\f5ce"; }

.fa-wix:before {
  content: "\f5cf"; }

.fa-wizards-of-the-coast:before {
  content: "\f730"; }

.fa-wodu:before {
  content: "\e088"; }

.fa-wolf-pack-battalion:before {
  content: "\f514"; }

.fa-won-sign:before {
  content: "\f159"; }

.fa-wordpress:before {
  content: "\f19a"; }

.fa-wordpress-simple:before {
  content: "\f411"; }

.fa-wpbeginner:before {
  content: "\f297"; }

.fa-wpexplorer:before {
  content: "\f2de"; }

.fa-wpforms:before {
  content: "\f298"; }

.fa-wpressr:before {
  content: "\f3e4"; }

.fa-wrench:before {
  content: "\f0ad"; }

.fa-x-ray:before {
  content: "\f497"; }

.fa-xbox:before {
  content: "\f412"; }

.fa-xing:before {
  content: "\f168"; }

.fa-xing-square:before {
  content: "\f169"; }

.fa-y-combinator:before {
  content: "\f23b"; }

.fa-yahoo:before {
  content: "\f19e"; }

.fa-yammer:before {
  content: "\f840"; }

.fa-yandex:before {
  content: "\f413"; }

.fa-yandex-international:before {
  content: "\f414"; }

.fa-yarn:before {
  content: "\f7e3"; }

.fa-yelp:before {
  content: "\f1e9"; }

.fa-yen-sign:before {
  content: "\f157"; }

.fa-yin-yang:before {
  content: "\f6ad"; }

.fa-yoast:before {
  content: "\f2b1"; }

.fa-youtube:before {
  content: "\f167"; }

.fa-youtube-square:before {
  content: "\f431"; }

.fa-zhihu:before {
  content: "\f63f"; }

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.sr-only-focusable:active, .sr-only-focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/FontAwesome/fa-brands-400.eot");
  src: url("../fonts/FontAwesome/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../fonts/FontAwesome/fa-brands-400.woff2") format("woff2"), url("../fonts/FontAwesome/fa-brands-400.woff") format("woff"), url("../fonts/FontAwesome/fa-brands-400.ttf") format("truetype"), url("../fonts/FontAwesome/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/FontAwesome/fa-regular-400.eot");
  src: url("../fonts/FontAwesome/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../fonts/FontAwesome/fa-regular-400.woff2") format("woff2"), url("../fonts/FontAwesome/fa-regular-400.woff") format("woff"), url("../fonts/FontAwesome/fa-regular-400.ttf") format("truetype"), url("../fonts/FontAwesome/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../fonts/FontAwesome/fa-solid-900.eot");
  src: url("../fonts/FontAwesome/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../fonts/FontAwesome/fa-solid-900.woff2") format("woff2"), url("../fonts/FontAwesome/fa-solid-900.woff") format("woff"), url("../fonts/FontAwesome/fa-solid-900.ttf") format("truetype"), url("../fonts/FontAwesome/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }


/* fonts/Open Sans/fonts.css */
/* BEGIN Light */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/Open Sans/Light/OpenSans-Light.eot?v=1.1.0");
  src: url("../fonts/Open Sans/Light/OpenSans-Light.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Open Sans/Light/OpenSans-Light.woff2?v=1.1.0") format("woff2"), url("../fonts/Open Sans/Light/OpenSans-Light.woff?v=1.1.0") format("woff"), url("../fonts/Open Sans/Light/OpenSans-Light.ttf?v=1.1.0") format("truetype"), url("../fonts/Open Sans/Light/OpenSans-Light.svg?v=1.1.0#Light") format("svg");
  font-weight: 300;
  font-style: normal; }
/* END Light */

/* BEGIN Light Italic */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/Open Sans/LightItalic/OpenSans-LightItalic.eot?v=1.1.0");
  src: url("../fonts/Open Sans/LightItalic/OpenSans-LightItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Open Sans/LightItalic/OpenSans-LightItalic.woff2?v=1.1.0") format("woff2"), url("../fonts/Open Sans/LightItalic/OpenSans-LightItalic.woff?v=1.1.0") format("woff"), url("../fonts/Open Sans/LightItalic/OpenSans-LightItalic.ttf?v=1.1.0") format("truetype"), url("../fonts/Open Sans/LightItalic/OpenSans-LightItalic.svg?v=1.1.0#LightItalic") format("svg");
  font-weight: 300;
  font-style: italic; }
/* END Light Italic */

/* BEGIN Regular */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/Open Sans/Regular/OpenSans-Regular.eot?v=1.1.0");
  src: url("../fonts/Open Sans/Regular/OpenSans-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Open Sans/Regular/OpenSans-Regular.woff2?v=1.1.0") format("woff2"), url("../fonts/Open Sans/Regular/OpenSans-Regular.woff?v=1.1.0") format("woff"), url("../fonts/Open Sans/Regular/OpenSans-Regular.ttf?v=1.1.0") format("truetype"), url("../fonts/Open Sans/Regular/OpenSans-Regular.svg?v=1.1.0#Regular") format("svg");
  font-weight: normal;
  font-style: normal; }
/* END Regular */

/* BEGIN Italic */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/Open Sans/Italic/OpenSans-Italic.eot?v=1.1.0");
  src: url("../fonts/Open Sans/Italic/OpenSans-Italic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Open Sans/Italic/OpenSans-Italic.woff2?v=1.1.0") format("woff2"), url("../fonts/Open Sans/Italic/OpenSans-Italic.woff?v=1.1.0") format("woff"), url("../fonts/Open Sans/Italic/OpenSans-Italic.ttf?v=1.1.0") format("truetype"), url("../fonts/Open Sans/Italic/OpenSans-Italic.svg?v=1.1.0#Italic") format("svg");
  font-weight: normal;
  font-style: italic; }
/* END Italic */

/* BEGIN Semibold */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/Open Sans/Semibold/OpenSans-Semibold.eot?v=1.1.0");
  src: url("../fonts/Open Sans/Semibold/OpenSans-Semibold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Open Sans/Semibold/OpenSans-Semibold.woff2?v=1.1.0") format("woff2"), url("../fonts/Open Sans/Semibold/OpenSans-Semibold.woff?v=1.1.0") format("woff"), url("../fonts/Open Sans/Semibold/OpenSans-Semibold.ttf?v=1.1.0") format("truetype"), url("../fonts/Open Sans/Semibold/OpenSans-Semibold.svg?v=1.1.0#Semibold") format("svg");
  font-weight: 600;
  font-style: normal; }
/* END Semibold */

/* BEGIN Semibold Italic */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/Open Sans/SemiboldItalic/OpenSans-SemiboldItalic.eot?v=1.1.0");
  src: url("../fonts/Open Sans/SemiboldItalic/OpenSans-SemiboldItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Open Sans/SemiboldItalic/OpenSans-SemiboldItalic.woff2?v=1.1.0") format("woff2"), url("../fonts/Open Sans/SemiboldItalic/OpenSans-SemiboldItalic.woff?v=1.1.0") format("woff"), url("../fonts/Open Sans/SemiboldItalic/OpenSans-SemiboldItalic.ttf?v=1.1.0") format("truetype"), url("../fonts/Open Sans/SemiboldItalic/OpenSans-SemiboldItalic.svg?v=1.1.0#SemiboldItalic") format("svg");
  font-weight: 600;
  font-style: italic; }
/* END Semibold Italic */

/* BEGIN Bold */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/Open Sans/Bold/OpenSans-Bold.eot?v=1.1.0");
  src: url("../fonts/Open Sans/Bold/OpenSans-Bold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Open Sans/Bold/OpenSans-Bold.woff2?v=1.1.0") format("woff2"), url("../fonts/Open Sans/Bold/OpenSans-Bold.woff?v=1.1.0") format("woff"), url("../fonts/Open Sans/Bold/OpenSans-Bold.ttf?v=1.1.0") format("truetype"), url("../fonts/Open Sans/Bold/OpenSans-Bold.svg?v=1.1.0#Bold") format("svg");
  font-weight: bold;
  font-style: normal; }
/* END Bold */

/* BEGIN Bold Italic */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/Open Sans/BoldItalic/OpenSans-BoldItalic.eot?v=1.1.0");
  src: url("../fonts/Open Sans/BoldItalic/OpenSans-BoldItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Open Sans/BoldItalic/OpenSans-BoldItalic.woff2?v=1.1.0") format("woff2"), url("../fonts/Open Sans/BoldItalic/OpenSans-BoldItalic.woff?v=1.1.0") format("woff"), url("../fonts/Open Sans/BoldItalic/OpenSans-BoldItalic.ttf?v=1.1.0") format("truetype"), url("../fonts/Open Sans/BoldItalic/OpenSans-BoldItalic.svg?v=1.1.0#BoldItalic") format("svg");
  font-weight: bold;
  font-style: italic; }
/* END Bold Italic */

/* BEGIN Extrabold */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/Open Sans/ExtraBold/OpenSans-ExtraBold.eot?v=1.1.0");
  src: url("../fonts/Open Sans/ExtraBold/OpenSans-ExtraBold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Open Sans/ExtraBold/OpenSans-ExtraBold.woff2?v=1.1.0") format("woff2"), url("../fonts/Open Sans/ExtraBold/OpenSans-ExtraBold.woff?v=1.1.0") format("woff"), url("../fonts/Open Sans/ExtraBold/OpenSans-ExtraBold.ttf?v=1.1.0") format("truetype"), url("../fonts/Open Sans/ExtraBold/OpenSans-ExtraBold.svg?v=1.1.0#ExtraBold") format("svg");
  font-weight: 800;
  font-style: normal; }
/* END Extrabold */

/* BEGIN Extrabold Italic */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/Open Sans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot?v=1.1.0");
  src: url("../fonts/Open Sans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Open Sans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff2?v=1.1.0") format("woff2"), url("../fonts/Open Sans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff?v=1.1.0") format("woff"), url("../fonts/Open Sans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.ttf?v=1.1.0") format("truetype"), url("../fonts/Open Sans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.svg?v=1.1.0#ExtraBoldItalic") format("svg");
  font-weight: 800;
  font-style: italic; }
/* END Extrabold Italic */