::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-thumb {
    background: #ffffff1c;
    border-radius: 50px;
}

@keyframes widthLine {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes pulseQuestion {
    0% {
        transform: scale(1);
        box-shadow: 0px 0px 0px 10px rgba(27,125,255,0);
    }
    50% {
        box-shadow: 0px 0px 0px 10px rgba(27,125,255,0.15);
    }
    80% {
        box-shadow: 0px 0px 0px 10px rgba(27,125,255,0.25);
    }
    100% {
        transform: scale(1.05);
        box-shadow: 0px 0px 0px 10px rgba(27,125,255,0.3);
    }
}

.scroll-0::-webkit-scrollbar {
    width: 0;
    height: 0;
}

pre code.hljs {
    display: block;
    overflow-x: auto;
}

code.hljs {
    padding: 3px 5px
}

/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/
.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_ {
    color: #ff7b72
}

.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_ {
    color: #d2a8ff
}

.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable {
    color: #79c0ff
}

.hljs-meta .hljs-string,.hljs-regexp,.hljs-string {
    color: #a5d6ff
}

.hljs-built_in,.hljs-symbol {
    color: #ffa657
}

.hljs-code,.hljs-comment,.hljs-formula {
    color: #8b949e
}

.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag {
    color: #7ee787
}

.hljs-subst {
    color: #c9d1d9
}

.hljs-section {
    color: #1f6feb;
    font-weight: 700
}

.hljs-bullet {
    color: #f2cc60
}

.hljs-emphasis {
    color: #c9d1d9;
    font-style: italic
}

.hljs-strong {
    color: #c9d1d9;
    font-weight: 700
}

.hljs-addition {
    color: #aff5b4;
    background-color: #033a16
}

.hljs-deletion {
    color: #ffdcd7;
    background-color: #67060c
}


#chatra:not(.chatra--expanded) {
	 visibility: hidden !important;
	 opacity: 0 !important;
	 pointer-events: none;
	 transition: none;
}

.lightrope {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    position: fixed;
    padding: 0;
    z-index: 30;
    left: 50%;
    transform: translateX(-50%);
    top: -16px;
    display: flex;
    height: 70px;
    pointer-events: none;
  }
  
  .lightrope li.animate {
    animation: lightrope 1s ease-in-out infinite !important;
    animation-fill-mode: forwards;
    animation-direction: alternate;
  }
  
  @keyframes lightrope {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(15deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  .lightrope li {
    position: relative;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    flex-shrink: 0;
    pointer-events: all;
    width: 11px;
    height: 22px;
    border-radius: 50%;
    margin: 20px;
    display: inline-block;
    background: #FFFA78;
    box-shadow: 0px 4.66667px 24px 3px #FFFA78;
    -webkit-animation-name: flash-1;
    animation-name: flash-1;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }
  
  .lightrope li:nth-child(2n+1) {
    background: #9C39FF;
    box-shadow: 0px 4.66667px 24px 3px rgb(0 255 255 / 27%);
    -webkit-animation-name: flash-2;
    animation-name: flash-2;
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
  }
  
  .lightrope li:nth-child(4n+2) {
    background: #39F3FF;
    box-shadow: 0px 4.66667px 24px 3px #39F3FF;
    -webkit-animation-name: flash-3;
    animation-name: flash-3;
    -webkit-animation-duration: 1.1s;
    animation-duration: 1.1s;
  }
  
  .lightrope li:nth-child(odd) {
    -webkit-animation-duration: 1.8s;
    animation-duration: 1.8s;
  }
  
  .lightrope li:nth-child(3n+1) {
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
  }
  
  .lightrope li:before {
    content: "";
    position: absolute;
    background: #2d304a;
    width: 7px;
    height: 7.33333px;
    border-radius: 3px;
    top: -4.66667px;
    left: 2px;
  }
  
  .lightrope li:after {
    content: "";
    top: -15px;
    left: 5px;
    position: absolute;
    width: 52px;
    height: 18.66667px;
    border-bottom: solid #292b3e 2px;
    border-radius: 50%;
  }
  
  .lightrope li:last-child:after {
    content: none;
  }
  
  .lightrope li:first-child {
    /* margin-left: -40px; */
  }
  
  @keyframes flash-1 {
    0%, 100% {
      background: #FFFA78;
      box-shadow: 0px 4.66667px 24px 3px #FFFA78;
    }
    50% {
      background: rgba(255, 250, 120, 0.2);
      box-shadow: 0px 4.66667px 24px 3px rgba(255, 250, 120, 0.1);
    }
  }
  @keyframes flash-2 {
    0%, 100% {
      background: #9C39FF;
      box-shadow: 0px 4.66667px 24px 3px #9C39FF;
    }
    50% {
      background: rgba(156, 57, 255, 0.2);
      box-shadow: 0px 4.66667px 24px 3px rgba(156, 57, 255, 0.1);
    }
  }
  @keyframes flash-3 {
    0%, 100% {
      background: #39F3FF;
      box-shadow: 0px 4.66667px 24px 3px #39F3FF;
    }
    50% {
      background: rgba(57, 243, 255, 0.2);
      box-shadow: 0px 4.66667px 24px 3px rgba(57, 243, 255, 0.1);
    }
  }