@font-face {
font-family: 'DINProMedium';
font-style: normal;
font-weight: normal;
src: local('DIN Pro Medium'), url('./fonts/DINPro-Medium.woff') format('woff');
}

@font-face {
font-family: 'DINProLight';
font-style: normal;
font-weight: normal;
src: local('DIN Pro Light'), url('./fonts/DINPro-Light.woff') format('woff');
}

*{ font-family:DINProLight; margin:0 auto; }
body{ background-color:#fff ;font-family: DINProLight !important; font-size: 16px; color: #0c2242;}
.clear{ clear:both;}
p{line-height: 20px;}

header{ text-align: left; color:#FFF; background:#0b2240; padding:20px; }

h1,h2{text-align: center; font-family: "DINProMedium"; font-size: 35px; line-height: 35px; margin-bottom:30px;}
h2{font-size: 33px;}
h1 span,h2 span{font-family: "DINProMedium"; color: #0071CE;}

.tooltip{background-color: #ff5100 !important;}
.tooltip.right::before{border-color: transparent #ff5100 transparent !important;}

#recuperer{background:#0b2240; color:#FFF; padding: 50px 25px; position: relative;}
#recuperer button{font-family: "DINProMedium"; width: 100%; text-transform: uppercase; background-color: transparent; border: solid 1px #FFF; text-align: center; padding: 16px 0px; transition-duration: 500ms; transition-property: color, border-color;}
#recuperer button:hover{color: #b5bcc5; border-color: #b5bcc5; transition-duration: 500ms; transition-property: color, border-color;}
#recuperer #listeboutons{margin: 20px 0px;}
#recuperer .imagebtn1, #recuperer .imagebtn2{display: none;}
#recuperer .imagebtn1:first-child, #recuperer .imagebtn2:first-child{display: block;}
#recuperer .legendebtn{display: none;}
#recuperer #listelegendes p{padding: 0px 10% 0px 5%; }

#btnR.actif{border: solid 1px #EE7729 !important; color: #EE7729 !important}
#btnS.actif{border: solid 1px #ED6A70 !important; color: #ED6A70 !important}
#btnE.actif{border: solid 1px #F5C806 !important; color: #F5C806 !important}
#btnA.actif{border: solid 1px #3DABA8 !important; color: #3DABA8 !important}

#legR{border-left: 1px solid #EE7729;}
#legS{border-left: 1px solid #ED6A70;}
#legE{border-left: 1px solid #F5C806;}
#legA{border-left: 1px solid #3DABA8;}

#bntQuestionCalcul{position: absolute; bottom: -34px; left: 13.5%; width: 72%; text-align: center; background-color: #ff5100; text-transform: uppercase; font-family: 'DINProMedium'; padding: 10px; border-radius: 30px; cursor: pointer;}
#bntQuestionCalcul i{font-size: 20px}

#calculReponse{margin-top:80px; display: none;}
#calculReponse #explications{background-color: #ff5100; color: white; padding: 10px 15px; position: relative;}
#calculReponse #explications:before { content:''; position: absolute; left: 0; right: 0; top: -24px; margin: 0 auto; width: 0; height: 0; border-bottom: 25px solid #ff5100; border-left: 25px solid transparent; border-right: 25px solid transparent;}
#calculReponse #explications table{color: #ff5100;}
#calculReponse #explications table tr td{background-color: white !important; border: solid 3px #ff5100; width:33%;}
#calculReponse #explications table tr:first-child td{border: solid 6px #ff5100;}

#coutRecouvrement{margin-top: 65px;}
#coutRecouvrement #blocCout{background: #0b2240; color: white; padding: 80px 0px; position: relative;}
#coutRecouvrement #blocCout p{padding: 0px 10% 0px 5%;}
#coutRecouvrement #blocCout #calculatrice{margin:30px 10% 0px 5%; border: solid 10px #006eb7; border-radius: 30px; padding: 30px; background: url('/skin/default/images/fond_calculatrice.jpg'); position: relative; top: 130px; left:10px;}
#coutRecouvrement #blocCout #calculatrice img{max-height: 55px; margin-bottom:25px;}
#coutRecouvrement #blocCout #calculatrice #ecran{border: solid 6px #006eb7; border-radius: 30px; padding: 25px; color: #006eb7; background: white; margin-bottom:50px;}
#coutRecouvrement #blocCout #calculatrice #ecran p{padding: 0px; margin-bottom: 50px;}
#coutRecouvrement #blocCout #calculatrice #ecran input{border: none; box-shadow: none; text-align: right; color: #ff5100; font-size: 35px; font-family: "DINProMedium";}
#coutRecouvrement #blocCout #calculatrice .boutonCalc{background: white; border: solid 6px #006eb7; border-radius: 30px; text-align: center; font-size: 35px; color: #30a8e0; font-family: "DINProMedium"; margin-bottom:15px; cursor: pointer;}
#coutRecouvrement #blocCout #calculatrice .boutonCalcValider{background: white; border: solid 6px #006eb7; border-radius: 30px; text-align: center; font-size: 35px; font-family: "DINProMedium"; margin-bottom:15px; cursor: pointer; color: #ff5100;}
#coutRecouvrement #blocResult{ border-top: solid 6px #006eb7; margin: 0px 15% 0px 15%; padding: 0px 10% 0px 5%;}

.resultat{ background: white; color: black; padding: 40px 10px; display: none;}
.resultat h3{font-family: "DINProMedium"; font-size: 25px; color: #0071CE; text-align: center;}
.resultat h3 span{font-family: "DINProMedium"; font-size: 25px; color: #ff5100;}
.resultat h4{font-family: 'DINProLight'; font-size: 16px; color: #0071CE; text-align: center;}
.resultat table tbody{border: none;}
.resultat table tr th, .resultat table tr td{background-color: white; border: none; font-weight: bold; padding: 0px;}
.resultat table tr th span{font-weight: normal; font-size: 14px;}
.resultat table tr th{text-align: left;}
.resultat table tr td{text-align: right;}
.resultat .coutReel{color: #ff5100;}

#coutRecouvrement #blocResultat{padding: 0px 20px 20px 20px;}
#coutRecouvrement #blocResultat .resultat{font-size:0.95em; padding-top: 80px; border: solid 1px black; border-top: none; -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5); box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);}

#formulaire{margin-top:60px;}
#formulaire h2 span{color: #ff5100;}

#formrecouvrement{border: solid 2px #293c58; padding: 20px 10px; margin-bottom:100px;}
/*#formrecouvrement fieldset{padding: 0px 60px;}*/
#formrecouvrement legend{width: 100%; color: #ff5100; font-weight: bold; position: relative; font-size:18px;}
#formrecouvrement legend:after{content:"";position: absolute; left: 0; bottom: 0; height: 1px; width: 50%; border-bottom: solid 2px #ff5100;}
#formrecouvrement label{font-weight: bold;}
#formrecouvrement input{background-color: #e8e8e8; border: none; box-shadow: none; height: 35px;}
#formrecouvrement #documents-label i{color: #ff5100; font-size:16px;}
#formrecouvrement #documents-label i.has-tip{border-bottom: none;}
#formrecouvrement #documents-element{min-height: 200px; background-color: #e8e8e8;}
#formrecouvrement #envoyer-element{text-align: center;}
#formrecouvrement #envoyer{background-color: #ff5100; color: white; border-radius: 30px; font-weight: bold; padding: 15px 30px 30px 30px; cursor: pointer;}
#formrecouvrement #envoyer.disabled{opacity: 0.5; cursor: unset;}
#formrecouvrement ul.errors{margin: 5px 0px 20px 0px;}
#formrecouvrement ul.errors li{list-style: none; color: #ff5100; font-weight: bold; font-size:13px; line-height: 16px; position: relative; top:-10px;}

#error404{padding: 50px 25px;}
#error404 h1 span{color: #ff5100;}
#error404 pre{overflow: visible;}

footer{ text-align: left; color:#FFF; background:#0b2240; padding:20px; }
footer img{max-height: 175px;}
footer a{color: #FFF; font-style: italic;}
footer a:hover{color: #FFF; font-weight: bold;}

@media screen and (min-width:1024px){
	#recuperer{min-height: 700px;}
	#recuperer p{padding: 0px 10% 0px 5%;}
	#recuperer .imagebtn1{ max-height: 597px;}
	#recuperer #listelegendes{padding: 0px 10% 0px 5%;}
	#recuperer #listelegendes p{padding: 0px 10% 0px 5%; }
	#recuperer button{width: 20%; margin:1%;}
	#bntQuestionCalcul{position: absolute; bottom: -22px; left: calc((100% - 760px)/2); width: 760px; text-align: center; font-size:25px;}

	#coutRecouvrement #blocCout #calculatrice{top: 0px;}

	#calculReponse #explications{padding: 35px 105px;}

	#coutRecouvrement #blocCout{padding: 160px 0px; min-height: unset;}
	#coutRecouvrement #blocCout #calculatrice{margin:0px; }


	.resultat{ background: white; color: black; padding: 40px 20px 40px 60px;}
	.resultat table{margin: 0px 10% 0px 5%; width: 90%;}

	#formrecouvrement{padding: 60px 0px 20px;}
	#formrecouvrement fieldset{padding: 0px 60px; border-right: solid 2px #293c58;}
	#formrecouvrement fieldset#fieldset-ladette{border-right: none;}

}
@media screen and (min-width:1024px) and (max-width:1439px){
	#coutRecouvrement #blocCout #calculatrice #ecran{padding: 15px;}
	#coutRecouvrement #blocCout #calculatrice #ecran p{margin-bottom: 10px;}
	#coutRecouvrement #blocCout #calculatrice #ecran input{font-size: 27px;}
	#coutRecouvrement #blocCout #calculatrice .grid-padding-x>.cell{padding: 5px;}
	#coutRecouvrement #blocCout #calculatrice .boutonCalc{font-size:27px;}
	#coutRecouvrement #blocCout #calculatrice .boutonCalcValider{font-size:27px;}
}
@media screen and (min-width:1440px){
	#coutRecouvrement #blocCout #calculatrice{margin:0px 10% 0px 5%;}
}