.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;
      }
    }
  }
}

.dx-datagrid {

  .dx-datagrid-headers {
    border:1px solid #d8d8d8;

    .dx-datagrid-table {

      .dx-header-row {
        background-color:#f9f9f9;
        color:#282828;

        > td {
          vertical-align: middle;
          text-align: center !important;
        }
      }
    }
  }
  .dx-datagrid-total-footer {
    >.dx-datagrid-content {
      padding:0;
      .dx-row {
        border: 1px solid #ddd;
        background-color:#f9f9f9;
        color:#282828;

        td {
          border-right:1px solid #ddd;
          border-bottom:1px solid #ddd;
        }
      }
    }

  }
}

.dx-datagrid-rowsview {border:1px solid #d8d8d8;}


.ui-datepicker-next {
  &:before {
    content:'\f054';
    font-family: 'Font Awesome 5 Pro';
  }
}

.ui-datepicker-prev {
  &:before {
    content:'\f053';
    font-family: 'Font Awesome 5 Pro';
  }
}