/* index of signup
___________________________________*/


/*
index for login siginin */
.loginSignin-switcher-cta{
	margin:2rem 4rem 0 0; padding:0.75rem 1rem; top:0; right:0; display:block; position: absolute; z-index:10;
	font: 0.875rem/1.1em "Open Sans Semibold"; text-decoration: underline; color:var(--col-secondary-text); border-radius: var(--radius); opacity: 0.75; cursor:pointer;
	transition: background 0.25s, color 0.25s, opacity 0.25s;}
.loginSignin-switcher-cta:hover{
	color:var(--col-primary-text); text-decoration: none; background: var(--col-quaternary-text); opacity: 1;}

@media screen and (max-width: 728px){
	.loginSignin-switcher-cta{
		margin:1rem;}
}
	
/*
login page */

/* remind / lost password */
.note-password{
	margin: 0.25rem 0; padding: 0.25rem 0.5rem; display: inline-block; position: relative;
	font:italic 12px/1em "Open Sans Semibold", sans-serif; color: var(--col-secondary-text); border: none;}


/* btn pro connexion redirect */
#pro-part-connexion{
	margin: 20px 0; padding: 0; display: block; position: relative;
	text-align: center;}
#pro-part-connexion a{
	margin: 0 auto; padding: 5px 10px; width: auto; display: inline-block; position: relative;
	font: 12px/1.2em "Open Sans Light"; text-decoration: none; color:#5d6b7b; text-align: center; background: #FFF; border-radius:2px; border:1px solid #949EA9;}
#pro-part-connexion a:hover{
	border:1px solid #C4C4C4; background: #DCDADA;}

@keyframes proPartAnim{
	from { transform:translate3d(0,5px,0); opacity: 0; }
	to { transform:translate3d(0,0,0); opacity: 1; }}


	#customer-type-btn {
		font-size: 0;}
	#customer-type-btn label{
		margin: 0; padding: 0 28px; min-height: 44px; width: 49%; display: inline-block; position: relative; vertical-align: middle;
		background: #e3e3e3; border-radius: 2px; line-height: 44px; text-align: center; cursor: pointer;
		transition: background 0.35s;}
	#customer-type-btn label span{
		padding: 0; margin: 0; top:-2px; display: inline-block; position: relative; vertical-align: middle;
		font: 13px/1em "Open Sans Semibold"; color: #5d6b7b; text-align: center;}
	#customer-type-btn input{
		transform: scale(0,0); display: block; position: absolute;}
	#customer-type-btn label svg{
	padding: 0; margin: -10px 0 0 12px; top: 50%; left:0; display: inline-block; position: absolute;
	stroke:#5d6b7b; stroke-dasharray: 20px 20px; stroke-dashoffset: 20px;
	transform: rotate(-45deg); transition: all 0.35s;}

	#customer-type-btn label input[type=radio]{
		transform: scale(1,1);}
	#customer-type-btn input[type=radio]:checked + label{
		background: #5d6b7b;}
	#customer-type-btn input[type=radio]:checked + label span{
		color: #FFFFFF;}
	#customer-type-btn input[type=radio]:checked + label svg{
		stroke:#FFFFFF;	stroke-dasharray: 20px 20px; stroke-dashoffset: 0;
		transform: rotate(0deg);}

	#partner-code-btn{
		margin: 0 20px; padding: 10px 10px 10px 30px; display: inline-block; position: relative;
		background: none; border-radius: 2px; font: 14px/1.1em "Open Sans Light"; color: #5d6b7b; border:1px solid #949EA9; text-align: center; cursor: pointer;}
	#partner-code-btn svg{
		margin: -8px 0 0 12px; padding: 0; top:50%; left: 0; display: block; position: absolute;
		fill:none;stroke-linejoin:round;stroke:#5d6b7b;}
	#partner-code-btn:hover{
		border:1px solid #C4C4C4; background: #DCDADA;}

	#form_login .form-cta a{
		padding: 20px;}


	/* company info */
	span.login_factu{
		margin:0 0 10px; padding: 10px 20px; display: inline-block;
		font: 16px/1em "Open Sans Semibold"; color:#666; background:#EEE; border-radius: 2px;}
	#mdp{
		padding-right:150px;}
	#strength{
		margin: 0; padding: 0;  top:0; right:0; display: block; position: absolute; z-index: 10;}
	#lock-test{
		margin: 4px; padding: 0; top:0; right:0; width: 32px; height: 32px; display: block; position: absolute;}
	#lock-test-icon{
		margin: 0; padding: 0; display: block; position: absolute;}
	#label_strength{
		margin: 0; padding: 14px 46px 0 0; width: 145px; top:0; right: 0; display: block; position: absolute;
		font: 11px/1em "Open Sans Semibold"; color:#999; text-align: right;}
	#lock-test-label-1,
	#lock-test-label-2,
	#lock-test-label-3{
		display: none;}
	#strength #lock-test-icon{
		opacity: 0.5; stroke: #999; fill:none; stroke-width:1px; }
	#strength #lock-test-icon{
		opacity: 0.5; stroke: #999; fill:none; stroke-width:1px; }
	#strength.weak #lock-test-icon,
	#strength.weak #label_strength,
	#strength.medium #lock-test-icon,
	#strength.medium #label_strength,
	#strength.strong #lock-test-icon,
	#strength.strong #label_strength{
		opacity: 1; stroke: #43A528; fill:none; color:#43A528;}
	#strength.weak #lock-test-icon,
	#strength.weak #label_strength{
		stroke: #D34932; fill:none; color:#D34932;}
	#strength.medium #lock-test-icon,
	#strength.medium #label_strength{
		stroke: #DC8913; fill:none; color:#DC8913;}
	#strength.weak #lock-test-label-1{
		display: block; animation:lockeffect 0.35s; fill:#FFF;stroke:#D34932;}
	#strength.medium #lock-test-label-2{
		display: block; animation:lockeffect 0.35s; fill:#FFF;stroke:#DC8913;}
	#strength.strong #lock-test-label-2,
	#strength.strong #lock-test-label-3{
		display: block; animation:lockeffect 0.35s; fill:#FFF;stroke:#43A528;}

	@keyframes lockeffect{
		from {transform:translate3d(0,0,0);}
		33% {transform:translate3d(2px,0,0);}
		66% {transform:translate3d(-2px,0,0);}
	    to {transform:translate3d(0,0,0);}}

	.tooltip-legacy{
		margin:12px; top:0; right:0; display: block; position: absolute;}

	#delivery_address{
		margin: 10px 0;}

	.signup_cgv a{
		display: inline}

	/*bank info*/
	#intro-note{
		margin: 0 0 20px; padding: 10px 10px 10px 45px; display: block; position: relative;
		font: 16px/1.3em "Open Sans Regular"; color: #5d6b7b;}
	#intro-note i{
		margin: 10px; top:0; left:0; display: block; position: absolute;
		font-size: 22px; color:#5d6b7b;}

	/*Fancy CB design*/
	#cb-form-group{
		padding: 0; margin: 20px 0 30px; display: block; position: relative; z-index: 0;}
	#cb-note{
		padding: 15px; margin: 0; display: block; position: relative;
		font: 15px/1.2em "Open Sans Regular"; color: #999; text-align: center;}
	#cb-note i{
		margin: 0 10px 0 0; top:1px; display: inline-block; position: relative;
		font-size: 16px; color:#E25213;}
	#card-a,
	#card-b{
		margin: 0 auto; padding: 0; width: 390px; height: 250px; left: -60px; display: block; position: relative; z-index: 1; overflow: hidden;
		background: #5b9ec5; background: linear-gradient(45deg, rgba(91,158,197,1) 0%,rgba(138,195,226,1) 100%); border-bottom:1px solid rgba(0,0,0,0.05); border-radius: 14px; box-shadow: 0 2px 20px rgba(0,0,0,0.10);
		animation:cbA 0.5s 0.35s backwards;}
	#card-b{
		margin: 0 0 0 -135px; display: block; top:25px; left: 50%; position: absolute; z-index: 0;
		background: #c6ccce; box-shadow: none;
		animation:cbB 0.5s 0.35s backwards;}
		/*Face A | accepted card*/
		#card-a .el1{
			margin: 0; padding: 15px; display: block; position: relative;}
		#card-a .el1 img{
			margin: 0 15px 0 0; padding: 0; width: 60px; height: 40px; display: inline-block; position: relative; overflow: hidden;
			background: #FFF; border-radius: 4px; border:0 none;}
		/*Face A | card number*/
		#card-a .el2{
			margin: 0; padding: 10px 15px; display: block; position: relative;}
		/*Face A | expiration date*/
		#card-a .el3{
			margin: 0; padding: 10px 15px; display: block; position: relative;}
		/*Face B | black tape*/
		#card-b .el1{
			margin: 0; display: block; width: 100%; height: 50px; top:30px; left: 0; position: absolute; z-index: 0;
			background: #31363a;}
		#card-b .el2{
			margin: 0; padding: 10px; top:80px; display: block; width: 120px; position: relative; z-index: 0; float: right;}
		/*Fancy CB form*/
		#cb-form-group label{
			margin:0; padding: 0 0 10px; width: 100%; height: inherit; display: block; position: relative;
			font: 14px/1.2em "Open Sans Regular"; color: #FFF;}
		#cb-form-group input,
		#cb-form-group select{
			margin:0; padding: 10px; width: 100%; height: inherit; display: inline-block; position: relative;
			font:14px/1.2em "Open Sans Regular"; letter-spacing: 2px; color: #666; border:none; border-radius: 4px;}
		#cb-form-group select{
			margin:0 0 0 2%; padding: 8px 10px; width: 48%;}
		#cb-form-group select.el3-1{
			margin:0 2% 0 0;}
		#card-b .el2 label{
			font:14px/1.2em "Open Sans Regular"; color: #333;}
		/*Fancy CB Anim*/
		@keyframes cbA{
			from {transform:translate3d(60px,10px,0);}
		    to {transform:translate3d(0,0,0);}}
		@keyframes cbB{
			from {transform:translate3d(-60px,-15px,0);}
		    to {transform:translate3d(0,0,0);}}


/* Mobile style */

@media screen and (max-width: 768px){


	#pro-part-connexion {
		margin: 10px 0; /*display: block !important;*/ position: relative;
		background: transparent; box-shadow: none;}
	#pro-part-connexion::before,
	#pro-part-connexion::after{ display: none; }

	#customer-type-btn label {
		margin: 8px 0 !important;
		width:100%;
		display: block;}

	/*Fancy CB*/
	#cb-form-group{
		margin: 0;}
	#card-a, #card-b {
		margin:0 auto; width: 100%; max-width: 370px; height: inherit; top:inherit; left: inherit;
		border-radius: 10px 10px 0 0;
		animation: none;}
	#card-b{
		margin:0 auto; width: 100%; max-width: 370px; top:0; position: relative;
		border-radius: 0 0 10px 10px;}
	#card-a .el1{
		padding: 10px;
		text-align: center;}
	#card-a .el1 img {
	    margin: 5px 5px; width: 48px; height: 30px;}
	#card-b .el2{
    margin: 0; padding: 15px; top:inherit; width: 50%; position: relative; float: inherit;}
	#card-b .el1{
		display: none}
	#cb-note {
    padding: 15px 0 0;}
}

.autocomplete-suggestions,
.autocomplete-suggestion{
	margin:0; padding: 5px 10px !important;
	font-size: 15px;
}
.autocomplete-suggestions,
.autocomplete-suggestion{
	margin:0;

}