body {
  margin: 0;
  padding: 0;
  font-family: "Avenir LT Std", sans-serif;
  display: flex;
  flex-direction: column;
  color: #fff; /* White text color for better readability */
  min-height: 100vh; /* Ensure the layout fills the screen height */
  background: #000; /* Set a default black background */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: contain; /* Center and contain the background image */
  position: relative;
  background-image: url('images/bg.jpg'); /* Replace 'your-image-url.jpg' with the actual image URL */
  background-position: center center; /* Change 80px to the actual height */
}

/* Hides Filter on Startpage by default */
#filterSection {
  display: none;
}

/* Style the header container */
.header {
  position: relative;
  height: 200px; /* Set your desired fixed height for the header */
  overflow: hidden; /* Hide overflow content */
}

/* Style the header image */
.header img {
  width: 100%;
  height: 100%; /* Ensure the image fills the entire header */
  object-fit: cover; /* Maintain aspect ratio and cover the container */
  display: block;
}

/* Style the header text */
.header-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px; /* Adjust font size as needed */
  z-index: 1; /* Ensure text appears above the background */
}

/* Create a background gradient behind the image */
.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(139, 0, 0, 0.1), #000); /* Red to black gradient */
  opacity: 1; /* Adjust opacity as needed */
  z-index: 0; /* Place it behind the text and image */
}

/* Style the container */
.container-own {
  display: flex;
  flex-grow: 1;
}

/* Sidebar styles with a dark, blood-red background and a background image */
.sidebar {
  width: 40px;
  background-size: cover; /* Ensure the background image covers the sidebar */
  transition: width 0.1s ease-in-out;
}

/* Style the sidebar links container */
.sidebar a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
  white-space: nowrap;
}

/* Style the icon */
.icon {
  width: 20px; /* Adjust as needed */
  height: 20px; /* Adjust as needed */
  margin-right: 10px;
  display: inline-block; /* Hide the icon by default */
}

/* Style the text */
.text {
  display: none;
}

.sidebar:hover .text {
  display: block; /* Hide the text on hover */
}

/* Hover styles for links */
.sidebar a:hover {
  background-color: #6b0000; /* Darker red background on hover */
}

/* Style the main content area with a dark, eerie background */
.content {
  width: 100%; /* Set the width of the content area */
  margin-bottom: 30px; /* Ensure space for the footer */
  margin-top: 20px;
  padding: 20px;
  background-color: rgba(26, 26, 26, 0.5);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted box shadow for a softer look */
  overflow: hidden;
}

.sidebar:hover {
  width: 10%;
}

.card-cont-head {
  justify-content: space-between;
  max-width: 850px;
  margin: 0 auto;
  padding: 8px;
}

.card-cont-subtext,
.card-cont {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px;
}

.card-cont-flex {
  max-width: 450px;
  margin: 0 auto;
}

.image-text-container {
  flex: 1;
  background-color: rgba(26, 26, 26, 0.5); /* Semi-transparent dark gray background */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted box shadow for a softer look */
  overflow: hidden;
  position: relative;
  margin: 0 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Center items horizontally */
  border: 1px solid #ddd; /* White border */
  font-family: "Avenir LT Std"
  font-style: italic;
  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
  background-clip: text;
}

.image-text-container a {
  text-decoration: none;
  color: inherit;
  position: relative;
}

.image-text-content {
  text-align: center;
}

/* Style for images inside the containers */
.image-text-container img {
  /* max-width: 100%;
  height: auto; */
  width: 140px;
  height: 140px;
  display: block;
  margin: 0 auto;
  margin-top: 25px;
  border-radius: 5px 5px 0 0; /* Round only the top corners of the image */
}

/* Additional styles for title and bold info */
.image-text-content h3 {
  margin: 10px 0;
}

.image-text-content p strong {
  font-weight: bold;
}

.additionalinfo img {
  /* max-width: 100%;
  height: auto; */
  width: 32px;
  height: 32px;
  display: block;
  margin: 0 auto;
  margin-top: 25px;
  border-radius: 5px 5px 0 0; /* Round only the top corners of the image */
}

.additionalinfo {
  font-family: "Avenir LT Std", sans-serif;
  font-style: italic;
  bottom: 10px;
  position: relative;
  font-size: 12px;
}

/* Style for the back button container */
.nav-button-container,
.back-button-container {
  /* width: 100%; */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Style for the nav button */
.nav-button,
.back-button {
  margin-right: 15px;
  background-color: #8b0000; /* Dark red button color (matches the top bar) */
  color: #fff; /* Text color */
  padding: 10px 20px; /* Padding for the button */
  border: none;
  border-radius: 5px; /* Rounded button corners */
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s; /* Smooth color transition on hover */
}

.mini-button{
  margin-top: 8px;
  background-color: #1e1c1c; /* Dark red button color (matches the top bar) */
  color: #fff; /* Text color */
  padding: 4px 8px; /* Padding for the button */
  border: none;
  border-radius: 100px; /* Rounded button corners */
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s; /* Smooth color transition on hover */
}


.nav-button:hover,
.back-button:hover {
  background-color: #6b0000; /* Darker red on hover */
}

.mini-button:hover {
  background-color: #0a0a0a; /* Darker red on hover */
}

/* Style for the footer */
.footer {
  background: linear-gradient(to bottom, #000, #8b0000); /* Gradient background from black to dark red */
  color: #fff;
  padding: 10px; /* Reduced padding */
  text-align: center;
  font-size: 14px; /* Reduced font size */
}

.footer a {
  color: #fff;
  text-decoration: none;
  margin: 0 5px; /* Adjust spacing between links */
  transition: color 0.3s;
}

.footer a:hover {
  color: #ff5252; /* Brighter red link color on hover */
}

/* Add your custom styles below this line */

/* Top navigation styles */
.top-navigation {
    background-color: #8b0000; /* Dark red background color */
    color: #fff; /* Text color */
    padding: 10px 0;
}

.top-navigation .navbar {
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.top-navigation li {
    margin-right: 20px; /* Adjust spacing between navigation items */
}

.top-navigation a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: color 0.3s;
}

.top-navigation a:hover {
    color: #ff5252; /* Brighter red on hover */
}

/* Dropdown menu styles */
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #8b0000;
    min-width: 160px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
    padding: 0; /* Ensure no padding around the dropdown menu */
    margin: 0; /* Ensure no margin around the dropdown menu */
    border: none; /* Remove any borders */
}

.dropdown-menu li {
    list-style-type: none;
}

.dropdown-menu li a {
    padding: 10px 16px;
    display: block;
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    background-color: #6b0000;
}

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

/* Container styles with fixed width and centered content */
.container-fixed {
    min-width: 1300px;
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px;
    background: rgba(0, 0, 0, 0.5);Dark and semi-transparent background */
    display: flex;
    flex-direction: column;
}

/* Footer styles */
footer {
    background: linear-gradient(to bottom, #000, #8b0000); /* Gradient background from black to dark red */
    color: #fff;
    padding: 10px; /* Reduced padding */
    text-align: center;
    font-size: 14px; /* Reduced font size */
    margin-top: auto;
}

footer a {
    color: #fff;
    text-decoration: none;
    margin: 0 5px; /* Adjust spacing between links */
    transition: color 0.3s;
}

footer a:hover {
    color: #ff5252; /* Brighter red link color on hover */
}

.card {
    background: linear-gradient(to top, #121212, #000);
    color: inherit;
}

/* Add a new player section with a dark, blood-red background */
.player-card {
  max-width: 45%;
  overflow-x: auto;
  border: 1px solid #333; /* Dark border */
  border-radius: 8px;
  margin: 10px auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Box shadow for depth */
  font-family: 'Helvetica Neue', sans-serif; /* Modern font */
  margin-top: 30px;
}

.player-card-login {
  max-width: 99%;
  overflow-x: auto;
  border: 1px solid #333; /* Dark border */
  border-radius: 8px;
  margin: 10px auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Box shadow for depth */
  font-family: 'Helvetica Neue', sans-serif; /* Modern font */
  margin-top: 30px;
}

.player-card-header {
    background-color: #8b0000; /* Dark red header background */
    color: #fff;
    padding: 10px 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.player-card-header h4 {
    margin: 0;
}

.player-card-body {
    padding: 20px;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    text-align: left;
}

.btn-primary {
    background-color: #8b0000; /* Dark red button color */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 15px;
    width: 100%;
}

.btn-primary:hover {
    background-color: #6b0000; /* Darker red on hover */
} */

.btn-login {
    background-color: #8b0000; /* Dark red button color */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 15px;
    margin-right: 20px;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    max-width: 80%;
}

.btn-login:hover {
    background-color: #6b0000; /* Darker red on hover */
}

/* Styles for the custom cards */
.custom-card {
  background-color: #f7f7f7;
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

/* Styles for the data lists */
.data-list {
  list-style-type: none;
  padding: 0;
}

.data-list li {
  font-size: 16px;
  margin-bottom: 8px;
}

/* Styles for the subtext section */
.card-cont-subtext {
  margin-top: 20px;
  font-size: 16px;
}

.card-cont-subtext h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
/* Additional styles for the data sections */
.card-cont {
  display: flex;
  flex-wrap: wrap; /* Allow cards to wrap to the next line on smaller screens */
  justify-content: space-between;
}

.card-cont > div {
  flex-basis: calc(33.33% - 10px); /* Adjust the width of each data section */
  /* background-color: rgba(26, 26, 26, 0.8);  Semi-transparent dark gray background
  background-color: rgba(169, 169, 169, 0.9);*/
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted box shadow for a softer look */
  overflow: hidden;
  position: relative;
  margin: 0 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center items horizontally */
  border: 1px solid #ddd; /* White border */
  padding: 15px; /* Increased padding for better readability */
}

/* Additional styles for title and data within the data sections */
.card-cont h3 {
  margin: 10px 0;
  font-size: 18px; /* Increase font size for titles */
}

.card-cont p {
  font-size: 16px; /* Increase font size for data */
}

/* Definieren Sie hier Ihren CSS-Code für das Design des Elements */
.dashboard_stats {
  width: 100%;
  height: 200px; /* Verringern Sie die Höhe auf 30px */
  background-color: rgba(26, 26, 26, 0.5);
  /*background-color: rgba(169, 169, 169, 0.9);*/
  position: relative;
}

.dasboard_line {
  /* width: 0.3%;
  height: 70%; */
  width: 7px;
  height: 110px;
  margin-top: 45px;
  position: absolute;
}

.dashboard_label {
  font-size: 22px;
  font-family: "Avenir LT Std", sans-serif;
  color: lightgray;
  position: absolute;
  margin-left: 25px;
  bottom: 8px;
  white-space: nowrap;
  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
  background-clip: text;
}

.dashboard_label a {
  text-decoration: none;
  color: inherit;
  position: relative;
}

.dashboard_label a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130%; /* Adjust the size as needed */
  height: 130%; /* Adjust the size as needed */
  background: rgba(255, 255, 255, 0.3); /* Adjust the color and opacity as needed */
  border-radius: 50%;
  filter: blur(5px); /* Adjust the blur radius as needed */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Adjust the shadow properties as needed */
  opacity: 0;
  transition: opacity 0.3s;
}

.dashboard_label a:hover::before {
  opacity: 0.7; /* Adjust the opacity as needed */
}


.dashboard_number {
  font-size: 38px;
  font-family: "Avenir LT Std", sans-serif;
  font-weight: bold;
  margin-left: 25px;
  margin-top: 10px;
  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
  background-clip: text;
}

.dashboard_sub {
  font-size: 12px;
  font-family: "Avenir LT Std", sans-serif;
  font-style: italic;
  margin-left: 30px;
  bottom: 14px;
  position: relative;
  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
  background-clip: text;
}

.dash_total_games {
  background-color: #790f1a;
}

.dash_tracked_players {
  background-color: #186629;
}

.dash_total_escapes {
  background-color: #2a3564;
}

.dash_total_kills {
  background-color: #6a1060;
}

.dash_total_hatchesc {
  background-color: #685f1e;
}

.dash_total_dc {
  background-color: #e5551e;
}

.dashboard-table {
  width: 100%;
  background-color: rgba(26, 26, 26, 0.5);
}

.dashboard-table th, .dashboard-table td {
  padding: 15px;
  text-align: center;
}

.dashboard-table th {
  font-size: 18px;
  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
  background-color: #8b0000;
}

.dashboard-table-canvas {
  width: 100%;
  background-color: rgba(26, 26, 26, 0.5);
}

.data-list {
  list-style: none;
  padding: 0;
}

.data-list li {
  font-size: 16px;
  color: white;
  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
  background-clip: text;
  margin: 5px 0;
}

.data-list li:first-child {
  margin-top: 0;
}

.data-list li:last-child {
  margin-bottom: 0;
}

.custom-link {
  text-decoration: none;
  color: white;
  cursor: pointer;
}

.custom-link:hover {
  color: #0056b3;
}

.survivors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 10px; /* Spacing between grid items */
}

.survivor {
  padding: 10px;
}

.survivor strong {
  display: block;
}

.delete-button {
  background-color: #000; /* Black color */
  color: #fff; /* Text color */
  border: none; /* Remove borders */
  padding: 10px 20px; /* Adjust padding as needed */
  cursor: pointer; /* Change cursor to a pointer on hover for better usability */
}

.submit {
background-color: #4CAF50; /* Green color */
color: #fff; /* Text color */
border: none; /* Remove borders */
padding: 10px 20px; /* Adjust padding as needed */
cursor: pointer; /* Change cursor to a pointer on hover for better usability */
}

.section-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Adjust as needed */
}

.section {
  background-color: rgba(26, 26, 26, 0.5); /* Semi-transparent dark gray background */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Box shadow for a softer look */
  margin-bottom: 30px;
  padding: 20px; /* Adjust padding as needed */
  flex: 1; /* Allow sections to grow equally in the flex container */
  max-width: calc(50% - 20px); /* Two sections in a row, adjust as needed */
}

/* Media query to stack sections in a single column on small screens */
@media (max-width: 767px) {
  .section {
    max-width: 100%; /* Full width on small screens */
    min-width: 100%; /* Full width on small screens */
  }
  .section-pair {
    flex-direction: column; /* Stack sections in a single column on small screens */
  }
}

/* Style for section titles */
.section h2 {
  font-size: 24px; /* Increase font size for section titles */
  color: #fff; /* Text color */
  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
  background-clip: text;
}

/* Style for list items within the sections */
.section .list-group-own-item {
  font-size: 16px; /* Adjust font size for list items */
  color: #fff; /* Text color */
  margin: 3px 0; /* Adjust spacing between list items */
  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
  background-clip: text;
}

/* Hide canvas elements by default */
canvas {
  display: none;
  width: 400px;
  height: 200px;
}

/* Add this CSS to your stylesheet */
.toggle-container {
  display: flex;
  align-items: center;
  margin-bottom: 5px;

}

.toggleLabel {
  margin-left: 10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px; /* Make the slider thinner */
  height: 20px; /* Adjust the height as needed */
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 20px; /* Adjust the border-radius to match the height */
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px; /* Make the slider button smaller */
  width: 16px; /* Make the slider button smaller */
  left: 2px; /* Adjust the position of the slider button */
  bottom: 2px; /* Adjust the position of the slider button */
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #4CAF50;
}

input:focus + .slider {
  box-shadow: 0 0 1px #4CAF50;
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 20px; /* Adjust the border-radius to match the height */
}

.slider.round:before {
  border-radius: 50%;
}

.custom-head {
  font-size: 32px;
  display: flex;
}

.perks-details{
  display: flex;
  flex-wrap: wrap;
}

.perks-item {
  width: calc(50% - 10px);
  box-sizing: border-box;
  margin-right: 10px;
  margin-bottom: 10px;
}

.perks-details img{
  width: 75px;
  height: 75px;
}

summary {
  display: flex;
}

/* Loading screen styles */
#loading-screen {
    position: fixed;
    border-radius: 5px;
    top: 50%;
    left: 25%;
    width: 50%; /* Width of the loading bar */
    height: 25px; /* Height of the loading bar */
    background-color: #ddd; /* Background color of the loading bar */
    z-index: 9999;
}

/* Loading bar styles */
#loading-bar {
    height: 100%;
    border-radius: 5px;
    background-color: #6b0000; /* Color of the loading bar */
    width: 0; /* Initial width of the loading bar */
    animation: progress 2s ease-out infinite alternate; /* Animation for the loading bar */
}

/* Keyframes for loading bar animation */
@keyframes progress {
    0% { width: 0; }
    100% { width: 100%; }
}