html,body 
{
padding:0;
margin:0;
}

header{
	width:100%;
}

body{
	/*background-color:black;*/
	background-color:#203748;
	color:white;
}

#langDiv{
	text-align:right;
	padding-right:100px;
}

p,li {
    font-size: 20px;
}

.title{
	color: #3cb0fd;
	font-size:30px;
	text-align:center;
	font-weight: bold;
	margin:5px;
}
.container{
	width:80%;
	margin:auto;
	background-color:#203748;
	padding-left:2%;
	padding-right:2%;
	/* mettre auto pour que le conainer fasse la taille de la page*/
	height:auto;
	border-radius: 10px;
	height: 100%;
}

#langDiv img:hover{
	cursor: pointer;
}

#linkKiwi{
	text-align:center;
}

#linkKiwi a:link {
    color: white;
	font-size: 25px;
}

/* visited link */
#linkKiwi a:visited {
    color: green;
}

/* mouse over link */
#linkKiwi a:hover {
    color: yellow;
}

label.part1{
  width:110px;
  display: inline-block;
}

label.clickable:hover{
	color:#31d084;
	cursor:pointer;
}

label.situation{
  width:40%;
  display: inline-block;
}

input[type="email"]:focus,input[type="text"]:focus {
outline: none;
box-shadow: 0px 0px 5px white;
border:2px solid #31d084;
}

#buttonPresentation{
	width:100%;
	margin:0;
	white-space: nowrap;
}

#opinion div {
	white-space: normal;
}

#rightButtonPresentation{
	display:inline-block;
	width:50%;
	margin:auto;
	text-align:center;
}
#leftButtonPresentation{
	display:inline-block;
	width:50%;
	margin:0;
	text-align:center;
}

.btn {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #3cb0fd;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #31d084;
  text-decoration: none;
}

#btn {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #3cb0fd;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

#btn:hover {
  background: #31d084;
  text-decoration: none;
}

#btnError {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #e98003;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

#btnError:hover {
  background: #31d084;
  text-decoration: none;
}

#leftButtonPrensetation :hover {
  background: orange;
  text-decoration: none;
}


.centerDiv{
	text-align:center;
}
.centerDivColor{
	text-align:left;
	border-radius: 25px;
	border-style: solid;
	/*background-color:#3c6787;*/
	padding-left:100px;
	border-color: #3c6787;
}

ul {
 list-style-type: decimal;
 list-style-position: outside;
 list-style-image: none;
}

#testPastemps{
	text-align:center;
	font-size:20px;
}

ul.checkbox  { 
  margin: 0; 
  padding: 0;
  list-style: none;
} 

ul.checkbox li input { 
/*distance entre la checbox et le label*/
  margin-right: 3px; 
} 

ul.checkbox li { 
  border: 1px transparent solid; 
  display:inline-block;
  /*distance entre la fin d'une checkbox et le debut d'une autre*/
  width:140px;
}

/*
input[type="radio"]{
	margin: 0 10px 0 10px;
}
*/

h1 {
    color:#31d084;
}

h2{
	color:#3cb0fd;
}

#form1 legend{
	margin:auto;
}

#form2{
	margin:auto;
	width:80%;
	/*background-color:red;*/
	/*text-align:center;*/
}
#form2 p { 
	display: inline;
}


label{
	font-size:20px;
}

fieldset{
	font-size:19px;
}


#playerZone{
	width:100%;
	height:315px;
	margin:0;
	white-space: nowrap;
}

#playerZone div {
	white-space: normal;
}

#infoArea{
	vertical-align:top;
	height:100%;
	display:inline-block;
	text-align:center;
	width:25%;
	/*background-color:gray;*/
	margin:0;
}
#infoDiv{
	display:inline-block;
	margin-top:10%;
}
.trackInfo{
	font-size:20px;
}

#errorVideo{
	vertical-align:top;
	height:100%;
	display:inline-block;
	text-align:center;
	width:25%;
	/*background-color:yellow;*/
	margin:0;
}
#errorForm{
	display:inline-block;
	margin-top:35%;
}

#player{
	display:inline-block;
	width:50%;
	text-align:center;
	/*background-color:blue;*/
	height:315px;
	margin:auto;
}

#opinion{
	width:100%;
	margin:0;
	white-space: nowrap;
	/*background-color:green;*/
}

#opinion div {
	white-space: normal;
}


#artistOpinion{
	display:inline-block;
	width:50%;
	margin:0;
	text-align:center;
	/*background-color:yellow;*/
}

#musicOpinion{
	display:inline-block;
	width:50%;
	margin:0;
	text-align:center;
	/*background-color:purple;*/
}

#artistOpiniontext{
	text-align:right;
	display: inline-block;
	/*background-color:blue;*/
}

#musicOpiniontext{
	text-align:right;
	display: inline-block;
	/*background-color:red;*/
}

#emotion{
	/*background-color:yellow;*/
	text-align:center;
}

#situation{
	/*background-color:purple;*/
	text-align:left;
}

.genre{
	width:100%;
	margin:0;
	white-space: nowrap;
}
.genre div {
	white-space: normal;
}

.labelGenreSelect{
	display:inline-block;
	margin:0;
	vertical-align:top;
	text-align:left;
	width:50%;
	
}

.genreSelect{
	display:inline-block;
	margin:0;
	text-align:left;
	width:50%;
}


.checkboxDiv{
	width:100%;
	margin:0;
	white-space: nowrap;
	display:block;
}

.checkboxDiv div {
	white-space: normal;
}

.emotionLabels{
	/*background-color:blue;*/
	display:inline-block;
	width:35%;
	margin:0;
	vertical-align:top;
	text-align:left;
}

.emotionCheckboxs{
	/*background-color:red;*/
	display:inline-block;
	width:60%;
	margin:0;
	text-align:left;
}

.situationLabels{
	padding-left:40px;
	display:inline-block;
	width:40%;
	margin:0;
	vertical-align:top;
	text-align:left;
}

.situationCheckboxs{
	display:inline-block;
	width:60%;
	margin:0;
	text-align:left;
}

.checkboxDiv label{
	width:100%;
}

.clair{
	width:100%;
	margin:0;
	background-color:#21387c;
}

.fonce{
	width:100%;
	margin:0;
}

.wrap {
  font:12px Arial, san-serif;
}
form .statement {
  display:block;
  font-size: 18px;
  font-weight: bold;
  padding: 30px 0 0 4.25%;
  margin-bottom:10px;
  text-align:left;
}
form .likert {
  list-style:none;
  width:80%;
  margin:auto;
  padding:0 0 35px;
  display:block;
  /*border-bottom:2px solid white;*/
}
form .likert:last-of-type {border-bottom:0;}
form .likert:before {
  content: '';
  position:relative;
  top:11px;
  left:9.5%;
  display:block;
  background-color:#31d084;
  height:3px;
  width:77%;
}
form .likert li {
  display:inline-block;
  width:19%;
  text-align:center;
  vertical-align: top;
}
form .likert li input[type=radio] {
  display:block;
  position:relative;
  top:0;
  left:50%;
  margin-left:-6px;
  
}
form .likert li label {
	width:100%;
	}
form .likert li label:hover{
	cursor: pointer;
	color:#31d084;
}
input:hover, select:hover{
  cursor: pointer;
}


footer{
	/*background-color:purple;*/
	text-align:center;
}
.obligatoire {color: #31d084}


#logout{
	text-align:center;
	height:100vh;
	display: table;
	overflow: hidden;
	width:100%;
}
#logout div{
	display: table-cell; 
	vertical-align: middle;
}

#logout p{
	 font-size: 25px;
}
#likeArtistDiv{
display: none;
}
#emotionOpinion{display: none;}
#situationSocial{display: none;}
#situationEnergy{display: none;}
#situationEnvironment{display: none;}
#situationPlace{display: none;}
#situationWeek{display: none;}
#situationDay{display: none;}
#situationSeason{display: none;}
#situationWeather{display: none;}
#situationActivity{display: none;}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}