:root {
	/* Colors */
	--color-primary: #0F2337;
	--color-dark:    #193755;
	--color-clear:   #EDEDED;

	--color-grey-1:  hsl(223, 16%, 92%);
	--color-pink:    hsl(346, 87%, var(--color-pink-light, 50%));
	--color-blue:    hsl(210, 100%, var(--color-blue-light, 60%));
	--color-green:   #196d7d;
	--color-orange:  #ec7d06;
	--color-purple:  #7c1ace;

	--color-dark-grey-1: #aaaaaa;
	--color-dark-pink:   #ac163e;
	--color-dark-blue:   #0c4ea9;
	--color-dark-green:  #196d7d;
	--color-dark-orange: #ec380f;
	--color-dark-purple: #7c1ace;

	/* Background */
	--bg-container:    #f2f4f9;
	--bg-default:      #ffffff;
	--bg-light-pink:   #fff3f6;
	--bg-light-blue:   #f0f7ff;
	--bg-light-green:  #e9f2f3;
	--bg-light-orange: #fff5ea;
	--bg-light-purple: #f8f0ff;
	--bg-linear-pink:   linear-gradient(180deg, hsl(350,100%,60%), hsl(350,80%,40%) 200%);
	--bg-linear-blue:   linear-gradient(180deg, hsl(210,100%,60%), hsl(210,100%,40%) 200%);
	--bg-linear-green:  linear-gradient(180deg, hsl(160,100%,40%), hsl(160,90%,30%) 200%);
	--bg-linear-orange: linear-gradient(180deg, hsl(40,100%,50%), hsl(40,100%,40%) 200%);
	--bg-linear-purple: linear-gradient(180deg, hsl(270,100%,50%), hsl(270,100%,30%) 200%);

	/* Border lines */
	--border-simple-color: var(--color-grey-1);
	--border-simple: 1px solid var(--border-simple-color);

	/* Marging */
	--margin-min: 0;
	--margin-md: 1rem;
	--margin-lg: 1.5rem;

	/* Radius */
	--radius-min: 0;
	--radius-xs: 4px;
	--radius-sm: .5rem;
	--radius-md: 1rem;
	--radius-lg: 2rem;
	--radius-xl: 2.5em;
	--radius-xxl: 3rem;
	--radius-max: 50%;

	/* Shadow */
	--shadow-sm: 0 -2px 8px -4px rgba(15, 35, 55, .08),0 8px 16px -8px rgba(15, 35, 55, .16);
	--neu-shadow-sm: inset -.25rem -.25rem 1rem rgba(255,255,255,.16), -1rem -1rem 3rem rgba(255,255,255,1), 1rem 1rem 3rem rgba(15,35,55,.16) ;
	--neu-shadow-hover-sm: inset -.125rem -.125rem .5rem rgba(255,255,255,.08), -.5rem -.5rem 1.5rem rgba(255,255,255,.48), .5rem .5rem 1.5rem rgba(15,35,55,.24) ;

	/* Buttons */
	--btn-radius: var(--radius-xs);

	/* Cards */
	--card-radius: var(--radius-md);
	--card-margin: var(--margin-md);

	/* Title */
	--title-size: 1.25rem;
	--title-color: #193755;
	--title-weight: bold;
	--title-font-family: 'Bebas Neue Pro SemiExp XBold';

	/* Listes */
	--liste-group-margin: .5rem;
	--liste-radius: var(--radius-xs);
	--liste-radius-top: var(--radius-xs) var(--radius-xs) 0 0;
	--liste-radius-bottom: 0 0 var(--radius-xs) var(--radius-xs);

	--txt: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif

}
.loginForm {
	position: relative;
	background: #FFF;
	width: 90%;
	max-width: 280px;
	min-height: 330px;
	margin: 2rem auto;
	padding: 1rem 1rem 2rem;
	-webkit-border-radius: 1rem;
	-moz-border-radius: 1rem;
	border-radius: 1rem;
	box-shadow: 0 -2px 8px -4px rgba(15, 35, 55, 0.08),0 8px 32px -8px rgba(15, 35, 55, 0.16);
	behavior: url("/js/PIE.htc");
}
.loginForm .forbidden {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	background: rgba(68, 68, 68, 0.7);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.loginForm .section_header { margin: 0; }
.loginForm .section_header h3 { text-align: center; font-size: 26px;  border: none; }
.loginForm .progress-container { margin-bottom: 50px; box-shadow: 0 1px 2px #CCC; border-radius: 4px; }
.loginForm .progress { margin: 0; height: 5px; }
.loginForm .subtitle { float: right; margin: 3px; font-size: 14px; color: #999; font-style: italic; }

.loginForm .error { color: #B40300; }
.loginForm .ajax-error { margin: -7px 0 15px 0; color: #B40300; line-height: 15px; }
.loginForm .help-block { font-size: 14px; margin-top: 5px; margin-bottom: 0px;}
.loginForm .control-group { margin-bottom: 10px; margin-top: 10px; }

.loginForm .userExists label.title { font-size: 18px; text-align: center; margin-bottom: 1.5rem; }
.loginForm .userExists .control-group.remember { margin-top: -5px; }
.loginForm .userExists .control-group.remember input { min-height: 10px; }
.loginForm .userExists .help-block { margin: -10px auto 10px; display: block; }
.loginForm .userExists .ajax-error { margin: -6px 0 6px; }
.loginForm .userExists .next { margin-top: 5px; }

.loginForm .forgetPass { text-align: center; margin-top: .5rem; margin-bottom: 2rem;}

.loginForm .add-on { font-size: 10px; width: 50px; }
.loginForm .add-on-code { width: 60px; }

.start input, .pass input { text-align: center; }

.contacts small { font-size: 11px; }
.contacts i.icon-hand-down {
	float: right;
	margin-right: 10px;
	margin-top: 5px;
}
.contacts .append.error {
	background: #FCBCBC;
}

.cgu .title {
	font-size: 18px;
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid #AAA;
}

.loginForm .alert {
	margin-bottom: 10px;
	padding: .75rem .5rem;
	font-size: 12px;
	line-height: 16px;
}
.newCode .titre {
	margin-bottom: 24px;
	text-align: center;
	font-size: 14px;
	color: #468847;
	font-weight: 600;
	text-transform: uppercase;
}
.newCode .top .consigne {
	font-variant: normal;
	text-align: justify;
	font-size: 12px;
}
.newCode input { text-align: center; }

ul {
	list-style: none;
	margin: 0;
}
.radio-horizontal {
	display: inline-block;
	margin: 0 0 10px 10px;
}
.radio-horizontal input {
	margin: 3px 5px;
	vertical-align: top;
}
.input-prepend.input-block-level {
	display: table;
	border-collapse: collapse;
	margin-bottom: 10px;
	/*min-height: 20px;*/
}
.input-prepend.input-block-level .add-on {
	/*display: table-cell;*/
	height: 20px;
}
.add-on.prepend { border-right: 0; }

.input-prepend.input-block-level > input {
/*	box-sizing: border-box;
	display: table-cell;
*/
	width: 75%;
	height: 30px;
	min-height: 20px;
}
.input-prepend.input-block-level > input.code {
	width: 65%;
	height: 20px;
}
.alert-block {
	padding: 20px;
	text-align: center;
}
.alert-block p {
	margin-top: 10px;
}

.next, .prev { margin-top: 10px; position: relative; }
.next > i {
	display: none !important;
	position: absolute;
	right: -17px;
	top: 7px;
	color: #555;
}
.next.loading > i {
	display: inline-block !important;
}

.loginForm[loader="10"]  .bar-success{ width: 10%; } 
.loginForm[loader="20"]  .bar-success{ width: 20%; } 
.loginForm[loader="30"]  .bar-success{ width: 30%; } 
.loginForm[loader="40"]  .bar-success{ width: 40%; } 
.loginForm[loader="50"]  .bar-success{ width: 50%; }
.loginForm[loader="60"]  .bar-success{ width: 60%; }
.loginForm[loader="70"]  .bar-success{ width: 70%; }
.loginForm[loader="80"]  .bar-success{ width: 80%; }
.loginForm[loader="90"]  .bar-success{ width: 90%; }
.loginForm[loader="100"] .bar-success{ width: 100%; }

@media screen and (min-width:576px){
	.loginForm { 
		padding: 2rem;
		border-radius: 1.5rem;
	 }
}