#LoginBox .groupbox.connexion, 
#LoginBox .groupbox.actions { display:none; }

#LoginBox .groupbox.actions { position:relative; margin-bottom: 10px; padding-bottom: 10px; }

#LoginBox .groupbox.actions div.decoEnCours { 
	position:absolute;
	top:0;
	left:0;
	-webkit-border-radius: .5rem .5rem 0px 0px;
	border-radius: .5rem .5rem 0px 0px;
	background:rgba(0, 0, 0, .1);
	width:100%;
	height:100%;
	text-align:center;
}

#LoginBox .groupbox.actions div.decoEnCours [role="status"] { 
	position:relative;
	top:calc(50% - 6em);
	width:6em;
	height:6em;
	color:#646669 !important;
}

#LoginBox .groupbox .form {
	display:grid;
	grid-gap:10px 0; 
	grid-template-columns: 100px auto;
	grid-template-areas: 
		"login_spanIdentifiant login_inputIdentifiant" 
		"login_spanMdp login_inputMdp"
		"login_btn login_btn"
		"login_msg login_msg"
		"login_inscription login_mdpPerdu";
	padding:10px;
	padding-top:6px;
}

#LoginBox .groupbox .form span#loginIdentifiant { grid-area: login_spanIdentifiant; align-self: center; }
#LoginBox .groupbox .form input#loginFormlogin { grid-area: login_inputIdentifiant; align-self: center; }

#LoginBox .groupbox .form span#loginMdp { grid-area: login_spanMdp; align-self: center; }
#LoginBox .groupbox .form input#loginFormPass { grid-area: login_inputMdp; align-self: center; }

#LoginBox .groupbox .form #btnValidationConnexion { grid-area: login_btn; align-self: center; position:relative; }

#LoginBox .groupbox .form #btnValidationConnexion #loadingConnexion { 
	display:none;
	position:absolute;
	top:16px;
	right:8px;
	width:18px;
	height:18px;
	border:0.2em solid currentColor;
	border-right-color: transparent;
	font-weight:normal;
}

#LoginBox .groupbox .form input#loginFormButton { 
	margin:10px 0 0; 
	padding:6px; 
	background: #293a4e;
	border: 0;
	-webkit-border-radius: .25rem;
	border-radius: .25rem;
	color: #fff;
	font-weight: bold;
	letter-spacing: 1px;
	text-shadow: 1px 1px 0 #000;
	-webkit-box-shadow: inset 0 0 10px 1px #17212d;
	box-shadow: inset 0 0 10px 1px #17212d;
	font-size:12px;
	width:100%;
}

#LoginBox .groupbox .form input#loginFormButton:hover { background: #374c64; }

#LoginBox .groupbox .form input#loginFormButton.actif { 
	background: #138d0f; 
	text-shadow: 1px 1px 0 #34742b;
	-webkit-box-shadow: inset 0 0 10px 1px #416b35;
	box-shadow: inset 0 0 10px 1px #416b35;		
}

#LoginBox .groupbox .form #loginFormMsg { grid-area: login_msg; text-align:center; align-self: center; margin:10px 0 5px; color:red; font-weight:bold; }

#LoginBox .groupbox .form #loginFormInscription { grid-area: login_inscription; text-align:left; }
#LoginBox .groupbox .form #loginMdpPerdu { grid-area: login_mdpPerdu; text-align:right; white-space:nowrap; }

#LoginBox .groupbox .form span { white-space:nowrap; font-weight:bold; text-align: left; }

#LoginBox .groupbox .form .form-control { width:100%; font-size:12px; height:auto; line-height:15px; padding:4px 6px; }

#LoginBox .groupbox .form .cat_content { color:#293a4e; }

#LoginBox .groupbox a {
	display:block;
	padding:1px 12px;
	color:#18222d;
	cursor:pointer;
}

#LoginBox .groupbox a:hover { text-decoration:underline; }	

#LoginBox.formSeul .groupbox:before, 
#LoginBox.formSeul .groupbox::before {  
	display:block;
	background: #293a4e;
	color:#fff;
	content: attr(data-title);
	text-align:center;
	font-weight:bold;
	font-size:11px;
	line-height:25px;
	text-transform:uppercase;
}

#LoginBox.formSeul { width:500px; margin:0 auto; }

#LoginBox.formSeul .groupbox { padding-top:0; border:1px solid #293a4e; margin:0; -webkit-border-radius: 0; border-radius: 0; }

#LoginBox.formSeul .groupbox .form { padding:30px; grid-gap: 15px 0; }

#LoginBox.formSeul .groupbox a:first-child { margin-top: 10px; }

#LoginBox .groupbox .form #loginFormInscription a, 
#LoginBox .groupbox .form #loginMdpPerdu a { display:inline; font-weight:bold; color:#293a4e; padding:0; }