:root {
  --color-background:#eaeff3;
}


body {
  background: var(--color-background);
  font-family: Helvetica, sans-serif;
}

main{
  padding-top: 75px;
}

.button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
#buttonContainerTable {
  display: flex;
  justify-content: space-between; /* Align button to the right */
  padding: 10px 0; /* Add some padding at the top and bottom if needed */
}


.open-form-btn {
  display: inline-block;
  padding: 10px 50px;
  color: white;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 5px;    
}

.logo {
  position: relative;
  right: 20px;
}

.logo img {
    display: block; /* This ensures there are no extra spaces around the image */
    width: 300px;   /* Set this to the width of your logo */
    height: 300px;  /* Set this to the height of your logo */
}

.red-box-title {
  color: white; /* Choose color that contrasts well with red */
  margin: 0; /* Adjust or remove margin as needed */
  padding: 0 40px;
  position: absolute;
  top: 50%;
  right: 50%; /* Provides padding inside the red box */
  /* Additional styling as needed */
}

.tagify {
  display: inline-block;
  position: static;
  transform: none ;
  width: 100%;
}

/* HTML: <div class="loader"></div> -----------------------*/
.loader {
  width: 108px;
  height: 60px;
  color: #269af2;
  --c: radial-gradient(farthest-side,currentColor 96%,#0000);
  background: 
    var(--c) 100% 100% /30% 60%,
    var(--c) 70%  0    /50% 100%,
    var(--c) 0    100% /36% 68%,
    var(--c) 27%  18%  /26% 40%,
    linear-gradient(currentColor 0 0) bottom/67% 58%;
  background-repeat: no-repeat;
  position: relative;
}
.loader:after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.4;
  animation: l7 1s infinite;
}
@keyframes l7 {
  to {transform:scale(1.8);opacity:0}
}

#loader {
  display: none; /* Hidden by default */
  position: fixed; /* or absolute */
  z-index: 9999; /* Make sure it's on top */
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*--------------------------------------------*/
#exampleModal .modal-footer {
  display: flex; /* Ensure it's a flex container */
  justify-content: space-between; /* This will space out the children elements */
}

#delete-changes-button {
  margin-right: auto; /* This will ensure the delete button stays on the left */
}


#alertContainer {
  position: fixed;
  top: 90px; /* Adjust this value to control the distance from the top */
  right: 20px; /* Adjust this value to control the distance from the right */
  z-index: 1050; /* Ensures it overlays other content */
  width: auto;
  max-width: 300px; /* Adjust based on your preference */
}

.alert {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.alert.show {
  opacity: 1;
}

/*--------------------------------------------*/
#resetStatusModal .container p {
  padding-top: 10px; /* Adjust the padding as needed */
}