.datepicker {
  margin-bottom: 10px; }
  .datepicker button {
    border: none;
    background-color: transparent; }
  .datepicker.datepicker-dropdown-menu {
    position: absolute;
    z-index: 1000;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    margin: 2px 0;
    padding: 4px; }
    .datepicker.datepicker-dropdown-menu:before {
      content: '';
      display: inline-block;
      position: absolute;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid #ccc;
      border-bottom-color: rgba(0, 0, 0, 0.2);
      top: -7px;
      left: 7px; }
    .datepicker.datepicker-dropdown-menu:after {
      content: '';
      display: inline-block;
      position: absolute;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid white;
      top: -6px;
      left: 8px; }

.datepicker-content {
  display: grid;
  grid-template-areas: "header" "days-of-week" "days" "footer"; }
  .datepicker-content .datepicker-header {
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-areas: "prev header next";
    justify-items: stretch;
    align-items: center;
    font-weight: bold;
    border-top: 1px solid #dee2e6; }
    .datepicker-content .datepicker-header > .next, .datepicker-content .datepicker-header > .prev, .datepicker-content .datepicker-header > .header-text {
      text-align: center;
      border-radius: 0.25rem;
      padding: 0.1rem; }
      .datepicker-content .datepicker-header > .next:hover:not(.disabled):not(.active):not(.header-text-no-action), .datepicker-content .datepicker-header > .prev:hover:not(.disabled):not(.active):not(.header-text-no-action), .datepicker-content .datepicker-header > .header-text:hover:not(.disabled):not(.active):not(.header-text-no-action) {
        background: #e9ecef;
        cursor: pointer; }
    .datepicker-content .datepicker-header .prev {
      grid-area: prev; }
    .datepicker-content .datepicker-header .month-year, .datepicker-content .datepicker-header .year {
      grid-area: header; }
    .datepicker-content .datepicker-header .next {
      grid-area: next; }
    .datepicker-content .datepicker-header .prev, .datepicker-content .datepicker-header .next {
      user-select: none; }
    .datepicker-content .datepicker-header .header-text {
      font-weight: bold; }
  .datepicker-content .datepicker-days-of-week {
    grid-area: days-of-week;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    justify-items: stretch;
    align-items: center;
    font-weight: bold;
    border-top: 2px solid #dee2e6;
    border-bottom: 1px solid #dee2e6; }
    .datepicker-content .datepicker-days-of-week .dow {
      text-align: center; }
  .datepicker-content .day.old, .datepicker-content .day.new, .datepicker-content .month.old, .datepicker-content .month.new, .datepicker-content .year.old, .datepicker-content .year.new, .datepicker-content .decade.old, .datepicker-content .decade.new {
    color: #6c757d; }
  .datepicker-content .day:hover:not(.disabled):not(.active), .datepicker-content .month:hover:not(.disabled):not(.active), .datepicker-content .year:hover:not(.disabled):not(.active), .datepicker-content .decade:hover:not(.disabled):not(.active) {
    background-color: #e9ecef; }
  .datepicker-content .day:hover:not(.disabled), .datepicker-content .month:hover:not(.disabled), .datepicker-content .year:hover:not(.disabled), .datepicker-content .decade:hover:not(.disabled) {
    cursor: pointer; }
  .datepicker-content .day.active, .datepicker-content .month.active, .datepicker-content .year.active, .datepicker-content .decade.active {
    background-color: #007bff;
    color: #fff; }
  .datepicker-content .days {
    grid-area: days;
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(7, 1fr);
    justify-items: stretch;
    align-items: center; }
    .datepicker-content .days .day-wrapper {
      border-top: 1px solid #dee2e6; }
    .datepicker-content .days .day {
      border-radius: 0.25rem;
      text-align: center;
      padding: 0.3rem;
      width: 100%; }
      .datepicker-content .days .day.today {
        position: relative; }
        .datepicker-content .days .day.today:before {
          content: '';
          display: inline-block;
          border: solid transparent;
          border-width: 0 0 7px 7px;
          border-bottom-color: #007bff;
          border-top-color: rgba(0, 0, 0, 0.2);
          position: absolute;
          bottom: 4px;
          right: 4px; }
      .datepicker-content .days .day.active.today:before {
        border-bottom-color: #fff; }
  .datepicker-content .disabled {
    background: none;
    color: #6c757d;
    cursor: not-allowed; }
  .datepicker-content .datepicker-footer {
    grid-area: footer;
    margin-top: 2px;
    display: flex;
    justify-content: space-around; }
    .datepicker-content .datepicker-footer > button {
      flex-grow: 1;
      text-align: center;
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 5px;
      padding: 0.22rem;
      background-color: white; }
      .datepicker-content .datepicker-footer > button:not(:last-of-type) {
        margin-right: 10px; }
      .datepicker-content .datepicker-footer > button:hover:not(.disabled) {
        background-color: #e9ecef;
        cursor: pointer; }
  .datepicker-content .months, .datepicker-content .years, .datepicker-content .decades {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(4, 1fr);
    justify-items: stretch;
    align-items: center; }
    .datepicker-content .months .month, .datepicker-content .months .year, .datepicker-content .months .decade, .datepicker-content .years .month, .datepicker-content .years .year, .datepicker-content .years .decade, .datepicker-content .decades .month, .datepicker-content .decades .year, .datepicker-content .decades .decade {
      border-radius: 0.25rem;
      text-align: center;
      padding: 1rem 0.3rem; }

.datepicker-content-show-week-numbers .datepicker-days {
  display: grid;
  grid-template-areas: ". header" "days-of-week days-of-week" "week-numbers days" ". footer";
  grid-template-columns: 1fr 7fr; }

.datepicker-content-show-week-numbers .datepicker-days-of-week {
  grid-template-columns: repeat(8, 1fr); }

.datepicker-content-show-week-numbers .week-numbers {
  grid-area: week-numbers; }
  .datepicker-content-show-week-numbers .week-numbers .week-number {
    color: red;
    border-radius: 0.25rem;
    text-align: center;
    padding: 0.3rem;
    width: 100%;
    border-top: 1px solid #dee2e6; }