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


body{
    background: rgb(228, 228, 231);
    position: relative;
}

.container{
    max-width: 1200px; width: 100%; margin: 10px auto;
}

a, a:visited{
    text-decoration: none;
    color:#fff !important;
    font-weight: bold !important;
    display: inline-block;
    width: 100%;
    cursor: pointer;
}

.form-logout{
    padding: 10px;
}
.form-logout button{
    padding: 10px;
    cursor: pointer;
}

span.add{
    text-transform: uppercase; font-size: 15px;
}

.card-user{
    max-width: 500px;
    width: 100%;
    height: 500px;
    background: #fff;
}

.card-user .img-card{
    width: 100%;
}
.card-user .img-card img{
    width: 100%;
   height: 100%;
}

.text-card{
    padding: 10px;
}

.text-card h5{
    font-size: 20px; color: rgb(21, 128, 61); font-weight: bold;
}
.text-card p{
    font-size: 20px; color: #333; font-weight: bold;
    padding: 7px 0;
}

.action{
    max-width: 500px;
    width: 100%;
    height: 500px;
    /* background: #fff; */
    padding: 10px;
    overflow-y: scroll; 
    scrollbar-width: thin; 
}

.row-1{
    display: flex;
    justify-content: space-between;
}

.compagnies button{
    padding: 10px;
    text-align: center;
    margin-bottom: 3px;
    background: rgb(23, 127, 76);
    border:solid 1px #99bbe8;
    border-radius: 15px;
    color:#fff !important;
    font-weight: bold;
    width: 100%;
    cursor: pointer;
    border: solid .8px rgba(193, 237, 245, 0.774);
}





.compagnies button:hover{
    background: rgba(23, 127, 77, 0.678);
}


/* =========style error =========== */

.contain-message-success.active{
    background: transparent;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.contain-message-error.active{
    background: transparent;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 10;

}

.contain-message-success{
    display: none;
}
.contain-message-error{
    display: none;
}

.sub-message-success-contain{
    max-width: 300px;
    width: 100%;
    height: 200px;
    background: #99bbe8;
    border: #fff solid 1px;
    border-radius: 15px;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    box-shadow: 10px 5x;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.sub-message-error-contain{
    max-width: 500px;
    width: 100%;
    /* height: 200px; */
     background: #99bbe8;
     border: #fff solid 1px;
     border-radius: 15px;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     color: #fff;
     box-shadow: 10px 5x;
     padding: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
}


.hidde-success-message{
    display: flex;
    align-items: center;
    justify-content: center;
    display: inline-block;
    padding: 10px;
    background: rgb(23, 127, 76);
    color: #fff;
    margin: 10px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    z-index: 10;
}
.hidde-error-message{
    display: flex;
    align-items: center;
    justify-content: center;
    display: inline-block;
    padding: 10px;
    background: rgb(23, 127, 76);
    color: #fff;
    margin: 10px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
}

.li-error-message{
    list-style-type: none;
}

.fa-triangle-exclamation{
    font-size: 30px;
    color:#ffcc00;
    font-weight: bold;
}

/* fermeture des formulaires */
.close-form {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 30px;
    padding: 10px;
    cursor: pointer;
}

.close-form:hover 
.fa-circle-xmark{
    color: #fff;
    background: red;
    border-radius: 30%;
    border: transparent;
}

.fa-circle-xmark{
    color: red;
}


/* ================================ home guest========================================== */
.container-guest{
    width: 100%;
    height: 100%;

}

.btn-connexion button{
    border: solid .8px rgba(193, 237, 245, 0.774);
    height: 150px;
    width: 150px;
    margin: 10px;
    background:rgb(23, 127, 76);

}
.container-guest h1{
    color:rgb(23, 127, 76);
    text-transform: uppercase;
    padding: 10px;
    font-weight: 900;
}
.container-guest h2{
    color:rgb(23, 127, 76);
    padding: 10px;
    font-weight: bold;
}

.btn-connexion button a{
    padding: 20px;
    font-weight: bold;

}

.title-guest{
    padding: 10px;
    text-align: center;
}

.btn-connexion{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* loader attente requete */

.loader-waiting{
    position: fixed;
    z-index: 500000000000;
    background: rgba(191, 236, 214, 0.226);
    height: 100%;
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    top: 0;
}
.loader-waiting.active{
    position: fixed;
    z-index: 500000000000;
    background: rgba(191, 236, 214, 0.226);
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
}

.loading-waiting{
    border: solid 1px #fff;
    width: 160px;
    color: rgb(191, 236, 214);
    font-weight: bold;
    position: relative;
    font-size: 20px;
    padding: 5px;
}

.loading-waiting::after{
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    background: rgb(23, 127, 76);
    left: 0;
    top: 0;

    animation: loading infinite 5s;
    z-index: -1;
}

@keyframes loading {
    0%{
        width: 5px;
    }
    40%{
        width: 40%;
    }

    80%{
        width: 100%;
    }
    100%{
        width: 5px;
    }
    
}

@media screen and (max-width:500px) {
    .btn-connexion{
        flex-direction: column;
    }
}