/*fitting in with fod :)*/

/* Prevent layout shift when scrollbar disappears on modal */
html, body {
	scrollbar-gutter: stable;
}

.page-header-relative {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
}

.page-title-spacer {
	margin-top: 8rem
}

.col-form-label {
	font-size: 0.95rem;
}


.upload-document-button {
	display: flex !important;
	width: fit-content !important;
	align-items: center !important;
}

#uploaded-files > #uploaded-file + #uploaded-file {
	border-top: 1px solid #cccccc !important;
}

.disable-valid > .valid {
	outline: 0 !important;
}

.active-step {
	color: #fff !important;
	background-color: var(--primary);
}

.form-group-p-0 div.form-group.position-relative {
	padding: 0 4px !important;
	margin: 5px 0 0 !important;
}

.form-group-mb-8 div.form-group.position-relative {
	margin-bottom: 8px !important;
}

/*removing chrome autofill background color*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-background-clip: text;
}

.color-placeholder {
	color: #bdbdbd !important;
}


input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
	color: #fff;
	position: relative;
}

input[type="date"]::-webkit-datetime-edit-year-field {
	position: absolute !important;
	border-left: 1px solid #bdbdbd;
	padding: 1px;
	color: #000;
	left: 56px;
}

input[type="date"]::-webkit-datetime-edit-month-field {
	position: absolute !important;
	border-left: 1px solid #bdbdbd;
	padding: 2px;
	color: #000;
	left: 26px;
}


input[type="date"]::-webkit-datetime-edit-day-field {
	position: absolute !important;
	color: #000;
	padding: 2px;
	left: 4px;
}

.color-white-hover {
	color: inherit;
}

	.color-white-hover:hover {
		color: white !important;
	}

.force-white.fod-icon-root.fod-svg-icon {
	fill: white !important;
}

.delete-label-row div.mt-2 {
	display: none !important;
}

.form-select.inherit-fs-form-select {
	font-size: inherit !important;
}

.autocomplete-wrapper {
	position: relative;
}

.autocomplete-dropdown {
	position: absolute;
	top: 100% !important;
	left: 0;
	width: 100% !important;
	max-height: 20rem;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	margin-top: 0 !important; /* Ensure no space is added */
	padding-top: 0;
}
/* Success Page Wrapper */
.success-page-flat {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: var(--light-100);
	padding: 20px;
}

/* Success Card */
.success-card-flat {
	background: var(--light);
	border: 1px solid var(--grey-300);
	border-radius: var(--border-radius);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	max-width: 500px;
	width: 100%;
	text-align: center;
	overflow: hidden;
	padding: 20px;
}

/* Header */
.success-header-flat {
	background: var(--primary);
	color: var(--primary-inverse);
	padding: 20px;
	border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.success-icon-flat {
	font-size: 3rem;
	margin-bottom: 10px;
	display: block;
}

.success-title-flat {
	font-size: 1.5rem;
	font-weight: bold;
	margin: 0;
}

/* Body */
.success-body-flat {
	padding: 20px;
	font-size: 1rem;
	color: var(--dark);
	line-height: 1.6;
}

.success-message-flat {
	margin: 0;
}

/* Footer */
.success-footer-flat {
	display: flex;
	justify-content: space-around;
	gap: 10px;
	padding: 20px 0;
	border-top: 1px solid var(--grey-300);
}

btn-success-custom-primary {
}

@media (max-width: 576px) {
	.datepicker-scope .fod-input > input.fod-input-root-outlined.fod-input-root-adorned-end,
	.datepicker-scope div.fod-input-slot.fod-input-root-outlined.fod-input-root-adorned-end {
		font-size: 12px;
		padding-inline-start: 10px;
		align-self: center;
	}
}

/* Verify Status CSS*/

.petition-status-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 1rem;
}

.status-box {
	border: 2px solid #007bff;
	background-color: #fafafa;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

	.status-box dt {
		font-weight: 600;
		color: #555;
	}

	.status-box dd {
		margin-bottom: 1rem;
		font-size: 0.9rem;
	}

/*modal close button*/
.close-btn {
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	border-radius: 50%;
	font-size: 18px;
	font-weight: bold;
	line-height: 0;
	cursor: pointer;
	color: var(--icon-base-secondary, #444444);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.2s ease-in-out;
}

	.close-btn:hover {
		background: var(--background-danger-default, #D92D20);
		color: white;
	}

.custom-select-wrapper.no-arrow select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: none !important;
}

	.custom-select-wrapper.no-arrow select::-ms-expand {
		display: none;
	}

.redirect-container {
	background: #E8F0FB;
	color: black;
	padding: 45px 60px;
}

@media (min-width: 576px) {
	.redirect-container {
		padding: 45px 160px;
	}
}

.redirect-title {
	font-size: 40px;
	font-weight: 500;
	line-height: normal;
	padding-bottom: 10px;
}

.redirect-info {
	line-height: 22px;
}

.redirect-button {
	width: max-content;
	background: #4b6ed2;
	color: white;
	padding: 15px 20px !important;
	border-radius: 8px;
	cursor: pointer !important;
	margin: 25px 0;
	font-size: 14px !important;
}

	.redirect-button:hover {
		background: #4b6ed2;
		color: white;
		cursor: pointer !important;
	}

.unauthorized-container {
	color: black;
	padding: 45px 40px;
}

/*@media (min-width: 576px) {
        .unauthorized-container {
                padding: 45px 160px;
        }
}*/

.placeholder-cards-wrapper {
	position: relative;
	height: 200px;
	margin-bottom: 40px;
}

.placeholder-card {
	position: relative;
	display: flex;
	gap: 16px;
	padding: 16px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	animation: pulse 2s ease-in-out infinite;
	width: 500px;
	max-width: 100%;
}

.placeholder-card-1 {
	top: 0;
	left: 0;
	z-index: 2;
}

.placeholder-card-2 {
	top: -70px;
	left: 70px;
	z-index: 2;
}

@media (max-width: 992px) {

	.placeholder-cards-wrapper {
		position: relative;
		height: 200px;
		margin-bottom: -20px;
	}
}


/* ---------------- MOBILE ---------------- */
@media (max-width: 768px) {

	.placeholder-cards-wrapper {
		height: auto;
		margin-bottom: 20px;
	}

	.mobile-margin {
		margin-bottom: 160px !important;
	}

	.placeholder-card {
		width: auto;
		padding: 12px;
	}

	.placeholder-card-1 {
		position: absolute;
		top: 0;
		left: 0;
		right: 40px;
		margin-bottom: 26px;
	}

	.placeholder-card-2 {
		position: absolute;
		right: 0;
		left: 60px;
		margin-top: 120px;
		margin-bottom: 30px;
	}
}

.placeholder-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.placeholder-line {
	background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	border-radius: 4px;
	height: 12px;
	animation: shimmer 2s infinite;
}

.placeholder-line-lg {
	width: 100%;
	height: 16px;
}

.placeholder-line-md {
	width: 85%;
	height: 12px;
}

.placeholder-line-sm {
	width: 60%;
	height: 10px;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}

	50% {
		opacity: 0.8;
	}
}

@keyframes shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

.form-label,
.col-form-label {
	color: black !important;
	font-weight: 400 !important;
}

.form-control::placeholder {
	color: #757575 !important;
	font-weight: 400 !important;
}

.link {
	text-decoration: underline;
}

	.link:hover {
		cursor: pointer;
		text-decoration: underline !important;
	}

.form-check-input:focus
{
	box-shadow: none !important;
}