@import url("../../elastic/styles/styles.min.css");

/* ================= Tela de login - identidade BTech ================= */

body.task-login {
	background: radial-gradient(1100px 620px at 50% -6%, #1E2E4C 0%, #131C2E 46%, #0A1019 100%) !important;
	color: #E8EDF5 !important;
}

/* Centraliza o cartao em vez de estica-lo ate o rodape */
body.task-login #layout {
	align-items: center !important;
	justify-content: center !important;
	min-height: 100vh;
	background: transparent !important;
}
body.task-login #layout-content {
	flex: 0 0 auto !important;
	height: auto !important;
	width: 100%;
	max-width: 400px;
	margin: 0 16px;
	padding: 40px 32px 26px !important;
	background: rgba(255,255,255,.045) !important;
	border: 1px solid rgba(255,255,255,.09);
	border-radius: 18px;
	box-shadow: 0 28px 70px rgba(0,0,0,.55);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	overflow: visible !important;
}

body.task-login #logo {
	display: block;
	width: 210px;
	max-width: 100%;
	height: auto;
	margin: 0 auto 30px;
}

body.task-login #login-form table,
body.task-login #login-form tbody { width: 100%; }
body.task-login #login-form tr.form-group { display: block; margin-bottom: 14px; }

/* Grupo icone + campo, tratado como uma peca so */
body.task-login td.input.input-group {
	border-radius: 11px;
	transition: box-shadow .15s ease;
}
body.task-login td.input.input-group:focus-within {
	box-shadow: 0 0 0 3px rgba(34,211,238,.20);
}
body.task-login .input-group-text.icon {
	background: rgba(255,255,255,.07) !important;
	border: 1px solid rgba(255,255,255,.12) !important;
	border-right: 0 !important;
	border-radius: 11px 0 0 11px !important;
	color: #7C8DA6 !important;
}
body.task-login td.input.input-group .form-control {
	background: rgba(255,255,255,.05) !important;
	border: 1px solid rgba(255,255,255,.12) !important;
	border-left: 0 !important;
	border-radius: 0 11px 11px 0 !important;
	color: #E8EDF5 !important;
	box-shadow: none !important;
}
body.task-login td.input.input-group:focus-within .input-group-text.icon,
body.task-login td.input.input-group:focus-within .form-control {
	border-color: rgba(34,211,238,.55) !important;
}
body.task-login .form-control::placeholder { color: #56677E !important; opacity: 1; }
body.task-login .form-control:-webkit-autofill {
	-webkit-text-fill-color: #E8EDF5 !important;
	-webkit-box-shadow: 0 0 0 1000px #1A2438 inset !important;
}

body.task-login .formbuttons { margin-top: 18px; }
body.task-login button.mainaction,
body.task-login .formbuttons .btn-primary {
	height: 46px;
	border: 0 !important;
	border-radius: 11px !important;
	color: #fff !important;
	font-weight: 600;
	letter-spacing: .6px;
	background: linear-gradient(135deg, #22D3EE 0%, #2563EB 100%) !important;
	box-shadow: 0 10px 26px rgba(37,99,235,.34);
	transition: filter .15s ease, transform .08s ease;
}
body.task-login button.mainaction:hover { filter: brightness(1.09); }
body.task-login button.mainaction:active { transform: translateY(1px); }
body.task-login button.mainaction:focus { box-shadow: 0 0 0 3px rgba(34,211,238,.28) !important; }

body.task-login #login-footer {
	color: #4E5D74 !important;
	font-size: 12px;
	margin-top: 20px;
	text-align: center;
}

/* O elastic empurra logo e formulario com "top" fixo para centralizar
   numa tela inteira. Dentro do cartao isso vaza, entao zeramos e
   centralizamos com flex. */
body.task-login #layout-content {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
}
body.task-login #logo,
body.task-login #login-form {
	position: static !important;
	top: 0 !important;
	left: 0 !important;
}
body.task-login #login-form {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}
body.task-login #logo {
	max-height: none !important;
	overflow: visible !important;
}