.calendar-component {
  position: relative;
}
.calendar-component .datepicker-inline {
  width: 338px;
}
.datepicker,
.datepicker-inline {
  padding: 0 !important;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  border: none !important;
  border-radius: var(--border-radius-md) !important;
}
.table-condensed thead > tr:nth-child(2) {
  border-bottom: 0.5px solid var(--color-foreground-foreground-disabled);
}
.table-condensed {
  width: 338px;
}
.datepicker td.today .day-cell {
  background: none !important;
  color: var(--color-foreground-foreground-brand-default) !important;
}
.datepicker table tr td.active.active,
.datepicker table tr td.day:focus {
  background: transparent !important;
  color: var(--color-foreground-foreground-on-hover) !important;
}
.datepicker table tr td.day.active.active:not(.today) span,
.datepicker table tr td.day:focus:not(.today) span,
.datepicker table tr td.day.active.active:not(.today), 
.datepicker table tr td.day:focus {
  background-image: none !important;
  background-color: var(--color-foreground-foreground-brand-default) !important;
  border-radius: var(--border-radius-rounded);
  text-align: center;
  padding: var(--space-xxs);
  width: 32px;
  height: 32px;
} 
#calendarComponent .datepicker-days table {
  table-layout: fixed !important;
  width: 100% !important;
}
#calendarComponent .datepicker-days td,
#calendarComponent .datepicker-days th {
  width: 20px !important;      
  height: 20px !important;   
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 6px var(--space-xxs) !important; 
  background: transparent;
}
#calendarComponent table tr td span.day-cell {
  display: inline-flex; /* or block/inline-block */
  justify-content: center;  /* center horizontally */
  align-items: center;      /* center vertically */
  width: 32px;              /* fixed width */
  height: 32px;             /* fixed height */
  user-select: none;        /* optional */
  margin: 0 auto;           /* center inside the td */
  box-sizing: border-box; ;
  float: none;
  line-height: var(--typography-line-height-heading5-md);
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-rounded);
}
.datepicker table tr td.day:hover,
.datepicker table tr td span:hover {
  background: transparent !important;
}
.datepicker .datepicker-switch {
  font-size: var(--typography-font-size-heading5-sm);
  line-height: var(--typography-line-height-heading5-md);
  position: relative;
}
.datepicker td, 
.datepicker th {
  font-size: var(--typography-font-size-body2-sm);
  line-height: var(--typography-line-height-heading5-sm);
  padding: 10px var(--space-md);
}
.datepicker td:first-of-type,
.datepicker td:last-of-type {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
.datepicker .next,
.datepicker .next:hover {
  background: url(./assets/icons/right-chevron.svg) no-repeat center !important;
  width: 32px;
  font-size: 0;
}
.datepicker .prev,
.datepicker .prev:hover {
  background: url(./assets/icons/left-chevron.svg) no-repeat center !important;
  width: 32px;
  font-size: 0;
}
.datepicker table tr td.new, 
.datepicker table tr td.old {
  color: var(--color-foreground-foreground-on-disabled);
}
.datepicker .datepicker-switch:hover {
  background: transparent !important;
}
.datepicker table tr td.event-day {
  position: relative;
}
.datepicker table tr td.day {
  color: var(--color-foreground-foreground-on-disabled);
  font-weight: var(--font-weight-label3);
}
.datepicker table tr td.event-day {
  color: var(--color-foreground-foreground-default);
}
th.datepicker-switch::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-foreground-foreground-default);
  margin-left: var(--space-xxs);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.datepicker table tr td span.active.active {
  background-color: var(--color-foreground-foreground-brand-default) !important; 
  background-image: none;
}
.datepicker .old.day span {
  color: var(--color-surface-surface-default-active);
  font-weight: var(--font-weight-regular);
}
.datepicker .day:not(.event-day) {
  pointer-events: none;
}
@media screen and (max-width: 960px) {
  .calendar-component {
    justify-content: center;
  }
}