/*!
 * cxCalendar
 * ------------------------------ */
.cxcalendar {
  --cxcalendar-bg: #fff;
  --cxcalendar-border: #ccc;
  --cxcalendar-item-bg: #eee;

  --cxcalendar-text-color: #333;
  --cxcalendar-days-color: #666;
  --cxcalendar-sat-color: #4a89dc;
  --cxcalendar-sun-color: #da4453;
  --cxcalendar-other-color: #ccc;
  --cxcalendar-note-color: #aaa;

  --cxcalendar-now-bg: #f3f3f3;
  --cxcalendar-set-bg: #8cc152;
  --cxcalendar-range-bg: #dceffc;
  --cxcalendar-range-set-bg: #70a9ce;

  --cxcalendar-btn-color: #fff;
  --cxcalendar-btn-bg: #666;
  --cxcalendar-confirm-bg: #4a89dc;

  --cxcalendar-gap-out: 8px;

  --cxcalendar-text-size: 14px;
  --cxcalendar-title-size: 16px;
  --cxcalendar-unit-size: 10px;
  --cxcalendar-btn-size: 12px;

  position: absolute;
  z-index: 10000;
  top: -999px;
  left: -999px;
  width: 266px;
  border: 1px solid var(--cxcalendar-border);
  border-radius: 3px;
  background-color: var(--cxcalendar-bg);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
  color: var(--cxcalendar-text-color);
  font-size: var(--cxcalendar-text-size);
  opacity: 0;
  transform: translate(0, 5%);
  transition-property: opacity, transform;
  transition-duration: 0.3s;
  -webkit-user-select: none;
  user-select: none;
}

/* 背景遮罩层 */
.cxcalendar_mask {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
}

.cxcalendar.show {
  opacity: 1;
  transform: translate(0, 0);
}
.cxcalendar.show + .cxcalendar_mask {
  display: block;
}

.cxcalendar_hd {
  position: relative;
  height: 32px;
  padding: var(--cxcalendar-gap-out);
  padding-bottom: 0;
  font-weight: bold;
  font-size: var(--cxcalendar-title-size);
  line-height: 32px;
  text-align: center;
}

/* 上、下月切换按钮 */
.cxcalendar_hd .prev,
.cxcalendar_hd .next {
  position: absolute;
  top: var(--cxcalendar-gap-out);
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--cxcalendar-text-color);
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  outline: 0;
  transition-property: border-color, background-color;
  transition-duration: 0.2s;
}

.cxcalendar_hd .prev {
  left: var(--cxcalendar-gap-out);
}
.cxcalendar_hd .next {
  right: var(--cxcalendar-gap-out);
}

.cxcalendar_hd .prev:before,
.cxcalendar_hd .next:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -6px 0 0 -5px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.cxcalendar_hd .prev:before {
  border-right: 10px solid currentColor;
}
.cxcalendar_hd .next:before {
  border-left: 10px solid currentColor;
}

/* 年、月、时间选框 */
.cxcalendar_hd select,
.cxcalendar_bd .times select {
  display: inline-block;
  box-sizing: border-box;
  height: 32px;
  margin: 0;
  padding: 0 0.5em;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: var(--cxcalendar-text-color);
  font-weight: bold;
  font-size: var(--cxcalendar-title-size);
  line-height: 32px;
  text-align: center;
  vertical-align: top;
  outline: none;
  cursor: pointer;
  transition-property: border-color, background-color;
  transition-duration: 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.cxcalendar_hd em {
  display: inline-block;
  padding: 0 1px;
  font-style: normal;
}
.cxcalendar_hd .year + em:after {
  content: '年';
}
.cxcalendar_hd .month + em:after {
  content: '月';
}

/* 次面板 */
.cxcalendar_hd .fill {
  font-weight: normal;
  font-size: var(--cxcalendar-text-size);
}
.cxcalendar_hd .fill span {
  padding:0 4px;
}

.cxcalendar_hd .prev:hover,
.cxcalendar_hd .next:hover,
.cxcalendar_hd select:hover,
.cxcalendar_bd .times select:hover {
  border-color: var(--cxcalendar-border);
  background: var(--cxcalendar-item-bg);
}

/* 日期 */
.cxcalendar_bd {
  position: relative;
  padding: var(--cxcalendar-gap-out);
  padding-top: 0;
  z-index: 1;
}

.cxcalendar_bd ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--cxcalendar-days-color);
  line-height: 32px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
}

.cxcalendar_bd ul li {
  box-sizing: border-box;
  position: relative;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--cxcalendar-bg);
  border-radius: 5px;
  cursor: pointer;
  flex: none;
  transition-property: background-color, color;
  transition-duration: 0.2s;
}

.cxcalendar_bd ul li.week,
.cxcalendar_bd ul li.del {
  cursor: default;
}
.cxcalendar_bd ul li.del.sat,
.cxcalendar_bd ul li.del.sun,
.cxcalendar_bd ul li.del.now,
.cxcalendar_bd ul li.del.holiday,
.cxcalendar_bd ul li.del {
  color: var(--cxcalendar-other-color);
  text-decoration: line-through;
}

.cxcalendar_bd ul li.now {
  background-color: var(--cxcalendar-now-bg);
}
.cxcalendar_bd ul li.now.del,
.cxcalendar_bd ul li.week:hover,
.cxcalendar_bd ul li.del:hover {
  background: none;
}

.cxcalendar_bd ul li:hover {
  background-color: var(--cxcalendar-item-bg);
}

.cxcalendar_bd ul li.selected,
.cxcalendar_bd ul li.selected.sat,
.cxcalendar_bd ul li.selected.sun,
.cxcalendar_bd ul li.selected.holiday,
.cxcalendar_bd ul li.selected.other,
.cxcalendar_bd ul li.selected:hover {
  background-color: var(--cxcalendar-set-bg);
  color: var(--cxcalendar-btn-color);
}

.cxcalendar_bd ul li.del:after,
.cxcalendar_bd ul li.selected:after {
  color: inherit;
}

/* 日期列表 */
.cxcalendar_bd .days li {
  flex-basis: 14%;
}

.cxcalendar_bd .days .sat {
  color: var(--cxcalendar-sat-color);
}
.cxcalendar_bd .days .sun,
.cxcalendar_bd .days .holiday {
  color: var(--cxcalendar-sun-color);
}
.cxcalendar_bd .days .other {
  color: var(--cxcalendar-other-color);
}

/* 星期标题 */
.cxcalendar_bd .days li.week.sat,
.cxcalendar_bd .days li.week.sun {
  color: inherit;
}

/* 月份、年份列表 */
.cxcalendar_bd .months li {
  flex-basis: 33%;
}
.cxcalendar_bd .years li {
  flex-basis: 25%;
}

.cxcalendar_bd .months li:after,
.cxcalendar_bd .years li:after {
  content: '月';
  display: inline-block;
  margin-left: 2px;
  color: var(--cxcalendar-note-color);
  font-size: var(--cxcalendar-unit-size);
  vertical-align: top;
}
.cxcalendar_bd .years li:after {
  content: '年';
}

/* 时间 */
.cxcalendar_bd .times {
  position: relative;
  margin-top: var(--cxcalendar-gap-out);
  padding-top: var(--cxcalendar-gap-out);
  color: var(--cxcalendar-note-color);
  line-height: 32px;
  display: flex;
}
.cxcalendar_bd .times:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 15%, rgba(0, 0, 0, 0.1) 85%, rgba(0, 0, 0, 0) 100%);
}
.cxcalendar_bd .times:only-child:before {
  display: none;
}

.cxcalendar_bd .times section {
  flex: 1;
  display: flex;
  justify-content: center;
}
.cxcalendar_bd .times section:before {
  content: '选择时间';
  margin-right: 0.5em;
}

.cxcalendar_bd .times select {
  font-weight: normal;
  font-size: var(--cxcalendar-text-size);
}
.cxcalendar_bd .times i {
  padding: 0 1px;
  font-style: normal;
}
.cxcalendar_bd .times i:after {
  content: ':';
}

/* 快捷操作 */
.cxcalendar_acts {
  padding: var(--cxcalendar-gap-out) 0;
  border-top: 1px solid var(--cxcalendar-border);
  border-radius: 0 0 3px 3px;
  background-color: var(--cxcalendar-item-bg);
  font-size: var(--cxcalendar-btn-size);
  line-height: 30px;
  display: flex;
  justify-content: center;
}

.cxcalendar_acts a {
  padding: 0 1em;
  border-radius: 3px;
  background-color: var(--cxcalendar-btn-bg);
  color: var(--cxcalendar-btn-color);
  text-decoration: none;
  text-align: center;
  transition-property: opacity;
  transition-duration: 0.2s;
}
.cxcalendar_acts a + a {
  margin-left: 1em;
}
.cxcalendar_acts a:hover {
  color: var(--cxcalendar-btn-color);
  opacity: 0.8;
}

.cxcalendar_acts .today:before {
  content: '今天';
}
.cxcalendar_acts .clear:before {
  content: '清除';
}
.cxcalendar_acts .confirm {
  background-color: var(--cxcalendar-confirm-bg);
}
.cxcalendar_acts .confirm:before {
  content: '确定';
}


/* 不同日期类型 */
.cxcalendar.m_time .cxcalendar_acts .today:before,
.cxcalendar.m_datetime .cxcalendar_acts .today:before {
  content: '现在';
}
.cxcalendar.m_year .cxcalendar_acts .today:before {
  content: '今年';
}
.cxcalendar.m_month .cxcalendar_acts .today:before {
  content: '本月';
}

/* 始末状态 */
.cxcalendar.at_start .cxcalendar_hd .prev,
.cxcalendar.at_end .cxcalendar_hd .next {
  color: var(--cxcalendar-other-color);
  cursor: default;
}
.cxcalendar.at_start .cxcalendar_hd .prev:hover,
.cxcalendar.at_end .cxcalendar_hd .next:hover {
  border-color: transparent;
  background: none;
}


/* 范围模式 */
.cxcalendar.range {
  width: 524px;
}
.cxcalendar.range .cxcalendar_hd,
.cxcalendar.range .cxcalendar_bd .days,
.cxcalendar.range .cxcalendar_bd .months,
.cxcalendar.range .cxcalendar_bd .years {
  display: flex;
}
.cxcalendar.range .cxcalendar_hd section,
.cxcalendar.range .cxcalendar_bd ul {
  flex: 1;
}
.cxcalendar.range .cxcalendar_bd ul + ul {
  margin-left: var(--cxcalendar-gap-out);
}
.cxcalendar.range .cxcalendar_bd ul + ul:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 35%, rgba(0, 0, 0, 0.1) 65%, rgba(0, 0, 0, 0) 100%);
}
.cxcalendar.range .cxcalendar_bd ul li.other{visibility:hidden;}
.cxcalendar.range .cxcalendar_bd ul li.selected {
  background-color: var(--cxcalendar-range-bg);
  color: var(--cxcalendar-days-color);
}
.cxcalendar.range .cxcalendar_bd ul li.selected.start,
.cxcalendar.range .cxcalendar_bd ul li.selected.end {
  background-color: var(--cxcalendar-range-set-bg);
  color: var(--cxcalendar-btn-color);
}
.cxcalendar.range .cxcalendar_bd .times section:nth-child(1):before {
  content: '开始时间';
}
.cxcalendar.range .cxcalendar_bd .times section:nth-child(2):before {
  content: '结束时间';
}


/* 固定位置 */
.cxcalendar.fixed {
  position: fixed;
  top: auto;
  bottom: -500px;
  left: 0;
  right: 0;
  width: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition-property: bottom;
}
.cxcalendar.fixed + .cxcalendar_mask {
  display: block;
  background-color: rgba(0, 0, 0, 0);
  transform: translate(0, -100%);
  transition-property: background-color, transform;
  transition-duration: 0.3s, 0s;
  transition-delay: 0s, 0.3s;
}

.cxcalendar.fixed.show {
  bottom: 0;
}
.cxcalendar.fixed.show + .cxcalendar_mask {
  background-color: rgba(0, 0, 0, 0.4);
  transform: translate(0, 0);
  transition-delay: 0s;
}

.cxcalendar.fixed .cxcalendar_hd section:nth-child(2),
.cxcalendar.fixed .cxcalendar_bd ul:nth-child(2) {
  display: none;
}
.cxcalendar.fixed .cxcalendar_bd .times {
  display: block;
}

.cxcalendar.fixed .cxcalendar_hd .prev {
  left: 24px;
}
.cxcalendar.fixed .cxcalendar_hd .next {
  right: 24px;
}

.cxcalendar.fixed .cxcalendar_bd {
  padding-bottom: 20px;
}
.cxcalendar.fixed .cxcalendar_bd ul {
  line-height: 36px;
}
.cxcalendar.fixed .cxcalendar_bd ul li {
  height: 40px;
}

.cxcalendar.fixed .cxcalendar_bd .times {
  padding-top: 10px;
  padding-bottom: 10px;
}

.cxcalendar.fixed .cxcalendar_acts {
  position: absolute;
  top: auto;
  left: auto;
  bottom: 100%;
  right: 10px;
  width: auto;
  padding: 0;
  border: none;
  background: none;
  line-height: 32px;
  display: flex;
}
.cxcalendar.fixed .cxcalendar_acts a {
  border-radius: 3px 3px 0 0;
}


/* 显示周数 */
.cxcalendar.has_weeknum .cxcalendar_bd .days ul {
  padding-left: 24px;
}
.cxcalendar.has_weeknum .cxcalendar_bd .days li[data-week-num]:before {
  content: attr(data-week-num);
  position: absolute;
  top: 50%;
  left: -16px;
  width: 16px;
  margin-top: -8px;
  margin-left: -8px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: var(--cxcalendar-unit-size);
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}


/* 不显示秒输入框 */
.cxcalendar.not_secs .times .mint + i,
.cxcalendar.not_secs .times .secs {
  display: none;
}

/* 不显示快捷操作 */
.cxcalendar.not_acts .cxcalendar_acts {
  display: none;
}


/* 多语言 */
.cxcalendar.en .cxcalendar_hd .year + em:after,
.cxcalendar.en .cxcalendar_hd .month + em:after,
.cxcalendar.en .cxcalendar_bd .months li:after,
.cxcalendar.en .cxcalendar_bd .years li:after {
  content: '';
}
.cxcalendar.en .cxcalendar_bd .times section:before {
  content: 'Time:'
}
.cxcalendar.en .cxcalendar_acts .today:before {
  content: 'Now';
}
.cxcalendar.en .cxcalendar_acts .clear:before {
  content: 'Clear';
}
.cxcalendar.en .cxcalendar_acts .confirm:before {
  content: 'Ok';
}
.cxcalendar.en.range .cxcalendar_bd .times section:nth-child(1):before {
  content: 'Start Time:';
}
.cxcalendar.en.range .cxcalendar_bd .times section:nth-child(2):before {
  content: 'End Time:';
}


/* 深色模式 */
@media (prefers-color-scheme: dark) {
  .cxcalendar {
    --cxcalendar-bg: #222;
    --cxcalendar-item-bg: #333;
    --cxcalendar-border: #444;

    --cxcalendar-text-color: #eee;
    --cxcalendar-days-color: #ddd;
    --cxcalendar-other-color: #555;
    --cxcalendar-note-color: #888;

    --cxcalendar-now-bg: #333;
    --cxcalendar-set-bg: #8cc152;
    --cxcalendar-range-bg: #29485d;
    --cxcalendar-range-set-bg: #70a9ce;

    --cxcalendar-btn-color: #333;
    --cxcalendar-btn-bg: #ccc;
    --cxcalendar-confirm-bg: #4a89dc;
  }

  .cxcalendar_bd ul li.selected,
  .cxcalendar_bd ul li.selected.holiday,
  .cxcalendar_bd ul li.selected.other,
  .cxcalendar_bd ul li.selected.sat,
  .cxcalendar_bd ul li.selected.sun,
  .cxcalendar_bd ul li.selected:hover,
  .cxcalendar_acts .confirm,
  .cxcalendar_acts .confirm:hover,
  .cxcalendar.range .cxcalendar_bd ul li.selected.start,
  .cxcalendar.range .cxcalendar_bd ul li.selected.end {
    color: #fff;
  }

  .cxcalendar_bd .times:before {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 15%, rgba(255, 255, 255, 0.1) 85%, rgba(255, 255, 255, 0) 100%);
  }
  .cxcalendar.range .cxcalendar_bd ul + ul:before {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 0.1) 65%, rgba(255, 255, 255, 0) 100%);
  }
  .cxcalendar.has_weeknum .cxcalendar_bd .days li[data-week-num]:before {
    background-color: rgba(255, 255, 255, 0.1);
    color: #888;
  }
}


@media (min-width: 640px) {
  .cxcalendar.fixed .cxcalendar_hd section:nth-child(2),
  .cxcalendar.fixed .cxcalendar_bd ul:nth-child(2) {
    display: inherit;
  }
  .cxcalendar.fixed .cxcalendar_bd .times {
    display: flex;
  }
}


/* iPhone X 以上全面屏 */
@media (width: 375px) and (height: 812px),
(width: 414px) and (height: 896px),
(width: 390px) and (height: 844px),
(width: 428px) and (height: 926px) {
  .cxcalendar.fixed .cxcalendar_bd {
    padding-bottom: env(safe-area-inset-bottom);
  }
}