/* Colors, sizes and the light/dark themes come from tokens.css (ADR 0022), loaded first. */
:root {
  scrollbar-color: var(--color-text-subtle) var(--color-chrome);
  scrollbar-width: thin;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-chrome);
  color: var(--color-text);
  font-family: var(--font-sans);
  height: 100vh;
  /* The visible viewport: on a phone, 100vh reaches behind the browser's own toolbar, hiding the bottom bar (#50). */
  height: 100dvh;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  /* The banner row is empty (no height) unless the elevation banner shows. */
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "header"
    "banner"
    "main"
    "footer";
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

a {
  color: var(--color-text);
}
a:visited {
  color:var(--color-text);
}
a:hover {
  color:var(--color-accent);
}

.MSOContent {
  background-color: var(--color-surface);
}

header.loadingHeader>#mainNav,
header.loadingHeader>#personalNav {
  display: none;
}

header {
  grid-area: header;
  padding: .5rem 1rem .25rem 1rem;
  display: flex;
  align-items: center;
  /* Its menus open over the page, including a page's own sticky parts (--z-sticky). A grid item, so no position. */
  z-index: var(--z-header);
}

#siteName {
  margin-right: 1rem;
}

/* The site menu (#50, #51): pages as plain links, menus of pages as mso-popover (hover where there's a mouse; tap,
   click or keyboard everywhere). A desktop shows each item's text; a phone shows its icon, in a bar along the bottom. */
#mainNav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  z-index: 1;
}

.navLink {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-sm);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
}

.navLink:hover,
.navLink:focus-visible {
  color: var(--color-accent);
}

.navLink:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

.navLink .bi,
.navMenu::part(icon) {
  display: none;
}

.navList {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 10rem;
}

.navList > li + li {
  margin-top: var(--space-2);
}

#personalNavSubMenuButton {
  display: none;
}

#personalNavSubMenu {
  display: inline;
}

.menuLink {
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 2px solid var(--color-chrome);
  display: block;
  /** width: 100%; **/ 
  margin-left: 0px;
  /** prevents link from overflowing menuItem drop-down. **/
}

.menuLink:hover,
.menuLink:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  outline: none;
}

#siteName {
  font-size: var(--text-xl);
}

#siteName:hover {
  color: var(--color-accent);
  cursor: pointer;
}

#notificationContainer {
  display:inline;
}

#notificationContainer:hover > mso-notification,
#notificationContainer:focus > mso-notification,
#notificationContainer:focus-within > mso-notification,
mso-notification:hover {
  display: flex
}

#notificationBell::before { 
  content: attr(data-count);
  width: 1rem;
  color: var(--color-accent);
  position: absolute;
  translate: 1rem;
  background-color:var(--color-bg);
  font-size: var(--text-sm);
  font-weight: bold;
  border-radius: .5rem;
}

mso-notification {
  display: none;
  flex-flow: column;
  gap: .5rem;
  align-items: end;
  position: absolute;
  translate: calc(-100% + 2rem);
  z-index: 1;
  white-space: unset;
  background-color: var(--color-chrome);
  padding:.5rem;
  border-radius: .25rem;
}

mso-notifier > mso-button {
  font-size: var(--text-md);
  margin-left: .25rem;
}

mso-notifier {
  width: fit-content;
  white-space: nowrap;
}

#personalNav {
  margin-left: auto;
}

#personalNavSubMenuContainer {
  display: inline;
}



#pageTitle {
  position: absolute;
  left: 0;
  top: 1rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: bolder;
  font-size: var(--text-3xl);
  text-transform: uppercase;
  color: var(--color-surface);
}

mso-main {
  padding: 2rem 3rem 0 5rem;
  margin: .25rem;
  grid-area: main;
  overflow: auto;
  scrollbar-width: thin;
  background-color: var(--color-bg);
  border-radius: .5rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

#main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

::part(component-loader),
.loader {
  width: 120px;
  height: 22px;
  border-radius: 40px;
  color: var(--color-accent);
  border: 2px solid;
  position: relative;
  overflow: hidden;
}
::part(component-loader)::before,
.loader::before {
  content: "";
  position: absolute;
  margin: 2px;
  width: 14px;
  top: 0;
  bottom: 0;
  left: -20px;
  border-radius: inherit;
  background: currentColor;
  box-shadow: -10px 0 12px 3px currentColor;
  clip-path: polygon(0 5%, 100% 0,100% 100%,0 95%,-30px 50%);
  animation: l14 1s infinite linear;
}
@keyframes l14 {
  100% {left: calc(100% + 20px)}
}

mso-form-controls,
mso-button {
  font-size: var(--text-lg);
  align-self: center;
}

.dynamicRowCtrl {
  font-size: var(--text-sm);
}

.formRow mso-button {
  margin-top: 1rem; /*lines up with form element that has top margin*/
}

/* The shell is a fixed frame (#main clips), so each page brings its own scrolling area. By default the page's root
   element is one; the page templates that scroll inside themselves (side-menu, the carousels) turn it off.
   The width classes below (.narrowContent, .constrainedSinglePanel) only set width. */
[slot="main-content"] {
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
}

side-menu[slot="main-content"],
mso-carousel[slot="main-content"] {
  overflow: hidden;
}

.narrowContent {
  margin:auto;
  max-width: var(--content-max);
  width:100%;
  display: flex;
  flex-direction: column;
}

.constrainedSinglePanel {
  margin: auto;
  max-width: var(--content-medium);
  width: 100%;
  display: flex;  
  flex-direction: column;
}

.dashboard {
  display: flex;
  gap: var(--dashboard-gap);
  flex-wrap: wrap;
}

.center-content{
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash1 {
  flex-basis: calc((100% / var(--dashboard-columns)) - var(--dashboard-gap) + (var(--dashboard-gap) / var(--dashboard-columns)));
}

.dash2 {
  flex-basis: calc(((100% / var(--dashboard-columns)) - var(--dashboard-gap) + (var(--dashboard-gap) / var(--dashboard-columns)))*2);
}

.dash3 {
  flex-basis: 100%;
}

footer {
  grid-area: footer;
  text-align: center;
  font-size: var(--text-xs);
  margin: .25rem 0 .5rem 0;
}

footer>address {
  width: 12rem;
  margin: auto;
}

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

.iconButton {
  border: none;
  background-color: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--text-lg);
}

.iconButton:focus-visible,
.iconButton:hover {
  color: var(--color-accent);
  outline: none;
}

.icon-button-primary,
.icon-button-warn {
  border-radius: .5rem;
  padding:.25rem;    
}

.icon-button-primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.icon-button-warn {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}


[role=tooltip] {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--color-text);
  color: var(--color-bg);
  padding: 5px;
  border-radius: 4px;
  font-size: var(--text-xs);
  pointer-events: none;
  z-index: 1;
}

.tooltipArrow {
  position: absolute;
  background: var(--color-text);
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  z-index: 1
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

#main svg{
  position: absolute;
  left:50%;
  top:50%;
  width: 10rem;
  height: 10rem;
  margin-left: -5rem;
  margin-top: -5rem;
}

/*
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4rem;
  height: 4rem;
  margin-top: -2rem;
  margin-left: -2rem;
  border-radius: 50%;
  border-top: 2px solid var(--color-accent);
  border-right: 2px solid transparent;
  animation: spinner .6s linear infinite;
}

.spinner {
  width: 5rem;
  height: 5rem;
}
*/

mso-table {
  display: flex;
}

.profilePic {
  aspect-ratio: 1/1;
  border: thin solid var(--color-chrome);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 2rem;
  width: 2rem;
  position: relative;
}

.cardContainer {
  display: flex;
  flex-wrap: wrap;
}

/*
person-card {
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  padding: .5rem;
  border:thin solid var(--color-surface);
  border-radius: .5rem;
  margin: .25rem;
  gap: 1rem
}

person-card .profilePic {
  margin-right: 1rem;
}

person-card .spinner:before {
  width: 2rem;
  height: 2rem;
  margin-top:-1rem;
  margin-left: -1rem;
}
*/

/*
#sideMenuContainer {
  display: flex;
  column-gap: 1rem;
  overflow: hidden;
}

#sideMenuColumn {
  flex-shrink: 0;
}

#sideMenuColumn, #sideContentColumn {
  overflow: auto;
  position: relative;
}

#sideMenu {
  padding: 0 3rem 0 2rem;
}

#sideMenu>ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#sideMenu>ul>li {
  padding: 1rem;
  margin-bottom: 2rem;
  width: 100%;
  border-color: var(--color-chrome);
  border-left: thin solid;
  border-right: thin solid;
  border-radius: .5rem;
}

#sideContentColumn {
  flex-grow: 1;
}

#sideContentColumn h2 {
  border-bottom: thin solid var(--color-chrome);
  margin-top: 4rem;
  margin-bottom: 0;
}

#sideContentColumn h2:first-child {
  margin-top: 0;
}

#sideContent {
  padding: .5rem 1rem 2em 1rem;
  margin-bottom: 2rem;
  background-color: var(--color-surface);
  display:none;
}

#sideMenuClose {
  position: absolute;
  top:-1.5rem;
  right: .5rem;
  display: none;
  transition: top .5s;
}

#sideMenuClose.sideContentShown {
  top: .5rem;
}
*/
.embededSideMenuControls {
  text-align: right;
  width: 100%;
  margin-top: 1.5rem;
}
.embededSideMenuControls > .menuLink {
  display: inline-block;
  margin: 0 .5rem;
  padding: 2px 5px;
  border-radius: 7px;
  background-color: var(--color-bg);
  border: thin solid var(--color-text-muted);
}

.menuContent {
  display: none;
}

dialog {
  background-color: var(--color-surface-raised);
}

::backdrop {
  background-color: var(--color-overlay);
}

.msoDialog {
  padding: 0;
  border: none;
  max-width: min(var(--content-narrow), calc(100% - 2 * var(--space-4)));
}

.msoDialog.fullScreen {
  width:100%;
  height:100%;
  max-width: unset;
  max-height: unset;
}

.dialogFlex {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.dialogHeader {
  background-color: var(--color-chrome);
  color: var(--color-text);
  font-size: var(--text-lg);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
}

.dialogForm,
.dialogContent {
  margin: var(--space-2) var(--space-6);
  color: var(--color-text);
  flex-grow:1;
}

.dialogForm:empty,
.dialogContent:empty {
  display: none;
}

.dialogClose {
  float:right;
}

.msoDialog.forcedModal .dialogClose,
.msoDialog.forcedModal .dialogCancel {
  display: none;
}

.dialogControls {
  margin-top: var(--space-2);
  padding: var(--space-2);
  text-align: right;
}

details > details {
  padding-left: 1rem;
}

details:first-child {
  padding-top: 0;
}

details > ul {
  margin: 0;
}

summary{
  position: relative;
  display: flex;
}

summary:hover {
  color: var(--color-accent);
  cursor: pointer;
}
summary::before {
  content: '';
  display: inline;
  border-top: 10px solid;
  border-inline: 7px solid transparent;
  align-self: center;
  margin-right: 1rem;
  transition: .2s;
}
details[open] > summary::before {
  transform: rotate(-180deg);
}

details:not([open]) > summary > mso-form-controls {
  display:none;
}

/*
 * A slide waiting for the server: <div class="slideLoader"><span class="loader"></span><p>Sending…</p></div> in the
 * slide body. While it shows, the body becomes a column and the loader centres in the space between the slide's
 * heading and its footer. Hide it with .hidden.
 */
[slot="slide-body"]:has(> .slideLoader:not(.hidden)) {
  display: flex;
  flex-direction: column;
}

.slideLoader {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  color: var(--color-text-muted);
}

/* A utility: always wins, so a component's own display rule can't undo it. */
.hidden {
  display: none !important;
}


table {
  width: auto;
  overflow: auto;
  flex: 1;
  display: grid;
  border-collapse: collapse;
}

thead,
tbody,
tr {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  border: thin solid var(--color-chrome);
}

th,
td {
  padding: .5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

th {
  position: sticky;
  top: 0;
  background: var(--color-chrome);
  text-align: left;
  font-weight: bold;
}

th:last-child {
  border: 0;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--color-accent);
  opacity: 0;
  width: 3px;
  cursor: col-resize;
}

.resize-handle:hover,
/* The following selector is needed so the handle is visible during resize even if the mouse isn't over the handle anymore */
.header--being-resized .resize-handle {
  opacity: 0.5;
}

th:hover .resize-handle {
  opacity: 0.3;
}

td {
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--color-text);
}

/*
tr:nth-child(even) td {
  background: var(--color-surface);
}
*/

/** really want to style these like the inputs 
select {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  outline: none;
}
*/

/*
@media screen and (orientation: landscape) and (max-height: 800px) {
  body {
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "header main"
      "footer main";
  }
  footer>address {
    width: 2rem;
    transition: all 2s;
  }
}
*/

@media screen and (max-height: 1000px) {  

}

@media screen and (max-width: 1600px) {
  .constrainedSinglePanel {
    max-width: 65vw;
  }
}

@media screen and (max-width: 1079px) {
  mso-main {
    padding: 2rem 1rem 0 5rem;
  }

  .formGrid {
    grid-template-columns: auto auto;
  }

  .constrainedSinglePanel {
    max-width: 80vw;
  }

}

@media screen and (max-width: 767px) {

  html {
    font-size: var(--text-sm);
  }

  .constrainedSinglePanel {
    max-width: 90vw;
  }

  #siteName {
    font-size: var(--text-xl);
  }

  #pageTitle {
    writing-mode: lr;
    transform: none;
    /**text-align: center; **/
    text-indent: 1rem;
    width: 100%;
    top:0;
    font-size: var(--text-xl);
  }
  
  mso-main {
    padding: 3em 1rem 0 1rem;
  }

  /* The site menu is a bar along the bottom (#50): opaque, over the footer's row, which is made exactly as tall so the
     bar never covers the page. Its menus open upwards (mso-popover flips when there's no room below). */
  #mainNav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--phone-bar-h);
    padding-bottom: env(safe-area-inset-bottom, 0);
    justify-content: space-evenly;
    gap: 0;
    background: var(--color-chrome);
    border-top: var(--border-width) solid var(--color-border);
    z-index: var(--z-header);
  }

  .navText,
  .navMenu::part(text) {
    display: none;
  }

  .navLink .bi,
  .navMenu::part(icon) {
    display: inline;
  }

  .navLink,
  .navMenu::part(button) {
    justify-content: center;
    min-width: var(--control-h-lg);
    min-height: var(--control-h-lg);
    font-size: var(--text-xl);
  }

  #paravantageCR {
    display: none;
  }

  footer {
    height: calc(var(--phone-bar-h) + env(safe-area-inset-bottom, 0));
    margin: 0;
  }

  .menuLink {
    font-size: var(--text-lg);
  }

  .navList > li + li {
    margin-top: var(--space-4);
  }

  mso-form-controls,
  mso-button {
    font-size: var(--text-xl);
  }

  #sideMenuClose {
    display: block;
  }

  .iconButton {
    font-size: var(--text-xl);
  }
  
}

@media screen and (max-width: 480px) {
  mso-main {
    padding: 3em .5rem .5rem;
  }

  .constrainedSinglePanel {
    max-width: 100%;
  }

  #personalNavSubMenuButton {
    display: unset;
  }

  #personalNavSubMenu {
    position: absolute;
    right: .5rem;
    display:none;
    flex-flow: column;
    z-index: 1;
    background-color: var(--color-chrome);
    padding:.5rem;
    border-radius: .25rem;
  }
  
  #personalNavSubMenuButton:focus-visible + #personalNavSubMenu,
  #personalNavSubMenuContainer:focus-within > #personalNavSubMenu {
    display:flex;
  }
}
/* The platform admin's elevation banner (identity spec, criterion 28). */
#elevationBanner {
  grid-area: banner;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.4rem 1rem;
  background: var(--color-elevation);
  color: var(--color-on-elevation);
  font-weight: bold;
}

#elevationBanner.hidden {
  display: none;
}