header, main {opacity:0; transition: opacity 300ms linear;}
.show {opacity:1;}

.tv-lightweight-charts a {
    display:none!important;
}


svg.chart-loading {
 width: 40px;
 transform-origin: center;
 animation: rotate-ch-loading 1.5s linear infinite;
}

.chart-loading circle {
 fill: none;
 stroke: rgb(4 120 87 / 0.7);
 stroke-width: 4;
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
 stroke-linecap: round;
 animation: rotate-ch-dash 1.0s ease-in-out infinite;
}

@keyframes rotate-ch-loading {
 100% {
  transform: rotate(360deg);
 }
}

@keyframes rotate-ch-dash {
 0% {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
 }

 50% {
  stroke-dasharray: 90, 200;
  stroke-dashoffset: -35px;
 }

 100% {
  stroke-dashoffset: -125px;
 }
}


#data-loader-bar-fill {
  transition: opacity 120ms linear;
  background: linear-gradient(270deg, #1bc364, #0a3e7b);
  background-size: 400% 400%;
  animation: UpdateGradient 1s ease infinite;
  pointer-events: none;
}

#aggregations-grid.aggr-updating {
  pointer-events: none;
}


#aggregations-grid.aggr-updating::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  pointer-events: none;
  z-index: 1050;
  background: linear-gradient(270deg, #1bc364, #0a3e7b);
  background-size: 400% 400%;
  animation: UpdateGradient 1s ease infinite;
}

@keyframes UpdateGradient {
  0%   { background-position: 9% 0%; }
  50%  { background-position: 92% 100%; }
  100% { background-position: 9% 0%; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
.blink { animation: blink 1s linear infinite; }

.monitor-highlight {
  border-color:rgba(255,255,255,0.2)!important;
}

.monitor-highlight h3, .monitor-highlight .star-icon {
  color:#eba900!important;
  opacity:inherit!important;
}

.group-selected {
  background: rgba(28, 72, 55, 0.55);
}

.group-selected td:first-child {
  border-left:2px solid #fff;
}

input[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
}

tr.latest { background-color: rgba(99, 102, 241, 0.08); }


.modal-inner::-webkit-scrollbar {
  width: 8px;
}

.modal-inner::-webkit-scrollbar-track {
  background-color: #020617; /* примерно bg-slate-950 */
  border-left: 1px solid #334155; /* border-slate-700 */
}

.modal-inner::-webkit-scrollbar-thumb {
  background-color: #182239; /* bg-slate-900 */
  border-radius: 9999px;
}

.modal-inner::-webkit-scrollbar-thumb:hover {
  background-color: #1e293b; /* чуть светлее при ховере */
}

.modal-inner {
  scrollbar-width: thin;
  scrollbar-color: #182239 #020617; /* thumb bg, track bg */
}

.template-sub.last .line-vert {
  height:33px;
  bottom:inherit;
}

/* TOOLTIPS */

.js-tooltip {
  overflow: visible; 
  pointer-events: none;
  z-index: 9999;
}

.js-tooltip .tooltip-arrow { display: none !important; }

.js-tooltip .tooltip-inner::after{
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: inherit;
  box-shadow: inherit;
  border-radius: 1px;
  left: 50%;
  transform-origin: center;
  pointer-events: none;
  display: block;
}

.js-tooltip.placement-top .tooltip-inner::after {
  bottom: -3px;
  top: auto;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.js-tooltip.placement-bottom .tooltip-inner::after {
  top: -3px;
  left: 50%;
  bottom: auto;
  transform: translateX(-50%) rotate(45deg);
}

/* left */
.js-tooltip.placement-left .tooltip-inner::after {
  right: -3px;
  left: auto;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

/* right */
.js-tooltip.placement-right .tooltip-inner::after {
  left: -3px;
  right: auto;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}




#bg-image {
    inset: 0;
    background-image: url('../img/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.firefly span {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0.2vw;
  height: 0.2vw;
  margin: -0.2vw 0 0 9.8vw;
  pointer-events: none;
  animation: move 200s ease alternate infinite;
  z-index:-2;
}

.firefly span::before,
.firefly span::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw;
}

.firefly span::before {
  background: black;
  opacity: 0.4;
  animation: drift 12s ease alternate infinite;
}

.firefly span::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw blue;
  animation: drift 12s ease alternate infinite,
             flash 8s ease infinite;
}

@keyframes move {
  0% {
    transform: translateX(0vw) translateY(0vh) scale(0.3);
  }
  20% {
    transform: translateX(20vw) translateY(-10vh) scale(0.8);
  }
  40% {
    transform: translateX(-25vw) translateY(15vh) scale(0.5);
  }
  60% {
    transform: translateX(35vw) translateY(25vh) scale(1.9);
  }
  80% {
    transform: translateX(-30vw) translateY(-20vh) scale(0.6);
  }
  100% {
    transform: translateX(10vw) translateY(-30vh) scale(1.5);
  }
}

@keyframes drift {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes flash {
  0%, 30%, 100% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw blue;
  }
  5% {
    opacity: 1;
    box-shadow: 0 0 2vw 0.4vw yellow;
  }
}

.firefly span:nth-child(1) {
  animation-duration: 180s;
  animation-delay: -10s;
}
.firefly span:nth-child(1)::before {
  animation-duration: 10s;
}
.firefly span:nth-child(1)::after {
  animation-duration: 10s, 7s;
  animation-delay: 0s, 1s;
}

.firefly span:nth-child(2) {
  animation-duration: 210s;
  animation-delay: -40s;
}
.firefly span:nth-child(2)::before {
  animation-duration: 14s;
}
.firefly span:nth-child(2)::after {
  animation-duration: 14s, 9s;
  animation-delay: 0s, 3s;
}

.firefly span:nth-child(3) {
  animation-duration: 190s;
  animation-delay: -70s;
}
.firefly span:nth-child(3)::before {
  animation-duration: 11s;
}
.firefly span:nth-child(3)::after {
  animation-duration: 11s, 6s;
  animation-delay: 0s, 2s;
}

.firefly span:nth-child(4) {
  animation-duration: 220s;
  animation-delay: -25s;
}
.firefly span:nth-child(4)::before {
  animation-duration: 16s;
}
.firefly span:nth-child(4)::after {
  animation-duration: 16s, 10s;
  animation-delay: 0s, 4s;
}

.firefly span:nth-child(5) {
  animation-duration: 200s;
  animation-delay: -95s;
}
.firefly span:nth-child(5)::before {
  animation-duration: 13s;
}
.firefly:nth-child(5)::after {
  animation-duration: 13s, 8s;
  animation-delay: 0s, 5s;
}

.firefly span:nth-child(6) {
  animation-duration: 230s;
  animation-delay: -130s;
}
.firefly span:nth-child(6)::before {
  animation-duration: 18s;
}
.firefly span:nth-child(6)::after {
  animation-duration: 18s, 11s;
  animation-delay: 0s, 1.5s;
}

.firefly span:nth-child(7) {
  animation-duration: 195s;
  animation-delay: -160s;
}
.firefly span:nth-child(7)::before {
  animation-duration: 12s;
}
.firefly span:nth-child(7)::after {
  animation-duration: 12s, 7.5s;
  animation-delay: 0s, 3.5s;
}

.firefly span:nth-child(8) {
  animation-duration: 205s;
  animation-delay: -50s;
}
.firefly span:nth-child(8)::before {
  animation-duration: 15s;
}
.firefly span:nth-child(8)::after {
  animation-duration: 15s, 9.5s;
  animation-delay: 0s, 2.8s;
}

.firefly span:nth-child(9) {
  animation-duration: 215s;
  animation-delay: -120s;
}
.firefly span:nth-child(9)::before {
  animation-duration: 17s;
}
.firefly span:nth-child(9)::after {
  animation-duration: 17s, 10.5s;
  animation-delay: 0s, 4.2s;
}

.firefly span:nth-child(10) {
  animation-duration: 185s;
  animation-delay: -70s;
}
.firefly span:nth-child(10)::before {
  animation-duration: 9s;
}
.firefly span:nth-child(10)::after {
  animation-duration: 9s, 6.5s;
  animation-delay: 0s, 2.1s;
}

.firefly span:nth-child(11) {
  animation-duration: 240s;
  animation-delay: -200s;
}
.firefly span:nth-child(11)::before {
  animation-duration: 18s;
}
.firefly span:nth-child(11)::after {
  animation-duration: 18s, 12s;
  animation-delay: 0s, 5.3s;
}

.firefly span:nth-child(12) {
  animation-duration: 210s;
  animation-delay: -150s;
}
.firefly span:nth-child(12)::before {
  animation-duration: 14s;
}
.firefly span:nth-child(12)::after {
  animation-duration: 14s, 8.5s;
  animation-delay: 0s, 3.2s;
}

.firefly span:nth-child(13) {
  animation-duration: 200s;
  animation-delay: -30s;
}
.firefly span:nth-child(13)::before {
  animation-duration: 12s;
}
.firefly span:nth-child(13)::after {
  animation-duration: 12s, 7.8s;
  animation-delay: 0s, 1.9s;
}

.firefly span:nth-child(14) {
  animation-duration: 225s;
  animation-delay: -110s;
}
.firefly span:nth-child(14)::before {
  animation-duration: 16s;
}
.firefly span:nth-child(14)::after {
  animation-duration: 16s, 9.8s;
  animation-delay: 0s, 4.7s;
}

.firefly span:nth-child(15) {
  animation-duration: 190s;
  animation-delay: -180s;
}
.firefly span:nth-child(15)::before {
  animation-duration: 11s;
}
.firefly span:nth-child(15)::after {
  animation-duration: 11s, 6.9s;
  animation-delay: 0s, 2.4s;
}