body {
    font-family: 'Vazir', sans-serif;
    background-color: #f8f9fa;
  }
  
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .dashboard-container {
    padding: 20px;
  }
  
  .card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  canvas {
    max-width: 100%;
    height: auto;
  }
  
  .btn-group .btn {
    flex: 1;
  }
  /* Limit the height of the gauges */
canvas {
    max-width: 100%;
    height: 150px !important; /* Set a fixed height for the gauges */
  }
  
  /* Make the layout more compact */
  .dashboard-container {
    padding: 10px; /* Reduce padding */
  }
  
  .card {
    margin-bottom: 10px; /* Reduce margin between cards */
  }
  
  .card-body {
    padding: 1rem; /* Reduce padding inside cards */
  }
  
  /* Ensure the water panel controls don't take too much space */
  #water-panels .btn-group .btn {
    padding: 0.5rem; /* Reduce button padding */
  }
  
  /* Adjust the gauge container */
  .gauge-container {
    text-align: center;
    margin-bottom: 10px; /* Reduce margin below gauges */
  }