*{margin:0;padding:0}
body {font-family: Scada, sans-serif;}
#player {position: absolute;width: 100% !important;height: 100% !important;background: #111;z-index: 1;display: flex;align-items: center;justify-content: center;}
.jwbtn{opacity: .8}.jwbtn:hover{opacity: 1}.jw-button-container > .jw-icon-rewind {display: none!important;}
/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
  display: flex;
  align-items: flex-start;
  aspect-ratio: 1;
}
.loader:before,
.loader:after {
  content: "";
  flex: 1;
  aspect-ratio: 1;
  --g: conic-gradient(from -90deg at 10px 10px,#fff 90deg,#0000 0);
  background: var(--g), var(--g), var(--g);
  filter: drop-shadow(30px 30px 0 #fff);
  animation: l20 1s infinite;
}
.loader:after {
  transform: scaleX(-1);
}
@keyframes l20 {
   0%   {background-position:0     0, 10px 10px, 20px 20px}
   33%  {background-position:10px  10px}
   66%  {background-position:0    20px,10px 10px,20px 0   }
   100% {background-position:0     0, 10px 10px, 20px 20px}
}

#container {
position: relative;
}
#serverlist {
color: #eee;
z-index: 99;
display: none;
}
#serverlist ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#serverlist ul li {
padding: 7px 15px;
cursor: pointer;
}
li.jwsources:hover {
background: rgb(255 255 255 / 10%);
}
li.jwsources.selected {
background: rgb(255 255 255 / 15%);
}
.s-list-title {
background: rgba(0, 0, 0, .4);
padding: 10px 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.svg-icon-close {
width: 25px;
fill: #ddd;
margin-left: 15px;
cursor: pointer;
}