/* CONTENU ET CONTENANTS */

/* Reset */
*{
    margin: 0px;
    padding: 0px;
}

<!--*{
box-sizing: content-box;
}-->



/* MASTERS */


.color_header {
width:100%;
min-width:350px;
min-height:60px;
background-color:#5659FF;
border-radius: 5px;
border-bottom:none;
height:40px;
text-align:left;

}


.toggle {
max-width:800px;
min-width:350px;
width:100%;
text-align:left;
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
position:relative;
padding:8px 0px;
display:inline;
}

.flex {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;

}

.wrap{
	flex-flow: row wrap;
}

/* Navigation bar */



nav{
    width: 100%;
    margin: 0 auto;
    background-color: #5659FF;
    top: 0px;
}

nav ul{
    list-style-type: none;
}

nav ul li{
    float: left;
    text-align: center;
    position: relative;
}

nav ul::after{
    content: "";
    display: table;
    clear: both;
}

nav a{
    display: block;
    text-decoration: none;
    color: white;
	text-align:left;
}

nav a:hover{
    color: #eeeeee;
}

.sous{
    display: none;
    box-shadow: 0px 1px 2px #CCC;
    background-color: #5659FF;
    position: absolute;
    width: 100%;
    z-index: 1000;
}
nav > ul li:hover .sous{
    display: block;
}
.sous li{
    float: none;
    width: auto;
    text-align: left;
}
.sous a{
    padding: 5px;
    border-bottom: none;
}
.sous a:hover{
    border-bottom: none;
    background-color: RGBa(200,200,200,0.1);
}

.deroulant {
    color:white;
}

.deroulant::after{
    content:" ▼";
    font-size: 12px;
}


@media (max-width: 600px) {  
	 .deroulant::after{
	content:"";
	}
}

/* Fin menu déroulant */

/* Pour ne pas afficher certaines choses quand petite fenêtre*/

@media (max-width: 600px) {  
	 .hideSmartphone{
	 display:none;
	}
	
	.widthAutoSmartphone{
	 width:auto;
	}
}



.master_page {
max-width:800px;
min-width:350px;
width:100%;
text-align:left;
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
position:relative;

}

.width800 {
max-width:800px;
}


.top_header {
background-color:white;
border:1px solid #5659FF;
border-radius: 5px;
margin-top:5px;
padding:5px;
height:20px;
position:relative;
}

.top_label {
font-size:11pt;
text-align:right;
border-left:1px solid #5659FF;
padding:0 10px;
width:100%;
overflow: auto;
}


.page_content {
background-color:white;
border:1px solid #46913F;
border-radius: 3px;
margin-top:5px;
padding-bottom:2%;
}


.footer {
margin-top:7px;
margin-bottom:7px;
padding-left:10px;
padding-right:10px;
text-align:right;
height:auto;
position:relative;
overflow: auto;
border-radius: 5px;
background-color:white;
}


.footer_label {
margin-top:7px;
margin-bottom:7px;
font-size:11pt;
color:#46913F;
text-align:right;
padding:1px 15px 1px 15px;
border-right:1px solid #bac5e6;
border-left:none;
}

.error_message {
background-color:Bisque;
border:1px solid red;
}

.question-field {
margin-top:10px;
margin-bottom:10px;
width:100%;
}

.field-label {
width:50%;
max-width:170px;
padding-top:3px;
}

.field-label2 {
width:50%;
padding-top:3px;
}

.content-field {
width:50%;
max-width:250px;
}

.field-box {
width:100%;
height: 25px;
padding-left:5px;
font-family:Calibri,Arial,Helvetica,sans-serif;
font-size:15px;
}

.textarea1 {
padding:5px;
font-family:Calibri,Arial,Helvetica,sans-serif;
font-size:1em;
}


/*Pour les champs de login*/

.little_content{
	padding: 16px; 
	max-width:300px;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
}

.title_login{
	font-weight:600;
	font-size:15pt;
	color:#5659FF;
	margin-bottom:7px;
}

.form-control{
	width: 80%;
	padding:3px
}

.form-group{
	margin-top:16px;
}

.help-block {
color:red;
}

.has-error {
	border:1px solid red;
	border-radius: 4px;
}

/*Buttons and images*/

.nextButton {
background-color:#5659FF;
color:#fff;
font-size:1.05em;
border-radius: 2px;
margin-top:5px;
margin-bottom:5px;
padding:3px 10px;
border:none;
cursor: pointer;
float:right;
}

.nextImage {
cursor: pointer;
float:right;
margin-top:3px;
margin-bottom:3px;
}


.nextButton:hover {
background-color:#89D822;
color:white;

}

.addButton {
background-color:white;
font-size:0.9em;
border-radius: 2px;
padding:3px 10px;
border: 1px solid #F9BA32;
cursor: pointer;
}

.addButton:hover {
background-color:#89D822;
color:white;
border: 1px solid #89D822;

}

.introButton {
background-color:white;
font-size:1.2em;
min-width:250px;
border-radius: 12px;
padding:3px 10px;
border: 2px solid #F9BA32;
cursor: pointer;
margin-left:5px;
margin-top:5px;
}



.introButton:hover {
background-color:#89D822;
border: 2px solid #89D822;
color:white;
}

.tryTestButton{
	text-decoration:none;
	color: #ffffff; 
	background-color: #5659FF; 
	border: 0; 
	border-radius: 5px; 
	cursor: pointer; 
	font-size: 14px; 
	font-weight: bold; 
	margin: 15px; 
	padding: 12px 25px; 
	display: block; 
	margin-left:auto;
	margin-right:auto;
	 
}

.tryTestButton:hover {
background-color:#89D822;
color:white;

}

.submit_button {
background-color:#5659FF;
color:white;
font-size:0.9em;
border-radius: 2px;
padding:3px 10px;
border: 1px solid #5659FF;
cursor: pointer;
}

.submit_button:hover {
background-color:white;
color:black;
}

.loader{
	background: <img src='https://www.mindfultest.be/imagesGeneral/ajax-loader.gif'> 50% 50% no-repeat rgba(255, 255, 255, 0.8);
	cursor: wait;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}

.image_logo{
height:auto;
cursor: pointer;
margin-left:15px;
max-width:45px;
}

.image_logo2{
margin-top:8em;
}

.image_button{
height:auto;
cursor: pointer;
margin-left:7px;
}

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

.centerHorizon{
	margin: 0; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	-ms-transform: translate(-50%, -50%); 
	transform: translate(-50%, -50%);
}

@media (max-width: 500px) {
	 .image_logo{
	display: none;
	height:auto;
	cursor: pointer;
	}
}

/*TEXTE*/

body {
background-color:#EDEDFF;
font-family:Calibri,Arial,Helvetica,sans-serif;
/*font-size:1.1em;*/
font-size:13pt;
}

.text {
color:#565656;
text-align:left;
font-weight:400;
margin-right:15px;
margin-left:40px;
margin-top:15px;
margin-bottom:15px;
}

.text-bold {
font-weight:600;
}

.question {
color:#565656;
text-align:left;
font-weight:600;
margin-right:15px;
margin-left:40px;
margin-top:15px;
margin-bottom:15px;
font-size: 13.5pt;

}

.optionMC {
  display:  block;
  margin-left:60px;
  margin-top:10px;
}

body.h1{
font-size: 2em;
text-align: left;
}

h2 {
font-size:14pt;
font-weight:600;
color:#46913F;
margin-left:20px;
margin-top:7px;
margin-bottom:7px;
padding-left:0px;
padding-right:10px;
text-align:left;
}

small {
font-size:10pt;
}

.titleCreator {
font-size:16pt;
font-family:Lucida,Arial,Helvetica,sans-serif;
font-weight:500;
color:#5659FF;
margin-left:20px;
margin-top:25px;
margin-bottom:2px;
padding-left:0px;
padding-right:10px;
text-align:left;
}


.titleIntro {
color:white;
text-align:center;
font-weight:600;
font-size:40pt;
margin-top:10px;
}

.textIntro {
color:white;
text-align:center;
font-weight:500;
font-size:20pt;
margin-top:20px;
margin-bottom:30px;
}

.reportComment{
	font-size:10pt;
	color:#9E9F9F;
}

.pageNumber{
font-size:12pt;
color:#46913F;
font-weight:300;
margin-left:10px;
margin-top:14px;
margin-bottom:14px;
float: left;
}


.li-indent {
	list-style: inside;
}

ul.no_bullet {
list-style-type: none;
padding: 0;
margin: 0;
margin-top:10px;
}
li.arrow {
background: url('../img/bulletArrow.png') no-repeat left top;
padding-left: 38px;
padding-top: 0px;
padding-bottom: 3px;
margin-left:10px;
margin-bottom:5px;
}

/*TABLEAUX*/

table {
	width:100%;
}

table, th, td {
  border-collapse: collapse;
  font-size:0.95em;
}

table tr:nth-child(even) {
  background-color: #eeeeee;
}
table tr:nth-child(odd) {
 background-color: #ffffff;
}

th, td {
  padding: 15px 8px;
}

.likert th, .likert td {
  text-align: center;
}
.likert td:nth-child(1) {  
  text-align:left;
  width:auto;
}

.likert3a td {
  width: 16%;
}

.likert4a td {
  width: 13%;
}
.likert5a td {
  width: 10.5%;
}

.likert4a {
  width:100%;
}
.likert3a, .likert4a, .likert5a  {
  width:100%;
}

.likert7 {
  font-size:0.9em;
}
.likert7 td {
  width: 8%;
}




.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.situationField {
  text-align: left;
  border: 1px solid #eeeeee;
  margin: 20px; 
  margin-left: 7px;
  margin-right: 7px;
  padding: 7px;
}

.hide{
	display: none;
}

.show1000{
	display: block;
}

@media only screen and (min-width: 1000px) {
	.show1000{
		display: none;
	}
}


/* The Modal (background) */
.modal {
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  padding-top: 10px;
  border: 2px solid #F9BA32;
  max-width: 700px;
  min-width: 300px;
  width: 80%; /* Could be more or less, depending on screen size */
}

.modal-text {
  margin-top: 40px;
  margin-bottom: 20px;
}

.modal-button {
  margin: 10px;
  margin-left: 0px;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.whiteScreen {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: white; /* Fallback color */
}