/* Default TopNav Styles */
ml-topnav {
	display: flex;
	justify-content: flex-start;
	width: 100vw;
	min-width: 100vw;
	max-width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	height: var(--topnav-height);
	background-color: transparent;
	border-bottom: none;
	z-index: 110;
	pointer-events: none;
	font-family: var(--header-font-family);
	font-weight: bold;
	white-space: nowrap;
	transition: background-color 0.3s ease-in-out;
	--backdrop-display: none;
	--megamenu-height: 500px;
	--megamenu-padding: var(--scale8-2);
	--hamburger-section-margin-right: var(--gutter-margin);
	--logo-section-display: flex;
	--logo-section-width: var(--ml-toc-width);
	--logo-margin-left: calc(2 * var(--gutter-margin-s));
	--logo-margin-right: var(--scale8-3);
	--logo-section-justify-content: flex-start;
	--logo-section-align-items: center;
	--logo-section-background-color: transparent;
	--logo-section-display: flex;
	--cast-section-display: none;
	--links-section-display: flex;
	--search-section-display: flex;
	--search-section-margin-left: auto;
	--search-nav-item-margin: var(--scale8-1);
	--search-button-width: 200px;
	--search-button-transformX: 0;
	--search-box-opacity: 1;
	--search-box-pointer-events: auto;
	--login-section-display: flex;
	--hamburger-section-margin-left: unset;
	--hamburger-section-display: flex;
	--default-search-width: 240px;
	--user-section-display: none;
	--solid-background-color: var(--ml-background-color);
	--search-box-shadow: unset;
	--exit-preview-section-display: none;
}

ml-topnav .nav-item,
ml-topnav button,
ml-topnav a,
ml-topnav input,
ml-topnav backdrop,
ml-topnav ml-icon-text,
ml-topnav ml-icon {
	pointer-events: auto;
}

ml-topnav[hidden] { display: none }

ml-topnav.solid,
.explanation-box-drawer-open ml-topnav {
	background-color: var(--ml-background-color);
	border-bottom: 1px solid var(--ml-border-color);
}

ml-topnav[megamenu-open],
ml-topnav[sidenav-open] {
	--backdrop-display: block;
}

ml-topnav[mode-search-focus] {
	--hamburger-section-margin-right: var(--gutter-margin-s);
	--logo-margin-left: 0;
	--logo-margin-right: 0;
	--logo-section-width: var(--ml-toc-width);
	--logo-section-justify-content: center;
	--logo-section-background-color: var(--ml-background-color);
	--links-section-display: none;
	--search-section-margin-left: calc(50vw - 275px - (812px / 2) );
	--search-nav-item-margin: 0;
	--search-button-width: var(--content-view-width);
	--login-section-display: none;
	--hamburger-section-margin-left: auto;
	--content-search-width: var(--content-view-width);
	--content-search-width-m: var(--content-view-width-m);
}

ml-topnav[search-focused] {
	--links-section-display: none;
	--search-focused-width: 100%;
}

ml-topnav[search-focused] section.search {
	flex-grow: 1;
}

ml-topnav[mode-search-focus] section.search {
	flex-grow: unset;
}

ml-topnav[lesson-preview] {
	--exit-preview-section-display: none;
	--hamburger-section-display: flex;
	--user-section-display: flex;
	--links-section-display: none;
}

ml-topnav[is-lesson-owner] {
	--exit-preview-section-display: flex;
	--hamburger-section-display: none;
	--user-section-display: none;
}

ml-topnav[mode-llmai] {
	--links-section-display: none;
	--login-section-display: none;
	--logo-section-display: none;
	--search-section-display: none;
	--user-section-display: none;
	--hamburger-section-margin-left: auto;
	--logo-margin-left: var(--gutter-margin);
	background-color: transparent;
	border: 0;
}

ml-topnav[mode-mathvizy-window] {
	--links-section-display: none;
	--login-section-display: none;
	--search-section-display: none;
	--user-section-display: none;
	--hamburger-section-margin-left: auto;
	--logo-margin-left: var(--gutter-margin);
	background-color: var(--ml-background-color);
	border-bottom: 1px solid var(--ml-border-color);
}

ml-topnav[is-lesson-owner] section.user {
	display: none;
}


ml-topnav backdrop {
	position: absolute;
	display: var(--backdrop-display);
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: var(--ml-backdrop);
	opacity: 0.7;
	width: 100vw;
	height: 100dvh;
	z-index: 99;
}

ml-topnav section {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	height: 100%;
	z-index: 2;
}

ml-topnav section.logo {
	display: var(--logo-section-display);
	margin-left: var(--logo-margin-left);
	margin-right: var(--logo-margin-right);
	width: auto;
	padding-bottom: 4px;
	justify-content: var(--logo-section-justify-content);
	align-items: var(--logo-section-align-items);
}

.ml-toc-open ml-topnav[mode-search-focus] section.logo {
	background-color: var(--logo-section-background-color);
	width: var(--ml-toc-width);
	min-width: var(--ml-toc-width);
	margin-left: unset;
}

ml-topnav section.cast {
	position: absolute;
	right: calc(100% - var(--ml-toc-width) - 32px);
	display: var(--cast-section-display);
	padding: 24px;
	color: var(--ml-primary-color);
	cursor: pointer;
}

ml-topnav section.cast:hover {
	filter: brightness(1.1);
}

ml-topnav section.cast:active {
	scale: 0.95;
}


.explanation-box-drawer-open ml-topnav {
	background-color: var(--ml-background-color);
	--search-section-display: none;
	--cast-section-display: flex;
}

ml-topnav[mode-search-focus] section.logo {
	background-color: transparent;
	width: var(--ml-toc-width);
	margin-left: 0;
}

ml-topnav section.links {
	display: var(--links-section-display);
	margin-left: var(--gutter-margin-xs);
}

ml-topnav section.search {
	display: var(--search-section-display);
	position: relative;
	margin-left: auto;
	align-items: var(--logo-section-align-items);
	transition: flex-grow ease-out 0.3s;
	z-index: 1; /* Below the other sections because the search bar can be absolute and cover the other sections */
}

ml-topnav .nav-item.has-submenu > a {
	display: flex;
	flex-direction: row;
	align-items: center;
}

ml-topnav .nav-item.has-submenu > a > ml-icon {
	width: 20px;
	transition-property: transform;
	transition-duration: 300ms;
	transition-timing-function: ease;
}

ml-topnav .nav-item.has-submenu:hover > a > ml-icon {
	transform: rotate(180deg);
}

ml-topnav .nav-item .submenu {
	position: absolute;
	visibility: hidden;
	top: 100%;
	opacity: 0;
	padding: 0;
	margin: 0;
	margin-top: 0;
	margin-bottom: 0;
	z-index: 9999;
	width: 240px;
	background: var(--ml-background-color);
	list-style: none;
	border-radius: 5px;
	transform: translateZ(0);
	text-align: left;
}

ml-topnav .nav-item:hover .submenu {
	opacity: 1;
	visibility: visible;
}

ml-topnav .nav-item:hover .submenu:after {
	position: absolute;
	width: 0;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	margin-left: 0;
	content: " ";
	font-size: 0;
	line-height: 0;
	border-top: 10px solid var(--ml-background-color);
	left: 10%;
	top: -10px;
	transform: rotate(180deg);
}

ml-topnav .nav-item ul.submenu > li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ml-border-color);
}

ml-topnav .nav-item ul.submenu > li:last-child {
	border-bottom: none;
}

ml-topnav .nav-item ul.submenu > li > a {
	width: 100%;
	justify-content: start;
	border-radius: 0;
}

ml-topnav .nav-item ul.submenu > li:last-child > a {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

ml-topnav .nav-item ul.submenu > li > a,
ml-topnav .nav-item ul.submenu > li > a > ml-icon {
	color: var(--ml-primary-color);
}

ml-topnav .nav-item ul.submenu > li > a:hover,
ml-topnav .nav-item ul.submenu > li > a:hover > ml-icon {
	filter: brightness(0.97);
	color: var(--ml-text-color);
	background-color: var(--ml-background-highlight-color);
}

.ml-toc-open ml-topnav[mode-search-focus] section.search {
	margin-left: auto;
}

.ml-toc-closed ml-topnav[mode-search-focus] section.search {
	width: calc(100% - 10px);
	position: absolute;
}

ml-topnav section.search .nav-item {
	width: var(--content-search-width, var(--search-focused-width,  var(--default-search-width)));
	margin: var(--search-nav-item-margin);
	margin-right: auto;
	margin-left: auto;
	transition: width ease 0.5s;
	transition-property: width, box-shadow, opacity;
	box-shadow: var(--search-box-shadow);
	opacity: var(--search-box-opacity);
	pointer-events: var(--search-box-pointer-events);
}

ml-topnav section.search {
	display: var(--search-section-display);
}

ml-topnav section.login {
	display: var(--login-section-display);
}

ml-topnav section.user {
	display: var(--user-section-display);
}

ml-topnav section.login,
ml-topnav section.user {
	margin-left: var(--scale8-1);
}

ml-topnav section.user {
	font-size: calc(var(--rem-base) - 2px);
}

ml-topnav[mode-search-focus] section.user {
	position: absolute;
	right: 90px;
}

ml-topnav[mode-search-focus] section.login {
	display: none;
}

ml-topnav[signed-in] section.login {
	display: none;
}

ml-topnav[signed-out] section.user {
	display: none;
}

ml-topnav section.hamburger {
	display: var(--hamburger-section-display);
	margin-right: var(--hamburger-section-margin-right);
	margin-left: var(--hamburger-section-margin-left);
}

.explanation-box-drawer-open ml-topnav section.hamburger {
	display: none;
}

ml-topnav .nav-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	cursor: pointer;
	margin: 0 var(--scale8-1);
	text-align: center;
}

ml-topnav .nav-item:hover {
	color: var(--ml-link-highlight-color);
}

ml-topnav .hamburger .nav-item {
	margin: 0 var(--scale8-2);
}

ml-topnav ml-icon-text.logo {
	margin: 15px;
	margin-left: 0;
}

ml-topnav ml-icon-text.logo::part(icon) {
	width: var(--scale8-3);
	color: var(--ml-primary-color);
}

ml-topnav ml-icon-text.logo::part(text) {
	font-size: var(--rem-xl);
	font-family: var(--header-font-family);
	font-weight: bold;
	color: var(--ml-primary-color);
}

ml-topnav ml-icon-text.expand-item {
	gap: 0;
}

ml-topnav .link-landing {
	text-decoration: none;
}

ml-topnav .link-landing:hover {
	filter: brightness(140%);
}

ml-topnav .link-landing .link-landing-text {
	display: none;
}

ml-topnav .links .menu-root {
	display: flex;
	flex-direction: row;
	align-items: center;
}

ml-topnav .links .menu-root .nav-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	align-items: center;
	min-height: 50px;
	height: 50px;
	margin: 0;
	padding: 0 var(--scale8-2);
	border-top-left-radius: var(--scale8-1);
	border-top-right-radius: var(--scale8-1);
	user-select: none;
	transform-origin: bottom;
	z-index: 100;
	background-color: transparent;
	margin-top: 0;
	font-size: 16px;
	font-weight: bold;
	font-family: var(--header-font-family);
	color: var(--ml-text-color);
}

ml-topnav .links .menu-root .nav-item.active {
	background-color: var(--ml-primary-color);
	color: #fff;
	border: 1px solid transparent;
}

ml-topnav .megamenu {
	display: flex;
	width: calc(100% - var(--gutter-margin-l));
	height: var(--megamenu-height);
	max-height: calc(100dvh - var(--topnav-height));
	position: absolute;
	top: calc(var(--topnav-height) - 20px);
	left: var(--gutter-margin);
	z-index: 1000;
	box-sizing: border-box;
	transform-origin: 25% 0%;
	overflow: hidden;

	background-color: var(--ml-background-color);
	box-shadow: 0.1em 8px 20px rgba(0, 0, 0, 0.30);
	border-radius: var(--scale8-1);

	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	transition-duration: 0.4s;
	transition-property: transform;
	transition-delay: 0;
	transform: scale(0);
	filter: blur(3px);
	pointer-events: none;
}

ml-topnav .megamenu.show {
	transform: unset;
	filter: blur(0px);
	pointer-events: auto;
}

ml-topnav .megamenu section {
	display: none;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	width: 25%;
	min-width: 260px;
	max-width: 260px;
	overflow-y: auto;
	padding: var(--gutter-margin-s);
	padding-right: 0;
}

ml-topnav .megamenu section.level-1 {
	background-color: var(--ml-background-moodlight-color);
}

ml-topnav .megamenu section.level-1,
ml-topnav .megamenu section.show {
	display: flex;
}

ml-topnav .megamenu section.nested {
	background-color: var(--ml-background-color);
	border-right: 2px solid var(--ml-border-color);
	justify-content: start;
	max-width: 225px;
}

ml-topnav .megamenu section.width-small {
	width: auto;
	min-width: 100px;
}

ml-topnav .megamenu .menu-fragment {
	display: none;
	order: 1000;
	width: 100%;
}

ml-topnav .megamenu .menu-fragment.show {
	display: flex;
}

ml-topnav .megamenu section .button {
	display: flex;
	flex-direction: row;
	align-items: center;
	user-select: none;
	cursor: default;
	text-align: left;
	font-weight: 600;
	line-height: 1.4;
	white-space: normal;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0 var(--gutter-margin-xs);
	height: 60px;
	min-height: 60px;
	color: var(--ml-text-color);
	font-size: var(--rem-s);
	font-family: var(--header-font-family);
	width: 100%;
	background-color: transparent;
	border: none;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

ml-topnav .megamenu section .button.cursor-pointer {
	cursor: pointer;
}

ml-topnav .megamenu section .button:hover {
	color: var(--ml-primary-color);
	background-color: var(--ml-background-color);
}

ml-topnav .megamenu section .button.active {
	color: var(--ml-primary-color);
	background-color: var(--ml-background-color);
}

ml-topnav .megamenu section.nested .button.active.ml-collapsible-trigger {
	background-color: transparent;
}

ml-topnav .megamenu section.nested .button.active.ml-collapsible-trigger:hover {
	background-color: var(--ml-background-moodlight-color);
}

ml-topnav .megamenu section.nested .button:hover {
	background-color: var(--ml-background-highlight-color);
}

ml-topnav .megamenu section.nested .button.active {
	background-color: var(--ml-background-moodlight-color);
}

ml-topnav .megamenu section .button ml-icon {
	margin-left: auto;
}

ml-topnav .megamenu section .button.ml-collapsible-trigger.opened ml-icon.icon-expand {
	transform: rotate(180deg);
}

.ml-user-type-student ml-topnav .megamenu section.level-1 #educators.button {
	opacity: 0.3;
	pointer-events: none;
}

.skin-mlknowgaps.ml-user-type-student ml-topnav #services.nav-item {
	display: none;
}

ml-topnav .megamenu section .ml-collapsible .button {
	max-height: 45px;
	min-height: 45px;
}

ml-topnav .megamenu section.level-1 .button {
	text-align: center;
	justify-content: center;
}

ml-topnav ml-icon-text.expand-item::part(icon) {
	width: 20px;
}

ml-topnav .nav-premium {
	transition-property: opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

ml-topnav[premium-active] .nav-item.nav-premium {
	opacity: 0;
	pointer-events: none;
}

ml-topnav .premium {
	color: var(--ml-text-color);
	text-decoration: none;
	transition-property: opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

ml-topnav .premium:active {
	transform: scale(0.97);
}

ml-topnav .search-button {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: calc(var(--search-button-width) + 16px);
	background-color: #fff;
	height: 56px;
	align-items: center;
	border: 1px solid var(--ml-border-highlight-color);
	border-radius: 5px;
	padding: 0 var(--scale8-3);
}

ml-topnav[mode-search-focus] .search-button {
	width: calc(var(--search-button-width));	
}

ml-topnav .search-button p {
	font-weight: 600;
	font-size: var(--rem-base);
	color: var(--ml-text-lowlight-color);
}

ml-topnav input {
	border: 0;
	color: var(--ml-headline-text-color);
	outline: none;
	background-color: transparent;
}

ml-topnav input::placeholder {
	font-family: var(--header-font-family);
	color: var(--ml-text-lowlight-color);
}

ml-topnav input:focus {
	border: none;
	outline: none;
}

ml-topnav ml-icon.search {
	display: flex;
	width: var(--scale8-2);
	color: var(--ml-primary-color);
}

ml-topnav ml-icon.hamburger {
	width: var(--scale8-4);
	color: var(--ml-primary-color);
}

ml-topnav ml-icon.hamburger:active {
	transform: scale(0.95);
}

ml-topnav .sign-in-icon,
ml-topnav .dashboard-icon {
	width: var(--scale8-3);
	margin-right: 5px;
	color: var(--ml-primary-color);
}

ml-topnav .sign-in-icon {
	display: none;
}

ml-topnav button.create-account-button {
	width: fit-content;
	height: 56px;
	line-height: var(--header-line-height);
	font-weight: bold;
	background-color: var(--ml-primary-color);
	color: var(--ml-secondary-color);
	border: none;
	border-radius: 5px;
	padding: var(--scale8-1) var(--scale8-3);
	cursor: pointer;
}

ml-topnav .dashboard-button {
	display: none;
	flex-direction: row;
	color: var(--ml-primary-color);
	line-height: 32px;
	position: relative;
}

ml-topnav .dashboard-button:hover {
	color: var(--ml-link-highlight-color);
}


ml-topnav .exit-preview {
	display: var(--exit-preview-section-display);
	margin-left: auto;
}

.ml-view-type-dashboard ml-topnav {
	--exit-preview-section-display: none;
}

ml-topnav .exit-preview-button {
	display: flex;
	width: auto;
	height: 42px;
	justify-content: space-between;
	align-items: center;
	background-color: var(--ml-primary-color);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 8px 16px;
	cursor: pointer;
	margin: 20px;
	margin-right: 8px;
	font-family: var(--header-font-family);
	font-size: var(--rem-base);
}

ml-topnav .exit-preview-button .separator-line {
	width: 1px;
	height: 100%;
	margin-left: 16px;
	margin-right: 16px;
	background-color: #5e5ece
}

ml-topnav .exit-preview-button:active {
	scale: 0.98;
}

ml-topnav .exit-preview-button ml-icon {
	margin: 0;
	/* padding-left: 12px; */
	display: flex;
	width: 20px;
	height: 20px;
	background-color: var(--ml-button-highlight-text-color);
	border-radius: 50%;
	color: var(--ml-primary-color);
	padding: 1px;
}


.country-us ml-topnav .logo ml-icon-text::after {
	content: "360";
	translate: -10px 3px;
	font-family: var(--header-font-family);
	color: var(--ml-primary-color);
	font-size: var(--rem-xs);
}

/* Hide these in topnav, but show in sidenav */
ml-topnav #premium.nav-item,
ml-topnav #settings.nav-item,
ml-topnav #download-app.nav-item,
ml-topnav #dashboard.nav-item,
ml-topnav #support.nav-item {
	display: none;
}

ml-topnav #get-started-dashboard.active {
	background-color: unset;
	color: var(--ml-text-color);
}

ml-topnav #get-started-dashboard.active:hover {
	background-color: var(--ml-background-highlight-color);
	color: var(--ml-primary-color);
}


/* Adaptive Styling */
/********************/

@media all and (max-width: 1440px) {
	ml-topnav .exit-preview-button span,
	ml-topnav .exit-preview-button .separator-line {
		display: none;
	}
}

@media all and (max-width: 1380px) {
	ml-topnav[mode-search-focus] section.user {
		display: none;
	}
}

@media all and (max-width: 1345px) {
	.ml-toc-closed ml-topnav section.hamburger {
		margin-left: 0;
	}

	.ml-toc-closed ml-topnav[mode-llmai] section.hamburger {
		margin-left: auto;
	}

	.ml-toc-closed ml-topnav[mode-search-focus] section.search {
		position: relative;
		width: var(--default-search-width);
		margin-left: auto;
	}

	ml-topnav[mode-search-focus] section.user {
		display: none;
	}

	ml-topnav button.create-account-button {
		font-size: var(--rem-base);
		padding: var(--scale8-1) var(--scale8-1);
	}

	.ml-toc-closed.ml-view-type-content ml-topnav[mode-search-focus] section.search {
		position: relative;
		width: auto;
		margin-left: auto;
	}

	.ml-toc-closed ml-topnav section.search .nav-item {
		width: auto;
	}

	.ml-toc-closed ml-search-nav::part(input) {
		display: none;
	}

	.ml-toc-closed ml-search-nav::part(input-container) {
		width: auto;
		background-color: transparent;
		border: 0;
	}

}

@media (max-width: 1239px) {
	ml-topnav {
		--logo-margin-left: calc(var(--gutter-margin));
	}

	ml-topnav .mlc,
	ml-topnav .tbs,
	ml-topnav section.login,
	ml-topnav section.links,
	ml-topnav ml-megamenu-mlc,
	ml-topnav ml-megamenu-tbs,
	ml-topnav a.premium {
		display: none;
	}

	ml-topnav[mode-search-focus] {
		--logo-margin-right: 0;
		--logo-section-width:  var(--ml-toc-width);
		--logo-section-background-color: var(--ml-background-color);
		--links-section-display: flex;
		
		--search-nav-item-margin: 0;
		--search-button-width: 60%;
		--login-section-display: none;
		--hamburger-section-margin-left: auto;
	}

	ml-topnav section.login,
	ml-topnav section.user {
		display: none;
	}

	ml-topnav .search-button {
		width: auto;
		min-width: 240px;
		max-width: 300px;
	}
	
	ml-topnav section.hamburger {
		margin-left: auto;
	}

	ml-topnav section.search .nav-item {
		width: var(--content-search-width-m, var(--search-focused-width,  var(--default-search-width)));
		margin: var(--search-nav-item-margin);
	}

	ml-topnav section.search {
		margin-left: auto;
		margin-right: 0;
	}

	.ml-toc-open ml-topnav[mode-search-focus] section.search {
		margin: 0 auto;
	}
}

@media (max-width: 1024px) {
	ml-topnav {
		--default-search-width: 50px;
	}

	ml-topnav section.search .nav-item {
		width: auto;
		margin-left: auto;
	}

	ml-topnav section.search {
		margin-left: auto;
		margin-right: 0;
	}

	.ml-toc-open ml-topnav[mode-search-focus] section.search {
		margin-left: auto;
		margin-right: 0;
		transform: none;
	}

	ml-topnav ml-search-nav::part(input) {
		display: none;
	}

	ml-topnav ml-search-nav::part(input-container) {
		width: auto;
	}
}

@media (max-width: 904px) {
	
	ml-topnav.solid {
		background-color: var(--ml-background-color);
	}

	ml-topnav[mode-llmai] {
		background-color: var(--ml-background-color);
		border-bottom: 1px solid var(--ml-border-color);
	}
	
	ml-topnav[mode-search-focus] {
		width: auto;
	}

	ml-topnav,
	ml-topnav[mode-search-focus] {
		--search-button-width: 200px;
	}

	ml-topnav section.hamburger {
		margin: 0;
	}

	ml-topnav[mode-llmai] section.hamburger {
		margin-left: auto;
	}

	ml-topnav .nav-item {
		margin: var(--scale8-2);
	}

	ml-topnav .hamburger .nav-item {
		margin-right: var(--scale8-4);
	}

	ml-topnav .search-button {
		width: auto;
		background-color: transparent;
		border: 0;
	}

	ml-topnav ml-icon.search,
	ml-topnav ml-icon.sign-in-icon {
		width: var(--scale8-3);
	}

	ml-topnav .nav-item.create-account,
	ml-topnav .sign-in-text,
	ml-topnav .search-button p,
	ml-topnav .login {
		display: none;
	}

	ml-topnav ml-icon-text.logo {
		margin-right: 0;
	}

	ml-topnav .sign-in-icon {
		display: flex;
	}

	ml-topnav section.logo {
		margin-left: var(--scale8-8);
	}
	ml-topnav[mode-search-focus] section.logo {
		margin-left: calc( var(--gutter-margin) - 33px);
		width: unset;
	}
}

@media (max-width: 599px) {
	ml-topnav,
	ml-topnav[mode-search-focus] {
		--logo-margin-left: var(--gutter-margin-s);
		--logo-section-width: auto;
		--search-button-width: 64px;
	}

	ml-topnav section.logo {
		margin-left: 33px;
		margin-left: var(--scale8-4);
	}

	ml-topnav[mode-search-focus] section.logo {
		margin-left: 0;
		width: unset;
		justify-content: flex-start;
		padding-left: 22px;
		transition: padding 0.3s ease;
	}

	.ml-toc-open ml-topnav[mode-search-focus] section.logo {
		padding-left: 72px;
	}

	.ml-toc-open ml-topnav[mode-search-focus] section.search {
		transform: none;
	}

	ml-topnav[mode-search-focus] section.search .nav-item {
		width: 56px;
		left: unset;
	}

	ml-topnav[mode-search-focus] .hamburger .nav-item {
		margin: 0 var(--scale8-2);
		margin-right: var(--gutter-margin-xs);
	}

	ml-topnav .nav-item {
		margin: 0 var(--scale8-2);
	}

	ml-topnav .search-button p {
		display: none;
	}

}

@media all and (min-width: 1px) {
	ml-topnav[mode-search-focus] .mlc,
	ml-topnav[mode-search-focus] .tbs,
	ml-topnav[mode-search-focus] .links,
	ml-topnav[mode-search-focus] ml-megamenu-mlc,
	ml-topnav[mode-search-focus] ml-megamenu-tbs,
	ml-topnav[mode-search-focus] a.premium {
		display: none;
	}
}

@media all and (min-width: 1025px) and (max-width: 5000px) {
	.ml-view-type-content.ml-toc-open ml-topnav.solid {
		background-color: transparent;
		border-bottom: unset;
		--search-box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.15);
		--search-box-opacity: 0;
		--search-box-pointer-events: none;
	}
}

@media all and (min-width: 1240px) and (max-width: 5000px) {
	ml-topnav[mode-search-focus] section.search {
		width: 100%;
	}
}

@media all and (min-width: 1345px) and (max-width: 5000px) {
	ml-topnav[mode-search-focus] section.search .nav-item {
		width: var(--content-view-width);
		margin-right: auto;
		margin-left: auto;
	}
}

@media all and (max-width: 1440px) {

	ml-topnav .megamenu section {
		padding-left: var(--gutter-margin-2xs);
		min-width: 225px;
		max-width: 225px;
	}

	ml-topnav .megamenu section .button {
		padding: var(--gutter-margin-2xs);
	}

}