body {
  padding: 20px; /* Adds 20px of space inside the body on all sides */
}

.scroll-box{
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: .5rem;
    padding: 12px 16px;
    background: #fff;
  }

 :required {
  border-color: blue;
  border-width: 3px;
}

:required:invalid {
  border-color: #c00000;
}

/* Container styles */
#points-container {
  position: relative;
  margin-bottom: 1rem;
}

/* Points box styles */
#points {
/*  max-height: 280px; */
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  padding: 12px 16px;
  background: #fff;
}
/* Scroll hint styling */
#scrollHint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
  text-align: center;
  color: #444;
  font-size: 0.9rem;
  font-weight: 500;
  padding-top: 15px;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  pointer-events: none;
  transition: opacity 0.5s ease;
  animation: pulseArrow 1.5s infinite;
}
.scroll-hint-text {
  color: #d00;           /* red text */
  font-weight: 700;      /* bold */
}
@keyframes pulseArrow {
  0% { opacity: 0.8; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(3px); }
  100% { opacity: 0.8; transform: translateY(0); }