.ui-datepicker {
  margin-top: 5px;
  width: 250px;
  padding: 15px;
  @include gradient(#333,#222);
  @include box-shadow(0,0,3px,black);
  @include border-radius(5px);
  .ui-datepicker-header {
    padding: 0 5px;
    a, span {
      color: white;
      text-shadow: -1px -1px 0 black;
    }
    .ui-datepicker-prev {
      float :left;
      cursor: pointer;
    }
    .ui-datepicker-next {
      float: right;
      cursor: pointer;
    }
    .ui-datepicker-title {
      text-align: center;
    }
  }
  table {
    margin-top: 10px;
    width: 100%;
    @include gradient(#ddd,#bbb);
    @include border-radius(3px);
    @include box-shadow(0,0,3px,black);
    td, th {
      padding: 5px 7px;
      color: black;
      text-shadow: 1px 1px 0 white;
      text-align: center;
      a {
        color: black;
        text-decoration: none;
      }
      a:hover {
        color: $color_main;
      }
    }
    th {
      color: #444;
    }
    .ui-datepicker-today a {
      color: $color_main;
    }
  }
}

.calendricalTimePopup {
  margin-top: 5px;
  ul {
    width: 255px;
    padding: 15px;
    @include gradient(#333,#222);
    @include box-shadow(0,0,3px,black);
    @include border-radius(5px);
    overflow: hidden;
    li {
      display: block;
      width: 45px;
      float: left;
      margin: 3px;
      padding: 0;
      a {
        color: white;
        font-size: 14px;
        text-shadow: -1px -1px 0 black;
        text-decoration: none;
      }
      a:hover {
        color: $color_main;
      }
    }
  }
}

.ui-autocomplete {
  width: 400px;
  padding: 5px 15px;
  @include gradient(#333,#222);
  @include box-shadow(0,0,3px,black);
  @include border-radius(5px);
  li {
    color: white;
    font-size: 14px;
    text-shadow: -1px -1px 0 black;
    margin: 10px 0px;
  }
  li:hover {
    color: $color_main;
    cursor: pointer;
  }
}