html {
      font-size: 18px;
    }

    body {
      font-weight: 400;
      font-family: "Lato", "Helvetica Neue", arial, sans-serif;
      line-height: 1.666;
      -webkit-font-smoothing: antialiased;
      color: #5e6c76;
      margin: 0;
      padding: 10px 0 0 0;
    }



    small { color: #aaa; }
    h1,h2,h3,h4 { color: #404a50; font-weight: 800; font-size: 1.75em; line-height: 1.1; margin: 0 0 1.5rem 0; }
    h2 a { color: #cad1d5; border: none; }
    h2 a:hover { color: #fa0065; }
    a { color: #fa0065; font-weight: 700; transition-duration: .2s; text-decoration: none; border-bottom: 2px solid transparent; }
    a:hover { color: #22272a; border-color: #22272a; }
    p, ul, ol, pre { margin: 0 auto 1.5rem auto; }
    p code, li code {color: #000080; font-size: .9em; }
    pre { font-size: 14px; line-height: 2; }
    pre code { overflow: scroll; padding: 1em; border-radius: 4px; background: #f9fafb; color: #475359; }
    hr { height: 3px; background: #f0f2f3; border: none; margin: 3rem 0; border-radius: 3px; }
    td pre { margin: 0; }
    code { font-family: 'fira mono', monospace; }


    .header h1 {
      margin: 1rem 0 .5rem 0;
    }

 
    /* Example 2 (login form) */
    .login_form.modal {
      border-radius: 0;
      line-height: 18px;
      padding: 0;
      font-family: "Lucida Grande", Verdana, sans-serif;
    }

    .login_form h3 {
      margin: 0;
      padding: 10px;
      color: #fff;
      font-size: 14px;
      background: -moz-linear-gradient(top, #2e5764, #1e3d47);
      background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #1e3d47),color-stop(1, #2e5764));
    }

    .login_form.modal p { padding: 20px 30px; border-bottom: 1px solid #ddd; margin: 0;
      background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #eee),color-stop(1, #fff));
      overflow: hidden;
    }
    .login_form.modal p:last-child { border: none; }
    .login_form.modal p label { float: left; font-weight: bold; color: #333; font-size: 13px; width: 110px; line-height: 22px; }
    .login_form.modal p input[type="text"],
    .login_form.modal p input[type="password"] {
      font: normal 12px/18px "Lucida Grande", Verdana;
      padding: 3px;
      border: 1px solid #ddd;
      width: 200px;
    }


#pswd_info {
    position: absolute;
    bottom: -185px; /* Modal position */
    bottom: -185px\9; /* IE Specific */
    right: 55px;
    width: 250px;
    padding: 15px;
    background: #fefefe;
    font-size: .875em;
    border-radius: 15px;
    box-shadow: 0 1px 3px #ccc;
    border: 1px solid #ddd;
}
 
 #pswd_info h3 {
 margin:0 0 10px 0;
 padding:0;
 font-weight:normal;
}

    #pswd_info::before {
        content: "\25B2";
        position: absolute;
        top: -15px;
        left: 45%;
        font-size: 14px;
        line-height: 14px;
        color: #ddd;
        text-shadow: none;
        display: block;
    }

.invalid {
 background:url(/images/invalid.png) no-repeat 0 50%;
 padding-left:22px;
 line-height:24px;
 color:#ec3f41;
}
.valid {
 background:url(/images/valid.png) no-repeat 0 50%;
 padding-left:22px;
 line-height:24px;
 color:#3a7d34;
}

button {
 background: #57a9eb; /* Old browsers */
 background: -moz-linear-gradient(top, #57a9eb 0%, #3a76c4 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#57a9eb), color-stop(100%,#3a76c4)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* IE10+ */
 background: linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a9eb', endColorstr='#3a76c4',GradientType=0 ); /* IE6-9 */
 border:1px solid #326fa9;
 border-top-color:#3e80b1;
 border-bottom-color:#1e549d;
 color:#fff;
 text-shadow:0 1px 0 #1e3c5e;
 font-size:.875em;
 padding:8px 15px;
 width:150px;
 border-radius:20px;
 box-shadow:0 1px 0 #bbb, 0 1px 0 #9cccf3 inset;
}
button:active {
 background: #3a76c4; /* Old browsers */
 background: -moz-linear-gradient(top, #3a76c4 0%, #57a9eb 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a76c4), color-stop(100%,#57a9eb)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* IE10+ */
 background: linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a76c4', endColorstr='#57a9eb',GradientType=0 ); /* IE6-9 */
 box-shadow:none;
 text-shadow:0 -1px 0 #1e3c5e;
}
label {
 color:#555;
}
#container span {
 background:#f6f6f6;
 padding:3px 5px;
 display:block;
 border-radius:5px;
 margin-top:5px;
}

#pswd_info {
 display:none;
}