div.easy-calendar{
  margin-left: -$box-padding;
  margin-right: -$box-padding;
  thead{
    @include respond-to(max-#{$calendar-collapse}){
       display: none;
    }
  }
  &-fc{
    margin-left: -$box-padding - 1;
    margin-right: -$box-padding - 1;
    td,th{
      border-color: $color-border-minor !important;
    }
  }
  &, &-fc{
    table{
      thead {
        th,td{
          @extend %calendar-head-element;
        }
      }
      tbody{
        th{
          background: rgba(mix($color-foreground,$color-background),0.5);
          padding: 0 $gap;
          vertical-align: middle;
          text-align: right;
          white-space: nowrap;
          font-weight: normal;
          border-right: 1px solid $color-border-minor;
          border-top: 1px solid $color-border-minor;
        }
      }
      table{
        @extend %reset-box;
      }
    }
  }

  table{
    border-bottom: 1px solid $color-border-minor;
    @include respond-to(max-#{$calendar-collapse}){
      &, td, th, tbody, tfoot, tr{
        display: block;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      td{
        border: none !important;
      }
      td + td, tr + tr > td{
        border-top: 1px solid $color-border-minor !important;
      }
    }
    td{
      @extend %calendar-body-element;
    }
    tbody{
      tr{
        &:first-child{
          border-top: 1px solid $color-border-minor;
        }
        &+tr{
          td{
            border-top: 1px solid $color-border-minor;
          }
        }
      }
      td{
        &+td{
          border-left: 1px solid $color-border-minor;
        }
      }
    }
  }
  &-header{
    margin-bottom: .5*$box-padding !important;
    clear: none !important;
    .toolbar{
      &:last-child{
        margin-bottom: -$gap - 1 !important;
      }


      @include respond-to(min-menu-collapse){
        .button-group{
          float: right;
          margin-left: 2*$gap;
        }
      }
      .easy-calendar-title{
        @include respond-to(max-menu-collapse){
          margin-bottom: -2*$gap;
        }
      }
      .easy-calendar-listing-links{
        margin-top: .5*$gap;
      };
    }
  }

  &-listing-links{
    @extend %calendar-listing-links;
  }
  &-filters{
    clear: left;
    input, .easy-autocomplete-tag{
      //@extend %input-block;
    }
  }
  &-export{
    @extend %exports;
    label{
      @extend %exports-label;
    }
    padding-left: $box-padding;
    padding-right: $box-padding;
  }
  overflow-x: auto;
}
.fc{
  &-state{
    &-highlight{
      background: $color-highlight;
    }
  }
  &-agenda{
    &-divider{
      border-color: $color-border-minor;
      &-inner{
        background: mix($color-foreground,$color-background) !important;
      }
    }
    &-slots{
      &>tbody{
        &>tr{
          &>th,&>td{
            height: 20px;
          }
        }
      }
    }
  }
  &-event{
    color: $color-text !important;
    @extend %tag-palette;
    min-height: 14px;
    .ui-resizable-handle{
      background: rgba($black,0.1);
    }
    &-hori{
      .ui-resizable-handle.ui-resizable-e{
        right: -1px !important;
        width: 3px !important;
      }
    }
    &-vert{
      margin: 3px -4px 2px 1px;
      .ui-resizable-handle.ui-resizable-s{
        bottom: -1px !important;
        height: 3px !important;
        width: 60% !important;
      }
    }
    &-inner{
      &.icon-move{
        div.fc-event-time, div.fc-event-title{
          display: inline-block;
        }
      }
    }

    &-location{
      .fc-view-month &{
        display: none;
      }
    }
    &:hover &-location{
      display: block;
    }
    &:hover{
      z-index: 9;
    }

  }
  div > &-grid &-day{
    &-number{
      @extend %calendar-time-number;
    }
  }
  &-today{
    background: $color-calendar-background-today;
  }
}