/* The main calendar widget.  DIV containing a table. */
.calendar {
  z-index: 12001;
}
/* JRADEV-17715 Setting this one higher than ajs-layer */
div.calendar {
  border-radius: 3.01px;
  /* 3.01px for IE10 */
  background-clip: padding-box;
  background-color: var(--ds-surface, #ffffff);
  box-shadow: var(--ds-shadow-overlay, 0 3px 6px 0 rgba(0, 0, 0, 0.2));
  padding: 2px;
  position: relative;
}
.calendar table {
  cursor: default;
  font-size: 12px;
  border-bottom: 1px solid var(--ds-border, #c1c7d0);
}
.calendar table .wn {
  background-color: var(--ds-surface-sunken, #f4f5f7);
  color: var(--ds-text, #666666);
  padding: 2px 4px 2px 2px;
}
.calendar {
  border: 1px solid var(--ds-border, #c1c7d0);
}
.calendar button {
  border: 0;
  background-color: var(--ds-surface, #ffffff);
  text-align: center;
}
.calendar th {
  font-weight: 400;
}
/* buttons */
/* "<<", "<", ">", ">>" buttons have this class */
.calendar .calendar-header button {
  padding: 4px 12px;
  background: none;
}
.calendar .calendar-header .row {
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar .calendar-header .nav-row {
  border-top: 1px solid var(--ds-border, #c1c7d0);
  background: var(--ds-surface-sunken, #f4f5f7);
}
.calendar .calendar-header .title,
.calendar .calendar-header .go-today {
  text-align: center;
  flex-grow: 1;
}
.calendar .calendar-header .title {
  outline: 0;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 0;
}
.calendar .combobox-trigger {
  position: relative;
}
.calendar .combobox-trigger::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 4px solid;
  color: var(--ds-text-subtlest, #6b778c);
}
.calendar .daynames td {
  background-color: #0065ff;
  color: var(--ds-surface, #ffffff);
}
.calendar .daynames th {
  text-align: center;
}
.calendar .daynames th.wn {
  background-color: var(--ds-surface-sunken, #f4f5f7);
  color: var(--ds-text, #888888);
}
/* buttons hover */
.calendar button:hover,
.calendar td:not(.emptycell):hover,
.calendar .combo .label:hover,
.calendar td.time span:hover {
  background-color: var(--ds-background-neutral-subtle-hovered, #ffe9a8);
}
.calendar .daysrow .emptycell + .day:hover,
.calendar .daysrow .day + .day:hover {
  border-radius: 3.01px;
  /* 3.01px for IE10 */
  background-clip: padding-box;
  color: var(--ds-text, #333333);
  background-color: var(--ds-background-neutral-subtle-hovered, #ffe9a8);
}
.calendar .name.day:hover {
  background-color: var(--ds-background-information-bold, var(--ds-chart-blue-bold, #3572b0));
  color: var(--ds-surface-hovered, #ffffff);
}
/* active (pressed) buttons */
.calendar button:active,
.calendar .combo .active,
.calendar td.time span:active {
  background-color: var(--ds-background-neutral-subtle-pressed, #0065ff);
  color: var(--ds-text, #ffffff);
}
/* Combo boxes (menus that display months/years for direct selection) */
.calendar .combo {
  background-color: var(--ds-surface, #ffffff);
  border: 1px solid var(--ds-surface, #c1c7d0);
  border-top: none;
  cursor: default;
  display: none;
  left: 0;
  position: absolute;
  top: 0;
  width: 4em;
  z-index: 100;
}
.calendar .combo .label {
  text-align: center;
  padding: 2px;
  font-size: 12px;
}
/* The body part -- contains all the days in month. */
.calendar tbody .day {
  padding: 2px 4px 2px 2px;
  text-align: right;
  width: 2em;
}
.calendar tbody .emptycell + .day,
.calendar tbody .day + .day {
  border-radius: 3.01px;
  /* 3.01px for IE10 */
  background-clip: padding-box;
}
.calendar tbody .day.othermonth {
  color: var(--ds-text, #999999);
}
.calendar tbody .day.othermonth.oweekend {
  color: var(--ds-text-accent-orange, #ff9999);
}
.calendar tbody td.today {
  font-weight: 700;
}
.calendar tbody td.weekend {
  color: var(--ds-background-danger-bold, #de350b);
}
/* Cell showing selected date */
.calendar tbody td.selected {
  background-color: var(--ds-background-information-bold, var(--ds-chart-blue-bold, #3572b0));
  color: var(--ds-surface, #ffffff);
  font-weight: 700;
}
.calendar tbody .disabled {
  color: var(--ds-text-disabled, #999999);
}
.calendar tbody .emptyrow {
  display: none;
}
/* time related */
.calendar .time-row {
  display: flex;
  font-size: 12px;
  align-items: center;
  background-color: var(--ds-surface, #f4f5f7);
  border-bottom: 1px solid var(--ds-border, #c1c7d0);
  padding: 2px 14px;
  text-align: center;
}
.calendar .time-row .time {
  flex-grow: 1;
}
.calendar .time-row button {
  font-weight: 700;
  padding: 2px 5px 2px 6px;
}
.calendar .time-row .colon {
  background-color: var(--ds-surface, #f4f5f7);
  margin: 0 4px;
}
.calendar .actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px;
  background-color: var(--ds-surface, #f4f5f7);
  border-top: 1px solid var(--ds-border, #c1c7d0);
}
.calendar .actions-row button {
  padding: 4px 12px;
}
.calendar .ttip {
  font-size: 12px;
  text-align: center;
  padding: 2px;
}