/**
 * Visual layer for the redesigned institutional login.
 *
 * Loaded from app/web/entrance/views/index_educa_city.html,
 * index_education_city.html and index_ciudadeducativa_net.html, after
 * styles.css and bootstrap.min.css, so its rules override the inherited
 * layout without modifying it. Shared by the EDUCA_CITY, EDUCATION_CITY and
 * CIUDADEDUCATIVA_NET brands (see INTERNAL_LOGIN_FORM__LAYOUT_1 in each
 * brand's config file); it does not apply to any other brand or screen.
 *
 * Fixed name on purpose: this sheet does not use USE_LEGACY_CSS and has no
 * .legacy.css twin. The .legacy variants in this project are identical
 * copies with no compatibility content, so duplicating this file would only
 * mean keeping two copies in sync for no benefit.
 *
 * All the background ambience (halos, bottom wave and circles) is built
 * with gradients and pseudo-elements: no new graphic asset is added. The
 * decorative elements use pointer-events:none, do not enter the layout flow,
 * and are simplified or removed on tablet and mobile.
 *
 * ICE-4678: this login no longer shows the bottom banner, so this sheet
 * defines no rules for #footer, .slide-container or .slider-image. The
 * rules inherited from styles.css for those selectors are left untouched
 * because other brands and screens still use them.
 */

:root {
	--EC_TEAL: 0, 171, 173;
	--EC_SURFACE: #eef4f7;
	--EC_SURFACE_DEEP: #d4e3eb;
	--EC_INK: #0c1f27;
	--EC_INK_SOFT: #5a7781;
	--EC_FIELD_TRIM: #edf2f4;
	--EC_FIELD_EDGE: rgba(12, 31, 39, 0.08);
	--EC_LINK: #63dcde;
	--EC_AMBER_HOVER: #ffc352;
}

/* ------------------------------------------------------------------ *
 *  Background ambience
 * ------------------------------------------------------------------ */

body.body {
	position: relative;
	height: auto;
	min-height: 100vh;
	overflow-x: hidden;
	background-color: var(--COLOR_BLUE_1);
	background-image:
		radial-gradient(ellipse 72% 56% at 6% -14%, rgba(var(--EC_TEAL), 0.32), rgba(var(--EC_TEAL), 0) 58%),
		radial-gradient(ellipse 58% 48% at 110% 114%, rgba(var(--EC_TEAL), 0.26), rgba(var(--EC_TEAL), 0) 60%),
		radial-gradient(ellipse 130% 96% at 50% 46%, rgba(0, 62, 75, 0.52), rgba(0, 40, 50, 0) 72%),
		linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.24) 100%);
	background-repeat: no-repeat;
}

/* Wide sweep across the bottom of the page, matching the reference mockup. */
body.body:before {
	content: "";
	position: fixed;
	left: -30vw;
	right: -30vw;
	bottom: -64vh;
	height: 124vh;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 100%,
		rgba(var(--EC_TEAL), 0.22) 0%,
		rgba(var(--EC_TEAL), 0.08) 40%,
		rgba(var(--EC_TEAL), 0) 68%);
	pointer-events: none;
	z-index: 0;
}

/* Abstract circles of different sizes, scattered across the canvas. */
body.body:after {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	z-index: 0;
	background-repeat: no-repeat;
	background-image:
		radial-gradient(circle closest-side, rgba(var(--EC_TEAL), 0.17), rgba(var(--EC_TEAL), 0)),
		radial-gradient(circle closest-side, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0)),
		radial-gradient(circle closest-side, rgba(var(--EC_TEAL), 0.13), rgba(var(--EC_TEAL), 0)),
		radial-gradient(circle closest-side, rgba(255, 255, 255, 0.040), rgba(255, 255, 255, 0)),
		radial-gradient(circle closest-side, rgba(var(--EC_TEAL), 0.11), rgba(var(--EC_TEAL), 0)),
		radial-gradient(circle closest-side, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0));
	background-size:
		470px 470px,
		215px 215px,
		330px 330px,
		145px 145px,
		265px 265px,
		98px 98px;
	background-position:
		-150px 16%,
		77% 5%,
		95% 68%,
		8% 83%,
		25% -74px,
		61% 94%;
}

/* ------------------------------------------------------------------ *
 *  Page structure
 *  Replaces the layout based on fixed viewport heights (13vh / 68vh)
 *  with a flexible column, so the card stays centered without depending
 *  on screen height.
 * ------------------------------------------------------------------ */

#main_table_container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	box-sizing: border-box;
}

#header {
	height: auto;
	flex: 0 0 auto;
	padding: 28px 44px;
	margin: 0;
	box-sizing: border-box;
	background-color: transparent;
}

.img_logo {
	width: 182px;
	max-width: 46vw;
	height: auto;
	display: block;
	margin: 0;
}

/*
 * Central area. Absorbs all remaining height and centers the card. The
 * bottom padding is larger than the top one to optically compensate for
 * the logo strip, so the card reads as centered on screen.
 */
.scroll.v5 {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	padding: 16px 26px 78px 26px;
	box-sizing: border-box;
}

#div_login_container {
	display: block;
	position: static;
	float: none;
	width: 100%;
	max-width: 1100px;
	height: auto;
	margin: 0 auto;
	padding: 0;
}

#div_users_login {
	float: none;
	width: 100%;
	padding: 0;
	font-size: 14px;
	text-align: left;
}

#div_users_login > #loginbox {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------ *
 *  Blocked pop-up notice
 *  HTML_LOGIN_HELLO is rendered inside the hidden iframe and JS_FORM_RESET
 *  copies its innerHTML into this container on the parent page, revealing
 *  it with fadeIn(). Only restyled here: its markup, ids, text and the
 *  button's onclick stay untouched. 'display' is never set, because the
 *  .dn class keeps it hidden until jQuery shows it.
 * ------------------------------------------------------------------ */

/*
 * The container only positions the notice: the visible box is the injected
 * div, because styles.css paints it via '#div_successful_login_msg > div'.
 * The inherited background and border are cleared here so we don't end up
 * with a box drawn inside another box.
 */
#div_successful_login_msg {
	float: none;
	width: 100%;
	max-width: 560px;
	/* Right-aligned: sits under the form panel on desktop. */
	margin: 18px 0 0 auto;
	padding: 0;
	box-sizing: border-box;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	font-family: var(--APP_FONT_FAMILY);
	font-size: 14px;
	line-height: 1.55;
	text-align: left;
	vertical-align: baseline;
}

/*
 * Only visible surface of the notice. Declared twice on purpose: '> div'
 * beats the legacy rule in styles.css by cascade order, and '> div.r5'
 * (0,1,1,1) beats it by specificity too, so the background
 * var(--COLOR_ORANGE) and the 5px padding stay overridden regardless of the
 * order in which the sheets are served.
 *
 * The amber tone is translucent over the page's dark background, not a
 * solid orange, so the notice reads as part of the form panel.
 */
#div_successful_login_msg > div,
#div_successful_login_msg > div.r5 {
	padding: 18px 22px;
	box-sizing: border-box;
	border: 1px solid rgba(247, 172, 17, 0.32);
	border-radius: 12px;
	background: rgba(247, 172, 17, 0.11);
	box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.45);
	font-family: var(--APP_FONT_FAMILY);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	/* Secondary text: lower opacity than the user's name. */
	color: rgba(255, 255, 255, 0.78);
}

/*
 * The user's name arrives with an inline 12px style. It is the only
 * distinguishable element in the injected content, so it takes the
 * primary level of the hierarchy.
 */
#div_successful_login_msg span {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--COLOR_WHITE);
}

/*
 * Selector with id + class + element (0,1,1,1): beats both '.nw_button'
 * and '#div_successful_login_msg input' from styles.css, the two rules
 * that produced the legacy blue button.
 */
#div_successful_login_msg input.nw_button {
	display: inline-block;
	width: auto;
	min-height: 44px;
	height: auto;
	margin: 16px 0 0 0;
	padding: 12px 24px;
	border: 1px solid var(--COLOR_YELLOW);
	border-radius: 10px;
	background-color: var(--COLOR_YELLOW);
	background-image: none;
	color: var(--COLOR_BLUE_1_DARK_15);
	font-family: var(--APP_FONT_FAMILY);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	cursor: pointer;
	box-shadow: 0 10px 22px -8px rgba(247, 172, 17, 0.55);
}

#div_successful_login_msg input.nw_button:hover,
#div_successful_login_msg input.nw_button:focus {
	background-color: var(--EC_AMBER_HOVER);
	border-color: var(--EC_AMBER_HOVER);
	color: var(--COLOR_BLUE_1_DARK_15);
}

/* ------------------------------------------------------------------ *
 *  Access card
 *  Everything lives under .ec-login so it never reaches
 *  internal_login_form__please_wait, which is injected into the same
 *  container while the login queue is full.
 * ------------------------------------------------------------------ */

.ec-login {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	float: none;
	padding: 0;
	box-sizing: border-box;
}

.ec-login .ec-login__card {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
	overflow: hidden;
	border: 0;
	border-radius: 20px;
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.24),
		0 28px 54px -16px rgba(0, 0, 0, 0.56),
		0 64px 120px -34px rgba(0, 0, 0, 0.52);
	background-color: var(--COLOR_BLUE_1_DARK_8);
}

/* Institutional brand column --------------------------------------- */

.ec-login .ec-login__brand {
	position: relative;
	flex: 0 0 45%;
	max-width: 45%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 48px;
	box-sizing: border-box;
	background-color: var(--EC_SURFACE);
	/*
	 * Four-layer background, from top to bottom in the stacking order:
	 *   1. cool veil on the right edge, extending the transition toward the
	 *      dark panel further than the inner shadow alone reaches;
	 *   2. radial halo behind the shield tile, giving it visual weight
	 *      without touching it: it lives on the panel, never on
	 *      .panel-shield, so averageColor() keeps operating on its own
	 *      background;
	 *   3. very faint abstract shape in the bottom-left corner;
	 *   4. base: cool white fading into a very light teal/blue.
	 */
	background-image:
		linear-gradient(to right, rgba(0, 38, 48, 0) 64%, rgba(0, 38, 48, 0.085) 100%),
		radial-gradient(circle 340px at 50% 41%, rgba(var(--EC_TEAL), 0.16), rgba(var(--EC_TEAL), 0) 74%),
		radial-gradient(circle 320px at -6% 106%, rgba(18, 86, 116, 0.12), rgba(18, 86, 116, 0) 70%),
		linear-gradient(162deg, #ffffff 0%, var(--EC_SURFACE) 42%, var(--EC_SURFACE_DEEP) 100%);
	/*
	 * Inner shadow on the right edge: progressively darkens the light
	 * column as it approaches the dark panel, so the two zones read as a
	 * transition instead of two blocks glued together.
	 */
	box-shadow: inset -40px 0 56px -40px rgba(0, 30, 40, 0.50);
	text-align: center;
}

/*
 * Dot pattern in the bottom-left corner, matching the reference mockup.
 * It is texture, not content: it lives in a pseudo-element so it never
 * alters the layout flow nor interferes with the institutional image.
 */
.ec-login .ec-login__brand:before {
	content: "";
	position: absolute;
	left: 26px;
	bottom: 22px;
	width: 214px;
	height: 142px;
	background-image: radial-gradient(rgba(16, 62, 80, 0.17) 1.4px, rgba(0, 0, 0, 0) 1.4px);
	background-size: 18px 18px;
	/*
	 * Radial mask anchored in the bottom-left corner: the dot pattern has
	 * its highest density there and fades out in every direction, so the
	 * falloff toward the top and right is gradual and no straight edge
	 * remains recognizable.
	 */
	-webkit-mask-image: radial-gradient(ellipse 128% 120% at 0% 100%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.46) 38%, rgba(0, 0, 0, 0) 78%);
	mask-image: radial-gradient(ellipse 128% 120% at 0% 100%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.46) 38%, rgba(0, 0, 0, 0) 78%);
	/*
	 * Progressive enhancement: without mask support the pattern stays very
	 * faint, so it never reads as a rectangle. It is only raised to full
	 * strength when the browser can actually clip it.
	 */
	opacity: 0.42;
	pointer-events: none;
	z-index: 0;
}

@supports (mask-image: radial-gradient(#000, transparent)) or (-webkit-mask-image: radial-gradient(#000, transparent)) {
	.ec-login .ec-login__brand:before {
		opacity: 1;
	}
}

/*
 * Large, very translucent oval shifted toward the top-right corner. It
 * passes behind the shield and breaks up the panel's flat-rectangle look.
 * The 1px inner ring gives it a barely-suggested edge, so it reads as a
 * shape rather than a smudge.
 */
.ec-login .ec-login__brand:after {
	content: "";
	position: absolute;
	top: -168px;
	right: -148px;
	width: 520px;
	height: 458px;
	border-radius: 50%;
	background: radial-gradient(circle closest-side,
		rgba(var(--EC_TEAL), 0.17),
		rgba(var(--EC_TEAL), 0.07) 54%,
		rgba(var(--EC_TEAL), 0) 100%);
	box-shadow: inset 0 0 0 1px rgba(var(--EC_TEAL), 0.07);
	pointer-events: none;
	z-index: 0;
}

/*
 * .panel-shield keeps being the box that holds only the institutional
 * image, because averageColor() in index_educa_city.html repaints its
 * background when the shield is nearly white. The institution's name sits
 * outside that box so that repaint never makes it unreadable.
 */
.ec-login .ec-login__shield {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	float: none;
	width: 100%;
	max-width: 300px;
	min-height: 220px;
	margin: 0;
	padding: 26px;
	box-sizing: border-box;
	border: 0;
	border-radius: 14px;
	background-color: var(--COLOR_WHITE);
	box-shadow:
		0 1px 3px rgba(12, 31, 39, 0.05),
		0 14px 32px -14px rgba(12, 31, 39, 0.20);
}

/*
 * The image arrives from login.php with an inline style of
 * max-height:60%; max-width:60%. It is neutralized here so any aspect
 * ratio fits without distortion, instead of modifying
 * app/lib/login/login.php.
 */
.ec-login .ec-login__shield #img_school_shield {
	display: inline-block;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 204px !important;
}

/* The institution's name is the real heading of the brand column. */
.ec-login .ec-login__school {
	position: relative;
	z-index: 1;
	width: 100%;
	margin-top: 30px;
	font-family: var(--APP_FONT_FAMILY);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.022em;
	color: var(--EC_INK);
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Form column ------------------------------------------------ */

.ec-login .ec-login__panel {
	position: relative;
	flex: 1 1 340px;
	float: none;
	width: auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 60px 60px;
	box-sizing: border-box;
	/* Diagonal light coming from the top-left corner of the dark panel. */
	background-image: linear-gradient(152deg,
		rgba(255, 255, 255, 0.055) 0%,
		rgba(255, 255, 255, 0.012) 34%,
		rgba(0, 0, 0, 0.03) 68%,
		rgba(0, 0, 0, 0.10) 100%);
}

#loginbox div.ec-login__panel {
	background-color: var(--COLOR_BLUE_1_DARK_8);
}

.ec-login .ec-login__form {
	position: relative;
	z-index: 1;
	margin: 0;
	width: 100%;
}

/* Heading ------------------------------------------------------------ *
 * Uses the existing entrance.sign_in_to key, present in all 28 languages
 * of the project, plus the APP_NAME constant. Introduces no new copy.
 * ---------------------------------------------------------------------- */

.ec-login .ec-login__heading {
	position: relative;
	z-index: 1;
	margin: 0 0 26px 0;
	padding: 0;
	font-family: var(--APP_FONT_FAMILY);
	font-size: 23px;
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: -0.014em;
	color: rgba(255, 255, 255, 0.90);
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Fields --------------------------------------------------------------- */

.ec-login .ec-field {
	display: flex;
	align-items: stretch;
	width: 100%;
	margin: 0 0 14px 0;
	overflow: hidden;
	border: 0;
	border-radius: 10px;
	background-color: var(--COLOR_WHITE);
	box-sizing: border-box;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
	transition: box-shadow 0.16s ease;
}

.ec-login .ec-field:focus-within {
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.24),
		0 0 0 3px rgba(var(--EC_TEAL), 0.45);
}

.ec-login .ec-field .ec-field__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	min-width: 54px;
	padding: 0;
	border: 0;
	border-right: 1px solid var(--EC_FIELD_EDGE);
	border-radius: 0;
	background-color: var(--EC_FIELD_TRIM);
	color: var(--EC_INK_SOFT);
	font-size: 16px;
	white-space: normal;
	vertical-align: middle;
}

.ec-login .ec-field .ec-field__input {
	flex: 1 1 auto;
	float: none;
	width: auto;
	min-width: 0;
	height: 54px;
	padding: 0 18px;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	font-family: var(--APP_FONT_FAMILY);
	font-size: 15px;
	color: var(--EC_INK);
}

.ec-login .ec-field .ec-field__input:focus {
	border: 0;
	box-shadow: none;
	outline: 0;
}

/* Buttons -------------------------------------------------------------- */

.ec-login .ec-login__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 26px 0 0 0;
	padding: 0;
}

/*
 * btn_app_request() injects its link with the same id btn-login as the
 * sign-in button, plus an inline style margin-left:20px. To avoid relying
 * on DOM order or touching login.php, the template wraps
 * ${btn.app_request} in .ec-login__request and each button is identified
 * by its container: the primary one is a direct child of .ec-login__actions
 * and the secondary one is a direct child of .ec-login__request. The
 * inline margin is cleared here.
 */
.ec-login .ec-login__actions #btn-login {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	margin: 0 !important;
	padding: 14px 20px;
	border: 1px solid transparent;
	border-radius: 10px;
	box-sizing: border-box;
	font-family: var(--APP_FONT_FAMILY);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.005em;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
	transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.ec-login .ec-login__actions #btn-login:active {
	transform: translateY(1px);
}

.ec-login .ec-login__actions > #btn-login,
.ec-login .ec-login__actions > .ec-login__request {
	flex: 1 1 150px;
	min-width: 0;
}

.ec-login .ec-login__request {
	display: flex;
	margin-left: 14px;
}

/*
 * When btn_app_request() returns an empty string, views_handler replaces
 * the marker with nothing and the container ends up with no child nodes.
 * :empty removes it from the layout so it takes up no space or margin in
 * the button row.
 */
.ec-login .ec-login__request:empty {
	display: none;
	margin-left: 0;
}

.ec-login .ec-login__request > #btn-login {
	width: 100%;
}

/* Primary: sign-in button */
.ec-login .ec-login__actions > #btn-login {
	background-color: var(--COLOR_YELLOW);
	color: var(--COLOR_BLUE_1_DARK_15);
	box-shadow: 0 12px 26px -8px rgba(247, 172, 17, 0.62);
}

.ec-login .ec-login__actions > #btn-login:hover,
.ec-login .ec-login__actions > #btn-login:focus {
	background-color: var(--EC_AMBER_HOVER);
	border-color: var(--EC_AMBER_HOVER);
	color: var(--COLOR_BLUE_1_DARK_15);
	text-decoration: none;
}

/* Secondary: enrollment request */
.ec-login .ec-login__request > #btn-login {
	background-color: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.30);
	color: var(--COLOR_WHITE);
}

.ec-login .ec-login__request > #btn-login:hover,
.ec-login .ec-login__request > #btn-login:focus {
	background-color: rgba(255, 255, 255, 0.13);
	border-color: rgba(255, 255, 255, 0.60);
	color: var(--COLOR_WHITE);
}

/* Links -------------------------------------------------------------- *
 * Two levels: password recovery is the real secondary action and carries
 * more weight; the commercial invitation sits below it.
 * ---------------------------------------------------------------------- */

.ec-login .ec-login__link {
	clear: both;
	margin: 0;
	padding: 0;
	font-family: var(--APP_FONT_FAMILY);
	line-height: 1.5;
}

.ec-login .ec-login__actions + .ec-login__link {
	margin-top: 26px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.88);
}

.ec-login .ec-login__link + .ec-login__link {
	margin-top: 10px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.56);
}

.ec-login .ec-login__link a {
	color: var(--EC_LINK);
	text-decoration: none;
	font-weight: 600;
}

.ec-login .ec-login__link a:hover,
.ec-login .ec-login__link a:focus {
	color: var(--COLOR_WHITE);
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 *  Responsive
 *  Desktop: full composition. Tablet: simplified decoration.
 *  Mobile: single column and decoration reduced to a minimum.
 * ------------------------------------------------------------------ */

@media only screen and (max-width: 1180px) {
	.ec-login .ec-login__brand {
		padding: 48px 36px;
	}

	.ec-login .ec-login__panel {
		padding: 48px 42px;
	}

	.ec-login .ec-login__heading {
		font-size: 22px;
		margin-bottom: 26px;
	}
}

@media only screen and (max-width: 900px) {
	/* Tablet: the bottom wave is removed and the circles are lightened. */
	body.body:before {
		display: none;
	}

	body.body:after {
		background-image:
			radial-gradient(circle closest-side, rgba(var(--EC_TEAL), 0.15), rgba(var(--EC_TEAL), 0)),
			radial-gradient(circle closest-side, rgba(255, 255, 255, 0.040), rgba(255, 255, 255, 0));
		background-size: 340px 340px, 150px 150px;
		background-position: -110px 8%, 92% 78%;
	}

	.scroll.v5 {
		padding: 14px 20px 54px 20px;
	}

	.ec-login .ec-login__card {
		flex-direction: column;
		border-radius: 18px;
	}

	.ec-login .ec-login__brand {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		padding: 38px 28px;
		/* In a stacked layout, the transition toward the dark panel moves to the bottom edge. */
		box-shadow: inset 0 -26px 40px -30px rgba(0, 35, 45, 0.55);
	}

	.ec-login .ec-login__brand:before {
		left: 18px;
		bottom: 14px;
		width: 96px;
		height: 52px;
	}

	.ec-login .ec-login__brand:after {
		display: none;
	}

	.ec-login .ec-login__shield {
		max-width: 262px;
		min-height: 150px;
		padding: 20px;
	}

	.ec-login .ec-login__shield #img_school_shield {
		max-height: 140px !important;
	}

	.ec-login .ec-login__school {
		margin-top: 22px;
		font-size: 22px;
	}

	.ec-login .ec-login__panel {
		flex: 1 1 auto;
		width: 100%;
		padding: 38px 32px;
	}

	.ec-login .ec-login__heading {
		font-size: 21px;
		margin-bottom: 24px;
	}
}

@media only screen and (max-width: 560px) {
	/* Mobile: decoration reduced to the background halo. */
	body.body:after {
		display: none;
	}

	#header {
		padding: 18px 18px;
	}

	.img_logo {
		width: 146px;
	}

	.scroll.v5 {
		padding: 10px 14px 34px 14px;
	}

	.ec-login .ec-login__card {
		border-radius: 16px;
	}

	.ec-login .ec-login__brand {
		padding: 28px 20px;
	}

	.ec-login .ec-login__brand:before {
		display: none;
	}

	.ec-login .ec-login__shield {
		max-width: 210px;
		min-height: 126px;
		padding: 16px;
		border-radius: 12px;
	}

	.ec-login .ec-login__shield #img_school_shield {
		max-height: 118px !important;
	}

	.ec-login .ec-login__school {
		margin-top: 18px;
		font-size: 20px;
	}

	.ec-login .ec-login__panel {
		padding: 28px 22px;
	}

	.ec-login .ec-login__heading {
		font-size: 19px;
		margin-bottom: 20px;
	}

	.ec-login .ec-login__actions {
		display: block;
	}

	.ec-login .ec-login__actions #btn-login {
		width: 100%;
		margin: 0 0 12px 0 !important;
	}

	.ec-login .ec-login__request {
		display: block;
		margin-left: 0;
	}
}

/*
 * Short screens (768px laptops, mobile in landscape): the vh-based height
 * that styles.css applies to the container is neutralized and the card is
 * compressed so it fits entirely without scrolling.
 */
@media only screen and (max-height: 800px) and (min-width: 901px) {
	.scroll.v5 {
		padding: 12px 26px 40px 26px;
	}

	.ec-login .ec-login__brand {
		padding: 38px 38px;
	}

	.ec-login .ec-login__shield {
		min-height: 168px;
		padding: 20px;
	}

	.ec-login .ec-login__shield #img_school_shield {
		max-height: 154px !important;
	}

	.ec-login .ec-login__panel {
		padding: 40px 48px;
	}

	.ec-login .ec-login__heading {
		font-size: 22px;
		margin-bottom: 24px;
	}
}

@media only screen and (max-height: 620px) {
	#div_login_container {
		height: auto;
	}

	#header {
		padding: 12px 26px;
	}

	.img_logo {
		width: 144px;
	}

	.scroll.v5 {
		padding: 8px 20px 26px 20px;
	}

	.ec-login .ec-login__shield {
		min-height: 130px;
		padding: 16px;
	}

	.ec-login .ec-login__shield #img_school_shield {
		max-height: 122px !important;
	}

	.ec-login .ec-login__heading {
		font-size: 19px;
		margin-bottom: 18px;
	}
}