#avis2-app-top-nav {
    width: 100% !important;
    background-color: #181818 !important;
    color: #e0e0e0 !important;
    padding: 0.2em 0.8em !important;
    font-weight: normal !important;
    text-align: left !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5em !important;
    font-family: 'Fira Mono', Menlo, Consolas, 'Liberation Mono', monospace !important;
    border-bottom: 1px solid #333 !important;
    position: relative !important;
}

.avis2-root, #avis2-app-top-nav, .avis2-modal, .avis2-modal-content {
    visibility: visible !important;
    opacity: 1 !important;
}


#avis2-app-top-nav .avis2-logo {
    font-size: 1em;
    margin-right: 1.2em;
    letter-spacing: 0.03em;
}

#avis2-app-top-nav button {
    background: #222;
    color: #e0e0e0;
    border: 1px solid #444;
    padding: 0.2em 0.8em;
    margin-right: 0.3em;
    border-radius: 2px;
    cursor: pointer;
    font-size: 0.95em;
    font-family: inherit;
    transition: background 0.2s, color 0.2s;
}

#avis2-app-top-nav button:hover {
    background: #333;
    color: #fff;
}

/* Modal Styles */
.avis2-modal {
    display: none !important;
    position: fixed !important;
    z-index: 2147483647 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: auto !important;
    background-color: rgb(0 0 0 / 70%) !important;
    font-family: 'Fira Mono', Menlo, Consolas, 'Liberation Mono', monospace !important;
}

.avis2-modal[style*="display: block"] {
    display: block !important;
}


.avis2-modal-content {
    background-color: #181818 !important;
    margin: 4% auto !important;
    padding: 1.3em 1.6em 1.1em !important;
    border: 1px solid #333 !important;
    width: 94% !important;
    max-width: 420px !important;
    border-radius: 2px !important;
    position: relative !important;
    color: #e0e0e0 !important;
    font-family: 'Fira Mono', Menlo, Consolas, 'Liberation Mono', monospace !important;
    box-shadow: 0 2px 16px #000a !important;
    line-height: 1.3 !important;
    z-index: 2147483647 !important;
}

#avis2-stats-modal .avis2-modal-content {
    width: 90vw !important;
    max-width: 1200px !important;
    height: 90vh !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}

.avis2-close {
    color: #888;
    position: absolute;
    right: 0.7em;
    top: 0.5em;
    font-size: 1.3em;
    font-weight: normal;
    cursor: pointer;
    transition: color 0.2s;
    font-family: inherit;
}

.avis2-close:hover {
    color: #222;
}

#avis2-modules-list label {
    margin-bottom: 0.5em;
    font-size: 1em;
    cursor: pointer;
}

#avis2-save-modules {
    margin-top: 1em;
    background: #0078d7;
    color: #fff;
    border: none;
    padding: 0.5em 1.5em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

#avis2-save-modules:hover {
    background: #005fa3;
}

#avis2-stats-log, #avis2-stats-modules, #avis2-stats-time {
    margin-bottom: 1em;
    font-size: 1em;
}

#avis2-stats-log h3, #avis2-stats-modules h3, #avis2-stats-time h3 {
    margin-bottom: 0.3em;
    font-size: 1em;
    color: #39ff14;
    font-family: inherit;
    letter-spacing: 0.01em;
}

/* --- Proxied newspaper pages ---------------------------------------------
   The Schibsted builds hash their class names per deploy, so these match on
   the part that survives a deploy. */

/* A half-width teaser is laid out as flex: 1 0 calc(50% - 8px), so one left
   alone on its row grows to the full column. Its headline keeps the size the
   half slot asked for and runs under the image the wide layout moves to the
   right, so the teaser stays at the width it was written for. */
article[class*="_half_"] {
    flex-grow: 0 !important;
}