<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.bu { border: unset; }

.ntb:hover, .ntbhi {
    border: 2px solid black;
    overflow: hidden;
}

.vam { vertical-align:middle; }
#tournamentinfodialog {
    overflow: hidden;
    max-height: 98vh;
    max-width: 90vw;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction : column;
}

.tbutton {
    width: 100%;
    text-align: left;
}

html {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
}

body {
    font-family: sans-serif;
    margin: 0;
    height: 100%;
    position: relative;
    overflow: auto;
}

.tournament-headers {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border-bottom: 1px solid #ccc;
}
.tournament-headers h3 {
    flex-grow: 0;
    flex-basis: 25%;
    text-align: center;
    font-weight: 400;
    margin: 0;
    padding: 1rem;
}

.tournament-brackets {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    background: #fdfdfd;
    margin-bottom: 50px;
}

.bracket {
    padding-left: 0;
    display: flex;
    margin: 0;
    padding: 10px 0;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-around;
    list-style-type: none;
    flex: 1;
}

.team-item {
    box-shadow: 5px 5px 10px 1px #656565;
    background-color: #f4f4f4;
    padding: .3rem;
    display: block;
    margin: .5rem 10px;
    position: relative;
    vertical-align: middle;
    line-height: 1;
}

.team-item:after {
    content: '';
    border-color: #4f7a38;
    border-width: 2px;
    position: absolute;
    display: block;
    width: 9px;
    right: -11px;
}

.team-item:nth-of-type(odd):after {
    border-right-style: solid;
    border-top-style: solid;
    height: 100%;
    top: 50%;
}

.team-item:nth-of-type(even):after {
    border-right-style: solid;
    border-bottom-style: solid;
    height: 100%;
    top: -50%;
}

.team-item:before {
    content: '';
    border-top: 2px solid #4f7a38;
    position: absolute;
    height: 2px;
    width: 10px;
    left: -10px;
    top: 50%;
}

.bracket-2 .team-item:nth-of-type(odd):after {
    height: 200%;
    top: 50%;
}
.bracket-2 .team-item:nth-of-type(even):after {
    height: 200%;
    top: -150%;
}

.bracket-3 .team-item:nth-of-type(odd):after {
    height: 350%;
    top: 50%;
}

.bracket-3 .team-item:nth-of-type(even):after {
    height: 350%;
    top: -300%;
}

.bracket-4 .team-item:nth-of-type(odd):after {
    height: 700%;
    top: 50%;
}

.bracket-4 .team-item:nth-of-type(even):after {
    height: 700%;
    top: -650%;
}

.bracket-5 .team-item:nth-of-type(odd):after {
    height: 1300%;
    top: 50%;
}

.bracket-5 .team-item:nth-of-type(even):after {
    height: 1300%;
    top: -1255%;
}

.bracket-6 .team-item:nth-of-type(odd):after {
    height: 2610%;
    top: 50%;
}

.bracket-6 .team-item:nth-of-type(even):after {
    height: 2610%;
    top: -2560%;
}

.bracket-7 .team-item:nth-of-type(odd):after {
    height: 5220%;
    top: 50%;
}

.bracket-7 .team-item:nth-of-type(even):after {
    height: 5220%;
    top: -5165%;
}

.bracket:first-of-type .team-item:before {
    display: none;
}

.team-item time {
    display: inline-block;
    background-color: #dbdbdb;
    font-size: .8rem;
    padding: 0 .6rem;
}

.tournamentTE {
    width: 100%;
}

.tournament-container {
    overflow: auto;
    flex-grow: 1;
    flex-basis: 80vh;
    max-height: 90vh;
}

.tournament-headers {
    flex-grow: 0;
}
.dialog,.fullscreenmobile, .fixeddialog, .topleftdialog, .topmiddledialog, .boardmiddledialog, .centerdialog, .middledialog, .leftmiddledialog, .bottomrightdialog, .plaindialog {
    display: none;
    position: absolute;
    padding: 4px;
    margin: 4px;
    border: 3px solid black;
    z-index: 2;
    overflow: auto;
    background-color: white;
}

.plaindialog {
    border: 1px solid black;
    padding: unset;
    margin: unset;
}
.dialogbutton {
    margin: 2px;
    font-size: 100%;
    width: 98%;
}
table.reference{
    border-collapse:collapse;width:100%;
}

table.reference tr:nth-child(odd):not(.plaintr), .tablegrid &gt; div:nth-child(odd):not(.th-bg) {background-image: linear-gradient(#e0e0e0, white);}
table.reference tr:nth-child(even):not(.plaintr), .tablegrid &gt; div:nth-child(even):not(.th-bg) {background-color:#ffffff;}

table.reference th, .th-bg{
    color:#ffffff;background-color:#333333;border:1px solid #333333;padding:3px;
}

table.movetable th{
    color:#ffffff;background-color:#333333;border:1px solid #333333;padding:3px;vertical-align:top;text-align:left;
}

table.reference th a:link,table.reference th a:visited{
    color:#ffffff;
}

table.reference th a:hover,table.reference th a:active{
    color:#EE872B;
}

table.reference td, .tablegrid &gt; div:not(.th-bg):not(.grid3col) {
    border: var(--table-border);padding:4px;padding-top:5px;padding-bottom:5px;vertical-align:top;
}

#logtable &gt; tbody &gt; tr &gt; td:hover {
    background-color: highlight;
}
#left, #right {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    -webkit-flex-basis: 100px;
    -ms-flex-basis: 100px;
    flex-basis: 100px;
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s;
}

#top, #bottom {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    -webkit-flex-basis: 40%;
    -ms-flex-basis: 40%;
    flex-basis: 40%;
    overflow: auto;
    transform: translateZ(0);
}

#left, #right {
    overflow: auto;
}

body {
    margin: 0px;
    overflow: hidden;
}

#fleximg {
    max-width: 50vh;
    max-height: 50vh;
}

img {
    vertical-align: middle;
}

#onlinechat, #onlinetournaments, #onlineforum {
    overflow: auto;
}

#homepanel.pageheader {
    margin: auto;
}

#showtime {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
}

#headerbar, #menubar {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#headerbar {
    background-color: #555555;
    color: #ffffff;
}

#sidebar {
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    -webkit-flex-basis: var(--users-width);
    -ms-flex-basis: var(--users-width);
    flex-basis: var(--users-width);
}

#maintop, #mainbottom, #mainpanel, #practice {
    margin: 0;
    color: black;
    border-left: 1px solid black;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
}

#maintop, #mainpanel, #practice {
    flex-basis: 20%;
    -ms-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-grow: 1;
}

#maintop, #mainbottom, #practice {
    background: var(--background-color);
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: soft-light;
}

#maintop, #practice {
    background-image: url(../images/coin_trans2.png);
    position: relative;
}

.scrollable {
    overflow: auto;
}

#maintop {
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px;
}

#mainbottom, #practice {
    overflow: hidden;
}

#sidebar {
    background: var(--background-color);
}

#widecontainer, #showtime {
    -ms-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    flex-basis: 30vh;
}

#mainpanel {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    overflow: hidden;
}

#maintop, #practice {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

#practice {
    display: none;
}
:root {
    --live-hidden-col : table-cell;
    --mainbottom-grow: 1;
    --top-background-color: teal;
    --bottom-background-color: teal;
    --sidebar-background-color: gray;

    --top-color: white;
    --bottomcolor: white;
    --sidebar-color: white;

    --user-background-color: "";
    --friend-background-color: "";
    --background-color: wheat;
    --clock-background-color: wheat;
    --background-image: url('../images/coin_trans2.png');
    --peg-number-bg: url("../img/numbg.png");
    --users-background: url('../images/coinback_trans2.png');
    --background-img-display: block;
    --background-size: "";
    --users-width: 300px;
    --users-font-size: 1em;
    --mobile-bgcolor: "";

    --bearoff-height: 43.25%;
    --blackbearoff-top: 51.25%;
    --cubemiddle-top: 44.375%;
    --cubemiddle-left: 92.75%;
    --cubemiddle-left-flipped: 1.5%;
    --whiteclockframe-top: 5%;
    --blackclockframe-top: 90%;
    --whiteclockadd-top: -30%;
    --blackclockadd-top: -30%;
    --scorecard-top: 30%;
    --lengthscorecard-top: 31.25%;
    --whitescorecard-top: 26%;
    --blackscorecard-top: 36%;
    --whiteuscore-top: 45%;
    --blackuscore-top: 51%;
    --clockadd-right: 38%;
    --clocknetwork-right: 50%;
    --boff-top: 53%;
    --bflag-top: 54%;
    --table-border: 1px solid #d4d4d4;
    --dice-size: 5%;
    --black-dice-left: 67.25%;
    --white-dice-left: 22.25%;
    --button2-margin: 0vw;
    --board-font-size: 1.3em;
    --network-font-size: 1.3em;
}

.title, .title2, .titlenotrans, .titleatend {
    color: black;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    -webkit-flex-grow: 0;
    -ms-flex-grow: 0;
    flex-grow: 0;
}

.title, .titleatend {
    background: black;
    font-size: 3em;
    top: 25vh;
}

.title {
    -webkit-transition: color 4s,
    top 0.5s 2s,
    font-size 0.5s 2s;
    transition: color 4s,
    top 0.5s 2s,
    font-size 0.5s 2s;
}

@media (min-height: 800px) {
    .title, .titleatend {
        top: 40vh;
    }
}

.title2 {
    -webkit-transition: color 4s,
    top 0.5s 2s,
    font-size 0.5s 2s;
    transition: color 2s,
    font-size 0.5s 2s;
    font-size: 2.5em;
    top: 47vh;
}

.largescreen {
    box-shadow: 20px 20px 40px 1px #656565;
    overflow: auto;
    margin: 0 10px auto;
    background: white;
    max-height: 90vh;
    padding: 0px;
    margin: 0px;
    left: 20vw;
    width: 60vw;
    box-sizing: border-box;
}


@media (min-height: 600px) {
    .title, .titleatend {
        top: 20vh;
    }
    .title2 {
        top: 40vh;
    }
}

@media screen and (orientation: landscape) {
    .title, .titleatend { top: 10vh; }
    .title2 { top: 18vh; }
    .largescreen {
    }
}

@media screen and (orientation: portrait) {
    .title, .titleatend {
        top: 10vh;
    }
    .title2 {
        top: 30vh;
    }
    .largescreen {
        background: white;
        max-height: 90vh;
        left: 10px !important;
        width: 95vw !important;
    }
    .hp {
        display: none;
    }
}

body {
    background: black;
    margin: 0px;
    height: 100%;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    touch-action: manipulation;
}

.flg, .middlecontent, #container {
    flex-grow: 1;
    -ms-flex-grow: 1;
    -webkit-flex-grow: 1;
}

.flx, .flexchat, .middlecontent, .chatpanelmain, #left, #right, #container, #page, #containerparent, #sidebar, #mainusercontainer {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.flc, .flexchat, .middlecontent, .leftcontent, .rightcontent, .chatpanelmain, #left, #right, #page, #containerparent, #sidebar, #mainusercontainer {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flr {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

#page , #containerparent { height: 100%; }

/* Horizontal sizing */
#container {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-basis: 50%;
    -ms-flex-basis: 50%;
    flex-basis: 50%;
    height: 100%;
}

#container {
    overflow: hidden;
    justify-content: center;
}

.chatcontainer {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
    user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    background-color: var(--mobile-bgcolor);
}
 
#right {
    -webkit-flex-grow: 100;
    -ms-flex-grow: 100;
    flex-grow: 100;
    border: solid;
}

#top, #bottom {
    -webkit-flex-basis: 50%;
    -ms-flex-basis: 50%;
    flex-basis: 50%;
    -webkit-flex-grow: inherit;
    -ms-flex-grow: inherit;
    flex-grow: inherit;
    border: solid yellow;
}

#left {
    -webkit-flex-basis: 60%;
    -ms-flex-basis: 60%;
    flex-basis: 60%;
    border: solid red;
}

#right {
    -webkit-flex-basis: 40%;
    -ms-flex-basis: 40%;
    flex-basis: 40%;
    border: solid red;
}

body {
    margin: 0px;
    overflow: hidden;
}

#header, #footer {
    -webkit-flex-grow: 0;
    -ms-flex-grow: 0;
    flex-grow: 0;
}

.if, .imagefade, .buttonfade {
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s;
}

.buttonfade { font-size: 0.7em; }

.imagefade {
    position: absolute;
    top: 0;
    left: 0;
}

.royalcoin {
    height: 1em;
    top: 2px;
}

.coinimage {
    height: 1.5em;
    top: 2px;
}

#containerparent { overflow: auto; }

.duelchatinput {
    -webkit-flex-grow: 0;
    -ms-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-basis: 20px;
    -ms-flex-basis: 20px;
    flex-basis: 20px;
}

#dchat, #tabcontent, #gchat, #mainchat {
    background: var(--background-color);
}

.barnamecontent {
    transform: rotate(-90deg);
    top: 78%;
    position: relative;
}

#coinmain {
    width: 200px;
    margin: auto;
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s;
}

.hbutton { width: 100%; }
.dbutton { width: 100%; margin-left: 2px; margin-right: 2px; }

#online, #onlinetournaments, #dchat, #ichat, #gchat {
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
    background-repeat: no-repeat;
    background-position: center;
    overflow: auto;
}

#online {
    background-image: var(--users-background);
    background-blend-mode: soft-light;
    background-color: var(--background-color);
    overflow-x: hidden;
}

.fa.fa-frown-o {
    background-image: url(../images/redbg.png); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
}

.fa.fa-smile-o {
    background-image: url(../images/yellowbg.png); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
}

#fchatinput {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.matchhelpbutton {
    white-space: nowrap;
    margin: 2px;
    font-size: 100%;
}

#emojidialog { font-size: x-large; }

@media only screen 
and (orientation: landscape) {
    #emojidialog {
        font-size: large;
    }
}

.wbutton {
    width: 100%;
    white-space: nowrap;
}

.headerbutton {
    margin-left: 2px;
}

.rheaderbutton {
    float: right;
}

.buttoncontainer {
    position: relative;
    width: 12.5vw;
    height: 12.5vw;
    float: left;
    min-width: 100px;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.mainbutton
{
    width: 12.5vw;
    height: 12.5vw;
    min-width: 100px;
    font-size: 6vw;
    float: left;
    text-align: center;
}

.panelbutton
{
    width: 12.5vw;
    height: 12.5vw;
    min-width: 100px;
    font-size: 6vw;
    float: left;
    text-align: center;
    display: flex;
    align-items: center;
    background-color: whitesmoke;
    -webkit-border-radius:0px;
    -webkit-appearance: none;
    border: 1px solid black;
    box-sizing: border-box;
}

.panelbutton {
    background-color: whitesmoke;
    -webkit-border-radius:0px;
    -webkit-appearance: none;
}

.mainbimg {
    margin: auto;
    width: 1em;
}

#statusfooter {
    -moz-transition: all 1000ms;
    -webkit-transition: all 1000ms;
    transition: all 1000ms;
    opacity: 0;
    width: 50%;
    text-align: center;
    position: absolute;
    left: 25%;
    z-index: 1;
    background: black;
    color: white;
}

.buttonabout {
    -moz-transition: all 1000ms;
    -webkit-transition: all 1000ms;
    transition: all 1000ms;
    opacity: 0;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    text-align: center;
}

.buttontitle {
    -moz-transition: all 1000ms;
    -webkit-transition: all 1000ms;
    transition: all 1000ms;
    opacity: 0;
}

.buttonarea {
    width: 100%;
    justify-content: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow: auto;
}

.tablebutton {
    font-size: large;
    width: 100%;
}

.leftcontent, .rightcontent {
    flex-basis: 25%;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    width: 256px;
}

.promobutton {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    -moz-transition: opacity 2s;
    transition: opacity 2s;
    -webkit-transition: opacity 2s;
}

.promotitle {
    position: absolute;
    top: 0;
    text-align: center;
    opacity: 0;
    width: 100%;
    color: white;
    -moz-transition: opacity 2s;
    transition: opacity 2s;
    -webkit-transition: opacity 2s;
    z-index: 2;
}

.promosection {
    width: 100%;
    height: 33%;
    opacity: 0;
    -moz-transition: opacity 2s;
    transition: opacity 2s;
    -webkit-transition: opacity 2s;
    position: relative;
}

.promofooter {
    position: absolute;
    bottom: 2px;
    text-align: center;
    opacity: 0;
    width: 100%;
    color: white;
    -moz-transition: opacity 2s;
    transition: opacity 2s;
    -webkit-transition: opacity 2s;
    z-index: 2;
}


.buttoncontainer:hover &gt; div &gt; div &gt; span { opacity: 1; }

.promosection:hover img { opacity: 1; }

.promosection:hover span { opacity: 1; }

.promosection:hover button { opacity: 1; }

.mainadimg {
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    -moz-transition: opacity 1s;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
}

.grayButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
	background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
	background-color:#ededed;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#777777;
	font-family:Arial;
	font-weight:bold;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.grayButton:hover, .tabbutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
	background-color:#dfdfdf;
	color:#777777;
}
.grayButton:active {
	position:relative;
	top:1px;
}

#chatpanel { overflow:hidden; }

.tabbutton { margin-right: 2px; }

.oppbutton {
    margin-right: 4px;
    float: left;
}

#chatholder {
    max-height: 90vh;
    overflow: auto;
    resize: both;
}

#usersdialog {
    overflow: auto;
    max-height: 90vh;
    min-width: 320px;
}

.chatpanelmain {
    border: solid 1px black;
    overflow: hidden;
    -webkit-flex-basis: 20%;
    -ms-flex-basis: 20%;
    flex-basis: 20%;
    min-height: 150px;
}

.middlecontent {
    -webkit-flex-basis: 50%;
    -ms-flex-basis: 50%;
    flex-basis: 50%;
    border: solid 1px black;
    overflow: hidden;
    position: relative;
}

.middlecontent {
    max-width: 50vw;
    min-width: 50vw;
    overflow: auto;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.middlepanel {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-grow: 0;
    -ms-flex-grow: 0;
    flex-grow: 0;
    background: var(--background-color);
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../images/coinback_trans2.png);
    overflow: auto;
}

@media (max-width: 800px) {
    .leftcontent, .rightcontent {
        display: none;
    }
    .buttoncontainer,.mainbutton, .panelbutton {
        width: 20vw;
        height: 20vw;
    }
    .mainbutton, .panelbutton {
        font-size: 10vw;
    }
    .middlecontent {
        max-width: 100vw;
        min-width: 100vw;
    }
}

@media only screen 
and (orientation: portrait) {
    .notonmobile {display:none;}
    #menucontent { top: 40px; }
    .leftcontent, .rightcontent {
        display: none;
    }
    .buttoncontainer,.mainbutton,.panelbutton {
        width: 50vw;
        height: 50vw;
    }
    .mainbutton, .panelbutton {
        font-size: 18vw;
    }
    .middlecontent {
        max-width: 100vw;
        min-width: 100vw;
    }
    .chatpanelmain {
        display: none;
    }
}

.buttonclose {
    float: left;
    display: none;
}

.buttonheader {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
}

.titlediv {
    width: 100%;
    text-align: center;
}

#widecontainer { display: none; overflow:hidden; }

.settingsbutton { width: 100%; }

#mymatchesmiddle, #myChart, .chartcontainer {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    overflow: auto;
}

#mymatchestop, #mymatchesbottom {
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
}

#myChart {
    max-height: 70vh;
    width: 99%;
    height: 600px;
}

#extrapanel {
    -ms-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    overflow: hidden;
}

#userslist {
    width: 100.1%;
    height: 100%;
}

#t_mainu {
    width: 100.1%;
}

.flexchat {
    width: 100%;
    height: 100%;
    min-width: 360px;
    min-height: 200px;
    resize: both;
    background: rgb(231, 231, 231);
}

.grow {
    flex-grow: 1;
    -ms-flex-grow: 1;
    -webkit-flex-grow: 1;
}

.flexchatbody {
    background: white;
    user-select: text;
}

#chatuserid {
    float: left;
}

.flagtd { width: 8%; text-align: center }

.flag {
    width: 32px;
    height: 20px;
    margin-top: 1px;
}

@media (max-width: 700px) {
    .grayButton {
        font-size: medium;
    }
}

.promofixedtitle {
    position: absolute;
    top: 0;
    text-align: center;
    opacity: 1;
    width: 100%;
    color: white;
}

.cholder {
    width: min-content;
    height: min-content;
    position: absolute;
    bottom: 0;
    left: 15%;
}

.buttonimage {
    width: 8vw;
    height: 8vw;
}

.hmtd { width: 80%; }
.hstd { width: 10%; }
.admbt { margin-right: 4px; }

@media screen and (orientation: portrait) and (max-width: 425px) {
    .buttonimage {
        width: 30vw;
        height: auto;
    }
    .hmtd { width: 98%; }
    .hstd { width: 1%; }
    .title, .titleatend { font-size: 2em; }
    .title2 { font-size: 1.7em; }
    .flexchat { min-width: 300px; }
    .admbt { width:100%; margin-bottom: 4px; }
}

@media screen and (orientation: landscape) and (max-width: 700px) {
    .buttonimage {
        width: 14vw;
        height: auto;
    }
    .title, .titleatend { font-size: 2em; }
    .title2 { font-size: 1.7em; }
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .notonmobile {display:none;}
    .title2 { top: 24vh; }
    #header2 { white-space: nowrap; }
}

#infoindex { max-height: 50vh; }

.rightButton {
    float: right;
    margin-right: 4px;
}

.infoTab { width: 100%; }

.bottombutton {
    position: absolute;
    bottom: 0;
}

.hideChat {
    min-height: auto;
    -webkit-flex-basis: 40px;
    -ms-flex-basis: 40px;
    flex-basis: 40px;
    flex-grow: 0;
    -ms-flex-grow: 0;
    -webkit-flex-grow: 0;
    bottom: 0;
}

.fchat {
    border:2px solid black;
    overflow:auto;
    height: 100%;
    min-height: 100px;
}

.usn {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mfzl { }

@media screen and (orientation: portrait) and (max-width: 425px), screen and (orientation: landscape) and (max-height: 425px)
{
    .rheaderbutton, .headerbutton, .roomback, .usersback, .lheaderbutton, .closebutton, .mfzl {
        font-size: large;
    }

    .pageheader &gt; .reference {
        font-size: large;
    }
    .tableheader {
        font-size: large;
    }

}

.roomback, .usersback { float: left; }

.closebutton {
    float: right;
    margin-left: 4px;
}

.pageheader, #mtshow, #mymatchestop, #mymatchesbottom, #mymatchesmiddle {
    background: black;
}

.hide { display: none; }

.fullscreendialog {
  position: absolute;
  width: 100vw;
  height: 100vh;
  margin: 0 10px auto;
  top: 100px;
  box-shadow: 20px 20px 40px 1px #656565;
  z-index: 999;
  display: none;
  overflow: auto;
}

#registerdialog {
    background-color: black;
    border: unset;
    margin: unset;
    padding: unset;
}

#sidebarbottom
{
    width: 100%;
    bottom: 3px;
    border: 1px solid black;
    background-color: var(--background-color);
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../images/observe.png);
    background-blend-mode: soft-light;
}

#mainusercontainer
{
    background: unset;
    flex-grow: 1;
    -ms-flex-grow: 1;
    -webkit-flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

#mainusercontainer {
    -webkit-flex-basis: 50vh;
    -ms-flex-basis: 50vh;
    flex-basis: 50vh;
}

#sidebar {
    display: flex;
    overflow: hidden;
}

.withmouse { display: none; }

@media (pointer: fine) {
    .withmouse { display: table-row; }
}

@media (any-pointer: fine) {
    .withmouse { display: table-row; }
}

#mymatchesdiv, fb100 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    flex-grow: 1;
    -ms-flex-grow: 1;
    -webkit-flex-grow: 1;
    max-height: 100vh;
}

#matchtypebutton { display: none; }

.TabButton, .RightTabButton {
    width: 100%;
    white-space: nowrap;
    background: black;
    color: white;
}

.RightTabButton {
    float: right;
    width: 12%;
    padding-left: 5px;
    margin-left: 5px;
}

@media (max-width: 1200px) {
    .RightTabButton {
        width: 140px;
    }
}
#scrollarrow {
    display: none;
    position: fixed;
    right: 30px;
    opacity: 0.5;
    font-size: 2em;
}

.thtitle {
    float: left;
    margin-top: 1px;
}

#trid_88 &gt; td:nth-child(2) &gt; button {
    background-color: gray;
}

.vstd { display: none; }

.indextable, #boardtable, #helptable {
    width: 100%;
    height: 100%;
    overflow: auto;
    color: rgb(0,0,0);
    white-space: nowrap;
}

.mh100 { max-height: 100vh; }

.boardimg {
    width: 380px;
    height: auto;
}

@media (max-width: 500px) {
    .boardimg {
        width: 340px;
    }
}

.tableholder {
    max-height: 75vh;
    max-width: 90vw;
    overflow: auto;
}

.heroesbutton {
    font-size: var(--users-font-size);
    width: 100%;
    text-align: left;
    position: relative;
}

.userfs {
    font-size: var(--users-font-size);
}

.statsbutton,#rushbutton {
    margin-left: 3px;
}

button,select { color: black; }

.dropdown {
  position: relative;
  display: inline-block;
}

#helpdropdown { float: right; }
#helpcontent { right: 0; }

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 200px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 2;
  max-height: 90vh;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.show { display: block; }

#helpbutton, #mainmenubutton, .statustd, .bstd, #rushbutton,.champtd,.scheduletd, #resettr1,#resettr2,#resettr3, .htd2, .htd1,.htd3,.htd4, .moretr, .ctmoretr, .mline, .cmoretd, .extr {
    display: none;
}

.showTD { display: table-cell; }
.showTR { display: table-row; }

.bmenufixed {
    position: absolute;
    top: 2px;
    left: 2px;
}

#boardmenucontent {
    z-index: 10;
    width: 100%;
}

#bookmarktext, #bookmarkcomment {
    min-width: 320px;
    min-height: 200px;
}

.categorytr:drag-over { border-color:red !important; }

.moveentry { cursor: move; }

#cities { max-width: 40vw; }

#profilecountries { max-width: 30vw; }

.headerb {
    float: right;
    font-size: x-small
}

.nowraptd { white-space: nowrap; }

.softlight { background-blend-mode: soft-light; }

#tabcomp { margin-right: 4px; }

#usersconfig { max-height: 90vh; }

#Observers,#InfoConfig { float: right; }

#mainbottom {
    flex-basis: 25%;
    position: relative;
    z-index: 0;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction : column;
    flex-grow: var(--mainbottom-grow);
    -webkit-flex-grow: var(--mainbottom-grow);
}

#duelchat {
    position: relative;
    z-index: 0;
    height: 100%;
}

#mainbottom::after, #duelchat::after {
    display: var(--background-img-display);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 100%;
    background-image: var(--background-image);
    background-size: var(--background-size);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
    z-index: -1;
}

.tac { text-align: center; }

#chatchannelconfig, #messageconfig  { min-width: 250px; }

.rheaderbutton, .rm2 { margin-right: 2px; }

.userrow { background: var(--user-background-color); }
.friendrow { background: var(--friend-background-color); }
.upratedrow { background: var(--uprated-background-color); }
.downratedrow { background: var(--downrated-background-color); }

.helpimg {
    box-shadow: 10px 10px 20px 1px #656565;
    margin: 20px auto;
}

.l50 { left: 50%; }
.t25 { top: 25%; }
.t50 { top: 50%; }
.rm1 { margin-right: 1px; }
.rm4 { margin-right: 4px; }
.ml4 { margin-left: 4px; }
.lm1 { margin-left: 1px; }
.lm2 { margin-left: 2px; }
.lm4 { margin-left: 4px; }
.ml10 { margin-left: 10px; }
.mr10 { margin-right: 10px; }
.ma { margin: auto; }
.w100  { width: 100%; }
.w99  { width: 99%; }
.w98  { width: 98%; }
.w96  { width: 96%; }
.w95  { width: 95%; }
.w94  { width: 94%; }
.w93  { width: 93%; }
.w90  { width: 90%; }
.w5 { width: 5%; }
.w10 { width: 10%; }
.w12 { width: 12%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w40 { width: 40%; }
.w45 { width: 45%; }
.w48 { width: 49%; }
.w50 { width: 50%; }
.w55 { width: 55%; }
.w60 { width: 60%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w85 { width: 85%; }
.w50p { width: 50px; }
.w25p { width: 25px; }
.w80p { width: 70px; }
.w100p { width: 100px; }
.w200p { width: 200px; }
.w300p { width: 300px; }
.w350p { width: 350px; }
.w320 { width: 20vw; }
.w500p { width: 500px;}
.w640 { width: 640px;}
.w900p { width: 900px; }
.w30v { width: 30vw; }
.h30h { height: 30vh; }
.h400p { height: 400px; }
.h40h { height: 40vh; }
.w60v { width: 60vw; }
.w45 { width: 45%; }
.w4 { width: 4%; }
.w8 { width: 8%; }
.hb { display: none; }
.off { display: none; }
.sb { display: block; }
.hv { visibility: hidden; }
.fs100 { font-size: 100%; }
.fs100p { font-size: 100px; }
.fsl { font-size: large; }
.fsx { font-size: x-large; }
.fss { font-size: small; }
.fsxs { font-size: x-small; }
.fs3e { font-size: 3em; }
.fsm { font-size: medium; }
.fr { float: right; }
.fl { float: left; }
.wsn { white-space: nowrap; }
.cp { cursor: copy; }
.cptxt { user-select: text; }
.b1b { border: 1px solid black; }
.br90 { border-radius: 90%; }
.bb { background: black; }
.br { background: red !important; }
.bgrd {background-image: linear-gradient(#e0e0e0, white); }
.wt { color: white; }
.bt { color: black; }
.b1r { border: 1px solid red; }
.cr { color: red; }
.oa { overflow:auto; }
.os { overflow:scroll; }
.oys { overflow-y:scroll; }
.oya { overflow-y:auto; }
.oxh { overflow-x: hidden; }
.oh { overflow: hidden; }
.mh70 { max-height: 70vh }
.mh80 { max-height: 80vh }
.mh90 { max-height: 90vh }
.mhp200 { max-height: 200px }
.mh50 { max-height: 50vh }
.mh40 { max-height: 40vh }
.mh25 { max-height: 25vh }
.mh30 { max-height: 30vh }
.h50v { height: 50vh }
.mv90 { max-width: 90vw; }
.mv99 { max-width: 99vw; }
.mv80 { max-width: 80vw; }
.tc { text-align:center; }
.tal { text-align:left; }
.tar { text-align:right; }
.mw30 { min-width:30px; }
.mw40 { min-width:40px; }
.mw60 { min-width:60px; }
.mw80 { min-width:80px; }
.mhf { min-height:fit-content; }
.mw100 { min-width:100px; }
.mw250 { min-width:250px; }
.mih80 { min-height: 80vh; }
.mih90 { min-height: 90vh; }
.m2 { margin: 2px; }
.m20a { margin: 20px auto; }
.mb4 { margin-bottom: 2px; }
.mt1 { margin-top: 1px; }
.tm90 { transform: rotate(-90deg); }
.pr { position: relative; }
.pa { position: absolute; }
.bge7 { background-color: #e7e7e7; }
.bgre { background-color: #FF6750; }
.bw { background-color: white; }
.hbh:hover,.panelbutton:hover { background-color: highlight; color: white; }
.cw { color: white; }
.cb { color: black; }
.cg { color: gold; }
.bc33 { background-color: #333333; }
.h20 { height: 20px; }
.h200p { height: 200px; }
.h100 { height: 100%; }
.hi { height: inherit; }
.vh90 { height: 90vh; }
.vh100 { height: 100vh; }
.ha { height: auto; }
.wa { width: auto; }
.h11e { height: 1.1em; }
.p3 { padding: 3px; }
.pl10 { padding-left: 10px; }
.pt2 { padding-top: 2px; }
.p6 { padding: 6px; }
.t0 { top: 0; }
.r0 { right: 0; }
.wh100 { width: 100%; height: 100%; }
.bx { box-sizing: border-box; }
.bu { border: unset !important; }
.bsu { border-spacing: unset; }
.z10 { z-Index: 10; }
.p4x { padding: 4px }
.pn { pointer-events:none }
.fba {
    -webkit-flex-basis: auto;
    -ms-flex-basis: auto;
    flex-basis: auto;
}
.b1 { border-width: 1px; }

.fdc {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.fng {
    flex-grow: 0;
    -ms-flex-grow: 0;
    -webkit-flex-grow: 0;
}

.fns {
    flex-shrink: 0;
    -ms-flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

.vh80 {
    width: 100%;
    max-height: 80vh;
    overflow: auto;
}

.tc4s {
    -webkit-transition: color 4s;
    transition: color 4s;
}

.tc2s {
    -webkit-transition: color 2s;
    transition: color 2s;
}
.mt50 { margin-top: 50px; }

#infosettings {
    min-width: 200px;
}

#introvideo {
    display: flex;
    height: 200px;
    width: 100vw;
    overflow-x: auto;
    position: absolute;
    bottom: 30px;
    color: white;
    text-align: center;
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s;
}

.videoentry {
    border: 2px solid white;
    width: 200px;
    float: left;
    -webkit-flex-basis: 100px;
    -ms-flex-basis: 100px;
    flex-basis: 100px;
    padding-top: 80px;
}

#versusopponent { height: 100%; }

@media (min-width: 1200px) {
    #versusopponent {
        max-width: 90vw;
        max-height: 90vh;
    }
}

.btoggle {
    float:left;
    width: 32px;
    margin-right: 2px;
}

.bentry {
    width: inherit;
    height: inherit;
}

.live7 {
    width: 8%;
    white-space: nowrap;
}

.obs7 { margin-left: 4px; }

.heroesbutton:hover &gt; span { display: block; }

#browselist tr:hover, #infotop &gt; table &gt; tbody &gt; tr &gt; td:hover { background-color: highlight; }

.mainadimg:hover { opacity: 1; }

.fb40 {
    -webkit-flex-basis: 40vh;
    -ms-flex-basis: 40vh;
    flex-basis: 40vh;
}

.fb50 {
    -webkit-flex-basis: 50%;
    -ms-flex-basis: 50%;
    flex-basis: 50%;
}

.fb100 {
    -webkit-flex-basis: 50vh;
    -ms-flex-basis: 50vh;
    flex-basis: 50vh;
    min-height: 80vh;
}

.ffm { font-family: monospace; }
.fwb { font-weight: bold; }
.fw9 { font-weight: 900; }
.grab:hover { cursor: grab; }
.countrytd { width: 3%; text-align: center }
.playertd { width: 15%; }
.numtd { width: 9%; }
.mintd { width: 5%; }
.w7th { width:14.28%; }
.w3rd { width:33.33%; }
.bgr { background:gray;}
.red { background:red;}
.green { background:green;}
.yellow { background:yellow;}
.purple { background:purple;}
.o2 { opacity:0.5; }

#maintop &gt; div.wh100.oh &gt; div.wh100.oa &gt; table &gt; tbody &gt; tr &gt; td.playertd:hover &gt; div ~ div { visibility: visible; }

#champ30BA &gt; tbody &gt; tr &gt; td.playertd:hover &gt; div { display: block; }

#abouttd {max-width:600px;min-width:300px}

.bbh:hover, .sideitem:hover, .sidehover {
    border: 3px solid black;
    overflow: hidden;
    margin: -3px;
}

.pu { padding: unset; }

.wbh:hover {
    border: 3px solid white;
    overflow: hidden;
    margin: -3px;
}

.ntb:hover, .sideitem:hover, .sidehover, .ntbhi {
    background: highlight;
    color: white !important;
}

.fwbh:hover { font-weight: bold; }
.ta1 { transition: all 0.5s; }
.ntb, .sideitem { transition: all 0.5s; }
.sideitem { padding: 4px; }
.l0 { left: 0}
.ntb { width: 100%; font-size: 100%; }

#chatheaderdiv { background: black; }
#mainpanel { z-index: 1; }

.helpclose {
    position: absolute;
    width: 10%;
    left: 45%;
    bottom: 10%;
    font-size: large;
}

.grid2col {
    display: grid;
    grid-template-columns: auto auto;
}

.grid3col {
    display: grid;
    grid-template-columns: auto auto auto;
}

.grid4col {
    min-width: 242px;
    display: grid;
    grid-template-columns: auto auto auto auto;
}

.grid-c-s-1 { grid-column-start: 1; }
.grid-c-s-3 { grid-column-start: 3; }
.grid-c-e-4 { grid-column-end: 4;}
.grid-c-e-3 { grid-column-end: 3;}
.grid-r-s-2 { grid-row-start: 2; }
.grid-r-s-3 { grid-row-start: 3; }
.grid-r-e-7 { grid-row-end: 2; }
.grid-r-e-8 { grid-row-end: 8; }
.grid-r-e-9 { grid-row-end: 9; }

th.live0, th.live1, th.live2, th.live3, th.live4, th.live5, th.live6, th.live7, .stickyhead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.live0 { width: 4px; }
.live1,.live3 { width: 25%; }
.live2,.live4 { width: 5%; }
.live5 { width: 7%; }
.live6 { width: 18%; }
.live7 { width: 10%; }

@media (max-width: 1400px) {
    .live7 { width: 6%; }
    .live5 { width: 4%; }
    .live2,.live4 { width: 4%; }
}

.livehb {
    display: var(--live-hidden-col);
}

#d_lgrooster {
    min-width: 800px;
}

#picturetd &gt; img {
    max-width :400px;
    max-height:400px;
}

@media (pointer: fine) {
    .hh:hover { background-color: highlight; color: white !important; }
    button:hover { background-color: highlight; color: white; }
}

#tooltip {
    background: black;
    color: white;
    border-radius: 7px;
    position: absolute;
    padding: 5px;
    display: none;
    white-space: pre-line;
    font-weight: bold;
}

#tooltip::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -20px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

#roombhead {
    position: sticky;
    top: 0;
    background: black;
    box-sizing: border-box;
    z-index: 1;
}

#menucontent { z-index: 2; }
#roombhead th { border: unset; }

.pbtn { animation: pulseanim 1.5s infinite; }
.pbtn:hover { animation: none; }

@keyframes pulseanim {
    0% { transform: scale(1); }
    50% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.centerparent {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
}

.centerdiv {
    position: absolute;
    width: 60vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 20px 20px 40px 1px #656565;
    overflow: hidden;
    pointer-events: auto;
}

[data-title]:hover:after, tooltip2 {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after, tooltip2 {
    background-color: white;
    color: black;
    font-size: 130%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
}
[data-title]:after { visibility: hidden; }
[data-title]:after {
    content: attr(data-title) '\a' attr(data-title2) '\a' attr(data-title3);
    white-space: pre-wrap;
    width: 100%;
    right: 1px;
}
[data-title] { position: relative; }
#texttab { white-space: pre-wrap; }

#statusers { max-height: 95vh; overflow: hidden; }
#infocontent { max-height: 40vh; }
.indent { text-indent: 2em; }

#kingdiv {
    background: purple;
    height: 100%;
}

.kingelcontainer {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    width: 99%;
    margin-left: auto;
}

.kingel {
    width: 250px;
    min-width: 250px;
    height: auto;
    float: left;
    margin: 4px;
    border: 4px solid black;
}

.center {
    text-align: center;
    vertical-align: middle !important;
}

.fill { width: -webkit-fill-available; }
#regtable2 &gt; tbody &gt; tr &gt; td:hover {
    background-color: highlight;
}

.imagefade {
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s;
}

.imagefade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#regdiv1 {
    padding: 0 20px 20px 20px;
    border: 6px solid rgb(0, 0, 0);
    background: rgb(255, 255, 255);
    text-align: center;
    align-items: center;
    /* margin: auto; */

    position: relative;
    top: 40%;
    max-height: 92vh;
    overflow: auto;
}

@media (max-width: 500px) {
    #regdiv1 {
        padding: 0 10px 10px 10px;
        border: unset;
        background: rgb(245, 222, 179);
        border-radius: 5px;
        top: 2%;
        transform: perspective(1px) translateY(-2%);
        box-sizing: content-box;
    }
}

@media (max-height: 600px) {
    #regdiv1 {
        top: 5%;
        transform: perspective(1px) translateY(-5%);
    }
    #regdiv1 {
        padding: 0 10px 10px 10px;
        border: unset;
        background: rgb(245, 222, 179);
        border-radius: 5px;
        top: 2%;
        transform: perspective(1px) translateY(-2%);
        box-sizing: content-box;
    }
}
#regtable1 {
    margin: auto;
}

#eulabutton {
  width: 100%;
}
.rbutton, .rinput {
  width: 98%;
}

.rclose {
  float: left;
  display: none;
}

.bottomdialog {
   display: none;
}

@media (min-width: 600px) {
    .bottomdialog {
        position: absolute;
        width: 100%;
    }
    #regdiv {
        max-width: 40vw;
    }
    #regtd {
        width: 40vw;
    }
}

@media (min-width: 800px) {
    #regtable2 {
        width: 40vw;
    }
    .regtd {
        width: 40vw;
    }
}

.rheader {
 width: 100%;
 text-align: center;
 font-size: large;
 padding: 4px;
}

#regdiv {
  background: wheat;
  color: black;
  width: fit-content;
  float: left;
}

#infod {
  float: left;
  background: wheat;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../images/coinback_trans2.png);
  min-width: 320px;
  min-height: 350px;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
}

#htext {
    font-size: large;
    font-weight: bold;
    padding: 5px;
    text-align: left;
}

#eulaclose {
    display: none;
}

#statusdiv {
    float: right;
}

#regbackbutton {
    font-size: x-large;
    font-weight: bold;
    display: none;
}
.player_black, .player_white, #message_feedback, #opp_message_feedback {
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
}
#floatingBarsG{
position:relative;
width:62px;
height:77px}

.blockG{
position:absolute;
background-color:#FFFFFF;
width:10px;
height:24px;
-moz-border-radius:8px 8px 0 0;
-moz-transform:scale(0.4);
-moz-animation-name:fadeG;
-moz-animation-duration:1.04s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:normal;
-webkit-border-radius:8px 8px 0 0;
-webkit-transform:scale(0.4);
-webkit-animation-name:fadeG;
-webkit-animation-duration:1.04s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
-ms-border-radius:8px 8px 0 0;
-ms-transform:scale(0.4);
-ms-animation-name:fadeG;
-ms-animation-duration:1.04s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:normal;
-o-border-radius:8px 8px 0 0;
-o-transform:scale(0.4);
-o-animation-name:fadeG;
-o-animation-duration:1.04s;
-o-animation-iteration-count:infinite;
-o-animation-direction:normal;
border-radius:8px 8px 0 0;
transform:scale(0.4);
animation-name:fadeG;
animation-duration:1.04s;
animation-iteration-count:infinite;
animation-direction:normal;
}

#rotateG_01{
left:0;
top:28px;
-moz-animation-delay:0.39s;
-moz-transform:rotate(-90deg);
-webkit-animation-delay:0.39s;
-webkit-transform:rotate(-90deg);
-ms-animation-delay:0.39s;
-ms-transform:rotate(-90deg);
-o-animation-delay:0.39s;
-o-transform:rotate(-90deg);
animation-delay:0.39s;
transform:rotate(-90deg);
}

#rotateG_02{
left:8px;
top:10px;
-moz-animation-delay:0.52s;
-moz-transform:rotate(-45deg);
-webkit-animation-delay:0.52s;
-webkit-transform:rotate(-45deg);
-ms-animation-delay:0.52s;
-ms-transform:rotate(-45deg);
-o-animation-delay:0.52s;
-o-transform:rotate(-45deg);
animation-delay:0.52s;
transform:rotate(-45deg);
}

#rotateG_03{
left:26px;
top:3px;
-moz-animation-delay:0.65s;
-moz-transform:rotate(0deg);
-webkit-animation-delay:0.65s;
-webkit-transform:rotate(0deg);
-ms-animation-delay:0.65s;
-ms-transform:rotate(0deg);
-o-animation-delay:0.65s;
-o-transform:rotate(0deg);
animation-delay:0.65s;
transform:rotate(0deg);
}

#rotateG_04{
right:8px;
top:10px;
-moz-animation-delay:0.78s;
-moz-transform:rotate(45deg);
-webkit-animation-delay:0.78s;
-webkit-transform:rotate(45deg);
-ms-animation-delay:0.78s;
-ms-transform:rotate(45deg);
-o-animation-delay:0.78s;
-o-transform:rotate(45deg);
animation-delay:0.78s;
transform:rotate(45deg);
}

#rotateG_05{
right:0;
top:28px;
-moz-animation-delay:0.9099999999999999s;
-moz-transform:rotate(90deg);
-webkit-animation-delay:0.9099999999999999s;
-webkit-transform:rotate(90deg);
-ms-animation-delay:0.9099999999999999s;
-ms-transform:rotate(90deg);
-o-animation-delay:0.9099999999999999s;
-o-transform:rotate(90deg);
animation-delay:0.9099999999999999s;
transform:rotate(90deg);
}

#rotateG_06{
right:8px;
bottom:7px;
-moz-animation-delay:1.04s;
-moz-transform:rotate(135deg);
-webkit-animation-delay:1.04s;
-webkit-transform:rotate(135deg);
-ms-animation-delay:1.04s;
-ms-transform:rotate(135deg);
-o-animation-delay:1.04s;
-o-transform:rotate(135deg);
animation-delay:1.04s;
transform:rotate(135deg);
}

#rotateG_07{
bottom:0;
left:26px;
-moz-animation-delay:1.1700000000000002s;
-moz-transform:rotate(180deg);
-webkit-animation-delay:1.1700000000000002s;
-webkit-transform:rotate(180deg);
-ms-animation-delay:1.1700000000000002s;
-ms-transform:rotate(180deg);
-o-animation-delay:1.1700000000000002s;
-o-transform:rotate(180deg);
animation-delay:1.1700000000000002s;
transform:rotate(180deg);
}

#rotateG_08{
left:8px;
bottom:7px;
-moz-animation-delay:1.3s;
-moz-transform:rotate(-135deg);
-webkit-animation-delay:1.3s;
-webkit-transform:rotate(-135deg);
-ms-animation-delay:1.3s;
-ms-transform:rotate(-135deg);
-o-animation-delay:1.3s;
-o-transform:rotate(-135deg);
animation-delay:1.3s;
transform:rotate(-135deg);
}

@-moz-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-webkit-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-ms-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-o-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

:root {
    --board-image-width: "50%";
}

.cboardheading, .cboardfooter {
    -moz-transition: all 1000ms;
    -webkit-transition: all 1000ms;
    transition: all 1000ms;
    opacity: 0;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid black;
}

.cboarddiv
{
    width: 100%;
    height: auto;
    min-width: 100px;
    text-align: center;
    position: relative;
}

.cboardimg {
    width: var(--board-image-width);
    height: auto;
    padding: 4px;
}

.cboarddiv:hover {
    background: green;
}

.vlabel {
    position: absolute;
    transform-origin: center;
    transform: translate(-35%) rotate(-90deg);
    bottom: 50%;
}

.thumbcontainer {
    filter: initial;
    display: none;
    position: relative;
    width: 240px;
}
</pre></body></html>