@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bs-primary: #ccff00; /* Set the primary color */
}

.container {
  max-width: 80%;
}

/* Media query for mobile devices */
@media (max-width: 767px) {
  .container {
    max-width: 95%;
    padding-bottom: 15%;
  }
}

h1,
h2 {
  font-weight: 700;
}

a {
  color: #000;
}

.btn-primary {
  background-color: var(--bs-primary); /* Custom primary color */
  border-color: var(--bs-primary);
  border: 2px solid #000;
  color: #000;
  font-weight: 700;
}

.btn-primary:hover {
  background-color: #bce02d;
  color: #000;
  border: 2px solid #000;
}

.btn-primary:disabled {
  color: #fff;
  background-color: #757575;
  border-color: #fff;
}

.btn-primary:focus {
  color: #fff;
  background-color: #757575;
}

.btn-secondary {
  background-color: #000;
  color: #fff;
}

.btn-secondary:hover {
  background-color: #2c2c2c;
  color: #fff;
}

.btn-secondary:disabled {
  color: #fff;
  background-color: #757575;
  border-color: #fff;
}

body {
  font-family: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background-color: #f5f5f5;
  padding-top: 0;
}

h5 {
  font-weight: 700;
}

.mode-tile {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  margin: 5px;
  background-color: var(--bs-primary);
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-weight: 700;
  transition: background-color 0.3s;
  font-size: 1.3rem;
  border-style: solid;
  border-width: 2px;
  flex-basis: 100%;
  position: relative;
  z-index: 1;
  text-align: center;
  color: #000;
}

.tile-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -5px; /* Negative margin to compensate for tile margins */
  padding-left: 5%;
  padding-right: 5%;
}

#resultsTable {
  overflow-x: auto;
}

/* Media query for larger screens */
@media (min-width: 768px) {
  .mode-tile {
    flex-basis: calc(
      33.333% - 60px
    ); /* 3 tiles per row with margin for larger screens */
    height: 180px;
  }
}

.mode-tile:hover {
  background-color: #bce02d;
  text-decoration: none;
  border-width: 2px;
  color: #000;
  transform: scale(1.02);
  transition: transform 0.5s ease;
}

.mode-tile:visited {
  border-width: 2px;
  color: #000;
  border-style: inset;
  border-width: 2px;
}

.form-signin {
  width: 100%;
  max-width: 640px;
  padding: 2rem;
  margin: auto;
  border-radius: 10px;
}

.login-container {
  max-width: 680px;
}

.login-wrapper {
  max-width: 680px;
  margin: 0 auto;
}

.login-wrapper .col-md-8 {
  flex: 0 0 100%;
  max-width: 100%;
}

.login-wrapper .offset-md-2 {
  margin-left: 0;
}

.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}

.form-signin .form-control:focus {
  z-index: 2;
}

.form-control {
  margin-bottom: 20px;
}

.form-signin input[type="text"],
.form-signin input[type="password"] {
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
}

/* Make all labels bold */
label {
  font-weight: 700;
}

/* Make form-check-label elements normal font weight */
.form-check-label {
  font-weight: normal;
}

.custom-label {
  text-align: right;
  padding-right: 10px;
}

/* Style for tables */
table {
  max-width: 100%; /* Maximum width of the table */
  width: 100%; /* Table takes the full width of the container */
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse; /* Optional: for styling purposes */
}

/* Style for table cells */
table th,
table td {
  text-align: left; /* Align text to the left, can change as needed */
  padding: 6px; /* Padding inside table cells */
}

/* Optional: Add zebra striping to table rows */
table tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* Optional: Style the table header */
table th {
  background-color: #000;
  color: #fff;
  font-weight: 700;
}

/* Define the content wrapper */
.content-wrapper {
  background-color: #fff; /* Set the background color to white */
  padding: 20px; /* Add some padding to the content wrapper */
  border-radius: 10px; /* Add border-radius for rounded corners */
  padding-bottom: 3%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mt-5,
.my-5 {
  margin-top: 1rem !important;
}

/* Define the inner content */
.content-wrapper .row {
  margin: 0; /* Remove margin to fill the full width of the content wrapper */
}

.btn-primary:focus {
  background-color: var(--bs-primary);
  color: #000;
}

.checkbox-container {
  text-align: center; /* Center align the checkbox */
  padding: 5px 0; /* Add some padding for better spacing */
}

/* Custom checkbox */
input[type="checkbox"] {
  -webkit-appearance: none; /* Remove default appearance */
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 1px solid #000000; /* Black border */
  cursor: pointer;
  width: 20px; /* Width of checkbox */
  height: 20px; /* Height of checkbox */
  vertical-align: middle;
}

/* Style for checked state */
input[type="checkbox"]:checked {
  background-color: #000000; /* Black background */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.00266 11.4136L2.29395 7.70489C1.90343 7.31437 1.90343 6.68121 2.29395 6.29068C2.68448 5.90016 3.31764 5.90016 3.70817 6.29068L6.70711 9.28961L12.2939 3.70282C12.6844 3.3123 13.3176 3.3123 13.7081 3.70282C14.0986 4.09335 14.0986 4.72651 13.7081 5.11704L7.41144 11.4136C7.02091 11.8042 6.38775 11.8042 5.99722 11.4136H6.00266Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Style for disabled checkboxes */
input[type="checkbox"]:disabled {
  border: 1px solid #ccc; /* Light gray border */
  cursor: not-allowed;
  opacity: 0.6;
}

/* Style for disabled and checked state */
input[type="checkbox"]:disabled:checked {
  background-color: #757575; /* Gray background */
  border: 1px solid #ccc;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.00266 11.4136L2.29395 7.70489C1.90343 7.31437 1.90343 6.68121 2.29395 6.29068C2.68448 5.90016 3.31764 5.90016 3.70817 6.29068L6.70711 9.28961L12.2939 3.70282C12.6844 3.3123 13.3176 3.3123 13.7081 3.70282C14.0986 4.09335 14.0986 4.72651 13.7081 5.11704L7.41144 11.4136C7.02091 11.8042 6.38775 11.8042 5.99722 11.4136H6.00266Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Custom switch styles */
.custom-control-label {
  padding-left: 2.5rem;
  font-weight: 600;
  cursor: pointer;
}

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0;
}

.custom-control-label::before {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 3rem;
  height: 1.5rem;
  pointer-events: all;
  content: "";
  background-color: #dee2e6;
  border: 1px solid #adb5bd;
  border-radius: 0.75rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.custom-control-label::after {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  content: "";
  background-color: #fff;
  border: 1px solid #adb5bd;
  border-radius: 0.75rem;
  transition: transform 0.15s ease-in-out;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #000;
  border-color: #000;
}

.custom-control-input:checked ~ .custom-control-label::after {
  background-color: #ccff00;
  border-color: #000;
  transform: translateX(1.5rem);
}

.header {
  width: 100%;
  height: 80px; /* Height of header */
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 2%;
  position: relative; /* Needed for absolute positioning of video */
}

.header img {
  height: 55px;
  width: auto;
  margin-left: 10%;
  margin-top: 2px;
  position: relative; /* Ensure it's above the video */
  z-index: 1;
}

.header-video {
  width: 100%;
  height: 80px; /* Fixed height of 100px */
  position: absolute;
  top: 0; /* Align to the top of the header */
  left: 0;
  object-fit: cover; /* Cover the container, may cut off part of the video */
  z-index: -1;
}

.alert-info {
  width: 90%;
}

/* Hide the 'Browse' label on the custom file input */
.custom-file-label::after {
  content: none;
  width: 100%;
}

.mode-tile::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none; /* This makes sure the pseudo-element does not capture mouse events */
}

/* Confetti */

@keyframes confetti-slow {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
  }
}
@keyframes confetti-medium {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
  }
}
@keyframes confetti-fast {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
  }
}
.confetti-container {
  perspective: 700px;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.confetti {
  position: absolute;
  z-index: 1;
  top: -10px;
  border-radius: 0;
}
.confetti--animation-slow {
  animation: confetti-slow 2.25s linear 1 forwards;
}
.confetti--animation-medium {
  animation: confetti-medium 1.75s linear 1 forwards;
}
.confetti--animation-fast {
  animation: confetti-fast 1.25s linear 1 forwards;
}

/* Raindrops */

@keyframes raindrop-slow {
  0% {
    transform: translateY(0) scaleY(1);
  }
  100% {
    transform: translateY(105vh) scaleY(3);
  }
}
@keyframes raindrop-medium {
  0% {
    transform: translateY(0) scaleY(1);
  }
  100% {
    transform: translateY(105vh) scaleY(3);
  }
}
@keyframes raindrop-fast {
  0% {
    transform: translateY(0) scaleY(1);
  }
  100% {
    transform: translateY(105vh) scaleY(3);
  }
}
.raindrop-container {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.raindrop {
  position: absolute;
  z-index: 1;
  top: -10px;
  border-radius: 50%;
  opacity: 0.7; /* Gives a more water-like appearance */
}
.raindrop--animation-slow {
  animation: raindrop-slow 2.25s linear 1 forwards;
}
.raindrop--animation-medium {
  animation: raindrop-medium 1.75s linear 1 forwards;
}
.raindrop--animation-fast {
  animation: raindrop-fast 1.25s linear 1 forwards;
}

.iframe-error {
  width: 100%;
  height: 300px; /* same as the iframe height */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-style: italic;
}

/* Apply the background images */
.mode-tile[href="/adressvorbereitung"]::before {
  background-image: url("../images/adressvorbereitung.webp");
  mix-blend-mode: luminosity;
  opacity: 0.15;
}

.mode-tile[href="/send_mails_input"]::before {
  background-image: url("../images/email.webp");
  mix-blend-mode:luminosity;
  opacity: 0.15;
}

.mode-tile[href="/holder_change_input"]::before {
  background-image: url("../images/halterwechsel.webp");
  mix-blend-mode:luminosity;
  opacity: 0.15;
}

.mode-tile[href*="chili"]::before {
  background-image: url("../images/anschreiben.webp");
  mix-blend-mode:luminosity;
  opacity: 0.15;
}

.mode-tile[href="https://relatial.atlassian.net/jira/software/projects/KDM/boards/10"]::before {
  background-image: url("../images/jira.webp");
  mix-blend-mode:luminosity;
  opacity: 0.15;
}

.mode-tile[href="/database_search_input"]::before {
  background-image: url("../images/archivsuche.webp");
  mix-blend-mode:luminosity;
  opacity: 0.15;
}

.mode-tile[href="/fin_list_input"]::before {
  background-image: url("../images/fin.webp");
  mix-blend-mode:luminosity;
  opacity: 0.15;
}

.mode-tile[href="/reporting"]::before {
  background-image: url("../images/reporting.webp");
  mix-blend-mode:luminosity;
  opacity: 0.15;
}

.mode-tile[href="/administration"]::before {
  background-image: url("../images/administration.webp");
  mix-blend-mode:luminosity;
  opacity: 0.15;
}

/* Style for greyed out radio buttons */
.form-check-input.greyed-out {
  opacity: 0.6;
}

/* Style for greyed out radio button labels */
.form-check-label.greyed-out {
  opacity: 0.6;
  background-color: #e9ecef;
  padding: 6px 12px;
  border-radius: 4px;
}