/* ============================================================
   Acknowledgement-flag validation styles
   ============================================================ */

/* Header above the checkbox group. Shown only when a
   designation exists. */
#ackFlagNotice {
    display: none;                      /* script flips to block */
    margin: 0 0 14px 0;
    padding: 12px 16px;
    background-color: #eef3fa;
    border-left: 4px solid #1B3A8C;
    border-radius: 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #1a3357;
}
#ackFlagNotice .ackReqTag {
    display: inline-block;
    background-color: #c0392b;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
}
#ackFlagNotice strong { color: #c0392b; }

/* Red asterisk. Injected as the FIRST CHILD of each label so it
   flows with the label text instead of forcing a line break.
   display:inline is explicit here because Andar's global CSS
   sets some spans to block. */
.ackFlagStar {
    display: inline !important;
    color: #c0392b;
    font-weight: bold;
    font-size: 15px;
    margin-right: 4px;
    white-space: nowrap;
}

/* Error message shown after a blocked submit attempt. */
#ackFlagError {
    display: none;
    margin: 10px 0 14px 0;
    padding: 12px 16px;
    background-color: #fdecea;
    border-left: 4px solid #c0392b;
    border-radius: 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #922b21;
    font-weight: bold;
}

/* Red ring around the checkboxes while the error is showing.
   outline rather than border so nothing shifts. */
.ackFlagHighlight {
    outline: 2px solid #c0392b !important;
    outline-offset: 2px !important;
}