.cellcard:focus-within {
    background: var(--bs-secondary);
    color: var(--bs-dark);
}

.cellinput {
    border: solid thin var(--bs-dark);
}

    .cellinput:focus {
        background-color: var(--bs-warning);
    }

.cellinputtable {
    border: none;
}

    .cellinputtable:focus {
        background: var(--bs-warning);
    }


.columnlabel {
    width: 10% !important;
}

.columnvalue {
    width: 10% !important;
}

.showvalue {
    background: var(--bs-success);
    color: var(--bs-light);
}

.showdecimal {
    text-align: end;
}

.resultdecimal {
    text-align: end;
    background-color: lightyellow !important;
    opacity: 1 !important;
}

.showname {
    color: black;
    font-weight: bold;
}
.showname::placeholder {
    color: gray;
    font-weight: bold;
}

.showtype {
    background: var(--bs-light) !important;
}

.stickytable {
    white-space: nowrap;
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
    border-collapse: separate;
    border-spacing: 0 !important;
    table-layout: fixed !important;
}

.stickyrowthead {
    border: 0;
    background: lightblue !important;
    position: sticky;
    top: 0;
    z-index: 1;
}

.stickyrowth {
    border: 0;
    position: sticky;
    top: 0;
}

.stickycolth,
.stickycoltd {
    border: 0;
    width: 275px !important;
    word-wrap: break-word;
    text-align: center;
    display: inline-block;
}

.stickycoltd {
    border: 0;
    width: 275px !important;
    height: 46px;
    word-wrap: break-word;
    text-align: center;
    display: inline-block;
}

.stickycolth:first-child {
    border: 0;
    width: 350px !important;
    background: red !important;
    position: relative;
    left: 0px;
    z-index: 2;
    padding-top: 5px;
    text-align: left;
}

.stickycoltd:first-child {
    border: 0;
    width: 350px !important;
    background: white !important;
    position: sticky;
    left: 0px;
    z-index: 2;
    padding-top: 5px;
    text-align: left;
}

.stickycolthfocus {
    background: var(--bs-secondary) !important;
}

.stickycoltdfocus {
    background: var(--bs-secondary) !important;
}

.stickydiv {
    width: calc(100vw - 60px) !important;
    height: calc(100vh - 180px) !important;
    box-sizing: border-box !important;
    overflow: scroll !important;
}

.headerdiv {
    border: 2px solid white !important;
}

.hideSelect {
    display: none;
}

.hideValue {
    display: none;
}

.hideFormula {
    display: none;
}

.hideTd {
    height: 75px !important;
}

table.calculatorwide {
    white-space: nowrap;
    margin: 0;
    padding: 0;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border: none;
    height: max-content !important;
    width: 100% !important;
}

    table.calculatorwide tr {
        margin: 0;
        padding: 0;
        border: none;
    }

    table.calculatorwide th {
        border: none;
        margin: 0;
        padding: 0;
        background: #f0f;
        width: 250px;
        max-width: 250px;
        text-align: center;
    }

        table.calculatorwide th.iscollapsed {
            border: none;
            width: 20px !important;
            max-width: 20px !important;
        }

    table.calculatorwide td {
        border: none;
        margin: 0;
        padding: 0;
        text-align: left !important;
    }

        table.calculatorwide td.iscollapsed {
            background: var(--bs-info) !important;
        }

    table.calculatorwide thead th {
        padding: 0;
        margin: 0;
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--bs-info) !important;
    }

        table.calculatorwide thead th.iscollapsed {
            padding: 0;
            margin: 0;
            position: sticky;
            top: 0;
            z-index: 1;
        }

    table.calculatorwide tbody th {
        position: relative;
    }

    table.calculatorwide thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        width: 450px;
        max-width: 450px;
    }

    table.calculatorwide tbody th {
        border: none;
        padding: 0;
        margin: 0;
        position: sticky;
        left: 0;
        background: white;
        z-index: 1;
        vertical-align: middle;
        text-align: left !important;
    }


table.calculatorsmall {
    white-space: nowrap;
    margin: 0;
    padding: 0;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border: none;
    height: max-content !important;
    width: 100% !important;
}

    table.calculatorsmall tr {
        margin: 0;
        padding: 0;
        border: none;
    }

    table.calculatorsmall th {
        border: none;
        margin: 0;
        padding: 0;
        background: #f0f;
        width: 200px;
        max-width: 200px;
        text-align: center;
    }

        table.calculatorsmall th.iscollapsed {
            border: none;
            width: 20px !important;
            max-width: 20px !important;
        }

    table.calculatorsmall td {
        border: none;
        margin: 0;
        padding: 0;
        text-align: left !important;
    }

        table.calculatorsmall td.iscollapsed {
            background: var(--bs-info) !important;
        }

    table.calculatorsmall thead th {
        padding: 0;
        margin: 0;
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--bs-info) !important;
    }

        table.calculatorsmall thead th.iscollapsed {
            padding: 0;
            margin: 0;
            position: sticky;
            top: 0;
            z-index: 1;
        }

    table.calculatorsmall tbody th {
        position: relative;
    }

    table.calculatorsmall thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        width: 300px;
        max-width: 300px;
    }

    table.calculatorsmall tbody th {
        border: none;
        padding: 0;
        margin: 0;
        position: sticky;
        left: 0;
        background: white;
        z-index: 1;
        vertical-align: middle;
        text-align: left !important;
    }

table.annualaccount {
    white-space: nowrap;
    border: 1px solid var(--bs-dark) !important;
    margin: 0;
    padding: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    height: max-content !important;
    width: 100% !important;
}

    table.annualaccount tr {
        border: 1px solid var(--bs-dark) !important;
        margin: 0;
        padding: 0;
    }

    table.annualaccount th {
        border: 1px solid var(--bs-dark) !important;
        margin: 0;
        padding: 0;
        background: #f0f;
        width: 250px;
        max-width: 250px;
        text-align: center;
    }

        table.annualaccount th.iscollapsed {
            border: 1px solid var(--bs-dark) !important;
            width: 20px !important;
            max-width: 20px !important;
        }

    table.annualaccount td {
        border: 1px solid var(--bs-dark) !important;
        margin: 0;
        padding: 0;
        text-align: left !important;
    }

        table.annualaccount td.iscollapsed {
            background: var(--bs-info) !important;
        }

    table.annualaccount thead th {
        border: 1px solid var(--bs-dark) !important;
        padding: 0;
        margin: 0;
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--bs-info) !important;
    }

        table.annualaccount thead th.iscollapsed {
            border: 1px solid var(--bs-dark) !important;
            padding: 0;
            margin: 0;
            position: sticky;
            top: 0;
            z-index: 1;
        }

    table.annualaccount tbody th {
        position: relative;
    }

    table.annualaccount thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        width: 450px;
        max-width: 450px;
    }

    table.annualaccount tbody th {
        border: 1px solid var(--bs-dark) !important;
        padding: 0;
        margin: 0;
        position: sticky;
        left: 0;
        background: white;
        z-index: 1;
        vertical-align: middle;
        text-align: left !important;
    }

.v_0 {
    border: none;
    padding-left: 10px !important;
    font-weight: bold;
}

.l_variable, .l_variable:focus {
    background: url(/svgs/variableicon.svg);
    background-repeat: no-repeat;
}

.l_close, .l_close:focus {
    background: url(/svgs/folderclosedicon.svg);
    background-repeat: no-repeat;
}

.l_childs, .l_childs:focus {
    background: url(/svgs/folderopenicon.svg);
    background-repeat: no-repeat;
}

.l_last, .l_last:focus {
    background: url(/svgs/foldericon.svg);
    background-repeat: no-repeat;
}

.l_0, .l_0:focus {
    padding-left: 30px !important;
    font-weight: bold;
    background-position-y: 2px;
    background-position-x: 5px;
}

.l_1, .l_1:focus {
    padding-left: 30px !important;
    font-weight: bold;
    background-position-y: 2px;
    background-position-x: 5px;
}

.l_2, .l_2:focus {
    padding-left: 45px !important;
    font-weight: bold;
    background-position-y: 2px;
    background-position-x: 20px;
}

.l_3, .l_3:focus {
    padding-left: 60px !important;
    font-weight: bold;
    background-position-y: 2px;
    background-position-x: 35px;
}

.l_4, .l_4:focus {
    padding-left: 75px !important;
    font-weight: bold;
    background-position-y: 2px;
    background-position-x: 50px;
}

.l_5, .l_5:focus {
    padding-left: 90px !important;
    font-weight: bold;
    background-position-y: 2px;
    background-position-x: 65px;
}

.l_6, .l_6:focus {
    padding-left: 105px !important;
    font-weight: bold;
    background-position-y: 2px;
    background-position-x: 80px;
}

.focuslabel {
}

.hasfocus {
    background-color: var(--bs-warning) !important;
}