body,
html {
	height: 100%;
}

body.waiting * {
	cursor: progress !important;
}

* {
	font-family: "Poppins", sans-serif;
	word-wrap: break-word;
}

body {
	font-family: "Poppins", sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 3rem;
	background: #f8f8f8;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.first-row {
	width: 583px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.onboard {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 21px;
}

form > h2 {
	font-size: 22px;
	font-weight: 600;
	text-align: center;
}

form > h6 {
	font-size: 15px;
	font-weight: 400;
	text-align: center;
}

.layout {
	width: 583px;
	padding: 33px;
	flex-shrink: 0;
	border-radius: var(--Number, 0px);
	border: 0.1px solid #979797;
	background: #f8f8f8;
	box-shadow: 2px 4px 6px 1px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-color: #f8f8f800;
}

.digit-group {
	input {
		width: 40px;
		height: 50px;
		background-color: transparent;
		border: none;
		line-height: 50px;
		text-align: center;
		font-size: 15px;
		font-family: "Raleway", sans-serif;
		font-weight: 200;
		margin: 0 2px;
		border-bottom: 2px solid #7d7c7c;
		outline: none;
	}
}
.digit-group > input:focus,
.otpInput:focus {
	border-bottom: 0.3px solid #52a390 !important;
	outline: none;
}

input:focus {
	outline: none;
}

.digit-group > input:nth-child(1) {
	cursor: pointer;
	pointer-events: all;
}

.prompt {
	margin-bottom: 20px;
	font-size: 20px;
	color: white;
}

.proceed {
	display: flex;
	align-items: center;
	width: 88%;
	justify-content: flex-end;
}

#btn {
	height: 43.68px;
	width: 201px;
	background-color: #ccb4ee;
	border: none;
	border-radius: 63px;
	font-weight: 500;
	font-size: 15px;
}

#footer {
	background-color: #290d48;
	display: flex;
	justify-content: center;
	color: #989494;
	width: 100%;
	padding: 8px;
}

.TC {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.buttons-div {
	display: flex;
	align-self: flex-end;
	width: -webkit-fill-available;
	justify-content: center;
}

.Line5 {
	border: none;
	border-bottom: 2px solid #7d7c7c;
	width: 100%;
	background: #f8f8f8;
	display: flex;
	font-size: 14px;
	align-items: flex-end;
}

.Line5New {
	border: none;
	border-bottom: 2px solid #7d7c7c;
	width: 100%;
	background: #f8f8f8;
	display: flex;
	font-size: 14px;
	align-items: flex-end;
	padding: 10px;
}

input {
	padding: 0;
}

.inputLable,
.dropDownLable {
	height: 34px;
	color: #52a390;
	font-size: 14px;
	font-family: Poppins;
	font-weight: 400 !important;
	line-height: 50px;
	word-wrap: break-word;
}

.pan {
	display: flex;
	justify-content: space-between;
}

.Group44 {
	width: 100%;
	padding: 1.5rem 0 0;
	display: flex;
	padding: 1.5rem 0 0;
	flex-direction: column;
	gap: 1rem;
}

.dropdown {
	width: 100%;
}

.dropdown-content {
	padding: 20px;
	position: absolute;
	display: none;
	background-color: #fff;
	min-width: max-content;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.dropdown-content li {
	font-size: 12px;
	float: none;
	color: black;
	padding: 5px 4px;
	border-bottom: 2px solid #f8f8f8;
	text-decoration: none;
	display: flex;
	align-items: center;
	text-align: left;
	border-bottom: 2px solid #f8f8f8;
}

.dropdown-content li:hover {
	background-color: #52a390;
	color: #fff;
}

.dropdown-content > ul > li {
	font-size: 11px;
	float: none;
	color: black;
	padding: 5px 4px;
	border-bottom: 2px solid #f8f8f8;
	text-decoration: none;
	display: block;
	text-align: left;
	border-bottom: 2px solid #f8f8f8;
}

.dropdown-toggle::after {
	display: inline-block;
	margin-left: 0.255em;
	vertical-align: 0.255em;
	content: url("../image/Polygon.png");
	border-top: 0.3em solid transparent;
	border-right: 0.3em solid transparent;
	border-bottom: 0;
	border-left: 0.3em solid transparent;
	transition: transform 0.3s ease;
	/* Add transition for smooth animation */
}

.dropdown-toggle-down::after {
	display: inline-block;
	margin-left: 0.255em;
	vertical-align: 0.255em;
	content: url("../image/Polygon.png");
	border-top: 0.3em solid transparent;
	border-right: 0.3em solid transparent;
	border-bottom: 0;
	border-left: 0.3em solid transparent;
	transform: rotate(180deg);
	transition: transform 0.3s ease;
	/* Add transition for smooth animation */
}

.dropdown-content > ul > li:hover {
	background-color: #52a390;
	color: #fff;
}

#drop {
	display: none;
	gap: 38px;
	padding: inherit;
}

.custom-select-container {
	width: 100%;
	font-size: 14px;
	height: 41px;
	border-radius: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 32px;
	background-color: #ffffff;
	box-shadow: 2px 4px 6px 1px rgba(0, 0, 0, 0.25);
	border-color: #f8f8f800;
}

.dropdown > ul {
	width: 100%;
	padding: 12px;
	border-radius: 10px;
	margin-top: 10px;
	border: none;
}

.dropdown-item {
	height: 42px;
}

.checkBox {
	display: flex;
	flex-direction: column;
}

input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 17px;
	height: 17px;
	border: 0.7px solid #7d7c7c;
	border-radius: 50%;
	margin-right: 10px;
	background-color: transparent;
	position: relative;
	top: 4px;
}

input[type="radio"]:checked {
	border: 0.7px solid #fcb683;
}

input[type="radio"]:checked::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #eb8868;
	border-radius: 50%;
	animation: appear 0.8s;
}

.panCardProceed {
	display: flex;
	align-items: center;
	width: 363px;
	height: 50px;
	justify-content: flex-end;
}

.panCardProceed > #btn {
	height: 50px;
	width: 100%;
	background-color: #ccb4ee;
	border: none;
	border-radius: 63px;
}

#message {
	font-size: 14px;
	font-weight: 400;
}

.circles {
	height: 41px;
	width: 41px;
	border-radius: 100%;
	background-color: #d9d9d9;
}

p {
	font-family: Poppins;
	font-size: 14px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0em;
	text-align: center;
}

.c {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #cbe6c780;
	border-radius: 40px;
	width: 249px;
}

.c > p {
	cursor: pointer;
}

#p1,
#p3 {
	width: 50%;
	font-family: Poppins;
	font-size: 12px;
	font-weight: 600;
	color: #52a390;
	margin: 0;
}

#p2,
#p4 {
	width: 50%;
	color: #52a390;
	font-family: Poppins;
	font-size: 12px;
	font-weight: 600;
	margin: 0px;
}

#p1.active,
#p2.active,
#p3.active,
#p4.active {
	background-color: #52a390; /* Set the background color when active */
	border-radius: 40px;
	color: #f8f8f8;
	height: 33px;
	align-items: center;
	display: flex;
	justify-content: center;
}

.mainDivForToggle {
	display: flex;
	padding: 1.5rem 0 0;
	justify-content: space-between;
	align-items: center;
	display: flex;
	width: 100%;
}

.mainDivForToggleNew {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	display: flex;
	width: 100%;
}

.disabled {
	color: #7d7c7c;
}

.kycGroup {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 0.8rem;
}

.dropDownLable {
	display: flex;
}

.panCheckBox {
	width: 100%;
	justify-content: space-between;
	display: flex;
	flex-direction: row;
}

.panCheckBox > div:nth-child(2) {
	display: flex;
	gap: 1rem;
}

.personalDetails {
	padding: 1.5rem 0 0;
}

form > .buttons-div {
	padding: 1.5rem 0 0;
}

.height {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#page-content {
	flex: 1 0 auto;
}

#PanForm > .checkBox,
#PanForm > .dropdown {
	padding: 1.5rem 0 0 0;
}

#nationalityOption,
#countryOfBirthOption {
	height: 300px;
	overflow-y: scroll;
}

.nomineeCheckbox {
	flex-direction: column;
	gap: 0rem !important;
}

.nomineeCheckbox > div:nth-child(2) {
	display: block;
}

.place {
	display: inherit;
	gap: 2rem;
	width: 100%;
	flex-direction: column;
}

.place > div {
	flex: 1;
	gap: 4rem;
	display: inherit;
}

#nomineeDetailsFrom,
#nomineeDetailsFrom > form,
#startKyc {
	display: inherit;
	flex-direction: column;
	gap: 0.8rem;
	width: 100%;
}

#nomineeDetailsFrom > div,
.place > div > .kycGroup,
#nomineeDetailsFrom > form > div {
	gap: 0.8rem;
}

.file-upload {
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	border-radius: 100px;
	overflow: hidden;
	position: relative;
	background-color: #ffffff;
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.file-upload input {
	position: absolute;
	height: 100%;
	width: 100%;
	left: -0px;
	top: 0px;
	background: transparent;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity = 0);
}

.file-upload .fa-image {
	margin: 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	font-size: 22px;
	color: "#7D7C7C";
	margin-left: 1.5rem;
}

.file-upload .fa-image > p {
	margin: 0px;
	color: "#7D7C7C";
}

.info {
	display: inherit;
	padding-left: 0.5rem;
	gap: 0.5rem;
	align-items: center;
}

.info > img {
	filter: invert(18%) sepia(56%) saturate(1708%) hue-rotate(242deg)
		brightness(101%) contrast(89%);
	height: 14px;
}

.info > p {
	font-size: 12px;
	color: #45485c;
}

#proofs > .Group44 > .inputLable {
	height: auto;
	line-height: unset;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#mobileKyc > input {
	height: 28px;
	font-size: 15px;
}

#startKyc > .kycGroup {
	gap: 0.8rem;
}

.kycGroup > #otpForm {
	flex-direction: row;
	z-index: 1;
	justify-content: space-between;
	position: static;
}

.error,
#pincodeError {
	color: #ef3535;
}

.error-otp {
	color: red !important;
	border-bottom: #ef3535 2px solid !important;
}

.kycGroup > form > .otpInput {
	width: 5ch;
	width: 68px;
	height: 40px;
	font-size: 13px;
	background: #f8f8f8;
	text-align: center;
	border: none;
	border-bottom: 2px #7d7c7c solid;
	margin: 0 5px;
}

.kycGroup > .buttons-div > .proceed {
	display: flex;
	align-items: center;
	width: 100%;
	margin-top: 40px;
	justify-content: space-between;
}

.panCardProceed > #allow {
	height: 50px;
	width: 100%;
	background-color: #ccb4ee;
	border: none;
	border-radius: 63px;
}

#proofOfAddress,
#replaceDiv {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#proofOfAddress .kycGroup {
	gap: 0.8rem;
}

#completeKyc p {
	margin: 0;
	text-align: left;
	padding: 0 2rem;
}

#completeKyc {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.delete {
	display: none;
}

#share::-webkit-inner-spin-button,
#share::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

u,
#resendotp {
	cursor: pointer;
}

#TC {
	cursor: default;
}

#PanForm > p {
	margin: 1rem;
	font-size: 10px;
}

input {
	-webkit-appearance: none; /*For Chrome*/
	-moz-appearance: none; /*For Mozilla*/
	border-radius: 0;
}

.dropdown button {
	color: #000;
}

#otpForm input {
	width: 60px;
	background: #fff;
}

#bankDetails {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

#bankDetails > div > h2 {
	font-size: 22px;
	font-weight: 600;
	text-align: center;
}

#bankDetails #message {
	text-align: left;
	margin-top: -12px;
}

.info {
	justify-content: center;
}

#completeKycDiv {
	display: flex;
	margin-top: 21px;
	height: 74px;
	width: 501px;
	border: 1px solid #979797;
	border-radius: 25px;
}

input[type="date"] {
	display: block;
}

input[type="number"] {
	-webkit-appearance: none; /* Remove default styling in Chrome */
	-moz-appearance: textfield; /* Remove default styling in Firefox */
	appearance: textfield; /* Remove default styling in other browsers */
	border: 1px solid #ccc; /* Add border */
	padding: 10px; /* Add padding */
	font-size: 16px; /* Set font size */
	color: #290d48; /* Set text color */
	width: 100%; /* Set width */
	box-sizing: border-box;
	/* Include padding and border in element's total width and height */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none; /* Remove spin buttons in Chrome */
	margin: 0; /* Remove margin */
}

#modalPan {
	width: 456px;
}
#message.kycMessage {
	width: 296px;
	text-align: center;
}

#mandate .dropdown {
	margin-top: 3rem;
	justify-items: center;
}
.mandatebuttons-div {
	align-items: center;
}

@media (max-width: 600px) {
	#modalPan {
		width: auto;
	}
	button:not(:disabled) {
		opacity: 1;
		cursor: pointer;
		color: #290d48;
	}
	input,
	input.Line5,
	input,
	textarea {
		font-size: 16px !important;
		color: #290d48;
		-webkit-appearance: none; /*For Chrome*/
		-moz-appearance: none; /*For Mozilla*/
		border-radius: 0;
	}
	.form__field {
		-webkit-appearance: none; /*For Chrome*/
		-moz-appearance: none; /*For Mozilla*/
	}
	.Group44 {
		gap: 10px;
	}
	body {
		padding-top: 0;
	}
	#redoBtn {
		margin: 0 !important;
		padding-top: 0.5rem;
	}
	#identity,
	#eSign,
	#completeKyc {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		text-align: center;
		font-weight: normal;
	}
	#identity,
	#eSign {
		height: 611px;
	}
	#identity h6 {
		font-weight: normal;
	}
	#personalDetails,
	#identity,
	#eSign {
		gap: 40px !important;
		width: 100%;
	}
	#completeKyc div h2 {
		font-size: 18px !important;
	}
	#completeKyc div #referenceNo {
		font-size: 15px !important;
		color: #45485c !important;
		overflow-wrap: anywhere;
	}
	.onboard,
	.first-row {
		min-width: 343px;
		max-width: 343px;
		width: 90%;
	}
	#completeKyc p {
		padding: 0 0.5rem;
	}
	#completeKycDiv {
		height: 68px;
		width: 295px;
		border: 1px solid #97979773;
		border-radius: 10px;
		background: #f8f8f8;
	}
	#completeKycDiv > div {
		padding: 0.65rem 0 !important;
	}
	.buttons-div.personalDetails.identity,
	.buttons-div.personalDetails.eSign {
		margin-top: 0px !important;
		padding: 0px !important;
	}
	#eSign .file-upload {
		border-radius: 10px !important;
		height: 57px !important;
	}
	#completeKyc .file-upload {
		border-radius: 10px !important;
		height: 77px !important;
	}
	#eSign .file-upload p {
		width: 80% !important;
		text-align: left !important;
		font-size: 13px !important;
	}
	#completeKyc .file-upload p {
		width: 100% !important;
		text-align: left !important;
		font-size: 13px !important;
	}
	.panCardProceed > #btn {
		height: 44px;
		width: 295px;
	}
	.mainDivForToggleNew {
		flex-direction: column;
		gap: 25px;
	}
	.mainDivForToggleNew .c {
		width: 270px;
		margin: auto;
		height: 37px;
	}
	.mainDivForToggleNew .c p,
	.mainDivForToggleNew .c p.active {
		height: 37px !important;
		line-height: 37px;
	}
	.kycGroup .inputLable {
		height: auto;
	}
	.kycGroup .inputLable div {
		font-size: 15px;
		display: flex;
		flex-direction: column;
		line-height: 18px;
	}
	.kycGroup .inputLable div small {
		font-size: 12px;
	}
	.onboard {
		padding: 0 25px;
	}
	.panCheckBox > div:nth-child(2) {
		gap: 60px;
	}
	.panCheckBox > div:nth-child(2) div {
		flex-direction: row-reverse;
		display: flex;
		gap: 10px;
		align-items: baseline;
	}
	.checkBox.panCheckBox.kycGroup {
		display: flex;
		flex-direction: column;
	}
	.layout {
		min-width: 343px;
		width: 100%;
		padding: 30px 24px;
		background: #fff;
		box-shadow: none;
		border: 1px solid #9797975e;
	}
	#page-content {
		align-items: center;
		width: 100%;
	}
	form > h2 {
		font-size: 18px;
	}
	#bankDetails > div > h2 {
		font-size: 18px;
	}
	input[type="date"],
	.Line5 {
		padding: 10px;
	}
	.date.inputLable {
		height: 34px;
	}
	.Line5,
	.Line5New {
		font-size: 13px;
		line-height: 17px;
		background-color: #fff;
	}
	.checkBox {
		display: flex;
		font-size: 13px;
	}
	.checkBox > div {
		display: flex;
		gap: 15px;
	}
	input[type="radio"] {
		width: 25px;
		height: 25px;
	}
	input[type="radio"]:checked::before {
		width: 17.8px;
		height: 17.8px;
	}
	#PanForm {
		width: 100%;
	}
	#proofs div,
	#proofs .file-upload .fa-image > p {
		font-size: 13px !important;
	}
	#proofs h2 {
		font-size: 18px;
	}
	#proofs .label {
		font-size: 15px;
	}
	.file-upload {
		border: 1px solid #97979754;
		box-shadow: none;
		filter: none;
		background: #f8f8f8;
	}
	#PanForm > p {
		width: 295px;
		color: #45485c;
		margin: 0;
		margin-top: 40px;
		font-size: 13px;
		text-align: left;
	}
	.custom-select-container {
		box-shadow: none;
		border: 1px solid #9797975e;
		background-color: #f8f8f8;
		font-size: 13px;
	}
	#btn:disabled {
		color: #fff !important;
		background-color: #d6d6d6 !important;
	}
	.nomineeCheckbox > div:nth-child(1) input[type="radio"] {
		height: 23px !important;
	}
	.nomineeCheckbox > div:nth-child(2) input[type="radio"] {
		height: 23px !important;
		width: 28px !important;
	}
	.nomineeCheckbox > div:nth-child(2) input[type="radio"]:checked {
		width: 28px !important;
		height: 22px !important;
	}
	.checkBox.nomineeCheckbox div {
		gap: 0px;
	}
	.nomineeCheckbox > div:nth-child(2) {
		display: flex;
		gap: 0px;
	}
	.dropdown-menu.dropdown-content.show {
		max-height: 350px;
		height: auto;
		overflow: scroll;
	}
	.otpHeader {
		font-size: 18px;
	}
	.layout.shownumber {
		font-size: 15px;
	}
	#otpForm input {
		width: 40px !important;
	}
	.kycGroup .buttons-div .proceed {
		flex-direction: column;
		gap: 15px;
	}
	#bankDetails {
		gap: 40px;
	}
	.TC {
		width: 260px;
	}
	.fa-regular.fa-trash-can.delete {
		font-size: 15px !important;
	}
	#bankDetails #message {
		text-align: left;
		margin-top: 0px;
	}
	.file-upload p {
		width: 60% !important;
	}
	#bankDetails .Line5 {
		font-size: 13px;
		line-height: 30px;
		background-color: #fff;
		margin-top: 0px;
		padding-bottom: 3px;
	}
	#bankDetails .kycGroup {
		gap: 0px;
	}
	#proofOfAddress #mobileKyc input {
		width: 20px;
	}
	#PanForm input[type="radio"] {
		width: 35px;
		height: 25px;
	}
	#startKyc #mobileKyc > input {
		width: 20px;
	}
}

.guardian {
	display: none;
}
div.kycGroup.nominee,
.dropdown.nominee {
	display: none;
}