body { 
    background: #f7f7f7; 
    font-family: "Roboto", sans-serif;
  }
  .form-container {
    background: #fff; padding: 30px; border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-top: 50px;
  }
 
  .form-group { 
    margin-bottom: 15px; 
  }
  button { 
    padding: 10px 20px; 
  }
  .reports h1{
    text-align: center;
    font-weight: bold;
        margin-bottom: 20px;
  }
 .reports label { 
         margin-bottom: 8px;
    margin-top: 12px;

  }
  .form-control:focus{
    
    box-shadow: unset;
  }
.error-message {
  color: #b90508 !important;
  background: #fff !important;
  border-radius: 2px !important;
  font-size: 14px !important;
  padding: 0 5px !important;
  display: none;
  margin-top: 2px !important;
}
  /* Popup styles */
        .popup-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.6);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        .popup-box {
            background: #fff;
            padding: 30px;
            border-radius: 12px;
            text-align: center;
            position: relative;
            max-width: 400px;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
            top: 7rem;
        }
        .popup-box h3 {
            color: green;
            margin-bottom: 10px;
        }
        .popup-close {
            position: absolute;
            top: 10px; right: 15px;
            cursor: pointer;
            font-size: 22px;
            font-weight: bold;
            color: #333;
        }