html {
    display: table;
    margin: 5px auto 15px auto;
    background-color: whitesmoke;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}

body {
    background-color: white;
    color: black;
    display: table-cell;
    vertical-align: middle;

    border-top: 1px solid gainsboro;
    border-left: 1px solid gainsboro;
    border-right: 1px solid lightslategray;
    border-bottom: 1px solid lightslategray;
    padding: 5px 15px 20px 15px;
    box-shadow: 2px 2px lightgrey;
}

table.header-col-left tr > td:nth-child(1) {
    text-align: right;
    font-weight: 700;
}
table {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: normal;
}
td {
    empty-cells:show;
}

a           {text-decoration: none; }
a:link      {color: blue; }  /* unvisited link */
a:visited   {color: blue; }  /* visited link */
a:active    {color: blue; }
a:hover     {text-decoration: underline; }

.faux_link {
    cursor: pointer;
    color: blue;
}
.faux_link:hover {
    text-decoration: underline;
}
.instructions {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}
.instructions_sm {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-small;
}
.page_header {
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
}
.panel_header {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
}
.panel_label {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}
.panel_label_xsm_b {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-small;
    font-weight:bold;
}
.panel_content_xsm {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-small;
}
.required_item, .critical {
    color: #FF0000;
}
input.read_only {
    background-color: #ffffff;
    border: 0px #ffffff solid;
}
input.read_write {
    background-color: #cccccc;
}
.panel_label_sm {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    font-weight: bold;
}
.form_text_sm {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
}
.data_fixed_sm {
    font-family: "Courier New", Courier, mono;
    font-size: small;
}
.text_content_md {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    /* width: 60%; */
}
.ol_alpha_lower {
    list-style-type: lower-alpha;
}
.text_content_header {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    border-bottom-style: solid;
    border-bottom-color: #009900;
    border-bottom-width: thin;
    margin: 2pt;
    display: block;
}
.important {
    color: #FF6633;
}
.important_smi {
    color: #FF6633;
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    font-style:italic;
}
.panel_content_sm {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
}
.panel_content_sm_b {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    font-weight: bold;
}
.panel_content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}
div.exhibit_listing {
    margin-bottom: 3px;
    width: 750px;
    background-color: aliceblue;
}
div.link_pointer:hover {
    cursor: pointer;
}
div.page_title {
    width: 750px;
    margin: 2px;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
}
div.page_sub_title {
    font-size: 13px;
    margin-top: 4px;
}
div.page_instructions {
    width: 750px;
    margin: 2px;
    padding: 2px;
}
div.table_title_tab {
    font-size: 1.2em;
    border-top: 2px ridge lightgray;
    border-left: 2px ridge lightgray;
    border-right: 2px ridge lightgray;
    padding: 4px;
    margin-right: auto;
    margin-left: 0px;
    display: inline-block;
}
.hidden_element,
.hidden_element > * {
    visibility: hidden;
    height: 0px;
    padding: 0px;
    font-size: 0px;
    border: none;
}
.indent_10px {
    margin-left: 10px;
}

/***** form elements ******/

.disabled‑readable-input {
    background:transparent;
    /* background:#fff !important; /* override UA gray background */
    color:#000 !important;      /* override UA gray text */
    opacity:1 !important;         /* ensure full opacity */
    border: 0;
}

.required-field {
    border: 1px solid #FF0000;
}

.transparent‑field {
    background:transparent;     /* or background:rgba(0,0,0,0); */
    color:#000;               /* text colour */
}

/* Remove native styling that can hide transparency in some browsers */
/*
.transparent‑field {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}
*/
/* :is(input, select, textarea, [contenteditable]):focus { */
:is(input, select, textarea):focus {
    outline: 1px solid cyan;   /* standard blue #0066ff */
    outline-offset: 1px;
}

/***** alternating list colors *****/
.listing-data-table tr:nth-child(even) {
    background-color: honeydew;
}
.listing-data-table tr:nth-child(odd) {
    background-color: WhiteSmoke;
}
.listing-data-table tr:hover td {
    background-color: lightyellow;
}

/* make menu buttons full width */
.menu_table_buttons
    :is(input[type="submit"], input[type="button"]) {
    width: 100%;
}

/**** media and print related *****/
@media print {
    .noprint {
       display: none;
    }
 }

 /**** mobile overrides ****/
@media screen and (max-width: 1024px) {

    /* 1. Reset root HTML layout and establish a readable mobile base font size */
    html {
        display: block !important;
        margin: 0 !important;
        width: 99% !important;
        height: auto !important;
        min-height: 100% !important;
        font-size: 12px !important;
    }

    body {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        box-sizing: border-box !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 10px 5px 50px 5px !important;
        font-size: 1rem !important;
    }

    /* 2. Uniform font sizing across all text elements */
    table, td, th, td *, th *, a, font, select, div {
        font-size: 1rem !important;
    }

    /* 3. Global table and div container expansion with horizontal scroll protection */
    div, table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* Enable horizontal scrolling on div containers for dense tables exceeding mobile width */
    div {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 4. Allow content-driven table layout so columns distribute proportionally */
    table {
        table-layout: auto !important;
    }

    /* 5. Clear fixed width attributes and inline width styles on cells and columns */
    th[width], th[style*="width" i],
    td[width], td[style*="width" i],
    col[width], col[style*="width" i] {
        width: auto !important;
    }

    /* 6. Force text wrapping inside divs and table cells */
    div,
    td,
    th {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
    }

    /* 7. Neutralize legacy nowrap attributes and inline white-space declarations */
    td[nowrap], th[nowrap],
    td[style*="white-space" i], th[style*="white-space" i] {
        white-space:normal !important;
    }

    /* 8. Constrain internal media to prevent horizontal overflow */
    img, embed, object, video {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 9. Interactive link visibility and touch spacing */
    a, .faux_link {
        color: #004B87 !important;
        text-decoration: underline !important;
        cursor: pointer;
        margin: 0.75rem 0 0.75rem 0;
    }

    a:hover, a:active,
    .faux_link:hover, .faux_link:active
     {
        color: #002D62 !important;
        background-color: rgba(0, 75, 135, 0.08) !important;
    }

    li a, td a,
    li .faux_link, td .faux_link {
        display: inline-block;
        padding: 4px 2px;
    }

    /* 10. Form inputs, textareas, and touch-friendly buttons */
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    button,
    .button {
        display: block !important;
        width: 100% !important;
        min-height: 46px !important;
        padding: 12px 16px !important;
        margin-top: 8px !important;
        margin-bottom: 12px !important;
        font-size: 1rem !important;
        box-sizing: border-box !important;
        text-align: center !important;
        cursor: pointer;
    }

    select {
        /* display: block !important; */
        width: 100% !important;
        min-height: 36px !important;
        min-width: 50px !important;
        /* padding: 12px 16px !important; */
        margin-top: 8px !important;
        margin-bottom: 12px !important;
        font-size: 1rem !important;
        box-sizing: border-box !important;
        text-align: left !important;
        cursor: pointer;
        /* opacity: 0.8; */
        /* filter: brightness(90%); */
        background-color: aliceblue;
    }
    select:focus {
        /* opacity: 0.8; */
        filter: brightness(90%);
        /* background-color: ghostwhite; */

    }

    input[type="submit"]:active,
    input[type="button"]:active,
    button:active,
    .button:active {
        opacity: 0.8;
        filter: brightness(90%);
    }

    textarea, input[type="text"]:not([name^="phone_pt"]):not([name="phone_ext"]) {
        width: 99% !important;
        max-width: 99% !important;
        box-sizing: border-box !important;
    }

    /* Override centered alignment to left-justify text in divs and table cells */
    div, td, th,
    [align="center"],
    [style*="text-align" i] {
        text-align: left !important;
    }

    /* additional custom override classes */
    .mobile_text_nowrap {
        text-wrap-mode: nowrap !important;
    }

}