{% load static %}

@charset "UTF-8";
.cardholder {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	background-image: url( "/static/computer1.png");
	background-size: cover;
	background-repeat: no-repeat;
	<!--  background-attachment: fixed;-->
	background-position: center;
}
.user_card {
	width: 400px;
	height: 400px;
	bottom: 0;
	 /* background: #21366a; */
	background: #000000c7;
	margin-bottom: auto;
	margin-top: auto;
	position: absolute;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 10px;
/*	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 5px; */
	left: 0;
	right: 0;
	top: 100;
	margin: auto;
}
.form_container {
	margin-top: 20px;
}
#form-title{
	color: #fff;
}
.login_btn {
	width: 100%;
	background: #c4243c !important;
	color: white !important;
}
.login_btn:focus {
	box-shadow: none !important;
	outline: 0px !important;
}
.login_container {
	padding: 0 2rem;
}
.input-group-text {
	background: #c4243c!important;
	color: white !important;
	border: 0 !important;
	border-radius: 0.25rem 0 0 0.25rem !important;
}
.input_user,
.input_pass:focus {
	box-shadow: none !important;
	outline: 0px !important;
}
#messages{
	background-color: grey;
	color: #fff;
	padding: 10px;
	margin-top: 10px;
}

@media screen and (max-width: 700px) {
	.user_card {
		padding: 15px;
	}
.cardholder {
		background-size: contain; /* Ensures full visibility of the image */
		background-position: center center;
	}
	h5 {
		font-size: 16px;
	}

	.login_btn {
		font-size: 14px;
	}
}
@media screen and (max-width: 1024px) {
	background-position: top center; /* Adjust for smaller screens */
}

@media screen and (max-width: 450px) {
	.input-group span {
		padding: 8px;
	}
.cardholder {
		background-size: contain; /* Adjust to fit smaller screens */
		background-position: center top;
	}
	.form-control {
		padding: 8px;
	}

	.login_btn {
		padding: 8px;
	}

	h5 {
		font-size: 14px;
	}
	/* } */

	/* @charset "UTF-8"; */
/* body { */
/* margin: 0; */
/* font-family: 'Arial', sans-serif; */
/* background-color: #f4f4f4; */
/* } */

/* .cardholder { */
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
/* min-height: 100vh; */
/* background-image: url( "/static/design.png"); */
/* background-size: cover; */
/* background-repeat: no-repeat; */
/* background-position: center; */
/* } */

/* .user_card { */
/* width: 70%; */
/* max-width: 450px; */
/* background: rgba(33, 54, 106, 0.95); */
/* color: #fff; */
/* padding: 20px; */
/* border-radius: 10px; */
/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
/* text-align: center; */
/* } */

/* .user_card img { */
/* max-width: 100%; */
/* height: auto; */
/* border-radius: 10px; */
/* } */

/* .form_container { */
/* margin-top: 20px; */
/* } */

/* h5 { */
/* font-size: 18px; */
/* margin-top: 10px; */
/* } */

/* .input-group { */
/* display: flex; */
/* align-items: center; */
/* margin-bottom: 15px; */
/* } */

/* .input-group span { */
/* background: #c4243c; */
/* color: white; */
/* padding: 10px; */
/* border-radius: 5px 0 0 5px; */
/* } */

/* .form-control { */
/* flex: 1; */
/* padding: 10px; */
/* border: none; */
/* border-radius: 0 5px 5px 0; */
/* outline: none; */
/* } */

/* .form-control:focus { */
/* box-shadow: 0 0 5px rgba(196, 36, 60, 0.8); */
/* } */

/* .login_btn { */
/* width: 100%; */
/* padding: 10px; */
/* background: #c4243c; */
/* color: white; */
/* border: none; */
/* border-radius: 5px; */
/* cursor: pointer; */
/* transition: background 0.3s; */
/* } */

/* .login_btn:hover { */
/* background: #a01c31; */
/* } */

/* #messages { */
/* background-color: grey; */
/* color: #fff; */
/* padding: 10px; */
/* margin-top: 10px; */
/* border-radius: 5px; */
/* } */

/* @media screen and (max-width: 700px) { */
/* .user_card { */
/* padding: 15px; */
/* } */

/* h5 { */
/* font-size: 16px; */
/* } */

/* .login_btn { */
/* font-size: 14px; */
/* } */
/* } */
/* @media screen and (max-width: 1024px) { */
/* background-position: top center; /* Adjust for smaller screens */ */
/* } */
/* @media screen and (max-width: 450px) { */
/* .input-group span { */
/* padding: 8px; */
/* } */

/* .form-control { */
/* padding: 8px; */
/* } */

/* .login_btn { */
/* padding: 8px; */
/* } */

/* h5 { */
/* font-size: 14px; */
/* } */
/* } */