@font-face {
	font-family: 'Play';
	font-style: normal;
	font-weight: 400;
	src: local(''), url('/fonts/play-v12-latin-regular.woff2') format('woff2'), url('/fonts/play-v12-latin-regular.woff') format('woff');
}

@font-face {
	font-family: 'Play';
	font-style: normal;
	font-weight: 700;
	src: local(''), url('/fonts/play-v12-latin-700.woff2') format('woff2'), url('/fonts/play-v12-latin-700.woff') format('woff');
}

*:not(i) {
	font-family:'Play',sans-serif !important;
	font-weight:normal;
}

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

:root {
	--primary-color: #496985;
	--second-color: #ffffff;
	--black-color: #000000;
}

a {
	text-decoration: none;
	color: var(--black-color);
}

a:hover {
	text-decoration: underline;
}

.wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.login_box {
	position: relative;
	width: 400px;
	backdrop-filter: blur(25px);
	border: 1px solid var(--primary-color);
	border-radius: 15px;
	padding: 2.5em 2.5em 2.5em 2.5em;
	color: var(--black-color);
	box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
}

.input_box {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 20px 0;
	margin-top:35px;
}

.input-field {
	width: 100%;
	height: 40px;
	font-size: 16px;
	background: transparent;
	color: var(--black-color);
	padding-inline: 20px 50px;
	border: 1px solid var(--primary-color);
	border-radius: 6px;
	outline: none;
}

.label {
	position: absolute;
	top: -15px;
	left: 20px;
	transition: 0.2s;
	padding:4px 10px;
	background-color: var(--second-color);
	border-radius:10px;
	font-size: 14px;
}

.icon {
	position: absolute;
	top: 12px;
	right: 25px;
	color: var(--primary-color);
}

.remember-forgot {
	display: flex;
	justify-content: space-between;
	font-size: 15px;
}

.input-submit {
	width: 100%;
	height: 50px;
	background: #ececec;
	font-size: 16px;
	font-weight: 500;
	border-radius: 30px;
	cursor: pointer;
	transition: 0.3s;
	border:1px solid #91ae8f;
}

.input-submit:hover {
	background: var(--primary-color);
	color: var(--second-color);
	border:none;
}

.register {
	text-align: center;
}

.register a {
	font-weight: 500;
}

@media only screen and (max-width: 564px) {
	.wrapper { padding: 20px; }

  .login_box { padding: 1.5em; }
}

.password-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

#password {
	width: 100%;
	padding-right: 50px; /* Space for the eye icon */
}

.toggle-icon {
	position: absolute;
	right: 23px;
	cursor: pointer;
	color: #888;
}

.toggle-icon:hover {
	color: #000;
}

.login-img {width:50%; max-width:200px;padding-bottom:1em}

.reg-btn {font-weight:bold;color: var(--primary-color);}

#error {text-align:center;width:100%;padding:10px;background: #d9534f; color: white;}

		/* Microsoft login button styles */
		.divider {
			display: flex;
			align-items: center;
			text-align: center;
			margin: 20px 0;
			color: #666;
			font-size: 0.85rem;
		}
		
		.divider::before,
		.divider::after {
			content: '';
			flex: 1;
			border-bottom: 1px solid #ddd;
		}
		
		.divider::before {
			margin-right: 15px;
		}
		
		.divider::after {
			margin-left: 15px;
		}
		
		.btn-microsoft {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12px;
			width: 100%;
			padding: 12px 20px;
			background: #fff;
			border: 1px solid #8c8c8c;
			border-radius: 6px;
			font-size: 0.95rem;
			font-weight: 500;
			color: #5e5e5e;
			cursor: pointer;
			text-decoration: none;
			transition: all 0.2s;
		}
		
		.btn-microsoft:hover {
			background: #f8f8f8;
			border-color: #666;
		}
		
		.microsoft-icon {
			width: 20px;
			height: 20px;
		}
		
		.error-box {
			background: #f8d7da;
			color: #721c24;
			border: 1px solid #f5c6cb;
			padding: 12px 16px;
			border-radius: 6px;
			margin-bottom: 20px;
			font-size: 0.9rem;
		}
		
		.error-box i {
			margin-right: 8px;
		}
		
		
         .settings-header {
            text-align: center;
            margin-bottom: 25px;
        }
        
        .settings-header h1 {
            font-size: 1.5rem;
            font-weight: 600;
            color: #333;
            margin: 0;
        }
        
        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #666;
            text-decoration: none;
            font-size: 0.9rem;
            margin-bottom: 20px;
            transition: color 0.2s;
        }
        
        .back-link:hover {
            color: #333;
        }
        
        .settings-section {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
        }
        
        .settings-section h2 {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
            margin: 0 0 15px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .microsoft-status {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .status-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .status-badge.linked {
            background: #d4edda;
            color: #155724;
        }
        
        .status-badge.not-linked {
            background: #f0f0f0;
            color: #666;
        }
        
        .linked-email {
            color: #666;
            font-size: 0.9rem;
        }
        
        .btn-microsoft {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.2s;
        }
        
        .btn-microsoft.link {
            background: #0078d4;
            color: white;
        }
        
        .btn-microsoft.link:hover {
            background: #106ebe;
        }
        
        .btn-microsoft.unlink {
            background: #fff;
            color: #dc3545;
            border: 1px solid #dc3545;
        }
        
        .btn-microsoft.unlink:hover {
            background: #dc3545;
            color: #fff;
        }
        
        .alert {
            padding: 12px 16px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .alert-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .microsoft-icon {
            width: 20px;
            height: 20px;
        }
        
        .help-text {
            color: #666;
            font-size: 0.85rem;
            margin-top: 15px;
            line-height: 1.5;
        }
		
        .microsoft-note {
            margin-top: 10px;
            font-size: 0.85rem;
            color: #666;
            text-align: center;
        }