#popupsHolder {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	pointer-events: none;
}
#popupsHolder.make-overlay {
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    pointer-events: auto;
}

#popupsHolder .popup-holder {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;

	width: 100%;
	height: 100%;
	opacity: 1;
	transition: opacity 0.2s ease-in-out;

	z-index: 10;

	pointer-events: auto;

    animation: from0To100Opacity 250ms ease-in forwards;
}
#popupsHolder .popup-holder.no-entry-animation {
    transition: opacity 0.1s ease-in-out;
    animation: from0To100Opacity 125ms ease-in forwards;
}

#popupsHolder .popup-holder.show-over-chat {
    z-index: 20; /* for special case of opening settings tab from chat, and it needs to appear over chat on mobile */
}
#popupsHolder .popup-holder:not(.full-viewport):first-child {
	background: rgba(0,0,0,0.4);
}
#popupsHolder .popup-holder:not(.full-viewport):first-child[data-type="set_username"]:not([data-is-closeable="close_one"]) {
    background: rgba(0,0,0,0.85);
}
#popupsHolder .popup-holder:not(.full-viewport):not(:last-child):not(.ignore-popup-dimming) .popup-content-holder {
    /* if popup is behind others, the overlay BG should be attached to it, but we should also dim the popup content, so that it appears the same darkness as the overlay BG*/
    filter: brightness(60%);
}
#popupsHolder .popup-holder:not(.full-viewport):not(:last-child):not(.ignore-popup-dimming).fixed-footer .popup-content-holder {
    /* weird situation with fixed footers, where if parent is given a filter, fixed no longer applied.
     So in these situations we replace filter with an opacity change as a similar fallback */
    filter: none;
    /*opacity: 0.6;*/ /* TODO - crap, can't really do this, as then there are weird transition cases where you could see through a popup */
    /*transition: none; /* override opacity transition as it looks better with out in this case */
}
#game_content.end-game-popup-open[data-popups-open="2"] #popupsHolder .popup-holder:not(.full-viewport):not(:last-child):not(.ignore-popup-dimming) .popup-content-holder {
    /* if end game popup open, unset/ignore the dimming*/
    /* only undim if there's 2 popups (end game and any other), as if ther'es more it's likely a mini/conf popup, which should still dim under it */
    /* still some issues with it*/
    /*filter: unset;*/
}
#popupsHolder .popup-holder .popup-content-holder {
	position: absolute;
	left: 0;
	right: 0;
	top: 10vh;
	width: 70vw;
	max-height: 80vh;

    min-width: clamp(200px, 350px, 95vw);
    max-width: clamp(80vw, 960px, 60vw);

	margin: 0 auto;

	display: flex;
	flex-direction: column;

	pointer-events: auto;

	box-shadow: calc(2px * var(--ui-scale)) calc(2px * var(--ui-scale)) calc(2px * var(--ui-scale)) #CCCCCC,
				calc(-2px * var(--ui-scale)) calc(2px * var(--ui-scale)) calc(2px * var(--ui-scale)) #CCCCCC,
				calc(2px * var(--ui-scale)) calc(-2px * var(--ui-scale)) calc(2px * var(--ui-scale)) #CCCCCC,
				calc(-2px * var(--ui-scale)) calc(-2px * var(--ui-scale)) calc(2px * var(--ui-scale)) #CCCCCC;

    border-radius: var(--default-border-radius);
    overflow: hidden;
}
#popupsHolder .popup-holder .popup-content {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    font-size: calc(15px * var(--ui-scale));

	height: calc(100% - calc(70px * var(--ui-scale)));
	padding: calc(40px * var(--ui-scale));
    color: white;

    /*background: url('../images/misc/fake_game_bg.jpg');*/
    /*background: url('../images/table_backgrounds/green1_1024x768.png');
    background-size: 100% 100%;*/
    background: var(--clr-green3);

	max-height: clamp(calc(200px * var(--ui-scale)), calc(775px * var(--ui-scale)), calc(95vh - calc(20px * var(--ui-scale))));
    overflow: hidden;
}
#popupsHolder .popup-holder .footer {

}
#popupsHolder .popup-holder:not(.fixed-footer) .footer {
    position: relative;

    padding: calc(5px * var(--ui-scale)) calc(20px * var(--ui-scale));
    font: 700 calc(20px * var(--ui-scale))/calc(25px * var(--ui-scale)) var(--font-fam-title);
    background: var(--clr-green3);

    text-align: center;
    min-height: calc(50px * var(--ui-scale));
    line-height: calc(50px * var(--ui-scale));
    font-size: calc(30px * var(--ui-scale));

    color: var(--clr-pri);
    border-top: 1px solid white;
    border-radius: 0 var(--default-border-radius);
}
#popupsHolder .popup-holder.fixed-footer .footer {
    position: fixed;
    bottom: 1.5em;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: max-content;
}
#popupsHolder .popup-holder .footer .footer-auth-widget {
    color: #ffffff;
    font-size: calc(20px * var(--ui-scale));
    font-weight: bold;
}
#popupsHolder .popup-holder .footer .footer-auth-widget a {
    color: #46b6ff;
}
#popupsHolder .popup-holder .header {
	position: relative;
	padding: calc(5px * var(--ui-scale)) calc(20px * var(--ui-scale));

	font: 700 calc(20px * var(--ui-scale))/calc(25px * var(--ui-scale)) var(--font-fam-title);
	background: var(--clr-green6);
	color: var(--clr-pri);
	text-transform: uppercase;

    border-bottom: 1px solid white;

    min-height: calc(50px * var(--ui-scale));
    line-height: calc(50px * var(--ui-scale));
    font-size: calc(30px * var(--ui-scale));
    border-radius: 0;
    border-top-left-radius: var(--default-border-radius);
    border-top-right-radius: var(--default-border-radius);
}
#popupsHolder .popup-holder .popup-content .scroll-holder {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    /* prevent overscrolling vertically on mobile devices */
    overscroll-behavior-y: none;
}
#popupsHolder .popup-holder .header .title {
    display: flex;
    gap: 0.2em;
    justify-content: center;
    align-items: center;
}
#popupsHolder .popup-holder.small-title .header .title {
    font-size: 0.7em;
}
#popupsHolder .popup-holder .header .title .icon {
    width: 1em;
    height: 1em;
}
#popupsHolder .popup-holder .header .close {
	position: absolute;
	top: 0;
	right: calc(20px * var(--ui-scale));
	bottom: 0;

	margin: auto 0;

	height: calc(40px * var(--ui-scale));
	font-size: calc(40px * var(--ui-scale));
	line-height: calc(40px * var(--ui-scale));

	cursor: pointer;
    transition: all 100ms ease-in;
}
#popupsHolder .popup-holder .header .close:hover {
	transform: scale(1.1);
}
#popupsHolder .popup-holder .popup-content > * {
}

#popupsHolder .popup-holder .popup-content .btn:not(.icon):not(.setting-boolean) {
    color: white;
    /*border: 1px solid white;*/
    line-height: 2.1;

    /* attempt at fixing safari border square issues  - we replace it with a border on :after */
    outline: none;
}
#popupsHolder .popup-holder .popup-content .btn:not(.icon):not(.setting-boolean):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*/
 }
#popupsHolder .popup-holder .popup-content .btn[data-action-type="new_game"] {
    /* this is to center it in the same way as the findign a game popup */
    margin-top: 20px;
}
#popupsHolder .popup-holder .popup-content .btn[data-action-type="new_game"].made-invisible {
    opacity: 0 !important;
    pointer-events: none !important;
}
#popupsHolder .popup-holder[data-type="generic_notification"] .btn-centered-bold {
    font-weight: bold;
    margin-right: calc(20px * var(--ui-scale));
}
#popupsHolder .popup-holder.add-entry-animation .popup-content > * > *{

	opacity: 0;
	animation-name: bounceIn;
	animation-delay: 100ms;
	animation-duration: 200ms;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
#popupsHolder .popup-holder.add-entry-animation .popup-content > * > *:nth-child(2) {
	animation-delay: 300ms;
}
#popupsHolder .popup-holder.add-entry-animation .popup-content > * > *:nth-child(3) {
	animation-delay: 400ms;
}
#popupsHolder .popup-holder.add-entry-animation .popup-content > * > *:nth-child(4) {
	animation-delay: 500ms;
}
/* end test of animating popups blocks when entering/opening a popup */


/* FULL VIEWPORT POPUP START */
#popupsHolder .popup-holder.full-viewport .popup-content-holder,
#popupsHolder .popup-holder.full-viewport .popup-content {
	top: 0;
	height: 100%;
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	padding: 0;
    border-radius: 0;
}
#popupsHolder .popup-holder.full-viewport .header {
	display: none;
}
#popupsHolder .popup-holder.full-viewport .header {
    display: none;
}
#popupsHolder .popup-holder.full-viewport .popup-content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    /*background: url('../images/misc/fake_game_bg.jpg');*/
    /*background: url('../images/table_backgrounds/green1_1024x768.png');
    background-size: 100% 100%;*/
    background: var(--clr-green3);
}
.full-viewport-buttons-holder .btn {
    font-size: calc(30px * var(--ui-scale));
    line-height: 1.5;
    background: var(--clr-red);
}
/* FULL VIEWPORT POPUP END */

#popupsHolder .popup-holder.transparent-bg {
    background: none;
}
#popupsHolder .popup-holder.full-viewport.transparent-bg .popup-content {
    background: none;
}

/* START LOADING BAR FINDING A GAME */
#loading .table-background {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: calc(1200px * var(--canvas-scale));
    height: calc(1200px / var(--table-wh-ratio) * var(--canvas-scale));

    margin: auto;

    /* new test for table to be the same size as table in the BG*/
    /*width: calc(1000px * var(--canvas-scale));
    height: calc(1000px / var(--table-wh-ratio) * var(--canvas-scale));
    bottom: calc(100px * var(--canvas-scale));*/
}
#loading .table-background:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background: url('../images/table_backgrounds/poker_table.webp') no-repeat center center;
    /*background: var(--table-felt-bg-horizontal) no-repeat center center;*/ /* lets not load these here, as they are delayed */
    background-size: 100% 100%;

    opacity: 0.27; /* old for green bg */
    /*opacity: 0.75;*/ /* if using black bg */
}
#loading .logo-holder {
    position: absolute;
    top: 16%;

    /* attempt to realign it a bit better on smaller landscape screens */
    top: calc(16% + calc(5px * calc(1 - var(--canvas-scale))));
    right: 0;
    left: 0;

    margin: 0 auto;
    opacity: 1;
    --logo-holder-scale: 0.3;
}
#loading .loading-info {
    position: absolute;
    bottom: 15%;
    right: 0;
    left: 0;
    width: calc(600px * var(--ui-scale));
    max-width: 80%;
    margin: 0 auto;
}
#loading .description {
    margin: 0 auto;
    font: calc(20px * var(--ui-scale))/calc(25px * var(--ui-scale)) var(--font-fam-reg);
    color: var(--clr-pri);
    text-align: center;
    font-weight: bold;
}
#loading .progress {
    margin: calc(10px * var(--ui-scale)) auto calc(20px * var(--ui-scale)) auto;
    height: calc(20px * var(--ui-scale));
    text-align: center;
    background: var(--progress-bar-bg);
    overflow: hidden;

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

    border: calc(1px * var(--ui-scale)) solid white;
    transform: translate3d(0, 0, 0);
}
#loading .progress:before {
    background: var(--progress-bar-fg);
    /*border-radius: calc(10px * var(--ui-scale));*/
}
#loading .loading-progress {
    display: none; /* removed delibarately on choice */
    text-align: center;
    font: calc(16px * var(--ui-scale))/calc(20px * var(--ui-scale)) var(--font-fam-reg);
    color: var(--clr-pri);
    font-weight: bold;
}
#loading .animated-dot {
    position: relative;
    display: inline-block;
    background: white;
    width: 0.3em;
    height: 0.3em;
    left: .2em;
    bottom: .2em;

    border-radius: .6em;
    animation: loadingDotAnim 1.2s linear infinite;
    animation-delay: 0s;
    transform-origin: center center;
    vertical-align: bottom;
    margin-left: 0.15em;
}
#loading .animated-dot.dot1 {
    animation-delay: 0s;
}
#loading .animated-dot.dot2 {
    animation-delay: 0.2s;
}
#loading .animated-dot.dot3 {
    animation-delay: 0.4s;
}
@keyframes loadingDotAnim {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}


.portrait #loading .table-background {
    --scale-table-size: 1.1;

    --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: calc(0px * var(--ui-scale));
}
.portrait #loading .table-background:before {
    background: url('../images/table_backgrounds/table_size_80_vertical.webp') no-repeat center center;
    background-size: 100% 100%;
}
.portrait #loading .table-background .logo-holder {
    top: 25.5%;
    --logo-holder-scale: 0.26;
}
.portrait #loading .loading-info {
    bottom: 30%;
}
/* END LOADING BAR FINDING A GAME

/* MINI POPUP START */

#popupsHolder .popup-holder.mini-popup .popup-content-holder {
    width: max-content;
    top: 0;
    bottom: 0;
    margin: auto;

    height: max-content;
}
#popupsHolder .popup-holder.mini-popup.small-width .popup-content-holder {
    min-width: clamp(200px, 550px, 90vw);
    max-width: clamp(30vw, 550px, 90vw);
    min-height: clamp(calc(200px * var(--ui-scale)), calc(350px * var(--ui-scale)), 90vh);
    max-height: clamp(calc(400px * var(--ui-scale)), calc(350px * var(--ui-scale)), 90vh);
}
#popupsHolder .popup-holder.mini-popup.small-width.medium-height .popup-content-holder {
    min-height: clamp(calc(300px * var(--ui-scale)), calc(450px * var(--ui-scale)), 90vh);
    max-height: clamp(calc(500px * var(--ui-scale)), calc(450px * var(--ui-scale)), 90vh);
}
#popupsHolder .popup-holder.mini-popup.small-width.no-header .popup-content-holder {
    min-height: clamp(calc(200px * var(--ui-scale)), calc(280px * var(--ui-scale)), 90vh);
}
#popupsHolder .popup-holder.mini-popup.small-width.no-header .popup-content-holder .text-center > *:first-child {
    margin-top: 0;
}
#popupsHolder .popup-holder.mini-popup.small-width.slightly-wider .popup-content-holder {
    max-width: clamp(34vw, 550px, 90vw);
}
#popupsHolder .popup-holder.mini-popup.small-width.slightly-wider .popup-content-holder,
#popupsHolder .popup-holder.mini-popup.small-width[data-type="reseat_limitations"] .popup-content-holder {
    min-height: clamp(calc(200px* var(--ui-scale)), calc(430px* var(--ui-scale)), 90vh);
    max-height: clamp(calc(430px* var(--ui-scale)),  calc(350px* var(--ui-scale)), 90vh);

}
#popupsHolder .popup-holder.mini-popup.medium-width .popup-content-holder {
    min-width: clamp(200px, 650px, 90vw);
    max-width: clamp(40vw, 650px, 90vw);
    min-height: clamp(calc(200px * var(--ui-scale)), calc(450px * var(--ui-scale)), 90vh);
    max-height: clamp(calc(400px * var(--ui-scale)), calc(450px * var(--ui-scale)), 90vh);
}
#popupsHolder .popup-holder.mini-popup.large-width .popup-content-holder {
    min-width: clamp(200px, 935px, 90vw);
    max-width: clamp(50vw, calc(935px * var(--ui-scale)), 90vw);
    /*min-height: clamp(200px, 450px, 90vh);*/ /* no min??*/
}
#popupsHolder .popup-holder.mini-popup .popup-content {
    /*background: url('../images/table_backgrounds/green1_1024x768.png');
    background-size: 100% 100%;*/
    background: var(--clr-green3);

    color: white;
    /* some hardcoded fixes for UI issue on IoS? */
    flex: 1 1 max-content;
    min-height: 100px;
}
#popupsHolder .popup-holder.mini-popup .header {
    text-align: center;

    min-height: calc(50px * var(--ui-scale));
    line-height: calc(50px * var(--ui-scale));
    font-size: calc(30px * var(--ui-scale));
    /*box-shadow: 0 calc(5px * var(--ui-scale)) calc(5px * var(--ui-scale)) rgba(0,0,0,0.5);*/
}
#popupsHolder .popup-holder.mini-popup .popup-content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    line-height: 1.2;
    font-size: calc(25px * var(--ui-scale));
}
#popupsHolder .popup-holder.mini-popup.stretch-content .popup-content {
    align-items: stretch;
}
#popupsHolder .popup-holder.mini-popup.medium-width .popup-content {
    font-size: calc(18px * var(--ui-scale));
}
#popupsHolder .popup-holder.mini-popup .popup-content .community-card-preview {
    margin-bottom: 1em;
}
#popupsHolder .popup-holder.mini-popup .popup-content .buttons-holder .btn:not(.icon) {
    line-height: 1.8;
    background: var(--clr-green5);
    padding: calc(5px * var(--ui-scale)) calc(20px * var(--ui-scale));
}
#popupsHolder .popup-holder.mini-popup .popup-content .buttons-holder .btn:not(.icon).btn-red {
    background: #f0202c;
}
#popupsHolder .popup-holder.mini-popup.is-overlayed .popup-content .buttons-holder .btn:not(.icon) {
    display: block;
}
#popupsHolder .popup-holder.mini-popup.is-overlayed .popup-content-holder {
    box-shadow: none;
    border: none;
}
#popupsHolder .popup-holder.mini-popup.is-overlayed .popup-content-holder .header {
    display: none;
}
#popupsHolder .popup-holder.mini-popup.is-overlayed .popup-content {
    background: none;
}
#popupsHolder .popup-holder.mini-popup.is-overlayed .text-center {
    text-align: left;
}
#popupsHolder .popup-holder.mini-popup .input-title {
    font-weight: 600;
    margin-bottom: 0.2em;
}
#popupsHolder .popup-holder.mini-popup.is-overlayed input,
#popupsHolder .popup-holder.mini-popup.is-not-closeable input,
#popupsHolder .popup-holder.mini-popup.form-layout input {
    width: 100%;
    box-sizing: border-box;
    font-weight: 600;
    font-family: var(--font-fam-btn);
    font-size: 0.9em;
    padding: calc(5px * var(--ui-scale)) calc(10px * var(--ui-scale));
    line-height: 1.8;
}
#popupsHolder .popup-holder.mini-popup.is-not-closeable input,
#popupsHolder .popup-holder.mini-popup.form-layout input {
    height: calc(58px * var(--ui-scale));
}
#popupsHolder .popup-holder.mini-popup.is-overlayed .input-wrapper .input-icon {
    bottom: calc(13px * var(--ui-scale));
}
#popupsHolder .popup-holder.mini-popup .input-wrapper .input-icon.fa-shuffle {
    font-size: 1.3em;
    color: var(--clr-green5);
    top: 0;
    bottom: 0;
    margin: auto 0;
    cursor: pointer;
    transition: transform 0.15s ease-in-out;
}
#popupsHolder .popup-holder.mini-popup .input-wrapper .input-icon.fa-shuffle:hover {
    transform: scale(1.05);
}
#popupsHolder .popup-holder.mini-popup.is-not-closeable .input-wrapper .input-icon,
#popupsHolder .popup-holder.mini-popup.form-layout .input-wrapper .input-icon {
    bottom: calc(16px * var(--ui-scale));
}
#popupsHolder .popup-holder.mini-popup .sub-text {
    font-size: 0.5em;
    margin-top: 0.3em;
}
#popupsHolder .popup-holder.mini-popup.is-overlayed .error-txt,
#popupsHolder .popup-holder.mini-popup.is-not-closeable .error-txt,
#popupsHolder .popup-holder.mini-popup.form-layout .error-txt {
    font-size: 0.5em;
    margin: 0.3em 0;
    line-height: 1.2;
    min-height: 1.2em;
}
#popupsHolder .popup-holder.mini-popup .buttons-holder {
    margin-top: 0;
    padding: 0;
}
#popupsHolder .popup-holder.mini-popup .buttons-holder-vertical {
    margin-top: 0;
    padding: 0;
    flex-direction: column;
    display: flex;
    gap: calc(20px * var(--ui-scale));
}
#popupsHolder .popup-holder.mini-popup[data-type="room_join_error"] .buttons-holder-vertical {
    align-items: center;
}
#popupsHolder .popup-holder.mini-popup[data-type="room_join_error"] .buttons-holder-vertical .btn {
    width: 16ch;
}
#popupsHolder .popup-holder.mini-popup[data-type="unnecessary_fold_check"] .popup-content .buttons-holder {
    display: flex;
    justify-content: space-evenly;
}
#popupsHolder .popup-holder.mini-popup[data-type="unnecessary_fold_check"] .popup-content .btn {
    padding: calc(10px * var(--ui-scale)) calc(30px * var(--ui-scale)) !important;
}
#popupsHolder .popup-holder.mini-popup[data-type="unnecessary_fold_check"] p {
    font-weight: bold;
}
#popupsHolder .popup-holder.mini-popup[data-type="unnecessary_fold_check"] .checkbox-flex-wrapper {
    font-size: calc(12px * var(--ui-scale));
    text-align: left;
    margin: 0 auto;
    width: max-content;
    padding-bottom: calc(5px * var(--ui-scale));
}
#popupsHolder .popup-holder.mini-popup[data-type="unnecessary_fold_check"] .checkbox-flex-wrapper .checkbox-with-label {
    font-weight: normal;
}

#popupsHolder .text-select {
    background: white;
    color: black;
    padding: 5px 10px;
    border-radius: 30px;
    text-align: left;
    font-size: 0.8em;

    border: 3px solid grey;
    cursor: pointer;

    user-select: all;
    -webkit-user-select: all; /* webkit (safari, chrome) browsers */
    -moz-user-select: all; /* mozilla browsers */
    -khtml-user-select: all; /* webkit (konqueror) browsers */
    -ms-user-select: all; /* IE10+ */
}
#popupsHolder .text-select.copied {
    border-color: yellow;
}
#popupsHolder .popup-holder .cross-promo {
    font-size: 0.5em;
    margin-top: 2em;
    margin-bottom: -1em;
}
#popupsHolder .popup-holder a:not(.color_select),
#popupsHolder .popup-holder .cross-promo a {
    color: var(--clr-yellow);
}
#popupsHolder .popup-holder .cross-promo.cyan-variant a {
    color: #45e7ff;
    font-size: 1.2em;
}
#popupsHolder .popup-holder .go-gold-note {
    margin: 2em 0 -1em 0;
}
#popupsHolder .popup-holder .go-gold-note a {
    color: var(--clr-yellow);

    font-weight: 600;
    font-size: 0.8em;
    max-width: 34ch;
    display: inline-block;

    position: relative;
    top: 1em;
}
/* END MINI POPUP */


/* START MODAL POPUP */

#popupsHolder .popup-holder.mini-popup.modal-popup .popup-content-holder {
    min-width: max-content;
}
#popupsHolder .popup-holder.mini-popup.modal-popup.small-width .popup-content-holder {
    max-width: clamp(20vw, 300px, 90vw);
    min-width: clamp(300px, 300px, 90vw);
    min-height: clamp(calc(200px * var(--ui-scale)), calc(200px * var(--ui-scale)), 90vw);
}
#popupsHolder .popup-holder.mini-popup.modal-popup .popup-content-holder .popup-content {
    background: #000000;
}
#popupsHolder .popup-holder.mini-popup.modal-popup .popup-content-holder .popup-content .text.smaller-text {
    font-style: italic;
    font-size: 0.7em;
    font-weight: bold;
    margin-bottom: 1em;
    text-align: center;
}
#popupsHolder .popup-holder.mini-popup.modal-popup .icon.seat-request-icon {
    padding: calc(5px * 1.25 * var(--canvas-scale));
    width: calc(26px * 1.25 * var(--canvas-scale));
    height: calc(26px * 1.25 * var(--canvas-scale));
    bottom: calc(2px * 1.25 * var(--canvas-scale));

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

    border: 1px solid white;
    border-radius: calc(10px * 1.25 * var(--canvas-scale));
    color: white;
    text-align: center;
}
#popupsHolder .popup-holder.mini-popup.modal-popup .btn.icon:not(:last-child) {
    margin-right: calc(20px * var(--ui-scale));
}
#popupsHolder .popup-holder.mini-popup.modal-popup  .popup-content .buttons-holder .btn:not(.icon) {
    font-weight: 600;
    font-style: italic;
}
#popupsHolder .popup-holder.mini-popup .username {
    font-size: 1.5em;
    font-style: normal;
    font-weight: bold;
    text-align: center;
}

#popupsHolder .popup-holder .inner-modal {
    border: 1px solid white;
    border-radius: calc(20px * var(--ui-scale));

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

    font-size: calc(16px * var(--ui-scale));
    line-height: 1.2;

    margin-bottom: calc(20px * var(--ui-scale));
    background: #000;
}
#popupsHolder .popup-holder .inner-modal .option-box {
    border: none;
    background: none;
}
#popupsHolder .popup-holder .inner-modal .players-list {
    width: 100%;
    display: flex;
    justify-content: center;
    gap:  calc(10px * var(--ui-scale));
    flex-wrap: wrap;
}
#popupsHolder .popup-holder .inner-modal .players-list .option-box {
    flex: 0 1 calc(29% - calc(10px * var(--ui-scale)));

    border: 1px solid white;
    border-radius: calc(10px * var(--ui-scale));

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

    font-size: calc(20px * var(--ui-scale));
    line-height: calc(20px * var(--ui-scale));

    background: var(--clr-grey2);
    text-align: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    font-weight: 600;
}
#popupsHolder .popup-holder .inner-modal .players-list .option-box:hover {
    filter: brightness(110%);
}
/* END MODAL POPUP */


/* GAME END START */
#popupsHolder .popup-holder[data-type="game_end"] {
    /* exception for popups, we DON'T want to show it on top of other popups as it looks buggy */
    z-index: 9;
}
#popupsHolder .popup-holder[data-type="game_end"] .popup-content {
    background: rgba(0,0,0,0.3);
    padding: calc(20px * var(--ui-scale));
    box-sizing: border-box;
    text-align: center;
}
#popupsHolder .popup-holder[data-type="game_end"] .popup-content .scroll-holder {

}
#popupsHolder .popup-holder[data-type="game_end"] .popup-content .press-anywhere-to-continue {
    position: absolute;

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

    width: max-content;

    color: white;
    font-size: calc(30px * var(--ui-scale));
    font-weight: 600;
    transition: all 250ms ease-in-out;
    transform-origin: 100% center;
}
.portrait #popupsHolder .popup-holder[data-type="game_end"] .popup-content .press-anywhere-to-continue {
    right: auto;
    left: calc(20px * var(--ui-scale));
}
.landscape.chat-is-collapsed  #popupsHolder .popup-holder[data-type="game_end"] .popup-content .press-anywhere-to-continue {
    /* if desktop, and chat is open, and show hand btn is showing, make the next hand starting more center to the left (it's no longer the last child) */
    right: calc((250px) * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="game_end"] .popup-content .next-game-delay-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(20px * var(--ui-scale));

    background: white;
}
#popupsHolder .popup-holder[data-type="game_end"] .popup-content .next-game-delay-bar:after {
    content: '';
    display: block;
    position: absolute;

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

    background: var(--bg-sec);
    transform: scaleX(0);
    transform-origin: 0 center;
    animation: fillWaitBar var(--end-popup-next-game-start-delay) linear forwards;
}
@keyframes fillWaitBar {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(100%);
    }
}
#popupsHolder .popup-holder[data-type="game_end"] .popup-content .show-hand {
    position: absolute;
    right: calc(20px * var(--ui-scale));
    bottom: calc(40px * var(--ui-scale));

    font-size: calc(25px * var(--ui-scale));
    padding: calc(5px * var(--ui-scale)) calc(30px * var(--ui-scale));
    text-transform: uppercase;
    line-height: 1.9;
    transition: all 250ms ease-in-out;
    transform-origin: 100% center;

}
.landscape.chat-is-collapsed #popupsHolder .popup-holder[data-type="game_end"] .popup-content .show-hand {
    /* if desktop, and chat is open, move showhand btn more to the lef,t so it does not overlay chat*/
    right: calc((250px + 20px) * var(--ui-scale));
}
    /* GAME END END */

/* GAME RESULTS */
#popupsHolder .popup-holder.mini-popup[data-type="game_results"] .popup-content {
    align-items: stretch;
    justify-content: space-between;
}
#popupsHolder .popup-holder[data-type="game_results"] .btn[data-action-type="go_to_location"] {
    background: var(--clr-red) !important;
}
#popupsHolder .result-text {
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
    margin-top: 0em;
}
#popupsHolder .popup-holder[data-type="game_results"] .buttons-holder {
    margin-top: auto;
    align-self: stretch;
    display: flex;
    justify-content: center;
    gap: calc(40px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="game_results"] .buttons-holder .btn {
    display: flex;
    box-sizing: border-box;
    height: calc(58px * var(--ui-scale));
    font-size: calc(22px * var(--ui-scale));
    justify-content: center;
    align-items: center;
    margin: 0;
    min-width: 13ch;
}
#popupsHolder .popup-holder[data-type="game_results"] .buttons-holder .btn > i {
    margin-right: 0.5em;
}

#popupsHolder .popup-holder[data-type="game_results"] .cross-promo {
    margin-top: 0;
}
/* GAME RESULTS END */

/* START set nickname */
/* additional override needed in case of end game showing under it */
#popupsHolder .popup-holder:not(.full-viewport):last-child[data-type="set_username"]:not([data-is-closeable="close_one"]) {
    background: rgba(0,0,0,0.85);
}
#popupsHolder .popup-holder[data-type="set_username"] .popup-content-holder,
#popupsHolder .popup-holder[data-type="start_new_game"] .popup-content-holder {
    overflow: initial; /* TODO necessary to properly show avatar custom offer?*/
}

#popupsHolder .popup-holder[data-type="set_username"] .popup-content,
#popupsHolder .popup-holder[data-type="start_new_game"] .popup-content {
    overflow: initial; /* TODO necessary to properly show avatar custom offer?*/
    border-bottom-left-radius: var(--default-border-radius);
    border-bottom-right-radius: var(--default-border-radius);
}

#popupsHolder .popup-holder.mini-popup.small-width[data-type="set_username"][data-is-closeable="close_one"] .popup-content-holder {
    max-height: clamp(calc(620px * var(--ui-scale)), calc(570px * var(--ui-scale)), 90vh);
}
#popupsHolder .popup-holder[data-type="set_username"].is-not-closeable .popup-content {
    font-size: calc(25px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="set_username"]:not(.is-overlayed) .text-center {
    text-align: left;
}
#popupsHolder .popup-holder[data-type="set_username"]:not(.is-overlayed) .error-txt {
    min-height: calc(20px * var(--ui-scale));
    font-size: calc(12px * var(--ui-scale));
    line-height: calc(20px * var(--ui-scale));
    max-width: 45ch;
}
#popupsHolder .popup-holder[data-type="set_username"] .sub-text {
    max-width: 38ch;
}
#popupsHolder .popup-holder[data-type="set_username"] .sub-text.login-note {
    font-size: 0.6em;
    max-width: 31ch;
}
#popupsHolder .popup-holder[data-type="set_username"] .error-txt {
    max-width: 38ch;
}
#popupsHolder .popup-holder[data-type="set_username"].is-overlayed .sub-text.login-note a {
    color: #46b6ff;
}

#popupsHolder .popup-holder[data-type="set_username"] .buttons-holder {
    margin-top: calc(20px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="set_username"]:not(.is-overlayed) .buttons-holder .btn {
    display: block;
}
#popupsHolder .popup-holder[data-type="set_username"].is-not-closeable .buttons-holder .btn {
    display: flex;
    box-sizing: border-box;
    height: calc(64px * var(--ui-scale));
    justify-content: center;
    align-items: center;
}
#popupsHolder .popup-holder .error-txt {
    min-height: calc(35px * var(--ui-scale));
    font-size: calc(14px * var(--ui-scale));
    line-height: calc(35px * var(--ui-scale));
    color: var(--clr-yellow);
}
/* TODO start general popup customization notes */
#popupsHolder .popup-holder .customization-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2em;
}

#popupsHolder .popup-holder.is-overlayed .customization-header {
    position: relative;
}
#popupsHolder .popup-holder .customization-header > .profile-avatar {
    --avatar-size: calc(135px * var(--ui-scale));
    border: 2px solid var(--avatar-border-color);
}
#popupsHolder .popup-holder .customization-header > .profile-avatar:hover {
    /*filter: brightness(120%);*/
    cursor: pointer;
}
#popupsHolder .popup-holder .customization-header > .profile-avatar:hover .edit-avatar {
    filter: brightness(120%);
}
#popupsHolder .popup-holder .customization-header .profile-avatar .edit-avatar {
    position: absolute;
    bottom: 0%;
    right: 5%;

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

    width: calc(0.25 * var(--avatar-size));
    height: calc(0.25 * var(--avatar-size));

    background: var(--clr-green5);
    border: calc(1px * var(--ui-scale)) solid var(--clr-pri);
    border-radius: 50%;

    line-height: calc(0.25 * var(--avatar-size));
    font-size: calc(0.18 * var(--avatar-size));
    color: #FFFFFF;
    font-weight: bold;
    padding: calc(0.03 * var(--avatar-size));
}
#popupsHolder .popup-holder .customization-header .customization-special-offer {
    position: absolute;
    right: calc(-10px * var(--ui-scale));
    top: 0;
    bottom: 0;
    height: max-content;
    margin: auto 0;

    display: flex;
    flex-direction: column;
    gap: calc(15px * var(--ui-scale));
    justify-content: center;
    align-items: center;

    transform: translateX(150%);
    background: var(--clr-green5);
    border: 1px solid #ffffff;

    border-radius: calc(10px * var(--ui-scale));
    padding: calc(13px * var(--ui-scale)) calc(15px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-is-closeable="close_one"] .customization-header .customization-special-offer,
#popupsHolder .popup-holder[data-type="start_new_game"] .customization-header .customization-special-offer {
    top: unset;
    bottom: unset;
}
.portrait #popupsHolder .popup-holder .customization-header .customization-special-offer {
    transform: translateX(100%);
}
#popupsHolder .popup-holder .customization-header .customization-special-offer .title-above {
    position: absolute;
    top: calc(-27px * var(--ui-scale));
    font-size: calc(17px * var(--ui-scale));
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 600;
}
#popupsHolder .popup-holder .customization-header .customization-special-offer .profile-avatar {
    --avatar-size: calc(100px * var(--ui-scale));
    pointer-events: none;
}
#popupsHolder .popup-holder .customization-header .customization-special-offer .ads-to-unlock {
    font-size: calc(12px * var(--ui-scale));
    align-self: stretch;
    display: flex;
    gap: calc(8px * var(--ui-scale));
    align-items: center;
    padding: calc(5px * var(--ui-scale)) calc(8px * var(--ui-scale));
    line-height: 1 !important;
}
#popupsHolder .popup-holder .customization-header .customization-special-offer .ads-to-unlock .icon {
    width: 1.8em;
    height: 1.8em;
}
#popupsHolder .popup-holder .customization-header .customization-special-offer .ads-to-unlock .icon.fa-solid {
    width: 1.2em;
    height: 1.1em;
    font-size: 1.2em;
    color: var(--clr-yellow);
}
#popupsHolder .popup-holder .customization-header .customization-special-offer .ads-to-unlock,
#popupsHolder .popup-holder .customization-header .customization-special-offer .ads-to-unlock::after {
    border-radius: calc(6px * var(--ui-scale)) !important;
}
/* TODO end general popup customization notes */
#popupsHolder .popup-holder[data-type="set_username"] .customization-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2em;
}

#popupsHolder .popup-holder[data-type="set_username"].is-overlayed .customization-header {
    position: relative;
}
#popupsHolder .popup-holder[data-type="set_username"] .customization-header > .profile-avatar {
    --avatar-size: calc(135px * var(--ui-scale));
    border: 2px solid var(--avatar-border-color);
}
#popupsHolder .popup-holder[data-type="set_username"] .customization-header > .profile-avatar:hover {
    filter: brightness(120%);
    cursor: pointer;
}
#popupsHolder .popup-holder[data-type="set_username"] .customization-header .profile-avatar .edit-avatar {
    position: absolute;
    bottom: 0%;
    right: 5%;

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

    width: calc(0.25 * var(--avatar-size));
    height: calc(0.25 * var(--avatar-size));

    background: var(--clr-green5);
    border: calc(1px * var(--ui-scale)) solid var(--avatar-border-color);
    border-radius: 50%;

    line-height: calc(0.25 * var(--avatar-size));
    font-size: calc(0.18 * var(--avatar-size));
    color: #FFFFFF;
    font-weight: bold;
    padding: calc(0.03 * var(--avatar-size));
}
#popupsHolder .popup-holder[data-type="set_username"] .customization-header .customization-special-offer {
    position: absolute;
    right: calc(-10px * var(--ui-scale));
    top: 0;
    bottom: 0;
    height: max-content;
    margin: auto 0;

    display: flex;
    flex-direction: column;
    gap: calc(15px * var(--ui-scale));
    justify-content: center;
    align-items: center;

    transform: translateX(150%);
    background: var(--clr-green5);
    border: 1px solid #ffffff;

    border-radius: calc(10px * var(--ui-scale));
    padding: calc(13px * var(--ui-scale)) calc(15px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="set_username"][data-is-closeable="close_one"] .customization-header .customization-special-offer {
    top: unset;
    bottom: unset;
}
.portrait #popupsHolder .popup-holder[data-type="set_username"] .customization-header .customization-special-offer {
    transform: translateX(100%);
}
#popupsHolder .popup-holder[data-type="set_username"] .customization-header .customization-special-offer .profile-avatar {
    --avatar-size: calc(100px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="set_username"] .customization-header .customization-special-offer .ads-to-unlock {
    font-size: calc(12px * var(--ui-scale));
    align-self: stretch;
}
#popupsHolder .popup-holder[data-type="set_username"] .customization-header .customization-special-offer .ads-to-unlock,
#popupsHolder .popup-holder[data-type="set_username"] .customization-header .customization-special-offer .ads-to-unlock::after {
    border-radius: calc(6px * var(--ui-scale)) !important;
}
/* END set nickname */
#main_container #popupsHolder .popup-holder[data-type="hands"] .popup-content-holder {
    width: calc(600px * var(--canvas-scale));
    height: calc(840px * var(--canvas-scale));

    max-width: clamp(30vw, 2000px, 90vw);
    min-height: clamp(200px, 450px, 50vh) !important;
    max-height: clamp(200px, 2800px, 90vh) !important;
}
#main_container #popupsHolder .popup-holder[data-type="hands"] .popup-content-holder .popup-content {
    max-height: none;
}
#popupsHolder .popup-holder[data-type="hands"] .popup-content .scroll-holder {
    text-align: center;
}
#popupsHolder .popup-holder[data-type="hands"] .popup-content .scroll-holder img {
    height: 98%;
}

#dynamic_dom #popupsHolder .popup-holder[data-type="alpha_notice"] .popup-content {
    font-size: calc(16px * var(--ui-scale));
}


/* MAIN MENU */
:root {
    --chat-widget-width: calc((250px - 40px) * var(--ui-scale));
}

#popupsHolder .main-menu-middle-holder {
    position: absolute;
    top: 0;
    /*right: calc(40px * var(--ui-scale) + var(--chat-widget-width));*/
    right: 0; /* by default 0 as chat is collapsed*/
    left: 0;
    bottom: calc(90px * var(--canvas-scale));
    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(800px * var(--canvas-scale)), 80%);
    /*aspect-ratio: var(--table-wh-ratio);*/
    width: calc(1000px * var(--canvas-scale));
    height: calc(1000px / var(--table-wh-ratio) * var(--canvas-scale));

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    transition: all 250ms ease-in-out;
}
.portrait #popupsHolder .main-menu-middle-holder {
    /*--table-wh-ratio: 2.136;*/ /* larger table*/
    --table-wh-ratio: 1.846; /* smaller (old) - landscape 4697x2544 */
    --table-wh-ratio: var(--table-wh-ratio-80); /* smaller 90% - 1.675 */
    /*width: calc(1000px / var(--table-wh-ratio) * var(--canvas-scale));
    height: calc(1000px * var(--canvas-scale));*/

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

    right: 0 !important; /* override potential inline right as leftover from open chat on landscape*/

    transition: none; /* remove transition as that's needed just on landscape to sync with chat hiding/Showing */
}
#popupsHolder .main-menu-middle-holder .logo-holder {
    opacity: 0.28;
}
.use-logo-variant-50 #popupsHolder .main-menu-middle-holder .logo-holder {
    opacity: 0.5;
    filter: drop-shadow(-1px -1px 2px rgba(0,0,0,0.9));
}
.use-logo-variant-70 #popupsHolder .main-menu-middle-holder .logo-holder {
    opacity: 0.7;
    filter: drop-shadow(-1px -1px 2px rgba(0,0,0,0.9));
}
.portrait #popupsHolder .main-menu-middle-holder .logo-holder {
    --logo-holder-scale: 0.26;
}
#popupsHolder .create-room,
#popupsHolder .join-room {
    text-align: left;
    font-size: calc(24px * var(--ui-scale));
    display: flex;
    flex-direction: column;
}
#popupsHolder .choose-options {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    max-width: 800px;
    margin: 0 auto;
    width: 60%;
}
.portrait #popupsHolder .choose-options {
    width: 70%;
}
#popupsHolder .choose-option {
    flex-grow: 1;
}
.portrait #popupsHolder .choose-option {
    width: 100%;
}
#popupsHolder .choose-option .btn {
    font-size: 1.2em;
    line-height: 1.2;
    width: 16ch;
    margin: .5em auto .2em auto;
}
.portrait #popupsHolder .choose-option .btn {
    font-size: 1.1em;
    line-height: 1.2;
    width: auto;
    margin: .7em 0 .3em 0;
}
#popupsHolder .create-room .lobby-options {
    display: flex;
    gap: calc(var(--ui-scale) * 50px);
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--ui-scale) * 40px);
}
.multiplayer.table-type-private #popupsHolder .create-room .lobby-options {
    /* reduce margin below to make space for public lobbies text*/
    margin-bottom: calc(var(--ui-scale) * 14px);
}
.portrait #popupsHolder .create-room .lobby-options {
    flex-direction: column;
    align-items: stretch;
}
.portrait #popupsHolder .choose-option .create-room input[type="number"],
.portrait #popupsHolder .choose-option .create-room input[data-input-type="number"] {
    width: 100%;
}
.portrait #popupsHolder .choose-option .create-room  .numeric-steps {
    right: calc(7px * var(--ui-scale));
}
.portrait #popupsHolder .create-room .lobby-options .lobby-option .sub-text br {
    display: none;
}
#popupsHolder .create-room .lobby-options .lobby-option {
    text-align: left;
}
#popupsHolder .create-room .lobby-options .lobby-option:nth-of-type(1) {
    flex: 3 1 0;
}
#popupsHolder .create-room .lobby-options .lobby-option:nth-of-type(2) {
    flex: 2 1 0;
}
#popupsHolder .create-room .lobby-options .lobby-option .sub-text {
    font-size: 0.5em;
}
#popupsHolder .choose-option .create-room input {
    margin-top: .4em;
    margin-bottom: .2em;
    font-size: 0.9em;
    line-height: 2;
    width: 100%;
    box-sizing: border-box;

    font-weight: 600;
    font-family: var(--font-fam-btn);
}
#popupsHolder .choose-option .create-room .input-wrapper {
    margin-top: 0;
    position: relative;
}
#popupsHolder .choose-option .create-room .input-wrapper input {
    padding-right: calc(40px * var(--ui-scale));
}
#popupsHolder .choose-option .create-room input[type="number"],
#popupsHolder .choose-option .create-room input[data-input-type="number"] {
    padding-left: 1.1em;
    width: calc(100% - 1.1em + 10px * var(--ui-scale));
}
#popupsHolder .choose-option .create-room .input-prefix {
    content: '$';
    position: absolute;
    left: calc(12px * var(--canvas-scale));
    top: calc(5px * var(--canvas-scale));
    bottom: 0;
    margin: auto 0;
    height: max-content;
    font-size: 0.9em;
    line-height: 2;
    font-weight: 600;

    color: black;
}
.hide-currency-prefix #popupsHolder .choose-option .create-room .input-prefix {
    content: '';
}
#popupsHolder .choose-option .create-room .input-wrapper .input-icon {
    color: #000000;
    position: absolute;
    font-size: 1.2em;
    bottom: calc(20px * var(--ui-scale));
    right: calc(10px * var(--ui-scale));
    top: auto;
}
#popupsHolder .logo-holder {
    position: relative;
    top: calc(9px * var(--canvas-scale));

    --logo-holder-scale: 0.3;
    margin-top: auto;
    margin-bottom: auto;
}
#popupsHolder .choose-options {
    margin-bottom: auto;
}
/* MAIN MENU */
#popupsHolder .popup-holder[data-type="main_menu"] {
    pointer-events: none;
}
#popupsHolder .popup-holder[data-type="main_menu"] .popup-content-holder {
    pointer-events: none;
}
#popupsHolder .popup-holder[data-type="main_menu"] .popup-content {
    padding-right: calc(40px * var(--ui-scale) + var(--chat-widget-width));
    width: calc(100% - var(--chat-widget-width) - 40px * var(--ui-scale));
    pointer-events: none;
}
#popupsHolder .popup-holder[data-type="main_menu"] input:not(.disabled),
#popupsHolder .popup-holder[data-type="main_menu"] .btn:not(.disabled),
#popupsHolder .popup-holder[data-type="main_menu"] a:not(.disabled) {
    pointer-events: auto;
}
#popupsHolder .popup-holder[data-type="main_menu"] [data-action-type="create_room_private"] {
    position: relative;
}
#popupsHolder .popup-holder[data-type="main_menu"] [data-action-type="create_room_private"].disabled {
    opacity: 1;
}
#popupsHolder .popup-holder[data-type="main_menu"] [data-action-type="create_room_private"] .fa-spinner {
    position: absolute;
    right: calc(20px * var(--ui-scale));
    top: 0;
    bottom: 0;
    height: max-content;
    margin: auto 0;
}
#popupsHolder .popup-holder[data-type="main_menu"] [data-action-type="create_room_private"]:not(.is-loading) .fa-spinner {
    display: none;
}

#popupsHolder .popup-holder[data-type="main_menu"] .is-set-username {
    position: relative;
}
#popupsHolder .popup-holder[data-type="main_menu"] .is-set-username  .error-txt {
    position: absolute;
    font-size: 0.5em;
    /*color: var(--clr-red);*/
    color: yellow;
    bottom: -2.5em;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: left;
    line-height: 1.05;
    min-height: 2.1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.portrait #popupsHolder .main-menu-middle-holder {
    right: 0;
}

.portrait #popupsHolder .popup-holder[data-type="main_menu"] .popup-content {
    padding: 0;
    width: 100%;
}

#popupsHolder .popup-holder[data-type="main_menu"] .popup-content .cross-promo {
    font-size: 0.8em;
    margin-top: 1em;
    pointer-events: auto;
    text-align: center;
}
.table-type-public #popupsHolder .popup-holder[data-type="main_menu"] .popup-content .cross-promo {
    /*display: none;*/
}
.use-table-text-with-border-stroke #popupsHolder .popup-holder[data-type="main_menu"] .popup-content .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;
}
/* RESUME GAME */

#dynamic_dom #popupsHolder .popup-holder[data-type="resume_game"] .popup-content-holder {
    min-height: clamp(calc(200px * var(--ui-scale)), calc(460px * var(--ui-scale)), 90vh);
    max-height: clamp(calc(200px * var(--ui-scale)), calc(460px * var(--ui-scale)), 90vh);
}
#popupsHolder .popup-holder[data-type="resume_game"] .resumed-game-info {
    justify-content: center;
    gap: calc(40px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="resume_game"] .resumed-game-info .game-img {
    /*flex-basis: max-content;*/
    /*flex-grow: 0;*/
    flex-grow: 1;
    text-align: right;
}
#popupsHolder .popup-holder[data-type="resume_game"] .resumed-game-info .card {
    display: inline-block;
    --card-scale-modifier: 0.45;
    --card-scale-relative: var(--ui-scale);
}
#popupsHolder .popup-holder[data-type="resume_game"] .resumed-game-info .card:last-child {
    margin-left: calc(-0.5 * var(--card-width-default) * var(--card-scale-relative) * var(--card-scale));
}
#popupsHolder .popup-holder[data-type="resume_game"] .resumed-game-info .game-details {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    font-size: calc(18px * var(--ui-scale));
    font-weight: 600;
    /*flex-grow: 0;*/
    flex-grow: 1;
    /*flex-basis: max-content;*/
}
#popupsHolder .popup-holder[data-type="resume_game"] .resumed-game-info .game-details .game-stack {
    font-size: 2.8em;
}
#popupsHolder .popup-holder[data-type="resume_game"] .resumed-game-info .game-details .game-difficulty span {
    font-style: italic;
    text-transform: capitalize;
}
#popupsHolder .popup-holder[data-type="resume_game"] .text-center {
    align-self: stretch;
    margin-top: calc(50px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="resume_game"] .buttons-holder {
    margin-top: auto;
    align-self: stretch;
    display: flex;
    justify-content: center;
    gap: calc(40px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="resume_game"] .buttons-holder .btn {
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    height: calc(58px * var(--ui-scale));
    font-size: calc(22px * var(--ui-scale));
    min-width: 13ch;
    margin: 0;
}
#popupsHolder .popup-holder[data-type="resume_game"] .popup-content .buttons-holder .btn[data-action-type="continue_game"] {
    background: var(--btn-fold-bg);
}

/* START NEW GAME */
/*
#popupsHolder .popup-holder[data-type="start_new_game"] [data-action-type="play_game"] .fa-spinner {
    position: absolute;
    right: calc(20px * var(--ui-scale));
    top: 0;
    bottom: 0;
    height: max-content;
    margin: auto 0;
}
#popupsHolder .popup-holder[data-type="start_new_game"] [data-action-type="play_game"]:not(.is-loading) .fa-spinner {
    display: none;
}*/
#dynamic_dom #popupsHolder .popup-holder[data-type="start_new_game"] .popup-content-holder {
    min-height: clamp(calc(300px * var(--ui-scale)), calc(680px * var(--ui-scale)), 90vh);
    max-height: clamp(calc(300px * var(--ui-scale)), calc(680px * var(--ui-scale)), 90vh);
}
#popupsHolder .popup-holder[data-type="start_new_game"] .popup-content {
    font-size: calc(25px * var(--ui-scale)) !important;
}
#popupsHolder .popup-holder[data-type="start_new_game"] .text-center {
    text-align: left;
    width: 82%;
}
#popupsHolder .popup-holder[data-type="start_new_game"] .buttons-holder {
    margin-top: calc(25px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="start_new_game"] .buttons-holder .btn {
    display: flex;
    box-sizing: border-box;
    height: calc(58px * var(--ui-scale));
    justify-content: center;
    align-items: center;
    margin: 0;
}
#popupsHolder .popup-holder[data-type="start_new_game"] .difficulty-choices {
    align-items: center;
    margin-top: calc(20px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="start_new_game"] .difficulty-choice {
    height: calc(56px * var(--ui-scale));
    border: calc(1px * var(--ui-scale)) solid white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-size: calc(16px * var(--ui-scale));
    line-height: 1;
    font-weight: 600;
    color: white;
}
#popupsHolder .popup-holder[data-type="start_new_game"] .difficulty-choice:hover {
    cursor: pointer;
    /*filter: brightness(120%);*/
}
#popupsHolder .popup-holder[data-type="start_new_game"] .difficulty-choice[data-type="easy"] {
    background: #1d7829;
    border-top-left-radius: calc(15px * var(--ui-scale));
    border-bottom-left-radius: calc(15px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="start_new_game"] .difficulty-choice[data-type="easy"]:hover {
    background: #22892F;
    /*background: #196623; - darker */
}
#popupsHolder .popup-holder[data-type="start_new_game"] .difficulty-choice[data-type="medium"] {
    background: #12611b;
}
#popupsHolder .popup-holder[data-type="start_new_game"] .difficulty-choice[data-type="medium"]:hover {
    background: #22892F;
    /*background: #0c4813; - darker */
}
#popupsHolder .popup-holder[data-type="start_new_game"] .difficulty-choice[data-type="hard"] {
    background: #7f402e;
    border-top-right-radius: calc(15px * var(--ui-scale));
    border-bottom-right-radius: calc(15px * var(--ui-scale));
    pointer-events: none !important
}
#popupsHolder .popup-holder[data-type="start_new_game"] .difficulty-choice[data-type="hard"]:hover {
    filter: brightness(120%);
}
#popupsHolder .popup-holder[data-type="start_new_game"] .difficulty-choice.active {
    /*outline: calc(1px * var(--ui-scale)) solid white;*/
    /*border: calc(2px * var(--ui-scale)) solid white;*/
    /*filter: brightness(125%);*/
    background: #22892F;
    pointer-events: none;
}
#popupsHolder .popup-holder[data-type="start_new_game"] .difficulty-choice span {
    font-size: calc(10px * var(--ui-scale));
    font-weight: normal;
    margin-top: 0.5em;
}
#popupsHolder .popup-holder[data-type="start_new_game"] .cross-promo {
    text-align: center;
}
/* PLAYERS */
#popupsHolder .popup-holder.mini-popup[data-type="players"] .popup-content {
    justify-content: flex-start;
}
#popupsHolder .popup-holder .option-box {
    border: 1px solid white;
    border-radius: calc(20px * var(--ui-scale));

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

    font-size: calc(16px * var(--ui-scale));
    line-height: calc(35px * var(--ui-scale));

    display: flex;
    gap: calc(10px * var(--ui-scale));
    align-items: center;

    margin-bottom: calc(20px * var(--ui-scale));
    background: #000;
}
#popupsHolder .popup-holder .option-box.vertical {
    flex-direction: column;
    align-items: flex-start;
}
#popupsHolder .popup-holder .option-box.central-alignment {
    text-align: center;
    align-items: center;
}
#popupsHolder .popup-holder .option-box.central-alignment p {
    margin: 0;
    line-height: 1;
    margin-bottom: 0.6em;
    font-style: italic;
}
#popupsHolder .popup-holder .option-box .username {
    font-size: 1.5em;
    font-weight: bold;
}
#popupsHolder .popup-holder .option-box .username .fa-circle {
    font-size: 0.8em;
}
#popupsHolder .popup-holder .option-box .desc {
    font-style: italic;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.2;
}
#popupsHolder .popup-holder .waitlist-options {
    text-align: center;
    margin: 1em 0;
}
#popupsHolder .popup-holder .option-box .btn {
    font-size: 1.2em;
}
#popupsHolder .popup-holder .option-box .btn[data-sub-type="edit_seat"] {
    background: var(--clr-green5);
}
#popupsHolder .popup-holder .option-box .btn[data-sub-type="edit_seat"] .sub-title {
    margin-bottom: 1.5em;
}
#popupsHolder .popup-holder .option-box .btn.btn-skeleton {
    background: var(--clr-grey2);
    pointer-events: none;
}
#popupsHolder .popup-holder .option-box .btn:not(.icon, :last-child) {
    margin-right: calc(10px * var(--ui-scale));
}

#popupsHolder .popup-holder .option-box .icon.seat-request-icon.approve-request {
    margin-right: calc(10px * var(--ui-scale));
}
#popupsHolder .popup-holder .option-box .icon.seat-request-icon {
    padding: calc(5px * 1.25 * var(--canvas-scale));
    width: calc(26px * 1.25 * var(--canvas-scale));
    height: calc(26px * 1.25 * var(--canvas-scale));
    bottom: calc(2px * 1.25 * var(--canvas-scale));

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

    border: 1px solid white;
    border-radius: calc(10px * 1.25 * var(--canvas-scale));
    color: white;
    text-align: center;
}
#popupsHolder .popup-holder[data-type="players"] .option-box {
    position: relative;
    margin: 0 auto;
    margin-bottom: calc(20px * var(--ui-scale));
    transform: translateX(calc(21px * var(--ui-scale)));
    max-width: calc(100% - calc(60px * var(--ui-scale)));
}
#popupsHolder .popup-holder[data-type="players"] .option-box .btn {
    font-size: 1.1em;
    padding: calc(5px * var(--ui-scale)) calc(15px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="players"] .option-box.edit-player {
}
#popupsHolder .popup-holder[data-type="players"] .option-box .player-info {
    flex-grow: 1;
}
#popupsHolder .popup-holder[data-type="players"] .option-box .player-info span {
    display: inline-block;
    margin-left: calc(5px * var(--ui-scale));
    padding: calc(5px * var(--ui-scale));

    vertical-align: middle;
    background: rgba(0,0,0,0.3);
    border-radius: calc(5px * var(--ui-scale));
    font-size: .5em;
    line-height: 1;
}
#popupsHolder .popup-holder[data-type="players"] .option-box.edit-player .username {
    text-align: left;
}
#popupsHolder .popup-holder[data-type="players"] .option-box.edit-player .desc {
    font-size: 0.8em;
}

#popupsHolder .popup-holder[data-type="players"] .option-box .player-info,
#popupsHolder .popup-holder[data-type="waitlist"] .option-box.edit-waitlist .player-info {
    padding-left: calc(53px * var(--ui-scale));
}
#popupsHolder .popup-holder .option-box .profile-avatar {
    position: absolute;
    --avatar-size: calc(92px * var(--ui-scale));
    top: calc(-1px * var(--ui-scale));; /* for some extra overlap due to pixel rounding */
    left: 0;
    transform: translateX(-33%);
}
#popupsHolder .popup-holder .option-box .profile-avatar::after {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border-radius: 50%;
    border: clamp(1px, calc(1.5px * var(--ui-scale)), 1.5px) solid #ffffff;
}
/* START waitlist popup */

#popupsHolder .popup-holder .option-box.edit-waitlist {
    position: relative;
    max-width: 30ch;
    margin: 0 auto;
    transform: translateX(calc(21px * var(--ui-scale)));
    margin-bottom: calc(15px * var(--ui-scale));
}
/*#popupsHolder .popup-holder .option-box.edit-waitlist .player-info {*/
#popupsHolder .popup-holder .option-box.edit-waitlist .desc {
    font-size: 1em;
    margin-top: -0.2em;
}
#popupsHolder .popup-holder .option-box.edit-waitlist .username {
    text-align: left;
}
#popupsHolder .popup-holder .option-box.edit-waitlist .remove {
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(20px * var(--ui-scale));
    font-size: 2em;
    height: max-content;
    margin: auto 0;
    transition: transform 0.2s ease-in-out;
}
#popupsHolder .popup-holder .option-box.edit-waitlist .remove:hover {
    cursor: pointer;
    transform: scale(1.1);
}
/* END waitlist popup */


    /* START PLAYERS EDIT */
#popupsHolder .popup-holder .go-back {
    position: absolute;
    top: calc(85px * var(--ui-scale));
    color: white;
    cursor: pointer;
    align-self: flex-start;
    left: calc(40px * var(--ui-scale));
}
#popupsHolder .popup-holder .go-back:hover {
    color: var(--clr-grey);
}
#popupsHolder .popup-holder .go-back .fa-triangle {
    font-size: 0.9em;
}
#popupsHolder .popup-holder .sub-title {
    text-align: center;
    font-weight: 600;
    font-size: 1.0em;
}
#popupsHolder .popup-holder .option-box.has-input {
    background:none;
    border: none;
    align-items: stretch;
    padding: 0;
}
#popupsHolder .popup-holder .option-box.has-input input {
    box-sizing: border-box;
    width: 100%;
    padding-left: calc(25px * var(--ui-scale));
    /*font-style: italic;*/
    font-weight: 600;

    /* changed as per table stack edit */
    font-size: calc(22px * var(--ui-scale));
    font-family: var(--font-fam-reg);
    line-height: 1.8;
}
#popupsHolder .popup-holder .option-box.has-input .sub-text {
    margin-top: 0.0em;
    line-height: 1;
    font-size: 0.7em;
    font-style: italic;
    font-weight: 600;
}
#popupsHolder .popup-holder .option-box.has-input > span {
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1.2;
}
#popupsHolder .popup-holder .option-box.has-input .input-prefix {
    position: absolute;
    left: calc(10px * var(--ui-scale));
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: max-content;
    font-size: 1.5em;
    line-height: 1.2;
    font-weight: 600;

color: black;
}
#popupsHolder .popup-holder[data-type="edit_seat"] .option-box.has-input .input-wrapper .numeric-steps {
    right: calc(160px * var(--ui-scale));
    font-size: 0.67em;
    top: calc(1px * var(--ui-scale));
}
#popupsHolder .popup-holder.mini-popup .popup-content .option-box .buttons-holder .btn[data-sub-type="transfer_game_ownership"] {
    background: var(--clr-grey2);
}
#popupsHolder .popup-holder.mini-popup .popup-content .option-box .buttons-holder .btn[data-sub-type="remove_player_from_lobby"] {
    background: var(--clr-red);
}
#popupsHolder .popup-holder .option-box.has-input .input-wrapper .btn {
    background: var(--clr-green5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    line-height: 2.2;
}
#popupsHolder .popup-holder .option-box.has-input .input-wrapper .btn {
    border-radius: calc(10px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="lobby_stack"] .input-wrapper .input-icon {
    font-size: 1.5em;
    bottom: calc(14px * var(--ui-scale));
    right: calc(10px * var(--ui-scale));
}

#popupsHolder .popup-holder[data-type="lobby_stack"] .popup-content .btn:not(.icon) {
    font-size: 1.6em;
    margin-top: 0.8em;
}

#popupsHolder .popup-holder[data-type="lobby_stack"] .option-box.has-input .input-wrapper .numeric-steps {
    font-size: 0.67em;
    top: calc(1px * var(--ui-scale));  right: calc(4px * var(--ui-scale));
}
    /* TABLE SETTINGS */
#popupsHolder .popup-holder[data-type="table_settings"] .option-box.table-setting {

}
#popupsHolder .popup-holder[data-type="table_settings"] .option-box.table-setting input[type="number"]{
    width: 8ch;
    font-size: 1.2em;
}
#popupsHolder .popup-holder .settings-groups-holder {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: space-between;
    align-items: stretch;
}
#popupsHolder .popup-holder .settings-group {
    margin-bottom: 1em;
    flex: 1 1 45%;
}
#popupsHolder .popup-holder .settings-group .setting-group-title {
    font-size: 1.5em;
    line-height: 1;
    padding: .5em;

    background: rgba(0,0,0,0.5);
    text-transform: uppercase;
}
#popupsHolder .popup-holder .settings-group .setting-group-desc {
    margin-bottom: .5em;
    padding: .5em;

    background: rgba(0,0,0,0.2);
}

/* START STATS POPUPS*/
#popupsHolder .stats-holder {
    border: 1px solid white;
    border-radius: calc(20px * var(--ui-scale));
    background: #000000;
    padding: calc(20px * var(--ui-scale));
    text-align: center;
}
#popupsHolder .stats-holder h3 {
    font-weight: bold;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: 600;
}
#popupsHolder .stats-holder h3:not(:first-child) {
    margin-top: 2em;
}
#popupsHolder .stats-holder .stats-row {
    gap: calc(10px * var(--ui-scale));
}
#popupsHolder .stats-holder .stats-row .flex-column {
    display: block;
    font-size: 0.6em;
    font-weight: 600;
    color: #ffffff;
}
#popupsHolder .stats-holder .stats-row .flex-column > span {
    display: block;
    font-size: 2.2em;
    font-weight: bold;
    margin-bottom: 0.25em;
}
#popupsHolder .stats-holder .stats-row .flex-column.positive {
    color: var(--clr-green3)
}
#popupsHolder .stats-holder .stats-row .flex-column.negative {
    color: var(--clr-red);
}
#popupsHolder .stats-holder .stats-row .fa-arrow-right,
#popupsHolder .stats-holder .stats-row .fa-arrow-left {
    font-size: 3em;
}
/* END STATS POPUPS */

/* START EXIT LOBBY */

#popupsHolder .popup-holder.mini-popup.small-width[data-type="exit_lobby_popup"] .popup-content-holder {
    /* adjustment to make confirmation exit popup sit inside more neatly */
    top: calc(-55px * var(--ui-scale));
    min-height: clamp(calc(200px * var(--ui-scale)), calc(400px * var(--ui-scale)), 90vh);
    max-height: clamp(calc(200px * var(--ui-scale)), calc(400px * var(--ui-scale)), 90vh);
}
/* END EXIT LOBBY */

/* START iframeNotes */
#popupsHolder .popup-holder.mini-popup.iframe-note .popup-content {
    font-size: calc(20px * var(--ui-scale));
}
#popupsHolder .popup-holder.mini-popup.iframe-note .popup-content .btn[data-action-type="go_to_location"] {
    background: var(--btn-fold-bg);
}
/* END iframeNotes */

/* START reseat_limitations*/
#popupsHolder .popup-holder.mini-popup.small-width[data-type="reseat_limitations"] .popup-content {
    font-size: calc(18px * var(--ui-scale));

    padding: calc(20px * var(--ui-scale)) calc(40px * var(--ui-scale));
    min-height: clamp(calc(250px * var(--ui-scale)), calc(300px * var(--ui-scale)), 90vh);
}
/* END reseat_limitations*/

/* START CUstomization COMMON */
#popupsHolder .popup-holder .items-holder {
    position: relative;
    padding-top: calc(40px * var(--ui-scale));
}
#popupsHolder .popup-holder .items-holder.has-categories {
    position: relative;
    padding-top: calc(47px * var(--ui-scale));
}
#popupsHolder .popup-holder .item-categories {
    position: sticky;
    top: 0;
    right: 0;
    left: 0;

    display: flex;
    width: max-content;
    height: max-content;
    margin: 0 auto;

    background: white;
    color: black;
    font-size: 0.6em;
    font-weight: bold;
    z-index: 1;
    margin-top: calc(-47px * var(--ui-scale));
    grid-column: 1 / -1;

    border-radius: var(--border-radius-tiny);
    overflow: hidden;
}
#popupsHolder .popup-holder .item-category {
    padding: 0.5em 1em;
    background: #ffffff;
    color: #000000;
    text-transform: uppercase;
    cursor: pointer;
}
#popupsHolder .popup-holder .item-category:hover {
    background: #d1d1d1;
}
#popupsHolder .popup-holder .item-categories .item-category.is-selected {
    background: #d1d1d1;
    pointer-events: none;
}
#popupsHolder .popup-holder .item-categories .item-category[data-sub-type="all"].is-selected {
    background: #d1d1d1;
}
#popupsHolder .popup-holder .item-categories .item-category[data-sub-type="cool"].is-selected {
    background: #00c9ff;
}
#popupsHolder .popup-holder .item-categories .item-category[data-sub-type="funny"].is-selected {
    background: #FFDF00;
}
#popupsHolder .popup-holder .item-categories .item-category[data-sub-type="animals"].is-selected {
    background: #FF9A33;
}
#popupsHolder .popup-holder .item-categories .item-category[data-sub-type="nature"].is-selected {
    background: #02FF42;
}
#popupsHolder .popup-holder .item-categories .item-category[data-sub-type="celebrities"].is-selected {
    background: #DF86FF;
}
#popupsHolder .popup-holder .items-holder[data-selected-category="all"] .item-holder {
    display: block;
}
#popupsHolder .popup-holder .items-holder[data-selected-category="cool"] .item-holder[data-item-categories*="cool"] {
    display: block;
}
#popupsHolder .popup-holder .items-holder[data-selected-category="funny"] .item-holder[data-item-categories*="funny"] {
    display: block;
}
#popupsHolder .popup-holder .items-holder[data-selected-category="animals"] .item-holder[data-item-categories*="animals"] {
    display: block;
}
#popupsHolder .popup-holder .items-holder[data-selected-category="nature"] .item-holder[data-item-categories*="nature"] {
    display: block;
}
#popupsHolder .popup-holder .items-holder[data-selected-category="celebrities"] .item-holder[data-item-categories*="celebrities"] {
    display: block;
}
#popupsHolder .popup-holder .item-holder {
    --item-ui-size: var(--min-grid-width);
    position: relative;
    display: none; /* none by default, as we're now using category filters above! */
}
#popupsHolder .popup-holder .item-holder[data-action-type="customization_action"]:hover {
    /*filter: brightness(120%);*/
    cursor: pointer;
}
#popupsHolder .popup-holder .item-holder[data-action-type="customization_action"]:hover .btn {
    filter: brightness(125%);
}
#popupsHolder .popup-holder .item-holder[data-action-type="customization_action"].locked-behind-membership:hover .btn {
    filter: brightness(110%);
}
#popupsHolder .popup-holder .item-holder .ads-to-unlock,
#popupsHolder .popup-holder .item-holder .unlocked-time-left {
    position: absolute;
    bottom: 7%;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: #FFFFFF;

    display: flex;
    gap: calc(8px * var(--ui-scale));
    align-items: center;
    line-height: 2.2 !important;
    font-weight: 600;
    font-size: calc(0.08 * var(--item-ui-size));
    padding: calc(0.03 * var(--item-ui-size)) calc(0.08 * var(--item-ui-size));

    border-radius: calc(0.05 * var(--item-ui-size)) !important;
    width: max-content;
}
#popupsHolder .popup-holder .item-holder .unlocked-time-left {
    line-height: 1.7 !important;
    font-weight: 600;
    font-size: calc(0.10 * var(--item-ui-size));
    pointer-events: none;
}
#popupsHolder .popup-holder .item-holder .ads-to-unlock::after,
#popupsHolder .popup-holder .item-holder .unlocked-time-left::after {
    border-radius: calc(0.05 * var(--item-ui-size)) !important;
}
#popupsHolder .popup-holder .item-holder .ads-to-unlock .fa-solid,
#popupsHolder .popup-holder .item-holder .unlocked-time-left .fa-solid {
    font-size: calc(0.11 * var(--item-ui-size));
}
#popupsHolder .popup-holder .item-holder .item-chosen {

    position: absolute;
    bottom: 0%;
    right: 5%;

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

    width: calc(0.25 * var(--item-ui-size));
    height: calc(0.25 * var(--item-ui-size));

    background: var(--clr-green3);
    border: calc(1px * var(--ui-scale)) solid var(--clr-pri);
    border-radius: 50%;

    line-height: calc(0.25 * var(--item-ui-size));
    font-size: calc(0.18 * var(--item-ui-size));
    color: #FFFFFF;
    font-weight: bold;
}
#popupsHolder .popup-holder .item-holder .item-locked {
    position: absolute;
    top: 8%;
    left: 5%;
    color: #FFFFFF;
    font-size: calc(0.09 * var(--item-ui-size));
    background: green;
    border: calc(0.01 * var(--item-ui-size)) solid white;
    padding: calc(0.04 * var(--item-ui-size));
    border-radius: calc(0.04 * var(--item-ui-size));
}
#popupsHolder .popup-holder .item-holder.is-chosen {
    pointer-events: none;
}
#popupsHolder .popup-holder .item-holder.is-chosen .customization-item::after {
    content: '';
    position: absolute;
    width: calc(100% - 0.06 * var(--item-ui-size));
    height: calc(100% - 0.06 * var(--item-ui-size));
    top: 0;
    left: 0;

    border: calc(0.04 * var(--item-ui-size)) solid #FFFFFF;
    border-radius: 50%;
    box-sizing: content-box;
}
#popupsHolder .popup-holder .item-holder.locked-behind-login .item-locked {
    background: #0525ff;
}
#popupsHolder .popup-holder .item-holder.locked-behind-membership .item-locked {
    background: var(--clr-gold);
    color: #000000;
    border-color: #000000;
}
#popupsHolder .popup-holder .item-holder.locked-behind-ads .item-locked {
    background: #EC7600;
}
#popupsHolder .popup-holder .item-holder .btn-secondary {
    color: var(--clr-pri);
    background: var(--clr-green5);
}
#popupsHolder .popup-holder .item-holder.locked-behind-ads .ads-to-unlock {
    background: #EC7600;
}
#popupsHolder .popup-holder .item-holder .login-required {
    background: #0525ff;
    text-decoration: none;
}
#popupsHolder .popup-holder .item-holder .membership-required {
    background: var(--clr-gold);
    text-decoration: none;
    color: #000000 !important;
    border-color: #000000 !important;
    font-weight: 700;
    min-width: 9ch;
    justify-content: center;
}
#popupsHolder .popup-holder .item-holder .membership-required::after {
    border-color: #000000 !important;
}
/* END CUstomization COMMON */

/* START Avatar customization */
#popupsHolder .popup-holder[data-type="avatar_customization"] .popup-content {
    padding: calc(34px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="avatar_customization"] .avatars-holder {
    --min-grid-width: 110px;

    display: flex;
    flex-wrap: wrap;
    gap: 0 calc(20px * var(--ui-scale));
    /* just fallback basic support above*/

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--min-grid-width), 1fr));
    grid-gap: calc(20px * var(--ui-scale));

}
@media only screen and (min-width: 1720px) {
    #popupsHolder .popup-holder[data-type="chips_buy_in"] .popup-content-holder {
        min-width: clamp(200px, 750px, 90vw) !important;
        max-width: clamp(30vw, 750px, 90vw) !important;
    }
    #popupsHolder .popup-holder[data-type="chips_buy_in"] .footer .btn {
        font-size: calc(20px * var(--ui-scale));
        line-height: calc(40px * var(--ui-scale));
    }
}
@media only screen and (min-width: 1000px) and (max-width: 1720px) {
    #popupsHolder .popup-holder[data-type="chips_buy_in"] .footer .btn {
        font-size: calc(16px * var(--ui-scale));
        line-height: calc(32px * var(--ui-scale));
        padding: calc(5px * var(--ui-scale)) calc(16px * var(--ui-scale));
    }
}
@media only screen and (min-width: 780px) and (max-width: 1000px) {
    #popupsHolder .popup-holder[data-type="chips_buy_in"] .footer .btn {
        font-size: calc(18px * var(--ui-scale));
        line-height: calc(36px * var(--ui-scale));
        padding: calc(5px * var(--ui-scale)) calc(18px * var(--ui-scale));
    }
}
@media only screen and (max-width: 780px) {
    /* TODO note: Not ideal placement here for media, but as a quick fix*/
    #popupsHolder .popup-holder[data-type="avatar_customization"] .avatars-holder {
        font-size: 20px; /* fallback support values */
        font-size: 3vw;
        grid-gap: 10px; /* fallback support values */
        grid-gap: 1vw;
    }
}
@media only screen and (max-width: 620px) {
    /* TODO note: Not ideal placement here for media, but as a quick fix*/
    #popupsHolder .popup-holder[data-type="avatar_customization"] .avatars-holder {
        font-size: 16px;
        font-size: 3vw;
    }
}
@media only screen and (max-width: 550px) {
    /* TODO note: Not ideal placement here for media, but as a quick fix*/
    #popupsHolder .popup-holder[data-type="avatar_customization"] .avatars-holder {
        font-size: 14px;
        font-size: 3vw;
    }
}
@media only screen and (max-width: 480px) {
    /* TODO note: Not ideal placement here for media, but as a quick fix*/
    #popupsHolder .popup-holder[data-type="avatar_customization"] .avatars-holder {
        --min-grid-width: 80px;
    }
}
@media only screen and (max-width: 340px) {
    /* TODO note: Not ideal placement here for media, but as a quick fix*/
    #popupsHolder .popup-holder[data-type="avatar_customization"] .avatars-holder {
        --min-grid-width: 60px;
    }
}
#popupsHolder .popup-holder .item-holder.avatar-holder {
    width: max-content;
}
#popupsHolder .popup-holder[data-type="avatar_customization"] .avatars-holder .profile-avatar {
    position: relative;
    --avatar-size: var(--min-grid-width);
}
/* END Avatar customization */

/* START Header customization */
#popupsHolder .popup-holder[data-type="header_customization"] .popup-content {
    padding-top: calc(30px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="header_customization"] .headers-holder {
    --min-grid-width: 220px;

    display: flex;
    flex-wrap: wrap;
    gap: 0 calc(20px * var(--ui-scale));
    /* just fallback basic support above*/

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--min-grid-width), 1fr));
    grid-gap: calc(35px * var(--ui-scale)) calc(20px * var(--ui-scale));
    padding-top: 10px; /* to prevent overflow cutoff, accounted for in reduced top popup padding */
}
#popupsHolder .popup-holder[data-type="header_customization"] .item-holder {
    --item-ui-size: calc(var(--min-grid-width) * 0.5);
}
#popupsHolder .popup-holder[data-type="header_customization"] .headers-holder .profile-background {
    border-radius: 0;
}
#popupsHolder .popup-holder[data-type="header_customization"] .item-holder.is-chosen .customization-item::after {
    border-radius: 0;
}
#popupsHolder .popup-holder[data-type="header_customization"] .item-holder .item-chosen {
    right: calc(-0.01 * var(--item-ui-size));
    bottom: calc(-0.01 * var(--item-ui-size));
}
#popupsHolder .popup-holder[data-type="header_customization"] .item-holder .item-locked {
    top: calc(-0.05 * var(--item-ui-size));
    left: 0;
}
#popupsHolder .popup-holder[data-type="header_customization"] .item-holder .ads-to-unlock {
    bottom: calc(-0.06 * var(--item-ui-size));
}

/* END Header customization */

/* Buy in / add chips  popup*/
#popupsHolder .popup-holder[data-type="chips_buy_in"] .popup-content-holder {
    max-height: clamp(calc(400px * var(--ui-scale)), calc(500px * var(--ui-scale)), 90vh) !important;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .popup-content {
    padding-bottom: calc(32px * var(--ui-scale)) !important;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .header .title {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
    padding: 0.5em 0;
    text-transform: none;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .header .title > div {
    display: flex;
    align-items: center;
    gap: 0.3em;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-available {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5em;
    font-weight: 700;
    margin-bottom: 0.5em;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-available .icon {
    width: 1em;
    height: 1em;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select {
    width: 100%;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .chips-options-buttons {
    display: flex;
    gap: calc(20px * var(--ui-scale));
    width: max-content;
    margin-bottom: calc(20px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .chips-options-buttons .quick-chips-amounts {
    flex: 1;
    display: flex;
    align-self: stretch;
    width: max-content;
    font-size: calc(20px * var(--ui-scale));
    font-weight: 600;
    text-transform: uppercase;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .chips-options-buttons .quick-chips-amounts .quick-chips-amount {
    flex: 1;
    align-self: stretch;

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

    background: black;
    color: #ffffff;
    border: calc(1px * var(--ui-scale)) solid #ffffff;
    border-left: none;
    cursor: pointer;
    padding: calc(10px * var(--ui-scale)) calc(25px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .chips-options-buttons .quick-chips-amounts .quick-chips-amount:first-child {
    border-left: calc(1px * var(--ui-scale)) solid #ffffff;
    border-top-left-radius: calc(10px * var(--ui-scale));
    border-bottom-left-radius: calc(10px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .chips-options-buttons .quick-chips-amounts .quick-chips-amount:last-child {
    border-top-right-radius: calc(10px * var(--ui-scale));
    border-bottom-right-radius: calc(10px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .chips-options-buttons .quick-chips-amounts .quick-chips-amount:hover {
    background: #3d3d3d;
}

.custom-select-holder {
    display: flex;
    gap: calc(20px * var(--ui-scale));
    align-items: center;
}

#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slide-container {
    display: flex;
    gap: calc(20px * var(--ui-scale));
    flex: 1 0 70%;
    width: auto;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slide-container .rangeslider__handle {
    background: black;
    /*border-color: black;*/
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slide-container .slider-increment {
    flex-basis: calc(30px * var(--ui-scale));
    width: calc(30px * var(--ui-scale));
    height: calc(30px * var(--ui-scale));

    display: flex;
    justify-content: center;

    color: white;
    background: black;

    border-radius: calc(15px * var(--ui-scale));
    font-size: calc(30px * var(--ui-scale));
    font-weight: normal;

    cursor: pointer;
    line-height: 1;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slide-container .slider-increment:hover {
    background: #3d3d3d;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slide-container .slider-increment[data-type="reduce_by_bb"] {
    line-height: 0.8;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slide-container .slider {
    width: auto;
    flex: 1;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slide-container .rangeslider {
    flex: 1;
}
/* this newer implementation works well with all browsers */
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slide-container .slider {
    /*position: absolute;*/

    height: var(--vertical-slider-width);
    width: var(--vertical-slider-height);
    transform: rotate(-90deg);

    top: var(--vertical-slider-increments-height);
    bottom: calc(-1px * var(--ui-scale)); /* fits/covers bottom better*/
    margin: auto 0;
    padding: 0 !important;
    border: 0 solid;
}

#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slider-value {
    position: relative;
    flex-basis: 8ch;
    min-width: 8ch;

    padding: calc(5px * var(--ui-scale)) calc(10px * var(--ui-scale)) !important;
    font-size: calc(15px * var(--ui-scale)) !important;
    outline-color: white;
    min-height: calc(29px * var(--ui-scale));
    border-radius: calc(10px * var(--ui-scale));

    background: white;
    border: calc(1px * var(--ui-scale)) #000000 solid;
    color: black;

    text-align: right;
    transform: none;
    height: 3.5em;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slider-value::after {
    z-index: -1; /* has to be like this, otherwise it messes up events for input as it appears over them*/
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slider-value .chips-value-in-bb {
    font-size: calc(10px * var(--ui-scale)) !important;
    text-align: right;
    color: var(--clr-green3);
    z-index: 1;
    position: relative;
    line-height: 1.1;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slider-value:hover {
    transform: none;
    cursor: text;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slider-value .input-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slider-value .input-wrapper input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;

    padding-top: calc(17px * var(--ui-scale)) !important;
    padding-right: calc(8px * var(--ui-scale));

    background: none;
    text-align: right;
    font-size: calc(17px * var(--ui-scale)) !important;
    font-weight: bold;
    line-height: 1;

    border-radius: calc(10px * var(--ui-scale));
    border-color: transparent;
    outline: none;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .slider-value input:focus:focus-visible:focus-within,
#popupsHolder .popup-holder[data-type="chips_buy_in"] .slider-value input:focus,
#popupsHolder .popup-holder[data-type="chips_buy_in"] .slider-value input:focus-visible,
#popupsHolder .popup-holder[data-type="chips_buy_in"] .slider-value input:focus-within {
    outline: none !important;
    /*border-color: #bebebe !important;*/
    border-color: transparent !important;
}
/*
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slider-wrapper.is-large-number .slider-value .input-wrapper input {
    font-size: calc(14px * var(--ui-scale)) !important;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slider-wrapper.is-extra-large-number .slider-value .input-wrapper input  {
    font-size: calc(13px * var(--ui-scale)) !important;
}
*/
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slider-value .input-wrapper input {
    width: 100%;
}
/* TOD Oall in unnecessary? */
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select.is-all-in .slider-value .input-wrapper input {
    background: var(--clr-gold);
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select.is-all-in .slider-value .chips-value-in-bb {
    color: black;
}

#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slider-value {
    box-sizing: border-box;
    /*flex: 0 0 calc(30% - calc(20px * var(--ui-scale)));*/
    flex: 0 0 13ch;
    color: #ffffff;
    outline: none;

}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slider-value:after {
    border-color: transparent;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slider-value .fa-triangle {
    font-size: 0.7em;
    position: relative;
    top: calc(-2px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .slider-value .input-prefix {
    content: '$';
    position: absolute;
    left: calc(10px * var(--ui-scale));
    bottom: calc(9px * var(--ui-scale));
    margin: auto 0;
    height: max-content;
    font-size: calc(17px * var(--ui-scale)) !important;
    line-height: 1;
    font-weight: bold;
    color: #000;
}
.hide-currency-prefix .popup-holder[data-type="chips_buy_in"] .slider-value .input-prefix {
    content: '';
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .chips-select .slider-value .current-sett-value {
    padding-top: calc(7px * var(--ui-scale));
    display: block;
    padding-bottom: calc(3px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .footer {
    /*width: 100%;*/
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: calc(25px * var(--ui-scale)) calc(40px * var(--ui-scale));
    padding-bottom: calc(18px * var(--ui-scale));
    text-align: right;
    background: var(--clr-green6);

    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: none;
    font-size: calc(25px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .footer .buttons-holder .btn:first-child {
    margin-right: calc(8px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .btn {
    text-transform: uppercase;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .btn-primary {
    background: var(--clr-green5) !important;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .btn-secondary {
    background: var(--clr-red) !important;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .footer .extra-info {
    font-size: 0.7em;
}
#popupsHolder .popup-holder[data-type="chips_buy_in"] .footer .btn:not(.icon):not(.setting-boolean)::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));
}