/*
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
*/
body { background: url('../img/bg-login.jpg') fixed center center; background-size: cover; min-height: 100vh; color: #666; padding: 20px; }

h1 { color: #666; margin: 10px 0px 30px 0px; text-transform: uppercase; font-size: 24px; text-align: center; position: relative; display: block;}
h1:after { content: ""; position: absolute; width: 40px; height: 3px; background: #1f3842; margin: auto; bottom: -5px; left: 50%; transform: translateX(-50%); }
a { color: #1f3842; } 
a:hover { text-decoration: underline; }

input[type="text"],
input[type="password"],
input[type="email"] { width: 100%; background: #fff; border: none; border: 1px solid #d8d8d8; display: block; margin: 0px; padding: 5px 10px; height: 30px; }
input[type="radio"] { margin-bottom: 10px; }
input:focus { outline: 0; border-color: #999; }

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset; }

label { text-align: left !important; font-size: 10px; margin: 0px; display: block; }
input[type="checkbox"] + label { display: inline; }

#login-container { display: table; min-height: 100vh; margin: auto; }
#login-page { display: table-cell; vertical-align: middle;  }
#login-panel { background: #fff; padding: 20px; }

#login-panel #login-logo { background: #1f3842; margin: -20px -20px 0px -20px; padding: 20px; text-align: center; }
#login-panel #login-logo img { width: 400px; margin: auto; }

.field { margin: 10px 0px; position: relative; }
.field-error { border-color: #DA347E; }
.field-error input { border-color: #DA347E; }
.field-error label { color: #DA347E; }
.error-message { font-size: 10px; font-weight: bold; text-align: right; color: #DA347E; }

i.fa-inputbox { position: absolute; top: 0px; left: 0px; height: 30px; width: 30px; padding: 7px; background: #1f3842; color: #fff; display: block; text-align: center; }
i.fa-inputbox + input { padding-left: 40px;  }

.input-group-title { color: #1f3842; font-weight: bold; position: relative; text-align: left; margin: 10px 0px; }
.input-group-title .number { background: #1f3842; color: #fff; width: 28px; height: 28px; border-radius: 28px; border: 3px solid #fff; position: absolute; left: -34px; top: -5px; text-align: center; }
.input-group { background: #f6f6f6; width: 100%; padding: 10px 20px; margin-bottom: 20px; }

.btn { border-radius: 0px; background: #1f3842; color: #fff; border: 0px; }
.btn:hover { background: #17A697; }
.btn .fa { margin-right: 10px; }

.alert .fa { padding-right: 10px; }

#login-error { border: 1px solid #d9534f; color: #d9534f; padding: 10px; background: #f4e6e6; margin-bottom: 20px; }
#login-error i.fa { margin-right: 10px; }
#login-link-section { display: block; font-size: 12px; height: 30px; margin-top: 10px; }
#login-legal-section { font-size: 14px; margin-bottom: 30px; }

#login-troubleshoot { margin: 0px; padding: 0px; }
#login-troubleshoot li { list-style: none; display: block; background: none; border: 1px solid #f5821f; padding: 0px; margin-bottom: 10px; transition: 0.5s all ease; }
#login-troubleshoot li a { padding: 10px 20px; text-decoration: none; display: block; color: #666; }
#login-troubleshoot li span { display: block; padding: 0px; margin: 0px; text-shadow: none; }
#login-troubleshoot li:hover { background: rgba(245,130,32,.2); }
#login-troubleshoot li .title { font-weight: bold; }
#login-troubleshoot li .subtitle { color: #999; }