@media screen, print {

/* ------------ jAlerts ----------------- */
#popup_overlay  { background:rgb(102, 102, 102) !important; opacity:.5 !important;/* Overrides inline style. */ position:fixed!important;/* Instead of `absolute` (inline style) to not scroll horizontally. */ }
#popup_container{ border-radius:5px; background:#e9e9e9; border:2px solid #ececec; color:#333; font-size:16px; max-width:600px !important;/* Overrides inline style. */ min-width:328px !important;/* Overrides inline style. */
             -moz-border-radius:5px;
          -webkit-border-radius:5px; }
#popup_title    { background:transparent; border:0 !important;/* Overrides bottom style. */ color:#333; cursor:default !important;/* Overrides inline style. */ font-family:helvetica,arial,sans-serif; font-size:28px; font-weight:300; height:auto; line-height:1; margin:18px 0; text-align:center; }
#popup_content  { background:transparent; padding:.5em 1.75em 1em; margin:0; }
#popup_message > small /* addition especially for un-/lock system part */
                { background-color:#e0e0e0; display:block; padding:2px 4px; }

#popup_panel table
                { margin:0 auto 0; }
#popup_panel td { border-color:transparent; padding:0 8px 0; }

/* --------------------------------------
   TODO: color codes for alert, cofirm,
         prompt ... --------------------- */
#popup_content.alert,
#popup_content.confirm,
#popup_content.prompt,
#popup_content.sign
                { background:transparent; }
#popup_message  { border-bottom:2px solid #e0e0e0; color:#777; padding:0 8px 0; text-align:center; }
#popup_panel    { text-align:center; margin:1.25em 0 0 0; }
#popup_prompt   { margin:.5em 0; }


/* ------------ jAlerts’ jConfirm’s table */
/* Wider for table contents. */
.bi #popup_container
                { max-width:90% !important; /* Override inline style. */ }
/* Restore Bi’s standard table look. */
#popup_message table
                { text-align:initial; /* Undo `center` above. */ }
#popup_message th
                { font-size:14px; /* Undo CRF’s namespaced. */ }
#popup_message td
                { border-top:1px solid #d9d9d9; font-size:16px; line-height:1.75; padding:7px 12px 5px 5px; vertical-align:baseline; }
#popup_message td:first-child,
#popup_message th:first-child
                { padding-left:12px; }


/* Scroll unless high enough.

   See “Form sections as fixed tab navigation on the left”
   in ./crf/crf.css */

/* If `calc()` makes problem (e.g., with old browser),
   write some JavaScript instead of subtracting values. */

.bi #popup_container.scroll {
  /* height - filter bar
            - CRF header
            - gap on top between fixed tab navigation and CRF header
            - form actions bar, i.e., `.bottomlayer` */

  height: -webkit-calc(100% - 44px - 101px - 38px - 62px);
  height:    -moz-calc(100% - 44px - 101px - 38px - 62px);
  height:         calc(100% - 44px - 101px - 38px - 62px);
}
.bi .scroll #popup_content {
  /* height - padding self
            - popup title */

  height: -webkit-calc(100% - 24px - 64px);
  height:    -moz-calc(100% - 24px - 64px);
  height:         calc(100% - 24px - 64px);
}

.scroll #popup_message {
  /* Scroll unless high enough.
     height - popup panel (i.e., button(s)) */

  height: -webkit-calc(100% - 52px);
  height:    -moz-calc(100% - 52px);
  height:         calc(100% - 52px);

  /* Let scroll vertically. */
  overflow-y: auto;
}


/* ------------ jAlerts’ jSign/Prompt --- */
#popup_content.sign
                { max-width:320px;/* Many words. */ min-height:240px;/* Improve calculation of initial positioning. */ }
#popup_content.prompt
                { max-width:320px;/* Many words. */ min-height:172px;/* Improve calculation of initial positioning. */ }
#popup_content.promptbox
                { max-width:320px;/* Many words. */ min-height:252px;/* Improve calculation of initial positioning. */ }
#popup_content.promptbox textarea
                { margin-bottom:10px; min-height:7em; width:290px; }
#popup_content.sign input[type="password"],
#popup_content.sign input[type="text"]
                { width:186px; /* Less 20 of 206 in ./field.css for longer label text. */ }
#popup_content.prompt input[type="text"]
                { width:290px; /* Full-width text input. */ }
#popup_inputs   { padding-top:.125em; text-align:right; }
/* Left --------------------------- Right */
/*      of jSign / Prompt / Confirm       */
.confirm #popup_panel,
.prompt #popup_panel,
.promptbox #popup_panel,
.sign #popup_panel  { height:2em; position:relative; }
.confirm #popup_ok,
.prompt #popup_ok,
.promptbox #popup_ok,
.sign #popup_ok     { left:0; position:absolute; }
.confirm #popup_cancel,
.prompt #popup_cancel,
.promptbox #popup_cancel,
.sign #popup_cancel { position:absolute; right:0; }
/* ------------ jAlerts’ jSign/Prompt err */
#popup_inputs input.required
                { background:#ede574; }
.errormessage   { color:#d52; cursor:text; display:inline-block; font-family:verdana,arial,sans-serif !important; font-size:13px !important; font-weight:400; width:208px; line-height:1.5; min-height:19px; padding:0 4px 4px 8px; text-align:left; }
.prompt .errormessage,
.promptbox .errormessage
                { width:292px; }
/* --------------------------------------
   Above rules mostly copy pasted from
   ./login/login.css -------------------- */

}