.sf-datetimepicker .sf-calendar {
  border: none;
}
.sf-datetimepicker.sf-popup {
  background-color: rgba(var(--sf-color-surface));
  border: 1px solid rgba(var(--sf-color-outline-variant));
  border-radius: var(--sf-radius-8);
}
.sf-datetimepicker.sf-popup .sf-datetimepicker-footer {
  background-color: rgba(var(--sf-color-surface));
}
.sf-datetimepicker .sf-timepicker-list.sf-ul {
  border: none;
  border-radius: 0;
  border-block: 1px solid rgba(var(--sf-color-outline-variant));
  min-width: calc(var(--sf-spacing) * 20);
  max-height: calc(var(--sf-spacing) * 18);
}
.sf-datetimepicker-tab {
  padding: var(--sf-spacing-12) var(--sf-spacing-12);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sf-datetimepicker-tab .date {
  border-start-start-radius: var(--sf-radius-6);
  border-end-start-radius: var(--sf-radius-6);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.sf-datetimepicker-tab .time {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--sf-radius-6);
  border-end-end-radius: var(--sf-radius-6);
}
.sf-datetimepicker-tab .sf-btn-secondary {
  border-color: rgb(var(--sf-color-outline-variant));
}
.sf-datetimepicker-tab .sf-btn-primary.sf-active {
  box-shadow: none;
}
.sf-datetimepicker-footer {
  padding: var(--sf-spacing-12) var(--sf-spacing-12);
  display: flex;
  justify-content: space-between;
}
.sf-datetimepicker-toolbar {
  color: rgba(var(--sf-color-on-surface));
  font-weight: var(--sf-font-weight-medium);
  padding: var(--sf-spacing-8) var(--sf-spacing-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
}