html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

html {
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%
}

body {
    margin: 0;
    line-height: 1
}

form {
    margin: 0
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0
}

button,input,select,textarea {
    font-size: 100%;
    font-family: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    *vertical-align: middle
}

button,input {
    line-height: normal;
    overflow: visible
}

textarea {
    overflow: auto;
    vertical-align: top;
    padding: 0
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

:focus {
    outline: none
}

input[type=checkbox],input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

button::-moz-focus-inner,input::-moz-focus-inner {
    border: 0;
    padding: 0
}

figure {
    margin: 0
}

img {
    -ms-interpolation-mode: bicubic;
    display: block
}

ol,ul {
    margin: 0;
    padding: 0
}

dl,dd {
    margin: 0
}

li {
    display: block;
    padding: 0;
    margin: 0;
    list-style: none
}

h1,h2,h3,h4,h5,h6 {
    font-weight: inherit;
    line-height: inherit;
    font-size: inherit;
    margin: 0
}

p {
    margin: 0
}

blockquote {
    margin: 0
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    font-family: inherit;
    font-size: inherit
}

cite {
    font-style: normal
}

ins {
    text-decoration: none
}

dfn {
    font-style: inherit
}

del {
    text-decoration: none
}

mark {
    background: none;
    color: inherit
}

address {
    font-style: normal
}

tt,code,kbd,samp {
    font-family: inherit;
    font-size: inherit
}

b,strong {
    font-weight: inherit
}

em {
    font-style: inherit
}

small {
    font-size: 100%
}

q {
    quotes: none
}

q:before,q:after {
    content: "";
    content: none
}

a {
    font-weight: inherit;
    color: inherit;
    text-decoration: none
}

a:hover,a:active {
    outline: none
}

a img {
    border: none
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

th {
    font-weight: inherit
}

.ps {
    overflow: hidden !important;
    overflow-anchor: none;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto
}

.ps__rail-x {
    display: none;
    opacity: 0;
    transition: background-color .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: rgba(0,0,0,0)
}

.ps:hover>.ps__rail-x,.ps:hover>.ps__rail-y,.ps--focus>.ps__rail-x,.ps--focus>.ps__rail-y,.ps--scrolling-x>.ps__rail-x,.ps--scrolling-y>.ps__rail-y {
    opacity: 1
}

.ps__rail-x:hover,.ps__rail-y:hover,.ps__rail-x:focus,.ps__rail-y:focus {
    background-color: rgba(0,0,0,0);
    opacity: 1
}

.ps__thumb-x {
    background-color: #aaa;
    border-radius: 6px;
    transition: background-color .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
    }
}

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

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

.replay-controls-view button .tooltip,.room-view button .tooltip,.game-view>.buttons button .tooltip,.chatbox-view-contents>.input button .tooltip,.dialog .file-btn label .tooltip,.room-view>.container .file-btn label .tooltip,.dialog button .tooltip,.disconnected-view button .tooltip,.connecting-view button .tooltip {
    visibility: hidden;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    text-align: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 500;
    position: absolute;
    z-index: 1;
    bottom: 130%;
    right: 0%;
    opacity: 0;
    transition: opacity 0s
}

.replay-controls-view button:hover .tooltip,.room-view button:hover .tooltip,.game-view>.buttons button:hover .tooltip,.chatbox-view-contents>.input button:hover .tooltip,.dialog .file-btn label:hover .tooltip,.room-view>.container .file-btn label:hover .tooltip,.dialog button:hover .tooltip,.disconnected-view button:hover .tooltip,.connecting-view button:hover .tooltip {
    visibility: visible;
    opacity: 1;
    transition: opacity .5s;
    transition-delay: 1s
}

.connecting-view button {
    background-color: #db2a2a
}

.connecting-view button:hover {
    background-color: #e14d4d
}

.connecting-view button:active {
    background-color: #bc2020
}

.connecting-view button:disabled {
    background-color: #3e3e3e
}

.disconnected-view button {
    background-color: #44d
}

.disconnected-view button:hover {
    background-color: #6767e3
}

.disconnected-view button:active {
    background-color: #2626d2
}

.disconnected-view button:disabled {
    background-color: #3e3e3e
}

.dialog input:not([type=range]),.room-view>.container input:not([type=range]) {
    color: #fff;
    background-color: #111619;
    border: none;
    border-radius: 5px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #111619
}

.dialog input:focus:not([type=range]),.room-view>.container input:focus:not([type=range]) {
    border-color: #244967
}

.dialog,.room-view>.container {
    background-color: #1a2125;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 5px
}

.dialog>h1,.room-view>.container>h1 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px !important;
    padding-top: 6px;
    padding-bottom: 5px;
    border-bottom: 3px;
    border-bottom-color: #c13535;
    border-bottom-style: solid
}

.dialog>:not(:last-child),.room-view>.container>:not(:last-child) {
    margin-bottom: 6px
}

.dialog .row,.room-view>.container .row {
    display: flex
}

.dialog .row>:not(:last-child),.room-view>.container .row>:not(:last-child) {
    margin-right: 6px
}

.dialog .row>*,.room-view>.container .row>* {
    flex: 1
}

.dialog button,.room-view>.container button {
    background-color: #244967
}

.dialog button:hover,.room-view>.container button:hover {
    background-color: #2f5e85
}

.dialog button:active,.room-view>.container button:active {
    background-color: #193449
}

.dialog button:disabled,.room-view>.container button:disabled {
    background-color: #3e3e3e
}

.dialog input:not([type=range]),.room-view>.container input:not([type=range]) {
    min-width: 10px
}

.dialog .label-input,.room-view>.container .label-input {
    display: flex;
    background-color: #244967;
    align-items: baseline;
    border-radius: 5px;
    padding: 3px 3px 3px 5px
}

.dialog .label-input>*,.room-view>.container .label-input>* {
    flex: 1
}

.dialog .label-input label,.room-view>.container .label-input label {
    flex: 0 0 auto;
    margin-right: 10px
}

.dialog .file-btn input[type=file],.room-view>.container .file-btn input[type=file] {
    display: none
}

.dialog .file-btn label,.room-view>.container .file-btn label {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    background-color: #244967;
    display: inline-block;
    cursor: pointer
}

.dialog .file-btn label:hover,.room-view>.container .file-btn label:hover {
    background-color: #2f5e85
}

.dialog .file-btn label:active,.room-view>.container .file-btn label:active {
    background-color: #193449
}

.dialog .file-btn label:disabled,.room-view>.container .file-btn label:disabled {
    background-color: #3e3e3e
}

.dialog select,.room-view>.container select {
    border: 1px solid #111619;
    background-color: #111619;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #fff;
    padding: 0px 5px
}

.dialog select:hover:not(:disabled),.room-view>.container select:hover:not(:disabled) {
    border-color: #244967
}

.basic-dialog .buttons {
    margin-top: 10px;
    display: flex
}

.basic-dialog .buttons>:not(:last-child) {
    margin-right: 6px
}

.basic-dialog .buttons>* {
    flex: 1;
    white-space: nowrap
}

.basic-dialog p {
    line-height: 1.4em
}

.simple-dialog-view {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center
}

.simple-dialog-view>.dialog,.room-view.simple-dialog-view>.container {
    min-width: 300px
}

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

.spinner {
    margin: 20px auto;
    width: 50px;
    height: 40px;
    display: flex;
    justify-content: center
}

.spinner>div {
    background-color: #fff;
    height: 100%;
    width: 6px;
    margin: 2px 2px;
    animation: sk-stretchdelay 1.2s infinite ease-in-out
}

.spinner .rect2 {
    animation-delay: -1.1s
}

.spinner .rect3 {
    animation-delay: -1s
}

.spinner .rect4 {
    animation-delay: -0.9s
}

.spinner .rect5 {
    animation-delay: -0.8s
}

@keyframes sk-stretchdelay {
    0%,40%,100% {
        transform: scaleY(0.4)
    }

    20% {
        transform: scaleY(1)
    }
}

.flagico {
    width: 16px;
    height: 11px;
    background-image: url("images/flags.png");
    display: inline-block;
    background-position: -80px -198px
}

.f-id {
    background-position: 0px 0px
}

.f-qa {
    background-position: -16px 0px
}

.f-ge {
    background-position: -32px 0px
}

.f-al {
    background-position: -48px 0px
}

.f-ao {
    background-position: -64px 0px
}

.f-eng {
    background-position: -80px 0px
}

.f-gi {
    background-position: -96px 0px
}

.f-mt {
    background-position: -112px 0px
}

.f-tn {
    background-position: -128px 0px
}

.f-bh {
    background-position: -144px 0px
}

.f-tr {
    background-position: -160px 0px
}

.f-ye {
    background-position: -176px 0px
}

.f-pl {
    background-position: -192px 0px
}

.f-lv {
    background-position: 0px -11px
}

.f-pe {
    background-position: -16px -11px
}

.f-jp {
    background-position: -32px -11px
}

.f-tt {
    background-position: -48px -11px
}

.f-pg {
    background-position: -64px -11px
}

.f-gl {
    background-position: -80px -11px
}

.f-mc {
    background-position: -96px -11px
}

.f-ch {
    background-position: -112px -11px
}

.f-ma {
    background-position: -128px -11px
}

.f-at {
    background-position: -144px -11px
}

.f-cn {
    background-position: -160px -11px
}

.f-kg {
    background-position: -176px -11px
}

.f-vn {
    background-position: -192px -11px
}

.f-dk {
    background-position: 0px -22px
}

.f-sg {
    background-position: -16px -22px
}

.f-to {
    background-position: -32px -22px
}

.f-tl {
    background-position: -48px -22px
}

.f-cy {
    background-position: -64px -22px
}

.f-sy {
    background-position: -80px -22px
}

.f-eg {
    background-position: -96px -22px
}

.f-mk {
    background-position: -112px -22px
}

.f-hk {
    background-position: -128px -22px
}

.f-lb {
    background-position: -144px -22px
}

.f-pf {
    background-position: -160px -22px
}

.f-wf {
    background-position: -176px -22px
}

.f-be {
    background-position: -192px -22px
}

.f-no {
    background-position: 0px -33px
}

.f-bv {
    background-position: -16px -33px
}

.f-sj {
    background-position: -32px -33px
}

.f-ug {
    background-position: -48px -33px
}

.f-es {
    background-position: -64px -33px
}

.f-tj {
    background-position: -80px -33px
}

.f-ae {
    background-position: -96px -33px
}

.f-lr {
    background-position: -112px -33px
}

.f-sd {
    background-position: -128px -33px
}

.f-it {
    background-position: -144px -33px
}

.f-de {
    background-position: -176px -33px
}

.f-mv {
    background-position: -192px -33px
}

.f-ag {
    background-position: 0px -44px
}

.f-om {
    background-position: -16px -44px
}

.f-bt {
    background-position: -32px -44px
}

.f-jo {
    background-position: -48px -44px
}

.f-hu {
    background-position: -64px -44px
}

.f-va {
    background-position: -80px -44px
}

.f-pt {
    background-position: -96px -44px
}

.f-gp {
    background-position: -112px -44px
}

.f-cl {
    background-position: -128px -44px
}

.f-kw {
    background-position: -144px -44px
}

.f-ps {
    background-position: -160px -44px
}

.f-mg {
    background-position: -176px -44px
}

.f-ci {
    background-position: -192px -44px
}

.f-bn {
    background-position: 0px -55px
}

.f-ie {
    background-position: -16px -55px
}

.f-af {
    background-position: -32px -55px
}

.f-eh {
    background-position: -48px -55px
}

.f-gd {
    background-position: -64px -55px
}

.f-vu {
    background-position: -80px -55px
}

.f-ne {
    background-position: -96px -55px
}

.f-lt {
    background-position: -112px -55px
}

.f-mw {
    background-position: -128px -55px
}

.f-by {
    background-position: -144px -55px
}

.f-bo {
    background-position: -160px -55px
}

.f-kn {
    background-position: -176px -55px
}

.f-bg {
    background-position: -192px -55px
}

.f-cg {
    background-position: 0px -66px
}

.f-ml {
    background-position: -16px -66px
}

.f-sn {
    background-position: -32px -66px
}

.f-ir {
    background-position: -48px -66px
}

.f-yt {
    background-position: -64px -66px
}

.f-zw {
    background-position: -80px -66px
}

.f-bf {
    background-position: -96px -66px
}

.f-fo {
    background-position: -112px -66px
}

.f-cm {
    background-position: -128px -66px
}

.f-jm {
    background-position: -144px -66px
}

.f-cz {
    background-position: -160px -66px
}

.f-gh {
    background-position: -176px -66px
}

.f-dz {
    background-position: -192px -66px
}

.f-bj {
    background-position: 0px -77px
}

.f-iq {
    background-position: -16px -77px
}

.f-wls {
    background-position: -32px -77px
}

.f-my {
    background-position: -48px -77px
}

.f-gn {
    background-position: -64px -77px
}

.f-tg {
    background-position: -80px -77px
}

.f-gw {
    background-position: -96px -77px
}

.f-fr {
    background-position: -112px -77px
}

.f-gf {
    background-position: -128px -77px
}

.f-re {
    background-position: -144px -77px
}

.f-an {
    background-position: -160px -77px
}

.f-um {
    background-position: -176px -77px
}

.f-tv {
    background-position: -192px -77px
}

.f-il {
    background-position: 0px -88px
}

.f-bd {
    background-position: -16px -88px
}

.f-tw {
    background-position: -32px -88px
}

.f-am {
    background-position: -48px -88px
}

.f-st {
    background-position: -64px -88px
}

.f-ws {
    background-position: -80px -88px
}

.f-lu {
    background-position: -96px -88px
}

.f-bi {
    background-position: -112px -88px
}

.f-pa {
    background-position: -128px -88px
}

.f-ec {
    background-position: -144px -88px
}

.f-np {
    background-position: -160px -88px
}

.f-vi {
    background-position: -176px -88px
}

.f-rs {
    background-position: -192px -88px
}

.f-dm {
    background-position: 0px -99px
}

.f-gq {
    background-position: -16px -99px
}

.f-us {
    background-position: -32px -99px
}

.f-mz {
    background-position: -48px -99px
}

.f-bm {
    background-position: -64px -99px
}

.f-gy {
    background-position: -80px -99px
}

.f-ee {
    background-position: -96px -99px
}

.f-nu {
    background-position: -112px -99px
}

.f-mm {
    background-position: -128px -99px
}

.f-zm {
    background-position: -144px -99px
}

.f-ng {
    background-position: -160px -99px
}

.f-ro {
    background-position: -176px -99px
}

.f-hr {
    background-position: -192px -99px
}

.f-md {
    background-position: 0px -110px
}

.f-et {
    background-position: -16px -110px
}

.f-mn {
    background-position: -32px -110px
}

.f-tm {
    background-position: -48px -110px
}

.f-sc {
    background-position: -64px -110px
}

.f-cs {
    background-position: -80px -110px
}

.f-pr {
    background-position: -96px -110px
}

.f-ad {
    background-position: -112px -110px
}

.f-kr {
    background-position: -128px -110px
}

.f-nf {
    background-position: -144px -110px
}

.f-ls {
    background-position: -160px -110px
}

.f-km {
    background-position: -176px -110px
}

.f-sz {
    background-position: -192px -110px
}

.f-py {
    background-position: 0px -121px
}

.f-tz {
    background-position: -16px -121px
}

.f-in {
    background-position: -32px -121px
}

.f-sa {
    background-position: -48px -121px
}

.f-pk {
    background-position: -64px -121px
}

.f-cf {
    background-position: -80px -121px
}

.f-gm {
    background-position: -96px -121px
}

.f-ki {
    background-position: -112px -121px
}

.f-do {
    background-position: -128px -121px
}

.f-lk {
    background-position: -144px -121px
}

.f-cc {
    background-position: -160px -121px
}

.f-co {
    background-position: -176px -121px
}

.f-th {
    background-position: -192px -121px
}

.f-bs {
    background-position: 0px -132px
}

.f-mr {
    background-position: -16px -132px
}

.f-bw {
    background-position: -32px -132px
}

.f-br {
    background-position: -48px -132px
}

.f-mo {
    background-position: -64px -132px
}

.f-li {
    background-position: -80px -132px
}

.f-ve {
    background-position: -96px -132px
}

.f-kp {
    background-position: -112px -132px
}

.f-sr {
    background-position: -128px -132px
}

.f-cr {
    background-position: -144px -132px
}

.f-ly {
    background-position: -160px -132px
}

.f-vc {
    background-position: -176px -132px
}

.f-ph {
    background-position: -192px -132px
}

.f-ke {
    background-position: 0px -143px
}

.f-td {
    background-position: -16px -143px
}

.f-ht {
    background-position: -32px -143px
}

.f-az {
    background-position: -48px -143px
}

.f-mu {
    background-position: -64px -143px
}

.f-er {
    background-position: -80px -143px
}

.f-si {
    background-position: -96px -143px
}

.f-kh {
    background-position: -112px -143px
}

.f-is {
    background-position: -128px -143px
}

.f-mx {
    background-position: -144px -143px
}

.f-rw {
    background-position: -160px -143px
}

.f-za {
    background-position: -176px -143px
}

.f-ua {
    background-position: -192px -143px
}

.f-as {
    background-position: 0px -154px
}

.f-ax {
    background-position: -16px -154px
}

.f-dj {
    background-position: -32px -154px
}

.f-ga {
    background-position: -48px -154px
}

.f-sl {
    background-position: -64px -154px
}

.f-sm {
    background-position: -80px -154px
}

.f-sk {
    background-position: -96px -154px
}

.f-se {
    background-position: -112px -154px
}

.f-sb {
    background-position: -128px -154px
}

.f-ca {
    background-position: -144px -154px
}

.f-ru {
    background-position: -160px -154px
}

.f-gb {
    background-position: -176px -154px
}

.f-me {
    background-position: -192px -154px
}

.f-pm {
    background-position: 0px -165px
}

.f-sct {
    background-position: -16px -165px
}

.f-la {
    background-position: -32px -165px
}

.f-ar {
    background-position: -48px -165px
}

.f-na {
    background-position: -64px -165px
}

.f-cv {
    background-position: -80px -165px
}

.f-nc {
    background-position: -96px -165px
}

.f-cu {
    background-position: -112px -165px
}

.f-uz {
    background-position: -128px -165px
}

.f-bb {
    background-position: -144px -165px
}

.f-bz {
    background-position: -160px -165px
}

.f-ni {
    background-position: -176px -165px
}

.f-gu {
    background-position: -192px -165px
}

.f-fi {
    background-position: 0px -176px
}

.f-kz {
    background-position: -16px -176px
}

.f-gt {
    background-position: -32px -176px
}

.f-cx {
    background-position: -48px -176px
}

.f-aw {
    background-position: -64px -176px
}

.f-cd {
    background-position: -80px -176px
}

.f-nl {
    background-position: -96px -176px
}

.f-ba {
    background-position: -112px -176px
}

.f-sv {
    background-position: -128px -176px
}

.f-uy {
    background-position: -144px -176px
}

.f-pw {
    background-position: -160px -176px
}

.f-tk {
    background-position: -176px -176px
}

.f-mq {
    background-position: -192px -176px
}

.f-nr {
    background-position: 0px -187px
}

.f-mp {
    background-position: -16px -187px
}

.f-hn {
    background-position: -32px -187px
}

.f-mh {
    background-position: -48px -187px
}

.f-tf {
    background-position: -64px -187px
}

.f-gs {
    background-position: -80px -187px
}

.f-lc {
    background-position: -96px -187px
}

.f-gr {
    background-position: -112px -187px
}

.f-fm {
    background-position: -128px -187px
}

.f-fam {
    background-position: -144px -187px
}

.f-ck {
    background-position: -160px -187px
}

.f-ky {
    background-position: -176px -187px
}

.f-io {
    background-position: -192px -187px
}

.f-so {
    background-position: 0px -198px
}

.f-pn {
    background-position: -16px -198px
}

.f-tc {
    background-position: -32px -198px
}

.f-sh {
    background-position: -48px -198px
}

.f-fj {
    background-position: -64px -198px
}

.f-ai {
    background-position: -96px -198px
}

.f-vg {
    background-position: -112px -198px
}

.f-fk {
    background-position: -128px -198px
}

.f-ms {
    background-position: -144px -198px
}

.f-hm {
    background-position: -160px -198px
}

.f-au {
    background-position: -176px -198px
}

.f-nz {
    background-position: -192px -198px
}

.chatbox-view {
    box-sizing: border-box;
    height: 150px;
    min-height: 0;
    width: 800px;
    min-width: 300px;
    position: relative;
    transition: height .2s;
    margin: 0 5px 0 5px
}

.chatbox-view.dragging {
    transition: none
}

.chatbox-view-contents {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 5px 10px 5px 10px;
    background-color: rgba(26, 33, 37, var(--chat-opacity, 1));
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}

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

.chatbox-view-contents>.drag {
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    border-radius: 2.5px;
    cursor: n-resize;
    height: 5px
}

.chatbox-view-contents>.drag:hover::before {
    background-color: rgba(255,255,255,.5)
}

.chatbox-view-contents>.drag::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    bottom: -5px
}

.chatbox-view-contents>.drag::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 10px);
    width: 20px;
    bottom: 0;
    border-radius: 10px;
    background-color: rgba(255,255,255,.2)
}

.chatbox-view-contents>.log {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
    overflow-y: scroll;
    display: flex;
    flex-direction: column-reverse;
    line-height: 1.3
}

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

.chatbox-view-contents>.log .log-contents p {
    overflow: hidden;
    flex-shrink: 0
}

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

.chatbox-view-contents>.log .log-contents p.highlight {
    font-weight: bold
}

.chatbox-view-contents>.log .log-contents p.announcement {
    border-left: 3px solid #c13535;
    padding-left: 5px;
    min-height: 12px;
    white-space: pre-wrap
}

.chatbox-view-contents>.autocompletebox {
    position: absolute;
    background-color: #fff;
    line-height: 25px;
    color: #000;
    bottom: 30px;
    left: 5px;
    border: solid #000 1px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 200px
}

.chatbox-view-contents>.autocompletebox>div {
    padding: 0px 30px 0px 5px;
    white-space: nowrap
}

.chatbox-view-contents>.autocompletebox>div:hover {
    background-color: #d1e2fe
}

.chatbox-view-contents>.autocompletebox>div.selected {
    background-color: #b3c6ff
}

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

.chatbox-view-contents>.input input[type=text] {
    color: #fff;
    background-color: #111619;
    border: none;
    border-radius: 5px;
    padding: 0 8px;
    flex-grow: 1;
    align-self: stretch;
    box-sizing: border-box
}

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

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

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

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

.chatbox-view-contents>.input button:disabled {
    background-color: #3e3e3e
}

.replayer .chatbox-view {
    height: 130px
}

.replayer .chatbox-view>.input {
    display: none
}

.connecting-view {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.connecting-view .dialog,.connecting-view .room-view>.container {
    height: 300px;
    width: 300px
}

.connecting-view button {
    width: auto;
    align-self: flex-end
}

.connecting-view-log {
    flex: 1
}

.connecting-view-log p {
    margin: 3px 0
}

.disconnected-view {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.disconnected-view .dialog,.disconnected-view .room-view>.container {
    width: 300px
}

.disconnected-view .dialog>p,.disconnected-view .room-view>.container>p {
    margin-bottom: 20px
}

.disconnected-view button {
    width: auto;
    align-self: flex-end
}

.game-view {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch
}

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

.game-view.chat-bg-full .bottom-section {
    align-items: flex-start;
    background-color: rgba(26, 33, 37, var(--chat-opacity, 1))
}

.game-view.chat-bg-full .bottom-section .chatbox-view {
    align-self: flex-end
}

.game-view.chat-bg-full .bottom-section .chatbox-view-contents {
    background: none;
    padding: 0 0 5px 0
}

.game-view.chat-bg-full .bottom-section .stats-view-container {
    height: 0
}

.game-view.chat-bg-full .bottom-section .stats-view {
    background: none
}

.game-view>.bottom-section {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end
}

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

.game-view>.bottom-section .bottom-spacer {
    margin-left: auto;
    width: 116px;
    flex-shrink: 0
}

.game-view>.buttons {
    white-space: nowrap;
    background-color: #1a2125;
    border-bottom-left-radius: 5px;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    height: 35px;
    padding: 4px 6px 4px 6px;
    position: absolute;
    top: 0;
    right: 0
}

.game-view>.buttons button {
    background-color: #244967;
    padding-left: 8px;
    padding-right: 8px
}

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

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

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

.game-view>.buttons>:not(:last-child) {
    margin-right: 4px
}

.game-view.replayer>.bottom-section {
    padding-bottom: 40px
}

.game-view>[data-hook=popups] {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(115,136,92,.5)
}

.sound-button-container {
    position: relative;
    display: flex
}

.sound-button-container .sound-slider {
    display: none;
    position: absolute;
    background-color: #1a2125;
    top: 100%;
    left: 50%;
    transform: translate(-50%);
    padding: 10px;
    border-radius: 5px
}

.sound-button-container .sound-slider:hover .sound-slider-bar {
    background-color: #f7f9f9
}

.sound-button-container:hover .sound-slider,.sound-button-container.dragging .sound-slider {
    display: block
}

.sound-button-container .sound-slider-bar-bg {
    position: relative;
    background-color: #59717f;
    border-radius: 10px;
    overflow: hidden;
    width: 10px;
    height: 100px;
    margin: 0 auto
}

.sound-button-container .sound-slider-bar {
    background-color: #cad4da;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 50%
}

.loader-view {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.loader-view .dialog,.loader-view .room-view>.container {
    width: 300px
}

.stats-view {
    background-color: rgba(26,33,37,.3);
    text-shadow: 1px 1px 1px #000,0px 1px 1px #000;
    padding: 4px;
    margin: 4px;
    white-space: nowrap;
    width: 100px;
    line-height: 1.5em
}

.stats-view .graph {
    width: 100%
}

.stats-view .graph canvas {
    width: 100%;
    height: 64px;
    image-rendering: optimizeSpeed;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor
}

.choose-nickname-view {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center
}

.choose-nickname-view>img {
    flex: 0 0 auto;
    position: relative;
    left: 20px;
    margin-bottom: 20px
}

.choose-nickname-view>.dialog,.room-view.choose-nickname-view>.container {
    width: 300px
}

.choose-nickname-view>.dialog>[data-hook=ok],.room-view.choose-nickname-view>.container>[data-hook=ok] {
    align-self: center;
    width: 100px
}

.game-timer-view {
    display: flex;
    align-items: center
}

.game-timer-view>.overtime {
    margin-right: 20px;
    visibility: hidden
}

.game-timer-view>.overtime.on {
    visibility: inherit;
    animation: .4s linear overtime-appear
}

.game-timer-view>.digit {
    width: 15px;
    text-align: center
}

.game-timer-view.time-warn {
    animation: .3s infinite alternate linear time-warn
}

@keyframes time-warn {
    from {
        color: #fff
    }

    to {
        color: #ff8080
    }
}

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

.game-state-view {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1
}

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

.game-state-view .bar {
    box-sizing: border-box;
    height: 35px;
    display: flex;
    justify-content: center;
    background-color: #1a2125;
    padding: 5px;
    border-radius: 0 0 5px 5px;
    font: 900 20px "Arial Black","Arial Bold",Gadget,sans-serif
}

.game-state-view .bar>.scoreboard {
    display: flex;
    align-items: center;
    margin-right: 100px
}

.game-state-view .bar>.scoreboard .score {
    width: 35px;
    overflow: hidden;
    text-align: center
}

.game-state-view .bar>.scoreboard .teamicon {
    width: 23px;
    height: 23px;
    border-radius: 5px
}

.game-state-view .bar>.scoreboard .teamicon.blue {
    background-color: #5689e5
}

.game-state-view .bar>.scoreboard .teamicon.red {
    background-color: #e56e56
}

.game-state-view canvas {
    width: 100%;
    height: 100%;
    image-rendering: optimizeSpeed;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor
}

.game-state-view[hidden] {
    display: none !important
}

.game-state-view.restricted {
    background-color: #2e343c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.game-state-view.restricted .bar-container {
    position: relative
}

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

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

.game-state-view .fps-limit-fix {
    animation: fps-limit-fix-a 1s alternate;
    animation-iteration-count: infinite;
    background-color: rgba(0,0,0,0);
    width: 1px;
    height: 1px;
    position: absolute
}

@keyframes fps-limit-fix-a {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

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

.room-view>.container {
    position: relative;
    min-height: 0;
    max-width: 900px;
    max-height: 550px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 30px;
    z-index: 0
}

.room-view>.container>:not(:last-child) {
    margin-bottom: 15px
}

.room-view>.container>.header-btns {
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px
}

.room-view>.container>.header-btns>:not(:last-child) {
    margin-right: 6px
}

.room-view>.container>.header-btns [data-hook=rec-btn] i {
    font-size: 75%;
    color: #888;
    margin-right: 4px
}

.room-view>.container>.header-btns [data-hook=rec-btn].active i {
    color: #d33
}

.room-view>.container>.teams {
    margin-left: -3px;
    margin-right: -3px;
    display: flex;
    flex: 1;
    justify-content: center;
    min-height: 60px
}

.room-view>.container>.teams>* {
    margin-left: 3px;
    margin-right: 3px
}

.room-view>.container>.teams>.tools {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80px
}

.room-view>.container>.teams>.tools>:not(:last-child) {
    margin-bottom: 6px
}

.room-view>.container>.teams>.spacer {
    flex: 1 1 0;
    max-width: 83px;
    margin: 0 0
}

.room-view>.container>.teams .player-list-view {
    min-width: 20px;
    width: 220px;
    display: flex;
    flex-flow: column
}

.room-view>.container>.teams .player-list-view>:not(:last-child) {
    margin-bottom: 6px
}

.room-view>.container>.teams .player-list-view .buttons {
    display: flex;
    justify-content: center;
    flex-flow: row nowrap
}

.room-view>.container>.teams .player-list-view .buttons button[data-hook=join-btn] {
    min-width: 100px
}

.room-view>.container>.teams .player-list-view .list {
    flex: 1;
    background-color: #111619;
    overflow-x: hidden;
    overflow-y: auto
}

.room-view>.container>.teams .player-list-view.t-red button[data-hook=join-btn] {
    color: #ff8686
}

.room-view>.container>.teams .player-list-view.t-red button[data-hook=reset-btn] {
    margin-left: 6px
}

.room-view>.container>.teams .player-list-view.t-red button[data-hook=reset-btn]:after {
    content: "▶"
}

.room-view>.container>.teams .player-list-view.t-blue .buttons {
    flex-direction: row-reverse
}

.room-view>.container>.teams .player-list-view.t-blue button[data-hook=join-btn] {
    color: #b7b7ff
}

.room-view>.container>.teams .player-list-view.t-blue button[data-hook=reset-btn] {
    margin-right: 6px
}

.room-view>.container>.teams .player-list-view.t-blue button[data-hook=reset-btn]:after {
    content: "◀"
}

.room-view>.container>.settings {
    width: 300px;
    align-self: center;
    white-space: nowrap
}

.room-view>.container>.settings>div {
    line-height: 22px;
    margin-bottom: 5px;
    display: flex;
    width: 100%;
    align-items: center
}

.room-view>.container>.settings>div>.lbl {
    flex: 0 0 90px
}

.room-view>.container>.settings>div>.val {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis
}

.room-view>.container>.settings>div>select {
    width: 100px
}

.room-view>.container>.settings [data-hook=stadium-name].custom {
    color: #ffdb72
}

.room-view>.container>.controls {
    display: flex;
    align-self: center
}

.room-view>.container>.controls>* {
    margin: 0 3px
}

.room-view .player-list-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    line-height: 20px;
    vertical-align: middle;
    padding: 4px;
    margin: 2px;
    font-size: 15px;
    white-space: nowrap
}

.room-view .player-list-item.admin [data-hook=name] {
    color: #ffdb72
}

.room-view .player-list-item .flagico {
    margin-right: 3px;
    position: relative;
    top: 1px
}

.room-view .player-list-item [data-hook=name] {
    min-width: 10px;
    overflow: hidden;
    flex: 1
}

.room-view .player-list-item [data-hook=ping] {
    min-width: 30px;
    text-align: right
}

.room-view .player-list-item:hover {
    background-color: #1b2328
}

.room-view button {
    background-color: #244967
}

.room-view button:hover {
    background-color: #2f5e85
}

.room-view button:active {
    background-color: #193449
}

.room-view button:disabled {
    background-color: #3e3e3e
}

.room-view button[data-hook=start-btn] {
    background-color: #3a9933
}

.room-view button[data-hook=start-btn]:hover {
    background-color: #46b83d
}

.room-view button[data-hook=start-btn]:active {
    background-color: #2e7a29
}

.room-view button[data-hook=start-btn]:disabled {
    background-color: #3e3e3e
}

.room-view button[data-hook=stop-btn] {
    background-color: #c13535
}

.room-view button[data-hook=stop-btn]:hover {
    background-color: #cf5050
}

.room-view button[data-hook=stop-btn]:active {
    background-color: #a12c2c
}

.room-view button[data-hook=stop-btn]:disabled {
    background-color: #3e3e3e
}

.room-view:not(.admin) .admin-only {
    display: none !important
}

.kick-player-view {
    min-width: 300px
}

.replayer .room-view>.container>.header-btns {
    display: none
}

.create-room-view {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.create-room-view>.dialog,.room-view.create-room-view>.container {
    position: relative;
    min-height: 0;
    max-width: 350px;
    width: 100%
}

.create-room-view>.dialog>.label-input>label,.room-view.create-room-view>.container>.label-input>label {
    flex: 0 0 100px
}

.room-password-view {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.room-password-view>.dialog,.room-view.room-password-view>.container {
    width: 300px
}

.room-password-view>.dialog .buttons,.room-view.room-password-view>.container .buttons {
    display: flex
}

.room-password-view>.dialog .buttons>:not(:last-child),.room-view.room-password-view>.container .buttons>:not(:last-child) {
    margin-right: 6px
}

.room-password-view>.dialog .buttons>*,.room-view.room-password-view>.container .buttons>* {
    flex: 1;
    white-space: nowrap
}

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

.roomlist-view>.notice {
    position: relative;
    background-color: #1a2125;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    line-height: 1.5;
    width: 100%;
    max-width: 650px;
    margin-bottom: 6px
}

.roomlist-view>.notice [data-hook=notice-close] {
    position: absolute;
    top: 9px;
    right: 7px;
    cursor: pointer
}

.roomlist-view>.notice [data-hook=notice-contents] {
    margin-right: 20px
}

.roomlist-view>.dialog,.room-view.roomlist-view>.container {
    position: relative;
    min-height: 0;
    max-width: 650px;
    max-height: 700px;
    height: 100%;
    width: 100%
}

.roomlist-view>.dialog [data-hook=count],.room-view.roomlist-view>.container [data-hook=count] {
    position: absolute;
    top: 20px;
    right: 12px
}

.roomlist-view>.dialog>.splitter,.room-view.roomlist-view>.container>.splitter {
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1
}

.roomlist-view>.dialog>.splitter>:not(:last-child),.room-view.roomlist-view>.container>.splitter>:not(:last-child) {
    margin-right: 6px
}

.roomlist-view>.dialog>.splitter>.buttons,.room-view.roomlist-view>.container>.splitter>.buttons {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    align-items: stretch
}

.roomlist-view>.dialog>.splitter>.buttons>:not(:last-child),.room-view.roomlist-view>.container>.splitter>.buttons>:not(:last-child) {
    margin-bottom: 6px
}

.roomlist-view>.dialog>.splitter>.buttons>button,.room-view.roomlist-view>.container>.splitter>.buttons>button {
    padding-left: 10px;
    display: flex
}

.roomlist-view>.dialog>.splitter>.buttons>button>div,.room-view.roomlist-view>.container>.splitter>.buttons>button>div {
    flex: 1
}

.roomlist-view>.dialog>.splitter>.buttons>.file-btn>label,.room-view.roomlist-view>.container>.splitter>.buttons>.file-btn>label {
    padding-left: 10px;
    display: flex
}

.roomlist-view>.dialog>.splitter>.buttons>.file-btn>label>div,.room-view.roomlist-view>.container>.splitter>.buttons>.file-btn>label>div {
    flex: 1
}

.roomlist-view>.dialog>.splitter>.buttons>.spacer,.room-view.roomlist-view>.container>.splitter>.buttons>.spacer {
    flex: 1;
    margin-bottom: 0px
}

.roomlist-view>.dialog>.splitter .filters,.room-view.roomlist-view>.container>.splitter .filters {
    margin-top: 16px
}

.roomlist-view>.dialog>.splitter .filters .bool,.room-view.roomlist-view>.container>.splitter .filters .bool {
    margin-right: 6px;
    padding: 0px 6px;
    background-color: #2f3c43;
    border-radius: 5px
}

.roomlist-view>.dialog>.splitter .filters .bool:hover,.room-view.roomlist-view>.container>.splitter .filters .bool:hover {
    background-color: #3a4952
}

.roomlist-view>.dialog>.splitter>.list,.room-view.roomlist-view>.container>.splitter>.list {
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
    flex: 1;
    display: flex;
    flex-direction: column
}

.roomlist-view>.dialog>.splitter>.list col:nth-child(1),.room-view.roomlist-view>.container>.splitter>.list col:nth-child(1) {
    width: 100%
}

.roomlist-view>.dialog>.splitter>.list col:nth-child(2),.room-view.roomlist-view>.container>.splitter>.list col:nth-child(2) {
    width: 60px
}

.roomlist-view>.dialog>.splitter>.list col:nth-child(3),.room-view.roomlist-view>.container>.splitter>.list col:nth-child(3) {
    width: 40px
}

.roomlist-view>.dialog>.splitter>.list col:nth-child(4),.room-view.roomlist-view>.container>.splitter>.list col:nth-child(4) {
    width: 95px
}

.roomlist-view>.dialog>.splitter>.list td,.room-view.roomlist-view>.container>.splitter>.list td {
    white-space: nowrap;
    overflow: hidden
}

.roomlist-view>.dialog>.splitter>.list td:not(:first-child),.room-view.roomlist-view>.container>.splitter>.list td:not(:first-child) {
    padding-left: 6px
}

.roomlist-view>.dialog>.splitter>.list thead,.room-view.roomlist-view>.container>.splitter>.list thead {
    line-height: 25px
}

.roomlist-view>.dialog>.splitter>.list .separator,.room-view.roomlist-view>.container>.splitter>.list .separator {
    height: 2px;
    width: 100%;
    background-color: gray
}

.roomlist-view>.dialog>.splitter>.list tbody tr,.room-view.roomlist-view>.container>.splitter>.list tbody tr {
    line-height: 22px
}

.roomlist-view>.dialog>.splitter>.list tbody tr.old,.room-view.roomlist-view>.container>.splitter>.list tbody tr.old {
    color: #bfbfbf
}

.roomlist-view>.dialog>.splitter>.list tbody tr:hover,.room-view.roomlist-view>.container>.splitter>.list tbody tr:hover {
    background-color: #2f3c43
}

.roomlist-view>.dialog>.splitter>.list tbody tr.selected,.room-view.roomlist-view>.container>.splitter>.list tbody tr.selected {
    background-color: #3a4952
}

.roomlist-view>.dialog>.splitter>.list tbody .flagico,.room-view.roomlist-view>.container>.splitter>.list tbody .flagico {
    margin-right: 2px
}

.roomlist-view>.dialog>.splitter>.list tbody .flashtag,.room-view.roomlist-view>.container>.splitter>.list tbody .flashtag {
    display: inline-block;
    padding: 0px 4px;
    background-color: #900;
    border-radius: 3px;
    margin-right: 5px;
    line-height: 14px
}

.roomlist-view>.dialog>.splitter>.list table,.room-view.roomlist-view>.container>.splitter>.list table {
    table-layout: fixed
}

.roomlist-view>.dialog>.splitter>.list table.header,.room-view.roomlist-view>.container>.splitter>.list table.header {
    width: calc(100% - 12px);
    margin-right: 15px;
    flex: 0;
    background-color: #1a2125
}

.roomlist-view>.dialog>.splitter>.list .content,.room-view.roomlist-view>.container>.splitter>.list .content {
    position: relative;
    overflow: hidden;
    flex: 1
}

.roomlist-view>.dialog>.splitter>.list .content table,.room-view.roomlist-view>.container>.splitter>.list .content table {
    margin-top: 5px;
    width: calc(100% - 12px)
}

.roomlist-view>.dialog>.splitter>.list .simplebar-scrollbar,.room-view.roomlist-view>.container>.splitter>.list .simplebar-scrollbar {
    background-color: #708b9b
}

.pick-stadium-view {
    width: 400px;
    height: 100%;
    max-height: 400px;
    white-space: nowrap
}

.pick-stadium-view .splitter {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0px
}

.pick-stadium-view .list {
    -webkit-user-select: none;
    user-select: none;
    flex: 1;
    position: relative;
    overflow: hidden
}

.pick-stadium-view .list>.elem {
    line-height: 22px;
    margin-right: 12px;
    padding-left: 6px;
    text-overflow: ellipsis;
    overflow: hidden
}

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

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

.pick-stadium-view .list>.elem.custom {
    color: #ffdb72
}

.pick-stadium-view .buttons {
    display: flex;
    flex-direction: column;
    margin-left: 6px;
    flex: 0 0 100px
}

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

.pick-stadium-view .buttons .spacer {
    flex: 1;
    margin: 0
}

.unsupported-browser-view {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.unsupported-browser-view>.dialog,.room-view.unsupported-browser-view>.container {
    width: 400px
}

.unsupported-browser-view>.dialog>h2,.room-view.unsupported-browser-view>.container>h2 {
    font-size: 1.1em;
    margin-top: 20px
}

.unsupported-browser-view>.dialog p,.room-view.unsupported-browser-view>.container p {
    line-height: 1.4em
}

.unsupported-browser-view>.dialog a,.room-view.unsupported-browser-view>.container a {
    line-height: 16px
}

.unsupported-browser-view>.dialog a img,.room-view.unsupported-browser-view>.container a img {
    display: inline-block;
    position: relative;
    top: 3px;
    margin-right: 6px
}

.unsupported-browser-view>.dialog a:hover,.room-view.unsupported-browser-view>.container a:hover {
    text-decoration: underline
}

.unsupported-browser-view>.dialog button,.room-view.unsupported-browser-view>.container button {
    margin-top: 20px
}

.settings-view {
    width: 400px;
    height: 100%;
    max-height: 500px;
    position: relative;
    display: flex
}

.settings-view [data-hook=close] {
    position: absolute;
    top: 12px;
    right: 10px
}

.settings-view .tabcontents {
    overflow-y: auto;
    flex: 1
}

.settings-view [data-hook=presskey] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,.7);
    font-weight: bold;
    z-index: 1
}

.settings-view [data-hook=presskey].show {
    display: flex
}

.settings-view .tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px
}

.settings-view .tabs>:not(:last-child) {
    margin-right: 2px
}

.settings-view .tabs button:first-child {
    border-radius: 5px 0 0 5px
}

.settings-view .tabs button {
    border-radius: 0px
}

.settings-view .tabs button:last-child {
    border-radius: 0 5px 5px 0
}

.settings-view .tabs .selected {
    background-color: #2f5e85
}

.settings-view .option-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 25px;
    margin-bottom: 6px
}

.settings-view .section {
    display: none;
    flex-direction: column
}

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

.settings-view .section.selected {
    display: flex
}

.settings-view .section .toggle {
    line-height: 25px;
    cursor: default
}

.settings-view .section .toggle i {
    margin-right: 5px
}

.settings-view .section .toggle:hover {
    background-color: #2f3c43
}

.settings-view .section select {
    height: 25px;
    border: none;
    background-color: #244967;
    margin-left: 10px
}

.settings-view .section select:hover {
    background-color: #2f5e85
}

.settings-view .section select option {
    background-color: #1a2125
}

.settings-view .section .loc {
    line-height: 25px
}

.settings-view .section [data-hook=loc-ovr-btn] {
    align-self: left
}

.settings-view .section .inputrow {
    line-height: 25px;
    margin-bottom: 0;
    padding: 6px
}

.settings-view .section .inputrow:nth-child(odd) {
    background-color: #222c31
}

.settings-view .section .inputrow>:first-child {
    display: inline-block;
    min-width: 50px;
    font-weight: bold;
    padding-right: 10px
}

.settings-view .section .inputrow>:not(:first-child) {
    background-color: #2f3c43;
    border-radius: 7px;
    margin: 2px 2px;
    padding: 0px 5px;
    display: inline-block
}

.settings-view .section .inputrow>:not(:first-child):hover {
    background-color: #3a4952
}

.settings-view .section .inputrow>:not(:first-child):hover .icon-cancel {
    opacity: 1
}

.settings-view .section .inputrow :last-child {
    cursor: pointer
}

.settings-view .section .inputrow .icon-cancel {
    cursor: pointer;
    opacity: .6
}

.settings-view [data-hook=close] {
    margin-top: auto
}

.change-location-view {
    width: 400px;
    height: 100%;
    max-height: 500px;
    white-space: nowrap
}

.change-location-view .splitter {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0px
}

.change-location-view .list {
    -webkit-user-select: none;
    user-select: none;
    flex: 1;
    position: relative;
    overflow: hidden
}

.change-location-view .list>.elem {
    line-height: 22px;
    margin-right: 12px;
    padding-left: 6px
}

.change-location-view .list>.elem:hover {
    background-color: #2f3c43
}

.change-location-view .list>.elem.selected {
    background-color: #3a4952
}

.change-location-view .buttons {
    display: flex;
    flex-direction: column;
    margin-left: 6px;
    flex: 0 0 100px
}

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

.change-location-view .buttons .spacer {
    flex: 1;
    margin: 0
}

.replay-controls-view {
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
    bottom: 0;
    height: 40px;
    width: 100%;
    background-color: #000;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box
}

.replay-controls-view>:not(:last-child) {
    margin-right: 6px
}

.replay-controls-view button {
    background-color: #244967
}

.replay-controls-view button:hover {
    background-color: #2f5e85
}

.replay-controls-view button:active {
    background-color: #193449
}

.replay-controls-view button:disabled {
    background-color: #3e3e3e
}

.replay-controls-view [data-hook=spd] {
    text-align: center;
    min-width: 40px
}

.replay-controls-view [data-hook=time] {
    text-align: center;
    min-width: 50px
}

.replay-controls-view .timebar {
    background-color: rgba(0,0,0,0);
    flex-grow: 1;
    position: relative;
    height: 40px;
    cursor: pointer
}

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

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

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

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

.replay-controls-view .timebar .marker {
    width: 2px;
    height: 6px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #cecece
}

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

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

html {
    overflow: auto
}

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

a {
    color: #ffe7cc
}

a:hover {
    text-decoration: underline;
    cursor: pointer
}

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

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

.thin-scrollbar,.subtle-thin-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) rgba(0,0,0,.2)
}

.thin-scrollbar::-webkit-scrollbar,.subtle-thin-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: rgba(0,0,0,.2)
}

.thin-scrollbar::-webkit-scrollbar-thumb,.subtle-thin-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.2)
}

.subtle-thin-scrollbar:not(:hover) {
    scrollbar-color: rgba(255,255,255,0) rgba(0,0,0,0)
}

.subtle-thin-scrollbar:not(:hover)::-webkit-scrollbar {
    background-color: rgba(0,0,0,0)
}

.subtle-thin-scrollbar:not(:hover)::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0)
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: rgba(0,0,0,0);
    padding: 0;
    width: 120px
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none
}

.slider:focus {
    outline: none
}

.slider::-webkit-slider-thumb {
    border: none;
    width: 10px;
    height: 16px;
    border-radius: 7px;
    background: #389cdb;
    cursor: pointer;
    margin-top: -6px
}

.slider::-moz-range-thumb {
    border: none;
    width: 10px;
    height: 16px;
    border-radius: 7px;
    background: #389cdb;
    cursor: pointer
}

.slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background-color: rgba(255,255,255,.3);
    cursor: pointer;
    border: none
}

.slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background-color: rgba(255,255,255,.3);
    cursor: pointer;
    border: none
}