:root {
  --color-page: #f9fdff;
  --color-text: #30306f;
  --color-border: #b9ddec;
  --color-accent: #0795a1;
  --color-accent-dark: #087b86;
  --color-selected: #c34834;
  --color-selected-bg: #f8e5c0;
  --color-hover-bg: #e4f6f4;
  --question-image-size: clamp(12vh, 10vw, 18vh);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
}

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

html {
  min-height: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--color-page);
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1190.551 841.89"><path d="M1190.551,270.712l-178.079,166.819c-29.662,29.662-77.756,29.662-107.418,0-29.662-29.662-29.662-77.754,0-107.417l60.259-60.259c13.023-13.023,13.023-34.137,0-47.159-13.023-13.023-34.137-13.023-47.159,0l-13.1,13.1c-26.768,26.768-70.168,26.768-96.936,0h-.002c-26.768-26.768-26.768-70.17,0-96.938l53.709-53.709c5.788-5.788,5.788-15.171,0-20.959-5.788-5.788-15.171-5.788-20.959,0l-130.997,130.997c-23.151,23.151-60.687,23.151-83.838,0-23.151-23.151-23.151-60.687,0-83.838l35.368-35.37c5.065-5.063,5.065-13.274,0-18.339-5.063-5.065-13.274-5.065-18.339,0l-2.933,2.933c-62.046,62.046-162.643,62.046-224.689,0L354.868,0h835.683s-.91,252.976,0,270.712" fill="%23eff9fe"/><path d="M604.9,215.298c0,14.038-11.379,25.419-25.419,25.419s-25.417-11.381-25.417-25.419,11.379-25.419,25.417-25.419,25.419,11.381,25.419,25.419" fill="%23eff9fe"/><path d="M249.554,189.879c0,14.038-11.379,25.419-25.419,25.419s-25.417-11.381-25.417-25.419,11.379-25.419,25.417-25.419,25.419,11.381,25.419,25.419" fill="%23eff9fe"/><path d="M984.161,677.779c0,18.571-15.82,33.625-35.337,33.625s-35.337-15.054-35.337-33.625,15.821-33.625,35.337-33.625,35.337,15.055,35.337,33.625" fill="%23ebf7fe"/><path d="M161.961,318.716c0,18.571-15.82,33.625-35.337,33.625s-35.337-15.054-35.337-33.625,15.821-33.625,35.337-33.625,35.337,15.055,35.337,33.625" fill="%23ebf7fe"/><path d="M1084.475,3.767c-2.284.762-88.559,87.976-121.563,121.395-6.986,7.075-18.388,7.1-25.417.071-7-7-7-18.349,0-25.348l27.122-27.123c3.511-3.511,3.511-9.204,0-12.716-3.512-3.511-9.205-3.511-12.716,0l-11.304,11.304c-7.673,7.673-20.113,7.673-27.787,0-7.673-7.673-7.673-20.113,0-27.787,3.252-3.251,3.252-8.522,0-11.773l-31.79-31.79h206.28" fill="%23faec91"/><path d="M0,571.178l178.079-166.819c29.662-29.662,77.756-29.662,107.418,0,29.662,29.662,29.662,77.754,0,107.417l-60.259,60.259c-13.023,13.023-13.023,34.137,0,47.159s34.137,13.023,47.159,0l13.1-13.1c26.768-26.768,70.168-26.768,96.936,0h.002c26.768,26.768,26.768,70.17,0,96.938l-53.709,53.709c-5.788,5.788-5.788,15.171,0,20.959,5.788,5.788,15.171,5.788,20.959,0l130.997-130.997c23.151-23.151,60.687-23.151,83.838,0,23.151,23.151,23.151,60.687,0,83.838l-35.368,35.37c-5.065,5.063-5.065,13.274,0,18.339,5.063,5.065,13.274,5.065,18.339,0l2.933-2.933c62.046-62.046,162.643-62.046,224.689,0l60.571,60.572H0s.91-252.976,0-270.712" fill="%23eff9fe"/><path d="M106.077,838.123c2.284-.762,88.559-87.976,121.563-121.395,6.986-7.075,18.388-7.1,25.417-.071,7,7,7,18.349,0,25.348l-27.122,27.123c-3.511,3.511-3.511,9.204,0,12.716,3.512,3.511,9.205,3.511,12.716,0l11.304-11.304c7.673-7.673,20.113-7.673,27.787,0,7.673,7.673,7.673,20.113,0,27.787-3.252,3.251-3.252,8.522,0,11.773l31.79,31.79H103.25" fill="%23faec91"/></svg>');
  background-size: cover;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



.app-root {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 1.5em;
}

.screen {
  width: 100%;
}

.screen--wide {
  max-width: 72rem;
}

.screen--message {
  max-width: 48rem;
}

.screen-title {
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
}

.menu-title {

  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
}

.assessment-menu {
  display: grid;
  width: fit-content;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  gap: clamp(3vw, 4vw, 6vw);
  margin: 0 auto;
}

.assessment-menu-button {
  width: clamp(180px, 24vw, 320px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  cursor: pointer;
  border: 2px solid var(--color-border);
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 0.85);
  padding: clamp(1.5vw, 2vw, 3vw);
  color: var(--color-text);
  text-align: center;
  font-size: clamp(1.25rem, 2.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  box-shadow: var(--shadow);
}

.assessment-menu-button:hover {
  border-color: var(--color-accent);
  background: var(--color-hover-bg);
}

.assessment-progress {
  display: block;
  width: fit-content;
  margin: 1em 0em 0.5em 0em;
}

.assessment-progress__header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}

.assessment-title {
  margin: 0;
  color: rgb(48 48 111 / 0.85);
  text-align: center;
  font-weight: 700;
  line-height: 1;
  font-size: 1em;
}

.assessment-progress__text {
  margin: 0;
  color: rgb(48 48 111 / 0.8);
  text-align: center;
  font-weight: 700;
  line-height: 1;
}

.assessment-progress__track {
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.85);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
}

.assessment-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  transition: width 160ms ease;
}

.question-layout {
  display: grid;
  align-items: center;
  justify-items: center;
  gap: clamp(2vw, 3vw, 4vw);
  min-height: clamp(16vh, 18vw, 24vh);
  padding: 0 0.5em;
}

.question-text {
  margin: 0;
  text-align: center;
  line-height: 1.375;
}

.question-image {
  display: block;
  width: var(--question-image-size);
  height: var(--question-image-size);
  max-width: 100%;
  margin: 0;
  object-fit: contain;
}


@media (min-width: 48rem) {
  .question-layout {
    width: fit-content;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) var(--question-image-size);
    margin-right: auto;
    margin-left: auto;
  }
}


/* GRID STYLE */

.app-root > grid-layout {
  position: absolute;
  top: var(--gap);
  left: var(--gap);
  right: var(--gap);
  bottom: var(--gap);
}



.question-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0em;
  font-size: 1.5em;
}


.question-options {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.question-options grid-layout.buttons {
  width: 100%;
  height: 25vh;
} 

.scale-description {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: rgb(48 48 111 / 0.8);
  text-align: center;
  font-weight: 700;
}



.grid-icon[color-theme="noci"],
.grid-icon[color-theme="noci-answer"]  {
  --main: white;
  --tab: #0795a1;
  --text: black;
  --outline: #0795a1;
  --main-hover: #e4f6f4;
  --tab-hover:  #087b86;
  --main-active: #d1f0ed;
  --tab-active: #087b86;
  --icon-color: black;
  --icon-color-hover: black;
}
.grid-icon[color-theme="noci-answer"] {
  --outline-active: #c34834;
  --main-active: #f8e5c0;
}
.grid-icon[color-theme="noci-invert"] {
  --main: #0795a1;
  --tab: white;
  --text: white;
  --outline: #02636c;
  --main-hover: #087b86;
  --tab-hover: #e4f6f4;
  --main-active: #087b86;
  --tab-active: #d1f0ed;
  --icon-color: white;
  --icon-color-hover: white;
}

.grid-icon[color-theme="noci"] .outline {
    opacity: 0.4;
    stroke-width: 2 !important;
}
.grid-icon[color-theme="noci-answer"] .outline-active {
    stroke-width: 4 !important;
}

.noci.icon {
  fill: none;
  stroke: var(--tab-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scale(0.8);
}


.grid-icon:not([i-disable-hover])[selected] .for-active{
    opacity: 1;
}

.grid-icon[color-theme="noci-answer"] .content .display-value {
  font-weight: bold;
}

.results-list-container {
  overflow: scroll;
  box-sizing: border-box;
  border-radius: 1em;
}
.results-list {
  background: #d5e9f1;
  padding: 1em;
  border-radius: 1em;
  padding-right: 2em;
}

.result-item:first-of-type {
  border-top: 1px solid #0000008f;
}
.result-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #0000008f;
}

.labels {
  font-size: 0.8em;
}