.link
{
	color: var(--md-sys-color-primary);
	text-decoration: none;
}

/* Buttons */

.floating-action-button
{
	border-radius: 16px;
	height: 56px;
	width: 56px;
	position: fixed;
	bottom: 16px;
	right: 16px;
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: 8px;
	background-color: var(--md-sys-color-primary-container);
	cursor: pointer;
	overflow: hidden;
	transition: 0.2s;
	z-index: 2;
	box-sizing: border-box;
	padding: 16px;
}

.floating-action-button.disable
{
	transform: translate(0px, 84px);
}

.floating-action-button:before
{
	width: 48px;
	height: 48px;
	margin: -12px;
	content: '';
	display: block;
	opacity: 0;
	transform: scale(0);
	background-color: var(--md-sys-color-on-surface-variant-2);
	border-radius: 50%;
	position: absolute;
}

.floating-action-button-min:before
{
	content: '';
	display: block;
	width: 32px;
	height: 32px;
	opacity: 0;
	transform: scale(0);
	background-color: var(--md-sys-color-on-surface-variant-2);
	border-radius: 50%;
	margin: -4px;
	position: absolute;
}

.floating-action-button.a:before
{
	animation-name: zoom-in, show-in;
	animation-duration: 0.2s, 0.2s;
	animation-fill-mode: forwards, forwards;
}

.floating-action-button.p:before
{
	animation-name: zoom-in-mas, show-out;
	animation-duration: 0.6s, 0.6s;
	animation-fill-mode: forwards, forwards;
}

.floating-action-button.c:before
{
	animation-name: zoom-out, show-out;
	animation-duration: 0.2s, 0.2s;
	animation-fill-mode: forwards, forwards;
}

.floating-action-button > div
{
	color: var(--md-sys-color-on-primary-container);
	font-size: 24px;
	transition: 0.2s;
}

.floating-action-button-min
{
	height: 40px;
	width: 40px;
	background-color: var(--md-sys-color-primary-container);
	visibility: hidden;
	transform: scale(0.6);
	opacity: 0;
	padding: 8px;
	border-radius: 12px;
	right: 24px;
}

.floating-action-button-min.s
{
	animation-name: show-action-button-min;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

.floating-action-button-min.h
{
	animation-name: hide-action-button-min;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

.floating-action-button-min:before
{
	background-color: var(--md-sys-color-on-surface-variant-2);
}

.floating-action-button-min > div
{
	color: var(--md-sys-color-on-primary-container);
}

.button
{
	height: 48px;
	width: 48px;
	background-size: 24px;
	background-position: 12px;
	background-repeat: no-repeat;
	transition: 0.2s;
	cursor: pointer;
	box-sizing: border-box;
	padding: 12px;
}

.bar-header .button
{
	height: var(--const-header-bar-height);
	padding: calc((var(--const-header-bar-height) - 24px) / 2) 12px;
}

.button-min
{
	width: 24px;
	padding: 12px 0px;
}

.button:hover
{
	color: var(--md-sys-color-on-surface-variant);
}

.button:before
{
	content: '';
	display: block;
	height: 32px;
	width: 32px;
	border-radius: 50%;
	background-color: var(--md-sys-color-on-surface-variant-2);
	transition: 0.3s;
	margin: 8px;
	opacity: 0;
	transform: scale(0);
	position: absolute;
	top: 0px;
	left: 0px;
}

.bar-header .button:before
{
	top: calc((var(--const-header-bar-height) - 48px) / 2);
}

.button-min:before
{
	width: 24px;
	left: -8px;
}

/*Button 1*/

.button1.a:before
{
	/*animation-name: button-animation-1, button-pulse;
	animation-duration: 0.2s, 2s;
	animation-delay: 0s, 0.2s;
	animation-iteration-count: 1, infinite;
	animation-fill-mode: forwards, none;*/

	animation-name: button-animation-1;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

.button1.p:before
{
	animation-name: button-animation-4;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

.button1.d:before
{
	animation-name: button-animation-5;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
}

.button1.c:before
{
	animation-name: button-animation-3;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

/*Button 2*/

.button2.a:before
{
	animation-name: button-animation-1;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

.button2.p:before
{
	animation-name: button-animation-2;
	animation-duration: 0.2s;
	animation-fill-mode: none;
}

.button2.c:before
{
	animation-name: button-animation-3;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

.bar-title
{
	float: left;
	font-size: 14px;
	line-height: var(--const-header-bar-height) !important;
	font-weight: 400;
	height: var(--const-header-bar-height);
	margin-left: 20px;
	overflow: hidden;
	overflow-x: auto;
	white-space: nowrap;
	word-wrap: normal;
	min-width: 92px;
	color: var(--md-sys-color-on-surface);
	-webkit-app-region: no-drag;
}

.bar-title-a
{
	cursor: pointer;
}

.bar-title-a:hover
{
	text-decoration: underline;
}

.bar-title .navegation
{
	font-size: 18px;
	display: inline-block;
	transform: translate(0px, 4px);
	color: inherit;
	margin: 0px 2px;
}

/*Global Elements*/
/* Hover */

.hover
{
	width: 500px;
	position: fixed;
	opacity: 0;
	text-align: center;
	z-index: 15;
	left: 0px;
	margin-left: -250px;
	visibility: hidden;
	pointer-events: none;
}

.hover.a
{
	animation-name: hover-in;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

.hover.a-i
{
	animation-name: hover-in-invert;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

.hover.d
{
	animation-name: hover-out;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

.hover.d-i
{
	animation-name: hover-out-invert;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

.hover > div
{
	margin-top: 0px;
	margin-bottom: 0px;
	display: inline-block;
	border-radius: 4px;
	background-color: var(--md-sys-color-inverse-surface);
	line-height: 24px;
	color: var(--md-sys-color-inverse-on-surface);
	padding: 0px 8px;
	min-height: 24px;
	/*opacity: 0.9;*/
}


/* Menus */

.menu
{
	position: relative;
	transition: 0.3s transform;
	/*transform: translateY(0px);*/
}

.menu-close
{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 11;
	display: none;
}

.menu-close.a
{
	display: block;
}

.menu-simple
{
	position: fixed;
	border-radius: 8px;
	opacity: 0;
	z-index: 12;
	display: none;
	padding: 0px;
	font-size: 15px;
	overflow: visible;
	/*overflow-x: hidden;*/
	scrollbar-gutter: stable;
	box-shadow: none !important;
}

.menu-simple:before
{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--md-sys-color-surface-container);
	z-index: -1;
	position: absolute;
	border-radius: 8px;
	top: 0px;
	left: 0px;
	box-shadow: var(--md-sys-elevation-level2);
}

.menu-simple.top:before
{
	transform-origin: top;
}

.menu-simple.bottom:before
{
	transform-origin: bottom;
}

.menu-simple.center:before
{
	transform-origin: center;
}

/* Add chidlren here */
.menu-simple-content
{
	width: 100%;
	overflow: auto;
	overflow-x: hidden;
	scrollbar-gutter: stable;
	padding: 8px 0px;
}

.menu-simple.a .menu-simple-content
{
	animation-name: expand-in-clip-path;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
}

.menu-simple.d .menu-simple-content
{
	animation-name: expand-out-clip-path;
	animation-duration: 0.15s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
}

.menu-simple.a.bottom .menu-simple-content
{
	animation-name: expand-in-clip-path-bottom;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
}

.menu-simple.d.bottom .menu-simple-content
{
	animation-name: expand-out-clip-path-bottom;
	animation-duration: 0.15s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
}

.menu-simple.a.center .menu-simple-content
{
	animation-name: expand-in-clip-path-center;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
}

.menu-simple.d.center .menu-simple-content
{
	animation-name: expand-out-clip-path-center;
	animation-duration: 0.15s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
}

/*
.menu-simple.a:not(.bottom) .menu-simple-content > div > div
{
	animation-name: expand-in-children;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
}

.menu-simple.d:not(.bottom) .menu-simple-content > div > div
{
	animation-name: expand-out-children;
	animation-duration: 0.15s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
}*/



.menu-simple-content > div
{
	width: calc(100% + 12px);
}

.menu-simple-header
{
	max-height: calc(100vh - 72px - var(--title-and-tabs-bar-height-always-visible));
}

.menu-simple-header .menu-simple-content
{
	max-height: calc(100vh - 88px - var(--title-and-tabs-bar-height-always-visible));
}

.menu-simple.a
{
	animation-name: expand-in-foreground;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
	display: block;
	clip-path: inset(-20px -20px -20px -20px round 14px);
	transition: 0.3s clip-path;
}

.menu-simple.d
{
	animation-name: expand-out-foreground;
	animation-duration: 0.15s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
	display: block;
	pointer-events: none;
}

.menu-simple.a:before
{
	animation-name: expand-in;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
	display: block;
	clip-path: inset(-20px -20px -20px -20px round 14px);
}

.menu-simple.d:before
{
	animation-name: expand-out;
	animation-duration: 0.15s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
	display: block;
}

.menu-simple .menu-simple
{
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.menu-simple .menu-simple .menu-simple
{
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.menu-simple .menu-simple .menu-simple .menu-simple
{
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.menu-simple .menu-simple .menu-simple .menu-simple .menu-simple
{
	box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.menu-simple-element
{
	height: 40px;
	padding: 0px 24px;
	line-height: 40px;
	cursor: pointer;
	transition: 0.2s;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
	position: relative;
	display: flex;
}

.menu-simple-element > span
{
	display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
	flex: 1;
}

.menu-simple-element > span > div,
.menu-simple-element > span > span
{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
}

.menu-simple-element > span > div
{
	margin-top: 15px;
	margin-bottom: -26px;
}

.menu-simple-element > span > span,
.menu-simple-element-right-text
{
	color: color-mix(in srgb, var(--md-sys-color-on-surface-variant), transparent 20%);
}

.menu-simple-element i
{
	float: right;
	padding: 8px 0px 8px 8px;
}

.menu-simple-element i.menu-simple-icon
{
	position: relative;
	z-index: 2;
}

.menu-simple-element i.menu-simple-icon-last
{
	margin-right: -8px;
	position: relative;
	z-index: 2;
}

.menu-simple-element i.menu-simple-icon-first
{
	margin: 0px 0px 0px -2px;
	padding: 8px 12px 8px 0px;
	float: left;
	position: relative;
	z-index: 2;
}

.menu-simple-element-icon-select
{
	transition: 0.2s;
	opacity: 0;
}

.menu-simple-element-icon-select.active
{
	opacity: 1;
}

.menu-simple-element.s
{
	background-color: var(--md-sys-color-secondary-container);
}

.menu-simple-element:before
{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	transition: 0.2s;
	z-index: 0;
}

.menu-simple-element.rounded:before
{
	border-radius: 8px;
}

.menu-simple-element:hover:before
{
	background-color: var(--md-sys-color-on-surface-variant-2);
}

.menu-simple-element:active:before,
.menu-simple-element.gamepad-highlight:before
{
	background-color: var(--md-sys-color-on-surface-variant-4);
}

.menu-simple-element-image
{
	height: 24px;
	width: 24px;
	border-radius: 6px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: 8px 6px 0px 0px;
	float: left;
}

.menu-simple-element-image > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	overflow-clip-margin: unset;
	border-radius: 6px;
}

.menu-simple-element-little
{
	padding: 4px 24px;
}

.menu-simple-element-compact
{
	padding: 0px 24px;
	height: 38px;
	line-height: 38px;
}

.menu-simple-element-compact i.menu-simple-icon-first
{
	padding: 7px 12px 7px 0px;
}

.menu-simple-element-medium
{
	padding: 8px 24px;
}

.menu-gamepad .menu-simple-element-medium,
.menu-gamepad .menu-simple-element-little,
.menu-gamepad .menu-simple-element-compact
{
	padding: 0px 24px;
	height: 40px;
	line-height: 40px;
}

.menu-gamepad .menu-simple-element-compact i.menu-simple-icon-first
{
	padding: 8px 12px 8px 0px;
}

.menu-simple-element-padding-left
{
	padding-left: 36px !important;
}

.menu-simple-element-padding-left-2
{
	padding-left: 72px !important;
}

.menu-simple-element-medium .menu-simple-element-image
{
	height: 32px;
	width: 32px;
	border-radius: 8px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: 4px 12px 0px 0px;
	float: left;
	overflow: hidden;
}

.menu-simple-element-medium .menu-simple-element-image img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
}

.menu-simple-element-medium .menu-simple-element-image img.active
{
	opacity: 1;
}

.menu-simple-element-dialog
{
	padding: 8px 8px 8px 18px;
	width: calc(100% + 6px);
	margin-left: -16px;
}

.menu-simple-element-icons-1 > span,
.menu-simple-element-icons-2 > span
{
	display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
	width: calc(100% - 60px);
}

.menu-simple-element-icons-2 > span
{
	width: calc(100% - 80px);
}

.menu-simple-element-poster
{
	height: 72px;
	padding: 8px 24px;
	line-height: 72px;
}

.menu-simple-element-poster .menu-simple-element-image
{
	height: 72px;
	width: 48px;
	border-radius: 6px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-color: var(--md-sys-color-force-surface);
	margin: 0px 12px 0px 0px;
	float: left;
}

.menu-tracking-sites .menu-simple-element-image
{
	margin-right: 12px;
}

.menu-presets .menu-simple-element-image
{
	margin-right: 12px;
	border-radius: 12px;
	width: 64px;
	border: 1px solid var(--md-sys-color-surface-variant);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin-top: 3px;
}

.menu-presets .menu-simple-element-image > div,
.menu-presets .menu-simple-element-image > span
{
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.menu-fonts .menu-simple-element-image
{
	margin-right: 12px;
	border-radius: 32px;
	border: 1px solid var(--md-sys-color-surface-variant);
	text-align: center;
	line-height: 32px;
}

.menu-simple-text-small
{
	height: 32px;
	padding: 0px 24px;
	line-height: 32px;
	transition: background-color 0.2s, opacity 0.2s;
}

.menu-simple-text-grey
{
	color: color-mix(in srgb, var(--md-sys-color-on-surface), transparent 50%);
}

.menu-simple-text
{
	height: 52px;
	padding: 0px 24px;
	line-height: 52px;
	transition: background-color 0.2s, opacity 0.2s;
	position: relative;
}

.menu-simple-text-flex
{
	display: flex;
	justify-content: space-between;
}

.menu-simple-text > i
{
	float: right;
	padding: 14px;
	cursor: pointer;
}

.menu-simple-text > span
{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
	max-width: calc(100% - 80px);
	display: inline-block;
}

.menu-simple-supporting-text
{
	height: initial;
	min-height: 52px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.menu-simple-supporting-text > span
{
	line-height: 44px;
	max-width: calc(100% - 450px);
	text-overflow: initial;
	overflow: initial;
	white-space: initial;
	word-wrap: initial;
	display: initial;
}

.menu-simple-supporting-text-full > span
{
	max-width: initial;
}

.menu-simple-supporting-text > span > span
{
	color: var(--md-sys-color-on-surface-variant);
	color: color-mix(in srgb, var(--md-sys-color-on-surface-variant), transparent 20%);
	margin-top: -12px;
	display: block;
	padding-bottom: 12px;
}

.menu-grey
{
	color: color-mix(in srgb, var(--md-sys-color-on-surface), transparent 50%);
}

.menu-simple-text .switch
{
	margin-top: 16px;
}

.dialog-text .menu-simple-text
{
	padding: 0px;
	font-size: 15px;
	font-weight: normal;
}

.menu-simple-text:after
{
	content: '';
	display: block;
	background-color: var(--md-sys-color-on-surface-variant-4);
	position: absolute;
	top: -2px;
	left: 12px;
	width: calc(100% - 25px);
	height: calc(100% + 4px);
	box-sizing: border-box;
	/*border: 4px solid rgba(180, 180, 180, 1);*/
	border-radius: 14px;
	opacity: 0;
	transition: opacity 0.2s;
	z-index: -1;
}

.menu-simple-text.gamepad-highlight:after
{
	opacity: 1;
	animation: 4s blink normal 1s infinite ease-in-out;
}

.menu-clip-path-shadow
{
	position: fixed;
	background-color: var(--md-sys-color-on-surface-variant-4);
	opacity: 0;
	transition: 0.3s;
	border-radius: 14px;
	display: none;
	z-index: 11;
	pointer-events: none;
}

.menu-clip-path-shadow.a
{
	display: block;
}

/* Menu Gamepad (Full screen menu) */

.menu.menu-gamepad
{

}

.menu-gamepad .menu-close
{
	background-color: color-mix(in srgb, var(--md-sys-color-surface-container), transparent 50%);
}

.menu-gamepad .menu-close.a
{
	animation-name: cascading-in;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
	display: block;
	transition: 0.2s;
}

.menu-gamepad .menu-close.d
{
	animation-name: cascading-out;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
	display: block;
}

.menu-gamepad .menu-simple
{
	top: 50% !important;
	width: 50% !important;
	left: 50% !important;
	max-width: 648px;
	transform: translateY(-50%) translateX(-50%) !important; /*! Keep this line */
	transform: translateY(round(-50%, 1px)) translateX(round(-50%, 1px)) !important;
	padding: 0px;
	border-radius: 24px;
}

.menu-gamepad .menu-simple:before
{
	border-radius: 24px;
	box-shadow: var(--md-sys-elevation-level3) !important;
}

.menu-gamepad .menu-simple-content
{
	padding: 32px 24px 16px 24px;
	box-sizing: border-box;
}

.menu-gamepad .menu-simple-element
{
	height: 52px;
	line-height: 52px;
	border-radius: 12px;
	margin-bottom: 16px;
}

.menu-gamepad .menu-simple-element:before
{
	background-color: var(--md-sys-color-on-surface-variant-1);
}

.menu-gamepad .menu-simple-element:hover:before
{
	background-color: var(--md-sys-color-on-surface-variant-2);
}

.menu-gamepad .menu-simple-element:active:before,
.menu-gamepad .menu-simple-element.gamepad-highlight:before
{
	background-color: var(--md-sys-color-on-surface-variant-4);
}

.menu-gamepad .menu-simple-text
{
	border-radius: 12px;
	margin-bottom: 8px;
	/*background-color: var(--md-sys-color-on-surface-variant-1);*/
}

.menu-gamepad .menu-simple-element i.menu-simple-icon-first
{
	padding: 14px 20px 14px 0px;
}

.menu-gamepad .menu-clip-path-shadow
{
	box-shadow: var(--md-sys-elevation-level3) !important;
}

.menu-gamepad .menu-simple-element-image
{
	height: 28px;
	width: 28px;
	border-radius: 6px;
	margin: 12px 14px 0px 0px;
}

.menu-gamepad .menu-simple-element i.menu-simple-icon-last
{
	padding: 14px 0px 14px 8px;
}

.menu-gamepad .menu-simple-text-small
{
	margin-bottom: 10px;
}

.menu-gamepad .menu-simple-text:after,
.menu-gamepad .simple-slider:after
{
	left: 0px;
	width: 100%;
}

.menu-gamepad .menu-simple-element i
{
	padding: 14px 0px 14px 8px;
}

.menu-gamepad .tabs
{
	margin: 16px 0px 18px 0px !important;
	width: 100%;
}

/* Dialog */

@keyframes dialog-show
{
	from
	{
		opacity: 0;
	}
	to
	{
		opacity: 1;
	}
}

@keyframes dialog-hide
{
	from
	{
		opacity: 1;
	}
	to
	{
		opacity: 0;
	}
}

@keyframes dialog-close-show
{
	from
	{
		opacity: 0;
	}
	to
	{
		opacity: 1;
	}
}

@keyframes dialog-close-hide
{
	from
	{
		opacity: 1;
	}
	to
	{
		opacity: 0;
	}
}

.dialog
{
	border-radius: 28px;
	position: fixed;
	width: 280px;
	left: 50%;
	top: calc(50% + (var(--title-and-tabs-bar-height) / 2));
	max-height: calc(100vh - 32px - var(--title-and-tabs-bar-height));
	max-width: calc(100vw - 32px);
	animation-fill-mode: forwards;
	animation-name: dialog-show;
	animation-duration: 0.4s;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
	/*will-change: transform opacity;*/
	z-index: 120;
	transform: translate(-50%, -50%);
	transform: translateY(round(-50%, 1px)) translateX(round(-50%, 1px)) !important;
	clip-path: inset(-50px -50px -50px -50px round 14px);
	transition: 0.3s clip-path;
}

.dialog .dialog-content
{
	position: relative;
	height: 100%;
	max-height: calc(100vh - 32px - var(--title-and-tabs-bar-height));
	overflow-y: auto;
	overflow-x: hidden;
	animation-name: expand-in-clip-path-center;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
	clip-path: inset(-20px -20px -20px -20px round 14px);
	scrollbar-gutter: stable;
}

.dialog:before
{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--md-sys-color-surface-container-high);
	z-index: -1;
	position: absolute;
	border-radius: 28px;
	top: 0px;
	left: 0px;
	box-shadow: var(--md-sys-elevation-level3);

	animation-name: expand-in;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
	display: block;
}

.dialog.hide
{
	animation-fill-mode: forwards;
	animation-name: dialog-hide;
	animation-duration: 0.15s;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
	pointer-events: none;
}

.dialog.hide .dialog-content
{
	animation-name: expand-out-clip-path-center;
	animation-duration: 0.15s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
}

.dialog.hide:before
{
	animation-name: expand-out;
	animation-duration: 0.15s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
	display: block;
}

.dialog-header
{
	font-size: 20px;
	line-height: 28px;
	padding: 0px 0px;
	color: var(--md-sys-color-on-surface);
	font-weight: 500;
	padding: 24px 12px 16px 24px;
}

.dialog-text
{
	font-size: 16px;
	line-height: 24px;
	padding: 0px 0px;
	color: var(--md-sys-color-on-surface);
	font-weight: 500;
	padding: 0px 12px 0px 24px;
}

.dialog-not-header
{
	padding: 20px 12px 20px 24px;
	min-height: 100%;
	box-sizing: border-box;
}

.dialog-buttons
{
	float: right;
	padding: 24px 12px 24px 24px;
}

.dialog-buttons .simple-button
{
	margin-left: 8px; 
}

.dialog-scroll-header
{
	border-top: 1px solid #e0e0e0;
	margin-top: 4px;
}

.dialog-scroll-bottom
{
	border-top: 1px solid #e0e0e0;
}

.dialog-scroll
{
	overflow: auto;
	box-sizing: border-box;
	padding: 20px 24px 20px 24px;
	max-height: calc(100vh - 98px);
}

.dialog-scroll-buttons
{
	max-height: calc(100vh - 98px);
}

.dialog-close
{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 118;
	background-color: rgba(0, 0, 0, 0.32);
	animation-fill-mode: forwards;
	animation-name: dialog-close-show;
	animation-duration: 0.15s;
	animation-timing-function: var(--md-sys-motion-easing-legacy);
}

.dialog-close.hide
{
	animation-fill-mode: forwards;
	animation-name: dialog-close-hide;
	animation-duration: 0.15s;
	animation-timing-function: var(--md-sys-motion-easing-legacy);
	pointer-events: none;
}

.dialog-clip-path-shadow
{
	position: fixed;
	background-color: var(--md-sys-color-on-surface-variant-4);
	opacity: 0;
	transition: 0.3s;
	border-radius: 14px;
	display: none;
	z-index: 11;
	display: block;
}

/* Snackbar */

@keyframes snackbarShow
{
	from
	{
		opacity: 0;
		clip-path: inset(0px 0px 90% 0px);
	}
	to
	{
		opacity: 1;
		clip-path: inset(0px 0px 0px 0px);
	}
}

@keyframes snackbarShowBackground
{
	from
	{
		opacity: 0;
		transform: scaleY(0.1);
	}
	to
	{
		opacity: 1;
		transform: scaleY(1);
	}
}

@keyframes snackbarHide
{
	from
	{
		opacity: 1;
	}
	to
	{
		opacity: 0;
	}
}

.snackbars .snackbar
{
	min-height: 48px;
	border-radius: 8px;
	position: fixed;
	bottom: 16px;
	left: 16px;
	width: calc(100% - 16px);
	z-index: 130;
	/*
	left: 50%;
	transform: translateX(-50%);
	*/
}

.snackbars .snackbar-foreground
{
	animation-fill-mode: forwards;
	animation-name: snackbarShow;
	animation-duration: 0.3s;
	animation-timing-function: var(--md-sys-motion-easing-standard-decelerate);
	transform-origin: bottom;
	display: flex;
	justify-content: space-between;
}

.snackbars .snackbar-background
{
	background-color: var(--md-sys-color-inverse-surface);
	border-radius: 8px;
	position: absolute;
	z-index: -1;
	bottom: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	animation-fill-mode: forwards;
	animation-name: snackbarShowBackground;
	animation-duration: 0.3s;
	animation-timing-function: var(--md-sys-motion-easing-standard-decelerate);
	transform-origin: bottom;
}

@media (min-width: 600px)
{
	.snackbars .snackbar
	{
		width: 440px !important;
	}
}

.snackbars .snackbar.hide
{
	animation-fill-mode: forwards;
	animation-name: snackbarHide;
	animation-duration: 0.15s;
	animation-timing-function: var(--md-sys-motion-easing-standard-accelerate);
}

.snackbars .snackbar-text
{
	padding: 14px 16px;
	line-height: 20px;
	font-size: 14px;
	color: var(--md-sys-color-inverse-on-surface);
	box-sizing: border-box;
	word-wrap: break-word;
	word-break: break-word;
	flex: 1;
}

.snackbar-buttons
{
}

.snackbars .snackbar .simple-button
{
	position: relative;
	margin: 0px 8px 0px 0px;
	top: 50%;
	transform: translateY(-50%);
}

.snackbars .snackbar .simple-button.transparent > div
{
	color: var(--md-sys-color-inverse-primary);
}

/* Buttons */

.simple-button
{
	box-sizing: border-box;
	float: left;
	transition: opacity 0.2s var(--md-sys-motion-easing-standard-decelerate);
	cursor: pointer;
}

.simple-button.disable
{
	opacity: .4;
	pointer-events: none;
}

.simple-button.big
{
	width: 100%;
}

.simple-button > div
{
	height: 36px;
	width: 100%;
	line-height: 36px;
	border-radius: 36px;
	border: 0px;
	padding: 0px 16px;
	box-sizing: border-box;
	text-align: center;
	transition: 0.2s var(--md-sys-motion-easing-standard-decelerate);
	font-family: var(--md-sys-typescale-label-large-font-family-name);
	font-style: var(--md-sys-typescale-label-large-font-family-style);
	font-weight: var(--md-sys-typescale-label-large-font-weight);
	font-size: var(--md-sys-typescale-label-large-font-size);
	letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
	display: flex;
	position: relative;
	white-space: nowrap;
}

.simple-button > div i
{
	margin: 8px 8px 0px -8px;
}

.simple-button.filled > div,
.simple-button.filled-tonal > div
{
	height: 40px;
	line-height: 40px;
	border-radius: 40px;
	padding: 0px 24px;
	transition: 0.2s var(--md-sys-motion-easing-standard-decelerate);
}

.simple-button.white > div
{
	background-color: #fff;
}

.simple-button.transparent > div
{
	background-color: transparent;
	color: var(--md-sys-color-primary);
	padding: 0px 12px;
} 

.simple-button.outlined > div
{
	background-color: transparent;
	color: var(--md-sys-color-primary);
	border: 1px solid #e0e0e0;
	line-height: 34px;
}

.simple-button.normal > div
{
	border: 1px solid var(--md-sys-color-primary);
	background-color: var(--md-sys-color-primary);
	line-height: 34px;
	color: #fff;
}

.simple-button.filled-tonal > div
{
	box-shadow: var(--md-sys-elevation-level);
	background-color: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
}

.simple-button.filled-tonal > div i
{
	color: var(--md-sys-color-on-secondary-container);
}

.simple-button.filled > div,
.simple-button.gamepad-highlight > div
{
	box-shadow: var(--md-sys-elevation-level);
	background-color: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);
}

.simple-button.filled > div i,
.simple-button.gamepad-highlight > div i
{
	color: var(--md-sys-color-on-primary);
}

.simple-button.filled > div:hover,
.simple-button.filled-tonal > div:hover
{
	box-shadow: var(--md-sys-elevation-level1);
}

.simple-button-variation
{
	opacity: 0.7;
	margin-left: 8px;
}

.simple-button-square.simple-button > div,
.simple-button-square.simple-button.filled > div,
.simple-button-square.simple-button.filled-tonal > div
{
	border-radius: 8px;
}

/* Button Progress */

.button-loading
{
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	left: 2px;
	top: 2px;
	border-radius: 100px;
	background-color: var(--md-sys-color-secondary-container);
}

.snackbars .button-loading
{
	background-color: var(--md-sys-color-inverse-surface);

}

.simple-button.normal .button-loading,
.simple-button.filled .button-loading,
.simple-button.gamepad-highlight .button-loading
{
	background-color: var(--md-sys-color-primary);
}

.simple-button.normal .button-loading .loading > svg > circle,
.simple-button.filled .button-loading .loading > svg > circle,
.simple-button.gamepad-highlight .button-loading .loading > svg > circle
{
	stroke: var(--md-sys-color-on-primary) !important;
}

/* Controls */

/* Switch */
.switch
{
	width: 34px;
	height: 20px;
	box-sizing: border-box;
	position: relative;
	padding: 3px 0px;
	cursor: pointer;
	contain: style layout;
	float: right;
	margin-left: 20px;
}

.switch > div
{
	width: 52px;
	height: 32px;
	margin-top: -9px;
	border-radius: 32px;
	border: 2px solid var(--md-sys-color-outline);
	background-color: var(--md-sys-color-surface-container-highest);
	transition: 0.2s var(--md-sys-motion-easing-legacy);
	margin-left: -19px;
	box-sizing: border-box;
}

.switch.active > div,
.switch.a > div
{
	background-color: var(--md-sys-color-primary);
	border-color: var(--md-sys-color-primary);
}

.switch > svg
{
	position: absolute;
	width: 52px;
	height: 32px;
	top: -6px;
	left: -19px;
}

.switch > svg path
{
	left: -14px;
	top: 2px;
	width: 16px;
	height: 16px;
	fill: var(--md-sys-color-outline);
	d: path('M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z');
	transform: translate(8px, 8px);
}

.switch.active > svg path,
.switch.a > svg path
{
	fill: var(--md-sys-color-on-primary);
	d: path('M 8,-4 C 1.37,-4 -4,1.37 -4,8 -4,14.63 1.37,20 8,20 8,20 8,20 8,20 14.63,20 20,14.63 20,8 20,1.37 14.63,-4 8,-4 8,-4 8,-4 8,-4 Z');
	transform: translate(28px, 8px);
	transition: fill 0.2s;
}

.switch.animeOn > svg path
{
	animation-fill-mode: forwards;
	animation-name: switchOn;
	animation-duration: 0.4s;
	animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
}

.switch.animeOff > svg path
{
	animation-fill-mode: forwards;
	animation-name: switchOff;
	animation-duration: 0.4s;
	animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
}

@keyframes switchOn
{
	0%
	{
		d: path('M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z');
		transform: translate(8px, 8px);
	}
	6%
	{
		d: path('M 2,-3 C -4.08,-3 -9,1.93 -9,8 -9,14.07 -4.08,19 2,19 2,19 14,19 14,19 20.07,19 25,14.07 25,8 25,1.92 20.07,-3 14,-3 14,-3 2,-3 2,-3 Z');
		transform: translate(12px, 8px);
	}
	12%
	{
		d: path('M 2,-3 C -4.08,-3 -9,1.93 -9,8 -9,14.07 -4.08,19 2,19 2,19 14,19 14,19 20.07,19 25,14.07 25,8 25,1.92 20.07,-3 14,-3 14,-3 2,-3 2,-3 Z');
	}
	36%
	{
		d: path('M 8,-4 C 1.37,-4 -4,1.37 -4,8 -4,14.63 1.37,20 8,20 8,20 8,20 8,20 14.63,20 20,14.63 20,8 20,1.37 14.63,-4 8,-4 8,-4 8,-4 8,-4 Z');
		transform: translate(30px, 8px);
	}
	100%
	{
		d: path('M 8,-4 C 1.37,-4 -4,1.37 -4,8 -4,14.63 1.37,20 8,20 8,20 8,20 8,20 14.63,20 20,14.63 20,8 20,1.37 14.63,-4 8,-4 8,-4 8,-4 8,-4 Z');
		transform: translate(28px, 8px);
	}
}

@keyframes switchOff
{
	0%
	{
		d: path('M 8,-4 C 1.37,-4 -4,1.37 -4,8 -4,14.63 1.37,20 8,20 8,20 8,20 8,20 14.63,20 20,14.63 20,8 20,1.37 14.63,-4 8,-4 8,-4 8,-4 8,-4 Z');
		transform: translate(28px, 8px);
	}
	6%
	{
		d: path('M 8,-4 C 1.37,-4 -4,1.37 -4,8 -4,14.63 1.37,20 8,20 8,20 8,20 8,20 14.63,20 20,14.63 20,8 20,1.37 14.63,-4 8,-4 8,-4 8,-4 8,-4 Z');
	}
	12%
	{
		d: path('M 2,-3 C -4.08,-3 -9,1.93 -9,8 -9,14.07 -4.08,19 2,19 2,19 14,19 14,19 20.07,19 25,14.07 25,8 25,1.92 20.07,-3 14,-3 14,-3 2,-3 2,-3 Z');
	}
	36%
	{
		d: path('M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z');
		transform: translate(5px, 8px);
	}
	100%
	{
		d: path('M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z');
		transform: translate(8px, 8px);
	}
}


/* Checkbox */
.checkbox
{
	height: 40px;
	width: 40px;
	box-sizing: border-box;
	position: relative;
	transition: all 0.2s var(--md-sys-motion-easing-legacy);
	float: right;
}

.checkbox.disabled
{
	opacity: 0.4;
	pointer-events: none;
}

.checkbox > div
{
	height: 18px;
	width: 18px;
	box-sizing: border-box;
	border: 2px solid var(--md-sys-color-on-surface-variant);
	border-radius: 2px;
	position: relative;
	z-index: 2;
	transition: all 0.2s var(--md-sys-motion-easing-legacy);
	margin:  11px;
}

.checkbox.active > div
{
	border: 2px solid var(--md-sys-color-primary);
	background-color: var(--md-sys-color-primary);
}

.checkbox:before
{
	content: '';
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 40px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
	opacity: 0;
	transform: scale(0.6);
	background-color: rgba(0, 0, 0, 0.07);
}

.checkbox.activeAnimation:before
{
	animation-fill-mode: forwards;
	animation-name: checkboxTouch;
	animation-duration: 0.4s;
	animation-timing-function: var(--md-sys-motion-easing-legacy);
}

.checkbox svg
{
	width: 14px;
	height: 14px;
	display: block;
}

.checkbox svg path
{
	stroke-width: 3.12px;
	stroke-dashoffset: 29.78334;
	stroke-dasharray: 29.78334;
	transition: all 0.2s var(--md-sys-motion-easing-legacy);
}

.checkbox.active svg path
{
	stroke-dashoffset: 0;
}

@keyframes checkboxTouch
{
	0%
	{
		opacity: 0;
		transform: scale(0.6);
	}
	50%
	{
		opacity: 1;
		transform: scale(1);
	}
	100%
	{
		opacity: 0;
		transform: scale(1);
	}
}




.simple-slider
{
	min-height: 64px;
	padding: 0px 24px 15px 24px;
	transition: background-color 0.2s, opacity 0.2s;
	box-sizing: border-box;
	position: relative;
}

.simple-slider-text
{
	min-height: 32px;
	line-height: 32px;
	transition: background-color 0.2s, opacity 0.2s;
	margin-bottom: 15px;
}

.simple-slider-supporting-text
{
	color: color-mix(in srgb, var(--md-sys-color-on-surface-variant), transparent 20%);
	margin-bottom: 21px;
	margin-top: -21px;
	display: block;
}

.simple-slider-text > div:not(.range-percent)
{
	float: right;
	color: #666;
}

.night-mode .simple-slider-text > div:not(.range-percent)
{
	color: #999;
}

.simple-slider-text > i
{
	margin-right: 8px;
	margin-bottom: -10px;
	margin-top: -10px;
	transform: translate(-4px, 8px);
}

.simple-slider .range
{
	display: block;
	
}

.simple-slider:after
{
	content: '';
	display: block;
	background-color: var(--md-sys-color-on-surface-variant-4);
	position: absolute;
	top: -6px;
	left: 12px;
	width: calc(100% - 25px);
	height: calc(100% + 0px);
	box-sizing: border-box;
	/*border: 4px solid rgba(180, 180, 180, 1);*/
	border-radius: 14px;
	opacity: 0;
	transition: opacity 0.2s;
}

.simple-slider.gamepad-highlight:after
{
	opacity: 1;
	animation: 4s blink normal 1s infinite ease-in-out;
}

.simple-slider .slider-reset
{
	cursor: pointer;
	position: absolute;
	top: -4px;
	right: 62px;
	transition: 0.2s var(--md-sys-motion-easing-standard);
	transform: scale(0);
	padding: 8px;
}

.simple-slider .slider-reset.active
{
	transform: scale(1);
	z-index: 2;
}

.simple-slider .range-percent .slider-reset
{
	position: relative;
	margin-top: -4px;
	padding-top: 0px;
	top: 6px;
	right: 0px;
}

.range
{
	width: 100%;
	box-sizing: border-box;
	height: 30px;
	margin: -14px 0px 0px 0px;
	padding-top: 14px;
}

.range > div
{
	height: 4px;
	width: 100%;
	border-radius: 4px;
	background-color: var(--md-sys-color-surface-container-highest);
	position: relative;
	transition: background-color 0.2s;
}

.range > div > span.range-line
{
	height: 6px;
	border-radius: 6px;
	background-color: var(--md-sys-color-primary);
	transition: background-color 0.2s;
	position: absolute;
	top: -1px;
	left: 0px;
	padding: 0px;
	width: 100%;
	display: block;
	z-index: 1;
}

.range > div > span.range-steps
{
	width: calc(100% - 4px);
	position: absolute;
	margin: 0px 1px;
	height: 4px;
}

.range > div > span.range-steps > div
{
	height: 2px;
	width: 2px;
	position: absolute;
	top: 1px;
	opacity: 0.38;
	border-radius: 2px;
	background-color: var(--md-sys-color-on-surface-variant);
	z-index: 3;
}

.range > div > span.range-steps > div.active
{
	background-color: var(--md-sys-color-on-primary);
}

.range > div > div
{
	height: 4px;
	width: calc(100% - 4px);
	position: absolute;
	z-index: 3;
	top: 0px;
	left: 2px;
}

.range > div > div > div
{
	height: 48px;
	width: 48px;
	padding: 14px;
	box-sizing: border-box;
	top: -22px;
	left: 0%;
	transform: translate(-24px, 0px);
	display: block;
	position: absolute;
}

.range.show-point-on-hover > div > div > div
{
	opacity: 0;
	transition: opacity 0.2s;
}


.range.show-point-on-hover:hover > div > div > div
{
	opacity: 1;
}

.range > div > div > div > div
{
	height: 20px;
	width: 20px;
	border-radius: 20px;
	background-color: var(--md-sys-color-primary);
}









.range input
{
	-webkit-appearance: none !important;
	height: 30px;
	outline: 0px;
	width: calc(100% + 16px);
	cursor: pointer;
	transition: 0.2s;
	margin: -17px 0px;
	background-color: transparent;
	position: relative;
	z-index: 10;
	opacity: 0;
	left: -8px;
	top: -2px;
}

.range input::-webkit-slider-runnable-track
{
	width: 100%;
	height: 2px;
	background: var(--md-sys-color-primary);
	border: none;
}

.range input.d
{
	background: #b0b0b0;
}

.range input::-webkit-slider-thumb
{
	-webkit-appearance: none !important;
	background: var(--md-sys-color-primary);
	height: 20px;
	width: 20px;
	border-radius: 100px;
	outline: 0px;
	transition: 0.2s;
	border: 0px solid #fff;
	margin-top: -10px;
}

.range input.d::-webkit-slider-thumb
{
	-webkit-appearance: none !important;
	border: 2px solid #fff;
	background: #b0b0b0;
}
	

/*
.range input::-webkit-slider-thumb:active
{
	transform: scale(1.3333);
}*/

.range input.d::-webkit-slider-thumb:active
{
	transform: scale(1);
}


.tabs
{
	height: 80px;
	border-radius: 40px;
	background-color: var(--md-sys-color-surface-container);
	display: flex;
	margin: 0px 24px;
	width: calc(100% - 48px);
	transition: background-color 0.2s;
}

.tabs-high,
.menu-gamepad .tabs
{
	background-color: var(--md-sys-color-surface-container-high);
}

.tabs > div
{
	height: 80px;
	display: flex;
	width: 100%;
	position: relative;
	z-index: 1;
}

.tabs > div > div
{
	height: 80px;
	border-radius: 40px;
	position: relative;
	display: flex;
	line-height: 80px;
	justify-content: center;
	text-align: center;
	width: 100%;
	cursor: pointer;
	transition: background-color 0.2s;
}

.tabs > div > div:hover
{
	background-color: var(--md-sys-color-on-surface-variant-2);
}

.tabs > div > div:active,
.tabs > div > div.gamepad-highlight
{
	background-color: var(--md-sys-color-on-surface-variant-4);
}

.tabs > div > div:before
{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scaleX(0.32);
	transition-duration: 0.2s;
	transition-property: transform, opacity, background;
	transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
	border-radius: 100px;
	background: var(--md-sys-color-secondary-container);
	z-index: -1;
}

.tabs > div > div.active
{
	color: var(--md-sys-color-on-secondary-container);
}

.tabs > div > div.active:before
{
	opacity: 1;
	transform: scaleX(1);
}

.tabs > div > div .material-icon
{
	margin-right: 8px;
	margin-top: 28px;
	/*transition: font-variation-settings 0.15s cubic-bezier(0.4, 0, 0.2, 1);*/
}

.tabs > div > div .material-icon.right
{
	margin-right: 0px;
	margin-left: 8px;
	margin-top: 28px;
}

.tabs > div > div.active .material-icon
{
	color: var(--md-sys-color-on-secondary-container);
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Medium tabs */
.medium-tabs,
.menu-gamepad .tabs
{
	height: 60px;
	line-height: 30px;
}

.medium-tabs > div,
.menu-gamepad .tabs > div
{
	height: 60px;
}

.medium-tabs > div > div,
.menu-gamepad .tabs > div > div
{
	height: 60px;
	border-radius: 30px;
	line-height: 60px;
}

.medium-tabs > div > div .material-icon,
.menu-gamepad .tabs > div > div .material-icon
{
	margin-top: 18px;
}

/* Outline tabs */
.menu:not(.menu-gamepad) .outline-tabs,
.content-right .outline-tabs
{
	height: 40px;
	line-height: 38px;
}

.menu:not(.menu-gamepad) .outline-tabs > div,
.content-right .outline-tabs > div
{
	height: 40px;
}

.menu:not(.menu-gamepad) .outline-tabs > div > div,
.content-right .outline-tabs > div > div
{
	height: 38px;
	line-height: 38px;
	border-radius: 0px;
	border: 1px solid var(--md-sys-color-outline);
	border-right: 0px;
}

.menu:not(.menu-gamepad) .outline-tabs > div > div:first-child,
.content-right .outline-tabs > div > div:first-child
{
	border-top-left-radius: 19px;
	border-bottom-left-radius: 19px;
}

.menu:not(.menu-gamepad) .outline-tabs > div > div:last-child,
.content-right .outline-tabs > div > div:last-child
{
	border-top-right-radius: 19px;
	border-bottom-right-radius: 19px;
	border-right: 1px solid var(--md-sys-color-outline);
}

.menu:not(.menu-gamepad) .outline-tabs > div > div:before,
.content-right .outline-tabs > div > div:before
{
	border-radius: 0px;
}

.menu:not(.menu-gamepad) .outline-tabs > div > div:first-child:before,
.content-right .outline-tabs > div > div:first-child:before
{
	border-top-left-radius: 19px;
	border-bottom-left-radius: 19px;
}

.menu:not(.menu-gamepad) .outline-tabs > div > div:last-child:before,
.content-right .outline-tabs > div > div:last-child:before
{
	border-top-right-radius: 19px;
	border-bottom-right-radius: 19px;
}

.menu:not(.menu-gamepad) .outline-tabs > div > div .material-icon,
.content-right .outline-tabs > div > div .material-icon
{
	margin-top: 8px;
}

.tabs-content
{
	position: relative;
}

.tabs-content > div
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	display: none;
}

.tabs-content > div.active,
.tabs-content > div.show
{
	display: block;
}

.tabs-content > div.show-from-left
{
	animation-fill-mode: forwards;
	animation-name: show-from-left;
	animation-duration: 0.2s;
}

.tabs-content > div.show-from-right
{
	animation-fill-mode: forwards;
	animation-name: show-from-right;
	animation-duration: 0.2s;
}

.tabs-content > div.hide-to-left
{
	animation-fill-mode: forwards;
	animation-name: hide-to-left;
	animation-duration: 0.2s;
}

.tabs-content > div.hide-to-right
{
	animation-fill-mode: forwards;
	animation-name: hide-to-right;
	animation-duration: 0.2s;
}

@keyframes show-from-left
{
	0%
	{
		opacity: 0;
		transform: translate(-15px, 0px);
	}
	50%
	{
		opacity: 1;
	}
	100%
	{
		opacity: 1;
		transform: translate(0px, 0px);
	}
}

@keyframes show-from-right
{
	0%
	{
		opacity: 0;
		transform: translate(15px, 0px);
	}
	50%
	{
		opacity: 1;
	}
	100%
	{
		opacity: 1;
		transform: translate(0px, 0px);
	}
}

@keyframes hide-to-left
{
	0%
	{
		opacity: 1;
		transform: translate(0px, 0px);
	}
	50%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 0;
		transform: translate(-15px, 0px);
	}
}

@keyframes hide-to-right
{
	0%
	{
		opacity: 1;
		transform: translate(0px, 0px);
	}
	50%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 0;
		transform: translate(15px, 0px);
	}
}


table
{
	border: 1px solid var(--md-sys-color-surface-variant);
	border-radius: 24px;
	width: 100%;
	overflow: hidden;
	border-spacing: 0px;
	transition: 0.2s border-color;
}

table thead
{
	height: 56px;
	background-color: var(--md-sys-color-surface-container);
	transition: 0.2s background-color;
}

table thead th
{
	border-right: 1px solid var(--md-sys-color-surface-variant);
	color: var(--md-sys-color-on-surface-variant);
	font-weight: 500;
	padding: 0px 24px;
	transition: 0.2s border-color;
	word-break: break-word;
}

table thead th:first-child
{
	text-align: left;
}

table.full thead th:first-child
{
	text-align: center;
}

table thead th:last-child
{
	border-right: 0px;
}

table tbody tr
{
	height: 56px;
	word-break: break-word;
}

table tbody td
{
	border-top: 1px solid var(--md-sys-color-surface-variant);
	border-right: 1px solid var(--md-sys-color-surface-variant);
	text-align: center;
	padding: 12px 24px;
	cursor: pointer;
	position: relative;
	transition: 0.2s border-color;
	word-break: break-word;
}

table tbody tr td:first-child
{
	text-align: left;
	cursor: initial;
}

table.full tbody tr td:first-child
{
	text-align: center;
	cursor: pointer;
}

table.macro tbody tr td:first-child
{
	cursor: pointer;
}

table.none tbody tr td
{
	cursor: initial;
}

table.withoutThead tbody tr:first-child td
{
	border-top: 0px;
}

table tbody td:last-child
{
	border-right: 0px;
}

table tbody td.active
{
	background-color: var(--md-sys-color-secondary-container);
}

table tbody td:before
{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	transition: 0.2s background-color;
	z-index: 1;
}

table:not(.none) tbody td:not(:first-child):hover:before,
table:not(.none).full tbody td:hover:before,
table:not(.none).macro tbody td:hover:before
{
	background-color: var(--md-sys-color-on-surface-variant-2);
}


table:not(.none) tbody td:not(:first-child):active:before,
table:not(.none) tbody td:not(:first-child).gamepad-highlight:before,
table:not(.none).full tbody td:active:before,
table:not(.none).full tbody td.gamepad-highlight:before,
table:not(.none).macro tbody td:active:before,
table:not(.none).macro tbody td.gamepad-highlight:before
{
	background-color: var(--md-sys-color-on-surface-variant-4);
}

table tbody td.lh0
{
	line-height: 0px;
}



/* Input Select */
.select
{
	height: 72px;
	box-sizing: border-box;
	width: 100%;
	padding: 0px 24px;
	transition: 0.15s var(--md-sys-motion-easing-legacy);
	margin-bottom: 8px;
	margin-top: 12px;
}

.select.disable
{
	opacity: 0.4;
	pointer-events: none;
}

.select > div
{
	height: 56px;
	box-sizing: border-box;
	border-radius: 4px;
	width: 100%;
	position: relative;
	transition: 0.2s var(--md-sys-motion-easing-legacy);
	background-color: var(--md-sys-color-surface-container-highest);
	border-radius: 4px 4px 0px 0px;
	color: var(--md-sys-color-on-surface-variant);
	cursor: pointer;
}

.select > div:before
{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px 4px 0px 0px;
	z-index: 0;
	transition: 0.2s background-color;
	background-color: transparent;
}

.select > div:hover:before
{
	background-color: var(--md-sys-color-on-surface-variant-2);
}

.select > div:active:before,
.select.gamepad-highlight > div:before
{
	background-color: var(--md-sys-color-on-surface-variant-4);
}

.select .select-border
{
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	position: absolute;
	z-index: 1;
}

.select .select-border .bottom
{
	height: 2px;
	width: 100%;
	position: absolute;
	left: 0px;
	background-color: #868686;
	bottom: 0px;
	transition: 0.2s var(--md-sys-motion-easing-legacy);
	transform: scaleY(0.5);
	transform-origin: bottom;
}

.select .select-border .bottom > div
{
	height: 2px;
	width: 100%;
	transition: 0.2s var(--md-sys-motion-easing-legacy);
	background-color: var(--md-sys-color-primary);
	opacity: 0;
}

.select i
{
	position: absolute;
	height: 24px;
	width: 24px;
	right: 8px;
	top: 16px;
	text-align: center;
	line-height: 24px;
	transition: 0.2s var(--md-sys-motion-easing-legacy);
}

.select .text
{
	font-size: 16px;
	letter-spacing: 0.15px;
	line-height: 0px;
	height: 40px;
	position: absolute;
	top: 18px;
	left: 0px;
	width: 100%;
	box-sizing: border-box;
	padding: 20px 40px 20px 14px;
	z-index: 1;
	transition: 0.2s var(--md-sys-motion-easing-legacy);
	color: var(--md-sys-color-on-surface-variant);
	z-index: 3;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
}

.select.not-placeholder .text
{
	top: 9px;
}

.select .placeholder
{
	font-size: 16px;
	letter-spacing: 0.15px;
	line-height: 24px;
	height: 24px;
	position: absolute;
	top: 17px;
	left: 0px;
	width: 100%;
	box-sizing: border-box;
	padding: 0px 14px;
	z-index: 1;
	transition: 0.2s var(--md-sys-motion-easing-legacy);
	z-index: 3;
}

.select.active .placeholder, .select.have-select .placeholder, .select.have-select-wa .placeholder
{
	font-size: 12px;
	transform: translate(0px, -13px);
}

.select.have-select-wa .placeholder
{
	transition: 0s;
}

.select.active .placeholder
{
	color: var(--md-sys-color-primary);
}

.select.active .select-border .bottom
{
	transform: scaleY(1);
}

.select.active .select-border .bottom > div
{
	opacity: 1;
}

.select.active i
{
	transform: rotate(180deg);
	color: var(--md-sys-color-primary);
}

/* Chip */

.chip
{
	border-radius: 8px;
	border: 1px solid var(--md-sys-color-outline);
	padding: 5px 12px;
	margin: 0px 8px 8px 0px;
	background-color: var(--md-sys-color-surface-container-low);
	color: var(--md-sys-color-on-surface);
	display: inline-block;
	transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}

.chip > div
{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px 4px 0px 0px;
	z-index: 1;
	transition: 0.2s background-color;
	background-color: transparent;
}

.chip > div:hover
{
	background-color: var(--md-sys-color-on-surface-variant-2);
}

.chip > div:active,
.chip.gamepad-highlight > div
{
	background-color: var(--md-sys-color-on-surface-variant-4);
}

.chip.active
{
	background-color: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);
	border-color: var(--md-sys-color-primary);
}

.chip.active i
{
	color: var(--md-sys-color-on-primary);
}

.chip-icon-left
{
	padding-left: 0px;
}

.chip-icon-right
{
	padding-right: 0px;
}

.chip i
{
	float: left;
	margin: -2px 5px;
	height: 24px;
	width: 24px;
	border-radius: 24px;
	line-height: 24px;
	text-align: center;
	transition: 0.2s background-color, 0.2s color;
	position: relative;
	z-index: 2;
}

.chip i.right
{
	float: right;
	cursor: pointer;
}

.chip i.right:hover,
.chip i.gamepad-highlight
{
	background-color: var(--md-sys-color-on-surface-variant-2);
}

.chip > span
{
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
	display: inline-block;
	margin-bottom: -5px;
}

.chip-icon-left > span,
.chip-icon-right > span
{
	max-width: calc(100% - 42px);
}

.chip-icon-left.chip-icon-right > span
{
	max-width: calc(100% - 84px);
}

.reading-chips .chip
{
	float: left;
}

.chip-big
{
	padding: 9px 12px 9px 12px;
}

.chip-big.chip-icon-left
{
	padding-left: 0px;
}

.chip-big.chip-icon-right
{
	padding-right: 0px;
}

.chip-big .chip-icon-left
{
	padding-left: 2px;
}

.chip-big.chip i
{
	margin: -2px 8px;
}

/* Search Bar */

.search-bar > span
{
	position: fixed;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	z-index: 3;
	display: none;
}

.search-bar.active > span
{
	display: block;
}

.search-bar > div
{
	position: fixed;
	min-height: 56px;
	border-radius: 28px;
	width: 600px;
	max-width: calc(100% - var(--const-side-bar-width) - 32px);
	right: calc(50% - (var(--const-side-bar-width) + 208px));
	top: calc(64px + var(--title-and-tabs-bar-height));
	z-index: 4;
	background-color: var(--md-sys-color-surface-container-high);
	color: var(--md-sys-color-on-surface);
	pointer-events: none;
	transform: translate(0px, -10px);
	transition: 0.3s var(--md-sys-motion-easing-emphasized-decelerate);
	opacity: 0;
	overflow: hidden;
}

.search-bar.active > div
{
	pointer-events: initial;
	transform: translate(0px, 0px);
	opacity: 1;
}


.search-bar.active > div
{
	animation-name: cascading-in;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
}

.search-bar.disable > div
{
	animation-name: cascading-out;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
	animation-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
}

.search-bar-input
{
	height: 56px;
}

.search-bar-input > *
{
	float: left;
}

.search-bar-input i
{
	padding: 16px;
}

.search-bar-input i:last-child
{
	float: right;
	cursor: pointer;
}

.search-bar-input input
{
	width: calc(100% - 112px);
	border: 0px;
	box-sizing: border-box;
	outline: none;
	background-color: transparent;
	color: var(--md-sys-color-on-surface);
	padding: 0px;
	margin: 16px 0px;
}

.search-bar-results
{
	transition: height 0.3s var(--md-sys-motion-easing-emphasized-decelerate);
	height: 0px;
	overflow: auto;
	border-top: 1px solid var(--md-sys-color-outline);
	transform: translate(0px, 1px);
}

.search-bar-results.active
{
	transform: translate(0px);
}

.search-bar-result
{
	height: 56px;
	display: flex;
	cursor: pointer;
	transition: 0.2s background-color;
}

.search-bar-result:hover
{
	background-color: var(--md-sys-color-on-surface-variant-2);
}

.search-bar-result:active,
.search-bar-result.gamepad-highlight
{
	background-color: var(--md-sys-color-on-surface-variant-4);
}

.search-bar-result > div
{
	height: 56px;
	width: 56px;
}

.search-bar-result > div i
{
	padding: 16px;
}

.search-bar-result .search-bar-image
{
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.1);
	margin: 12px;
}

.search-bar-result .search-bar-image > img
{
	width: 32px;
	height: 32px;
	border-radius: 10px;
	transition: 0.3s;
	object-fit: cover;
	object-position: center;
	opacity: 0;
}

.search-bar-result .search-bar-image > img.show
{
	transition: 0s;
	opacity: 1;
}

.search-bar-result .search-bar-image > img.a
{
	opacity: 1;
}

.search-bar-result > span
{
	display: block;
	line-height: 56px;
	width: calc(100% - 56px);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
}

/* Input and Textarea */

.placeholder-width
{
	position: fixed;
	z-index: -10;
	font-size: 12px !important;
}

.input
{
	height: 72px;
	box-sizing: border-box;
	width: 100%;
	padding: 0px;
	transition: all 0.2s var(--md-sys-motion-easing-legacy);
	margin-bottom: 8px;
}

.input.error
{
	background-color: transparent;
}

.input.helper
{
	margin-bottom: 20px;
}

.input-margin-top
{
	margin-top: 16px;
}

.input-margin-top-min
{
	margin-top: 4px;
}

.input-compact
{
	height: 56px;
	margin-bottom: 0px;
}

.input input, .input textarea
{
	border: 0px;
	background-color: transparent;
	padding: 0px;
	height: 52px;
	width: 100%;
	position: absolute;
	top: 2px;
	width: calc(100% - 4px);
	left: 2px;
	box-sizing: border-box;
	padding: 0px 14px;
	z-index: 4;
	font-size: 16px;
	letter-spacing: 0.15px;
	border-radius: 2px;
	resize: none;

	color: var(--md-sys-color-on-surface);

	font-family: var(--md-sys-typescale-body-large-font-family-name);
	font-style: var(--md-sys-typescale-body-large-font-family-style);
	font-weight: var(--md-sys-typescale-body-large-font-weight);
	font-size: var(--md-sys-typescale-body-large-font-size);
	letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
	text-transform: var(--md-sys-typescale-body-large-text-transform);
	text-decoration: var(--md-sys-typescale-body-large-text-decoration);
}

.input textarea
{
	height: 48px;
	line-height: 24px;
	padding: 10px 14px 14px 14px;
	margin-top: 4px;
}

.input .inputBorder
{
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	position: absolute;
	z-index: 1;
}

.input .inputBorder .left, .input .inputBorder .right
{
	height: 100%;
	width: 10px;
	position: absolute;
	overflow: hidden;
	top: 0px;
}

.input .inputBorder .bottom
{
	height: 0px;
	width: calc(100% - 18px);
	position: absolute;
	left: 9px;
	border-top: 3px solid var(--md-sys-color-outline);
	transform-origin: bottom;
	transform: scaleY(0.3333333);
	bottom: 0px;
	overflow: hidden;
	transition: all 0.2s var(--md-sys-motion-easing-legacy);
}

.input:hover .inputBorder .bottom
{
	border-top: 3px solid var(--md-sys-color-on-surface);
}

.input .inputBorder .left
{
	left: 0px;
}

.input .inputBorder .right
{
	right: 0px;
}

.input .inputBorder .left:after, .input .inputBorder .right:after
{
	content: '';
	display: block;
	height: 100%;
	width: 20px;
	border-radius: 4px;
	border: 0px solid #868686;
	box-sizing: border-box;
	position: absolute;
	transition: all 0.2s var(--md-sys-motion-easing-legacy);
	box-shadow: inset 0px 0px 0px 1px var(--md-sys-color-outline);
}

.input:hover .inputBorder .left:after, .input:hover .inputBorder .right:after
{
	box-shadow: inset 0px 0px 0px 1px var(--md-sys-color-on-surface);
}

.input .inputBorder .top
{
	height: 3px;
	width: calc(100% - 18px);
	position: absolute;
	left: 9px;
	top: 0px;
	overflow: hidden;
	display: flex;
}

.input .inputBorder .top div, .input .inputBorder .top span
{
	display: block;
	border-top: 3px solid var(--md-sys-color-outline);
	transform: scaleY(0.3333333);
	float: left;
	transition: transform 0.2s var(--md-sys-motion-easing-legacy), border 0.2s var(--md-sys-motion-easing-legacy);
	width: 50%;
	transform-origin: top;
}

.input:hover .inputBorder .top div, .input:hover .inputBorder .top span
{
	border-top: 3px solid var(--md-sys-color-on-surface);
}

.input .inputBorder .right:after
{
	margin-left: -10px;
}

.input > div
{
	height: 56px;
	box-sizing: border-box;
	border-radius: 4px;
	width: 100%;
	position: relative;
	transition: all 0.2s var(--md-sys-motion-easing-legacy);
	z-index: 1;
}

.input.mini > div
{
	height: 40px;
}

.input.mini.active > div, .input.mini.haveText > div
{
	height: 56px;
}

.input .placeholder
{
	line-height: 0px;
	height: 24px;
	position: absolute;
	top: 16px;
	left: 0px;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	z-index: 1;
	transition: all 0.25s var(--md-sys-motion-easing-legacy);
	z-index: 3;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
	color: var(--md-sys-color-on-surface-variant);

	font-family: var(--md-sys-typescale-body-large-font-family-name);
	font-style: var(--md-sys-typescale-body-large-font-family-style);
	font-weight: var(--md-sys-typescale-body-large-font-weight);
	font-size: var(--md-sys-typescale-body-large-font-size);
	letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
	text-transform: var(--md-sys-typescale-body-large-text-transform);
	text-decoration: var(--md-sys-typescale-body-large-text-decoration);
}

.input.mini .placeholder
{
	transform: translate(0px, -8px);
	font-size: 14px;
	letter-spacing: 0.4px;
}

.input .helper
{
	font-size: 12px;
	margin-left: 16px;
	transition: all 0.2s var(--md-sys-motion-easing-legacy);
	opacity: 0;
	height: 16px;
	display: block;
	line-height: 24px;
	width: calc(100% - 16px);
}

.input .helper.active
{
	opacity: 1;
}

.input.white
{
	color: #2d2d2d;
}

.input.white .inputBorder *, .input.white .inputBorder *:after
{
	border-color: #ffffff !important;
}

.input.white .helper, .input.white .placeholder
{
	color: #aaa;
}

.input.white input
{
	color: #fff;
}

.input.mini .inputBorder *, .input.mini .inputBorder *:after
{
	border-width: 1px !important;
}

.input.mini.active .inputBorder *, .input.mini.active .inputBorder *:after/*, .input.mini.haveText .inputBorder *, .input.mini.haveText .inputBorder *:after*/
{
	border-width: 2px !important;
}

.input.active .inputBorder *
{
	border-color: var(--md-sys-color-primary) !important;
}

.input.active .inputBorder *:after
{
	box-shadow: inset 0px 0px 0px 3px var(--md-sys-color-primary);
}

.input.active:hover .inputBorder *:after
{
	box-shadow: inset 0px 0px 0px 3px var(--md-sys-color-primary);
}

.input.active .inputBorder .bottom
{
	transform: scaleY(1);
}

.input:hover .placeholder
{
	color: var(--md-sys-color-on-surface)
}

.input.active .placeholder
{
	color: var(--md-sys-color-primary);
}

.input.active .placeholder, .input.haveText .placeholder
{
	font-size: 12px;
	transform: translate(0px, -28px);
}

.input.error .inputBorder *
{
	border-color: var(--md-sys-color-error) !important;
}

.input.error .inputBorder *:after
{
	box-shadow: inset 0px 0px 0px 1px var(--md-sys-color-error);
}

.input.error.active .inputBorder *:after
{
	box-shadow: inset 0px 0px 0px 3px var(--md-sys-color-error);
}

.input.error .helper, .input.error .placeholder
{
	color: var(--md-sys-color-error);
}

input, textarea
{
	outline: none;
}



.path-selector
{
	height: 40px;
	display: flex;
	margin-bottom: 20px;
	margin-bottom: 14px;
}

.path-selector > span
{
	border-radius: 8px;
	border: 1px solid var(--md-sys-color-outline);
	padding: 9px 12px;
	margin: 0px 8px 0px 0px;
	margin: 0px 16px 0px 0px;
	background-color: var(--md-sys-color-surface-container-low);
	color: var(--md-sys-color-on-surface);
	display: inline-block;
	transition: 0.2s;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	width: 100%;
}



code
{
	padding: 2px 6px;
	margin: 0;
	font-size: 85%;
	white-space: break-spaces;
	border-radius: 6px;
	background-color: var(--md-sys-color-surface-container);
	color: var(--md-sys-color-on-surface);
	transition: background-color 0.2s;
}

a > code
{
	text-decoration: underline;
	color: var(--md-sys-color-primary);
}

.can-be-select
{
	user-select: text;
	cursor: text;
}

/* Compact Actions */
.compact-actions
{
	display: flex;
	padding: 0px 24px;
	margin: 16px 0px -10px 0px;
	position: relative;
}

.compact-actions.no-padding
{
	padding: 0px 0px;
}

.compact-actions.last
{
	margin: 16px 0px 2px 0px;
}

.compact-actions-name
{
	align-items: center;
	flex: 1;
	height: 64px;
	line-height: 64px;
	padding-right: 12px;

	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
}

.compact-actions-button
{
	display: flex;
	align-items: center;
	height: 64px;
}

.compact-actions-buttons
{
	width: 24px;
	cursor: pointer;
	margin-top: -7px;
	margin-bottom: -3px;
}

.compact-actions-buttons-horizontal
{
	display: flex;
	align-content: center;
	width: auto;
	align-items: center;
}

.compact-actions-buttons-horizontal > i
{
	margin-left: 8px;
}

.marquee-selection
{
	position: absolute;
	border: 1px dashed var(--md-sys-color-primary);
	background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent 80%);
	pointer-events: none;
	border-radius: 8px;
	z-index: 1000;
}