$calendrical_background_color:    #FFF;
$calendrical_text_color:          #000;
$calendrical_border_color:        #999;
$calendrical_grey_color:          #999;
$calendrical_selection_color:     #CCF;
$calendrical_today_color:         #EEB;
$calendrical_today_border_color:  #DD6;

.calendricalDatePopup {
  background: $calendrical_background_color;
  border: solid 1px $calendrical_border_color;
  padding: 2px;
  text-align: center;
  width: 160px;

  table {
    border-collapse: collapse;
    width: 160px;

    .monthCell {
      padding: 2px 0;
      a {
        display: block;
        float: left;
        line-height: 20px;
      }
      .prevMonth, .nextMonth {
        width: 24px;
      }
      .monthName {
        width: 110px;
      }
    }

    a {
      text-decoration: none;
    }

    th {
      text-align: center;
    }

    td {
      text-align: center;
      font-size: $small;
      padding: 0;
      a {
        display: block;
        color: $calendrical_text_color;
        padding: 2px 3px;
        &:hover {
          background: $calendrical_selection_color;
          border: none;
          padding: 2px 3px;
        }
      }
      &.today a {
        background: $calendrical_today_color;
      }
      &.selected a {
        background: $calendrical_selection_color;
      }
      &.today_selected a {
        background: $calendrical_today_color;
        border: solid 1px $calendrical_today_border_color;
        padding: 1px 2px;
      }
      &.nonMonth a {
        color: $calendrical_grey_color;
      }
    }
  }
}

.calendricalTimePopup {
  background: $calendrical_background_color;
  border: solid 1px $calendrical_border_color;
  width: 110px;
  height: 130px;
  overflow: auto;
  z-index: 99;
  ul {
    margin: 0;
    padding: 0;
    li {
      list-style: none !important;
      margin: 0;
      padding: 0 !important;
      border: none !important;
      a, a:visited {
        text-indent: 10px;
        padding: 4px;
        display: block;
        color: $calendrical_text_color !important;
        text-decoration: none !important;
      }
      a:hover, &.selected a {
        background: $calendrical_selection_color;
      }
    }
  }
}
.calendricalEndTimePopup {
  width: 160px;
}