.sf-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: calc(var(--sf-spacing) * 31.25);
  padding: var(--sf-spacing-8) var(--sf-spacing-12);
  position: relative;
}
.sf-calendar-header .sf-radius-full {
  border-radius: var(--sf-radius-full);
}
.sf-calendar-header .sf-calendar-title {
  font-weight: var(--sf-font-weight-medium);
  font-size: var(--sf-font-size-sm);
  line-height: var(--sf-line-height-sm);
  letter-spacing: var(--sf-letter-spacing-wide);
}
.sf-calendar-decade .sf-calendar-title {
  cursor: default;
}
.sf-calendar-icon {
  display: flex;
  align-items: center;
  gap: var(--sf-spacing-8);
}
.sf-calendar-content-table {
  padding: var(--sf-spacing-0) var(--sf-spacing-8) var(--sf-spacing-8) var(--sf-spacing-8);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
}
.sf-calendar .sf-cell {
  cursor: pointer;
  text-align: center;
}
.sf-calendar-month .sf-cell {
  height: var(--sf-spacing-40);
  padding: var(--sf-spacing-2);
}
.sf-calendar .sf-day {
  height: var(--sf-spacing-40);
  line-height: var(--sf-spacing-40);
  width: var(--sf-spacing-40);
  display: inline-block;
  font-size: var(--sf-font-size-sm);
}
.sf-calendar-year .sf-day,
.sf-calendar-decade .sf-day {
  display: inline-block;
  font-size: var(--sf-font-size-sm);
  font-weight: normal;
  height: var(--sf-spacing-72);
  line-height: var(--sf-spacing-72);
  width: var(--sf-spacing-72);
  white-space: nowrap;
}
.sf-calendar-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: var(--sf-spacing-8) var(--sf-spacing-12);
}
.sf-calendar {
  border-radius: var(--sf-radius-8);
  display: block;
  overflow: auto;
  user-select: none;
  min-width: 300px;
  width: calc(var(--sf-spacing) * 20);
}
.sf-calendar .sf-week-header {
  cursor: default;
  font-size: var(--sf-font-size-sm);
  font-weight: normal;
  text-align: center;
  height: var(--sf-spacing-40);
  text-transform: none;
  border-bottom: 0;
}
.sf-calendar .sf-calendar-toolbar {
  overflow-wrap: break-word;
  padding: var(--sf-spacing-24);
  font-size: var(--sf-font-size-2xl);
  font-weight: var(--sf-font-weight-medium);
  min-width: 150px;
}
.sf-calendar.sf-orientation {
  display: flex;
  min-width: 300px;
  width: calc(var(--sf-spacing) * 30.25);
}
.sf-calendar.sf-week-number {
  width: calc(var(--sf-spacing) * 22.75);
}
.sf-calendar-header-lg {
  max-width: 100%;
  min-width: calc(var(--sf-spacing) * 33.75);
}
.sf-calendar-header-lg.sf-week-number {
  min-width: calc(var(--sf-spacing) * 37.8125);
}
.sf-calendar-header-lg.sf-orientation {
  min-width: calc(var(--sf-spacing) * 43.125);
}
.sf-calendar-header-lg.sf-orientation.sf-week-number {
  min-width: calc(var(--sf-spacing) * 46.875);
}
.sf-calendar-content-table:focus-within .sf-selected.sf-focused-date .sf-day,
.sf-calendar-content-table:focus-within .sf-focused-date .sf-day {
  box-shadow: 0 0 0 1px rgba(var(--sf-color-primary));
}
.sf-calendar-toolbar {
  background: linear-gradient(0deg, rgba(var(--sf-color-primary), 0.05), rgba(var(--sf-color-primary), 0.05)), rgba(var(--sf-color-surface));
}
.sf-calendar {
  background: linear-gradient(0deg, rgba(var(--sf-color-surface), 1), rgba(var(--sf-color-surface), 1)), rgba(var(--sf-color-surface));
  border: 1px solid rgba(var(--sf-color-outline-variant));
  box-shadow: none;
}
.sf-calendar .sf-in-range:not(.sf-other-month):not(.sf-selected) {
  background: linear-gradient(0deg, rgba(var(--sf-color-primary), 0.08), rgba(var(--sf-color-primary), 0.08)), rgba(var(--sf-color-surface));
}
.sf-calendar .sf-day {
  color: rgba(var(--sf-color-on-surface));
}
.sf-calendar .sf-other-year .sf-day,
.sf-calendar .sf-other-month:not(.sf-selected) .sf-day {
  color: rgba(var(--sf-color-on-surface-variant), 0.84);
}
.sf-calendar .sf-focused-date .sf-day {
  background: rgba(var(--sf-color-on-surface), 0.1);
  border: none;
  border-radius: var(--sf-radius-full);
  color: rgba(var(--sf-color-on-surface));
}
.sf-calendar .sf-focused-date.sf-selected-date {
  box-shadow: 0 0 0 1px rgba(var(--sf-color-primary));
}
.sf-calendar .sf-cell:hover .sf-day {
  background: rgba(var(--sf-color-on-surface), 0.1);
  border: none;
  border-radius: var(--sf-radius-full);
  color: rgba(var(--sf-color-on-surface));
}
.sf-calendar .sf-cell:focus .sf-day {
  background: rgba(var(--sf-color-primary));
  color: rgba(var(--sf-color-on-primary));
  border: none;
  border-radius: var(--sf-radius-full);
}
.sf-calendar .sf-cell:active .sf-day {
  background: rgba(var(--sf-color-on-surface), 0.1);
  color: rgb(var(--sf-color-on-surface));
  border: none;
  border-radius: var(--sf-radius-full);
}
.sf-calendar .sf-today .sf-day {
  background: transparent;
  border: 1px solid rgba(var(--sf-color-primary));
  border-radius: var(--sf-radius-full);
  box-shadow: none;
  color: rgba(var(--sf-color-primary));
}
.sf-calendar .sf-today:hover .sf-day, .sf-calendar .sf-today:focus .sf-day, .sf-calendar .sf-today.sf-focused-date:not(.sf-selected) .sf-day {
  background: rgba(var(--sf-color-primary), 0.08);
  border: 1px solid rgba(var(--sf-color-primary));
  border-radius: var(--sf-radius-full);
  box-shadow: none;
  color: rgba(var(--sf-color-primary));
}
.sf-calendar .sf-today:active .sf-day {
  background: rgba(var(--sf-color-primary), 0.08);
  color: rgba(var(--sf-color-primary));
  border-radius: var(--sf-radius-full);
}
.sf-calendar .sf-selected .sf-day {
  background: rgba(var(--sf-color-primary));
  border: 1px solid rgba(var(--sf-color-primary));
  border-radius: var(--sf-radius-full);
  box-shadow: none;
  color: rgba(var(--sf-color-on-primary));
}
.sf-calendar .sf-selected:hover .sf-day, .sf-calendar .sf-selected.sf-focused-date .sf-day {
  background: rgba(var(--sf-color-primary));
  color: rgba(var(--sf-color-on-primary));
  border: 1px solid rgba(var(--sf-color-primary));
  box-shadow: none;
}
.sf-calendar .sf-selected:active .sf-day {
  background: rgba(var(--sf-color-primary));
  color: rgba(var(--sf-color-on-primary));
  border: 1px solid rgba(var(--sf-color-primary));
  box-shadow: none;
}
.sf-calendar .sf-week-number {
  color: rgba(var(--sf-color-on-surface-variant), 0.84);
}
.sf-calendar .sf-week-header {
  color: rgba(var(--sf-color-on-surface));
}
.sf-calendar .sf-zoomin {
  animation: ZoomIn 0.3s;
}
.sf-calendar .sf-calendar-footer {
  background: transparent;
  border-top: none;
}
.sf-calendar .sf-disabled {
  opacity: 1;
}
.sf-calendar .sf-disabled.sf-cell .sf-day, .sf-calendar .sf-disabled.sf-other-month .sf-day, .sf-calendar .sf-disabled.sf-focused-date .sf-day {
  color: rgba(var(--sf-color-on-surface), 0.38);
}
.sf-calendar .sf-disabled.sf-today .sf-day {
  border: 1px solid rgb(var(--sf-color-primary));
}
.sf-calendar .sf-calendar-title {
  color: rgba(var(--sf-color-on-surface));
}
.sf-calendar .sf-calendar-title:hover, .sf-calendar .sf-calendar-title:active, .sf-calendar .sf-calendar-title:focus, .sf-calendar .sf-calendar-title:focus-visible {
  color: rgba(var(--sf-color-on-surface));
}
.sf-datepicker.sf-popup {
  display: flex;
  box-shadow: var(--sf-elevation-3);
  border-radius: var(--sf-spacing-8);
  overflow-y: hidden;
  pointer-events: auto;
}
.sf-picker-popup {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  max-height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1002;
}
.sf-picker-popup .sf-overlay {
  position: absolute;
}
.sf-timepicker-list {
  overflow: auto;
  width: 100%;
  padding: 0;
  margin: 0;
}
.sf-timepicker-list.sf-ul {
  width: auto;
  border-radius: var(--sf-spacing-4);
}
.sf-timepicker-list-sm {
  min-width: calc(var(--sf-spacing) * 18.75);
  max-height: calc(var(--sf-spacing) * 10.5);
  font-size: var(--sf-font-size-sm);
}
.sf-timepicker-list-sm .sf-timepicker-item {
  height: var(--sf-spacing-32);
  line-height: var(--sf-spacing-32);
}
.sf-timepicker-list-me {
  min-width: calc(var(--sf-spacing) * 18.75);
  max-height: calc(var(--sf-spacing) * 13);
  font-size: var(--sf-font-size-base);
}
.sf-timepicker-list-me .sf-timepicker-item {
  height: var(--sf-spacing-40);
  line-height: var(--sf-spacing-40);
}
.sf-timepicker-list-la {
  min-width: calc(var(--sf-spacing) * 18.75);
  max-height: calc(var(--sf-spacing) * 15.5);
  font-size: var(--sf-font-size-base);
}
.sf-timepicker-list-la .sf-timepicker-item {
  height: calc(var(--sf-spacing) * 3);
  line-height: calc(var(--sf-spacing) * 3);
}
.sf-timepicker-list-la.sf-ul {
  border-radius: var(--sf-radius-4);
}
.sf-timepicker-item {
  cursor: default;
  font-size: var(--sf-spacing-16);
  font-weight: calc(var(--sf-spacing) * 31.25);
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
  text-indent: var(--sf-spacing-16);
}
.sf-timepicker-item:hover {
  cursor: pointer;
}
.sf-timepicker-mob {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: rgba(var(--sf-color-surface), 1);
}
.sf-timepicker-mob .sf-ul {
  max-height: none;
  height: auto;
  padding: 0;
  margin: 0;
}
.sf-timepicker-header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--sf-spacing-8);
  padding: var(--sf-spacing-16) var(--sf-spacing-0) var(--sf-spacing-16) var(--sf-spacing-12);
  background: linear-gradient(0deg, rgba(var(--sf-color-primary), 0.05), rgba(var(--sf-color-primary), 0.05)), rgba(var(--sf-color-surface));
}
.sf-timepicker-title {
  font-size: var(--sf-font-size-base);
  color: var(--sf-color-on-surface-variant);
}
.sf-timepicker.sf-popup {
  border: 1px solid rgb(var(--sf-color-outline-variant));
  border-radius: var(--sf-spacing-4);
  box-shadow: var(--sf-elevation-2);
  overflow: hidden;
}
.sf-timepicker-list {
  background: linear-gradient(0deg, rgba(var(--sf-color-surface), 1), rgba(var(--sf-color-surface), 1)), rgba(var(--sf-color-surface));
}
.sf-timepicker-item {
  border: none;
  color: rgba(var(--sf-color-on-surface));
}
.sf-timepicker-item:hover {
  background: rgba(var(--sf-color-on-surface), 0.05);
}
.sf-timepicker-item:focus, .sf-timepicker-item.sf-focus {
  background: rgba(var(--sf-color-on-surface), 0.04);
}
.sf-timepicker-item:active {
  background: rgba(var(--sf-color-on-surface), 0.08);
}
.sf-timepicker-item.sf-active {
  background: rgba(var(--sf-color-primary-container), 1);
  color: var(--sf-color-on-surface);
}
.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;
}
.sf-daterangepicker .sf-calendar {
  border: none;
}
.sf-daterangepicker.sf-popup {
  background: rgba(var(--sf-color-surface));
  border: 1px solid rgba(var(--sf-color-outline-variant));
  border-radius: var(--sf-radius-8);
  box-shadow: rgba(var(--sf-elevation-2));
}
.sf-daterangepicker-header,
.sf-daterangepicker-tab {
  padding: var(--sf-spacing-16);
  color: rgba(var(--sf-color-on-surface));
  background: rgba(var(--sf-color-surface));
}
.sf-daterangepicker-tab {
  display: flex;
  justify-content: space-between;
}
.sf-daterange-selected-days {
  display: flex;
  flex-direction: column;
  text-align: center;
  color: rgba(var(--sf-color-on-surface-variant));
  background: rgba(var(--sf-color-surface));
}
.sf-daterange-label {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--sf-spacing-12);
  text-align: center;
  line-height: var(--sf-letter-spacing-wide);
  font-weight: var(--sf-font-weight-medium);
}
.sf-date-range-container {
  float: inline-start;
}
.sf-daterangepicker-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sf-spacing-12);
  padding: var(--sf-spacing-12) var(--sf-spacing-12);
  clear: both;
  background: rgba(var(--sf-color-surface));
}
.sf-picker-popup .sf-daterangepicker-footer {
  justify-content: space-between;
}
.sf-preset .sf-date-range-container {
  border-inline-end: 1px solid rgba(var(--sf-color-outline-variant));
}
.sf-preset .sf-daterangepicker-footer {
  border-top: 1px solid rgba(var(--sf-color-outline-variant));
}