.dropdown_header_box
{
	cursor: pointer;
    border: var(--button-border);
    border-radius: .25rem;
    box-shadow: rgb(0 0 0 / 15%) 0 1px 1px 0, rgb(0 0 0 / 9%) 0 2px 5px -1px;
    font-weight: 500;
    padding: 8px 6px;
	font-size: 0.75em !important;
	box-sizing: border-box;
	color: var(--alt-font-color);
	width: 20em !important;
	transition:
		border-color 220ms var(--transition-easing-standard),
		box-shadow 260ms var(--transition-easing-standard),
		background 260ms var(--transition-easing-standard);
}

[data-theme="dark"] .dropdown_header_box:hover 
{
    border-color: rgb(255 255 255);
}

@media (min-width: 701px) and (min-height: 501px)
{
	[data-theme="light"] .dropdown_header_box
	{
		border: 1px solid rgb(203 210 223 / 92%) !important;
		border-radius: 0.42rem;
		background: linear-gradient(180deg, rgb(255 255 255 / 99%) 0%, rgb(250 252 255 / 99%) 100%);
		box-shadow:
			0 1px 2px rgb(15 23 42 / 4%),
			0 8px 20px -16px rgb(15 23 42 / 10%);
	}

	[data-theme="light"] .dropdown_header_box:hover
	{
		border-color: rgb(168 179 198 / 96%) !important;
		background: linear-gradient(180deg, rgb(255 255 255 / 100%) 0%, rgb(248 250 253 / 100%) 100%);
		box-shadow:
			0 1px 2px rgb(15 23 42 / 5%),
			0 10px 24px -16px rgb(15 23 42 / 13%);
	}

	[data-theme="dark"] .dropdown_header_box
	{
		border: 1px solid rgb(149 166 201 / 20%) !important;
		border-radius: 0.42rem;
		background:
			linear-gradient(180deg, rgb(255 255 255 / 2.6%) 0%, rgb(255 255 255 / 0.7%) 100%),
			linear-gradient(135deg, rgb(85 113 177 / 7%) 0%, rgb(9 16 31 / 0%) 76%),
			var(--menu-bg-color);
		box-shadow:
			0 0 0 1px rgb(255 255 255 / 4%),
			inset 0 1px 0 rgb(255 255 255 / 4.5%),
			0 10px 20px -18px rgb(0 0 0 / 72%);
	}

	[data-theme="dark"] .dropdown_header_box:hover
	{
		border-color: rgb(176 194 229 / 26%) !important;
		background:
			linear-gradient(180deg, rgb(255 255 255 / 4.1%) 0%, rgb(255 255 255 / 1%) 100%),
			linear-gradient(135deg, rgb(96 127 196 / 9%) 0%, rgb(9 16 31 / 0%) 76%),
			var(--menu-bg-color);
		box-shadow:
			0 0 0 1px rgb(255 255 255 / 5%),
			inset 0 1px 0 rgb(255 255 255 / 5.5%),
			0 12px 22px -18px rgb(0 0 0 / 78%);
	}
}

[data-theme="light"] .dropdown_header_box:hover 
{
	transition-duration: 200ms;
}

.dropdown_header_chevron
{
	display: none;
}

.dropdown_header_chevron~label
{
	display: inline;
}

.dropdown_header_text
{
	font-size: 1em;
	vertical-align: top;
}

input.dropdown_header_chevron:not(:checked)~div .dropdown_list_container .item_active
{
	border: unset !important;
	background-color: unset !important;
	color: unset !important;
}

.dropdown_list_container
{
	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	flex-wrap: nowrap;
	justify-content: center;
	position: absolute;
	width: 100%;
	left: -7px;
	top: 13px;
	transform: translateY(7px);
	padding: 6px;
	z-index: 7;

	border: 1px solid #a3a3a3;
	border-radius: 0.25em !important;
	background: var(--menu-bg-color);

	box-shadow: 0px 0px 0px 0px black;

	max-height: 0;
	overflow-y: hidden;

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	font-weight: 500;

	/* targeted transitions (closing uses these by default) */
	transition:
		max-height var(--transition-duration-fast) var(--transition-easing-emphasized),
		transform        var(--transition-duration-fast) var(--transition-easing-emphasized),
		opacity    var(--transition-duration-fast) var(--transition-easing-emphasized),
		box-shadow var(--transition-duration-fast) var(--transition-easing-emphasized),
		-webkit-backdrop-filter var(--transition-duration-fast) var(--transition-easing-emphasized),
		/* hide only AFTER the close animation finishes */
		visibility 0s linear var(--transition-duration-fast);

	will-change: max-height, top, opacity;
}

input.dropdown_header_chevron:checked~div .dropdown_list_container
{
	visibility: visible !important;
	pointer-events: auto;

	max-height: 600px !important;
	opacity: 1;
	transform: translateY(0);

	box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 7px -2px !important;

	/* slower open */
	transition:
		max-height var(--transition-duration-slow) var(--transition-easing-emphasized),
		transform        var(--transition-duration-slow) var(--transition-easing-emphasized),
		opacity    var(--transition-duration-slow) var(--transition-easing-emphasized),
		box-shadow var(--transition-duration-slow) var(--transition-easing-emphasized),
		-webkit-backdrop-filter var(--transition-duration-slow) var(--transition-easing-emphasized),
		/* show immediately when opening */
		visibility 0s linear 0s;
}


[data-theme="dark"] .dropdown_list_container
{
	border: 1px solid rgb(154 171 208 / 17%) !important;
	border-radius: 0.42rem !important;
	background:
		linear-gradient(180deg, rgb(255 255 255 / 2.8%) 0%, rgb(255 255 255 / 0.6%) 100%),
		linear-gradient(135deg, rgb(84 113 177 / 6.5%) 0%, rgb(9 16 31 / 0%) 74%),
		var(--menu-bg-color);
	box-shadow:
		0 0 0 1px rgb(255 255 255 / 4.5%),
		inset 0 1px 0 rgb(255 255 255 / 4%),
		0 16px 30px -26px rgb(0 0 0 / 82%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

[data-theme="light"] .dropdown_list_container
{
	border: 1px solid rgb(199 207 221 / 96%) !important;
	border-radius: 0.42rem !important;
	background: linear-gradient(180deg, rgb(255 255 255 / 99%) 0%, rgb(250 252 254 / 99%) 100%);
	box-shadow:
		0 1px 2px rgb(15 23 42 / 5%),
		0 18px 34px -18px rgb(15 23 42 / 14%);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

[data-theme="dark"] input.dropdown_header_chevron:checked~div .dropdown_list_container
{
	box-shadow:
		0 0 0 1px rgb(255 255 255 / 5.5%),
		inset 0 1px 0 rgb(255 255 255 / 4.5%),
		0 18px 34px -26px rgb(0 0 0 / 86%) !important;
}

[data-theme="light"] input.dropdown_header_chevron:checked~div .dropdown_list_container
{
	box-shadow:
		0 1px 2px rgb(15 23 42 / 6%),
		0 22px 40px -18px rgb(15 23 42 / 16%) !important;
}

.dropdown_container_list
{
	margin-block-start: 1px;
	margin-block-end: 1px;
	padding-inline-start: 0;
	list-style: none;
}

.dropdown_container_list_item
{
	margin: 2px;
	padding: 8px;
	z-index: 100;
	border-radius: 3px;
	text-transform: uppercase;
	transition: all var(--transition-duration-fast) var(--transition-easing-linear);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	text-decoration: none;
	color: var(--alt-font-color);
}

.dropdown_container_list_item a:link,
.dropdown_container_list_item a:visited,
.dropdown_container_list_item a:hover,
.dropdown_container_list_item a:active
{
	text-decoration: none;
	color: var(--alt-font-color);
}

.dropdown_container_list_item a:hover
{
	color: var(--primary-font-color) !important;
}

.dropdown_container_list_item:hover
{
	background-color: var(--hover-accent-color) !important;
	color: var(--primary-font-color) !important;
}

[data-theme="dark"] .dropdown_container_list_item
{
	border: 1px solid transparent;
	border-radius: 0.32rem;
}

[data-theme="light"] .dropdown_container_list_item
{
	border: 1px solid transparent;
	border-radius: 0.32rem;
}

[data-theme="dark"] .dropdown_container_list_item:hover
{
	background:
		linear-gradient(180deg, rgb(255 255 255 / 4%) 0%, rgb(255 255 255 / 1.05%) 100%) !important;
	border-color: rgb(255 255 255 / 7%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

[data-theme="light"] .dropdown_container_list_item:hover
{
	background: rgb(228 235 245) !important;
	border-color: rgb(195 205 220 / 88%);
	box-shadow: none;
	color: rgb(23 34 53) !important;
}

[data-theme="light"] .dropdown_container_list_item:hover a,
[data-theme="light"] .dropdown_container_list_item:hover span,
[data-theme="light"] .dropdown_container_list_item:hover *,
[data-theme="light"] .dropdown_container_list_item > ul li:hover *
{
	color: rgb(24 33 50) !important;
}

.dropdown_container_list_item>ul li:hover *,
.dropdown_container_list_item:hover *
{
	color: var(--primary-font-color) !important;
	filter: unset;
}

.item_submenu
{
	overflow: hidden;
	overflow-y: auto;
	border-radius: 3px;
	padding-left: 10px;
	padding-right: 3px;
	max-height: 0;
	margin: 3px;
	opacity: 0;
	transition: max-height var(--transition-duration-slow) cubic-bezier(0, 1, 0, 1), opacity var(--transition-duration-fast) var(--transition-easing-standard);
	box-shadow: inset 0px 0px 8px -3px rgb(0 0 0 / 25%);
	pointer-events: none;
	border: 0.1px solid #c0c0c0;
}

[data-theme="light"] .item_submenu
{
	border: 1px solid rgb(203 210 223 / 92%);
	border-radius: 0.34rem;
	background: linear-gradient(180deg, rgb(255 255 255 / 99%) 0%, rgb(249 251 254 / 99%) 100%);
	box-shadow:
		0 1px 2px rgb(15 23 42 / 4%),
		0 12px 24px -18px rgb(15 23 42 / 10%);
}

[data-theme="dark"] .item_submenu
{
	border: 1px solid rgb(255 255 255 / 7%);
	border-radius: 0.34rem;
	background:
		linear-gradient(180deg, rgb(255 255 255 / 2%) 0%, rgb(255 255 255 / 0.4%) 100%),
		linear-gradient(135deg, rgb(72 104 169 / 5%) 0%, rgb(9 16 31 / 0%) 76%);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 3.5%),
		inset 0 0 8px -3px rgb(0 0 0 / 22%);
}

.item_submenu_active
{
	margin: 5px;
	max-height: 150px;
	padding: 6px;
	opacity: 1;
	transition: max-height var(--transition-duration-deliberate) var(--transition-easing-emphasized), opacity var(--transition-duration-deliberate) var(--transition-easing-emphasized);
	pointer-events: auto;
}

.item_submenu_arrow
{
	float: right;
	line-height: 0.6em;
	font-size: 1.7em;
	transition: all var(--transition-duration-quick) var(--transition-easing-linear);
	cursor: pointer;
}

.item_submenu_arrow::selection
{
	color: none;
	background: none;
}

.item_submenu_arrow_active
{
	transform: rotate(135deg);
}

.item_submenu ul
{
	margin-block-start: 1px;
	margin-block-end: 1px;
	padding-inline-start: 0;

	list-style: none;
}

.item_submenu li a:link,
.item_submenu li a:visited,
.item_submenu li a:hover,
.item_submenu li a:active
{
	text-decoration: none;
	color: var(--alt-font-color)
}

.item_submenu li a
{
	font-size: 0.95em;
}

.item_submenu li
{
	padding: 5px;
	margin-bottom: 0.5em;
	transition: all var(--transition-duration-fast) var(--transition-easing-linear);
	text-transform: uppercase;
	border-radius: 3px;
}

[data-theme="dark"] .item_submenu li
{
	border: 1px solid transparent;
	border-radius: 0.3rem;
}

[data-theme="light"] .item_submenu li
{
	border: 1px solid transparent;
	border-radius: 0.3rem;
}

.item_submenu li:hover
{
	background-color: var(--hover-accent-color);
	color: var(--primary-font-color) !important;
	box-shadow: none !important;
}

[data-theme="dark"] .item_submenu li:hover
{
	background:
		linear-gradient(180deg, rgb(255 255 255 / 4%) 0%, rgb(255 255 255 / 1.05%) 100%);
	border-color: rgb(255 255 255 / 7%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%) !important;
}

[data-theme="light"] .item_submenu li:hover
{
	background: rgb(228 235 245);
	border-color: rgb(195 205 220 / 88%);
	box-shadow: none !important;
}

[data-theme="light"] .item_submenu li:hover *:not(.unpressed_off):not(.unpressed_on)
{
	color: rgb(24 33 50) !important;
}

.item_submenu li:hover *:not(.unpressed_off):not(.unpressed_on)
{
	color: var(--primary-font-color) !important;
	filter: unset;
}

.item_active
{
	border: 0.5px solid #d5d5d5;
	background-color: var(--accent-color);
	color: var(--primary-font-color) !important;
}

[data-theme="dark"] .item_active
{
	border: 1px solid rgb(149 166 201 / 22%);
	background:
		linear-gradient(180deg, rgb(84 111 173 / 78%) 0%, rgb(70 98 160 / 70%) 100%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%);
}