.datepicker-plot-area {
  .datepicker-day-view {
    .table-days {
      width: 100%;
      float: left;
      direction: rtl;

      td {
        width: 14.2%;
        height: 26px;
        padding: 0;
        margin: 0;
        position: relative;

        &.disabled span {
          @extend %date-item-disable
        }

        &.selected span {
          @extend %date-item-selected;
        }

        &.selected span &:hover {
          @extend %date-item-hover;
        }

        &.today span {
          @extend %date-item-today;
        }

        .alter-calendar-day {
          font-style: normal;
          position: absolute;
          font-size: 8.5px;
          bottom: 0;
          right: 2px;
          color: $alter-calendar-hint-color;
        }

        span {
          display: block;
          width: 100%;
          height: 26px;
          line-height: 26px;
          padding: 0;
          margin: 0;
          @extend %date-item;

          &.other-month {
            @extend %date-item-numb;
          }

          &:hover {
            @extend %date-item-hover;
          }

        }
      }
    }

    .month-grid-box {
      display: block;
      width: 100%;
      float: right;
      min-height: 180px;
      margin: 8px 0;

      .header {
        display: block;
        width: 100%;
        float: left;
        padding-bottom: 8px;

        .header-row {
          display: block;
          width: 100%;
          height: 25px;
          float: left;
        }

        .header-row-cell {
          display: block;
          width: 14.2%;
          height: 25px;
          float: right;
          line-height: 25px;
          font: 11px;
          font-weight: $strong-font;
          color: $dark;
        }
      }
    }
  }
}