@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {background: #456;font-family: 'Open Sans', sans-serif;}

.outer {
    display: table;
    /* position: absolute; */
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.login {
    font-size: 16px;
    width: 400px;
    margin: 5% auto;
}
/* Reset top and bottom margins from certain elements */
.login-header,.login p { margin-top: 0;margin-bottom: 0;}
/* The triangle form is achieved by a CSS hack */
.login-triangle {width: 0;margin-right: auto;margin-left: auto;border: 12px solid transparent;border-bottom-color: #28d;}
.login-header {background: #28d;padding: 20px;font-size: 1.4em;font-weight: normal;text-align: center;text-transform: uppercase;color: #fff;}
.login-form {background: #ebebeb;padding: 12px; margin: 0;}
/* Every row inside .login-container is defined with p tags */
.login p {padding: 12px;}
.login input, #load {box-sizing: border-box;display: block;width: 100%;border-width: 1px;border-style: solid;padding: 16px;outline: 0;font-family: inherit;font-size: 0.95em;}
.login input[type="text"],.login input[type="password"] {background: #fff;border-color: #bbb;color: #555;}
/* Text fields' focus effect */
.login input[type="text"]:focus, .login input[type="password"]:focus {  border-color: #888;}
.login #load {background: #28d;border-color: transparent;color: #fff;cursor: pointer;}
.login #load:hover {background: #17c;}
/* Buttons' focus effect */
.login #load:focus {border-color: #05a;}



@media all and (max-width:450px){
.login {width: 95%;}
}
.auth-notification{
	margin: 0;
	padding: 0;
	list-style-type: none;
	/* font-size: 12px; */
}
.alert-notification{
	margin: 12px;
}