@font-face {
	font-family: "phitradesign_handwritten";
	src: url("font/phitradesign_handwritten.ttf");
}


@font-face {
	font-family: "timoteo";
	src: url("font/timoteo.ttf");
}


body {

	margin:0;
	padding:0;
	background: url('../img/fond.png') no-repeat center fixed;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover; /* version standardis�e */
	cursor: url('../img/cursors/hand_0.cur'), auto;

	/* font-family: "timoteo", sans-serif; */

}

.font_bd{
	font-family: "timoteo", sans-serif;
}


a{
	cursor: url('../img/cursors/hand_1.cur'), auto;
}


body:active , a:active  {


	cursor: url('../img/cursors/hand_2.cur'), auto;

}

.container-fluide {
	padding : 5px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	width: 97%;
	background-color: white;
	opacity: 0.95;
	border-radius: 10px;

}

.table {
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	width: 97%;

}

h5 {
	padding : 5px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	width: 97%;
	background-color: white;
	opacity: 0.95;
	border-radius: 10px;

}


.control-label {
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	width: 97%;
	padding : 5px;
	color : blue;
	font-weight : bold;
	font-family:'interstateregular';
	font-size : 25px;
	/* text-transform:uppercase; */

}

Legend {
	padding : 16px;
	background-color: grey;

	background: url('../img/banniere.png') no-repeat right ;
	-webkit-background-size: auto 100% ; /* pour anciens Chrome et Safari */
	background-size: cover ; /* version standardis�e */

	opacity: 0.95;
	border-radius: 10px 10px 0 0;
	font-size : 25px;
	color : green;
	font-weight : bold;
	text-transform:uppercase;

}


.legend2 {
	padding : 16px;
	background-color: grey;

	background: url('../img/background/generaliste.png') no-repeat center ;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover; /* version standardis�e */

	opacity: 0.95;
	border-radius: 10px 10px 0 0;
	font-size : 15px;
	color : yellow;
	font-weight : bold;
	text-transform:uppercase;


}

.jumbotron{
	padding : 20px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 80px;
	margin-right: 80px;
	color : blue;

}

.carousel-caption {
    background: none;
}

.carousel-control.left, .carousel-control.right {
    background-image: none;
}




.tremble {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;
    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

.zoom {
    animation: zoom-in-zoom-out 0.4s ease infinite alternate;

}



@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}





 /* Split the screen in half */
.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Control the left side */
.left {
  left: 0;
  background-color: blueviolet;
}

/* Control the right side */
.right {
  right: 0;
  background-color: red;
}

/* If you want the content centered horizontally and vertically */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Style the image inside the centered container, if needed */
.centered img {
  width: 150px;
  border-radius: 50%;
}



.evenNumber, .oddNumber {

	 width: 100px;
	 height: 100px;
	 margin: 10px;
	 padding: 10px;
	 float: left;
	 background-color: #333333;
	 color: #FFFFFF;

}





/*mettre icone dans input */
/* enable absolute positioning */
.inner-addon {
    position: relative;
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }



.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}




/* couleur modal titre */
.modal-header {
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: lightskyblue;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
 }




 /* tags genre */
.wrap-tag {
  display: flex;
  flex-direction: column;
  max-width: 160px;
}
.wrap-tag {
  margin: 0 5px 5px;
}
.wrap-tag { font-size: 16px; }




a:hover{
	opacity : 0.75;
}

.bg-grade{
	background: url('../img/type_score/grade.png') repeat;
	background-size: auto 40px ;

	background-color: lightblue ;
}


.progress{
    background-color: lightgrey;

}

.progress_test{
    background: url('../img/boutons/bouton3_v.png') repeat;
	background-size: auto 19px;

}

.bg-diplome{
	background: url('../img/type_score/diplome.png') repeat;
	background-size: auto 40px ;

	background-color: pink ;
}

.bg-diplome_neg{
	background: url('../img/type_score/diplome_neg.png') repeat;
	background-size: auto 40px ;

	background-color: pink ;
}

.bg-social{
	background: url('../img/type_score/social.png') repeat;
	background-size: auto 40px ;

	background-color: lightgreen ;
}

.bg-social_neg{
	background: url('../img/type_score/social_neg.png') repeat;
	background-size: auto 40px ;

	background-color: lightgreen ;
}


footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: bg-dark;
    color: white;
    text-align: center;
}


.bouton_jouer {
	background: url('../img/play.png') no-repeat ;

    background-size: auto 40px ;
    width:220px;
    height:40px;
    text-align: left;
    border-radius: 10px 10px 10px 10px;
    border:0;
    cursor: url('../img/cursors/hand_1.cur'), auto;

    font-family: "timoteo", sans-serif;
}

.bouton_jouer:hover {
    opacity:0.8;
    cursor: url('../img/cursors/hand_1.cur'), auto;

}

.bouton_jouer:active {
    opacity:0.8;
    cursor: url('../img/cursors/hand_1.cur'), auto;

}


.bouton_choix_partie_0 {
	background: url('../img/boutons/vide.png') no-repeat ;

    background-size:  100%  60px;
    width:60%;
    max-width:400px;
    height:60px;

    text-align: center;
    color: blue;
    border-radius: 10px 10px 10px 10px;
    border:0;
    cursor: url('../img/cursors/hand_1.cur'), auto;

    font-family: "timoteo", sans-serif;
}

.bouton_choix_partie {
	background: url('../img/boutons/vide.png') no-repeat ;

    background-size:  100%  60px;
    width:120%;
    height:60px;
    text-align: center;
    color: blue;
    border-radius: 10px 10px 10px 10px;
    border:0;
    cursor: url('../img/cursors/hand_1.cur'), auto;

    font-family: "timoteo", sans-serif;
}

.bouton_choix_partie_2 {
	background: url('../img/boutons/vide_2.png') no-repeat ;
    background-size:  100%  60px;
}

.bouton_choix_partie_3 {
	background: url('../img/boutons/vide_3.png') no-repeat ;
    background-size:  100%  60px;
}

.bouton_choix_partie:hover , .bouton_choix_partie_2:hover , .bouton_go:hover{
    opacity:0.8;
    cursor: url('../img/cursors/hand_1.cur'), auto;
}



#choix_patho * , #choix_nb_cas * {
    color: green;
    font-family: "timoteo", sans-serif;
    text-align:center;
    height:40px;
    width:100%;
    border:2;

    cursor: url('../img/cursors/hand_1.cur'), auto;

}

#choix_patho:hover * , #choix_nb_cas:hover *{
    opacity : 0.75;

}



.grayscale { filter: grayscale(100%); }




.bouton_go {
	background: url('../img/bag.png') no-repeat ;

    background-size: auto 60px ;
    width:70px;
    height:60px;
    text-align: center;
    color: white;

    border:0;
    cursor: url('../img/cursors/hand_1.cur'), auto;
}






.bouton_answer {
	background: url('../img/bouton_answer.png') no-repeat ;

    background-size: cover ;
    width:5vw;
    height:5vw;

    text-align: center;
    color: red;
    border-radius: 10px 10px 10px 10px;
    border:0;
    cursor: url('../img/cursors/parler.cur'), auto;
}

.bouton_answer:hover {
    opacity:0.8;
    cursor: url('../img/cursors/parler.cur'), auto;
}




/* aligner text label bouton etx */
.a_b {
	display: inline-block;
	line-height: 200%;
}
.a_option {
    text-align: right;
    float: left;
    margin-right: 5px;
}
.b_bouton {
    float: left;
}



.select_disabled {
	pointer-events: none;  /**<-----------*/
	text-shadow: 1px 1px 0px blue;
	opacity: 0.7;
}



.image_close, .image_agrandir , .image_retrecir{

    height: 2.5vw;
    width: 2.5vw;

}




.droit {
    float:right;

}

.gauche {
    float:left;

}

.haut {
    float:top;

}

.bas {
    float:bottom;

}


.centre {
    float:center;

}




.img_score_grade{
	position:absolute;
	z-index:11;

	width:22%;
	margin-left:4%;
	margin-top:2%;
}

.img_score_diplome{
	position:absolute;
	z-index:13;

	width:30%;
	/* margin-top:-6%; */
}

.img_score_social{

	position:absolute;
	z-index:12;

	width:30%;
	/* margin-top:-10%; */

}

.img_score_help{

	position:absolute;
	z-index:14;

	width:30%;
    opacity:0;
	/* margin-top:-10%; */

}


.img_score_help:hover{
	opacity:1;

}




.img_palmares > .img_score_grade, .img_palmares > .img_score_diplome, .img_palmares > .img_score_social{
	width:5%;
	height:70px;
	margin-left:-5%;
	margin-top:-0.8%;
	position:absolute;

}


.img_palmares_profil > img{
	width:100%;
	height:auto;
	margin-left:auto;
	margin-top:-0.8%;

	position:absolute;



}

.img_palmares .img_score_diplome:hover, .img_profil_menu .img_score_diplome:hover{
	transform: scale(2.5);

}



.img_profil_menu > img{
	width:auto;
	height:100px;
	margin-left:auto;
	margin-top:-0.8%;

	position:absolute;

}


#fond_diplome{
   /* background: url('../img/score/fond_diplome_bad.png') no-repeat center; */
    background-size: auto 300px ;
    padding: 20px;
    text-align: center;

    font-family:'interstateregular';
	font-size : 25px;

}

.fond_diplome_bad{
    background: url('../img/score/fond_diplome_bad.png') no-repeat center;
}

.fond_diplome_good{
    background: url('../img/score/fond_diplome_good.png') no-repeat center;
}

.fond_diplome_neutre{
    background: url('../img/score/fond_diplome_neutre.png') no-repeat center;
}



#img_profil_fond_diplome > .img_score_diplome, #img_profil_fond_diplome > .img_score_grade, #img_profil_fond_diplome > .img_score_social{
	width:150px;
	height:auto;
    margin-top:-160px;
    margin-left:70px;

}

/* plusieur modal et scroll */
.modal { overflow: auto !important; }


.tooltip {
animation-name: delayedFadeIn;
animation-duration: 3s; /* Adjust this duration */
}

.tooltip:not(:hover) {
opacity: 0;
}

@Keyframes delayedFadeIn {
0% {opacity: 1;}
75% {opacity: 1;} /* Set this to 99% for no fade-in. */
100% {opacity: 0;}
}

form .hidden {display:none; }

form .visible {display:block; }