:root {
    --table-preview-width: 321px;
}
.lobby-holder {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}
.lobby-left-column {
    flex: 1 1 100%;
    min-width: 0; /* prevents unnecessary overflow */
}
.lobby-right-column {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;

    position: sticky;
    align-self: flex-start;
    top: 0;

    /*flex-direction: column;*/
    flex-wrap: wrap;
    gap: 20px;
}
.lobby-right-column .banner-ad-holder {
    flex-basis: 100%;
    min-width: 300px;
    min-height: 200px;
}
.lobby-right-column:not(.table-preview-loaded) {
    opacity: 0;
    pointer-events: none;
}
.lobby {

}
.lobby-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.lobby-header .game-variant {
    flex: 0 0 auto;
    font-weight: bold;
    flex-shrink: 1;
    padding-right: 5px;
}
.lobby-header .game-variant > span {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}
.lobby-header .game-variant .refresh-info {
    display: none; /* decision was made to not display this */
    font-size: 0.6em;
    text-decoration: none;
    margin-top: 0.4em;
}
.lobby-header .game-variant .refresh-info span {
    min-width: 3ch;
    font-variant-numeric: tabular-nums;
}
.lobby-header .lobby-actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    gap: 13px;
}
.lobby-header .lobby-actions .join-our-discord a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.lobby-header .btn-shop {
    background: url('../../../../assets_common/images/icons/get_chips_icon.png?v=2');
    background-size: 100% 100%;
    border: none;
    border-radius: 0;
}
.lobby-header .btn-watch-ad {
    background: url('../../../../assets_common/images/icons/chips_ad_btn_no_text.png?v=2');
    background-size: 100% 100%;
    border: none;
    border-radius: 0;
    padding: 0 !important;
}
.lobby-header .btn-watch-ad .btn-watch-ad-label {
    font-size: 10px;
    font-weight: 600;
    position: relative;
    top: 1em;
}
.lobby-header .btn-watch-ad .btn-watch-ad-countdown {
    font-size: 10px;
    font-weight: 600;
    position: relative;
    top: 1em;
    color: #03ff42;
}
.lobby-header .lobby-actions:not([data-active-toggle-type="chips_only"]) .btn-shop {
    display: none;
}
.lobby-header .lobby-actions:not([data-active-toggle-type="chips_only"]) .btn-watch-ad {
    display: none;
}

.lobby-games-wrapper {
    position: relative;
    overflow-x: auto;
    padding-bottom: 7px; /* makes scrollbar more visible */
}
.games-table {
}
.games-table tr {
    display: flex;
    flex-wrap: nowrap;
}
.games-table th,
.games-table td {
    flex-grow: 1;
    flex-basis: 0;
    display: flex;
    align-items: center;
    font-size: 14px;
}
.games-table .table-actions {
    min-width: max-content;
    flex: 1.4;
    max-width: 8ch;
}
.games-table tr > :not(.table-actions) {
    flex-grow: 2;
}
.games-table tr > .table-name {
    flex-grow: 5.5;
    min-width: 23ch;
    padding-right: 0;
}
.games-table tr > .table-name .icon {
    margin-right: 0.5em;
}
.games-table tr > .table-players {
    flex-grow: 1.5;
    min-width: 8ch;
}
.games-table tr > .table-stakes {
    flex-grow: 3;
    min-width: 11ch;
}
.games-table tr > .table-avg-pot {
    min-width: 11ch;
    padding: 0.5em 0;
}
.games-table tr > .table-avg-stack {
    min-width: 11ch;
    padding-left: 0;
}
.games-table tr td.text-red {
    /*color: #e40d1a;*/
    /*color: var(--clr-red-1); !* my suggestion *!*/
    color: #FF5959; /* from Dylan's task */
}
.games-table tr td.text-orange {
    color: #ffa800;
}
.games-table tr td.text-green {
    color: #03ff42;
}
.games-table tr.was-refreshed td {
    animation: animateRefreshedRow 3 750ms ease-in-out;
}
.games-table tr.was-refreshed-is-full td {
    animation: animateRefreshedRowIsFull 1 1000ms ease-in-out;
}
.games-table tr.was-refreshed-subtle td {
    /*animation: animateRefreshedSubtle 1 750ms ease-in-out;*/
}
@keyframes animateRefreshedRow {
    0% {
        filter: brightness(100%);
    }
    50% {
        filter: brightness(115%);
    }
    100% {
        filter: brightness(100%);
    }
}
@keyframes animateRefreshedRowIsFull {
    0% {
        filter: sepia(100%) brightness(100%) hue-rotate(-20deg);
    }
    50% {
        filter: sepia(180%) brightness(110%) hue-rotate(-20deg);
    }
    100% {
        filter: sepia(0) brightness(100%) hue-rotate(0deg);
    }
}
@keyframes animateRefreshedSubtle {
    0% {
        filter: brightness(100%);
    }
    50% {
        filter: brightness(110%);
    }
    100% {
        filter: brightness(100%);
    }
}
.games-table tbody tr.is-loaded-in-preview td {
    background: var(--clr-green-5);
}
.games-table tbody tr:hover td {
    cursor: pointer;
    background: var(--clr-green-5);
}
.games-table tbody tr.this-player-in-room td {
    background: var(--clr-green-5);
}
/*.games-table tbody tr.this-player-in-room .table-actions .btn {
    background: var(--clr-green-2);
}*/
.table-info {
    position: relative;
    width: var(--table-preview-width);
    max-width: 100%;
    margin: auto 0;
    /*flex: 0 1 var(--table-preview-width);*/
    border: 1px solid var(--clr-white);
    border-radius: var(--border-radius-small);
    /*overflow: hidden;*/
}
.table-info .table-info-header {
    position: relative;
    padding: 10px 20px 10px 20px;
    background: var(--clr-green-1);
    text-align: center;
    border-bottom: 1px solid var(--clr-white);
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small);
}
.table-info .table-info-header .table-name {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
    /*min-height: 2.3em; !* reserve enough space for up to 2 rows of text*!*/
}
.table-info .table-info-header .close-table-info {
    position: absolute;
    top: 5px;
    right: 10px;
    font-weight: bold;
    color: var(--clr-white);
    font-size: 30px;

    cursor: pointer;
    transition: all 100ms ease-in;
}
.table-info .table-info-header .close-table-info:hover {
    transform: scale(1.1);
}
.table-info .table-preview {
    padding: 30px 20px;
    background: var(--clr-green-2);

    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}

.table-info .buyin-info {
    position: relative;
    padding: 10px 0;
    margin: 0 auto;
    top: -20px;
    text-align: center;
    font-size: 0.7em;
}

.table-info .table-waitlist {
    position: relative;
    padding: 10px 20px 10px 20px;
    background: var(--clr-green-1);

    left: -20px;
    right: -20px;
    bottom: -30px;
    width: calc(100% + 40px);
    border-bottom-right-radius: var(--border-radius-small);
    border-bottom-left-radius: var(--border-radius-small);
}

.table-info .table-waitlist > p {
    margin: 0 0 0.5em 0;
}
.table-info .table-waitlist .waitlist-players {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}
.table-info .table-waitlist .waitlist-players .waitlist {
    --player-ui-scale: calc(var(--canvas-scale) * var(--player-table-ui-scale) * var(--scale-table-size));
    position: relative;

    flex: 0 0 calc(50% - 20px);

    padding: calc(13px * var(--player-ui-scale));
    /* padding-left: calc(60px * var(--player-ui-scale)); */
    padding-left: calc(30px * var(--player-ui-scale));
    min-width: 16ch;
    min-height: calc(28px * var(--player-ui-scale));
    background: var(--player-info-bg);
    font-size: calc(24px * var(--player-ui-scale));
    line-height: calc(24px * var(--player-ui-scale));
    text-align: center;
    color: var(--player-info-text-clr);
    border: clamp(1px, calc(1.5px * var(--player-ui-scale)), 1.5px) solid var(--player-info-border-clr);
    border-radius: calc(15px * var(--player-ui-scale));
}

.table-info .table-waitlist .waitlist-players .waitlist.has-membership {
    --player-info-border-clr: var(--clr-gold);
}
.table-info .table-waitlist .waitlist-players .waitlist .info .username {
    min-width: 11ch;
    max-width: 11ch;
    font-size: calc(22px * var(--player-ui-scale));
    line-height: calc(24px * var(--player-ui-scale));
    overflow: hidden;
    margin-bottom: calc(5px * var(--player-ui-scale));
    /* max-width: calc(100% - 28px * var(--player-ui-scale)); */
    margin-left: calc(40px * var(--player-ui-scale));
    text-align: left;
    font-weight: inherit;
}

.table-info .table-waitlist .waitlist-players .waitlist .info .username a {
    font-weight: inherit;
}
.table-info .table-waitlist .waitlist-players .waitlist .info .desc {
    text-align: left;
    margin-left: calc(40px * var(--player-ui-scale));
    font-size: calc(18px * var(--player-ui-scale));
}
.table-info .table-waitlist .waitlist-players .waitlist .info .profile-avatar {
    --avatar-size: calc(88px * var(--player-ui-scale));
    position: absolute;
    top: 0;
    left: calc(-28px * var(--player-ui-scale));
    bottom: 0;
    margin: auto 0;
    border-radius: 50%;
    /* border: clamp(1px, calc(1.5px * var(--player-ui-scale)), 1.5px) solid var(--player-info-border-clr); */
    cursor: pointer;
}
.table-info .table-waitlist .waitlist-players .waitlist .info .profile-avatar::after {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border-radius: 50%;
    border: clamp(1px, calc(1.5px * var(--player-ui-scale)), 1.5px) solid var(--player-info-border-clr);
}
.table-info .special-event-note {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1em;
    width: 100%;
    box-sizing: border-box;
    transform: translateY(100%);

    font-size: 0.7em;
}
.table-info .special-event-note .yellow-text {
    font-weight: bold;
}
.pagination-holder {
    margin: 0 auto;
    text-align: center;
}
/* TEMPORARY for beta note */
.lobby-holder {
    margin-bottom: 10px;
}
.lobbies-beta-note {
    margin-top: 0;
    color: #ffff00;
}
.lobbies-beta-note a {
    color: #ffff00;
}
/*
.lobby-actions .btn[data-type="chips_only"]::after {
    content: 'NEW';
    position: absolute;
    top: 0;
    right: 3px;
    transform: translateY(-50%);
    background: black;
    color: white;
    padding: 5px;
    border-radius: 5px;
    pointer-events: none;
    font-size: 0.6em;
    line-height: 1;
    font-weight: 600;
}*/
@media (min-width: 1520px) {
    .games-table th,
    .games-table td {
        font-size: 16px;
    }
}