* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	body,
	html {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Arial, sans-serif;
		background-size: cover;
		background-position: center bottom;
		margin: 0;
		background-repeat: no-repeat;
	}
	/* Overlay */
	
	body::before {
		content: '';
		position: fixed;
		/* Use fixed so it covers entire screen */
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.82);
		/* Black overlay with 50% opacity */
		z-index: 0;
	}
	/* Content on top of overlay */
	
	body > * {
		position: relative;
		z-index: 1;
	}
	
	body {
		
	}
	
	.login-container {
		background-color: rgba(255, 255, 255, 0.973);
		padding: 25px 35px 25px 35px;
		width: 100%;
		max-width: 390px;
		text-align: left;
		border-radius: 8px;
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
		margin: 0 10px;
		font-family: Arial, Helvetica, sans-serif;
	}
	
	.logo {
		width: 100px;
		height: auto;
		margin-bottom: 20px;
	}
	
	input[type="email"],
	input[type="password"] {
		width: 100%;
		padding: 15px;
		margin: 5px 0;
		border: none;
		border-bottom: 1px solid #ccc;
		border-radius: 4px;
		font-size: 16px;
	}

	input[type="password"] {
		margin-top: 10px;
	}
	
	.remember-me {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 5px 0;
		font-size: 15px;
		font-weight: 500;
		color: rgb(2, 65, 137);
		font-family: Arial, Helvetica, sans-serif;
	}
	
	.remember-me input {
		margin-right: 8px;
	}
	
	.login-button {
		width: auto;
		padding: 12px;
		background-color: rgba(26, 26, 26, 0.863);
		color: #fff;
		font-size: 16px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		margin-top: 15px;
		transition: background-color 0.3s;
	}
	
	.login-button:hover {
		background-color: rgb(23, 23, 23);
	}
	
	#msgfont {
		color: red;
	}
	
	.instructions {
		font-size: 16px;
		color: #333;
		margin-bottom: 20px;
	}
	/* Loader */
    #loader {
        position: fixed;
        inset: 0;
        background: #111;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999999;
    }

    .spinner {
        width: 60px;
        height: 60px;
        border: 5px solid rgba(255,255,255,0.2);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
	    /* Hide content initially */
    #page {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease;
    }

    /* Show after background loads */
    #page.show {
        opacity: 1;
        visibility: visible;
    }
	.btncontainer {
    display: flex;
    justify-content: center;
}