body{

	background-color: #EFEFF6;

	height: 100%;

    overflow: hidden;

}

.cl-scampi{

	color: var(--cl-scampi); !important;

}

.mt-12{

	margin-top: 12px !important;

}

.ff-Medium {

    font-family: 'Gilroy-Medium' !important;

}

.btn{

	font-size: 14px;

}

.btn-white{

    background: transparent;

    color: white;

	border: 1px solid white;

}

.btn.disabled {

    background-color: #D9A9FF !important;

}

.bg-white{

    background: white !important;

}

.fs-14{

	font-size: 14px;

}

.fs-20{

	font-size: 20px;

}

.recap-body p u{

	text-decoration: none;

	color: black;

}

header{

	height: 74px;

    background-color: #1E2336;

    color: #ffffff;

    width: 100%;

    padding: 20px;

	display: flex;

	align-items: center;

	justify-content: space-between;

}

header a {

    color: #fff;

    font-family: 'Gilroy-Bold';

    text-decoration: none;

    font-size: 14px;

}

.content-bloc-left{

	width: 100% !important;

	padding-bottom: 150px;

}

.bloc-left{

	overflow-y: auto;

}

.bloc-right {

	width: 0vw;

	display: none;

}

.link-help button{

	display: none;

}

h1:before{

	display: none;

}

.content-presentation{

    max-width: 800px;

	display: flex;

    flex-direction: column;

    align-items: center;

}

.inner-presentation h1,

.inner-remerciement h1,

.background-img h1{

	font-size: 40px;

}

.inner-presentation h1 span,

.inner-presentation h2 span, 

.inner-remerciement h1 span,

.h2-step span {

	color: #ffffff;

	padding: 0 5px;

	position: relative;

	display: inline-block;

}

.inner-presentation h1 span:before,

.inner-presentation h2 span:before, 

.inner-remerciement h1 span:before,

.background-img h1 span:before,

.h2-step span:before{

	content: "";

    position: absolute;

    width: 100%;

	height: 100%;

	background: none;

    opacity: 1; 

    top: 0;

    left: 0;

    z-index: -1;

    background-color: #9000FF;

	animation: wiggle 2s ease-in-out infinite;

}

.feature{

	max-width: 400px;    

}

.feature .col{

	width: 100%;

	padding: 0;

}

.feature .col:after{

	display: none;

}

.feature .col p{

	text-align: left;

	width: calc(100% - 50px);

	margin: 6px 0 !important;

	font-size: 18px;

}

.icon-step {

    background-image: url(/wp-content/themes/distingo/assets/img/step-blue.svg);    

}

.icon-user {

    background-image: url(/wp-content/themes/distingo/assets/img/user-blue.svg);    

}

.icon-bank-blue,

.icon-home-blue,

.icon-signature-blue,

.icon-arrow-right-white {

    background-image: url(/wp-content/themes/distingo/assets/img/bank-blue.svg); 

	background-size: contain;

    width: 17px;

    margin-right: 16px;

    background-position: center;	

}

.icon-home-blue {

    background-image: url(/wp-content/themes/distingo/assets/img/home-blue.svg);    

}

.icon-signature-blue {

    background-image: url(/wp-content/themes/distingo/assets/img/signature-blue.svg);    

}

.icon-arrow-right-white {

    background-image: url(/wp-content/themes/distingo/assets/img/arrow-right-white.svg);

	margin-right: 0;    

}

.icon-pen-blue{

	background-image: url(/wp-content/themes/distingo/assets/img/pen-blue.svg);

    background-size: contain;

    width: 13px;

    margin-left: 9px;

    background-position: center;    

}

.box-card{

	max-width: 672px;

    width: 100%;

}

.inner-presentation h2,

.h2-step{

	font-size: 32px;

    font-family: Gilroy-Bold;

    line-height: 40px;

	color: #1E2336;

}

.h2-step{

	margin: 26px -150px;

}

.h3{

	font-family: Gilroy-Bold;

	font-size: 18px;

}

.h3 span{

	color:  #9000FF;

}

.card {

    background: none;

	background-color: #ffffff;

    border: none;

    border-radius: 5px;

    padding: 20px;

    color: #6360E8 !important;

    font-size: 14px;

	width: 100%;   

}

.drawer-content .card {

    color: var(--cl-white) !important;   

}

.menu-navbar{

    height: 72px;

    background-color: #ffffff;

    padding: 0px;

	width: 100%;

}

.menu-container{

	max-width: 800px;

	width: 100%;

	margin: auto;

}

#menu-header{

	font-size: 14px;

	color: var(--cl-primary);

	height: 62px;

}

#menu-header li{

	width: 33.33%;

	margin-right: 0;

	display: flex;

    justify-content: center;

}

#menu-header li .icon {

    background: #ffffff !important;

	border: 1px solid #D9A9FF;

	color: #D9A9FF;

	flex: none;

	margin-right: 0;

}

#menu-header li.active .icon {

	border: 1px solid #9000FF;

	color: #9000FF;

}

#menu-header li span:not(.bar){

	padding-left: 8px;

	margin-right: 5px;

    flex: none;

}

#menu-header li span.bar{

	width: 100%;

	height: 1px;

	background-color: #D9A9FF;

}

.progress{

	background: #F9F2FF;

}

.progress-bar{	

	background: #9000FF;

}

.gap-10{

	gap: 10px;

}



.form-group {

    margin-bottom: 12px;

}

.input-radio, 

.input-checkbox {

    height: 48px;

	position: relative;

}

input[type="radio"], 

input[type="checkbox"],

.input-checkbox label {

    height: 48px;

}

.input-radio label,

.input-checkbox.bg-br-white label {

    border: 1px solid #A5A5A5;

    background-color: white;

	height: 48px;

	border-radius: 5px;

	transition: background-color 0.3s ease, border 0.3s ease, color 0.3s ease;

	margin-bottom: 0;	

}

.form-group input:not([type="radio"]):not([type="checkbox"]) ~label,

.form-group select:not(.select)~label{

	color: #A5A5A5;

}



.input-radio input:checked~label,

.input-checkbox.bg-br-white input:checked~label{

    background-color: #9000FF;

    border: 1px solid #9000FF;

	color: white;

}

.input-radio label:before {

    border-radius: 50%;

    width: 18px;

    height: 18px;

	border: 2px solid #A5A5A5;

}

.input-radio input:checked ~ label:before{

    border: 2px solid white;

}

.input-radio input:checked ~ label:after{

	background-color: white;

	width: 10px;

    height: 10px;

}

select, 

select:focus,

input:not([type="radio"]):not([type="checkbox"]),

input:not([type="radio"]):not([type="checkbox"]):focus,

span.select-search-field{

	background-color: transparent;	

	height: 48px;

	line-height: 48px;

	border: none;

    border-bottom: 1px solid #A5A5A5;

    border-radius: 0;

	outline: 0;

    box-shadow: none;

	padding-top: 10px;

}

input:not([type="radio"]):not([type="checkbox"]):focus,

input:not([type="radio"]):not([type="checkbox"]).hasvalue{

	border-color: #353562;

}

.drawer-content input:not([type="radio"]):not([type="checkbox"]), 

.drawer-content select,

.drawer-content .select-dropdown, 

.drawer-content span.select-search-field {

    background-color: transparent;

    color: #fff;

	border: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.3);

}

.form-group input:not([type="radio"]):not([type="checkbox"]).hasvalue~label, 

.form-group select.initial.hasvalue~label,

.form-group select:not(.select).hasvalue~label{

	font-size: 12px;

	top: 0px;

}

.form-group input:not([type="radio"]):not([type="checkbox"]).hasvalue~label:after, 

.form-group select.initial.hasvalue~label:after,

.form-group select:not(.select).hasvalue~label:after{

	background-color: transparent;

	font-size: 12px

}

.form-group select:not(.select).hasvalue~label {

    z-index: 1;

    color: #5E5DA6;

}

.input-checkbox.bg-br-white label:before {

    margin-left: 14px;

    border: 2px solid #A5A5A5;

}

.input-checkbox input:checked ~ label:before {

    border: 1px solid #353562;

	background: #9000FF;

}

.input-checkbox.bg-br-white input:checked ~ label:before {

    border: 2px solid white;

}

.input-checkbox input:checked ~ label:after{

	top: 20px;

	background-image: url(/wp-content/themes/distingo/assets/img/check.svg);

}

.input-checkbox.bg-br-white input:checked ~ label:after{

	left: 18px;

	top: 18px;

    background: white;

    width: 10px;

    height: 10px;

    border-radius: 2px;

}

#indicatif {

    color: var(--cl-primary);

}

span.select-search-field{

	padding-top: 0;

	border-color: #353562

}

.form-group.select-search span.select-search-field.hasvalue{

	padding-top: 10px;

}

.form-group.select-search span.select-search-field.hasvalue~label{

	top: 0px;

	font-size: 12px;

}

.btn-precedent{

	background-color: #EFEFF6;

	border: 1px solid #5E5DA6;

	color: #5E5DA6;

}

hr.hr-inline:after {

	background: #EFEFF6;

}

.popup hr.hr-inline:after {

	background: #ffffff;

}

.card-recapitulatif{

	background: #FFFFFF;

    border: 1px solid #A5A5A5;

	margin-bottom: 8px;

}

h2.recap-title{

	margin-bottom: 8px;

    font-size: 16px;

	color: #1E2336;

}

.recap-body p {

    margin-bottom: 0;

    font-size: 14px;

}

.to_change_identity{

	font-family: Gilroy-Bold;

	display: flex;

	align-items: center;

	font-size: 14px;

    text-decoration: initial;

    cursor: default;

}

















/* ANIMATE */

@keyframes wiggle {

    0%, 100% {

        transform: rotate(360deg);

    }

    50% {

        transform: rotate(358deg);

    }

}





/* PAGE DOSSIER */

.file-drop-area,

.file-drop-area.active {

    background-color: white;	

    border: 1px solid #A5A5A5;

}

.file-drop-area.active{	

	background-image: linear-gradient(90deg, #9000FF 50%, transparent 50%), 

						linear-gradient(90deg, #9000FF 50%, transparent 50%), 

						linear-gradient(0deg, #9000FF 50%, transparent 50%), 

						linear-gradient(0deg, #9000FF 50%, transparent 50%);    

}

.file-header{

	font-family: 'Gilroy-SemiBold' !important;

	color: #1E2336;

}

.file-body,

.file-drop-area.added .file-body{

	color: #5E5DA6;

}

.fille-btn{

	background: #9000FF;

}

.icon-add {

    background-image: url(/wp-content/themes/distingo/assets/img/download.svg);

}

.file-drop-area.added .fille-btn{

	background: #00BD97;

}

.file-drop-area.added .icon-add {

    background-image: url(/wp-content/themes/distingo/assets/img/check-white.svg);

}

.contrat .banner{

	border: 1px solid #A5A5A5;

	text-align: left;

	padding: 16px;

}



#qrcode .popup li{

	 margin-bottom: 12px;

}

#qrcode .popup li .icon-cercle,

#lien_reprise .popup li .icon-cercle{

	background-color: #9000FF;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    display: inline-block;

    text-align: center;

    margin-right: 12px;

    font-size: 14px;

    font-family: 'Gilroy-Bold';

    line-height: 28px;

    flex: none;   

}

.popup .d-title{

	color: #1E2336;

}



/* PAGE Merci */

.background-img{

	background-image: url(/wp-content/themes/distingo/assets/img/remerciement-plus.jpg);

	background-size: cover;

    background-repeat: no-repeat;

    background-position: center 15%;

	height: 300px;

	display: flex;

	align-items: center;	

}

.background-img h1{

	color: white;

	width: 100%;

	font-size: 42px;

    font-family: Gilroy-Bold;

    line-height: 54px;

    padding: 0;

	position: absolute;

    bottom: 15%;

}

.background-img span{

	position: relative;

    left: unset;

    bottom: unset;

	z-index: 1;

	padding: 0 5px;

}

.background-img:before{

	content: "";

	position: absolute;

	width: 100%;

	height: 100%;

	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);

}

.card-plus {

    background: linear-gradient(61.5deg, rgba(94, 93, 166, 0.15) 0%, rgba(210, 184, 230, 0.15) 100%);

    border: 1px solid rgba(94, 93, 166, 0.3);

    color: var(--cl-scampi) !important; 

}

.tooltip {

    line-height: 1.2;

}





@media (max-width: 990px) { 

	.mobile {

        display: block;

    }

	header .link-help{

		display: none !important;

		position: absolute;

		background-color: #1E2336;

		width: 100%;

		height: 20%;

		z-index: 99;

		left: 0;

		top: 74px;

		padding: 16px;		

	}

	header .link-help.active{

		display: flex !important;

		

	}

	.icon-menu {

		background-image: url(/wp-content/themes/distingo/assets/img/menu.svg);

		background-position: center;

		width: 30px;

		margin: 0;

		padding: 0;

	}

	header a.active .icon-menu{

		background-image: url(/wp-content/themes/distingo/assets/img/menu-close.svg);

	}

	.drawer-content input:not([type="radio"]):not([type="checkbox"]), 

	.drawer-content select, .drawer-content .select-dropdown, .drawer-content span.select-search-field {

		color: var(--cl-primary);

		border-bottom: 1px solid #A5A5A5;

	}

	.inner-presentation h1, 

	.inner-remerciement h1, 

	.background-img h1 {

		font-size: 24px;

        line-height: 1.2;

	}

		

	.presentation .feature .col p{

		width: 100%;

		border: none;

		font-size: 16px;

		padding: 8px 0;

	}

	.inner-presentation h2, 

	.h2-step {

		font-size: 20px;

		line-height: 24px;

        margin: 0;

		margin-bottom: 26px;		

	}

	.inner-presentation h2{

        margin: 26px 0;		

	}

	.h2-step.t-center{

		text-align: left;

	}

	.btn-presentation {

        margin: 16px auto;

    }

	#menu-header{

		padding: 0 20px;

	}

	#menu-header li span.bar{

		display: block;

	}

	#menu-header li{

		width: 20%;

	}

	#menu-header li.active.future{

		width: 60%;

	}

	.form-group select.hasvalue~label {

		z-index: 1;

		color: #5E5DA6;

		top: 0;

		font-size: 12px;

	}

	.form-group select.hasvalue~label:after{

		display: none; 

	}

	.popup {

		width: 100%;		

	}

	.popup .d-title{

		font-size: 20px;

		line-height: 1.2;

	}

	#menu-header li.active:first-child span:not(.bar){

		font-size: 0;		

	}

	#menu-header li.active:first-child span:not(.bar):before{

		content: 'Infos personnelles';

		font-size: 14px;		

	}

}