html,
body {
padding: 0;
margin: 0;
font-family: "Roboto", Arial, Helvetica, sans-serif;
}

img {
max-width: 100%;
}

.login-wrapper, .logout-wrapper {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100vh;
color: #fff;
padding: 0 15px;
}

.login-container {
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}

.login-logo {
position: absolute;
padding: 2rem 0;
top: 2rem;
left: 5rem;
}

.login-form {
width: 100%;
padding-top: 1rem;
}

.login-form label,
.login-form btn,
.login-quote {
text-transform: uppercase;
}

.login-form label {
font-weight: 300;
display: block;
/* input label color 
	set on index file
color: #62788b; */
letter-spacing: 0.7rem;
margin-top: 0.3rem;
font-size: 1.2em;
}

.login-form input {
width: 100%;
}

.login-quote {
text-align: center;
font-weight: bold;
margin: 4rem 0;
/* Welcome message color
	set in index file
color: #D5D5D5;  */
}

.form-group {
margin-bottom: 3rem;
}
.form-group .form-control {
border-radius: 0;
height: 50px;
line-height: 50px;
}

.form-group .form-control:active,
.form-group .form-control:active {
border-color: #69b363;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
  0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
  0 0 8px rgba(102, 175, 233, 0.6);
}

.login-btn-group {
display: flex;
}
.login-btn-group > * {
margin-right: 1rem;
width: 100%;
}

.login-btn-group > :last-child {
margin-right: 0;
}

.login-btn {
max-width: 30%;
}
.reminder-btn {
	width:250px;
}

.btn-primary,
.btn-secondary {
border-radius: 0;
font-weight: bold;
text-transform: uppercase;
padding: 12px 12px;
font-size: 1.2em;
}

.btn-primary {
background-color: #69b363;
border-color: #69b363;
color: #fff;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary.active {
background: #8bc77e ;/*#54934f*/;
border-color: #8bc77e ;/*#54934f*/;
color: #fff;
}

.btn-secondary {
background-color: #62788b;
border-color: #62788b;
color: #fff;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary.active {
background: #75899c; /*#4e6273;*/
border-color: #75899c; /*#4e6273;*/
color: #fff;
}
#email, #username, #password, #user_group_id {
	border-radius: 0px  !important;
    -webkit-appearance: none;
}
#user_group_id  {
width: 100%;
}
.message-danger {
	color:#f72e2f !important;
	font-size:20px !important;
	font-weight:bold !important;
	text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.login-logo {
  position: absolute;
  padding: 2rem 0;
  top: 2rem;
  left: 5rem;
}

.login-form {
  max-width: 370px;
  margin-top: 5rem;
}

.login-btn-group > * {
  margin-right: 2rem;
}
}
.text-danger {
	color:#f62e31;
	font-size:16px;
	font-weight:bold;
	text-transform:uppercase;
}
.text-warning {
	color:#F90;
	font-size:16px;
	font-weight:bold;
	text-transform:uppercase;
}
.text-success {
	color:#69b363;
	font-size:16px;
	font-weight:bold;
	text-transform:uppercase;
}
#message {
	line-height:26px;
}
.login-box-body {
	font-size:18px;
	background-color: #62788b;
	border-color: #62788b;
	color: #fff;
}