#controlPanel {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

#topPanel {
    position: absolute;
    width: 100vw;
    height: 7vh;
    left: 0;
    top: 0;
    background: #1C1B20;
}

#backToLobby {
    position: absolute;
    height: 3.5vh;
    width: 15vw;
    top: 1.75vh;
    left: 2.5vw;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
}

#backToLobbyIcon {
    position: absolute;
    height: 3vh;
    width: 3vh;
    top: 0;
    left: 0;
}

#backToLobbyText {
    position: absolute;
    left: 4vh;
    font-size: 1.75vh;
    line-height: 3.5vh;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#CasinoFloorLogo {
    position: absolute;
    height: 3.5vh;
    left: 20vw;
    top: 1.75vh;
}

#userInfo {
    position: absolute;
    height: 3.5vh;
    width: 20vw;
    top: 1.75vh;
    left: 80vw;
}

#userInfoAvatar {
    position: absolute;
    height: 3.5vh;
    width: 3.5vh;
    left: 0;
    top: 0;
}

#userInfoAvatarPNG {
    width: 100%;
    height: 100%;
}


#userInfoText {
    position: absolute;
    height: 3.5vh;
    width: 16.5vw;
    left: 5vh;
    top: 0;
    font-size: 1.7vh;
    line-height: 1.75vh;
}


#userInfoTextNickname {
    position: absolute;
    height: 1.75vh;
    width: 16.5vw;
    left: 0;
    top: 0;
    text-transform: capitalize;
}

#userInfoTextBalancePanel {
    position: relative;
    height: 1.75vh;
    width: 16.5vw;
    left: 0;
    top: 1.75vh;
}

#userInfoTextBalanceLabel {
    float: left;
    height: 1.75vh;
}

#userInfoTextBalance {
    float: left;
    height: 1.75vh;
    color: #FF4F5E;
    padding-left: 1vh;
}

#furniture {
    position: absolute;
    top: 0;
    width: 100%;
    height: 95%;
}

#tableFurniturePNG {
    width: 100%;
    height: 100%;
}

#bottomPanel {
    position: absolute;
    top: 83vh;
    left: 0;
    height: 16vh;
    width: 80vw;
    padding-left: 2.5vw;
    overflow: hidden;
}

.portrait #bottomPanel {
    width: 100vw;
}

.landscape #bottomPanel {
    width: 100vw;
}

#userInfoPanel {
    position: relative;
    top: 0;
    height: 15vh;
    width: 20vw;
    float: left;
}

#userInfoRoundPanel {
    position: absolute;
    top: 0;
    left: 0;
    height: 5vh;
    width: 10vw;
    background: #1B1B20;
    border-radius: 3vh;
}

#userInfoRoundIcon {
    position: absolute;
    top: 1vh;
    left: 1vh;
    height: 3vh;
    width: 3vh;
}

#roundIDLabel {
    position: absolute;
    top: 0;
    left: 5vh;
    height: 2.5vh;
    opacity: 0.8;
    text-transform: uppercase;
    font-size: 1.5vh;
    padding-top: 1vh;
}

#roundID {
    position: absolute;
    top: 2.5vh;
    left: 5vh;
    height: 2.5vh;
    color: #FF4F5E;
    font-size: 1.5vh;
    padding-bottom: 1vh;
}

#userInfoMinbetPanel {
    position: absolute;
    top: 5vh;
    left: 0;
    height: 5vh;
    width: 10vw;
    background: #1B1B20;
    border-radius: 3vh;
}

#userInfoMinbetIcon {
    position: absolute;
    top: 1vh;
    left: 1vh;
    height: 3vh;
    width: 3vh;
}

#userInfoMinbetLabel {
    position: absolute;
    top: 0;
    left: 5vh;
    height: 2.5vh;
    opacity: 0.8;
    text-transform: uppercase;
    font-size: 1.5vh;
    padding-top: 1vh;
}

#minBet {
    position: absolute;
    top: 2.5vh;
    left: 5vh;
    height: 2.5vh;
    color: #FF4F5E;
    font-size: 1.5vh;
    padding-bottom: 1vh;
}

#userInfoMaxbetPanel {
    position: absolute;
    top: 10vh;
    left: 0;
    height: 5vh;
    width: 10vw;
    background: #1B1B20;
    border-radius: 3vh;
}

#userInfoMaxbetIcon {
    position: absolute;
    top: 1vh;
    left: 1vh;
    height: 3vh;
    width: 3vh;
}

#userInfoMaxbetLabel {
    position: absolute;
    top: 0;
    left: 5vh;
    height: 2.5vh;
    opacity: 0.8;
    text-transform: uppercase;
    font-size: 1.5vh;
    padding-top: 1vh;
}

#maxBet {
    position: absolute;
    top: 2.5vh;
    left: 5vh;
    height: 2.5vh;
    color: #FF4F5E;
    font-size: 1.5vh;
    padding-bottom: 1vh;
}

#userInfoTotalbetPanel {
    position: absolute;
    top: 0;
    left: 10vw;
    height: 5vh;
    width: 10vw;
    background: #1B1B20;
    border-radius: 3vh;
}

#userInfoTotalbetIcon {
    position: absolute;
    top: 1vh;
    left: 1vh;
    height: 3vh;
    width: 3vh;
}

#userInfoTotalbetLabel {
    position: absolute;
    top: 0;
    left: 5vh;
    height: 2.5vh;
    opacity: 0.8;
    text-transform: uppercase;
    font-size: 1.5vh;
    padding-top: 1vh;
}

#totalBet {
    position: absolute;
    top: 2.5vh;
    left: 5vh;
    height: 2.5vh;
    color: #FF4F5E;
    font-size: 1.5vh;
    padding-bottom: 1vh;
}

#userInfoWinningsPanel {
    position: absolute;
    top: 5vh;
    left: 10vw;
    height: 5vh;
    width: 10vw;
    background: #1B1B20;
    border-radius: 3vh;
}

#userInfoWinningsIcon {
    position: absolute;
    top: 1vh;
    left: 1vh;
    height: 3vh;
    width: 3vh;
}

#userInfoWinningsLabel {
    position: absolute;
    top: 0;
    left: 5vh;
    height: 2.5vh;
    opacity: 0.8;
    text-transform: uppercase;
    font-size: 1.5vh;
    padding-top: 1vh;
}

#winnings {
    position: absolute;
    top: 2.5vh;
    left: 5vh;
    height: 2.5vh;
    color: #FF4F5E;
    font-size: 1.5vh;
    padding-bottom: 1vh;
}

#userInfoBalancePanel {
    position: absolute;
    top: 10vh;
    left: 10vw;
    height: 5vh;
    width: 10vw;
    background: #1B1B20;
    border-radius: 3vh;
}

.portrait #userInfoBalancePanel, .landscape #userInfoBalancePanel {
    position: absolute;
    top: 10vh;
    left: 0;
    height: 6vh;
    width: 25vw;
    border-radius: 3vh;
    text-align: center;
}

.landscape #userInfoBalancePanel {
    width: 15vw;
}

#userInfoBalanceIcon {
    position: absolute;
    top: 1vh;
    left: 1vh;
    height: 3vh;
    width: 3vh;
}

#userInfoBalanceLabel {
    position: absolute;
    top: 0;
    left: 5vh;
    height: 2.5vh;
    opacity: 0.8;
    text-transform: uppercase;
    font-size: 1.5vh;
    padding-top: 1vh;
}

.portrait #userInfoBalanceLabel, .landscape #userInfoBalanceLabel {
    left: 0;
    height: 4vh;
    font-size: 2vh;
    padding-top: 1vh;
    width: 25vw;
}

.landscape #userInfoBalanceLabel {
    width: 15vw;
}

#balance {
    position: absolute;
    top: 2.5vh;
    left: 5vh;
    height: 2.5vh;
    color: #FF4F5E;
    font-size: 1.5vh;
    padding-bottom: 1vh;
}

.portrait #balance, .landscape #balance {
    top: 4vh;
    left: 0;
    height: 4vh;
    width: 25vw;
    font-size: 2vh;
}

.landscape #balance {
    width: 15vw;
}

.MyselfDiv{
    position: relative;
    top: 0;
    height: 15vh;
    float: left;
    padding-left: 1vw;
}

.portrait .MyselfDiv{
    height: 16vh;
    width: 25vw;
}

.landscape .MyselfDiv{
    height: 16vh;
    width: 15vw;
}

#myself .playerImg {
    height: 15vh;
    width: 15vh;
    left: calc(50% - (15vh/2));
}

.portrait #myself .playerImg, .landscape #myself .playerImg {
    top: 0;
    height: 10vh;
    width: 10vh;
    left: calc(50% - (10vh/2));
}



#playerOptions {
    position: relative;
    top: 0;
    height: 100%;
    padding-left: 1vw;
    float:left;
    overflow: scroll;
}

.portrait #playerOptions {
    position: absolute;
    top: 0;
    left: 25vw;
    height: 16vh;
    width: 75vw;
}

#backToLobbyBtnMobile {
    position: absolute;
    top: 1vh;
    left: 2.5vw;
    height: 6vh;
    width: 6vh;
    background: RGBa(0,0,0,0.2);
    border-radius: 100%;
    cursor: pointer;
    z-index: 1000;
    pointer-events: auto;
}

.backToLobbyBtnMobile #backToLobbyIcon {
    top: 1vh;
    left: 1vh;
    height: 4vh;
    width: 4vh;
}

#rulesBtn {
    position: absolute;
    height: 4vh;
    top: 10vh;
    left: 2.5vw;
    border-radius: 4vh;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 2vh;
    text-transform: uppercase;
    padding-left: 5vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    padding-right: 2vh;
    z-index: 1000;
    pointer-events: auto;
}

#rulesBtnMobile {
    position: absolute;
    top: 7vh;
    left: 2.5vw;
    height: 6vh;
    width: 6vh;
    background: RGBa(0,0,0,0.2);
    border-radius: 100%;
    cursor: pointer;
    z-index: 1000;
    pointer-events: auto;
}

#rulesIcon {
    position: absolute;
    top: 0;
    left: 0;
    height: 4vh;
    width: 4vh;
}

.rulesBtnMobile #rulesIcon {
    top: 1vh;
    left: 1vh;
    height: 4vh;
    width: 4vh;
}

#rulesPanel {
    position: absolute;
    width: 16vw;
    height: 30vh;
    left: 2.5vw;
    top: 15vh;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 1vh;
    padding: 1vh;
    overflow: scroll;
    z-index: 100;
    pointer-events: auto;
    text-align: left;
}

.portrait #rulesPanel {
    width: 50vw;
    height: 50vh;
    top: 15vh;
    font-size: 2vh;
    line-height: 2.1vh;
    z-index: 1000;
}

.landscape #rulesPanel {
    width: 30vw;
    height: 50vh;
    top: 15vh;
    font-size: 2vh;
    line-height: 2.1vh;
}

#closeRulesIcon {
    position: absolute;
    height: 2vh;
    width: 2vh;
    right:1vh;
    top: 1vh;
    cursor: pointer;
    pointer-events: auto;
}

#logo {
    position: absolute;
    height: 5vh;
    top: 10vh;
    right: 2.5vw;
    z-index: 1000;
}

.logoImg {
    height: 100%;
    filter: grayscale(100%);
}

#menuPanel {
    position: absolute;
    width: 16vw;
    bottom: 1vh;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 100;
}

#cpMenuIcon {
    position: absolute;
    height: 3vh;
    width: 3vh;
    top: calc(50% - 1.5vh);
    left: -5vh;
    cursor: pointer;
}

#menuPanel .arrowIcon {
    position: absolute;
    height: 2vh;
    width: 2vh;
    top: 0.5vh;
    right: 0;
}

.menuItem {
    position: relative;
    width: 100%;
}



#historyHeader {
    width: 100%;
    height: 4vh;
    cursor: pointer;
}

#historyHeaderIcon {
    height: 3vh;
    width: 3vh;
    float: left;
}

#historyHeaderText {
    height: 4vh;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-left: 5vh;
    padding-top: 1vh;
}

#historyDisplay {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 53vh;
    overflow: scroll;
}

.historyItem {
    width: 100%;
    cursor: pointer;
}

.historyBets, .historyWinnings, .historyWon, .historyLost {
    width: 100%;
    height: 1.5vh;
    font-size: 1vh;
    text-align: center;
}

.historyLost {
    color: #FF4F5E;
}

.replayRoundBtn {
    position: relative;
    height: 2vh;
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    border-radius: 2vh;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    background-size: contain;
    background-image: url("/images/controlPanelIcons/ic_rebet.svg");
    background-repeat: no-repeat;
}

#replayWarning{
    position: absolute;
    height: 50%;
    width: 50%;
    font-size: 3vh;
    line-height: 3.5vh;
    border-radius: 1vh;
    background: rgba(0, 0, 0, 0.8);
    top: 25%;
    left: 25%;
    padding: 10%;
}

#replayWarning #OKBtn {
    position: absolute;
    width: 30%;
    height: 4vh;
    border-radius: 3vh;
    background: green;
    bottom: 0;
    right: 50%;
}

#replayWarning #CancelBtn {
    position: absolute;
    width: 30%;
    height: 4vh;
    border-radius: 3vh;
    background: red;
    bottom: 0;
    left: 50%;
}

#avatarHeader {
    width: 100%;
    height: 4vh;
    cursor: pointer;
}

#avatarHeaderIcon {
    height: 3vh;
    width: 3vh;
    float: left;
}

#avatarHeaderText {
    height: 4vh;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-left: 5vh;
    padding-top: 1vh;
}

#avatarDisplay {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 55vh;
}

#outcomesHeader {
    width: 100%;
    height: 4vh;
    cursor: pointer;
}

#outcomesHeaderIcon {
    height: 3vh;
    width: 3vh;
    float: left;
}

#outcomesHeaderText {
    height: 4vh;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-left: 5vh;
    padding-top: 1vh;
}

#demoHeader {
    width: 100%;
    height: 4vh;
    cursor: pointer;
}

#demoHeaderIcon {
    height: 3vh;
    width: 3vh;
    float: left;
}

#demoHeaderText {
    height: 4vh;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-left: 5vh;
    padding-top: 1vh;
}

#countdown {
    position: absolute;
    left:0;
    top: 0;
    height: 100%;
    width: 12vh;
    font-size: 5vh;
    color: red;
    background: ivory;
    border-radius: 1vh;
}

.portrait #countdown, .landscape #countdown {
    top: 0;
}

#players {
    position: absolute;
    height: 12vh;
    width: 100vw;
    bottom: 10vh;
    pointer-events: auto;
}

#presenters {
    position: absolute;
    top: 7vh;
    width: 50vw;
    left: 25vw;
    height: 12vh;
    z-index: 1;
}

.playerCont{
    position: relative;
    height: 12vh;
    pointer-events: auto;
}

.playerAvatar {
    position: absolute;
    top: 0;
    height: 10vh;
    width: 10vh;
    left: calc(50% - 5vh);
}

.playerAvatarImg {
    width: 100%;
    height: 100%
}

.nameBox {
    position: absolute;
    width: 100%;
    height: 2vh;
    font-size: 1.5vh;
    text-align: center;
    bottom: 0;
}



#removeBtn{
    background: linear-gradient(to bottom, #cc0003 0%,#ce7354 34%,#a50500 82%,#cc0000 100%);
    opacity: 0.5;
}

#chatBtn{
    background: linear-gradient(to bottom, #913f8f 0%,#c85ec7 35%,#c85ec7 60%,#893c87 100%);
}

#setOutcomeBtn{
    background: linear-gradient(to bottom, #cc0003 0%,#ce7354 34%,#a50500 82%,#cc0000 100%);
}

#demoVideoBtn {
    background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
}

#demoGameBtn {
    background: linear-gradient(to bottom, #2416a0 0%,#6880d8 40%,#1e86db 64%,#152299 100%);
}

#demoReconnectBtn {
    background: linear-gradient(to bottom, #c9811c 0%,#ffc578 40%,#fb9d23 64%,#c9811c 100%);
}

#rebetBtn #buttonTxt, #removeBtn #buttonTxt #buttonTxt, #moreBtn #buttonTxt, #chatBtn #buttonTxt, #lobbyBtn #buttonTxt, #avatarBtn #buttonTxt, #historyBtn #buttonTxt{
    text-align: center;
    pointer-events: none;

}

.OCDice{
    width: 15%;
}

.OCCard{
    height: 75%;

}


.replayButton{
    cursor: pointer;
}

#playerDiv .playerImg {
    height: 15vh;
    width: 15vh;
    left: calc(50% - (15vh/2));
}

.playerImg{
    position: absolute;
    height: 15vh;
    width: 15vh;
    left: calc(50% - (15vh/2));
    pointer-events: none;
}

.nameText{
    position: absolute;
    width: 40%;
    left: 20%;
    height:100%;
    color: gold;
    font-size: 1.5em;
    top:0px;
    pointer-events: none;
}

.winners {
    position: absolute;
    width: 40%;
    left: 60%;
    height:100%;
    color: gold;
    font-size: 1.5em;
    top:0px;
    pointer-events: none;
}

#startReplayButton{
    position: absolute;
    z-index: 2000;
    width: 10%;
    height: 5%;
    left: 90%;
    cursor: pointer;
}