/* RealPlayer 8 and RealServer 8 (apps/real). Original CSS artwork in the
   period's brushed-metal and navy palette. */

/* ------------------------------------------------------------- RealPlayer */

.rp {
  background: var(--face);
}

.rp-band {
  background: linear-gradient(#6d7996, #343d5a 45%, #202842 55%, #2c3552);
  box-shadow: inset 0 1px #9aa6c4, inset 0 -1px #10162a;
}

.rp-logo {
  left: 4px;
  top: 0;
}

.rp-now {
  color: #b9c9ee;
  font: 11px var(--arial);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-video {
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 0 1px #10162a;
}

.rp-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  visibility: hidden;
}

.rp-video:fullscreen video {
  visibility: visible;
}

.rp-splash {
  position: absolute;
  left: 0;
  top: 0;
}

.rp-msg {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  text-align: center;
  font: 11px var(--arial);
  line-height: 14px;
}

.rp-err {
  color: #fff;
  font-weight: bold;
}

.rp-help {
  color: #9fb4e6;
}

.rp-transport {
  background: linear-gradient(#eef1f6, #c9cfda 50%, #b3bac8 51%, #c4cad6);
  box-shadow: inset 0 1px #fff, inset 0 -1px #6b7488;
}

.rp-btn {
  position: absolute;
  top: 4px;
  width: 26px;
  height: 24px;
  padding: 0;
  border: 1px solid #56607a;
  border-radius: 4px;
  background: linear-gradient(#ffffff, #d5dae4 45%, #b9c0ce 55%, #dfe3ea);
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.rp-btn:active {
  background: linear-gradient(#aeb6c6, #cfd4de);
}

.rp-btn:active canvas {
  transform: translate(1px, 1px);
}

.rp-btn.rp-round {
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border-color: #3a4462;
  background: radial-gradient(circle at 40% 30%, #ffffff, #cfd6e4 45%, #97a2ba 85%);
}

.rp-btn.rp-small {
  top: 7px;
  width: 20px;
  height: 18px;
  border-radius: 3px;
}

.rp-slider {
  position: absolute;
  cursor: default;
}

.rp-groove {
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 5px;
  background: #3a4260;
  box-shadow: inset 1px 1px #10162a, 0 1px #fff;
}

.rp-fill {
  position: absolute;
  left: 0;
  top: 5px;
  height: 3px;
  background: linear-gradient(#8fc0ff, #2f6fe0);
}

.rp-thumb {
  position: absolute;
  top: 0;
  width: 11px;
  height: 13px;
  background: linear-gradient(90deg, #ffffff, #b9c0ce);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  filter: drop-shadow(0 0 0 #2a3148);
}

.rp-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%, 0 0, 1px 1px, 1px 61%, 50% calc(100% - 2px), calc(100% - 1px) 61%, calc(100% - 1px) 1px, 1px 1px);
  background: #2a3148;
}

.rp-info {
  background: linear-gradient(#141d36, #0b1226);
  box-shadow: inset 0 1px #000, inset 0 -1px #56607a;
}

.rp-infoline {
  color: #d8e2ff;
  font: 11px var(--arial);
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-status .ftp-spanel:last-child {
  color: #000080;
}

.rp-prop {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------- RealSystem Administrator */

.rs {
  background: var(--face);
}

.rs-head {
  background: linear-gradient(90deg, #141a54, #2e3a92 60%, #4a5ab4);
  box-shadow: inset 0 -1px #0b0f33;
}

.rs-ver {
  color: #c8ceff;
  font: 11px var(--arial);
  text-align: right;
}

.rs-nav {
  background: linear-gradient(#26306e, #1a2256);
  box-shadow: inset -1px 0 #0b0f33;
  font: 11px var(--arial);
}

.rs-navhead {
  color: #ffd24a;
  font-weight: bold;
}

.rs-navitem {
  color: #cfd8ff;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

.rs-navitem:hover {
  color: #fff;
}

.rs-navitem.sel {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.rs-navtip {
  color: #97a3e0;
  font: 10px var(--arial);
  line-height: 12px;
}

.rs-pane.hidden {
  display: none;
}

.rs-check .ctext {
  white-space: normal;
  line-height: 13px;
}

.rs-check {
  align-items: flex-start;
}

.rs-graph {
  box-shadow: 0 0 0 1px var(--shadow);
}

.rs-log .rtext {
  font-size: 11px;
}

/* RealPlayer's Statistics graph */
.rp-statgraph {
  box-shadow: 0 0 0 1px var(--shadow);
}