@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap");

/*
	Dimension by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 2px;
	/* animation: tableTransition 0.5s; */
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	@media screen and (max-width: 480px) {

		html, body {
			min-width: 320px;
		}

	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background: #1b1f22;
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

/* Type */

	html {
		font-size: 16pt;
	}

		@media screen and (min-width: 1680px) {

			html {
				font-size: 12pt;
			}

		}

		@media screen and (min-width: 736px) {

			html {
				font-size: 11pt;
			}

		}

		@media screen and (min-width: 360px) {

			html {
				font-size: 10pt;
			}

		}

	body, input, select, textarea {
		color: #ffffff;
		font-family: "Outfit", sans-serif;
		/* font-family: "Font Awesome 5 Freex", sans-serif; */
		/* font-family: "Big Shoulders Stencil Text", sans-serif;  */
		font-weight: 300;
		font-size: 1rem;
		line-height: 1.65;
	}

	@media screen and (orientation: portrait) {

		p {
			font-size: clamp(12px, 5vh, 14px);
		}
	}

	@media screen and (orientation: landscape) {

		p {
			font-size: clamp(12px, 5vw, 15px);
		}
	}


	a {
		-moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		border-bottom: solid 1px rgba(66, 127, 236, 1);
		text-decoration: none;
		color: inherit;
	}

		a:hover {
			border-bottom-color: transparent;
		}

	strong, b {
		/* color: #ffffff; */
		font-weight: 600;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 1.5rem 0;
	}

	

	h1, h2, h3, h4, h5, h6 {
		color: #ffffff;
		font-weight: 600;
		line-height: 1.4;
		margin: 0 0 1rem 0;
		text-transform: uppercase;
		letter-spacing: 0.1rem;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

		h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
			width: -moz-max-content;
			width: -webkit-max-content;
			width: -ms-max-content;
			width: 100%;
			padding-bottom: -25.5rem;
			margin: 0 0 1rem 0;
			color: #427fed;
		}

@media screen and (orientation: portrait) {
		h1 {
			font-size: clamp(21px, 3vh, 52px);
			line-height: 1.3;
			letter-spacing: 0.3rem;
			margin: 0px;
		}

		h2 {
			font-size: clamp(16px, 5vh, 18px);
			line-height: 1.4;
			letter-spacing: 0.3rem;
		}

		h3 {
			font-size: clamp(12px, 5vh, 15px);
			font-weight: 600;
			line-height: 1.4;
			letter-spacing: 0.3rem;
		}

		h4 {
			font-size: clamp(8px, 3vh, 10px);
			font-weight: 400;
		}

		h5 {
			font-size: clamp(10px, 5vh, 18px);
			color: #dbd9d9;
		}

		h6 {
			font-size: clamp(9px, 5vh, 14px);
			font-weight: 400;
			margin: 0.2vh;
		}

		
	}

	@media screen and (orientation: landscape) {
		h1 {
			font-size: clamp(24px, 4vw, 26px);
			line-height: 1.3;
			letter-spacing: 0.5rem;
			margin: 0px;
		}

		h2 {
			font-size: clamp(16px, 5vw, 24px);
			font-weight: 600;
			line-height: 1.4;
			letter-spacing: 0.5rem;
		}

		h3 {
			font-size: clamp(15px, 5vw, 20px);
			font-weight: 600;
			line-height: 1.4;
			letter-spacing: 0.5rem;
		}

		h4 {
			font-size: clamp(11px, 1vw, 16px);
			font-weight: 400;
		}

		h5 {
			font-size: clamp(10px, 5vw, 16px);
			color: #dbd9d9;
		}

		h6 {
			font-size: clamp(10px, 5vw, 14px);
			margin-bottom: 0;
			font-weight: 400;
		}

		

		.button__icon {
			margin-left: -25vh;
			color: #427fed;
		}
		
	}

	
	sub {
		font-size: 0.8rem;
		position: relative;
		top: 0.5rem;
	}

	sup {
		font-size: 0.8rem;
		position: relative;
		top: -0.5rem;
	}

	blockquote {
		border-left: solid 4px #ffffff;
		font-style: italic;
		margin: 0 0 2rem 0;
		padding: 0.5rem 0 0.5rem 2rem;
	}

	code {
		background: rgba(255, 255, 255, 0.075);
		border-radius: 4px;
		font-family: "Courier New", monospace;
		font-size: 0.9rem;
		margin: 0 0.25rem;
		padding: 0.25rem 0.65rem;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.9rem;
		margin: 0 0 2rem 0;
	}

		pre code {
			display: block;
			line-height: 1.75;
			padding: 1rem 1.5rem;
			overflow-x: auto;
		}

	hr {
		border: 0;
		border-bottom: solid 1px #eeeeee61;
		margin-top: 45px;
		margin-bottom: 45px;
		/* margin-left: 75px;
		margin-right: 75px; */
	}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}

/* Form */

	
	  

	/* input[type="text"], */
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		background-color: transparent;
		border-radius: 4px;
		border: solid 1px #ffffff;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1rem;
		text-decoration: none;
		width: 100%;
	}

		/* input[type="text"]:invalid, */
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		input[type="tel"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

		/* input[type="text"]:focus, */
		input[type="password"]:focus,
		input[type="email"]:focus,
		input[type="tel"]:focus,
		select:focus,
		textarea:focus {
			background: rgba(255, 255, 255, 0.075);
			border-color: #ffffff;
			box-shadow: 0 0 0 1px #ffffff;
		}

	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23ffffff' /%3E%3C/svg%3E");
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		height: 2.75rem;
		padding-right: 2.75rem;
		text-overflow: ellipsis;
	}

		select option {
			color: #ffffff;
			background: #1b1f22;
		}

		select:focus::-ms-value {
			background-color: transparent;
		}

		select::-ms-expand {
			display: none;
		}

	/* input[type="text"], */
	input[type="password"],
	input[type="email"],
	select {
		height: 2.75rem;
	}

	textarea {
		padding: 0.75rem 1rem;
	}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2rem;
		opacity: 0;
		width: 1rem;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
			color: #ffffff;
			cursor: pointer;
			display: inline-block;
			font-size: 0.8rem;
			font-weight: 300;
			margin: 0 0 0.5rem 0;
			padding-left: 2.65rem;
			padding-right: 0.75rem;
			position: relative;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				-webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				-ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				border-radius: 4px;
				border: solid 1px #ffffff;
				content: '';
				display: inline-block;
				height: 1.65rem;
				left: 0;
				line-height: 1.65rem;
				position: absolute;
				text-align: center;
				top: -0.15rem;
				width: 1.65rem;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			background: #ffffff !important;
			border-color: #ffffff !important;
			color: #1b1f22;
			content: '\f00c';
		}

		input[type="checkbox"]:focus + label:before,
		input[type="radio"]:focus + label:before {
			background: rgba(255, 255, 255, 0.075);
			border-color: #ffffff;
			box-shadow: 0 0 0 1px #ffffff;
		}

	input[type="checkbox"] + label:before {
		border-radius: 4px;
	}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	::-webkit-input-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	:-moz-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	::-moz-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	.formerize-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

/* Box */

	.box {
		border-radius: 4px;
		border: solid 1px #ffffff;
		margin-bottom: 2rem;
		padding: 1.5em;
	}

		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}

		.box.alt {
			border: 0;
			border-radius: 0;
			padding: 0;
		}

/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon > .label {
			display: none;
		}

		.icon:before {
			line-height: inherit;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

/* Image */

	.image {
		border-radius: 4px;
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image:before {
			pointer-events: none;
			background-image: url("../images/overlay.png");
			background-color: rgba(19, 21, 25, 0.5);
			border-radius: 4px;
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0.5;
			position: absolute;
			top: 0;
			width: 100%;
		}

		.image img {
			border-radius: 4px;
			display: block;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.left {
			float: left;
			padding: 0 1.5em 1em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			padding: 0 0 1em 1.5em;
			top: 0.25em;
		}

		.image.fit {
			display: block;
			margin: 0 0 2rem 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

		.image.main {
			display: block;
			margin: 2.5rem 0;
			width: 100%;
		}

			.image.main img {
				width: 100%;
			}
			
		@media screen and (max-width: 736px) {

			.image.main {
				margin: 2rem 0;
			}

		}

		@media screen and (max-width: 480px) {

			.image.main {
				margin: 1.5rem 0;
			}

		}

	img .emtTable {
		display: block;
		width: 100%;
	}	

/* List */

	ol {
		list-style: decimal;
		margin: 0 0 2rem 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
			
		}

	ul {
		list-style: disc;
		margin: 0 0 2rem 0;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px #ffffff;
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

	dl {
		margin: 0 0 2rem 0;
	}

		dl dt {
			display: block;
			font-weight: 600;
			margin: 0 0 1rem 0;
		}

		dl dd {
			margin-left: 2rem;
		}

/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -1rem;
		padding-left: 0;
	}

		ul.actions li {
			padding: 0 0 0 1rem;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}

			ul.actions.special li:first-child {
				padding-left: 0;
			}

		ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 1.3rem 0 0 0;
			}

				ul.actions.stacked li:first-child {
					padding-top: 0;
				}

		ul.actions.fit {
			width: calc(100% + 1rem);
		}

			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}

				ul.actions.fit li > * {
					width: 100%;
				}

			ul.actions.fit.stacked {
				width: 100%;
			}

		@media screen and (max-width: 480px) {

			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}

				ul.actions:not(.fixed) li {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 1rem 0 0 0;
					text-align: center;
					width: 100%;
				}

					ul.actions:not(.fixed) li > * {
						width: 100%;
					}

					ul.actions:not(.fixed) li:first-child {
						padding-top: 0;
					}

					ul.actions:not(.fixed) li input[type="submit"],
					ul.actions:not(.fixed) li input[type="reset"],
					ul.actions:not(.fixed) li input[type="button"],
					ul.actions:not(.fixed) li button,
					ul.actions:not(.fixed) li .button {
						width: 100%;
					}

						ul.actions:not(.fixed) li input[type="submit"].icon:before,
						ul.actions:not(.fixed) li input[type="reset"].icon:before,
						ul.actions:not(.fixed) li input[type="button"].icon:before,
						ul.actions:not(.fixed) li button.icon:before,
						ul.actions:not(.fixed) li .button.icon:before {
							margin-left: -0.5em;
						}

		}

/* Icons */

	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
	}

		ul.icons li {
			display: inline-block;
			padding: 0 0.75em 0 0;
		}

			ul.icons li:last-child {
				padding-right: 0;
			}

			ul.icons li a {
				border-radius: 100%;
				box-shadow: inset 0 0 0 1px #ffffff;
				display: inline-block;
				height: 2.25rem;
				line-height: 2.25rem;
				text-align: center;
				width: 2.25rem;
			}

				ul.icons li a:hover {
					background-color: rgba(255, 255, 255, 0.075);
				}

				ul.icons li a:active {
					background-color: rgba(255, 255, 255, 0.175);
				}

/* Table Main*/

@media screen and (orientation: portrait) {
	.table-wrapper {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
	}

	table.mainTable {
		margin: 1rem 1rem 1rem 0rem;
		width: 100%;
	}

		table.mainTable tbody tr {
			/* border: solid 1px #ffffff; */
			border-left: 0;
			border-right: 0;
			line-height: 10vh;
			background-color: rgba(255, 255, 255, 0.00); 
		}
		
			table.mainTable tbody tr.dashed{
				border-bottom: 1px dotted;
			}

			table.mainTable tbody tr:first-child {
				background-color: rgba(255, 255, 255, 0.00);
				line-height: 10vh;
			}

		

		table.mainTable td {
			/* padding: 0.75em 0.75em; */
			text-align: center; 
			vertical-align: middle;
			font-size: clamp(12px, 2.0vw, 22px);
		}
		
		table.mainTable td img{
			width: 90%;
			height: auto;
			vertical-align: middle;
		}

	
		table.mainTable th {
			color: #ffffff;
			font-size: 1em;
			font-weight: 600;
			padding: 0.75em 0.75em 0.75em;
			text-align: middle;
		}

		table.mainTable h4 {
			margin: 0 0 0.7vh;
			font-weight: 400;
			text-transform: initial;
			padding-left: 3px;
			padding-right: 3px;
		}

		table.mainTable h4 span {
			display: block;
			font-size: 0.8em;
			color: #427fed;
			opacity: 1;
			font-weight: bold;
			padding-top: 3px;
			}

		table.mainTable thead {
			border-bottom: solid 2px #ffffff;
		}

		table.mainTable tfoot {
			border-top: solid 2px #ffffff;
		}

		table.mainTable.alt {
			border-collapse: separate;
		}

			table.mainTable.alt tbody tr td {
				border: solid 1px #ffffff;
				border-left-width: 0;
				border-top-width: 0;
			}

				table.mainTable.alt tbody tr td:first-child {
					border-left-width: 1px;
				}

				table.mainTable.alt tbody tr:first-child td {
				border-top-width: 1px;
			}

			table.mainTable.alt thead {
				border-bottom: 0;
			}

			table.mainTable.alt tfoot {
				border-top: 0;
			}

	.voting {
		background-image: url(../../web/images/notvoted.png);
		bottom: -1vh;
		left: 0vh;
		width: 75%;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		font-weight: bold;
	}

	.voted {
		background-image: url(../../web/images/voted.png);
		bottom: -1vh;
		left: 0vh;
		width: 75%;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		font-weight: bold;
		color: #000000;
	}

	.selected {
		background-image: url(../../web/images/selected.png);
		bottom: -1vh;
		left: 0vh;
		width: 75%;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		font-weight: bold;
		color: #FFFFFF;
	}

	.albumTable{
		font-size: clamp(8px, 2.0vw, 9px);
		text-transform: initial;

	}

	.spotifyLogoFront{
		width: 10vh; 
		margin-bottom: 1vh;

	}
}

@media screen and (orientation: landscape) {
	.table-wrapper {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
	}

	table.mainTable {
		margin: 1rem 1rem 1rem 0rem;
		width: 100%;
	}

		table.mainTable tbody tr {
			/* border: solid 1px #ffffff; */
			border-left: 0;
			border-right: 0;
			line-height: 13vw;
			background-color: rgba(255, 255, 255, 0.00); 
		}
		
			table.mainTable tbody tr.dashed{
				border-bottom: 1px dotted;
			}

			table.mainTable tbody tr:first-child {
				background-color: rgba(255, 255, 255, 0.00);
				line-height: 13vw;
			}

		

		table.mainTable td {
			/* padding: 0.75em 0.75em; */
			text-align: center; 
			vertical-align: middle;
			font-size: clamp(12px, 4.0vw, 18px);
		}
		
		table.mainTable td img{
			width: 60%;
			height: auto;
			vertical-align: middle;
		}

	
		table.mainTable th {
			color: #ffffff;
			font-size: 1em;
			font-weight: 600;
			padding: 0.75em 0.75em 0.75em;
			text-align: middle;
		}

		table.mainTable h4 {
			margin-bottom: 1vh;
			font-weight: 400;
			text-transform: initial;
			}

		table.mainTable h4 span {
			display: block;
			font-size: 0.8em;
			color: #427fed;
			opacity: 1;
			font-weight: bold;
			padding-top: 3px;
			}

		table.mainTable thead {
			border-bottom: solid 2px #ffffff;
		}

		table.mainTable tfoot {
			border-top: solid 2px #ffffff;
		}

		table.mainTable.alt {
			border-collapse: separate;
		}

			table.mainTable.alt tbody tr td {
				border: solid 1px #ffffff;
				border-left-width: 0;
				border-top-width: 0;
			}

				table.mainTable.alt tbody tr td:first-child {
					border-left-width: 1px;
				}

				table.mainTable.alt tbody tr:first-child td {
				border-top-width: 1px;
			}

			table.mainTable.alt thead {
				border-bottom: 0;
			}

			table.mainTable.alt tfoot {
				border-top: 0;
			}

	.voting {
		background-image: url(../../web/images/notvoted.png);
		bottom: -1vh;
		left: 0vh;
		width: 65%;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		font-weight: bold;
		font-size: clamp(11px, 4vw, 12px);
	}

	.voted {
		background-image: url(../../web/images/voted.png);
		bottom: -1vh;
		left: 0vh;
		width: 80%;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		font-weight: bold;
		color: #000000;
	}

	.selected {
		background-image: url(../../web/images/selected.png);
		bottom: -1vh;
		left: 0vh;
		width: 80%;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		font-weight: bold;
		color: #FFFFFF;
	}

	.albumTable{
		font-size: clamp(8px, 1vw, 11px);

	}

	
}


/*  Cards */
	
	
	@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
	@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
	.cards {
		font-family: 'Open Sans', Arial, sans-serif;
		position: relative;
		overflow: hidden;
		margin: 10px;
		width: 100%;
		max-height: 10vh;
		height: 111px;
		color: #ffffff;
		text-align: left;
		line-height: 1.4em;
		
		background-color: #001f5630;
		border-radius: 3%;
		animation: slidein 1.5s forwards;
	}

	@keyframes slidein {
		from {
		  height: 0px;
		  transform: scale(0);
		  opacity: 0;
		}
		to {
		  height:var(--h); 
		  transform: scale(1);
		  opacity: 1;
		}
	  } 
	
	 .cards * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;

	
	}
	.cards .background {
	width: 100%;
	height: 100%;
	vertical-align: top;
	opacity: 0.2;
	-webkit-filter: grayscale(80%) blur(20px);
	filter: grayscale(680%) blur(20px);
	-webkit-transition: all 2s ease;
	transition: all 2s ease;
	}
	.cards figcaption {
	width: 100%;
	padding: 0.5vw 1vw;
	position: absolute;
	left: 0;
	top: 40%;
	bottom: 5%;
	}
	.cards .profile {
	border-radius: 50%;
	position: absolute;
	left: 3%;
	height: 100%;
	max-width: 30%;
	opacity: 1;
	box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
	border: 2px solid rgba(255, 255, 255, 0.5);
	-webkit-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	}
	.cards h4 {
	position: absolute;
	font-weight: 400;
	height: 80%;
	left: 9vh;
	top: 20%;
	font-size: 1.3vmax;
	padding-right: 5vh;

	}
	.cards h4 span {
	display: block;
	font-size: 0.8em;
	color: #427fed;
	opacity: 1;
	font-weight: bold;
	padding-top: 6px;
	}
	.cards i {
	padding: 10px 5px;
	display: inline-block;
	font-size: 32px;
	color: #ffffff;
	text-align: center;
	opacity: 0.65;
	}
	.cards a {
	text-decoration: none;
	}
	.cards i:hover {
	opacity: 1;
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
	}
	.cards:hover .background,
	.cards.hover .background {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
	}



	.top3list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 15px;
	}

	.card {
	margin: 1rem;
	box-shadow: 0 2px 7px 3px #FFFFFF;
	}

	.card .card-image-link {
	padding: 1rem;
	text-align: center;
	}

	.card img {
	max-width: 60%;
	height: 60%;
	vertical-align: middle;
	}


/* Button */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: transparent;
		border-radius: 4px;
		border: 0;
		/* box-shadow: inset 0 0 0 1px #ffffff; */
		color: #ffffff !important;
		cursor: pointer;
		display: inline-block;
		font-size: 0.8rem;
		font-weight: 300;
		height: 2.75rem;
		letter-spacing: 0.2rem;
		line-height: 2.75rem;
		outline: 0;
		padding: 0 1.25rem 0 1.35rem;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			background-color: rgba(255, 255, 255, 0.075);
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: rgba(255, 255, 255, 0.175);
		}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		button.icon:before,
		.button.icon:before {
			margin-right: 0.5em;
		}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.6rem;
			height: 2.0625rem;
			line-height: 2.0625rem;
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {
			background-color: #ffffff;
			color: #1b1f22 !important;
			font-weight: 600;
		}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {
			pointer-events: none;
			cursor: default;
			opacity: 0.25;
		}

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button {
		line-height: calc(2.75rem - 2px);
	}

	button.card {
		
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: transparent;
		border-radius: 4px;
		border: 0;
		box-shadow: inset 0 0 0 1px #ffffff;
		color: #ffffff !important;
		cursor: pointer;
		display: inline-block;
		font-size: 0.3rem;
		font-weight: 300;
		height: 40%;
		letter-spacing: 0.2rem;
		line-height: 2.75rem;
		outline: 0;
		padding: 0 1.25rem 0 1.35rem;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		
	}

	.buttonCard {
		position: absolute;
		background-color: rgb(25 29 32);
		color: white;
		height: 4vh;
		width: 1.5vh;
		top: -3px;
		right: -3px;
		font-size: 2vmax;
		font-weight: bold;
		padding-left: 1.3vh;
		z-index: 2;
	}

	.buttonCard:hover {
		
		background-color: rgb(120, 146, 163) !important;
		
		
	}

/* BG */

	#bg {
		-moz-transform: scale(1.0);
		-webkit-transform: scale(1.0);
		-ms-transform: scale(1.0);
		transform: scale(1.0);
		-webkit-backface-visibility: hidden;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 1;
	}

		#bg:before, #bg:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		#bg:before {
			-moz-transition: background-color 2.5s ease-in-out;
			-webkit-transition: background-color 2.5s ease-in-out;
			-ms-transition: background-color 2.5s ease-in-out;
			transition: background-color 2.5s ease-in-out;
			-moz-transition-delay: 0.75s;
			-webkit-transition-delay: 0.75s;
			-ms-transition-delay: 0.75s;
			transition-delay: 0.75s;
			background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("../images/overlay.png");
			background-size: auto, 256px 256px;
			background-position: center, center;
			background-repeat: no-repeat, repeat;
			z-index: 2;
		}

		#bg:after {
			-moz-transform: scale(1.125);
			-webkit-transform: scale(1.125);
			-ms-transform: scale(1.125);
			transform: scale(1.125);
			-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
			-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
			-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
			transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
			background-image: url("../images/bg3.jpg");
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			z-index: 1;
		}

		body.is-article-visible #bg:after {
			-moz-transform: scale(1.0825);
			-webkit-transform: scale(1.0825);
			-ms-transform: scale(1.0825);
			transform: scale(1.0825);
			-moz-filter: blur(0.2rem);
			-webkit-filter: blur(0.2rem);
			-ms-filter: blur(0.2rem);
			filter: blur(0.2rem);
		}

		body.is-preload #bg:before {
			background-color: #000000;
		}

/* Wrapper */

	#wrapper {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		position: relative;
		min-height: 70vh;
		width: 100%;
		padding: 4rem 2rem;
		z-index: 3;
	}

		#wrapper:before {
			content: '';
			display: block;
		}

		@media screen and (min-width: 1200px) {

			#wrapper {
				padding: 3rem 10rem;
			}

		}

		@media screen and (max-width: 736px) {

			#wrapper {
				padding: 2rem 1rem;	
			}

		}

		@media screen and (max-width: 480px) {

			#wrapper {
				padding: 1rem;
			}

		}

	#wrapperBarView {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		position: relative;
		/* min-height: 100vh; */
		width: 100%;
		padding: 4rem 2rem;
		z-index: 3;
	}

		#wrapperBarView:before {
			content: '';
			display: block;
		}

		@media screen and (max-width: 1680px) {

			#wrapperBarView {
				padding: 1rem 1rem;
			}

		}

		@media screen and (max-width: 736px) {

			#wrapperBarView {
				padding: 2rem 1rem;
			}

		}

		@media screen and (max-width: 480px) {

			#wrapperBarView {
				padding: 1rem;
			}

		}

/* Header */

	#header {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		background-image: -moz-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		background-image: -ms-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		background-image: radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		width: 100%;
		text-align: center;
	}

		#header > * {
			-moz-transition: opacity 0.325s ease-in-out;
			-webkit-transition: opacity 0.325s ease-in-out;
			-ms-transition: opacity 0.325s ease-in-out;
			transition: opacity 0.325s ease-in-out;
			position: relative;
			margin-top: 3.5rem;
		}

			#header > *:before {
				content: '';
				display: block;
				position: absolute;
				top: calc(-3.5rem - 1px);
				left: calc(50%);
				width: 1px;
				height: calc(3.5rem + 1px);
				background: #ffffff;
			}

			#header > .circle-progress-border::before {
				display: none !important;
			}

			
			#header > .logo.hide-before::before {
				display: none !important;
			}


		#header > :first-child {
			margin-top: 0;
		}

			#header > :first-child:before {
				display: none;
			}

		#header .logo {
			width: 5.5rem;
			height: 5.5rem;
			line-height: 5.5rem;
			border: solid 1px #ffffff;
			border-radius: 100%;
					
		}
		
			#header .logo .img		{
				width: 100%; /* or any custom size */
				height: 100%; 
				object-fit: contain;
			}

			#header .logo .icon:before {
				font-size: 2rem;
			}


			
				#header .circle-progress .img		{
					width: 100%; /* or any custom size */
					height: 100%; 
					object-fit: contain;
				}
	
				#header .circle-progress .icon:before {
					font-size: 2rem;
				}
	
			

		

			#header .content .inner {
				-moz-transition: max-height 1s ease, padding 1s ease, opacity 0.525s ease-in-out;
				-webkit-transition: max-height 1s ease, padding 1s ease, opacity 0.525s ease-in-out;
				-ms-transition: max-height 1s ease, padding 1s ease, opacity 0.525s ease-in-out;
				transition: max-height 1s ease, padding 1s ease, opacity 0.525s ease-in-out;
				-moz-transition-delay: 0.25s;
				-webkit-transition-delay: 0.25s;
				-ms-transition-delay: 0.25s;
				transition-delay: 0.25s;
				padding: 3rem 1rem;
				/* max-height: 100%; */
				max-height: 5000vh;
				overflow: hidden;
			}

				#header .content .inner > :last-child {
					margin-bottom: 0;
				}

	@media screen and (orientation: landscape) {			
		#header .content p {
			letter-spacing: 0.1rem;
			font-size: clamp(12px, 5vw, 14px);
			margin-bottom: 1vh;
			margin-top: 3vh;
		}

		#header .content {
			border-style: solid;
			border-color: #ffffff;
			border-top-width: 1px;
			border-bottom-width: 1px;
			max-width: 70%;
			width: 70%;
		}
	}

	@media screen and (orientation: portrait) {			
		#header .content p {
			letter-spacing: 0.1rem;
			font-size: clamp(10px, 5vh, 11px);
			margin-bottom: 1vh;
			margin-top: 2vh;
		}

		#header .content {
			border-style: solid;
			border-color: #ffffff;
			border-top-width: 1px;
			border-bottom-width: 1px;
			max-width: 100%;
			width: 100%;
		}
	}

		#header nav ul {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		margin-bottom: 0;
		list-style: none;
		padding-left: 0;
		border: solid 1px #ffffff;
		border-radius: 4px;
		}

		#header nav ul li {
			padding-left: 0;
			border-left: solid 1px #ffffff;
		}

			#header nav ul li:first-child {
				border-left: 0;
			}

			#header nav ul li a {
				display: block;
				min-width: 150px;
				height: 2.75rem;
				line-height: 2.75rem;
				padding: 0 1.25rem 0 1.45rem;
				text-transform: uppercase;
				letter-spacing: 0.2rem;
				font-size: 0.8rem;
				border-bottom: 0;
			}

				#header nav ul li a:hover {
					background-color: rgba(255, 255, 255, 0.075);
				}

				#header nav ul li a:active {
					background-color: rgba(255, 255, 255, 0.175);
				}

		#header nav.use-middle:after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: calc(50% - 1px);
		width: 1px;
		height: 100%;
		background: #ffffff;
		}

		#header nav.use-middle ul li.is-middle {
		border-left: 0;
		}

		body.is-article-visible #header {
		-moz-transform: scale(0.95);
		-webkit-transform: scale(0.95);
		-ms-transform: scale(0.95);
		transform: scale(0.95);
		-moz-filter: blur(0.1rem);
		-webkit-filter: blur(0.1rem);
		-ms-filter: blur(0.1rem);
		filter: blur(0.1rem);
		opacity: 0;
		}

		body.is-preload #header {
		-moz-filter: blur(0.125rem);
		-webkit-filter: blur(0.125rem);
		-ms-filter: blur(0.125rem);
		filter: blur(0.125rem);
		}

		body.is-preload #header > * {
			opacity: 0;
		}

		body.is-preload #header .content .inner {
			max-height: 0;
			padding-top: 0;
			padding-bottom: 0;
			opacity: 0;
		}

		@media screen and (max-width: 980px) {

		#header .content p br {
			/* display: none; */
		}

		}

		@media screen and (max-width: 736px) {

			#header > * {
				margin-top: 2rem;
			}

				#header > *:before {
					top: calc(-2rem - 1px);
					height: calc(2rem + 1px);
				}

				#header > .circle-progress-border::before {
					display: none !important;
				}

				#header > .logo.hide-before::before {
					display: none !important;
				}


			#header .logo {
				width: 4.75rem;
				height: 4.75rem;
				line-height: 4.75rem;
			}
				#header .logo.hide-before::before {
					display: none !important;
				}

				#header .logo .icon:before {
					font-size: 1.75rem;
				}

			#header .content .inner {
				padding: 2.5rem 0rem;
			}

			#header .content p {
				line-height: 1.875;
			}

		}

		@media screen and (max-width: 800px) {

			#header {
				padding-top: 1rem;
				padding-bottom: 1rem;
			}

				#header .content .inner {
					/* padding: 1.5rem 0; */
					
					/* padding-top: 1.5rem;  -> Wenn progress bar nicht direkt unterhalb*/
					padding-top: 0rem;
				}

				#header > .circle-progress-border::before {
					display: none !important;
				}

				#header .logo.hide-before::before {
					display: none !important;
				}

				#header nav ul {
					-moz-flex-direction: column;
					-webkit-flex-direction: column;
					-ms-flex-direction: column;
					flex-direction: column;
					min-width: 10rem;
					max-width: 100%;
				}

					#header nav ul li {
						border-left: 0;
						border-top: solid 1px #ffffff;
					}

						#header nav ul li:first-child {
							border-top: 0;
						}

						#header nav ul li a {
							height: 3rem;
							line-height: 3rem;
							min-width: 150px;
							width: 100%;
						}

				#header nav.use-middle:after {
					display: none;
				}

		}

/* Main */

	#main {
		-moz-flex-grow: 1;
		-webkit-flex-grow: 1;
		-ms-flex-grow: 1;
		flex-grow: 1;
		-moz-flex-shrink: 1;
		-webkit-flex-shrink: 1;
		-ms-flex-shrink: 1;
		flex-shrink: 1;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		position: relative;
		width: 100%;
		max-width: 100%;
		z-index: 3;
	}

		#main article {
			-moz-transform: translateY(0.25rem);
			-webkit-transform: translateY(0.25rem);
			-ms-transform: translateY(0.25rem);
			transform: translateY(0.25rem);
			-moz-transition: opacity 0.325s ease-in-out, -moz-transform 0.325s ease-in-out;
			-webkit-transition: opacity 0.325s ease-in-out, -webkit-transform 0.325s ease-in-out;
			-ms-transition: opacity 0.325s ease-in-out, -ms-transform 0.325s ease-in-out;
			transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out;
			padding: 1.5rem 1.5rem 1.5rem 1.5rem ;
			position: relative;
			width: 80%;
			max-width: 100%;
			background-color: rgba(27, 31, 34, 0.85);
			border-radius: 4px;
			opacity: 0;
		}

		@media screen and (orientation: landscape) and (min-width: 1200px) {
			#main article {
				width: 70%;
				
			}

			#main article.add {
				width: 70%;
			}

			#addsong.addsong-studio-page .searchCard{
				min-height: 260px;
			}
			#addsong.addsong-studio-page .searchNav {
				width: 2.9rem;
    			height: 2.9rem;
			}
			
		}

			#main article.active {
				-moz-transform: translateY(0);
				-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
				transform: translateY(0);
				opacity: 1;
				z-index: 2;
				transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out;
			}

			@media screen and (orientation: landscape) {
				#main article .close {
					display: block;
					position: absolute;
					
					top: -1.6vh;
        			right: -1.7vh;
			
					width: 4rem;
					height: 4rem;
					cursor: pointer;
					text-indent: 4rem;
					overflow: hidden;
					white-space: nowrap;
					z-index: 5;
				}
		 	 }
		  
			@media screen and (orientation: portrait) {
				#main article .close {
					display: block;
					position: absolute;
					top: -2.7vh;
    				right: -2.8vh;
					width: 4rem;
					height: 4rem;
					cursor: pointer;
					text-indent: 4rem;
					overflow: hidden;
					white-space: nowrap;
					z-index: 5;
				}
			}
			

				#main article .close:before {
					-moz-transition: background-color 0.2s ease-in-out;
					-webkit-transition: background-color 0.2s ease-in-out;
					-ms-transition: background-color 0.2s ease-in-out;
					transition: background-color 0.2s ease-in-out;
					content: '';
					display: block;
					position: absolute;
					top: 0.75rem;
					left: 0.75rem;
					width: 2.5rem;
					height: 2.5rem;
					border-radius: 100%;
					background-position: center;
					background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
					background-size: 20px 20px;
					background-repeat: no-repeat;
				}

				#main article .close:hover:before {
					background-color: rgba(255, 255, 255, 0.075);
				}

				#main article .close:active:before {
					background-color: rgba(255, 255, 255, 0.175);
				}

		@media screen and (max-width: 736px) {

			#main article {
				padding-top: 3vh;
				padding-bottom: 3vh;
				padding-left: 2vh;
				padding-right: 2vh;
				width: 80%;
			}

				#main article .close:before {
					top: 0.875rem;
					left: 0.875rem;
					width: 2.25rem;
					height: 2.25rem;
					background-size: 20px 20px;
				}

		}

		@media screen and (max-width: 480px) {

			#main article {
				padding: 1rem 1rem 0.5rem 1rem; ;
				width: 90%;
				margin-top: 4vh;
			}

		}

		

/* Footer */

	#footer {
		-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		width: 100%;
		max-width: 100%;
		margin-top: 2rem;
		text-align: center;
	}

		#footer .copyright {
			letter-spacing: 0.2rem;
			font-size: 0.6rem;
			opacity: 0.75;
			margin-bottom: 0;
			text-transform: uppercase;
		}

		body.is-article-visible #footer {
			-moz-transform: scale(0.95);
			-webkit-transform: scale(0.95);
			-ms-transform: scale(0.95);
			transform: scale(0.95);
			-moz-filter: blur(0.1rem);
			-webkit-filter: blur(0.1rem);
			-ms-filter: blur(0.1rem);
			filter: blur(0.1rem);
			opacity: 0;
		}

		body.is-preload #footer {
			opacity: 0;
		}
		
		


/* Loader */
.loader {
	margin: 0 auto;
	width: 60px;
	height: 50px;
	text-align: center;
	font-size: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	z-index: 50;
  }
  .loader > div {
	height: 100%;
	width: 8px;
	display: inline-block;
	float: left;
	margin-left: 2px;
	-webkit-animation: delay 0.8s infinite ease-in-out;
	animation: delay 0.8s infinite ease-in-out;
	z-index: 50;
  }
  .loader .bar1 {
	background-color: #754fa0;
  }
  .loader .bar2 {
	background-color: #09b7bf;
	-webkit-animation-delay: -0.7s;
	animation-delay: -0.7s;
  }
  .loader .bar3 {
	background-color: #90d36b;
	-webkit-animation-delay: -0.6s;
	animation-delay: -0.6s;
  }
  .loader .bar4 {
	background-color: #f2d40d;
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5s;
  }
  .loader .bar5 {
	background-color: #fcb12b;
	-webkit-animation-delay: -0.4s;
	animation-delay: -0.4s;
  }
  .loader .bar6 {
	background-color: #ed1b72;
	-webkit-animation-delay: -0.3s;
	animation-delay: -0.3s;
  }
  
  @-webkit-keyframes delay {
	0%, 40%, 100% {
	  -webkit-transform: scaleY(0.05);
	}
	20% {
	  -webkit-transform: scaleY(1);
	}
  }
  @keyframes delay {
	0%, 40%, 100% {
	  transform: scaleY(0.05);
	  -webkit-transform: scaleY(0.05);
	}
	20% {
	  transform: scaleY(1);
	  -webkit-transform: scaleY(1);
	}
  }
  
 
 /* Seach Input + Loading */
  
  input {
	background-color: transparent;
    color: white;
    height: 100%;
    width: 80%;
    font-size: clamp(12px, 5vh, 16px);
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1.15;
    padding-left: 0;
    padding-bottom: 5px;
    position: relative;
    z-index: 3;
    border-right: none;
    border-top: none;
    border-left: none;
	text-align: center;
    display: block;
    margin: 0 auto;
	padding-top: 1vh;

  }
  input:valid ~ label {
	top: 0;
	font: 700 18px Roboto;
	color: rgba(255, 255, 255, 0.5);
  }
  input:focus {
	outline: none;
  }
  input:focus ~ label {
	top: 0;
	font: 700 18px Roboto;
	color: #427fed;
  }
  input:focus ~ .bar:before {
	transform: translateX(0);
  }
  input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px #333 inset;
	-webkit-text-fill-color: white !important;
  }
  
  .bar {
	background: rgba(255, 255, 255, 0.5);
	content: "";
	width: 550px;
	height: 3.6666666667px;
	transition: 0.3s ease;
	position: relative;
	border-radius: 4px;
  }
  .bar:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 150%;
	background: #427fed;
	transform: translateX(-100%);
	border-radius: 4px;
  }
  
  ::selection {
	background: rgba(33, 150, 243, 0.3);
	border-radius: 4px;
  }


	.blurback {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.7;
		filter: alpha(opacity = 50); 
		z-index: 10;}


/* snackbarInfo */


#snackbarInfo {
	position: sticky;
	width: 60%;
    visibility: hidden;
    background-color: #427fed;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 3px;
    z-index: 13;
    left: 5%;
    right: 5%;
    top: 15px;
	font-size: clamp(12px, 5vw, 16px);
    font-weight: bold;
  }

  @media screen and (orientation: portrait) {
	#snackbarInfo {
		width: 90%;
	}
  }
  
  #snackbarInfo.show {
	display: block;
	visibility: visible;
	-webkit-animation: fadein 0.5s, fadeout 1.5s 5.5s;
	animation: fadein 1.5s fadeout 1.5s 5.5s; 
  }

  #snackbarInfo.showLong {
	display: block;
	visibility: visible;
	-webkit-animation: fadein 0.5s, fadeout 1.5s 10.5s;
	animation: fadein 1.5s fadeout 1.5s 10.5s; 
  }
  
  #snackbarDone {
	
	visibility: hidden;
    min-width: 95%;
    max-width: 95%;
    background-color: #1ed760;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: fixed;
    z-index: 130;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(10px, 5vw, 14px);
    font-weight: bold;
    transition: bottom 0.5s ease-in-out, visibility 0s linear 0.5s; /* Animation */

  }
  
  /* Für größere Bildschirme: Snackbar in der rechten Ecke */
	@media (min-width: 768px) {
		#snackbarDone {
			min-width: 40%;
			max-width: 300px;
			left: auto;
			right: 20px;
			bottom: -100px;
			transform: none;
		}
	}

	#snackbarDone.show {
		visibility: visible;
		bottom: 30px; /* Die Position, wo die Snackbar endet */
		transition: bottom 0.5s ease-in-out, visibility 0s;
	}


  #snackbarError {
	visibility: hidden;
    min-width: 95%;
    max-width: 95%;
    background-color: #ff0000;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: fixed;
    z-index: 130;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(10px, 5vw, 14px);
    font-weight: bold;
    transition: bottom 0.5s ease-in-out, visibility 0s linear 0.5s; /* Animation */

  }
  /* Für größere Bildschirme: Snackbar in der rechten Ecke */
	@media (min-width: 768px) {
		#snackbarError {
			min-width: 40%;
			max-width: 300px;
			left: auto;
			right: 20px;
			bottom: -100px;
			transform: none;
		}
	}

	#snackbarError.show {
		visibility: visible;
		bottom: 30px; /* Die Position, wo die Snackbar endet */
		transition: bottom 0.5s ease-in-out, visibility 0s;
	}


  #snackbarInfo2 {
    visibility: hidden;
    min-width: 95%;
    max-width: 95%;
    background-color: #427fed;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: fixed;
    z-index: 130;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(10px, 5vw, 14px);
    font-weight: bold;
    transition: bottom 0.5s ease-in-out, visibility 0s linear 0.5s; /* Animation */
}

/* Für größere Bildschirme: Snackbar in der rechten Ecke */
@media (min-width: 768px) {
    #snackbarInfo2 {
        min-width: 40%;
		max-width: 300px;
        left: auto;
        right: 20px;
        bottom: -100px;
        transform: none;
    }
}

#snackbarInfo2.show {
    visibility: visible;
    bottom: 30px; /* Die Position, wo die Snackbar endet */
    transition: bottom 0.5s ease-in-out, visibility 0s;
}
  
  @-webkit-keyframes fadein {
	from {top: 0; opacity: 0;} 
	to {top: 15px; opacity: 1;}
  }
  
  @keyframes fadein {
	from {top: 0; opacity: 0;}
	to {top: 15px; opacity: 1;}
  }
  
  @-webkit-keyframes fadeout {
	from {top: 15px; opacity: 1;} 
	to {top: 0; opacity: 0;}
  }
  
  @keyframes fadeout {
	from {top: 15px; opacity: 1;}
	to {top: 0; opacity: 0;}
  }


  /* Divider */

  .wrapper
{
	/* padding-bottom: 20px; */
}

.divider
{
	position: relative;
	margin-top: 2vh;
    margin-bottom: 2vh;
	height: 1px;
}

.div-transparent:before
{
	content: "";
	position: absolute;
	top: 0;
	left: 5%;
	right: 5%;
	width: 90%;
	height: 3px;
	background-image: linear-gradient(to right, transparent, rgb(48,49,51), transparent);
}

.divider2
{
	position: RELATIVE;
    height: 1px;
    padding-bottom: 20px;
    width: 40%;
    margin: auto;
}

.div2-transparent:before
{
	content: "";
	position: absolute;
	top: 0;
	left: 5%;
	right: 5%;
	width: 90%;
	height: 3px;
	background-image: linear-gradient(to right, transparent, rgb(48,49,51), transparent);
}

.divider3
{
	position: relative;
	margin-top: 20px;
	margin-bottom: 20px;
	height: 1px;
}

.div3-transparent:before
{
	content: "";
	position: absolute;
	top: 0;
	left: 5%;
	right: 5%;
	width: 90%;
	height: 3px;
	background-image: linear-gradient(to right, transparent, rgb(48,49,51), transparent);
}

/* LoginPage */

#inactive .loginIMG
{
	display: block;
	margin-left: auto;
	margin-right: auto;	
    margin-bottom: 1vh;
    margin-top: 3vh;
	width: 18vh;
	
}

#inactiveMain .loginIMG
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 60%;
    margin-top: 50px;
	
    width: 100%;

}

#inactive .loginButton
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}

#button_section .button
{
	margin-top: 2vh;
    width: 70%;
    margin-bottom: 2vh;
}



#active .Button
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}

/* Search Screen */
h1.search {
	width: -moz-max-content;
	width: -webkit-max-content;
	width: -ms-max-content;
	width: 90%;
	padding-bottom: -25.5rem;
	padding-bottom: -25.5rem;
	margin: 0 0 1rem 0;
	color: #427fed;
}


/* Bar Overview Page */

.container {
	display: grid;
	grid-gap: 10px;  /* Simply adjust this value !*/
	grid-template-columns: repeat(2, 1fr); /* OR grid-template-columns: 1fr 1fr 1fr;*/
	grid-auto-rows: 1fr;
  }
  
  .container>div {
	height: 100%;
  }

h1.barView {
	margin: 0 0 15px 0;

}


@media screen and (orientation: portrait) {

	.searchCard {
		position: relative;
		margin: auto;
		top: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: calc(95% / 2);
		padding: 5px;
		height: 25vh;
		background: rgb(23 26 30);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
		color: #ffffff;
		overflow: hidden;
		border-radius: 7px;
		margin: 0.4vh;
		float:left;
	  }
	  
	  
	  .searchNav {
		position: absolute;
		right: -2px;
    	top: -4px;
		z-index: 10;
		background: #427fed;
		border: 1px solid #ffffff;
		height: 3vh;
		width: 3vh;
		text-align: center;
		font-size: 2vh;
		font-weight: bold;
		border-radius: 5px;
		cursor: pointer; /* Zeigt dem Nutzer, dass dieses Element klickbar ist */
		transition: transform 0.05s ease-in-out, background-color 0.05s ease-in-out, color 0.05s ease-in-out;
		will-change: transform, background-color, color; /* Hinweis an den Browser */
    
		}

		.searchNav:active {
			transform: scale(0.9) ; /* Kombiniere Skalierung und Drehung */
			background-color: #1ED760; /* Ändere Hintergrundfarbe zu einer dunkleren Variante */
			color: #ffffff; /* Ändere die Textfarbe bei Aktivierung */
		}

	  .searchNavbar {
		padding: 0px;
		margin: 0px;
	  }
	  .searchNavbar li {
		position: relative;
		font-size: 1.6vh;
		padding: 0px;
		font-weight: bold;
	  }
	
	  .searchHeader{
		position: absolute;
		font-size: clamp(9px, 2.5vh, 11px);
		bottom: 2.3vh;
		left: 0;
		right: 0;
		text-align: center;
		font-weight: bold;
		color: #427fed;
	  }
	  
	  .searchContent {
		position: absolute;
		font-size: clamp(9px, 2.5vh, 12px);
		text-align: center;
		top: 15.3vh;
		left: 0vh;
		right: 0;
		padding: 0.1vh;
		line-height: 2vh;
	
	  }
	
	  .searchYear {
		position: absolute;
		font-size: clamp(8px, 3vh, 9px);
		text-align: center;
		bottom: 0.5vh;
		left: 0;
		right: 0;
	
	  }
	
	  .searchDuration {
		position: absolute;
		font-size: 1.3vh;
		bottom: 1.2vh;
		line-height: 20px;
		left: 17vh;
		margin-top: 1vh;
	
	  }
	
	  .searchImage {
		
		position: absolute;
		width: 11vh;
		height: 11vh;
		top: 3vh;
		left: 0;
		margin: auto;
		right: 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;

	  }

	  .spotifyLogo {
		background-image: url(../../web/images/Spotify_Logo_RGB_Green.png);
		position: absolute;
		height: 3vh;
		width: 5vh;
		left: 0.6vh;
		top: 0.7vh;
		background-repeat: no-repeat;
		background-size: contain;
	  }
	
	  .searchTable {
		width: 100%;
		border-collapse: separate;
		border-spacing: 1px 0.5rem;
	  }

}

@media screen and (orientation: portrait) and (min-width: 736px){

	.searchCard {
		position: relative;
		margin: auto;
		top: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: calc(95% / 2);
		padding: 5px;
		height: 25vh;
		background: rgb(23 26 30);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
		color: #ffffff;
		overflow: hidden;
		border-radius: 7px;
		margin: 0.4vh;
		float:left;
	  }
	  
	  
	  .searchNav {
		position: absolute;
		right: -2px;
    	top: -4px;
		z-index: 10;
		background: #427fed;
		border: 1px solid #ffffff;
		height: 3vh;
		width: 3vh;
		text-align: center;
		font-size: 2vh;
		font-weight: bold;
		border-radius: 5px;
		cursor: pointer; /* Zeigt dem Nutzer, dass dieses Element klickbar ist */
		transition: transform 0.05s ease-in-out, background-color 0.05s ease-in-out, color 0.05s ease-in-out;
		will-change: transform, background-color, color; /* Hinweis an den Browser */
		}

		.searchNav:active {
			transform: scale(0.9) ; /* Kombiniere Skalierung und Drehung */
			background-color: #1ED760; /* Ändere Hintergrundfarbe zu einer dunkleren Variante */
			color: #ffffff; /* Ändere die Textfarbe bei Aktivierung */
		}

	  .searchNavbar {
		padding: 0px;
		margin: 0px;
	  }
	  .searchNavbar li {
		position: relative;
		font-size: 1.6vh;
		padding: 0px;
		font-weight: bold;
	  }
	
	  .searchHeader{
		position: absolute;
		font-size: clamp(9px, 5vh, 14px);
		bottom: 2.3vh;
		left: 0;
		right: 0;
		text-align: center;
		font-weight: bold;
		color: #427fed;
	  }
	  
	  .searchContent {
		position: absolute;
		font-size: clamp(9px, 5vh, 16px);
		text-align: center;
		top: 15.5vh;
		left: 0vh;
		right: 0;
		padding: 0.1vh;
		line-height: 2vh;
	
	  }
	
	  .searchYear {
		position: absolute;
		font-size: clamp(8px, 3vh, 9px);
		text-align: center;
		bottom: 0.5vh;
		left: 0;
		right: 0;
	
	  }
	
	  .searchDuration {
		position: absolute;
		font-size: 1.3vh;
		bottom: 1.2vh;
		line-height: 20px;
		left: 17vh;
		margin-top: 1vh;
	
	  }
	
	  .searchImage {
		
		position: absolute;
		width: 12vh;
		height: 12vh;
		top: 3vh;
		left: 0;
		margin: auto;
		right: 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;

	  }

	  .spotifyLogo {
		background-image: url(../../web/images/Spotify_Logo_RGB_Green.png);
		position: absolute;
		height: 3vh;
		width: 5vh;
		left: 0.6vh;
		top: 0.7vh;
		background-repeat: no-repeat;
		background-size: contain;
	  }
	
	  .searchTable {
		width: 100%;
		border-collapse: separate;
		border-spacing: 1px 0.5rem;
	  }

}


@media screen and (orientation: landscape) {

	.searchCard {
		position: relative;
		margin: auto;
		top: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: calc(90% / 3);
		padding: 5px;
		height: 25vw;
		background: rgb(23 26 30);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
		color: #ffffff;
		overflow: hidden;
		border-radius: 7px;
		margin: 0.4vw;
		float:left;
	  }
	  
	  
	  .searchNav {
		position: absolute;
		right: -3px;
		top: -4px;
		z-index: 10;
		background: #427fed;
		border: 1px solid #ffffff;
		height: 2.5vw;
		width: 2.5vw;
		text-align: center;
		font-size: 1.5vw;
		font-weight: bold;
		border-radius: 5px;
		cursor: pointer; /* Zeigt dem Nutzer, dass dieses Element klickbar ist */
		transition: transform 0.05s ease-in-out, background-color 0.05s ease-in-out, color 0.05s ease-in-out;
		will-change: transform, background-color, color; /* Hinweis an den Browser */
		}

		.searchNav:active {
			transform: scale(0.9) ; /* Kombiniere Skalierung und Drehung */
			background-color: #1ED760; /* Ändere Hintergrundfarbe zu einer dunkleren Variante */
			color: #ffffff; /* Ändere die Textfarbe bei Aktivierung */
		}

	  .searchNavbar {
		padding: 0px;
		margin: 0px;
	  }
	  .searchNavbar li {
		position: relative;
		font-size: 1.6vw;
		padding: 0px;
		font-weight: bold;
	  }
	
	  .searchHeader{
		position: absolute;
		font-size: clamp(11px, 1.5vw, 15px);
		bottom: 3.3vw;
		left: 0;
		right: 0;
		text-align: center;
		font-weight: bold;
		color: #427fed;
	  }
	  
	  .searchContent {
		position: absolute;
		font-size: clamp(11px, 1.5vw, 15px);
		text-align: center;
		top: 15.3vw;
		left: 0;
		right: 0;
		line-height: 1.9vw;
		padding: 0.1vw;
	  }
	
	  .searchYear {
		position: absolute;
		font-size: clamp(8px, 1vw, 10px);
		text-align: center;
		bottom: 1vw;
		left: 0;
		right: 0;
	
	  }
	
	  .searchDuration {
		position: absolute;
		font-size: 1.3vw;
		bottom: 1.2vw;
		line-height: 20px;
		left: 17vw;
		margin-top: 1vw;
	
	  }
	
	  .searchImage {
		
		position: absolute;
		width: 11vw;
		height: 11vw;
		top: 3vw;
		left: 0;
		margin: auto;
		right: 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;

	  }

	  .spotifyLogo {
		background-image: url(../../web/images/Spotify_Logo_RGB_Green.png);
		position: absolute;
		height: 3vw;
		width: 5vw;
		left: 0.6vw;
		top: 0.7vw;
		background-repeat: no-repeat;
		background-size: contain;
	  }
	
	  .searchTable {
		width: 100%;
		border-collapse: separate;
		border-spacing: 1px 0.5rem;
	  }

}
  

/* Bar Overview Page */

.container {
	display: grid;
	grid-gap: 10px;  /* Simply adjust this value !*/
	grid-template-columns: repeat(2, 1fr); /* OR grid-template-columns: 1fr 1fr 1fr;*/
	grid-auto-rows: 1fr;
  }
  
  .container>div {
	height: 100%;
  }

h1.barView {
	margin: 0 0 15px 0;

}

/* index */


  .legenden {
	width: 80%;
    margin: auto;
  }

  @media screen and (orientation: landscape) and (min-width: 1200px) {
	.legenden {
		width: 35%;
		margin: auto;
	  }

}



  .legendenTD {
	display: table-cell;
  	vertical-align: middle;
	font-size:clamp(12px, 5vw, 15px);
  }

  .rules {
	width: 90%;
    margin: auto;
  }
  
  /* Password  */




.login__field {
	padding: 20px 0px;	
	position: relative;	
}

.login__icon {
	position: absolute;
	top: 40%;
    left: 15px;
    color: #427fed;
}

.login__input {
	border: none;
	background: none;
	padding: 10px;
	padding-left: 24px;
	font-weight: 700;
	width: 75%;
	transition: .2s;
}

.login__input:active,
.login__input:focus,
.login__input:hover {
	outline: none;
	border-bottom-color: #427fed;
}

.login__submit {
	background: rgba(0, 0, 0, 0);
    font-size: clamp(10px, 5vw, 14px);
    border-radius: 5px;
    border: 1px solid #427fed;
    text-transform: uppercase;
    font-weight: 700;
    align-items: center;
    width: 60%;
    cursor: pointer;
    transition: .2s;
}


.button_section{
	text-align: center;
}


/* votes input  */

.votesInput {
	padding-left: 10%;
    padding-right: 10%;
}

.votesInput__field {
	padding: 1vh;
    position: relative;
    width: 100%;
    height: 7vh;
    margin: auto;	
}

@media screen and (orientation: portrait) {
	.votesInput__field {
		padding: 1vh;
		position: relative;
		width: 100%;
		height: 7vh;
		margin: auto;	
	}

}

@media screen and (orientation: landscape) {
	.votesInput__field {
		padding: 1vw;
		position: relative;
		width: 100%;
		height: 5vw;
		margin: auto;	
	}

}


.votesInput__icon {
	position: absolute;
	top: 40%;
    left: 4vh;
    color: #427fed;
}

.votesInput__input {
	padding-left: 24px;
    font-weight: 700;
    transition: .2s;
    background-color: transparent;
    border-radius: 4px;
    border: solid 1px rgba(255, 255, 255, 0.175);
    color: inherit;
    display: block;
    outline: 0;
    padding: 0 1rem;
    text-decoration: none;
    width: 100%;
	font-size: clamp(14px, 5vw, 16px);
}

.votesInput__input:active,
.votesInput__input:focus,
.votesInput__input:hover {
	outline: none;
}

.votesInput__submit {
	background: rgba(0, 0, 0, 0);
    font-size: clamp(10px, 5vw, 16px);
    margin-top: 30px;
    border-radius: 5px;
    border: 1px solid #427fed;
	text-transform: uppercase;
	font-weight: 700;
	align-items: center;
	/* width: 50%; */
	cursor: pointer;
	transition: .2s;
}


.button__icon {
	margin-left: -12vh;
	color: #427fed;
}


/* Top3Card */
@media screen  and (min-width: 0px) and (max-width: 530px) {
	.top3Card {
		position: relative;
		margin-left: auto;
		margin-right: 0;
		top: 0;
		right: 0.1vh;
		bottom: 0;
		width: 100%;
		height: 17vh;
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
		color: #ffffff;
		margin-top: 5px;
		overflow: hidden;
	  }
	  
	  
	
	  .top3Header{
		position: absolute;
		width: max-content;
		font-size: clamp(11px, 4vh, 12px);
		white-space: nowrap;
		top: 6.7vh;
		left: 6vh;
		font-weight: bold;
		color: #427fed;
		line-height: 0.85em;
		text-transform: inherit;
	  }
	  
	  
	  .top3Content {
		position: absolute;
		font-size: clamp(11px, 4vh, 14px);
		width:50%;
		text-align: left;
		top: 1.4vh;
		line-height: 2vh;
		left: 6vh;
		text-transform: inherit;
	
	  }

	  .top3Album {
		position: absolute;
		font-size: clamp(7px, 3vh, 8px);
		width: 24vh;
		text-align: left;
		top: 8.5vh;
		line-height: 2vh;
		left: 6vh;
		text-transform: inherit;
	
	  }
	
	  .top3Year {
		position: absolute;
		font-size: 1.3vh;
		bottom: 19%;
		line-height: 20px;
		left: 2vh;
		margin-top: 1vw;
	  }
	
	  .top3Duration {
		position: absolute;
		font-size: 1.3vh;
		bottom: 6%;
		line-height: 20px;
		left: 2vh;
		margin-top: 1vw;
	
	  }
	
	  .top3Image {
		position: absolute;
		top: 0;
		right: 0;
		
		width: 16vh;
		height: 100%;
		/* clip-path: polygon(35% 0%, 100% 0, 100% 100%, 8% 100%);  */
		
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		z-index: 20;
	  }
	
	  .top3Ranking {
		position: absolute;
		top: 1vh;
		/* margin: auto; */
		left: -7vw;
		width: 30%;
		height: 90%;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	  }
	  
	  .top1RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(21vh, 1vw, 21vh);
		left: 1.3vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: end;
		color: rgb(255 255 255 / 10%);
	  }

	  .top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(21vh, 1vw, 21vh);
    	left: -2.5vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: end;
		color: rgb(255 255 255 / 10%);
	  }
	
	  .top3Table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 1px 0.5rem;
	  }

	  .top3Voting {
		position: absolute;
		background-image: url(../../web/images/notvoted.png);
		bottom: -1vh;
		left: 4.5vh;
		width: 8vh;
		height: 8vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		font-weight: bold;
		font-size: clamp(11px, 1vh, 14px);
	  }

	  

	/* Current Song Table */
	.currentCard {
		position: relative;
		margin-left: auto;
		margin-right: 0;
		top: 0;
		right: 0.1vh;
		bottom: 0;
		width: 100%;
		height: 10vh;
		background: rgb(36 36 36 / 46%);		
		color: #ffffff;
		margin-top: 5px;
		overflow: hidden;
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 10%, rgba(66, 127, 236, 1) 90%)
	  }
	  
	  
	
	  .currentHeader{
		position: absolute;
		width: max-content;
		top: 5.8vh;
		left: 7vh;
		font-weight: bold;
		text-transform: uppercase;
		color: white;
		font-size: clamp(8px, 5vh, 9px);
		letter-spacing: 0.2rem;
		text-align: left;
	  }
	  
	  
	  .currentContent {		
		margin: 0;
        color: white;
        font-size: clamp(10px, 5vh, 12px);
        letter-spacing: 0.2rem;
        text-align: left;
        top: 1.4vh;
        line-height: 2vh;
        left: 6vh;
        position: absolute;
		margin: 0;
  	
	  }

	  .currentAlbum {
		position: absolute;
		font-size: clamp(7px, 3vh, 8px);
		width: 24vh;
		text-align: left;
		top: 8.5vh;
		line-height: 2vh;
		left: 6vh;
		text-transform: inherit;
	
	  }
	
	  .currentYear {
		position: absolute;
		font-size: 1.3vh;
		bottom: 19%;
		line-height: 20px;
		left: 2vh;
		margin-top: 1vw;
	  }
	
	  .currentDuration {
		position: absolute;
		font-size: 1.3vh;
		bottom: 6%;
		line-height: 20px;
		left: 2vh;
		margin-top: 1vw;
	
	  }
	
	  .currentImage {
		position: absolute;
		top: 0;
		right: 0;
		
		width: 16vh;
		height: 100%;
		/* clip-path: polygon(35% 0%, 100% 0, 100% 100%, 8% 100%);  */
		
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		z-index: 20;
	  }
	
	  .currentRankingText {
		position: absolute;
        left: 1vw;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-family: 'Big Shoulders Stencil Text', cursive;
        letter-spacing: 3px;
        line-height: 1.2;
        text-align: center;
        color: rgb(255 255 255 / 40%);
        font-size: clamp(15px, 4vh, 18px);
	  }

	  .currentTable {
		width: 100%;
		border-collapse: separate;
		border-spacing: 1px 0.5rem;
	  }



}

@media screen  and (min-width: 530px) and (max-width: 841px) {
	.top3Card {
		position: relative;
		margin-left: auto;
		margin-right: 0;
		top: 0;
		right: 0.1vh;
		bottom: 0;
		width: 100%;
		height: 17vh;
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
		color: #ffffff;
		margin-top: 5px;
		overflow: hidden;
	  }
	  
	  
	
	  .top3Header{
		position: absolute;
		width: max-content;
		font-size: clamp(11px, 4vh, 16px);
		white-space: nowrap;
		top: 6.5vh;
		left: 6vh;
		font-weight: bold;
		color: #427fed;
		line-height: 0.85em;
		text-transform: inherit;
	  }
	  
	  
	  .top3Content {
		position: absolute;
		font-size: clamp(13px, 4vh, 18px);
		width: 55%;
		text-align: left;
		top: 1.4vh;
		line-height: 2vh;
		left: 6vh;
		text-transform: inherit;
	
	  }

	  .top3Album {
		position: absolute;
		font-size: clamp(7px, 3vh, 10px);
		width: 24vh;
		text-align: left;
		top: 9vh;
		line-height: 2vh;
		left: 6vh;
		text-transform: inherit;
	
	  }
	
	  .top3Year {
		position: absolute;
		font-size: 1.3vh;
		bottom: 19%;
		line-height: 20px;
		left: 2vh;
		margin-top: 1vw;
	  }
	
	  .top3Duration {
		position: absolute;
		font-size: 1.3vh;
		bottom: 6%;
		line-height: 20px;
		left: 2vh;
		margin-top: 1vw;
	
	  }
	
	  .top3Image {
		position: absolute;
		top: 0;
		right: 0;
		
		width: 16vh;
		height: 100%;
		/* clip-path: polygon(35% 0%, 100% 0, 100% 100%, 8% 100%);  */
		
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		z-index: 20;
	  }
	
	  .top3Ranking {
		position: absolute;
		top: 1vh;
		/* margin: auto; */
		left: -7vw;
		width: 30%;
		height: 90%;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	  }
	  
	  .top1RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(21vh, 1vw, 21vh);
		left: 1.3vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: end;
		color: rgb(255 255 255 / 10%);
	  }

	  .top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(21vh, 1vw, 21vh);
    	left: -2.5vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: end;
		color: rgb(255 255 255 / 10%);
	  }
	
	  .top3Table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 1px 0.5rem;
	  }

	  .top3Voting {
		position: absolute;
		background-image: url(../../web/images/notvoted.png);
		bottom: -1vh;
		left: 4.5vh;
		width: 8vh;
		height: 8vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		font-weight: bold;
		font-size: clamp(11px, 1vh, 14px);
	  }

	  


}

@media screen and (orientation: landscape) and (min-width: 769px) and (max-width: 1099px) {

	.top3Card {
		position: relative;
		margin-left: auto;
		margin-right: 0;
		top: 0;
		right: 0.1vw;
		bottom: 0;
		width: 100%;
		height: 11vw;
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
		color: #ffffff;
		margin-top: 5px;
		overflow: hidden;
	  }

	  .top3Header{
		position: absolute;
		width: max-content;
		font-size: clamp(13px, 4vw, 12px);
		white-space: nowrap;
		top: 3.8vw;
		left: 5vw;
		font-weight: bold;
		color: #427fed;
		line-height: 0.85em;
		text-transform: inherit;
	  }
	  
	  
	  .top3Content {
		position: absolute;
		font-size: clamp(13px, 4.1vw, 16px);
    	width: 65%;
		text-align: left;
		top: 0.5vw;
		line-height: 2vw;
		left: 5vw;
		text-transform: inherit;
	
	  }

	  .top3Album {
		position: absolute;
		font-size: clamp(8px, 2vw, 10px);
		width: 55%;
		text-align: left;
		top: 5.5vw;
		line-height: 2vw;
		left: 5vw;
		text-transform: inherit;
	
	  }
	
	  
	  .top3Image {
		position: absolute;
		top: 0;
		right: 0;
		
		width: 11vw;
		height: 100%;
		/* clip-path: polygon(35% 0%, 100% 0, 100% 100%, 8% 100%);  */
		
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	  }
	
	  .top3Ranking {
		position: absolute;
		top: 1vh;
		/* margin: auto; */
		left: 7vw;
		width: 30%;
		height: 90%;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	  }
	  
	  .top1RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(100px, 30vw, 120px);
		left: 1.5vw;
		top: 0.3vw;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: end;
		color: rgb(255 255 255 / 10%);
	  }

	  .top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(100px, 30vw, 120px);
		left: -1vw;
		top: 0.3vw;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: end;
		color: rgb(255 255 255 / 10%);
	  }
	
	  .top3Table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 1px 0.5rem;
	  }

	  .top3Voting {
		position: absolute;
		background-image: url(../../web/images/notvoted.png);
		bottom: -1vh;
		left: 4vw;
		width: 5vw;
		height: 5vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		font-weight: bold;
		font-size: clamp(11px, 4vw, 12px);
	  }

	  table.mainTable tbody tr {
		/* border: solid 1px #ffffff; */
		border-left: 0;
		border-right: 0;
		line-height: 6vw;
		background-color: rgba(255, 255, 255, 0.00); 
		border-bottom: groove;
		border-width: 3vw;
		border-color: transparent;
		}
	
		table.mainTable tbody tr.dashed{
			border-bottom: 1px dotted;
		}

		table.mainTable tbody tr:first-child {
			background-color: rgba(255, 255, 255, 0.00);
			line-height: 6vw;
			border-bottom: groove;
			border-width: 3vw;
			border-color: transparent;
		}

}

@media screen and (orientation: landscape) and (min-width: 1100px) and (max-width: 1200px) {

	.top3Card {
		position: relative;
		margin-left: auto;
		margin-right: 0;
		top: 0;
		right: 0.1vw;
		bottom: 0;
		width: 100%;
		height: 11vw;
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
		color: #ffffff;
		margin-top: 5px;
		overflow: hidden;
	  }

	  .top3Header{
		position: absolute;
		width: max-content;
		font-size: clamp(13px, 4vw, 17px);
		white-space: nowrap;
		top: 4.8vw;
		left: 5vw;
		font-weight: bold;
		color: #427fed;
		line-height: 0.85em;
		text-transform: inherit;
	  }
	  
	  
	  .top3Content {
		position: absolute;
		font-size: clamp(13px, 4.1vw, 20px);
    	width: 65%;
		text-align: left;
		top: 0.5vw;
		line-height: 2vw;
		left: 5vw;
		text-transform: inherit;
	
	  }

	  .top3Album {
		position: absolute;
		font-size: clamp(8px, 2vw, 13px);
		width: 55%;
		text-align: left;
		top: 6.2vw;
		line-height: 2vw;
		left: 5vw;
		text-transform: inherit;
	
	  }
	
	  
	  .top3Image {
		position: absolute;
		top: 0;
		right: 0;
		
		width: 11vw;
		height: 100%;
		/* clip-path: polygon(35% 0%, 100% 0, 100% 100%, 8% 100%);  */
		
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	  }
	
	  .top3Ranking {
		position: absolute;
		top: 1vh;
		/* margin: auto; */
		left: 7vw;
		width: 30%;
		height: 90%;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	  }
	  
	  .top1RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(100px, 30vw, 175px);
		left: 1.5vw;
		top: 0.3vw;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: end;
		color: rgb(255 255 255 / 10%);
	  }

	  .top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(100px, 30vw, 175px);
		left: -1vw;
		top: 0.3vw;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: end;
		color: rgb(255 255 255 / 10%);
	  }
	
	  .top3Table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 1px 0.5rem;
	  }

	  .top3Voting {
		position: absolute;
		background-image: url(../../web/images/notvoted.png);
		bottom: -1vh;
		left: 4.2vw;
		width: 4vw;
		height: 4vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		font-weight: bold;
		font-size: clamp(11px, 4vw, 12px);
	  }

	  table.mainTable tbody tr {
		/* border: solid 1px #ffffff; */
		border-left: 0;
		border-right: 0;
		line-height: 6vw;
		background-color: rgba(255, 255, 255, 0.00); 
		border-bottom: groove;
		border-width: 3vh;
		border-color: transparent;
		}
	
		table.mainTable tbody tr.dashed{
			border-bottom: 1px dotted;
		}

		table.mainTable tbody tr:first-child {
			background-color: rgba(255, 255, 255, 0.00);
			line-height: 6vw;
			border-bottom: groove;
			border-width: 3vh;
			border-color: transparent;
		}

}

@media screen and (orientation: landscape) and (min-width: 1201px) and (max-width: 1399px) {

	.top3Card {
		position: relative;
		margin-left: auto;
		margin-right: 0;
		top: 0;
		right: 0.1vw;
		bottom: 0;
		width: 100%;
		height: 11vw;
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
		color: #ffffff;
		margin-top: 5px;
		overflow: hidden;
	  }

	  .top3Header{
		position: absolute;
		width: max-content;
		font-size: clamp(13px, 4vw, 17px);
		white-space: nowrap;
		top: 4.8vw;
		left: 5vw;
		font-weight: bold;
		color: #427fed;
		line-height: 0.85em;
		text-transform: inherit;
	  }
	  
	  
	  .top3Content {
		position: absolute;
		font-size: clamp(13px, 4.1vw, 20px);
    	width: 65%;
		text-align: left;
		top: 0.5vw;
		line-height: 2vw;
		left: 5vw;
		text-transform: inherit;
	
	  }

	  .top3Album {
		position: absolute;
		font-size: clamp(8px, 2vw, 13px);
		width: 55%;
		text-align: left;
		top: 6.2vw;
		line-height: 2vw;
		left: 5vw;
		text-transform: inherit;
	
	  }
	
	  
	  .top3Image {
		position: absolute;
		top: 0;
		right: 0;
		
		width: 11vw;
		height: 100%;
		/* clip-path: polygon(35% 0%, 100% 0, 100% 100%, 8% 100%);  */
		
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	  }
	
	  .top3Ranking {
		position: absolute;
		top: 1vh;
		/* margin: auto; */
		left: 7vw;
		width: 30%;
		height: 90%;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	  }
	  
	  .top1RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(100px, 30vw, 175px);
		left: 1.5vw;
		top: 0.3vw;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: end;
		color: rgb(255 255 255 / 10%);
	  }

	  .top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(100px, 30vw, 175px);
		left: -1vw;
		top: 0.3vw;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: end;
		color: rgb(255 255 255 / 10%);
	  }
	
	  .top3Table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 1px 0.5rem;
	  }

	  .top3Voting {
		position: absolute;
		background-image: url(../../web/images/notvoted.png);
		bottom: -1vh;
		left: 4.2vw;
		width: 4vw;
		height: 4vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		font-weight: bold;
		font-size: clamp(11px, 4vw, 12px);
	  }

	  table.mainTable tbody tr {
		/* border: solid 1px #ffffff; */
		border-left: 0;
		border-right: 0;
		line-height: 6vw;
		background-color: rgba(255, 255, 255, 0.00); 
		border-bottom: groove;
		border-width: 3vh;
		border-color: transparent;
		}
	
		table.mainTable tbody tr.dashed{
			border-bottom: 1px dotted;
		}

		table.mainTable tbody tr:first-child {
			background-color: rgba(255, 255, 255, 0.00);
			line-height: 6vw;
			border-bottom: groove;
			border-width: 3vh;
			border-color: transparent;
		}


}

@media screen and (orientation: landscape) and (min-width: 1400px) and (max-width: 1600px) {

	.top3Card {
		position: relative;
		margin-left: auto;
		margin-right: 0;
		top: 0;
		right: 0.1vw;
		bottom: 0;
		width: 100%;
		height: 11vw;
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
		color: #ffffff;
		margin-top: 5px;
		overflow: hidden;
	  }

	  .top3Header{
		position: absolute;
		width: max-content;
		font-size: clamp(13px, 4vw, 17px);
		white-space: nowrap;
		top: 4.8vw;
		left: 5vw;
		font-weight: bold;
		color: #427fed;
		line-height: 0.85em;
		text-transform: inherit;
	  }
	  
	  
	  .top3Content {
		position: absolute;
		font-size: clamp(13px, 4.1vw, 21px);
    	width: 65%;
		text-align: left;
		top: 0.5vw;
		line-height: 2vw;
		left: 5vw;
		text-transform: inherit;
	
	  }

	  .top3Album {
		position: absolute;
		font-size: clamp(8px, 2vw, 13px);
		width: 55%;
		text-align: left;
		top: 6.2vw;
		line-height: 2vw;
		left: 5vw;
		text-transform: inherit;
	
	  }
	
	  
	  .top3Image {
		position: absolute;
		top: 0;
		right: 0;
		
		width: 11vw;
		height: 100%;
		/* clip-path: polygon(35% 0%, 100% 0, 100% 100%, 8% 100%);  */
		
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	  }
	
	  .top3Ranking {
		position: absolute;
		top: 1vh;
		/* margin: auto; */
		left: 7vw;
		width: 30%;
		height: 90%;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	  }
	  
	  .top1RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(100px, 30vw, 200px);
		left: 1.5vw;
		top: 0.3vw;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: end;
		color: rgb(255 255 255 / 10%);
	  }

	  .top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(100px, 30vw, 200px);
		left: -1vw;
		top: 0.3vw;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: end;
		color: rgb(255 255 255 / 10%);
	  }
	
	  .top3Table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 1px 0.5rem;
	  }

	  .top3Voting {
		position: absolute;
		background-image: url(../../web/images/notvoted.png);
		bottom: -1vh;
		left: 4.2vw;
		width: 4vw;
		height: 4vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		font-weight: bold;
		font-size: clamp(11px, 4vw, 14px);
	  }

	  table.mainTable tbody tr {
		/* border: solid 1px #ffffff; */
		border-left: 0;
		border-right: 0;
		line-height: 6vw;
		background-color: rgba(255, 255, 255, 0.00); 
		border-bottom: groove;
		border-width: 3vh;
		border-color: transparent;
		}
	
		table.mainTable tbody tr.dashed{
			border-bottom: 1px dotted;
		}

		table.mainTable tbody tr:first-child {
			background-color: rgba(255, 255, 255, 0.00);
			line-height: 6vw;
			border-bottom: groove;
			border-width: 3vh;
			border-color: transparent;
		}

}

@media screen and (orientation: landscape) and (min-width: 1601px) {

	.top3Card {
		position: relative;
		margin-left: auto;
		margin-right: 0;
		top: 0;
		right: 0.1vw;
		bottom: 0;
		width: 100%;
		height: 11vw;
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
		color: #ffffff;
		margin-top: 5px;
		overflow: hidden;
	  }

	  .top3Header{
		position: absolute;
		width: max-content;
		font-size: clamp(13px, 4vw, 20px);
		white-space: nowrap;
		top: 4.8vw;
		left: 5vw;
		font-weight: bold;
		color: #427fed;
		line-height: 0.85em;
		text-transform: inherit;
	  }
	  
	  
	  .top3Content {
		position: absolute;
		font-size: clamp(13px, 4.1vw, 24px);
    	width: 65%;
		text-align: left;
		top: 0.5vw;
		line-height: 2vw;
		left: 5vw;
		text-transform: inherit;
	
	  }

	  .top3Album {
		position: absolute;
		font-size: clamp(8px, 2vw, 16px);
		width: 55%;
		text-align: left;
		top: 6.2vw;
		line-height: 2vw;
		left: 5vw;
		text-transform: inherit;
	
	  }
	
	  
	  .top3Image {
		position: absolute;
		top: 0;
		right: 0;
		
		width: 11vw;
		height: 100%;
		/* clip-path: polygon(35% 0%, 100% 0, 100% 100%, 8% 100%);  */
		
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	  }
	
	  .top3Ranking {
		position: absolute;
		top: 1vh;
		/* margin: auto; */
		left: 7vw;
		width: 30%;
		height: 90%;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	  }
	  
	  .top1RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(100px, 30vw, 260px);
		left: 1.5vw;
		top: 0.3vw;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: end;
		color: rgb(255 255 255 / 10%);
	  }

	  .top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(100px, 30vw, 260px);
		left: -1vw;
		top: 0.3vw;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: end;
		color: rgb(255 255 255 / 10%);
	  }
	
	  .top3Table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 1px 0.5rem;
	  }

	  .top3Voting {
		position: absolute;
		background-image: url(../../web/images/notvoted.png);
		bottom: -1vh;
		left: 4.2vw;
		width: 4vw;
		height: 4vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		font-weight: bold;
		font-size: clamp(11px, 4vw, 18px);
	  }

	  table.mainTable tbody tr {
		/* border: solid 1px #ffffff; */
		border-left: 0;
		border-right: 0;
		line-height: 6vw;
		background-color: rgba(255, 255, 255, 0.00); 
		border-bottom: groove;
		border-width: 3vh;
		border-color: transparent;
		}
	
		table.mainTable tbody tr.dashed{
			border-bottom: 1px dotted;
		}

		table.mainTable tbody tr:first-child {
			background-color: rgba(255, 255, 255, 0.00);
			line-height: 6vw;
			border-bottom: groove;
			border-width: 3vh;
			border-color: transparent;
		}

}

/* Divider voted */
	.dividerVoted {
		display: flex;
	}
	.dividerVoted:before, .dividerVoted:after {
		content: "";
		flex: 1;
	}
	
	.line {
		align-items: center;
		margin: 1em -1em;
		font-size: clamp(12px, 5vw, 15px);
		color: #9d9d9d;
	}
	.line:before, .line:after {
		height: 1px;
		margin: 0 1em;
	}
	
	.one-line:before, .one-line:after {
		background: #ffffff4d;
	}
	
	.razor:before, .razor:after {
		box-shadow: 0 0.5px 0 black;
	}

	
	/* progress */
	.progress_container {
		width: 100%;
		margin: 0 auto;
	}
	
	.progress-bar-wrapper{
		max-width: 100%;
		height: 0.3vh;
	}
  

  .progressbar {
	width: 100%;
	margin-bottom: 5px;
	background: #2b2b2b77;
	height: 2.4vh;
	overflow: hidden;
	
  }

	/* Container für die Positionierung */
	.progressbar-positioner {
		position: relative;
	}

	/* Textelemente */
	.progressbar-text {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		font-weight: bold;
		color: #ffffff;
		z-index: 2;
		font-size: 1.2vh;
	}

	.progressbar-text.left {
		left: 10px;
	}

	.progressbar-text.right {
		right: 10px;
	}
  
	.progressbar .inner {
	animation: progressbar-countdown;
	/* Placeholder, this will be updated using javascript */
	animation-duration: 40s;
	/* We stop in the end */
	animation-iteration-count: 1;
	/* Stay on pause when the animation is finished finished */
	animation-fill-mode: forwards;
	/* We start paused, we start the animation using javascript */
	animation-play-state: paused;
	/* We want a linear animation, ease-out is standard */
	animation-timing-function: linear;
	height: 1vh;
  }

  @keyframes progressbar-countdown {
	0% 	 {width: 0%;background: #427fed;}
	65% {width: 65%;background: #427fed;}
	68% {width: 68%;background: #ff9e0e;}
	99% {width: 99%;background: #ff9e0e;}
	100% {width: 100%;background: #1ed760;}
  }

  .progressbar .inner5 {
	animation: progressbar-countdown5;
	animation-duration: 40s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-timing-function: linear;
	height: 1vh;
  }

  @keyframes progressbar-countdown5 {
	0% 	 {width: 5%;background: #427fed;}
	65% {width: 65%;background: #427fed;}
	68% {width: 68%;background: #ff9e0e;}
	99% {width: 99%;background: #ff9e0e;}
	100% {width: 100%;background: #1ed760;}
  }

  .progressbar .inner10 {
	animation: progressbar-countdown10;
	animation-duration: 40s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-timing-function: linear;
	height: 1vh;
  }

  
  @keyframes progressbar-countdown10 {
	0% 	 {width: 10%;background: #427fed;}
	65% {width: 65%;background: #427fed;}
	68% {width: 68%;background: #ff9e0e;}
	99% {width: 99%;background: #ff9e0e;}
	100% {width: 100%;background: #1ed760;}
  }

  .progressbar .inner20 {
	animation: progressbar-countdown20;
	animation-duration: 40s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-timing-function: linear;
	height: 1vh;
  }

  
  @keyframes progressbar-countdown20 {
	0% 	 {width: 20%;background: #427fed;}
	65% {width: 65%;background: #427fed;}
	68% {width: 68%;background: #ff9e0e;}
	99% {width: 99%;background: #ff9e0e;}
	100% {width: 100%;background: #1ed760;}
  }

  .progressbar .inner30 {
	animation: progressbar-countdown30;
	animation-duration: 40s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-timing-function: linear;
	height: 1vh;
  }

  
  @keyframes progressbar-countdown30 {
	0% 	 {width: 30%;background: #427fed;}
	65% {width: 65%;background: #427fed;}
	68% {width: 68%;background: #ff9e0e;}
	99% {width: 99%;background: #ff9e0e;}
	100% {width: 100%;background: #1ed760;}
  }

  .progressbar .inner40 {
	animation: progressbar-countdown40;
	animation-duration: 40s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-timing-function: linear;
	height: 1vh;
  }

  
  @keyframes progressbar-countdown40 {
	0% 	 {width: 40%;background: #427fed;}
	65% {width: 65%;background: #427fed;}
	68% {width: 68%;background: #ff9e0e;}
	99% {width: 99%;background: #ff9e0e;}
	100% {width: 100%;background: #1ed760;}
  }

  .progressbar .inner50 {
	animation: progressbar-countdown50;
	animation-duration: 40s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-timing-function: linear;
	height: 1vh;
  }

  @keyframes progressbar-countdown50 {
	0% 	 {width: 50%;background: #427fed;}
	65% {width: 65%;background: #427fed;}
	68% {width: 68%;background: #ff9e0e;}
	99% {width: 99%;background: #ff9e0e;}
	100% {width: 100%;background: #1ed760;}
  }

  .progressbar .inner60 {
	animation: progressbar-countdown60;
	animation-duration: 40s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-timing-function: linear;
	height: 1vh;
  }

  
  @keyframes progressbar-countdown60 {
	0% 	 {width: 60%;background: #427fed;}
	65% {width: 65%;background: #427fed;}
	68% {width: 68%;background: #ff9e0e;}
	99% {width: 99%;background: #ff9e0e;}
	100% {width: 100%;background: #1ed760;}
  }

  .progressbar .inner70 {
	animation: progressbar-countdown70;
	animation-duration: 40s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-timing-function: linear;
	height: 1vh;
  }

  
  @keyframes progressbar-countdown70 {
	0% 	 {width: 70%;background: #ff9e0e;}
	99% {width: 99%;background: #ff9e0e;}
	100% {width: 100%;background: #1ed760;}
  }


  .progressbar .inner75 {
	animation: progressbar-countdown75;
	animation-duration: 40s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-timing-function: linear;
	height: 1vh;
  }

  @keyframes progressbar-countdown75 {
  0% 	 {width: 75%;background: #ff9e0e;}
  99% {width: 99%;background: #ff9e0e;}
  100% {width: 100%;background: #1ed760;}
  }




/* FIREWORK */

.celebration-canvas {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	inset: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 220ms ease, visibility 220ms ease;
	z-index: 100; /* Über anderen Elementen */
	display: none;
  }

  .celebration-canvas.is-active {
	display: block;
	opacity: 1;
	visibility: visible;
  }



/* Table Transition */

.activeMain{
	animation: tableTransition 0.75s;

}

@keyframes tableTransition {
	from {
		opacity: 0;
		transform: rotateX(-10deg);
	}

	to {
		opacity: 1;
		transform: rotateX(0);

	}
}

/* checkButton */

 


.cont {
	width: 60%;
    height: 100%;
    margin: auto;
    margin-bottom: 3vh;
    margin-top: 1vh;
	text-align: center;
}

button {
	border-width: 1.0px;
	width: 19vh;
    height: 4vh;
    border-radius: 15px;
    border: 1px solid #427fed;
    margin: 0;
	margin-top: 1vh;
    }

button > span {
	font-size: clamp(10px, 5vh, 13px);
    color: #FFFFFF;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    }

.imgSubmit {
	position: relative;
    height: 3vh;
    width: 3vh;
    top: 3px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    }


/* Dialog ADD design */

.dialog__slide {
    position: relative; 
}

.dialog__slide img {
	width: 100%;
	max-height: 500px; 
}
@media (min-width: 1200px) {
.dialog__slide img {
	max-height: 900px; } 
}

.dialog__slideContent {
	width: 100%;
    position: relative;
    top: 1vh;
    padding: 2vh 1vh;
    z-index: 5;
    text-align: center;
}

    
@media (max-width: 575px) {
.dialog__slideContent {
	bottom: 60px; } }

/* .dialog__slideContent:after {
	content: "";
    position: absolute;
    width: 93%;
    height: 100%;
    top: 0.4vh;
    left: 2vh;
    clip-path: polygon(58% 0, 64% 6%, 94% 6%, 94% 55%, 100% 64%, 100% 100%, 0 100%, 0 0);
    background: #C91c20;
    z-index: -1; 
} */

.dialog__slideContent:before {
	content: "";
    display: block;
    position: fixed;
    left: -1vh;
    bottom: -1vh;
    width: 40vh;
    height: 40vh;
    background-color: #1ed760;
    clip-path: polygon(58% 0, 65% 6%, 94% 6%, 94% 38%, 100% 43%, 100% 0);
    transform: rotate(180deg);
    z-index: 1;

}

.dialog__slideContent--right {
	display: block;
    position: fixed;
    width: 40vh;
    height: 40vh;
    right: -1vh;
	top: -1vh;
    background-color: #427FEC;
    clip-path: polygon(58% 0, 65% 6%, 94% 6%, 94% 38%, 100% 43%, 100% 0);
    
    z-index: 1;
}

.dialogADD__slideContent--right {
	content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #427fed;
    clip-path: polygon(58% 0, 65% 6%, 94% 6%, 94% 38%, 100% 43%, 100% 0);
    left: 2.1vh;
    top: -4vh;
    z-index: 1;
}
      .dialog__slideContent h1 {
        font-size: 2rem;
        color: #fff;
        font-weight: 300;
        margin-bottom: 20px; }
      .dialog__slideContent p {
        margin-bottom: 2vh; }


/* new button */

.btncontainer {
	width: auto;
	margin: auto;
	margin-top: 4vh;
    margin-bottom: 3vh;
  }

.btn {
	position: relative;
    letter-spacing: 0.25em;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    background: transparent;
    outline: none;
    font-size: clamp(12px, 5vh, 16px);
    font-weight: 600;
    color: #FFFFFF;
  }
  .btn::after, .btn::before {
	content: "";
	position: absolute;
	height: 100%;
	width: 50%;
	transform: skewX(30deg);
	transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 2);
	z-index: -2;
  }
  .btn::before {
	background-color: #1ed760;
    bottom: 1.5vh;
    left: 1rem;
    height: 5vh;
  }
  .btn::after {
	background-color: #427FEC;
    top: 1rem;
    left: 9rem;
    height: 5vh;
  }
  .btn:hover::before, .btn:hover::after {
	top: 0;
	transform: skewx(0deg);
  }
  .btn:hover::after {
	left: 1rem;
	width: 45%;
	border-radius: 2px;
  }
  .btn:hover::before {
	left: 7.75rem;
	width: 52%;
	border-radius: 2px;
  }

  /* btn djlogin 1 */
  
.btn-1center {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 13px;
  }
  
  .btn-1 {
	width: 85%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
  }
  
  .btn-1 a {
	text-decoration: none;
	border: 2px solid #1ED760;
	padding: 15px;
	color: #1ED760;
	text-transform: uppercase;
	letter-spacing: 2px;
	position: relative;
	display: inline-block;
	font-weight: 800;
    color: #1ED760;
  }
  
  span {
	position: relative;
	/* z-index coz when we put bg to before and after this span text will not be visible */
	z-index: 3;
  }
  
  .btn-1 a::before {
	content: "";
	position: absolute;
	top: 5px;
	left: -2px;
	width: calc(100% + 6px);
	/*100% plus double the times left values*/
	height: calc(100% - 10px);
	background-color: #090a0e;
	transition: all 0.5s ease-in-out;
	transform: scaleY(1);
  }
  
  .btn-1 a:hover::before {
	transform: scaleY(0);
  }
  
  .btn-1 a::after {
	content: "";
	position: absolute;
	left: 5px;
	top: -5px;
	width: calc(100% - 10px);
	/*100% plus double the times left values*/
	height: calc(100% + 10px);
	background-color: #090a0e;
	transition: all 0.5s ease-in-out;
	transform: scaleX(1);
  }
  
  .btn-1 a:hover::after{
	transform: scaleX(0);
  }


  /* btn djlogin 2 */
  
.btn-2center {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 13px;
  }
  
  .btn-2 {
	width: 70%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
  }
  
  .btn-2 a {
	text-decoration: none;
	border: 2px solid #1ED760;
	padding: 15px;
	color: #FFFFFF;
	text-transform: uppercase;
	letter-spacing: 2px;
	position: relative;
	display: inline-block;
	font-weight: 800;
    color: #1ED760;
  }
  
  span {
	position: relative;
	/* z-index coz when we put bg to before and after this span text will not be visible */
	z-index: 3;
  }
  
  .btn-2 a::before {
	content: "";
	position: absolute;
	top: 5px;
	left: -2px;
	width: calc(100% + 6px);
	/*100% plus double the times left values*/
	height: calc(100% - 10px);
	background-color: #191c1f;
	transition: all 0.5s ease-in-out;
	transform: scaleY(1);
  }
  
  .btn-2 a:hover::before {
	transform: scaleY(0);
  }
  
  .btn-2 a::after {
	content: "";
	position: absolute;
	left: 5px;
	top: -5px;
	width: calc(100% - 10px);
	/*100% plus double the times left values*/
	height: calc(100% + 10px);
	background-color: #191c1f;
	transition: all 0.5s ease-in-out;
	transform: scaleX(1);
  }
  
  .btn-2 a:hover::after{
	transform: scaleX(0);
  }
  
/* Loading */
.spinner {
	-webkit-animation: rotator 1.4s linear infinite;
			animation: rotator 1.4s linear infinite;
  }
  
  @-webkit-keyframes rotator {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(270deg);
	}
  }
  
  @keyframes rotator {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(270deg);
	}
  }
  .path {
	stroke-dasharray: 187;
	stroke-dashoffset: 0;
	transform-origin: center;
	-webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
			animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
  }
  
  @-webkit-keyframes colors {
	0% {
	  stroke: #427fed;
	}
	25% {
	  stroke: #095aeb;
	}
	50% {
	  stroke: #427fed;
	}
	75% {
	  stroke: #427fed;
	}
	100% {
	  stroke: #095aeb;
	}
  }
  
  @keyframes colors {
	0% {
	  stroke: #427fed;
	}
	25% {
	  stroke: #427fed;
	}
	50% {
	  stroke: #095aeb;
	}
	75% {
	  stroke: #095aeb;
	}
	100% {
	  stroke: #427fed;
	}
  }
  @-webkit-keyframes dash {
	0% {
	  stroke-dashoffset: 187;
	}
	50% {
	  stroke-dashoffset: 46.75;
	  transform: rotate(135deg);
	}
	100% {
	  stroke-dashoffset: 187;
	  transform: rotate(450deg);
	}
  }
  @keyframes dash {
	0% {
	  stroke-dashoffset: 187;
	}
	50% {
	  stroke-dashoffset: 46.75;
	  transform: rotate(135deg);
	}
	100% {
	  stroke-dashoffset: 187;
	  transform: rotate(450deg);
	}
  }

  /* BAR ADMIN */
  .h4BarAdmin{
	font-size: clamp(28px, 5vw, 52px);
    line-height: 1.3;
    letter-spacing: 0.8rem;
    margin: 3vh;
    margin-top: 0vh;
  }

  .h3BarAdmin{
	font-size: clamp(15px, 5vw, 22px);
    margin: 2vh;
	margin-bottom: 4vh;
	text-transform: inherit;
  }

  #pBarAdmin{
	font-size: clamp(14px, 5vw, 18px);
	margin-top: 8vh;
  }


  
  .icon-button {
	padding: 0;
    border: 0;
    background-color: white;
    width: 4vh;
    height: 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.15s ease;
    color: black;
	font-size: clamp(15px, 5vh, 22px);
  }

  .icon-button svg {
	width: 4vh;
	height: 4vh;
  }

  .icon-button:hover, .icon-button:focus {
	background-color: white;
  }

  @keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	 }
  }

  .appcolumn {
	flex: 33.33%;
	padding: 5px;
  }

  .approw {
	display: flex;
  }

  /* Video */

  
@media screen and (orientation: landscape) {
  	.qrvideo{
		height: 45vw;
		margin-bottom: 2vw;
	}
}

@media screen and (orientation: portrait) {
	.qrvideo{
	  height: 45vh;
	  margin-bottom: 2vw;
  	}
}

/* Sizing */

@media screen and (min-width: 1681px) {

	.logo_front{
		width: 10vh;
		margin-top: 1vh;
		margin-left: 1vh;
	}

	.login {
		padding-left: 30%;
		padding-right: 30%;
	}

	.racoon_front{
		width: 30vw;
		margin-top: 2vh;
		opacity: 0.8;
	}

	.spotifyLogoFront{
		width: 10vh; 
		margin-bottom: 1vh;

	}

	.dialog_logo{
		width: 8vh;
        position: absolute;
        left: -4vh;
        top: -1vh;    
		opacity: 0.5;
	}
}

@media screen and (max-width: 1680px) {

	.logo_front{
		width: 10vh;
		margin-top: 1vh;
		margin-left: 1vh;
	}

	.login {
		padding-left: 30%;
		padding-right: 30%;
	}

	.racoon_front{
		width: 50vh;
		margin-top: 2vh;
		opacity: 0.8;
	}

	.spotifyLogoFront{
		width: 10vh; 
		margin-bottom: 1vh;

	}

	.dialog_logo{
		width: 11vh;
		position: absolute;
		left: -1vh;
		top: -2vh;    
		opacity: 0.5;
	}
	
}

@media screen and (max-width: 736px) {

	.logo_front{ 
		width: 10vh;
		margin-top: 1vh;
		margin-left: 1vh;
	}

	.login {
		padding-left: 21%;
		padding-right: 21%;
	}

	.racoon_front{
		width: 35vh;
		margin-top: 2vh;
		opacity: 0.8;
	}

	.spotifyLogoFront{
		width: 10vh; 
		margin-bottom: 1vh;

	}

	.dialog_logo{
		width: 10vh;
		position: absolute;
		left: -1vh;
		top: -2vh;    
		opacity: 0.5;
	}
}

@media screen and (max-width: 480px) {

	.logo_front{
		width: 10vh;
		margin-top: 1vh;
		margin-left: 1vh;
		opacity: 0.5;
	}

	.login {
		padding-left: 14%;
		padding-right: 14%;
	}

	.raconn_front{
		width: 20vh;
		margin-top: 2vh;
		opacity: 0.8;
	}

	.spotifyLogoFront{
		width: 10vh; 
		margin-bottom: 1vh;

	}
	.dialog_logo{
		width: 8vh;
        position: absolute;
        left: 0vh;
        top: -1vh; 
		opacity: 0.5;
	}
}







/* CURRENT & TOP3 Container */

@media screen and (orientation: portrait) {

	.top3Container {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 12vh; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 1.5vh;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
	}

	.top3text {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGtop3 {
		flex: 0 0 15%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGtop3 img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.votingTop3 {
		
		width: 7vh; /* Breite des Voting-Elements */
		height: 8vh; /* Höhe wird automatisch proportional angepasst */
		background-image: url(../../web/images/notvoted.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		color: white; /* Textfarbe, falls erforderlich */
		cursor: pointer; /* Ändert den Cursor, um anzuzeigen, dass es anklickbar ist */
		font-size: clamp(11px, 4vh, 11px);
		margin-bottom: -1.3vh;
	}

	.top3RankingText1 {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(14vh, 3vw, 16vh);
		left: 0.7vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}


	.top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(14vh, 3vw, 16vh);
		left: -0.5vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}
	
	.top3text {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:4vh;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}
	
	.top3text h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 5vh, 11px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 100%;
	}

	.top3text h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vh, 9px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
	}

	.top3text h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 7px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 2.5vh;
	}

	

	/* Neues Spotify-Logo */
	.top3spotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 1.5vh;
		border-bottom: solid 0px;
		margin-bottom: -0.2vh;
	}
	
	.top3spotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}


	/* CURRENT Container */
	.currentContainer {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 10vh; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);		
	}

	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGcurrent {
		flex: 0 0 15%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGcurrent img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.currentRankingText {
		position: absolute;
		left: 1%;
		top: 50%;
		transform: translateY(-50%) rotate(180deg); /* Positioniert den Text vertikal mittig und dreht ihn */
		writing-mode: vertical-rl; /* Ändert die Schriftrichtung von links nach rechts, vertikal */
		font-family: 'Big Shoulders Stencil Text', cursive;
		letter-spacing: 3px; /* Erhöht den Abstand zwischen Buchstaben */
		line-height: 1.2; /* Passt den Zeilenabstand an */
		text-align: center; /* Zentriert den Text horizontal innerhalb des Containers */
		color: rgba(255, 255, 255, 0.3); /* Farbe mit Transparenz */
		font-size: clamp(15px, 4vh, 15px); /* Passt die Schriftgröße dynamisch an */
		text-transform: uppercase;
	}


	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:4vh;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}

	.currenttext h2 /* Titel */{
		margin: 0; 
		color: rgba(255, 255, 255, 0.7);
		font-size: clamp(10px, 5vh, 11px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 82%;
		
	}

	.currenttext h4 /* Interpret */ {
		margin: 0; 
		color: rgba(255, 255, 255, 0.7);
		font-size: clamp(8px, 5vh, 9px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
	}

	.currenttext h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 7px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 2.8vh;
	}

	/* Neues Spotify-Logo */
	.currentspotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 2vh;
		border-bottom: solid 0px;
		margin-bottom: -0.5vh;
	}

	.currentspotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}


	/* CURRENT Container */
	.currentContainer2 {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 10vh; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(-121deg, rgba(255, 255, 255, 0) 21%, rgba(66, 127, 236, 1) 125%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);        
	}

	/* Bild (erstes Element im Container) */
	.IMGcurrent2 {
		flex: 0 0 15%; /* Nimmt genau 15% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: center; /* Bild im Container zentrieren */
	}

	.IMGcurrent2 img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}

	/* Textbox (mittleres Element im Container) */
	.currenttext2 {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		padding-left: 2vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		color: white;
		left: 0vh;
	}

	.currenttext2 h2 /* Titel */ {
		margin: 0; 
		color: rgba(255, 255, 255, 0.7);
		font-size: clamp(10px, 5vh, 11px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 90%;
	}

	.currenttext2 h4 /* Interpret */ {
		margin: 0; 
		color: rgba(255, 255, 255, 0.7);
		font-size: clamp(8px, 5vh, 9px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
		width: 90%;
	}

	.currenttext2 h5 /* Jahr und Dauer */ {
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 7px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 2.8vh;
		width: 90%;
	}

	

	/* Ranking Text (letztes Element im Container) */
	.currentRankingText2 {
		position: absolute;
		right: 1%; /* Statt left auf right setzen, um es ganz rechts zu positionieren */
		top: 50%;
		transform: translateY(-50%) rotate(180deg); /* Positioniert den Text vertikal mittig und dreht ihn */
		writing-mode: vertical-rl; /* Ändert die Schriftrichtung von links nach rechts, vertikal */
		font-family: 'Big Shoulders Stencil Text', cursive;
		letter-spacing: 3px; /* Erhöht den Abstand zwischen Buchstaben */
		line-height: 1.2; /* Passt den Zeilenabstand an */
		text-align: center; /* Zentriert den Text horizontal innerhalb des Containers */
		color: rgba(255, 255, 255, 0.3); /* Farbe mit Transparenz */
		font-size: clamp(15px, 4vh, 18px); /* Passt die Schriftgröße dynamisch an */
		text-transform: uppercase;
	}





}

@media screen and (orientation: portrait)  and (min-width: 0px) and (max-width: 530px) {

	.top3Container {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 12vh; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 1.5vh;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
	}

	.top3text {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGtop3 {
		flex: 0 0 15%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGtop3 img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.votingTop3 {
		
		width: 7vh; /* Breite des Voting-Elements */
		height: 8vh; /* Höhe wird automatisch proportional angepasst */
		background-image: url(../../web/images/notvoted.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		color: white; /* Textfarbe, falls erforderlich */
		cursor: pointer; /* Ändert den Cursor, um anzuzeigen, dass es anklickbar ist */
		font-size: clamp(11px, 4vh, 11px);
		margin-bottom: -1.3vh;
	}

	.top3RankingText1 {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(14vh, 3vw, 16vh);
		left: -0.5vh;
		top: -1.7vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}


	.top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(14vh, 3vw, 16vh);
		left: 0vh;
		top: -1.5vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}
	
	.top3text {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:4vh;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}
	
	.top3text h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 5vh, 11px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 100%;
	}

	.top3text h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vh, 9px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
	}

	.top3text h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 7px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 2.5vh;
	}

	

	/* Neues Spotify-Logo */
	.top3spotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 1.5vh;
		border-bottom: solid 0px;
		margin-bottom: -0.2vh;
	}
	
	.top3spotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}


	/* CURRENT Container */
	.currentContainer {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 10vh; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);		
	}

	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGcurrent {
		flex: 0 0 15%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGcurrent img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.currentRankingText {
		position: absolute;
		left: 1%;
		top: 50%;
		transform: translateY(-50%) rotate(180deg); /* Positioniert den Text vertikal mittig und dreht ihn */
		writing-mode: vertical-rl; /* Ändert die Schriftrichtung von links nach rechts, vertikal */
		font-family: 'Big Shoulders Stencil Text', cursive;
		letter-spacing: 3px; /* Erhöht den Abstand zwischen Buchstaben */
		line-height: 1.2; /* Passt den Zeilenabstand an */
		text-align: center; /* Zentriert den Text horizontal innerhalb des Containers */
		color: rgba(255, 255, 255, 0.3); /* Farbe mit Transparenz */
		font-size: clamp(15px, 4vh, 15px); /* Passt die Schriftgröße dynamisch an */
		text-transform: uppercase;
	}


	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:4vh;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}

	.currenttext h2 /* Titel */{
		margin: 0; 
		color: rgba(255, 255, 255, 0.7);
		font-size: clamp(10px, 5vh, 11px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 82%;
		
	}

	.currenttext h4 /* Interpret */ {
		margin: 0; 
		color: rgba(255, 255, 255, 0.7);
		font-size: clamp(8px, 5vh, 9px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
	}

	.currenttext h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 7px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 2.8vh;
	}

	/* Neues Spotify-Logo */
	.currentspotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 2vh;
		border-bottom: solid 0px;
		margin-bottom: -0.5vh;
	}

	.currentspotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}


	/* CURRENT Container */
	.currentContainer2 {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 10vh; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(-121deg, rgba(255, 255, 255, 0) 21%, rgba(66, 127, 236, 1) 125%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);        
	}

	/* Bild (erstes Element im Container) */
	.IMGcurrent2 {
		flex: 0 0 15%; /* Nimmt genau 15% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: center; /* Bild im Container zentrieren */
	}

	.IMGcurrent2 img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}

	/* Textbox (mittleres Element im Container) */
	.currenttext2 {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		padding-left: 2vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		color: white;
		left: 0vh;
	}

	.currenttext2 h2 /* Titel */ {
		margin: 0; 
		color: rgba(255, 255, 255, 0.7);
		font-size: clamp(10px, 5vh, 11px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 90%;
	}

	.currenttext2 h4 /* Interpret */ {
		margin: 0; 
		color: rgba(255, 255, 255, 0.7);
		font-size: clamp(8px, 5vh, 9px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
		width: 90%;
	}

	.currenttext2 h5 /* Jahr und Dauer */ {
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 7px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 2.8vh;
		width: 90%;
	}

	

	/* Ranking Text (letztes Element im Container) */
	.currentRankingText2 {
		position: absolute;
		right: 1%; /* Statt left auf right setzen, um es ganz rechts zu positionieren */
		top: 50%;
		transform: translateY(-50%) rotate(180deg); /* Positioniert den Text vertikal mittig und dreht ihn */
		writing-mode: vertical-rl; /* Ändert die Schriftrichtung von links nach rechts, vertikal */
		font-family: 'Big Shoulders Stencil Text', cursive;
		letter-spacing: 3px; /* Erhöht den Abstand zwischen Buchstaben */
		line-height: 1.2; /* Passt den Zeilenabstand an */
		text-align: center; /* Zentriert den Text horizontal innerhalb des Containers */
		color: rgba(255, 255, 255, 0.3); /* Farbe mit Transparenz */
		font-size: clamp(15px, 4vh, 18px); /* Passt die Schriftgröße dynamisch an */
		text-transform: uppercase;
	}





}

@media screen and (orientation: portrait)  and (min-width: 530px) and (max-width: 930px) {

	.top3Container {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 13vh; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 1vh;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
	}

	.top3text {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGtop3 {
		flex: 0 0 15%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGtop3 img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.votingTop3 {
		
		width: 10vh; /* Breite des Voting-Elements */
		height: 8vh; /* Höhe wird automatisch proportional angepasst */
		background-image: url(../../web/images/notvoted.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		color: white; /* Textfarbe, falls erforderlich */
		cursor: pointer; /* Ändert den Cursor, um anzuzeigen, dass es anklickbar ist */
		font-size: clamp(11px, 4vh, 12px);
		margin-bottom: -0.3vh;
	}

	.top3RankingText1 {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(15vh, 3vw, 16vh);
		left: 0.7vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}


	.top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(15vh, 3vw, 16vh);
		left: -0.5vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}
	
	.top3text {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:5vh;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}
	
	.top3text h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 5vh, 11px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 100%;
	}

	.top3text h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vh, 9px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
	}

	.top3text h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 7px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 2.5vh;
	}

	

	/* Neues Spotify-Logo */
	.top3spotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 1.5vh;
		border-bottom: solid 0px;
		margin-bottom: -0.2vh;
	}
	
	.top3spotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}


	/* CURRENT Container */
	.currentContainer {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 10vh; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);		
	}

	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGcurrent {
		flex: 0 0 15%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGcurrent img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.currentRankingText {
		position: absolute;
		left: 1%;
		top: 50%;
		transform: translateY(-50%) rotate(180deg); /* Positioniert den Text vertikal mittig und dreht ihn */
		writing-mode: vertical-rl; /* Ändert die Schriftrichtung von links nach rechts, vertikal */
		font-family: 'Big Shoulders Stencil Text', cursive;
		letter-spacing: 3px; /* Erhöht den Abstand zwischen Buchstaben */
		line-height: 1.2; /* Passt den Zeilenabstand an */
		text-align: center; /* Zentriert den Text horizontal innerhalb des Containers */
		color: rgba(255, 255, 255, 0.3); /* Farbe mit Transparenz */
		font-size: clamp(15px, 4vh, 18px); /* Passt die Schriftgröße dynamisch an */
		text-transform: uppercase;
	}


	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:7vh;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}

	.currenttext h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 5vh, 11px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 84%;
		
	}

	.currenttext h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vh, 9px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
	}

	.currenttext h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 7px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 2.8vh;
	}

	/* Neues Spotify-Logo */
	.currentspotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 2vh;
		border-bottom: solid 0px;
		margin-bottom: -0.5vh;
	}

	.currentspotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}


}

@media screen and (orientation: portrait)  and (min-width: 931px) {

	.top3Container {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 10vh; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 1vh;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
	}

	.top3text {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGtop3 {
		flex: 0 0 15%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGtop3 img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.votingTop3 {
		
		width: 10vh; /* Breite des Voting-Elements */
		height: 8vh; /* Höhe wird automatisch proportional angepasst */
		background-image: url(../../web/images/notvoted.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		color: white; /* Textfarbe, falls erforderlich */
		cursor: pointer; /* Ändert den Cursor, um anzuzeigen, dass es anklickbar ist */
		font-size: clamp(11px, 4vh, 12px);
		margin-bottom: -0.3vh;
	}

	.top3RankingText1 {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(15vh, 3vw, 16vh);
		left: 0.7vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}


	.top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(15vh, 3vw, 16vh);
		left: -0.5vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}
	
	.top3text {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:5vh;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}
	
	.top3text h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 5vh, 18px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 100%;
	}

	.top3text h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vh, 15px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
	}

	.top3text h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 11px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 2.5vh;
	}

	

	/* Neues Spotify-Logo */
	.top3spotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 1.5vh;
		border-bottom: solid 0px;
		margin-bottom: -0.2vh;
	}
	
	.top3spotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}


	/* CURRENT Container */
	.currentContainer {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 10vh; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);		
	}

	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGcurrent {
		flex: 0 0 16%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGcurrent img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.currentRankingText {
		position: absolute;
        left: 1.3rem;
        top: 0.01rem;
        font-size: 1.8rem !important;
        transform: translateY(-50%) rotate(180deg);
        writing-mode: vertical-rl;
        font-family: 'Big Shoulders Stencil Text', cursive;
        letter-spacing: 6px !important;
        line-height: 1.1 !important;
        text-align: center;
        color: rgba(255, 255, 255, 0.3) !important;
        font-size: clamp(15px, 4vh, 18px);
        text-transform: uppercase;
	}


	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:5vh;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}

	.currenttext h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 5vh, 18px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 84%;
		
	}

	.currenttext h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vh, 15px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
	}

	.currenttext h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 11px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 2.8vh;
	}

	/* Neues Spotify-Logo */
	.currentspotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 2vh;
		border-bottom: solid 0px;
		margin-bottom: -0.5vh;
	}

	.currentspotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}


}

@media screen and (orientation: landscape) {
	.top3Container {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 11vw; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 1vh;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
	}

	.top3text {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vw; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGtop3 {
		flex: 0 0 15%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGtop3 img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.votingTop3 {
		
		width: 10vw; /* Breite des Voting-Elements */
		height: 8vw; /* Höhe wird automatisch proportional angepasst */
		background-image: url(../../web/images/notvoted.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		color: white; /* Textfarbe, falls erforderlich */
		cursor: pointer; /* Ändert den Cursor, um anzuzeigen, dass es anklickbar ist */
		font-size: clamp(11px, 4vw, 12px);
		margin-bottom: -0.3vw;
	}

	.top3RankingText1 {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(13vw, 3vw, 16vw);
		left: 0.7vw;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}


	.top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(13vw, 3vw, 16vw);
		left: -0.5vw;
		top: 0.3vw;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}
	
	.top3text {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:7vw;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}
	
	.top3text h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 2vh, 13px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 100%;
	}

	.top3text h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vw, 9px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vw;
	}

	.top3text h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vw, 8px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vw;
		margin-left: 2.5vw;
	}

	

	/* Neues Spotify-Logo */
	.top3spotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 1.5vw;
		border-bottom: solid 0px;
		margin-bottom: -0.2vw;
	}
	
	.top3spotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}


	/* CURRENT Container */
	.currentContainer {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 10vw; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);		
	}

	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vw; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGcurrent {
		flex: 0 0 15%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGcurrent img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.currentRankingText {
		position: absolute;
		left: 1%;
		top: 50%;
		transform: translateY(-50%) rotate(180deg); /* Positioniert den Text vertikal mittig und dreht ihn */
		writing-mode: vertical-rl; /* Ändert die Schriftrichtung von links nach rechts, vertikal */
		font-family: 'Big Shoulders Stencil Text', cursive;
		letter-spacing: 3px; /* Erhöht den Abstand zwischen Buchstaben */
		line-height: 1.2; /* Passt den Zeilenabstand an */
		text-align: center; /* Zentriert den Text horizontal innerhalb des Containers */
		color: rgba(255, 255, 255, 0.3); /* Farbe mit Transparenz */
		font-size: clamp(15px, 4vw, 18px); /* Passt die Schriftgröße dynamisch an */
		text-transform: uppercase;
	}


	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:7vw;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}

	.currenttext h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 5vw, 12px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 90%;
		
	}

	.currenttext h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vw, 9px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vw;
		margin-bottom: 0.5vw;
		width: 90%;
	}

	.currenttext h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vw, 7px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vw;
		margin-left: 2.8vw;
		width: 90%;
	}

	/* Neues Spotify-Logo */
	.currentspotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 2vw;
		border-bottom: solid 0px;
		margin-bottom: -0.5vw;
	}

	.currentspotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}
}

@media screen and (orientation: landscape) and (min-width: 769px) and (max-width: 1099px) {
	.top3Container {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 11vw; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 1vh;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
	}

	.top3text {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vw; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGtop3 {
		flex: 0 0 15%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGtop3 img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.votingTop3 {
		
		width: 10vw; /* Breite des Voting-Elements */
		height: 8vw; /* Höhe wird automatisch proportional angepasst */
		background-image: url(../../web/images/notvoted.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		color: white; /* Textfarbe, falls erforderlich */
		cursor: pointer; /* Ändert den Cursor, um anzuzeigen, dass es anklickbar ist */
		font-size: clamp(11px, 4vw, 12px);
		margin-bottom: -0.3vw;
	}

	.top3RankingText1 {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(13vw, 3vw, 16vw);
		left: 0.7vw;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}


	.top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(13vw, 3vw, 16vw);
		left: -0.5vw;
		top: 0.3vw;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}
	
	.top3text {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:4vw;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}
	
	.top3text h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 2vh, 13px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 100%;
	}

	.top3text h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vw, 11px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vw;
	}

	.top3text h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vw, 8px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vw;
		margin-left: 2.5vw;
	}

	

	/* Neues Spotify-Logo */
	.top3spotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 1.5vw;
		border-bottom: solid 0px;
		margin-bottom: -0.2vw;
	}
	
	.top3spotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}


	/* CURRENT Container */
	.currentContainer {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 10vw; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);		
	}

	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vw; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGcurrent {
		flex: 0 0 15%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGcurrent img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.currentRankingText {
		position: absolute;
		left: 1%;
		top: 50%;
		transform: translateY(-50%) rotate(180deg); /* Positioniert den Text vertikal mittig und dreht ihn */
		writing-mode: vertical-rl; /* Ändert die Schriftrichtung von links nach rechts, vertikal */
		font-family: 'Big Shoulders Stencil Text', cursive;
		letter-spacing: 3px; /* Erhöht den Abstand zwischen Buchstaben */
		line-height: 1.2; /* Passt den Zeilenabstand an */
		text-align: center; /* Zentriert den Text horizontal innerhalb des Containers */
		color: rgba(255, 255, 255, 0.3); /* Farbe mit Transparenz */
		font-size: clamp(15px, 4vw, 18px); /* Passt die Schriftgröße dynamisch an */
		text-transform: uppercase;
	}


	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:5vw;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}

	.currenttext h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 5vw, 12px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 90%;
		
	}

	.currenttext h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vw, 11px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vw;
		margin-bottom: 0.5vw;
		width: 90%;
	}

	.currenttext h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vw, 7px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vw;
		margin-left: 2.8vw;
		width: 90%;
	}

	/* Neues Spotify-Logo */
	.currentspotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 2vw;
		border-bottom: solid 0px;
		margin-bottom: -0.5vw;
	}

	.currentspotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}
}

@media screen and (orientation: landscape) and (min-width: 1100px) and (max-width: 1399px) {
	.top3Container {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 10vw; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 2vh;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
	}

	.top3text {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGtop3 {
		flex: 0 0 15%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGtop3 img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.votingTop3 {
		
		width: 10vh; /* Breite des Voting-Elements */
		height: 8vh; /* Höhe wird automatisch proportional angepasst */
		background-image: url(../../web/images/notvoted.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		color: white; /* Textfarbe, falls erforderlich */
		cursor: pointer; /* Ändert den Cursor, um anzuzeigen, dass es anklickbar ist */
		font-size: clamp(11px, 4vh, 11px);
		margin-bottom: -0.3vh;
	}

	.top3RankingText1 {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(12vw, 2vw, 18vw);
		left: 0.7vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}


	.top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(12vw, 2vw, 18vw);
		left: -0.5vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}
	
	.top3text {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:4vw;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}
	
	.top3text h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 5vh, 15px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 100%;
	}

	.top3text h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vh, 12px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
	}

	.top3text h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 8px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 2.5vh;
	}

	

	/* Neues Spotify-Logo */
	.top3spotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 1.5vh;
		border-bottom: solid 0px;
		margin-bottom: -0.2vh;
	}
	
	.top3spotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}


	/* CURRENT Container */
	.currentContainer {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 7vw; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 2vw;
		margin-bottom: 2vw;
		align-items: center; /* Zentriert den Inhalt vertikal */
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);		
	}

	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGcurrent {
		flex: 0 0 15%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGcurrent img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.currentRankingText {
		position: absolute;
		left: 1%;
		top: 50%;
		transform: translateY(-50%) rotate(180deg); /* Positioniert den Text vertikal mittig und dreht ihn */
		writing-mode: vertical-rl; /* Ändert die Schriftrichtung von links nach rechts, vertikal */
		font-family: 'Big Shoulders Stencil Text', cursive;
		letter-spacing: 3px; /* Erhöht den Abstand zwischen Buchstaben */
		line-height: 1.2; /* Passt den Zeilenabstand an */
		text-align: center; /* Zentriert den Text horizontal innerhalb des Containers */
		color: rgba(255, 255, 255, 0.3); /* Farbe mit Transparenz */
		font-size: clamp(15px, 4vh, 18px); /* Passt die Schriftgröße dynamisch an */
		text-transform: uppercase;
	}


	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:7vh;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}

	.currenttext h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 5vh, 13px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 90%;
		
	}

	.currenttext h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vh, 11px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
		width: 90%;
	}

	.currenttext h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 7px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 2.8vh;
		width: 90%;
	}

	/* Neues Spotify-Logo */
	.currentspotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 2vh;
		border-bottom: solid 0px;
		margin-bottom: -0.5vh;
	}

	.currentspotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}
}

@media screen and (orientation: landscape) and (min-width: 1399px) and (max-width: 1600px) {
	.top3Container {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 8vw; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 1vw;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
	}

	.top3text {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGtop3 {
		flex: 0 0 13%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGtop3 img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.votingTop3 {
		
		width: 11vh; /* Breite des Voting-Elements */
		height: 8vh; /* Höhe wird automatisch proportional angepasst */
		background-image: url(../../web/images/notvoted.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		color: white; /* Textfarbe, falls erforderlich */
		cursor: pointer; /* Ändert den Cursor, um anzuzeigen, dass es anklickbar ist */
		font-size: clamp(11px, 4vh, 14px);
		margin-bottom: 0vh;
	}

	.top3RankingText1 {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(10vw, 3vw, 15vw);
		left: 0.7vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}


	.top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(10vw, 3vw, 15vw);
		left: -0.5vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}
	
	.top3text {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:4vw;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}
	
	.top3text h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 5vh, 15px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 100%;
	}

	.top3text h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vh, 12px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
	}

	.top3text h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 8px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 2.5vh;
	}

	

	/* Neues Spotify-Logo */
	.top3spotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 1.5vh;
		border-bottom: solid 0px;
		margin-bottom: -0.2vh;
	}
	
	.top3spotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}


	/* CURRENT Container */
	.currentContainer {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 6vw; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 11%, rgba(66, 127, 236, 1) 146%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);		
	}

	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGcurrent {
		flex: 0 0 15%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGcurrent img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.currentRankingText {
		position: absolute;
		left: 1%;
		top: 50%;
		transform: translateY(-50%) rotate(180deg); /* Positioniert den Text vertikal mittig und dreht ihn */
		writing-mode: vertical-rl; /* Ändert die Schriftrichtung von links nach rechts, vertikal */
		font-family: 'Big Shoulders Stencil Text', cursive;
		letter-spacing: 3px; /* Erhöht den Abstand zwischen Buchstaben */
		line-height: 1.2; /* Passt den Zeilenabstand an */
		text-align: center; /* Zentriert den Text horizontal innerhalb des Containers */
		color: rgba(255, 255, 255, 0.3); /* Farbe mit Transparenz */
		font-size: clamp(15px, 4vh, 18px); /* Passt die Schriftgröße dynamisch an */
		text-transform: uppercase;
	}


	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:4vw;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}

	.currenttext h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 5vh, 15px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 90%;
		
	}

	.currenttext h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vh, 11px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
		width: 90%;
	}

	.currenttext h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 7px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 2.8vh;
		width: 90%;
	}

	/* Neues Spotify-Logo */
	.currentspotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 2vh;
		border-bottom: solid 0px;
		margin-bottom: -0.5vh;
	}

	.currentspotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}




	
}


@media screen and (orientation: landscape) and (min-width: 1601px) {
	.top3Container {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 10vh; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 2vh;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		background: rgb(36 36 36 / 46%);
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
		border: 1px solid #ffffff2e;
	}

	.top3text {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 9vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGtop3 {
		flex: 0 0 12%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGtop3 img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.votingTop3 {
		
		width: 16vh; /* Breite des Voting-Elements */
		height: 12vh; /* Höhe wird automatisch proportional angepasst */
		background-image: url(../../web/images/notvoted.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		color: white; /* Textfarbe, falls erforderlich */
		cursor: pointer; /* Ändert den Cursor, um anzuzeigen, dass es anklickbar ist */
		font-size: clamp(11px, 4vh, 11px);
		margin-bottom: -0.3vh;
	}

	.top3RankingText1 {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(21vh, 26vw, 26vh);
		left: 2.3vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}


	.top3RankingText {
		font-family: 'Big Shoulders Stencil Text', cursive;
		position: absolute;
		font-size: clamp(21vh, 26vw, 26vh);
		left: 0.5vh;
		top: 0.3vh;
		height: 100%;
		display: flex;
		align-items: center;
		color: rgb(255 255 255 / 9%);
	}
	
	.top3text {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:3vh;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}
	
	.top3text h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 5vh, 16px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 100%;
	}

	.top3text h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vh, 14px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
	}

	.top3text h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 9px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 3.5vh;
	}

	

	/* Neues Spotify-Logo */
	.top3spotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 2.5vh;
		border-bottom: solid 0px;
		margin-bottom: -0.2vh;
	}
	
	.top3spotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}


	/* CURRENT Container */
	.currentContainer {
		position: relative; /* Bezugspunkt für absolute Positionierung festlegen */
		display: flex;
		width: 100%;
		height: 13vh; /* Höhe des Containers bleibt festgelegt */
		background: linear-gradient(121deg, rgba(255, 255, 255, 0) 22%, rgba(66, 127, 236, 1) 90%);
		transition: all 500ms ease-in;
		transition-delay: 1s;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		align-items: center; /* Zentriert den Inhalt vertikal */
		box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);		
	}

	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz ein */
		padding-left: 2vh; /* Optionaler Abstand zum linken Rand */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.IMGcurrent {
		flex: 0 0 15%; /* Nimmt genau 30% der Breite des Containers ein */
		height: 100%;
		display: flex;
		align-items: center; /* Zentriert das Bild vertikal */
		justify-content: flex-end; /* Schiebt das Bild nach rechts */
	}

	.IMGcurrent img {
		height: 100%; /* Das Bild nimmt die volle Höhe des Containers ein */
		width: auto; /* Breite wird proportional zur Höhe skaliert, um Verzerrungen zu vermeiden */
		object-fit: cover; /* Passt das Bild an, um den sichtbaren Bereich zu füllen */
	}


	.currentRankingText {
		position: absolute;
		left: 1.3rem;
        top: 0.01rem;
        font-size: 2.5rem !important;
		transform: translateY(-50%) rotate(180deg); /* Positioniert den Text vertikal mittig und dreht ihn */
		writing-mode: vertical-rl; /* Ändert die Schriftrichtung von links nach rechts, vertikal */
		font-family: 'Big Shoulders Stencil Text', cursive;
		letter-spacing: 3px; /* Erhöht den Abstand zwischen Buchstaben */
		line-height: 1.2; /* Passt den Zeilenabstand an */
		text-align: center; /* Zentriert den Text horizontal innerhalb des Containers */
		color: rgba(255, 255, 255, 0.3); /* Farbe mit Transparenz */
		font-size: clamp(15px, 4vh, 14px); /* Passt die Schriftgröße dynamisch an */
		text-transform: uppercase;
	}


	.currenttext {
		flex: 1; /* Nimmt den restlichen Platz im Container ein */
		position: relative;
		color: white;
		display: flex;
		left:7vh;
		flex-direction: column; /* Elemente innerhalb von textbois vertikal anordnen */
		justify-content: center; /* Vertikale Zentrierung der Inhalte */

	}

	.currenttext h2 /* Titel */{
		margin: 0; 
		color: white;
		font-size: clamp(10px, 5vh, 14px);
		letter-spacing: 0.2rem;
		text-align: left;
		width: 90%;
		
	}

	.currenttext h4 /* Interpret */ {
		margin: 0; 
		color: white;
		font-size: clamp(8px, 5vh, 11px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0.5vh;
		width: 90%;
	}

	.currenttext h5 /*Jahr und Dauer */ { 
		margin: 0; 
		color: rgba(255, 255, 255, 0.3);
		font-size: clamp(7px, 5vh, 8px);
		letter-spacing: 0.2rem;
		text-align: left;
		margin-top: 0.1vh;
		margin-left: 3.8vh;
		width: 90%;
	}

	/* Neues Spotify-Logo */
	.currentspotify-logo {
		position: absolute;
		bottom: 0vh;
		width: 2vh;
		border-bottom: solid 0px;
		margin-bottom: -0.5vh;
	}

	.currentspotify-logo img {
		width: 100%; /* Passt die Bildgröße an den Container an */
		height: 100%;
		object-fit: contain; /* Beibehaltung des Seitenverhältnisses des Logos */
	}
}
	

/* Kreis Progress */



@media screen and (orientation: portrait){
	.circle-progress-border {
		position: relative;
		width: 10vh;
		height: 10vh;
	}

	.countdown-label {
		font-size: 1vh; /* Schriftgröße für 'Zeit zu Voten' */
		color: rgb(255 255 255 / 38%);
		position: relative;
		line-height: 1vh;
		white-space: nowrap; /* Verhindert Zeilenumbrüche */
	}

	.countdown-text {
		font-size: 2vh;
		font-weight: bold;
		color: #fff;
		opacity: 0; /* Start mit unsichtbarem Text */
		transition: opacity 0.5s ease; /* Übergangseffekt */
	}

	.countdown-complete {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 1.3vh;
		line-height: 1.4vh;
		font-weight: bold;
		color: #1ed760; /* Farbe des Textes */
		text-align: center;
		transition: opacity 0.5s ease;
		opacity: 0; /* Anfangs ausgeblendet */
	}
	
}

@media screen and (orientation: landscape){
	.circle-progress-border {
		position: relative;
		width: 8vw;
		height: 8vw;
	}

	.countdown-label {
		font-size: clamp(7px, 1vw, 16px); /* Schriftgröße für 'Zeit zu Voten' */
		color: rgb(255 255 255 / 38%);
		position: relative;
		line-height: 1vw;
		white-space: nowrap; /* Verhindert Zeilenumbrüche */
	}

	.countdown-text {
		font-size: clamp(7px, 2vw, 22px);
		font-weight: bold;
		color: #fff;
		opacity: 0; /* Start mit unsichtbarem Text */
		transition: opacity 0.5s ease; /* Übergangseffekt */
	}

	.countdown-complete {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: clamp(11px, 1vw, 16px);
		line-height: 1.0vw;
		font-weight: bold;
		color: #1ed760; /* Farbe des Textes */
		text-align: center;
		transition: opacity 0.5s ease;
		opacity: 0; /* Anfangs ausgeblendet */
	}

}

#progressCircle {
    transform: rotate(-90deg); /* Startpunkt oben */
    width: 100%;
    height: 100%;
}

.circle-progress-border svg {
    position: absolute;
    top: 0;
    left: 0;
}

.base-circle {
    fill: none;
    stroke: #ffffffba; /* Weißer Rand für den abgelaufenen Bereich */
    stroke-width: 1;
}

.progress-circle {
    fill: none;
    stroke: #427FEC; /* Anfangsfarbe Blau */
    stroke-width: 10;
    stroke-linecap: round;
    transform: rotate(0deg);
    transform-origin: center;
	stroke-width: 5;
}

.countdown-container {
	position: absolute;
    top: 55%; /* Positioniert den Container bei 55% der Höhe */
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    transition: opacity 0.5s ease;
    z-index: 1; /* Z-Index hinzugefügt */
}





/* Transition-Effekte für die Texte */
.countdown-container, #countdownComplete {
    transition: opacity 0.5s ease;
}



.hidden {
    opacity: 0;
    pointer-events: none; /* Verhindert Interaktion mit ausgeblendeten Elementen */
}

.visible {
    opacity: 1;
    pointer-events: auto; /* Stellt sicher, dass sichtbare Elemente interaktiv sind */
}

.circle-progress-border.no-before::before {
    display: none !important;
}

/* Divider Current und Top */

.dividerCurrent {
    width: 50%; /* Die Breite der Linie ist 50% des Bildschirms */
    max-width: 50%; /* Maximale Breite bleibt bei 50% */
    height: 2px; /* Höhe der Linie */
    margin: 20px auto; /* Zentriere die Linie und füge Abstand oben/unten hinzu */
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #888 50%, rgba(0, 0, 0, 0) 100%); /* Sanftes Verblassen an den Enden */
	margin-top: 2vh;
    margin-bottom: -1vh;
}




#password.dj-login-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 0.5rem;
    text-align: center;
}

.dj-login-badge {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(66, 127, 236, 0.6);
    border-radius: 999px;
    background: rgba(66, 127, 236, 0.12);
    color: #8cb4ff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
}

#password h5 {
    font-size: clamp(20px, 3vw, 30px);
    color: #ffffff;
    margin-bottom: 0.8rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
}

.dj-login-steps {
    display: grid;
    gap: 0.9rem;
    margin: 0 auto 1.5rem;
    text-align: left;
}

.dj-login-step {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0.9rem;
    align-items: start;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(66, 127, 236, 0.06) 100%);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}

.dj-login-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(66, 127, 236, 0.75);
    background: rgba(66, 127, 236, 0.18);
    color: #a9c8ff;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08rem;
	align-self: center;
}

.dj-login-step strong {
    display: block;
    margin-bottom: 0.2rem;
    color: #ffffff;
    font-size: 0.92rem;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
}

.dj-login-step p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.92rem;
    line-height: 1.55;
}

.login {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 360px;
    margin: 0 auto;
}

.login__field {
    padding: 0;
    margin-bottom: 1rem;
}

.login__icon {
    top: 50%;
    transform: translateY(-50%);
    left: 18px;
    color: #427fed;
    font-size: 1rem;
	z-index: 10;
}

.login__input {
    width: 100%;
    padding: 0 1rem 0 3rem;
    height: 56px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 10px;
    background: rgba(7, 10, 18, 0.35);
    backdrop-filter: blur(4px);
    font-size: 1rem;
    letter-spacing: 0.04rem;
    text-align: left;
	padding-left: 4.2rem;
}

.login__input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.login__input:focus {
    border-color: rgba(66, 127, 236, 0.9);
    box-shadow: 0 0 0 4px rgba(66, 127, 236, 0.12);
}

.login__submit {
    width: 60% !important;
    min-height: 28px;
    border-radius: 10px;
    border: 1px solid #98b5cb1f;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.32rem;
    font-family: inherit;
    background: #2c3239;
}

.login__submit:hover {
    background: linear-gradient(180deg, rgba(66,127,236,0.26) 0%, rgba(66,127,236,0.14) 100%);
    transform: translateY(-1px);
}

.login__submit .button__icon {
    margin-left: -12rem !important;
    color: #6ea0ff;
}

.dj-session-dashboard {
    max-width: 980px;
    margin: 0 auto;
}

.dj-session-hero {
    text-align: center;
    margin-bottom: 1.1rem;
}

.dj-session-hero__badge {
    display: inline-block;
    margin-top: 2.4rem;
    margin-bottom: 0.65rem;
    padding: 0.32rem 0.8rem;
    border: 1px solid rgba(66, 127, 236, 0.58);
    border-radius: 999px;
    background: rgba(66, 127, 236, 0.12);
    color: #93b9ff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
}

.dj-session-hero__title {
    margin: 0 0 0.55rem 0;
    color: #ffffff;
    font-size: clamp(24px, 4.3vw, 38px);
    letter-spacing: 0.16rem;
    text-transform: uppercase;
}

.dj-session-hero__lead {
    max-width: 680px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1.6;
}

.dj-session-summary {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0.75rem;
    align-items: stretch;
    margin-bottom: 0.95rem;
}

.dj-session-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.dj-session-metrics--stacked {
    grid-template-columns: 1fr;
    margin-bottom: 0;
}

.dj-session-dashboard > #dividerCurrent {
    display: block !important;
    width: 72%;
    max-width: 72%;
    margin-top: 4rem;
    margin-bottom: 1rem;
}

.dj-session-metric {
    padding: 0.8rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(66, 127, 236, 0.06) 100%);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
    text-align: center;
}

.dj-session-metric__label {
    display: block;
    margin-bottom: 0.3rem;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
}

.dj-session-metric__value {
    display: block;
    color: #ffffff;
    font-size: clamp(13px, 2vw, 17px);
    letter-spacing: 0.06rem;
}

.dj-session-panel {
    padding: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.dj-session-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.dj-session-panel__eyebrow {
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
}

.dj-session-panel__link {
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04rem;
    text-decoration: none;
}

.dj-session-track {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0.85rem;
    align-items: center;
}

.dj-session-track--no-art {
    grid-template-columns: 1fr;
}

.dj-session-track__art {
    width: 100px;
    height: 100px;
    /* border-radius: 14px; */
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dj-session-track__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dj-session-track__meta h3 {
    margin-bottom: 0.25rem;
    color: #ffffff;
    font-size: clamp(16px, 2vw, 19px);
    text-transform: none;
    line-height: 1.3;
	letter-spacing: 0.2rem !important;
}

.dj-session-track__meta p {
    margin-bottom: 0.25rem !important;;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.45;
    font-size: 0.92rem;
	margin-top: 0.25rem !important;
}

.dj-session-track__details {
    color: rgba(255, 255, 255, 0.58) !important;
    font-size: 0.82rem;
}

.dj-session-listing {
    padding: 0.95rem 0.95rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16);
	margin-top: 4rem;
}

.dj-session-listing__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    margin-bottom: 0.7rem;
}

.dj-session-listing__eyebrow {
    display: block;
    margin-bottom: 0.3rem;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
}

.dj-session-listing__header h3 {
    margin-bottom: 0.2rem;
    color: #ffffff;
}

.dj-session-listing__header p {
    max-width: 100%;
    margin-top: 0vh !important;
    margin-bottom: 0.15rem;
    color: rgba(255, 255, 255, 0.68);
    text-align: center;
    font-size: 0.92rem;
}

.dj-session-empty {
    padding: 1rem 0.85rem 0.9rem;
    border: 1px dashed rgba(66, 127, 236, 0.4);
    border-radius: 18px;
    background: rgba(66, 127, 236, 0.06);
    text-align: center;
}

.dj-session-empty__image {
    max-width: 120px;
    margin: 0 auto 0.35rem;
}

.dj-session-empty h6 {
    color: #9ec0ff;
    margin-bottom: 0.4rem;
}

.dj-session-empty p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.72);
}

.dj-session-table-wrap {
    overflow-x: hidden;
}

#mainTableAdmin {
    table-layout: fixed;
}

#mainTableAdmin td:last-child img {
    max-width: 35px;
    width: 56px !important;
}

.dj-session-track__art img[src$="DJfy_sound_white_djfy.png"] {
    object-fit: contain;
    padding: 0.85rem;
    opacity: 0.75;
}

@media screen and (min-width: 737px) {
    #mainTableAdmin td {
        font-size: clamp(11px, 1.4vw, 18px);
    }

    #mainTableAdmin tbody tr,
    #mainTableAdmin tbody tr:first-child {
        line-height: 7.2vh;
    }

#mainTableAdmin td img.mainProfile {
        width: 72%;
    }
}

.advice-dialog {
    max-width: 920px;
    margin: 0 auto;
}

.advice-dialog__badge {
    display: inline-block;
    margin-top: 0.8rem;
    margin-bottom: 0.9rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(66, 127, 236, 0.58);
    border-radius: 999px;
    background: rgba(66, 127, 236, 0.12);
    color: #93b9ff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
}

.advice-dialog__title {
    margin-bottom: 0.8rem;
}

.advice-dialog__lead {
    max-width: 720px;
    margin: 0 auto 1.5rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
}

.advice-dialog__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
	margin-bottom: 4vh;
}

.advice-tip {
    padding: 1.2rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(66, 127, 236, 0.06) 100%);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
    text-align: left;
}

.advice-tip__index {
    display: inline-block;
    margin-bottom: 0.55rem;
    color: #93b9ff;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
}

.advice-tip h3 {
    margin-bottom: 0.5rem;
    color: #ffffff;
    font-size: 1.2rem;
    letter-spacing: 0.04rem;
    text-transform: none;
}

.advice-tip p,
.advice-tip li {
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.65;
}

.advice-tip__list {
    margin: 0.8rem 0 0 1.1rem;
	font-size: clamp(12px, 5vw, 15px);

}

.advice-tip__warning {
    margin-top: 0.8rem;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    background: rgba(255, 91, 91, 0.08);
    border: 1px solid rgba(255, 91, 91, 0.22);
    color: #ffb1b1 !important;
    font-weight: 700;
}

.addsong-studio {
    max-width: 920px;
    margin: 0 auto;
}

.addsong-studio__brand {
    margin-bottom: 0.55rem;
    opacity: 0.86;
}

.addsong-studio__badge {
    display: inline-block;
    margin-top: 0.2rem;
    margin-bottom: 0.8rem;
    padding: 0.32rem 0.72rem;
    border: 1px solid rgba(66, 127, 236, 0.42);
    border-radius: 999px;
    background: rgba(66, 127, 236, 0.12);
    color: #93b9ff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14rem;
    text-transform: uppercase;
}

.addsong-studio__badge_green {
    display: inline-block;
    margin-top: 0.2rem;
    margin-bottom: 0.8rem;
    padding: 0.32rem 0.72rem;
    border: 1px solid rgba(30, 215, 96, 0.42);
    border-radius: 999px;
    background: rgba(30, 215, 96, 0.12);
    color: #1ED760;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14rem;
    text-transform: uppercase;
}

.addsong-studio__intro {
    max-width: 430px;
    margin: 0 auto 1rem;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.96rem;
    line-height: 1.65;
    text-align: center;
}

.addsong-studio__grid {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.addsong-studio__panel {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(66, 127, 236, 0.07) 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(8px);
}

.addsong-studio__panel--search {
    position: relative;
    width: min(100%, 540px);
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    text-align: left;
    overflow: visible;
}

.addsong-studio__results-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.1rem;
    margin-bottom: 0.45rem;
}

.addsong-studio__results-head.is-empty {
    display: none;
}

.addsong-studio__results-head h3 {
    margin-bottom: 0;
    color: #ffffff;
    font-size: 1rem;
    letter-spacing: 0.04rem;
    text-transform: none;
}

.addsong-studio__search-shell {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 3.2rem;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(66, 127, 236, 0.1) 0%, rgba(30, 215, 96, 0.06) 100%), rgba(23, 28, 37, 0.92);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}

.addsong-studio__search-icon {
    position: absolute;
    top: 50%;
    left: 1.45rem;
    color: rgba(255, 255, 255, 0.42);
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 1.25rem;
    z-index: 10;
}

.addsong-studio__input {
    height: 2.1rem;
    padding: 0 1.1rem 0 3.05rem !important;
    border: 0px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    /* background: rgb(27 38 55); */
    color: #ffffff;
    font-size: 1rem;
    /* box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); */
    width: 100%;
}

.addsong-studio__input::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.addsong-studio__input:focus {
    border-color: rgba(30, 215, 96, 0.48);
    /* box-shadow: 0 0 0 1px rgba(30, 215, 96, 0.28), 0 12px 28px rgba(30, 215, 96, 0.06);
    background: rgba(8, 12, 16, 0.86); */
}

.addsong-studio__loader {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.addsong-studio__results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
    min-height: 260px;
	margin-bottom: 2rem;
}

.addsong-studio__results:empty {
    align-content: center;
}

.addsong-studio__results.is-empty {
    display: block;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 2rem;
    padding: 0.2rem 0;
}

.addsong-studio__results.is-empty::after {
    content: "";
    display: block;
    max-width: 420px;
    margin: 0.2rem auto 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
}

@media screen and (min-width: 1200px) {
    #addsong.addsong-studio-page {
        width: 100%;
    }

    #addsong.addsong-studio-page .addsong-studio {
        max-width: 100%;
    }

    #addsong.addsong-studio-page .addsong-studio__intro {
        font-size: clamp(15px, 1vw, 18px);
        max-width: 100%;
    }

    #addsong.addsong-studio-page .addsong-studio__input,
    #addsong.addsong-studio-page .searchContent {
        font-size: clamp(15px, 1vw, 18px);
    }

    #addsong.addsong-studio-page .addsong-studio__grid {
        display: block;
    }

    #addsong.addsong-studio-page .addsong-studio__panel--search {
        width: 60%;
		justify-self: center;
		margin-bottom: 3rem;
    }

    #addsong.addsong-studio-page .addsong-studio__results.is-empty::after {
        max-width: 100%;
    }

    #addsong.addsong-studio-page .addsong-studio__results {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    #addsong.addsong-studio-page .searchHeader {
        font-size: clamp(14px, 0.9vw, 16px);
    }

    #addsong.addsong-studio-page .searchYear {
        font-size: clamp(12px, 0.8vw, 14px);
    }

    #addsong.addsong-studio-page .searchCard {
        min-height: 300px !important;
    }

	#addsong.addsong-studio-page .searchNav {
		width: 2.5rem !important;
		height: 2.5rem !important;

	}
	#addsong.addsong-studio-page .searchCard__spotifyLink img {
		height: 50% !important;
		
	}
	#addsong.addsong-studio-page .searchImage {
		margin-top: 2.5rem !important;
	}
}

#addsong.addsong-studio-page .searchCard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    min-height: 318px;
    margin: 0;
    padding: 0;
    float: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(10, 13, 18, 0.94) 0%, rgba(17, 23, 31, 0.96) 100%);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

#addsong.addsong-studio-page .searchCard::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(66, 127, 236, 0.04) 100%);
    pointer-events: none;
}

#addsong.addsong-studio-page .searchCard__media {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 150px;
    padding: 0.9rem 0.9rem 0;
    overflow: hidden;
}

#addsong.addsong-studio-page .searchCard__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--card-art);
    background-position: center;
    background-size: cover;
    filter: blur(28px);
    transform: scale(1.16);
    opacity: 0.5;
}

#addsong.addsong-studio-page .searchCard__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 11, 15, 0.14) 0%, rgba(19, 24, 35, 0.48) 58%, #0d1218 100%);
}

#addsong.addsong-studio-page .searchCard__spotifyLink {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 24px;
    border-bottom: none;
    opacity: 0.96;
}

#addsong.addsong-studio-page .searchCard__spotifyLink img {
    display: block;
    height: 60%;
    width: auto;
    object-fit: contain;
}

#addsong.addsong-studio-page .searchCard__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.5rem 1rem 0;
    text-align: center;
}

#addsong.addsong-studio-page .searchImage,
#addsong.addsong-studio-page .searchContent,
#addsong.addsong-studio-page .searchHeader,
#addsong.addsong-studio-page .searchYear,
#addsong.addsong-studio-page .searchNav {
    position: relative;
    inset: auto;
    z-index: 1;
}

#addsong.addsong-studio-page .searchImage {
    z-index: 1;
    width: 116px;
    height: 116px;
    margin-top: 1.5rem;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

#addsong.addsong-studio-page .searchContent {
    max-width: 100%;
    margin-bottom: 0;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

#addsong.addsong-studio-page .searchHeader {
    color: #427FEC;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
}

#addsong.addsong-studio-page .searchYear {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: center;
}

#addsong.addsong-studio-page .searchNav {
   	position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    margin: 0;
    padding: 0;
    border: 1px solid #ffffff4a;
    border-radius: 6px;
    background: #00000000;
    color: #ffffff !important;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 -4px 25px rgb(255 255 255 / 25%);
    padding-right: 0.4rem;
    padding-top: 0.4rem;
}


#addsong.addsong-studio-page .searchNav:hover {
    background: rgba(80, 139, 245, 0.96);
    border-color: rgba(166, 199, 255, 0.5);
}

#addsong.addsong-studio-page .searchNav:active {
    transform: scale(0.96);
    background: rgba(56, 120, 235, 0.96);
    color: #ffffff;
}

@media screen and (max-width: 736px) {
    .addsong-studio__results-head {
        flex-direction: column;
		align-items: center;
        margin-top: 4rem !important;
    }

    .addsong-studio__intro {
        max-width: 320px;
        font-size: 0.92rem;
		margin-bottom: 2vh !important;
    }

    #addsong.addsong-studio-page .searchCard {
        min-height: 250px;
		border-color: #ffffff4a;
    }

    #addsong.addsong-studio-page .searchImage {
        width: 115px;
        height: 115px;
    }

    #addsong.addsong-studio-page .searchNav {
        width: 3rem;
        height: 2.5rem;
    }
}

.action-dialog,
.config-dialog {
    max-width: 920px;
    margin: 0 auto;
}

.action-dialog__badge {
    display: inline-block;
    margin-top: 0.8rem;
    margin-bottom: 0.9rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(66, 127, 236, 0.58);
    border-radius: 999px;
    background: rgba(66, 127, 236, 0.12);
    color: #93b9ff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
}

.action-dialog__title {
    margin-bottom: 0.8rem;
}

.action-dialog__lead {
    max-width: 720px;
    margin: 0 auto 1.4rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
}

.action-dialog__panel {
    max-width: 720px;
    margin: 0 auto 1.4rem;
    padding: 1.1rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(66, 127, 236, 0.06) 100%);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
    text-align: left;
}

.action-dialog__panel h3 {
    margin-bottom: 0.45rem;
    color: #ffffff;
    font-size: 1rem;
    text-transform: none;
	letter-spacing: 0.2rem !important;
}

.action-dialog__panel p {
    margin-bottom: 0.4rem;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.65;
}

.action-dialog__panel p:last-child {
    margin-bottom: 0;
}

.config-dialog__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
}

.config-card {
    padding: 1.2rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(66, 127, 236, 0.06) 100%);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
    text-align: left;
	margin-bottom: 1rem;
}

.config-card h3 {
    margin-bottom: 0.45rem;
    color: #ffffff;
    font-size: 1rem;
    text-transform: none;
	letter-spacing: 0.2rem;
}

.config-card p {
    margin-bottom: 0.9rem;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.65;
}

.config-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.config-card__actions .login__submit {
    width: 100% !important;
    margin: 0;
}

@media screen and (min-width: 1200px) {
    #config .config-dialog__grid {
        align-items: stretch;
    }

    #config .config-card {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        height: 100%;
    }

    #config .config-card > form,
    #config .config-card > .votesInput {
        align-self: end;
        margin-bottom: 0;
    }

    #config .config-card > .button_section,
    #config .config-card > .config-card__actions {
        align-self: end;
        margin-top: 1rem;
    }

    #config .config-card > .button_section .login__submit,
    #config .config-card > .config-card__actions .login__submit {
        height: 100%;
    }
}

.spotify-connect-card {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.spotify-connect-card__badge {
    display: inline-block;
    margin-top: 1.2rem;
    margin-bottom: 1rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(30, 215, 96, 0.38);
    border-radius: 999px;
    background: rgba(30, 215, 96, 0.1);
    color: #8df2b2;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
}

.spotify-connect-card__title {
    margin: 0 0 1rem 0;
    color: #ffffff;
    font-size: clamp(28px, 5vw, 46px);
    letter-spacing: 0.16rem;
    text-transform: uppercase;
}

.spotify-connect-card__lead {
    max-width: 640px;
    margin: 0 auto 1.4rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.75;
}

.spotify-connect-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(30, 215, 96, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
}

.spotify-connect-card__status-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: #1ED760;
    box-shadow: 0 0 0 0 rgba(30, 215, 96, 0.5);
    animation: spotifyConnectPulse 1.8s infinite;
}

.spotify-connect-card__cta {
    margin-bottom: 2rem;
    padding: 1.4rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(30, 215, 96, 0.08) 100%);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}

.spotify-connect-card__buttonwrap {
    width: 100%;
}

.spotify-connect-card__hint {
    margin: 1rem 0 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
    line-height: 1.6;
}

.spotify-connect-card__permissions {
    padding: 1.3rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(6px);
    text-align: left;
}

.spotify-connect-card__permissions h3 {
    margin-bottom: 0.6rem;
    color: #ffffff;
    font-size: 0.95rem;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.spotify-connect-card__permissions p {
    margin-bottom: 0.9rem;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.93rem;
    line-height: 1.65;
}


.spotify-connect-card__permission-list {
    letter-spacing: 0.1rem;
	font-size: clamp(12px, 5vw, 14px);
	margin-bottom: 1vh;
	margin-top: 2vh;
}

.spotify-connect-card__permission-list li {
    line-height: 1.875;
    letter-spacing: 0.1rem;
    font-size: clamp(12px, 5vh, 14px) !important;
    margin-bottom: 1vh;
    margin-top: 1%;
	color: rgba(255, 255, 255, 0.74);
}




.guest-lobby {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.guest-lobby__badge {
    display: inline-block;
    margin-top: 1.2rem;
    margin-bottom: 1rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(66, 127, 236, 0.58);
    border-radius: 999px;
    background: rgba(66, 127, 236, 0.12);
    color: #93b9ff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
}

.guest-lobby__title {
    margin: 0 0 1rem 0;
    color: #ffffff;
    font-size: clamp(20px, 6vw, 41px);
    letter-spacing: 0.16rem;
    text-transform: uppercase;
}

.guest-lobby__lead {
    max-width: 640px;
    margin: 0 auto 1.4rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(15px, 2.4vw, 18px);
    line-height: 1.75;
}

.guest-lobby__status {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 2rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
	margin-top: 3vh;
}

.guest-lobby__status-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: #427fed;
    box-shadow: 0 0 0 0 rgba(66, 127, 236, 0.65);
    animation: guestLobbyPulse 1.8s infinite;
}

.guest-lobby__mascot {
    display: block;
    width: min(100%, 340px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.2rem;
}

.guest-lobby__info-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto 2rem;
}

.guest-lobby__panel {
    padding: 1.2rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(66, 127, 236, 0.06) 100%);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
    text-align: left;
}

.guest-lobby__panel h3 {
    margin-bottom: 0.55rem;
    color: #ffffff;
    font-size: 0.95rem;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
	justify-self: center;
}

.guest-lobby__panel p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.95rem;
    line-height: 1.65;
}

.guest-lobby__brand {
    margin-top: 0.25rem;
	margin-bottom: 1vh;
	opacity: 50%;
}

.guest-lobby__footer {
    margin-top: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    line-height: 1.65;
}

.bar-admin-login-card,
.bar-admin-dashboard {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.bar-admin-login-card__badge,
.bar-admin-dashboard__badge {
    display: inline-block;
    margin-top: 0.8rem;
    margin-bottom: 1rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(66, 127, 236, 0.58);
    border-radius: 999px;
    background: rgba(66, 127, 236, 0.12);
    color: #93b9ff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
}

.bar-admin-login-card__title,
.bar-admin-dashboard__title {
    margin: 0 0 1rem 0;
    color: #ffffff;
    font-size: clamp(28px, 5vw, 44px);
    letter-spacing: 0.16rem;
    text-transform: uppercase;
}

.bar-admin-login-card__lead,
.bar-admin-dashboard__lead {
    max-width: 680px;
    margin: 0 auto 1.6rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.75;
}

.bar-admin-login-card__form {
    max-width: 540px;
    margin: 0 auto 1.8rem;
}

.bar-admin-login-card__form .login__submit {
    width: 100%;
}

.bar-admin-login-card__info-grid {
    display: grid;
    gap: 1rem;
}

.bar-admin-login-card__info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bar-admin-login-card__panel {
    padding: 1.2rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(66, 127, 236, 0.06) 100%);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
    text-align: left;
}

.bar-admin-login-card__panel h3 {
    margin-bottom: 0.55rem;
    color: #ffffff;
    font-size: 0.95rem;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.bar-admin-login-card__panel p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.95rem;
    line-height: 1.65;
	margin-top: 1vh !important;
}

.bar-admin-dashboard__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.bar-admin-dashboard__metric {
    padding: 1.2rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(66, 127, 236, 0.06) 100%);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
}

.bar-admin-dashboard__metric {
    text-align: left;
    min-height: 174px;
}

.bar-admin-dashboard__metric-label {
    display: inline-block;
    margin-bottom: 0.65rem;
    color: #8df2b2;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
}

.bar-admin-dashboard__metric-value {
    display: block;
    color: #ffffff;
    font-size: clamp(18px, 2.3vw, 24px);
    line-height: 1.25;
}

.bar-admin-dashboard__metric-copy {
    margin: 0.75rem 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    line-height: 1.65;
}

.bar-admin-inactive {
    color: rgba(255, 255, 255, 0.68);
    text-align: center;
}

.bar-admin-note {
    margin-top: 1rem !important;
    margin-bottom: 3rem !important;
}

.bar-admin-otp-form {
    max-width: 420px;
    margin: 0 auto;
}

#new #button_section,
#remove #button_section,
#qr #button_section,
#logout #button_section {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
	justify-items: anchor-center;
}

#new .login__submit,
#remove .login__submit,
#qr .login__submit,
#logout .login__submit {
    width: 100%;
}

#qr #qrimage {
    width: min(100%, 320px);
    /* border-radius: 18px; */
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

@keyframes guestLobbyPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(66, 127, 236, 0.55);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(66, 127, 236, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(66, 127, 236, 0);
    }
}

@keyframes spotifyConnectPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(30, 215, 96, 0.45);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(30, 215, 96, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(30, 215, 96, 0);
    }
}

.config-card-baradmin {
    padding: 1.2rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(66, 127, 236, 0.06) 100%);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
    text-align: left;
    margin-bottom: 3rem;
	width: 60%;
	justify-self: center;
}

@media screen and (max-width: 736px) {
    
	.config-card-baradmin {
		
		width: 90%;
	}
	
	.dj-session-summary {
        grid-template-columns: 1fr;
    }

    .dj-session-metrics--stacked {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dj-session-dashboard > #dividerCurrent {
        width: 100%;
        max-width: 100%;
		margin-top: 3rem !important;
        margin-bottom: -1rem !important;
    }

    .dj-session-track {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .dj-session-track__art {
        margin: 0 auto;
    }

    .dj-session-panel--current {
        position: relative;
        overflow: hidden;
        padding: 0;
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(10, 13, 18, 0.94) 0%, rgba(17, 23, 31, 0.96) 100%);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
    }

    .dj-session-panel--current::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(66, 127, 236, 0.04) 100%);
        pointer-events: none;
    }

    .dj-session-panel--current .dj-session-panel__header {
        position: relative;
        z-index: 2;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 0.9rem 0.9rem 0;
        text-align: left;
    }

    .dj-session-panel--current .dj-session-panel__eyebrow {
        color: #8df2b2;
        font-size: 0.66rem;
        letter-spacing: 0.16rem;
    }

    .dj-session-panel--current .dj-session-panel__link {
        border-bottom: none;
        color: rgba(255, 255, 255, 0.86);
        font-size: 0.72rem;
    }

    .dj-session-panel--current .dj-session-track {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 0 1rem 1rem;
        text-align: center;
    }

    .dj-session-panel--current .dj-session-track__art {
        width: 116px;
        height: 116px;
        margin-top: 0.55rem;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
        background: rgba(255, 255, 255, 0.05);
    }

    .dj-session-panel--current .dj-session-track__meta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        padding-top: 0.8rem;
    }

    .dj-session-panel--current .dj-session-track__meta h3 {
        margin-bottom: 0;
        font-size: clamp(17px, 5vw, 19px);
        line-height: 1.35;
        text-align: center;
        letter-spacing: 0.04rem !important;
    }

    .dj-session-panel--current .dj-session-track__meta p {
        margin: 0 !important;
        text-align: center;
    }

    .dj-session-panel--current .dj-session-track__details {
        color: rgba(255, 255, 255, 0.62) !important;
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .dj-session-panel__header,
    .dj-session-listing__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .dj-session-listing__header p {
        text-align: center;
    }

    
	.spotify-connect-card__permission-list li {
		line-height: 1.875;
		letter-spacing: 0.1rem;
		font-size: clamp(10px, 5vh, 11px) !important;
		margin-bottom: 1vh;
		margin-top: 1%;
	}

    .spotify-connect-card__permissions {
        text-align: center;
    }

    .spotify-connect-card__permission-list {
        text-align: left;
		margin-top: 2vh;
		
    }

    .guest-lobby__info-grid {
        grid-template-columns: 1fr;
    }

    .guest-lobby__panel {
        text-align: center;
    }

    .bar-admin-login-card__info-grid {
        grid-template-columns: 1fr;
    }

    .bar-admin-login-card__panel {
        text-align: center;
    }

    .bar-admin-dashboard__metrics {
        grid-template-columns: 1fr;
    }

    .bar-admin-dashboard__metric {
        text-align: center;
    }

    .advice-dialog__grid {
        grid-template-columns: 1fr;
    }

    .config-dialog__grid {
        grid-template-columns: 1fr;
    }

    .config-card__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .dj-login-step {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .dj-login-step__number {
        margin: 0 auto;
    }

    .login__submit {
        width: 100%;
    }

	.advice-tip__list {
    margin: 0.8rem 0 0 1.1rem;
    font-size: clamp(12px, 5vw, 14px);
}
}

/* Guest Queue */

#activeMain .guest-voting-board {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

#activeMain #currentContainer {
    width: 100%;
}

#activeMain #currentSongCard {
    position: relative;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) 10rem;
    align-items: center;
    gap: 0.95rem;
    width: 100%;
    height: 10rem;
    max-height: 10rem;
    /* border: 1px solid rgba(255, 255, 255, 0.14); */
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(32, 63, 122, 0.98) 0%, rgba(49, 88, 161, 0.96) 52%, rgba(18, 37, 59, 0.98) 100%);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    isolation: isolate;
}

#activeMain #currentSongCard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 8, 12, 0.48) 0%, rgba(5, 8, 12, 0.12) 16%, rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

#activeMain .currentSongCard__rail {
    position: relative;
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.18rem 0.75rem 0.3rem;
    /* border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(7, 11, 17, 0.72) 0%, rgba(7, 11, 17, 0.34) 100%); */
}

#activeMain .currentSongCard__railLabel {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    color: rgba(255, 255, 255, 0.20);
    font-family: 'Big Shoulders Stencil Text', cursive;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18rem !important;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    transform: translate(-50%, -50%) rotate(-90deg);
    pointer-events: none;
}

#activeMain .currentSongCard__meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    padding: 0.85rem 0;
}

#activeMain .currentSongCard__title,
#activeMain .currentSongCard__artistLink,
#activeMain .currentSongCard__album,
#activeMain .currentSongCard__details {
    margin: 0;
    max-width: 100%;
    text-align: left;
    overflow-wrap: anywhere;
}

#activeMain .currentSongCard__title {
    color: #ffffff;
    font-size: clamp(1.15rem, 1.9vw, 2rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
}

#activeMain .currentSongCard__artistLink {
    display: inline-flex;
    align-items: center;
    margin-top: 0.32rem;
    color: #cbdcff;
    font-size: clamp(0.82rem, 1.15vw, 0.98rem);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    text-decoration: none;
}

#activeMain .currentSongCard__artistLink:hover,
#activeMain .currentSongCard__artistLink:focus-visible {
    color: #ffffff;
}

#activeMain .currentSongCard__album,
#activeMain .currentSongCard__details {
    color: rgba(255, 255, 255, 0.58);
    font-size: clamp(0.68rem, 0.9vw, 0.82rem);
    font-weight: 700;
    line-height: 1.34;
    letter-spacing: 0.11rem;
    text-transform: uppercase;
}

#activeMain .currentSongCard__album {
    margin-top: 0.62rem;
}

#activeMain .currentSongCard__details {
    margin-top: 0.08rem;
}

#activeMain .currentSongCard__cover {
    position: relative;
    z-index: 1;
    align-self: stretch;
    width: 10rem;
    height: 10rem;
    justify-self: end;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(12, 18, 27, 0.16) 100%);
}

#activeMain .currentSongCard__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

#activeMain .guest-queue__section-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
    text-align: left;
    margin-top: 1.6rem;
	text-align: center;
}

#activeMain .guest-queue__section-head p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(10px, 1.9vw, 12px);
    line-height: 1.65;
}

#activeMain .guest-queue__badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(66, 127, 236, 0.58);
    background: rgba(66, 127, 236, 0.12);
    color: #93b9ff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
	margin-bottom: 0.7rem;
}

#activeMain .guest-queue__badge--muted {
    border-color: rgba(30, 215, 96, 0.34);
    background: rgba(30, 215, 96, 0.08);
    color: #8df2b2;
	margin-bottom: 0.5rem;
}

#activeMain .guest-queue__top3 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0rem;
}

#activeMain .guest-top-track {
    position: relative;
    display: grid;
    grid-column: span 6;
    grid-template-columns: 48px 82px minmax(0, 1fr) 78px;
    align-items: center;
    gap: 0.95rem;
    min-height: 118px;
    padding: 0.95rem 1rem 0.95rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(18, 24, 38, 0.98) 0%, rgba(13, 19, 31, 0.98) 100%);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

#activeMain .guest-top-track::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 42%),
                linear-gradient(135deg, rgba(66, 127, 236, 0.12) 0%, rgba(30, 215, 96, 0.04) 100%);
    pointer-events: none;
}

#activeMain .guest-top-track::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(66, 127, 236, 0.95) 0%, rgba(30, 215, 96, 0.7) 100%);
    z-index: 2;
	margin-bottom: 0vh !important;
}

#activeMain .guest-top-track--rank-1 {
    grid-column: 1 / -1;
    grid-template-columns: 54px 96px minmax(0, 1fr) 88px;
    min-height: 126px;
    border-color: rgba(30, 215, 96, 0.32);
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.26);
    background: linear-gradient(140deg, rgba(17, 29, 38, 0.99) 0%, rgba(12, 22, 34, 0.99) 56%, rgba(10, 18, 29, 0.99) 100%);
	margin-bottom: 0vh !important;
}

#activeMain .guest-top-track--rank-2 {
    border-color: rgba(66, 127, 236, 0.24);
}

#activeMain .guest-top-track--rank-3 {
    border-color: rgba(255, 255, 255, 0.18);
}

#activeMain .guest-top-track__rank {
    position: relative;
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Big Shoulders Stencil Text', cursive;
    font-size: clamp(52px, 5vw, 76px);
    color: rgba(255, 255, 255, 0.11);
    line-height: 1;
    z-index: 1;
    pointer-events: none;
}

#activeMain .top3RankingText,
#activeMain .top3RankingText1 {
    position: relative;
    left: 0rem;;
    top: auto;
    height: auto;
}

#activeMain .guest-top-track__rank1 {
    position: relative;
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Big Shoulders Stencil Text', cursive;
    font-size: clamp(52px, 5vw, 76px);
    color: rgba(255, 255, 255, 0.11);
    line-height: 1;
    z-index: 1;
    pointer-events: none;
}

#activeMain .guest-top-track__art {
    position: relative;
    z-index: 1;
    grid-column: 2;
    align-self: center;
    width: 82px;
    height: 82px;
    margin-top: 0;
    padding: 0;
    justify-self: start;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

#activeMain .IMGtop3 {
    flex: none;
    height: auto;
    justify-content: flex-start;
}

#activeMain .guest-top-track__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: rgba(255, 255, 255, 0.02);
}

#activeMain .guest-top-track--rank-1 .guest-top-track__art {
    width: 96px;
    height: 96px;
    border-radius: 18px;
}

#activeMain .guest-top-track__meta {
    position: relative;
    grid-column: 3;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-self: center;
    margin-top: 0;
    text-align: left;
	left: 0vh;
}

#activeMain .guest-top-track__meta h2,
#activeMain .guest-top-track__meta h4,
#activeMain .guest-top-track__meta h5 {
    margin: 0;
    text-align: left;
}

#activeMain .top3text {
    flex: none;
    padding-left: 0;
}

#activeMain .guest-top-track__meta h2 {
    font-size: clamp(14px, 1.55vw, 18px);
    line-height: 1.28;
    letter-spacing: 0.03rem;
    text-transform: none;
    max-width: 100%;
    overflow-wrap: anywhere;
}

#activeMain .guest-top-track__meta h4,
#activeMain .guest-top-track__meta .song-artist {
    margin-top: 0.25rem;
    color: #427fed;
    font-size: clamp(12px, 1.35vw, 14px);
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0.02rem;
    overflow-wrap: anywhere;
    border-bottom: none;
}

#activeMain .guest-top-track__meta h5 {
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: clamp(8px, 1.1vw, 10px);
    line-height: 1.45;
    letter-spacing: 0.02rem;
    text-transform: none;
    overflow-wrap: anywhere;
}

#activeMain .guest-top-track__actions {
    position: relative;
    z-index: 2;
    grid-column: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 0.5rem;
}

#activeMain .guest-top-track__vote-label {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
}

#activeMain .votingTop3 {
    margin-bottom: 0;
}

#activeMain .guest-top-track__meta .song-artist {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-bottom: none;
    text-decoration: none;
}

#activeMain .guest-track__spotify img {
    width: 18px;
    height: auto;
}

#activeMain .guest-queue__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.1rem !important;
}

#activeMain .guest-track {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(17, 23, 35, 0.97) 0%, rgba(15, 21, 33, 0.97) 100%);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
}

#activeMain .guest-track--selected {
    grid-template-columns: 68px minmax(0, 1fr) 72px;
    min-height: 92px;
    gap: 0.75rem;
    padding: 0.72rem 0.82rem 0.72rem 0.78rem;
    border-radius: 18px;
    border-color: rgba(66, 127, 236, 0.18);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
}

#activeMain .guest-track--rest {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 0.7rem;
    padding: 0.68rem 0.78rem;
    border-radius: 18px;
    background: none !important;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
    margin: 0 0.3rem 0.6rem;
}

#activeMain .guest-track__art {
    width: 76px;
    height: 76px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

#activeMain .guest-track--rest .guest-track__art {
    width: 58px;
    height: 58px;
    border-radius: 8px;
	border: 0px;

}

#activeMain .guest-track--selected .guest-track__art {
    width: 68px;
    height: 68px;
    border-radius: 12px;
}

#activeMain .guest-track__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#activeMain .guest-track__meta {
    min-width: 0;
    text-align: left;
}

#activeMain .guest-track__meta h4,
#activeMain .guest-track__artist,
#activeMain .guest-track__details {
    display: block;
}

#activeMain .guest-track__meta h4 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(16px, 2vw, 18px);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

#activeMain .guest-track--rest .guest-track__meta h4 {
    font-size: clamp(12px, 1.8vw, 14px);
    line-height: 1.35;
}

#activeMain .guest-track--rest .guest-track__meta {
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#activeMain .guest-track--selected .guest-track__meta {
    align-self: center;
}

#activeMain .guest-track--selected .guest-track__meta h4 {
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1.3;
}

#activeMain .guest-track__artist {
    margin-top: 0.45rem;
    color: #427fed;
    font-size: clamp(14px, 1.9vw, 16px);
    line-height: 1.45;
    border-bottom: none;
}

#activeMain .guest-track--rest .guest-track__artist {
    margin-top: 0.25rem;
    font-size: clamp(13px, 1.7vw, 14px);
}

#activeMain .guest-track--selected .guest-track__artist {
    margin-top: 0.3rem;
    font-size: clamp(13px, 1.7vw, 14px);
    line-height: 1.35;
}

#activeMain .guest-track__details {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: clamp(12px, 1.7vw, 14px);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

#activeMain .guest-track--rest .guest-track__details {
    margin-top: 0.2rem;
    font-size: clamp(9px, 1.5vw, 10px);
    line-height: 1.45;
	margin-bottom: 0vh !important;
}

#activeMain .guest-track--selected .guest-track__details {
    margin-top: 0.2rem;
    font-size: clamp(9px, 1.5vw, 10px);
    line-height: 1.4;
    margin-bottom: 0 !important;
}

#activeMain .guest-track__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#activeMain .guest-track--selected .guest-track__actions {
    min-width: 72px;
}

#activeMain .guest-track__spotify {
    border-bottom: none;
}

#activeMain .guest-track__vote,
#activeMain .guest-track__vote--top {
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: #ffffff;
    font-weight: 700;
}

#activeMain .guest-track__vote {
    width: 60px;
    height: 60px;
    font-size: 0.9rem;
}

#activeMain .guest-track--selected .guest-track__vote {
    width: 68px;
    height: 68px;
    font-size: 0.76rem;
}

#activeMain .guest-track--rest .guest-track__vote {
    width: 52px;
    height: 52px;
    font-size: 0.82rem;
}

#activeMain .guest-track__vote--top {
    position: static;
    width: 72px;
    height: 72px;
    font-size: 0.98rem;
    margin-bottom: 0;
    z-index: 2;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.26));
}

#activeMain #dividerVoted {
    margin: 2.2rem 0 0;
}

@media screen and (max-width: 980px) {
    #activeMain .guest-queue__list {
        grid-template-columns: 1fr;
		gap: 0.1rem !important;
    }

    #activeMain .guest-queue__top3 {
        grid-template-columns: 1fr;
    }

    #activeMain .guest-top-track,
    #activeMain .guest-top-track--rank-1 {
        grid-column: auto;
        grid-template-columns: 48px 82px minmax(0, 1fr) 78px;
    }
}

@media screen  {
    #activeMain .guest-voting-board {
        gap: 0.85rem;
    }

    #activeMain #currentSongCard {
        grid-template-columns: 4.35rem minmax(0, 1fr) 7.5rem;
        gap: 0.7rem;
        height: 7.5rem;
        max-height: 7.5rem;
        border-radius: 18px;
    }

    #activeMain .currentSongCard__rail {
        padding: 0.5rem 0.08rem 0.5rem 0.16rem;
		max-height: 7.5rem;
    }

    #activeMain .currentSongCard__railLabel {
        font-size: 1.6rem;
        letter-spacing: 0.05rem;
    }

    #activeMain .currentSongCard__meta {
        padding: 0.6rem 0;
    }

    #activeMain .currentSongCard__title {
        font-size: clamp(0.92rem, 3.95vw, 1.14rem);
        line-height: 1.14;
        letter-spacing: 0.02rem;
    }

    #activeMain .currentSongCard__artistLink {
        margin-top: 0.48rem;
        font-size: clamp(0.68rem, 2.7vw, 0.76rem);
        letter-spacing: 0.07rem;
    }

    #activeMain .currentSongCard__album,
    #activeMain .currentSongCard__details {
        font-size: clamp(0.54rem, 2.1vw, 0.62rem);
        line-height: 1.25;
        letter-spacing: 0.05rem;
    }

    #activeMain .currentSongCard__album {
        margin: 0.3rem 0 -0.2rem !important;
        font-size: clamp(9px, 5vh, 10px) !important;
		font-weight: 300;
    }

    #activeMain .currentSongCard__details {
        margin: 0 0 0.34rem !important;
        font-size: clamp(8px, 5vh, 8px) !important;
    }

    #activeMain .currentSongCard__cover {
        width: 7.5rem;
        height: 7.5rem;
    }

    #activeMain .guest-queue__section-head {
        align-items: center;
        text-align: center;
    }

    #activeMain .guest-top-track {
        grid-template-columns: 40px 75px minmax(0, 1fr) 48px;
        min-height: 106px;
        gap: 0.7rem;
        padding: 0.78rem 0.78rem 0.78rem 0.82rem;
		margin-bottom: 1rem !important;
        margin-top: 0rem !important;
    }

    #activeMain .guest-top-track__art {
        width: 68px;
        height: 68px;
        border-radius: 12px;
    }

    #activeMain .guest-top-track--rank-1 .guest-top-track__art {
        width: 67px;
        height: 67px;
        border-radius: 8px;
    }

    #activeMain .guest-track__vote--top {
        width: 58px;
        height: 58px;
        font-size: 0.82rem;
    }

    #activeMain .guest-top-track__rank {
        font-size: 6rem;
    }

    #activeMain .guest-top-track__vote-label {
        font-size: 0.5rem;
        letter-spacing: 0.1rem;
    }

    #activeMain .guest-track {
        grid-template-columns: 68px minmax(0, 1fr) 52px;
        gap: 0.75rem;
        padding: 0.8rem;
    }

    #activeMain .guest-track--selected {
        grid-template-columns: 64px minmax(0, 1fr) 60px;
        gap: 0.68rem;
        padding: 0.68rem 0.74rem;
		margin-bottom: 0.5rem;
    }

    #activeMain .guest-track--rest {
        grid-template-columns: 50px minmax(0, 1fr) 48px;
        padding: 0.68rem 0.72rem;
    }

    #activeMain .guest-track__art {
        width: 68px;
        height: 68px;
    }

    #activeMain .guest-track--selected .guest-track__art {
        width: 64px;
        height: 64px;
    }

    #activeMain .guest-track--rest .guest-track__art {
        width: 45px;
        height: 45px;
    }

    #activeMain .guest-track__actions {
        gap: 0.45rem;
    }

    #activeMain .guest-track__spotify img {
        width: 54px;
    }

    #activeMain .guest-track__vote {
        width: 52px;
        height: 52px;
        font-size: 0.76rem;
    }

    #activeMain .guest-track--selected .guest-track__vote {
        width: 56px;
        height: 56px;
    }

    #activeMain .guest-track--rest .guest-track__vote {
        width: 60px;
        height: 60px;
        font-size: 0.76rem;
    }

    #activeMain .guest-track__meta h4 {
        font-size: 16px;
    }
}


#activeMain .guest-top-track {
    position: relative;
    overflow: hidden;
}

#activeMain .guest-top-track__rank {
    position: absolute;
    left: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.0rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(110px, 16vw, 131px);
    line-height: 0.8;
    color: rgba(255, 255, 255, 0.08);
    z-index: 0;
    pointer-events: none;
}

@media screen and (min-width: 737px) {
    #activeMain .guest-queue__top3 {
        gap: 1rem;
    }
}

/* ===========================================================================
   Zustand der Votingrunde.

   Waehrend der Auswertung ist .countdown-container ausgeblendet - sichtbar ist
   nur #countdownComplete, das selbst als Kreis gestaltet ist. Deshalb liegt die
   Faerbung dort. Die Regeln fuer .countdown-container sind nur Absicherung,
   falls der farbige Rand bei dir an einem Wrapper haengt.

   Gruen ist bewusst nur der Gewinnermoment. Alles andere bleibt Primaerblau,
   damit Gruen die Ausnahme bleibt und nicht zur zweiten Hausfarbe wird.
   =========================================================================== */

#countdownComplete,
.countdown-container,
.circle-progress-border {
    transition: color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
 
/* ---- nur Schriftfarbe, kein Rahmen, kein Schatten ---- */
 
#countdownComplete.round-winner  { color: #1ED760; }
#countdownComplete.round-neutral { color: #427FEC; }
 
/* ---- der Kreis ---- */
 
.countdown-container.round-winner,
.circle-progress-border.round-winner {
    border-color: #1ED760;
    /* box-shadow: 0 0 18px rgba(30, 215, 96, .45); */
}
 
.countdown-container.round-neutral,
.circle-progress-border.round-neutral {
    border-color: #427FEC;
    /* box-shadow: 0 0 12px rgba(66, 127, 236, .30); */
}
 
/* Falls der Ring ein SVG-Kreis ist */
 
.countdown-container.round-winner  #progressCircle circle { stroke: #1ED760; }
.countdown-container.round-neutral #progressCircle circle { stroke: #427FEC; }
 
/* ---- Gewinner ---- */
 
#countdownComplete.round-winner {
    color: #1ED760;
}
 
.circle-progress-border.round-winner #progressCircle .base-circle {
    stroke: #1ED760;
}
 
/* ---- Kein Gewinner, oder der Song kommt nicht sofort ---- */
 
#countdownComplete.round-neutral {
    color: #427FEC;
}
 
.circle-progress-border.round-neutral #progressCircle .base-circle {
    stroke: #427FEC;
}