*{
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

#banner {
    max-height: 7vh;
    overflow: hidden;
}

.relative{
    position: relative;
}

.w05{width: 5%;}
.w10{width:10%;}
.w20{width:20%;}
.w30{width:30%;}
.w40{width:40%;}
.w50{width:50%;}
.w55{width:55%;}
.w60{width:60%;}
.w70{width:70%;}
.w80{width:80%;}
.w90{width:90%;}
.w100{width:100%;}

.hide{
    display:none;
}
.line-input{
    margin: 10px;
}
.lab20{float:left;width:20%;font-weight: bolder;}
.lab30{float:left;width:30%;font-weight: bolder;}


.obligatoire:after{
    content:'  *';
    color:red;
    font-size: 1.25em;
} 

.border-white{
    border: 1px solid #000000;;
}

#container_page{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px;
} 

.scroll-sm tbody, p.scroll-sm{
    display: block;
    width: 100%;
    max-height: 150px;
    overflow: auto;

    
}

.scroll tbody {
    display: contents ;
    width: 100%;
    max-height: 40vh;
    overflow-y: scroll;
    cursor: pointer;

}


.scroll-sm tr, .scroll-sm thead, .scroll-sm tfoot{
    display: table;
    width: 100%;
}

a{
    text-decoration: none;
}


#etat{
    min-width: 20px;
    max-width: 20px;
    min-height: 20px;
    max-height: 20px;
    border-radius: 50%;
    display: block;
    text-decoration: none;
    margin: 2px;
    background-color: red;
}

.bg-green{
    background-color: green;
    color:white;
}
.bg-navy{background-color: navy;color:white;}
.bg-red{background-color: red;color:white;}
.bg-violet{background-color: blueviolet;color:white;}
.bg-blue{background-color: blue;color:white;}
.bg-white{background-color: white;color:black;}
.bg-aqua{ background-color: aqua; color: black;}
.bg-orange{ background-color: darkorange; color: white;}
.bg-mauve{background: blueviolet;color: white;}
.bg-black{ background: black; color: white;}
.bg-gray{ background-color: darkgray; color: white;}



#attente{
    display:flex;
    justify-content:center;
    align-items:center;
    height: 100vh;
    width:100vw;
    position:absolute;
    top:10vh;
    backdrop-filter: blur(5px);
    visibility:hidden;
}

p{
    margin-bottom: 0;
    padding: 10px 0;
}

aside{
    
    min-height: 100vh;
    background-color: darkslateblue;

}
section{
    
    min-height: 100vh;
    background-color: slateblue;

}
footer{
    
    background-color: darkslateblue;
    color: antiquewhite;
    position: sticky;
}

header{
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: blueviolet;
}

#entete {
    margin-bottom: 20px;
} 


.custom-background {
    background-color: blueviolet; /* Couleur de votre choix */
}

.titre{
    line-height: 60px;
    text-align: center;
    background-color: darkorchid;
    color: white;
    border-bottom: 4px solid white;
    border-radius: 5px;

}

.line-button{
    display:flex;
    justify-content: space-between;
    align-items: center;
    height: 10vh;
    
}

@media print{
    section{
        min-width: 100vw;
        background-color: transparent !important;
    
    
    }


    .form-container{
        width: 100vw !important;
    }
}


@media screen and (max-width:1000px){

    .line-input input{
        width: 100% !important;

    }
    .line-input{
        display: flex;
        flex-direction: column;
    }
    .form-container{
        width: 100vw !important;
        padding: 10px;
    }

    .lab30 , .lab20{
        clear:both !important;
    }
}


#phaser-container{
    width: 100%;
    height:180px;
}

#phaser-container2{
    width: 100%;
    height:180px;
}

#login-container{

    position:fixed ;
    top:0;;
    left:0;
    min-width: 100vw;
    min-height: 100vh;
    display:flex;
    justify-content: center;
    align-items: center;
    background-image: url("../img/fond03.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 100;

}

#login-content{
    min-width:40vw;
    min-height: 15vh;
    border-radius: 10px;
    box-shadow: 10px 10px 10px gray;
    padding: 10px;
    background-color: rgb(46, 1, 88);

}


/*----------------Menu contextuel----------------------*/
.contextmenu{
    width: 200px;
    display: none;
    position:absolute;
    background-color: white;
    box-shadow: 5px 5px 5px black;
    z-index: 100;
    padding: 10px;
}
.contextmenu ul{
    padding: 0;

}
.contextmenu a{
    display: block;
    width: 100%;
    line-height: 50px;
    padding: 0 2px;
}
.contextmenu a:hover{
    background-color: lightgray;
    color: white;
    padding: 0 10px;
}

/*-----------------------------------------------------*/