@charset "ISO-8859-1";

@media screen and (max-width: 700px) {
	.header-container {
		margin-left: 20px !important;
	}
}

.homeReq {
	margin-left: 200px;
	margin-right: 200px;
	background-color: #fff;
}

@media screen and (max-width: 950px) {
	.homeReq {
		margin-left: 0px;
		margin-right: 0px;
		width: 100%;
	}
}

.Accnt-Type {
	display: flex;
	justify-content: center;
	flex-flow: column;
	align-items: flex-start;
	width: 50%
}

@media screen and (max-width: 950px) {
	.Accnt-Type {
		width: 100% !important;
	}
}

.Accnt-Type-radio {
	display: flex;
	flex-wrap: wrap;
	/* align-content: flex-start; */
}

table#form1\:cType tbody {
	display: flex;
	flex-direction: row; /* To arrange the radio buttons horizontally */
	justify-content: space-around; /* Distribute space around items */
	align-items: center; /* Align items vertically in the center */
}

table#form1\:cType tbody tr {
	display: flex;
	flex-wrap: wrap; /* Vertically aligns the td content in the center */
	/* You might also want: */
	/* gap: 10px; Add space between td elements */
}

table#form1\:cType tbody tr td {
	display: flex; /* Makes the td elements flex items */
	align-items: center;
	/* Vertically aligns the td content in the center */
	/* You might also want: */
	/* gap: 10px; Add space between td elements */
}

@media ( max-width : 768px) {
	div#form1\:customerGroup12MainPanel_content {
		padding: 0 !important;
		/* Using !important to ensure the style is applied, you might need to adjust based on specificity */
	}
}

@media ( max-width : 768px) { /* Or your desired mobile breakpoint */
	div#form1\:customerGroup12panel_content {
		padding: 0 !important;
		display: flex;
		flex-direction: column;
	}
}

@media ( max-width : 768px) {
	.action-buttons {
		flex-direction: row !important;
		justify-content: center !important;
		margin-top: 15px !important;
	}
	.action-buttons p:commandLink {
		margin: 0 10px !important;
	}

	/* Center align labels on mobile */
	.ui-g-12.ui-md-4.ui-lg-4, .ui-g-12.ui-md-3.ui-lg-3 {
		text-align: center !important;
		margin-bottom: 10px !important;
	}
}

/* Tablet and larger screens */
@media ( min-width : 769px) {
	.ui-md-4.ui-lg-4 {
		text-align: left !important;
	}
	.ui-md-3.ui-lg-3 {
		text-align: center !important;
	}
	.ui-md-5.ui-lg-5 {
		text-align: right !important;
	}
}

.ui-carousel-item.ui-carousel-item-active.ui-carousel-item-start {
	display: flex;
	justify-content: center;
}

@media ( max-width : 768px) {
	.refCodeWidth {
		width: 100% !important;
	}
}

.refCodeWidth {
	width: 80%;
}

@media ( max-width : 768px) {
	.customer-group {
		display: contents !important;
	}
}

.field {
	display: flex;
	margin-bottom: 1rem;
	flex-wrap: wrap;
	align-content: center;
	justify-content: flex-start;
	align-items: flex-start;
	flex-flow: column;
}

@media ( max-width : 768px) {
	.field {
		width: 100% !important;
	}
}

@media ( max-width : 768px) {
	.colfld4 {
		display: flex;
		flex: 0 0 auto;
		padding: .5rem;
		flex-flow: column;
		flex: 0 0 auto;
	}
}

@media ( min-width : 768px) {
	.colfld12 {
		display: flex;
		flex: 0 0 auto;
		padding: .5rem;
		width: 100%;
		flex: 0 0 auto;
	}
}

.otpAlignment {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-content: stretch;
	justify-content: space-evenly;
}