.ui-datepicker {
  padding:0;
  font-family:inherit;

  .ui-icon {
    background-image:none;
  }

  &.ui-widget.ui-widget-content {
    border:0 none;
    box-shadow:0 0 10px rgba(#000, 0.4);
  }

  th {
    font-weight:400;
  }

  td {
    padding:0;
    text-align:center;

    .ui-state-default {
      background-color:transparent;
      border:0 none;
      text-align:center;

      &:hover {
        background-color:$brand-primary;
        color:#fff;
      }
    }

    .ui-state-highlight {
      color:$brand-primary;
    }

    .ui-state-active {
      background-color:$brand-primary;
      color:#fff;
    }

  }

  .ui-widget-header {
    background-color:$brand-primary;
    color:#fff;
    border:0 none;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
  }

  .ui-datepicker-header {
    padding:0;
    height:30px;
    @include display-flex();
    align-items: center;
  }

  .ui-datepicker-prev,
  .ui-datepicker-next {
    text-align: center;
    width:30px;
    height:30px;
    top:0px;
    @include display-flex();
    align-items: center;
    justify-content: center;
    border-radius:0px;

    &.ui-datepicker-prev-hover,
    &.ui-datepicker-next-hover{
      background-color:darken($brand-primary, 7.5%);
      color:#fff;
      border:0 none;
      cursor:pointer;
    }
  }

  .ui-datepicker-prev {
    left:0;
  }

  .ui-datepicker-next {
    right:0;
  }

  .ui-datepicker-title {
    width:100%;
    select {
      vertical-align: middle;
      background: transparent;
      border: 0 none;
      color: #fff;
      height:30px;
      line-height:30px;
      outline: 0 none !important;
      text-align:center;
      margin:0;
      font-family:inherit;

      option {
        color:#333;
      }
    }
  }
}