: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;
}

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

.ma { margin:auto;}

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

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

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

.mainbimg {
    width: 30vw;
    margin: auto;
}

@media only screen 
and (orientation: portrait) {
    .buttoncontainer,.mainbutton,.panelbutton {
        width: 44vw;
        height: 40vw;
    }
    .panelbutton {
        font-size: 18vw;
    }
}

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

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

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

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

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