* {
  box-sizing: border-box;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html, body {
  background-color:#f5f5f5;
  margin:0;
  padding:0;
}

/* Bannière DiabAccess */
.da-banner {
  display: block;
  position: relative;
  width: 100%;
  height: 50px;
  background-color: #3c8dbc;
}

.da-banner > .da-banner-logo {
  display: block;
  height: 50px;
  margin-left: 10px;
}

.da-banner > .da-banner-logo > img {
  height: inherit;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

@media (min-width: 992px) {
  .container {
      width: 970px;
  }
}

@media (min-width: 768px) {
  .container {
      width: 750px;
  }
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.col-full {
    width: 100%;
    text-align: center;
}


.h1 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

.da-retry {
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
}

.info {
    margin-bottom: 15px;
}

.info .label {
    width: 20%;
    float: left;
    margin-top: 6px;
}

.info input {
    display: block;
    width: 80%;
    height: 34px;
    padding: 6px 12px;
    margin: 0;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    border-color: #d2d6de;
    cursor:text;
}

.info input:focus {
    border-color: #3c8dbc;
    box-shadow: none;
    outline: 0;
}

.submit input {
    border-radius: 0;
    box-shadow: none;
    border-width: 1px;
    background-color: #3c8dbc;
    border-color: #367fa9;
    border: 1px solid transparent;
    display: block;
    color: #fff;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.

/*
*{font-family: "Segoe UI";}
.header{background-color:#20BFD5;top:0;position:absolute;height:4em}
.site{position:absolute;width:93%;margin-top:0;height:35em;}
.contenu{margin:0.5em 0.5em 0 22%;text-align:center;overflow: auto;height: 43em; width: 63%;}
#certificat_info{bottom:6em;left:0;padding:0;position:absolute;width:100%;text-align:center;}
#certificat_renew{ bottom:4.8em;left:0;position:absolute;width:100%;text-align:center;}
.copyright{font-size:0.7em;height:4em;text-align:center;position:absolute;bottom:0em;width:100%;background-color:#54CEDF;color:white}
.footer {bottom:4.5em;font-size:0.7em;position:absolute;text-align:center;width:100%;}
.title{margin-left:6.5%;}
.hidden{opacity:0;}
.continue{margin:6% 0 0 6%;}
.img_simple{margin:6% 0 2% 6%;}
.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;}


.menu{margin:2em 0 0 10.5%;}
.menu_item{border:0.1em solid #000000;float:left;height:9.5em;margin:0.5em;position: relative;width: 10em;}
.menu_item:hover{cursor:pointer;border:0.1em solid #00ff00;}
.menu_item_g.m1,.menu_item.m1{background-image: url("../images/tiers.gif");background-position: center center;background-repeat: no-repeat;}
.menu_item_g.m2,.menu_item.m2{background-image: url("../images/cps.gif");background-position: center center;background-repeat: no-repeat;}
.menu_item_g.m3,.menu_item.m3{background-image: url("../images/cp.gif");background-position: center center;background-repeat: no-repeat;}
.menu_item_g.m4,.menu_item.m4{background-image: url("../images/nominatif.gif");background-position: center center;background-repeat: no-repeat;}
.menu_item_g.m5,.menu_item.m5{background-image: url("../images/collectif.gif");background-position: center center;background-repeat: no-repeat;}
.menu_item_g.m6,.menu_item.m6{background-image: url("../images/automate.gif");background-position: center center;background-repeat: no-repeat;}
.menu_item_g.m7,.menu_item.m7{background-image: url("../images/anonymous.gif");background-position: center center;background-repeat: no-repeat;}
.menu_item_g.m8,.menu_item.m8{background-image: url("../images/contrappel.gif");background-position: center center;background-repeat: no-repeat;}
.menu_item_g.m9,.menu_item.m9{background-image: url("../images/simple.gif");background-position: center center;background-repeat: no-repeat;}


.info{padding:2em 0.7em 0.4em 7%;text-align:center;width:auto;height:2em;top:0.5em;position:relative}
.info.msg{color:#FF6666;font-style:italic;padding-top:4px;}
label, select, button ,input{vertical-align:middle;}
.label{left:8em;min-width:11em;font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif}
.submit{padding:0.7em 0 ;width:100%;left:2em;position:absolute;bottom:0em;}
.header-login{padding:2% 0 0 6%;}
.content-form {height:52%;}
.content-form input[type=text], .content-form input[type=password] {width:25em;}
.button{border-style:none;margin:-4% 0 0 6%;background: #34d947;
  background-image: -webkit-linear-gradient(top, #34d947, #2bb834);
  background-image: -moz-linear-gradient(top, #34d947, #2bb834);
  background-image: -ms-linear-gradient(top, #34d947, #2bb834);
  background-image: -o-linear-gradient(top, #34d947, #2bb834);
  background-image: linear-gradient(to bottom, #34d947, #2bb834);
  font-family: Arial;
  color: #ffffff;
  font-size: 18px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.button:hover {
  background: #34d947;
  background-image: -webkit-linear-gradient(top, #34d947, #2bb834);
  background-image: -moz-linear-gradient(top, #34d947, #2bb834);
  background-image: -ms-linear-gradient(top, #34d947, #2bb834);
  background-image: -o-linear-gradient(top, #34d947, #2bb834);
  background-image: linear-gradient(to bottom, #34d947, #2bb834);
  text-decoration: none;
}


.keyboard{background-color:#ffffff;border-left:0.07em solid #eeeeee;border-top: 0.07em solid #eeeeee;border-right:0.07em solid #aaaaaa;border-bottom:0.07em solid #aaaaaa;width:15em;padding:0.5em;float:left;margin-left:19em;}
.bottom{background-color:#ffffff;margin:0 auto;padding-top:1em;float:left;width:100%;}
.screen{ background-color: aliceblue;padding-top:0.4em;;padding-bottom:0.5em;border: 0.1em solid #aaaaaa;height:3.5em;text-align:center;}
.scr_consigne {text-align:center;font-family:arial;font-size:0.8em;color:#000000;}
.pave {padding-top:0.5em;float:left;padding-left:3em;}
.line {float:left;}
.key{margin: 0.1em;padding: 0.6em;width: 1.5em;font-weight: bold;border-radius: 10px 10px 10px 10px;float:left;}
.key.vide{border:0.07em solid #ADB9C0;color:#cccccc}
.key.active{text-align: center;border:0.07em solid #7F7F7F;color: #7F7F7F;background-color: #eeeeee;}
.key.unactive{text-align: center;border:0.07em solid #adb9c0;background:#eeeeee;color:#cccccc;cursor:default;}
.key.active:hover {border-left:0.07em solid #eeeeee;border-top: 0.07em solid #eeeeee;border-right:0.07em solid #aaaaaa;border-bottom:0.07em solid #aaaaaa;background:#dddddd;color:#000000;cursor:pointer;}
#codepin{color:#000000;font-size:2em;width:2.5em;background-color:#f6f6f6;border-style:none;width:98%;text-align:center;}

*/