@font-face {
  font-family: 'password';
  font-style: normal;
  font-weight: 400;
  src: local('password'), url(/ressources/password.woff) format('woff');
}


html,body {
    width:100%;
    height:100%;
    background:linear-gradient(gray,lightgray) no-repeat ;
    background-attachment:fixed;
    font-family:monospace;
    font-size:1em;
}

h1 {
    text-align:center;
    /*box-shadow:2px 2px 8px black;*/
    /*background:linear-gradient( blue, deepskyblue);*/
    background: ;
    color:white;
    text-shadow: 0px 0px 1px rgba(0,0,0,0.5); 
    margin-bottom:0;
}

article {
    max-width:800px;
    margin:auto;
    background: deepskyblue;
    text-align:center;
    min-height:100%
}
.select_user select{
    width:40%;
}
.select_user, .master{
margin:1em;
}

input,select {border:none;padding:.5em;border-radius:3px;height:25px;}

.data table{
    table-layout: inherit;
}

.data table td {
position:relative;
border:none;
}
.data table th {

}

.data table td .show_password{
 font-family: password;  
    padding-right:2em;
}
.data table td .show_password.affichable{
 font-family: monospace ;
}

.show_password + .unmask {  
      position:absolute;  
      margin-left:-2em;
      background: rgba(255,255,255,0);
     
}  

td.tools{
    width:40px;
}

td.tools input {
    font-size:.6em;
    padding:2px;
    margin:0 0 1px 0;
    display:block;
    height:12px;
}

input:hover, select:hover{
    background:black;
    color:white;
    transition:0.5s;
}
.show_password + .unmask:hover {
    color:black;
}


.tool {
    margin:0.5em;

}

.error {
    text-align:center;
    color:red;
    font-weight:bold;
    font-size:xx-large;
}


#scorebarBorder {
    background: #333;
    border: 1px #000 solid;
    height: 16px;
    margin-bottom: 2px;
    margin-left:auto;
    margin-right:auto;
    width: 100px;
}

#score {
    color: rgb(0, 0, 0);
    font-size: 85%;
    position: absolute;
    text-align: center;
    width: 100px;
    z-index: 10;
    font-weight:bold;
}

#scorebar {
    background-image: url(/ressources/bg_strength_gradient.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 100px;
    z-index: 0;
}