body {
  background: white;
  font-family: "arial";
  overflow: hidden;
  transform-origin: center top;
}

body.magnify-vp #page-container {
  position: relative;
}

#page-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 125px 583px 60px; /* 768px */
  overflow: hidden;
}

img, a {
    user-select: none;
    -webkit-user-drag: none;
}

#page-container #header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: white;
  border-bottom: 3px solid lightgrey;
}

#page-container #header .h-left {
  place-self: center start;
  margin-left: 50px;
}

#page-container #header .h-center {
  place-self: center;
}

#page-container #header .h-right {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  place-self: center end;
  margin-right: 50px;
}

#page-container #header #readiness.hide-readiness {
  display: none;
}

#page-container #header .h-right .admin-gear {
  margin-right: 8px;
}

#page-container #header .h-right #readiness-link,
#page-container #header .h-right #readiness-link:visited {
  font-family: ArialforDRC;
  font-weight: bold;
  font-size: 18px;
  color: #145C92;
  margin-right: 10px;
  cursor: pointer;
  padding: 2px
}

#page-container #header .h-right #readiness-link:focus,
#page-container #header .h-right #readiness-link:hover {
  border: 2px solid #145C92;
  border-radius: 3px;
  padding: 0px;
  outline: none;
}

#page-container #main-body {
  background-color: #f0f2f4;
  overflow-y: auto;
}

#page-container #main-body .portal-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* gap: 10px; */ /* Supported in chrome 84+ */
  font-family: ArialforDRC;
  font-size: 16px;
  color: #343434;
  margin-top: 20px;
}

#page-container #main-body .portal-breadcrumbs:empty {
  display: none;
}

#page-container #main-body .portal-breadcrumbs .crumb {
  margin: 0px 5px 0px 5px;
  text-decoration: none;
  white-space: nowrap;
}

#page-container #main-body .portal-breadcrumbs a.crumb:focus,
#page-container #main-body .portal-breadcrumbs a.crumb:hover {
  border: 2px solid #145C92;
  border-radius: 3px;
  padding: 0px;
  outline: none;
  margin: -2px 3px -2px 3px;
}

#page-container #main-body .portal-breadcrumbs .arrow {
  background: no-repeat center url("../images/portal/arrow_forward_black_18dp.svg");
  min-height: 18px;
  min-width: 18px;
  margin: 0px 5px 0px 5px;
}

#page-container #main-body .portal-breadcrumbs a.crumb,
#page-container #main-body .portal-breadcrumbs a.crumb:visited {
  color: #145192;
}

#page-container #main-body .portal-breadcrumbs a.crumb.disabled {
  color: #343434;
  opacity: 0.5;
  pointer-events: none;
}

#page-container #main-body h1.main-header {
  font-family: ArialforDRC;
  font-weight: bold;
  font-size: 24px;
  color: #262626;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0px;
}

#page-container #main-body h1.main-header:empty {
  display: none;
}

#page-container #main-body .portal-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* gap: 32px; */ /* Supported in chrome 84+ */
  margin: 4px auto 12.5px auto; /* 4px + 16px card margin = 20px */
  width: 388px; /* padding 28px x2, margin 16px x2, width 300px */
}

#page-container #main-body .portal-cards.card-two {
  width: 776px; /* padding 28px x4, margin 16px x4, width 300px x2 */
}

#page-container #main-body .portal-cards.card-three {
  width: 1164px; /* padding 28px x6, margin 16px x6, width 300px x3*/
}

#page-container #main-body .portal-cards .portal-card {
  place-self: center;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 3px 8px 1px rgba(9,30,66,.25);
  padding: 28px; /* TODO 32px Requested */
  margin: 16px; /* gap would be preferred if supported */
  text-align: center;
  text-decoration: none;
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 300px;
  color: black;
  cursor: pointer;
}

#page-container #main-body .portal-cards .portal-card * {
  pointer-events: none;
}

#page-container #main-body .portal-cards .portal-card.disabled {
  bcolor: currentColor;
  opacity: 0.5;
  pointer-events: none;
}

#page-container #main-body .portal-cards .portal-card.hide,
#page-container #main-body .portal-cards .portal-card.hide-link {
  display: none;
}

#page-container #main-body .portal-cards .portal-card:not(.disabled):hover,
#page-container #main-body .portal-cards .portal-card:not(.disabled):focus {
  box-shadow: 0 6px 16px 2px rgba(9,30,66,.25);
  border: 2px solid #145C92;
  outline: none;
  padding: 26px;
}

#page-container #main-body .portal-cards .portal-card:not(.disabled):active,
#page-container #main-body .portal-cards .portal-card.active:not(.disabled) {
  box-shadow: 0 3px 8px 1px rgba(9,30,66,.25);
  background-color: #e6f0ff;
}

#page-container #main-body .portal-card .title {
  font-family: ArialforDRC;
  font-weight: bold;
  font-size: 22px;
  color: #3d3d3d;
}

#page-container #main-body .portal-cards .portal-card:hover .title,
#page-container #main-body .portal-cards .portal-card:focus .title {
  color: #262626;
}

#page-container #main-body .portal-card .sub-title {
  font-family: ArialforDRC;
  font-size: 16px;
  color: #525252;
}

#page-container #footer {
  text-align: center;
}

#page-container #footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

#page-container #footer #back {
  grid-column: 1 / 1;
  align-self: start;
  justify-self: start;
  padding-left: 15px;
}

#page-container #footer .copyright-bottom {
  font-family: ArialforDRC;
  grid-column: 2 / 2;
  align-self: center;
  justify-self: center;
}

#page-container #footer #secure-browser-exit {
  grid-column: 3 / 3;
  align-self: start;
  justify-self: end;
  padding-right: 15px;
}

#page-container #footer #back.hide-back,
#page-container #footer #secure-browser-exit.hide-exit {
  display: none;
}

#page-container #footer .test-links a,
#page-container #footer .test-links a:visited {
  font-family: ArialforDRC;
  font-weight: bold;
  font-size: 24px;
  color: #145C92;
  text-decoration: none;
}

#page-container #footer #tutorial-link {
  font-size: 1.5em;
  white-space: nowrap;
}

#page-container #footer #tutorial-link a:visited {
  color: gold;
}