/*--------------------------------------------------------------
# Drop Down Menu Component
--------------------------------------------------------------*/

.dd-menu {
	--dd-primaryRGB: 19, 37, 87;
	--dd-secondaryRGB: 213, 128, 64;
	--dd-primaryColor: rgba(var(--dashboard-primaryRGB), 1);
	--dd-secondaryColor: rgba(var(--dashboard-secondaryRGB), 1);
	--dd-lightColor: #ffffff;
	--dd-opacity: 0;
	--dd-transform: scale(0.5);
	--dd-border-radius: 5px;
	--dd-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
		0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
	--dd-shadow2: 0px 3px 6px #00000029;
	--dd-transition: opacity 0.03s linear,
		transform 0.12s cubic-bezier(0, 0, 0.2, 1),
		-webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);

	container-type: inline-size;
	container-name: ddmenu;
	background: var(--dd-lightColor);
	border-radius: var(--dd-border-radius);
	box-sizing: border-box;
	font-size: 1rem;
	margin-top: 2px;
	content-visibility: hidden;
	will-change: transform, opacity;
	z-index: -1;
	box-shadow: var(--dd-shadow);
	opacity: var(--dd-opacity);
	transform: var(--dd-transform);
	transition: var(--dd-transition);
	width: clamp(300px, 60vw, 450px);
}

/* Color Variations */
.ForexProgram-class {
	--dd-secondaryColor: rgba(var(--forex-primaryRGB), 1);

}

.FuturesProgram-class {
	--dd-secondaryColor: rgba(var(--future-primaryRGB), 1);
}

.OptionsProgram-class {
	--ss-secondaryColor: rgba(var(--options-primaryRGB), 1);
}

.MarketStructure-class{
	--ss-secondaryColor: rgba(var(--market-primaryRGB), 1);
}

/* #FundedStructureProgram,
#FundedStructureProgram_goals {
	--ss-secondaryColor: rgba(var(--funded-primaryRGB), 1);
} */

.dd-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.dd-menu.menu-state--open {
	--dd-opacity: 1;
	--dd-transform: scale(1);
	content-visibility: visible;
	z-index: 2;
}

/** Safari */
/* Safari Only */
@supports selector(:nth-child(1 of x)) {
	.dd-menu {
		display: none;
		visibility: hidden;
	}
	.dd-menu.menu-state--open {
		visibility: visible;
	}
}

.dd-trigger {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.dd-menu .menu-header {
	background: var(--dd-primaryColor);
	color: var(--dd-lightColor);
	padding: 1rem;
	font-weight: 400;
}

.dd-menu .menu-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--dd-lightColor);
	padding: 0.5rem;
}

.dd-menu .menu-footer button {
	border-radius: 0;
	box-shadow: var(--dd-shadow2);
	line-height: 1;
	padding: 7px 15px 8px 15px;
	min-width: 100px;
	background: var(--dd-lightColor);
	border: 1px solid var(--dd-primaryColor);
	cursor: pointer;
	transition: 0.15s ease;
}

.dd-menu .menu-footer button:hover {
	-webkit-filter: brightness(1.2);
	filter: brightness(1.2);
}

.dd-menu .menu-footer .class-save {
	background: var(--dd-primaryColor);
	border: 1px solid var(--dd-primaryColor);
	color: var(--dd-lightColor);
}

.dd-trigger.dd-close {
	position: absolute;
	top: 0;
	right: 0;
	background-color: transparent;
	border: none;
	width: auto;
	height: auto;
	padding: 0.75rem 0.5rem;
	box-shadow: none;
	margin: 0;
	font-size: 1.25rem;
	z-index: 2;
}

.confirmation-button {
	margin: 1rem 0 0 !important;
	padding: 0 1.2rem 0 0 !important;
	width: auto !important;
}

/* Component Drop Down Actions */
.scroll-dropdown .menu-content {
	max-height: 370px;
	overflow: auto;
	background: #f2f2f2;
	padding: 0 0.35rem 0.5rem;
}

.standard-dropdown,
.component-actions .dd-menu {
	padding: 1rem;
	box-sizing: border-box;
	max-width: 29.5rem;
	width: 100%;
	position: relative;
}

.standard-dropdown {
	padding-right: 3rem;
}

.dd-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: bold;
	padding-bottom: 1rem;
}

.sticky-title {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	margin: 0;
	box-sizing: border-box;
}

.component-actions .menu-header {
	font-size: 1.5rem;
}

.component-actions .menu-header .description-text {
	font-size: 1.2rem;
	padding-top: 0.3rem;
	padding-bottom: 1.3rem;
}
.component-actions .dd-menu button {
	font-size: 1.3rem;
}

/* Drop Down Class List */

.class-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.5rem;
	padding: 0.5rem;
	box-shadow: var(--dd-shadow2);
	background: var(--dd-lightColor);
}

.class-item .class-check-item {
	display: flex;
	align-items: center;
	gap: 5px;
}

.class-item .class-check-item input {
	width: auto;
	box-shadow: none;
	min-width: 0;
	margin: 0;
	height: 1.1rem;
	width: 1.1rem;
	box-shadow: var(--dd-shadow2);
}

.class-item .class-link {
	background: var(--dd-secondaryColor);
	color: var(--dd-lightColor);
	text-decoration: none;
	padding: 0.5rem 0.75rem;
	display: block;
	font-size: 0.8rem;
	border-radius: 5px;
	text-shadow: 2px 2px 2px #00000057;
	font-weight: 400;
}

#MarketStructure-class .class-item .class-link{
	background:var(--market-primaryColor);
}

/* Container Queries */

@container ddmenu (max-width: 375px) {
	.class-item .class-link .link-description {
		display: none;
	}
}