html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: black;
}

.page-bg {
    background-color: black;

    /*height:900px;*/
    /*width:1600px;*/
}

.container-top {
    display: block;
    background-color: darkgoldenrod;
    height: 16%;
    width: calc(100vh * 1540 / 1054);
    margin: 0 auto;
}

.container-body {

height: calc(100% - 16%);

max-width: calc(100vh * 1540 / 1054);

display: block;

margin: 0 auto;
}

.Game {

/* background-color: blue; */

height: 100%;

display: none;

position: relative;

/* display: none; */
}

.Game > .Scores {

    /* background-color: darkcyan; */

    height: 38%;

    color: white;

    width: 100%;

    display: block;
}

.Game > .Pokers {

    /* background-color: darkgrey; */

    height: 50%;

    position: relative;

    display: block;
}

.Game > .Prompt {
    /* background-color: darkorchid; */
    height: 5%;
    text-align: center;
    display: block;
    overflow: hidden;
}

.Game > .FunctionButtons {
    background-color: darkturquoise;
    height: 7%;
    position: relative;
    display: block;
    overflow: hidden;
}

.Tables {
    display: block;
    background-color: grey;
    height: 100%;
    width: 100%;
    position: relative;
}

.Tables > .bottom-buttons {

}

.Scores > .l {
    float: left;
    width: 42%;
    height: 100%;
}

.Scores > .l > .l {

left: 0;

margin-top: 5%;

margin-left: 9.5%;

font-size: 5vh;

font-weight: normal;

position: absolute;
}

.Scores > .l > .l :nth-child(1) {

}

.Scores > .l > .l :nth-child(2) {

    margin-top: 31%;
}

.Scores > .l > .r {

float: right;

text-align: right;

margin-right: 8%;

margin-top: 3%;

/* margin-left: 42%; */

height: 95%;

display: inline-block;
}

.Scores > .l > .r :nth-child(1) {

font-size: 3.8vh;

height: calc(100% / 6);

position: relative;
}

.Scores > .l > .r :nth-child(2) {

margin-top: 3%;

font-size: 3.8vh;

height: calc(100% / 6);

position: relative;
}

.Scores > .l > .r :nth-child(3) {

font-size: 3.8vh;

/* margin-top: 30%; */

height: calc(100% / 6);

position: relative;
}

.Scores > .l > .r :nth-child(4) {

font-size: 3.8vh;

/* margin-top: 15%; */

height: calc(100% / 6);

position: relative;
}

.Scores > .l > .r :nth-child(5) {

font-size: 3.8vh;

/* margin-top: 15%; */

height: calc(100% / 6);

position: relative;
}

.Scores > .l > .r :nth-child(6) {

font-size: 3.8vh;

/* margin-top: 15%; */

height: calc(100% / 6);

position: relative;
}

.Scores > .r {

    float: right;

    height: 100%;

    width: calc(100% - 42%);
}

.Scores > .r .score-line {

    /* line-height: calc(100%/9); */

    height: calc(100% / 9);

    position: relative;
}

.Scores > .r .placeholder {

    height: 5%;
}

.Scores > .r .box {

    height: 95%;

    font-size: 3.7vh;

    width: 85%;

    letter-spacing: 5px;
}

.Scores > .r .score-line .l {
    float: left;
}

.Scores > .r .score-line .r {
    float: right;
}

.Scores > .r .score-line .text-box {
}

.Pokers > .poker .front {

    z-index: 0;

    position: absolute;

    top: 0;

    width: 100%;

    height: 100%;
}

.Pokers > .poker .front img {
    width: 100%;
    height: 100%;
}

.Pokers > .poker .back img {
    width: 100%;
    height: 100%;
}

.Pokers > .poker {

    clear: both;

}

.back {

    position: absolute;

    top: 0;

    /* z-index: 1; */

    width: 100%;

    height: 100%;
}

.hide {
    display: none;
}

.Pokers > .poker.poker-1 {

    left: 10%;

    top: 0;

    position: absolute;

    height: 84%;

    width: 16.5%;
}

.Pokers > .poker.poker-2 {

    left: 21%;

    top: 14%;

    position: absolute;

    height: 100%;

    height: 84%;

    width: 16.5%;
}

.Pokers > .poker.poker-3 {

    left: 31.5%;

    top: 0;

    display: inline-block;

    position: absolute;

    height: 100%;

    height: 84%;

    width: 16.5%;
}

.Pokers > .poker.poker-4 {

    left: 42%;

    top: 14%;

    display: inline-block;

    position: absolute;

    height: 100%;

    height: 84%;

    width: 16.5%;
}

.Pokers > .poker.poker-5 {

    left: 52.5%;

    top: 0;

    display: inline-block;

    position: absolute;

    height: 100%;

    height: 84%;

    width: 16.5%;
}

.Pokers > .poker.poker-6 {

    left: 63.5%;

    top: 14%;

    display: inline-block;

    position: absolute;

    height: 100%;

    height: 84%;

    width: 16.5%;
}

.Pokers > .poker.poker-7 {

    left: 75%;

    top: 0;

    display: inline-block;

    position: absolute;

    height: 100%;

    height: 84%;

    width: 16.5%;
}

.Pokers > .hint-1 {
    background-color: black;
    height: 41%;
    position: absolute;
    width: 9%;
    left: 22%;
    top: 17%;
    z-index: 1;
    opacity: 0.25;
    z-index: 999;
}

.Pokers > .hint-3 {
    background-color: black;
    height: 41%;
    position: absolute;
    width: 9%;
    left: 81%;
    top: 2%;
    opacity: 0.25;
    z-index: 999;
}

.Pokers > .hint-2 {
    background-color: black;
    height: 41%;
    position: absolute;
    width: 9%;
    left: 56%;
    top: 2%;
    opacity: 0.25;
    z-index: 999;
}

.Prompt .box {
    font-size: 3.8vh;
    display: inline-block;
    height: 100%;
    line-height: 100%;
}

.Prompt .box.flashing {
    color: #ff0000;
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.FunctionButtons {

}

.FunctionButtons .fbutton {

display: inline-block;

font-size: 3vh;

line-height: 100%;

cursor: pointer;

-webkit-touch-callout: none; /* iOS Safari */

-webkit-user-select: none; /* Safari */

-khtml-user-select: none; /* Konqueror HTML */

-moz-user-select: none; /* Firefox */

-ms-user-select: none; /* Internet Explorer/Edge */

user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome and Opera */

background-color: grey;
}

.FunctionButtons .fbutton.disabled {
    cursor: default;
    background-color: black;
}

.FunctionButtons .fbutton.fbutton-1 {

    position: absolute;

    left: 9%;

    display: flex;

    flex-flow: row;

    align-items: center;

    height: 100%;
}

.FunctionButtons .fbutton.fbutton-2 {

    position: absolute;

    /* top: 2%; */

    left: 22%;

    display: flex;

    flex-flow: row;

    align-items: center;

    height: 100%;
}

.FunctionButtons .fbutton.fbutton-3 {

    position: absolute;

    /* top: 2%; */

    left: 32%;

    display: flex;

    flex-flow: row;

    align-items: center;

    height: 100%;
}

.FunctionButtons .fbutton.fbutton-4 {

    position: absolute;

    /* top: 2%; */

    left: 42%;

    display: flex;

    flex-flow: row;

    align-items: center;

    height: 100%;
}

.FunctionButtons .fbutton.fbutton-5 {

position: absolute;

/* top: 2%; */

left: 52%;

display: flex;

flex-flow: row;

align-items: center;

height: 100%;
}

.FunctionButtons .fbutton.fbutton-6 {

    position: absolute;

    /* top: 2%; */

    left: 67%;

    display: flex;

    flex-flow: row;

    align-items: center;

    height: 100%;
}

.FunctionButtons .fbutton.fbutton-7 {

    position: absolute;

    /* top: 2%; */

    left: 77%;

    display: flex;

    flex-flow: row;

    align-items: center;

    height: 100%;
}

.FunctionButtons .fbutton.fbutton-8 {

    position: absolute;

    /* top: 2%; */

    left: 86%;

    display: flex;

    flex-flow: row;

    align-items: center;

    height: 100%;
}

.Tables .machine {

}

.Tables .section-2 .pack {

/* margin-top: 8.5%; */

padding-left: 1%;

width: 100%;

height: 100%;
}

.Tables .machine:first-child {
    /* margin-left: 0; */
}

.Tables .machine > img {
    width: 100%;
}

.Tables .machine-wrapper {
    background-color: darkred;
    width: 8.0%;
    /* height: 11.5%; */
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 2.5%;
    position: relative;
}

.Tables .machine-wrapper .text-box {
    color: white;
    font-size: 2vh;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    /* You can specify ANY width values here */
}