@charset "UTF-8";
/* ======================================================================== */
/*	DexUI - Layout and Layout Components - Version 1.0.0					*/
/* ========================================================================	*/
/*																			*/
/*  $1 - Container Grid													    */
/*  $2 - Layout 														    */
/*  $3 - Structures														    */
/*																			*/
/* ======================================================================== */

:root {
	--str-default-content-space: var(--space-xxl);
	
	--ct-header-height: 64px;
	--ct-header-box-shadow: none;
	--ct-header-links-gap: 6px;
	--ct-header-link-color: var(--color-primary);
	--ct-header-link-color-hover: var(--color-secondary);
	--ct-header-link-background-color: transparent;
	--ct-header-link-background-color-hover: transparent;
	--ct-header-link-y-padding: 13px;
	--ct-header-link-hoverline-color: var(--color-secondary);
	--ct-header-link-hoverline-height: 3px;
	--ct-header-link-font-weight: 400;
	
	--ct-footer-background-color: transparent;
	--ct-footer-font-size: inherit;
	--ct-footer-link-color: var(--color-primary);
	--ct-footer-text-color: var(--color-black);
	
	/* Structure - Article*/
	--str-article-space: var(--str-default-content-space);
}

/*  $2 - Layout ============================================= */
.dex-layout {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.dex-layout > .grid-container {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}

.dex-layout.header-sticky .dex-header-placeholder {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 5;
}

.dex-layout .dex-main-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	flex-direction: column;
	padding-top: var(--ct-header-height);
}

.dex-main-content > .grid-container {
	display: flex;
	flex: 1;
	flex-direction: column;
}


/*  $2.2 - Layout - Header ============================================= */
:root {
	--ct-header-action-gap: var(--space-m);
	--ct-header-background: transparent;
}

.dex-header {
	--ft-btn-link-decoration-hover: none;
	background-color: var(--ct-header-background);
	box-shadow: var(--ct-header-box-shadow);
}

.dex-header,
.dex-header > .grid-container {
	height: var(--ct-header-height);
}

.dex-header-logo {
	align-items: center;
	display: flex;
}

.dex-header > .grid-container {
	align-items: stretch;
	display: flex;
	gap: var(--space-xl);
}

.dex-header-menu-placeholder {
	flex: 1;
}

.dex-header-actions {
	align-items: center;
	display: flex;
	gap: var(--ct-header-action-gap);
}


/*  $2.3 - Layout - Menu ============================================= */
/* Menu*/
.dex-header-menu {
	height: 100%;
}

.dex-header-menu__items {
	display: flex;
	height: 100%;
	gap: var(--ct-header-links-gap);
	margin: 0;
	padding: 0;
}

.dex-header-menu__item {
	list-style-type: none;
}

a.dex-header-menu__link,
.dex-header-menu__link {
	align-items: center;
	background-color: var(--ct-header-link-background-color);
	color: var(--ct-header-link-color);
	display: inline-flex;
	font-weight: var(--ct-header-link-font-weight);
	gap: var(--space-xs);
	height: 100%;
	padding: 0 var(--ct-header-link-y-padding);
	position: relative;
	transition: var(--transition);
}

a.dex-header-menu__link.active,
.dex-header-menu__link.active,
a.dex-header-menu__link:hover,
.dex-header-menu__link:hover {
	background-color: var(--ct-header-link-background-color-hover);
	color: var(--ct-header-link-color-hover);
	text-decoration: none;
}

a.dex-header-menu__link:hover,
.dex-header-menu__link:hover {
	opacity: 0.6;
}

.dex-header-menu__link::before {
	background-color: var(--ct-header-link-hoverline-color);
	bottom: 0;
	content: "";
	height: var(--ct-header-link-hoverline-height);
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	transition: var(--transition);
}

.dex-header-menu__link.active::before {
	opacity: 1;
}


/*  $2.4 - Layout - Footer ============================================= */
.dex-footer {
	background-color: var(--ct-footer-background-color);
	color: var(--ct-footer-text-color);
	font-size: var(--ct-footer-font-size);
}

.dex-footer a {
	color: var(--ct-footer-link-color);
}

.dex-footer a:hover {
	color: var(--ct-footer-link-color-hover);
}


/*  $3 - Structures ============================================= */
/* Structures - Article */
.layout-str-article {
	display: flex;
	flex: 1;
}

.layout-str-article__col-left {
	padding: var(--str-article-space) 0;
	width: 216px;
}

.layout-str-article__col-middle {
	flex: 1;
	padding: var(--str-article-space) 0;
}

.layout-str-article__col-right {
	padding: var(--str-article-space) 0;
	width: 205px;
}

@media (max-width: 991.98px) {
	.dex-header-menu {
		left: 0;
		overflow: hidden;
		position: absolute;
		right: 0;
	}
}