:root {
  --primary: #000548;
  --secondary: #EB003C;
  --light: #bebdbd;
  --white: #FFFFFF;
  --blueGray: #5d667d;
  --navbarGray: #00054891;
}


body, html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
main {
    flex: 1;
}

.custom-navbar {
  background-color: var(--primary) !important;
  border-bottom: 3px solid var(--secondary);
  padding: 1rem;
}

.custom-navbar .navbar-brand,
.custom-navbar .nav-link {
  color: var(--white) !important;
}

/*#currentContent{
  overflow-y: auto;
  max-height: 85vh;
}*/

.hidden {
  display: none;
}


.custom-navbar .nav-link:hover {
  color: var(--secondary) !important;
}


.btnSecond:hover {
  color: var(--white) !important;
  background-color: var(--primary) !important;
}
/*.certInfoContainer {
  max-height: 80vh !important;
  overflow-y: auto;
  margin: 0 auto; 
}*/
.custom-container {
  border: 1px solid var(--light);
  background-color: var(--white);
  color: black;
  padding: 1rem;             
  border-radius: 10px;       
  box-shadow: 0 .1rem 1rem var(--light); 
  margin-bottom: 30px;
  text-align: center;
}


.custom-containerWithOutCenter {
  border: 1px solid var(--light);
  padding: 1rem;             
  border-radius: 10px;       
  box-shadow: 0 .1rem 1rem var(--light); 
  margin-bottom: 30px;
}
.card-deck {
  display: flex;
  flex-wrap: wrap;
}

.cardWithOutHover {
  flex: 1 1 30%; /* Each card will take up 30% of the container's width */
  box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
  display: flex;
  flex-direction: column;
}

.card {
  flex: 1 1 30%; /* Each card will take up 30% of the container's width */
  box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
  display: flex;
  flex-direction: column;
}


.card:hover {
  background-color: var(--blueGray) !important;
  cursor: pointer;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  color: var(--white) !important;

}
.no-gap {
  margin: 0 !important;
  padding: 0 !important;
  flex-grow: 1;
}

.btnBorderRadius {
  border-radius: 10px 10px 0 0 !important; /* Oben links, oben rechts, unten rechts, unten links */
}

.btnToClick {
  color: var(--white) !important;
  background-color: var(--primary) !important;
  padding: 1rem;
  border: 1px solid var(--primary);
  border-radius: 10px;
  cursor: pointer; /* Standard-Cursor */
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
  margin-bottom: 30px;
  text-align: center;
}

.btnToClick:hover {
  color: var(--white) !important;
  background-color: var(--secondary) !important;
  cursor: pointer; /* Pfeil-Cursor */
  border: 1px solid var(--secondary);
}

.custom-content-bg {
  /*background: linear-gradient(180deg, var(--primary), var(--secondary));*/
  background: linear-gradient(180deg, var(--blueGray), var(--light));
  padding: 1rem;
  border-radius: 10px;
  color: var(--white);
  box-shadow: 0 .1rem .5rem rgba(0, 0, 0, 0.1);

}
.btn-primary{
  color: var(--white) !important;
  background-color: var(--primary) !important;
  padding: 0.25rem 0.75rem;
  border-radius: 10px;
  cursor: pointer; /* Standard-Cursor */
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}


.btn-primary:hover {
  color: var(--white) !important;
  background-color: var(--secondary) !important;
  cursor: pointer; /* Pfeil-Cursor */
}


h2 {
  font-weight: bold;
}

/* Optional: Rote Farbe für den Button */
.btn-red {
  background-color: red !important;
  border-color: darkred;
}

.nav-link.taken {
  font-weight: bold !important;
  color: var(--secondary) !important;
}


.profilAnschauen:hover{
  color: var(--secondary) !important;
  cursor: pointer; /* Pfeil-Cursor */
}

.btn-success{
  color: var(--white) !important;
  background-color: rgb(4, 211, 4) !important;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer; /* Standard-Cursor */
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;

}


.btn-danger{
  color: var(--white) !important;
  background-color: var(--secondary) !important;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer; /* Standard-Cursor */
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;

}


.box {
  border: 2px dashed var(--primary, #000548);
  padding: 20px;
  min-height: 100px;
  text-align: center;
  
}


.draggable {
  padding: 10px;
  margin-bottom: 10px;
  background-color: var(--light, #EB003C);
  color: var(--white, #FFFFFF);
  cursor: grab;
  border-radius: 5px;
}

.draggable:active {
  cursor: grabbing;
}


i:hover {
  cursor: pointer;
  transition: 0.5s;
  color: var(--secondary);
}

div#successMessage{
  background-color: var(--primary);
  color: var(--secondary);
  font-size: large;
  text-align: center;
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 30px;
  vertical-align: middle;

}
.modal.fade.modal-right .modal-dialog {
  transform: translate(125%, 0px);
  right: 0;
  padding: 1rem;
  position: absolute;
  width: 40%;
  height: 100%;
}

.modal.fade.profileModal .modal-dialog {
  width: 100%;
  height: 100%;
  right: 0;
  padding: 1rem;
  position: absolute;
  transform: translate(0, 0);
}

.modal.show.modal-right .modal-dialog {
  transform: none;
}
.tile {
  cursor: pointer;
  padding: 12px 20px;
  border-radius: 8px;
  background: #f8f9fa;
  border: 2px solid #bbb;
  color: #333;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.tile-selected {
  background: #d1e7dd;
  border: 2px solid #0f5132;
  color: #0f5132;
  font-weight: 500;
}
.custom-gray-container {
  /* background: linear-gradient(180deg, var(--secondary), var(--primary)); */
  background: linear-gradient(180deg, var(--blueGray), var(--light));
  border-radius: 0.5rem;     /* Abgerundete Ecken */
  padding: 1rem;            /* Etwas Innenabstand */
  color: white;
}

.custom-yellow-container {
  background: linear-gradient(180deg, #ffecb3, #ffe082);
  border-radius: 0.5rem;     /* Abgerundete Ecken */
  padding: 1rem;            /* Etwas Innenabstand */
  color: black;
}

.custom-red-container {
  background: linear-gradient(180deg, #ff8a80, #ff5252);
  border-radius: 0.5rem;     /* Abgerundete Ecken */
  padding: 1rem;            /* Etwas Innenabstand */
  color: white;
}

.custom-green-container {
  background: linear-gradient(180deg, #a5d6a7, #81c784);
  border-radius: 0.5rem;     /* Abgerundete Ecken */
  padding: 1rem;            /* Etwas Innenabstand */
  color: white;
}

.custom-header-container {
  border-radius: 0.5rem;     /* Abgerundete Ecken */
  padding: 1rem;            /* Etwas Innenabstand */
  color: rgb(255, 255, 255);
  background: var(--blueGray);
  box-shadow: .1rem .1rem .1rem var(--blueGray); 
  border: 1px solid var(--blueGray) !important;

}

td.clickable:hover, th.clickable:hover,tr.clickable:hover {
  background-color: var(--light) !important;
  cursor: pointer;
}

.card-header {
  text-align: start !important;
  background-color: transparent !important;
  border: 0 !important;
  margin-top: 0 !important;
  margin-inline-end: 1.25rem !important; /* Equivalent to .me-5 */
}

label{
  font-weight: bold;
}


.modal-dialog.modal-custom-width {
  max-width: 80%; /* Ändert die Breite des Modals auf 80% des Viewports */
}


.modal-dialog.modal-normal-width {
  max-width: 70%; /* Ändert die Breite des Modals auf 80% des Viewports */
}


.highlighted-checkbox {
  padding: 10px;
  color: var(--primary);
  font-weight: bold;
  font-size: 15px;
}
.highlighted-checkbox .form-check-input {
  transform: scale(1.5); /* Vergrößert die Checkbox */
}

.highlighted-checkbox .form-check-label {
  font-weight: bold; /* Fettere Schrift für mehr Sichtbarkeit */
  color: var(--primary); /* Blau passend zum Rahmen */
  font-size: 17px;
}

.form-control-dropdown {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23333" d="M2 5L0 3h4z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
  padding-right: 2.5rem; /* Adjust padding to make room for the dropdown icon */
  appearance: none; /* Remove default dropdown arrow in some browsers */
}
.certificate-header img {
  width: 150px;
  display: block;
  margin: 0 auto;
}
.certificate-title {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  margin-top: 15px;
}
.certificate-content {
  text-align: center;
}
.certificate-name {
  font-weight: bold;
  font-size: 22px;
  margin-top: 15px;
}
.certificate-footer {
  text-align: center;
  font-size: 14px;
}


@keyframes rotate-animation-reverse {
  0% {
      transform: rotate(180deg);
  }
  100% {
      transform: rotate(0deg);
  }
}


@keyframes rotate-animation {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(180deg);
  }
}

.rotate {
  animation: rotate-animation 0.5s ease-in-out forwards;
}



.row.g-4.d-flex.justify-content-start.mapCards
{
  max-height: 600px; /* Maximale Höhe */
  overflow-y: auto;  /* Vertikales Scrollen aktivieren, falls nötig */
}