:root {
	--td-blue: #1f4fa3;
	--td-red: #c7372a;
	--td-ink: #1f2430;
	--td-muted: #5f6b7a;
	--td-card: #ffffff;
}

.container { 
	margin: 0;
	/* Container Grid and Display */
	height: 100vh;
	width: 100vw;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 0;
	background-color: #f2f4f8;
	background-image:
		radial-gradient(circle at top left, rgba(31, 79, 163, 0.25), transparent 55%),
		radial-gradient(circle at bottom right, rgba(199, 55, 42, 0.2), transparent 55%),
		linear-gradient(135deg, rgba(15, 23, 42, 0.12), rgba(30, 41, 59, 0.08)),
		url('/img/login_background_4.png');
	background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    grid-template-columns: 0.7fr 1fr 0.7fr;
    grid-template-rows: 0.7fr 1.5fr 0.7fr;
    color: var(--td-ink);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.2em;
}

a {
	text-decoration: none;
	font-weight: bold;
	color: var(--td-blue);
}

.header {
	grid-row: 1;
	grid-column: 2;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: flex-end;
}

.header img{
	width:40%;
}

.middle-box {
	background-color: var(--td-card);
	display:flex;
	flex-direction: column;
	border-radius: 18px;
	grid-column: 2;
	grid-row: 2;
	padding: 6% 7%;
  	height: auto;
  	width: auto;
  	box-shadow: 0px 18px 40px rgba(15, 23, 42, 0.2);
}

.middle-box .title {
	font-size: 1.6em;
	color: var(--td-ink);
	margin: 0 0 8px;
}

.middle-box .subtitle {
	font-size: 0.95em;
	color: var(--td-muted);
	margin: 0 0 18px;
}

.login-benefits {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
	color: #334155;
	font-size: 0.95em;
}

.benefit {
	display: flex;
	align-items: center;
	gap: 8px;
}

.benefit::before {
	content: "-";
	color: var(--td-red);
	font-weight: bold;
}

.middle-box form {
	display:flex;
	flex-direction: column;
}

.remember-me {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.95em;
	color: var(--td-muted);
	margin-bottom: 3%;
}

.remember-me input {
	width: auto;
	margin: 0;
}

.middle-box input {
  width: 100%;
  padding: 3%;
  border-radius: 5px;
  border: 1px solid #cccccc;
  box-sizing: border-box;
  margin-bottom: 3%;
  font-size: 1.1em;
  background: #ffffff;
}

.middle-box button { 
  display: block;
  width: 100%;
  padding: 3%;
  border: none;
  border-radius: 3%;
  font-weight: bold;
  font-size: 1.1em;
} 

.middle-box button:hover {
  background-color: #a82e23;
}

.middle-box .btn-1 {
  color: #ffffff;
  background-color: var(--td-red);
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-bottom: 2%;
}

.middle-box .btn-2 {
  color: #ffffff;
  background-color: var(--td-blue);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.error-alert-box {
	padding: 3%;
    background-color: rgb(139, 0, 0, 0.3);
}

.success-alert-box {
	padding: 4%;
    background-color: rgb(0, 108, 0, 0.7);
}

.login-footer {
	margin-top: 18px;
	color: var(--td-muted);
	font-size: 0.9em;
	text-align: center;
}

.remember-me {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.95em;
	color: var(--td-muted);
	margin-bottom: 3%;
}

.remember-me input {
	width: auto;
	margin: 0;
}