/*
Keep very simple/general and reusable CSS classes here (i.e. "add-on classes" with one or very few properties)
*/
.disabled {
    pointer-events: none;
    opacity: 0.8;
}
.not-displayed {
    display: none !important;
}
.hidden {
    opacity: 0;
    pointer-events: none;
}
.not-available {
    display: none !important;
}
.force-in-front {
    z-index: 9 !important;
}
.force-in-front-all {
    z-index: 9999 !important;
}
#playTable .player.force-in-front-all,
#playTable .player.is-this-player.force-in-front-all,
#playTable .card.force-in-front-all,
#playTable .player-icons.force-in-front-all,
#playTable .action-timer.force-in-front-all {
    /* specific elements that show up on win screen over the popup, have a specific (lower) z index, so that they do NOT show over all popups, but just over the win popup)*/
    /* win popup is 9, other popups are 10, but are further in DOM anyway */
    z-index: 10 !important;
}
.no-pointer-events {
    pointer-events: none !important;
}
.pointer-cursor {
    cursor: pointer;
}
.over-basic-ui {
    z-index: 99;
}
.no-margin {
    margin: 0 !important;
}
.flex-holder {
    display: flex;
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-holder-column {
    display: flex;
    flex-direction: column;
}
.flex-column { /* defaults to equally wide columns always)*/
    flex: 1 1 0;
}
.flex-grow-1 {
    flex-grow: 1;
}
.col-l {
    margin-right: auto;
}
.col-r {
    margin-left: auto;
}
.col1 {
    flex-grow: 1;
}
.col2 {
    flex-grow: 2;
}
.col3 {
    flex-grow: 3;
}
.col4 {
    flex-grow: 4;
}
.col5 {
    flex-grow: 5;
}
.col6 {
    flex-grow: 6;
}

.margin-left-10px {
    margin-left: calc(10px * var(--ui-scale));
}
#game_content .margin-right-auto {
    margin-right: auto;
}
#game_content .margin-left-auto {
    margin-left: auto;
}

.no-transition {
    transition: none !important;
}
:root {
    --logo-holder-scale: 0.4;
}
.logo-holder {
    color: white;
    font-size: calc(100px * var(--canvas-scale));
    line-height: 1.2;
    font-weight: bolder;
    opacity: 0.6;

    width: calc(1428px * var(--logo-holder-scale) * var(--canvas-scale));
    height: calc(186px * var(--logo-holder-scale) * var(--canvas-scale));
    max-width: 80%;

    background: url('../images/misc/poker_patio_logo.png?v=3') no-repeat center center;
    background-size: 100% 100%;
/*
    filter: drop-shadow(calc(-0.01em * var(--canvas-scale)) calc(-0.02em * var(--canvas-scale)) calc(0.02em * var(--canvas-scale)) rgba(255,255,255, 0.7))
            drop-shadow(calc(0.02em * var(--canvas-scale)) calc(0.01em * var(--canvas-scale)) calc(0.02em * var(--canvas-scale)) rgba(0,0,0, 0.9));*/
}
.logo-holder span {
    color: var(--btn-fold-bg);
}
img {
    max-width: 100%;
}
.text-center {
    text-align: center;
}
.numeric-span {
    font-variant-numeric: tabular-nums;
}
.paragraph {
    margin: 1em 0;
}
.paragraph.thicker {
    font-size: 0.8em;
    font-weight: 600;
}
.paragraph:first-child {
    margin-top: 0;
}
.paragraph:last-child {
    margin-bottom: 0;
}
.paragraph.thicker:last-child {
    margin-top: 1.5em;
}
.fit-to-parent {
    display: inline-block;
    width: 100%;
    height: 100%;
}
a.fit-to-parent {
    color: inherit;
    text-decoration: none;
}
a.fit-to-parent:active,
a.fit-to-parent:hover,
a.fit-to-parent:visited {
    color: inherit;
}

a.inside-paragraph {
    color: var(--clr-yellow);
}
a.inside-paragraph:hover {
    color: var(--clr-black1);
}
.medium-emoji {
    font-size: 1.5em;
    vertical-align: middle;
}
.large-emoji {
    font-size: 2em;
    vertical-align: middle;
}
.x-large-emoji {
    font-size: 2.5em;
    vertical-align: middle;
}


/* Loaders */
.loader-holder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background: rgba(0,0,0,0.5);
}
.loader-holder.form-loader {
    display: flex;
    justify-content: center;
    bottom: -3px;
    align-items: center;
    border-radius: 9px;
}
.loader-holder.form-loader .fa-spinner {
    font-size: 100px;
    color: #ffffff;
}
/* END Loaders */