#body
{
    padding:0;
    margin:0;
}

.post {
    width: 90%;
    background-color: whitesmoke;
    margin-left: auto;
    margin-right: auto;
}

.post-titre {
    float:left;
    margin-left: 3%;
    margin-top: 3%;
    font-size: 400%;
}

.post-description {
    font-size:300%;
    margin-top: 2%;
    margin-left:1%;
}

.post-profile {
    float:left;
    width: 15%;
}
.icon {
    width: 12%;
    margin-left: 8%;
}
.icon-react{
    position:absolute;
    right:18%;
    
    bottom:3%;
}

.icon-comm
{
position:absolute;
    width:12%;
    right:2%;
bottom:2%;
}

.Post-Reaction-Icon
{
    width: 12%;
    margin-left: 50%;


}




#page
{
   /* padding-top:4%;
    padding-bottom: 24%;
    position:relative;
    width:100%;*/
    margin-bottom:25%;
    
    
    /*page*/
    
}
.footer {
    background-color: red;
    height: 10%;
    padding: 1%;
    position: fixed;
    top:91%;
    z-index: 10;
    box-shadow: 0px -2px 10px darkred;
    width: 100%;
}

.footer-icon {
    height:60%;
}

.left {
    float:left;
}

.right {
    float:right;
}

.header {
    background-color: red;
    height: 10%;
    padding: 1%;
    position: sticky;
    top:0px;
    z-index: 10;
    box-shadow: 0px 2px 10px darkred;
    /*margin-bottom: 2%;*/
}

.header-icon {
    height: 90%;
}

.header-tag {
    background: darkred;
    height: 50%;
    font-size: 200%;
}

.header-search {
    width:35%;
    height: 50%;
    font-size: 200%;
}
.card-body
{
    box-shadow: 10px 10px 10px gray;
}


.conversation {
    background-color: lightgray;
    height: 10%;
    padding: 1%;
    box-shadow: 10px 10px 10px gray;
    margin-top: 2%;
    border-radius: 10px;
    margin:2%;
}

.conversation-image {
    position:absolute;
    width: 17.3%;
    height:80%;

}

.conversation p {
    font-size: 3em;
    margin-left:20%;
    text-overflow: ellipsis;
    direction:ltr;
    width: 60%;
    white-space: nowrap;
    overflow: hidden;
}

.concert {
    background-color: lightgray;
    height: auto;
    padding: 1%;
    box-shadow: 10px 10px 10px gray;
    margin-top: 5%;
    border-radius: 10px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.concert-titre {
    margin-left: 3%;
    margin-top: 3%;
    font-size: 400%;
    width:50%;
    text-decoration: underline;
}

.concert-commentaire {
    font-size:3em;
    margin-left: 3%;
}

.concert-bouton {
    height: 10%;
    font-size: 200%;
    position:relative;
    background: darkred;
}

.concert-pourcentage {
    background-color: red;
    font-size: 300%;
}

.concert-progress {
    margin-top: 5%;
    height: 8%;
    width: 100%;
}

.concert-date {
    color:gray;
    font-size: 300%;
    position:absolute;
    right:1%;
    top:0%;
}

.repetition {
    background-color: silver;
    box-shadow: 10px 10px 10px gray;
    padding:1%;
    margin-top: 5%;
    border-radius: 10px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.repetition-titre {
    margin-left: 3%;
    margin-top: 3%;
    font-size: 400%;
    width:50%;
    text-decoration: underline;
}

.repetition-date { 
    color:gray;
    font-size: 300%;
    position:absolute;
    right:1%;
    top:0%;  
}

.repetition-commentaire {
    font-size: 3em;
    margin-left: 3%;
    margin-right: 20%;
}

.repetition-bouton {
    height: 10%;
    font-size: 200%;
    float:right;
    margin-top:2%;
    margin-right: 5%;
    background: darkred;


}

.repetition-justification {
    font-size: 200%;
    margin-left: 2%;
    width: 90%;
}

.buttonCreer
{
    margin-bottom:0%;
    font-size: 300%;
    width:100%;
    background-color: darkred;
}

.divFormPost
{
width:100%;
font-size: 300%;
padding-left:10%;
padding-right:10%;
}


.divFormPostTitre
{
    height:3%;
    font-size: 100%;
}

.divFormPostCheckBox
{
    height:3%; 
    font-size: 100%;
    margin-bottom: 5%;
    
}
.LabelTypeForm
{
    margin-top: 5%;
    font-weight: bold;
    background-color: gray;
    padding:5%;
    border-radius: 2%;
}

.option 
{
    font-size: 25%;
}

.divFormPostContent
{
    height:15%;

}

.CreerCompte-Submit
{
    float: right;
    margin-bottom: 20%;
font-size: 180%;
background-color: darkred;


}
.Profil-Image-Creation
{
    font-size: 180% !important;
}


.buttonAddImage
{
    font-size: 80%;
    background-color: darkred;
    
    margin-bottom: 5%;
}

.buttonPublier
{
    font-size: 75%; 
    background-color: darkred;
}

.divFormEventDate
{

    margin-right: 70%;
    margin-bottom: 5%;

}

.buttonPublier
{
    margin-left:30%;
    margin-right:auto;

}


.Activite
{
    background-color: lightgray;
    width:90%;
    padding:2%;
    font-size: 300%;
    margin-left:5%;
    box-shadow: 0px 2px 10px gray;
    margin-bottom: 2%;
    border-radius: 10px;

}

.activite-img
{
    width:15%;

}


.Profiletag
{
    border-radius: 20px;
    font-size: 200%;
    margin-left:5%;
    text-align: center;
    display: inline-block;
    padding-left: 5%;
    padding-right: 5%;

}

.profileImage
{
    width:50%;
    margin-left:25%;
}
.profileNom
{
    font-size: 400%;
   text-align: center;
    font-weight: bold;


}

.profile-progress
{
    height:2%;
    border-radius: 10px;
    width:80%;
    margin-left:10%;
    font-size: 250%;
    margin-bottom: 5%;
    margin-top: 5%;
}

.profile-reglage
{
width:10%;
position:absolute;
right:0;
margin: 2%;
}
.profile-arrow
{
    width:10%;
position:absolute;
left:0;
margin:2%;
}


.Message-Epingle,.Message-Reglage
{
    float:right;
    position:fixed;
    right:0;

}

.MessageHeader
{
    background-color: lightgray;
    position: fixed;
    top:10%;
    z-index: 10;
    font-size:300%;
    padding:1%;
    font-weight: bold;
    height:8%;
    box-shadow: 0px 2px 10px silver;
    width:100%;
}

.Message-Fleche,.Message-Reglage
{
    width:10%;
    
    
}
.Message-Down
{
    background-color: lightgray;
box-shadow: 0px -2px 10px silver;
position: fixed;
bottom:9%;
width:100%;
padding:1%;
display: inline;
z-index: 10;
/*height:8%;*/
}
.Message-Input
{
    width:80%;
    height: 100%;
    font-size: 300%;

}
.Message-Send
{
width:10%;
float:right;
margin:0;
margin-top: 3%;
margin-right: 5%;
}

.submit-compte-recup
{
    font-size: 200%;
    background-color: darkred;  

}


.divFormConnexion
{
    margin-top: 10%;
    background-color: red;
    height:60%;
    padding:5%;
    width:80%;
    /*box-shadow: 0px 4px 10px darkred;*/
    box-shadow: 0px 2px 10px darkred;
    border-radius: 20px;
    margin-left:10%;
    margin-top:25%;
    color:black;
    
}
.text 
{
    font-size: 300%;
    margin-bottom: 5%;
    margin-top: 5%;
}
.button-Créa
{
    font-size: 300%;
    background-color: darkred;


}
.form-Age-Creation
{
    font-size: 300%;
}

.divFormCréationCompte
{
    margin-top: 10%;
    background-color: red;
    padding:5%;
    width:96%;
    font-size: 110%;
    position: absolute;
    /*box-shadow: 0px 4px 10px darkred;*/
    box-shadow: 10px 10px 20px 10px gray;
    height: 80%;
    /*border-radius: 20px;*/
    margin-left : 2%;
    margin-right : 2%;
    margin-top:5%;
    margin-bottom: 5%;
    border-radius: 10px;
    overflow-y: scroll;
    padding-bottom: 20%;

    
    color:black;
    
}

.divCréaCompte
{
    padding-top: 5%;
    align-items: center;
    display: inline-block;
}




.labelCréationGenre
{
    font-size: 100%;
    display: inline-block;
    margin: 5%;
    border-radius: 5PX;
    background-color: darkred;
    color: whitesmoke;
    font-size: 200%;
    padding-left: 3%;
    padding-right: 3%;
}

.selected
{
    background-color: rgb(255, 255, 255);
    color: rgb(83, 2, 2);
}

.selectedInstruments
{
    color: red;
}

.divbutton
{
    display: inline-/*block*/;
    /*align-items:baseline;*/
    font-size: 100%;
}

.divgenre
{
    display: inline-block;
    align-items:baseline;
    font-size: 200%;
    margin-left: 5%;
    margin-right: 5%; 
    margin-bottom: 5%;
}

.Connexion-link
{
    display: block;
    padding-bottom:5%;
    color: whitesmoke;
    font-size: 200%;
    text-decoration: underline;
    cursor: pointer;
}

.Connexion-phone,.Connexion-Pwd
{
    height:10%;
    font-size: 200%;
    margin-bottom: 10%;
}


.Connexion-Submit
{
    
    font-size: 200%;
    background-color: darkred;
}

.Connexion-p
{
    font-size: 300%;
}
.Connexion-Titre
{

    font-size: 500%;
    text-align: center;
}

.Participant-Profile{
width:20%;
/*margin-top: 5%;*/
float: left;

}
.Actif-Profile{
    width:20%;
   /* margin-bottom: 1%;*/
    float: right;
}
.Participant-Rep,.Actif-Rep
{
    width:6%;
    margin-left:80%;


}
.Participant-Epingle,.Actif-Epingle
{
    width:6%;
    margin-left:5%;
   
    
}
.Participant-Div,.Actif-Div
{
width:60%;
border-radius: 20px;
font-size: 250%;
padding:1%;
margin-top: 5%;
box-shadow: 0px 2px 10px silver;
box-shadow: 0px -2px 10px silver;

}
.Actif-Div
{
    margin-left: 18%;
}
.Participant-Div{
margin-left: 22%;}

.Participant-Titre,.Actif-Titre
{
font-weight:bold;

}

.Message
{
    margin-top: 20%;
    margin-bottom: 39%;
}


.Message-Reglage
{
width:10%;
float:right;
margin-left:0%;


}
.Message-Epingle{

    margin-right:12%;
    width:10%;


}

.Message-Participant
{
    margin-right:34%;
}

.reponse-message-linked
{
    font-size: 100%;
    margin-left:1%;
    width:98%;
    background-color: blueviolet;
}

.lien-message
{
    text-decoration: none;
    color:black;
    background-color: blueviolet;
}

.Croix-Message-Reponse
{
    position:absolute;
    width:10%;
    float:right;
    top:0%;
    right:1%;
    
}


.Message-Layout
{
background-color: silver;
/*box-shadow: 0px -2px 10px silver;*/
padding:1%;
font-size: 30%;
width:75%;
position: absolute;
left:100%;
top:80%;
height:820%;
/*border-radius: 20px 0px 0px 20px ;*/
overflow-y: scroll;
scrollbar-color: rebeccapurple green;
margin-top: 2%;
padding-bottom: 4%;

}


.messages-layout-pinned
{
background-color: gray;
font-weight: normal;
scrollbar-width: thin;




}

.Reglage-Message-Layout
{
background-color: silver;
position: fixed;
overflow-y: scroll;
scrollbar-color: rebeccapurple green;
height: 67%;
width:75%;
padding:5%;
border-radius: 20px 0px 0px 20px ;
left:100%;
top:15%;
z-index: 8;
margin-bottom: 20%;
}

.Reglage-Message-Image,.Message-Personne-Color
{
font-size:190%;
}
.Reglage-Message-Submit
{
    margin-top: 5%;
    font-size:190%;
}
.Message-Personne-Reglage
{
    font-size:190%; 
}
.Message-Reglage-label
{
    margin-top: 2%;
    font-size:250%; 
    font-weight: bold;
}

.Message-Personne-Color
{
margin-right: 100%;

}

.Reglage-Message-Titre
{

    font-size:350%; 
    text-align: center;
    margin-top: 2%;

}
.commentaires
{
    position: fixed;
    z-index: 10;
    background-color: gray;
    height:60%;
    width:80%;
    top:20%;
    left:10%;
    border-radius: 10px;
    font-size: 200%;
    filter: blur(0px);
}

.commentaires-cross
{
    width:10%;
    margin-left:90%;

    margin-bottom: 5%;
   
}

.Commentaire-message-layout
{
    width:60%;
    font-size: 150%;
    margin-bottom: 1%;


}

.commentaires-Up{

    position:fixed;
background-color: lightgray;
    top:0%;
    border-radius: 10px;
    width:100%;
box-shadow:0px 2px 10px gray ;

}



.commentaires-Mid
{
    margin-top: 12%;
    height:80%;
    overflow-y: scroll;
    scrollbar-color: rebeccapurple green;
    width:100%;

}

.Commentaire-Down
{
    /*position:fixed;*/
    background-color: lightgray;
    bottom:0%;
    padding: 1%;
    box-shadow:0px -2px 10px gray ;
}

.Commentaire-Input
{


width:80%;
font-size: 150%;



}
.Commentaire-Send
{
width:10%;
float:right;
margin:0%;
margin-right:5%;
margin-top:5%;
}


.Reaction
{
    position: fixed;
    z-index: 10;
    background-color: gray;
    height:40%;
    width:80%;
    top:20%;
    left:10%;
    border-radius: 10px;
    font-size: 200%;
    filter: blur(0px);
}  

.Reaction-cross
{
    width:10%;
    margin-left:90%;

    margin-bottom: 5%;
   
}

.Reaction-Up{
    
        position:fixed;
        top:0%;
        border-radius: 10px;
        width:100%;
        box-shadow:0px 2px 10px gray ;
        background-color: lightgray;
}


.div-profile-activite
{




    width: 98%;
    height: 40%;
    border-radius: 10px;
    margin-top: 2%;
    margin-bottom: 2%;
    padding: 1%;
    margin-left: 1%;
    overflow-y: scroll;
    scrollbar-color: rebeccapurple green;
    padding-top: 2%;
    
   
  
}

.Reglage-Profil-Layout
{



    background-color: silver;
    position: fixed;
    overflow-y: scroll;
    scrollbar-color: rebeccapurple green;
    height: 100%;
    width:75%;
    padding:5%;
    border-radius: 20px 0px 0px 20px ;
    left:100%;
    top:9%;
    z-index: 9;
    
   
  
}


.Reglage-Profil-Image,.Reglage-Profil-Submit,.Reglage-Profil-Select-Tel-Mail,.Reglage-Profil-Input-Tel-Mail,.Reglage-Profil-Submit,.Reglage-Profil-Select-Tag
{
    font-size:190%;
    margin:2%;
}

.Reglage-Profil-label
{
    font-size:300%; 
    font-weight: bold;
    margin:2%;
}


.Reglage-Profil-Titre
{
    font-size:350%; 
    text-align: center;
    font-weight: bold;
}




.Greetings
{



    background-color: red;
    position: fixed;
    overflow-y: scroll;
    scrollbar-color: rebeccapurple green;
    height: 63%;
    width:75%;
    padding:5%;
    border-radius: 0px 20px 20px 0px ;
    right:100%;
    top:19%;
    z-index: 10;
    font-size: 230%;
    
   
  
}

.Greetings-Titre
{
    font-size:200%; 
    text-align: center;
    font-weight: bold;
}

.Greetings-Paragraphe
{
    margin:5%;
}

.Categorie{
    position: fixed;
    overflow-y: scroll;
    scrollbar-color: rebeccapurple green;
    padding:1%;
    background-color: darkgray;
    top:7.3%;
    left:16%;
    z-index: 10;
    font-size: 100%;
    width: 25%;
}


.Categorie-Option
{
    font-size: 190%;
    background-color: silver;
    border-radius: 10px;
    padding:5%;
    margin-top:5%;
    margin-top:5%;
    text-align: center;
    box-shadow: black 0px 0px 10px;
}





.reponse-commentaire
{
    font-size: 150%;
}



.Creer-Conv-Img
{
width:15%;
margin:2%;
padding:3%;
background-color: lightgray;
/*border:black solid 3px;*/
box-shadow: 10px 10px 10px gray;



}


.Conv-Creer
{
    position: fixed;
    top:100%;
    padding:5%;
    border-radius: 20px 20px 20px 20px ;
    background-color: silver;
    box-shadow: black 0px 0px 10px;
    z-index: 10;
    font-size: 200%;
    width: 90%;
    height:70%;
    margin-left:5%;
    margin-right:5%;
    margin-top: 5%;
    margin-bottom: 5%;
    overflow-y: scroll;
    scrollbar-color: rebeccapurple green;
    scroll-padding: 2%;

}

.Conv-Creer-Titre-Titre
{
font-size: 200%;
margin-bottom: 5%;

}


.Conv-Creer-Titre
{
margin: 5%;
margin-bottom: 7%;


}

.Conv-Creer-Membre
{
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
}

.Conv-Creer-Submit-Membre
{
    font-size: 100%;
    margin: 0%;
}

.Conv-Creer-Submit 
{
    font-size:100%;
    margin-left: 5%;
}


.Recherche-Profil
{
position:fixed;
width:34.5%;
background-color: darkgray;
border-radius: 2%;
top:7%;
right:20.3%;
padding: 2%;
max-height: 30%;
overflow-y: scroll;
scrollbar-color: rebeccapurple green;
scroll-padding: 2%;
}

.Recherche-Profil-Div-User-Img
{   
    
    width:20%;
    margin-bottom: auto;
    margin-top: auto;
    float:left;
}

.Recherche-Profil-Div-User-Nom
{

font-size: 300%;

}

.Recherche-Profil-Div-User
{
    background-color: lightGray;
    margin-top:5%;
    border-radius: 5%;
    box-shadow: black 0px 0px 10px;
    height:20%;
}

.ReglageAdmin
{
width:10%;
margin:2%;
}

.Fleche-Admin
{
width:10%;
margin:2%;
}


.Appel-Admin-Div
{
width:90%;
margin-left:5%;
margin-right:5%;
border-radius: 2%;
padding:2%;
padding-bottom: 7%;

/*background-color: darkred;
box-shadow: gray 10px 10px 10px;*/

}

.Appel-Admin-Profil
{
    padding:2%;
    font-size: 350%;
    margin-bottom: 5%;
    border-radius: 2%;

}


.Appel-Admin-Profil-Commentaire
{
    color:whitesmoke;
    font-size: 90%;
    margin-left: 10%;
    font-weight: bold;

}

.Appel-Admin-Profil-Img
{
    width:20%;
    position: absolute;
    left:10%;
}
.Appel-Admin-Profil-Nom{
    margin-top:10%;
    margin-bottom:10%;
    margin-left:35%;
    width:60%;
}
.divFormPostCheckBox 
{
    height:6%;
}




.Conv-Creer-Titre
{
font-size: 180%;
border-radius: 2%;
}

.Conv-Creer-Membre
{
    font-size:160%;
    margin-bottom: 0%;
    margin-left:5%;
}

.Conv-Creer-Membre-Div
{
    padding:2%;
    border-radius: 2%;
    background-color: lightgray;
    margin-bottom: 2%;
    margin-top: 0%;
    margin-left:5%;
    width:74.6%;
    font-size: 50%;
    box-shadow: black 0px 0px 10px;
    overflow-y: scroll;
scrollbar-color: rebeccapurple green;
height:50%;
}
.ConvCreerTag
{
    font-size: 150%;
    margin-left: 5%;
    margin-bottom: 2%;
    margin-top: 2%;
}
.Conv-Creer-Membre-Liste
{
    padding:2%;
    border-radius: 2%;
    background-color: lightgray;
    margin-bottom: 2%;
    margin-top: 0%;
    margin-left:5%;
    width:74.6%;
    font-size: 50%;
    box-shadow: black 0px 0px 10px;
    overflow-y: scroll;
scrollbar-color: rebeccapurple green;
height:50%;  
}


.div-emoji
{

position:absolute !important;
bottom: 8%;
width:50%;
border-radius: 2%;
background-color: whitesmoke;
margin-left: 30%;
padding: 2%;;
zoom: 300%;
z-index: 10;
}

.Bouton-Envoyer-Reaction{
    position: absolute;
    width:10%;
    bottom: 15%;
    right: 8%;
    z-index: 10;
}

.div-bottom-reaction
{
    position: absolute;
    width:100%;
    height:32%;
    background-color: lightgray ;
    bottom: 0%;
    border-radius: 2%;
    
}

.Reaction-Mid
{
    position: absolute;
    width:100%;
    height:52%;
    bottom: 32%;
    border-radius: 2%;
    
    overflow-y: scroll;
scrollbar-color: rebeccapurple green;


}

.Message-List
{
    width:10%;
    position:absolute;
    right:25%;
}


.Message-List-User-Div
{

    width:30%;
    position:absolute;
    background-color: lightgray;
    font-size: 30%;
    padding:2%;
    right:20%;
    top:99%;
    border-radius: 2%;
    overflow-y: auto;

 

}

.Conv-Recherche-Profil
{
    padding:5%;
    background-color: gray;
    overflow-y: scroll;
    border-radius: 0 0 5px 5px;
    scrollbar-color: rebeccapurple green;
    max-height: 100%;
}

.Conv-Recherche-Profil>div
{
height:8%;
padding-top: 1%;

}

.Conv-Recherche-Profil>div>p{
    margin-top: 1%;
}

.Conv-Recherche-Profil>div>img{
    width:13%;
    margin-left: 2%;
    margin-right: 2%;
}


.Message-List-User-Div>div>img
{
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
}


.Profile-Reaction
{
background-color: lightgray;
height:21%;
margin:2%;
border-radius: 2%;
box-shadow: black 0px 0px 10px;
padding-bottom: 5%;


}


.Reaction-Name
{
    position: absolute;
    font-size: 150%;
    margin-left: 10%;

}

.Profil-Reaction-Picture
{
    position: absolute;
    margin-top: 1%;
    margin-left: 1%;
    width:8%;

}

.Reaction-Content
{
    position:absolute;
   right:20%;
font-size: 150%;

}

.Post-Nb-Likes
{
    font-size: 500%;

}

.postLike
{
    width: 12%;
    margin-bottom: 2%;
    float: right;
    margin-right: 68%;
    
}

.Message-Input-Text-Titre{

width:48%;
margin-right:39%;
}

.contenu {
    margin-top: 100px;
    margin-left: 20px;
    margin-right: 20px;
    padding : 3px;
    text-align: center;
}


.Prenom-input-profile,.Nom-input-profile
{

font-size: 200%;
font-weight: bold;
background-color: darkgray;
margin-bottom: 5%;
margin-top: 5%;
border-radius: 5px;
text-align: center;

}

.Nom-input-profile
{
    margin-left:6%;
}