table.jCalendar {
    background: var(--white);
    border-collapse: separate;
    border-spacing: 3px;
}

table.jCalendar th {
	padding: 3px 5px;
	font-family: 'robotoregular', sans-serif;
	color: var(--blue-2);
	font-size: 12px;
	text-align: center;
}

table.jCalendar tr {
	height: 35px;
}

table.jCalendar td {
	transition: all .2s ease-in-out;
	background: var(--blue-gray-4);
	color: var(--gray-1);
	border-radius: 90px;
	padding: 6px 11px;
	text-align: right;
}

table.jCalendar td.other-month:not(:hover, .selected) {
	background: var(--blue-gray-4);
	opacity: 0.5;
	color: var(--gray-1);
	border: none;
}

table.jCalendar td.today {
	box-sizing: border-box;
	border: 1px solid var(--blue-2);
}

table.jCalendar td.selected {
	background: var(--orange-2);
	color: var(--white);
}

table.jCalendar td.selected.dp-hover {
	background: var(--orange-3);
	color: var(--white);
}

table.jCalendar td.dp-hover,
table.jCalendar tr.activeWeekHover td {
	background-color: var(--blue-2);
	color: var(--white);
}

table.jCalendar tr.selectedWeek td {
	background: var(--red-1);
	color: var(--white);
}

table.jCalendar td.disabled:not(.today), table.jCalendar td.disabled.dp-hover:not(.today) {
	background: var(--blue-gray-4);
	cursor: not-allowed;
	opacity: 0.5;
	color: var(--gray-1);
	border: none;
}
table.jCalendar td.unselectable,
table.jCalendar td.unselectable:hover,
table.jCalendar td.unselectable.dp-hover {
	background: var(--gray-5);
	color: var(--gray-1);
}

/* For the popup */

/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */

div.dp-popup {
	/*margin-top: 31px;*/
	animation: swing-in-right-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	position: relative;
	background: var(--white);
	border: solid 1px var(--blue-2);
	border-radius: var(--border-radius);
	font-size: 10px;
	font-family: arial, sans-serif;
	padding: 15px;
	line-height: 1.2em;
	min-width: var(--date-popup-width);
	max-width: var(--date-popup-width);
	box-sizing: border-box;
	/* position left, align bottom */
	margin-left: calc(0px - var(--date-popup-width) - var(--date-picker-margin));
}

/* with the following classes you can control the calendar
to position the calendar on the x axis use left, align-left, x-center, align-left, align-right, right
to position the calendar on the y axis use top, align-top, y-center, align-top, align-bottom, bottom */

/* X-Axis */
div.dp-popup.date-pick-position-left {
	margin-left:  calc(0px - var(--date-popup-width) - var(--date-picker-margin));
}
div.dp-popup.date-pick-position-align-left {
	margin-left:  calc(0px - var(--date-popup-width) + var(--date-input-width));
}
div.dp-popup.date-pick-position-x-center {
	margin-left: calc(0px - var(--date-popup-width) / 2 + var(--date-input-width) / 2);
}
div.dp-popup.date-pick-position-align-right {
	margin-left: 0;
}
div.dp-popup.date-pick-position-right {
	margin-left: calc(var(--date-input-width) + var(--date-picker-margin));
}
/* Y-Axis */
div.dp-popup.date-pick-position-top {
	margin-top: calc(0px - var(--date-popup-height) - var(--date-picker-margin));
}
div.dp-popup.date-pick-position-align-top {
	margin-top: calc(0px - var(--date-popup-height) + var(--date-input-height));
}
div.dp-popup.date-pick-position-y-center {
	margin-top: calc(0px - var(--date-popup-height) / 2 + var(--date-input-height) / 2);
}
div.dp-popup.date-pick-position-align-bottom {
	margin-top: 0;
}
div.dp-popup.date-pick-position-bottom {
	margin-top: calc(var(--date-input-height) + var(--date-picker-margin));
}
div#dp-popup {
	position: absolute;
	z-index: 65536 !important;
}

div.dp-popup h2 {
	font-size: 14px;
	font-family: 'robotoregular', sans-serif;
	text-align: center;
	font-weight: bolder;
	margin: 3px 0;
	padding: 0;
}

div.dp-popup .dp-calendar{
	padding-top: 15px;
}

a#dp-close {
	font-size: 11px;
	padding: 4px 0;
	text-align: center;
	display: block;
}

a#dp-close:hover {
	text-decoration: underline;
}

div.dp-popup a {
	color: var(--gray-1);
	text-decoration: none;
	width: 20px;
	height: 20px;
	text-indent: -999px;
	overflow:hidden;
}

div.dp-popup div.dp-nav-prev {
	display: flex;
	flex-direction: row;
	position: absolute;
	gap: 5px;
	top: 17px;
	left: 20px;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH();
	-ms-filter: "FlipH";
}

div.dp-popup div.dp-nav-next {
	display: flex;
	flex-direction: row-reverse;
	gap: 5px;
	position: absolute;
	top: 17px;
	right: 20px;
}

div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {
	transition: all .2s ease-in-out;
	display: block;
	background-image: url('../images/am40/svg/am_datepicker_month.svg');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

div.dp-popup div.dp-nav-prev a:not(.disabled):hover, div.dp-popup div.dp-nav-next a:not(.disabled):hover {
	display: block;
	background-image: url('../images/am40/svg/am_datepicker_month_hover.svg');
}

div.dp-popup div.dp-nav-prev a.dp-nav-prev-year, div.dp-popup div.dp-nav-next a.dp-nav-next-year  {
	background-image: url('../images/am40/svg/am_datepicker_year.svg');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

div.dp-popup div.dp-nav-prev a:not(.disabled).dp-nav-prev-year:hover, div.dp-popup div.dp-nav-next a:not(.disabled).dp-nav-next-year:hover {
	background-image: url('../images/am40/svg/am_datepicker_year_hover.svg');
}

/* 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: not-allowed;
}

div.dp-popup a.disabled {
	cursor: default;
	color: var(--gray-1);
}
div.dp-popup td {
	cursor: pointer;
	font-size: 12px;
	text-align: center;
}

div.dp-popup td.disabled {
	cursor: default;
}