html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  line-height: 1;
}
form {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
button,
input,
select,
textarea {
  font-size: 100%;
  font-family: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}
button,
input {
  line-height: normal;
  overflow: visible;
}
textarea {
  overflow: auto;
  vertical-align: top;
  padding: 0;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
:focus {
  outline: none;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
figure {
  margin: 0;
}
img {
  -ms-interpolation-mode: bicubic;
  display: block;
}
ol,
ul {
  margin: 0;
  padding: 0;
}
dl,
dd {
  margin: 0;
}
li {
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  line-height: inherit;
  font-size: inherit;
  margin: 0;
}
p {
  margin: 0;
}
blockquote {
  margin: 0;
}
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
}
cite {
  font-style: normal;
}
ins {
  text-decoration: none;
}
dfn {
  font-style: inherit;
}
del {
  text-decoration: none;
}
mark {
  background: none;
  color: inherit;
}
address {
  font-style: normal;
}
tt,
code,
kbd,
samp {
  font-family: inherit;
  font-size: inherit;
}
b,
strong {
  font-weight: inherit;
}
em {
  font-style: inherit;
}
small {
  font-size: 100%;
}
q {
  quotes: none;
}
q:before,
q:after {
  content: "";
  content: none;
}
a {
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
}
a:hover,
a:active {
  outline: none;
}
a img {
  border: none;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th {
  font-weight: inherit;
}
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  height: 15px;
  bottom: 0px;
  position: absolute;
}
.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  width: 15px;
  right: 0;
  position: absolute;
}
.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: rgba(0, 0, 0, 0);
}
.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 1;
}
.ps__rail-x:hover,
.ps__rail-y:hover,
.ps__rail-x:focus,
.ps__rail-y:focus {
  background-color: rgba(0, 0, 0, 0);
  opacity: 1;
}
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, height 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
  height: 6px;
  bottom: 2px;
  position: absolute;
}
.ps__thumb-y {
  background-color: #445661;
  border-radius: 6px;
  transition: background-color 0.2s linear, width 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
  width: 6px;
  right: 2px;
  position: absolute;
}
.ps__thumb-y:hover {
  background-color: #59717f;
}
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x {
  height: 11px;
}
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y {
  width: 11px;
}
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}
.replay-controls-view button,
.room-view button[data-hook="stop-btn"],
.room-view button[data-hook="start-btn"],
.room-view button,
.game-view > .buttons button,
.chatbox-view-contents > .input button,
.dialog .file-btn label,
.room-view > .container .file-btn label,
.dialog button,
.room-view > .container button,
.disconnected-view button,
.connecting-view button {
  position: relative;
  padding: 5px 15px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 100%;
}
.replay-controls-view button:focus,
.room-view button:focus,
.game-view > .buttons button:focus,
.chatbox-view-contents > .input button:focus,
.dialog .file-btn label:focus,
.room-view > .container .file-btn label:focus,
.dialog button:focus,
.disconnected-view button:focus,
.connecting-view button:focus {
  outline: none;
}
.replay-controls-view button .tooltip,
.room-view button .tooltip,
.game-view > .buttons button .tooltip,
.chatbox-view-contents > .input button .tooltip,
.dialog .file-btn label .tooltip,
.room-view > .container .file-btn label .tooltip,
.dialog button .tooltip,
.disconnected-view button .tooltip,
.connecting-view button .tooltip {
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 500;
  position: absolute;
  z-index: 1;
  bottom: 130%;
  right: 0%;
  opacity: 0;
  transition: opacity 0s;
}
.replay-controls-view button:hover .tooltip,
.room-view button:hover .tooltip,
.game-view > .buttons button:hover .tooltip,
.chatbox-view-contents > .input button:hover .tooltip,
.dialog .file-btn label:hover .tooltip,
.room-view > .container .file-btn label:hover .tooltip,
.dialog button:hover .tooltip,
.disconnected-view button:hover .tooltip,
.connecting-view button:hover .tooltip {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s;
  transition-delay: 1s;
}
.connecting-view button {
  background-color: #db2a2a;
}
.connecting-view button:hover {
  background-color: #e14d4d;
}
.connecting-view button:active {
  background-color: #bc2020;
}
.connecting-view button:disabled {
  background-color: #3e3e3e;
}
.disconnected-view button {
  background-color: #44d;
}
.disconnected-view button:hover {
  background-color: #6767e3;
}
.disconnected-view button:active {
  background-color: #2626d2;
}
.disconnected-view button:disabled {
  background-color: #3e3e3e;
}
.dialog input:not([type="range"]),
.room-view > .container input:not([type="range"]) {
  color: #fff;
  background-color: #111619;
  border: none;
  border-radius: 5px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid #111619;
}
.dialog input:focus:not([type="range"]),
.room-view > .container input:focus:not([type="range"]) {
  border-color: #244967;
}
.dialog,
.room-view > .container {
  background-color: #1a2125;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 5px;
}
.dialog > h1,
.room-view > .container > h1 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px !important;
  padding-top: 6px;
  padding-bottom: 5px;
  border-bottom: 3px;
  border-bottom-color: #c13535;
  border-bottom-style: solid;
}
.dialog > :not(:last-child),
.room-view > .container > :not(:last-child) {
  margin-bottom: 6px;
}
.dialog .row,
.room-view > .container .row {
  display: flex;
}
.dialog .row > :not(:last-child),
.room-view > .container .row > :not(:last-child) {
  margin-right: 6px;
}
.dialog .row > *,
.room-view > .container .row > * {
  flex: 1;
}
.dialog button,
.room-view > .container button {
  background-color: #244967;
}
.dialog button:hover,
.room-view > .container button:hover {
  background-color: #2f5e85;
}
.dialog button:active,
.room-view > .container button:active {
  background-color: #193449;
}
.dialog button:disabled,
.room-view > .container button:disabled {
  background-color: #3e3e3e;
}
.dialog input:not([type="range"]),
.room-view > .container input:not([type="range"]) {
  min-width: 10px;
}
.dialog .label-input,
.room-view > .container .label-input {
  display: flex;
  background-color: #244967;
  align-items: baseline;
  border-radius: 5px;
  padding: 3px 3px 3px 5px;
}
.dialog .label-input > *,
.room-view > .container .label-input > * {
  flex: 1;
}
.dialog .label-input label,
.room-view > .container .label-input label {
  flex: 0 0 auto;
  margin-right: 10px;
}
.dialog .file-btn input[type="file"],
.room-view > .container .file-btn input[type="file"] {
  display: none;
}
.dialog .file-btn label,
.room-view > .container .file-btn label {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  background-color: #244967;
  display: inline-block;
  cursor: pointer;
}
.dialog .file-btn label:hover,
.room-view > .container .file-btn label:hover {
  background-color: #2f5e85;
}
.dialog .file-btn label:active,
.room-view > .container .file-btn label:active {
  background-color: #193449;
}
.dialog .file-btn label:disabled,
.room-view > .container .file-btn label:disabled {
  background-color: #3e3e3e;
}
.dialog select,
.room-view > .container select {
  border: 1px solid #111619;
  background-color: #111619;
  border-radius: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #fff;
  padding: 0px 5px;
}
.dialog select:hover:not(:disabled),
.room-view > .container select:hover:not(:disabled) {
  border-color: #244967;
}
.basic-dialog .buttons {
  margin-top: 10px;
  display: flex;
}
.basic-dialog .buttons > :not(:last-child) {
  margin-right: 6px;
}
.basic-dialog .buttons > * {
  flex: 1;
  white-space: nowrap;
}
.basic-dialog p {
  line-height: 1.4em;
}
.simple-dialog-view {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.simple-dialog-view > .dialog,
.room-view.simple-dialog-view > .container {
  min-width: 300px;
}
.view-wrapper {
  position: absolute;
  width: 100%;
  height: calc(100% - 10px);
  margin-top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spinner {
  margin: 20px auto;
  width: 50px;
  height: 40px;
  display: flex;
  justify-content: center;
}
.spinner > div {
  background-color: #fff;
  height: 100%;
  width: 6px;
  margin: 2px 2px;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
  animation-delay: -1.1s;
}
.spinner .rect3 {
  animation-delay: -1s;
}
.spinner .rect4 {
  animation-delay: -0.9s;
}
.spinner .rect5 {
  animation-delay: -0.8s;
}
@keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}
.flagico {
  width: 16px;
  height: 11px;
  background-image: url("images/flags.png");
  display: inline-block;
  background-position: -80px -198px;
}
.f-id {
  background-position: 0px 0px;
}
.f-qa {
  background-position: -16px 0px;
}
.f-ge {
  background-position: -32px 0px;
}
.f-al {
  background-position: -48px 0px;
}
.f-ao {
  background-position: -64px 0px;
}
.f-eng {
  background-position: -80px 0px;
}
.f-gi {
  background-position: -96px 0px;
}
.f-mt {
  background-position: -112px 0px;
}
.f-tn {
  background-position: -128px 0px;
}
.f-bh {
  background-position: -144px 0px;
}
.f-tr {
  background-position: -160px 0px;
}
.f-ye {
  background-position: -176px 0px;
}
.f-pl {
  background-position: -192px 0px;
}
.f-lv {
  background-position: 0px -11px;
}
.f-pe {
  background-position: -16px -11px;
}
.f-jp {
  background-position: -32px -11px;
}
.f-tt {
  background-position: -48px -11px;
}
.f-pg {
  background-position: -64px -11px;
}
.f-gl {
  background-position: -80px -11px;
}
.f-mc {
  background-position: -96px -11px;
}
.f-ch {
  background-position: -112px -11px;
}
.f-ma {
  background-position: -128px -11px;
}
.f-at {
  background-position: -144px -11px;
}
.f-cn {
  background-position: -160px -11px;
}
.f-kg {
  background-position: -176px -11px;
}
.f-vn {
  background-position: -192px -11px;
}
.f-dk {
  background-position: 0px -22px;
}
.f-sg {
  background-position: -16px -22px;
}
.f-to {
  background-position: -32px -22px;
}
.f-tl {
  background-position: -48px -22px;
}
.f-cy {
  background-position: -64px -22px;
}
.f-sy {
  background-position: -80px -22px;
}
.f-eg {
  background-position: -96px -22px;
}
.f-mk {
  background-position: -112px -22px;
}
.f-hk {
  background-position: -128px -22px;
}
.f-lb {
  background-position: -144px -22px;
}
.f-pf {
  background-position: -160px -22px;
}
.f-wf {
  background-position: -176px -22px;
}
.f-be {
  background-position: -192px -22px;
}
.f-no {
  background-position: 0px -33px;
}
.f-bv {
  background-position: -16px -33px;
}
.f-sj {
  background-position: -32px -33px;
}
.f-ug {
  background-position: -48px -33px;
}
.f-es {
  background-position: -64px -33px;
}
.f-tj {
  background-position: -80px -33px;
}
.f-ae {
  background-position: -96px -33px;
}
.f-lr {
  background-position: -112px -33px;
}
.f-sd {
  background-position: -128px -33px;
}
.f-it {
  background-position: -144px -33px;
}
.f-de {
  background-position: -176px -33px;
}
.f-mv {
  background-position: -192px -33px;
}
.f-ag {
  background-position: 0px -44px;
}
.f-om {
  background-position: -16px -44px;
}
.f-bt {
  background-position: -32px -44px;
}
.f-jo {
  background-position: -48px -44px;
}
.f-hu {
  background-position: -64px -44px;
}
.f-va {
  background-position: -80px -44px;
}
.f-pt {
  background-position: -96px -44px;
}
.f-gp {
  background-position: -112px -44px;
}
.f-cl {
  background-position: -128px -44px;
}
.f-kw {
  background-position: -144px -44px;
}
.f-ps {
  background-position: -160px -44px;
}
.f-mg {
  background-position: -176px -44px;
}
.f-ci {
  background-position: -192px -44px;
}
.f-bn {
  background-position: 0px -55px;
}
.f-ie {
  background-position: -16px -55px;
}
.f-af {
  background-position: -32px -55px;
}
.f-eh {
  background-position: -48px -55px;
}
.f-gd {
  background-position: -64px -55px;
}
.f-vu {
  background-position: -80px -55px;
}
.f-ne {
  background-position: -96px -55px;
}
.f-lt {
  background-position: -112px -55px;
}
.f-mw {
  background-position: -128px -55px;
}
.f-by {
  background-position: -144px -55px;
}
.f-bo {
  background-position: -160px -55px;
}
.f-kn {
  background-position: -176px -55px;
}
.f-bg {
  background-position: -192px -55px;
}
.f-cg {
  background-position: 0px -66px;
}
.f-ml {
  background-position: -16px -66px;
}
.f-sn {
  background-position: -32px -66px;
}
.f-ir {
  background-position: -48px -66px;
}
.f-yt {
  background-position: -64px -66px;
}
.f-zw {
  background-position: -80px -66px;
}
.f-bf {
  background-position: -96px -66px;
}
.f-fo {
  background-position: -112px -66px;
}
.f-cm {
  background-position: -128px -66px;
}
.f-jm {
  background-position: -144px -66px;
}
.f-cz {
  background-position: -160px -66px;
}
.f-gh {
  background-position: -176px -66px;
}
.f-dz {
  background-position: -192px -66px;
}
.f-bj {
  background-position: 0px -77px;
}
.f-iq {
  background-position: -16px -77px;
}
.f-wls {
  background-position: -32px -77px;
}
.f-my {
  background-position: -48px -77px;
}
.f-gn {
  background-position: -64px -77px;
}
.f-tg {
  background-position: -80px -77px;
}
.f-gw {
  background-position: -96px -77px;
}
.f-fr {
  background-position: -112px -77px;
}
.f-gf {
  background-position: -128px -77px;
}
.f-re {
  background-position: -144px -77px;
}
.f-an {
  background-position: -160px -77px;
}
.f-um {
  background-position: -176px -77px;
}
.f-tv {
  background-position: -192px -77px;
}
.f-il {
  background-position: 0px -88px;
}
.f-bd {
  background-position: -16px -88px;
}
.f-tw {
  background-position: -32px -88px;
}
.f-am {
  background-position: -48px -88px;
}
.f-st {
  background-position: -64px -88px;
}
.f-ws {
  background-position: -80px -88px;
}
.f-lu {
  background-position: -96px -88px;
}
.f-bi {
  background-position: -112px -88px;
}
.f-pa {
  background-position: -128px -88px;
}
.f-ec {
  background-position: -144px -88px;
}
.f-np {
  background-position: -160px -88px;
}
.f-vi {
  background-position: -176px -88px;
}
.f-rs {
  background-position: -192px -88px;
}
.f-dm {
  background-position: 0px -99px;
}
.f-gq {
  background-position: -16px -99px;
}
.f-us {
  background-position: -32px -99px;
}
.f-mz {
  background-position: -48px -99px;
}
.f-bm {
  background-position: -64px -99px;
}
.f-gy {
  background-position: -80px -99px;
}
.f-ee {
  background-position: -96px -99px;
}
.f-nu {
  background-position: -112px -99px;
}
.f-mm {
  background-position: -128px -99px;
}
.f-zm {
  background-position: -144px -99px;
}
.f-ng {
  background-position: -160px -99px;
}
.f-ro {
  background-position: -176px -99px;
}
.f-hr {
  background-position: -192px -99px;
}
.f-md {
  background-position: 0px -110px;
}
.f-et {
  background-position: -16px -110px;
}
.f-mn {
  background-position: -32px -110px;
}
.f-tm {
  background-position: -48px -110px;
}
.f-sc {
  background-position: -64px -110px;
}
.f-cs {
  background-position: -80px -110px;
}
.f-pr {
  background-position: -96px -110px;
}
.f-ad {
  background-position: -112px -110px;
}
.f-kr {
  background-position: -128px -110px;
}
.f-nf {
  background-position: -144px -110px;
}
.f-ls {
  background-position: -160px -110px;
}
.f-km {
  background-position: -176px -110px;
}
.f-sz {
  background-position: -192px -110px;
}
.f-py {
  background-position: 0px -121px;
}
.f-tz {
  background-position: -16px -121px;
}
.f-in {
  background-position: -32px -121px;
}
.f-sa {
  background-position: -48px -121px;
}
.f-pk {
  background-position: -64px -121px;
}
.f-cf {
  background-position: -80px -121px;
}
.f-gm {
  background-position: -96px -121px;
}
.f-ki {
  background-position: -112px -121px;
}
.f-do {
  background-position: -128px -121px;
}
.f-lk {
  background-position: -144px -121px;
}
.f-cc {
  background-position: -160px -121px;
}
.f-co {
  background-position: -176px -121px;
}
.f-th {
  background-position: -192px -121px;
}
.f-bs {
  background-position: 0px -132px;
}
.f-mr {
  background-position: -16px -132px;
}
.f-bw {
  background-position: -32px -132px;
}
.f-br {
  background-position: -48px -132px;
}
.f-mo {
  background-position: -64px -132px;
}
.f-li {
  background-position: -80px -132px;
}
.f-ve {
  background-position: -96px -132px;
}
.f-kp {
  background-position: -112px -132px;
}
.f-sr {
  background-position: -128px -132px;
}
.f-cr {
  background-position: -144px -132px;
}
.f-ly {
  background-position: -160px -132px;
}
.f-vc {
  background-position: -176px -132px;
}
.f-ph {
  background-position: -192px -132px;
}
.f-ke {
  background-position: 0px -143px;
}
.f-td {
  background-position: -16px -143px;
}
.f-ht {
  background-position: -32px -143px;
}
.f-az {
  background-position: -48px -143px;
}
.f-mu {
  background-position: -64px -143px;
}
.f-er {
  background-position: -80px -143px;
}
.f-si {
  background-position: -96px -143px;
}
.f-kh {
  background-position: -112px -143px;
}
.f-is {
  background-position: -128px -143px;
}
.f-mx {
  background-position: -144px -143px;
}
.f-rw {
  background-position: -160px -143px;
}
.f-za {
  background-position: -176px -143px;
}
.f-ua {
  background-position: -192px -143px;
}
.f-as {
  background-position: 0px -154px;
}
.f-ax {
  background-position: -16px -154px;
}
.f-dj {
  background-position: -32px -154px;
}
.f-ga {
  background-position: -48px -154px;
}
.f-sl {
  background-position: -64px -154px;
}
.f-sm {
  background-position: -80px -154px;
}
.f-sk {
  background-position: -96px -154px;
}
.f-se {
  background-position: -112px -154px;
}
.f-sb {
  background-position: -128px -154px;
}
.f-ca {
  background-position: -144px -154px;
}
.f-ru {
  background-position: -160px -154px;
}
.f-gb {
  background-position: -176px -154px;
}
.f-me {
  background-position: -192px -154px;
}
.f-pm {
  background-position: 0px -165px;
}
.f-sct {
  background-position: -16px -165px;
}
.f-la {
  background-position: -32px -165px;
}
.f-ar {
  background-position: -48px -165px;
}
.f-na {
  background-position: -64px -165px;
}
.f-cv {
  background-position: -80px -165px;
}
.f-nc {
  background-position: -96px -165px;
}
.f-cu {
  background-position: -112px -165px;
}
.f-uz {
  background-position: -128px -165px;
}
.f-bb {
  background-position: -144px -165px;
}
.f-bz {
  background-position: -160px -165px;
}
.f-ni {
  background-position: -176px -165px;
}
.f-gu {
  background-position: -192px -165px;
}
.f-fi {
  background-position: 0px -176px;
}
.f-kz {
  background-position: -16px -176px;
}
.f-gt {
  background-position: -32px -176px;
}
.f-cx {
  background-position: -48px -176px;
}
.f-aw {
  background-position: -64px -176px;
}
.f-cd {
  background-position: -80px -176px;
}
.f-nl {
  background-position: -96px -176px;
}
.f-ba {
  background-position: -112px -176px;
}
.f-sv {
  background-position: -128px -176px;
}
.f-uy {
  background-position: -144px -176px;
}
.f-pw {
  background-position: -160px -176px;
}
.f-tk {
  background-position: -176px -176px;
}
.f-mq {
  background-position: -192px -176px;
}
.f-nr {
  background-position: 0px -187px;
}
.f-mp {
  background-position: -16px -187px;
}
.f-hn {
  background-position: -32px -187px;
}
.f-mh {
  background-position: -48px -187px;
}
.f-tf {
  background-position: -64px -187px;
}
.f-gs {
  background-position: -80px -187px;
}
.f-lc {
  background-position: -96px -187px;
}
.f-gr {
  background-position: -112px -187px;
}
.f-fm {
  background-position: -128px -187px;
}
.f-fam {
  background-position: -144px -187px;
}
.f-ck {
  background-position: -160px -187px;
}
.f-ky {
  background-position: -176px -187px;
}
.f-io {
  background-position: -192px -187px;
}
.f-so {
  background-position: 0px -198px;
}
.f-pn {
  background-position: -16px -198px;
}
.f-tc {
  background-position: -32px -198px;
}
.f-sh {
  background-position: -48px -198px;
}
.f-fj {
  background-position: -64px -198px;
}
.f-ai {
  background-position: -96px -198px;
}
.f-vg {
  background-position: -112px -198px;
}
.f-fk {
  background-position: -128px -198px;
}
.f-ms {
  background-position: -144px -198px;
}
.f-hm {
  background-position: -160px -198px;
}
.f-au {
  background-position: -176px -198px;
}
.f-nz {
  background-position: -192px -198px;
}
.chatbox-view {
  box-sizing: border-box;
  height: 150px;
  min-height: 0;
  width: 800px;
  min-width: 300px;
  position: relative;
  transition: height 0.2s;
  margin: 0 5px 0 5px;
}
.chatbox-view.dragging {
  transition: none;
}
.chatbox-view-contents {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 5px 10px 5px 10px;
  background-color: rgba(26, 33, 37, var(--chat-opacity, 1));
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.chatbox-view-contents > :not(:first-child) {
  margin-top: 5px;
}
.chatbox-view-contents > .drag {
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  border-radius: 2.5px;
  cursor: n-resize;
  height: 5px;
}
.chatbox-view-contents > .drag:hover::before {
  background-color: rgba(255, 255, 255, 0.5);
}
.chatbox-view-contents > .drag::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  bottom: -5px;
}
.chatbox-view-contents > .drag::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 10px);
  width: 20px;
  bottom: 0;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.2);
}
.chatbox-view-contents > .log {
  position: relative;
  flex-grow: 1;
  overflow: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column-reverse;
  line-height: 1.3;
}
.chatbox-view-contents > .log .log-contents > p:not(:last-child) {
  margin-bottom: 3px;
}
.chatbox-view-contents > .log .log-contents p {
  overflow: hidden;
  flex-shrink: 0;
}
.chatbox-view-contents > .log .log-contents p.notice {
  color: #8ed2ab;
}
.chatbox-view-contents > .log .log-contents p.highlight {
  font-weight: bold;
}
.chatbox-view-contents > .log .log-contents p.announcement {
  border-left: 3px solid #c13535;
  padding-left: 5px;
  min-height: 12px;
  white-space: pre-wrap;
}
.chatbox-view-contents > .autocompletebox {
  position: absolute;
  background-color: #fff;
  line-height: 25px;
  color: #000;
  bottom: 30px;
  left: 5px;
  border: solid #000 1px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 200px;
}
.chatbox-view-contents > .autocompletebox > div {
  padding: 0px 30px 0px 5px;
  white-space: nowrap;
}
.chatbox-view-contents > .autocompletebox > div:hover {
  background-color: #d1e2fe;
}
.chatbox-view-contents > .autocompletebox > div.selected {
  background-color: #b3c6ff;
}
.chatbox-view-contents > .input {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  height: 19px;
}
.chatbox-view-contents > .input input[type="text"] {
  color: #fff;
  background-color: #111619;
  border: none;
  border-radius: 5px;
  padding: 0 8px;
  flex-grow: 1;
  align-self: stretch;
  box-sizing: border-box;
}
.chatbox-view-contents > .input input[type="text"]:focus {
  border: 1px solid #244967;
  padding: 0 7px;
}
.chatbox-view-contents > .input button {
  background-color: #244967;
}
.chatbox-view-contents > .input button:hover {
  background-color: #2f5e85;
}
.chatbox-view-contents > .input button:active {
  background-color: #193449;
}
.chatbox-view-contents > .input button:disabled {
  background-color: #3e3e3e;
}
.replayer .chatbox-view {
  height: 130px;
}
.replayer .chatbox-view > .input {
  display: none;
}
.connecting-view {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.connecting-view .dialog,
.connecting-view .room-view > .container {
  height: 300px;
  width: 300px;
}
.connecting-view button {
  width: auto;
  align-self: flex-end;
}
.connecting-view-log {
  flex: 1;
}
.connecting-view-log p {
  margin: 3px 0;
}
.disconnected-view {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.disconnected-view .dialog,
.disconnected-view .room-view > .container {
  width: 300px;
}
.disconnected-view .dialog > p,
.disconnected-view .room-view > .container > p {
  margin-bottom: 20px;
}
.disconnected-view button {
  width: auto;
  align-self: flex-end;
}
.game-view {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.game-view > .top-section {
  position: relative;
  flex-grow: 1;
  min-height: 0;
  margin-top: 35px;
}
.game-view.chat-bg-full .bottom-section {
  align-items: flex-start;
  background-color: rgba(26, 33, 37, var(--chat-opacity, 1));
}
.game-view.chat-bg-full .bottom-section .chatbox-view {
  align-self: flex-end;
}
.game-view.chat-bg-full .bottom-section .chatbox-view-contents {
  background: none;
  padding: 0 0 5px 0;
}
.game-view.chat-bg-full .bottom-section .stats-view-container {
  height: 0;
}
.game-view.chat-bg-full .bottom-section .stats-view {
  background: none;
}
.game-view > .bottom-section {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.game-view > .bottom-section .stats-view-container {
  margin-right: auto;
  flex-shrink: 0;
}
.game-view > .bottom-section .bottom-spacer {
  margin-left: auto;
  width: 116px;
  flex-shrink: 0;
}
.game-view > .buttons {
  white-space: nowrap;
  background-color: #1a2125;
  border-bottom-left-radius: 5px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  height: 35px;
  padding: 4px 6px 4px 6px;
  position: absolute;
  top: 0;
  right: 0;
}
.game-view > .buttons button {
  background-color: #244967;
  padding-left: 8px;
  padding-right: 8px;
}
.game-view > .buttons button:hover {
  background-color: #2f5e85;
}
.game-view > .buttons button:active {
  background-color: #193449;
}
.game-view > .buttons button:disabled {
  background-color: #3e3e3e;
}
.game-view > .buttons > :not(:last-child) {
  margin-right: 4px;
}
.game-view.replayer > .bottom-section {
  padding-bottom: 40px;
}
.game-view > [data-hook="popups"] {
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(115, 136, 92, 0.5);
}
.sound-button-container {
  position: relative;
  display: flex;
}
.sound-button-container .sound-slider {
  display: none;
  position: absolute;
  background-color: #1a2125;
  top: 100%;
  left: 50%;
  transform: translate(-50%);
  padding: 10px;
  border-radius: 5px;
}
.sound-button-container .sound-slider:hover .sound-slider-bar {
  background-color: #f7f9f9;
}
.sound-button-container:hover .sound-slider,
.sound-button-container.dragging .sound-slider {
  display: block;
}
.sound-button-container .sound-slider-bar-bg {
  position: relative;
  background-color: #59717f;
  border-radius: 10px;
  overflow: hidden;
  width: 10px;
  height: 100px;
  margin: 0 auto;
}
.sound-button-container .sound-slider-bar {
  background-color: #cad4da;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 50%;
}
.loader-view {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader-view .dialog,
.loader-view .room-view > .container {
  width: 300px;
}
.stats-view {
  background-color: rgba(26, 33, 37, 0.3);
  text-shadow: 1px 1px 1px #000, 0px 1px 1px #000;
  padding: 4px;
  margin: 4px;
  white-space: nowrap;
  width: 100px;
  line-height: 1.5em;
}
.stats-view .graph {
  width: 100%;
}
.stats-view .graph canvas {
  width: 100%;
  height: 64px;
  image-rendering: optimizeSpeed;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}
.choose-nickname-view {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.choose-nickname-view > img {
  flex: 0 0 auto;
  position: relative;
  left: 20px;
  margin-bottom: 20px;
}
.choose-nickname-view > .dialog,
.room-view.choose-nickname-view > .container {
  width: 300px;
}
.choose-nickname-view > .dialog > [data-hook="ok"],
.room-view.choose-nickname-view > .container > [data-hook="ok"] {
  align-self: center;
  width: 100px;
}
.game-timer-view {
  display: flex;
  align-items: center;
}
.game-timer-view > .overtime {
  margin-right: 20px;
  visibility: hidden;
}
.game-timer-view > .overtime.on {
  visibility: inherit;
  animation: 0.4s linear overtime-appear;
}
.game-timer-view > .digit {
  width: 15px;
  text-align: center;
}
.game-timer-view.time-warn {
  animation: 0.3s infinite alternate linear time-warn;
}
@keyframes time-warn {
  from {
    color: #fff;
  }
  to {
    color: #ff8080;
  }
}
@keyframes overtime-appear {
  from {
    opacity: 0;
    transform: translateY(-25px);
  }
}
.game-state-view {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
.game-state-view .bar-container {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1;
}
.game-state-view .bar {
  box-sizing: border-box;
  height: 35px;
  display: flex;
  justify-content: center;
  background-color: #1a2125;
  padding: 5px;
  border-radius: 0 0 5px 5px;
  font: 900 20px "Arial Black", "Arial Bold", Gadget, sans-serif;
}
.game-state-view .bar > .scoreboard {
  display: flex;
  align-items: center;
  margin-right: 100px;
}
.game-state-view .bar > .scoreboard .score {
  width: 35px;
  overflow: hidden;
  text-align: center;
}
.game-state-view .bar > .scoreboard .teamicon {
  width: 23px;
  height: 23px;
  border-radius: 5px;
}
.game-state-view .bar > .scoreboard .teamicon.blue {
  background-color: #5689e5;
}
.game-state-view .bar > .scoreboard .teamicon.red {
  background-color: #e56e56;
}
.game-state-view canvas {
  width: 100%;
  height: 100%;
  image-rendering: optimizeSpeed;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}
.game-state-view[hidden] {
  display: none !important;
}
.game-state-view.restricted {
  background-color: #2e343c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.game-state-view.restricted .bar-container {
  position: relative;
}
.game-state-view.restricted .bar {
  background: none;
}
.game-state-view.restricted canvas {
  width: 100%;
  height: calc(100% - 35px);
  max-width: 840px;
  max-height: 410px;
}
.game-state-view .fps-limit-fix {
  animation: fps-limit-fix-a 1s alternate;
  animation-iteration-count: infinite;
  background-color: rgba(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  position: absolute;
}
@keyframes fps-limit-fix-a {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.room-view {
  position: absolute;
  width: 100%;
  height: calc(100% - 10px);
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
}
.room-view > .container {
  position: relative;
  min-height: 0;
  max-width: 900px;
  max-height: 550px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 30px;
  z-index: 0;
}
.room-view > .container > :not(:last-child) {
  margin-bottom: 15px;
}
.room-view > .container > .header-btns {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
}
.room-view > .container > .header-btns > :not(:last-child) {
  margin-right: 6px;
}
.room-view > .container > .header-btns [data-hook="rec-btn"] i {
  font-size: 75%;
  color: #888;
  margin-right: 4px;
}
.room-view > .container > .header-btns [data-hook="rec-btn"].active i {
  color: #d33;
}
.room-view > .container > .teams {
  margin-left: -3px;
  margin-right: -3px;
  display: flex;
  flex: 1;
  justify-content: center;
  min-height: 60px;
}
.room-view > .container > .teams > * {
  margin-left: 3px;
  margin-right: 3px;
}
.room-view > .container > .teams > .tools {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80px;
}
.room-view > .container > .teams > .tools > :not(:last-child) {
  margin-bottom: 6px;
}
.room-view > .container > .teams > .spacer {
  flex: 1 1 0;
  max-width: 83px;
  margin: 0 0;
}
.room-view > .container > .teams .player-list-view {
  min-width: 20px;
  width: 220px;
  display: flex;
  flex-flow: column;
}
.room-view > .container > .teams .player-list-view > :not(:last-child) {
  margin-bottom: 6px;
}
.room-view > .container > .teams .player-list-view .buttons {
  display: flex;
  justify-content: center;
  flex-flow: row nowrap;
}
.room-view
  > .container
  > .teams
  .player-list-view
  .buttons
  button[data-hook="join-btn"] {
  min-width: 100px;
}
.room-view > .container > .teams .player-list-view .list {
  flex: 1;
  background-color: #111619;
  overflow-x: hidden;
  overflow-y: auto;
}
.room-view
  > .container
  > .teams
  .player-list-view.t-red
  button[data-hook="join-btn"] {
  color: #ff8686;
}
.room-view
  > .container
  > .teams
  .player-list-view.t-red
  button[data-hook="reset-btn"] {
  margin-left: 6px;
}
.room-view
  > .container
  > .teams
  .player-list-view.t-red
  button[data-hook="reset-btn"]:after {
  content: "▶";
}
.room-view > .container > .teams .player-list-view.t-blue .buttons {
  flex-direction: row-reverse;
}
.room-view
  > .container
  > .teams
  .player-list-view.t-blue
  button[data-hook="join-btn"] {
  color: #b7b7ff;
}
.room-view
  > .container
  > .teams
  .player-list-view.t-blue
  button[data-hook="reset-btn"] {
  margin-right: 6px;
}
.room-view
  > .container
  > .teams
  .player-list-view.t-blue
  button[data-hook="reset-btn"]:after {
  content: "◀";
}
.room-view > .container > .settings {
  width: 300px;
  align-self: center;
  white-space: nowrap;
}
.room-view > .container > .settings > div {
  line-height: 22px;
  margin-bottom: 5px;
  display: flex;
  width: 100%;
  align-items: center;
}
.room-view > .container > .settings > div > .lbl {
  flex: 0 0 90px;
}
.room-view > .container > .settings > div > .val {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-view > .container > .settings > div > select {
  width: 100px;
}
.room-view > .container > .settings [data-hook="stadium-name"].custom {
  color: #ffdb72;
}
.room-view > .container > .controls {
  display: flex;
  align-self: center;
}
.room-view > .container > .controls > * {
  margin: 0 3px;
}
.room-view .player-list-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  line-height: 20px;
  vertical-align: middle;
  padding: 4px;
  margin: 2px;
  font-size: 15px;
  white-space: nowrap;
}
.room-view .player-list-item.admin [data-hook="name"] {
  color: #ffdb72;
}
.room-view .player-list-item .flagico {
  margin-right: 3px;
  position: relative;
  top: 1px;
}
.room-view .player-list-item [data-hook="name"] {
  min-width: 10px;
  overflow: hidden;
  flex: 1;
}
.room-view .player-list-item [data-hook="ping"] {
  min-width: 30px;
  text-align: right;
}
.room-view .player-list-item:hover {
  background-color: #1b2328;
}
.room-view button {
  background-color: #244967;
}
.room-view button:hover {
  background-color: #2f5e85;
}
.room-view button:active {
  background-color: #193449;
}
.room-view button:disabled {
  background-color: #3e3e3e;
}
.room-view button[data-hook="start-btn"] {
  background-color: #3a9933;
}
.room-view button[data-hook="start-btn"]:hover {
  background-color: #46b83d;
}
.room-view button[data-hook="start-btn"]:active {
  background-color: #2e7a29;
}
.room-view button[data-hook="start-btn"]:disabled {
  background-color: #3e3e3e;
}
.room-view button[data-hook="stop-btn"] {
  background-color: #c13535;
}
.room-view button[data-hook="stop-btn"]:hover {
  background-color: #cf5050;
}
.room-view button[data-hook="stop-btn"]:active {
  background-color: #a12c2c;
}
.room-view button[data-hook="stop-btn"]:disabled {
  background-color: #3e3e3e;
}
.room-view:not(.admin) .admin-only {
  display: none !important;
}
.kick-player-view {
  min-width: 300px;
}
.replayer .room-view > .container > .header-btns {
  display: none;
}
.create-room-view {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.create-room-view > .dialog,
.room-view.create-room-view > .container {
  position: relative;
  min-height: 0;
  max-width: 350px;
  width: 100%;
}
.create-room-view > .dialog > .label-input > label,
.room-view.create-room-view > .container > .label-input > label {
  flex: 0 0 100px;
}
.room-password-view {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.room-password-view > .dialog,
.room-view.room-password-view > .container {
  width: 300px;
}
.room-password-view > .dialog .buttons,
.room-view.room-password-view > .container .buttons {
  display: flex;
}
.room-password-view > .dialog .buttons > :not(:last-child),
.room-view.room-password-view > .container .buttons > :not(:last-child) {
  margin-right: 6px;
}
.room-password-view > .dialog .buttons > *,
.room-view.room-password-view > .container .buttons > * {
  flex: 1;
  white-space: nowrap;
}
.roomlist-view {
  position: absolute;
  width: 100%;
  height: calc(100% - 10px);
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.roomlist-view > .notice {
  position: relative;
  background-color: #1a2125;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  line-height: 1.5;
  width: 100%;
  max-width: 650px;
  margin-bottom: 6px;
}
.roomlist-view > .notice [data-hook="notice-close"] {
  position: absolute;
  top: 9px;
  right: 7px;
  cursor: pointer;
}
.roomlist-view > .notice [data-hook="notice-contents"] {
  margin-right: 20px;
}
.roomlist-view > .dialog,
.room-view.roomlist-view > .container {
  position: relative;
  min-height: 0;
  max-width: 650px;
  max-height: 700px;
  height: 100%;
  width: 100%;
}
.roomlist-view > .dialog [data-hook="count"],
.room-view.roomlist-view > .container [data-hook="count"] {
  position: absolute;
  top: 20px;
  right: 12px;
}
.roomlist-view > .dialog > .splitter,
.room-view.roomlist-view > .container > .splitter {
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1;
}
.roomlist-view > .dialog > .splitter > :not(:last-child),
.room-view.roomlist-view > .container > .splitter > :not(:last-child) {
  margin-right: 6px;
}
.roomlist-view > .dialog > .splitter > .buttons,
.room-view.roomlist-view > .container > .splitter > .buttons {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  align-items: stretch;
}
.roomlist-view > .dialog > .splitter > .buttons > :not(:last-child),
.room-view.roomlist-view
  > .container
  > .splitter
  > .buttons
  > :not(:last-child) {
  margin-bottom: 6px;
}
.roomlist-view > .dialog > .splitter > .buttons > button,
.room-view.roomlist-view > .container > .splitter > .buttons > button {
  padding-left: 10px;
  display: flex;
}
.roomlist-view > .dialog > .splitter > .buttons > button > div,
.room-view.roomlist-view > .container > .splitter > .buttons > button > div {
  flex: 1;
}
.roomlist-view > .dialog > .splitter > .buttons > .file-btn > label,
.room-view.roomlist-view
  > .container
  > .splitter
  > .buttons
  > .file-btn
  > label {
  padding-left: 10px;
  display: flex;
}
.roomlist-view > .dialog > .splitter > .buttons > .file-btn > label > div,
.room-view.roomlist-view
  > .container
  > .splitter
  > .buttons
  > .file-btn
  > label
  > div {
  flex: 1;
}
.roomlist-view > .dialog > .splitter > .buttons > .spacer,
.room-view.roomlist-view > .container > .splitter > .buttons > .spacer {
  flex: 1;
  margin-bottom: 0px;
}
.roomlist-view > .dialog > .splitter .filters,
.room-view.roomlist-view > .container > .splitter .filters {
  margin-top: 16px;
}
.roomlist-view > .dialog > .splitter .filters .bool,
.room-view.roomlist-view > .container > .splitter .filters .bool {
  margin-right: 6px;
  padding: 0px 6px;
  background-color: #2f3c43;
  border-radius: 5px;
}
.roomlist-view > .dialog > .splitter .filters .bool:hover,
.room-view.roomlist-view > .container > .splitter .filters .bool:hover {
  background-color: #3a4952;
}
.roomlist-view > .dialog > .splitter > .list,
.room-view.roomlist-view > .container > .splitter > .list {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.roomlist-view > .dialog > .splitter > .list col:nth-child(1),
.room-view.roomlist-view > .container > .splitter > .list col:nth-child(1) {
  width: 100%;
}
.roomlist-view > .dialog > .splitter > .list col:nth-child(2),
.room-view.roomlist-view > .container > .splitter > .list col:nth-child(2) {
  width: 60px;
}
.roomlist-view > .dialog > .splitter > .list col:nth-child(3),
.room-view.roomlist-view > .container > .splitter > .list col:nth-child(3) {
  width: 40px;
}
.roomlist-view > .dialog > .splitter > .list col:nth-child(4),
.room-view.roomlist-view > .container > .splitter > .list col:nth-child(4) {
  width: 95px;
}
.roomlist-view > .dialog > .splitter > .list td,
.room-view.roomlist-view > .container > .splitter > .list td {
  white-space: nowrap;
  overflow: hidden;
}
.roomlist-view > .dialog > .splitter > .list td:not(:first-child),
.room-view.roomlist-view > .container > .splitter > .list td:not(:first-child) {
  padding-left: 6px;
}
.roomlist-view > .dialog > .splitter > .list thead,
.room-view.roomlist-view > .container > .splitter > .list thead {
  line-height: 25px;
}
.roomlist-view > .dialog > .splitter > .list .separator,
.room-view.roomlist-view > .container > .splitter > .list .separator {
  height: 2px;
  width: 100%;
  background-color: gray;
}
.roomlist-view > .dialog > .splitter > .list tbody tr,
.room-view.roomlist-view > .container > .splitter > .list tbody tr {
  line-height: 22px;
}
.roomlist-view > .dialog > .splitter > .list tbody tr.old,
.room-view.roomlist-view > .container > .splitter > .list tbody tr.old {
  color: #bfbfbf;
}
.roomlist-view > .dialog > .splitter > .list tbody tr:hover,
.room-view.roomlist-view > .container > .splitter > .list tbody tr:hover {
  background-color: #2f3c43;
}
.roomlist-view > .dialog > .splitter > .list tbody tr.selected,
.room-view.roomlist-view > .container > .splitter > .list tbody tr.selected {
  background-color: #3a4952;
}
.roomlist-view > .dialog > .splitter > .list tbody .flagico,
.room-view.roomlist-view > .container > .splitter > .list tbody .flagico {
  margin-right: 2px;
}
.roomlist-view > .dialog > .splitter > .list tbody .flashtag,
.room-view.roomlist-view > .container > .splitter > .list tbody .flashtag {
  display: inline-block;
  padding: 0px 4px;
  background-color: #900;
  border-radius: 3px;
  margin-right: 5px;
  line-height: 14px;
}
.roomlist-view > .dialog > .splitter > .list table,
.room-view.roomlist-view > .container > .splitter > .list table {
  table-layout: fixed;
}
.roomlist-view > .dialog > .splitter > .list table.header,
.room-view.roomlist-view > .container > .splitter > .list table.header {
  width: calc(100% - 12px);
  margin-right: 15px;
  flex: 0;
  background-color: #1a2125;
}
.roomlist-view > .dialog > .splitter > .list .content,
.room-view.roomlist-view > .container > .splitter > .list .content {
  position: relative;
  overflow: hidden;
  flex: 1;
}
.roomlist-view > .dialog > .splitter > .list .content table,
.room-view.roomlist-view > .container > .splitter > .list .content table {
  margin-top: 5px;
  width: calc(100% - 12px);
}
.roomlist-view > .dialog > .splitter > .list .simplebar-scrollbar,
.room-view.roomlist-view > .container > .splitter > .list .simplebar-scrollbar {
  background-color: #708b9b;
}
.pick-stadium-view {
  width: 400px;
  height: 100%;
  max-height: 400px;
  white-space: nowrap;
}
.pick-stadium-view .splitter {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0px;
}
.pick-stadium-view .list {
  -webkit-user-select: none;
  user-select: none;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.pick-stadium-view .list > .elem {
  line-height: 22px;
  margin-right: 12px;
  padding-left: 6px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.pick-stadium-view .list > .elem:hover {
  background-color: #2f3c43;
}
.pick-stadium-view .list > .elem.selected {
  background-color: #3a4952;
}
.pick-stadium-view .list > .elem.custom {
  color: #ffdb72;
}
.pick-stadium-view .buttons {
  display: flex;
  flex-direction: column;
  margin-left: 6px;
  flex: 0 0 100px;
}
.pick-stadium-view .buttons > :not(:last-child) {
  margin-bottom: 6px;
}
.pick-stadium-view .buttons .spacer {
  flex: 1;
  margin: 0;
}
.unsupported-browser-view {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.unsupported-browser-view > .dialog,
.room-view.unsupported-browser-view > .container {
  width: 400px;
}
.unsupported-browser-view > .dialog > h2,
.room-view.unsupported-browser-view > .container > h2 {
  font-size: 1.1em;
  margin-top: 20px;
}
.unsupported-browser-view > .dialog p,
.room-view.unsupported-browser-view > .container p {
  line-height: 1.4em;
}
.unsupported-browser-view > .dialog a,
.room-view.unsupported-browser-view > .container a {
  line-height: 16px;
}
.unsupported-browser-view > .dialog a img,
.room-view.unsupported-browser-view > .container a img {
  display: inline-block;
  position: relative;
  top: 3px;
  margin-right: 6px;
}
.unsupported-browser-view > .dialog a:hover,
.room-view.unsupported-browser-view > .container a:hover {
  text-decoration: underline;
}
.unsupported-browser-view > .dialog button,
.room-view.unsupported-browser-view > .container button {
  margin-top: 20px;
}
.settings-view {
  width: 400px;
  height: 100%;
  max-height: 500px;
  position: relative;
  display: flex;
}
.settings-view [data-hook="close"] {
  position: absolute;
  top: 12px;
  right: 10px;
}
.settings-view .tabcontents {
  overflow-y: auto;
  flex: 1;
}
.settings-view [data-hook="presskey"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  font-weight: bold;
  z-index: 1;
}
.settings-view [data-hook="presskey"].show {
  display: flex;
}
.settings-view .tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.settings-view .tabs > :not(:last-child) {
  margin-right: 2px;
}
.settings-view .tabs button:first-child {
  border-radius: 5px 0 0 5px;
}
.settings-view .tabs button {
  border-radius: 0px;
}
.settings-view .tabs button:last-child {
  border-radius: 0 5px 5px 0;
}
.settings-view .tabs .selected {
  background-color: #2f5e85;
}
.settings-view .option-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 25px;
  margin-bottom: 6px;
}
.settings-view .section {
  display: none;
  flex-direction: column;
}
.settings-view .section > :not(:last-child) {
  margin-bottom: 6px;
}
.settings-view .section.selected {
  display: flex;
}
.settings-view .section .toggle {
  line-height: 25px;
  cursor: default;
}
.settings-view .section .toggle i {
  margin-right: 5px;
}
.settings-view .section .toggle:hover {
  background-color: #2f3c43;
}
.settings-view .section select {
  height: 25px;
  border: none;
  background-color: #244967;
  margin-left: 10px;
}
.settings-view .section select:hover {
  background-color: #2f5e85;
}
.settings-view .section select option {
  background-color: #1a2125;
}
.settings-view .section .loc {
  line-height: 25px;
}
.settings-view .section [data-hook="loc-ovr-btn"] {
  align-self: left;
}
.settings-view .section .inputrow {
  line-height: 25px;
  margin-bottom: 0;
  padding: 6px;
}
.settings-view .section .inputrow:nth-child(odd) {
  background-color: #222c31;
}
.settings-view .section .inputrow > :first-child {
  display: inline-block;
  min-width: 50px;
  font-weight: bold;
  padding-right: 10px;
}
.settings-view .section .inputrow > :not(:first-child) {
  background-color: #2f3c43;
  border-radius: 7px;
  margin: 2px 2px;
  padding: 0px 5px;
  display: inline-block;
}
.settings-view .section .inputrow > :not(:first-child):hover {
  background-color: #3a4952;
}
.settings-view .section .inputrow > :not(:first-child):hover .icon-cancel {
  opacity: 1;
}
.settings-view .section .inputrow :last-child {
  cursor: pointer;
}
.settings-view .section .inputrow .icon-cancel {
  cursor: pointer;
  opacity: 0.6;
}
.settings-view [data-hook="close"] {
  margin-top: auto;
}
.change-location-view {
  width: 400px;
  height: 100%;
  max-height: 500px;
  white-space: nowrap;
}
.change-location-view .splitter {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0px;
}
.change-location-view .list {
  -webkit-user-select: none;
  user-select: none;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.change-location-view .list > .elem {
  line-height: 22px;
  margin-right: 12px;
  padding-left: 6px;
}
.change-location-view .list > .elem:hover {
  background-color: #2f3c43;
}
.change-location-view .list > .elem.selected {
  background-color: #3a4952;
}
.change-location-view .buttons {
  display: flex;
  flex-direction: column;
  margin-left: 6px;
  flex: 0 0 100px;
}
.change-location-view .buttons > :not(:last-child) {
  margin-bottom: 6px;
}
.change-location-view .buttons .spacer {
  flex: 1;
  margin: 0;
}
.replay-controls-view {
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
  bottom: 0;
  height: 40px;
  width: 100%;
  background-color: #000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left: 6px;
  padding-right: 6px;
  box-sizing: border-box;
}
.replay-controls-view > :not(:last-child) {
  margin-right: 6px;
}
.replay-controls-view button {
  background-color: #244967;
}
.replay-controls-view button:hover {
  background-color: #2f5e85;
}
.replay-controls-view button:active {
  background-color: #193449;
}
.replay-controls-view button:disabled {
  background-color: #3e3e3e;
}
.replay-controls-view [data-hook="spd"] {
  text-align: center;
  min-width: 40px;
}
.replay-controls-view [data-hook="time"] {
  text-align: center;
  min-width: 50px;
}
.replay-controls-view .timebar {
  background-color: rgba(0, 0, 0, 0);
  flex-grow: 1;
  position: relative;
  height: 40px;
  cursor: pointer;
}
.replay-controls-view .timebar .barbg {
  position: absolute;
  height: 6px;
  width: 100%;
  margin: auto;
  background-color: #393737;
  top: 0;
  bottom: 0;
}
.replay-controls-view .timebar .bar {
  background-color: #5c5c5c;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.replay-controls-view .timebar .timetooltip {
  position: absolute;
  width: 60px;
  background-color: #000;
  top: -20px;
  text-align: center;
  line-height: 30px;
  display: none;
}
.replay-controls-view .timebar:hover .timetooltip {
  display: block;
}
.replay-controls-view .timebar .marker {
  width: 2px;
  height: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #cecece;
}
.replay-controls-view .timebar .marker.k1 {
  background-color: #5689e5;
}
.replay-controls-view .timebar .marker.k2 {
  background-color: #e56e56;
}
html {
  overflow: auto;
}
body {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: #fff;
  background-color: #73885c;
  background: #939e7f url("images/bg.png") fixed;
}
a {
  color: #ffe7cc;
}
a:hover {
  text-decoration: underline;
  cursor: pointer;
}
#header {
  height: 40px;
  line-height: 40px;
  background-color: #000;
  padding-left: 20px;
}
#header div {
  font-size: 16px;
  font-size: 16px;
  display: inline;
}
.thin-scrollbar,
.subtle-thin-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.2);
}
.thin-scrollbar::-webkit-scrollbar,
.subtle-thin-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.2);
}
.thin-scrollbar::-webkit-scrollbar-thumb,
.subtle-thin-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}
.subtle-thin-scrollbar:not(:hover) {
  scrollbar-color: rgba(255, 255, 255, 0) rgba(0, 0, 0, 0);
}
.subtle-thin-scrollbar:not(:hover)::-webkit-scrollbar {
  background-color: rgba(0, 0, 0, 0);
}
.subtle-thin-scrollbar:not(:hover)::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0);
}
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  padding: 0;
  width: 120px;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
}
.slider:focus {
  outline: none;
}
.slider::-webkit-slider-thumb {
  border: none;
  width: 10px;
  height: 16px;
  border-radius: 7px;
  background: #389cdb;
  cursor: pointer;
  margin-top: -6px;
}
.slider::-moz-range-thumb {
  border: none;
  width: 10px;
  height: 16px;
  border-radius: 7px;
  background: #389cdb;
  cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  border: none;
}
.slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  border: none;
}


/* Styl dla głównego kontenera GUI */
#simpleGui {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px; /* Stała szerokość */
  height: 1027px; /* Stała wysokość dokładnie 1027px */
  background-color: rgba(26, 33, 37, 0.95); /* Tło */
  padding: 0; /* Usunięty padding */
  margin: 0; /* Usunięty margines */
  border: 0; /* Brak obramowania */
  box-sizing: border-box; /* Upewniamy się, że box-sizing jest prawidłowo ustawiony */
  z-index: 1000;
  color: white;
  font-family: 'Arial', sans-serif; /* Czcionka */
  display: none; /* Ukryte na starcie */
}


/* Nagłówek w GUI */
#simpleGui h2 {
  font-size: 20px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Subtelna linia oddzielająca */
}

/* Stylizacja dla checkboxa i etykiety */
#simpleGui label {
  display: flex;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
}

#simpleGui input[type="checkbox"] {
  margin-right: 10px;
  width: 18px;
  height: 18px;
  accent-color: #4CAF50; /* Zielony kolor zaznaczenia */
  cursor: pointer;
}

/* Stylizacja interaktywna dla checkboxa */
#simpleGui input[type="checkbox"]:hover {
  outline: 2px solid rgba(76, 175, 80, 0.8); /* Zielona obwódka przy najechaniu */
}

/* Dodatkowe poprawki stylu */
#simpleGui p {
  margin-top: 10px;
  line-height: 1.5;
}

/* Stylowanie przycisków, jeżeli będą potrzebne */
#simpleGui button {
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 10px;
}

#simpleGui button:hover {
  background-color: #45a049;
}

.rightbar {
  display: none !important;
}

/* Styl wspólny dla wszystkich rozwijanych sekcji */
.option-toggle {
    cursor: pointer;
    user-select: none;
    display: block;
    font-weight: bold;
    margin-top: 10px;
}

.option-container {
    margin: 5px 0 0 10px;
    font-size: 13px;
    line-height: 1.4;
    display: none;
}

.option-container label {
    display: block;
    margin-bottom: 3px;
}

/* Stylizacja suwaka */
.slider-container {
    display: flex;
    align-items: center;
    margin-top: 6px;
    gap: 6px;
}

.slider-container input[type="range"] {
    width: 100px;
}

.slider-container span {
    font-size: 12px;
    color: #ccc;
}

/* =================== TŁO =================== */
html, body {
  background: url("https://i.imgur.com/j6v2x7i.png") no-repeat center -150px fixed !important;
  background-size: cover !important;
  overflow: hidden !important;
  margin: 0;
  padding: 0;
}

/* =================== PANEL LOGOWANIA =================== */
.choose-nickname-view {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 490px;
}

.choose-nickname-view > img {
  display: none;
}

.choose-nickname-view .dialog {
  background-color: rgba(0, 0, 0, 0.85) !important;
  border: 2px solid #990000 !important;
  border-radius: 6px !important;
  padding: 10px;
  color: white;
  font-family: Arial, sans-serif;
  width: 300px;
}

/* =================== INPUT =================== */
.label-input {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.label-input label {
  background-color: #990000 !important;
  color: white !important;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: bold;
}

.label-input input {
  flex: 1;
  background-color: #111 !important;
  color: white !important;
  border: 1px solid #660000 !important;
  border-radius: 4px !important;
  padding: 4px 6px !important;
  outline: none !important;
  box-shadow: none !important;
}

.label-input input:focus {
  border: 1px solid #990000 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =================== PRZYCISK OK =================== */
button[data-hook="ok"] {
  width: 100% !important;
  background-color: #990000 !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 5px 0 !important;
  font-weight: bold !important;
  cursor: pointer !important;
}

button[data-hook="ok"]:hover {
  background-color: #bb0000 !important;
}

.dialog .label-input, .room-view .container .label-input {
  background-color: #990000 !important;
}

/* GŁÓWNY PANEL Z LISTĄ POKOI */
.roomlist-view .dialog {
  background-color: rgba(0, 0, 0, 0.85);
  border: 2px solid #990000;
  color: white;
  font-family: Arial, sans-serif;
}

/* PRZYCISKI W PANELU */
.roomlist-view button {
  background-color: #990000;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 5px 8px;
  font-weight: bold;
  cursor: pointer;
}

.roomlist-view button:hover {
  background-color: #bb0000;
}

/* POPRAWKA DLA KONKRETNYCH PRZYCISKÓW */
[data-hook="join"],
[data-hook="create"],
[data-hook="refresh"],
[data-hook="settings"],
[data-hook="changenick"],
[data-hook="replays"] {
  background-color: #990000 !important;
  color: white !important;
  border: none !important;
}

[data-hook="replays"]:hover,
[data-hook="join"]:hover,
[data-hook="create"]:hover {
  background-color: #bb0000 !important;
}

/* TABELA POKOI */
.roomlist-view .list {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  border: 1px solid #990000;
}

/* Styl nagłówka tabeli (Name, Players, Pass, Distance) */
.roomlist-view .list tr th {
  background-color: #000;
  color: white;
  border-bottom: 1px solid #990000;
}

/* Styl filtrów u dołu */
.filters {
  background-color: #111 !important;
  color: white !important;
  border-top: 1px solid #990000;
  padding: 5px;
}

/* Styl dla file-btn */
.file-btn {
  background-color: #111 !important;
  color: white !important;
  border: 1px solid #990000;
  border-radius: 4px;
  padding: 6px 8px;
}

/* Styl dla inputów lub labeli wewnątrz file-btn */
.file-btn label,
.file-btn input {
  background-color: #990000 !important;
  color: white !important;
  border: none;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
}

.roomlist-view .list table th,
.roomlist-view .list table td {
  background-color: #0a0a0a;
  color: #ffdddd;
  border: 1px solid #990000;
  font-weight: bold;
  padding: 4px 8px;
  text-align: center;
}

.roomlist-view .filters span.bool {
  background-color: #330000;
  color: #ffdddd;
  border: 1px solid #990000;
  padding: 3px 6px;
  border-radius: 4px;
  margin-right: 5px;
  transition: background-color 0.2s ease;
}

.roomlist-view .filters span.bool:hover {
  background-color: #990000;
  cursor: pointer;
}

.roomlist-view .filters span.bool {
  background-color: #1a0000;
  color: #ffdddd;
  border: 1px solid #990000;
  border-radius: 4px;
  padding: 5px 10px;
  margin-right: 5px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  transition: background-color 0.2s ease;
  box-shadow: inset 0 0 4px #660000;
}

.roomlist-view .filters span.bool:hover {
  background-color: #990000;
  color: white;
  cursor: pointer;
}

.mini-room-search {
  display: block;
  margin: 8px auto 0 auto; /* wyśrodkowanie */
  padding: 5px 0;
  background-color: #990000;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 13px;
  font-weight: bold;
  width: 130px;
  text-align: center;
  font-family: Arial, sans-serif;
  cursor: text;
}

.mini-room-search::placeholder {
  color: #fff;
  opacity: 0.6;
}

.mini-room-search:hover,
.mini-room-search:focus {
  background-color: #bb0000;
  outline: none;
}

.dialog.settings-view {
  background-color: rgba(0, 0, 0, 0.85) !important;
  border: 2px solid #990000 !important;
  border-radius: 6px;
  color: white;
  font-family: Arial, sans-serif;
  padding: 10px;
}

.dialog.settings-view .tabs button {
  background-color: #990000 !important;
  color: white !important;
  border: none !important;
  padding: 5px 10px;
  margin: 0 2px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

.dialog.settings-view .tabs button:hover {
  background-color: #bb0000 !important;
}

.dialog.settings-view .tabs button.active {
  background-color: #bb0000 !important;
}

.dialog.settings-view .tabcontents {
  margin-top: 10px;
}

.dialog.settings-view label {
  color: white !important;
}

.dialog.settings-view input[type="checkbox"] {
  accent-color: #990000 !important;
}

button[data-hook="close"] {
  background-color: #990000 !important;
  color: white !important;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-weight: bold;
  cursor: pointer;
}

button[data-hook="close"]:hover {
  background-color: #bb0000 !important;
}

/* =================== GŁÓWNY PANEL =================== */
.dialog.settings-view {
  background-color: rgba(0, 0, 0, 0.9) !important;
  border: 2px solid #990000 !important;
  border-radius: 6px !important;
  color: white;
  font-family: Arial, sans-serif;
}

/* =================== NAGŁÓWEK (Settings + Close) =================== */
.dialog.settings-view > h1 {
  border-bottom: 2px solid #990000;
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-size: 18px;
  color: white;
}

.dialog.settings-view button[data-hook="close"] {
  background-color: #990000;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
}

.dialog.settings-view button[data-hook="close"]:hover {
  background-color: #bb0000;
}

/* =================== ZAKŁADKI (Sound, Video, Input, Misc) =================== */
.dialog.settings-view .tabs > button {
  background-color: #990000;
  color: white;
  font-weight: bold;
  margin-right: 5px;
  border-radius: 4px;
  padding: 5px 10px;
  border: none;
  cursor: pointer;
}

.dialog.settings-view .tabs > button:hover,
.dialog.settings-view .tabs > button.selected {
  background-color: #bb0000;
}

/* =================== INPUTY & PRZYCISKI WEWNĘTRZNE =================== */
.section.selected button {
  background-color: #1a1a1a;
  color: white;
  border: 1px solid #990000;
  border-radius: 4px;
  margin: 3px;
  padding: 4px 8px;
}

.section.selected button:hover {
  background-color: #2a2a2a;
  border-color: #bb0000;
}

.section.selected .key {
  background-color: #333;
  border: 1px solid #990000;
  padding: 3px 6px;
  margin-right: 3px;
  border-radius: 3px;
}

/* =================== SLIDERY =================== */
input[type="range"] {
  accent-color: #990000 !important;
}

/* =================== OVERRIDE LOCATION =================== */
button[data-hook="loc-ovr-btn"] {
  background-color: #990000 !important;
  color: white;
  font-weight: bold;
  border-radius: 4px;
  padding: 6px 10px;
  border: none;
  cursor: pointer;
}

button[data-hook="loc-ovr-btn"]:hover {
  background-color: #bb0000 !important;
}

/* =================== USTAWIENIA - OGÓLNE =================== */
.settings-view {
  background-color: rgba(0, 0, 0, 0.85) !important;
  border: 2px solid #990000 !important;
  border-radius: 6px !important;
  color: white !important;
  font-family: Arial, sans-serif !important;
  padding: 10px !important;
}

/* =================== NAGŁÓWKI i ZAKŁADKI =================== */
.settings-view h3,
.settings-view h2,
.settings-view label {
  color: white !important;
}

.settings-view .tabs > button {
  background-color: #990000 !important;
  color: white !important;
  border-radius: 4px !important;
  font-weight: bold;
  padding: 5px 10px !important;
  margin-right: 5px;
  border: none !important;
  cursor: pointer;
}

.settings-view .tabs > button.selected {
  background-color: #bb0000 !important;
}

/* =================== PRZYCISK CLOSE =================== */
button[data-hook="close"] {
  background-color: #990000 !important;
  color: white !important;
  border-radius: 4px;
  border: none !important;
  padding: 4px 10px;
  font-weight: bold;
  cursor: pointer;
}

button[data-hook="close"]:hover {
  background-color: #bb0000 !important;
}

input[type="range"] {
  width: 80px !important;
  max-width: 80px !important;
  min-width: 80px !important;
  -webkit-appearance: none;
  height: 4px;
  background: #660000 !important;
  border-radius: 5px;
  outline: none;
  display: inline-block;
  vertical-align: middle;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #bb0000;
  cursor: pointer;
  border: 1px solid #fff;
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #bb0000;
  cursor: pointer;
  border: 1px solid #fff;
}

/* =================== CHECKBOXY I TEKST =================== */
.settings-view input[type="checkbox"] {
  accent-color: #bb0000 !important;
}

.settings-view p,
.settings-view span,
.settings-view label {
  color: white !important;
}

/* =================== PRZYCISKI INPUT (x, +, Override location) =================== */
.settings-view button {
  background-color: #1a1a1a !important;
  color: white !important;
  border: 1px solid #990000 !important;
  border-radius: 4px;
  font-weight: bold;
  padding: 4px 8px;
  margin: 2px;
  cursor: pointer;
}

.settings-view button:hover {
  background-color: #330000 !important;
}

/* =================== PRZYCISKI W INPUT (klawisze sterowania) =================== */
.settings-view .key,
.settings-view .input {
  background-color: #222 !important;
  border: 1px solid #660000 !important;
  color: white !important;
  padding: 3px 6px;
  border-radius: 4px;
  margin: 2px;
}

/* =================== TŁA POL, DROPDOWNÓW =================== */
select,
.settings-view .select {
  background-color: #111 !important;
  color: white !important;
  border: 1px solid #990000 !important;
  border-radius: 4px;
  padding: 4px 6px;
}

/* =================== Override Location =================== */
button[data-hook="loc-ovr-btn"] {
  background-color: #990000 !important;
  border: none !important;
  border-radius: 4px;
  font-weight: bold;
  color: white !important;
}

button[data-hook="loc-ovr-btn"]:hover {
  background-color: #bb0000 !important;
}

.header-btns button[data-hook="rec-btn"],
.header-btns button[data-hook="link-btn"],
.header-btns button[data-hook="leave-btn"] {
  background-color: #990000 !important;
  color: white !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  margin-left: 6px;
  cursor: pointer;
}

.header-btns button[data-hook="rec-btn"]:hover,
.header-btns button[data-hook="link-btn"]:hover,
.header-btns button[data-hook="leave-btn"]:hover {
  background-color: #bb0000 !important;
}

.teams .tools button {
  background-color: #990000 !important;
  color: white !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 8px !important;
  font-family: Arial, sans-serif;
  cursor: pointer;
}

.teams .tools button:hover {
  background-color: #bb0000 !important;
}

.settings input[type="text"],
.settings select {
  background-color: #111 !important;
  color: white !important;
  border: 1px solid #990000 !important;
  border-radius: 4px !important;
  padding: 4px 6px !important;
}

.settings input[type="text"]:focus {
  border-color: #bb0000 !important;
}

.settings button {
  background-color: #990000 !important;
  color: white !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  cursor: pointer;
}

.settings button:hover {
  background-color: #bb0000 !important;
}

.controls button[data-hook="stop-btn"] {
  background-color: #990000 !important;
  color: white !important;
  font-weight: bold;
  border-radius: 4px;
  border: none;
  padding: 6px 12px;
}

.controls button[data-hook="stop-btn"]:hover {
  background-color: #bb0000 !important;
}

.controls button[data-hook="start-btn"],
.controls button[data-hook="pause-btn"] {
  background-color: #244967 !important; /* Możesz też to zmienić na ciemnoczerwony jeśli chcesz */
  color: white;
  font-weight: bold;
  border-radius: 4px;
  padding: 6px 12px;
  border: none;
}

.controls button[data-hook="start-btn"]:hover,
.controls button[data-hook="pause-btn"]:hover {
  background-color: #2f5e85 !important;
}

/* =================== PRZYCISKI GŁÓWNE W POKOJU =================== */
button[data-hook="rec-btn"],
button[data-hook="link-btn"],
button[data-hook="leave-btn"],
button[data-hook="pause-btn"],
button[data-hook="stop-btn"],
button[data-hook="start-btn"],
button[data-hook="menu"],
button[data-hook="settings"],
button[data-hook="sound-btn"],
button[data-hook="pick"],
button[data-hook="auto"],
button[data-hook="auto-btn"],
button[data-hook="rand"],
button[data-hook="rand-btn"],
button[data-hook="unlock"],
button[data-hook="reset"],
button[data-hook="reset-btn"],
button[data-hook="lock-btn"] {
  background-color: #990000 !important;
  color: white !important;
  font-weight: bold !important;
  border: 1px solid #660000 !important;
  border-radius: 5px !important;
  padding: 6px 12px !important;
  margin: 4px !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  cursor: pointer !important;
  box-shadow: 0 0 4px #660000, inset 0 0 6px #220000;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

button[data-hook="rec-btn"]:hover,
button[data-hook="link-btn"]:hover,
button[data-hook="leave-btn"]:hover,
button[data-hook="pause-btn"]:hover,
button[data-hook="stop-btn"]:hover,
button[data-hook="start-btn"]:hover,
button[data-hook="menu"]:hover,
button[data-hook="settings"]:hover,
button[data-hook="sound-btn"]:hover,
button[data-hook="pick"]:hover,
button[data-hook="auto"]:hover,
button[data-hook="auto-btn"]:hover,
button[data-hook="rand"]:hover,
button[data-hook="rand-btn"]:hover,
button[data-hook="unlock"]:hover,
button[data-hook="reset"]:hover,
button[data-hook="reset-btn"]:hover,
button[data-hook="lock-btn"]:hover {
  background-color: #bb0000 !important;
  box-shadow: 0 0 6px #ff0000, inset 0 0 8px #330000;
  color: #fff !important;
}


/* =================== TOOLTIP i IKONY W MENU =================== */
button[data-hook="menu"] .tooltip,
button[data-hook="rec-btn"] .tooltip,
button[data-hook="link-btn"] .tooltip {
  color: #ffffff;
  font-size: 11px;
  opacity: 0.85;
}


div.controls.admin-only button[data-hook="start-btn"],
div.controls.admin-only button[data-hook="pause-btn"] {
  background-color: #990000 !important;
  color: white !important;
  font-weight: bold !important;
  border: 1px solid #660000 !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  box-shadow: 0 0 4px #660000, inset 0 0 6px #220000;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

div.controls.admin-only button[data-hook="start-btn"]:hover,
div.controls.admin-only button[data-hook="pause-btn"]:hover {
  background-color: #bb0000 !important;
  box-shadow: 0 0 6px #ff0000, inset 0 0 8px #330000;
  cursor: pointer !important;
}

/* =================== NAGŁÓWEK Z NAZWĄ POKOJU =================== */
[data-hook="room-name"] {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  padding: 5px 10px;
  border-bottom: 2px solid #990000;
  margin-bottom: 10px;
  display: inline-block;
}

/* =================== PRZYCISKI GŁÓWNE W POKOJU =================== */
button[data-hook="rec-btn"],
button[data-hook="link-btn"],
button[data-hook="leave-btn"],
button[data-hook="pause-btn"],
button[data-hook="stop-btn"],
button[data-hook="start-btn"],
button[data-hook="menu"],
button[data-hook="settings"],
button[data-hook="sound-btn"],
button[data-hook="pick"],
button[data-hook="auto"],
button[data-hook="rand"],
button[data-hook="unlock"],
button[data-hook="reset"] {
  background-color: #990000 !important;
  color: white !important;
  font-weight: bold !important;
  border: 1px solid #660000 !important;
  border-radius: 5px !important;
  padding: 6px 12px !important;
  margin: 3px 5px !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  box-shadow: 0 0 6px #440000, inset 0 0 10px #220000;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

button[data-hook="rec-btn"]:hover,
button[data-hook="link-btn"]:hover,
button[data-hook="leave-btn"]:hover,
button[data-hook="pause-btn"]:hover,
button[data-hook="stop-btn"]:hover,
button[data-hook="start-btn"]:hover,
button[data-hook="menu"]:hover,
button[data-hook="settings"]:hover,
button[data-hook="sound-btn"]:hover,
button[data-hook="pick"]:hover,
button[data-hook="auto"]:hover,
button[data-hook="rand"]:hover,
button[data-hook="unlock"]:hover,
button[data-hook="reset"]:hover {
  background-color: #bb0000 !important;
  box-shadow: 0 0 10px #ff0000, inset 0 0 10px #440000;
  color: #fff !important;
  cursor: pointer;
}

/* =================== TOOLTIPY I IKONY W BUTTONACH =================== */
button[data-hook] .tooltip {
  color: #ffffff !important;
  font-size: 11px !important;
  opacity: 0.8;
}

button[data-hook] i[class^="icon-"] {
  margin-right: 6px;
}

/* =================== STYL CREATE ROOM =================== */

.dialog[data-hook="create-room"] {
  background-color: rgba(0, 0, 0, 0.9) !important;
  border: 2px solid #990000 !important;
  border-radius: 8px !important;
  padding: 16px !important;
  color: white !important;
  font-family: Arial, sans-serif !important;
  box-shadow: 0 0 8px #660000 inset;
}

/* Nagłówek "Create room" */
.dialog[data-hook="create-room"] > h1 {
  font-size: 18px;
  color: white;
  border-bottom: 1px solid #990000;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

/* Pola tekstowe i select */
.dialog[data-hook="create-room"] .label-input input,
.dialog[data-hook="create-room"] .label-input select {
  background-color: #111 !important;
  color: white !important;
  border: 1px solid #990000 !important;
  border-radius: 4px !important;
  padding: 6px 8px !important;
  width: 100% !important;
  box-shadow: inset 0 0 4px #330000;
}

.dialog[data-hook="create-room"] .label-input label {
  display: inline-block;
  background-color: #990000;
  color: white;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 4px 4px 0 0;
  margin-bottom: 2px;
}

/* Przycisk unlisted */
button[data-hook="unlisted"] {
  background-color: #990000 !important;
  color: white !important;
  border: none !important;
  border-radius: 4px;
  padding: 6px 10px;
  font-weight: bold;
  margin: 6px 0;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button[data-hook="unlisted"]:hover {
  background-color: #bb0000 !important;
}

/* Przycisk CANCEL i CREATE */
.dialog[data-hook="create-room"] .row button {
  background-color: #990000 !important;
  color: white !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  margin: 5px 5px 0 0;
  font-family: Arial, sans-serif !important;
  width: 48%;
  transition: background-color 0.2s ease;
}

.dialog[data-hook="create-room"] .row button[data-hook="cancel"] {
  background-color: #333 !important;
}

.dialog[data-hook="create-room"] .row button:hover {
  background-color: #bb0000 !important;
  box-shadow: 0 0 4px #ff0000, inset 0 0 6px #220000;
}

/* Stylizacja przycisku Cancel w Create Room */
button[data-hook="cancel"] {
  background-color: #990000 !important;
  color: white !important;
  font-weight: bold !important;
  font-family: Arial, sans-serif !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  margin-top: 6px !important;
  width: 48% !important;
  box-shadow: 0 0 4px #660000, inset 0 0 6px #220000;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

button[data-hook="cancel"]:hover {
  background-color: #bb0000 !important;
  box-shadow: 0 0 6px #ff0000, inset 0 0 8px #330000;
}

/* === Styl dla przycisków Cancel / Create (Create Room) === */
.dialog button[data-hook="cancel"],
.dialog button[data-hook="create"] {
  background-color: #990000 !important;
  color: white !important;
  font-weight: bold !important;
  border: 1px solid #660000 !important;
  border-radius: 6px !important;
  font-family: Arial, sans-serif !important;
  padding: 6px 16px !important;
  margin: 4px !important;
  font-size: 14px !important;
  box-shadow: 0 0 6px #660000, inset 0 0 6px #220000;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.dialog button[data-hook="cancel"]:hover,
.dialog button[data-hook="create"]:hover {
  background-color: #bb0000 !important;
  box-shadow: 0 0 8px #ff0000, inset 0 0 8px #330000;
  cursor: pointer !important;
}

/* =================== UNIWERSALNE DIALOGI (Create room, Password required itd.) =================== */
.dialog:not(.settings-view) {
  background-color: rgba(0, 0, 0, 0.9) !important;
  border: 2px solid #990000 !important;
  border-radius: 8px !important;
  padding: 16px !important;
  color: white !important;
  font-family: Arial, sans-serif !important;
  box-shadow: 0 0 8px #660000 inset;
}

.dialog:not(.settings-view) h1 {
  font-size: 18px;
  color: white;
  border-bottom: 1px solid #990000;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.dialog:not(.settings-view) .label-input input {
  background-color: #111 !important;
  color: white !important;
  border: 1px solid #990000 !important;
  border-radius: 4px;
  padding: 6px 8px;
  width: 100%;
  box-shadow: inset 0 0 4px #330000;
}

.dialog:not(.settings-view) .label-input label {
  display: inline-block;
  background-color: #990000;
  color: white;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 4px 4px 0 0;
  margin-bottom: 2px;
}

button[data-hook="ok"] {
  background-color: #990000 !important;
  color: white !important;
  font-weight: bold !important;
  font-family: Arial, sans-serif !important;
  border: 1px solid #660000 !important;
  border-radius: 6px !important;
  padding: 6px 16px !important;
  margin: 4px !important;
  font-size: 14px !important;
  width: 48% !important;
  box-shadow: 0 0 6px #660000, inset 0 0 6px #220000;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer !important;
}

button[data-hook="ok"]:hover {
  background-color: #bb0000 !important;
  box-shadow: 0 0 8px #ff0000, inset 0 0 8px #330000;
}

button[data-hook="settings"] {
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  color: white !important;
  font-weight: bold !important;
}

button[data-hook="leave"] {
  background-color: #990000 !important;
  color: white !important;
  font-weight: bold !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  border: 1px solid #660000 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  margin: 4px !important;
  box-shadow: 0 0 6px #660000, inset 0 0 6px #220000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer !important;
}

button[data-hook="leave"]:hover {
  background-color: #bb0000 !important;
  box-shadow: 0 0 8px #ff0000, inset 0 0 8px #330000;
}

/* Styl ikony w przycisku */
button[data-hook="leave"] i[class^="icon-"] {
  margin-right: 6px;
  color: white !important;
}

.container {
  background-color: #070707 !important;
  box-shadow: inset 0 0 20px rgba(100, 0, 0, 0.6);

}

.settings-view,
.dialog,
.dialog.settings-view,
.roomlist-view .dialog,
.dialog[data-hook="create-room"] {
  background-color: rgba(5, 5, 5, 0.95) !important;
  box-shadow: inset 0 0 10px #220000 !important;
}

/* =================== CIEMNE TŁA INPUTÓW =================== */
input[type="text"],
select,
textarea,
.settings-view input[type="text"],
.settings-view select,
.dialog[data-hook="create-room"] .label-input input,
.dialog[data-hook="create-room"] .label-input select {
  background-color: #0c0c0c !important;
  border-color: #660000 !important;
  color: white !important;
}

/* =================== PANELE WIDOKU DRUŻYN =================== */
.teams .player-list-view,
.teams .tools,
.controls.admin-only {
  background-color: #0f0f0f !important;
  border-radius: 6px;
  padding: 4px;
}

/* =================== BUTTONY NIEAKTYWNE =================== */
button:disabled {
  background-color: #222 !important;
  color: #888 !important;
  border: 1px solid #550000 !important;
  box-shadow: none !important;
}

.teams > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.teams > div:nth-child(2) {
  margin-top: -2px !important; /* idealnie wyrównuje góry */
}

.teams > div:nth-child(2) .list {
  height: 100% !important;
}

.teams > div:nth-child(3) .list {
  margin-top: 6px !important; /* dostosuj precyzyjnie np. 3–5px */
}


.teams > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}



button[data-hook="admin"],
button[data-hook="kick"] {
  background-color: #990000 !important;
  color: white !important;
  font-weight: bold;
  font-family: Arial, sans-serif !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  margin: 4px 6px 0 0 !important;
  box-shadow: 0 0 4px #660000, inset 0 0 6px #220000;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

button[data-hook="admin"]:hover,
button[data-hook="kick"]:hover {
  background-color: #bb0000 !important;
  box-shadow: 0 0 6px #ff0000, inset 0 0 8px #330000;
}
.teams .list {
  background-color: #0a0a0a !important;
  border: 1px solid #660000 !important;
  border-radius: 4px;
  padding: 4px 6px;
  box-shadow: inset 0 0 6px #220000;
  color: white;
  font-family: Arial, sans-serif;
}

.teams .list h1,
.teams .list span,
.teams .list div {
  color: white !important;
}