.ui-datepicker {
  border: 1px solid var(--dark) !important;

  .ui-datepicker-header {
    border-color: var(--darker);

    select {
      background-color: var(--dark) !important;
    }
  }

  .ui-datepicker-calendar {
    border-color: var(--darker);

    thead {
      border-color: var(--darker);

      th {
        border-color: var(--darker);
      }
    }

    tbody {

      tr {

        td {

          .ui-state-default {
            color: var(--light-transparent) !important;
            background-color: var(--dark) !important;
          }

          .ui-state-hover {
            background-color: var(--darker) !important;
          }
        }
      }
    }
  }
}


#inputCalendarFrom, #inputCalendarTo {
  background-color: var(--dark);
}