.xCal {
    position: absolute;
    z-index: 9999;
}

.xCal > table.outer {
    border-collapse: collapse;
    font-size: var(--calendar-font-size);
}

.xCal > table.outer td.outer {
    padding: 0;
    margin: 0;
    border-style: none;
    height: 127px;
}

.xCal .scrollable {
    overflow-x: hidden;
    overflow-y: auto;
    height: 125px;
    padding: 0;
}

.xCal .scrollable table.inner {
    height: 125px;
}

.xCal table.inner {
    width: 150px;
    height: 128px;
    table-layout: fixed;
    border-collapse: collapse;
}

.xCal td {
    cursor: pointer;
    text-align: center;
    border-width: var(--calendar-border-width);
    border-style: var(--calendar-border-style);
    border-color: var(--calendar-border-color);
}

.xCal td.dayHeader {
    cursor: default;
    background-color: var(--calendar-day-header-background-color);
    color: var(--calendar-day-header--olor);
}

.xCal tr.nav td {
    border: 0;
    background-color: var(--calendar-nav-background-color);
    color: var(--calendar-nav-text-color);
    height: var(--calendar-nav-height);
}

.xCal tr.footer td {
    border: 0;
    height: var(--calendar-nav-height);
}

.xCal td.today {
    background-color: var(--calendar-date-today-background-color) !important;
    color: var(--calendar-date-today-text-color) !important;
    outline: var(--calendar-date-today-outline);
}

.xCal td.curr {
    background-color: var(--calendar-date-current-background-color);
    color: var(--calendar-date-current-text-color);
}

.xCal td.other {
    background-color: var(--calendar-date-other-background-color);
    color: var(--calendar-date-other-text-color)
}

.xCal td.curr:focus,
.xCal td.other:focus,
.xCal tr.nav td:focus {
    background-color: var(--calendar-date-focus-background-color);
    color: var(--calendar-date-focus-text-color);
}

#btnNext,
#btnPrev {
    font-family: var(--font-family--icon);
    font-size: var(--font-size--icon);
}

#btnNext::before {
    content: var(--calendar-button-next-icon);
}

#btnPrev::before {
    content: var(--calendar-button-previous-icon);
}

.xCalendar {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    background-color: var(--calendar-background-color);
}

#calBox {
    box-shadow: var(--calendar-shadow);
    margin-top: -4px;
    margin-left: -88px;
}