/*

MEMO
				Hexa 		RVB				CMJN
	orange		CC4E0F		204,78,15		14 79 100 4
	bleu		007db8		0,125,184		84 40 8 0		
	vert		2D8633		45,134,51		82 22 100 7

*/

/* RESET */
html, body {	width:100%; height:100%; }
html, body, p, section, article, div, a, footer, header, span, h1, h2, h3, h4, h5, h6 {	margin:0;	padding:0; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; }
input:focus, button { outline: none; -webkit-tap-highlight-color: transparent; }

/* INIT */
@font-face {
    font-family: 'RobotoCondensed';
    src: url('../images/fonts/Roboto-Condensed-webfont.eot');
    src: url('../images/fonts/Roboto-Condensed-webfont.eot?#iefix') format('embedded-opentype'),
        url('../images/fonts/Roboto-Condensed-webfont.woff') format('woff'),
        url('../images/fonts/Roboto-Condensed-webfont.ttf') format('truetype'),
        url('../images/fonts/Roboto-Condensed-webfont.svg#RobotoCondensed') format('svg');
    font-weight: normal;
    font-style: normal;
}
p, section, article, div, a, footer, header, span, h1, h2, h3, h4, h5, h6, input, textarea, label, select {
    color:#3c3c3c;
    font-family: 'RobotoCondensed';
	font-size:14px;
	line-height:20px;
	font-weight:100;
}
h1{ font-size:18px; line-height:20px; }
h2{ font-size:20px; line-height:20px; }

/* LA  */
h3{ font-size:14px; line-height:24px; margin-bottom: 40px; }
#etape { font-size:20px; margin-bottom:10px; }
#info_msg, .info.msg { clear: both; margin-top: 60px; font-size: 14px; }


/* SCREEN */
body{ background-color:#e9e8f2; }
.site { width:100%; height:100%; display:flex; align-items: center; justify-content: center; }

.main { width:640px; position:relative; /*height:620px;*/ border-radius:50px; padding:20px; background-color:#fff; text-align:center; -moz-box-shadow: 1px 2px 7px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 1px 2px 7px 0 rgba(0, 0, 0, 0.2); box-shadow: 1px 2px 7px 0 rgba(0, 0, 0, 0.2); }

.header { width:100%; }
.header .logo { width:370px; height:auto; }
.contenu { clear:both; }

.contenu, .footer, .copyright, .img_simple , .info, .info.msg , .submit , #loginform, #lost_password, #certificat_info, #certificat_renew  { width:100%; text-align:center; margin-bottom:20px; }
.contenu { margin-top:30px; margin-bottom:50px; }
.footer  { margin-bottom:10px; font-size: 13px;}
.footer, .copyright  { font-size: 13px; line-height:17px;}
.info  { font-size: 16px;clear:both;}

#loginform { padding: 0 30px;    width: calc( 100% - 60px ); }

#in_code, #loginform { position:relative; }

#validate {
	margin-top: 30px;
}

/* LA  */
#otp_ask { position:absolute; top:40px; right:30px; height: 37px; padding:0; font-family: robotoCondensed; border: 0 solid #007db8; border-radius: 0; background: #fff; color: #007db8; font-weight: bold; cursor:pointer; }

#totp_progress { position:absolute;display:none;width:220px;height:35px;top:0; right:0; background:#fff; border: 1px solid #ccc; border-radius: 0 20px 20px 0; overflow: hidden; }
#totp_sec{width:100%;text-align:center;color:#3c3c3c;line-height:35px;}
#totp_bar {position:absolute;width:120px;height:35px;background-color:#007db8;top:0px;opacity:0.5;}


#otp_choice { position:absolute; width:320px; height:220px; left:calc( 50% - 160px ); top:calc( 50% - 110px ); background-color:#fff; -moz-box-shadow: 1px 2px 7px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 1px 2px 7px 0 rgba(0, 0, 0, 0.2); box-shadow: 1px 2px 7px 0 rgba(0, 0, 0, 0.2); border-radius: 30px; }
#otp_choice p { border-radius: 30px 30px 0 0; height: 20px; padding: 10px; background:#007db8; color:#fff; font-size:18px; margin:0; padding:4px; text-align:center; }
#otp_choice img { background-color:#fff; padding:10px;cursor:pointer;}
#otp_choice img:hover{background-color:#ccc;padding:10px;}
#otp_choice img {
    float: right;
    margin-right: 70px;
    margin-left: -40px;
}
#otp_close {
    clear: both;
    margin-top: 20px;
}

.img_simple.smartcard{height:315px; background:url(../images/smartcard.jpg) no-repeat center center;}
.img_simple.disconnect{height:140px;}
.img_simple.connect{height:140px;}
.img_simple.ok{background-image: url("../images/ok.gif");background-position: center center;background-repeat: no-repeat;height:128px;}
.img_simple.otp{background-image: url("../images/otp.gif");background-position: center center;background-repeat: no-repeat;height:128px;}
.img_simple.error{background-image: url("../images/erreur.gif");background-position: center center;background-repeat: no-repeat;height:128px;}
.img_simple.maintenance{background-image: url("../images/maintenance.gif");background-position: center center;background-repeat: no-repeat;height:128px;}


/* ELEMENTS */
a {	text-decoration:none;	color:#007db8; font-weight:bold; }
a:hover {  text-decoration:underline; }
.saisie { float: left;	width: calc( 100% - 202px );	height: 25px;	margin-bottom: 10px;	padding: 5px 10px;	border:1px solid #ccc; border-radius:20px; }
.label   { float: left;	width: 180px;	text-align: left;	margin-top: 5px;}
.submit .button, #otp_choice .button { display: inline-block; width: 220px;    height: 42px; padding: 10px;   margin-bottom: 0; color: #007db8;  font-size: 14px; line-height: 20px; text-align:center; font-weight:bold;
    vertical-align: middle; border-radius: 20px; border: 2px solid #007db8; cursor: pointer; background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0) inset, 0 1px 2px transparent; text-shadow: 0 1px 1px rgba(255,255,255,0);
}
.submit .button:hover, #otp_choice .button:hover, button#otp_ask:hover { color: #fff;  background:#007db8; }
#otp_ask.button:hover { color: #007db8;  background:#fff; text-decoration:underline;}
.retour { display: block; margin-top: 5px; }
.faq { margin-bottom: 7px; display: block; }
.conseil { color:#777; }


/*login spécifique*/
.lost_password a {display:inline-block;}
#lost_password { 
    text-align: right;
	margin-bottom: 140px;
    margin-top: -110px;
}

/* LA  */
.lost_password.force8 a, .lost_password.force128 a { display: inline-block; width: 180px; }


@media screen and (max-width: 700px) {
	.label { width: 150px; }
	.saisie { width: calc( 100% - 172px ); }
	#loginform { padding: 0 10px; width: calc( 100% - 20px ); }
	#otp_ask { right: 10px; }
}
@media screen and (max-height: 700px) {
	.site { align-items:baseline; }
}