.btn-primary
{
    background-color: #7216ae;
    border-color: #7216ae;
}

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

.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible 
{
  background-color: #7216ae !important;
  border-color: #7216ae !important;
}

.nav-tabs .nav-link
{
  color: #e1e1e1; /* Standard-Schriftfarbe */
}

.nav-tabs .nav-link.active
{
  background-color: #121212; /* Dunkler Hintergrund */
  color: #e1e1e1; /* Weißer Text */
  border-color: #343a40 #343a40 #fff; /* Rahmenfarbe */
}

.preview-box 
{
  background-color: rgba(255, 255, 255, 0.8); /* Halbtransparentes Weiß */
  color: #000; /* Schwarzer Text */
  border: 1px solid #ccc; /* Optional: leichte Umrandung */
  padding: 10px; /* Optional: etwas Abstand */
  border-radius: 5px; /* Optional: Abgerundete Ecken */
  font-family: monospace; /* Optional: Monospace-Schrift für Vorschau */
}


.usage-grid {
  display: grid;
  grid-template-columns: repeat(52, 20px); /* 52 Spalten für die Wochen */
  grid-template-rows: repeat(7, 20px); /* 7 Zeilen für die Tage (Montag bis Sonntag) */
  gap: 2px; /* Abstand zwischen den Squares */
}

.hil-usage-container {
  display: flex;
  align-items: flex-start; /* Wochentage und Grid auf gleicher Höhe */
  gap: 10px; /* Abstand zwischen den Wochentagen und dem Grid */
}

/* Styling für die Wochentage */
.weekdays {
  display: grid;
  grid-template-rows: repeat(7, 20px); /* 7 Zeilen für die Wochentage */
  gap: 2px;
}

.weekday {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Text rechtsbündig */
  font-size: 12px; /* Kleinere Schriftgröße */
  height: 20px; /* Gleiche Höhe wie die Squares */
  line-height: 20px; /* Vertikale Ausrichtung */
  color: #ffffff;
}

/* Grid für die Squares */
.usage-grid {
  display: flex; /* Zeigt die Wochen horizontal an */
  gap: 4px; /* Abstand zwischen den Wochen */
}

.week {
  display: grid;
  grid-template-rows: repeat(7, 20px); /* 7 Zeilen für die Tage */
  gap: 2px; /* Abstand zwischen den Tagen */
}

.usage-square {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    border: 1px solid white;
}

.usage-square.hours-0 {
    background-color: #28272d; /* 0 Stunden */
}

.usage-square.hours-6-11 {
    background-color: #303470; /* 6 bis 11 Stunden */
}

.usage-square.hours-12-18 {
    background-color: #4e65cd; /* 12 bis 18 Stunden */
}

.usage-square.hours-18-21 {
    background-color: #7992f5; /* 18 bis 21 Stunden */
}

.usage-square.hours-22-24 {
    background-color: #d2dcff; /* 22 bis 24 Stunden */
}

.usage-square.empty {
    background-color: transparent;
    border: none;
}

.usage-square:hover {
  border: 1px solid #ffffff;
  cursor: pointer;
}

.results-column {
  width: 35%; /* Passe die Breite der Ergebnisse-Spalte an */
}

.bold-text {
  font-weight: bold;
}

.wizard-container {
  border: 2px solid #ffffff; /* Weiße Umrandung */
  background-color: #2c2c2c; /* Optional: Hintergrundfarbe für den Bereich */
  padding: 20px; /* Abstand innerhalb des Containers */
  border-radius: 8px; /* Optionale Abrundung */
}