:root {
    --clr-green6: #166238;
    --clr-pri: #ffffff;
    --clr-green3: #1A6F40;
    --clr-red: #e00102;
    --clr-green5: #1e7929;
    --default-border-radius: 10px;
}
#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: fixed;
	top: 0;
	left: 0;
	right: 0;

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

	z-index: 999;

	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:not(.full-viewport):first-child {
	background: rgba(0,0,0,0.4);
}
#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 .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));
    padding-right: 0; /* done by scroll-holder, which is present on all popups basically - what about on minis?*/
    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 .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));
}
#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 {
}
#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;
    border: none;
    transition: transform 200ms ease-in, color 0s, background 0s;
}
#popupsHolder .popup-holder[data-type="generic_notification"] .popup-content .btn:not(.icon):not(.setting-boolean).btn-tertiary {
    background: var(--clr-green5);
    padding: calc(5px * var(--ui-scale)) calc(20px * var(--ui-scale));
}
#popupsHolder .popup-holder .popup-content .btn:not(.icon):not(.setting-boolean):not(.active):not(.no-action):hover {
    transform: scale(0.98);
    filter: unset;
}
#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.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;
}

/* 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.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.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;
    font-weight: bold;

    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);*/
    box-sizing: content-box;
}
#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.content-loaded-async .popup-content {
    min-height: 300px;
}
#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;
}
#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.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 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;

    padding: 15px;
    width: max-content;
    margin: 0 auto;
}

#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[data-type="table_all_seats_taken"].mini-popup .popup-content .buttons-holder .btn:not(.icon).btn-secondary {
    background: #f0202c;
}
#popupsHolder .popup-holder[data-type="login_required"].mini-popup .popup-content .buttons-holder .btn:not(.icon).btn-secondary {
    background: #f0202c;
}
#popupsHolder .popup-holder[data-type="login_required"].mini-popup .buttons-holder {
    flex-direction: row;
}
#popupsHolder .popup-holder[data-type="login_required"].mini-popup p {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

#popupsHolder .popup-holder[data-type="login_required"].mini-popup .signup-bonus-img {
    display: inline-block;
    width: calc(241px * 0.5);
    height: calc(200px * 0.5);
    background: url('../../assets/images_nonopt/bonus_chips_signup_2.png');
    background-size: 100% 100%;
    margin-top: 15px;
    margin-bottom: 10px;
}
/* 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;
    padding: calc(40px * var(--ui-scale));
}
#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  .popup-content .buttons-holder .btn > span {
    font-size: 1.2em;
}

#popupsHolder .popup-holder.mini-popup.modal-popup .buttons-holder {
    flex-direction: row;
}
#popupsHolder .popup-holder.mini-popup.modal-popup .btn.conf-button.icon.yes {
    background: var(--clr-green5);
}
#popupsHolder .popup-holder.mini-popup.modal-popup .btn.conf-button.icon.no {
    background: var(--clr-red);
}
#popupsHolder .popup-holder.mini-popup.modal-popup .btn.conf-button.icon {
    padding: calc(5px * var(--canvas-scale));
    width: calc(26px * var(--canvas-scale));
    height: calc(26px * var(--canvas-scale));
    bottom: calc(2px * var(--canvas-scale));

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

    border: 1px solid white;
    border-radius: calc(10px * var(--canvas-scale));
    color: white;
    text-align: center;
    box-sizing: content-box;
}
#popupsHolder .popup-holder.mini-popup.modal-popup .btn.conf-button.icon:hover {
    cursor: pointer;
    filter: brightness(115%);
}
#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 .popup-content img {
    max-width: 100%;
}

#popupsHolder .popup-holder .popup-content .scroll-holder {
    /* this positions it better without too much padding on the right between scrollbar and end of popup */
    padding-right: calc(40px * var(--ui-scale));
    margin-right: calc(15px * var(--ui-scale));
}
#popupsHolder .popup-holder[data-type="avatar_customization"] .popup-content .scroll-holder {
    padding-right: calc(15px * var(--ui-scale));
}
#popupsHolder .popup-holder .popup-content h3 {
    margin-bottom: 0;
}
#popupsHolder .popup-holder .popup-content h3:first-child {
    margin-top: 0;
}
#popupsHolder .popup-holder .popup-content h3 + p {
    margin-top: 0;
}