html { min-height:100%; background:url(../img/user/background_img.jpg) bottom right no-repeat;}

div#index_top { position:relative; width:100%; margin:0 auto; padding:0; text-align:center; background:rgba(255,255,255,0.5);}
div#index_top img { position:relative; width:90%; max-width:500px; margin:20px auto; padding:0; }

div#index_middle { position:relative; width:100%; margin:0 auto; padding:0;}

div#connexion { position:relative; width:90%; margin:30px auto; padding: 35px 45px; max-width:500px; border-radius:0.8em; background:rgba(96,189,162,0.8); }

div#connexion_title { position:relative; width:100%; font-size:2em; font-weight:bold; color:#FFF; margin:0 auto 20px auto;}


div#connexion_first {position:relative; width:90%; max-width:500px; margin:20px auto; padding:0;}

div#connexion_first a {display:table; width:100%; border-radius:0.5em; padding:15px 20px; font-size:1.6em; color:#FFF; background:#ed695c; text-decoration:none; text-align:center;}

div#connexion_first a:hover {background:#cc5549;}


p.retour_acces {position:relative; margin:10px auto 0 auto; width:100%;}

p.retour_acces a {display:table; width:auto; margin:0 auto; color:#FFF; text-decoration:none; font-size:1em;}

p.retour_acces a:hover {text-decoration:underline;}


.profil {display:none;}


/************ FORMULAIRE D'IDENTIFICATION ****************/
.acces_frm {
	width:100%;
	margin:0;
	overflow:hidden;
}
.login_input {
	padding:10px 20px;
	border:1px solid #60bda2;
	/*width:200px;*/
	position:relative;
	font-size:0.9em;
	margin:0 0 10px 0;
	border-radius:0.5em;
}
.login_encart {background:rgba(96,189,162,1);}
.login_input input {
	border:0px; 
	width:100%;
	font-style:italic;
}
.login_input input:focus-visible {border:0;outline:0;}
.login_input input:-internal-autofill-selected { /*background-color:#8b2077 !important; background-image:none !important;color-scheme: dark;*/ -webkit-box-shadow: 0 0 0px 1000px #000 inset; box-shadow: none;  transition: background-color 5000s ease-in-out 0s;  -webkit-text-fill-color: white;}
.login_identifiant {
	width:100%;
}

.bouton_valider {
	width:100%;
	background:#000;
	color:#FFF;
	font-size:1.6em;
	cursor:pointer;	
	margin:20px auto 0 auto;
	padding:10px 0;
	border:0;
	border-radius:0.2em;
	display: block;
	text-align: center;
}
.bouton_valider:hover {
	background:#00a9a0;
}

a.bouton_valider { text-decoration:none;}

.login_erreur {padding:0 0 10px 0;}
p.erreur {
	font-size:1em;
	color:#e20000;
	margin:3px 0;
	padding:5px 5px 5px 30px;
	background:#ffc0c0 url(../img/administration/error.png) center left no-repeat;
	border-radius:0.3em;
	width:auto;
	display:table;
}





/***************************************************/
/* FORMULAIRE APPARENCE */
/***************************************************/

.ligne {box-sizing:border-box;position:relative; font-size:14px;}

/* aspect des valeurs des champs */
.frm_input {
	box-sizing:border-box;
    /*
    background-color: #fff;
    background-image: none;
	*/
	background:rgba(96,189,162,1);
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #FFF;
    display: block;
    font-size: 1.5em;
    /*height: 37px;*/
    line-height: 1.42857;
    padding: 6px 2px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}
.frm_input {
    box-shadow:none;
}
.frm_input.frm_input_in {
	min-height: 50px;
    padding-bottom: 5px;
    padding-top: 25px;
}

/* aspect du champ obligatoire */
.frm_input.frm_input_in.required + label::after {
	color: #eb5d5e;
    content: "*";
    display: block;
    font-family: Arial,sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.1;
    position: absolute;
    right: -10px;
    top: 0;
}

/* aspect du label */
.frm_input.frm_input_in + label {
    color: #FFF;
    font-size: 1em;
    margin-left: 0;
    position: absolute;
    top: 7px;
    /*z-index: 1000;*/
}
label {
    display: inline-block;
    /*font-weight: bold;*/
    margin-bottom: 5px;
    max-width: 100%;
}
/* aspect du label lors du clic dans le champs */
.frm_input.frm_input_in.required:focus + label {
    color: #ff6600;
}


.frm_ligne50 {
    width: 49%;
}

.frm_ligne25 {
    width: 24%;
}
.frm_ligne33 {
    width: 32%;
}
.frm_ligne75 {
    width: 74%;
}
.frm_ligne_left {float:left;margin:0 1% 8px 0;}
.frm_ligne_right {float:right;margin:0 0 8px 1%;}

.frm_ligne100 {width: 100%; margin:0 0 8px 0;}

.ligne input:-webkit-autofill {background-color:#c7e8ff !important;}




/* PREMIERE CONNEXION */

div#connexion.premiere_connexion {background:rgba(237,105,92,0.8);}
div#connexion.premiere_connexion .login_input {border:1px solid #ed695c;}
div#connexion.premiere_connexion .login_encart, div#connexion.premiere_connexion .frm_input {background:rgba(237,105,92,1);}
div#connexion.premiere_connexion .bouton_valider:hover {background:#60bda2;}

/* AIDE CONNEXION */
div#connexion.connexion_aide {background:rgba(0,169,160,0.8);}
div#connexion.connexion_aide .login_input {border:1px solid #009b92;}
div#connexion.connexion_aide .login_encart, div#connexion.connexion_aide .frm_input {background:rgba(0,169,160,1);}
div#connexion.connexion_aide .bouton_valider:hover {background:#a8228e;}


@media screen and (max-width : 850px) {
	
	
}
@media screen and (max-width : 450px) {
	div#connexion {padding: 35px 20px;}
	
	div#connexion_title {font-size: 1.6em;}
	.bouton_valider {font-size: 1.4em;}
	
}