/* 
    why has :is() been commented out?

    because our PDF generator can't understand it, so tables (and other stuff)
    looked bad in PDF exports.

 */

/* font-family: 'Barlow', sans-serif; */
/* font-family: 'Inter', sans-serif; */

/*
blue: rgb(0, 63, 119); #003F77
paleblue: rgb(60.0, 69.8, 78.4); #99b2c8 (pulled from screenshot of "hi > there > stuff" menus)
red: rgb(175, 30, 45); #AF1E2D
lightgrey: rgb(230, 231, 232); #E6E7E8
darkgrey: rgb(147, 149, 152); #939598
error_stroke: rgb(175, 30, 45); #AF1E2D
error_fill: 5% of error_stroke?  #FBE9EB / 251 233 235 / 354 70.7 95%
*/

:root {
  --size-step-0: 13px; /* 1rem */
  --size-step-1: 1.25rem;
  --size-step-2: 1.56rem;
  --size-step-3: 1.95rem;
  --size-step-4: 2.43rem;

/*
  --size-step-0: clamp(13px, calc(0.96rem + 0.22vw), 1.13rem);
  --size-step-1: clamp(1.25rem, calc(1.16rem + 0.43vw), 1.5rem);
  --size-step-2: clamp(1.56rem, calc(1.41rem + 0.76vw), 2rem);
  --size-step-3: clamp(1.95rem, calc(1.71rem + 1.24vw), 2.66rem);
  --size-step-4: clamp(2.44rem, calc(2.05rem + 1.93vw), 3.55rem);
*/
}

body,
html {
    padding: 0;
    margin: 0;
    font-family: 'Inter', Verdana, sans-serif;
    /* font-size: 13px; */
	font-size: var(--size-step-0);
    color: #464545;
    scroll-behavior: smooth;
    --ared: #AF1E2D;
    --ablue: #003F77;
    --apaleblue_rgba: 0, 63, 119, 0.2;
    --algrey: #E6E7E8;
    --adgrey: #939598;
    --avdgrey: #646566; /* very dark grey, sorry */
    --aerrs: #AF1E2D;
    --aerrf: #FBE9EB;
    --max-width: 1400px; /* 1200 */
    --max-width-index: 1000px; /* 1200 */
    --main-background: white;
}


h1,
h2,
h3,
h4,
h5,
.updatedate {
    padding: 0;
    margin: 0 0 .5rem 0;
}


h1 {
    font-size: var(--size-step-4);
}

h2 {
    font-size: var(--size-step-3);
    letter-spacing: -0.05rem;
    text-transform: uppercase;
    color: var(--ared);
}

h3 {
    font-size: var(--size-step-2);
}

h4 {
    font-size: var(--size-step-1);
    text-transform: uppercase;
    margin-bottom: 0;
}

h1,
h2,
h3 {
	line-height: 1.1;
}

option:checked,
::selection {
    background: var(--ablue);
    color: white;
}

a {
    color: var(--ablue);
}

a:hover {
    color: var(--ared);
    text-decoration-color: var(--ared);
}

p {
    line-height: 1.5rem;
    margin: 0;
    padding: 0 0 1.5rem 0;
}


header {
    max-width: var(--max-width);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.site-navigation .report_nav {
    justify-content: flex-start;
}


#hr-top hr {
    border: none;
    height: .3rem;
    background-color: var(--ablue);
    color: var(--ablue);
}

/* whichever final div of the header (login box / site nav) will not have a right margin */
header > div:not(:last-of-type) {
    margin-right: 2rem;
}


footer {
    padding-top: 1rem;
    padding-bottom: 1rem;
    line-height: 1.5rem;
    font-size: .8em;
    background-color: var(--ablue);
    color: var(--algrey);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer a {
    color: var(--algrey);
    text-decoration: none;
}

footer :is(a:hover, a:focus-visible) {
    color: white;
    text-decoration: underline;
    text-decoration-color: var(--ared);
}

footer img {
    width: 150px;
}


input,
select {
    box-sizing: border-box;
    accent-color: var(--ablue);
}

/* style checkbox and radiobuttons */
fieldset :is(input[type="checkbox"], input[type="radio"]) + label {
    margin-right: 1em;
}

main {
    padding-top: 0;
    padding-bottom: 1rem;
    display: block;
}

p,
dl,
li {
    max-width: 700px;
}

dt {
    font-weight: bold;
    margin: 0;
    padding: 0;
}

dd {
    margin: 0;
    padding: 0 0 1.5rem 0;
    line-height: 1.5rem;
}

/* for dd and li tags that aren't read like paragraphs */
.nonp {
    line-height: normal;
}

hgroup {
}

ul,
dl {
    margin: 0;
}

li {
    line-height: 1.6em;
    margin-bottom: .8em;
}

.subcontent {
    padding-left: 2rem;
    padding-right: 2rem;
}

section {
    margin-bottom: 2.5rem;
}



fieldset {
    border: 1px solid var(--ablue);
    border-radius: 5px;
}

legend {
    color: var(--ared);
}

article {
    margin-bottom: 1.5em;
}






/*
 * INPUTS
 */

select,
input:not([type="file"]) {
    border: 1px solid var(--adgrey);
    padding: 3px 3px 3px 6px;
}

:is(select, input):focus-visible {
    border-color: --var(ablue);
    box-shadow: 0 0 5px rgba(0,0,0,0.35);
    outline: none;
}

:disabled {
    background-color: var(--algrey);
}

/* inputs right next to each other (like quicksearch -> clear -> submit) */
/* though I want to ignore the tab buttons */
:is(.button, input, button:not([role="tab"])):not([style*="display: none"]):not([type="hidden"]) + :is(.button, input, button:not([role="tab"])):not([style*="display: none"]):not([type="hidden"]) {
    margin-left: 1em;
}

/* fix for mobile safari */

/* enabling this for select breaks chrome and firefox */
:is(input[type="submit"], input[type="button"], button) {
    -webkit-appearance: none;
}


/* buttons don't always inherit?  on chrome?  resulted in 17.x px sized tab buttons for Ed, instead of like 13px */
button {
    font-size: inherit;
}


:is(input[type="submit"], input[type="button"], button:not([id="close-button"]), .button) {
    background: var(--ablue);
    color: white;
    border: 1px solid var(--ablue);
    font-weight: bold;
    padding: .4em 1.8em;
    text-decoration: none;

    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),
        0px 2px 2px 0px rgba(0,0,0,0.14),
        0px 1px 5px 0px rgba(0,0,0,0.12);
    transition: box-shadow 280ms cubic-bezier(0.4,0,0.2,1);

}

:is(input[type="submit"], input[type="button"], button:not([id="close-button"]), .button).alt {
    background: white;
    border: 1px solid var(--ablue);
    color: var(--ablue);
}

:is(input[type="submit"].alt, input[type="button"].alt, button.alt, .button.alt):hover,
:is(input[type="submit"].alt, input[type="button"].alt, button.alt, .button.alt):focus-visible {
    color: white;
}

:is(.button, input[type="submit"], input[type="button"], button:not([id="close-button"])):hover,
:is(.button, input[type="submit"], input[type="button"], button:not([id="close-button"])):focus-visible,
button[aria-selected="true"] {
    color: white;
    background: var(--ared);
    border: 1px solid var(--ared);
    cursor: pointer;
    box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),
        0px 4px 5px 0px rgba(0,0,0,0.14),
        0px 1px 10px 0px rgba(0,0,0,0.12);
}

:is(input[type="submit"], input[type="button"], button, .button):disabled {
    background: var(--adgrey);
    border: 1px solid var(--adgrey);
}


:is(input[type="submit"], input[type="button"], button, .button):disabled:hover,
:is(input[type="submit"], input[type="button"], button, .button):disabled:focus-visible {
    background: #A5A5A5;
    border: 1px solid #A5A5A5;
    cursor: progress;
}

button {
    display: inline-block;
    vertical-align: middle;
}

button :is(img, svg) {
    display: inline-block;
    vertical-align: middle;
    margin-right: .5rem;
}

.button {
    display: inline-block;
}


/* this should highlight invalid form inputs that aren't blank or have placeholder text */
input:not([value=""]):not(:placeholder-shown):not(:focus-visible):invalid {
    border-color: var(--ared);
    color: var(--ared);
}



/*
 * this can be a bit tricky, because we use the same CSS for:
 *  . site navigation (header)
 *  . report navigation (in main, also #report_navigation)
 *  . export options (#export_nav)
 *  . list options (map/list, #view_options)
 */


.report_nav a {
    display: inline-block;
    text-decoration: none;
}

.report_nav {
    display: flex;
    justify-content: flex-end;
	flex-wrap: wrap;
    align-items: stretch;
}

.report_nav_item {
    text-align: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.7rem;
    position: relative;
}

.report_nav a:hover {
    text-decoration: none;
}


header .report_nav {
}

header .report_nav_item:hover img,
header .report_nav_item a:focus-visible img {
    filter: brightness(1.4);
}


main .report_nav_item img {
    filter: grayscale(100%) brightness(2);
}

main .report_nav {
    background-color: initial;
}

/* hover state / current report state (exclude disabled/nav_na links) */
#report_navigation :is(.rpt_curr, .report_nav_item:hover, .report_nav_item a:focus-visible):not(.nav_na) img {
    /* turn off the filter to allow the red in the file to show */
    filter: none;
}

.nav_na {
    cursor: not-allowed;
}

main .nav_na:hover img,
main .nav_na img {
    filter: grayscale(1) opacity(.2);
}

.nav-image,
.report_nav_item img {
    width: 36px;
    height: 36px;
}

.report_nav_text {
    width: 60px;
    text-align: center;
    text-transform: uppercase;
    font-family: "Barlow", Verdana, sans-serif;
    color: var(--ablue);
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: .1em;
}

/* override for popup to make it smaller */
#popupbody .nav-image,
#popupbody .report_nav_item img {
    width: 26px;
    height: 26px;
}

#popupbody .report_nav_text {
    width: 50px;
}

header .report_nav_text {
    line-height: 14px;
}

:is(#export_nav, #view_options) img {
	filter: none;
}

/* :is(#export_nav, #view_options) :is(.report_nav_item:hover, .rpt_curr) img { */
#export_nav .report_nav_item:hover img {
    filter: brightness(0) saturate(100%) invert(17%) sepia(44%) saturate(3638%) hue-rotate(189deg) brightness(95%) contrast(92%);
}


#view_options .report_nav_item {
    padding-bottom: 0.7rem;
}

#view_options :where(.report_nav_item:hover, .rpt_curr) {
    background-color: var(--ared);
    color: white;
}

#view_options div.rpt_curr {
    background-color: var(--ablue);
}

#view_options :is(.report_nav_item:hover, .rpt_curr) .report_nav_text {
    color: white;
}

#view_options :is(.report_nav_item:hover, .rpt_curr) img {
    filter: brightness(0) saturate(100%) invert(95%) sepia(97%) saturate(1%) hue-rotate(285deg) brightness(108%) contrast(101%);
    
}


/* quicksearch in the site navigation */

.report_nav_item_manual label {
    margin-top: 0.2rem;
    display: block;
    color: var(--ablue);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.8rem;
}

.report_nav_item_manual :is(img, input)
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.report_nav_item_manual .image-input {
    height: 2rem;
}


/* add to active list / remove from active list on reports */
.report-add-to-list {
    display: flex;
    height: 2em;
}


/* reportnotes and facility name / add to active list in report header */
.title-container > div {
    margin-bottom: 1em;
}

.fac-name-and-add-to {
    display: flex;
    align-items: flex-end;
    gap: 6em;
}

.report-add-to-list .report-add-to-list-text,
.report-add-to-list .report-add-to-list-text:hover,
.report-add-to-list .report-add-to-list-text:focus-visible {
    border-left: 2px solid var(--main-background);
    box-shadow: unset;
    transition: unset;
}

.report-add-to-list-text:hover,
.report-add-to-list-text:focus-visible
{
    background-color: var(--ared);
}



.flex-left {
    display: flex;
}

.flex-left > div + div {
    margin-left: 5em;
}

#title-and-nav {
    display: flex;
    justify-content: space-between;
    box-shadow: 0px .5rem .5rem .5rem var(--main-background);
    margin-bottom: 1rem;
}

.page-image-and-header {
    display: flex;
}
.page-image-and-header img {
    margin-right: 1rem;
}



/*
 * app controls
 */


#rpt_controls {
    margin-right: 0;
    margin-left: auto;
    width: 30em; /* max-width ??? */
    margin-top: 1em;
}

#rpt_controls .card {
    margin-right: 0;
    margin-bottom: 0;
}

#rpt_controls .card :is(form) {
    padding-left: 0;
    margin-left: 0;
}

#rpt_controls div + div {
    margin-top: 1em;
}

#rpt_controls label {
    margin-right: 1em;
}


/*
.opt-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0.5rem;
}

.opt-grid label {
    text-align: right;
    font-weight: bold;
}

.span-2 {
    grid-column-start: 1;
    grid-column-end: 3;
}
*/




.login-box form {
    width: 200px;
    background-color: var(--algrey);
    margin: .5rem 0;
    padding: .5rem 1rem;
}

.login-box label {
    display: block;
}

.login-box .image-input {
    height: 2rem;
    margin-bottom: 1rem;
}

.login-box img
{
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
}

.login-box input {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 12rem;
}

.login-box input[type="submit"] {
    width: auto;
    background-color: var(--ared);
    border: 1px solid var(--ared);
    margin-bottom: .5em;
}


.login-box input[type="submit"]:hover,
.login-box input[type="submit"]:focus-visible {
    background-color: var(--ablue);
    border: 1px solid var(--ablue);
    color: white;
}


.admin_links ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 10px;
}

.errors {
    border: 1px solid var(--aerrs);
    background-color: var(--aerrf);
    width: fit-content;
    padding: 1.8rem;
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.center-chunk {
    display: flex;
    justify-content: center;
}

/* set a max-width for the centered content */
.center-chunk > div {
    max-width: 750px;
}

.center-chunk p {
    text-align: justify;
    margin: 1em auto auto auto;
}



.flex-outsides {
    display: flex;
    justify-content: space-between;
}


/*
 * advanced search / filtered search
 */

/* this fixes the only checkbox, "Active Hospitals Only" */
/*
.main-search input[type="checkbox"] {
    width: auto;
}
*/



/* headings for sections in "All" tab */
.search-form-title {
    background-color: var(--algrey);
    border: 1px solid var(--adgrey);
    padding: .5em;
    margin-top: 2.5em;
}

.search-form-title:first-child{
    margin-top: unset;
}

/* put all labels and inputs on one line */

.search-flex-one-line {
    display: flex;
    align-items: baseline;
}

.search-flex-one-line :is(input, select) {
    width: unset;
    margin-bottom: unset;
    margin-top: unset;
}

/* space between label and its matching input */
.search-flex-one-line label {
    margin-right: .5em;
}

/* space between input and next label */
.search-flex-one-line input + label {
    margin-left: 2em;
}

.search-flex-single label {
    width: 15em;
    text-align: right;
}

/* match fieldset */
.search-flex-single {
    margin-bottom: 0.7em;
    margin-top: 0.2em;
}


/* two column for county state -> county search */
.search-flex-sides {
    display: flex;
    gap: 1em;
}

.search-flex-sides label {
    display: block;
    text-align: left;
}



.main-search-submit {
    padding: 3em 0 1em 0;
}


/* this makes the search / clear form buttons big */
.main-search-submit :is(input, select) {
    margin-bottom: 0.7em;
    margin-top: 0.2em;
    width: 100%;
}


#main-block {
    background-color: var(--main-background);
    max-width: var(--max-width);


    /* always take full height of screen (helpful for popups / short pages) */
    min-height: 100vh; /* older standard */
    min-height: 100dvh; /* dynamic, new standard, better for mobile */

    display: grid;
    /* <header> (<div id="hr-top"> OR <div class="index-outer">) <main> <footer> */
    grid-template-rows: auto auto 1fr auto;

}

.colorblock {
    color: white;
    background-color: var(--ablue);
    padding: 1.25rem 2.5rem;
    margin-bottom: 1rem;
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),
        0px 2px 2px 0px rgba(0,0,0,0.14),
        0px 1px 5px 0px rgba(0,0,0,0.12);
}

/* .colorblock :is(h2, a) { */
.colorblock h2,
.colorblock a {
    color: white;
}

.redblock {
    background-color: var(--ared);
}

.fit-content {
    width: fit-content;
}

.legal {
    font-size: 10px;
    line-height: 12px;
    padding-bottom: .5em;
}


#slogan {
    text-transform: uppercase;
    font-family: 'Barlow', Verdana, sans-serif;
    color: var(--ared);
    font-size: 1.5rem;
}

.slogan-container {
    max-width: 700px;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
}

#index-flex {
    display: flex;
	max-width: var(--max-width-index);
}

.index-content {
    display: grid;
    gap: 4rem;
    text-align: justify;
}

.grid-row-span-2 {
    grid-row: span 2;
}

.index-content > * {
    /* background-color: var(--algrey); */
}



.index-outer {
    display: table;
    height: 300px;
    width: 100%;
    position: relative;
    margin-bottom: 2.5rem;
}


/* try grid stacking for this? */
.index-middle {
    display: table-cell;
    vertical-align: middle;
    /* background: url('https://to.zgwd.com/https://www.ahd.com/images/ahd_background_home.jpg') no-repeat; */
    background: url('https://to.zgwd.com/https://www.ahd.com/images/hero-04.webp') no-repeat;
    background-size: cover;
    /*
    background-size: 100%;
    padding: 2rem;
    background-color: rgba(var(--apaleblue_rgba));
    */
}



.index-inner {
    margin-left: auto;
    margin-right: auto;
    background: rgba(0, 0, 0, 0.8);
    padding: 1rem 2.5rem;
}

.index-inner label {
    display: inline-block;
    background: rgba(0, 0, 0, 0.0);
    height: 25px;
    color: white;
}

.index-inner input {
    margin: 0 0 12px 0;
    font-size: 16px;
    width: 100%;
    background: rgba(0, 0, 0, 0.0);
    border: 1px solid #D6D6D6;
    color: white;
    height: 25px;
}

#as_ul_front_page-quicksearch a {
    color: white;
}

/* only on index -> new app section */
h4 + .app-icon-large {
    margin-top: 1em;
}






.card {
    border: 1px solid var(--ablue);
    margin: 0 2rem 2rem 0;
}

.card-red {
    border: 1px solid var(--ared);
}

.card-grey {
    border: 1px solid var(--adgrey);
}


/* .card > :is(h5, h3) { */
.card > h5,
.card > h3 {
    background-color: var(--ablue);
    color: white;
    text-transform: uppercase;
    padding: .5em 0 .5em 1rem;
    width: 80%;
    margin-top: 1rem;
}

.card h3 a {
    text-decoration: none;
    color: white;
}

.card > * {
    padding: 0 1rem .5rem 1rem;
}


.card p {
    padding-bottom: 1.5em;
}

.card h4 {
    padding-bottom: 0;
    margin-bottom: 0;
}


/* .card-red :is(h5, h3) { */
.card-red h5,
.card-red h3 {
    background-color: var(--ared);
}


/* .card-grey :is(h5, h3) { */
.card-grey h5,
.card-grey h3 {
    background-color: var(--avdgrey);
}

.alert,
.alert a
{
    color: var(--ared);
    font-weight: 800;
}


.app-icon-large {
    width: 60px;
    height: 60px;
}

.app-icon-med {
    width: 45px;
    height: 45px;
}

.app-icon-small {
    width: 15px;
    height: 15px;
}

.info_page_image {
    float: right;
    margin: 15px;
}


.form-aligned {
    box-sizing: border-box;
    /* why did I have a width specified? */
    /* width: 700px; */
}

.form-aligned div {
    margin-bottom: 10px;
}

.form-aligned label {
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    width: 10em;
    margin: 0 1em 0 0;
}

.form-aligned fieldset {
    display: inline-block;
}


/* when checkbox/radio on left with label on right */
.form-aligned input + label {
    width: auto;
    /* padding-left: .25rem; */
}

.form-aligned label + label {
    width: auto;
}

.form-aligned .label-inline {
    width: min-content;
    margin-left: 1rem;
}

.form-aligned .label-long {
    width: max-content;
    text-align: left;
}

/* these are for labels that immediately follow a checkbox */
.form-aligned input[type="checkbox"] + label {
    text-align: left;
    /* width: 30em; */
    width: auto;
}

.form-aligned :is(p, input, select) {
    display: inline-block;
    box-sizing: border-box;
}

/* when items will line wrap but I want them to   */
.form-aligned-group {
    margin-left: 11em; 
}

.order-form-future-expiration {
    padding-left: 2em;
    font-size: 90%;
}

.report h3 {
    margin: 0;
    padding: 0;
    font-size: 18px;
}



th[scope="row"] {
    text-align: left !important;
    font-weight: normal;
}


/* msdrg codes, cpt, icd, apc/hcpcs */
.code {
	font-family: monospace;
}

td.text {
    text-align: left !important;
}

td.center {
    text-align: center;
}

th.right {
    text-align: right !important;
}

/* alternate background color of table rows for readability */
/* we still need this for columnar stripes */
.striped tr:nth-child(even),
/* .column-striped :is(td, th):nth-child(even) { */
.column-striped td:nth-child(even),
.column-striped th:nth-child(even),
.b :is(th, td) {
    background-color: var(--algrey);
}

/* several reports have tables with five years of data, and a descriptor as the first column */
/* this will assign their widths the same */

.hcahpslo {
    background-color: #F8F8F8;
}

.hcahpsmed {
    background-color: #DDDDDD;
}

.hcahpshi {
    background-color: #B2B2B2;
}



.bold {
    font-weight: bold !important;
}


.report_table {
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid var(--adgrey);
    margin-bottom: 20px;
    background-color: white;
}

/* .report_table :is(th, td) { */
.report_table th,
.report_table td {
    padding: 5px;
    border: 1px solid var(--adgrey);
    text-align: right;
}

/* .proportional is a class which is to not apply the monospace font */
.report_table td:not(.proportional) {
	font-family: monospace;
}


/* .report_table :is(tfoot, thead) :is(th, td) { */
.report_table tfoot th,
.report_table tfoot td,
.report_table thead th,
.report_table thead td {
    font-size: 8pt;
    font-weight: bold;
    text-align: left;
    background-color: var(--algrey);
}

.report_table tfoot td {
    text-align: right;
}


.report_table .na {
    background-color: var(--adgrey);
}

/* when viewing a list, this row will be the hospital you're viewing */
.hosp_current :is(th, td) {
    background-color: rgba(var(--apaleblue_rgba));
}


.center,
.report_table th[colspan] {
    text-align: center !important;
}


.noborder,
.report .noborder,
/* .report .noborder :is(td, th) { */
.report .noborder td,
.report .noborder th {
    border-top-style: hidden !important;
    border-left-style: hidden !important;
    background-color: initial;
}

/* table.noborder :is(td, th) { */
table.noborder td,
table.noborder th {
	border-style: hidden;
}

.nobackground {
    background-color: initial !important;
}

.nobordertop {
    border-top: 0px !important;
}

.noborderleft {
    border-left: 0px !important;
}

.subreportlink {
    text-align: center !important;
}

.subreportlink a {
    border: 1px solid var(--ablue);
    background-color: var(--ablue);
    text-decoration: none;
    padding: .5em 2em;
    display: inline-block;
    color: white;
}

.subreportlink :is(a:focus-visible, a:hover) {
    color: white;
    background-color: var(--ared);
    border: 1px solid var(--ared);
    text-decoration: none;
}


/* report subnavigation - links to named anchors */
.reportsubnav {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 0 1.5em 0;
}

.reportsubnav li {
    list-style: none;
    margin: 0;
    padding: 0 .5em;
    display: inline;
    border-right: 1px solid var(--adgrey);
}

.reportsubnav li:first-child {
    padding-left: 0;
}

.reportsubnav li:last-child {
    border: none;
}



/* breadcrumbs navigation */

.bc_nav {
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: .5rem 0 1.5rem 0;
}

.bc_nav li {
    font-size: 10px;
    padding: 5px 0 5px 50px;
    background: #0A4B7E;
    position: relative;
    display: block;
    float: left;
    margin-bottom: 0;
    color: white;
}

.bc_nav a {
    color: #FFF;
    text-decoration: none;
}

.bc_nav li::after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid #0A4B7E;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 100%;
    z-index: 2;
    line-height: 1em;
    margin-bottom: 0;
}

.bc_nav li::before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid white;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
    line-height: 1em;
    margin-bottom: 0;
}

.bc_nav li:first-child {
  padding-left: 20px;
}

.bc_nav :is(.selected, li:focus-visible, li:hover)  {
    background: var(--ared);
    color: #FFF;
}

.bc_nav :is(.selected, li:focus-visible, li:hover):after {
    border-left-color: var(--ared) !important;
    line-height: 1em;
    margin-bottom: 0;
}

.bc_nav :is(.na, .na:focus-visible, .na:hover) {
	background-color: #959393;
    color: #CCC;
}

.bc_nav :is(.na, .na:focus-visible, .na:hover):after {
    border-left-color: #959393 !important;
    line-height: 1em;
    margin-bottom: 0;
}



.definitions,
.reportnotes,
.reportnotes li {
    font-size: .9rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.reportnotes select {
}

/* max width for report notes inside the title-and-nav,
prevents it from taking up too much space and causing navigation to wrap
for long things like "Apps with FY24 Preliminary data will be updated based on the "final rule" FY24 MedPAR file when it becomes available." */
#title-and-nav .reportnotes {
    max-width: 40rem;
}



/* for search results page */

.list_button {
    margin: 0;
    padding: 0;
}

.list_button li {
    display: inline;
	font-size: 10px;
}

.list_button .na {
    padding: .6em 2em;
	color: #CCCCCC;
	background-color: var(--adgrey);
    border-right: 1px solid var(--algrey);
}

.list_button a
{
    padding: .6em 2em;
	color: var(--algrey);
	background-color: var(--ablue);
	text-decoration:none;
    border-right: 1px solid var(--algrey);
}

.list_button :is(.selected, .selected a, a:hover) {
	color:#FFFFFF;
    background-color: var(--ared);
}

.list_button > :last-of-type {
    border-right: none;
}



#popupbody {
    background-color: white;

    /* always take full height of screen (helpful for popups / short pages) */
    min-height: 100vh; /* older standard */
    min-height: 100dvh; /* dynamic, new standard, better for mobile */
    display: grid;
    /* <header> <div id="wrapper_popup"> <footer> */
    grid-template-rows: auto 1fr auto;
}

/* just on popup pages, put some space after titles */
#popupbody #title-and-nav {
    margin-bottom: 1em;
}

#wrapper_popup {
    margin: 0 10px;
}


#popupoptions {
    display: flex;
    justify-content: flex-end;
    font-size: 10px;
}

#switcher_96_2010 {
    width: max-content;
    margin-bottom: 1.5rem;
}


div.autosuggest
{
    position: absolute;
    margin: 21px 0 0 0;
    z-index: 2000;
    overflow-y: auto;
    overflow-x: hidden;
    width: 500px;
    height: 350px;
    background-color: #FFF;
    border: 1px solid #959393;
    *padding-right: 12px;
    *overflow-y: scroll;

    box-shadow: 0 0 20px 3px rgba(0,0,0,0.25);
}

div.autosuggest a {
}

div.autosuggest ul {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #666666;
}

div.autosuggest ul li {
    padding: 0;
    margin: 0;
    text-align: left;
}

div.autosuggest ul li a {
    display: block;
    text-decoration: none;
    background-color: transparent;
    position: relative;
    padding: 0;
    width: 100%;
}

div.autosuggest ul li span {
    display: block;
    padding: 3px 6px;
}

div.autosuggest ul li.as_highlight a {
    color: #FFF;
    background-color: var(--ared);
}



/* sitemap */

#sitemap li {
    background-image: url(https://to.zgwd.com/https://www.ahd.com/images/svg/RedCircleHome.svg);
    background-repeat: no-repeat;
    background-size: 15px 15px;

    list-style: none;
    vertical-align: top;
    margin:0px;
    padding:0px 0px 10px 25px;
}

#sitemap li ul li {
    background-image: none;
    list-style-type: none;
    list-style-image: none;
    padding: 0px;
    margin: 3px 0px;
}



.info-callout {
    display: flex;
    justify-content: end;
}

.info-callout .info-text-container {
    float: right;
    width: 300px;
    padding-left: .5em;
    text-align: left;
}

.info-callout .info-text-container .info-text {
    font-weight: bold;
    display: table-cell;
    text-align: left;
    vertical-align: top;
}

/* when there are two in a row, we want some space between */
.info-callout + .info-callout {
    margin-top: 2em;
}



/*
 * profile report specific stuff
 */

.inside-align td:first-child {
    text-align: right;
    vertical-align: top;
    width: 250px;
}

.inside-align td:last-child {
    text-align: left;
    width: 230px;
    padding-bottom: .5em;
    padding-left: .5em;
}

#clinicalservices {
    display: flex;
}

#clinicalservices div:first-child {
    padding-right: 3em;
}

#clinicalservices dt {
    padding-top: 1em;
}

#clinicalservices dd {
    padding-bottom: 0;
    padding-left: 1em;
}


.profile-map-container {
    display: flex;
    flex-wrap: wrap;
}

#profilemap {
    width: 300px;
    height: 300px;
    border: 1px solid var(--adgrey);
}


#facility-name {
    margin: 0;
}


/*
 * financial indicators
 */

/* used for negative numbers */
.loss {
    color: var(--ared);
}

/*
 * financial indicator styles
 */


.fi_spacer {
    height: 20px;
}

.fi_def {
    text-align: left !important;
    background-color: #CCC;
    font-size: x-small !important;
}

.fi_name,
.fi {
    font-weight: bold;
}

.fi_name {
    text-align: left !important;
    width: 320px;
}


/*
 * informational pages with content on 2/3s and sidebar 1/3rd
 */

#content-and-sidebar-wrapper {
    display: flex;
    flex-direction: row;
    margin-bottom: 1rem;
}

#content-with-sidebar {
    width: calc(100% / 3 * 2);
    padding-right: 15px;
    border-right: solid 1px #0A4B7E;
}

#sidebar {
    width: calc(100% / 3 * 1);
    padding-left: 15px;
    max-width: 400px;
}


/*
 * used on apps.html
 */

.cart-total {
    font-weight: bold;
}

/* div that contains shopping cart should sticky while scrolling down the long list of apps */
.my-order {
    position: sticky;
    top: 0;
}

.app-card {
    display: flex;
    border: 1px solid var(--adgrey);
    padding: 1.5rem 2rem;
    margin-bottom: 3rem;
    max-width: 500px;
}

.app-card:hover {
    border: 1px solid var(--ablue);
}

.app-card img {
    margin-right: 1.5rem;
}


.disclaimer {
    text-align: justify;
}

/* the container that holds the accept button */
.disclaimer-accept {
    width: 700px;
    text-align: center;
    margin-top: 1.5rem;
}


/* gdpr message on free site */

.disclaimer_message {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 25px;
    width: 100%;
    background: var(--ared);
    color: white;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    line-height: 25px;
    z-index: 2000;
}

.disclaimer_message a {
    color: white;
    text-decoration: underline;
    text-decoration-style: dashed;
}


/*
 * myaccount
 */

#notices {
    margin:0px;
    padding:0px;
}

#notices li {
    list-style-type: none;
    margin: 0 0 1em 0;
    border-left: 1em solid var(--adgrey);
    background-color: var(--algrey);
    padding: 1em 1em 1em 2em;
}

#notices li.important {
    border-color: var(--ablue);
    font-weight: bold;
    background-color: rgba(0, 63, 119, 0.1);
}


#notices li.warning {
    border-color: var(--ared);
    font-weight: bold;
    background-color: rgba(175, 30, 45, 0.1);
}

/* don't show the large color border if this is a nested li */

#notices li li {
    border-left: none;
    list-style-type: disc;
    padding: 0;
}


.newscategory {
    font-style: italic;
}

.newsdismiss {
	display: block;
	float: right;
    padding: 0 1em 1em 1em;
}

.newsdismiss img {
	width: 20px;
}

.newsdismiss:hover img {
    filter: brightness(1.4);
}

/*
 * search results
 */

.list-cms-map {
    width: 758px;
    height: 600px;
    border: 1px solid var(--adgrey);
}


/* used for checkboxes that add provids to active list */

.addto-col {
    position: relative;
}

.addto_msg-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: .7;
    background-color: black;
}

.addto_msg-content {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    text-transform: uppercase;
    font-style: italic;
}


/* google map legend */

.legend-container {
    position: absolute;
    top: 95px;
    right: 5px;
    z-index: 900;
    background: white;
    border: 1px solid black;
}

.legend-body {
    padding: 5px 7px;
}

.legend-item {
    padding: 0px 0px 0px 0px; 
    margin:0px; 
    font-size:9px;
}

.legend-heading {
    padding: 3px;
    font-size:11px;
    font-weight: bold;
    color: #FFF;
    background-color: var(--ablue);
    text-align: center;
}

.legend-button {
    position: absolute;
    top: 60px;
    right: 5px;
    z-index: 900;
}

/*
 * provider analysis app
 * (this hides the disabled auto filter inputs
 */

.tablesorter thead .disabled {
	display: none;
}


/*
 * tablesorter headers add an "up/down" .gif to the right,
 * which frequently gets in the way of the text.
 # this will create some space for it.
 */

table.tablesorter thead tr .header {
    padding-right: 2em;
}


/*
 * system compare app
 */

#system-compare-app table {
    width: 100%;
    max-width: 800px;
}

#system-compare-app :is(td, th) {
    width: 25%;
}

#system-compare-app :is(td, th):first-child {
    width: 50%;
}


#system-compare-finder {
	display: flex;
	width: 60%;
	gap: 5em;
	margin: auto;
	text-align: center;
	font-weight: bold;
}


/*
 * market analysis app
 */

.app-ma-map-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2em;
}

.app-ma-map {
    height: 400px;
    border:1px solid var(--adgrey);
}

.app-ma-details {
    height: 400px;
    overflow-y: scroll;
    border:1px solid var(--adgrey);
    padding: 1em 2em;
}

/* for the tab view when looking at ZIP code
 * "Hospital Market Share" / "Demographic Info" (ajax/get_zipcode_hosp)
 */

.app-ma-details [role="tabpanel"] {
    margin-right: 3em; /* it can be 100% width and look weird.  this gives it some space. */
}

.app-ma-display-options {
    display: flex;
}

.app-ma-options {
    display: flex;
}

.app-ma-input-options {
    display: none; /* this is hidden initially */
}

.app-ma-med-serv {
    overflow-x: scroll;
    max-width: calc(var(--max-width) - 100px);
}

/* little square of color
 * displayed in "Hospital Information" and "Medical Services" sections
 * to show what color is used for which hospital
 */
.app-ma-color-block {
    float: left;
    padding-right: .5em;
}



/*
 * profile compare app
 */

.report tbody .sub_header td {
    font-weight: 800;
    font-size: 13px;
    border-bottom: 2px solid black;
    text-align: left;
}



/*
 * ASC app
 */

.app-asc-map {
    width: 758px;
    height: 600px;
    border:1px solid var(--adgrey);
}


/*
 * TIC app
 */

#tic_comp_filters {
    width: max-content;
}

.sticky_table {
    position: relative;
}

.sticky_table th {
    position: sticky;
    top: 0;
}

/*
 * app dashboard
 */

.app-dashboard {
	display: flex;
	flex-wrap: wrap;
}

.app-block {
	width: 15em;
	margin-bottom: 2em;
	margin-right: 1em;
	border: 1px solid var(--algrey);
    padding: 0 1rem .5rem 1rem;
}

.app-block:hover {
    border: 1px solid var(--ablue);
    box-shadow: 3px 3px 4px 3px rgba(0,0,0,0.33);
}

.app-block-link {
	display: flex;
	padding: 1em .5em;
}

.app-block-link img {
    padding-right: 1em;
}

.app-block-link:hover img {
    /* filter: drop-shadow(5px 5px 5px var(--adgrey)); */
}

.app-title {
	font-weight: bold;
}

/* links: buy | sample | details */
.app-block-actions {
    display: flex;
    gap: 1em;
}


/*
 * subscriptiondetails
 */

.report-info-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin-bottom: 4em;
}

.report-info-container:last-of-type {
    margin-bottom: 0;
}

.info_page_image,
.img-dropshadow,
.report-info-container img {
    box-shadow: 3px 3px 4px 3px rgba(0,0,0,0.33);
}

.sd-app-price {
    font-style: italic;    
}

/* div that contins "More Details" and "Sample Report" links */
.callout-links {
    display: flex;
    gap: 1em;
}

.callout-links > a {
    flex: 1 1 0; /* make the two anchors equal widths */
}



/*
 * freesite_limit
 */

.fl-boxes {
    display: flex;
    justify-content: space-between;
}

.fl-boxes > * {
    text-align: center;
    padding: 0 2em;
    border-right: 1px solid var(--ablue);
    flex: 1;
}

.fl-boxes > :last-child {
    border-right: none;
}

.fl-form-container {
    width: 500px;
    margin: auto;
    /* background-color: hsl(210, 100%, 90%); */
    background-color: rgba(var(--apaleblue_rgba));
    padding: 2em 3em;
}


/*
 * modal stuff
 */

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*
    width: 900px;
    height: 700px;
    */
    width: 80vw;
    height: 70vh;
    z-index: 1010;

    background-color: var(--main-background);
    box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
    display: none;
}

#modal-inside {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.modal.active,
.modal-overlay.active {
    display: block;
}

.modal-guts {
    padding: 20px;
}

.modal-overlay {
    display: none;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.close-button {
    position: absolute;
    top: -20px;
    right: 20px;
    z-index: 10;
    border: 0;
    background: transparent;
}

.close-button svg {
    height: 35px;
    width: 35px;
}

.close-button:hover svg {
    cursor: pointer;
    fill: var(--ared);
}


/* floating back to top link */

#back-to-top {
    position: fixed;
    right: 10px;
    bottom: 104px;
    width: max-content;
    background-color: var(--ablue);
    display: none;
	color: white;

	z-index: 100;

    font-weight: bold;
    padding: .4em 1.8em;
    text-decoration: none;

    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),
        0px 2px 2px 0px rgba(0,0,0,0.14),
        0px 1px 5px 0px rgba(0,0,0,0.12);
    transition: box-shadow 280ms cubic-bezier(0.4,0,0.2,1);

}

#back-to-top:hover {
    background-color: var(--ared);
}



/* solid color block shown on sample reports with link to sample and more information */

.sample-container {
    margin: 1em 0;
    padding: 0 20em;
}

.sample-callout {
    background: var(--ablue);
    color: white;
    text-align: center;
    padding: 1.4em;
    font-weight: bold;
    font-size: 1.25em;
}

.sample-callout a {
    color: white;
}

/* used on /info/ app pages */
img.appinfo {
    float: left;
    padding: 1em;
}


/*
 * administrative menus
 */


#panels {
    clear: right;
    float: right; 
    width: 200px;
	z-index: 50;
    position: relative;
}

#panels ul {
    list-style: none;
    background-color: var(--algrey);
    border: 1px solid var(--ablue);
    padding: 0;
    margin: 0 0 1.5em 0;
    border-radius: 5px;
}

#panels li {
    padding-left: 1em;
    padding-right: 1em;
}


#panels a {
    text-decoration: none;
}

li.title {
    background-color: var(--ablue);
    padding: .5em 1em;
}

li.title h4 {
    color: white;
}


/*
 * ajax validation
 */

.ajax-validity-success {
}

.ajax-validity-fail {
    color: var(--ared);
}

.ajax-validate-img {
    height: 20px;
    width: 20px;
    vertical-align: bottom;
}



/*
 * tabs
 */

.tabs {
}

[role="tablist"] {
	margin-bottom: -1px;
    width: max-content; /* this prevents it from wrapping to a new line */
}

[role="tab"] {
	position: relative;
	z-index: 1;
    background-color: var(--main-background);
	border-radius: 5px 5px 0 0;
	border: 1px solid var(--adgrey);
	border-bottom-color: var(--adgrey);
   	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom: 0;
	padding: 0.2em;
}

[role="tabpanel"] {
	position: relative;
	padding: 1em;
	border: 1px solid var(--adgrey);
	border-radius: 0 0 5px 5px;
    background-color: var(--main-background);
	z-index: 2;
}



/*
 * admin activity log
 */

.al-payment td {
	background: #DEFBAD;
}

.al-note td {
	font-weight: bold;
	background: #FDF7E1;
}



/*
 * page loading animation
 */

.spinner-container {
    text-align: center;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.spinner-container-small {
    text-align: center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.spinner {
    margin: 20%;
    display: inline-block;
}

/*
 * desktop
 */

@media (min-width: 1025px) {
    .hide-on-desktop {
        display: none !important;
    }

    /* I want an indent on the left + right that matches */
    header,
    main,
    footer,
    #hr-top
    {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    /* for wide displays, this will center align the whole site, and have a grey background */
    body {
        display: flex;
        justify-content: center;
        background-color: var(--adgrey);
    }

    /* left div that has identification & characteristics */
    .profile-map-container > :nth-child(1) {
        width: 450px;
    }

    /* right div that has map and site notes */
    .profile-map-container > :nth-child(2) {
        margin-left: 25px;
        width: 300px;
    }

    .report_large {
        min-width: 700px;
        max-width: 1200px;
    }

    .report_med {
        width: 670px;
    }

    .report_small {
        width: 450px;
    }


    /* .five-year :is(th, td) { */
    .five-year th,
    .five-year td {
        width: 15%;
        min-width: 12em;
    }

    .five-year th:first-child {
        width: 25%;
    }

    /* many quality tables for measures have one description column and five smaller columns */

    .hqi-measure thead th {
        width: 10%;
    }

    .hqi-measure thead th:first-child {
        width: 45%;
    }

    .hqi-measure thead th:last-child {
        width: 5%;
    }

    /* padding on index only for desktop */
    #index-main {
        padding: 0 4rem;
    }

}



/*
 * tablet only
 */

@media (min-width: 768px) and (max-width: 1024px) {
    .hide-on-tablet {
        display: none !important;
    }
}


/*
 * tablet and desktop
 */

@media (min-width: 768px) {

    /*
     * add this class on reports to make report navigation sticky (#title-and-nav)
     * also used on main-search-submit on search page
     */
    .sticky {
        background-color: var(--main-background);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .index-content {
        grid-template-columns: repeat(3, 1fr);
    }

    .index-content > * {
	/*
        max-width: 450px;
        text-align: justify;
	*/
    }


    /* removes padding for 2nd-column of services on profile report */
    #clinicalservices dt:first-child {
        padding: 0;
    }

    .tabs-subscription-details {
        /* specify a width, so the diffferent tabs don't adjust the width of the whole page */
        width: 750px;
    }

    .tabs-search {
        /* specify a width, so the diffferent tabs don't adjust the width of the whole page */
        width: 750px;
    }

    .center-chunk p {
        width: 500px;
    }

    .width-40 {
        width: 40%;
    }

    .width-20 {
        width: 20%;
    }

    .index-inner {
        width: 500px;
    }
}




/*
 * both tablet and mobile
 */

@media (max-width: 1024px) {

    /* I want an indent on the left + right that matches */
    header,
    main,
    footer,
    #hr-top
    {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    header > div:not(:last-of-type) {
        margin-right: 0;
    }


    .sample-container {
        padding: 0;
    }

    .report,
    .scroll {
        overflow: auto;
    }

    .hide-on-mobile {
        display: none !important;
    }

    header {
        flex-wrap: wrap;
    }

    header .report_nav {
        margin: 1rem 0;
    }


    .profile-map-container > :nth-child(2) {
        margin-left: 0;
    }

    #content-and-sidebar-wrapper {
        flex-direction: column;
    }

    #content-with-sidebar {
        width: 100%;
        border-right: 0;
        padding-right: 0;
        border-bottom: solid 1px #0A4B7E;
        margin-bottom: 2rem;
    }

    #sidebar {
        width: 100%;
        padding: 0;
    }


}



@media (max-width: 900px) {
    header {
        flex-direction: column;
    }
}



/*
 * mobile
 */

@media (max-width: 767px) {

    #index-flex {
        flex-direction: column;
    }

    .card {
        margin-right: 0;
    }

    #clinicalservices div:first-child {
        padding-right: 0;
    }

	#rpt_controls {
		margin: 2em auto 0 auto;
	}

	#title-and-nav,
    #clinicalservices,
    .report_nav {
        flex-wrap: wrap;
    }

    .report_nav_item {
        padding: 1em 2em;
    }

    .modal {
        width: 100%;
        height: 100%;
    }

    .close-button {
        top: 10px;
    }

    .app-ma-map-details {
        grid-template-columns: 1fr;
        width: 600px;
    }

    /* don't match when proceded by a checkbox */
    /*.form-aligned :not(input[type="checkbox"]) + label { */
    .form-aligned label {
        display: block;
        width: auto;
        margin: 0;
        text-align: left;
    }

    .form-aligned :is(select, input) {
        margin: .25em 0 1.5em 0;
    }

    /* stack label and input on top of each other */
    .search-flex-one-line {
        flex-direction: column;
    }

    .search-flex-single {
        margin-bottom: 1.5em;
    }

    .search-flex-single label {
        text-align: left;
        margin-bottom: 0.5em;
    }


    /* space between input and next label */
    .search-flex-one-line input + label {
        margin-left: 5em;
    }

    /* make text more legible */
    body,
    footer,
    .colortable,
    .report_nav_text,
    .definitions,
    .reportnotes,
    .reportnotes li,
    .report_table :is(th, td)
    .report td,
    .legal
    {
        font-size: 14px !important;
    }

    /* any anchors in tables need to have more padding for "appropriately sized tap targets" */
    /* fix overlapping on free state & national stats */
    /* 
     * I'm using :is() seemingly unnecessarily, but intentionally because
     * wkhtmltopdf doesn't understand it, but it is applying the mobile styles
     * including this rule which looks bad.
     * so I'm using :is() just to prevent PDF exports from having unnecessary extra spacing.
     */
    .report_table :is(a) {
        display: inline-block;
        padding-top: 2em;
        padding-bottom: 2em;
    }

    .reportsubnav li {
        display: inline-block;
        padding-top: 2em;
        padding-bottom: 2em;
        padding-right: 2em;
    }

    .tablesorter-bootstrap {
        width: unset !important;
    }
}


@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
}