/* Custom CSS for Emitra Theme - Bootstrap 5 */

/* League Spartan Font Family */


body,
html {
	  font-family: "Montserrat", sans-serif;

}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	  font-family: "Montserrat", sans-serif;

}

button, .btn,
input, textarea, select,
.form-control, .form-label,
.navbar, .nav-link,
.card, .card-title, .card-text,
a, p, span, div,
label, small {
	  font-family: "Montserrat", sans-serif;

}

/* Override Bootstrap bg-dark to use pure black */
.bg-dark {
	background-color: #000 !important;
}

/* Full page black background */
body {
	background-color: #000 !important;
	color: #fff !important;
	min-height: 100vh;
	 font-family: "Inter", sans-serif;
}

#content {
	background-color: #000;
	color: #fff;
}

/* Ensure all main content areas have black background */
main,
.site-content,
.container {
	background-color: #000;
	color: #fff;
}

/* Card styling for black background */
.card {
	background-color: #1a1a1a;
	border-color: #333;
	color: #fff;
}

.card-title,
.card-text,
.text-dark {
	color: #fff !important;
}

.text-muted {
	color: #aaa !important;
}

/* Link colors for dark background */
a {
	color: #fff;
}

a:hover {
	color: #ccc;
}

/* Form inputs for dark theme */
.form-control {
	background-color: #1a1a1a;
	border-color: #333;
	color: #fff;
}

.form-control:focus {
	background-color: #1a1a1a;
	border-color: #fff;
	color: #fff;
}

.form-control::placeholder {
	color: #666;
}

/* Form validation error styles */
.form-control.is-invalid,
select.is-invalid,
textarea.is-invalid {
	border-color: #dc3545 !important;
	background-color: #1a1a1a !important;
	color: #fff !important;
}

.form-control.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

/* Error message styling */
label.error,
.text-danger {
	color: #fff !important;
	font-size: 0.875rem;
	margin-top: 0.25rem;
	display: block;
}

/* Input group error styling */
.input-group .form-control.is-invalid {
	border-color: #fff !important;
}

.input-group .form-control.is-invalid + .btn {
	border-color: #fff !important;
}

/* Ensure error messages are visible and properly positioned */
#register-form label.error,
#login-form label.error,
#register-email-form label.error,
#verify-code-form label.error,
#forgot-password-form label.error {
	color: #fff !important;
	font-size: 0.875rem;
	margin-top: 0.25rem;
	display: block;
	width: 100%;
}

/* Password field error message positioning */
.input-group + label.error {
	margin-top: 0.5rem;
}

/* Form control focus states */
.form-control:focus {
	background-color: #1a1a1a !important;
	border-color: #fff !important;
	color: #fff !important;
	box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25) !important;
}

/* Ensure all form controls maintain black/white theme */
.form-control {
	background-color: #000 !important;
	border-color: #333 !important;
	color: #fff !important;
}

.form-control:focus {
	background-color: #1a1a1a !important;
}

/* Header Navigation Styles */
.navbar-dark .navbar-nav .nav-link {
	color: #fff !important;
	transition: all 0.3s ease;
}

.navbar-dark .navbar-nav .nav-link:hover {
	color: rgba(255, 255, 255, 0.8) !important;
}

/* Offcanvas Navigation Styles */
.offcanvas {
	background-color: #000 !important;
}

.offcanvas-body .nav-link {
	color: #fff;
	transition: all 0.3s ease;
}

.offcanvas-body .nav-link:hover {
	background-color: #1a1a1a;
	color: #fff;
}

.offcanvas-body .nav-link.active {
	background-color: #fff;
	color: #000;
}

/* Button outline styles with fill on hover */
.btn-outline-light {
	border: 1px solid #fff;
	color: #fff;
	background-color: transparent;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	vertical-align: middle;
}

.btn-outline-light i {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.btn-outline-light:hover {
	background-color: #fff;
	color: #000;
	border-color: #fff;
}

.btn-outline-light:focus {
	background-color: #fff;
	color: #000;
	border-color: #fff;
	box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
}

/* Form error styles */
.form-error {
	color: #dc2626;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

input.error, textarea.error, select.error {
	border-color: #dc2626 !important;
}

input.valid, textarea.valid, select.valid {
	border-color: #198754 !important;
}

/* Message animations */
@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#auth-message {
	animation: slideDown 0.3s ease-out;
}

/* Button loading state */
button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Sidebar styling */
aside.sidebar {
	position: sticky;
	top: 20px;
}

/* Dashboard sidebar navigation */
.page-dashboard aside .nav-link {
	color: #fff;
	transition: all 0.3s ease;
}

.page-dashboard aside .nav-link:hover {
	background-color: #1a1a1a;
	color: #fff;
}

.page-dashboard aside .nav-link[style*="background-color: #fff"] {
	color: #000 !important;
}

.page-dashboard aside .nav-link[style*="background-color: #fff"]:hover {
	background-color: #fff !important;
	color: #000 !important;
}

/* Card hover effect */
.card:hover {
	transition: transform 0.2s ease-in-out;
}
.custom-logo-link img.custom-logo {
    max-width: 100px;
    height: auto;
    width: 100%;
}

/* Profile avatar upload button */
#profile-avatar-container {
	position: relative;
}

/* Mobile Responsive Styles for Privacy Policy */
@media (max-width: 768px) {
	.mobile-responsive-padding {
		padding: 1.5rem !important;
	}

	.mobile-responsive-heading {
		font-size: 1.25rem !important;
		margin-bottom: 1rem !important;
		padding-bottom: 0.5rem !important;
	}

	.mobile-responsive-heading i {
		font-size: 1.25rem !important;
		margin-right: 0.5rem !important;
	}

	.mobile-responsive-text {
		font-size: 0.95rem !important;
		line-height: 1.6 !important;
	}

	.mobile-responsive-list {
		font-size: 0.9rem !important;
		line-height: 1.5 !important;
	}

	/* Center icons in list items on mobile */
	.mobile-responsive-padding ul li {
		align-items: center !important;
	}

	.mobile-responsive-padding ul li i {
		margin-top: 0 !important;
	}
}

/* Privacy Policy Mobile Responsiveness */
@media (max-width: 768px) {
	.privacy-policy-card {
		padding: 1.5rem !important;
	}
	.privacy-policy-card h3 {
		font-size: 1.25rem !important;
		margin-bottom: 1.5rem !important;
	}
	.privacy-policy-card h3 i {
		font-size: 1.25rem !important;
	}
	.privacy-policy-card p,
	.privacy-policy-card ul li span {
		font-size: 0.95rem !important;
		line-height: 1.6 !important;
	}
	.privacy-policy-card ul li {
		margin-bottom: 0.75rem !important;
	}
	.privacy-policy-card ul li i {
		font-size: 1rem !important;
	}
	.privacy-policy-card .intro-quote {
		font-size: 1.1rem !important;
		margin-bottom: 2rem !important;
	}
	.privacy-policy-card .intro-quote i {
		font-size: 1.5rem !important;
	}
	.privacy-policy-card > div { /* Direct children of the main card body */
		margin-bottom: 3rem !important;
	}
}

@media (min-width: 769px) and (max-width: 992px) {
	.privacy-policy-card {
		padding: 2.5rem !important;
	}
	.privacy-policy-card h3 {
		font-size: 1.4rem !important;
	}
	.privacy-policy-card h3 i {
		font-size: 1.5rem !important;
	}
	.privacy-policy-card p,
	.privacy-policy-card ul li span {
		font-size: 1rem !important;
	}
	.privacy-policy-card .intro-quote {
		font-size: 1.2rem !important;
	}
	.privacy-policy-card .intro-quote i {
		font-size: 1.6rem !important;
	}
}

/* Contact Page Styling */
.contact-card-hover {
	transition: all 0.3s ease;
}

.contact-card-hover:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 35px rgba(0,0,0,0.6) !important;
}

.contact-link-hover:hover {
	background-color: rgba(0,123,255,0.1) !important;
	color: #fff !important;
	text-decoration: none !important;
}

.contact-submit-hover:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0,123,255,0.4) !important;
}

/* Home Page Styling */
.pricing-card-hover:hover, .security-card-hover:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 35px rgba(0,0,0,0.6) !important;
}

.cta-button-hover:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0,123,255,0.4) !important;
}

/* Dashboard Mobile Responsiveness */
@media (min-width: 992px) {
	/* Hide hamburger menu on desktop */
	.dashboard-hamburger {
		display: none !important;
	}

	/* Show fixed sidebar on desktop */
	.dashboard-sidebar-fixed {
		display: block !important;
	}
}

@media (max-width: 991px) {
	/* Show hamburger menu on mobile/tablet */
	.dashboard-hamburger {
		display: inline-block !important;
	}

	/* Hide fixed sidebar on mobile/tablet */
	.dashboard-sidebar-fixed {
		display: none !important;
	}

	/* Adjust main content margin for mobile */
	.dashboard-main-mobile {
		margin-left: 0 !important;
		padding: 1rem !important;
	}

	/* Offcanvas styling */
	.offcanvas {
		background-color: #000 !important;
		border-right: 1px solid #333 !important;
	}

	.offcanvas .nav-link {
		color: #fff !important;
		padding: 0.75rem 1rem !important;
		border-radius: 0.375rem !important;
		margin-bottom: 0.25rem !important;
		transition: all 0.3s ease !important;
	}

	.offcanvas .nav-link:hover {
		background-color: rgba(255, 255, 255, 0.1) !important;
		color: #fff !important;
	}

	.offcanvas .nav-link.active {
		background-color: #fff !important;
		color: #000 !important;
		font-weight: 600 !important;
	}
}

/* Contact Form Enhancements */
.form-control:focus {
	border-color: #007bff !important;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
	outline: none !important;
}



.contact-form-mobile .form-control:focus {
	border-color: #007bff !important;
	box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.2) !important;
}

/* Form validation styles */
.was-validated .form-control:valid {
	border-color: #28a745;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

.was-validated .form-control:invalid {
	border-color: #dc3545;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
}

.valid-feedback, .invalid-feedback {
	display: block;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

.valid-feedback {
	color: #28a745;
}

.invalid-feedback {
	color: #dc3545;
}

/* Contact Form Message Display */
#contact-message-display {
	margin-top: 2rem !important;
	padding: 1rem 1.5rem;
	border-radius: 8px;
	font-weight: 500;
}

#contact-message-display.alert-success {
	background-color: rgba(40, 167, 69, 0.1);
	border: 1px solid #28a745;
	color: #28a745;
}

#contact-message-display.alert-danger {
	background-color: rgba(220, 53, 69, 0.1);
	border: 1px solid #dc3545;
	color: #dc3545;
}

#contact-message-display i {
	font-size: 1.1rem;
}

/* Comprehensive Mobile Responsiveness for All Pages */
@media (max-width: 768px) {
	/* Hero Sections */
	.hero-mobile {
		padding: 60px 0 !important;
	}

	.hero-mobile h1 {
		font-size: 2.5rem !important;
		margin-bottom: 1.5rem !important;
	}

	.hero-mobile .emoji-large {
		font-size: 3rem !important;
		margin-bottom: 20px !important;
	}

	.hero-mobile p {
		font-size: 1rem !important;
		line-height: 1.6 !important;
	}

	.hero-mobile .btn {
		padding: 0.75rem 2rem !important;
		font-size: 1rem !important;
		margin: 0.5rem !important;
	}

	/* Service Cards */
	.service-card-mobile {
		padding: 2rem 1.5rem !important;
		margin-bottom: 1.5rem !important;
	}

	.service-card-mobile .icon-container {
		width: 60px !important;
		height: 60px !important;
		margin-bottom: 1rem !important;
	}

	.service-card-mobile .icon-container i {
		font-size: 1.5rem !important;
	}

	.service-card-mobile h4 {
		font-size: 1.1rem !important;
		margin-bottom: 0.75rem !important;
	}

	.service-card-mobile p {
		font-size: 0.9rem !important;
		line-height: 1.5 !important;
	}

	/* Mission Cards */
	.mission-card-mobile {
		padding: 3rem 2rem !important;
		margin-bottom: 2rem !important;
	}

	.mission-card-mobile h2 {
		font-size: 2rem !important;
		margin-bottom: 1rem !important;
	}

	.mission-card-mobile .icon-large {
		width: 70px !important;
		height: 70px !important;
		margin-bottom: 1.5rem !important;
	}

	.mission-card-mobile .icon-large i {
		font-size: 2rem !important;
	}

	/* Pricing Cards */
	.pricing-card-mobile {
		padding: 2rem 1.5rem !important;
		margin-bottom: 1.5rem !important;
		text-align: center !important;
	}

	.pricing-card-mobile .icon-container {
		width: 60px !important;
		height: 60px !important;
		margin: 0 auto 1rem !important;
	}

	.pricing-card-mobile .icon-container i {
		font-size: 1.5rem !important;
	}

	.pricing-card-mobile h4 {
		font-size: 1.2rem !important;
		margin-bottom: 0.75rem !important;
	}

	.pricing-card-mobile p {
		font-size: 0.9rem !important;
		line-height: 1.5 !important;
	}

	/* Security Cards */
	.security-card-mobile {
		padding: 2rem 1.5rem !important;
		margin-bottom: 1.5rem !important;
		text-align: center !important;
	}

	.security-card-mobile .icon-container {
		width: 60px !important;
		height: 60px !important;
		margin: 0 auto 1rem !important;
	}

	.security-card-mobile .icon-container i {
		font-size: 1.5rem !important;
	}

	.security-card-mobile h4 {
		font-size: 1.2rem !important;
		margin-bottom: 0.75rem !important;
	}

	.security-card-mobile p {
		font-size: 0.9rem !important;
		line-height: 1.5 !important;
	}

	/* CTA Cards */
	.cta-card-mobile {
		padding: 3rem 2rem !important;
		margin: 2rem 1rem !important;
	}

	.cta-card-mobile h2 {
		font-size: 2rem !important;
		margin-bottom: 1rem !important;
	}

	.cta-card-mobile .icon-large {
		width: 70px !important;
		height: 70px !important;
		margin-bottom: 1.5rem !important;
	}

	.cta-card-mobile .icon-large i {
		font-size: 2rem !important;
	}

	.cta-card-mobile p {
		font-size: 1rem !important;
		margin-bottom: 2rem !important;
		line-height: 1.6 !important;
	}

	.cta-card-mobile .btn {
		padding: 0.875rem 2rem !important;
		font-size: 1rem !important;
	}

	/* General Mobile Improvements */
	.section-padding-mobile {
		padding: 40px 0 !important;
	}

	.card-padding-mobile {
		padding: 2rem 1.5rem !important;
	}

	.text-center-mobile {
		text-align: center !important;
	}

	.mb-mobile-3 {
		margin-bottom: 1rem !important;
	}

	.mb-mobile-4 {
		margin-bottom: 1.5rem !important;
	}

	.mb-mobile-5 {
		margin-bottom: 2rem !important;
	}
}

/* Tablet Responsiveness */
@media (min-width: 769px) and (max-width: 992px) {
	/* Hero sections */
	.hero-tablet h1 {
		font-size: 2.8rem !important;
	}

	.hero-tablet p {
		font-size: 1.1rem !important;
	}

	/* Card layouts */
	.card-tablet {
		padding: 2.5rem 2rem !important;
	}

	/* Service cards */
	.service-card-tablet {
		padding: 2.5rem 2rem !important;
	}

	/* Mission cards */
	.mission-card-tablet {
		padding: 3.5rem 2.5rem !important;
	}
}

/* Contact Page Mobile Responsiveness */
@media (max-width: 768px) {
	/* Contact Methods Grid */
	.contact-card-hover {
		padding: 2rem 1.5rem !important;
		margin-bottom: 1.5rem !important;
	}

	.contact-card-hover .contact-link-hover {
		display: inline-block !important;
		padding: 0.4rem 0.8rem !important;
		font-size: 0.9rem !important;
		margin-top: 0.5rem !important;
	}

	/* Contact Form */
	.contact-form-mobile {
		padding: 2rem 1.5rem !important;
	}

	.contact-form-mobile .row {
		--bs-gutter-x: 1rem !important;
	}

	.contact-form-mobile .col-md-6 {
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
		margin-bottom: 1rem !important;
	}

	.contact-form-mobile input,
	.contact-form-mobile textarea {
		padding: 0.6rem 1rem !important;
		font-size: 0.95rem !important;
		border-radius: 6px !important;
	}

	.contact-submit-mobile {
		padding: 0.8rem 2rem !important;
		font-size: 1rem !important;
		width: 100% !important;
		margin-top: 1rem !important;
	}

	/* FAQ Section */
	.faq-mobile-card {
		padding: 2rem 1.5rem !important;
	}

	.faq-mobile-accordion .accordion-button {
		padding: 1rem 1.25rem !important;
		font-size: 1rem !important;
	}

	.faq-mobile-accordion .accordion-button i {
		font-size: 1.1rem !important;
		margin-right: 0.75rem !important;
	}

	.faq-mobile-accordion .accordion-body {
		padding: 1.25rem !important;
		font-size: 0.95rem !important;
	}

	/* Contact Info Section */
	.contact-info-mobile {
		padding: 3rem 2rem !important;
	}

	.contact-info-mobile h2 {
		font-size: 2rem !important;
		margin-bottom: 1rem !important;
	}

	.contact-info-mobile .intro-quote {
		font-size: 1.1rem !important;
		margin-bottom: 1.5rem !important;
	}

	.contact-info-mobile .intro-quote i {
		font-size: 1.3rem !important;
	}
}

@media (min-width: 769px) and (max-width: 992px) {
	/* Tablet responsiveness */
	.contact-card-hover {
		padding: 2.2rem 1.8rem !important;
	}

	.contact-form-tablet .col-md-6 {
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}

	.faq-tablet-card {
		padding: 3rem 2.5rem !important;
	}
}

/* Tablet adjustments */
@media (max-width: 992px) and (min-width: 769px) {
	.mobile-responsive-padding {
		padding: 2.5rem !important;
	}

	.mobile-responsive-heading {
		font-size: 1.4rem !important;
	}

	.mobile-responsive-text {
		font-size: 1rem !important;
	}
}

/* Section Spacing Classes */
.section-padding-lg {
	padding: 30px 0;
}

.section-padding-hero {
	padding: 80px 0 60px;
}

.section-padding-md {
	padding: 60px 0;
}

.section-padding-sm {
	padding: 40px 0;
}

#change-avatar-btn {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	bottom: 0;
	right: 0;
	transform: translate(25%, 25%);
}

#change-avatar-btn:hover {
	background-color: #fff;
	color: #000;
}

/* Dashboard sidebar navigation */
aside .nav-link {
	color: #fff;
	transition: all 0.3s ease;
	border-radius: 0.375rem;
	margin-bottom: 0.5rem;
}

aside .nav-link:hover {
	background-color: #1a1a1a;
	color: #fff;
}

aside .nav-link.active {
	background-color: #fff !important;
	color: #000 !important;
}

aside .nav-link.active:hover {
	background-color: #fff !important;
	color: #000 !important;
}

/* Responsive sidebar */
@media (max-width: 991px) {
	aside.position-fixed {
		transform: translateX(-100%);
		transition: transform 0.3s ease;
	}
	
	aside.position-fixed.show {
		transform: translateX(0);
	}
	
	div[style*="margin-left: 250px"] {
		margin-left: 0 !important;
	}
}

/* Spinner styles for loaders */
.spinner-border {
	border-color: #fff;
	border-right-color: transparent;
}

.spinner-border-sm {
	width: 1rem;
	height: 1rem;
	border-width: 0.15em;
}

#applications-loader .spinner-border {
	color: #fff;
}

/* Pagination styles - outline buttons */
.pagination .page-link,
.pagination .page-numbers {
	background-color: #000 !important;
	border-color: #fff !important;
	color: #fff !important;
}

.pagination .page-link:hover,
.pagination .page-numbers:hover {
	background-color: #fff !important;
	color: #000 !important;
	border-color: #fff !important;
}

.pagination .page-item.active .page-link,
.pagination .page-numbers.current {
	background-color: #fff !important;
	border-color: #fff !important;
	color: #000 !important;
}

.pagination .page-link:focus,
.pagination .page-numbers:focus {
	box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25) !important;
}

.pagination .page-numbers {
	padding: 0.375rem 0.75rem;
	margin: 0 0.125rem;
	background-color: #fff;
	border: 1px solid #dee2e6;
	border-radius: 0.375rem;
	color: #0d6efd;
	text-decoration: none;
	transition: all 0.2s;
}

.pagination .page-numbers:hover {
	background-color: #e9ecef;
	border-color: #dee2e6;
	color: #0a58ca;
}

.pagination .page-numbers.current {
	background-color: #0d6efd;
	color: #fff;
	border-color: #0d6efd;
}

/* Info Page Document Preview Modal Styles */
#infoDocPreviewModal .modal-dialog {
	max-width: 95vw;
	margin: 1rem auto;
}

#infoDocPreviewModal .modal-content {
	border-radius: 8px;
	border: 1px solid #333;
}

#infoDocPreviewModal .modal-body {
	padding: 1rem;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

#infoDocPreviewModal img {
	max-width: 100%;
	max-height: 75vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#infoDocPreviewModal iframe {
	width: 100%;
	height: 75vh;
	border: 1px solid #333;
	border-radius: 4px;
	background-color: #fff;
}

#infoDocPreviewModal .modal-footer {
	justify-content: space-between;
}

#info-modal-download-btn {
	transition: all 0.3s ease;
}

#info-modal-download-btn:hover {
	background-color: #fff;
	color: #000;
}

/* Responsive adjustments for info page preview modal */
@media (max-width: 768px) {
	#infoDocPreviewModal .modal-dialog {
		margin: 0.5rem;
		max-width: calc(100vw - 1rem);
	}

	#infoDocPreviewModal .modal-body {
		padding: 0.5rem;
		min-height: 50vh;
	}

	#infoDocPreviewModal img,
	#infoDocPreviewModal iframe {
		max-height: 60vh;
	}

	#infoDocPreviewModal .modal-header .d-flex {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 0.5rem;
	}

	#info-modal-preview-image {
		align-self: center;
	}

	#infoDocPreviewModal .modal-footer {
		flex-direction: column;
		gap: 0.5rem;
	}

	#infoDocPreviewModal .modal-footer .btn {
		width: 100%;
	}
}