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
}

.replay-controls-view .analiza {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    font-weight: bold;
    text-align: center;
    color: white;
    font-size: 30px;
    background: #939e7f url("images/bg.png") fixed;
    z-index: 200;
}

.replay-controls-view .analiza>div {
    margin-top: 200px;
    display: inline-block;
    padding: 30px;
    border-radius: 5px;
    background: #1A2125;
}

.replay-controls-view .analiza>div .licznik {
    margin-top: 10px;
    color: grey;
    font-size: 15px;
}

.chatbox-view .goals div {
    padding: 3px 4px;
    cursor: pointer;
}

.chatbox-view .goals div:hover {
    background: #262f33;
}

.chatbox-view .goals .gol-wynik {
    background: #1A2125;
    border-radius: 2px;
    padding: 2px 6px;
    margin-right: 5px;
    display: inline-block;
}

.chatbox-view .goals .gol-czas {
    background: #244967;
    display: inline-block;
    padding: 1px;
    padding-right: 5px;
    margin-right: 2px;
    border-radius: 2px;
}

.chatbox-view .goals div:hover .gol-wynik {
    background: #262f33;
}

.chatbox-view .goals div:hover .gol-czas {
    background: #2f5e85;
}

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 .2s linear, opacity .2s linear;
    -webkit-transition: background-color .2s linear, opacity .2s linear;
    height: 15px;
    bottom: 0px;
    position: absolute
}

.ps__rail-y {
    display: none;
    opacity: 0;
    transition: background-color .2s linear, opacity .2s linear;
    -webkit-transition: background-color .2s linear, opacity .2s linear;
    width: 15px;
    right: 0;
    position: absolute
}

.ps--active-x>.ps__rail-x,
.ps--active-y>.ps__rail-y {
    display: block;
    background-color: transparent
}

.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: transparent;
    opacity: 1
}

.ps__thumb-x {
    background-color: #aaa;
    border-radius: 6px;
    transition: background-color .2s linear, height .2s ease-in-out;
    -webkit-transition: background-color .2s linear, height .2s ease-in-out;
    height: 6px;
    bottom: 2px;
    position: absolute
}

.ps__thumb-y {
    background-color: #445661;
    border-radius: 6px;
    transition: background-color .2s linear, width .2s ease-in-out;
    -webkit-transition: background-color .2s linear, width .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
    }
}

.connecting-view button,
.disconnected-view button,
.dialog button,
.room-view>.container button,
.dialog .file-btn label,
.room-view>.container .file-btn label,
.chatbox-view>.input button,
.game-view>.bottom-section button,
.room-view button,
.room-view button[data-hook="start-btn"],
.room-view button[data-hook="stop-btn"],
.replay-controls-view button {
    position: relative;
    padding: 5px 15px;
    border: 0;
    border-radius: 5px;
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%
}

.connecting-view button:focus,
.disconnected-view button:focus,
.dialog button:focus,
.dialog .file-btn label:focus,
.room-view>.container .file-btn label:focus,
.chatbox-view>.input button:focus,
.game-view>.bottom-section button:focus,
.room-view button:focus,
.replay-controls-view button:focus {
    outline: none
}

.connecting-view button .tooltip,
.disconnected-view button .tooltip,
.dialog button .tooltip,
.dialog .file-btn label .tooltip,
.room-view>.container .file-btn label .tooltip,
.chatbox-view>.input button .tooltip,
.game-view>.bottom-section button .tooltip,
.room-view button .tooltip,
.replay-controls-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
}

.connecting-view button:hover .tooltip,
.disconnected-view button:hover .tooltip,
.dialog button:hover .tooltip,
.dialog .file-btn label:hover .tooltip,
.room-view>.container .file-btn label:hover .tooltip,
.chatbox-view>.input button:hover .tooltip,
.game-view>.bottom-section button:hover .tooltip,
.room-view button:hover .tooltip,
.replay-controls-view button:hover .tooltip {
    visibility: visible;
    opacity: 1;
    transition: opacity .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,
.room-view>.container input {
    color: white;
    background-color: #111619;
    border: none;
    border-radius: 5px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #111619
}

.dialog input:focus,
.room-view>.container input:focus {
    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,
.room-view>.container input {
    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: white;
    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 {
    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: white;
    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: -1.0s
}

.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-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-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-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-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 {
    display: flex;
    flex-direction: column;
    height: 150px;
    width: 800px;
    min-width: 300px;
    padding: 5px
}

@media (max-height: 700px) {
    .chatbox-view {
        height: 130px
    }
}

.chatbox-view>:not(:first-child) {
    margin-top: 5px
}

.chatbox-view>.log {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
    line-height: 1.3
}

.chatbox-view>.log>p:not(:last-child) {
    margin-bottom: 3px
}

.chatbox-view>.log p {
    overflow: hidden
}

.chatbox-view>.log p.notice {
    color: #8ed2ab
}

.chatbox-view>.input {
    display: flex;
    flex-direction: row;
    flex-shrink: 0
}

.chatbox-view>.input input[type="text"] {
    color: white;
    background-color: #111619;
    border: none;
    border-radius: 5px;
    padding: 0 10px;
    margin-right: 4px;
    flex-grow: 1;
    align-self: stretch;
    box-sizing: border-box
}

.chatbox-view>.input input[type="text"]:focus {
    border: 1px solid #244967;
    padding: 0 7px
}

.chatbox-view>.input button {
    background-color: #244967
}

.chatbox-view>.input button:hover {
    background-color: #2f5e85
}

.chatbox-view>.input button:active {
    background-color: #193449
}

.chatbox-view>.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: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch
}

.game-view>.top-section {
    position: relative;
    flex-grow: 1;
    min-height: 0
}

.game-view>.bottom-section {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    background-color: #1A2125
}

.game-view>.bottom-section>.buttons {
    padding: 6px;
    white-space: nowrap;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    background-image: url(/images/thehax-replay-logo.png);
    background-repeat: no-repeat;
    background-position: 50% 95%;
    background-size: 90%;
}

.buttons {}

.game-view>.bottom-section>.buttons>:not(:last-child) {
    margin-bottom: 6px
}

.game-view>.bottom-section button {
    background-color: #244967
}

.game-view>.bottom-section button:hover {
    background-color: #2f5e85
}

.game-view>.bottom-section button:active {
    background-color: #193449
}

.game-view>.bottom-section button:disabled {
    background-color: #3e3e3e
}

.game-view>.bottom-section .stats-view {
    margin-right: auto
}

.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)
}

.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 {
    padding: 6px;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
}

.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: visible;
    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: white
    }

    to {
        color: #ff8080
    }
}

@keyframes overtime-appear {
    from {
        opacity: 0;
        transform: translateY(-25px)
    }
}

.game-state-view {
    position: absolute;
    width: 100%;
    height: 100%
}

.game-state-view .bar-container {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1
}

.game-state-view .bar {
    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.restricted {
    background-color: #2e343c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.game-state-view.restricted .bar-container {
    position: relative;
    height: 35px
}

.game-state-view.restricted .bar {
    background: none
}

.game-state-view.restricted canvas {
    width: 100%;
    height: calc(100% - 35px);
    max-width: 840px;
    max-height: 410px
}

.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: "\25b6"
}

.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: "\25c0"
}

.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>[data-hook=ok],
.room-view.room-password-view>.container>[data-hook=ok] {
    align-self: center;
    width: 100px
}

.roomlist-view {
    position: absolute;
    width: 100%;
    height: calc(100% - 10px);
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center
}

.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: 300px;
    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
}

.pick-stadium-view .list>.elem:hover {
    background-color: #2f3c43
}

.pick-stadium-view .list>.elem.selected {
    background-color: #3a4952
}

.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 {
    min-width: 400px;
    height: 100%;
    max-height: 400px
}

.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 .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 [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: black;
    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"],
.replay-controls-view [data-hook="koniec"] {
    text-align: center;
    min-width: 50px
}

.replay-controls-view .timebar {
    background-color: transparent;
    flex-grow: 1;
    position: relative;
    height: 40px;
    cursor: pointer
}

.replay-controls-view .timebar .barbg {
    position: absolute;
    height: 6px;
    width: 100%;
    margin: auto;
    background-color: #888;
    top: 0;
    bottom: 0
}

.replay-controls-view .timebar .bar {
    background-color: #2167a1;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0
}

.replay-controls-view .timebar .timetooltip {
    position: absolute;
    width: 60px;
    background-color: black;
    top: -20px;
    text-align: center;
    line-height: 30px;
    display: none
}

.replay-controls-view .timebar:hover .timetooltip {
    display: block
}

html {
    overflow: hidden
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: white;
    background-color: #73885c;
    background: #939e7f url("images/bg.png") fixed;
}

a {
    color: white
}

#header {
    height: 40px;
    line-height: 40px;
    background-color: black;
    padding-left: 20px
}

#header div {
    font-size: 16px;
    font-size: 16px;
    display: inline
}

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
}

.replay-controls-view .analiza {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    font-weight: bold;
    text-align: center;
    color: white;
    font-size: 30px;
    background: #939e7f url("images/bg.png") fixed;
    z-index: 200;
}

.replay-controls-view .analiza>div {
    margin-top: 200px;
    display: inline-block;
    padding: 30px;
    border-radius: 5px;
    background: #1A2125;
}

.replay-controls-view .analiza>div .licznik {
    margin-top: 10px;
    color: grey;
    font-size: 15px;
}

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 .2s linear, opacity .2s linear;
    -webkit-transition: background-color .2s linear, opacity .2s linear;
    height: 15px;
    bottom: 0px;
    position: absolute
}

.ps__rail-y {
    display: none;
    opacity: 0;
    transition: background-color .2s linear, opacity .2s linear;
    -webkit-transition: background-color .2s linear, opacity .2s linear;
    width: 15px;
    right: 0;
    position: absolute
}

.ps--active-x>.ps__rail-x,
.ps--active-y>.ps__rail-y {
    display: block;
    background-color: transparent
}

.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: transparent;
    opacity: 1
}

.ps__thumb-x {
    background-color: #aaa;
    border-radius: 6px;
    transition: background-color .2s linear, height .2s ease-in-out;
    -webkit-transition: background-color .2s linear, height .2s ease-in-out;
    height: 6px;
    bottom: 2px;
    position: absolute
}

.ps__thumb-y {
    background-color: #445661;
    border-radius: 6px;
    transition: background-color .2s linear, width .2s ease-in-out;
    -webkit-transition: background-color .2s linear, width .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
    }
}

.connecting-view button,
.disconnected-view button,
.dialog button,
.room-view>.container button,
.dialog .file-btn label,
.room-view>.container .file-btn label,
.chatbox-view>.input button,
.game-view>.bottom-section button,
.room-view button,
.room-view button[data-hook="start-btn"],
.room-view button[data-hook="stop-btn"],
.replay-controls-view button {
    position: relative;
    padding: 5px 15px;
    border: 0;
    border-radius: 5px;
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%
}

.connecting-view button:focus,
.disconnected-view button:focus,
.dialog button:focus,
.dialog .file-btn label:focus,
.room-view>.container .file-btn label:focus,
.chatbox-view>.input button:focus,
.game-view>.bottom-section button:focus,
.room-view button:focus,
.replay-controls-view button:focus {
    outline: none
}

.connecting-view button .tooltip,
.disconnected-view button .tooltip,
.dialog button .tooltip,
.dialog .file-btn label .tooltip,
.room-view>.container .file-btn label .tooltip,
.chatbox-view>.input button .tooltip,
.game-view>.bottom-section button .tooltip,
.room-view button .tooltip,
.replay-controls-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
}

.connecting-view button:hover .tooltip,
.disconnected-view button:hover .tooltip,
.dialog button:hover .tooltip,
.dialog .file-btn label:hover .tooltip,
.room-view>.container .file-btn label:hover .tooltip,
.chatbox-view>.input button:hover .tooltip,
.game-view>.bottom-section button:hover .tooltip,
.room-view button:hover .tooltip,
.replay-controls-view button:hover .tooltip {
    visibility: visible;
    opacity: 1;
    transition: opacity .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,
.room-view>.container input {
    color: white;
    background-color: #111619;
    border: none;
    border-radius: 5px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #111619
}

.dialog input:focus,
.room-view>.container input:focus {
    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,
.room-view>.container input {
    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: white;
    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 {
    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: white;
    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: -1.0s
}

.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-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-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-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-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 {
    display: flex;
    flex-direction: column;
    height: 150px;
    width: 800px;
    min-width: 300px;
    padding: 5px
}

@media (max-height: 700px) {
    .chatbox-view {
        height: 130px
    }
}

.chatbox-view>:not(:first-child) {
    margin-top: 5px
}

.chatbox-view>.log {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
    line-height: 1.3
}

.chatbox-view>.log>p:not(:last-child) {
    margin-bottom: 3px
}

.chatbox-view>.log p {
    overflow: hidden
}

.chatbox-view>.log p.notice {
    color: #8ed2ab
}

.chatbox-view>.input {
    display: flex;
    flex-direction: row;
    flex-shrink: 0
}

.chatbox-view>.input input[type="text"] {
    color: white;
    background-color: #111619;
    border: none;
    border-radius: 5px;
    padding: 0 10px;
    margin-right: 4px;
    flex-grow: 1;
    align-self: stretch;
    box-sizing: border-box
}

.chatbox-view>.input input[type="text"]:focus {
    border: 1px solid #244967;
    padding: 0 7px
}

.chatbox-view>.input button {
    background-color: #244967
}

.chatbox-view>.input button:hover {
    background-color: #2f5e85
}

.chatbox-view>.input button:active {
    background-color: #193449
}

.chatbox-view>.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: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch
}

.game-view>.top-section {
    position: relative;
    flex-grow: 1;
    min-height: 0
}

.game-view>.bottom-section {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    background-color: #1A2125
}

.game-view>.bottom-section>.buttons {
    padding: 6px;
    white-space: nowrap;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    background-image: url(/images/thehax-replay-logo.png);
    background-repeat: no-repeat;
    background-position: 50% 95%;
    background-size: 90%;
}

.buttons {}

.game-view>.bottom-section>.buttons>:not(:last-child) {
    margin-bottom: 6px
}

.game-view>.bottom-section button {
    background-color: #244967
}

.game-view>.bottom-section button:hover {
    background-color: #2f5e85
}

.game-view>.bottom-section button:active {
    background-color: #193449
}

.game-view>.bottom-section button:disabled {
    background-color: #3e3e3e
}

.game-view>.bottom-section .stats-view {
    margin-right: 0;
    margin-left: auto;
}

.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)
}

.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 {
    padding: 6px;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
}

.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: visible;
    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: white
    }

    to {
        color: #ff8080
    }
}

@keyframes overtime-appear {
    from {
        opacity: 0;
        transform: translateY(-25px)
    }
}

.game-state-view {
    position: absolute;
    width: 100%;
    height: 100%
}

.game-state-view .bar-container {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1
}

.game-state-view .bar {
    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.restricted {
    background-color: #2e343c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.game-state-view.restricted .bar-container {
    position: relative;
    height: 35px
}

.game-state-view.restricted .bar {
    background: none
}

.game-state-view.restricted canvas {
    width: 100%;
    height: calc(100% - 35px);
    max-width: 840px;
    max-height: 410px
}

.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: "\25b6"
}

.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: "\25c0"
}

.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>[data-hook=ok],
.room-view.room-password-view>.container>[data-hook=ok] {
    align-self: center;
    width: 100px
}

.roomlist-view {
    position: absolute;
    width: 100%;
    height: calc(100% - 10px);
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center
}

.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: 300px;
    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
}

.pick-stadium-view .list>.elem:hover {
    background-color: #2f3c43
}

.pick-stadium-view .list>.elem.selected {
    background-color: #3a4952
}

.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 {
    min-width: 400px;
    height: 100%;
    max-height: 400px
}

.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 .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 [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: black;
    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"],
.replay-controls-view [data-hook="koniec"] {
    text-align: center;
    min-width: 50px
}

.replay-controls-view .timebar {
    background-color: transparent;
    flex-grow: 1;
    position: relative;
    height: 40px;
    cursor: pointer
}

.replay-controls-view .timebar .barbg {
    position: absolute;
    height: 6px;
    width: 100%;
    margin: auto;
    background-color: #888;
    top: 0;
    bottom: 0
}

.replay-controls-view .timebar .bar {
    background-color: #2167a1;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0
}

.replay-controls-view .timebar .timetooltip {
    position: absolute;
    width: 60px;
    background-color: black;
    top: -20px;
    text-align: center;
    line-height: 30px;
    display: none
}

.replay-controls-view .timebar:hover .timetooltip {
    display: block
}

html {
    overflow: hidden
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: white;
    background-color: #73885c;
    background: #939e7f url("images/bg.png") fixed;
}

a {
    color: white
}

#header {
    height: 40px;
    line-height: 40px;
    background-color: black;
    padding-left: 20px
}

#header div {
    font-size: 16px;
    font-size: 16px;
    display: inline
}

.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: #e56e56
}

.replay-controls-view .timebar .marker.k2 {
    background-color: #5689e5
}