/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* ================= NAV / BOOTSTRAP BASE ================= */
a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* OPOMBA: tvoj footer je absolute. Če kdaj prekriva vsebino, spodaj imaš opcijski popravek. */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}

/* ================= THEME VARIABLES ================= */
:root {
    --body-bg: rgb(245,245,245);
    --text-color: #111;
    /* tabele */
    --table-bg: #fff;
    --table-text: #111;
    --table-border: rgba(0,0,0,.12);
    /* paneli (dropdown, modal, card...) */
    --panel-bg: #fff;
    /* zebra & hover */
    --table-striped-bg: rgba(0,0,0,0.03);
    --table-hover-bg: rgba(0,0,0,0.06);
}

/* ================= GLOBAL TEXT / PANELS ================= */
body {
    background-color: var(--body-bg);
    color: var(--text-color);
    margin-bottom: 60px;
    transition: background-color .15s ease, color .15s ease;
}

.card,
.modal-content,
.dropdown-menu {
    background-color: var(--panel-bg);
}

a {
    color: inherit;
    text-decoration-color: currentColor;
}

    a:hover {
        opacity: .9;
    }

/* ================= ALPR MODAL ================= */
.modal-alpr-resizable {
    /* privzeta velikost (uporabnik jo lahko ročno spreminja) */
    max-width: 95vw;
    width: 820px;
    resize: both;
    overflow: auto;

    /* omogoči precej ožji modal (uporabno na prenosnikih) */
    min-width: 160px;
    max-height: 95vh;
}

/* Ko uporabnik premakne okno, modal deluje kot "plavajoče" okno (pozicija + velikost se shranita). */
#alprModal .modal-dialog.alpr-windowed {
    position: fixed;
    margin: 0;
    transform: none !important;
    z-index: 1060; /* nad backdrop */
    max-width: none !important; /* bootstrap modal-* razredi ne smejo omejiti ročnega resize */
    /* Bootstrap 5 privzeto nastavi pointer-events:none na .modal-dialog.
       To prepreči ročni resize in lahko povzroči vtis "okna ni mogoče povečati". */
    pointer-events: auto;
}

.modal-alpr-resizable .modal-content {
    /* ne vsiljuj visokega minimuma – uporabnik lahko zoži okno tudi po višini */
    min-height: 200px;
    height: 100%;
}

/* omogoči, da se vsebina lepo prilagaja pri ročnem resize modala */
#alprModal .modal-body {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.alpr-stage {
    width: 100%;
    flex: 1 1 auto;
    /* omogoči nižji modal (npr. le za ročni vnos) */
    min-height: 110px;
}

/*
   ALPR kot "plavajoče" okno:
   - JS nastavi Bootstrap modal z backdrop:false in odstrani body scroll lock.
   - Z vidika CSS NE onemogočamo pointer-events, ker lahko to povzroči takojšnje zapiranje
     (odvisno od brskalnika / Bootstrap fokus-trapa).
*/

/* ročni resize dialoga + razumen minimum, da ga lahko zožate */
#alprModal .modal-dialog {
    resize: both;
    overflow: auto;
    min-width: 160px;
    min-height: 140px;
    max-width: 95vw;
    max-height: 95vh;
    box-sizing: border-box;
    /* glej komentar zgoraj – omogoči interakcije z robom (resize ročica) */
    pointer-events: auto;
}

/* Dodatno: pri nekaterih brskalnikih je resize bolj zanesljiv na .modal-content,
   zato ga omogočimo tudi tam (ne škodi, a pomaga). */
#alprModal .modal-content {
    resize: both;
    overflow: auto;
    pointer-events: auto;
}

#alprModal .modal-content {
    height: 100%;
}

/* omogoči ožji header (da okna ne blokira izbor kamere) */
#alprCameraSelect {
    max-width: min(360px, 45vw);
    min-width: 140px;
}

.alpr-overlay {
    position: absolute;
    left: 8px;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
}

.alpr-plate {
    display: inline-block;
    padding: 6px 10px;
    font-size: 1.25rem;
    font-weight: 700;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    width: fit-content;
    color: #fff;
}

.alpr-conf {
    padding: 2px 10px;
    font-size: .875rem;
    background: rgba(0,0,0,.45);
    border-radius: 8px;
    width: fit-content;
    color: #fff;
}

/* ================= TABLES (GLOBAL FIX) ================= */

/* osnovne vrednosti */
.table {
    background-color: var(--table-bg);
    color: var(--table-text);
}

    /* okvirji + tekst */
    .table th,
    .table td {
        color: var(--table-text);
        border-color: var(--table-border);
    }

    /* TR dobi ozadje */
    .table > :not(caption) > thead > tr,
    .table > :not(caption) > tbody > tr,
    .table > :not(caption) > tfoot > tr {
        background-color: var(--table-bg);
        color: var(--table-text);
    }

    /* celice dedujejo ozadje od TR (da delajo statusne vrstice) */
    .table > :not(caption) > * > * {
        background-color: inherit !important;
        color: var(--table-text) !important;
        border-color: var(--table-border) !important;
    }

/* Zebra (table-striped) */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-striped-bg) !important;
}

/* Hover (table-hover) */
.table-hover > tbody > tr:hover > * {
    background-color: var(--table-hover-bg) !important;
}

/* table-light header */
.table > thead.table-light > tr > th,
.table thead.table-light > tr > th {
    background-color: #f8f9fa !important;
    color: #111 !important;
    border-color: var(--table-border) !important;
}

/* ================= UI FIXES ================= */
.dropdown-menu {
    z-index: 2050;
}

@media (max-width: 991.98px) {
    .navbar .dropdown-menu {
        width: min(92vw, 360px);
        max-width: 92vw;
    }
}

/* Med inicializacijo teme izklopi prehode */
.theme-init * {
    transition: none !important;
}

/* ================= DARK MODE OPTIMIZATION =================
   Detekcija: tvoj JS nastavi --text-color: #f1f1f1 inline na <html>.
*/
html[style*="--text-color: #f1f1f1"] {
    --table-bg: rgba(18, 18, 18, 0.92) !important;
    --table-text: #e6e6e6 !important;
    --table-border: rgba(255, 255, 255, 0.22) !important;
    --table-striped-bg: rgba(255, 255, 255, 0.08) !important;
    --table-hover-bg: rgba(255, 255, 255, 0.12) !important;
    --panel-bg: rgba(25, 25, 25, 0.96) !important;
}

/* ================= INLINE BARVANJE (Evidenca ključev) ================= */
.table tr[style*="background-color:#f1aeb5"] {
    background-color: #f1aeb5 !important;
}

    .table tr[style*="background-color:#f1aeb5"] > * {
        background-color: inherit !important;
        color: #000 !important;
    }

html[style*="--text-color: #f1f1f1"] .table tr[style*="background-color:#f1aeb5"] {
    background-color: rgba(231, 160, 168, 0.95) !important;
}

    html[style*="--text-color: #f1f1f1"] .table tr[style*="background-color:#f1aeb5"] > * {
        color: #111 !important;
    }

/* ================= RESPONSIVE MODULE BUTTONS (VSTOP/IZHOD, IZDAJA/VRAČILO) ================= */
.module-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

    .module-actions > .btn,
    .module-actions > a.btn {
        padding: .65rem 1rem;
    }

@media (max-width: 575.98px) {
    .module-actions {
        flex-direction: column;
        align-items: stretch;
    }

        .module-actions > .btn,
        .module-actions > a.btn {
            width: 100%;
        }

        .module-actions .me-2 {
            margin-right: 0 !important;
        }
}

/* ================= OBVESTILA: row-unread / row-read ================= */
.table > :not(caption) > tbody > tr.row-unread {
    background-color: #ffb3b3 !important;
}

.table > :not(caption) > tbody > tr.row-read {
    background-color: #d1e7dd !important;
}

    .table > :not(caption) > tbody > tr.row-unread > *,
    .table > :not(caption) > tbody > tr.row-read > * {
        background-color: inherit !important;
    }

/* Obvestila – zakleni ozadje in naredi tekst črn v temnem načinu */
#tblObvestila tbody tr.row-unread > td,
#tblObvestila tbody tr.row-unread > th {
    background-color: #ffb3b3 !important;
}

#tblObvestila tbody tr.row-read > td,
#tblObvestila tbody tr.row-read > th {
    background-color: #d1e7dd !important;
}

/* ✅ KLJUČNI FIX: v temnem načinu naj bodo VSE celice v obvestilih črne */
html[style*="--text-color: #f1f1f1"] #tblObvestila tbody tr.row-unread > td,
html[style*="--text-color: #f1f1f1"] #tblObvestila tbody tr.row-read > td,
html[style*="--text-color: #f1f1f1"] #tblObvestila tbody tr.row-unread > th,
html[style*="--text-color: #f1f1f1"] #tblObvestila tbody tr.row-read > th,
html[style*="--text-color: #f1f1f1"] #tblObvestila tbody tr.row-unread > td *,
html[style*="--text-color: #f1f1f1"] #tblObvestila tbody tr.row-read > td * {
    color: #000 !important;
}

/* ================= BOOTSTRAP CONTEXTUAL (GENERAL) ================= */
.table > :not(caption) > tbody > tr.table-danger {
    background-color: #f8d7da !important;
}

.table > :not(caption) > tbody > tr.table-warning {
    background-color: #fff3cd !important;
}

.table > :not(caption) > tbody > tr.table-success {
    background-color: #d1e7dd !important;
}

.table > :not(caption) > tbody > tr.table-info {
    background-color: #cff4fc !important;
}

    .table > :not(caption) > tbody > tr.table-danger > *,
    .table > :not(caption) > tbody > tr.table-warning > *,
    .table > :not(caption) > tbody > tr.table-success > *,
    .table > :not(caption) > tbody > tr.table-info > * {
        background-color: inherit !important;
        color: #000 !important;
    }

/* ==========================================================
   ✅ MOTNJA – 100% rdeče v obeh tabelah VideoNadzor
   ========================================================== */
#tblKamere tbody tr.table-danger,
#tblZgodovina tbody tr.table-danger {
    background-color: #f8d7da !important;
    --bs-table-bg: #f8d7da !important;
    --bs-table-accent-bg: #f8d7da !important;
    --bs-table-striped-bg: #f8d7da !important;
    --bs-table-striped-color: #000 !important;
    --bs-table-active-bg: #f8d7da !important;
    --bs-table-active-color: #000 !important;
    --bs-table-hover-bg: #f8d7da !important;
    --bs-table-hover-color: #000 !important;
    --bs-table-color: #000 !important;
}

    #tblKamere tbody tr.table-danger > td,
    #tblKamere tbody tr.table-danger > th,
    #tblZgodovina tbody tr.table-danger > td,
    #tblZgodovina tbody tr.table-danger > th {
        background-color: #f8d7da !important;
        color: #000 !important;
    }

/* temni način */
html[style*="--text-color: #f1f1f1"] #tblKamere tbody tr.table-danger,
html[style*="--text-color: #f1f1f1"] #tblZgodovina tbody tr.table-danger {
    background-color: rgba(248, 215, 218, 0.92) !important;
    --bs-table-bg: rgba(248, 215, 218, 0.92) !important;
    --bs-table-accent-bg: rgba(248, 215, 218, 0.92) !important;
    --bs-table-striped-bg: rgba(248, 215, 218, 0.92) !important;
    --bs-table-hover-bg: rgba(248, 215, 218, 0.92) !important;
    --bs-table-active-bg: rgba(248, 215, 218, 0.92) !important;
    --bs-table-color: #000 !important;
}

    html[style*="--text-color: #f1f1f1"] #tblKamere tbody tr.table-danger > td,
    html[style*="--text-color: #f1f1f1"] #tblKamere tbody tr.table-danger > th,
    html[style*="--text-color: #f1f1f1"] #tblZgodovina tbody tr.table-danger > td,
    html[style*="--text-color: #f1f1f1"] #tblZgodovina tbody tr.table-danger > th {
        background-color: rgba(248, 215, 218, 0.92) !important;
        color: #000 !important;
    }

/* hover ne spremeni rdeče */
#tblKamere.table-hover tbody tr.table-danger:hover > td,
#tblKamere.table-hover tbody tr.table-danger:hover > th,
#tblZgodovina.table-hover tbody tr.table-danger:hover > td,
#tblZgodovina.table-hover tbody tr.table-danger:hover > th {
    background-color: #f8d7da !important;
    color: #000 !important;
}

/* ==========================================================
   ✅ KONTROLNI SEZNAM – MOTNJA rdeče SAMO, ČE NI ODPRAVLJENO
   ========================================================== */
#tblKontrola tbody tr.table-danger {
    background-color: #f8d7da !important;
    --bs-table-bg: #f8d7da !important;
    --bs-table-accent-bg: #f8d7da !important;
    --bs-table-striped-bg: #f8d7da !important;
    --bs-table-hover-bg: #f8d7da !important;
    --bs-table-active-bg: #f8d7da !important;
    --bs-table-color: #000 !important;
}

    #tblKontrola tbody tr.table-danger > td,
    #tblKontrola tbody tr.table-danger > th {
        background-color: #f8d7da !important;
        color: #000 !important;
    }

    /* če je ODPRAVLJENO (badge bg-success), prekini rdeče */
    #tblKontrola tbody tr.table-danger:has(.badge.bg-success),
    #tblKontrola tbody tr.table-danger:has(.badge.bg-success) > td,
    #tblKontrola tbody tr.table-danger:has(.badge.bg-success) > th {
        background-color: inherit !important;
        color: var(--table-text) !important;
        --bs-table-bg: inherit !important;
        --bs-table-accent-bg: inherit !important;
        --bs-table-striped-bg: inherit !important;
        --bs-table-hover-bg: inherit !important;
        --bs-table-active-bg: inherit !important;
        --bs-table-color: var(--table-text) !important;
    }

/* temni način: motnja rdeča, tekst črn */
html[style*="--text-color: #f1f1f1"] #tblKontrola tbody tr.table-danger,
html[style*="--text-color: #f1f1f1"] #tblKontrola tbody tr.table-danger > td,
html[style*="--text-color: #f1f1f1"] #tblKontrola tbody tr.table-danger > th {
    background-color: rgba(248, 215, 218, 0.92) !important;
    color: #000 !important;
}

    /* temni način: odpravljeno (reset) */
    html[style*="--text-color: #f1f1f1"] #tblKontrola tbody tr.table-danger:has(.badge.bg-success) > td,
    html[style*="--text-color: #f1f1f1"] #tblKontrola tbody tr.table-danger:has(.badge.bg-success) > th {
        background-color: inherit !important;
        color: var(--table-text) !important;
    }

/* ======================================================================
   POROČILO O IZREDNEM DOGODKU (CENTRIRANJE + RESPONSIVE + GRID FIX)
   Ključni popravek: odstranjen min 840px, ker povzroča overflow in vizualni zamik.
   ====================================================================== */

#porocilo-page {
    width: 100%;
}

    /* Wrapper mora biti centriran, širina pa dovolj velika za 2 stolpca */
    #porocilo-page .porocilo-container {
        width: 100%;
        max-width: 1600px; /* povečano, da 2-stolpčni layout "diha" */
        margin: 0 auto;
        padding: 28px 14px;
        box-sizing: border-box;
    }

    /* ✅ POPRAVEK: fluidni stolpci brez fiksnega minimalnega 840px */
    #porocilo-page .porocilo-layout {
        width: 100%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 700px);
        gap: 18px;
        align-items: start;
    }

    /* Varnostni override – če bi kje ostal left/transform */
    #porocilo-page .porocilo-container,
    #porocilo-page .porocilo-layout {
        margin-left: auto !important;
        margin-right: auto !important;
        left: auto !important;
        transform: none !important;
    }

    #porocilo-page .porocilo-left,
    #porocilo-page .porocilo-right {
        min-width: 0;
    }

/* Na manjši širini 1 stolpec */
@media (max-width: 1100px) {
    #porocilo-page .porocilo-layout {
        grid-template-columns: 1fr;
    }
}

/* kartice */
#porocilo-page .porocilo-card {
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(17,24,39,0.06);
    overflow: hidden;
}

/* preview kartica – centrirana in omejena */
#porocilo-page .porocilo-right .porocilo-card {
    max-width: 720px;
    margin: 0 auto;
}

/* glava kartice */
#porocilo-page .porocilo-card-header {
    padding: 18px 22px;
    background: linear-gradient(135deg, #0b2a4a, #123c66);
    color: #fff;
}

#porocilo-page .porocilo-title {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

    #porocilo-page .porocilo-title.porocilo-title-sm {
        font-size: 16px;
        line-height: 22px;
    }

#porocilo-page .porocilo-subtitle {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.9;
}

/* status */
#porocilo-page .porocilo-alert {
    margin: 16px 22px 0 22px;
    padding: 12px 12px;
    border-radius: 10px;
    border: 1px solid #d1fae5;
    background: #ecfdf5;
    color: #065f46;
    font-size: 13px;
    line-height: 18px;
}

/* forma */
#porocilo-page .porocilo-form {
    padding: 22px 26px 26px 26px;
}

#porocilo-page .porocilo-fieldset {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 14px 12px 14px;
    margin-bottom: 14px;
    background: #ffffff;
}

    #porocilo-page .porocilo-fieldset legend {
        padding: 0 10px;
        font-weight: 800;
        color: #111827;
        font-size: 13px;
    }

#porocilo-page .porocilo-grid {
    display: grid;
    gap: 12px 14px;
}

#porocilo-page .porocilo-grid-2 {
    grid-template-columns: 1fr 1fr;
}

#porocilo-page .porocilo-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

#porocilo-page .porocilo-span-2 {
    grid-column: 1 / -1;
}

#porocilo-page .porocilo-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #111827;
    margin: 8px 0 6px 0;
}

#porocilo-page .porocilo-control {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 10px 10px;
    font-size: 14px;
    background: #fff;
    outline: none;
}

#porocilo-page textarea.porocilo-control {
    resize: vertical;
}

#porocilo-page .porocilo-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

#porocilo-page .porocilo-hint {
    margin-top: 6px;
    font-size: 11px;
    color: #6b7280;
}

/* radio */
#porocilo-page .porocilo-radio-row {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 6px;
}

#porocilo-page .porocilo-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #111827;
    font-weight: 600;
}

    #porocilo-page .porocilo-radio input {
        width: auto;
        margin: 0;
        box-shadow: none;
    }

/* priloge */
#porocilo-page .porocilo-attach-box {
    margin-top: 10px;
    border: 1px dashed #d1d5db;
    background: #f9fafb;
    border-radius: 12px;
    padding: 12px;
}

/* gumbi */
#porocilo-page .porocilo-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 6px;
}

#porocilo-page .porocilo-btn {
    appearance: none;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #111827;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #porocilo-page .porocilo-btn:hover {
        background: #f9fafb;
    }

#porocilo-page .porocilo-btn-primary {
    border-color: #0b2a4a;
    background: #0b2a4a;
    color: #fff;
}

    #porocilo-page .porocilo-btn-primary:hover {
        filter: brightness(1.05);
    }

#porocilo-page .porocilo-btn-ghost {
    border-style: dashed;
    background: transparent;
}

/* preview */
#porocilo-page .doc-preview {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #f9fafb;
}

#porocilo-page .doc-bg {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
}

/* overlay: baza koordinat 680px */
#porocilo-page .doc-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 680px;
    transform-origin: top left;
    pointer-events: none;
}

#porocilo-page .doc-field {
    position: absolute;
    font-size: 11px;
    line-height: 1.2;
    color: #111827;
    /* Zahteva: prikaz naj sledi vnosu (tudi pri copy/paste):
       - ohrani presledke ("pre")
       - ne režite besedila z "..." (brez ellipsis)
       - omogoči, da se vidi celotna dolžina vnosa */
    white-space: pre;
    overflow: visible;
    text-overflow: clip;
}

    #porocilo-page .doc-field.prewrap {
        white-space: pre-wrap;
    }

/* responsive: forma in priloge padejo v 1 stolpec */
@media (max-width: 820px) {
    #porocilo-page .porocilo-grid-2 {
        grid-template-columns: 1fr;
    }

    #porocilo-page .porocilo-grid-3 {
        grid-template-columns: 1fr;
    }

    #porocilo-page .porocilo-span-2 {
        grid-column: auto;
    }

    #porocilo-page .porocilo-actions {
        justify-content: stretch;
    }

    #porocilo-page .porocilo-btn {
        flex: 1;
    }
}

/* mobilno: gumbi čez celo širino */
@media (max-width: 640px) {
    #porocilo-page .porocilo-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #porocilo-page .porocilo-btn {
        width: 100%;
    }
}

/* sticky preview (desktop) */
@media (min-width: 1101px) {
    #porocilo-page .porocilo-right .porocilo-card {
        position: sticky;
        top: 12px;
    }
}

/* ===========================
   (Opcijsko) Footer popravek
=========================== */
/*
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; margin-bottom: 0; }
main { flex: 1; }
.footer { position: static; line-height: 60px; }
*/

/* Wider primary action buttons (Vstop/Izhod/Izdaja/Vračilo ...) */
.btn-action {
    min-width: 170px;
}

/* ===============================
   Zložljivi filtri (details/summary)
   =============================== */
details.filter-panel > summary,
details.mail-panel > summary {
    list-style: none;
    cursor: pointer;
}

details.filter-panel > summary::-webkit-details-marker,
details.mail-panel > summary::-webkit-details-marker {
    display: none;
}

details.filter-panel[open] > summary,
details.mail-panel[open] > summary {
    margin-bottom: .5rem;
}