.tblCalendarHeader {
    width: 100%;
    height: 100px;
    justify-self: center;
    position: sticky;
    top: 0px;
    z-index: 4;
    padding: 0px;
}

    .tblCalendarHeader th {
        padding: 0px;
        position: relative;
    }

.tdCalendarBody {
    background-color: red;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    position: relative;
    display: table-cell;
}

.tblCalendarBody {
    position: relative;
    justify-self: center;
    width: 100%;
}

.calLabel {
    text-align: center;
    height: 40px;
}

.calDayHeader {
    text-align: center;
    border: 3px solid black;
    width: var(--calHeaderDayPct);
    height: 20px;
    font-size: var(--calHeaderFontSize);
    background-color: dimgray;
    color: white;
}
.calNumHeader {
    text-align: center;
    border: 3px solid black;
    width: var(--calHeaderNumPct);
    height: 20px;
    font-size: calc(var(--calHeaderFontSize) * 1);
    background-color: dimgray;
    color: white;
}

.calToday {
    background-color: var(--colorTodayBG) !important;
}
.calTodayTest {
    background-color: var(--colorTodayBGTest) !important;
}

.calDayCell {
    width: var(--calHeaderDayPct);
    position: relative;
    height: calc(var(--calDateSz) + (var(--calShadowDp)*2) + (var(--lineItemHeight) * 7) + (var(--calBorderWd)*2));
}
.calNumCell {
    text-align: center;
    width: var(--calHeaderNumPct);
    position: relative;
    height: calc(var(--calDateSz) + (var(--calShadowDp)*2) + (var(--lineItemHeight) * 7) + (var(--calBorderWd)*2));
    font-weight: bolder;
    font-size: large;
}
.calNumCellCurrent {
    color: #ffd800;
}
.calDayCellTest {
    width: 13em;
    justify-self: center;
}

.calDayBox {
    position: absolute;
    top: var(--calMargin);
    left: var(--calMargin);
    right: var(--calMargin);
    bottom: var(--calMargin);
    border: var(--calBorderWd) solid var(--colorBorderNormal);
    text-align: center;
    cursor: pointer;
    border-radius: var(--calRadius);
    box-shadow: 0px 0px var(--calShadowSz) var(--calShadowSz) var(--colorShadowNormal) inset;
}

.calDayBox:hover {
    border: var(--calBorderWd) solid var(--colorBorderHover) !important;
    z-index: 2;
    border-radius: var(--calRadius);
    box-shadow: 0px 0px var(--calShadowDp) var(--calShadowSz) var(--colorShadowHover) inset;
}

.calSpacer {
    color: white;
}

.calPanel {
    border: 3px solid black;
    background-color: var(--colorHeaderBG);
    line-height: var(--calPanelLineHeight);
    position: absolute;
    top: 0px;
    bottom: -3px;
    left: -1px;
    right: -1px;
}
.calPanelLeft {
    border-top-left-radius: 20px;
    border-right: 0px solid black;
    font-size: var(--calPanelFontSize);
}
.calPanelRight {
    border-top-right-radius: 20px;
}

.calMonthBanner {
    background-color: black;
    height: var(--calMonthBannerHeight);
    line-height: var(--calMonthBannerHeight);
    padding-top: 40px;
    color: white;
    text-align: center;
    font-size: var(--calMonthBannerFontSz);
    border-radius: 20px;
    box-shadow: 0px 0px 10px 6px #777 inset;
}

.calMonthSpacer {
    height:60px;
}

.calDayBox:hover .calDateNumber {
    border-color: var(--colorBorderHover);
    background-color: var(--colorBorderHover);
    color: black;
    text-shadow: 0px 0px 8px black;
    box-shadow: 0px 0px var(--calShadowSz) var(--calShadowSz) var(--colorShadowHover);
}

.calDateNumber {
    position: absolute;
    top: calc(var(--calMargin) + var(--calShadowDp));
    left: calc(var(--calMargin) + var(--calShadowDp));
    border: 3px solid var(--colorBorderNormal);
    background-color: var(--colorBorderNormal);
    color: white;
    height: var(--calDateSz);
    width: var(--calDateSz);
    text-align: center;
    font-size: calc(var(--calDateSz) * 0.75);
    text-shadow: 0px 0px 8px black;
    line-height: var(--calDateSz);
    border-top-left-radius: calc(var(--calRadius) - var(--calShadowDp) - var(--calPadding) - var(--calBorderWd));
    border-bottom-right-radius: calc(var(--calRadius) - var(--calShadowDp) - var(--calPadding) - var(--calBorderWd));
    box-shadow: 0px 0px var(--calShadowDp) var(--calShadowSz) var(--colorShadowNormal);
}

.calLabel {
    left: calc(var(--calPadding) + var(--calShadowDp));
    right: var(--lineItemSplit);
    height: var(--lineItemHeight);
    border-right: 3px solid black;
    padding-right: var(--calPadding);
    position: absolute;
    font-size: var(--lineItemLabelFontSize);
    line-height: var(--lineItemHeight);
    display: block;
    text-align: right;
    cursor: pointer;
    display: var(--displayFull);
}

.calAbbrev {
    left: var(--calPadding);
    right: var(--lineItemSplit);
    height: var(--lineItemHeight);
    border-right: 3px solid black;
    padding-right: var(--calPadding);
    position: absolute;
    font-size: var(--lineItemLabelFontSize);
    line-height: var(--lineItemHeight);
    display: block;
    text-align: right;
    cursor: pointer;
    display: var(--displayAbbrev);
}

.calEntry {
    left: calc(100% - var(--lineItemSplit));
    right: calc(var(--calPadding) + var(--calShadowDp));
    height: var(--lineItemHeight);
    position: absolute;
    font-size: var(--lineItemEntryFontSize);
    line-height: var(--lineItemHeight);
    display: block;
    text-align: right;
    cursor: pointer;
    padding-right: 10px;
}

.calCash {
    background-color: var(--colorCashBG);
    color: var(--colorCashFG);
    bottom: calc(var(--calPadding) + var(--calShadowDp) + (var(--lineItemHeight) * 5));
    border: var(--lineItemBorderSz) solid var(--colorCashBG);
}

.calIncome {
    background-color: var(--colorIncomeBG);
    color: var(--colorIncomeFG);
    bottom: calc(var(--calPadding) + var(--calShadowDp) + (var(--lineItemHeight) * 4));
    border: var(--lineItemBorderSz) solid var(--colorIncomeBG);
}

.calBills {
    background-color: var(--colorBillsBG);
    color: var(--colorBillsFG);
    bottom: calc(var(--calPadding) + var(--calShadowDp) + (var(--lineItemHeight) * 3));
    border: var(--lineItemBorderSz) solid var(--colorBillsBG);
}

.calDebts {
    background-color: var(--colorDebtsBG);
    color: var(--colorDebtsFG);
    bottom: calc(var(--calPadding) + var(--calShadowDp) + (var(--lineItemHeight) * 2));
    border: var(--lineItemBorderSz) solid var(--colorDebtsBG);
}

.calPending {
    background-color: var(--colorPendingBG);
    color: var(--colorPendingFG);
    bottom: calc(var(--calPadding) + var(--calShadowDp) + (var(--lineItemHeight) * 1));
    border: var(--lineItemBorderSz) solid var(--colorPendingBG);
}

.calFinal {
    background-color: var(--colorFinalBG);
    color:var(--colorFinalFG);
    bottom: calc(var(--calPadding) + var(--calShadowDp) + (var(--lineItemHeight) * 0));
    border: var(--lineItemBorderSz) solid var(--colorFinalBG);
}

.calFinalLeft {
    border-bottom-left-radius: calc(var(--calRadius) - var(--calShadowSz) - var(--calBorderWd));
}

.calFinalRight {
    border-bottom-right-radius: calc(var(--calRadius) - var(--calShadowSz) - var(--calBorderWd));
}

.calCash:hover {
    border: 2px solid black;
}

.calIncome:hover {
    border: 2px solid black;
}

.calBills:hover {
    border: 2px solid black;
}

.calDebts:hover {
    border: 2px solid black;
}

.calFinal:hover {
    border: 2px solid black;
}

.calPositive {
    color: var(--colorPositive);
    font-weight: bolder;
    text-shadow: 0px 0px 2px #444;
}
.calNegative {
    color: var(--colorNegative);
    font-weight: bolder;
    text-shadow: 0px 0px 2px #444;
}