/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

.token-page> .h3 {          /* v6 fenetre token */
    margin-bottom: 64px;
}


button.navbar-toggler {    /* v6 mobile */
    display: block;
    float: right;
    margin-top: 30px;
}


.navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
    align-items: center;
    display: block;
}


article .row {
		margin-right: 0px;
		margin-left: 0px;
	}

	.well.container-fluid {
		width: 100%;
	}

	.navbar.navbar-default.navbar-fixed-top {
	 /*   width: 50 */           /*enleve adapt */
	 /*   margin-left: 25%;   */
	}

	.top-container.space-col {
		/*margin-top: 149px; */   /* 26 */     /* v6 */
	}


	.title1 {
		color : #5670A1;
		font-size: 22px; 
		font-weight: bold;
		padding-top: 15px;
		
		/* max-width : 650px; */
		 display: inline-block;         	/* Piv display: inline-block; */ 
		/* text-align: center; */
	}


	.group-title {
		font-size: 18px;
	}


	#outerframeContainer {
		width: 1200px;             /* 50%; */    /* enleve Adapt */
		background-color: #fff; /* */
	/*	margin-left: auto;  */    /* */
	/*	margin-right: auto; */    /* */
		
		word-wrap: normal;
		-moz-hyphens: unset;
		-ms-hyphens : manual; /* ie */
		
		 margin-top: 1px;    /* 149 ou 179 v6 */  /* v6 = 0px ou en commentaire */
		
	}


	.container-fluid {
	    width: 100%;          /* 50%; 1070 */   /* enleve Adapt */     /* v6  */ 
	    max-width: 1200px;
		background-color: #fff; 
	   	margin-top: -28px;       /* 0px ou -26px v6  */ 
	   	
	   	padding-left: 0px;   /* v6 */
        padding-right: 0px;  /* v6 */
		
		word-wrap: break-word;   /* ajout piv */   /* normal */
		-moz-hyphens: unset; /* ajout piv */
		-ms-hyphens : manual; /* ie */
	}

	div.container-fluid div.progress {   
		width: 25%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 12px;
	}

@media screen and (max-width: 1200px) {
    
 	.container-fluid {
	    width: 1000px;                  /* 100% enleve Adapt */
		background-color: #fff; 
		margin-top: -26px;
	}
} 	

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

	article .row {
		margin-right: 0px;
		margin-left: 0px;
	}

	.well.container-fluid {
		width: 100%;
	}

	.navbar.navbar-default.navbar-fixed-top {
	    width: 100%;            /*enleve adapt */
	    margin-left: 1%;   
	}

	.top-container.space-col {
		/* margin-top: 192px; */      /* test v6 enleve 26px  */
	}


	.title1 {
		color : #5670A1;
		font-size: 16px; 
		font-weight: bold;
		padding-top: 15px;
		
		/* max-width : 650px; */
		/* display: inline-block; */
		/* text-align: center; */
	}


	.group-title {
		font-size: 18px;
	}


	#outerframeContainer {
		width: 100%;                /* enleve Adapt */
		background-color: #fff; /* */
		margin-left: auto;      /* */
		margin-right: auto;     /* */
		
		word-wrap: unset;
		-moz-hyphens: unset;
		hyphens: unset;
		
	}


	.container-fluid {
	    width: 100%;                  /* 100% enleve Adapt */
		background-color: #fff; 
		margin-top: -26px;
	}

	div.container-fluid div.progress {   
		width: 50%;   /* enleve Adapt */
		margin-left: auto;
		margin-right: auto;
		margin-top: 12px;
	}

}	/* fin media */


.top-container.space-col {
    background-color: inherit;
    margin-bottom: -28px;        /* V5=0px   V6=-179px ou 149  */   /* v6 -28 px */
}

.top-container.space-col .progress-bar {
    background-color: #00a2e8;
}

#navigator-container .btn-primary {
  /*  background-color: #00a2e8; */
}

.logo.img-responsive {
    max-height: 212px;
}

/* en commentaire */
/*
.titre-s {
	margin-left: 66%;
	text-align: center;
}
*/

.navbar-brand {
   /*  display: block; */   /* v6   */ 
   margin-right: 1px;       /* v6  */
   white-space: normal;     /* V6  */
   margin-top : 24px;       /* v6  */
}


.navbar-header {
    float: none;
}

/* Personaliser thème du CSPQ */

.navbar-header {
  /*background: url(/themes/survey/extends_fruity/files/enteteFond3.jpg) no-repeat transparent;   */ /*enleve adapt */
  /* background-size: 102%; */
}

 /* .extends_fruity_CSPQ.fruity.vanilla.font-noto.lang-fr.brand-logo*/
.fruity
 {
    background-color: #c9c9c9;
   /* background: url(/themes/survey/extends_fruity/files/imagefond2.png) repeat-x #c9c9c9; */
   display : block;   /* v6  */
}

.ls-question-mandatory.text-danger {
    font-weight: 1em;
    background-color: #B21A0D;
  /*  border: 1px solid #666666; */
    color: #FFFFFF !important;
    display: block;
  /*  margin-top: 10px; */
    padding: 3px;
    text-align: center;
}

.ls-error-mandatory.has-error .answertext.control-label {
    color: #b21a0d;
    font-weight: bold;
}

/* question tableau texte justifié à gauche */ 
.fruity .table-bordered > tbody > tr > th {
    text-align : left;
}

 .fruity .ls-move-btn.btn  {
	background-color: #00a2e8;
}

/* Question obligatoire cacher *asterisk  */ 
.asterisk {
    display: none;
}

.aide_col1 {
    float:left;
}

.aide_col2 {
    float:right;
}

.survey-description.text-info.text-center {
    text-align: unset !important;;      /* left(v5) v6  */
}

/* message par defaut de regex à cacher si success*/
.em_regex_validation.ls-em-success {
    display: none;
}

/* ajout plus espace pour message de sondage complété */
.completed-text {
    padding-top: 20px;
    padding-bottom: 50px;
    text-align: center;
}

/* ajout espace lien Effacer et recommencer */
.url-wrapper-survey-return {
    padding-bottom: 150px;
}    

/* fin */


/*** Variables ***/
html, body {
  padding: 0;
  margin: 0;
  width: 100%;
}

.visuallyHidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}

.mobile {
  display: block;
}

@media screen and (min-width: 1000px) {
  .mobile {
    display: none;
  }
}

.desktop {
  display: none;
}

@media screen and (min-width: 1000px) {
  .desktop {
    display: block;
  }
}

.cacher {
  display: none !important;
}

/***********************
    Grille Fluide
***********************/
.contenu-fluide {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (min-width: 1000px) {
  .contenu-fluide {
    padding-right: 0;
    padding-left: 0;
  }
}

.flex, .d-flex {
  display: -ms-flexbox !important;
  display: -webkit-box !important;
  display: flex !important;
}

.align-items-center {
  -ms-flex-align: center !important;
  -webkit-box-align: center !important;
          align-items: center !important;
}

.justify-content-end {
  -ms-flex-pack: end !important;
  -webkit-box-pack: end !important;
          justify-content: flex-end !important;
}

.justify-content-start {
  -ms-flex-pack: start !important;
  -webkit-box-pack: start !important;
          justify-content: flex-start !important;
}

.ligne {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

/***********************
     Spécificité PIV
***********************/
.piv {
  background: #095797;
  color: #fff;
 /* margin-bottom: 2em; */    /* inutile pour le distancer de votre site. */
}

.piv *, .piv--blanc * {
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  font-size: 16px;
}

.piv--blanc {
  background: #fff;
  color: #000;
  border-top: 8px solid #095797;
  margin-bottom: 2em;
}

.piv ul.listePiv, .piv--blanc ul.listePiv {
  list-style: none;
}

.piv a {
  color: #fff;
  text-decoration: none;
}

.piv a:hover {
  text-decoration: underline;
}

.piv--blanc a {
  color: #000;
  text-decoration: none;
}

.piv--blanc a:hover {
  text-decoration: underline;
}

.piv #lienOuvre, .piv--blanc #lienOuvre {
  z-index: 99;
  width: 40px;
  height: 40px;
  text-align: center;
  margin-top: 0.2rem;
}

@media screen and (min-width: 1000px) {
  .piv #lienOuvre, .piv--blanc #lienOuvre {
    margin-right: 0.7rem;
    margin-top: 0.4rem;
  }
}

.piv #lienOuvre img, .piv--blanc #lienOuvre img {
  width: 60%;
}

.piv .titreM, .piv--blanc .titreM {
  padding-bottom: 2%;
}

@media screen and (min-width: 400px) {
  .piv .titreM, .piv--blanc .titreM {
    width: calc(100% - 160px);
  }
}

@media screen and (min-width: 460px) {
  .piv .titreM, .piv--blanc .titreM {
    width: calc(100% - 200px);
  }
}

@media screen and (min-width: 568px) {
  .piv .titreM, .piv--blanc .titreM {
    width: 100%;
  }
}

.contenu-fixe {
  width: 100%;
  padding-left: 10px;
  /* Ajoutez vos breakpoint */
}

@media screen and (min-width: 1000px) {
  .contenu-fixe {
    width: 1000px;
    margin: auto;
    padding-left: 0;
  }
}

.zone1, .zone2, .zone3 {
  position: relative;
  width: 100%;
}

/* Zone du logo */
.zone1 {
  -ms-flex: 0 0 45%;
  -webkit-box-flex: 0;
          flex: 0 0 45%;
  max-width: 45%;
}

@media screen and (min-width: 568px) {
  .zone1 {
    -ms-flex: 0 0 40%;
    -webkit-box-flex: 0;
            flex: 0 0 40%;
    max-width: 40%;
  }
}

@media screen and (min-width: 768px) {
  .zone1 {
    -ms-flex: 0 0 25%;
    -webkit-box-flex: 0;
            flex: 0 0 25%;
    max-width: 25%;
  }
}

@media screen and (min-width: 1000px) {
  .zone1 {
    max-width: 25%;
    max-height: 72px;
  }
}

.zone1 img {
  width: 100%;   /*piv et ie */
}

/* Zone du titre */
.zone2 {
  -ms-flex: 0 0 15%;
  -webkit-box-flex: 0;
          flex: 0 0 15%;
  max-width: 15%;
}

@media screen and (min-width: 568px) {
  .zone2 {
    -ms-flex: 0 0 20%;
    -webkit-box-flex: 0;
            flex: 0 0 20%;
    max-width: 20%;
  }
}

@media screen and (min-width: 768px) {
  .zone2 {
    -ms-flex: 0 0 35%;
    -webkit-box-flex: 0;
            flex: 0 0 35%;
    max-width: 35%;
  }
}

@media screen and (min-width: 868px) {
  .zone2 {
    -ms-flex: 0 0 35%;
    -webkit-box-flex: 0;
            flex: 0 0 35%;
    max-width: 35%;
  }
}

@media screen and (min-width: 1000px) {
  .zone2 {
    -ms-flex: 0 0 45%;
    -webkit-box-flex: 0;
            flex: 0 0 45%;
    max-width: 45%;
  }
}

@media screen and (min-width: 1000px) {
  .zone2 .identite {
    width: 100%;
  }
}

/* Zone de navigation */
.zone3 {
  -ms-flex: 0 0 35%;
  -webkit-box-flex: 0;
          flex: 0 0 35%;
  max-width: 35%;
}

@media screen and (min-width: 1000px) {
  .zone3 {
    -ms-flex: 0 0 30%;
    -webkit-box-flex: 0;
            flex: 0 0 30%;
    max-width: 30%;
  }
}

.zone3 a {
  font-size: 0.8em;
}

/* Menu mobile */
@media screen and (max-width: 1000px) {
  .toggle_btn {
    height: 40px;
    width: 40px;
    position: relative;
    float: right;
    margin-right: 10px;
    margin-top: 5px;
    cursor: pointer;
    z-index: 99;
  }
  .toggle_btn span {
    height: 3px;
    background: #fff;
    width: 25px;
    position: absolute;
    top: 15px;
    left: 10px;
    border-radius: 100px;
  }
  .toggle_btn span:before, .toggle_btn span:after {
    content: '';
    height: 3px;
    background: #fff;
    width: 100%;
    position: absolute;
    left: 0;
    top: -8px;
    border-radius: 100px;
  }
  .toggle_btn span:after {
    top: 8px;
  }
  .toggle_btn_open span {
    height: 0;
  }
  .toggle_btn_open span:before, .toggle_btn_open span:after {
    content: '';
    height: 4px;
    background: #fff;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0px;
    border-radius: 100px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .toggle_btn_open span:after {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .toggle_btn_open span,
  .toggle_btn_open span:before,
  .toggle_btn_open span:after {
    background: #fff;
  }
  .piv--blanc .toggle_btn span,
  .piv--blanc .toggle_btn_open span,
  .piv--blanc .toggle_btn span:before,
  .piv--blanc .toggle_btn_open span:before,
  .piv--blanc .toggle_btn span:after,
  .piv--blanc .toggle_btn_open span:after {
    background: #000;
  }
  .menu_mobile {
    padding-bottom: 5px;
    padding-top: 72px;
    background-color: #08416f;
    border-left: 3px solid #095797;
    width: 700px;
    position: absolute;
    right: -500px;
    top: 0;
    z-index: 90;
  }
  .menu_mobile--site {
    /*Personnalisez le menu de votre site mobile */
    background-color: #08416f;
  }
  .menu_mobile--piv {
    /*Personnalisez le menu de votre site mobile */
    background-color: #08497f;
    border-top: 1px solid #fff;
  }
  .piv--blanc .menu_mobile {
    background: #ebebeb;
    border: none;
    padding-bottom: 0;
  }
  .piv--blanc .menu_mobile--site {
    /*Personnalisez le menu de votre site mobile */
    background: #ebebeb;
  }
  .piv--blanc .menu_mobile--site a {
    color: black;
  }
  .piv--blanc .menu_mobile--piv {
    /*Personnalisez le menu de votre site mobile */
    background-color: #08497f;
    border-top: 1px solid #fff;
  }
  .menu_mobile a {
    color: #fff;
    text-align: left;
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    text-decoration: none;
  }
  .nav {
    /*  display: none;  */                    /* Cacher menu mobile piv et activé menu thème fruity */
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
  }
  .nav_open {
    display: block;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
  }
}

.menu_mobile a {
  text-align: left;
  display: block;
  text-decoration: none;
}

.pivFooter {
  text-align: center;
  margin-top: 1em;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  font-size: 16px;
}

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

.pivFooter ul li {
  margin: 1% 0;
  font-size: 0.875em;
  font-size: 14px;
}

@media only screen and (min-width: 1000px) {
  .pivFooter ul li {
    display: inline-block;
    margin: 0;
    margin-right: 10px;
  }
}

.pivFooter a {
  color: gray;
  line-height: 25px;
}

.pivFooter small {
  font-size: 0.625em;
  font-size: 10px;
}

.pivFooter small a {
  color: black;
  text-decoration: none;
}
/* styles.css.map */


.footerSite {
  text-align: center;
  background: lightgray;
  padding: 10px;
}




.pivFooter {
    background: 
    #fff;
}

/* CAG */

/* Style de tableau */
/*Style Verticale à droite. Pour les questions en tableau*/
/*Redevient horizontale avec mobile ou petit écran */

.vert{
writing-mode: vertical-rl;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
text-align: left;
}

@media screen and (max-width: 768px) {
     .vert{
     writing-mode: horizontal-tb;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    text-align: left;
 }   
}

@media only screen and (max-width: 768px) {
 .vert{
     writing-mode: horizontal-tb;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    text-align: left;
 }   
}

/* Problème avec slider, espace en avant */
/*
.col-md-8 {
    flex: 0 0 auto;
     width: 90%;
}
@media (min-width: 768px) {
    .col-md-8 {
        flex: 0 0 auto;
        width: 90%;
    }
}
*/

/*  ***************** Changements ******************** */
/* Curseur */
/* Slider problème boite blanche
ligne 80 custom.css width: 100%;                        Original: width: 1000px;
ligne 81 custom.css max-width: 1200px;
*/

/* Grandeur de slider */
/*.slider-container {
margin-bottom: 0.5em;
margin-top: 0.5em;
  overflow: hidden;
  width: 60%;
}*/

/* privacy.twig */
/* Affichage ou non du message pour les réponses anonymes) */
/* ligne 25 dans privacy.twig {% if (aSurveyInfo.anonymized == "") %} <!-- Y or N   (Changement par CAG pour enlever le message) --> */






/* ***************** TESTS ********************* */
/*.slider-list.form-horizontal .control-label {
    display:none;
    text-align: right;
}*/
/*.row ls-slider-item-row {
    width: 100%;
}
*/

/* FIN CAG */