@charset "UTF-8";
/* ======================================================================== */
/*	DexUI - Components - Version 1.0.0										*/
/* ========================================================================	*/
/*																			*/
/*  $1 - Root - Family Tokens											    */
/*  $2 - Avatar															    */
/*  $3 - Accordion															*/
/*  $4 - Left Menu														    */
/*																			*/
/* ======================================================================== */

/* ================================================================ */
/*  $1 - Root - Family Tokens                                       */
/* ================================================================ */
:root {
	/* Components - Family Tokens */
	--ft-component-background: var(--color-white);
	--ft-component-border-color: var(--color-neutral-2);
	--ft-component-border-style: solid;
	--ft-component-border-width: 1px;
	--ft-component-border: var(--ft-component-border-width) var(--ft-component-border-style) var(--ft-component-border-color);
	--ft-component-border-radius: var(--border-radius-m);
	--ft-component-icon-color: var(--color-neutral-9);
	--ft-component-padding: var(--space-m);
	--ft-component-padding-s: calc(var(--ft-component-padding) - 0.5rem);
    --ft-component-padding-l: calc(var(--ft-component-padding) + 0.5rem);
	--ft-component-title-color: var(--color-neutral-9);
    --ft-component-text-color: var(--color-neutral-7);
	--ft-component-text-color-active: var(--color-neutral-10);
	
	/* Overlay - Family Tokens */
    --ft-overlay-padding: var(--space-m);
    --ft-overlay-padding-s: calc(var(--ft-overlay-padding) - 1rem);
    --ft-overlay-padding-base: calc(var(--ft-overlay-padding) - 0.5rem);
    --ft-overlay-border: var(--border-size-m) solid var(--color-neutral-4);
    --ft-overlay-border-s: var(--border-size-s) solid var(--color-neutral-4);
    --ft-overlay-border-radius: var(--border-radius-m);
    --ft-overlay-background: rgba(0,0,0,0.25);
    --ft-overlay-content-background: var(--color-white);
    --ft-overlay-box-shadow: none;
}


/* ================================================================ */
/*  $0 - Accordion													*/
/* ================================================================ */
:root {
	--ct-accordion-space-x: var(--space-s);
	--ct-accordion-space-y: var(--space-s);
	--ct-accordion-space-y-s: calc(var(--ct-accordion-space-y) - 0.2rem);
	--ct-accordion-space-y-l: calc(var(--ct-accordion-space-y) + 0.5rem);
	--ct-accordion-space-x-s: calc(var(--ct-accordion-space-x) - 0.2rem);
	--ct-accordion-space-x-l: calc(var(--ct-accordion-space-x) + 0.5rem);
}

.accordion {
	border: var(--ft-component-border);
	border-radius: var(--ft-component-border-radius);
}

.accordion + .accordion {
	border-top: 0;
}

.btn-accordion {
	background-color: transparent;
	border: 0;
	display: flex;
	height: auto;
	padding: var(--ct-accordion-space-y) var(--ft-component-padding);
	width: 100%;
}

.accordion.accordion-s .btn-accordion {
	padding: var(--ct-accordion-space-y-s) var(--ft-component-padding);
}

.accordion.accordion-l .btn-accordion {
	padding: var(--ct-accordion-space-y-l) var(--ct-accordion-space-x-l);
}

.accordion-title {
	flex: 1;
	text-align: left;
}

.accordion__icon {
	color: var(--ft-component-icon-color);
	font-size: var(--font-size-h5);
	transition: all 200ms ease;
}

.accordion.active .accordion__icon {
	color: var(--ft-component-icon-color-active);
	transform: rotate(180deg);
}

.accordion__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 200ms ease;
	will-change: max-height;
}

.accordion.active .accordion__body {
	grid-template-rows: 1fr;
}

.accordion__content {
	overflow: hidden;
}

.accordion__content-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	padding: var(--ct-accordion-space-y) var(--ft-component-padding);
	padding-top: 0;
}

.accordion.accordion-s .accordion__content-wrapper {
	padding: var(--ct-accordion-space-y-s) var(--ft-component-padding-s);
	padding-top: 0;
}

.accordion.accordion-l .accordion__content-wrapper {
	padding: var(--ct-accordion-space-y-l) var(--ct-accordion-space-x-l);
	padding-top: 0;
}

.accordion-group {
	border: var(--ft-component-border);
	border-radius: var(--ft-component-border-radius);
}

.accordion-group .accordion {
	border: 0;
	border-bottom: var(--ft-component-border);
	border-radius: 0;
}

.accordion-group .accordion:last-child {
	border: 0;
}


/* ================================================================ */
/*  $0 - Alert													*/
/* ================================================================ */
:root {
	--ct-alert-icon-font-size: var(--font-size-xl);
}

.alert {
    align-items: center;
    border: var(--ft-overlay-border-s);
    border-radius: var(--ft-overlay-border-radius);
    box-shadow: var(--ft-overlay-box-shadow);
    color: var(--color-neutral-10);
    display: flex;
	gap: var(--space-s);
    padding: var(--ft-overlay-padding-base);
	transition: all 200ms ease;
    width: fit-content;
}

.alert.is-closing {
	opacity: 0;
}

.alert .alert-icon {
    align-self: flex-start;
    display: inline-flex;
	font-size: var(--ct-alert-icon-font-size);
	line-height: 1;
    margin-top: 4px;
    margin-right: var(--space-base);
}

.alert .alert-content {
    flex: 1;
}

.alert-action {
	align-self: flex-start;
    display: inline-flex;
}

.alert-close,
.alert-action a {
	transition: all 200ms ease;
}

.alert-close:hover,
.alert-action a:hover {
	opacity: 0.7;
	text-decoration: none;
}

.alert-close::before {
	content: "\e900";
	cursor: pointer;
	font-family: 'DexIcons';
	font-size: var(--font-size-xl);
	line-height: 1;
}

.alert.alert-error .alert-icon::before,
.alert.alert-info .alert-icon::before,
.alert.alert-success .alert-icon::before,
.alert.alert-warning .alert-icon::before {
	font-family: 'DexIcons';
}

.alert-error {
    background-color: var(--color-error-light-x);
    border-color: var(--color-error-light);
}

.alert.alert-error .alert-icon::before {
    color: var(--color-error);
    content: var(--dexicon-error);
}

.alert-info {
    background-color: var(--color-info-light-x);
    border-color: var(--color-info-light);
}

.alert.alert-info .alert-icon::before {
    color: var(--color-info);
    content: var(--dexicon-info);
}

.alert-success {
    background-color: var(--color-success-light-x);
    border-color: var(--color-success-light);
}

.alert.alert-success .alert-icon::before {
    color: var(--color-success);
    content: var(--dexicon-success);
}

.alert-warning {
    background-color: var(--color-warning-light-x);
    border-color: var(--color-warning-light);
}

.alert.alert-warning .alert-icon::before {
    color: var(--color-warning);
    content: var(--dexicon-warning);
}


/* ================================================================ */
/*  $0 - Avatar														*/
/* ================================================================ */
.avatar {
	align-items: center;
	border: 0;
	border-radius: 50%;
	color: var(--color-neutral-0);
	display: inline-flex;
	font-weight: var(--font-medium);
	height: 32px;
	justify-content: center;
	line-height: 1;
	overflow: hidden;
	text-transform: uppercase;
	width: 32px;
}

.avatar:focus {
	outline: var(--outline);
}


/* ================================================================ */
/*  $0 - Breadcrumb													*/
/* ================================================================ */
:root {
	--breadcrumb-font-weight: 400;
	--breadcrumb-ellipsis-width: 150px;
	--breadcrumb-icon: "/";
	--breadcrumb-icon-font-family: inherit;
}

.breadcrumb {
	align-items: center;
	display: inline-flex;
	gap: var(--space-s);
}

.breadcrumb a {
	font-weight: var(--breadcrumb-font-weight);
}

.breadcrumb.breadcrumb-ellipsis .breadcrumb-item {
	max-width: var(--breadcrumb-ellipsis-width);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.breadcrumb-item.breadcrumb-ellipsis {
	max-width: var(--breadcrumb-ellipsis-width);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.breadcrumb-item {
	align-items: center;
	color: var(--ft-color-disabled);
	display: flex;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
	color: var(--color-neutral-6);
	content: var(--breadcrumb-icon);
	font-family: var(--breadcrumb-icon-font-family);
	margin-right: var(--space-s);
}


/* ================================================================ */
/*  $0 - Card														*/
/* ================================================================ */
:root {
	--ct-card-background: var(--ft-component-background);
	--ct-card-border: var(--ft-component-border);
	--ct-card-border-radius: var(--ft-component-border-radius);
	--ct-card-height: auto;
	--ct-card-text-color: var(--color-black);
}

.card {
	background-color: var(--ct-card-background);
	border: var(--ct-card-border);
	border-radius: var(--ct-card-border-radius);
	color: var(--ct-card-text-color);
	display: flex;
	flex-direction: column;
	height: var(--ct-card-height);
	overflow: hidden;
}

.card.card-full-padding .card-image {
	padding: var(--ft-component-padding);
	padding-bottom: 0;
}

.card-image img {
	display: block;
	width: 100%;
}

.card-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	height: 100%;
	padding: var(--ft-component-padding);
}

.card-subtitle {
	color: var(--color-neutral-6);
}

.card-content {
	flex: 1;
}

/* Card Horizontal */
.card.card-horizontal {
	flex-direction: row;
}

/* Card Overlay */
.card.card-overlay {
	position: relative;
}

.card.card-overlay .card-image {
	height: 100%;
	position: absolute;
	z-index: 1;
}

.card.card-overlay .card-image img {
	height: 100%;
	object-fit: cover;
}

.card.card-overlay .card-body {
	position: relative;
	z-index: 2;
}

/* Card Toast */
.card-toast {
	box-shadow: var(--shadow-m);
}

.card-toast__header {
	background-color: var(--color-neutral-0);
	display: flex;
	justify-content: space-between;
	padding: var(--space-s) var(--ft-component-padding);
}

.card-toast__content {
	padding: var(--ft-component-padding);
}

/* Card Hover Effect */
.card-hover-effect {
	box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.05);
	text-decoration: none;
	transition: var(--transition);
}

.card-hover-effect:hover {
	box-shadow: 0px 0px 20px 0px rgba(0, 170, 190, 0.2);
	cursor: pointer;
	text-decoration: none;
}

.card-hover-effect.no-hover-effect:hover {
	box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.05);
	cursor: default;
	text-decoration: none;
}

.home-cards .card.no-hover-effect:hover .color-link {
	cursor: default;
	text-decoration: none;
}


/* ================================================================ */
/*  $0 - Carousel													*/
/* ================================================================ */
.carousel {
	overflow: hidden;
	position: relative;
}

.carousel-container {
	display: flex;
	list-style: none;
	margin: 0;
	min-height: 100px;
	overflow: hidden;
	padding: 0;
	scroll-behavior: smooth;
	width: 100%;
}

.carousel-wrapper {
	position: relative;
}

.carousel-arrow {
	align-items: center;
	background-color: var(--color-white);
	border: none;
	border-radius: 100%;
	bottom: 0;
	cursor: pointer;
	display: flex;
	font-size: var(--font-size-xxl);
	height: var(--space-xl);
	justify-content: center;
	margin: auto;
	opacity: 0.3;
	padding: 0;
	position: absolute;
	top: 0;
	transition: opacity 200ms;
	width: var(--space-xl);
}

.carousel-arrow:hover {
	opacity: 1;
}

.carousel-arrow-prev {
	left: var(--space-m);
}

.carousel-arrow-next {
	right: var(--space-m);
}

.carousel-arrow-prev.disabled,
.carousel-arrow-next.disabled {
	opacity: 0;
	pointer-events: none;
}

.carousel__item {
	flex: 1 0 100%;
	height: 100%;
	width: 100%;
}

.carousel__dots {
	display: flex;
	gap: 5px;
	justify-content: center;
	margin-top: var(--space-m);
}

.carousel__dot {
	background-color: var(--color-neutral-8);
	border-radius: 10px;
	display: inline-block;
	height: 8px;
	opacity: 0.3;
	transition: opacity 200ms;
	width: 8px;
}

.carousel__dot.active {
	opacity: 1;
}

.carousel__item:nth-child(1) {
	background-color: #49b293;
}

.carousel__item:nth-child(2) {
	background-color: #b03532;
}

.carousel__item:nth-child(3) {
	background-color: #6a478f;
	margin: 0;
}

.carousel__item:nth-child(4) {
	background-color: #da6f2b;
}


/* ================================================================ */
/*  $0 - Collapse													*/
/* ================================================================ */
.collapse {
	display: flex;
	flex-direction: column;
}

.collapse.is-open .collapse__body {
	grid-template-rows: 1fr;
}

.collapse__action {
	cursor: pointer;
}

.collapse__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 200ms ease;
	will-change: max-height;
}

.collapse__content {
	overflow: hidden;
}

.collapse.collapse-action-down .collapse__action {
	order: 2;
}


/* ================================================================ */
/*  $0 - Dropdown												*/
/* ================================================================ */
.dropdown {
	display: inline-block;
}

.dropdown__button {
	background-color: transparent;
	border: 0;
	cursor: pointer;
	padding: 8px 6px;
}

.dropdown__body {
	display: grid;
	grid-template-rows: 0fr;
	position: absolute;
	will-change: max-height;
}

.dropdown.animated .dropdown__body {
	transition: grid-template-rows 200ms ease;
}

.dropdown.active .dropdown__body {
	grid-template-rows: 1fr;
}

.dropdown__content {	
	overflow: hidden;
	z-index: 1;
}

.dropdown__wrapper {
	background-color: var(--color-white);
	border: 1px solid var(--color-neutral-2);
	border-radius: var(--ft-component-border-radius);
	display: inline-flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: 8px 0;
}

.dropdown__item,
a.dropdown__item {
	color: var(--color-black);
	padding: 6px 16px;
	transition: all 200ms ease;
}

.dropdown__item:hover {
	background-color: var(--color-neutral-0);
	text-decoration: none;
}


/* ================================================================ */
/*  $0 - Dropdown Menu												*/
/* ================================================================ */
:root {
	--dropdown-menu-item-background-hover: var(--color-neutral-0);
	--dropdown-menu-item-border-radius: var(--border-radius-s);
	--dropdown-menu-item-padding: 6px 16px;
	--dropdown-menu-item-full-padding: 16px 16px;
	--dropdown-menu-item-link-color: var(--color-black);
	--dropdown-menu-item-link-color-hover: var(--color-black);
}

.dropdown-menu {
	display: inline-block;
	height: 100%;
}

.dropdown-menu__button {
	background-color: transparent;
	border: 0;
	cursor: pointer;
	padding: 8px 6px;
}

.dropdown-menu__button::after {
	transition: transform var(--transition-time) ease-in-out;
}

.dropdown-menu.active .dropdown-menu__button::after {
	transform: rotate(180deg);
}

.dropdown-menu__body {
	display: grid;
	grid-template-rows: 0fr;
	position: absolute;
	will-change: max-height;
}

.dropdown-menu.animated .dropdown-menu__body {
	transition: grid-template-rows 200ms ease;
}

.dropdown-menu.active .dropdown-menu__body {
	grid-template-rows: 1fr;
}

.dropdown-menu__content {	
	overflow: hidden;
	z-index: 1;
}

.dropdown-menu__wrapper {
	background-color: var(--color-white);
	border: 1px solid var(--color-neutral-2);
	border-radius: var(--ft-component-border-radius);
	box-shadow: 0px 2px 4px #eeeeee;
	display: inline-flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: 8px 0;
	width: 100%;
}

.dropdown-menu__item,
a.dropdown-menu__item {
	border-radius: var(--dropdown-menu-item-border-radius);
	color: var(--dropdown-menu-item-link-color);
	padding: var(--dropdown-menu-item-padding);
	text-decoration: none;
	transition: var(--transition);
}

.dropdown-menu__item:hover,
a.dropdown-menu__item:hover {
	background-color: var(--dropdown-menu-item-background-hover);
	color: var(--dropdown-menu-item-link-color-hover);
	text-decoration: none;
}

/* Dropdown Menu Full Width */
.dropdown-menu.full .dropdown-menu__body {
	box-shadow: 0 5px 8px rgba(154, 154, 154, 0.10);
	left: 0;
	right: 0;
}

.dropdown-menu.full .dropdown-menu__item {
	flex: 1;
	line-height: 1.3rem;
	padding: var(--dropdown-menu-item-full-padding);
}

.dropdown-menu.full .dropdown-menu__wrapper {
	border-radius: 0;
}

.dropdown-menu.full .grid-container {
	display: flex;
	flex-direction: row;
}

/* ================================================================ */
/*  $0 - Left Menu													*/
/* ================================================================ */
:root {
	--ct-btn-left-menu-spacing: 0.438rem;
	--ct-left-menu-content-spacing-y: var(--space-xs);
	--ct-left-menu-content-spacing-left: 1.563rem;
}

.left-menu-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.btn-left-menu {
	align-items: center;
	background-color: transparent;
	border: 1px solid transparent;
	color: var(--color-neutral-8);
	display: flex;
	padding: 0 var(--ct-btn-left-menu-spacing) 0 var(--ct-left-menu-content-spacing-left);
	position: relative;
	transition: all 200ms ease;
}

.btn-left-menu:hover {
	background-color: var(--color-neutral-3);
	color: var(--color-neutral-10);
}

.btn-left-menu:focus {
	background-color: var(--color-neutral-3);
	border: 1px solid var(--color-neutral-5);
	color: var(--color-neutral-10);
}

.left-menu.active > .left-menu__header > .btn-left-menu {
	color: var(--ft-component-icon-color-active);
}

.left-menu__icon {
	color: var(--ft-component-icon-color);
	left: var(--ct-btn-left-menu-spacing);
	position: absolute;
	transition: all 200ms ease;
}

.left-menu.active > .left-menu__header > .btn-left-menu > .left-menu__icon {
	transform: rotate(90deg);
}

.left-menu__header-title {
	font-weight: var(--font-semi-bold);
}

.left-menu__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 200ms ease;
	will-change: max-height;
}

.left-menu.active > .left-menu__body {
	grid-template-rows: 1fr;
}

.left-menu__body .btn {
	color: var(--color-neutral-7);
	left: calc(var(--ft-button-padding-s) * -1);
	position: relative;
	white-space: nowrap;
	width: min-content;
}

.left-menu__body .btn:hover {
	background-color: var(--color-neutral-2);
	color: var(--color-neutral-10);
	text-decoration: none;
}

.left-menu__content {
	overflow: hidden;
}

.left-menu__content-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	padding: var(--ct-left-menu-content-spacing-y) 0;
	padding-left: var(--ct-left-menu-content-spacing-left);
}


/* ================================================================ */
/*  $0 - Modal														*/
/* ================================================================ */
:root {
	--ct-modal-content-padding: var(--space-l) var(--ft-component-padding);
	--ct-modal-footer-background-color: transparent;
	--ct-modal-footer-border: var(--ft-component-border);
}

.modal-overlay {
	align-items: center;
	background-color: rgba(0,0,0,0.3);
	display: none;
	height: 100%;
	justify-content: center;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	transition: opacity 300ms ease;
	width: 100%;
	z-index: 10;
}

.modal-overlay.active {
	display: block;
	opacity: 1;
}

.modal-overlay.is-opening {
	display: flex;
	opacity: 1;
}

.modal-overlay.is-closing {
	opacity: 0;
}

.modal {
	background-color: var(--color-white);
	border-radius: var(--ft-component-border-radius);
	display: flex;
	max-height: 80%;
	max-width: 70%;
}

.modal-header {
	display: flex;
	margin-bottom: var(--space-m);
}

.modal-title {
	flex: 1;
	padding-left: var(--ft-component-padding);
	padding-top: var(--ft-component-padding);
}

.modal-close {
	cursor: pointer;
	font-size: var(--font-size-xxl);
	padding-top: var(--space-s);
	padding-right: var(--space-s);
	user-select: none;
}

.modal-close .dexicon-close {
	align-items: center;
	display: flex;
	height: 30px;
	justify-content: center;
	width: 30px;
}

.modal-body {
	display: flex;
	flex-direction: column;
}

.modal-content {
	overflow-y: auto;
	padding: var(--ct-modal-content-padding);
}

.modal-footer {
	align-items: center;
	background-color: var(--ct-modal-footer-background-color);
	border-top: var(--ct-modal-footer-border);
	display: flex;
	flex-direction: row;
	padding: var(--ft-component-padding);
}


/* ================================================================ */
/*  $0 - Navbar													*/
/* ================================================================ */
:root {
	--ct-navbar-background: var(--color-white);
}

.navbar-wrapper {
	--ft-btn-link-decoration-hover: none;
	border-bottom: var(--ft-component-border);
}

.navbar-wrapper.is-sticky {
	background-color: var(--ct-navbar-background);
	position: sticky;
	top: var(--ct-header-height);
	z-index: 3;
}

.navbar {
	display: flex;
	gap: 40px;
	justify-content: center;
}

.navbar__item,
a.navbar__item {
	color: var(--color-secondary);
	font-size: var(--font-size-s);
	font-weight: var(--font-semi-bold);
	padding: var(--space-s) 0;
	position: relative;
}

.navbar__item:hover,
a.navbar__item:hover {
	color: var(--color-primary);
	text-decoration: none;
}

.navbar__item.active::after {
	background-color: var(--color-primary);
	bottom: -1px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	width: 100%;
}


.content-navbar .navbar__item:not(.no-effect):not(.btn),
.content-navbar a.navbar__item:not(.no-effect):not(.btn):visited,
.content-navbar a.navbar__item:not(.no-effect):not(.btn) {
	color: var(--color-secondary);
	font-size: var(--font-size-s);
	font-weight: var(--font-semi-bold);
	position: relative;
	z-index: 1;
}

.content-navbar .navbar__item:not(.no-effect):not(.btn):hover,
.content-navbar a.navbar__item:not(.no-effect):not(.btn):visited:hover,
.content-navbar a.navbar__item:not(.no-effect):not(.btn):hover {
	color: var(--color-primary);
	text-decoration: none;
}

/* ================================================================ */
/*  $0 - Pagination													*/
/* ================================================================ */
.pagination ul {
	display: flex;
	gap: var(--space-xs);
	list-style: none;
	padding: 0;
}

.pagination li:first-of-type a {
	border-radius: var(--ft-component-border-radius) 0 0 var(--ft-component-border-radius);
}

.pagination li:last-of-type a {
	border-radius: 0 var(--ft-component-border-radius) var(--ft-component-border-radius) 0;
}

.pagination li + li a {
	border-left: 0;
}

.pagination a[aria-current="page"] {
	background-color: var(--color-info-lighter);
	color: var(--color-link);
}

.pagination a {
	align-items: center;
	border-radius: var(--border-radius-s);
	color: var(--color-neutral-10);
	display: flex;
	height: 30px;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	transition: var(--transition);
	width: 30px;
}

.pagination a:hover {
	background-color: var(--color-neutral-0);
}


/* ================================================================ */
/*  $0 - Popover													*/
/* ================================================================ */
.popover {
	background-color: var(--color-white);
	border: 1px solid var(--color-neutral-6);
	border-radius: 6px;
	display: none;
	font-size: var(--font-size-s);
	max-width: 300px;
	opacity: 0;
	position: absolute;
	transition: var(--transition);
}

.popover.active {
	display: block;
	opacity: 1;
}

.popover-header {
	background-color: var(--color-neutral-1);
	border-bottom: 1px solid var(--color-neutral-6);
	border-radius: 6px 6px 0 0;
	font-weight: var(--font-bold);
	padding: var(--space-xs) var(--space-m);
}

.popover-header:empty {
	display: none;
}

.popover-content {
	border-radius: 0 0 6px 6px;
	padding: var(--space-s) var(--space-m);
}

.popover-arrow {
	position: absolute;
	top: calc(50% - 0.25rem);
}

.popover-arrow::after {
	border-color: transparent;
	border-style: solid;
	content: "";
	display: block;
	position: absolute;
}

.popover-arrow::before {
	border-color: transparent;
	border-style: solid;
	content: "";
	display: block;
	position: absolute;
}

.popover-right .popover-arrow {
	height: 1rem;
	left: -0.5rem;
	width: 0.5rem;
}

.popover-right .popover-arrow::after {
	border-right-color: #fff;
	border-width: 0.5rem 0.5rem 0.5rem 0;
	left: 1px;
}

.popover-right .popover-arrow::before {
	border-right-color: rgba(0,0,0,.25);
	border-width: 0.5rem 0.5rem 0.5rem 0;
	left: 0;
}


/* ================================================================ */
/*  $0 - Progress Bar												*/
/* ================================================================ */
.progress-bar {
	background-color: var(--color-neutral-2);
	border-radius: 6px;
	height: 20px;
	overflow: hidden;
}

.progress-bar .progress {
	background-color: var(--color-blue);
	color: var(--color-white);
	font-size: var(--font-size-s);
	height: 20px;
	text-align: center;
	width: 25%;
}


/* ================================================================ */
/*  $0 - Sidebar													*/
/* ================================================================ */
.sidebar-overlay {
	align-items: center;
	background-color: rgba(0,0,0,0.3);
	display: none;
	height: 100%;
	justify-content: center;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	transition: opacity 300ms ease;
	width: 100%;
	z-index: 10;
}

.sidebar-overlay.active {
	display: block;
	opacity: 1;
}

.sidebar-overlay.is-opening {
	display: block;
	opacity: 1;
}

.sidebar-overlay.is-closing {
	opacity: 0;
}

.sidebar {
	background-color: var(--color-white);
	height: 100vh;
	width: 420px;
}

.sidebar-header {
	display: flex;
	padding: var(--ft-component-padding);
}

.sidebar-title {
	flex: 1;
}

.sidebar-content {
	padding: var(--ft-component-padding);
}


/* ================================================================ */
/*  $0 - Tags													*/
/* ================================================================ */
:root {
	--ct-tag-background: var(--color-blue-light-x)
	--ct-tag-color: var(--color-blue-dark);
}

.tag {
	background-color: var(--ct-tag-background);
	border-radius: 4px;
	color: var(--ct-tag-color);
	display: inline-block;
	font-size: var(--font-size-s);
	font-weight: var(--font-semi-bold);
	margin: 2px 0;
	padding: var(--space-xs) var(--space-s);
}


/* ================================================================ */
/*  $0 - Loader												*/
/* ================================================================ */
.loader {
	animation: 1s linear infinite loader-spin;
	display: inline-block;
	border: 4px solid currentColor;
	border-radius: 50%;
	border-right-color: transparent;
	height: 30px;
	width: 30px;
}

@keyframes loader-spin {
  to {transform: rotate(360deg);}
}


/* ================================================================ */
/*  $0 - Tabs														*/
/* ================================================================ */
.tab-nav__links {
	display: flex;
	gap: 3px;
	margin: 0;
	padding: 0;
}

.tab-nav__link {
	background-color: var(--color-neutral-1);
	border: 1px solid var(--color-neutral-2);
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	cursor: pointer;
	height: 100%;
	padding: 8px 16px;
	position: relative;
	transition: all 200ms ease;
}

.tab-nav__link::before {
	background-color: var(--color-white);
	bottom: -1px;
	content: "";
	height: 3px;
	left: 0;
	opacity: 0;
	position: absolute;
	transition: all 200ms ease;
	width: 100%;
}

.tab-nav__link.active {
	background-color: var(--color-white);
}

.tab-nav__link.active::before {
	opacity: 1;
}

.tab-nav-content {
	background-color: var(--color-white);
	border: 1px solid var(--color-neutral-2);
}

.tab-nav__item {
	list-style: none;
}

.tab-nav-content__item {
	display: none;
	opacity: 0;
	padding: var(--ft-component-padding);
}

.tab-nav-content__item.active {
	display: block;
	opacity: 1;
}


/* ================================================================ */
/*  $0 - Toast												*/
/* ================================================================ */
.toast {
	bottom: 20px;
	display: none;
	opacity: 0;
	position: fixed;
	right: 20px;
	transform: translate(0px, -15px);
	transition: var(--transition);
}

.toast.active {
	display: block;
	opacity: 1;
	transform: translate(0, 0);
}

.toast.is-closing {
	opacity: 0;
	transform: translate(0px, -15px);
}

.toast .btn-close {
	transform: translate(10px, 0px);
}

.toast.toast-left {
	left: 20px;
	right: initial;
}

.toast.toast-top {
	bottom: initial;
	left: 0;
	margin: 0 auto;
	max-width: 400px;
	right: 0;
	top: 20px;
}

.toast.toast-bottom {
	bottom: 20px;
	left: 0;
	margin: 0 auto;
	max-width: 400px;
	right: 0;
	top: initial;
}


/* ================================================================ */
/*  $0 - Tooltip													*/
/* ================================================================ */
.tootip {
	background-color: var(--color-black);
	border-radius: var(--border-radius-s);
	color: var(--color-white);
	/*display: none;*/
	max-width: 400px;
	padding: 10px;
	position: absolute;
	opacity: 0;
	transform: translate(0, calc(-50% + 10px));
	transition: var(--transition);
	visibility: hidden;
}

.tootip.active {
	/*display: inline-block;*/
	opacity: 1;
	visibility: visible;
}

.tootip.is-opening {
	/*display: inline-block;*/
	visibility: visible;
}

.tootip.is-closing {
	opacity: 0;
	visibility: hidden;
}

.tootip::before {
	border-bottom: 7px solid transparent;
	border-right: 7px solid var(--color-black);
	border-top: 7px solid transparent;
	content: "";
	display: block;
	left: -7px;
	position: absolute;
	top: calc(50% - 7px);
}

/* -------------------------- MOBILE -------------------------- */
@media (max-width: 991.98px) {
	.dropdown-menu.full .dropdown-menu__body {
		box-shadow: none;
	}
}