.tg {
    margin: 30px;
}

.name, .cards {
    width: 160px;
    text-align: left;
}

.name, .chips, .bet, .cards {
    width: 160px;
    text-align: left;
}

.tg td {
    height: 40px;
}

.game {
    display: none;
}

body {
    background-color: #061727;
    font-family: 'Public Sans', sans-serif;
    font-size: 16px;
    color: #ffffff;
    margin: 0;
}

.game-container {
    width: 1040px;
    height: 657px;
    margin: 0 auto;
}

.table {
    position: relative;
    left: 198px;
    top: 145px;
    width: 632px;
    height: 300px;
    background-color: #0F2E4B;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
}

.players {
    position: absolute;
}

.players > div {
    position: absolute;
    width: 159px;
    height: 105px;
    z-index: 1;
}

.info-box {
    position: absolute;
    z-index: 10;
    top: 60px;
    width: 100%;
    height: 60px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color: #0F2E4B;
    border: 2px solid #0F2E4B;
    transition: box-shadow 1s ease, border 1s ease;
}

.folded .info-box, .finished .info-box {
    border: 2px solid #0F2E4B;
    background-color: #061727;
}

.seatopen .info-box {
    border: 2px solid #0F2E4B;
    opacity: 0.4;
}

.player-timer-bg {
    visibility: hidden;
    width: 163px;
    height: 6px;
    margin-left: -1px;
    margin-top: -2px;
    border-radius: 6px 6px 0 0;
    background: #061727;
}

.player-timer-running {
    visibility: hidden;
    width: 100%;
    height: 6px;
    margin-top: -6px;
    margin-left: -2px;
    border-radius: 6px 0 0 0;
    background: #2F06FC;
}

.onMove .player-timer-bg {
    visibility: visible;
    background: #1D4871;
}

.onMove .player-timer-running {
    visibility: visible;
    background: #2F06FC;
}

.rfinished .player-timer-bg {
    visibility: hidden;
}

.onMove.ractive .info-box {
    border: 2px solid #363CFF;
    box-shadow: 0px 0px 30px #2F06FC;
    transition: box-shadow 0.3s ease;
}

.rfinished.onMove .info-box, .fold .info-box, #player1.fold .glow-box, #player1 .info-box {
    box-shadow: none !important;
}

.glow-box {
    position: absolute;
    z-index: -10;
    top: 60px;
    width: 100%;
    height: 60px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color: #061727;
}

.onMove.ractive .glow-box {
    box-shadow: 0px 0px 30px #2F06FC;
    transition: box-shadow 0.3s ease;
}

.player-name {
    text-align: center;
    letter-spacing: 0px;
    color: #7D98B2;
    padding-top: 2px;
    height: 19px;
}

#player1.onMove .card-crop {
    visibility: hidden;
}

#player1 .card-crop, #player1.rfinished .card-crop {
    visibility: visible;
    height: 35px;
}

.folded .player-name, .finished .player-name {
    color: #1D4871;
}

.player-chips {
    text-align: center;
    font-size: 16px;
    letter-spacing: 0px;
    padding-top: 6px;
}

.folded .player-chips, .finished .player-chips {
    color: #1D4871;
}

.created .cards {
    visibility: hidden;
}

.created .info-box {
    background-color: #0F2E4B;
    border: none;
}

.created .player-name {
    color: #7D98B2;
}

.created .player-chips {
    color: #1D4871;
}

.rebuy-info {
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-size: 12px;
    color: #000000;
    font-weight: 700;
}

#rebuyMsg {
    position: absolute;
    top: 15px;
    left: 80px;
}

.player-addons, .player-rebuys {
    text-align: center;
    width: 14px;
    height: 14px;
    background-color: #1D4871;
    color: #0F2E4B;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    margin-top: 2px;
}

.cards {
    position: absolute;
    width: 145px;
    height: 5px;
    left: 7px;
    top: 38px;
    background-color: #061727;
    color: #061727;
}

.folded .cards, .finished .cards {
    visibility: hidden;
}

.finished .dealer.is-dealer {
    visibility: hidden;
}

.card-1, .card-2 {
    position: absolute;
    width: 67px;
    top: -14px;
    height: 105px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color: #1D4871;
}

.card-1 {
    left: 4px;
}

.card-2 {
    left: 74px;
}


.onMove .card-1, .onMove .card-2 {
    background-color: #ffffff;
}

#player1 .card-1, #player1 .card-2 {
    top: -40px;
    background-color: #ffffff;
}

.showdown .card-1, .showdown .card-2 {
    top: -40px !important;
    background-image: none;
}

.fold .card-1, .fold .card-2 {
    visibility: hidden;
}

.fold .card-1, .fold .card-2, .fold .player-timer-running, .fold .player-timer-bg {
    visibility: hidden;
}

.fold .info-box {
    border-color: #0F2E4B;
}

.fold .player-chips, .fold .player-name {
    color: #1D4871;
}

#player1.fold .card-1, #player1.fold .card-2 {
    visibility: visible;
    background-image: url("../img/cards/not-active-player.svg");
    position: absolute;
    top: 2px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color: #1D4871;
}

#player1.fold .card-1 img, #player1.fold .card-2 img {
    display: none;
}

#player1.fold:hover .card-1 img, #player1.fold:hover .card-2 img {
    display: block;
}

#player1.showCards .card-1, #player1.showCards .card-2 {
    visibility: visible;
    top: -40px;
}

#player1.showCards .card-1 img, #player1.showCards .card-2 img {
    display: block;
}

#player1.fold:hover .card-1, #player1.fold:hover .card-2 {
    top: -40px;
}

.card-1, .card-2 {
    transition: top 0.6s ease;
}


.card-crop {
    position: relative;
    top: 82px;
    z-index: 2;
    width: 100%;
    height: 25px;
    background-color: #061727;
}

#player1 {
    top: 408px;
    left: 435px;
}

#player2 {
    top: 394px;
    left: 91px;
}

#player3 {
    top: 233px;
    left: 17px;
}

#player4 {
    top: 70px;
    left: 55px;
}

#player5 {
    top: 0px;
    left: 309px;
}

#player6 {
    top: 0px;
    left: 559px;
}

#player7 {
    top: 70px;
    left: 807px;
}

#player8 {
    top: 233px;
    left: 861px;
}

#player9 {
    top: 394px;
    left: 779px;
}

.bet {
    position: absolute;

    width: 80px;
    height: 40px;
}

#player1 .bet {
    text-align: center;
    top: -30px;
    left: 38px;
}

#player2 .bet {
    top: -20px;
    left: 170px;
}

#player3 .bet {
    top: 58px;
    left: 210px;
}

#player4 .bet {
    top: 134px;
    left: 204px;
}

#player5 .bet {
    text-align: center;
    top: 164px;
    left: 40px;
}

#player6 .bet {
    text-align: center;
    top: 164px;
    left: 40px;
}

#player7 .bet {
    text-align: right;
    top: 134px;
    left: -112px;
}

#player8 .bet {
    text-align: right;
    top: 58px;
    left: -132px;
}

#player9 .bet {
    text-align: right;
    top: -20px;
    left: -90px;
}

.dealt-cards {
    position: absolute;
    top: 99px;
    left: 127px;
    width: 375px;
    height: 105px;

}

.dealt-cards-1, .dealt-cards-2, .dealt-cards-3, .dealt-cards-4, .dealt-cards-5 {
    position: absolute;
    width: 67px;
    height: 105px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.dealt-cards-1 {
    left: 0px;
}

.dealt-cards-2 {
    left: 77px;
}

.dealt-cards-3 {
    left: 154px;
}

.dealt-cards-4 {
    left: 231px;
}

.dealt-cards-5 {
    left: 308px;
}

.controls {
    position: relative;
    left: 300px;
    top: 270px;
    width: 724px;
    height: 79px;
}

.dealer {
    position: absolute;
    visibility: hidden;
    width: 21px;
    height: 21px;
    background-color: #ffffff;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
    font-family: 'Public Sans', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    text-align: center;
    line-height: 20px;
}

.dealer.is-dealer {
    visibility: visible;
}

#player1 .dealer {
    left: -25px;
    top: 0px;
}

#player2 .dealer {
    left: 208px;
    top: 10px;
}

#player3 .dealer {
    left: 208px;
    top: 94px;
}

#player4 .dealer {
    left: 175px;
    top: 150px;
}

#player5 .dealer {
    left: 20px;
    top: 155px;
}

#player6 .dealer {
    left: 114px;
    top: 155px;
}

#player7 .dealer {
    left: -32px;
    top: 150px;
}

#player8 .dealer {
    left: -74px;
    top: 94px;
}

#player9 .dealer {
    left: -64px;
    top: 10px;
}


.active .card-1, .active .card-2 {
    background-image: url("../img/cards/not-active.svg");
}

.onMove .card-1, .onMove .card-2 {
    background-image: url("../img/cards/active.svg");
}

.controls button, #start {
    position: absolute;
    width: 92px;
    height: 49px;
    background-color: #2F06FC;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    font-family: 'Public Sans', sans-serif;
    font-size: 16px;
    color: #ffffff;
    padding: 0;
    border: none;
    outline: none;
    cursor: pointer;
}

.controls button:hover, #start:hover {
    background-color: #363CFF;
    box-shadow: 0px 4px 30px #2F06FC;
}

.controls button:active, #start:active {
    background-color: #2500DC;
    box-shadow: 0px 2px 15px #2F06FC;
}

#start {
    width: 200px;
    left: 194px;
    top: 130px;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

.pregame, .postgame {
    position: relative;
    z-index: 5;
    width: 600px;
    text-align: center;
    top: 206px;
    left: 220px;
}

.all-text {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
}

.pregame .admin-text {
    position: absolute;
    width: 100%;
    top: 150px;
    color: #7D98B2;
    left: 0px;
}

.all-text #code {
    font-size: 32px;
    padding: 6px 0 0 0;
}

#call {
    left: 137px;
}

#check {
    left: 137px;
}

#raise {
    left: 274px;
}

.disabled {
    visibility: hidden;
}

#additional {
    width: 132px;
    left: 151px;
}

#rebuys {
    width: 100px;
    left: 166px;
}

.raise-slider {
    position: absolute;
    left: 386px;
    width: 338px;
    height: 45px;
    border: 2px solid #1D4871;
    -moz-border-radius: 6px 0 6px 6px;
    -webkit-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.slider {
    position: relative;
    top: 22px;
    left: 113px;
    width: 202px;
}


input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
    background: transparent; /* Otherwise white in Chrome */
    display: block;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type=range]:focus {
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;

    /* Hides the slider so custom styles can be added */
    background: transparent;
    border-color: transparent;
    color: transparent;
}


#range-slider {
    background: #ffffff;
    position: relative;
    height: 2px;
    width: 100%;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    top: -2px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #2F06FC;
    cursor: pointer;
    display: inline-block;
    width: 24px;
    height: 24px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    background: #2F06FC;
    cursor: pointer;
    display: inline-block;
    width: 24px;
    height: 24px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

input[type=range]::-ms-thumb {
    -webkit-appearance: none;
    background: #2F06FC;
    cursor: pointer;
    display: inline-block;
    width: 24px;
    height: 24px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

#input[type=range]::-webkit-slider-thumb:hover {
    background-color: #363CFF;
    cursor: pointer;
    box-shadow: 0px 4px 30px #2F06FC;
}

.raise-input {
    outline: none;
    position: absolute;
    text-align: center;
    left: 2px;
    width: 88px;
    height: 43px;
    border: none;
    background-color: #061727;
    font-family: 'Public Sans', sans-serif;
    font-size: 16px;
    color: #ffffff;
    border-right: 2px solid #1D4871;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


/*
/*
/* Landing screen */

.left-container {
    background-color: #FBF4EC;
    width: 40%;
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    display: flex;
    flex-flow: column;
}

.logo {
    margin: 40px 0 0 40px;
}

.left-container .content {
    margin: 40px 40px 0 40px;
    margin-top: 200px;
    display: flex;
    flex-flow: column;
    height: 100%;
}

h1 {
    color: #061727;
    text-align: left;
    font-size: 42px;
    line-height: 50px;
    font-weight: normal;
}

.subH1 {
    color: #061727;
    text-align: left;
    font-size: 20px;
    line-height: 28px;
    font-weight: normal;
    flex: 1 1 auto;
}

.disclaimer {
    color: #061727;
    font-size: 12px;
    padding-right: 40px;
    flex: 0 1 65px;
    margin-top: 60px;
}

.disclaimer-mobile {
    display: none;
}

#settings {
    display: flex;
    flex-direction: column;
    position: fixed;
    overflow-x: hidden;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
}

#settings-wrapper {
    margin: auto;
}

#settings > div {
    text-align: center;
}

.or {
    color: #7D98B2;
    font-size: 18px;
    padding: 25px;
}

#joinGame {
    width: 260px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    margin: 0 auto;
    padding-top: 1px;
    background-color: #0F2E4B;
    margin-top: 30px;
}

#createGame {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    width: 260px;
    margin: 0 auto;
    padding-top: 1px;
    background-color: #0F2E4B;
    margin-bottom: 30px;
}

.input-wrapper {
    display: flex;
    justify-content: center;
}

#settings h2 {
    font-size: 26px;
    font-weight: normal;
    padding: 15px 0 22px 0;
    margin: 0;
    -webkit-transition: color 0.6s ease;
    -moz-transition: color 0.6s ease;
    -o-transition: color 0.6s ease;
    transition: color 0.6s ease;
    cursor: pointer;
}

#settings .label {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: -10px;
    position: relative;
    z-index: 1;
    font-size: 12px;
    color: #7D98B2;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

#settings label {
    background-color: #0F2E4B;
    padding: 0 6px;
}

#settings .input-main {
    width: 200px;
    padding-right: 4px;
}

#joinGame .input-main {
    margin: 0 auto;
}

#createGame .input-main {
    margin: 0 auto;
}


#settings input {
    width: 100%;
    height: 44px;
    border: 2px solid #2F06FC;
    background-color: #0F2E4B;
    color: #ffffff;
    font-size: 16px;
    padding-top: 5px;
    font-family: 'Public Sans', sans-serif;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    margin-bottom: 26px;
    text-align: center;
    outline: none;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

#settings .input-main.clicked input {
    border-color: #ffffff;
}

#settings .input-main:hover input {
    border-color: #ffffff;
}

#settings .input-main.clicked .label {
    color: #ffffff;
}

#settings .input-main .clicked-label {
    color: #ffffff;
}

#settings button {
    height: 49px;
    background-color: #2F06FC;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    font-family: 'Public Sans', sans-serif;
    font-size: 16px;
    color: #ffffff;
    padding: 0;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0 20px;
    margin-top: 4px;
    margin-bottom: 30px;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

#settings p {
    padding: 0 15px;
}

#settings button:hover, #settings button:focus {
    background-color: #363CFF;
    box-shadow: 0px 4px 30px #2F06FC;
}

#settings button:active {
    background-color: #2500DC;
    box-shadow: 0px 2px 15px #2F06FC;
}

.advanced-settings {
    color: #7D98B2;
    width: 260px;
    margin: -3px auto 13px auto;
}

.advanced-settings:hover {
    color: #ffffff;
    cursor: pointer;
}

.plus-icon {
    height: 20px;
    padding: 0 6px;
    background-color: #2F06FC;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    margin-right: 10px;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

#createGame p {
    color: #7D98B2;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
    line-height: 24px;
    margin: 4px 0 28px 0;
}


/* Bet sizes buttons*/
.container-betsizes {
    position: relative;
    top: -30px;
    left: 90px;
}


button.betsizes {
    width: 61px;
    height: 30px;
    background-color: #1D4871;
}

button.betsizes.first {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

button.betsizes.second {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    left: 63px;
}

button.betsizes.third {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    left: 126px;
}

button.betsizes.last {
    left: 189px;
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}


/*autoactions*/
.autoactions {
    position: absolute;
    top: 13px;
    left: 0px;
}

.autoactions div {
    display: inline-block;
}

.autocheck {
    margin-left: 63px;
}

.autoactions input {
    -webkit-appearance: none;
    background-color: #061727;
    border: 2px solid #7D98B2;
    padding: 9px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    margin-bottom: -6px;
    outline: none;
    cursor: pointer;
}

.autoactions input:active, .autoactions input:checked:active {
    border: 2px solid #2F06FC;
}

.autoactions input:hover {
    border: 2px solid #A1C0DE;
}

.autoactions input:checked:hover {
    background-color: #363CFF;
    border: 2px solid #363CFF;
}

.autoactions input:checked {
    border: 2px solid #2F06FC;
    background-color: #2F06FC;
}

.autoactions input:checked:after {
    content: '\2714';
    font-size: 16px;
    position: absolute;
    top: -2px;
    left: 3px;
    color: #ffffff;
}

#loader {
    position: fixed;
    background-color: #061727;
    margin: 0;
    padding: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
}

#loader .wrapper {
    text-align: center;
    width: 212px;
    margin: 30% auto 0 auto;
}

#loader .wrapper .text {
    margin-top: 8px;
}

#loader .wrapper img {
    padding: 0 5px 0 5px;
}

.notPlaying {
    opacity: 0.5 !important;
    margin-top: 10px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.fold .notPlaying {
    margin-top: 0px;
    opacity: 1 !important;
}


/*blind info */
.game-info {
    margin-top: 174px;
    margin-left: 18px;
}

.level-time span {
    color: #7D98B2;
}

.blinds-state {
    margin-top: 7px;
}

.blinds-state .current {

}

.blinds-state .next {
    color: #7D98B2;
}

.rebuys-late-addon {
    margin-top: 3px;
    line-height: 26px;
    color: #7D98B2;
}

#player1.rebuyed .cards {
    visibility: hidden;
}

#copyButton {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    height: 30px;
    background-color: #1D4871;
    font-family: 'Public Sans', sans-serif;
    font-size: 16px;
    color: #ffffff;
    padding: 0;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0 20px;
    margin-top: 7px;
    margin-bottom: 30px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#copyButton:hover {
    background-color: #3E6488;
}

/* tags */
.player-tag {
    width: 80%;
    text-align: center;
    position: absolute;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 0px 6px;
    top: 6px;
    left: 6%;
}

.player-tag.allin {
    background-color: #FF5500;
    top: 30px;
}

.player-tag.raise {
    background-color: #FFCC00;
    color: #000;
}

.player-tag.check {
    background-color: #00CF75;
}

.player-tag.call {
    background-color: #1C15FF;
}

.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/* chips and stacks */

.stacks {
    margin-top: 16px;
    position: absolute;
}

.stack-1, .stack-2, .stack-3, .stack-4, .stack-5 {
    position: absolute;
    height: 30px;
    top: 0px;
}

.stack-1 {
    left: 40px;
}

.stack-2 {
    left: 30px;
}

.stack-3 {
    left: 20px;
}

.stack-4 {
    left: 10px;
}

.chip {
    width: 8px;
    height: 8px;
    background-color: red;
    border: 2px solid #0F2E4B;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin-bottom: -16px;
}

#total-pot {
    text-align: center;
    position: absolute;
    top: 24px;
    left: 219px;
    margin: 0 auto;
    width: 200px;
    height: 50px;
}

#pot {
    text-align: center;
    position: absolute;
    top: 74px;
    left: 219px;
    margin: 0 auto;
    width: 200px;
    height: 50px;
}

#pot .stacks {
    top: -34px;
    left: 72px;
}

#pot .amount {
    margin-top: -5px;
}

#player1 .stacks {
    top: -23px;
    left: 13px;
}

#player1 .amount {
    margin-top: 6px;
}

#player2 .stacks {
    top: -24px;
    left: 0px;
}

#player2 .amount {
    margin: 5px 0 0 8px;
}

#player9 .stacks {
    top: -24px;
    left: 34px;
}

#player9 .amount {
    margin: 5px 0 0 10px;
}

#player3 .stacks {
    top: -25px;
    left: -7px;
}

#player3 .amount {
    margin: 4px 0 0 0;
}

#player8 .stacks {
    top: -25px;
    left: 27px;
}

#player8 .amount {
    margin: 4px 5px 0 0;
}

#player4 .stacks {
    top: -25px;
    left: -2px;
}

#player4 .amount {
    margin: 3px 0 0 6px;
}

#player7 .stacks {
    top: -25px;
    left: 24px;
}

#player7 .amount {
    margin: 3px 8px 0 0;
}

#player5 .stacks {
    top: -10px;
    left: 26px;
}

#player5 .amount {
    margin: 18px 0 0 27px;
}

#player6 .stacks {
    top: -10px;
}

#player6 .amount {
    margin: 18px 0 0 -23px;
}


/* sidenav menu / leaderboards */

#sidenav {
    height: 100%;
    width: 300px;
    margin-right: -300px;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #FBF4EC;
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* Position and style the close button (top right corner) */
#sidenav .closebtn {
    position: absolute;
    top: 22px;
    right: 25px;
    width: 24px;
    height: 24px;
    padding: 3px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

#sidenav .closebtn:hover {
    background-color: #F4E3D0;
}

#main {
    transition: margin-right .5s;
}

.openbtn {
    position: fixed;
    top: 20px;
    right: 20px;
}

.game-menu button {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    height: 31px;
    background-color: #0F2E4B;
    font-family: 'Public Sans', sans-serif;
    font-size: 16px;
    color: #7D98B2;
    padding: 0;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0 15px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    display: flex;
}

.game-menu button svg {
    fill: #7D98B2;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    margin: 3px 6px 0 -3px;
}

.game-menu button div {
    margin-top: 6px;
}

.game-menu button:hover {
    background-color: #3E6488;
    color: #ffffff;
}

.game-menu button:hover svg {
    fill: #ffffff;
}

#sidenav .content {
    padding: 20px;
}

#sidenav .section {
    width: 100%;
    margin-bottom: 30px;
}

#sidenav .section h3 {
    font-size: 12px;
    font-weight: bold;
    margin: 5px 0 0 8px;
    color: #061727;
}

#sidenav .section .heading {
    display: flex;
}

#sidenav .section button {
    background-color: #EED3B5;
    color: #ffffff;
}

#unpause {
    margin-top: -30px;
}

#sidenav .section button:hover {
    background-color: #E8C196;
}

#sidenav .section button svg {
    fill: #ffffff;
}

#sidenav .leave {
    position: absolute;
    width: 300px;
    bottom: 0;
    right: 0;
    height: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #FBF4EC;
}

#sidenav .leave button {
    position: absolute;
    margin: 0;
    right: 20px;
    background-color: transparent;
    color: #BBBBBB;
}

#sidenav .leave button svg {
    fill: #BBBBBB;
}

#sidenav .leave button:hover {
    background-color: #F4E3D0;
    color: #BBBBBB;
}

#sidenav .leave button:hover {
    background-color: #F4E3D0;
    color: #061727;
}

#sidenav .leave button:hover svg {
    fill: #061727;
}

#sidenav .inside {
    margin-top: 6px;
}

#sidenav table {
    color: #061727;
    width: 100%;
}

#sidenav tr td:first-child {
    text-align: center;
    width: 18px;
    color: #BBBBBB;
}

#sidenav tr td:nth-child(2n+2) {
    text-align: left;
    width: auto;
    padding-left: 7px;
    display: flex;
}

#sidenav tr td:nth-child(3n+3) {
    text-align: right;
    width: 80px;
}

.leaderboard-rebuys {
    text-align: center;
    width: 14px;
    height: 14px;
    font-size: 12px;
    background-color: #EED3B5;
    color: #ffffff;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    margin-top: 3px;
    margin-left: 2px;
}

#last-hand .inside {
    color: #061727;
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    align-items: flex-end;
}

.game-controls, #game-id {
    color: #061727;
}

.game-controls {
    margin-top: 5px;
}

.game-controls input {
    -webkit-appearance: none;
    background-color: transparent;
    border: 2px solid #EED3B5;
    padding: 9px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    margin-bottom: -6px;
    outline: none;
    cursor: pointer;
}

.game-controls input:active, .game-controls input:checked:active {
    border: 2px solid #EED3B5;
}

.game-controls input:hover {
    border: 2px solid #E8C196;
}

.game-controls input:checked:hover {
    background-color: #E8C196;
    border: 2px solid #E8C196;
}

.game-controls input:checked {
    border: 2px solid #EED3B5;
    background-color: #EED3B5;
}

.game-controls input:checked:after {
    content: '\2714';
    font-size: 16px;
    position: absolute;
    top: -2px;
    left: 3px;
    color: #ffffff;
}

.lh-dealt {
    width: 162px;
    height: 47px;
}

.lh-dealt img, .lh-cardsplayer img {
    padding-right: 3px;
}

.lh-dealt img:last-child, .lh-cardsplayer img:last-child {
    padding-right: 0px;
}

.lh-cardsplayer {
    width: 65px;
    height: 47px;
}

.allow-audio {
    top: -320px;
    left: 158px;
    width: 120px !important;
}

/* Winning animation */

.confetti {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 78%;
    width: 6px;
    height: 6px;
    z-index: 5;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #00CF75;
}

.errmsg {
    color: #FF5500;
    margin-top: -20px;
    padding: 0 10px 20px 10px;
}

.winning .info-box {
    box-shadow: 0px 0px 20px #1C15FF;
    border: 2px solid #1C15FF;
}

.winner .info-box {
    background-color: #FFB45E;
    color: #ffffff;
}

.winner .info-box .player-name {
    color: #ffffff;
}

.winner .info-box .player-rebuys {
    color: #FFB45E;
    background-color: #ffffff;
}


.runnerup .info-box {
    background-color: #EEEEEE;
    color: #061727;
}

.runnerup .info-box .player-name {
    color: #061727;
}

.runnerup .info-box .player-rebuys {
    color: #EEEEEE;
    background-color: #061727;
}

.potato .info-box {
    background-color: #C77920;
    color: #ffffff;
}

.potato .info-box .player-name {
    color: #ffffff;
}

.potato .info-box .player-rebuys {
    color: #C77920;
    background-color: #ffffff;
}

.winner img, .runnerup img, .potato img {
    position: absolute;
    width: 40%;
    right: 0;
    left: 4px;
    margin: 0 auto;
    top: -20px;
}

#settings .invalid {
    border-color: #FF5500 !important;
}

.last-hand-icon {
    fill: none;
}