/* ---- heatmap progress reveal ------------------------------------------- */
/* The bar is the only feedback the Plot button gives now. The dot loader
   used to cover the gap between the click and the first poll, but the bar
   covers it itself -- `running=` is applied by the Dash server the instant
   the callback starts -- and two spinners saying the same thing read as a
   bug. This reveals the bar top to bottom, as if drawn out from under a
   sheet.

   clip-path rather than height or max-height: it composites on the GPU and
   reflows nothing, so revealing the bar cannot shift the figures below it.

   The padding/negative-margin pair is what keeps the glow intact. The bar
   carries a box-shadow that spreads ~16px, and a clip rectangle flush with
   the border box would shear it off mid-animation. The padding moves the
   clip edge 24px clear of the bar; the negative margin pulls the box back
   out so the bar keeps the full width it had before the shell existed.
   (Negative clip-path insets would also work and are tidier, but support
   for them is less uniform than padding, which is simply layout.) */
.fh-progress-shell {
    padding: 20px 24px 8px;
    margin: 0 -24px;
}

/* `backwards`, not `forwards` or `both`: the from-state applies before the
   first frame so nothing flashes unclipped, and once the animation ends the
   element reverts to having NO clip-path at all. A forwards fill would
   leave the final rectangle in place for the rest of the run, clipping the
   glow every time the bar pulses. */
.fh-progress-shell--reveal {
    animation: fhProgressReveal 420ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

@keyframes fhProgressReveal {
    from {
        clip-path: inset(0 0 100% 0);
        opacity: 0;
        transform: translateY(-10px);
    }

    60% {
        opacity: 1;
    }

    to {
        clip-path: inset(0);
        opacity: 1;
        transform: translateY(0);
    }
}

/* Users who ask for less motion still get the bar, just without the sweep. */
@media (prefers-reduced-motion: reduce) {
    .fh-progress-shell--reveal {
        animation: none;
    }
}

.blue-glow {
    box-shadow: 0 0 12px 4px rgba(1, 155, 37, 0.748); /* Bootstrap's primary blue */
    transition: box-shadow 0.3s ease-in-out;
}
.progress-bar{
    background-color: #00d06f !important;
}
.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: not-allowed;
    scale: 0.7;
}

.central {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 5em;
    height: 5em;
    border-radius: 50%;
    box-shadow: 0.5em 1em 1em cyan,
                -0.5em 0.5em 1em lime,
                0.5em -0.5em 1em white,
                -0.5em -0.5em 1em yellow;
}

.external-shadow {
    width: 5em;
    height: 5em;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0.5em 0.5em 3em cyan,
                -0.5em 0.5em 3em lime,
                0.5em -0.5em 3em white,
                -0.5em -0.5em 3em yellow;
    z-index: 999;
    animation: rotate 3s linear infinite;
    background-color: #212121;
}

.intern {
    position: absolute;
    color: white;
    z-index: 9999;
    font-size: 1em;
}

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

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
  
/* Box animation Loader */
/* From Uiverse.io by Nawsome */ 
.banter-loader {
    position: absolute;
    width: 72px;
    height: 72px;
  }
  
  .banter-loader__box {
    float: left;
    position: relative;
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }
  
  .banter-loader__box:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #663fdb;
  }
  
  .banter-loader__box:nth-child(3n) {
    margin-right: 0;
    margin-bottom: 6px;
  }
  
  .banter-loader__box:nth-child(1):before, .banter-loader__box:nth-child(4):before {
    margin-left: 26px;
  }
  
  .banter-loader__box:nth-child(3):before {
    margin-top: 52px;
  }
  
  .banter-loader__box:last-child {
    margin-bottom: 0;
  }
  
  @keyframes moveBox-1 {
    9.0909090909% {
      transform: translate(-26px, 0);
    }
  
    18.1818181818% {
      transform: translate(0px, 0);
    }
  
    27.2727272727% {
      transform: translate(0px, 0);
    }
  
    36.3636363636% {
      transform: translate(26px, 0);
    }
  
    45.4545454545% {
      transform: translate(26px, 26px);
    }
  
    54.5454545455% {
      transform: translate(26px, 26px);
    }
  
    63.6363636364% {
      transform: translate(26px, 26px);
    }
  
    72.7272727273% {
      transform: translate(26px, 0px);
    }
  
    81.8181818182% {
      transform: translate(0px, 0px);
    }
  
    90.9090909091% {
      transform: translate(-26px, 0px);
    }
  
    100% {
      transform: translate(0px, 0px);
    }
  }
  
  .banter-loader__box:nth-child(1) {
    animation: moveBox-1 4s infinite;
  }
  
  @keyframes moveBox-2 {
    9.0909090909% {
      transform: translate(0, 0);
    }
  
    18.1818181818% {
      transform: translate(26px, 0);
    }
  
    27.2727272727% {
      transform: translate(0px, 0);
    }
  
    36.3636363636% {
      transform: translate(26px, 0);
    }
  
    45.4545454545% {
      transform: translate(26px, 26px);
    }
  
    54.5454545455% {
      transform: translate(26px, 26px);
    }
  
    63.6363636364% {
      transform: translate(26px, 26px);
    }
  
    72.7272727273% {
      transform: translate(26px, 26px);
    }
  
    81.8181818182% {
      transform: translate(0px, 26px);
    }
  
    90.9090909091% {
      transform: translate(0px, 26px);
    }
  
    100% {
      transform: translate(0px, 0px);
    }
  }
  
  .banter-loader__box:nth-child(2) {
    animation: moveBox-2 4s infinite;
  }
  
  @keyframes moveBox-3 {
    9.0909090909% {
      transform: translate(-26px, 0);
    }
  
    18.1818181818% {
      transform: translate(-26px, 0);
    }
  
    27.2727272727% {
      transform: translate(0px, 0);
    }
  
    36.3636363636% {
      transform: translate(-26px, 0);
    }
  
    45.4545454545% {
      transform: translate(-26px, 0);
    }
  
    54.5454545455% {
      transform: translate(-26px, 0);
    }
  
    63.6363636364% {
      transform: translate(-26px, 0);
    }
  
    72.7272727273% {
      transform: translate(-26px, 0);
    }
  
    81.8181818182% {
      transform: translate(-26px, -26px);
    }
  
    90.9090909091% {
      transform: translate(0px, -26px);
    }
  
    100% {
      transform: translate(0px, 0px);
    }
  }
  
  .banter-loader__box:nth-child(3) {
    animation: moveBox-3 4s infinite;
  }
  
  @keyframes moveBox-4 {
    9.0909090909% {
      transform: translate(-26px, 0);
    }
  
    18.1818181818% {
      transform: translate(-26px, 0);
    }
  
    27.2727272727% {
      transform: translate(-26px, -26px);
    }
  
    36.3636363636% {
      transform: translate(0px, -26px);
    }
  
    45.4545454545% {
      transform: translate(0px, 0px);
    }
  
    54.5454545455% {
      transform: translate(0px, -26px);
    }
  
    63.6363636364% {
      transform: translate(0px, -26px);
    }
  
    72.7272727273% {
      transform: translate(0px, -26px);
    }
  
    81.8181818182% {
      transform: translate(-26px, -26px);
    }
  
    90.9090909091% {
      transform: translate(-26px, 0px);
    }
  
    100% {
      transform: translate(0px, 0px);
    }
  }
  
  .banter-loader__box:nth-child(4) {
    animation: moveBox-4 4s infinite;
  }
  
  @keyframes moveBox-5 {
    9.0909090909% {
      transform: translate(0, 0);
    }
  
    18.1818181818% {
      transform: translate(0, 0);
    }
  
    27.2727272727% {
      transform: translate(0, 0);
    }
  
    36.3636363636% {
      transform: translate(26px, 0);
    }
  
    45.4545454545% {
      transform: translate(26px, 0);
    }
  
    54.5454545455% {
      transform: translate(26px, 0);
    }
  
    63.6363636364% {
      transform: translate(26px, 0);
    }
  
    72.7272727273% {
      transform: translate(26px, 0);
    }
  
    81.8181818182% {
      transform: translate(26px, -26px);
    }
  
    90.9090909091% {
      transform: translate(0px, -26px);
    }
  
    100% {
      transform: translate(0px, 0px);
    }
  }
  
  .banter-loader__box:nth-child(5) {
    animation: moveBox-5 4s infinite;
  }
  
  @keyframes moveBox-6 {
    9.0909090909% {
      transform: translate(0, 0);
    }
  
    18.1818181818% {
      transform: translate(-26px, 0);
    }
  
    27.2727272727% {
      transform: translate(-26px, 0);
    }
  
    36.3636363636% {
      transform: translate(0px, 0);
    }
  
    45.4545454545% {
      transform: translate(0px, 0);
    }
  
    54.5454545455% {
      transform: translate(0px, 0);
    }
  
    63.6363636364% {
      transform: translate(0px, 0);
    }
  
    72.7272727273% {
      transform: translate(0px, 26px);
    }
  
    81.8181818182% {
      transform: translate(-26px, 26px);
    }
  
    90.9090909091% {
      transform: translate(-26px, 0px);
    }
  
    100% {
      transform: translate(0px, 0px);
    }
  }
  
  .banter-loader__box:nth-child(6) {
    animation: moveBox-6 4s infinite;
  }
  
  @keyframes moveBox-7 {
    9.0909090909% {
      transform: translate(26px, 0);
    }
  
    18.1818181818% {
      transform: translate(26px, 0);
    }
  
    27.2727272727% {
      transform: translate(26px, 0);
    }
  
    36.3636363636% {
      transform: translate(0px, 0);
    }
  
    45.4545454545% {
      transform: translate(0px, -26px);
    }
  
    54.5454545455% {
      transform: translate(26px, -26px);
    }
  
    63.6363636364% {
      transform: translate(0px, -26px);
    }
  
    72.7272727273% {
      transform: translate(0px, -26px);
    }
  
    81.8181818182% {
      transform: translate(0px, 0px);
    }
  
    90.9090909091% {
      transform: translate(26px, 0px);
    }
  
    100% {
      transform: translate(0px, 0px);
    }
  }
  
  .banter-loader__box:nth-child(7) {
    animation: moveBox-7 4s infinite;
  }
  
  @keyframes moveBox-8 {
    9.0909090909% {
      transform: translate(0, 0);
    }
  
    18.1818181818% {
      transform: translate(-26px, 0);
    }
  
    27.2727272727% {
      transform: translate(-26px, -26px);
    }
  
    36.3636363636% {
      transform: translate(0px, -26px);
    }
  
    45.4545454545% {
      transform: translate(0px, -26px);
    }
  
    54.5454545455% {
      transform: translate(0px, -26px);
    }
  
    63.6363636364% {
      transform: translate(0px, -26px);
    }
  
    72.7272727273% {
      transform: translate(0px, -26px);
    }
  
    81.8181818182% {
      transform: translate(26px, -26px);
    }
  
    90.9090909091% {
      transform: translate(26px, 0px);
    }
  
    100% {
      transform: translate(0px, 0px);
    }
  }
  
  .banter-loader__box:nth-child(8) {
    animation: moveBox-8 4s infinite;
  }
  
  @keyframes moveBox-9 {
    9.0909090909% {
      transform: translate(-26px, 0);
    }
  
    18.1818181818% {
      transform: translate(-26px, 0);
    }
  
    27.2727272727% {
      transform: translate(0px, 0);
    }
  
    36.3636363636% {
      transform: translate(-26px, 0);
    }
  
    45.4545454545% {
      transform: translate(0px, 0);
    }
  
    54.5454545455% {
      transform: translate(0px, 0);
    }
  
    63.6363636364% {
      transform: translate(-26px, 0);
    }
  
    72.7272727273% {
      transform: translate(-26px, 0);
    }
  
    81.8181818182% {
      transform: translate(-52px, 0);
    }
  
    90.9090909091% {
      transform: translate(-26px, 0);
    }
  
    100% {
      transform: translate(0px, 0);
    }
  }
  
  .banter-loader__box:nth-child(9) {
    animation: moveBox-9 4s infinite;
  }
  
.dot-loader {
  --ballcolor: #00d06f;
  --shadow: 0px 0 #ffffff00;
  --shadowcolor: #ffffff00;
  width: 10px;
  height: 10px;
  left: -120px;
  border-radius: 50%;
  position: relative;
  color: var(--ballcolor);
  animation: shadowRolling 2s linear infinite;
}

@keyframes shadowRolling {
  
  0% {
    box-shadow: var(--shadow),
        var(--shadow),
        var(--shadow),
        var(--shadow);
  }

  12% {
    box-shadow: 100px 0 var(--ballcolor),
        var(--shadow),
        var(--shadow), 
        var(--shadow);
  }

  25% {
    box-shadow: 110px 0 var(--ballcolor),
        100px 0 var(--ballcolor),
        var(--shadow), 
        var(--shadow);
  }

  36% {
    box-shadow: 120px 0 var(--ballcolor), 
        110px 0 var(--ballcolor), 
        100px 0 var(--ballcolor), 
         var(--shadow);
  }

  50% {
    box-shadow: 130px 0 var(--ballcolor),
        120px 0 var(--ballcolor),
        110px 0 var(--ballcolor),
        100px 0 var(--ballcolor);
  }

  62% {
    box-shadow: 200px 0 var(--shadowcolor),
         130px 0 var(--ballcolor), 
         120px 0 var(--ballcolor), 
         110px 0 var(--ballcolor);
  }

  75% {
    box-shadow: 200px 0 var(--shadowcolor),
        200px 0 var(--shadowcolor),
        130px 0 var(--ballcolor), 
        120px 0 var(--ballcolor);
  }

  87% {
    box-shadow: 200px 0 var(--shadowcolor), 
        200px 0 var(--shadowcolor), 
        200px 0 var(--shadowcolor), 
        130px 0 var(--ballcolor);
  }

  100% {
    box-shadow: 200px 0 var(--shadowcolor), 
        200px 0 var(--shadowcolor),
        200px 0 var(--shadowcolor),
        200px 0 var(--shadowcolor);
  }
}

.circle-loader {
    width: 60px;
    height: 60px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-loader::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border-top: 2px solid #8900FF;
    border-right: 2px solid transparent;
    animation: spinner8217 0.8s linear infinite;
}

.circle-loader-text {
    position: relative;
    z-index: 1;
    font-size: 12px;
    font-weight: bold;
    color: #8900FF;
    font-family: Arial, sans-serif;
}

@keyframes spinner8217 {
    to {
        transform: rotate(360deg);
    }
}

/*         html.Div(
            [
                html.Span(
                    "0%",
                    className="loader-text"
                )
            ],
            className="circle-loader",
            style={
                'width': '60px',
                'height': '60px',
                'position': 'relative'
            }
        ) */