html {
    position: relative;
    min-height: 100%;
  }
body {
    margin-bottom: 4rem; /* Height of the footer */
      padding-top: 4rem; /* Size of navbar */
  }
.navbar {
  z-index: 10001;
}
.navbar-nav .nav-link.active{
  color: var(--bs-link-color);
  font-weight:bold;
}
.navbar .navbar-nav .logout .nav-link,
.navbar .navbar-nav .admin .nav-link {
  padding-top: 0;
  padding-bottom: 0;
}
.navbar .navbar-nav .logout .nav-link i,
.navbar .navbar-nav .admin .nav-link i {
  font-size: 1.5em;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3rem;
  }

.copy {
  cursor: copy!important;
}
.copy::after {
  content: "\F3C2"; /* Unicode value for the "bi-files" icon */
  font-family: "bootstrap-icons";
  margin-left: 0.5rem;
}
.form-floating .copy{
  position: absolute; /* Use absolute positioning */
  top: 0; /* Align the span to the top */
  right: 0; /* Align the span to the right */
  padding: 0.375rem 0.9rem 0 0;
}
/* .form-floating.copy::after{
  margin-left: -1rem;
  bottom:0;
} */
.copy-info {
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  color: #333;
}

.list-group-item-action .subtext, 
.list-group-item-action .login {
  padding-left:42px;
}

.form-floating .form-select ~ label{
    font-size: 1rem;
    transform: none;
    opacity: 1; 
}

.form-floating .form-control:focus ~ label,
.form-floating .form-control:not(:placeholder-shown) ~ label, 
.form-floating .form-select:focus ~ label,
.form-floating .form-select:has(option:checked:not(:empty)) ~ label{
  font-size: 0.8rem;
  transform: translateY(-1.2rem);
  opacity: 0.7;
}

.form-control:placeholder-shown + label,
.form-select:has(option:checked:empty) + label,
input[type=date].form-control:not(.has-value) + label
{
  color: var(--bs-gray); /* set text color if no value in field */
}
.form-control.required:placeholder-shown,
.form-check-input.required,
.form-select:has(option:checked:empty).required,
input[type=date].form-control.required:not(.has-value) {
    background-color: #FCE4D6; /* Set background color for required fields */
}
.form-control.optional:placeholder-shown,
.form-check-input.optional,
.form-select:has(option:checked:empty).optional,
input[type=date].form-control.optional:not(.has-value) {
    background-color: #FFF2CC; /* Set background color for optional fields */
}
.form-control.green:placeholder-shown,
.form-check-input.green,
.form-select:has(option:checked:empty).green,
input[type=date].form-control.green:not(.has-value) {
    background-color: #ccffcc; /* Set background color for green fields */
}
.form-control,.form-control label,
.form-select,.form-select label,
input[type=date].form-control.has-value{
    background-color: var(--bs-tertiary-bg); /* Set background color when field has content */
    color: var(--bs-body-color);
}
.form-check-input:checked {
    background-color: #0d6efd;
}

textarea.form-control{
  min-height: 200px;
  /* height:auto !important; */
}
.form-switch.form-switch-md {
    padding-left: 4.5em;
    height: 2.5em;
}

.form-switch.form-switch-md .form-check-input {
    margin-left: -4.5em;
    height: 2em;
    width: 4em;
}

.form-switch.form-switch-md .form-check-label {
    padding-top: 0.5em;
}

#managementField {
  max-width: 250px;
}
.circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f7f7f7; /* Set default color to grey */
  }
  
.circle .percentage {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
.circle .value {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #F3F3F3;
  }
  
.circle-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #2b2b2b;
}

.circle-small .percentage, .circle-small .percentage-deactivated{
    position: relative;
    width: 100%;
    height: 100%;
  }
  
.circle-small .value {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    font-weight: bold;
    text-align: center;
    color: #2b2b2b;
  }

  .status {
    max-width:100px;
    max-height:100px;
  }
  .bd-navbar .bi {
    width: 1em;
    height: 1em;
}
.border-dotted {
  border-style: dotted !important
}
.my-tooltip .tooltip-inner > *:not(:last-child) {
  margin-bottom: 1rem!important;
}

#accordionAusgeblendet,  #accordionErledigte {
  padding-left: 0;
  padding-right:0;
}
.select-tooltip .tooltip-inner{
  max-width: 20vw !important; 
}
.card-raised{
  border:none;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
.rounded.gps {
  border: 1px solid #dee2e6 ;
  overflow:hidden;
  background-color:white;
}
.table td.fit, 
.table th.fit {
    white-space: nowrap;
    width: 1%;
}
.icon-circle {
  height: 3rem;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.icon-circle i {
  font-size: 24px;
}
.infotext {
  font-size: 0.9rem;
}

#mandantVerbindungen .form-check-input {
  margin-left: 0;
}
#mandantVerbindungen .form-check-label {
  padding-left: 0.5rem;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

#successMessage.show, #fadingMessage.show {
  position: fixed;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fadeOut 2s linear 0.3s forwards;
  z-index: 999999;
}

#impulse-mandant-list input[type="checkbox"] {
  transform: scale(1.5); /* Increase the size by adjusting the scale value */
}

#suggestionsList {
  display: none; /* Initially hide the suggestions list */
  position: absolute;
  top: 100%; /* Position it below the input field */
  /* left: 0;
  width: 100%; */
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  padding: 10px;
  list-style: none;
  z-index: 100;
}
#suggestionsList .suggestion {
  cursor: pointer;
  padding: 2px 5px;
  margin: 1px 0;
  border-radius: 3px;
}
#suggestionsList .suggestion:hover{
  background-color: var(--bs-link-color);
  color: var(--bs-light);
}