@import url('https://fonts.googleapis.com/css2?family=Arima:wght@100..700&display=swap');


@font-face {
  font-family: "red_top";
  src: url("fonts/red_top.ttf") format("truetype");
  src: url("fonts/red_top.woff") format("woff");
 }
 
 body,
 p,
 img,
 table,
 ul,
 li,
 div,
 a,
 dl,
 dt,
 dd,
 form,
 fieldset,
 h1,
 h2,
 h3,
 h4 {
     margin: 0;
     padding: 0;
     color:#626262;
 }
 
 h1 {
     margin-top: 10px;
     font-size: 23px;
     margin-bottom: 10px;
     text-align: center !important;
     background-color: none;
     padding: 5px;
 }
 
 h2 {
     color: #42927f;
     font-size: 21px;
 }
 h3{
   color: #055463;
   font-size: 19px;
   margin-bottom:10px;
 }
 
 table {
     border-collapse: collapse;
 }
 
 body {
     /*background-color: #ffecca;*/
     color:#000000;
       font: 400 1rem 'roboto', Helvetica, sans-serif;
 }
 
 /*p {
     margin-top: 8px;
 }*/
 img{
   max-width:100%;
 }
 #form_zone {
     width: 100%;
     margin: 0 auto;
     /*margin: 20px auto 45px;
     -webkit-box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
     box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
     background-color: rgba(255,255,255,.85);*/
 }
 
 #form_zone_inside {
     margin: 0 30px;
     padding:0px;
 }
 
 #form_zone.confirm-form-zone{
   margin-top:0px;
 }
 #header p {
     margin-bottom: 10px;
     line-height: 1.5;
     color:#ffffff;
 
 }
 .header-img #header{
   padding:0px;
 }
 #footer {
     width: 100%;
     padding: 20px 30px;
 }
 
 #footer p {
     color: #626262;
     margin-bottom: 0;
     text-align:center;
 }
 
 #footer a {
     text-decoration: none;
     color: #80A031;
 }
 
 div.intro {
     background-color: #ffffff;
     width: 100%;
 }
 
 div.field {
     width: 100%;
 }
 
 
 div.field label {
     margin-top: 0;
 }
 
 div.field label p {
 text-align: justify;
 color:#626262;
 }
 
 .masque .mandatory-tag {
     display: none !important;
 }
 
 
 /* Style pour affichage de l'étoile "Obligatoire" à droite du dernier mot de la question */
 
 div .field label.mandatory-label {
     display: block;
 }
 
 div .field label.mandatory-label p {
     display: inline;
 }
 
 div .field label.mandatory-label span.mandatory-tag {
     display: inline;
     position: relative;
 }
 
 div.field.img-radio .input_zone {
     text-align: center
 }
 
 div.field.text-input label p {
     float: left;
     padding-right: 15px;
 }
 
 div.field.text-input .input_zone input {
     width: 200px;
 }
 
 div.field.select-input label {
     float: left;
     padding-right: 15px;
 }
 
 div.field.with-title label {
     float: none !important;
     padding-right: 0;
 }
 
 div.field.with-title label h1 {
     margin-bottom: 20px;
 }
 
 div.field.with-title label p {
     float: left;
     padding-right: 15px;
 }
 
 div.field.select-input .select2 {
     width: 200px !important;
 }
 
 .select2-container .select2-selection--single,
 .select2-container--default .select2-selection--single .select2-selection__arrow {
     height: 25px !important;
 }
 
 div.field.textarea-input textarea {
     width: 100%;
     box-sizing: border-box;
     padding: 5px;
     max-width: 100%;
     height: auto;
     border: 1px solid #cccccc;
     margin-top: 15px;
 }
 
 div.field.centered label,
 div.field.centered .input_zone {
     text-align: center !important;
 }
 
 label {
     color: #626262;
     position: relative;
     display: block;
     font-size: 1.1em;
     background-color: none;
     text-align: left;
     max-width: 100%;
     font-weight: 400 !important;
     margin-bottom:10px;
 }
 
 .question-apparente > label {
     display: block;
     padding: 5px 10px 0 10px;
     position: relative;
     font-size: 1.05em;
     border-radius: 0;
     -moz-border-radius: 0;
     background-color: transparent;
     min-width: 130px;
     text-align: center;
     color: #dddddd;
     margin: 5px auto;
 }
 
 .question-apparente label p {
     color: #626262;
     font-size: 1.1em;
     line-height: 1.5;
 }
 
 .question-apparente:nth-last-child(1) div.input_zone {
     display: inline-block;
     width: auto;
 }
 
 .question-apparente:nth-last-child(2) div.input_zone {
     display: inline-block;
     width: auto;
 }
 
 label a {
     color: #ffffff;
     font: 1.1em 'Roboto', 'lato', Helvetica, sans-serif;
     line-height: 1.5;
 }
 
 label * {
     font-size: 1em;
     line-height: 20px;
     text-align: left;
 }
 
 label p {
     color: #626262;
     font-size: 18px;
     margin-bottom: 10px;
 }
 
 
 /* labels associes aux boutons radios et check */
 
 label.label-after-radio {
     display: inline-block;
     border: none;
     color: #626262;
     cursor: pointer;
     margin: 0;
     padding: 5px 10px;
     float: none;
     background: none;
     transition: background .3s;
     font-size: 1em;
     margin-left: 2px;
     margin-top: -4px !important;
     text-align: justify;
     font-weight: 400;
 }
 
 .field-radio label.label-after-radio {
     margin-top: 0px !important;
 }
 
 /*label.label-after-radio:hover {
     background: #323b5a;
     color: #ffffff;
 }*/
 
 label.label-after-check {
     display: inline-block;
     border: none;
     color: #626262;
     cursor: pointer;
     margin: 0 15px 0 5px;
     padding: 5px 10px;
     float: none;
     background: none;
     transition: background .3s;
     font-size: 1em;
     text-align: justify;
 }
 
 
 div.input_zone {
     position: relative;
     width: 100%;
     text-align: left;
     display: block;
 
 }
 
 span.mandatory-tag {
     display: block;
     position: absolute;
     right: -12px;
     top: 2px;
     font-size: 18px;
     color: #ff0000;
 }
 
 div.field_info {
     color: #777777;
     margin-left: 230px;
     font-size: 0.7em;
     clear: left;
 }
 
 .spacer_right {
     margin-right: 20px;
 }
 
 div#notice,
 .notice {
     color: #c1cf0e;
     display: inline-block;
     margin: 10px 0;
     font-weight: bold;
 }
 
 div#error,
 .error {
     color: #ffffff;
     text-align: center;
     border: 1px solid #ff0000;
     margin: 8px 0;
     font-weight: normal;
     background-color: #ff0000;
     padding: 5px;
     bottom: 8px;
     font-size: 12px;
     display: none;
 }
 
 div#alert,
 .alert {
     color: #b00f43;
     display: inline-block;
     margin: 10px 0;
     font-weight: bold;
 }
 
 div.field_errors {
     color: #f00;
     font-size: 12px;
     font-weight: normal;
     z-index: 100;
     position: absolute;
   padding-top:2px;
 }
 
 div.question-apparente:last-child div.field_errors {
     width: 200px;
     top: -14px;
     background-color: #ffffff;
     left: 0;
     right: 0;
     margin: 0 auto;
 }
 
 div.question-apparente div.field_errors {
     top: -30px;
     bottom: auto;
 }
 
 div.field_with_errors input,
 input.field_with_errors {
     background-color: #d97272;
     /*  color : #ffffff; */
 }
 
 .error {
     color: #85102B;
 }
 
 div.field_info {
     color: #777777;
     margin-left: 250px;
     font-size: 0.7em;
     clear: left;
 }
 
 div.tooltip_zone {
     position: relative;
 }
 
 div.tooltip_text {
     position: absolute;
     z-index: 9999;
     display: none;
     left: 50px;
     color: #fff;
     background-color: #444444;
     padding: 8px;
     opacity: 0.85;
     border-radius: 3px;
     -moz-border-radius: 3px;
 }
 
 
 input[type="text"],
 input[type="email"],
 input[type="password"] {
     background-color: #fff;
     box-sizing: border-box;
 }
 
 input.check_input {
     width: auto;
 }
 
 input[type="text"] {
     transition: box-shadow .3s;
 }
 
 input[type="text"]:hover,
 input[type="text"]:focus {
     background-color: transparent;
 }
 
 input[type="text"]:focus {
     box-shadow: 0 0 1px #222;
     background-color: transparent;
 }
 
 textarea {
     width: 50%;
     height: 100%;
     vertical-align: middle;
     border: 1px solid #c4d8dc;
     border-radius: 3px;
     transition: all 150ms ease-in-out 0s;
     background-color: transparent;
     resize:none;
 }
 
 textarea.txt_input {
     width: 100%;
     padding: 1%;
     resize: none;
     max-height: 100px;
     background-color: transparent;
 }
 textarea.txt_input:focus{
   background-color: #fff;
 }
 
 .canvas-container {
     border: 1px solid #cccccc;
 }
 
 button,
 .button {
     background: transparent;
     border: 1px solid transparent;
     color: transparent;
     background-image: url('https://helium-connect.fr/customers_data/6101285ab1ff63c2be1f1122/images/arrow.png');
     background-repeat: no-repeat;
     background-position: right;
     background-size:20px;
     
 }
  .forum button,
 .forum .button {
   display: inline-block;
   padding: 1.1875rem 2.125rem 1.1875rem 2.125rem;
   border-radius: 2rem;
   background: #75b7d4;
   border:1px solid #75b7d4;
   color: #fff;
   text-decoration: none;
   transition: all 0.2s;
   font-size: 1rem;
   font-weight: 400;
 }
 
 button:hover,
 .button:hover {
     opacity: 0.8;
 }
 
 button.previous-question {
     display: block;
     position: relative;
     background: none;
     margin: 18px auto;
     font-size: 1em;
     text-align: center;
     border: none;
     cursor: pointer;
     color: #055463;
     padding: 15px 30px;
     text-decoration: none;
     height: auto;
     transition: background-color .3s;
     -webkit-appearance: none;
     border-radius: 3px;
     font-weight: 300;
     width: 70%;
     max-width: 200px;
 }
 
 button.previous-question:hover {
     color: #055463;
 }
 
 button.next-question {
     background-color: #055463;
     color: #ffffff;
 }
 
 button.next-question:hover {
     opacity:0.8;
 }
 
 div#progression {
     margin: 0 auto;
     text-align: center;
     margin-top: 12px;
     padding: 12px 0;
     vertical-align: center;
 }
 
 div#progression-maxi {
     text-align: center;
 }
 
 span.progression-item {
     display: inline-block;
     margin-left: 3px;
     margin-right: 3px;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     text-align: center;
     color: rgba(0, 0, 255, 0);
     border: none;
     margin-bottom: 10px;
     line-height: 30px;
     font-size: 15px;
 }
 
 span.progression-item .chiffre {
     display: block;
     padding-top: 5px;
     line-height: 30px;
     font-size: 15px;
 }
 
 div#progression-maxi span.todo {
     background-color: none;
     color: #92c020;
 }
 
 .progression-item.current .chiffre {
     padding-top: 0;
     height: 27px;
     width: 27px;
     border-radius: 50%;
     color: #ffffff;
     background-color: #42927f;
     font-weight: bold;
     line-height: 30px;
     font-size: 15px;
 }
 
 span.progression-item.todo .chiffre,
 span.progression-item.done .chiffre {
     height: 30px;
     width: 30px;
     color: #cccccc;
     font-size: 15px;
 }
 
 span.progression-item.todo .chiffre,
 span.progression-item.current .chiffre {
     line-height: 30px;
     font-size: 15px;
 }
 
 span.progression-item.todo .chiffre button,
 span.progression-item.current .chiffre button,
 span.progression-item.done .chiffre button {
     display: block;
     height: 30px;
     width: 30px;
     border-radius: 50%;
     padding: 0;
     line-height: 30px;
     font-size: 15px;
 }
 
 span.progression-item.done .chiffre button {
     color: #ffffff;
     background-color: #000000;
 }
 
 div.percent.more {
     color: green;
 }
 
 
 div.percent.less {
     color: red;
 }
 
 p.clear-util {
     clear: both;
 }
 
 div.smart_option {
     display: inline-block;
 }
 
 div.nps .smart_option_block {
     border: 0;
     opacity: 0.7;
 }
 
 div.nps .smart_option_block:hover {
     border: 0;
     opacity: 0.9;
 }
 
 div.nps .smart_option_block:selected {
     border: 0;
     opacity: 1;
 }
 
 div.nps div.smart_option div.selected {
     border: 0;
     opacity: 1;
 }
 
 div.nps div.smart_option div.selected p {
     position: relative;
     top: -4px;
     -moz-box-shadow: 0px 4px 4px #333;
     -webkit-box-shadow: 0px 4px 4px #333;
     box-shadow: 0px 4px 4px #333;
 }
 
 div.nps .smart_option_block p {
     font-size: 15px;
     line-height: normal;
     color: #fff;
     border: none !important;
     margin: 0px !important;
     padding-top: 15px !important;
     padding-bottom: 15px !important;
     text-align: center;
 }
 
 div.nps .smart_option_block {
     margin-right: 0;
     padding: 0;
 }
 
 div.nps .note {
     display: flex;
     flex-direction: row;
     justify-content: start;
     margin-top: 15px;
 }
 
 div.nps .note p {
     font-size: 11px;
     margin: 0;
 }
 
 div.nps .note p:last-child {
     margin-left: auto;
 }
 
 div.nps .smart_option {
     flex: 1;
 }
 
 div.nps .smart_one {
     display: flex;
     flex-direction: row;
 }
 
 .zero {
     background-color: #e04056;
     margin-left: 0;
     -webkit-border-top-left-radius: 4px;
     -moz-border-radius-topleft: 4px;
     border-top-left-radius: 4px;
     -webkit-border-bottom-left-radius: 4px;
     -moz-border-radius-bottomleft: 4px;
     border-bottom-left-radius: 4px;
 }
 
 .un {
     background-color: #e64b61;
 }
 
 .deux {
     background-color: #e96359;
 }
 
 .trois {
     background-color: #ec7a50;
     ;
 }
 
 .quatre {
     background-color: #ef8f45;
 }
 
 .cinq {
     background-color: #f2a841;
 }
 
 .six {
     background-color: #ddad44;
 }
 
 .sept {
     background-color: #c7b24e;
 }
 
 .huit {
     background-color: #b3b656;
 }
 
 .neuf {
     background-color: #9dbb5c;
 }
 
 .dix {
     background-color: #87bf64;
     -webkit-border-top-right-radius: 4px;
     -moz-border-radius-topright: 4px;
     border-top-right-radius: 4px;
     -webkit-border-bottom-right-radius: 4px;
     -moz-border-radius-bottomright: 4px;
     border-bottom-right-radius: 4px;
 }
 
 div.smart_option_block {
     border: 3px solid #ffffff;
     margin-right: 9px;
     padding: 3px;
     cursor: pointer;
 }
 
 div.smart_option_block p {
     margin-bottom: 0;
 }
 
 div.smart_option_block:hover {
     border: 3px solid #dddddd;
 }
 
 div.smart_option_block:selected {
     border: 3px solid #008C0C;
 }
 
 div.smart_multi_option_block {
     border: 3px solid #ffffff;
     padding: 14px;
     cursor: pointer;
 }
 
 div.smart_multi_option_block {
     border: 3px solid transparent;
     margin-right: 9px;
     padding: 7px;
     cursor: pointer;
 }
 
 div.smart_multi_option_block:hover {
     border: 3px solid #dddddd;
 }
 
 div.smart_option div.selected {
     border: 3px solid #008C0C;
 }
 
 div.smart_option_block {
     border: 3px solid transparent;
     margin-right: 9px;
     padding: 7px;
     cursor: pointer;
 }
 
 div.smart_option_block p {
     margin: 0;
 }
 
 div.smart_option_block:hover {
     border: 3px solid #dddddd;
 }
 
 div.smart_option div.selected {
     border: 3px solid #c5c800;
 }
 
 .smart_multi .icheckbox_square {
   display: none;
 }
 
 iframe {
     border: none;
 }
 /*** CURSOR **/
 div.ui-slider-horizontal {
     width: 490px;
     height: 6px;
     margin-left: 40px;
     margin-bottom: 30px;
 }
 
 div.slider_options {
     width: 585px;
     margin-bottom: 15px;
 }
 
 div.slider_option {
     display: inline-block;
     margin: 10px 0 0 0;
     padding: 0px 2px;
     vertical-align: top;
     height: 30px;
 }
 
 div.slider_options div.selected {
     font-weight: bold;
     color: #00699e;
 }
 
 div.ui-slider-range {
     background-image: none !important;
     background-color: red !important;
 }
 
 a.ui-slider-handle {
     background: url('images/curseur.png') no-repeat 1px -1px !important;
     width: 21px !important;
     height: 26px !important;
     top: -11px !important;
     left: -10px;
     border: none !important;
 }
 
 a.ui-slider-handle:hover {
     background: url('images/curseur.png') no-repeat 1px -1px !important;
     border: none !important;
 }
 
 .field.slider-layout .input_zone {
     float: none;
     margin: 0 auto;
     text-align: center;
     width: 95%;
     max-width: 550px;
 }
 
 .field.slider-layout .input_zone input {
     width: auto;
 }
 
 .irs-line-mid,
 .irs-line-left,
 .irs-line-right,
 .irs-bar,
 .irs-bar-edge,
 .irs-slider {
     background-color: #42927f;
     background-image: none;
 }
 
 .irs-line-left,
 .irs-line-mid,
 .irs-line-right {
     background-color: #E1E4E9;
 }
 
 .irs-from::after,
 .irs-to::after,
 .irs-single::after {
     border-color: #055463 transparent transparent;
 }
 
 .irs-from,
 .irs-to,
 .irs-single {
     background-color: #055463;
     font-weight: 700;
     
 }
 
 .irs-min, .irs-max{
   color:#626262;
   font-weight: 700;
 }
 
 /** FIN CURSOR **/
 div.field.table-input table.grid_one {
     margin-top: 0;
     margin-left: 0;
     width: 100%;
 }
 
 div.field.table-input table.grid_one div.radio_option {
     width: auto;
     margin: 0;
 }
 
 div.field.table-input table.grid_one th {
     padding: 10px 0 5px 0;
 }
 
 div.field.table-input table.grid_one td.grid_option {
     border-bottom: 1px solid #F2EFE9;
 }
 
 div.field.table-input table.grid_one td.grid_label {
     width: 200px;
 }
 
 div.field.table-input table.grid_one td {
     padding: 13px 0;
 }
 
 table.grid_one {
     margin-top: 10px;
     margin-left: 0px;
     width: 98%;
 }
 
 table.grid_one th {
     padding: 0 2% 2% 2%;
     text-align: center;
     color: #333333;
     font-size: 0.85em;
 }
 
 table.grid_multi {
     margin-top: 10px;
     margin-left: 0px;
     width: 98%;
 }
 
 table.grid_multi th {
     text-align: center;
     color: #333333;
     font-size: 0.85em;
 }
 
 table.grid_multi tr {
     border-bottom: 2px solid cccccc;
 }
 
 table.grid_one tr {
     border-bottom: 2px solid cccccc;
 }
 
 td.grid_option {
     text-align: center;
     position: relative;
 }
 
 td.grid_label {
     max-width: 165px;
     padding: 15px 8px;
     text-align: left;
     border-bottom: 1px solid cccccc;
     font-size: 0.9em;
 }
 
 div.radio_option {
     text-align: left;
     margin: 5px 10px;
     position: relative;
     /**width: 46%;**/
 }
 
 div.radio_option input {
     position: relative;
     top: -2px;
     cursor: pointer;
 }
 
 div.check_option {
     text-align: left;
     margin: 0 10px;
     /*display: inline-block;
     width: 210px;*/
 }
 
 table.results ul {
     list-style-type: none;
     margin-left: 6px;
     margin-top: 12px;
 }
 
 table.results td {
     padding: 8px;
     border: 1px solid #d7d1c5;
 }
 
 li{
   list-style-type: none;
 }
 
 
 /*li{
     background: url('images/coche-mini.png') no-repeat left 3px;
 }*/
 
 span.expected_answer {
     font-weight: bold;
     color: #87ad29;
 }
 
 span.unexpected_answer {
     color: #b00f43;
 }
 
 div.quiz_option_result {
     display: inline-block;
     padding: 2px;
     margin-right: 10px;
 }
 
 div.expected_answer {
     border: 1px solid #87ad29;
 }
 
 div.choosen {
     background: url('../images/coche-mini.png') no-repeat 4px 4px;
     padding-left: 12px;
 }
 
 div.answer_ok {
     float: left;
     margin-left: 10px;
     width: 42px;
     height: 60px;
     background: url('images/coche.png') no-repeat left top;
 }
 
 div.answer_not_ok {
     float: left;
     margin-left: 10px;
     width: 42px;
     height: 60px;
     background: url('images/croix.png') no-repeat left top;
 }
 
 div.answer {
     margin-left: 80px;
 }
 
 div.submit_zone {
     position:absolute;
     top:0;
     right:15px;
 }
 
 a.clue {
     display: inline-block;
     margin-top: 20px;
     background: #95bf2d;
     border-radius: 4px;
     -moz-border-radius: 4px;
     padding: 4px;
     cursor: pointer;
     border: none;
     text-decoration: none;
 }
 
 a.clue:hover {
     background: #927557;
     color: #ffffff;
 }
 
 div.clue,
 div.confirm {
     margin-top: 10px;
     margin-bottom: 10px;
     padding: 10px;
     font-size: 1em;
     background-color: #f5f1ee;
     border-radius: 8px;
     -moz-border-radius: 8px;
 }
 
 div#score {
     font-size: 2em;
     color: #87ad29;
 }
 
 span.chiffre {
     color: #ffffff;
     font-size: 1.7em;
     vertical-align: center;
 }
 
 
 /* report */
 
 table.report-listing,
 table.report-detail {
     border-collapse: collapse;
     margin-bottom: 20px;
 }
 
 table.report-listing tn,
 table.report-detail th {
     font-weight: normal;
     background-color: #00699e;
     color: #ffffff;
     background-image: linear-gradient(bottom, rgb(43, 137, 184) 9%, rgb(0, 105, 158) 55%);
     background-image: -o-linear-gradient(bottom, rgb(43, 137, 184) 9%, rgb(0, 105, 158) 55%);
     background-image: -moz-linear-gradient(bottom, rgb(43, 137, 184) 9%, rgb(0, 105, 158) 55%);
     background-image: -webkit-linear-gradient(bottom, rgb(43, 137, 184) 9%, rgb(0, 105, 158) 55%);
     background-image: -ms-linear-gradient(bottom, rgb(43, 137, 184) 9%, rgb(0, 105, 158) 55%);
     background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(43, 137, 184)), color-stop(0.55, rgb(0, 105, 158)))
 }
 
 table.report-listing * {
     font-size: 16px;
 }
 
 table.report-detail td {
     border: 1px solid #e5e5e5;
 }
 
 table.report-detail td,
 table.report-detail th {
     padding: 4px 8px;
     vertical-align: middle;
 }
 
 table.report-detail td.label,
 table.report-listing td.label {
     width: 400px;
 }
 
 table.report-listing th {
     text-align: center;
 }
 
 table.report-listing tr {
     border-bottom: 1px solid #e5e5e5;
 }
 
 table.report-listing td,
 table.report-listing th {
     padding: 4px 8px;
     vertical-align: middle;
     border: 1px solid #e5e5e5;
 }
 
 table.report-listing td.action {
     text-align: center;
 }
 
 table.report-listing td div.data {
     position: relative;
     height: 30px;
 }
 
 table.report-listing td.synthese {
     font-weight: bold;
 }
 
 table.report-listing td.vide {
     /*	background-color : #e5e5e5; */
 }
 
 table.report-listing th * {
     color: #ffffff;
 }
 
 table.report-listing th a {
     border-radius: 5px;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     font-size: 10px;
     color: #00699e;
     text-decoration: none;
     display: inline-block;
     background-color: #ffffff;
     border: 1px solid #ffffff;
     margin-top: 10px;
     padding: 2px 4px;
     transition: all 0.2s ease-in-out;
 }
 
 table.report-listing th a:hover {
     background-color: #00699e;
     color: #ffffff;
 }
 
 table.report-listing tr.alternate td,
 table.report-detail tr.alternate td {
     background-color: #f5f5f5;
 }
 
 table.report-listing tr:hover td,
 table.report-detail tr:hover td {
     background-color: #eeeeee;
     transition: all 0.2s ease-in-out;
 }
 
 table.report-listing td,
 table.report-detail td {
     padding: 20px 14px;
 }
 
 table.report-listing div.percent {
     position: absolute;
     right: 0;
     bottom: 0;
     font-size: 9px;
 }
 
 div.percent.more {
     color: green;
 }
 
 div.percent.less {
     color: red;
 }
 
 td.currency {
     text-align: right;
 }
 
 td.label,
 td.label p {
     color: #00699e !important;
 }
 
 td.std,
 td.std {
     text-align: center;
 }
 
 table.report-detail td img,
 table.report-listing td img {
     height: 40px;
     width: auto;
 }
 
 
 /* commentaires */
 
 div.comment {
     margin-top: 14px;
 }
 
 div.comment-head {
     color: #ffffff;
     background-color: #00699e;
     height: 21px;
     padding: 4px 4px;
     position: relative;
 }
 
 div.comment-buttons {
     position: absolute;
     right: 2px;
     top: 0px;
 }
 
 div.comment-body {
     border: 1px solid #e5e5e5;
     padding: 2px 4px;
     min-height: 80px;
 }
 
 img.user-photo {
     display: block;
     float: left;
     height: 80px;
     margin-right: 10px;
     margin-bottom: 4px;
     margin-left: 4px;
     margin-top: 4px;
 }
 
 div.fieldset-header {
     padding : 0 10px;
     width:100%;
 }
 
 div.pre-form {
     padding-left: 10px;
     padding-right: 10px;
 }
 
 div.pre-form p {
     margin: 5px auto;
     clear: both;
 }
 
 #header p img {
     text-align: center;
     margin: 0 auto;
     padding: 0 !important;
     height: auto;
 }
 
 div.pre-form p img {
     text-align: center;
     margin: 0 auto;
     padding: 0 !important;
     background-color: #ffffff;
     max-width: 730px;
     height: auto;
 }
 
 div.fieldset-header p img {
     text-align: center;
     margin: 0 auto;
     padding: 0 !important;
     height: auto;
 }
 
 div.field-header p img {
     text-align: center;
     margin: 0 auto;
     padding: 0 !important;
     height: auto;
 }
 
 div.fieldset-footer p img {
     text-align: center;
     margin: 0 auto;
     padding: 0 !important;
     height: auto;
 }
 
 div.field-footer p img {
     text-align: center;
     margin: 0 auto;
     padding: 0 !important;
     height: auto;
 }
 
 #after_submit p img {
     text-align: center;
     margin: 0 auto;
     padding: 0 !important;
     background-color: #ffffff;
   height: auto;
 }
 
 #footer p img {
     text-align: center;
     margin: 0 auto;
     padding: 0 !important;
     background-color: #ffffff;
     height: auto;
 }
 
 
 div.legend {
     color: #444444;
     text-align: justify;
     padding: 5px;
     margin: 15px 0;
     line-height: 1.5;
     font: 14px/16px 'Roboto', 'lato', Helvetica, sans-serif;
 }
 
 div.field-header {}
 
 div.field-header * {
     font-size: 1.5em;
     color: #333;
     text-align: left;
     line-height: 14px;
     font-family: "Arima", Arial, sans-serif;
     padding-left: 2px;
 }
 
 div.field-footer {
     margin: 10px 0;
     clear: both;
 }
 
 .field.nps label {
     width: 100%;
 }
 
 .field.overflow {
     overflow-y: auto;
     position: relative;
 }
 
 
 /* VOTES */
 
 div.poll span.mandatory-tag {
     display: none;
 }
 
 h3.poll-result-title {
     margin-top: 10px;
     color: #95bf2d;
     font-size: 16px;
 }
 
 table.poll-result td {
     padding: 1px 4px;
 }
 
 table.poll-result td.poll-result-label {
     font-size: 11px;
     width: 150px;
 }
 
 table.poll-result td.poll-result-count {
     font-size: 11px;
     width: 50px;
     text-align: right;
 }
 
 table.poll-result td.poll-result-graph {
     width: 100px;
 }
 
 div.graph-bar {
     height: 10px;
     background-color: #95bf2d;
     border-radius: 2px;
     -moz-border-radius: 2px;
 }
 
 div.poll div.submit_zone {
     /*  margin : 10px 0 0 260px; */
     margin: 10px 0 0 0;
     text-align: center;
 }
 
 div.poll .button {
     border-radius: 5px;
     -moz-border-radius: 5px;
     padding: 2px;
     font-size: 12px;
 }
 
 div.poll label {
     margin-bottom: 10px;
 }
 
 div.poll label.label-after-radio {
     margin-bottom: 0;
 }
 
 div.poll div#error {
     display: none;
 }
 
 div.poll div.field_errors {
     font-size: 10px;
     font-weight: normal;
 }
 
 table.score-result td {
     padding: 1px 4px;
     border-bottom: 1px solid #aaaaaa;
 }
 
 table.score-result th {
     background-color: #aaaaaa;
 }
 
 table.score-result td.score-result-label {
     width: 300px;
 }
 
 table.score-result td.score-result-count {
     width: 50px;
     text-align: right;
 }
 
 table.score-result td.score-result-graph {
     width: 100px;
 }
 
 table.output tr {
     border: 1px solid #aaaaaa;
 }
 
 table.output td {
     padding: 2px 6px 2px 6px;
 }
 
 td.question p {
     margin-top: 6px;
 }
 
 td.question {
     padding-right: 60px;
 }
 
 div.x-vml-base {
     overflow: visible !important;
 }
 
 div.x-surface {
     margin: 20px 0 40px 0;
 }
 
 div.x-surface svg {
     padding: 20px;
     overflow: visible;
 }
 
 .tableau .field-header {
     height: 70px;
 }
 
 .tableau2 .field-header {
     height: 115px;
 }
 
 div.tlabel {
     width: 180px;
     float: left;
 }
 
 .tableau2 div.tlabel {
     width: 335px;
 }
 
 div.after-tlabel {
     margin-left: 180px;
     width: 570px;
     padding: 0;
 }
 
 .tableau2 div.after-tlabel {
     margin-left: 335px;
     width: 415px;
 }
 
 div.tcol {
     width: 90px;
     padding: 0;
     margin: 0;
     float: left;
     text-align: center;
     font-size: 0.9em;
 }
 
 .tableau2 div.tcol {
     width: 90px;
 }
 
 div.field.tableau {
     border-top: 1px solid #aaaaaa;
 }
 
 .tableau label {
     width: 180px;
     float: left;
     background: none;
     height: 20px;
     margin: 0;
     font-size: 0.9em;
     padding: 10px 0;
     text-align: left;
 }
 
 .tableau.tableau2 label {
     width: 335px;
     height: 38px;
 }
 
 .tableau label p {
     color: #1C91CC;
 }
 
 .tableau div.input_zone {
     margin: 0;
     padding: 0;
     margin-left: 180px;
     width: 570px;
 }
 
 .tableau.tableau2 div.input_zone {
     width: 415px;
     margin-left: 345px;
 }
 
 .tableau .radio_option {
     float: left;
     width: 90px;
     padding: 0;
     margin: 0;
     text-align: center;
     margin-top: 14px;
 }
 
 .tableau.tableau2 .radio_option {
     width: 90px;
 }
 
 .tableau label.label-after-radio {
     display: none;
 }
 
 .gd label {
     float: left;
     width: 50%;
 }
 
 .gd div.input_zone {
     width: 35%;
     margin-left: 55%;
 }
 
 .gd .radio_option {
     float: none;
     text-align: left;
 }
 
 .gd label.label-after-radio {
     display: inline-block;
     border: none;
     color: #636362;
     cursor: pointer;
     margin: 0;
     padding: 5px 4px;
     float: none;
     background: none;
 }
 
 div.field.noborder {
     border-top: none;
 }
 
 a.nh_auto_click {
     display: none;
 }
 
 .select2-container--default .select2-selection--single .select2-selection__arrow b {
     border-color: #cccccc transparent transparent transparent;
     border-style: solid;
     border-width: 5px 4px 0 4px;
     height: 0;
     left: 50%;
     margin-left: -4px;
     margin-top: -2px;
     position: absolute;
     top: 50%;
     width: 0;
 }
 
 .select2-container--default .select2-selection--single .select2-selection__arrow{
   top: 6px !important;
 }
 .select2-container--default .select2-selection--single {
 width: 100%;
 padding-bottom: 0.7em;
 padding-left: 1.3125rem;
 border: 1px solid #c4d8dc;
 border-radius: 0.25rem;
 background-color: #fff;
 color:#626262;
 font: 400 0.875em 'Roboto', 'lato', Helvetica, sans-serif;
 transition: all 0.2s;
 -webkit-appearance: none;
 height: 35.2px !important;
 padding-top: 4px;
 }
 
 .number {
     position: absolute;
     padding: 8px 15px;
     background-color: #414042;
     color: #ffffff;
     display: inline-block;
     margin-left: 12px;
 }
 
 .number + p {
     display: inline-block;
     margin-left: 80px;
 }
 
 .field-txt {
     position: relative;
     overflow: auto;
 }
 
 .field-txt .input_zone {
     position: relative;
     width: 100%;
     float: none;
 }
 
 .field-txt .input-background {
     background-color: #ffffff;
     height: 36px;
     border-radius: 3px;
     position: absolute;
     right: 5px;
     width: 100%;
     max-width: 250px;
     z-index: 5;
 }
 
 .field-txt label {
     float: left;
     margin-bottom: 0;
 }
 
 div.field.field-txt label p {
     line-height: 36px;
 }
 
 .field-txt input {
     float: right;
     margin-right: 5px;
     width: 100%;
     max-width: 250px;
     background-color: transparent !important;
     position: relative !important;
     z-index: 10 !important;
 }
 
 .field-txt div.field_errors {
     position: absolute;
     z-index: 7;
     margin-top: 0;
     color: #ff0000;
     background-color: transparent;
     top: 4px;
     right: 23px;
     bottom: auto;
     border: none;
     font-size: 12px;
 }
 
 .field-radio .iradio_square {
     position: absolute;
     top: 5px;
 }
 
 .grid_option .iradio_square {
     position: relative;
 }
 
 .pays-larg .input_zone .select2.select2-container {
     max-width: 300px;
     width: 100% !important;
 }
 
 .field-radio .radio_option label {
     margin-left: 27px;
 }
 
 .field-radio .field_errors {
     width: auto !important;
 }
 
 .field-checkbox .check_option {
     position: relative;
     vertical-align: top;
 }
 
 .field-checkbox .icheckbox_square {
     position: absolute;
     top: 5px;
 }
 
 .icheckbox_square {
     position: absolute;
 }
 
 .grid_option .icheckbox_square {
     position: absolute;
     margin: 0 auto;
     left: 0;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
 }
 
 .label-after-check {
     left: 20px;
     top:-4px;
 }
 
 .field-checkbox label {
     margin-left: 27px;
 }
 
 .title {
     font-size: 30px;
     line-height: 1.1em;
     margin-bottom: 25px;
 }
 
 .oblig {
     margin-top: 10px;
     color: #db4437;
 }
 div.input_zone ::placeholder { 
   opacity: 1; transition: opacity .5s; 
 }
 div.input_zone > input {
 -webkit-text-size-adjust: 100%;
     --woocommerce: #a46497;
     --wc-green: #7ad03a;
     --wc-red: #a00;
     --wc-orange: #ffba00;
     --wc-blue: #2ea2cc;
     --wc-primary: #a46497;
     --wc-primary-text: white;
     --wc-secondary: #ebe9eb;
     --wc-secondary-text: #515151;
     --wc-highlight: #77a464;
     --wc-highligh-text: white;
     --wc-content-bg: #fff;
     --wc-subtext: #767676;
     box-sizing: border-box;
     border-width: 0;
     border-style: solid;
     border-color: currentColor;
     font-family : "Arima", Arial, sans-serif;
     font-size: 100%;
     margin: 0 0 10px 0;
     overflow: visible;
     padding: 0;
     line-height: inherit;
     color:#000000;
     --bg-opacity: 1;
     /*background-color: rgba(255, 236, 202, var(--bg-opacity));*/
     border-bottom-width: 2px;
     width: 100%;
     height: 30px;
 }
 
 div.input_zone > input:hover, div.input_zone > input:focus {
 outline:  none;
 }
 
 .tooltip_zone > input {
     border-radius: 0;
     border: none;
     border-bottom: 2px solid #ccc;
     width: 75%;
 }
 
 .tooltip_zone > input:focus {
     border-radius: 0;
     border: none;
     border-bottom: 2px solid #cccccc;
     background: transparent;
     width: 100%;
     transition: width .250s ease-in, border-bottom .250s ease-in;
 }
 
 
 /*.case-coche .mandatory-label{
 position: relative;
 left: 40px;
 margin-bottom: 0 !important;
 }
 .case-coche .input_zone{
 position: absolute;
 }
 .case-coche .icheckbox_square {
 
 position: absolute;
 top: -65px;
 
 }
 .case-coche{
 margin:10px 0 0 !important;
 }
 .case-coche .field_errors{
 position: absolute;
 }*/
 
 .confirm-form-zone #header {
     display: none;
 }
 
 
 .select2.select2-container.select2-container--default{
   width:100% !important;
 }
 
 .select2-selection.select2-selection--single {
     outline: none;
 }
 
 .select2-selection.select2-selection--single:focus {
     outline: none;
 }
 
 .select2-selection.select2-selection--single:hover {
     outline: none;
 }
 
 .select2-selection.select2-selection--single:active {
     outline: none;
 }
 
 .select2-selection.select2-selection--single:link {
     outline: none;
 }
 
 .select2-selection.select2-selection--single:visited {
     outline: none;
 }
 
 div.fieldset-footer {
     padding : 10px;
     clear: both;
 }
 
 div.fieldset-footer * {
     font-size: 1em;
     font-weight: 600;
     color: #ffffff;
     text-align: left;
     line-height: 1.3em;
     margin-bottom: 0 !important;
 }
 
 
 /******* NEW STYLE FOR CASE COCHE + MANDATORY *****/
 
 
 
 /******* NEW STYLE FOR CASE COCHE + MANDATORY *****/
 .checkbox-field{
   position:relative;
   clear:both;
 }
 .checkbox-field p{
   margin: 0 30px;
 }
 .checkbox-field div.input_zone{
   position: absolute;
   top: 0px;
 }
 .mandatory-tag{
   display: none !important;
 }
 .mandatory-label p::after{
   content:"*";
   width:10px;
   left:10px;
   margin-left:10px;
   color : #ff0000;
 }
 .radio_option label{
   display: initial;
 }
 .checkbox-field.with-errors{
   border: 1px solid #f00;
 }
 .checkbox-field.with-errors .field_errors{
   display:none;
 }
 /***********************************/
 
 
 /*** NPS ***/
 
 
 div.nps .smart_option_block {
     border: 0;
     opacity: 0.7;
 }
 
 div.nps .smart_option_block:hover {
     border: 0;
     opacity: 0.9;
 }
 
 div.nps .smart_option_block:selected {
     border: 0;
     opacity: 1;
 }
 
 div.nps div.smart_option div.selected {
     border: 0;
     opacity: 1;
 }
 
 div.nps .smart_option_block p {
     font-size: 15px;
     line-height: normal;
     color: #fff;
     border: none !important;
     margin: 0px !important;
     padding-top: 15px !important;
     padding-bottom: 15px !important;
     text-align: center;
 }
 
 div.nps .smart_option_block {
     margin-right: 0;
     padding: 0;
 }
 
 div.nps .note {
     display: flex;
     flex-direction: row;
     justify-content: start;
 }
 
 div.nps .note p {
     font-size: 11px;
     margin: 0;
 }
 
 div.nps .note p:last-child {
     margin-left: auto;
 }
 
 div.nps .smart_option {
     flex:1;
 }
 
 div.nps .smart_one {
     display: flex;
     flex-direction: row;
 }
 
 .zero {
     background-color: #e04056;
     margin-left: 0;
     -webkit-border-top-left-radius: 4px;
     -moz-border-radius-topleft: 4px;
     border-top-left-radius: 4px;
     -webkit-border-bottom-left-radius: 4px;
     -moz-border-radius-bottomleft: 4px;
     border-bottom-left-radius: 4px;
 }
 
 .un {
     background-color: #e64b61;
 }
 
 .deux {
     background-color: #e96359;
 }
 
 .trois {
     background-color: #ec7a50;;
 }
 
 .quatre {
     background-color: #ef8f45;
 }
 
 .cinq {
     background-color: #f2a841;
 }
 
 .six {
     background-color: #ddad44;
 }
 
 .sept {
     background-color: #c7b24e;
 }
 
 .huit {
     background-color: #b3b656;
 }
 
 .neuf {
     background-color: #9dbb5c;
 }
 
 .dix {
     background-color: #87bf64;
     -webkit-border-top-right-radius: 4px;
     -moz-border-radius-topright: 4px;
     border-top-right-radius: 4px;
     -webkit-border-bottom-right-radius: 4px;
     -moz-border-radius-bottomright: 4px;
     border-bottom-right-radius: 4px;
 }
 
 /*** NPS ***/
 
 
 /*** STYLE SPECIAL "AUTODIAG" ***/
 .auto-diag div.fieldset-header h3 {
   padding: 10px 10px 8px 10px;
   background-color: #42927f;
   margin-bottom: 20px;
   text-align: center;
 }
 .auto-diag div.fieldset-header p,
 .auto-diag div.fieldset-header h2,
 .auto-diag div.fieldset-header h3,
 .auto-diag div.fieldset-header a{
   color: #ffffff;
 }
 .auto-diag #form_zone_inside {
     padding: 0px 30px 0px 30px;
 }
 .auto-diag #header {
     padding: 30px 20px;
     background: url('https://helium-connect.fr/customers_data/4ff2caade694aa760c000018/images/fond-auditdata.png');
     background-repeat:none;
 }
 .auto-diag div#progression {
     margin-top: 0px;
     padding: 12px 0px 0px 0px;
 }
 /*.auto-diag div.field label::before{
     content: url(https://helium-connect.fr/customers_data/4ff2caade694aa760c000018/images/fleche_nh.png);
     position: relative;
     margin-right: 5px;
     top: 3px;
 }*/
 /*** FIN STYLE SPECIAL "AUTODIAG" ***/
 
 .bootstrap-datetimepicker-widget .datepicker table tr td.active.active{
   background-color: #116257;
 }
 .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover.disabled:hover, .datepicker table tr td.today.disabled.disabled:hover, .datepicker table tr td.today.disabled:hover.disabled:hover{
   background-color: #f4f4f4;
 }
 .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled.disabled, .datepicker table tr td.today.disabled.disabled{
   background-color: #f4f4f4;
 }
 .bootstrap-datetimepicker-widget table td.today::before{
   border-bottom-color: #116257;
 }
 .slots{
   padding: 20px;
 background: linear-gradient(180deg, #063d47, #126358);
 border-radius: 0 50px;
 }
 div.smart_option_block{
   border: 1px solid transparent;
     text-align: center;
 }
 div.smart_option_block:hover, div.smart_option_block.selected{
   border: 1px solid #ffffff;
   border-radius: 0 20px;
   text-align: center;
 }
 div.smart_option_block{
   color: #ffffff;
 }
 .datepicker table tr td.day:hover, .datepicker table tr td.day.focused {
     background: #ccc;
     cursor: pointer;
 }
 
 .datepicker table tr td.day.disabled {
   color: #ccc;
 }
 
 .answer_not_ok{
   display:none;
 }
 .text_answer_not_ok{
   display:none;
 }
 .bilan-long{
   line-height:25px;
 }
 .score-result{
   width: 100%;
 }
 
 .score-result-label{
   font-size:15px;
 }
 
 .icheckbox_square-green{
   position:absolute;
 }
 /*** MEDIAQUERY ***/
 @media screen and (max-width: 620px) {
 
     
     #header p img {
         max-width: 100%;
         height: auto;
     }
     
     div.fieldset-header p img {
         max-width: 100%;
         height: auto;
     }
     
     div.field-header p img {
         max-width: 100%;
         height: auto;
     }
     
     div.fieldset-footer p img {
         max-width: 100%;
         height: auto;
     }
     
     div.field-footer p img {
         max-width: 100%;
         height: auto;
     }
     
     #footer p img {
         max-width: 100%;
         height: auto;
     }
     
     #after_submit p img {
         max-width: 100%;
         height: auto;
     }
     
     div.pre-form p img {
         max-width: 100%;
         height: auto;
     }
     
     .canvas-container {
       width:100% !important;
     }
     
     canvas {
       width:100% !important;
     }
     
     .select2.select2-container.select2-container--default {
         width: 100% !important;
     }
     body{
     background-image:none !important;
     }
 }
 
 @media screen and (max-width: 500px) {
 
     div.field label p {
         margin-bottom: 10px;
         line-height: normal;
     }
     div.field.field-radio label,
     div.field.field-checkbox label {
         text-align: left !important;
     }
     div.field .check_option label {
         display: inline-block !important;
         margin-bottom: 2px;
     }
     .number {
         position: relative;
     }
     .number + p {
         margin-left: 0;
     }
     .field-txt input {
         float: none;
         margin-right: 0;
     }
 }
 
 @media screen and (max-width: 326px) {
     div.question-apparente div.field_errors {
         top: -66px;
         bottom: auto;
     }
 }
 
 @media only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px) {
     /* Force table to not be like tables anymore */
     .gridresp .table,
     .gridresp thead,
     .gridresp tbody,
     .gridresp th,
     .gridresp td,
     .gridresp tr {
         display: block;
     }
     /* Hide table headers (but not display: none;, for accessibility) */
     .gridresp tr:first-child {
         position: absolute;
         top: -9999px;
         left: -9999px;
     }
     .gridresp tr {
         border: 1px solid #ccc;
         margin: 5px 0;
     }
     .gridresp td {
         /* Behave  like a "row" */
         border: none;
         border-bottom: 1px solid #eee;
         position: relative;
         padding-left: 50% !important;
     }
     .gridresp td:before {
         /* Now like a table header */
         position: absolute;
         /* Top/left values mimic padding */
         top: 6px;
         left: 6px;
         width: 45%;
         padding-right: 10px;
         white-space: nowrap;
     }
     .gridresp td.grid_label {
         max-width: 100%;
         text-align: center;
         font-weight: bold;
     }
     .gridresp td:nth-of-type(1):before {
         content: " ";
     }
     .gridresp td:nth-of-type(2):before {
         content: "Très satisfaisant";
     }
     .gridresp td:nth-of-type(3):before {
         content: "Satisfaisant";
     }
     .gridresp td:nth-of-type(4):before {
         content: "Peu satisfaisant";
     }
     .gridresp td:nth-of-type(5):before {
         content: "Insatisfaisant";
     }
 }