body {
  font-family: "Segoe UI", Arial, sans-serif; /* Modern font */
  background-color: #f9f9f9; /* Subtle background for better readability */
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center !important;
  font-size: 2em !important; /* Larger, bold header */
  color: #333 !important; /* Neutral color for text */
  margin-top: 20px !important;
}

.table-container1 {
  width: 97%;
  max-height: 60vh !important; /* Table occupies half the screen height */
  overflow-y: auto !important; /* Enable vertical scrolling */
  margin: 20px auto !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important; /* Rounded edges */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Softer shadow */
  background-color: #ffffff !important; /* White background for contrast */
  position: relative;
  z-index: 1; /* Set a lower z-index to ensure it stays below other elements */
}

table {
  width: 100%;
  border-collapse: separate !important; /* Ensure borders stay visible */
  border-spacing: 0 !important; /* Ensure no gap between cells */
  position: relative;
}

thead th {
  position: sticky !important;
  top: 0 !important;
  background-color: #0078d4 !important; /* Modern blue for headers */
  color: #ffffff !important; /* White text for contrast */
  font-weight: bold !important;
  border: 1px solid #0078d4 !important; /* Same color as header for a clean look */
  text-transform: uppercase !important; /* Modern text style */
  padding: 12px !important; /* Add more padding */
  z-index: 2 !important; /* Ensure header stays above rows, but below buttons */
}

th,
td {
  border: 1px solid #ddd !important;
  padding: 10px !important; /* Slightly larger padding for modern spacing */
  text-align: left !important;
  position: relative !important;
  color: #555 !important; /* Neutral text color */
}

tbody {
  position: relative;
  z-index: 1; /* Ensure the tbody has a lower z-index than the sticky header */
}

td input {
  width: 100% !important;
  border: 1px solid #ffffff !important; /* Subtle gray border */
  border-radius: 6px !important; /* Rounded corners */
  outline: none !important;
  padding: 8px !important; /* Spacious padding */
  box-sizing: border-box !important;
  font-size: 14px !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important; /* Modern interaction effects */
}

td.selected {
  border: 2px solid #ff9800 !important; /* Modern orange for highlighting */
  transition: border-color 0.3s ease !important; /* Smooth transition */
}

table td input.amount,
table td input.from,
table td input.to {
  background-color: #ffffff !important; /* Subtle gray for clarity */
  font-size: 16px !important; /* Larger font for clarity */
  height: 44px !important; /* Spacious height */
  padding: 10px !important;
}

.corner-gif {
  width: 100px; /* Make the GIF smaller */
  height: auto; /* Maintain aspect ratio */
}

#addRowBtn {
  background: linear-gradient(
    145deg,
    #4caf50,
    #388e3c
  ); /* Green gradient for a fresh look */
  color: white; /* White text for contrast */
  text-transform: uppercase; /* Uppercase text for a modern touch */
  cursor: pointer; /* Pointer cursor on hover */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  transition: all 0.3s ease; /* Smooth transition for all changes */
  outline: none; /* Remove outline on focus */
  min-width: 120px; /* Ensure the button is not too wide */
  max-width: 200px; /* Optional: Set a max width if you want to restrict how wide the button can be */
}

/* Hover state */
#addRowBtn:hover {
  background: linear-gradient(
    145deg,
    #388e3c,
    #4caf50
  ); /* Reverse the gradient on hover */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover */
  transform: translateY(-2px); /* Slight lift effect on hover */
}

/* Active state */
#addRowBtn:active {
  background: linear-gradient(
    145deg,
    #388e3c,
    #4caf50
  ); /* Keep the gradient on click */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Smaller shadow on active state */
  transform: translateY(2px); /* Slight downward effect when clicked */
}

#addRowBtn2 {
  max-width: 200px;
}

/* Modern Highlight Effect */
.highlight {
  background: linear-gradient(90deg, #3086f7, #8dc9f3); /* Smooth gradient */
  border-radius: 5px; /* Rounded corners for a sleek look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
  transition: background 1.5s ease, box-shadow 1.5s ease;
}

@keyframes fadeOutHighlight {
  0% {
    background: linear-gradient(90deg, #ffe500, #fff5cc);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  100% {
    background: transparent;
    box-shadow: none;
  }
}

.highlight {
  animation: fadeOutHighlight 1.5s forwards;
  border-radius: 5px;
}