:root {
/* Light */ 
    --fntableLightEditableBackground : #FFF;
    --fntableLightCellBorder : #d9d9d9;;
    --fntableLightSelectedEditableBackground : #e2efff;
    --fntableLightSelectedLockedBackground : #c2cfdf;
    --fntableLightHeaderSelected: #929faf;
    

/* Dark */
    --fntableDarkEditableBackground : #000;
    --fntableDarkCellBorder : #5c5c5c;;
    --fntableDarkSelectedEditableBackground : #1a3657;
    --fntableDarkSelectedLockedBackground : #30455e;
    --fntableDarkHeaderSelected: #555d67;

/* Used*/
    --fntableEditableBackGround: var(--fntableLightEditableBackground);
    --fntableCellBorder: var(--fntableLightCellBorder);
    --fntableSelectedEditableBackground : var(--fntableLightSelectedEditableBackground);
    --fntableSelectedLockedBackground : var(--fntableLightSelectedLockedBackground);
    --fntableHeaderSelected : var(--fntableLightHeaderSelected);
    --fntableCellBGGain: #99ef6e;
    --fntableCellBGGainLocked: #abff80;
    --fntableCellBGExpense: #ffd3d3;
    --fntableCellBGExpenseLocked: #ff9696;
    --fntableGainSelectedEditableBackground : #81db54;
    --fntableGainSelectedLockedBackground : #5be416;
    --fntableExpenseSelectedEditableBackground : #fa9090;
    --fntableExpenseSelectedLockedBackground : #fc6161;
}

.financialTable {
    border-collapse: separate;
    border-spacing: 0;
    overflow:scroll;
    color: var(--foreColor1);
    font-size: small;
}

.financialTable th,
.financialTable td{
    border-spacing: 0;
    text-align: left;
    padding: 5px;
}

.financialTable th{
    background-color: var(--backgroundHeader);
    border-bottom: 1px solid var(--fntableCellBorder);
    border-right: 1px solid var(--fntableCellBorder);
    position: sticky;
    top: 0; 
    user-select: none;
}

.financialTable th:not(:nth-child(-n + 2)) {
    min-width: 120px;
}

.financialTableDataChanged{
    background-image: url("../images/ic_action_edit_dark.png");
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: 16px;    
}

.financialTable .lockedColumn{
    background-color: var(--backgroundHeader);
    border-bottom: 1px solid var(--fntableCellBorder);
    border-right: 1px solid var(--fntableCellBorder);
    min-width: 20px;
}

.financialTable .stickyColumn{
    position: sticky;
    left: 0px;
    z-index :1000;
}

.financialTable .centeredContent {
    text-align: center;
}

.financialTable .rightContent {
    text-align: right;
}


/*.financialTable td:focus-visible {
    outline: 1px solid var(--lightInputBorderColor);;
}*/

.financialTable .selected[contenteditable='true']{
    background-color: var(--fntableSelectedEditableBackground) !important;
}

.financialTable .selected[contenteditable='false']{
    background-color: var(--fntableSelectedLockedBackground) !important;
}

.financialTable .hideTextSelection::selection{
    background: transparent;
}


.financialTable .selectedLock{
    background-color: var(--fntableHeaderSelected);
}


.financialTable td{
    border-bottom: 1px solid var(--fntableCellBorder);
    border-right: 1px solid var(--fntableCellBorder);
    user-select: none;
}

.financialTable td[contenteditable='true']{
    background-color: var(--fntableEditableBackGround);
}

.financialTable td[contenteditable='false']{
    background-color: var(--backgroundHeader);
}

.financialTable .statusImage{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.financialTable td.classColorGain {
    background-color: var(--fntableCellBGGain);
}

.financialTable td.classColorExpense {
    background-color: var(--fntableCellBGExpense);
}

.financialTable td[contenteditable='false'].classColorGain{
    background-color: var(--fntableCellBGGainLocked);
}

.financialTable td[contenteditable='false'].classColorExpense{
    background-color: var(--fntableCellBGExpenseLocked);
}

.financialTable .selected[contenteditable='true'].classColorGain{
    background-color: var(--fntableGainSelectedEditableBackground) !important;
}

.financialTable .selected[contenteditable='false'].classColorGain{
    background-color: var(--fntableGainSelectedLockedBackground) !important;
}

.financialTable .selected[contenteditable='true'].classColorExpense{
    background-color: var(--fntableExpenseSelectedEditableBackground) !important;
}

.financialTable .selected[contenteditable='false'].classColorExpense{
    background-color: var(--fntableExpenseSelectedLockedBackground) !important;
}

.cellVisible{
    display: table-cell;
}

.cellHidden{
    display: none;
}


.financialTablePage section{
    overflow: scroll !important;
}