.md-grid {
  /* The below would take up all available width */
  /* max-width: initial; */
  max-width: 85%;
}

/* Make icons on overview cards more prominent */
.da-icon-size {
  font-size: 1.25em;
}

/* Overview Page - Progress Bar Styling */

progress {
  width: 100%;
  height: 0.5rem;

  appearance: none;
  -webkit-appearance: none;
}

progress::-webkit-progress-bar {
  background-color: #d3d3d3;
  border-radius: 999px;
}

progress::-webkit-progress-value {
  background-color: #4caf50;
  border-radius: 999px;
}

/* Handle Firefox */
progress::-moz-progress-bar {
  background-color: #4caf50;
  border-radius: 999px;
}

/* Progress Bar styling */
#progress-wrapper {
  cursor: pointer;
  user-select: none;
}

#progress-container {
  position: relative;
  width: 100%;
  height: 20px;
  background: #d3d3d3;
  border-radius: 10px;
  overflow: hidden;
}

#progress-bar-div {
  height: 100%;
  width: 0%;
  background: #4caf50;
  transition: width 0.3s ease;
}

#progress-label {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: black;
  top: 0;
  line-height: 20px;
}

#progress-bar-by-priority {
  margin-top: 10px;
  display: none;
}

#progress-wrapper.expanded #progress-bar-by-priority {
  display: block;
}

/* priority bars */
.priority-bar {
  margin-top: 8px;
}

.priority-container {
  width: 100%;
  height: 10px;
  background: #d3d3d3;
  border-radius: 6px;
  overflow: hidden;
}

.priority-fill {
  height: 100%;
  background: #2196f3;
  width: 0%;
  transition: width 0.3s ease;
}