.magic-scrollbar:not(html):not(body) {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.magic-scrollbar:not(html):not(body)::-webkit-scrollbar {
	width: 0;
	height: 0;
}

@media (min-width: 800px) {
	html.magic-page-scrollbar-active {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	html.magic-page-scrollbar-active::-webkit-scrollbar {
		width: 0;
		height: 0;
	}
}

.magic-scroll-ui {
	--magic-scroll-size: 18px;
	--magic-scroll-button: 18px;
	--magic-scroll-thumb: 6px;
	--magic-scroll-arrow: 9px;
	--magic-scroll-color: var(--magic-color-green, #00B497);
	--magic-scroll-active: var(--magic-color-deep-green, #004F51);
	position: fixed;
	z-index: 2147483000;
	inset: 0 auto auto 0;
	pointer-events: none;
}

.magic-scroll-ui[hidden] {
	display: none;
}

.magic-scroll-ui__rail {
	position: fixed;
	z-index: 2147483001;
	display: flex;
	flex-direction: column;
	width: var(--magic-scroll-size);
	pointer-events: auto;
}

.magic-scroll-ui__button {
	appearance: none;
	position: relative;
	flex: 0 0 var(--magic-scroll-button);
	width: var(--magic-scroll-button);
	height: var(--magic-scroll-button);
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--magic-scroll-color);
	background: transparent;
	cursor: pointer;
}

.magic-scroll-ui__button:hover,
.magic-scroll-ui__button:focus-visible,
.magic-scroll-ui__button:active {
	color: var(--magic-scroll-active);
}

.magic-scroll-ui__button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--magic-scroll-arrow);
	height: var(--magic-scroll-arrow);
	background: currentColor;
	-webkit-mask: url("../../img/icons/arrowup.svg") center / contain no-repeat;
	mask: url("../../img/icons/arrowup.svg") center / contain no-repeat;
	filter: drop-shadow(0 0 0.35px currentColor);
	transform: translate(-50%, -50%);
}

.magic-scroll-ui__button--end::before {
	transform: translate(-50%, -50%) rotate(180deg);
}

.magic-scroll-ui__track {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	cursor: pointer;
}

.magic-scroll-ui__thumb {
	appearance: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-width: var(--magic-scroll-size);
	min-height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: grab;
	touch-action: none;
}

.magic-scroll-ui__thumb:active {
	cursor: grabbing;
}

.magic-scroll-ui__thumb-visual {
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 50%;
	width: var(--magic-scroll-thumb);
	box-sizing: border-box;
	border: 0;
	border-radius: 999px;
	background: var(--magic-scroll-color);
	transform: translateX(-50%);
}

.magic-scroll-ui__thumb:hover .magic-scroll-ui__thumb-visual,
.magic-scroll-ui.magic-is-dragging .magic-scroll-ui__thumb-visual {
	background: var(--magic-scroll-active);
}

.magic-scroll-ui--document {
	--magic-scroll-size: 1.05vw;
	--magic-scroll-button: 1.05vw;
	--magic-scroll-thumb: 0.45vw;
	--magic-scroll-arrow: 0.62vw;
}

@media (max-width: 799px) {
	.magic-scroll-ui--document {
		display: none !important;
	}
}