@import url(https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap);


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Space Grotesk", sans-serif;
  background-color: #030712;
  color: #f3f4f6;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color 0.5s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom styles for scrollbar in tabs */
.tabs-container::-webkit-scrollbar {
  height: 0px;
}

.tabs-container::-webkit-scrollbar-thumb,
.tabs-container::-webkit-scrollbar-track {
  background-color: transparent;
}

.loading-spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}

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

  100% {
    transform: rotate(360deg);
  }
}

#myLogo {
  position: absolute;
  width: 15%;
  height: 15%;
  right: 5px;
  top: 5px;
}

.recent-stream-url {
  display: block;
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
}

.shaka-player-container {
  position: relative;
}


#default-banner {
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.95), rgba(31, 41, 55, 0.95));
  backdrop-filter: blur(5px);
}

footer {
  position: relative;
  background-color: transparent;
  color: #f0f0f0;
  text-align: center;
  padding: 15px 20px;
  margin-top: auto;
}

@media (min-width: 1024px) {

  .shaka-player-container,
  #shaka-video-player,
  #video-player-container {
    height: 100%;
    width: 100%;
  }

  #right-side-combined {
    border: 1px solid rgba(55, 65, 81, 0.5);
  }
}

#shaka-video-player {
  background-color: #000;
}

@media only screen and (min-width:450px) and (max-width:940px) {
  .shaka-play-button {
    padding: calc(12% / 3);
  }
}