:root {
  --text-color-dark: black;
  --text-color-bright: white;
  --bg-dark: rgb(33, 37, 41);
  --bg-color-bright: white;
  --bg-color-medium: color-mix(in srgb, var(--bg-color-bright) 80%, black);
  --body-bgcolor: color-mix(in srgb, var(--bg-color-bright) 90%, black);
  --bc93color-red: #da251dff;
  --bc93color-yellow: #f6cc00ff;
  --bc93color-blue: #007cc3ff;
  --startpage-bgcolor: color-mix(in srgb, var(--bg-color-bright) 50%, black);
  --headline-bgcolor: var(--bc93color-yellow);
  --headline-color: var(--bc93color-blue);
  --headline-fontsize: 4cqi;
  --table-bgcolor: var(--bg-color-bright);
  --table-color: var(--text-color-dark);
  --table-fontsize: 3cqi;
  --username-fontsize: 1cqmax;
  --color-bc93-pool: #4baeff;
  --color-bc93-snooker: #4cc563;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('assets/fonts/roboto/roboto-v47-latin-100.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('assets/fonts/roboto/roboto-v47-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Shadows Into Light';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/shadows-into-light/shadows-into-light-v20-latin-regular.woff2')
    format('woff2');
}
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background-color: var(--body-bgcolor);
  overflow-x: hidden;
}
.username {
  position: fixed;
  top: 1cqi;
  right: 1cqi;
  background-color: white;
  color: black;
  font-size: var(--username-fontsize);
  border: 1px solid black;
  padding: 5px;
  font-weight: bold;
}
a {
  text-decoration: none;
  color: black;
}
.form {
  height: 95%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--startpage-bgcolor);
}
.startpage {
  grid-area: startpage;
  height: 80%;
  width: 80%;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    'headline headline'
    'pool1 snooker1'
    'pool2 snooker2'
    'pool3 snookerleague'
    'pool4 poolleague'
    'pool5 pooltournament';
  column-gap: 10px;
  row-gap: 0px;
  background-color: var(--startpage-bgcolor);
}
.headline {
  grid-area: headline;
  background-color: var(--headline-bgcolor);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--headline-color);
  font-size: var(--headline-fontsize);
  font-weight: bold;
}
.pool1 {
  grid-area: pool1;
}
.pool2 {
  grid-area: pool2;
}
.pool3 {
  grid-area: pool3;
}
.pool4 {
  grid-area: pool4;
}
.pool5 {
  grid-area: pool5;
}
.snooker1 {
  grid-area: snooker1;
}
.snooker2 {
  grid-area: snooker2;
}
.poolleague {
  grid-area: pooltournament;
}
.poolleague {
  grid-area: poolleague;
}
.snookerleague {
  grid-area: snookerleague;
}
.pool1,
.pool2,
.pool3,
.pool4,
.pool5,
.poolleague,
.pooltournament {
  background-color: var(--color-bc93-pool);
  color: var(--table-color);
  font-size: var(--table-fontsize);
  font-weight: bold;
  border: none;
  text-align: center;
  padding: 0.2cqi;
}
.snooker1,
.snooker2,
.snookerleague {
  background-color: var(--color-bc93-snooker);
  color: var(--table-color);
  font-size: var(--table-fontsize);
  font-weight: bold;
  border: none;
  text-align: center;
  padding: 0.2cqi;
}
.special-by {
  font-style: italic; /* Kursiv für den Stil */
  font-family: 'Shadows Into Light'; /* Eine andere Schriftart verwenden */
  color: #999; /* Farbe ändern, um es dezenter zu machen */
  /* margin: 0 5px;                    Abstand um den Text herum */
}
.special-RD {
  /* font-style: italic;               Kursiv für den Stil */
  color: #ffffff; /* Farbe ändern, um es dezenter zu machen */
  font-family: 'Shadows Into Light'; /* Eine andere Schriftart verwenden */
  /* margin: 0 5px;                    Abstand um den Text herum */
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10rem;
  padding: 3rem 0;
  position: relative;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10rem;
  padding: 3rem 0;
  position: relative;
}
.nav-item.dropdown {
  z-index: 2;
  pointer-events: auto;
  margin-top: -60px;
}
.navbar-toggler {
  z-index: 2;
  pointer-events: auto;
}
.fixed-status-message {
  position: fixed;
  top: 12rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  width: 50%;
  /* background-color: #ffc107; */
  /* color: #000; */
  padding: 15px;
  border: 2px solid;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  /* border-radius: 5px; */
}

table.table {
  width: 100%;
  border-collapse: collapse;
}
table.table,
table.table th,
table.table td {
  border: 1px solid #ddd;
}
table.table th,
table.table td {
  padding: 8px;
  text-align: center;
}
table.table th {
  background-color: #f2f2f2;
}

.btn-success,
.btn-danger,
.btn-info,
.btn-primary,
.btn-secondary,
.btn-warning {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}
.btn-square {
  border-radius: 0 !important; /* Keine abgerundeten Ecken */
  /* box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); */
}
.btn-inuse {
  background-color: #dc3545 !important; /* Gelbe Farbe für "In Benutzung" */
  color: #fff !important;
  border: 2px solid #bb2d3b !important;
  border-radius: 0 !important; /* Keine abgerundeten Ecken */
}
.btn-notinuse {
  background-color: #198754 !important; /* Gelbe Farbe für "In Benutzung" */
  color: #fff !important;
  border: 2px solid #157347 !important;
  border-radius: 0 !important; /* Keine abgerundeten Ecken */
}
.btn-table-hash {
  background-color: #6c757d !important; /* Graue Farbe für den Tisch-Hash */
  color: #fff !important;
  border-radius: 0 !important; /* Keine abgerundeten Ecken */
  border: 2px solid #5a6268 !important;
}

.headline {
  color: white;
  background-color: var(--body-bgcolor);
}

/* CSS für den Abstand zwischen Header und Container */
.header-spacing {
  margin-bottom: 120px;
}

.logo {
  max-height: 120px;
  max-width: 13vw;
  width: auto; /* optional, damit das Seitenverhältnis beibehalten wird */
  height: auto; /* optional, damit das Seitenverhältnis beibehalten wird */
}
.logo_position {
  top: 20;
  left: 20;
}

.floating-button_tables {
  top: 20px;
  right: 20px;
}

.floating-button_home {
  bottom: 20px;
  left: 20px;
}

.floating-button_back {
  bottom: 20px;
  right: 20px;
}

.floating-button_ranking {
  bottom: 20px;
  right: 20px;
}

.floating-button_participants {
  bottom: 80px;
  right: 20px;
}

.floating-button_overview {
  bottom: 140px;
  right: 20px;
}

.floating-button_rankedit {
  bottom: 80px;
  left: 20px;
}

.floating-button_home,
.floating-button_back,
.floating-button_ranking,
.floating-button_tables,
.floating-button_participants,
.floating-button_overview,
.floating-button_rankedit {
  position: fixed;
  z-index: 1000;
  padding: 10px 20px;
  font-size: 1.2rem;
  border-radius: 50px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #fff;
  /* background-color: var(--bs-primary); */
  transition: background-color 0.3s ease;
  opacity: 70%;
}

.floating-button_home:hover,
.floating-button_back:hover,
.floating-button_ranking:hover,
.floating-button_tables:hover,
.floating-button_participants:hover,
.floating-button_overview:hover,
.floating-button_rankedit:hover {
  opacity: 100%;
  /* background-color: var(--bs-dark); */
  /* text-decoration: none; */
}

.floating-countdown {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  padding: 10px 20px;
  font-size: 1.2rem;
  border-radius: 50px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #fff;
  /* background-color: var(--bs-primary); */
  transition: background-color 0.3s ease;
}

.table-lost0 {
  background-color: #d4edda;
}
.table-lost1 {
  background-color: #fff3cd;
}
.table-lost2 {
  background-color: #f5c6a5;
}
.table-lost3 {
  background-color: #f8d7da;
}
.locked-ranking {
  color: #d9534f; /* z.B. rot */
  font-weight: bold;
  text-decoration: none;
}
.locked-ranking:hover {
  text-decoration: none;
}