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


/* table tr:nth-child(even) {
    background-color: #eee;
}
table tr:hover {
    background-color: #ccc;
    transition: 500ms;
    border-radius: 10px;
} */

/*---------------------------------cards en grid----------------------------*/
.cartes{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
    width: 100%;
}

.carte_image img{
    border-radius: 10px;
    padding: 10px;
    background-color: lightblue;
}
/*----------------------------Calculatrice---------------------------------*/
#grid_calculatrice{
    display:flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height:70vh;
    background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
}
#calculatrice{
    background-color: black;
    padding:10px;
    margin: 0 auto;
}
#ecran{
    width:100%;
    height:100px;
    background-color: lightblue;
    margin: 10px 0;
    border-radius: 5px;
    color: black;
    font-size: 20px;
    display: flex;
    justify-content: end;
    align-items: end;
    padding: 10px;
}
#touches{
    display:grid;
    grid-template-columns: repeat(4,50px);
    grid-template-rows: repeat(5,50px);
    gap: 10px;
}

.bouton{
    background-color: beige;
    border: none;
    border-radius: 5px;
    box-shadow: 0 3px lightblue;
}

.bouton:active{
    transform: translateY(2px);
    box-shadow: 0 1px lightblue;
}

#enter{
    grid-column: span 2;
}

/*---------------------------GRID sur gestion utilisateurs-----------------------------*/
.grid-form{
    display: grid;
    grid-template-areas: 
    "info1 photo adresse"
    "info2 info2 adresse"
    "btn btn btn";
    grid-template-columns: 1.5fr 0.25fr 1.5fr;
    grid-template-rows: 0.5fr 1fr 0.25fr;
    grid-gap : 5px;
    width: 100%;
}

.g_info_1{
    grid-area: info1;
    background: lightblue;
    color: white;
}

.g_info_2{
    grid-area: info2;
    background: lightblue;
    color: white;
}

.g_photo{
    grid-area: photo;
    background: navy;
    color: white;
}

.g_adresse{
    grid-area: adresse;
    background: red;
    color: white;
}

.g_btn{
    grid-area: btn;
    background: black;
    color: white;
}

@media screen and (max-width: 1000px){
    .grid-form{
        display: grid;
        grid-template-areas: 
        "info1 photo"
        "adresse adresse"
        "info2 info2" 
        "btn btn";
        grid-template-columns: 1.5fr 0.50fr;
        grid-template-rows: 0.5fr 1fr 0.25fr 0.25fr;
        grid-gap : 5px;
        width: 100%;
    }
}

@media screen and (max-width: 600px){
    .grid-form{
        display: grid;
        grid-template-areas: 
        "info1" 
        "photo"
        "info2" 
        "adresse"
        "btn";
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 0.25fr 1fr 1.5fr 0.25fr;
        grid-gap : 5px;
        width: 100%;
    }
}

/*------------------Menu contextuel-----------------------*/
.contextmenu{
    width:250px;
    display:none;
    position:absolute;
    background-color: white;
    color: gray;
    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: black;
    padding: 0 10px;
}
/*--------------------------------------------------------*/

li {list-style-type: none;}

/*--------------security-----------------*/
#login-container{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items: center;
    background: url("../img/fond-degrade.jpg") no-repeat center center/cover;
    /* background-image: url("../img/fond-degrade.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
    z-index:100;

}
#login-content{
    min-width:40vw;
    min-height:15vh;
    border-radius: 10px;
    box-shadow: 10px 10px 10px yellow;
    padding: 10px;
    background-color: white;
} 

/*--------------margin et padding en %---------------*/
.mv-20 {margin: 20% 0;}
.mv-30 {margin: 30% 0;}

.mh-20 {margin: 0 20%;}
.mh-30 {margin: 0 30%;}
/*---------------------------------------------------*/

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

    input{
        width:100% !important;
    }
    .line-input{
        display:flex;
        flex-direction:column;
    }
    .lab30 , .lab20{
        clear:both !important;
    }
    .form-container{
        width: 100% !important;
        padding:5px;
    }
}
@media print{
    section{
        min-width:100vw;
        background-color: transparent !important;
    }
    table{
        min-width: 100vw;
    }
    .form-container{
        width:100vw !important;
    }
}

.input-group .form-control:focus {
    box-shadow: none;
}
.input-group .form-control,
.input-group .btn {
    border-radius: 0;
}

.obligatoire:after{
    content:'  *';
    color:red;
    font-size: 1.25em;
}
.hide{
    display:none;
}
.line-input{
    margin: 10px;
}
.lab20{float:left;width:20%;font-weight: bolder;}
.lab30{float:left;width:30%;font-weight: bolder;}
.titre{
    line-height: 60px;
    text-align: center;
    background-color: navy;
    color:white;
    border-bottom:4px solid white;
}
.line-button{
    display:flex;
    justify-content: space-between;
    align-items: center;
    height: 10vh;
}
.scroll tbody {
    display: block;
    width: 100%;
    max-height: 40vh;
    overflow-y: auto;
    cursor: pointer;
    scrollbar-width: none;
}

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

/* .scroll tbody::-webkit-scrollbar { 
    display: none;
}  */

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

#entete {
    margin-bottom: 20px;
} 
.page{
    min-width:40px;
    max-width:40px;

    min-height:40px;
    max-height:40px;

    border-radius:5px;
    margin: 0 10px;

    font-size: 1.25em;


}

header{
    position: sticky;
    top:0;
    z-index:100;
    background-color: white;
}
aside{
    height:77vh;
    background-color: blue;
}
section{
    height:77vh;
    background-color: yellow;
}
footer{
    min-height:5vh;
    position: sticky;
    bottom:0;
}
#thead_tr_message{
    height:60px;
    padding:15px;
}
#thead_tr_message th{
    border-radius: 4px;
    padding:4px;
}
#attente{
    display:flex;
    justify-content:center;
    align-items:center;
    height: 100vh;
    width:100vw;
    position:fixed;
    top:10vh;
    background-color: black;
    backdrop-filter: blur(5px);
    visibility:hidden;
}
a{
    text-decoration:none;
}
#etat{
    min-width:20px;
    max-width:20px;

    min-height:20px;
    max-height:20px;
    border-radius:50%;
    margin : auto 4px ;
    background-color: red;
}
.m-auto{margin: 0 auto;}
.scroll-sm tbody,p.scroll-sm{
    display: block;
    width:100%;
    max-height:150px;
    overflow: auto;
    scrollbar-width:none;
}
.scroll-sm tbody::-webkit-scrollbar{
    display:none;
}
.scroll-sm tbody tr, .scroll-sm thead,.scroll-sm tfoot{
    display:table;
    width:100%;
}
.border-white{border:1px solid white;}
.border-red{border:1px solid red;}
#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%;}

.bg-blueNight {
    background-color: #2C3E50;
    color: white;
}

.bg-orange {
    background-color: #E67E22;
    color: white;
}

.bg-grey {
    background-color: #95A5A6;
    color: white;
}

.bg-yellow {
    background-color: #F1C40F;
    color: #2C3E50;
}

.bg-red {
    background-color: #E74C3C;
    color: white;
}

.bg-navy {
    background-color: navy;
    color: white;
}

.bg-green {
    background-color: #27AE60;
    color: white;
}

.bg-blue {
    background-color: #00c9f3;
    color: white;
}

.bg-white {
    background-color: #ECF0F1;
    color: white;
}

.blueNight {color: #2C3E50;}
.blue {color: #00c9f3;}
.orange {color: #E67E22;}
.turquoise {color: #1ABC9C;}
.green {color: green;}
.navy {color: navy;}
.red {
    color: red;
    text-shadow:
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #ff0000;
    margin-left: 30%;
}

.accordion-button:not(.collapsed) {
    color: #2C3E50;
    background-color: #3498DB;
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.img-fluid {
    height: 76px;
    object-fit: cover;
}