h1 {
    font-weight: 300;
}

/* In your custom.css file, loaded after Bootstrap's CSS - This makes fields blue when selected for input*/
.form-control:focus {
  border-color: #0072BC; /* BlueViolet */
  box-shadow: 0 0 0 0.25rem rgba(0, 114, 188, 0.25); 
}

.form-select:focus {
  border-color: #0072BC; /* Example: a light blue border */
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Example: a blue shadow */
}

.table-container {
  /* This class ensures the arrows are positioned correctly relative to the table area */
  position: relative;
}

.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #007bff; /* Bootstrap primary color */
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  display: none; /* Hidden by default, JavaScript will manage visibility */
}

.left-arrow {
  left: 0;
}

.right-arrow {
  right: 0;
}

/* Optional: add some padding to the table wrapper so content isn't hidden by arrows */
.table-responsive {
  padding-left: 30px;
  padding-right: 30px;
}

/* Custom CSS file (or within a <style> tag) */
 [id^="owner-1"]:invalid {
  color: #0072BC; /* Bootstrap's default secondary text color (muted) */
  /* font-style: italic; */
  /* Or any other color you prefer, e.g., color: gray; */
}