@font-face {
    font-family: 'Impact';
    src: url('Impact.ttf') format('truetype'); 
}

body{
	margin:0px;
	padding: 0px;
	font-family: Arial;
}

a{
	text-decoration: none;
}


input{
	margin-top: 0px;
}

.all_body_container{
	width: 100%;
	height: calc(100vh - 120px);
	padding-bottom: 200px;

}




.container-in-case{
	width: 70%;
	margin-left: 15%;
	margin-top: 100px;
	padding-bottom: 100px;
}


@media screen and (max-width: 768px)
{
	.container-in-case{
		width: 95%;
		margin-left: 3%;
		margin-top: 15px;
		text-align: center;
		margin-bottom: 100px;
	}

	.HIDE_SMALL_SCREEN{
		display: none;
	}


}



.containTitlemainTop{
	text-align: center; 
	display: inline-block;
	border-radius: 4px; 
	background-color: rgb(228, 37, 157);
	font-size: 17px;
	box-shadow: -1px -1px 50px black;
}


.PlateformeNAME{
	float: left;
	display: inline-block;
	background-color: blue;
	padding: 33px 3px;
	border-radius:inherit;
	color: yellow;
	font-weight: bold;
	
}


.WelcomeMessageDescription{
	display: inline-block;
	text-transform: uppercase;
	color: yellow;
	padding: 33px 3px;
	border-radius:inherit;
	background-color: rgb(228, 37, 157);
}



@media screen and (max-width: 768px)
{
	.containTitlemainTop{
		background-color: unset;
		border-radius: 9px;
	}



	.PlateformeNAME{
		display: inline-block;
		width: 99%;
		float: none;
		padding: 21px 3px;
		border-radius: 0px;
		border-top-left-radius: 9px;
		border-top-right-radius: 9px;
	}

	.WelcomeMessageDescription{
		padding: 3px;
		border-radius: 0px;
		background-color: yellow;
		color: rgb(228, 37, 157);
		width: 99%;

		
	}

}






.accountButton{
	padding: 7px;
	background-color: white; 
	border-radius: 5px; 
	color: black; 
	text-decoration: none;
	display: inline-block; 
}


.categoriesPaths{
	margin-top: 30px;
	float: left;

}



.PagetitleSectionTop{
	width: 90%;
	margin-left: 5%;
	margin-bottom: 17px;
}


.index_page_container{
	width: 90%;
	margin-left: 5%;
	margin-top: 5%;
	height: calc(100vh - 150px);
	display: inline-block;
	position: fixed;
	overflow-x: auto;
}



@media screen and (max-width: 768px)
{
	.index_page_container{
		margin-top: 10%;
		width: 95%;
		margin-left: 2.5%;

	}
}




.container_loadable_content{
	width: 100%;
	margin-top: 5%;
}





@media screen and (max-width: 768px)
{
	.container_loadable_content{
		text-align: center;
		display: inline-block;
		width: 100%;
		margin-bottom: 100px;
		text-align: center;
	}

}


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


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

.sub_menuLink{
	font-size: 13px;
	color: black;
	margin-left: 3%;
	margin-right: 3%;
	display: inline-block;
	text-transform: uppercase;
	font-weight: bold;
}




/*
SIDEBAR MENU


*/

#menuButton {
      font-size: 25px;
      cursor: pointer;
      font-weight: bolder;
      position: fixed;
      top: 10px
      left:10px;
      
    }


#sideMenu {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 0px;
      text-align: left;
    }

    #sideMenu a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 17px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }

    #sideMenu a:hover {
      color: #f1f1f1;
    }


.topTitleStyle{
	margin-left: 50px;
	display: inline-block;
	padding-top: 7px;
	font-size: 20px;
	font-weight: bold;
	position: fixed;
}


.ErrorPostDisplay{
	color: white;
	background-color: red;
	padding: 3px;
	font-size: 13px;
	display: inline-block;
}







.question{
	margin-bottom: 50px;
	border-bottom: 1px solid white;
	padding-bottom: 30px;
}

.labelContent{
	display: block;
	margin-top: 30px;
}

.radioStyle{
	display: inline-block;
	
}

.count_errors{
	color: blue;
	margin-top: 30px;
}



.divThOne{
	margin-top: 30px;
	margin: auto;
	text-align: center; 
	margin-top: 30px;
	width: 80%;
}


.divContainForm{
	border:2px solid white; 
	display:inline-block; 
	padding: 50px 9px; 
	width: 100%; 
	margin-bottom: 50px;
	margin-top:50px;
}


@media screen and (max-width: 768px)
{
	.divThOne{
		width: 100%;
		margin-top: 50px;
	}

	.divContainForm{
		padding: 20px 0px; 
		margin-bottom: 50px;
		margin-top:0px;
		width: 95%;
	}


}

.containMainIndexContent{
	margin-bottom: 100px;
}



.PricingLink{
	display: inline-flex;
	background-color: black;
	color: white;
	padding: 9px;
	border-radius: 3px;
	text-transform: uppercase;
}


.styled-list{
	margin-top: 20px;
}

/* Style for list items */
.styled-list li {
  margin-bottom: 10px; /* Add margin at the bottom of each list item */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f8f8f8;

}

.checkPayment{
	display: inline-block;
	padding: 3px;
	color: white;
	margin: 10px;
	border-radius: 2px;
	font-size: 20px;
}

.yesPaid{
	background-color: green;

}

.noPaid{
	background-color: red;

}

.legendCategories{
	display: inline-block;
	height:300px;
	width: 49%;
}

#welcomeDescription{
	display: inline-block;
	width: 80%;
	margin-top: 30px;
	font-size: 170%;
	color: white;
	text-shadow: 1px 1px black;
	font-weight: bolder;
}

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

	.legendCategories{
		height:auto;
		width: 100%;
	}



}


.callToPay{
	background-color: blue;
	color: yellow;
	padding: 9px;
	border-radius: 3px;
	font-weight: bold;
	box-shadow: 6px 17px 20px black;
	display:inline-block;
}


.inAccount{
	font-size: 15px;
	padding: 10px;
}

.moreProfilBar{
	background-color: rgb(240,240,240);
	padding: 30px 0px; 
	text-align: center;
	opacity: 0.5;
	color: blue;
	font-weight: bold;
	text-transform: uppercase;
}


@media screen and (max-width: 768px)
{
	.moreProfilBar{
		padding: 20px 0px;
		font-size: 11px;
		margin: 7px 0px;
	} 
}




.displayUserButton{
	background-color:black;
	padding:9px 13px;
	display:inline-block;
	color:white;
	font-weight: bold;
	font-size: 14px;
	margin-bottom:5px;
	margin-right: 3px;
	border-radius: 500px;
}