.com-content-article ol, .com-content-article ul { /* Change this immediately if it causes issues */
  overflow: initial;
}

html, body {
  font-family: 'Source Sans 3', sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
  color: var(--gray-color);
  /*background-color: var(--gray-color) !important;
  height: 100%;
  margin: 0;*/
  /*background: linear-gradient(to bottom, #ffffff 0%, ffffff 50%, var(--gray-color) 100%);*/
  overscroll-behavior-y: none;
}

:root, .utah-design-system {
/*--primary-color: rgba(222, 76, 44); /* "Warm Red"; HEX value is #DE4C2C */
/* --primary-color-dark: #6d2e2e;
  --primary-color-light: #fcd3bc;
  --gray-on-primary-color: #f4f5f0; /* Not determined yet */
  
/*  --secondary-color: #4c5867; /* "Mid-Blue"; to be used with page banners? */
/*  --secondary-color-dark: #29313a; /* "Dark Blue" */
/*  --secondary-color-light: #d9e0ec; /* "Blue" (Maybe "Light Blue" instead?) */
/*  --gray-on-secondary-color: #F0F0F0; /* Provided by Google Gemini as a suitable gray color against #4F5A6B */
  
/* --accent-color: #b5ada1; /* Not sure what to do here; the Design System recommends it be used for buttons and links */
/*  --accent-color-dark: #483829; /* Not determined yet */
/*  --accent-color-light: #f2e7d7; /* Not determined yet */
/*  --gray-on-accent-color: #f4f5f0; /* Not determined yet */

--primary-color: rgba(7, 29, 73); /* navy; HEX value is #071d49 */ 
--primary-color-dark: #071d49; /*  the navy is pretty dark already? I’d need to check how this is used */
--primary-color-light: #dee9ff; /* alpine blue */ 
--gray-on-primary-color: #f4f5f0; /* Not determined yet */

--secondary-color: #467ec8; /* azure blue */
--secondary-color-dark: #071d49; /* updated from 164a8e to 071d49 at J Ericson request -- cobalt blue - buttons and links*/
--secondary-color-light: #dee9ff; /* alpine blue – can be used for callout box backgrounds with ‘primary-color’ text */ 
--gray-on-secondary-color:#f4f5f0; /* Not determined yet */

--accent-color: #e2521f; /* hunter orange – should be used only for decorative elements like lines, shapes, extremely large text, etc. */
--accent-color-dark: #842f1e; /*red clay – can be used for text (like callout boxes with ‘accent-color-light’ backgrounds), as well as decorative elements like backgrounds, lines, shapes, etc. */
--accent-color-light: #ffe1d6; /*sunrise – can be used for callout box backgrounds or text on backgrounds that use ‘accent-color-dark’*/
--gray-on-accent-color: #f4f5f0; /* Not determined yet */

  
  --header-primary-color: var(--primary-color);
  --link-color: var(--primary-color);
  --link-color-dark: var(--primary-color-dark); /* For mouse down on links, I think */
  
  --gray-color: #474747; /* This color is determined by the Design System */
  --gray-medium-color: #616161; /* Not determined yet--this is the Design System's choice; DNR's website uses #3e3e3e */
  --gray-medium-light-color: #d7d7d7; /* Also determined by the Design System */
  --gray-light-color: #f1f1f1; /* Design System color, but maybe we could use "Light Gray" instead? */
  --gray-dark-color: #333333; /* Design System color (DNR's website uses #3e3e3e), but maybe we could use "Dark Gray" instead? */
  --gray-3-1-contrast: #949494; /* Look this up sometime... */
  
  --hover-gray-color: rgba(0, 0, 0, 0.07); /* Not determined yet--this is the Design System's choice; this may not work against all backgrounds, including in tables */
  --hover-over-gray-color: rgba(0, 0, 0, 0.14); /* In the case of the sidebars, when an item is already highlighted, this is when you hover over it */
  --hover-gray-color-opaque: rgba(233, 233, 233); /* Not determined yet--this is the Design System's choice; this may not work against all backgrounds, including in tables */
  
  --drop-shadow-color: rgba(0, 0, 0, 0.3); /* Not defined by us yet, but here's the Design System's specification. */
  --drop-shadow-color-top: rgba(0, 0, 0, 0.15); /* What is this, even? */

  --danger-color: #ba0000; /* These colors are all defined by the Design System */
  --warning-color: #ba6300;
  --info-color: var(--secondary-color);
  --success-color: #2f8700;

  --badge-color: var(--danger-color) !important; /* The Cassiopeia template overrides this value for some reason. */

  --form-ele-disabled-color: #949494; /* Also not defined in this theme yet. */
  
  --font-size-4xs: .6825rem; /* 11px */
  --font-size-3xs: .75rem; /* 12px */
  --font-size-2xs: .8125rem; /* 13px */
  --font-size-xs: .875rem; /* 14px */
  --font-size-s: .9375rem; /* 15px */
  --font-size: 1rem; /* 16px, base font size */
  --font-size-m: 1.125rem; /* 18px */
  --font-size-l: 1.25rem; /* 20px */
  --font-size-xl: 1.5rem; /* 24px */
  --font-size-2xl: 1.75rem; /* 28px */
  --font-size-3xl: 2rem; /* 32px */
  --font-size-4xl: 2.5rem; /* 40px */
  --font-size-5xl: 3rem; /* 48px */
  --font-size-6xl: 3.5rem; /* 56px */
  --font-size-7xl: 4.5rem; /* 72px */

  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400; /* Base font weight */
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  --spacing-3xs: 2px;
  --spacing-2xs: 4px;
  --spacing-xs:  8px;
  --spacing-s:   12px;
  --spacing:     16px;
  --spacing-l:   24px;
  --spacing-xl:  32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --spacing-5xl: 80px;
  --spacing-6xl: 96px;
  
  --form-ele-small: 1.875rem;
  --form-ele-medium: 2.25rem;
  
  --timing-xquick: 100ms;
  --timing-quick: 200ms;
  --timing-medium-quick: 300ms; /* Doesn't appear to be part of the Design System's variables, but I need this one. */
  --timing-medium: 400ms;
  --timing-slow: 600ms;
  
  --radius-small1x: 3px;
  --radius-small: 6px;
  --radius-medium: 9px;
  --radius-large: 12px;
  --radius-circle: 999px;

  /* Content layout sizes */
  --content-width-narrow: 808px;
  --content-width-medium: 1016px;
  --content-width: 1224px;
  --content-width-wide: 1432px;
  --documentation-width: 700px;
  --documentation-left-width: 200px;
  --documentation-right-width: 200px;
  --documentation-padding: var(--spacing-2xl) var(--spacing-xl);
  --documentation-padding-small: var(--spacing-xl) var(--spacing);
  
  --elevation-small: 0 3px 6px var(--drop-shadow-color);
  --elevation-small-borderless: 0 3px 6px var(--drop-shadow-color), 0 -3px 3px var(--drop-shadow-color-top);
}

h1, h2, h3, h4, h5, h6 {
  /*font-family: 'Lora', serif;*/
  font-family: 'Source Sans 3', sans-serif; /* It's necessary to restate this because the Cassiopeia template sets the headings font to something else. (You could also set the property to "inherit," if you don't want to change it from the body text font.) */
  font-weight: var(--font-weight-bold);
  /*color: var(--gray-color);*/
  line-height: 1.4;
  margin: 0;
}

h1 {
  font-size: var(--font-size-4xl);
  /*font-size: xx-large;
  font-size: var(--font-size-5xl) !important;
  font-weight: var(--font-weight-semi-bold);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);*/
}

.subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

h2 {
  /*font-size: x-large;*/
  font-size: var(--font-size-3xl);
}

h3 {
  /*font-size: large;*/
  font-size: var(--font-size-2xl);
  /*font-weight: var(--font-weight-semi-bold);*/
}

h4 {
  font-size: var(--font-size-l);
  /*font-weight: var(--font-weight-semi-bold);*/
}

h5 {
  font-size: var(--font-size-m);
  /*text-transform: uppercase; This is a holdover from the previous website.*/
}

h6 {
  font-size: var(--font-size);
}

p {
  margin: 0 0 var(--spacing) 0;
  font-size: var(--font-size);
  font-weight: var(--font-weight-normal);
}

ul, ol {
  padding: 0 0 var(--spacing) var(--spacing-2xl);
  margin: 0;
  line-height: 1.7;
}

ul li ul, ol li ul { /* There's a possibility you may want to remove this if it causes problems with the menus or something. */
  padding-bottom: 0;
}

a:hover {
  color: var(--primary-color-dark);
}

:focus-visible {
  outline: none; /* Removes the blue border around linked objects that sometimes appears. */
}

::selection, ::-moz-selection, ::-webkit-selection {
  text-decoration: none; /* Remove underline on text selection. This doesn't seem to work. */
}

.link-text {
  font-size: var(--font-size-4xs);
  /*font-size: 0.65em;
  margin-left: var(--spacing-xs) !important;*/
}

.nolink { /* Disables any link */
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: inherit; /* Optional: to keep same styling */
}

.pdf {
  font-size: smaller;
  font-style: italic;
  font-variant: small-caps;
  color: var(--gray-dark-color);
}

.indent {
  margin-left: var(--spacing-l);
}

.blog-item figure, .item-page figure {
  margin-top: var(--spacing-xs) !important;
}

.blog-item figure {
  /*margin-bottom: var(--spacing-xs) !important;*/
  margin-bottom: 0 !important;
}

.item-page figure {
  /*margin-bottom: var(--spacing) !important; You might regret this!*/
}

figure {
  /*margin: 0; You might regret this!*/
  margin: 0 0 var(--spacing) 0;
}

figure video {
  width: 100%;
}

figcaption {
  color: var(--gray-medium-color);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-2xs);
}

.dropShadow {
  box-shadow: 0 var(--spacing-2xs) var(--spacing-xs) 0 var(--drop-shadow-color), 0 6px 20px 0 var(--drop-shadow-color);
}

/* Block quotes */

blockquote {
  margin: var(--spacing) var(--spacing-2xl);
  padding: var(--spacing) var(--spacing-l);
  position: relative;
}

blockquote::before {
  content: "";
  height: 100%;
  width: 5px;
  border-top-left-radius: var(--radius-small);
  border-bottom-right-radius: var(--radius-small);
  position: absolute;
  top: 0;
  left: 0;
  background: var(--primary-color-light);
}

blockquote cite {
  /*font-style: italic;*/
  display: block;
  text-align: right;
}

/* Form controls */

button {
  border: none; /* You may regret this. */
  background-color: transparent;
  color: inherit; /* You may also regret this. */
  font-weight: inherit;
  padding: 0; /* You may also regret this. */
}

button:disabled, button[disabled], button[disabled]:hover {
  cursor: not-allowed;
  color: var(--form-ele-disabled-color) !important;
  background-color: transparent !important; /* You may have to fix this later. */
  pointer-events: none;
}

.input-group {
  gap: var(--spacing);
}

.form-control:focus {
  color: var(--gray-color);
}

input, .form-control, textarea, select {
  color: var(--gray-color);
  /*min-height: var(--form-ele-medium);*/
  border-radius: var(--radius-small);
  box-sizing: border-box;
  border: 1px solid var(--gray-color);
  width: 100%;
  line-height: 1.15;
  /*padding: 0 var(--spacing-xs);*/
  padding: var(--spacing-2xs) var(--spacing-xs); /*You might regret this.*/
  box-shadow: var(--hover-gray-color) 0 0 0 0;
  transition: box-shadow var(--timing-xquick) ease-in-out;
}

select {
  padding-left: var(--spacing-2xs) !important;
}

input[type=text], input[type=number], input[type=date], input[type=time], input[type=email], select {
  min-height: var(--form-ele-medium);
  padding: 0 var(--spacing-xs);
}

input[type=password] { /*Check if this is actually necessary.*/
  padding: var(--spacing-xs);
}

input[type=text]:hover, input[type=password]:hover, input[type=number]:hover, input[type=date]:hover, input[type=time]:hover, input[type=email]:hover, textarea:hover, select:hover {
  box-shadow: var(--hover-gray-color) 0 0 0 5px;
  border-color: #000000;
}

input:focus, input[type=text]:focus-visible, input[type=password]:focus-visible, textarea:focus, select:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  transition: none;
}

.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { /* Rounds right edges of password box */
  border-top-right-radius: var(--radius-small);
  border-bottom-right-radius: var(--radius-small);
}

fieldset {
  margin-bottom: var(--spacing);
}

.fieldClear {
  background-color: var(--primary-color);
  color: #ffffff;
  width: var(--spacing);
  margin-right: var(--spacing-xs);
  text-align: center;
  border: none;
  cursor: pointer;
  padding: initial;
}

/*footer button {
  border-radius: var(--radius-circle);
  border: none;
  background-color: #ffffff;
  color: var(--gray-color);
}

footer button:hover {
  border: 2px solid var(--primary-color) !important;*/
  /*box-shadow: inset 0 0 0 3px # var(--primary-color) !important;*/
  /*outline: 1px solid var(--primary-color);
  color: var(--primary-color) !important;
}*/

/* Buttons */

.btn {
  position: relative;
  border-radius: var(--radius-circle) !important;
  border: var(--spacing-3xs) solid;
  padding: 0 var(--spacing-xl);
  font-family: inherit;
  font-size: var(--font-size);
  min-height: var(--form-ele-medium);
  display: inline-flex;
  align-items: center;
  transition: all var(--timing-quick) ease-in-out, scale var(--timing-xquick) ease, box-shadow var(--timing-xquick) ease;
  scale: 1;
  text-shadow: none;
  box-shadow: none;
  line-height: normal;
  /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0); I can't remember why I added this*/
}

.btn-empty {
  border-radius: var(--radius-circle) !important; /* See if you can place this more efficiently elsewhere. */
}

.btn-outlined {
  background-color: #ffffff;
}

.btn-outlined.btn-primary, .star {
  color: var(--primary-color);
}

.btn-outlined.btn-secondary {
  color: var(--secondary-color);
}

.btn-outlined.btn-accent {
  color: var(--accent-color);
}

.btn-outlined.btn-nocolor {
  color: var(--gray-color);
}

.btn-solid, .btn:focus, .btn:focus-visible, .btn:hover {
  color: #ffffff;
}

.btn-solid.btn-primary, .btn-outlined.btn-primary:active, .btn-outlined.btn-primary:focus, .btn-outlined.btn-primary:focus-visible, .btn-outlined.btn-primary:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-solid.btn-primary:active, .btn-solid.btn-primary:hover {
  border-color: var(--primary-color-dark);
  background-color: var(--primary-color-dark);
}

.btn-solid.btn-secondary, .btn-outlined.btn-secondary:active, .btn-outlined.btn-secondary:focus, .btn-outlined.btn-secondary:focus-visible, .btn-outlined.btn-secondary:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.btn-solid.btn-secondary:active, .btn-solid.btn-secondary:hover {
  border-color: var(--secondary-color-dark);
  background-color: var(--secondary-color-dark);
}

.btn-solid.btn-accent, .btn-outlined.btn-accent:active, .btn-outlined.btn-accent:focus, .btn-outlined.btn-accent:focus-visible, .btn-outlined.btn-accent:hover, .back-to-top-link:hover, .back-to-top-link:focus {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff; /*You might regret this*/
}

.btn-solid.btn-accent:active, .btn-solid.btn-accent:hover/*, .back-to-top-link*/ {
  border-color: var(--accent-color-dark);
  background-color: var(--accent-color-dark);
  color: #ffffff;
}

.btn-solid.btn-nocolor, .btn-outlined.btn-nocolor:active, .btn-outlined.btn-nocolor:focus, .btn-outlined.btn-nocolor:focus-visible, .btn-outlined.btn-nocolor:hover {
  background-color: var(--gray-color);
  border-color: var(--gray-color);
}

.btn-solid.btn-nocolor:active, .btn-solid.btn-nocolor:hover {
  border-color: var(--gray-dark-color);
  background-color: var(--gray-dark-color);
}

.btn:active, .btn-empty:active, .accordion__header:active, .metismenu-item button:active/*, metismenu.mod-menu .mm-collapse>li>a*/ {
  /* color: #ffffff !important; You may need to reinstate this! */
  scale: 0.96;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5) !important; /* You shouldn't need to do this. */
}

.btn:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  transition: none;
  box-shadow: none;
}

.btn h2 {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
}

.btn .link-text-only {
  text-decoration: none;
  display: inline-flex; /* This shouldn't be necessary, but it is for some reason. */
  /* align-items: center; This shouldn't be necessary, but it is for some reason. */
}

.btn:hover {
  text-decoration: none !important; /* Necessary for text that's not within the "link-text-only" class. */
}

.btn-small {
  font-size: var(--font-size-s);
  min-height: var(--form-ele-small);
  padding: 0 var(--spacing);
}

.blog-item .readmore {
  text-align: right;
}

/* Accordions */

.accordion {
  width: 100%;
  margin-bottom: var(--spacing); /* You need to find a way to address the bottom spacing issue. */
}

.accordion h1, .accordion h2, .accordion h3, .accordion h4, .accordion h5, .accordion h6 {
  color: inherit;
  line-height: inherit;
}

.accordion button {
  border-radius: var(--radius-small);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-s) var(--spacing);
  border: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.15;
  transition: all var(--timing-quick) ease-in-out, scale var(--timing-xquick) ease, box-shadow var(--timing-xquick) ease;
  text-align: left; /* Check to see if you actually need this; it seems to override the regular button settings. */
}

.accordion__header:not(.collapsed) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /*transition: height var(--timing-slow) ease;*/
}

.accordion__content {
  background: var(--gray-light-color);
  /*padding: var(--spacing);*/
  box-sizing: border-box;
  /* height: auto; Is this property necessary? */
  overflow: hidden;
  border-bottom-left-radius: var(--radius-small);
  border-bottom-right-radius: var(--radius-small);
  transition: height var(--timing-medium-quick) ease;
}

.accordion__content > div:first-child {
  padding: var(--spacing);
}

.accordion__content p:last-child/*, .card .accordion:last-child*/ {
  margin-bottom: 0;
}

.accordion__content ul:last-child {
  padding-bottom: 0;
}

/* Small banners (notes) */

.note {
  background: var(--primary-color);
  color: white;
  padding: var(--spacing);
  margin-bottom: var(--spacing);
  border-radius: var(--radius-small);
  box-shadow: var(--elevation-small-borderless);
}

.note h2, .note a {
  color: #ffffff;
}

.note p:last-child, .banner__content p:last-child {
  margin-bottom: 0;
}

.banner__wrapper {
  display: flex; /* Change this to inline-flex if you want the width of the banner to be limited to the content. */
  /* align-items: stretch;  Vertically aligns icon, content, and close button */
  background: var(--primary-color);
  color: #ffffff;
  margin-bottom: var(--spacing);
  border-radius: var(--radius-small);
  box-shadow: var(--elevation-small-borderless);
}

/* Icon section */
.banner__icon {
  display: flex;
  align-items: center;
  padding: var(--spacing-s);
  background-color: var(--drop-shadow-color);
  border-radius: var(--radius-small) 0 0 var(--radius-small);
  font-family: 'utah design system';
  speak: none;
}

.banner__icon.checkmark::before {
  content: '\e906';
}

.banner__icon.info::before {
  content: '\e908';
}

.banner__icon.warning::before {
  content: '\e91e';
}

/* Main message text */
.banner__content {
  flex: 1; /* Takes up the remaining space of the div */
  padding: var(--spacing-s) var(--spacing);
}

/* Close button container */
.banner__close {
  display: flex;
  align-items: center;
  margin-left: auto; /* Pushes the close button to the right of the wrapper */
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0;
}

/* Close button hover effect */
.banner__close button:hover {
  box-shadow: inset 0 0 0 var(--radius-circle) var(--hover-gray-color);
  border-radius: var(--radius-circle);
}

#mod-custom120 {
  /* margin-bottom: var(--spacing); This is no longer necessary. */
}

#mod-custom120:has(.note) { /* This reduces the margin around the archived content notification box. */
  /* margin-bottom: 0; You may not need this setting in mobile view. */
}

/* Podcast player */

.playerPodcast {
  background: #d9dbdd;
  color: #080808;
  padding: var(--spacing);
  margin-bottom: var(--spacing);
  border-radius: var(--radius-small);
  box-shadow: var(--elevation-small-borderless);
}

.playerPodcast iframe {
  width: 100%;
  height: 192px;
  border: 0;
}

.playerPodcast p:last-child {
  margin-bottom: 0;
}

.thumbnailPodcast {
  float: left;
  position: relative;
  width: 267px;
  margin-right: var(--spacing-l);
  margin-bottom: var(--spacing-l);
}

.featuredArticlesSection .thumbnailPodcast { /* Hide the thumbnail if it appears in the featured articles section on the home page. */
  display: none;
}

.thumbnailPodcast div {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: var(--spacing-s);
}

.thumbnailImagePodcast {
  width: 267px;
  height: 150px;
}

.thumbnailLogoPodcast {
  box-shadow: 0 var(--spacing-2xs) var(--spacing-xs) 0 rgba(0, 0, 0, 0.2), 0 6px var(--spacing-s) 0 rgba(0, 0, 0, 0.19);
}

/* Tables */

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing);
}

table button {
  padding: var(--spacing-s);
  width: 100%;
  text-align: left;
  margin-left: calc(0px - var(--spacing-s));
  margin-bottom: calc(0px - var(--spacing-s));
}

thead {
  background: #ffffff;
}

th {
  line-height: 1.2;
  /*border-bottom: 1px solid var(--gray-dark-color);*/
}

th, td {
  /*padding: var(--spacing-xs);*/
  padding: var(--spacing-s);
  /*text-align: left;*/
  border-bottom: 1px solid var(--gray-dark-color);
}

tbody tr:nth-child(even) {
  background-color: var(--gray-light-color);
}

.table-header--sorted::before {
  content: "";
  height: 7px;
  width: 100%;
  background: var(--primary-color);
  display: block;
  position: relative;
  left: -14px;
  /*bottom: -48px;*/
  bottom: -62px;
  border-radius: var(--radius-circle);
  z-index: 1;
}

.table-header--sorted::after {
  content: "";
  display: block;
  position: relative;
  background-image: url('/images/icons/sorting-arrow.svg');
  background-color: var(--primary-color);
  background-repeat: no-repeat;
  background-size: 9px;
  background-position: center;
  border-radius: var(--radius-circle);
  /*bottom: -7px;*/
  bottom: -20px;
  left: calc(50% - 20px);
  height: 15px;
  width: 15px;
  z-index: 2;
}

/* Necessary for text that can't be visible in a browser but must be picked up by screen readers */
.visually-hidden-text {
  color: transparent;
  /*text-shadow: none;*/
  white-space: nowrap;
}

/* --- Stacked table layout on mobile --- */
@media screen and (max-width: 600px) {
  
  table, thead, tbody, th, td, tr {
    display: block;
  }

  table {
    margin-top: 10px;
    border-bottom: var(--spacing-3xs) solid var(--gray-dark-color);
  }
  
  thead {
    display: none;
  }
  
  tbody tr {
    background-color: #ffffff !important;
    /*margin-bottom: 12px;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(10px);
    animation: fadeSlideIn 0.4s ease forwards;*/
  }

  tr {
    /*border: 1px solid #ccc;*/
    border-top: var(--spacing-3xs) solid var(--gray-dark-color);
    /*margin-bottom: 20px;*/
    padding: 10px;
    background-color: #ffffff;
  }
  
  td {
    display: block;
    padding: var(--spacing-2xs) 0;
    border: none;
  }

  td::before {
    content: attr(data-label);
    display: block;
    font-weight: bold;
    margin-bottom: var(--spacing-3xs);
  }

  /*@keyframes fadeSlideIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }*/
  
}

.tableTitleForScreenReaders {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.tablePagination {
  text-align: center;
}

.tablePagination button {
  /*border-radius: var(--radius-circle);*/
  color: var(--gray-color); /* You shouldn't need to add this, but for some reason you do. */
  height: var(--form-ele-medium);
  width: var(--form-ele-medium);
}

.tablePagination button:hover {
  color: var(--gray-dark-color);
  background: var(--hover-gray-color);
  box-shadow: none;
}

/* Arrows? */

.arrowRotate[data-bs-toggle="collapse"]::before {
  display: inline-block;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\25B6 \FE0E \00a0";
  margin-left: -0.25em;
  margin-right: 0.25em;
  vertical-align: middle;
  transform: rotate(90deg);
  transition: all linear 0.25s;
}

.arrowRotate[data-bs-toggle="collapse"].collapsed::before {
  transform: rotate(0deg);
  margin-left: initial;
  margin-right: initial;
  vertical-align: initial;
}

.arrowRotateAfter[data-bs-toggle="collapse"]:after {
  /*display: inline-block; Is this necessary? */
  font-family: 'utah design system';
  speak: none;
  font-size: 0.65rem;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: 'O';
  margin-left: var(--spacing-xs); /* Consider using var(--spacing-2xs) */
  vertical-align: middle;
  transform: rotate(90deg);
  transition: all linear 0.25s;
}

.arrowRotateAfter[data-bs-toggle="collapse"].collapsed:after {
  transform: rotate(0deg);
  margin-left: 0.25em;
  vertical-align: initial;
  float: right;
}

.accordionArrow {
  /* display: flex; You might need to reinstate this!
  justify-content: space-between;
  align-items: center; */
  /*padding: 0 !important; You might need to reinstate this! */
}

.accordionArrow p {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.utds-icon.utds-icon-chevron-right.link-text.iconRotate { /* Necessary for a left margin */
  margin-left: var(--spacing-2xs);
  font-size: x-small;
}

.iconRotate, .iconRotate180 {
  /*transition: transform var(--timing-quick) linear;*/
  transition: all 200ms ease-in-out, scale 100ms ease, box-shadow 100ms ease;
}

.iconRotate180 {
  /*transition: transform var(--timing-medium-quick) linear;*/
}

.accordionArrow.collapsed .iconRotate {
  transform: rotate(0deg);
}

.accordionArrow:not(.collapsed) .iconRotate {
  transform: rotate(90deg);
}

.accordionArrow:not(.collapsed) .iconRotate180 {
  transform: rotate(180deg);
}

[id^="submenu"] { /* This might work find for collapsible sections on the main pages, but it could interfere with the spacing that is already set in the left sidebars. */
  margin-left: var(--spacing);
}

.collapse { /* This is to fix the "jerky" movement upward as the hidden info panel is opened. */
  overflow: hidden; /* Ensure smooth height transitions */
  transition: height 0.35s ease; /* Customize speed & easing */
  /* margin-left: var(--spacing);  See if this setting works (it does not) */
}

.collapse:has(iframe) { /* Remove this if it causes problems or doesn't work. */
  overflow: visible;
}

body.site .container-header {
  max-width: 100% !important;
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
  /*background-color: #ffffff;*/
  background-image: none;
  box-shadow: none;
}

.container-header .grid-child {
  max-width: inherit;
  padding: var(--spacing-xs) var(--spacing-l) 7px var(--spacing-l);
  display: flex; /* These display properties may or may not be necessary. */
  justify-content: flex-start;
  align-items: center;
}

.utah-logo-svg {
  border: none;
  background: none;
  padding: 0;
  margin-top: -1px;
  position: relative;
  display: inline-block;
}

/* Tooltips */

[role="tooltip"] {
  /* override user-agent styles */
  display: inline-block !important; /* This is necessary to override the default display: none property and allow transitions to occurr. */
  position: absolute;
  visibility: visible !important;
  opacity: 0; /* start invisible */
  transition: opacity var(--timing-xquick) ease-in-out var(--timing-quick), transform var(--timing-xquick) ease-in-out var(--timing-quick), visibility 0s !important;
  /* transition: opacity 0.3s ease;  your transition */
}

/* tooltip wrapper */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
  /*cursor: pointer;*/
  cursor: inherit;
}

/* Tooltip (with zoom + configurable delay) */
.tooltip {
  /*position: absolute;*/
  top: 125%;
  left: 50%;
  font-family: inherit;
  right: initial !important;
  max-width: inherit !important;
  /*box-shadow: none !important;*/
  box-shadow: var(--elevation-small) !important;
  transform: translateX(-50%) scale(0.7) !important;
  transform-origin: top center;
  background-color: var(--gray-dark-color) !important;
  color: #ffffff !important;
  text-align: center !important;
  margin: 0 !important;
  padding: var(--spacing-3xs) var(--spacing-s) !important;
  /*background: #333;
  color: #fff;
  padding: 6px 10px;*/
  border-radius: 6px !important;
  font-size: var(--font-size);
  line-height: 1.4;
  border: none !important;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10 !important;
  transition: opacity var(--timing-xquick) ease-in-out, transform var(--timing-xquick) ease-in-out, visibility 0s linear 0s !important;
}

/* Tooltip arrow */
.tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}

/* Show on hover/focus (with delay) */
.tooltip-wrapper:hover .tooltip,
.tooltip-wrapper:focus-within .tooltip/*, .mod-menu__heading:hover .mmshow*/ {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1) !important;
  transition: opacity var(--timing-xquick) ease-in-out var(--timing-quick), transform var(--timing-xquick) ease-in-out var(--timing-quick), visibility 0s !important;
  pointer-events: auto;
}

/* Hide smoothly (no snap-out) */
.tooltip-wrapper:not(:hover):not(:focus-within) .tooltip {
  opacity: 0;
  transform: translateX(-50%) scale(0.7);
  transition:
    opacity var(--timing-xquick) ease-in-out,
    transform var(--timing-xquick) ease-in-out,
    visibility 0s linear var(--timing-xquick); /* hide after fade */
}

/* Prevent tooltip from showing when disabled */
.tooltip-disabled .tooltip {
  opacity: 0 !important;
  visibility: hidden !important;
}

.utah-logo-svg .tooltip {
  top: 65px !important;
  left: 63% !important;
  /*background-color: var(--gray-dark-color) !important;
  display: inline-block; This is not necessary and will cause problems
  max-width: inherit;
  box-shadow: none !important;
  color: #ffffff !important;
  text-align: center !important;*/
  inset: 0px auto auto 0px;
  /*margin: 0 !important;
  padding: var(--spacing-3xs) var(--spacing-s) !important;
  border: none !important;*/
  /*border-radius: 4px;*/
  /*white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transform: translateX(-50%) scale(0.7);
  transform-origin: center top;
  transition: opacity 0.3s ease, visibility 0.3s ease;*/
  /*transition: transform 100ms ease-in-out;
  right: inherit !important;
  line-height: 1.4;
  z-index: 10;
  pointer-events: none;*/
}

#searchOverlayClose .tooltip {
  top: var(--form-ele-medium);
}

/* Popups (They aren't really working yet.) */

.popup-wrapper {
  z-index: -100; /* Maybe find a better, more consistent number? Change this to 100 when visible. */
  position: absolute;
  background: none transparent;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  /*transition: opacity 100ms ease-in-out;*/
  transition: all var(--timing-quick) ease-in-out var(--timing-medium-quick);
  transform-origin: top center;
  transform: translateX(-50%) scale(0.7);
  opacity: 0; /* Change this to 1 when you want to test a popup. */
  visibility: hidden; /* Change this to "visible" when you want to test it. */
}

.popup-content {
  transform-origin: top;
  transform: scale(1);
  background: white;
  border-radius: var(--radius-small);
  border: 1px solid var(--gray-3-1-contrast);
  box-sizing: border-box;
  min-width: 200px;
  max-width: 420px;
  width: max-content;
  padding: var(--spacing-s);
  transition: transform 100ms ease-in-out;
  box-shadow: var(--elevation-small);
}

.popup-content > p:last-child {
  margin-bottom: 0; /* Why does this not work? */
}

.popup-arrow {
  position: absolute;
  left: 47%;
  top: -6px;
  width: 9px;
  height: 9px;
  background: inherit;
  box-sizing: content-box;
  visibility: hidden;
}

.popup-arrow::before {
  border-top: 1px solid var(--gray-3-1-contrast);
  border-left: 1px solid var(--gray-3-1-contrast);
  visibility: visible;
  content: "";
  transform: rotate(45deg);
  position: absolute;
  width: 9px;
  height: 9px;
  background: inherit;
  box-sizing: content-box;
}

.container-header .navbar-brand a { /* This overrides the template so that buttons show up properly inside popups. */
  /*color: inherit; You can't do this because it causes an underline under the DWR page title. */
}

/* Error messages */

.invalid {
  color: var(--danger-color);
  border-color: var(--danger-color);
}

#system-message-container {
  margin-bottom: var(--spacing);
}

/* Badges */

.badge {
  background-color: var(--danger-color) !important; /* This should be the --badge-color variable, but the Cassiopeia template overrides the value you give it */
  border-radius: var(--radius-circle);
  box-sizing: border-box;
  /*color: white !important;*/
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--font-size-2xs);
  min-height: var(--spacing-xs);
  min-width: var(--spacing-2xs);
  padding: var(--spacing-3xs) var(--spacing-2xs);
  position: absolute;
  right: var(--spacing-2xs);
  top: var(--spacing-xs);
  transform: translateY(-50%);
}

.badge--blank {
  width: 9px;
  height: 9px;
}

.badge--main { /* This is a hack, at best */
  position: inherit;
  /*right: 0;*/
  top: 0;
  transform: none;
}

/* Header stuff */

.brand-logo {
  display: inline-flex; /* formerly "flex" */
  align-items: center;
  /* width: 100%; */
}

.brand-logo img {
  width: auto;
  height: 50px;
  margin-left: var(--spacing);
  margin-top: 6px;
  margin-bottom: 6px;
  padding-left: var(--spacing);
  border-left: 1px solid var(--gray-dark-color); /* Not sure which color this should be; Design System seems to use #707070 */
}

.info-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
  /*transition: max-height 0.4s ease, padding 0.4s ease;*/
  /*background-color: var(--gray-dark-color);*/
  background-color: var(--gray-color);
  color: #ffffff;
  /*padding: 0 1rem;*/
  padding: 0 var(--spacing-l);
  position: relative;
}

.info-panel.open {
  max-height: 1000px;
  opacity: 1;
  padding: var(--spacing-l);
}

/*.info-panel h2 {*/
#officialLabel {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semi-bold);
  /*font-family: var(--normal-font-family);*/
  padding: 0 var(--spacing-xl) 0 0;
  line-height: 1;
  margin-bottom: var(--spacing-s);
}

.close-button {
  position: absolute;
  right: var(--spacing-l);
  color: inherit;
  background-color: inherit;
  border: none;
  box-shadow: none;
  /*line-height: 0.5;
  font-size: var(--font-size-3xl);*/
  padding: 0 3px;
  border-radius: var(--radius-circle);
  /*min-height: var(--form-ele-medium);
  min-width: var(--form-ele-medium);
  padding: 4px 2px 1px 2px;*/
}

.headerHelpButton {
  color: var(--primary-color) !important;
}

.headerHelpButton:hover, .headerHelpButton:active, .headerHelpButton:focus, .headerHelpButton:focus-visible {
  color: #ffffff !important;
}

#rightHeader {
  display: none;
}

@media screen and (min-width: 601px) {
  .utds-official-website-popup__content {
    display: flex;
    gap: var(--spacing-2xl);
  }
  .utds-official-website-popup__col {
    max-width: 400px;
  }
  #rightHeader {
    display: flex;
    align-items: center;
  }
}

.utds-official-website-popup__col {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
}

.utds-official-website-popup__copyright p {
  margin-top: 5px;
  margin-bottom: 0;
  font-size: var(--font-size-s);
}

@media screen and (max-width: 600px) {
  .mobileHidden { /* Hide an element in mobile view */
    display: none;
  }
  
  .utds-official-website-popup__col:not(:last-child) {
    margin-bottom: var(--spacing-l);
  }

  .mod-menu.mod-menu_dropdown-metismenu { /* Hide desktop menus in mobile view */
    display: none;
  }

  footer div h2:first-child {
    margin-top: var(--spacing-l);
  }

  .footerState div p {
    text-align: center;
  }
}

.container-header .grid-child:not(.container-nav) {
  border-bottom: 1px solid var(--gray-medium-light-color) !important;
}

/* DESKTOP MENU CODE GOES HERE! */

/* ============================================
   TOP-LEVEL MENU LINKS (DESKTOP NAV)
   ============================================ */

.container-header .mod-menu > li > a {
  color: var(--gray-color);
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: var(--spacing-3xs) var(--spacing);
  margin: var(--spacing-xs) 0;
  border-radius: var(--radius-circle);
  transition: all var(--timing-quick) ease-in-out;
  position: relative;
  box-sizing: border-box;
  font-size: var(--font-size);
  font-weight: var(--font-weight-semi-bold);
  line-height: 1.7;
}

/* Heading items inside Joomla menu modules */
.mod-menu__heading {
  color: var(--gray-color) !important;
  padding: var(--spacing-3xs) var(--spacing) !important;
  margin: var(--spacing-xs) 0;
  font-size: var(--font-size) !important;
  font-weight: var(--font-weight-semi-bold) !important;
  line-height: 1.7 !important;
}

/* Adjust nav container layout */
.container-header .container-nav,
.main-menu__wrapper {
  background-color: var(--gray-light-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--spacing) 0 var(--spacing-s);
}

/* Removes extra padding around menu list items */
.mod-list li {
  padding: 0 !important;
}

/* Removes spacing between menu <li> items */
@media (width >= 992px) {
  .container-header .mod-menu > li + li {
    margin-left: 0;
  }
}

/* ============================================
   METISMENU FIXES + ARROW REMOVAL
   ============================================ */
.metismenu.mod-menu .mm-toggler {
  height: auto;
}

.metismenu.mod-menu .metismenu-item > a:focus,
.metismenu.mod-menu .metismenu-item > button:focus {
  outline: none;
}

/* Remove all Metis arrows */
.metismenu.mod-menu .mm-toggler::after,
.metismenu.mod-menu .mm-toggler[aria-expanded="true"]::after {
  display: none;
}

/* Submenu item base styles */
.metismenu.mod-menu .metismenu-item {
  line-height: 1.7;
  font-size: var(--font-size-xs);
}

.metismenu-item a,
.metismenu-item button {
  padding: var(--spacing-2xs) var(--spacing);
  margin: var(--spacing-2xs) 0;
  border-radius: 999px;
  transition: all var(--timing-quick) ease-in-out; /* This transition should match the other transitions. */
  width: 100%;
}

.metismenu-item a:hover,
.metismenu-item button:hover {
  box-shadow: inset 0 0 0 1000px var(--hover-gray-color) !important;
}

.metismenu-item.level-1 a:hover,
.metismenu-item.level-1 button:hover {
  color: #000000 !important;
}

/* Hover highlight for submenu items */
.metismenu-item:not(.level-1) a:hover,
.metismenu-item:not(.level-1) button:hover {
  color: var(--primary-color) !important;
}

/* Removes Cassiopeia's underline indicator; Make sure the two colons before "before" are okay */
.container-header .metismenu > li > a:hover:after,
.container-header .metismenu > li > button:hover::before,
.container-header .metismenu > li.active > a:after,
.container-header .metismenu > li.active > button::before {
  background: none;
}

/* Remove text-decoration everywhere */
.metismenu.mod-menu .metismenu-item.active > a,
.metismenu.mod-menu .metismenu-item.active > button,
.metismenu.mod-menu .metismenu-item > a:hover,
.metismenu.mod-menu .metismenu-item > button:hover {
  text-decoration: none !important;
}

/* ============================================
   DROPDOWN ARROW + BORDER (CUSTOM)
   (Now synced with dropdown animation)
   ============================================ */
.mm-collapse::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -9px;
  border-width: 9px;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
  z-index: 1002;
  opacity: 0;
  /*transition: opacity 150ms ease-in-out;*/
  transition: all var(--timing-quick) ease-in-out;
}

.mm-collapse::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent var(--gray-3-1-contrast) transparent;
  z-index: 1001;
  opacity: 0;
  /*transform: translateX(-50%) scale(0.7); You may need to enable this! */
  /*transition: opacity 150ms ease-in-out;*/
  /*transition:
      opacity 0.22s ease 0.3s,
      transform 0.22s ease 0.3s;*/
  transition: all var(--timing-quick) ease-in-out;
}

/* Arrows fade in at the same time as dropdown */
.mm-collapse::before,
.mm-collapse::after {
  opacity: 1;
}

/* ============================================
   DROPDOWN (ANIMATED OPEN/CLOSE)
   FIXED: NO POSITION SHIFT / JUMP
   ============================================ */

/* Fixes the "display: none:" setting in the original template, which will enable transitions. */
.metismenu.mod-menu .mm-collapse:not(.mm-show) {
  display: initial;
  opacity: 0;
  visibility: hidden;
  /*transform: translateX(-50%) scale(0.7);*/
}

/* This is supposed to disable the original template-based behavior for menus on click.  Unfortunately, it doesn't work.
.mm-active>.metismenu.mod-menu .mm-toggler:after,.metismenu.mod-menu .mm-toggler[aria-expanded=true]:after {
  transform: none;
} */

.mm-collapse {
  position: absolute !important;
  top: calc(100% + 3px) !important; /* <-- UPDATED */
  left: 50% !important;

  transform: translateX(-50%) scale(0.7);
  transform-origin: top center;

  /*opacity: 0;
  visibility: hidden; YOU MIGHT NEED TO CHANGE THESE TWO PROPERTIES LATER*/

  will-change: transform, opacity;

  background: #ffffff;
  border: 1px solid var(--gray-3-1-contrast);
  border-radius: var(--radius-small);
  box-shadow: var(--elevation-small) !important;

  min-width: 200px !important;
  max-width: 420px;
  width: max-content;

  padding: var(--spacing-s) !important;
  box-sizing: border-box;

  font-weight: var(--font-weight-semi-bold);

  /*transition:
    transform 150ms ease-in-out,
    opacity 150ms ease-in-out,
    visibility 0s linear 150ms;*/
  transition: all var(--timing-quick) ease-in-out var(--timing-medium-quick);
}

/* Ensure arrows never cause layout shifts */
.mm-collapse::before,
.mm-collapse::after {
  pointer-events: none;
  position: absolute;
}

/* This shows the submenu! */
/*.menu-open-fade {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}*/

/* Submenu link color inside open menus */
.mm-collapse a, .metismenu.mod-menu .parent>ul {
  color: var(--gray-color);
}

.metismenu.mod-menu .parent>button {
  font-weight: var(--font-weight-semi-bold);
  padding: var(--spacing-2xs) var(--spacing);
  justify-content: space-between;
}

/* Top-level hover highlight */
.container-header .mod-list li a:hover {
  color: var(--primary-color);
}

/* Sub-submenus; you may also use ".metismenu.mod-menu .mm-collapse>li.parent>ul" */
/*.divider .mm-collapse,*/ .metismenu.mod-menu .mm-collapse>li.parent>ul {
  background-color: #ffffff !important;
  top: 0 !important;
  margin: 0;
  /* left: 130% !important; This needs to be calculated based on the width of the <li>. Find a way to do this. */
  left: 0px/* !important*/;
  /*scale: 1;
  transform: translateX(100%) scale(1);*/
}

.divider .mm-collapse::before, .divider .mm-collapse::after { /* Hide the arrows in the sub-submenus */
  display: none;
}

.item-391 .mm-collapse { /* Move over the "Hunting" menu slightly */
  left: 89px !important;
}

.item-391 .mm-collapse::before, .item-391 .mm-collapse::after {
  left: 38%;
}

/* Menu chiclets (top and bottom) */

.menu-chiclet::after {
  content: "";
  width: 100%;
  height: var(--spacing-2xs);
  background: var(--primary-color);
  display: none;
  position: absolute;
  /*top: 0;*/
  left: 0;
  /*border-bottom-left-radius: var(--spacing-2xs);
  border-bottom-right-radius: var(--spacing-2xs);
  outline: none;
  outline-offset: 0;*/
}

.container-header .metismenu>li.current { /* This shows the chiclet on the menu where the current page is. */
  content: "";
  /*width: 100%;*/
  height: var(--spacing-2xs);
  background: #de4c2c !important;
  /*background: var(--primary-color) !important; PERHAPS CHANGE THIS BACK SOMETIME?*/
  /*display: block;
  position: absolute;*/
  top: 0;
  left: 0;
  border-bottom-left-radius: var(--spacing-2xs);
  border-bottom-right-radius: var(--spacing-2xs);
  /*outline: none;
  outline-offset: 0;*/
}

.container-header .metismenu>li.current button { /* The chiclet changes the display property (or something) of the menu title container, so this property moves down the title a bit. */
  top: var(--spacing-2xs);
}

.container-header .metismenu>li.current .mm-collapse {
  top: 50px !important;
}

.current .menu-chiclet::after { /* NOT USED YET (in place of the code above, but should be! */
  display: block;
  top: 0;
  border-bottom-left-radius: var(--spacing-2xs);
  border-bottom-right-radius: var(--spacing-2xs);
}

.utds-header-mobile-menu__action-item--selected .menu-chiclet::after {
  display: block;
  bottom: 0;
  border-top-left-radius: var(--spacing-2xs);
  border-top-right-radius: var(--spacing-2xs);
}

/* Search */

/*.container-header .mod-menu {
  color: var(--gray-color);
}*/

.container-header .navbar-brand {
  display: flex;
  padding: 0;
  width: 100%;
}

.container-search {
  /*display: none;*/
}

.awesomplete {
  /*display: none;*/
}

.awesomplete input {
  border-radius: var(--radius-circle);
  /* border: none; You should reinstate this because having a border shrinks the size of the search box. */
  /* width: 50vw; This should only apply to the floating search bar. */
  max-width: inherit;
  padding: var(--spacing) var(--spacing) var(--spacing) var(--spacing-3xl);
  font-size: var(--font-size-l);
  margin: 0;
}

.mod-finder__search {
  display: flex;
  align-items: stretch;
  position: relative;
  flex-direction: column;
  gap: var(--spacing-s);
  /*background-color: #000000;
  border-radius: var(--radius-circle);*/
}

.mod-finder__search .awesomplete input {
  width: 80vw;
}

#searchNowButton {
  margin: 0 auto;
  position: static; /*You need to set it to static later!*/
  /*display: inline-flex;*/
}

/*.awesomplete input[type=text]:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  transition: none;
}*/

.container-search .awesomplete {
  display: none;
}

.container-component>:first-child,.container-sidebar-left>:first-child,.container-sidebar-right>:first-child,.container-component>*+*,.container-sidebar-left>*+*,.container-sidebar-right>*+* {
    margin-top: 0;
}

/*.container-component>:first-child { YOU MAY WANT TO REINSTATE THIS!
  margin-top: 0;
  margin-bottom: var(--spacing-xl);
}*/

.container-header .container-search {
  margin-top: 0 !important;
}

.container-banner {
  margin-bottom: 0;
}

#searchHeaderButton, #searchButton, #buttonHamburger {
  /*border: none;
  background-color: transparent;*/
}

#searchHeaderButton, #buttonHamburger, #questionHeader, #searchButton span, .utds-header-action-item__icon-button { /* Where is "searchButton"? */
  /*font-size: var(--font-size-m);*/
  color: var(--gray-color);
  /*padding: 3px 2px 1px 3px;
  padding: 4px 2px 1px 2px;*/
  /*padding: 0px 12px;
  line-height: 2;*/
  min-height: var(--form-ele-medium);
  min-width: var(--form-ele-medium);
  display: flex;
  align-items: center;
  justify-content: center;
}

#searchHeaderButton:hover, #searchButton:hover, #questionHeader:hover, #buttonHamburger:hover, .utds-header-action-item__icon-button:hover, .btn-empty:hover { /* Consider changing this to the "empty" button class! */
  color: #000000;
  box-shadow: inset 0 0 0 var(--radius-circle) var(--hover-gray-color); /* Formerly --medium-gray-color */
  border-radius: var(--radius-circle);
}

#searchOverlay, .modal-backdrop {
  /* display: none; Apparently this setting prevents transitions from happening. */
  opacity: 0;
  /* visibility: hidden; This may not be necessary. */
  transition: opacity var(--timing-medium-quick) ease, visibility var(--timing-medium-quick) ease;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px) brightness(60%);
  justify-content: center;
  align-items: center;
  overflow: auto;
  pointer-events: none;
}

#searchOverlay.active {
  display: flex;
  opacity: 1;
  /* visibility: visible; This may not be necessary. */
  pointer-events: auto;
}

#searchOverlayClose {
  position: absolute;
  top: var(--spacing);
  right: var(--spacing);
  border: none;
  background-color: transparent;
  color: #ffffff;
  border-radius: var(--radius-circle);
  min-height: var(--form-ele-medium);
  min-width: var(--form-ele-medium);
  padding: 4px 2px 1px 2px;
  transition: all 200ms ease-in-out, scale 100ms ease, box-shadow 100ms ease;
}

#searchOverlayClose:hover {
  color: var(--gray-dark-color);
  background-color: #ffffff;
}

#mbOverlay {
  /*backdrop-filter: blur(6px) brightness(60%); These properties don't work because they're being countermanded by the opacity property, which the MediaBox CK plugin sets every time the overlay is opened.
  background: rgba(0, 0, 0, 0.6) !important;*/
}

.search-content {
  /*background: #fff;
  padding: 2rem;
  border-radius: var(--radius-circle);*/
}

.search-trigger {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
}

.search-pages-counter {
  margin-bottom: var(--spacing-xl);
}

.result__item+.result__item {
  border-color: var(--gray-medium-light-color);
}

.result__title-link {
  display: inline-block; /* Makes only the area around the text clickable */
  white-space: normal; /* Allows wrapping */
  line-height: 1.125;
}

.result__title-text {
  font-size: inherit;
  text-decoration: none !important;
}

.result__title-text:hover {
  /*text-decoration: none;*/
}

.result__title-url {
  order: initial; /* For some reason, the template sets this to -1 and shows the URL before the page title. This fixes it. */
  font-size: var(--font-size-xl);
  color: inherit;
}

.result__title-url:hover {
  text-decoration: underline;
}

.result__date {
  font-weight: var(--font-weight-semi-bold);
}

.result__date:after {
  content: "";
}

.result__image {
  margin-top: var(--spacing-s);
  margin-bottom: var(--spacing);
}

.result__image a:hover {
  /*box-shadow: none;*/
}

/*.in-site-search {
  display: none;
}*/

/* Mobile menu: Unfortunately, I couldn't use Joomla's ready-made menu module for this purpose. */

.menuMobile {
  opacity: 0;
  transition: opacity var(--timing-medium-quick) ease, visibility var(--timing-medium-quick) ease;
  position: fixed;
  width: 100vw;
  /*height: 100vh;*/
  top: 130px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px) brightness(60%);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: hidden;
  overflow-y: auto; /* allows scroll inside overlay */
  -webkit-overflow-scrolling: touch; /*- smooth scrolling on iOS */
  pointer-events: none;
}

.menuMobile.active {
  opacity: 1;
  pointer-events: auto;
}

.menuMobile #mod-custom112 { /* This custom module is the mobile menu. */
  position: relative;
  box-shadow: var(--elevation-small);
  width: calc(100% - 2 * var(--spacing-s));
  background: #ffffff;
  border-radius: var(--radius-medium);
  margin: var(--spacing-s);*/
}

body .menuMobile.active {
  /*position: fixed;
  width: 100%;
  overflow: hidden; prevents background scroll */
}

.utds-header-mobile-menu__action-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-top-right-radius: var(--radius-medium);
  border-top-left-radius: var(--radius-medium);
  background-color: var(--gray-light-color);
  gap: var(--spacing-s);
}

.utds-header-mobile-menu__content {
  padding: var(--spacing-s) var(--spacing);
}

.utds-header-mobile-menu__action-item {
  position: relative; padding: var(--spacing-xs) 0;
}

.vertical-menu {
  border-left: 1px solid var(--gray-medium-light-color);
}

.vertical-menu__wrapper h2 {
  font-size: var(--font-size);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
}

.vertical-menu p {
  padding: var(--spacing-2xs) var(--spacing) !important;
  margin: var(--spacing-2xs) 0;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-circle);
  transition: all var(--timing-quick) ease-in-out;
  line-height: 1.7;
}

.vertical-menu a { /* These properties are being canceled out within submenus ("panelSubmenu" class). Fix this, maybe? */
  text-decoration: none;
  color: var(--gray-color);
}

.vertical-menu p:hover {
  box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
}
  
.vertical-menu a:hover {
  color: var(--primary-color);
}

/* Page banners */

.bannerBackground {
  position: relative;
  width: 100%;
  height: 200px;
  /*background-image: linear-gradient(to top, var(--secondary-color), var(--secondary-color) 5%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0) 20%), var(--banner-image);*/
  background-image: var(--banner-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  box-sizing: border-box; /* This may or may not fix the right margin problem. */
}

.bannerTextbox {
  position: absolute;
  bottom: 0;
  right: -3em; /* Right-side banner */
  width: 105vw; /* Mobile size */
  height: 4.2rem; /* Mobile size */
  background: var(--secondary-color-dark);
  transform: skewX(-40deg);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Right-side banner */
  padding-right: 4rem; /* Mobile spacing */
  opacity: 0;
  animation: fadeInTextbox 0.3s ease-in-out 0.1s forwards;
}

.bannerTextbox.v2 {
  left: -6em;
  right: inherit;
  width: 75vw;
  height: 100%;
  /*justify-content: flex-start;*/ /* Left-side banner */
}

.bannerTextbox h1, .bannerTextbox p {
  color: var(--gray-on-secondary-color);
  text-align: right;
  font-size: 1.5rem !important;
  font-weight: var(--font-weight-semi-bold);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
  transform: skewX(40deg);
  z-index: 2;
}

.bannerTextbox p {
  margin: 0;
}

@keyframes fadeInTextbox {
  to {
    opacity: 1;
    /*transform: skewX(-40deg);*/
  }
}

/*.container-component>:first-child {
  margin-top: 0;
}*/

main {
  /*margin-top: 0 !important;
  margin-bottom: var(--spacing-xl) !important;*/
}

.main-top.no-card {
  margin-bottom: 22px;
}

main a:hover:not(.noHighlight):not(.btn):not(:has(img, .noHighlight)) {
  box-shadow: -3px -1px 0 0px var(--hover-gray-color-opaque), 3px -1px 0 0px var(--hover-gray-color-opaque), 3px 1px 0 0px var(--hover-gray-color-opaque), -3px 1px 0 0px var(--hover-gray-color-opaque), inset 0 0 0 1000px var(--hover-gray-color-opaque);
  /*color: var(--primary-color-dark);*/
}

.featuredArticlesSection {
  background-color: white;
  /*border: 1px solid var(--gray-color);
  padding: 0 var(--spacing-xl) var(--spacing-xl) 0;*/
}

.featuredArticlesSection .mod-articles-title {
  margin-top: var(--spacing-xl) !important;
  /*display: none;*/
}

.featuredArticlesSection article h3, .featuredArticlesSection article p {
  margin-left: var(--spacing-xl);
  margin-right: var(--spacing-xl);
}

.featuredArticlesSection ul {
  padding-bottom: 0;
  margin-bottom: var(--spacing-2xl);
}

.featuredArticlesSection li {
  border: 1px solid var(--gray-color);
  margin-bottom: var(--spacing-l);
}

.featuredArticlesSection .readmore {
  text-align: center;
  margin-bottom: var(--spacing-l);
}

.featuredArticlesSection figure {
  height: 200px;
}

.featuredArticlesSection figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mod-articles-grid {
  grid-gap: 0;
}

.utahWildlifeNews { /* This module has been removed for now. */
  margin-bottom: var(--spacing-xl);
}

.card { /* This seems to apply to the "Wildlife News" section, but it might be more than that */
  border: none;
}

.card .card-header {
  color: #ffffff;
  background-color: var(--primary-color);
  border: none;
  border-radius: var(--radius-small) var(--radius-small) 0 0;
  padding: 6px var(--spacing);
  font-size: var(--font-size-xl);
}

.card .card-header h2 {
  font-size: var(--font-size-xl);
}

/*.card .card-body { Reinstate this if you need it. */
.utahWildlifeNews .card-body {
  background-color: var(--gray-light-color);
  border-radius: 0 0 var(--radius-small) var(--radius-small);
}

.card .card-body .mod-list {
  /*list-style: inside; Why did you do this? */
  list-style: outside;
  padding-left: var(--spacing-xl);
}

.card .card-body ul:last-child, .card .card-body ol:last-child {
  padding-bottom: 0;
}

.article-author {
  font-weight: var(--font-weight-semi-bold);
}

.newsRelease .article-author, .podcastPost .article-author {
  display: none;
}

.cardHorizontal {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing);
}

.cardHorizontal > div:first-child {
  border: 1px solid var(--gray-color);
  padding: var(--spacing-xl);
}

.cardHorizontal:last-of-type > div:first-child {
  margin-bottom: 0;
}

.guidebookCover {
  margin-bottom: var(--spacing-xl);
}

.guidebookCover a {
  display: flex;
}

.guidebookCover img {
  flex-shrink: 0;
  width: 183px;
  height: auto;
}

.screenshot {
  border: 1px solid var(--gray-color);
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);
}

.article-info {
  /*margin-bottom: 0; This removes the 1rem margin below the published on or modified date. */
}

.hideLastUpdatedDate .article-info {
  display: none;
}

.article-info-term { /* Hides the "Details" label in an article heading block. */
  display: none;
}

.com-content-article__body .article-introtext { /* Hides the "intro text" on blog post pages only; once you figure out how to do this code in PHP, remove the following CSS. */
  display: none !important;
}

.page-header { /* Adds a bit of a top margin to post pages so that they line up with other pages. */
  margin-top: var(--spacing);
}

.com-content-category-blog { /* Adds a bit of a top margin to category listing pages. */
  margin-top: 21px;
}

/*Blog author stuff*/

.blogAuthor {
  display: flex;
  flex-flow: row wrap;
  /*gap: var(--spacing-xl);
  align-items: center;*/
  justify-content: center;
}

.blogAuthor img {
  margin: 0;
  max-width: 225px;
  max-height: 225px;
  margin-bottom: var(--spacing);
  border-radius: 50%;
}

.text-muted {
  /*color: var(--gray-color);*/
  color: inherit !important;
}

.modified {
  /*text-align: right;*/
  /*margin-top: 2rem;*/
  margin: var(--spacing-xl) 0;
  font-size: var(--font-size-xs);
}

.published {
  margin-top: 1rem;
  font-size: var(--font-size-xs);
}

.item-image:not(.mod-articles-image) {
  display: none;
}

.newsRelease .item-image, .blogPost .item-image { /* Show the featured image only on news article and blog post pages. */
  display: inherit;
  width: 100%; /* This is necessary in case the featured image isn't at least 900 pixels long. */
  /*margin-bottom: var(--spacing);*/
}

.newsRelease .item-image img, .blogPost .item-image img { 
  width: 100%; /* In case the featured image isn't at least 900 pixels long. */
}

.diseasesOfConcern, .otherDiseases, .usefulInformation {
  padding-top: 0 !important;
}

.featuredImageFullWidth {
  margin: 0.5rem 0 0 0;
}

.featuredImageFullWidth img {
  float: none !important;
  width: 100%;
  height: auto;
}

.align-center {
  display: flex;
  justify-content: center;
  /*max-width: 100%;*/
}

.very-small-size {
  max-width: 35%;
  float: right;
  margin-left: var(--spacing);
}

.footnote {
  position: relative;
  font-size: smaller;
  margin-top: var(--spacing-l);
}

.footnote:before {
  content: '';
  width: var(--spacing-6xl);
  height: 1px;
  background: var(--gray-color);
  position: absolute;
  top: calc(-1 * var(--spacing-xs));
  margin-left: calc(-1 * var(--spacing-xs));
}

/* Pagination */

.pagination {
  margin: 0 0 var(--spacing) 0;
  justify-content: center;
}

.mb-4 {
  margin-bottom: 0 !important;
  padding-bottom: 0;
}

.pagination .utds-icon {
  position: relative;
  top: var(--spacing-3xs);
}

.pagination .btn-empty:hover {
  box-shadow: 0px 0px 0 0px var(--hover-gray-color-opaque), inset 0 0 0 1000px var(--hover-gray-color-opaque) !important;
}

.page-link {
  display: flex;
  padding: 0;
  border: 0;
  transition: transform 100ms ease, box-shadow 100ms ease;
  height: var(--form-ele-medium);
  width: var(--form-ele-medium);
  align-items: center;
  justify-content: center;
}

.active .btn-empty:hover {
  background-color: var(--primary-color-dark) !important;
  color: #ffffff;
  box-shadow: none !important;
}

.page-link.disabled, .disabled>.page-link {
  cursor: not-allowed;
  pointer-events: initial;
  background-color: #ffffff;
  color: var(--form-ele-disabled-color) !important;
}

.page-link.active, .active>.page-link {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.page-link:active {
  box-shadow: none;
}

.page-link:focus {
  color: var(--gray-dark-color);
  background-color: transparent;
}

.active.page-item button.btn-empty {
  background-color: var(--primary-color);
  color: #ffffff;
}

/*.active.page-item button.btn-empty:hover {
  background-color: var(--primary-color-dark);
  color: #ffffff;
}*/

/* Administrative Rules formatting */

.ruleKey {
  background-color: var(--gray-medium-light-color);
  padding: var(--spacing);
  margin-bottom: var(--spacing);
  border-radius: var(--radius-small);
  box-shadow: var(--elevation-small-borderless);
}

.ruleKey p:not(:last-child) {
  margin-bottom: var(--spacing-xs);
}

.ruleKey p:last-child {
  margin-bottom: 0;
}

.ruleLevel1 {
  margin-left: var(--spacing);
}

.ruleLevel2 {
  margin-left: var(--spacing-xl);
}

.ruleLevel3 {
  margin-left: var(--spacing-3xl);
}

.ruleLevel4 {
  margin-left: var(--spacing-4xl);
}

.ruleLevel5 {
  margin-left: var(--spacing-5xl);
}

/* Modals */

.modal-backdrop.show {
  opacity: inherit;
}

.modal {
  z-index: 10000;
}

.modal-sm {
  max-width: 440px;
  border-radius: var(--radius-small);
}

.modal-lg {
  width: calc(100% - var(--spacing-3xl));
  border-radius: var(--radius-medium);
}

.modal-xl {
  max-width: 990px;
  border-radius: var(--radius-large);
}

.modal-dialog {
  margin: var(--spacing-4xl) auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xs) var(--spacing-l);
  border: none;
}

.modal-title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl);
  line-height: 1.4;
  /*margin: 0;*/
}

.modal-close {
  color: var(--gray-color);
  border-radius: var(--radius-circle);
  margin-right: -4px;
  min-height: var(--form-ele-medium);
  min-width: var(--form-ele-medium);
  padding: 5px 2px 1px 2px;
}

.modal-close:hover {
  color: var(--gray-dark-color);
  background: var(--hover-gray-color);
}

.modal-body {
  padding: var(--spacing-xs) var(--spacing-l);
}

.modal-footer {
  /*float: right;*/
  border: none;
  gap: var(--spacing);
  padding: var(--spacing-xs) var(--spacing-l) var(--spacing) var(--spacing-l);
}

.modal .btn {
  margin: 0;
}

/* Footer */

footer {
  background-color: var(--gray-color) !important;
  background-image: none !important;
  margin-top: 0 !important;
  /* min-height: 100vh; This is done so that the background color of the footer extends to cover any white space at the bottom of the page in case the page is shorter than the web browser window (one of my many improvements over the state's design system). */
  /* margin-top: var(--spacing-xl) !important; Consider removing this later */
}

footer h2 {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-semi-bold);
  color: #ffffff;
  /*margin-top: var(--spacing-l);*/
  margin-bottom: var(--spacing-xs);
}

footer div h2:not(:first-of-type) {
  margin-top: var(--spacing-l);
}

/*footer a {
  text-decoration: none;
}*/

/* Remove default underline */
main a, footer a {
  text-decoration: none !important;
}

/* Underline only the text portion on hover */
main a .link-text-only, footer a:hover .link-text-only {
  text-decoration: underline;
}

.pagination a .link-text-only {
  text-decoration: none;
}

/* (Except when the link is inside an <h2> tag) */
h2 a {
  box-shadow: none !important;
}

h2 a .link-text-only {
  text-decoration: none;
}

/* Prevent the icon from being underlined */
/*main a .utds-icon-external-link.link-text, footer a .utds-icon-external-link.link-text, main a .utds-icon-download.link-text, footer a .utds-icon-download.link-text {*/
.utds-icon-external-link.link-text, .utds-icon-download.link-text, span.utds-icon.utds-icon-external-link.link-text {
  text-decoration: none;
  /*display: inline-block; Reinstate this if it causes issues!*/
  /*vertical-align: middle; Reinstate this if it causes issues!*/
  /*margin-left: 0.15em;*/
  margin-left: var(--spacing-2xs);
  /*margin-left: 6px;*/
}

/* Default (mobile): sidebar appears first */
.container-sidebar-right {
  grid-area: top-b; /* This could also be top-a; I don't know. */
}

/*.container-component {
  order: 2;
}*/

.panelLeftSide, .panelRightSide {
  /*margin-top: var(--spacing-xl) !important;*/
  margin-bottom: 0 !important;
  /*padding-left: var(--spacing-xl);
  padding-right: var(--spacing);*/
}

.panelLeftSide {
  display: none;
}

.panelLeftSide ul, .panelLeftSide ol {
  /*padding-left: var(--spacing); Reinstate this if there's a problem somewhere.*/
  padding-bottom: 0;
}

.panelRightSide {
  border-left: 1px solid var(--gray-medium-light-color);
  position: sticky;
  top: 0;
  /*margin-top: var(--spacing-xl) !important;
  margin-bottom: 0 !important;
  padding-left: var(--spacing);
  padding-right: var(--spacing-xl);*/
}

/* Base style for right panel links */
#headings-output a {
  display: block;
  /*text-decoration: none;
  color: inherit;*/
}

/* Indentation by heading level for right panel links */
#headings-output a.level-2 {
  margin-left: 0;
}
#headings-output a.level-3 {
  margin-left: 1rem;
}
#headings-output a.level-4 {
  margin-left: 2rem;
}
#headings-output a.level-5 {
  margin-left: 3rem;
}
#headings-output a.level-6 {
  margin-left: 4rem;
}

/* Paragraphs / TH get one more indent than their parent heading (for right panel links) */
#headings-output a.level-p {
  margin-left: 1rem; font-style: italic;
}
#headings-output a.level-th {
  margin-left: 1rem; font-weight: bold;
}

/*.panelRightSide h3 { Doesn't work yet
  margin-left: var(--spacing);
}*/

.panelLeftSide a, .panelRightSide a, .panelSubmenu a, .panelLeftSide .mod-list li {
  color: var(--gray-color);
  text-decoration: none !important;
  /*padding: var(--spacing-2xs) 0;
  margin: var(--spacing-3xs) calc(0px - var(--spacing));*/
  /*margin-left: calc(0px - var(--spacing));
  margin-right: calc(0px - var(--spacing));*/
  border-radius: var(--radius-circle);
  transition: all var(--timing-quick) ease-in-out;
}

.panelLeftSide .mod-list li:hover {
  margin-left: calc(-1 * var(--spacing));
  padding-left: var(--spacing) !important;
  /*padding: 0 var(--spacing) !important;*/
  /*margin: calc(-1 * var(--spacing-3xs)) calc(0px - var(--spacing));*/
  /*margin: calc(-1 * var(--spacing-3xs)) 0 calc(-1 * var(--spacing-3xs)) calc(0px - var(--spacing));*/
}

.panelLeftSide p:hover, .panelRightSide p:hover, .panelLeftSide li:hover, .breadcrumbs a:hover, .breadcrumbLinks a:hover {
  box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
  /*color: var(--primary-color);*/
}

.breadcrumbLinks p {
  /*padding: var(--spacing-xs) var(--spacing) !important;*/
  margin-left: calc(var(--spacing) * -1);
}

.breadcrumbLinks a {
  padding: var(--spacing-xs) var(--spacing);
  border-radius: var(--radius-circle);
}

.panelLeftSide a:hover, .panelRightSide a:hover {
  color: var(--primary-color);
  /*border-radius: var(--radius-circle);
  transition: all var(--timing-quick) ease-in-out;*/
}

.panelLeftSide h2, .panelRightSide h2 {
  font-size: var(--font-size);
  font-weight: bold;
  margin-bottom: var(--spacing-2xs);
  line-height: 1.2;
}

.panelLeftSide p, .panelRightSide p/*, .panelLeftSide .panelSubmenu p, .panelLeftSide li a*/ {
  /*.line-height: 1.7;
  margin-bottom: var(--spacing);*/
  /*margin-left: calc(0px - var(--spacing));
  margin-right: calc(0px - var(--spacing));*/
  padding: var(--spacing-xs) var(--spacing) !important; /* The "important" is necessary here to override the menu padding. This property is problematic for the mobile menus. (It's been fixed!) */
  margin: var(--spacing-3xs) 0 var(--spacing-3xs) calc(0px - var(--spacing)); /* This property is problematic for the mobile menus. It must be overridden locally. (Fixed!) */
  font-size: var(--font-size-xs);
  border-radius: var(--radius-circle);
  transition: all var(--timing-quick) ease-in-out;
}

.panelLeftSide .mod-list li {
  margin: 1px 0;
}

.panelLeftSide li a {
  display: block;
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing) !important;
  margin: 1px 0 1px calc(0px - var(--spacing));
}

.panelLeftSide p:last-child, .panelRightSide p:last-child, .modal-body p:last-child, .footerDWR > div > p:last-of-type/*, .accordion:last-child*/ {
  margin-bottom: 0;
}

.panelSubmenu {
  border-left: 1px solid var(--gray-medium-light-color);
}

.panelLeftSide .panelSubmenu {
  padding-left: var(--spacing);
}

.vertical-menu .panelSubmenu {
  margin-left: var(--spacing-s);
}

.panelSubmenu p { /* Consider hiding it if it's not being used. */
  /*padding-left: var(--spacing-xl);*/
}

.panelLeftSideSelected p, .mod-articles-link.active {
  font-weight: bold;
  color: var(--primary-color) !important;
  box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
  border-radius: var(--radius-circle);
}

.panelLeftSideSelected p:hover {
  box-shadow: inset 0 0 0 1000px var(--hover-over-gray-color);
}

.back-to-top-link {
  background-color: rgba(0, 0, 0, 0);
  color: var(--gray-medium-light-color);
  text-decoration: none;
  border: 2px solid var(--gray-medium-light-color);
  border-radius: 100%;
  /*outline: 1px solid var(--gray-light-color);*/
  transition: margin-bottom .6s ease, opacity .3s ease;
  /*width: 1rem;
  height: 1rem;*/
  font-size: 1rem;
  line-height: 1rem;
  /*box-shadow: 0 0 3px var(--gray-light-color);*/
  text-shadow: 0 0 3px var(--gray-light-color);
  padding: var(--spacing-s) 14px;
}

.back-to-top-link:hover, .back-to-top-link:focus {
  /*background-color: rgba(0, 0, 0, 0);
  color: var(--gray-medium-color);
  border-color: var(--gray-medium-color);*/
}

.back-to-top-text-link {
  display: none;
}

.displayNone { /* Use this to hide any image or object*/
  display: none !important;
}

/* Calendars */

.calendarGoogle {
  /*border: none;*/
  width: 100%;
  max-width: var(--content-width-wide);
  height: 600px;
  overflow: hidden;
  margin-bottom: var(--spacing);
}

.calendarButtons {
  display: flex;
  gap: var(--spacing);
  margin-bottom: var(--spacing);
  flex-wrap: wrap;
}

[id^="calendar"].btn-outlined {
  border-color: var(--btn-color);
  color: var(--btn-color);
}

[id^="calendar"].btn-solid {
  background-color: var(--btn-color);
  border-color: var(--btn-color);
}

[id^="calendar"].btn-outlined:is(:hover, :active) {
  background-color: var(--btn-color);
  color: #ffffff;
}

[id^="calendar"].btn-solid:is(:hover, :active) {
  background-color: color-mix(in srgb, var(--btn-color) 70%, black);
  border-color: color-mix(in srgb, var(--btn-color) 70%, black);
  color: #ffffff;
}

.main-bottom.card, .main-bottom.no-card {
  margin-top: 0;
}

footer a:hover, footer a:hover .utds-icon-external-link.link-text {
  color: #ffffff;
}

.footerWrapper {
  width: 100%;
}

.socialMedia {
  background-color: #de4c2c;
  /*background-color: var(--primary-color); PERHAPS CHANGE THIS BACK?*/
  padding: 0 var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.socialMedia img {
  height: var(--font-size-5xl);
  width: auto;
  /*margin-left: 20px;
  margin-right: -20px;*/
}

.socialMedia p {
  margin: 0 var(--spacing) 0 0;
  /*position: relative;
  margin-top: var(--spacing-l);
  margin-top: -5px;
  margin-bottom: 0;*/
}

.socialMedia a img {
  /*padding: 10px;*/
  padding: var(--spacing-xs);
  box-sizing: border-box;
  /*margin-bottom: -7px;*/
}

.socialMedia a:hover/*, #searchHeaderButton:hover*/ {
  box-shadow: none !important;
}

.socialMedia a:hover img, /*#searchHeaderButton:hover, */#infoPanel .close-button:hover {
  /*background-color: var(--link-color-dark);*/
  background-color: #00000033;
  border-radius: var(--radius-circle);
}

.contactIcons {
  height: var(--font-size-5xl);
  /*width: auto;*/
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0;
  /*vertical-align: middle;*/
}

/*#linksFooter p, #newsFooter p {*/
.footerDWR div p { /* footerDWR should be an ID, not a class! */
  margin-bottom: var(--spacing-xs);
}

.footerDWR {
  display: flex;
  flex-flow: column wrap;
  /*gap: var(--spacing);*/
  column-gap: var(--spacing);
  padding: var(--spacing-xl);
}

#subscribeFooter {
  margin-bottom: calc(0px - var(--spacing-xl));
}

.footerUtah {
  /*display: flex;*/
  padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
}

.footerUtah hr {
  height: 1px;
  background-color: #ffffff;
  margin: 0 0 var(--spacing-l) 0;
  opacity: 1;
}

.footerColophon {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  /*align-items: center;*/
  gap: var(--spacing);
}

.footerState {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing);
}

.footerState > .utds-footer__vertical-divider {
  display: none;
}

.footerStateLinks {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center; /* This may not be necessary */
  gap: var(--spacing-s);
}

.footerStateLinks > .utds-footer__vertical-divider {
  border-left: 1px solid white;
  height: 33.53%;
}

/*.footerStateLinks div::after {
  content: "";
  width: 1px;
  height: 70%;
  background: white;
  display: block;
  margin-left: var(--spacing-s);
}*/

.footerStateLinks div p {
  margin: 0;
}

.homepageMainOptions {
  display: flex;
  flex-direction: column; /* stack vertically */
  text-align: center;
  align-items: center;
}

.homepageMainOptions h2 {
  text-transform: uppercase;
  /*font-variant-caps: small-caps;*/
}

.homepageMainOptions > div {
  flex: none; /* stop stretching */
  width: 100%; /* take full width */
  margin-bottom: var(--spacing-xl);
}

.homepageMainOptions > div img {
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* baseline */
  transition: filter var(--timing-medium-quick) ease;
  width: 50%;
}

.homepageMainOptions > div img:hover {
  filter: drop-shadow(0 0 var(--spacing-xs) var(--drop-shadow-color)) drop-shadow(0 0 var(--spacing) var(--drop-shadow-color-top));
}

.homepageFeaturedSection {
  width: 100vw;
  height: 400px;
  max-width: none;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-bottom: var(--spacing-xl);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.6);
}

.homepageFeaturedSection div {
  position: absolute;
  inset: 0;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(6px) brightness(60%);
}

.homepageFeaturedSectionItem {
  background-color: #ffffff;
  width: 100%;
  height: 400px;
  border: 1px solid var(--gray-color);
  margin-bottom: var(--spacing-4xl);
  margin-top: -368px;
  position: relative;
  display: grid;
  /*grid-template-columns: 1fr 1fr;*/
  align-items: center;
}

.homepageFeaturedSectionItem div:first-child {
  padding: var(--spacing-4xl);
}

.homepageFeaturedSectionItem div:last-child {
  height: 100%;
  background-position: center;
  background-size: cover;
}

@media screen and (min-width: 601px) { /* Desktop device adjustments */
  /* Home menu button fix */
  .metismenu-item.item-101.level-1.default.current.active {
    /*height: 47.2px;*/
    margin-bottom: 43.2px;
  }
  
  .desktopHidden { /* Hide an element in desktop view */
    display: none;
  }
  
  .menuMobile { /* Hide mobile menu in desktop view */
    display: none;
  }
  
  .container-header .container-nav, .main-menu__wrapper {
    padding: 0 var(--spacing-l) 0 var(--spacing-xs);
  }
  
  #utahIDHeaderMobile, #menuMobileWrapper {
    display: none;
  }
  
  .bannerTextbox {
    width: 60vw;
    height: 7.25rem;
    padding-right: 5rem;
  }

  .bannerTextbox.v2 {
    width: 30vw;
    height: 100%;
    padding-left: 11rem;
  }

  .bannerTextbox h1, .bannerTextbox p {
    font-size: var(--font-size-5xl) !important;
  }
  
  main {
    /* margin-top: 1em !important; YOU MIGHT WANT TO REINSTATE THIS! See if you can remove it entirely. */
    margin-top: 10px !important;
  }
  
  .site-grid {
    grid-gap: 0 var(--spacing-xl);
    /* grid-template-columns: none;
    grid-template-columns: auto; For some reason, this shifts everything over to the right on pages with only one "grid-child" class. */
    max-width: var(--content-width-wide);
    /* max-width: 1224px;  This width is mandated by the Design System, but they could allow 1432px */
    margin: 0 auto;
    /*padding: 0 var(--spacing-3xl);*/
  }
  
  .site-grid:has(> .container-component:first-child:last-child) .container-component {
    max-width: var(--content-width);
  }
  
  .site-grid:has(> .grid-child:first-child:not(:last-child)) { /* On pages with just one "grid-child" class (like the home page) you need to show the original template properties. This setting is for every other page with more than one "grid-child" class. */
    grid-template-columns: auto;
  }

  @supports (display:grid) {
    .site-grid>[class^=container-], .site-grid>[class*=\ container-] {
      max-width: var(--documentation-width);
    }
  }

  #system-message-container {
    margin-bottom: initial;
  }

  .blogAuthor {
    flex-flow: row nowrap;
    gap: var(--spacing-xl);
  }

  .guidebookCover {
    float: right;
    margin-left: var(--spacing-xl);
    margin-bottom: 0; /* Remove this once you start including "previous versions" and "updates" boxes. */
  }
  
  .container-sidebar-left {
    width: calc(var(--documentation-left-width) + 2 * var(--spacing-xl)) !important;
    min-width: var(--documentation-left-width);
  }
  
  .container-sidebar-right {
    grid-area: side-r;
    width: calc(var(--documentation-right-width) + 2 * var(--spacing-xl)) !important;
    min-width: var(--documentation-right-width);
    /* max-height: 100vh;
    overflow: auto; DON'T USE THIS; IT NULLIFIES THE STICKY PROPERTY. This may not be necessary, unless you have a longer sidebar than the page content. */
  }

  /*.container-component {
    order: 1;
  }*/

  .panelLeftSide {
    /*display: inherit; I'd prefer to leave it at this, but one module needs the setting to be "block". */
    display: block;
    border-right: 1px solid var(--gray-medium-light-color);
    /*padding: 56px var(--spacing-xl) var(--spacing-2xl) var(--spacing-xl);*/
  }

  .panelLeftSide ul {
    line-height: 1.4;
  }

  .panelRightSide {
    /*padding: 56px 0 var(--spacing-2xl) var(--spacing-xl);*/
  }
  
  .panelLeftSide, .panelRightSide {
    margin-bottom: inherit;
    margin-top: 0 !important;
    padding: 56px var(--spacing-xl) var(--spacing-2xl) var(--spacing-xl);
  }

  /* Image alignment classes */

  .align-left, .align-right, .align-center {
    max-width: 63%;
  }
  
  .align-left.vertical, .align-right.vertical, .align-center.vertical, .align-left.small-size, .align-right.small-size, .align-center.small-size {
    max-width: 35%;
  }

  .very-small-size {
    max-width: 17.5%;
  }
  
  .align-left {
    float: left;
    margin-right: var(--spacing);
  }
  
  .align-right {
    float: right;
    margin-left: var(--spacing);
  }

  .align-center {
    margin-left: auto;
    margin-right: auto;
  }
  
  .back-to-top-text-link {
    display: block;
  }

  .result__image {
    float: left;
    width: 15vw;
    /*margin-top: 0;*/
    margin-right: var(--spacing);
    margin-bottom: 0;
  }

  .featuredArticlesSectionVertical figure { /* Currently not used */
    float: left;
    margin-top: 0;
    margin-right: var(--spacing-xl);
    margin-bottom: 0;
    width: 15%;
    height: auto;
  }

  .mod-articles-grid {
    grid-gap: var(--spacing);
  }

  .card .card-body ul, .columnsTwo {/* In desktop view, split the news feed into two columns */
    column-count: 2;
    column-gap: var(--spacing-xl);
  }
  
  .cardHorizontal {
    flex-flow: row nowrap;
  }

  .columnsTwo div, .columnsTwo ul {
    break-inside: avoid;
  }
  
  #mod-custom120:has(.note) { /* This reduces the margin around the archived content notification box. */
    margin-bottom: calc(var(--spacing) * -1);
  }

  .mod-finder__search .awesomplete input {
    width: 50vw;
  }
  
  .mod-finder__search {
    display: grid;
    align-items: center;
  }
  
  #searchNowButton {
    display: none;
    position: absolute;
    right: var(--spacing);
    /*display: inline-flex;*/
  }
  
  footer div h2:first-of-type {

  }

  .footerDWR {
    flex-flow: row nowrap;
    justify-content: space-between;
  }
  
  #agencyFooter, #linksFooter, #photosFooter, #subscribeFooter {
    /*margin-bottom: 0;*/
  }
  
  .footerDWR > div:not(:last-child) {
    /*margin-right: var(--spacing-4xl);*/
  }

  .footerUtah {
    padding-bottom: var(--spacing-l);
  }
  
  .footerColophon {
    /*flex-flow: row wrap;*/
    justify-content: space-between;
  }
  
  .utds-footer__vertical-divider {
    border-left: 1px solid white;
    height: 70%;
  }
  
  .footerState > .utds-footer__vertical-divider {
    display: initial;
  }
  
  .footerStateLinks > .utds-footer__vertical-divider {
    height: 38.84%;
  }

    .homepageMainOptions {
    /*justify-content: space-evenly;*/
    flex-direction: row;
    align-items: flex-end;
    margin-top: var(--spacing-l);
    margin-bottom: var(--spacing-4xl);
  }

  .homepageMainOptions > div {
    flex: 1;
    width: auto;
    margin-bottom: 0;
  }

  .homepageMainOptions > div img {
    width: 30%;
  }

  .short-border-container {
    position: relative;
  }
  
  .short-border-container::before, .short-border-container::after {
    content: ''; /* Required for pseudo-elements */
    position: absolute; /* Positions the line relative to the container */
    top: 50%; /* Starts the line in the vertical center of the container */
    transform: translateY(-50%); /* Shifts the line up by half its height to perfectly center it */
    width: 1px; /* The thickness of the border */
    height: 80%; /* <-- **This is where you set the border's length** */
    background-color: var(--secondary-color-light); /* The border color */
  }

  .short-border-container::before {
    left: 0; /* Positions the line on the left edge */
  }

  .short-border-container::after {
    right: 0; /* Positions the line on the right edge */
  }

  .homepageFeaturedSectionItem {
    grid-template-columns: 1fr 1fr;
  }

  .homepageFeaturedSectionItem div:last-child {
    display: block;
  }
}

/* Qualtrics forms */

.formQualtrics {
  border: none;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-medium);
}

/*.QuestionText {
  display: none;
}*/