@font-face {
	font-family: 'Inter';
	src: url('fonts/inter/regular.ttf');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/inter/medium.ttf');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/inter/bold.ttf');
	font-weight: 900;
	font-style: normal;
}

:root {
	interpolate-size: allow-keywords;
	
	--href-color: #93d7ff;
	--href-shadow-color: color-mix(in srgb, var(--href-color) 38%, transparent);
}

* {
	font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0px;
}

h1 {
	font-size: 35px;
	overflow-wrap: anywhere;
}

h2 {
	overflow-wrap: anywhere;
}

p {
	font-size: 25px;
	color: #c0c0c0;
	overflow-wrap: anywhere;
}

p.error {
	color: #ffbbbb;
	text-shadow: 0px 0px 20px #ffbbbb60;
}

h3 {
	font-size: 25px;
	font-weight: normal;
	
	color: #c0c0c0;
	overflow-wrap: anywhere;
}

body {
	display: flex;
	flex-wrap: wrap;
	
	margin: 0px;
	
	width: 100vw;
	height: 100vh;
	background: #131313;
	
	overflow-x: hidden;
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

nav {
	padding: 20px;

	max-height: 100vh;
	min-height: 100vh;

	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-direction: column;
	
	background-color: #00000025;
	border-right: solid 1px #FFFFFF20;
	
	z-index: 5;
	
	min-width: 340px;
	max-width: 340px;
	
	position: fixed;
	
	transition: 0.2s;
	
	overflow-y: scroll;
	gap: 10px;
	
	box-sizing: border-box;
}

.navbar-buttons {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;

	width: 100%;
	
	gap: 10px;
}

nav button {
	display: flex;
	justify-content: flex-start;
	align-items: baseline;

	width: 100%;
	height: fit-content;
	padding: 15px 23px;
	
	font-size: 25px;
	font-weight: 900;
	color: white;
	
	border-radius: 15px;

	gap: 10px;
	
	transition: 0.2s;
}

nav button.current {
	background-color: #86868614;
}

nav button:has(img) {
	gap: 7.5px;
	
	align-items: center;
}

nav button:hover {
	background-color: #86868624;
}

nav button:not(.current):active {
	scale: 97%;
}

nav button i {
	display: flex !important;
	align-items: center;
	justify-content: center;
	
	min-width: 25px;
	max-width: 25px;
	min-height: 25px;
	max-height: 25px;
	
	pointer-events: none;
}

nav button img {
	display: flex !important;
	align-items: center;
	justify-content: center;
	
	min-width: 30px;
	max-width: 30px;
	
	pointer-events: none;
	
	margin-left: -2.5px;
}

nav button text {
	text-align: left;
	
	overflow: hidden;
	white-space: nowrap;
	
	transition: 0.2s;
	
	width: 100%;

	pointer-events: none;
	
	text-overflow: ellipsis;
}

nav button .navbar-hide {
	transition: 0.2s;

	pointer-events: none;
}

body.hide nav {
	min-width: 111px;
	max-width: 111px;
}

body.hide nav button {
	gap: 0px;
}

body.hide nav button:active {
	scale: 92%;
}

body.hide nav button text,
body.hide nav button .navbar-hide {
	opacity: 0;
	visibility: hidden;
	
	width: 0px;
}

.dashboard-page {
	width: 100%;
	
	min-height: 100vh;
	box-sizing: border-box;
	
	margin-left: 340px;
	
	display: flex;
	
	align-items: center;
	justify-content: center;
	padding: 50px 45px 50px 50px;
	
	transition: 0.2s;
	
	position: relative;
	
	overflow-y: scroll;
	overflow-x: hidden;
}

.dashboard-page:has(.wideBox) {
	align-items: flex-start;
	padding: 190px 45px 50px 50px;
}

.dashboard-page.hide {
	opacity: 0;
	visibility: hidden;
}

.dashboard-page.skeleton {
	position: fixed;
	box-sizing: border-box;
	
	width: calc(100vw - 340px);
	height: 100vh;
	
	padding: 50px;
	
	overflow: hidden;
	
	top: 0px;
	left: 0px;
	
	pointer-events: none;
	
	z-index: 5;
}

body:has(.dashboard-page.skeleton:not(.hide)),
body:has(.dashboard-loader:not(.hide)) {
	max-height: 0px !important;
	overflow-y: hidden;
}

body:has(.dashboard-page.skeleton:not(.hide)) footer,
body:has(.dashboard-loader:not(.hide)) footer {
	display: none;
}

.dashboard-page.skeleton:has(.wideBox) {
	align-items: flex-start;
	padding: 190px 50px 50px 50px;
}

.dashboard-page.skeleton .head {
	gap: 10px;
}

.dashboard-page.skeleton .head span {
	height: 22px;
	width: 250px;
	
	background: linear-gradient(90deg, #86868614 0%, #86868624 50%, #86868614 100%);
	border: 1px solid #86868624;
	background-size: 50%;
	
	padding: 10px 15px;
	border-radius: 50px;
}

.dashboard-page.skeleton .head span.description {
	height: 12px;
	width: 150px;
}

.dashboard-page.skeleton .box {
	min-width: 35%;
	min-height: 40%;
	
	background: linear-gradient(90deg, #86868614 0%, #86868624 50%, #86868614 100%);
	background-size: 50%;
}

.dashboard-page.skeleton .contentDiv {
	min-height: 235px;
	
	background: linear-gradient(90deg, #86868614 0%, #86868624 50%, #86868614 100%);
	background-size: 50%;
}

.dashboard-page.skeleton .commentsDiv .contentDiv {
	min-height: 140px;
	
	background: linear-gradient(90deg, #86868614 0%, #86868624 50%, #86868614 100%);
	background-size: 50%;
}

.dashboard-page.skeleton .levelStats .levelStat {
	min-height: 65px;
	
	background-color: transparent !important;
	background: linear-gradient(90deg, #86868614 0%, #86868624 50%, #86868614 100%);
	background-size: 50%;
}

.skeletonAnimation {
	animation: skeleton-animation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes skeleton-animation {
	0% {
		background-position: 0%;
	}
	100% {
		background-position: 100%;
	}
}

body.hide .dashboard-page {
	margin-left: 111px;
}

body.hide .dashboard-page.skeleton {
	width: calc(100vw - 111px);
}

footer {
	display: flex;
	flex-direction: column;
	gap: 20px;
	
	width: 100%;
	
	padding: 20px;
	box-sizing: border-box;
	
	background-color: #00000025;
	border-top: solid 1px #FFFFFF20;
	
	margin-left: 340px;
	
	transition: 0.2s;
}

body.hide footer {
	margin-left: 111px;
}

footer h2 {
	font-size: 26px;
}

footer h4 {
	display: flex;
	align-items: center;
	gap: 5px;
	
	color: #c0c0c0;
	font-weight: 400;
	
	font-size: 21.5px;
}

footer h4 img {
	border-radius: 5px;
	
	max-width: 27px;
	max-height: 27px;
}

footer h4 span {
	display: flex;
	gap: 5px;
}

.boxSized,
.box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	position: relative;
	
	padding: 25px;
	border-radius: 20px;
	
	gap: 15px;
	
	width: max-content;
	
	min-width: 35%;
	max-width: 90%;
}

.box {
	background-color: #86868614;
	border: 1px solid #86868624;
}

.wideBox {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	gap: 15px;
	
	width: 100%;
	min-height: 100%;
	
	box-sizing: border-box;
	justify-content: flex-start;
}

.wideBox.short,
.boxSized.short {
	gap: 10px;
}

.button {
	display: flex;
	align-items: center;
	justify-content: center;
	
	background-color: #86868624;
	border: 1px solid #86868634;
	
	padding: 10px 15px;
	border-radius: 10px;
	font-size: 21px;
	
	gap: 7px;
	
	font-weight: 700;
	
	width: 100%;
	
	transition: 0.2s;
}

.button.short {
	width: max-content;
	height: max-content;
}

.levelStats.short {
	min-width: max-content !important;
	height: max-content;
}

.button:hover {
	background-color: #86868634;
	box-shadow: 0px 0px 20px 0px #86868620;
}

.button.error {
	border: 1px solid #92525280;
	background: #a341415c;
}

.button.error:hover {
	background-color: #a3414170;
	box-shadow: 0px 0px 20px 0px #92525240;
}

.button:not(:disabled):active {
	scale: 97%;
}

.button:not(:disabled):active::after {
	scale: 103%;
}

.dashboard-loader {
	display: flex;
	flex-direction: column;
	
	gap: 30px;
	
	width: 100vw;
	height: 100vh;
	
	position: fixed;
	
	z-index: 10;
	
	align-items: center;
	justify-content: center;
	
	background: #131313;
	
	transition: 0.1s;
}

.dashboard-loader i {
	font-size: 100px;
}

.dashboard-loader.hide {
	opacity: 0;
	
	pointer-events: none;
}

form {
	display: contents;
	
	margin: 0px;
	width: 100%;
}

.inputStyle {
	padding: 10px;
	
	background-color: #86868624;
	color: #c0c0c0;
	
	border: 1px solid #86868634;
	border-radius: 10px;
	
	font-size: 20px;
	
	outline: none;
	
	transition: 0.2s;
}

.inputColor {
	appearance: none;
	border-radius: 10px;
	
	font-size: 20px;
	
	outline: none;
	background: none;
	border: 1px solid var(--href-shadow-color);
	box-shadow: 0px 0px 20px var(--href-shadow-color);
	
	transition: 0.2s;
	
	padding: 0px;
	
	width: 100%;
	height: 45px;
}

.inputColor::-webkit-color-swatch-wrapper {
	padding: 0px;
}

.inputColor::-webkit-color-swatch {
	border: none;
}

.bordered {
	background: #86868614 !important;
	border: 1px solid #86868624 !important;
}

.inputDiv {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.inputDiv.hide,
.settingDescription.hide,
.languageDiv.hide {
	display: none;
}

.inputDiv h2 {
	font-size: 25px;
	margin: 0px;
	display: flex;
	align-items: baseline;
	gap: 5px;
}

form.empty-fields .inputStyle:not([dashboard-not-required]):placeholder-shown,
form.empty-fields label.inputStyle:has(input:not([dashboard-not-required]):invalid),
form.empty-fields .select:has(input:not([dashboard-not-required]):placeholder-shown),
.inputStyle.regex-fail {
	border: 2px solid #c93636 !important;
}

.toastify {
	position: absolute;
	width: max-content;
	height: max-content;
	
	left: 50%;
	
	font-size: 20px;
	
	border-radius: 500px !important;
	
	box-shadow: none !important;
	background: #86868624 !important;
	border: 1px solid #86868634;
	
	transition: 0.2s !important;
	
	backdrop-filter: blur(5px);
	
	display: flex !important;
	align-items: baseline;
	gap: 5px;
	
	cursor: default !important;
}

.toastify.success {
	border: 1px solid #529252c2;
	background: #3fa1255c !important;
	box-shadow: 0px 4px 20px 0px #35ff0030 !important;
}

.toastify.error {
	border: 1px solid #925252c2;
	background: #a125255c !important;
	box-shadow: 0px 4px 20px 0px #ff4d4d33 !important;
}

.dropdown-items {
	display: flex;
	flex-direction: column;
	
	gap: 5px;
	margin-left: 10px;
	
	width: calc(100% - 20px);
	max-height: 0px;
	
	transition: 0.2s;
	
	overflow: hidden;
}

.dropdown.show .dropdown-items {
	max-height: var(--dropdown-height);
}

.navbar-buttons.up .dropdown.show .dropdown-items {
	padding-bottom: 5px;
}

.navbar-buttons.down .dropdown.show .dropdown-items {
	padding-top: 5px;
}

.dropdown {
	display: flex;
	flex-direction: column;
	
	width: 100%;
	height: 100%;
}

.navbar-buttons.up .dropdown {
	flex-direction: column-reverse;
}

.navbar-buttons.up .dropdown.show i[dashboard-dropdown-caret] {
	transform: rotate(-90deg);
}

.navbar-buttons.down .dropdown.show i[dashboard-dropdown-caret] {
	transform: rotate(90deg);
}

nav .dropdown-items button {
	font-size: 23px;
	font-weight: 400;
	
	gap: 10px;
	
	padding: 10px 13px;
}

::-webkit-scrollbar {
	width: 5px;
	height: 0px;
	border-radius: 500px;
}

nav::-webkit-scrollbar,
.emojisDiv::-webkit-scrollbar,
.select.multiple::-webkit-scrollbar,
.options::-webkit-scrollbar {
	width: 0px;
	height: 0px;
}

::-webkit-scrollbar-track {
	background-color: transparent;
	border-radius: 100px;
}

::-webkit-scrollbar-thumb {
	background-color: #86868614;
	border-radius: 100px;
}

.circle {
	opacity: 0.7;
	border-radius: 1000px;
	width: 600px;
	height: 600px;
	animation: circle-animation 40s ease-in-out var(--position-delay) infinite alternate;
	grid-area: 1 / 1;
}

.circle:nth-child(1) {
	background-color: color-mix(in srgb, var(--href-color) 95%, #FF0000 5%);
}

.circle:nth-child(2) {
	background-color: color-mix(in srgb, var(--href-color) 95%, #00FF00 5%);
}

.circle:nth-child(3) {
	background-color: color-mix(in srgb, var(--href-color) 95%, #0000FF 5%);
}

.circle:nth-child(4) {
	background-color: color-mix(in srgb, var(--href-color) 80%, #FF0000 20%);
}

.circle:nth-child(5) {
	background-color: color-mix(in srgb, var(--href-color) 80%, #00FF00 20%);
}

.circle:nth-child(6) {
	background-color: color-mix(in srgb, var(--href-color) 80%, #0000FF 20%);
}

.circles {
	opacity: 0.07;
	
	display: grid;
	position: fixed;
	
	place-items: center;
	
	z-index: -1;
	
	top: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	
	pointer-events: none;
	
	filter: blur(100px);
}

@keyframes circle-animation {
	0% {
		transform: translate(-450px) scale(.85);
	}
	25% {
		transform: translateY(550px) scale(1.1);
	}
	50% {
		transform: translate(250px) scale(1.2);
	}
	75% {
		transform: translateY(-350px) scale(0.9);
	}
	100% {
		transform: translate(-450px) scale(.85);
	}
}

.head {
	display: flex;
	flex-direction: column;
	
	width: 100%;
	position: absolute;
	top: 0px;
	
	gap: 5px;
	
	padding: 50px;
	box-sizing: border-box;
}

.title {
	font-size: 40px;
	font-weight: 600;
}

.description {
	font-size: 30px;
	font-weight: 400;
	
	color: #FFFFFF;
	opacity: 80%;
}

.contentDiv {
	display: flex;
	flex-direction: column;
	
	background-color: #86868614;
	border: 1px solid #86868624;
	
	width: 100%;
	
	padding: 15px;
	border-radius: 15px;
	
	box-sizing: border-box;
	
	gap: 10px;
	
	transition: 0.2s;
}

.contentDiv:hover,
.levelPage .levelStats:not(.card) .levelStat:hover {
	background-color: #86868624;
	border: 1px solid #86868634;
	box-shadow: 0px 0px 20px 0px #86868620;
}

.levelTitle {
	display: flex;
	align-items: center;

	gap: 7px;
}

.levelTitle h2 {
	font-size: 28px;
	font-weight: 400;
	
	transition: 0.2s;
}

.levelTitle[href] h2:active {
	scale: 97%;
}

.levelTitle[href] h2:active:has(.username:active span[href]) {
	scale: 100%;
}

.levelTitle h2 text,
.username span,
span.username {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	
	gap: 3px;
}

.username span {
	gap: 7px;
}

[href],
[dashboard-href-new-tab] {
	cursor: pointer;
}

.levelTitle h2 text.big {
	font-size: 32px;
	font-weight: 700;
}

.levelTitle h2 img {
	max-width: 32px;
	max-height: 32px;
}

.userButton img,
.levelDescription img {
	max-width: 30px;
	max-height: 30px;
	
	min-height: 27px;
}

.username > [href],
h1.username[href],
.contextMenuButton.contextMenuTitle,
.levelTitle.colored h2,
.levelStat .colored,
.profileTitle h1,
.option:has(text[style]) text {
	color: var(--href-color);
	text-shadow: 0px 0px 20px var(--href-shadow-color);
}

.vertical {
	display: flex;
	flex-direction: column;
	
	width: 100%;
	
	gap: 10px;
}

.vertical.small {
	width: max-content;
}

.horisontal {
	display: flex;
	
	width: 100%;
	
	gap: 10px;
}

.horisontal.small {
	width: max-content;
}

.contentDiv .difficultyImage {
	width: 150px;
	height: 150px;
}

.contentDiv .difficultyImage.mini {
	width: 70px;
	height: 70px;
	
	margin: -20px;
	margin-right: -15px;
}

.levelStats {
	display: flex;
	
	gap: 10px;
	
	align-items: center;
}

.levelStat {
	display: flex;
	align-items: center;
	position: relative;
	justify-content: center;
	
	gap: 5px;
	
	font-size: 25px;
	
	white-space: nowrap;
}

.contentDiv .stats {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.additional-info {
	font-size: 20px;
}

[dashboard-copy] {
	cursor: pointer;
	
	color: var(--href-color);
	text-shadow: 0px 0px 20px var(--href-shadow-color);
	font-weight: 700;
	
	transition: 0.2s;
}

[dashboard-copy]:hover {
	text-decoration: underline;
}

[dashboard-copy]:active {
	color: #bbffbb;
}

.levelDescription {
	height: 100%;
}

.songCard {
	display: flex;
	align-items: center;
	gap: 7px;
	
	max-width: max-content;
	
	font-size: 21px;
	
	overflow-wrap: anywhere;
}

.songCard:has(button) {
	padding: 10px;
	border-radius: 10px;
	
	background-color: #86868624;
	border: 1px solid #86868634;
}

.contents {
	display: contents !important;
}

.songCard button {
	font-size: 21px;
}

.pageDiv {
	display: flex;
	justify-content: space-between;
	align-items: center;

	gap: 10px;
}

[dashboard-page-buttons] {
	box-sizing: border-box;
	
	width: max-content;

	position: fixed;
	bottom: 50px;
	right: 45px;
	
	padding: 10px;

	border: 1px solid #86868634;
	background-color: #00000055;
	border-radius: 15px;
	
	backdrop-filter: blur(5px);
	
	z-index: 3;
}

.pageButtons {
	display: flex;
	border-radius: 11px;
	border: 1px solid #86868634;
	
	background-color: #86868614;
}

.pageButton {
	width: max-content;
	
	border: none;
	border-radius: 0px;
	
	box-shadow: none;
	
	font-size: 20px;
	padding: 10px 15px;
	
	background-color: transparent;
	
	transition: 0.2s;
}

.pageButton i {
	transition: 0.2s;
}

.pageButton:not(:disabled):hover {
	background-color: #86868624;
}

.pageButton:first-child {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.pageButton:last-child {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.pageButton:disabled {
	cursor: not-allowed !important;
}

.pageButton:disabled i {
	opacity: 0.9;
}

.pageButton:not(:disabled):active i {
	scale: 90% !important;
}

[dashboard-date] {
	width: max-content;
	
	cursor: pointer;
}

.head .vertical {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	
	height: 100%;
	width: max-content;
	overflow: hidden;
	
	gap: 5px;
}

.head.horisontal {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
	gap: 5px;
}

.audioPlayer h1 {
	font-size: 26px;
}

.audioPlayer p {
	font-size: 20px;
}

.audioPlayer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	
	white-space: nowrap;
	
	padding: 10px;
	border-radius: 15px;
	max-width: 50%;
	
	background-color: #00000055;
	border: 1px solid #86868634;
	
	text-align: right;
	
	text-overflow: ellipsis;
	
	position: fixed;
	right: 50px;
	top: 50px;
	
	backdrop-filter: blur(10px);
	
	transition: 0.2s;
	
	opacity: 0;
	pointer-events: none;
}

.audioPlayer.show {
	opacity: 1;
	
	pointer-events: initial;
}

.audioPlayerButton {
	display: flex;
	align-items: center;
	justify-content: center;
	
	background-color: #86868624;
	border: 1px solid #86868634;
	
	padding: 20px;
	border-radius: 10px;
	font-size: 20px;
	
	font-weight: 700;
	
	height: 100%;
	
	transition: 0.2s;
}

.audioPlayerButton:hover {
	background-color: #86868634;
}

.audioPlayerButton:active {
	scale: 95%;
}

.audioPlayerButton i {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 27px;
	height: 25px;
	
	font-size: 30px;
}

.audioPlayerControls {
	display: flex;
	align-items: center;
	
	gap: 7px;
	height: 30px;
	font-size: 20px;
}

.audioPlayerControls input {
	appearance: none;
	
	height: 10px;
	border-radius: 500px;
	
	background-size: 0% 100%;
	background-repeat: no-repeat;
	background-color: #86868634;
	border: 1px solid #86868634;
	
	width: 100%;
	
	margin: 0px;
}

.audioPlayer audio {
	display: none;
}

i[onclick],
[dashboard-toggle] {
	cursor: pointer;
}

.audioPlayer .songAuthor {
	font-size: 21px;
	color: #c0c0c0;
}

.levelPage .levelStats:not(.card) {
	flex-direction: column;
	align-items: flex-start;
	
	width: max-content;
	min-width: 300px;
}

.levelPage .levelStats:not(.card) .levelStat {
	justify-content: flex-start;
	
	font-size: 27px;
	
	padding: 15px;
	border-radius: 15px;
	
	background-color: #86868614;
	border: 1px solid #86868624;
	
	width: 100%;
	
	box-sizing: border-box;
	
	white-space: nowrap;
	
	transition: 0.2s;
}

.levelPage .levelStat.several {
	gap: 20px;
	
	justify-content: space-between !important;
}

.levelPage {
	gap: 10px;
}

.levelStat i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	
	width: 30px;
	height: 30px;
}

.eyeButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	
	border: none;
	box-shadow: none;
	
	width: max-content;
	padding: 0px;
	
	background: transparent;
}

.eyeButton i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	
	font-size: 25px;
	
	width: max-content;
	height: max-content;
	
	aspect-ratio: 1/1;
	
	transition: 0.2s;

}

.eyeButton:active i {
	scale: 90% !important;
}

.nothingOnPageDiv {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	background-color: #86868614;
	border: 1px solid #86868624;
	
	border-radius: 15px;
	
	width: 100%;
	
	padding: 50px;
	box-sizing: border-box;
	
	gap: 20px;
}

.commentsDiv {
	display: flex;
	flex-direction: column;
	
	gap: 10px;
	
	width: 100%;
	min-height: 100%;
}

.nothingOnPageDiv .nothing-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	
	font-size: 150px;
}

.nothingOnPageDiv .nothing-icon.fa-ellipsis {
	height: 50px;
}

.nothingOnPageDiv .arrow-icon {
	display: flex;
	align-items: center;
	
	width: 100%;
	height: 0px;
	
	font-size: 100px;
	
	transform: translate(calc(-100% + 75px), -25px) rotate(180deg);
	
	pointer-events: none;
}

.nothingOnPageDiv .arrow-icon::before{
	transform: scale(1, -1) rotate(65deg);
}

.levelTitle h3 {
	font-size: 20px;
	
	opacity: 0.8;
}

.levelTitle .horisontal {
	align-items: center;
}

.modeButtons {
	display: flex;
	
	background-color: #86868614;
	border: 1px solid #86868624;
	border-radius: 10px;
}

.modeButtons button {
	display: flex;
	justify-content: center;
	align-items: center;
	
	background: transparent;
	border: none;
	box-shadow: none;
	
	padding: 10px 15px;
	border-radius: 0px;
	
	transition: 0.2s;

}

.modeButtons button:active {
	scale: 100% !important;
}

.modeButtons button i {
	font-size: 25px;
	
	transition: 0.2s;
}

.modeButtons button:active i {
	scale: 90% !important;
}

.modeButtons button:not(:disabled):hover {
	background-color: #86868624 !important;
}

.modeButtons button:first-child {
	border-top-left-radius: 10px !important;
	border-bottom-left-radius: 10px !important;
}

.modeButtons button:last-child {
	border-top-right-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
}

.commentsDiv .pageDiv {
	justify-content: flex-end;
	gap: 10px;
	
	white-space: nowrap;
}

.levelTitle text[dashboard-date] {
	font-size: 20px;
	
	opacity: 0.8;
	
	white-space: nowrap;
}

.commentStat {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: center;

	gap: 7px;
	
	width: max-content;
	
	font-size: 25px;

	white-space: nowrap;
}

.squareButton {
	width: max-content;
	
	padding: 6px 10px !important;
}

.squareButton:active {
	scale: 95% !important;
}

.squareButton:active::after {
	scale: 105% !important;
}

.emptySymbol {
	display: inline-flex !important;
	
	margin-right: -5px;
	
	width: 0px;
	height: 0px;
	
	opacity: 0;

	white-space: nowrap;
	
	user-select: none;
}

.small .commentStat {
	font-size: 20px;
}

h1[dashboard-score] {
	font-size: 30px;
}

h1[dashboard-score="1"] {
	font-size: 33px;
	
	color: #feff8f;
}

h1[dashboard-score="2"] {
	font-size: 31.5px;
	
	color: #d7d7d7;
}

h1[dashboard-score="3"] {
	color: #ffd1a8;
}

.inlineForm {
	display: inline-flex;
	
	width: 100%;
	gap: 10px;
	
	margin: 0px;
}

.inlineForm .button {
	width: max-content !important;
}

.inlineForm .button:hover {
	background-color: #86868624 !important;
}

.inlineForm .button:active {
	scale: 90% !important;
}

.inlineForm input {
	width: 100% !important;
}

h1[title],
.levelStat text[title] {
	display: flex;
	justify-content: center;
	align-items: center;
	
	gap: 5px;
}

[title]::after,
.inputDiv:has(.regex-fail[dashboard-regex-check])::after {
	content: attr(title);
	position: absolute;
	
	transform: translateY(-100%);
	
	color: white !important;
	font-size: 23px;
	font-weight: 400;
	text-align: center;
	
	background-color: #86868624;
	border: 1px solid #86868634;
	box-shadow: 0px 0px 20px 0px #86868620;
	
	backdrop-filter: blur(5px);
	
	border-radius: 15px;
	
	opacity: 0;
	
	padding: 10px 15px;
	transition: 0.2s;
	
	pointer-events: none;
	
	box-sizing: border-box;
	
	width: max-content;
	max-width: 30vw;
}

.inputDiv:has(.regex-fail[dashboard-regex-check])::after {
	content: attr(dashboard-regex-title);
}

[title]:hover::after,
.inputDiv:has(.regex-fail[dashboard-regex-check]):hover::after {
	opacity: 1;
}

nav [title]::after,
.contextMenuDiv [title]::after {
	content: initial;
}

.commentStat text {
	display: flex;
	align-items: center;
	justify-content: center;
	
	gap: 7px;
}

.levelStat :not(i):first-child {
	justify-content: flex-start !important;
}

.stats > :not(i):first-child {
	justify-content: flex-start !important;
}

.stats > :not(i):last-child {
	justify-content: flex-end !important;
}

.toggle {
	appearance: none;
	cursor: pointer;
	
	padding: 10px 25px;
	margin: 0px;
	
	background-color: #86868624;
	border: 1px solid #86868634;
	
	border-radius: 500px;
	
	height: max-content;
	
	transition: 0.1s;
}

.toggle::after {
	content: '';
	
	display: flex;
	
	padding: 15px;
	
	background-color: #86868644;
	border: 1px solid #86868654;
	
	border-radius: 500px;
	
	aspect-ratio: 1 / 1;
	transform: translateX(-50%);
	
	transition: 0.2s;
}

.toggle:active::after,
[dashboard-toggle]:active .toggle::after {
	scale: 0.9;
	transform: translateX(-55%);
}

.toggle:checked {
	background-color: var(--href-shadow-color);
	box-shadow: 0px 0px 20px 0px var(--href-shadow-color);
}

.toggle:checked::after {
	transform: translateX(50%);
	
	background-color: var(--href-color);
}

.toggle:checked:active::after,
[dashboard-toggle]:active .toggle:checked::after {
	scale: 0.9;
	transform: translateX(55%);
}

.wideBox.grid {
	display: flex;
	align-items: start;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: flex-start;
	
	gap: 10px;
}

.wideBox.grid .contentDiv {
	width: calc(50% - 5px);
}

.settingDiv {
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	gap: 10px;
	
	width: 100%;
}

.settingDescription {
	display: flex;
	flex-direction: column;
	
	gap: 5px;
	
	width: 100%;
}

.settingDescription h2 {
	display: flex;
	align-items: center;
	gap: 7px;
	
	word-break: break-word;
	
	font-size: 30px;
	font-weight: 700;
	
	margin: 0px;
}

.settingDescription h3 {
	word-break: break-word;
	
	color: gray;
	
	font-weight: 400;
	font-size: 25px;
	
	margin: 0px;
}

.languageDiv {
	display: flex;
	flex-direction: row;
	align-items: center;
	
	gap: 5px;
	
	width: 100%;
}

.settingDescription h2:has(img) {
	display: flex;
	align-items: center;
	
	gap: 10px;
}

.settingDescription h2 img {
	height: 35px;
}

.languagesDiv {
	display: flex;
	flex-direction: column;
	
	width: 100%;
	
	gap: 5px;
}

.radio {
	cursor: pointer;
	
	appearance: none;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	
	margin: 0px;
	padding: 20px;
	
	background-color: #86868624;
	border: 1px solid #86868634;
	
	border-radius: 500px;
	
	aspect-ratio: 1 / 1;
	
	transition: 0.05s;
}

.radio:checked {
	background-color: var(--href-shadow-color);
	box-shadow: 0px 0px 20px 0px var(--href-shadow-color);
}

.radio:checked::after {
	content: '';
	display: block;
	
	margin: 0px;
	padding: 10px;
	
	aspect-ratio: 1 / 1;
	
	background-color: var(--href-color);
	border: 1px solid #86868654;
	
	position: absolute;
	border-radius: 500px;
	
	transition: 0.1s;
	
	opacity: 1;
	
	@starting-style {
		opacity: 0;
	}
}

.usernameDiv {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	
	height: max-content;
	width: max-content;
	
	gap: 15px;
	
	transition: 0.2s;
}

.usernameDiv h1 {
	display: flex;
	
	height: max-content;
	
	font-size: 30px;
	font-weight: bold;
	
	margin: 0px;
}

.usernameDiv h2 {
	display: flex;
	
	font-size: 25px;
	font-weight: 400;
	
	margin: 0px;
	
	color: gray;
}

.mainUsername {
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	gap: 5px;
}

.mainIcon {
	display: flex;
	justify-content: flex-start;
	
	height: max-content;
	width: 60px;
}

.mainIcon img {
	width: 100%;
}

.mainIcon i {
	font-size: 60px;
}

.settingsButton {
	width: max-content;
	font-size: 25px;
}

.userButton text {
	display: flex;
	gap: 7px;
	
	font-size: 24px;
}

.levelTitle .songButton i {
	font-size: 24px;
}

.titleToLeft[title] {
	justify-content: flex-start;
}

.titleToCenter[title] {
	justify-content: center;
}

.titleToRight[title] {
	justify-content: flex-end;
}

.squareButton.big {
	padding: 10px !important;
}

.toggleButton {
	width: max-content;
	padding: 12.5px !important;
	font-size: 27.5px;
}

.modalPage {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	
	opacity: 0;
	visibility: hidden;
	
	padding: 100px;
	box-sizing: border-box;
	
	position: fixed;
	
	top: 0px;
	left: 0px;
	
	width: 100vw;
	height: 100vh;
	
	overflow: scroll;
	
	transition: 0.2s;
	
	z-index: 6;
	
	pointer-events: none;
}

span.background {
	position: fixed;
	
	opacity: 0;
	
	cursor: pointer;
	
	top: 0px;
	left: 0px;
	
	width: 100vw;
	height: 100vh;
	
	background: #00000070;
	
	transition: 0.2s;
	
	z-index: 6;
	backdrop-filter: blur(0px);
	
	pointer-events: none;
}

.modalPage .box {
	min-width: 60%;
	pointer-events: all;
}

.option {
	display: flex;
	align-items: center;
	
	gap: 7px;
	
	cursor: pointer;
	
	padding: 10px;
	color: white;
	
	font-size: 20px;
	
	outline: none;
	white-space: break-spaces;
	
	transition: 0.2s;
}

.option:hover {
	background: #86868624 !important;
}

.option.hide,
.infoIcon.hide {
	display: none;
}

.option i,
.option img {
	display: flex;
	align-items: center;
	justify-content: center;
	
	width: 25px;
	max-height: 30px;
}

select::picker-icon {
	color: #c0c0c0;
	
	rotate: 270deg;
	transition: 0.2s rotate;
}

select:open::picker-icon {
	rotate: 360deg;
}

::picker(select) {
	appearance: base-select;
	
	top: calc(anchor(bottom) + 5px);
	
	border-radius: 10px;
	
	background: #86868614;
	border: 1px solid #86868624;
	
	backdrop-filter: blur(5px);
	
	transition: 0.2s;
}

::picker(select):popover-open {
	opacity: 1;
}

.select {
	display: inline-flex;
	justify-content: flex-end;
	
	position: relative;
	
	width: 100%;
	
	padding: 10px;
	
	background: #86868624;
	border: 1px solid #86868634;
	border-radius: 10px;
	
	font-size: 20px;
	
	outline: none;
	box-sizing: border-box;
	
	cursor: pointer;
	opacity: 1;
	visibility: initial;
	
	margin-top: 0px;

	transition: 0.2s;
}

.select input {
	width: 100%;
	height: 100%;
	
	top: 0px;
	left: 0px;
	
	padding: 10px;
	
	background: transparent;
	border: none;
	outline: none;
	
	font-size: 20px;
	color: #c0c0c0;
	
	position: absolute;
}

.options {
	position: absolute;
	
	opacity: 1;
	pointer-events: none;
	
	left: 0px;
	top: calc(100% + 10px);
	border-radius: 10px;

	background: #86868600;
	border: 1px solid #86868600;
	backdrop-filter: blur(0px);
	
	z-index: 5;
	
	width: 100%;
	max-height: 250px;
	overflow-y: scroll;
	
	transition: 0.2s;
}

.options * {
	opacity: 0;
	transition: 0.2s;
}

.options > :first-child,
.select.multiple > :first-child {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.options > :last-child,
.select.multiple > :last-child {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

i[dashboard-caret] {
	display: flex !important;
	align-items: center;
	justify-content: center;
	
	pointer-events: none;
	
	width: 20px;
	height: 25px;
	
	position: relative;
	
	transition: 0.2s;
}

i[dashboard-caret]::before {
	position: absolute;
}

.select:has(.option:not(.hide)).show i[dashboard-caret] {
	transform: rotate(90deg);
}

.select:has(.option:not(.hide)).show .options {
	pointer-events: initial;
	
	background: #12121275;
	border: 1px solid #86868634;
	backdrop-filter: blur(5px);
	
	@starting-style {
		pointer-events: none;
	
		background: #12121200;
		border: 1px solid #86868600;
		backdrop-filter: blur(0px);
	}
}

.select:has(.option:not(.hide)).show .options * {
	opacity: 1;
	
	@starting-style {
		opacity: 0;
	}
}

.select.hide {
	opacity: 0;
	visibility: hidden;
	margin-top: -55px;
	
	@starting-style {
		opacity: 1;
		visibility: initial;
		margin-top: 0px;
	}
}

.modalPage.show {
	opacity: 1;
	visibility: initial;
	
	@starting-style {
		opacity: 0;
		visibility: hidden;
	}
}

body:has(.modalPage.show) span.background {
	opacity: 1;
	backdrop-filter: blur(5px);
	pointer-events: initial;
	
	@starting-style {
		opacity: 0;
		backdrop-filter: blur(0px);
		pointer-events: none;
	}
}

.modalPage .box {
	background: #86868624;
	border: 1px solid #86868634;
}

.difficultiesDiv {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	
	transition: 0.2s;
	
	width: 100%;
}

.difficultyButton {
	display: flex;
	justify-content: center;
	align-items: center;
	
	width: max-content;
	
	transition: 0.2s;
	
	position: relative;
}

.difficultyButton:has(img) {
	width: 120px;
	height: 120px;
}

.difficultyButton img {
	position: absolute;
	margin-right: 10px;
	
	width: 170px;
	height: 170px;
	
	opacity: 0.6;
	filter: saturate(0.5);
	
	transition: 0.2s;
	
	pointer-events: none;
}

.difficultyButton.activated img {
	opacity: 1;
	filter: saturate(1);
}

.difficultyButton button {
	display: flex;
	justify-content: center;
	
	width: 100%;
	height: 100%;
	
	padding: 0px;
	margin: 0px;
	
	outline: none;
}

.difficultiesDiv.buttons button {
	opacity: 0.6;
	
	padding: 10px;
	
	background: #86868624;
	border: 1px solid #86868634;
	border-radius: 10px;
	
	font-size: 23px;
	
	transition: 0.2s;
}

.difficultiesDiv.buttons {
	gap: 10px;
}

.difficultiesDiv.buttons .activated button {
	opacity: 1;
}

.difficultiesDiv.buttons button:hover {
	background: #86868634;
}

.difficultiesDiv.buttons button:active {
	scale: 95%;
}
.difficultiesDiv.buttons button:active::after {
	scale: 105%;
}

.difficultiesDiv.demon .difficultyButton.non-demon {
	width: 0px;
	
	opacity: 0;
	
	pointer-events: none;
	
	@starting-style {
		width: 120px;
		
		opacity: 1;
		
		pointer-events: initial;
	}
}

.difficultiesDiv .difficultyButton.demon {
	width: 0px;
	
	opacity: 0;
		
	pointer-events: none;
}

.difficultiesDiv.demon .difficultyButton.demon {
	width: 120px;
	
	opacity: 1;
	
	pointer-events: initial;
	
	@starting-style {
		width: 0px;
	
		opacity: 0;
		
		pointer-events: none;
	}
}

.applyButtons {
	display: flex;
	
	gap: 7px;
	
	position: absolute;
	
	right: 20px;
	bottom: 20px;
}

.applyButtons button {
	font-size: 25px;
}

.applyButtons i {
	width: 25px;
	height: 25px;
}

.saveSettingsButtons {
	display: flex;
	
	border-radius: 15px;
	padding: 15px;
	gap: 10px;
	
	background-color: #00000055;
	border: 1px solid #86868634;
	
	position: fixed;
	bottom: 50px;
	
	white-space: nowrap;
	
	transform: translateY(200%);
	transition: 0.2s;
	
	backdrop-filter: blur(5px);
}

.saveSettingsButtons.show {
	transform: translateY(0%);
}

.contextMenuDiv {
	opacity: 0;
	pointer-events: none;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	
	position: fixed;
	
	background-color: #00000055;
	border: 1px solid #86868644;
	
	padding: 10px;
	border-radius: 15px;
	
	gap: 5px;
	
	width: max-content;
	backdrop-filter: blur(5px);
	
	z-index: 4;
	
	transition: opacity 0.2s;
}

.contextMenuButton {
	display: flex;
	align-items: center;
	
	width: 100%;
	
	font-size: 23px;
	
	color: var(--button-color, white);
	
	background-color: #86868600;
	border: 1px solid #86868600;
	
	padding: 10px;
	border-radius: 10px;
	
	gap: 7px;
	
	line-height: 1;
	
	transition: 0.2s;
}

.contextMenuButton.contextMenuTitle {
	cursor: initial;
	
	max-width: 350px;
	text-align: left;
}

.contextMenuDiv.show {
	opacity: 1;
	pointer-events: initial;
}

.contextMenuButton:not(.contextMenuTitle):hover {
	background-color: #86868634;
	border: 1px solid #86868644;
}

.contextMenuButton:not(.contextMenuTitle):active {
	scale: 95%;
}

.contextMenuButton i {
	display: flex;
	justify-content: center;
	align-items: center;
	
	width: 28px;
	height: 28px;
}

.profileTitle {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-end;
	
	gap: 10px;
}

.profileTitle h1 {
	font-size: 45px;
	font-weight: bold;
	line-height: 1;
}

.profileTitle p {
	display: flex;
	justify-content: center;
	
	font-size: 30px;
	font-weight: normal;
}

.profilePlayerIcon {
	display: flex;
	justify-content: center;
	align-items: center;
	
	width: 125px;
	height: 125px;
}

.profilePlayerIcon img {
	max-width: 125px;
	max-height: 125px;
}

.profileIconSmall {
	height: 40px;
}

.profileIconBig {
	height: 50px;
}

.iconKitDiv {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	
	width: max-content;
	background-color: #86868624;
	border: 1px solid #86868644;
	
	padding: 10px;
	border-radius: 10px;
	gap: 15px;
	
	box-sizing: border-box;
}

.bigGap {
	gap: 20px;
}

.profileTitle img,
.levelTitle img {
	width: 45px;
}

.profileTitle:has(img),
.levelTitle:has(img) {
	gap: 5px;
}

.goldCoins {
	color: #fffd8a;
}

.spaceBetween {
	justify-content: space-between;
}

hr {
	width: 100%;
	
	border: none;
	border-top: 1px solid #ffffff1a;
	
	margin: 0px;
}

.flexStart {
	align-items: flex-start;
}

.flexEnd {
	align-items: flex-end;
}

.contextMenuButton text,
.contextMenuButton span {
	display: flex;
	align-items: center;
	
	gap: 7px;
	
	font-size: 24px;
}

.justifyCenter {
	justify-content: center;
}

.emojisButton {
	position: absolute;
	right: 10px;
	
	color: #FFFFFF99;
	
	transition: 0.2s;
}

.emojisButton:hover,
.emojisInput.show .emojisButton {
	background: transparent;
	
	color: white;
}

.emojisInput {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	
	width: 100%;
	position: relative;
}

.emojisDiv {
	position: absolute;
	top: calc(100% + 10px);
	
	opacity: 0;
	pointer-events: none;
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	gap: 25px;
	
	background-color: #86868614;
	border: 1px solid #86868634;
	
	max-width: 340px;
	max-height: 250px;
	
	backdrop-filter: blur(5px);
	
	padding: 15px;
	
	transition: 0.2s;
	
	overflow: scroll;
}

.emojisInput.show .emojisDiv {
	opacity: 1;
	pointer-events: initial;
}

.emojisDiv img {
	cursor: pointer;
	
	max-height: 40px;
}

.emojisDiv .horisontal {
	flex-wrap: wrap;
}

.emojisDiv h3 {
	display: flex;
	align-items: center;
	
	gap: 7px;
	
	font-size: 25px;
	font-weight: 700;
	
	width: 100%;
	
	color: white;
}

.emojisDiv h3 img {
	cursor: initial;
	
	max-height: 30px;
	max-width: 30px;
}

.extraIcon {
	display: flex;
	justify-content: center;
}

.songCard .username {
	font-size: 25px;
}

.profileTitle .username {
	font-size: 30px;
}

.username {
	display: inline-block;
	
	width: max-content;

	transition: 0.2s;
}

.username:has(span[href]):active {
	scale: 95%;	
}

.username:active span[href]::after {
	scale: 105%;
}

.levelTitle[href] h2:active span[href]::after {
	scale: 103%;
}

.levelDescription .username:has(img),
.levelDescription > img {
	/*
		:sob:
	*/
	margin-top: -5px;
	top: 5px;
	
	position: relative;
}

.levelDescription .username > .emptySymbol {
	display: none !important;
}

.levelDescription .username {
	position: relative;
	
	max-height: 30px;
}

.levelDescription .username::after {
	content: '';
	
	opacity: 0;
	
	display: block;
	
	width: 100%;
	height: 100%;
	
	position: absolute;
	
	padding: 3px 0px;
	top: -3px;
	left: 0px;
	
	border-radius: 10px;
	
	background-color: color-mix(in srgb, var(--href-shadow-color) 30%, transparent);
	border: 1px solid var(--href-shadow-color);
	
	pointer-events: none;
	
	transition: 0.2s;
}

.levelDescription .username:active::after {
	opacity: 1;
	
	scale: 105%;
}

.levelDescription > text:has(.username) {
	display: inline-block;
}

.inputStyle h4 {
	font-size: 20px;
	color: #c0c0c0;
	
	font-weight: 400;
}

.inputStyle h4.empty {
	color: gray;
}

label.inputStyle {
	cursor: pointer;
}

label.inputStyle input[type="file"] {
	display: none;
}

progress {
	display: block;
	
	width: 100%;
	height: 25px;
	
	background-color: #86868614;
	border: 1px solid #86868634;
	border-radius: 500px;
	
	transition: 0.2s;
}

progress::-webkit-progress-bar {
	background: transparent;
	
	transition: 0.2s;
	
	border-radius: 500px;
} 

progress::-webkit-progress-value {  
	border-radius: 500px;
	
	background-color: var(--href-color);
	box-shadow: 0px 0px 20px var(--href-shadow-color);
	
	transition: 0.2s;
	
	padding: 5px;
}

.dashboard-loader progress {
	width: 50%;
}

.infoIcon {
	display: flex;
	justify-content: center;
	
	width: max-content;
	height: max-content;
}

.infoIcon::after {
	z-index: 3;
}

.select.multiple {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	
	background-color: #86868614;
	border: 1px solid #86868624;
	
	width: 100%;
	max-height: 250px;
	overflow-y: scroll;
	
	padding: 0px;
}

.select.multiple:empty {
	display: none;
}

[dashboard-running-text] {
	white-space: nowrap;
	
	max-width: 300px;
	overflow-x: scroll;
	
	pointer-events: none;
	
	animation: auto running-text linear 2s infinite alternate;
}

@keyframes running-text {
	0% {
		text-indent: 0px;
	}
	20% {
		text-indent: 0px;
	}
	80% {
		text-indent: var(--text-width);
	}
	100% {
		text-indent: var(--text-width);
	}
}

a {
	color: white;
	
	text-decoration: none;
}

.toggleExtra {
	display: flex;
	flex-direction: row;
	align-items: center;

	cursor: pointer;
	
	padding: 0px;
	
	background-color: var(--href-shadow-color);
	box-shadow: 0px 0px 20px var(--href-shadow-color);
	
	border-radius: 500px;
	padding: 10px;
	
	height: max-content;
	
	transition: 0.2s;
}

.toggleExtra::after {
	content: '';
	position: absolute;
	
	width: 40px;
	
	background-color: var(--href-color);
	box-shadow: 0px 0px 20px var(--href-shadow-color);
	border: 1px solid #86868634;
	
	border-radius: 500px;
	
	aspect-ratio: 1 / 1;
	
	transition: 0.2s;
	transform: translateX(calc((100% - 2.5px) * var(--toggle-value)));
	
	z-index: -1;
}

.toggleExtraOption {
	display: flex;
	justify-content: center;
	align-items: center;
	
	outline: none;
	padding: 5px;
	
	font-size: 20px;
	
	width: 40px;
	height: 40px;
	
	transition: 0.2s;
}

.toggleExtraOption.checked {
	color: black;
}

.footerText {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.maintenanceDiv {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	width: 100%;
	height: 100%;
}

.maintenanceDiv .nothingOnPageDiv {
	width: max-content;
}