body {
    /*overflow-y: hidden;*/ /* Hide vertical scrollbar */
    /*overflow-x: hidden;*/ /* Hide horizontal scrollbar */
}
.accountsRowHeadBottomColor {
    color: white;
    /*background-color: #006DCC;
    background-color: #333333;
    background-color: #333;
    background-color: silver;
    background-color: gray;
    background-color: dimgray;*/
    background-color: #36454F
}
.reportsRowHeadBottomColor {
    color: white;
    background-color: #36454F
}
.HeadBottomGrayish {
    color: white;
    background-color: #95A5A6;
}
.HeadBottomIndigo {
    color: white;
    background-color: slateblue;
}

.HeadBottomMaroon {
    color: white;
    background-color: maroon;
}
.HeadBottomAlice {
    color: white;
    background-color: #1287A8;    
}
.HeadBottomOlive {
    color: white;
    /*background-color: darkolivegreen;*/
    background-color: darkslategray;
}
.HeadBottomBlue {
    color: white;
    background-color: #006DCC;
}

table {
    table-layout: fixed;
    width: 100%;
    margin-top: 2px;
}
thead {
    display: table; /* to take the same width as tr */
    width: calc(100% - 2px); /* - 17px because of the scrollbar width */
}
table tr td {
    word-wrap: break-word;
    /*text-align: center;*/
}

table, th, td {
    border-collapse: collapse;
    /*border: 0px solid #000;*/
}
th, td {
    /* padding: 12px 15px;
            text-align: left; */
    border-bottom: 1px solid #ddd;
}
thead, tbody {
    display: block;
}
tbody tr:hover {
    background-color: lightyellow;
}

tr {
    display: table; /* display purpose; th's border */
    width: 100%;
    /*box-sizing: border-box;*/ /* because of the border (Chrome needs this line, but not FF) */
}
tbody tr:nth-child(odd) {
    background-color: #f2f2f2; /* Light gray for odd rows */
    background-color: #ecf0f1;
    background-color: #F9FAFB;
}

tbody tr:nth-child(even) {
    background-color: #ffffff; /* White for even rows */
}
tfoot {
    display: block;
}
tfoot tr {
    display: table;
    width: 100%;
}
/* Fixed Footer */
.tfootBottom {
    position: sticky;
    bottom: 0;
    z-index: 10;
    /*margin-top: auto;*/ /* Pushes footer to bottom */
}
tfoot td {
    /*position: sticky;*/
    /*bottom: 0;*/
    /*z-index: 10;*/
    /*  background: #f8f9fa; */
    /*  box-shadow: 0 -2px 2px -1px rgba(0,0,0,0.1); */
}
.TableHeaderFont {
    font-size: calc(08px + 0.50vw);
}
.TableHeaderFont2 {
    font-size: calc(08px + 0.26vw);
}
.TableRowFont {
    font-size: calc(07px + 0.40vw);
}

.accountsRowHeaderFont {
    font-size: calc(08px + 0.50vw);
    height: calc(28px + 0.60vw);
}
.accountsRowFont {
    font-size: calc(10px + 0.42vw);
    height: calc(24px + 0.60vw);
}
.reportsRowHeaderFont {
    font-size: calc(08px + 0.50vw);
    height: calc(28px + 0.60vw);
}
.reportsRowHeaderFont2 {
    font-size: calc(08px + 0.40vw);
    height: calc(28px + 0.30vw);
}
.reportsRowFont {
    font-size: calc(10px + 0.42vw);
    height: calc(24px + 0.60vw);
}
.reportsRowFont2 {
    font-size: calc(10px + 0.32vw);
    height: calc(24px + 0.30vw);
}
/* Default table styles (desktop) */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
}

/* Mobile styles (flexbox card layout) */
@media (max-width: 550px) {
    /* Hide thead */
    .responsive-table thead {
        display: none;
    }
    /* Convert rows to flex containers */
    .responsive-table tr {
        display: flex;
        flex-direction: column; /* Stack cells vertically */
        margin-bottom: 0.5rem;
        border: 1px solid #ddd;
        padding: 0.5rem;
        border-radius: 08px;
        /*font-size: 14px;*/
        font-size: calc(08px + 0.52vw);
        text-align: left;
        height:auto;
    }
    /* Reset td defaults and remove width constraints */
    .responsive-table td {
        display: flex;
        width: 100% !important; /* Override predefined widths */
        border: none;
        padding: 0.2rem;
        align-items:start;
    }
        /* Add labels using data-attribute */
        .responsive-table td::before {
            content: attr(data-label);
            font-weight: bold;
            display: inline-block;
            margin-right: 0.2rem;
            padding-left: 0px;
            /*width: 100px;*/
            width: calc(70px + 5vw);
           /* width: auto;*/
            text-align: start;
        }
}