.ideal-day {
  display: grid;
  grid-template: auto 1fr 1fr/2fr 1fr 1fr;
  padding: var(--pa-pad1);
  grid-gap: 1rem;
  overflow: hidden;
}
.ideal-day .help-block {
  line-height: 20px;
  margin-top: 5px
}
.ideal-day > div {
  display: flex;
  flex-direction: column;
  padding: 0
}
.ideal-day #filters {
  grid-area: 1/1/2/2
}
.ideal-day .totals {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  grid-area: 1/2/2/4
}
.ideal-day .values-list {
  grid-area: 2/1/4/2;
  overflow-y: scroll;
  padding-right: 6px;
  min-height: 0;
}
.ideal-day .compared {
  grid-area: 2/2/3/4;
  overflow: hidden;
}
.ideal-day .planned {
  grid-area: 3/2/4/3;
  overflow: hidden;

}
.ideal-day .real {
  grid-area: 3/3/4/4;
  overflow: hidden;

}

.placeholder {
  height: 300px
}
.hours-col {
  width: 100px;
  text-align: right
}
.ideal-day-table {
  position: relative
}
.ideal-day-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.ideal-day-table thead {
  background: var(--pa-white-bg);
}
.ideal-day-table thead th {
  font-weight: 500;
}
.ideal-day-table > tbody > tr > td {
  vertical-align: middle
}
.ideal-day-table td .inputloader {
  position: absolute;
  top: 15px;
  left: 15px
}
.ideal-day-table .lbl {
  font-weight: 500
}
.ideal-day-table tr.focused:hover td, tr.focused td {
  background-color: rgba(255, 242, 0, 0.09) !important
}
.ideal-day-table input {
  text-align: right
}
.total .hours-col {
  font-weight: 500
}
.ideal-day-totals span {
  background-color: var(--pa-grey);
  border-radius: 3px;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
  display: inline-block
}

@media (max-width: 991px) {
  .ideal-day {
    grid-template: auto/2.5fr 1fr 1fr
  }
  .ideal-day .totals {
    flex-direction: row
  }
  .ideal-day-totals span {
    padding: 1rem
  }
  .ideal-day #filters {
    grid-area: 1/1/2/4
  }
  .ideal-day .totals {
    grid-area: 2/1/3/4
  }
  .ideal-day .values-list {
    grid-area: 3/1/5/2;
    min-height: 30rem;
  }
  .ideal-day .compared {
    grid-area: 3/2/4/4;
  }
  .ideal-day .planned {
    grid-area: 4/2/5/3;
  }
  .ideal-day .real {
    grid-area: 4/3/5/4;
  }
}

@media (max-width: 767px) {
  .ideal-day-table {
    position: relative;
    margin-left: -5px;
  }
  .ideal-day {
    grid-template: auto/auto;
    overflow-y: scroll;
  }
  .ideal-day .totals {
    align-items: flex-start
  }
  .ideal-day .totals > span {
    flex: 1;
    display: block;
    text-align: center
  }
  .ideal-day-totals span {
    padding: 1rem
  }
  .ideal-day #filters {
    grid-area: 1/1/2/3
  }
  .ideal-day .totals {
    grid-area: 2/1/3/3
  }
  .ideal-day .values-list {
    grid-area: 3/1/4/3;
  }
  .ideal-day .compared {
    grid-area: 4/1/5/3;
    min-height: 30rem;
  }
  .ideal-day .planned {
    grid-area: 5/1/6/2;
    min-height: 30rem;
  }
  .ideal-day .real {
    grid-area: 5/2/6/3;
    min-height: 30rem;
  }
}

@media (max-width: 570px) {
  .ideal-day {
  }
  .ideal-day .totals {
    flex-direction: column;
    align-items: stretch
  }
  .ideal-day .totals > span {
    text-align: left;
    margin: 0 0 .5rem
  }
}

/* edit-grid.css */