:root {
	--ask-appbar-height: 80px
}

body>nav.navbar {
	position: sticky;
	top: 0;
	z-index: 1042
}

.desktop-sidebar-toggle {
	display: none
}

@media (min-width:768px) {
	#sidebarToggle {
		display: none !important
	}

	#wrapper>.sidebar {
		position: sticky;
		top: var(--ask-appbar-height);
		align-self: flex-start;
		height: calc(100vh - var(--ask-appbar-height));
		height: calc(100dvh - var(--ask-appbar-height));
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin
	}

	#wrapper>.sidebar .nav-item .nav-link {
		position: relative
	}

	#wrapper>.sidebar:not(.toggled) .sporcu-atama-menu-badge {
		position: static !important;
		display: inline-flex;
		float: none;
		align-items: center;
		justify-content: center;
		margin: 0 0 0 10px !important;
		vertical-align: middle;
		font-size: .7rem
	}

	#wrapper>.sidebar.toggled .sporcu-atama-menu-badge {
		position: absolute !important;
		top: 7px;
		right: 7px;
		display: inline-flex;
		float: none;
		align-items: center;
		justify-content: center;
		margin: 0 !important;
		font-size: .7rem
	}

	.desktop-sidebar-toggle {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		top: calc(var(--ask-appbar-height) + 5px);
		left: calc(var(--ask-sidebar-right, 225px) - 0px);
		z-index: 1043;
		width: 25px;
		height: 30px;
		padding: 0;
		color: #a8a8a8;
		background: #343a40;
		border: 2px solid rgba(0, 0, 0, .25);
		border-radius: 0 5px 5px 0;
		box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
		cursor: pointer;
		transform-origin: left center;
		transition: background-color .18s ease, transform .18s ease
	}

	.desktop-sidebar-toggle:hover {
		color: #fff;
		background: rgba(0, 0, 0, .825);
		outline: 0;
		transform: scale(1.04);
		animation: saga-esne 0.4s ease-in-out;
	}

	@keyframes saga-esne {

		0%,
		100% {
			transform: scaleX(1);
			transform: translateX(0);
		}

		25% {
			transform: scaleX(1.25);
			transform: translateX(-3px);
		}

		50% {
			transform: scaleX(1.5);
			transform: translateX(0px);
		}
		75% {
			transform: scaleX(1.25);
			transform: translateX(-3px);
		}
	}

	.desktop-sidebar-toggle:focus {
		outline: 0;
		transform: scale(1.04);
	}

}

@media (max-width:767px) {
	body>nav.navbar {
		position: sticky;
		top: 0;
		z-index: 1042
	}

	#wrapper>.sidebar .sporcu-atama-menu-badge,
	#wrapper>.sidebar.toggled .sporcu-atama-menu-badge {
		position: static !important;
		display: inline-flex;
		float: none;
		margin: 0 0 0 auto !important;
		font-size: .7rem
	}

	#wrapper>.sidebar {
		position: fixed;
		top: var(--ask-mobile-appbar-height, 80px);
		bottom: 0;
		left: 0;
		z-index: 1041;
		width: min(82vw, 280px) !important;
		min-height: 0;
		height: auto;
		overflow-x: hidden;
		overflow-y: auto;
		transform: translateX(-105%);
		box-shadow: 12px 0 32px rgba(0, 0, 0, .22);
		transition: transform .22s ease;
		overscroll-behavior: contain
	}

	#wrapper>.sidebar.toggled {
		width: min(82vw, 280px) !important;
		overflow-x: hidden;
		overflow-y: auto;
		transform: translateX(0)
	}

	#wrapper>.sidebar .nav-item .nav-link,
	#wrapper>.sidebar.toggled .nav-item .nav-link {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 14px 18px;
		text-align: left
	}

	#wrapper>.sidebar .nav-item .nav-link i,
	#wrapper>.sidebar.toggled .nav-item .nav-link i {
		width: 22px;
		text-align: center
	}

	#wrapper>.sidebar .nav-item .nav-link span,
	#wrapper>.sidebar.toggled .nav-item .nav-link span {
		display: inline;
		font-size: .95rem
	}

	.mobile-sidebar-backdrop {
		position: fixed;
		top: var(--ask-mobile-appbar-height, 80px);
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1040;
		background: rgba(15, 23, 42, .52);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .22s ease, visibility .22s ease
	}

	body.sidebar-toggled .mobile-sidebar-backdrop {
		opacity: 1;
		visibility: visible;
		pointer-events: auto
	}

	body.sidebar-toggled {
		overflow: hidden
	}

	#wrapper #content-wrapper {
		width: 100%
	}
}

@media (max-width:420px) {
	body>nav.navbar .navbar-brand {
		font-size: .9rem
	}

	body>nav.navbar .navbar-brand img {
		width: 48px;
		height: 48px
	}
}

@media (prefers-reduced-motion:reduce) {

	#wrapper>.sidebar,
	.mobile-sidebar-backdrop,
	.desktop-sidebar-toggle {
		transition: none
	}
}

#wrapper>.sidebar {
	scrollbar-width: thin;
	scrollbar-color: #343a40 #212529
}

#wrapper>.sidebar::-webkit-scrollbar {
	width: 6px;
	height: 6px
}

#wrapper>.sidebar::-webkit-scrollbar-track {
	background: #212529
}

#wrapper>.sidebar::-webkit-scrollbar-thumb {
	background: #343a40;
	border-radius: 6px
}

#wrapper>.sidebar::-webkit-scrollbar-thumb:hover {
	background: #4b535b
}

#wrapper>.sidebar::-webkit-scrollbar-button,
#wrapper>.sidebar::-webkit-scrollbar-button:single-button,
#wrapper>.sidebar::-webkit-scrollbar-button:vertical:start:decrement,
#wrapper>.sidebar::-webkit-scrollbar-button:vertical:end:increment,
#wrapper>.sidebar::-webkit-scrollbar-button:horizontal:start:decrement,
#wrapper>.sidebar::-webkit-scrollbar-button:horizontal:end:increment {
	-webkit-appearance: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	background: transparent !important
}

#wrapper>.sidebar::-webkit-scrollbar-corner {
	background: #212529
}

#feedbackMenuLink .feedback-menu-badge {
	position: static !important;
	top: auto !important;
	display: inline-block !important;
	margin-left: .4rem !important;
	vertical-align: middle;
	color: #fff;
	font-size: .65rem;
	font-weight: 600
}