.icons{
    height: 100px;
}
.profile{
    position:relative;
    right: 20px;
    border-radius: 40px;
}
nav{ color:antiquewhite;
    background-color: rgb(3, 90, 92);
    border-radius: 10px;
}
article h2{
    text-decoration: underline;
}
.GestionOption{
    transition: 1s;
}
.GestionOption:hover{
    transform: translateY(-20px);
}
.space{
    justify-content: space-between;
}
.bg-orange{
    background-color: orange;
}
.bg-yellow{
    background-color: yellowgreen;
}
.h{
    border: 2px solid;
    border-color:transparent ;
    border-radius: 5px;
}
.text-align-center{
    text-align: center;
}
.tools{
    border-right:3px solid rgb(168, 180, 168) ;
    border-bottom: 2px solid rgb(208, 208, 248);
    background-color: rgb(235, 235, 235);
    display: block;
    box-shadow: 2px 2px 2px 2px rgb(155, 154, 154);
    transition: 1s;
}
.mak{
    border-top: 3px 3px solid rgb(54, 50, 50);
    border-left: 3px solid rgb(39, 37, 37);
    border-right: 3px solid rgb(39, 37, 37);
    border-radius:10px ;
    
}
.tools:hover{
    transform: translateY(-7px);
}
.space-between{
    justify-content: space-between;
}
.f-right{
    float: right;
}
.btn-red{
    background-color:red;
    color: bisque;
    font-weight: bold;
}
.btn-red:hover{
    color:white;
    background-color: red;
}
.list-style-none{
    list-style: none;
    font-size:1em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    transition:1s;
}
.list-style-none:hover{
    transform: translateY(-3px);
}
.pointer{
    cursor: pointer;
}
.sms{
    border-top: 2px solid rgb(184, 182, 182);
    border-bottom: 1px solid rgb(187, 181, 181);
    cursor: pointer;
}
.lu{
    border-radius:50%;
    width: 12px;
    height: 12px;
    display: inline-block;
}
.blue{
    background-color: blue;
}
.float-right{
    float:right;
}
.sms:hover{
    background-color: rgba(55, 56, 56, 0.2);
}
.family-sms{
    font-family:Arial, Helvetica, sans-serif;
}
.color-green{
    color:rgb(17, 196, 17);
}
.apparitionH{
    animation: apparitionH;
    animation-duration: 2s;
}
.apparitionV{
    animation: apparitionV;
    animation-duration: 2s;
}
.green{
    color:green;
}
.reponse{
    animation: Disparaitre;
    animation-duration: 20s;
    animation-iteration-count: 2;
}
.hidden{
    visibility: hidden;
}
.red{
    color:red;
}
.input-text{
    box-shadow: 0px 0px 10px rgb(2, 87, 34);
    border-radius: 15px;
    height: 50px;
}
.input-text:hover{
    box-shadow: 0px 0px 20px rgba(1, 1, 124, 0.9);
}
.change-profile{
    height: 100px;
    width: 100%;
}
.mon-profile{
    animation: apparitionV 2s;
}
.deconnexion{
    color:black;
}
.red{
    color:red;
}
.deconnexion:hover{
    transform:scaleX(20);
    color:red;
}
.white{
    background-color: white;
}
.box{
    box-shadow: 0px 0px 10px rgb(182, 185, 182);
    border-radius: 10px;
}
.sombre{
    color: rgb(141, 139, 138);
}
.fs-7{
    font-size: 15px;
}
.red{
    color:red;
}
.green{
    color:green;
}
.cblue{
    color:rgb(3, 3, 138);
}
.box:hover{
    box-shadow: 0px 0px 10px rgb(102, 91, 163);
    border-radius: 20px;
}

/*animation*/

@keyframes apparitionH{
    from{
        opacity: 0.1;
    }
    to{
        opacity: 1;
        transform: translateX(30px);
    }
}
@keyframes apparitionV{
    from{
        opacity: 0.1;
    }
    to{
        opacity: 1;
        transform: translateY(-30px);
    }
}
@keyframes Disparaitre{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}