* {
	padding   : 0;
	margin    : 0;
	box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    overflow   : hidden;
}

/* New Design - Background image */
.design-new.auth-body {
	background-image: url('/assets/images/login/wave-bg2.jpeg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	min-height: 100vh;
	width: 100%;
	position: relative;
}

/* Old Design - Wave image */
.wave {
	position: fixed;
	bottom  : 0;
	left    : 0;
	height  : 100%;
	z-index : -1;
}

/* New Design - Hide wave */
.design-new .wave {
	display: none;
}

.container {
    width                : 100vw;
    height               : 100vh;
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap             : 7rem;
    padding              : 0 2rem;
}

.img {
	display        : flex;
	justify-content: flex-end;
	align-items    : center;
}

/* New Design - Login wrapper with padding */
.design-new .login-wrapper {
	display        : flex;
	justify-content: flex-end;
	align-items    : center;
	padding-right  : 10%;
}

/* Old Design - No wrapper needed */
.design-old .login-wrapper {
	display: none;
}

/* New Design (default) */
.design-new .login-content,
.design-new .password-reset-content {
	display        : flex;
	justify-content: flex-start;
	align-items    : center;
	text-align     : center;
	background-color: #ffffff;
	padding        : 40px;
	border-radius  : 10px;
	box-shadow     : 0 4px 6px rgba(0, 0, 0, 0.1);
	min-height     : 550px;
}

/* Old Design */
.design-old .login-content,
.design-old .password-reset-content {
	display        : flex;
	justify-content: flex-start;
	align-items    : center;
	text-align     : center;
	background-color: transparent;
	padding        : 0;
	border-radius  : 0;
	box-shadow     : none;
	min-height     : auto;
	width          : 100%;
}

.img img {
	width: 500px;
}

form {
	width: 360px;
}

/* New Design - Logo/Image size */
.design-new .login-content img,
.design-new .password-reset-content img {
    height: 60px;
}

/* Old Design - Image size (if any images are shown) */
.design-old .login-content img,
.design-old .password-reset-content img {
    height: 100px;
}

/* New Design - Logo visible */
.design-new .company-logo {
    height: 60px;
    width: auto;
    margin-bottom: 40px;
    object-fit: contain;
}

/* Old Design - Logo hidden */
.design-old .company-logo {
    display: none;
}

/* New Design - Title hidden (using logo) */
.design-new .login-content h2 {
	display: none;
}

/* Old Design - Title visible */
.design-old .login-content h2 {
	margin-bottom: 45px;
	color        : #38d39f;
	font-size    : 2.9rem;
}

.password-reset-content h2 {
	margin       : 15px 0;
	margin-bottom: 45px;
	color        : #333;
	font-size    : 2rem;
}

.login-content .input-div,
.password-reset-content .input-div {
	position             : relative;
	display              : grid;
	grid-template-columns: 7% 93%;
	margin               : 25px 0;
	padding              : 5px 0;
	border-bottom        : 2px solid #d9d9d9;
	margin-bottom        : 10px;
}

.login-content .input-div.one,
.password-reset-content .input-div.one {
	margin-top: 0;
}

.i {
	color          : #d9d9d9;
	display        : flex;
	justify-content: center;
	align-items    : center;
}

.i i {
	transition: .3s;
}

.input-div > div {
	position: relative;
	height  : 45px;
}

.input-div > div > h5 {
	position  : absolute;
	left      : 10px;
	top       : 50%;
	transform : translateY(-50%);
	color     : #999;
	font-size : 18px;
	transition: .3s;
}

/* Default - Green accent (for old design) */
.input-div:before,
.input-div:after {
	content         : '';
	position        : absolute;
	bottom          : -2px;
	width           : 0%;
	height          : 2px;
	background-color: #38d39f;
	transition      : .4s;
}

/* New Design - Maroon accent */
.design-new .input-div:before,
.design-new .input-div:after {
	background-color: #800000;
}

.input-div:before {
	right: 50%;
}

.input-div:after {
	left: 50%;
}

.input-div.focus:before,
.input-div.focus:after {
	width: 50%;
}

.input-div.focus > div > h5 {
	top      : -5px;
	font-size: 15px;
}

/* New Design - Maroon label on focus */
.design-new .input-div.focus > div > h5 {
	color: #800000;
}

/* Old Design - No color change on focus (matches original - stays #999) */
/* No override needed - uses default #999 color */

/* Default - Green icon (for old design) */
.input-div.focus > .i > i {
	color: #38d39f;
}

/* New Design - Maroon icon */
.design-new .input-div.focus > .i > i {
	color: #800000;
}

.input-div > div > input {
	position   : absolute;
	left       : 0;
	top        : 0;
	width      : 100%;
	height     : 100%;
	border     : none;
	outline    : none;
	background : none;
	padding    : 0.5rem 0.7rem;
	font-size  : 1.2rem;
	color      : #555;
	font-family: 'poppins', sans-serif;
}

.input-div.pass {
	margin-bottom: 4px;
}

a {
	display        : block;
	text-align     : right;
	text-decoration: none;
	color          : #999;
	font-size      : 0.9rem;
	transition     : .3s;
}

/* Old Design - Link margin */
.design-old a {
	margin-bottom: 30px;
}

/* Default - Green link hover (for old design) */
a:hover {
	color: #38d39f;
}

/* New Design - Maroon link hover */
.design-new a:hover {
	color: #800000;
}

/* New Design - Red button */
.design-new .btn {
	display         : block;
	width           : 100%;
	height          : 50px;
	border-radius   : 25px;
	outline         : none;
	border          : none;
	background-color: #f01908;
	background-size : 200%;
	font-size       : 1.2rem;
	color           : #fff;
	font-family     : 'Poppins', sans-serif;
	margin          : 1rem 0;
	cursor          : pointer;
	transition      : .5s;
}

.design-new .btn:hover {
	background-color: #d01607;
	opacity: 0.9;
}

/* Old Design - Green gradient button */
.design-old .btn {
	display         : block;
	width           : 100%;
	height          : 50px;
	border-radius   : 25px;
	outline         : none;
	border          : none;
	background-image: linear-gradient(to right, #32be8f, #38d39f, #0C865D);
	background-size : 200%;
	font-size       : 1.2rem;
	color           : #fff;
	font-family     : 'Poppins', sans-serif;
	margin          : 1rem 0;
	cursor          : pointer;
	transition      : .5s;
}

.design-old .btn:hover {
	background-position: right;
}


.invalid-feedback {
	color: #f95050;
}

/* New Design - Project Reminder (dark text on white) */
.design-new .project-reminder {
	color: #333333;
	text-align: center;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #e0e0e0;
}

.design-new .project-reminder h3 {
	color: #333333;
	margin-bottom: 15px;
	font-size: 1.2rem;
	text-align: center;
}

.design-new .project-reminder .dates {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.design-new .project-reminder .date-item {
	color: #333333;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 0.9rem;
	text-align: center;
}

.design-new .project-reminder .date-item i {
	color: #f01908;
}

.design-new .project-reminder .date-item .label {
	color: #333333;
	text-align: center;
}

.design-new .project-reminder .date-item.text-danger {
	color: #333333 !important;
}

.design-new .project-reminder .date-item[style*="color: #f95050"] {
	color: #333333 !important;
}

/* Old Design - Project Reminder (use default/inherited styles, no special styling) */
/* No override needed - uses default styles */

@media screen and (max-width: 1050px) {
	.container{
		grid-gap: 5rem;
	}
}

@media screen and (max-width: 1000px) {
	form{
		width: 290px;
	}

	.design-old .login-content h2 {
        font-size: 2.4rem;
        margin   : 8px 0;
	}

	.password-reset-content h2 {
        font-size: 1.4rem;
        margin   : 8px 0;
	}

	.img img {
		width: 400px;
	}
}

@media screen and (max-width: 900px) {
	.container {
		grid-template-columns: 1fr;
	}

	.img {
		display: none;
	}

	.wave {
		display: none;
	}

	.login-content,
	.password-reset-content {
		justify-content: center;
	}
}