@keyframes dialog-show {
  from {
    opacity: 0;
    transform: translateY(-20%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}

@keyframes dialog-backdrop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

dialog {
  background: white;
  border: none;
  border-radius: 1rem;
  box-shadow: 0px 3px 6px var(--shadow);
  color: var(--body);
  width: calc(100% - 4rem);
  max-width: 40rem;
  padding: 2rem 3rem;
  z-index: 100;
}

@media (min-width: 768px) {
  dialog {
    min-width: 30rem;
  }
}

dialog.full-width {
  max-width: 90vw;
  width: fit-content;
}

dialog[open] {
  animation: dialog-show 0.2s ease normal;
}

dialog[open]::backdrop {
  animation: dialog-backdrop 0.2s ease normal;
}

dialog::backdrop {
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

dialog .dialog-close {
  cursor: pointer;
  opacity: 0.6;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
}

dialog .dialog-close:hover,
dialog .dialog-close:focus {
  opacity: 1;
}

dialog .dialog-close:focus {
  outline: none;
}

dialog .dialog-close svg {
  height: 1.6rem;
  width: 1.6rem;
}

dialog .dialog-title {
  align-items: center;
  font-size: 1.4rem;
  font-weight: bold;
  display: flex;
  gap: 0.5rem;
  margin: 0 1rem 1.5rem 0;
}

dialog .dialog-icon {
  flex-shrink: 1;
}

dialog .dialog-actions {
  align-items: center;
  border-top: 1px solid hsl(var(--space-gray));
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 1rem -1.5rem -1.5rem;
  padding: 1rem 1.5rem;
}

dialog .dialog-content {
}
/*
Tippy themes
See https://atomiks.github.io/tippyjs/v6/themes/
*/

/* light */
.tippy-box[data-theme~="light"] {
  color: hsl(var(--dark-text));
  box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),
    0 4px 80px -8px rgba(36, 40, 47, 0.25),
    0 4px 4px -2px rgba(91, 94, 105, 0.15);
  background-color: #fff;
}
.tippy-box[data-theme~="light"][data-placement^="top"] > .tippy-arrow:before {
  border-top-color: #fff;
}
.tippy-box[data-theme~="light"][data-placement^="bottom"]
  > .tippy-arrow:before {
  border-bottom-color: #fff;
}
.tippy-box[data-theme~="light"][data-placement^="left"] > .tippy-arrow:before {
  border-left-color: #fff;
}
.tippy-box[data-theme~="light"][data-placement^="right"] > .tippy-arrow:before {
  border-right-color: #fff;
}
.tippy-box[data-theme~="light"] > .tippy-backdrop {
  background-color: #fff;
}
.tippy-box[data-theme~="light"] > .tippy-svg-arrow {
  fill: #fff;
}

/* menu */
.tippy-box[data-theme~="menu"] .tippy-content {
  font-size: 1rem;
  padding: 0.75em;
}
.tippy-box[data-theme~="menu"] a,
.tippy-box[data-theme~="menu"] button {
  align-items: center;
  appearance: none;
  background: none;
  border: none;
  border-radius: 0.5rem;
  color: hsl(var(--purple));
  cursor: pointer;
  display: flex;
  font-family: "DMSans", sans-serif;
  font-size: 1em;
  font-weight: 500;
  gap: 0.5em;
  padding: 0.5em 0.75em;
  transition: all 0.2s ease;
  width: 100%;
}
.tippy-box[data-theme~="menu"] a:hover,
.tippy-box[data-theme~="menu"] button:hover {
  background: hsl(249 31% 97%);
  text-decoration: none;
}
.tippy-box[data-theme~="menu"] a > .icon,
.tippy-box[data-theme~="menu"] button > .icon {
  fill: currentColor;
  margin-left: -0.1em;
  width: 1.2em;
}

/* gray theme */
.tippy-box[data-theme~="gray"] {
  color: white;
  box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),
    0 4px 80px -8px rgba(36, 40, 47, 0.25),
    0 4px 4px -2px rgba(91, 94, 105, 0.15);
  background-color: hsl(var(--dark-gray));
}
.tippy-box[data-theme~="gray"][data-placement^="top"] > .tippy-arrow:before {
  border-top-color: hsl(var(--dark-gray));
}
.tippy-box[data-theme~="gray"][data-placement^="bottom"] > .tippy-arrow:before {
  border-bottom-color: hsl(var(--dark-gray));
}
.tippy-box[data-theme~="gray"][data-placement^="left"] > .tippy-arrow:before {
  border-left-color: hsl(var(--dark-gray));
}
.tippy-box[data-theme~="gray"][data-placement^="right"] > .tippy-arrow:before {
  border-right-color: hsl(var(--dark-gray));
}
.tippy-box[data-theme~="gray"] > .tippy-backdrop {
  background-color: hsl(var(--dark-gray));
}
.tippy-box[data-theme~="gray"] > .tippy-svg-arrow {
  fill: hsl(var(--dark-gray));
}

/* padding */
.tippy-box[data-theme~="padding"] .tippy-content {
  padding: 1rem;
}

/* large */
.tippy-box[data-theme~="large"] .tippy-content {
  font-size: 1rem;
  padding: 1rem;
}

/* no-padding */
.tippy-box[data-theme~="no-padding"] .tippy-content {
  padding: 0;
}

/* rounded */
.tippy-box[data-theme~="rounded"] {
  border-radius: 0.5rem;
}
/*
 * Imports that are done once globally and do not require linking using `content_for :custom_styles`
 *


*/

/* color vars */

:root {
  --background: 0, 0%, 95%;
  --blue-fresh: 207, 90%, 54%;
  --dark-gray: 0, 0%, 45%;
  --dark-text: 0, 0%, 13%;
  --black: 0, 0%, 0%;
  --gray: 0, 0%, 70%;
  --green: 144, 40%, 55%;
  --green-light: 137, 56%, 59%;
  --medium-gray: 0, 0%, 96%;
  --medium-green: 122, 38%, 69%, 0.275;
  --primary-color: 211, 100%, 50%;
  --purple: 249, 31%, 56%;
  --dark-purple: 248, 33%, 42%;
  --space-purple: 248, 52%, 92%;
  --red: 354, 70%, 54%;
  --secondary-color: 208, 7%, 46%;
  --space-gray: 0, 0%, 91%;
  --space-black: 0, 0%, 13%;
  --soft-green: 122, 38%, 69%;
  --white: 0, 0%, 100%;

  /* colors with alpha */
  --shadow: hsla(var(--black), 0.1);

  /* Brand colors */
  --drammstein: hsl(338, 78%, 47%);
  --quizmas: hsl(229, 64%, 55%);
  --capp-12: hsl(203, 71%, 58%);
  --capp-agile: hsl(230, 55%, 55%);
  --spruitje: hsl(156, 77%, 37%);
  --hyperlink: hsl(281, 10%, 45%);

  /* Assigned colors */
  --completed-color: hsl(var(--green-light));
}

/* Fonts */

@font-face {
  font-family: "DMSans";
  font-style: normal;
  font-weight: 900;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-Black-db817efb492ce6bd67674b007b06c39f1c5a8af713bf328e9a49901a170749a4.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: italic;
  font-weight: 900;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-BlackItalic-d53ff0c0bdc96cc5d19d0f7a103575b1f48c836c9fbd4d2264527575f8902450.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: normal;
  font-weight: 800;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-ExtraBold-b32dde8052a9fb846c599aaac8fe1adb74b0ad4afdfbf19c25fcf8cc6efa7c81.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: italic;
  font-weight: 800;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-ExtraBoldItalic-75c37160ed3710e031c03325d5d128b6d31ddd8692a426e69078a8c41881cbe8.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: normal;
  font-weight: 700;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-Bold-c4b7f83a64086210046c289824a0f33ef6b5e3902af7865c03d5aa10d005cc38.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: italic;
  font-weight: 700;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-BoldItalic-b6ed57049ce0e993c01a6e978f2bab031dc30d2ad472b5dee3e8ebd31066abc8.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: normal;
  font-weight: 600;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-SemiBold-a4ad586cfb7e81814e475eb4a8c81cb78aad29ac3c21a228ffba91e364ec6412.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: italic;
  font-weight: 600;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-SemiBoldItalic-36cf06ee0e30d54ded5e7c734f25802c39e575edd3c9b9c0a5005e7f4ad9ef5b.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: normal;
  font-weight: 500;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-Medium-092d197e0be42eee238496dc829f3d8e1f5348f32de30b66a1595593b3a98d11.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: italic;
  font-weight: 500;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-MediumItalic-79906965b02810b32f90e1f5f28a6a900d637be50fe86a6f6d7fe36ea1b9acd1.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: normal;
  font-weight: 400;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-Regular-0250757cc89f6c7069efdf772a23fb013e8b9cfd690f20193f2ba447f5198871.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: italic;
  font-weight: 400;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-Italic-1d4e10c92621129122b37b583ed2a1fbc689581f7c91e288cf9998a7a5f707d4.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: normal;
  font-weight: 300;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-Light-2a5113429fb7ba2db9811ab309fba7f94410051f868fafc217c80fc5e9e5ab57.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: italic;
  font-weight: 300;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-LightItalic-5bd998596454959928428e175030b7387c9923938d1da41d2aa79b590fc70c2b.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: normal;
  font-weight: 200;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-ExtraLight-0717a1d87fbbe6780ab0ddc18a5f0a651d55dad9f19fc5fd8f874c60962136df.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: italic;
  font-weight: 200;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-ExtraLightItalic-5020515e6d51b13570f0ae282bd6cc03756e5a6847f673cda7dba03d1e31cf15.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: normal;
  font-weight: 100;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-Thin-f8ee99a0852a2ed5bbf470ba4da757fa80eb749606b2c8fd279b64d4185ee35a.ttf) format("truetype");
}

@font-face {
  font-family: "DMSans";
  font-style: italic;
  font-weight: 100;
  src: url(https://hyperspace.enabling.io/assets/dm-sans/DMSans-ThinItalic-50ba2d3b7b4935df3a18507235bdf0d40d4786e018c4b8e95cfe43a19fb7639c.ttf) format("truetype");
}

/* General Styles */

html {
  font-size: max(18px, 0.6vw);
}

@media (max-width: 800px) {
  html {
    font-size: 17px;
  }
}

@media (max-width: 640px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 430px) {
  html {
    font-size: 15px;
  }
}

@media (max-width: 320px) {
  html {
    font-size: 14px;
  }
}

body {
  background-color: hsl(var(--background));
  box-sizing: border-box;
  color: hsl(var(--dark-text));
  font-family: "DMSans", sans-serif;
  margin: 0;
  padding: 1rem;

  @media screen and (max-width: 430px) {
    padding: 0.6rem;
  }
}

body * {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 900;
  margin: 1.5em 0 0.5em;

  @media screen and (max-width: 520px) {
    margin-top: 1rem;
  }
}

h2 {
  font-size: 1.1rem;
}

a {
  color: hsl(var(--purple));
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a.visited {
  color: hsl(var(--purple));
}

p,
p a {
  overflow-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  word-wrap: break-word;
}

p {
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

p a {
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
}

img.logo {
  margin: 1rem auto;
}

form {
  @media (max-width: 430px) {
    width: 100%;
  }
}

.icon {
  width: 16px;
}

/* General shorthand styles POC */

.flex {
  display: flex;
}

.flex-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  height: auto;
  justify-content: center;
  overflow: auto;
  padding: 1rem;
  width: 100%;
}

.flex-row > * {
  flex: 1;
}

.flex-column {
  align-items: center;
  background-color: hsl(var(--background));
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  overflow: auto;
  width: 100%;
}

.flex-column-100vh {
  align-items: center;
  background-color: hsl(var(--background));
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  min-height: calc(100vh - 2rem);
  overflow: auto;
  width: 100%;
}

.flex-column-center {
  align-items: center;
  background-color: hsl(var(--background));
  display: flex;
  flex: 1;
  flex-direction: column;
  height: auto;
}

.relative {
  position: relative;
}

.right {
  float: right;
}

.hide {
  display: none;
}

.box {
  background: hsl(var(--medium-gray));
  margin: 1rem 0;
  padding: 1rem;
}

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

.small-text {
  font-size: 0.8rem;
}

.border-left {
  border-left: 5px solid #ccc;
}

.shadow {
  box-shadow: 0px 2px 3px var(--shadow);
}

.shadow-xl {
  box-shadow: 0px 3px 6px var(--shadow);
}

.border-top {
  border-top: 1rem solid hsl(var(--purple));
}

.materialized-box {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 3px 10px var(--shadow);
  margin-bottom: 2rem;
  max-width: 55rem;
  padding: 2rem;
  width: 100%;

  @media screen and (max-width: 430px) {
    padding: 2rem 1rem;
  }
}

.materialized-box-xl {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 10px var(--shadow);
  margin-bottom: 1rem;
  max-width: 50rem;
  padding: 2rem;
  width: 100%;
}

.green-text {
  color: hsl(var(--green));
}

.blue-text {
  color: hsl(var(--blue-fresh));
}

.purple-text {
  color: hsl(var(--purple));
}

.green {
  background-color: hsl(var(--green));
}

.blue {
  background-color: hsl(var(--blue-fresh));
}

/* Helpers */

.word-wrap {
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  word-wrap: break-word;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Shared Styles */

.logo {
  display: block;
  margin: 0 auto;
  width: 200px;
}

.content {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0px 3px 6px var(--shadow);
  margin-bottom: 2rem;
  max-width: 55rem;
  padding: 2rem;
  width: 100%;
}

.breadcrumbs {
  border-bottom: 1px solid hsl(var(--background));
  display: flex;
  gap: 0.5rem;
  line-height: 1;
  margin: -2rem -2rem 0;
  padding: 0 1rem;
}

.breadcrumbs > * {
  align-items: center;
  display: flex;
  padding: 0 1rem;
  position: relative;
  column-gap: 0.5rem;
  min-height: 4rem;
}

.breadcrumbs > *:last-child {
  flex: 1;
}

.breadcrumbs strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumbs > *:not(:last-child)::before,
.breadcrumbs > *:not(:last-child)::after {
  background-color: rgba(0, 0, 0, 0.1);
  content: "";
  display: block;
  height: calc(50% + 1px);
  position: absolute;
  right: 0;
  width: 1px;
}

.breadcrumbs > *::before {
  top: 0;
  transform: rotate(-20deg);
}

.breadcrumbs > *::after {
  bottom: 0;
  transform: rotate(20deg);
}

@media screen and (max-width: 430px) {
  .breadcrumbs {
    margin: -2rem -1rem 0;
    padding: 0;
  }

  .breadcrumbs > * {
    padding: 1rem 0.75rem;
  }
}

/* Flash messages */

.flash_message {
  animation: appear-then-fade 3.5s both;
  background: hsl(var(--green));
  border: 1px solid hsl(var(--green));
  border-radius: 0.5rem;
  bottom: 2rem;
  color: white;
  left: 2rem;
  min-width: 20rem;
  padding: 1rem;
  position: fixed;
  z-index: 999;
}

@keyframes appear-then-fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*
Button styles
*/

/* Clear button style */
.clear-button {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  color: hsl(var(--purple));
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  margin: 0;
  outline: none;
  padding: 0;
  text-align: inherit;
}

/*
General button styles
*/

.button {
  align-items: center;
  appearance: none;
  column-gap: 0.3em;
  cursor: pointer;
  display: inline-flex;
  font-family: "DMSans", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: inherit;
  text-decoration: none;
  transition: 0.15s;
}
.button:hover {
  text-decoration: none;
}
.button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.button:not(.button-clear) {
  background-color: hsl(var(--purple));
  border: 2px solid hsl(var(--purple));
  border-radius: 29px;
  box-shadow: 0px 3px 6px var(--shadow);
  color: white;
  padding: 9px 40px;
}
.button:not(.button-clear):hover {
  box-shadow: 0px 5px 6px var(--shadow);
}

.button.button-clear {
  background: transparent;
  border: none;
  border-radius: 0;
  color: hsl(var(--purple));
  opacity: 0.8;
  padding-left: 9px;
  padding-right: 9px;
}
.button.button-clear:hover {
  opacity: 1;
}

.button.button-secondary {
  background: none;
  border: 2px solid #776cb233;
  box-shadow: none;
  color: hsl(var(--purple));
  cursor: pointer;
  padding-left: 1rem;
  padding-right: 1rem;
  transition: border 0.2s ease-in-out;
}
.button.button-secondary:hover {
  border-color: #776cb288;
  box-shadow: none;
  transform: none;
}

.button.small {
  font-size: 13px;
  padding: 6px 20px;
}

.button.gray {
  background-color: hsl(var(--gray));
  border: 1px solid hsl(var(--gray));
  color: white;
}

.button.black {
  background-color: #333;
  border: 1px solid #333;
  color: white;
}

.button > .icon {
  fill: currentColor;
}

/*
Specific button styles
*/

.add-button {
  align-items: center;
  background-color: hsl(var(--purple));
  border: none;
  border-radius: 50%;
  bottom: 2rem;
  box-shadow: 0px 3px 6px var(--shadow);
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 24px;
  height: 56px;
  justify-content: center;
  outline: none;
  position: fixed;
  right: 2rem;
  text-decoration: none;
  transition: transform 0.2s ease-out;
  width: 56px;
}
.add-button:hover {
  text-decoration: none;
  transform: scale(1.1);
}
.add-button:active {
  transform: scale(0.95);
  transition: transform 0.05s ease-out;
}
.add-button:focus {
  box-shadow: 0 0 0 3px rgba(125, 82, 255, 0.3);
}

.save-button {
  align-items: center;
  background: linear-gradient(to right, hsl(var(--purple), #8b70d1));
  background-color: hsl(var(--purple));
  border: 0px solid #000;
  border-radius: 10px;
  box-shadow: 2px 3px 9px -5px #2d2d2d;
  color: #fff;
  display: inline-flex;
  font-family: Arial;
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  justify-content: center;
  padding: 14px 15px;
  text-decoration: none;
}

.save-button span {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDE1MCAxNTAiPg0KICA8ZGVmcz4NCiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAtcGF0aCI+DQogICAgICA8cmVjdCB4PSItNCIgeT0iLTI1IiB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgZmlsbD0ibm9uZSIvPg0KICAgIDwvY2xpcFBhdGg+DQogICAgPGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgtMiI+DQogICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlXzEiIGRhdGEtbmFtZT0iUmVjdGFuZ2xlIDEiIHdpZHRoPSIxNDIiIGhlaWdodD0iMTAwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMC4zMzMgOS4xMjgpIiBmaWxsPSJub25lIi8+DQogICAgPC9jbGlwUGF0aD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudCIgeDE9IjAuOTg2IiB5MT0iMC41MDciIHgyPSItMC4wMjgiIHkyPSIwLjUyMiIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPg0KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmIi8+DQogICAgICA8c3RvcCBvZmZzZXQ9IjAuNTMxIiBzdG9wLWNvbG9yPSIjZDlkOWQ5Ii8+DQogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9ImdyYXkiLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTIiIHgxPSIwLjk4NiIgeTE9IjAuNDkzIiB4Mj0iLTAuMDI4IiB5Mj0iMC40NzgiIHhsaW5rOmhyZWY9IiNsaW5lYXItZ3JhZGllbnQiLz4NCiAgPC9kZWZzPg0KICA8ZyBpZD0iU2Nyb2xsX0dyb3VwXzEiIGRhdGEtbmFtZT0iU2Nyb2xsIEdyb3VwIDEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMjUpIiBjbGlwLXBhdGg9InVybCgjY2xpcC1wYXRoKSIgc3R5bGU9Imlzb2xhdGlvbjogaXNvbGF0ZSI+DQogICAgPGcgaWQ9ImxvZ28tdyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwLjMzMyAtOS4xMjgpIiBjbGlwLXBhdGg9InVybCgjY2xpcC1wYXRoLTIpIj4NCiAgICAgIDxnIGlkPSJHcm91cF80MCIgZGF0YS1uYW1lPSJHcm91cCA0MCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC45NDEgNC40ODkpIj4NCiAgICAgICAgPGcgaWQ9Ikdyb3VwXzM4IiBkYXRhLW5hbWU9Ikdyb3VwIDM4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDAuMDAxKSI+DQogICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZV82MyIgZGF0YS1uYW1lPSJSZWN0YW5nbGUgNjMiIHdpZHRoPSI3NS44ODciIGhlaWdodD0iMjUuMjk2IiByeD0iMTIuNjQ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC4wMzMgMzcuMjI1KSByb3RhdGUoNDUpIiBmaWxsPSJ1cmwoI2xpbmVhci1ncmFkaWVudCkiLz4NCiAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlXzY0IiBkYXRhLW5hbWU9IlJlY3RhbmdsZSA2NCIgd2lkdGg9Ijc1Ljg4NyIgaGVpZ2h0PSIyNS4yOTYiIHJ4PSIxMi42NDgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgNTMuNjYpIHJvdGF0ZSgtNDUpIiBmaWxsPSIjZmZmIi8+DQogICAgICAgICAgPGNpcmNsZSBpZD0iRWxsaXBzZV8xIiBkYXRhLW5hbWU9IkVsbGlwc2UgMSIgY3g9IjcuODQyIiBjeT0iNy44NDIiIHI9IjcuODQyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMS4xMyA0NS4wODEpIiBmaWxsPSIjZDlkYmZmIi8+DQogICAgICAgIDwvZz4NCiAgICAgICAgPGcgaWQ9Ikdyb3VwXzM5IiBkYXRhLW5hbWU9Ikdyb3VwIDM5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MC4wNzkgMCkiPg0KICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGVfNjMtMiIgZGF0YS1uYW1lPSJSZWN0YW5nbGUgNjMiIHdpZHRoPSI3NS44ODciIGhlaWdodD0iMjUuMjk2IiByeD0iMTIuNjQ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MS41NDcgNTUuMTEyKSByb3RhdGUoMTM1KSIgZmlsbD0idXJsKCNsaW5lYXItZ3JhZGllbnQtMikiLz4NCiAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlXzY0LTIiIGRhdGEtbmFtZT0iUmVjdGFuZ2xlIDY0IiB3aWR0aD0iNzUuODg3IiBoZWlnaHQ9IjI1LjI5NiIgcng9IjEyLjY0OCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTMuODA3IDcxLjU0Nykgcm90YXRlKC0xMzUpIiBmaWxsPSIjZmZmIi8+DQogICAgICAgICAgPGNpcmNsZSBpZD0iRWxsaXBzZV8xLTIiIGRhdGEtbmFtZT0iRWxsaXBzZSAxIiBjeD0iNy44NDIiIGN5PSI3Ljg0MiIgcj0iNy44NDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0Ljg4IDQ1LjA4MikiIGZpbGw9IiNkOWRiZmYiLz4NCiAgICAgICAgPC9nPg0KICAgICAgPC9nPg0KICAgIDwvZz4NCiAgPC9nPg0KPC9zdmc+DQo=);
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 22px;
  margin-right: 15px;
  transform: rotate(45deg);
  width: 22px;
}

.save-button:hover {
  background: linear-gradient(to right, hsl(var(--purple), #9b85d6));
  background-color: hsl(var(--purple));
}

.save-button:active {
  transform: scale(0.95);
}

.share-button {
  border: none;
  border-radius: 29px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  margin: 10px 2px;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
}

.invite-button {
  background-color: hsl(var(--purple));
  border: none;
  border-radius: 29px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  margin: 10px 2px;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
}

/* Form Styles */

.question-header {
  margin-bottom: 2rem;
}

.question-title {
  border-bottom: 1px solid hsl(var(--background));
  color: hsl(var(--dark-gray));
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.question-descriptiom {
  color: hsl(var(--gray));
  font-size: 1rem;
  margin-bottom: 1rem;
}

.field {
  margin-bottom: 2rem;
}

.field input[type="text"],
.field textarea {
  background-color: #fff;
  border: none;
  border-bottom: 2px solid hsl(var(--gray));
  font-size: 1.2rem;
  height: 3rem;
  padding: 0.7rem 1rem;
  resize: none;
  transition: all 0.2s ease-in-out;
  width: 100%;
}

.field textarea:focus:not([readonly]),
.field input:focus:not([readonly]):not([type="range"]),
.field input:focus:not([readonly]):not([type="radio"]),
.field textarea:focus:not([readonly]) {
  border-bottom: 2px solid hsl(var(--purple));
  outline: none;
}

.field label {
  color: hsl(var(--gray));
  left: 1rem;
  top: 0.2rem;
  transition: all 0.2s ease-out;

  @media (max-width: 430px) {
    font-size: 1.1rem;
  }
}

.field textarea {
  border: none;
  border-bottom: 2px solid hsl(var(--gray));
  font-size: 1.2rem;
  height: 8rem;
  padding: 0.7rem 1rem;
  transition: all 0.2s ease-in-out;
  width: 100%;
}

.field input,
.field textarea:focus:not([readonly]) ~ label,
.field textarea:not([value=""]) ~ label {
  color: hsl(var(--purple));
  font-size: 1rem;
  left: 1rem;
  top: -1rem;
}

.field select {
  background-color: hsl(var(--background));
  border: none;
  border-radius: 4px;
  font-size: 16px;
  margin: 0.5rem 0;
  padding: 12px;
  width: 100%;
}

.margin-left {
  margin-left: 0.5rem;
}

.radio-group {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  display: flex;
}

.radio-group .radio-with-input,
.radio-group > label {
  align-items: center;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex: 1;
  gap: 0.3rem;
  height: 2.6rem;
  inset: 0;
  justify-content: center;
}

.radio-group > label {
  padding: 0 0.8rem;
}

.radio-group label {
  font-size: 1rem;
}

.radio-group .radio-with-input {
  padding: 0 0 0 1rem;
  transition: all 0.2s ease-in-out;
}

.radio-group .radio-with-input:has(input:checked),
.radio-group > label:has(input:checked) {
  background-color: white;
  border-color: white;
  box-shadow: 0 0 0 3px white, 0px 2px 4px rgba(0, 0, 0, 0.05),
    0px 10px 30px rgba(0, 0, 0, 0.05);
}

.radio-group .radio-with-input:last-child,
.radio-group > label:last-child {
  border-radius: 0 0.5rem 0.5rem 0;
  border-right: none;
}

.radio-group .radio-with-input:first-child,
.radio-group > label:first-child {
  border-radius: 0.5rem 0 0 0.5rem;
}

.field .radio-group .radio-with-input label {
  margin-left: auto;
}

.field .radio-group .radio-with-input input[type="number"],
.field .radio-group .radio-with-input input[type="number"]:disabled {
  background: transparent;
  border: none;
  border-radius: 0 0.5rem 0.5rem 0;
  box-shadow: 0 0 0 2px transparent inset;
  color: black;
  font-weight: bold;
  height: 2.6rem;
  margin: 0 0 0 0.1rem;
  transition: all 0.2s ease-in-out;
}

.field .radio-group .radio-with-input:focus-within {
  color: white;
}

.field .radio-group .radio-with-input input[type="number"]:not(:disabled):hover,
.field .radio-group .radio-with-input input[type="number"]:focus {
  background-color: white;
  box-shadow: 0 0 0 2px hsl(var(--purple) inset);
  color: hsl(var(--purple));
}

/* Sprout Show View  */

.sprout-responses {
  margin-top: 2rem;
}

.sprout-response {
  background: hsla(var(--soft-green), 0.086);
  border-radius: 0.5rem;
  color: black;
  display: block;
  margin: 1rem 0;
  padding: 1rem;
  text-decoration: none;
  transition: background 0.25s ease-in-out;
}

.sprout-response *:first-child {
  margin-top: 0;
}

.sprout-response *:last-child {
  margin-bottom: 0;
}

.sprout-response:hover {
  background: hsl(var(--medium-green));
  text-decoration: none;
  transition: background 0.1s ease-in-out;
}

.share-feedback,
.invite-feedback {
  display: none;
  font-size: 14px;
  padding-left: 5px;
  transition: opacity 0.3s;
}

.share-actions {
  line-height: 58px;
}

/* Trix Kitchen Sink */

.trix-button-row {
  margin-top: 0.5rem;
}

.trix-button--icon-increase-nesting-level,
.trix-button--icon-decrease-nesting-level,
.trix-button--icon-attach,
.trix-button-group--file-tools {
  display: none;
}

.trix-button-group.trix-button-group--file-tools {
  display: none;
}

trix-toolbar .trix-button {
  border-bottom: none;
}

trix-toolbar .trix-button:not(:first-child),
trix-toolbar .trix-button-group {
  border-color: rgba(0, 0, 0, 0.07);
}

trix-editor {
  background-color: hsl(var(--background));
  border: none;
  border: 1px solid hsl(var(--gray));
  border-radius: 0.5rem;
}

/* width tools */

.fill-width {
  max-width: 55rem;
  width: 100%;
}

/* titles */

h2.respondent-name,
.summary-title,
.response-comment h2,
.response-question h2 {
  margin: 0 0 0.5rem;
}

.meta {
  align-items: center;
  color: hsl(var(--dark-gray));
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.8rem;
}

.meta-item {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
}

.meta-question b,
.meta-question strong,
a.meta-item {
  font-weight: 700;
}

.meta-item:not(:last-child)::after {
  content: "•";
  display: inline;
}

.meta-item .icon {
  fill: hsl(var(--dark-gray));
  height: 16px;
  margin: 1px -0.2rem 0 0;
  width: 16px;
}