/* MISC */
abbr[title] {border:none;}

.js-modal {
	padding: 0;
	border-width: 0;
}

#bt-calculer {margin-right:5px;}

label {margin-bottom: 1rem;
	display:block}

	.row.simul {
		border-radius: 8px 8px 10px 10px;
		overflow: hidden;
		box-shadow: 0 1px 2px rgba(0,0,0,.1);
		padding: 20px 20px;
		background: white;
		margin-top:-30px;
		margin-bottom:30px;
	}

	.page-header .page-intro {
		line-height: 1.2em;	
		font-size: 1.1em;
	}

	.page-intro {
		color: #2f2f2f;
		font-family: "GillSansW01Book", Arial, sans-serif;
		font-size: 1.176em;
		line-height: 1em;
		max-width: 850px;
		margin: 0 auto;
		text-align: center;
	}

	.slide {top:15px !important;}
	.simul-result {
		margin-top:30px;
	}

.tableau h3 {color:#fff;
padding-top:10px;
padding-bottom:0px;
box-sizing: border-box;
font-weight:normal;
font-size:1.0em;
display:inline-block;
text-align:left;
padding-left:30px;
width:100%;}

.simul-form {
	position:relative;
	margin-bottom:0;
	padding:1em 0 0;
	background-color: white;
	border-bottom:none;
	position:relative;
	/*padding:30px;*/
	/*font-family: "AktivGroteskW01-Medium",Arial,sans-serif;*/
}
.row.notes {margin-top:60px;}

.simul-form h3 {
	color: #466581;
	font-family: "AktivGroteskW01-Regular",Arial,sans-serif;
	font-size: 1.412em;
	font-weight: 400;
	line-height: 1.1;
	margin: 0 0 1.25em 0;
}

#cols {margin-top:30px}

.col p {margin-top:0}
.simul-form div:not("*[range]") {
	overflow: hidden;
	padding: 1.5em 0;
	position: relative;
}

.versements p {margin:30px 0 10px 0}

.col.conjoint {background:#f7f7f7;border-radius:4px; transition:all 0.5s linear;  padding:10px}
.btn {cursor:pointer}

.versement input{
	border: 1px solid #24378D;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0,0,0,.13) inset;
	color: #007c82;
	font-size: 1em;
	letter-spacing: 1px;
	padding: .75em;
	width: 100%;
	box-sizing: border-box;
}

.versement .input-wrapper {width:100%;
	position:relative;}

.versement span {font-size:0.80em; width:100%;display:block;text-align:center; padding-bottom:5px;}

.versement {position:relative;}
.versement .input-wrapper:after {content:"\20AC";
font-size: 1.5em;
line-height:1.3;
color:#007c82;
text-align:center;
display:block;
height:30px;
width:30px;
top:50%;
transform:translateY(-50%);
position:absolute;
right:5px;}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none; 
	margin: 0; 
}

.simul-form input:focus {
	border-color: #58b08e;
}

.simul-form input:active, .simul-form input:focus {
	color: #2b3446;
}


#mentionRMN {
	color: #a3a3a3;
	display: block;
	font-size: .75em;
	margin-bottom: -1.2em;
	right: 0;
	width: 100%;
}
#mentionRMN.highlight {
	background-color: #f6ef6d;
}  

.simul-action {
	overflow: hidden;
	margin-bottom: 0;
	padding-top: 2em;
}

.simul #mentions-legales {
	margin-top: 15px;
	font-size: .624em;
	padding:20px;
}

#SIMsimuler {
	border: 1px solid #4A5A8E;
	border-radius: 3px;
	background: #6579bf; /* Old browsers */
	background: -webkit-linear-gradient(#6579bf 0%, #596ba8 100%);
	background: -o-linear-gradient(#6579bf 0%, #596ba8 100%);
	background: linear-gradient(#6579bf 0%, #596ba8 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6579bf', endColorstr='#596ba8',GradientType=0 );
	box-shadow: 0 1px 0 #445483;
	color:white;
	font-family: "AktivGroteskW01-Medium",Arial,sans-serif;
	font-size: .706em;
	letter-spacing: 1px;
	padding: .5em 1.5em;
	text-transform: uppercase;
	float: right;
}

#SIMsimuler:hover, #SIMsimuler:focus {
	background: #596ba8; /* Old browsers */
	background: -webkit-linear-gradient(#596ba8 0%, #6579bf 100%);
	background: -o-linear-gradient(#596ba8 0%, #6579bf 100%);
	background: linear-gradient(#596ba8 0%, #6579bf 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#596ba8', endColorstr='#6579bf',GradientType=0 );
}

#SIMsimuler:active {
	background: #445483;
	box-shadow: none;
}

#SIMclear {
	border:1px solid #E3E2DE;
	border-radius: 3px;
	background: #F1F1EC; /* Old browsers */
	background: -webkit-linear-gradient(#F1F1EC 0%, #EBEAE6 100%);
	background: -o-linear-gradient(#F1F1EC 0%, #EBEAE6 100%);
	background: linear-gradient(#F1F1EC 0%, #EBEAE6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F1EC', endColorstr='#EBEAE6',GradientType=0 );
	box-shadow: 0 1px 0 #EBEBE9;
	color:#2B3447;
	font-family: "AktivGroteskW01-Medium",Arial,sans-serif;
	font-size: .706em;
	letter-spacing: 1px;
	padding: .5em 1.5em;
	text-transform: uppercase;
	float: left;
}

#SIMclear:hover, #SIMclear:focus {
	background: #EBEAE6; /* Old browsers */
	background: -webkit-linear-gradient(#EBEAE6 0%, #F1F1EC 100%);
	background: -o-linear-gradient(#EBEAE6 0%, #F1F1EC 100%);
	background: linear-gradient(#EBEAE6 0%, #F1F1EC 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EBEAE6', endColorstr='#F1F1EC',GradientType=0 );
}

#SIMclear:active {
	background: #D8D7D4;
	box-shadow: none;
}

button i {
	display: none;
}

.tableau h3 {
	color: #fff;
	padding-top: 10px;
	padding-bottom: 0px;
	box-sizing: border-box;
	font-weight: normal;
	font-size: 1.0em;
	display: inline-block;
	text-align: left;
	padding: 15px 0 15px 15px;
	width: 100%;
	margin:0;
	opacity:0.8;
}


#boutons {
	width: 50%;
	justify-content: center;
	margin: 2rem auto;
}

#boutons > div {margin:0.5rem} 

.no-js .simul-result, .simul-result.show {
	display: block;
}

.reduction {font-size:1.5em}

.result-montant {
	font-size: 1em;
	letter-spacing: 1px;
	padding: 1.5em 0 1.5em 0;
	text-align: center;
	width: 80%;
	margin:0 auto;
	font-family: "AktivGroteskW01Medium",Arial,sans-serif;
}
.result-montant i, .result-montant span:first-of-type {
	text-decoration:none;
	font-weight:bold;}
	.result-montant .total {
		display: block;
		font-family: "AktivGroteskW01Medium",Arial,sans-serif;
		font-size: 3em;
		line-height: 1.5em;
	}

	.c {text-align:center;}
	.result-item {
		overflow: hidden;
		padding: 0 0 .75em 0;
		text-align: center;
		width: 100%;
	}

	.simul-notes {
		font-size:.824em;
		padding-left: 2.143em;
	}

	.content-meta.mentions {font-size:.824em; margin:40px 0;
	}
	.content-meta.mentions p {line-height: 1.2}

#sliderPEE, #sliderPERCO {
	width:69%;
	display: inline-block;
	vertical-align:middle;
	box-sizing: border-box;
	background: #e6e6e6;
	box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
	-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
	border-radius: 10px;
}
.output {
	box-sizing: border-box;
	display:inline-block;
	/*padding:15px 5px;*/
	background-color:#60B391;
	color:white;
	font-size:1.5em;
	border-radius:8px;
	vertical-align:middle;
	text-align:center;
	margin:0 auto;
	border:none;
	width:55px;
}
.ouput:focus,.ouput:active {outline: 4px dashed blue; color:white}
#tauxPEE, #tauxPERCO {
	box-sizing: border-box;
	display:inline-block;
	background-color:#60B391;
	padding:15px 5px;
	border-radius:8px;
	margin-left:45px;
	width:calc(25% - 20px);
	vertical-align:middle;
	text-align:center;
	position:relative;
	z-index:3000;
}
#details {display:inline-block;}
.col {
	box-sizing:border-box;
	width: 49%;
	display: inline-block;
	vertical-align: top;
	padding:10px;
	position:relative;
}

.modaal-container h4 {margin-top:0}
.col h3 {margin:0}

.col.perco {padding-left:30px; width:49%; opacity:1}



#tauxPEE span,#tauxPERCO span {display:inline-block;
	color:white;
	font-size:1.5em;
	font-family: "AktivGroteskW01-Regular",Arial,sans-serif;
	vertical-align:middle;}

	#tauxPEE:after, #tauxPERCO:after {content:"";
	display:block;
	height:30px;
	width:30px;
	border-radius:3px;
	background:#60B391;
	top:50%;
	transform:translateY(-50%) rotate(45deg);
	position:absolute;
	left:-5px;
	z-index:-1;}




.col.perco.only {padding-left:0;}


.result-col.tableau {
	border: 1px solid transparent;
	width: 100%;
	display: block;
	background-color: #172258;
	color: white;
	/*height:190px;*/
	font-family: "AktivGroteskW01-Regular",Arial,sans-serif;
	-webkit-box-shadow: inset 0px 10px 19px -6px rgba(45,76,104,1);
	-moz-box-shadow: inset 0px 10px 19px -6px rgba(45,76,104,1);
	box-shadow: inset 0px 10px 19px -6px rgba(45,76,104,1);
}

#montant_couple {background: #2e3b4e;
	padding:20px;}

.result-col{
	box-sizing:border-box;
	background:#fff;
	display: block;
	width:100%;
	color:#466581;
	position:relative;
	text-align:center;
}
	
.result-col .col {transition:all 2s linear}

.tableau .col {padding:0px 0 40px 0}
.chiffre-cle { width:100%; display:block;}
.chiffre-cle .vvd-possible {color:yellow;}
.chiffre-cle  .vvd-possible {font-size:2.45em;}
.chiffre-cle + .chiffre-cle {/*border-top: 1px solid #7486bf;*/
	padding: 10px 0;}


.total {font-size:2em; color:yellow; display:inline-block;vertical-align:middle; margin-left:5px;}

.details {margin:5px 0px 5px 0px;font-size:0.6em; line-height:1; display:block;}

.chiffre-cle-label {
	font-size: 1.25em !important;
	font-weight: normal;
	font-family: 'AsktivGroteskMedium', sans-serif;
	margin: 10px 0;
}
.chiffre-cle-value {
	font-size: 1.5em !important;
	margin-top:10px;
}

.double .chiffre-cle-label {
	font-size: 1.0em !important;
	line-height:1;
}

.tooltip {font-size:14px;
	border:none;
	background:none;
}
.tooltip:hover {cursor:pointer;}
.tool-wrapper {position:relative;}
#switch .tool-wrapper {width:30px; display:inline-block;}
#switch .tool-wrapper .tip {background:#f3f3f3}
#switch .tool-wrapper .tooltip_templates {width:270px;}
.tooltip_templates {display:none;
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	background:white;
	z-index:30000;
	box-shadow: 0 0 10px 6px rgba(0, 0, 0, .1);
	color:#414141;
	line-height: 18px;
	padding: 15px;
	width:170px;
	text-align:left;
	font-size:0.85em;
	top:30px;
}

.tooltip_templates p:first-of-type {
	margin-bottom:1.25rem
}

.tooltip_templates p {
	font-size:0.85em;
	line-height: 18px;
	margin-bottom:0
}


.tooltip_templates:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #fff transparent;
	position: absolute;
	transform: translateX(-50%);
	left: 50%;
	top: -6px;
}
.tip {
	padding: 3px 9px;
	/* width: 8px; */
	/* height: 8px; */
	font-size: 12px;
	background: white;
	border-radius: 20px;
	color: #000;
	/* font-weight: bold; */
	margin-right: 5px;
	position: relative;
	top: -1.3px;
}


.ui-slider-range {background: #60b391}

.ui-slider-handle {
	background: #ffffff;
	height: 6.125px;
	width: 6.125px;
	border: 9.625px solid #60b391;
	border-radius: 12.25px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	text-decoration: none;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	border: 16px solid #60b391;
	font-weight: normal;
	color: #555555;
	height: 10px;
	border-radius: 50%;
	width: 10px;
	top: -15px;
	background:white;
	-webkit-box-shadow: 0 0 8px rgba(0,0,0,.3);
	box-shadow: 0 0 8px rgba(0,0,0,.3);
}

.ui-state-default:focus {outline:0}
.ui-state-default:hover{cursor:pointer}

.total span {position:relative;}

.plus {position:absolute;
	display:block;
	width:60px;
	height:60px;
	border-radius:60px;
	transform:translate(-50%, -50%);
	top:36%;
	left:50%;
	background:white;
}
.plus span {position:absolute;
	display:block;
	transform:translate(-50%, -50%);
	top:50%;
	left:50%;
	line-height:1.875em;
	font-size:3em;
	color:black;
	width:1.875em;
	height:1.875em;}


.simul .switch {
	position: relative;
	display: inline-block;
	width: 260px;
	height: 34px;
	text-align:right;
}

.simul .switch input { 
	opacity: 0;
	width:80px;
	height:30px;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	width:60px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
	background-color: #2196F3;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

#switch {display:block;
	font-family: 'AsktivGroteskMedium', sans-serif;
	color: #414141;
}
.d {text-align:right;}
.button-cover, .knobs, .layer
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.button
{
	position: relative;
	width: 4.6em;
	height: 36px;
	overflow: hidden;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	display:inline-block;
	vertical-align:middle;
	margin-left:10px;

}

.modaal-content-container .ajout.vv {
	background: #466581;
	color: #fff;
	text-transform: uppercase;
	font-size: 1em;
	border-radius:5px;
	width:200px;
	margin:0 auto;
	display: block;
	text-align:center;
	padding:10px;
	margin-top:20px;
}


.modaal-content-container .ajout.vv:hover {cursor:pointer;
	background: #526a86;}

.ajout.del {margin:0 auto; display:block;
	margin-top: 15px;
	border-radius: 5px;
	text-align: center;
	cursor:pointer;
	width: 200px;
	text-decoration:underline;
}

#label {position:relative;
	display:inline-block;
	vertical-align:middle;
}

.button.r, .button.r .layer
{
	border-radius: 100px;
}

.checkbox
{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 3;
}

.knobs
{
	z-index: 2;
}

.layer
{
	width: 100%;
	background-color: #ebf7fc;
	transition: 0.3s ease all;
	z-index: 1;
}

/* Button 1 */
#button-1 .knobs:before
{
	content: 'Non';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 2em;
	/*height: 10px;*/
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	background-color: #C00000;
	border-radius: 50%;
	transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
	transform: translateY(-50%);
	top: 50%;
}

#button-1 .checkbox:checked + .knobs:before
{
	content: 'Oui';
	left: 4.3em;
	background-color: #172258;
}

#button-1 .checkbox:checked ~ .layer
{
	background-color: #fcebeb;
}

#button-1 .knobs, #button-1 .knobs:before, #button-1 .layer
{
	transition: 0.3s ease all;
}

.primary {cursor:pointer}

.mensuellement {display:none;}

.simul .inactive {opacity:0.3;}
.active {opacity:1}

.message-erreur, .message-erreur1 {color:red; font-weight:bold; padding:5px 0; text-align:center; margin-bottom:.5em
/*position:absolute;*/}

/*** VVD ***/
.versements div {display:inline-block;width:32%;vertical-align:top}

.versement.fw {width:100%}
.versement.fw div {width:50%; margin:0 auto; display:block}

/*** fin VVD ***/

.inactive #control-panel-1, .inactive a {
	pointer-events: none;
}

.chiffre-cle-label {text-align:right}

#note {
	position:relative;
	padding-left:100px;
	color:#466581;
	z-index:2;
	overflow:hidden;
}

#note  > div {background:#f3f3f3;
	overflow:hidden;
	padding:20px;
}

#note:before {
	content: "";
	display: block;
	width: 100px;
	height: 100px;
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
	left:0;
	background: url(/fr/epargnants/outils/simulateur-vvd/images/loupe.svg) center bottom no-repeat #172258;
}

#note h3 {margin-top:0; font-size:1em; padding:0; text-align:left}

.col a {margin-top:25px; display:block}
/*** accordion ***/

.js .simul-form  .accordion {margin-top:1em;border-bottom:none;}
.js .simul-form .conjoint  .accordion {border-bottom:none;}
.js .simul-form .panel-title a {
	padding:10px 10px 10px 0;
	border-top:0px;
	font-weight:normal;
}

.js .simul-form  .panel-content {
	padding-bottom: 1em;
}


.js .simul-form .panel-title {font-size:1em}


/*** fin accordion ***/


.blocmodal {padding:30px;}

.blocmodal .croce {
	display: block;
	position: absolute;
	right: 5px;
	top: 5px;
	height: 30px;
	text-align: center;
	width: 30px;
	cursor: pointer;
	line-height: 2;
	cursor: pointer;
}
.blocmodal {
	box-shadow: 0 5px 10px #000;
	border:none;
}

.blocfondmodal {opacity:0.25}

.limit-perco {padding:10px; background:#C00000;color:white; position:relative;margin-top:10px;}

.limit-perco:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #C00000 transparent;
	position: absolute;
	transform: translateX(-50%);
	left: 50%;
	top: -6px;
}

/* < 1034px */
@media only screen and (max-width: 60.824em) {

#egal {
	position: absolute;
	transform: translateX(-50%);
	background: #466581;
	height: 100px;
	width: 100px;
	color: white;
	top:-50px;
	text-align: center;
	border-radius: 50%;
	left: 50%;
}


.col.perco {width:49%}

.chiffre-cle-value {
	font-size: 22px !important;
}

.simul {margin:10px auto;}
.simul-form {padding:1em;}

.ui-slider-horizontal .ui-slider-handle {
	border:10px solid #60b391;
	top:-10px;
}

	#dos_go img {display: none;}
	#tauxPEE, #tauxPERCO { display:block;}
	#slider, #slider2  {width:100%;}
	#tauxPEE, #tauxPERCO {width:auto;margin:2em auto}

	#tauxPEE:after, #tauxPERCO:after {content:"";
	left:50%;
	top:-5px;
	transform:translateX(-50%) rotate(45deg);
}

.result-col, .result-col.tableau {display:block;width:100%; min-height:auto;}

.result-montant {
	padding: 5em 0 1.5em 0;position:relative; transform:none;top:auto;
	left:auto; margin:auto;
}

.versement:after {
	font-size: 1.5em;
	line-height: 1.5;
}
} 


@media only screen and (max-width: 49.375em) {

	.col, #boutons {
		width: 100%;
	}


	#note > div {
		background: #fff;
		overflow: hidden;
		padding: 20px;
	}

	#note {
		margin:1rem
	}

	.mentions p {
		padding:1rem
	}	

	#ei_tpl_contenu .row {
		width: 100%;
	}
	#ei_tpl_contenu .col_10 {width:100%;}
	.row.simul {padding:5px;}
	#bt-calculer {margin:0 auto;}
}

@media only screen and (max-width: 31.250em) {
	#label {width:40%}
	.button.r {margin:0 auto;}


	.result-montant {padding-top:2em;}
	.versements div {width:100%; margin-top:5px;}
	.chiffre-cle-label {text-align:center !important;}
	#ei_tpl_contenu .plus {display:none !important;}
	.chiffre-cle .vvd-possible {font-size:2em;}
	.modaal-content-container {
		padding: 20px !important;
	}
}   
@media only screen and (max-width: 25.438em) {
	#reinit {margin-top:20px;}	
	.plus {
		position:relative;
		transform:translateX(-50%);
		left:50%
	}
	.message-erreur, .message-erreur1 {
		position: relative;
	}


}