.service-connected .fa {
	color: #f1416c;
}
.service-connected[data-connected="1"] .fa {
	color: #00d061;
}
body {
	font-size: 16px !important;
	scrollbar-gutter: stable;
	overflow-y: scroll;
}

.btn-group-sm > .btn,
.btn-xs {
	padding: 0.4rem 0.6rem !important;
	font-size: 0.85rem !important;
	border-radius: 0.3rem !important;
}

.btn:not(.menu-item .menu-link.btn-link, .menu-item .btn) {
	padding: 0.8rem 1rem !important;
	font-size: 1.1rem !important;
	border-radius: 0.4rem !important;
}

/* Custom 2XL modal size */
.modal-2xl {
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
}

/* Lighter placeholder text */

.form-floating > label {
	color: #888b9a !important;
}

/* Match menu-link hover styles for button-based actions */
.menu-item .menu-link.btn-link {
	width: 100%;
	text-align: left;
	display: flex;
	align-items: center;
	padding: 0.65rem 1rem;
	border-radius: 0.475rem;
	color: var(--kt-menu-link-color);
}

.menu-item .menu-link.btn-link:hover,
.menu-item .menu-link.btn-link:focus {
	color: var(--kt-menu-link-color-hover);
	background-color: var(--kt-menu-link-bg-color-hover);
	text-decoration: none;
}

/* Ensure Tanuki link clicks target the anchor element. */
.menu-link .menu-title {
	pointer-events: none;
}
button span,
button i,
a span,
a i,
a img,
a div {
	pointer-events: none;
}

/*@media (min-width: 992px) {
	.modal-2xl {
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 1200px) {
	.modal-2xl {
		max-width: 1140px;
	}
}

@media (min-width: 1400px) {
	.modal-2xl {
		max-width: 1320px;
	}
}*/
.privacy-canvas-wrap {
	overflow: hidden;
	max-height: 75vh;
	width: 100%;
}

.privacy-canvas-wrap canvas {
	max-width: 100%;
	height: auto !important;
	display: block;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

.markdown-body p {
	margin-bottom: 0.5rem;
}

.form-container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 992px) {
	.form-container {
		max-width: 600px;
	}
}

@media (min-width: 1400px) {
	.form-container {
		max-width: 700px;
	}
}
.sort-arrow {
	color: #a1a5b7;
}

.sort-arrow.active {
	color: #006de9 !important;
}

html[data-theme="dark"] .table .row-highlight > * {
	background-color: rgba(255, 193, 7, 0.18);
	color: #e2e8f0;
}

html[data-theme="dark"] .table .row-highlight a {
	color: #e2e8f0;
}

.camera-card-highlight {
	background-color: #fff4cc;
	border-color: #e6dcb8 !important;
	box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.35);
}

html[data-theme="dark"] .camera-card-highlight {
	background-color: rgba(255, 193, 7, 0.18);
	border-color: rgba(255, 193, 7, 0.4) !important;
	box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.28);
}

.popover .popover-body {
	font-size: 1.15rem;
	line-height: 1.5;
}

.app-popover {
	--bs-popover-max-width: min(600px, 90vw);
}

#event-image-wrapper {
	position: relative;
}

#event-image-wrapper .canvas-container {
	position: absolute !important;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

#event-image-wrapper .canvas-container canvas {
	position: absolute;
	inset: 0;
}

#event-detections-canvas {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	display: none;
}

#page-loader {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.2);
	opacity: 1;
	transition: opacity 0.2s ease;
}

#page-loader-animation {
	width: 3rem;
	height: 3rem;
	border-width: 0.25rem;
	color: var(--kt-primary);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
	opacity: 0.85 !important;
}
.events-related-list {
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: rgba(94, 98, 120, 0.6) transparent;
}

.events-related-list::-webkit-scrollbar {
	width: 8px;
}

.events-related-list::-webkit-scrollbar-track {
	background: transparent;
}

.events-related-list::-webkit-scrollbar-thumb {
	background-color: rgba(94, 98, 120, 0.6);
	border-radius: 8px;
}

.events-related-current {
	border-color: #ff3b30 !important;
	background-color: rgba(255, 59, 48, 0.08);
}

@media (min-width: 1200px) {
	#maintenance-network-tools-root .netdiag-scroll-pane {
		height: clamp(22rem, calc(100vh - 20rem), 48rem);
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
		scrollbar-gutter: stable;
		scrollbar-width: thin;
	}

	#maintenance-network-tools-root .netdiag-scroll-pane::-webkit-scrollbar {
		width: 8px;
	}

	#maintenance-network-tools-root
		.netdiag-scroll-pane::-webkit-scrollbar-track {
		background: transparent;
	}

	#maintenance-network-tools-root
		.netdiag-scroll-pane::-webkit-scrollbar-thumb {
		background-color: rgba(94, 98, 120, 0.55);
		border-radius: 8px;
	}
}

#event-detections-list .form-check-input {
	accent-color: #ff3b30;
}

#event-detections-list .form-check-input:checked {
	background-color: #ff3b30;
	border-color: #ff3b30;
}

#event-detections-list .form-check-input:focus {
	border-color: #ff3b30;
	box-shadow: 0 0 0 0.25rem rgba(255, 59, 48, 0.25);
}

@media (min-width: 1400px) {
	.container-2xl {
		max-width: 1640px;
	}
}
.container-2xl {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	width: 100%;
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	padding-left: calc(var(--bs-gutter-x) * 0.5);
	margin-right: auto;
	margin-left: auto;
}

.user-permission-row-override {
	border-radius: 0.475rem;
}

.user-permission-override-icon {
	line-height: 1;
}