/* --------------------------------------------------
  STRUCTURE
===================================================== */

#page.aiguilleur {
  font-size: 0.74em;
}

#page.aiguilleur #zone-centrale {
  background: #fff url(/ressources/images/a00-fond-contenu.gif) repeat-x left top;
  background: -moz-linear-gradient(top, #e5e7e8 0%, #fff 177px); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e7e8), color-stop(177px,#fff)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #e5e7e8 0%, #fff 177px); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #e5e7e8 0%, #fff 177px); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #e5e7e8 0%, #fff 177px); /* IE10+ */
  background: linear-gradient(to bottom, #e5e7e8 0%, #fff 177px); /* W3C */
}

#page.aiguilleur #hooks {
  padding-top: 21px;
}


/* --------------------------------------------------
  CONTENU
===================================================== */

#page.aiguilleur #contenu {
  border-top: none;
  min-height: 450px;
}

.messageErreur {
  padding-left: 24px;
  font-weight: bold;
  color: #c00;
  background: url(/ressources/images/e35-icone-erreur.png) no-repeat left top;
}

.popover.aide {
  background: none repeat scroll 0 0 #F2F2F2;
  border: 1px solid #CBCBCB;
  border-radius: 5px 5px 5px 5px;
  padding: 10px;
  width: auto;
}

.popover.aide > div > *:first-child {
  margin-top: 0;
}

#page.aiguilleur #contenu .capsule {
 padding: 15px 10px 15px 15px;
 overflow: hidden;
}

#page.aiguilleur #contenu form {
 margin: 0;
}

#page.aiguilleur #contenu .question {
 clear: both;
 margin-top: 15px !important;
}

#page.aiguilleur #contenu fieldset {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
}

#page.aiguilleur #contenu .question input[type=radio] {
  margin-bottom: 7px !important;
  margin-top: 7px !important;
  vertical-align: -0.15em;
}

#page.aiguilleur #contenu #etape-2 .question input[type=radio] {
  margin-top: 10px;
}

#page.aiguilleur #contenu .form-gauche {
  width: 47%;
  padding-right: 2%;
  float: left;
  text-align: right;
  margin: 0;
}

#page.aiguilleur #contenu #etape-1 .form-gauche legend {
  text-align: right;
}

#page.aiguilleur #contenu #etape-2 .form-gauche {
  text-align: left;
}

#page.aiguilleur #contenu .form-droite {
  width: 50%;
  float: left;
  margin: 0;
}

#page.aiguilleur #contenu .form-droite div, #page.aiguilleur #contenu .form-gauche div {
  display: table-row;
}

#page.aiguilleur #contenu #etape-2 .form-droite {
  width: 49%;
  padding-left: 2%;
}

#page.aiguilleur #contenu form legend {
  font-weight: bold;
  color: #595959;
  float: right;
}

#page.aiguilleur #contenu form legend span:not([lang]) {
  font-weight: normal;
  font-size: 0.83em;
}

#page.aiguilleur #contenu form label {
  font-weight: normal;
  cursor: pointer;
}

#page.aiguilleur #contenu div.boutons {
  text-align: center;
  margin-top: 10px;
}

#page.aiguilleur #contenu div.boutons input.secondaire {
  margin-right: 10px;
}

#page.aiguilleur #contenu #blocs {
  clear: both;
  overflow: hidden;
}

/* --------------------------------------------------
  Erreurs
===================================================== */
#page.aiguilleur #contenu #zone-messages .message-generique, #page.aiguilleur #contenu #zone-messages ul li { display: none; }
#page.aiguilleur #contenu input[type=radio].error { outline: 2px solid #c00; }
#page.aiguilleur #contenu input[type=text].error, #page.aiguilleur #contenu input[type=number].error { border: 2px solid #c00; }
#page.aiguilleur .icone-erreur {
  background: url("/ressources/images/e35-icone-erreur.png") no-repeat left top;
  padding-left: 20px;
}
#page.aiguilleur .message-erreur {
  color: #c00;
  font-weight: bold;
  margin: 5px 0 5px 49%;
  display: none;
}


/* --------------------------------------------------
  CAS PARTICULIER - OCCL
===================================================== */

#page.aiguilleur #contenu.occl #corps { border-bottom: 1px solid #cbcccc; }
#page.aiguilleur #contenu.occl img.fond-occl { margin-left: 420px; }
#page.aiguilleur #contenu.occl #presentation { border-bottom: 1px solid #cbcccc; }
#page.aiguilleur #contenu.occl #etape-1b #presentation { border-bottom: none; }
#page.aiguilleur #contenu.occl #presentation h2 { margin-top: 0; }
#page.aiguilleur #contenu.occl #presentation #sequence {
  padding: 20px 0;
  min-height: 100px;
  box-sizing : content-box;
}
#page.aiguilleur #contenu.occl #presentation #sequence .sequence-image {
  float: left;
  text-align: center;
  width: 128px;
}

#page.aiguilleur #contenu.occl #presentation #sequence .sequence-chevron {
  float: left;
  text-align: center;
  width: 50px;
}

#page.aiguilleur #contenu.occl form #etape-2 .form-gauche label#caisse {
  background: url(/ressources/images/a00-icone-caisse.jpg) no-repeat left center;
  padding: 8px 0 10px 30px;
  font-weight: bold;
}

#page.aiguilleur #contenu.occl form #etape-2 .form-droite label#poste {
  background: url(/ressources/images/a00-icone-poste.jpg) no-repeat left center;
  padding: 8px 0 10px 30px;
  font-weight: bold;
}

#page.aiguilleur #contenu.occl form #etape-2 .form-gauche p#titre-alternatif {
  background: url(/ressources/images/a00-icone-caisse.jpg) no-repeat left center;
  padding: 8px 0 10px 30px;
  font-weight: bold;
}

#page.aiguilleur #contenu.occl form #etape-2 .form-gauche p#conseiller, #page.aiguilleur #contenu.occl form #etape-2 .form-droite p#deplacement {
  font-weight: bold;
}

#page.aiguilleur #contenu.occl .caisse_groupe {
	margin-left: 5%;
	float: left;
	margin-bottom: 30px;
width: 95%;
}

#page.aiguilleur #contenu.occl .adresse_caisse_groupe {
	flex-basis: 50%;
	margin: 15px auto 5px 0;
}

#page.aiguilleur #contenu.occl .caisse_groupe input[type=submit] {
	float: right;
	margin-top: 15px;
	margin-right: 20%;
}

#page.aiguilleur #contenu.occl #btn_continuer_e1b {
	margin-top: 10%;
	margin-left: 25%;
}

@media screen and (max-width: 720px){
	#page.aiguilleur #contenu.occl #btn_continuer_e1b {
	 margin-left: 0;
	}
}

#page.aiguilleur #contenu.occl div.boutons {
	  margin-bottom: 20px;
}


/* --------------------------------------------------
  CAS PARTICULIER - Calculateur placement valeur echeance
===================================================== */
#page.mobile.placemt #centre {
     padding: 30px 10px !important;
}

#page.mobile #contenu.placemt {
	padding: 10px !important;
}

#page.aiguilleur.placemt #zone-centrale {
	background: #f2f2f2;
}

#page.aiguilleur.placemt #centre {
	padding-top: 30px;
}

#page.aiguilleur #contenu.placemt {
	background: #fff;
    max-width: 580px;
    overflow: hidden;
    margin: 0 auto;
    float: none;
	padding: 25px;
	border-radius: 8px;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
}

#page.aiguilleur #contenu.placemt h1 {
    margin-top: 0 !important;
}

#page.aiguilleur #contenu.placemt .question {
	  margin-top: 20px !important;
	  overflow: hidden;
}

#page.aiguilleur #contenu.placemt form label {
      display: block;
	  margin-bottom: 10px;
}
#page.aiguilleur #contenu.placemt button.principal {
	  margin-top: 20px;
}
#page.aiguilleur #contenu.placemt p.result {
	  font-size: 20px;
}

#page.aiguilleur #contenu.placemt .erreurs {
	  border: 1px solid #cc0000 !important;
}

#page.aiguilleur #contenu.placemt ul.messages {
    list-style: none;
}

#page.aiguilleur #contenu.placemt ul.messages li, #page.aiguilleur #contenu.placemt ul.messages li a, #page.aiguilleur #contenu.placemt p.messages {
    color: #cc0000;
    position: relative;
	background: none !important;
}

#page.aiguilleur #contenu.placemt ul.messages li:before {
	 content: "\2022";
	 font-size: 20px;
	 position: absolute;
	 left: -2px;
	 top: -2px;
}

#page.aiguilleur #contenu.placemt input[type=text] {
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
	width: 240px;
	float: left;
    border: 0;
    height: 20px;
	margin-right: 0 !important;
	padding-left: 5px;
}

#page.aiguilleur #contenu.placemt input.mois[type=text] {
	width: 227px;
}

#page.aiguilleur #contenu.placemt input.month[type=text] {
  width: 210px;
}

#page.aiguilleur #contenu.placemt select {
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
	width: 280px;
    border: 1px solid #cbcbcb;
    height: 24px;
}

#page.aiguilleur #contenu.placemt a.lien-taux {
    padding: 0 0 10px 20px;
}

#page.aiguilleur #contenu.placemt div.element-border {
    border: 1px solid #cbcbcb;
    overflow: hidden;
    width: 280px;
    box-sizing: border-box;
	padding-left: 4px;
	display: inline-block;
}

#page.aiguilleur #contenu.placemt div.signe-border {
    padding: 4px;
    border-left: 1px solid #cbcbcb;
    float: left;
	border-top: 0 !important;
    border-bottom: 0 !important;
    border-right: 0 !important;
}

#page.aiguilleur #contenu.placemt div.signe-en-border {
    float: left;
    width: 24px;
    padding: 5px;
    border-right: 1px solid #cbcbcb;
	border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
}

#page.aiguilleur #contenu.placemt .result {
    background: #edf4e6;
    border: 2px solid #007944;
    border-radius: 4px;
    max-width: 380px;
    margin-bottom: 30px;
    padding: 20px;
}

#page.aiguilleur #contenu.placemt p.montant-res {
    padding: 10px;
    display: inline-block;
    margin-bottom: 0;
    font-size: 22px;
}

#page.aiguilleur #contenu.placemt p.desc {
    font-weight: bold;
    margin: 0;
}

/* --------------------------------------------------
  CAS PARTICULIER - Calculateur versements pret à terme
===================================================== */

#page.mobile.versmt-pt #centre {
     padding: 30px 10px !important;
}

#page.mobile #contenu.versmt-pt {
	padding: 10px !important;
}

#page.aiguilleur.versmt-pt #zone-centrale {
	background: #f2f2f2;
}

#page.aiguilleur.versmt-pt #centre {
	padding-top: 30px;
}

#page.aiguilleur #contenu.versmt-pt {
	background: #fff;
    max-width: 580px;
    overflow: hidden;
    margin: 0 auto;
    float: none;
	padding: 25px;
	border-radius: 8px;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
}

#page.aiguilleur #contenu.versmt-pt h1 {
    margin-top: 0 !important;
}

#page.aiguilleur #contenu.versmt-pt form label {
      display: block;
	  margin-bottom: 10px;
}

#page.aiguilleur #contenu.versmt-pt .boutons-action {
	  margin-top: 20px;
}

#page.aiguilleur #contenu.versmt-pt p.result {
	  font-size: 20px;
}

#page.aiguilleur #contenu.versmt-pt .erreurs {
	  border: 1px solid #D56A64 !important;
}

#page.aiguilleur #contenu.versmt-pt ul.messages {
    list-style: none;
	margin: 0 !important;
}

#page.aiguilleur #contenu.versmt-pt ul.messages li, #page.aiguilleur #contenu.versmt-pt ul.messages li a, #page.aiguilleur #contenu.versmt-pt p.messages {
    color: #960E02;
    position: relative;
	background: none !important;
}

#page.aiguilleur #contenu.versmt-pt ul.messages li:before {
	 content: "\2022";
	 font-size: 20px;
	 position: absolute;
	 left: -2px;
	 top: -2px;
}

#page.aiguilleur #contenu.versmt-pt input[type=text] {
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
	width: 240px;
	float: left;
    border: 0;
    height: 20px;
	margin-right: 0 !important;
	padding-left: 5px;
}

#page.aiguilleur #contenu.versmt-pt select {
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
	width: 280px;
    border: 1px solid #cbcbcb;
    height: 24px;
}

#page.aiguilleur #contenu.versmt-pt div.element-border {
    border: 1px solid #cbcbcb;
    overflow: hidden;
    width: 280px;
    box-sizing: border-box;
	padding-left: 4px;
}

#page.aiguilleur #contenu.versmt-pt div.signe-border {
    padding: 4px;
    border-left: 1px solid #cbcbcb;
    float: left;
	border-top: 0 !important;
    border-bottom: 0 !important;
    border-right: 0 !important;
}

#page.aiguilleur #contenu.versmt-pt div.signe-en-border {
    float: left;
    width: 24px;
    padding: 5px;
    border-right: 1px solid #cbcbcb;
	border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
}

#page.aiguilleur #contenu.versmt-pt .result {
    background: #edf4e6;
    border: 2px solid #007944;
    border-radius: 4px;
    max-width: 380px;
    margin-bottom: 30px;
    padding: 20px;
}

#page.aiguilleur #contenu.versmt-pt p.montant-res {
    padding: 10px;
    display: inline-block;
    margin-bottom: 0;
    font-size: 22px;
}

#page.aiguilleur #contenu.versmt-pt p.desc {
    font-weight: bold;
    margin: 0;
}


/* --------------------------------------------------
  CAS PARTICULIER - DEMANDE DE CARTE VISA
===================================================== */

#page.aiguilleur #contenu.demande-carte div.capsule.intro h2 {
	min-height: 40px;
	padding: 10px 0 0 60px;
        margin: 0;
}

#page.aiguilleur #contenu #instructions .form-gauche {
  text-align: left;
}

#page.aiguilleur #contenu.demande-carte h2#remplir { background: url(/ressources/images/g30-icone-remplir-demande.png) no-repeat left center; height:3.3em; }

#page.aiguilleur #contenu.demande-carte h2#suivi { background: url(/ressources/images/g30-icone-suivi-traitement.png) no-repeat left center; height:3.3em; }


/* --------------------------------------------------
  CAS PARTICULIER - OUVERTURE DE COMPTE ENTREPRISE
===================================================== */

#page.aiguilleur.oce #zone-centrale {
  background: none;
}

#page.aiguilleur #contenu.oce .question {
  margin: 1.5rem 0 !important;
}
#page.aiguilleur #contenu.oce .question.collapse {
  display: none;
}

#page.aiguilleur #contenu.oce form legend {
  color: #383838;
  font-weight: normal;
  float: none;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

#page.aiguilleur #contenu.oce form .radio-groupe {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: 2px;  /* Pour effet hover sur les tuiles */
}
#page.aiguilleur #contenu.oce form .radio-groupe.radio-groupe-vertical {
  flex-direction: column;
}

#page.aiguilleur #contenu.oce form .radio-groupe.cd-tuiles {
  margin-bottom: 0;
  margin-top: -10px;
}
#page.aiguilleur #contenu.oce form .radio-groupe.cd-tuiles .radio-item {
  margin: 10px 0;
  padding: 1rem 20px;
  max-width: 448px;
}
#page.aiguilleur #contenu.oce form .radio-groupe.cd-tuiles .radio-item:hover {
  border: 1px solid #767676;
  -webkit-box-shadow: 0 0 0 1px #767676, 0 2px 8px 0 rgb(0 0 0 / 40%);
  box-shadow: 0 0 0 1px #767676, 0 2px 8px 0 rgb(0 0 0 / 40%);
}
#page.aiguilleur #contenu.oce form .radio-groupe.cd-tuiles .radio-item.select {
  border: 1px solid #007944;
  -webkit-box-shadow: 0 0 0 1px #007944, 0 2px 8px 0 rgb(0 0 0 / 40%);
  box-shadow: 0 0 0 1px #007944, 0 2px 8px 0 rgb(0 0 0 / 40%);
}
#page.aiguilleur #contenu.oce form .radio-groupe.cd-tuiles .radio-item:focus-within {
  border: 1px solid #0061cb;
  -webkit-box-shadow: 0 0 0 1px #0061cb, 0 0.125rem 0.5rem 0 rgb(0 0 0 / 40%);
  box-shadow: 0 0 0 1px #0061cb, 0 0.125rem 0.5rem 0 rgb(0 0 0 / 40%);
  outline: none;
}
#page.aiguilleur #contenu.oce form .radio-groupe.cd-tuiles .radio-item:hover .cd-n3-radio-indicator {
  border: 2px solid #767676;
}
#page.aiguilleur #contenu.oce form .radio-item .cd-n3-radio input[type=radio]:checked ~ .cd-n3-radio-indicator,
#page.aiguilleur #contenu.oce form .radio-groupe.cd-tuiles .radio-item input[type=radio]:checked ~ .cd-n3-radio-indicator {
  border: 2px solid #007944;
}
#page.aiguilleur #contenu.oce form .radio-item .cd-n3-radio input[type=radio]:focus ~ .cd-n3-radio-indicator,
#page.aiguilleur #contenu.oce form .radio-groupe.cd-tuiles .radio-item input[type=radio]:focus ~ .cd-n3-radio-indicator {
  border: 2px solid #146fd2;
}

#page.aiguilleur #contenu.oce form .radio-groupe.cd-tuiles .radio-item .cd-n3-radio-desc {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

#page.aiguilleur #contenu.oce form .radio-item label {
  -ms-flex-align: start;
  align-items: flex-start;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 0;
  padding: 0.5rem 1rem;
  padding-left: 1.75rem;
}

#page.aiguilleur #contenu.oce .cd-bouton-action {
  margin: 1rem 0.5rem;
}
  @media (min-width: 480px) {
    #page.aiguilleur #contenu.oce .cd-bouton-action {
      margin: 0.5rem 0.5rem;
    }
  }

#page.aiguilleur.oce #zone-centrale .aide.cd-aide {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  background-image: url(/ressources/images/ic-n1-aide.svg);
  background-position: center center;
  vertical-align: middle;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

#page.aiguilleur #contenu.oce #messages-erreur {
  margin-bottom: 1.5rem;
}
#page.aiguilleur #contenu.oce #messages-erreur a {
  color: #c00;
}
#page.aiguilleur #contenu.oce #messages-erreur ul.cd-liste > li:before {
	background-color: #c00;
}

#page.aiguilleur #contenu.oce .question .msg-erreur {
  display: none;
}
#page.aiguilleur #contenu.oce .question.en-erreur .msg-erreur {
  display: block;
  margin-top: 0.25rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  font-weight: normal;
  color: #c00;
}

#page.aiguilleur #contenu.oce form .question.en-erreur .radio-groupe.cd-tuiles .radio-item {
  border: 1px solid #c00;
  -webkit-box-shadow: 0 0 0 1px #c00, 0 2px 8px 0 rgb(0 0 0 / 40%);
  box-shadow: 0 0 0 1px #c00, 0 2px 8px 0 rgb(0 0 0 / 40%);
}
#page.aiguilleur #contenu.oce form .question.en-erreur .radio-groupe.cd-tuiles .radio-item .cd-n3-radio-indicator,
#page.aiguilleur #contenu.oce form .question.en-erreur .radio-item .cd-n3-radio .cd-n3-radio-indicator {
  border: 2px solid #c00;
}