* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



header.header-3d {
  
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  /* padding: 1rem 2rem; */
  background: linear-gradient(135deg, #2e2e2e 0%, #424242 100%);
  z-index: 100;
  overflow: visible;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.header-3d-container {
  text-align: center;
  flex: 1 1 auto;
  position: relative;
  max-width: 100%;
  padding: 0.3rem 0;
}

.header-3d-title {
  white-space: nowrap;

    font-size: 2.5rem;                  /* Smaller size */
  font-weight: 300;                 /* Lighter font */
  white-space: nowrap;             /* Prevent line break */
  letter-spacing: 0.03em;          /* Tighter spacing */
  color: #fff;
  -webkit-text-stroke: 0.2px #aaa; /* Light outline, thin */
          /* Zoom out effect */
  /* transform-origin: top center; */
  animation: header-3d-float3d 6s ease-in-out infinite;
}

.header-3d-layer {
  position: absolute;
  left: 50%;
  top: -25px;
  transform: translateX(-50%);
  pointer-events: none;
}

.header-3d-layer1 { -webkit-text-stroke-color: #ffffff; }
.header-3d-layer2 { -webkit-text-stroke-color: #bbbbbb; top: 2px; }
.header-3d-layer3 { -webkit-text-stroke-color: #888888; top: 4px; }

@keyframes header-3d-float3d {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}

.header-3d-title {
  display: flex;
  justify-content: center;
  /* gap: 1rem; */
  /* margin-top: 1rem; */
  
}

.header-3d-title {
  height: 4px;
  width: 80px;
  /* background: linear-gradient(90deg, #ffffff, #999999); */
  border-radius: 2px;
  animation: header-3d-slideGlow 3s linear infinite;
}

@keyframes header-3d-slideGlow {
  0% { filter: drop-shadow(0 0 3px #ffffff); transform: translateX(-50%); }
  50% { filter: drop-shadow(0 0 10px #cccccc); transform: translateX(50%); }
  100% { filter: drop-shadow(0 0 3px #ffffff); transform: translateX(-50%); }
}

.logo {

  transform-origin: top center;

  width: 60px;
  height: auto;
  z-index: 5;
}

.button-container {
  /* transform: scale(0.75); */
  transform-origin: right ;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
  padding: 0.25rem 0.5rem;
}

.file-upload-btn2 {
  background: transparent;
  color: #ffffff;
  border: 0.5px solid #06d9f5;
  padding: 0.2rem 0.7rem;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 6px;
  transition: 0.3s ease;
}

.file-upload-btn2:hover {
  background: #ffffff22;
  color: #000000;
  box-shadow: 0 0 10px #ffffff88;
}

/* Optional: add margin to main page content */
main, .content-wrapper, #page-content {
  margin-top: 200px; /* or height of your header if fixed */
}


/* ########################################## */

    
  .relogin {
    color: yellowgreen;
  }
  .addnewbtn {
    background-color: #289b18; /* Material Design black */
    color: white;
    padding: 10px 15px; /* Adjusted padding */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
    margin-left: 5px;
  }

  .addnewbtn:hover {
    background-color: #0c7422; /* Slightly darker black on hover */
  }

  .reports {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .tbl {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .tbl th,
  .tbl td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .tbl th {
    background-color: #0a0a0a;
    color: white;
  }

  .tbl td {
    word-break: break-word;
  }

  /* EFFECTS */

  .tbl:hover {
    animation: shake 0.5s ease-in-out;
  }

  @keyframes shake {
    0%,
    100% {
      transform: translateX(0);
    }
    25%,
    75% {
      transform: translateX(-5px);
    }
    50% {
      transform: translateX(5px);
    }
  }

  td:hover {
    animation: jitter 0.3s ease-in-out;
  }

  @keyframes jitter {
    25% {
      transform: translateX(-2px) rotate(-2deg);
    }
    50% {
      transform: translateX(2px) rotate(2deg);
    }
    75% {
      transform: translateX(-2px) rotate(-2deg);
    }
    100% {
      transform: translateX(2px) rotate(2deg);
    }
  }

  /* END EFFECT */

  .status {
    color: rgb(255, 81, 0); /* Set text color to red */
  }
  .statusred {
    color: rgb(12, 158, 31); /* Set text color to red */
  }

  .search-container {
    margin-top: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  #searchInput {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
  }

  #searchp {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
  }




  
  #activeFilters {
    color: rgb(221, 49, 6);
  }

  .datatr:hover {
    background-color: #4ea8f1; /* Change the background color on hover */
    transform: translateY(-3px); /* Move the row up by 3 pixels on hover */
    transition: background-color 0.3s, transform 0.3s; /* Add a smooth transition effect */
    color: white;
  }