@charset "UTF-8";
.homecard-section {
	display: flex;
	padding: 24px;
	margin-bottom: 16px;
	border-radius: 10px;
	border: 1px solid var(--neutral-colors-gray-400, #E0E0E3);
	.left-content {
		display: flex;
		width: calc(50% - 20px);
		align-items: center;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;
		h3 {
			margin-bottom: 0;
			font-size: 22px;
			font-weight: 700;
			width: 100%;
			color: var(--neutral-colors-gray-800, #525255);
		}
		.lg-card {
			margin-top: 16px;
			width: 326px;
		}
		.condition {
			display: flex;
			justify-content: center;
			gap: 4px;
			width: 100%;
			span {
				height: 22px;
				background: #EBF3FA 0% 0% no-repeat padding-box;
				border-radius: 12px;
				color: var(--primary-color-deep-blue-800);
				font: normal normal bold 12px/16px Prompt;
				padding: 2px 14px;
				letter-spacing: 0px;
				cursor: pointer;
			}
			span:hover {
				background: var(--primary-color-deep-blue-800) 0% 0% no-repeat padding-box;
				color: #EBF3FA;
			}
			button {
				width: 22px;
				height: 22px;
				background: #EEF4FA 0% 0% no-repeat padding-box;
				border-radius: 10px;
				border: unset;
				padding: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				outline: unset !important;
				i {
					font-size: 12px;
					color: var(--primary-color-deep-blue-800);
					margin: 0;
				}
			}
			button:hover {
				background: var(--primary-color-deep-blue-800) 0% 0% no-repeat padding-box;
				i {
					color: #EBF3FA;
				}
			}
		}
		.cards {
			display: flex;
			gap: 12px;
			width: 100%;
			justify-content: center;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			margin-top: 12px;
			.card {
				position: relative;
				.sm-card {
					width: 62px;
					height: 47px;
				}
			}
			.card.active:after {
				content: '';
				position: absolute;
				background-color: var(--primary-colors-orange-700);
				border-radius: 10px;
				width: 30px;
				height: 4px;
				left: 16px;
				bottom: 0;
			}
		}
	}
	.right-content {
		display: flex;
		flex-direction: column;
		width: calc(50% + 20px);
		padding-top: 60px;
		.top-content {
			margin-bottom: 16px;
			.card-name {
				width: 100%;
				color: var(--primary-color-deep-blue-800);
				text-align: left;
				font: normal normal bold 18px/16px Prompt;
				letter-spacing: 0px;
				margin-bottom: 16px;
			}
			.detail-flex {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex-wrap: wrap;
				flex-direction: row;
				text-align: left;
				row-gap: 6px;
				column-gap: 0;
				font-size: 16px;
				font-weight: 500;
				> div {
					display: flex;
					.title {
						width: 112px;
						color: var(--neutral-colors-gray-700, #99999C);
						border: unset !important;
						margin: unset !important;
					}
					.result {
						width: calc(100% - 112px);
						color: var(--neutral-colors-gray-800, #525255);
					}
				}
				> div:first-child {
					width: 100%;
					display: flex;
				}
			}
		}
		.bottom-content {
			width: 100%;
			padding: 20px 20px;
			font-size: 16px;
			color: var(--neutral-colors-gray-700, #99999C);
			background: #F9F9FB 0% 0% no-repeat padding-box;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			gap: 6px;
			div.balance {
				font: normal normal bold 18px/16px Prompt;
				color: var(--primary-color-deep-blue-800);
				font-weight: 700;
				span {
					font: normal normal bold 24px/16px Prompt;
				}
			}
			div.p {
				font: normal normal normal 16px/16px Prompt;
			}
		}
	}
}
.homecard-section.unlink {
	.left-content {
		width: calc(55% - 20px);
	}
	.right-content {
		width: calc(45% - 20px);
		gap: 16px;
		.ui.dropdown.selection {
			color: var(--neutral-colors-gray-800, #525255);
			border-radius: 10px !important;
			height: 45px;
			padding: 14px 36px 14px 12px;
			width: fit-content;
			min-width: 120px !important;
			padding-right: 30px;
			border: 1px solid #bbc7d0;
			.text {
				padding: unset;
				font-size: 16px;
				white-space: nowrap;
			}
			.icon {
				top: 1em;
				right: 8px;
			}
			.icon::before {
				content: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 8L12 17L21 8" stroke="%23525255" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>');
			}
			.menu {
				top: 50px !important;
				box-shadow: 0px 3px 6px #00000029;
				border: 1px solid #E0E0E3 !important;
				border-radius: 8px;
				width: 245px !important;
				max-width: unset;
				box-sizing: border-box;
				.item {
					color: var(--neutral-colors-gray-800, #525255);
					padding: 14px 14px;
				}
				.item:hover {
					font-weight: 500;
				}
				.active.item {
					font-weight: 500;
				}
			}
		}
		.form > div {
			gap: 5px;
			display: flex;
		}
		.field {
			flex: 1;
			input {
				width: 100%;
				padding: 14px 0 14px 8px;
				border-radius: 10px !important;
				font-size: 16px;
				color: var(--neutral-colors-gray-800, #525255);
			}
			.error-message {
				display: none;
				padding: 4px 16px;
				font-size: 12px;
				color: #DA3731;
			}
		}
		.field:not(.error) {
			input {
				border: 1px solid #bbc7d0;
			}
		}
		.field.error {
			input {
				color: #9f3a38;
			}
			.error-message {
				display: block;
			}
		}
		input {
			height: 45px;
			border-radius: 10px !important;
			font-size: 16px;
			border: 1px solid #bbc7d0;
			font-size: 16px;
		}
		.actions {
			.btn {
				width: 100%;
				height: 50px;
				border-radius: 10px;
				color: #FFFFFF;
				background: var(--primary-color-deep-blue-800);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 18px;
				cursor: pointer;
				transition: .2s;
			}
			.btn:hover {
				background: var(--primary-colors-orange);
			}
			.divider {
				margin: 8px 0px 8px 0px;
				color: var(--neutral-colors-gray-800, #525255);
				font-size: 16px;
				font-weight: 500;
			}
		}
	}
}
.homecard-otp-modal {
	width: 460px !important;
	.content {
		font-size: 16px !important;
		.message {
			margin-bottom: 4px;
			margin-top: 2px;
		}
		.ui.input {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			input {
				border-radius: 10px 0px 0px 10px;
				width: 80%;
			}
			button {
				background: var(--primary-color-deep-blue-800);
				color: var(--neutral-colors-white, #FFF);
				border-radius: 0px 10px 10px 0px;
				border: unset;
				width: 20%;
				cursor: pointer;
			}
		}
		.homecard-otp-countdown {
			color:#FF0000;
			margin-top: 6px;
			font-size: 12px;
		}
	}
}
.homecard-register-modal {
	background: var(--neutral-colors-white, #FFF);
	padding: 48px;
	border-radius: 20px !important;
	width: 800px !important;
	.header {
		width: 100%;
		display: flex;
		align-content: center;
		flex-wrap: wrap;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		column-gap: 32px;
		margin-bottom: 10px;
		.header-text {
			color: var(--neutral-colors-gray-800, #525255);
			font-feature-settings: 'clig' off, 'liga' off;
			font-family: Prompt;
			font-size: 32px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			flex: 1;
		}
		.close {
			cursor: pointer;
		}
	}
	.content {
		.field {
			.field>label {
				color: var(--neutral-colors-gray-800, #525255) !important;
			}
			flex: 1;
			input {
				width: 100%;
				font-size: 16px;
				color: var(--neutral-colors-gray-800, #525255) !important;
				height: 45px;
				border-radius: 10px !important;
				font-size: 16px !important;
				border: 1px solid #bbc7d0;
				font-size: 16px !important;
			}
			.ui.dropdown.selection {
				height: 45px !important;
				font-size: 16px !important;
				width: 100%;
				border-radius: 10px;
				border: 1px solid var(--neutral-colors-gray-700, #88888C);
				display: flex;
				align-content: center;
				flex-wrap: wrap;
				padding: 0.67857143em 3.2em 0.67857143em 1em;
				.icon {
					top: 1em;
					right: 8px !important;
				}
				.icon::before {
					content: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 8L12 17L21 8" stroke="%23525255" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>');
				}
			}
			.calendar table {
				margin-top: 0 !important;
			}
			.error-message {
				display: none;
				padding: 4px 16px;
				font-size: 12px;
				color: #DA3731;
			}
		}
		.field:not(.error) {
			input, .ui.dropdown.selection {
				border-color: #bbc7d0;
			}
		}
		.field.error .error-message {
			display: block;
		}
		.actions {
			margin-top: 26px;
			display: flex;
			flex-direction: row !important;
			gap: 14px;
			button {
				width: 100%;
				height: 50px;
				border-radius: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 18px;
				cursor: pointer;
				font-weight: 500 !important;
			}
			button.cancle {
				border: 1px solid var(--Neutral-Colors-Gray-400, #E0E0E3);
				background: var(--Neutral-Colors-White, #fff);
				color: var(--Neutral-Colors-Gray-800, #525255);
			}
			button.submit {
				border: unset;
				background: var(--primary-colors-blue);
				color: #fff;
			}
		}
	}
}
.modal.homecard-detail-modal .header {
	padding-top: 25px;
	padding-bottom: 25px;
	.header-text {
		visibility: hidden;
	}
}
.modal.homecard-detail-modal.with-header .header {
	background: #EBF3FA 0% 0% no-repeat padding-box;
	.header-text {
		display: flex;
		align-items: center;
		gap: 22px;
		font-size: 24px;
		font-weight: 500;
		img {
			width: 50px;
		}
	}
}