@charset "UTF-8";

/* -------------------------------
   Admin Dashboard Stylesheet
------------------------------- */

:root {
	/* Sidebar */
	--app-sidebar-bg: #23292c;
	--app-sidebar-bg-font: #bcc0c1;
	--app-sidebar-main-button-hover: #394146;
	--app-sidebar-main-button: #394146;
	--app-sidebar-main-button-bg: #394146;
	--app-sidebar-main-button-font: #d0d8df;
	--app-sidebar-main-button-hover-text: #ffffff;
	--app-sidebar-text-sections: #b3b3b3;
	--app-sidebar-arrow-color: #d0d8df;
	/* Header */
	--app-header-bg: #23292c;
	--app-header-drop-font: #bcc0c1;
	--app-component-dropdown-bg: #23292c;
	--app-component-dropdown-hover-bg: #3a4146;
	--app-component-dropdown-link: #d0d8df;
	--app-component-dropdown-link-hover: #ffffff;
	--app-component-dropdown-link-active-bg: #348fe2;
	--app-component-dropdown-arrow-color: #adadad;
	--app-component-dropdown-icon: #d0d8df;
}

body {
	height: 100%;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	font-variation-settings: "wdth" 100;
	line-height: 1.6;
	color: #333;
	background-color: #ededed;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

/* -------------------------------
   Additional Styles
------------------------------- */

/* Shared module layout manager (Admin Dashboard only). */
.module-layouts-modal .module-layout-slide {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
	align-items: stretch;
	gap: 1.5rem;
	min-height: 280px;
}

.module-layouts-modal .module-layout-slide-copy {
	min-width: 0;
	overflow-wrap: anywhere;
}

.module-layouts-modal .module-layout-preview {
	background: #f3f5f7;
	border: 1px solid #d8dde3;
	border-radius: 8px;
	overflow: hidden;
	padding: 1rem;
}

.module-layouts-modal .module-layout-preview-header,
.module-layouts-modal .module-layout-preview-main,
.module-layouts-modal .module-layout-preview-side {
	background: #fff;
	border: 1px solid #dfe4ea;
	border-radius: 6px;
}

.module-layouts-modal .module-layout-preview-header {
	height: 42px;
	margin-bottom: 1rem;
}

.module-layouts-modal .module-layout-preview-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 96px;
	gap: 1rem;
}

.module-layouts-modal .module-layout-preview-main,
.module-layouts-modal .module-layout-preview-side {
	height: 172px;
}

.module-layouts-modal .module-layout-pages {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* Give navigation its own row so its hit areas cannot cover inputs or actions. */
.module-layouts-modal .carousel {
	padding-bottom: 3.25rem;
}

.module-layouts-modal .carousel-control-prev,
.module-layouts-modal .carousel-control-next {
	top: auto;
	bottom: 0;
	width: 2.5rem;
	height: 2.5rem;
	filter: invert(1);
}

@media (max-width: 767.98px) {
	.module-layouts-modal .module-layout-slide {
		grid-template-columns: minmax(0, 1fr);
	}
}
