/* Make the .content-div scrollable */
.content-div {
  overflow-y: auto;
  max-height: 90vh;
  padding-bottom: 50px; /* Adjust based on the height you want */
}

/* Prevent scrolling on the tab content */
.tab-content {
  overflow-y: hidden;
  height: 100%;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's on top of all other elements */
  opacity: 0.5;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1.154;
  position: relative;
  background: conic-gradient(
    from 120deg at 50% 64%,
    #0000,
    #e92d30 1deg 120deg,
    #0000 121deg
  );
  animation: l27-0 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
}
.loader:before,
.loader:after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transform-origin: 50% 66%;
  animation: l27-1 1.5s infinite;
}
.loader:after {
  --s: -1;
}
@keyframes l27-0 {
  0%,
  30% {
    transform: rotate(0);
  }
  70% {
    transform: rotate(120deg);
  }
  70.01%,
  100% {
    transform: rotate(360deg);
  }
}
@keyframes l27-1 {
  0% {
    transform: rotate(calc(var(--s, 1) * 120deg)) translate(0);
  }
  30%,
  70% {
    transform: rotate(calc(var(--s, 1) * 120deg))
      translate(calc(var(--s, 1) * -5px), 10px);
  }
  100% {
    transform: rotate(calc(var(--s, 1) * 120deg)) translate(0);
  }
}

.status-badge {
  width: 130px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.5;
}

.bg-purple {
  background-color: #ce93d8;
}

.bg-orange {
  background-color: #ffc067;
}

.bg-green {
  background-color: #37fd12;
}

.no-copy {
  user-select: none;
}

.nav-tabs .nav-link {
  color: grey;
  border: 1px solid rgb(201, 200, 200);
  margin-bottom: -4px;
}

.nav-tabs .nav-link:hover {
  color: #e92d30;
  cursor: pointer;
  border-top: 1px solid rgb(201, 200, 200);
  border-left: 1px solid rgb(201, 200, 200);
  border-right: 1px solid rgb(201, 200, 200);
}

.nav-tabs .nav-link.active {
  color: #e92d30;
  font-weight: bold;
  font-size: large;
}

.content-div {
  height: 90vh;
  overflow-y: auto;
}

.panel {
  padding: 15px;
  background-color: #fff;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow effect */
  margin-top: -2px;
}


.info-btn {
  width: 35px; /* Set a fixed width */
  height: 35px; /* Set a fixed height equal to width */
  margin-left: 15px;
}

#statusTable .badge{
  width: 30px;
  height: 30px;
}

.bordered{
  border-width: 3px !important;
}

.border-bottom{
  border-width: 0px 0px 2px 0px !important;
}

.column-width{
  width: 40px;
  text-align: end !important;
}