/*
	MODIFICATION HISTORY
	2020-08-22 DBO Merging several stylesheets that are used by every page into one.
 */

/**
 * STDPAGEHEADER::CORE CSS FILES FOR ALL PROJECTS
 *
 * NOTICE:
 *    This file is COPYRIGHT by AFFINITYCE, LLC. All rights reserved. Contents of
 *    this file represent proprietary information and trade secrets. Only authorized
 *    individuals are permitted to view and/or modify the contents of this file.
 *
 * AUTHOR:
 *    David B. O'Donnell <dodonnell@pesgce.com>
 *
 * ADDITIONAL NOTICE:
 *    This file may include or reference certain third-party open source or licensed
 *    proprietary works, libraries, or source files, including but not limited to the
 *    following:
 *
 *    * FONT AWESOME (fontawesome.io)       * KALENDAE (github.com/ChiperSoft/Kalendae)
 *    * BOOTSTRAP (getbootstrap.com)        * MPDF (mpdf.github.io)
 *    * JQUERY (jquery.com)                 * PLUPLOAD (www.plupload.com)
 *    * JQUERYUI (jqueryui.com)             * NORMALIZR (necolas.github.io/normalize.css/)
 *    * TINYMCE (tinymce.com)               * ROME (bevacqua.github.io/rome/)
 *    * PHPDOCX (phpdocx.com)               * PHPEXCEL (github.com/PHPOffice/PHPExcel)
 *
 *    Not all included or referenced works are the latest versions available from the
 *    vendor.
 *
 */

/* 2025-07-15 DBO Rather than loading alerts, tables, etc. separately, @import the relevant bits here */
@import url('alerts.css');
@import url('tables.css');

/* TOP-LEVEL: loaded fonts, elements and the catch-all * */
@font-face {
    font-family: 'dejavu_sans_condensed';
    src: local('DejaVu Sans Condensed');
    src: url('/ui/fonts/dejavusanscondensed-webfont.eot');
    src: url('/ui/fonts/dejavusanscondensed-webfont.eot?#iefix') format('embedded-opentype'),
    url('/ui/fonts/dejavusanscondensed-webfont.woff') format('woff'),
    url('/ui/fonts/dejavusanscondensed-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* From https://css-tip.com/screen-dimension/ */
@property --_w {
    syntax: '<length>';
    inherits: true;
    initial-value: 100vw;
}

@property --_h {
    syntax: '<length>';
    inherits: true;
    initial-value: 100vh;
}

/* From Planet Webkit, 2025-05-21 */
@view-transition {
    navigation: auto;
}

:root {
    --w: tan(atan2(var(--_w), 1px)); /* screen width */
    --h: tan(atan2(var(--_h), 1px)); /* screen height*/
    /* The result is an integer without unit  */
}

/* CSS code to display the results of the above
}

body:before {
  content: counter(w) "x" counter(h);
  counter-reset: h var(--h) w var(--w);
  font-size: 50px;
  font-family: system-ui,sans-serif;
  font-weight: 900;
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
}
 */

* {
    box-sizing: border-box;
    filter: none !important;
}

/* From css-tip.com 2024-06-10 */
* {
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    /* it works well with text-align: center */
}

/* 2025-02-05 DBO More aesthetically pleasing pseudo-heading styles
   derived in part from Bootstrap 5.3.3
 */
.heading-main, .heading-1, h1 {
    font-size: 200%;
    margin-bottom: 0.5rem;
    text-wrap: pretty;
    line-height: normal;
}

.heading-sub, .heading-2, h2 {
    font-size: 150%;
    margin-bottom: 0.25rem;
    text-wrap: pretty;
    line-height: normal;
}

.heading-sub2, .heading-3, h3 {
    font-size: 130%; /* roughly text-130 */
    margin-bottom: 0;
    text-wrap: balance;
}

html {
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}

/* FLEXBOX for footer floating to bottom of page when content < viewport height */
body {
    background-color: #fff;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    color: #000;
}

body, p, li, a, input[type=text], input[type=password], input[type=email], input[type=submit], label, select, textarea {
    text-rendering: optimizeLegibility;
    hyphens: auto;
}

textarea, a {
    hyphens: none;
}

ul, ol {
    margin: 0 0 0.4rem 0;
}

/* 2023-06-28 Enable font kerning and slashed zeros for browsers and OSes that
   support the OpenType features */
body, p, li, a, h1, h2, h3, h4, h5, h6, small, label, textarea, td, th {
    font-feature-settings: "kern", "zero";
}

/* 2020-08-22 DBO I'm not sure that specifying these fonts is a good idea/ */
tt, .tt, .sm-tt, .lg-tt, .tt-sm, .tt-lg {
    font: 0.9em Hack, Menlo, Consolas, Courier, monospace !important;
    text-rendering: optimizeSpeed;
}

/* 2020-08-22 DBO I question the wisdom of this choice, but it is widely used. */
button + button {
    margin-left: 2rem;
}

/* TABLE styles. These should be largely obsoleted by tafels; <table> should be unstyled */
table {
    background-color: #fff;
}

tr {
    height: 2rem;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

table.shade_rows tr:hover, table.shade-rows tr:hover {
    box-shadow: inset 0 0 0.4rem var(---tafel-band) !important;
}

table.shade_rows thead, table.shade-rows thead {
    background-color: var(---tafel-head-bg);
    color: var(---tafel-head-fg);
}

td, th {
    vertical-align: middle;
    padding: 0.25rem 0.35rem 0.25rem 0.35rem;
}

th a:visited, a.td_white, a:hover.td_white, a:visited.td_white {
    color: inherit;
}

tr.table_footer td {
    padding: 0.125rem 0;
}

td.action_palette {
    padding: 0 6px;
}

td.content_td {
    padding: 6px;
}

table.mceLayout {
    margin-bottom: 0.5rem !important;
}

table.mceLayout tr {
    height: auto;
}

/* inline action buttons */
td.action-buttons {
    height: 100%;
    min-height: 100%;
    padding: 0 !important;
    vertical-align: top;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-collapse: collapse;
}


/* NAMED PAGE REGIONS */
#main_area, #main-area {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

#footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
}

#head-content {
    flex-grow: 1;
    margin: 0 auto;
}

#adminbar, #specialContent,
#footNote, #previewbar, #auxbar, #lede {
    max-width: 100%;
    align-items: center;
    justify-content: flex-start;
    margin: 0 auto !important;
    /* From Bootstrap. I don't want to have to add container-fluid to every bloody bread-container code line… */
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding: 0.25rem calc(var(--bs-gutter-x) * .5);
}

#adminbar form, #adminbar p, #specialContent > div,
#footNote p, #previewbar p, #auxbar p, #lede > div {
    max-width: 100%;
    margin: 0 auto;
    justify-content: flex-start;
    flex-shrink: 0;
}

#auxbar {
    background-color: antiquewhite;
}

#footNote p {
    line-height: 1rem;
}

#content {
    min-height: 400px;
    padding: 0.8rem 0.4rem;
    margin: 0 auto;
    flex: 1 0 auto;
}

.footer-group {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
}

.footer-box {
    display: flex;
    align-items: center;
    height: 100%;
}

.not-allowed {
    cursor: not-allowed !important;
}

.faux-hyperlink {
    cursor: pointer !important;
}

.no-cursor {
    cursor: default !important;
}

[tabindex="-1"]:focus {
    outline: none !important;
}

.form-inline label {
    justify-content: flex-end;
}

.no-follow {
    margin-left: 0 !important;
}

.small-left-margin {
    margin-left: 0.5em;
}

.sm-tt, .tt-sm {
    font-size: 0.75em !important;
}

.lg-tt, .tt-lg {
    font-size: 1.15em !important;
}

/* 2024-07-17 DBO Site navbar */
.site-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
}

.site-navbar div:first-of-type {
    flex-grow: 1;
}

/* Breadcrumb */
.bread-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto !important;
    /* From Bootstrap. I don't want to have to add container-fluid to every bloody bread-container code line… */
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding: 0.25rem calc(var(--bs-gutter-x) * .5);
    /*    padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
        margin-right: auto;
        margin-left: auto;
        padding-top:0.25rem;
        padding-bottom:0.25rem;*/
}

.bread-line {
    list-style: none;
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}

.first-loaf {
    margin-right: 0.5rem;
}

.bread-box {
    margin: 0.5rem 0.5rem 0.5rem 0;
}

.bread-box a {
    padding: 0.5rem;
    margin-right: 0.25rem;
}

.bread-line .bread-box a:hover {
    background-color: rgba(255, 255, 255, 0.7) !important;
    color: #000;
}

/* Audit-bar is used for a small informational section to display activity or session audit fields */
.audit-bar {
    padding: 0.3rem 0.25rem 0.3rem 0.5rem;
    background-color: #ebebeb;
    color: #595959;
    border-radius: 0.4rem;
}

.copyblock {
    text-align: right;
    padding: 0 0.75rem;
    font-size: 90%;
    line-height: 1.1rem !important;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

/* HYPERLINK STYLES These should all be wiped out and removed from client bs4.css, too
   because they inevitably cause more trouble than they are worth
 */
a, .fake_a, .fake-a, a:active, a:visited {
    color: #2356a9;
    text-decoration: none;
    font-size: inherit;
    cursor: pointer;
}

a.image, a.image:hover, a.image img {
    border: 0;
    margin: inherit;
    padding: inherit;
    text-decoration: none;
    background-color: transparent;
}

/* Moved a.none to core_ui so it takes precedence over site.css */
a.white, a:hover.white, a:visited.white,
a.td_white, a:hover.td_white, a:visited.td_white {
    text-decoration: none;
    color: #fff;
    background-color: transparent;
    border: 0;
    margin: 0;
    padding: 0;
}

a.none, a:hover.none, a.none img,
a.normaltext, a:hover.normaltext, a.text-normal, a:hover.text-normal,
a:active.none, a:visited.none {
    text-decoration: none !important;
    color: inherit;
    background-color: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transition: none !important;
    text-shadow: none;
    box-decoration-break: slice;
}

/* Compound fields for BS4 */
.left-field {
    border-top-right-radius: 0;
    border-top-left-radius: 0.25rem !important;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0.25rem !important;
}

.right-field {
    border-top-left-radius: 0;
    border-top-right-radius: 0.25rem !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0.25rem !important;
    border-left: none;
}

.input-group .middle-field, .no-radii {
    border-radius: 0 !important;
}

.middle-field {
    border-radius: 0;
    border-left: none;
}

.no-left-radii {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.no-right-radii {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Setting buttons emulate radio groups to toggle settings */
.setting-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.setting-container, .characteristic-container, .option-container, .setting-container-inline {
    padding: 0.5rem;
    /*margin: 0 0.15%;*/
    min-height: 3rem;
    width: 99%;
    break-inside: avoid;
}

.setting-grid > .setting-container {
    width: calc(50% - 0.6rem) !important;
}

.setting-container button:hover span {
    color: #000 !important;
}

.setting-container-inline {
    width: auto;
    min-height: 1rem;
    display: inline-block;
}

.option-container {
    border-width: 0.1875rem;
    border-style: solid;
    border-radius: 0.4rem;
    background-color: transparent;
    text-align: left;
    padding: 0.4rem;
    margin-bottom: 1rem;
    page-break-inside: avoid;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.option-container-button {
    border: none !important;
    background-color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-content: flex-start;
    text-align: left;
    cursor: pointer !important;
    width: 100%;
    padding: 0 !important;
}

.setting-button, .characteristic-button, .inline-setting-button {
    display: flex;
    align-items: center;
    border-width: 0.125rem;
    border-style: solid;
    border-radius: 0.375rem;
    background-color: transparent;
    text-align: left;
    padding: 0.3rem 0.5rem;
    cursor: pointer !important;
}

.setting-button-control {
    flex-basis: 1.5rem;
    align-self: center;
}

.setting-button-content::first-line {
    font-size: 130%;
    font-weight: 500;
    line-height: 120%;
}

.inline-setting-button {
    border-width: 0;
    width: auto;
}

.characteristic-button {
    border-width: 1px;
}

.setting-set, .characteristic-set {
    border-color: var(--color-green-medium);
    background-color: rgb(from var(--color-green-medium) r g b / 8%);
}

.setting-set:hover, .characteristic-set:hover {
    background-color: rgb(from var(--color-green-medium) r g b / 65%);
    border-color: var(--color-green);
    color: var(--color-white);
}

.setting-set:hover button:hover, .setting-set:hover button:hover span {
    color: var(--color-white) !important;
}

.setting-unset, .characteristic-unset {
    border-color: var(--color-grey-35pct);
}

.characteristic-unset:hover {
    background-color: var(--color-grey-10pct-a);
}

.setting-checkbox {
    width: 1.5rem;
}

.setting-container p.setting-text {
    margin-left: 2rem;
}

/* 2025-07-15 DBO Multicolumn layout setup */
.twocolumn, .twocol, .columns-2, .columns-3, .columns-4, .columns-5, .columns-6 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-count: 2;
    column-fill: balance;
    column-gap: 0;
    column-width: auto;
}

.twocolumn p, .twocol p, .columns-2 p, .columns-3 p, .columns-4 p, .columns-5 p, .columns-6 p,
.twocolumn div, .twocol div, .columns-2 div, .columns-3 div, .columns-4 div, .columns-5 div, .columns-6 div {
    break-inside: avoid;
    break-after: avoid;
}

.columns-2 > div {
    flex-basis: calc(50% - 0.5rem);
}

.columns-2 .setting-container {
    margin: 0.25rem;
}

.columns-3 {
    column-count: 3;
}

.columns-3 > div {
    flex-basis: calc(calc(100% / 3) - 0.33rem);
}

.columns-3 .setting-container {
    margin: 0.25rem 0.16rem;
}

.columns-4 {
    column-count: 4;
}

.columns-4 > div {
    flex-basis: calc(50% - 0.25rem);
}

.columns-4 .setting-container {
    margin: 0.25rem 0.12rem;
}

.columns-5 {
    column-count: 5;
}

.columns-6 {
    column-count: 6;
}

.twocol, .columns-2, .columns-3, .columns-4, .columns-5, .columns-6 {
    padding: 0;
}

.twocolumn > .show-hover:hover, .twocol > .show-hover:hover, .columns-2 > .show-hover:hover,
.columns-3 > .show-hover:hover, .columns-4 > .show-hover:hover, .columns-5 > .show-hover:hover, .columns-6 > .show-hover:hover {
    border: 1px solid #CED9E0;
    padding: 0.25rem;
    background-color: #e1eef7;
    border-radius: 0.25rem;
    background-clip: padding-box;
    margin: -0.25rem;
}

/* 2024-11-07 DBO Another attempt at grids of settings */
.sg-button {
    color: currentColor !important;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    margin-left: 0 !important;
    margin-block-start: 0 !important;
    border-radius: 0.4rem;
    background: transparent;
    justify-content: flex-start;
    text-align: left;
}

.sg-button-disabled {
    color: var(--color-grey-50pct) !important;
}

.sg-button-control {
    flex-basis: 2rem;
    flex-grow: 0;
    padding: 0.4rem;
    justify-content: center;
}

.sg-button-content {
    flex-grow: 1;
    padding: 0.4rem 0.4rem 0.4rem 0;
    font-size: 90%;
}

.sg-button-extra {
    padding-bottom: 0;
}

.sg-button-title, .sg-button-title-on {
    display: block;
    font-weight: normal;
    font-size: 115%;
}

.sg-button-title-on {
    font-weight: bold;
}

.sg-content-extra {
    display: block;
    margin-left: 2rem;
}

.sg-container {
    width: 100%;
    border: 0.0625rem solid var(--color-grey-35pct);
    outline: 0.0625rem solid transparent;
    border-radius: 0.4rem;
    break-inside: avoid;
    margin-bottom: 0.7rem;
}

.sg-container-enabled {
    border-color: var(--color-green-medium);
    border-width: 0.0625rem;
    outline-color: rgb(from var(--color-green-medium) r g b / 45%);
    outline-width: 0.0625rem;
    background-color: rgb(from var(--color-green-medium) r g b / 8%);
}

.sg-container-mixed {
    border-color: var(--color-gold);
    border-width: 0.0625rem;
    outline-color: rgb(from var(--color-gold) r g b / 45%);
    outline-width: 0.0625rem;
    background-color: rgb(from var(--color-gold) r g b / 8%);
}

.sg-container-disabled {
    border-color: var(--color-grey-45pct);
    border-width: 0.0625rem;
    outline-color: var(--color-grey-10pct-a);
    outline-width: 0.0625rem;
    background-color: var(--color-grey-5pct-a);
}

.sg-container:hover {
    background-color: var(--color-grey-10pct-a);
    outline-color: var(--color-grey-35pct);
}

.sg-container-enabled:hover {
    background-color: rgb(from var(--color-green-medium) r g b / 55%);
    border-color: var(--color-green);
    outline-color: var(--color-green);
}

.sg-container-mixed:hover {
    background-color: rgb(from var(--color-gold) r g b / 65%);
    border-color: var(--color-gold);
    outline-color: var(--color-gold);
}

.sg-container-enabled:hover div, .sg-container-enabled:hover span, .sg-container-enabled:hover span.text-muted, .sg-container-enabled:hover a {
    color: var(--color-white) !important;
}

.sg-grid {
    columns: 2;
    column-gap: 0.6rem;
    column-fill: balance;
    max-height: 30rem;
}

.sg-cols-1 {
    columns: unset;
    max-width: calc(50% - 0.3rem);
}

.sg-cols-2 {
    columns: 2;
}

.sg-cols-3 {
    columns: 3;
}

.sg-cols-4 {
    columns: 3;
}

.sg-grid-w20 {
    max-height: 20rem;
}

/* Supplemental form fields */
/* 2021-01-13 DBO BS 5 obviates these styles
.form-label, .span-label {
	width:11rem;
	text-align:right !important;
	margin-right:0.5rem;
	hyphens:none;
	-ms-hyphens:none;
	-webkit-hyphens:none;
}*/

.span-label {
    display: inline-block;
    padding-top: 0;
    vertical-align: baseline;
}

.label-offset {
    margin-left: 11.5rem;
}

.label-offset-sm {
    margin-left: 6rem;
}

/* "Inline" button style for inline buttons (no border, transparent BG, no hover font effect) */
.btn-inline {
    background-color: transparent;
}

.btn-inline:hover {
    color: inherit;
}

/* Based on CE Depot System hub.php selector-button */
.btn-unadorned, .btn-unadorned-inline, .setting-button-button, .setting-button-profession {
    border: none;
    background-color: transparent;
    text-align: left;
    align-items: baseline;
    padding: 0.5rem;
    margin: 0;
    width: 100%;
    cursor: pointer;
    font-weight: 400;
    color: inherit;
}

.setting-button-button, .setting-button-profession {
    display: flex;
    padding: 0;
}

.setting-button-profession {
    align-items: center;
}

.setting-button-button > span, .setting-button-button > svg {
    margin-top: 0.25em;
}

.setting-button .btn-unadorned {
    display: flex;
}

.btn-unadorned-inline {
    width: auto;
}

.action-container {
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: stretch;
    align-content: stretch;
}

.action-container-across {
    flex-flow: row wrap;
}

.btn-action {
    margin: 0 !important;
    background-color: transparent;
    flex: 1 1 auto;
    font-size: 85%;
    text-transform: uppercase;
    letter-spacing: 0.025em; /* Butterick */
    border-left: 1px solid var(--color-grey-1pct-a);
    border-right: none;
    border-bottom: 1px solid var(--color-grey-1pct-a);
    border-top: none;
    min-height: 2.5625rem;
}

.btn-action:hover {
    cursor: pointer;
    color: #fff;
    font-weight: bolder;
    background-color: rgba(0, 0, 0, 0.4);
}

.btn-action:disabled, .btn-action:disabled:hover {
    cursor: not-allowed !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: rgba(0, 0, 0, 0.3) !important;
}

/* draw_button_array() styles */
.button-array-container {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    margin: auto;
    border: 1px solid #ccc;
    border-left: none;
    border-bottom: none;
    box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.06);
    list-style: none;
    padding: 0;
}

.button-array-container:hover {
    box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.2);
}

.button-array-break-2 {
    flex: 1 1 50%;
}

.button-array-break-3 {
    flex: 1 1 33.33%;
}

.button-array-break-4 {
    flex: 1 1 25%;
}

.button-array-break-5 {
    flex: 1 1 20%;
}

.button-array-break-6 {
    flex: 1 1 16.66%;
}

.button-array-break-8 {
    flex: 1 1 12.5%;
}

.button-array-break-10 {
    flex: 1 1 10%;
}

.button-array-element {
    border: 1px solid #ccc;
    border-top: none;
    border-right: none;
    display: flex;
    hyphens: none;
    -ms-hyphens: none;
    -moz-hyphens: none;
    -webkit-hyphens: none;
}

.button-array-button {
    text-transform: uppercase;
    letter-spacing: 0.025em; /* Butterick */
    font-size: 90%;
    background-color: var(--color-white);
    padding: 0.75rem 1.5rem;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    hyphens: none;
    -webkit-hyphens: none;
    font-weight: 400;
    color: inherit;
}

.button-array-button-no-padding {
    padding: 0 !important;
}

.button-array-button-inactive, .button-array-button:disabled {
    color: #666;
    background-color: #eee;
}

.button-array-button-inactive p svg {
    color: #666 !important;
}

.button-array-button:disabled {
    cursor: not-allowed !important;
    color: #dadada;
}

.button-array-button:hover {
    background-color: #287abd;
    color: #fff;
}

.button-array-button:hover p svg {
    color: #fff !important;
}

/* Button array colors are in alerts.css */

/* 2019-07-25 DBO This definition is shamelessly stolen from PHPStorm */
kbd {
    font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", Courier, monospace;
    line-height: inherit;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0.125rem 0.375rem 0.125rem;
    white-space: nowrap;
    border-radius: 0.1875rem;
    border: 0.0625rem solid var(--color-grey-20pct);
    color: var(--color-black);
    background-color: #fff;
    box-shadow: 0 0.125rem 0 -0.0625rem #fff, 0 0.125rem 0 var(--color-grey-20pct);
}

/* 2019-11-07 DBO Trying to make IDs look a little more obvious without being overly-obvious */

.id-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-grey-60pct-a);
    color: var(--color-grey-85pct-a) !important;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 0.3em;
    font-size: 0.8rem !important;
    padding-right: 0.3em;
    height: 1.4em;
    min-width: 3em;
    font-weight: 400;
    overflow-y: clip;
    flex-shrink: 0;
}

.id-pill::before {
    align-self: center;
    content: "ID";
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0.2rem 0.25rem 0.2rem 0.2rem;
    margin-right: 0.3em;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}

.id-pill:hover {
    border: 1px solid transparent;
    background-color: transparent !important;
    color: #000 !important;
}

.id-pill:hover::before {
    background-color: transparent !important;
    padding: 0.2rem 0.05rem 0.2rem 0.4rem;
    color: #000 !important;
}

/* For image replacement */
.ir {
    display: block;
    text-indent: -999em;
    overflow: hidden;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
}

.ir br {
    display: none;
}

/* Hide for both screenreaders and browsers:
css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden {
    display: none;
    visibility: hidden;
}

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

/* Common text and link scaling and color effects */
.u {
    text-decoration: underline;
}

.s {
    text-decoration: line-through;
}

.b {
    font-weight: bolder;
}

.i {
    font-style: oblique;
}

.no-padding, .padding-none {
    padding: 0 !important;
}

.smaller, .text-smaller, .text-sm, .text-75 {
    font-size: 75%;
}

.text-50 {
    font-size: 50%;
}

.text-55 {
    font-size: 55%;
}

.text-60 {
    font-size: 60%;
}

.text-65 {
    font-size: 65%;
}

.text-70 {
    font-size: 70%;
}

.text-75 {
    font-size: 75%;
}

.text-80 {
    font-size: 80%;
}

.text-85 {
    font-size: 85%;
}

.text-90 {
    font-size: 90%;
}

.text-95 {
    font-size: 95%;
}

.text-100 {
    font-size: 100%;
}

.text-105 {
    font-size: 105%;
}

.text-110 {
    font-size: 110%;
}

.text-115 {
    font-size: 115%;
}

.larger, .text-larger, .text-lg, .text-large, .text-120 {
    font-size: 120%;
}

.text-125 {
    font-size: 125%;
}

.text-130 {
    font-size: 130%;
}

.text-135 {
    font-size: 135%;
}

.text-140 {
    font-size: 140%;
}

.text-145 {
    font-size: 145%;
}

.text-xlarge, .text-150 {
    font-size: 150%;
}

.text-155 {
    font-size: 155%;
}

.text-160 {
    font-size: 160%;
}

.text-165 {
    font-size: 165%;
}

.text-170 {
    font-size: 170%;
}

.text-175 {
    font-size: 175%;
}

.text-180 {
    font-size: 180%;
}

.text-185 {
    font-size: 185%;
}

.text-190 {
    font-size: 190%;
}

.text-195 {
    font-size: 195%;
}

.text-jumbo, .text-200 {
    font-size: 200%;
}

.white, .text-white {
    color: #fff;
}

.text-grey {
    color: #899caa;
}

.text-dark-grey {
    color: #627a8a;
}

.subtle {
    color: #aad;
}

.subtle_inline_grey {
    color: #ddd;
}

.subtle_inline_grey_dark {
    color: #999;
}

.text-bold {
    font-weight: bold;
}

.allcaps, .all-caps {
    text-transform: uppercase;
    letter-spacing: 0.025em; /* Butterick */
}

.smcaps, .sm-caps {
    font-variant: small-caps;
    letter-spacing: 0.03em; /* After Butterick */
}

.dim {
    opacity: 0.3;
}

.nofx, .nofx:hover, .nofx:active, .nofx:visited, .no-fx, .no-fx:hover, .no-fx:active, .no-fx:visited {
    transition: none;
    color: inherit;
    background-color: inherit;
    padding: 0;
    margin: inherit;
    border-radius: inherit;
    text-shadow: none;
}

/* Hyphenation control -- by default, turned on with "modern" layout */
.nohyphens, .no-hyphens, .hyphens-none, .hyphen-none, .no-hyphenate {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
}

.hyphenate {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

.plaintext, .text-plain {
    font-weight: normal;
}

.normalsize, .text-normal {
    font-size: medium;
}

/* Common p and other block element styling for vertical spacing */
.lineabove, .la1 {
    margin-top: 1rem;
}

.line2above, .la2 {
    margin-top: 2rem;
}

.above1em, .text-above-1em {
    margin-top: 1em;
}

.above15em .text-above-15em {
    margin-top: 1.5em;
}

.above05em .text-above-05em {
    margin-top: 0.5em;
}

.above2em .text-above-2em {
    margin-top: 2em;
}

.above3em, .text-above-3em {
    margin-top: 3em;
}

.text-above-1rem {
    margin-top: 1rem;
}

.text-above-4rem {
    margin-top: 4rem;
}

.text-above-15rem {
    margin-top: 1.5rem;
}

.text-above-02rem {
    margin-top: 0.2rem;
}

.text-above-03rem {
    margin-top: 0.3rem;
}

.text-above-04rem {
    margin-top: 0.4rem;
}

.text-above-05rem {
    margin-top: 0.5rem;
}

.text-above-06rem {
    margin-top: 0.6rem;
}

.text-above-075rem {
    margin-top: 0.75rem;
}

.text-above-2rem {
    margin-top: 2rem;
}

.text-above-3rem {
    margin-top: 3rem;
}

.linebelow, .text-below-1em, .text-below-1rem {
    margin-bottom: 1rem !important;
}

.text-below-15em, .text-below-15rem {
    margin-bottom: 1.5rem;
}

.text-below-2em, .text-below-2rem {
    margin-bottom: 2rem;
}

.text-below-3em, .text-below-3rem {
    margin-bottom: 3rem;
}

.text-below-4em, .text-below-4rem {
    margin-bottom: 4rem;
}

.xlineabove, .lax, .text-above-1ex {
    margin-top: 1ex;
}

.xlinebelow, .text-below-1ex {
    margin-bottom: 1ex !important;
}

.nobelow, .text-no-below {
    margin-bottom: 0;
}

.below-04, .text-below-04 {
    margin-bottom: 0.4rem !important;
}

.below-03, .text-below-03 {
    margin-bottom: 0.3rem;
}

.below-02, .text-below-02 {
    margin-bottom: 0.2rem;
}

.below-06, .text-below-06 {
    margin-bottom: 0.6rem;
}

.below-075, .text-below-075 {
    margin-bottom: 0.75rem;
}

.nobr, .no-br {
    white-space: nowrap;
}

/* span, td, etc. text alignment */
.alignright, .align-right {
    text-align: right;
}

.aligncenter, .align-center {
    text-align: center;
}

.alignleft, .align-left {
    text-align: left;
}

.required {
    font-weight: bold;
    color: #e02900;
}

.required-text::before, .text-required::before {
    content: "✻";
    color: #e02900;
    margin-right: 0.2em;
}

.error-text::before, .error_32::before {
    content: url(/img/stop-sign.svg);
    display: inline-flex;
    width: 1.3em;
    margin-right: 0.2rem;
}

.grid tr:hover .required {
    color: #fff;
    background-color: #e02900;
    padding: 3px 5px;
    margin: -3px 0;
    border-radius: 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Image and container set sizes and alignment */
.img_button, .link_button {
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

.link_button {
    margin: 0 0 4px 0 !important;
}

.icon_cell {
    width: 36px;
}

.sm_icon {
    height: 24px;
    width: 24px !important;
}

.p_btn, .btn-ptr, .btn-pointer, .fake_a {
    cursor: pointer;
}

/* Element vertical alignment, general and in forms */
.above_vamiddle {
    height: 32px;
    margin-top: 0.6em;
}

.vamiddle {
    vertical-align: middle;
}

.vabottom {
    vertical-align: bottom;
}

.vatop {
    vertical-align: top;
}

.vabase {
    vertical-align: baseline;
}

.advisory-note p:last-of-type {
    margin-bottom: 0 !important;
}

/* Fake bullet: put a number in a large colored circle */
.pseudobull {
    display: inline-flex;
    place-content: safe center;
    align-items: center;
    line-height: inherit;
    height: 2.5rem;
    width: 2.5rem;
    background-color: var(---pseudo-bullet-bg);
    font-weight: bold;
    color: var(---pseudo-bullet-fg);
    border-radius: 50%;
    font-size: 100%;
}

/* "info block" -- i-in-circle UNICODE text (ⓘ) in a nice blue. */
.iblock, .iblock_big, .iblock-big, .iblock-lg {
    color: blue;
}

.iblock:before, .iblock_big:before, .iblock-big:before, .iblock-lg:before {
    content: "\24d8"; /*ⓘ*/
    font-style: normal;
}

/* "alert block" -- !-in-triangle UNICODE text (⚠) in an appropriate orangey-red */
.ablock, .ablock_big, .ablock-big, .ablock-lg {
    color: var(--color-red);
}

.ablock:before, .ablock_big:before, .ablock-big:before, .ablock-lg:before {
    content: "\26a0"; /*⚠*/
    font-style: normal;
}

/* Multiline versions—float to left, apply larger font size, add right margin */
.iblock_big, .ablock_big, .iblock-big, .iblock-lg, .ablock-big, .ablock-lg {
    float: left;
    font-size: 180%;
    margin-right: 0.3em;
}

.alert_color {
    color: var(--color-red);
}

/* Clear both */
.clear_both, .clear-both {
    clear: both;
}

/* "Subheading directions" are meant to be included inline in an H1 or H2 */
.subhead_directions, .subhead-directions {
    margin-left: 1.5em;
    font-weight: normal;
    font-size: 14px; /* Set absolutely based on initial font size in site.css—messy but necessary */
    white-space: nowrap;
}

.subhead_button, .subhead-button {
    float: right;
    margin-right: 32px;
}

/* EXPERIMENTAL -- Force WebKit browsers to display vertical scroll bar in scrolling table divs */
/* By default, Apple hides scrollbars in Mac OS X applications, which can cause confusion when the
	pseudo-table scrolling div is used. Styling the scrollbar forces it to be shown and these rules
   attempt to recreate the default system scrollbar for that instance. */
div ::-webkit-scrollbar {
    width: 1em; /* for vertical scrollbars */
    height: 1em; /* for horizontal scrollbars */
}

div ::-webkit-scrollbar-track:vertical {
    border-top: 0;
    border-bottom: 0;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #f0f0f0;
}

div ::-webkit-scrollbar-track {
    background-color: rgba(252, 252, 252, 0.5);
    /*box-shadow:inset 0 0 3px rgba(229, 229, 229, 0.7);*/
    /*background: -webkit-linear-gradient(left, rgba(229, 229, 229, 0.5), rgba(252, 252, 252, 0.3), rgba(252, 252, 252, 0.3), rgba(229, 229, 229, 0.3));*/
}

div ::-webkit-scrollbar-thumb {
    background-color: rgb(194, 194, 194);
    border-radius: 7px;
    border-left: 4px solid rgba(252, 252, 252, 0.95);
    border-right: 3px solid rgba(252, 252, 252, 0.95);
    border-top: 2px solid rgba(252, 252, 252, 0.95);
    border-bottom: 2px solid rgba(252, 252, 252, 0.95);
}

/* Put "tooltip" text in the fake attribute "infotip" */
.infotip-left, .infotip-right {
    display: inline;
    position: relative;
    cursor: help;
}

.infotip-left:hover:after, .infotip-right:hover:after {
    background: rgba(255, 255, 266, 0.85);
    border: 1px solid #333;
    border-radius: 0.4rem;
    bottom: 26px;
    color: #333;
    text-shadow: 0 0.15rem 0.3rem #fff;
    left: 5%;
    padding: 0.2rem 0.4rem;
    position: absolute;
    z-index: 98;
    content: attr(infotip);
    text-align: left;
    font-weight: normal;
    font-size: 80%;
}

.infotip-right:hover:after {
    right: -25%;
    left: auto;
}

.infotip-left:hover:before, .infotip-right:hover:before {
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

.infotip-width-16:hover:after {
    width: 16rem;
}

.infotip-width-24:hover:after {
    width: 24rem;
}

.infotip-width-32:hover:after {
    width: 32rem;
}

.mce-content > p:last-of-type {
    margin-bottom: 0 !important;
}

input.form-control.date-field.is-invalid {
    width: 11.5rem !important;
}

/* HTML: <div class="breadcrumb"></div> */
.click-here {
    --s: 0.8125rem; /* control the shape */

    line-height: 1.8; /* control the height */
    padding-inline: .4em calc(var(--s) + .2em);
    clip-path: polygon(0 0, calc(100% - var(--s)) 0, 100% 50%, calc(100% - var(--s)) 100%, 0 100%);
    width: fit-content;
    margin-right: 0.5rem;
}

/* Adding "fill-me" class to help highlight form fields that need completion when
    they've got a default-set value of NULL
 */
.fill-me {
    background-color: yellow !important;
}

/* 2025-08-21 DBO Turns out that "sr-only" was from Font Awesome, NOT Bootstrap.
              Since FA7 doesn't include that style any longer, we need to until
              I can replace it with BS' "visually-hidden" everywhere.
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 2025-06-25 DBO Add a warning notice at the top of admin pages
   on devices with small screens.
 */
.needs-desktop {
    display: none;
}

@media (max-width: 1024px) {
    .needs-desktop {
        display: block;
        width: 100%;
        background-color: orange;
        color: black;
        padding: 1.5rem;
        font-size: 1.5rem;
    }
}