.monthly-hours-card {
  --monthly-hours-accent: #b64b4b;
  align-items: center;
  background: var(--monthly-hours-accent);
  color: #fff;
  display: inline-grid;
  gap: 1px 9px;
  grid-template-columns: auto auto;
  margin: -4px 0 -5px 8px !important;
  padding: 3px 9px 4px !important;
  vertical-align: middle;
}

#top-menu #account .monthly-hours-card { line-height: normal; }
.monthly-hours-card--overtime { --monthly-hours-accent: #a96b14; }
.monthly-hours-card__label { font-size: 10px; opacity: 1; text-transform: uppercase; }
.monthly-hours-card__value { font-size: 11px; }
.monthly-hours-card__value span { font-size: 9px; font-weight: normal; opacity: 1; }

.monthly-hours-month-picker { align-items: center; display: flex; gap: 8px; }
.monthly-hours-targets td.name { align-items: center; display: flex; gap: 8px; }
.monthly-hours-targets td.hours { text-align: center; }
.monthly-hours-targets input[type="number"] { max-width: 9em; text-align: right; }

.monthly-hours-report-filters {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.monthly-hours-report-filters p { margin: 0; }
.monthly-hours-report-filters label { display: block; margin-bottom: 3px; }
.monthly-hours-kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  margin-bottom: 18px;
}
.monthly-hours-kpi {
  background: var(--body-background-color, #fff);
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  padding: 14px 16px;
}
.monthly-hours-kpi span { color: #66727d; display: block; font-size: 11px; text-transform: uppercase; }
.monthly-hours-kpi strong { display: block; font-size: 24px; margin-top: 4px; }
.monthly-hours-charts {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 22px;
}
.monthly-hours-charts .monthly-hours-chart-wide { grid-column: 1 / -1; }
.monthly-hours-bars { list-style: none; margin: 0; max-height: 420px; overflow: auto; padding: 0; }
.monthly-hours-bars li {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(120px, 1fr) minmax(140px, 2fr) 5em;
  padding: 5px 0;
}
.monthly-hours-bars__label { overflow-wrap: anywhere; }
.monthly-hours-bars meter { width: 100%; }
.monthly-hours-bars strong { text-align: right; }
.monthly-hours-report-table td.hours { text-align: right; }

@media screen and (max-width: 899px) {
  .monthly-hours-card { display: none; }
  .monthly-hours-kpis, .monthly-hours-charts { grid-template-columns: 1fr; }
  .monthly-hours-charts .monthly-hours-chart-wide { grid-column: auto; }
  .monthly-hours-bars li { grid-template-columns: 1fr 4em; }
  .monthly-hours-bars meter { grid-column: 1 / -1; grid-row: 2; }
}