/**
* Login styles
*/

@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300');

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #FFF;
	margin-left: 10px;
}
.top-pattern {
	background-image: url("https://learningpi.edcl.com.ar/assets/get/img/png/login/top_login_pattern.png");
	background-repeat: repeat-x;
	height: 90px;
	width: auto;
	margin: 0px 10px;
}
/*.bottom-pattern {
	background-image: url("https://learningpi.edcl.com.ar/assets/get/img/png/login/top_login_pattern.png");
	background-repeat: repeat-x;
	width: auto;
	height: 13%;
	background-color: #001A5C;
}*/
.login-box-new {
	/*position: absolute;*/
	/*top: 380px;*/
	/*bottom: 0;*/
	width: 100%;
        height: 100%;
	background-color: #001A5C;
}
.login-box-new .demo-running-warning {
	text-align: center;
	height: 35px;
}
.login-box-new .login-auth {
	width: 70%;	
	margin: 0 auto;
}
.login-box-new .login-auth .easy-login {
	width: 750px;
	margin: 0 auto;
	padding: 0 20px;
}
.login-box-new .login-auth .easy-login .login-demo-profiles {
	padding-top: 15px;
}
.login-box-new .login-auth .easy-login .manual-auth,
.login-box-new .login-auth form.login .auto-auth {
	color: #FFF;
	cursor: pointer;
	font-size: 1.5em;
	float: right;
	padding-top: 25px;
}
.login-box-new .login-auth .easy-login .manual-auth:hover,
.login-box-new .login-auth form.login .auto-auth:hover {
	text-decoration: underline;
	color: #1389FF;
}
.login-box-new .login-auth .easy-login .login-demo-profiles div {
	height: 140px;
	width: 140px;
	background-color: rgba( 85, 140, 210, 0.6 ) ;
	display: inline-block;
	margin: 5px;
	/*float: left;*/
	cursor: pointer;
	border-radius: 2px;
	text-align: center;
	font-weight: bold;
	font-family: 'Alegreya Sans', sans-serif;
	font-size: 16px;
	line-height: 18px;
	color: #FFF;
}
.login-box-new .login-auth .easy-login .login-demo-profiles div:hover {
	text-decoration: underline;
}
.login-box-new .login-auth .easy-login .login-demo-profiles div img {
	margin-top: 30px;
	margin-bottom: 5px;
	width: 50px;
	height: 50px;
}
.login-box-new .login-auth .recover {
	color: #1389FF;
	text-decoration: underline;
	cursor: pointer;
	font-weight: bold;
}
.login-box-new .login-auth .buttons {
	margin-top: 10px;
	text-align: center;
}
.login-box-new .login-auth .buttons button.login {
	width: 300px;
	font-weight: bold;
	font-size: 2em;
	padding: 10px;
}
.login-box-new .login-auth form {
	width: 750px;
	margin: 0 auto;
}
.login-box-new .login-auth form input,
.login-box-new .login-auth .easy-login input { 
	background-color: #FFF;
}
.login-box-new .login-auth form .columns {
	border-top: none;
}
.login-box-new .login-auth form .columns .col_50 {
	border: none !important;
}
.easy-login fieldset,
.login-box-new .login-auth form fieldset {
	border: none !important;
	margin: 0px;
}
.easy-login fieldset > label {
	font-size: 1.5em;
	font-weight: normal !important;
	color: #FFF;
	border: none;
}
.login-box-new .login-auth form fieldset > label {
	font-size: 2em;
	font-weight: normal !important;
	color: #FFF;
	border: none;
}
.login-box-new .login-auth fieldset.fldset-democode {
	margin: 0 auto;
	width: 380px;
}
.login-box-new .login-auth fieldset.fldset-democode label {
	font-size: 1.5em;
	width: 150px;
	white-space: nowrap;
}
.login-box-new .login-auth form fieldset div,
.easy-login fieldset div {
	border: none;
}
.easy-login fieldset div span,
.login-box-new .login-auth form fieldset div span {
	color: #FFF;
	height: 20px;
	line-height: 20px;
}

.institution-welcome { 
	margin: 0 auto 0;
	height: 290px;
	width: 70%
}
.institution-welcome .middle-content { 
	display: inline-block;
	width: 51%;
	height: 100%;
	position: relative;
}
.institution-welcome .middle-content table {
	margin: 0;
	position: absolute;
	/*width: 100%;*/
}
.institution-welcome .middle-content:first-of-type table {
	right: 5%;
	bottom: 25%;
	font-size: 5em;
}
.institution-welcome .middle-content:last-of-type {
	width: 48%;
}
.institution-welcome .middle-content:last-of-type table {
	bottom: 25%;
	font-size: 2.5em;
}
.institution-welcome .middle-content table tr td {
	vertical-align: middle;
	font-family: 'Alegreya Sans', sans-serif;
	color: #001A5C;
}
.institution-welcome .middle-content:first-of-type table tr td {
	white-space: nowrap;
}
.institution-welcome .middle-content:last-of-type table tr td:last-child {
	max-width: 270px;
}

#main-container {
	margin: 0;
}

#site-messages,
#response-messages,
.message.fixed {
	bottom: 0;
}

.login-welcome {
	padding: 10px 0;
	text-align: center;
	border-bottom: 1px solid #AAA;
    color: #666666;
    text-shadow: 0 1px 0 #FFF;
	background-color: #E6ECEF;	
	background-image: -webkit-gradient(linear, left top, left bottom, from(#E6ECEF), to(#D0D6DA)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #E6ECEF, #D0D6DA); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #E6ECEF, #D0D6DA); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #E6ECEF, #D0D6DA); /* IE10 */
	background-image:      -o-linear-gradient(top, #E6ECEF, #D0D6DA); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #E6ECEF, #D0D6DA);
}
.login-welcome span {
	font-size: 2.3em;
}
.login-welcome small {
	font-size: 0.8em;
	margin-left: 50px;
	margin-right: 10px;
}
.login-welcome a {
	color: #1389FF;
	font-size: 2em;
}
.login-welcome a:hover {
	color: #52A9FF;
	text-decoration: underline;
}

#institution-welcome {
	display: block;
	width: 500px;
	margin:0 auto 0;
	height: 29%
}

#login_box {
	opacity: 0;
	margin-top: 30px;
	width: 600px;
}
#login_box.login-auth-box {
	
}
#login_box.login-recover-box {
	width: 700px;
}
#login_box .demo-running-warning {
	font-size: 16px;
	padding: 5px 20px;
	margin-bottom: 10px;
}
#login_box .demo-running-warning h1 {
	padding: 10px 5px;
	margin: 0;
}
#login_box .demo-running-warning h2 {
	padding: 5px;
	margin: 10px;
}

div.login-container {
	min-width: 400px;
	margin: auto;
	text-align: left;
}
div.login-container * {
	font-size: 104%;
}
div.login-container fieldset.rememberme {
	
}
div.login-container fieldset.rememberme >label {
	padding-top: 8px;
}
div.login-container fieldset.rememberme >div {
	padding-top: 8px;
}
div.login-container fieldset.rememberme small {
	display: inline-block;
	padding: 0;
	padding-top: 4px;
}
div.login-container .buttons {
	text-align: center;
}
div.login-container .buttons button {
	float: none;
	padding: 2px;
	font-size: 14px;
	line-height: 20px;
}
div.login-container .buttons button.login {
	margin-right: 20px;
	font-size: 18px;
	font-weight: bold;
}
div.login-container .buttons button span {
	display: inline-block;
	padding-top: 8px;
}

div.login-container .logo-container {
	position: relative;
}
div.login-container .logo-container > img {
	float: left;
}
div.login-container .logo-container h2 {
	position: absolute;
	left: 150px;
	top: 20px;
	font-size: 1.5em;
	text-align: center;
}
div.login-container .logo-container strong {
	position: absolute;
	left: 150px;
	right: 10px;
	bottom: 0;
	text-align: right;
}
div.login-container .logo-container strong img {
	float: none;
}

div.login-recover-container .response-text {
	font-size: 1.3em;
	text-align: center;
}
div.login-recover-container .response-text div {
	padding: 30px 0;
	border-top: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
}
div.login-recover-container .response-text button {
	margin: 20px auto;
	float: none;
}
div.login-container .manual-auth,
div.login-container .auto-auth {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
	text-align: center;
	margin: 10px auto;
}

div.login-container fieldset.fldset-democode {
	
}
div.login-container fieldset.fldset-democode span.badge-tooltip {
	left: auto !important;
	right: 10px !important;
}

table.login-demo-profiles {
	margin: 20px auto;
	width: 70%;
}
table.login-demo-profiles td {
	padding: 4px 10px;
	text-align: left;
	vertical-align: middle;
}
table.login-demo-profiles [data-auth]:hover,
table.login-demo-profiles [data-auth]:hover td {
	cursor: pointer;
	background-color: #B8DAAB;
}
table.login-demo-profiles td button {
	margin: 2px;
}

@media screen and (max-width: 999px) {
	body {
		min-width: 850px;
	}
	.institution-welcome {
		width: 90%;
	}
	.institution-welcome .middle-content:first-of-type table {
		right: 8%;
	}
    .login-box-new .login-auth {
		width: 90%;	
		/*margin: 0;*/
	}
	
	.login-box-new .login-auth form {
		/*width: 90%;*/
		/*margin: 0;*/
	}
	
	.login-box-new .login-auth .easy-login {
		/*width: 90%;*/
		/*margin: 0;*/
		padding: 0 20px;
	}
}

@media screen and (max-width: 849px) {
	body {
		min-width: 450px;
	}
	
	.col_50 { 
		width: 100%;
	}
	
	.institution-welcome {
		width: 90%;
	}
	.institution-welcome .middle-content {
		display: block;
		position: inherit;
		height: auto;
		margin: 0 auto;
		width: 100%;
	}
	.institution-welcome .middle-content table {
		position: inherit;
		width: 320px;
		margin: 0 auto;
	}
	.institution-welcome .middle-content:last-of-type {
		width: inherit;
	}
	
    .login-box-new .login-auth {
		width: 90%;	
	}
	
	.login-box-new .login-auth form {
		max-width: 450px;
		/*margin: 0;*/
	}
	
	.login-box-new .login-auth .easy-login {
		width: 450px;
		margin: 0 auto;
		padding: 0 20px;
	}
}

@media only screen and (max-device-width: 480px) {
	body {
		min-width: 390px;
	}
	
	.col_50 { 
		width: 100%;
	}
	
	.institution-welcome {
		width: 100%;
	}
	.institution-welcome .middle-content {
		display: block;
		position: inherit;
		height: auto;
		margin: 0 auto;
		width: 100%;
	}
	.institution-welcome .middle-content table {
		position: inherit;
		width: 320px;
		margin: 0 auto;
	}
	.institution-welcome .middle-content:last-of-type {
		width: inherit;
	}
	
    .login-box-new .login-auth {
		width: 90%;	
		height: 100%;
	}
	
	.login-box-new .login-auth form {
		width: 390px;
		/*margin: 0;*/
	}
	
	.login-box-new .login-auth .easy-login {
		width: 400px;
		margin: 0 auto;
		padding: 0 20px;
	}
}