/************************************/
/*        		GENERAL				*/
/************************************/

html {
	min-height: 100%;
	position: relative;
}

html, body {
	font-family: "Montserrat";
	padding-top: 0;
}

header {
  display: block;
}

.fil-ariane {
	background-color: white;
	padding: 25px 0;
	font-size: 16px;
	margin-top: 0;
}

.fil-ariane a {
	padding: 10px 0 5px 0;
	border-bottom: 1px solid black;
	color: black;
	text-decoration: none;
}

#mainContent {
	margin: 0 auto;
	max-width: 1800px;
}

.no-wrap {
	white-space: nowrap;
}

.description-blue {
  font-size: 16px;
  font-family: "Montserrat";
  font-weight: 400;
  color: rgb(12, 81, 138);
  line-height: 1.5;
  margin-bottom: 5px;
}

.row-space {
  height: 15px;
}

@media screen and (min-width: 992px ) and (max-width: 1250px) {
  	.fil-ariane .container {
		width: 100%;
		padding-left: 60px;
	}
}

.arrow-bottom {
	margin: 0 0 0 10px;
}

input {
  border: 2px solid #c0c5c7!important;
  color: #464545!important;
  font-size: 16px!important;
  font-family: "Montserrat-Light";
  padding: 0 15px!important;
}

input:focus,
input:active,
.form-control:focus {
  box-shadow: none;
}

.form-group {
	margin-bottom: 20px !important;
}

.facultatif {
	color: #959697!important;
	font-family: "Montserrat-Light"!important;
	font-size: 14px!important;
}

.iconeCheck {
    display: inline-block;
    width: 35px;
    height: 35px;
    border: 2px solid #0C518A;
    border-radius: 100%;
    text-align: center;
    line-height: 31px;
    margin: 0 20px 0 0;
    color: #ffffff;
    background: #0C518A;
    float: right;
}

.boutons_confirmation {
	text-align: center;
}

.text_verification {
    background-color: #FFFFFF;
    border-color: #0C518A;
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
    padding: 15px;
    margin: 25px;
    max-width: 75%;
    white-space: normal !important;
    color: #0a4770;
    font-size:  18px;
    font-family: "Montserrat-Light";
}

.checkbox_verification {
	color: #2a2b2b!important;
    margin-bottom: 18px;
    white-space: normal !important;
    margin-left: 25px;
}

.help-container {
	padding-left: 20px;
}

.help-block {
	background: #fae46a;
	padding: 20px;
	border-radius: 5px;
	font-size: 14px;
	font-family: "Montserrat-Light";
	color: #000;
}

.help-block:after {
	content: '';
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 12px solid transparent;
	border-right: 12px solid #fae46a;
	left: 0;
	bottom: 50%;
	margin-left: -24px;
	position: absolute;
	display: inline-block;
}

.no-max-width {
	max-width: none;
}

.submit-button {
	text-align: center;
}

.submit-button button {
	text-transform: uppercase;
	padding-left: 30px;
	padding-right: 30px;
}

.champs-obligatoire-label {
	color: #747677;
	font-size: 14px;
	font-family: "Montserrat-Light";	
	padding: 0 20px;
	margin-bottom: -50px;
}

.warning {
	color: red;
	font-size: 14px;
	font-family: "Montserrat";
}

.wordwrap {
	white-space: normal!important;
}

.uppercase {
	text-transform: uppercase;
}


/************************************/
/*        		ERRORS				*/
/************************************/

.field-error .control-label {
	color: #DF225A;
}

.field-error .form-control {
	border-color: #DF225A!important;
}

.field-error .error,
.error {
	color: #DF225A;
	display: block;
	font-size: 13px;
}

.field-error .radio {
	border: 1px solid #DF225A;
}

.field-error .select-input {
	border: 2px solid #DF225A;
}

.field-error > div {
	height:50px;
}

.field-error > div > div {
	height:50px;
}


/************************************/
/*        		FONTS				*/
/************************************/

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 500;
	src: url("fonts/Montserrat-Regular-webfont.eot?#iefix")
	format("embedded-opentype"),
	url("fonts/Montserrat-Regular-webfont.woff2") format("woff2"),
	url("fonts/Montserrat-Regular-webfont.woff") format("woff"),
	url("fonts/Montserrat-Regular-webfont.ttf") format("truetype"),
	url('fonts/Montserrat-Regular.otf') format('opentype');
}

@font-face {
	font-family: "Montserrat-Bold";
	font-style: normal;
	font-weight: 700;
	src: url("fonts/Montserrat-Bold-webfont.eot?#iefix")
	format("embedded-opentype"),
	url("fonts/Montserrat-Bold-webfont.woff2") format("woff2"),
	url("fonts/Montserrat-Bold-webfont.woff") format("woff"),
	url("fonts/Montserrat-Bold-webfont.ttf") format("truetype"),
	url('fonts/Montserrat-Bold.otf') format('opentype');
}

@font-face {
	font-family: "Montserrat-Light";
	font-style: normal;
	font-weight: 300;
	src: url("fonts/Montserrat-Light-webfont.eot?#iefix")
	format("embedded-opentype"),
	url("fonts/Montserrat-Light-webfont.woff2") format("woff2"),
	url("fonts/Montserrat-Light-webfont.woff") format("woff"),
	url("fonts/Montserrat-Light-webfont.ttf") format("truetype"),
	url('fonts/Montserrat-Light.otf') format('opentype');
}


/************************************/
/*        		BOUTONS				*/
/************************************/

.header a:hover,
.header a:visited {
	color: #fff;
	text-decoration: none;
}

.button:hover {
	text-decoration: none;
	color: #fff;
}



/************************************/
/*        		HEADER				*/
/************************************/

header #barre-paris {
	height:82px;
	max-width: 1800px;
	margin: 0 auto;
	padding-right: 15px;
	background-color: rgb(12, 81, 138); 
}

header .logo-barre-paris {
	height: 82px;
	display: inline-block;
}

header .logo-barre-paris .lien-paris {
	width: 300px;
	height: 82px;
	display: inline-block;
	display:flex;
	flex-direction: row;
	align-items: center;
}

header .logo-barre-paris .lien-paris > svg{
	fill: #ffffff;
	margin-right: 15px;
}

header .logo-barre-paris .lien-paris > hr{
	width: 5px;
	height: 40px;
	background-color: #ffffff;
}

header .logo-barre-paris .lien-paris .logo{
	font-size: 20pt;
    color: white;
    display: flex;
    font-weight: 600;
    margin-left: 15px;
    flex-direction: column;
    justify-content: center;
}

header #bandeau {
	margin: 0 auto;
	max-width: 1800px;
	background: url("../images/bandeau.png") no-repeat;
}

header .lien-header {
	position: absolute;
	top: 82px;
	left: 0;
	text-decoration: none;
	z-index: 10;
}


header #bandeau h1 {
	color: #fff;
	font-size: 57px;
	letter-spacing: 5px;
}

header #presentation-etapes {
	margin: 0 auto;
	max-width: 1800px;
	background: rgb(248, 248, 248);
}

header #etapes {
	display: flex;
	font-size: 17px;
    font-family: "Montserrat";
    color: rgb(12, 81, 138);
    font-weight: bold;
    line-height: 1.2;
}


header #etape1, #etape2 {
	width: 50%;
	margin: 10px auto;
}

header #etape1 > p, #etape2 > p {
	text-align:center;
	padding-top:20px;
}

header #etape1 > img, #etape2 > img {
	display:block;
	margin:auto;
	padding-top:20px;
}


header .open {
  text-decoration: none;  
}


@media screen and (min-width: 992px ) and (max-width: 1250px) { 
  	
  	header #barre-paris {
		padding: 0;
	}
	
	header .logo-barre-paris {
		margin: 0;
	}
 
}

/************************************/
/*        		FOOTER				*/
/************************************/

#footer-content {
	margin: 0 auto;
	max-width: 1800px;
}

footer {
	display: flex;
	align-items: center;
	height: 76px;
    bottom: -80px;
}

footer .footer-logo .logo {
	margin-right: 13px;
	margin-top: -3px
}

footer a {
	color: #333333;
	font-size: 15px;
	margin-right: 40px;
}

footer a:hover {
	color: #333333;
}


@media screen and (min-width: 992px ) and (max-width: 1250px) {
  	footer .container {
		width: 100%;
	}

	footer .row {
		padding-left: 40px;
	}
}

/* Boutons de tri */
.colonneDate .btn-group .btn {
    background: none;
    color: white;
    border: 0;
}

.colonneDate .btn-group {
	float: right;
}



/************************************/
/*        ACCUEIL		*/
/************************************/

#accueil {
	padding-top: 45px;	
}

.titreTableau {
	color : #fff;
	background-color : #0a4770;
	font-size: 16px;
	font-family: "Montserrat-Bold";
}


.table tbody>tr>td.bouton-suivi-declaration
{
    padding: 16px 18px!important;
}

.table tbody>tr>td {
	font-size: 16px;
}

.borderless th {
    border: none!important;
}

.cocheVerte {
    background:url('../images/cocheVerte.png');
	padding-left : 20px;
	margin-right : 7%;
	background-size: contain;
    background-repeat: no-repeat;
}

.iconDownload {
    background:url('../images/iconBouton/iconeDownloadTablet.png');
	position: absolute;
    width: 24px;
    height: 24px;
    left: 11px;
    background-size: cover;
    top: 10px;
}

.iconDelete {
    background:url('../images/iconBouton/iconeDeleteTablet.png');
    position:absolute;
    width:24px;
    height:24px;
	margin-left: -10px;
  	background-size:cover;
	margin-top: 5px;
}

#confirmation .btn_telecharger_recapitulatif {
	height: auto;
	float: none;
	margin: 0 auto;
}

#confirmation .btn_telecharger_recapitulatif .textBoutonTelecharger {
	display: inline-block;
    line-height: normal;
    margin-top: -7px;
}

#confirmation .btn-declaration {
	float: none;
	margin: 0 auto;
}

.button[disabled]:after {
	background: #606060;
}

.table tbody>tr>td.align-center
{
    vertical-align: middle;
    text-align : left;
    padding : 0 24px;
}

.table tr>th.align-center
{
    vertical-align: middle;
}

.bouton-suivi-declaration > div {
	padding: 0;
}

.bouton-suivi-declaration div:first-child {
	padding-right: 7px;	
}

.bouton-suivi-declaration div:nth-child(2) {
	padding-left: 7px;	
}

.btn_suiviStatus{
	text-align : left;
	height:57px;
	white-space: normal;
	padding: 10px 10px 10px 20px;
	max-width: 190px;
}

.btn_telecharger_recapitulatif{
	text-align : left;
	max-width : 350px;
	height: 50px;
	white-space: normal;
}

.textBoutonDesactiver {
	padding-left : 16%;
	float : right;
	line-height: normal;
}

#form-telecharger .btn_suiviStatus {
	margin-right: 15px;
}

.textBoutonTelecharger {
	margin-left: 20px;
	display: inline-block;
}

.textBoutonTelecharger:hover {
	text-decoration: underline;
}


#mainContent .jumbotron h1 {
	font-size: 25px;
}

#mainContent .jumbotron .clearfix {
	width: 100%!important;
	margin-top: 30px!important;
}

#mainContent .jumbotron .clearfix > *
{
	display: inline-block;
	margin-bottom: 10px!important;
}

#mainContent .jumbotron .clearfix button
{
	background-color: #DF225A;
	border: none;
	border-radius: 5px;
	color: #FFF;
	cursor: pointer;
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	overflow: hidden;
	padding: 15px 20px;
	position: relative;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	z-index: 1;
}

#mainContent .jumbotron .clearfix button:hover {
	background-color: #b41a48;
}

#mainContent .jumbotron .clearfix button:after {
	transition: width 0.35s ease;
	transition: width 0.35s ease;

}

#mainContent .jumbotron .clearfix > button
{
	margin: 10px;
}

#strDateClassement {
	background-image: url(../images/calendar.png);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 21px;
}

.clear {
	clear: both;
}

@media screen and (min-width: 992px ) and (max-width: 1250px) {
	
  	#accueil .container {
		width: 100%;
		padding: 0 60px;
	}
	
	#accueil_footer_non_connecte .container {
		width: 100%;
		padding: 0 75px;
	}
	
	.textBoutonDesactiver {
		font-size: 1vw;
		padding:0;
		margin-left: 20px;
	}
}

@media screen and (min-width: 992px ) and (max-width: 1100px) {
	
	.table tbody > tr > td.bouton-suivi-declaration {
   		padding: 10px 8px!important;
	}
		
	.iconDelete {
	    width: 15px;
	    height: 15px;
	}
	
	.textBoutonDesactiver {
    	margin-left: 10px;
	}
		
}

/************************************/
/*        		ETAPES				*/
/************************************/

.step-content {
    margin-top: 0;
}

.step-content.grey {
    background: #f7f7f7;
}

.step-content.blue {
    background-color: rgb(242, 247, 248);
}

.step-content label {
	color: #0C518A;
	white-space: nowrap;
	font-size: 16px;
	font-family: "Montserrat";
	font-weight: 500;
}

.step-content label.icone-info {
    height: 25px;
    width: 25px;
    background: #fae46a;
    border-radius: 100%;
    text-align: center;
    color: #000;
    font-size: 16px;
}

.tooltip.in {
    filter: alpha(opacity=100)!important;
    opacity: 1!important;
}

.tooltip-inner {
    max-width: 260px!important;
    padding: 18px!important;
    color: #000!important;
    background-color: #fae46a!important;
    font-size: 14px!important;
    font-family: "Montserrat-Light"!important;
    text-align: left!important;
}

.tooltip.bottom .tooltip-arrow {
     border-bottom-color: #fae46a!important;
}

.header {
	background: #ffffff;
	margin: 0;
	padding: 15px 0;
	border-top: 1px solid #cccccc;
	position: relative;
}

.header.current {
	border-top: 0;
	background: #0C518A;
}

.header:last-child {
	border-bottom: 1px solid #cccccc;
}

.header .header-content {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	line-height: 30px;
	word-wrap: break-word;
}

.header .header-edit {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: flex-end;
}

.header.current {
	border-bottom: 0;
}

.header .number {
    display: inline-block;
    width: 35px;
    height: 35px;
    color: #0C518A;
    border: 2px solid #0C518A;
    border-radius: 100%;
    text-align: center;
    line-height: 31px;
    font-size: 1.3em;
    margin: 0 20px 0 0;
	font-family: "Montserrat-Bold";
}

.header .number.done {
    color: #ffffff;
    background: #0C518A;
}

.header .number.done img{
	height: 100%;
}

.header.current .number {
    color: #ffffff;
    border-color: #ffffff;
	font-family: "Montserrat-Bold";
}

.header h1 {
	font-size: 16px;
	color: #0C518A;
	line-height: 1.7em;
	padding: 0px;
	margin: 0px;
	font-family: "Montserrat-Bold";
}

.header.current h1 {
    color: #ffffff;
}

.header.current::after {
    display: block;
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-top: 16px solid #0C518A;
    border-bottom: 15px solid transparent;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    left: 50%;
    bottom: -30px;
    margin-left: -30px;
}

.header.current + .step-content {
	padding-top: 30px;
}

.header .header-recap {
	color: #454446;
	display: block;
	width: 100%;
	margin: 0;
	font-size: 18px;
	margin: 20px 0 15px 55px;
	font-family: "Montserrat-Light";
}

.header .header-recap .titre {
	font-family: "Montserrat-Bold";
	margin-top: 10px;
}

.header  a {
	height: 43px;
	width: 140px;
	line-height: 14.33px;
}

.step-content {
	padding: 25px 0 55px 0;
}

@media screen and (min-width: 992px ) and (max-width: 1250px) {
  	.step-content .container {
		width: 100%;
	}

	.step-content  {
		padding-left: 60px;
	}
	
	.help-container {
		padding-right: 30px;
	}

	.champs-obligatoire-label {
		color: #747677;
		font-size: 14px;
		font-family: "Montserrat-Light";
		padding: 0 30px;
	}
}

/************************************/
/*        Formulaire etape 1		*/
/************************************/

#form-immatriculation h2 {
	color: #0c518a;
	font-size: 16px;
	font-family: Montserrat;
}

#form-immatriculation .warning-etatpe {
	color: #747677;
	font-size: 14px;
	font-family: "Montserrat-Light";	
}

#form-immatriculation input {
	text-align: center;
	text-transform:uppercase;
	margin-bottom: 15px;
}

/************************************/
/*        	CONFIRMATION			*/
/************************************/

#confirmation {
	background: #fff!important;
	border-top: 1px solid #ccc;
}

#confirmation .iconeCheck {
	margin: 0;
	float: left;
	width: 40px;
	height: 40px;
	line-height: 36px;
	
}

#confirmation .text_confirmation {
	color: #0a4770;
    white-space: normal;
    font-size: 22px;
    font-family: "Montserrat-Bold";
    width: 95%;
	float: right;
}

#confirmation .text_rappel_confirmation {
	font-style: italic;
	margin-left: 50px;
	font-size: 18px;
	color: #5f6263;
	width: 95%;
	float: right
}

#confirmation .btn_telecharger_recapitulatif {
	max-width: 350px;
}

#confirmation .btn_telecharger_recapitulatif:hover {
	max-width: 350px;
}

.tooltip {
	cursor: pointer;
}

/************************************/
/*        		TABLETTE			*/
/************************************/
@media screen and (min-width: 768px ) and (max-width: 991px) {
	
	.no-max-width {
		max-width: 380px;
	}
	
	.container {
		width: 100%!important;
		padding: 0 10px;
	}

	/************************************/
	/*        		HEADER				*/
	/************************************/

  	header #barre-paris {
		height: 92px;
		padding: 0;
		text-align: center;
	}

	header .logo-barre-paris {
		height: 92px;
	    width: 300px;
	    margin: 0 auto;
	}
	
	header .logo-barre-paris .lien-paris {
		height: 92px;
		margin-right: -170px;
	}
	
   	header #bandeau {
	    margin: 0 auto;
	    background-size: cover;
	    height: 160px;
  	}

   	header #bandeau .container {
    	width: 100%!important;
  	}

  	header .lien-header {
		position: absolute;
		width: 100%;
		height: 160px;
		top: 92px;
		left: 0;
		text-decoration: none;
		z-index: 10;
	}

  	header #bandeau h1 {
	    color: #fff;
	    font-size: 24px;
	    letter-spacing: 3px
  	}

  	.btnParticulier{
		min-width: 430px;
	}
	
	header .nav-pro a {
	  height: 92px;
	  margin-right: 40px;
	}
	

  	/************************************/
	/*        		FOOTER				*/
	/************************************/

    footer a {
	color: #333333;
	font-size: 15px;
	margin-right: 20px;
    }
	

	/************************************/
	/*        SUIVI DECLARATION			*/
	/************************************/
	
	#accueil {
		padding-top: 20px;	
	}

	.iconDelete{
	  	margin-left : -10px;
	  	margin-top : -12px;
	}

	.btn_suiviStatus{
		padding: 0 23px;
		height: 45px;
		margin-right: 30px;
	}

	.statusInactif:after {
		background: #606060;
	}

	.colonneDate
	{
	    padding-left : 26px!important;
	}

	.colonneAdresse
	{
	    padding-left : 33px!important;
	}

	.colonneNumEnreg
	{
	    padding-left : 20px!important;
	}

	.colonneStatus
	{
	    padding-left : 13px!important;
	}

	.table tbody>tr>td.align-center
	{
	    padding-left : 0px;
	}

	.table tr>th.align-center
	{
	    padding-left : 0px;
	}


	#etageHelp {
		margin-top: -50px;
	}
	
	.step-content {
		padding: 25px 20px 50px 20px;
	}
	
	.button-with-padding {
		padding-bottom: 5px;
	}
	
	/************************************/
	/*         		VALIDATION			*/
	/************************************/
	
	.checkbox_verification {
		white-space: normal!important;
	}
	
	#confirmation .iconeCheck {
		margin: 10px 10px 0 0;
	}
	
	#confirmation .text_confirmation {
	    float: none;
	}
	
}

/************************************/
/*        		MOBILE				*/
/************************************/
@media screen and (max-width: 767px) {
	
	.modal-dialog {
		margin: 0;
		top: 0;
		left: 0;
}

	/************************************/
	/*        		HEADER				*/
	/************************************/
	header #barre-paris {
		height: 63px;
		margin: 0 auto;
		padding: 0px;
		text-align: center;
	}

	header .logo-barre-paris {
		height: 63px;
		width: 300px;
		margin: 0;
	}
	
	header .logo-barre-paris .lien-paris {
		height: 63px;
		width: 300px;
	}

  	header #bandeau {
	    margin: 0 auto;
	    background-size: cover;
	    height: 95px;
  	}

  	header .lien-header {
		position: absolute;
		width: 100%;
		height: 127px;
		top: 63px;
		left: 0;
		text-decoration: none;
		z-index: 10;
	}

   .header .header-recap {
		text-align:center;
		margin: 20px 0 15px 0px;
	}

	header #bandeau h1 {
		color: #fff;
		font-size: 20px;
		letter-spacing: 0px
	}
	
	header #presentation-etapes {
	margin: 0 auto;
	max-width: 1800px;
	background: rgb(248, 248, 248);
	padding: 35px;
    }

	header #etapes {
		display:block;
		font-size: 17px;
		font-family: "Montserrat";
		color: rgb(12, 81, 138);
		font-weight: bold;
		line-height: 1.2;
	}


	header #etape1, #etape2 {
		margin: 10px auto;
		width: 100%;
	}

	header #etape1 > p, #etape2 > p {
		text-align:center;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	header #etape1 > img, #etape2 > img {
		display:block;
		margin:auto;
	}
	
	.header h1 {
		font-size: 14px;
		color: #0C518A;
		line-height: 1.7em;
		padding: 0px;
		margin: 0px;
		font-family: "Montserrat-Bold";
    }
	

	/************************************/
	/*        		FOOTER				*/
	/************************************/

	footer {
		min-height: 130px;
		bottom: -130px;
		display: block;
	}

	footer .container {
		width: 100%;
	}

	footer .footer-logo {
		margin: 0 auto;
		float: none;
	}

	footer .lienparis {
		padding-bottom: 15px;
	}

  	footer a {
		text-align: center;
    	display: block;
    	margin: 0 auto;
  	}

	

	

}