@font-face {
	font-display: swap;
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 300;
	src: url('https://static.ticklytics.app/fonts/roboto-condensed-v27-latin-300.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	src: url('https://static.ticklytics.app/fonts/roboto-condensed-v27-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Roboto Condensed';
	font-style: normal;

	src: url('https://static.ticklytics.app/fonts/roboto-condensed-v27-latin-500.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 700;
	src: url('https://static.ticklytics.app/fonts/roboto-condensed-v27-latin-700.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 900;
	src: url('https://static.ticklytics.app/fonts/roboto-condensed-v27-latin-900.woff2') format('woff2');
}

.loginpage .containerstart {
	text-align: center;
	padding: 20px;
	background: rgba(64, 63, 63, 0.6);
	border-radius: 20px;
}

html.loginpage {
	background-size: cover;
}

.loginpage body,
html.loginpage {
	height: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: Arial, sans-serif;
}

.loginpage body {
	height: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: Arial, sans-serif;
}

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

.loginpage .logo {
	margin-bottom: 20px;
}

.loginpage .logo img {
	border-radius: 14px;
	overflow: hidden;
}

.loginpage .title {
	font-size: 33px;
	margin-bottom: 24px;
	font-weight: 200;
	text-transform: uppercase;
	color: rgb(255, 255, 255);
}

.loginpage .title small {
	font-size: 14px;
}

.loginpage button {
	background: #419F4B;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	border: none;
	border-radius: 4px;
	color: black;
	font-weight: bold;
}

.loginpage button:hover {
	background-color: #282D33;
	color: white;
}

.event-box {
	transition: background-color 0.5s ease;
}

body {
	margin: 0;
	font-family: 'Roboto Condensed';
	height: 100%;
	position: relative;
	background-size: cover;
	background-position: center;
}


body {
	background: #0a0a0a;
	position: relative;
	overflow-x: hidden;
}

body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(45deg, transparent 48%, rgba(139, 92, 246, 0.03) 49%, rgba(139, 92, 246, 0.03) 51%, transparent 52%),
		linear-gradient(-45deg, transparent 48%, rgba(59, 130, 246, 0.03) 49%, rgba(59, 130, 246, 0.03) 51%, transparent 52%);
	background-size: 30px 30px;
	z-index: -1;
}

body::after {
	content: '';
	position: fixed;
	top: 0;
	left: -100%;
	width: 200%;
	height: 100%;
	background:
		radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
		radial-gradient(circle at 80% 50%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
		radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.2) 0%, transparent 50%);
	z-index: -2;
}


th {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 2;
}

strong {
	font-weight: 700;
	color: white !important;
}

.footer {
	background: #1a1a1a;
	font-size: 12px;
	margin-top: 30px;
	padding: 9px;
	text-align: center;
	bottom: 0px;
	/*! color: red; */
}

.footer a {
	color: #a6a0a0;
}


.blurblack {
	text-shadow: 0 0 5px rgba(242, 242, 242, 0.5);
}

.freeinfo {
	color: #a40016;
	font-size: 20px;
	padding: 0px 0px 15px 0px;
}


.menu {
	float: left;
	/*! margin-top: 29px; */
}

.sidebar {
	top: 0;
	left: 0;
	z-index: 1000;
	transform: translateX(0);
	display: block;
	font-size: 19px;
	overflow: auto;
	transition: none;
	background: #949fa2;
	z-index: 1000;
	position: relative;
}


/* Search Bar */
.search-container {
	margin-bottom: 30px;
	max-width: 700px;
}

.search-container button{max-width:35% !Important}

.search-container form {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

input {
	box-sizing: border-box;
}

.search-input {
	width: 100%;
	padding: 15px 20px 15px 50px;
	background: rgba(255, 255, 255, 0.05);
	border: 2px solid rgba(255, 255, 255, 0.1);
	border-radius: 15px;
	color: #fff;
	font-size: 16px;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}

.search-input:focus {
	outline: none;
	border-color: #667eea;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.search-icon {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: #888;
	font-size: 18px;
}

/* Sort Controls */
.controls-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
	align-items: center;
}

.sort-btn {
	padding: 10px 18px;
	background: #2b2b2b;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	color: #a0a0a0;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 14px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sort-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.sort-btn.active {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

/* Artist Cards */
.artists-grid {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.artist-card {
	background: #2b2b2b59;
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 20px;
	transition: all 0.3s ease;
	cursor: pointer;
	backdrop-filter: blur(10px);
}

.artist-card:hover {
	background: #2b2b2b;
	transform: translateX(5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	border-color: rgba(102, 126, 234, 0.3);
}

.artist-header {
	display: flex;
	justify-content: space-between;
	align-items: start;
	margin-bottom: 15px;
	flex-wrap: wrap;
	gap: 15px;
}

.artist-name {
	font-size: 1.3rem;
	font-weight: 600;
	color: #fff;
	margin: 0;
}

.artist-stats {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

.stat-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	font-size: 13px;
}

.stat-badge i {
	font-size: 12px;
	opacity: 0.7;
}

.stat-badge.primary {
	background: rgba(102, 126, 234, 0.2);
	color: #a5b4fc;
}

.stat-badge.success {
	background: rgba(34, 197, 94, 0.2);
	color: #86efac;
}

.stat-badge.warning {
	background: rgba(251, 146, 60, 0.2);
	color: #fed7aa;
}

.artist-meta {
	display: flex;
	gap: 20px;
	font-size: 13px;
	color: #fff;
	margin-top: 10px;
	flex-wrap: wrap;
}

.artist-meta span {
	display: flex;
	align-items: center;
	gap: 5px;
}

.location-pills {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.location-pill {
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	font-size: 12px;
	color: #a0a0a0;
}

/* Pagination */
.pagination-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 40px;
}

.page-btn {
	padding: 10px 15px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	color: #a0a0a0;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
}

.page-btn:hover:not(.disabledx) {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.page-btn.active {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-color: transparent;
	color: #fff;
}

.page-btn.disabledx {
	opacity: 0.3;
	cursor: not-allowed;
}

.page-info {
	color: #888;
	font-size: 14px;
	margin: 0 10px;
}

/* Modal Styles */
.modal-content {
	background: #2a2a3e;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 15px;
}

.modal-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 20px;
}

.modal-body {
	padding: 20px;
}

.modal-title {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 600;
}

.close {
	color: #888;
	opacity: 1;
}

.close:hover {
	color: #fff;
}

.stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 30px;
}

.stat-box {
	background: rgba(255, 255, 255, 0.05);
	padding: 15px;
	border-radius: 10px;
	text-align: center;
}

.stat-box .value {
	font-size: 1.8rem;
	font-weight: 700;
	color: #fff;
}

.stat-box .label {
	font-size: 12px;
	color: #888;
	margin-top: 5px;
}

.table {
	color: #e0e0e0;
}

.table thead th {
	border-bottom: 2px solid rgba(255, 255, 255, 0.1);
	color: #a0a0a0;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	padding: 12px;
}

.table tbody td {
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	padding: 12px;
}

.badge {
	padding: 4px 8px;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 600;
}

.badge-info {
	background: rgba(102, 126, 234, 0.2);
	color: #a5b4fc;
}

.badge-success {
	background: rgba(34, 197, 94, 0.2);
	color: #86efac;
}

.badge-secondary {
	background: rgba(255, 255, 255, 0.1);
	color: #888;
}

.refresh-notice {
	text-align: right;
	font-size: 12px;
	color: #666;
	margin-bottom: 20px;
}

.refresh-btn {
	color: #667eea;
	text-decoration: none;
	margin-left: 10px;
}

.refresh-btn:hover {
	color: #764ba2;
}

.empty-state {
	text-align: center;
	padding: 60px 20px;
	color: #888;
}

.empty-state i {
	font-size: 4rem;
	opacity: 0.3;
	margin-bottom: 20px;
}

/* Custom Modal Styles (ohne Bootstrap) */
.custom-modal {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	animation: fadeIn 0.3s;
}

.custom-modal.show {
	display: flex;
	justify-content: center;
	align-items: center;
}

.custom-modal-content {
	background: #2a2a3e;
	border-radius: 15px;
	width: 90%;
	max-width: 1200px;
	max-height: 85vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	animation: slideIn 0.3s;
}

.custom-modal-header {
	padding: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.custom-modal-header h2 {
	margin: 0;
	color: #fff;
	font-size: 1.5rem;
}

.custom-modal-close {
	color: #888;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	transition: color 0.3s;
	line-height: 20px;
}

.custom-modal-close:hover {
	color: #fff;
}

.custom-modal-body {
	padding: 20px;
	overflow-y: auto;
	flex: 1;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slideIn {
	from {
		transform: translateY(-50px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Scrollbar Styling */
.custom-modal-body::-webkit-scrollbar {
	width: 8px;
}

.custom-modal-body::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
}

.custom-modal-body::-webkit-scrollbar-thumb {
	background: rgba(102, 126, 234, 0.5);
	border-radius: 10px;
}

.custom-modal-body::-webkit-scrollbar-thumb:hover {
	background: rgba(102, 126, 234, 0.7);
}


.otp-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin: 40px 0;
	padding: 40px;
	background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
	border-radius: 16px;
	border: 1px solid #e2e8f0;
}

.otp-info {
	display: flex;
	gap: 20px;
}

.otp-icon {
	width: 80px;
	height: 80px;
	/*! background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); */
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 32px;
	flex-shrink: 0;
	/*! box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3); */
}

.otp-content h2 {
	color: #1e293b;
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 16px;
	line-height: 1.2;
	color: black !important;
}

.otp-content p {
	color: #64748b;
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 24px;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: unset !important;
}

.features {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.feature {
	display: flex;
	align-items: center;
	gap: 12px;
	/*! color: #059669; */
	text-align: center;
	/* margin: 0px auto; */
	font-weight: bold;
}

.feature i {
	font-size: 18px;
}

.extension-preview {
	background: white;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
	text-align: center;
}

.extension-preview img {
	max-width: 100%;
}

.extension-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #f1f5f9;
}

.extension-icon {
	width: 48px;
	height: 48px;
	background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 20px;
}

.extension-info h3 {
	color: #1e293b;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 4px;
}

.extension-info p {
	color: #64748b;
	font-size: 14px;
}

.extension-status {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
	margin-bottom: 24px;
}

.extension-status.active {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #059669;
}

.extension-status i {
	font-size: 18px;
}

.extension-status span {
	font-weight: 600;
	font-size: 14px;
}

.extension-status p {
	color: #059669;
	font-size: 13px;
	margin: 0;
	flex: 1;
}

.otp-section {
	border-top: 1px solid #f1f5f9;
	padding-top: 20px;
}

.otp-icon-small {
	width: 32px;
	height: 32px;
	background: #fbbf24;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #92400e;
	font-size: 14px;
	margin-bottom: 12px;
}

.otp-section h4 {
	color: #1e293b;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 16px;
}

.otp-details h5 {
	color: #374151;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
}

.otp-details p {
	color: #6b7280;
	font-size: 13px;
	margin-bottom: 8px;
	line-height: 1.4;
}

.otp-details .status {
	color: #059669;
}

.otp-button {
	width: 100%;
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	color: white;
	border: none;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.otp-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.how-to-section {
	margin: 60px 0;
}

.steps-header {
	text-align: center;
	margin-bottom: 48px;
}

.steps-header h2 {
	color: #fff;
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 16px;
}

.steps-header p {
	color: #fff;
	font-size: 18px;
	max-width: 600px;
	margin: 0 auto;
}

.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px;
}

.step {
	display: flex;
	gap: 20px;
	padding: 32px;
	background: white;
	border-radius: 16px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	border: 1px solid #f1f5f9;
	transition: all 0.2s ease;
}
.notification-btn {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    filter: grayscale(0%);
    opacity: 1;
}

.notification-btn:not(.active) {
    filter: grayscale(100%);
    opacity: 0.6;
}

.notification-btn:hover {
    transform: scale(1.15);
    filter: grayscale(0%);
    opacity: 1;
}

.notification-btn.active {
    animation: bellRing 0.5s;
}

.notification-btn.active .bell-icon {
    color: #FFD700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.notification-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Animation beim Aktivieren */
@keyframes bellRing {
    0% { transform: rotate(0deg) scale(1); }
    10% { transform: rotate(-10deg) scale(1.1); }
    20% { transform: rotate(10deg) scale(1.1); }
    30% { transform: rotate(-10deg) scale(1.1); }
    40% { transform: rotate(10deg) scale(1.1); }
    50% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(0deg) scale(1); }
}

/* Pulse Animation für aktive Benachrichtigungen */
.notification-btn.active.has-new-sales {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Toast Notifications */
.notification-toast {
    animation: slideIn 0.3s ease-out;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification-toast.success {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.notification-toast.error {
    background: linear-gradient(135deg, #f93b1d 0%, #ea4c62 100%);
}

.notification-toast.info {
    background: linear-gradient(135deg, #667eea 0%, #4ca1af 100%);
}

/* Tooltip beim Hover */
.notification-btn::after {
    content: attr(title);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.notification-btn:hover::after {
    opacity: 1;
}

.step:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.step-number {
	width: 48px;
	height: 48px;
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	color: white;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 20px;
	flex-shrink: 0;
}

.step-content h3 {
	color: #1e293b;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 12px;
}

.step-content p {
	color: #64748b;
	line-height: 1.6;
}

.installation-section {
	margin: 60px 0;
	background: #f8fafc;
	border-radius: 20px;
	padding: 48px;
}

.installation-header {
	text-align: center;
	margin-bottom: 48px;
}

.installation-header h2 {
	color: #1e293b;
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 16px;
	color: black !important;
}

.installation-header p {
	color: #64748b;
	font-size: 18px;
}

.installation-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.installation-steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.install-step {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	border: 1px solid #e2e8f0;
}

.step-icon {
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 16px;
	flex-shrink: 0;
}

.step-text h4 {
	color: #1e293b;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 4px;
	color: black !Important;
}

.step-text p {
	color: #64748b;
	font-size: 14px;
	margin-bottom: 8px;
}

.step-text code {
	background: #f1f5f9;
	padding: 2px 6px;
	border-radius: 4px;
	font-family: 'Courier New', monospace;
	font-size: 12px;
	color: #3730a3;
}

.download-link {
	color: #3b82f6;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s ease;
}

.download-link:hover {
	color: #1d4ed8;
	text-decoration: underline;
}

.video-section {
	background: white;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	border: 1px solid #e2e8f0;
	height: fit-content;
}

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

.video-placeholder {
	position: relative;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	margin-bottom: 16px;
	aspect-ratio: 16/9;
}

.video-thumbnail {
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, #dc2626, #ea580c);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 20px;
}

.play-button {
	width: 72px;
	height: 72px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #dc2626;
	font-size: 28px;
	margin-bottom: 16px;
	transition: all 0.2s ease;
}

.play-button:hover {
	background: white;
	transform: scale(1.1);
}

.video-info h3 {
	color: white;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 12px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.chrome-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: white;
	font-weight: 600;
	margin-bottom: 16px;
}

.chrome-logo i {
	font-size: 24px;
}

.video-link {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 12px;
}

.video-description {
	color: #64748b;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.video-description i {
	color: #dc2626;
	font-size: 16px;
}

.security-note {
	display: flex;
	gap: 20px;
	padding: 32px;
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border: 1px solid #f59e0b;
	border-radius: 16px;
	margin: 40px 0;
}

.security-icon {
	width: 64px;
	height: 64px;
	background: #f59e0b;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 24px;
	flex-shrink: 0;
}


/* Container und Layout */
.event-details-container {
	margin-bottom: 30px;
}

.event-detail-single {
	position: relative;
}

.title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.title h1 {
	color: #fff;
	font-size: 32px;
	margin: 0;
}

.btn-favorite {
	background: none;
	border: none;
	font-size: 28px;
	color: #888;
	cursor: pointer;
	transition: color 0.3s ease;
}

.event-header-info .notification-btn , .event-header-info .btn-favorite {float:right;}
.notification-btn {margin-top:2px;}
.event-header-info h1{padding:20px 0px !important}

.btn-favorite.active,
.btn-favorite:hover {
	color: #ffc833;
}

.image-block {
	height: 400px;
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	margin-bottom: 20px;
}

/* Event Statistics Blocks */
.important_infos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.important_infos .block {
	/* flex: 1 1 calc(25% - 10px); */
	/* min-width: 250px; */
	background: #2b2b2b;
	padding: 20px;
	border-radius: 8px;
	transition: transform 0.3s ease;
}

.important_infos .block:hover {
	transform: translateY(-2px);
	background: #333;
}

.important_infos .ue {
	color: #a8b3c1;
	font-size: 14px;
	display: block;
	margin: 10px 0 5px 0;
}

.important_infos .block_inside {
	font-size: 24px;
	font-weight: 700;
	color: #fff;
}

/* Charts Container */
.diagramms {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.diagramms .block {
	flex: 1 1 calc(33.333% - 10px);
	min-width: 300px;
	background: #2b2b2b;
	padding: 20px;
	border-radius: 8px;
}

.diagramms .block.chartbg {
	background: #fff;
}

.diagramms .block h3 {
	color: #fff;
	margin: 0 0 15px 0;
	font-size: 18px;
}

.diagramms .block canvas {
	max-height: 400px !important;
	width: 100% !important;
}

/* Sales Category Chart */
.salescat {
	display: flex;
	margin-bottom: 20px;
}

.salescat .block {
	width: 100%;
	background: #fff;
	padding: 20px;
	border-radius: 8px;
}

.salescat .block h3 {
	color: #fdfdfd;
	margin: 0 0 15px 0;
	font-size: 18px;
}

.salescat canvas {
	max-height: 400px !important;
	width: 100% !important;
}

/* Tables Container */
.sales-table-container,
.category-stats-container {
	background: #2b2b2b;
	padding: 20px;
	border-radius: 8px;
	margin-bottom: 20px;
}

.sales-table-container h3,
.category-stats-container h3 {
	color: #fff;
	margin: 0 0 15px 0;
	font-size: 20px;
}

.table-responsive {
	/*! max-height: 400px; */
	overflow-y: auto;
	overflow-x: auto;
	border: 1px solid #3a3f44;
	border-radius: 5px;
}

/* Scrollbar Styling */
.table-responsive::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
	background: #1e2327;
}

.table-responsive::-webkit-scrollbar-thumb {
	background: #4a90e2;
	border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
	background: #5ba0f2;
}

/* Tables Styling */
.sales-table,
.category-stats-table {
	width: 100%;
	border-collapse: collapse;
}

.sales-table thead,
.category-stats-table thead {
	background: #1a1f29;
	position: sticky;
	top: 0;
	z-index: 10;
}

.sales-table th,
.category-stats-table th {
	padding: 12px;
	text-align: left;
	color: #b8c3d1;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 2px solid #4a90e2;
}

.sales-table td,
.category-stats-table td {
	padding: 10px 12px;
	color: #e4e6eb;
	font-size: 14px;
	border-bottom: 1px solid #3a3f44;
}

.sales-table tbody tr:hover,
.category-stats-table tbody tr:hover {
	background: rgba(74, 144, 226, 0.1);
}

.sales-table tbody tr:nth-child(even),
.category-stats-table tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.02);
}

/* Reseller Analytics Styles */
.analytics-container {
	background: linear-gradient(135deg, #1a1f29 0%, #2c3440 100%);
	padding: 30px;
	border-radius: 15px;
	margin: 30px auto;
	max-width: 100%;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.analytics-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 25px;
	padding: 20px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.analytics-header h2 {
	color: white;
	font-size: 28px;
	margin: 0;
	font-weight: 700;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.disclaimer-box {
	background: linear-gradient(135deg, #6b5b00, #8b7000);
	border: 2px solid #d4aa00;
	color: #fff;
	padding: 18px;
	border-radius: 10px;
	margin-bottom: 25px;
	display: flex;
	align-items: center;
	gap: 15px;
	animation: slideIn 0.6s ease-out;
	box-shadow: 0 4px 10px rgba(212, 170, 0, 0.3);
}

@keyframes slideIn {
	from {
		transform: translateX(-50px);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.section-header {
	background: linear-gradient(135deg, #4a90e2, #5ba0f2);
	color: white;
	padding: 15px 25px;
	border-radius: 10px;
	margin: 30px 0 20px 0;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 4px 10px rgba(74, 144, 226, 0.3);
	transition: transform 0.3s ease;
}

.section-header:hover {
	transform: translateY(-2px);
}

.section-header.risk {
	background: linear-gradient(135deg, #d4aa00, #e4ba10);
}

.section-header.tools {
	background: linear-gradient(135deg, #5cb85c, #6cc86c);
}

.section-header h3 {
	margin: 0;
	font-size: 20px;
}

.info-box {
	background: rgba(42, 53, 66, 0.8);
	border-left: 4px solid #4a90e2;
	padding: 18px;
	border-radius: 8px;
	margin-bottom: 25px;
	color: #c8d3e1;
	backdrop-filter: blur(10px);
}

.analytics-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
	gap: 25px;
	margin-bottom: 30px;
}

.analytics-grid h4 {
	color: #e4e6eb;
	margin-bottom: 10px;
	font-size: 18px;
}

.analytics-grid p {
	color: #a8b3c1;
	font-size: 14px;
	margin-bottom: 15px;
}

/* Analytics Tables */
.analytics-table {
	width: 100%;
	background: rgba(30, 35, 45, 0.9);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 42px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.analytics-table thead {
	background: linear-gradient(135deg, #2c3542, #3c4552);
	position: sticky;
	top: 0;
	z-index: 10;
}

.analytics-table th {
	padding: 15px;
	text-align: left;
	color: #b8c3d1;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 2px solid #4a90e2;
}

.analytics-table td {
	padding: 12px 15px;
	color: #e4e6eb;
	font-size: 14px;
	border-bottom: 1px solid rgba(61, 73, 87, 0.5);
}

.analytics-table tbody {
	display: block;
	max-height: 300px;
	overflow-y: auto;
}

.analytics-table thead,
.analytics-table tbody tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.analytics-table tbody::-webkit-scrollbar {
	width: 8px;
}

.analytics-table tbody::-webkit-scrollbar-track {
	background: #1e2327;
}

.analytics-table tbody::-webkit-scrollbar-thumb {
	background: #4a90e2;
	border-radius: 4px;
}

.analytics-table tbody tr:hover {
	background: rgba(74, 144, 226, 0.1);
}

.analytics-table tbody tr:nth-child(even) {
	background: rgba(36, 42, 51, 0.5);
}

.analytics-table a {
	color: #4a90e2;
	text-decoration: none;
	transition: color 0.3s ease;
}

.analytics-table a:hover {
	color: #6ba5f2;
	text-decoration: underline;
}

/* Score Badges */
.score-badge {
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: inline-block;
}

.score-badge.high {
	background: linear-gradient(135deg, #28a745, #38b755);
	color: white;
	box-shadow: 0 2px 5px rgba(40, 167, 69, 0.3);
}

.score-badge.medium {
	background: linear-gradient(135deg, #ffc107, #ffd117);
	color: #000;
	box-shadow: 0 2px 5px rgba(255, 193, 7, 0.3);
}

.score-badge.low {
	background: linear-gradient(135deg, #dc3545, #ec4555);
	color: white;
	box-shadow: 0 2px 5px rgba(220, 53, 69, 0.3);
}

/* Price Range Indicators */
.price-range {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 12px;
}

.price-range.high {
	background: rgba(220, 53, 69, 0.3);
	color: #ff6b6b;
	border: 1px solid rgba(220, 53, 69, 0.4);
}

.price-range.medium {
	background: rgba(255, 193, 7, 0.3);
	color: #ffd93d;
	border: 1px solid rgba(255, 193, 7, 0.4);
}

.price-range.low {
	background: rgba(40, 167, 69, 0.3);
	color: #6bcf7f;
	border: 1px solid rgba(40, 167, 69, 0.4);
}

/* Category Dropdown */
.category-container {
	margin: 20px 0;
}

.dropdown {
	position: relative;
	display: inline-block;
}

#categoryButton2 {
	background: #4a90e2;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 16px;
	transition: background 0.3s ease;
}

.from {
	color: white;
	margin-top: 10px
}


#categoryButton2:hover {
	background: #5ba0f2;
}

.dropdown-content {
	display: none;
	position: absolute;
	background: #2b2b2b;
	min-width: 200px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	z-index: 1;
	border-radius: 8px;
	padding: 10px;
	margin-top: 5px;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown-content label {
	display: block;
	padding: 8px;
	color: #fff;
	cursor: pointer;
	transition: background 0.3s ease;
}

.dropdown-content label:hover {
	background: rgba(74, 144, 226, 0.2);
	border-radius: 4px;
}

.dropdown-content input[type="checkbox"] {
	margin-right: 8px;
}

/* Mobile Optimization */
@media (max-width: 768px) {

	/* Event Header Mobile */
	.event-header-info {
		flex-direction: column !important;
	}

	.event-header-info img{object-position:top !important}

	.event-header-info p {
		font-size: 15px !important;
		line-height: 20px
	}

	.event-header-info>div:first-child {
		flex: 1 1 100% !important;
		margin-bottom: 15px;
	}

	/* Statistics Blocks Mobile */
	.important_infos .block {
		/* flex: 1 1 100% !important; */
		/* min-width: 100% !important; */
		margin-bottom: 2px;
		padding: 8px !important;
	}

	/* Charts Mobile */
	.diagramms {
		flex-direction: column !important;
		overflow: hidden;
	}

	.diagramms .block {
		flex: 1 1 100% !important;
		min-width: 100% !important;
		margin-bottom: 15px;
		/* height: 291px !important; */
	}

	.diagramms .block canvas {
		max-height: 200px !important;
	}

	/* Tables Mobile */
	.table-responsive {
		max-width: 100vw;
		overflow-x: auto;
	}

	.sales-table,
	.category-stats-table,
	.analytics-table {
		font-size: 12px !important;
	}

	.sales-table th,
	.sales-table td,
	.category-stats-table th,
	.category-stats-table td,
	.analytics-table th,
	.analytics-table td {
		padding: 8px 5px !important;
		font-size: 11px !important;
	}

	/* Analytics Grid Mobile */
	.analytics-grid {
		grid-template-columns: 1fr !important;
		gap: 15px !important;
	}

	/* Hide desktop elements */
	.desktop {
		display: none !important;
	}

	/* Category Select Mobile */
	#categorySelect {
		width: 100% !important;
		margin-bottom: 15px;
	}

	/* Event Info Mobile */
	.event-header-info input[type="text"] {
		width: 100% !important;
		margin-bottom: 10px;
	}

	/* Buttons Mobile */
	button {
		width: 100% !important;
		margin-bottom: 10px !important;
	}

	/* Search Inputs Mobile */
	input[type="text"]#searchSales,
	input[type="text"]#searchCategory {
		width: 100% !important;
		margin-top: 10px;
	}

	/* Container Padding Mobile */
	.analytics-container {
		padding: 15px !important;
		margin: 15px 0 !important;
	}

	.sales-table-container,
	.category-stats-container {
		padding: 15px !important;
	}

	/* Headers Mobile */
	h1 {
		font-size: 22px !important;
	}

	h2 {
		font-size: 18px !important;
	}

	h3 {
		font-size: 18px !important;
	}

	h4 {
		font-size: 18px !important;
		border-top: 1px solid #ffffff47 !important;
		padding-top: 38px;
	}

	/* Scrollbar for mobile */
	::-webkit-scrollbar {
		height: 5px;
	}

	/* Make tables scrollable horizontally */
	.table-responsive {
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 480px) {

	/* Extra small devices */
	.important_infos .block_inside {
		font-size: 14px !important;
	}

	.analytics-table tbody {
		max-height: 200px !important;
	}

	/* Even smaller text for very small screens */
	.sales-table th,
	.sales-table td {
		font-size: 10px !important;
		padding: 5px 3px !important;
	}
}

/* Tablet Optimization */
@media (min-width: 769px) and (max-width: 1200px) {
	.important_infos .block {
		flex: 1 1 calc(50% - 10px) !important;
	}

	.diagramms .block {
		flex: 1 1 calc(50% - 10px) !important;
	}

	.analytics-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Tooltip Styles */
.tooltip {
	position: relative;
	display: inline-block;
	cursor: pointer;
	margin-left: 10px;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 200px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 10px;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -100px;
	opacity: 0;
	transition: opacity 0.3s;
	font-size: 12px;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

.clear {
	clear: both;
}


.security-content h3 {
	color: #92400e;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 12px;
}

.security-content p {
	color: #92400e;
	line-height: 1.6;
	margin-bottom: 8px;
}

.security-content .note {
	font-weight: 600;
}

.status-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #f0fdf4;
	color: #059669;
	padding: 12px 20px;
	border-radius: 8px;
	border: 1px solid #bbf7d0;
}

.page-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24px;
}

.header-left h1 {
	color: white;
	font-size: 36px;
	font-weight: 700;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 16px;
}


.header-left h1 i {
	color: #3b82f6;
}

.subtitle {
	color: #64748b;
	font-size: 18px;
	margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
	.otp-hero {
		grid-template-columns: 1fr;
		padding: 24px;
	}

	.page-header {
		flex-direction: column;
		gap: 20px;
	}

	.installation-content {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.steps {
		grid-template-columns: 1fr;
	}

	.step {
		flex-direction: column;
		text-align: center;
	}

	.otp-info {
		flex-direction: column;
		text-align: center;
	}

	.security-note {
		flex-direction: column;
		text-align: center;
	}

	.header-left h1 {
		font-size: 28px;
	}

	.steps-header h2 {
		font-size: 24px;
	}

	.installation-header h2 {
		font-size: 24px;
	}
}


h1 {
	font-size: 2.0rem;
	font-weight: 700;
	margin-bottom: 30px;
	color: white;
	display: inline-block;
}


/* Enhanced Inventory Styles */
.inventory-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
}

.stat-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 20px;
	border-radius: 12px;
	color: white;
	position: relative;
	overflow: hidden;
}

.stat-card.profit {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card.spent {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card.sold {
	background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-card.tickets {
	background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stat-card.inventory {
	background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

.stat-value {
	font-size: 32px;
	font-weight: bold;
	margin: 10px 0;
}

.stat-label {
	font-size: 14px;
	opacity: 0.9;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.stat-icon {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 40px;
	opacity: 0.3;
}

.add-purchase-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 12px 30px;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	cursor: pointer;
	transition: transform 0.3s;
	margin-bottom: 20px;
}

.add-purchase-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.inventory-table {
	background: #2b2b2b;
	border-radius: 12px;
	overflow: auto;
	margin-top: 20px;
}

.inventory-table table {
	width: 100%;
	color: white;
}

.inventory-table th {
	background: #1a1a1a;
	padding: 15px;
	text-align: left;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
}

.inventory-table td {
	padding: 15px;
	border-bottom: 1px solid #3a3a3a;
	font-size: 14px;
}

.status-badge {
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	display: inline-block;
}

.status-badge.not_listed {
	background: #6c757d;
}

.status-badge.listed {
	background: #ffc107;
	color: #000;
}

.status-badge.sold {
	background: #28a745;
}

.status-badge.partially_sold {
	background: #17a2b8;
}

.roi-positive {
	color: #28a745;
	font-weight: bold;
}

.roi-negative {
	color: #dc3545;
	font-weight: bold;
}

.action-buttons {
	display: flex;
	gap: 10px;
}

.action-btn {
	padding: 5px 3px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	transition: all 0.3s;
}

.action-btn.edit {
	background: #007bff;
	color: white;
}

.action-btn.sell {
	background: #28a745;
	color: white;
}

.action-btn.delete {
	background: #dc3545;
	color: white;
}

.action-btn.copy {
	background: #6c757d;
	color: white;
}

.action-btn:hover {
	opacity: 0.8;
}

.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
	background-color: #2b2b2b;
	margin: 5% auto;
	padding: 30px;
	border-radius: 12px;
	width: 90%;
	max-width: 600px;
	color: white;
	position: relative;
	max-height: 85vh;
	overflow-y: auto;
}
.modal-content h2{
margin-top:0px !important
}


.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	border-bottom: 1px solid #444;
	padding-bottom: 15px;
}

.modal-header h2 {
	margin: 0;
	color: white;
}

.close {
	color: #aaa;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}

.close:hover {
	color: white;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
	margin-bottom: 20px;
}

.form-group {
	display: flex;
	flex-direction: column;
}

.form-group label {
	margin-bottom: 5px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #aaa;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
	padding: 10px;
	border: 1px solid #444;
	border-radius: 6px;
	background: #1a1a1a;
	color: white;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: #667eea;
	background: #252525;
}

/* Datalist dropdown styling */
input[list] {
	position: relative;
}

datalist {
	position: absolute;
	background: #1a1a1a;
	border: 1px solid #444;
	border-radius: 4px;
	max-height: 200px;
	overflow-y: auto;
}

input::-webkit-calendar-picker-indicator {
	filter: invert(1);
}


/* Extension Page Specific Styles */

.extension-hero {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 20px;
	padding: 50px;
	text-align: center;
	margin: 40px 0;
	color: white;
	box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
}

.extension-hero h1 {
	font-size: 42px;
	font-weight: 700;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.extension-hero h1 i {
	font-size: 48px;
	color: #fbbf24;
}

.extension-hero p {
	font-size: 20px;
	opacity: 0.9;
	max-width: 800px;
	margin: 0 auto;
	line-height: 1.6;
}


.warning-section {
	margin: 40px auto;
	padding: 25px 30px;
	background: linear-gradient(135deg, #fff3cd 0%, #ffe8a1 100%);
	border: 2px solid #ffc107;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	/* max-width: 800px; */
	position: relative;
}

.warning-section::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg, #ffc107, #ffdb4d);
	border-radius: 12px;
	opacity: 0.3;
	z-index: -1;
}

.warning-header {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	gap: 12px;
}

.warning-header i {
	color: #856404;
	font-size: 28px;
}

.warning-header h3 {
	color: #856404;
	margin: 0;
	font-size: 22px;
	font-weight: 600;
}

.warning-section p {
	color: #6c5a0b;
	margin-bottom: 20px;
	text-align: center;
	font-size: 16px;

}

.warning-section ol {
	color: #6c5a0b;
	margin: 0 auto;
	padding-left: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.warning-section ol li {
	background: rgba(255, 255, 255, 0.5);
	padding: 12px 20px;
	border-radius: 8px;
	width: 90%;
	max-width: 500px;
	text-align: center;
	font-size: 15px;
	border: 1px solid rgba(255, 193, 7, 0.3);
	position: relative;
	padding-left: 40px;
}

.warning-section ol li::before {
	content: counter(item);
	counter-increment: item;
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	background: #ffc107;
	color: #fff;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 12px;
}

.warning-section ol {
	counter-reset: item;
}

.extension-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	margin: 60px 0;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.extension-block {
	background: white;
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.extension-block::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
}

.extension-block:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.security-block {
	grid-column: 1;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 2px solid #bbf7d0;
}

.security-block::before {
	background: linear-gradient(90deg, #059669, #10b981);
}

.security-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #059669 0%, #047857 100%);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
	color: white;
	font-size: 32px;
	box-shadow: 0 10px 25px rgba(5, 150, 105, 0.3);
}

.security-block h3 {
	color: #065f46;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 20px;
	text-align: center;
}

.security-block p {
	color: #047857;
	line-height: 1.7;
	font-size: 16px;
	text-align: center;
}

.security-block .note {
	background: #fef3c7;
	border: 2px solid #f59e0b;
	border-radius: 12px;
	padding: 16px;
	margin-top: 20px;
	color: #92400e;
	font-weight: 600;
	text-align: center;
}

.installation-block {
	grid-column: 2;
}

.installation-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
	color: white;
	font-size: 32px;
	box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.installation-block h3 {
	color: #1e293b;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 30px;
	text-align: center;
}

.installation-steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Mobile Sort Buttons */
.mobile-sort-buttons {
	display: none;
}

@media (max-width: 1200px) {

	/* Sort Buttons nur auf Mobile anzeigen */
	.mobile-sort-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 10px;
		background: #1a1a1a;
		border-radius: 8px;
		margin-bottom: 15px;
	}

	.mobile-sort-btn {
		flex: 1;
		min-width: calc(25% - 6px);
		padding: 10px 5px;
		background: #2b2b2b;
		color: #ccc;
		border: 1px solid #444;
		border-radius: 6px;
		font-size: 12px;
		cursor: pointer;
		transition: all 0.2s;
		text-align: center;
	}

	.mobile-sort-btn.active {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		border-color: transparent;
	}

	/* Desktop-Header ausblenden */
	#eventTable thead {
		display: none !important;
	}

	/* Event Cards statt Tabellenzeilen */
	#eventTable tbody {
		display: block;
	}

	#eventTable tr.event-row {
		display: block !important;
		background: #2b2b2b;
		border-radius: 12px;
		margin-bottom: 15px;
		padding: 0;
		border: 1px solid #444;
		position: relative;
		overflow: visible;
	}

	/* Alle TDs erstmal verstecken und dann gezielt anzeigen */
	#eventTable tr.event-row td {
		/* display: none; */
		padding: 0;
		border: none;
	}

	/* Event-Bild */
	#eventTable tr.event-row td:nth-child(3) {
		display: block !important;
		width: 100%;
		/* height: 120px; */
	}

	#eventTable tr.event-row td:nth-child(3) img {
		width: 100%;
		height: 120px;
		object-fit: cover;
		border-radius: 12px 12px 0 0;
		display: block;
		object-position: top;
	}

	/* Event-Name */
	#eventTable tr.event-row .td-name {
		display: block !important;
		font-size: 16px;
		font-weight: 700;
		color: #fff;
		padding: 12px 15px 5px 15px;
		line-height: 1.3;
		position: absolute;
		top: 10px;
		left: 0px;
	}

	#eventTable tr.event-row .td-name a {
		color: white !important;
	}


	/* Event-ID und Link */
	#eventTable tr.event-row .td-id {
		display: unset;
		/* margin: 0 15px; */
		/* margin-bottom: 10px; */
		width: 100%;
		text-align: center !important;
		padding: 0px !important;
	}

	#eventTable tr.event-row .td-id a {
		display: block;
		background: rgba(102, 126, 234, 0.2);
		color: #a5b4fc;
		padding: 4px 12px;
		/* border-radius: 15px; */
		font-size: 11px;
		text-decoration: none;
		box-sizing: border-box;
		margin: 0px auto;
		width: 100%;
	}

	/* Datum und Location Container */
	.event-info-row {
		display: flex;
		gap: 10px;
		padding: 0 15px;
		margin-bottom: 10px;
	}

	#eventTable tr.event-row .td-date,
	#eventTable tr.event-row .td-location {
		display: block !important;
		flex: 1;
		background: rgba(255, 255, 255, 0.05);
		padding: 5px;
		border-radius: 8px;
		font-size: 12px;
		color: #ccc;
		text-align: center;
	}

	#eventTable tr.event-row .td-date::before {
		content: "📅 ";
	}

	#eventTable tr.event-row .td-location {
		/* white-space: nowrap; */
		/* overflow: hidden; */
		/* text-overflow: ellipsis; */
	}

	#eventTable tr.event-row .td-location::before {
		content: "📍 ";
	}

	/* Stats Container */
	.event-stats-container {
		display: flex;
		justify-content: space-around;
		padding: 10px 15px;
		background: rgba(0, 0, 0, 0.2);
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 0 0 12px 12px;
	}

	#eventTable tr.event-row .td-stats {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		background: transparent;
		padding: 5px;
		flex: 1;
	}

	#eventTable tr.event-row .td-stats .mobile {
		display: block !important;
		font-size: 10px;
		color: #888;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-bottom: 3px;
		font-weight: normal;
	}

	#eventTable tr.event-row .td-stats:not(:has(.mobile)) {
		font-size: 16px;
		font-weight: 700;
		color: #fff;
	}

	/* Stats-Werte ohne Label-Span */
	#eventTable tr.event-row .td-stats {
		font-size: 16px;
		font-weight: 700;
		color: #fff;
	}

	/* Favoriten-Button absolut positioniert */
	.favorite-container {
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 10;
	}

	#eventTable .favrow {
		display: block !important;
		position: absolute;
		top: 3px;
		right: 10px;
		width: 30px !important;
		height: 30px !important;
		z-index: 10;
		padding: 0px;
	}

	.favorite-btn {
		background: rgba(0, 0, 0, 0.7);
		border-radius: 50%;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		backdrop-filter: blur(10px);
		border: 2px solid rgba(255, 255, 255, 0.2);
		color: #888;
	}

	.favorite-btn.checked {
		background: rgba(255, 200, 51, 0.9);
		color: #fff;
		border-color: #ffc833;
	}

	/* Hype-Emoji */
	#eventTable tr.event-row td:nth-child(9) {
		display: block !important;
		position: absolute;
		top: 59px;
		left: 6px;
		background: transparent;
		padding: 6px 10px;
		border-radius: 8px;
		font-size: 18px;
	}


	/* Stats Container bleibt flex */
	.event-stats-container {
		display: flex !important;
		justify-content: space-around;
		padding: 10px 15px;
		background: rgba(0, 0, 0, 0.2);
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 0 0 12px 12px;
	}

	/* Stats nebeneinander statt untereinander */
	#eventTable tr.event-row .td-stats {
		display: block !important;
		text-align: center;
		background: transparent;
		padding: 5px;
		flex: 1;
		font-size: 16px;
		font-weight: 700;
		color: #fff;
	}

	/* Label klein über dem Wert */
	#eventTable tr.event-row .td-stats .mobile {
		display: block !important;
		font-size: 9px !important;
		color: #888;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-bottom: 3px;

	}
}

/* Kleinere Smartphones */
@media (max-width: 550px) {
	.mobile-sort-btn {
		min-width: calc(50% - 4px);
		font-size: 11px;
		padding: 8px 3px;
	}


	.event-info-row {
		flex-direction: column;
		gap: 5px;
	}

	#eventTable tr.event-row .td-date,
	#eventTable tr.event-row .td-location {
		font-size: 11px;
	}

	.event-stats-container {
		padding: 8px 10px;
	}

	#eventTable tr.event-row .td-stats {
		font-size: 14px;
	}

	#eventTable tr.event-row .td-stats .mobile {
		font-size: 9px;
	}
}

/* Keine Favoriten Nachricht */
.no-favorites-message {
	text-align: center;
	padding: 60px 20px;
	color: #888;
}

.no-favorites-message i {
	font-size: 64px;
	color: #ffc833;
	margin-bottom: 20px;
	opacity: 0.5;
}

.no-favorites-message h3 {
	color: #ccc;
	margin-bottom: 10px;
}

.no-favorites-message a {
	display: inline-block;
	padding: 12px 24px;
	margin-top: 20px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	text-decoration: none;
	border-radius: 8px;
}


.install-step {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
	background: #f8fafc;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	transition: all 0.2s ease;
}

.install-step:hover {
	background: #f1f5f9;
	transform: translateX(5px);
}

.step-number {
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	color: white;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
}

.step-content {
	flex: 1;
}

.step-content strong {
	color: #1e293b;
	font-size: 16px;
	display: block;
	margin-bottom: 4px;
}

.step-content span {
	color: #64748b;
	font-size: 14px;
	line-height: 1.5;
}

.step-content a {
	color: #3b82f6;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.step-content a:hover {
	color: #1d4ed8;
	text-decoration: underline;
}

.step-content code {
	background: #e2e8f0;
	padding: 2px 6px;
	border-radius: 4px;
	font-family: 'Courier New', monospace;
	font-size: 13px;
	color: #475569;
}

.video-block {
	grid-column: 3;
}

.video-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
	color: white;
	font-size: 32px;
	box-shadow: 0 10px 25px rgba(220, 38, 38, 0.3);
}

.video-block h3 {
	color: #1e293b;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 24px;
	text-align: center;
}

.video-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	/* 16:9 aspect ratio */
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.video-description {
	text-align: center;
	margin-top: 16px;
	color: #64748b;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.video-description i {
	color: #dc2626;
}

.cta-section {
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
	border-radius: 20px;
	padding: 50px;
	text-align: center;
	margin: 60px 0;
	border: 2px solid #cbd5e1;
}

.cta-section h2 {
	color: #1e293b;
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.cta-section h2 i {
	color: #3b82f6;
}

.cta-section p {
	color: #475569;
	font-size: 18px;
	margin-bottom: 32px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.cta-button {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	color: white;
	padding: 16px 32px;
	border-radius: 12px;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
	background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

/* Responsive Design */
@media (min-width: 768px) and (max-width: 1199px) {
	.extension-grid {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
		max-width: 900px;
	}

	.security-block {
		grid-column: 1;
	}

	.installation-block {
		grid-column: 2;
	}

	.video-block {
		grid-column: 1 / -1;
		/* Spans both columns, goes to next row */
		margin-top: 20px;
	}
}

@media (min-width: 1200px) {


	.extension-grid {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 40px;
		max-width: none;
	}

	.security-block {
		grid-column: 1;
	}

	.installation-block {
		grid-column: 2;
	}

	.video-block {
		grid-column: 3;
	}
}


@media (max-width: 1000px) {

	.extension-grid {
		display: unset !important;
	}

}

@media (max-width: 768px) {


	.extension-hero {
		padding: 30px 20px;
		margin: 20px 0;
	}

	.extension-hero h1 {
		font-size: 28px;
		flex-direction: column;
		gap: 16px;
	}

	.extension-hero p {
		font-size: 16px;
	}

	.extension-grid {
		margin: 40px 0;
		gap: 25px;
	}

	.extension-block {
		padding: 25px 20px;
	}

	.security-icon,
	.installation-icon,
	.video-icon {
		width: 60px;
		height: 60px;
		font-size: 24px;
		margin-bottom: 20px;
	}

	.extension-block h3 {
		font-size: 20px;
		margin-bottom: 20px;
	}

	.installation-steps {
		gap: 15px;
	}

	.install-step {
		padding: 15px;
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}

	.install-step:hover {
		transform: none;
	}

	.step-number {
		align-self: center;
	}

	.step-content strong {
		font-size: 15px;
	}

	.step-content span {
		font-size: 13px;
	}

	.cta-section {
		padding: 30px 20px;
		margin: 40px 0;
	}


	.cta-section h2 {
		font-size: 24px;
		flex-direction: column;
		gap: 12px;
	}

	.cta-section p {
		font-size: 16px;
		margin-bottom: 24px;
	}

	.cta-button {
		padding: 14px 28px;
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.extension-hero {
		padding: 25px 15px;
	}

	.extension-grid {
		display: unset !important;
		grid-template-columns: 1fr;
		gap: 40px;
		margin: 60px 0;
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}

	.extension-hero h1 {
		font-size: 24px;
	}

	.extension-hero h1 i {
		font-size: 32px;
	}

	.extension-hero p {
		font-size: 15px;
	}

	.extension-block {
		padding: 20px 15px;
	}

	.extension-block h3 {
		font-size: 18px;
	}

	.security-block p {
		font-size: 14px;
	}

	.install-step {
		padding: 12px;
	}

	.step-number {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}

	.step-content strong {
		font-size: 14px;
	}

	.step-content span {
		font-size: 12px;
	}

	.cta-section {
		padding: 25px 15px;
	}

	.cta-section h2 {
		font-size: 20px;
	}

	.cta-section p {
		font-size: 14px;
	}

	.cta-button {
		padding: 12px 24px;
		font-size: 15px;
		gap: 8px;
	}
}


.form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
}

.btn-submit {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 10px 25px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
}

.btn-cancel {
	background: #6c757d;
	color: white;
	padding: 10px 25px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

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

.progress-bar {
	width: 50px;
	height: 8px;
	background: #444;
	border-radius: 4px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #667eea, #764ba2);
	transition: width 0.3s;
}

.comment-field {
	position: relative;
}

.comment-text {
	cursor: pointer;
	padding: 5px;
	border-radius: 4px;
	min-height: 20px;
}

.comment-text:hover {
	background: #3a3a3a;
}

.comment-input {
	display: none;
	width: 100%;
	padding: 5px;
	background: #1a1a1a;
	border: 1px solid #444;
	border-radius: 4px;
	color: white;
}

.quick-actions {
	position: fixed;
	bottom: 30px;
	right: 30px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.quick-action-btn {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	cursor: pointer;
	font-size: 24px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s;
}

.quick-action-btn:hover {
	transform: scale(1.1);
}

@media (max-width: 1300px) {
	.inventory-stats {
		grid-template-columns: 1fr;
	}

	/* Hide desktop-only elements */
	.desktop-only {
		display: none !important;
	}

	/* Mobile table styling */
	.inventory-table {
		margin: 0 -10px;
		background: transparent;
	}

	.inventory-table table {
		display: block;
		width: 100%;
	}

	.inventory-table thead {
		display: none;
	}

	.inventory-table tbody {
		display: block;
	}

	.inventory-table tr {
		display: block;
		margin-bottom: 20px;
		background: #2b2b2b;
		border-radius: 8px;
		padding: 15px;
		position: relative;
		border: 1px solid #444;
	}

	.inventory-table td {
		display: block;
		text-align: left;
		padding: 8px 0;
		border: none;
		position: relative;
	}

	/* Checkbox at top right */
	.inventory-table td.checkbox-cell {
		position: absolute;
		top: 15px;
		right: 15px;
		padding: 0;
	}

	/* Labels for mobile */
	.inventory-table td:before {
		content: attr(data-label);
		font-weight: bold;
		display: block;
		margin-bottom: 5px;
		color: #aaa;
		text-transform: uppercase;
		font-size: 11px;
		letter-spacing: 1px;
	}

	/* Remove label for checkbox */
	.inventory-table td.checkbox-cell:before {
		display: none;
	}

	/* Event name styling */
	.inventory-table td:nth-child(2) {
		font-size: 16px;
		font-weight: bold;
		padding-top: 0;
		padding-right: 40px;
		/* Space for checkbox */
	}

	/* Status dropdown full width */
	.inventory-table .status-select {
		width: 100%;
		padding: 8px;
		margin-top: 5px;
	}

	/* Progress bar */
	.ticket-progress {
		margin-top: 5px;
	}

	/* Comment field */
	.comment-field {
		background: #1a1a1a;
		padding: 10px;
		border-radius: 4px;
		margin-top: 5px;
	}

	/* Action buttons */
	.action-buttons {
		display: flex;
		gap: 10px;
		margin-top: 10px;
		flex-wrap: wrap;
	}

	.action-btn {
		flex: 1;
		min-width: 60px;
		padding: 8px 12px;
	}

	/* Filter bar mobile */
	.filter-bar {
		flex-direction: column;
		align-items: stretch;
		padding: 10px;
	}

	.filter-bar input,
	.filter-bar select,
	.export-btn {
		width: 100%;
		margin: 5px 0;
	}

	/* Bulk actions mobile */
	.bulk-actions {
		flex-direction: column;
		align-items: stretch;
		padding: 10px;
	}

	.bulk-actions select,
	.bulk-actions button {
		width: 100%;
		margin: 5px 0;
	}

	/* Statistics cards */
	.stat-card {
		padding: 15px;
	}

	.stat-value {
		font-size: 24px;
	}

	.stat-icon {
		font-size: 30px;
	}

	/* Modal mobile */
	.modal-content {
		width: 95%;
		margin: 2% auto;
		padding: 20px;
		max-height: 95vh;
	}

	.form-grid {
		grid-template-columns: 1fr;
	}

	/* Add purchase button */
	.add-purchase-btn {
		width: 100%;
		margin-bottom: 15px;
	}

	/* Highlight important values on mobile */
	.roi-positive,
	.roi-negative {
		font-size: 16px;
		padding: 5px;
		border-radius: 4px;
		display: inline-block;
		margin-top: 5px;
	}

	.roi-positive {
		background: rgba(40, 167, 69, 0.2);
	}

	.roi-negative {
		background: rgba(220, 53, 69, 0.2);
	}
}

.ticket-link {
	color: #667eea;
	text-decoration: none;
	font-weight: 600;
}

.ticket-link:hover {
	text-decoration: underline;
}

.filter-bar {
	background: #2b2b2b;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
	display: flex;
	gap: 15px;
	align-items: left;
	flex-wrap: wrap;
}

.filter-bar input,
.filter-bar select {
	padding: 8px 12px;
	border: 1px solid #444;
	border-radius: 4px;
	background: #1a1a1a;
	color: white;
	box-sizing: border-box;
}

.purchase-row td {
	padding-bottom: 5px;
}

.export-btn {
	background: #17a2b8;
	color: white;
	padding: 8px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-left: auto;
}

.bulk-actions {
	display: none;
	background: #1a1a1a;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 10px;
	align-items: center;
	gap: 10px;
}

.bulk-actions.show {
	display: flex;
	flex-wrap: wrap;
}

.bulk-actions select {
	padding: 5px 10px;
	background: #2b2b2b;
	border: 1px solid #444;
	border-radius: 4px;
	color: white;
	cursor: pointer;
}

.bulk-actions span {
	font-weight: 600;
	margin-right: 10px;
}

#selectedCount {
	color: #667eea;
	font-size: 18px;
	margin: 0 5px;
}

.checkbox-cell {
	width: 40px;
	text-align: center;
}

.custom-checkbox {
	width: 20px;
	height: 20px;
	cursor: pointer;
	accent-color: #667eea;
	position: relative;
	z-index: 99999;
}

.custom-checkbox:checked {
	background-color: #667eea;
}

tr.selected {
	background-color: rgba(102, 126, 234, 0.1) !important;
}


#search-results {
	position: absolute;
	top: 100%;
	color: #cecece;
	left: 0;
	right: 0;
	background: #2f2e2e;
	/*! border: 1px solid #ccc; */
	/*! max-height: 100%; */
	/*! overflow-y: auto; */
	z-index: 100;
	box-sizing: border-box;
	text-align: center;
	line-height: 20px;
	/*! margin-bottom: 20px; */
}


.search-item {
	color: #cecece;
	padding: 2px 0px 2px 0px;
	border-bottom: 1px solid #535252;
	font-size: 17px;
	font-weight: normal;
}

.search-item:hover {
	color: white;
	background: grey;
	cursor: pointer;
}


#search-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 50;
	/* unterhalb der Suchergebnisse */
}


.livesearch {
	/*! background:#3f4346; */
	position: relative;
	z-index: 9999;
	margin-bottom: 20px;
}

.livesearch input {
	background: #2b2b2b59;
	color: white;
	border: 0px;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	/*! margin-bottom: 20px; */
}


/* Navigation Styles - Dark Theme */
.sidebar {
	position: fixed;
	left: 0;
	top: 0;
	width: 200px;
	height: 100vh;
	background: #1a1a1a;
	border-right: 1px solid #333;
	z-index: 1000;
	overflow-y: auto;
	transition: all 0.3s ease;
	box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

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

.logopage {
	text-align: center;
	padding: 20px;
	border-bottom: 1px solid #333;
	margin-bottom: 20px;
}

.logopage img {
	max-width: 150px;
	height: auto;
}

/* Menu Structure */
.menu {
	padding: 0 15px;
	/*! width: 100%; */
}

/* Section Headers (nicht klickbar) */
.menu-section {
	color: #888;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 25px 15px 10px 15px;
	padding-bottom: 5px;
	border-bottom: 1px solid #333;
}

/* Menu Links */
.menu a {
	display: block;
	color: #ccc;
	text-decoration: none;
	padding: 8px 15px;
	/*! margin: 2px 0; */
	border-radius: 6px;
	transition: all 0.3s ease;
	font-size: 14px;
	position: relative;
}

/* Main menu items (not submenu) get full left alignment */
.menu>a {
	padding-left: 15px;
}


h3 {
	color: white;
	font-weight: bold;
	margin-bottom: 10px;
	font-size: 19px;
}

.menu a:hover {
	background: #2a2a2a;
	color: #fff;
	transform: translateX(3px);
}

.menu a.active {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
	/*! width: 100%; */
}

.menu a i {
	width: 10px;
	margin-right: 10px;
	text-align: center;
	font-size: 14px;
}

/* Submenu Items (eingerückt) */
.menu a.submenu {
	padding-left: 35px;
	font-size: 15px;
	color: #aaa;
	margin-left: 0;
}

.menu a.submenu:hover {
	color: #fff;
	background: #2a2a2a;
	transform: translateX(5px);
}

.menu a.submenu::before {
	content: '•';
	position: absolute;
	left: 25px;
	color: #666;
}

/* Content Layout anpassen */
.content-wrapper {
	margin-left: 200px;
	transition: margin-left 0.3s ease;
	min-height: 100vh;
}


/* Mobile Navigation */
@media (max-width: 1200px) {
	.sidebar {
		left: -250px;
	}

	.sidebar.open {
		left: 0;
	}

	.content-wrapper {
		margin-left: 0;
	}


	.toggle-button:hover {
		background: #2a2a2a;
	}

	/* Overlay für Mobile */
	body.menu-open::after {
		content: '';
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}
}

/* Hide mobile elements on desktop */
@media (min-width: 1200px) {
	.toggle-button {
		display: none;
	}

	.mobilewrapper {
		display: none;
	}
}


.logopage {
	max-width: 203px;
	float: left;
}


.sidebar.overlay {
	background-color: rgb(148, 159, 162);
	z-index: 2000;
	border-right: 1px solid #3c3c3c;
}

.sidebar h2 {
	margin-top: 0;
	text-transform: uppercase;
	font-size: 14px;
}

.logo a {
	display: block;
	margin: 0p
}


#info-modal h3 {
	font-size: 20px;
	margin-bottom: 20px;
}

#info-modal {
	line-height: 20px;
}

.sidebar a {
	/*! color: #000; */
	text-decoration: none;
	/*! margin: 0px 0; */
	/*! margin-left: 29px; */
	font-size: 16px;
}

.footerlinks {
	color: #625e5e;
}

.footerlinks a {
	color: #625e5e;
	text-decoration: none;
	display: inline-block;
	margin: 10px 0;
	font-size: 13px;
	color: #717171 !important;
}

.sidebar a:hover {
	color: #e9e9e9;
}

.update-msg {
	background: #182028;
	text-align: center;
	line-height: 28px;
	font-weight: 100;
	padding: 24px;
	font-size: 15px;
	line-height: 20px;
	margin-top: 57px;
	color: #fff;
}

.update-msg a {
	font-weight: bold;
	color: #fff !important;
}

.update-msg h5 {
	font-weight: 600;
	font-size: 19px;
	margin-bottom: 10px
}

.rounded-circle .fa-hand-peace {
	margin: 0px auto;
	margin-top: -40px;
	border-radius: 64px;
	padding: 13px;
	border: 5px solid #182028;
	top: -19px;
	position: relative;
	background: #000101;
	width: 20px;
	height: 20px;
	color: #E2DFD2;
	font-size: 23px;
}


.content-wrapper h4 {
	color: white;
	font-weight: bold;
	font-size: 24px;
	margin-bottom: 20px;
	font-weight: uppercase;
	text-transform: uppercase;
}

.step-text h4 {
	font-size: 20px;
	padding: 0px;
}

.form-inline {
	text-align: right;
	color: white;
	/*! margin-bottom: 20px; */
	margin-top: 10px;
}

.start #viagogo {
	margin-bottom: 60px;
}

#filterForm {
	margin-bottom: 10px;
}

select {
	background: #182028;
	color: white;
	border: 0px;
	padding: 10px;
	border: 1;
	border-radius: 7px;
	border: 1px solid #888787;
	box-sizing: border-box;
}

.form-inline label {
	margin-left: 20px
}

#viagogo {
	margin-bottom: 20px;
	color: white !important;
}

#viagogo h2 {
	color: #1a1a1a;
}


.filter {
	margin-bottom: 20px;
}

#eventheader h2 {
	margin-top: 0px !important;
}

.button {
	background: #1A1A1A;
	padding: 20px 20px;
	display: inline-block;
	margin: 20px 0px;
	color: #fff;
	text-decoration: none
}


.statistics h2 {
	color: white !important
}

.shart h2 {
	color: black !important;
}

.content-wrapper h2 {
	font-size: 24px;
	margin: 20px 0px 20px 0px;
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
}

.important_infos h2 {
	font-size: 24px;
	margin: 0px 0px 20px 0px;
	font-weight: 600;
	color: #151515;
}

#header {
	padding: 36px 0px 0px 0px;
	font-size: 25px;
	font-weight: 600;
	/*! margin-bottom: 15px; */
}

.welcome {
	float: left;
	color: #fff;
}

.right_header {
	float: right
}

.profilepic img {
	width: 48px;
	border-radius: 20px;
}

.profile-dropdown {
	position: relative;
	display: inline-block;
}

#settings {
	background: #2b2b2b59;
	padding: 30px;
	color: white;
	text-align: center;
	line-height: 40px
}

#settings h2 {
	font-size: 30px;
}

#settings .notice {
	color: red
}

.profile-dropdown-content {
	display: none;
	position: absolute;
	right: 0;
	background-color: #f1f1f1;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
	border-radius: 8px;
}

.profile-dropdown-content a {
	color: black;
	padding: 10px 16px;
	text-decoration: none;
	display: block;
	border-radius: 8px;
	font-size: 14px;
}

.profile-dropdown-content a:hover {
	background-color: #ddd;
}

.profilepic img {
	cursor: pointer;
}

.profile-dropdown.show .profile-dropdown-content {
	display: block;
}

#addEventButton,
.redbutton,
#update-button,
#update-button2 {
	background: #d70606;
	color: #0f1319;
	padding: 9px;
	color: white !important;
	border-radius: 8px;
	margin-top: 10px;
}

#addEventButton i {
	color: white !important
}

a.redbutton {
	color: white;
	text-decoration: none;
	margin-top: 20px;
	display: inline-block;
}

.content {
	/*! width: 100%; */
	max-width: 1300px;
	margin: 0px auto;
	padding: 0px 20px;
}

.event-details table,
.event-list table,
#activeTicketsTable,
#soldTicketsTable {
	color: white;
	font-size: 14px;
	font-family: sans-serif;
}

#activeTicketsTable a {
	color: white
}

.event-details table td,
.event-list table td {
	border: 0px;
}

.event-details tbody tr:nth-child(even),
.event-list tbody tr:nth-child(even) {
	background-color: #1b232d;
}

.event-details tbody tr:hover,
.event-list tbody tr:hover {
	background-color: #2e52a6 !important;
}

.list-group {
	color: white;
	min-width: 25px;
	text-align: left;
	min-height: 25px;
	line-height: 20px;
}

.list-group a {
	color: #cacaca;
	text-decoration: none;
	font-size: 17px !important;
}

.list-group-item {
	border-bottom: 1px solid #797979;
	padding: 13px;
	position: relative;
	padding-right: 111px;
}

.list-group-item img {
	width: 30px;
}

.list-group-item {
	background-color: #2b2b2b59;
}

.list-group-item:hover {
	background: #2b2b2b
}

.list-group .badge {
	position: absolute;
	top: 10px;
	right: 20px;
	padding: 8px 8px 7px 8px;
	background: #222;
	color: white;
	border-radius: 17px;
	min-width: 25px;
	text-align: center;
}

.landicon {
	position: absolute;
	right: 70px;
	font-size: 25px;
	margin-top: 5px;
}

.my-4 {
	/*! margin-top: 1.5rem; */
	margin-bottom: 1.5rem;
}

.row {
	display: flex;
	flex-wrap: wrap;
	/*! margin-left: -0.5rem; */
	/*! margin-right: -0.5rem; */
}

.row .col-md-6 {
	flex: 0 0 50%;
	max-width: 50%;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	box-sizing: border-box;
}

#message {
	padding: 10px;
	color: #fff;
	background-color: red;
	margin-bottom: 10px;
	position: fixed;
	width: 100%;
	text-align: center;
	font-size: 19px;
	padding: 4px 0px;
	top: 0px;
	font-weight: 600;
	left: 0px;
	z-index: 99999;
}

#message.success {
	background-color: #549f54;
}

.tooltip {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 153px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 10px 0;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

.category-container {
	color: white;
	padding: 10px;
	margin: 10px 0px 10px 0px;
	font-size: 23px;
	margin-left: 0px;
	padding-left: 0px;
}

.category-container select {
	border: 1px solid #303f50;
	padding: 10px;
	background: white;
	color: black;
	text-decoration: none;
}

.datepicker-container input {
	background: #131920;
	color: white;
	border: 0px;
	font-size: 21px;
	padding: 10px;
	text-align: center;
	border-radius: 7px;
}

.diagramms,
.important_infos,
.salescat {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
}

.fa-comments-dollar {
	background: rgba(13, 110, 253, .2);
	color: #4680ff;
	padding: 10px;
	border-radius: 10px
}

.blue {
	color: #4680ff;
}

.red {
	color: #dc2626;
}

.blue2 {
	color: #3ff6ff;
}

.red2 {
	color: #b92dbd;
}

.green {
	color: #2ca87f;
}

.yellow {
	color: #e58a00;
}

.important_infos .fa-calendar-day {
	background: rgba(117, 21, 145, 0.2);
	color: #b92dbd;
	padding: 10px;
	border-radius: 10px
}

.important_infos .fa-trophy {
	background: rgba(255, 193, 7, .2);
	color: #e58a00;
	padding: 10px;
	border-radius: 10px
}

.important_infos .fa-fire {
	background: rgba(25, 135, 84, .2);
	color: #2ca87f;
	padding: 10px;
	border-radius: 10px
}

.important_infos .fa-ticket {
	background: rgba(220, 53, 69, .2);
	color: #dc2626;
	padding: 10px;
	border-radius: 10px
}

.important_infos .fa-chart-line {
	background: rgba(79, 180, 219, 0.2);
	color: #3ff6ff;
	padding: 10px;
	border-radius: 10px
}

.eventdetails .block_inside {
	background: #2b2b2b;
	padding: 3px;
	color: rgb(255, 255, 255);
	font-size: 26px;
	text-align: center;
}

.tooltip,
small {
	font-size: 14px;
}


/* Extension Page Specific Styles */


/* Extension Page Specific Styles */

.extension-hero {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 20px;
	padding: 50px;
	text-align: center;
	margin: 40px 0;
	color: white;
	box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
}

.extension-hero h1 {
	font-size: 42px;
	font-weight: 700;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.extension-hero h1 i {
	font-size: 48px;
	color: #fbbf24;
}

.extension-hero p {
	font-size: 20px;
	opacity: 0.9;
	max-width: 800px;
	margin: 0 auto;
	line-height: 1.6;
}

.extension-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	margin: 60px 0;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.extension-block {
	background: white;
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.extension-block::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
}

.extension-block:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.security-block {
	grid-column: 1;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 2px solid #bbf7d0;
}

.security-block::before {
	background: linear-gradient(90deg, #059669, #10b981);
}

.security-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #059669 0%, #047857 100%);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
	color: white;
	font-size: 32px;
	box-shadow: 0 10px 25px rgba(5, 150, 105, 0.3);
}

.security-block h3 {
	color: #065f46;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 20px;
	text-align: center;
}

.security-block p {
	color: #047857;
	line-height: 1.7;
	font-size: 16px;
	text-align: center;
}

.security-block .note {
	background: #fef3c7;
	border: 2px solid #f59e0b;
	border-radius: 12px;
	padding: 16px;
	margin-top: 20px;
	color: #92400e;
	font-weight: 600;
	text-align: center;
}

.installation-block {
	grid-column: 2;
}

.installation-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
	color: white;
	font-size: 32px;
	box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.installation-block h3 {
	color: #1e293b;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 30px;
	text-align: center;
}

.installation-steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.install-step {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
	background: #f8fafc;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	transition: all 0.2s ease;
}

.install-step:hover {
	background: #f1f5f9;
	transform: translateX(5px);
}

.step-number {
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	color: white;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
}

.step-content {
	flex: 1;
}

.step-content strong {
	color: black !Important;
	font-size: 16px;
	display: block;
	margin-bottom: 4px;
}

.step-content span {
	color: #64748b;
	font-size: 14px;
	line-height: 1.5;
}

.step-content a {
	color: #3b82f6;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.step-content a:hover {
	color: #1d4ed8;
	text-decoration: underline;
}

.step-content code {
	background: #e2e8f0;
	padding: 2px 6px;
	border-radius: 4px;
	font-family: 'Courier New', monospace;
	font-size: 13px;
	color: #475569;
}

.video-block {
	grid-column: 3;
}

.video-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
	color: white;
	font-size: 32px;
	box-shadow: 0 10px 25px rgba(220, 38, 38, 0.3);
}

.video-block h3 {
	color: #1e293b;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 24px;
	text-align: center;
}

.video-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	/* 16:9 aspect ratio */
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.video-description {
	text-align: center;
	margin-top: 16px;
	color: #64748b;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.video-description i {
	color: #dc2626;
}

.cta-section {
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
	border-radius: 20px;
	padding: 50px;
	text-align: center;
	margin: 60px 0;
	border: 2px solid #cbd5e1;
}

.cta-section h2 {
	color: #1e293b;
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.cta-section h2 i {
	color: #3b82f6;
}

.cta-section p {
	color: #475569;
	font-size: 18px;
	margin-bottom: 32px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.cta-button {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	color: white;
	padding: 16px 32px;
	border-radius: 12px;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
	background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

/* Responsive Design */
@media (min-width: 768px) and (max-width: 1199px) {
	.extension-grid {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
		max-width: 900px;
	}

	.security-block {
		grid-column: 1;
	}

	.installation-block {
		grid-column: 2;
	}

	.video-block {
		grid-column: 1 / -1;
		/* Spans both columns, goes to next row */
		margin-top: 20px;
	}
}

@media (min-width: 1200px) {
	.extension-grid {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 40px;
		max-width: none;
	}

	.security-block {
		grid-column: 1;
	}

	.installation-block {
		grid-column: 2;
	}

	.video-block {
		grid-column: 3;
	}

}

@media (max-width: 768px) {

	.otp-icon {
		display: none !important;
	}

	.feature {
		margin: 5px auto;
	}

	.feature .fa-solid {
		display: none
	}

	.otp-hero {
		display: block
	}

	.extension-preview {
		margin-top: 30px
	}

	.event-header-info .btn-favorite {
		/* position: absolute !important; */
		top: 18px !important;
		text-align: right;
		padding: 0px;
	}
	
	.event-header-info .notification-btn , .event-header-info .btn-favorite {width:32px !important;padding:0px;margin-left:20px;}

	

	.extension-grid {
		display: unset !important;

	}

	.step-icon {
		display: none !important;
	}

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

	.step-content {
		width: 100%;
	}

	.extension-hero {
		padding: 30px 20px;
		margin: 20px 0;
	}

	.extension-hero h1 {
		font-size: 28px;
		flex-direction: column;
		gap: 16px;
	}

	.extension-hero p {
		font-size: 16px;
	}

	.extension-grid {
		margin: 40px 0;
		gap: 25px;
	}

	.extension-block {
		padding: 25px 20px;
	}

	.security-icon,
	.installation-icon,
	.video-icon {
		width: 60px;
		height: 60px;
		font-size: 24px;
		margin-bottom: 20px;
	}

	.extension-block h3 {
		font-size: 20px;
		margin-bottom: 20px;
	}

	.installation-steps {
		gap: 15px;
	}

	.install-step {
		padding: 15px;
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}

	.step-text {
		width: 100%;
	}

	.install-step:hover {
		transform: none;
	}

	.step-number {
		align-self: center;
	}

	.step-content strong {
		font-size: 15px;
	}

	.step-content span {
		font-size: 13px;
	}

	.cta-section {
		padding: 30px 20px;
		margin: 40px 0;
	}

	.cta-section h2 {
		font-size: 24px;
		flex-direction: column;
		gap: 12px;
	}

	.cta-section p {
		font-size: 16px;
		margin-bottom: 24px;
	}

	.cta-button {
		padding: 14px 28px;
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.extension-hero {
		padding: 25px 15px;
	}

	.extension-block {
		margin-bottom: 20px;
	}

	.extension-grid {
		grid-template-columns: 1fr;
		gap: 40px;
		margin: 60px 0;
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}

	.extension-hero h1 {
		font-size: 24px;
	}

	.extension-hero h1 i {
		font-size: 32px;
	}

	.extension-hero p {
		font-size: 15px;
	}

	.extension-block {
		padding: 20px 15px;
	}

	.extension-block h3 {
		font-size: 18px;
	}

	.security-block p {
		font-size: 14px;
	}

	.install-step {
		padding: 12px;
	}

	.step-number {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}

	.step-content strong {
		font-size: 14px;
	}

	.step-content span {
		font-size: 12px;
	}

	.cta-section {
		padding: 25px 15px;
	}

	.cta-section h2 {
		font-size: 20px;
	}

	.cta-section p {
		font-size: 14px;
	}

	.cta-button {
		padding: 12px 24px;
		font-size: 15px;
		gap: 8px;
	}
}


#eventheader {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom: 20px;
}

.inventory #eventheader {
	background: #0f1319;
	padding: 20px 20px;
}

.eventdetails .left {
	flex: 2;
	padding: 23px;
	background: #2b2b2b;
	font-size: 16px;
	line-height: 25px;
}

.eventdetails .right {
	display: flex;
	align-items: stretch;
	flex: 1;
}

.eventdetails .image-block {
	width: 100%;
	background-size: cover;
	background-position: center center;
	height: 100%;
}

.eventdetails .map {
	cursor: pointer;
}

.eventdetails .block {
	flex: 1 1 calc(25% - 10px);
	box-sizing: border-box;
	padding: 18px;
	background: #2b2b2b;
	/* width: 100%; */
	text-align: center;
}

.block canvas {
	width: 100%;
	height: 400px;
}


.bigsize {
	font-size: 21px;
}

.smalltable {
	height: 215px;
	min-height: 215px !important
}

#info-details strong {
	color: black !important;
}

/* Extension Page Specific Styles */

.extension-hero {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 20px;
	padding: 50px;
	text-align: center;
	margin: 40px 0;
	color: white;
	box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
}

.extension-hero h1 {
	font-size: 42px;
	font-weight: 700;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.extension-hero h1 i {
	font-size: 48px;
	color: #fbbf24;
}

.extension-hero p {
	font-size: 20px;
	opacity: 0.9;
	max-width: 800px;
	margin: 0 auto;
	line-height: 1.6;
}

.extension-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
	margin: 60px 0;
}

.extension-block {
	background: white;
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	border: 1px solid #e2e8f0;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.extension-block::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
}

.extension-block:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.security-block {
	grid-column: 1;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border: 2px solid #bbf7d0;
}

.security-block::before {
	background: linear-gradient(90deg, #059669, #10b981);
}

.security-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #059669 0%, #047857 100%);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
	color: white;
	font-size: 32px;
	box-shadow: 0 10px 25px rgba(5, 150, 105, 0.3);
}

.security-block h3 {
	color: #065f46;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 20px;
	text-align: center;
}

.security-block p {
	color: #047857;
	line-height: 1.7;
	font-size: 16px;
	text-align: center;
}

.security-block .note {
	background: #fef3c7;
	border: 2px solid #f59e0b;
	border-radius: 12px;
	padding: 16px;
	margin-top: 20px;
	color: #92400e;
	font-weight: 600;
	text-align: center;
}

.installation-block {
	grid-column: 2;
}

.installation-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
	color: white;
	font-size: 32px;
	box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.installation-block h3 {
	color: #1e293b;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 30px;
	text-align: center;
}

.installation-steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.install-step {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
	background: #f8fafc;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	transition: all 0.2s ease;
}

.install-step:hover {
	background: #f1f5f9;
	transform: translateX(5px);
}

.step-number {
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	color: white;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
}

.step-content {
	flex: 1;
}

.step-content strong {
	color: #1e293b;
	font-size: 16px;
	display: block;
	margin-bottom: 4px;
}

.step-content span {
	color: #64748b;
	font-size: 14px;
	line-height: 1.5;
}

.step-content a {
	color: #3b82f6;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.step-content a:hover {
	color: #1d4ed8;
	text-decoration: underline;
}

.step-content code {
	background: #e2e8f0;
	padding: 2px 6px;
	border-radius: 4px;
	font-family: 'Courier New', monospace;
	font-size: 13px;
	color: #475569;
}

.video-block {
	grid-column: 3;
}

.video-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
	color: white;
	font-size: 32px;
	box-shadow: 0 10px 25px rgba(220, 38, 38, 0.3);
}

.video-block h3 {
	color: #1e293b;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 24px;
	text-align: center;
}

.video-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	/* 16:9 aspect ratio */
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.video-description {
	text-align: center;
	margin-top: 16px;
	color: #64748b;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.video-description i {
	color: #dc2626;
}

.cta-section {
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
	border-radius: 20px;
	padding: 50px;
	text-align: center;
	margin: 60px 0;
	border: 2px solid #cbd5e1;
}

.cta-section h2 {
	color: #1e293b;
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.cta-section h2 i {
	color: #3b82f6;
}

.cta-section p {
	color: #475569;
	font-size: 18px;
	margin-bottom: 32px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.cta-button {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	color: white;
	padding: 16px 32px;
	border-radius: 12px;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
	background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

/* Responsive Design */
@media (max-width: 1200px) {
	.extension-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.extension-hero {
		padding: 40px 30px;
	}

	.extension-hero h1 {
		font-size: 32px;
		flex-direction: column;
		gap: 16px;
	}
}

@media (max-width: 768px) {
	.extension-hero {
		padding: 30px 20px;
	}

	.extension-hero h1 {
		font-size: 28px;
	}

	.extension-hero p {
		font-size: 16px;
	}

	.extension-block {
		padding: 30px 20px;
	}

	.cta-section {
		padding: 40px 20px;
	}

	.cta-section h2 {
		font-size: 24px;
		flex-direction: column;
	}
}

.nodata {
	font-weight: bold;
	color: white;
	font-size: 20px;
	text-align: center
}

.nodatax {
	font-weight: bold;
	color: #fff;
	font-size: 20px;
	text-align: center;
	background: #15151587;
	padding: 20px;
	margin: 11px 0px;
}

.sales h3,
.salescat h3 {
	color: rgba(255, 255, 255, 0.8);
	font-weight: bold;
	text-transform: uppercase;
	padding: 0px 0px 20px 0px;
	font-size: 20px
}

.nextevent {
	color: white;
	color: red;
	text-align: center
}

.inside_table,
.inside_tablex {
	min-height: 462px;
	overflow: auto;
	resize: vertical;
	height: 290px;
	background: #2b2b2b;
}

.inside_table::-webkit-resizer {
	width: 16px;
	height: 16px;
	background-color: #ff0000 !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 12px 12px !important;
	background-image: url("https://static.ticklytics.app/images/icon.png") !important;
}

.inside_table_cat {
	min-height: 200px;
	overflow: auto;
	resize: vertical;
	height: 400px;
}

.clear {
	clear: both;
}

.dashboard .block_inside {
	float: left
}

.dashboard i {
	float: right;
	background: #1E2327;
	padding: 20px;
	border-radius: 100px;
	color: #fff;
}

.dashboard .ue {
	font-weight: 600;
	color: white;
}

.dashboard .value {
	font-size: 36px;
	display: block;
	margin-top: 10px;
	font-weight: 100;
	color: white;
}

.event-box .fire {
	position: absolute;
	top: 5px;
	right: 5px;
	padding: 13px;
	background: #fffbfb57;
	border-radius: 42px;
	font-weight: 400;
	min-width: 22px;
	text-align: center;
}

.event-box h3 {
	font-weight: 900
}

.ui-dialog {
	background: #202221 !important;
	color: white !important;
	border-radius: 10px !important
}

.ui-widget-header {
	background: #426c9c !important;
	border: 0px !important;
	color: white !important;
	display: none !important
}

.ui-widget-content {
	color: white !important;
	line-height: 30px;
}

#map-dialog {
	background: white
}

#addEventDialog {
	min-height: 10px !important;
}

#eventUrl {
	width: 360px
}

#activeTicketsTable tbody tr:nth-child(2n) {
	background-color: #4f4f4f;
}

.sample {
	color: white;
	font-size: 10px
}

.uploadcsv {
	margin-top: 20px;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none;
	text-align: center;
	text-align: center;
}

.ui-dialog-buttonpane {
	background: #202221 !important;
	text-align: center
}

.ui-widget.ui-widget-content {
	border: 1px solid #605e5e !important
}

.event-box {
	position: relative;
	width: calc(20% - 10px);
	box-sizing: border-box;
	background-color: #2b2b2b59;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	line-height: 24px;
	font-weight: 300;
	flex-grow: 1;
	border: 1px solid #333;
	border-radius: 6px;
	/*! color: white; */
}

.calender-box {
	width: calc(20% - 10px) !important;
}

.event-box a {
	color: #f1f2f2;
	text-decoration: none
}

.event-box-content {
	padding: 10px
}

.event-box img {
	width: 100%;
	max-width: none;
	height: auto;
	border-radius: 5px 5px 0px 0px;
}

.diagramms,
.important_infos,
.salescat,
.event-box-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.event-block {
	flex: 1 1 calc(25% - 10px);
	box-sizing: border-box;
	padding: 20px;
	background: rgb(32, 34, 33) !important;
	border-radius: 8px;
}

.important_infos i {
	font-size: 20px
}

.diagramms,
.important_infos,
.salescat,
.extension {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	margin-top: 11px;
}

.invoicegen .block {
	background: #d2d2d2 !important;
}

.chartbg {
	background: white !important;
}

.salescat #salesByCategoryChart {
	background: white
}

.diagramms div {
	/*! background: white !important; */
}

.dashboard .block {
	flex: 1 1 calc(25% - 10px);
	box-sizing: border-box;
	padding: 20px;
	background: linear-gradient(180deg, #8DBFF0, #4F7BB4);
	background: #949FA2;
}

.shart .block {
	background: white;
	background: #ffffffe8 !important;
}

.extension .block {
	flex: 1 1 calc(20% - 10px);
	box-sizing: border-box;
	padding: 20px;
	background: white;
	line-height: 17px;
	color: black;
	font-size: 17px !important;
	line-height: 21px !important;
}

.extension .block a {
	color: #2a59dc
}

.extension .block:first-child {
	line-height: 30px;
	font-size: 20px
}

#viagogo .block {
	background: #15151587;
}

.dashboard .fullsizeblock {
	box-sizing: border-box;
	padding: 20px;
	background: #9abeff;
	border-radius: 8px;
	height: 400px;
}

.dashboard .chart-container {
	background: #fff;
	border-radius: 0px;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 10px 10px 10px 10px;
	text-align: left;
	vertical-align: middle !important;
}

tr {
	border-bottom: 1px dashed #4a4a51d1
}

tr.gruen {
	background: #0d4a0d
}

td[contenteditable="true"] {
	font-size: 0.9rem;
}

thead tr {
	border-bottom: 0px
}

#eventTableBody th,
#eventTableBody td {
	padding: 0px 10px 0px 10px;
	text-align: left;
	vertical-align: middle;
}

thead {
	color: rgb(255 255 255);
	font-weight: 600;
	border-radius: 20px;
}

thead th {
	vertical-align: middle;
	background: #0f1319;
}

.event {
	cursor: pointer;
}

.favorite {
	color: #a8a6a6;
	background: none;
	border: 0px;
	font-size: 24px;
	cursor: pointer
}

#favoriteBtn.checked,
#favoriteBtn:hover {
	color: #ffc833;
}

.favorite:hover {
	color: #ffc833;
	background: none;
	border: 0px;
	cursor: pointer
}

.favorite.checked {
	color: #ffc833;
	background: none;
	border: 0px;
	/*! font-size: 24px; */
	cursor: pointer
}

.event-list {
	border-radius: 2px;
	/*! background: #395e8e; */
	line-height: 18px;
}

.event-list .emoji {
	font-size: 20px;
}

.event-list .emoji:nth-child(1) {
	top: 46px;
}

.event-list .emoji img {
	width: 30px;
	/* top: 30px !important; */
}

tr:nth-child(-n+5) span.number {
	display: block;
	color: rgb(251, 80, 89) !important;
	border: 1px solid rgb(238, 77, 86) !important;
	border-radius: 10px;
	text-align: center;
	width: 40px;
	padding: 2px
}

tr:nth-child(n+6):nth-child(-n+10) span.number {
	display: block;
	color: rgb(74, 149, 67) !important;
	border: 1px solid rgb(87, 147, 83) !important;
	border-radius: 10px;
	text-align: center;
	width: 40px;
	padding: 2px
}

tr:nth-child(n+10):nth-child(-n+200) span.number {
	display: block;
	color: black;
	border: 1px solid rgb(0, 0, 0) !important;
	border-radius: 10px;
	text-align: center;
	width: 40px;
	padding: 2px
}

#eventTable a {
	color: #73a5e6 !important;
}

.event-details table,
.event-list table tbody,
#activeTicketsTable,
#soldTicketsTable,
.complete_sales table,
.active_listings table,
.infoverkauefe table, .open_sales table {
	color: white;
	font-size: 14px;
	font-family: sans-serif;
	background: #2b2b2bc2;
}





#eventTable .eventimg {
	border-radius: 40px;
	width: 50px;
	height: 50px;
}

table .minwidth {
	min-width: 80px;
}

.activeTicketsTable {
	width: 100%;
	overflow: auto;
	max-height: 800px;
}

.complete_sales,
.active_listings,
.open_sales {
	overflow: hidden;
	height: 406px;
	overflow-y: auto;
	overflow-x: auto;
	background: #2b2b2b;
	resize: vertical;
	font-size: 21px;
}

.infoverkauefe {
	overflow: hidden;
	min-height: 479px !important;
	overflow-y: auto;
	overflow-x: auto;
	background: #fff;
	resize: vertical;
	max-height: 900px;
}

#activeTicketsTable a {
	color: white;
}

#activeTicketsTable button a {
	text-decoration: none
}

.event-details table td,
.event-list table td {
	border: 0px;
}

.event-details tbody tr:nth-child(even),
.event-list tbody tr:nth-child(even),
.complete_sales tbody tr:nth-child(even),
.infoverkauefe table tbody tr:nth-child(even),
.open_sales table tbody tr:nth-child(even) {
	background-color: #4f4f4f87;
}

.event-details tbody tr:hover,
.event-list tbody tr:hover {
	background-color: #0f1319 !important;
	color: white;
}

#search {
	border: 0px;
	padding: 10px;
	color: white;
	text-decoration: none;
	width: 26%;
	border-radius: 8px;
	font-size: 13px;
	background: #182028;
	border: 1px solid #888787;
	/*! margin-left: 20px; */
	max-width: 100%;
	/*! display: block; */
	box-sizing: border-box;
}

.filter select {
	border: 0px;
	padding: 20px;
	background: #949FA2;
	color: black;
	text-decoration: none;
	border-radius: 8px;
	margin-left: 5px;
}

.filter select option {
	color: black;
}

#overlay {
	position: fixed;
	color: white;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 9999;
	display: none;
	justify-content: center;
	align-items: center;
}

#loading-image {
	width: 100px;
	height: 100px;
}

.sales {
	padding: 45px 0px 20px 0px;
	border-top: 1px solid #ebf0f5;
}

.eventdetails .sales {
	padding: 34px 0px 0px 0px;
	border-top: 0px solid #ebf0f5;
}

.eventdetails .block .ue {
	margin-left: 10px;
	color: rgb(255, 255, 255);
	font-weight: bold;
	text-transform: uppercase;
}

.sales h3 {
	color: rgb(255, 255, 255);
	font-weight: bold;
	text-transform: uppercase;
	padding: 0px 0px 20px 0px;
	font-size: 20px
}

.table-filter {
	text-align: right;
	margin-bottom: 10px
}

.table-search {
	background: #182028;
	color: white;
	border: 0px;
	padding: 10px;
	border: 1;
	border-radius: 7px;
	border: 1px solid #888787;
}

.salescat h3 {
	color: rgb(255, 255, 255);
	font-weight: bold;
	text-transform: uppercase;
	padding: 0px 0px 20px 0px;
	font-size: 20px
}

.eventdetails #eventheader {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	color: #fff;
	font-size: 19px;
	background-color: #f2f2f2;
	background-position: center left;
	background-size: 100%;
	line-height: 31px;

	margin-bottom: 0px;
	overflow: hidden;
}

.eventdetails #eventheader a {
	color: #fff;
}

#eventheader .right {
	display: flex;
	align-items: stretch;
	flex: 1;
	text-align: center;
}

.uploadcsv {
	margin-top: 20px;
	color: white;
}

.inventory {
	flex: 1 1 calc(25% - 10px);
}

#rechnungsdetails span {
	padding-bottom: 6px;
}

.texblock {
	line-height: 30px
}

.texblock h2 {
	color: #0f1319;
}

#rechnungsdetails input[type="text"] {
	display: block;
	width: 97%;
	margin-top: 5px;
}

.ui-widget-overlay {
	background: #000000 !important;
	opacity: 0.7 !important;
}

.disabled {
	width: 200px;
	height: 24px;
	display: block;
	position: absolute;
}

button {
	cursor: pointer;
	border: 0px;
	padding: 10px 10px 11px 10px;
	background: #4f4f4f;
	color: white;
	text-decoration: none;
}

.shortlinks {
	margin-top: 10px;
}

#shortlinkForm button {
	padding: 5px
}

#categoryButton2 {
	color: #000;
	padding: 20px;
	font-size: 18px;
	width: 100%;
	background: #dbdbdb !important;
}

#genreButton,
#categoryButton2.categoryButton {
	border: 0px;
	padding: 20px;
	background: #949FA2;
	color: black;
	text-decoration: none;
	border-radius: 8px;
	margin-left: 5px;
	font-size: 13px;
}

.right {
	position: relative
}

.favbutton {
	position: absolute;
	right: 0px;
	top: 0px;
}

.favbutton button {
	width: 50px;
	height: 50px;
	font-size: 20px;
}

#sendToDiscord {
	background: #202221;
	padding: 5px 10px;
	color: white;
}

#rechnungsdetails button {
	margin-top: 20px
}

#rechnungsdetails input,
.inventory input {
	border: 0px;
	padding: 6px 0px 8px 10px;
	background: rgb(255, 255, 255) !important;
	color: black;
	text-decoration: none;
}

#fullbg {
	background: #000000bd;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	z-index: 99999;
	height: 100%;
	cursor: pointer
}

#welcomeDiv img {
	min-width: 343px;
	border: 1px solid white;
}

.dropdown {
	display: inline-block;
}

.dropdown label:hover {
	background: #605e5e
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: rgb(30, 35, 39) !important;
	min-width: 208px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 7;
	font-size: 14px;
	border: 1px solid #393939;
	line-height: 19px;
	padding: 7px;
	overflow: auto;
	margin-left: 5px;
	margin-top: -2px;
	color: #ececec;
	max-height: 400px;
	text-align: left;
}

#loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #1a1a1a;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}

.spinner {
	border: 8px solid #f3f3f3;
	border-top: 8px solid #007bff;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.dropdown-content label {
	display: block;
}

.dropdown input[type="checkbox"]:not(:checked):not(:disabled) {
	accent-color: #373539;
	color: #373539;
	background: #fff;
	appearance: none;
	appearance: none;
	margin-bottom: 0;
	width: 14px;
	height: 12px;
	border: 1px solid #888;
}

.dropdown input[type="checkbox"] {
	accent-color: #373938;
}

.dropdown.active .dropdown-content {
	display: block;
}


.mobile_nav {
	display: none;
}


.mobile {
	display: none;
}


/* Enhanced favorite button with bounce effect */
.favorite,
#favoriteBtn {
	color: #a8a6a6;
	background: none;
	border: 0px;
	font-size: 28px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.favorite:hover,
#favoriteBtn:hover {
	color: #ffc833;
	transform: scale(1.3) rotate(15deg);
	text-shadow: 0 0 20px rgba(255, 200, 51, 0.8);
	animation: starTwinkle 0.6s ease-in-out;
}


/* OrderAlert Intro Modal - Unique Styles to avoid conflicts */
.oa-intro-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.oa-intro-modal.oa-show {
    display: block;
}

.oa-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    /* Backdrop is NOT clickable to prevent accidental closing */
    pointer-events: none;
}

.oa-modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e2327;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: oaSlideIn 0.3s ease-out;
    pointer-events: auto;
}

@keyframes oaSlideIn {
    from {
        transform: translate(-50%, -60%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.oa-modal-header {
    padding: 25px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.oa-modal-header h2 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.oa-modal-body {
    padding: 40px;
    color: #e0e0e0;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.oa-intro-image {
    width: 50%;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}

.oa-intro-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.oa-intro-text {
    width: 50%;
    flex: 1;
}

.oa-intro-text h3 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 15px;
    margin-top: 0;
}

.oa-intro-text p {
    color: #a0a0a0;
    line-height: 1.6;
    margin-bottom: 20px;
}

.oa-info-section {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.oa-info-section h4 {
    color: #fff;
    margin-bottom: 10px;
    margin-top: 0;
}

.oa-info-section ul {
    margin: 0;
}

.oa-info-section li {
    color: #a0a0a0;
    margin-bottom: 8px;
}

.oa-privacy-notice {
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.3);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 25px;
}

.oa-privacy-notice i {
    color: #667eea;
    font-size: 20px;
    flex-shrink: 0;
}

.oa-privacy-notice p {
    margin: 0;
    color: #a0a0a0;
    line-height: 1.5;
}

.oa-action-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
}

/* Scrollbar styling for OrderAlert modal */
.oa-modal-dialog::-webkit-scrollbar {
    width: 8px;
}

.oa-modal-dialog::-webkit-scrollbar-track {
    background: #2b2f35;
}

.oa-modal-dialog::-webkit-scrollbar-thumb {
    background: #4a4f55;
    border-radius: 4px;
}

.oa-modal-dialog::-webkit-scrollbar-thumb:hover {
    background: #5a6169;
}

/* Main Container Styles */
.email-settings-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.email-settings-container h1 {
    color: #fff;
    margin-bottom: 10px;
}

/* Card Styles */
.stats-card,
.info-box,
.mailbox-card {
    background: #2a2d32;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-card h3,
.info-box h3,
.mailbox-card h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 18px;
}

.stats-card p,
.info-box p {
    color: #a0a0a0;
    margin-bottom: 10px;
    line-height: 1.6;
}

.stats-card strong {
    color: #fff;
}

/* Mailbox Card Specific */
.mailbox-card {
    position: relative;
    transition: transform 0.3s ease;
}

.mailbox-card:hover {
    transform: translateY(-2px);
}

.mailbox-status {
    position: absolute;
    top: 25px;
    right: 25px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.status-error {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.mailbox-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-item label {
    color: #666;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.info-item span {
    color: #e0e0e0;
    font-size: 14px;
}

/* Form Styles */
.form-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: #a0a0a0;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    background: #1a1d21;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: #667eea;
    background: #252831;
}

.form-group small {
    display: block;
    color: #666;
    font-size: 12px;
    margin-top: 5px;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.checkbox-group label {
    color: #a0a0a0;
    font-size: 14px;
    margin: 0;
}

/* Button Styles */
.btn {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b42a0 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #a0a0a0;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.btn-test {
    background: #3b82f6;
    color: #fff;
    margin-right: 10px;
}

.btn-test:hover {
    background: #2563eb;
}

.btn-danger {
    background: #ef4444;
    color: #fff;
}

.btn-danger:hover {
    background: #dc2626;
}

/* Message Styles */
.success-message,
.error-message {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.success-message {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.error-message {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.discord-error {
    background: rgba(239, 68, 68, 0.05);
    padding: 20px;
}

.discord-error h3 {
    color: #ef4444;
    margin-bottom: 10px;
}

.discord-error p {
    color: #e0e0e0;
    margin-bottom: 10px;
}

.discord-error a {
    color: #667eea;
    text-decoration: none;
}

.discord-error a:hover {
    text-decoration: underline;
}

/* Test Result Styles */
.test-result {
    display: none;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
    animation: fadeIn 0.3s ease;
}

.test-result.success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.test-result.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}



@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* No Mailboxes State */
.no-mailboxes {
    text-align: center;
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.no-mailboxes h2 {
    color: #fff;
    margin-bottom: 10px;
}

.no-mailboxes p {
    color: #666;
    font-size: 16px;
}

.discord-required {
    background: rgba(239, 68, 68, 0.05);
}

/* Responsive Design - Tablet */
@media (max-width: 1024px) {
    .oa-modal-dialog {
        width: 95%;
        max-width: 800px;
    }
    
    .oa-modal-body {
        padding: 30px;
        gap: 30px;
    }
}

/* Responsive Design - Mobile */
@media (max-width: 768px) {
    .oa-modal-dialog {
        width: 95%;
        max-height: 95vh;
        margin: 10px;
    }
    
    .oa-modal-header {
        padding: 20px;
    }
    
    .oa-modal-header h2 {
        font-size: 20px;
    }
    
    .oa-modal-body {
        padding: 25px;
        flex-direction: column;
        gap: 25px;
    }
    
    .oa-intro-image,
    .oa-intro-text {
        width: 100%;
    }
    
    .oa-intro-text h3 {
        font-size: 18px;
    }
    
    .oa-action-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .oa-action-buttons .btn {
        width: 100%;
        text-align: center;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .mailbox-info {
        grid-template-columns: 1fr;
    }
    
    .mailbox-status {
        position: static;
        display: inline-block;
        margin-bottom: 10px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .oa-modal-dialog {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    
    .oa-modal-body {
        padding: 20px;
    }
    
    .oa-info-section {
        padding: 15px;
    }
    
    .oa-privacy-notice {
        padding: 12px;
        font-size: 14px;
    }
}

/* Card Styles */
.stats-card,
.info-box,
.mailbox-card {
    background: #2a2d32;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-card h3,
.info-box h3,
.mailbox-card h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 18px;
}

.stats-card p,
.info-box p {
    color: #a0a0a0;
    margin-bottom: 10px;
    line-height: 1.6;
}

.stats-card strong {
    color: #fff;
}

/* Mailbox Card Specific */
.mailbox-card {
    position: relative;
    transition: transform 0.3s ease;
}

.mailbox-card:hover {
    transform: translateY(-2px);
}

.mailbox-status {
    position: absolute;
    top: 25px;
    right: 25px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.mailbox-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-item label {
    color: #666;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.info-item span {
    color: #e0e0e0;
    font-size: 14px;
}

/* Form Styles */
.form-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: #a0a0a0;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    background: #1a1d21;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: #667eea;
    background: #252831;
}

.form-group small {
    display: block;
    color: #666;
    font-size: 12px;
    margin-top: 5px;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.checkbox-group label {
    color: #a0a0a0;
    font-size: 14px;
    margin: 0;
}

/* Button Styles */
.btn {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b42a0 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #a0a0a0;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.btn-test {
    background: #3b82f6;
    color: #fff;
    margin-right: 10px;
}

.btn-test:hover {
    background: #2563eb;
}

.btn-danger {
    background: #ef4444;
    color: #fff;
}

.btn-danger:hover {
    background: #dc2626;
}

/* Message Styles */
.success-message,
.error-message {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.success-message {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.error-message {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    margin-top: 10px;
}

.discord-error {
    background: rgba(239, 68, 68, 0.05);
    padding: 20px;
}

.discord-error h3 {
    color: #ef4444;
    margin-bottom: 10px;
}

.discord-error p {
    color: #e0e0e0;
    margin-bottom: 10px;
}

.discord-error a {
    color: #667eea;
    text-decoration: none;
}

.discord-error a:hover {
    text-decoration: underline;
}

/* Test Result Styles */
.test-result {
    display: none;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
    animation: fadeIn 0.3s ease;
}

.test-result.success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.test-result.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Spinner Animation */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    vertical-align: middle;
    margin-left: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* No Mailboxes State */
.no-mailboxes {
    text-align: center;
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.no-mailboxes h2 {
    color: #fff;
    margin-bottom: 10px;
}

.no-mailboxes p {
    color: #666;
    font-size: 16px;
}

.discord-required {
    background: rgba(239, 68, 68, 0.05);
}

/* Responsive Design - Tablet */
@media (max-width: 1024px) {
    .oa-modal-dialog {
        width: 95%;
        max-width: 800px;
    }
    
    .oa-modal-body {
        padding: 30px;
        gap: 30px;
    }
}

/* Responsive Design - Mobile */
@media (max-width: 768px) {
    .oa-modal-dialog {
        width: 95%;
        max-height: 95vh;
        margin: 10px;
    }
    
    .oa-modal-header {
        padding: 20px;
    }
    
    .oa-modal-header h2 {
        font-size: 20px;
    }
    
    .oa-modal-body {
        padding: 25px;
        flex-direction: column;
        gap: 25px;
    }
    
    .oa-intro-image,
    .oa-intro-text {
        width: 100%;
    }
    
    .oa-intro-text h3 {
        font-size: 18px;
    }
    
    .oa-action-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .oa-action-buttons .btn {
        width: 100%;
        text-align: center;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .mailbox-info {
        grid-template-columns: 1fr;
    }
    
    .mailbox-status {
        position: static;
        display: inline-block;
        margin-bottom: 10px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .oa-modal-dialog {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    
    .oa-modal-body {
        padding: 20px;
    }
    
    .oa-info-section {
        padding: 15px;
    }
    
    .oa-privacy-notice {
        padding: 12px;
        font-size: 14px;
    }
}





@keyframes starTwinkle {

	0%,
	100% {
		transform: scale(1.3) rotate(15deg);
	}

	25% {
		transform: scale(1.5) rotate(25deg);
	}

	75% {
		transform: scale(1.1) rotate(5deg);
	}
}

.favorite.checked,
#favoriteBtn.checked {
	color: #ffc833;
	animation: starGlow 2s ease-in-out infinite;
}

@keyframes starGlow {

	0%,
	100% {
		text-shadow: 0 0 10px rgba(255, 200, 51, 0.5);
	}

	50% {
		text-shadow: 0 0 20px rgba(255, 200, 51, 0.8), 0 0 30px rgba(255, 200, 51, 0.6);
	}
}








@media (max-width: 1200px) {

	.mobile_nav {
		display: block;
	}

	.table-search {
		width: 100%;
		box-sizing: border-box
	}

	.eventdetails .block {
		flex: 1 1 calc(45% - 10px);
	}

	/* Fall 1: Standard-Styling, wenn ZWEI (oder mehr) .right Elemente da sind */
	.eventdetails .right {
		float: left;
		width: 50%;
		height: 200px;
	}

	/* Fall 2: Besonderes Styling, wenn nur EIN .right Element da ist */
	.eventdetails:not(:has(.right ~ .right)) .right {
		width: 100%;
		/* Nimmt die volle Breite ein */
		height: 230px;
		background-size: cover;
		float: none;
		/* Float ist nicht mehr nötig */
		background-color: lightgreen;
		/* Beispiel-Farbe zur Unterscheidung */

	}


	.list-group .badge {
		top: 10px;
		padding: 0px;
		right: 0px
	}

	.eventdetails .left {
		font-size: 15px;
		color: #c1bfbf;
		line-height: 23px;
	}

	.eventdetails h2 {
		font-size: 20px
	}

	.eventdetails .right img {
		max-height: 100%;
	}

	.eventdetails .image-block {
		background: white;
		background-size: cover;
	}

	.eventdetails #eventheader {
		display: inline;
	}


	.event-list table tbody {
		margin-top: 20px;
	}

	.sidebar a {
		/*! display:block; */
		margin-left: 0px;
		/*! margin-bottom: 20px; */
	}

	.event-box {
		position: relative;
		width: calc(50% - 10px);
		box-sizing: border-box;
		/*! background-color: #fff; */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		line-height: 24px;
		font-weight: 300;
		flex-grow: 1;
		border: 1px solid #b7b2b2;
		border-radius: 6px;
	}


	.inside_table thead tr {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 8px;
		margin-bottom: 20px
	}

	.inside_table thead th {
		flex-grow: 1;
		/* Lässt alle Buttons wachsen, um den Platz zu füllen */
		flex-basis: 120px;
		/* Mindestbreite, bevor ein Button umbricht */

		/* Button-Styling */
		background-color: #182028;
		border: 1px solid #888787;
		border-radius: 5px;
		padding: 10px 5px;
		text-align: center;
		font-weight: normal;
		cursor: pointer;
		/* Wichtig für die Klick-Anzeige */
		margin-bottom: 0px;
		/* Abstand nach unten */
		/*! padding: 7px; */
		font-size: 13px;
	}


	h4 {
		margin-top: 20px;
	}

	.mobilewrapper {
		position: fixed;
		width: 100%;
		top: 0px;
		background: #949fa2;
		z-index: 70;
	}

	.mobilewrapper .logo.mobile {
		max-height: 100px;
		max-height: 70px;
		padding: 10px 0px;
	}

	.mobileinside {
		padding: 0px 20px;
		/*! margin: 0px auto; */
		text-align: center;
		display: flex;
	}

	.desktop {
		display: none;
	}

	.mobile {
		display: block;
	}

	.toggle-button {
		display: block;
		width: 100%;
		font-size: 16px;
	}

	.dashboard .block {
		margin: 0px !important;
		padding: 0px
	}

	.calender-box,
	.dashboard .block,
	.extension .block,
	.event-block {
		flex: 1 1 47% !important;
		/* width: 100%; */
		/* max-width: 100% !important; */
		margin: 0 0 15px 0 !important;
		padding: 10px;
		/* font-size: 8px; */
	}

	.shart .block {
		flex: 1 1 100% !important;

	}


	.eventdetails .block {
		text-align: center
	}

	.eventdetails .block .ue {
		color: #c8c8c8;
		/*! padding-bottom: 23px; */
		font-size: 14px;
	}

	.important_infos .fa-solid {
		/* display:none; */
	}


	.eventdetails .block_inside {
		padding-top: 10px;
	}

	/* Wir machen das Formular zu einem Flex-Container */
	#filterForm {
		display: flex;
		flex-direction: column;
		/* Ordnet alle Elemente vertikal an */
		align-items: stretch;
		/* Streckt die Elemente auf die volle Breite */
	}

	/* Alle Steuerelemente und Labels bekommen etwas Platz */
	#filterForm label,
	#filterForm .form-control {
		width: 100%;
		/* Volle Breite für einfaches Tippen */
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 4px;
		/* Abstand nach unten zum nächsten Element */
		/*! padding: 8px; */
	}

	/* Etwas kleinerer Abstand für die Labels zu ihrem jeweiligen Feld */
	#filterForm label {
		margin-bottom: 4px;
		font-weight: bold;
		/* Hebt die Labels hervor */
	}


	#content {
		min-width: 0 !important;
		padding: 0 0px !important;
	}

	.container {
		padding: 0 0px !important;
		min-height: unset;
	}

	table,
	thead,
	tbody,
	th,
	td,
	tr {
		/*! display: block; */
		box-sizing: border-box;
	}


	.infoverkauefe thead,
	.infoverkauefe th,
	.infoverkauefe tr,
	.infoverkauefe td,
	.infoverkauefe tbody,
	.infoverkauefe table {
		display: revert
	}


	.row .col-md-6 {
		flex: 1 1 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.sidebar.open {
		left: 0;
		/* <- Sidebar fährt herein */
		z-index: 999999;
	}


	.event-list .emoji {
		font-size: 20px;
		text-align: center;
		position: absolute;
		top: 14px;
		right: 5px;
	}


	/* Wir blenden den Tabellen-Body erstmal aus, um nur die Header zu zeigen. 
     Dies ist optional, je nachdem, was du nach dem Klick anzeigen willst. */
	#filterForm {
		margin-bottom: 0px;
	}

	/* Das normale Tabellen-Layout für thead und tr aufheben */
	#eventTable thead,
	#eventTable thead tr {
		display: block;
	}

	/* Die Tabellenzeile (tr) wird zum Flex-Container */
	#eventTable thead tr {
		display: flex;
		flex-wrap: wrap;
		/* Erlaubt Umbruch bei vielen Buttons */
		justify-content: space-between;
		/* Verteilt den Platz zwischen den Elementen */
		gap: 8px;
		/* Ein kleiner Abstand zwischen den Buttons */
	}


	/* Die Header-Zellen (th) werden zu unseren Buttons */
	#eventTable thead th {
		flex-grow: 1;
		/* Lässt alle Buttons wachsen, um den Platz zu füllen */
		flex-basis: 120px;
		/* Mindestbreite, bevor ein Button umbricht */

		/* Button-Styling */
		background-color: #182028;
		border: 1px solid #888787;
		border-radius: 5px;
		padding: 10px 5px;
		text-align: center;
		font-weight: normal;
		cursor: pointer;
		/* Wichtig für die Klick-Anzeige */
		margin-bottom: 0px;
		/* Abstand nach unten */
		/*! padding: 7px; */
		font-size: 13px;
	}

	/* Leere th-Elemente (für Abstände im Original) ausblenden */
	#eventTable thead th:empty {
		display: none;
	}

	/* Optional: Icon etwas größer machen auf Mobilgeräten */
	#eventTable thead th .fa-sort {
		margin-right: 5px;
	}


	.event-row {
		color: #cacaca;
		/*! display: flex; */
		flex-wrap: wrap;
		/* Erlaubt, dass Elemente in die nächste "Zeile" umbrechen */
		justify-content: space-between;

		/* Visuelles Styling für die Karte */
		/*! border: 1px solid #ddd; */
		/*! border-radius: 8px; */
		padding: 5px 50px 12px 10px;
		/*! margin-bottom: 15px; */
		position: relative;
		/*! padding-right: 20px inherit !important; */
	}

	.event-row td {
		padding: 0px;
		margin: 0px;
	}

	/* 3. Zellen, die eine ganze Zeile einnehmen sollen */


	.td-name,
	.td-stats,
	.td-id,
	.td-date {
		display: inline-block;
		/* Elemente nebeneinander anordnen */
		vertical-align: middle;
		/* Sorgt für eine saubere vertikale Ausrichtung */
		/*! margin-bottom: 10px; */
	}

	.td-name {
		font-weight: bold;
		font-size: 1.2;
		color: white;
	}

	/* 4. Die Statistik-Zellen, die sich eine Zeile teilen sollen */
	.td-stats {
		background: #0908085e;
		color: white;
		border-radius: 9px;
		font-size: 12px;
	}

	/* 5. Die mobilen Labels wieder einblenden und stylen (deine <span class="mobile">) */
	.td-stats .mobile {
		display: inline;
		/* Platziert das Label über der Zahl */
		/*! font-size: 0.8em; */
		color: #ea4545;
		font-weight: normal;
	}

}


@media (max-width: 550px) {


	.list-group-item {
		border-bottom: 1px solid #797979;
		padding: 13px;
		position: relative;
		padding-right: 50px;
	}


	.landicon {
		position: absolute;
		right: 0px;
		font-size: 25px;
		margin-top: 21px;
	}

	#viagogo {
		margin-bottom: 0px !important;
	}

	#viagogo table {
		font-size: 12px
	}

	#viagogo table th,
	#viagogo table td {
		padding: 5px;
	}

	.dashboard .value {
		font-size: 20px;

	}

	.search-item {
		font-size: 13px
	}

	.dashboard i {
		font-size: 13px;
	}

	.mobileheight .block {
		height: 475px !important;
	}

	.dashboard .block {
		padding: 10px;
		margin: 0px !important;
		/* flex: unset !important; */
		/* min-width: 48% !important; */
	}

	.diagramms .block {
		width: 100%;
		flex: none !Important;
		/* overflow:auto; */
		/* height: auto; */
	}

	.shart .block {
		padding: 10px;
		margin: 0px !important;
		flex: 1 1 100% !important;
	}

	.content {
		/*! width: 100%; */
		max-width: 1365px;
		margin: 0px auto;
		padding: 0px 10px;
	}

}