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

body, html {
  width: 100vw;
  height: 100vh;
}

body {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: black;
  overflow: hidden;
}

body {
  --sb-track-color: #232E33;
  --sb-thumb-color: #000000;
  --sb-size: 1px;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
}

.view-container {
  display: flex;
  position: relative;
  width: 100%;
  background-color: green;
}
.view-container .player {
  display: flex;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.view-container .player .cap {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 0;
  bottom: 0;
  z-index: 999999;
  width: 8vw;
  height: 4px;
}
.view-container .player .cap img {
  display: flex;
  position: absolute;
  width: 100%;
  top: 0.8vw;
  left: 0.8vw;
  opacity: 0.6;
}
.view-container .player .tv-container {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  z-index: 4;
}
.view-container .player .tv-container img {
  display: flex;
  width: 25%;
  height: 25%;
  margin: auto;
}
.view-container .player .tv-container .tv-show {
  width: 100%;
  height: 100%;
}

.channel-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1vh;
  width: 95%;
  overflow-y: scroll;
}
.channel-list::-webkit-scrollbar {
  width: var(--sb-size);
}
.channel-list::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 3px;
}
.channel-list::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 3px;
}
.channel-list button {
  margin-bottom: 2vh;
  padding: 0;
  background-color: transparent;
  border: 1px solid #fff;
  width: 16vw;
  height: 16vw;
  cursor: pointer;
}
.channel-list button img {
  width: 100%;
  height: 100%;
}

.cls-1 {
  font-size: 8vw;
  text-anchor: middle;
  fill: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 900;
}

.cls-2 {
  fill: #f9ffb3;
}/*# sourceMappingURL=style.css.map */