/* /css/styles.php  */
@font-face {
  font-family: 'Poppins';
  font-style: bold;
  font-weight: 700;
  src: url('../fonts/Poppins-Bold.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Poppins-Bold.woff2') format('woff2'), /* Super Modern Browsers */
	   url('../fonts/Poppins-Bold.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Poppins-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
	   url('../fonts/Poppins-Bold.svg') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Lato-Regular.woff2') format('woff2'), /* Super Modern Browsers */
	   url('../fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Lato-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
	   url('../fonts/Lato-Regular.svg') format('svg'); /* Legacy iOS */
}

.wave {
    fill: none;
    stroke: #00E676;
    stroke-width: 3;
    opacity: 0;
    animation: ripple 3s infinite;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(2.33); /* 30 * 2.33 ≈ 70 */
        opacity: 0;
    }
}




.vertical-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: #111111;
    padding: 10px;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: width 0.3s ease;
    
}

.vertical-nav.collapsed {
    width: 80px; /* Reduziere die Breite beim Kollabieren */
}

.vertical-nav .nav-header {
    display: flex;
    justify-content: center;  /* Zentriert das Logo horizontal */
    align-items: center;      /* Zentriert das Logo vertikal */
    height: 80px;             /* Sicherstellen, dass genug Höhe für die Zentrierung vorhanden ist */
}

.vertical-nav .btn-toggle {
    background: none;
    border: none;
    color: #00E676;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.vertical-nav .btn-toggle:hover {
    color: #2680EA;
}

.vertical-nav .nav-brand {
    text-align: center;
}

.vertical-nav .nav-brand img {
    max-height: 50px;
    max-width: 50px;
    width: auto;
    border-radius: 50%;
    object-fit: cover;
}

.badge {
	padding: 5px 10px;
    border-radius: 15px;
	margin-bottom: 4px;
}
.vertical-nav .plan-badge-container {
    text-align: center;
    margin-bottom: 10px;
}

.vertical-nav .nav-links {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vertical-nav .nav-links li {
    width: 100%;
}
.vertical-nav a {
	text-decoration: none;
	color: #ddd;
}


.nav-link.icon-link {
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    color: #00E676;
    font-size: 0.9rem;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    position: relative;
	width: 100%;
}

.nav-link.active {
    background-color: #00E676; /* Grüner Hintergrund für aktive Links */
    color: #1C1C1C; /* Dunkler Text für besseren Kontrast */
}

.nav-link.icon-link .link-text {
    
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.vertical-nav.collapsed .nav-link.icon-link .link-text {
    opacity: 0;
    visibility: hidden;
}

.nav-link.icon-link:hover {
    background-color: #1f3027; 
}

.nav-link.icon-link:hover .link-text {
    opacity: 1;
    visibility: visible;
}

/* Dropdown */
.nav-item-dropdown {
    position: relative;
}

.nav-item-dropdown .nav-dropdown-toggle {
    cursor: pointer;
}

.nav-dropdown {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    width: 180px;
    border-radius: 10px;
    padding: 0;
    list-style: none;
    z-index: 2100;
}

.nav-dropdown-header {
    font-weight: bold;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
}

.nav-dropdown .dropdown-item {
    color: #111111;
    padding: 10px 15px;
    text-decoration: none;
}

.nav-dropdown .dropdown-item:hover {
    background-color: #2680EA;
    color: #fff;
}

.nav-item-dropdown:hover .nav-dropdown {
    display: flex;
}

/* Benachrichtigungen im Menü */
.notification-section {
    margin-top: auto;
    text-align: center;
	
}

.notification-section .btn {
    color: #fff;
}

#navLogo {
    height: 55px; /* Standardgröße bei ausgeklapptem Menü */
    transition: height 0.3s ease-in-out; /* Sanfte Animation */
}

.vertical-nav.collapsed #navLogo {
    height: 35px; /* Größe bei eingeklapptem Menü */
}

/* Platz für den Hauptinhalt */
body {
    margin-left: 200px; /* Platz schaffen, damit das Menü nicht den Inhalt überdeckt */
    transition: margin-left 0.3s;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 400;
	background-color: #1C1C1C;
	color: #E0E0E0;
	
}

/* Für Seiten mit externer Navigation */
body.external-nav {
    margin-left: 0; /* Kein margin-left für externe Navigation */
}

/* Inhalt anpassen */
.content {
    transition: margin-left 0.3s;
}
.vertical-nav.collapsed ~ .content {
    margin-left: 80px; /* Anpassung der Margin beim Kollabieren */
}

/* Inhalt für externe Navigation */
body.external-nav .content {
    margin-left: 0;
}







/* Popover Styling (optional, falls du Anpassungen möchtest) */
.popover {
    max-width: 200px;
}
.vertical-nav ul.nav-links li {
    display: flex;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

.vertical-nav ul.nav-links li .nav-link {
    display: flex;
    align-items: center; /* Bei eingeblendetem Text linksbündig */
    justify-content: flex-start;
    font-size: -9rem;
    padding: 10px;
    text-align: left;
    gap: 10px; /* Abstand zwischen Icon und Text */
    transition: all 0.3s ease-in-out;
}

.vertical-nav ul.nav-links li .nav-link .link-text {
    display: block; /* Standardmäßig sichtbar */
    font-size: 0.9rem;
    transition: all 0.3s ease-in-out;
}

.vertical-nav.collapsed ul.nav-links li .link-text {
    display: none; /* Text ausblenden, wenn das Menü eingeklappt ist */
}

.vertical-nav.collapsed ul.nav-links li .nav-link {
    justify-content: center; /* Zentriere das Icon bei ausgeblendetem Text */
}

.vertical-nav ul.nav-links li .nav-link i {
    font-size: 1rem; /* Ursprüngliche Größe für das Icon */
    transition: font-size 0.3s ease-in-out;
}

.vertical-nav.collapsed ul.nav-links li .nav-link i {
    font-size: 1rem; /* Vergrößere das Icon bei ausgeblendetem Text */
}
.input-group.fixed-bottom {
		position: fixed;
		bottom: 87px; /* Abstand von der unteren Navbar (kann angepasst werden) */
		left: 0;
		right: 0;
		width: 100%;
		padding: 10px;
		background-color: #111111;
		z-index: 9999; /* Sicherstellen, dass das Input-Feld und der Button über dem restlichen Inhalt liegen */
	}
/* Mobile Anpassungen */
@media (max-width: 991px) {
	 /* Desktop Navigation ausblenden auf kleinen Geräten */
    .vertical-nav {
        display: none;
		
    }
    
    /* Mobile Navigation anzeigen auf kleinen Geräten */
    .mobile-nav {
        display: block;
    
	}
    body {
        padding-top: env(safe-area-inset-top, 0);
        margin-top: 0;
        margin-left: 0;
        background-color: #1C1C1C; /* oder ggf. die Standardfarbe, falls du sie ändern willst */
        padding-bottom: 60px;
    }
	.input-group.fixed-bottom {
        bottom: 87px; /* Abstand von der unteren Navbar */
        position: fixed;
    }

	.input-group.fixed-bottom input,
	.input-group.fixed-bottom button {
		border-radius: 15px;
	}

	.input-group.fixed-bottom button {
		margin-left: 10px;
	}
    .vertical-nav {
        position: sticky;
        top: 0;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        padding: 5px;
        z-index: 9999;
        background-color: #111111;
        overflow: visible;
    }
    .vertical-nav.collapsed {
        width: 100%;
    }
    .vertical-nav .nav-brand {
        margin: 0 10px 0 0;
    }
    .vertical-nav .nav-links {
        flex-direction: row;
        margin: 0;
        gap: 5px;
    }
    .nav-link.icon-link {
        font-size: 1.2rem;
        padding: 8px 0;
        border-radius: 8px;
        font-weight: 700;
    }
    .nav-link.icon-link .link-text {
        display: none;
    }

    .notification-section {
        margin-top: 0;
        margin-left: auto;
    }
}


/* new menue end */





#header-bar {
	height: 60px;
	width: 100%;
	background-color: #00E676;
	color: black;

}
#header-bar-logged-in {
	height: 80px;
	width: 100%;
	background-color: #00E676;
	color: black;
}

small {
	font-family: 'Lato';
  	font-style: normal;
  	font-weight: 400;
}
li .nav-link {
	color: #000;
	font-family: 'Lato';
  font-style: thin;
}
.black-bg {
	background-color: #1C1C1C;
	color: #E0E0E0;
}
.dark-black-bg {
	background-color: #111111;
	color: #E0E0E0;
}
.green-bg {
	background-color: #00E676;
	color: #E0E0E0;
}
.hero {
	height: 80vh;

}
.custom-img {
    max-width: 80%; /* Hier kannst du den Wert nach Bedarf anpassen */
}


h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins';
  	font-style: bold;
	font-weight: 700;
}

.green-text {
	color: #00E676;
}

.black-text {
	color: #1C1C1C;
}
.orange-text {
	color: #FF6F00;
}

.btn-green {
	color: #1C1C1C;
	background-color: #00E676;
	border-radius: 15px;
	padding: 5px 15px 5px 15px;
	text-align: center;
	font-family: 'Poppins';
  	font-style: bold;
	font-weight: 700;
	text-decoration: none;
	
}
.btn-green-sm {
	color: #00E676;
	text-align: center;
	font-family: 'Poppins';
  	font-style: bold;
	font-weight: 700;
	text-decoration: none;
}
.btn-green:hover {
	color: #2680EA;
	border-color: #2680EA;
}
.ai-feature {
	color: #8c52ff !important;
} 
.slots-overlay {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-60%);
  z-index: 3;
  padding: 5px;
}

#slotHint {
  position: absolute;
  width: 100%;
  left: 60%;
  transform: translateX(-60%);
  top: 105%;
  margin-top: 5px;
  font-size: 0.9rem;
  color: #dc3545;
  pointer-events: none;
}

.slots-container {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}

.slot-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #ccc;
  border: 2px solid #fff;
}

.ki-switch .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.ki-switch .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ki-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #8c52ff;
  transition: .4s;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ki-switch .slider i {
  color: #fff;
  z-index: 2;
  font-size: 18px;
}

.ki-switch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: #ff4081;
  transition: .4s;
  border-radius: 4px;
  z-index: 1;
}

.ki-switch .switch input:checked + .slider {
  background-color: #ff4081;
}

.ki-switch .switch input:checked + .slider:before {
  transform: translateX(26px);
  background-color: #8c52ff;
}


.btn-lila {
	color: #FFF;
	background-color: #8c52ff;
	border-radius: 15px;
	padding: 5px 15px 5px 15px;
	text-align: center;
	font-family: 'Poppins';
  	font-style: bold;
	font-weight: 700;
	text-decoration: none;	
}
.btn-lila:hover {
	color: #FFF;
	background-color: #ff4081;
	border-radius: 15px;
	padding: 5px 15px 5px 15px;
	text-align: center;
	font-family: 'Poppins';
  	font-style: bold;
	font-weight: 700;
	text-decoration: none;
}
.btn-yellow {
	color: #1C1C1C;
	background-color: #F6C244;
	border-radius: 15px;
	padding: 5px 15px 5px 15px;
	text-align: center;
	font-family: 'Poppins';
  	font-style: bold;
	font-weight: 700;
	text-decoration: none;
}
.btn-yellow:hover {
	color: #F6C244;
	border: 1px solid #F6C244;
	background-color: #1C1C1C;
}
.btn-black {
	color: #00E676;
	background-color: #111111;
	border-radius: 15px;
	padding: 5px 15px 5px 15px;
	text-align: center;
	font-family: 'Poppins';
  	font-style: bold;
	font-weight: 700;
	text-decoration: none;
}
.btn-black:hover {
	color: #2680EA;
	border: 1px solid #1C1C1C;
	background-color: #111111;
}
.btn-orange {
	color: #FF6F00;
	background-color: #1C1C1C;
	border-radius: 15px;
	padding: 5px 15px 5px 15px;
	text-align: center;
	font-family: 'Poppins';
  	font-style: bold;
	font-weight: 700;
	text-decoration: none;
}
.btn-orange-sm {
	color: #FF6F00;
	background-color: #1C1C1C;
	text-align: center;
	font-family: 'Poppins';
  	font-style: bold;
	font-weight: 700;
	text-decoration: none;
}
.btn-orange:hover {
	color: #00E676;
	background-color: #1C1C1C;
}
.cta-orange {
	color: #000;
	background-color: #FF6F00;
}
.btn-add {
	border: none;
	color: #E0E0E0;
}
.btn-add:hover {
	color: #2680EA;
}
.footer a{
	color: #00E676;
	text-decoration: none;
	margin-right: 15px;
	margin-left: 15px;
	font-size: 0.8rem;
}
a:hover {
	color: #2680EA;
}
.info-box {
	border-radius: 15px;
	border: 1px solid #E0E0E0;
	color: #E0E0E0;
	padding: 20px;
	margin-bottom: 20px;
}
.content-box-black {
	background-color: #111111;
	border-radius: 15px;
	color: #E0E0E0;
	padding: 15px;
	margin-bottom: 20px;
}
.content-box-green {
	background-color: #00E676;
	border-radius: 15px;
	color: #111111;
	padding: 15px;
	margin-bottom: 20px;
}
.content-box-green a{
	text-decoration: none;
	color: #111111;
}
.rounded-green-box {
	border-radius: 15px;
	color: #E0E0E0;
	padding: 20px;
	margin-top: 20px;
	background-color: #00E676;
}
.artist-box {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid #E0E0E0;
    min-height: 250px;
}



.artist-image-header {
    position: relative;
    width: 100%;
    height: 350px;
    background-color: #000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
    overflow: visible;
}

.edit-button-overlay {
    position: absolute;
    top: 10px; /* Abstand von oben */
    right: 10px; /* Abstand von rechts */
    padding: 5px 15px;
    font-size: 0.9rem;
    border-radius: 15px;
}

.artist-name-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
	
    color: #E0E0E0;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 5px 15px;
    border-radius: 15px;
}

.social-icons-overlay {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 5px 10px;
    border-radius: 15px;
}

.social-icons-overlay a {
    color: #E0E0E0;
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.social-icons-overlay a:hover {
    color: #00E676;
}
.active-artist {
    border: 1px solid #00E676; /* Grüner Rahmen für den aktiven Artist */
    border-radius: 15px;
}

.artist-title {
    margin-bottom: 5px;
    color: #E0E0E0;
	text-align: left;
}

.offer-box-with-date {
	border-radius: 15px;
	border: 3px solid #00E676;
	color: #E0E0E0;
	padding: 20px;
	min-height: 200px;
	margin: 20px 0px 0px 0px;
}
.offer-box-with-date:hover {
	border: 3px solid #2680EA;
}
.offer-box-without-date {
    display: flex;
    align-items: stretch;
    border-radius: 15px;
    border: 1px solid #E0E0E0;
    color: #E0E0E0;
    min-height: 200px;
    margin: 0px 0px 20px 0px;
    overflow: hidden;
}

.offer-box-without-date .col-md-2 {
    padding: 0; /* Entfernt jegliches Padding in der Bildspalte */
}

.offer-box-without-date .col-md-2 img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    display: block; /* Entfernt Abstände, die durch 'img' verursacht werden könnten */
    margin: 0; /* Stellt sicher, dass es keine Abstände gibt */
}

.offer-box-without-date .col-md-6,
.offer-box-without-date .col-md-4 {
    padding: 20px; /* Fügt den Abstand für die anderen Inhalte hinzu */
}

.offer-box-without-date:hover {
	border: 1px solid #2680EA;
}
.offer-card {
	border-radius: 15px;
	background-color: #00E676;
	color: #E0E0E0;
	padding: 20px;
	height: 200px;
	min-width: 300px;
	margin-top: 20px;
	margin-right: 20px;
}
content {
	padding: 20px;
}

/* CSS für grüne Badge für positive Auswahl */
.badge-green {
    background-color: #00E676;
    color: #1C1C1C;
    padding: 5px 10px;
    border-radius: 15px;
	margin-bottom: 4px;
}
.badge-black {
    background-color: #1C1C1C; 
    color: #00E676;
    padding: 5px 10px;
    border-radius: 15px;
	margin-bottom: 4px;
}
.badge-black:hover {
    background-color: #1f3027;

}
.badge-blue {
    background-color: #2680EA;
    color: #E0E0E0;
    padding: 5px 10px;
    border-radius: 15px;
	margin-bottom: 4px;
}

/* CSS für orangefarbene Badge für negative Auswahl */
.badge-orange {
    background-color: #FF6F00;
    color: #1C1C1C;
    padding: 5px 10px;
    border-radius: 15px;
	margin-bottom: 4px;
}
.badge-grey {
    background-color: #E0E0E0;
    color: #1C1C1C;
    padding: 5px 10px;
    border-radius: 15px;
	margin-bottom: 4px;
}

/* Icon zum löschen von Badges */
.badge-icon {
    position: absolute;
    top: -8px;
    left: 8px;
    font-size: 0.9rem;
    color: #E0E0E0;
}
.badge-container {
	margin: 0 2px 5px 5px;
}
.image-drop-area {
	
    position: relative;
    border: 2px dashed #00E676;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    color: #E0E0E0;
    font-family: 'Lato', sans-serif;
    cursor: pointer;
    transition: border-color 0.3s ease;
    height: 250px;
    overflow: hidden;
    background-size: cover;
	
}
.artist-edit-area {
	border: 2px dashed #00E676;
    border-radius: 15px;
	color: #E0E0E0;
	padding: 20px;
	margin-bottom: 20px;
}

.image-drop-area.highlight {
    border-color: #2680EA;
}

.image-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Sorgt dafür, dass das Bild den gesamten Bereich abdeckt */
    border-radius: 15px;
    display: none;
}
.wizard-section {
    margin-bottom: 20px;
    border-radius: 15px;
    padding: 20px;
    border: 1px solid #E0E0E0;
    color: #E0E0E0;
}

.section-title {
    font-weight: bold;
    cursor: pointer;
    margin: 0;
    color: #E0E0E0;
    transition: color 0.3s ease;
}
.section-icons {
    display: flex;
    gap: 8px;
    position: absolute;
    right: 0;
}

.section-content.collapsed {
    display: none;
}

.active-section {
    border: 1px solid #2680EA;
    color: #E0E0E0;
}

.completed-section {
    border: 1px solid #00E676;
    color: #00E676;
}

.completed-section .section-title {
    color: #00E676;
}

/* Rahmen für unvollständige Abschnitte */
.incomplete-section {
    border: 2px solid orange;
    padding: 10px;
    border-radius: 15px;
}

/* Fragezeichen-Symbol */
.incomplete-icon {
    color: orange;
    font-size: 1.2em;
    margin-left: 10px;
}

.form-control {
    background-color: #1C1C1C; /* Durchsichtiger Hintergrund */
    border: 1px solid #E0E0E0; /* 1px Rahmen in der gewünschten Farbe */
    color: #E0E0E0; /* Textfarbe */
}

/* Optional: Hover-Effekt für Eingabefelder */
.form-control:hover {
    border-color: #2680EA; /* Ändere die Rahmenfarbe beim Hover */
}

/* Optional: Fokus-Effekt für Eingabefelder */
.form-control:focus {
    background-color: #1C1C1C; /* Durchsichtiger Hintergrund */
	border-color: #2680EA; /* Ändere die Rahmenfarbe bei Fokus */
    box-shadow: none; /* Entferne den standardmäßigen Box-Shadow */
	 color: #E0E0E0; /* Textfarbe */
}

/* Definiert eine erweiterte Klasse für die Hauptinformationsspalte */
.col-md-12-extended {
    width: 100%;
    transition: width 0.3s ease-in-out;
}
.dropdown-menu {
    min-width: 350px; /* Breite für das Dropdown-Menü */
	
    
    border: 1px solid #E0E0E0;
    border-radius: 15px;
    overflow-y: auto
}

.dropdown-menu .bi-box-arrow-up-right {
    color: #111111; /* oder z.B. #1C1C1C oder #00E676 für grün */
}

/* Spinner Styling */

.btn-loading {
    cursor: wait;
    opacity: 0.8;
}
.section-title-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-icons {
    display: flex;
    gap: 8px;
}

.section-icons .bi-check-circle-fill {
    color: #00E676;
}

.section-icons .bi-pencil-fill {
    color: #E0E0E0;
}
.wizard-section .section-icons .bi-pencil-fill {
    display: none; /* Standardmäßig ausgeblendet */
}

.wizard-section:hover .section-icons .bi-pencil-fill {
    display: inline; /* Beim Hover angezeigt */
}

.wizard-section .section-icons .bi-check-circle-fill {
    display: none; /* Standardmäßig versteckt, bis die Section abgeschlossen ist */
}
.is-invalid {
    border-color: #FF6F00; /* Randfarbe für ungültige Felder */
}

.warning-icon {
    font-size: 1rem;
    vertical-align: middle;
}

.invalid-section-title {
    color: #FF6F00; /* Farbe für den Titel der Section */
}
.artist-box-small {
    position: relative;
    width: 90%;
    height: 60px;
    border: 1px solid #E0E0E0;
    cursor: pointer;
    text-align: center;
    border-radius: 15px;
    overflow: hidden; /* Um sicherzustellen, dass das Overlay innerhalb des Bildes bleibt */
}
.artist-box-small.active-artist {
    border: 1px solid #00E676;
}

.artist-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    display: block;
}

.badge-icon-add {
    font-size: 1.2rem;
    cursor: pointer;
    color: #E0E0E0; /* Farbton passend zur Design-Richtlinie */
    align-self: center;
}
.badge-icon-add:hover {
    color: #2680EA; /* Farbton passend zur Design-Richtlinie */
}
.modal {
    z-index: 3000; /* Modal über die Navigation setzen */
}

.popover {
    z-index: 3100 !important; /* Höher als das Modal (3000 in deinem Fall) */
}


.modal-backdrop {
    z-index: 2900; /* Backdrop ebenfalls höher setzen */
}
.modal-content {
    background-color: #1C1C1C; /* Dunkler Hintergrund passend zur Seite */
    color: #E0E0E0; /* Heller Text passend zur Seite */
    border-radius: 15px; /* Gleiche Abrundung wie bei anderen Boxen */
}

.modal-header {
    background-color: rgba(0, 0, 0, 0.8); /* Halbtransparenter Hintergrund für Kontrast */
    border-bottom: 1px solid #E0E0E0;
}

.modal-footer {
    background-color: rgba(0, 0, 0, 0.8); /* Halbtransparenter Hintergrund für Kontrast */
    border-top: 1px solid #E0E0E0;
}

.modal-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-style: bold;
    color: #00E676; /* Grüne Farbe für den Titel */
}

.close {
    color: #E0E0E0; /* Farbe des Schließen-Buttons passend zur restlichen Modal-Farbe */
    opacity: 1;
}

.close:hover {
    color: #2680EA; /* Farbe beim Hover passend zu den Buttons */
}

.modal-body {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    padding: 20px;
    color: #E0E0E0; /* Heller Text passend zur Seite */
}




/******************* MY GIGMATE  ********************** */
.artist-image {
    width: 100%;
    height: 100%;
    background-color: #000;
    border-radius: 15px;
    overflow: hidden;
	background-size: cover;
	background-position: center;
}



.blog-image-overlay {
    position: absolute;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 5px 15px;
    border-radius: 15px;
 color: #00E676 !important; font-size: 1.5rem; position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); padding: 10px; margin: 10px;"
	
}

/* Hidden by default; shows on hover */
.artist-overlay {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 5px;
    border-radius: 15px;
    display: none; /* Initially hidden */
    gap: 10px;
    align-items: center;
}

.artist-image:hover .artist-overlay {
    display: flex; /* Show overlay on hover */
}

/* Icon button styling */
.icon-container {
    display: flex;
    gap: 10px;
}

.btn-icon {
    background: transparent;
    border: none;
    color: #E0E0E0;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.btn-icon:hover {
    color: #00E676; /* Green hover color */
}

.btn-delete:hover {
    color: #FF6F00; /* Orange hover color for delete */
}

/******************* MATCHING ARTISTS ********************** */

.match-box {
    border: 1px solid #E0E0E0;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #1C1C1C;
    transition: border-color 0.3s ease;
}

.match-box:hover {
    border-color: #00E676;
}

.match-description {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E0E0E0;
}

.match-contents {
    display: flex;
    gap: 15px;
    align-items: center;
    padding-top: 10px;
}

.matching-artist, .opened-artist {
    text-align: center;
    flex: 1;
}

.matching-artist-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    object-fit: cover;
    margin-bottom: 5px;
}

.match-connector {
    font-size: 24px;
    color: #00E676;
}

.super-mate {
    border: 2px solid #00E676;
    border-radius: 15px;
    padding: 5px;
}

.super-mate-icon {
    position: absolute;
    top: -5px;
    right: 10px;
    font-size: 2em;
    color: #00E676;
}
/* Offcanvas in der Desktop-Ansicht immer eingeblendet */
@media (min-width: 1200px) {
    .offcanvas-start {
        transform: none !important; /* Hält das Offcanvas sichtbar */
        visibility: visible !important;
        position: relative !important;
    }
}
/* Flag Icon für mobile Ansicht */
.filter-flag {
    position: fixed;
    right: 10px;
    bottom: 110px;
    background-color: #00E676;
    color: #1C1C1C;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1050; /* Sicherstellen, dass das Flag über anderen Elementen liegt */
}

.filter-flag i {
    font-size: 1.5rem;
}

/* Flag Icon nur auf mobilen Geräten anzeigen */
@media (min-width: 1200px) {
    .filter-flag {
        display: none;
    }
}
@media (max-width: 991px) {
    #offcanvasMenu {
		font-size: 1.25em;
        pading-left: 20px; /* Fügt links Platz hinzu */
       
    }
    #offcanvasMenu .offcanvas-body {
        padding: 15px; /* Optional: Innenabstand anpassen */
    }
	.offcanvas .nav-item.dropdown > .nav-link#notificationDropdown {
        display: none;
    }
	 .custom-img {
        max-width: 100%; /* Volle Breite auf Smartphones */
        width: auto; /* Automatische Breite für bessere Darstellung */
    }
}
.offcanvas-body {
	background-color: #1C1C1C !important;
	padding: 0px;
}
/* Spezifisch für Navigation Offcanvas Body */
.navigation-offcanvas-body {
    background-color: transparent !important; /* Transparenter Hintergrund */
}
.user-artist-section {
	border: 1px solid #E0E0E0;
	border-radius: 15px;
	padding: 20px;
}
.active-artist-image {
	width: 30px;
	height: 30px;
	border-radius: 15px;
}

/* ************* MESSAGING **************** */
/* CSS für gesendete Nachrichten */
.sent-message {
    align-self: flex-start; /* Positioniert empfangene Nachrichten links */
    display: inline-block; /* Passt die Breite an den Inhalt an */
    text-align: right;
  
    color: #1C1C1C;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    max-width: 70%; /* Begrenzung der maximalen Breite */
    word-wrap: break-word; /* Zeilenumbruch für längere Wörter */
    margin-left: auto; /* Verschiebt die Nachricht nach rechts */
}

/* CSS für empfangene Nachrichten */
.received-message {
    align-self: flex-start; /* Positioniert empfangene Nachrichten links */
    color: #1C1C1C;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    max-width: 70%; /* Begrenzung der maximalen Breite */
    word-wrap: break-word; /* Zeilenumbruch für längere Wörter */
    margin-right: auto; /* Verschiebt die Nachricht nach links */
}

.timestamp-divider {
    display: inline-block; /* Passt die Breite an den Inhalt an */
    text-align: center; /* Zentriert den Text horizontal */
    color: #E0E0E0;
    margin: 15px 0;
    font-size: 0.85rem;
    opacity: 0.8;
}
.message-content {
		 
    display: inline-block; /* Breite passt sich dem Inhalt an */
}
.message-item {
    display: flex; /* Aktiviert Flexbox für das Elternelement */
    align-items: flex-start; /* Vertikale Ausrichtung am oberen Rand */
  
}
.message-section {
	display: flex; /* Aktiviert ein flexibles Layout */
    flex-direction: column; /* Stapelt die Nachrichten untereinander */ 
	min-height: calc(75vh - 120px);
	background-color: #111111;
	border-radius: 15px;
    max-height: calc(50vh - 120px); /* Passt die Höhe an, abzüglich Header/Footer etc. */
    overflow-y: auto; /* Aktiviert das vertikale Scrollen bei Überlauf */

}
#conversationSidebar {
    max-height: calc(72vh - 120px);
    overflow-y: auto; /* Aktiviert den Scrollbalken bei Überlauf */
    min-height: calc(40vh - 120px);
}
#messageContainer {
	
	border-radius: 15px;
}
.message-artist-image {
	display: flex; /* Aktiviert ein flexibles Layout */
    width: 40px; /* Größe des Profilbilds */
    height: 40px;
    border-radius: 15px;
    margin-right: 10px;
    flex-shrink: 0; /* Verhindert, dass das Bild verkleinert wird */
}


.contact-list {
    display: flex;
    flex-direction: column;
}


.contact-artist-image {
    width: 50px; /* Anpassung der Bildbreite */
    height: 50px;
    border-radius: 15px;
    margin-right: 15px; /* Abstand zum Text */
    flex-shrink: 0; /* Verhindert, dass das Bild verkleinert wird */
}

.contact-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1; /* Füllt den verbleibenden Platz neben dem Bild */
}

.contact-details strong {
    font-size: 1rem;
    margin-bottom: 2px; /* Kleiner Abstand zwischen Name und Nachricht */
}
#genre-dropdown {
	z-index: 1050;
}
#dropdown-homebase {
	z-index: 1050;
}
.contact-details p {
    font-size: 0.85rem;
    margin: 0;
}

.contact-link {
    text-decoration: none;
    color: inherit;
}

.message-options {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}

.delete-menu {
    position: absolute;
    right: 20px;
    top: 20px;
    background-color: #1C1C1C;
    border: 1px solid #E0E0E0;
    padding: 10px;
    border-radius: 5px;
    width: 150px;
	z-index: 1070;
}

.active-chat {
    background-color: rgba(0, 230, 118, 0.1); /* Grüne Hintergrundfarbe */
    border-left: 4px solid #00E676; /* Grüner Rand links */
    padding-left: 6px; /* Leichter Versatz für Inhalt */
}

/* Add this to your CSS */
.unread-message {
    background-color: rgba(255, 111, 0, 0.1); /* light orange background */
    font-weight: bold;
}
.contact-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #E0E0E0;
    transition: background-color 0.3s ease;
}
.trash-icon-container {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: none; /* Standardmäßig ausgeblendet */
    cursor: pointer;
}

.contact-item:hover .trash-icon-container {
    display: block; /* Icon bei Hover anzeigen */
}

.trash-icon {
    color: #FF6F00; /* Orange für das Trash-Icon */
    font-size: 1.2rem;
}

.contact-item .badge-green {
    font-size: 0.8rem;
    background-color: #FF6F00; /* Orange highlighting */
    color: #1C1C1C; /* Textfarbe passend zur Badge-Farbe */
    border-radius: 15px;
    padding: 5px 8px;
    position: absolute;
    right: 10px; /* Abstand vom rechten Rand des contact-item */
    top: 50%;
    transform: translateY(-50%); /* Zentriert die Badge vertikal */
}

.offcanvas-header {
	background-color: #1C1C1C;
	z-index: 1050;
}
.upload-instructions-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #E0E0E0;
    background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */
    padding: 10px 20px;
    border-radius: 15px;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    z-index: 2; /* Überlagert das Bild */
    pointer-events: none; /* Verhindert, dass es den Klick blockiert */
}
.artist-name-overlay .badge {
    font-size: 0.9rem;
    margin-left: 10px;
    cursor: pointer;
}

.artist-name-overlay .badge:hover {
    background-color: #2680EA; /* Blau für Hover-Effekt */
    color: #fff; /* Weißer Text für besseren Kontrast */
}
.menu-padding {
    padding: 0; /* Standard: Kein Padding */
}

/* Scroll-Container */
.tile-scroll-container {
    display: flex;
    flex-wrap: nowrap; /* Keine Umbrüche */
    overflow-x: auto; /* Ermöglicht horizontales Scrollen */
    padding-bottom: 10px; /* Platz für die Scrollbar */
	padding-top: 10px; 
    gap: 10px; /* Abstand zwischen den Kacheln */
}

/* Kacheln mit fixer Größe */
.match-tile {
    flex: 0 0 auto; /* Keine Flex-Skalierung, bleibt bei fixer Breite */
    width: 200px; /* Feste Breite */
    height: 200px; /* Feste Höhe */
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #1C1C1C;
}


/* Scrollbar Styling */
.tile-scroll-container::-webkit-scrollbar {
    height: 8px; /* Höhe der Scrollbar */
}

.tile-scroll-container::-webkit-scrollbar-thumb {
    background-color: #1C1C1C; /* Farbe der Scrollbar */
    border-radius: 15px; /* Abgerundete Ecken */
}

.tile-scroll-container::-webkit-scrollbar-track {
    background-color: #00E676; /* Hintergrundfarbe der Scroll-Leiste */
}

.horizontal-scroll {
    display: flex;
    overflow-x: auto; /* Aktiviert horizontales Scrollen */
    gap: 10px; /* Abstand zwischen den Tiles */
    padding-bottom: 10px; /* Vermeidet abgeschnittenen Content durch Scrollbar */
}

.horizontal-scroll::-webkit-scrollbar {
    height: 8px; /* Höhe der Scrollbar */
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background-color: #1C1C1C; /* Farbe der Scrollbar */
    border-radius: 15px; /* Abgerundete Ecken */
}

.horizontal-scroll::-webkit-scrollbar-track {
    background-color: #00E676; /* Hintergrundfarbe der Scroll-Leiste */
}
.match-tile .bi-info-circle-fill {
    cursor: pointer;
    font-size: 1.2rem;
    color: #E0E0E0;
    transition: color 0.2s;
}

.match-tile .bi-info-circle-fill:hover {
    color: #00E676; /* Grün beim Hover */
}

.match-tile .badge {
    font-size: 0.9rem;
    padding: 5px 10px;
    border-radius: 10px;
}
.badge.bg-danger.rounded-circle {
    width: 10px; /* Durchmesser des Punktes */
    height: 10px; /* Durchmesser des Punktes */
    padding: 0; /* Kein Padding */
    line-height: 1; /* Standardhöhe */
    display: inline-block; /* Inline-Block-Element */
    vertical-align: middle; /* Zentriert mit dem Icon */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* Optional: leichter Schatten für bessere Sichtbarkeit */
}
/* Infobox standardmäßig ausblenden auf mobilen Geräten */
@media (max-width: 768px) {
    #info-column {
        display: none;
    }
	.mobile-nav {
        display: block;
    }
	.control-panel {
	  /* Desktop Positioning mit Safe Area */
	  position: fixed;
	  top: calc(60px + env(safe-area-inset-top));
	right: 10px;
	  z-index: 1000;
	  max-width: 300px;
	  overflow-y: auto;
	}
}

/* Sicherstellen, dass die Infobox auf größeren Geräten sichtbar bleibt */
@media (min-width: 769px) {
    #info-column {
        display: block;
    }
	.control-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    max-width: 300px;
  }
	#controlPanel.collapse {
    display: block !important;
  }
}

.conversation-icons {
    display: flex;
    gap: 15px; /* Abstand zwischen den Icons */
}
.conversation-icons .active-icon {
    border: 1px solid #00E676; /* Grüner Rahmen für aktive Icons */
    border-radius: 15px; /* Runde Icons */
}

.active-icon {
	margin: 20px;
}
.match-placeholder {
    display: flex;
    align-items: center; /* Vertikale Zentrierung der Inhalte */
    justify-content: space-between; /* Elemente links und rechts ausrichten */
    padding: 15px;
    background: #222; /* Hintergrundfarbe passend zur Seite */
    border-radius: 10px;
    margin-bottom: 15px;
	border: 1px solid #F6C244;
    box-shadow: 0 0 5px rgba(246, 194, 68, 0.8);
}

.only-premium {
	border: 1px solid #F6C244 !important;
    box-shadow: 0 0 5px rgba(246, 194, 68, 0.8);
}
.premium {
	color: #F6C244;
}


.only-premium .btn {
	border: 1px solid #F6C244;
	color: #1C1C1C;
	background-color: #F6C244;
    box-shadow: 0 0 5px rgba(246, 194, 68, 0.8);
}
.only-premium-badge {
	border: 1px solid #F6C244;
	color: #F6C244;
	background-color: #1C1C1C;
    box-shadow: 0 0 5px rgba(246, 194, 68, 0.8);
	font-size: 0.6em;
	padding: 2px 7px;
    border-radius: 15px;
	margin-bottom: 4px;
}
.only-premium-badge .i{	
	color: #F6C244;
}
.placeholder-photo {
    width: 65px;
    height: 65px;
    background: linear-gradient(90deg, #444, #555);
    border-radius: 15px;
    margin-right: 15px;
    animation: pulse 1.5s infinite;
}

.placeholder-texts {
    flex: 1;
}

.placeholder-line {
    height: 15px;
	width: 60%;
    background: linear-gradient(90deg, #444, #555);
    margin-bottom: 8px;
    border-radius: 5px;
    animation: pulse 1.5s infinite;
}

.placeholder-line.short {
    width: 30%;
}
.match-placeholder .btn-green {
    align-self: center; /* Zentriert den Button vertikal */
    margin-left: auto; /* Schiebt den Button an den rechten Rand */
}
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}



/* Dropdown-Styling */
.form-select {
    background-color: #1C1C1C;
    color: #E0E0E0;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    padding: 5px 12px;
    font-family: 'Lato', sans-serif;
    font-size: 0.8rem;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}
.form-select:hover {
    border-color: #2680EA;
}

.form-select:focus {
    outline: none;
    border-color: #00E676;
    box-shadow: 0 0 5px rgba(0, 230, 118, 0.8);
}




/* Listenelemente */
.match-item {
   
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    
}

/* Match-Details */
.match-details {
    display: flex;
    align-items: center;
}

.match-image {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1/1;
}

/* Flag-Button Styling */
.flag-button {
    position: fixed;
    top: 250px; /* Abstand vom unteren Bildschirmrand */
    right: 0px; /* Abstand vom rechten Bildschirmrand */
    background-color: #FF6F00; /* Orange */
    color: white;
    border: none;
    border-radius: 15px 0 0 15px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1050; /* Über Modal-Level, aber unter Navbars */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}


.flag-button:hover {
    background-color: #F6C244; /* Dunkleres Orange */
    transform: scale(1.1); /* Leichter Zoom-Effekt */
}

.flag-button i {
    font-size: 1rem; /* Icon-Größe */
}
/* Ticket-Liste */
.ticket-list-container {
    margin-bottom: 30px;
    border: 1px solid #E0E0E0;
    border-radius: 15px;
    background-color: #1C1C1C;
    overflow: hidden;
}

.ticket-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border-bottom: 1px solid #E0E0E0;
}

.ticket-item:last-child {
    border-bottom: none;
}

.ticket-item:hover {
    background-color: rgba(0, 230, 118, 0.1); /* Grüner Hover-Hintergrund */
    transform: scale(1.02);
}

.ticket-item .ticket-details {
    flex-grow: 1;
    margin-right: 15px;
}

.ticket-item .badge {
    font-size: 0.9rem;
    padding: 8px 12px;
    border-radius: 15px;
    text-transform: capitalize;
}

/* Details-Ansicht */
.ticket-details-container {
    border: 1px solid #E0E0E0;
    border-radius: 15px;
    padding: 20px;
    background-color: rgba(0, 230, 118, 0.1);
}

.ticket-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.ticket-details-header h4 {
    font-size: 1.5rem;
    color: #00E676;
}

.ticket-details-content {
    margin-top: 15px;
}

.ticket-details-content p {
    margin-bottom: 10px;
    line-height: 1.5;
}

.ticket-details .btn-green {
    margin-top: 20px;
    align-self: flex-start;
}
canvas {
    width: 100% !important;
    height: auto !important; /* Dynamische Anpassung */
}

.status-discovered {
    background-color: #f0ad4e; /* Orange */
    color: #fff;
}

.status-waiting_for_confirmation {
    background-color: #5bc0de; /* Blau */
    color: #fff;
}

.status-accepted {
    background-color: #5cb85c; /* Grün */
    color: #fff;
}

.status-rejected {
    background-color: #d9534f; /* Rot */
    color: #fff;
}
.status-ignored {
    background-color: #6c757d; /* Grau für „ignored“ */
    color: #fff;
}
.status-initiated {
 background-color: #17a2b8; /* Sanftes Blau */
    color: #FFFFFF; /* Weißer Text */
}
/* Container für die Notification-Liste */

.notification-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Einzelne Notification */
.notification-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 15px;
    padding: 10px 15px;
    margin: 10px;
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    word-wrap: break-word;
    color: #1C1C1C;
    position: relative;
}


/* Ungelesene Notification */
.notification-item.unread {
    border-left: 4px solid #FF6F00; /* Orange Rahmen */
}

/* Gelesene Notification */
.notification-item.read {
    border-left: 4px solid #00E676; /* Grüner Rahmen */
}

/* Nachrichtentext */
.notification-message {
    line-height: 1.4;
    color: #1C1C1C;
    font-weight: 400;
    overflow-wrap: break-word;
}

/* Zeitstempel */
.notification-timestamp {
    font-size: 0.75rem;
    color: #A0A0A0;
    margin-top: 5px;
}

/* Badge für "Neu" */
.badge-new {
    background-color: #FF6F00;
    color: #1C1C1C;
    font-size: 0.6rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    position: absolute;
    top: 3px;
    right: 10px;
}

/* Button zum Löschen */
.btn-delete-notification {
    background: none;
    border: none;
    color: #FF6F00; /* Orange passend zum Design */
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 10px;
    align-self: center;
    transition: color 0.3s ease;
}

.btn-delete-notification:hover {
    color: #E0E0E0; /* Heller beim Hover */
}


.notification-content {
    flex-grow: 1;
}

.badge-new {
    margin-right: auto; /* Verschiebt Badge nach links */
}

.notification-timestamp {
    margin-right: 10px; /* Abstand zum Löschen-Button */
}
.navbar {
	background-color: #00E676 !important;
	z-index: 2000;
	
}

#top-artists-container .list-group-item {
    background-color: #111111;
    color: #E0E0E0;
    border: none;
    padding: 15px;
    display: flex;
    align-items: center;
}

#top-artists-container .list-group-item img,
.notification-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
}

#top-artists-container .list-group-item h5 {
    margin: 0;
    font-size: 1rem;
    color: #E0E0E0;
}

#top-artists-container .list-group-item p {
    margin: 0;
    font-size: 0.875rem;
    color: #B0B0B0;
}

#top-artists-container .badge {
    margin-left: auto;
    background-color: #00E676;
    color: #111111;
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 12px;
}

.ticket-item.highlighted {
    background-color: #F6C244;
	color: #111111;
    /* Optional: Weitere Stile zur Verbesserung der Sichtbarkeit */
    border-left: 5px solid #D99A14; /* Beispiel für einen linken Rand */
    padding: 10px; /* Beispiel für zusätzlichen Abstand */
    
    transition: background-color 0.3s ease; /* Sanfter Übergang bei Hover */
}

.ticket-item.highlighted:hover {
    background-color: #e0b33d; /* Etwas dunkler beim Hover */
}
.ticket-details-content img {
    max-width: 100%; /* Skaliert das Bild proportional */
    height: auto;
    border: 1px solid #ddd;
    margin-top: 10px;
}

.bi.bi-soundcloud {
    display: inline-block;
    width: 1.5rem; /* Gleiche Größe wie andere Bootstrap-Icons */
    height: 1.5rem;
	vertical-align: -.325em; /* Wie bei Bootstrap-Icons */
    color: #B0B0B0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	background-image: url('/images/custom-icons/soundcloud-icon.svg');
}.input-group {
    display: flex;
    align-items: center;
    gap: 5px; /* Abstand zwischen Eingabefeld und Button */
}

.input-group .form-control {
    flex-grow: 1; /* Eingabefeld nimmt den verfügbaren Platz ein */
}

.input-group .btn-outline-secondary {
    flex-shrink: 0; /* Verhindert, dass der Button skaliert wird */
}

/* Navigation Tabs */
.nav-pills .nav-link {
    background-color: #1C1C1C;
    color: #E0E0E0;
    border-radius: 15px;
    margin: 0 5px;
    padding: 10px 20px;
    transition: background-color 0.3s, color 0.3s;
}

.nav-pills .nav-link:hover {
    background-color: #2680EA;
    color: #FFFFFF;
}

.nav-pills .nav-link.active {
    background-color: #00E676;
    color: #1C1C1C;
    font-weight: bold;
}

/* Tab Content */
.tab-content {
    margin-top: 20px;
}

.tab-pane {
    border-radius: 15px;
    
   
}

/* Verbesserung für mobile Geräte */
@media (max-width: 768px) {
    .nav-pills .nav-link {
        padding: 10px;
        font-size: 0.9rem;
    }

    .tab-pane {
        padding: 15px;
    }
}

.text-highlight {
    background-color: yellow;
    font-weight: bold;
}

#artist-network {
    position: relative;
    width: 100%;
    height: 100%;
   transform-origin: center center;
	overflow: hidden;
}



/* Separate CSS-Datei oder innerhalb eines <style> Tags */
/* Node-Stile */
.self-node {
    stroke: #00E676;
    stroke-width: 8px;
}

.other-node {
    stroke: #2680EA;
    stroke-width: 2px;
}
.other-node.active {
    stroke: #2680EA;
    stroke-width: 2px;
}

/* Inaktive Künstler */
.other-node.inactive circle {
    stroke: #B0BEC5; /* Grauer Rand für inaktive Künstler */
    stroke-width: 3px;
    opacity: 0.5; /* Ausgegraute Darstellung */
}

.other-node.inactive {
    stroke: #FF6F00;
    stroke-width: 2px;
    opacity: 0.5; /* Beispiel: Inaktive Nodes halbtransparent */
}

.potential-node {
    stroke: #FF6F00;
    stroke-width: 1px;
    opacity: 0.3; /* Beispiel: Potenzielle Nodes weniger sichtbar */
}

/* Link-Stile */
.accepted-link {
    stroke: #00E676;
    stroke-width: 4px;
}

.discovered-link {
    stroke: #2680EA;
    stroke-width: 2px;
    stroke-dasharray: 4, 2; /* Muster: 4px Strich, 2px Lücke */
}

.potential-link {
    stroke: #FF6F00;
    stroke-width: 2px;
}

/* Text-Stile */
.artist-name {
    fill: #FFFFFF;
    font-size: 12px;
    pointer-events: none; /* Verhindert, dass der Text interaktiv ist */
}
.potential-node-placeholder {
    stroke: #FF6F00;
    fill: #FFEBCC;
    opacity: 0.5;
}
.potential-node-free {
    stroke: #FF6F00; /* Orange Rand */
    fill: #555;      /* z.B. grau */
    opacity: 0.5;    /* halbtransparent */
}






#install-banner {
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}
#install-button:hover {
    background: #00C853;
}



/* Mobile Header (obere Leiste mit Titel und Zurück-Button) */
@media (max-width: 991px) {
    .mobile-header {
        position: fixed;
        top: 0; /* Dynamisch den Platz für die Statusleiste berücksichtigen */
		padding-top: env(safe-area-inset-top, 0); 
		padding-bottom: 10px;
        left: 0;
        width: 100%;
        background-color: #00E676; /* Grüner Hintergrund */
        display: flex;
        align-items: center;
        z-index: 1000;
    }
	.mobile-header select,
	.mobile-header .form-check {
		margin-top: 5px;
	}
		.page-title {
		font-size: 1.5rem;
		font-family: 'Poppins', sans-serif;
		color: #111111;
	}

    .back-btn {
        font-size: 1.5rem;
        background: none;
        border: none;
        cursor: pointer;
       
		color: #111111;
    }
	


    /* Mobile Navigation (untere Leiste) */
.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #111111;
    padding: 10px 10px 22px 10px;
    z-index: 999;
}

/* Mobile Navigation Links */
.mobile-nav-links {
    display: flex;
    justify-content: space-around;
}

.mobile-nav-links a {
    text-align: center;
    color: #E0E0E0;
    text-decoration: none;
}

.mobile-nav-links a span {
    display: block;
    font-size: 0.8rem;
}

/* Icons */
.mobile-nav-links i {
    font-size: 1.2rem;
    margin-bottom: 2px;
}


    
}


/* Versteckt das mobile Menü auf größeren Geräten */
@media (min-width: 992px) {
	.input-group.fixed-bottom {
        bottom: 0; /* Keine Verschiebung auf größeren Geräten */
        position: relative; /* Sicherstellen, dass die Position immer fixiert ist */
		background-color: #1c1c1c;
		
    }
	.message-section {
		min-height: 75vh !important;
	}
   .mobile-nav {
        display: none;
    }
	 #install-hint {
        display: none !important;
    }
 .page-title {
        display: none;
    }
	 /* Versteckt den Zurück-Button auf größeren Geräten */
    .mobile-header .back-btn {
        display: none !important;  /* Nutze !important zur Priorisierung */
    }
	
}

 #map {
    height: 600px; /* oder eine andere angemessene Höhe */
    width: 100%;   /* oder eine andere angemessene Breite */
  }


        /* Zoom-Buttons und Zurück-Button */
        /* Zoom-Buttons und Zurück-Button */
        .custom-controls {
            position: fixed;
            top: 10px;
            left: 10px; /* Zurück-Button bleibt immer links */
            z-index: 1002;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .custom-controls .back-btn {
            background: none;
            border: none;
            color: #FFFFFF;
            font-size: 1.5rem;
            cursor: pointer;
        }
        .custom-controls .zoom-btn {
            background-color: rgba(28, 28, 28, 0.7);
            border: none;
            color: #E0E0E0;
            padding: 8px;
            border-radius: 4px;
            font-size: 1.2rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .custom-controls .zoom-btn:hover {
            background-color: rgba(40, 40, 40, 0.9);
        }

        /* Panel für die Routenpunkte */
        #routePanel {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: rgba(28, 28, 28, 0.85);
            color: #E0E0E0;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            padding: 10px 20px;
            max-height: 40%; /* Standard-Höhe */
            overflow-y: auto;
            transition: max-height 0.3s ease, transform 0.3s ease;
            z-index: 1001;
        }
        #routePanel.expanded {
            max-height: 90%; /* Vollständig ausgeklappt */
        }
        #routePanel .handle {
            width: 50px;
            height: 5px;
            
            margin: 0 auto 10px;
            cursor: pointer;
        }
        .sortable-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .sortable-item {
            padding: 10px;
            margin-bottom: 5px;
            background-color: #2C2C2C;
            border: 1px solid #444;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .sortable-item.fixed-item {
            background-color: #1C1C1C;
            cursor: not-allowed;
        }
        .sortable-item .text-muted {
            font-size: 0.9rem;
            color: #A0A0A0;
        }
        .sortable-item .duration {
            margin-left: 10px;
            font-size: 0.8rem;
            color: #A0A0A0;
        }
        .remove-btn {
            background: none;
            border: none;
            color: #FF6F00;
            cursor: pointer;
        }
        .remove-btn:hover {
            color: #FF3D00;
        }

        /* Responsive Design */
        @media (min-width: 768px) {
            #routePanel {
                width: 400px;
                right: 0;
                left: auto;
                top: 0;
                height: 100%;
                max-height: 100%;
                border-radius: 0 15px 15px 0;
                overflow-y: auto;
                box-shadow: -4px 0 8px rgba(0, 0, 0, 0.3);
            }
            #routePanel.expanded {
                transform: translateY(0);
            }
            .custom-controls {
                top: 20px;
                left: 20px;
                transform: none;
            }
        }


.hidden {
    display: none;
}

.visible {
    display: block;
}

.deleted-node {
    stroke: #666 !important;
    stroke-dasharray: 4,2;
    fill-opacity: 0.1;
}
.deleted-node:hover {
    stroke: #FF6F00 !important;
}

.deleted-node circle {
    stroke: #666 !important;
    stroke-dasharray: 4,2;
    fill-opacity: 0.1;
}

.deleted-node image {
    filter: grayscale(100%) brightness(0.5);
    opacity: 0.4;
}

.deleted-node text {
    text-decoration: line-through;
    fill: #ff6f00 !important;
    font-style: italic;
}

/* Stile für Links zu gelöschten Nodes */
.deleted-link {
    stroke: #999 !important;
    stroke-dasharray: 5,5;
    opacity: 0.3;
}

#center-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

#center-button[disabled]:hover {
    transform: none;
}

.btn-toggle.active {
    background: rgba(0, 230, 118, 0.15);
    border-color: #00E676;
}

.btn-toggle.active .btn-toggle-inner {
    background: #00E676;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
}
  #toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

#toast-container .toast {
  margin-bottom: 10px;
}


/* Allgemeine Blog-Listen-Stile */
.blog-posts {
    list-style: none;
    padding: 0;
    margin: 0;
}
section {
	margin-top: 50px;
}
.blog-post-item {
    margin-bottom: 20px;
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 15px;
}

.blog-post-item a {
    text-decoration: none;
    color: inherit;
}

.blog-post-item h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    margin: 0 0 10px;
    color: #00E676;
}

.post-meta {
    font-size: 0.9rem;
    color: #B0B0B0;
    margin-bottom: 10px;
}

.post-excerpt {
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #E0E0E0;
}

/* Einzelbeitragsseite */
.blog-post-header h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    margin-bottom: 10px;
    color: #00E676;
}

.blog-post-header .post-meta {
    font-size: 0.9rem;
    color: #B0B0B0;
    margin-bottom: 20px;
}

.blog-post-content {
    font-family: 'Lato', sans-serif;
    font-size: 1.25rem;
    line-height: 1.6;
    color: #E0E0E0;
}

.blog-post-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Benefit-Abschnitt (Seitenbezogener Mehrwert von gigmate.de) */
.gigmate-benefit {
    background-color: #00E676;
    color: #1C1C1C;
    padding: 20px;
    border-radius: 15px;
    margin-top: 40px;
    text-align: center;
}

.gigmate-benefit h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
}

.gigmate-benefit p {
    font-family: 'Lato', sans-serif;
    margin-bottom: 15px;
}

.gigmate-benefit a.btn {
    display: inline-block;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 15px;
    background-color: #1C1C1C;
    color: #00E676;
    transition: background-color 0.3s, color 0.3s;
}

.gigmate-benefit a.btn:hover {
    background-color: #00E676;
    color: #1C1C1C;
}

.notification-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    background: #232323;
    display: block;
}


#cookie-banner {
    max-width: 630px;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    margin-bottom: 0.5rem;
    z-index: 1050;
}

@media (max-width: 576px) {
    #cookie-banner {
        max-width: 100vw;
        width: 100vw;
        left: 0;
        transform: none;
        border-radius: 0;
        margin-bottom: 0;
    }
    #cookie-banner .p-4 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Accordion FAQ Dark Design */

.accordion-item {
    background-color: #111111 !important;
    border: 1px solid #00E676 !important;
    border-radius: 15px !important;
    margin-bottom: 15px;
    overflow: hidden;
}

.accordion-header {
    background: none;
    border: none;
    border-radius: 0 !important;
}

.accordion-button {
    background-color: #1C1C1C !important;
    color: #00E676 !important;
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 18px 24px;
    transition: background-color 0.3s, color 0.3s;
}

.accordion-button:not(.collapsed) {
    background-color: #111111 !important;
    color: #FF6F00 !important;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: 0 0 0 2px #00E67644 !important;
    outline: none !important;
}

.accordion-body {
    background-color: #1C1C1C !important;
    color: #E0E0E0 !important;
    border-top: 1px solid #00E676;
    padding: 24px;
    border-radius: 0 0 15px 15px;
}

/* Icon Farbe anpassen */
.accordion-button::after {
    filter: brightness(0) saturate(100%) invert(52%) sepia(85%) saturate(394%) hue-rotate(88deg) brightness(94%) contrast(98%);
}


.btn-delete-ticket {
    background: none;
    border: none;
    color: #FF6F00;
    font-size: 1rem;
    margin-left: 5px;
    transition: color 0.2s;
}
.btn-delete-ticket:hover {
    color: #d9534f;
}
@media (max-width: 991px) {
  .content {
    padding-top: calc(env(safe-area-inset-top, 0) + 32px);
  }
}

.match-item .match-timestamps {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.match-item:hover .match-timestamps,
.match-item:focus-within .match-timestamps {
  opacity: 1;
  pointer-events: auto;
}
.match-timestamps {
  z-index: 10;
  background: rgba(34,34,34,0.82);
  border-radius: 0 0 0 12px;
  padding: 2px 8px;
}
.match-timestamps .created-at,
.match-timestamps .updated-at {
  font-size: 0.77rem;
  color: #ccc !important;
  letter-spacing: 0.01em;
}