@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap&subset=latin-ext');
body{
  background-color:#FFFFFF!important;
}

body,td,th,form,span {
  font-family:Arial,Arial,Helvetica,sans-serif!important;
}

.Page{
  background:#EFF2F3!important;
  font-family:Arial,Arial,Helvetica,sans-serif!important;
  font-size:13px!important;
  max-width:800px!important;
  width:100%!important;
}
.Text, .Section .Text{
  width:700px!important;
}
.main {
  background:#EFF2F3!important;
}
.Question .Title, .Question .TitleSelected, .Section .Title, .Section .TitleSelected{
  font-size:15px!important;
}
.Question .Title, .Section .TitleSelected, .Section .Title{
  background:#4A4538!important;
  color:#FFFFFF!important;
  border-bottom:0px solid #FFFFFF!important;
  margin-bottom:1px;
}
.Section .Question .Title{
  background:#4A4538!important;
  color:#FFFFFF!important;
  border-bottom:0px solid #FFFFFF!important;
}
.Section {
  font-size:13px!important;
}
.Section .Question .Title, .Section .Question .TitleSelected{
  font-size:13px!important;
}

.Question, .Section, .Image .Title  {
  background:#FCFCFC!important;
}
.groupcolumn, .grouplastcell, .question .info, .groupline, .Question .Modality label {
  color:#000000!important;
  font-size:13px!important;
 }
.groupcolumn{
  width:auto!important;
}
.section .groupcolumn, .grouplastcell, .section .question .info, .groupline, .section .Question .Modality label {
  color:#000000!important;
  font-size:13px!important;
}
.question .info {
font-weight: normal;
padding: 5px 5px 0;
margin-left: 10px;
}
.Section .Question .info{
margin-left: 0px;
}

.Question .Body, .Section .Body
{
background:none;
padding: 0px 10px 0px 3px!important;
    padding-left:15px!important;

}

.Section .Body{
padding-top:5px!important;
}
.Question .Body .Text p, .Section .Body .Text p{
  margin:2px;
}
.question, .section {
margin: 0px;
margin-top: 1px;
}

.Image .Title  {
  border:1px solid #FCFCFC!important;
  padding:2px!important;
}
.mandatory, .mandatorySign{
  font-weight: bold!important;
  color: #9c171d!important;
}
.Section .TitleSelected, .TitleSelected {
  color:#9c171d!important;
  border:2px solid #9c171d!important;
  background: #4A4538!important;
  background-image:none;
}


.progress .FRONT{
  height:10px!important;
  width:0%!important;
  background:#a968d1!important;
  margin:10px 2px 0px 2px!important;
}
.header {
  height:200px!important;
}
.header .RIGHT {
  margin-top:200px!important;
  color: #000000 !important;
  font-family: arial !important;
  font-size: 20px !important;
  margin-left:0px !important;
}

BUTTON{
  font-family:Arial,Arial,Helvetica,sans-serif!important;
  background:#D3D4D0!important;
  height:30px; width:auto;
  cursor:pointer;
  border:1px solid #D3D4D0!important;
  bottom:0px!important;
  color:#000000!important;
}
BUTTON SPAN {
FONT-WEIGHT: BOLD;
    FONT-SIZE: 13PX;
    PADDING: 7PX;
}
button img {
    position: relative;
    top: 3px;
}

.linkeq{
  
  display:none!important;
  
  float:none!important;
  text-align:center!important;
  width:100%!important;
}
.footer{
  height:70px!important;
  padding-top:15px;
}
.page{
  height:auto!important;
}
.text .body, .section .text .body {
color:#000000;
padding: 0px 0px 0px 15px;
}
.text, .section .text {
margin: 0px 0px 4px;
}


.header{
  background:none!important;
  background-image:url('//manager.e-Questionnaire.com/accounts/3040/ima-EY.png')!important;
  background-repeat:no-repeat!important;
  background-position:0 0!important;
}
.noTitle{display:none;}

.GroupLine {

}
.Thanks {
    text-align: left;
    margin: 0px;
}

/* Responsive */
/*---------------------------------GENERAL LAYOUT---------------------------------*/
body,td,th, form,input,select {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 12px; /* iphone */
}
body {
    background: url() no-repeat scroll center top #FFFFFF;
    text-align: center;
}
.Others{
width:97%!important;
}
.apercu{
  height:90px;
  width:107px;
  overflow:hidden; /* iphone */
}
.CommentField {
  width:98%!important;
}
.main {background:none;}
.header {
    background: url("mobile.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    background-size: 80px 60px;
    max-height: 100px;
    vertical-align: top;
    width: 100%;
  }
}

		.flag{
			height:32px;width:300px!important; /* iphone */
      top:15px!important;
		}
		.flag div{
			width:30px; height:32px;
			background:transparent url(flag/fr.png) no-repeat center center;
			cursor:pointer;
			float:right;
		}

		.flag .de{background-image:url(accounts/_originals/img/flag/de.png);}
		.flag .en{background-image:url(accounts/_originals/img/flag/en.png);}
		.flag .es{background-image:url(accounts/_originals/img/flag/es.png);}
		.flag .fr{background-image:url(accounts/_originals/img/flag/fr.png);}
		.flag .it{background-image:url(accounts/_originals/img/flag/it.png);}
		.flag .pt{background-image:url(accounts/_originals/img/flag/pt.png);}
		.flag .nl{background-image:url(accounts/_originals/img/flag/nl.png);}
		.flag .sv{background-image:url(accounts/_originals/img/flag/sv.png);}
		.flag .ja{background-image:url(accounts/_originals/img/flag/ja.png);}
		.flag .zc{background-image:url(accounts/_originals/img/flag/zc.png);}
		.flag .zt{background-image:url(accounts/_originals/img/flag/zt.png);}
		.flag .tr{background-image:url(accounts/_originals/img/flag/tr.png);}
		.flag .gr{background-image:url(accounts/_originals/img/flag/gr.png);}
		.flag .ro{background-image:url(accounts/_originals/img/flag/ro.png);}
		.flag .th{background-image:url(accounts/_originals/img/flag/th.png);}
		.flag .ru{background-image:url(accounts/_originals/img/flag/ru.png);}
		.flag .my{background-image:url(accounts/_originals/img/flag/my.png);}
		.flag .id{background-image:url(accounts/_originals/img/flag/id.png);}
		.flag .cz{background-image:url(accounts/_originals/img/flag/cz.png);}
    .flag .hu {
    background-image: url(accounts/_originals/img/flag/hu.png);
}

.outerprogress {
    /*height: 40px;*/
/*    margin: -39px 0 0 56px;*/
    /*position: relative !important;*/
    width: 204px;
    /*top: 110px;*/
    top:0px!important;
    margin: 110px 20px 0 470px;
}


button {
/*position:static!important;
left:0!important;*/
}
.button .FRONT {
margin:0px!important;
}
.mandatorySign{
color:white!important;
}

	.progress{
	  height:31px; width:204px; /* iphone */
	}
.main{
	padding: 0px 2px 0px 2px; /* iphone*/
}
.footer{
	height: 100px; /* iphone */
background:none :!
}
.Question, .Section{
  background:white!important;
  margin:0px;
  width:100% !important;

}
  .Question .Title, .Section .Title, .TitleSelected {
   background:#663333; /* iphone */
   color:white; /* iphone */
   background-image:none !important; /* iphone */
  }
  .Question .Body, .Section .Body{
    padding:2px !important;/* iphone */
    background:transparent;/* iphone */
    background-image: none !important; /* iphone */
    padding-left:10px!important;
  }
/*---------------------------QUESTION SOUS SECTION---------------------------*/

.Section .body .Question {
	width: 100% !important; /* iphone */
}

/*---------------------------------GROUPE DE QUESTIONS--------------------------------*/
.Group{
	width:98%!important; /* iphone */
}
.Text, .Section .Text {
	width: 100%!important; /* iphone */
}
.Text .Body {
	width: 98%!important; /* iphone */
}
.GroupColumn, .GroupLastCell {
padding:0;
vertical-align:top;
width:40px;
}
/*---------------------------------TEXT SOUS SECTION---------------------------------*/
.Section .Text {
	width: 100%!important; /* iphone */
}
/*---------------------------------IMAGE---------------------------------*/
.Image{
	padding:25px 0px 10px 0px;/* iphone */
}
.GroupLine {
    font-weight: normal;
 }
 .GroupCell {
    padding: 0 0 0;
 }
 .GroupColumn, .GroupLastCell {
    font-weight: normal;
    padding: 2px;
    text-align: center;
}
.Question .Modality label {
    font-weight: normal;
}
.Question .info {
    font-size: 10px;
    font-style: italic;
    font-weight: normal;
	padding: 12px 0px 0;
}
.Question .Title, .Section .Title, .TitleSelected {
    font-size: 11px;
    font-weight: bold;
    padding: 4px 2px 2px 8px;
}
.Text .Body, .Section .Text .Body {
    font-size: 11px;
    padding: 0 0 0 5px;
}
.mobicenter{text-align:center;}
.mobileft{text-align:left;}
.mobiright{text-align:right;}
.Thanks {
    font-size: 12px;
    margin: 10px 0px 0px;
}

.SideBySide .modality{
  line-height:28px;
  padding-left: 5px;
}




@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    .Page {
        width: 99% !important;
    }
    .textField {
        width: 350px!important;
    }
    .tNumeric {
        width: auto!important;
    }
    .Section .Text {
        width: 98%!important;
        /* iphone */
    }
    .Question,
    .Section {
        width: 100% !important;
    }
    .Image {
        width: 450px;
        /* iphone */
    }

    #BtnNext {
        left: 40px!important;
        bottom: 10px!important;
    }
    #BtnBack {
        left: -40px!important;
        bottom: 10px!important;
    }
    .header {
        background-size: contain!important;
        height: 75px!important;
        background-position: center!important;
    }
    .header .RIGHT {
        margin-top: 80px!important;
    }
}
    .header {
        background-position: center 0!important;
		background-size: 60%!important;
    }
	.Section .Question .Modality {
    padding-right: 20px;
    }

	.TimeElapsed{
	position:absolute;
	top : 100px;
	margin-left : 0px;
	}

	/* LAST CHANGES PHILIPPE 20170920 */
table.radiobutton, table.checkbox{margin-top: 10px;} .modimg label{text-align:center;width:100%;}
.modimg > input{ /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}
.modimg > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
  max-width:98%!important;
  max-height:350px;
}
.modimg > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
  border:3px solid #f00;
}
/**********
STYLE FOR A CHECKBOX --------------- */
input[type=checkbox] {
    position: absolute;
    opacity: 0;
}
input[type=checkbox] + label {
    position: relative;
    cursor: pointer;
    padding: 0;
}
input[type=checkbox] + label:before {
    border: 1px solid #bbbbbb;
    content: '';
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 18px;
    height: 18px;
    background: #e6e6e6;
    border-radius: 3px;
    margin-left: -1px;
    margin-top: -5px;

}
input[type=checkbox]:hover + label:before {
    background: #ccc;
}
input[type=checkbox]:checked + label:before {
    background: #fff;
}
input[type=checkbox]:disabled + label {
    color: #b8b8b8;
    cursor: auto;
}
input[type=checkbox]:disabled + label:before {
    box-shadow: none;
    background: #ddd;
}
input[type=checkbox]:checked + label:after {
    content: '✓';
    color: #66696f;
    font-size: 20px!important;
	font-family:arial!important;
    left: 3px;
    position: absolute;
    top: -9.5px;
}


/**********
STYLE FOR A RADIO BUTTON --------------- */

input[type=radio] {
    position: absolute;
    opacity: 0;
}
input[type=radio] + label {
    position: relative;
    cursor: pointer;
    padding: 0;
}
input[type=radio] + label:before {

  border: 1px solid #ccc;

    content: '';
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 18px;
    height: 18px;
    background: #e6e6e6;
    border-radius: 50%;
    margin-left: -1px;
    margin-top: -5px;
}
input[type=radio]:hover + label:before {
    border: 1px solid #bbbbbb;
    background: #ccc;
}
input[type=radio]:checked + label:before {
    background: #fff;
}
input[type=radio]:disabled + label {
    color: #b8b8b8;
    cursor: auto;
}
input[type=radio]:disabled + label:before {
    box-shadow: none;
    background: #ddd;
}

input[type=radio]:checked + label:before {
    content: '●';
    width: 10px;
    height: 16px;
    color: #66696f;
    font-size: 16px!important;
	font-family:arial!important;
    line-height: 17px;
    padding-bottom: 3px;
    padding-right: 3px;
}

table.radiobutton  input[type=radio]:checked + label:before{
    width: 12px;
    padding-bottom: 3px;
    padding-right: 3px;
    padding-left: 5px;
}

.lickert input[type=radio]:checked + label:before, .GroupRow input[type=radio]:checked + label:before {
    width: 16px!important;
    padding-bottom: 3px!important;
    padding-right: 1px!important;
    padding-left: 1px!important;
}

.GroupCell {
    padding-top: 6px;
}
.Question .Modality label {
	display:table;
}
.lickert label {
    margin: auto;
    margin-top: 13px;
}

.TextField, .TextArea{
  padding: 4px;
  border: solid 1px #dcdcdc;
  transition: box-shadow 0.3s, border 0.3s;
}
.TextField.hover, .TextField:hover, .TextArea.hover, .TextArea:hover{
  border: solid 1px #707070;
  box-shadow: 0 0 5px 1px #969696;
}
table.checkbox, table.radiobutton{
width:auto!important;
}
#BtnBack{
left: -40px!important;
}
#BtnNext{
left: 40px!important;
}
    	  .pn{
width: 35px;
    float: left;
    text-align: right;
    margin-right: 10px;
        	  }
.tn {
    float: left;
    width: calc(100% - 50px);