@fpxfd/next/lib/calendar2/index.css

A configurable component library for web built on React.

.next-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  top: 0;
  margin: -1px;
}

.next-calendar2 {
  box-sizing: border-box;
}
.next-calendar2 *,
.next-calendar2 *:before,
.next-calendar2 *:after {
  box-sizing: border-box;
}
.next-calendar2 table {
  border-collapse: collapse;
  border-spacing: 0;
}
.next-calendar2 td,
.next-calendar2 th {
  padding: 0;
}

div[dir=rtl].next-calendar2-fullscreen .next-calendar2-header-actions, div[dir=rtl].next-calendar2-panel .next-calendar2-header-actions, div[dir=rtl].next-calendar2-card .next-calendar2-header-actions {
  margin-right: auto;
  margin-left: 0;
}
div[dir=rtl].next-calendar2-fullscreen .next-calendar2-header-ranges > *:not(:first-child), div[dir=rtl].next-calendar2-fullscreen .next-calendar2-header-actions > *:not(:first-child), div[dir=rtl].next-calendar2-panel .next-calendar2-header-ranges > *:not(:first-child), div[dir=rtl].next-calendar2-panel .next-calendar2-header-actions > *:not(:first-child), div[dir=rtl].next-calendar2-card .next-calendar2-header-ranges > *:not(:first-child), div[dir=rtl].next-calendar2-card .next-calendar2-header-actions > *:not(:first-child) {
  margin-right: 8px;
  margin-left: 0;
}
div[dir=rtl].next-calendar2-fullscreen .next-calendar2-cell-value, div[dir=rtl].next-calendar2-fullscreen .next-calendar2-table th {
  text-align: left;
}
div[dir=rtl].next-calendar2-fullscreen .next-calendar2-table th {
  padding: 0 0 5px 12px;
}

.next-calendar2 {
  font-size: 12px;
  user-select: none;
  background: #FFFFFF;
}
.next-calendar2-header {
  display: flex;
}
.next-calendar2-table {
  width: 100%;
  table-layout: fixed;
}
.next-calendar2-cell {
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s, border 0.2s;
}
.next-calendar2 .next-calendar2-cell-inner {
  color: #c3cbd5;
  color: var(--color-text1-1, #c3cbd5);
  outline: none;
  min-width: 24px;
  position: relative;
  border: 1px solid transparent;
}
.next-calendar2-cell-disabled::before {
  color: #c3cbd5;
  color: var(--color-text1-1, #c3cbd5);
  background: #f2f4f8;
  background: var(--color-fill1-1, #f2f4f8);
}
.next-calendar2-fullscreen .next-calendar2-header-actions, .next-calendar2-panel .next-calendar2-header-actions, .next-calendar2-card .next-calendar2-header-actions {
  margin-left: auto;
}
.next-calendar2-fullscreen .next-calendar2-header-ranges > *:not(:first-child), .next-calendar2-fullscreen .next-calendar2-header-actions > *:not(:first-child), .next-calendar2-panel .next-calendar2-header-ranges > *:not(:first-child), .next-calendar2-panel .next-calendar2-header-actions > *:not(:first-child), .next-calendar2-card .next-calendar2-header-ranges > *:not(:first-child), .next-calendar2-card .next-calendar2-header-actions > *:not(:first-child) {
  margin-left: 8px;
}
.next-calendar2-fullscreen .next-calendar2-header-select-year, .next-calendar2-fullscreen .next-calendar2-header-select-month, .next-calendar2-panel .next-calendar2-header-select-year, .next-calendar2-panel .next-calendar2-header-select-month, .next-calendar2-card .next-calendar2-header-select-year, .next-calendar2-card .next-calendar2-header-select-month {
  min-width: 88px;
}
.next-calendar2-fullscreen .next-calendar2-header-select-year .next-input, .next-calendar2-fullscreen .next-calendar2-header-select-month .next-input, .next-calendar2-panel .next-calendar2-header-select-year .next-input, .next-calendar2-panel .next-calendar2-header-select-month .next-input, .next-calendar2-card .next-calendar2-header-select-year .next-input, .next-calendar2-card .next-calendar2-header-select-month .next-input {
  min-width: auto;
}
.next-calendar2-fullscreen .next-calendar2-body, .next-calendar2-panel .next-calendar2-body, .next-calendar2-card .next-calendar2-body {
  padding: 8px 0;
}
.next-calendar2-card .next-calendar2-cell-inner, .next-calendar2-panel .next-calendar2-cell-inner {
  z-index: 2;
  height: 24px;
  line-height: 22px;
  border-radius: 2px;
  display: inline-block;
}
.next-calendar2-card .next-calendar2, .next-calendar2-panel .next-calendar2 {
  min-height: 150px;
}
.next-calendar2-card .next-calendar2-table thead > tr, .next-calendar2-panel .next-calendar2-table thead > tr {
  height: 24px;
  color: #a9aeba;
  color: var(--color-text1-2, #a9aeba);
}
.next-calendar2-card .next-calendar2-table th,
.next-calendar2-card .next-calendar2-table td, .next-calendar2-panel .next-calendar2-table th,
.next-calendar2-panel .next-calendar2-table td {
  font-weight: 400;
  text-align: center;
  padding: 4px 0;
}
.next-calendar2-card .next-calendar2-table th, .next-calendar2-panel .next-calendar2-table th {
  height: 32px;
}
.next-calendar2-card .next-calendar2-table-month, .next-calendar2-card .next-calendar2-table-year, .next-calendar2-card .next-calendar2-table-decade, .next-calendar2-panel .next-calendar2-table-month, .next-calendar2-panel .next-calendar2-table-year, .next-calendar2-panel .next-calendar2-table-decade {
  height: 145px;
}
.next-calendar2-card .next-calendar2-table-month .next-calendar2-cell-inner, .next-calendar2-card .next-calendar2-table-year .next-calendar2-cell-inner, .next-calendar2-card .next-calendar2-table-decade .next-calendar2-cell-inner, .next-calendar2-panel .next-calendar2-table-month .next-calendar2-cell-inner, .next-calendar2-panel .next-calendar2-table-year .next-calendar2-cell-inner, .next-calendar2-panel .next-calendar2-table-decade .next-calendar2-cell-inner {
  min-width: 56px;
}
.next-calendar2-card .next-calendar2-table-quarter, .next-calendar2-panel .next-calendar2-table-quarter {
  height: 50px;
}
.next-calendar2-card .next-calendar2-table-quarter .next-calendar2-cell-inner, .next-calendar2-panel .next-calendar2-table-quarter .next-calendar2-cell-inner {
  min-width: 56px;
}
.next-calendar2-card .next-calendar2-table-decade .next-calendar2-cell-inner, .next-calendar2-panel .next-calendar2-table-decade .next-calendar2-cell-inner {
  min-width: 80px;
}
.next-calendar2-card .next-calendar2-cell-current:not(.next-calendar2-cell-disabled):not(.next-calendar2-cell-selected):not(.next-calendar2-cell-today) .next-calendar2-cell-inner, .next-calendar2-panel .next-calendar2-cell-current:not(.next-calendar2-cell-disabled):not(.next-calendar2-cell-selected):not(.next-calendar2-cell-today) .next-calendar2-cell-inner {
  color: #767d91;
  color: var(--color-text1-3, #767d91);
}
.next-calendar2-card .next-calendar2-cell-current:not(.next-calendar2-cell-disabled):not(.next-calendar2-cell-selected):not(.next-calendar2-cell-today):hover:not(.next-calendar2-cell-hover) .next-calendar2-cell-inner, .next-calendar2-panel .next-calendar2-cell-current:not(.next-calendar2-cell-disabled):not(.next-calendar2-cell-selected):not(.next-calendar2-cell-today):hover:not(.next-calendar2-cell-hover) .next-calendar2-cell-inner {
  background: #eef1f6;
  background: var(--color-fill1-2, #eef1f6);
}
.next-calendar2-card .next-calendar2-cell-current.next-calendar2-cell-today:not(.next-calendar2-cell-disabled) .next-calendar2-cell-inner, .next-calendar2-panel .next-calendar2-cell-current.next-calendar2-cell-today:not(.next-calendar2-cell-disabled) .next-calendar2-cell-inner {
  color: #284cc0;
  color: var(--color-brand1-6, #284cc0);
}
.next-calendar2-card .next-calendar2-cell-current.next-calendar2-cell-selected:not(.next-calendar2-cell-disabled) .next-calendar2-cell-inner, .next-calendar2-panel .next-calendar2-cell-current.next-calendar2-cell-selected:not(.next-calendar2-cell-disabled) .next-calendar2-cell-inner {
  color: #FFFFFF;
  background: #284cc0;
  background: var(--color-brand1-6, #284cc0);
}
.next-calendar2-fullscreen .next-calendar2-cell-value, .next-calendar2-fullscreen .next-calendar2-table th {
  text-align: right;
}
.next-calendar2-fullscreen .next-calendar2-table th {
  padding: 0 12px 5px 0;
}
.next-calendar2-fullscreen .next-calendar2-cell-inner {
  height: 80px;
  border-top: 2px solid #eef1f6;
  border-top: 2px solid var(--color-line1-1, #eef1f6);
  margin: 0 4px;
  padding: 4px 8px 0;
}
.next-calendar2-fullscreen td .next-calendar2-cell-inner {
  height: 80px;
  border-top: 2px solid #eef1f6;
  border-top: 2px solid var(--color-line1-1, #eef1f6);
}
.next-calendar2-fullscreen .next-calendar2-cell-disabled .next-calendar2-cell-inner {
  color: #c3cbd5;
  color: var(--color-text1-1, #c3cbd5);
  background: #f2f4f8;
  background: var(--color-fill1-1, #f2f4f8);
}
.next-calendar2-fullscreen .next-calendar2-cell-current:not(.next-calendar2-cell-disabled):not(.next-calendar2-cell-selected):not(.next-calendar2-cell-today) .next-calendar2-cell-inner {
  color: #767d91;
  color: var(--color-text1-3, #767d91);
}
.next-calendar2-fullscreen .next-calendar2-cell-current:not(.next-calendar2-cell-disabled):not(.next-calendar2-cell-selected):not(.next-calendar2-cell-today):hover .next-calendar2-cell-inner {
  background-color: #eef1f6;
  background-color: var(--color-fill1-2, #eef1f6);
}
.next-calendar2-fullscreen .next-calendar2-cell-current.next-calendar2-cell-today .next-calendar2-cell-inner {
  color: #284cc0;
  color: var(--color-brand1-6, #284cc0);
}
.next-calendar2-fullscreen .next-calendar2-cell-current .next-calendar2-cell-inner {
  background-color: #FFFFFF;
}
.next-calendar2-fullscreen .next-calendar2-cell-current.next-calendar2-cell-selected:not(.next-calendar2-cell-disabled) .next-calendar2-cell-inner {
  border-top-color: #284cc0;
  border-top-color: var(--color-brand1-6, #284cc0);
  font-weight: bold;
  color: #284cc0;
  color: var(--color-brand1-6, #284cc0);
  background: #d4dbf2;
  background: var(--color-brand1-1, #d4dbf2);
}
.next-calendar2-card .next-calendar2-header {
  padding: 8px 8px;
  border-bottom: 1px solid #eef1f6;
  border-bottom: 1px solid var(--color-line1-1, #eef1f6);
}
.next-calendar2-panel .next-calendar2-header {
  padding: 0 8px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eef1f6;
  border-bottom: 1px solid var(--color-line1-1, #eef1f6);
}
.next-calendar2-panel .next-calendar2-header-btn {
  min-width: 20px;
  line-height: 20px;
  color: #767d91;
  color: var(--color-text1-3, #767d91);
  font-family: inherit;
  vertical-align: initial;
  border-radius: 2px;
}
.next-calendar2-panel .next-calendar2-header-btn > span, .next-calendar2-panel .next-calendar2-header-text-field {
  text-align: center;
  font-size: 14px;
  color: #545d75;
  color: var(--color-text1-4, #545d75);
  font-weight: bolder;
  vertical-align: initial;
}
.next-calendar2-panel .next-calendar2-header-btn:hover, .next-calendar2-panel .next-calendar2-header-btn:hover > span {
  color: #284cc0;
  color: var(--color-brand1-6, #284cc0);
}
.next-calendar2-panel .next-calendar2-header-right-btn:hover, .next-calendar2-panel .next-calendar2-header-left-btn:hover {
  background: #eef1f6;
  background: var(--color-fill1-2, #eef1f6);
}
.next-calendar2-panel .next-calendar2-header-arrow-btn-balloon-fixed::before {
  font-size: 12px;
}
.next-calendar2-panel .next-calendar2-header-text-field {
  flex: 1;
  height: 38px;
  line-height: 38px;
}
.next-calendar2-panel .next-calendar2-header-text-field .next-calendar2-header-btn:not(:first-child) {
  margin-left: 6px;
}

.next-calendar2-header-select-month-popup,
.next-calendar2-header-select-year-popup {
  min-width: auto;
}