@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url('../../themes/classic/assets/fonts/Bronova Regular.ttf');

body, *{
	font-family: "Roboto", sans-serif;
	color: #5B5B5B;
	width: 100%;
}

.mb40{
	margin-bottom: 40px;
}

.mt40{
	margin-top: 40px;
}

.formAlert{
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: 500;
	font-size: 1.2rem;
	width: 80%;
	z-index: 50;
	text-align: center;
}

.formAlert div.alert{
	-webkit-box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.1);
	padding: 2rem;
}

.formCi{
	position: relative;
}

.formCi .departements{
	position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1.2rem;
    border: 1px solid #f5c6cb;
    border-radius: .25rem;
    background-color: #f8d7da;
    font-size: 1.2rem;
}

.formCi .departements strong{
	color: #721c24;
}

.formCi hr{
	margin: 24px 0;
}

.formCi .alert{
	display: none;
}

.w-20{
	width: 20%;
}

.w-40{
	width: 40%;
}

.illuResa{
	display: none;
	width: 100%;
	margin-bottom: 15px;
}

.btn-primary{
	color: #fff;
    background-color: #a52416;
    border-color: transparent;
    text-transform: uppercase;
    font-weight: 600;
    padding: .5rem 1.25rem;
}

.btn-primary:hover{
	background-color: white;
	border-color: #a52416;
	color: #a52416;
}


/* SELECT2 */

.formCi2 .select2{
	width: 69%!important;
	background: #f1f1f1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAPklEQVR4Ae3TwREAEBQD0V/6do4SXPZg7EsBhsQ8IEmSMOsiuEfg3gL3oXC7wK0bd1G4o8X9F4yIkyQfSrIByQBjp7QuND8AAAAASUVORK5CYII=) no-repeat scroll right .5rem center/1.25rem 1.25rem!important;
    padding: 0 .5rem!important;
    border: 1px solid rgba(0,0,0,.25)!important;
    -moz-appearance: none!important;
    -webkit-appearance: none!important;
    display: inline-block!important;
    font-size: 1rem!important;
    height: calc(1.5em + .75rem + 2px)!important;
        font-weight: 400!important;
}

.formCi2 .select2-container--default .select2-selection--single{
	background-color: transparent!important;
	border: none!important;
	border-radius: 0!important;
	height: 100%!important;
}

.formCi2 .select2-container--default .select2-selection--single .select2-selection__rendered{
	height: 100%!important;
	color: #7a7a7a!important;
	line-height: 2rem!important;
}

.formCi2 .select2-container--default .select2-selection--single .select2-selection__arrow{
	display: none!important;
}

.formCi2 .btn-user{
	width: 30%;
	display: inline-block;
	margin-top: 0!important;
	color: #fff;
    background-color: #a52416;
    border-color: transparent;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 0;
}

.formCi .text-right input{
	margin-top: 24px;
}

.formCi .form-group {
	margin-bottom: 1rem;
}

.formCi .form-control{
	display: block;
    width: 100%;
    font-size: 1rem;
    line-height: 1.25;
    background-color: #fff;
    background-image: none;
    background-clip: padding-box;
    border-radius: 0;
    background: #f1f1f1;
    color: #7a7a7a;
    border: 1px solid rgba(0,0,0,.25);
    padding: .5rem 1rem;
    margin-bottom: 1rem;
}

.formCi .form-control::placeholder{
	color: #BBB;
	font-style: italic;
	font-size: 0.8rem;
}

.formCi .form-control-label{
	padding-top: 0.625rem;
	text-align: right;
	font-size: .875rem;
}

.formCi .form-control-select{
	background: #f1f1f1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAPklEQVR4Ae3TwREAEBQD0V/6do4SXPZg7EsBhsQ8IEmSMOsiuEfg3gL3oXC7wK0bd1G4o8X9F4yIkyQfSrIByQBjp7QuND8AAAAASUVORK5CYII=) no-repeat scroll right .5rem center/1.25rem 1.25rem;
	padding: 0 .5rem;
	color: #7a7a7a;
    border: 1px solid rgba(0,0,0,.25);
    -moz-appearance: none;
    -webkit-appearance: none;
}

/* CHECKBOXES */

.formCi .custom-control{
	margin-bottom: 1rem;
}

.formCi .custom-control-label {
	padding-top: 0.4rem;
	padding-left: 0.75rem;
}

.formCi .custom-control-label::before{
	position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
}

.formCi .custom-control-label::after{
	position: absolute;
    top: 0;
    left: -1.75rem;
    display: block;
    width: 2rem;
    height: 2rem;
    content: "";
    background: no-repeat 50%/50% 50%;
}

.formCi .custom-control.items{
	margin-left: 1.75rem;
	font-size: 0.75rem;
}


/*
.formCi .custom-control .form-control.largeur{
	margin-top: 1rem;
}
*/

.formCi .notes{
	font-size: 0.8rem;
	font-style: italic;
	display: block;
}

.formCi .marges{
	margin: 0.4rem 0 0 0.8rem;
}

/* FILES */

.formCi .bootstrap-filestyle .form-control{
	width: auto;
	border-radius: 0!important;
}

.formCi .bootstrap-filestyle .btn{
	line-height: 2.1;
	font-size: 0.6rem;
	margin-top: 0;
}

.formCi .bootstrap-filestyle .btn.btn-primary span{
	color: white;
}

.formCi .btn{
	display: inline-block;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: 0;
    margin-left: auto;
}

.formCi .btn.btn-primary{
	color: #fff;
    background-color: #a52416;
    border-color: transparent;
    text-transform: uppercase;
    font-weight: 600;
    padding: .5rem 1.25rem;
}

.formCi .btn.btn-primary:hover{
	background-color: #fff;
    color: #a52416;
    border-color: #a52416;
    text-transform: uppercase;
    font-weight: 600;
    padding: .5rem 1.25rem;
}

.alert-danger p{
	color: #E4191A;
}

.formCi .resultat {
	position: absolute;
	z-index: 10;
	background: #5B5B5B;
	padding: 1.5rem 2.25rem 1.5rem; 
	margin-top: 18px;
	width: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.formCi .resultat.hide{
	display: none;
}

.formCi .resultat *{
	color: white!important;
}

.formCi .resultat h3{
	font-weight: 700;
	font-size: 1.125rem;
    line-height: 1.1;
    color: inherit;
    font-family: 'Bronova', sans-serif!important;
    margin: 12px 0;
}

.formCi .resultat .fa{
	position: absolute;
	top: 20px;
	right: 20px;
}

.formCi .labelInput{
	margin: 0.5rem 0 0.2rem 0;
    font-size: 0.8rem;
    display: block;
}


.formCi .alertFlex{
	display: flex;
	align-items: center;
}

.formCi .alertFlex i.fa{
	width: 35px;
}

.formCi .alertFlex .faInline{
	display: inline;
	font-size: 2rem;
}

/* FORM CLIENT FRONT */

.formCi .filEtapes{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin: 12px 0 56px 0;
}

.formCi .filEtapes .etape{
	width: 30%;
	text-align: center;
	height: 48px;
	padding: 8px 12px;
	margin: 0 8px;
	border: 1px solid #a52416;
	border-radius: 5px;
	line-height: 28px;
	cursor: pointer;
}

.formCi .filEtapes i.fa{
	display: inline;
	width: auto;
}

.formCi .filEtapes .etape.active{
	background: #a52416;
	color: white;
}

.formCi h3{
	margin: 24px 0;
	font-size: 1.5rem;
	font-weight: 500;
}

.formCi h3::before{
	content: "";
	border-left: 2px solid #A52416;
	padding-left: 12px;
}

.formCi .formFlex{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}

.formCi .formFlex div{
	width: 200px;
	height: 210px;
	border: 1px solid #EFEFEF;
	padding: 5px;
	font-size: 0.8rem;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	color: #5B5B5B;
	margin: 6px 0 6px 6px;
	border-radius: 5px;
	text-transform: uppercase;
}

.formCi .formFlex div.btnSansPhoto{
	height: 100px;
	display: flex;
    justify-content: center;
    align-items: center;
}

.formCi #conduit .formFlex.choixConduit div{
	height: 330px;
}

.formCi .formFlex div:hover,
.formCi .formFlex div.active{
	background: #a52416;
	color: white;
}

.formCi .formFlex div img{
	width: 80%;
	display: block;
	margin: auto auto 5px auto;
}

.formCi #logement,
.formCi #conduit,
.formCi #logement #logementMaison,
.formCi #conduit #conduitExistant{
	display: none;
}

.formCi .btn{
	margin-top: 36px;
}

/* RESERVATION */

.formCi.reservation{
	margin-top: 48px;
	display: none;
}

.reservation .ligneJour{
	display: flex;
	justify-content: flex-start;
	align-content: center;
}

.reservation .ligneJour .jour{
	border: 1px solid #EFEFEF;
	padding: 5px;
	border-radius: 5px;
	margin: 6px 0 6px 6px;
	width: 200px;
	background: #FBFBFB;
}

.reservation .ligneJour .jour h4{
	width: 100%;
	display: block;
	text-align: center;
	font-size: 0.7rem;
	padding: 8px 0;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.reservation .ligneJour .jour h4 span{
	display: block;
	font-size: 1.3rem;
}

.reservation .ligneJour .jour .heure{
	width: 100%;
	padding: 8px 0;
	font-size: 0.8rem;
	border: 1px solid #a52416;
	color: #a52416;
	margin-bottom: 5px;
	border-radius: 5px;
	cursor: pointer;
	text-align: center;
	font-weight: bold;
}

.reservation .ligneJour .jour .heure:hover,
.reservation .ligneJour .jour .heure.active{
	background: #a52416;
	color: white;
}

#btnAccueil{
	display: none;
}

span.email_sub{
	font-size: 0.7rem;
	font-style: italic;
	color: #a52416;
}

/* RECAP */

body.fdBody{
	background-image: url('/themes/ap_quapa/assets/img/modules/leoslideshow/Slide1def.jpg');
}


body.fdBody .blocInfo{
	width: 45%;
    margin: 40px;
    background: white;
    opacity: 0.9;
    padding: 32px;
    border-radius: 5px;
}

body.fdBody .blocInfo h4{
	line-height: 2rem;
}

body.fdBody .blocInfo strong{
	color: #A52416;
}

body.fdBody .blocInfo .alert-success{
	margin-top: 40px;
}

body.fdBody .blocInfo .alert-success .fa{
	font-size: 3rem;
	margin-bottom: 8px;
}


@media screen and (max-width: 991px) {
	.reservation .ligneJour{
		flex-direction: column;
	}
	
	.reservation .ligneJour .jour{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	
	.reservation .ligneJour h4{
		width: 90px!important;
	}
	
	.reservation .ligneJour .jour .heure{
		width: 63px;
		margin-right: 2px;
	}

	.formCi .filEtapes .etape{
		width: 100%;
		margin-bottom: 5px;

	}

	.formCi .filEtapes  i.fa 
	{
		display:none

	}
	
}

@media screen and (max-width: 640px) {
	.formCi .bootstrap-filestyle .group-span-filestyle{
		margin-top: -1rem;
		margin-bottom: 1rem;
		width: 100%;
	}
	
	.formCi .bootstrap-filestyle .group-span-filestyle label{
		width: 100%;
	}
	
	.ui-helper-reset{
		font-size: 85%;
	}
	
	.formCi .form-control{
		font-size: inherit;
	}
	
}