body {
	 background-color: white; 
	line-height: 1.8;
}
form {background-color:#EEEFEF;}

h1, h2, h3, h4, h5, h6 {letter-spacing: -1px;color:#375372}

#HEAD_SECTION {
	background-color:#FFFFFF;
	color:#000000;
	text-align:center;
	}
	
#HEAD_INNER{padding:0px;
	margin:0 auto;
	max-width:1000px;}
	
.LOGO_SPAN {
display: inline-block;
width:20%;
text-align:left;
padding:0px;
margin:0px;
}

.LANG_SPAN {
display: inline-block;
width:20%;
height:auto;
text-align:right;
padding:0px;
margin:0px;
}

.LANG_BUTTON{
    background-color: transparent;
    border: none;
    color: #333333;
    text-align: center;
    text-decoration:underline;
    display: inline-block;
}

#BODY_SECTION, #BUTTON_TABLE, #PROGRESS_TABLE {
	background-color:#EEEFEF;
	}
	
#BUTTON_TABLE div {padding:.8em;margin-top:10%;} 
	
thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

table {background-color:transparent !important;}

table.MATRICE {margin-left: auto;
    margin-right: auto;}
	
#FOOT_SECTION {
	 background-color: white; 
	color: #333333;
}

#FOOT_SECTION a {color:#008ecb;text-decoration:none;}
#FOOT_SECTION a:hover {color:#008ecb;text-decoration:underline;}
#FOOT_SECTION a:visited {color:#008ecb;text-decoration:none;}

label {cursor: pointer;}
label:hover {background-color: #EEEFEF;}

.EQUIVALENTH5 {color:red;display:block;padding:2px;}
.EQUIVALENTH6 {color:red;padding:2px;}

/* resizing and recoloring language buttons */
input[name="_langue"] {background-color: #335271; padding:10px 10px;}
input[name="_langue"]:hover {background-color: #344454; padding:10px 10px;}

.BUTTON {
    -webkit-appearance: none;
    background-color: #008ecb;
    border: none;
    color: white;
    font-weight:bold;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 10px;
    box-shadow: 1px 0 2px #888888;
}

.BUTTON:hover {
    background-color: #0072A2;
    border: none;
    color: white;
    font-weight:bold;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 10px;
    box-shadow: 1px 0 2px #888888;
}


.SPECIAL_COLUMN0, .SPECIAL_COLUMN1, .SPECIAL_COLUMN2, .SPECIAL_COLUMN3, .SPECIAL_COLUMN4, .SPECIAL_COLUMN5, .SPECIAL_COLUMN6, .SPECIAL_COLUMN7, .SPECIAL_COLUMN8, .SPECIAL_COLUMN9, .SPECIAL_COLUMN10, .SPECIAL_COLUMN11 {
	text-align:center;
	padding: 5px;
}

.SPECIAL_LINE_A0, .ORDINARY_CELL_A1  { background: white; font-weight:normal; color:black; padding:5px;}
.SPECIAL_LINE_B0, .ORDINARY_CELL_B1 { background: none; font-weight:normal; color:black; padding: 5px;}

.ORDINARY_CELL_A1:hover, 
.ORDINARY_CELL_B1:hover, 
.SPECIAL_CELL1:hover { 
background: #DADADA!important;
	}
	
.LIGNE {padding: 5px;padding-left: 0px;}


.err, .ERREUR {
	color: #a94442;
}

.CATEGORYTABLE tr td {padding: 3px;}
.CATEGORYTABLE tr td:nth-of-type(1) {display:none;}

.REPONSE_INPUT {
	min-height: 40px;
	padding-left: 20px;
	margin-bottom: 0;
	font-weight: 400;
	cursor: pointer;
}


.REPONSE > label {
        display: inline-block;
        max-width: 100%;
        cursor: pointer;
        vertical-align: middle;
}

/* Exit the Survey button if needed */

.EXIT_SPAN {
width:20%;
height:auto;
text-align:right;
padding:8px;
margin:0px;
}

.exitRight {float:right;}

.exitSurvey {background-color: /*#DF7627*/ #F7931D;border:none;border-radius:10%;color:white;padding:.8em;font-weight:bold;box-shadow: 1px 0 2px #888888;}

.exitSurvey a, .exitSurvey a:hover, .exitSurvey a:active {color:white;text-decoration:none;}

@media only screen and (max-device-width: 767px) {

.EXIT_SPAN {display:block;text-align:center;}

.exitRight {float:none;margin-left:auto;margin-right:auto;}

}

/*border around inputs when checked */

.SPECIALTBOX {
 background-color: #EBEBE4;
 cursor: default;
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select
}

.SPECIALTBOX:focus {
 background-color: #EBEBE4;
 cursor: default;
 -moz-user-select: none;
    border: 1px gray!important;
    /*border:none!important;*/
 outline-color: gray!important;
}

input:enabled:hover:not([class]) {
    border-color: #ccc;
    box-shadow:0 0 5px 0px #ccc inset;
}

input[type='text']:focus, textarea:focus {
  border: 1px solid #375372;
  outline-style: solid;
  outline-color: #375372;
}

input[type="radio"]:checked {
  line-height: 14px;
}

input[type="checkbox"]:checked {
  line-height: 14px;
}

/*MATRICE TABLES */

.MATRICE3 input[type="radio"]:hover {border-color:#375372!important;}

.MATRICE input[type='radio'] {
        -webkit-appearance: inherit;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1px solid gray;
        cursor: pointer;
    }
    .MATRICE input[type='radio']:before {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        border-radius: 50%;
    }

.MATRICE  input[type="radio"]:checked:before {
        background: #375372;
     content: "\25CF";
     /*font-size: 1.3em;*/
     vertical-align:center;
     color: white;
     display:flex;
     justify-content:center;
     align-items:center;
     position: absolute;
     width: 24px;
     margin-right: 0.375em;
     transition: 0.25s ease;
      }

   .MATRICE  input[type="radio"]:checked {
      border: 3px gray;
      box-shadow: 1px 0 2px #888888;
    }
    
.MATRICE input[type='checkbox'] {
        -webkit-appearance: inherit;
        width: 24px;
        height: 24px;
        border-radius: 10%;
        border: 1px solid gray;
        cursor: pointer;
    }
    .MATRICE input[type='checkbox']:before {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        border-radius: 10%;
    }

 .MATRICE input[type="checkbox"]:checked:before {
        background: #375372;
     content: "\2713";
      /*font-size: 1.3em;*/
     font-weight: bold;
     vertical-align:center;
     color: white;
     display:flex;
     justify-content:center;
     align-items:center;
     position: absolute;
     width: 24px;
     margin-right: 0.375em;
     transition: 0.25s ease;
        }
    
    .MATRICE input[type="checkbox"]:checked {
      border: 3px gray;
      box-shadow: 1px 0 2px #888888;
    }

/* CATEGORYTABLE */
 input[type='radio'] {
        -webkit-appearance: inherit;
        width: auto;
        height: 24px;
        border-radius: 50%;
        border: 1px solid gray;
        cursor: pointer;
    }
    input[type='radio']:before {
        content: '';
        display: block;
        width: auto;
        height: 24px;
        border-radius: 50%;
    }

 input[type="radio"]:checked:before {
        background: #375372;
        content: "\25CF";
     /*font-size: 1.3em;*/
     vertical-align:center;
     color: white;
     display:flex;
     justify-content:center;
     align-items:center;
     position: absolute;
     width: 24px;
     margin-right: 0.375em;
     transition: 0.25s ease;
      }
    
   input[type="radio"]:checked {
      border: 3px gray;
      box-shadow: 1px 0 2px #888888;
    }

input[type='checkbox'] {
        -webkit-appearance: inherit;
        width: auto;
        height: 24px;
        border-radius: 10%;
        border: 1px solid gray;
        cursor: pointer;
    }
    input[type='checkbox']:before {
        content: '';
        display: block;
        width: auto;
        height: 24px;
        border-radius: 10%;
    }

 input[type="checkbox"]:checked:enabled:before {
         background: #375372;
	 content: "\2713";
	/*font-size: 1.3em;*/
     font-weight: bold;
     vertical-align:center;
     color: white;
     display:flex;
     justify-content:center;
     align-items:center;
     position: absolute;
     width: 24px;
     margin-right: 0.375em;
     transition: 0.25s ease;
        }
    
    input[type="checkbox"]:checked:enabled {
      border: 3px gray;
      box-shadow: 1px 0 2px #888888;
    }

input:disabled {
  box-shadow: 0 0 5px 0px #888888 inset;
}

/*@media only screen and (max-device-width: 767px) {

input[type="radio"]:checked:before {font-size: 1.6em;}

input[type="checkbox"]:checked:enabled:before {font-size: 1.6em;}

}*/

/* calcul buttons */
input[name^="_bouton_calcule"] {background-color: transparent; padding:5px;font-size:2.2em;cursor:pointer;vertical-align: middle;color:#000000;}

input[name^="_bouton_calcule"]:hover {background-color: transparent; padding:5px;font-size:2.2em;cursor:pointer;vertical-align: middle;color:#696969;}

/* upload button */
input[name="_upload_filename"] {background-color:transparent;color:black;border:none;}
input[name="_upload_filename"]:hover {background-color:transparent;color:black;border:none;}

@media only screen and (max-device-width: 767px) {
    table.MATRICE, table.MATRICE2, table.MATRICE3, div#BUTTON_TABLE > div > table.BOUTONS {width:100%;}
    th.SPECIAL_LINE_A0, th.SPECIAL_LINE_B0, td.ORDINARY_CELL_A1, td.ORDINARY_CELL_B1 {display:block;}
    th.SPECIAL_LINE_A0, th.SPECIAL_LINE_B0 {background-color:#CCCCCC;}
    th.SPECIAL_LINE_A0, th.SPECIAL_LINE_B0 {height:auto; /*65px;*/}
    span.LIGNE {font-weight:600;}
    /*th.SPECIAL_LINE_A0, th.SPECIAL_LINE_B0,*/ td.ORDINARY_CELL_A1, td.ORDINARY_CELL_B1 {text-align:center!important;}
    
  /* calcul buttons */
input[name^="_bouton_calcule"] {/*font-size: 14px;*/ color:white!important;box-shadow:0 0 0 transparent;}  

#spanarrow {
font-size: 1.6em;
}

/* upload button */
input[name^="_upload_filename"] {font-size: 1em;box-shadow:0 0 0 transparent;} 

/* language buttons */
input[name="_langue"] {font-size: 1em;box-shadow:0 0 0 transparent;}

#spanarrow {
font-size: 1.2em;
}

}

@media only screen and (min-device-width: 768px) {
td.ORDINARY_CELL_A1, td.ORDINARY_CELL_B1{
    height:50px;
}
}

.SPECIAL_COLUMN0  {vertical-align:bottom !important;background-color:#EEEFEF;border-bottom:1px solid #CCCCCC;padding:10px;}
.SPECIAL_COLUMN1  {vertical-align:bottom !important;background-color:#EEEFEF;border-bottom:1px solid #CCCCCC;padding:10px;}

.SPECIAL_LINE_A0 {background-color:#EEEFEF;border-bottom:1px solid #CCCCCC;}

.ORDINARY_CELL_A1 {background-color:#EEEFEF;border-bottom:1px solid #CCCCCC;}

.SPECIAL_LINE_B0 {background-color:#EEEFEF;border-bottom:1px solid #CCCCCC;}

.ORDINARY_CELL_B1 {background-color:#EEEFEF;border-bottom:1px solid #CCCCCC;}

.ORDINARY_CELL_A1 .REPONSE label {display:none;}

.ORDINARY_CELL_B1 .REPONSE label {display:none;}


@media only screen and (max-width: 767px) {
	.LOGO_SPAN {
		display: inline-block;
		width:100%;
		text-align:center;
		}
		
	.LANG_SPAN {
		display: none;
		}
		
.SPECIAL_COLUMN1 {display:none;}

#FOOT_SECTION {font-size: 14px;}

.THERMOMETRE {display:none;}

.ORDINARY_CELL_A1 .REPONSE label {display:inline-block;width:100%;}

.ORDINARY_CELL_B1 .REPONSE label {display:inline-block;width:100%;}

.COLONNE {display:none;}

table[cellpadding="3"] td {display:block;text-align:left;min-width:50px;}

table[cellpadding="3"] th {vertical-align:top !important;}

label {
	display:inline-block;
	width:auto;
	min-width:90px;
	}

label:hover {background-color: #b3b3b3;}

.DROPDOWN {max-width:300px;}

.TEXTBOX {max-width:300px!important;}

	}
	

 @media only screen and (max-width: 416px) {


.DROPDOWN {max-width:200px!important;}

.DROPDOWN:not([id]) {    
    display: block;
    font-size: 14px!important;
    font-family: sans-serif;
    font-weight: 700;
    color: #444;
    line-height: 1.6;
    padding: .6em 1.4em .5em .8em;
    max-width: 200px!important; 
    }

.TEXTBOX {max-width:240px!important;}


.ORDINARY_CELL_A1 .REPONSE label {width:100%;}

.ORDINARY_CELL_B1 .REPONSE label {width:100%;}


.SPECIAL_COLUMN1 {display:none;}

	}
	
 @media only screen and (max-width: 379px) {
         .TEXTBOX {max-width:180px!important;}
     
   .DROPDOWN:not([id]) {    
    display: block;
    font-size: 12px!important;
    font-weight: 700;
    color: #444;
    line-height: 1.6;
    padding: .6em 1.4em .5em .8em;
    max-width: 170px!important; 
    }   
     
}

/* column widths */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* Create five equal columns that float next to each other */
.column {
  float: left;
  width: 16.66%;
  padding: 5px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
  padding: 5px;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

#HEAD_SECTION {
text-align: left;
padding: 1em;
}


/* fancy dropdown css */

.DROPDOWN {
    display: block;
    height: 50px; 
    font-family:inherit;
    font-size: 1em;
    font-weight: 600;
    color: #444;
    padding: .6em 1.4em .5em .8em;
    max-width: 100%; 
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;	
}

.DROPDOWN::-ms-expand {
    display: none;
}
.DROPDOWN:hover {
    border-color: #888;
}
.DROPDOWN:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222; 
    outline: none;
}
.DROPDOWN option {
    font-weight:normal;
}

.SPECIAL {
	color: gray;
}

.BUTTON {
	max-width: 160px;
}

.THERMOMETRE {display:none;}

/* character count for open ends */
span[id^="rchar"] {color:#39598C;}

.TEXTBOX, .NUMBOX {
  max-width: 100%;
  display: inline-block;
  border: 1px solid #929292;
  border-radius: 5px;
  padding: 10px;
  margin-top:3%;
  box-sizing: border-box;
} 


tr:only-child textarea {position:absolute;
  left: 50%;
  padding: 15px;
  margin-top: 1%;
  transform: translate(-50%);
 } 

textarea {font-family: 'Noto Sans', sans-serif;}


table.MATRICE > tbody > tr > td {
    padding: 1em;
    line-height: 1.82857143;
    vertical-align: middle;
} 

@media only screen and (min-width: 768px) {

.MATRICE3 tr:nth-child(odd):hover > th.SPECIAL_LINE_A0  {background-color:#C9C9C9;}
.MATRICE3 tr:nth-child(odd):hover > td.ORDINARY_CELL_A1  {background-color:#C9C9C9;}
.MATRICE3 tr:nth-child(even):hover > th.SPECIAL_LINE_B0  {background-color:#C9C9C9;}
.MATRICE3 tr:nth-child(even):hover > td.ORDINARY_CELL_B1  {background-color:#C9C9C9;}

}

table.BOUTONS > tbody > tr > td {
	padding: 10px;
}


input[type=radio], input[type=checkbox] {width:24px;}

span.COLONNE {
   /* padding:0 10px; */
   padding: 0px;
       white-space: normal;
       display: flex;
       align-items: center;
}

a, a:hover {
	color: #008ecb;
}

/* radio & checkbox type inputs */
/* Keep if defaults are used instead */

/*input[type="checkbox"], input[type="radio"] {
	margin: 4px 0 0;
	margin-top: 1px\9;
	line-height: normal;
    cursor: pointer;
}

input[type="checkbox"], input[type="radio"] {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
    cursor: pointer;
}*/

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    color: #003f70;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    background-color: #333333;
    color: #EEEFEF;
    text-align: center;
    padding: 5px 8px;
    border-radius: 6px;
    font-size:.8em;
 
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltip .tooltiptext {
    width: 270px;
    top: 100%;
    left: 50%;
    margin-left: -135px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltiptext a {color: #EEEFEF;}

/* if needed css accordions */

/* lang accordion dropdowns */
/*details.lang {position:absolute; color: white;z-index:5;}*/
 details.lang {position:relative; float:right; color: white;z-index:5;}
details.lang { background-color:#003F70; padding:10px;border-radius:5%;cursor:pointer;}

/* buttons are specifc to lang class */
.BUTTONL {color:white;font-size:1em;cursor:pointer;}
.BUTTONL:hover {text-decoration: underline;}

details > summary {
  list-style: none;
}

details.accordion {
	background-color: #f1f1f1;
	color: #444;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	display:inline-block;
	text-align: left;
	outline: none;
	font-family: 'Open Sans', Noto Sans, sans-serif;
	transition: 0.4s;
}

summary.heading {
	font-weight: 600;
}

summary > p.panel {
	padding: 0 18px;
	background-color: transparent;
	font-size: 1em;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0; margin-top: -10px}
  100%  {opacity: 1; margin-top: 0px}
}

#conTab {max-width:100%;}
#conTab, td {padding:15px;}

@media only screen and (max-width: 600px) {

#conTab td {display:block;padding:5px;}

}