body
{
	font-family: Arial, Roboto;
	margin: 0px;

}

.setBlackBodyColor{
	background-color: #222;
}


textarea{
	font-family: Arial;
	padding: 7px;
}

button{
	padding: 0px;
	font-family: inherit;
	font-size: inherit;
}




.header
{
	text-align: center;
	background-color: rgb(228, 35, 157);
	display: inline-block;
	width: 100%;
	background-color: white;
	
}



.memberBarHeader{
	display: none;
}


header{
    /*position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;*/


}

.top_links{
	display: inline-block;
	margin-left: 20px;
	float: left;
	margin-top: 15px;
	font-weight: bold;
	border-bottom: 3px solid black;
	/*-webkit-text-stroke-width: 0.2px; /* Épaisseur de la bordure */
  /*-webkit-text-stroke-color: white;  Couleur de la bordure */
  color: white;
  /*text-shadow: 
      -1px -1px 0 white,  
       1px -1px 0 white,
      -1px  1px 0 white,
       1px  1px 0 white; /* Ombre sur 4 côtés */
}


.top_links:hover{
	border-bottom: 3px solid white;
}




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

	header{
		background-color: white;
	}

	.header{
		/*background: unset;
		background-color: unset;
		*/
		padding-bottom: 10px;
		background-color: unset;
	}
}



footer{
	padding-top: 100px;
	padding-left: 10%;
	padding-right: 10%;
	text-align: center;
}


.footer_nav{
	text-align: center;
    background-color: white;
    padding: 5px 0px;
    position: fixed;
    width: calc(100%);
    bottom: 0;
    z-index: 1000;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow:-0.2em 0 .9em black;
}


@media screen and (max-width: 768px)
{
	.footer_nav{
		background-color: black;
	}
}



.menu_icon{
	width: 25px;
	height: 25px;
	border-radius: 13px;
}


.menuLink{
	color: white;
	font-size: 9px;
	margin-left: 4%;
	margin-right: 3%;
	display: inline-block;
	text-transform: uppercase;
	font-weight: bold;
}



/*

DESIGN FOR DISPLAY VIDEO IN WHOLE SCREEN
*/

/* Fullscreen container */
    #fullscreenContainer {
      width: 100vw;
      height: 100vh;
      position: relative;
    }

    /* Transparent div on the right */
    #transparentDiv {
      position: absolute;
      top: 0;
      right: 0;
      width: 50px;
      height: 100%;
      background-color: rgba(0, 0, 0, 0); /* Fully transparent background */
      color: white;
      display: flex;
      flex-direction: ;
      justify-content: center;
      align-items: center;
    }

    /* Transparent div at the bottom */
    #bottomTransparentDiv {
      position: absolute;
      bottom: 0;
      left: 0;
      width: calc(100% - 50px); /* Width of the whole screen minus the width of the right div */
      height: 100px;
      background-color: rgba(0, 0, 0, 0); /* Fully transparent background */
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    /* Video element taking the full height and width of the container */
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

























a{
	text-decoration: none;
}

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

	footer{
		padding: 0px;
		padding-top: 50px;

	}
}




.inHeaderDiv{
	margin-left: 2%;
	margin-right: 2%;
	width: 95%;
	display: inline-block;
	text-align: center;
}


.inHeaderDivForlogin{
	display: none;
}

@media screen and (max-width: 768px)
{
	.inHeaderDivForlogin{
		display: block;
		float: left;
		display: none;
	}
}



.inWelcomeImage{
	display: inline-block;
	padding-bottom: 0px;
}




.inNavLK{
	text-align: center;
	display: inline-block;
	float: right;
	word-break: break-all;
}



.miniDescriptionTop{
	display: none;
}

.bigScreenTopLeft{
	margin-right: 30px;
	display: inline-block;
}


@media screen and (max-width: 768px)
{
	.inHeaderDiv{
	 margin-left: 0%;
	 margin-right: 0%;
	 width: 98%;
	 padding-right: 2%;
	 padding-top: 0px;
	 padding-bottom: 0px;
	 z-index: 5;
	 

	}

	.inWelcomeImage{
		text-align: center;
		margin-top: 15px;
		float: left;
		margin-right: 0px;
		padding-bottom:0px;
	}

	.inNavLK{

		
		display: none;
	}


	.wlcimage{
		display: inline-block;
		width: 90px;
		border-radius: 10px;
	}



	.miniDescriptionTop{
		display: inline-block;
		color: rgb(255, 255, 0);
		font-weight: bold;
		width: 100%;
		text-align: left;

	}

	.bigScreenTopLeft{
		margin-right: 0px;
	display: none;
}

}

.rL{
	display: none;
}

@media screen and (max-width: 768px)
{
	.rL{
		display:inline-block;
		text-align: center;
		width: 100%;
		color: rgb(255, 255, 255);
		font-weight: bold;
	}
}





.inLinknaV{
	display: inline-block;
}


@media screen and (max-width: 768px)
{
	.inLinknaV{
		margin-right: 0px;
		float: right;
		margin-left: 10px;
		margin-bottom: 10px;
	}
}



.lkLink{
	color: white;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
}



.asidepart{
	display: inline-block;
	width: 40%;
	max-width: 390px;
	margin-left: 10px;
	font-weight: bold;
	margin-top: 0px;
	float: left;
	margin-top: 20px;
}


.asideTopIndicationDesign{
	padding: 7px;
	border: 2px solid rgb(288, 37, 157);
	text-align: center;
	display: inline-block;
}


.scoredetails{
	text-transform: uppercase;
	font-weight: bold;
	padding: 7px;
	background-color: rgb(288, 37, 157);
	color: yellow;
	border-radius: 3px;
	margin:20px;
	display: inline-block;
	font-size: 17px;
}


@media screen and (max-width: 768px)
{
	.asidepart{
		display: none;
	}


	.scoredetails{
		margin-left: 0px;
	}
}



.connectMyAccount{
		padding: 7px;
		border: 2px solid rgb(228, 37, 157); 
		color:  rgb(228, 37, 157);
		border-radius: 5px;
		text-transform:uppercase;
		text-align: center;
		font-weight: bolder;
}


.connectMyAccount:hover{
		background-color: rgb(228, 37, 157);
		color: yellow;
}



.asideELT{
	display: block;
	margin: 20px;
}



.LinkCallAccount{
	text-transform: uppercase;
	margin-right: 50px;
	padding: 10px;
	background-color: rgb(228, 35, 157);
	color: rgb(255, 255, 0);
	text-decoration: none;
	border-radius: 3px;
	display: inline-block;
	font-size: 20px;
	margin-top: 20px;
	margin-bottom: 20px;

}



.LinkCallAccountTop{
	font-size: 14px;
	width: 75%;
	color: black;
	padding:9px;
	border-radius: 3px;
	text-transform: uppercase;	
	display: inline-block;
	font-weight: normal;
	background-color: rgb(196, 188,150);
	border:1px solid rgb(196, 188,150);
}

.LinkCallAccountTop:hover{
	background-color: inherit;
	color: white;
	border:1px solid white;
}




.LinkCallAccountTopNewAccount{
	font-size: 14px;
	width: 75%;
	color: rgb(196, 188,150);
	padding:9px;
	border-radius: 3px;
	text-transform: uppercase;	
	display: inline-block;
	font-weight: normal;
	background-color: inherit;
	border:1px solid rgb(196, 188,150);
	margin-top: 15px;
}


.LinkCallAccountTopNewAccount:hover{
	background-color: rgb(196, 188,150);
	color: black;
	border:1px solid rgb(196, 188,150);
}

.LinkCallAccountTHCLR{
	text-transform: uppercase;
	margin-right: 50px;
	padding: 10px;
	background-color: rgb(0, 0, 255);
	color: rgb(255, 255, 0);
	text-decoration: none;
	border-radius: 3px;
	display: inline-block;
	font-size: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}



.LinkCallAccountTHCLRTop{
	background-color: rgb(0, 0, 255);
	color: rgb(255, 255, 0);
	display: inline-block;
	width: 45%;
	padding: 3px;
	border-radius: 3px;
	text-align: center;
	text-transform: uppercase;
}



@media screen and (max-width: 768px)
{
	.LinkCallAccount{

		margin-right: 0px;
		margin-left: 20px;
		font-size: 17px;
	}
}



.centered_content{
	display: inline-block;
	width: 100%;
	margin-top: 100px;
	text-align: center;
}

@media screen and (max-width: 768px)
{
	.centered_content{
		margin-top: 40px;
	}



	.noDisplayingOnSmallScreen{
		display: none;
	}
}


.inAllBody{
	display: inline-block;
	width: 100%;
}


.designAllBody{
	margin-top: 50px;
	display: inline-block;
	width: 100%;
	border-radius: 20px;
	box-shadow: 1px 1px 4px black;

}


.forLogindesignAllBody{
		border :3px solid rgb(196, 188,150);
		border :3px solid red;

		padding-top:50px;
		display: inline-block;
		width: 500px;

		margin-left: 0%;
		margin-top: 250px;
		border-radius: 9px;
		box-shadow: 1px 5px 50px black;
		
		padding-bottom: 30px;
		margin-bottom: 70px;
		
		
		position: absolute;
        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);

        /*
		New design
       */
       background-color: #000;

}


@media screen and (max-width: 768px)
{
	.forLogindesignAllBody{
		position: unset;
        top: unset;
        left: unset;
        transform: unset;

		padding-top:20px;
		padding-bottom:50px;
		display: inline-block;
		width: 94%;
		margin-left: 3%;
		margin-top: 30px;
	
		box-shadow: 1px 5px 50px black;
		
	}
}


.designAllBodyMAINPAGE{
	margin-top: 50px;
	display: inline-block;
	width: 100%;
	border-radius: 20px;
	box-shadow: 1px 1px 4px black;

}


.mainTitleTopPage{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 120%;
	display:inline-block; 
		
	/*text-shadow: 20px;
	text-shadow: #FC0 1px 0 10px;*/
	color: white;
	font-family: "Berlin Sans FB";
}


@media screen and (max-width: 768px)
{
	.designAllBodyMAINPAGE
	{
		/*width: 93%;
		margin-left: 3.5%;
		*/
		box-shadow: unset;
		width: 100%;
		margin-left:0%;
		margin-top: 50px;
		padding-left: 0%;
	}

	.designAllBody{
		box-shadow: 1px 1px 4px black;
		width: 95%;
		margin-left:2%;
		margin-top: 20px;
		padding-left: 2%;
		padding-left: 0%;
	}


	.mainTitleTopPage{
		
		display:inline-block; 
		
		/*
		text-shadow: 1px 3px 9px rgba(0, 0, 0, 0.5);
		text-shadow: #FC0 1px 0 10px;
		*/
	}

}



.cntnLksDuLCalth{
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	width: 400px;
}


.account_stats_table{
	padding: 10px 0px;
	border-bottom: 1px solid rgb(196, 188,150);
	width: 100%;
	display:inline-block;
}



.cntnLksDuL{
	text-align: left;
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	width: 420px; /* Limit size of the screen */
	box-shadow: 1px 1px 5px black;
	border-radius: 50px;
	margin-top:0px;
}


.cntnAsktoLogin{
	background-color:  inherit;
	width: 89%;
	text-transform: uppercase;
	/*padding-left: 5%;
	padding-right: 5%;
	margin-right: 5%;
	margin-left: 5%;
	border-radius: 100px;
	padding-bottom: 200px;
	padding-top: 20px;
	box-shadow: 1px 1px 10px black;*/
	word-wrap: break-word;
	display: inline-block;
	margin-bottom: 100px;


	/*position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
}



@media screen and (max-width: 768px)
{
	.cntnLksDuL{
		padding-left: 0%;
		padding-right: 0%;
		padding-top: 0px;
		width: 99%;
		border: 0px;
		
	}



	.cntnLksDuLCalth{
		padding-left: 1%;
		padding-right: 1%;
		padding-top: 10px;
		width: 93%;
	}
}





.imqdhiqfHQW{
	width: 20%;
	border-radius: 100px;
	float: left;
	margin-top: 20px;
	display: inline-block;
	border: 2Px solid white;
}



.sdifregrJHZDPL{
	text-transform: uppercase;
	margin-bottom: 50px;
	border:1px solid white;
}



.CntnInfos{
	border: 5px solid rgb(255,255, 255);
	padding-top: 20px;
	padding-bottom: 20px;
	display: inline-block;
	text-transform: uppercase;
	width: 98%;
	

}			





.LkKLBGHaLLogout{
	margin-top: 20px;
	display: block;
	background-color: rgb(196, 188,150);
	font-size: 17px;
	color: black;
	padding-top: 13px;
	padding-bottom: 13px;
	border-radius: 3px;
	text-align: center;
	font-weight: bold;
}




.LkKLBGHaL{
	margin-top: 20px;
	display: block;
	color: white;
	font-size: 17px;
	background-color: rgb(108, 255, 149);
	background-color: red;
	padding-top: 13px;
	padding-bottom: 13px;
	border-radius: 3px;
	text-align: center;
	font-weight: bold;

}


.logInLogoutSys{
	background-color:  rgb(84, 141, 212);
	padding-left: 10px;
	border-radius: 5px;
	width: 100%;
	padding-bottom: 50px;
}



.myAccountIn{
	display: inline-block;
	float: left;
	margin-right: 5px;
}


.profileiNimage{
	display: inline-block;
}



@media screen and (max-width: 768px)
{
	.profileiNimage{
		display: none;
	}	
}



.iNdisPlayProfile
{
	width: 30px;
	border-radius: 100px;
	height: 30px;
}


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

	.iNdisPlayProfile
	{
		width: 70px;
		height: 70px;
	}		
}



.cntnAccountConnectedDiv{
	margin-top: 0px;
	text-align: center;
	padding-left: 10%;
	padding-right: 10%;
}
	
.accountLiCntn{
	display: inline-block;
	margin-left: 7px;
}


.accountLiCntnPostNew{
	display: inline-block;
}


.statusInTopDisplay{
	margin-left: 7px; 
	margin-right: 7px;
	margin-top: 35px; 
	box-shadow: 1px 1px 5px; 
	padding-top: 5px; 
	padding-bottom: 5px; 
	border-radius: 7px;
}


@media screen and (max-width: 768px)
{
	.cntnAccountConnectedDiv{
		margin-top: 30px;
		padding-left: 0%;
		padding-right: 0%;
		display: ;
	}


	


	.accountLiCntn{
		margin-top: px;
	}

	.accountLiCntnPostNew{
		display: inline-block;
		margin-left: 0px;
	}


}



.newPostFound{
	background-color: black;
	color: white;
	padding: 10px;
	border-radius:5px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 13px;
	border: 2px solid white;

}

.newPostFound:hover
{
	background-color: white;
	border: 2px solid black;
	color: black;
}


@media screen and (max-width: 768px)
{
	.newPostFound{
		display: inline-block;
		
	}
}




.LinkDesignlinks{
	display: inline-block;
	color: rgb(84, 141, 212);
	color: rgb(0, 0, 0);
	margin-bottom: 7px;
	font-size: 9px;

}



.addPhotoPost{
	border-radius: 200px;
	display: inline-block;
	text-align: left;
	text-transform: uppercase;
	padding-left: 30px;	
	padding-right: 30px;	
	color: rgb(84, 141, 212);
	background-color: rgb(84, 141, 212);
	color: white;
	padding-top: 7px;
	padding-bottom: 7px;
}



.SubmitNewPost{
	padding: 10px;
	border-radius: 3px;
	border: 0px;
	font-size: 13px;
	text-transform: uppercase;
	color: rgb(255, 255, 0);
	background-color: #2b70ec;
	font-weight: bold;
}


.postImagesTyle{
	display: inline-block;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}


.cntnPostsAll{
	text-align: center;
    margin-top: 0px; /* Adjust this value to avoid content being hidden behind the fixed navbar */
    
}


.centralsectionPost{
	text-align: left;
	width: 400px;
	display: inline-block;
	border-radius: 20px;
	box-shadow: 1px 1px 5px black;

}


@media screen and (max-width: 768px)
{
	.centralsectionPost{
		width: 100%;
		box-shadow: none;
	}

	.cntnPostsAll{
	    margin-top: 0px;
	}
}



.displayPostContent{
	text-align: left;
	width: 765px;
	display: inline-block;
}



@media screen and (max-width: 768px)
{
	.displayPostContent{
		width: 100%;
	}
}




.onePost{
	display: inline-block;
	width: 100%;
	margin-bottom: 50px;
	margin-top:0px;
	border-radius: 20px;
}

@media screen and (max-width: 768px)
{
	.onePost{
		width: 100%;
		height: ;
		margin-bottom: 0px;
	}
}





.account_infos{
	display: inline-block;
	border-top: 1px solid rgb(220, 220, 220);
	border-left: 1px solid rgb(220, 220, 220);
	border-right: 1px solid rgb(220, 220, 220);
	width: 100%;
	background-color: rgb(245, 245, 245);
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
}



@media screen and (max-width: 768px)
{
	.account_infos{
		
	}
}



.postowerinfos{
	display:inline-block;
	float:left;
	width: 30px;
	height: 30px;
	border-radius: 100px;
}



	
.L0{
	display: inline-block;
	width: 100%;
	position: relative;
	z-index: 1;
	background-color: rgb(250, 250, 250);
	height: auto;
}




@media screen and (max-width: 768px)
{
	.L0
	{
		width: 100%;
	}
}



.L2{
	display: block;
	width: 100%;
	background-color: black;
	min-height: 420px;
	z-index: 2;
	bottom: 0px;
}



.L1{
	display: inline-block;
	float: right;
	width:60px;
	/*margin-left: 340px;
	margin-top: 10px;*/
	position: absolute;
	z-index: 3;
	bottom: 0px;
	right: 0px;
	/*height: 300px;*/
}



@media screen and (max-width: 768px)
{
	.L1
	{
		/*width: 15%;
		margin-left: 85%;
		bottom: -70px;*/
	}


	.L2{
		height: 400px;
	}
}




	.mainInPlatformImStyle{
	width: 100%;
	display: block;
	background-color: black;
	z-index: 2;
	bottom: 0px;

}





.postPicture{
	display: inline-block;
	width: 650px;
	float: ;

	/*position: absolute;

	*/
	
}



@media screen and (max-width: 768px)
{
	.postPicture{
		width: 80%;
		float: left;
	}
}






.cntn_notation_sys{
	display: inline-block;
	width: 50px;
	position: absolute;
	margin-bottom: 0px;
	margin-top: 200px;
	/*margin-left: 580px;
	margin-top: 50%;
	z-index: 1;
	*/
	
}


.postBottomSize{
	font-size: 13px;
	color: white;
	padding: 9px 9px;
}


@media screen and (max-width: 768px)
{
	.cntn_notation_sys{
		width: 20%;
		margin-top: 0px;
	}


	.postBottomSize{
		
		margin-top: 3px;
		border-radius: 2px;
		
	}
}





.howMuchstyle{
	color: white;
	font-size: 15px;
	margin-top: 200%;
	top: 0px;
	display: inline-block;
	width: 40%;
	transform: rotate(180deg);
	writing-mode: vertical-lr;
}




@media screen and (max-width: 768px)
{
	.howMuchstyle{
		margin-top: 200px;
	}
}



.cntn_note{
	display: inline-block;
	width: 80px;
	text-align: center;
	display: block;
	float: right;
}




.top_first_infos{
	font-size: 15px;
	display: inline-block;
}


.posts_statistics{
	border-left: 1px solid rgb(220, 220, 220);
	border-right: 1px solid rgb(220, 220, 220);
	border-bottom: 1px solid rgb(220, 220, 220);
	display: inline-block;
	width: 100%;
	font-size: 16px;
	
	display: inline-block;
	color: rgb(250, 250, 250);
	background-color: black;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}


.inInputPostCmt{
	float: left;
	display: inline-block;
	width: 85%;
	border: 2px solid blue;
	padding: 7px;
	margin-top: 2px;
	font-size: 17px;
	font-family: arial;
}



@media screen and (max-width: 768px)
{
	.inInputPostCmt{
		float: none;
		border: 0px;
		font-size: 14px;
		margin-top: 0px;
		width: 80%;
	}

	.posts_statistics{
		box-shadow: 1px 1px 5px black;
		margin-bottom: 70px;
	}


}







.postSubmit{
	color: rgb(228, 35, 157);
	border: 0px;
	background-color: white;
	font-weight: bold;
	font-size: 17px;
	text-transform: uppercase;
	margin-top: 3px;
	padding: 10px;
	margin-left: 50px;
	font-family: arial;
	display: inline-block;
}


.cntnNoteList{
	margin-top: 20px;
	display: inline-block;
	margin-right: 5px;
}



@media screen and (max-width: 768px)
{
	.cntnNoteList{
		margin-top: 0px;
		margin-bottom: 10px;
	}

	.postSubmit{
		margin-top: 0px;
		margin-left: 0px;
		font-size: 11px;
		padding: 0px;
	}
}






.withNoteLK{
	display: inline-block;
	color: white;
	font-weight: bold;
	font-size: 15px;
	padding-right: 5px;
	padding-left: 5px;
	border-radius: 100px;
}

.withNoteLK:hover{
	background-color: black;
}


.withNoteLK_RESULT{
	display: inline-block;
	color: white;
	font-weight: bold;
	font-size: 13px;
	padding-right: 5px;
	padding-left: 5px;
	border-radius: 100px;
	margin: 0px 3px;
}


.withNoteLK_RESULT:hover{
	background-color: black;
}

.withNoteLK_accountGrade{
	display: inline-block;
	color: white;
	font-weight: bold;
	font-size: 16px;
	padding-right: 7px;
	padding-left: 7px;
	border-radius: 100px;
	padding-top: 3px;
	padding-bottom: 3px;
	background-color: black;
}





.red{
	border: 3px solid red;
	background-color: red;
}



.red:hover{
	color: red;
}


.redAccountGrade{
	color: red;
	border: 3px solid red;
}




.orange{
	border: 3px solid orange;
	background-color: orange;
}


.orange:hover{
	color: orange;
}


.orangeAccountGrade{
	color: orange;
	border: 3px solid orange;
}





.yellow{
	border: 3px solid yellow;
	background-color: yellow;
}


.yellow:hover{
	color: yellow;
}



.yellowAccountGrade{
	border: 3px solid yellow;
	color: yellow;
}




.green{
	border: 3px solid green;
	background-color: green;
}



.green:hover{
	color: green;
}



.greenAccountGrade{
	border: 3px solid green;
	color: green;
}



.blue{
	border: 3px solid blue;
	background-color: blue;
}


.blue:hover{
	color: blue;
}




.blueAccountGrade{
	border: 3px solid blue;
	color: blue;
}




.purple{
	border: 3px solid purple;
	background-color: purple;
}



.purple:hover{
	color: purple;
}


.purpleAccountGrade{
	border: 3px solid purple;
	color: purple;
}




.indigo{
	border: 3px solid indigo;
	background-color: indigo;
}




.indigo:hover{
	color: indigo;
}



.indigoAccountGrade{
	border: 3px solid indigo;
	color: indigo;
}







.content_content{
	display: inline-block;
	width: 100%;
}



@media screen and (max-width: 768px)
{
	.content_content{
		width: 100%;
		padding-left: 0%;
		border: 0px;

	}
}




.leftTop{
	display: block;
	width: 150px;
	height: 150px;
	float: left;
}

.rightTop{
	display: inline-block;
	width: 65%;
	text-align: center;
}




@media screen and (max-width: 768px)
{
	.leftTop{
		width: 70px;
		height: 70px;
	}

	.rightTop{
		width: 74%;
		min-width: 40px;
	}

}



.accountLi{
	font-size: 130%;
	display: inline-block;
	margin-bottom: 15px;
	margin-left: 10px;
	margin-right: 10px;
}


.styleAttributedGrade{
	border-bottom: 1px solid rgb(220, 200, 220);
	text-align: center;
	padding: 7px 0px;
}


.styleAttributedGradeOnlyLargeScreen{

}


.saveNshareLargeScreen{

}


@media screen and (max-width: 768px)
{
	.accountLi{
		margin-left: 2px;
		margin-right: 2px;
		font-size: 90%;

	}


	.styleAttributedGrade{
		padding-left: 0%;
		display: inline-block;
		width: 100%;
		
	}

	.saveNshareLargeScreen{
		display: none;
	}


	.styleAttributedGradeOnlyLargeScreen{
		display: none;
	}

}





.someInfos{
	display:inline-block;
	margin-top:4px;
	margin-left: 10px;
}


.cmtLikeStyle{
	color: black;
	font-weight: bold;
	font-size: 13px;
}

.AllUserStatus{
	display: inline-block;
	color: green;
	font-weight: bold;
	font-size:14px;
	margin:7px;
}


.statuLayOut{
	display: inline-block;
	width: 90px;
	height: 90px;
	border-radius: 100px;
	box-shadow: -1px 0px 7px black;
	border: 3px solid green;
	margin: 5px;
}



.AllUserPost{
	width:32%;
	height: 137px;
	display: inline-block;
	margin-bottom: 2px;
	overflow:hidden ; /* Cache les débordements */
	float: left;
	margin-right: 1%;
	
}


.SavedPostsDetails{
	width: 20%;
	margin-bottom: 100px;
	display:inline-block;
	margin-right: 5%;
	height: 85px;
	margin-bottom: 10px;
	float: left;
	overflow: hidden;
}

.postsInaccount
{
	width: 100%;
  height: 100%;
  object-fit: cover; /* Remplit tout l'espace en coupant l'excédent */
  
}


.iNaccountAllPosts{
	
}

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









.inDisplayPost{
	width: 400px;
	position: relative;
	float: left;
	display: inline-block;
}




@media screen and (max-width: 768px)
{
	.inDisplayPost{
		width: 100%;
		float: none;
		
	}
}



.backwards{
	text-align:center;
	display:inline-block;
	width: 100%; 
	padding-top: 10px;
	padding-bottom: 10px;
	border: 1px solid rgb(220, 220, 220);
	border-bottom: 0px;
	background-color: rgb(250, 250, 250);
	
	

}




.inDisplayImage{
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
}


.inDisplayNotation{
	display: inline-block;
	z-index: 1;
	width: 12%;
	margin-left: 85%;
	margin-top: 40%;
	height: 60%;

}


@media screen and (max-width: 768px)
{
	.inDisplayNotation{
		width: 15%;
		margin-top: 35%;
		margin-left: 85%;
	}
}






.bottomLK{
	display: inline-block;
	margin-right: 50px;
	color: black;
}


@media screen and (max-width: 768px)
{
	.bottomLK{
		margin-right: 5px;
		margin-right: 5px;
	}
}



.bottomLKLinks{
	color: black;
}


.bottomLKLinks:hover{
	text-decoration: underline;
}


.cntnFooter{
	font-family: "arial";
	margin-top: px;
	padding-left: 5%;
	display: inline-block;
	margin-right: 5%;
}

.descriptionSize{
	font-size: 170%;
	font-weight: bold;

}


@media screen and (max-width: 768px)
{
	.cntnFooter{
		padding-left: %;
	}


	.descriptionSize{
	}
}








.lkkL{
	padding: 13px;
	color: yellow;
	background-color: rgb(228, 35, 137);
	border-radius: 3px;
	margin: 50px;
	margin-left: 10%;
	margin-right: 7%;
	display: inline-block;
	font-size: 30px;
	font-weight: bold;
	text-transform: uppercase;
}


.detailsDetails{
	width: 340px;
	display: inline-block;
	margin-left: 2%;
	float: right;
}



@media screen and (max-width: 768px)
{
	.detailsDetails{
		width: 97%;
		margin-left: 0px;
		padding-left: 1%;
	}
}





.cntnTopHeadProfilepage{
	display: inline-block;
	width: 98%;
	/*background-color: rgb(228, 35, 147);*/
	
	padding-bottom: 50px;
	padding-left: 10%;
	padding-top: 5px;
	padding-bottom: 5px;
	color: white;
	border-radius: 3px;
	word-wrap: break-word;
	/*background: linear-gradient(rgb(228, 35, 157), rgb(228, 57, 245));*/
	background-color: rgb(0, 0, 0);
}





.profileImageInProfile{
	display: inline-block;
	float: left;
	height: 40px;
	width: 40px;
	border-radius: 100px;
	border: 5px solid white;
}


@media screen and (max-width: 768px)
{
	.cntnTopHeadProfilepage{
		width: 97%;
		padding-left: 3%;
	}


	.profileImageInProfile{
		height: 100px;
		width: 100px;
		border: 5px solid white;
		float: left;
	}
}





.TopTabDetailsUrl{
	display: inline-block;
	margin-top: 0px;
	margin-left: 13px;
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
	word-wrap: break-word;
	width: 70%;
}



@media screen and (max-width: 768px)
{
	.TopTabDetailsUrl{
		font-size: 17px;
		margin-left: 0px;
	}
}






.cntnScoreColored{
	padding: 5px 10px;
	background-color: rgb(228, 35, 157);
	color: rgb(255, 255, 0);
	border:2px solid darkred;
}

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

	.cntnScoreColored{
		background-color: rgb(228, 37, 157);
		color: yellow;
		padding: 2px 9px;

	}
}







.PublishFinal{
	text-align: center;
	background-color: rgb(228, 35, 157);
	padding: 10px;
	border-radius: 3px;
	color: rgb(255, 255, 0);
	display: inline-block;
	width: 80%;
	margin-left: 10%;
	font-weight: bold;
	text-transform: uppercase;
}



.outlogYno{
	padding-top: 20px;
	padding-bottom: 50px;
}	



.outlogYnoTop{
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
	display: inline-block;
	width: 100%;
}


.littleScreenOnly{
	display: none;
}


@media screen and (max-width: 768px)
{
	.outlogYnoTop{
		margin-top: 10px;
		font-size: 15px;
		margin-bottom: 0px;
	}

	.welcomeMessageOff{
		display: none;
	}

	.littleScreenOnly{
		display: block;
		font-size: 35%;
	}



}












.hidePost{
	font-size: 13px;
	font-weight: bold;
	display: inline-block;
	border: 3px solid red;
	color: red;
	padding: 5px;
}

.coloredTotalScore{
	text-transform: uppercase;
	text-align: center;
	background-color:rgb(0, 0, 0);
	padding: 7px;
	font-size: 30px;
	font-weight: bold;
	width: 100%;
	color: white;
}




.containFormTopNav{
	/*
	margin-left: 30px;
	display: none;

	*/
	  display: none;
      position: fixed;
      top: 0; 
      left: 0;
      width: 100%;
      height: 80%;
      background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent justify-content: center; */
      z-index: 5;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     background-color: white;
     margin-top: 70px;
     box-shadow:-0.2em 0 .4em gray;
     padding:10px; 
     
}


@media screen and (max-width: 768px)
{
	.coloredTotalScore{
		
	}


	.containFormTopNav{
		margin-top: 60px;
		
	}	
}



.searchFormForUsers{
	display:;
}



.executeResearch{
	display: inline-block;
}


@media screen and (max-width: 768px)
{
	.executeResearch{

	}
}




.ErrorPostDisplay{
	color: red;
}


.LinkToCreateStatu{
	text-transform: uppercase;
	font-weight: bold;
	padding:5px; border: 1px solid green; border-radius:3px; color: green;
}

.LinkToCreateStatu:hover{
	background-color: green;
	color: white;
}




.image_style{
	width: 100px;
	display: inline-block;
}



.contain_timer{
	display: inline-block;
	font-size: 50px;
	font-weight: bold;
	width: 100%;
}

.reactToStatus{
	color:black; background-color:rgb(150,150,150);padding: 3px; border-radius: 3px; font-size: 11px;
}


.allStatus{
	display: inline-block;
	width: 70px;
	padding: 3px;
	height: 70px;
	border-radius: 50px;
	border:2px solid green;
}

.ContainAllStatus{
	display: inline-block;
	color:  black;
	width: 70px;
	padding-bottom: 20px;
	padding-top: 10px;
	margin-left: 5px;
	margin-right: 5px;
}


.ContainAllStatus:hover{
	background-color: rgb(239, 239, 239);
}

.ContainAllStatus:focus{
	background-color: gray;
}


.notifications_i{
	float: right;
	color: inherit;
	border-radius: 0px;
	padding-left: 7px;
	padding-right: 7px;
	border: 2px solid yellow;
	margin-right: 20px;

}


.allMessageAlert{
	text-align: center;
	display: inline-block;
	margin-top: px;
	border-bottom: 1px solid rgb(200, 200, 200);
	padding-bottom: 20px;
	padding-top: 20px;
	width: 100%;
}


.design_message_container{
	padding: 10px;
	width: 90%;
	margin-left: 3%;
	font-size: 17px;
	border-bottom:1px solid rgb(196, 188,150);
	display: inline-block;
	padding: 30px 0px;
	text-align: left;
	word-wrap: break-word;
	
}



.senderProfilePhoto{
	float:left;
	width:20%;
	display:inline-block;
}


.cntnMessagesContainer{
	padding: 10px;
	background-color: rgb(240, 240, 240);
	border-radius: 5px;
	box-shadow: 1px 1px 5px;
	word-wrap: break-word;
	text-align:left ; 
	display: inline-block;
	width:auto;
	max-width: 80%;

}




.StatuPictureDisplayInMessage{
	display: inline-block;
	width: 70px;
	float: right;
	border-radius: 5px;

}


.StatuPictureDisplayInMessageLEFT{
	float: right;
	display: inline-block;
	width: 70px;
	border-radius: 5px;
}

.inClassdisplayMessager{
	display: inline-block;
	float: left;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	margin-top: 15px;
}

.inMessageGradeStyle{
	display: inline-block;
	font-weight: bold;
	font-size: 13px;
}


.inMessageUser{
	float: left;
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 50px;
}


.statuAnswer{
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 4px;
	margin-bottom: 5px;
	border-radius: 4px;
	background-color: white;
	display: inline-block;

}

.formMessage{
	padding: 5px;
	background-color: rgb(245, 245, 245);
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 5px;
	box-shadow: 0px 3px 5px;
}


.sendMessageTexteArea{
	border:2px solid darkblue;
	display: inline-block;
	width: 100%;
	font-family: inherit; 
	border-radius:3px;
	font-weight: bold;
}


.sendMessageTexteArea:focus{
	background-color: rgb(239, 239, 239);
	color: black;
	font-weight: bold;
}



.NewMessageSend{
	font-family: inherit;
	color: white;
	padding: 7px;
	border-radius: 3px;
	background-color: rgb(239, 239, 239);
}


.TopWelcomeMessage{
	text-align: center;
	margin-left: 10%;
	margin-right: 10%;
}


.cntnSttatdiv{
	margin-top: 20px;
	text-align: center; 
	display:inline-block;
	width: 65%;
	margin-left: 15%;
}

.cntnSttatdivSmallScreen{
	margin-top: 50px;
	text-align: center; 
	display:inline-block;
	width: 100%;
}


.topBeststatDiv{
	text-align: center;
	float: left;
	display: inline-block;
	margin-right: 3%;
	height: 230px;
	width: 150px;
	background-color: black;
	border-radius: 10px;
	box-shadow: 10px 5px 20px gray;
}


.topBeststatDivSmallScreen
{
	width: 25%;
	float: left;
	margin-right: 2px;
	display: inline-block;
	box-shadow: 10px 5px 20px gray;
	background-color: black;
	text-align: center;
	border-radius: 9px;
	margin-left: 5%;
}


@media screen and (max-width: 768px)
{
	.TopWelcomeMessage{
		display: ;
	}

	.cntnSttatdiv{
		margin-left: 2%;
		width: 98%;
		display: ;
	}

	.topBeststatDiv{
		width: 30%;
		margin-right: 2;
	}
}


.TopImageStatDiv{
	display: inline-block;
	border-radius: 20px;
	width: 100%;
}


.TopImageStatDivSmallScreen{
	border-radius: 9px;
	display: inline-block;width: 100%;
}


.iMageTopImageStatDiv{
	width:150px;
	height: 150px;
	border-radius: 10px;
	display: inline-block;
}


.ContainsDeatils{
	margin-top: 10px;
	text-transform: uppercase;
	color: white;
	width: 100%;
	display: inline-block;
	font-size: 13px;
	background-color: black;

}


.iMageTopImageStatDivSmallScreen{
	width: 100%;
	display: inline-block;
	border-radius: 9px;
}


.ContainsDeatilsSmallScreen{
	margin-top: 10px;
	text-transform: uppercase;
	color: white;
	width: 100%;
	display: inline-block;
	font-size: 13px;
	border-radius: 9px;
	background-color: black;
	padding-bottom: 10px;
	overflow: scroll;

}


@media screen and (max-width: 768px)
{
	.iMageTopImageStatDiv{
		width: 100%;
		display: inline-block;
	}

	.ContainsDeatils{
		margin-top: 7px;
		font-size: 10px;
	}

}



.bottomLkNewAccount{
	display: inline-block;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: bolder;
	margin-top: 70px;
	background-color: blue;
	color: yellow;
	padding: 7px;
	border-radius: 4px;
}




.liil{
	margin-left: 17px;
	font-weight: bolder;
	display: inline-block;
	border-bottom: 7px solid white;
}

.liil:hover{
	border-bottom: 7px solid black;
}


.allStatusStatusLink{
	display: inline-block;
}

.cntnallStatusStatus{
	width: 31%;
	height: 135px;
	display: block;
	margin-left: 1%;
	margin-bottom: 1%;
	color: black;
	font-weight: bolder;
	font-size: 14px;
	display: inline-block;
	border: 2px solid green;
	float: ;
	overflow: hidden;
	border-radius: 5px;

}


.allStatusStatus{
	 object-fit: cover; 
	width: 100%;
	height: 100%;
}

.allStatusStatusLink:hover{
	box-shadow: 3px 15px 35px black;
}


@media screen and (max-width: 768px)
{
	.cntnallStatusStatus{
			
	}

	.allStatusStatus{
		
	}
}





/*
design video
*/


.LZero{
	min-width: 270px;
	background-color: black;
	position: relative;
	z-index: 1;	
}




.LOne{
	width: 100px;
	right: 0px;
	bottom: 10px;
	position: absolute;
	z-index: 3;
}




.LTwo{
	width: 100%;
	background-color: ;
	z-index: 2;
}



@media screen and (max-width: 768px)
{
	.LZero{
		/*
		width: 100vw;
      	max-height: 100vh;
      	position: relative;
      	bottom: 100px;
      	height: calc(100vh - 10px);
      	background-color: black;
      	*/

	}

	.LOne{
		/*position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      background-color: rgba(0, 0, 0, 0); 
      color: white;
      display: flex;
      flex-direction: ;
      justify-content: center;
      align-items: center;
      */
	}


	.LTwo{
		position: absolute;
      bottom: 50px;
      left: 0;
      width: calc(100% - 70px); /* Width of the whole screen minus the width of the right div */
      height: 120px;
      background-color: rgba(0, 0, 0, 0); /* Fully transparent background */
      color: white;
      display: flex;
      padding-bottom: 0px;
      
	}

}





.LTHREE{
	width: 100%;
	top: 0px;
	position: absolute;
	z-index: 3;
	margin-top: 5px;
}

.LFOUR{
	bottom: 0px;
	position: absolute;
	z-index: 3;
	margin-bottom: 10px;
	margin-left: 10px;
	display: ;
}




@media screen and (max-width: 768px)
{
	.LFOUR{
		bottom: 70px;
	}

	
}




.PlayPauseButton{
	box-shadow: 3px 7px 20px black;
	display: inline-block;
	background-color: rgb(228, 37, 157);
	color: yellow;
	text-transform: uppercase;
	border:0px;
	padding: 3px;
	margin-right: 10px;
	font-size: 11px;
	border-radius: 3px;
	font-weight: bolder;
	font-family: inherit;

}



.watchLeftVideo{
	padding: 7px;
	color: yellow;
	background-color: rgb(228, 37, 157);
	font-weight: bolder;
	border-radius: 50px;
	font-size: 15px;
	float: left;
}

.watchRightVideo{
	padding: 7px;
	color: yellow;
	background-color: green;
	float: right;
	font-weight: bolder;
	border-radius: 50px;
	font-size: 15px;

}



.videoDesign{
	display: inline-block;
	margin: 0px;
	font-weight: bold;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 50px;
	display: inline-block;
	margin-right: 20px;
	
}



.allVideoDesign{
	display: inline-block;
	width: 100%;
	height: 100%;

}

.shareAndSavePost{
	font-size: 15px;
	font-weight: bolder;
	color: white;
	border-bottom: 3px solid inherit;
	margin-left: 5px;
}


.shareAndSavePost:hover{
	border-bottom: 5px solid white;

}

@media screen and (max-width: 768px)
{
	.shareAndSavePost{
		border-bottom: 0px;
	}

	.shareAndSavePost:hover{
		border-bottom: 0px;

	}
}



.inSharePost{
	width:50px;
	height:50px;
	border-radius:100px;
	float: left;
	display: inline-block;
}


.classPicture{
	display: inline-block;
	float: left;
	width: 30px;
	height: 30px;
	border-radius: 100px;
}


.addEltButtn{
	display:block; border-radius: 100px; box-shadow: 5px 5px 15px black; width:50px;
	float:left;
}

.modaleLink{
	display: block;
	padding: 20px;
	background-color: blue;
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom:  50px;
	border-radius:7px;
	text-align: center;
}



.modaleLink_{
	text-align: center;
	display: block;
	padding: 20px;
	background-color: rgb(135, 35, 250);
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	margin-top: 20px;
	border-radius:7px;
}



.new_message_member{
	display: block;
	border-bottom: 1px gray solid;
	padding-bottom: 20px;
}



.topAccountSmallScreen{
	display: inline-block;
	width: auto;
	margin-left: 50px;
	color: #007bff;
	padding: 3px;
	border-radius: 3px;
}

.topAccountSmallScreenBlackColor{
	color: black;
	display: inline-block;
	width: auto;
	margin-left: 50px;
}
	

.MidleNavigationLinks{
	margin-top:0px;
	display: inline-block;
	width: 100%;
}

.savednshare{
	margin-top: 20px;
	display: block;
	width: 30px;
	height: 25px;
	margin-left: 0px;
}


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


	.topAccountSmallScreen{
		margin-top: 10px;
		margin-left: 0px;
	}

	.topAccountSmallScreenBlackColor{
		margin-top: 10px;
		margin-left: 0px;
	}

	.hideOnsmallScreen{
		display: none;
	}

}


.titleSectionOnTop{
	width: 100%;
	font-weight: bolder;
	font-size: 50px;
	color: white;
	text-align:center;
	display: inline-block;
	text-transform: uppercase;
	background-color: #000;
	padding: 30px 0px;
	margin: 30px 0;
	box-shadow: 0px -5px 50px black;
}





#center_of_screen{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	width: 420px; /* Limit size of the screen */
	box-shadow: 1px 1px 5px black;
	border-radius: 50px;
	margin-top:0px;
}



.buttonReadInteractions{
	background-color: black;
	color: white;
	border: 0px; 
	font-size: inherit;
	border-bottom:5px solid black;
	

}

.buttonReadInteractions:hover{
	background-color: black;
	color: white;
	border: 0px; 
	border-bottom:5px solid white;
}