.dropdown-menu {
            max-height: 200px;
            overflow-y: auto;
        }
        .agent-item {
            cursor: pointer;
            padding: 5px 10px;
        }
        .agent-item:hover {
            background-color: #f8f9fa;
        }
        .datepicker {
            z-index: 1600 !important;
        }
        .conditional-section {
            display: none;
        }
        .invalid-feedback {
            display: none;
            color: #dc3545;
            font-size: 0.875em;
        }
        .is-invalid {
            border-color: #dc3545 !important;
        }
        .is-invalid+.invalid-feedback,
        .is-invalid~.invalid-feedback {
            display: block;
        }
        /* overrides */
        /* Apply Roboto font to the entire page */
        body {
          font-family: 'Montserrat', sans-serif;
          background-color: #e0e0e0; /* Light grey background for the page */
          margin: 0;
          padding: 20px; /* Optional padding around the page */
        }
        .card-header.bg-primary {
            color: black !important;
        }
        .card-header h3 {
            font-weight: 700 !important; /* You can adjust to 800 or 900 if needed */
            font-size: 1.5rem;
          }
          .card-header h5 {
            font-weight: 600 !important; /* You can adjust to 800 or 900 if needed */
            font-size: 1.1rem !important; /* Adjust the value as needed */
        }
        /* Optional: If you want to style the form container (like a card) differently */
        .card {
          background-color: #dfe6eb;
          border: none;
          border-radius: 4px;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .card-header.bg-primary {
          background-color: #88ADAE !important;
        }
        label.form-label {
          font-weight: 500;
          font-size: 15px;
        }
        .btn-primary {
          background-color: #F19B38 !important;
          border-color: #F19B38 !important;
        }
        .btn-primary:hover {
          background-color: #f17437 !important; /* Slightly darker for hover */
          border-color: #F17437 !important;
        }
        .card-header.bg-light {
          background-color: #88ADAE !important;
        }
        .form-control,
        .form-select {
          font-size: 0.875rem !important; /* Adjust value as needed */
          background-color: #f8f9fa !important;
        }
        #agentDropdown .dropdown-item {
          font-size: 0.875rem !important; /* Adjust the value as needed */
        }
        #poaType {
          width: 50% !important;
        }
        /* Reduce the space below labels */
        .form-label {
          margin-bottom: 0.1rem !important; /* Adjust as needed */
        }
        #contactCount {
          width: 20% !important;
}
        /* Validation styling */
        input.valid {
            border-color: #4CAF50 !important;
            border-width: 2px !important;
            background-color: #f8fff8 !important;
            box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
        }

        input.invalid {
            border-color: #f44336 !important;
            border-width: 2px !important;
            background-color: #fff8f8 !important;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
        }
        .error-message {
            color: #f44336;
            font-size: 0.85em;
            margin-top: 5px;
            min-height: 1.2em !important;
        }

        input[readonly] {
            background-color: #f8f9fa;
            cursor: not-allowed;
            border-color: #ced4da;
            opacity: 0.8;
        }