@font-face {
    font-family: 'ProximaNovaBold';
    src: url("../fonts/proximanova-bold-webfont.eot");
    src: url("../fonts/proximanova-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-bold-webfont.woff") format("woff"), url("../fonts/proximanova-bold-webfont.ttf") format("truetype"), url("../fonts/proximanova-bold-webfont.svg#ProximaNovaRgBold") format("svg");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'ProximaNovaRegular';
    src: url("../fonts/proximanova-regular-webfont.eot");
    src: url("../fonts/proximanova-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-regular-webfont.woff") format("woff"), url("../fonts/proximanova-regular-webfont.ttf") format("truetype"), url("../fonts/proximanova-regular-webfont.svg#ProximaNovaRgRegular") format("svg");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'Helvetica-Neue-Bold';
    src: local("Helvetica Neue");
    font-weight: 600;
}
@font-face {
    font-family: 'Helvetica-Bold';
    src: local("Helvetica");
    font-weight: 600;
}
@font-face {
    font-family: 'Arial-Bold';
    src: local("Arial");
    font-weight: 600;
}
body {
    font-family: 'ProximaNovaRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    background: #dcdcdc;
    margin: 0;
    padding: 0;
    background: url("/imgs/cs_bg_blue.jpg");
    background-size: 100%;
}
.progress-bar {
    height: 5px;
    background-image: url('/imgs/standard-elements/progress-blue.gif');
    animation: progressbar 0.3s linear infinite;
}
#login-progress { visibility: hidden; }

#login-progress.shown { visibility: visible; }

@keyframes progressbar {
    0%   { background-position: 0px 0px; }
    100% { background-position: -20px 0px;}
}
#container, /* login */
#expired-container, /* password expired/reset */
#locked-container { /* account locked */
    display: block;
    position: relative;
    top: calc(100vh / 7);
    margin: 0 auto;
    width: 250px;
}
#expired-container { top: calc(100vh / 10); }

#remember-container { /* remember me */
    margin-top: 30px;
    text-align: right;
}
#central-station-logo {
    width: 250px;
    height: 47px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 214px 47px;
    background-image: url('/imgs/central-station-blue@2x.png');
    margin-bottom: 30px;
}
input[type=text], input[type=password]  {
    display: block;
    width: 100%;
    height: 21px;
    border: 0;
    border-bottom: 2px solid rgb(153, 153, 153);
    font-size: 18px;
    background-color: transparent;
    margin: 20px 0 0;
    padding: 5px 0;
    color: rgba(0, 0, 0, 0.87);
}
label {
    display: block;
    position: relative;
    height: 27px;
    margin: -27px 0 0;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.54);
    z-index: -1;
    pointer-events: none; /* z-index: -1 should make this unnecessary, but better safe than sorry. */
    transition: transform 0.1s;
    transform-origin: left;
}
input[type='text']:focus, input[type='password']:focus  {
    border-color: #00406e;
    outline: none;
}
input:focus + label,
input.filled + label {
    transform: scale(.8) translateY(-27px);
    color: #00406e;
}
input.error { border-color: rgb(228, 39, 39); }

input.error + label { color: rgb(228, 39, 39); }

input[type='submit'] {
    padding: 8px 18px;
    font-family: 'ProximaNovaBold', Helvetica-Neue-Bold, Helvetica-Bold, Arial-Bold, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    background-color: white;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0 , 0.26);
}
input[type='submit']:disabled {
    background-color: rgba(0, 0, 0, 0.12);
    box-shadow: none;
}
input[type='submit']:active { background-color: rgb(204, 204, 204); }
input[type='submit']:not(:active) { transition: background-color 1s; }

#username { margin-top: 30px; }

#login-button, #submit-button {
    display: block;
    margin: 37px auto 15px;
}
.error-message,
.error-container {
    color: rgb(228, 39, 39);
}
ul { padding-left: 23px; }

.hidden { display: none; }
.hidden.shown { display: block; }

#running {
    display: none;
    width: 83px;
    height: 75px;
    position: absolute;
    bottom: 100px;
    left: -83px;
    background-image: url('/imgs/running.gif');
    background-size: 83px 75px;
    background-position: 0;
    background-repeat: no-repeat;
}
#running.waiting { background-image: url('/imgs/waiting.gif'); }

#gp-logo {
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 50px;
    text-align: center;
}
#gp-logo:before {
    content: '';
    display: inline-block;
    width: 400px;
    height: 60px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 400px 60px;
    background-image: url('/imgs/gp-logo-white-trans.png');
}
#match-error { visibility: hidden; }
#match-error.error { visibility: visible; }

#difference-error.error,
#match-error.error,
#char-length-error.error,
#uppercase-error.error,
#lowercase-error.error,
#number-error.error,
#sp-char-error.error {
    color: rgb(228, 39, 39);
}
#locked-container .error-container { font-size: 18px; }