@import url('https://rsms.me/inter/inter.css');

* { font-family: "Inter", "Inter UI", "Helvetica Neue", sans-serif; }

html {
    scroll-padding-top: 120px;
}

body {
    margin: 20px;
    margin-top: 100px;
}

h1, h2, h3, h4, h5 {
    margin-top: 0;
}

.date, .actions {
    white-space: nowrap;
}

.details {
    width: 640px;
}

td p {
    padding: 5px;
}

.details td, .documents td, .links td {
    border: 0;
    padding-bottom: 5px;
    padding-top: 5px;
}

.links > table {
    margin: 0;
}

td.documents {
    width: 320px;
}

.list img {
    float: left;
}

.list li {
    clear: both;
}

fieldset {
    border: 0;
    margin: 0px;
    padding: 0;
}

fieldset label {
    min-width: 120px;
    margin-bottom: 10px;
    display: inline-block;
}

input[name=year], input[name=month] {
    width: 100px;
}

button {
    min-width: 100px;
}

a {
    color: #555;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: #555;
}

nav {
    position: fixed;
    top: -20px;
    height: 90px;
    background-color: white;
    padding-bottom: 20px;
    width: 100%;
    z-index: 2;
}

nav span {
    margin-right: 20px;
}

form.filter {
    position: fixed;
    top: 40px;
    height: 30px;
    background-color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    z-index: 3;
}

.filter-wrapper form.filter {
    position: relative;
    top: 0;
}

#logo img {
    width: 48px;
    display: inline-block;
    position: relative;
    top: 19px;
    margin-left: -4px;
}

tr {
    vertical-align: top;
}

tr:nth-child(even) {
    background: #ffffff;
}

tr:nth-child(odd) {
    background: #f8f8f8;
}

td, th {
    padding: 5px;
    text-align: left;
    border-bottom: 1px solid #aaa;
}

th {
    top: 90px;
    position: sticky;
    background-color: #f8f8f8;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
}

body > table td, body > table th,
div > table td, div > table th,
form > table td, form > table th {
    padding: 10px;
    border: 1px solid #aaa;
}

td.amt, td > p.amt {
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
}

p.amt {
    font-weight: bold;
}

.amt.positive {
    color: darkgreen;
}

.amt.negative {
    color: darkred;
}

.acc {
    min-width: 100px;
    max-width: 200px;
    word-break: break-all;
}

td.key {
    width: 100px;
    max-width: 100px;
    word-break: break-all;
    font-size: 12px;
}

table {
    border-collapse: collapse;
    margin-bottom: 20px;
    font-variant-numeric: tabular-nums;
}

tr.month-row td {
    padding-bottom: 40px;
    font-weight: bold;
}

tr.highlight {
    background-color: #c0ffff;
}

tr.minor {
    font-size: 12px;
    color: rgba(0,0,0,0.5);
}

a.btn {
    cursor: pointer;
    text-decoration: none;
}

a.active {
    background-color: #555;
    color: white;
}

table table {
    width: 100%;
    margin-bottom: .6em;
}

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

table img {
    width: 100%;
}

input.receipt {
    margin-bottom: 1em;
}

table.documentimages {
    float: left;
}

table.documentimages td {
    max-width: 280px;
    overflow-wrap: break-word;
}

div.documentimage_forms {
    position: fixed;
    top: 110px;
    left: 345px;
}

iframe.documentimage {
    position: fixed;
    top: 110px;
    right: 0;
    width: calc(100vw - 690px);
    height: calc(100vh - 125px);
}

div.documentimages_fullwidth table {
    display: none;
}

div.documentimages_fullwidth form {
    display: none;
}

div.documentimages_fullwidth p {
    display: none;
}

div.documentimages_fullwidth iframe {
    width: 100%;
}

button.documentimages_toggle_button {
    position: fixed;
    bottom: 40%;
    z-index: 100;
    left: 645px;
    width: 20px;
    height: 100px;
    min-width: 10px !important;
    padding: 0;
}

button.documentimages_fullwidth {
    left: 0px;
}

input.visible_input_id {
    width: 500px;
}

#items_table {
    table-layout: fixed;
    width: 100%;
}

#items_table input, #items_table textarea, #items_table button {
    width: 100%;
}

#items_table button {
    min-width: 0
}