/* mysquadstats Squad CSS */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: radial-gradient(circle, #ffffff, #c9c7c7);
}

footer {
  margin-top: auto;
  text-align: center;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Lato', sans-serif;
}

.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 3s;
  z-index: -1;
}

#bg2 {
  opacity: 0;
}

.w3-bar,
h1,
button {
  font-family: 'Montserrat', sans-serif;
}

.fa-anchor,
.fa-coffee {
  font-size: 200px;
}

.navbar-nav .nav-item .nav-link {
  color: black !important;
  font-weight: bold;
}

.navbar-nav .nav-item .nav-link:hover {
  transform: translateY(-3px) scale(1.05);
  transition: 0.3s;
}

.nav-item.dropdown .dropdown-menu {
  margin-top: 0;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.marquee {
  background: radial-gradient(circle, rgb(255, 0, 0), rgb(194, 2, 2));
  color: white;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.marquee p {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 30s linear infinite;
  font-size: 1rem;
  margin: 0;
  font-weight: bold;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.nav-tabs {
  font-weight: bold;
}

.header-image {
  max-width: 67px;
  max-height: 67px;
}

.code-block {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #9e9e9e;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.glow {
  color: #000000;
  text-shadow:
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #fff;
}

.glow-box {
  box-shadow:
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff;
}

.mss-container {
  background: white;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid black;
  margin-bottom: 30px;
  margin-left: 10px;
  margin-right: 10px;
}

.stats-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.stats-container {
  background: radial-gradient(circle, #c9c9c9, #6d6d6d) !important;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid black;
  margin-bottom: 30px;
  width: 45%;
  box-sizing: border-box;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.image-container img {
  width: 7rem;
  height: 7rem;
}

.copy-link-icon {
  cursor: pointer;
}

.api-section {
  margin: 20px auto;
  border-radius: 10px;
  padding: 10px;
  background-color: #d3d3d3;
}

.api-description {
  margin-left: 4%;
}

.api-parameters {
  list-style-type: none;
}

.method-description p {
  line-height: 1;
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid black;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Hide spinner by default */
#searchButton .spinner {
  display: none;
}

/* CSS for the progress bar container */
.progress {
  background-color: #e0e0e0;
  border-radius: 10px !important;
  border: 1px solid #000;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 25px;
}

/* CSS for the progress bar fill */
.progress-bar {
  background-color: #4caf50 !important;
  height: 100%;
  transition: width 3s ease !important;
}

/* CSS for the progress bar text */
.progress-bar-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  line-height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Colors */
.mysquadstats-squadYellow {
  color: #000 !important;
  background: radial-gradient(circle, #fff346, #ffc40b) !important;
}

.mysquadstats-amber,
.mysquadstats-hover-amber:hover {
  color: #000 !important;
  background-color: #ffc107 !important;
}

.mysquadstats-aqua,
.mysquadstats-hover-aqua:hover {
  color: #000 !important;
  background-color: #00ffff !important;
}

.mysquadstats-blue,
.mysquadstats-hover-blue:hover {
  color: #fff !important;
  background-color: #2196f3 !important;
}

.mysquadstats-light-blue,
.mysquadstats-hover-light-blue:hover {
  color: #000 !important;
  background-color: #87ceeb !important;
}

.mysquadstats-brown,
.mysquadstats-hover-brown:hover {
  color: #fff !important;
  background-color: #795548 !important;
}

.mysquadstats-cyan,
.mysquadstats-hover-cyan:hover {
  color: #000 !important;
  background-color: #00bcd4 !important;
}

.mysquadstats-blue-grey,
.mysquadstats-hover-blue-grey:hover,
.mysquadstats-blue-gray,
.mysquadstats-hover-blue-gray:hover {
  color: #fff !important;
  background-color: #607d8b !important;
}

.mysquadstats-green,
.mysquadstats-hover-green:hover {
  color: #fff !important;
  background-color: #4caf50 !important;
}

.mysquadstats-light-green,
.mysquadstats-hover-light-green:hover {
  color: #000 !important;
  background-color: #8bc34a !important;
}

.mysquadstats-indigo,
.mysquadstats-hover-indigo:hover {
  color: #fff !important;
  background-color: #3f51b5 !important;
}

.mysquadstats-khaki,
.mysquadstats-hover-khaki:hover {
  color: #000 !important;
  background-color: #f0e68c !important;
}

.mysquadstats-lime,
.mysquadstats-hover-lime:hover {
  color: #000 !important;
  background-color: #cddc39 !important;
}

.mysquadstats-orange,
.mysquadstats-hover-orange:hover {
  color: #000 !important;
  background-color: #ff9800 !important;
}

.mysquadstats-deep-orange,
.mysquadstats-hover-deep-orange:hover {
  color: #fff !important;
  background-color: #ff5722 !important;
}

.mysquadstats-pink,
.mysquadstats-hover-pink:hover {
  color: #fff !important;
  background-color: #e91e63 !important;
}

.mysquadstats-purple,
.mysquadstats-hover-purple:hover {
  color: #fff !important;
  background-color: #9c27b0 !important;
}

.mysquadstats-deep-purple,
.mysquadstats-hover-deep-purple:hover {
  color: #fff !important;
  background-color: #673ab7 !important;
}

.mysquadstats-red,
.mysquadstats-hover-red:hover {
  color: #fff !important;
  background-color: #f44336 !important;
}

.mysquadstats-sand,
.mysquadstats-hover-sand:hover {
  color: #000 !important;
  background-color: #fdf5e6 !important;
}

.mysquadstats-teal,
.mysquadstats-hover-teal:hover {
  color: #fff !important;
  background-color: #009688 !important;
}

.mysquadstats-yellow,
.mysquadstats-hover-yellow:hover {
  color: #000 !important;
  background-color: #ffeb3b !important;
}

.mysquadstats-white,
.mysquadstats-hover-white:hover {
  color: #000 !important;
  background-color: #fff !important;
}

.mysquadstats-black,
.mysquadstats-hover-black:hover {
  color: #fff !important;
  background-color: #000 !important;
}

.mysquadstats-grey,
.mysquadstats-hover-grey:hover,
.mysquadstats-gray,
.mysquadstats-hover-gray:hover {
  color: #000 !important;
  background: radial-gradient(circle, #c9c9c9, #6d6d6d) !important;
}

.mysquadstats-light-grey,
.mysquadstats-hover-light-grey:hover,
.mysquadstats-light-gray,
.mysquadstats-hover-light-gray:hover {
  color: #000 !important;
  background-color: #d3d3d3 !important;
}

.mysquadstats-dark-grey,
.mysquadstats-hover-dark-grey:hover,
.mysquadstats-dark-gray,
.mysquadstats-hover-dark-gray:hover {
  color: #fff !important;
  background-color: #616161 !important;
}

.mysquadstats-pale-red,
.mysquadstats-hover-pale-red:hover {
  color: #000 !important;
  background-color: #ffdddd !important;
}

.mysquadstats-pale-green,
.mysquadstats-hover-pale-green:hover {
  color: #000 !important;
  background-color: #ddffdd !important;
}

.mysquadstats-pale-yellow,
.mysquadstats-hover-pale-yellow:hover {
  color: #000 !important;
  background-color: #ffffcc !important;
}

.mysquadstats-pale-blue,
.mysquadstats-hover-pale-blue:hover {
  color: #000 !important;
  background-color: #ddffff !important;
}

.mysquadstats-text-amber,
.mysquadstats-hover-text-amber:hover {
  color: #ffc107 !important;
}

.mysquadstats-text-aqua,
.mysquadstats-hover-text-aqua:hover {
  color: #00ffff !important;
}

.mysquadstats-text-blue,
.mysquadstats-hover-text-blue:hover {
  color: #2196f3 !important;
}

.mysquadstats-text-light-blue,
.mysquadstats-hover-text-light-blue:hover {
  color: #87ceeb !important;
}

.mysquadstats-text-brown,
.mysquadstats-hover-text-brown:hover {
  color: #795548 !important;
}

.mysquadstats-text-cyan,
.mysquadstats-hover-text-cyan:hover {
  color: #00bcd4 !important;
}

.mysquadstats-text-blue-grey,
.mysquadstats-hover-text-blue-grey:hover,
.mysquadstats-text-blue-gray,
.mysquadstats-hover-text-blue-gray:hover {
  color: #607d8b !important;
}

.mysquadstats-text-green,
.mysquadstats-hover-text-green:hover {
  color: #4caf50 !important;
}

.mysquadstats-text-light-green,
.mysquadstats-hover-text-light-green:hover {
  color: #8bc34a !important;
}

.mysquadstats-text-indigo,
.mysquadstats-hover-text-indigo:hover {
  color: #3f51b5 !important;
}

.mysquadstats-text-khaki,
.mysquadstats-hover-text-khaki:hover {
  color: #b4aa50 !important;
}

.mysquadstats-text-lime,
.mysquadstats-hover-text-lime:hover {
  color: #cddc39 !important;
}

.mysquadstats-text-orange,
.mysquadstats-hover-text-orange:hover {
  color: #ff9800 !important;
}

.mysquadstats-text-deep-orange,
.mysquadstats-hover-text-deep-orange:hover {
  color: #ff5722 !important;
}

.mysquadstats-text-pink,
.mysquadstats-hover-text-pink:hover {
  color: #e91e63 !important;
}

.mysquadstats-text-purple,
.mysquadstats-hover-text-purple:hover {
  color: #9c27b0 !important;
}

.mysquadstats-text-deep-purple,
.mysquadstats-hover-text-deep-purple:hover {
  color: #673ab7 !important;
}

.mysquadstats-text-red,
.mysquadstats-hover-text-red:hover {
  color: #f44336 !important;
}

.mysquadstats-text-sand,
.mysquadstats-hover-text-sand:hover {
  color: #fdf5e6 !important;
}

.mysquadstats-text-teal,
.mysquadstats-hover-text-teal:hover {
  color: #009688 !important;
}

.mysquadstats-text-yellow,
.mysquadstats-hover-text-yellow:hover {
  color: #d2be0e !important;
}

.mysquadstats-text-white,
.mysquadstats-hover-text-white:hover {
  color: #fff !important;
}

.mysquadstats-text-black,
.mysquadstats-hover-text-black:hover {
  color: #000 !important;
}

.mysquadstats-text-grey,
.mysquadstats-hover-text-grey:hover,
.mysquadstats-text-gray,
.mysquadstats-hover-text-gray:hover {
  color: #757575 !important;
}

.mysquadstats-text-light-grey,
.mysquadstats-hover-text-light-grey:hover,
.mysquadstats-text-light-gray,
.mysquadstats-hover-text-light-gray:hover {
  color: #f1f1f1 !important;
}

.mysquadstats-text-dark-grey,
.mysquadstats-hover-text-dark-grey:hover,
.mysquadstats-text-dark-gray,
.mysquadstats-hover-text-dark-gray:hover {
  color: #3a3a3a !important;
}

.mysquadstats-border-amber,
.mysquadstats-hover-border-amber:hover {
  border-color: #ffc107 !important;
}

.mysquadstats-border-aqua,
.mysquadstats-hover-border-aqua:hover {
  border-color: #00ffff !important;
}

.mysquadstats-border-blue,
.mysquadstats-hover-border-blue:hover {
  border-color: #2196f3 !important;
}

.mysquadstats-border-light-blue,
.mysquadstats-hover-border-light-blue:hover {
  border-color: #87ceeb !important;
}

.mysquadstats-border-brown,
.mysquadstats-hover-border-brown:hover {
  border-color: #795548 !important;
}

.mysquadstats-border-cyan,
.mysquadstats-hover-border-cyan:hover {
  border-color: #00bcd4 !important;
}

.mysquadstats-border-blue-grey,
.mysquadstats-hover-border-blue-grey:hover,
.mysquadstats-border-blue-gray,
.mysquadstats-hover-border-blue-gray:hover {
  border-color: #607d8b !important;
}

.mysquadstats-border-green,
.mysquadstats-hover-border-green:hover {
  border-color: #4caf50 !important;
}

.mysquadstats-border-light-green,
.mysquadstats-hover-border-light-green:hover {
  border-color: #8bc34a !important;
}

.mysquadstats-border-indigo,
.mysquadstats-hover-border-indigo:hover {
  border-color: #3f51b5 !important;
}

.mysquadstats-border-khaki,
.mysquadstats-hover-border-khaki:hover {
  border-color: #f0e68c !important;
}

.mysquadstats-border-lime,
.mysquadstats-hover-border-lime:hover {
  border-color: #cddc39 !important;
}

.mysquadstats-border-orange,
.mysquadstats-hover-border-orange:hover {
  border-color: #ff9800 !important;
}

.mysquadstats-border-deep-orange,
.mysquadstats-hover-border-deep-orange:hover {
  border-color: #ff5722 !important;
}

.mysquadstats-border-pink,
.mysquadstats-hover-border-pink:hover {
  border-color: #e91e63 !important;
}

.mysquadstats-border-purple,
.mysquadstats-hover-border-purple:hover {
  border-color: #9c27b0 !important;
}

.mysquadstats-border-deep-purple,
.mysquadstats-hover-border-deep-purple:hover {
  border-color: #673ab7 !important;
}

.mysquadstats-border-red,
.mysquadstats-hover-border-red:hover {
  border-color: #f44336 !important;
}

.mysquadstats-border-sand,
.mysquadstats-hover-border-sand:hover {
  border-color: #fdf5e6 !important;
}

.mysquadstats-border-teal,
.mysquadstats-hover-border-teal:hover {
  border-color: #009688 !important;
}

.mysquadstats-border-yellow,
.mysquadstats-hover-border-yellow:hover {
  border-color: #ffeb3b !important;
}

.mysquadstats-border-white,
.mysquadstats-hover-border-white:hover {
  border-color: #fff !important;
}

.mysquadstats-border-black,
.mysquadstats-hover-border-black:hover {
  border-color: #000 !important;
}

.mysquadstats-border-grey,
.mysquadstats-hover-border-grey:hover,
.mysquadstats-border-gray,
.mysquadstats-hover-border-gray:hover {
  border-color: #9e9e9e !important;
}

.mysquadstats-border-light-grey,
.mysquadstats-hover-border-light-grey:hover,
.mysquadstats-border-light-gray,
.mysquadstats-hover-border-light-gray:hover {
  border-color: #f1f1f1 !important;
}

.mysquadstats-border-dark-grey,
.mysquadstats-hover-border-dark-grey:hover,
.mysquadstats-border-dark-gray,
.mysquadstats-hover-border-dark-gray:hover {
  border-color: #616161 !important;
}

.mysquadstats-border-pale-red,
.mysquadstats-hover-border-pale-red:hover {
  border-color: #ffe7e7 !important;
}

.mysquadstats-border-pale-green,
.mysquadstats-hover-border-pale-green:hover {
  border-color: #e7ffe7 !important;
}

.mysquadstats-border-pale-yellow,
.mysquadstats-hover-border-pale-yellow:hover {
  border-color: #ffffcc !important;
}

.mysquadstats-border-pale-blue,
.mysquadstats-hover-border-pale-blue:hover {
  border-color: #e7ffff !important;
}