/*
MyERP_login_style v1.0.0
*/
		:root {
			--card-bg: #fdfeff;
			--card-border: #245dc7;
			--field-border: #aaa;
			--field-border-focus: #c3c3c3;
			--label-focus: #001c39;
			--accent: #001c39;
			--btn-submit: #2c69cb;
			--btn-submit-hover: #023ead;
			--txt-message: #b22222;
			--bord-rad: 20px;
			--page-bg: linear-gradient(160deg, var(--accent), #7aa3ee);

		}
		
		html,
		body {
			height: 100%;
		}

		@font-face {
			font-family: 'MyPoppins';
			src: url('fonts/poppins/Poppins-Regular.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
		}
		@font-face {
			font-family: 'MyPoppinsB';
			src: url('fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
		}

		body {
			margin: 0;
			font-family: 'MyPoppins',system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
			background: var(--page-bg);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
		}

		.login-card {
			width: 100%;
			max-width: 25rem;
			border: 1px solid var(--card-border);
			border-radius: var(--bord-rad);
			background: var(--card-bg);
			box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
			padding: 0;
			box-sizing: border-box;
			text-align: center;
		}

		.logo {
			margin-top: 1rem;
		}

		.logo img {
			width: 150px;
			height: auto;
		}

		h1 {
			font-size: 1.2rem;
			margin: 1rem 0 0 0;
			color: #838383;
		}

		.login_body {
			padding: 1rem 4rem 0 4rem;
		}
		form {
			display: grid;
			gap: .8rem;
			text-align: left
		}

		.field {
			position: relative
		}

		.field input {
			width: 100%;
			padding: 0.7rem 0.7rem 0.7rem 0.7rem;
			border: 1px solid var(--field-border);
			border-radius: 8px;
			background: transparent;
			box-sizing: border-box;
			font-size: 0.95rem;
			outline: none;
		}

		.field input:focus {
			box-shadow: 0 0 10px 5px #0151ff26;
			border-color: var(--field-border-focus);
		}

		.field label {
			position: absolute;
			left: 0.75rem;
			top: 0.65rem;
			font-size: 0.85rem;
			color: rgba(0, 0, 0, 0.65);
			pointer-events: none;
			transition: transform .15s ease, font-size .15s ease, top .15s ease;
			background: var(--card-bg);
			padding: 0 0.25rem;
		}

		.field input:focus+label,
		.field input:not(:placeholder-shown)+label {
			transform: translateY(-62%) scale(0.92);
			top: 0.1rem;
			font-size: 0.8rem;
			color: var(--label-focus)
		}

		#logMsg,
		#lgnMsg {
			min-height: 2rem;
			color: var(--txt-message);
			font-family: system-ui;
			font-size: 0.9rem;
			text-align: start;
		}

		.actions {
			display: flex;
			gap: 0.75rem;
			justify-content: flex-end
		}

		button {
			cursor: pointer;
			padding: 0.6rem 0.9rem;
			border-radius: 8px;
			border: none;
			font-family: 'MyPoppins';
			font-weight: 500
		}
		#btnCancel:hover {
			background: #999;
			color: #fff;
		}
		#btnSubmit {
			background: var(--btn-submit);
			color: #fff;
		}
		#btnSubmit:hover {
			background: var(--btn-submit-hover);
			color: #fff;
			font-weight: bolder;
		}

		button[type="button"] {
			background: #ccc;
			color: #333;
			/*font-family: 'MyPoppinsB';*/
		}

		.card-footer {
			margin-top: 1.5rem;
			padding-top: 4px;
			font-size: 0.7rem;
			color: #555;
			text-align: center;
			background: #ddd;
			border: none;
			border-bottom-left-radius: var(--bord-rad);
			border-bottom-right-radius: var(--bord-rad);
			height: 20px;
		}

		@media (max-width:420px) {
			.login-card {
				padding: 0;
			}

			.logo img {
				width: 110px;
			}
		}