.headLayoutWrapper {
    flex-direction: column;
}


/*** OFFLINE DISPLAY ***/
.ux-layout[data-zone='offline'] {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0px;
    top: 0px;
    z-index: 100;
    --offline-bg:#FEE300;
}

.ux-layout[data-zone='offline'] .ux-content {
    position:relative;
    height: 100%;
    top: var(--header-height);
}

.ux-layout[data-zone='offline'] .ux-content {
    background: var(--offline-bg);
}
.ux-layout[data-zone='offline'] .ux-content .waitimg{
    position:relative;
    text-align: center;
    z-index: 100;
}
.ux-layout[data-zone='offline'] .ux-content .waitimg img {
    max-width: 80%;
    width:50vh;
    filter: grayscale(1);
}
.ux-layout[data-zone='offline'] .ux-content .circle{
    position: absolute;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: black;
    animation: ripple 15s infinite;
    box-shadow: -8px -8px 20px 6px var(--offline-bg);
}

.ux-layout[data-zone='offline'] .ux-content .small{
    height: 60vh;
    right: -10vw;
    bottom: -10vh;
}
.ux-layout[data-zone='offline'] .ux-content .medium{
    height: 70vh;
    right: -10vw;
    bottom: -10vh;
}
.ux-layout[data-zone='offline'] .ux-content .large{
    height: 80vh;
    right: -10vw;
    bottom: -10vh;
}
.ux-layout[data-zone='offline'] .ux-content .xlarge{
    height: 90vh;
    right: -10vw;
    bottom: -10vh;
}
.ux-layout[data-zone='offline'] .ux-content .xxlarge{
    height: 100vh;
    right: -10vw;
    bottom: -10vh;
}
@media (min-aspect-ratio: 1/1) {
    .ux-layout[data-zone='offline'] .ux-content .small{
        height:unset;
        width: 60vw;
    }
    .ux-layout[data-zone='offline'] .ux-content .medium{
        height:unset;
        width: 70vw;
    }
    .ux-layout[data-zone='offline'] .ux-content .large{
        height:unset;
        width: 80vw;
    }
    .ux-layout[data-zone='offline'] .ux-content .xlarge{
        height:unset;
        width: 90vw;
    }
    .ux-layout[data-zone='offline'] .ux-content .xxlarge{
        height:unset;
        width: 100vw;
    }
    .ux-layout[data-zone='offline'] .ux-content .waitimg img {
        width:50vw;
    }
}

.ux-layout[data-zone='offline'] .ux-content .shade1{
  opacity: 0.1;
}
.ux-layout[data-zone='offline'] .ux-content .shade2{
  opacity: 0.2;
}

.ux-layout[data-zone='offline'] .ux-content .shade3{
  opacity: 0.4;
}

.ux-layout[data-zone='offline'] .ux-content .shade4{
  opacity: 0.6;
}

.ux-layout[data-zone='offline'] .ux-content .shade5{
  opacity: 0.7;
}

@keyframes ripple{
  0%{
    transform: scale(0.8);
  }
  50%{
    transform: scale(1.2);
  }
  100%{
    transform: scale(0.8);
  }
}
/*** END OFFLINE DISPLAY ***/

.co_play .zone_keys .lightbg {
    background-color:rgba(255, 255, 255, .5);
    color: #111521;
}
.zone_keys .you {
    outline: solid 2px #90cf2c !important;
}

.zone_keys [data-trait]:after, .zone_keys .points, .zone_keys .quality {
    box-shadow: -1px -1px 7px 4px #333;
}
.zone_keys .you:after, .zone_keys .you .points, .zone_keys .you .quality {
    background-color: #90cf2c !important;
    font-weight: bold;
    color:#FFF !important;
}
.co_play .zone_keys .lightbg .points, .co_play .zone_keys .lightbg .quality {
    color:#FFF;
}

.table .fancy {
    font-family: "Luckiest Guy", cursive;
    font-variant: petite-caps;
    font-size:25px;
    text-shadow: 2px 2px 0px #000, -1px -1px 0px #000, 0px -1px 0px #000, -1px 0px 0px #000, 0px -1px 1px #000, -1px 1px 0px #000;
}
.co_play .zone_ux_bottom {
    width:100%;
    height:3.4rem;
    display:flex;
    position:sticky;
    bottom:1.5em;
}
.co_play .zone_ux_bottom .ux-left {
    width:50%;
    height:100%;
    position:relative;
    background:rgba(0,0,0,0.5);
    border-radius: 1rem 0px 0px 1rem;
}
.co_play .zone_ux_bottom .ux-right {
    width:50%;
    height:100%;
    position:relative;
    background:rgba(0,0,0,0.5);
    border-radius: 0px 1rem 1rem 0px;
}

.co_play .zone_ux_bottom .ux-middle{
    position:absolute;
    z-index:2;
    top:-1rem;
    width:6rem;
    height:6rem;
    left:50%;
    transform: translateX(-50%);
}

.co_play .btn-big {
    width:100%;
    height:100%;
    left:-0.2em;
    top:-0.2em;
}
.ux-left .btn.disabled, .ux-right .btn.disabled {
    top:-0.2em;
}
.co_play .ux-middle .btn-big {
    border-radius:1em;
    overflow: hidden;
}
.btn-big.icon-big::before {
    font-size:2.2rem !important;
}
.ux-middle .btn-big.icon-big::before {
    margin-top: 0.8em;
}

.btn .points{
    background-color: var(--btn-color);
    line-height: 1.8;
    height: 2.25rem;
    width:100%;
    top:0px;
    padding-right: 7px;
    padding-left: 7px;
    position: absolute;
    text-align:center;
    border-radius: 1em 1em 0px 0px;
    box-shadow:1px 1px 1em;
}
.btn.disabled .points{
    filter:grayscale(1);
}
.mobile .btn .points {
    line-height: 2.2;
}

.ux-button { 
    width:3.2rem;
    height:3.2rem;
}
.ux-button a {
    border-radius:0px 0px 0px 0px;
}
.ux-left .ux-button:first-child a {
    border-radius:1rem 0px 0px 1rem;
}
.ux-right .ux-button:first-child a {
    border-radius:0px 1rem 1rem 0px;
}
.ux-left, .ux-right {
    display:flex;
}
.ux-right {
    flex-direction:row-reverse;
}

.co_play {
    padding: 0.3rem;
}
.prizePool .table .col1 {
    width:14%;
}
.prizePool .table .col2 {
    width:14%;
}
footer {
    display:none;
    visibility:hidden;
}
@media (min-width: 700px){
    .headLayoutWrapper {
        flex-direction: unset;
    }
    @media (min-width: 1100px){
        .co_play {
            padding: 2rem;
        }
        .co_play .zone_ux_bottom {
            height:5rem;
        }
        .co_play .zone_ux_bottom .ux-middle{
            width:8rem;
            height:8rem;
        }
        .btn-big.icon-big::before {
            font-size:4rem !important;
        }
        .ux-middle .btn-big.icon-big::before {
            margin-top: 0.5em;
        }
        .ux-button {
            width:5rem;
            height:5rem;
        }
    }
}
.co_play .zone_ux_top {
    width:100%;
    min-height:4rem;
    display:flex;
    position:relative;
}
.co_play .zone_ux_top .ux-tier {
    width:33.33%;
    height:100%;
    position:relative;
    background:rgba(0,0,0,0.5);
    padding:1em;
}
.co_play .zone_ux_top .ux-tier:first-child {
    border-radius: 1rem 0rem 0rem 1rem;
    border-right:solid 1px #fff;
}
.co_play .zone_ux_top .ux-tier:last-child {
    border-radius: 0rem 1rem 1rem 0rem;
    border-left:solid 1px #fff;
}
@media (max-width: 500px){
    
    .btn-big.icon-big::before {
        font-size:1.6rem !important;
    }
    .co_play .zone_ux_top .ux-tier {
        width:50%;
    }
    .co_play .zone_ux_top .ux-tier:nth-child(2) {
        border-radius: 0rem 1rem 1rem 0rem;
        border-left:solid 1px #fff;
    }
    .co_play .zone_ux_top .ux-tier:last-child {
        display:none;
        visibility:hidden;
    }
    
}
.iconr {
    margin-right:0.5em;
}
.co_play .ux-tier .icon-slack:before {
    position: relative;
    top: 0.1rem;
    font-size: 14px;
}

.co_play .ux-tier .floatR{
    margin: 0;
}/*
.co_play .ux-tier a.floatR{
    padding:.05rem 0.8rem;
    font-size: 20px;
    top:0;
    
}*/

.co_play .ux-middle .timer-layout {
    background:rgba(255,255,255,0.3);
    position:absolute;
    left:0;
    top:1rem;
    width:100%;
    height:25%;
}
.btn.white:hover {
    color:#222 !important;
}
.btn.white.disabled {
    color:#FFF !important;
}
.co_play .inner-content {
    display:flex;
    flex-flow:wrap;
}
.co_play .ux-tier:not(.open) .inner-content {
    height:5.6em;
    overflow:hidden;
}
.co_play .ux-tier.open {
    border-radius:0rem 0rem 1rem 1rem;
}
.co_play .ux-tier.open:first-child {
    border-radius: 1rem 0rem 1rem 1rem;
}
.co_play .ux-tier.openlast-child {
    border-radius: 0rem 1rem 1rem 1rem;
}
.co_play .inner-content .info-content {
    width:50%;
}
.co_play .inner-content .info-content-full, .mobile .co_play .inner-content .info-content {
    width:100%;
}
.co_play .inner-content .info-content a {
    width:96%;
}
.pool-card .iconstatus {
    background-color:#FFF;
    color:#222;
    margin-right:0.4em;
    border-radius:10em;
    display:inline-flex;
}
.pool-card .iconstatus.icon-playback-pause {
    background-color:#efa615;
    color:#fff;
}
.pool-card .iconstatus.icon-playback-play {
    background-color:#90cf2c;
    color:#fff;
}
.pool-card:not([data-status=over]) .iconstatus.icon-playback-stop {
    color:#DB1E55;
}
.pool-card .iconstatus:before {
    padding:5px;
}
.inner-content .live-activities {
    position:relative;
    width:100%;
}
.inner-content .live-activity {
    font-family: "Luckiest Guy",cursive;
    font-variant: petite-caps;
    position:absolute;
    height:100%;
    width:100%;
    padding:0.3em 0.2em 0.2em 0.6em;
    border-radius : 0.5rem;
    background-color:#FFF;
    color:#999;
    box-shadow:inset 4px 3px 5px #222;
}
.live-activity .h2-style {
    font-size:25px;
}
.top_page {
    margin-top:2em;
}

.ant-with-shadow {
    text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}
.co_play .btn-bottom {
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    color: #000;
    text-decoration: none;
    bottom: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 2px 2px 0px #000, -1px -1px 0px #000, 0px -1px 0px #000, -1px 0px 0px #000, 0px -1px 1px #000, -1px 1px 0px #000;
    transition: transform .2s;
}
.co_play .btn-bottom:hover {
    transform: scale(1.3) translateX(-45%);
}
.co_play .btn-bottom .icon::before {
    top:0.22em;
    position:relative;
}
.player img {
    border-radius:20px;
    margin-right:1em;
}
.player {
    position:relative;
    font-weight:bold;
}
.player span {
    position:relative;
    top:-0.6em;
}
.leaderboard .table .ligne.you {
    background-color: rgba(140, 207, 44, .7) !important;
}

.inner-content .participation-user {
    margin-left:1rem;   
}

body:not(.mobile) .mobileOnly {
    display:none;
    visibility:hidden;
}
.mobile .ux-tier .intitule {
    display:none;
    visibility:hidden;
}
.mobile .co_play .ux-tier h2 {
    margin-bottom:0.3rem;
}
.mobile .co_play .ux-tier:not(.open) .inner-content {
    height:6em;
}
.mobile .co_play .ux-tier h2 a {
    min-height:unset;
}
.mobile .co_play .live-activity .h2-style {
    font-size:16px;
}
.middle_page {
    margin-bottom:2em;
}
.zone_keys a.azone {
    width:100%;
    height:100%;
    position:absolute;
}