:root {
    --bg: #19212f;
    --lighter: #2a384f;
    --accent: #ffbe98;
    --text:#f1f1f1;
    --bg-2:#142c57;
}
body > header {
    text-align:center;
}
body {
    font-family:system-ui;
    font-size:16px;
    line-height:1.45rem;
    background-color:var(--bg);
    color:var(--text);
}
main {
    margin:0 auto;
    min-width:320px;
    max-width:960px;
}
label, label span {
    display:block;
}
label {
    margin:.5rem 0;
}
#article_search {
    display:grid;
    grid-template-columns: 1fr .15fr;
    gap:.5rem;
}
input[type=text], input[type=password], select, input[type=file], textarea {
    border-radius:.5rem;
    padding:.5rem;
    font-size:.9rem;
    background-color:var(--lighter);
    color:var(--text);
    border:none;
    appearance:initial;
}
button {
    background-color:#1e304e;
    color:#7ea5e8;
    padding:.75rem;
    font-size:.8rem;
    box-sizing:border-box;
    border-radius:.5rem;
    font-weight:bold;
    border:none;
    cursor:pointer;
}

button.secondary {
    background-color: #364d80;
}

.alert {
    background-color:rgba(0, 0, 0, .1);
    color:#7ea5e8;
    font-size:.8rem;
    padding:.5rem;
    box-sizing:border-box;
    border-radius:.5rem;
    text-align:center;
}

.articles {
    display:grid;
    gap:.5rem;
}
.article {
    display:grid;
    grid-template-columns:10rem auto 10rem;
    background-color:var(--lighter);
    border-radius:.5rem;
    padding:.5rem;
    box-sizing:border-box;
}
.article header {
    display:grid;
    grid-template-rows:1fr 1fr;
    font-size:.8rem;
    white-space: nowrap;
    width:100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.article header strong {
    font-size:1rem;
}

.pagination {
}

.pagination nav {
    margin:2rem auto;
    display:flex;
    gap:.5rem;
    justify-content:center;
    align-items:center;
}

.pagination a {
    display:inline-grid;
    color:var(--text);
    text-decoration:underline;
    cursor:pointer;
}

.pagination a:hover {
    text-decoration:none;
}

a {
    color: var(--text);
    text-decoration: underline;
}

a:hover {
    text-decoration:none;
}

#new_article_form input,
#new_article_form select {
    display:block;
    width:100%;
}

.product-selection {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.5rem;
}

#new_article_form label {
    margin:0;
}

#new_article_form .line {
    display:flex;
    gap:.5rem;
}

#new_article_form .line > * {
    flex-basis: 50%;
}

.product-selection .article {
    grid-template-columns: 1fr;
}

.product-search {
    display:block;
    position:relative;
}

.product-search .result {
    position:absolute;
    display:none;
    background-color:var(--lighter);
    width:100%;
    height:7rem;
    border-radius:.5rem;
    box-sizing:border-box;
    box-shadow:.5rem .5rem .5rem rgba(0, 0, 0, .2);
    margin-top:.1rem;
    overflow:auto;
    padding:.5rem;
}

.product-search .result.visible {
    display:block;
}

.product-search .result .product {
    line-height:1rem;
    text-decoration:underline;
    padding:.3rem 0;
    font-size:.8rem;
}

.product-search .result .product:hover {
    text-decoration:none;
    cursor:pointer;
}

.product-search .product small {
    pointer-events:none;
}

.article-results .result {
    padding:.5rem;
    background-color:rgba(0, 0, 0, .2);
    width:100%;
    min-height:2rem;
    border-radius:.5rem;
}

.articles-import {
    display: grid;
    grid-template-columns: auto 1fr;
    gap:.5rem;
}

.articles-import textarea {
    width:100%;
    min-height:360px;
    resize:none;
}

.anomalies-list {
    display:flex;
    flex-direction: column;
    gap:.5rem;
}

.anomalies-list .anomaly {
    background-color:var(--lighter);
    border-radius:.5rem;
    padding:.5rem;
    box-sizing: border-box;
}

.anomaly .content {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content:center;
    align-items:center;
}

.anomaly header {
    margin-bottom:.5rem;
}

.anomalies-list .anomaly-line {
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
}

.anomalies-list .anomaly-line header {
    text-align:right;
}

.anomalies-list .anomaly-line .content {
    display:grid;
    grid-template-columns: auto 1fr;
    padding:.25rem;
    font-size:.8rem;
    vertical-align: center;
    justify-content:center;
}

.hidden {
    display:none!important;
}

.counter-list {
    display:grid;
    grid-template-columns: repeat(var(--n), 1fr);
    gap:1rem;
    padding:1rem 0;
    box-sizing: border-box;
}

.counter {
    display: flex;
    flex-direction: column;
    text-align:center;
    gap:.5rem;
}

.counter header {
    font-size:.9rem;
    font-weight:bold;
}

.counter span {
    font-size:2rem;
    padding:2rem 1rem;
    box-sizing:border-box;
    font-weight:bold;
    background-color:var(--lighter);
    border-radius:.5rem;
}