@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Ubuntu:wght@300;400;500;700&display=swap');

@fontFamily:"Ubuntu", "Poppins","Arial", sans-serif;

*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}

body{
    font-size:16px;
    font-family: @fontFamily;
    background:#111;
    color:#fff;
    --colorCTA:#54a0ff;
    --colorSuccess:#1dd1a1;
    --colorError:#ee5253;
    --colorSuccessRGB:29, 209, 161;
    --colorErrorRGB:238, 82, 83;
    --topBarHeight:50px;
}


#app{
    min-height:calc(100vh - var(--topBarHeight));
    .wrapper{
        padding:1rem 0;
    }
}


.wrapper{
    max-width:900px;
    margin:0 auto;
}

.btn{
    --btnBG:#333;
    padding:8px 16px;
    border-radius:6px;
    background:var(--btnBG);
    color:#fff;
    cursor:pointer;
    display: inline-block;
    text-decoration: none;
    border:2px solid transparent;
    transition:all 350ms ease;

    &.btn-cta{
        --btnBG:var(--colorCTA);
    }

    &.btn-white{
        --btnBG:#fff;
        color:#333;
    }

    &.btn-border{
        background:transparent;
        border-color: var(--btnBG);
        color:var(--btnBG);
    }

    &.btn-small{
        font-size:12px;
    }

    &:hover{
        opacity:0.8;
    }
}

.btn-holder{
    display:flex;
    flex-wrap: wrap;

    &>*{
        &:not(:last-child){
            margin-right:10px;
        }
    }
}

.game-container{


}

body{
    &.preview-at-end{
        &:not(.round-finish){
            .video-playback-holder .video-black-front{
                transition-duration: 100ms;
            }
        }
        .video-playback-holder .video-black-front{
            transition-duration: 1000ms;
            backdrop-filter: blur(6px);
        }
    }
    &.round-finish{
        .result-holder{
            opacity:1;
            transition-delay: 300ms;

            .js-skip-end-round{
                pointer-events: all !important;
            }

            .message-infos{
                top:35%;
                opacity:0;
                transition-delay: 1500ms;
            }
            .result-infos{
                top:50%;
                opacity:1;
                pointer-events: all;
                transition-delay: 2500ms;
            }

            
        }

        &.preview-at-end{
            .video-playback-holder .video-black-front{
                background: #1b181c55;
            }
        }
        

        #game-message{
            top: 60%;
            opacity:0;
            pointer-events: none;
        }
    }

    &.round-correct-answer{
        .video-playback-holder{
            box-shadow: 0 0 20px 7px rgba(var(--colorSuccessRGB),1);
            outline-color: var(--colorSuccess);
            background:var(--colorSuccess);
        }
    }
    &.round-wrong-answer{
        .video-playback-holder{
            box-shadow: 0 0 20px 7px rgba(var(--colorErrorRGB),1);
            outline-color: var(--colorError);
            background-color: var(--colorError);
        }
    }
    
}

.stats-overlay{
    //position:absolute;
    //top:var(--topBarHeight);
    //left:0;
    //background:#fff;
    //color:#333;
    line-height: 120%;
    font-size:13px;
    z-index:10;
}

.solo-result-data,.result-stats-data{
    display:flex;
    flex-wrap:wrap;

    --nbPerLine:5;
    padding:0.35rem;
    border:1px solid #595959;

    .user-stat-name{
        width:100%;
        margin-bottom:5px;
    }

    .user-stat:not(.user-stat-name){
        width:calc((100% / var(--nbPerLine)) - 8px);
        margin-right:8px;
    }
}

.result-holder{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity:0;
    transition:all 350ms ease;
    pointer-events: none;

    .message-infos{
        width: 100%;
        padding: 1rem 2rem;
        font-size: 42px;
        text-shadow: 0 0 15px rgba(0, 0, 0, 0.85);
        transition: all 1500ms ease;
        position:absolute;
        font-weight:bold;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        
    }

    .result-infos{
        position:absolute;
        top:60%;
        left:50%;
        width:100%;
        transform:translate(-50%,-50%);
        opacity:0;
        transition:all 1000ms ease;

        .data-cover{
            display:flex;
            justify-content: center;
            
            img{
                max-width:200px;
                //max-height:400px;
                max-height: 300px;
                object-fit:cover;
                box-shadow:0 0 15px rgba(0,0,0,.3);
            }
        }

        .data-series,.data-song-info{
         //filter:drop-shadow(0 0 15px rgba(0,0,0,.3));
         text-shadow:0 0 8px rgba(0,0,0,.8);
        }

        .data-song-info{
            //opacity:0.7;
            color:#bbbabb;
            margin-top:10px;

            .data-song-author{
                margin-top:6px;
            }
        }

        .data-series{
            font-weight:bold;
            margin-top:1rem;
            font-size:26px;
        }
        
        
    }
}



.video-playback-holder{
    display:flex;
    position:relative;
    padding-top:56.25%;
    background:#ACACAC;
    
    border-radius: 10px;
    overflow: hidden;

    transition:all 500ms ease;
    outline: 4px solid transparent;

    iframe{
        pointer-events: none;
    }

    &.hidden-veil{
        .video-black-front{
            opacity:0;
        }
    }
    &:not(.hidden-veil){
        .video-holder iframe{
            pointer-events: none;
        }
    }

    #game-message{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        color:#fff;
        transition:all 350ms ease;
        position:absolute;
        z-index: 5;
        width:100%;
        padding:1rem 2rem;
        font-size:42px;
        text-shadow:0 0 15px rgba(0,0,0,.85);
        font-weight:bold;
        text-align:center;
    }

    .js-skip-end-round{
        position:absolute;
        bottom:1rem;
        right:1rem;
        font-weight:bold;
        font-size:32px;
        z-index:5;
        width: 70px;
        height: 70px;
        display:flex;
        justify-content:center;
        align-items: center;
        filter:drop-shadow(0 0 5px rgba(0,0,0,.5));
        border-radius: 50%;
        pointer-events:none;
        z-index:8;
        cursor:pointer;
        background: radial-gradient(closest-side, #1b181c 79%, transparent 80% 100%), conic-gradient(#fff 0%, rgba(255,255,255,.1) 0);
        &:hover{
            opacity:0.8;
        }
    }

    .game-timer{
        position:absolute;
        bottom:1rem;
        left:1rem;
        font-weight:bold;
        font-size:32px;
        z-index:5;
        width: 70px;
        height: 70px;
        display:flex;
        justify-content:center;
        align-items: center;
        filter:drop-shadow(0 0 5px rgba(0,0,0,.5));
        --percentGameTimeLeft:0%;

        span{
            position:relative;
            z-index:3;
        }

        .progress-bar{
            display: flex;
            justify-content: center;
            align-items: center;
            position:absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(closest-side, #1b181c 79%, transparent 80% 100%), conic-gradient(#fff var(--percentGameTimeLeft), rgba(255,255,255,.1) 0);
            transition:background 350ms ease;
        }
    }

    .video-black-front{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index: 3;
        background:#1b181c;//#000;
        opacity: 1;
        transition:all 350ms ease;
        pointer-events:none;
    }

    #youtube-player{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
}

.input-zone-holder{
    --inputHeight:40px;
    margin-top:2rem;
display:flex;
align-items: center;
border-radius:10px;
overflow: hidden;
position:relative;

input{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.result-box{
    --inputValidationWidth:88px;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    box-shadow:0 0 5px rgba(0,0,0,.2);
    pointer-events: none;
    opacity:0;
    transition:all 350ms ease;
    z-index: 10;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    color:#333;
    padding: 10px 8px;
    font-size: 13px;

    max-width: calc(100% - var(--inputValidationWidth));

    .suggest-item{
        display:flex;
        align-items: center;
        span:not(.picto-holder){
            flex-grow:1;
            padding-right:10px;
        }   
        .picto-holder{
            display:flex;
            align-items: center;
        }
    }

    li{
        border-radius: 3px;
        padding: 8px 12px;
        width: 100%;
        list-style-type: none;

        &:hover{
            background: #efefef;
            cursor:pointer;
        }
    }
}

&.suggest-active{
    overflow: visible;

    input{
        transition:all 350ms ease;
        transition-delay: 50ms;
        border-bottom-left-radius:0px;
    }

    .result-box{
        transition-delay:75ms;
        opacity:1;
        pointer-events: all;
    }
}


    .input-holder{
        flex-grow: 1;

        input{
            width:100%;
            height:var(--inputHeight);
            border:0;
            
        }
    }
    .submit-holder{
        display:flex;
        justify-content: center;
        align-items: center;
        height:var(--inputHeight);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

input{
    outline:none;
}

input[type="text"]{
    padding:10px;
}

#top{
    display:flex;
    align-items: center;
    justify-content: space-between;
    height:50px;
    background:#222;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    padding:1rem;
}

.box-style{
        box-shadow:0 0 15px rgba(0, 0, 0, 0.3);
        background:#333;
        border:1px solid #595959;
        border-radius:15px;
        padding:1.5rem;
}


.rooms-list-holder{
    display:flex;
    flex-wrap:wrap;

    .room-item{
        width: 100%;
        .box-style;

        display:flex;
        align-items: center;
        
        .btn-holder{
            margin-top:1rem;
        }

        .room-title{
            font-weight: bold;
        }

        .room-id, .room-info{
            font-size: 11px;
            opacity: 0.7;
            margin-top: 5px;
        }

        .room-users{
            background:#fff;
            color:#333;
            padding:5px 10px;
            border-radius:8px;

            i{
                margin-right:5px;
            }
        }
        
        .room-left{
            width:50px;
            font-size:40px;
            color:#ACACAC;
            text-align:center;
            font-weight: 500;
        }
        .room-right{
            padding-left:1rem;
            //width:calc(100% - 50px);
            flex-grow:1;
        }
        .room-end{

        }

        &:not(:last-child){
            margin-bottom:1rem;
        }
    }
}

@media(max-width:900px){
    #app{
        .wrapper{
            padding:1rem 2rem;
        }
    }
}


.multiplayer-off{
    [data-multi="on"]{
        display:none !important;
    }
}

.multiplayer-on{
    [data-multi="off"]{
        display:none !important;
    }
}

.user-is-admin.multiplayer-on{
    [data-multi-admin="on"]{
        display:block !important;
    }
    [data-multi-admin="off"]{
        display:block !important;
    }
}


.user-is-admin{
    [data-admin="off"]{
        display:none !important;
    }
}
body:not(.user-is-admin){
    [data-admin="on"]{
        display:none !important;
    }
}

.item-frame{
    &:not(.no-style){
        aspect-ratio: 16/9;
        padding: 1.5rem;
        border-radius: 15px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        background: #333;
        border: 1px solid #595959;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .frame-title{
        font-size:32px;
        font-weight:bold;
        margin-bottom:1.5rem;
    }
    .btn-holder{
        margin-top:1.5rem;
    }
}

body:not(.player-is-ready){
    .game-container{
        &:before{
            opacity:1;
            pointer-events: all;
        }
    }
}

.game-container{
    position: relative;
    &:before{
        content:"";
        position: absolute;
        z-index: 5;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:#222;
        border-radius:15px;
        opacity:0;
        pointer-events: none;
        transition: all 1000ms ease;
    }
}

// Game status
body:not(.game-playing):not(.game-ended){
    .item-frame{
        &.end-frame,&.game-frame{
            //display:none !important;
            opacity:0;
            pointer-events: none;
        }
    }
}
body.game-playing{
    .item-frame{
        &.end-frame,&.start-frame{
            //display:none !important;
            opacity:0;
            pointer-events: none;
        }
    }
}
body:not(.game-playing){
    [data-for="game-playing"]{
        display:none !important;
    }
}
body.game-ended{
    .item-frame{
        &.game-frame,&.start-frame{
            //display:none !important;
            opacity:0;
            pointer-events: none;
        }
    }

    .end-frame.item-frame{
        z-index:7;
    }
}

.flex-column{
    display:flex;
    flex-direction: column;

    &.btn-holder{
        align-items: flex-start;
        justify-content: flex-start;
        &>.btn{
            &:not(:first-child){
                margin-top:10px;
            }
        }
    }
}

.debug-menu-holder, .stats-menu-holder{
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    --debugMenuWidth:300px;
    --boxShadowOpacity:0;
    
    

    &:not(.active){
        pointer-events: none;
        .debug-menu-content{
            transform:translateX(-100%);
        }
    }
    &.active{
        .debug-menu-button{
            transform:translateY(-50%) translateX(calc(var(--debugMenuWidth) - 8px));
        }
        --boxShadowOpacity:0.5;
    }

    .debug-menu-content{
        width:var(--debugMenuWidth);
        transition: all 350ms ease;
        background: #333;
        position: relative;
        z-index: 11;
        padding: 1.5rem;
        box-shadow:0 0 5px rgba(0,0,0,var(--boxShadowOpacity));
        border:1px solid #595959;
        border-left:0;
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;

        .btn{
            --btnBG:#111;
        }
        
    }

    .debug-menu-button{
        width:40px;
        height:40px;
        background:#fff;
        border-radius:50%;
        color:#333;
        cursor:pointer;
        display:flex;
        align-items: center;
        justify-content:center;
        pointer-events: all;
        position:absolute;
        top:50%;
        left:0;
        transform:translateY(-50%) translateX(-8px);
        transition:all 350ms ease;
        box-shadow:0 0 5px rgba(0,0,0,.3);
    }
}

.stats-menu-holder{
    right: 0;

    .debug-menu-button {
        left:auto;
        right:0;
        transform: translateY(-50%) translateX(8px);
    }
    .debug-menu-content{
border-left:1px solid #595959;
border-right:0;
border-radius:0;
border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
    }


    &:not(.active) .debug-menu-content {
        transform: translateX(100%);
      }

      &.active{
        .debug-menu-button {
            transform: translateY(-50%) translateX(calc(8px - var(--debugMenuWidth)));
          }
      }

    
}

.field-column{
    display:flex;
    flex-direction: column;

    &>.field{
        &:not(:last-child){
            margin-bottom:1rem;
        }
    }
}

.field{
    display:flex;
    flex-direction: column;
    --marginInput:7px;
    --inputHeight:32px;
    //--inputColor:;
    --inputPadding:6px 10px; 
    --inputFontSize:13px;
    --inputLineHeight:120%;
    --inputMinWidth:240px;

    &>span{
        line-height: 140%;
    }

    &.field-inline{
        flex-direction: row;
        align-items: center;
    }

    input[type="text"],input[type="email"],input[type="number"],select{
        margin-top:var(--marginInput);
        height:var(--inputHeight);
        font-size:var(--inputFontSize);
        line-height: var(--inputLineHeight);
        padding:var(--inputPadding);
        min-width:var(--inputMinWidth);
        width:var(--inputMinWidth);
    }
    textarea{
        margin-top:var(--marginInput);
        resize: vertical;
        max-height:400px;
        font-size:var(--inputFontSize);
        line-height: var(--inputLineHeight);
        padding:var(--inputPadding);
    }
    input[type="checkbox"]{
        margin-right:var(--marginInput);
    }
}

.field-column{
    flex-grow:1;
    
}

.blindtest-options{
    width: 70%;
    display: flex;
    align-items: center;

    .field-column{
        padding:1rem;
    }
}

#footer{
    background: #1a1a1a;
    padding: 1.5rem 1rem;
    box-shadow: inset 0 5px 5px rgba(0,0,0,0.15);
    position:relative;
    text-align: center;
    font-size:11px;

    p{
        margin:3px 0;

        &:not(:first-child){
            margin-top:8px;
        }
    }

    a{
        color:currentColor;
        text-decoration: underline;
    }
}

.options-triggerer{
    position:absolute;
    right:1rem;
    top:50%;
    transform:translateY(-50%);
    color:#fff;
    z-index: 5;
    font-size: 28px;
    cursor:pointer;

    i{
        transition: all 350ms ease-in-out;
    }

    &:hover{
        i{
            transform:rotate(90deg);
        }
        
    }
}

.songs-list{
    display:flex;
    flex-wrap:wrap;
    --nbPerList:3;
    --maxHeightImage:100px;

    .song-item{
        .box-style;
        display:flex;
        align-items:center;
        width:calc((100% / var(--nbPerList)) - 1rem);
        margin:.5rem;
        padding:0.5rem;

        .image-holder{
            display:flex;
            img{
                max-height: var(--maxHeightImage);
                border-radius:5px;
                box-shadow:0 0 4px rgba(0,0,0,.2);
            }
        }

        .content-holder{
            padding-left:10px;
            font-size: 11px;
            h3{
                //margin-bottom:5px;
                font-size:14px;
            }
            p{
                margin-top: 5px;
                opacity: 0.7;
            }
        }

    }
}


.stats-menu-holder .debug-menu-content{
    padding-top: 12px;
    padding-bottom: 12px;
    font-size:13px;

    h4{
        margin-bottom:4px;
    }
}
.solo-result-data, .result-stats-data{
    border-radius: 4px;
}

.user-stat{
    .user-stat-value{
        padding-left:6px;
    }
}


.blindtest-options-holder{
    width:80%;
    margin: 0 auto;

    .blindtest-options{
        width:100%;

        .field-column{
            width:50%;
        }
    }
}

.players-overlay{
    .player-item,.user-item{
        display:flex;
        align-items:center;
        --iconSize:10px;
        --iconColor:#fff;
        padding: 2px 0;

        &[data-answered="false"]{
            --iconColor:#e74c3c;
        }
        &[data-answered="true"]{
            --iconColor:#2ecc71;
        }

        .user-name{
            display:flex;
            align-items: center;

            .picto-item.color-gold{
                margin-left:8px;
                color:#f1c40f;//#d7bf85;
            }
        }
        .user-name-infos{
            margin-left:8px;
            font-size: 8px;
        }
        .user-name-picto{
            width:var(--iconSize);
            height:var(--iconSize);
            border-radius:50%;
            margin-right:8px;//5px;
            display:block;
            background:var(--iconColor);//#fff;
        }

        &.own-user{
            font-weight:bold;
        }
    }
}


.popup-container{
    --popupWidth:800px;

    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index: 20;
    transition:all 350ms ease;
    display:flex;
    align-items:center;
    justify-content:center;

    &:not(.active){
        opacity:0;
        pointer-events: none;
    }

    .popup-item{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        z-index:3;
        transition:all 750ms ease;
        text-align:center;
        max-width:var(--popupWidth);
        width:100%;

        &:not(.active){
            top:calc(50% - 20px);
            
            .popup-content{
                display:none;
            }
        }

        .popup-content{
            transition:top 750ms ease;
            position:relative;
            background:#222;
            box-shadow:0 0 15px rgba(0,0,0,0.3);
            top:0;
            padding:1.5rem;
            border-radius:1rem;
            border:1px solid #595959;
            width:100%;
        }

        .title-item{
            font-size:24px;
            font-weight:bold;
        }
    }

    .popup-background{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.5);
        z-index:2;
        cursor:pointer;
    }
}


.field-item{
    input:not([type="submit"]){
        width:250px;
        outline:none;
        border:0;
        border-radius:8px;

    }
}

.end-result-data{
    width:75%;

    .player-results-list{
        display:flex;
        flex-wrap:wrap;
justify-content: center;
        --nbPerLine:5;
        --itemMargin:10px;

        .player-result-item{
            background:#fff;
            color:#333;
            box-shadow:0 0 15px rgba(0,0,0,.2);
            width:calc((100% / var(--nbPerLine)) - (2 * var(--itemMargin)));
            margin:var(--itemMargin);
            padding:1rem;
            border-radius:10px;
            text-align:center;
            cursor: pointer;
            border:2px solid hsla(0deg, 0%, 100%, 0.6);
            position:relative;


            .username{
                font-weight:bold;
            }

            .more-data,.ranked-text{
                display:none;
            }

            .more-data{
                pointer-events: none;
                opacity:0;
                transition:all 350ms ease;

                position: absolute;
                top:100%;
                left:0;
                width: 100%;
                background: #fff;
                font-size: 8px;
            }

            &:hover{
                .more-data{
                    display:block;
                    opacity:1;
                }
            }

            .ranked-text{
                position:absolute;
                top:0;
                left:50%;
                background:#fff;
                color:#333;
                border:2px solid #333;
                border-radius: 5px;
                padding: 3px 7px;
                font-size:9px;
                transform:translate(-50%,-50%);
            }


            &:nth-child(1),&:nth-child(2),&:nth-child(3){
                --nbPerLine:3;

                .ranked-text{
                    display:flex;
                }
            }

            &:nth-child(1){
                background:#D4AF37;
            }
            &:nth-child(2){
                background:#C0C0C0;
            }
            &:nth-child(3){
                background:#CD7F32;
            }
        }
    }
}


    .results-list-holder:not(.animated) .results-list{
        transform:translateY(10px);
        opacity:0;
    }

.results-list-holder{
    display:flex;
    flex-wrap:wrap;
    --nbPerLine:6;
    --bgColor:#333;
    --colorItem:#888;

    .results-list{

        &.results-list-success{
            --colorItem:#2ecc71;
        }
        &.results-list-error{
            --colorItem:#e74c3c;
            --transitionDelay:200ms;
        }
        &.results-list-streak{
            --colorItem:#8e44ad;
            --transitionDelay:300ms;
        }
        &.results-list-best{
            --colorItem:#d7bf85;
            --transitionDelay:400ms;
        }
        &.results-list-percent{
            --colorItem:#3498db;
            --transitionDelay:500ms;
        }
        &.results-list-number{
            --colorItem:#2980b9;
            --transitionDelay:600ms;
        }


        .icon-holder{
            position:absolute;
            top:0;
            left:50%;
            transform:translate(-50%,-50%);
            padding:4px;
            background:var(--bgColor);
            border:3px solid var(--colorItem);
            font-size: 14px;
            text-align: center;
            width: 40px;
            height: 30px;
            border-radius: 5px;
            box-shadow:0 0 10px rgba(0,0,0,.4);
        }

        --transitionDelay:100ms;
        position:relative;
        width:calc((100% / var(--nbPerLine)) - 1rem);
        border-radius:15px;//5px;
        margin:0.5rem;
        border:3px solid var(--colorItem);
        padding:1.5rem;
        box-shadow: 0 0 10px rgba(0,0,0,.3);
        display:flex;
        align-items: center;
        justify-content: center;
        background: #222;
        transition:all 350ms ease;
        transition-delay: var(--transitionDelay);

        span{
            padding-top:7px;
            font-weight: bold;
            font-size: 18px;
        }
    }
}

.round-counter{
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    border: 2px solid #fff;
    border-radius: 10px;
    padding: 5px 10px;
}

.btn-spacer{
    height:20px;
    width:100%;
}

.btn-holder{
    .waiting-for-host{
        width:100%;
        text-align: center;
    }
}

.empty-room-text{
    opacity: 0.5;
    margin-top: 0.5rem;
    font-size: 14px;
}

#page-debug{
    &.empty-room{
        .room-infos-list,.room-options-infos{
            display:none;
        }
    }
}

.picto-holder{
    display:inline-block;
    --pictoSize:16px;
    min-width: var(--pictoSize);
    min-height: var(--pictoSize);
}