@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300..400&display=swap');

body {
    background-color: #bbb;
    color: #111;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 1.33;
}

input[type="text"] {font-family: 'JetBrains Mono', monospace; font-weight: 300; font-style: normal; font-size: 14px}
button {font-family: 'JetBrains Mono', monospace; font-size: 14px}
input[data-invalid] {background-color: #f88}

.updates-list-container, .filter-container {
    background-color: #ddd;
    border: 1px solid #aaa;
    border-radius: 5px;
}
.updates-list-container, .major-section {
    box-sizing: content-box;
    margin: 1em auto;
    padding: 1em;
    width: 900px;
}
.updates-list-container {
    transition: background-color 1s ease 5s;
}
.updates-list-container.pending {background-color: #cfc}
.updates-list {border-collapse: collapse; table-layout: fixed; width: 900px}
.filtered {display: none}
.updates-list tr:hover {background-color: #ccc}
.updates-list td {
    box-sizing: border-box;
    padding: 0;
    vertical-align: top;
}
.updates-list td, .updates-list div {overflow: hidden; text-overflow: ellipsis}
.updates-list td:nth-child(1) {width: 25%}
.updates-list td:nth-child(2) {width: 25%}
.updates-list td:nth-child(3) {width: 18%}
.updates-list td:nth-child(4) {width: 32%}

.update-row-field-values-old {color: #666; font-weight: 300}
.update-row-field-values-old a {color: #666}
.update-row-product-file {font-size: 80%}

.updates-list .hidden, .updates-list .old {display: none}
.updates-list tr:hover .hidden {display: revert}
.updates-list td:hover .old {display: revert}

.updates-list-header {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1em}

a {text-decoration: none}
a:hover {text-decoration: revert}

.filter-container {padding-top: 0; padding-bottom: 0}
.filter-container > div {display: flex; align-items: center; margin: 1em 0}
.filter-container label {cursor: pointer; margin-right: 1em; user-select: none}
.filter-container button {cursor: pointer; margin-left: 1em; user-select: none}

.page-heading {display: flex; justify-content: space-between; align-items: center; padding: 0}

#online-indicator > span {display: none}
#online-indicator[data-online="on"] > span#online-indicator-on {display: revert}
#online-indicator[data-online="off"] > span#online-indicator-off {display: revert}