@charset "UTF-8";
/*font Variables*/
/*Color Variables*/
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,700");
.multi_step_form {
  background: #f6f9fb;
  display: block;
  overflow: hidden;
}
.multi_step_form::after {    
      content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.75;
	  opacity: 0.45;
	  background: #000;
	width: 100%;
    height: 100%;

}
#details { padding-top: 40px!important; }
#details button { margin-top: 40px!important; }

.orange { 
	color: #FFAD45; 
}
.bkgorange { 
	background: #FFAD45; 
}
.bleu { 
	color: #285d97; 
} 
.bkgbleu { 
	background: #285d97; 
}

.fa-check { /* validé success */
	background: #228B22; 
	color: #FFFFFF;
}

.fa-delete-left { /* grey erase*/
	background: #DCDCDC; 
	color: #FFFFFF;
}
.fa-delete-left:hover { /* grey erase*/
	color: #000000;
	cursor: pointer;
}
.fa-triangle-exclamation { /* orange warning*/
	background: #FFA500; 
	color: #FFFFFF;
}

.fa-xmark {  /* red */
	background: #FF0000; 
	 color: #FFFFFF;
}

.fa-spinner {  /* red */
	background: #FFFFFF;
    color: darkgray;
}
.fa-spinner {
  width: 100px;
  height: 100px;
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  /* transform: rotate(3deg); */
   /* transform: rotate(0.3rad);/ */
   /* transform: rotate(3grad); */ 
   /* transform: rotate(.03turn);  */
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.justify-content-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.wrapper {
    width: 100%;
}
.mb-5, .my-5 {
    margin-bottom: 3rem !important;
}
.dbox {
    width: 100%;
    margin-bottom: 25px;
}
.text-center {
	font: 400 16px/28px "Montserrat", sans-serif;
    text-align: center !important;
}
.w-100 {
    width: 100% !important;
}
.dbox .icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto;
    margin-bottom: 20px;
}
.align-items-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}
.justify-content-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}
.margintop80 { 
	margin-top:80px;
}
.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}
.dbox .icon span {
    font-size: 20px;
    color: #fff;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-map-marker:before {
    content: "\f041";
}
.fa-check { 
	line-height: 36px;
}
.fa-font22:before { 
	font-size: 22px;
}
.fa-solid.fa-font22 > span { 
	font-family: 'Montserrat';
	text-transform: uppercase;
}

@media (min-width: 350px) {
	
}
@media (min-width: 768px){

	.col-md-12 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.col-md-3 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
}

.col-md-12 {
    padding-right: 25px;
    padding-left: 25px;
}
.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* margin-right: -5px; */
    /* margin-left: -5px; */
    align-content: stretch;
    justify-content: space-around;
	padding: 0 25px;
}
.multi_step_form #msform {
  font-family: 'Montserrat','Helvetica','Arial','Lucida',sans-serif;
  text-align: center;
  position: relative;
  padding-top: 0px;
  height: 100vh;/*
  min-height: 850px;
  max-width: 800px;*/
  max-width: 70%;
  margin: 0 auto;
  background: #ffffff;
  z-index: 1;
}
.multi_step_form #msform div > .containerLogo {
	display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 3%;
}

.multi_step_form #msform .title {
  text-align: center;
  padding-bottom: 0px;
}
.multi_step_form #msform .title h2 , h2 {
  font: 500 24px/35px "Montserrat", sans-serif;
  color: #3f4553;
  margin:0;
}
.multi_step_form #msform .title p , p {
  font: 400 16px/28px "Montserrat", sans-serif;
  color: #5f6771;
}
.multi_step_form #msform fieldset {
  border: 0;
  padding: 0px 0px 0;
  position: relative;
  width: 100%;
  left: 0;
  right: 0;
}
.multi_step_form #msform fieldset:not(:first-of-type) {
  display: none;
}
.multi_step_form #msform fieldset h3 {
  font: 500 18px/35px "Montserrat", sans-serif;
  color: #285d97;
}
.multi_step_form #msform fieldset h6 {
  font: 400 15px/28px "Montserrat", sans-serif;
  color: #5f6771;
  padding-bottom: 15px;
}
.multi_step_form #msform fieldset h6.reftitle {
  font: 400 26px/28px "Montserrat", sans-serif;
  color: #FFAD45;
  margin: 0;
  margin-bottom: 1em;
  padding: 0;
}
.multi_step_form #msform fieldset .intl-tel-input {
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag {
  padding: 0 20px;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  width: 65px;
}
.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow {
  border: 0;
}
.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  font: normal normal normal 24px/7px Ionicons;
  color: #5f6771;
}

.form-group { margin :0;margin-bottom: 10px; }

.multi_step_form #msform fieldset .form-group {
  padding: 0 10px;
}
.multi_step_form #msform fieldset .fg_2, .multi_step_form #msform fieldset .fg_3 {
  padding-top: 10px;
  display: block;
  overflow: hidden;
}
.multi_step_form #msform fieldset .fg_3 {
  padding-bottom: 70px;
}
.multi_step_form #msform fieldset .form-control {
  border-radius: 3px;
  border: 1px solid #d8e1e7;
  padding: 0 20px;
  height: auto;
  font: 400 15px/48px "Montserrat", sans-serif;
  color: #5f6771;
  box-shadow: none;
  outline: none;
  width: 100%;
}

.js-select2.countriSelect.disabled.select2-hidden-accessible ,.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: white!important;
  background-color: #DCDCDC!important;
  cursor: not-allowed!important;
  color: #5f6771!important;
}
.multi_step_form #msform fieldset .form-control.disabled {
  background-color: white!important;
  cursor: not-allowed!important;
}
.multi_step_form #msform fieldset .form-control.placeholder, .multi_step_form #msform fieldset .product_select.placeholder, select .placeholder {
  color: #5f6771;
}
.multi_step_form #msform fieldset .form-control:-moz-placeholder, .multi_step_form #msform fieldset .product_select:-moz-placeholder {
  color: #5f6771;
}
.multi_step_form #msform fieldset .form-control::-moz-placeholder {
  color: #5f6771;
}
.multi_step_form #msform fieldset .form-control::-webkit-input-placeholder {
  color: #5f6771;
}
.multi_step_form #msform fieldset .form-control:hover, .multi_step_form #msform fieldset .form-control:focus {
  /*border-color: #285d97;*/
}
.multi_step_form #msform fieldset .form-control:focus.placeholder{
  color: transparent;
}
.multi_step_form #msform fieldset .form-control:focus:-moz-placeholder {
  color: transparent;
}
.multi_step_form #msform fieldset .form-control:focus::-moz-placeholder {
  color: transparent;
}
.multi_step_form #msform fieldset .form-control:focus::-webkit-input-placeholder {
  color: transparent;
}
.multi_step_form #msform fieldset .done_text {
  /*padding-top: 40px;*/
}
.multi_step_form #msform fieldset .don_icon {
  height: 36px;
  width: 36px;
  line-height: 36px;
  font-size: 22px;
  margin-bottom: 10px;
  display: inline-block;
  border-radius: 50%;
  /*color: #ffffff;*/
  text-align: center;
	margin-left: 20px;
}
.multi_step_form #msform fieldset .done_text h6 {
  line-height: 23px;
}
.multi_step_form #msform fieldset .code_group {
 /* margin-bottom: 60px;*/
  margin-bottom: 30px;
}
.multi_step_form #msform fieldset .code_group .form-control, .multi_step_form #msform fieldset .code_group .form-nocontrol {
  color: #FFAD45;
  border: 0;
  border-bottom: 1px solid #a1a7ac;
  border-radius: 0;
  display: inline-block;
  width: 100%;
  font-size: 17px;
 /* color: #5f6771;
	margin-right: 7px;
	*/
  padding: 0;
  
  text-align: center;
  line-height: 28px;
}

.multi_step_form #msform fieldset .code_group input[type=number].form-control , .multi_step_form #msform fieldset .code_group input.form-control.po_client {
  width: 30px;
  font-size: 30px;
}
.multi_step_form #msform fieldset .code_group .form-control.po_client.select {
    width: 80px;
    font-size: 35px;
}
.multi_step_form #msform fieldset .passport {
  margin-top: -10px;
  padding-bottom: 30px;
  position: relative;
}
.multi_step_form #msform fieldset .passport .don_icon {
  height: 36px;
  width: 36px;
  line-height: 36px;
  font-size: 22px;
  position: absolute;
  top: 4px;
  right: 0;
  background: #285d97;
  display: inline-block;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
}
.multi_step_form #msform fieldset .passport h4 {
  font: 500 15px/23px "Montserrat", sans-serif;
  color: #5f6771;
  padding: 0;
}
.multi_step_form #msform fieldset .input-group {
  padding-bottom: 40px;
}
.multi_step_form #msform fieldset .input-group .custom-file {
  width: 100%;
  height: auto;
}
.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label {
  width: 168px;
  border-radius: 5px;
  cursor: pointer;
  font: 700 14px/40px "Montserrat", sans-serif;
  border: 1px solid #99a2a8;
  text-align: center;
  transition: all 300ms linear 0s;
  color: #5f6771;
}
.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label i {
  font-size: 20px;
  padding-right: 10px;
}
.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:hover, .multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:focus {
  background: #285d97;
  border-color: #285d97;
  color: #fff;
}
.multi_step_form #msform fieldset .input-group .custom-file input {
  display: none;
}
.multi_step_form #msform fieldset .file_added {
  text-align: left;
  padding-left: 190px;
  padding-bottom: 60px;
}
.multi_step_form #msform fieldset .file_added li {
  font: 400 15px/28px "Montserrat", sans-serif;
  color: #5f6771;
}
.multi_step_form #msform fieldset .file_added li a {
  color: #285d97;
  font-weight: 500;
  display: inline-block;
  position: relative;
  padding-left: 15px;
}
.multi_step_form #msform fieldset .file_added li a i {
  font-size: 22px;
  padding-right: 8px;
  position: absolute;
  left: 0;
  transform: rotate(20deg);
}
.multi_step_form #msform #progressbar {
  margin-bottom: 10px;
  overflow: hidden;
}
.multi_step_form #msform #progressbar li {
  list-style-type: none;
  color: #99a2a8;
  font-size: 12px;
  
  float: left;
  position: relative;
  /*font: 500 13px/1 "Montserrat", sans-serif;*/
}
.multi_step_form #msform #progressbar li.width3 {
width: calc(100%/3);
}
.multi_step_form #msform #progressbar li.width4 {
width: calc(100%/4);
}
.multi_step_form #msform #progressbar li.width5 {
width: calc(100%/5);
}
 
.multi_step_form #msform #progressbar li:nth-child(2):before {
  /*content: "";*/
}
.multi_step_form #msform #progressbar li:nth-child(3):before {
 /* content: "";*/
}

.multi_step_form #msform #progressbar li:before {
  /*content: ""
  font: normal normal normal 30px/50px Ionicons;*/
  /*font: normal normal normal 30px/50px Montserrat;*/
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: block;
  background: #eaf0f4;
  border-radius: 50%;
  margin: 0 auto 10px auto;
}
.multi_step_form #msform #progressbar li:after {
  content: "";
  width: 100%;
  height: 10px;
  background: #eaf0f4;
  position: absolute;
  left: -50%;
  top: 21px;
  z-index: -1;
}
.multi_step_form #msform #progressbar li:last-child:after {
  width: 150%;
}
.multi_step_form #msform #progressbar li.active {
  color: #285d97;
}
.multi_step_form #msform #progressbar li.active:before, .multi_step_form #msform #progressbar li.active:after {
  background: #285d97;
  color: white;
}
.multi_step_form #msform .action-button.disabled {
	cursor: not-allowed; 
}
.multi_step_form #msform .action-button {
  color: white;
  border: 0 none;
  border-radius: 5px;
  cursor: pointer;
  min-width: 130px;
  font: 700 14px/40px "Montserrat", sans-serif;
  border: 1px solid #285d97;
  margin: 0 5px;
  text-transform: uppercase;
  display: inline-block;
}
.multi_step_form #msform .action-button:hover, .multi_step_form #msform .action-button:focus {
  background: #FFAD45;
  border-color: #FFAD45;
}
.multi_step_form #msform .previous_button {
  background: transparent;
  color: #99a2a8;
  border-color: #99a2a8;
}
.multi_step_form #msform .previous_button:hover, .multi_step_form #msform .previous_button:focus {
  background: #FFAD45;
  border-color: #FFAD45;
  color: #fff;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.form-group.fg_2 { 
	display: -webkit-box!important;
	align-items: center;
}

.form-group.fg_2.flex { 
	display: flex!important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-evenly;
    align-items: flex-start;
}
.form-group.fg_2.flexCol { 
	display: flex!important;
    flex-direction: column;	
	padding-top: 0!important;
}
.fa-star-of-life{color:red;}
	
.knobs, .layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.form-group.butAction { 
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    flex-wrap: wrap; 
	margin-bottom: 25px;
}

.buttonSwitch {
  position: relative;
  width: 74px;
  height: 36px;
  overflow: hidden;
}

.buttonSwitch .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: #fcebeb;
  transition: 0.3s ease all;
  z-index: 1;
}

.buttonSwitch .checkbox:checked + .knobs:before {
  content: "OUI";
  left: 42px;
  background-color: #03a9f4;
}
.buttonSwitch .knobs:before {
  top: 4px;
  position: absolute;
  width: 28px;
  height: 28px;
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
.buttonSwitch .knobs:before {
  content: "NON";
  left: 4px;
  background-color: #f44336;
}
.buttonSwitch .checkbox:checked ~ .layer {
  background-color: #ebf7fc;
}
.buttonSwitch .knobs, .buttonSwitch .knobs:before, .buttonSwitch .layer {
  transition: 0.3s ease all;
}


/* CHECKBOX GENDER */
.genderBoxContanainer {
	padding-left:0px!important;
	display: flex!important;
	align-content: space-around!important;
    flex-direction: column!important;
    align-items: flex-start!important;
    flex-wrap: nowrap!important;
    justify-content: space-evenly!important;
}

.genderBoxContanainer label {
    display: inline-block;
    margin-bottom: 0.1rem;
}

/* Base for label styling */
	[type="checkbox"].genderBox:not(:checked),
	[type="checkbox"].genderBox:checked {
		position: absolute;
		left: 0;
		opacity: 0.01;
	}
	[type="checkbox"].genderBox:not(:checked) + label,
	[type="checkbox"].genderBox:checked + label {
		position: relative;
		padding-left: 2.3em;
		font-size: 1.05em;
		/*line-height: 1.7;*/
		cursor: pointer;
	}

	/* checkbox aspect */
	[type="checkbox"].genderBox:not(:checked) + label:before,
	[type="checkbox"].genderBox:checked + label:before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 1.4em;
		height: 1.4em;
		border: 1px solid #aaa;
		background: #FFF;
		border-radius: .2em;
	}

	/* checked mark aspect */
	[type="checkbox"].genderBox:not(:checked) + label:after,
	[type="checkbox"].genderBox:checked + label:after {
		content: '✕';
		position: absolute;
		top: .525em;
		left: .10em;
		font-size: 1.375em;
		color: #285d97;
		line-height: 0;
		-webkit-transition: all .2s;
				transition: all .2s;
	}

	/* checked mark aspect changes */
	[type="checkbox"].genderBox:not(:checked) + label:after {
		opacity: 0;
		-webkit-transform: scale(0) rotate(45deg);
				transform: scale(0) rotate(45deg);
	}

	[type="checkbox"].genderBox:checked + label:after {
		opacity: 1;
		-webkit-transform: scale(1) rotate(0);
				transform: scale(1) rotate(0);
}
.form-group .label {
    font-weight: bold;
    color: #5f6771;
    padding-top: 0;
    padding-left: 0;
    letter-spacing: 0.025em;
    font-size: 1em;
    line-height: 1.25;
    position: relative;
    /* z-index: 100; */
	display: block;
	width: 100%;
    text-align: left;
}
.customSelect, .form-group .select, .form-group .textarea, .form-group .client-details, .form-group .option-input + label, .form-group .checkbox-input + label {
    font: inherit;display: block;
    line-height: normal;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}	
.required .form-group .label:after, .form-group .required .label:after {
    content: " *";
    color: #E8474C;
    font-weight: normal;
    font-size: 0.75em;
    vertical-align: top;
}
.select2-container--default .select2-selection--single {
    border-top: 0!important;
    border-right: 0!important;
    border-left: 0!important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #FFAD45!important;
   	font-size: 17px!important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered > span.placeholder {
    color: #5f6771!important;
}
.select2-container--default .select2-selection--single .select2-selection__clear { 
	height: 17px!important;
}

.flagimg.paddingrightonly {
    border-collapse: collapse;
    border: 0px;
    margin-left: 0px;
    padding-left: 0px !important;
    padding-right: 4px !important;
}
.flagimg.user {
    max-height: 20px;
    height: 20px;
    width: auto;
}

.flagimg.inline-block {
    display: inline-block;
}
.flagimg.saturatemedium {
    filter: saturate(0.8);
}

/* OVERLAY */
.overlay { 
	position: absolute; 
	width: 100%;
	height: 100%; 
	z-index: 1; 
	background: white; 
	opacity: 1;
}
.overlay_center { 
	height: 100%;
	display: block;
	padding-top: 15%;
}
.overlay .text { 
	color:black;
	position: relative;
    top:-500px;
	font-weight: 700;
}
.loader {
	border:3px solid #FFAD45;
	width:100px;
	height:100px;
	border-radius:50%; 
	border-left-color: transparent;
    border-right-color: transparent;
	animation:rotate 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite;
    box-sizing: initial;
}

#loader2 {
	border:3px solid #285d97;
	width:120px;
	height:120px;
	position:relative;
	top:-116px;
	border-left-color: transparent;
    border-right-color: transparent;
	animation:rotate2 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite;
}
#loader3 {
	border:3px solid #FFAD45;
	width:140px;
	height:140px;
	position:relative;
	top:-252px;
	border-left-color: transparent;
    border-right-color: transparent;
	animation:rotate 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite;
}
#loader4{
	border:3px solid #285d97;
	width:160px;
	height:160px;
	position:relative;
	top:-408px;
	border-left-color: transparent;
  border-right-color: transparent;
	animation:rotate2 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite;
}
@keyframes rotate{
	0%{transform:rotateZ(-360deg)}
	100%{transform:rotateZ(0deg)}
}
@keyframes rotate2{
	0%{transform:rotateZ(360deg)}
	100%{transform:rotateZ(0deg)}
}

/* FIN OVERLAY */

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}