/*
  Mobile styles

*/
@media only screen and (max-width: 980px) {
  #page_wrapper #page-header #page-header-wrapper div#top {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  #top div.welcome {
    padding: 0;
    background: #262626;
    flex-grow: 1;
  }
  ul#navigation {
    margin: 0;
    flex-grow: 1;
  }
  #page-header-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  #page_wrapper #page-header {
    background: black!important;
  }
  #top-buttons {
    display: none;
  }
  #page_wrapper #page-header div#page-header-wrapper {
    margin: 0;
  }
  div#top > a {
    margin: 0 10px;
  }
  .column > :last-child {
    overflow: hidden;
  }
  select {max-width: 100%;}
  ul#navigation {
    float: none;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    position: relative;
    border-left: 0 none;
    background: repeating-linear-gradient(
      #7A7A7A,
      #666666 1px,
      #5A5A5A 2px,
      #484848 3.25em
    );
  }
  ul#navigation .ui-icon {
    position: static;
    margin: 0;
  }
  ul#navigation > li {
    position: static;
    display: flex;
    height: 3.25em;
  }
  ul#navigation li {
    height: auto!important;
    min-height: 30px!important;
  }
  ul#navigation > li > a.sf-with-ul,
  ul#navigation > li > a {
    display: flex;
    align-items: center;
    gap: 0.25em;
    padding: 0 8px;
    justify-content: space-between;
  }
  ul#navigation > li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    transform-origin: top center!important;
  }
  ul#navigation > li > ul li { position: static!important; }
  ul#navigation > li > ul ul { position: relative; left: 0!important; top: 0!important; overflow: hidden }
  ul#navigation ul li:not(:hover) > ul { display: none!important; }
  ul#navigation li:hover > ul { height: auto!important; }

  #top div.welcome {
    display: flex;
    overflow: auto;
    float: none;
    height: auto;
    padding: 0;
    min-width: 0;
    max-width: 100vw;
  }
  div#top .welcome a.btn {
    padding: 0.25em;
    margin: 0;
    display: flex;
    align-items: center;
    border-radius: 0;
  }
  div#top .welcome > a > span.ui-icon {
    position: static;
    padding: 0;
    margin: 0;
  }
  .welcome .note {
    display: none;
  }
  .welcome > a {
    white-space: nowrap;
    padding: 0;
  }
  .content-box-wrapper {
    overflow: auto;
  }
  #logonForm > table,
  .half > table,
  .content-box-wrapper > table,
  table.contentBox {
    display: grid;
  }
  div.accordion-content table.contentBox {
    width: auto;
    min-width: 0;
  }
  #logonForm > table > * > *:not(td),
  #logonForm > table > *,
  td.half > table > * > *:not(td),
  td.half > table > *,
  .content-box-wrapper > table > * > *:not(td),
  .content-box-wrapper > table > *,
  table.contentBox > * > *:not(td),
  table.contentBox > * {
    display: contents;
  }
  #logonForm > table > * > * > td,
  td.half > table > * > * > td,
  .content-box-wrapper > table > * > * > td,
  table.contentBox > * > * > td {
    display: block;
    width: auto!important;
    max-width: none;
    min-width: 0;
  }
  #logonForm label,
  #logonForm td { display: grid!important; gap: 0.5em }
  #logonForm input { width: auto!important }
  .preloader {
    display: none;
  }
  td:has(.hastable:only-child) {
    display: flex;
    overflow: auto;
  }
  .hastable {
    overflow: auto;
  }
  #page_wrapper > .alert {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #page_wrapper > .alert > span {
    padding: 0!important;
    display: flex;
  }
  #page_wrapper > .alert > span > .ui-icon {
    flex-shrink: 0;
  }
  [data-module] div.inputs div.column,
  [data-module] div.inputs {
    grid-template-columns: 1fr;
    grid-column: auto;
    gap: 0.5em;
  }
  .ui-dialog {
    max-width: calc(100vw - 2rem)!important;
  }
  nav.year-select {
    flex-wrap: nowrap!important;
    max-width: 100%;
  }
  nav.year-select span {
    white-space: nowrap;
  }
  #logonForm > table,
  table.mainTable { max-width: 100%!important; }
}