.dashboard-component {
  height: 100%;
  border-radius: 10px;
  /* Add any existing styling for your component boxes */
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Height classes for different rows */
.height-60 {
  height: 60vh;
}

.height-40 {
  height: 40vh;
}

.height-500 {
  height: 500px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 992px) {
  .d-flex.flex-row {
    flex-direction: column !important;
  }

  .dashboard-component {
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 20px;
  }

  .height-60, .height-40, .height-500 {
    height: auto;
  }
}

/* Existing classes - make sure they're compatible */
.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-space-between {
  justify-content: space-between;
}