.ui-widget-header {
  border: 0;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  font-weight: 300;
}

.ui-widget-content {
  border-width: 0;
  a {
    text-decoration: underline;

    &.btn-primary {
      color: white;
    }
  }
}

.ui-dialog {
  .ui-dialog-title {
    float: none;
    font-size: $font-size-large;
    font-weight: normal;
  }
  .ui-dialog-titlebar {
    padding: 0.8em 1em;
    text-align: center;
  }
  .ui-dialog-titlebar-close {
    width: 30px;
    height: 30px;
    top: 1em;
    right: 0.6em;
    padding: 0;

    &.ui-state-hover {
      border-width: 0;
      background-image: none;
      background-color: transparent;
      color: $gray-lighter;
    }
    
    span {
      margin: 0;
    }

    .ui-icon-closethick {
      background-image: none;
      width: 30px;
      height: 30px;
      text-indent: 0;

      &:before {
        content: "×";
        display: block;
        font-size: 3em;
        line-height: 30px;
        font-weight: $headings-font-weight;
      }
    }
  }
  .documentation {
    .description {
      font-size: $font-size-base;
      line-height: 2em;
      padding: 2em 3em;
    }
    .fa {
      float: right;
      font-size: $font-size-h2;
      padding: 0 0.3em 0.5em;
    }
  }

  dd {
    margin-bottom: 1em;
  }
}

.ui-autocomplete {
  border: 1px solid $gray-lightish !important;
  background: lighten($brand-primary, 55%) !important;
  box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.ui-datepicker {
  padding: 0;
  background: $gray-lightest;
  border: 1px solid $gray-lightish;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
  border-radius: $border-radius-base;

  th {
    font-weight: 400;
  }

  select.ui-datepicker-month, select.ui-datepicker-year {
    background: $gray-lightest;
    color: $gray-dark;
   font-weight: 300;
  }
}

#ui-datepicker-div {
  z-index: 100 !important;
}
