.textCenter {
    text-align: center !important;
}
.textRight {
    text-align: right !important;
    padding-right:0.5em;
}
.textLeft {
    text-align: left !important;
    padding-left: 0.5em;
}

.roundedTL {
    border-top-left-radius: var(--sizeDialogRadius);
}
.roundedBL {
    border-bottom-left-radius: var(--sizeDialogRadius);
}
.roundedTR {
    border-top-right-radius: var(--sizeDialogRadius);
}

.roundedBR {
    border-bottom-right-radius: var(--sizeDialogRadius);
}

.hidden {
    display: none !important;
}

.invisible {
    visibility:hidden;
}

.rowShadowTopBottom {
    box-shadow: var(--shadowRowTop), var(--shadowRowBottom);
    padding: 10px 0px;
}

.rowShadowTop {
    box-shadow: var(--shadowRowTop);
    padding: 10px 0px 0px 0px !important;
}

.rowShadowBottom {
    box-shadow: var(--shadowRowBottom);
    padding: 0px 0px 10px 0px !important;
}

.iconbutton {
    width: calc(var(--btnIconButtonSize) * 1) !important;
    height: calc(var(--btnIconButtonSize) * 1) !important;
    font-family: 'Material Icons';
    font-size: 1.5em;
    line-height: 0.5em;
    padding: 0.2em;
}

.INVALID {
    background-color: lightpink;
    color: red;
}
.VALID {
    background-color: white;
    color: black;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--colorBodyBG);
    margin: 0px;
    padding: 0px;
    border: 0px solid black;
    border-collapse: collapse;
    overflow:hidden;
}
table {
    border-collapse: collapse;
    border-spacing:0px;
    border: 0px solid black;
}
td {
    padding:0px;
    margin:0px;
}

input, select {
    float: none;
    text-align: center;
    padding: 10px;
    margin: 15px 5px;
    font-size: var(--textSmallSize);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow);
    width: calc(100% - 40px);
}
select {
    width: calc(100% - 20px);
    cursor: pointer;
    min-width: 10em;
}

input[type=button] {
    width: 90%;
    cursor:pointer;
}

input[type=number] {
    text-align: right;
    width: 7em;
}

input[type=color] {
    height: 25px;
    width: 50px;
    padding: 2px !important;
    cursor: pointer;
}
input[type=date] {
    cursor: pointer;
}

input[type=checkbox] {
    transform: scale(2.5);
    width: 1em !important;
    height: 1em !important;
    margin:10px 20px;
    display: inline-block;
    cursor: pointer;
}
input[type=button] {
    cursor:pointer;
}
input.iconbutton {
    font-size: 1.5em;
    line-height: 1em;
}
input[type=number]:hover, input[type=text]:hover, input[type=password]:hover, input[type=checkbox]:hover, input[type=button]:hover {
    box-shadow: var(--shadow), 0px 0px 5px 3px #444444 inset;
}

.divLogin {
    position: absolute;
    display: inline-block;
    width: 26em;
    height: 26em;
    border-radius: 15px;
    padding: 10px;
    margin: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--colorHeaderBG);
    box-shadow: 0px 0px 1em 0.1em #000 inset, 0px 0px 3em 0.5em #ccc;
}
.tblLogin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 25em;
    height: 25em;
    min-width: 20em;
    min-height: 20em;
}

.tblWindow, .tblWindowTest, .tblDialog {
    position: absolute;
    margin-bottom: calc(var(--windowMargin) * 2);
    height: calc(100% - (var(--windowMargin) * 2));
    border: 0px;
    border-radius: var(--windowMargin);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.tblWindow, .tblWindowTest {
    width: calc(100% - (var(--windowMargin) * 2));
}
.tblDialog {
    width: fit-content;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: min-content;
    box-shadow: 0px 0px 3em 1.0em #222;
}

.tblWindowTitlebar {
    position: relative;
    background-color: var(--colorWindowBG);
    color: var(--colorWindowFG);
    font-weight: bolder;
    line-height: calc(var(--btnIconButtonSize) * 2);
    height: calc(var(--btnIconButtonSize) * 2);
    padding: 0px 2em 0px 2em;
    border-bottom: 3px solid var(--colorBodyBG);
}
.tblWindowFooter {
    height: 40px;
    text-align: right;
    background-color: var(--colorHeaderBG);
    color: var(--colorHeaderFG);
    font-weight: lighter;
    padding: 10px;
}
.tblWindowSpacer {
    backdrop-filter: blur(5px) opacity(0.8);
    background-color: #222222cc;
    position: relative;
    text-align: center;
    width:33%;
}
.tblWindowHeader {
    background-color: var(--colorHeaderBG);
    color: var(--colorHeaderFG);
    font-weight: bolder;
}

.divWindowSpacer {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px) opacity(0.8);
    background-color: #222222cc;
    text-align: center;
}

.divBubbleHeader {
    text-align: center;
    align-content: end;
    padding-bottom: 20px;
    background: var(--colorHeaderBG);
    color: var(--colorHeaderFG);
    font-weight: bolder;
    border-radius: 15px;
    width: 100%;
    height: 4em;
    border: 3px solid black;
    box-shadow: var(--shadow) inset;
}
.tblWindowItem {
    text-align: right;
    padding-bottom: 0.5em;
    background-color: var(--colorHeaderBG);
    color: var(--colorHeaderFG);
    font-weight: lighter;
    padding-right: 20px;
    height: 2.5em;
    font-size: 0.75em;
    vertical-align: bottom;
}
.tblWindowValue {
    text-align: center;
    background-color: var(--colorPageBG);
    color: var(--colorPageFG);
    font-weight: normal;
    height: 3em;
    
}
.tblWindowValue:has(input[type=number]), .tblWindowValue:has(input[type=date]), .tblWindowValue:has(input[type=text]) {
    min-width: 9em;
}
.tblWindowItemSpacer {
    width: 150px;
    text-align: right;
    background-color: var(--colorHeaderBG);
    color: var(--colorHeaderFG);
    font-weight: lighter;
    padding-right: 20px;
}
.tblWindowValueSpacer {
    width: 75px;
    text-align: center;
    background-color: var(--colorPageBG);
    color: var(--colorPageFG);
    font-weight: normal;
}

.tdTabs, .tdTabsTest {
    background-color: var(--colorBodyBG);
    position: relative;
    height: var(--tabButtonHeight);
    border-radius: var(--tabNormalEdgeRadius);
}
.tdTabsTest {
    background-color: var(--colorBodyBGTest);
    border-radius: var(--tabNormalEdgeRadius);
}

.divTabPaneStart, .divTabPaneStartTest {
    border-top-left-radius: var(--tabNormalEdgeRadius);
    display: table-cell;
    background-color: var(--colorWindowBG);
    width: var(--tabNormalEdgeWidth);
}
.divTabPaneStartTest {
    background-color: var(--colorWindowBGTest);
}
.divTabPaneEnd, .divTabPaneEndTest {
    border-top-right-radius: var(--tabNormalEdgeRadius);
    display: table-cell;
    background-color: var(--colorWindowBG);
    width: var(--tabNormalEdgeWidth);
}
.divTabPaneEndTest {
    background-color: var(--colorWindowBGTest);
}
.divTabButton, .divTabButtonTest {
    padding: 0px 10px;
    display: table-cell;
    line-height: var(--tabButtonHeight);
    font-variant-caps: petite-caps;
    font-size: var(--tabButtonFontSize);
    color: var(--colorTabButtonText);
    background-color: var(--colorWindowBG);
    text-shadow: 0px 0px 7px black;
    box-shadow: 0px 0px 10px 3px inset var(--colorTabButtonShadow);
    border-left: 1px solid black;
    border-right: 1px solid black;
    cursor: pointer;
}
.divTabButtonTest {
    background-color: var(--colorWindowBGTest);
}
.divTabButton:hover, .divTabButtonTest:hover {
    color: var(--colorTabButtonTextHover);
    background-color: var(--colorTabButtonBGHover);
    box-shadow: 0px 0px 10px 3px inset var(--colorTabButtonShadowHover);
}
.divTabSelected {
    color: var(--colorTabButtonTextSelected);
    background-color: var(--colorTabButtonBGSelected);
    box-shadow: 0px 0px 10px 3px inset var(--colorTabButtonShadowSelected);
}
.divTabSelected:hover {
    color: var(--colorTabButtonTextSelectedHover);
    background-color: var(--colorTabButtonBGSelectedHover);
    box-shadow: 0px 0px 10px 3px inset var(--colorTabButtonShadowSelectedHover);
}

.divTabPanel, .divTabPanelTest {
    position:absolute;
    top:0px;
    right:0px;
    text-align:right;
}
.divTabPanelLeft, .divTabPanelLeftTest {
    position: relative;
    top: 0px;
    right: 0px;
    width: var(--tabPanelEdgeWidth);
    color: var(--colorTabSettingsText);
    background-color: var(--colorTabSettingsBG);
    border-top-left-radius: var(--tabPanelEdgeRadius);
    display: table-cell;
}
.divTabPanelRight, .divTabPanelRightTest {
    position: relative;
    top: 0px;
    right: 0px;
    width: var(--tabPanelEdgeWidth);
    color: var(--colorTabSettingsText);
    background-color: var(--colorTabSettingsBG);
    border-top-right-radius: var(--tabPanelEdgeRadius);
    display: table-cell;
}
.divTabSettings, .divTabSettingsTest {
    position: relative;
    top: 0px;
    right: 0px;
    width: var(--tabButtonHeight);
    padding: 0px 10px;
    display: table-cell;
    text-align: center;
    font-size: var(--tabSettingsFontSize);
    font-variant-caps: petite-caps;
    line-height: var(--tabButtonHeight);
    color: var(--colorTabSettingsText);
    background-color: var(--colorTabSettingsBG);
    box-shadow: 0px 0px 10px 3px inset var(--colorTabSettingsShadow);
    padding: 0px 10px;
    border-right: 1px solid black;
    border-left: 1px solid black;
    cursor: pointer;
    font-family: 'Material Icons';
}
.divTabSettings:hover, .divTabSettingsTest:hover {
    box-shadow: 0px 0px 10px 3px inset var(--colorTabSettingsShadowHover);
    background-color: var(--colorTabSettingsBGHover);
    color: var(--colorTabSettingsTextHover);
}
.divTabLogout, .divTabLogoutTest {
    position: relative;
    top: 0px;
    right: 0px;
    width: var(--tabButtonHeight);
    padding: 0px 10px;
    display: table-cell;
    text-align: center;
    font-size: var(--tabSettingsFontSize);
    font-variant-caps: petite-caps;
    line-height: var(--tabButtonHeight);
    color: var(--colorTabSettingsText);
    background-color: var(--colorTabSettingsBG);
    box-shadow: 0px 0px 10px 3px inset var(--colorTabSettingsShadow);
    padding: 0px 10px;
    border-right: 1px solid black;
    border-left: 1px solid black;
    cursor: pointer;
    font-family: 'Material Icons';
}
.divTabLogout:hover, .divTabLogoutTest:hover {
    box-shadow: 0px 0px 10px 3px inset var(--colorTabSettingsShadowHover);
    background-color: var(--colorTabSettingsBGHover);
    color: var(--colorTabSettingsTextHover);
}
.divTabHelp, .divTabHelpTest {
    position: relative;
    top: 0px;
    right: 0px;
    width: var(--tabButtonHeight);
    padding: 0px 10px;
    display: table-cell;
    text-align: center;
    font-size: var(--tabSettingsFontSize);
    font-variant-caps: petite-caps;
    line-height: var(--tabButtonHeight);
    color: var(--colorTabSettingsText);
    background-color: var(--colorTabSettingsBG);
    box-shadow: 0px 0px 10px 3px inset var(--colorTabSettingsShadow);
    padding: 0px 10px;
    border-right: 1px solid black;
    border-left: 1px solid black;
    cursor: pointer;
    font-family: 'Material Icons';
}

    .divTabHelp:hover, .divTabHelpTest:hover {
        box-shadow: 0px 0px 10px 3px inset var(--colorTabSettingsShadowHover);
        background-color: var(--colorTabSettingsBGHover);
        color: var(--colorTabSettingsTextHover);
    }
.divCloseButton {
    background-color: #330000;
    color: #444444;
    text-align: center;
    line-height: calc(var(--btnIconButtonSize) * 1.4) !important;
    height: calc(var(--btnIconButtonSize) * 1.4) !important;
    width: calc(var(--btnIconButtonSize) * 1.4) !important;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    padding: 0px;
}
    .divCloseButton:hover {
        background-color: #CC0000;
        color: #CCCCCC;
        box-shadow: 0px 0px 0.5em 0.3em #333 inset;
    }

.tdContents {
    background-color: green;
    position: relative;
}

.trFooter, .trFooterTest {
    height: var(--windowMargin);
    width: calc(100% - 8px);
    position: absolute;
    bottom: 0px;
    border-bottom-left-radius: var(--windowMargin);
    border-bottom-right-radius: var(--windowMargin);
    border-bottom: var(--borderSize) solid var(--colorWindowBG);
    border-left: var(--borderSize) solid var(--colorWindowBG);
    border-right: var(--borderSize) solid var(--colorWindowBG);
    background-color: var(--colorPageBG);
    color: var(--colorPageFG);
}
.trFooterTest {
    border-bottom: var(--borderSize) solid var(--colorWindowBGTest);
    border-left: var(--borderSize) solid var(--colorWindowBGTest);
    border-right: var(--borderSize) solid var(--colorWindowBGTest);
    background-color: var(--colorPageBGTest);
    color: var(--colorPageFGTest);
}

.divContents, .divContentsTest {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding: 2em 1em 0em 1em; 
    overflow-y: scroll;
}

.testScalar {
    background-color: var(--colorBodyBGTest);
    transform: translate(-30%, -30%) scale(0.4);
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 250%;
    width: 250%;
}

.contentsPane, .contentsPaneTest {
    position: absolute;
    top: var(--tabButtonHeight);
    bottom: var(--windowMargin);
    left: 0px;
    right: 0px;
    border: var(--borderSize) solid var(--colorWindowBG);
    background-color: var(--colorPageBG);
}
.contentsPaneTest {
    border: var(--borderSize) solid var(--colorWindowBGTest);
    background-color: var(--colorPageBGTest);
    color: var(--colorPageFGTest);
}

.contentsPane > td {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: var(--sizeShadowContentsPane) calc(var(--sizeShadowContentsPane) + var(--scrollWidth)) var(--sizeShadowContentsPane) var(--sizeShadowContentsPane);
    box-shadow: inset 0px var(--sizeShadowContentsPane) var(--sizeShadowContentsPane) calc(0px - var(--sizeShadowContentsPane)) var(--colorShadowNormal), inset 0px calc(0px - var(--sizeShadowContentsPane)) var(--sizeShadowContentsPane) calc(0px - var(--sizeShadowContentsPane)) var(--colorShadowNormal), inset var(--sizeShadowContentsPane) 0px var(--sizeShadowContentsPane) calc(0px - var(--sizeShadowContentsPane)) var(--colorShadowNormal), inset calc((0px - (var(--sizeShadowContentsPane) * 1.5)) - var(--scrollWidth)) 0px var(--sizeShadowContentsPane) calc(0px - var(--sizeShadowContentsPane)) var(--colorShadowNormal);
    padding: var(--sizeShadowContentsPane) calc(var(--sizeShadowContentsPane) + var(--scrollWidth)) var(--sizeShadowContentsPane) var(--sizeShadowContentsPane);
}


.selDateHeader {
    position: sticky;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -1em);
    z-index: 1;
    display: inline-block;
    border-collapse: collapse;
    border-spacing: 0px;
    border-radius: 20px;
    border: 3px solid white;
    box-shadow: 0px 0px 15px 5px #FFF;
}

.selDateValue {
    width: 9.5em;
    line-height: 2em;
    border-left: 3px solid white;
    border-right: 3px solid white;
    text-align: center;
    font-size: 1.5em;
    font-variant: small-caps;
    background-color: dodgerblue;
    color: white;
}

.selDate {
    width: 2em;
    text-align: center;
    font-size: 3em;
    font-variant: small-caps;
    cursor: pointer;
    background-color: #000044;
    color: white;
}

.selDateNext {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    visibility: hidden;
}

.selDatePrev {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    visibility: hidden;
}

.selDate:hover {
    background-color: #000066;
    color: yellow;
    border-color: yellow;
    box-shadow: 0px 0px 10px 3px #222222 inset;
}

.selDate h1 {
    font-size: 0.5em;
    margin: 0px;
}

.selDate p {
    font-size: 0.25em;
    margin: 0px;
}

.subpaneItem {
    min-width:50%;
    justify-self:center;
    border: 1px solid black;
    border-collapse: collapse;
    position: relative;
    margin-bottom: var(--tabButtonHeight);
}

.subPanel tr:hover {
    color: yellow !important;
    box-shadow: white 0px 0px 20px inset;
    cursor: pointer;
    font-weight: bolder;
}

.editTitle {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
    font-variant: small-caps;
    font-size: var(--textTitle);
    color: white;
    background-color: black;
}

.editHeader {
    cursor:pointer;
    border: 1px solid black;
    padding: 10px;
    text-align: center;
    font-variant: small-caps;
    font-size: var(--textHeader);
    color: white;
    background-color: black;
    width:100px;
}

.editCaption {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
    font-variant: small-caps;
    font-size: var(--textCaption);
    color: white;
    background-color: black;
}

.editCell {
    font-size: var(--textBigSize);
    padding: 15px 0px 15px 0px;
}

.editFormCell {
    background-color: dimgray;
    font-size: var(--textBigSize);
    padding: 5px 0px 5px 0px;
}
.editFormCell span {
    font-size: var(--textSmallSize);
}
.editFormCell.rowShadowTop {
    vertical-align:bottom;
}

.testCaption {
    font-size: var(--textCaption);
    text-align: center;
    border: 1px solid black;
    padding: 5px;
    margin: 5px;
    box-shadow: var(--shadow);
}


.divTestBody {
    background-color: var(--colorBodyBGTest);
    color: var(--colorBodyFGTest);
}
.divTestWindow {
    background-color: var(--colorWindowBGTest);
    color: var(--colorWindowFGTest);
}
.divTestPage {
    background-color: var(--colorPageBGTest);
    color: var(--colorPageFGTest);
}
.divTestToday {
    background-color: var(--colorTodayBGTest);
    color: var(--colorTodayFGTest);
}
.divTestCash {
    background-color: var(--colorCashBGTest);
    color: var(--colorCashFGTest);
}
.divTestIncome {
    background-color: var(--colorIncomeBGTest);
    color: var(--colorIncomeFGTest);
}
.divTestBills {
    background-color: var(--colorBillsBGTest);
    color: var(--colorBillsFGTest);
}
.divTestDebts {
    background-color: var(--colorDebtsBGTest);
    color: var(--colorDebtsFGTest);
}
.divTestPending {
    background-color: var(--colorPendingBGTest);
    color: var(--colorPendingFGTest);
}
.divTestFinal {
    background-color: var(--colorFinalBGTest);
    color: var(--colorFinalFGTest);
}