/* Widen side navigation menu panel when DEVISES menu or currency panel is expanded */
#nav-Navigation.nav-devises-expanded,
#nav-Navigation:has(#devisesSubsectionsContainer[style*="display: block"]),
#nav-Navigation:has(#devisesSubsectionsContainer[style*="display:block"]),
#nav-Navigation:has(.currency-dropdown-panel.show),
#nav-Navigation:has(.currency-dropdown-panel[style*="display: block"]),
#nav-Navigation:has(.currency-dropdown-panel[style*="display:block"]) {
	width: 650px !important;
	max-width: 95vw !important;
	transition: width 0.25s ease-in-out !important;
}
/* Currency Selector CSS Overrides */
#section-connexion > ul > li.nav-item.currency-menu-item,
li.currency-menu-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	position: relative !important;
	margin: 4px 0 !important;
}

/* Remove any line/border under DEVISES when expanded or hovered */
.devises-master-item,
.devises-master-link,
#devisesMasterToggleBtn {
	border-bottom: none !important;
}

.devises-master-link::after,
.devises-master-link::before,
#devisesSubsectionsContainer::before,
#devisesSubsectionsContainer::after {
	display: none !important;
	border: none !important;
}

#devisesSubsectionsContainer,
#devisesSubsectionsContainer ul,
#devisesSubsectionsContainer li,
#devisesSubsectionsContainer a {
	border-top: none !important;
	border-bottom: none !important;
	border-right: none !important;
}

li.currency-menu-item > a.nav-link#currencyToggleBtn {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	padding: 4px 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	user-select: none !important;
	text-decoration: none !important;
}

li.currency-menu-item > a.nav-link#currencyToggleBtn i.bi.currency-icon-main {
	font-size: 22px !important;
	line-height: 1 !important;
	margin: 0 !important;
	display: inline-block !important;
	min-width: 22px !important;
}

.currency-info-btn-wrap {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 4px !important;
	cursor: pointer !important;
	position: static !important;
	float: none !important;
}

.currency-info-btn-wrap .tootltipButton {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	background-color: #ffffff !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: 'Albert Sans', 'Inter', sans-serif !important;
	font-weight: 800 !important;
	font-style: italic !important;
	font-size: 11px !important;
	color: #308796 !important;
	line-height: 1 !important;
	margin: 0 !important;
}

.currency-info-btn-wrap .tootltipButton img {
	display: none !important;
}

.popover-body a {
	color: #0071e3 !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
	background-color: #e6f0ff !important;
	padding: 1px 4px !important;
	border-radius: 3px !important;
	display: inline-block !important;
}

.popover-body a:hover {
	color: #0052a3 !important;
	background-color: #d0e4ff !important;
}

.currency-dropdown-panel {
	display: none;
	position: relative !important;
	width: 100% !important;
	background: rgba(0, 0, 0, 0.25) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	border-radius: 8px !important;
	padding: 8px 4px !important;
	margin: 6px 0 10px 0 !important;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3) !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

.currency-dropdown-panel.show {
	display: block !important;
}

.currency-col {
	padding: 0 4px !important;
}

.currency-opt {
	font-family: 'Albert Sans', 'Inter', sans-serif !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	padding: 4px 6px !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
	margin-bottom: 3px !important;
	line-height: 1.2 !important;
}

/* Trait séparant les devises traditionnelles de la cryptomonnaie */
.currency-sep {
	border: 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
	opacity: 1 !important;
	margin: 4px 6px 6px 6px !important;
}

.currency-opt:hover {
	background-color: rgba(255, 255, 255, 0.3) !important;
	color: #ffffff !important;
}

.currency-opt.active {
	background-color: #ffffff !important;
	color: #01677d !important;
	font-weight: 800 !important;
}