table.jCalendar {
	border-collapse: separate;
	border-spacing: 2px;
}

table.jCalendar th {
	background: var(--table-header-bg);
	color: var(--table-header-text);
	font-weight: bold;
}

table.jCalendar td {
	background: light-dark(var(--stone-300), var(--zinc-700));
	color: var(--text-normal);
	padding: 0.25rem 0.35rem;
	text-align: center;
}

table.jCalendar td.other-month {
	background: var(--table-stripe-bg);
	color: var(--text-normal);
}
table.jCalendar td.today {
	background: var(--brand-bg-highlight);
	color: var(--text-light);
}
table.jCalendar td.selected {
	background: var(--brand-bg);
	color: var(--text-link-light-focus);
	outline: 2px solid var(--brand-focus-outline);
	font-weight: bold;
}
table.jCalendar td.selected.dp-hover {
	background: var(--brand-dark-bg);
	color: var(--text-link-light-focus);
	outline: 2px solid var(--body-focus-outline);
	font-weight: bold;
}
table.jCalendar td.dp-hover,
table.jCalendar tr.activeWeekHover td {
	background: var(--brand-dark-bg);
	color: var(--text-light);
	outline: 1px solid var(--body-focus-outline);
}
table.jCalendar tr.selectedWeek td {
	background: light-dark(var(--stone-350), var(--zinc-600));
	color: var(--text-dark);
}
table.jCalendar td.disabled, table.jCalendar td.disabled.dp-hover {
	background: light-dark(var(--stone-350), var(--zinc-600));
	color: var(--text-normal);
}
table.jCalendar td.unselectable,
table.jCalendar td.unselectable:hover,
table.jCalendar td.unselectable.dp-hover {
	background: light-dark(var(--stone-350), var(--zinc-600));
	color: var(--text-normal);
}
/* For the popup */

a.dp-choose-date {
	padding: 0;
	display: inline-block;
	text-indent: -2000px;
	background: url('../images/datepicker.svg') no-repeat;
  background-size: contain;
  width: 1.25rem;
  height: 1.25rem;
  margin-block-start: 0.35rem;
  margin-inline-start: -1.35rem;
}

[data-color-mode="dark"] a.dp-choose-date {
  background: url('../images/datepicker-dark-mode.svg') no-repeat;
  background-size: contain;
}

a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}

div.dp-popup {
	position: relative;
	background: var(--body-bg);
	font-size: var(--font-small);
	padding: 0.5rem;
	width: auto;
	line-height: 1.2em;
}
div#dp-popup {
	position: absolute;
	z-index: 199;
	box-shadow: 1px 1px 1rem rgba(0,0,0,0.75);
}
div.dp-popup h2 {
	font-size: inherit;
	text-align: center;
	margin: 0.1rem 0;
	padding: 0;
}
a#dp-close {
	font-size: var(--font-small);
	padding: 0.25rem 0;
	text-align: center;
	display: block;
}
a#dp-close:hover {
	text-decoration: underline;
}
div.dp-popup a {
	text-decoration: none;
	padding: 0.25rem 0.1rem 0;
}
div.dp-popup div.dp-nav-prev {
	position: absolute;
	top: 0.35rem;
	left: 0.5rem;
	width: auto;
}
div.dp-popup div.dp-nav-prev a {
	float: left;
}
/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */
div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {
	cursor: pointer;
}
div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {
	cursor: default;
}
div.dp-popup div.dp-nav-next {
	position: absolute;
	top: 0.35rem;
	right: 0.5rem;
	width: auto;
}
div.dp-popup div.dp-nav-next a {
	float: right;
}
div.dp-popup a.disabled {
	cursor: default;
	filter: saturate(0);
}
div.dp-popup td {
	cursor: pointer;
}
div.dp-popup td.disabled {
	cursor: default;
}