/*

-------------------------------------------------------------

CSS pour les graphiques

-------------------------------------------------------------

*/

#containerGraph {
	height: 280px;
	margin: 1px;
	width: 600px;
}

/*

-----------------------------------------------------------

CSS Element du formulaire

-----------------------------------------------------------

*/

.ui-slider {
	width: 90px;
	float: left;
	margin: 6px 12px 0px 12px;
}
.slideinput {
	float: left;
}

.x4w {

vertical-align: top;
text-align:right;
}

.age-input-text{
width:1.45em;
 text-align: right;
}

.montant-input-text{
  width: 6.75em;
  text-align: right;
  margin-right: 0px;
}

.pourcentage-input-text{
width:2.65em;
text-align: right;
}

div.encadrer{
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 2px 0 #DDDDDD;
    margin: 0.5em 0 0;
    padding: 0 0.5em 0 1em;
    position: relative;
}


#info-situation-actuelle div {margin : 5px 0px 5px 0px;}

.qtip-definition {
     text-decoration: underline;
     cursor:pointer;
}
.qtip-content {
    font-size:16px;
}

/*
---------------------------------------------------------

CSS Capsules

---------------------------------------------------------
*/
 
#contenu.popover {min-height: 0;margin: 0;padding: 0}
 div.capsule, div.capsule #contenu {
  font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    font-weight: normal;
  }
 div.capsule {
  line-height: 16px;
  }
    
.qtip-content{padding:10px}
.qtip-default{color:#3e3e3e}

/*
---------------------------------------------------------------------------

Overwrite des CSS

---------------------------------------------------------------------------
*/
.ui-widget-header {
border:none;
}
.ui-widget {
font-size: 0.813em;
}
.ui-dialog-titlebar-close:hover {
background-color:white;
border:1px solid white;
}

#table-scenario{
width:700px;
}
#td-situation-actuelle{
width:310px;
}
#td-scenario{
width:500px;
}
#td-scenario .ui-slider{
margin-left:0px;
width:75px;
}

.ui-widget-content{
border: 1px solid #cccbcb;
}
.ui-dialog-au-dessus,.ui-dialog-en-dessous,.ui-dialog-a-droite,.ui-dialog-a-gauche{
border: 1px solid #fff;
background-color:#fff;
}


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

#page.simulateur > fieldset > legend {
  position: relative;
  margin: 0;
  padding: 0;
  width: 937px;
  color: #3e3e3e;
  background: #d3d7d8;
  font-weight: bold;
  border-top: 1px solid #eaedee;
  border-left: 1px solid #eaedee;
  white-space: normal;
}


#contenu h2 {
    margin-top: 1em;
}
#contenu form input, #contenu .formulaire input, #contenu form select, #contenu .formulaire select {
    margin-right: 0;
}

.messageErreurGeneral .messageErreur {
	color: inherit;
	font-weight: inherit;
}
#contenu .messageErreurGeneral .messageErreur a, 
#contenu .messageErreurGeneral .messageErreur a:active, 
#contenu .messageErreurGeneral .messageErreur a:hover, 
#contenu .messageErreurGeneral .messageErreur a:focus {color: #595959;text-decoration: none;}
#contenu form .messageErreurGeneral .liste-erreurs label,#contenu .formulaire .messageErreurGeneral .liste-erreurs label {
	color: #CC0000;
	font-weight: normal;
	text-decoration: underline;
	cursor: pointer;
}
.messageAvertissement {
  padding-left: 24px;
  font-weight: bold;
  background: url(/ressources/images/a00-icone-avertissement.png) no-repeat left top;
}


table td.right{text-align:right}

.formulaire{width:100%}
.formulaire .libelle,
.formulaire .champ,
.formulaire .boite-explicative{vertical-align:top;}
#contenu .formulaire label{font-weight:normal}
.formulaire .libelle{text-align:right;width:243px}
.formulaire .champ{text-align: left;width: 273px;padding-left: 20px;}
.formulaire .boite-explicative{text-align: left;width: 400px;margin-left: 20px;}

#contenu .etape6.ajustements{float: left;width: 124px;min-height: 200px;}
#contenu .formulaire.etape6{float: right;margin: 0;width: 766px;min-height: 200px;}
#contenu .formulaire.etape6 .libelle{width:312px;vertical-align:middle}
#contenu .formulaire.etape6 .champ{width: 480px}

.simulateurRetraiteMessages{margin-top:4px}
.simulateurRetraiteMessages.messageErreur{margin-top:4px;background:none;padding-left:0}

input.ng-invalid,select.ng-invalid {border:2px solid #c00} /* Champ errone en couleur */


.qtip.qtip-revenu_desire {max-width: 550px}
.lien-close-infobulle {cursor: pointer}
#contenu ul.onglets li a span.titre {margin: 0; padding: 0; font-size: 1.167em; color: #3e3e3e;}
/*
---------------------------------------------------------------------------
 etape resultats
---------------------------------------------------------------------------
*/
.message-objectif-atteint{display:none;color:#007944}
.message-objectif-non-atteint{display:none;color:#cc0000}
.etape-resultats.epargne-personnelle #graph_container_provenance_revenus,
.etape-resultats.epargne-personnelle #tableau_provenance_revenus{display: none}
.etape-resultats.provenance-revenus #graph_container_epargne_personnelle,
.etape-resultats.provenance-revenus #tableau_epargne_personnelle{display: none}
#contenu h2.resultats-titre{margin:15px 0}
#contenu .h3.resultats-titre{margin-bottom:15px;color: #3e3e3e; font-size: 1.083em; font-weight: bold; }
#page.simulateur .boutons-action.switch-graphs{margin:0}
/*#contenu button.complementaire.btn-switch-graphs{min-height:20px}*/
.result-graphs{margin-bottom:2px}
.scenarios{border-spacing:0px;}
.scenarios .separateur{height:15px;padding:0}
.scenario-1 .ui-slider .ui-slider-range{background-color:#52A233}
.scenario-2 .ui-slider .ui-slider-range{background-color:#218290}
.tableau-complementaire{float:left;width:640px}
.tableau-complementaire-aide{float:right;width:240px}


/*
 * partager
 */
#modale-partager  ul.reseaux-sociaux {
    list-style: none outside none;
    float: left;
    margin: 0;
    padding: 0;
    margin: 0;
}
#modale-partager  ul.reseaux-sociaux li {
    display: block;
    float: left;
    margin: 0 0 0 10px;
    padding: 0;
    position: relative;
    background: none;
}
#modale-partager ul.reseaux-sociaux li a {
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    height: 24px;
    overflow: hidden;
    text-indent: -9999px;
    width: 24px;
}
#modale-partager ul.reseaux-sociaux li a.courriel {background-image: url(/ressources/images/e35-icone-courriel.png);}
#modale-partager ul.reseaux-sociaux li a.facebook {background-image: url(/ressources/images/a00-icone-facebook.png);}
#modale-partager ul.reseaux-sociaux li a.twitter {background-image: url(/ressources/images/a00-icone-twitter.png);}
#modale-partager ul.reseaux-sociaux li a.google-plus {background-image: url(/ressources/images/a00-icone-google-plus.png);}
#modale-partager ul.reseaux-sociaux li a.linkedin {background-image: url(/ressources/images/a00-icone-linkedin.png);}


.tableau {
    display: table;
}
.tableau-ligne {
    display: table-row;
}

.tableau-cellule {
    display: table-cell;
}

div.right {
    text-align: right;
}
:focus {
	outline: 2px solid #81c4e6;
	outline-radius:10px;
	-moz-outline-radius:10px;
	-webkit-outline-radius:10px;
}


#popover-popover-variations-depenses-retraite 
.tableau-donnees {
width:80%;
}



/*

==== MAJ 2020 ===

*/
.contenu-top-boite-message {

    position: relative;
    top: -1px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0px 1px 2px 0px #ddd;
    /*
	background: #fff url(/ressources/images/a00-selecteur-fond.gif) repeat-x left bottom;
    */
	z-index: 10;

margin-top: 30px;
    margin-bottom: 30px;
	}

.contenu-top-boite-message h2 {

padding-left: 30px !important;

}
.contenu-bottom-boite-message {

    position: relative;
    top: -1px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0px 1px 2px 0px #ddd;
    
	background: #fff url(/ressources/images/a00-selecteur-fond.gif) repeat-x left bottom;
  
	z-index: 10;
margin-top: 30px;
    margin-bottom: 30px;
	}

.contenu-bottom-boite-message h2 {

padding-left: 25px !important;

}

.contenu-boite-message {

 position: relative;
    top: -1px;
    z-index: 10;
  
 margin: 30px 10px 30px 10px;

}


li.crochet {

background: url('https://static.desjardins.com/fw/N3/1.20.0/lib/interne/fwd-bootstrap/3.3/img/svg-d2/ic-confirmation.svg') no-repeat left top !important;
height: 35px;
padding-left: 40px !important;
padding-top: 3px;
}

li.fleche-droite {

background: url(/ressources/images/ic-fleche-vert-droite.svg) no-repeat left center !important;
height: 35px;
padding-left: 30px !important;
    padding-top: 10px;
    
}

.tab-td-50 {

width: 50%;
padding: 0px 15px 0px 15px

}

#etape1_age_actuel,
#etape2_age_prevu,
#etape2_age_esperance,
#etape2_age_revenu_supp,
#etape3_age_psv,
#etape3_age_rrq,
#ins_etape6_age_prevu,
#ins_etape6_age_psv,
#ins_etape6_age_rrq {

width: 2.65em;

}

#popover-popover-variations-depenses-retraite div.capsule ul {
  
    padding-left: 0px !important;
}