@import url('../fonts/font.css');
body {
	font-family: "DM Sans", sans-serif!important;
}
*,*::before,*::after {
	box-sizing: border-box;
	margin: 0;
	font-family: "DM Sans", sans-serif!important;
}
.login>img {
	width: 100%;
	height: 100%;
	user-select: none!important;
}
.login {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 35px;
	height: 100vh;
}
.login>* {
	width: 80%!important;
}
.form {
	margin-right: 35px;
}
.form input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 2px solid #dcdde1;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.form input:focus {
    border-color: #0984e3;
    box-shadow: 0 0 5px rgba(9, 132, 227, 0.5);
    outline: none;
}
.form>h1 {
	margin-bottom: 15px;
	display: block;
}
.form>h1::after {
	content: '';
	display: block;
	width: 50%;
	height: 4px;
	margin-top: 15px;
	background: linear-gradient(135deg, #74b9ff, #0984e3);
}
.form>span {
	display: block;
	margin-bottom: 40px;
}
.mb-3 {
	margin-bottom: 8px;
}
.form label {
	display: block;
	margin-bottom: 5px;
}
button {
	padding: 10px;
	border-radius: 5px;
	border: 0;
	font-weight: 600;
	font-size: 14px;
	color: #fdfdfd;
	min-width: 100px;
	background: linear-gradient(135deg, #74b9ff, #0984e3);
	cursor: pointer;
}
.alert {
	background-color: #EA5455;
	padding: 10px;
	border-radius: 8px;
	color: #fff;
	margin-bottom: 10px;
}
@media (max-width: 1280px) {
	.login>* {
		width: 70%!important;
	}
}
@media (max-width: 992px) {
	.login>* {
		width: 60%!important;
	}
}
@media (max-width: 768px) {
	.login>* {
		width: 50%!important;
	}
}
@media (max-width: 525px) {
	.login>* {
		width: 50%!important;
	}
	.login {
		flex-direction: column;
		height: 100%!important;
	}
	.login .form {
		margin-bottom: 25px;
	}
	.login>img {
		width: 100% !important;
	}
}