/* Grundfarben (aus deinem Branding) */
:root {
	/*twc = Thomas Wiesner Color */
 /* --twc-blue: #0B4F6C;
  --twc-sand: #EDE2D0;
  --twc-turquoise: #6FB3B8;
  --twc-text: #222222;*/
  
  /* Bootstrap-Variablen überschreiben */
 /* --bs-primary: var(--twc-blue);*/
 /* --bs-primary-rgb: 11, 79, 108;*/	/* RGB von #0B4F6C */
  
/* Hintergrund für ColorMode */ 
  --bg-color-mode: #2b3035;
  --bg-color-firstRow: #003E21;
  --bg-color-firstRowEmpty: #2c2c2c;
}

[data-bs-theme="light"] {
  --bg-color-mode: #e0e0e0;
  --bg-color-firstRow: #d1e7dd;
  --bg-color-firstRowEmpty: #c9c9c9;
}

.bg-colorMode {
  background-color: var(--bg-color-mode);
}




body {
  /*color: var(--twc-text);*/
}




/* Buttons */
/*.btn-primary {
  background-color: var(--twc-blue);
  border-color: var(--twc-blue);
}

.btn-primary:hover {
  background-color: #093c52;
  border-color: #093c52;
}

.btn-outline-primary {
  color: var(--twc-blue);
  border-color: var(--twc-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--twc-blue);
  border-color: var(--twc-blue);
  color: #fff;
}*/








			

			
			/* Scrollt automatisch etwas nach oben, wenn Sprungmarken mit # per Link angeklickt werden */
			html{
			  scroll-behavior: smooth; /* optional: sanftes Scrollen */
			}

			/* Höhe des fixen Headers, z. B. 70px */
			:target {
			  scroll-margin-top: 70px; /* verschiebt Ziel beim Scrollen nach unten */
			}

			
			.dropzone {
				/*background: #2b3035 !important;*/
				background-color: var(--bg-color-mode);
			}
			
			/*
			 * Sidebar
			 */

			@media (min-width: 768px) {
			  .sidebar .offcanvas-lg {
				position: -webkit-sticky;
				position: sticky;
				top: 48px;
			  }
			}

			/*.sidebar .nav-link {
			  font-weight: 500;
			  color: rgb(255,255,255,0.75);
			}*/

			.sidebar .nav-link.active {
			  color: #121212;
			  background-color: #f0f0f0;
			}

			/*
			 * Navbar
			 */

			.navbar-brand {
			  padding-top: .75rem;
			  padding-bottom: .75rem;
			  /*background-color: rgba(0, 0, 0, .25);
			  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);*/
			}
			
			.footer-tw{
				position: relative;
			}
			
			
			/* 
			 * Table - Formating Next, Prev - Buttons
			*/
			div.dt-container .dt-paging .dt-paging-button {
				padding: 0em 0em !important;
				margin-left: 0px !important;
			}
			
			.requiredTW::after {
				content: " *";
				padding-left: 3px;
				color: rgba(220,53,69); /* Optional: Ändert die Farbe des Sterns */
			}
			
			
			/* Style the close button (span) for input tags */
			.close {
			  cursor: pointer;
			  position: absolute;
			  color: #6c757d;
			  top: 50%;
			  right: 0%;
			  padding: 12px 16px;
			  transform: translate(0%, -50%);
			}

			.close:hover {
				background: #6d767e;
				color: #fff;
				}

			
			
			/* Tabelle erste Spalte */
			/*#table .firstRow{
				background-color: var(--bg-color-firstRow);
			}
			#table .firstRow:hover {
				cursor: pointer;
			}*/
			
			#table .firstRowEmpty{
				background-color: var(--bg-color-firstRowEmpty);
			}
			
			
			
			#table .badge:hover{
				cursor: pointer;
			}
			#table .table-img:hover{
				cursor: pointer;
			}
			
			
			
			/* Farbkreis */
			.table .colorCirle {
			  position: relative;
			  padding-left: 2rem; /* Platz für den Kreis */
			  vertical-align: middle;
			}

			/* Kreis vor dem Text */
			.table .colorCirle::before {
			  content: "";
			  display: inline-block;
			  width: 1rem;
			  height: 1rem;
			  background: var(--dot);
			  border-radius: 50%;
			  position: absolute;
			  left: 8px;           /* Abstand vom Zellenrand */
			  top: 50%;
			  transform: translateY(-50%);
			}
			
				
			/* Maximale Breite der Bilder für Desktop */
			@media (min-width: 768px) {
            .table-img {
                max-width: 200px; 
            }
        }