@import 'material-icons/iconfont/material-icons.css';
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
}

trix-toolbar * {
  box-sizing: border-box;
}

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px;
}

trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent;
}

trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}

trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: rgb(0, 0, 0);
}

trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}

@media (max-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}

trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%;
}

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-dialogs {
  position: relative;
}

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #F00 0px 0px 1.5px 1px;
}

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none;
}

trix-toolbar .trix-dialog--link {
  max-width: 600px;
}

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}

trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
}

trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable] ::-moz-selection, trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection {
  background: none;
}

trix-editor [data-trix-mutable] ::selection, trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}

trix-editor .attachment {
  position: relative;
}

trix-editor .attachment:hover {
  cursor: default;
}

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}

trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}

trix-editor .trix-button-group {
  display: inline-flex;
}

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}

trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}

trix-editor .trix-button.trix-active {
  background: #cbeefa;
}

trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}

trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}

trix-editor .trix-button--remove:hover {
  border-color: #333;
}

trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}

trix-editor .attachment__metadata-container {
  position: relative;
}

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}

trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}

.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}

.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}

.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}

.trix-content li {
  margin-left: 1em;
}

.trix-content [dir=rtl] li {
  margin-right: 1em;
}

.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}

.trix-content img {
  max-width: 100%;
  height: auto;
}

.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}

.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}

.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
  color: inherit;
}

.trix-content .attachment__caption {
  text-align: center;
}

.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: " •";
}

.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}

.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}

.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}

.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

* {
  box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --primary: #0f774a;
  --success: rgb(24, 152, 24);
  --danger: red;
  --warning: orange;
  --primary-text: white;
  --secondary: #b51f63;
  --offset: #ede5e9;
  --secondary-text: white;
  --button-bg: #dcd2db;
  --color: #453344;
  --label-color: #453344;
  --placeholder-color: #928791;
  --body-bg: #f7f5f2;
  --header-bg: #f7f5f2;
  --banner-bg: #f7f5f2f8;
  --header-color: var(--color);
  --container-color: #f7f5f2f8;
  --border-color: #dfd8df;
  --input-border-color: #dfd8df;
  --focused-border-color: rgba(0,0,0,.8);
  --header-text-light: black;
  --header-bg-light: white;
  --offset-input-bg: #e0e3e8;
  --block-color: #ffffff;
  --box-color: #ffffff;
}

body {
  color: var(--color);
  background-color: var(--body-bg);
}

main {
  background-color: var(--body-bg);
}

:root {
  --button-padding: 11px 20px;
  --padding: 22px;
  --container-padding: 32px;
  --inner-padding: 8px;
  --input-padding: 12px 20px;
  --input-left-padding: 12px;
  --gap: 8px;
}

.mt-4 {
  margin-top: var(--padding);
}

.mb-4 {
  margin-bottom: var(--padding);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-2 {
  margin-bottom: var(--gap);
}

.mt-2 {
  margin-top: var(--gap);
}

.material-icons-outlined {
  width: 20px;
}

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/material-icons/iconfont/material-icons-d30707a9b8b99656d1e8bf7e37d52db658645b32c44b7f85a019976c3c842171.woff2) format("woff2"), url(/assets/material-icons/iconfont/material-icons-e14011a9f84377b9f9972fe3a9fe92600d1f9e45daea46d4f8d7a011c993b5d8.woff) format("woff");
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 21px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/material-icons/iconfont/material-icons-outlined-0910b281aa5891f29a0897303464ac0a0a8263d4410c19e12854476904b8d11e.woff2) format("woff2"), url(/assets/material-icons/iconfont/material-icons-outlined-4fd1f8624cd0bb76f3899dd697a70097bbde5e818c9907ef813c99f8c4a129d9.woff) format("woff");
}
.material-icons-outlined {
  font-family: "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 21px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Round";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/material-icons/iconfont/material-icons-round-48acc2274b9a4a90de3a5d8d6287b62eb0860689c0877fb461ff1a88b4ea1535.woff2) format("woff2"), url(/assets/material-icons/iconfont/material-icons-round-5dde5b72601e134baeea37c1218ea1300cc6a9e0b715c48037b1b54b64747faf.woff) format("woff");
}
.material-icons-round {
  font-family: "Material Icons Round";
  font-weight: normal;
  font-style: normal;
  font-size: 21px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Sharp";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/material-icons/iconfont/material-icons-sharp-52f3ad9d5a851d92e7b3bbefd793fd90c3060f7fe433b20a57f9821d6df6c275.woff2) format("woff2"), url(/assets/material-icons/iconfont/material-icons-sharp-1e77de546dd4546abccf6b2868afeb761d43fc332095d31f49a83bb425363c67.woff) format("woff");
}
.material-icons-sharp {
  font-family: "Material Icons Sharp";
  font-weight: normal;
  font-style: normal;
  font-size: 21px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Two Tone";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/material-icons/iconfont/material-icons-two-tone-b52f79b196c76dc754ea22618d80be0d3e6c6f3ae72afa0d1ce3d74e037d90ce.woff2) format("woff2"), url(/assets/material-icons/iconfont/material-icons-two-tone-3631492c3c5a7b34a72f13bae26c273f80c998b76585755c0bcc093aeed5078a.woff) format("woff");
}
.material-icons-two-tone {
  font-family: "Material Icons Two Tone";
  font-weight: normal;
  font-style: normal;
  font-size: 21px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/open-sans-v18-latin-regular-5e4537d6f3b7ee582d1ac28fa3afcc2582dc2b58a005b93eb47a26944423eb2d.eot); /* IE9 Compat Modes */
  src: local(""), url(/assets/fonts/open-sans-v18-latin-regular-5e4537d6f3b7ee582d1ac28fa3afcc2582dc2b58a005b93eb47a26944423eb2d.eot?#iefix) format("embedded-opentype"), url(/assets/fonts/open-sans-v18-latin-regular-144103d9b1b96be7c53ba10656dec3ecbf2dc93c6d4607b58b23c5d46ba1b56f.woff2) format("woff2"), url(/assets/fonts/open-sans-v18-latin-regular-94ceba82812b674913d0186f92c1271bd086bcb68d76e4b8d1e5174c2a3d5e78.woff) format("woff"), url(/assets/fonts/open-sans-v18-latin-regular-77a8730ffa5bfa17e58e126974cd81d41b6f233849e297db743a084d4117a9ba.ttf) format("truetype"), url(/assets/fonts/open-sans-v18-latin-regular-d99aa5917df418f2a77c25ab3adfcce9f6865b916089c8d22030252e41e371b7.svg#OpenSans) format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/poppins-v15-latin-regular-f73091f0c2aad8801227ac1c034e28d2f31e0db88bfd762e424f804a99b82377.eot); /* IE9 Compat Modes */
  src: local(""), url(/assets/fonts/poppins-v15-latin-regular-f73091f0c2aad8801227ac1c034e28d2f31e0db88bfd762e424f804a99b82377.eot?#iefix) format("embedded-opentype"), url(/assets/fonts/poppins-v15-latin-regular-5dba317149dcc2225fb32198ab758f7fa30e53cdda346a5090829e77c0702a1b.woff2) format("woff2"), url(/assets/fonts/poppins-v15-latin-regular-9fb2e39feb58b76fcc6225bff771960b9b9835b857ae702b72b1d3bc28bccf4f.woff) format("woff"), url(/assets/fonts/poppins-v15-latin-regular-f8c121c5f3ce384d09cef8ddde35bc49ceae82d7df625d437acb279324071e8b.ttf) format("truetype"), url(/assets/fonts/poppins-v15-latin-regular-969d08f38b7e0f7b580361ac621e34a1ff7dbcb47c19f340b498fef8402ad67f.svg#Poppins) format("svg"); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/roboto-v20-latin-regular-198d2a2ecdafad282500e74ecfbba3e76955b738fa679219a76a71e23deb6f56.eot); /* IE9 Compat Modes */
  src: local(""), url(/assets/fonts/roboto-v20-latin-regular-198d2a2ecdafad282500e74ecfbba3e76955b738fa679219a76a71e23deb6f56.eot?#iefix) format("embedded-opentype"), url(/assets/fonts/roboto-v20-latin-regular-226f9e8b0157036149b2807307f7a1db204e52f66b7c0c64c9c8cb3913ec953b.woff2) format("woff2"), url(/assets/fonts/roboto-v20-latin-regular-8e3f1691e6f8fb5cc9c7484c74b650080caddbc4618e94ad4681001ef15dc7d4.woff) format("woff"), url(/assets/fonts/roboto-v20-latin-regular-9a45e77842ebaca4f5e7118fd5973faf979a9b4d7e426bfca5191884ced7c00c.ttf) format("truetype"), url(/assets/fonts/roboto-v20-latin-regular-3bea3afe6e3078ec3b0e56cd80ad97b059bb335af794ba57b5845ff44b77bcd3.svg#Roboto) format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "Material Symbols Outlined";
  src: url(/assets/material-symbols/MaterialSymbolsOutlined_28pt-Light-372db57d14a1c8b91f3aac6fca2504feafb3ce89380a504a70117e659f303c29.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* or inherit */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

body,
html {
  font-size: 16px;
  font-size: 15px;
  line-height: 1.4;
}

body {
  font-weight: 400;
  font-family: "Poppins", sans-serif !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

textarea,
input {
  font-family: "Poppins", sans-serif !important;
}

p {
  font-family: inherit !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", sans-serif !important;
  font-weight: 700;
}

h1, h2, h3 {
  margin-bottom: var(--padding);
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.2rem;
}

p {
  margin-bottom: calc(var(--padding) / 2);
}

body.iphone .container.dashboard {
  padding-top: 50px !important;
}
body.iphone .tabs-nav.offset--color,
body.iphone .client-appointment,
body.iphone .breadcrumbs {
  padding-top: 50px !important;
}
@media screen and (max-width: 700px) {
  body.iphone dialog:not(.small) {
    height: 90vh;
  }
}

body.iphone_18 .container.dashboard {
  padding-top: 60px !important;
}
body.iphone_18 .tabs-nav.offset--color,
body.iphone_18 .client-appointment,
body.iphone_18 .breadcrumbs {
  padding-top: 65px !important;
}
@media screen and (max-width: 700px) {
  body.iphone_18 dialog:not(.small) {
    height: 90vh;
  }
}

body.android .container.dashboard {
  padding-top: 40px !important;
}
body.android .tabs-nav.offset--color,
body.android .client-appointment,
body.android .breadcrumbs {
  padding-top: 40px !important;
}

.client-appointment {
  background: var(--primary);
  z-index: 1;
  padding: var(--gap);
  text-align: center;
  color: white;
  text-decoration: none;
  display: block;
  padding-top: 20px;
}

.intake-banner {
  background: var(--danger);
  z-index: 100;
  color: white;
  padding: var(--gap);
  text-align: center;
  text-decoration: none;
  display: block;
}

.container.goals {
  padding-bottom: 150px !important;
}

.container.dashboard {
  padding-bottom: 150px !important;
  padding-top: calc(env(safe-area-inset-top) + var(--padding)) !important;
}
.container.dashboard .list .main-card {
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 0;
}
.container.dashboard .list .list-item.transpartent {
  margin-right: 0;
  margin-left: 0;
  margin-right: calc(var(--padding) * -1);
}
.container.dashboard .list .list-item.transpartent .tab.full-width {
  margin: 0;
  padding: 0;
}
.container.dashboard .list .scroll-snap.full-width {
  padding-top: 0;
  padding-bottom: 0;
}
.container.dashboard .list .action-banner.inline {
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 0;
}

.container.empty-container {
  padding-bottom: 0 !important;
  padding-top: 100px !important;
}

.action-banner {
  background-color: var(--banner-bg);
  padding: var(--padding);
  text-decoration: none;
  color: var(--color);
  text-decoration: none;
}
.action-banner h2, .action-banner h1 {
  color: var(--primary);
  margin-bottom: var(--gap);
}
.action-banner h2 a, .action-banner h1 a {
  text-decoration: none;
  color: inherit !important;
}
.action-banner img {
  width: 100%;
  height: auto;
}
.action-banner .action-fabs {
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  margin-top: var(--padding);
}
.action-banner .action-fabs form {
  margin: 0;
  width: unset;
}
.action-banner .action-fabs .button {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.action-banner .action-fabs .button .material-symbols-outlined {
  position: unset;
}
.action-banner.inline {
  max-width: unset;
  border-radius: 20px;
  border-radius: 15px;
}
.action-banner.inline .actions {
  margin-top: var(--padding);
  margin-bottom: 0;
}
.action-banner.has-tip a {
  text-decoration: none;
}
.action-banner.has-tip a h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.action-banner.is--goal {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.action-banner .additinal-information {
  justify-content: space-between;
}
.action-banner .actions.button-links {
  font-weight: bold;
  align-items: flex-end;
  margin-top: var(--padding) !important;
}
@media screen and (min-width: 701px) {
  .action-banner {
    position: fixed;
    bottom: var(--padding);
    right: var(--padding);
    max-width: 368px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1215686275);
    border: 1px solid var(--border-color);
    margin-top: 0;
    margin-bottom: 0;
  }
  .action-banner.inline {
    position: relative;
    margin-top: var(--padding);
    margin-bottom: var(--padding);
    width: unset;
    /* max-width: unset; */
    box-shadow: none;
    right: 0;
    bottom: 0;
    max-width: unset;
  }
}
.action-banner .header {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: var(--gap);
}
.action-banner .actions {
  margin-top: var(--padding);
}

.main-card {
  background: var(--banner-bg);
  border-radius: 15px;
  padding: var(--padding);
  position: relative;
  text-decoration: none;
  position: relative;
  z-index: 2;
}
.main-card h2 {
  margin-bottom: var(--gap);
}
.main-card.hapiness .text {
  text-decoration: none;
  color: inherit;
}
.main-card .title {
  font-weight: bold;
  font-size: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main-card .title a {
  color: inherit;
}
.main-card .title .actions {
  display: flex;
  gap: var(--gap);
}
.main-card .title .actions button {
  padding: 0;
}
.main-card .title .actions button .material-symbols-outlined {
  position: inherit;
  right: 0;
}
.main-card .date {
  font-size: 0.9rem;
}
.main-card .user-properties {
  margin: var(--gap) 0;
}
.main-card .user-properties .property {
  white-space: nowrap;
  display: flex;
  gap: var(--gap);
  align-items: center;
}
.main-card .user-properties .property label {
  font-weight: bold;
}
.main-card .user-properties .property .material-symbols-outlined {
  font-size: 1rem;
}
.main-card .user-properties .property.is--flex {
  display: flex;
  align-items: flex-start;
}
.main-card .user-properties .property.is--flex .value {
  white-space: wrap;
}
.main-card .text {
  margin: var(--padding) 0;
}
.main-card .additinal-information {
  justify-content: space-between;
}
.main-card .action {
  position: absolute;
  top: var(--padding);
  right: var(--padding);
  width: 30px;
  height: 30px;
  border: 1px solid var(--color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  color: var(--color);
  font-size: 26px;
  text-decoration: none;
}

.chat-card {
  width: 100%;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-end;
  position: relative;
  z-index: 10;
  gap: 8px;
}
.chat-card .img {
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 50px;
  padding: 2px;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
  border-image: initial;
}
.chat-card .chat-bubble {
  background-color: var(--secondary);
  color: white;
  flex-grow: 1;
  position: relative;
  padding: var(--padding);
  border-radius: 15px;
  margin-bottom: 10px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3882352941);
}
.chat-card .chat-bubble .title {
  font-size: 1.2rem;
}
.chat-card .chat-bubble:before {
  display: block;
  position: absolute;
  top: 75%;
  left: -13px;
  content: "";
  transform: translateY(-50%);
  border-right: 18px solid transparent;
  border-top: 18px solid transparent;
  border-bottom: 1px solid var(--secondary);
  border-right-color: var(--secondary) !important;
}

.card-tip {
  padding: var(--padding);
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
  color: var(--text);
}
.card-tip img {
  width: 30px;
  /* filter: grayscale(1); */
  background: white;
  border-radius: 50%;
}

.button,
button,
input[type=submit] {
  background: var(--button-bg);
  background-color: transparent;
  display: inline-flex;
  align-items: center;
  padding: var(--button-padding);
  border-radius: 24px;
  text-decoration: none;
  border: 1px solid transparent;
  outline: 0;
  font-size: 1rem;
  white-space: nowrap;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: all 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  color: inherit;
  background-color: var(--button-bg);
  background-color: transparent;
  position: relative;
}
.button .material-symbols-outlined,
button .material-symbols-outlined,
input[type=submit] .material-symbols-outlined {
  position: absolute;
  right: var(--padding);
  top: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button.no-text .material-symbols-outlined,
button.no-text .material-symbols-outlined,
input[type=submit].no-text .material-symbols-outlined {
  right: 0;
  left: 0;
}
.button.is-left-right,
button.is-left-right,
input[type=submit].is-left-right {
  width: 25px;
  height: 25px;
  display: block;
  padding: 0;
  border: 1px solid black;
}
.button.is-secondary,
button.is-secondary,
input[type=submit].is-secondary {
  background: var(--container-color);
  color: var(--text-color);
}
.button.is-recalculate,
button.is-recalculate,
input[type=submit].is-recalculate {
  color: white;
  background: var(--primary);
}
.button.is-primary,
button.is-primary,
input[type=submit].is-primary {
  color: #fff;
  background-color: var(--secondary);
}
.button.is-success,
button.is-success,
input[type=submit].is-success {
  color: #fff;
  background-color: var(--success);
}
.button.is-danger,
button.is-danger,
input[type=submit].is-danger {
  color: #fff;
  background-color: var(--danger);
}
.button.is-delete,
button.is-delete,
input[type=submit].is-delete {
  background: transparent;
}
.button.is-add,
button.is-add,
input[type=submit].is-add {
  background: transparent;
}
.button.is-info,
button.is-info,
input[type=submit].is-info {
  color: #fff;
  background-color: var(--info);
}
.button.button-link, .button.is-link,
button.button-link,
button.is-link,
input[type=submit].button-link,
input[type=submit].is-link {
  text-decoration: underline;
  padding-right: 0;
  padding-left: 0;
  background: var(--container-color);
}
.button.button-link.no-decoration, .button.is-link.no-decoration,
button.button-link.no-decoration,
button.is-link.no-decoration,
input[type=submit].button-link.no-decoration,
input[type=submit].is-link.no-decoration {
  text-decoration: none;
}
.button.is-transparent,
button.is-transparent,
input[type=submit].is-transparent {
  background-color: transparent;
}
.button.is-menu,
button.is-menu,
input[type=submit].is-menu {
  padding: 0;
}
.button.is-menu .material-symbols-outlined,
button.is-menu .material-symbols-outlined,
input[type=submit].is-menu .material-symbols-outlined {
  position: initial;
}

input[type=submit] {
  color: #fff;
  background-color: var(--secondary);
}

.fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-left: auto;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2784313725);
  font-size: 30px;
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
}
.fab.fixed {
  position: fixed;
  bottom: var(--padding);
  right: var(--padding);
  z-index: 100;
}
.btn.btn-square {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  text-decoration: none;
}
.btn.btn-square.mini {
  width: 20px;
  height: 20px;
  font-size: 12px;
}

.action-buttons {
  background: white;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: var(--padding);
  margin: 0;
}
@media screen and (max-width: 700px) {
  .action-buttons {
    margin: var(--padding) 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    background-color: transparent;
    align-items: stretch;
    position: fixed;
    right: 0;
    left: 0;
    bottom: 48px;
    bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 48px); /* Fallback for non-iOS */
    z-index: 10;
  }
}
.action-buttons form {
  display: flex;
  align-items: center;
  justify-content: stretch;
}
.action-buttons form button {
  flex-grow: 1;
}
@media screen and (max-width: 700px) {
  .action-buttons.has-fab {
    left: unset;
  }
}

.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--box-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
  z-index: 1;
}

.spinner-button {
  display: flex;
  align-items: center;
  gap: var(--gap);
  position: relative;
}
.spinner-button.is--centered {
  justify-content: center;
}
.spinner-button #spinner {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.spinner-button #spinner .spinner-icon {
  animation: spin 1s linear infinite;
  display: inline-block;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.spinner-button.loading input[type=submit] {
  opacity: 0.2;
}
.spinner-button.loading #spinner {
  display: block;
}

.button.is-menu-button {
  color: var(--color);
  text-decoration: none;
  background: var(--container-color);
}

form,
.form {
  margin-bottom: calc(var(--padding) * 2);
}
form .help-block,
.form .help-block {
  background-color: #eaeaea;
  padding: 10px;
  margin: var(--padding) 0;
}
form .help-block .help-text,
.form .help-block .help-text {
  font-size: 0.9rem;
  margin-bottom: var(--padding);
}
form .help-block label.label,
.form .help-block label.label {
  background-color: #eaeaea !important;
}
form:last-child,
.form:last-child {
  margin-bottom: 0;
}
form trix-editor,
.form trix-editor {
  margin-bottom: var(--padding);
}
form .preview-image,
.form .preview-image {
  width: 100%;
  margin-bottom: var(--padding);
}
form .title,
.form .title {
  margin: var(--padding) 0;
  font-weight: bold;
}
form .actions,
.form .actions {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin-top: var(--padding);
}
@media screen and (max-width: 700px) {
  form .actions,
  .form .actions {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    align-items: stretch;
    gap: var(--gap);
  }
}
form .actions.fabs,
.form .actions.fabs {
  justify-content: space-between !important;
}
form .actions.fabs form,
.form .actions.fabs form {
  margin: 0;
}
form .actions.fabs .button,
.form .actions.fabs .button {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
form .actions.fabs .button .material-symbols-outlined,
.form .actions.fabs .button .material-symbols-outlined {
  position: unset;
}
@media screen and (max-width: 700px) {
  form .actions .button,
  .form .actions .button {
    flex-grow: 1;
  }
}
form .options a,
.form .options a {
  text-decoration: none;
  color: var(--text);
}
form .options.flex,
.form .options.flex {
  flex-wrap: wrap;
}
form .option-group,
.form .option-group {
  border: 1px solid var(--border-color);
  padding: var(--gap);
  margin: var(--gap) 0;
}
form .disabled,
.form .disabled {
  opacity: 0.5;
  pointer-events: none;
}

.field {
  position: relative;
  margin: var(--padding) 0;
  margin-top: calc(var(--padding) * 1.5);
  margin: var(--padding) 0;
  margin-top: 0;
}
.field:first-child {
  margin-top: calc(var(--padding) / 2);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  position: relative;
  display: block;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  background-color: transparent;
  padding: var(--input-padding);
  outline: none !important;
  transition: all 0.2s ease-in-out;
  font-size: 16px;
}
.field input:disabled,
.field textarea:disabled,
.field select:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.field .disabled {
  opacity: 0.5;
  pointer-events: none;
}
.field input::placeholder,
.field textarea::placeholder {
  color: transparent;
}
.field input::-webkit-contacts-auto-fill-button,
.field textarea::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
}
.field .label {
  position: absolute;
  top: 50%;
  font-size: 0.9rem;
  transform: translateY(-50%);
  left: var(--input-left-padding);
  text-align: left;
  display: inline-block;
  font-weight: 400;
  background: var(--container-color);
  color: var(--placeholder-color);
  cursor: text;
  transition: all 0.15s ease-in-out;
  z-index: 10;
}
.field input:hover, .field input:focus, .field textarea:hover, .field textarea:focus {
  border: 1px solid var(--focused-border-color);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  top: 0%;
  font-weight: bold;
  color: var(--label-color);
}
.field .textarea label {
  top: 0% !important;
  font-weight: bold !important;
  color: var(--label-color) !important;
}
.field.select {
  position: relative;
}
.field.select select {
  -webkit-appearance: none;
  appearance: none;
}
.field.select label {
  top: 0% !important;
  font-weight: bold !important;
  color: var(--label-color) !important;
}
.field.select::after {
  content: "⌄";
  font-size: 1rem;
  pointer-events: none;
  top: 50%;
  transform: translateY(-70%);
  right: 15px;
  position: absolute;
}
.field .file_input label {
  top: 0% !important;
  font-weight: bold !important;
  color: var(--label-color) !important;
}
.field .file_input input[type=file] {
  display: none;
}
.field .file_input > div {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  background-color: transparent;
  padding: var(--input-padding);
  outline: none !important;
  transition: all 0.2s ease-in-out;
}

.checkbox {
  margin: var(--padding) 0;
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
}
.checkbox label {
  display: initial;
}

.checkbox-icon input[type=checkbox] {
  display: none;
}
.checkbox-icon.checked {
  color: var(--danger);
}

.help {
  margin-top: calc(var(--padding) * -1);
  font-size: 0.9rem;
}

.text-danger {
  color: var(--danger);
  font-size: 0.9rem;
}

.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
  background-color: rgba(220, 53, 69, 0.05) !important;
}

.checkbox-image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.checkbox-image.small .allergen-image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.checkbox-image img {
  filter: grayscale(1);
}
.checkbox-image .allergen-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkbox-image .allergen-name {
  font-size: 0.7rem;
}
.checkbox-image.checked {
  border-radius: 50%;
}
.checkbox-image.checked .allergen-image {
  border: 2px solid var(--danger);
  background-color: var(--danger);
}
.checkbox-image.checked .allergen-image img {
  filter: brightness(10);
}
.checkbox-image.intolerance.checked .allergen-image {
  border: 2px solid var(--warning);
  background-color: var(--warning);
}
.checkbox-image.intolerance.checked .allergen-image img {
  filter: brightness(10);
}
.checkbox-image input {
  display: none;
}
.checkbox-image label.label {
  display: none;
}

.search {
  display: grid;
  align-items: flex-start;
  gap: var(--gap);
  grid-template-columns: 1fr min-content;
}
.search .search-now {
  border: 0;
  margin: 0;
  /* min-width: 64px; */
  color: #F3F3F4;
  width: 100%;
  text-transform: none;
  padding: calc(var(--padding) + 3px);
  white-space: nowrap;
  background-color: #296236;
}
.search input {
  text-align: left;
  background-color: var(--offset-input-bg);
  border-radius: 4px;
  padding: var(--padding);
  border: none;
  width: 100%;
}
.search .search-data {
  max-height: 40vh;
  overflow: auto;
  border: 1px solid #d8d8d8;
  border-top: none;
  max-height: 39vh;
  overflow: auto;
  border-bottom: 2px solid silver;
  background-color: var(--offset-input-bg);
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1000;
  top: 96%;
  border-top: 1px solid silver;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.search .search-data ul li a {
  display: block;
  padding: var(--gap);
  text-decoration: none;
  color: var(--color);
}

.front-form-field {
  margin: var(--padding) 0;
  margin-top: calc(var(--padding) * 1.5);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.front-form-field .sub-field-set {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  background-color: rgb(242, 246, 253);
  background-color: rgb(30, 57, 36);
  padding: var(--gap);
}

.properties {
  margin-top: var(--padding);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: flex-start;
}
.properties .title {
  font-weight: bold;
}
.properties .property label {
  font-weight: 200;
  opacity: 0.8;
  font-size: 1rem;
}
.properties .property .switch-container {
  pointer-events: none;
}
.properties .property.is--flex .value {
  white-space: wrap;
}
.properties .actions {
  margin-top: var(--padding);
}

.turbo-progress-bar {
  background: linear-gradient(to right, var(--primary), var(--secondary));
}

header {
  padding: 0 var(--padding) 0 var(--padding);
  display: flex;
  align-items: stretch;
  background-color: var(--header-bg);
  color: var(--header-color);
}
header.client-header {
  padding: 0;
}
header.client-header .menu-logo {
  position: absolute;
  bottom: 40%;
  background: white;
  padding: 8px;
  width: 100%;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  left: 0px;
  right: 0;
  padding: 19px;
  padding-bottom: 22px;
  z-index: -1;
  padding-right: 14px;
  padding-left: 24px;
  padding-top: 9px;
  border: 1px solid var(--border-color);
  border-right: none;
  border-left: none;
  border-bottom: none;
}
header.transpartent {
  background-color: transparent;
}
header.dashboard, header.user_intakes {
  background-color: transparent;
}
header.main-header {
  background-color: var(--box-color);
}
header .logo {
  margin-right: var(--gap);
  display: flex;
  align-items: center;
  justify-content: center;
}
header .logo img {
  height: 50px;
  width: auto;
}
header .flex-grow {
  flex-grow: 1;
}
header .breadcrumbs {
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  background-color: transparent;
  color: var(--header-color);
  display: flex;
  justify-content: flex-end;
  text-decoration: none;
}
header .title {
  display: block;
  text-align: right;
}
header .information {
  display: flex;
  gap: var(--gap);
  align-items: center;
}
header .information a {
  text-decoration: none;
}
header .tabs {
  display: flex;
  margin: 0;
  padding: 0 var(--inner-padding);
  margin-right: auto;
}
header a {
  color: inherit;
}
header ul.tabs li {
  list-style-type: none;
  padding: 0;
}
header .dropdown, header .dropup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
header .dropdown .dropdown-menu, header .dropup .dropdown-menu {
  min-width: 220px;
  border-radius: 2px;
  border-top-left-radius: 0;
  box-shadow: 0 2px 16px rgba(69, 51, 68, 0.16), 0 4px 64px rgba(69, 51, 68, 0.16);
  padding: var(--inner-padding) 0;
  position: absolute;
  left: -1px;
  z-index: 1000;
  display: none;
  list-style: none;
  background-color: var(--header-bg);
  top: calc(100% - 2px);
}
header .dropdown .dropdown-menu form, header .dropup .dropdown-menu form {
  margin: 0;
}
header .dropdown .dropdown-menu .dropdown-item, header .dropup .dropdown-menu .dropdown-item {
  padding: var(--padding);
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  display: block;
  width: 100%;
  background: none;
  border: none;
  display: flex;
  justify-content: flex-start;
}
header .dropdown .dropdown-menu .dropdown-item:hover, header .dropup .dropdown-menu .dropdown-item:hover {
  font-weight: bold;
}
header .dropdown .dropdown-menu.dropdown-left, header .dropup .dropdown-menu.dropdown-left {
  right: 0;
  left: unset;
  right: -1px;
  top: calc(100% - 1px);
}
header .dropdown:hover, header .dropdown.show, header .dropup:hover, header .dropup.show {
  border-left: 1px solid #dfd8df;
  border-right: 1px solid #dfd8df;
  z-index: 1001;
  cursor: default;
}
header .dropdown:hover :after, header .dropdown.show :after, header .dropup:hover :after, header .dropup.show :after {
  content: "";
  width: 100%;
  height: 2px;
  background: var(--header-bg);
  position: absolute;
  bottom: -2px;
  left: 0;
  border: none;
}
header .dropdown:hover .dropdown-menu, header .dropdown.show .dropdown-menu, header .dropup:hover .dropdown-menu, header .dropup.show .dropdown-menu {
  display: block;
}
header .dropdown-toggle,
header .menu-item {
  z-index: 1001;
  cursor: default;
  padding: var(--padding) var(--inner-padding);
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
}
header .dropdown-toggle .material-symbols-outlined,
header .menu-item .material-symbols-outlined {
  display: none;
}
header .dropdown-toggle .icon-s,
header .menu-item .icon-s {
  margin-left: var(--gap);
  font-size: 16px;
  line-height: 16px;
  max-width: 16px;
}
header .dropdown-toggle .person-photo,
header .menu-item .person-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 0.8rem;
  background-color: var(--secondary);
  color: var(--secondary-text);
  border-radius: 50%;
  border: 1px solid var(--border-color);
}
header .dropdown-toggle .person-photo img,
header .menu-item .person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
header .dropdown-toggle.active :after,
header .menu-item.active :after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 4px solid var(--primary);
  left: calc(50% - 24px);
  background: 0 0;
  bottom: 0;
}
header .dropdown-toggle a,
header .menu-item a {
  text-decoration: none;
}
header .menu-item {
  padding: var(--padding) !important;
}
header .user-menu {
  display: flex;
  align-items: center;
  justify-content: center;
}
header .user-menu a,
header .user-menu img {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  border: 1px solid var(--user-icon-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary);
  border-radius: 50%;
  text-decoration: none;
  object-fit: cover;
}
header.unauthorized-header .logo {
  padding: 8px;
}

.tabs-nav {
  z-index: 1;
  position: relative;
}

.client-menus ul {
  background: white;
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.client-menus ul li {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--gap) var(--padding);
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  background: #dbdbdb;
}
.client-menus ul li.active {
  background: #f7f5f2;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1882352941);
}
.client-menus ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}
.client-menus ul li .material-symbols-outlined {
  font-size: 14px;
}

@media screen and (max-width: 700px) {
  header {
    justify-content: space-between;
    padding: var(--padding) var(--padding);
    padding-top: 26px;
    gap: var(--gap);
  }
  header .title {
    flex-grow: 1;
  }
  header .dropdown {
    align-items: stretch;
  }
  header .dropdown:hover, header .dropdown.show {
    border-right: 0;
    border-left: 0;
  }
  header .dropdown:hover .dropdown-menu:not(.dropdown-menu-person), header .dropdown.show .dropdown-menu:not(.dropdown-menu-person) {
    top: unset;
    /* border-bottom: 1px solid var(--border-color); */
    z-index: 100;
    bottom: 57px;
    /* padding-bottom: 58px; */
    padding: 0;
    left: 1px;
    right: 1px;
    position: fixed;
    /* padding-bottom: 58px; */
  }
  header .dropdown:hover .dropdown-menu-person.show, header .dropdown.show .dropdown-menu-person.show {
    top: calc(100% + 3px);
  }
  header .dropdown:hover .dropdown-menu-person a, header .dropdown.show .dropdown-menu-person a {
    color: var(--color);
  }
  header .dropdown .dropdown-toggle {
    width: 100%;
    padding: 0;
  }
  header ul.tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    z-index: 1;
    margin-bottom: 0 !important;
  }
  header ul.tabs li {
    border-right: 1px solid var(--border-color);
    flex-grow: 1;
  }
  header ul.tabs li:last-child {
    border-right: 1px solid var(--border-color);
  }
  header ul.tabs li:first-child {
    border-left: 1px solid var(--border-color);
  }
  header ul.tabs .dropdown-menu {
    background-color: var(--header-bg-light);
    color: var(--header-text-light);
  }
  header ul.tabs .dropdown-menu a {
    color: var(--header-text-light);
  }
  header ul.tabs .dropdown .dropdown-toggle,
  header ul.tabs .dropdown .dropdown-toggle {
    background-color: var(--header-bg-light);
    background-color: var(--body-bg);
  }
  header ul.tabs .dropdown .dropdown-toggle :after,
  header ul.tabs .dropdown .dropdown-toggle :after {
    background-color: var(--header-bg-light);
  }
  header ul.tabs .dropdown .dropdown-menu:after,
  header ul.tabs .dropdown .dropdown-menu:after {
    background-color: var(--header-bg-light);
  }
  header ul.tabs .dropdown .dropdown-menu .dropdown-item:after,
  header ul.tabs .dropdown .dropdown-menu .dropdown-item:after {
    background-color: var(--border-color);
  }
  header ul.tabs .dropdown-toggle,
  header ul.tabs .menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--header-text-light);
    background-color: var(--header-bg-light);
  }
  header ul.tabs .dropdown-toggle .icon-s,
  header ul.tabs .menu-item .icon-s {
    display: none;
  }
  header ul.tabs .dropdown-toggle .material-symbols-outlined,
  header ul.tabs .menu-item .material-symbols-outlined {
    display: inline;
  }
  header ul.tabs .dropdown-toggle .text,
  header ul.tabs .menu-item .text {
    display: none;
  }
  header ul.tabs .dropdown-toggle a,
  header ul.tabs .menu-item a {
    color: var(--header-text-light);
    text-decoration: none;
    display: flex;
    align-items: center;
  }
}
.header-menu .menu-item {
  position: relative;
}
.header-menu .menu-item .marker {
  position: absolute;
  top: -5px;
  right: -5px;
  border-radius: 50%;
  border: 1px solid white;
  background-color: #b5ddc4;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-menu ul {
  display: flex;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}
.header-menu ul li {
  color: #296236;
  background-color: #b5ddc4;
  border: 1px solid white;
  padding: var(--padding);
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.side-menu {
  background-color: var(--primary);
  border-color: var(--primary);
  color: white;
}
.side-menu .header {
  border-color: var(--primary);
}
.side-menu .header .close {
  color: white;
}
.side-menu .body {
  display: grid;
  grid-template-rows: 1fr min-content;
}
.side-menu nav {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.side-menu nav ul {
  gap: var(--padding);
  display: flex;
  flex-direction: column;
}
.side-menu a {
  display: flex;
  color: white;
  text-decoration: none;
  gap: var(--gap);
  text-align: center;
  align-items: center;
}

.hapiness-list {
  display: flex;
  justify-content: space-between;
}

.hapiness-scores {
  display: flex;
  gap: var(--gap);
  justify-content: space-between;
  cursor: pointer;
}
.hapiness-scores .hapiness {
  filter: grayscale(1) opacity(0.5);
  font-size: 45px;
}
.hapiness-scores .hapiness.selected {
  filter: none;
}

.hapiness-score {
  color: var(--color);
  display: block;
  text-decoration: none;
  position: relative;
}
.hapiness-score .hapiness {
  font-size: 45px;
}
.hapiness-score .score {
  position: absolute;
  bottom: 64px;
  right: -2px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 26px;
  background: var(--secondary);
  color: var(--secondary-text);
}

.very-dissatified {
  position: relative;
  color: red;
}

.very-dissatified-marker:after {
  content: " ";
  border: 1px solid red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
}

.dissatified {
  position: relative;
  color: #c50965;
}

.dissatified-marker:after {
  content: " ";
  border: 1px solid #c50965;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
}

.satisfied {
  position: relative;
  color: #01aba5;
}

.satisfied-marker:after {
  content: " ";
  border: 2px solid #01aba5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
}

.very-satisfied {
  position: relative;
  color: rgb(0, 209, 0);
}

.very-satisfied-marker:after {
  content: " ";
  border: 1px solid rgb(0, 209, 0);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
}

.neutral {
  position: relative;
}

.neutral-marker:after {
  content: " ";
  border: 1px solid black;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
}

.main-card.hapiness.very-dissatified {
  background-color: red;
}

.main-card.hapiness.dissatified {
  background-color: orange;
}

.main-card.hapiness.satisfied {
  background-color: green;
}

.main-card.hapiness.very-satisfied {
  background-color: rgb(0, 209, 0);
}

.hapiness-range-bar {
  margin-right: 23px;
  margin-left: 23px;
}

.hapiness-bar-container {
  position: relative;
  height: 5px;
  background: linear-gradient(to right, red, #00d100);
  border-radius: 6px;
  margin-bottom: 12px;
  margin-top: 12px;
}

.hapiness-bar {
  height: 100%;
  border-radius: 6px;
  margin-right: -23px;
  margin-left: -23px;
  background: linear-gradient(to right, red, #00d100);
}

.hapiness-marker {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 20px;
  background: rgb(170, 170, 170);
}

.hapiness-marker.min {
  background: red;
}

.hapiness-marker.max {
  background: green;
}

.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.empty img {
  width: auto;
  max-height: 200px;
  aspect-ratio: 1/1;
}
.empty .image {
  font-size: 200px;
}
.empty .explanation-text {
  font-size: 1rem;
  margin: var(--padding);
  text-align: center;
}
.empty .empty-text {
  font-size: 2rem;
  margin: var(--padding);
  text-align: center;
}

.breadcrumbs {
  display: flex;
  gap: var(--gap);
  padding: var(--padding);
  background: var(--primary);
  color: var(--primary-text);
  align-items: center;
}
.breadcrumbs a {
  color: var(--primary-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.breadcrumbs .breadcrumb:not(:last-child) {
  font-size: 0.8rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.breadcrumbs .breadcrumb:not(:last-child):after {
  content: "|";
  padding-left: var(--gap);
}

.action-links {
  margin-top: var(--padding);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.action-links .action-link {
  color: var(--text);
  text-decoration: none;
}
.action-links .action-link.highlight {
  padding: 10px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}
.action-links .action-link.single {
  padding: var(--padding);
  background: #FAF7FA;
}
.action-links .action-link .additional-information {
  font-weight: unset;
  font-size: 1rem;
  margin-left: var(--gap);
  opacity: 0.8;
}
.action-links .action-link label {
  opacity: 0.8;
}
.action-links .action-link .value {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: var(--color);
  text-decoration: none;
  gap: var(--gap);
}
.action-links .action-link .value > span:first-of-type {
  flex-grow: 1;
}
.action-links.compact .action-link .value {
  justify-content: flex-start;
}
.action-links.compact .action-link .value > span:first-of-type {
  flex-grow: 0 !important;
}
.action-links.inline {
  margin-bottom: calc(var(--padding) * 2);
}
.action-links.inline .action-link {
  padding: 0;
}
.action-links.inline .action-link .value {
  justify-content: flex-start;
}
.action-links.inline .action-link .value > span:first-of-type {
  flex-grow: 0 !important;
}

table {
  border-collapse: collapse;
  width: 100%;
}
table th {
  color: #453344;
  font-weight: bold;
  padding: var(--gap);
  box-sizing: content-box;
  white-space: nowrap;
  border-bottom: 1px solid black;
  text-align: left;
  vertical-align: middle;
}
table th.center {
  text-align: center;
}
table th.right {
  text-align: right;
}
table td {
  padding: var(--gap);
  box-sizing: content-box;
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
}
table td.center {
  text-align: center;
}
table td.right {
  text-align: right;
}
table td a {
  color: inherit;
}
table td.wrap {
  white-space: normal;
}
table td.list ul {
  max-height: 100px;
  overflow: scroll;
}
table tr:nth-of-type(odd) td {
  background-color: #faf7fa;
}
table tr.detail-row td {
  background-color: transparent;
  font-size: 0.9rem;
}
table tr.full-row td {
  background-color: #faf7fa;
}
table .btn.btn-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid #dfd8df;
  border-radius: 4px;
  text-decoration: none;
}
table .btn.btn-square .material-icons {
  font-size: 0.9rem;
  padding: 4px;
}
table form {
  margin: 0;
  padding: 0;
}
table .dropdown-menu {
  padding: 0;
}
table .btn.btn-delete {
  background: transparent;
  margin: 0;
  padding: 0;
  border: none;
}
table .menu {
  display: inline-block;
  text-align: left;
}
table .menu .dropdown-item {
  border-bottom: 1px solid var(--border-color);
}
table .menu .dropdown-item a {
  text-decoration: none;
}
table .menu .dropdown-item:last-child {
  border-bottom: none;
}

.search-input {
  display: flex;
  gap: var(--gap);
  align-items: center;
}

.search-filters {
  display: flex;
  gap: var(--gap);
}
.search-filters.multi-line {
  flex-direction: column;
}
.search-filters.multi-line .field {
  margin-bottom: 0;
}
.search-filters.multi-line .field label {
  background-color: var(--box-color);
}
.search-filters .flex-fiters {
  display: flex;
  gap: var(--gap);
}
.search-filters .flex-fiters .form-control {
  flex-grow: 1;
}
.search-filters .fields {
  display: none;
}
.search-filters .fields.show {
  display: block;
}
.search-filters .fields select {
  min-width: 200px;
}

@media screen and (max-width: 700px) {
  thead {
    display: none;
  }
  tbody {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
  }
  tr {
    position: relative;
    display: block;
    flex: 0 0 100%;
    border-bottom: 1px solid var(--color-border);
  }
  tr td {
    display: block;
    white-space: normal;
    word-break: break-word;
    border: none !important;
    display: flex;
    gap: var(--gap);
  }
  tr td .table-label {
    font-weight: bold;
  }
  td.td-actions .dropdown-toggle {
    display: none !important;
  }
  td.td-actions .dropdown-menu {
    display: inline !important;
    position: initial !important;
    border: none !important;
    background: none !important;
  }
  td.td-actions .dropdown-menu .dropdown-item {
    padding: 0 !important;
    border-bottom: none !important;
  }
  td.td-actions .dropdown-menu .dropdown-item:first-child {
    padding-top: 0 !important;
  }
}
.toasts {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  z-index: 10000;
  pointer-events: none;
}
.toasts.sticky {
  pointer-events: auto;
  z-index: 100000;
}
.toasts .snackbar-container {
  max-width: 300px;
  margin-right: auto;
  margin-left: auto;
  animation: fadein 0.5s, fadeout 0.5s 5s;
  animation-fill-mode: forwards;
}
.toasts .snackbar-container.sticky {
  animation: none;
  max-width: none;
}

.snackbar {
  visibility: visible;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: var(--padding);
  z-index: 1;
}
.snackbar.snackbar--sticky {
  text-align: left;
}
.snackbar.alert {
  background-color: red;
}

@keyframes fadein {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(-10px);
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    transform: translateY(-10px);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}
.dietician {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: var(--padding);
  padding: var(--gap);
  margin: var(--gap) 0px;
  align-items: center;
}
.dietician input[type=radio] {
  display: none;
}
.dietician.active {
  filter: none;
}
.dietician.checked img {
  border: 2px solid green;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.097);
}
.dietician img {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1/1;
  border: 1px solid var(--border-color);
  object-fit: cover;
  width: 80px;
  max-width: 15vw;
  height: auto;
}
.dietician .title {
  color: var(--primary);
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0;
}

.switch-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.switch-container label.label {
  position: unset;
  color: var(--text);
  font-size: 1rem;
}

.switch {
  margin-left: var(--gap);
  position: relative;
  display: inline-block;
  width: 45px;
  height: 25px;
  flex: 0 0 45px !important;
  flex-grow: 0 !important;
  /* Rounded sliders */
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 21px;
  width: 21px;
  left: 1px;
  bottom: 1px;
  transition: 0.4s;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
}
.switch input:checked + .slider {
  background-color: var(--input-bg);
}
.switch input:focus + .slider {
  box-shadow: 0 0 1px var(--success);
}
.switch input:checked + .slider:before {
  transform: translateX(20px);
  background-color: var(--success);
}
.switch .slider.round {
  border-radius: 34px;
}
.switch .slider.round:before {
  border-radius: 50%;
}

.menu {
  position: relative;
}

.dropdown-toggle {
  position: relative;
}
.dropdown-toggle.show {
  z-index: 1001;
  cursor: default;
  border-color: var(--primary);
}

.dropdown-menu {
  border-radius: 2px;
  border-top-left-radius: 0;
  box-shadow: 0 2px 16px rgba(69, 51, 68, 0.16), 0 4px 64px rgba(69, 51, 68, 0.16);
  padding: var(--inner-padding) 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  list-style: none;
  background-color: var(--body-bg);
  border: 1px solid var(--border-color);
  color: var(--color);
}
.dropdown-menu .dropdown-item {
  padding: var(--padding);
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  display: block;
}
.dropdown-menu .dropdown-item:hover {
  font-weight: bold;
}
.dropdown-menu .dropdown-item .checkbox {
  margin: 0;
}
.dropdown-menu.show {
  display: block;
}

.menu.dropdown-left .dropdown-menu {
  right: 0;
  left: unset;
  right: -1px;
  top: calc(100% - 1px);
}

.add-item {
  display: flex;
  align-items: center;
  gap: var(--gap);
  font-weight: bold;
  margin-bottom: var(--padding);
  margin-top: 0;
}

.add-item-header {
  margin-bottom: var(--padding);
  margin-top: calc(var(--padding) * 2);
  font-weight: bold;
  font-size: 1.2rem;
}
.options .add-item-header {
  margin-top: 0;
}
.options .sub-options {
  margin: var(--padding);
  padding: 0;
  background: var(--offset-input-bg);
  padding: 8px 8px;
}
.options .sub-options label.label {
  background-color: var(--offset-input-bg) !important;
}

.list {
  display: flex;
  gap: var(--padding);
  flex-direction: column;
}
.list.compact {
  gap: 0;
}
.list.padding {
  padding: var(--padding);
}
.list .appointment-list .action-banner.inline {
  margin-bottom: var(--gap) !important;
}
.list.flex-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.list.flex-list .list-banner {
  flex: 0 0 100%;
}
.list.flex-list .action-banner {
  flex-grow: 1;
}
.list .main-card {
  margin: 0 var(--gap);
}
.list .main-card h2, .list .main-card h1 {
  color: var(--primary);
}
.list.has--actions {
  gap: 0;
}
.list.no-bottom-margin {
  margin-bottom: 0;
  padding-bottom: 0;
}
.list .list-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: var(--padding);
}
.list .list-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.list .list-group summary {
  flex-grow: 1;
  display: flex;
}
.list .list-group summary .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
}
.list .list-group summary .expand-more {
  border-radius: 25px;
  padding: 4px calc(var(--gap) * 2);
  display: inline-flex;
  align-items: center;
  margin: var(--gap) 0;
  background: var(--offset-input-bg);
  color: var(--color);
}
.list .list-group.negative-margin summary {
  margin-left: -10px;
}
.list .list-group.sub-details {
  margin-left: var(--padding);
}
.list .list-group.margin .body {
  margin-top: var(--padding);
}
.list .list-group[open] summary .material-symbols-outlined {
  transform: rotate(180deg);
}
.list details > summary {
  list-style: none;
}
.list summary::-webkit-details-marker {
  display: none;
}
.list .list-item {
  background-color: var(--banner-bg);
  padding: var(--gap);
  border-radius: 15px;
}
.list .list-item.transpartent {
  background: transparent;
  padding: 0;
}
.list .list-item.user-length .additinal-information {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(var(--padding) * 2);
  font-size: 2rem;
}
.list .list-item.outline {
  border: 1px solid var(--border-color);
}
.list .list-item h2, .list .list-item h1 {
  color: var(--primary);
}
.list .list-item .title,
.list .list-item .header {
  font-weight: bold;
  margin-bottom: var(--gap);
}
.list .list-item.is--bordered {
  border-top: 1px solid var(--border-color);
  border-radius: 0;
}
.list .list-item.is--contact-request, .list .list-item.is--contact-request-response {
  margin-right: 30px;
  background-color: transparent;
  position: relative;
}
.list .list-item.is--contact-request .date-display, .list .list-item.is--contact-request-response .date-display {
  position: absolute;
  right: 20px;
  top: 20px;
  display: flex;
  justify-content: flex-end;
  font-size: 0.8rem;
}
.list .list-item.is--contact-request .text, .list .list-item.is--contact-request-response .text {
  padding: var(--padding);
  background-color: var(--banner-bg);
  border-radius: 20px;
}
.list .list-item.is--contact-request-response {
  margin-left: 30px;
  margin-right: 0;
  margin-top: -20px;
}
.list .list-item.is--goal {
  padding: 0;
}
.list .list-item.is--goal .text {
  padding: var(--padding);
}
.list .list-item.is--goal .list .list-item {
  border-top: none;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  background: transparent;
}
.list .list-item.is--goal .list .list-item:first-of-type {
  border-top: 1px solid var(--border-color);
}
.list .list-item.is--action {
  display: flex;
  justify-content: space-between;
  color: var(--color);
  text-decoration: none;
  border-top: 1px solid var(--border-color);
  padding: 0;
  border-radius: 15px;
  align-items: stretch;
  border-radius: 0;
}
.list .list-item.is--action .text {
  padding: calc(var(--gap) * 2);
}
.list .list-item.is--action .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.list .list-item.is--space-between {
  display: flex;
}
.list .list-item.is--space-between .text {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list .list-item.is--success {
  display: flex;
  justify-content: space-between;
  color: var(--color);
  text-decoration: none;
  border: 1px solid var(--border-color);
  padding: 0;
  align-items: stretch;
}
.list .list-item.is--success .text {
  padding: var(--padding);
}
.list .list-item.is--success .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: green;
  color: white;
  padding: var(--gap);
}
.list .list-item.is--danger {
  display: flex;
  justify-content: space-between;
  color: var(--color);
  text-decoration: none;
  border: 1px solid var(--border-color);
  padding: 0;
  align-items: stretch;
}
.list .list-item.is--danger .text {
  padding: var(--padding);
}
.list .list-item.is--danger .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: orange;
  color: white;
  padding: var(--gap);
}
.list .list-item.is--fixed {
  display: flex;
  justify-content: flex-start;
  gap: var(--gap);
  color: var(--color);
  text-decoration: none;
  border: 1px solid var(--border-color);
  align-items: stretch;
}
.list .list-item.is--fixed .text {
  padding: var(--padding);
}
.list .list-item.is--fixed .icon img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
  margin: var(--gap);
}
.list .list-item .button.button-link, .list .list-item .button.is-link {
  background-color: transparent;
}
.list .actions {
  display: flex;
  justify-content: center;
  margin-top: var(--padding);
  margin-bottom: var(--padding);
  flex-direction: row;
  gap: var(--gap);
}
.list .actions.inline {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.list .actions.button-links {
  margin-top: var(--gap);
  margin-bottom: 0;
  font-weight: bold;
  align-items: flex-end;
}
.list .actions.button-links .button-link {
  padding: 0;
}
@media screen and (max-width: 700px) {
  .list .actions {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .list .actions .button {
    flex-grow: 1;
  }
}

.admin-list .admin-list-item {
  margin-bottom: var(--padding);
}
.admin-list .admin-list-item .admin-list-item {
  margin-bottom: 0;
}
.admin-list .list-item-tag {
  background-color: var(--offset-input-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap);
}
.admin-list .list-item-tag .actions {
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.admin-list .list {
  margin-left: var(--gap);
  margin-bottom: var(--padding);
  margin-top: var(--padding);
}

.search {
  position: relative;
  margin-top: calc(var(--padding) * 1);
}
.search input {
  padding: var(--input-padding);
  padding-right: 40px;
}
.search input::placeholder {
  color: var(--placeholder-color);
}
.search .icon {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
}

.search-input {
  display: block;
  position: relative;
}
.search-input.has--icon input {
  padding-right: 40px !important;
}
.search-input.has--icon .icon {
  right: var(--gap) !important;
}
.search-input.has-filter {
  background-color: var(--offset-input-bg);
  padding-right: 10px;
  border-radius: 10px;
}
.search-input .tab-settings {
  color: var(--color);
}

.search-input {
  display: flex;
  gap: var(--gap);
  align-items: center;
}

.search-filters {
  display: flex;
  gap: var(--gap);
  margin-top: var(--gap);
}
.search-filters .fields {
  display: none;
}
.search-filters .fields.show {
  display: block;
}
.search-filters .fields select {
  min-width: 200px;
}
.search-filters .fields .field .label {
  background: var(--box-color);
}

.select-2-filters .field.select {
  width: 100%;
  max-width: unset;
}
.select-2-filters .field.select::after {
  content: "";
  display: none;
}

.select2-selection.select2-selection--multiple {
  border: 1px solid var(--border-color);
  padding: 8px;
  padding-top: 15px;
  padding-left: 10px;
}

.information-list.full-width label {
  flex-grow: 1;
}

.additinal-information {
  opacity: 1;
  font-size: 1rem;
  margin-top: var(--gap);
  gap: var(--gap);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  white-space: normal;
}
.additinal-information .user-weight-graph {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.additinal-information canvas {
  width: 100% !important;
}
.additinal-information.block {
  display: block;
}
.additinal-information label {
  font-weight: bold;
}
.additinal-information .value.combined {
  display: flex;
  gap: var(--padding);
  align-items: stretch;
}
.additinal-information .value.combined .first-item {
  display: flex;
  align-items: center;
}
.additinal-information .value.combined .first-item:after {
  content: " ";
  border-right: 1px solid var(--border-color);
  left: calc(var(--padding) / 2);
  position: relative;
  height: 100%;
}
.additinal-information .value.download a {
  display: flex;
  gap: var(--gap);
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.additinal-information .value.download a .material-symbols-outlined {
  font-size: 22px;
  font-weight: 300;
}

.filter-form.flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.filter-form.flex .search {
  flex-grow: 1;
  margin-top: 0 !important;
}

.front-filter-form {
  margin-bottom: var(--gap);
}
.front-filter-form .search {
  display: block;
  padding: 0 var(--padding);
  --placeholder-color: rgb(60, 60, 60);
}
.front-filter-form .search input {
  border-radius: 10px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.18);
  color: black;
  outline: none;
  border-radius: 10px;
  outline: none;
}
.front-filter-form .search input[type=search]::-webkit-search-cancel-button {
  display: none;
}
.front-filter-form .icon {
  color: white;
}

.dish-index-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--padding);
  grid-auto-rows: 1fr;
}

.floating-buttons {
  position: absolute;
  right: var(--padding);
  gap: var(--gap);
  display: flex;
  align-items: center;
  bottom: unset;
  top: var(--gap);
  right: var(--gap);
}
.floating-buttons .floating-button {
  font-size: 20px;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--color);
  border: 1px solid var(--border-color);
  background-color: var(--container-color);
  border-radius: 50%;
}
.floating-buttons .floating-button .material-symbols-outlined {
  font-size: 28px;
}

.dish {
  display: flex;
  color: var(--color);
  text-decoration: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.dish .body {
  flex-grow: 1;
  padding: var(--gap);
  padding-bottom: 0;
  position: relative;
}
.dish .body .header {
  font-weight: bold;
  margin-bottom: var(--gap);
  display: block;
  color: var(--tex);
  color: var(--text);
  text-decoration: none;
  padding: 0;
  border-bottom: none;
}
.dish .body .actions {
  font-weight: bold;
}
.dish .image {
  position: relative;
}
.dish .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.0901960784);
}

.dish-detail {
  padding-bottom: 60px;
}
.dish-detail .dish-tips .additinal-information {
  display: block;
}
.dish-detail .dish-detail {
  padding-bottom: 0;
}
.dish-detail .image {
  position: relative;
  overflow: hidden;
}
.dish-detail .image img {
  width: 100%;
  object-fit: cover;
  animation: ken-burns 18s ease-in-out infinite alternate;
}
.dish-detail .dish-actions {
  top: -21px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
}
.dish-detail .dish-body {
  padding: 0 calc(var(--padding) * 1.5);
  margin: 0 var(--padding);
}
.dish-detail .dish-body {
  position: relative;
  top: -20px;
  /* margin: 0 var(--padding); */
  background: var(--container-color);
  padding-top: calc(var(--padding) * 3);
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1607843137);
  animation: slideUp 0.35s ease-out;
}
.dish-detail .dish-body .header {
  font-weight: bold;
  margin-bottom: var(--gap);
  display: block;
  color: var(--tex);
  color: var(--text);
  text-decoration: none;
  font-size: 1.4rem;
}

@keyframes ken-burns {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.15) translate3d(-2%, -2%, 0);
  }
}
.dish-actions {
  margin: var(--padding) 0;
}

.dish-persons {
  position: relative;
}
.dish-persons .icon {
  position: absolute;
  top: -7px;
  right: -7px;
  border: 1px solid white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: var(--secondary);
  color: white;
}

.dish-details .title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: var(--gap);
}
.dish-details ol {
  list-style: auto;
  margin: var(--gap) var(--padding);
  margin-right: 0;
  margin-left: 13px;
}
.dish-details ol p {
  margin-left: -13px;
}
.dish-details ul {
  list-style: unset;
  margin: var(--gap) var(--padding);
  margin-right: 0;
}

.allergen-placeholder {
  background: silver;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.dish-tags {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
  align-items: center;
  margin: var(--gap) 0;
}

.vegetarian-tag,
.vegan-tag {
  color: green;
}

.season-tag {
  background: var(--secondary);
  color: white;
  padding: 4px 11px;
  border-radius: 15px;
  font-size: 0.8rem;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.nutritional-value-tag {
  font-size: 0.8rem;
  background: linear-gradient(135deg, rgb(255, 255, 255), rgb(238, 238, 238) 50%, rgb(252, 252, 252));
  color: black;
  padding: 4px 11px;
  border-radius: 15px;
  background-size: 200% 200%;
  animation: iceEffect 6s infinite;
}

.season-tag.winter {
  background: aliceblue;
  color: black;
  background: linear-gradient(135deg, #d8f1f9, #c3e0f1 50%, #e8f8fc);
  background-size: 200% 200%;
  animation: iceEffect 6s infinite alternate;
}

.season-tag.herfst {
  background: rgb(230, 200, 69);
  color: rgb(1, 71, 1);
  background: linear-gradient(135deg, rgb(163, 230, 69), rgb(230, 200, 69) 50%, rgb(255, 152, 34));
  background-size: 200% 200%;
  animation: iceEffect 6s infinite alternate;
  overflow: hidden;
}

.season-tag.lente {
  background: #99f7ab;
  color: black;
  background: linear-gradient(135deg, #99f7ab, #c3e0f1 50%, #fdfab0);
  background-size: 200% 200%;
  animation: iceEffect 6s infinite alternate;
  overflow: hidden;
}

.winter::before,
.winter::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 10%, transparent 80%);
  animation: shimmer 8s infinite ease-in-out;
}

.winter::before {
  top: -50%;
  left: -50%;
  animation-delay: 0s;
}

.winter::after {
  bottom: -50%;
  right: -50%;
  animation-delay: 4s;
}

@keyframes iceEffect {
  0% {
    background-position: 0% 0%;
  }
  30% {
    background-position: 0% 50%;
  }
  60% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 0%;
  }
}
@keyframes shimmer {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(50%, 50%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes slideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.avatar {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  object-fit: cover;
  border: 3px solid #363636;
}

@media screen and (max-width: 700px) {
  .inline-week-menu.container {
    padding-bottom: 300px !important;
  }
}
.inline-week-menu .week_menu {
  position: relative;
  margin-bottom: var(--padding);
  padding: var(--inner-padding) 0;
  bottom: unset;
  top: unset;
  right: unset;
  z-index: unset;
  max-width: unset;
}
.inline-week-menu .week_menu .header {
  font-size: 1rem;
}

.week_menu {
  position: fixed;
  bottom: 96px;
  right: 16px;
  background-color: var(--container-color);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1411764706);
  background: linear-gradient(128deg, #efefef, rgba(181, 179, 179, 0.879));
  outline-offset: -1px;
  outline: 3px dotted #e4e4e4;
  transform: rotate(0.2deg);
  box-shadow: 4px 4px 10px 1px rgba(54, 54, 54, 0.2784313725);
  font-family: Monaco, serif;
  z-index: 100000;
}
.week_menu .nutritional-value-display-wrapper {
  border-bottom: 1px solid var(--border-color);
  margin: var(--gap) 0;
  padding-bottom: var(--gap);
}
.week_menu .nutritional-value-display-wrapper:first-child {
  padding-top: var(--gap);
  border-top: 1px solid var(--border-color);
}
.week_menu .nutritional-value-display {
  display: flex;
  gap: var(--gap);
  align-items: center;
}
.week_menu .bar-text-wrapper {
  flex-grow: 1;
}
.week_menu .bar-text-wrapper .label {
  white-space: nowrap;
}
.week_menu .menu-list {
  display: none;
}
.week_menu .menu-list.show {
  display: block;
}
.week_menu .menu-list .span-tooltip-wrapper {
  position: relative;
  z-index: 100;
  cursor: pointer;
}
.week_menu .menu-list .span-tooltip-wrapper .material-symbols-outlined {
  font-size: 20px;
}
.week_menu .menu-list .span-tooltip-wrapper .tooltip-content {
  position: initial;
  max-width: unset;
  width: 100%;
}
.week_menu .menu-list .span-tooltip-wrapper .tooltip-content:before {
  content: none;
}
.week_menu .menu-list .span-tooltip-wrapper .tooltip-content:after {
  content: none;
}
.week_menu .menu-icon {
  display: block;
  padding: 8px;
  width: 45px;
}
.week_menu .menu-icon .showing {
  display: none;
}
.week_menu .menu-icon .bullet {
  padding: initial;
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  background: var(--primary);
  background: var(--secondary);
  color: var(--secondary-text);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 10;
  font-family: "Poppins";
  font-family: "Poppins", sans-serif !important;
}
.week_menu .menu-icon .hidden {
  opacity: 1;
  display: inline;
}
.week_menu .menu-icon.show {
  overflow: auto;
  position: absolute;
  right: var(--gap);
  width: unset;
  top: calc(var(--padding) - 10px);
}
.week_menu .menu-icon.show .showing {
  opacity: 1;
  display: inline;
  font-size: 20px;
}
.week_menu .menu-icon.show .hidden {
  display: none;
}
.week_menu form {
  display: inline;
  margin: 0;
}
.week_menu .favorite {
  position: absolute;
  top: var(--padding);
  right: var(--padding);
}
.week_menu .delete {
  position: absolute;
  top: var(--padding);
  right: var(--padding);
  background: transparent;
  border: none;
}
.week_menu .delete.has-favorite {
  right: calc(var(--padding) * 3);
}
.week_menu .title {
  margin: var(--padding);
  display: flex;
  gap: var(--gap);
  align-items: center;
}
.week_menu .small {
  font-size: 0.8rem;
  margin: var(--padding);
}
.week_menu .nutritional-values {
  margin: var(--padding);
  font-size: 0.8rem;
  opacity: 0.9;
}
.week_menu .nutritional-values details > summary {
  list-style: none;
}
.week_menu .nutritional-values summary::-webkit-details-marker {
  display: none;
}
.week_menu .nutritional-values details summary .expand-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}
.week_menu .nutritional-values details summary .expand-more .material-symbols-outlined {
  border-radius: 50%;
  border: 1px solid var(--border-color);
  box-shadow: 2px 2px 1px #9d9b9b;
}
.week_menu .nutritional-values details[open] summary .material-symbols-outlined {
  transform: rotate(180deg);
}
.week_menu .dish-list {
  display: flex;
  gap: var(--gap);
  padding: var(--gap) var(--padding);
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}
.week_menu .dish-list:last-of-type {
  border-bottom: none;
}
.week_menu .dish-list .dish {
  background-color: transparent;
}
.week_menu .dish-list .dish .image {
  flex-basis: unset;
}
.week_menu .dish-list .dish .image img {
  width: 60px;
  height: 100%;
}
.week_menu .dish-list .dish .dish-persons {
  position: absolute;
  right: 0;
  top: 0;
}
.week_menu .dish-list .dish .body {
  display: flex;
  gap: calc(var(--gap) * 2);
  font-size: 0.8rem;
}
.week_menu .dish-list .dish-actions {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: center;
  margin: 0;
}
.week_menu .dish-list .dish-actions button {
  aspect-ratio: 1/1;
  border: 1px solid var(--border-color);
  width: 40px;
  height: 40px;
  box-shadow: 2px 2px 0px #9d9b9b;
}
.week_menu .dish-list .dish-actions button:hover {
  box-shadow: none;
}
.week_menu .dish-list form {
  margin: 0;
}
.week_menu .actions {
  border-top: 1px solid black;
}
.week_menu .actions .button.is-link {
  text-decoration: none;
}

.appointment-pick-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.appointment-pick-list li {
  margin: var(--padding) 0;
  padding-bottom: calc(var(--padding) / 2);
  margin-bottom: calc(var(--padding) / 2);
}
.appointment-pick-list .appointment-date {
  display: block;
  padding: calc(var(--gap) * 1.5);
  display: block;
  font-size: 0.85rem;
  /* border: 1px solid black; */
  background: #dedcdc;
  border-radius: 10px;
  padding: calc(var(--gap) * 1.25);
  white-space: nowrap;
}
.appointment-pick-list .appointment-date.checked {
  outline: 1px solid green;
}
.appointment-pick-list .appointment-date input {
  display: none;
}
.appointment-pick-list .appointment-date .title {
  font-weight: bold;
  margin: 0;
  margin-bottom: var(--gap);
}
.appointment-pick-list .day-times {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--gap);
  flex-wrap: wrap;
  margin: var(--gap) 0;
  padding: 2px;
}

.ingredient-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.ingredient-list .list-item {
  background: var(--banner-bg);
  border-radius: 8px;
  padding: var(--gap);
}
.ingredient-list .list-item.is-checked {
  opacity: 0.6;
}
.ingredient-list .list-item.is-checked .content {
  text-decoration: line-through;
}
.ingredient-list .list-item .checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: 100%;
  cursor: pointer;
}
.ingredient-list .list-item input[type=checkbox] {
  width: 20px;
  height: 20px;
}
.ingredient-list .list-item .content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: var(--gap);
}
.ingredient-list .list-item .amount {
  white-space: nowrap;
}

.ui-diagram {
  position: relative;
  overflow: auto;
}
.ui-diagram .ui-elements {
  display: flex;
}
.ui-diagram .zoom-controls {
  position: fixed;
  right: 50px;
  top: 54px;
  border: 1px solid var(--input-border-color);
  display: flex;
  gap: var(--gap);
  background-color: var(--body-bg);
}
.ui-diagram .zoom-controls .zoom_add,
.ui-diagram .zoom-controls .zoom_remove {
  padding: var(--gap);
}
.ui-diagram .elements {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap);
  margin: var(--gap);
  position: relative;
}
.ui-diagram .element {
  padding: var(--gap);
  position: relative;
  margin-top: 5px;
}
.ui-diagram .element:before {
  content: " ";
  height: 12px;
  width: 1px;
  background: black;
  position: absolute;
  left: 50%;
  top: -10px;
}
.ui-diagram .element .main-value {
  min-height: 50px;
  padding: var(--gap);
  position: relative;
  border: 1px solid var(--input-border-color);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-color: #faf7fa;
}
.ui-diagram .element .actions {
  position: absolute;
  right: 0px;
  top: -10px;
  display: flex;
  gap: var(--gap);
}
.ui-diagram .element .actions .btn-square {
  background-color: var(--body-bg);
}
.ui-diagram .element .diseases,
.ui-diagram .element .characteristics {
  padding: 4px;
}
.ui-diagram .element .element-item {
  font-size: 0.8rem;
  display: flex;
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.ui-diagram .element .value {
  min-height: 50px;
  position: relative;
  border: 1px solid var(--input-border-color);
}
.ui-diagram .element .value .text {
  border-bottom: 1px solid black;
  padding: var(--gap);
}
.ui-diagram .element .value .item-actions {
  background-color: rgb(173, 218, 173);
  padding: var(--gap);
  font-size: 0.8rem;
  text-align: left;
}

.intolerances-header {
  display: flex;
  align-items: center;
  gap: var(--padding);
  justify-content: flex-start;
  position: relative;
  margin-top: var(--padding);
  text-align: left !important;
}
.intolerances-header .span-tooltip-wrapper {
  margin-left: auto;
}

.span-tooltip-wrapper {
  position: relative;
}
.span-tooltip-wrapper button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  width: 20px;
}
.span-tooltip-wrapper button .material-symbols-outlined {
  position: unset;
}

.tooltip-content {
  display: none;
  position: absolute;
  font-size: 0.8rem;
  z-index: 10;
  background: #fff;
  border: 1px solid #ccc;
  padding: 8px;
  width: 50vw;
  min-width: 250px;
  /* top: 100%; */
  left: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tooltip-content.visible {
  display: block;
}

.tooltip-content::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ccc;
}

.tooltip-content::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 20px;
  transform: translateY(1px);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff;
}

.language-switch {
  cursor: pointer;
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
}
.language-switch .country-toggler,
.language-switch .language-toggler {
  background-color: white;
  color: var(--color);
}
.language-switch .current-country,
.language-switch .current-locale {
  display: flex;
  align-items: center;
  padding: var(--padding);
  color: var(--color);
}
.language-switch .select {
  display: none;
  color: var(--color);
  background-color: white;
  z-index: 10;
}
.language-switch .select div {
  padding: var(--padding);
  padding-top: 0;
}
.language-switch .select.active {
  display: block;
  position: absolute;
}

.login-screen .language-switch {
  position: absolute;
  top: var(--padding);
  right: var(--padding);
}

.locale-menu {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  margin: 0 var(--padding);
}
.locale-menu .language-switch {
  margin: 0 var(--padding);
}
.locale-menu .language-switch .current-locale,
.locale-menu .language-switch .current-country {
  padding: var(--gap);
}

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  z-index: 0;
  height: 100%;
  pointer-events: none;
  object-fit: cover;
}
.backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.backdrop.opaque {
  opacity: 0.1;
  filter: blur(3px);
}

header.has-backdrop,
.menu.has-backdrop,
main.has-backdrop {
  z-index: 1;
}

header {
  z-index: 1000;
}

.confirm {
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm .confirm-icon {
  display: flex;
  justify-self: center;
  flex-direction: column;
  align-items: center;
  max-width: 80%;
  text-align: center;
  margin: var(--padding);
}
.confirm .confirm-icon img {
  width: 110px;
  margin: var(--padding);
}

.choice-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: var(--padding);
}

.choice-card {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: var(--padding);
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "radio title" "radio text";
  column-gap: var(--gap);
  row-gap: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.choice-card input[type=radio] {
  grid-area: radio;
  margin-top: 4px;
}
.choice-card .choice-title {
  grid-area: title;
  font-weight: 600;
}
.choice-card .choice-text {
  grid-area: text;
  color: var(--muted-text);
  font-size: 0.95rem;
}
.choice-card.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
  background-color: #f8f9fb;
}

.generated-dishes-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: var(--padding) 0;
  perspective: 1200px;
  position: relative;
  min-height: 180px;
}
.generated-dishes-grid .loading-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;
  z-index: 2;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.generated-dishes-grid .loading-overlay .loading-spinner {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 5px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--primary);
  animation: cardSpin 850ms linear infinite;
}
.generated-dishes-grid.is-ready .loading-overlay {
  opacity: 0;
  visibility: hidden;
}
.generated-dishes-grid .generator-dish-card {
  overflow: hidden;
  background: var(--box-color);
  transform-origin: center;
  transform-style: preserve-3d;
  position: relative;
}
.generated-dishes-grid .generator-dish-card.is-locked .card-inner {
  transition: none;
  transform: rotateY(0deg);
}
.generated-dishes-grid .card-inner {
  display: grid;
  grid-template-areas: "card";
  transform-style: preserve-3d;
  transition: transform 520ms ease;
  transition-delay: var(--card-delay, 0ms);
  transform: rotateY(180deg);
  height: 100%;
}
.generated-dishes-grid .card-face {
  grid-area: card;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}
.generated-dishes-grid .card-face.card-back {
  transform: rotateY(180deg);
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--box-color);
}
.generated-dishes-grid .card-face.card-front {
  transform: rotateY(0deg);
}
.generated-dishes-grid .generator-dish-card .image-wrapper {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--border-color);
}
.generated-dishes-grid .generator-dish-card .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.generated-dishes-grid .generator-dish-card .image-wrapper .image-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: var(--muted-text);
  background: linear-gradient(135deg, #f2f4f7, #e5e7eb);
}
.generated-dishes-grid .generator-dish-card .image-wrapper .lock-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
}
.generated-dishes-grid .generator-dish-card .image-wrapper .lock-toggle__checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.generated-dishes-grid .generator-dish-card .image-wrapper .lock-toggle__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  font-size: 14px;
}
.generated-dishes-grid .generator-dish-card .image-wrapper .lock-icon.lock-closed {
  display: none;
}
.generated-dishes-grid .generator-dish-card .image-wrapper .lock-toggle__checkbox:checked ~ .lock-toggle__label .lock-closed {
  display: inline-block;
}
.generated-dishes-grid .generator-dish-card .image-wrapper .lock-toggle__checkbox:checked ~ .lock-toggle__label .lock-open {
  display: none;
}
.generated-dishes-grid .generator-dish-card .details {
  padding: var(--gap);
  display: grid;
  gap: 6px;
}
.generated-dishes-grid .generator-dish-card .details .dish-name {
  font-weight: normal;
  font-size: 0.8rem;
}
.generated-dishes-grid .generator-dish-card .details .dish-meta {
  color: var(--muted-text);
  font-size: 0.95rem;
}
.generated-dishes-grid.is-ready .generator-dish-card .card-inner {
  transform: rotateY(0deg);
}
@media (prefers-reduced-motion: reduce) {
  .generated-dishes-grid .generator-dish-card .card-inner {
    transition: none;
    transform: rotateY(0deg);
  }
}
@keyframes cardSpin {
  to {
    transform: rotate(360deg);
  }
}
.generated-dishes-grid .placeholder-bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f2f4f7 0%, #e6e8ec 50%, #f2f4f7 100%);
  animation: cardPulse 1.4s ease-in-out infinite;
}
.generated-dishes-grid .placeholder-bar.short {
  width: 60%;
}
@keyframes cardPulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.rating {
  display: inline-flex;
  letter-spacing: 3px;
  background: linear-gradient(90deg, #fc0 80%, #d2d2d2 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: none !important;
}

.dish-reviews {
  margin: var(--padding) 0;
  margin-top: calc(var(--padding) * 2);
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
  display: none;
}
.dish-reviews .rating {
  flex-grow: 1;
}

.flex {
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.flex.flex-fields {
  margin: var(--padding) 0;
  margin-top: calc(var(--padding) * 1.5);
}
.flex.flex-fields .field {
  flex-grow: 1;
  margin: 0;
}
.flex.flex-first-grow-fields {
  margin: var(--padding) 0;
  margin-top: calc(var(--padding) * 1.5);
}
.flex.flex-first-grow-fields .field {
  margin: 0;
}
.flex.flex-first-grow-fields .field:first-of-type {
  flex-grow: 20;
}
.flex.flex-start {
  align-items: flex-start;
}
.flex.grid-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}

.flex-grow {
  flex-grow: 1;
}

.small {
  font-size: 0.7rem;
}

b,
strong {
  font-weight: bolder;
}

.ml {
  margin-left: var(--padding);
}

.mt {
  margin-top: var(--padding);
}

.disabled {
  opacity: 0.5;
}

.mb-0 {
  margin-bottom: 0;
}

.mt-0 {
  margin-top: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.hidden,
.is--hidden {
  opacity: 0;
  height: 0px;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.d-none {
  display: none;
}

.bmi {
  opacity: 0.5;
  pointer-events: none;
}

hr {
  height: 1px;
  border: 0;
  background: var(--border-color);
  margin-top: var(--padding);
  margin-bottom: var(--padding);
  width: 100%;
}

.striketrough {
  text-decoration: line-through;
  position: relative;
  opacity: 0.5;
}
.striketrough:after {
  content: " ";
  position: absolute;
  top: 50%;
  left: -10px;
  right: -10px;
  height: 1px;
  background-color: var(--border-color);
}

.hint {
  margin-top: calc(var(--padding) * -1);
  font-size: 0.8rem;
}

.progress-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress-circle .progress-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trix-content ul {
  list-style: inside;
}
.trix-content em {
  font-weight: bold;
}

.trix-content li {
  margin-left: 0;
}

.color-red {
  color: red;
}

.color-green {
  color: green;
}

.alert-warning {
  background: #dfa105;
  padding: 8px;
  /* border: 1px solid #ffffff; */
  color: white;
}

.alert-info {
  background: #14d6f8;
  padding: 8px;
  /* border: 1px solid #ffffff; */
  font-size: 0.8rem;
  color: white;
}

.slider-container {
  position: relative;
}

.slider {
  font-family: "Roboto", sans-serif;
  color: #010101;
  font-weight: 100;
  max-height: 100vh;
  max-width: 100vw;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  gap: var(--padding);
}
.slider .slider__slide {
  width: 100%;
  scroll-snap-align: start;
  min-width: 300px;
  background-color: #f0f5f5;
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  gap: var(--padding);
}
.slider .slider__slide .scores {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.slider .slider__slide .text {
  flex-grow: 1;
}
.slider .slider__slide .footer {
  opacity: 0.8;
  font-size: 0.8rem;
}
.slider.inline-slider .slider__slide {
  background-color: white;
}

/* Arrows */
.right-arrow,
.left-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  /*   background-color: black; */
  z-index: 2;
  cursor: pointer;
}

.right-arrow {
  right: 1rem;
}

.left-arrow {
  left: 1rem;
}

.right-arrow::before,
.right-arrow::after,
.left-arrow::before,
.left-arrow::after {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  content: "";
  position: absolute;
  width: 64px;
  height: 16px;
  background-color: white;
}

.right-arrow::before {
  transform: rotate(45deg);
}

.right-arrow::after {
  transform: rotate(-45deg);
  bottom: 14px;
}

.left-arrow::before {
  transform: rotate(-45deg);
}

.left-arrow::after {
  transform: rotate(45deg);
  bottom: 14px;
}

/* Hide the scrollbar */
.slider::-webkit-scrollbar {
  display: none; /* Safari, Google Chrome, Opera,  */
}

.slider {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Adaptive */
@media screen and (max-width: 720px) {
  .right-arrow::before,
  .right-arrow::after,
  .left-arrow::before,
  .left-arrow::after {
    width: 32px;
    height: 12px;
  }
  .right-arrow::after,
  .left-arrow::after {
    bottom: 16px;
  }
  .right-arrow::before,
  .left-arrow::before {
    top: 20px;
  }
  .right-arrow::before,
  .right-arrow::after {
    right: 0;
  }
}
.steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  flex-wrap: nowrap;
  margin-bottom: var(--padding);
}
.steps .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.steps .step:after {
  content: " ";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  background-color: rgb(183, 183, 183);
  height: 10px;
  border-radius: 50%;
}
.steps .step .step-header {
  display: none;
}
.steps .step.active:after {
  background-color: var(--success);
}

.step-header {
  font-size: 1.1rem;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--gap);
  margin-bottom: var(--padding);
  margin-left: calc(var(--padding) * -1);
  margin-right: calc(var(--padding) * -1);
}

.step-body .step-body-text,
.step-body h2 {
  text-align: center;
}
.step-body .step-body-text {
  margin-bottom: var(--padding);
}
.step-body h2 {
  margin-bottom: calc(var(--padding) * 1);
}

.container .scroll-snap {
  max-width: calc(100vw - 2 * var(--padding));
}

.scroll-snap {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  gap: var(--padding);
  max-width: 100vw;
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
  padding-bottom: var(--padding);
  padding-top: var(--padding);
  padding-right: var(--gap);
}
.scroll-snap.full-width {
  max-width: 100vw !important;
}
.scroll-snap.offset--color {
  background: var(--primary);
  color: var(--primary-text);
  padding-bottom: 0;
  padding-top: 0;
  padding-top: 20px;
  top: -1px;
  position: relative;
}
.scroll-snap.offset--color .tabs {
  gap: 0;
  padding-right: var(--padding);
  padding-left: var(--padding);
}
.scroll-snap.offset--color .tabs .tab {
  flex-grow: 1;
}
.scroll-snap::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}
.scroll-snap .tabs {
  flex-grow: 1;
  display: flex;
  gap: var(--gap);
  padding-right: var(--padding);
}
.scroll-snap .tab {
  white-space: nowrap;
  padding: var(--gap);
  scroll-snap-align: start;
  scroll-snap-align: center;
  display: inline-block;
  text-align: center;
}
.scroll-snap .tab.full-width {
  width: 80vw;
  height: 100%;
  min-width: 300px;
}
.scroll-snap .tab.full-width .image-item {
  background: var(--banner-bg);
  padding: var(--padding);
  border-radius: 15px;
}
.scroll-snap .tab.full-width .image-item h2, .scroll-snap .tab.full-width .image-item h1 {
  color: var(--primary);
}
.scroll-snap .tab.full-width .image-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.scroll-snap .tab.full-width .list-item {
  height: 100%;
  border-radius: 15px;
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  text-align: left;
  margin: 0;
}
.scroll-snap .tab.full-width .list-item .text {
  flex-grow: 1;
}
.scroll-snap .tab a {
  color: inherit;
  text-decoration: none;
  padding-top: var(--gap);
  padding-bottom: var(--gap);
  display: block;
}
.scroll-snap .tab.active {
  position: relative;
  overflow: hidden;
}
.scroll-snap .tab.active:after {
  content: " ";
  width: 60px;
  height: 40px;
  bottom: -30px;
  position: absolute;
  background: #e1e7ee;
  border-radius: 50%;
  z-index: 1000;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid var(--border-color);
}
.scroll-snap .tabs.dishes-tabs .tab.active:after {
  background-color: var(--container-color);
}
.scroll-snap .tab-settings {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
}
.scroll-snap .tab-settings .material-symbols-outlined {
  font-weight: 300;
}
.scroll-snap .main-card {
  position: relative;
  flex: 0 0 65vw;
}
.scroll-snap .card-tip {
  position: relative;
  flex: 0 0 75vw;
}

.pagination {
  display: flex;
  gap: var(--gap);
  margin: var(--gap) 0;
}
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid #dfd8df;
  border-radius: 4px;
  text-decoration: none;
  padding: calc(var(--gap) - 5px) var(--gap);
  color: inherit;
}
.pagination a.current {
  background: var(--secondary);
  color: var(--secondary-text);
}

.user-weights {
  display: flex;
  gap: 15px;
  align-items: flex-end;
  padding: var(--gap);
  padding-bottom: 20px;
  width: 100%;
  justify-content: flex-end;
  text-decoration: none;
  position: relative;
}
.user-weights .weight {
  width: 10px;
  position: relative;
  background: black;
}
.user-weights .weight .label {
  position: absolute;
  bottom: -15px;
  left: -50%;
  align-items: center;
  font-size: 8px;
  transform: translateX(10%);
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}

#intake-content .intake-container {
  background-color: var(--container-color);
  position: relative;
  z-index: 1;
  padding: var(--padding);
  margin-top: var(--padding);
  margin-bottom: var(--padding);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}
#intake-content .intake-container .header h2 {
  margin-bottom: calc(var(--gap) * 2);
}
#intake-content .intake-container form {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-grow: 1;
  z-index: 2;
}
#intake-content .intake-container form .body {
  flex-grow: 1;
}
#intake-content .intake-container .actions {
  margin-top: calc(var(--padding) * 1.5);
}
@media screen and (max-width: 700px) {
  #intake-content .intake-container .actions {
    flex-direction: column-reverse;
  }
  #intake-content .intake-container .actions .btn,
  #intake-content .intake-container .actions input[type=submit] {
    flex-grow: 1;
  }
}

.calendar {
  padding: var(--gap);
  color: black;
  font-size: 10px;
  line-height: 16px;
  min-height: 30vh;
}
.calendar .cell-count {
  display: none !important;
}
.calendar.full-width {
  padding: 0;
}
.calendar .cal-row {
  display: flex;
  align-items: center;
}
.calendar .cal-row div {
  flex-grow: 1;
  width: 12.5%;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.calendar thead {
  display: block;
  font-weight: 600;
}
.calendar thead .year-month {
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
}
.calendar thead .year-month span {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  margin-left: auto;
  cursor: pointer;
}
.calendar thead .year-month span:hover {
  color: var(--primary);
}
.calendar thead .year-month span:first-child {
  margin-left: 0;
  margin-right: auto;
}
.calendar .calendar-body .cal-row {
  position: relative;
}
.calendar .calendar-body .cal-row:hover .week-number {
  color: var(--primary);
  font-weight: 600;
}
.calendar .calendar-body .cal-row:hover:before {
  content: "";
  position: absolute;
  top: 0;
  left: -4px;
  right: -4px;
  bottom: 0;
  background: rgba(192, 192, 192, 0.116);
  pointer-events: none;
  z-index: 1;
}
.calendar .calendar-body .cal-row [data-date] {
  cursor: pointer;
}
.calendar .calendar-body .cal-row [data-date]:hover {
  color: inherit;
}
.calendar .selected-week {
  position: relative;
}
.calendar .selected-week:before {
  content: "";
  position: absolute;
  top: 0;
  left: -4px;
  right: -4px;
  bottom: 0;
  background: rgba(var(--primary), 0.05);
  pointer-events: none;
  border: 1px solid #d6d6d6;
  z-index: 1;
}
.calendar .week-number {
  font-weight: bolder;
}
.calendar .current-day {
  color: var(--primary);
  font-weight: 600;
}
.calendar .current-day:before {
  content: " ";
  background: green;
  position: absolute;
  height: 1px;
  width: 5px;
  bottom: 3px;
  z-index: -1;
}
.calendar .selected-day {
  color: white;
}
.calendar .selected-day:before {
  content: " ";
  background: #3E2683;
  position: absolute;
  border-radius: 50%;
  width: 50%;
  height: 100%;
  aspect-ratio: 1/1;
  width: auto;
  bottom: 0;
  z-index: -1;
}
.calendar .highlighted-day span {
  position: relative;
  z-index: 10;
  color: white;
}
.calendar .highlighted-day:before {
  content: " ";
  background: green;
  position: absolute;
  border-radius: 50%;
  width: 50%;
  height: 100%;
  aspect-ratio: 1/1;
  width: auto;
  bottom: 0;
  z-index: 1;
  border: 1px solid white;
}
.calendar .highlighted-day.opaque span {
  color: var(--text);
}
.calendar .highlighted-day.opaque:before {
  background: var(--button-bg);
  border: 1px solid white;
}
.calendar .selected:before {
  border: 1px solid green;
  background: transparent;
}
.calendar .selected span {
  color: inherit;
}

.double-calendar {
  display: flex;
  gap: 16px;
}
.double-calendar .calendar {
  flex-grow: 1;
}
.double-calendar .calendar .cal-row div {
  z-index: 0;
}

.calendar-new {
  width: 90vw;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  background: white;
}
.calendar-new .control input,
.calendar-new .control textarea {
  width: 100%;
}
.calendar-new .title,
.calendar-new .body {
  padding: 22px;
}
.calendar-new .title {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid silver;
  font-size: 22px;
}
.calendar-new .step-toggler {
  border: 1px solid #767676;
  padding: 4px;
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  display: flex;
  margin: 16px 0;
}
.calendar-new .date-time {
  display: flex;
  align-items: center;
  gap: 8px;
}
.calendar-new .date-time .field {
  flex-grow: 1;
}

.week-input-form {
  margin-top: var(--padding);
}
.week-input-form .day-inputs {
  display: flex;
  gap: var(--gap);
  align-items: center;
  margin-bottom: var(--padding);
}
.week-input-form .day-inputs .field {
  flex-grow: 1;
  margin: 0;
}
.week-input-form .schedule {
  display: flex;
  flex-direction: column;
  gap: var(--padding);
}
.week-input-form .schedule .add-item-header {
  margin: 0;
  margin-bottom: var(--padding);
}
.week-input-form .schedule .schedule-row {
  display: flex;
  gap: var(--gap);
  align-items: center;
}
.week-input-form .schedule .schedule-row .flex.flex-fields {
  margin: var(--gap) 0;
}
.week-input-form .schedule .schedule-row .field {
  flex-grow: 1;
  margin: 0;
}

.week-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--padding);
}
.week-navigation .navigation {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--gap);
}
.week-navigation .navigation a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
}

.week-overviews {
  overflow: hidden;
}
.week-overviews .week {
  display: flex;
  gap: 0;
}
.week-overviews .week .day-labels .day-schedule {
  position: relative;
}
.week-overviews .week .day-labels .day-schedule .label {
  padding: var(--gap);
  display: flex;
  align-items: flex-start;
  position: relative;
  width: 60px;
}
.week-overviews .week .day-labels .day-schedule .label:after {
  content: " ";
  left: 0;
  width: 100vw;
  height: 1px;
  background-color: var(--border-color);
  position: absolute;
  z-index: 1;
  top: -1px;
}
.week-overviews .week .day-labels .day-schedule .label span {
  position: absolute;
  top: -10px;
  width: 60px;
  z-index: 10;
}
.week-overviews .week .day-header {
  height: 40px;
  padding: var(--gap);
  border-bottom: 1px solid silver;
}
.week-overviews .week .day {
  border-right: 1px solid silver;
  position: relative;
  flex-grow: 1;
}
.week-overviews .week .day .appointments {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
}
.week-overviews .week .day .appointments .appointment-block {
  position: absolute;
  width: 90%;
  left: 0%;
  border-radius: 10px;
  right: 5%;
  background-color: #fc7bb5;
  padding: 4px;
  z-index: 10;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.week-overviews .week .day .appointments .appointment-block a {
  text-decoration: none;
  color: inherit;
}
.week-overviews .week .day .schedule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
}
.week-overviews .week .day .schedule .schedule-block {
  position: absolute;
  width: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dcdcdc;
  background: repeating-linear-gradient(45deg, #f8f9fa, #f8f9fa 2px, #ffffff 2px, #ffffff 6px);
}
.week-overviews .week .day .schedule .schedule-block span {
  color: black;
  display: inline-block;
}
.week-overviews .week .day .schedule .schedule-block.dietician_0 {
  background: repeating-linear-gradient(45deg, #87c9a9, #87c9a9 2px, #ffffff 2px, #ffffff 6px);
  border: 1px solid #87c9a9;
}
.week-overviews .week .day .schedule .schedule-block.dietician_1 {
  background: repeating-linear-gradient(45deg, #87a8c9, #87a8c9 2px, #ffffff 2px, #ffffff 6px);
  border: 1px solid #87a8c9;
}
.week-overviews .week .day .schedule .schedule-block.dietician_2 {
  background: repeating-linear-gradient(45deg, #c987c2, #c987c2 2px, #ffffff 2px, #ffffff 6px);
  border: 1px solid #c987c2;
}
.week-overviews .week .interval:nth-child(even) {
  background-color: rgba(244, 244, 244, 0.2901960784);
}

.chat-container {
  display: block !important;
}

.chat {
  display: flex !important;
  align-items: center;
  justify-content: stretch;
  flex-direction: column;
  gap: var(--gap);
}
.chat .reply-card {
  width: 90%;
  position: relative;
  align-items: center;
  display: flex;
  justify-content: flex-end;
}
.chat .main-card {
  width: 90%;
  position: relative;
}
.chat .main-card.incoming {
  margin-left: 20px;
}
.chat .main-card.outgoing {
  margin-right: 20px;
}
.chat .main-card .title {
  font-size: 1rem;
}
.chat .main-card .title a {
  color: inherit;
  font-size: 14px;
}
.chat .arrow-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
  position: absolute;
}
.chat .arrow-down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #f00;
  position: absolute;
}
.chat .arrow-right {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid var(--box-color);
  position: absolute;
  right: -20px;
}
.chat .arrow-left {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid var(--box-color);
  position: absolute;
  left: -20px;
}

body:has(dialog[open]) {
  overflow: hidden;
  display: block;
}

dialog {
  padding: 0;
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  grid-template-rows: min-content;
  width: 90vw;
  max-width: 700px;
  border-color: var(--border-color);
  border-width: 1px;
}
dialog.is-big {
  max-width: 1200px;
}
dialog .w-100,
dialog form,
dialog .form {
  width: 100%;
}
dialog img {
  width: 100%;
  height: auto;
}
dialog .form {
  box-shadow: 0 4px 32px rgba(69, 51, 68, 0.16);
  display: grid;
  grid-template-rows: min-content 1fr min-content;
}
@media screen and (max-width: 700px) {
  dialog .form {
    box-shadow: none;
  }
}
dialog .form .field .label {
  background: var(--box-color);
}
dialog .header {
  padding: var(--padding);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: calc(var(--padding) / 2);
  padding-bottom: calc(var(--padding/2));
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0 !important;
}
dialog .header h2 {
  margin: 0;
  padding: 0;
}
dialog .header .close {
  text-decoration: none;
  font-size: 17px;
  padding: 0 6px;
}
dialog .body {
  padding: var(--padding);
  overflow: auto;
}
dialog .body .split-form {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--padding);
}
dialog .body .split-form .sidebar {
  border-right: 1px solid var(--border-color);
  padding-right: var(--padding);
}
dialog .body .split-form .main .add-item-header:first-of-type {
  margin-top: 0;
}
dialog .actions {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: calc(var(--padding) - 4px) var(--padding);
  border-top: 1px solid var(--border-color);
  justify-content: flex-end;
  padding-bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + var(--padding)); /* Fallback for non-iOS */
}
dialog .actions form {
  margin: 0;
}
@media screen and (max-width: 700px) {
  dialog .actions {
    flex-direction: column;
    align-items: stretch;
  }
  dialog .actions .button {
    flex-grow: 1;
    width: 100%;
  }
}
dialog .actions .action-group {
  display: flex;
  align-items: center;
  gap: var(--gap);
}
@media screen and (max-width: 700px) {
  dialog .actions .action-group {
    flex-direction: column;
    align-items: stretch;
  }
  dialog .actions .action-group .button {
    flex-grow: 1;
    width: 100%;
  }
}
dialog .actions .recalculate-toggle {
  margin-right: auto;
}
dialog .confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap);
  padding: var(--padding);
}
@media screen and (max-width: 700px) {
  dialog:not(.small) {
    width: 100vw;
    max-width: unset;
    height: 94vh;
    margin: 0;
    top: unset;
    padding: 0;
    display: flex;
    align-items: stretch;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }
  dialog:not(.small) .form {
    bottom: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }
}
dialog.offset-dialog {
  background-color: var(--secondary);
  color: white;
}
dialog.offset-dialog h2 {
  color: white;
}
dialog.offset-dialog .close {
  color: white;
}
dialog.offset-dialog img {
  margin: var(--padding) 0;
}
dialog trix-editor {
  min-height: 11em;
}
dialog.small-centered-dialog {
  max-width: 400px;
  align-content: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
dialog.small-centered-dialog .form {
  box-shadow: none;
}
dialog.small-centered-dialog .form .qr-code-section {
  display: flex;
  align-content: center;
  justify-content: center;
  margin: px;
  margin-bottom: var(--container-padding);
}

dialog::backdrop {
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 20px);
}

.login-screen {
  display: grid;
  grid-template-columns: 1fr minmax(40%, 300px);
  align-items: center;
}
.login-screen .logo {
  position: absolute;
  z-index: 1000;
  left: 10px;
  top: 10px;
  width: 80px;
  height: auto;
}
.login-screen .logo img {
  width: 100%;
  height: auto;
}
.login-screen .login-wrapper {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding);
}
.login-screen .login-wrapper .login-container {
  width: 95%;
  padding: calc(var(--padding) * 1.5);
  max-width: 350px;
  border-radius: 20px;
  background-color: var(--block-color);
  padding-bottom: var(--padding);
}
.login-screen .login-wrapper .login-container label {
  background-color: var(--block-color) !important;
}
.login-screen .login-wrapper .login-container input[type=text],
.login-screen .login-wrapper .login-container input[type=password] {
  width: 100%;
}
.login-screen .login-wrapper .login-container .checkbox {
  margin: 0;
}
.login-screen .login-wrapper .login-container p {
  margin-bottom: calc(var(--padding) / 1);
}
.login-screen .login-image {
  flex: 0 0 30%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.login-screen .login-image img {
  animation: move 60s ease;
  position: absolute;
  height: 100%;
  width: 200%;
  object-fit: cover;
}
.login-screen .button {
  width: 100%;
}

@media screen and (max-width: 700px) {
  .login-screen {
    grid-template-columns: 1fr;
    height: 100dvh;
  }
  .login-screen .login-image {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0.5;
  }
}
@keyframes move {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  60% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-90px, -120px, 0px);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  100% {
    transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px);
    opacity: 1;
  }
}
.qr-code-screen .login-image {
  position: fixed;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 50vw;
  overflow: hidden;
}
@media screen and (max-width: 700px) {
  .qr-code-screen .login-image {
    width: 100vw;
  }
}
.qr-code-screen .login-image img {
  animation: move 60s ease;
  position: absolute;
  height: 200%;
  width: 200%;
  object-fit: cover;
}
.qr-code-screen .arrow {
  position: absolute;
  top: -121px;
  right: 122px;
  width: 350px;
  height: 200px;
  filter: drop-shadow(-2px 4px 0px green);
}
@media screen and (max-width: 700px) {
  .qr-code-screen .arrow {
    display: none;
  }
}
.qr-code-screen .arrow img {
  width: 100%;
  height: auto;
}
.qr-code-screen .logo {
  position: absolute;
  top: var(--gap);
  left: var(--gap);
  width: 80px;
  height: auto;
}
.qr-code-screen .logo img {
  width: 100%;
  height: auto;
}
.qr-code-screen .login-wrapper {
  position: relative;
  z-index: 100;
  top: 100px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--padding);
}
.qr-code-screen .login-wrapper h1 {
  background-color: var(--primary);
}
.qr-code-screen .login-wrapper form {
  margin-top: var(--padding);
}
.qr-code-screen .login-wrapper .offset {
  color: var(--primary);
}
.qr-code-screen .login-wrapper .qr-code-container {
  padding: 0;
  background-color: var(--container-color);
  max-width: 800px;
  width: 90vw;
  margin-top: 0;
}
.qr-code-screen .login-wrapper .qr-code-container .flex-qr-code {
  padding: var(--padding);
  display: flex;
  gap: var(--padding);
}
@media screen and (max-width: 700px) {
  .qr-code-screen .login-wrapper .qr-code-container .flex-qr-code {
    flex-direction: column;
  }
  .qr-code-screen .login-wrapper .qr-code-container .flex-qr-code .demo-qr {
    text-align: left;
  }
}
.qr-code-screen .login-wrapper .qr-code-container .demo-qr {
  text-align: center;
}

.onboarding h2 {
  color: var(--primary);
}

.container {
  padding: var(--container-padding);
  box-shadow: 0 2px 8px rgba(69, 51, 68, 0.08);
  border-radius: 4px;
  margin: var(--container-padding);
  margin-right: auto;
  margin-left: auto;
  max-width: 1500px;
  width: 95vw;
  position: relative;
  z-index: 1;
}
.container.padding {
  padding: var(--padding) 0;
}
.container.has-dishes {
  padding-bottom: 150px !important;
}
.container.has-dishes .pagination {
  margin-bottom: var(--gap);
}
.container.has-dishes .pagination a {
  padding: var(--gap) calc(var(--gap) * 2);
}
.container.has-settings {
  padding-bottom: 150px !important;
}
.container.has-terms {
  background-color: var(--box-color);
}
.container.has-terms form {
  padding: var(--padding);
}
@media screen and (max-width: 700px) {
  .container {
    background: transparent;
    box-shadow: none;
    border: none;
    width: unset;
    margin: 0;
    max-width: unset;
    padding-bottom: 72px;
    width: unset;
    padding: 0;
  }
}
.container .container-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container .container-header h1 {
  margin-bottom: var(--gap);
  display: flex;
  align-items: center;
}
.container .container-header h1 a {
  text-decoration: none;
  display: flex;
  align-items: center;
}

main.admin .container {
  background-color: var(--box-color);
}
main.admin .table-header form {
  margin-bottom: var(--gap);
}
main.admin .table-header .search {
  margin-top: var(--gap);
}
main.admin .table-header h1 {
  display: flex;
}
main.admin .table-header h1 .header-actions {
  margin-left: auto;
}
main.admin .table-wrapper [data-sort] {
  color: inherit;
}

.container-header {
  display: flex;
  background-color: var(--box-color);
  gap: var(--padding);
  flex-wrap: wrap;
}

.filter-header {
  display: flex;
  background-color: var(--box-color);
  gap: var(--padding);
  flex-wrap: wrap;
  padding: var(--gap) var(--container-padding);
}
.filter-header .options {
  display: flex;
  gap: var(--gap);
}

.tag-list {
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
  flex-wrap: wrap;
}

.tag {
  white-space: nowrap;
  border-radius: 25px;
  padding: 4px calc(var(--gap) * 2);
  display: inline-flex;
  align-items: center;
  background: var(--offset-input-bg);
  color: var(--color);
  font-size: 0.8rem;
}
.tag.highlight {
  background-color: transparent;
}

.transparent-admin-container .events {
  margin-right: auto;
  margin-left: auto;
  max-width: 1500px;
  width: 95vw;
  position: relative;
  z-index: 1;
  padding-top: var(--container-padding);
}

.split-container {
  display: grid;
  padding: var(--container-padding);
  grid-template-columns: min-content 1fr;
  align-items: flex-start;
}
.split-container.equal-width {
  grid-template-columns: 50% 50%;
}
.split-container .split-container {
  padding-top: 0;
}
.split-container.small {
  font-size: 0.6rem;
}
.split-container.equal {
  grid-template-columns: 1fr 1fr;
}
.split-container .side-container {
  background-color: var(--container-color);
  padding: var(--container-padding);
  box-shadow: 0 2px 8px rgba(69, 51, 68, 0.08);
  border-radius: 4px;
  min-width: 280px;
  background-color: var(--box-color);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.0588235294);
  z-index: 100;
  position: relative;
  position: relative;
  min-height: 600px;
}
.split-container .side-container hr {
  margin: 0;
  width: 100%;
}
.split-container .side-container h1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.split-container .side-container h1 a {
  color: inherit;
  text-decoration: none;
  font-size: 1.4rem;
}
.split-container .side-container .header {
  margin-top: var(--padding);
  border-bottom: 1px solid var(--border-color);
}
.split-container .side-container .user-weights {
  justify-content: flex-start;
}
.split-container .side-container .action-links {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  top: 30px;
  background: white;
  padding: var(--gap);
  right: -10px;
  border: 1px solid var(--border-color);
}
.split-container .side-container .action-links a {
  color: inherit;
}
.split-container .main-card:not(.hapiness) {
  background-color: var(--box-color);
}
.split-container .main-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--padding);
  padding-left: var(--padding);
}
.split-container .main-container .main-container {
  padding-left: 0;
}
.split-container .main-container .select {
  max-width: 200px;
}
.split-container .main-container .sub-container {
  background-color: var(--box-color);
  padding: var(--container-padding);
  box-shadow: 0 2px 8px rgba(69, 51, 68, 0.08);
  border-radius: 4px;
  background-color: var(--box-color);
}
.split-container .main-container .sub-container .field .label {
  background: var(--box-color);
}
.split-container .main-split-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--padding);
}
.split-container .main-split-container.has-three {
  grid-template-columns: 1fr 1fr 1fr;
}
.split-container .main-split-container .sub-container.flex-grow {
  grid-column-start: 0;
  grid-column-end: 1;
}
.split-container .flex-container {
  overflow: auto;
  display: flex;
  gap: var(--padding);
  align-items: flex-start;
  padding-left: var(--padding);
}
.split-container .flex-container turbo-frame {
  width: 100%;
}
.split-container .flex-container .main {
  flex-grow: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  flex-wrap: wrap;
  gap: var(--padding);
  grid-auto-rows: min-content;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.split-container .flex-container .main-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.split-container .flex-container .main-list .main-card {
  display: grid;
  grid-template-columns: 125px 1fr min-content;
  padding: var(--padding);
  gap: var(--gap);
  align-items: center;
}
.split-container .flex-container .main-list .main-card details {
  display: flex;
  width: 100%;
  flex-direction: column;
  grid-column: 1/span 3;
}
.split-container .flex-container .main-list .main-card details summary {
  width: 100%;
  display: grid;
  grid-template-columns: 125px 1fr min-content;
  gap: var(--gap);
  align-items: center;
}
.split-container .flex-container .main-list .main-card details .details {
  padding-top: var(--padding);
  font-size: 0.9rem;
}
.split-container .flex-container .main-list .main-card .text {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.split-container .flex-container .main-list .main-card .text.date {
  border-right: 1px solid black;
}

.transparent-container {
  color: white;
  max-width: 600px;
  position: relative;
  left: 9%;
  margin-top: 10vh;
}
@media screen and (max-width: 700px) {
  .transparent-container {
    margin-top: calc(var(--gap) * 5);
    padding-top: 0;
    left: var(--padding);
    width: 80%;
  }
}

.offset-container {
  color: #000000;
  position: relative;
  margin-top: 23vh;
  margin-left: 9%;
  margin-right: 9%;
  background-color: #f0f5f5;
  padding: calc(var(--padding) * 2);
  border-radius: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--padding);
}
@media screen and (max-width: 700px) {
  .offset-container {
    margin-top: calc(var(--gap) * 5);
    left: var(--padding);
    width: 80%;
  }
}
.offset-container .most-cancelled-items .lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.offset-container .most-cancelled-items .lines .most-cancelled-items {
  display: flex;
  width: 100%;
}
.offset-container .most-cancelled-items .lines .line {
  flex-grow: 1;
  margin-right: var(--gap);
  margin-left: var(--gap);
  border-bottom: 1px dotted black;
}

.main-body-container {
  margin-left: 9%;
  margin-right: 9%;
  margin-top: 50px;
  background-color: var(--body-bg);
}
.main-body-container .title-banner {
  text-align: center;
}
.main-body-container .title-banner .title {
  font-size: 1.2rem;
  font-weight: bold;
}
.main-body-container .page-sections {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.main-body-container .page-section {
  display: flex;
  gap: var(--gap);
  background-color: #f0f5f5;
  padding: calc(var(--gap) * 2);
  border-radius: 15px;
}
.main-body-container .page-section:nth-child(odd) {
  flex-direction: row-reverse;
}
.main-body-container .categories {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(auto-fill, min-content);
  gap: calc(var(--gap) * 2);
}
.main-body-container .categories a {
  text-decoration: none;
  color: var(--text-color);
}
.main-body-container .category {
  background-color: #f0f5f5;
  border-radius: 15px;
}
.main-body-container .category .category-name,
.main-body-container .category ul {
  padding: calc(var(--gap) * 2);
}
.main-body-container .category .category-name {
  color: #296236;
  font-weight: bolder;
  padding-bottom: var(--gap);
}

.slider-container {
  margin-left: 9%;
  margin-right: 9%;
  margin-top: 50px;
  background-color: var(--body-bg);
}
.slider-container .title-banner {
  text-align: center;
}
.slider-container .title-banner .title {
  font-size: 1.2rem;
  font-weight: bold;
}

.events {
  display: flex;
  gap: var(--padding);
}
.events .event {
  border: 1px solid var(--border-color);
  color: inherit !important;
  text-decoration: none;
  background-color: var(--body-bg);
  margin-bottom: var(--padding);
}
.events .event .header {
  font-weight: bold;
}
.events .event .date {
  font-size: 0.9rem;
}
.events .event a {
  display: block;
  color: inherit !important;
  text-decoration: none;
  padding: var(--padding);
}

main {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
@media screen and (max-width: 700px) {
  main {
    background: var(--container-color);
  }
}
main .flex-grow {
  flex-grow: 1;
}
main.client .container {
  margin-right: var(--padding);
  margin-left: var(--padding);
}
@media screen and (min-width: 800px) {
  main.client .container {
    max-width: 500px;
    box-shadow: none;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
body.double-header {
  grid-template-rows: min-content min-content 1fr;
}

#main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.container {
  flex-grow: 1;
  padding-bottom: 150px;
}
.container > form {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: min-content 1fr min-content;
}

.header-frame {
  background: white;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
}
.header-frame #menu-content {
  width: 100%;
}
.header-frame #menu-content .tabs {
  width: 100%;
  justify-content: center;
  background: white;
}
.header-frame #menu-content .tabs .menu-item .text {
  display: none;
}
.header-frame #menu-content .tabs .menu-item .material-symbols-outlined {
  display: block;
}

.reverse {
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 10000000;
}

.frame {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame .frame-content {
  position: relative;
  margin: 20px 0px;
}
.frame main {
  width: 440px;
}
.frame main .scroll-snap {
  width: 440px;
  scroll-snap-type: unset;
  -ms-overflow-style: unset;
  scrollbar-width: unset;
}
.frame main .scroll-snap::-webkit-scrollbar {
  display: unset; /* Safari and Chrome */
}
.frame main .scroll-snap .tabs {
  width: 440px;
  overflow-x: scroll;
}
.frame main .backdrop {
  position: absolute;
}
.frame main .container {
  max-width: 400px !important;
}
.frame main .list {
  max-width: 400px !important;
}
.frame main .actions {
  flex-direction: column !important;
}
.frame main .scroll-snap.full-width {
  overflow: scroll;
  scrollbar-width: unset;
  scroll-snap-type: unset;
  width: 400px;
}
.frame main .scroll-snap .tab.full-width {
  width: 380px;
}