.df-calendar {
  width: calc(100% - 32px);
  height: 100%;
  margin: 0 16px 12px 16px;
  --blue-bg: rgba(22, 119, 255, 0.1);
  --green-bg: rgba(15, 185, 100, 0.1);
  --color: #1f1f1f;
}
.df-calendar.dark {
  --blue-bg: rgba(0, 157, 255, 0.2);
  --green-bg: rgba(19, 249, 122, 0.2);
  --color: #ffffff;
}
.df-calendar-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 12px;
  height: 28px;
  gap: 16px;
  color: var(--color);
}
.df-calendar-head-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  color: var(--color);
}
.df-calendar-head-item img {
  width: 16px;
  height: 16px;
  display: inline-block;
}
.df-calendar-head-item.blueBg {
  height: 28px;
  line-height: 28px;
  padding: 0 8px;
  background: var(--blue-bg);
  border-radius: 8px;
}
.df-calendar-head-item.greenBg {
  height: 28px;
  line-height: 28px;
  padding: 0 8px;
  background: var(--green-bg);
  border-radius: 8px;
}
.df-calendar-content {
  width: 100%;
  height: 520px;
  padding-right: 16px;
}
.df-calendar-content .ant-picker-calendar .ant-picker-body,
.df-calendar-content .ant-picker-calendar-full .ant-picker-body {
  border: unset;
}
.df-calendar-content .ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-content {
  overflow: unset;
}
.df-calendar-content .ant-picker-calendar-full .ant-picker-panel .ant-picker-cell-selected .ant-picker-calendar-date {
  background: transparent;
}
.df-calendar-cell {
  position: relative;
}
.df-calendar-cell-head {
  position: absolute;
  left: 0;
  top: -34px;
}
.df-calendar-cell-head img {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
