*,
::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
 
/* Chrome */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button { 
	-webkit-appearance: none;
	margin:0;
}
 
/* Opéra*/
input::-o-inner-spin-button,
input::-o-outer-spin-button { 
	-o-appearance: none;
	margin:0
}


::-webkit-scrollbar{
    display:none;
}

body{

}


#main-container{
    font-family: 'Quicksand', sans-serif;
    display:flex;
    position: relative;
}
        #main-container>img{
            position:absolute;
            z-index:5;
            top:5px;
            /*transform:translateX(-25vw);*/
            left:25vw;
            transform:scaleX(-1)


        }
        #locaux-container,#visiteurs-container{
            width:50vw;
            height:100vh;
            line-height: 100vh;
            text-align: center;
            font-size:550px;
            border:solid 1px black;
            
            position:relative;
        }
        #locaux-container{
            background-color: rgb(41, 109, 235);
            border-right-width: 2px;
        }
        #visiteurs-container{
            background-color: red;
            border-left-width: 10px;
        }

        .couleur{
            position: absolute;
            top:0;
            width:80px;
            height:80px;
            z-index:3;
        }
                #locaux-container .couleur{
                    left:0;
                }
                #visiteurs-container .couleur{
                    right:0;
                }
        .moins,
        .masque-moins{
            position: absolute;
            bottom:0;
            width:80px;
            height:80px;
        }
        .moins{
            border:2px black solid;
            line-height:80px;
            text-align:center;
            font-size:50px;
        }
        .masque-moins{
            z-index:5;   /* pour empêcher Google sur smartphone de proposer de lancer une recherhce quand on appuie sur -1  */
        }
            #locaux-container .moins,
            #locaux-container .masque-moins{
                left:0;
                
            }
            #visiteurs-container .moins,
            #visiteurs-container .masque-moins{
                right:0;
            }
    .score{
        position: absolute;
        z-index:3;
        text-align: center;
        width:100%;
        }

    #raz,
    #timer-raz,
    #timer-hide-show,
    #service{
        position:absolute;
        height:80px;
        /* line-height:75px; */
        background-color:gray;
        border:solid 1px black;
        text-align: center;
        bottom:0;
        z-index:4;
        text-align:center;
        cursor:pointer;
    }
    #raz{
        width:80px;
        left:50vw;
        /*translate: -115px;*/
        translate: -74px;
        line-height:75px;        
    }
    #service{
        width:80px;
        left:50vw;
        /*translate: -115px;*/
        translate: 4px;
        line-height:75px;        
    }
    #timer-raz{
        width:80px;
        left:50vw;
        translate: -35px;
        line-height:75px;        
    }
    #timer-hide-show{
        width:80px;
        left:50vw;
        translate: 45px;
        line-height:40px;
        text-wrap: balance;
    }
    
    #timer-mask{
        position:absolute;
        height: 150px;
        width:500px;        
        top:0;
        z-index:3;
        left:50vw;
        translate: -250px;
        cursor:pointer;        
    }
    #timer{
        position:absolute;
        height:150px;
        line-height:140px;
        font-size:160px;
        width:500px;        
        border:solid 1px white;
        text-align: center;
        top:0;
        z-index:2;
        left:50vw;
        translate: -250px;
        background-color:black;
        color:white;
    }
            #timer-mask .add-minutes,
            #timer-mask .add-seconds,
            #timer-mask .rmv-minutes,
            #timer-mask .rmv-seconds{
                position:absolute;
                height:50px;
                width:50px;
                /* border:solid 1px white; */
                z-index:4;
                cursor:pointer;
            }
                    #timer-mask .add-minutes,
                    #timer-mask .add-seconds{
                        top:0px;
                    }
                    #timer-mask .add-seconds,
                    #timer-mask .rmv-seconds{
                        right:0px;
                    }
                    #timer-mask .add-minutes,
                    #timer-mask .rmv-minutes{
                        left:0px;
                    }
                    #timer-mask .rmv-minutes,
                    #timer-mask .rmv-seconds{
                        bottom:0px;
                    }
                    #play,
                    #stop{
                        position:absolute;
                        z-index: 4;                       
                        top:50px;
                        color:white;
                        height:50px;
                        line-height: 50px;
                        width:50px;
                        font-size:45px;
                        text-align:center;
                    }
                    #play{
                        right:0px;
                        display:none;
                    }
                    #stop{                        
                        left:0px;
                    }
                    .play-stop-hidden{
                        display:none;
                    }
.couleur,
.masque-moins,
.selected_color,
#raz{
    cursor:pointer;
}
.mask-service{
    position: absolute;
    border:solid 20px black;
    width: 95%;height:80%;
    z-index:0;
    top:10%;
    left:15px;
    border-radius:800px;
}



    /* select couleur  */
    .couleur>div{
        position:absolute;
        display:none;
        width:100%;
        top:50px;
        z-index:4;
    }
    .couleur>div>div{
        height:50px;
        z-index:5;
        border-style:solid;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-right-width: 1px;
        border-top-width: 0px;
    }
    .couleur>div>div:first-of-type{
        border-top-width: 1px;
    }
    .selected_color{
        z-index:6;
    }


@media screen and (max-width: 1280px) and (orientation: landscape){

    #locaux-container,#visiteurs-container{
        font-size:520px;
    }

}