:root {
    /*--table-wh-ratio: 2.035; !* old graphic *!*/
    --table-wh-ratio: 1.8463; /* new graphic - landscape 4697x2544 */
    --table-wh-ratio-90: 1.675; /* smaller 90% - 2130x1272 */
    --table-wh-ratio-85: 1.600; /* smaller 90% - 2036x1272 */
    --table-wh-ratio-80: 1.520; /* smaller 90% - 1932x1272 */
    --table-bg: #3b3b3b;
    --table-logo-color-pri: #ffffff;
    --table-logo-color-sec: #95461b;
    --table-community-cards-gap: calc(12px * var(--canvas-scale));
    --table-community-cards-scale: 0.45;
    --scale-table-size: 1;

    --player-table-ui-scale: 1;

    --player-hand-cards-scale: 0.4;
    --player1-hand-cards-scale: 0.45;
    --player-info-bg: var(--clr-black1);
    --player-info-border-clr: #ffffff;
    --player-info-text-clr: #ffffff;

    --btn-fold-bg: #e40e1a;
    --btn-call-bg: var(--clr-green5);
    --btn-check-bg: var(--clr-green5);
    --btn-raise-bg: var(--clr-green5);
    --btn-raise-amount-bg: #196823;
    /* original colors
    --btn-fold-bg: #e00102;
    --btn-check-bg: #606060;
    --btn-raise-bg: #2c8b13;*/


    --footer-bg: var(--clr-black1);
    --slider-handle-clr: #606060;
    --slider-bg-clr: #fffefa;
    --slider-bg-full-clr: #606060;

    --table-felt-bg-horizontal: url('../images/table_backgrounds/poker_table.webp');
    --table-felt-bg-vertical: url('../images/table_backgrounds/table_size_80_vertical.webp');
    --table-felt-color-overlay: transparent;
    --table-rail-bg-horizontal: url('../images/table_backgrounds/felts/horizontal/table_felt_horizontal_2.webp');
    --table-rail-bg-vertical: url('../images/table_backgrounds/felts/vertical/table_felt_vertical_2.webp');
}
#playTable {
    position: absolute;
    top: 0;
    right: 0;
    /*bottom: 0;*/
    left: 0;
    bottom: calc(90px * var(--canvas-scale));

    display: flex;
    justify-content: center;
    align-items: center;

    margin: auto;

    /*
    max-width: clamp(calc(400px * var(--canvas-scale)), calc(1000px * var(--canvas-scale)), 100%);
    max-height: clamp(calc(200px * var(--canvas-scale)), calc(500px * var(--canvas-scale)), 80%);*/

    /*  might not work in old IE and other misc browsers -> potentially up to 9% of users, but likely realistically way less
        - for that it will fallback to approximation with max-widht & max-height
    */
    /*aspect-ratio: var(--table-wh-ratio);*/

    width: calc(1000px * var(--canvas-scale));
    height: calc(1000px / var(--table-wh-ratio) * var(--canvas-scale));

    max-width: 100%; /* safety for it to look good & not overflow  if the ratios aren't exactly the same */

    /*max-width: 100%;
    max-height: 100%;*/
}
/* we have to do a pseudo here, so that the filter of shadow applies only to it, not all of the elements children*/
#playTable::before {
    /* ::Before represent the "under the table BG*/
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background: var(--table-felt-bg-horizontal) no-repeat center center;
    background-size: 100% 100%;
    /*filter: drop-shadow(0 0 calc(17px * var(--canvas-scale)) rgba(255,255,255, 0.5));*/
}
#playTable::after {
    /* ::After represent the "over the table BG, like any patterns overlaid or table border/rail */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background: var(--table-rail-bg-horizontal) no-repeat center center;
    background-size: 100% 100%;
    pointer-events: none;
}

/* Note temporary quickly solution attempt for colored tables!! */
[data-setting_table_skin="color_#E00000"] #playTable:before {
    filter: hue-rotate(-120deg) saturate(300%) brightness(0.8) !important;
}
[data-setting_table_skin="color_#E08300"] #playTable:before {
    /*filter: hue-rotate(-90deg) saturate(150%) brightness(calc(1.05 * var(--brightness-mx))) !important;*/
    filter: hue-rotate(-88deg) saturate(203%) brightness(1.5) !important
}
[data-setting_table_skin="color_#00A9E6"] #playTable:before {
    /*filter: hue-rotate(75deg) saturate(130%) brightness(calc(1.1 * var(--brightness-mx))) !important;*/
    filter: hue-rotate(57deg) saturate(197%) brightness(1.1) !important;
}
[data-setting_table_skin="color_#0058E6"] #playTable:before {
    /*filter: hue-rotate(100deg) saturate(140%) brightness(calc(1.1 * var(--brightness-mx))) !important;*/
    filter: hue-rotate(95deg) saturate(145%) brightness(1.05 ) !important;
}
[data-setting_table_skin="color_#9E9E9E"] #playTable:before {
    /*filter: saturate(0%) brightness(calc(1.05 * var(--brightness-mx))) !important;*/
    filter: saturate(0) brightness(1.55) !important;
}
[data-setting_table_skin="color_#7A4A2F"] #playTable:before {
    /*filter: hue-rotate(-90deg) saturate(100%) brightness(calc(0.8 * var(--brightness-mx))) !important;*/
    filter: hue-rotate(-112deg) saturate(70%) brightness(1.1) !important;
}
[data-setting_table_skin="color_#6C1E94"] #playTable:before {
    /*filter: hue-rotate(155deg) saturate(160%) brightness(calc(1.1 * var(--brightness-mx))) !important;*/
    filter: hue-rotate(156deg) saturate(100%) brightness(1) !important;
}

.landscape #playTable {
    bottom: calc(70px * var(--canvas-scale));
}
.portrait #playTable {

    /* old table art
    width: calc(491px * var(--canvas-scale));
    height: calc(1000px * var(--canvas-scale));
    */

    /* make table size a bit smaller because of the limited vertical space because of the footer player actions*/
    /*--scale-table-size: 0.9;*/
    /*--scale-table-size: 1.5;*/ /* Now it's done as part of resizeHandling!! */
    --table-community-cards-scale: 0.43;

    /*--table-wh-ratio: 2.136;*/ /* larger table*/
    --table-wh-ratio: 1.846; /* smaller (old) - landscape 4697x2544 */
    --table-wh-ratio: var(--table-wh-ratio-80);

    width: calc(1000px / var(--table-wh-ratio) * var(--canvas-scale) * var(--scale-table-size));
    height: calc(1000px * var(--canvas-scale) * var(--scale-table-size));

    bottom: 0;
}
.portrait #playTable::before {
    background: var(--table-felt-bg-vertical) no-repeat center center;
    background-size: 100% 100%;
}
.portrait #playTable::after {
    background: var(--table-rail-bg-vertical) no-repeat center center;
    background-size: 100% 100%;
}
#playTable .logo-holder {
    --logo-holder-scale: 0.3;
    position: absolute;
    /*top: calc(33px * var(--canvas-scale));*/
    top: calc(0px * var(--canvas-scale));
    left: 0;
    right: 0;
    bottom: 0;

    margin: auto;
    font-size: calc(40px * var(--canvas-scale));
    opacity: 0.7;

    background: url('../images/misc/poker_patio_logo.png?v=3') no-repeat center center;
    background-size: 100% 100%;

    opacity: 0.28;
}
.use-logo-variant-50 #playTable .logo-holder {
    opacity: 0.5;
    filter: drop-shadow(-1px -1px 2px rgba(0,0,0,0.9));
}
.use-logo-variant-70 #playTable .logo-holder {
    opacity: 0.7;
    filter: drop-shadow(-1px -1px 2px rgba(0,0,0,0.9));
}
.portrait #playTable .logo-holder {
    --logo-holder-scale: 0.5;
    /*top: calc(-174px * var(--canvas-scale));*/
    /* the second calculation is to offset for table size changes at various resolutions*/
    /*top: calc(30px * var(--canvas-scale) + calc(-400px * calc(var(--scale-table-size) - 1) * var(--canvas-scale)));*/
    top: 0; /* position at very center! */


    /* Old version:
    width: calc(600px * 0.5 * var(--canvas-scale));
    height: calc(89px * 0.5 * var(--canvas-scale));*/

    /* aspect ratio of original is : 7.6774193548387096774193548387097
    So this is how it would be adjusted without scaling
    */
    /*width: calc(683px * 0.5 * var(--canvas-scale));*/
    --logo-holder-aspect-ratio: calc(683 / 89);
    width: calc(645px * 0.5 * var(--canvas-scale));
    height: calc(645px / var(--logo-holder-aspect-ratio) * 0.5 * var(--canvas-scale));
}

/* Change on 27th Feb 2026 - we now hide logo holder, as the ad slots are shown during  gameplay instead.
NOTE: exception are chip games, where we still display things as before, with the big logo over all.
*/
html:not([data-setting_currency_type="chips"]) #game_content[data-room-status="playing"] #layoutContent #playTable .logo-holder,
html:not([data-setting_currency_type="chips"]) #game_content[data-room-status="paused"] #layoutContent #playTable .logo-holder {
    display: none;
}

/* Have to name them cross-promo-slot instead of ad-space as otherwise some browser user agents might hide them */
#playTable .cross-promo-slot {
    position: absolute;
    display: none; /* By default don't display */
    opacity: 0.28;
    margin: 0 auto;
}
/* Only show ads when game is being played/paused.
 Also for now exception on chip lobbies - we don't show these there!
 */
html:not([data-setting_currency_type="chips"]) #game_content[data-room-status="playing"] #playTable .cross-promo-slot,
html:not([data-setting_currency_type="chips"]) #game_content[data-room-status="paused"] #playTable .cross-promo-slot {
    display: flex;
    justify-content: center;
    align-items: center;
}
#playTable .cross-promo-slot-big {
    top: calc(215px * var(--canvas-scale));
    right: 0;
    left: 0;

    --ad-slot-scale: 0.5;
    --ad-slot-aspect-ratio: calc(872 / 172);
    --ad-slot-w: calc(872px * var(--canvas-scale) * var(--ad-slot-scale));
    --ad-slot-h: calc(var(--ad-slot-w) / var(--ad-slot-aspect-ratio));

    width: var(--ad-slot-w);
    height: var(--ad-slot-h);
}
#playTable .cross-promo-slot-small {
    opacity: 0.23;
    top: calc(319px * var(--canvas-scale));
    right: 0;
    left: 0;

    --ad-slot-scale: 0.35;
    --ad-slot-aspect-ratio: calc(418 / 112);
    --ad-slot-w: calc(418px * var(--canvas-scale) * var(--ad-slot-scale));
    --ad-slot-h: calc(var(--ad-slot-w) / var(--ad-slot-aspect-ratio));

    width: var(--ad-slot-w);
    height: var(--ad-slot-h);
}
#playTable .cross-promo-slot a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

#playTable .cross-promo-slot-big.chip-lobbies-promo {
    background: url('../images_nonopt/table_ads/chip_lobbies_ad.png');
    background-size: 100% 100%;
    transform: translateX(calc(25px * var(--canvas-scale) * var(--ad-slot-scale)));
}
#playTable .cross-promo-slot-small.powered-by-pp {
    background: url('../images_nonopt/table_ads/powered_by_pp_logo.png');
    background-size: 100% 100%;
}
.portrait #playTable .cross-promo-slot-big {
    top: calc(391px * var(--canvas-scale));
}
.portrait #playTable .cross-promo-slot-small {
    top: calc(525px * var(--canvas-scale));
}
[data-scale-table-size="1.05"].portrait #playTable .cross-promo-slot-big {
    top: calc(409px * var(--canvas-scale));
}
[data-scale-table-size="1.05"].portrait #playTable .cross-promo-slot-small {
    top: calc(548px * var(--canvas-scale));
}
[data-scale-table-size="1.1"].portrait #playTable .cross-promo-slot-big {
    top: calc(436px * var(--canvas-scale));
}
[data-scale-table-size="1.1"].portrait #playTable .cross-promo-slot-small {
    top: calc(584px * var(--canvas-scale));
}
[data-scale-table-size="1.15"].portrait #playTable .cross-promo-slot-big {
    top: calc(450px * var(--canvas-scale));
}
[data-scale-table-size="1.15"].portrait #playTable .cross-promo-slot-small {
    top: calc(600px * var(--canvas-scale));
}
[data-scale-table-size="1.2"].portrait #playTable .cross-promo-slot-big {
    top: calc(467px * var(--canvas-scale));
}
[data-scale-table-size="1.2"].portrait #playTable .cross-promo-slot-small {
    top: calc(625px * var(--canvas-scale));
}
[data-scale-table-size="1.25"].portrait #playTable .cross-promo-slot-big {
    top: calc(484px * var(--canvas-scale));
}
[data-scale-table-size="1.25"].portrait #playTable .cross-promo-slot-small {
    top: calc(647px * var(--canvas-scale));
}
[data-scale-table-size="1.3"].portrait #playTable .cross-promo-slot-big {
    top: calc(504px * var(--canvas-scale));
}
[data-scale-table-size="1.3"].portrait #playTable .cross-promo-slot-small {
    top: calc(674px * var(--canvas-scale));
}

#playTable #communityHolder {
    position: relative;
    /*width: 40%;
    height: 41%;*/
    width: 45.7%;
    height: 50%;

    /* Have to disable pointer events, as otherwise the cross-promo-slots are not clickable */
    pointer-events: none;
}
.portrait #playTable #communityHolder {
    width: 100%;
    height: 20%;

    /* offset center of table so that the cards go the the very middle, which means offsetting it for the height
    of the potTotal & margin from cards (offset by half of that towards the top)
    */
    /*top: calc(-0.5 * calc(30px * 1.8 + 25px) * var(--canvas-scale));*/
    top: calc(-0.5 * calc(30px * 1.8 + 50px) * var(--canvas-scale));
}
#playTable .card-front, .card-back,
#playTable .card-front-color-overlay {
    transition: transform 0.5s ease-out;
}
#playTable #communityCards {
    position: relative;

    top: 0;
    right: 0;
    /*bottom: 0;*/
    left: 0;

    margin: auto;

    /* scale the card to right size, and create the holder that accoutns for up to 5x cards sizes + 4x paddign between them, and a bit extra to avoid pixel rounding issues */
    --card-scale-modifier: var(--table-community-cards-scale);
    --card-scale: calc(var(--card-scale-modifier) * var(--card-transform-scale));
    width: calc(1.01 * 5 * (2 * var(--card-padding-default) + var(--card-width-default)) * var(--canvas-scale) * var(--card-scale) + 4 * var(--table-community-cards-gap));
    height: calc(1.01 * (2 * var(--card-padding-default) + var(--card-height-default)) * var(--canvas-scale) * var(--card-scale));

}
#playTable #communityCards #community_stack {
    font-size: 0; /* prevent weird layout issues if somehow whitespaces are added! */
}
#playTable #communityCards {
    /* position: absolute; */
    top: 0;
    right: 0;
    /* bottom: 0; */
    left: 0.5%; /* a bit offset to center better, as the container is slightly increased t oensure that all 5 cards can fall in due to potential rounding or animation scaling*/
    margin: auto;
    --card-scale-modifier: var(--table-community-cards-scale);
    --card-scale: calc(var(--card-scale-modifier) * var(--card-transform-scale));
    width: calc(1.02 * 5 * (2 * var(--card-padding-default) + var(--card-width-default)) * var(--canvas-scale) * var(--card-scale) + 4 * var(--table-community-cards-gap));
    height: calc(1.01 * (2 * var(--card-padding-default) + var(--card-height-default)) * var(--canvas-scale) * var(--card-scale));
}
.portrait #playTable #communityCards {
    /*margin-top: calc(168px * var(--canvas-scale));*/
    margin-top: calc(25px * var(--canvas-scale));
}
.portrait #playTable #communityCards {
    margin-top: calc(10px * var(--canvas-scale));
}
[data-scale-table-size="1.05"].portrait #playTable #communityCards {
    /*margin-top: calc(10px * var(--canvas-scale));*/
}
#playTable .card.part-of-winning-hand {
    outline: calc(5px * var(--card-scale)) yellow solid;
}
#playTable #communityCards .card {
    display: inline-block;
    --card-scale-modifier: var(--table-community-cards-scale); /* actual scale of cards for i.e. solitaire */
    --card-scale: calc(var(--card-scale-modifier) * var(--card-transform-scale)); /*!* we have to recalculate it here for it to apply*!*!*/

    /* a "hack" to override transform scale 0 before animation happens */
    transform: rotateZ(0deg);
}
#playTable #communityCards .card:not(:last-child) {
    margin-right: var(--table-community-cards-gap);
}

#playTable #potArea {
    text-align: center;
    padding-top: calc(8px * var(--canvas-scale)); /* move everything a bit down*/
    pointer-events: auto; /* need to set pointer events, as parent communityHolder has them disabled,
     so that ad spaces are clicakble */
}
.portrait #playTable #potArea {
    padding-top: calc(13px * var(--canvas-scale)); /* move everything a bit down*/
}
[data-scale-table-size="1.25"].portrait #playTable #potArea {
    padding-top: calc(0px * var(--canvas-scale)); /* move everything a bit up again*/
}
#playTable #potArea .chips-holder {
    padding-left: calc(70px * var(--canvas-scale)); /* just because most often there's going to be less than 4 types of chips*/
    max-width: calc(280px * var(--canvas-scale));
    margin: 0 auto;
    text-align: left;
    min-height: calc(45px * var(--canvas-scale));
}
#playTable #potArea .pot-total {
    position: relative;
    /*margin-top: 50px;
    filter: drop-shadow(-1px -1px 1px rgba(255, 255,255,0.3)) drop-shadow(2px 2px 5px rgba(0,0,0,0.8));*/
    display: flex;
    justify-content: center;
    flex-direction: column;

    font-size: calc(30px * var(--canvas-scale));
    line-height: 1.8;

    background: rgba(0,0,0,0.14);
    min-width: 30%;
    width: max-content;
    /*margin: calc(85px * var(--canvas-scale)) auto 0 auto;*/ /* old table art */
    margin: 0 auto calc(17px * var(--canvas-scale)) auto;
    /*border-radius: calc(15px * var(--canvas-scale));*/
    border-radius: calc(10px * var(--canvas-scale));
    padding: 0 calc(15px * var(--canvas-scale));
    text-align: left;

    /*
    filter: drop-shadow(calc(-0.01em * var(--canvas-scale)) calc(-0.02em * var(--canvas-scale)) calc(0.02em * var(--canvas-scale)) rgba(255,255,255, 0.7))
            drop-shadow(calc(0.02em * var(--canvas-scale)) calc(0.01em * var(--canvas-scale)) calc(0.02em * var(--canvas-scale)) rgba(0,0,0, 0.9));
    box-shadow: inset calc(1px * var(--canvas-scale)) calc(1px * var(--canvas-scale)) 0px rgba(255,255,255,0.3);*/
}
.portrait #playTable #potArea .pot-total {
    margin-bottom: calc(11px * var(--canvas-scale));
}
.use-dark-ui-on-table-felt #playTable #potArea .pot-total {
    background: rgba(0,0,0,0.5);
    color: #ffffff;
}
.use-light-ui-on-table-felt #playTable #potArea .pot-total {
    background: rgba(255,255,255,0.5);
    color: #000000;
}
.use-dark-2-ui-on-table-felt #playTable #potArea .pot-total {
    background: rgba(0,0,0,0.8);
    color: #ffffff;
}
.use-light-2-ui-on-table-felt #playTable #potArea .pot-total {
    background: rgba(255,255,255,0.8);
    color: #000000;
}
#playTable #potArea .pot-total.show-blind-changes {
    margin-top: calc(-23px * var(--canvas-scale)); /* account for blind changes sizes*/
}
#playTable #potArea .pot-total:not([data-total-stage-pot="+ $0"]):not([data-total-stage-pot="+ 0"]):after {
    /* there is stage pot*/
    content: attr(data-total-stage-pot);
    display: block;
    position: absolute;
    right: 0.5em;
    top: 0.5em;

    transform: translateY(-100%);
    font-size: 0.45em;
    color: #FFFFFF;

    background: var(--clr-green5);
    border-radius: 0.3em;
    padding: 0.4em;
    font-weight: 600;
    line-height: 1;

    z-index: 6; /* to show up over player bets, i ncase it's raised up*/
}
.portrait #playTable #potArea .pot-total {
    /*margin: calc(40px * var(--canvas-scale)) auto 0 auto;*/
    padding-top: calc(4px * var(--canvas-scale)); /* to move everything in middle slightly down so top is not as crowded */
    min-width: 26%;
}
#playTable #potArea .pot-total > span {
    flex: 1 1 auto;
    /*display: block;*/
    font-weight: bold;
    text-align: center;
    /*padding-top: 0.6em;
    font-size: calc(26px * var(--canvas-scale));*/
}
#playTable #potArea .pot-total .blind-changes {
    display: none; /* just safety, to only show elements if pot-total has show-blind-changes class*/

    margin-left: calc(-15px * var(--canvas-scale));
    margin-right: calc(-15px * var(--canvas-scale));
    border-top: calc(2px * var(--canvas-scale)) solid white;
    font-size: 0.4em;
    font-weight: 600;

    padding: 0 calc(5px * var(--canvas-scale));
}
.portrait #playTable #potArea .pot-total .blind-changes {
    font-size: 0.7em;
}
#playTable #potArea .pot-total.show-blind-changes .blind-changes {
    display: flex;
    align-items: center;
    gap: calc(5px * var(--canvas-scale));
}
#playTable #potArea .pot-total .blind-changes .fa-solid {
    cursor: pointer;
    position: relative;
    z-index: 7;
}

#playTable #potArea .side-pot {
    display: none;
}
#playTable #potArea .side-pot:not([data-side-pot="0"]) {
    /* there is stage pot*/
    display: block;
    position: absolute;

    left: 0em;
    top: 0em;

    font-size: 0.45em;
    color: #FFFFFF;

    background: var(--clr-orange2);
    border-radius: 0.3em 0 0.3em 0;
    padding: 0.4em;
    font-weight: 600;
    line-height: 1;


    /* TODO check with dylan - adjust variant, like with pot change, feels more sleek */
    left: 0.5em;
    top: 0.5em;
    border-radius: 0.3em;
    transform: translateY(-100%);

    z-index: 6; /* to show up over player bets, i ncase it's raised up*/
}
#playTable #potArea .side-pot:not([data-side-pot="0"])::before {
    content: attr(data-side-pot);
}
[data-tooltip-content] {
    position: relative;
    cursor: pointer;
}
[data-tooltip-content] .tooltip-content {
    display: none;
}
[data-tooltip-content]:hover .tooltip-content,
[data-tooltip-content].show-data-tooltip .tooltip-content { /* should hopefully work for mobile with combination of tabindex="0" */
    display: block;
    position: absolute;
    bottom: calc(100% + 10px * var(--ui-scale));
    right: 0;
    left: 0;
    transform: translate(-50%);

    width: 30ch;

    /*background: #258650;  */
    background: var(--clr-green5);
    box-shadow: calc(1px * var(--ui-scale)) calc(1px * var(--ui-scale)) calc(1px * var(--ui-scale)) #CCCCCC, calc(-1px * var(--ui-scale)) calc(1px * var(--ui-scale)) calc(1px * var(--ui-scale)) #CCCCCC, calc(1px * var(--ui-scale)) calc(-1px * var(--ui-scale)) calc(1px * var(--ui-scale)) #CCCCCC, calc(-1px * var(--ui-scale)) calc(-1px * var(--ui-scale)) calc(1px * var(--ui-scale)) #CCCCCC;
    border-radius: var(--default-border-radius);

    color: #ffffff;
    padding: calc(5px * var(--ui-scale)) calc(10px * var(--ui-scale));
    font-size: calc(11px * var(--ui-scale));
    font-family: var(--font-fam-reg);
    font-weight: 600;
    z-index: 1;
    line-height: 1.3;
}
[data-tooltip-content].bigger-size:hover .tooltip-content,
[data-tooltip-content].bigger-size.show-data-tooltip .tooltip-content {
    font-size: calc(20px * var(--ui-scale));
}

[data-tooltip-content] .tooltip-content.has-tooltip-overflow {
    /*transform: translate(-25%, 50%);*/ /* this version centers it centrally, right over the icon*/

    bottom: calc(100% + 0px * var(--ui-scale));
    max-height: clamp(10em, 18em, 30vh);
    overflow-y: auto;

    scrollbar-color: #CCCCCC transparent;
    scrollbar-width: thin;
}
.portrait [data-tooltip-content] .tooltip-content.has-tooltip-overflow {
    /*max-height: clamp(10em, 50em, 50vh);*/ /* allow higher height on portrait as it's centered anyway*/
    transform: translate(-15%, 0%); /* center centrally on portrait, so it doesn't overflow horizontally */
}
.portrait [data-tooltip-content]:hover .tooltip-content,
.portrait [data-tooltip-content].show-data-tooltip .tooltip-content {
    font-size: calc(14px * var(--ui-scale));
}
[data-tooltip-content] .tooltip-content .tooltip-title {
    text-decoration: underline;
}
[data-tooltip-content] .tooltip-content ul {
    padding-left: calc(12px * var(--ui-scale));
    margin: calc(5px * var(--ui-scale)) 0;
}
[data-tooltip-content] .tooltip-content ol {
    padding-left: calc(12px * var(--ui-scale));
    margin: calc(5px * var(--ui-scale)) 0;

    list-style-type: none; /* Removes default numbering */
    counter-reset: custom-counter; /* Reset the counter */
}
[data-tooltip-content] .tooltip-content ol li:before {
    content: counter(custom-counter) ": "; /* Display counter value followed by colon */
    counter-increment: custom-counter; /* Increment the counter */
}
[data-tooltip-content="side_pots"] ul li {
    margin-bottom: calc(10px * var(--ui-scale));
}
[data-tooltip-content="side_pots"] ul li > span {
    padding-left: calc(10px * var(--ui-scale));
    display: inline-block;
}
[data-current-blind-level-idx="0"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(1) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="1"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(2) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="2"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(3) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="3"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(4) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="4"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(5) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="5"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(6) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="6"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(7) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="7"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(8) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="8"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(9) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="9"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(10) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="10"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(11) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="11"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(12) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="12"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(13) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="13"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(14) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="14"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(15) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="15"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(16) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="16"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(17) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="17"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(18) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="18"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(19) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="19"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(20) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="20"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(21) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="21"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(22) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="22"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(23) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="24"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(24) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="24"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(25) {
    color: var(--clr-yellow);
}
[data-current-blind-level-idx="25"] [data-tooltip-content="blind_changes"] .tooltip-content ol li:nth-of-type(26) {
    color: var(--clr-yellow);
}
[data-tooltip-content="lobby_theme"] {
    pointer-events: all !important; /* override active tab pointer events unset*/
}
[data-tooltip-content="lobby_theme"]:hover .tooltip-content,
[data-tooltip-content="lobby_theme"].show-data-tooltip .tooltip-content {
    text-transform: none !important;
    padding-left: calc(13px * var(--ui-scale));
}
[data-tooltip-content="lobby_theme"]:hover .tooltip-content p {
    margin: calc(9px * var(--ui-scale)) 0;
}
.portrait [data-tooltip-content="lobby_theme"]:hover .tooltip-content,
.portrait [data-tooltip-content="lobby_theme"].show-data-tooltip .tooltip-content {
    top: 0;
    bottom: unset;
}
#playTable #potArea .pot-total .blind-changes .blind-change-timer {
    font-size: 1em;
    flex: 1;
    text-align: left;
}
#playTable #potArea .pot-total .blind-changes .blind-change-timer span {
    position: relative;
    font-size: 0.7em;
    top: calc(-2px * var(--canvas-scale));
}
#playTable #potArea .pot-total .blind-changes .blind-changes-info {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 0.6em;
    min-height: 2.5em;
}
#playTable #potArea .pot-total .blind-changes .new-blind-sizes {
    font-size: 1em;
    text-align: left;
    /*flex: 1;*/
    flex: 0 0 auto;
    margin-left: 0.5em;
    margin-right: 0.5em;
}
.portrait #playTable #potArea .pot-total .blind-changes .blind-changes-info {
    font-size: 0.6em;
}
.portrait #playTable #potArea .pot-total .blind-changes .new-blind-sizes {
    /*font-size: 0.75em;*/
}
#playTable #players {
    /* moved z-index to .player instead, so we can override specific player's z-index (if it's here, we can't override a parent's z-index */
    /*z-index: 5; /* allows to place bg chips origin for animations behind player info*/
}

#playTable .player {
    --player-ui-scale: calc(var(--canvas-scale) * var(--player-table-ui-scale));

    position: absolute;
    padding: calc(20px * var(--player-ui-scale));
    /*background: rgba(0,0,0,0.3);*/
    min-width: clamp(calc(100px * var(--player-ui-scale)), 5vw, 5vw);
    width: max-content;

    /*display: flex;*/
    z-index: 5; /* allows to place bg chips origin for animations behind player info*/
}
.portrait #playTable .player {
    /* increase player boxes relative to table on portrait */
    /*--player-ui-scale: calc(var(--canvas-scale) * var(--player-table-ui-scale) * 1.3);*/
    --player-ui-scale: calc(var(--canvas-scale) * var(--player-table-ui-scale) * var(--scale-table-size));
    --player-hand-cards-scale: calc(0.40 * var(--scale-table-size) * var(--player-table-ui-scale));
    --player1-hand-cards-scale: calc(0.45 * var(--scale-table-size) * var(--player-table-ui-scale));
} /* TODO ideally move these elsewhere for more control on specific sizes*/
.portrait #playTable {
    --table-community-cards-gap: calc(12px * var(--canvas-scale) * var(--scale-table-size));
    --table-community-cards-scale: calc(0.45 * var(--scale-table-size));
}
/*
#game_content:not([data-room-status="paused"]) #playTable .player.active-turn:before {
    content: '';
    position: absolute;
    z-index: -1;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;


    background: rgba(255,255,255,0.3);
    transform: scale(0);

    animation: backgroundScalePulse 2s ease-in-out infinite;
    border-radius: calc(31px * var(--player-ui-scale));
}*/

/* For folded, this player, we handle it a bit differently, as we need to make cards a bit more bright */
#playTable .player.folded:not(.is-this-player),
#playTable .player.bankrupted,
#playTable .player.away,
/*#playTable .player.waiting_to_play,*/
#playTable .player.exiting {
    filter: brightness(30%);
}

/* For this player we have to separate it a bit more, to make cards a bit brighter */
#playTable .player.is-this-player.folded,
#playTable .player.is-this-player.bankrupted,
#playTable .player.is-this-player.away,
#playTable .player.is-this-player.exiting{
    filter: brightness(55%);
}

#playTable .player .left-side {
    /*flex: 1 1 100px;*/
}
#playTable .player .chips-holder {
    position: absolute;
   /*flex: 1 1 100px;*/
    width: calc(3 * var(--chip-size-default) * var(--chip-scale));
}
#playTable .player .info {
    padding: calc(13px * var(--player-ui-scale));
    /*padding-left: calc(60px * var(--player-ui-scale));*/
    padding-left: calc(15px * var(--player-ui-scale));

    min-width: 16ch;
    min-height: calc(28px * var(--player-ui-scale));

    background: var(--player-info-bg);

    font-size: calc(18px * var(--player-ui-scale));
    line-height: calc(24px * var(--player-ui-scale));
    text-align: left;
    color: var(--player-info-text-clr);

    border: clamp(1px, calc(1.5px * var(--player-ui-scale)), 1.5px) solid var(--player-info-border-clr);
    border-radius: calc(15px * var(--player-ui-scale));
}
.portrait #playTable .player .info {
    /* make border a bit bigger on mobile, as it tends to look better?*/
    border: clamp(1px, calc(1.5px * var(--player-ui-scale)), 1.5px)solid var(--player-info-border-clr);
}
#playTable .player.has-membership .info {
    --player-info-border-clr: var(--clr-gold);
}
#playTable .player .info:not(.expand-to-parent) {
    max-width: 16ch;
}
#playTable .player .info:not(.expand-to-parent):not(.is-seat-request) {
    /* now have to account for avater space*/
    max-width: 11ch;
    padding-left: calc(13px * var(--player-ui-scale) + 4ch);
    min-width: 11ch;
    padding-right: calc(5px * var(--player-ui-scale));
}
#game_content #playTable .player .info::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: calc(20px * var(--player-ui-scale));
    right: calc(20px * var(--player-ui-scale));
    bottom: calc(20px * var(--player-ui-scale));
    left: calc(20px * var(--player-ui-scale));
    border-radius: calc(31px * var(--player-ui-scale));
    transition: box-shadow 250ms ease-in-out;
}
#game_content:not([data-room-status="paused"]) #playTable .player.active-turn .info::before {
    /*ox-shadow: 0px calc(-50px * var(--player-ui-scale)) calc(70px * var(--player-ui-scale)) rgba(248, 255, 22, 0.5);*/
    box-shadow: 0px calc(-50px * var(--player-ui-scale)) calc(70px * var(--player-ui-scale)) rgba(255, 255, 255, 0.3);
}
#playTable .player .info .name {
    min-width: 11ch;
    font-size: calc(18px * var(--player-ui-scale));
    line-height: calc(24px * var(--player-ui-scale));
    overflow: hidden;
    margin-bottom: calc(5px * var(--player-ui-scale));
    max-width: calc(100% - 28px * var(--player-ui-scale));
    text-overflow: ellipsis;
}
#playTable .player.exiting .name,
#playTable .player.lower-line-height .name/*,
#playTable .player.waiting_to_play .name*/ {
    line-height: 1.05;
}
#playTable .player .info .name > span {
    display: block;
    font-size: .7em;
    font-style: italic;
    padding-top: .2em;
    padding-bottom: .1em;
}
#playTable .player .info .stack {
    position: relative;
    font-weight: 700;
    width: max-content;
    font-size: 0.90em;
}
#playTable .player .info .stack[data-hand-winnings]:after {
    content: attr(data-hand-winnings);
    display: block;

    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: max-content;
    height: max-content;

    margin: auto 0;
    padding: 0.5em;

    color: #ffffff;
    background: var(--clr-green5);
    border-radius: calc(5px * var(--player-ui-scale));
    transform: translateX(calc(100% + 1ch));
    font-size: 0.6em;
    line-height: 1;
}
#playTable .player .info .profile-avatar {
    --avatar-size: calc(81px * var(--player-ui-scale));

    position: absolute;
    top: 0;
    left: calc(-10px * var(--player-ui-scale));
    bottom: 0;
    margin: auto 0;

    border-radius: 50%;
    /*border: clamp(1px, calc(1.5px * var(--player-ui-scale)), 1.5px) solid var(--player-info-border-clr);*/
    cursor: pointer;
}
#playTable .player .info .profile-avatar:after {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border-radius: 50%;
    border: clamp(1px, calc(1.5px * var(--player-ui-scale)), 1.5px) solid var(--player-info-border-clr);
}
#playTable .player .hand {
    position: absolute;
    top: 0px;

    left: calc(5px * var(--player-ui-scale)); /* to account for 2+2 (2 extra for better centering) extra px of width, to prevent cards falling next row*/
    right: 0;
    margin: 0 auto;
    transform: none;

    /*width: calc(125px * var(--player-ui-scale));*/
    /*width: max-content;*/

    /* added 4x extra px width from 120px, to prevent cards falling next row*/
    width: calc(124px * var(--player-ui-scale));


    /* this y offset will roughly align both smaller and bigger cards neatly vertically */
    /*transform: translate(-50%, calc(calc(90px * var(--player-ui-scale)) - 80%));*/
    /*transform: translate(calc(-50% + calc(-7px * var(--player-ui-scale))), calc(calc(90px * var(--player-ui-scale)) - 80%));*/

    font-size: 0; /* prevent weird layout issues if somehow whitespaces are added! */
}
/*.portrait*/ #playTable .player .hand {
    /*left: calc(97px * var(--player-ui-scale));*/
    top: calc(-46px * var(--player-ui-scale));
    z-index: -1;
    /*transform: translate(calc(-50% + calc(12px * var(--player-ui-scale))), calc(calc(90px * var(--player-ui-scale)) - 80%));*/
}
#playTable .player.cards-revealed .hand {
    /* added 4x extra px width from 158px, to prevent cards falling next row*/
    width: calc(162px * var(--player-ui-scale));
}
/*#playTable .player.pos-type-s1 .hand {*/
/*#playTable .player[data-seat-location-id="0"] .hand {*/
#playTable .player.is-this-player .hand {
    /* for main player the offsets & size has to be 20% bigger */
    /*width: calc(150px * var(--player-ui-scale));*/
    /*width: calc(177px * var(--player-ui-scale));*/ /* a bti extra for no messy stuff as game gets scaled */
    /*transform: translate(calc(-50% + calc(-30px * var(--player-ui-scale))), calc(calc(90px * var(--player-ui-scale)) - 80%));*/


    /* added 4x extra px width from 175px, to prevent cards falling next row*/
    width: calc(179px * var(--player-ui-scale));
}
/*.portrait*/ #playTable .player.is-this-player .hand {
    /*left: calc(136px * var(--player-ui-scale));*/
}
#playTable .player .card {
    display: inline-block;
    --card-scale-modifier: var(--player-hand-cards-scale)
}
/*#playTable .player.pos-type-s1 .card {*/
/*#playTable .player[data-seat-location-id="0"] .card {*/
#playTable .player.is-this-player .card {
    --card-scale-modifier: var(--player1-hand-cards-scale)
}
#playTable .player.force-in-front-all .info {
    background: #00360B;
}
#playTable .player.force-in-front-all .card:not(.force-in-front-all) {
    /* as player DOM is forced in front, we have to unbrighten any of their cards that are not part of winningCardsIds */
    filter: brightness(70%);
}

#playTable .player .card:nth-of-type(1) {
    margin-left: 0;
    /*transform: rotateZ(-4deg);*/
    transform: rotateZ(0deg);
}
#playTable .player .card:nth-of-type(2) {
    /*margin-left: calc(-25px * var(--player-ui-scale));
    margin-bottom: calc(-3px * var(--player-ui-scale));*/
    margin-left: calc(12px * var(--player-ui-scale));
    margin-bottom: calc(0px * var(--player-ui-scale));
    /*transform: rotateZ(9deg);*/
    transform: rotateZ(0deg);
}
#playTable .player:not(.is-this-player) .card[data-face-up="false"]:nth-of-type(2) {
    margin-left: calc(-25px * var(--player-ui-scale));
}
#playTable .player:not(.is-this-player) .card[data-face-up="false"] {
    top: calc(25px * var(--player-ui-scale));
}

/* START EMPTY SEAT SPECIFICS */
#playTable .player .seat-info .info {
    /*padding-left: calc(10px * var(--player-ui-scale))*/
}
#playTable .player .seat-info .info.expand-to-parent {
    padding: 0;
    /*transition: background-color ease-in-out 250ms;*/
}
#playTable .player .seat-info .info.expand-to-parent:hover {
    background: #272727;
}
#playTable .player .info .join-seat {
    font-weight: 700;
    min-height: 1.4em;
    font-size: 1.2em;
}
#playTable .player .info .join-seat:hover {
    transform: scale(1);
}
#playTable .player .seat-info .info.expand-to-parent .join-seat {
    background: none;
    color: white;

    padding: 0;
    width: calc(219px * var(--player-ui-scale));
    height: calc(79px * var(--player-ui-scale));
    line-height: calc(79px * var(--player-ui-scale));
}

/* END EMPTY SEAT SPECIFICS */
#playTable .player .seat-info .info.is-seat-request {
    /*width: calc(142px * var(--player-ui-scale));*/ /* without avatart */
    height: calc(56px * var(--player-ui-scale));
    justify-content: flex-start;
    /* with avatar, accounting for extra padding: */
    padding: calc(11px * var(--player-ui-scale)) calc(13px * var(--player-ui-scale));
    padding-left: calc(13px * var(--player-ui-scale) + 4ch);
    width: calc(139px * var(--player-ui-scale) - 4ch);
    min-width: 11ch;
    max-width: 11ch;
    padding-right: calc(5px * var(--player-ui-scale));
}
#playTable .player .seat-info .info .seat-request-icon {
    position: absolute;
    padding: calc(5px * var(--player-ui-scale));
    width: calc(26px * var(--player-ui-scale));
    height: calc(26px * var(--player-ui-scale));
    bottom: calc(2px * var(--player-ui-scale));

    font-size: calc(26px * var(--player-ui-scale));
    line-height: 1;

    border: 1px solid white;
    border-radius: calc(10px * var(--player-ui-scale));
    color: white;
}
#playTable .player .seat-info .info .seat-request-icon:hover {
    cursor: pointer;
    filter: brightness(115%);
}
#playTable .player .seat-info .info .seat-request-icon.approve-request {
    background: var(--clr-green5);
    left: calc(80px * var(--player-ui-scale));
}
#playTable .player .seat-info .info .seat-request-icon.decline-request {
    background: var(--clr-red);
    right: calc(45px * var(--player-ui-scale));
}
/* START REQUESTING SEAT SPECIFICS */

/* END REQUESTING SEAT SPECIFICS */

/* START player action notes */
/* by defautl show carets pointing at top*/
#playTable .player .action-note {
    --action-note-y-offset: 0px;

    position: absolute;
    top: calc(100% - calc(var(--action-note-y-offset) * var(--player-ui-scale)));
    right: 0;
    left: 0;
    margin: 0 auto;

    padding: calc(20px * var(--player-ui-scale));
    border-radius: calc(20px * var(--player-ui-scale));

    background: white;
    border: 1px solid black;

    max-width: calc(110px * var(--player-ui-scale));

    transition: transform 250ms ease-out;
    transform: scale(0) translate(-100%, 0);

    /* TODO adjust colors to correct scehe, not jsut white or black? */
    color: black;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
}
#playTable .player .action-note.action-taken  {
    transform: none;
}
#playTable .player .action-note .caret-holder {
    position: absolute;
    top: calc(-15px * var(--player-ui-scale));
    right: 0;
    left: 0;

    overflow: hidden;
    width: calc(20px * var(--player-ui-scale));
    height: calc(20px * var(--player-ui-scale));

    margin: 0 auto;
}
#playTable .player .action-note .caret-holder:before {
    content: '';
    display: inline-block;
    width: calc(20px * var(--player-ui-scale));
    height: calc(20px * var(--player-ui-scale));

    background: white;
    border: 1px solid black;

    transform: rotate(45deg);

    margin-bottom: calc(-17px * var(--player-ui-scale));
}

/* different actionNote styling while player forced in front (i.e. on game results)*/
#playTable .player.force-in-front-all .card {
    transition-delay: 500ms;
    transition: top 150ms ease-in-out;
    top: 0; /* always move won palyer cards a bit higher up */
}
#playTable .player.force-in-front-all .action-note {
    right: auto;
    left: calc(15px * var(--player-ui-scale));

    max-width: none;
    width: max-content;

    --action-note-y-offset: 35px;

    border: none;
    background: none;
    color: white;
    font-size: calc(20px * var(--player-ui-scale));
    line-height: 1.2;
    text-align: left;

    /* with new UI we always display it at the bottom */
    top: calc(100% - calc(var(--action-note-y-offset) * var(--player-ui-scale))) !important;
    bottom: initial !important;;
}

#playTable .player.force-in-front-all .action-note span {
    display: block;
    font-weight: bold;
    /*font-style: italic;*/
    font-size: 0.6em;

    padding: 2px 5px;
    background: #00360B;
    border-radius: 5px;
}
#playTable .player.force-in-front-all .action-note .caret-holder {
    /* don't show carets on showdown popup*/
    display: none;
}
/*#playTable .player.pos-type-s1.force-in-front-all .action-note {*/
#playTable .player[data-seat-location-id="0"].force-in-front-all .action-note {
    left: calc(15px * var(--player-ui-scale));
}

/* show carets at bottom*/
/*#playTable .player.pos-type-s2 .action-note,*/
#playTable .player[data-seat-location-id="5"] .action-note,
#playTable .player[data-seat-location-id="4"] .action-note,
#playTable .player[data-seat-location-id="3"] .action-note,
#playTable .player[data-seat-location-id="2"] .action-note,
#playTable .player[data-seat-location-id="1"] .action-note {
    bottom: calc(100% - calc(var(--action-note-y-offset) * var(--player-ui-scale)));
    top: initial;
    left: calc(15px * var(--player-ui-scale));
}
/*#playTable .player.pos-type-s2 .action-note .caret-holder,*/
#playTable .player[data-seat-location-id="5"] .action-note .caret-holder,
#playTable .player[data-seat-location-id="4"] .action-note .caret-holder,
#playTable .player[data-seat-location-id="3"] .action-note .caret-holder,
#playTable .player[data-seat-location-id="2"] .action-note .caret-holder,
#playTable .player[data-seat-location-id="1"] .action-note .caret-holder {
    bottom: calc(-14px * var(--player-ui-scale));
    top: auto;
}
/*#playTable .player.pos-type-s2 .action-note .caret-holder:before,*/
#playTable .player[data-seat-location-id="5"] .action-note .caret-holder:before,
#playTable .player[data-seat-location-id="4"] .action-note .caret-holder:before,
#playTable .player[data-seat-location-id="3"] .action-note .caret-holder:before,
#playTable .player[data-seat-location-id="2"] .action-note .caret-holder:before,
#playTable .player[data-seat-location-id="1"] .action-note .caret-holder:before {
    margin-top: calc(-10px * var(--player-ui-scale));
    margin-bottom: 0;
}


/* notes special offsets */
#playTable .player.pos-type-s5 .action-note {

}


/* START stage-bets */

#playTable .player .stage-bets {
    --action-note-y-offset: 100px;

    position: absolute;
    top: calc(0% - calc(var(--action-note-y-offset) * var(--player-ui-scale)));
    right: 0;
    left: 0;
    margin: 0 auto;

    padding: calc(10px * var(--player-ui-scale));
    border-radius: calc(10px * var(--player-ui-scale));

    background: rgba(0,0,0,0.14);

    width: max-content;
    /*transition: transform 250ms ease-out;*/
    transform: scale(0) translate(-100%, 0);

    color: #ffffff;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
    font-size: 1.3em;
}
.use-dark-ui-on-table-felt #playTable .player .stage-bets {
    background: rgba(0,0,0,0.5);
    color: #ffffff;
}
.use-light-ui-on-table-felt #playTable .player .stage-bets {
    background: rgba(255,255,255,0.5);
    color: #000000;
}
.use-dark-2-ui-on-table-felt #playTable .player .stage-bets {
    background: rgba(0,0,0,0.8);
    color: #ffffff;
}
.use-light-2-ui-on-table-felt #playTable .player .stage-bets {
    background: rgba(255,255,255,0.8);
    color: #000000;
}
#playTable .player .stage-bets.bet-made  {
    transform: none;
}
#playTable .player:not(.is-this-player)[data-seat-location-id="0"] .stage-bets {
    --action-note-y-offset: 76px;
}
/* top 3 seats on landscape*/
#playTable .player[data-seat-location-id="4"] .stage-bets,
#playTable .player[data-seat-location-id="5"] .stage-bets,
#playTable .player[data-seat-location-id="6"] .stage-bets {
    --action-note-y-offset: 8px;
    top: calc(100% - calc(var(--action-note-y-offset) * var(--player-ui-scale)));
}
#playTable .player[data-seat-location-id="6"] .stage-bets {
    right: unset;
    --action-note-y-offset: -1px;
    left: calc(17px * var(--player-ui-scale));
}
/* 2 most left seats */
#playTable .player[data-seat-location-id="2"] .stage-bets,
#playTable .player[data-seat-location-id="3"] .stage-bets {
    --action-note-y-offset: -40px;
    right: calc(-54px * var(--player-ui-scale));
    left: unset;
}
/* 2 most right seats */
#playTable .player[data-seat-location-id="7"] .stage-bets,
#playTable .player[data-seat-location-id="8"] .stage-bets {
    --action-note-y-offset: -40px;
    /*left: calc(-150px * var(--player-ui-scale));
    right: unset;*/

    right: calc(265px * var(--player-ui-scale));
    left: unset;
}


/* portrait adjustments */

.portrait #playTable .player .stage-bets {
    /* reset everythign to base for portrait so ti's easy to adjust below */
    --action-note-y-offset: 25px;
    left: 0;
    right: 0;
    font-size: 1.2em;
    padding: calc(10px * var(--player-ui-scale)) calc(7px * var(--player-ui-scale));
}
.portrait #playTable .player[data-seat-location-id="0"] .stage-bets {
    --action-note-y-offset: 92px;
}
.portrait #playTable .player:not(.is-this-player)[data-seat-location-id="0"] .stage-bets {
    --action-note-y-offset: 70px;
}
/* top 1 seats on landscape*/
#playTable .player[data-seat-location-id="5"] .stage-bets {
    --action-note-y-offset: 2px;
    top: calc(100% - calc(var(--action-note-y-offset) * var(--player-ui-scale)));
}
/* 2 most left seats */
#playTable .player[data-seat-location-id="2"] .stage-bets,
#playTable .player[data-seat-location-id="3"] .stage-bets,
#playTable .player[data-seat-location-id="4"] .stage-bets {
    --action-note-y-offset: -40px;
    top: calc(0% - calc(var(--action-note-y-offset) * var(--player-ui-scale)));

    /*left: unset;
    right: calc(-33px * var(--player-ui-scale));*/

    left: calc(235px * var(--player-ui-scale));
    right: unset;
}
#playTable .player[data-seat-location-id="4"] .stage-bets {
    --action-note-y-offset: -120px;
    /*right: calc(17px * var(--player-ui-scale));*/
    right: unset;
    left: calc(166px * var(--player-ui-scale));
}
/* 2 most right seats */
/*#playTable .player[data-seat-location-id="6"] .stage-bets,*/
#playTable .player[data-seat-location-id="7"] .stage-bets,
#playTable .player[data-seat-location-id="8"] .stage-bets {
    --action-note-y-offset: -40px;
    top: calc(0% - calc(var(--action-note-y-offset) * var(--player-ui-scale)));
    /*right: calc(240px * var(--player-ui-scale));
    left: unset;*/
    /*left: calc(-69px * var(--player-ui-scale)); */
    right: calc(265px * var(--player-ui-scale));
    left: unset;
}
#playTable .player[data-seat-location-id="1"] .stage-bets {
    --action-note-y-offset: 66px;
    left: unset;
    right: calc(17px * var(--player-ui-scale));
}
#playTable .player[data-seat-location-id="9"] .stage-bets {
    --action-note-y-offset: 66px;
    right: unset;
    left: calc(17px * var(--player-ui-scale));
}
.portrait #playTable .player[data-seat-location-id="1"] .stage-bets,
.portrait #playTable .player[data-seat-location-id="2"] .stage-bets,
.portrait #playTable .player[data-seat-location-id="3"] .stage-bets,
.portrait #playTable .player[data-seat-location-id="4"] .stage-bets {
    --action-note-y-offset: -40px;
    top: calc(0% - calc(var(--action-note-y-offset) * var(--player-ui-scale)));
    /*right: calc(-40px * var(--player-ui-scale));
    left: unset;*/

    left: calc(235px * var(--player-ui-scale));
    right: unset;
}

.portrait #playTable .player[data-seat-location-id="6"] .stage-bets,
.portrait #playTable .player[data-seat-location-id="7"] .stage-bets,
.portrait #playTable .player[data-seat-location-id="8"] .stage-bets,
.portrait #playTable .player[data-seat-location-id="9"] .stage-bets {
    right: calc(265px * var(--player-ui-scale));
    left: unset;
}
.portrait #playTable .player[data-seat-location-id="1"] .stage-bets,
.portrait #playTable .player[data-seat-location-id="9"] .stage-bets {
    --action-note-y-offset: 56px;
}
.portrait #playTable .player[data-seat-location-id="2"] .stage-bets,
.portrait #playTable .player[data-seat-location-id="8"] .stage-bets {
    --action-note-y-offset: -20px;
}
.portrait #playTable .player[data-seat-location-id="3"] .stage-bets,
.portrait #playTable .player[data-seat-location-id="7"] .stage-bets {
    /* To avoid bet bubble when showing next blinds */
    --action-note-y-offset: -21px;
}
.portrait #playTable .player[data-seat-location-id="4"] .stage-bets {
    --action-note-y-offset: -69px;
}
.portrait #playTable .player[data-seat-location-id="6"] .stage-bets {
    --action-note-y-offset: 52px;
}

[data-scale-table-size="1.1"].portrait #playTable .player[data-seat-location-id="3"] .stage-bets,
[data-scale-table-size="1.1"].portrait #playTable .player[data-seat-location-id="7"] .stage-bets {
    /* To avoid bet bubble when showing next blinds */
    --action-note-y-offset: -41px;
}
[data-scale-table-size="1.15"].portrait #playTable .player[data-seat-location-id="3"] .stage-bets,
[data-scale-table-size="1.15"].portrait #playTable .player[data-seat-location-id="7"] .stage-bets {
    /* To avoid bet bubble when showing next blinds */
    --action-note-y-offset: -41px;
}
[data-scale-table-size="1.15"].portrait #playTable .player[data-seat-location-id="3"] .stage-bets,
[data-scale-table-size="1.15"].portrait #playTable .player[data-seat-location-id="7"] .stage-bets {
    /* To avoid bet bubble when showing next blinds */
    --action-note-y-offset: -41px;
}
[data-scale-table-size="1.2"].portrait #playTable .player[data-seat-location-id="3"] .stage-bets,
[data-scale-table-size="1.2"].portrait #playTable .player[data-seat-location-id="7"] .stage-bets {
    /* To avoid bet bubble when showing next blinds */
    --action-note-y-offset: -41px;
}
[data-scale-table-size="1.25"].portrait #playTable .player[data-seat-location-id="3"] .stage-bets,
[data-scale-table-size="1.25"].portrait #playTable .player[data-seat-location-id="7"] .stage-bets {
    /* To avoid bet bubble when showing next blinds */
    --action-note-y-offset: -41px;
}
[data-scale-table-size="1.3"].portrait #playTable .player[data-seat-location-id="3"] .stage-bets,
[data-scale-table-size="1.3"].portrait #playTable .player[data-seat-location-id="7"] .stage-bets {
    /* To avoid bet bubble when showing next blinds */
    --action-note-y-offset: -41px;
}
/* END stage bets */


/* START player hand info */
#playTable .player .player-icons {
    --action-note-y-offset: 8px;
    position: absolute;
    font-size: 3em;

    top: initial;
    bottom: calc(100% - calc(var(--action-note-y-offset) * var(--player-ui-scale)));
    left: calc(40px * var(--player-ui-scale));

    margin: 0 auto;

    transform: translateX(calc(0.6 * var(--player1-hand-cards-scale) * var(--card-width-default) - 0%));
}
#playTable .player .player-icons .icon.dealer {
    width: calc(20px * var(--player-ui-scale));
    height: calc(20px * var(--player-ui-scale));
    padding: calc(3px * var(--player-ui-scale));
}
#playTable .player .player-icons .fa-stack-away {
    font-size: calc(13px * var(--player-ui-scale));
    vertical-align: top;
    margin-right: calc(5px * var(--player-ui-scale));
    margin-left: calc(-3px * var(--player-ui-scale));
}
#playTable .player .player-icons .fa-stack-away .fa-seat-airline {
    color: black;
}
#playTable .player.force-in-front-all .player-icons:not(.force-in-front-all) {
    /* as player DOM is forced in front, we have to unbrighten any of their cards that are not part of winningCardsIds */
    /*filter: brightness(30%);*/
}
/*.portrait*/ #playTable .player .player-icons {
    /*bottom: calc(100% - calc(var(--action-note-y-offset) * var(--player-ui-scale)));
    left: calc(2px * var(--player-ui-scale));*/
    transform: none;

    top: calc(33px * var(--player-ui-scale));
    right: calc(33px * var(--player-ui-scale));
    left: auto;
    bottom: auto;
    margin: 0;

    /* TODO clear old - this is new, accounting for avatar spacing */
    top: calc(8px * var(--player-ui-scale));
    left: calc(18px * var(--player-ui-scale));
    right: auto;
}
/*.portrait*/ #playTable .player.is-this-player .player-icons {
    /*left: calc(-20px * var(--player-ui-scale));*/
}

/*.portrait*/ #playTable .player[data-seat-location-id="5"] .player-icons {
    /* central top*/
}
/* right side */
/*.portrait*/ #playTable .player[data-seat-location-id="6"] .player-icons,
/*.portrait*/ #playTable .player[data-seat-location-id="7"] .player-icons,
/*.portrait*/ #playTable .player[data-seat-location-id="8"] .player-icons,
/*.portrait*/ #playTable .player[data-seat-location-id="9"] .player-icons {
    /*bottom: calc(100% - calc(var(--action-note-y-offset) * var(--player-ui-scale)));
    left: calc(170px * var(--player-ui-scale));*/
}
#playTable .player .fa-crown {
    position: absolute;
    font-size: 1.2em;
    right: calc(8px * var(--player-ui-scale));
    top: calc(8px * var(--player-ui-scale));
    transform: rotate(38deg);
}
#playTable .player .action-timer {
    display: none;
    --action-note-y-offset: 12px;
    position: absolute;
    top: calc(100% - calc(var(--action-note-y-offset) * var(--player-ui-scale)));
    /*right: 0;*/
    left: calc(31px * var(--player-ui-scale));
    margin: 0 auto;

    transform: translateX(calc(0.0 * var(--player1-hand-cards-scale) * var(--card-width-default) - 0%)) translateZ(0);
    width: calc(187px * var(--player-ui-scale));
    height: calc(4px * var(--player-ui-scale));

    background: white;
    /*border: calc(1px * var(--player-ui-scale)) solid white;*/

    border-radius: calc(var(--player-ui-scale) * 4px);
    overflow: hidden;
}
/*.portrait*/ #playTable .player .action-timer {
    /*left: calc(41px * var(--player-ui-scale));*/

    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: calc(var(--player-ui-scale) * 4px);
    animation-play-state: paused;
}
#game_content:not([data-room-status="paused"]) #playTable .player.active-turn .action-timer {
    display: block;
    animation: pulsateTimerBar linear forwards;
    animation-iteration-count: 1;
    transform-origin: center center;
}
#playTable .player.force-in-front-all .action-timer:not(.force-in-front-all) {
    /* as player DOM is forced in front, we have to unbrighten any of their cards that are not part of winningCardsIds */
    filter: brightness(30%);
}
@keyframes pulsateTimerBar {
    0% {
        transform: scale(1);
    }
    70% {
        transform: scale(1);
    }
    75% {
        transform: scale(0.95);
    }
    80% {
        transform: scale(1);
    }
    85% {
        transform: scale(0.95);
    }
    90% {
        transform: scale(1);
    }
    95% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}
#playTable .player .action-timer .timer-fill {
    width: 100%;
    height: 100%;
    transform-origin: 0 center;

    /*transform: scaleX(0.7);*/
    background: var(--clr-green);
    transition: background-color 500ms ease-in-out;
    /*border-top-right-radius: calc(var(--player-ui-scale) * 4px);
    border-bottom-right-radius: calc(var(--player-ui-scale) * 4px);*/
}
/*.portrait*/ #playTable .player .action-timer .timer-fill {
    border-radius: calc(var(--player-ui-scale) * 4px);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    animation-play-state: paused;
}
#playTable .player.active-turn .action-timer .timer-fill {
    animation: animateTimerBar linear forwards;
    animation-iteration-count: 1;
}
@keyframes animateTimerBar {
    0% {
        background: var(--clr-green);
        transform: scaleX(1);
    }
    30% {
        background: var(--clr-green);
    }
    50% {
        background: orange;
    }
    70% {
        background: orange;
    }
    80% {
        background: var(--clr-red);
    }
    100% {
        background: var(--clr-red);
        transform: scaleX(0);
    }
}

#playTable .player .best-hand {
    display: none;
    --action-note-y-offset: 11px;

    position: absolute;
    top: calc(110% - calc(var(--action-note-y-offset) * var(--player-ui-scale)));
    /*right: 0;*/
    left: 0;
    margin: 0 auto;

    padding: calc(5px * var(--player-ui-scale));
    border-radius: calc(7px * var(--player-ui-scale));

    /*background: var(--btn-fold-bg);  */
    background: #fe0100;
    border: 1px solid white;

    width: max-content;
    min-width: calc(80px * var(--player-ui-scale));
    min-width: auto;
    max-width: calc(110px * var(--player-ui-scale));

    /* TODO adjust colors to correct scehe, not jsut white or black? */
    color: white;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
    font-size: 0.8em;
    line-height: 1;

    transform: translateX(calc(-0.4 * var(--player1-hand-cards-scale) * var(--card-width-default) - 50%));
}
/*.portrait*/ #playTable .player .best-hand {
    --action-note-y-offset: 30px;
    /*left: calc(167px * var(--player-ui-scale));*/
    /*left: calc(144px * var(--player-ui-scale));*/

    /* to shwo at bottom
    top: auto;
    bottom: calc(20px * var(--player-ui-scale));*/
    right: calc(20px * var(--player-ui-scale));
    left: auto;
    margin: 0;
    transform: none;

    /* To show at top of player box */
    top: calc(12px * var(--player-ui-scale));
    bottom: auto;

    /*border: none;*/

    border-radius: calc(3px * var(--player-ui-scale));

    /* we give it border, so it overlaps over the parent, as then there's no weird black pixels in between (compared to if we just offset it by 1 px)*/
    /* If we want to show it at bottom we also add these:

    border-bottom: clamp(1px, calc(1.5px * var(--player-ui-scale)), 1.5px) solid white;
    border-right: clamp(1px, calc(1.5px * var(--player-ui-scale)), 1.5px) solid white;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: calc(15px * var(--player-ui-scale));*/

    padding: calc(4px * var(--player-ui-scale)) calc(8px * var(--player-ui-scale));
    font-size: 0.7em;
}
#playTable .player .best-hand.shown {
    display: block;
}
#game_content[data-room-status="waiting_players"] #playTable .player .best-hand.shown,
#playTable .player.waiting_to_play .best-hand.shown,
#playTable .player.folded .best-hand.shown,
#playTable .player.bankrupted .best-hand.shown,
#playTable .player.away .best-hand.shown,
#playTable .player.exiting .best-hand.shown {
    display: none;
}
#playTable .player.force-in-front-all .best-hand {
    display: none; /* just hide it always, as it's shown differently already on end screen */


    /*
    right: auto;
    left: calc(40px * var(--player-ui-scale));

    max-width: none;
    width: max-content;

    --action-note-y-offset: 35px;

    border: none;
    background: none;
    color: white;
    font-size: calc(20px * var(--player-ui-scale));
    line-height: 1.2;
    text-align: left;*/
}

#playTable .player.force-in-front-all .best-hand span {
    display: block;
    font-weight: normal;
    font-style: italic;
    font-size: 0.7em;
}
/*#playTable .player.pos-type-s1.force-in-front-all .best-hand {*/
/*#playTable .player.is-this-player.force-in-front-all .best-hand {
    left: calc(25px * var(--player-ui-scale));
}*/

/* show carets at bottom*/
/*#playTable .player.pos-type-s2 .best-hand,*/

/*#playTable .player[data-seat-location-id="5"] .best-hand,
#playTable .player[data-seat-location-id="4"] .best-hand,
#playTable .player[data-seat-location-id="3"] .best-hand,
#playTable .player[data-seat-location-id="2"] .best-hand,
#playTable .player[data-seat-location-id="1"] .best-hand {
    bottom: calc(100% - calc(var(--action-note-y-offset) * var(--player-ui-scale)));
    top: initial;
    left: calc(50px * var(--player-ui-scale));
}*/
 /* END player hand info */

/* START WIN INFO LINE */

#playTable .player .win-info {
    display: none;

    position: absolute;
    left: calc(35px * var(--player-ui-scale));

    --action-note-y-offset: 35px;
    bottom: initial !important;
    top: calc(100% - calc(var(--action-note-y-offset) * var(--player-ui-scale)) + calc(20px * var(--player-ui-scale))) !important;

    width: max-content;

    color: white;
    font-weight: bold;
    text-align: center;
    text-transform: capitalize;
    /*font-size: 0.7em;*/
    line-height: 1.2;
    font-size: calc(20px * var(--player-ui-scale));
}
#playTable .player .win-info.shown {
    display: flex;
    gap: calc(var(--canvas-scale) * 4px);
}
#playTable .player .win-info > div {
    line-height: 1.2;

    color: #ffffff;
    font-size: 0.6em;
    padding: 2px 5px;
    border-radius: 5px;
}
#playTable .player .win-info .win-hand {
    background: var(--clr-green2);
    background: #00360B;
}
#playTable .player .win-info .win-amount {
    background: var(--clr-green5);
}
#playTable .player .win-info .is-side-pot {
    background: var(--clr-orange2);
}
/* END WIN INFO LINE */

/* END player actions notes */

#playTable .player {
    transform: translate(-50%, -50%);
}
/* Player Seat positions Landscape */
#playTable .player.pos-type-s2 {
    left: -1%;
    top: 50%;
}
#playTable .player.pos-type-s3 {
    left: 98%;
    top: 50%;
}
#playTable .player[data-seat-location-id="0"] {
    left: 50%;
    top: 97%;
}
#playTable .player.is-this-player {
    z-index: 6; /* otherwise seatloc 1 display over its cards)*/
}
#playTable .player[data-seat-location-id="1"] {
    left: 16%;
    top: 95%;
}
#playTable .player[data-seat-location-id="2"] {
    left: 1%;
    top: 66%;
}
#playTable .player[data-seat-location-id="3"] {
    left: 1%;
    top: 36%;
}
#playTable .player[data-seat-location-id="4"] {
    left: 16%;
    top: 3%;
}
#playTable .player[data-seat-location-id="5"] {
    left: 50%;
    top: 1%;
}
#playTable .player[data-seat-location-id="6"] {
    left: 84%;
    top: 3%;
}
#playTable .player[data-seat-location-id="7"] {
    left: 99%;
    top: 36%;
}
#playTable .player[data-seat-location-id="8"] {
    left: 99%;
    top: 66%;
}
#playTable .player[data-seat-location-id="9"] {
    left: 84%;
    top: 95%;
}
/* Player Seat Positions Portrait */

/*
.portrait #playTable .player.pos-type-s2 {
    left: -4%;
    top: 50%;
}
.portrait #playTable .player.pos-type-s3 {
    left: 121%;
    top: 50%;
}*/
.portrait #playTable .player {
    --vertical-offset: calc(-3px * var(--canvas-scale));
}
.portrait #playTable .player[data-seat-location-id="0"] {
    left: 50%;
    top: calc(97% + var(--vertical-offset));
}
.portrait #playTable .player[data-seat-location-id="1"] {
    left: 13%;
    top: calc(89% + var(--vertical-offset));
}
.portrait #playTable .player[data-seat-location-id="2"] {
    left: 13%;
    top: calc(71% + var(--vertical-offset));
}
.portrait #playTable .player[data-seat-location-id="3"] {
    left: 13%;
    top: calc(31% + var(--vertical-offset));
}
.portrait #playTable .player[data-seat-location-id="4"] {
    left: 13%;
    top: calc(13% + var(--vertical-offset));
}
.portrait #playTable .player[data-seat-location-id="5"] {
    left: 50%;
    top: calc(2% + var(--vertical-offset));
}
.portrait #playTable .player[data-seat-location-id="6"] {
    left: 87%;
    top: calc(13% + var(--vertical-offset));
}
.portrait #playTable .player[data-seat-location-id="7"] {
    left: 87%;
    top: calc(31% + var(--vertical-offset));
}
.portrait #playTable .player[data-seat-location-id="8"] {
    left: 87%;
    top: calc(71% + var(--vertical-offset));
}
.portrait #playTable .player[data-seat-location-id="9"] {
    left: 87%;
    top: calc(89% + var(--vertical-offset));
}


/* special table sizings changes for portrait */
[data-scale-table-size="1"].portrait .game-content-holder .left-side-buttons
/*[data-scale-table-size="1.05"].portrait .game-content-holder .left-side-buttons,*/
/*[data-scale-table-size="1.1"].portrait .game-content-holder .left-side-buttons,
[data-scale-table-size="1.15"].portrait .game-content-holder .left-side-buttons,
[data-scale-table-size="1.2"].portrait .game-content-holder .left-side-buttons ,
[data-scale-table-size="1.25"].portrait .game-content-holder .left-side-buttons*/ {
    bottom: 8rem;
    top: 0;
    margin: auto 0;
}
[data-scale-table-size="1"].portrait #playTable {
    /* new change - always make the smalelr table image for more space*/
    bottom: calc(130px * var(--ui-scale));
    height: calc(900px * var(--canvas-scale) * var(--scale-table-size));
}
[data-scale-table-size="1.05"].portrait #playTable {
    bottom: calc(130px * var(--ui-scale));
    height: calc(900px * var(--canvas-scale) * var(--scale-table-size));
}
[data-scale-table-size="1.1"].portrait #playTable {
    bottom: calc(130px * var(--ui-scale));
    height: calc(900px * var(--canvas-scale) * var(--scale-table-size));
}
[data-scale-table-size="1.15"].portrait #playTable {
    bottom: calc(130px * var(--ui-scale));
    height: calc(900px * var(--canvas-scale) * var(--scale-table-size));
}
[data-scale-table-size="1.2"].portrait #playTable {
    bottom: calc(130px * var(--ui-scale));
    height: calc(900px * var(--canvas-scale) * var(--scale-table-size));
}
[data-scale-table-size="1.25"].portrait #playTable {
    bottom: calc(100px * var(--ui-scale));
    height: calc(900px * var(--canvas-scale) * var(--scale-table-size));
}
[data-scale-table-size="1.3"].portrait #playTable {
    bottom: calc(100px * var(--ui-scale));
    height: calc(900px * var(--canvas-scale) * var(--scale-table-size));
}
[data-scale-table-size="1.25"].portrait #playTable .player {
    --player-table-ui-scale: 0.95;
}
[data-scale-table-size="1.3"].portrait #playTable .player {
    --player-table-ui-scale: 0.9;
}


/* portrait positions at 1.05 scale */
[data-scale-table-size="1.05"].portrait #playTable .player[data-seat-location-id="0"] {
}
[data-scale-table-size="1.05"].portrait #playTable .player[data-seat-location-id="1"] {
    top: calc(88% + var(--vertical-offset));
}
[data-scale-table-size="1.05"].portrait #playTable .player[data-seat-location-id="2"] {
    top: calc(70% + var(--vertical-offset));
}
[data-scale-table-size="1.05"].portrait #playTable .player[data-seat-location-id="3"] {
    top: calc(32% + var(--vertical-offset));
}
[data-scale-table-size="1.05"].portrait #playTable .player[data-seat-location-id="4"] {
    top: calc(14% + var(--vertical-offset));
}
[data-scale-table-size="1.05"].portrait #playTable .player[data-seat-location-id="5"] {
}
[data-scale-table-size="1.05"].portrait #playTable .player[data-seat-location-id="6"] {
    top: calc(14% + var(--vertical-offset));
}
[data-scale-table-size="1.05"].portrait #playTable .player[data-seat-location-id="7"] {
    top: calc(32% + var(--vertical-offset));
}
[data-scale-table-size="1.05"].portrait #playTable .player[data-seat-location-id="8"] {
    top: calc(70% + var(--vertical-offset));
}
[data-scale-table-size="1.05"].portrait #playTable .player[data-seat-location-id="9"] {
    top: calc(89% + var(--vertical-offset));
}


/* portrait positions at 1.10 scale */
[data-scale-table-size="1.1"].portrait  #playTable #communityHolder {
    height: 18%;
}

/* portrait positions at 1.15 scale */
[data-scale-table-size="1.15"].portrait  #playTable #communityHolder {
    height: 19%;
}
[data-scale-table-size="1.15"].portrait #playTable .logo-holder {
    /*top: calc(65px * var(--canvas-scale) + calc(-220px * calc(var(--scale-table-size) - 1) * var(--canvas-scale)));*/
}
[data-scale-table-size="1.15"].portrait #playTable .player[data-seat-location-id="0"] {
}
[data-scale-table-size="1.15"].portrait #playTable .player[data-seat-location-id="1"] {
    top: calc(89% + var(--vertical-offset));
}
[data-scale-table-size="1.15"].portrait #playTable .player[data-seat-location-id="2"] {
    top: calc(71% + var(--vertical-offset));
}
[data-scale-table-size="1.15"].portrait #playTable .player[data-seat-location-id="3"] {
    top: calc(31% + var(--vertical-offset));
}
[data-scale-table-size="1.15"].portrait #playTable .player[data-seat-location-id="4"] {
    top: calc(13% + var(--vertical-offset));
}
[data-scale-table-size="1.15"].portrait #playTable .player[data-seat-location-id="5"] {
}
[data-scale-table-size="1.15"].portrait #playTable .player[data-seat-location-id="6"] {
    top: calc(13% + var(--vertical-offset));
}
[data-scale-table-size="1.15"].portrait #playTable .player[data-seat-location-id="7"] {
    top: calc(31% + var(--vertical-offset));
}
[data-scale-table-size="1.15"].portrait #playTable .player[data-seat-location-id="8"] {
    top: calc(71% + var(--vertical-offset));
}
[data-scale-table-size="1.15"].portrait #playTable .player[data-seat-location-id="9"] {
    top: calc(89% + var(--vertical-offset));
}

/* portrait positions at 1.2 scale */
[data-scale-table-size="1.2"].portrait  #playTable #communityHolder {
    height: 19%;
}
[data-scale-table-size="1.2"].portrait #playTable .logo-holder {
    /*top: calc(80px * var(--canvas-scale) + calc(-400px * calc(var(--scale-table-size) - 1) * var(--canvas-scale)));*/
}
[data-scale-table-size="1.2"].portrait #playTable .player[data-seat-location-id="0"] {
}
[data-scale-table-size="1.2"].portrait #playTable .player[data-seat-location-id="1"] {
    top: calc(89% + var(--vertical-offset));
    left: 16%;
}
[data-scale-table-size="1.2"].portrait #playTable .player[data-seat-location-id="2"] {
    top: calc(71% + var(--vertical-offset));
    left: 16%;
}
[data-scale-table-size="1.2"].portrait #playTable .player[data-seat-location-id="3"] {
    top: calc(31% + var(--vertical-offset));
    left: 16%;
}
[data-scale-table-size="1.2"].portrait #playTable .player[data-seat-location-id="4"] {
    top: calc(13% + var(--vertical-offset));
    left: 16%;
}
[data-scale-table-size="1.2"].portrait #playTable .player[data-seat-location-id="5"] {
}
[data-scale-table-size="1.2"].portrait #playTable .player[data-seat-location-id="6"] {
    top: calc(13% + var(--vertical-offset));
}
[data-scale-table-size="1.2"].portrait #playTable .player[data-seat-location-id="7"] {
    top: calc(31% + var(--vertical-offset));
}
[data-scale-table-size="1.2"].portrait #playTable .player[data-seat-location-id="8"] {
    top: calc(71% + var(--vertical-offset));
}
[data-scale-table-size="1.2"].portrait #playTable .player[data-seat-location-id="9"] {
    top: calc(89% + var(--vertical-offset));
}

/* portrait at 1.25 scale */
[data-scale-table-size="1.25"].portrait  #playTable #communityHolder {
    height: 17%;
}
[data-scale-table-size="1.25"].portrait #playTable .player[data-seat-location-id="0"] {
}
[data-scale-table-size="1.25"].portrait #playTable .player[data-seat-location-id="1"] {
    top: calc(89% + var(--vertical-offset));
    left: 17%;
}
[data-scale-table-size="1.25"].portrait #playTable .player[data-seat-location-id="2"] {
    top: calc(71% + var(--vertical-offset));
    left: 17%;
}
[data-scale-table-size="1.25"].portrait #playTable .player[data-seat-location-id="3"] {
    top: calc(31% + var(--vertical-offset));
    left: 17%;
}
[data-scale-table-size="1.25"].portrait #playTable .player[data-seat-location-id="4"] {
    top: calc(13% + var(--vertical-offset));
    left: 17%;
}
[data-scale-table-size="1.25"].portrait #playTable .player[data-seat-location-id="5"] {
}
[data-scale-table-size="1.25"].portrait #playTable .player[data-seat-location-id="6"] {
    top: calc(13% + var(--vertical-offset));
}
[data-scale-table-size="1.25"].portrait #playTable .player[data-seat-location-id="7"] {
    top: calc(31% + var(--vertical-offset));
}
[data-scale-table-size="1.25"].portrait #playTable .player[data-seat-location-id="8"] {
    top: calc(71% + var(--vertical-offset));
}
[data-scale-table-size="1.25"].portrait #playTable .player[data-seat-location-id="9"] {
    top: calc(89% + var(--vertical-offset));
}

/* portrait positions at 1.3 scale */
[data-scale-table-size="1.3"].portrait  #playTable #communityHolder {
    height: 19%;
}
[data-scale-table-size="1.3"].portrait #playTable .logo-holder {
    /*top: calc(80px * var(--canvas-scale) + calc(-280px * calc(var(--scale-table-size) - 1) * var(--canvas-scale)));*/
}
[data-scale-table-size="1.3"].portrait #playTable .player[data-seat-location-id="0"] {
}
[data-scale-table-size="1.3"].portrait #playTable .player[data-seat-location-id="1"] {
    top: calc(88% + var(--vertical-offset));
    left: 17%;
}
[data-scale-table-size="1.3"].portrait #playTable .player[data-seat-location-id="2"] {
    top: calc(70% + var(--vertical-offset));
    left: 17%;
}
[data-scale-table-size="1.3"].portrait #playTable .player[data-seat-location-id="3"] {
    top: calc(32% + var(--vertical-offset));
    left: 17%;
}
[data-scale-table-size="1.3"].portrait #playTable .player[data-seat-location-id="4"] {
    top: calc(14% + var(--vertical-offset));
    left: 17%;
}
[data-scale-table-size="1.3"].portrait #playTable .player[data-seat-location-id="5"] {
}
[data-scale-table-size="1.3"].portrait #playTable .player[data-seat-location-id="6"] {
    top: calc(14% + var(--vertical-offset));
}
[data-scale-table-size="1.3"].portrait #playTable .player[data-seat-location-id="7"] {
    top: calc(32% + var(--vertical-offset));
}
[data-scale-table-size="1.3"].portrait #playTable .player[data-seat-location-id="8"] {
    top: calc(70% + var(--vertical-offset));
}
[data-scale-table-size="1.3"].portrait #playTable .player[data-seat-location-id="9"] {
    top: calc(88% + var(--vertical-offset));
}


/* portrait positions at 1.4 scale */
[data-scale-table-size="1.4"].portrait  #playTable #communityHolder {
    height: 20%;
}
[data-scale-table-size="1.4"].portrait #playTable .logo-holder {
    /*top: calc(80px * var(--canvas-scale) + calc(-220px * calc(var(--scale-table-size) - 1) * var(--canvas-scale)));*/
}
[data-scale-table-size="1.4"].portrait #playTable .player[data-seat-location-id="0"] {
}
[data-scale-table-size="1.4"].portrait #playTable .player[data-seat-location-id="1"] {
    top: calc(85% + var(--vertical-offset));
}
[data-scale-table-size="1.4"].portrait #playTable .player[data-seat-location-id="2"] {
    top: calc(66% + var(--vertical-offset));
}
[data-scale-table-size="1.4"].portrait #playTable .player[data-seat-location-id="3"] {
    top: calc(37% + var(--vertical-offset));
}
[data-scale-table-size="1.4"].portrait #playTable .player[data-seat-location-id="4"] {
    top: calc(17% + var(--vertical-offset));
}
[data-scale-table-size="1.4"].portrait #playTable .player[data-seat-location-id="5"] {
}
[data-scale-table-size="1.4"].portrait #playTable .player[data-seat-location-id="6"] {
    top: calc(17% + var(--vertical-offset));
}
[data-scale-table-size="1.4"].portrait #playTable .player[data-seat-location-id="7"] {
    top: calc(37% + var(--vertical-offset));
}
[data-scale-table-size="1.4"].portrait #playTable .player[data-seat-location-id="8"] {
    top: calc(66% + var(--vertical-offset));
}
[data-scale-table-size="1.4"].portrait #playTable .player[data-seat-location-id="9"] {
    top: calc(85% + var(--vertical-offset));
}


/* portrait positions at 1.5 scale */
[data-scale-table-size="1.5"].portrait  #playTable #communityHolder {
    height: 17%;
}
[data-scale-table-size="1.5"].portrait #playTable .logo-holder {
    /*top: calc(110px * var(--canvas-scale) + calc(-220px * calc(var(--scale-table-size) - 1) * var(--canvas-scale)));*/
}
[data-scale-table-size="1.5"].portrait #playTable .player[data-seat-location-id="0"] {
}
[data-scale-table-size="1.5"].portrait #playTable .player[data-seat-location-id="1"] {
    top: calc(85% + var(--vertical-offset));
}
[data-scale-table-size="1.5"].portrait #playTable .player[data-seat-location-id="2"] {
    top: calc(66% + var(--vertical-offset));
}
[data-scale-table-size="1.5"].portrait #playTable .player[data-seat-location-id="3"] {
    top: calc(37% + var(--vertical-offset));
}
[data-scale-table-size="1.5"].portrait #playTable .player[data-seat-location-id="4"] {
    top: calc(17% + var(--vertical-offset));
}
[data-scale-table-size="1.5"].portrait #playTable .player[data-seat-location-id="5"] {
}
[data-scale-table-size="1.5"].portrait #playTable .player[data-seat-location-id="6"] {
    top: calc(17% + var(--vertical-offset));
}
[data-scale-table-size="1.5"].portrait #playTable .player[data-seat-location-id="7"] {
    top: calc(37% + var(--vertical-offset));
}
[data-scale-table-size="1.5"].portrait #playTable .player[data-seat-location-id="8"] {
    top: calc(66% + var(--vertical-offset));
}
[data-scale-table-size="1.5"].portrait #playTable .player[data-seat-location-id="9"] {
    top: calc(85% + var(--vertical-offset));
}


/* Player chips holder offsets <- not really needed anymore? */

#playTable .player[data-seat-location-id="0"] .chips-holder {
    top: calc(-134px * var(--player-ui-scale));
    left: calc(20px * var(--player-ui-scale));
}
#playTable .player.pos-type-s2 .chips-holder {
    top: calc(35px * var(--player-ui-scale));
    left: calc(163px * var(--player-ui-scale));
}
#playTable .player.pos-type-s3 .chips-holder {
    top: calc(34px * var(--player-ui-scale));
    left: calc(-137px * var(--player-ui-scale));
}
#playTable .player[data-seat-location-id="5"] .chips-holder {
    top: calc(155px * var(--player-ui-scale));
    left: calc(20px * var(--player-ui-scale));
}
#playTable .player[data-seat-location-id="2"] .chips-holder {
    top: calc(-73px * var(--player-ui-scale));
    left: calc(156px * var(--player-ui-scale));
}
#playTable .player[data-seat-location-id="8"] .chips-holder {
    top: calc(-73px * var(--player-ui-scale));
    left: calc(-117px * var(--player-ui-scale));
}
#playTable .player[data-seat-location-id="3"] .chips-holder {
    top: calc(96px * var(--player-ui-scale));
    left: calc(138px * var(--player-ui-scale));
}
#playTable .player[data-seat-location-id="7"] .chips-holder {
    top: calc(96px * var(--player-ui-scale));
    left: calc(-132px * var(--player-ui-scale));
}



/* player debug panels at the bottom, to not waste space, as they're not visually important*/

#playTable .player .player-debug-panel {
    display: none;
    --debug-note-y-offset: 0;
    position: absolute;
    top: calc(0px * var(--player-ui-scale));
    left: calc(-230% * var(--player-ui-scale));
    right: 0;
    margin: 0 auto;

    padding: calc(10px * var(--player-ui-scale));

    background: rgba(255,255,255,0.7);
    border: 1px solid black;

    max-width: calc(110px * var(--player-ui-scale));

    transition: transform 250ms ease-out;
    transform: scale(0) translate(-100%, 0);

    /* TODO adjust colors to correct scehe, not jsut white or black? */
    color: black;
    font-weight: 400;
    text-transform: capitalize;

    font-size: calc(11px * var(--player-ui-scale));
    text-align: left;
}
#playTable .player .player-debug-panel:not(.hidden)  {
    display: block;
    transform: none;
}
/*#playTable .player[data-seat-location-id="0"] .player-debug-panel {*/
#playTable .player.is-this-player .player-debug-panel {
    display: none;
}

#playTable .player.pos-type-s3 .player-debug-panel,
#playTable .player[data-seat-location-id="9"] .player-debug-panel,
#playTable .player[data-seat-location-id="8"] .player-debug-panel,
#playTable .player[data-seat-location-id="7"] .player-debug-panel,
#playTable .player[data-seat-location-id="6"] .player-debug-panel {
    left: 0;
    right: calc(-148% * var(--player-ui-scale));
}

#playTable .player .player-debug-panel .traits {
    margin-bottom: 5px;
    border-bottom: 1px solid black;
    font-weight: 600;
}
#playTable .player .player-debug-panel .traits span.low-trait,
#playTable .player .player-debug-panel .low-conf {
    color: var(--clr-red);
}
#playTable .player .player-debug-panel .traits span.high-trait,
#playTable .player .player-debug-panel .high-conf {
    color: var(--clr-green);
}


/* TODO chat icon styling */

/* invite popup styling */

#layoutContent .invite-link-widget {
    display: none;
    position: absolute;
    background: white;
    padding: 0;
    border-radius: calc(var(--canvas-scale) * 30px);

    border: 2px solid var(--clr-grey);
    color: var(--clr-green3);
    font-size: 1.4em;

    max-width: 800px;
    margin: 0 auto;
    width: 54%;

    top: calc(var(--canvas-scale) * 180px);
}
.end-game-popup-open #layoutContent .invite-link-widget {
    display: none;
}
.end-game-popup-open .card:not(.force-in-front-all) {
    filter: brightness(90%);
}
#game_content:not([data-player-room-role="admin"])  #layoutContent .invite-link-widget {
    /* only display link widget for admin */
   display: none;
}
#layoutContent .invite-link-widget p {
    display: none;

    font-weight: 600;
    font-size: 1.2em;
    line-height: 1.2;
    margin-bottom: 0.5em;
    margin-top: 0;
}
#layoutContent .invite-link-widget p span {
    font-weight: 900;
}

/*expand widget when just 1 player in room (Admin)*/
#game_content[data-room-status="waiting_players"][data-playing-players="1"] #layoutContent .invite-link-widget{
    top: calc(var(--canvas-scale) * 230px);
    padding: calc(var(--canvas-scale) * 20px) calc(var(--canvas-scale) * 30px);
}
.portrait #game_content[data-room-status="waiting_players"][data-playing-players="1"] #layoutContent .invite-link-widget{
    /*top: calc(var(--canvas-scale) * 200px);  */
    /*top: calc(var(--canvas-scale) * 480px);*/ /* with old, bigger portrait table scale */
    top: calc(var(--canvas-scale) * 440px);
    padding: calc(var(--canvas-scale) * 10px);
    width: 72%;
    font-size: 1.2em;
}
.portrait[data-scale-table-size="1.05"] #game_content[data-room-status="waiting_players"][data-playing-players="1"] #layoutContent .invite-link-widget {
    top: calc(var(--canvas-scale) * 440px);
    font-size: 1.1em;
}
.portrait[data-scale-table-size="1.1"] #game_content[data-room-status="waiting_players"][data-playing-players="1"] #layoutContent .invite-link-widget {
    top: calc(var(--canvas-scale) * 470px);
    font-size: 1.1em;
}
.portrait[data-scale-table-size="1.15"] #game_content[data-room-status="waiting_players"][data-playing-players="1"] #layoutContent .invite-link-widget {
    top: calc(var(--canvas-scale) * 490px);
    font-size: 1.1em;
}
.portrait[data-scale-table-size="1.2"] #game_content[data-room-status="waiting_players"][data-playing-players="1"] #layoutContent .invite-link-widget {
    top: calc(var(--canvas-scale) * 510px);
    font-size: 1.1em;
}
.portrait[data-scale-table-size="1.25"] #game_content[data-room-status="waiting_players"][data-playing-players="1"] #layoutContent .invite-link-widget {
    top: calc(var(--canvas-scale) * 525px);
    font-size: 1.1em;
}
.portrait[data-scale-table-size="1.3"] #game_content[data-room-status="waiting_players"][data-playing-players="1"] #layoutContent .invite-link-widget {
    top: calc(var(--canvas-scale) * 550px);
    font-size: 1.1em;
}
#game_content:not(.end-game-popup-open)[data-room-status="waiting_players"][data-playing-players="1"][data-player-room-role="admin"] #layoutContent .invite-link-widget {
    display: block;
}
#game_content:not(.end-game-popup-open)[data-room-status="waiting_players"][data-playing-players="1"] #layoutContent .invite-link-widget p {
    display: block;
}
#layoutContent .invite-link-widget .text-select-holder {
    position: relative;
    border-radius: calc(var(--canvas-scale) * 30px);
    border: calc(var(--canvas-scale) * 2px) solid var(--clr-grey);
}
#layoutContent .invite-link-widget .text-select {
    background: white;
    color: black;
    padding: calc(var(--canvas-scale) * 10px) calc(var(--canvas-scale) * 20px);
    border-radius: calc(var(--canvas-scale) * 30px);
    text-align: left;
    font-size: 1em;
    line-height: 1.2;
    font-weight: bold;

    cursor: pointer;

    /*user-select: all;
    -webkit-user-select: all;
    -moz-user-select: all;
    -khtml-user-select: all;
    -ms-user-select: all;*/

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: calc(var(--canvas-scale) * 80px);
}
#layoutContent .invite-link-widget .text-select.copied {
    /*border-color: yellow;*/
    color: var(--clr-green3);
}
#layoutContent .invite-link-widget .share-link-button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background: #000000;

    padding: calc(var(--canvas-scale) * 0px) calc(var(--canvas-scale) * 25px);
    border-radius: calc(var(--canvas-scale) * 30px);

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 1.5em;
    color: #ffffff;
    cursor: pointer;
}
#layoutContent .invite-link-widget .share-link-button:hover {
    cursor: pointer;

}
#layoutContent .invite-link-widget .share-link-button > .fa-solid {
    pointer-events: none; /* disabled them, as they cause a series of weird propagation issues for this specific handling*/
}
#layoutContent .invite-link-widget .cross-promo {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 1.15em);
    text-align: center;

    margin-top: 0;
    color: #ffffff;;
    font-size: 0.8em;
}
.use-table-text-with-border-stroke #layoutContent .invite-link-widget .cross-promo {
    --stroke-size: calc(1px * var(--ui-scale));

    /* Full 8-direction text-shadow */
    text-shadow:
            calc(-1 * var(--stroke-size)) calc(-1 * var(--stroke-size)) 0 black,
            0                             calc(-1 * var(--stroke-size)) 0 black,
            calc(1 * var(--stroke-size))  calc(-1 * var(--stroke-size)) 0 black,
            calc(-1 * var(--stroke-size)) 0                             0 black,
            calc(1 * var(--stroke-size))  0                             0 black,
            calc(-1 * var(--stroke-size)) calc(1 * var(--stroke-size))  0 black,
            0                              calc(1 * var(--stroke-size)) 0 black,
            calc(1 * var(--stroke-size))  calc(1 * var(--stroke-size))  0 black;
}
.use-table-text-with-border-stroke #popupsHolder .create-room .lobby-options .lobby-option .sub-text {
    --stroke-size: calc(1px * var(--ui-scale));

    /* Full 8-direction text-shadow */
    text-shadow:
            calc(-1 * var(--stroke-size)) calc(-1 * var(--stroke-size)) 0 black,
            0                             calc(-1 * var(--stroke-size)) 0 black,
            calc(1 * var(--stroke-size))  calc(-1 * var(--stroke-size)) 0 black,
            calc(-1 * var(--stroke-size)) 0                             0 black,
            calc(1 * var(--stroke-size))  0                             0 black,
            calc(-1 * var(--stroke-size)) calc(1 * var(--stroke-size))  0 black,
            0                              calc(1 * var(--stroke-size)) 0 black,
            calc(1 * var(--stroke-size))  calc(1 * var(--stroke-size))  0 black;
}
#layoutContent .invite-link-widget .cross-promo a {
    color: var(--clr-yellow);
}
#layoutContent .invite-link-widget .cross-promo.cyan-variant a {
    font-size: 1.2em;
    color: #45e7ff;
}
/* in-table buttons */
#playTable .table-actions {
    position: absolute;
    /*top: 63%;*/
    top: 53%;
}
.end-game-popup-open #playTable .table-actions {
    display: none;
}
.portrait #playTable .table-actions {
    top: 55%;
}
#playTable .table-actions .btn {
    padding: calc(15px * var(--canvas-scale)) calc(20px * var(--canvas-scale));
    min-width: 15ch;
    font-size: calc(25px * var(--canvas-scale));
    line-height: 1.3;
    text-transform: uppercase;
    /*outline: 1px solid white;*/
    color: var(--clr-pri);
    background: var(--clr-green5);

    /* attempt at fixing safari border square issues  - we replace it with a border on :after */
    outline: none;
}
#playTable .table-actions .btn:after {
    content: "";
    position: absolute;
    top: calc(-1px * var(--ui-scale)); /* border: 1px + offset: 0px*/
    right: calc(-1px * var(--ui-scale)); /* border: 1px + offset: 0px*/
    bottom: calc(-1px * var(--ui-scale)); /* border: 1px + offset: 0px*/
    left: calc(-1px * var(--ui-scale)); /* border: 1px + offset: 0px*/
    border: calc(1px * var(--ui-scale)) solid white;

    border-radius: calc(15px * var(--ui-scale));; /* border—radius: 15px + offset: 0px*/
}