body {
  background: #121212;
  font-family: tahoma;
  font-size: 12px;
}

/* scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #646464; border-radius: 4px; }
::-webkit-scrollbar-track-piece { background-color: #646464; border-radius: 4px;}
::-webkit-scrollbar-thumb { height: 25px; background-color: #c2c2c2; border-radius: 4px;}
::-webkit-scrollbar-corner { background-color: inherit;}
::-webkit-resizer { background-color: #666; }

/* thanks bootstrap 4 */
.btn-group-xs > .btn, .btn-xs {
    padding  : .25rem .4rem;
    font-size  : .875rem;
    line-height  : .5;
    border-radius : .2rem;
}
.nbm { margin-bottom: 0; }
.text-command {
  color: #fe8cff;
}

.popover {
  background: #1e1e1e;
  border-color: rgba(190, 190, 190, 0.88);
} 

.popover .popover-header {
  font-size: 0.9rem;
  border-bottom-color: rgba(190, 190, 190, 0.88);
  background: #121212;
  color: rgba(255, 255, 255, 0.88);
} 

.popover .arrow::before {
  border-left-color: #fff;
} 

.popover .arrow::after {
  border-left-color: #121212;
} 

/* loader animation */
img.longload {
  position: absolute;
  left: -7px;
  top: 15px;
  opacity: 0;
  transition: opacity 500ms ease-out;
}
#welcome.longload img.longload.unknown {
  opacity: 0.8;
}

#welcome.error img.longload.error {
  opacity: 0.8;
}

.loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  animation: spin 2s linear infinite;
  z-index: 1001;
}
#welcome.error .loader {
  animation-play-state: paused;
}

.loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  animation: spin 3s linear infinite;
}
#welcome.error .loader:before {
  animation-play-state: paused;
}

.loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  animation: spin 1.5s linear infinite;
}

#welcome.error .loader:after {
  animation-play-state: paused;
}

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

/* custom style */

@media (min-width: 576px) {
  .pr-0-nxs {
    padding-right: 0;
  }
  .pl-0-nxs {
    padding-left: 0;
  }
}

.flexcentered {
  min-height: 100%;
  min-height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.soft_elli {
  display: inline-block;
  white-space: nowrap;
}
.elli {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#welcome {
  color: rgba(255, 255, 255, 0.88);
  position: fixed;
  z-index: 100;
}

#page {
  margin: 0px auto;
  padding: 15px 0;
}

#content {
  padding: 5px;
  background: #232323;
  border-radius: 5px;
  overflow: auto;
  border: 1px solid #333;
  color: rgba(255, 255, 255, 0.88);
  margin-top: 15px;
  height: 160px;
}
#content p {
  margin: 0;
  line-height: 18px;
  max-width: 100%;
  overflow-wrap: break-word;
}

.st-input-ctn {
  margin-top: 10px;
}

.st-input-ctn .dropdown-menu {
  background-color: #232323;
  border: 1px solid #6c757d;
}
.st-input-ctn .dropdown-menu .dropdown-divider {
  border-color: #6c757d;
}
.st-input-ctn .dropdown-menu a {
  color: #868e96;
  padding: .25rem 1rem;
}
.st-input-ctn .dropdown-menu a:focus,
.st-input-ctn .dropdown-menu a:hover {
  background-color: #3a3a3a;
  color: rgba(255, 255, 255, 0.88);
}

.st-input-ctn .input-group-append button {
  border: 1px solid #333;
}

#input {
  border: 1px solid #333;
  color: rgba(255, 255, 255, 0.88);
  background: #121212;
}
#input:focus {
  box-shadow: none;
  border: 1px solid #6c757d;
}

#input_nofocus {
  position: absolute;
  width: 0px;
  height: 0px;
  padding: 0px;
  border: none;
  opacity: 0;
}

#status {
  width: 100%;
  display: block;
  float: left;
  margin-top: 15px;
  text-align: right;
  color: rgba(255, 255, 255, 0.88);
}

#view_ctn {
  overflow: auto;
  min-height: 200px;
  width: 100%;
  position: relative;
}
#view_ctn.r1_1  { padding-top: 100%; }
#view_ctn.r4_3  { padding-top: 75%; }
#view_ctn.r3_2  { padding-top: 66.66%; }
#view_ctn.r8_5  { padding-top: 65.5%; }
#view_ctn.r16_9 { padding-top: 56.25%; }

#view {
  /*background: lime;*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  overflow: hidden;
}

#clients {
  background: #232323;
  color: #f26638;
  height: 200px;
  margin-top: 15px;
  overflow: auto;
}
#clients > div {
  padding: 3px;
}
#clients [data-client-index] {
  position: relative;
  background: #1e1e1e;
  padding-bottom: 5px;
}
#clients [data-client-index]:nth-child(odd) {
  background: #2a2a2a ;
}
#clients [data-client-index]:nth-child(n+1) {
  margin-top: 0px;
}
#clients div.first * {
  font-size: 14px;
}
#clients div.second {
}
#clients div.isHost [data-attr=name] {
  font-style: italic;
}
#clients [data-attr=drift],
#clients [data-attr=progress] {
  padding-left: 3px;
  font-size: 10px;
}
#clients [data-attr=progress-bar] {
  background: #444;
  height: 3px;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}
#clients [data-attr=progress-bar-buffered] {
  background: #888;
  height: 100%;
  position: absolute;
  width: 0%;
  left: 0;
  bottom: 0;
  right: 0;
  transition: width 2.0s  cubic-bezier(1.0, 0, 0, 1.0);
}
#clients [data-attr=progress-bar-position] {
  background: red;
  border-left: 3px solid yellow;
  border-right: 3px solid yellow;
  padding-left: 1px;
  width: 0;
  height: 100%;
  opacity: 0.7;
  position: absolute;
  left: 0%;
  margin-left: -3px;
  bottom: 0;
  right: 0;
  transition: left 2s linear;
}
.tt-client-info {
  text-align: left;
}
.tt-client-info-attributes {
  font-size: 12px;
  line-height: 16px;
}
.tt-client-info-attributes strong {
  display: block;
}

#playlist {
  margin-top: 15px;
  overflow-y: auto;
}

#playlist_rattach_ctn #playlist {
  position: absolute;
  margin-top: 0;
  top: 0;
  left: 0;
  right: 15px;
  bottom: 0;
  max-width: 100%;
  transition: max-width 0.2s ease-in-out;
}
#playlist_rattach_ctn #playlist.collapsed {
  max-width: 0%;
}

#playlist_ctn #playlist {
  max-height: 182px;
  transition: max-height 0.2s ease-in-out, margin-top 0.2s ease-in-out;
}

#playlist_ctn #playlist.collapsed {
  max-height: 0px;
  margin-top: 0px;
}

#playlist > div {
  background: #1e1e1e;
  position: relative;
  overflow: hidden;
  padding: 8px;
  display: flex;
  flex-direction: row;
}
#playlist > div:nth-child(odd) {
  background: #2a2a2a;
}
#playlist > div .active_indicator {
  display: inline-block;
  font-size: 10px;
  position: absolute;
  bottom: 12px;
  /*left: 116px;*/
  right: 68px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
#playlist > div.active .active_indicator {
  opacity: 1;
}

#playlist > div img[data-attr=thumbnail] {
  display: inline-block;
  max-width: 100px;
  max-height: 75px;
  cursor: pointer;
}

#playlist > div span.first {
  min-width: 100px;
  min-height: 75px;
  text-align: center;
}
#playlist > div span.second {
  display: inline-block;
  float: left;
  color: #eee;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  padding: 4px 0px 4px 8px;
}

#playlist > div a[data-attr=name] {
  display: inline-block;
  color: #eee;
}
#playlist > div a[data-attr=author] {
  display: block;
  font-size: 10px;
  color: #5bc0de;
}

#playlist > div span.btn-group {
  position: absolute;
  bottom: 8px;
  right: 8px;
}