@font-face {
    font-family: "Chomsky";
    src: url("Chomsky.otf");
}

body {
    margin: 0;
    background-color: #e0e0e0;
    height: 100vh;
}

.container {
    position: relative;
    max-width: 900px;
    margin: auto;
    background-color: white;
    height: calc(100% - 2px);
    border: 1px solid black;
}

.left-shadow {
    width: 10px;
    height: 100vh;
    position: absolute;
    top: -1px;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.2));
}

.right-shadow {
    width: 10px;
    height: 100vh;
    position: absolute;
    top: -1px;
    right: 0;
    transform: translateX(100%);
    background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0));
}


.main-header {
    background-color: #e0e0e0;
    padding: 8px 0;
    height: 30px;
    font-size: 28px;
    border-bottom: 1px solid black;
    text-align: center;
    font-family: "Chomsky";
}

.navbar {
    margin: 0;
    padding: 3px 0;
    height: 18px;
    font-size: 16px;
    border-bottom: 1px solid black;
    text-align: center;
    background-color: #d0d0d0;
}

.navbar li {
    display: inline-block;
}
.navbar li + li::before {
    content: "•";
}

.navbar li button {
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    padding: 0 10px;
    margin: 0 10px;
    cursor:pointer;
}
.navbar li button:hover {
    text-decoration: underline;
}



.sidebar {
    width: 25%;
    position: absolute;
    left: 0;
    height: calc(100% - 72px);
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
    font-size: 16px;
}

.sidebar h1 {
    background-color: #e0e0e0;
    padding: 1px 20px 1px 4px;
}

.sidebar h2 {
    background-color: #f0f0f0;
    padding: 1px 20px 1px 4px;
}

.sidebar .triangle {
    position: absolute;
    font-size: 12px;
    color: #c0c0c0;
    top: 3px;
    right: 4px;
}

.sidebar ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.sidebar .add-account {
    color: gray;
}

.sidebar h1, .sidebar h2, .sidebar li, .sidebar .add-account {
    cursor: pointer;
}

.sidebar h1, .sidebar h2, .sidebar li, .sidebar .add-account {
    position: relative;
    font-size: inherit;
    margin: 0;
    border-bottom: 1px solid #c0c0c0;
}

.sidebar li, .sidebar .add-account {
    cursor: pointer;
    padding: 1px 4px 1px 4px;
}
.sidebar li:hover, .sidebar .add-account:hover {
    background-color: #ffffc0;
}
.sidebar .selected {
    font-weight: bold;
    background-color: #ffffc0;
}



.content-wrapper {
    width: 75%;
    position: absolute;
    left: 25%;
    height: calc(100% - 72px);
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}


.content header {
    position: sticky;
    top: 0;
}

.content h1 {
    font-family: "Chomsky";
    font-weight: normal;
}

.content table {
    table-layout: fixed;
    width: 100%;
    border-spacing: 0;
    border-left: 1px solid #c0c0c0;
}
.content th {
    text-align: left;
}
.content td {
    height: 20px;
}

.content td {
    border-bottom: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
}
.content thead {
    position: sticky;
    top: 0;
}
.content thead th {
    border-right: 1px solid #c0c0c0;
    border-bottom: 1px solid black;
    background: white;
}
.content thead .title {
    font-family: "Chomsky";
    font-size: 28px;
    font-weight: normal;
    padding-top: 6px;
}

.content-wrapper .padding {
    padding-bottom: 50px;
}

tr:has(+ tr.subtotal) td {
    border-bottom: 1px solid black;
}
tr:has(+ tr.total) td {
    border-bottom: 1px solid black;
}
tr.total td {
    border-bottom: 3px double black;
}
td.subheading {
    font-weight: bold;
}
.general-journal .row {
    width: 10%;
}
.general-journal .date {
    width: 10%;
}
.general-journal .account {
    width: 30%;
}
.general-journal .account-credit {
    padding-left: 20px;
}
.general-journal .note {
    width: 30%;
}
.general-journal .debit {
    width: 10%;
}
.general-journal .credit {
    width: 10%;
}

.account .t {
    border-right: 1px solid black;
}
.account .title {
    text-align: center;
}
.account .date {
    width: 10%;
}
.account .details {
    width: 30%;
}
.account .debit {
    width: 10%;
    border-right: 5px solid black;
}
.account .credit {
    width: 10%;
}


.trial-balance .margin {
    width: 10%;
}
.trial-balance .account {
    width: 70%;
}
.trial-balance .debit {
    width: 10%;
}
.trial-balance .credit {
    width: 10%;
}

.income-statement .account-name {
    padding-left: 20px;
}
.income-statement .margin {
    width: 10%;
}
.income-statement .details {
    width: 70%;
}
.income-statement .col-1 {
    width: 10%;
}
.income-statement .col-2 {
    width: 10%;
}

.balance-sheet .margin {
    width: 10%;
}
.balance-sheet .details {
    width: 70%;
}
.balance-sheet .col-1 {
    width: 10%;
}
.balance-sheet .col-2 {
    width: 10%;
}