:root {
    --navbar-height: 48px;
    --body-bg-color: #161920;
    --body-color: #ddd;
    --contrast-color: #fff;
    --muted-bg-color: #213145;
    --muted-color: #999;
    --border-color: hsl(216deg 25% 30%);
    --border-color-2: hsl(216deg 25% 16%);
    --link-color: #00aff4;
    --link-color-hover: #0095ff;
    --bg-green: #030;
    --bg-blue: #00174d;
    --state-text-color: #111;
    --state-owned: 89 185 70;
    --state-infamily: 127 114 228;
    --state-wished: 102 148 255;
    --state-watched: 87 132 168;
    --state-followed: 211 222 234;
    --state-cart: 247 203 8;
    --state-ignored: 191 191 191;
    --tooltip-bg: rgb(255 255 255 / 80%);
    --tooltip-green: #577c27;
    color-scheme: dark;
    scrollbar-color: var(--border-color) var(--body-bg-color);
    scroll-padding-top: calc(var(--navbar-height) + 15px);
    tab-size: 4;
    overflow-y: scroll;
    box-sizing: border-box;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    height: 100%
}

button,input,optgroup,select,textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,select {
    text-transform: none
}

.dt-input {
    background-color: #546d78;
}

.input,input[type=text],input[type=search],input[type=date],select,textarea {
    height: 34px;
    line-height: 20px;
    padding: 7px 8px;
    font-size: 14px;
    color: var(--body-color);
    accent-color: var(--link-color);
    vertical-align: middle;
    background-color: var(--body-bg-color);
    background-repeat: no-repeat;
    background-position: right center;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    outline: none;
    transition: box-shadow .2s
}

select {
    -webkit-appearance: none;
    appearance: none;
    background: var(--body-bg-color) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23acacac' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px
}

#tick-container {
    display: flex;
    gap: 2px;
    width: 80%;
    justify-content: flex-end;
}

.tick {
    width: 5px;
    height: 100%;
    background-color: #555;
    border-radius: 2px;
}
.tick.up {
    background-color: #4caf50;
}
.tick.down {
    background-color: #f44336;
}
.tick:hover {
    transform: scaleY(1.1);
    opacity: 0.8;
    cursor: pointer;
}
#tooltip {
    position: absolute;
    display: none;
    background-color: #24292e;
    color: #f6f8fa;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    pointer-events: none; /* So the tooltip doesn't interfere with mouse events */
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%) translateY(50%);
    transition: opacity 0.2s ease-in-out;
}