html,
body {
  height: 100vh;
}
header {
  text-align: center;
}

.invalid-feedback {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #fff;
  background-color: rgba(220, 53, 69, 0.9);
  border-radius: 0.25rem;
}
.app {
  display: flex;
  height: 100%;
  margin: 0 auto;
}

.app > * {
  padding: 1em 1.5em;
  margin: 1.5em;
}

.form-group span {
  top: 1.2em;
}
.calendar-todo {
  width: 70%;
}

.current-todo-wrapper {
  display: block;
  width: 35%;
}

.current-todo {
  height: 60%;
  overflow-y: scroll;
}

.calendar-day {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  height: 80px;
}

.calendar-table {
  margin: 0 auto;
}

.popover-display {
  top: 46px;
  display: none;
}

.popover-content {
  height: 26rem;
  overflow-y: scroll;
}

.selected {
  background-color: #eee;
}

.outside .date {
  color: #ccc;
}

.timetitle {
  white-space: nowrap;
  text-align: right;
}

.event {
  border-top: 1px solid #b2dba1;
  border-bottom: 1px solid #b2dba1;
  background-image: linear-gradient(to bottom, #dff0d8 0px, #c8e5bc 100%);
  background-repeat: repeat-x;
  color: #3c763d;
  font-size: 0.75em;
  padding: 0 0.75em;
  line-height: 2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1px;
}

.event.begin {
  border-left: 1px solid #b2dba1;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.event.end {
  border-right: 1px solid #b2dba1;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.event.all-day {
  border-top: 1px solid #9acfea;
  border-bottom: 1px solid #9acfea;
  background-image: linear-gradient(to bottom, #d9edf7 0px, #b9def0 100%);
  background-repeat: repeat-x;
  color: #31708f;
}

.event.all-day.begin {
  border-left: 1px solid #9acfea;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.event.all-day.end {
  border-right: 1px solid #9acfea;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.event.clear {
  background: none;
  border: 1px solid transparent;
}

.table-tight > thead > tr > th,
.table-tight > tbody > tr > th,
.table-tight > tfoot > tr > th,
.table-tight > thead > tr > td,
.table-tight > tbody > tr > td,
.table-tight > tfoot > tr > td {
  padding-left: 0;
  padding-right: 0;
}

.table-tight-vert > thead > tr > th,
.table-tight-vert > tbody > tr > th,
.table-tight-vert > tfoot > tr > th,
.table-tight-vert > thead > tr > td,
.table-tight-vert > tbody > tr > td,
.table-tight-vert > tfoot > tr > td {
  padding-top: 0;
  padding-bottom: 0;
}

td {
  border-bottom: 1px solid #ddd;
}
.calendar-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  width: 100%;
}