@import url("/web/styles/tailwind.css");
/* Breakpoints */
@font-face {
  font-family: "VAG Rounded";
  src: url("/public/fonts/vag-rounded-light.woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "VAG Rounded";
  src: url("/public/fonts/vag-rounded-bold.woff2");
  font-weight: bold;
  font-style: normal;
}
:root {
  /* Miscellaneous */
  --print-bleed-fix: -0.05cm;
  --header-icon-size: var(--w-10);
  --max-header-height: calc(var(--header-icon-size) + var(--w-2));
  --border: var(--gray-300);
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

details summary {
  cursor: pointer;
}

@media print {
  @page {
    margin-top: 1.5cm;
    margin-bottom: 1.5cm;
  }
  @page :first {
    margin: 0;
  }
  tfoot {
    display: table-row-group;
  }
  #safety-score,
  #accreditation {
    page-break-before: always;
  }
  .checklist-section {
    page-break-after: always;
  }
  table {
    box-shadow: none !important;
    border: 1px solid var(--gray-400);
  }
}
/* Used for general text content, where we aren't styling via Tailwind. */
.managed-content {
  line-height: 1.625em;
  color: #333;
  /* Fixes an issue where Contentful nests line items in paragraphs. */
}
.managed-content p {
  margin-bottom: 1.625rem;
}
.managed-content > *:last-child {
  margin-bottom: 0;
}
.managed-content a {
  color: #014a75;
  border-bottom: 1px solid rgba(17, 88, 129, 0.3882352941);
}
.managed-content h2,
.managed-content h3,
.managed-content .content-header {
  color: #006196;
  font-weight: bold;
}
.managed-content h2,
.managed-content h3 {
  margin: 1.625rem 0;
}
.managed-content h2 {
  font-family: "VAG Rounded", sans-serif;
  font-size: 1.5rem;
}
.managed-content code {
  background-color: #f5f5f5;
  padding: 0.1rem 0.2rem;
  border-radius: 0.2rem;
}
.managed-content ul,
.managed-content ol {
  list-style-position: inside;
  margin: 0 0 1.625em 3em;
}
.managed-content ul {
  list-style: square;
}
.managed-content ul ul {
  list-style: circle;
  margin-bottom: 0;
}
.managed-content li {
  margin: 0.5rem 0;
}
.managed-content ol {
  list-style: decimal;
}
.managed-content table {
  margin-bottom: 1.625rem;
}
.managed-content table,
.managed-content th,
.managed-content td {
  vertical-align: top;
}
.managed-content th,
.managed-content td {
  padding: var(--w-2) var(--w-4);
}
.managed-content thead th {
  vertical-align: middle;
}
.managed-content li > p {
  margin: 0;
}

.note {
  font-style: italic;
  color: #666;
}

.assessment-checklist header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.assessment-checklist header .scores .percentage {
  font-weight: bold;
  margin-left: 1em;
}

.supplement:last-of-type .body {
  border: none;
  margin-bottom: 0;
}

.details-with-indicator summary {
  list-style: none;
}
.details-with-indicator summary summary {
  position: relative;
  user-select: none;
}
.details-with-indicator summary summary::-webkit-details-marker, .details-with-indicator summary summary::marker {
  display: none;
}
.details-with-indicator summary summary .details-indicator {
  transform-origin: 50% 50%;
  transform: rotate(0deg);
  display: inline-block;
  transition: all 0.25s;
  position: absolute;
  right: calc(100% + 0.3em);
  top: 0.3em;
}
.details-with-indicator summary[open] summary .details-indicator {
  transform: rotate(90deg);
}

/* Breakpoints */
.report-navigation h3,
.report-navigation > a {
  padding: 0 0 0 0.5em;
}

.report-navigation > a > .label {
  padding: 0.5rem 0;
}

@media (min-width: 1024px) {
  .report-navigation > a > .label {
    padding: 0.5rem;
  }
  .report-sub-navigation {
    margin-left: 0.5em;
  }
  .report-navigation > a {
    position: relative;
    margin: 0;
  }
  .report-navigation > a,
  .report-navigation > a * {
    transition: all 0.4s;
  }
  .report-navigation-indicator {
    position: relative;
    display: inline-flex;
    height: 100%;
    width: 1rem;
    align-items: center;
    justify-content: center;
  }
  .report-navigation-indicator > span {
    width: 0.9rem;
    height: 0.9rem;
    border: 1px solid rgb(177, 177, 177);
    border-radius: 100%;
    background: white;
    z-index: 11;
  }
  .active .report-navigation-indicator > span,
  .before-active .report-navigation-indicator > span {
    background: rgb(4, 65, 106);
    border-color: rgb(4, 65, 106);
  }
  .report-navigation-indicator::before,
  .report-navigation-indicator::after,
  .report-sub-navigation:not(.last)::after {
    height: 50%;
    left: 0.5rem;
    margin-left: -1px;
    width: 0;
    position: absolute;
    border: 1px solid black;
    display: block;
    content: " ";
    z-index: 10;
  }
  a:first-of-type .report-navigation-indicator::before,
  a:last-of-type .report-navigation-indicator::after {
    display: none;
  }
  .report-navigation-indicator::before {
    top: 0;
  }
  .report-navigation-indicator::after {
    top: 50%;
  }
  .report-navigation-indicator::before,
  .report-sub-navigation:not(.last)::after,
  .report-navigation-indicator::after {
    border-style: dashed;
    border-color: rgb(206, 206, 206);
  }
  .active .report-navigation-indicator::before,
  .before-active .report-navigation-indicator::before,
  .before-active .report-navigation-indicator::after {
    border-color: rgb(111, 147, 171);
    border-style: solid;
  }
  .report-sub-navigation {
    position: relative;
  }
  .report-sub-navigation:not(.last)::after {
    top: 0;
    height: 100%;
  }
}
.definitions {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--gray-300);
  border-radius: var(--rounded-md);
}
.definitions th,
.definitions td {
  border-bottom: 1px solid var(--gray-300);
  padding: var(--w-4);
  text-align: left;
}
.definitions tr:last-of-type th,
.definitions tr:last-of-type td {
  border-bottom: none;
}
.definitions th {
  color: var(--royal-blue-lighter);
  font-weight: bold;
  font-size: var(--text-lg);
}

.status-icon.passed {
  color: var(--green);
}
.status-icon.failed {
  color: var(--warning-red);
}
.status-icon.mixed {
  color: var(--warning-red-lighter);
}
.status-icon.not-assessable {
  color: var(--slate-500);
}
.status-icon.not-answered {
  color: var(--royal-blue-lighter);
}

#report-cover {
  background-image: url("/public/images/three-lifeguards.webp");
  background-size: cover;
  background-position: center;
  margin-top: calc(var(--w-16) * -1);
}
#report-cover h1 {
  color: var(--royal-blue-lighter);
  font-size: var(--text-6xl);
  font-family: "VAG Rounded", sans-serif;
  padding-right: 60%;
}
@media print {
  #report-cover {
    margin-top: 2cm;
    border: 0.05cm solid white;
  }
}
#report-cover summary {
  background: white;
  width: 100%;
  padding: 5rem 2rem 0 2rem;
  line-height: 2rem;
  color: var(--royal-blue-lighter);
  margin-top: 300px;
  /*
    https://wave.novoselski.net/
    Width: 1200
    Height: 300
    Offset: 170
    Amplitude: 100
    Frequency: 0.7
    Phase: 150
    Points: 50
  */
  clip-path: polygon(100% 100%, 0% 100%, 0% 27.8%, 2% 26.45%, 4% 25.33%, 6% 24.45%, 8% 23.82%, 10% 23.45%, 12% 23.33%, 14% 23.47%, 16% 23.87%, 18% 24.52%, 20% 25.42%, 22% 26.57%, 24% 27.94%, 26% 29.54%, 28% 31.34%, 30% 33.34%, 32% 35.53%, 34% 37.87%, 36% 40.36%, 38% 42.98%, 40% 45.7%, 42% 48.51%, 44% 51.38%, 46% 54.3%, 48% 57.23%, 50% 60.15%, 52% 63.05%, 54% 65.9%, 56% 68.68%, 58% 71.36%, 60% 73.93%, 62% 76.37%, 64% 78.66%, 66% 80.77%, 68% 82.7%, 70% 84.43%, 72% 85.94%, 74% 87.23%, 76% 88.28%, 78% 89.09%, 80% 89.64%, 82% 89.94%, 84% 89.99%, 86% 89.77%, 88% 89.3%, 90% 88.58%, 92% 87.61%, 94% 86.4%, 96% 84.96%, 98% 83.3%, 100% 81.44%);
}
@media screen and (min-width: 640px) {
  #report-cover summary {
    margin-top: 400px;
  }
}
@media screen and (min-width: 1280px) {
  #report-cover summary {
    margin-top: 550px;
  }
}
@media print {
  #report-cover summary {
    margin-top: 10cm;
  }
}
@media print {
  #report-cover summary {
    margin: 7cm 0 var(--print-bleed-fix) 0;
    padding-top: 2cm;
  }
}

section[data-route=cover] > div {
  padding-left: 0;
  padding-right: 0;
}
section[data-route=cover] > div > footer {
  border-top: 0;
  padding: 0 var(--w-8) 0;
}

@media print {
  .page-header .wave {
    position: relative;
    top: var(--print-bleed-fix);
  }
}

.circular-progress .background {
  fill: var(--water-blue-lightest);
  stroke: white;
  stroke-width: 0.5px;
}
.circular-progress .progress {
  stroke: var(--water-blue);
}

#app-shell {
  background: #f3f4f6;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
}
#app-shell > header {
  display: flex;
  align-items: center;
  padding: var(--w-1) var(--w-8);
  max-height: var(--max-header-height);
}
#app-shell > header h1 {
  flex: 1;
  text-align: center;
  font-weight: bold;
  color: var(--royal-blue);
  font-size: var(--text-lg);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#app-shell > header > nav {
  flex: 1;
  display: flex;
  align-items: center;
}
#app-shell > header > nav:last-child {
  justify-content: flex-end;
}
#app-shell > header > nav > * {
  margin-left: var(--w-14);
}
#app-shell > header > nav > *:first-child {
  margin-left: 0;
}
#app-shell > header > nav.history .home-link.active {
  display: none;
}
#app-shell > header > nav.history svg {
  width: var(--w-6);
  color: var(--royal-blue-lighter);
}
#app-shell .sign-in {
  background-color: var(--warning-red);
  color: white;
  border-radius: var(--rounded-md);
  padding: var(--w-2) var(--w-3);
}
#app-shell .sign-in svg {
  width: var(--w-6);
  margin-right: var(--w-1);
}
#app-shell .sign-in,
#app-shell .connectivity-indicator {
  display: flex;
  align-items: center;
}
#app-shell .sign-in svg,
#app-shell .connectivity-indicator svg {
  width: var(--w-6);
  margin-right: var(--w-1);
}
#app-shell .sign-in summary,
#app-shell .connectivity-indicator summary {
  color: var(--slate-500);
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
}
#app-shell .sign-in nav,
#app-shell .connectivity-indicator nav {
  min-width: 16em;
}
#app-shell .menu {
  font-size: var(--text-base);
}
#app-shell .menu figure {
  --size: var(--header-icon-size);
  background-color: var(--orange);
  color: white;
  display: flex;
  border: 2px solid white;
  border-radius: var(--rounded-full);
  height: var(--size);
  width: var(--size);
  font-weight: bold;
  font-size: var(--text-sm);
  align-items: center;
  justify-content: center;
}
#app-shell .menu summary {
  list-style: none;
}
#app-shell .menu summary::-webkit-details-marker {
  display: none;
}
#app-shell .menu progress {
  display: none;
  appearance: none;
  width: 100%;
  height: 0.6rem;
}
#app-shell .menu progress[value] {
  display: inline-block;
}
#app-shell .menu progress::-webkit-progress-value, #app-shell .menu progress::-webkit-progress-bar {
  border-radius: var(--rounded-full);
  background-color: var(--slate-200);
}
#app-shell .menu progress::-webkit-progress-value {
  background-color: var(--water-blue);
}
#app-shell .menu progress::-moz-progress-bar {
  border-radius: var(--rounded-full);
  background-color: var(--water-blue);
}
#app-shell .menu nav {
  background: white;
  position: absolute;
  right: var(--w-8);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: var(--rounded-md);
  margin-top: var(--w-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 30;
}
#app-shell .menu nav button,
#app-shell .menu nav .button,
#app-shell .menu nav .item {
  white-space: nowrap;
  display: flex;
  padding: var(--w-3) var(--w-5);
}
#app-shell .menu nav .item {
  color: var(--slate-700);
}
#app-shell .menu nav .diagnostic {
  color: var(--slate-400);
}
#app-shell .menu nav button,
#app-shell .menu nav .button {
  text-align: left;
  color: var(--royal-blue-lighter);
}
#app-shell .menu nav button:hover,
#app-shell .menu nav .button:hover {
  background-color: var(--water-blue-lightest);
}
#app-shell .menu nav button:active,
#app-shell .menu nav .button:active {
  background-color: var(--royal-blue);
  color: white;
}
#app-shell .menu nav button.dangerous,
#app-shell .menu nav .button.dangerous {
  background-color: white;
  color: var(--warning-red);
}
#app-shell .menu nav button.dangerous:hover,
#app-shell .menu nav .button.dangerous:hover {
  background-color: rgba(255, 0, 0, 0.1);
}
#app-shell .menu nav button.dangerous:active,
#app-shell .menu nav .button.dangerous:active {
  background-color: var(--warning-red);
  color: white;
}
#app-shell main {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

#home {
  background: #f3f4f6;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}
#home .sign-in {
  margin: var(--w-16) 0;
}

#app-shell button, #app-shell .button, #app-shell input[type=button], #app-shell input[type=submit],
#home button,
#home .button,
#home input[type=button],
#home input[type=submit] {
  cursor: pointer;
  display: inline-flex;
  justify-content: space-between;
}
#app-shell button.primary, #app-shell .button.primary, #app-shell input[type=button].primary, #app-shell input[type=submit].primary,
#home button.primary,
#home .button.primary,
#home input[type=button].primary,
#home input[type=submit].primary {
  cursor: pointer;
  background-color: var(--royal-blue);
  color: white;
  padding: var(--w-2) var(--w-4);
  border-radius: var(--rounded-full);
  border: none;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.3);
}
#app-shell button.primary:hover:not(:disabled), #app-shell .button.primary:hover:not(:disabled), #app-shell input[type=button].primary:hover:not(:disabled), #app-shell input[type=submit].primary:hover:not(:disabled),
#home button.primary:hover:not(:disabled),
#home .button.primary:hover:not(:disabled),
#home input[type=button].primary:hover:not(:disabled),
#home input[type=submit].primary:hover:not(:disabled) {
  background-color: var(--royal-blue-lighter);
  box-shadow: var(--shadow-md);
}
#app-shell button.primary:active:not(:disabled), #app-shell .button.primary:active:not(:disabled), #app-shell input[type=button].primary:active:not(:disabled), #app-shell input[type=submit].primary:active:not(:disabled),
#home button.primary:active:not(:disabled),
#home .button.primary:active:not(:disabled),
#home input[type=button].primary:active:not(:disabled),
#home input[type=submit].primary:active:not(:disabled) {
  background-color: var(--dark-navy);
  box-shadow: var(--shadow-inner);
}
#app-shell button.primary:disabled, #app-shell .button.primary:disabled, #app-shell input[type=button].primary:disabled, #app-shell input[type=submit].primary:disabled,
#home button.primary:disabled,
#home .button.primary:disabled,
#home input[type=button].primary:disabled,
#home input[type=submit].primary:disabled {
  background-color: #93aabd;
}
#app-shell button.jumbo, #app-shell .button.jumbo, #app-shell input[type=button].jumbo, #app-shell input[type=submit].jumbo,
#home button.jumbo,
#home .button.jumbo,
#home input[type=button].jumbo,
#home input[type=submit].jumbo {
  cursor: pointer;
  background-color: var(--royal-blue);
  color: white;
  font-size: var(--text-xl);
  padding: var(--w-4) var(--w-8);
}
#app-shell button.jumbo:hover:not(:disabled), #app-shell .button.jumbo:hover:not(:disabled), #app-shell input[type=button].jumbo:hover:not(:disabled), #app-shell input[type=submit].jumbo:hover:not(:disabled),
#home button.jumbo:hover:not(:disabled),
#home .button.jumbo:hover:not(:disabled),
#home input[type=button].jumbo:hover:not(:disabled),
#home input[type=submit].jumbo:hover:not(:disabled) {
  background-color: var(--royal-blue-lighter);
  box-shadow: var(--shadow-md);
}
#app-shell button.jumbo:active:not(:disabled), #app-shell .button.jumbo:active:not(:disabled), #app-shell input[type=button].jumbo:active:not(:disabled), #app-shell input[type=submit].jumbo:active:not(:disabled),
#home button.jumbo:active:not(:disabled),
#home .button.jumbo:active:not(:disabled),
#home input[type=button].jumbo:active:not(:disabled),
#home input[type=submit].jumbo:active:not(:disabled) {
  background-color: var(--dark-navy);
  box-shadow: var(--shadow-inner);
}
#app-shell button.jumbo:disabled, #app-shell .button.jumbo:disabled, #app-shell input[type=button].jumbo:disabled, #app-shell input[type=submit].jumbo:disabled,
#home button.jumbo:disabled,
#home .button.jumbo:disabled,
#home input[type=button].jumbo:disabled,
#home input[type=submit].jumbo:disabled {
  background-color: #93aabd;
}
#app-shell button.primary, #app-shell button.jumbo, #app-shell .button.primary, #app-shell .button.jumbo, #app-shell input[type=button].primary, #app-shell input[type=button].jumbo, #app-shell input[type=submit].primary, #app-shell input[type=submit].jumbo,
#home button.primary,
#home button.jumbo,
#home .button.primary,
#home .button.jumbo,
#home input[type=button].primary,
#home input[type=button].jumbo,
#home input[type=submit].primary,
#home input[type=submit].jumbo {
  border-radius: var(--rounded-full);
  border: none;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.3);
}
#app-shell button.primary:hover, #app-shell button.jumbo:hover, #app-shell .button.primary:hover, #app-shell .button.jumbo:hover, #app-shell input[type=button].primary:hover, #app-shell input[type=button].jumbo:hover, #app-shell input[type=submit].primary:hover, #app-shell input[type=submit].jumbo:hover,
#home button.primary:hover,
#home button.jumbo:hover,
#home .button.primary:hover,
#home .button.jumbo:hover,
#home input[type=button].primary:hover,
#home input[type=button].jumbo:hover,
#home input[type=submit].primary:hover,
#home input[type=submit].jumbo:hover {
  box-shadow: 0 6px 10px -6px rgba(0, 0, 0, 0.8);
}
#app-shell button.primary:active, #app-shell button.jumbo:active, #app-shell .button.primary:active, #app-shell .button.jumbo:active, #app-shell input[type=button].primary:active, #app-shell input[type=button].jumbo:active, #app-shell input[type=submit].primary:active, #app-shell input[type=submit].jumbo:active,
#home button.primary:active,
#home button.jumbo:active,
#home .button.primary:active,
#home .button.jumbo:active,
#home input[type=button].primary:active,
#home input[type=button].jumbo:active,
#home input[type=submit].primary:active,
#home input[type=submit].jumbo:active {
  box-shadow: none;
}
#app-shell button svg, #app-shell .button svg, #app-shell input[type=button] svg, #app-shell input[type=submit] svg,
#home button svg,
#home .button svg,
#home input[type=button] svg,
#home input[type=submit] svg {
  width: var(--w-5);
  overflow: hidden;
}
#app-shell button.secondary, #app-shell .button.secondary, #app-shell input[type=button].secondary, #app-shell input[type=submit].secondary,
#home button.secondary,
#home .button.secondary,
#home input[type=button].secondary,
#home input[type=submit].secondary {
  display: flex;
  align-items: center;
  border: 1px solid var(--slate-300);
  border-radius: var(--rounded-md);
  padding: var(--w-2-half);
}
#app-shell button.secondary:hover:not(:disabled), #app-shell .button.secondary:hover:not(:disabled), #app-shell input[type=button].secondary:hover:not(:disabled), #app-shell input[type=submit].secondary:hover:not(:disabled),
#home button.secondary:hover:not(:disabled),
#home .button.secondary:hover:not(:disabled),
#home input[type=button].secondary:hover:not(:disabled),
#home input[type=submit].secondary:hover:not(:disabled) {
  border-color: var(--slate-400);
  color: var(--royal-blue-lighter);
  box-shadow: var(--shadow-md);
}
#app-shell button.secondary:active:not(:disabled), #app-shell .button.secondary:active:not(:disabled), #app-shell input[type=button].secondary:active:not(:disabled), #app-shell input[type=submit].secondary:active:not(:disabled),
#home button.secondary:active:not(:disabled),
#home .button.secondary:active:not(:disabled),
#home input[type=button].secondary:active:not(:disabled),
#home input[type=submit].secondary:active:not(:disabled) {
  background-color: var(--water-blue-lightest);
  box-shadow: var(--shadow-inner);
}
#app-shell button.secondary svg:first-child, #app-shell .button.secondary svg:first-child, #app-shell input[type=button].secondary svg:first-child, #app-shell input[type=submit].secondary svg:first-child,
#home button.secondary svg:first-child,
#home .button.secondary svg:first-child,
#home input[type=button].secondary svg:first-child,
#home input[type=submit].secondary svg:first-child {
  margin-right: var(--w-2);
}
#app-shell button.secondary svg:last-child, #app-shell .button.secondary svg:last-child, #app-shell input[type=button].secondary svg:last-child, #app-shell input[type=submit].secondary svg:last-child,
#home button.secondary svg:last-child,
#home .button.secondary svg:last-child,
#home input[type=button].secondary svg:last-child,
#home input[type=submit].secondary svg:last-child {
  margin-left: var(--w-2);
}
#app-shell button.secondary.small, #app-shell .button.secondary.small, #app-shell input[type=button].secondary.small, #app-shell input[type=submit].secondary.small,
#home button.secondary.small,
#home .button.secondary.small,
#home input[type=button].secondary.small,
#home input[type=submit].secondary.small {
  padding: var(--w-1) var(--w-2);
  font-size: var(--text-sm);
}
#app-shell button.dangerous:not(:disabled), #app-shell .button.dangerous:not(:disabled), #app-shell input[type=button].dangerous:not(:disabled), #app-shell input[type=submit].dangerous:not(:disabled),
#home button.dangerous:not(:disabled),
#home .button.dangerous:not(:disabled),
#home input[type=button].dangerous:not(:disabled),
#home input[type=submit].dangerous:not(:disabled) {
  background: var(--warning-red);
  color: white;
  border: white;
}
#app-shell button:disabled, #app-shell .button:disabled, #app-shell input[type=button]:disabled, #app-shell input[type=submit]:disabled,
#home button:disabled,
#home .button:disabled,
#home input[type=button]:disabled,
#home input[type=submit]:disabled {
  background-color: var(--slate-100);
  color: var(--slate-500);
  cursor: not-allowed;
}
#app-shell .form-field,
#home .form-field {
  display: flex;
  flex-direction: column;
  margin: var(--w-4) 0;
}
#app-shell .form-field.inline,
#home .form-field.inline {
  flex-direction: row;
  align-items: center;
}
#app-shell .form-field.inline > label,
#home .form-field.inline > label {
  margin-right: var(--w-8);
}
#app-shell .form-field.inline > input, #app-shell .form-field.inline > button, #app-shell .form-field.inline > .button,
#home .form-field.inline > input,
#home .form-field.inline > button,
#home .form-field.inline > .button {
  margin-left: var(--w-4);
}
#app-shell .inline-field-group,
#home .inline-field-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--w-3) 0;
}
#app-shell .inline-field-group .form-field,
#home .inline-field-group .form-field {
  margin: 0 var(--w-3) 0 0;
  flex: 1;
}
#app-shell .inline-field-group .form-field:last-of-type,
#home .inline-field-group .form-field:last-of-type {
  margin-right: 0;
}
#app-shell input[type=text], #app-shell input[type=date], #app-shell input[type=number], #app-shell input[type=number], #app-shell input[type=email], #app-shell input[type=tel],
#app-shell select,
#app-shell textarea,
#home input[type=text],
#home input[type=date],
#home input[type=number],
#home input[type=number],
#home input[type=email],
#home input[type=tel],
#home select,
#home textarea {
  border: 1px solid var(--slate-300);
  border-radius: var(--rounded-md);
  background-color: var(--slate-100);
}
#app-shell input[type=text]:focus, #app-shell input[type=date]:focus, #app-shell input[type=number]:focus, #app-shell input[type=number]:focus, #app-shell input[type=email]:focus, #app-shell input[type=tel]:focus,
#app-shell select:focus,
#app-shell textarea:focus,
#home input[type=text]:focus,
#home input[type=date]:focus,
#home input[type=number]:focus,
#home input[type=number]:focus,
#home input[type=email]:focus,
#home input[type=tel]:focus,
#home select:focus,
#home textarea:focus {
  background-color: white;
}
#app-shell input[type=text]:disabled, #app-shell input[type=date]:disabled, #app-shell input[type=number]:disabled, #app-shell input[type=number]:disabled, #app-shell input[type=email]:disabled, #app-shell input[type=tel]:disabled,
#app-shell select:disabled,
#app-shell textarea:disabled,
#home input[type=text]:disabled,
#home input[type=date]:disabled,
#home input[type=number]:disabled,
#home input[type=number]:disabled,
#home input[type=email]:disabled,
#home input[type=tel]:disabled,
#home select:disabled,
#home textarea:disabled {
  color: var(--slate-500);
}
#app-shell textarea,
#home textarea {
  height: 10em;
  margin: var(--w-2) 0;
}
#app-shell .actions,
#home .actions {
  display: flex;
  justify-content: flex-end;
}
#app-shell .actions button, #app-shell .actions .button, #app-shell .actions input[type=button], #app-shell .actions input[type=submit],
#home .actions button,
#home .actions .button,
#home .actions input[type=button],
#home .actions input[type=submit] {
  margin-left: var(--w-2);
  display: flex;
  align-items: center;
}
#app-shell .actions button svg:last-child, #app-shell .actions .button svg:last-child, #app-shell .actions input[type=button] svg:last-child, #app-shell .actions input[type=submit] svg:last-child,
#home .actions button svg:last-child,
#home .actions .button svg:last-child,
#home .actions input[type=button] svg:last-child,
#home .actions input[type=submit] svg:last-child {
  margin-left: var(--w-2);
}
#app-shell .actions button svg:first-child, #app-shell .actions .button svg:first-child, #app-shell .actions input[type=button] svg:first-child, #app-shell .actions input[type=submit] svg:first-child,
#home .actions button svg:first-child,
#home .actions .button svg:first-child,
#home .actions input[type=button] svg:first-child,
#home .actions input[type=submit] svg:first-child {
  margin-right: var(--w-2);
}
#app-shell .actions button[type=submit],
#app-shell .actions input[type=submit],
#app-shell .actions .primary,
#home .actions button[type=submit],
#home .actions input[type=submit],
#home .actions .primary {
  cursor: pointer;
  background-color: var(--royal-blue);
  color: white;
  font-size: var(--text-lg);
  border-radius: var(--rounded-lg);
  padding: var(--w-2) var(--w-4);
}
#app-shell .actions button[type=submit]:hover:not(:disabled),
#app-shell .actions input[type=submit]:hover:not(:disabled),
#app-shell .actions .primary:hover:not(:disabled),
#home .actions button[type=submit]:hover:not(:disabled),
#home .actions input[type=submit]:hover:not(:disabled),
#home .actions .primary:hover:not(:disabled) {
  background-color: var(--royal-blue-lighter);
  box-shadow: var(--shadow-md);
}
#app-shell .actions button[type=submit]:active:not(:disabled),
#app-shell .actions input[type=submit]:active:not(:disabled),
#app-shell .actions .primary:active:not(:disabled),
#home .actions button[type=submit]:active:not(:disabled),
#home .actions input[type=submit]:active:not(:disabled),
#home .actions .primary:active:not(:disabled) {
  background-color: var(--dark-navy);
  box-shadow: var(--shadow-inner);
}
#app-shell .actions button[type=submit]:disabled,
#app-shell .actions input[type=submit]:disabled,
#app-shell .actions .primary:disabled,
#home .actions button[type=submit]:disabled,
#home .actions input[type=submit]:disabled,
#home .actions .primary:disabled {
  background-color: #93aabd;
}
#app-shell .radio-group,
#home .radio-group {
  margin: var(--w-2) 0;
  color: var(--royal-blue-lighter);
}
#app-shell .radio-group .label,
#home .radio-group .label {
  color: black;
  margin-right: var(--w-4);
}
#app-shell .radio-group label,
#home .radio-group label {
  display: inline-block;
  cursor: pointer;
  border: 1px solid var(--slate-300);
  border-radius: var(--rounded-full);
  background-color: white;
  margin: var(--w-1) var(--w-3) var(--w-1) 0;
  padding: var(--w-2) var(--w-6);
}
#app-shell .radio-group label:hover,
#home .radio-group label:hover {
  box-shadow: var(--shadow-md);
}
#app-shell .radio-group label:active,
#home .radio-group label:active {
  box-shadow: var(--shadow-inner);
}
#app-shell .radio-group label input,
#home .radio-group label input {
  display: none;
}
#app-shell .radio-group label:has(:checked),
#home .radio-group label:has(:checked) {
  background-color: var(--royal-blue);
  box-shadow: var(--shadow-inner);
  border-color: transparent;
  color: white;
}
#app-shell .radio-group label.status-completed:has(:checked),
#home .radio-group label.status-completed:has(:checked) {
  background-color: var(--green);
}
#app-shell .radio-group label.status-in-progress:has(:checked),
#home .radio-group label.status-in-progress:has(:checked) {
  background-color: var(--warning-yellow);
}
#app-shell dialog,
#home dialog {
  --close-icon-size: var(--w-6);
  --close-icon-padding: var(--w-2);
  position: relative;
  padding: calc((var(--close-icon-size) + var(--close-icon-padding)) / 2);
  background: transparent;
  min-width: 50%;
  max-height: 80%;
}
#app-shell dialog .modal,
#home dialog .modal {
  background-color: white;
  box-shadow: var(--shadow-lg);
  padding: var(--w-4) var(--w-8) var(--w-6);
  border-radius: var(--rounded-md);
  overflow: auto;
}
#app-shell dialog h2,
#home dialog h2 {
  color: var(--royal-blue-lighter);
  font-size: var(--text-4xl);
  font-weight: bold;
  font-family: "VAG Rounded", sans-serif;
}
#app-shell dialog::backdrop,
#home dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}
#app-shell dialog .close,
#home dialog .close {
  background-color: var(--royal-blue);
  border-radius: var(--rounded-full);
  color: white;
  position: absolute;
  top: 0;
  right: 0;
  padding: var(--w-2);
  box-shadow: var(--shadow-md);
}
#app-shell dialog .close svg,
#home dialog .close svg {
  width: var(--close-icon-size);
  height: var(--close-icon-size);
}

.select-search-container {
  position: relative;
}
.select-search-container.select-search-has-focus .select-search-input {
  background-color: white;
  border-radius: var(--rounded-md) var(--rounded-md) 0 0;
}

.select-search-input {
  background-color: var(--slate-100);
  border: 1px solid var(--slate-300);
  border-radius: var(--rounded-md);
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  outline: none;
  text-overflow: ellipsis;
}

.select-search-select {
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--slate-300);
  overflow: auto;
  max-height: 18rem;
  border-radius: 0 0 var(--rounded-md) var(--rounded-md);
}

.select-search-container .select-search-select {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  display: none;
}

.select-search-option {
  background-color: white;
  display: block;
  width: 100%;
  padding: var(--w-2) var(--w-4);
  text-align: left;
  cursor: pointer;
}

.select-search-is-highlighted,
.select-search-option:hover {
  background-color: var(--water-blue);
  color: white;
}

.select-search-container.select-search-has-focus .select-search-select {
  display: block;
}

.select-search-options {
  list-style: none;
}

.assessment-editor-form,
#assessment-editor {
  width: 100vw;
  display: flex;
  flex-grow: 1;
  height: 100%;
}

#assessment-editor {
  flex-direction: row;
}
#assessment-editor,
#assessment-editor .outlet,
#assessment-editor .navigation {
  max-height: calc(100vh - var(--max-header-height));
}
#assessment-editor .outlet {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
#assessment-editor h2 {
  font-weight: bold;
  color: var(--royal-blue-lighter);
  font-size: var(--text-xl);
}
#assessment-editor .pane {
  padding: var(--w-4) var(--w-8);
  background: white;
}
#assessment-editor .pane.standalone {
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-lg);
  min-width: 50%;
  overflow: auto;
}
#assessment-editor .pane.primary {
  background-attachment: local;
  flex: 1;
  width: 100%;
  max-height: 100%;
  overflow-y: scroll;
  border-top: 1px solid var(--border);
}
#assessment-editor .pane header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#assessment-editor .pane h2 {
  font-family: "VAG Rounded", sans-serif;
  font-weight: bold;
  font-size: var(--text-3xl);
}
#assessment-editor .asessable-section header {
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--w-4);
  margin-bottom: var(--w-4);
}
#assessment-editor .section-settings {
  display: flex;
  align-items: center;
  margin: var(--w-4) 0;
}
#assessment-editor .section-settings .fields {
  color: var(--slate-500);
  margin: 0 var(--w-2);
  flex: 1;
  display: flex;
  align-items: center;
}
#assessment-editor .section-settings .position *:first-child {
  margin-right: var(--w-px);
}
#assessment-editor .section-settings .section-name {
  padding: var(--w-2) var(--w-2);
  margin-right: var(--w-2);
  color: black;
  flex: 3;
}
#assessment-editor .section-settings .hint {
  font-size: var(--text-sm);
  flex: 2;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#assessment-editor .section-settings button {
  border: 1px solid var(--slate-300);
  border-radius: var(--rounded-md);
  padding: var(--w-2-half);
  text-align: center;
}
#assessment-editor pre {
  max-width: 70vw;
  overflow: scroll;
}
#assessment-editor .note {
  font-style: normal;
}
#assessment-editor .navigation-blocked {
  background-color: var(--warning-red-lighter);
  color: white;
  width: 100%;
}
#assessment-editor .navigation-blocked p {
  margin-bottom: 1em;
}
#assessment-editor .navigation-blocked .note {
  color: white;
  font-size: var(--text-sm);
}

#assessment-editor .navigation {
  max-height: calc(100vh - var(--max-header-height));
  width: 20%;
}
#assessment-editor .navigation a,
#assessment-editor .navigation button {
  padding: var(--w-2) var(--w-4);
}
#assessment-editor .navigation,
#assessment-editor .navigation .upper,
#assessment-editor .navigation .lower {
  display: flex;
  border-color: var(--border);
  border-style: solid;
}
#assessment-editor .navigation,
#assessment-editor .navigation .upper {
  flex-direction: column;
}
#assessment-editor .navigation .upper {
  border-top-width: 1px;
  overflow-y: auto;
  flex: 1;
}
#assessment-editor .navigation .upper a {
  font-family: "VAG Rounded", sans-serif;
  font-weight: bold;
  font-size: var(--text-lg);
  color: var(--royal-blue-lighter);
  border-style: solid;
  border-color: transparent;
  border-width: 1px 0;
  border-right: 1px solid var(--border);
}
#assessment-editor .navigation .upper a:first-of-type {
  border-top-width: 0;
}
#assessment-editor .navigation .upper a.active {
  background-color: white;
  border-color: var(--border);
  border-width: 1px 0;
  cursor: default;
}
#assessment-editor .navigation .upper a.active:first-of-type {
  border-top-width: 0;
}
#assessment-editor .navigation .upper a.active:hover {
  background: white;
}
#assessment-editor .navigation .upper a:hover {
  --hover-color: var(--slate-200);
  background: var(--hover-color);
}
#assessment-editor .navigation .upper a.section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#assessment-editor .navigation .upper a.section svg {
  flex: 0 0 var(--w-8);
  margin-left: var(--w-2);
}
#assessment-editor .navigation .upper a.section.completed svg {
  color: var(--green);
}
#assessment-editor .navigation .upper::after {
  content: "";
  display: flex;
  flex: 1;
  border-right: 1px solid var(--border);
}
#assessment-editor .navigation .lower {
  border-width: 1px 1px 0 0;
  flex-direction: column;
  padding: var(--w-2);
}
#assessment-editor .navigation .lower a,
#assessment-editor .navigation .lower button {
  border-radius: var(--rounded-md);
  display: flex;
  flex: 1;
  align-items: center;
  white-space: nowrap;
  justify-content: start;
  padding: var(--w-2) var(--w-4);
  margin: var(--w-1);
  cursor: pointer;
}
#assessment-editor .navigation .lower a:hover:not(:disabled),
#assessment-editor .navigation .lower button:hover:not(:disabled) {
  background: var(--slate-50);
  box-shadow: var(--shadow-md);
}
#assessment-editor .navigation .lower a:active:not(:disabled),
#assessment-editor .navigation .lower button:active:not(:disabled) {
  color: white;
  background: var(--slate-400);
  box-shadow: var(--shadow-inner);
}
#assessment-editor .navigation .lower a.active:not(:disabled),
#assessment-editor .navigation .lower button.active:not(:disabled) {
  color: white;
  background-color: var(--slate-500);
  box-shadow: var(--shadow-inner);
}
#assessment-editor .navigation .lower svg {
  width: var(--w-5);
  margin-right: var(--w-2);
}

.assessable-section header {
  margin-bottom: var(--w-6);
}
.assessable-section header .score {
  display: flex;
  color: var(--royal-blue-lighter);
  font-weight: bold;
  align-items: center;
}
.assessable-section header .percentage {
  font-size: var(--text-lg);
  margin-left: var(--w-2);
}

#assessment-editor .question {
  --ordinal-label-size: var(--w-12);
  --status-color: var(--water-blue);
  display: flex;
}
#assessment-editor .question.fully-answered.status-not-assessable {
  --status-color: var(--slate-500);
  opacity: 0.5;
}
#assessment-editor .question.fully-answered.status-failed {
  --status-color: var(--warning-red);
}
#assessment-editor .question.fully-answered.status-passed {
  --status-color: var(--green);
}
#assessment-editor .question.fully-answered.status-mixed {
  --status-color: var(--warning-orange);
}
#assessment-editor .question .ordinal-label {
  border-radius: var(--rounded-full);
  width: var(--ordinal-label-size);
  height: var(--ordinal-label-size);
  background-color: var(--status-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
  z-index: 1;
  font-weight: bold;
  font-size: var(--text-sm);
}
#assessment-editor .question .ordinal-label svg {
  width: var(--w-5);
}
#assessment-editor .question .response {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--status-color);
  margin-left: calc(var(--ordinal-label-size) / -2);
  padding-left: calc(var(--ordinal-label-size) / 2 + var(--w-4));
  padding-top: var(--w-2);
  padding-bottom: var(--w-8);
}
#assessment-editor .question .response .details-icon {
  margin-left: var(--w-1);
}
#assessment-editor .question .response .details-icon.when-closed {
  display: inline-flex;
}
#assessment-editor .question .response .details-icon.when-open {
  display: none;
}
#assessment-editor .question .response[open] .details-icon.when-open {
  display: inline-flex;
}
#assessment-editor .question .response[open] .details-icon.when-closed {
  display: none;
}
#assessment-editor .question .response > summary {
  display: flex;
  justify-content: space-between;
}
#assessment-editor .question .response > summary::-webkit-details-marker {
  display: none;
}
#assessment-editor .question .text {
  font-weight: bold;
  font-size: var(--text-lg);
}
#assessment-editor .question .text svg {
  color: var(--slate-500);
  width: var(--w-5);
}
#assessment-editor .question .score {
  margin-left: var(--w-4);
  display: flex;
  align-items: center;
}
#assessment-editor .question .score .badge {
  background-color: var(--slate-100);
  border-radius: var(--rounded-full);
  color: var(--slate-600);
  padding: var(--w-1) var(--w-2);
  letter-spacing: 0.1ch;
}
#assessment-editor .question .score .numerator {
  font-weight: bold;
  font-size: var(--text-lg);
}
#assessment-editor .question:last-of-type .response {
  border: none;
}
#assessment-editor .question .response > .text {
  font-size: var(--text-lg);
  font-weight: bold;
}
#assessment-editor .question .radio-group label.status-passed:has(:checked) {
  background-color: var(--green);
}
#assessment-editor .question .radio-group label.status-failed:has(:checked) {
  background-color: var(--warning-red);
}
#assessment-editor .question .radio-group label.priority-high:has(:checked) {
  background-color: var(--warning-red);
}
#assessment-editor .question .radio-group label.priority-medium:has(:checked) {
  background-color: var(--warning-orange);
}
#assessment-editor .question .radio-group label.priority-low:has(:checked) {
  background-color: var(--warning-yellow);
}
#assessment-editor .question .form-field {
  background: white;
  border-radius: var(--rounded-md);
  padding: var(--w-2) var(--w-4);
  border: 1px solid var(--slate-300);
}
#assessment-editor .question .form-field > label,
#assessment-editor .question .form-field details summary {
  color: black;
  font-weight: bold;
}
#assessment-editor .question .criterion {
  --icon-width: var(--w-5);
  --icon-spacing: var(--w-1);
  display: flex;
  align-items: center;
  padding: 0 var(--w-2);
}
#assessment-editor .question .criterion:nth-child(even) {
  background-color: var(--slate-50);
}
#assessment-editor .question .criterion .status-icon {
  width: var(--icon-width);
  margin-right: var(--icon-spacing);
}
#assessment-editor .question .criterion.status-not-assessable {
  opacity: 0.5;
}
#assessment-editor .question .criterion.status-not-answered {
  color: var(--royal-blue-lighter);
}
#assessment-editor .question .criterion .text {
  flex: 2;
}
#assessment-editor .question .criterion .status-options {
  flex: 3;
}
#assessment-editor .question .criterion.apply-all {
  opacity: 0.7;
}
#assessment-editor .question .criterion.apply-all .text {
  margin-right: calc(var(--icon-width) + var(--icon-spacing));
  font-weight: bold;
}
#assessment-editor .question .tags {
  margin: var(--w-2) 0;
}
#assessment-editor .question .tags > span {
  margin-right: var(--w-4);
}
#assessment-editor .question .priority-high {
  color: var(--warning-red);
}
#assessment-editor .question .priority-medium {
  color: var(--warning-orange);
}
#assessment-editor .question .priority-low {
  color: var(--warning-yellow);
}
#assessment-editor .question .form-field details summary {
  font-weight: bold;
}
#assessment-editor .question .form-field details[open] summary {
  margin-bottom: var(--w-2);
}
#assessment-editor .question .references {
  color: var(--slate-700);
  white-space: pre-line;
}
#assessment-editor .question > *:last-child::after {
  content: "";
  margin-top: var(--w-4);
  border-bottom: 1px dashed var(--border);
}
#assessment-editor .question .photo-reel {
  display: flex;
  flex-wrap: wrap;
  margin: var(--w-2) 0;
}
#assessment-editor .question .photo-actions {
  margin: var(--w-2) 0;
}
#assessment-editor .question button.add-photo {
  padding: var(--w-3) var(--w-5);
  border-radius: var(--rounded-full);
}
#assessment-editor .question .photo {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: var(--w-2);
}
#assessment-editor .question .photo .loading-indicator {
  position: absolute;
  flex-grow: 1;
  z-index: -1;
}
#assessment-editor .question .photo figure img {
  border: 1px solid var(--border);
  padding: var(--w-2);
  min-height: 10vh;
  max-height: 70vh;
  box-shadow: var(--shadow-md);
}
#assessment-editor .question .photo figure .remove {
  --size: var(--w-7);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: calc(var(--size) * -0.5);
  right: calc(var(--size) * -0.5);
  width: var(--size);
  height: var(--size);
  background-color: var(--royal-blue);
  color: white;
  border-radius: 100%;
  z-index: 20;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.3);
}
#assessment-editor .question .photo figure .remove:hover {
  box-shadow: 0 6px 10px -6px rgba(0, 0, 0, 0.8);
}
#assessment-editor .question .photo figure .remove:active {
  box-shadow: none;
}

#assessment-editor .settings .facility-preview {
  font-size: var(--text-sm);
  margin-top: var(--w-2);
  display: flex;
  color: var(--slate-600);
  justify-content: space-between;
  align-items: center;
}
#assessment-editor .settings .facility-preview .status {
  border: 1px solid;
  border-radius: var(--rounded);
  padding: var(--w-half) var(--w-2);
  margin-right: var(--w-2);
}
#assessment-editor .settings .facility-preview .status.new {
  color: var(--green);
}
#assessment-editor .settings .facility-preview .status.edited {
  color: var(--warning-orange);
}
#assessment-editor .settings .facility-preview .details {
  margin-right: var(--w-2);
}
#assessment-editor .settings .facility-preview button {
  margin-left: auto;
}
#assessment-editor .sections-settings {
  border-top: 1px solid var(--slate-300);
  margin-top: var(--w-8);
  padding-top: var(--w-8);
}
#assessment-editor .sections-settings .list-actions {
  display: flex;
  align-items: center;
}
#assessment-editor .sections-settings .list-actions .conjunction {
  margin: 0 var(--w-2);
  color: var(--slate-600);
}
#assessment-editor .completion {
  border-top: 1px solid var(--border);
  padding-top: var(--w-8);
}
#assessment-editor .completion .stats {
  display: flex;
  justify-content: space-between;
}
#assessment-editor .completion .stats .value {
  display: inline-block;
  margin-right: var(--w-1);
}
#assessment-editor .completion .stats .icon {
  width: var(--w-6);
  margin-left: var(--w-1);
  display: inline-block;
  vertical-align: bottom;
}
#assessment-editor .completion .stats .warning {
  color: var(--warning-red);
}
#assessment-editor .completion .stats .success {
  color: var(--green);
}
#assessment-editor .completion .stats .secondary {
  color: var(--slate-500);
}
#assessment-editor .diagnostics-details {
  border-top: 1px solid var(--border);
  margin: var(--w-8) 0;
  padding-top: var(--w-4);
}
#assessment-editor .diagnostics-details textarea {
  width: 100%;
  height: 5em;
}
#assessment-editor .diagnostics-details .success-message {
  display: inline-flex;
  color: var(--green);
  opacity: 1;
  align-self: center;
  visibility: hidden;
}
#assessment-editor .diagnostics-details .success-message svg {
  width: var(--w-5);
}
#assessment-editor .copied:disabled {
  transition: all 0.3s ease-out;
  background-color: var(--green);
  color: white;
}

.assessment-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: white;
  box-shadow: var(--shadow-md);
  height: 100%;
}
.assessment-list ul {
  list-style: none;
  margin: 0;
}
.assessment-list header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--w-4) var(--w-6);
  border-bottom: 1px solid var(--border);
}
.assessment-list h2 {
  color: var(--royal-blue-lighter);
  font-size: var(--text-4xl);
  font-weight: bold;
  font-family: "VAG Rounded", sans-serif;
}
.assessment-list .list-body {
  height: 0px;
  flex: 1 1 auto;
  display: flex;
  overflow: auto;
}
.assessment-list .list-items {
  flex: 1;
}
.assessment-list .empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--slate-600);
  text-align: center;
}
.assessment-list .empty p {
  margin-bottom: var(--w-4);
}
.assessment-list table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.assessment-list table th,
.assessment-list table td {
  text-align: left;
  padding: 0 var(--w-2);
}
.assessment-list table th {
  min-width: 50%;
}
.assessment-list .assessment {
  color: var(--slate-500);
}
.assessment-list .assessment:nth-child(even) {
  background-color: var(--slate-50);
}
.assessment-list .assessment .venue,
.assessment-list .assessment .edited-at,
.assessment-list .assessment .visited-on {
  display: inline-flex;
  align-items: center;
}
.assessment-list .assessment .updated-at {
  margin-left: var(--w-1);
}
.assessment-list .assessment a {
  display: block;
  width: 100%;
  color: var(--royal-blue-lighter);
  padding: var(--w-3) 0;
}
.assessment-list .assessment .venue {
  font-weight: bold;
}
.assessment-list .assessment svg {
  flex: 0 0 var(--w-6);
  width: var(--w-6);
  display: inline-block;
  margin-right: var(--w-2);
}
.assessment-list .assessment .edited-at {
  white-space: nowrap;
}
.assessment-list .assessment .status {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: bold;
  font-size: var(--text-xs);
  padding: var(--w-1) var(--w-3) var(--w-1) var(--w-2);
  border-radius: var(--rounded-full);
}
.assessment-list .assessment.status-in-progress .status {
  color: var(--warning-orange);
  background-color: #ffefd5;
}
.assessment-list .assessment.status-completed .status {
  color: var(--green);
  background-color: #d5f6c3;
}

/*# sourceMappingURL=index.css.map */