/*

MEMO

			fonce		inter		clair 		rgba 20%			suffixe
orange		fd6519		ffbf9f		ffe3d5		253,101,25,0.2		_pt
bleu		1f9df6		a2d6fa		d2ecfd		31,157,246,0.2		_md
vert		1fc96a		a9e6c4		d2f4e1		31,201,106,0.2		_pe

*/

/* 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; }


/* INIT */
@font-face {
    font-family: 'RobotoLight';
    src: url('../images/fonts/Roboto-Light-webfont.eot');
    src: url('../images/fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
        url('../images/fonts/Roboto-Light-webfont.woff') format('woff'),
        url('../images/fonts/Roboto-Light-webfont.ttf') format('truetype'),
        url('../images/fonts/Roboto-Light-webfont.svg#RobotoLight') 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:#505050;
    font-family: 'RobotoLight';
	font-size:14px;
	line-height:20px;
	font-weight:100;
}
h1{ font-size:18px; line-height:20px; }
h2{ font-size:20px; line-height:20px; }
h3{ font-size:18px; line-height:22px; }


/* SCREEN */
.fond{ position: fixed; width:100%; height:100%; background: #fff url('../images/fond-md-003.jpg') no-repeat top left; 
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.site { width:100%; height:100%; }
.header { width:100%; height:70px; padding:25px 0;}
.main { position:absolute; top:50%; left:50%; margin-left:-350px; width:600px; padding:5px 50px; background:#fff; background:rgba(255,255,255,0.8);border-radius: .35em;}
.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;}

.header .logo { margin-top:15px; float:left;}
.header .sepa { height:80px; margin-left:20px; float:left; padding-left:20px; border-left:1px solid #5867dd; border-color:rgba(31,157,246,0.2);}
.header .titre { margin-top:20px; height:20px; color:#505050;}
.header .sub_titre { margin-top:5px; height:20px; color:#5867dd;}

.img_simple.smartcard{height:260px; 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:#5867dd; }
a:hover { color:#505050; }
.saisie { float: left;	width: 350px;	height: 25px;	margin-bottom: 10px;	padding: 5px;	border:1px solid #d2ecfd;	border-color:rgba(31,157,246,0.4);}
.label   { float: left;	width: 150px;	text-align: left;	margin-left: 40px;	margin-top: 5px;}
#password, #login_retry { margin-bottom:40px; }
.submit .button {
	display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.6;
    border-radius: 0.25rem;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	color: #fff;
    background-color: #5867dd;
    border-color: #5867dd;
    color: #ffffff;
}

.retour { display: block; margin-top: 5px; }

.icone30_fermer {
	float:right;
	margin-top: -10px;	margin-right: -30px;
	width: 30px; height:30px;
	background: url('../images/icons-30x30px.png') no-repeat; 
	background-position: -30px 		-240px;     
	cursor:pointer;
}

input{
    height: calc(1.6em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.6;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    -webkit-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.hr-text {
    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    color: black;
    text-align: center;
    height: 1.5em;
    opacity: 1;
    font-weight: bold;
    font-size: 30px;
}

.hr-text:before {
  content: "";
  background: linear-gradient(to right, transparent, #818078, transparent);
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}

.hr-text:after {
  content: attr(data-content);
  position: relative;
  display: inline-block;
  color: black;
  padding: 0 0.5em;
  line-height: 1.5em;
  color: #818078;
  background-color: #fcfcfa;
}