html, body, #up-app-root {
  height: 100%;
  width: 100%;
}

#account-menu {
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 1;
}


/* This rule is important, as it makes it easier to prove that an app scope
/* component does not have any overlapping elements from other app scopes. */
:where(#up-app-root *) {
  overflow: hidden;
}

/* This targets all the app scope root components and makes their background
/* color white by default, which is also done for security reasons. */
:where(#up-app-root .scope-root) {
  background-color: white;
}


/* Hide that error overlay for now */
/* #webpack-dev-server-client-overlay {
  display: none;
} */




/* #account-menu-header::after {
  content: "👤";
}
#account-menu-header {
  font-size: 30px;
  margin: 2px;
  padding: 0px 2px;
  border: 2px ridge lightblue;
  border-radius: 5px;
  background-color: rgb(240, 241, 245);
  box-shadow: 2px 2px 3px rgb(191, 191, 191);
} */

/* #account-menu-header::after {
  content: "≡";
  position: relative;
  top: -4px;
}
#account-menu-header {
  font-size: 30px;
  height: 45px;
  margin: 3px;
  padding: 0px 7px;
  border: 2px ridge lightblue;
  border-radius: 5px;
  background-color: rgb(240, 241, 245);
  box-shadow: 2px 2px 3px rgb(191, 191, 191);
} */


#account-menu-header {
  text-align: right;
}
#account-menu:not(.open) #account-menu-header:hover {
  cursor: pointer;
}
#account-menu-header img.general-user-icon {
  height: 40px;
  width: 40px;
}
#account-menu-header #user-icon {
  display: inline-block;
  background-color: darkgray;
  height: 40px;
  width: 40px;
  margin: 6px 6px 2px 6px;
  border-radius: 20px;
  box-shadow: 2px 2px 4px rgb(133, 133, 133),
    -1px -1px 2px rgb(165, 165, 165);
}
#account-menu:not(.open) #account-menu-header #user-icon:hover {
  box-shadow: 2px 2px 4px rgb(133, 133, 133),
    -1px -1px 2px rgb(165, 165, 165),
    0px 0px 10px rgb(27, 38, 27);
  cursor: pointer;
}
#account-menu-header #user-name-display {
  display: inline-block;
  margin: 6px 2px 2px 6px;
  color:rgb(67, 67, 255);
}

#account-menu .items {
  display: none;
}
#account-menu .items > :hover {
  cursor: pointer;
}
#account-menu.open .items {
  display: block;
  background-color: white;
  min-width: 300px;
  border: 2px solid lightblue;
  border-radius: 3px;
}


#account-menu.open:not(.logged-in) .items > .when-logged-in {
  /* display: none; */
  pointer-events: none;
  opacity: 0.4;
}
#account-menu.open.logged-in .items > .when-logged-out {
  /* display: none; */
  pointer-events: none;
  opacity: 0.4;
}


#account-menu.open .items > * {
  width: 100%;
  font-size: 14pt;
  border-bottom: 1px solid lightblue;
}
#account-menu.open .items > *:last-of-type {
  border-bottom: 0px solid blue;
}
#account-menu.open .items > *:hover {
  background-color: lightgray;
}
#account-menu.open .items > * > * {
  margin: 2px;
}


#account-menu.open ~ #up-app-root * {
  pointer-events: none;
  opacity: 0.8;
}


#overlay-page-container.open ~ * {
  display: none;
}


#overlay-page-container {
  display: none;
}

#overlay-page-container.open {
  width: 100%;
  height: 100%;
  display: inline-block;
  /* grid-template-columns: 1fr minmax(500px, 800px) 1fr;
  grid-template-rows: 1fr; */
}

#overlay-page-container.open > .page-content {
  position: relative;
  left: 30%;
  width: 40%;
}

#overlay-page-container.open > .page-content button {
  margin: 6px;
}


#overlay-page-container.open .go-back-button {
  font-size: 40px;
  padding: 10px;
  margin: 2px 7px;
}
#overlay-page-container.open .go-back-button::after {
  content: "➜";
  display: inline-block;
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
#overlay-page-container.open .go-back-button:hover {
  cursor: pointer;
}


#overlay-page-container.open dt:before {
  content: "";
  display: block;
}
#overlay-page-container.open dt:after {
  content: ":";
  margin-right: 0.4em;
}
#overlay-page-container.open dt, dd {
  display: inline;
}