@charset "utf-8";

/* ==========================================================================
   content_note — Hinweisnotiz (Info / Warnung)
   --------------------------------------------------------------------------
   Kleine wiederverwendbare Notiz für Login-Panels und Dialoge.
   Variante: content_note_warning
   ========================================================================== */

.content_note {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 13px 15px;
    border: 1px solid rgba(21, 165, 181, 0.28);
    border-radius: var(--radius-sm);

    background: rgba(21, 165, 181, 0.10);

    font-size: var(--fs-14);
    color: var(--q-dark);
    line-height: 1.5;
    text-wrap: pretty;
}

.content_note_warning {
    background: rgba(226, 169, 59, 0.12);
    border-color: rgba(226, 169, 59, 0.40);
}

.content_note_icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;

    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2315A5B5'><circle cx='12' cy='12' r='10'/><rect x='11' y='10.5' width='2' height='6.5' rx='1' fill='white'/><rect x='11' y='6.8' width='2' height='2.6' rx='1' fill='white'/></svg>") center/contain no-repeat;
}

.content_note_warning .content_note_icon {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B0801E'><circle cx='12' cy='12' r='10'/><rect x='11' y='6.8' width='2' height='7' rx='1' fill='white'/><rect x='11' y='15.4' width='2' height='2.4' rx='1' fill='white'/></svg>") center/contain no-repeat;
}

.content_note code {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
}