.textCenter {
    text-align: center !important;
}
.textRight {
    text-align: right !important;
    padding-right:0.25em;
}
.textLeft {
    text-align: left !important;
    padding-left: 0.5em;
}
.textTop {
    vertical-align: top;
}
.textBottom {
    vertical-align: bottom;
}
.textMiddle {
    vertical-align: middle;
}
.textIcon {
    font-family: 'Material Icons';
}

.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;
}

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

.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;
}
.iconaction {
    width: 5em !important;
}

.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;
    font-size: 16px;
}
table {
    border-collapse: collapse;
    border-spacing:0px;
    border: 0px solid black;
}
th {
    align-content: end;
}
td {
    padding:0px;
    margin:0px;
}

input, select {
    float: none;
    text-align: center;
    padding: var(--sizeInputPadding);
    margin: var(--sizeInputMargin);
    font-size: var(--textInputSize);
    border-radius: var(--sizeInputBorderRadius);
    background-color: rgba(255, 255, 255);
    box-shadow: var(--shadow);
    width: calc(100% - 40px);
}
input:disabled {
    opacity: 0.5;
    background-color: #999;
}
input.phaseCompleted:disabled {
    background-color: #049714;
}
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=image] {
    height: 2em;
    width: 3em;
}
input[type=image].selected {
    background-color:red;
}

input[type=checkbox], input[type=radio] {
    transform: scale(1);
    width: var(--btnIconButtonSize) !important;
    height: var(--btnIconButtonSize) !important;
    display: inline-block;
    cursor: pointer;
}
input[type=radio] {
    border-radius: 5px;
}
input[type=button] {
    cursor:pointer;
}
input.iconbutton {
    font-size: var(--sizeInputIconbuttonFont);
    line-height: var(--sizeInputIconbuttonLine);
}
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;
}
.radio_contain {
    display: inline-block;
    border-radius: 100px;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
}
.radio_contain input[type="radio"] {
    display: block;
    margin: 0;
}

.divLogin {
    position: absolute;
    display: inline-block;
    border-radius: 15px;
    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 {
    margin:20px;
}

.RegisterRule {
    font-size: 0.75em;
}
.RegisterRuleValid {
    color: green;
}
.RegisterRuleValid::before {
    /*content: '';*/
    content: '';
    font-family: 'Material Icons';
    color: green;
}

.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 {
    max-width: 100%;
    height: min-content;
    max-height:100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 3em 1.0em #222;
}

.tblWindowTitlebar {
    position: relative;
    background-color: var(--colorWindowBG);
    color: var(--colorWindowFG);
    font-weight: bolder;
    border-bottom: 3px solid var(--colorBodyBG);
    font-size: 1em;
    height: calc(var(--btnIconButtonSize) * 1.4);
    padding-right: calc(var(--btnIconButtonSize) * 1.4);
}
.tblWindowTitlebar h1 {
    font-size: 1.5em;
}
.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;
    padding-left: 1em;
    background-color: var(--colorHeaderBG);
    color: var(--colorHeaderFG);
    font-size: var(--textBigSize);
    font-weight: lighter;
    padding-right: 20px;
    height: 2.5em;
    vertical-align: bottom;
}
.tblWindowValue {
    text-align: center;
    background-color: var(--colorPageBG);
    color: var(--colorPageFG);
    font-weight: normal;
    font-size: var(--textSmallSize);
    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;
}






.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;
    font-size: 1em;
}
    .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: 1em 1em 1em 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%;
}

.inputCell {
    font-size: var(--sizeInputCellBase) !important;
}
.datatablecaption {
    padding-top: 1em;
}
.datatable {
    border-collapse: collapse;
    border: 1px solid black;
    position:relative;
    left: 50%;
    transform: translate(-50%,0%);
}
.datatable th {
    background-color: var(--colorTableHeaderBG);
    color: var(--colorTableHeaderFG);
    align-content: end;
    font-size: var(--textTableHeaderSize);
}
.datatable td {
    background-color: var(--colorTableCellBG);
    color: var(--colorTableCellFG);
    align-content: end;
    font-size: var(--textTableCellSize);
}
.datatable td.rowDeleted {
    background-color: var(--colorTableCellDelBG);
    color: var(--colorTableCellDelFG);
    text-decoration:line-through;
}
.minidatatable {
    border-collapse:collapse;
    border: 1px solid black;
    margin: 5px 5px;
    width: calc(100% - 40px);
}
.minidatatable th {
    background-color: var(--colorTableHeaderBG);
    color: var(--colorTableHeaderFG);
    align-content: center;
    font-size: var(--textTableHeaderSize);
}
.minidatatable td {
    background-color: var(--colorTableCellBG);
    color: var(--colorTableCellFG);
    align-content: center;
    font-size: var(--textTableCellSize);
    padding: 2px 2px;
}
.minidatatable .rowShadowTopBottom {
    padding: 4px;
}
.floatingTable {
    width: unset;
    vertical-align: bottom;
    position: absolute;
    top: 0px;
    z-index: 10;
}

.ShiftIncomplete {
    color: darkorange !important;
    background-color: lightgoldenrodyellow !important;
}

.itemlogo {
    width: calc(var(--btnIconButtonSize) * 2) !important;
    height: calc(var(--btnIconButtonSize) * 1) !important;
}

.punchIN {
    background-color: var(--colorPunchInBG) !important;
    color: var(--colorPunchInFG) !important;
}
.punchOUT {
    background-color: var(--colorPunchOutBG) !important;
    color: var(--colorPunchOutFG) !important;
}


.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: var(--sizeMinContentWidth);
    left: 50%;
    transform: translate(-50%,0%);
    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);
}

.mapCarIcon {
    background-image: url('/images/icons/carIcon.png');
    width: 20px;
    height: 20px;
    display: block;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
}
.mapZoomButton {
    width: var(--sizeMapZoomButtonWidth);
    height: var(--sizeMapZoomButtonHeight);
    font-size: var(--sizeMapZoomButtonFont);
    font-weight: bolder;
    color: white;
    background-color: #0c5fb0;
    text-align: center;
    padding: 0.5em;
    margin: 0.25em;
    box-shadow: var(--shadow);
    cursor: pointer;
}
.custom-map-control {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 3px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    width: 33px;
    height: 33px;
    font-size: 10px;
    color: #333;
    display: flex;
    justify-content: center;
    /* Centers items horizontally */
    align-items: center;
    /* Ensure it's above the map but part of the map's control flow */
    z-index: 1;
    pointer-events: auto;
    /* Allow interaction with the control */
}
.mapstyles-select {
    position: relative;
    top: 5px;
    left: 5px;
    z-index: 1000;
}
.mapMarker {
    display: block;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
}
}

.lineItemIncomplete {
    background-color: lightpink;
}

.logoButton {
    display: inline-block;
    width: calc(var(--btnIconButtonSize) * 2);
    height: calc(var(--btnIconButtonSize) * 1);
    background-size: contain;
    border: 1px solid black;
    margin: 5px;
    box-shadow: var(--shadow);
    background-color: lightgrey;
    cursor: pointer;
}
.logoButton.logoButtonSelected {
    background-color:khaki;
    box-shadow:#CCC;
}