.referential-overview
  $left-size: 100px
  $line-height: 60px
  margin-top: 50px
  overflow: hidden
  .time-travel, .filters
    background-color: $lightergrey
    padding: 10px
    float: right
    border-top-left-radius: 4px
    border-top-right-radius: 4px
    border: 1px solid $lightgrey
    border-bottom: none
    position: relative
    &:after
      position: absolute
      content: ""
      left: 0
      top: 100%
      right: 0
      height: 10px
      box-shadow: 0 0 10px rgba(0,0,0,0.5)
      z-index: 1
  .time-travel
    padding-top: 3px
    padding-bottom: 4px
    height: 44px
    a.btn:first-child
      margin-right: 1px
    a.btn:last-child
      margin-right: 1px

    max-width: 33%
    .btn-group, .form-group
      position: relative
      z-index: 2
    .form-group
      margin-left: 10px
      margin-bottom: 0
      display: inline-block
      input
        padding: 6px 5px
        border: 1px solid $lightgrey
        outline: none
        height: 34px
        border-radius: 4px
        padding-right: 25px
      a
        padding: 4px
        margin-top: 2px
        margin-left: -25px
  .filters
    float: left
    max-width: 66%
    padding: 0
    form
      background: transparent
      display: flex
      .ffg-row
        border-color: $grey
      .form-group
        border-color: $grey
        width: auto
        flex: 1 1
        padding: 6px 11px
        .input-group-btn
          right: 10px
        &.togglable
          padding-top: 6px
          padding-bottom: 7px
          &:before
            top: 0px

  .overview-table
    position: relative
    z-index: 2
    border: 1px solid $grey
    clear: both
    display: flex
    +emptyzone($lightgrey, $lightergrey)
    .head

      height: $left-size
    .line
      height: $line-height
    .left
      flex: 0 0
      background: $lightergrey
      min-width: $left-size
      overflow: hidden
      border-right: 1px solid white
      .head
        position: relative
        border-bottom: 1px solid $grey
        border-right: 1px solid $lightgrey
        .dates, .lines
          position: absolute
          font-size: 0.8em
          z-index: 2
        .dates
          right: 20px
          top: 20px
        .lines
          left: 20px
          bottom: 20px
        &:after
          position: absolute
          border-left: ($left-size - 2px)/2 solid transparent
          border-bottom: ($left-size - 2px)/2 solid transparent
          border-right: ($left-size - 2px)/2 solid white
          border-top: ($left-size - 2px)/2 solid white
          z-index: 1
          top: 0
          right: 0
          width: 0
          content: ""
      .line
        padding: 7px 10px
        border-bottom: 1px solid $grey
        font-size: 0.8em
        display: block
        &:last-child
          border-bottom: none
        .number
          border-radius: 100px
          display: inline-block
          min-width: 20px
          height: 20px
          text-align: center
          padding: 1px 4px
          text-decoration: none
          color: black
          border: 1px solid $grey
          max-width: 100%
          white-space: nowrap
          text-overflow: ellipsis
          overflow: hidden
        .name
          display: inline-block
          width: $left-size - 10px
          white-space: nowrap
          line-height: 20px
          text-overflow: ellipsis
          overflow: hidden
          vertical-align: bottom
          color: black
          text-decoration: none

        .company, .mode
          font-size: 0.9em
          white-space: nowrap
          text-overflow: ellipsis
          overflow: hidden
          margin-top: -2px
        .mode
          text-transform: uppercase
          color: $grey
          font-weight: bold
    .right
      flex: 1 1
      overflow: hidden
      .inner .lines
        transition: margin-left 0.5s
      .head
        white-space: nowrap
        position: relative
        z-index: 3
        &:after, &:before
          opacity: 0
          // transition: opacity 0.5s
          content: ""
          position: absolute
          left: -1000px
          right: 100%
          top: 0px
          bottom: 0
          background: $darkblue
          z-index: 11
          border-top: 1px solid white
        .week
          display: inline-block
          position: relative
          height: 100%
          transition: margin 0.5s
          background: white
          // &:last-child
          //   box-shadow: 0 -10px 10px rgba(0,0,0,0.5)
          .week-span
            left: 15px
            top: 15px
            right: 30px
            white-space: nowrap
            overflow: hidden
            text-overflow: ellipsis
            position: absolute

          .week-number
            background-color: $lightgrey
            color: $grey
            position: absolute
            top: 0
            right: 0
            padding: 2px 4px

          &:after
            position: absolute
            right: 0
            top: 0
            bottom: 0
            background: $grey
            width: 1px
            content: ""

          &:last-child:after
            display: none

          .days
            position: relative
            top: 50%
            height: 50%
            border-top: 1px solid $grey
            border-bottom: 1px solid $grey

          .day
            float: left
            border-left: 1px solid $grey
            box-sizing: border-box
            padding-left: 5px
            padding-top: 3px
            position: relative
            height: 100%
            .name, .number
              position: absolute
              left: 10px
              right: 10px
              top: 50%
              transform: translateY(-50%)
              margin-top: 10px
            .name
              font-weight: bold
              font-size: 0.8em
              margin-top: -10px
            &:first-child
              border: none
            &.weekend
              background: $lightergrey
            &.selected, &:hover
              color: $blue
              background-color: transparentize($blue, 0.7)

            &:hover
              background-color: transparentize(white, 0.7)
              &:after
                content: ""
                left: -1px
                right: -1px
                top: 100%
                height: 10000px
                position: absolute
                z-index: 4
                background-color: transparentize(white, 0.7)

      .line
        border-bottom: 1px solid $grey
        position: relative
        overflow: hidden
        box-shadow: 0 -10px 10px rgba(0,0,0,0.5)

        &:last-child
          border-bottom: none

      .period
        height: 100%
        top: 0
        background: #aedd8a
        position: absolute
        box-shadow: 0 0 10px rgba(0,0,0,0.5)
        z-index: 2
        .title
          position: absolute
          left: 12px
          top: 50%
          margin-top: -6px
          transform: translateY(-50%)
          background-color: transparentize(white, 0.25)
          padding: 5px
          font-size: 0.7em
          border-radius: 5px
          transition: margin-left 0.5s
          max-width: calc(100% - 24px)
          margin-right: 12px
        &:after
          content: ""
          position: absolute
          bottom: 1px
          left: 0
          right: 0
          height: 10px
          background: white
          opacity: 0.25
          z-index: 3
        &.empty
          z-index: 1
          background: rgb(244, 67, 67)
          background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 12px,#e49393 12px,#e49393 25px)
          &.accepted
            background: #f19039
            background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 12px,#f19039 12px,#f19039 25px)
        &:hover
          z-index: 3
          &:after
            opacity: 0.5
            .title
              background-color: transparentize(white, 0.1)

  &.sticky
    .time-travel
      position: fixed
      bottom: 0
      z-index: 15
      right: 35px
      box-shadow: 0 0 10px rgba(0,0,0,0.5)

    .overview-table .right
      .lines
        margin-top: $left-size
      .head
        position: fixed
        top: 80px
        z-index: 10
        background: white
        height: 50px
        right: 51px
        left: 51px + $left-size
        // overflow-x: hidden
        &:after, &:before
          opacity: 1
        &:after
          left: 100%
          right: -1000px
        .week-span, .week-number
          display: none
        .days
          height: 100%
          top: 0
          border-top: 1px solid white