body {
  overflow: overlay;
  --scrollbar-color: #00000000;
}

body.scrolling {
  --scrollbar-color: #00000040 !important;
}

* {
  --scrollbar-color: #00000000;
}

*:hover,
*:focus,
*:focus-within {
  --scrollbar-color: #00000040 !important;
}

*::-webkit-scrollbar {
  display: block;
  width: 16px;
}

*::-webkit-scrollbar-button {
  display: none;
}

*::-webkit-scrollbar-track {
  background-color: #00000000;
}

*::-webkit-scrollbar-track-piece {
  background-color: #00000000;
}

*::-webkit-scrollbar-thumb {
  background-color: #00000000;
  border: 5px solid transparent;
  border-radius: 24px;
  box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-color);
  border: 0px solid transparent;
  box-shadow: none;
}

progress {
  background: rgba(210, 207, 193, 0.95);
  border: none;
  color: rgb(0, 100, 180);
  width: 100%;
  height: 7px;
}

progress::-webkit-progress-bar { 
  background: rgba(210, 207, 193, 0.95);
}

progress::-webkit-progress-value { 
  background-color: rgb(0, 100, 180);
}

.newprog {
  background: #04af2f;
  border-radius: 5px 0 0 5px;
  pointer-events: none;
}

.newprog-bg {
  border: 0;
  border-radius: 5px;
  background: rgba(210, 207, 193, 0.8);
  width: 270px;
  padding: 10px;
  pointer-events: none;
}

.newprog-bar {
  background: none;
  position: absolute;
  height: fit-content;
  max-width: 100%;
  margin-top: -10px;
  margin-left: -10px;
}

.signup,
.next {
  background-color: rgb(74, 74, 255);
  color: white;
  border-radius: 5px;
  padding: 10px 40px;
  font-weight: bold;
  text-align: center;
}
.b_red {
  background-color: rgb(185, 0, 0);
  color: white;
}
.signup {
  width: 100%;
}
.next {
  width: 80%;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.thumb,
.qthumb {
  width: 100%;
  object-fit: contain;
}

.thumb {
  height: 100%;
}

.disp_normal {
  position: absolute; margin-left: calc(80% + 5px); margin-top: 20px; color: black; font-weight: bold; font-size: 20px;
}

.disp_special {
  position: absolute; margin-left: calc(80% + 5px); margin-top: 15px; color: black; font-weight: bold;
}

.choice, .livechoice_special, .skeletonchoice_special {
  border: 2px solid rgb(76, 76, 76);
  border-radius: 5px;
  width: 80%;
  padding: 15px;
  font-weight: bold;
  text-align: left;
  margin-bottom: 15px;
}

.livechoice_normal, .skeletonchoice_normal {
  background: white; margin-bottom: 20px; border: 2px solid rgb(76, 76, 76); border-radius: 5px; width: 80%; padding: 15px; font-weight: bold; text-align: left; font-size: 20px;
}

.skeleton_solved{
  width: 100%;
  height: 100%;
}

.skeletonchoice_normal, .skeletonchoice_special, .typein_screen, .skeleton_solved {
  display: inline-block;
  position: relative;
  overflow: hidden;
  background-color: #DDDBDD;
}

.skeletonchoice_normal::after, .skeletonchoice_special::after, .typein_screen::after, .skeleton_solved::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
  -webkit-animation: shimmer 2s infinite;
          animation: shimmer 2s infinite;
  content: "";
}
@-webkit-keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.scores {
  width: 65%;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 15px;
  text-align: left;
  pointer-events: none;
}

.counter {
  margin-left: 5px;
  margin-top: -3px;
  font-weight: bold;
  color: rgb(0, 100, 180);
  font-size: 20px;
}

.tick{
  display: inline-block;
  width: 18px;
  height: 18px;  
  margin-right: 10px;
}

.green_button,
.red_button,
.grey_button {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  border-radius: 50%;
}
.green_button {
  background: rgb(74, 255, 74);
  border: 2px solid rgb(34, 177, 76);
}
.red_button {
  background: rgb(204, 23, 23);
  border: 2px solid rgb(234, 68, 68);
}
.grey_button {
  background: rgb(39, 38, 38);
  border: 2px solid rgb(68, 67, 67);
}

.type_pill, .tag_pill {
  display: inline-block;
  padding: 5px 15px;
  background: rgb(225,225,225);
  border: 1px solid rgb(204,204,204);
  border-radius: 30px;
}

.type_pill {
  margin: 0 15px 0 0;
}

.tag_pill {
  margin: 0 7px 0 0;
}

.modal-backdrop {
  opacity: 0.75 !important;
}

.modal {
  text-align: center;
}

.ext {
  padding: 0 20px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.placeholder {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.cdown-container {
  position: absolute;
  width: 100%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.letter {
  background: black;
  padding: 2px 7px;
  color: white;
  border-radius: 50%;
  margin-right: 5px;
}

#cont {
  display: none;
}

.pill {
  display: inline-block;
  background: rgb(76, 76, 76);
  border-radius: 15px;
  color: white;
  padding: 2px 15px;
}

.prg-bar, .prog-bar {
  background: none;
  position: absolute;
  height: fit-content;
  max-width: 100%;  
}

.prog-bar {
  margin-top: -17px;
  margin-left: -17px;
}

.prg, .prgreen {  
  width: 0;
  transition: width 0.5s ease-in;
}

.prg{
  background: #000;
  opacity: 0.2;
  border-radius: 5px;
}

.prgreen{
  background: rgb(0,206,0);
  border-radius: 10px;
}

.level {
  background: rgb(255, 193, 6);
  border-radius: 5px 0 0 5px;
  pointer-events: none;
}

.level-bg {
  border: 0;
  border-radius: 5px;
  background: rgb(99, 135, 184);
  width: 300px;
  padding: 17px;
  margin-bottom: 15px;
  pointer-events: none;
}

.slider {
  width: 300px;
}

.next_level {
  position: relative;
  display: inline-block;
  margin-left: -28px;
  background: rgb(40, 167, 69);
  color: white;
  padding: 3px 15px 5px 15px;
  border-radius: 3px;
}

.new_level {
  position: absolute;
  font-weight: bold;
  font-size: 70px;
  text-shadow: 2px 2px 4px #000000;
  color: rgb(240, 195, 14);
}

.error {
  background: rgb(234, 68, 68);
  padding: 10px 15px;
  color: white;
  font-weight: bold;
  border-radius: 5px;
}

.white {
  color: white;
  text-decoration: none;
}

.black {
  color: black;
  text-decoration: none;
}

.pge-bar {
  position: relative;
  width: 100%;
  border: none;
  background: none;
  height: 16px;
  margin-top: 5px;
}

.pge_green,
.pge_red {
  position: absolute;
  left: 0;
  top: 0;
  height: 10px;
}

.pge_green {
  background: #04af2f;
}

.pge_red {
  background: rgb(231, 76, 60);
}

.theater,
.vid_theater,
.type_theater,
.com_theater {
  width: 100%;
  max-width: 960px;
  overflow: auto;
  scrollbar-width: thin;
}

.theater {
  height: calc(100vh - 194px);
  border-top: 2px dashed black;
}

.vid_theater {
  height: calc(100vh - 157px);
}

.com_theater {
  height: calc(100vh - 77px);
}

.type_theater {
  height: calc(100vh - 132px);
  margin-top: 55px;
  border-top: 2px dashed black;
}

.qscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(210, 207, 193, 0.95);
  z-index: 9999999;
}

.vid {
  position: absolute;
  margin: 0;
  height: calc(100vh - 122px);
  width: 100%;
}

.w_area {
  position: relative;
  height: calc(100vh - 57px);
  width: 100%;
  padding: 20px 30px 80px 30px;
}

.brown-bg {
  background: rgb(210, 207, 193);
}

.greyish-bg {
  background: rgb(240, 240, 240);
}

.whitish-bg {
  background: rgb(235, 235, 235);
}

.black-bg {
  background: black;
}

.ans {
  position: absolute;
  font-weight: bold;
  font-size: 24px;
  color: rgb(63, 72, 204);
  padding: 0;
  margin: 0;
}

.tres{
  font-weight: bold;
  font-size: 24px;
  color: rgb(63, 72, 204);
}

.newplayer {
  float: left;
  margin-right: 10px;
  background: rgba(128, 0, 128);
  padding: 10px 20px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 15px;
  border-radius: 5px;
}

.start_quiz {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
  background: rgba(0,0,0,0.5);
}

.screen_white {
  background: white;
}

.screen_brown {
  background: rgb(239, 228, 176);
}

.screen_white,
.screen_brown {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  top: 0;
  left: 0;
  z-index: 11;
}

.fun_fact {
  background: grey;
  padding: 20px;
  width: 80%;
}

#right_tabs {
  overflow: auto;
  scrollbar-width: thin;
  padding: 0;
}

.spcr {
  height: 20px;
}

.grow-wrap {
  display: grid;
}

.grow-wrap::after {
  content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
}

.grow-wrap > textarea {
  resize: none;
  overflow: hidden;
}

.grow-wrap > textarea,
.grow-wrap::after {
  border: 1px solid black;
  padding: 0.5rem;
  font: inherit;
  grid-area: 1 / 1 / 2 / 2;
}

.centered{
  display: flex;
  align-items: center;
  justify-content: center;
}

.fadein {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.fadeout {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

.results {
  position: relative;
  padding: 30px;
  background: white;
  border-radius: 10px;
}

.buffr {
  height: 0;
}

.inparea {
  width: 200px;
}

.bottom-strip{
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.5);
  padding: 18px 0;
  z-index: 9999999;
}

@media screen and (max-width: 527px) {
  .clive {
    font-size: 21px;
  }
}

@media screen and (max-width: 780px) {
  .cban {
    margin-right: -15px;
  }
}

@media screen and (max-width: 992px) {
  .mspacer {
    height: 60vh;
  }

  .banr_left {
    margin-left: 0;
  }

  .pill-bar{    
    padding: 12px 0;
  }

  .tagpad{
    margin-top: 50px;
  } 

  .mainpad{
    padding-top: 30px;
  }
}

@media screen and (max-width: 767px) {
  .modal {
    margin-top: 30px !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
}

@media screen and (min-width: 992px) {
  .spcr,
  .tabl,
  .inf {
    display: none;
  }

  .buffr {
    height: 50px;
  }

  .pill-bar{
    padding: 12px 0 12px 10px;
  }

  .tagpad{
    margin-top: 50px;
    padding-left: 30px;
  }

  .mainpad{
    padding: 30px 0 0 20px;
  }
}

@media screen and (min-width: 768px) {
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }

  .thumbnail {
    height: 150px;
  }

  .inparea {
    width: 300px;
  }
}

.horz::-webkit-scrollbar,
.pill_horz::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.horz,
.pill_horz {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.horz {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 80%;
  height: 24px;
  padding: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  z-index: 10;
}

.lcontainer {
  padding: 0;
  height: 22px;
  white-space: nowrap;
}

.pill_horz {
  margin-left: 10px;
  padding: 0;
  overflow-x: scroll;
  overflow-y: hidden;
}

.pill_container {
  padding: 0;
  white-space: nowrap;
}

.disparea {
  height: 65vh;
  position: fixed;
  bottom: 0;
  background: white;
}

.ntab {
  position: fixed;
  bottom: 0;
  padding: 5px 25px 5px 0;
  background: rgb(24, 24, 24);
}

.cwindow {
  right: 0;
  bottom: 60px;
  z-index: 9999999;
  padding-left: 10px;
  text-shadow: 1px 1px 3px #000;
  background: rgba(223, 222, 210, 0.9);
  position: absolute;    
  width: 90%;
  max-width: 400px;
}

[data-title] {
  position: absolute;
  z-index: 11;
}

[data-title]:hover::before {
  content: attr(data-title);
  position: absolute;
  top: -26px;
  display: inline-block;
  padding: 3px 6px;
  border-radius: 2px;
  background: orange;
  color: black;
  font-size: 12px;
  font-family: sans-serif;
  white-space: nowrap;
}

[data-title]:hover::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 8px;
  display: inline-block;
  color: orange;
  border: 8px solid transparent;
  border-top: 8px solid orange;
}

.banr {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgb(255, 193, 7);
  padding: 15px 20px;
  z-index: 1000000;
}

.banr_left {
  margin-left: 52px;
}

.banr_right {
  float: right;
  margin-right: 5px;
  margin-top: 5px;
}

.pill-bar{
  position: fixed;
  width: 100%;
  top: 55px;
  background: rgb(248, 248, 248);
  z-index: 1036;
  border-bottom: 1px solid rgb(225,225,225);
}

.cban {
  position: absolute;
  right: 20px;
  margin-top: -10px;
}

.clive {
  color: rgb(24, 24, 24);
  font-weight: bold;
  font-size: 25px;
  text-shadow: 2px 2px 4px #fff;
}

.chathead{
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 15px;
  margin-left: -10px;
}

.livechatbox{
  margin-left: -15px;
  padding-left: 15px;
}

.closechat {
  position: absolute;
  right: 5px;
  padding: 10px;
  margin-top: -15px;  
  font-size: 20px;
  cursor: pointer;
  color: white;
}

.livechattext{
  width: 100%;
  border: none;
  padding: 5px 10px;
  background: rgba(240, 240, 240, 0.8);
}

.rchat {
  position: absolute;
  bottom: 60px;
  right: 15px;
  color: white;
  cursor: pointer;
  z-index: 10;
}

.closelivechat {
  position: absolute;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
  color: white;
}

.recchat {
  position: absolute;
  bottom: 60px;
  right: 15px;
  color: white;
  cursor: pointer;
  z-index: 10;
}

ul.highlight {
  list-style: none;
  margin: 20px 0;
  padding: 0;
}

ul.highlight li {
  padding-bottom: 10px;
}

ul.highlight li:before {
  content: "\2714\0020";
}

.catags{
  display: none;
  background: rgb(52, 58, 64);
  margin-top: 1px;
}

.catags label {
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 0;
  display: block; 
}

.catags label:hover {
  cursor: pointer;
}

.sugg a, .searchr a {
  display: block;
  padding: 5px 15px;
  cursor: pointer;     
}

.sugg a:hover {
  background: grey;
}

.searchrs {
  background: rgb(52, 58, 64);
  border: 1px solid grey;
}

.searchr a{
  color: white;
  text-decoration: none;
}

.searchr a:hover{ 
  color: white;
  background: rgb(63, 71, 78);
}

.taghead {
  background: rgb(69, 78, 86);
  color: rgb(192, 192, 192);
  font-weight: bold;
  padding: 5px 15px;
}

.gridtable{width: 96%; color: black;}
.gridtable td{padding: 10px; border-bottom: rgb(235, 235, 235) 2px solid;}
.gh-br-left{background: white; border-right: rgb(235, 235, 235) 2px solid;}
.ga-right{background: white; color: green;}
.gh-right{background: white;}
.ga-br-right{background: white; color: green; border-right: rgb(235, 235, 235) 2px solid;}
.gtitle{border-bottom: rgb(235, 235, 235) 2px solid; font-weight: bold; font-size: 14px;}

.mcallout{background: rgba(0,0,0, 0.7); border-radius: 10px; color: white; padding: 15px 20px;}
.und{border-bottom: 1px solid rgba(50, 50, 50, 0.8);}

/**
 * ==============================================
 * Dot Pulse
 * ==============================================
 */
 .dot-pulse {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  box-shadow: 9999px 0 0 -5px #9880ff;
  animation: dotPulse 1.5s infinite linear;
  animation-delay: .25s;
}

.dot-pulse::before, .dot-pulse::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
}

.dot-pulse::before {
  box-shadow: 9984px 0 0 -5px #9880ff;
  animation: dotPulseBefore 1.5s infinite linear;
  animation-delay: 0s;
}

.dot-pulse::after {
  box-shadow: 10014px 0 0 -5px #9880ff;
  animation: dotPulseAfter 1.5s infinite linear;
  animation-delay: .5s;
}

@keyframes dotPulseBefore {
  0% {
    box-shadow: 9984px 0 0 -5px #9880ff;
  }
  30% {
    box-shadow: 9984px 0 0 2px #9880ff;
  }
  60%,
  100% {
    box-shadow: 9984px 0 0 -5px #9880ff;
  }
}

@keyframes dotPulse {
  0% {
    box-shadow: 9999px 0 0 -5px #9880ff;
  }
  30% {
    box-shadow: 9999px 0 0 2px #9880ff;
  }
  60%,
  100% {
    box-shadow: 9999px 0 0 -5px #9880ff;
  }
}

@keyframes dotPulseAfter {
  0% {
    box-shadow: 10014px 0 0 -5px #9880ff;
  }
  30% {
    box-shadow: 10014px 0 0 2px #9880ff;
  }
  60%,
  100% {
    box-shadow: 10014px 0 0 -5px #9880ff;
  }
}

.fapulse {
  color: white;
  font-size: 25px;
  height: 10px;
  width:  10px;
  animation: pulse 1s linear infinite;
}

.fars{
  font-size: 25px;
  height: 10px;
  width:  10px;
}
  
@keyframes pulse {
  0%{
    transform: scale(1);
    opacity: 0;
  }
  50%{
    transform: scale(1.3);
    opacity:1;
  }
  100%{
    transform: scale(1);
    opacity:0;
  }
}

/**
 * ==============================================
 * Dot Spin
 * ==============================================
 */
 .dot-spin {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: transparent;
  color: transparent;
  box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), 0 18px 0 0 rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), -18px 0 0 0 rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 rgba(152, 128, 255, 0);
  animation: dotSpin 1.5s infinite linear;
}

@keyframes dotSpin {
  0%,
  100% {
    box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  12.5% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  25% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  37.5% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  50% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  62.5% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 0 #9880ff;
  }
  75% {
    box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 0 #9880ff;
  }
  87.5% {
    box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 #9880ff;
  }
}

.player-box{
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  background: rgb(231, 76, 60);
  color:#fff;
  text-shadow: 2px 2px 4px rgb(24, 24, 24);
  border-radius: 5px;
  padding: 10px 15px;
  font-weight: bold;
  font-size: 20px;
}

.pop{
  animation: pop 1.5s linear;
}

@keyframes pop {
  0% { transform: scale(0.5); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.cssanimation, .cssanimation span {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.bounceInBottom { animation-name: bounceInBottom }
@keyframes bounceInBottom {
  0% { transform: translate3d(0, 300%, 0) }
  58% { transform: translate3d(0, -27px, 0) }
  73% { transform: translate3d(0, 12px, 0) }
  88% { transform: translate3d(0, -8px, 0) }
}

.ring-container {
  position: relative;
}

.circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: 23px;
  left: 23px;
}

.ringring {
  border-radius: 30px;
  height: 25px;
  width: 25px;
  position: absolute;
  left: 15px;
  top: 15px;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite; 
  opacity: 0.0
}

.circle-green{
  background-color: #62bd19;
}

.ring-green{
  border: 3px solid #62bd19;
}

.circle-red{
  background-color: rgb(234, 68, 68);
}

.ring-red{
  border: 3px solid rgb(234, 68, 68);
}

@keyframes pulsate {
  0% {transform: scale(0.1, 0.1); opacity: 0.0;}
  50% {opacity: 1.0;}
  100% {transform: scale(1.2, 1.2); opacity: 0.0;}
}

.newgrid {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  padding: 0;
}
.newcard {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.2s;
  text-decoration: none;
  color: inherit;
  margin-bottom: 20px;
}
.newcard:hover {
  transform: scale(1.03);
}
.newthumbnail {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 ratio */
  background: #ddd;
}
.newthumbnail img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}
.newtitle {
  font-weight: bold;
}
.newcontent {
  padding: 10px;
}
.meta {
  font-size: 12px;
  color: #666;
}

.categories-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.categories-container {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.categories-container::-webkit-scrollbar {
  display: none;
}
.category-btn {
  flex: 0 0 auto;
  padding: 6px 16px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 16px;
  background: #f0f0f0;
  cursor: pointer;
  white-space: nowrap;
  color:rgb(24, 24, 24);
}
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgb(255,255,255,0.8);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
  color: #333;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); /* shadow only */
}
.categories-wrapper:hover .scroll-btn {
  opacity: 1;
}