body {
    font-family: Arial,Helvetica,sans-serif;
}

h1 {
    font-size: 24px;
    padding-top: 5px;
    margin-top:100px;
    text-align:center;
}

#message{
    color:red
}
                
#form{		
    margin: 0px auto;
    max-width: 320px;
}

#login_container>form>div>div{
    clear:both;
    padding-top: 5px;
}

#login_container>form>div>div>div:first-child{
    float:left
}

#login_container>form>div>div>div:last-child{
    float:right
}

@media (max-width: 360px) {
            
    h1 {
        margin-top:50px;				
    }
}

.password_popover {
    margin-left: 15px;
    position: absolute !important;
    padding: 5px;
    -ms-border-radius: 3px;
    border-radius: 3px;
}

.passwordStrengthBar {
    background: #eeeeee;
    border: 0;
    height: 7px;
}

.passwordStrengthBar div {
    height: 7px;
    width: 0;
    margin: 10px 0px 10px 0px;
}

.passwordStrengthBar div.strong {
    background-color: #32cd32;
}

.passwordStrengthBar div.medium {
    background-color: #ffbb33;
}

.passwordStrengthBar div.weak {
    background-color: #ff8000;
}

.passwordStrengthBar div.useless {
    background-color: #cc0000;
}

.popover span.strong {
    color: #669900;
}

.popover span.medium {
    color: #FFA713;
}

.popover span.weak {
    color: #ff8000;
}

.popover span.useless {
    color: #cc0000;
}

#password_advice {
    width: 300px;
}