/* =======================================
	GENERAL
	SYSTEM NAME          : VEPDS
	COMPONENT ID         : NCS.LTA.eService.WebOnline
	COMPONENT DESC		 : NCS.LTA.eService.WebOnline
	REVISION HISTORY
	<dd/mm/yyyy> <Reference No.>       <Author>      <Objective/Description>
	19/02/2026     IT241-2024-001797     Derek         Adjust alignment of UI
	05/03/2026     IT241-2024-001797     Man Yew       Misc adjustments related to Account pages.
	10/03/2026     IT241-2024-001797     Man Yew       Mobile alignment for verify OTP page.
======================================= */

:root {
	--text-color: #333;
	--blue: #3f4fa0;
	--blue-light-100: #f1f3ff;
	--blue-light-200: #eaedf4;
	--blue-dark-100: rgba(63, 79, 160, 1);
	--yellow-100: #fecd20;
	--yellow-200: #e4ba35;
	--light-gray-background: #f8f8f8;
	--primary: #6471bf;
}


body {
	font-family: "Inter", sans-serif;
	line-height: 1.5;
}

p {
	font-family: "Inter", sans-serif;
}

h1, h2, h3 {
	font-family: "Francois One", sans-serif;
	font-weight: bold;
}

h4, h5, h6 {
	font-family: "Inter", sans-serif;
	font-weight: bold;
}

a {
	color: var(--primary);
	text-decoration: none;
	transition: .3s;

	&:hover {
		text-decoration: underline;
	}
}

ul {
	list-style: disc;
	padding-left: 32px;
}

.card {
	margin-bottom: 0;
}

.req {
	color: #F5222D;
	font-weight: 500;
}


/* =======================================
	BOOTSTRAP RESET
======================================= */

.container {
	max-width: 1280px;
	padding-left: 16px;
	padding-right: 16px;
}


/* =======================================
	BUTTON (GENERAL)
======================================= */

.btn {
	transition: .3s;
	height: 48px;
	margin: 0;
	border-radius: 4px;
	font-weight: bold;

	& + .btn {
		margin-left: 0;
	}

	&.btn-link {
		color: var(--primary);
		text-decoration: none;

		&:hover {
			/* background-color: transparent; */
			color: var(--blue);

			/* > span {
				text-decoration: underline;
			} */
		}
	}

	&.btn-primary {
		background-color: var(--primary);
		border-color: var(--primary);

		&:hover {
			/* background-color: var(--blue-dark-100); */
			background-color: var(--blue);
			border-color: var(--blue);
		}

		&:disabled {
			background-color: #ABAEBF;
			border-color: #ABAEBF;
			opacity: 1;
		}
	}

	&.btn-outline-primary {
		border: 2px solid var(--primary);
		background-color: transparent;
		color: var(--primary);

		&:hover {
			background-color: var(--blue-light-100);
			border-color: var(--blue);
			color: var(--blue);
		}
		

		&:focus {
			background-color: var(--primary);
			border-color: var(--primary);
			color: #FFF;
		}
	}
}


/* =======================================
	BUTTON HOLDER
======================================= */

.btn-holder {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	section {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
		flex: 1 1 auto;

		&:last-of-type {
			/* justify-content: flex-end; */
			align-items: flex-end;
		}
	}

	button {
		min-width: 110px;
	}
}

@media (max-width: 767.98px) {
	.btn-holder {
		flex-direction: column;
		gap: 8px;
	
		section {
			flex: 1 1 auto;
			width: 100%;
			gap: 8px;

			> button {
				flex: 1 1 auto;
				width: 100%;
			}
		}
	}
}


/* =======================================
	MODAL
======================================= */

.modal-footer {
	background-color: var(--light-gray-background);

	.btn-holder {
		margin: 0;
	}
}


/* =======================================
	FORM PAGE HOLDER
======================================= */

.form-page-holder {
	background: linear-gradient(180deg, #444561 0%, #5154A3 100%);
	padding-block: 32px;

	.card {
		&.form-card {
			background-color: #FAFAFA;
			border: 0;
			border-radius: 16px;
			box-shadow: none;
			padding: 24px;
			padding-bottom: 32px;
			margin-bottom: 0;
			display: flex;
			flex-direction: column;
			gap: 0;
			max-width: 992px;
			margin-inline: auto;

			.card-header {
				background-color: transparent;
				border-bottom: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 16px;
				padding: 0;
			}

			> .card-body {
				padding: 0;
			}

		}
	}

}


/* =======================================
	FORM HOLDER
======================================= */

.form-holder {
	display: flex;
	flex-direction: column;
	gap: 0;

	.form-holder__header {
		display: flex;
		flex-direction: column;
		gap: 0;

		> * {
			margin-bottom: 0;
		}
	}

	.form-holder__body {
		display: flex;
		flex-direction: column;
		gap: 0;

		> * {
			margin-bottom: 0;
		}

		section {
			display: flex;
			flex-direction: column;
			gap: 16px;

			> * {
				margin-bottom: 0;
			}
		}
	}
}


/* =======================================
	FORM STICKY FOOTER
======================================= */

@media (max-width: 767.98px) {
	.form-sticky-footer {
		position: sticky;
		bottom: 0;
		border-top: 1px solid var(--bs-border-color);
		padding: 16px 24px;
		background-color: #FAFAFA;
		margin-inline: -24px;
		margin-bottom: -16px !important;
		z-index: 3;
		transition: .3s;
	}
}


/* =======================================
	FORM TABS
======================================= */

.form-tabs-holder {
	background-color: #FFF;
	padding: 8px;
	box-shadow: 0 1px 4px 0 rgba(165, 165, 165, 8%);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;

	.nav {
		flex: 1 1 auto;

		.nav-item {
			a.nav-link {
				cursor: pointer;
				border-radius: 16px;
				color: #595959 !important;
				font-weight: bold;
				transition: .3s;

				&:hover {
					color: var(--primary) !important;
					background-color: var(--blue-light-100);
					text-decoration: none;
				}

				&.active {
					background-color: var(--primary);
					color: var(--light-gray-background) !important
				}
			}
		}
	}
}




/* =======================================
	FORM ELEMENTS
======================================= */

/* input {
	&.form-control {
		&::placeholder {
		}
	}
} */


/**
* FORM GROUP
*/

.form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;

	> * {
		margin-bottom: 0;
	}

	label {
		font-weight: 600;
		display: flex;
		align-items: baseline;
		gap: 4px;
	}

	.k-input-inner::placeholder {
		color: darkgrey;
	}
}


/**
* INPUT GROUP
*/

.input-group {
	.form-control {
		&:first-child {
			border-right-width: 0;
		}
		&:last-child {
			border-left-width: 0;
		}
	}
	
	.input-group-text {
		color: #595959;

		> .btn {
			color: #595959;
		}

		&:first-child {
			border-right-width: 0;
		}
		&:last-child {
			border-left-width: 0;
		}
	}
}

.contactInput {
	display: flex;
	align-items: center;
}

/* =======================================
	FORM ELEMENT - 
	FORM CONTROL & SELECT 
======================================= */

.form-control,
.form-select {
	background-color: #FFF;
	box-shadow: 0 1px 4px 0 rgba(165, 165, 165, 12%);
	color: #1F1F1F;
	transition: .3s;

	&::placeholder {
		color: rgba(0, 0, 0, 50%);
		font-weight: 400;
		font-style: normal !important;
	}

	&:focus {
		border-color: #86b7fe;
		outline: 0;
		box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) !important;
	}
}

.form-select {
	--bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23595959' d='M2 5 L8 11 L14 5 Z' /%3E%3C/svg%3E");
	background-size: 18px 16px;
	color: var(--ds-mysf-neutral-500);
	font-weight: 400;
	padding-right: 48px;
}


/* =======================================
	FORM ELEMENT - FLOATING
	FORM CONTROL & SELECT 
======================================= */

.form-holder {
	.form-floating {
		> label {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			color: #595959;
			font-size: 14px !important;
			font-weight: 400;
			opacity: 1 !important;
			transition: .3s;
			padding: 16px 16px 8px;
			height: auto !important;
			transform: none !important;
			transition: .3s;
		}

		> .form-control,
		> .form-select {
			background-color: #FFF;
			box-shadow: 0 1px 4px 0 rgba(165, 165, 165, 12%);
			color: #1F1F1F;
			border: 0;
			border-radius: 16px;
			padding: 16px;
			padding-top: 44px;
			height: auto;
			font-size: 16px;
			line-height: 1.5;
			font-family: "Inter", sans-serif;
		}

		> .form-select {
			background-position: right 20px bottom 16px;
		}
	}
}



/* =======================================
	FORM ELEMENT - CAPTCHA
======================================= */

.card {
	&.form-captcha-card {
		border: 0;
		border-radius: 16px;
		box-shadow: 0 1px 4px 0 rgba(165, 165, 165, 12%);
		padding: 0;

		.card-body {
			display: flex;
			flex-direction: column;
			gap: 16px;
			padding: 16px;
		}

		.form-captcha-img-holder {
			display: flex;
			align-items: center;
			gap: 4px;
		}
	}
}


/* =======================================
	FORM ELEMENT - DATE PICKER
======================================= */

.form-date-picker {
	position: relative;
	background-color: var(--bs-white);
	border-radius: 8px;

	.input-group {
		> .form-control {
			background-color: transparent;
			border-radius: 16px !important;
			border-right-width: 1px;
			padding: 16px !important;
			padding-right: 48px !important;
			padding-top: 44px !important;
			z-index: 1;
			text-align: left;
			margin: 0;
			width: auto !important;
			border: 0;
			min-height: 84px;
		}
		> .input-group-text {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			z-index: 1;
			top: 0;
			bottom: 0;
			right: 0;
			width: 56px;
			height: auto;
			padding: 28px 16px 4px;
			background-color: transparent;
			border-color: transparent;

			> .btn {
				&:hover {
					background-color: transparent;
				}
			}
		}
	}
}


/* =======================================
	FORM ELEMENT - OTP
======================================= */

.form-otp-holder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;

	> span {
		font-family: "Francois One", sans-serif;
	}

	.form-group {
		flex-direction: row;
		align-items: center;
		justify-content: center;

		.form-control
		{
			background-color: #FFF;
			box-shadow: 0 1px 4px 0 rgba(165, 165, 165, 12%);
			color: #1F1F1F;
			border: 0;
			border-radius: 8px;
			padding: 16px;
			height: 60px;
			width: 60px;
			text-align: center;
			font-size: 20px;
			line-height: 1.5;
			font-family: "Francois One", sans-serif;
		}
	}
}

@media screen and (max-width:768px) {
	.form-otp-holder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;

		> span {
			font-family: "Francois One", sans-serif;
		}

		.form-group {
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.form-control {
				background-color: #FFF;
				box-shadow: 0 1px 4px 0 rgba(165, 165, 165, 12%);
				color: #1F1F1F;
				border: 0;
				border-radius: 8px;
				padding: 16px;
				height:	25%;
				width: 25%;
				text-align: center;
				font-size: 20px;
				line-height: 1.5;
				font-family: "Francois One", sans-serif;
			}
		}
	}
}
/* =======================================
	FORM ELEMENT - CHECKBOX & RADIO
======================================= */

.form-check {
	display: flex;
	gap: 8px;
	padding-left: 0;

	input[type='checkbox'],
	input[type='radio'] {
		width: 24px;
		height: 24px;
		border-color: rgba(0, 0, 0, 25%);
		border-width: 1px;
		margin: 0;
		transition: .3s;

		&:focus {
			/* box-shadow: none; */
			box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 25%);
			border-color: var(--primary);
		}

		&:checked {
			/* background-color: var(--bs-primary) !important; */
			border-color: var(--primary);
			background-color: var(--primary);
		}
	}

	input[type='checkbox'] {
		border-radius: 4px;

		&:checked {
			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
		}

		&:indeterminate {
			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M5.5 10h9'/%3e%3c/svg%3e");
		}
	}

	.form-check-label {
		user-select: none;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		color: #323545;

		&:hover {
			cursor: pointer;
		}
	}
}

.form-check {
	&:hover {
		input[type='checkbox'],
		input[type='radio'] {
			cursor: pointer;
		}
	}
}

.form-check-input[disabled],
.form-check-input:disabled {
	&[type='checkbox'],
	&[type='radio'] {
		background-color: var(--ds-mysf-neutral-100);
		border-color: var(--ds-mysf-neutral-200);
		opacity: 1;

		&:checked,	
		&:indeterminate {
			background-color: var(--ds-mysf-neutral-300);
			border-color: var(--ds-mysf-neutral-300);
		}
		&:hover {
			cursor: not-allowed;
		}
	}

	& ~ .form-check-label {
		opacity: 1;

		&:hover {
			cursor: not-allowed;
		}
	}
}

#oneMLogo {
	width: 203px;
	height: 56px;
	flex-shrink: 0;
	aspect-ratio: 157.00 / 44.97;
}