body {
	margin-bottom: 5px;
}
.top-bar {
	display: block;
	padding: 5px 0;
	background-color: #06afb4;
	position: absolute;
	width: 100%;
	z-index: 10000;
}
.top-bar .row {
	margin-right: 0;
}
.top-bar .row > div {
	display: flex;
}
.logo {
    height: 70px;
    margin: 5px;
}
.progress {
	height : 10px;
	margin: auto;
	margin-top : 12px;
	width: 70%;
	padding : 3px;
	display : none;
}
.progress-bar {
	background-color : #01afb6;
	-webkit-box-shadow : none;
	box-shadow : none;
	padding-bottom : 2px;
	border-radius : 3px 0 0 3px;
    line-height: 50px;
    padding: 0 5px;
    min-width : fit-content;
	font-size: 30px;
}
.progress .status {
	position: absolute;
	top : 25px;
    left: 0;
    width: 100%;
    padding-left: 76px;
    font-weight : 600;
}

.container.page-body {
	padding-top: 70px;
}
form#satisfaction .row{
	height: calc(100vh - 120px);
	overflow: hidden;
	visibility: hidden;
}
form#satisfaction.modify-form .row {
	height: auto;
	visibility: unset;	
}
.login-form, #synthese {
	margin-top: 45px;
}
.btn-primary {
	background-color: #06afb4;
	border : none;
}
.btn-primary:hover, .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
	background-color: #06c5cc;
}
input {
	margin: 10px;
}


/* conv-form */
#form .conversational-form {
	height: calc(100vh - 120px);
	margin: unset;
}

.sat-form cf-chat-response text > p {
	background: #06afb4;
    color: #fff;
}

.sat-form cf-chat-response.user text>p.show {
	background: #f1f1f1;
	color: #5a5a5a;
}

.sat-form cf-radio-button.cf-button cf-radio,
.sat-form .cf-button[checked=checked]:not(:focus):not(:hover):not(.highlight),
.sat-form .cf-button[selected=selected]:not(:focus):not(:hover):not(.highlight) {
	background: #f1f7f7;
}

.sat-form cf-radio-button.cf-button.highlight cf-radio,
.sat-form cf-radio-button.cf-button:focus cf-radio,
.sat-form cf-radio-button.cf-button:hover cf-radio,
.sat-form cf-radio-button.cf-button[checked=checked] cf-radio {
	background : #06afb4;
}

.sat-form cf-list-button:nth-child(2):after {
	background : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8' standalone='no'?%3e%3csvg viewBox='0 0 6 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg stroke='none' stroke-width='1' fill='%2306afb4' fill-rule='evenodd'%3e%3cg transform='translate%28-1230.000000, -567.000000%29'%3e%3cg transform='translate%28738.000000, 178.000000%29'%3e%3cg transform='translate%280.000000, 340.000000%29'%3e%3cg transform='translate%28466.000000, 0.000000%29'%3e%3cpolygon points='26 50.1538462 27.125 49 32 54 27.125 59 26 57.8461538 29.75 54'%3e%3c/polygon%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}

.sat-form cf-input-button.cf-input-button div.cf-icon-progress {
	background-image : url("data:image/svg+xml;charset=UTF-8,%3Csvg width='30px' height='30px' viewBox='0 0 30 30' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg fill='%2306afb4'%3E%3Cpolygon transform='translate%2815.500000, 15.500000%29 rotate%2890.000000%29 translate%28-15.500000, -15.500000%29 ' points='22 14.6875 12.111875 14.6875 16.6496875 10.1496875 15.5 9 9 15.5 15.5 22 16.6496875 20.8503125 12.111875 16.3125 22 16.3125'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.sat-form cf-input-button.cf-input-button div.cf-icon-attachment {
	background-image : url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12px' height='16px' viewBox='0 0 12 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%28-573.000000, -605.000000%29' stroke='%2306afb4'%3E%3Cg transform='translate%2884.000000, 136.000000%29'%3E%3Cg transform='translate%281.000000, 456.000000%29'%3E%3Cpath d='M499,23.1092437 L499,18.907563 C499,16.2016807 496.756849,14 494,14 C491.243151,14 489,16.2016807 489,18.907563 L489,24.5042017 C489,26.4369748 490.592466,28 492.561644,28 C494.530822,28 496.123288,26.4369748 496.123288,24.5042017 L496.123288,18.907563 C496.140411,17.7478992 495.181507,16.8067227 494,16.8067227 C492.818493,16.8067227 491.859589,17.7478992 491.859589,18.907563 L491.859589,23.1092437'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.sat-form .cf-button {
	color : #06afb4;
	border : 1px solid #bbe7e9;
}

.sat-form .conversational-form--enable-animation cf-input-button.cf-input-button .cf-input-icons>div {
	color : #06afb4;
}

.conversational-form cf-input input, .conversational-form cf-input textarea {
    border-radius: 20px;
    padding: 19px 60px 19px 30px;
    box-shadow: 0 0 5px 1px rgba(0,0,0,.15);
}
.conversational-form cf-input input:hover, .conversational-form cf-input textarea:hover {
    color: #5a5a5a;
}
.conversational-form .conversational-form-inner .show {
	display: table !important;
}

#synthese #gauge {
	margin: 25px 0;
}
#synthese canvas {
	height: 200px !important;
	width: 200px !important;
	display: inline-block !important;
	padding: 25px;
}
#synthese h5 {
	margin-top: -10px;
	font-weight: 600;
}
#synthese .charts {
	padding-top: 25px;
}

.texte-satisfaction{
	font-size: 18px; 
	margin: 0;
	color: #39c1cd;
}

tspan .result-bigger{
	font-size: 24px;
}

@media (min-width: 425px) {
	#synthese .chart {
		padding: 0 75px;
	    display: inline-block;
	}
}

.section {
	font-size: 1.4em;
}

.title-satisfaction{
	font-size: 24px;
	font-weight: 700;
}

.title-satisfaction-theme{
	font-size: 21px;
	font-weight: 600;
}

/*** Formulaire de modification ***/
h1.modify-title {
	margin-top: 30px;
	text-align: center;
}

.modify-form  .section {
	margin-top: 20px;
	font-weight: 700;
	color: #06afb4;
}

.modify-form .step {
	font-weight: 700;
	margin-top: 10px;
}

.text.step label {
	width: 100%;
}

.modify-form  label {
	font-weight: 400;
	margin-right: 10px;
}

.modify-form .form-button {
	text-align: center;
	background: #06afb4;
	color: #fff;
	padding: 10px;
	border-radius: 15px;
	border: none;
	margin-top: 20px;
}

body {
}

.depassee-msg {
	background-color: #ddeef3;
	border-radius: 10px;
	margin: 3rem 0;
	padding: 4rem 2rem;
	width:100%;
	font-size: 1.6rem;
	font-weight: bold;
}

.page-container {
	display: flex;
	flex-flow: column;
	margin: auto;
	max-width: 650px;
}

.header-bar {
	display: flex;
	align-items: center;
	justify-content: start;
	margin: 1em auto;
	width: 100%;
}

.header-bar>h1 {
	margin-left: 20px;
	font-family: 'Lato', sans-serif;
	font-size: 2.8em;
}

.header-bar>h1>span {
	font-weight: 600;
	color: #39c1cd;
}

#essi_logo_container {
	display: block;
	margin: auto 0px;
	width: 155px;
	height: auto;
}

#essi_logo {
	width: 155px;
	height: auto;
}

.progress {
	height: 20px;
	background-color: #39c1cd;
	border-radius: 6px;
}
.progress>span {
	margin: 0;
	color: #fff;
	position: absolute;
    left: 50%;
}

.quiz-container {
	display: block;
	height: 70vh;
	margin-top: 1em;
	position:relative;
}

.quiz-content {
	display: block;
	max-height: 100%;
	overflow-y: auto;
	position:absolute;
	bottom:0;
}

.quiz-content>div {
	display: none;
}

.quiz-content>div.visible {
	display: inline-block;
	animation: SHW .5s;
    animation-fill-mode: both
}
@keyframes SHW {
    from {
        transform:scale(0.7);
        opacity:0
    }
    to {
        transform: scale(1);
        opacity:1
    }
}

.text-row {
	background-color: #39c1cd;
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-size: 1.1em !important;
	padding: 1.2em;
	margin: 0.5em auto 0.5em 0;
	border-radius: 0 20px 20px 20px;	
}
.text-row-secondary {
	background-color: #ddeef3;
	color: #000;
	font-family: 'Lato', sans-serif;
	font-size: 1.1em !important;
	padding: 1.2em;
	margin: 0.5em 10% 0.5em 0;
	border-radius: 0 20px 20px 20px;	
}
.cards-row {
	margin: 1em 0;
	overflow: hidden;
}
.radio-card {
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	height: 300px;
	background-color: #ddeef3;
	border-radius: 10px;
	padding: 10px 10px 5px 10px;
}
.radio-card .row {
	height: 100%;
	
}
.card-img-box {
	display: block;
	margin: auto;
	height: 45%;
}
.card-content {
	height: 55%;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
}
.card-img {
	display: flex;
	justify-content: center;
	width: auto;
	height: 100%;
	margin: auto;
}
.card-text {
	font-family: 'Lato', sans-serif;
	font-size: 1em;
	font-weight: 500;
	margin-top: 10px;
}
.radio-inputs {
	display: flex;
	flex-flow: row;
	width: 100%;
	justify-content: space-between;
	font-size: 0.9em;
	border-top: solid 2px #39c1cd; 
	margin: auto 0 0 0;
	padding: 15px 0;
}
.radio-inputs input[type=radio] {
    margin-right: 5px;
}
/* Custom Radio Button */
/* input[type="radio"] { */
  /* display: none; */
/* } */
/* input[type="radio"] + label { */
  /* position: relative; */
  /* padding-left: 1rem; */
  /* margin-left: 0.7em; */
/* } */
/* input[type="radio"] + label::before, */
/* input[type="radio"] + label::after { */
  /* display: block; */
  /* position: absolute; */
  /* box-sizing: border-box; */
  /* bottom: 2px; */
  /* left: 0; */
  /* content:''; */
  /* width: 1.6rem; */
  /* height: 1.6rem;  */
  /* border-radius: 1.6rem; */
  /* margin-left: -10px; */
/* } */
/* input[type="radio"] + label::before { */
  /* border: 1px solid #39c1cd; */
  /* background-color: #0000; */
/* } */
/* input[type="radio"]:checked + label::after { */
  /* background-color: #39c1cd; */
/* } */
/* Fin custom Radio button */
.radio-inputs label {
	font-weight: 600;
	color: #39c1cd;
}
.radio-inputs label>span.label-vrai {
	color: green;
}
.radio-inputs label>span.label-faux {
	color: red;
}

textarea.form-control.text, input#email_destinataire {
	border: solid 1px #39c1cd;
	font-family: 'Lato', sans-serif;
	font-weight: 500;
	padding: 5px 10px;
	border-radius: 5px;
}
textarea.form-control.text::placeholder, input#email_destinataire::placeholder{
    color: #39c1cd;
}
.form-control + .form-control {
  margin-top: 1em;
}

.cards-row div[class^="col-"] {
	padding: 0 10px;
}

.input-container {
	background-color: #ddeef3;
	border-radius: 10px;
	margin: 1em 0;
	padding: 2em;
	display: flex;
	flex-flow: column;
	width:100%;
}
.input-container label {
	font-family: 'Lato', sans-serif;
	font-weight: 500;
	font-size: 1.1em;
}
.input-container label>span {
	font-weight: 600;
}
.choices-button, .validate-comment {
    border-radius: 20px;
    padding: 6px;
    width: 160px;
	font-size: 1.1em;
    margin: 20px auto 0;
	background-color: #39c1cd;
	border: solid 2px #39c1cd;
    color: #fff;
}
.choices-button:hover, , .validate-comment:hover{
	background-color: #2f97a1;
	border: solid 2px #2f97a1;
    color: #fff;
}

.submit-su-button {
    border-radius: 20px;
    padding: 6px;
    width: 200px;
	font-size: 1.1em;
    margin: 20px auto 0;
	background-color: #39c1cd;
	border: solid 2px #39c1cd;
    color: #fff;
	/* display: none; */
}
.submit-su-button:hover{
	background-color: #2f97a1;
	border: solid 2px #2f97a1;
    color: #fff;
}

#validation_soumission {
	display: none;
	width: 100%;
}

.text-area-container {
	padding: 1em;
}

.checkbox-subject {
	font-family: 'Lato', sans-serif;
	font-size: 1.2em;
	font-weight: 600;
	width: 100%;
	border-bottom: solid 2px #000;
}

.checkbox {
	padding-top: 10px;
    margin-left: 5px;
}

.checkbox label {
	font-family: 'Lato', sans-serif;
	font-size: 1.1em;
	font-weight: 500;
}
/* Checkbox custom */
.form-control {
  font-family: system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.1;
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
}
input[type="checkbox"] {
	/* Add if not using autoprefixer */
	-webkit-appearance: none;
	appearance: none;
	/* For iOS < 15 to remove gradient background */
	background-color: #fff;
	/* Not removed via appearance */
	margin: 0;
    background-color: #0000;
    margin: 0;
    font: inherit;
    color: #39c1cd;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid #39c1cd;
    /* border-radius: 0.15em; */
    transform: translateY(-0.075em);
	display: grid;
	place-content: center;
	margin-left: -25px !important;
    position: absolute;
    margin-top: 3px;
}

input[type="checkbox"]::before {
	content: "";
	width: 1.15em;
	height: 1.15em;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em #39c1cd;
	background-color: #39c1cd;
	border: none;
}
input[type="checkbox"]:checked::before {
	transform: scale(1);
}
input[type="checkbox"]:focus {
	color: #0000;
	background-color: #0000;
	outline: #0000;
	box-shadow: inset 1em 1em #0000;
}
/* Fin Checkbox custom */

.text-row h4 {
	color: #fff;
	font-size: 1.6em;
}
span.slogan-essi {
	color: #000;
	font-weight: 600;
}
.essi-team-img-container {
	display: block;
    background-color: #ddeef3;
    border-radius: 20px;
	margin: 1em 0 0.5em 0;
	text-align:center;
	width: 100%;
}
.essi-team-img-container>img {
	width: 90%;
}
.button-row {
    text-align: center;
}
.synthese-button {
	border-radius: 20px;
    padding: 8px 16px;
    width: 220px;
	font-size: 1em;
    margin: 20px 15px 0 0;
	background-color: #000;
	border: solid 2px #000;
    color: #fff;
}
.synthese-button:hover {
	color: #fff;
}
.update-button {
    border-radius: 20px;
    padding: 6px;
    width: 200px;
	font-size: 1em;
    margin: 20px auto 0;
	background-color: #39c1cd;
	border: solid 2px #39c1cd;
    color: #fff;
}
.update-button:hover{
	background-color: #2f97a1;
	border: solid 2px #2f97a1;
    color: #fff;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #ffffff00;
}
::-webkit-scrollbar-thumb {
  background: #39c1cd; 
}

/* Page de synthese */

#synthese_content {

}
#synthese_content h4 {
	margin: 0 0 20px 0; 
	font-size: 1.5em;
}
#synthese_container > h5{
	color: #39c1cd;
	padding-bottom: 20px;
}
#barometre {
	padding: 0;
}
#jauges {
	margin-left: 30px;
}
#jauges_themes_row {
	display: flex;
	flex-flow: column;
	align-items: center;
}

#gauge_theme1, #gauge_theme2 {
	width: 80%;
	font-family: 'Lato', sans-serif;
	/* font-size: 1.1em; */
	font-weight: 600;
	color: #39c1cd;
	text-align: center;
    margin-bottom: 30px;
}
.barometre-table {
	width: 100%;
}
.barometre-table tr {
	height: 55px;
}
.barometre-table td {
	font-family: 'Lato', sans-serif;
	font-size: 1.1em;
	font-weight: 600;
}
.note-globale-table {
	width: 100%;
}
.note-globale-table .label-notes-row {
	height: 45px;
}
.note-globale-table .label-notes-row td {
	font-size: 12px;
	font-weight: bold;
	padding: 0 5px 0;
    position: relative;
    top: 12px;
	text-align: center;
}
.note-globale-table .label-notes-row td span {
	float: right;
	position: relative;
	top: -11px;
	font-size: 30px;
}
.note-globale-table .notes-row {
	height: 40px;
}
.note-globale-table .notes-row td {
	font-family: 'Lato', sans-serif;
	font-size: 1.1em;
	font-weight: 600;
	color: #fff;
	text-align: center;
	width: 10%;
	/* filter: saturate(1); */
}
.note-globale-table .notes-row td:hover {
	/* font-size: 1.3em !important; */
	filter: saturate(1.1) brightness(1.8);
}
.selected-note {
	/* font-size: 1.3em !important; */
	-webkit-box-shadow:inset 0px 0px 0px 3px #fff;
    -moz-box-shadow:inset 0px 0px 0px 3px #fff;
    box-shadow:inset 0px 0px 0px 3px #fff;
	filter: saturate(1.1) brightness(1.3);
}
.unselected-note {
	filter: saturate(0.4) brightness(0.7);
}
.barometre-table td:first-child {
}
.barometre-table td:last-child {
	padding-left: 10px;
}

.barometre-table .bt-tr10> td {
	color: #38683d;
}
.barometre-table .bt-tr10> td:first-child, .note-globale-table .bt-td10 {
	background-color: #38683d;
}
.barometre-table .bt-tr9> td {
	color: #51924b;
}
.barometre-table .bt-tr9> td:first-child, .note-globale-table .bt-td9 {
	background-color: #51924b;
}		   
.barometre-table .bt-tr8> td {
	color: #6eb253;
}
.barometre-table .bt-tr8> td:first-child, .note-globale-table .bt-td8 {
	background-color: #6eb253;
}
.barometre-table .bt-tr7> td {
	color: #9dc44d;
}
.barometre-table .bt-tr7> td:last-child {
	border-top: solid 2px #9dc44d;
}
.barometre-table .bt-tr7> td:first-child, .note-globale-table .bt-td7 {
	background-color: #9dc44d;
}
.barometre-table .bt-tr6> td {
	color: #d7dd3f;
}
.barometre-table .bt-tr6> td:first-child, .note-globale-table .bt-td6 {
	background-color: #d7dd3f;
}
.barometre-table .bt-tr5> td {
	color: #f5ec49;
}
.barometre-table .bt-tr5> td:first-child, .note-globale-table .bt-td5 {
	background-color: #f5ec49;
}
.barometre-table .bt-tr5> td:last-child {
	border-top: solid 2px #f5ec49;
}
.barometre-table .bt-tr4> td {
	color: #e7ae4a;
}
.barometre-table .bt-tr4> td:first-child, .note-globale-table .bt-td4 {
	background-color: #e7ae4a;
}
.barometre-table .bt-tr3> td {
	color: #d25b30;
}
.barometre-table .bt-tr3> td:first-child, .note-globale-table .bt-td3 {
	background-color: #d25b30;
}
.barometre-table .bt-tr2> td {
	color: #ce4239;
}
.barometre-table .bt-tr2> td:first-child, .note-globale-table .bt-td2 {
	background-color: #ce4239;
}
.barometre-table .bt-tr2> td:last-child {
	border-top: solid 2px #ce4239;
}
.barometre-table .bt-tr1> td {
	color: #a22430;
}
.barometre-table .bt-tr1> td:first-child, .note-globale-table .bt-td1 {
	background-color: #a22430;
}

.barometre-table td:first-child {
	color: #fff;
	padding: 0 10px;
	text-align: center;
}
.triangle {
	     display: inline-block;
    height: 0;
    width: 21px;
    border-top: 29px solid transparent;
    border-right: 17px solid;
    border-bottom: 29px solid transparent;
    margin: 12px 5px;
    vertical-align: middle;
}

#barometre .chiffre_barometre{
	width: 40px;
	font-size: 24px;
	height: 68px;
	border-bottom: 8px solid white
}

.theme-mobile-satisfaction{
	display: none;
}

@media (max-width: 768px) {
	.header-bar {
		margin: 1em auto;
		width: 80%
	}
	.header-bar>h1 {
		font-size: 1.6em;
	}
	#essi_logo_container {
		width: 75px;
	}
	#essi_logo {
		width: 75px;
	}
	.progress {
		width: 80%;
		margin: auto 10%;
	}
	.quiz-content, #validation_soumission, #synthese_content {
		margin: auto 10%;
		width: 80%;
	}
	.radio-card {
		margin: 1em 0;
		flex-flow: row nowrap;
		height: 150px;
	}
	.radio-card .row {
		width: 100%;	
		margin: 0;
	}
	.radio-inputs {
		justify-content: space-around;
		font-size: 1.1em;
	}
	.card-img-box {
		height: 100%;
		padding: 0;
		display: flex;
	}
	.card-img {
		width: auto;
		height: 100%;
		display: block;
		margin: auto;
	}
	.card-content {
		height: 100%;
	}
	.text-area-container {
		padding-right: 0px;
		padding-left: 0px;
	}
	#essi-team-img {
	width: 90%;
	}
	#synthese_container {
		margin: 1em auto;
		width: 80%;
		text-align: center;
	}
	#synthese_content {
		display: flex;
		flex-flow: column;
		text-align: center;
		margin: auto;
	}
	#barometre {
		margin: 0;
		padding: 0;
	}
	.barometre-table {
	    margin: 20px auto;
	}
	#jauges {
	    margin: 40px 0 0 0;
		padding: 0;
	}
}



@media (max-width: 550px) {
	.header-bar>h1 {
		font-size: 1.6em;
	}
	#essi_logo_container {
		width: 75px;
	}
	#essi_logo {
		width: 75px;
	}
	.radio-card {
		height: 160px;
	}
	.card-content {
		height: 100%;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
	}
	.card-img {
		width: 100%;
		height: auto;
	}
	.card-text {
		margin: 0;
	}
	.radio-inputs {
		flex-flow: column;
		padding: 10px 0;
	}
	.radio-inputs label {
		font-size: 0.9em;
		padding-bottom: 5px;
	}
	span.slogan-essi {
		font-size: 0.8em;
	}
	#essi-team-img {
	width: 90%;
	}
	.synthese-button {
		margin: 20px 0 0 0;
	}

	/** Questionnaire satisfaction **/
	.table-theme-header{
		display: none;
	}

	.td_control_radio{
		display: none;
	}

	.theme-mobile-satisfaction{
		display: flex;
		justify-content: space-around;
		margin: 40px 0;
	}

}

.disabled {
	background-color: #cbcbcb !important;
	border-color: #cbcbcb !important;
}

.img-grey{
	filter: grayscale(1);
}