/* ========================================================================
 * CALENDAR
 * ======================================================================== */

// CALENDAR ---------------------------------------------------
.calendar-toolbar{
  border-bottom: 5px dotted $border-color;
  padding-bottom: 20px;
  margin-bottom: 15px;
}

// YEAR,MONTH,WEEK,DAY ----------------------------------
.cal-month-box, .cal-year-box, .cal-week-box{
  border: none !important;
}
.cal-month-box, .cal-week-box, .cal-year-box{
  background-color: white;
}
.cal-year-box .row-fluid, .cal-month-box .cal-row-fluid{
  border-bottom: 1px solid lighten($border-color,10%) !important;
}
.cal-year-box [class*="span"], .cal-month-box [class*="cal-cell"]{
  border-right: 1px solid lighten($border-color,10%) !important;
}
.cal-year-box{
  .row-fluid{
    [class*="span"]{
      &:last-child{
        border-right: none !important;
      }
    }
  }
}
.cal-month-box{
  .cal-row-fluid{
    [class*="cal-cell"]{
      &:last-child{
        border-right: none !important;
      }
    }
  }
}
.cal-month-box, .cal-month-day{
  span[data-cal-date]{
    font-size: 25px;
  }
  [data-cal-row="-day1"]{
    .cal-day-weekend{
      span[data-cal-date]{
        color: $color-danger;
      }
    }
  }
}

// YEAR ----------------------------------
.cal-year-box{
  color: $color-inverse;
  .col-md-3{
    width: 25%;
    span[data-cal-date]{
      margin-right: auto !important;
    }
  }
}

// MONTH ----------------------------------

// WEEK ----------------------------------
#cal-week-box{
  display: none !important;
}

// DAY ----------------------------------
#cal-day-box{
  .day-highlight{
    border: none !important;
  }
  .day-event{
    margin-left: 23px !important;
  }
}
#cal-day-panel{
  #cal-day-panel-hour{
    .cal-day-hour{
      .cal-day-hour-part{
        .span1{
          padding-top: 4px;
        }
        b{
          &:before{
            font-family: "fontawesome";
            content: "\f017";
            margin-right: 5px;
          }
        }
      }
    }
  }
}

// MISC CALENDAR ----------------------------------
#cal-slide-content{
  background-color: #F5F5F5 !important;
  @include box-shadow(none !important);
  color: #999;
  border-bottom: 1px solid $border-color;
  background-image: none !important;
  a.event-item{
    color: #999;
  }
}
#cal-day-tick{
  background-color: #F5F5F5;
  display: none;
}
#cal-slide-tick{
  display: none !important;
}
.cal-row-head{
  [class*="cal-cell"]{
    padding: 10px 3px;
    font-weight: 400;
    &:first-child{
      padding: 10px 0px;
      font-weight: 400;
    }
  }
}
.cal-row-head + .cal-day-hour{
  padding-top: 15px;
  padding-bottom: 10px;
  padding-right: 15px;
  [class*="col-xs-"]{
    padding-left: 0px;
    padding-right: 0px;
    &.span1{
      text-align: center;
    }
  }
}

// EVENTS ---------------------------------------------------
.event{
  @include resize(15px !important);
  @include box-shadow(none !important);
  @include border-radius(10px !important);
  border: none !important;
}
@include event-color(important,$color-danger);
@include event-color(info,$color-info);
@include event-color(warning,$color-warning);
@include event-color(inverse,$color-inverse);
@include event-color(success,$color-success);
@include event-color(special,$color-lilac);

// EVENT LIST---------------------------------------------------
#eventlist{
  li{
    position: relative;
    display: block;
    font-size: 13px;
    &:first-child{
      border-top: none;
    }
    a{
      padding: 0px;
      margin-bottom: 10px;
      i{
        background-color: white;
        width: 30px;
        height: 30px;
        text-align: center;
        display: inline-block;
        line-height: 28px;
        font-size: 14px;
      }
    }
  }
}

// EVENT LIST---------------------------------------------------
#events-modal{
  z-index: 9999;
}

// HIGHLIGHTS -----------------------------------------------------
.day-highlight{
  @include dh-event-color(important,$color-danger);
  @include dh-event-color(info,$color-info);
  @include dh-event-color(warning,$color-warning);
  @include dh-event-color(inverse,$color-inverse);
  @include dh-event-color(success,$color-success);
  @include dh-event-color(special,$color-lilac);
}

@media (max-width: 800px) {
  .cal-month-box, .cal-month-day{
    span[data-cal-date]{
      font-size: 15px;
      margin-top: 5px !important;
      margin-right: 10px !important;
    }
  }
}

@media (max-width: 480px){
  .cal-year-box{
    .col-md-3{
      width: 50%;
    }
  }
  .events-list{
    max-height: 60px !important;
  }
}