* {
	box-sizing: border-box;
}
html, body {
    padding: 0;
    margin: 0;
	height: 100%;
    background: white;
}

body {
	width: 100%;
    font-size: 14px;
    padding: 0;
    margin: 0;
}
.content-wrapper {
	position: relative;
	float: left;
	width: 100%;
}
.content {
	position: relative;
	margin: 0 auto;
	max-width: 1200px;
	min-height: 0;
}

#main_Login {
	position: absolute;
	width: 100%;
	height: 460px;
	top: 50%;
	left: 0;
	margin-top: -250px;
}
#login_Wrapper {
	max-width: 750px;
    margin: auto;
	padding: 30px;
	height: 460px;
	border-radius: 2px;
}

.logo_Wrapper {
	float: left;
	width: 60%;
	text-align: center;
}

.logo_Wrapper .logo {
    float: none;
	width: 90%;
	max-width: 231px;
	height: auto;
}
.logo_Wrapper h1 {
	float: left;
	margin-top: 20px;
    width: 100%;
    font-size: 2.5em;
    text-align: center;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
}

.login {
	float: left;
	width: 40%;
	font-family: 'Raleway', sans-serif;
	font-weight: 500;
	text-align: center;
}

.login form div,
.login form input {
	float: left;
	clear: left;
	width: 100%;
	padding: 5px 10px;
	font-size: 1.25em;
	font-family: 'Raleway', sans-serif;
	font-weight:400 !important;
	text-align: center;
	color: #777;
}

.login form input {
	padding: 5px 10px;
	margin-bottom: 10px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: 1.25em;
	border-radius: 3px;
	border: none;
	color: #777;
	background-color: #eee !important;
}

.remember-me label{
	font-size: .85em;
	font-weight: 500;
}
.login form input[type="checkbox"]{
	width: auto;
	display: inline-block;
	float: none;
	margin: 0;
	margin-right: 10px;
	padding: 0;
}
.login a.btn_submit,
a#btn_submit_reset_password_form {
	float: left;
	clear: left;
	width: 100%;
	margin: 20px 0;
	padding: 10px 0px;
	color:#fff;
	font-size: 1.25em;
	text-align: center;
	font-family: 'Raleway', sans-serif !important;
	font-weight: 500 !important;
	background:#5294b3;
	border-radius: 3px;
}

.login a.btn_submit:hover {
	background: #000;
}

.content-wrapper#firma_login_Wrapper{
	display: inline-block;
	padding: 60px 0;
}

a.firma_login {
	display: inline-block;
	width: 25px;
	margin: 0 auto;
	opacity: .25;
}
a.firma_login:hover{
	opacity: 1;
}
a.firma_login img {
	width: 100%;
}

/*!  */
/*! --- ROLE SELECT --- */

#select-wrapper {
    margin-top: 40px;
    max-width: 420px;
}
#select {
    -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2);

}
#select h1 {
    margin-top: 10px;
    padding-left: 30px;
    font-size: 1.5em;
    font-family: 'Raleway', sans-serif !important;
	font-weight: 500 !important;
    text-align: center;
}

#select .logo {
    float: none;
    width: 300px;
}

#select .avatar {
/*     float: left; */
    display: inline-block;
    margin: 0 20px;
    width: 75px;
    vertical-align: middle;
    border-radius: 100%;
    overflow: hidden;
}

#select .avatar img {
    float: left;
    width: 100%;
}
#select .user-info {
/*     float: left; */
    display: inline-block;
    vertical-align: middle;
    font-size: 1.25em;
    text-align: left;
    font-family: 'Raleway', sans-serif !important;
    line-height: 110px;
}
#roleSelect {
    float: left;
    width: 100%;
}
#roleSelect > li {
    float: left;
    clear: left;
    width: 100%;
}
#roleSelect > li > a {
    float: left;
    width: 100%;
    padding: 20px 30px;
    border-bottom: solid 1px #ddd;
    font-size: 1.25em;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 300;
    text-align: left;
}

#roleSelect > li > a:hover {
    background: #5294b3;
    color: #fff;
}

#roleSelect > li:first-child > a {
    border-top: solid 1px #ddd;
}
#roleSelect > li > a > i.fa {
    float: right;
    margin-right: 0;
    margin-top: 3px;
    font-size: 1.15em;
}

.institutionSubMenu {
	display: none;
	position: absolute;
	min-width: 270px;
	left: 100%;
	background: white;
	border-radius: 3px 0 3px 3px;
	overflow: hidden;
}
.institutionSubMenu > li {
	position: relative;
	float: left;
	width: 100%;
	border-bottom: solid 1px #ddd;
}
.institutionSubMenu > li:last-child {
	border-bottom: none;
}

.institutionSubMenu > li > a {
	position: relative;
	float: left;
	width: 100%;
	padding: 4px 6px 4px 12px;
	background: #999;
	color: white;
	text-align: left;
    font-size:.9rem;
}
.institutionSubMenu > li > a.active {
	background: #21aced;
	color: white;
}
.institutionSubMenu > li > a .fa-check {
	display: none;
}
.institutionSubMenu > li > a.active .fa-check {
	display: inline-block;
}
.institutionSubMenu > li > a:hover {
	background: #004666;
}
.institutionSubMenu > li > a .imgWrapper {
	float: left;
	display: inline-block;
	width: 25px !important;
	margin-right: 10px;
	background: white;
	overflow: hidden;
	border-radius: 100%;
}
.institutionSubMenu > li > a > .imgWrapper img {
	float: left;
	width: 100% !important;
}


#roleSelect > li:hover > .institutionSubMenu {
	display: block;
}
/*!  */
/*! --- MFA --- */

#mfa-wrapper {
    margin-top: 40px;
    max-width: 768px;
}
#mfa {
    -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2);
}
#mfa h1 {
    margin-top: 10px;
    padding-left: 30px;
    font-size: 1.5em;
    font-family: 'Raleway', sans-serif !important;
	font-weight: 500 !important;
    text-align: center;
}

#mfa .logo {
    float: none;
    width: 300px;
}

#mfa .avatar {
    display: inline-block;
    margin: 0 20px;
    width: 75px;
    vertical-align: middle;
    border-radius: 100%;
    overflow: hidden;
}

#mfa .avatar img {
    float: left;
    width: 100%;
}
#mfa .user-info {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.25em;
    text-align: left;
    font-family: 'Raleway', sans-serif !important;
    line-height: 110px;
}
.mfa-content {
	padding: 20px;
	text-align: left;
	font-size: .95em;
}
.app-link img {
	width: 120px;
}
.qr {
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2);
}
.mfa-code {
	width: 90px;
	padding: 5px 10px;
	border: solid 1px #ddd;
	border-radius: 20px;
	font-size: 1.25em;
	text-align: center;
}
.mfa-code:focus {
    outline: none;
}
#btn_send_mfa {
	display: inline-block;
	padding: 5px 20px;
	border-radius: 20px;
	background: #21aced;
	color: white;
	font-size: 1.25em;
}