* {
	transition: fill 3s linear;
}

:root {
	--color-volume: #a94672;
	overflow: hidden;
	color: #e8e6e3;
	background-color: #181a1b;
	user-select: none !important;
	touch-action: none;
	--percentage: 30%;
	--main-color: 255, 255, 255;
	--el-bg-color: 220, 220, 220;
}

body {
	min-height: 100vh;
	font-family: Arial;
	font-size: small;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none !important;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input[type=submit],
button {
	color: #aca2a2;
	background-color: #2a2d2f;
	border: 2px solid var(--color-volume);
	padding: 10px 24px;
	height: 45px;
	cursor: pointer;
	width: 280px;
	display: block;
	transition: visibility 0.3s linear, opacity 0.3s linear, border 3s linear;
	text-align: center;
}

button:disabled {
	color: #585757;
	background-color: #2a2d2f;
	opacity: 0.2;
	cursor: not-allowed;
}

select {
	color: #aca2a2;
	background-color: #2a2d2f;
	border: 2px solid var(--color-volume);
	padding: 10px 24px;
	height: 45px;
	cursor: pointer;
	width: 300px;
	display: block;
	transition: visibility 0.3s linear, opacity 0.3s linear, border 3s linear;
	text-align: center !important;
	text-align-last: center !important;
}

input[type=text],
input[type=url] {
	color: #aca2a2;
	border: 2px solid var(--color-volume);
	background-color: #222426;
	transition: transform 0.3s linear, visibility 0.3s linear, opacity 0.3s linear, border 3s linear;
}

dialog {
	color: #aca2a2;
	background-color: #222426;
}

#radioTitle {
	transition: opacity 1s ease-in-out, transform 1.5s ease-in-out;
	/* animation-iteration-count: 1; */
	/* animation:  RadioTitleCopyBounce 1.5s normal; */
}

@keyframes RadioTitleCopyBounce {
	0% {
		transform: scale(100%);
	}
	50% {
		transform: scale(110%);
		text-shadow: 0px -25px 15px white,3px 3px 15px white;
	}
	100% {
		transform: scale(100%);
	}	
}

#UpdateDialog {
	min-height: 40vw !important;
}

#UpdateDialogChangelogList {
	width: fit-content;
	height: 50vh;
	text-align: left;
	vertical-align: middle;

	box-sizing: content-box;
	scroll-behavior: smooth;
	overflow-y: scroll;
	overflow-x: hidden;
	-ms-overflow-style: none;
	scrollbar-width: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#UpdateDialogChangelogList ul li:hover {
	transform: none;
}

.changelog ul {
	list-style-type: circle !important;
	width: auto !important;
}
.changelog li {
	background-color: transparent;
	width: 100%;
}

.changelog ul:hover {
	cursor: pointer;
	transform: none;
}

.changelog li:hover {
	background-color: transparent;
	cursor: pointer;
	transform: none;
}

*::-webkit-scrollbar {
	display: none;
	/* Safari and Chrome */
}

dialog::backdrop {
	background-color: #222426;
}

ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: 250px;
}

li {
	padding: 10px;
	background-color: #26292b;
	margin-bottom: 5px;
	border-radius: 5px;
	transition: all ease-in-out 0.3s;
}

li:hover {
	background-color: #313436;
	cursor: pointer;
	transform: scale(105%);
	min-width: none;
}

#RadioSelector {
	margin: 15px;
	height: 60px;
	border-radius: 1in;
}

#Player {
	position: fixed;
	left: 50%;
	bottom: 15%;
	transform: translatex(-50%);
	height: auto;
	margin-right: auto;
	/* border: solid var(--color-volume); */
}

#sound-slider__container {
	display: flex;
	width: 220px;
	height: 20px;
	padding: 20px 40px;
	margin: 10px;
	background: rgba(var(--main-color), 0.07);
	border: 1px solid rgba(var(--main-color), 0.03);
	border-radius: 1in;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	border: 2px solid var(--color-volume);
	transition: all 1s ease-in-out,border 3s linear;
}

#airplay {
	display: none;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

#sound-slider__container::after {
	content: "";
	height: 100%;
	opacity: 0;
	left: 0px;
	position: absolute;
	top: 0px;
	transition: opacity 500ms;
	width: 100%;
	background: radial-gradient(500px circle at var(--mouse-x) var(--mouse-y),
			rgba(var(--main-color), 0.06),
			transparent 40%);
	z-index: -1;

}

#sound-slider__container:hover::after {
	opacity: 1;
}

#sound-picto {
	fill: rgb(var(--el-bg-color));
	margin-right: 1em;
	cursor: pointer;
}

#sound-slider {
	margin: 0 10px;
	appearance: none;
	width: 100%;
	height: 5px;
	border-radius: 1in;
	outline: none;
	transition: .2s;
	cursor: pointer;
	background: rgba(var(--el-bg-color), 0.5);
	background-image: linear-gradient(rgb(var(--main-color)), rgb(var(--main-color)));
	background-size: calc(var(--percentage) - 9px) 100%;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
}

/* round the volume progress */
#sound-slider::after {
	position: absolute;
	content: "";
	height: 100%;
	width: 10px;
	border-radius: 0 1in 1in 0;
	background-color: rgb(var(--main-color));
	transition: .2s;
	left: calc(var(--percentage) - 10px);
}

#sound-slider::-webkit-slider-thumb {
	appearance: none;
	visibility: hidden;
	width: 10px;
	height: 10px;
}

#sound-slider:hover {
	height: 1em;
}

#volume {
	font-family: sans-serif;
	color: rgb(var(--el-bg-color));
	min-width: 2em;
	text-align: right;
}

@media only screen and (max-device-width: 414px) and (orientation: portrait) {
	#sound-slider {
		height: 25px;
		transition: none;

	}

	#sound-slider::-webkit-slider-thumb {
		width: 25px;
		height: 25px;
		color: red !important;
	}

	#sound-slider:hover {
		height: 25px;
	}

	#sound-slider::after {
		transition: none;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
}

#circle {
	transition: stroke-dashoffset 300ms ease-in-out, stroke 3s ease-in-out,stroke-width 0.4s ease-in-out !important;
	stroke-dashoffset: 0;
	fill: none;
	stroke: var(--color-volume) !important;
}

#line1 {
	transition: stroke-dashoffset 300ms ease-in-out, stroke 3s ease-in-out,stroke-width 0.4s ease-in-out, fill 3s ease-in-out !important;
}
#line2 {
	transition: stroke-dashoffset 300ms ease-in-out, stroke 3s ease-in-out,stroke-width 0.4s ease-in-out, fill 3s ease-in-out !important;
}

#circle.play {
	/* stroke-dasharray: 314 314; */
	stroke-dashoffset: 314;
}

#PlayPause {
	background: transparent;
}

#PlayPause:hover circle{
	stroke-width:3px !important;
	stroke-opacity: 2;
}

/* Animations */

@keyframes loadingAnimation {
	0% {

		stroke-dashoffset: 314;
	}

	50% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: -314;
	}
}

.loading {
	transition: all 3s ease-in-out;
	animation: loadingAnimation 2s infinite;
}

@keyframes bounceLogo {
	0% {
		transform: rotate(-5deg);
	}

	10% {
		transform: rotate(5deg);
	}

	20% {
		transform: rotate(-5deg);
	}

	30% {
		transform: rotate(5deg);
	}

	40% {
		transform: rotate(-5deg);
	}

	50% {
		transform: rotate(5deg);
	}

	60% {
		transform: rotate(-5deg);
	}

	70% {
		transform: rotate(5deg);
	}

	80% {
		transform: rotate(-5deg);
	}

	90% {
		transform: rotate(5deg);
	}

	100% {
		transform: rotate(355deg);
	}
}

.form-switch {
	display: inline-block;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.form-switch i {
	position: relative;
	display: inline-block;
	margin-right: .5rem;
	width: 46px;
	height: 26px;
	background-color: #e6e6e6;
	border-radius: 23px;
	vertical-align: text-bottom;
	transition: all 0.3s linear;
}

.form-switch i::before {
	content: "";
	position: absolute;
	left: 0;
	width: 42px;
	height: 22px;
	background-color: #fff;
	border-radius: 11px;
	transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
	transition: all 0.25s linear;
}

.form-switch i::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 22px;
	background-color: #fff;
	border-radius: 11px;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
	transform: translate3d(2px, 2px, 0);
	transition: all 0.2s ease-in-out;
}

.form-switch:active i::after {
	width: 28px;
	transform: translate3d(2px, 2px, 0);
}

.form-switch:active input:checked+i::after {
	transform: translate3d(16px, 2px, 0);
}

.form-switch input {
	display: none;
}

.form-switch input:checked+i {
	background-color: #4BD763;
}

.form-switch input:checked+i::before {
	transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}

.form-switch input:checked+i::after {
	transform: translate3d(22px, 2px, 0);
}


#Antenna {
	border-radius: 10%;
	transition: opacity 0.6s ease-in-out;
}

#TABCONTAINER {
	position: absolute;
	top:0px;
	left: 0px;
	min-height: 100vh;
	min-width: 100vw;
}

.Bounce {
	transition: all 3s ease-in-out;
	animation: bounceLogo 3s infinite;
}

.Tab {
	top: 0px;
	left: 0px;
	position: absolute;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: all 0.5s ease-in-out;
}

.ActiveTab {
	opacity: 1;
	left: auto;
}

#AboutTab {
	height: 100%;
	left: 100vw;
	padding: 25px;
	scroll-behavior: smooth;
	overflow-y: scroll;
	overflow-x: hidden;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

#AboutTab li {
	width: 300px;
}

.Disabled {
	pointer-events: none;
	opacity: 0.6;
}

@keyframes SwipeFingerDemo {
	0% {
		transform: translate(-50px) rotate(-25deg)  scale(100%);
	}
	50% {
		transform: translate(50px) rotate(25deg) scale(110%);
	}
	100% {
		transform: translate(-50px) rotate(-25deg) scale(100%);
	}
}