/***************/
/*** GÉNÉRAL ***/
/***************/

body { 
	background: none; 
}
html {			
	background: url("../img/bg-blue.jpg");
	background-size: cover; 
	background-position: center; 
	background-repeat: no-repeat; 
	min-width: 100vw; 
	min-height: 100vh;
}
p, .text { 
	font-size: 2rem;
}
h1{ 
	font-size: 3rem;
}
@media screen and (min-width: 1024px) {
	p, .text { 
		font-size: 1.2rem; 
	}
	h1{ 
		font-size: 1.5rem; 
	}
}


/**************/
/*** LOADER ***/
/**************/

#loader { 
	margin: auto; 
	display: inline-block; 
	position: relative; 
	width: 80px; 
	height: 80px; 
}
#loader div { 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
	display: block; 
	position: absolute; 
	width: 64px; 
	height: 64px; 
	margin: 8px; 
	border: 8px solid #fff; 
	border-radius: 50%; 
	-webkit-animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; 
	animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; 
	border-color: #007bff transparent transparent transparent; 
}
#loader div:nth-child(1) { 
	-webkit-animation-delay: -0.45s; 
	animation-delay: -0.45s; 
}
#loader div:nth-child(2) { 
	-webkit-animation-delay: -0.3s; 
	animation-delay: -0.3s; 
}
#loader div:nth-child(3) { 
	-webkit-animation-delay: -0.15s; 
	animation-delay: -0.15s; 
}
@-webkit-keyframes loader {
	0% { 
		-webkit-transform: rotate(0deg); 
		transform: rotate(0deg); 
	}
	100% { 
		-webkit-transform: rotate(360deg); 
		transform: rotate(360deg); 
	}
}
@keyframes loader {
	0% { 
		-webkit-transform: rotate(0deg); 
		transform: rotate(0deg); 
	}
	100% { 
		-webkit-transform: rotate(360deg); 
		transform: rotate(360deg); 
	}
}


/*******************/
/*** PAGE PERMIS ***/
/*******************/

#form-permis hr {
	display: none;
}

#form-permis .row>.col-12.pt-4 {
	padding: 0 !important;
}

#form-permis .btn-save {
	float: right;
}

#form-permis .subtitle-form {
	background: #E1969A;
    padding: 10px;
    color: #FFF !important;
    font-size: 22px;
    margin: 30px 0 0 0;
    border-radius: 5px;
    font-weight: 100;
}

.form_details_permis{
    opacity: 0;
}
.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.2s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*********************/
/*** PAGE PAIEMENT ***/
/*********************/

.page-pad {
	font-family: Arial, 'sans-serif;';
	font-size: 16px;
	line-height: 1.8em;
	text-align: center;
}
.mail_paiement img.logo {
	width: 400px;
}
.mail_paiement p {
	text-align: left;
	margin-top: 0;
}
.mail_paiement p.logo {
	text-align: center;
	margin-bottom: 50px;
}
.mail_paiement p.accroche {
	font-size: 18px;
	line-height: 1.4em;
	color: #39a7dd;
	text-align: center;
	font-weight: 600;
	margin-top: 30px;
}
.mail_paiement p.coordonnees {
	color: #ABABAB;
	font-size: 16px;
	line-height: 1.5em;
	text-align: center;
}
.mail_paiement p small {
	color: #ABABAB;
}
.mail_paiement h2 {
	font-weight: 100;
	text-align: left;
	padding-bottom: 0;
	color: #007CBD;
	font-size: 24px;
}
.mail_paiement p a.btn-acces-interface {
	background: #33a54c;
	padding: 20px 10px;
	color: #FFF;
	border-radius: 5px;
	text-decoration: none;
	display: block;
	width: 100%;
	text-align: center;
	font-size: 18px;
}
.mail_paiement p a.btn-acces-interface:hover {
	background: #218838;
}
.mail_paiement table.mode_paiements {
	border: 1px solid #EBEBEB;
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 50px !important;
}
.mail_paiement table.mode_paiements thead th {
	text-align: left;
	padding: 10px;
	border: 1px solid #EBEBEB;
	background: #EBEBEB;
}
.mail_paiement table.mode_paiements tbody td {
	border-collapse: collapse;
	padding: 20px;
	text-align: left;
	border: 1px solid #EBEBEB;
	vertical-align: top;
	line-height: 1.6em;
}
.mail_paiement table.mode_paiements tbody td:hover {
	background: #EBEBEB;
}
.mail_paiement table.mode_paiements tbody td:hover .btn-suivi {
	background-color: #007CBD;
	color: #FFF;
}
.mail_paiement table tr td.coordonnees_agence {
	 font-size: 16px;
	 color: #666;
	 line-height: 1.5em;
	 padding: 0 15px 0 25px;
	 border-left: 1px solid #ABABAB;
	 vertical-align: top;
	 text-align: left;
}
.mail_paiement .btn-suivi {
	background: #EBEBEB;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	color: #000;
	width: 100%;
	display: block;
	padding: 8px 0;
	margin-top: 10px;
}
.mail_paiement .btn-suivi:hover {
	background-color: #24A631 !important;
	color: #FFF;
	text-decoration: none;
}
.mail_paiement a.link_facture  {
	text-decoration: underline;
	color: #24A631;
}
.mail_paiement hr {
	height: 1px;
	background: #EBEBEB;
	padding: 0;
}
.mail_paiement h5 {
	color: #ABABAB;
	font-size: 12px;
	line-height: 1.5em;
	font-weight: 100;
	margin-top: 40px;
}
.mail_paiement h5 span.text-success {
	color: green;
}
.mail_paiement i {
	color: #007CBD;
	font-size: 50px;
}
.mail_paiement .btn-paiement {
	background: #EBEBEB;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	color: #000;
	width: 200px;
	display: block;
	padding: 8px 0;
	margin: 10px auto;
	border: none;
}
.mail_paiement .btn-paiement:hover {
	background-color: #24A631 !important;
	color: #FFF;
	text-decoration: none;
}
.mail_paiement a.download {
	text-decoration: underline;
	color: #000;
}