.timegrid-root {
  transition: opacity 200ms;
}
.timegrid-root.disabled {
  opacity: 0.4;
  user-select: none;
  pointer-events: none;
}
.timegrid {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.timegrid__body {
  max-width: 100%;
  min-width: 35%;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.timegrid__bodyColumns {
  overflow-x: auto;
  overflow-y: hidden;
}
.timegrid__timeLabelsCol,
.timegrid__column {
  display: inline-block;
  width: 90px;
  vertical-align: top;
}
.timegrid__dateLabelsRow {
  position: -webkit-sticky;
  position: sticky;
  /* 81px = height of "sticky-top" toolbar */
  top: 81px;
  overflow: hidden;
  z-index: 1025;
}
.timegrid__timeLabelsCol > .timegrid__slot,
.timegrid__dateLabelsRow > .timegrid__slot {
  border-radius: 0;
}
.timegrid__dateLabelsRow > :first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1026;
}
.timegrid__dateLabelsRow > .timegrid__slot {
  display: inline-block;
  width: 90px;
  vertical-align: top;
}
.timegrid__column--spacer {
  width: 16px;
}
.timegrid__slot {
  position: relative;
  height: 32px;
  line-height: 28px;
  border: 2px solid #FFFFFF;
  background: none;
  border-radius: 3px;
  transition: border-radius 100ms;
}
.timegrid__slot--body:hover {
  border-style: dashed;
  border-color: #50129d;
  cursor: pointer;
}
.timegrid__slot--body:active {
  border-style: solid;
  border-radius: 8px;
}
.timegrid__slot--spacer {
  background: #FFFFFF;
  height: 16px;
}
.timegrid__slot--label {
  background: #FFFFFF;
  color: #000000;
}
.timegrid__slot.is-selected {
  border-style: solid;
  border-color: #50129d;
}
.timegrid__slotData {
  width: 100%;
  height: 100%;
  padding: 0;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
}

/*
 * Grid data
 */
.freebusy {
  display: flex;
  flex-direction: row;
}
.omni-free {
  flex: 1;
}
.omni-busy {
  flex: 1;
}
.freebusy .list-group-item {
  border: none;
}
.timegrid__data h4,
.timegrid__data h5,
.timegrid__mobiledata h4,
.timegrid__mobiledata h5 {
  font-weight: 700;
}

 /*
  * Desktop grid data
  */
@media only screen and (min-width: 768px) {
  .timegrid__data .nav-item {
    flex: 1;
    width: 100%;
  }
  .timegrid__data .nav-link,
  .timegrid__data .nav-link.active {
    color: black;
  }
  .timegrid__body:not(:only-child) {
    display: inline-block;
    max-width: calc(100% - 500px);
  }
  .timegrid__data {
    display: inline-block;
    vertical-align: top;
    width: 500px;
    max-width: 50%;
    padding: 0 18px;

    position: -webkit-sticky;
    position: sticky;
    /* 81px = height of "sticky-top" toolbar */
    top: calc(81px + 10px);
    height: 0;
    height: min-content;
  }
  .timegrid__data .freebusy .list-group {
    max-height: 284px;
    overflow-y: auto;
  }
}
/*
 * Mobile grid data
 */
@media only screen and (max-width: 767px) {
  .timegrid {
    --omni-mobiledata-height: 50px;
    padding-bottom: var(--omni-mobiledata-height);
  }
  .timegrid.mobiledataexpanded {
    padding-bottom: 45vh;
  }
  .timegrid__mobiledata {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1026;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-top: 2px solid var(--omni-purple);
    background: white;
    transform: translateY(calc(100% - var(--omni-mobiledata-height)));
    transition: transform 200ms;
  }
  .timegrid__mobiledata.expanded {
    transform: translateY(55vh);
  }
  .timegrid__mobiledata .peek {
    display: flex;
    flex-direction: row;
  }
  .timegrid__mobiledata .peek-info {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .timegrid__mobiledata .peek-time {
    flex: 1;
    font-weight: 700;
  }
  .timegrid__mobiledata .peek-time > span {
    display: inline-block;
    transition: transform 200ms;
  }
  .timegrid__mobiledata.expanded .peek-time {
    line-height: calc(var(--omni-mobiledata-height) - 2px);
  }
  .timegrid__mobiledata.expanded .peek-time > span {
    transform: scale(1.25);
  }
  .timegrid__mobiledata .peek-users {
    flex: 1;
    margin-top: -5px;
  }
  .timegrid__mobiledata.expanded .peek-users {
    display: none;
  }
  .timegrid__mobiledata .data-expand {
    flex: 1;
    height: var(--omni-mobiledata-height);
    line-height: calc(var(--omni-mobiledata-height) - 2px);
    transition: transform 200ms;
  }
  .timegrid__mobiledata.expanded .data-expand {
    transform: rotate(180deg);
  }
  .timegrid__mobiledata .data {
    flex: 5;
  }
  .timegrid__mobiledata .data > span:only-child {
    line-height: calc(var(--omni-mobiledata-height) - 4px);
  }
  .timegrid__mobiledata .freebusy .list-group {
    /* 36px = height of h4 including margin */
    max-height: calc(45vh - 36px - var(--omni-mobiledata-height));
    overflow-y: auto;
  }
}

/*
 * Filter styles
 */
.timegrid__filter .list-group {
  align-items: center;
}
.timegrid__filter .list-group-item {
  border: none;
}
.timegrid__filter .list-group-item *:hover,
.timegrid__filter .list-group-item *:focus {
  cursor: pointer;
}

/*
 * Custom grid styles
 */
.timegrid.rsvp {
  padding-bottom: 8px;
}
.timegrid.rsvp .timegrid__data {
  display: none !important;
}
.timegrid.rsvp .timegrid__body {
  max-width: 100%;
}
.timegrid.rsvp .timegrid__mobiledata {
  transform: translateY(100vh);
}
.timegrid.rsvp .timegrid__slot,
.timegrid.rsvp .timegrid__slot:hover,
.timegrid.rsvp .timegrid__slot:focus,
.timegrid.rsvp .timegrid__slot:active {
  user-select: none;
  border-radius: 0;
}
.timegrid.rsvp .timegrid__slot.timegrid__slot--body {
  border: 2px solid #e45432;
  background: #FC5D38;
}
.timegrid.rsvp .timegrid__slot.timegrid__slot--body:hover {
  border-color: #FFFFFF !important;
}
.timegrid.rsvp .timegrid__slot.timegrid__slot--body.is-free {
  border-color: #14CC47;
  background: #94FC38;
}
.timegrid.rsvp .timegrid__slot.is-userFinalized {
  pointer-events: none;
  border-color: #309df5;
  background: #61B4F7;
}