:root {
    --card-width: 4vw;
    --card-height: calc(var(--card-width) * 1.4);
    --card-gap: 0.5vw;
    --card-font: 2.5vw;
    --card-font-suit: 3.5vw;
    --slider-width: 50vh;
    --TimeLimit: 20s;
    --PotRaiser: 4vmin;
    --GameChoice: url();
    --WildChoice: url();
    --MiddleChip: url(../images/blackchip.png);
    --Seat1volume: rgba(158, 160, 157, 0);
    --Seat2volume: rgba(158, 160, 157, 0);
    --Seat3volume: rgba(158, 160, 157, 0);
    --Seat4volume: rgba(158, 160, 157, 0);
    --Seat5volume: rgba(158, 160, 157, 0);
    --Seat6volume: rgba(158, 160, 157, 0);
    --Seat7volume: rgba(158, 160, 157, 0);
    --BackgroundSize: calc(min(32vw, 46vh - 9vw));
    --MenuH: calc(min(90vh, 126vw));
    --MenuW: calc(min(90vw, 64.29vh));
}
body {
    height: 100vh;
    width: 100vw;
    background-image: 
        radial-gradient(rgb(49, 109, 9), #0e2c06);
    background-position: center;
    background-size: 
        auto;
    background-repeat: no-repeat;
    overflow: hidden;
    margin: 0;
    padding: 0;   
}
.screen {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;  
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;  
}
#MainMenu {
    top: calc(50vh - (var(--MenuH) / 2));
    left: calc(50vw - (var(--MenuW) / 2));
    width: var(--MenuW);
    height: var(--MenuH);
    background-image: url(../images/mainmenu.png);
    background-size: cover;    
}
.MainMenuButton {
    display: block;
    position: absolute;
    width: 31.33%;
    height: 23%;
    opacity: 0.8;
    background: inherit;
    background-size: contain;
}
.MainMenuButton:hover {
    opacity: 1;
}
#MBSignIn {
    top: 26%;
    left: 2%;
    background-image: url(../images/MBSignIn.png);
}
#MBSettings {
    top: 26%;
    left: 2%;
    background-image: url(../images/MBSettings.png);
}
#MBAbout {
    top: 51%;
    left: 2%;
    background-image: url(../images/MBAbout.png);
}
#MBRules {
    top: 76%;
    left: 2%;
    background-image: url(../images/MBRules.png);
}
#MBHost {
    top: 38.5%;
    left: 34.33%;
    opacity: 0.85;
    background-image: url(../images/MBHostGame.png);
}
#MBHost:hover {
    opacity: 1;
}
#MBJoin {
    top: 26%;
    left: 66.66%;
    background-image: url(../images/MBJoinGame.png);
}
#MBStore {
    top: 51%;
    left: 66.66%;
    background-image: url(../images/MBStore.png);
}
#MBPractice {
    top: 76%;
    left: 66.66%;
    background-image: url(../images/MBPracticeGame.png);
}
#table {
    background-image: 
        var(--WildChoice), 
        var(--GameChoice), 
        var(--MiddleChip),  
        radial-gradient(rgb(49, 109, 9), #0e2c06);
    background-size: 
        var(--BackgroundSize) var(--BackgroundSize),
        var(--BackgroundSize) var(--BackgroundSize),
        var(--BackgroundSize) var(--BackgroundSize),
        auto;
    background-blend-mode: 
        hard-light, 
        hard-light, 
        soft-light, 
        soft-light;
}
.card:nth-child(1) {left: var(--card-gap);}
.card:nth-child(2) {    left: calc(  (var(--card-gap) * 2)  +  (var(--card-width))  );}
.card:nth-child(3) {    left: calc(  (var(--card-gap) * 3)  +  (var(--card-width)*2)  );}
.card:nth-child(4) {    left: calc(  (var(--card-gap) * 4)  +  (var(--card-width)*3)  );}
.card:nth-child(5) {    left: calc(  (var(--card-gap) * 5)  +  (var(--card-width)*4)  );}
.card:nth-child(6) {    left: calc(  (var(--card-gap) * 6)  +  (var(--card-width)*5)  );}
.card:nth-child(7) {    left: calc(  (var(--card-gap) * 7)  +  (var(--card-width)*6)  );}
.card {
    position: absolute;
    bottom: var(--card-gap);
    height: var(--card-height);
    width: var(--card-width);  
    font-size: var(--card-font);
    text-align: center;
    border-radius: 0.4vw;
    background-size: cover;
    border-width: thin;
    border-style: solid;
    border-color: royalblue;
}
.card.selected {
    border-width: thick;
    border-style: solid;
    border-color: firebrick;
}
.card.down{background-image: url(../images/card.gif);}
.card.cw-c{background-image: url(../images/w-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c2s-c{background-image: url(../images/2s-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c3s-c{background-image: url(../images/3s-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c4s-c{background-image: url(../images/4s-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c5s-c{background-image: url(../images/5s-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c6s-c{background-image: url(../images/6s-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c7s-c{background-image: url(../images/7s-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c8s-c{background-image: url(../images/8s-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c9s-c{background-image: url(../images/9s-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c10s-c{background-image: url(../images/10s-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.cjs-c{background-image: url(../images/js-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.cqs-c{background-image: url(../images/qs-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.cks-c{background-image: url(../images/ks-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.caces-c{background-image: url(../images/aces-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c2c-c{background-image: url(../images/2c-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c3c-c{background-image: url(../images/3c-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c4c-c{background-image: url(../images/4c-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c5c-c{background-image: url(../images/5c-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c6c-c{background-image: url(../images/6c-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c7c-c{background-image: url(../images/7c-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c8c-c{background-image: url(../images/8c-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c9c-c{background-image: url(../images/9c-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c10c-c{background-image: url(../images/10c-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.cjc-c{background-image: url(../images/jc-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.cqc-c{background-image: url(../images/qc-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.ckc-c{background-image: url(../images/kc-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.cacec-c{background-image: url(../images/acec-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c2d-c{background-image: url(../images/2d-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c3d-c{background-image: url(../images/3d-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c4d-c{background-image: url(../images/4d-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c5d-c{background-image: url(../images/5d-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c6d-c{background-image: url(../images/6d-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c7d-c{background-image: url(../images/7d-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c8d-c{background-image: url(../images/8d-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c9d-c{background-image: url(../images/9d-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c10d-c{background-image: url(../images/10d-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.cjd-c{background-image: url(../images/jd-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.cqd-c{background-image: url(../images/qd-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.ckd-c{background-image: url(../images/kd-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.caced-c{background-image: url(../images/aced-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c2h-c{background-image: url(../images/2h-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c3h-c{background-image: url(../images/3h-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c4h-c{background-image: url(../images/4h-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c5h-c{background-image: url(../images/5h-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c6h-c{background-image: url(../images/6h-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c7h-c{background-image: url(../images/7h-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c8h-c{background-image: url(../images/8h-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c9h-c{background-image: url(../images/9h-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.c10h-c{background-image: url(../images/10h-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.cjh-c{background-image: url(../images/jh-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.cqh-c{background-image: url(../images/qh-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.ckh-c{background-image: url(../images/kh-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.caceh-c{background-image: url(../images/aceh-c.gif), url(../images/card.gif); background-blend-mode: multiply;}
.card.cw{background-image: url(../images/w.gif);}
.card.c2s{background-image: url(../images/2s.gif);}
.card.c3s{background-image: url(../images/3s.gif);}
.card.c4s{background-image: url(../images/4s.gif);}
.card.c5s{background-image: url(../images/5s.gif);}
.card.c6s{background-image: url(../images/6s.gif);}
.card.c7s{background-image: url(../images/7s.gif);}
.card.c8s{background-image: url(../images/8s.gif);}
.card.c9s{background-image: url(../images/9s.gif);}
.card.c10s{background-image: url(../images/10s.gif);}
.card.cjs{background-image: url(../images/js.gif);}
.card.cqs{background-image: url(../images/qs.gif);}
.card.cks{background-image: url(../images/ks.gif);}
.card.caces{background-image: url(../images/aces.gif);}
.card.c2c{background-image: url(../images/2c.gif);}
.card.c3c{background-image: url(../images/3c.gif);}
.card.c4c{background-image: url(../images/4c.gif);}
.card.c5c{background-image: url(../images/5c.gif);}
.card.c6c{background-image: url(../images/6c.gif);}
.card.c7c{background-image: url(../images/7c.gif);}
.card.c8c{background-image: url(../images/8c.gif);}
.card.c9c{background-image: url(../images/9c.gif);}
.card.c10c{background-image: url(../images/10c.gif);}
.card.cjc{background-image: url(../images/jc.gif);}
.card.cqc{background-image: url(../images/qc.gif);}
.card.ckc{background-image: url(../images/kc.gif);}
.card.cacec{background-image: url(../images/acec.gif);}
.card.c2d{background-image: url(../images/2d.gif);}
.card.c3d{background-image: url(../images/3d.gif);}
.card.c4d{background-image: url(../images/4d.gif);}
.card.c5d{background-image: url(../images/5d.gif);}
.card.c6d{background-image: url(../images/6d.gif);}
.card.c7d{background-image: url(../images/7d.gif);}
.card.c8d{background-image: url(../images/8d.gif);}
.card.c9d{background-image: url(../images/9d.gif);}
.card.c10d{background-image: url(../images/10d.gif);}
.card.cjd{background-image: url(../images/jd.gif);}
.card.cqd{background-image: url(../images/qd.gif);}
.card.ckd{background-image: url(../images/kd.gif);}
.card.caced{background-image: url(../images/aced.gif);}
.card.c2h{background-image: url(../images/2h.gif);}
.card.c3h{background-image: url(../images/3h.gif);}
.card.c4h{background-image: url(../images/4h.gif);}
.card.c5h{background-image: url(../images/5h.gif);}
.card.c6h{background-image: url(../images/6h.gif);}
.card.c7h{background-image: url(../images/7h.gif);}
.card.c8h{background-image: url(../images/8h.gif);}
.card.c9h{background-image: url(../images/9h.gif);}
.card.c10h{background-image: url(../images/10h.gif);}
.card.cjh{background-image: url(../images/jh.gif);}
.card.cqh{background-image: url(../images/qh.gif);}
.card.ckh{background-image: url(../images/kh.gif);}
.card.caceh{background-image: url(../images/aceh.gif);}
.card.wild-c {
    -webkit-animation-name: wild-c-animate;
    -moz-animation-name: wild-c-animate;
    -ms-animation-name: wild-c-animate;
    -o-animation-name: wild-c-animate;
    animation-name: wild-c-animate;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -ms-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -ms-animation-direction: alternate;
    -o-animation-direction: alternate;
    animation-direction: alternate; 
}
.card.wild {
    -webkit-animation-name: wild-animate;
    -moz-animation-name: wild-animate;
    -ms-animation-name: wild-animate;
    -o-animation-name: wild-animate;
    animation-name: wild-animate;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -ms-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -ms-animation-direction: alternate;
    -o-animation-direction: alternate;
    animation-direction: alternate; 
}
.card {
    opacity: .8;
}
.card.covered {
    opacity: .6;
}
.card.covered:hover {
    opacity: 1;
}
.card:hover {
    opacity: 1;
}
@-webkit-keyframes wild-c-animate {to {background-image: url(../images/w-c.gif);}}
@-moz-keyframes wild-c-animate {to {background-image: url(../images/w-c.gif);}}
@-ms-keyframes wild-c-animate {to {background-image: url(../images/w-c.gif);}}
@-o-keyframes wild-c-animate {to {background-image: url(../images/w-c.gif);}}
@keyframes wild-c-animate {to {background-image: url(../images/w-c.gif);}}
@-webkit-keyframes wild-animate {to {background-image: url(../images/w.gif);}}
@-moz-keyframes wild-animate {to {background-image: url(../images/w.gif);}}
@-ms-keyframes wild-animate {to {background-image: url(../images/w.gif);}}
@-o-keyframes wild-animate {to {background-image: url(../images/w.gif);}}
@keyframes wild-animate {to {background-image: url(../images/w.gif);}}
.hand {
    padding: 0px;
    position: absolute;
    bottom: .4vh;
    left: .4vw;
}


.foldAnimate1 {
    left: 33.73vw;
    bottom: 1.4vh;
    position: fixed;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
    -webkit-animation-name: fold-animate;
    animation-name: fold-animate;
}
.foldAnimate2 {
    left: 1.4vw;
    bottom: 24.4vh;
    position: fixed;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
    -webkit-animation-name: fold-animate;
    animation-name: fold-animate;
}
.foldAnimate3 {
    left: 1.4vw;
    bottom: 49.7vh;
    position: fixed;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
    -webkit-animation-name: fold-animate;
    animation-name: fold-animate;
}
.foldAnimate4 {
    left: 17.56vw;
    bottom: 74.9vh;
    position: fixed;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
    -webkit-animation-name: fold-animate;
    animation-name: fold-animate;
}
.foldAnimate5 {
    left: 50.9vw;
    bottom: 74.9vh;
    position: fixed;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
    -webkit-animation-name: fold-animate;
    animation-name: fold-animate;
}
.foldAnimate6 {
    left: 66.06vw;
    bottom: 49.7vh;
    position: fixed;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
    -webkit-animation-name: fold-animate;
    animation-name: fold-animate;
}
.foldAnimate7 {
    left: 66.06vw;
    bottom: 24.4vh;
    position: fixed;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
    -webkit-animation-name: fold-animate;
    animation-name: fold-animate;
}


@-webkit-keyframes fold-animate {to {top: 50%; bottom: 50%; left: 50%; right:50%; font-size: 0; position: fixed;}}
@keyframes fold-animate {to {top: 50%; bottom: 50%; left: 50%; right:50%; font-size: 0; position: fixed;}}
.seat {
    padding: 0px;
    position: fixed;
    text-align: center;
    background-color: rgba(182, 218, 148, 0.589);
    border-radius: 4vmin;
    height: 24.5%;
    width: 33.33vw;
    overflow: hidden;
    opacity: 1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-color: rgba(158, 160, 157, 0);
    border-style: solid;
    border-width: medium;
}
#seat1 {
    bottom: 1%;
    left: 33.33vw; 
    border-bottom-left-radius: 1vmin;
    border-bottom-right-radius: 1vmin;
    border-color: var(--Seat1volume);
}
#seat2 {
    top: 51.5%;
    left: 1vw; 
    border-color: var(--Seat2volume);
}
#seat3 {
    top: 26.2%;
    left: 1vw;
    border-color: var(--Seat3volume);
}
#seat4 {
    top: 1%;
    right: 50.5%;  
    border-color: var(--Seat4volume);
}
#seat5 {
    top: 1%;
    left: 50.5%;      
    border-color: var(--Seat5volume);
}
#seat6 {
    top: 26.2%;
    right: 1vw;
    border-color: var(--Seat6volume);  
}
#seat7 {
    top: 51.5%;
    right: 1vw; 
    border-color: var(--Seat7volume); 
}
.video {
    position: absolute;
    top: 2.5vmin;
    height: calc(100% - 2.5vmin);
    left: 0;
    width: 100%;
}
#seat1video {
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}
#vtccontrol {
    position: absolute;
    top: calc(2.75vmin + 50% - 9.5vmin);
    height: 19vmin;
    width: 19vmin;
    right: calc(50% - 9.5vmin);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6; 
}
#vtccontrol:hover {
    opacity: 1;
}
#vtccontrol.vtcstart {
    background-image: url(../images/vtcstart.png);
}
#vtccontrol.vtcstop {
    background-image: url(../images/vtcstop.png);
}
.muteButton {
    position: absolute;
    top: 5.5vmin;
    height: 3vmin;
    right: 0;
    width: 3vmin;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
}
.muteButton:hover {
    opacity: 1;
}
.muteButton.muted {
    background-image: url(../images/micOff.png);
}
.muteButton.unmuted {
    background-image: url(../images/micOn.png);
}
#seat1camera {
    position: absolute;
    top: 5.5vmin;
    height: 3vmin;
    right: 3vmin;
    width: 3vmin;
    opacity: 0.6;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/cameraOn.png);
}
#seat1camera:hover {
    opacity: 1;
}
#seat1camera.muted {
    background-image: url(../images/cameraOff.png);
}
#seat1camera.unmuted {
    background-image: url(../images/cameraOn.png);
}
#dealerHand {
    position: fixed;
    top: calc(51.1% + var(--card-gap) + (var(--card-height) / 2 ));
    width: 33.33vw; 
    padding: 0;
}
.dealerHand0 {
    visibility: hidden; /*4.5/2 per card */
}
.dealerHand1 {
    left: 46.85%; /*4.5/2 per card */
}
.dealerHand2 {
    left: 44.6%;
}
.dealerHand3 {
    left: 42.35%;
}
.dealerHand4 {
    left: 40.1%;
}
.dealerHand5 {
    left: 37.85%;
}
.dealerHand6 {
    left: 35.6%;
}
.dealerHand7 {
    left: 33.35%;
}
.namePlate {
    position: absolute;
    font-size: 2.5vmin;
    font-weight: bold;
    top: 0px;
    left: -0.3vw;
    background-color: rgba(182, 218, 148, 0.966);
    padding-left: 3vw;
    width: 100%;
    text-align: left;
}
.moneyPlate {
    position: absolute;
    font-size: 2.5vmin;
    font-weight: bold;
    top: 0px;
    right: 2.7vw;
    text-align: right;
}
.banktablePlate {
    position: absolute;
    font-size: 2.5vmin;
    font-weight: bold;
    top: 0px;
    left: 0;
    background-color: rgba(182, 218, 148, 0.966);
    width: 100%;
    text-align: center;
}
.dealerPlate {
    position: absolute;
    font-size: 2vmin;
    font-weight: bold;
    text-align: center;
    color: white;
    top: 2.8vmin;
    left: -0.3vw;
    background-color: rgba(70, 0, 18, 0.925) ;
    width: 110%;
}
.courtesyDealer {
    background-color: rgba(2, 18, 87, 0.925);
}
.bettingPlate {
    position: fixed;
    font-size: 4vmin;
    font-weight: bold;
    background-color: whitesmoke;
    border-radius: 1vw;
}
.bettingPlateAnimate {
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
    -webkit-animation-name: bettingPlateAnimate-animate;
    animation-name: bettingPlateAnimate-animate;
}
@-webkit-keyframes bettingPlateAnimate-animate {to {top: 50%; bottom: 50%; left: 50%; right:50%; font-size: 0;}}
@keyframes bettingPlateAnimate-animate {to {top: 50%; bottom: 50%; left: 50%; right:50%; font-size: 0;}}
.bettingPlateWrapper {
    text-align: center;
    bottom: 25.5%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    position: fixed;
    left: 0;}
.bettingPlateWrapperAnimate {
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.4s;
    -moz-animation-iteration-count: 1;
    -moz-animation-duration: 0.4s;
    -ms-animation-iteration-count: 1;
    -ms-animation-duration: 0.4s;
    -o-animation-iteration-count: 1;
    -o-animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
    -webkit-animation-name: bettingPlateWrapperAnimate-animate;
    -moz-animation-name: bettingPlateWrapperAnimate-animate;
    -ms-animation-name: bettingPlateWrapperAnimate-animate;
    -o-animation-name: bettingPlateWrapperAnimate-animate;
    animation-name: bettingPlateWrapperAnimate-animate;}
@-webkit-keyframes bettingPlateWrapperAnimate-animate {to {top: 50%; bottom: 50%; font-size: 0;}}
@-moz-keyframes bettingPlateWrapperAnimate-animate {to {top: 50%; bottom: 50%; font-size: 0;}}
@-ms-keyframes bettingPlateWrapperAnimate-animate {to {top: 50%; bottom: 50%; font-size: 0;}}
@-o-keyframes bettingPlateWrapperAnimate-animate {to {top: 50%; bottom: 50%; font-size: 0;}}
@keyframes bettingPlateWrapperAnimate-animate {to {top: 50%; bottom: 50%; font-size: 0;}}
#bettingPlate1 {    position: relative; display: inline-block; bottom: 0;}
#bettingPlate2 {    left: 34.3vw;    top: 60%;}
#bettingPlate3 {    left: 34.3vw;    top: 36%;}
#bettingPlate4 {    right: 52vw;    top: 25.5%;}
#bettingPlate5 {    left: 52vw;    top: 25.5%;}
#bettingPlate6 {    right: 34.3vw;    top: 36%;}
#bettingPlate7 {    right: 34.3vw;     top: 60%;}
[id^="deck"] {
    visibility: hidden;
    position: absolute;
    top: calc(50% - var(--card-height));
    left: calc(50% - var(--card-width));
    height: calc(2 * var(--card-height));
    width: calc(2 * var(--card-width));  
    border-radius: 0.8vw;
    background-size: cover;
    background-image: url(../images/card.gif);
    border-width: thin;
    border-style: solid;
    border-color: royalblue;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.4s;
    -moz-animation-iteration-count: 1;
    -moz-animation-duration: 0.4s;
    -ms-animation-iteration-count: 1;
    -ms-animation-duration: 0.4s;
    -o-animation-iteration-count: 1;
    -o-animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
}
#deck1.dealto1 {
    -webkit-animation-name: dealto1-animate;
    -moz-animation-name: dealto1-animate;
    -ms-animation-name: dealto1-animate;
    -o-animation-name: dealto1-animate;
    animation-name: dealto1-animate;
}
#deck2.dealto2 {
    -webkit-animation-name: dealto2-animate;
    -moz-animation-name: dealto2-animate;
    -ms-animation-name: dealto2-animate;
    -o-animation-name: dealto2-animate;
    animation-name: dealto2-animate;
    }
#deck3.dealto3 {
    -webkit-animation-name: dealto3-animate;
    -moz-animation-name: dealto3-animate;
    -ms-animation-name: dealto3-animate;
    -o-animation-name: dealto3-animate;
    animation-name: dealto3-animate;
    }
#deck4.dealto4 {
    -webkit-animation-name: dealto4-animate;
    -moz-animation-name: dealto4-animate;
    -ms-animation-name: dealto4-animate;
    -o-animation-name: dealto4-animate;
    animation-name: dealto4-animate;
    }
#deck5.dealto5 {
    -webkit-animation-name: dealto5-animate;
    -moz-animation-name: dealto5-animate;
    -ms-animation-name: dealto5-animate;
    -o-animation-name: dealto5-animate;
    animation-name: dealto5-animate;
    }
#deck6.dealto6 {
    -webkit-animation-name: dealto6-animate;
    -moz-animation-name: dealto6-animate;
    -ms-animation-name: dealto6-animate;
    -o-animation-name: dealto6-animate;
    animation-name: dealto6-animate;
    }
#deck7.dealto7 {
    -webkit-animation-name: dealto7-animate;
    -moz-animation-name: dealto7-animate;
    -ms-animation-name: dealto7-animate;
    -o-animation-name: dealto7-animate;
    animation-name: dealto7-animate;
    }
    @-webkit-keyframes dealto1-animate {
        0% {    visibility: visible; }
        to {
            top: 80%;
            height: var(--card-height);
            width: var(--card-width);  
            -webkit-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes dealto1-animate {
        0% {    visibility: visible; }
        to {
            top: 80%;
            height: var(--card-height);
            width: var(--card-width);   
            -moz-transform: rotate(360deg);   
        }
    }
    @-ms-keyframes dealto1-animate {
        0% {    visibility: visible; }
        to {
            top: 80%;
            height: var(--card-height);
            width: var(--card-width);  
            -ms-transform: rotate(360deg); 
        }
    }
    @-o-keyframes dealto1-animate {
        0% {    visibility: visible; }
        to {
            top: 80%;
            height: var(--card-height);
            width: var(--card-width);   
            -o-transform: rotate(360deg);   
        }
    }
    @keyframes dealto1-animate {
        0% {    visibility: visible; }
        to {
            top: 80%;
            height: var(--card-height);
            width: var(--card-width);  
            transform: rotate(360deg);    
        }
    }
    @-webkit-keyframes dealto2-animate {
        0% {    visibility: visible; }
        to {
            top: 55%;
            left: 20%;
            height: var(--card-height);
            width: var(--card-width);  
            -webkit-transform: rotate(360deg);    
        }
    }
    @-moz-keyframes dealto2-animate {
        0% {    visibility: visible; }
        to {
            top: 55%;
            left: 20%;
            height: var(--card-height);
            width: var(--card-width);   
            -moz-transform: rotate(360deg);  
        }
    }
    @-ms-keyframes dealto2-animate {
        0% {    visibility: visible; }
        to {
            top: 55%;
            left: 20%;
            height: var(--card-height);
            width: var(--card-width);  
            -ms-transform: rotate(360deg);  
        }
    }
    @-o-keyframes dealto2-animate {
        0% {    visibility: visible; }
        to {
            top: 55%;
            left: 20%;
            height: var(--card-height);
            width: var(--card-width);   
            -o-transform: rotate(360deg);    
        }
    }
    @keyframes dealto2-animate {
        0% {    visibility: visible; }
        to {
            top: 55%;
            left: 20%;
            height: var(--card-height);
            width: var(--card-width);  
            transform: rotate(360deg);    
        }
    }
    @-webkit-keyframes dealto3-animate {
        0% {    visibility: visible; }
        to {
            top: 30%;
            left: 20%;
            height: var(--card-height);
            width: var(--card-width);  
            -webkit-transform: rotate(360deg);   
        }
    }
    @-moz-keyframes dealto3-animate {
        0% {    visibility: visible; }
        to {
            top: 30%;
            left: 20%;
            height: var(--card-height);
            width: var(--card-width);  
            -moz-transform: rotate(360deg);     
        }
    }
    @-ms-keyframes dealto3-animate {
        0% {    visibility: visible; }
        to {
            top: 30%;
            left: 20%;
            height: var(--card-height);
            width: var(--card-width);   
            -ms-transform: rotate(360deg); 
        }
    }
    @-o-keyframes dealto3-animate {
        0% {    visibility: visible; }
        to {
            top: 30%;
            left: 20%;
            height: var(--card-height);
            width: var(--card-width);   
            -o-transform: rotate(360deg); 
        }
    }
    @keyframes dealto3-animate {
        0% {    visibility: visible; }
        to {
            top: 30%;
            left: 20%;
            height: var(--card-height);
            width: var(--card-width);  
            transform: rotate(360deg);    
        }
    }
    @-webkit-keyframes dealto4-animate {
        0% {    visibility: visible; }
        to {
            top: 5%;
            left: 37%;
            height: var(--card-height);
            width: var(--card-width);  
            -webkit-transform: rotate(360deg);   
        }
    }
    @-moz-keyframes dealto4-animate {
        0% {    visibility: visible; }
        to {
            top: 5%;
            left: 37%;
            height: var(--card-height);
            width: var(--card-width);   
            -moz-transform: rotate(360deg);    
        }
    }
    @-ms-keyframes dealto4-animate {
        0% {    visibility: visible; }
        to {
            top: 5%;
            left: 37%;
            height: var(--card-height);
            width: var(--card-width);  
            -ms-transform: rotate(360deg);  
        }
    }
    @-o-keyframes dealto4-animate {
        0% {    visibility: visible; }
        to {
            top: 5%;
            left: 37%;
            height: var(--card-height);
            width: var(--card-width);   
            -o-transform: rotate(360deg);    
        }
    }
    @keyframes dealto4-animate {
        0% {    visibility: visible; }
        to {
            top: 5%;
            left: 37%;
            height: var(--card-height);
            width: var(--card-width);  
            transform: rotate(360deg);    
        }
    }
    @-webkit-keyframes dealto5-animate {
        0% {    visibility: visible; }
        to {
            top: 5%;
            left: 59%;
            height: var(--card-height);
            width: var(--card-width);  
            -webkit-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes dealto5-animate {
        0% {    visibility: visible; }
        to {
            top: 5%;
            left: 59%;
            height: var(--card-height);
            width: var(--card-width);  
            -moz-transform: rotate(360deg);  
        }
    }
    @-ms-keyframes dealto5-animate {
        0% {    visibility: visible; }
        to {
            top: 5%;
            left: 59%;
            height: var(--card-height);
            width: var(--card-width);   
            -ms-transform: rotate(360deg);   
        }
    }
    @-o-keyframes dealto5-animate {
        0% {    visibility: visible; }
        to {
            top: 5%;
            left: 59%;
            height: var(--card-height);
            width: var(--card-width);  
            -o-transform: rotate(360deg);     
        }
    }
    @keyframes dealto5-animate {
        0% {    visibility: visible; }
        to {
            top: 5%;
            left: 59%;
            height: var(--card-height);
            width: var(--card-width);  
            transform: rotate(360deg);    
        }
    }
    @-webkit-keyframes dealto6-animate {
        0% {    visibility: visible; }
        to {
            top: 30%;
            left: 76%;
            height: var(--card-height);
            width: var(--card-width);  
            -webkit-transform: rotate(360deg);   
        }
    }
    @-moz-keyframes dealto6-animate {
        0% {    visibility: visible; }
        to {
            top: 30%;
            left: 76%;
            height: var(--card-height);
            width: var(--card-width);   
            -moz-transform: rotate(360deg);    
        }
    }
    @-ms-keyframes dealto6-animate {
        0% {    visibility: visible; }
        to {
            top: 30%;
            left: 76%;
            height: var(--card-height);
            width: var(--card-width);  
            -ms-transform: rotate(360deg);   
        }
    }
    @-o-keyframes dealto6-animate {
        0% {    visibility: visible; }
        to {
            top: 30%;
            left: 76%;
            height: var(--card-height);
            width: var(--card-width);  
            -o-transform: rotate(360deg);  
        }
    }
    @keyframes dealto6-animate {
        0% {    visibility: visible; }
        to {
            top: 30%;
            left: 76%;
            height: var(--card-height);
            width: var(--card-width);  
            transform: rotate(360deg);    
        }
    }
    @-webkit-keyframes dealto7-animate {
        0% {    visibility: visible; }
        to {
            top: 55%;
            left: 76%;
            height: var(--card-height);
            width: var(--card-width);  
            -webkit-transform: rotate(360deg);   
        }
    }
    @-moz-keyframes dealto7-animate {
        0% {    visibility: visible; }
        to {
            top: 55%;
            left: 76%;
            height: var(--card-height);
            width: var(--card-width);   
            -moz-transform: rotate(360deg);   
        }
    }
    @-ms-keyframes dealto7-animate {
        0% {    visibility: visible; }
        to {
            top: 55%;
            left: 76%;
            height: var(--card-height);
            width: var(--card-width);   
            -ms-transform: rotate(360deg);    
        }
    }
    @-o-keyframes dealto7-animate {
        0% {    visibility: visible; }
        to {
            top: 55%;
            left: 76%;
            height: var(--card-height);
            width: var(--card-width);  
            -o-transform: rotate(360deg); 
        }
    }
    @keyframes dealto7-animate {
        0% {    visibility: visible; }
        to {
            top: 55%;
            left: 76%;
            height: var(--card-height);
            width: var(--card-width);   
            transform: rotate(360deg);    
        }
    }
[id^="pot"] {
     background-size: contain;
     background-position: center;
     position: fixed;
     background-repeat: no-repeat;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-duration: 0.4s;
     -moz-animation-iteration-count: 1;
     -moz-animation-duration: 0.4s;
     -ms-animation-iteration-count: 1;
     -ms-animation-duration: 0.4s;
     -o-animation-iteration-count: 1;
     -o-animation-duration: 0.4s;
     animation-iteration-count: 1;
     animation-duration: 0.4s;
 } 
.largepot {
    background-image: url(../images/pot-l.png);
    left: 37.54%;
    top: 41%;
    height: 18%;
    width: 24.92%
}
.mediumpot {
    background-image: url(../images/pot-m.png);
    left: 42.29%;
    top: 45.16%;
    height: 9.68%;
    width: 15.42%
}
.smallpot {
    background-image: url(../images/pot-s.png);
    left: 45.015%;
    top: 46.395%;
    height: 7.21%;
    width: 9.97%
}
#pot1.potto1 {
    -webkit-animation-name: potto1-animate;
    -moz-animation-name: potto1-animate;
    -ms-animation-name: potto1-animate;
    -o-animation-name: potto1-animate;
    animation-name: potto1-animate;
}
#pot2.potto2 {
    -webkit-animation-name: potto2-animate;
    -moz-animation-name: potto2-animate;
    -ms-animation-name: potto2-animate;
    -o-animation-name: potto2-animate;
    animation-name: potto2-animate;
    }
#pot3.potto3 {
    -webkit-animation-name: potto3-animate;
    -moz-animation-name: potto3-animate;
    -ms-animation-name: potto3-animate;
    -o-animation-name: potto3-animate;
    animation-name: potto3-animate;
    }
#pot4.potto4 {
    -webkit-animation-name: potto4-animate;
    -moz-animation-name: potto4-animate;
    -ms-animation-name: potto4-animate;
    -o-animation-name: potto4-animate;
    animation-name: potto4-animate;
    }
#pot5.potto5 {
    -webkit-animation-name: potto5-animate;
    -moz-animation-name: potto5-animate;
    -ms-animation-name: potto5-animate;
    -o-animation-name: potto5-animate;
    animation-name: potto5-animate;
    }
#pot6.potto6 {
    -webkit-animation-name: potto6-animate;
    -moz-animation-name: potto6-animate;
    -ms-animation-name: potto6-animate;
    -o-animation-name: potto6-animate;
    animation-name: potto6-animate;
    }
#pot7.potto7 {
    -webkit-animation-name: potto7-animate;
    -moz-animation-name: potto7-animate;
    -ms-animation-name: potto7-animate;
    -o-animation-name: potto7-animate;
    animation-name: potto7-animate;
    }
    @-webkit-keyframes potto1-animate {to {top: 80%;        }    }
    @-moz-keyframes potto1-animate {to {top: 80%;}}
    @-ms-keyframes potto1-animate {to {top: 80%;}}
    @-o-keyframes potto1-animate {to {top: 80%;}}
    @keyframes potto1-animate {to {top: 80%;}}
    @-webkit-keyframes potto2-animate {to {top: 55%;left: 20%;}}
    @-moz-keyframes potto2-animate {to {top: 55%;left: 20%; }}
    @-ms-keyframes potto2-animate {to {top: 55%;left: 20%;}}
    @-o-keyframes potto2-animate {to {top: 55%;left: 20%;}}
    @keyframes potto2-animate {to {top: 55%;left: 20%;}}
    @-webkit-keyframes potto3-animate {to {top: 30%;left: 20%;}}
    @-moz-keyframes potto3-animate {to {top: 30%;left: 20%;}}
    @-ms-keyframes potto3-animate {to {top: 30%;left: 20%;}}
    @-o-keyframes potto3-animate  {to {top: 30%;left: 20%;}}
    @keyframes potto3-animate  {to {top: 30%;left: 20%;}}
    @-webkit-keyframes potto4-animate {to {top: 5%;left: 37%;}}
    @-moz-keyframes potto4-animate {to {top: 5%;left: 37%;}}
    @-ms-keyframes potto4-animate {to {top: 5%;left: 37%;}}
    @-o-keyframes potto4-animate {to {top: 5%;left: 37%;}}
    @keyframes potto4-animate {to {top: 5%;left: 37%;}}
    @-webkit-keyframes potto5-animate {to {top: 5%;left: 59%;}}
    @-moz-keyframes potto5-animate {to {top: 5%;left: 59%;}}
    @-ms-keyframes potto5-animate {to {top: 5%;left: 59%;}}
    @-o-keyframes potto5-animate {to {top: 5%;left: 59%;}}
    @keyframes potto5-animate {to {top: 5%;left: 59%;}}
    @-webkit-keyframes potto6-animate {to {top: 30%;left: 76%;}}
    @-moz-keyframes potto6-animate {to {top: 30%;left: 76%;}}
    @-ms-keyframes potto6-animate {to {top: 30%;left: 76%;}}
    @-o-keyframes potto6-animate {to {top: 30%;left: 76%;}}
    @keyframes potto6-animate {to {top: 30%;left: 76%;}}
    @-webkit-keyframes potto7-animate {to {top: 55%;left: 76%;}}
    @-moz-keyframes potto7-animate {to {top: 55%;left: 76%;}}
    @-ms-keyframes potto7-animate {to {top: 55%;left: 76%;}}
    @-o-keyframes potto7-animate {to {top: 55%;left: 76%;}}
    @keyframes potto7-animate {to {top: 55%;left: 76%;}}
#thepotsizewrapper {
    text-align: center;
    bottom: calc(25.5% + var(--PotRaiser));
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    position: fixed;
}
#thepotsize {
    display: inline;
    background-color: rgba(182, 218, 148, 0.589);
    text-align: center;
    font-size: 3vmin;
    font-weight: bold;
    color: black;
    border-radius: 1vmin;
}
#thepotsize:not(:empty)::before {
    content: "Pot: ";
}
.curtain {
    display: block;
    position: fixed;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
}
.leftcurtain {
    position: absolute;
    left: 2.5vmin;
    width: 20vmin; /* calc((2 / 5) * 50vmin); */
    top: calc(50% - 40vmin); 
    height: 80vmin;
    background-image: url(../images/choosegame.png);
    background-size: contain;
    background-repeat: no-repeat;

}
.rightcurtain {
    position: absolute;
    right: 2.5vmin;
    width: 20vmin; /* calc((2 / 5) * 50vmin); */
    top: calc(50% - 40vmin); 
    height: 80vmin;
    background-image: url(../images/choosewilds.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.chipMenu {
    display: block;
    position: absolute;
    width: 50vmin;
    height: 50vmin;
    top: calc(50% - (50vmin / 2));
    left: calc(50% - (50vmin / 2));
    background-size: cover;
    text-align: center;
    border-radius: 50%;
    border-color: black;
    border-style: none;
    overflow: hidden;
}
.transparentChipButton {
    display: block;
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 50%;
    border-color:  rgba(133, 45, 45, 1);
    border-style: thick;
}
#ActionPanel {
    background-color: rgba(0, 0, 0, 0);
}
#ActionPanelMiddleChip {
    display: block;
    position: absolute;
    top: 25.5%;
    height: calc(49% - 8vmin);
    left: calc(50% - (((49vh - 8vmin) * 3.75) / 10) );
    width: calc(((49vh - 8vmin) * 3.75) / 5);
    text-align: center;
    overflow: hidden;
}
#ActionPanelMiddleChip .ProgressCircle {
    position: absolute;
    top: 15%; /* calc(25.5% + ( (49% - 8vmin) / 10 ) ); */
    height: 70%; /* calc( ( (49% - 8vmin) / 5 ) * 4 ); */
    left: 15%; /* calc(50% - (((49vh - 8vmin) * 2.5) / 10) ); */
    width: 70%; /* calc(((49vh - 8vmin) * 2.5) / 5); */
    border-radius: 0%;
    background-color: rgba(89,89,89,1);
}
#ActionPanel .slider {
        bottom: calc(15% - 1vmin);
        left: 50%;
        width: calc( ( (49vh - 8vmin) / 5 ) * 3.5 );
        height: 2vmin;
}
#ActionPanel .rotatedText{
    font-size: 4.5vh;
}
#ActionPanel .rotatedTextBottom{
    font-size: 4.5vh;
}
#betBackground {
    display: block;
    position: absolute;
    top: 0; /* 25.5%; */
    height: 100%; /* calc(49% - 8vmin); */
    left: 0; /* calc(50% - (((49vh - 8vmin) * 3.75) / 10) ); */
    width: 100%; /* calc(((49vh - 8vmin) * 3.75) / 5); */
    background-size: cover;
    text-align: center;
    overflow: hidden;
    background-image: url("../images/betchip.png");
    background-repeat: no-repeat;
}
#FoldButton {
    background-image: url(../images/btnfold.png);
}
#BetButton {
    position: absolute;
    left: 0%;
    width: 100%;
    top: 0%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
}
#BetButton.Check {
    background-image: url(../images/btncheck.png);
}
#BetButton.Bet {
    background-image: url(../images/btnbet.png);
}
#BetButton.Raise {
    background-image: url(../images/btnraise.png);
}
#BetButton.Call {
    background-image: url(../images/btncall.png);
}
#BetButton.RebuyBet {
    background-image: url(../images/btnrebuybet.png);
}
#BetButton.RebuyRaise {
    background-image: url(../images/btnrebuyraise.png);
}
#BetButton.RebuyCall {
    background-image: url(../images/btnrebuycall.png);
}

#GameChooserChip {background-image: url("../images/gameselectorplay.png");}
#AreYouSureMenu {background-image: url("../images/confirmation.png");}
#tablechooser {background-image: url("../images/tablechoicemenu.png");}
#buyinchooser {background-image: url("../images/buyinchip.png");}
#loginchooser {background-image: url("../images/signinchip.png");}
#AntePrompt {background-image: url("../images/gameselector.png");}
#DrawPrompt {background-image: url("../images/blackchip.png");}

/*
5x5
heading = .5 x 2
inner = 3.5
*/
.PanelHeader {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 1%;
    background-size: cover;
}
.rotatedText{
    position: absolute;
    text-align: center;
    width: 5%;
    left: 47.5%;
    bottom: 50%;
    height: 50%;
    color: white;
    font-weight: normal;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 0;
    font-size: 5vmin;
    -webkit-transform-origin: bottom center;    
    -moz-transform-origin: bottom center;    
    -ms-transform-origin: bottom center;
    -o-transform-origin: bottom center;
    transform-origin: bottom center;
}
.rotatedTextBottom{
    position: absolute;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    width: 5%;
    left: 47.5%;
    bottom: 0%;
    height: 50%;
    color: white;
    font-weight: normal;
    border-radius: 0;
    font-size: 5vmin;
    -webkit-transform-origin: top center;    
    -moz-transform-origin: top center;    
    -ms-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    /*-ms-transform: translateY(-100%);*/
    /*transform: translateY(-100%);*/
}
.rotatedTextBottom-content{
    position: absolute;
    bottom: 0;
}
/* 
#TotalBet{
    position: absolute;
    text-align: center;
    width: 40%;
    left: 30%;
    top: 2.2%;
    height: 10%;
    color: white;
    font-weight: bold;
    border-radius: 0;
    font-size: 7vmin
}
.totalbet{
    position: absolute;
    text-align: center;
    width: 5%;
    left: 47.5%;
    bottom: 50%;
    height: 50%;
    color: white;
    font-weight: bold;
    border-radius: 0;
    font-size: 7vmin;
    -webkit-transform-origin: bottom center;   
    -ms-transform-origin: bottom center;   
    transform-origin: bottom center;   
}
#TB1{-webkit-transform: rotate(-25.5deg);-ms-transform: rotate(-25.5deg);transform: rotate(-25.5deg);}
#TB2{-webkit-transform: rotate(-19deg);-ms-transform: rotate(-19deg);transform: rotate(-19deg);}
#TB3{-webkit-transform: rotate(-12.5deg);-ms-transform: rotate(-12.5deg);transform: rotate(-12.5deg);}
#TB4{-webkit-transform: rotate(-6deg);-ms-transform: rotate(-6deg);transform: rotate(-6deg);}
#TB5{-webkit-transform: rotate(0.5deg);-ms-transform: rotate(0.5deg);transform: rotate(0.5deg);}
#TB6{-webkit-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);}
#TB7{-webkit-transform: rotate(13.5deg);-ms-transform: rotate(13.5deg);transform: rotate(13.5deg);}
#TB8{-webkit-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg);}
#TB9{-webkit-transform: rotate(26.5deg);-ms-transform: rotate(26.5deg);transform: rotate(26.5deg);} */
  .slider {
    display: block;
    position: absolute;
    bottom: 6.5vmin;
    left: 50%;
    outline: none;
    -webkit-appearance: none;
    width: 70%;
    height: 2vmin;
    background:  rgba(36, 50, 109, 0.925);;
    border-radius: 1vw;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
    -webkit-transform-origin:  left center;    
    -moz-transform-origin:  left center;    
    -ms-transform-origin:  left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin: 0;
    padding: 0;
  }
  .sliderlabel{
      bottom: 76vh;
      text-align: center;
      font-size: large;
      font-weight: bold;
      color: whitesmoke;
  }
  .curtain .slider{
      left: 9.75vmin;
      bottom: 9.75vmin; /* 7.75vmin; */
      width: 60.75vmin;
  }
  .slider:hover {
    background: midnightblue;
  }
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10vmin;
    height: 10vmin;
    border: 0;
    background: url('../images/bluechip.png');
    background-size: cover;
    cursor: pointer;
  }
  .slider::-moz-range-thumb {
    width: 10vmin;
    height: 10vmin;
    border: 0;
    background: url('../images/bluechip.png');
    background-size: cover;
    cursor: pointer;
  }
  .actionButton {
    display: inline-block;
    background-color: white;
    text-align: center;
    font-weight: bold;
    font-size: 3.8vmin;
    color: black;
    font-weight: bold; 
    border-radius: 1vmin;
    padding: .3vmin;
    border-color: black;
    border-style: ridge;
    vertical-align: middle;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#DrawButton {
    position: absolute;
    top: 55%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
  .leftwrapper {
    position: absolute;
    top: 50%;
    left: 7.3vmin;
    width: 17.7vmin;
    text-align: left;
  }  
  .rightwrapper {
    position: absolute;
    top: 50%;
    right: 7.3vmin;
    width: 17.7vmin;
    text-align: right;
  }
  .centerwrapper {
    position: absolute;
    top: 30%;
    left: 15%;
    width: 70%;
    height: 40%;
    text-align: center;
  }
  .cornerBlock {
    padding: 0px;
    position: fixed;
    text-align: center;
    background-color: rgba(182, 218, 148, 0.589);
    border-radius: 4vmin;
    border-bottom-left-radius: 1vmin;
    border-bottom-right-radius: 1vmin;
    height: 22.2%;
    width: 31.4vw;
    top: 76.8%;
    overflow: hidden;
  }
  #BankTable {
    left: 67.6vw;
}
#MessageCenter {
    left: 1vw;
}
#messageList {
    position: absolute;
    top: 2.85vmin;
    text-align: left;
    padding: 0;
    overflow: auto;
    height: calc(100% - 2.85vmin);
    width: 100%;
}
#messageList>div {
    border-bottom: groove;
    border-bottom-width: thin;
    border-color: rgba(182, 218, 148, 0.589);
}
.bankTabsrow {
    position: absolute;
    height: calc((100% - 2.5vw)/7);
    font-size: calc(.8* ((21.2vh - 2.5vw)/7));
}
.bankName {left: 1.5%; text-align: left; overflow: hidden; max-width: 73.4%;}
.bankTab {right: 1.5%; text-align: right; overflow: hidden; max-width: 73.4%;}
[id^="P1"] {top: 2.5vmin;}
[id^="P2"] {top: calc(2.5vmin + ((21.2vh - 2.5vmin)/7));}
[id^="P3"] {top: calc(2.5vmin + 2 * ((21.2vh - 2.5vmin)/7));}
[id^="P4"] {top: calc(2.5vmin + 3 * ((21.2vh - 2.5vmin)/7));}
[id^="P5"] {top: calc(2.5vmin + 4 * ((21.2vh - 2.5vmin)/7));}
[id^="P6"] {top: calc(2.5vmin + 5 * ((21.2vh - 2.5vmin)/7));}
[id^="P7"] {top: calc(2.5vmin + 6 * ((21.2vh - 2.5vmin)/7));}

#Drawlabel {
    position: absolute;
    color: black;
    font-weight: bold;
    font-size: 4vmin; 
    left: 0;
    width: 100%;
}

[id^="Raises"] {
    position: absolute;
    color: black;
    font-weight: bold;
    font-size: 5vmin;
}
#RaisesNumber {
    top: 21%;
    right: 55%;
}
#Raiseslabel {
    top: 29%;
    right: 54%;
}
#seatsAvailable {
    position: absolute;
    color: black;
    font-weight: bold;
    font-size: 2vmin;
    top: 36%;
    left: 53%;
}
#seatsAvailableNumber {
    position: absolute;
    color: black;
    font-weight: bold;
    font-size: 3vmin;
    top: 36%;
    left: 74.5%;
}
#seatsAvailableNumber.red {
    color: maroon;
}
/*
.bankTabTable {
    position: absolute;
    top: 2.5vw;
    text-align: left;
    padding: 0;
    border: 1px solid black;
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    
}
td:nth-child(1) {
    text-align: left;
}
td:nth-child(2) {
    text-align: right;
}*/
.info {
    visibility: hidden;
    position: fixed;
    top: 75vmin;
    left: 37vmin;    
}
/*
5x5
heading = .5 x 2
inner = 3.5
*/
.ProgressCircle {
    position: absolute;
    top: 15%;
    height: 70%;
    left: 15%;
    width: 70%;
    border-radius: 50%;
    border-color: black;
    border-style: none;
    overflow: hidden;
    transform: translateZ(0);
}
.ProgressSeat {
    position: absolute;
    top: -50%;
    height: 200%;
    left: -50%;
    width: 200%;
    border-radius: 0%;
    overflow: hidden;
}
.LeftHalf {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
.RightHalf {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
.LeftBlocker {
    position: absolute;
    top: -500%;
    left: 100%;
    width: 10000%;
    height: 1100%;
    background-color: maroon;
    -webkit-transform-origin: 0% 50%;    
    transform-origin: 0% 50%;
    border: none;
}
.RightBlocker {
    position: absolute;
    top: -500%;
    right: 100.1%;
    width: 10000.1%;
    height: 1100%;
    background-color: maroon;
    -webkit-transform-origin: right center;    
    transform-origin: right center;
    border: none;
}
.ProgressAnimateL {
    -webkit-animation: Progress-animate-L var(--TimeLimit) linear 1 forwards;
    animation: Progress-animate-L var(--TimeLimit)  linear 1 forwards;
    }
.ProgressAnimateR {
    -webkit-animation: Progress-animate-R var(--TimeLimit) linear 1 forwards;
    animation: Progress-animate-R var(--TimeLimit)  linear 1 forwards;
    }
    @-webkit-keyframes Progress-animate-L {
        0%   {background-color:green; }
        50%  {background-color: goldenrod ;-webkit-transform: rotate(-180deg)}
        100% {background-color:maroon;-webkit-transform: rotate(-180deg)}}
    @keyframes Progress-animate-L {
        0%   {background-color:green; }
        50%  {background-color: goldenrod ; transform: rotate(-180deg)}
        100% {background-color:maroon; transform: rotate(-180deg)}}
    @-webkit-keyframes Progress-animate-R {
        0%   {background-color:green; }
        50%  {background-color: goldenrod; -webkit-transform: rotate(0deg); }
        100% {background-color:maroon;-webkit-transform: rotate(-180deg)}}
    @keyframes Progress-animate-R {
        0%   {background-color:green; }
        50%  {background-color: goldenrod; transform: rotate(0deg); }
        100% {background-color:maroon; transform: rotate(-180deg)}}
.ProgressAnimateLSafety {
    -webkit-animation: Progress-animate-L-Safety calc(2 * var(--TimeLimit)) linear 1 forwards;
    animation: Progress-animate-L-Safety calc(2 * var(--TimeLimit))  linear 1 forwards;
    }
.ProgressAnimateRSafety {
    -webkit-animation: Progress-animate-R calc(2 * var(--TimeLimit)) linear 1 forwards;
    animation: Progress-animate-R calc(2 * var(--TimeLimit))  linear 1 forwards;
    }
    @-webkit-keyframes Progress-animate-L-Safety {
        0%   {background-color:green; }
        25%  {background-color: goldenrod ;-webkit-transform: rotate(-180deg)}
        50% {background-color:maroon;-webkit-transform: rotate(-180deg)}
        100% {background-image: url("../images/cautionbg.png"); background-size: 3vw; background-repeat: repeat; -webkit-transform: rotate(-180deg)}}
    @keyframes Progress-animate-L-Safety {
        0%   {background-color:green; }
        25%  {background-color: goldenrod ; transform: rotate(-180deg)}
        50% {background-color:maroon; transform: rotate(-180deg)}
        100% {background-image: url("../images/cautionbg.png"); background-size: 3vw; background-repeat: repeat; transform: rotate(-180deg)}}
    @-webkit-keyframes Progress-animate-R-Safety {
        0%   {background-color:green; }
        25%  {background-color: goldenrod; -webkit-transform: rotate(0deg); }
        50% {background-color:maroon;-webkit-transform: rotate(-180deg)}
        100% {background-image: url("../images/cautionbg.png"); background-size: 3vw; background-repeat: repeat;-webkit-transform: rotate(-180deg)}}
    @keyframes Progress-animate-R-Safety {
        0%   {background-color:green; }
        25%  {background-color: goldenrod; transform: rotate(0deg); }
        50% {background-color:maroon; transform: rotate(-180deg)}
        100% {background-image: url("../images/cautionbg.png"); background-size: 3vw; background-repeat: repeat; transform: rotate(-180deg)}}

.hiddenElement {    
    visibility: hidden;}

.seatTimer {
    padding: 0px;
    position: fixed;
    text-align: center;
    border-radius: 4.2vmin;
    height: 26.1%;
    width: 35.33vw;
    overflow: hidden;
}
.seatTimers1 {
    bottom: 0.2%;
    left: 32.33vw; 
    border-bottom-left-radius: 1vmin;
    border-bottom-right-radius: 1vmin; 
}
.seatTimers2 {
    top: 50.7%;
    left: 0vw;  
}
.seatTimers3 {
    top: 25.4%;
    left: 0vw;  
}
.seatTimers4 {
    top: 0.1%;
    right: 49.5%;  
}
.seatTimers5 {
    top: 0.1%;
    left: 49.5%;  
}
.seatTimers6 {
    top: 25.4%;
    right: 0vw;  
}
.seatTimers7 {
    top: 50.7%;
    right: 0vw;  
}
[class^="seatTimers"] .LeftBlocker {
    -webkit-animation: Progress-animate-L var(--TimeLimit) linear 1 forwards;
    animation: Progress-animate-L var(--TimeLimit)  linear 1 forwards;
}
[class^="seatTimers"] .RightBlocker {
    -webkit-animation: Progress-animate-R var(--TimeLimit) linear 1 forwards;
    animation: Progress-animate-R var(--TimeLimit)  linear 1 forwards;
    }

#ConnectivityMessage {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: .7;
    color: white;
    font-weight: bold;
    font-size: larger;
    text-align: center;
}
#ConnectivityText {
    position: absolute;
    top: 48%;
}
.BannerButtons {
    position: fixed;
    top: 1%;
    left: 1vw;
    height: 24.5%;
    width: 99vw;
    background-color: rgba(218, 165, 32, 0);
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.AnimateBanner {
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-name: FlashBanner;
}
.TopLeftCorner {
    position: absolute;
    left: 0%;
    width: 15.17vw;
    height: 100%;
}
.TopRightCorner {
    position: absolute;
    right: 1%;
    width: 15.17vw;
    height: 100%;
}
@keyframes FlashBanner {
    0% {opacity: 1; background-color: goldenrod;}
    20% {opacity: 1; background-color: black;}
    40% {opacity: 1; background-color: goldenrod;}
    60% {opacity: 1; background-color: black;}
    80% {opacity: 1; background-color: goldenrod;}
    100% {opacity: 0; background-color: black;}
}
.CornerButton {
    position: absolute;
    left: 0%;
    width: 100%;
    top: 0%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
}
#InButton {
    background-image: url("../images/inbtn.png");
}
#OutButton {
    background-image: url("../images/outbtn.png");
}
[class^="token"] {
    display: inline-block;
    height: 2vmin;
    width: 2vmin;
    vertical-align: bottom;
    border: none;
    border-color: rgba(0, 0, 0, 0);
    border-radius: 2vmin;
    overflow: hidden;
    padding-left: 0.25vmin;
    margin-bottom: 0.5vmin;
    border-image-width: 0;

}
.token1 {
    background: url(../images/blackchip.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.token2 {
    background: url(../images/bluechip.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.token3 {
    background: url(../images/redchip.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.token4 {
    background: url(../images/greenchip.png);
    background-size: contain;
    background-repeat: no-repeat;
}
#fullscreenbutton {
    position: fixed;
    top: 5%;
    right: 5%;
    height: 4vw;
    width: 4vw;
    background-image: url(../images/fullscreen.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.2;
}
#fullscreenbutton:hover {
    top: 1%;
    right: 1%;
    height: 10vw;
    width: 10vw;
    opacity: 1;
}