body {
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: #515357;
}

#loginPage {
    font-size: 14px;
    color: #515357;
}

#loginPage h1 {
    font-family: Oswald, sans-serif;
    margin: 0;
    padding: 0.4em 0 1em 0;
    font-size: 2em;
    line-height: inherit;
}

#loginPage a, #loginPage a:link, #loginPage a:visited, #loginPage a:hover, #loginPage a:active {
    color: inherit;
    text-decoration: inherit;
    font-weight: inherit;
}

#loginPage section.info {
    width: 22.8em;
    text-align: left;
    display: inline-block;
}

#loginPage section.info p {
    font-size: 1em;
}

#loginPage section.error {
    width: 22.8em;
    margin: 0 0 0.5em 0;
    text-align: center;
    display: inline-block;
    background-color: #D50037;
    color: #fff;
}

#loginPage section.error p {
    margin: 12px 12px;
    color: #fff;
    font-size: 1em;
}

#loginPage fieldset {
    border: none;
    margin: 1em 0;
}

#loginPage fieldset.credentials input {
    width: 17em;
    border: 0;
    font-size: 1.2em;
    padding: .8em 1em;
    color: #444342;
    background-color: #e9e8e6;
}

#loginPage fieldset.credentials input:focus, #loginPage fieldset.credentials input:hover {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline:none;
    background-color: #efeeed;
    color: #444342;
}

#loginPage input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px #e9e8e6 inset !important;
    -webkit-text-fill-color: #444342 !important;
    background-color: #e9e8e6;
}

#loginPage input:-webkit-autofill:hover,
#loginPage input:-webkit-autofill:focus,
#loginPage input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 100px #efeeed inset !important;
    -webkit-text-fill-color: #444342 !important;
    background-color: #efeeed;
    color: #444342;
}

#loginPage ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #B1B1B1;
    opacity: 1; /* Firefox */
}

#loginPage :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #B1B1B1;
}

#loginPage ::-ms-input-placeholder { /* Microsoft Edge */
    color: #B1B1B1;
}

#loginPage fieldset.controls {
    margin: 2.5em 0 1em 0;
}

#loginPage fieldset.controls input, #loginPage fieldset.controls a {
    display: inline-block;
    width: 19em;
    border: 0;
    background-color: #7D7AE8;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.2em;
    padding: 0.8em 0;
}

#loginPage fieldset.controls input:hover, #loginPage fieldset.controls a:hover {
    background-color: #5041B9;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.07), 0 6px 6px rgba(0,0,0,0.11);
    -moz-box-shadow: 0 10px 20px rgba(0,0,0,0.07), 0 6px 6px rgba(0,0,0,0.11);
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.07), 0 6px 6px rgba(0,0,0,0.11);
}

#loginPage .reset {
    margin: 1em 0 0 0;
}

#loginPage .reset a {
    display: inline-block;

}

#loginPage .reset a:hover {
    color: #252322;
    transition: all 0.3s ease;
}

#loginPage {
    background: rgba(100, 100, 100, 1);
    background: -moz-linear-gradient(left, rgba(100, 100, 100, 1) 0%, rgba(100, 100, 100, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(100, 100, 100, 1)), color-stop(100%, rgba(100, 100, 100, 1)));
    background: -webkit-linear-gradient(left, rgba(100, 100, 100, 1) 0%, rgba(100, 100, 100, 1) 100%);
    background: -o-linear-gradient(left, rgba(100, 100, 100, 1) 0%, rgba(100, 100, 100, 1) 100%);
    background: -ms-linear-gradient(left, rgba(100, 100, 100, 1) 0%, rgba(100, 100, 100, 1) 100%);
    background: linear-gradient(to right, rgba(100, 100, 100, 1) 0%, rgba(100, 100, 100, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c8c8', endColorstr='#98989a', GradientType=1 );
}


#loginPage #container {
    margin: 5% auto 0 auto;
    width: 420px;
    text-align: center;
    background: #fff;
    padding: 32px 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    -moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

#loginPage #login {
    margin: 0 0 0 0;
    display: block;
}

#loginPage header {
    padding: 0 0 4px 0;
}

#loginPage #copyright {
    font-size: 0.8em;
    color: #fff;
    text-align: center;
    padding-top: 1.5em;
}