/*!*************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/css/lib/index.scss ***!
  \*************************************************************************************************************************************************************************/
@charset "UTF-8";
div, a {
  position: relative;
  vertical-align: top;
}

div {
  font-size: 0;
  display: block;
}

button, hr, input {
  overflow: visible;
}

input:focus, textarea {
  outline: 0;
}

html {
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
}

a {
  background-color: transparent;
}

b, strong {
  font-weight: bolder;
}

img {
  border-style: none;
}

button, input, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1;
  margin: 0;
}

button {
  text-transform: none;
  cursor: pointer;
}

button {
  -webkit-appearance: button;
}

button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring {
  outline: ButtonText dotted 1px;
}

[hidden] {
  display: none;
}

button, input, label, select, textarea {
  margin: 0;
  border: 0;
  padding: 0;
  display: block;
  vertical-align: top;
  background: 0 0;
  line-height: 1;
  outline: 0;
}

button {
  overflow: visible;
  width: auto;
}

textarea {
  overflow: auto;
}

* {
  color: #2c2c2c;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: #f8f8f8;
}

.material-symbols-outlined {
  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;
}

h1, h2, h3, h4, h5, h6 {
  display: block;
  font-size: 12px;
  color: #000000;
  margin: 0px;
  padding: 10px 10px 10px 0px;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

.p {
  font-size: 12px;
}

.preload {
  position: absolute;
  opacity: 0;
  height: 0px;
  width: 0px;
  top: 0px;
  left: 0px;
}

.scrollable-x > .scroll::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100px;
  pointer-events: none;
  background: linear-gradient(to left, #f2f4f7, rgba(242, 244, 247, 0));
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 1;
}

.scrollable-x > .scroll::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100px;
  pointer-events: none;
  background: linear-gradient(to right, #f2f4f7, rgba(242, 244, 247, 0));
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 1;
}

.scrollable-x.scroll-right > .scroll::after {
  opacity: 1;
}

.scrollable-x.scroll-left > .scroll::before {
  opacity: 1;
}

#resize-alert {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  background-color: #ffffff;
  z-index: 999999;
}
#resize-alert > div {
  font-size: 20px;
  color: #8b9295;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  text-align: center;
}

#loader {
  position: fixed;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  background-color: #ffffff;
}
#loader > div {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  width: 48px;
  height: 48px;
  border: 5px solid #cce982;
  border-radius: 50%;
  display: block;
  box-sizing: border-box;
  animation: pulse 1s linear infinite;
}
#loader > div:after {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  border: 5px solid #cce982;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: scaleUp 1s linear infinite;
}
@keyframes scaleUp {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  60%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes pulse {
  0%, 60%, 100% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.2);
  }
}

a, a:visited, a:active, a:focus {
  font-size: 14px;
  color: #8cc300;
  text-decoration: underline;
  transition: color 0.2s ease-in-out;
}

a .material-symbols-outlined, a:visited .material-symbols-outlined, a:active .material-symbols-outlined, a:focus .material-symbols-outlined {
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: #7ca809;
}

button, .btn, button:visited, button:active, button:focus, .btn:visited, .btn:active, .btn:focus {
  font-size: 16px;
  color: #ffffff;
  background-color: #8cc300;
  border-radius: 8px;
  padding: 0 30px;
  height: 44px;
  transition: background-color 0.3s ease-in-out;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button.medium, .btn.medium, button.medium:visited, button.medium:active, button.medium:focus, .btn.medium:visited, .btn.medium:active, .btn.medium:focus {
  padding: 0 14px;
  height: 36px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

button .material-symbols-outlined, .btn .material-symbols-outlined, button:visited .material-symbols-outlined, button:active .material-symbols-outlined, button:focus .material-symbols-outlined, .btn:visited .material-symbols-outlined, .btn:active .material-symbols-outlined, .btn:focus .material-symbols-outlined {
  transition: color 0.2s ease-in-out;
}

button:hover, .btn:hover {
  color: #ffffff;
  background-color: #7ca809;
}

button.danger, .btn.danger {
  background-color: #d82e2e;
}

button.danger:hover, .btn.danger:hover {
  background-color: #ff5555;
}

button.warning, .btn.warning {
  background-color: #d8832e;
}

button.warning:hover, .btn.warning:hover {
  background-color: #eaa142;
}

button.b-warning, .btn.b-warning {
  border-color: #d8832e !important;
  color: #d8832e !important;
}

button.b-warning:hover, .btn.b-warning:hover {
  border-color: #eaa142 !important;
  color: #eaa142 !important;
}

button.secondary, .btn.secondary {
  border: 1px solid #d0d5dd;
  background-color: #ffffff;
  color: #344054;
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
}

button.secondary:hover, .btn.secondary:hover {
  background-color: #f4f5f7;
  color: #344054;
}

button[data-icon], .btn[data-icon] {
  padding-left: 38px;
  padding-right: 18px;
}

button[data-icon][data-icon-after], .btn[data-icon][data-icon-after] {
  padding-left: 18px;
  padding-right: 38px;
}

button[data-icon]::before, .btn[data-icon]::before, button[data-icon][data-icon-after]::after, .btn[data-icon-after]::after {
  font-family: "Material Symbols Outlined";
  font-size: 22.8px;
  position: absolute;
  top: 0px;
  left: 10px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variation-settings: "FILL" 0, "wght" 300;
  font-weight: normal;
}

button[data-icon]::before, .btn[data-icon]::before {
  content: attr(data-icon);
}

button[data-icon][data-icon-after]::before, .btn[data-icon][data-icon-after]::before {
  content: "";
  display: none;
}

button[data-icon][data-icon-after]::after, .btn[data-icon][data-icon-after]::after {
  left: unset;
  right: 10px;
  content: attr(data-icon);
}

button[data-icon][data-icon-filled]::before, .btn[data-icon][data-icon-filled]::before {
  font-variation-settings: "FILL" 1, "wght" 300;
}

button[data-icon][data-icon-filled]::after, .btn[data-icon][data-icon-filled]::after {
  font-variation-settings: "FILL" 1, "wght" 300;
}

.btn.secondary.disabled {
  background-color: #f2f4f7;
  color: #bac1cb;
}

button.is-loading, .btn.is-loading, form.is-loading button[type=submit] {
  color: transparent;
  background-color: #c9dd96;
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}

button.is-loading:after, .btn.is-loading:after, form.is-loading button[type=submit]:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
  cursor: not-allowed;
  pointer-events: none;
}

.button.shadow, .btn.shadow {
  box-shadow: 0px 0.6px 0.6px -1.25px rgba(0, 0, 0, 0.17997), 0px 2.28px 2.28px -2.5px rgba(0, 0, 0, 0.15889), 0px 10px 10px -3.75px rgba(0, 0, 0, 0.0625);
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}
input {
  -webkit-appearance: none;
}

input, .select {
  height: 44px;
}

input, .select, .daterange, .basic-btn, .options, textarea {
  color: #101828;
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid rgb(207, 212, 220);
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease-in-out;
}

input:focus, .select:focus, .select.focus, .options, textarea:focus {
  border-color: #8cc300;
}

.select.disabled:focus {
  border-color: rgb(207, 212, 220);
}

input[disabled], textarea[disabled] {
  background-color: #f8f8f8;
  cursor: default;
  color: #74747b;
}

form {
  width: 100%;
  padding: 0px;
}
form > .input {
  padding: 0px 0px 26px 0px;
  width: 100%;
}
form > .input[data-triggered="1"] {
  display: none !important;
}
form > .input[data-triggered="1"].trigger-displayed {
  display: block !important;
}
form > .input-btn {
  padding-bottom: 0px;
}
form > .input-btn > button {
  margin-top: 6px;
}
form {
  /* > div:first-child, */
}
form .input:first-child {
  padding-top: 0px;
}
form {
  /* > div:last-child,*/
}
form .input:last-child {
  padding-bottom: 0px;
}
form .label {
  font-size: 14px;
  color: #4c5668;
  margin: 0px 0px 8px 0px;
  font-weight: 500;
}
form .label.bigger-text {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
form .description {
  font-size: 13px;
  color: #6f747c;
  margin: 10px 0px;
  font-weight: 400;
  padding-left: 0px;
  white-space: pre-wrap;
}
form .description.bigger-text {
  font-size: 14px;
  text-align: center;
  margin-bottom: 20px;
}
@media screen and (min-width: 500px) {
  form .input-text.inline {
    display: inline-block;
    width: calc(50% - 10px);
    vertical-align: top;
  }
}

.input-text.tiny input {
  width: 55px;
  height: 36px;
}

.form-page {
  display: none;
}

.form-page[data-id="0"] {
  display: block;
}

.form-page[data-pagination="1"] {
  padding-bottom: 0px;
}

.form-pagination {
  padding-top: 10px;
  text-align: right;
}
.form-pagination .btn {
  padding: 0 16px;
  height: 36px;
}
.form-pagination .btn span {
  color: white;
}
.form-pagination {
  /* .btn:first-child {
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
   }
   .btn:last-child {
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
   }*/
}

.btn-full,
.btn-full:link,
.btn-full:visited,
.btn-full:hover,
.btn-full:focus,
.btn-full:active {
  width: 100%;
  padding: 40px 10px;
}
.btn-full span,
.btn-full:link span,
.btn-full:visited span,
.btn-full:hover span,
.btn-full:focus span,
.btn-full:active span {
  padding-right: 10px;
}

.barcode-404 {
  width: 100%;
  position: absolute;
  bottom: 0px;
  background-color: #ffffff;
  height: 64px;
  z-index: 1000;
  display: flex;
  justify-content: center; /* centers horizontally */
  align-items: center; /* centers vertically */
  gap: 10px; /* space between buttons */
}
.barcode-404 > .btn {
  height: 50px;
  font-weight: 500;
  font-size: 14px;
  z-index: 99;
  border: 2px solid white;
  z-index: 1001;
  top: -18px;
}
@media screen and (max-width: 375px) {
  .barcode-404 > .btn {
    padding: 0px 13px;
  }
  .barcode-404 > .btn:before {
    display: none;
  }
}
.barcode-404 > .copyright {
  display: block;
  position: absolute;
  bottom: 1px;
  font-size: 12px;
  text-align: center;
  color: #ababab;
  text-decoration: none;
}
.barcode-404 input {
  display: none;
}
.barcode-404 .scandit-manual-input span {
  color: white;
}
.barcode-404 .corner-left {
  position: absolute;
  bottom: 62px;
  left: -1px;
  width: 20px;
}
.barcode-404 .corner-right {
  position: absolute;
  bottom: 62px;
  right: -1px;
  width: 20px;
  transform: scaleX(-1);
}

.img-label {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
}
.img-label > img {
  width: 100%;
}

.img-examples {
  display: block;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid #e2e6ed;
}
.img-examples > .product-info {
  display: flex;
  text-decoration: none;
}
.img-examples > .product-info div:first-child {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 30px;
}
.img-examples > .product-info div:last-child {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  padding: 0px 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.img-examples > .product-info::after {
  content: "";
  position: absolute;
  bottom: -10px;
  height: 1px;
  background-color: #ebebeb;
  width: 100%;
}
.img-examples > h2 {
  display: block;
  font-size: 14px;
  padding: 22px 10px 12px 7px;
  color: #72757a;
}
.img-examples > .examples {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: 8px;
}
.img-examples > .examples a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  flex: 0 0 calc(50% - 5px);
  border-radius: 10px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
}
.img-examples > .examples a:only-child {
  flex: 0 0 100%;
}
.img-examples > .examples a:last-child:nth-child(odd) {
  flex: 0 0 100%;
}
.img-examples > .examples a > div:first-child {
  position: relative;
  padding: 10px;
  padding-bottom: 0px;
}
.img-examples > .examples a > div:first-child > div {
  width: 100%;
  height: 130px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 7px;
}
.img-examples > .examples a > div:first-child .btn {
  position: absolute;
  top: 5px;
  right: 15px;
  border-radius: 30px;
  width: 20px;
  height: 20px;
  padding: 0px;
  z-index: 1;
  padding: 2px;
}
.img-examples > .examples a > div:first-child .btn > span {
  font-size: 12px;
  color: white;
}
.img-examples > .examples a > div:last-child {
  padding: 10px;
}
.img-examples > .examples a > div:last-child span {
  font-size: 12px;
  color: #262626;
}
.img-examples > .examples a > div:last-child span:last-child {
  display: none;
}

.emoji {
  font-size: 70px;
  margin-top: 50px;
  margin-bottom: 20px;
}

.file-preview {
  display: none;
  width: 100%;
  border-radius: 8px;
}

.file-preview-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 0px;
  background-color: #f03320;
  border-radius: 0px;
  padding: 0px;
  vertical-align: top;
  width: 32px;
  height: 32px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  border-radius: 32px;
  text-decoration: none;
}
.file-preview-remove .material-symbols-outlined {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
}

.file-preview-remove:hover {
  background-color: #ff5555;
}

.input-metadata .field-close {
  display: none;
}
.input-metadata {
  position: relative;
}
.input-metadata .meta {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.input-metadata .meta > div:first-child {
  width: 70%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}
.input-metadata .meta > div:last-child {
  width: 30%;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
}
.input-metadata .meta > div:last-child .img {
  width: 40px;
}
.input-metadata .meta::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -50px;
  right: -50px;
  height: 1px;
  background-color: #e2e6ed;
}
.input-metadata .progress-bar, .input-metadata .special-progress-bar {
  width: 100%;
  background-color: #e7e7e7;
  height: 10px;
  border-radius: 10px;
  overflow: hidden;
}
.input-metadata .progress-bar > div, .input-metadata .special-progress-bar > div {
  width: 0%;
  height: 100%;
  background-color: #8cc300;
  transition: width 0.8s ease-in-out;
  background-size: 200%;
  background-position: 80%;
  border-radius: 5px;
}

.special-progress-bar {
  width: 100%;
  background-color: #e7e7e7;
  height: 10px;
  overflow: hidden;
}
.special-progress-bar > div {
  width: 0%;
  height: 100%;
  background-color: #8cc300;
  transition: width 0.8s ease-in-out;
  background-size: 200%;
  background-position: 80%;
}

.collecting .label {
  color: #1e232b;
  font-weight: 600;
  font-size: 16px;
}
.collecting .description {
  color: #555557;
}
.collecting .file-preview {
  cursor: pointer;
}

.scandit {
  background-color: transparent !important;
}

.scandit-container {
  margin-bottom: 20px;
  border-radius: 14px !important;
  overflow: hidden !important;
  background-color: #fafafa !important;
}

.input-text[data-icon] input {
  padding-left: 42px;
}

.input-text[data-icon][data-icon-after] input {
  padding-left: 20px;
  padding-right: 42px;
}

.input-text[data-icon]::before, input[data-icon][data-icon-after]::after {
  font-family: "Material Symbols Outlined";
  font-size: 24px;
  position: absolute;
  top: -1px;
  left: 10px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variation-settings: "FILL" 0, "wght" 300;
  font-weight: normal;
  color: rgb(138, 147, 162);
}

.input-text[data-icon][data-icon-t0]::before, input[data-icon][data-icon-t0][data-icon-after]::after {
  top: 0px;
}

.input-text[data-icon]::before {
  content: attr(data-icon);
}

.input-text[data-icon][data-icon-after]::before {
  content: "";
  display: none;
}

.input-text[data-icon][data-icon-after]::after {
  left: unset;
  right: 10px;
  content: attr(data-icon);
}

.input-text[data-icon][data-icon-filled]::before {
  font-variation-settings: "FILL" 1, "wght" 300;
}

.input-text[data-icon][data-icon-filled]::after {
  font-variation-settings: "FILL" 1, "wght" 300;
}

.input-text.required input {
  border-color: #ff5656;
}

.input-date.required input {
  border-color: #ff5656;
}

.input-textarea.required textarea {
  border-color: #ff5656;
}

.input-file .file-drop {
  transition: border-color 0.2s ease-in-out;
}
.input-file .drop-hover {
  outline: 3px dashed #d9dee8 !important;
  border-color: transparent !important;
}
.input-file .edit.disabled .file-select {
  cursor: default;
  background-color: #f8f8f8 !important;
}
.input-file .edit.disabled .file-select .icon span {
  color: #b5b5b5 !important;
}
.input-file .edit.disabled > a > .p {
  color: #b5b5b5 !important;
}
.input-file .edit.disabled > a > .p > span {
  color: #b5b5b5 !important;
}
.input-file .edit.disabled > a > .p > div {
  color: #b5b5b5 !important;
}
@media screen and (max-width: 1030px) {
  .input-file .edit > a > .p {
    color: white !important;
    padding-top: 20px !important;
  }
  .input-file .edit > a > .p > span {
    display: block !important;
  }
  .input-file .edit > a > .p > div {
    color: white !important;
  }
}

.input-radio > a, .input-checkbox > a {
  margin-left: 6px;
  display: block;
  padding: 4px 0px;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  cursor: pointer;
}
.input-radio > a .box, .input-checkbox > a .box {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 22px;
  width: 22px;
  border-radius: 22px;
  background-color: #ffffff;
  border: 1px solid rgb(207, 212, 220);
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
  transition: border-color 0.2s ease-in-out;
}
.input-radio > a .box > div, .input-checkbox > a .box > div {
  width: 14px;
  height: 14px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 14px;
  margin: 0;
  transition: background-color 0.2s ease-in-out;
  /*
    width: 14px;
    height: 14px;
  */
}
.input-radio > a .text, .input-checkbox > a .text {
  max-width: calc(100% - 40px);
  font-size: 12px;
  display: inline-block;
  font-size: 14px;
  padding: 5px;
  color: #101828;
}
.input-radio > a:hover .box, .input-checkbox > a:hover .box {
  border-color: #8cc300;
}
.input-radio > a:hover .box > div, .input-checkbox > a:hover .box > div {
  background-color: #f3f3f3;
}
.input-radio > a.disabled:hover .box, .input-checkbox > a.disabled:hover .box {
  border: 1px solid rgb(207, 212, 220);
}
.input-radio > a.disabled:hover .box > div, .input-checkbox > a.disabled:hover .box > div {
  background-color: #ffffff;
}
.input-radio > a.selected .box, .input-checkbox > a.selected .box {
  border-color: #8cc300;
}
.input-radio > a.selected .box > div, .input-checkbox > a.selected .box > div {
  background-color: #8cc300;
}
.input-radio > a.disabled, .input-checkbox > a.disabled {
  cursor: default;
}
.input-radio > a.disabled .text, .input-checkbox > a.disabled .text {
  color: #74747b;
}
.input-radio > a.selected.disabled .box, .input-checkbox > a.selected.disabled .box {
  border-color: #c3cea8;
}
.input-radio > a.selected.disabled .box > div, .input-checkbox > a.selected.disabled .box > div {
  background-color: #daeea7;
}
.input-radio > a.no-boxes, .input-checkbox > a.no-boxes {
  margin-top: 20px;
  margin-left: 0px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  border-radius: 10px;
  padding: 0px 16px;
  height: 60px;
  transition: background-color 0.2s ease-in-out;
  border: 1px solid rgb(234, 236, 240);
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
}
.input-radio > a.no-boxes .text, .input-checkbox > a.no-boxes .text {
  color: #344054;
  padding-left: 16px;
  font-size: 16px;
  font-weight: 500;
}
.input-radio > a.no-boxes .box, .input-checkbox > a.no-boxes .box {
  border-color: #e4e4e4;
  background-color: #e4e4e4;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 30px;
  height: 30px;
}
.input-radio > a.no-boxes .box > div, .input-checkbox > a.no-boxes .box > div {
  display: none;
}
.input-radio > a.no-boxes:hover, .input-checkbox > a.no-boxes:hover {
  background-color: #f9f9f9;
}
.input-radio > a.after:after, .input-checkbox > a.after:after {
  font-size: 16px;
  color: #ffffff;
  background-color: #8cc300;
  border-radius: 8px;
  padding: 0 30px;
  transition: background-color 0.2s ease-in-out;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  content: attr(data-after);
  font-size: 14px;
  word-spacing: 4px;
  position: absolute;
  top: 11px;
  right: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  padding: 0px 18px;
  height: 36px;
}

.input-checkbox > a .box {
  border-radius: 6px;
}
.input-checkbox > a .box > div {
  border-radius: 3px;
  margin: 2px;
}

.input-daterange, .input-textrange {
  display: block;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  cursor: pointer;
}
.input-daterange > div, .input-textrange > div {
  color: #101828;
  font-size: 16px;
  line-height: 1.35em;
  display: flex;
  align-items: center;
  align-content: flex-start;
  height: 100%;
}
.input-daterange > div > span, .input-textrange > div > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
}

.input-select .select, .input-textrange .select {
  display: block;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
.input-select .select > div, .input-textrange .select > div {
  color: #101828;
  font-size: 16px;
  line-height: 1.35em;
  width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  align-content: flex-start;
}
.input-select .select > div > span, .input-textrange .select > div > span {
  background-color: #8cc300;
  border-radius: 4px;
  color: white;
  margin-right: 4px;
  padding: 0px 6px;
  font-size: 12px;
  display: inline-block;
}
.input-select .select > div > span.txt, .input-textrange .select > div > span.txt {
  font-size: 16px;
  background-color: transparent;
  color: #101828;
}
.input-select .select > div > .ball, .input-textrange .select > div > .ball {
  border-radius: 22px;
  height: 22px;
  width: 22px;
  min-width: 22px;
  background-color: #e4e4e4;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: inline-flex;
  margin-right: 5px;
}
.input-select .select > div .sbs, .input-textrange .select > div .sbs {
  width: 100%;
}
.input-select .select > div .sbs .ph, .input-textrange .select > div .sbs .ph {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  width: calc(100% - 60px);
}
.input-select .select > div .sbs .clear-selected, .input-textrange .select > div .sbs .clear-selected {
  display: inline-block;
  width: 60px;
  z-index: 2;
  text-align: right;
}
.input-select .select > div .sbs .clear-selected > div, .input-textrange .select > div .sbs .clear-selected > div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: auto;
  background-color: #8cc300;
  border-radius: 4px;
  line-height: 1em;
  padding: 5px 6px;
  transition: background-color 0.2s ease-in-out;
}
.input-select .select > div .sbs .clear-selected > div span, .input-textrange .select > div .sbs .clear-selected > div span {
  font-size: 12px;
  color: white;
  font-weight: 400;
}
.input-select .select > div .sbs .clear-selected > div span.material-symbols-outlined, .input-textrange .select > div .sbs .clear-selected > div span.material-symbols-outlined {
  font-size: 12px;
  color: white;
  padding-left: 6px;
  padding-right: 0px;
  font-weight: bold;
}
.input-select .select > div .sbs .clear-selected > div:hover, .input-textrange .select > div .sbs .clear-selected > div:hover {
  background-color: #7ca809;
}
.input-select .select::before, .input-textrange .select::before {
  content: "";
  position: absolute;
  right: 32px;
  top: 0;
  bottom: 0;
  width: 16px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
  pointer-events: none;
  z-index: 1;
}
.input-select .select.disabled, .input-textrange .select.disabled {
  background-color: #f8f8f8;
}
.input-select .select.disabled > div, .input-textrange .select.disabled > div {
  color: #74747b;
  width: 100%;
}
.input-select .select.disabled .clear-selected > div > .material-symbols-outlined, .input-textrange .select.disabled .clear-selected > div > .material-symbols-outlined {
  color: transparent !important;
  width: 0px !important;
  padding-left: 0px !important;
}
.input-select .select::after, .input-textrange .select::after {
  font-family: "Material Symbols Outlined";
  content: "arrow_drop_down";
  float: right;
  border: none;
  font-size: 26px;
  right: 4px;
  top: 8px;
  color: #595959;
  position: absolute;
}
.input-select .select.disabled::before, .input-textrange .select.disabled::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #f8f8f8);
}
.input-select .select.disabled::after, .input-textrange .select.disabled::after {
  display: none;
}
.input-select .select.focus::after, .input-textrange .select.focus::after {
  content: "arrow_drop_up";
}
.input-select .select.focus, .input-textrange .select.focus {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.input-select .select-data, .input-textrange .select-data {
  display: none;
  z-index: 100;
}
.input-select .select-data .options, .input-textrange .select-data .options {
  display: block;
  position: absolute;
  top: -3px;
  left: 0px;
  padding: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  padding-bottom: 4px;
  width: 100%;
  border-top: none;
  box-shadow: 0 15px 10px -2px rgba(0, 0, 0, 0.36);
}
.input-select .select-data .options .search, .input-textrange .select-data .options .search {
  padding: 4px;
  padding-bottom: 0px;
}
.input-select .select-data .options .search input, .input-textrange .select-data .options .search input {
  font-size: 14px;
  background-color: transparent;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  padding-left: 14px;
}
.input-select .select-data .options .results, .input-textrange .select-data .options .results {
  max-height: 190px;
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.input-select .select-data .options .results a.hidden, .input-textrange .select-data .options .results a.hidden {
  display: none;
}
.input-select .select-data .options .results .select-loader, .input-textrange .select-data .options .results .select-loader {
  display: block;
  height: 50px;
  min-height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
}
.input-select .select-data .options .results .select-loader > div, .input-textrange .select-data .options .results .select-loader > div {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  left: -110px;
  color: #FFF;
  box-sizing: border-box;
  animation: select-loader-spin 2s linear infinite;
}
@keyframes select-loader-spin {
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  12% {
    box-shadow: 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  25% {
    box-shadow: 110px 0 #cce982, 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  36% {
    box-shadow: 120px 0 #cce982, 110px 0 #cce982, 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 130px 0 #cce982, 120px 0 #cce982, 110px 0 #cce982, 100px 0 #cce982;
  }
  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982, 120px 0 #cce982, 110px 0 #cce982;
  }
  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982, 120px 0 #cce982;
  }
  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982;
  }
  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  }
}
.input-select .select-data .options .results > .no-results, .input-textrange .select-data .options .results > .no-results {
  display: block;
  font-size: 16px;
  padding: 16px;
  margin: 4px;
  border-radius: 10px;
  font-size: 14px;
  text-decoration: none;
  color: #858585;
  transition: background-color 0.2s ease-in-out;
  text-align: center;
}
.input-select .select-data .options .results > .no-results .create-new-option, .input-textrange .select-data .options .results > .no-results .create-new-option {
  display: block;
  padding: 10px;
  padding-bottom: 5px;
}
.input-select .select-data .options .results > a, .input-textrange .select-data .options .results > a {
  display: flex;
  align-items: center;
  align-content: flex-start;
  background-color: #f5f5f5;
  font-size: 16px;
  padding: 10px;
  margin: 4px;
  border-radius: 5px;
  font-size: 14px;
  text-decoration: none;
  min-height: 38px;
  color: #101828;
  transition: background-color 0.2s ease-in-out;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.input-select .select-data .options .results > a > .ball, .input-textrange .select-data .options .results > a > .ball {
  border-radius: 22px;
  height: 22px;
  width: 22px;
  min-width: 22px;
  background-color: #e4e4e4;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: inline-flex;
  margin-right: 10px;
}
.input-select .select-data .options .results > a > .ball.color, .input-textrange .select-data .options .results > a > .ball.color {
  border: 2px solid white;
}
.input-select .select-data .options .results > a:hover, .input-textrange .select-data .options .results > a:hover {
  background-color: #f3f3f3;
}
.input-select .select-data .options .results > a.selected, .input-textrange .select-data .options .results > a.selected {
  background-color: #8cc300;
  color: #ffffff;
}
.input-select .select-data .options .results > a.disabled, .input-textrange .select-data .options .results > a.disabled {
  cursor: not-allowed;
  color: #c8c8c8;
  outline: 1px solid #e0e0e0;
  background-color: white;
}
.input-select .select-data .options .results > a.selected.disabled, .input-textrange .select-data .options .results > a.selected.disabled {
  cursor: pointer;
  background-color: #fbfbfb;
  color: #c8c8c8;
  outline: 1px dashed #8cc300;
}
.input-select .select-data .options .results > a:last-child, .input-textrange .select-data .options .results > a:last-child {
  margin-bottom: 0px;
}
.input-select .select-data .options .results > a::after, .input-textrange .select-data .options .results > a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 25px;
  pointer-events: none;
  background: linear-gradient(to left, #f5f5f5, rgba(242, 244, 247, 0));
  transition: opacity 0.2s ease-in-out;
  z-index: 1;
}
.input-select .select-data .options .results > a.selected::after, .input-textrange .select-data .options .results > a.selected::after {
  background: linear-gradient(to left, #8cc300, rgba(242, 244, 247, 0));
}
.input-select .select-data .options .results > a.disabled::after, .input-textrange .select-data .options .results > a.disabled::after {
  background: none;
}
.input-select .select-data .options .results > a.selected.disabled::after, .input-textrange .select-data .options .results > a.selected.disabled::after {
  background: none;
}
.input-select .select-data .options .results::-webkit-scrollbar, .input-textrange .select-data .options .results::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.input-select.tiny .select {
  height: 36px;
  padding: 6px 12px;
}
.input-select.tiny .select > div {
  width: calc(100% - 10px);
}
.input-select.tiny .select:before {
  right: 22px;
}
.input-select.tiny .select:after {
  top: 6px;
  font-size: 22px;
  content: "unfold_more";
}

.input-select.tiny.alternative-display .select-data .options {
  bottom: 35px;
}

.input-textrange .select {
  text-align: left;
}
.input-textrange .select::after {
  display: none;
}
.input-textrange .select::before {
  display: none;
}
.input-textrange .select-data {
  display: none;
  z-index: 100;
}
.input-textrange .select-data .options {
  display: block;
  position: absolute;
  top: -3px;
  left: 0px;
  padding: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  padding-bottom: 4px;
  width: 100%;
  border-top: none;
}
.input-textrange .select-data .options .results {
  max-height: 190px;
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  text-align: left;
}
.input-textrange .select-data .options .results a.hidden {
  display: none;
}
.input-textrange .select-data .options .results .input-text {
  display: inline-block;
  width: calc(50% - 20px);
  margin: 10px 10px;
}
.input-textrange .select-data .options .results .input-text .label {
  text-align: left;
}
.input-textrange .select-data .options .results .input-text:last-child {
  margin-right: 0px;
}

.input-select.count::after, .input-daterange.count::after, .input-textrange.count::after, .collect-filters.count::after {
  content: attr(data-count);
  position: absolute;
  border: none;
  font-size: 12px;
  right: 6px;
  top: 12px;
  background-color: #8dc302;
  color: white;
  padding: 4px 6px;
  border-radius: 4px;
}

.collect-filters.count {
  padding-right: 43px;
}

.compact-pictures {
  display: inline-block;
  width: calc(50% - 10px);
  height: 220px;
  overflow: hidden;
}
.compact-pictures .file-form {
  height: 100%;
  width: 100%;
}
.compact-pictures .file-form > a, .compact-pictures .file-form > div {
  display: block;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 10px;
  background-color: #ebebeb;
  overflow: hidden;
  position: relative;
  transition: background-size 0.2s ease-in-out;
}
.compact-pictures .file-form > a img, .compact-pictures .file-form > div img {
  display: none !important;
}
.compact-pictures .file-form > div.zoomed, .compact-pictures .file-form > a.zoomed {
  background-size: 350%;
}

.compact-solo-picture {
  display: block;
  width: 100%;
}
.compact-solo-picture a {
  background-image: none !important;
}
.compact-solo-picture a .file-preview {
  display: block;
  width: 100%;
}

.input-gps {
  display: none;
}

.filters .input-select, .filters .input-textrange {
  width: auto;
}
.filters .input-select .select-data .options, .filters .input-textrange .select-data .options {
  width: 245px;
  border-top: 1px solid #8cc300;
  border-top-right-radius: 8px;
}
.filters .input-select .select > div, .filters .input-textrange .select > div {
  width: auto;
  padding-right: 20px;
}
.filters .input-select .select::before, .filters .input-textrange .select::before {
  display: none;
}
.filters .input-select .select-data:after, .filters .input-textrange .select-data:after {
  content: "";
  position: absolute;
  width: calc(100% - 2px);
  height: 1px;
  background-color: #ffffff;
  display: block;
  top: -3px;
  left: 1px;
}

.input-select.alternative-display .select-data .options {
  bottom: 43px;
  top: unset;
  box-shadow: none;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom: none;
  border-top: 1px solid #8cc300;
}
.input-select.alternative-display .select.focus {
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}

/*
   Third display mode - see `chip` in form.js select().

   The default and .alternative-display both square two of the control's
   corners so the option list butts onto it. A chip-shaped control
   (border-radius: 999px) cannot do that: the list's straight edge cuts across
   the curve. Here the control stays fully rounded and the list detaches into
   its own rounded panel, so both keep the chip's shape.
*/
.input-select.chip-display .select-data .options {
  /* clear of the control instead of the default -3px overlap */
  top: calc(100% + 6px);
  bottom: unset;
  border: 1px solid #8cc300;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.16);
  /* all four corners are rounded here, so the rows have to be clipped to
     them - the default panel has two square corners and never needed it */
  overflow: hidden;
}
.input-select.chip-display {
  /* the control never loses its shape while the list is open */
}
.input-select.chip-display .select,
.input-select.chip-display .select.focus {
  border-radius: 999px;
}
.input-select.chip-display {
  /* opening upward: the panel goes above, still fully rounded */
}
.input-select.chip-display.alternative-display .select-data .options {
  top: unset;
  bottom: calc(100% + 6px);
  border-radius: 8px;
  border: 1px solid #8cc300;
}

.input-select.required .select {
  border-color: #ff5656;
}

.input-file.required .edit {
  border-color: #ff5656;
}

.input-checkbox.required .box {
  border-color: #ff5656;
}

.input-radio.required .box {
  border-color: #ff5656;
}

.file-form {
  height: auto;
  padding-bottom: 26px;
}
.file-form > a, .file-form > div {
  height: 100%;
}
.file-form > a img, .file-form > div img {
  border-radius: 8px;
}

.search-add > div:first-child {
  width: calc(100% - 100px);
  display: inline-block;
}
.search-add > div:last-child {
  width: 100px;
  display: inline-block;
}

#modals .modal.field.is-loading .modal-loader {
  border-radius: 0px !important;
  height: 100vh !important;
}

#modals .modal.field {
  padding-top: 0px;
  padding-bottom: 0px;
  min-height: 100vh;
}
#modals .modal.field .progress-bar {
  display: none !important;
}
#modals .modal.field .special-progress-bar {
  position: fixed;
  z-index: 1001;
}
#modals .modal.field .modal-box-outer {
  margin: 0;
  max-width: unset;
  width: 100%;
  border-radius: 0px;
  padding: 0px;
  min-height: 100vh;
}
#modals .modal.field .modal-box-outer .modal-box {
  border-radius: 0px;
  min-height: 100vh;
  padding-top: 120px;
}
#modals .modal.field .product-img {
  display: block;
  position: absolute;
  bottom: -7px;
  left: 24px;
  width: 24px;
  height: 24px;
  border: 2px solid #ffffff;
  border-radius: 24px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-color: white;
}
#modals .modal.field .input-metadata {
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0px;
  padding: 30px 30px 0px 30px;
  background-color: white;
  z-index: 1000;
}
#modals .modal.field .input-metadata .meta .m-img-text .text {
  max-width: unset;
}
#modals .modal.field .input-metadata .meta .m-img-text > div:last-child > div {
  background-color: transparent;
}
#modals .modal.field .input-metadata .field-close {
  display: flex;
  position: absolute;
  top: 40px;
  right: 30px;
  z-index: 999;
  border: 1px solid #c6c6c6;
  border-radius: 40px;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background-color: #fbfbfb;
}
#modals .modal.field .input-metadata .field-close span {
  font-size: 22px;
  color: #3e3e47;
  font-weight: 600;
}

#filters {
  display: none;
  position: absolute;
  padding: 36px 36px;
  border-radius: 8px;
  background-color: #fbfbfb;
  border: 1px solid rgb(207, 212, 220);
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease-in-out;
  max-width: 430px;
  max-height: 440px; /*WARNING, this needs to be changed in the JS code too if you change it here*/
  scroll-behavior: smooth;
  overflow: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 2000;
  box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.22);
}
#filters .close {
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  min-width: 50px;
  height: 50px;
  border-radius: 6px;
  padding: 4px;
  background-image: none;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
#filters .close span {
  padding-top: 2px;
  display: block;
  color: #b7bec9;
  font-size: 24px;
}
#filters .close:hover span {
  color: #98a1af;
}
#filters > form {
  padding: 0px 0px 10px 0px;
}
#filters .category {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
  flex-direction: column;
}
#filters .category .img {
  border-radius: 32px;
  height: 32px;
  width: 32px;
  background-color: #e4e4e4;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin-bottom: 10px;
  margin-top: 10px;
}
#filters .category .text {
  font-size: 14px;
  font-weight: 500;
  height: 22px;
  color: #5b6477;
}

#filters.mobile {
  max-height: 100%;
  border-radius: 0px;
  max-width: 320px;
}

#filters.mobile.full-w {
  max-width: 100%;
}

#filters::-webkit-scrollbar {
  width: 0 !important;
  background: transparent !important;
  display: none !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#filters::-webkit-scrollbar-thumb {
  background: transparent !important;
}

#modals {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100%;
  overflow-x: hidden;
  background-size: 100% 100%;
  background-color: rgba(63, 63, 63, 0.75);
  -webkit-overflow-scrolling: touch;
}
#modals .modal {
  display: none;
  width: 100%;
  padding-top: 2vh;
  padding-bottom: 6vh;
  min-height: 100%;
}
@media screen and (max-width: 530px) {
  #modals .modal {
    padding-top: 0px;
  }
}
#modals .modal .modal-box-outer {
  display: block;
  max-width: 500px;
  margin: 0 auto;
  padding: 6px;
  border-radius: 17px;
}
#modals .modal .modal-box-outer .modal-box, #modals .modal .modal-box-outer .modal-loader {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 13px;
}
#modals .modal .modal-box-outer .modal-box > h1, #modals .modal .modal-box-outer .modal-box > h2, #modals .modal .modal-box-outer .modal-box > h3, #modals .modal .modal-box-outer .modal-box > h4, #modals .modal .modal-box-outer .modal-box > h5, #modals .modal .modal-box-outer .modal-box > h6, #modals .modal .modal-box-outer .modal-loader > h1, #modals .modal .modal-box-outer .modal-loader > h2, #modals .modal .modal-box-outer .modal-loader > h3, #modals .modal .modal-box-outer .modal-loader > h4, #modals .modal .modal-box-outer .modal-loader > h5, #modals .modal .modal-box-outer .modal-loader > h6 {
  padding-left: 10px;
}
#modals .modal .modal-box-outer .modal-loader {
  display: none;
}
#modals .modal .stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}
#modals .modal .stats > div {
  flex: 1 1;
  min-width: 100px;
  background-color: #efefef;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
  flex-direction: column;
}
#modals .modal .stats > div .text {
  font-size: 14px;
  font-weight: 400;
  display: flex;
  margin: 5px;
  color: #7a7a7a;
}
#modals .modal .stats > div .value {
  display: flex;
  font-size: 30px;
  font-weight: 600;
  color: #7a7a7a;
  margin: 5px;
}
#modals .modal .modal-close {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0px;
  background-color: transparent;
  border-radius: 0px;
  padding: 0px;
  vertical-align: top;
  width: 32px;
  height: 32px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  text-decoration: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
#modals .modal .modal-close .material-symbols-outlined {
  color: #bdbdbd;
  font-size: 22px;
  font-weight: 700;
}
#modals .modal .modal-close:hover .material-symbols-outlined {
  color: #7ca809;
}
#modals .modal .header, #modals .modal .footer, #modals .modal .body {
  display: block;
}
#modals .modal .header > div, #modals .modal .footer > div, #modals .modal .body > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 100%;
}
#modals .modal .header, #modals .modal .footer {
  height: 48px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
#modals .modal .header > div, #modals .modal .footer > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}
#modals .modal .header > div > a, #modals .modal .footer > div > a {
  padding: 3px 16px;
}
@media screen and (max-width: 640px) {
  #modals .modal .header > div > a, #modals .modal .footer > div > a {
    padding: 4px 8px;
  }
}
@media screen and (max-width: 775px) {
  #modals .modal .header > div > a[data-id=back-to-pending], #modals .modal .footer > div > a[data-id=back-to-pending] {
    display: none;
  }
}
#modals .modal .header > div > a span, #modals .modal .footer > div > a span {
  font-size: 24px;
}
#modals .modal .header > div button[data-icon][data-icon-after], #modals .modal .header > div .btn[data-icon][data-icon-after], #modals .modal .footer > div button[data-icon][data-icon-after], #modals .modal .footer > div .btn[data-icon][data-icon-after] {
  padding-left: 18px;
  padding-right: 38px;
}
#modals .modal .header > div .t-status a, #modals .modal .footer > div .t-status a {
  text-decoration: none;
}
#modals .modal .header > div .t-status a > div, #modals .modal .footer > div .t-status a > div {
  font-size: 16px;
  padding: 10px 10px 10px 32px;
}
#modals .modal .header > div .t-status a > div::before, #modals .modal .footer > div .t-status a > div::before {
  left: 10px;
  font-size: 26px;
}
#modals .modal .header > div:last-child, #modals .modal .footer > div:last-child {
  align-items: center;
  justify-content: flex-end;
}
#modals .modal .header {
  border-bottom: 1px solid rgba(208, 213, 221, 0.54);
  padding-bottom: 6px;
}
#modals .modal .header a.disabled {
  color: #979797;
}
#modals .modal .header a.disabled span {
  color: #979797;
}
#modals .modal .header a.disabled {
  cursor: not-allowed;
}
#modals .modal .footer {
  border-top: 1px solid rgba(208, 213, 221, 0.54);
  height: 54px;
}
#modals .modal .body {
  display: block;
}
#modals .modal .modal-box-outer.f-1-1g-1 .body h1 {
  font-size: 18px;
  font-weight: 600;
  color: #101828;
}
#modals .modal .modal-box-outer.f-1-1g, #modals .modal .modal-box-outer.f-1-1g-1 {
  max-width: 1200px;
}
#modals .modal .modal-box-outer.f-1-1g .modal-box, #modals .modal .modal-box-outer.f-1-1g-1 .modal-box {
  background-color: #f8f8f8;
}
#modals .modal .modal-box-outer.f-1-1g .modal-box > div, #modals .modal .modal-box-outer.f-1-1g-1 .modal-box > div {
  display: block;
}
#modals .modal .modal-box-outer.f-1-1g .modal-box > div .body, #modals .modal .modal-box-outer.f-1-1g-1 .modal-box > div .body {
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}
@media screen and (max-width: 934px) {
  #modals .modal .modal-box-outer.f-1-1g .modal-box > div .body, #modals .modal .modal-box-outer.f-1-1g-1 .modal-box > div .body {
    gap: unset;
    display: block;
    align-items: unset;
    justify-content: unset;
    width: 100%;
  }
}
#modals .modal .modal-box-outer.f-1-1g .modal-box > div .body > div, #modals .modal .modal-box-outer.f-1-1g-1 .modal-box > div .body > div {
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
@media screen and (max-width: 934px) {
  #modals .modal .modal-box-outer.f-1-1g .modal-box > div .body > div, #modals .modal .modal-box-outer.f-1-1g-1 .modal-box > div .body > div {
    display: block;
    align-items: unset;
    justify-content: unset;
  }
}
#modals .modal .modal-box-outer.f-1-1g .modal-box > div .body > div > div, #modals .modal .modal-box-outer.f-1-1g-1 .modal-box > div .body > div > div {
  width: 100%;
}
#modals .modal .modal-box-outer.f-1-1g .modal-box > div .body > div .bg-white, #modals .modal .modal-box-outer.f-1-1g-1 .modal-box > div .body > div .bg-white {
  background-color: white;
  border-radius: 10px;
  border: 1px solid black;
  border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5);
  box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 24px 0px;
}
#modals .modal .modal-box-outer.f-1-1g .modal-box > div .body > .f-1, #modals .modal .modal-box-outer.f-1-1g-1 .modal-box > div .body > .f-1 {
  max-width: 500px;
  min-width: 290px;
}
@media screen and (max-width: 934px) {
  #modals .modal .modal-box-outer.f-1-1g .modal-box > div .body > .f-1, #modals .modal .modal-box-outer.f-1-1g-1 .modal-box > div .body > .f-1 {
    max-width: 100% !important;
    width: 100%;
  }
}
#modals .modal .modal-box-outer.f-1-1g .modal-box > div .body > .f-1s, #modals .modal .modal-box-outer.f-1-1g-1 .modal-box > div .body > .f-1s {
  max-width: 320px;
  min-width: 320px;
}
@media screen and (max-width: 934px) {
  #modals .modal .modal-box-outer.f-1-1g .modal-box > div .body > .f-1s, #modals .modal .modal-box-outer.f-1-1g-1 .modal-box > div .body > .f-1s {
    max-width: 100% !important;
    width: 100%;
  }
}
#modals .modal .modal-box-outer.f-1-1g .modal-box > div .body > .f-1g, #modals .modal .modal-box-outer.f-1-1g-1 .modal-box > div .body > .f-1g {
  flex-grow: 1;
  width: 100%;
  min-width: 290px;
}
@media screen and (max-width: 934px) {
  #modals .modal .modal-box-outer.f-1-1g .modal-box > div .body > .f-1g, #modals .modal .modal-box-outer.f-1-1g-1 .modal-box > div .body > .f-1g {
    max-width: unset;
    flex-grow: unset;
  }
}
#modals .modal .modal-box-outer.f-1-1g .modal-close, #modals .modal .modal-box-outer.f-1-1g-1 .modal-close {
  display: flex;
}
@media screen and (max-width: 934px) {
  #modals .modal .modal-box-outer.f-1-1g .modal-close, #modals .modal .modal-box-outer.f-1-1g-1 .modal-close {
    position: fixed;
    background-color: #8cc300;
    border-radius: 24px;
    padding: 24px;
    bottom: 24px;
    right: 24px;
    box-shadow: 0 0 10px 0 rgba(18, 18, 23, 0.2);
    top: unset;
    z-index: 10;
    padding: 0px;
    height: 50px;
    width: 50px;
    outline: 3px solid white;
  }
  #modals .modal .modal-box-outer.f-1-1g .modal-close span, #modals .modal .modal-box-outer.f-1-1g-1 .modal-close span {
    color: #fff;
  }
}
#modals .modal .modal-box-outer.f-1-1g-1 .modal-close {
  display: flex;
  top: unset;
  right: unset;
  position: relative;
}
#modals .modal .modal-box-outer.f-1-1g-1 .modal-close span {
  color: #2c2c2c;
}
@media screen and (max-width: 934px) {
  #modals .modal .modal-box-outer.f-1-1g-1 .modal-close {
    position: fixed;
    background-color: #8cc300;
    border-radius: 24px;
    padding: 24px;
    bottom: 24px;
    right: 24px;
    box-shadow: 0 0 10px 0 rgba(18, 18, 23, 0.2);
    top: unset;
    z-index: 10;
    padding: 0px;
    height: 50px;
    width: 50px;
    outline: 3px solid white;
  }
  #modals .modal .modal-box-outer.f-1-1g-1 .modal-close span {
    color: #fff;
  }
}
#modals .modal[data-name=confirm] h1 {
  font-size: 16px;
  padding-top: 0px;
  font-weight: 600;
}
#modals .modal[data-name=confirm] .p {
  font-size: 14px;
  line-height: 1.3em;
}
#modals .modal.tiny .modal-box-outer {
  max-width: 400px;
}
#modals .modal.is-loading .modal-box {
  display: none;
}
#modals .modal.is-loading .modal-loader {
  display: flex;
  height: 200px;
  background-color: white;
  justify-content: center;
  align-items: center;
}
#modals .modal.is-loading .modal-loader > div {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  color: #FFF;
  box-sizing: border-box;
  animation: modal-loader-spin 2s linear infinite;
  margin-left: -200px;
}
@keyframes modal-loader-spin {
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  12% {
    box-shadow: 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  25% {
    box-shadow: 110px 0 #cce982, 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  36% {
    box-shadow: 120px 0 #cce982, 110px 0 #cce982, 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 130px 0 #cce982, 120px 0 #cce982, 110px 0 #cce982, 100px 0 #cce982;
  }
  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982, 120px 0 #cce982, 110px 0 #cce982;
  }
  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982, 120px 0 #cce982;
  }
  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982;
  }
  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  }
}

#modals::-webkit-scrollbar {
  width: 0 !important;
  background: transparent !important;
  display: none !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#modals::-webkit-scrollbar-thumb {
  background: transparent !important;
}

@media screen and (min-width: 935px) {
  #modals.no-scroll {
    height: 100vh;
    overflow: hidden;
  }
  #modals.no-scroll .modal {
    height: 100%;
    padding-bottom: 2vh;
    padding-bottom: calc(4vh + (env(safe-area-inset-bottom, 0px)) + 20px);
  }
  #modals.no-scroll .modal .modal-box-outer {
    height: 100%;
  }
  #modals.no-scroll .modal .modal-box-outer .modal-box {
    height: 100%;
  }
  #modals.no-scroll .modal .modal-box-outer .modal-box > div {
    height: 100%;
  }
  #modals.no-scroll .modal .modal-box-outer .modal-box > div .body {
    height: 100%;
  }
  #modals.no-scroll .modal .modal-box-outer .modal-box > div .body .f-1, #modals.no-scroll .modal .modal-box-outer .modal-box > div .body .f-1g {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
  }
  #modals.no-scroll .modal .modal-box-outer .modal-box > div .body .f-1::-webkit-scrollbar, #modals.no-scroll .modal .modal-box-outer .modal-box > div .body .f-1g::-webkit-scrollbar {
    width: 0 !important;
    background: transparent !important;
    display: none !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #modals.no-scroll .modal .modal-box-outer .modal-box > div .body .f-1::-webkit-scrollbar-thumb, #modals.no-scroll .modal .modal-box-outer .modal-box > div .body .f-1g::-webkit-scrollbar-thumb {
    background: transparent !important;
  }
  #modals.no-scroll .modal .modal-box-outer .modal-box > div .body.with-head, #modals.no-scroll .modal .modal-box-outer .modal-box > div .body.with-head {
    height: calc(100% - 50px);
  }
  #modals.no-scroll .modal .modal-box-outer .modal-box > div .body.with-head.with-foot {
    height: calc(100% - 110px);
  }
}

#modals .modal .modal-close.round {
  display: flex !important;
  border: 1px solid #c6c6c6;
  border-radius: 40px;
  height: 40px;
  width: 40px;
  top: 12px;
  right: 12px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background-color: #fbfbfb;
}
#modals .modal .modal-close.round span {
  font-size: 22px;
  color: #3e3e47;
  font-weight: 600;
}

.media {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  padding: 16px;
  height: 100%;
}
.media .viewer {
  background-color: #e1e2e2;
  outline: 1px solid #f2f4f7;
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: 100%;
  width: calc(100% - 50px);
  margin-left: 50px;
}
.media .viewer canvas {
  position: relative;
  height: auto;
  cursor: move;
}
.media .viewer .screenshot {
  border: 2px dashed #99b46a;
  background-color: rgba(72, 195, 0, 0.16);
  position: absolute;
  display: none;
  pointer-events: none;
  border-radius: 6px;
}
.media .viewer .media-loader {
  min-height: 300px;
  height: 100%;
}
.media .viewer .media-loader > div {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  margin: 15px auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  color: #FFF;
  left: -50%;
  box-sizing: border-box;
  animation: media-loader-spin 2s linear infinite;
}
@keyframes media-loader-spin {
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  12% {
    box-shadow: 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  25% {
    box-shadow: 110px 0 #cce982, 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  36% {
    box-shadow: 120px 0 #cce982, 110px 0 #cce982, 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 130px 0 #cce982, 120px 0 #cce982, 110px 0 #cce982, 100px 0 #cce982;
  }
  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982, 120px 0 #cce982, 110px 0 #cce982;
  }
  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982, 120px 0 #cce982;
  }
  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982;
  }
  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  }
}
.media .viewer::-webkit-scrollbar {
  width: 0 !important;
  background: transparent !important;
  display: none !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.media .viewer::-webkit-scrollbar-thumb {
  background: transparent !important;
}

.media-controls {
  position: absolute;
  top: 0px;
  left: 12px;
  display: flex;
  align-items: center;
  height: 100%;
  z-index: 1;
}
.media-controls > div {
  margin-left: 0;
  margin-right: auto;
}
.media-controls > div > .page-number {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  width: 100%;
  padding: 6px 0px;
  color: #6a6e75;
  background-color: white;
  border-radius: 10px;
  margin: 3px 0px;
  outline: 1px solid #8cc300;
}
.media-controls > div > button {
  display: block;
  padding: 10px 10px;
  margin-bottom: 5px;
}
.media-controls > div > button span {
  color: white;
  font-size: 24px;
}
.media-controls > div > button.active {
  background-color: #dad30b;
}
.media-controls > div > button.disabled {
  background-color: #b7b7b7;
}

#notifications {
  position: fixed;
  top: 0px;
  left: 0px;
  height: auto;
  width: auto;
}
#notifications > a {
  margin: 10px 0px 10px 10px;
  display: block;
  background-color: #bfeaf6;
  border: none;
  border-radius: 6px;
  width: 280px;
  border: 3px solid #6ccde4;
  position: relative;
  left: -290px;
  overflow: hidden;
}
#notifications > a .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
#notifications > a .icon .material-symbols-outlined {
  font-size: 28px;
  color: #6ccde4;
}
#notifications > a .data {
  display: inline-block;
  width: 100%;
  padding: 18px;
  padding-left: 60px;
}
#notifications > a .data h1 {
  font-size: 14px;
  padding: 0px;
  color: #3894ab;
  font-weight: 500;
}
#notifications > a .data .p {
  padding-top: 10px;
  font-size: 12px;
  color: #3f95a9;
}
#notifications > a:last-child {
  margin-bottom: 0px;
}
#notifications {
  /*
    > div:after {
      content: '';
      display: block;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 0px;
      height: 100%;
      border-left: 4px solid #20c7ef;
    }*/
}
#notifications > a.success {
  background-color: rgba(140, 195, 0, 0.92);
  border-color: rgba(255, 255, 255, 0.93);
}
#notifications > a.success h1, #notifications > a.success .p {
  color: #fff;
}
#notifications > a.success .p {
  color: #fff;
}
#notifications > a.success .icon .material-symbols-outlined {
  color: #fff;
}
#notifications > a.success:after {
  background-color: rgba(140, 195, 0, 0.92);
}
#notifications > a.danger {
  background-color: rgba(203, 28, 28, 0.92);
  border-color: rgba(255, 255, 255, 0.93);
}
#notifications > a.danger h1, #notifications > a.danger .p {
  color: #fff;
}
#notifications > a.danger .p {
  color: #fff;
}
#notifications > a.danger .icon .material-symbols-outlined {
  color: #fff;
}
#notifications > a.danger:after {
  border-color: rgba(255, 255, 255, 0.93);
}
#notifications > a.warning {
  background-color: rgba(214, 148, 13, 0.92);
  border-color: rgba(255, 255, 255, 0.93);
}
#notifications > a.warning h1, #notifications > a.warning .p {
  color: #fff;
}
#notifications > a.warning .p {
  color: #fff;
}
#notifications > a.warning .icon .material-symbols-outlined {
  color: #fff;
}
#notifications > a.warning:after {
  border-color: rgba(255, 255, 255, 0.93);
}
#notifications > a.secondary {
  background-color: #e6e6e6;
  border-color: #b8b6b6;
}
#notifications > a.secondary h1, #notifications > a.secondary .p {
  color: #777777;
}
#notifications > a.secondary .p {
  color: #8f8f8f;
}
#notifications > a.secondary .icon .material-symbols-outlined {
  color: #b8b6b6;
}
#notifications > a.secondary:after {
  border-color: #a5a5a5;
}

.lock-banner {
  font-size: 12px;
  color: #d8832e;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 1.4em;
}

.modal.lock-readonly .t-assign, .modal.lock-readonly .t-checkbox, .modal.lock-readonly .t-actions, .modal.lock-readonly form .input-radio, .modal.lock-readonly form .input-select, .modal.lock-readonly form .input-checkbox, .modal.lock-readonly form .input-file,
.modal.lock-readonly form button[type=submit], .modal.lock-readonly .lock-off {
  pointer-events: none;
}
.modal.lock-readonly form button[type=submit], .modal.lock-readonly .lock-off {
  opacity: 0.4;
}
.modal.lock-readonly .footer > div.lock-off {
  pointer-events: auto;
  opacity: 1;
}
.modal.lock-readonly .footer > div.lock-off > :not([data-action=modal-close]) {
  pointer-events: none;
  opacity: 0.4;
}

/*
    Chrome / Google Translate wraps every translated text in <font> tags. lib's `* { color; font-family;
    font-weight }` hits those tags directly, so translated text lost its parent's weight, colour and font.
    The app never writes a <font> tag itself: this only touches the translator's.
*/
font {
  font: inherit;
  color: inherit;
}

body {
  overflow: hidden;
  min-height: 100vh;
  min-height: -webkit-fill-available; /* mobile viewport bug fix */
  background-color: #fff;
}
body #content {
  min-width: 330px;
  position: fixed;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  background-color: #f2f4f7;
  padding: 10px;
}
body #content .page {
  display: none;
  width: 100%;
  height: 100%;
  min-width: 300px;
  max-width: 1298px;
  margin: 0 auto;
  scroll-behavior: smooth;
  overflow: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
body #content .page .block {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
  flex-grow: 1;
  padding: 0px;
  gap: 10px;
}
body #content .page .block > div {
  flex: 1;
  font-size: 0px;
  width: 100%;
}
body #content .page .block > div > div {
  background-color: transparent;
  border-radius: unset;
  border: unset;
  box-shadow: unset;
  padding: 0px;
  margin-bottom: 0px;
}
body #content .page .block > div > div > h1 {
  padding-top: 0px;
  padding-left: 12px;
  font-size: 30px;
  font-weight: 600;
  color: #101828;
}
@media screen and (max-width: 640px) {
  body #content .page .block > div > div > h1 {
    font-size: 18px;
  }
}
body #content .page .block > div > div > h2 {
  font-size: 16px;
  padding-left: 12px;
  font-weight: 400;
  padding-top: 0px;
  color: #475467;
}
@media screen and (max-width: 640px) {
  body #content .page .block > div > div > h2 {
    font-size: 14px;
    padding-bottom: 0px;
  }
}
@media screen and (max-width: 700px) {
  body #content .page .block {
    display: block;
    align-items: unset;
    justify-content: unset;
    height: auto;
    flex-grow: unset;
    gap: unset;
    width: 100%;
  }
  body #content .page .block > div {
    flex: unset;
  }
}
body #content .page.displayed {
  display: block;
}
body #content .page.menu {
  margin-top: 96px;
  max-height: calc(100% - 106px);
}
body #content .page.menu.scroll {
  margin-top: 86px;
  max-height: 100%;
  padding-bottom: 150px;
}
body #content .page.analyze-menu-container.scroll {
  margin-top: 0px;
  max-height: 100%;
  padding-bottom: 150px;
}
body #content .page.scroll {
  /*for page that needs to scroll (cause most page are adaptative to content)*/
  height: auto;
  height: fit-content;
  padding-bottom: 10px;
}
body #content .page::-webkit-scrollbar {
  width: 0 !important;
  background: transparent !important;
  display: none !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
body #content .page::-webkit-scrollbar-thumb {
  background: transparent !important;
}
body #content .page.is-loading .block {
  display: none;
}
body #content .page.is-loading .page-loader {
  display: block;
  height: 50vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
body #content .page.is-loading .page-loader > div {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  left: -110px;
  color: #FFF;
  box-sizing: border-box;
  animation: page-loader-spin 2s linear infinite;
}
@keyframes page-loader-spin {
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  12% {
    box-shadow: 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  25% {
    box-shadow: 110px 0 #cce982, 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  36% {
    box-shadow: 120px 0 #cce982, 110px 0 #cce982, 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 130px 0 #cce982, 120px 0 #cce982, 110px 0 #cce982, 100px 0 #cce982;
  }
  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982, 120px 0 #cce982, 110px 0 #cce982;
  }
  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982, 120px 0 #cce982;
  }
  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982;
  }
  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  }
}
body #content.guest .page {
  border-radius: unset;
  border: none;
  border-color: unset;
  box-shadow: unset;
}
body #content.guest .page .block {
  border-radius: unset;
  border: none;
  border-color: unset;
  box-shadow: unset;
  padding: unset;
  gap: unset;
}
body #content.map {
  padding: 0px;
}
body .skeleton {
  position: relative;
  color: transparent;
  overflow: hidden;
  width: 100%;
}
body .skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #fafafa 0%, #ffffff 20%, #fafafa 40%, #fafafa 100%);
  background-size: 200% 100%;
  animation: shimmer 1s linear infinite;
  width: 90%;
  height: 100%;
}
@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.page[data-id="/auth"] .block {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  padding: 0px !important;
  min-height: 487px !important;
}
.page[data-id="/auth"] .block > div {
  width: 100% !important;
  max-width: 404px !important;
  margin-bottom: 80px !important;
}
.page[data-id="/auth"] .block > div > div {
  background-color: white !important;
  border-radius: 10px !important;
  border: 1px solid black !important;
  border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5) !important;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 24px 0px !important;
  padding: 40px !important;
}
.page[data-id="/auth"] .block > div > div > h1 {
  font-size: 16px !important;
  color: #667084 !important;
  text-align: center;
  margin-bottom: 36px;
  padding: 0px !important;
  font-weight: 400 !important;
}
.page[data-id="/auth"] .block > div > div > img {
  margin: 0px auto 30px auto;
  display: block;
}
.page[data-id="/auth"] .block > div > div .forgot-btn {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.page[data-id="/auth"] .block > div > div .forgot-btn > a {
  font-size: 13px;
  padding-top: 8px;
}
@media screen and (max-width: 448px) {
  .page[data-id="/auth"] .block > div > div .forgot-btn {
    position: relative;
    display: block;
    right: unset;
    top: unset;
    height: auto;
    align-items: unset;
    justify-content: unset;
    margin-top: 20px;
  }
}
@media screen and (max-height: 700px) {
  .page[data-id="/auth"] .block > div {
    margin-bottom: 0px !important;
  }
}

form > .user-recovery-line {
  margin-top: -19px;
  text-align: right;
}

.mail-track {
  padding-top: 15px;
  border-top: 1px solid #eaecf0;
}
.mail-track .mail-track-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}
.mail-track .mail-track-step .material-symbols-outlined {
  flex: none;
  font-size: 18px;
  line-height: 18px;
  color: #98a2b3;
}
.mail-track .mail-track-step .p {
  min-width: 0;
  line-height: 1.35;
}
.mail-track .mail-track-step .mail-track-t {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2c2c2c;
}
.mail-track .mail-track-step .mail-track-d {
  display: block;
  font-size: 12px;
  color: #595959;
  overflow-wrap: anywhere;
}
.mail-track .mail-track-step[data-state=done] .material-symbols-outlined {
  color: #8cc300;
}
.mail-track .mail-track-step[data-state=warn] .material-symbols-outlined {
  color: #d8832e;
}
.mail-track .mail-track-step[data-state=fail] .material-symbols-outlined {
  color: #d82e2e;
}
.mail-track .mail-track-note {
  font-size: 12px;
  color: #595959;
}
.mail-track .mail-track-note a {
  font-size: 12px;
}

#content .page[data-id="/auth/switch"] {
  background-color: #f2f4f7;
}
#content .page[data-id="/auth/switch"] .block {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 10px;
  min-height: 487px;
  border-radius: unset;
  border: none;
  border-color: unset;
  box-shadow: unset;
  padding: unset;
  gap: unset;
  background-color: #f2f4f7;
}
#content .page[data-id="/auth/switch"] .block > div {
  width: 100%;
  max-width: 404px;
  min-width: 300px;
  margin-bottom: 100px;
}
@media screen and (max-height: 700px) {
  #content .page[data-id="/auth/switch"] .block > div {
    margin-bottom: 0px;
  }
}
#content .page[data-id="/auth/switch"] .block > div > div {
  background-color: white;
  border-radius: 10px;
  border: 1px solid black;
  border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5);
  box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 24px 0px;
  padding: 40px;
}
#content .page[data-id="/auth/switch"] .block > div > div > img {
  margin: 0px auto 30px auto;
  display: block;
}
#content .page[data-id="/auth/switch"] .block > div > div a {
  display: block;
  padding: 20px;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
  margin: 24px 0px;
  transition: background-color 0.2s ease-in-out;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
#content .page[data-id="/auth/switch"] .block > div > div a .icon {
  width: 48px;
  background-color: #8cc300;
  height: 48px;
  vertical-align: top;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#content .page[data-id="/auth/switch"] .block > div > div a .icon span {
  font-size: 26px;
  color: white;
}
#content .page[data-id="/auth/switch"] .block > div > div a .text {
  display: inline-block;
  width: calc(100% - 48px);
  height: 48px;
  vertical-align: top;
  display: inline-flex;
  align-items: center;
}
#content .page[data-id="/auth/switch"] .block > div > div a .text > div {
  padding-left: 14px;
}
#content .page[data-id="/auth/switch"] .block > div > div a .text > div > h1 {
  display: block;
  font-size: 16px;
  color: #344054;
  text-align: left;
  padding: 0px;
  margin: 0px;
  padding-bottom: 8px;
  font-weight: 600;
}
#content .page[data-id="/auth/switch"] .block > div > div a .text > div .p {
  text-align: left;
  font-size: 14px;
  color: #475467;
}
#content .page[data-id="/auth/switch"] .block > div > div a:hover {
  background-color: #f9fafb;
}
#content .page[data-id="/auth/switch"] .block > div > div a:first-child {
  margin-top: 30px;
}
#content .page[data-id="/auth/switch"] .block > div > div a:last-child {
  margin-bottom: 0px;
}
@media screen and (max-height: 700px) {
  #content .page[data-id="/auth/switch"] .block > div {
    margin-bottom: 0px !important;
  }
}

#content .page[data-id="/me"] > .block > div, #content .page[data-id="/analyze/me"] > .block > div {
  flex: 1;
  font-size: 0px;
}
#content .page[data-id="/me"] > .block > div > div, #content .page[data-id="/analyze/me"] > .block > div > div {
  background-color: white;
  border-radius: 10px;
  border: 1px solid black;
  border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5);
  box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 24px 0px;
  padding: 26px;
  margin-bottom: 10px;
}
#content .page[data-id="/me"] > .block > div > div .pdf, #content .page[data-id="/analyze/me"] > .block > div > div .pdf {
  display: block;
  background-color: white;
  border-radius: 10px;
  border: 1px solid black;
  border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5);
  box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 24px 0px;
  padding: 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease-in-out;
}
#content .page[data-id="/me"] > .block > div > div .pdf > div:first-child, #content .page[data-id="/analyze/me"] > .block > div > div .pdf > div:first-child {
  width: 50px;
  padding: 0px;
  padding-right: 10px;
}
#content .page[data-id="/me"] > .block > div > div .pdf > div:last-child, #content .page[data-id="/analyze/me"] > .block > div > div .pdf > div:last-child {
  width: calc(100% - 50px);
}
#content .page[data-id="/me"] > .block > div > div .pdf > div:last-child h1, #content .page[data-id="/analyze/me"] > .block > div > div .pdf > div:last-child h1 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  padding-bottom: 5px;
  color: #2c2c2c;
}
#content .page[data-id="/me"] > .block > div > div .pdf > div:last-child .p, #content .page[data-id="/analyze/me"] > .block > div > div .pdf > div:last-child .p {
  font-size: 14px;
}
#content .page[data-id="/me"] > .block > div > div .pdf:hover, #content .page[data-id="/analyze/me"] > .block > div > div .pdf:hover {
  background-color: #f9fafb;
}
#content .page[data-id="/me"] > .block > div > div > h1, #content .page[data-id="/analyze/me"] > .block > div > div > h1 {
  color: #344054;
  font-size: 14px;
  padding-bottom: 0px;
  padding-top: 0px;
  font-weight: 600;
}
#content .page[data-id="/me"] > .block > div > div > h2, #content .page[data-id="/analyze/me"] > .block > div > div > h2 {
  color: #475467;
  font-size: 14px;
  padding-bottom: 20px;
}

form .avatar .preview {
  width: 130px;
  height: 130px;
  margin-right: 20px;
}
form .avatar .preview > div {
  border-radius: 150px;
  background-color: white;
  width: 130px;
  height: 130px;
  padding: 5px;
  border: 1px solid black;
  border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5);
  box-shadow: rgba(16, 24, 40, 0.03) 0px 4px 6px -2px, rgba(16, 24, 40, 0.08) 0px 12px 16px -4px;
}
form .avatar .preview > div > div {
  border-radius: 150px;
  background-color: #f2f4f7;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}
form .avatar .preview {
  display: inline-block;
  vertical-align: top;
}
form .avatar .preview.no-radius > div {
  border-radius: 0px;
  border: none;
  background-color: white;
  box-shadow: none;
}
form .avatar .preview.no-radius > div > div {
  border-radius: 0px;
  border: none;
  background-color: white;
}
form .avatar .edit {
  width: calc(100% - 150px);
  height: 130px;
  border-radius: 12px;
  display: inline-block;
  vertical-align: top;
  border: 1px solid black;
  border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5);
  box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 24px 0px;
  padding: 0px;
  overflow: hidden;
}
form .avatar .edit > a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  text-align: center;
  background-color: white;
}
@media screen and (min-width: 1031px) {
  form .avatar .edit > a {
    transition: background-color 0.2s ease-in-out;
  }
}
form .avatar .edit > a {
  padding: 10px;
}
form .avatar .edit > a > .icon {
  position: relative;
  display: block;
  border: 1px solid black;
  border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5);
  box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 24px 0px;
  padding: 10px;
  margin: 0px auto;
  width: 42px;
  border-radius: 8px;
  text-align: center;
}
form .avatar .edit > a > .icon span {
  color: #4c5668;
}
form .avatar .edit > a > .filename {
  color: #475467;
  font-size: 14px;
  line-height: 20px;
  padding-top: 20px;
  display: none;
}
form .avatar .edit > a > .p {
  color: #475467;
  font-size: 14px;
  line-height: 20px;
  padding: 10px;
}
form .avatar .edit > a > .p span {
  transition: color 0.2s ease-in-out;
  color: #8cc300;
  font-weight: 600;
}
form .avatar .edit > a > .p > div {
  color: #475467;
  font-size: 12px;
}
form .avatar .edit > a:hover {
  background-color: #f9fafb;
}
@media screen and (max-width: 1030px) {
  form .avatar .edit > a:hover > .p {
    color: #f9fafb !important;
  }
  form .avatar .edit > a:hover > .p div {
    color: #f9fafb !important;
  }
}
form .avatar .edit > a:hover > .p span {
  color: #7ca809 !important;
}

#content .page.entity > .head > div {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#content .page.entity > .head > div > div a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 4px;
  text-decoration: none;
  margin: 0px 1px;
  color: #4a4a4a;
  font-weight: 600;
}
#content .page.entity > .head > div > div a span {
  padding: 0px 6px;
  font-size: 24px;
  color: #4a4a4a;
}
#content .page.entity > .head > div > div a:hover {
  color: #7a7a7a;
}
#content .page.entity > .head > div > div a:hover span {
  color: #7a7a7a;
}
#content .page.entity > .head > div > div a.disabled {
  color: #979797;
}
#content .page.entity > .head > div > div a.disabled span {
  color: #979797;
}
#content .page.entity > .head > div > div a.disabled {
  cursor: not-allowed;
}
#content .page.entity > .head > div > div .m-img-text > div:first-child {
  width: 50px;
}
#content .page.entity > .head > div > div .m-img-text > div:first-child > div {
  height: 50px;
  width: 50px;
  border-radius: 50px;
}
#content .page.entity > .head > div > div .m-img-text > div:first-child > .country {
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  right: -5px;
  bottom: -5px;
  outline: 3px solid #f2f4f7;
}
#content .page.entity > .head > div > div .m-img-text > div:last-child {
  height: 50px;
  width: calc(100% - 50px);
}
#content .page.entity > .head > div > div .m-img-text > div:last-child > div {
  padding-left: 10px;
}
#content .page.entity > .head > div > div .m-img-text > div:last-child > div > h1 {
  font-size: 20px;
}
#content .page.entity > .head > div > div .m-img-text > div:last-child > div > div {
  margin-top: 6px !important;
  font-size: 14px;
  color: #606e83;
  font-weight: 500;
}
#content .page.entity > .block > div {
  flex: 1;
  font-size: 0px;
  height: 100%;
}
#content .page.entity > .block > div > div {
  background-color: white;
  border-radius: 10px;
  border: 1px solid black;
  border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5);
  box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 24px 0px;
  padding: 26px;
  margin-bottom: 10px;
  height: 100%;
}
#content .page.entity > .block > div > div .pdf {
  max-height: 100%;
  display: block;
  background-color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease-in-out;
}
#content .page.entity > .block > div > div .pdf > div {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
#content .page.entity > .block > div > div .pdf > div h1 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  padding-bottom: 5px;
}
#content .page.entity > .block > div > div .pdf > div .p {
  font-size: 14px;
  padding-bottom: 2px;
}
#content .page.entity > .block > div > div .pdf > div:first-child {
  overflow: unset;
  flex-grow: 0;
  width: 50px;
  padding: 0px;
  padding-right: 10px;
}
#content .page.entity > .block > div > div .pdf > div:last-child {
  overflow: unset;
  flex-grow: 0;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
#content .page.entity > .block > div > div .pdf > div:last-child span {
  margin-left: 5px;
}
@media screen and (min-width: 641px) {
  #content .page.entity > .block.adaptive {
    max-height: calc(100% - 150px);
    overflow: hidden;
  }
}
@media screen and (min-width: 641px) {
  #content .page.entity > .block.adaptive > div > div .content {
    height: 100%;
  }
}

.entity-edit .decline-reason, .entity-edit .decline-reason > span {
  font-size: 12px;
  color: #ce3535;
  font-weight: 600;
  margin-bottom: 30px;
  line-height: 1.4em;
}
.entity-edit .decline-reason span {
  color: #2c2c2c;
}
.entity-edit .errors {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-decoration: none;
}
.entity-edit .errors > div {
  display: block;
}
.entity-edit .errors > div .text {
  padding-left: 25px;
  font-size: 14px;
  color: #e51616;
  margin-left: 15px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
@media screen and (max-width: 640px) {
  .entity-edit .errors > div .text {
    display: none;
  }
}
.entity-edit .errors > div .text:before {
  content: "•";
  font-size: 24px;
  height: 10px;
  width: 10px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 5px;
  top: 2px;
  font-weight: normal;
  background-color: #e51616;
  border-radius: 10px;
  animation: pulse-animation 2s infinite;
}
.entity-edit .errors > div .hover {
  flex: none;
  background-color: #ffeaea;
  border: 1px solid #ffa9a9;
  padding: 20px;
  width: 300px;
  display: none;
  position: absolute;
  left: 0px;
  border-radius: 10px;
  height: auto;
  z-index: 999;
}
.entity-edit .errors > div .hover > div {
  padding-top: 10px;
  font-size: 12px;
  color: #ef4141;
  display: block;
  position: relative;
}
.entity-edit .errors > div .hover > div:first-child {
  padding-top: 0px;
}
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(229, 22, 22, 0.8);
  }
  100% {
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0);
  }
}
.entity-edit .waves {
  background-image: url(/img/waves.svg);
  background-position: -170px -155px;
  background-repeat: no-repeat;
  background-size: 400px;
}
.entity-edit .waves.p-20-d {
  background-position: -160px -160px;
}
.entity-edit .big-icon {
  display: inline-block;
  width: auto;
  border-radius: 10px;
  border: 1px solid rgba(16, 24, 40, 0.05);
  padding: 10px;
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
}
.entity-edit .big-icon span {
  font-size: 26px;
  color: #4a4a4a;
  font-variation-settings: "FILL" 1, "wght" 300;
}
.entity-edit .body .file {
  overflow: hidden;
  background-color: white;
  border-radius: 10px;
  border: 1px solid black;
  border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5);
  box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 24px 0px;
  height: 500px;
  margin-bottom: 25px;
}
.entity-edit .body .file > div {
  height: 100%;
}
.entity-edit .body .file > .label {
  display: none;
}

.reference .f-1s {
  min-width: 277px !important;
}
.reference h1 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
}
.reference h2 {
  font-size: 14px;
  font-weight: 300;
  padding: 8px 0px 14px 0px;
}
.reference .header .t-status {
  width: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.reference .header .t-status div {
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 6px 0px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.reference .header .t-status div span {
  margin: 0px 8px;
}
.reference .header .t-status div .ref-label {
  font-weight: 600;
}
@media screen and (max-width: 640px) {
  .reference .header .t-status div .ref-label {
    display: none;
  }
}
.reference .header .t-status div .ref {
  background-color: #f2f4f7;
  padding: 6px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}
.reference .header .t-status .observations-amount {
  padding-left: 10px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}
@media screen and (max-width: 640px) {
  .reference .header .t-status .observations-amount {
    display: none;
  }
}
.reference .price-info {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}
.reference .price-info > div {
  border-right: 1px solid #e7e7e7;
  width: 33%;
  text-align: center;
}
.reference .price-info > div > span {
  font-size: 9px;
  font-weight: 400;
  color: #8f8f8f;
  padding-left: 4px;
}
.reference .price-info > div > .value {
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  word-break: break-all;
}
.reference .price-info > div:last-child {
  border-right: none;
}

.img-previews {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.img-previews > .main {
  width: calc(100% - 65px);
  height: 100%;
  padding-right: 5px;
}
.img-previews > .main > a, .img-previews > .main > div {
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 10px;
  overflow: hidden;
}
.img-previews > .side {
  padding-left: 5px;
  width: 65px;
  height: 200px;
}
.img-previews > .side > a, .img-previews > .side > div {
  width: 60px;
  height: 60px;
  display: block;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 0px;
}
.img-previews > .side > a:first-child, .img-previews > .side > div:first-child {
  margin-top: 0px;
}
.img-previews > .side > a:last-child, .img-previews > .side > div:last-child {
  margin-bottom: 0px;
}

.promotion-preview {
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #cfd4dc;
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
  overflow: hidden;
}
.promotion-preview img {
  width: 100%;
}

.pdf-name {
  text-overflow: ellipsis !important;
  width: auto !important;
  overflow: hidden !important;
  padding-right: 8px !important;
}

.store-preview {
  display: block;
  text-align: center;
}
.store-preview > div {
  margin: 0 auto;
  border-radius: 200px;
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}
.store-preview h1 {
  text-align: center;
}
.store-preview h2 {
  color: #475467;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  padding: 10px 30px;
  line-height: 1.3em;
}

/*
    AI/QA Phase 2, CS-UI-17: the QA marker beside the Form marker in the observation header
    (custom/modal/observation.js). `.t-status { width: 115px }` in tables.scss is a table column's
    width; here the marker sizes to its label (172.7px for "QA Not reviewed", measured on sw).

    A phone has no room for it: the four header buttons take 170px of the 348px row and the Form
    marker 115px, so "QA Not reviewed" wrapped to two lines in a 48px header. Below 640px the header
    copy is hidden and `.qa-marker-m`, the same chip at the top of the Information column, shows
    instead - one line, nothing cut.
*/
.entity-edit.observation .header .t-qa-status {
  width: auto;
}
.entity-edit.observation .qa-marker-m {
  display: none;
}
@media screen and (max-width: 640px) {
  .entity-edit.observation .header .t-qa-status {
    display: none;
  }
  .entity-edit.observation .qa-marker-m {
    display: block;
    padding-top: 10px;
  }
  .entity-edit.observation .qa-marker-m .m-chip-square {
    display: inline-block;
    position: relative;
  }
}

/*
    AI/QA Phase 4, CS-UI-19 / CS-UI-57..59: the form history bar (custom/observation-history.js), between the
    header and the three columns of the observation modal. Geometry from the client mock-up
    (Salesteamwatch Admin.html: .formhist-trigger, .fhg, .hrow), colours from the app palette. Only the
    back-office roles get the bar, and with it `.with-history`.

    Desktop (#modals.no-scroll, >= 935px): the lib sizes the body `calc(100% - 110px)` for the header and the
    footer only (lib/modal.scss), so with the bar in between the observation becomes a column and the body
    takes the height that is left. The open panel is capped and scrolls on its own, so the columns keep
    their room.

    Every text element sets its own colour and weight: lib's `* { color; font-weight: 400 }` reaches each
    span directly (memory universal-selector-kills-inheritance). Text wraps, never an ellipsis.
*/
@media screen and (min-width: 935px) {
  #modals.no-scroll .modal .entity-edit.observation.with-history {
    display: flex;
    flex-direction: column;
  }
  #modals.no-scroll .modal .entity-edit.observation.with-history > .header, #modals.no-scroll .modal .entity-edit.observation.with-history > .footer {
    flex: none;
  }
  #modals.no-scroll .modal .entity-edit.observation.with-history > .body.with-head.with-foot {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
}

.entity-edit.observation .form-history {
  flex: none;
  margin: 0 -15px;
  border-bottom: 1px solid #eaecf0;
  background-color: #f7f9fb;
  overflow: hidden;
}
.entity-edit.observation .form-history a, .entity-edit.observation .form-history a:visited, .entity-edit.observation .form-history a:active, .entity-edit.observation .form-history a:focus {
  text-decoration: none;
}
.entity-edit.observation .form-history .material-symbols-outlined {
  font-size: 16px;
  color: #475467;
  font-variation-settings: "FILL" 0, "wght" 400;
}
.entity-edit.observation .form-history .fh-caret {
  color: #c2c5cc;
  transition: transform 0.2s ease-in-out;
}
.entity-edit.observation .form-history .fh-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 24px;
}
.entity-edit.observation .form-history .fh-trigger .fh-count {
  font-size: 12px;
  font-weight: 600;
  color: #6b6e76;
  line-height: 1.3;
  transition: color 0.2s ease-in-out;
}
.entity-edit.observation .form-history .fh-trigger .material-symbols-outlined {
  font-size: 14px;
  color: #6b6e76;
  transition: color 0.2s ease-in-out;
}
.entity-edit.observation .form-history .fh-trigger:hover .fh-count, .entity-edit.observation .form-history .fh-trigger:hover .material-symbols-outlined {
  color: #26272b;
}
.entity-edit.observation .form-history .fh-panel {
  display: none;
  border-top: 1px solid #eaecf0;
  background-color: #ffffff;
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.entity-edit.observation .form-history .fh-panel::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}
.entity-edit.observation .form-history.open .fh-panel {
  display: block;
}
.entity-edit.observation .form-history.open .fh-trigger .fh-count, .entity-edit.observation .form-history.open .fh-trigger .material-symbols-outlined {
  color: #26272b;
}
.entity-edit.observation .form-history.open .fh-trigger .fh-caret {
  transform: rotate(180deg);
}
.entity-edit.observation .form-history .fh-empty {
  padding: 10px 24px;
  font-size: 12.5px;
  font-weight: 500;
  color: #9a9da6;
}
.entity-edit.observation .form-history .fh-group + .fh-group, .entity-edit.observation .form-history .fh-prior + .fh-group {
  border-top: 1px solid #eaecf0;
}
.entity-edit.observation .form-history .fh-sec {
  padding: 14px 24px 4px 17px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9a9da6;
  line-height: 1.3;
}
.entity-edit.observation .form-history .fh-group + .fh-sec, .entity-edit.observation .form-history .fh-prior + .fh-sec {
  border-top: 1px solid #eaecf0;
}
.entity-edit.observation .form-history .fh-group-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px 10px 22px;
  transition: background-color 0.2s ease-in-out;
}
.entity-edit.observation .form-history .fh-group-hd:hover {
  background-color: rgba(16, 24, 40, 0.025);
}
@media screen and (max-width: 640px) {
  .entity-edit.observation .form-history .fh-group-hd {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .entity-edit.observation .form-history .fh-v {
    order: 3;
    flex: 1 0 100%;
  }
}
.entity-edit.observation .form-history .fh-ico {
  flex: none;
  width: 18px;
  font-size: 18px;
  line-height: 1;
  color: #475467;
}
.entity-edit.observation .form-history .fh-ico + .fh-f {
  margin-left: -4px;
}
.entity-edit.observation .form-history .fh-f {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: #26272b;
  line-height: 1.3;
}
.entity-edit.observation .form-history .fh-v {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: #6b6e76;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.entity-edit.observation .form-history .fh-r {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.entity-edit.observation .form-history .fh-trail {
  display: flex;
  align-items: center;
  gap: 3px;
}
.entity-edit.observation .form-history .fh-n {
  font-size: 11px;
  font-weight: 600;
  color: #9a9da6;
}
.entity-edit.observation .form-history .fh-group-bd {
  display: none;
  padding: 0 24px 6px 28px;
}
.entity-edit.observation .form-history .fh-group.open .fh-group-bd {
  display: block;
}
.entity-edit.observation .form-history .fh-group.open .fh-group-hd .fh-caret {
  transform: rotate(180deg);
}
.entity-edit.observation .form-history .fh-group-hd .fh-caret {
  font-size: 14px;
}
.entity-edit.observation .form-history .fh-row-hd .fh-caret {
  font-size: 13px;
}
.entity-edit.observation .form-history .fh-row {
  position: relative;
  padding-left: 16px;
}
.entity-edit.observation .form-history .fh-row::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #eaecf0;
}
.entity-edit.observation .form-history .fh-row:first-child::before {
  top: 13px;
}
.entity-edit.observation .form-history .fh-row:last-child::before {
  bottom: auto;
  height: 13px;
}
.entity-edit.observation .form-history .fh-row:only-child::before {
  display: none;
}
.entity-edit.observation .form-history .fh-dot {
  position: absolute;
  left: 0;
  top: 10px;
  box-shadow: 0 0 0 2.5px #ffffff;
}
.entity-edit.observation .form-history .fh-dot, .entity-edit.observation .form-history .fh-trail i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgb(138, 147, 162);
}
.entity-edit.observation .form-history .fh-dot.collector, .entity-edit.observation .form-history .fh-trail i.collector {
  background-color: #e3a90f;
}
.entity-edit.observation .form-history .fh-dot.manager, .entity-edit.observation .form-history .fh-trail i.manager {
  background-color: #475467;
}
.entity-edit.observation .form-history .fh-dot.qa, .entity-edit.observation .form-history .fh-trail i.qa {
  background-color: #5a9bd8;
}
.entity-edit.observation .form-history .fh-dot.ai, .entity-edit.observation .form-history .fh-trail i.ai {
  background-color: #8cc300;
}
.entity-edit.observation .form-history .fh-row-hd {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 5px 4px 5px 0;
  cursor: default;
}
.entity-edit.observation .form-history .fh-row.has-more .fh-row-hd {
  cursor: pointer;
}
.entity-edit.observation .form-history .fh-main {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0;
  line-height: 0;
  overflow-wrap: anywhere;
}
.entity-edit.observation .form-history .fh-act {
  margin-right: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: #26272b;
  line-height: 1.3;
}
.entity-edit.observation .form-history .fh-by {
  font-size: 11.5px;
  font-weight: 500;
  color: #9a9da6;
  line-height: 1.3;
}
.entity-edit.observation .form-history .fh-end {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 16.25px;
}
.entity-edit.observation .form-history .fh-ts {
  font-size: 11px;
  font-weight: 600;
  color: #6b6e76;
  white-space: nowrap;
}
.entity-edit.observation .form-history .fh-row:not(.has-more) .fh-end {
  padding-right: 20px;
}
.entity-edit.observation .form-history .fh-row-more {
  display: none;
  padding: 2px 0 10px 0;
}
.entity-edit.observation .form-history .fh-row.exp .fh-row-more {
  display: block;
}
.entity-edit.observation .form-history .fh-row.exp .fh-row-hd .fh-caret {
  transform: rotate(180deg);
}
.entity-edit.observation .form-history .fh-val {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.entity-edit.observation .form-history .fh-val s {
  font-size: 13px;
  font-weight: 600;
  color: #c2c5cc;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}
.entity-edit.observation .form-history .fh-val b {
  font-size: 13px;
  font-weight: 700;
  color: #26272b;
  overflow-wrap: anywhere;
}
.entity-edit.observation .form-history .fh-val .fh-arw {
  font-size: 13px;
  font-weight: 600;
  color: #c2c5cc;
}
.entity-edit.observation .form-history .fh-reason {
  padding-top: 6px;
  font-size: 12.5px;
  font-weight: 400;
  color: #4b4d54;
  line-height: 1.5;
}
.entity-edit.observation .form-history .fh-val ~ .fh-reason {
  color: #6b6e76;
}
.entity-edit.observation .form-history .fh-ai {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 6px;
}
.entity-edit.observation .form-history .fh-ai .qa-src .material-symbols-outlined {
  font-size: 14px;
  color: inherit;
}
.entity-edit.observation .form-history .fh-ai-note {
  font-size: 12.5px;
  font-weight: 400;
  color: #4b4d54;
  line-height: 1.5;
}

.insights {
  margin-top: 10px;
}
@media screen and (max-width: 640px) {
  .insights {
    margin-top: 20px;
  }
}
.insights > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 640px) {
  .insights > div {
    display: block;
  }
}
.insights > div .insight-btn {
  display: inline-block;
  margin: 10px;
  text-decoration: none;
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
  background-color: #FFFFFF;
  width: 33%;
  border-radius: 10px;
}
@media screen and (max-width: 640px) {
  .insights > div .insight-btn {
    display: block;
    width: 100%;
  }
}
.insights > div .insight-btn > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
}
.insights > div .insight-btn > div > .icon {
  width: 50px;
  padding: 10px;
  border: 1px solid rgb(234, 236, 240);
  border-radius: 8px;
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
}
.insights > div .insight-btn > div > .icon > span {
  font-size: 30px;
  color: #8cc300;
}
.insights > div .insight-btn > div > .text {
  width: calc(100% - 50px);
  font-size: 16px;
  padding: 0px 20px;
  font-weight: 600;
}
.insights > div .insight-btn .description {
  font-size: 12px;
  text-align: left;
  padding: 0px 20px;
  width: 100%;
  justify-content: flex-start;
}
.insights > div .insight-btn .action {
  font-size: 12px;
  width: 100%;
  border-top: 1px solid #eeeeee;
  padding: 16px 20px;
  margin-top: 20px;
  font-weight: 600;
  justify-content: flex-end;
}
.insights > div .insight-btn:first-child {
  margin-left: 0px;
}
.insights > div .insight-btn:last-child {
  margin-right: 0px;
}
@media screen and (max-width: 640px) {
  .insights > div .insight-btn {
    margin-right: 0px;
    margin-left: 0px;
  }
}
.insights > div .insight-btn.disabled {
  background-color: #f9fafb;
}
.insights > div .insight-btn.disabled > div > .icon {
  border-color: rgba(234, 236, 240, 0.3);
}
.insights > div .insight-btn.disabled > div > .icon > span {
  color: #cedea8;
}
.insights > div .insight-btn.disabled > div > .text {
  color: #868b93;
}
.insights > div .insight-btn.disabled .description {
  color: #b8bec5;
}
.insights > div .insight-btn.disabled .action {
  border-top: 1px solid #f5f5f5;
  color: #c1c1c1;
}

.chart {
  display: block;
  width: 100%;
}
.chart > div {
  height: 222px;
}
.chart h1, .chart h2 {
  font-size: 14px;
  font-weight: 500 !important;
  color: #000000;
  padding: 0px 3px 11px 3px;
}
.chart h2 {
  font-size: 12px;
  padding-top: 0px;
  font-weight: 400 !important;
  padding-bottom: 20px;
}

.page.map {
  display: none;
  margin: 0px !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 24px;
  background-color: #fff;
}
@media screen and (max-width: 775px) {
  .page.map {
    padding: 0px;
  }
}
.page.map .mapbox-container {
  margin: 0px;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  /*padding: 24px;*/
  border-radius: 24px;
  background-color: #F8F8F8;
}
@media screen and (max-width: 775px) {
  .page.map .mapbox-container {
    padding: 0px;
    border-radius: 0px;
  }
}
.page.map .mapbox-container #mapbox {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  display: block;
}
@media screen and (max-width: 775px) {
  .page.map .mapbox-container #mapbox {
    border-radius: 0px;
  }
}
.page.map .mapbox-container #mapbox .mapboxgl-marker circle {
  fill: #537400;
}
.page.map .mapbox-container #mapbox .mapboxgl-marker path[opacity="0.25"] {
  opacity: 1;
  fill: #fff;
}
.page.map .map-menu-toggle {
  display: none;
  position: absolute;
  left: 144px;
  top: 36px;
  z-index: 1;
  border-radius: 8px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 0 30px 0 rgba(18, 18, 23, 0.2);
  border: 2px solid transparent;
  transition: border-color 0.2s ease-in-out;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
@media screen and (max-width: 775px) {
  .page.map .map-menu-toggle {
    left: 24px;
    bottom: 104px;
    top: unset;
  }
}
.page.map .map-menu-toggle:hover {
  border-color: #8cc300;
}
.page.map .map-menu-toggle .counter {
  display: none;
  height: 21px;
  min-width: 21px;
  width: auto;
  max-width: 40px;
  padding: 0 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Inter;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px;
  position: absolute;
  border: none;
  right: -9px;
  top: -9px;
  background-color: #8dc302;
  color: white;
  border-radius: 10px;
  pointer-events: none;
}
.page.map .map-menu-toggle .header {
  height: 100%;
  width: 100%;
  margin: 0px;
  overflow: hidden;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 8px;
}
.page.map .map-menu-toggle .header > div:first-child {
  width: 72px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page.map .map-menu-toggle .header > div:first-child > span {
  font-size: 26px;
  color: #161616;
}
.page.map .results-count {
  position: absolute;
  display: flex;
  padding: 8px 12px;
  align-items: center;
  gap: 4px;
  color: rgba(22, 22, 22, 0.7);
  text-align: center;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  border-radius: 4px;
  background: #FFF;
  box-shadow: 0 0 10px 0 rgba(18, 18, 23, 0.2);
  z-index: 1;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: 0px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
@media screen and (max-width: 775px) {
  .page.map .results-count {
    bottom: unset;
    left: unset;
    right: 24px;
    top: 24px;
    transform: unset;
  }
}
@media screen and (min-width: 776px) {
  .page.map .results-count.top-right-cards {
    bottom: unset;
    left: unset;
    bottom: 262px;
    right: 48px;
    transform: unset;
  }
  .page.map .results-count.bottom-right-cards {
    bottom: unset;
    left: unset;
    bottom: 48px;
    right: 48px;
    transform: unset;
  }
}

.page.map.displayed {
  display: block !important;
}

.marker {
  cursor: pointer;
}

.gmap {
  font-size: 14px !important;
  padding: 0 14px !important;
  height: 36px !important;
  margin-top: 8px;
}
.gmap img {
  width: 14px;
  margin-right: 5px;
}

.map-menu {
  display: block;
  position: absolute;
  top: 110px;
  left: 48px;
  transition: left 0.2s ease-in-out;
  z-index: 4;
  width: 270px;
  height: auto;
  backdrop-filter: blur(7px);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 0 30px 0 rgba(18, 18, 23, 0.2);
}
@media screen and (max-width: 775px) {
  .map-menu {
    top: 24px;
    left: 24px;
  }
}
.map-menu[data-filter]:not([data-filter="0"]) {
  outline: 3px solid #8cc300;
}
.map-menu .map-menu-close {
  display: flex;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
  align-items: center;
  justify-content: center;
  margin: 0px;
  padding: 0px;
  height: 20px;
  width: 20px;
  text-decoration: none;
}
.map-menu .map-menu-close span {
  font-size: 22px;
  color: #bdbdbf;
}
.map-menu .map-menu-applied-filter {
  display: none;
  position: absolute;
  left: 0px;
  top: -16px;
  z-index: 1;
  margin: 0px;
  padding: 0px;
  text-decoration: none;
  width: 100%;
  text-align: center;
}
.map-menu .map-menu-applied-filter > div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 4px 4px 10px;
  background-color: #8dc302;
  border-radius: 24px;
}
.map-menu .map-menu-applied-filter > div span:first-child {
  font-size: 12px;
  color: white;
}
.map-menu .map-menu-applied-filter > div span:last-child {
  font-size: 20px;
  color: white;
  padding-left: 0px;
}
.map-menu .header {
  height: 68px;
  width: 100%;
  margin: 0px;
  overflow: hidden;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.map-menu .header > div:first-child {
  width: 72px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-menu .header > div:first-child > span {
  font-size: 26px;
  color: #8cc300;
}
.map-menu .header > div:last-child {
  height: 100%;
  width: calc(100% - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.map-menu .header > div:last-child > h1 {
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  width: 100%;
  padding: 0px;
}
.map-menu .header > div:last-child > div {
  margin-top: 6px !important;
  font-size: 11px;
  color: #606e83;
  font-weight: 500;
  text-align: left;
  padding: 0px;
  width: 100%;
}
.map-menu .map-filters {
  display: block;
  margin: 0;
  height: auto;
  max-height: calc(100vh - (env(safe-area-inset-bottom, 0px) + 365px));
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
@media screen and (max-width: 775px) {
  .map-menu .map-filters {
    max-height: calc(100vh - (env(safe-area-inset-bottom, 0px) + 340px));
  }
}
.map-menu .map-filters > a {
  width: 100%;
  height: 60px;
  margin: 0px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}
.map-menu .map-filters > a > div {
  flex: 1;
  display: inline-flex;
  justify-content: flex-start;
  flex-grow: 1;
}
.map-menu .map-filters > a > div:first-child {
  padding-left: 16px;
  padding-right: 12px;
  flex-grow: unset;
}
.map-menu .map-filters > a > div:first-child span {
  color: #8cc300;
  font-size: 24px;
}
.map-menu .map-filters > a > div:last-child {
  flex-grow: unset;
  justify-content: flex-end;
  padding-right: 16px;
}
.map-menu .map-filters > a > div:last-child span {
  color: #98a2b3;
}
.map-menu .map-filters > a .p {
  font-size: 16px;
  font-weight: 600;
}
.map-menu .map-filters > a:hover {
  background-color: rgba(255, 255, 255, 0.6);
}
.map-menu .map-filters > a.active {
  background-color: white;
}
.map-menu .map-filters > a.active > div:last-child span {
  transform: rotate(90deg);
}
.map-menu .map-filters .map-filter {
  display: block;
  background-color: white;
}
.map-menu .map-filters .map-filter .results {
  padding-bottom: 16px;
  max-height: 177px;
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.map-menu .map-filters .map-filter .results > .no-results {
  display: none;
  font-size: 16px;
  padding: 16px;
  margin: 4px;
  border-radius: 10px;
  font-size: 14px;
  text-decoration: none;
  color: #858585;
  transition: background-color 0.2s ease-in-out;
  text-align: center;
}
.map-menu .map-filters .map-filter .results .map-filter-loader {
  display: block;
  height: 50px;
  min-height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
}
.map-menu .map-filters .map-filter .results .map-filter-loader > div {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  left: -110px;
  color: #FFF;
  box-sizing: border-box;
  animation: map-filter-loader-spin 2s linear infinite;
}
@keyframes map-filter-loader-spin {
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  12% {
    box-shadow: 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  25% {
    box-shadow: 110px 0 #cce982, 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  36% {
    box-shadow: 120px 0 #cce982, 110px 0 #cce982, 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 130px 0 #cce982, 120px 0 #cce982, 110px 0 #cce982, 100px 0 #cce982;
  }
  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982, 120px 0 #cce982, 110px 0 #cce982;
  }
  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982, 120px 0 #cce982;
  }
  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982;
  }
  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  }
}
.map-menu .map-filters .map-filter .results .input-checkbox {
  text-align: left;
  margin-left: 16px;
  padding-right: 4px;
}
.map-menu .map-filters .map-filter .results .input-text.range {
  width: calc(50% - 30px);
  display: inline-block;
  margin: 0px 10px;
}
.map-menu .map-filters .map-filter .results .input-text.range .label {
  font-size: 14px;
  color: #4c5668;
  margin: 0px 0px 8px 0px;
  font-weight: 500;
  text-align: left;
}
.map-menu .map-filters .map-filter .results .input-text.range:first-child {
  margin-left: 20px;
}
.map-menu .map-filters .map-filter > .results::-webkit-scrollbar {
  width: 0 !important;
  background: transparent !important;
  display: none !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.map-menu .map-filters .map-filter > .results::-webkit-scrollbar-thumb {
  background: transparent !important;
}
.map-menu .map-filters::-webkit-scrollbar {
  width: 0 !important;
  background: transparent !important;
  display: none !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.map-menu .map-filters::-webkit-scrollbar-thumb {
  background: transparent !important;
}
.map-menu .footer {
  height: 68px;
  width: 100%;
  margin: 0px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(208, 213, 221, 0.5);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.map-menu .footer .btn:first-child {
  background-color: transparent;
  border-color: transparent;
  font-size: 14px;
  color: #4a4a4a;
  box-shadow: none;
  transition: color 0.2s ease-in-out;
}
.map-menu .footer .btn:first-child:hover {
  color: #777777;
}
.map-menu .footer .btn:before {
  color: #4a4a4a;
  top: 2px;
  transition: color 0.2s ease-in-out;
}
.map-menu .footer .btn:first-child:hover:before {
  color: #777777;
}
.map-menu .footer .btn:last-child {
  font-size: 14px;
  padding-left: 48px;
  padding-right: 20px;
}
.map-menu .footer .btn.secondary:last-child {
  padding-right: 34px;
}
.map-menu .footer .btn:last-child:before {
  color: #fff;
}
.map-menu .footer .btn.secondary:last-child:before {
  color: #4a4a4a;
}
.map-menu .footer .btn:last-child:before {
  font-variation-settings: "FILL" 0, "wght" 400;
}

.map-menu.closed {
  display: none !important;
}

.map-buttons-filters {
  position: absolute;
  z-index: 1;
  left: 246px;
  top: 28px;
  width: auto;
  max-width: calc(100% - 270px - 360px);
}
@media screen and (max-width: 1000px) {
  .map-buttons-filters {
    top: 134px;
    left: 37px;
    max-width: calc(100% - 143px);
  }
}
@media screen and (max-width: 775px) {
  .map-buttons-filters {
    top: 88px;
    left: 0px;
    max-width: 100%;
  }
}
.map-buttons-filters > a {
  position: absolute;
  right: -70px;
  top: 8px;
  display: none;
  height: 48px;
  width: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 80px;
  background: #FFF;
  box-shadow: 0 0 8px 0 rgba(18, 18, 23, 0.2);
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  color: #161616;
  text-align: center;
  transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
@media screen and (max-width: 1000px) {
  .map-buttons-filters > a {
    padding: 8px 16px;
    height: 36px;
    width: 36px;
    right: -82px;
  }
}
@media screen and (max-width: 775px) {
  .map-buttons-filters > a {
    display: none;
  }
}
.map-buttons-filters > a:hover {
  border-color: #8cc300;
}
.map-buttons-filters > a span {
  font-size: 16px;
  padding-left: 2px;
}
.map-buttons-filters > .list {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0));
}
@media screen and (max-width: 1000px) {
  .map-buttons-filters > .list {
    gap: 12px;
  }
}
@media screen and (max-width: 775px) {
  .map-buttons-filters > .list {
    padding: 8px 24px 8px 0px;
    mask-image: unset;
    -webkit-mask-image: unset;
    overflow: hidden;
    overflow-x: auto;
  }
  .map-buttons-filters > .list::-webkit-scrollbar {
    width: 0 !important;
    background: transparent !important;
    display: none !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .map-buttons-filters > .list::-webkit-scrollbar-thumb {
    background: transparent !important;
  }
}
.map-buttons-filters > .list a {
  display: flex;
  height: 48px;
  padding: 12px 20px;
  align-items: center;
  gap: 4px;
  border-radius: 80px;
  background-color: #FFF;
  box-shadow: 0 0 8px 0 rgba(18, 18, 23, 0.2);
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  color: #161616;
  text-align: center;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
@media screen and (max-width: 1000px) {
  .map-buttons-filters > .list a {
    padding: 8px 16px;
    height: 36px;
  }
}
@media screen and (max-width: 775px) {
  .map-buttons-filters > .list a:first-child {
    margin-left: 24px;
  }
  .map-buttons-filters > .list a:last-child {
    margin-right: 48px;
  }
}
.map-buttons-filters > .list a:hover {
  border-color: #8cc300;
}
.map-buttons-filters > .list a.active {
  border-color: #FFF;
  color: #FFF;
  font-weight: 500;
  background-color: #8cc300;
}

.map-buttons-filters.full > a {
  transform: rotate(90deg);
}
.map-buttons-filters.full > .list {
  flex-wrap: wrap;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}

.custom-marker {
  transition: opacity 0.2s ease-in-out;
}
.custom-marker > a {
  top: -16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-decoration: none;
}
.custom-marker > a > div:first-child {
  background-image: url(/img/map-pin.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 68px;
  height: 80px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
}
.custom-marker > a > div:first-child > img {
  width: 52px;
  height: 52px;
  border-radius: 52px;
}
.custom-marker > a > div:last-child {
  display: flex;
  padding: 4px 8px 4px 4px;
  align-items: center;
  gap: 4px;
  border-radius: 24px;
  background: #8CC300;
}
.custom-marker > a > div:last-child > img {
  width: 16px;
  height: 16px;
  border-radius: 16px;
}
.custom-marker > a > div:last-child > span {
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.map-visible-cards, .map-store-mobile-preview {
  position: absolute;
  display: flex;
  left: 0px;
  bottom: 0px;
  height: auto;
  max-width: 100%;
  overflow: hidden;
  overflow-x: auto;
  gap: 16px;
  padding: 16px 0px;
  z-index: 1;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.map-visible-cards::-webkit-scrollbar, .map-store-mobile-preview::-webkit-scrollbar {
  width: 0 !important;
  background: transparent !important;
  display: none !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.map-visible-cards::-webkit-scrollbar-thumb, .map-store-mobile-preview::-webkit-scrollbar-thumb {
  background: transparent !important;
}
.map-visible-cards > .card, .map-store-mobile-preview > .card {
  display: flex;
  padding: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 0 10px 0 rgba(18, 18, 23, 0.2);
  z-index: 1;
  min-width: 400px;
  width: 400px;
  transition: opacity 0.2s ease-in-out;
}
.map-visible-cards > .card:first-child, .map-store-mobile-preview > .card:first-child {
  margin-left: 16px;
}
.map-visible-cards > .card:last-child, .map-store-mobile-preview > .card:last-child {
  margin-right: 16px;
}
.map-visible-cards > .card .store, .map-store-mobile-preview > .card .store {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 64px;
  width: 100%;
  gap: 16px;
}
.map-visible-cards > .card .store .logo, .map-store-mobile-preview > .card .store .logo {
  width: 64px;
  height: 64px;
}
.map-visible-cards > .card .store .logo > div, .map-store-mobile-preview > .card .store .logo > div {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 64px;
  background-color: #f2f4f7;
  background-position: center center;
}
.map-visible-cards > .card .store .data, .map-store-mobile-preview > .card .store .data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 64px;
  min-width: 0;
  flex: 1;
  gap: 4px;
}
.map-visible-cards > .card .store .data h1, .map-store-mobile-preview > .card .store .data h1 {
  color: #161616;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 0px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  width: 100%;
}
.map-visible-cards > .card .store .data a, .map-store-mobile-preview > .card .store .data a {
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  width: 100%;
}
.map-visible-cards > .card .store a.view, .map-store-mobile-preview > .card .store a.view {
  width: 16px;
  height: 64px;
}
.map-visible-cards > .card .store a.view span, .map-store-mobile-preview > .card .store a.view span {
  color: #8cc300;
}
.map-visible-cards > .card .store a.view:hover span, .map-store-mobile-preview > .card .store a.view:hover span {
  color: #7ca809;
}
.map-visible-cards > .card .stats, .map-store-mobile-preview > .card .stats {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 8px;
}
.map-visible-cards > .card .stats > div, .map-store-mobile-preview > .card .stats > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.map-visible-cards > .card .stats > div > span, .map-store-mobile-preview > .card .stats > div > span {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  color: rgba(22, 22, 22, 0.7);
  text-align: center;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.map-visible-cards > .card .stats > div > span .product-img, .map-store-mobile-preview > .card .stats > div > span .product-img {
  display: inline-flex;
  width: 14px;
  height: 14px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 10px;
}
.map-visible-cards > .card .stats > div > span:first-child, .map-store-mobile-preview > .card .stats > div > span:first-child {
  flex: 6;
  color: rgba(22, 22, 22, 0.7);
}
.map-visible-cards > .card .stats > div > span:last-child, .map-store-mobile-preview > .card .stats > div > span:last-child {
  justify-content: flex-end;
  flex: 4;
  color: #161616;
}

@media screen and (max-width: 775px) {
  .map-visible-cards {
    display: none !important;
  }
}

.map-store-mobile-preview {
  left: 0px;
  bottom: 0px;
  width: 100%;
  max-width: 100%;
  z-index: 10;
  padding: 0px;
}
.map-store-mobile-preview .card {
  min-width: 100%;
  width: 100%;
  margin: 0px !important;
  border-radius: 32px 32px 0 0;
  background: #FFF;
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.1);
  gap: 26px;
  padding-top: 3px;
}
.map-store-mobile-preview .card .handle {
  display: flex;
  width: 100%;
  height: 31px;
  padding-top: 10px;
  align-items: flex-start;
  justify-content: center;
}
.map-store-mobile-preview .card .handle > div {
  display: flex;
  width: 50px;
  height: 3px;
  border-radius: 3px;
  background: #ddd;
}
.map-store-mobile-preview .card .store {
  flex-direction: column;
  height: auto;
}
.map-store-mobile-preview .card .store .data h1 {
  text-align: center;
}
.map-store-mobile-preview .card .store .data a {
  text-align: center;
}
.map-store-mobile-preview .card .view {
  border-radius: 80px;
  padding: 32px 10px;
  margin-top: 2px;
}

.map-loading {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  background-color: #8cc300;
  z-index: 2;
  font-size: 11px;
  color: #ffffff;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
@media screen and (max-width: 775px) {
  .map-loading {
    top: 13px;
  }
}
.map-loading > span {
  color: #ffffff;
  animation: map-loading-spin 1s linear infinite;
  font-size: 18px;
}
@keyframes map-loading-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.page[data-id="/scan/api"] h4 {
  padding: 4px 0px;
  margin: 0px 0px;
  font-size: 14px;
  font-weight: 400;
}
.page[data-id="/scan/api"] h4 span {
  color: #7ca809;
}
.page[data-id="/scan/api"] .search-preview {
  padding-top: 20px;
  width: 100%;
  overflow: hidden;
}
.page[data-id="/scan/api"] .search-preview canvas {
  width: 100%;
}
.page[data-id="/scan/api"] .search-final {
  display: none;
}

.iframe-scan {
  border: none;
  width: 100%;
  height: 90vh;
}

.page[data-id="/auth"] .footer, .page[data-id="/auth/switch"] .footer {
  display: block;
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  min-width: 320px;
  height: 80px;
  padding: 10px 34px;
  background-color: white;
}
@media screen and (max-width: 600px) {
  .page[data-id="/auth"] .footer, .page[data-id="/auth/switch"] .footer {
    height: auto;
  }
}
.page[data-id="/auth"] .footer .left, .page[data-id="/auth/switch"] .footer .left {
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  height: 100%;
}
@media screen and (max-width: 600px) {
  .page[data-id="/auth"] .footer .left, .page[data-id="/auth/switch"] .footer .left {
    float: unset;
    padding-bottom: 20px;
  }
}
.page[data-id="/auth"] .footer .left img, .page[data-id="/auth/switch"] .footer .left img {
  vertical-align: top;
}
.page[data-id="/auth"] .footer .right, .page[data-id="/auth/switch"] .footer .right {
  display: flex;
  align-items: center;
  justify-content: center;
  float: right;
  height: 100%;
}
@media screen and (max-width: 600px) {
  .page[data-id="/auth"] .footer .right, .page[data-id="/auth/switch"] .footer .right {
    float: unset;
  }
}
.page[data-id="/auth"] .footer .right .p, .page[data-id="/auth/switch"] .footer .right .p {
  color: #667085;
  font-size: 14px;
  text-align: center;
  padding-top: 8px;
}
@media screen and (max-height: 700px) {
  .page[data-id="/auth"] .footer, .page[data-id="/auth/switch"] .footer {
    display: none;
  }
}

#menu {
  position: fixed;
  width: 100%;
  height: auto;
  padding: 10px 10px 10px 10px;
  top: 0px;
  left: 0px;
  z-index: 1000;
  min-width: 320px;
  text-align: center;
}
#menu > div {
  display: block;
  margin: 0 auto;
  max-width: 1298px;
}
#menu > div > div {
  background-color: white;
  border-radius: 10px;
  border: 1px solid black;
  border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5);
  box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 24px 0px;
  padding: 0px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  gap: 0px;
}
#menu > div > div > div {
  display: inline-block;
  height: 32px;
  margin: 20px;
}
#menu > div > div .mobile {
  display: none;
}
@media screen and (max-width: 640px) {
  #menu > div > div .mobile {
    flex-grow: 1;
    display: flex;
    margin: 0px;
    height: 74px;
    justify-content: center;
    align-items: center;
  }
}
#menu > div > div .mobile > img {
  max-height: 32px;
}
#menu > div > div .logo {
  width: 181px;
  min-width: 181px;
  margin-right: 100px;
}
@media screen and (max-width: 640px) {
  #menu > div > div .logo {
    margin: 12px;
  }
}
#menu > div > div .logo > a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(/img/salesteamwatch-full.svg);
  background-repeat: no-repeat;
  cursor: default;
}
#menu > div > div .logo > a span {
  display: none;
  font-size: 36px;
  color: #b7bec9;
}
@media screen and (max-width: 940px) {
  #menu > div > div .logo {
    width: 40px;
    min-width: 40px;
    margin-right: 20px;
  }
  #menu > div > div .logo > a {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    background-image: url(/img/salesteamwatch-square.svg);
  }
}
@media screen and (max-width: 940px) and (max-width: 640px) {
  #menu > div > div .logo > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    min-width: 50px;
    height: 50px;
    border: 1px solid black;
    border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5);
    box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 24px 0px;
    border-radius: 6px;
    padding: 4px;
    background-image: none;
    cursor: pointer;
    text-decoration: none;
  }
  #menu > div > div .logo > a span {
    padding-top: 2px;
    display: block;
    font-size: 24px;
  }
}
#menu > div > div .list {
  flex-grow: 1;
  display: flex;
  margin: 0px;
  height: 74px;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 640px) {
  #menu > div > div .list {
    display: none;
    flex-grow: unset;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    justify-content: unset;
    align-items: unset;
    gap: unset;
    background-color: white;
    border-bottom-right-radius: 10px;
    border: 1px solid black;
    border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5);
    box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 24px 0px;
    z-index: 150;
    padding-bottom: 25px;
  }
}
#menu > div > div .list .header {
  display: none;
}
@media screen and (max-width: 640px) {
  #menu > div > div .list .header {
    display: block;
    padding: 28px 25px 25px 25px;
    text-align: left;
  }
  #menu > div > div .list .header > img {
    max-width: 140px;
    display: inline-block;
  }
  #menu > div > div .list .header > div {
    width: 40px;
    min-width: 40px;
    margin-right: 20px;
    position: absolute;
    right: 8px;
    top: 18px;
  }
  #menu > div > div .list .header > div > .mobile-trigger {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    min-width: 50px;
    height: 50px;
    border-radius: 6px;
    padding: 4px;
    background-image: none;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
  }
  #menu > div > div .list .header > div > .mobile-trigger span {
    padding-top: 2px;
    display: block;
    color: #b7bec9;
    font-size: 24px;
  }
}
#menu > div > div .list > a {
  font-size: 15px;
  text-decoration: none;
  flex: 1;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 160px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  transition: background-color 0.2s ease-in-out;
  margin: 0px 2px;
  border-radius: 10px;
  z-index: 100;
}
#menu > div > div .list > a b {
  font-size: 15px;
  font-weight: 600;
  color: #4a4a4a;
}
@media screen and (max-width: 640px) {
  #menu > div > div .list > a {
    justify-content: left;
    max-width: 300px;
    padding: 30px 70px 30px 30px;
  }
}
#menu > div > div .list > a span {
  margin-right: 6px;
  color: #cbcccf;
  font-weight: 400;
  font-size: 22px;
  transition: color 0.2s ease-in-out;
}
#menu > div > div .list > a span.will-rotate {
  margin-left: 6px;
  margin-right: 0px;
  font-weight: 400;
  font-size: 20px;
  transition: transform 0.2s cubic-bezier(0, 0.55, 0.45, 1);
}
#menu > div > div .list > a.sub-active span.will-rotate {
  transform: rotate(180deg);
}
#menu > div > div .list > a:hover span {
  color: #8cc300;
}
#menu > div > div .list > a:hover span.will-rotate {
  color: #cbcccf;
}
#menu > div > div .submenu {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px;
  padding-top: 50px;
  cursor: pointer;
}
#menu > div > div .submenu > div {
  width: 270px;
  background-color: white;
  border-radius: 10px;
  border: 1px solid black;
  border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5);
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
  padding: 0px;
  background-color: white;
  z-index: 999;
}
@media screen and (max-width: 640px) {
  #menu > div > div .submenu > div {
    z-index: 150;
    border: none;
    border-radius: 0px;
    box-shadow: none;
  }
}
#menu > div > div .submenu > div > a {
  text-decoration: none;
  display: block;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  font-size: 0;
  border-bottom: 1px solid black;
}
@media screen and (max-width: 640px) {
  #menu > div > div .submenu > div > a {
    border-bottom: none;
  }
}
#menu > div > div .submenu > div > a {
  border-color: #eaecf0;
  margin-left: 4px;
  margin-right: 4px;
}
#menu > div > div .submenu > div > a .icon {
  width: 62px;
  height: 70px;
  vertical-align: top;
  display: inline-flex;
  align-items: start;
  justify-content: center;
  padding: 16px 8px;
}
#menu > div > div .submenu > div > a .icon span {
  font-size: 26px;
  color: #98a2b3;
}
#menu > div > div .submenu > div > a .text {
  width: calc(100% - 62px);
  height: 70px;
  vertical-align: top;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
#menu > div > div .submenu > div > a .text > div > h1 {
  display: block;
  font-size: 15px;
  color: #344054;
  text-align: left;
  padding: 0px;
  margin: 0px;
  font-weight: 600;
  width: 100%;
}
#menu > div > div .submenu > div > a .text > div .p {
  padding: 0px;
  padding-top: 10px;
  margin: 0px;
  text-align: left;
  font-size: 12px;
  color: #475467;
  max-width: 186px;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 24px;
}
#menu > div > div .submenu > div a:first-child {
  margin-top: 4px;
}
#menu > div > div .submenu > div a:first-child .icon {
  border-top-left-radius: 6px;
}
#menu > div > div .submenu > div a:first-child .text {
  border-top-right-radius: 6px;
}
#menu > div > div .submenu > div a:last-child {
  border-bottom: none;
  margin-bottom: 4px;
}
#menu > div > div .submenu > div a:last-child .icon {
  border-bottom-left-radius: 6px;
}
#menu > div > div .submenu > div a:last-child .text {
  border-bottom-right-radius: 6px;
}
#menu > div > div .submenu > div a:hover .icon {
  background-color: #f9fafb;
}
#menu > div > div .submenu > div a:hover .icon span {
  color: #8cc300;
}
#menu > div > div .submenu > div a:hover .text {
  background-color: #f9fafb;
}
#menu > div > div .profile {
  width: 44px;
  margin: 14px;
  height: 44px;
  margin-left: 100px;
}
@media screen and (max-width: 940px) {
  #menu > div > div .profile {
    margin-left: 20px;
  }
}
#menu > div > div .profile > a {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 44px;
  background-color: #f2f4f7;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 100;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#menu > div > div .profile > a span {
  font-size: 32px;
  color: white;
}
#menu > div > div .profile {
  /*submenu profile*/
}
#menu > div > div .profile .submenu > div {
  border-radius: 10px;
  border: 1px solid black;
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
  border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5);
}
#menu > div > div .profile .submenu > div a {
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  border-bottom: 1px solid black;
  border-color: #eaecf0;
}
#menu > div > div .profile .submenu > div a .icon {
  height: 50px;
  width: 50px;
  align-items: center;
}
#menu > div > div .profile .submenu > div a .icon span {
  font-size: 18px;
}
#menu > div > div .profile .submenu > div a .text {
  width: calc(100% - 50px);
  height: 50px;
}
#menu > div > div .profile .submenu > div a .text > div {
  overflow: hidden;
}
#menu > div > div .profile .submenu > div a .text > div h1 {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 10px 0px;
}
#menu > div > div .profile .submenu > div a .text > div .p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#menu > div > div .profile .submenu > div {
  /*submenu profile*/
}
#menu > div > div .profile .submenu > div a:first-child .icon {
  height: 70px;
  width: 70px;
  padding: 5px;
}
#menu > div > div .profile .submenu > div a:first-child .icon > div {
  width: 45px;
  height: 45px;
  border-radius: 45px;
  background-color: #f2f4f7;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
#menu > div > div .profile .submenu > div a:first-child .icon > div:after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 9px;
  background-color: #10d500;
  display: block;
  border: 2px solid white;
  right: 0px;
  bottom: 0px;
}
#menu > div > div .profile .submenu > div a:first-child .text {
  height: 70px;
  width: calc(100% - 70px);
}
#menu > div > div .profile .submenu > div a:first-child .text > div h1 {
  padding-top: 2px;
  padding-bottom: 6px;
  padding-left: 0px;
}
#menu > div > div .profile .submenu > div a:first-child .text > div .p {
  padding-top: 0px;
  padding-bottom: 2px;
  padding-left: 0px;
}
#menu > div > div .profile .submenu > div a:last-child {
  border-bottom: none;
}

.daterangepicker-ml-11 {
  margin-left: 11px !important;
}

.product-select {
  position: absolute;
  display: block;
  left: -4px;
  top: -7px;
}
@media screen and (max-width: 775px) {
  .product-select {
    left: 0px;
    top: -2px;
  }
}
.product-select > a {
  text-decoration: none;
  display: flex;
  width: 72px;
  height: 72px;
  justify-content: center;
  align-items: center;
  border-radius: 72px;
  background: #FFF;
  z-index: 1;
  border: 2px solid transparent;
  transition: border-color 0.2s ease-in-out;
}
@media screen and (max-width: 775px) {
  .product-select > a {
    width: 48px;
    height: 48px;
    border-radius: 8px;
  }
}
.product-select > a:hover {
  border-color: #8cc300;
}
.product-select > a > div {
  background-color: #f2f4f7;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 38px;
  height: 38px;
  border-radius: 38px;
}
.product-select .submenu {
  display: block;
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  transition: opacity 0.2s ease-in-out, max-height 0.3s ease-in-out;
  z-index: 999;
  overflow: hidden;
  overflow-y: auto;
}
.product-select .submenu.opened {
  visibility: visible;
  opacity: 1;
  max-height: calc(100vh - (env(safe-area-inset-bottom, 0px) + 192px));
}
.product-select .submenu.opened > div > a {
  opacity: 1;
  transform: translateY(0);
}
.product-select .submenu::-webkit-scrollbar {
  width: 0 !important;
  background: transparent !important;
  display: none !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.product-select .submenu::-webkit-scrollbar-thumb {
  background: transparent !important;
}
.product-select .submenu > div {
  width: auto;
  padding: 10px;
}
.product-select .submenu > div > a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  gap: 10px;
  padding: 6px 22px 6px 8px;
  background-color: white;
  border-radius: 42px;
  margin: 10px 0px;
  box-shadow: 0 0 10px 0 rgba(18, 18, 23, 0.2);
  border: 1px solid transparent;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, border-color 0.2s ease-in-out;
}
.product-select .submenu > div > a:hover {
  border: 1px solid #8cc300;
}
.product-select .submenu > div > a .icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
}
.product-select .submenu > div > a .icon > div {
  border-radius: 38px;
  width: 38px;
  height: 38px;
  background-color: #f2f4f7;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.product-select .submenu > div > a .text {
  flex: 1;
  font-size: 14px;
}

.map .product-select {
  left: 24px;
  top: 24px;
}
@media screen and (max-width: 775px) {
  .map .product-select {
    left: 24px;
    top: 24px;
  }
}
.map .product-select > a {
  box-shadow: 0 0 30px 0 rgba(18, 18, 23, 0.2);
}

.product-select-padding {
  padding-left: 85px !important;
}
@media screen and (max-width: 775px) {
  .product-select-padding {
    padding-left: 60px !important;
  }
}

#map-list-switch {
  position: absolute;
  top: 60px;
  right: 48px;
  display: flex;
  padding: 4px;
  height: 48px;
  align-items: center;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 0 30px 0 rgba(18, 18, 23, 0.2);
  z-index: 1;
  overflow: hidden;
  width: 190px;
}
@media screen and (max-width: 775px) {
  #map-list-switch {
    transform: rotate(90deg);
    width: 86px;
    top: unset;
    bottom: 164px;
    right: 0px;
  }
}
#map-list-switch::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 80px;
  background: #8CC300;
  transition: transform 0.2s ease-in-out;
  z-index: 0;
}
#map-list-switch a {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  color: #161616;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  position: relative;
  height: 100%;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
#map-list-switch a.active > span {
  color: #FFF;
  font-weight: 500;
}
#map-list-switch a > span:first-child {
  display: none;
}
#map-list-switch a > span:last-child {
  display: block;
}
@media screen and (max-width: 775px) {
  #map-list-switch a > span:first-child {
    display: block;
    transform: rotate(-90deg);
  }
  #map-list-switch a > span:last-child {
    display: none;
  }
}
#map-list-switch[data-active=list]::before {
  transform: translateX(100%);
}

.bottom-mobile-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background-color: #fff;
  gap: 0px;
  border-top: 1px solid #D2D2D2;
}
.bottom-mobile-menu.displayed {
  display: flex;
}
@media screen and (min-width: 776px) {
  .bottom-mobile-menu {
    display: none !important;
  }
}
.bottom-mobile-menu > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 80px;
  text-decoration: none;
  gap: 6px;
}
.bottom-mobile-menu > a span:first-child {
  font-size: 24px;
  color: #A5A5A5;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.bottom-mobile-menu > a:last-child span:first-child {
  border-radius: 32px;
  padding: 13px;
  background: rgba(245, 245, 245, 0.8);
  color: #161616;
  height: 50px;
  width: 50px;
}
.bottom-mobile-menu > a.active span:first-child {
  background: transparent;
  color: #8cc300;
}
.bottom-mobile-menu > a span:last-child {
  color: #787878;
  text-align: center;
  font-family: Inter;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.5px;
}
.bottom-mobile-menu > a.active span:first-child {
  border-radius: 32px;
  padding: 13px;
  background: rgba(140, 195, 0, 0.1);
  height: 50px;
  width: 50px;
}
.bottom-mobile-menu > a.active span:last-child {
  display: none;
}
.bottom-mobile-menu > a span.no-text {
  display: none;
}
.bottom-mobile-menu > a.disabled span {
  color: #dcdcdc !important;
}

#content.guest .bottom-mobile-menu {
  display: none !important;
}

.tabs .menu, .m-tabs .menu {
  padding-bottom: 10px;
}
.tabs .menu > .scroll > div, .m-tabs .menu > .scroll > div {
  display: block;
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  margin-top: 20px;
  border-bottom: 1px solid #eaecf0;
  height: 100%;
  margin-bottom: 10px;
}
.tabs .menu > .scroll > div > a, .m-tabs .menu > .scroll > div > a {
  display: inline-flex;
  font-size: 16px;
  color: #667085;
  padding: 0px 4px;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin-right: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  border-bottom: 1px solid transparent;
}
@media screen and (max-width: 640px) {
  .tabs .menu > .scroll > div > a, .m-tabs .menu > .scroll > div > a {
    font-size: 14px;
    margin-right: 6px;
  }
}
.tabs .menu > .scroll > div > a:hover, .tabs .menu > .scroll > div > a.displayed, .m-tabs .menu > .scroll > div > a:hover, .m-tabs .menu > .scroll > div > a.displayed {
  color: #8cc300;
  border-bottom: 1px solid #8cc300;
}
.tabs .menu > .scroll > div > a span:first-child, .m-tabs .menu > .scroll > div > a span:first-child {
  font-size: 16px;
  color: #667085;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
@media screen and (max-width: 640px) {
  .tabs .menu > .scroll > div > a span:first-child, .m-tabs .menu > .scroll > div > a span:first-child {
    font-size: 14px;
    margin-right: 6px;
  }
}
.tabs .menu > .scroll > div > a span:last-child, .m-tabs .menu > .scroll > div > a span:last-child {
  font-size: 12px;
  border: 1px solid #d1d1d1;
  padding: 4px 8px;
  font-weight: 600;
  border-radius: 10px;
  color: #7d91a6;
  background-color: #fbfbfb;
  margin-left: 8px;
}
.tabs .menu > .scroll > div > a.displayed span:first-child, .m-tabs .menu > .scroll > div > a.displayed span:first-child {
  color: #8cc300;
}
.tabs .menu > .scroll > div > a.displayed span:last-child, .m-tabs .menu > .scroll > div > a.displayed span:last-child {
  border: 1px solid #8cc300;
  color: #8cc300;
  background-color: #f0fff4;
}
.tabs .menu > .scroll > div::-webkit-scrollbar, .m-tabs .menu > .scroll > div::-webkit-scrollbar {
  width: 0 !important;
  background: transparent !important;
  display: none !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.tabs .menu > .scroll > div::-webkit-scrollbar-thumb, .m-tabs .menu > .scroll > div::-webkit-scrollbar-thumb {
  background: transparent !important;
}
.tabs .input-text, .m-tabs .input-text {
  padding-bottom: 0px;
}
.tabs .data > div, .m-tabs .data > div {
  display: none;
  font-size: 12px;
}
.tabs .data > div.displayed, .m-tabs .data > div.displayed {
  display: block;
}
.tabs .data .m-img-text > div:last-child > div > div, .m-tabs .data .m-img-text > div:last-child > div > div {
  overflow: unset;
  text-overflow: unset;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
@media screen and (min-width: 641px) {
  .tabs .data td.t-w-auto .m-img-text > div:last-child, .m-tabs .data td.t-w-auto .m-img-text > div:last-child {
    min-width: 190px;
    height: 100%;
  }
  .tabs .data td.t-w-auto .m-img-text > div:last-child > div > div, .m-tabs .data td.t-w-auto .m-img-text > div:last-child > div > div {
    font-size: 11px;
  }
  .tabs .data td.t-w-auto.t-store .m-img-text > div:last-child, .m-tabs .data td.t-w-auto.t-store .m-img-text > div:last-child {
    min-width: 176px;
  }
}
@media screen and (max-width: 1079px) {
  .tabs .data .m-img-text > div:last-child, .m-tabs .data .m-img-text > div:last-child {
    height: 60px;
  }
  .tabs .data .table > .scroll > div table tr td > a.m-img-text, .m-tabs .data .table > .scroll > div table tr td > a.m-img-text {
    height: 70px;
  }
}
@media screen and (min-width: 1080px) {
  .tabs .data .m-img-text .text, .m-tabs .data .m-img-text .text {
    max-width: 410px;
  }
}

.headers {
  display: block;
  margin-bottom: 16px;
}
.headers > .scroll > div {
  width: 100%;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  height: 100%;
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.headers > .scroll > div > div {
  flex-grow: 0;
  display: inline-flex;
}
.headers > .scroll > div > div .input-text {
  display: inline-block;
  width: auto;
}
.headers > .scroll > div > div .input-text::before, .headers > .scroll > div > div .input-text::after {
  top: 0px;
}
.headers > .scroll > div > div:first-child {
  justify-content: flex-start;
  flex-grow: 1;
  text-align: left;
  font-size: 12px;
}
.headers > .scroll > div > div:last-child {
  text-align: right;
  justify-content: flex-end;
}
.headers > .scroll > div::-webkit-scrollbar {
  width: 0 !important;
  background: transparent !important;
  display: none !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.headers > .scroll > div::-webkit-scrollbar-thumb {
  background: transparent !important;
}
.headers .table-search {
  min-width: 150px;
  margin-left: 10px;
}
.headers .filters {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  flex-grow: 1;
}
.headers .filters form {
  display: inline-flex;
  width: auto;
  padding-right: 5px;
}
.headers .filters form > div > a {
  width: auto;
}
.headers.filter-open.scroll-left > .scroll, .headers.filter-open.scroll-right > .scroll {
  height: 300px;
}

.headers.scroll-left > .scroll > div, .headers.scroll-right > .scroll > div {
  display: block;
  overflow-x: auto;
}

.table > .scroll > div, .table > .no-scroll > div {
  display: block;
  width: 100%;
  overflow-x: auto;
  background-color: white;
  border-radius: 12px;
  border: 1px solid black;
  border-color: rgba(208, 213, 221, 0.5) rgba(209, 214, 222, 0.5);
  box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 24px 0px;
}
.table > .scroll > div table, .table > .no-scroll > div table {
  display: table;
  margin: 0;
  padding: 0;
  width: 100%;
  border-collapse: collapse;
}
.table > .scroll > div table tr, .table > .no-scroll > div table tr {
  display: table-row;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 0;
  background-color: white;
  transition: background-color 0.1s ease-in-out;
}
.table > .scroll > div table tr td, .table > .scroll > div table tr th, .table > .no-scroll > div table tr td, .table > .no-scroll > div table tr th {
  display: table-cell;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 0;
  white-space: nowrap;
  text-align: left;
}
.table > .scroll > div table tr td > a, .table > .scroll > div table tr td > div, .table > .scroll > div table tr th > a, .table > .scroll > div table tr th > div, .table > .no-scroll > div table tr td > a, .table > .no-scroll > div table tr td > div, .table > .no-scroll > div table tr th > a, .table > .no-scroll > div table tr th > div {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 72px; /*do not change this without updating calculateCells() function */
  width: 100%;
}
@media screen and (max-width: 640px) {
  .table > .scroll > div table tr td > a, .table > .scroll > div table tr td > div, .table > .scroll > div table tr th > a, .table > .scroll > div table tr th > div, .table > .no-scroll > div table tr td > a, .table > .no-scroll > div table tr td > div, .table > .no-scroll > div table tr th > a, .table > .no-scroll > div table tr th > div {
    height: 50px; /*do not change this without updating calculateCells() function */
  }
}
.table > .scroll > div table tr td > a, .table > .scroll > div table tr td > div, .table > .scroll > div table tr th > a, .table > .scroll > div table tr th > div, .table > .no-scroll > div table tr td > a, .table > .no-scroll > div table tr td > div, .table > .no-scroll > div table tr th > a, .table > .no-scroll > div table tr th > div {
  font-size: 12px;
  padding: 0px 10px;
  text-align: left;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 500;
  color: #101828;
}
.table > .scroll > div table tr td .table-loader, .table > .scroll > div table tr th .table-loader, .table > .no-scroll > div table tr td .table-loader, .table > .no-scroll > div table tr th .table-loader {
  display: block;
  height: 10vh;
  min-height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
}
.table > .scroll > div table tr td .table-loader > div, .table > .scroll > div table tr th .table-loader > div, .table > .no-scroll > div table tr td .table-loader > div, .table > .no-scroll > div table tr th .table-loader > div {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  left: -110px;
  color: #FFF;
  box-sizing: border-box;
  animation: table-loader-spin 2s linear infinite;
}
@keyframes table-loader-spin {
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  12% {
    box-shadow: 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  25% {
    box-shadow: 110px 0 #cce982, 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  36% {
    box-shadow: 120px 0 #cce982, 110px 0 #cce982, 100px 0 #cce982, 0px 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 130px 0 #cce982, 120px 0 #cce982, 110px 0 #cce982, 100px 0 #cce982;
  }
  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982, 120px 0 #cce982, 110px 0 #cce982;
  }
  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982, 120px 0 #cce982;
  }
  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #cce982;
  }
  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  }
}
.table > .scroll > div table tr td .no-results, .table > .scroll > div table tr th .no-results, .table > .no-scroll > div table tr td .no-results, .table > .no-scroll > div table tr th .no-results {
  color: #7a7b7d;
  justify-content: center;
}
.table > .scroll > div table tr th, .table > .no-scroll > div table tr th {
  background-color: #f9fafb;
}
.table > .scroll > div table tr th > a, .table > .scroll > div table tr th > div, .table > .no-scroll > div table tr th > a, .table > .no-scroll > div table tr th > div {
  height: 44px; /*do not change this without updating calculateCells() function */
  background-color: #f9fafb;
  font-size: 12px;
  font-weight: 500;
  color: #475467;
}
.table > .scroll > div table tr th > a.sort-ASC span:after, .table > .scroll > div table tr th > div.sort-ASC span:after, .table > .scroll > div table tr th > a.sort-DESC span:after, .table > .scroll > div table tr th > div.sort-DESC span:after, .table > .no-scroll > div table tr th > a.sort-ASC span:after, .table > .no-scroll > div table tr th > div.sort-ASC span:after, .table > .no-scroll > div table tr th > a.sort-DESC span:after, .table > .no-scroll > div table tr th > div.sort-DESC span:after {
  font-family: "Material Symbols Outlined";
  content: "arrow_drop_up";
  display: block;
  position: absolute;
  top: 11px;
  height: 100%;
  font-size: 18px;
  color: #8cc300;
}
.table > .scroll > div table tr th > a.sort-DESC span:after, .table > .scroll > div table tr th > div.sort-DESC span:after, .table > .no-scroll > div table tr th > a.sort-DESC span:after, .table > .no-scroll > div table tr th > div.sort-DESC span:after {
  content: "arrow_drop_down";
}
.table > .scroll > div table tr th > a[data-sort="-1"], .table > .no-scroll > div table tr th > a[data-sort="-1"] {
  cursor: default !important;
  color: #90a1b1;
}
.table > .scroll > div table tr td, .table > .no-scroll > div table tr td {
  border-top: 1px solid #eaecf0;
}
.table > .scroll > div table tr th:first-child > a, .table > .scroll > div table tr th:first-child > div, .table > .scroll > div table tr td:first-child > a, .table > .scroll > div table tr td:first-child > div, .table > .no-scroll > div table tr th:first-child > a, .table > .no-scroll > div table tr th:first-child > div, .table > .no-scroll > div table tr td:first-child > a, .table > .no-scroll > div table tr td:first-child > div {
  padding-left: 22px;
}
@media screen and (max-width: 640px) {
  .table > .scroll > div table tr th:first-child > a, .table > .scroll > div table tr th:first-child > div, .table > .scroll > div table tr td:first-child > a, .table > .scroll > div table tr td:first-child > div, .table > .no-scroll > div table tr th:first-child > a, .table > .no-scroll > div table tr th:first-child > div, .table > .no-scroll > div table tr td:first-child > a, .table > .no-scroll > div table tr td:first-child > div {
    padding-left: 10px;
  }
}
.table > .scroll > div table tr:hover, .table > .no-scroll > div table tr:hover {
  background-color: #fbfbfb;
}
.table > .scroll > div::-webkit-scrollbar {
  width: 0 !important;
  background: transparent !important;
  display: none !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.table > .scroll > div::-webkit-scrollbar-thumb {
  background: transparent !important;
}
.table > .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px; /*do not change this without updating calculateCells() function */
}
.table > .pagination > div {
  flex: 1;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #344054;
  font-weight: 500;
  font-size: 14px;
}
.table > .pagination > div > span {
  font-size: 14px;
  color: #344054;
  font-weight: 500;
}
.table > .pagination > div > .total {
  padding-right: 3px;
}
.table > .pagination > div > .selected {
  padding-left: 3px;
}
.table > .pagination > div .rows-count {
  width: 70px;
  margin: 0px 6px;
}
.table > .pagination > div .rows-count .select:after {
  content: "unfold_more";
}
.table > .pagination > div:first-child {
  justify-content: flex-start;
}
@media screen and (max-width: 640px) {
  .table > .pagination > div:first-child {
    display: none;
  }
}
.table > .pagination > div:last-child {
  justify-content: flex-end;
}
@media screen and (max-width: 640px) {
  .table > .pagination > div:last-child .extended {
    display: none;
  }
}
.table tr td.t-actions:last-child a:last-child, .table tr td.t-assign:last-child a:last-child {
  padding-right: 20px !important;
}
@media screen and (max-width: 640px) {
  .table tr td.t-actions:last-child a:last-child, .table tr td.t-assign:last-child a:last-child {
    padding-right: 10px !important;
  }
}

.table.cards > .scroll > div, .table.cards > .no-scroll > div {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  border-radius: 0px;
}
.table.cards > .scroll > div table, .table.cards > .no-scroll > div table {
  display: block;
  background-color: transparent;
}
.table.cards > .scroll > div table thead, .table.cards > .no-scroll > div table thead {
  display: none;
}
.table.cards > .scroll > div table tbody, .table.cards > .no-scroll > div table tbody {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.table.cards > .scroll > div table tbody tr, .table.cards > .no-scroll > div table tbody tr {
  display: block;
  width: calc(25% - 12px);
  box-sizing: border-box;
  border: none;
  border-radius: 0px;
  margin-bottom: 0px;
  padding: 0px;
  background-color: transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  flex: 1 1 auto;
}
@media screen and (max-width: 1110px) {
  .table.cards > .scroll > div table tbody tr, .table.cards > .no-scroll > div table tbody tr {
    width: calc(33% - 8px);
  }
}
@media screen and (max-width: 842px) {
  .table.cards > .scroll > div table tbody tr, .table.cards > .no-scroll > div table tbody tr {
    width: calc(50% - 8px);
  }
}
@media screen and (max-width: 562px) {
  .table.cards > .scroll > div table tbody tr, .table.cards > .no-scroll > div table tbody tr {
    width: 100%;
  }
}
.table.cards > .scroll > div table tbody td, .table.cards > .no-scroll > div table tbody td {
  display: block;
  width: 100%;
  padding: 0px;
  border: none;
  background-color: transparent;
}
.table.cards > .scroll > div table tbody td a, .table.cards > .no-scroll > div table tbody td a {
  padding: 0px;
  align-items: flex-start;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  height: auto;
}

.m-links > a.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 6px;
  text-decoration: none;
  margin: 0px 1px;
  color: #4a4a4a;
  font-weight: 600;
}
.m-links > a.icon > span {
  font-size: 22px;
  color: #4a4a4a;
}
.m-links > a.icon > span.filled {
  font-variation-settings: "FILL" 1, "wght" 300;
}
.m-links > a.icon:hover {
  color: #7ca809;
}
.m-links > a.icon:hover > span {
  color: #7ca809;
}

.m-chip-round {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #8cc300;
  padding: 0px 6px;
  height: 26px;
  min-width: 26px;
  width: auto;
  font-size: 12px;
  font-weight: 600;
  border-radius: 26px;
  color: #8cc300;
  background-color: #f0fff4;
}

.m-card {
  display: block;
  width: 100%;
  background-color: #eceef1;
  transition: background-color 0.2s ease-in-out;
}
.m-card .img-previews {
  margin: 10px;
  height: 120px;
}
.m-card .img-previews > .main {
  width: calc(100% - 46px);
  padding-right: 0;
  margin-right: 6px;
}
.m-card .img-previews > .side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 40px;
  height: 120px;
  padding-left: 0;
}
.m-card .img-previews > .side > div, .m-card .img-previews > .side > div:first-child, .m-card .img-previews > .side > div:last-child {
  width: 40px;
  height: 36px;
  margin: 0;
}
.m-card .img-previews .main > div, .m-card .img-previews .side > div {
  border-radius: 6px;
  background-color: white;
}
.m-card .img-previews .total-observations {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.9098039216);
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  color: black;
  z-index: 1;
  padding: 5px 10px;
  font-weight: 600;
}
.m-card .details {
  background-color: white;
  margin: 10px;
  border: 1px solid #c5c5c5;
  border-radius: 6px;
  overflow: hidden;
}
.m-card .details > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 3px;
}
.m-card .details > div span {
  width: 50%;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 6px;
}
.m-card .details > div span:last-child {
  text-align: right;
  font-weight: 400;
}
.m-card .details > div:first-child {
  border-bottom: 1px solid #c5c5c5;
  padding: 3px 0px;
  font-size: 11px;
  font-weight: 600;
}
.m-card .details > div:first-child span {
  width: auto;
}
.m-card .details > div:first-child .material-symbols-outlined {
  color: #838a92;
  font-size: 16px;
  padding: 0 6px 0 3px;
}
.m-card .ref {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 6px;
  border-bottom: 1px solid #c5c5c5;
  background-color: white;
}
.m-card .ref > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 50%;
  font-size: 11px;
}
.m-card .ref > div .ref-label {
  font-weight: 600;
  padding-left: 4px;
  font-size: 11px;
  padding-top: 2px;
}
.m-card .ref > div .material-symbols-outlined {
  color: #838a92;
  font-size: 16px;
}
.m-card .ref > div:last-child {
  justify-content: flex-end;
}
.m-card .ref > div:last-child span {
  background-color: #f2f4f7;
  padding: 4px 4px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.m-card:hover {
  background-color: #e6ebf2;
}

.m-chip-square {
  border: 1px solid #d0d5dd;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 12px;
  color: #344054;
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
}

.m-chip-square[data-icon] {
  padding-left: 16px;
}

.m-chip-square::before {
  content: attr(data-icon);
  font-size: 20px;
  position: absolute;
  top: -1px;
  left: 3px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variation-settings: "FILL" 0, "wght" 300;
  font-weight: normal;
  color: rgb(138, 147, 162);
  color: #17b169;
}

.m-chip-square.red::before {
  color: #d92d20;
}

.m-chip-square.orange::before {
  color: #e3a90f;
}

.m-chip-square.grey::before {
  color: rgb(138, 147, 162);
}

.m-chip-square.blue::before {
  color: #5a9bd8;
}

.m-progress {
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-progress > div:first-child {
  display: flex;
  flex-grow: 1;
  height: 8px;
  background-color: #eaecf0;
  border-radius: 8px;
  width: 100%;
  min-width: 120px;
}
.m-progress > div:first-child > span {
  border-radius: 8px;
  background-color: #8cc300;
}
.m-progress > div:last-child {
  display: flex;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  padding-left: 12px;
}

.table[data-id^=manage-observations] .m-progress > div:first-child {
  flex: 0 0 60px;
  width: 60px;
  min-width: 60px;
}

.m-img-round {
  padding: 0px 2px !important;
  margin: 0px 2px;
}
.m-img-round > div {
  height: 40px;
  width: 40px;
  background-color: #f2f4f7;
  border-radius: 40px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.m-img-square {
  padding: 0px 2px !important;
  margin: 0px 2px;
}
.m-img-square > div {
  height: 40px;
  width: 40px;
  background-color: #f2f4f7;
  border-radius: 5px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.m-img-square:first-child {
  padding-left: 10px !important;
}

.m-img-square:last-child {
  padding-right: 10px !important;
}

.m-img-chips-round {
  padding: 0px 0px !important;
  margin: 0px 0px;
}
.m-img-chips-round > div {
  height: 20px;
  width: 20px;
  background-color: #f2f4f7;
  border-radius: 20px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.m-img-chips-round.count > div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11px;
  color: #475467;
}

.m-img-chips-round:first-child {
  padding-left: 10px !important;
}

.m-img-chips-round:last-child {
  padding-right: 10px !important;
}

.m-img-text {
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-img-text > div:first-child {
  width: 40px;
}
.m-img-text > div:first-child > div {
  height: 40px;
  width: 40px;
  background-color: #f2f4f7;
  border-radius: 40px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.m-img-text > div:last-child {
  height: 60px;
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 200px;
  overflow: hidden;
}
.m-img-text > div:last-child > div {
  overflow: hidden;
  padding-left: 10px;
}
.m-img-text > div:last-child > div > h1 {
  font-size: 14px;
  margin: 0;
  padding: 0;
  color: #101828;
  padding-top: 2px;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-img-text > div:last-child > div > div {
  margin-top: 6px !important;
  font-size: 12px;
  margin: 0;
  padding: 0;
  color: #475467;
  padding-bottom: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.m-big-img-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.m-big-img-text > div:first-child {
  width: 110px;
}
.m-big-img-text > div:first-child > div {
  height: 110px;
  width: 110px;
  background-color: #f2f4f7;
  border-radius: 110px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.m-big-img-text > div:last-child {
  height: 110px;
  width: calc(100% - 110px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.m-big-img-text > div:last-child > div {
  overflow: hidden;
  padding-left: 20px;
}
.m-big-img-text > div:last-child > div > h1 {
  font-size: 30px;
}
@media screen and (max-width: 640px) {
  .m-big-img-text > div:last-child > div > h1 {
    font-size: 18px;
  }
}
.m-big-img-text > div:last-child > div > h1 {
  margin: 0;
  padding: 0;
  color: #101828;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-big-img-text > div:last-child > div > div {
  margin-top: 20px !important;
  font-size: 16px;
}
@media screen and (max-width: 640px) {
  .m-big-img-text > div:last-child > div > div {
    font-size: 12px;
    margin-top: 10px !important;
  }
}
.m-big-img-text > div:last-child > div > div {
  margin: 0;
  padding: 0;
  color: #475467;
}

.m-pdf-text {
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-pdf-text > div:first-child {
  width: 40px;
}
.m-pdf-text > div:first-child > div {
  height: 40px;
  width: 40px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.m-pdf-text > div:last-child {
  height: 40px;
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.m-pdf-text > div:last-child > div {
  padding-left: 10px;
}
.m-pdf-text > div:last-child > div > h1 {
  font-size: 14px;
  margin: 0;
  padding: 0;
  color: #101828;
  font-weight: 500;
}
.m-pdf-text > div:last-child > div > div {
  margin-top: 6px !important;
  font-size: 12px;
  margin: 0;
  padding: 0;
  color: #475467;
}
.m-pdf-text .text h1 {
  max-width: 120px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.t-checkbox {
  width: 48px;
}

.t-status {
  width: 115px;
  position: relative;
}

td .t-text {
  width: 100px;
}
td .t-text a {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

/*
  The datetime column (table.js _datetime) puts the date on one line and the time under it, so
  the column is only as wide as the date. The cell keeps td's white-space: nowrap - the break
  comes from the two spans being flex items of a column, not from wrapping.
*/
td.t-datetime > a {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  line-height: 1.35;
}

.filter-table .t-text a {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

.t-chips {
  width: 130px;
}
.t-chips a {
  width: auto !important;
}

.t-open {
  width: 97px;
}

.t-pictures a {
  width: auto !important;
}

.t-w-auto {
  width: auto !important;
}

.t-w-10000 {
  width: 10000px !important;
}

.t-actions > div, .t-assign > div {
  padding-right: 0px !important;
  padding-left: 0px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t-actions > div a, .t-assign > div a {
  width: auto !important;
  text-align: right;
  padding-left: 20px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  text-decoration: none;
}

.t-actions a:first-child, .t-assign a:first-child {
  flex-grow: 1 !important;
}

.t-actions a:hover span, .t-assign a:hover span {
  color: #8cc300;
}

.t-assign, .t-add {
  width: 80px;
}
.t-assign a > div, .t-add a > div {
  background-color: #c92424;
  padding: 10px;
  border-radius: 6px;
  transition: background-color 0.2s ease-in-out;
}
@media screen and (max-width: 640px) {
  .t-assign a > div, .t-add a > div {
    padding: 6px;
  }
}
.t-assign a:hover > div, .t-add a:hover > div {
  background-color: #e83737;
}
.t-assign a.add > div, .t-add a.add > div {
  background-color: #8cc300;
}
.t-assign a.add:hover > div, .t-add a.add:hover > div {
  background-color: #7ca809;
}
.t-assign a > div > span, .t-add a > div > span {
  color: white;
  font-size: 22px;
}
.t-assign a:hover > div > span, .t-add a:hover > div > span {
  color: white;
}

.t-add {
  width: 70px;
}
@media screen and (max-width: 640px) {
  .t-add {
    width: 50px;
  }
}

.t-assign .btn {
  height: 35px;
  font-size: 14px;
  padding: 0px !important;
  justify-content: center;
  min-width: 84px;
  margin-right: 10px;
}

.table tr td.t-assign:last-child a:last-child {
  padding: 0px !important;
}

.preview-hover {
  position: absolute;
  display: block;
  pointer-events: none;
  width: 356px;
  height: 356px;
  transform: translate(-50%, -100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 100000;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
  border: 4px solid white;
  border-radius: 10px;
  background-color: rgb(244, 244, 244);
}

.daterangepicker td.in-range {
  background-color: #fbfff2 !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #8cc300 !important;
}

.daterangepicker .ranges li.active, .daterangepicker .ranges li.active:hover {
  background-color: #8cc300 !important;
}

@media screen and (max-width: 775px) {
  .daterangepicker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    height: auto;
    max-height: 100vh;
    overflow-y: auto;
  }
}
.daterangepicker .drp-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}
.daterangepicker .drp-buttons > span {
  display: none !important;
}
.daterangepicker .drp-buttons button {
  height: auto !important;
  padding: 8px 14px !important;
  border-radius: 4px !important;
}
.daterangepicker .drp-buttons .cancelBtn {
  background-color: #ffffff !important;
  color: #344054 !important;
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px !important;
}

.delete-catalog {
  position: absolute;
  top: -21px;
  left: -21px;
}

#tooltip {
  display: none;
  position: absolute;
  background-color: #333333;
  color: white;
  font-size: 12px;
  border-radius: 4px;
  padding: 8px 12px;
  white-space: pre-wrap;
  z-index: 1000;
}

#tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #333333 transparent transparent transparent;
}

#tooltip-aliases {
  display: none;
  position: absolute;
  font-size: 12px;
  border-radius: 8px;
  padding: 8px 12px;
  white-space: pre-wrap;
  z-index: 1000;
  line-height: 16px;
  pointer-events: none;
  background-color: white;
  color: black;
  border: 1px solid #8cc300;
  box-shadow: 0 0 10px 0 rgba(18, 18, 23, 0.2);
}
#tooltip-aliases > h2 {
  font-size: 14px;
  color: black;
  font-weight: 600;
  margin: 0;
  padding: 6px 6px 6px 14px;
}
#tooltip-aliases > h3 {
  font-size: 12px;
  color: #636a77;
  margin: 0;
  padding: 0px 6px 6px 15px;
}
#tooltip-aliases > .p > div {
  padding: 2px 0px;
}
#tooltip-aliases > .p > div > span {
  font-size: 13px;
  color: black;
}
#tooltip-aliases > .p > div > span:first-child {
  padding-right: 7px;
  color: #8cc300;
}
#tooltip-aliases > .p > div:last-child {
  padding-bottom: 0px;
}

#tooltip-aliases::after {
  content: url(/img/arrow-aliases.svg);
  position: absolute;
  top: 50%;
  left: calc(100% - 1.13em);
  transform: translateY(-50%);
  z-index: 1000;
  filter: drop-shadow(1px 0 rgb(140, 195, 0));
  width: 32px;
  height: 32px;
}

[data-aliases] .text {
  position: relative;
  cursor: help;
}

[data-aliases] .text::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 0;
  bottom: 3px;
  border-bottom: 1px dashed #c4c4c4;
  opacity: 0.8;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
  width: calc(100% - 11px);
}

#analyze-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 284px;
  height: 100%;
  background-color: #fff;
  transition: width 0.2s ease-in-out, margin 0.2s ease-in-out;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  z-index: 3;
  /*
     Divider between the rail and the page. The literal, not $home-border:
     that variable is declared in home.scss, which index.scss imports AFTER
     this file, so it is not in scope here.

     box-sizing is border-box, so this eats 1px of the inner 284px rather than
     widening the rail - nothing downstream shifts.
  */
  border-right: 1px solid #e6e8ec;
  /*
     ...except over the map, which runs edge to edge under the rail. #content
     carries .map only on /analyze/map (verified in the DOM on both routes).
  */
}
#content.map #analyze-menu {
  border-right: 0;
}
@media screen and (max-width: 775px) {
  #analyze-menu {
    display: none;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    box-shadow: 0 0 40px 0 rgba(22, 22, 22, 0.15);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
  }
}
#analyze-menu > div {
  width: 100%;
  height: 100%;
}
#analyze-menu > div > .header {
  padding: 32px;
  padding-right: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
@media screen and (max-width: 775px) {
  #analyze-menu > div > .header {
    padding: 24px;
  }
}
#analyze-menu > div > .header > div:first-child {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
@media screen and (max-width: 775px) {
  #analyze-menu > div > .header > div:first-child {
    width: 56px;
    height: 56px;
  }
}
#analyze-menu > div > .header > div:first-child img {
  display: block;
  width: 100%;
  height: 100%;
}
#analyze-menu > div > .header > div:last-child a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  width: 64px;
  text-decoration: none;
}
@media screen and (max-width: 775px) {
  #analyze-menu > div > .header > div:last-child a {
    justify-content: flex-end;
    align-items: flex-start;
  }
}
#analyze-menu > div > .header > div:last-child a span {
  font-size: 24px;
  color: rgba(22, 22, 22, 0.7);
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}
#analyze-menu > div > .header > div:last-child a span:first-child {
  display: inline-block;
}
#analyze-menu > div > .header > div:last-child a span:last-child {
  display: none;
}
@media screen and (max-width: 775px) {
  #analyze-menu > div > .header > div:last-child a span:first-child {
    display: none;
  }
  #analyze-menu > div > .header > div:last-child a span:last-child {
    display: inline-block;
    font-size: 18px;
  }
}
#analyze-menu > div > .header > div:last-child a:hover span {
  color: #8cc300;
}
#analyze-menu > div > .buttons {
  padding: 32px;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-height: calc(100% - 256px);
  overflow: hidden;
  overflow-y: auto;
  transition: padding 0.2s ease-in-out;
}
@media screen and (max-width: 775px) {
  #analyze-menu > div > .buttons {
    padding: 24px;
    padding-top: 0px;
    gap: 16px;
  }
}
#analyze-menu > div > .buttons::-webkit-scrollbar {
  width: 0 !important;
  background: transparent !important;
  display: none !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#analyze-menu > div > .buttons::-webkit-scrollbar-thumb {
  background: transparent !important;
}
#analyze-menu > div > .buttons a {
  display: flex;
  padding: 16px;
  align-items: center;
  align-self: stretch;
  text-decoration: none;
  gap: 12px;
  transition: background-color 0.2s ease-in-out;
  border-radius: 80px;
}
@media screen and (max-width: 775px) {
  #analyze-menu > div > .buttons a {
    padding: 8px;
    border-radius: 0px;
  }
}
#analyze-menu > div > .buttons a:hover > div:first-child span {
  color: #161616;
}
#analyze-menu > div > .buttons a:hover > div:last-child {
  color: #161616;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
#analyze-menu > div > .buttons a.active {
  background: #8cc300;
}
#analyze-menu > div > .buttons a.active > div:first-child span {
  color: #fff;
}
#analyze-menu > div > .buttons a.active > div:last-child {
  color: #fff;
}
@media screen and (max-width: 775px) {
  #analyze-menu > div > .buttons a.active {
    background: transparent;
  }
  #analyze-menu > div > .buttons a.active > div:first-child span {
    color: #8cc300;
  }
  #analyze-menu > div > .buttons a.active > div:last-child {
    color: #8cc300;
  }
}
#analyze-menu > div > .buttons a > div:first-child {
  width: 24px;
  height: 24px;
}
#analyze-menu > div > .buttons a > div:first-child span {
  font-size: 24px;
  color: rgba(22, 22, 22, 0.5);
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
#analyze-menu > div > .buttons a > div:last-child {
  color: rgba(22, 22, 22, 0.5);
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#analyze-menu > div > .buttons a.disabled > div {
  color: #dcdcdc !important;
}
#analyze-menu > div > .buttons a.disabled > div span {
  color: #dcdcdc !important;
}
#analyze-menu > div > .profile {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  padding: 32px 32px 48px 32px;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
}
@media screen and (max-width: 775px) {
  #analyze-menu > div > .profile {
    padding: 24px 24px 24px 24px;
  }
}
#analyze-menu > div > .profile > div {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0px;
}
@media screen and (max-width: 775px) {
  #analyze-menu > div > .profile > div {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 16px;
  }
}
#analyze-menu > div > .profile > div > a {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #161616;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  z-index: 1;
  text-decoration: none;
  width: auto;
  height: 48px;
}
#analyze-menu > div > .profile > div > a:first-child {
  width: 48px;
  height: 48px;
  border-radius: 48px;
  background-color: #f2f4f7;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  outline: 2px solid #8cc300;
  outline-offset: 3px;
}
#analyze-menu > div > .profile > div > a:nth-child(2) {
  flex: 1;
}
#analyze-menu > div > .profile > div > a:last-child {
  display: flex;
  width: 28px;
  height: 28px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
#analyze-menu > div > .profile > div > a:last-child span {
  color: rgba(22, 22, 22, 0.7);
  transition: color 0.2s ease-in-out;
}
#analyze-menu > div > .profile > div > a:last-child:hover span {
  color: #8cc300;
}

@media screen and (max-width: 775px) {
  #analyze-menu.menu-minimized {
    margin-left: -350px;
  }
}
@media screen and (min-width: 776px) {
  #analyze-menu.menu-minimized {
    width: 112px;
  }
  #analyze-menu.menu-minimized .header {
    flex-direction: column;
    padding-left: 0px;
    padding-right: 0px;
  }
  #analyze-menu.menu-minimized .header > div:last-child a span {
    transform: rotate(180deg);
  }
  #analyze-menu.menu-minimized .buttons {
    padding-left: 28px;
    padding-right: 28px;
    padding-top: 0px;
  }
  #analyze-menu.menu-minimized .buttons a > div:last-child {
    display: none;
  }
  #analyze-menu.menu-minimized .profile {
    padding: 32px 32px 48px 32px;
  }
  #analyze-menu.menu-minimized .profile > div > a {
    display: none !important;
  }
  #analyze-menu.menu-minimized .profile > div > a:first-child {
    display: flex !important;
  }
}

.analyze-menu-container {
  margin-left: 89px !important;
  width: calc(100% - 89px) !important;
  transition: width 0.2s ease-in-out, margin 0.2s ease-in-out;
  max-width: unset !important;
}
@media screen and (max-width: 775px) {
  .analyze-menu-container {
    margin-left: 0px !important;
    width: 100% !important;
  }
}
.analyze-menu-container .cards tr {
  width: 100% !important;
  flex: 1 1 9% !important;
  min-width: 270px !important;
  max-width: 380px !important;
}
@media screen and (max-width: 596px) {
  .analyze-menu-container .cards tr {
    max-width: 100% !important;
  }
}
.analyze-menu-container .cards tr {
  /*  @media screen and (min-width: 3516px) {
      width: 8% !important;
    }

    @media screen and (max-width: 3515px) {
      width: 9% !important;
    }

    @media screen and (max-width: 3189px) {
      width: 10% !important;
    }

    @media screen and (max-width: 2863px) {
      width: 11% !important;
    }

    @media screen and (max-width: 2537px) {
      width: 12% !important;
    }

    @media screen and (max-width: 2211px) {
      width: 16% !important;
    }

    @media screen and (max-width: 1885px) {
      width: 20% !important;
    }

    @media screen and (max-width: 1559px) {
      width: 30% !important;
    }

    @media screen and (max-width: 1233px) {
      width: 45% !important;
    }

    @media screen and (max-width: 907px) {
      width: 100% !important;
    }*/
}

.analyze-menu-container.menu-opened {
  margin-left: 260px !important;
  width: calc(100% - 260px) !important;
}
@media screen and (max-width: 775px) {
  .analyze-menu-container.menu-opened {
    margin-left: 0px !important;
    width: 100% !important;
  }
}

.page.analyze-menu-container {
  padding: 10px 40px 30px 40px !important;
  margin-top: 0px !important;
}
@media screen and (max-width: 775px) {
  .page.analyze-menu-container {
    padding: 10px 10px 10px 10px !important;
    height: calc(100% - 70px) !important;
  }
}

/*
    Home page - news feed + "What's new this month" panel.
    Design tokens come from the handoff (design_handoff_home_insights/README.md).

    Where the app already declares a variable it wins over the handoff literal -
    notably the brand green, which is $a-color (#8cc300) here and #8CC200 in the
    handoff. One digit apart, the app's value is the correct one.
*/
/*
   Presence chart grid. TWO elements mirror this: .pr-row (the grid itself) and
   .pr-zonetag (the floating label). They only line up if both are derived from
   these. Changing one by hand is what silently knocked the label out of the
   track before. (The target band is no longer among them: it now lives inside
   each .pr-track and is positioned as a % of the track's own width.)
*/
/*
   The mobile panel's bands - the filter row, the category row and the dot bar.
   handoff `.wn-m-fixed` / `.catpick` / `.wn-m-dotbar`: a translucent white
   fill over the card, and a rule at 70-80% alpha rather than the solid
   $home-border, so the three seams read lighter than the card's own edge.
*/
/*
   The design is drawn in Manrope, not the app's Inter. Every numeric weight was
   already correct - the apparent difference was the typeface itself, so this is
   scoped to .page.home only. @font-face lives in index.html beside Inter's.
   Manrope is variable 200-800; the design uses 400-800.
*/
/*
   lib/index.scss:82 sets `* { font-family: $font-family }` - a UNIVERSAL rule,
   so every element carries Inter DIRECTLY and inheritance from an ancestor can
   never reach it. Setting the face on .page.home alone changes only that one
   element. It has to be applied to the subtree explicitly.

   Material Symbols is excluded, or the icon glyphs would fall back to Manrope
   and render as literal ligature text ("expand_more").
*/
.page.home,
.page.home *:not(.material-symbols-outlined) {
  font-family: "Manrope", Inter, sans-serif;
  /*
     The prototype writes type with the `font:` SHORTHAND
     (`font: 800 14px var(--sw-font)`), and the shorthand RESETS line-height to
     `normal`. This app sets `line-height: 1` in lib/reset.scss and
     lib/index.scss:107, so writing font-size/font-weight separately leaves every
     line set solid - 15 of 22 measured selectors were 1.0 where the design is
     `normal` (~1.35 in Manrope). That is what made the whole page read wrong.

     Anything that genuinely needs a value sets its own below; this only
     restores the shorthand's default for everything else.
  */
  /*
     `inherit`, not `normal`: the reset has to undo lib's global
     `line-height: 1`, but a descendant must still pick up a line-height set on
     its container (.wn-cats .t sets 1.2; its .lb child was getting `normal`
     = 14.4px instead of 12.6px). .page.home itself is set to `normal` below.
  */
  line-height: inherit;
  /*
     lib/index.scss:82 is `* { color; font-family; font-weight: 400 }` - a
     UNIVERSAL rule, so every element gets these three DIRECTLY and normal CSS
     inheritance is dead. A weight set on a container never reaches a child
     element: `.home-section-label { font-weight: 800 }` wrapped around
     `<span>Latest in agri-food</span>` rendered the span at 400.

     The prototype does not hit this because its markup puts text in direct text
     nodes; ours wraps text in spans for flex layout. Restoring `inherit` makes
     the cascade behave normally again for the Home subtree.
  */
  font-weight: inherit;
}

/*
   Colour has the same problem, but it CANNOT be fixed on the same selector:
   `.page.home *:not(.x)` is specificity (0,2,0), which outranks lib's `.btn`
   and turned the green "Read article" button's label from white to #2c2c2c.

   `.page.home span` is (0,1,1): high enough to beat lib's `*` (0,0,0), low
   enough that both lib components and my own `.page.home .home-src` (0,2,0)
   still win. Spans are pure text wrappers in this markup, never components.
*/
.page.home span {
  color: inherit;
}

/* icons must not take the surrounding 800 - Material Symbols tops out at 700 */
.page.home .material-symbols-outlined {
  font-weight: 400;
}

/* rail expanded: clear 284px instead of 112px */
.page.home.menu-opened .home-appbar {
  /* rail 284 + 26 */
  padding-left: 310px;
}
@media screen and (max-width: 775px) {
  .page.home.menu-opened .home-appbar {
    padding-left: 16px;
  }
}

/*
   ---- the iOS-only 10px frame around everything ----

   WebKit CLIPS `position: fixed` descendants to the padding box of an
   `overflow: hidden` ancestor; Blink lets them escape to the viewport, which
   is why this never showed in devtools. `#content` (custom/index.scss:9) is
   `position: fixed; overflow: hidden; padding: 10px`, so on iOS the app bar
   and the What's new scrim - both `top/left/right: 0` - are cut to that
   padding box and the page background shows through in the 10px gap.

   Measured off the user's iPhone screenshot (1179x2556 @3x, viewport 393):
   the scrim and the app bar's white both span css x 10.0 -> 382.7, and the
   bar's white starts 10px below the viewport top. `.wn`, which is inset
   `left/right: 16px`, sits fully inside the clip box and was NOT affected -
   which is exactly the signature of a clip rather than a moved containing
   block.

   The fix is to leave nothing to escape: zero #content's padding while Home
   is the visible page and let .page.home carry the whole gutter. Then the
   clip box IS the viewport and both engines agree.

   `.displayed` is the router's "currently visible page" class
   (lib/router.js:475-476). `:has()` keeps the two halves coupled - on an
   engine without it neither rule applies and we simply keep today's
   behaviour, rather than a page with no gutter at all.
*/
@media screen and (max-width: 775px) {
  #content:has(> .page.home.displayed) {
    padding: 0;
  }
  #content:has(> .page.home.displayed) > .page.home {
    /*
       ---- and the same clip, 70px tall, at the BOTTOM ----

       analyze-menu.scss gives `.page.analyze-menu-container` a
       `height: calc(100% - 70px)` below 775, and .page.home carries that
       class. With `overflow: hidden` on the same box, everything inside is
       clipped 70px above the viewport - but only on iOS, because Blink lets
       `position: fixed` descendants escape an overflow ancestor and WebKit
       does not. It is the same engine difference as the padding clip above.

       Measured on the user's iPhone: viewport 393x664.3, and the card AND
       the scrim - two elements of completely different heights - both stop
       dead at y=594.7. Two boxes ending on the same line is a clip, not a
       coincidence. 664.3 - 70 = 594.3.

       It was invisible until the bottom menu started sliding away for the
       modal: the menu is a child of #content, not of .page.home, so it was
       never clipped and it filled exactly that strip.

       Home does not want the 70px anyway - it reserves its own app bar with
       padding-top below, and its own bottom chrome in home-mobile.scss.
    */
    height: 100% !important;
    /* the bar's full 70px now, not 70 - 10 */
    padding-top: 70px !important;
    /* the app bar's own gutter, so bar, card and feed share one edge */
    padding-left: 16px !important;
    padding-right: 16px !important;
    /*
       81 for the bottom mobile menu, which floats over the feed, + 10 of
       breathing room. The page used to stop 70px short, which hid the end of
       the feed behind the menu; now that it runs the full height the feed
       has to clear it itself.
    */
    padding-bottom: 91px !important;
  }
}
.page.home {
  /* root of the line-height chain restored above */
  line-height: normal;
  /*
     The app bar is position:fixed, so the scroll container has to reserve its
     height or the first row of content sits underneath it.

     60, not 70: the page already sits 10px down inside #content's padding.

     !important is required - analyze-menu.scss:447 sets
     `padding: 10px 40px 30px 40px !important` on .page.analyze-menu-container,
     and a plain padding-top loses to it. Measured: content top 20 -> 96, clear
     of the bar's 70, keeping the design's 26px gap. It also moves the
     scrollport's padding box below the bar, which is what .home-side's sticky
     offset is measured from - so the panel sticks clear of it instead of
     sliding under the bar.

     86, not 60: the bar is 96px in the new model (was 70). Page top sits at
     y=10 inside #content's padding, so 10 + 86 = 96 = the bar's bottom edge.
  */
  padding-top: 86px !important;
  /* the bar drops to 70px at 775, so the reservation drops with it (70 - 10) */
}
@media screen and (max-width: 775px) {
  .page.home {
    padding-top: 60px !important;
    /*
       6, not 10, so the total side gutter is 16px - #content's own 10px plus
       this - and the page content lines up with the app bar.

       The relationship, measured at 390px BEFORE this: bar padding edge at
       x=16 (logo left edge) but the What's new card and every feed card at
       x=20, and 370 against the bar's 374 on the right. A 4px inset on both
       sides, which is what reads as a stray margin boxing the page in. 16 is
       also the handoff's own mobile gutter (`.home-desk{padding:16px 14px}`
       measured: card x=16 at a 390px viewport).

       !important: analyze-menu.scss:447 sets `padding: 10px !important` on
       .page.analyze-menu-container below 775, same as for padding-top above.
    */
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}
.page.home {
  /*
     App bar - new model: 96px tall, NO white fill, NO bottom border. The model
     draws it `background:transparent` over the page grey; because it is FIXED
     over the scrolling feed, a literal `transparent` would show the feed
     sliding under it, so it is painted the SAME grey as #content (#f2f4f7).
     Visually identical to the model, and the feed vanishes cleanly at the bar's
     edge with no seam.

     FIXED and FULL WIDTH, painted UNDER the rail (z-index 2 vs the rail's 3),
     with left padding that clears the rail instead of a left offset.

     Why, after several wrong attempts: the rail's own background is
     transparent, and .analyze-menu-container's margin-left (89 / 260) does NOT
     equal the rail's width (112 / 284). Any bar that starts at the page box
     therefore leaves a strip in the difference, and any bar that reaches
     under it paints OVER the rail. Spanning the whole viewport and padding past
     the rail removes the seam completely - measured x=0, width=viewport, title
     at exactly the rail edge in both rail states.

     The padding follows .menu-opened and uses the rail's own 0.2s transition,
     so it stays aligned while the rail animates.
  */
}
.page.home .home-appbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 96px;
  /* model: 14px top, 0 bottom (content rides a touch low); left clears the
     rail: 112 + the 26px gutter. right 26. */
  padding: 14px 26px 0 138px;
  /* the design's transparent header, faked opaque so scroll content hides
     (matches #content behind it) */
  background-color: #f2f4f7;
  transition: padding-left 0.2s ease-in-out;
  /*
     775, not 640: this is where analyze-menu.scss drops the rail, so it is
     the point at which the bar genuinely becomes the mobile bar. Above it the
     rail still supplies the branding and the product control has room.
     Model mobile bar: 70px, padding 12/16/0, gap 11.
  */
}
@media screen and (max-width: 775px) {
  .page.home .home-appbar {
    height: 70px;
    padding: 12px 16px 0;
    gap: 11px;
  }
}
.page.home .home-appbar {
  /*
     Retired: the new model keeps the PRODUCT marker on mobile (a rounded
     square, below) instead of swapping in the SW brand mark that used to
     stand in here below 775px. Kept in the markup but never shown.
  */
}
.page.home .home-appbar .home-mk {
  display: none;
}
.page.home .home-appbar .product-select {
  /*
     relative, not static: .submenu is absolutely positioned so that opening
     it cannot stretch the fixed-height bar, and it needs THIS box as its
     containing block to land under the button.

     top/left MUST be reset with it. menu.scss positions this widget with
     `left: -4px; top: -7px` for the pages where it is absolute; while this
     was `static` those were inert, but `relative` makes them bite and the
     button rode 7px above the centre of the bar.
  */
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  /*
     Model: 56px white circle with a 1px border and the card shadow, the
     product image floating inside. Mobile drops to a 44px ROUNDED SQUARE
     (radius 12) - the model's mobile marker shape.
  */
}
.page.home .home-appbar .product-select > a {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid #e6e8ec;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.07);
}
.page.home .home-appbar .product-select > a > div {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
@media screen and (max-width: 775px) {
  .page.home .home-appbar .product-select > a {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .page.home .home-appbar .product-select > a > div {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
}
.page.home .home-appbar .product-select {
  /*
     Drops UNDER the button, as on every other page. It was pinned to
     `right: 26px` back when this widget stood in for the avatar at the
     right-hand end of the bar; left there, the menu opened against the
     opposite edge of the screen from the button that owns it.
  */
}
.page.home .home-appbar .product-select .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
}
.page.home .home-appbar {
  /*
     Mobile search toggle, right-hand end of the bar. The 240px pill does not
     fit a 58px bar, so on mobile the icon stands in for it and opens
     .home-search as a floating bar underneath (see below).

     Every geometry line here is undoing lib's bare `button` rule, which sets
     its own height, padding, background and radius.
  */
  /*
     -11px on the right, not 0: the spec wants a 44x44 touch target but the
     design aligns the 22px GLYPH with the bar's 16px gutter, and a centred
     glyph in a 44px box sits 11px inboard of it. Measured at 390px before
     the pull: glyph right edge 363 against the bar's padding edge of 374 and
     the card's edge of 370 - the icon read as floating away from both.
  */
}
.page.home .home-appbar .home-search-btn {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: -11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: #6b6e76;
  align-items: center;
  justify-content: center;
}
.page.home .home-appbar .home-search-btn .material-symbols-outlined {
  font-size: 22px;
}
.page.home .home-appbar .home-search-btn:hover {
  background-color: #f7f9fb;
  color: #26272b;
}
@media screen and (max-width: 934px) {
  .page.home .home-appbar .home-search-btn {
    display: flex;
  }
}
.page.home {
  /* search box, pushed right (new model) - 280x44 white rounded-rect (r-md 12)
     with a 1px border and the card shadow */
}
.page.home .home-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
  width: 280px;
  height: 44px;
  padding: 0 16px;
  background-color: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.07);
  color: #9a9da6;
  transition: border-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.page.home .home-search:hover {
  border-color: #d6d9df;
}
.page.home .home-search:focus-within {
  border-color: #8cc300;
  box-shadow: 0 0 0 3px rgba(140, 194, 0, 0.18);
}
.page.home .home-search .material-symbols-outlined {
  font-size: 18px;
  flex: 0 0 auto;
}
.page.home .home-search {
  /*
     On mobile it leaves the bar entirely and becomes a floating bar under it,
     opened by .home-search-btn. Inline it does not fit: the 240px pill
     squeezed the title box to 54px, which wrapped the h2 onto five lines and
     pushed the <h1> to y=-26, off the top of the bar. Measured at 390px.

     It stays inside .home-appbar in the DOM on purpose - the search handlers
     in analyze-home.js resolve the page with $(this).closest('.page'), so the
     input has to remain within .page.home.
  */
}
@media screen and (max-width: 934px) {
  .page.home .home-search {
    display: none;
  }
}
.page.home {
  /*
     The floating search bar, pinned under the app bar. Written as its own rule
     rather than nested inside .home-search: that block is a child of .page.home,
     so `.home-appbar.searching &` would compile to
     `.home-appbar.searching .page.home .home-search` - the wrong way round.

     No z-index of its own. It is inside .home-appbar, which is z-index 2, so it
     inherits that stacking context: above the What's new card (1), below the
     analyze rail (3).

     `top` is a fixed px value, not `calc(100% + 8px)`: this is position:fixed,
     so a percentage would resolve against the viewport height, not the bar.
  */
}
@media screen and (max-width: 934px) {
  .page.home .home-appbar.searching .home-search {
    display: flex;
    position: fixed;
    /* 96px bar + 8 */
    top: 104px;
    /* the page gutter, so it lines up with the bar above and the card below */
    left: 16px;
    right: 16px;
    width: auto;
    margin-left: 0;
    background-color: #fff;
    border-color: #d6d9df;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
    /* 70px bar + 8 */
  }
  .page.home {
    /* the toggle reads as pressed while the bar is open */
    /*
       The floating bar lands exactly where the What's new card sits, so the
       content moves down by the bar's height (44) plus its 8px gap = 52.

       .home-layout is a SIBLING of .home-appbar, which is what makes this
       selectable at all. The value is absolute rather than additive because
       padding-top cannot be extended in CSS, and margin-top would collapse
       out through the wrapper: 26 is .home-layout's own padding-top here.
    */
  }
}
@media screen and (max-width: 934px) and (max-width: 775px) {
  .page.home .home-appbar.searching .home-search {
    top: 78px;
  }
}
@media screen and (max-width: 934px) {
  .page.home .home-appbar.searching .home-search-input {
    display: block;
  }
  .page.home .home-appbar.searching .home-search-btn {
    background-color: #f2f8e3;
    color: #76a300;
  }
  .page.home .home-appbar.searching ~ .home-layout {
    padding-top: 78px;
  }
}
.page.home {
  /* .home-layout drops to 18px of padding at 640, so the offset follows it */
}
@media screen and (max-width: 640px) {
  .page.home .home-appbar.searching ~ .home-layout {
    padding-top: 70px;
  }
}
.page.home {
  /*
     lib/form.scss sets `input { height: 44px }` plus padding, box-shadow, border
     and width:100%. All of it has to be undone or the field is 44px tall INSIDE
     the pill and stretches it to ~62px.
  */
}
.page.home .home-search-input {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 100%;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  font-family: "Manrope", Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #26272b;
}
.page.home .home-search-input::placeholder {
  color: #9a9da6;
  opacity: 1;
}
.page.home .home-search-input {
  /* the browser's own clear affordance clashes with the pill */
}
.page.home .home-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.page.home .home-appbar-tt {
  min-width: 0;
  flex: 0 1 auto;
}
.page.home .home-appbar-tt h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: normal;
  color: #26272b;
  padding: 0;
  /* model mobile title: 21px */
}
@media screen and (max-width: 775px) {
  .page.home .home-appbar-tt h1 {
    font-size: 21px;
  }
}
.page.home .home-appbar-tt h2 {
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: #6b6e76;
  padding: 2px 0 0;
  /* model keeps the subtitle on mobile: 13px, 1px above gap */
}
@media screen and (max-width: 775px) {
  .page.home .home-appbar-tt h2 {
    font-size: 13px;
    padding-top: 1px;
  }
}
.page.home {
  /* horizontal padding comes from the page itself (40px, analyze-menu.scss:447) */
}
.page.home .home-layout {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding: 26px 0 0;
  max-width: 1140px;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .page.home .home-layout {
    padding-top: 18px;
  }
}
.page.home .home-feed {
  flex: 1;
  min-width: 0;
  max-width: 640px;
}
.page.home {
  /* top:0 - the scrollport's padding box already starts below the fixed app
     bar, so the panel sticks at y=96, clear of it. Measured. */
}
.page.home .home-side {
  flex: 0 0 408px;
  width: 408px;
  position: sticky;
  top: 0;
}
.page.home {
  /*
     934px is the app's own "columns stack" breakpoint (see the modal layout
     classes). The handoff says 900px; aligning with the app is worth more than
     matching that number exactly.
  */
}
@media screen and (max-width: 934px) {
  .page.home {
    /*
       The panel moves to the TOP of the feed on mobile and collapses (spec 4.2).
       order:-1 does that without duplicating it in the markup.
    */
  }
  .page.home .home-layout {
    flex-direction: column;
    gap: 18px;
  }
  .page.home .home-feed {
    max-width: unset;
    width: 100%;
  }
  .page.home {
    /*
       relative, not static: the open panel is absolutely positioned inside this
       box so it OVERLAYS the feed instead of pushing it down (spec 4.2.2, "the
       panel expands over the feed").

       min-height is what keeps the news articles clear of the card. On mobile
       the card is never in the flow - fixed below 775 so it floats, absolute
       when open - so this box would collapse to zero and the first article
       would sit behind the card at scroll 0.

       74px is the collapsed card's exact height and cannot vary: .wn-hd's
       14+14 padding, .wn-hd-top's 44px min-height (the touch target, taller
       than both the 38px mark and the text) and .wn's two 1px borders. The
       title is one line and the subtitle is nowrap + ellipsis, so no content
       can grow it.

       This replaced a JS measurement in applyOpenState(), which depended on the
       card being laid out at the moment the panel was built.
    */
  }
  .page.home .home-side {
    order: -1;
    width: 100%;
    flex: unset;
    position: relative;
    min-height: 74px;
  }
}
.page.home {
  /*
     Same stack, triggered 171px earlier in VIEWPORT terms when the rail is open.

     The block above keys off viewport width (<=934). But the two columns live
     inside .analyze-menu-container, whose margin-left jumps from 89px (rail
     collapsed) to 260px (.menu-opened) - 171px less room for the feed+panel -
     while the 934 query fires at the same viewport width regardless. So with the
     rail open the layout stayed two-column well past the point the feed had room
     for it, and the feed column got crushed instead of stacking.

     Shift the switch up by exactly that rail delta: 934 + (260 - 89) = 1105, so
     the available content width at the switch matches the collapsed case.
     Both resets vanish below 775 (margin-left back to 0), so this only bites
     in the 776..1105 band where the rail actually costs width.

     Keep these three rules in sync with the max-width:934 block above.
  */
}
@media screen and (max-width: 1105px) {
  .page.home.menu-opened .home-layout {
    flex-direction: column;
    gap: 18px;
  }
  .page.home.menu-opened .home-feed {
    max-width: unset;
    width: 100%;
  }
  .page.home.menu-opened .home-side {
    order: -1;
    width: 100%;
    flex: unset;
    position: relative;
    min-height: 74px;
  }
}
.page.home .home-section-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #4b4d54;
  /* prototype: margin-bottom 14, NO padding - padding inflated the box to
     33.2 (want 19.2) and indented the label 12px off the card's left edge */
  padding: 0;
  margin-bottom: 14px;
}
.page.home .home-section-label span.material-symbols-outlined {
  font-size: 19px;
}
.page.home .home-feed-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /*
     A search in flight. The results already on screen stay put and just
     recede - blanking them made typing look like a page reload.
  */
}
.page.home .home-feed-list.is-searching {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.page.home .home-empty {
  color: #9a9da6;
  font-size: 14px;
  padding: 20px 12px;
}
.page.home {
  /*
     "Load more" fallback under the feed. Hidden by default; revealed 2s after a
     page settles (analyze-home.js) for phones whose inner scroll container never
     fires a scroll event. Infinite scroll shares the same loader.
  */
}
.page.home .home-feed-more {
  display: none;
  justify-content: center;
  padding: 22px 0 6px;
}
.page.home .home-feed-more.show {
  display: flex;
}
.page.home .home-feed-more.loading {
  opacity: 0.55;
  pointer-events: none;
}
.page.home .home-feed-more .home-more-btn {
  min-width: 160px;
}
.page.home {
  /* ---- article card ---- */
}
.page.home .home-card {
  display: block;
  background-color: #fff;
  /* border AND shadow together, not one or the other */
  border: 1px solid #e6e8ec;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.07);
  overflow: hidden;
}
.page.home .home-card-img {
  position: relative;
  aspect-ratio: 16/9;
  background-color: #f7f9fb;
  overflow: hidden;
}
.page.home .home-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page.home .home-imgtag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  color: #4b4d54;
  /* prototype's sparkle svg is 12px */
}
.page.home .home-imgtag span.material-symbols-outlined {
  font-size: 12px;
  color: #8cc300;
}
.page.home .home-card-body {
  padding: 18px 20px 20px;
}
.page.home .home-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #9a9da6;
  padding-bottom: 9px;
}
.page.home .home-meta .home-src {
  color: #76a300;
  font-weight: 700;
}
.page.home .home-meta {
  /*
     Set explicitly rather than inherited from .home-meta - body carries
     $font-color (#2c2c2c) and any stray rule on span beats inheritance,
     which is what turned the relative date near-black.
  */
}
.page.home .home-meta .home-date {
  color: #9a9da6;
  font-weight: 600;
}
.page.home .home-meta .home-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #c2c5cc;
  flex: 0 0 auto;
}
.page.home {
  /* prototype .fcard .headline = 800 19px/-.01em. The handoff README says
     "22/800, -.02em" - it disagrees with the design it documents; the prototype
     is what actually renders, so it wins. */
}
.page.home .home-headline {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.28;
  color: #26272b;
  padding: 0 0 8px 0;
}
@media screen and (max-width: 640px) {
  .page.home .home-headline {
    font-size: 19px;
  }
}
.page.home {
  /* prototype .fcard .summary = 400 14.5px (README says 15px) */
}
.page.home .home-summary {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  color: #4b4d54;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page.home {
  /* never red, never warning-coloured, never above the headline */
  /* prototype uses margin-top; padding inflates the element's own box (27.2 vs 16.1) */
}
.page.home .home-ainote {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #9a9da6;
}
.page.home .home-ainote span.material-symbols-outlined {
  font-size: 13px;
  color: #8cc300;
  flex: 0 0 auto;
}
.page.home .home-ainote-i {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid #d6d9df;
  color: #9a9da6;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}
.page.home .home-ainote-i:focus {
  outline: 2px solid #8cc300;
  outline-offset: 1px;
}
.page.home .home-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid #e6e8ec;
  min-height: 42px;
}
.page.home {
  /* prototype .readbtn: 10px 18px, gap 8, 15px icon, pill radius */
}
.page.home .home-read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 18px;
  /* lib forces height:44px on buttons; the prototype's is content-sized (39.2) */
  height: auto;
  min-height: 0;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.page.home .home-read .material-symbols-outlined {
  font-size: 15px;
  flex: 0 0 auto;
}
.page.home {
  /* icon-only round button: lib pins ::before at left:$input-padding for
     text buttons, which puts the glyph 1.4px right of centre here */
}
.page.home .home-bkmk::before {
  left: 0;
  right: 0;
  width: auto;
  height: 100%;
}
.page.home .home-bkmk {
  margin-left: auto;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #e6e8ec;
  background-color: #fff;
  color: #6b6e76;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.page.home .home-bkmk:hover {
  background-color: #f7f9fb;
  color: #26272b;
}
.page.home .home-bkmk.on {
  color: #5f8500;
  border-color: #e4f0c7;
  background-color: #f2f8e3;
}

/*
    "What's new this month" insights panel on /analyze/home.

    Split out of home.scss purely for size - it relies on the $home-* variables
    declared at the top of home.scss, so it MUST be imported after it in
    css/custom/index.scss.
*/
.page.home .wn {
  background-color: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* viewport minus the 70px app bar minus the page's own top/bottom padding */
  max-height: calc(100vh - 110px);
}
@media screen and (max-width: 934px) {
  .page.home .wn {
    max-height: unset;
  }
}
.page.home .wn-hd {
  padding: 18px 20px 16px;
  flex: 0 0 auto;
}
.page.home .wn-hd-top {
  display: flex;
  align-items: center;
  gap: 11px;
  /* containing block for the absolutely-positioned .wn-live on desktop */
  position: relative;
  /* prototype uses margin, not padding - padding inflates the element's own box */
  margin-bottom: 15px;
}
.page.home {
  /* product marker chip - same asset the rest of the analyze platform uses */
}
.page.home .wn-hd-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  background-color: #f2f8e3;
  background-size: 26px 26px;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  /* it opens the product menu - see the handler in home-insights-render.js */
  cursor: pointer;
  transition: box-shadow 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.page.home .wn-hd-mark:hover {
  box-shadow: 0 0 0 2px #c3e090;
}
.page.home .wn-hd-mark:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(140, 194, 0, 0.35);
}
.page.home .wn-hd-tt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  /*
     Reserves the space the absolutely-positioned .wn-live occupies (75px pill
     + the row's 11px gap), so the title box stays exactly 229.4px wide - the
     width it had when the pill was still an in-flow sibling. Measured.
  */
  padding-right: 86px;
}
.page.home {
  /* title + Monthly on one line; see the note in renderPanel() */
}
.page.home .wn-hd-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.page.home {
  /*
     Desktop keeps the pill flush against the panel's right edge even though it
     now sits inside .wn-hd-tt. .wn-hd-top is already position:relative and has
     no padding, so right:0 lands on its right edge. Mobile puts it back in
     flow - see home-mobile.scss.
  */
}
.page.home .wn-live {
  flex: 0 0 auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.page.home .wn-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  /* h1-h6 default to $h-color (#000) - the design wants fg-1 */
  color: #26272b;
  padding: 0;
}
.page.home .wn-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #5f8500;
  background-color: #f2f8e3;
  border-radius: 999px;
  padding: 3px 9px;
}
.page.home .wn-live .pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #8cc300;
  animation: wn-pulse 1.8s infinite;
}
.page.home .wn-hd-prod {
  font-size: 12.5px;
  font-weight: 600;
  color: #6b6e76;
}
.page.home {
  /*
     The country and month selectors are xFORM selects (.input-select), the
     same widget as everywhere else in the app. Only the pill skin is ours -
     the open/close, option list and keyboard handling come from lib.

     `form` is display: contents so the element xFORM wraps the fields in does
     not become a layout box between .wn-filters and the two pills.
  */
}
.page.home .wn-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page.home .wn-filters > form {
  display: contents;
}
.page.home .wn-filters .input-select {
  flex: 1;
  min-width: 0;
  margin: 0;
  /*
     lib reserves 26px under every field for the validation message. In a
     filter pill there is no message, and it left the row 64px tall
     against the design's 34px.
  */
  padding-bottom: 0;
  /*
     .tiny forces 36px; the design pill is 34px.

     A FIXED height, not `auto`: the two pills have different content - the
     country carries a 22px flag, the month only text - so on `auto` they
     measured 38 and 33, and lib's `top: 6px` arrow then sat at a different
     height in each. Both are now 34 and the arrow is centred below.
  */
}
.page.home .wn-filters .input-select > .select {
  height: 34px;
  min-height: 0;
  /*
     Plain white, not a gradient. lib paints a 16px hard-edged
     `linear-gradient(to right, transparent, white)` strip in .select::before
     to fade long text out under the arrow; against a pill that graded down
     to $home-surface-2 that strip did not match, and showed as a lighter
     rectangular notch beside the caret.
  */
  background-color: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 999px;
  padding: 0 12px;
  cursor: pointer;
  transition: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
  /*
     ...and the fade itself is dropped. The labels here are short and
     centred, so there is nothing to fade out, and any future mismatch
     between that hard-coded white and the pill would show as a notch again.
  */
}
.page.home .wn-filters .input-select > .select::before {
  display: none;
}
.page.home .wn-filters .input-select > .select:hover {
  border-color: #e4f0c7;
}
.page.home .wn-filters .input-select > .select {
  /* lib adds .focus while the option list is open. The rounding is held
     by chip-display in lib/form.scss - only the ring is ours. */
}
.page.home .wn-filters .input-select > .select.focus {
  border-color: #8cc300;
  box-shadow: 0 0 0 3px rgba(140, 194, 0, 0.18);
}
.page.home .wn-filters .input-select > .select {
  /*
     The caret.

     `.tiny` replaces lib's normal `arrow_drop_down` with the two-headed
     `unfold_more`; this puts back the single caret every other select in
     the app shows, flipping to `arrow_drop_up` while the list is open.

     lib also pins it with `top: 6px`, a value tuned for its fixed 36px
     .tiny pill. Centring on the box instead keeps it right whatever the
     pill height.
  */
}
.page.home .wn-filters .input-select > .select::after {
  content: "arrow_drop_down";
  top: 50%;
  transform: translateY(-50%);
}
.page.home .wn-filters .input-select > .select {
  /* lib adds .focus while the option list is open */
}
.page.home .wn-filters .input-select > .select.focus::after {
  content: "arrow_drop_up";
}
.page.home .wn-filters .input-select > .select {
  /* the label row lib renders inside .select */
}
.page.home .wn-filters .input-select > .select > div {
  /* full height so align-items can centre against the fixed 34px pill */
  height: 100%;
  justify-content: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  color: #26272b;
  /*
     When an option carries an img, lib wraps its label in
     span.txt and gives THAT span font-size: 16px - a rule the
     parent's font-size cannot reach. Left alone, the country pill
     rendered 16px/38px tall while the month pill was 13px/34px.
  */
}
.page.home .wn-filters .input-select > .select > div > span.txt {
  font-size: 13px;
  font-weight: 700;
  color: #26272b;
  background-color: transparent;
  padding: 0;
  margin: 0;
}
.page.home .wn-filters .input-select > .select {
  /*
     The country flag. Round, matching lib's own .ball and the flags in
     the option list below it - a 22x15 rectangle here read as a different
     control from the circles the dropdown shows.
  */
}
.page.home .wn-filters .input-select > .select .ball {
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  margin: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* keeps a pale flag (France, Poland) off a white pill */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.page.home .wn-filters {
  /*
     The month pill's leading calendar glyph - handoff MonthSelect:
     `<Icon name="calendar" size={15} className="selic"/>` before the label,
     the counterpart of the country pill's flag. It was simply absent, so the
     two pills read as different controls.

     A ::before on the label row, not on .select: lib already owns
     .select::before (the fade, disabled above) and .select::after (the
     caret). The row is the flex container, so the glyph becomes its first
     item and picks up the 9px gap for free.
  */
}
.page.home .wn-filters .input-select[data-name=month] > .select > div::before {
  content: "calendar_today";
  font-family: "Material Symbols Outlined";
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: #9a9da6;
  flex: 0 0 auto;
  /* outline, not filled - the handoff draws it as a stroked icon */
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}
.page.home {
  /* category tiles - horizontal scroll on overflow, one active at a time */
  /*
     overflow-x:auto forces overflow-y to a scroll value - it can never be
     `visible` - so this box clips anything taller than itself. Do NOT add
     overflow-y:hidden: that was what cut the label descenders, and it only makes
     the clipping harder to spot. Measured in the browser at the prototype's
     padding: content 58px, box 58px, no overflow.
  */
}
.page.home .wn-cats {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 2px 14px 12px;
  flex: 0 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.page.home .wn-cats::-webkit-scrollbar {
  display: none;
}
.page.home .wn-cats .t {
  flex: 0 0 calc((100% - 8px) / 4.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 2px 7px;
  /* lib forces height:44px on every <button>; content needs 56.4 and
     silently overflowed. Third place this rule has bitten - see
     .sub-tab and .home-read. */
  height: auto;
  min-height: 0;
  /* transparent on the resting state so the active border can't shift layout */
  border: 2px solid transparent;
  background-color: transparent;
  border-radius: 10px;
  color: #9a9da6;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  transition: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
  /*
     index.html declares `.material-symbols-outlined { width:1em; height:1em;
     overflow:hidden }`. Inside this column flex tile the glyph box then
     inherits flex-shrink:1 and gets COMPRESSED - measured 15.3px instead of
     22px, with the label squeezed to 8.7px from 12.6px, which is what cut
     the icons and labels off at the bottom. Pin both so they cannot shrink.
  */
}
.page.home .wn-cats .t .ic {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  font-size: 22px;
  line-height: 22px;
  overflow: visible;
  color: #9a9da6;
  transition: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.page.home .wn-cats .t .lb {
  flex: 0 0 auto;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.page.home .wn-cats .t:hover {
  color: #4b4d54;
  background-color: #f7f9fb;
}
.page.home .wn-cats .t:hover .ic {
  color: #4b4d54;
}
.page.home .wn-cats .t.on {
  background-color: #f2f8e3;
  color: #5f8500;
  border-color: #95cc05;
}
.page.home .wn-cats .t.on .ic {
  color: #76a300;
}
.page.home .wn-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid #e6e8ec;
  /*
     The prototype shows a 9px scrollbar here (its global
     ::-webkit-scrollbar{width:9px} + a #cdd2d9 thumb). Hiding it - as the app
     does elsewhere - widens the content box by 8.8px and every child of the
     panel then measures wrong. Match the design.
  */
}
.page.home .wn-body::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
.page.home .wn-body::-webkit-scrollbar-thumb {
  background: #cdd2d9;
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.page.home .grp {
  padding: 17px 20px;
}
.page.home .wn-placeholder {
  font-size: 13px;
  color: #9a9da6;
  line-height: 1.5;
}
.page.home .wn-skel {
  height: 14px;
  border-radius: 6px;
  background-color: #f7f9fb;
  margin-top: 10px;
}
.page.home .wn-skel-lg {
  height: 54px;
}
.page.home {
  /* sub-tab segmented control */
}
.page.home .sub-tabs {
  display: flex;
  gap: 3px;
  background-color: #f7f9fb;
  border: 1px solid #e6e8ec;
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 12px;
}
.page.home .sub-tabs .sub-tab {
  flex: 1;
  /* transparent on the resting state so the active border can't shift layout */
  border: 2px solid transparent;
  /* lib forces height:44px on buttons; prototype is content-sized (30.8) */
  height: auto;
  min-height: 0;
  background-color: transparent;
  border-radius: 999px;
  padding: 7px 6px;
  font-size: 12px;
  font-weight: 700;
  color: #6b6e76;
  white-space: nowrap;
  transition: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.page.home .sub-tabs .sub-tab.on {
  background-color: #fff;
  color: #5f8500;
  border-color: #95cc05;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.page.home .sub-tabs .sub-tab:not(.on):hover {
  color: #26272b;
}
.page.home {
  /* ---- Dominance ---- */
}
.page.home .d4-lead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  background-color: #f2f8e3;
  border: 1px solid #e4f0c7;
  border-radius: 12px;
  margin-bottom: 12px;
}
.page.home .d4-ring {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  display: block;
  position: relative;
}
.page.home .d4-lead-tt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.page.home .d4-lbl {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5f8500;
}
.page.home .d4-lead-nm {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #26272b;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page.home .d4-lead-fig {
  flex: 0 0 auto;
  text-align: right;
  padding-left: 12px;
  border-left: 1px solid #e4f0c7;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page.home .d4-lead-fig b {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #76a300;
  font-variant-numeric: tabular-nums;
}
.page.home .d4-lead-sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #9a9da6;
}
.page.home .dom-gap {
  margin-bottom: 14px;
}
.page.home .dg-hd {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 7px;
}
.page.home .dg-hd b {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #26272b;
  white-space: nowrap;
}
.page.home .dg-hd span {
  font-size: 11.5px;
  font-weight: 600;
  color: #9a9da6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page.home {
  /* position: relative - .pr-tip is appended here and positioned against it */
}
.page.home .dg-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}
.page.home .dg-row {
  display: grid;
  grid-template-columns: 100px 1fr 54px;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: 8px;
  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.page.home .dg-row:hover {
  background-color: #f7f9fb;
}
.page.home .dg-nm {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: #4b4d54;
  min-width: 0;
}
.page.home .dg-nm span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page.home .dg-row.base .dg-nm {
  color: #26272b;
  font-weight: 800;
}
.page.home {
  /* centred axis: red grows right, green grows left */
}
.page.home .dg-axis {
  position: relative;
  height: 18px;
}
.page.home .dg-axis::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background-color: #d6d9df;
}
.page.home .dg-axis i {
  position: absolute;
  top: 4px;
  height: 10px;
  border-radius: 3px;
  display: block;
}
.page.home .dg-axis i.up {
  background-color: #e2231a;
  left: 50%;
}
.page.home .dg-axis i.dn {
  background-color: #8cc300;
  right: 50%;
}
.page.home .dg-axis i.base {
  background-color: #26272b;
  left: calc(50% - 2px);
  width: 4px;
}
.page.home .dg-pc {
  text-align: right;
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  /* prototype .dg-row.base .dg-pc = 700 11.5px #9A9DA6 */
}
.page.home .dg-pc.up {
  color: #e2231a;
}
.page.home .dg-pc.dn {
  color: #5f8500;
}
.page.home .dg-pc.base {
  color: #9a9da6;
  font-weight: 700;
  font-size: 11.5px;
}
.page.home .dg-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  color: #c2c5cc;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-top: 1px solid #e6e8ec;
  padding-top: 7px;
  margin-top: 2px;
}
.page.home .gn-text {
  font-size: 13px;
  /* explicit: it otherwise relies on lib's `* { font-weight: 400 }` */
  font-weight: 400;
  line-height: 1.5;
  color: #4b4d54;
  /* origin names: bold, body colour */
}
.page.home .gn-text b {
  font-weight: 800;
  color: #26272b;
}
.page.home .gn-text {
  /* the figures: gold, slightly larger - the numbers are the point */
}
.page.home .gn-text .gn-hi {
  font-weight: 800;
  font-size: 1.12em;
  letter-spacing: -0.01em;
  color: #b7860b;
}
.page.home {
  /* the negotiation note */
}
.page.home .act {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background-color: #f2f8e3;
  border: 1px solid #e4f0c7;
  border-radius: 12px;
  padding: 12px 13px;
  margin-top: 10px;
}
.page.home .act-ic {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 9px;
  background-color: #8cc300;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page.home .act-ic .material-symbols-outlined {
  font-size: 16px;
}
.page.home .act-tt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.page.home .act-eyebrow {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #76a300;
}
.page.home .act-txt {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #3e5406;
}
.page.home {
  /* insight stepper */
}
.page.home .di-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #e6e8ec;
}
.page.home .di-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #9a9da6;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.page.home .di-lbl b {
  color: #4b4d54;
  font-weight: 800;
}
.page.home .di-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
}
.page.home .ddot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background-color: #d6d9df;
  transition: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.page.home .ddot:hover {
  background-color: #9a9da6;
}
.page.home .ddot.on {
  background-color: #8cc300;
  width: 18px;
  border-radius: 99px;
}
.page.home .di-btns {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.page.home .di-arw {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #e6e8ec;
  background-color: #fff;
  color: #6b6e76;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.page.home .di-arw .material-symbols-outlined {
  font-size: 18px;
}
.page.home .di-arw:hover {
  background-color: #f2f8e3;
  border-color: #e4f0c7;
  color: #5f8500;
}
.page.home .di-arw:active {
  transform: scale(0.94);
}
.page.home {
  /*
     Origin flag. Values from the prototype's .oflag: 22x15 base, .sm 20x14,
     .lg 34x23 radius 4. The prototype draws stripes with <i> children; we
     paint questions_options.img instead, so `cover` replaces that.

     Rendered only when the option actually has an image - see flag() in
     home-insights-render.js. There is no empty state by design.
  */
}
.page.home .oflag {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 15px;
  border-radius: 3px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.page.home .oflag.sm {
  width: 20px;
  height: 14px;
}
.page.home .oflag.lg {
  width: 34px;
  height: 23px;
  border-radius: 4px;
}
.page.home {
  /* the leader's flag, centred inside the donut */
}
.page.home .d4-ring .in {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page.home {
  /* prototype .iop-row .oflag - nudged down to sit on the first text line */
}
.page.home .io-row .oflag {
  margin-top: 2px;
}
.page.home {
  /* ---- Presence ---- */
  /*
     prototype .pr-stwrap::after - a white fade over the right edge, shown only
     while the chain list still has something to scroll to. renderPanel() adds
     .more after measuring scrollWidth.
  */
}
.page.home .pr-stwrap {
  position: relative;
  margin-bottom: 8px;
  /*
     white fade at each edge, shown only while the strip can scroll that way.
     Wide enough (56px) that the 28px arrow sits fully on the solid end of the
     gradient, so it reads clearly over the pills scrolling under it.
  */
}
.page.home .pr-stwrap::after, .page.home .pr-stwrap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
  /*
     z-index 1: .pr-stores is position:relative (z-auto), so without this
     the ::before left fade paints UNDER the pills in tree order (::before,
     .pr-stores, ::after) and is invisible, while ::after alone shows. Lift
     both fades above the pills; the arrows (z-index 2) stay above the fades.
  */
  z-index: 1;
}
.page.home .pr-stwrap::after {
  right: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 55%);
}
.page.home .pr-stwrap::before {
  left: 0;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0), #fff 55%);
}
.page.home .pr-stwrap.more::after {
  opacity: 1;
}
.page.home .pr-stwrap.more-l::before {
  opacity: 1;
}
.page.home {
  /*
     Scroll arrows over the strip - reuse .di-arw (28px chevron). z-index 2 so
     they sit above the edge fades (the ::before/::after are z-auto). Fully
     hidden until the strip can scroll that way, and each arrow is tied to the
     SAME class as its fade (.more-l -> left, .more -> right) so the arrow and
     the gradient under it always appear together.
  */
}
.page.home .pr-arw {
  position: absolute;
  /* -1px: nudged up off the strip's optical centre */
  top: 50%;
  transform: translateY(calc(-50% - 1px));
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.07);
  transition: opacity 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.page.home .pr-arw:active {
  transform: translateY(calc(-50% - 1px)) scale(0.94);
}
.page.home .pr-prev {
  left: 0;
}
.page.home .pr-next {
  right: 0;
}
.page.home .pr-stwrap.more-l .pr-prev,
.page.home .pr-stwrap.more .pr-next {
  opacity: 1;
  pointer-events: auto;
}
.page.home .pr-stores {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.page.home .pr-stores::-webkit-scrollbar {
  display: none;
}
.page.home .pr-st {
  flex: 0 0 auto;
  border: 1px solid #e6e8ec;
  background-color: #fff;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 700;
  color: #6b6e76;
  white-space: nowrap;
  transition: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.page.home .pr-st:hover {
  background-color: #f7f9fb;
  color: #26272b;
}
.page.home .pr-st.on {
  background-color: #8cc300;
  border-color: #8cc300;
  color: #fff;
}
.page.home .pr-top {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}
.page.home .pr-cell {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
}
.page.home .pr-cell.band {
  background-color: #f2f8e3;
  border-right: 1px solid #e4f0c7;
}
.page.home .pr-cell.mix {
  background-color: #f7f9fb;
}
.page.home .pr-lbl {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5f8500;
}
.page.home .pr-cell.mix .pr-lbl {
  color: #9a9da6;
}
.page.home {
  /*
     prototype .pr-big = 800 green-600, ls -.03em, white-space nowrap.

     nowrap is the load-bearing part: the prototype never wraps this, it clips.
     Ours was missing it, so at the desktop 25px the string "3,56 – 9,94 €/kg"
     filled the 178px cell to the pixel and wrapped onto two lines - the bug.

     clamp, not the prototype's fixed clamp(20,5.7vw,25): our card is narrower,
     and the /kg suffix makes our string one glyph longer, so the prototype's
     own sizing overflows our cell (measured: it clips 20px at 360). This clamp
     caps at 22 on desktop (34px of headroom, one line) and scales down on a
     phone so it never clips either - +10.5px headroom at 360, +17.7px at 390.
  */
}
.page.home .pr-big {
  font-size: clamp(15px, 4.5vw, 22px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #76a300;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.page.home .pr-sub {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  color: #6b6e76;
}
.page.home .pr-mixrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page.home .pr-mixn {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #26272b;
  font-variant-numeric: tabular-nums;
}
.page.home .pr-mixl {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.page.home .pr-mixl span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #6b6e76;
  font-variant-numeric: tabular-nums;
}
.page.home .pr-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
}
.page.home .pr-dot.up {
  background-color: #8cc300;
}
.page.home .pr-dot.eq {
  background-color: #5a9bd8;
}
.page.home .pr-dot.dn {
  background-color: #e2231a;
}
.page.home .pr-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 2px;
  position: relative;
}
.page.home {
  /*
     The green target band. It is drawn INSIDE each .pr-track (see
     renderPresence): over the track's grey rail and under the coloured bar,
     which is how the prototype layers it. Its inline left/width are percentages
     of the price scale, which is exactly the track's own width - so as a track
     child, top/bottom span the rail and left/width land on the same scale as
     the bars.

     (This replaces a single continuous .pr-lane band drawn behind all the rows:
     that could not coexist with an opaque grey rail on the track, which would
     have hidden it - the prototype's per-track band is the layering that works.)
  */
}
.page.home .pr-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: rgba(140, 194, 0, 0.13);
  border-left: 1px dashed #c3e090;
  border-right: 1px dashed #c3e090;
  pointer-events: none;
  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.page.home {
  /*
     A single-price target (min === max) or origin renders ~0px wide. Give the
     point element a small width and CENTRE it on its value so the overlay sits
     symmetrically around the dot - no one-sided tail. The overlay's 9px floor is
     just over the bar's 6px, so the dot stays inside it with an even margin.
     Non-degenerate ranges never get .pr-point, so they stay left-anchored.
  */
}
.page.home .pr-zone.pr-point {
  min-width: 9px;
  transform: translateX(-50%);
}
.page.home .pr-bar.pr-point {
  transform: translateX(-50%);
}
.page.home .pr-row {
  display: grid;
  grid-template-columns: 96px 1fr 92px;
  align-items: center;
  gap: 7px;
  border-radius: 6px;
  padding: 2px 0;
  position: relative;
  z-index: 1;
}
.page.home .pr-row:hover {
  background-color: rgba(247, 249, 251, 0.75);
}
.page.home .pr-row {
  /*
     Phone: the 96/92px side columns crushed the 1fr track to ~60px. Shrink
     them so the bar gets usable room (name ellipsises, value stays one line).
  */
}
@media screen and (max-width: 775px) {
  .page.home .pr-row {
    grid-template-columns: 76px 1fr 66px;
    gap: 6px;
  }
}
.page.home .pr-nm {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: #4b4d54;
  min-width: 0;
}
.page.home .pr-nm span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page.home .pr-trend {
  font-size: 14px;
  flex: 0 0 auto;
}
.page.home .pr-row.gaining .pr-trend {
  color: #8cc300;
}
.page.home {
  /* prototype .pr-row.up .pr-nm / .pr-val = 800 #26272B */
}
.page.home .pr-row.gaining .pr-nm,
.page.home .pr-row.gaining .pr-val {
  font-weight: 800;
  color: #26272b;
}
.page.home .pr-row.losing .pr-trend {
  color: #e2231a;
}
.page.home .pr-row.holding .pr-trend {
  color: #5a9bd8;
}
.page.home {
  /*
     prototype .pr-track: a grey rounded rail behind the coloured bar. The green
     target band (.pr-zone) and the bar are both absolute children on top of it,
     in that DOM order, so the bar paints over the band which paints over the
     rail. This rail was missing entirely - the bars floated on white.
  */
}
.page.home .pr-track {
  position: relative;
  height: 16px;
  border-radius: 99px;
  background-color: #e9ecf1;
  /*
     Hard clip boundary: the bar and band live in .pr-plot, inset from the caps,
     but this guarantees nothing can ever render beyond the track in either
     direction, whatever the value.
  */
  overflow: hidden;
}
.page.home {
  /*
     The plottable area. Inset a FIXED 12px from each end of the grey track so the
     bar/band always start inside the straight part, clear of the 8px rounded cap,
     with visible grey on both sides at every track width (a % inset can't - it
     shrinks below the cap on a narrow track). Bars and the band are positioned as
     0-100% of THIS box, not the track.
  */
}
.page.home .pr-plot {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  right: 12px;
}
.page.home .pr-bar {
  position: absolute;
  top: 4px;
  height: 8px;
  border-radius: 99px;
  display: block;
  /* above the .pr-zone band that shares the track */
  z-index: 1;
  /*
     Floor in PX, not just the JS 2%: on the crushed mobile track a 2% bar is
     sub-pixel, thinner than the band's fixed 2px dashed border, so the band
     poked out to the right of the bar. 6px guarantees the coloured bar always
     covers (englobes) the band at the same position, at any track width.
  */
  min-width: 6px;
}
.page.home {
  /*
     `color` is set alongside `background-color` on purpose: the .hot ring in
     home-subtabs.scss draws with currentColor, and without this lib's
     `* { color }` reset would resolve that to #2c2c2c instead of the bar's
     own colour.
  */
}
.page.home .pr-row.gaining .pr-bar {
  background-color: #8cc300;
  color: #8cc300;
}
.page.home .pr-row.holding .pr-bar {
  background-color: #5a9bd8;
  color: #5a9bd8;
}
.page.home .pr-row.losing .pr-bar {
  background-color: rgba(226, 35, 26, 0.5);
  color: rgba(226, 35, 26, 0.5);
}
.page.home .pr-bar-empty {
  font-size: 11px;
  color: #c2c5cc;
}
.page.home .pr-val {
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: #6b6e76;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.page.home {
  /* ---- Ins & outs ---- */
}
.page.home .io-cap {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #9a9da6;
  padding-bottom: 9px;
}
.page.home .io-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid #e6e8ec;
  color: #9a9da6;
  font-size: 8.5px;
  font-weight: 800;
  cursor: help;
}
.page.home .io-i:focus {
  outline: 2px solid #8cc300;
  outline-offset: 1px;
}
.page.home .io-sec {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
  /*
     the gone section sits below a dashed separator - but only when there is
     a "new on shelf" section above it to separate it from. With one section
     the rule would draw a stray line straight under the caption.
  */
}
.page.home .io-sec.gone {
  border-top: 1px dashed #e6e8ec;
  padding-top: 10px;
  margin-top: 4px;
}
.page.home {
  /* ...so the section sitting directly under the caption never draws one.
     Sibling selector, not :first-of-type - .io-cap is a div too. */
}
.page.home .io-cap + .io-sec {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.page.home {
  /* prototype .iop-lab = 800 10px / .06em */
}
.page.home .io-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.page.home .io-tag.in {
  background-color: #f2f8e3;
  color: #5f8500;
}
.page.home .io-tag.out {
  background-color: #e9ecf1;
  color: #6b6e76;
}
.page.home {
  /* prototype .iop-row: top-aligned, no vertical padding - the two-line
     identity block sets the row height on its own */
}
.page.home .io-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.page.home .io-row.out .io-nm {
  color: #4b4d54;
}
.page.home .io-tt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page.home .io-nm {
  font-size: 12.5px;
  font-weight: 800;
  color: #26272b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page.home .io-weight {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #9a9da6;
}
.page.home .io-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.page.home .io-pill .material-symbols-outlined {
  font-size: 13px;
}
.page.home .io-pill {
  /* prototype .iop-gap em = 700 10.5px, tinted by the pill it sits in.
     colour: inherit is load-bearing - lib's `* { color }` reset otherwise
     repaints it #2c2c2c and the label stops matching the pill. */
}
.page.home .io-pill em {
  font-style: normal;
  font-weight: 700;
  font-size: 10.5px;
  color: inherit;
}
.page.home .io-pill.up {
  color: #e2231a;
  background-color: #fdeceb;
}
.page.home .io-pill.dn {
  color: #5f8500;
  background-color: #f2f8e3;
}
.page.home .io-pill {
  /* prototype .iop-gap.flat = 700 #9A9DA6 */
}
.page.home .io-pill.neutral {
  color: #9a9da6;
  background-color: #e9ecf1;
  font-weight: 700;
}

@keyframes wn-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(140, 194, 0, 0.45);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(140, 194, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(140, 194, 0, 0);
  }
}
/*
    Presence + Ins & outs — values measured from the running prototype
    (`python -m http.server` in the handoff's design/ folder), not transcribed
    from its CSS. Imported after ./home and ./home-panel.

    The prototype's classes are .pr-* and .iop-*; ours are .pr-* and .io-*.
*/
/*
   ---------- Chart tooltip (.pr-tip) ----------

   The dark card used by BOTH charts - Dominance rows, Presence rows and the
   Presence target band. It is not the app's shared #tooltip: that one is a
   single flat line and the design calls for a titled card with a status badge,
   a two-column definition list and a footer note. #tooltip is still used for
   the plain Ins & outs "i" hint, where a flat line is the right thing.

   Every colour below is written out. Inheriting white from .pr-tip does not
   work - lib's `* { color }` repaints each descendant #2c2c2c, which on this
   background is invisible.
*/
.page.home .pr-tip {
  position: absolute;
  z-index: 20;
  min-width: 168px;
  /*
     width: max-content, which the prototype does NOT have - and it is the
     one deliberate departure in this component.

     An absolutely positioned box with only `left` set gets
     containingBlock - left as its available width. Centred over a 357px
     chart that is 178.5px, while the card's natural width is 184.9px. The
     prototype is squeezed by the same 6.4px and wraps a row of its own
     definition list; measured side by side the two cards are identical to
     0.02px, so the wrap is not a design choice, it is the mock coming up
     short. Letting the card size to its content gives the single-line rows
     the design draws. The cap stops a long origin list in the band tooltip
     from running the width away.
  */
  width: max-content;
  max-width: 240px;
  padding: 9px 11px;
  border-radius: 9px;
  background-color: #26272b;
  box-shadow: 0 8px 22px rgba(16, 24, 32, 0.22);
  pointer-events: none;
  transform: translate(-50%, -100%);
  animation: pr-tip-in 0.13s cubic-bezier(0.2, 0.7, 0.3, 1);
  /* the caret - a square rotated behind the card's bottom edge */
}
.page.home .pr-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background-color: #26272b;
  transform: translateX(-50%) rotate(45deg);
}
.page.home .pr-tip {
  /* flipped under the row when there is no room above it */
}
.page.home .pr-tip.below {
  transform: translate(-50%, 0);
  animation: pr-tip-in-below 0.13s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.page.home .pr-tip.below::after {
  bottom: auto;
  top: -4px;
}
.page.home .pr-tip {
  /*
     padding: 0 is load-bearing. lib/index.scss:119 gives every h1-h6
     `padding: $h-padding $h-padding $h-padding 0`, which added 10px above
     and below this header - a 17px line box measured 37px and the whole
     card came out 121px against the design's 101px.
  */
}
.page.home .pr-tip h5 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 6px;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
  /* the status badge, pushed to the right edge of the header */
}
.page.home .pr-tip h5 b {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 99px;
  background-color: rgba(255, 255, 255, 0.16);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.page.home .pr-tip h5 b.up {
  background-color: #8cc300;
  color: #10242a;
}
.page.home .pr-tip h5 b.dn {
  background-color: #e2231a;
  color: #fff;
}
.page.home .pr-tip dl {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
}
.page.home .pr-tip dt {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}
.page.home .pr-tip dd {
  margin: 0;
  text-align: right;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  /* the trailing unit inside a value */
}
.page.home .pr-tip dd i {
  margin-left: 3px;
  font-style: normal;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
}
.page.home .pr-tip dd .g {
  color: #a6d33c;
}
.page.home .pr-tip dd .r {
  color: #ff8a82;
}
.page.home .pr-tip dd {
  /* inline delta pill next to an observation count */
}
.page.home .pr-tip dd .dl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 7px;
  padding: 1px 5px 1px 4px;
  border-radius: 99px;
  background-color: rgba(255, 255, 255, 0.14);
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.72);
}
.page.home .pr-tip dd .dl.up {
  background-color: rgba(140, 194, 0, 0.28);
  color: #c8e86a;
}
.page.home .pr-tip dd .dl.dn {
  background-color: rgba(226, 35, 26, 0.3);
  color: #ff9c95;
}
.page.home .pr-tip .foot {
  margin: 7px 0 0;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.page.home {
  /* Dominance highlights the whole row... */
}
.page.home .dg-row.hot {
  background-color: #f7f9fb;
}
.page.home {
  /* ...Presence rings the bar instead, so the price position stays readable */
}
.page.home .pr-row.hot .pr-bar {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px currentColor;
}
.page.home {
  /*
     Hovering the target band itself: the band lights up and everything else
     recedes, so the reader sees which origins fall inside it. Toggled by the
     zone tooltip.
  */
}
.page.home .pr-rows.zonehot .pr-zone {
  background-color: rgba(140, 194, 0, 0.3);
  border-color: #8cc300;
  box-shadow: 0 0 0 1px rgba(140, 194, 0, 0.25);
}
.page.home .pr-rows.zonehot .pr-bar {
  opacity: 0.28;
}
.page.home .pr-rows.zonehot .pr-row.losing .pr-bar {
  opacity: 0.18;
}
.page.home .pr-rows.zonehot .pr-nm,
.page.home .pr-rows.zonehot .pr-val {
  opacity: 0.55;
}
.page.home {
  /* ---------- Presence ---------- */
  /* prototype .pr-st is 26.8px tall; lib forces height:44px on every <button> */
}
.page.home .pr-st {
  height: auto;
  min-height: 0;
  padding: 5px 11px;
}
.page.home .pr-stores {
  gap: 5px;
  padding-bottom: 2px;
}
.page.home {
  /* prototype .pr-hd b = 800 11px #9a9da6 ls .05em */
}
.page.home .pr-hd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.page.home .pr-hd b {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9a9da6;
  white-space: nowrap;
}
.page.home {
  /*
     "target price range" floating above the band. The three cells mirror the
     .pr-row grid so the label tracks the band's centre.
  */
}
.page.home .pr-zonetag {
  display: flex;
  gap: 7px;
  margin-bottom: 4px;
  /* spacer = name column + gap + arrow column, so .zt lands exactly on
     .pr-track. Derived, never typed - see the note in home.scss. */
}
.page.home .pr-zonetag .sp {
  flex: 0 0 117px;
}
.page.home .pr-zonetag .end {
  flex: 0 0 92px;
}
.page.home .pr-zonetag .zt {
  flex: 1;
  position: relative;
  height: 13px;
}
.page.home .pr-zonetag .zt > span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5f8500;
  white-space: nowrap;
}
.page.home {
  /* the trend arrow is its own cell in the prototype, not part of the name */
}
.page.home .pr-row {
  grid-template-columns: 96px 14px 1fr 92px;
  gap: 7px;
}
.page.home .pr-tr {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page.home .pr-tr .material-symbols-outlined {
  font-size: 14px;
}
.page.home {
  /* text green, not the brand green - $a-color is too light at 13px */
}
.page.home .pr-row.gaining .pr-tr {
  color: #76a300;
}
.page.home .pr-row.losing .pr-tr {
  color: #e2231a;
}
.page.home .pr-row.holding .pr-tr {
  color: #5a9bd8;
}
.page.home {
  /* prototype .pr-scale = 700 9.5px #9a9da6 ls .03em, b 800 #6b6e76 */
}
.page.home .pr-scale {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #9a9da6;
}
.page.home .pr-scale span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.page.home .pr-scale {
  /* the "Market min" / "Market max" label - wider tracking than the value.
     colour: inherit is load-bearing. This was a bare text node inheriting
     $home-fg-4; the moment it became an element, lib's `* { color }` reset
     painted it #2c2c2c and the label came out DARKER than its own value. */
}
.page.home .pr-scale em {
  font-style: normal;
  letter-spacing: 0.07em;
  color: inherit;
}
.page.home .pr-scale b {
  font-size: 9.5px;
  font-weight: 800;
  color: #6b6e76;
  font-variant-numeric: tabular-nums;
}
.page.home {
  /* the €/kg suffix is printed once, after the pair.
     colour: inherit is load-bearing - without it lib's `* { color }` reset
     repaints this em #2c2c2c (black) while the numbers beside it stay green.
     Exactly the trap already fixed on .pr-scale em and .io-pill em; this one
     was missed, so the €/kg rendered black against a green range. */
}
.page.home .pr-big em {
  font-style: normal;
  font-size: 0.62em;
  font-weight: 800;
  margin-left: 2px;
  color: inherit;
}
.page.home {
  /* ---------- Ins & outs ---------- */
  /* prototype .iop: bordered box holding the caption and both sections */
}
.page.home .io-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 13px 13px;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
}
.page.home {
  /* prototype .iop-h = 800 9px #9a9da6 ls .1em uppercase */
}
.page.home .io-cap {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a9da6;
  /* anchor for the .io-tip popover */
  position: relative;
}
.page.home {
  /*
     The baseline chip: the market average the ±% gap chips are computed
     against, plus the month it comes from. Its OWN line under the caption
     (align-self flex-start so it sizes to content in the column), and the same
     grey pill as .io-pill.neutral ($home-bg-2 / $home-fg-4) but with a DASHED
     border to read as a reference rather than a value. Casing / letter-spacing
     reset off the uppercase .io-cap. em children forced upright - lib italics
     every bare em.
  */
}
.page.home .io-ref {
  align-self: flex-end;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background-color: rgba(233, 236, 241, 0.5);
  border: 1px dashed #d6d9df;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.page.home .io-ref em {
  font-style: normal;
}
.page.home .io-ref .io-ref-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9a9da6;
}
.page.home .io-ref b {
  font-size: 11.5px;
  font-weight: 800;
  color: #4b4d54;
}
.page.home .io-ref .io-ref-mo {
  font-size: 10px;
  font-weight: 700;
  color: #9a9da6;
}
.page.home {
  /*
     The "Price gap" info popover - the design's .iop-tip. A titled dark card,
     NOT the app's flat single-line #tooltip: each green label sits above the
     sentence that explains it. Shown on hover / keyboard focus of the caption,
     and toggled by a tap on mobile (the .tipopen class, set in the JS).

     colour is written out on both b and span: lib's `* { color }` reset would
     otherwise repaint them #2c2c2c, invisible on this dark card - the same trap
     as .pr-tip. text-transform / letter-spacing are reset off the uppercase
     .io-cap they sit inside.
  */
}
.page.home .io-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: 246px;
  padding: 9px 10px;
  border-radius: 10px;
  background-color: #16170f;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 0.16s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.16s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0.16s;
}
.page.home .io-tip b {
  display: block;
  font-weight: 800;
  letter-spacing: 0;
  color: #a6d33c;
}
.page.home .io-tip span {
  display: block;
  color: #fff;
}
.page.home .io-tip b + span {
  margin-bottom: 7px;
}
.page.home .io-tip span:last-child {
  margin-bottom: 0;
}
.page.home .io-cap:hover .io-tip,
.page.home .io-cap:focus-within .io-tip,
.page.home .io-cap.tipopen .io-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.page.home .io-sec {
  gap: 7px;
  padding-bottom: 0;
}
.page.home .io-sec.gone {
  border-top: 1px dashed #e6e8ec;
  padding-top: 11px;
  margin-top: 0;
}
.page.home {
  /* see home-panel.scss - no separator above the first section, whether it
     follows the caption directly or the baseline chip that sits between them */
}
.page.home .io-cap + .io-sec,
.page.home .io-ref + .io-sec {
  border-top: 0;
  padding-top: 0;
}
.page.home {
  /*
     prototype .iop-lab: pill with a circled sign badge, then the label, then
     the count. padding is asymmetric (8px left, 10px right) to sit the badge
     against the edge.
  */
}
.page.home .io-tag {
  gap: 6px;
  padding: 3px 10px 3px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.page.home .io-tag i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 99px;
  background-color: #8cc300;
  color: #fff;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  line-height: 14px;
}
.page.home .io-tag b {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.page.home .io-tag.out i {
  background-color: #c2c5cc;
}
.page.home .io-row {
  gap: 9px;
}

/* .pr-tip entry - the card rises 4px into place. Keyframes cannot be nested. */
@keyframes pr-tip-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-100% + 4px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -100%);
  }
}
@keyframes pr-tip-in-below {
  from {
    opacity: 0;
    transform: translate(-50%, -4px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
/*
    Home - mobile behaviour for the insights panel (spec 4.2 / 5.4).

    On desktop the panel is always open beside the feed. Below 934px it becomes a
    collapsible card at the top of the feed, with a category bottom sheet, prev /
    next arrows and a dot bar.

    Imported after ./home and ./home-panel - it uses their $home-* variables.
*/
/* the mobile-only chrome is hidden on desktop */
.page.home .wn-m-sub,
.page.home .wn-m-chev,
.page.home .wn-m-nav,
.page.home .wn-m-dots,
.page.home .wn-m-scrim {
  display: none;
}

@media screen and (max-width: 934px) {
  .page.home {
    /*
       The header and the filter row are two separate BANDS, each with its own
       full-width rule under it, not one padded box - handoff `.wn-m` (a
       bordered card) sitting on `.wn-m-panel > .wn-m-fixed`. The padding
       therefore moves off .wn-hd and onto each band, or the rules would be
       inset by 16px and the panel read as one undivided slab.
    */
  }
  .page.home .wn-hd {
    padding: 0;
  }
  .page.home {
    /* handoff .wn-m-toggle - the whole header row is the tap target */
  }
  .page.home .wn-hd-top {
    cursor: pointer;
    padding: 14px 16px;
    min-height: 44px;
    /* the header is the only part that stays in flow, so it carries no gap */
    margin-bottom: 0;
    gap: 12px;
  }
  .page.home {
    /* 38/11, not the desktop 40/12 (handoff .wn-m-mark) */
  }
  .page.home .wn-hd-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background-size: 24px 24px;
  }
  .page.home .wn-hd-tt {
    gap: 2px;
    /* desktop reserves 86px for the right-aligned pill; mobile has it inline */
    padding-right: 0;
  }
  .page.home .wn-title {
    font-size: 16px;
  }
  .page.home {
    /* back in flow, on the title line, where the mobile design puts it */
  }
  .page.home .wn-live {
    position: static;
    transform: none;
  }
  .page.home {
    /* the product line is replaced by the collapsed/open subtitle */
  }
  .page.home .wn-hd-prod {
    display: none;
  }
  .page.home .wn-m-sub {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #6b6e76;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .page.home .wn-m-chev {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background-color: transparent;
    /* green-600 is the TEXT/icon green; $a-color (green-500) is for fills */
    color: #76a300;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .page.home .wn-m-chev .material-symbols-outlined {
    font-size: 24px;
  }
  .page.home {
    /* collapsed: only the header shows */
  }
  .page.home .wn-filters,
  .page.home .wn-cats,
  .page.home .wn-m-nav,
  .page.home .wn-body,
  .page.home .wn-m-dots {
    display: none;
  }
  .page.home .wn.open {
    /* the seam under the header band, drawn by .wn-m's own bottom border in
       the handoff. Only while open - collapsed, the card is one clean box. */
  }
  .page.home .wn.open .wn-hd-top {
    border-bottom: 1px solid rgba(230, 232, 236, 0.8);
  }
  .page.home .wn.open {
    /* handoff .wn-m-fixed */
  }
  .page.home .wn.open .wn-filters {
    display: flex;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(230, 232, 236, 0.8);
    background-color: rgba(255, 255, 255, 0.55);
  }
  .page.home .wn.open .wn-cats {
    display: flex;
  }
  .page.home .wn.open .wn-body {
    display: flex;
  }
  .page.home .wn.open .wn-m-nav {
    display: flex;
  }
  .page.home .wn.open .wn-m-dots {
    display: flex;
  }
  .page.home .wn.open .wn-m-chev {
    transform: rotate(180deg);
  }
  .page.home {
    /*
       On mobile the category row is replaced by the title + arrows, so the
       horizontal tile strip is hidden even when open.
    */
  }
  .page.home .wn.open .wn-cats {
    display: none;
  }
  .page.home {
    /*
       handoff .catpick - `padding:11px 16px 10px; gap:6px` and, like the
       filter band above it, its own translucent fill and a full-width rule
       underneath. It had `12px 16px 0` and no rule at all, so the row floated
       against the body with no bottom padding and nothing separating them.
    */
  }
  .page.home .wn-m-nav {
    align-items: center;
    gap: 6px;
    padding: 11px 16px 10px;
    border-bottom: 1px solid rgba(230, 232, 236, 0.8);
    background-color: rgba(255, 255, 255, 0.55);
  }
  .page.home {
    /*
       handoff .catpick-btn: a ROW - the category's icon tile, then the
       name/count column. It was a bare column before, with no tile at all.
    */
  }
  .page.home .wn-m-cat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    /*
       justify-content is NOT optional. lib's bare `button` rule
       (button.scss:18) sets `justify-content: center` along with
       `padding: 0 30px` and `height: 44px`; zeroing the padding and the
       height but not the alignment left the icon tile and the name floating
       in the middle of the row - measured, the tile sat at x=99 instead of
       the card's content edge at 33.
    */
    justify-content: flex-start;
    gap: 10px;
    padding: 0;
    border: 0;
    background-color: transparent;
    text-align: left;
    height: auto;
    min-height: 44px;
  }
  .page.home {
    /* handoff .catpick-ic */
  }
  .page.home .wn-m-cat-ic {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background-color: #f2f8e3;
    color: #5f8500;
  }
  .page.home .wn-m-cat-ic .material-symbols-outlined {
    font-size: 16px;
  }
  .page.home {
    /* handoff .catpick-txt */
  }
  .page.home .wn-m-cat-tt {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
  .page.home .wn-m-cat-nm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #26272b;
    /* handoff .catpick-nm svg: 15px and GREY, not the brand green */
  }
  .page.home .wn-m-cat-nm .material-symbols-outlined {
    font-size: 15px;
    color: #9a9da6;
  }
  .page.home .wn-m-cat-sub {
    font-size: 11px;
    font-weight: 700;
    color: #9a9da6;
  }
  .page.home .wn-m-arrows {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
  }
  .page.home {
    /*
       handoff .catpick-arrow: 30x30 with the STRONG border, a 16px glyph, and
       a filled grey disabled state - not `opacity: .4`.

       It was 44x44, which spec 5.9's "touch targets are at least 44x44"
       licensed but the design does not draw. The design wins: the two circles
       are a fifth of the row's width at 44 and dwarfed the category name.
    */
  }
  .page.home .wn-m-arrows .di-arw {
    width: 30px;
    height: 30px;
    border-color: #d6d9df;
  }
  .page.home .wn-m-arrows .di-arw .material-symbols-outlined {
    font-size: 16px;
  }
  .page.home .di-arw[disabled] {
    opacity: 1;
    cursor: default;
    color: #c2c5cc;
    background-color: #f7f9fb;
    border-color: #e6e8ec;
  }
  .page.home .di-arw[disabled]:hover {
    color: #c2c5cc;
    background-color: #f7f9fb;
    border-color: #e6e8ec;
  }
  .page.home {
    /*
       Dots live inside the foot of the card - never a floating bar (spec 5.4).

       handoff .wn-m-dotbar: a TIGHT centred cluster - 7px dots, 7px apart, the
       active one a 20px pill - on a translucent band with a rule above it.

       They were 44x44 buttons carrying the dot in an ::after, so six of them
       spanned 294px and spread right across the card instead of clustering,
       and they matched neither the design nor .ddot, the identical control the
       desktop insight stepper uses. The visual is now a real <i> CHILD - the
       button only supplies the hit area - which is also what keeps it off a
       pseudo-element inside a form control.

       The 8px vertical / 3px horizontal padding is the hit area: it gives each
       dot a 13x23 target while leaving exactly the design's 7px between two
       visible dots (3 + 1 + 3).
    */
  }
  .page.home .wn-m-dots {
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 9px 16px 11px;
    border-top: 1px solid rgba(230, 232, 236, 0.8);
    background-color: rgba(255, 255, 255, 0.55);
  }
  .page.home .wn-m-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    /* lib forces height:44px on every <button> */
    height: auto;
    min-height: 0;
    padding: 8px 3px;
    border: 0;
    background-color: transparent;
  }
  .page.home .wn-m-dot i {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #d6d9df;
    transition: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .page.home .wn-m-dot.on i {
    width: 20px;
    border-radius: 999px;
    background-color: #8cc300;
  }
  .page.home {
    /*
       z-index 0 in this band. Between 776 and 934 the panel is still IN the
       column, not floating, and the analyze rail (z-index 3) is still on
       screen - a full-viewport scrim over it would grey out navigation that
       the panel is not covering. The modal treatment starts at 775, where the
       card goes `position: fixed` - see the 775 block at the end of the file.
    */
  }
  .page.home .wn-m-scrim {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-color: rgba(20, 24, 20, 0.16);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0.3s;
  }
  .page.home .wn-m-scrim.on {
    opacity: 1;
    visibility: visible;
  }
  .page.home .wn {
    position: relative;
    z-index: 1;
  }
  .page.home {
    /*
       Open, the card leaves the flow and OVERLAYS the feed (spec 4.2.2). Its
       .home-side parent is position:relative and is frozen at the collapsed
       card's height by the toggle handler, so the feed does not jump.

       dvh, not vh: on mobile browsers vh is the tallest-possible viewport, so
       the bottom of the card - the dot bar - hid behind the URL bar.
    */
  }
  .page.home .wn.open {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /*
       132 = the card's top offset at this width (122, with the 96px bar)
       plus a 10px breathing gap at the bottom. Below 775 the bottom mobile menu
       appears and this grows - see the 775 block at the end of the file.

       vh line first as the fallback: dvh only exists on Safari 15.4+ / iOS
       15.4+. On an older iPhone the dvh calc is invalid, the whole
       declaration is dropped, and the card loses its cap and overruns the
       bottom. The vh cap keeps it bounded there; browsers that know dvh
       override it with the accurate line below.
    */
    max-height: calc(100vh - 132px);
    max-height: calc(100dvh - 132px);
    /*
       Open, the card is GLASS - handoff `.wn-m-panel`, a 72% white fill over
       a 22px blur. The header keeps a solid fill (the handoff draws it as
       its own `.wn-m` card sitting on top of the panel), and the two bands
       and the dot bar keep their 55% fill, so the panel reads as a stack of
       translucent layers rather than one opaque slab.
    */
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
  }
  .page.home .wn.open .wn-hd-top {
    background-color: #fff;
  }
  .page.home {
    /*
       handoff `.mcar-view` + `.mcar-card`: the sub-tabs and everything under
       them are a DETACHED card floating on the glass, not content sitting
       flush against the panel's edges. The body supplies the 14px inset and
       .grp is the card itself.
    */
  }
  .page.home .wn.open .wn-body {
    padding: 14px;
  }
  .page.home .wn.open .wn-body > .grp {
    padding: 13px 16px 15px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.07);
  }
  .page.home {
    /*
       .wn is already a flex column, so the body simply absorbs whatever is left
       once the header, the category nav and the dot bar have taken their share.
       That keeps the dot bar on screen at any height without hard-coding the
       chrome (the handoff hard-codes `calc(100dvh - 372px)`; this does not need
       maintaining when the header changes).
    */
  }
  .page.home .wn.open .wn-body {
    flex: 1 1 auto;
    min-height: 120px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page.home .wn.open .wn-hd,
  .page.home .wn.open .wn-m-nav,
  .page.home .wn.open .wn-m-dots {
    flex: 0 0 auto;
  }
  /*
     Below 776 menu.scss shows .bottom-mobile-menu: fixed to the bottom, 81px
     tall (80px of link + its 1px top border). It is not part of the flow, so
     nothing else knows it is there - without this the card ran underneath it
     and the dot bar, the one control that has to stay visible, was hidden.
  */
}
@media screen and (max-width: 934px) and (max-width: 775px) {
  .page.home {
    /*
       The card FLOATS below 775: fixed under the app bar so it stays reachable
       while the feed scrolls beneath it, collapsed or open.

       left/right 16px is the page gutter at this width - home.scss zeroes
       #content's padding here and gives the whole 16px to .page.home, so the
       card, the feed and the app bar all share one edge. top 88 = the 70px
       bar + an 18px gap, keeping the position it had in the flow.

       .home-side keeps a min-height equal to the collapsed card, set by
       applyOpenState(), so the feed still starts below it at scroll top.
    */
    /*
       Both states are fixed. `.wn.open` has to repeat `position` because the
       `.wn.open { position: absolute }` rule in the 934 block above is one
       class more specific and would otherwise win, dropping the open card
       back into the scroll flow.

       88 card top + a 10px gap at the bottom = 98. It used to reserve the
       bottom mobile menu's 81px as well; the menu now slides out of the way
       while the panel is open, so the card gets that height back - 81px more
       of the insight on screen.
    */
    /*
       env(safe-area-inset-bottom): 100dvh spans the whole screen INCLUDING
       the area behind the home indicator, so a card capped at `100dvh - 86px`
       ends 10px above the physical bottom - i.e. under the indicator, which
       crops the dot bar on phones that have one. Subtract the inset so the
       10px gap sits above the safe area instead. Falls back to 0 elsewhere.
    */
  }
  .page.home .wn,
  .page.home .wn.open {
    position: fixed;
    top: 88px;
    left: 16px;
    right: 16px;
    /* vh fallback for pre-15.4 iOS - see the 934 block above */
    max-height: calc(100vh - 98px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 98px - env(safe-area-inset-bottom, 0px));
    transition: top 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .page.home {
    /*
       Fixed, so .home-layout's padding cannot move it - the card has to be
       offset by the same 52px itself when the search bar is out, and its cap
       tightens by the same amount or it would run under the bottom menu.
    */
  }
  .page.home .home-appbar.searching ~ .home-layout .wn {
    top: 140px;
    /* vh fallback for pre-15.4 iOS - see the 934 block above */
    max-height: calc(100vh - 150px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 150px - env(safe-area-inset-bottom, 0px));
  }
  .page.home {
    /*
       Open, the panel is MODAL: the scrim outranks the app's own chrome -
       the app bar and the bottom mobile menu, both z-index 2 - and blurs
       what shows through it (handoff `.wn-m-scrim`, `blur(1.5px)`).

       The handoff gives neither .appbar nor .tabbar a z-index, so its
       `.wn-m-wrap.open { z-index: 40 }` puts the scrim over both. Ours sat
       at 0, under everything, which left the navigation lit up and fully
       tappable while a modal panel covered the page. This is the only
       overlay in the app that does this - it is scoped to .page.home and to
       this breakpoint, where the card is `position: fixed` and the rail is
       gone.

       It can cover the whole viewport because the bottom mobile menu - the
       one thing inside #content that outranked it - slides away while the
       panel is open, see below. Nothing else outside .page.home paints over
       this area: the only other z-indexed siblings are #analyze-menu, which
       is off-screen below 775, and #menu, which is a transparent 393x20
       strip at the very top.
    */
  }
  .page.home .wn-m-scrim {
    z-index: 50;
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
  }
  .page.home {
    /* the one thing above the scrim */
  }
  .page.home .wn,
  .page.home .wn.open {
    z-index: 51;
  }
  .page.home {
    /*
       The product menu opens from the card's mark but its .submenu lives
       inside .home-appbar, which is a z-index:2 stacking context - so the
       menu is trapped at level 2 whatever its own z-index. Collapsed that is
       fine (the card is z-index:1, below it), but the OPEN panel goes modal
       at z-index:51 and paints over the trapped menu. While the menu is open,
       lift the whole app-bar context above the panel so its submenu shows.
    */
  }
  .page.home .home-appbar:has(.submenu.opened) {
    z-index: 52;
  }
  /*
     The bottom mobile menu slides out of the way while the panel is open, so
     the card can use the bottom 81px of the screen.

     It has to LEAVE, not just be painted over. Both the scrim and the card
     live six levels inside .page.home, and on iOS WebKit makes that
     scrolling container a stacking context - their z-indexes are trapped at
     .page.home's own level 0, which loses to this menu's `z-index: 2`.
     Reproduced in Blink by forcing `.page.home { isolation: isolate }`:
     elementFromPoint over the menu returns .wn-m-scrim without it and the
     menu's own link with it. So no z-index given to the card can put it over
     a menu that is still there - the menu has to move.

     A sibling selector, not a nested one: .bottom-mobile-menu is a child of
     #content alongside .page.home (index 30 against 3), not of the page.
     `:has()` is the same dependency the #content padding rule in home.scss
     already carries; without it the menu simply stays put.
  */
  .page.home:has(.wn.open) ~ .bottom-mobile-menu {
    transform: translateY(100%);
    pointer-events: none;
  }
  /*
     A bare .bottom-mobile-menu selector from a Home file, deliberately:
     there is no way to scope it, because .page.home is present in the DOM on
     every page (index.html ships all of them) so any sibling combinator
     matches everywhere. It is inert outside Home - nothing else in the app
     transforms this element.
  */
  .bottom-mobile-menu {
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
}
/*
   ---- the design's own mobile type scale ----

   Transcribed verbatim from the handoff prototype's ONE media query,
   `@media (max-width:859px)`. Everything the panel renders was built at the
   DESKTOP scale and that scale was never stepped down, so on a phone the
   dominance card ran 82px tall against the design's 70 and "DOMINANT ORIGIN"
   wrapped onto two lines. Measured in the served prototype at 390px:
   ring 46 (ours 54), .d4-lbl 9px/.07em (9.5/.09), name 17 (19), figure 23 (26).

   859, not the 934 the mobile CARD starts at: that is the breakpoint the
   design uses, and between 860 and 934 our card is still ~820px wide, where
   the desktop scale is the right one.
*/
@media screen and (max-width: 859px) {
  .page.home .d4-lead {
    gap: 11px;
    padding: 11px 12px;
  }
  .page.home {
    /* the svg carries width/height ATTRIBUTES of 54; its viewBox rescales */
  }
  .page.home .d4-ring,
  .page.home .d4-ring svg {
    width: 46px;
    height: 46px;
  }
  .page.home {
    /*
       The ring shrinks to 46 here but .oflag.lg did not, so the flag's corners
       (half-diagonal 20.5px) poked 1.4px over the green arc, whose inner edge
       is now at radius 19.2px. Shrink the flag with the ring: 28x19 gives a
       2.2px clearance, matching the desktop ring's. Measured in the browser.
    */
  }
  .page.home .d4-ring .in .oflag.lg {
    width: 28px;
    height: 19px;
    border-radius: 3px;
  }
  .page.home .d4-lbl {
    font-size: 9px;
    letter-spacing: 0.07em;
  }
  .page.home .d4-lead-nm {
    font-size: 17px;
  }
  .page.home .d4-lead-fig {
    padding-left: 10px;
  }
  .page.home .d4-lead-fig b {
    font-size: 23px;
  }
  .page.home {
    /* the qualifier drops to its own line rather than being squeezed */
  }
  .page.home .dg-hd {
    flex-wrap: wrap;
    gap: 2px 7px;
  }
  .page.home .dg-row {
    grid-template-columns: 88px 1fr 50px;
    gap: 8px;
  }
  .page.home .dg-nm {
    font-size: 12px;
  }
  .page.home .dg-pc {
    font-size: 12.5px;
  }
  .page.home .dg-scale {
    font-size: 9px;
  }
}
/* ---- "Jump to a category" bottom sheet ---- */
#wn-sheet {
  /*
     Appended to <body>, so it is OUTSIDE .page.home and inherits neither the
     Manrope face nor the `line-height: normal` that .page.home restores. Without
     the line-height the Material Symbols glyphs in the cells laid out at HEIGHT
     ZERO - measured 20px wide, 0px tall.
  */
  font-family: "Manrope", Inter, sans-serif;
  line-height: normal;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
}

#wn-sheet .wn-sheet-scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(20, 24, 20, 0.32);
}

#wn-sheet .wn-sheet-box {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-radius: 20px 20px 0 0;
  /* 10px top: the grab handle now supplies the visual breathing room above it */
  padding: 10px 14px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.12);
  max-height: 80vh;
  overflow-y: auto;
}

#wn-sheet .wn-sheet-hd {
  /* 13px, per the handoff's .catsheet-in h4 - it is a sheet label, not a title */
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #26272b;
  padding-bottom: 12px;
}

#wn-sheet .wn-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/*
   Icon tile on the LEFT, name and headline stacked to its right - the layout in
   mob-catsheet-4.png. It was a single column before, which stacked the icon on
   top of the text and matched nothing.

   `height: auto` is not optional: these cells are <button>s, and lib's bare
   `button` rule sets a fixed height, which pinned them to 44px while their
   content needed ~70 and let the headline spill out of the bottom border.
*/
#wn-sheet .wn-sheet-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  height: auto;
  min-height: 44px;
  min-width: 0;
  overflow: hidden;
  padding: 10px 11px;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  background-color: #fff;
  text-align: left;
}
#wn-sheet .wn-sheet-cell .material-symbols-outlined {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  background-color: #f1f4f7;
  color: #6b6e76;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#wn-sheet .wn-sheet-cell.on {
  border-color: #8cc300;
  background-color: #f2f8e3;
}
#wn-sheet .wn-sheet-cell {
  /* the active tile inverts - filled green with a white glyph */
}
#wn-sheet .wn-sheet-cell.on .material-symbols-outlined {
  background-color: #8cc300;
  color: #fff;
}

/* the text column; min-width:0 is what lets the headline ellipsis engage */
#wn-sheet .wn-sheet-tt {
  min-width: 0;
  flex: 1;
}

#wn-sheet .wn-sheet-nm {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #26272b;
}

#wn-sheet .wn-sheet-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: #9a9da6;
  /* one line, clipped - never a two-line cell (handoff .catcell-tt em) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the drag handle at the top of the sheet (handoff .catsheet-grab) */
#wn-sheet .wn-sheet-grab {
  width: 38px;
  height: 4px;
  flex: 0 0 auto;
  margin: 0 auto 12px;
  border-radius: 999px;
  background-color: #d6d9df;
}

/*
    Price evolution card of the reference modal (price-evolution-render.js).
    Built from the prototype's PriceEvolutionCard / MetricToggle / YearLegend / PriceChart tooltip
    (14-08-2026 V1), measured in the rendered prototype. Colours reuse the $home-* design tokens
    declared in home.scss (same design system).

    The prototype writes type with the `font:` shorthand, i.e. line-height `normal` (1.366 for its
    font); this app sets `line-height: 1` on html and on buttons, so the value is restated here to
    keep the prototype's boxes.
*/
.pe-card {
  line-height: 1.366;
}
.pe-card .pe-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.pe-card .pe-titles {
  min-width: 0;
}
.pe-card .pe-title {
  font-size: 18px;
  font-weight: 700;
  color: #26272b;
  padding: 0;
  margin: 0;
  line-height: 1.366;
}
.pe-card .pe-sub {
  font-size: 13px;
  font-weight: 500;
  color: #6b6e76;
  margin-top: 3px;
  line-height: 1.366;
}
.pe-card .pe-sub span, .pe-card .pe-sub b {
  font-size: 13px;
  font-weight: 500;
  color: #6b6e76;
}
.pe-card .pe-sub .pe-muted {
  color: #9a9da6;
}
.pe-card .pe-sub b {
  font-weight: 700;
  color: #26272b;
}
.pe-card .pe-nowrap {
  white-space: nowrap;
}
.pe-card .pe-metric {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background-color: #e9ecf1;
  border: 1px solid #e6e8ec;
  border-radius: 999px;
}
.pe-card .pe-metric button, .pe-card .pe-metric button:hover, .pe-card .pe-metric button:focus {
  height: auto;
  min-height: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.366;
  white-space: nowrap;
  color: #6b6e76;
  background-color: transparent;
  transition: background-color 0.16s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.pe-card .pe-metric button.active, .pe-card .pe-metric button.active:hover {
  color: #ffffff;
  background-color: #8cc300;
}
.pe-card .pe-years {
  margin-top: 12px;
}
.pe-card .pe-strip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pe-card .pe-arrow, .pe-card .pe-arrow:hover, .pe-card .pe-arrow:focus {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  border: 1px solid #e6e8ec;
  border-radius: 999px;
  background-color: #ffffff;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pe-card .pe-arrow span, .pe-card .pe-arrow:hover span, .pe-card .pe-arrow:focus span {
  font-size: 16px;
  color: #6b6e76;
}
.pe-card .pe-arrow.disabled {
  opacity: 0.3;
  cursor: default;
}
.pe-card .pe-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 160px;
  min-width: 120px;
  padding: 1px 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pe-card .pe-strip::-webkit-scrollbar {
  display: none;
}
.pe-card .pe-chip, .pe-card .pe-chip:hover, .pe-card .pe-chip:focus {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: auto;
  min-height: 0;
  padding: 5px 12px 5px 9px;
  border: 1px solid #e6e8ec;
  border-radius: 999px;
  background-color: #ffffff;
  box-shadow: none;
  transition: all 0.16s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.pe-card .pe-chip-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.366;
  color: #9a9da6;
}
.pe-card .pe-chip[data-on="1"] {
  border-color: var(--pe-year);
  background-color: var(--pe-year-bg);
}
.pe-card .pe-chip[data-on="1"] .pe-chip-label {
  color: #26272b;
}
.pe-card .pe-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.pe-card .pe-chip[data-on="0"] .pe-dot {
  opacity: 0.35;
}
.pe-card .pe-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.pe-card .pe-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pe-card .pe-legend-label {
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: #9a9da6;
}
.pe-card .pe-plot {
  position: relative;
  width: 100%;
  margin-top: 6px;
}
.pe-card .pe-tip {
  display: none;
  position: absolute;
  top: 8px;
  z-index: 3;
  min-width: 208px;
  padding: 10px 12px;
  pointer-events: none;
  background-color: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
  transform: translateX(12px);
}
.pe-card .pe-tip.flip {
  transform: translateX(-100%) translateX(-12px);
}
.pe-card .pe-tip-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #26272b;
}
.pe-card .pe-tip-sub {
  font-size: 10.5px;
  font-weight: 500;
  color: #6b6e76;
  margin-top: 1px;
}
.pe-card .pe-tip-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 9px;
}
.pe-card .pe-tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pe-card .pe-tip-row .pe-dot {
  width: 8px;
  height: 8px;
}
.pe-card .pe-tip-row.is-empty {
  opacity: 0.75;
}
.pe-card .pe-tip-label {
  flex: none;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  color: #6b6e76;
}
.pe-card .pe-tip-fill {
  flex: 1;
}
.pe-card .pe-tip-price {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: #26272b;
}
.pe-card .pe-tip-none {
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 500;
  color: #6b6e76;
}
.pe-card .pe-pill {
  white-space: nowrap;
  padding: 1px 7px;
  border: 1px solid #d2e8a1;
  border-radius: 999px;
  background-color: #f2f8e3;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #4e6b00;
}
.pe-card .pe-tip-foot {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid #e6e8ec;
  font-size: 10.5px;
  font-weight: 500;
  color: #6b6e76;
}

.pe-card[data-scope=store] .pe-tip {
  min-width: 178px;
}

.reference .ref-history-head {
  margin: 26px 0 18px;
  line-height: 1.366;
}
.reference .ref-history-head h1 {
  font-size: 18px;
  font-weight: 700;
  color: #26272b;
  padding: 0;
  margin: 0;
  line-height: 1.366;
}
.reference .ref-history-head h2 {
  font-size: 13px;
  font-weight: 500;
  color: #9a9da6;
  padding: 0;
  margin: 2px 0 0 0;
  line-height: 1.366;
}

.entity-edit.reference a.ref-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 5px;
  text-decoration: none;
  white-space: nowrap;
}
.entity-edit.reference a.ref-brand .ref-brand-logo {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-color: #f2f4f7;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.entity-edit.reference a.ref-brand .ref-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}
.entity-edit.reference a.ref-brand .ref-brand-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #26272b;
}
.entity-edit.reference a.ref-brand .ref-brand-address {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: #6b6e76;
}
.entity-edit.reference a.ref-brand .material-symbols-outlined {
  font-size: 16px;
  color: #6b6e76;
}

@media screen and (max-width: 640px) {
  .entity-edit.reference .header .t-status > a.ref-brand {
    max-width: 100%;
  }
  .entity-edit.reference .header .t-status > a.ref-brand .ref-brand-text {
    white-space: normal;
  }
}
.entity-edit.reference a.ref-brand:hover .material-symbols-outlined {
  color: #26272b;
}

.entity-edit.reference .header .t-status > a.ref-brand {
  align-self: stretch;
  margin-left: 8px;
  padding: 0 14px;
  gap: 8px;
}

.entity-edit.reference .headers .filters > a.ref-brand {
  height: 44px;
  margin-left: 10px;
  padding: 0 14px;
  gap: 8px;
  border-radius: 8px;
}

/*
    Phone layout (≤ 640px, section 5 of Group by v2 - phone only, D13). MOB-02 / MOB-04: the store and reference
    modals are full-screen (no margin, no radius). MOB-04: the reference modal's header stays at the top on one
    line - "Reference · barcode · N observations · ×" - with the × in it (44px touch area) instead of the app's
    floating green close button; the chart header stacks title, subtitle, then the unit toggle.
*/
@media screen and (max-width: 640px) {
  #modals .modal[data-name=reference], #modals .modal[data-name=store-observations] {
    padding-bottom: 0;
  }
  #modals .modal[data-name=reference] > .modal-box-outer, #modals .modal[data-name=store-observations] > .modal-box-outer {
    max-width: none;
    padding: 0;
    border-radius: 0;
  }
  #modals .modal[data-name=reference] > .modal-box-outer > .modal-box, #modals .modal[data-name=store-observations] > .modal-box-outer > .modal-box {
    min-height: 100vh;
    border-radius: 0;
  }
  #modals .modal[data-name=reference] .modal-box-outer .entity-edit.reference > .header {
    position: sticky;
    top: 10px;
    z-index: 5;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    height: auto;
    min-height: 48px;
    padding: 6px 0 6px 6px;
    border: 1px solid rgba(208, 213, 221, 0.5);
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 -10px 0 5px #f8f8f8, rgba(0, 0, 0, 0.02) 0 4px 24px 0;
  }
  #modals .modal[data-name=reference] .modal-box-outer .entity-edit.reference > .header > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }
  #modals .modal[data-name=reference] .modal-box-outer .entity-edit.reference > .header > div:last-child {
    flex: none;
    width: auto;
  }
  #modals .modal[data-name=reference] .modal-box-outer .entity-edit.reference > .header .t-status {
    width: 100% !important;
    height: auto;
    justify-content: flex-start;
    min-width: 0;
    flex-wrap: wrap;
  }
  #modals .modal[data-name=reference] .modal-box-outer .entity-edit.reference > .header .t-status div .ref {
    padding: 6px 2px;
  }
  #modals .modal[data-name=reference] .modal-box-outer .entity-edit.reference > .header .t-status > .m-chip-square {
    flex: none;
  }
  #modals .modal[data-name=reference] .modal-box-outer .entity-edit.reference > .header .t-status > div.m-chip-square {
    padding: 6px 8px 6px 0 !important;
  }
  #modals .modal[data-name=reference] .modal-box-outer .entity-edit.reference > .header .t-status div span {
    margin: 0 2px;
  }
  #modals .modal[data-name=reference] .modal-box-outer .entity-edit.reference > .header .t-status div .ref-label {
    display: inline;
    font-size: 13px;
  }
  #modals .modal[data-name=reference] .modal-box-outer .entity-edit.reference > .header .t-status .observations-amount {
    display: block;
    flex: none;
    padding: 0 0 0 10px !important;
    font-size: 12px !important;
    line-height: 38px;
    white-space: nowrap;
  }
  #modals .modal[data-name=reference] .modal-box-outer .entity-edit.reference > .header .t-status > a.ref-brand {
    order: 3;
    min-height: 38px;
    margin: 6px 0 0 0;
  }
  #modals .modal[data-name=reference] .modal-box-outer .entity-edit.reference > .header .t-status:has(> a.ref-brand)::after {
    content: "";
    order: 2;
    flex-basis: 100%;
    height: 0;
  }
  #modals .modal[data-name=reference] .modal-box-outer .entity-edit.reference > .header .modal-close {
    position: static;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    background-color: transparent;
  }
  #modals .modal[data-name=reference] .modal-box-outer .entity-edit.reference > .header .modal-close span {
    color: #6b6e76;
  }
  .pe-card .pe-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .pe-card .pe-metric {
    margin-left: 0;
  }
  .pe-card .pe-tip {
    min-width: 0;
    max-width: 260px;
    padding: 9px 11px;
  }
}
@media screen and (max-width: 640px) {
  .entity-edit.reference .tabs .data > div.displayed .m-img-text > div:last-child {
    width: auto;
    max-width: none;
    overflow: visible;
  }
  .entity-edit.reference .tabs .data > div.displayed .m-img-text > div:last-child > div {
    overflow: visible;
  }
  .entity-edit.reference .tabs .data > div.displayed .m-img-text > div:last-child > div > h1, .entity-edit.reference .tabs .data > div.displayed .m-img-text > div:last-child > div > div {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
}
@media screen and (max-width: 640px) {
  .entity-edit.reference .headers > .scroll > div {
    overscroll-behavior-x: none;
  }
}
/*
    "Sort by" / "Group by" action bar of the references lists (references-toolbar.js), IMP-007.
    The prototype's MenuButton, measured in the rendered prototype. Colours: the $home-* design tokens
    (home.scss). The grouped list (.m-gb, references-groups.js) is at the bottom of this file.
*/
.m-ref-tool {
  position: relative;
  display: inline-flex;
  margin-left: 10px;
}

.m-ref-tool-btn, .m-ref-tool-btn:hover, .m-ref-tool-btn:focus {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  min-height: 0;
  padding: 0 14px;
  border: 1px solid #d6d9df;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: none;
  white-space: nowrap;
  cursor: pointer;
}

.m-ref-tool.active .m-ref-tool-btn {
  border-color: #8cc300;
}

.m-ref-tool-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.366;
  color: #26272b;
}

.m-ref-tool-value {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.366;
  color: #6b6e76;
}

.m-ref-tool-value:empty {
  display: none;
}

.m-ref-tool-icon.material-symbols-outlined {
  font-size: 17px;
  color: #6b6e76;
}

.m-ref-tool.active .m-ref-tool-icon.material-symbols-outlined {
  color: #76a300;
}

.m-ref-tool-chevron.material-symbols-outlined {
  font-size: 15px;
  color: #26272b;
}

.m-ref-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 4;
  min-width: 232px;
  padding: 6px;
  background-color: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
}

.m-ref-tool.open .m-ref-menu {
  display: block;
}

.m-ref-option, .m-ref-option:hover, .m-ref-option:focus {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  box-shadow: none;
  text-align: left;
  white-space: nowrap;
}
.m-ref-option .material-symbols-outlined, .m-ref-option:hover .material-symbols-outlined, .m-ref-option:focus .material-symbols-outlined {
  width: 16px;
  font-size: 15px;
  color: #76a300;
  visibility: hidden;
}

.m-ref-option.selected {
  background-color: #f7f9fb;
}
.m-ref-option.selected .material-symbols-outlined {
  visibility: visible;
}

.m-ref-option.no-check .material-symbols-outlined {
  display: none;
}

.m-ref-option-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.366;
  color: #26272b;
}

.m-ref-option.no-check .m-ref-option-label {
  color: #4b4d54;
}

/*
    Grouped references list (references-groups.js, Group by v2 GB-01…04): one white card per group, a header
    and ONE horizontal row of reference cards. Geometry from proposal D ("Escaparate discreto"); colours and
    font are the app's (D16). Added rules only - `.table.cards tr` / the lib card are untouched.
*/
.table.cards.grouped .pagination {
  display: none !important;
}

.table.cards.grouped > .scroll > div table tbody > tr:only-child, .table.cards.grouped > .no-scroll > div table tbody > tr:only-child {
  margin: 0 auto;
  box-shadow: none;
}

.table.cards > .scroll > div table tbody tr.m-groups, .table.cards > .no-scroll > div table tbody tr.m-groups {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  margin: 0;
  box-shadow: none;
}

.m-gb-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.table.cards tbody tr.m-groups > td > .m-gb-list {
  display: flex;
  align-items: stretch;
  height: auto;
  width: 100%;
  padding: 0;
  white-space: normal;
}

.m-gb {
  display: block;
  min-width: 0;
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.07);
}

.m-gb-head {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 28px;
  cursor: pointer;
  border-bottom: 1px solid #e6e8ec;
  transition: border-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.m-gb.collapsed .m-gb-head {
  border-bottom-color: transparent;
}

.m-gb-index {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.m-gb-logo {
  flex: none;
  display: flex;
  width: 58px;
  height: 58px;
  margin-left: -12px;
  padding: 4px;
  border-radius: 999px;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #e6e8ec, 0 4px 12px rgba(16, 24, 40, 0.1);
}
.m-gb-logo > span {
  flex: 1;
  border-radius: 999px;
  background-color: #f2f4f7;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.m-gb-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.m-gb-criterion {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.m-gb-criterion-label {
  font-size: 11px;
  line-height: 1.366;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.m-gb-position {
  font-size: 11px;
  line-height: 1.366;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6b6e76;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.m-gb-value {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #26272b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-gb-count {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.m-gb-n {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.m-gb-refs {
  font-size: 13px;
  line-height: 1.366;
  font-weight: 600;
  color: #6b6e76;
}

.m-gb-chevron {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #e6e8ec;
  background-color: #ffffff;
}
.m-gb-chevron .material-symbols-outlined {
  font-size: 20px;
  color: #4b4d54;
  transform: rotate(180deg);
  transition: transform 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.m-gb.collapsed .m-gb-chevron .material-symbols-outlined {
  transform: none;
}

.m-gb-odd .m-gb-index {
  background-color: #8cc300;
  color: #ffffff;
}
.m-gb-odd .m-gb-criterion-label, .m-gb-odd .m-gb-n {
  color: #8cc300;
}

.m-gb-even .m-gb-index {
  background-color: #f1f4f7;
  color: #4b4d54;
}
.m-gb-even .m-gb-criterion-label, .m-gb-even .m-gb-n {
  color: #4b4d54;
}

.m-gb-body {
  position: relative;
  padding: 22px 0 20px;
}

.m-gb.collapsed .m-gb-body {
  display: none;
}

.m-gb-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 28px 8px;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 28px;
  scrollbar-width: none;
}

.m-gb-scroll::-webkit-scrollbar {
  display: none;
}

.m-gb-card {
  flex: none;
  width: 262px;
  scroll-snap-align: start;
}

.m-gb-loader {
  flex: 1;
  display: flex;
  justify-content: center;
}

.m-gb-arrow, .m-gb-arrow:hover, .m-gb-arrow:focus {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-height: 0;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid #e6e8ec;
  border-radius: 999px;
  background-color: #ffffff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
  cursor: pointer;
  transition: opacity 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.m-gb-arrow .material-symbols-outlined, .m-gb-arrow:hover .material-symbols-outlined, .m-gb-arrow:focus .material-symbols-outlined {
  font-size: 22px;
  color: #26272b;
}

.m-gb-arrow[data-dir="-1"] {
  left: 12px;
}

.m-gb-arrow[data-dir="1"] {
  right: 12px;
}

.m-gb-arrow.off {
  opacity: 0;
  pointer-events: none;
}

@media screen and (max-width: 700px), (hover: none) {
  .m-gb-arrow, .m-gb-arrow:hover, .m-gb-arrow:focus {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .m-gb-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "idx main chev" "idx count chev";
    gap: 4px 12px;
    padding: 14px 14px 14px 12px;
  }
  .m-gb.has-logo .m-gb-head {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "idx logo main chev" "idx logo count chev";
  }
  .m-gb-index {
    grid-area: idx;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 15px;
  }
  .m-gb-logo {
    grid-area: logo;
    width: 44px;
    height: 44px;
    margin-left: -14px;
    padding: 3px;
  }
  .m-gb-main {
    grid-area: main;
    gap: 2px;
  }
  .m-gb-criterion {
    gap: 6px;
    overflow: hidden;
  }
  .m-gb-criterion-label {
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .m-gb-position {
    font-size: 10px;
  }
  .m-gb-value {
    font-size: 22px;
  }
  .m-gb-count {
    grid-area: count;
    gap: 5px;
  }
  .m-gb-n {
    font-size: 17px;
    letter-spacing: -0.02em;
  }
  .m-gb-refs {
    font-size: 12px;
  }
  .m-gb-chevron {
    grid-area: chev;
    width: 44px;
    height: 44px;
  }
  .m-gb-body {
    padding: 10px 0;
  }
  .m-gb-scroll {
    padding: 4px 14px;
    scroll-padding: 0 14px;
  }
}
/*
    Phone action bar of the two references lists (MOB-01 / MOB-02, GEN-01 - phone only, D13). The toolbar marks
    its header `.m-ref-bar` (+ `.m-ref-bar-store` in the store modal). Grid 1fr 1fr 44px, 8px gap: line 1
    Filters | Sort by, line 2 Group by | search magnifier; the lib's own search field takes a full line below
    when the magnifier is tapped. Desktop is untouched: the magnifier and the clear button only exist here,
    and the store modal keeps no search on desktop.
*/
.m-ref-search-btn, .m-ref-search-clear {
  display: none;
}

@media screen and (min-width: 641px) {
  .headers.m-ref-bar-store .table-search {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .headers.m-ref-bar > .scroll > div > div:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr 44px;
    gap: 8px;
    width: 100%;
    white-space: normal;
  }
  .headers.m-ref-bar > .scroll > div > div:first-child > div:empty {
    display: none;
  }
  .headers.m-ref-bar .filters {
    display: contents;
  }
  .headers.m-ref-bar .collect-filters {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    font-size: 13.5px;
  }
  .headers.m-ref-bar .collect-filters::before {
    position: static;
    height: auto;
  }
  .headers.m-ref-bar .m-ref-tool {
    margin-left: 0;
    min-width: 0;
  }
  .headers.m-ref-bar .m-ref-tool[data-tool=sort] {
    grid-column: 2/4;
    grid-row: 1;
  }
  .headers.m-ref-bar .m-ref-tool[data-tool=group] {
    grid-column: 1/3;
    grid-row: 2;
  }
  .headers.m-ref-bar .m-ref-tool-btn, .headers.m-ref-bar .m-ref-tool-btn:hover, .headers.m-ref-bar .m-ref-tool-btn:focus {
    width: 100%;
    justify-content: center;
    min-width: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  }
  .headers.m-ref-bar .m-ref-tool-label, .headers.m-ref-bar .m-ref-tool-value {
    font-size: 13.5px;
  }
  .headers.m-ref-bar .m-ref-tool-value {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .headers.m-ref-bar .m-ref-menu {
    min-width: max(250px, 100%);
  }
  .headers.m-ref-bar .m-ref-tool[data-tool=sort] .m-ref-menu {
    left: auto;
    right: 0;
  }
  .headers.m-ref-bar .m-ref-option, .headers.m-ref-bar .m-ref-option:hover, .headers.m-ref-bar .m-ref-option:focus {
    padding: 12px;
  }
  .headers.m-ref-bar .m-ref-option-label {
    font-size: 15px;
  }
  .headers.m-ref-bar .m-ref-search-btn, .headers.m-ref-bar .m-ref-search-btn:hover, .headers.m-ref-bar .m-ref-search-btn:focus {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    border: 1px solid #d6d9df;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    cursor: pointer;
  }
  .headers.m-ref-bar .m-ref-search-btn .material-symbols-outlined, .headers.m-ref-bar .m-ref-search-btn:hover .material-symbols-outlined, .headers.m-ref-bar .m-ref-search-btn:focus .material-symbols-outlined {
    font-size: 20px;
    color: #4b4d54;
  }
  .headers.m-ref-bar .table-search {
    display: none;
    grid-column: 1/-1;
    grid-row: 3;
    min-width: 0;
    margin-left: 0;
  }
  .headers.m-ref-bar .table-search form, .headers.m-ref-bar .table-search .input-text {
    display: block;
    width: 100%;
    position: relative;
  }
  .headers.m-ref-bar .table-search .input-text::before {
    display: none;
  }
  .headers.m-ref-bar .table-search input {
    height: 44px;
    padding: 0 44px 0 14px;
    border: 1px solid #8cc300;
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(140, 195, 0, 0.18);
    font-size: 15px;
  }
  .headers.m-ref-bar .m-ref-search-clear, .headers.m-ref-bar .m-ref-search-clear:hover, .headers.m-ref-bar .m-ref-search-clear:focus {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    cursor: pointer;
  }
  .headers.m-ref-bar .m-ref-search-clear .material-symbols-outlined, .headers.m-ref-bar .m-ref-search-clear:hover .material-symbols-outlined, .headers.m-ref-bar .m-ref-search-clear:focus .material-symbols-outlined {
    font-size: 20px;
    color: #9a9da6;
  }
  .headers.m-ref-bar.search-open .table-search {
    display: block;
  }
  .headers.m-ref-bar.search-open .m-ref-search-btn, .headers.m-ref-bar.search-open .m-ref-search-btn:hover, .headers.m-ref-bar.search-open .m-ref-search-btn:focus {
    border-color: #8cc300;
    background-color: #f2f8e3;
  }
  .headers.m-ref-bar.search-open .m-ref-search-btn .material-symbols-outlined, .headers.m-ref-bar.search-open .m-ref-search-btn:hover .material-symbols-outlined, .headers.m-ref-bar.search-open .m-ref-search-btn:focus .material-symbols-outlined {
    color: #76a300;
  }
}
/*
    Observation modal - "Data" panel as a product sheet (observation-data-sheet.js), IMP-006 / IMP-017.
    The prototype's DCell, measured in the rendered prototype. Colours: the $home-* design tokens.
    Every colour sits on the span that holds the text (lib's `*` rule kills inheritance).
*/
.ds-sheet {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(min-content, 1fr);
  column-gap: 14px;
}

.ds-row {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid #e6e8ec;
  line-height: 1.366;
}

.ds-key {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.ds-icon.material-symbols-outlined {
  flex: none;
  font-size: 17px;
  color: #76a300;
}

.ds-label {
  font-size: 14px;
  font-weight: 500;
  color: #76a300;
}

.ds-val {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 3px 8px;
  line-height: 1.3;
}

.ds-text {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #26272b;
  text-wrap: pretty;
}

.ds-big {
  font-size: 16px;
  font-weight: 800;
  color: #26272b;
}

.ds-unit {
  font-size: 12px;
  font-weight: 600;
  color: #9a9da6;
}

.ds-footnote {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #e6e8ec;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.366;
  color: #9a9da6;
}

@media screen and (min-width: 935px) {
  #modals .modal-box-outer.f-1-1g-1.client-sheet {
    max-width: 1760px;
  }
}
@media screen and (min-width: 935px) and (min-width: 1000px) {
  #modals .modal-box-outer.f-1-1g-1.client-sheet {
    width: calc(100% - 48px);
  }
}
@media screen and (min-width: 935px) {
  #modals .modal-box-outer.f-1-1g-1.client-sheet .body > .f-1 {
    max-width: none !important;
  }
  #modals .modal-box-outer.f-1-1g-1.client-sheet .body > .f-1:nth-child(1) {
    flex: 0.75 1 0;
  }
  #modals .modal-box-outer.f-1-1g-1.client-sheet .body > .f-1:nth-child(2) {
    flex: 1.6 1 0;
  }
  #modals .modal-box-outer.f-1-1g-1.client-sheet .body > .f-1:nth-child(3) {
    flex: 0.92 1 0;
  }
}
/*
    Two-pane filters panel of the twelve collect lists (custom/filters-panel.js), FIL-01…FIL-05.
    Replaces the lib's single-column #filters. Geometry comes from the handoff prototype
    ("List view - Product filters.html", saved state {layout:"fields", groups:"tabs"}), colours from
    the $home-* design tokens (home.scss) — never from the prototype's literals.

    Phase 1 is desktop + tablet only. The ≤640px branch (MOB-F1) lands in Phase 4; until then the
    panel only clamps itself inside the window at those widths.

    Traps this file works around, each one already paid for once:
      - lib/index.scss `* {color; font-family; font-weight:400}` kills inheritance, so every element
        that RENDERS TEXT carries its own colour and weight. Nothing is set on a container only.
      - reset.scss `html {line-height:1}` while the prototype writes type with the `font:` shorthand
        (= line-height normal). $fp-line below is that ratio, measured for Inter.
      - reset.scss `div {font-size:0}` — no text sits in a bare div.
      - button.scss `.btn, button {height:44px; padding:0 36px}` and form.scss `input,.select
        {height:44px; padding; font-size:16px; width:100%; border; box-shadow}` — every button and
        input here restates its own box.
      - h1–h6 carry `padding: $h-padding` and `color:#000` — the one <h4> restates both.
*/
/*
    The panel's heaviest weight is 700, not the prototype's 800 (user, 2026-10-16: "the boldest font
    in the filter modal could be one level less bold"). Inter is loaded as a variable font over
    100-900 (index.html), so the two really do render differently. Six rules: the active rail label,
    the rail count, the <h4> and its span, the footer's two numbers and the Done button.
*/
/*
    The app's text black. The Home design system's $home-fg-1 (#26272b) is a NEUTRAL near-black and
    reads as a true black next to the rest of the product, which paints its titles and card names
    #101828 (tables.scss, and $input-color in lib/index.scss). Asked for by the user on 2026-10-16:
    every dark text of the panel, the pill row and the empty box uses this one.
*/
/*
    Decision 6 of the plan: the panel stays two-pane down to 640px (FIL-01j forbids the phone group
    toggle on a tablet), and only the field GRID collapses to one column. 880px is a measurement, not
    a design value — below it the 230px rail plus two field columns stops reading.
*/
/*
    MOB-F1, Phase 4. The one phone breakpoint of this file — 640px is the app's own `mobile`
    breakpoint, not a new number. `custom/filters-panel.js` never restates it: everything it needs
    to know about the phone layout it reads back from the three custom properties below.
*/
#filters-v2 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  /*
      Published FOR the JS, which reads them in place() / clamp() / placeList():

        --fp-edge    left, right and top margin to the window (MOB-F1b: 10px on a phone)
        --fp-bottom  bottom margin to the window
        --fp-min-h   the height the panel refuses to give up, which is what makes it "open higher"
                     when the button is low on a phone (MOB-F1b). 0 here means "no floor": off the
                     phone branch the panel is moved up by exactly its own overflow instead
                     (FIL-01c), which is the Phase 1 behaviour and stays bit for bit.
        --fp-grow    how much taller than the button anchor allows the panel may open, once its
                     fields overflow anyway. 1 = the anchor's own room, which is every breakpoint
                     but the phone.
  */
  --fp-edge: 12px;
  --fp-bottom: 12px;
  --fp-min-h: 0;
  --fp-grow: 1;
}

#filters-v2.opened {
  display: block;
}

@keyframes fp-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fp {
  display: flex;
  flex-direction: row;
  width: 812px;
  max-width: calc(100vw - 24px);
  background-color: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 20px;
  box-shadow: 0 28px 70px rgba(16, 24, 40, 0.18), 0 6px 18px rgba(16, 24, 40, 0.08);
  overflow: hidden;
  transform-origin: top left;
  animation: fp-in 170ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/*
    Scrollbars, hidden the way the rest of the app hides them. There is no blanket rule in the
    lib - every scrolling box carries its own pair (`#filters`, `#modals`, `.headers > .scroll`,
    `#analyze-menu`, `.map-filters`), and this panel's boxes were added without one.
    `width` alone covers the vertical bar only; `height` is what the sideways-scrolling
    `.fp-track` needs, so both are set here - see the longer note on `.fp-track` in the phone
    block. The cue that there is more is always the content cut at the box's edge.
*/
.fp-rail,
.fp-b,
.ffield-list,
.fa-pop {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.fp-rail::-webkit-scrollbar,
.fp-b::-webkit-scrollbar,
.ffield-list::-webkit-scrollbar,
.fa-pop::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}

.fp-rail::-webkit-scrollbar-thumb,
.fp-b::-webkit-scrollbar-thumb,
.ffield-list::-webkit-scrollbar-thumb,
.fa-pop::-webkit-scrollbar-thumb {
  background: transparent;
}

/* ---------------------------------------------------------------- the rail */
.fp-rail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: none;
  width: 230px;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 12px;
  background: linear-gradient(180deg, #f8fafc, #f7f9fb);
  border-right: 1px solid #e6e8ec;
}

/*
    The wrapper filters-panel.js puts around the group entries. Here it has NO BOX: `display:
    contents` drops it out of the layout entirely, so the rail is laid out exactly as it was
    measured in Phase 1 — entries and caption are still direct flex items of `.fp-rail`, with its
    own `gap: 3px` between them. It only becomes an element at ≤640px, where MOB-F1f's segmented
    control needs something to paint the track on.
*/
.fp-track {
  display: contents;
}

.fp-railb, .fp-railb:hover, .fp-railb:focus {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: transparent;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fp-railb:hover {
  background-color: rgba(255, 255, 255, 0.75);
}

.fp-railb.on, .fp-railb.on:hover {
  background-color: #ffffff;
  border-color: #e6e8ec;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.07);
}

/*
    The green edge bar. It sits 12px to the left, exactly on the rail's padding, so it has no
    positioned sibling to lose tree order to — but it is given a z-index anyway, because that is the
    bug class an ::before overlay always falls into here (see the plan's trap 4).
*/
.fp-railb.on::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  z-index: 1;
  width: 3px;
  height: 20px;
  transform: translateY(-50%);
  border-radius: 0 3px 3px 0;
  background-color: #8cc300;
}

.fp-railb-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid #e6e8ec;
  border-radius: 999px;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  color: #6b6e76;
  overflow: hidden;
}

.fp-railb-ic .material-symbols-outlined {
  font-size: 15px;
  color: inherit;
}

.fp-railb.on .fp-railb-ic {
  border-color: #c3e090;
  background-color: #f2f8e3;
  color: #5f8500;
}

/* a product entry carries its thumbnail instead of a glyph: no tint, no border */
.fp-railb-ic.fp-railb-img, .fp-railb.on .fp-railb-ic.fp-railb-img {
  border: 0;
  background-color: #e9ecf1;
  box-shadow: 0 0 0 2px #ffffff, 0 1px 3px rgba(16, 24, 40, 0.14);
}

.fp-railb-t {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.366;
  color: #4b4d54;
}

.fp-railb.on .fp-railb-t {
  font-weight: 700;
  color: #101828;
}

/*
    `align-items: center` centres the TEXT BOX, and a text box is not symmetric around its digits:
    Inter reserves a descender (ascent 11 / descent 3 at 11.5px, read off the canvas) that a digit
    never uses, so the glyph is painted high. Pixel-scanned on the served bundle, 2026-10-17: the
    "1" sat 5px below the top of the 22px badge and 8px above its bottom. `padding-top: 2px` moves
    the content box down 1px and puts the 9px-tall digit at 6 / 7 - the best a 9px glyph can do in
    a 22px box, and the half-pixel left is under the rounding. An "8" measures 8 / 8 across, so the
    horizontal centring was always right; a lone "1" looks 1px left because of its own side
    bearings in the font, which no CSS changes.
*/
.fp-railb-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 22px;
  height: 22px;
  padding: 2px 7px 0;
  border-radius: 999px;
  background-color: #e4f0c7;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.366;
  color: #5f8500;
}

.fp-railb.on .fp-railb-n {
  background-color: #8cc300;
  color: #ffffff;
}

.fp-rail-cap {
  margin: 12px 12px 6px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.366;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a9da6;
}

.fp-rail-note {
  margin-top: auto;
  padding: 12px 12px 2px;
  border-top: 1px solid #e6e8ec;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.55;
  color: #9a9da6;
}

/* ------------------------------------------------------ "Find a filter…" */
.fp-s {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 8px 11px;
  border: 1px solid #d6d9df;
  border-radius: 10px;
  background-color: #ffffff;
  color: #9a9da6;
  transition: border-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fp-s:focus-within {
  border-color: #8cc300;
  box-shadow: 0 0 0 3px #f2f8e3;
}

.fp-s .material-symbols-outlined {
  flex: none;
  font-size: 15px;
  color: #9a9da6;
}

.fp-s input, .fp-s input:focus {
  flex: 1;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background-color: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.366;
  color: #101828;
}

.fp-sx, .fp-sx:hover, .fp-sx:focus {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #e9ecf1;
  box-shadow: none;
  color: #6b6e76;
  cursor: pointer;
}

.fp-s.filled .fp-sx {
  display: flex;
}

.fp-sx .material-symbols-outlined {
  font-size: 13px;
  color: inherit;
}

/* --------------------------------------------------------------- the pane */
.fp-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.fp-dh {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 16px 16px 14px 20px;
  border-bottom: 1px solid #e6e8ec;
}

.fp-dh-t {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

/*
    `display: block`, NOT flex: a flex container takes its baseline from its first item, and nothing
    in here participates in baseline alignment, so a flex h4 reports its own bottom edge instead of
    its text baseline — which tilted the description 10px down (see header() in filters-panel.js).
*/
.fp-dh-t h4 {
  display: block;
  flex: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.366;
  letter-spacing: -0.01em;
  color: #101828;
  white-space: nowrap;
}

/*
    The title text sits in a <span> so the product image can sit beside it — and lib's universal
    `* {color; font-weight:400}` repaints that span, so the type has to be restated HERE, on the
    element that renders it. Measured: without this it comes out #2c2c2c at 400.
*/
.fp-dh-t h4 > span {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.366;
  color: #101828;
}

/*
    MOB-F1e's "Filters". Rendered on every width and shown only by the phone media query, so the
    header never has to be rebuilt when the window crosses the breakpoint. A <b>, so that
    `h4 > span` above keeps meaning the group title and nothing else.

    `font-weight` is restated HERE, not only in the phone block, although this is `display: none`
    off the phone. `<b>` carries the UA's `font-weight: bolder`, which against the `<h4>`'s 700
    resolves to **900** — measured on the served bundle. It paints nothing while hidden, but it is
    a real 900 inside `#filters-v2`, and "no element in this panel is above 700" is the check the
    2026-10-16 weight correction is verified by. An invisible element must not be able to fail it.
*/
.fp-dh-t h4 > .fp-dh-ph {
  display: none;
  font-weight: 700;
}

.fp-dh-g {
  display: block;
  /*
      flex-start, not center: `.fp-dh-t` is baseline-aligned and grows DOWNWARD when the
      description wraps to two lines (the super admin's "Pre-cooked potatoes" group). Centred in
      that taller box the image drifted 8.9px below the title; at flex-start it sits on the
      title's own line in both cases — measured 1px off a 22px image against a 21.9px line box.
  */
  align-self: flex-start;
  flex: none;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: #e9ecf1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  box-shadow: 0 0 0 2px #ffffff, 0 1px 3px rgba(16, 24, 40, 0.14);
}

/*
    The description carries a product NAME ("Recorded on pre-cooked potatoes observations"), so it is
    client text: it wraps, it is never cut. The prototype gives it `text-overflow: ellipsis`; on the
    super admin's Pre-cooked potatoes group that rendered as "Recorded on pre-cooked potatoe…", with
    no tooltip to recover it. FIL-07c is the only ellipsis in this build, and only because FIL-07d
    pairs it with one.
*/
.fp-dh-d {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #9a9da6;
  overflow-wrap: anywhere;
}

.fp-act {
  flex: none;
  padding: 3px 9px;
  border: 1px solid #c3e090;
  border-radius: 999px;
  background-color: #f2f8e3;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.366;
  color: #5f8500;
  white-space: nowrap;
}

.fp-x, .fp-x:hover, .fp-x:focus {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: #f7f9fb;
  box-shadow: none;
  color: #4b4d54;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fp-x:hover {
  background-color: #e9ecf1;
}

.fp-x .material-symbols-outlined {
  font-size: 19px;
  color: inherit;
}

/* --------------------------------------------------------------- the body */
.fp-b {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 436px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px 20px;
}

.fp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  align-content: start;
}

.fp-wide {
  grid-column: 1/-1;
}

@media (max-width: 880px) {
  .fp-grid {
    grid-template-columns: 1fr;
  }
}
.fp-none {
  padding: 28px 8px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #9a9da6;
}

/* -------------------------------------------------------------- one field */
.ffield {
  position: relative;
  min-width: 0;
}

.ffield.hidden {
  display: none;
}

/*
    `inline-flex`, not `flex`: the label is a `<span>` inside a `<div>` the reset gives
    `font-size: 0`, and a full-width flex row would hand its leftover width to the label's own text
    box. Inline-flex keeps the box the width of what is in it, so the 6px gap is the only thing
    between the icon and the first letter whatever the field is called.
*/
.ffield-l {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.366;
  letter-spacing: 0.01em;
  color: #6b6e76;
}

/*
    The question's own icon (`questions.icon`), asked for on 2026-10-17. `flex: none` so it is never
    the thing that shrinks when the label is long - the text wraps instead, and nothing is cut
    (there is no ellipsis anywhere in this panel). Colour is set HERE and not inherited: the lib's
    `* { color }` means a value on .ffield-l never reaches this span.
*/
.ffield-i {
  flex: none;
  font-size: 15px;
  line-height: 1;
  color: #9a9da6;
  /*
      `align-items: center` centres the two BOXES, and neither box is centred on what it draws.

      Measured on the served bundle, 2026-10-17, from the real baselines (a zero-size
      `vertical-align: baseline` strut in each item) and the real ink boxes (canvas
      `actualBoundingBox*` at 100px): every Material Symbols glyph is centred exactly 0.5em above
      ITS baseline, Inter's cap box is centred 0.37em above the LABEL's baseline - and flex puts
      the icon's baseline 4.35px below the label's. The sum of that lands the glyph **1.1px low**,
      which at 11.5px type reads as "the icon is not aligned with its label".

      -1px takes it to 0.1px, the phone's -0.6px to 0.03px - both under what the renderer can
      place. The two values are measured, not derived: the residual does not scale cleanly with
      the font sizes, because Chrome rounds a font's ascent and descent to whole pixels at these
      sizes. Re-measure, do not re-derive, if either font-size changes.
  */
  position: relative;
  top: -1px;
}

.ffield-b, .ffield-b:hover, .ffield-b:focus {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #d6d9df;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 160ms cubic-bezier(0.2, 0.7, 0.3, 1), background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ffield-b:hover {
  border-color: #c2c5cc;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.ffield-b > .ffield-v {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.366;
  color: #9a9da6;
  /*
      The closed box is a summary, never the client's own sentence: it reads "All countries",
      "2 selected", or a single value. A single very long value is the only case that can reach the
      edge, and it wraps nowhere — the full list is one click away in the open list, and in Phase 3
      in the pill's tooltip. This is the only cut in the panel.
  */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ffield-b .material-symbols-outlined {
  flex: none;
  font-size: 18px;
  color: #9a9da6;
  transition: transform 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ffield-b.set {
  border-color: #8cc300;
  background-color: #f2f8e3;
}

.ffield-b.set > .ffield-v {
  font-weight: 700;
  color: #5f8500;
}

.ffield-b.set .material-symbols-outlined {
  color: #76a300;
}

.ffield.open .ffield-b .material-symbols-outlined {
  transform: rotate(180deg);
}

/*
    The floating option list (FIL-04d). It must not push the fields below it — and it must not be
    clipped either, so it is NOT a child of the field: `position: fixed`, appended beside `.fp`, and
    anchored in viewport coordinates by placeList(). `.fp-b` scrolls and `.fp` is `overflow: hidden`,
    so anything rendered inside them is cut at their edges; out here the list is bounded only by the
    window and can open over the footer and past the panel.

    `top` / `left` / `width` / `max-height` all come from the JS — nothing here positions it.
*/
#filters-v2 > .ffield-x {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 12;
  /*
      Anchored by `left` and ONE vertical edge, the one against the field: `top` when it opens
      downward, `bottom` when it opens upward (`.up`). placeList() sets that edge and `auto` on the
      other, inline. Never both: an element with BOTH `top` and `bottom` resolves its height from
      the gap between them, which collapsed the box to nothing with a leftover
      `.ffield-x.up { bottom: calc(100% + 6px) }` while testing against the previous stylesheet.
  */
  right: auto;
  bottom: auto;
  padding: 8px;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
  overflow: hidden;
}

.ffield-x .fp-s {
  flex: none;
  border-radius: 8px;
  padding: 7px 10px;
}

/*
    Opened upward: the search box at the bottom, against the field, the list above it and the Clear
    button on top, so the box grows and shrinks upward while searching (user 2026-11-02). The gaps
    move with them: the search's 6px goes above it, the Clear button's 7px below it
*/
#filters-v2 > .ffield-x.up {
  flex-direction: column-reverse;
}
#filters-v2 > .ffield-x.up .fp-s {
  margin-top: 6px;
  margin-bottom: 0;
}
#filters-v2 > .ffield-x.up .ffield-clr, #filters-v2 > .ffield-x.up .ffield-clr:hover, #filters-v2 > .ffield-x.up .ffield-clr:focus {
  margin: 0 0 7px;
}

.ffield-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/*
    `flex: none` is load-bearing: .ffield-list is a flex column with a capped height, so its rows
    are flex items and shrink by default — measured at 16px tall instead of 32px, the labels
    overflowing their own box, before this was added. The list scrolls, it never squeezes.
*/
.fopt, .fopt:hover, .fopt:focus {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fopt:hover {
  background-color: #f7f9fb;
}

.fopt.hidden {
  display: none;
}

.fopt > i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #d6d9df;
  border-radius: 4px;
  background-color: #ffffff;
  color: #ffffff;
  font-style: normal;
  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1), border-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fopt > i .material-symbols-outlined {
  font-size: 12px;
  font-weight: 700;
  color: inherit;
  opacity: 0;
}

.fopt.on > i {
  border-color: #8cc300;
  background-color: #8cc300;
}

.fopt.on > i .material-symbols-outlined {
  opacity: 1;
}

.fopt-ball {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e9ecf1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.fopt > span:last-child {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.366;
  color: #101828;
  /* an option label is client data: it wraps onto as many lines as it needs, it is never cut */
  overflow-wrap: anywhere;
}

.fopt.on > span:last-child {
  font-weight: 700;
}

.ffield-empty {
  flex: none;
  padding: 6px 8px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: #9a9da6;
}

.ffield-loader {
  flex: none;
  padding: 14px 8px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: #9a9da6;
}

.ffield-clr, .ffield-clr:hover, .ffield-clr:focus {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 7px 0 0;
  padding: 8px;
  border: 1px solid #e6e8ec;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.366;
  color: #4b4d54;
  cursor: pointer;
}

.ffield-clr:hover {
  background-color: #f7f9fb;
  color: #101828;
}

/* ------------------------------------------------- the two date boxes */
.fp-dates {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fdate, .fdate:focus {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0 11px;
  border: 1px solid #d6d9df;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.366;
  color: #101828;
  transition: border-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fdate:hover, .fdate:focus {
  border-color: #c2c5cc;
  outline: 0;
}

/*
    iOS, reported 2026-10-17: the value of a native date box is painted against the TOP of the box
    instead of on its middle line. Chrome on an iPhone is WebKit like Safari, so this is not a
    Chrome-vs-Safari difference - it is Blink centring the shadow edit for us and WebKit not doing
    it. `.fdate` gives the box a fixed height with no vertical padding, so there is 18px of slack
    around a 13.5px line for WebKit to get wrong.

    Setting `line-height` to the CONTENT box (height minus the two 1px borders) leaves no slack at
    all: a single line box that fills its container is centred by construction, in every engine.

    Scoped to `-webkit-touch-callout`, which only WebKit-on-touch supports, because the desktop
    rendering is measured in FIL-02e (40px boxes, 255.9/256 wide) and must not move for a defect
    that cannot happen there. WRITTEN FROM A DESCRIPTION - there is no iOS on this machine, so it
    is unverified until someone opens the panel on the phone.
*/
@supports (-webkit-touch-callout: none) {
  .fdate, .fdate:focus {
    line-height: 38px;
  }
}
.fp-dates-to {
  flex: none;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.366;
  color: #9a9da6;
}

/* ----------------------------------------------- min / max (decision 2) */
.fp-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fp-range input, .fp-range input:focus {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0 11px;
  border: 1px solid #d6d9df;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.366;
  color: #101828;
  transition: border-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fp-range input:hover, .fp-range input:focus {
  border-color: #c2c5cc;
  outline: 0;
}

.ffield.set .fp-range input {
  border-color: #8cc300;
  background-color: #f2f8e3;
  font-weight: 700;
  color: #5f8500;
}

/* "Clear" of the date line and of a set range */
.fp-inline-clr, .fp-inline-clr:hover, .fp-inline-clr:focus {
  display: none;
  align-items: center;
  flex: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.366;
  color: #6b6e76;
  cursor: pointer;
}

.ffield.set .fp-inline-clr {
  display: flex;
}

.fp-inline-clr:hover {
  background-color: #f7f9fb;
  color: #101828;
}

/* ------------------------------------------------------------- the footer */
.fp-f {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 14px 20px;
  border-top: 1px solid #e6e8ec;
  background-color: #f7f9fb;
}

.fp-count {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.366;
  color: #9a9da6;
  white-space: nowrap;
}

.fp-count b {
  font-weight: 700;
  color: #4b4d54;
}

.fp-clr, .fp-clr:hover, .fp-clr:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 40px;
  min-height: 0;
  margin: 0;
  padding: 0 18px;
  border: 1px solid #d6d9df;
  border-radius: 999px;
  background-color: #ffffff;
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.366;
  color: #4b4d54;
  white-space: nowrap;
  cursor: pointer;
}

.fp-clr:hover {
  background-color: #f7f9fb;
  color: #101828;
}

.fp-done, .fp-done:hover, .fp-done:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 40px;
  min-height: 0;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background-color: #8cc300;
  box-shadow: 0 1px 2px rgba(95, 133, 0, 0.28);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.366;
  color: #ffffff;
  white-space: nowrap;
  cursor: pointer;
}

.fp-done:hover {
  background-color: #76a300;
}

/* =========================================================================
   MOB-F1 — the panel on a phone (≤640px), Phase 4
   =========================================================================

   Four stacked parts, and only the fields scroll (MOB-F1a / MOB-F1l):

       .fp-dh    header — "Filters", the "X active" tag, the 40px close ×
       .fp-rail  the segmented control, with "Find a filter…" under it
       .fp-b     the fields, one column
       .fp-f     the footer, on two lines

   The markup is the DESKTOP markup. `.fp-main` becomes `display: contents`, which lifts its three
   children into `.fp`'s own column, and `order` then interleaves them with `.fp-rail`. Nothing in
   custom/filters-panel.js knows about any of this — a rotation re-places the panel and the layout
   follows on its own.
   ========================================================================= */
@keyframes fp-veil {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 640px) {
  #filters-v2 {
    --fp-edge: 10px;
    --fp-bottom: 12px;
    --fp-min-h: 480px;
    /*
        User, 2026-10-17: "a bit more height to allow more filters to be shown, make it 20%
        height more."

        MOB-F1b anchors the panel 8px under the Filters button and ends it 12px above the
        bottom of the screen, and on a 390x844 phone that is 545px for header + selector +
        fields + footer - about four fields of the sixteen a product carries. The only space
        left is ABOVE the button, which the spec already lets the panel take ("if the button is
        low on the screen, the panel opens higher"), so this is the same move, asked for one
        screenful earlier: place() raises `top` until the box is 1.2x the room the anchor gives
        it, and never past --fp-edge.
    */
    --fp-grow: 1.2;
  }
  /*
      MOB-F1c. The veil is a pseudo-element of the panel's own host, so there is one element to
      show and hide and nothing is left behind if a close path is ever missed.

      `.fp` is given `position: relative; z-index: 1` for it — plan trap 4, and here it is not
      hypothetical: a FIXED ::before paints above a STATIC in-flow child, so without those two
      declarations the veil covers the panel it is meant to sit behind. getComputedStyle cannot
      see that; only a screenshot can.

      Tapping it closes the panel — filters-panel.js's pointerdown handler tests for a hit on
      `#filters-v2` itself, which is what the veil is.
  */
  #filters-v2.opened::before {
    content: "";
    position: fixed;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(20, 24, 31, 0.32);
    animation: fp-veil 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .fp {
    position: relative;
    z-index: 1;
    flex-direction: column;
    width: calc(100vw - var(--fp-edge) * 2);
    max-width: none;
    border-radius: 22px;
  }
  /* lifts .fp-dh / .fp-b / .fp-f into .fp's column so they can be ordered around the rail */
  .fp-main {
    display: contents;
  }
  .fp-dh {
    order: 0;
  }
  .fp-rail {
    order: 1;
  }
  .fp-b {
    order: 2;
  }
  .fp-f {
    order: 3;
  }
  /* --------------------------------------------- MOB-F1e, the header */
  .fp-dh {
    align-items: center;
    gap: 10px;
    padding: 16px 14px 14px 18px;
    border-bottom: 0;
  }
  .fp-dh-t {
    align-items: center;
    gap: 8px;
  }
  /* the group's own name is on the segmented control right below — the header says "Filters" */
  .fp-dh-g,
  .fp-dh-d,
  .fp-dh-t h4 > span {
    display: none;
  }
  .fp-dh-t h4 > .fp-dh-ph {
    display: block;
    font-size: 20px;
    /*
        MOB-F1e asks for 800. The user's 2026-10-16 correction caps every weight in this panel
        at 700 and names the <h4> explicitly, so the cap wins; recorded as a deviation on the
        register row. 20px at 700 is still the heaviest thing on the phone panel.
    */
    font-weight: 700;
    line-height: 1.366;
    letter-spacing: -0.01em;
    color: #101828;
  }
  .fp-x, .fp-x:hover, .fp-x:focus {
    width: 40px;
    height: 40px;
  }
  .fp-x .material-symbols-outlined {
    font-size: 21px;
  }
  /* ------------------------------- MOB-F1f/g, the segmented control */
  .fp-rail {
    flex: none;
    width: auto;
    overflow: visible;
    padding: 0 14px 14px;
    background: none;
    border-right: 0;
    border-bottom: 1px solid #e6e8ec;
  }
  .fp-track {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
    order: 1;
    width: 100%;
    padding: 3px;
    border: 1px solid #e6e8ec;
    border-radius: 999px;
    background-color: #f7f9fb;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  /*
      Measured: with six chips (the super admin's six groups) the track came out 63px tall
      instead of 48 — a 15px horizontal scrollbar, inside a 999px pill. The app's global
      `::-webkit-scrollbar { width: 0 }` only kills the VERTICAL bar; a horizontal one keeps its
      height, and nothing in the app had scrolled sideways inside a rounded box before.

      Hidden, the way every other sideways-scrolling strip in this app is (`.headers > .scroll`,
      `#analyze-menu`). The cue that there is more is the chip cut off at the track's edge — the
      same cue the header tab bar gives.
  */
  .fp-track::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
    background: transparent;
  }
  /* "Find a filter…" sits UNDER the control (MOB-F1h), not above it as it does on the rail */
  .fp-find {
    order: 2;
    margin: 10px 0 0;
  }
  /*
      Two groups — General plus the selected product, the case MOB-F1f describes — are two equal
      segments. With more (an Admin sees one per product) the same chips keep their own width and
      the track scrolls sideways: plan decision 1, which the spec does not cover.
  */
  .fp-track.fit > .fp-railb {
    flex: 1 1 0;
    min-width: 0;
  }
  .fp-track > .fp-railb {
    flex: none;
  }
  .fp-railb, .fp-railb:hover, .fp-railb:focus {
    justify-content: center;
    gap: 7px;
    width: auto;
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background-color: transparent;
    box-shadow: none;
  }
  .fp-railb.on, .fp-railb.on:hover {
    border: 0;
    background-color: #8cc300;
    box-shadow: none;
  }
  /* the rail's green edge bar belongs to a vertical list; a segment is filled green instead */
  .fp-railb.on::before {
    display: none;
  }
  /* MOB-F1f/g describe a segment as its name and its count — the rail's icon circle is dropped */
  .fp-railb-ic {
    display: none;
  }
  .fp-railb-t {
    flex: none;
    font-size: 13.5px;
    font-weight: 600;
    color: #6b6e76;
    white-space: nowrap;
  }
  .fp-railb.on .fp-railb-t {
    font-weight: 700;
    color: #ffffff;
  }
  .fp-railb-n {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background-color: #e4f0c7;
    color: #5f8500;
  }
  .fp-railb.on .fp-railb-n {
    background-color: #ffffff;
    color: #5f8500;
  }
  /* MOB-F1n: neither the caption nor the note is shown on a phone */
  .fp-rail-cap,
  .fp-rail-note {
    display: none;
  }
  /* --------------------------------------- MOB-F1h, "Find a filter…" */
  .fp-find, .fp-find:focus-within {
    min-height: 42px;
    padding: 0 12px;
    border-color: transparent;
    border-radius: 12px;
    background-color: #f7f9fb;
  }
  .fp-find:focus-within {
    border-color: #8cc300;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px #f2f8e3;
  }
  .fp-find input, .fp-find input:focus {
    font-size: 14.5px;
  }
  .fp-find .material-symbols-outlined {
    font-size: 17px;
  }
  /* ------------------------------------------- MOB-F1j, the fields */
  .fp-b {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 16px 14px 18px;
  }
  .fp-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ffield-l {
    margin-bottom: 7px;
    font-size: 12px;
  }
  .ffield-i {
    font-size: 16px;
    top: -0.6px;
  }
  .ffield-b, .ffield-b:hover, .ffield-b:focus {
    height: 46px;
    padding: 0 14px;
    border-radius: 12px;
  }
  .ffield-b > .ffield-v {
    font-size: 14.5px;
  }
  .ffield-b .material-symbols-outlined {
    font-size: 20px;
  }
  .fdate, .fdate:focus,
  .fp-range input, .fp-range input:focus {
    height: 46px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 14.5px;
  }
  @supports (-webkit-touch-callout: none) {
    .fdate, .fdate:focus {
      line-height: 44px;
    }
  }
  /*
      Two 46px date boxes, the word "to" and "Clear" do not fit on one line this narrow.

      `flex-wrap: wrap` alone does NOT fix that, which is the trap here: `.fdate` is `flex: 1`
      with `min-width: 0`, so the boxes SHRINK to make room instead of the line wrapping. Measured
      on the served bundle at 390px with a date set: 148.4px → **117.1px**, while a native
      `<input type="date">` needs **156.5px** for its own value — so the control silently clipped
      the date it was showing. `scrollWidth` cannot see that: the text is in the input's shadow
      DOM. Only a zoom screenshot and an off-screen probe of the control's natural width found it.

      So "Clear" is given the whole line rather than being left to wrap: the boxes then keep the
      width MOB-F1j gives them whether or not a date is set, and nothing is ever cut.

      `.fp-range` keeps the plain wrap — its inputs are `type="number"`, they have no intrinsic
      width to clip below, and giving every set range field an extra line would cost 54px each.
  */
  .fp-dates,
  .fp-range {
    flex-wrap: wrap;
  }
  .fp-dates > .fp-inline-clr {
    flex: 1 0 100%;
    justify-content: flex-end;
    margin-left: 0;
  }
  .fp-range > .fp-inline-clr {
    margin-left: auto;
  }
  /* not sized by the spec: given a full touch target, like every other control here */
  .fp-inline-clr, .fp-inline-clr:hover, .fp-inline-clr:focus {
    min-height: 44px;
    padding: 0 10px;
    font-size: 13.5px;
  }
  /* ----------------------------------------- MOB-F1k, the open list */
  #filters-v2 > .ffield-x {
    padding: 9px;
    border-radius: 14px;
  }
  .ffield-x .fp-s {
    min-height: 40px;
    padding: 0 11px;
    border-radius: 10px;
  }
  .ffield-x .fp-s input, .ffield-x .fp-s input:focus {
    font-size: 14px;
  }
  .fopt, .fopt:hover, .fopt:focus {
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 10px;
  }
  .fopt > i {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }
  .fopt > i .material-symbols-outlined {
    font-size: 15px;
  }
  .fopt > span:last-child {
    font-size: 14.5px;
  }
  .ffield-clr, .ffield-clr:hover, .ffield-clr:focus {
    min-height: 42px;
    border-radius: 10px;
    font-size: 14px;
  }
  .fp-sx, .fp-sx:hover, .fp-sx:focus {
    width: 30px;
    height: 30px;
  }
  .fp-sx .material-symbols-outlined {
    font-size: 17px;
  }
  /* ------------------------------------------- MOB-F1m, the footer */
  .fp-f {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px 14px;
  }
  .fp-count {
    flex: 1 0 100%;
    text-align: center;
    /*
        The one line of client text in this footer. It wraps rather than overflowing its box —
        a long noun on a narrow phone must not be cut, and nothing here is ellipsised.
    */
    white-space: normal;
    line-height: 1.4;
  }
  .fp-clr, .fp-clr:hover, .fp-clr:focus {
    flex: none;
    height: 46px;
    padding: 0 22px;
    font-size: 14px;
  }
  .fp-done, .fp-done:hover, .fp-done:focus {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 20px;
    font-size: 15px;
  }
}
/* =========================================================================
   FIL-06 / FIL-07 / FIL-08 — the applied filters OUTSIDE the panel
   (custom/filters-applied.js): the Filters button's two states, the pill row
   under the action bar, the "Other applied filters" list, the empty-result box.

   Same two rules as above: every element that renders text carries its own
   size, weight, line-height and colour (lib's `*` rule kills inheritance), and
   every button restates its box (button.scss gives it 44px and 0 36px padding).
   ========================================================================= */
/* ------------------------------------------------- FIL-06, the button */
/*
    FIL-06c, widened by the user on 2026-10-16: the Filters button must read as ONE SET with Sort by
    and Group by beside it (references-toolbar.scss), which the lib's `.btn` defaults do not — they
    give it a 16px label in `$button-color` (#344054) and a 22.8px glyph pinned 10px from the left
    edge (button.scss `$font-size * 1.9`). Measured against its neighbours: label 14px/600/$home-fg-1,
    glyph 17px/$home-fg-3, 9px between them. The 44px height is already shared and is not touched.

    `$home-fg-1` here, not `$fp-fg-1`: this button sits in the action bar next to the two toolbar
    buttons and has to match THEM. The app black above is for the panel's own surface.
*/
.btn.collect-filters, .btn.collect-filters:hover, .btn.collect-filters:focus {
  padding: 0 14px 0 40px;
  font-size: 14px;
  font-weight: 600;
  color: #26272b;
}

.btn.collect-filters[data-icon]::before {
  left: 14px;
  font-size: 17px;
  color: #6b6e76;
}

/*
    In the green state the glyph takes the button's own colour rather than the toolbar's active
    green ($home-green-600): label, glyph and count chip are then one colour, which is what
    FIL-06a's "green border, light green background, green text" reads as.
*/
.btn.collect-filters.fa-c[data-icon]::before, .btn.collect-filters.fa-open[data-icon]::before {
  color: #5f8500;
}

/*
    The lib already paints a count on this button — a square green chip from
    `.collect-filters.count::after` (form.scss), fed by `data-count`, which it
    REMOVES at the start of every refresh. FIL-06 wants the button green and the
    count round for as long as a filter is applied, so both are driven from this
    module's own `.fa-c` / `data-fa-count` instead, written from the state the
    moment it changes. There is only one `::after`, so this rule simply wins it.
*/
.collect-filters.fa-c, .collect-filters.fa-c:hover, .collect-filters.fa-open, .collect-filters.fa-open:hover {
  border-color: #8cc300;
  background-color: #f2f8e3;
  color: #5f8500;
}

.btn.collect-filters.fa-c {
  /*
      8 + the chip + 8. The chip's box is 32, not the 20 of `min-width`: `min-width` sizes its
      CONTENT box and the 6px side paddings sit outside it, so 36 left the chip 5px over the "s"
      of "Filters" (measured 2026-10-17: label ends at 393.3, chip started at 388.3). 32 holds up
      to three digits, since the digits stay inside the 20px minimum.
  */
  padding-right: 48px;
}

.collect-filters.fa-c::after {
  content: attr(data-fa-count);
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background-color: #8cc300;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.366;
  color: #ffffff;
}

/* --------------------------------------------- FIL-07a-f, the pill row */
/*
    A SIBLING between `.headers` and `.table`, never inside `.headers`: that one
    is `scrollable-x` and 44px high and this row wraps. `.headers` carries
    `margin-bottom: 16px` (headers.scss), which is the gap above the row.
*/
.fa {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
}

.fa.on {
  display: flex;
}

.fa-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background-color: #8cc300;
}

.fa-cap .material-symbols-outlined {
  font-size: 14px;
  color: #ffffff;
}

.fa-cap b {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.366;
  color: #ffffff;
}

.fa-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

.fa-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  height: 28px;
  padding: 0 7px 0 11px;
  border: 1px solid #c3e090;
  border-radius: 999px;
  background-color: #f2f8e3;
}

.fa-pill-l {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.366;
  color: #5f8500;
}

/*
    FIL-07c: the values in bold, "cut with … if too long". The ONLY cut in this
    phase, and the one the spec asks for — FIL-07d's tooltip is on the pill, and
    the "+N more" list below spells every value out in full.
*/
.fa-pill b {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.366;
  color: #5f8500;
}

.fa-pill-x, .fa-pill-x:hover, .fa-pill-x:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  box-shadow: none;
  color: #5f8500;
  opacity: 0.65;
  cursor: pointer;
}

.fa-pill-x:hover {
  background-color: rgba(95, 133, 0, 0.12);
  opacity: 1;
}

.fa-pill-x .material-symbols-outlined {
  font-size: 13px;
  color: inherit;
}

.fa-morewrap {
  display: inline-flex;
}

.fa-more, .fa-more:hover, .fa-more:focus {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  min-height: 0;
  margin: 0;
  padding: 0 11px;
  border: 1px solid #d6d9df;
  border-radius: 999px;
  background-color: #ffffff;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.366;
  color: #4b4d54;
  white-space: nowrap;
  cursor: pointer;
}

.fa-more:hover {
  border-color: #8cc300;
  color: #5f8500;
}

/* FIL-07g: the button turns green while its list is open */
.fa-more.on, .fa-more.on:hover {
  border-color: #8cc300;
  background-color: #f2f8e3;
  color: #5f8500;
}

.fa-more .material-symbols-outlined {
  font-size: 15px;
  color: inherit;
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fa-more.on .material-symbols-outlined {
  transform: rotate(180deg);
}

.fa-side {
  display: flex;
  align-items: center;
  flex: none;
  height: 28px;
}

.fa-clr, .fa-clr:hover, .fa-clr:focus {
  display: inline-flex;
  align-items: center;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.366;
  color: #6b6e76;
  white-space: nowrap;
  cursor: pointer;
}

.fa-clr:hover {
  background-color: #f7f9fb;
  color: #101828;
}

/* --------------------------- FIL-07g-k, "Other applied filters" */
/*
    A direct child of `body`, like `#filters-v2`: `position: fixed` inside
    `#content` / `.page` is clipped and trapped by iOS WebKit, and the row it
    hangs from sits inside a `.tabs > .data` block with its own overflow.
*/
#filters-applied-more {
  position: relative;
  z-index: 2000;
}

.fa-pop {
  position: fixed;
  display: block;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: 380px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 18px;
  box-shadow: 0 22px 54px rgba(16, 24, 40, 0.18), 0 4px 12px rgba(16, 24, 40, 0.07);
  animation: fp-in 170ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* FIL-07h: stays on top while the list scrolls, with a hairline under it */
.fa-pop-h {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #e6e8ec;
  background-color: rgba(255, 255, 255, 0.97);
}

.fa-pop-h > span {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.366;
  letter-spacing: -0.005em;
  color: #101828;
}

.fa-pop-h > em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background-color: #8cc300;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.366;
  color: #ffffff;
}

.fa-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 10px 14px 16px;
  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* FIL-07k: rows separated by a hairline — an inset shadow, so no row shifts by 1px */
.fa-row + .fa-row {
  box-shadow: inset 0 1px 0 #e6e8ec;
}

.fa-row:last-child {
  padding-bottom: 16px;
}

.fa-row:hover {
  background-color: #f7f9fb;
}

.fa-row-t {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.fa-row-l {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.366;
  letter-spacing: 0.01em;
  color: #6b6e76;
}

.fa-row-l em {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background-color: #e9ecf1;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.366;
  color: #6b6e76;
}

.fa-vals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/*
    FIL-07i: every selected value as its own tag, wrapping on as many lines as it
    needs. Nothing here is ever cut — `overflow-wrap: anywhere` breaks a long
    single word instead of clipping it, and the row grows.
*/
.fa-vals i {
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid #d6d9df;
  border-radius: 999px;
  background-color: #ffffff;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  color: #101828;
  overflow-wrap: anywhere;
}

.fa-row-x, .fa-row-x:hover, .fa-row-x:focus {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  min-height: 0;
  margin: -6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  box-shadow: none;
  color: #9a9da6;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1), color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.fa-row-x:hover {
  background-color: #fdeceb;
  color: #e2231a;
}

.fa-row-x .material-symbols-outlined {
  font-size: 17px;
  color: inherit;
}

/* --------------------------------------------- FIL-08, the empty result */
.fa-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 24px;
  border: 1px dashed #d6d9df;
  border-radius: 16px;
  background-color: #ffffff;
  text-align: center;
}

.fa-empty b {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.366;
  color: #101828;
}

.fa-empty > span {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.366;
  color: #6b6e76;
}

.fa-empty-clr, .fa-empty-clr:hover, .fa-empty-clr:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-height: 0;
  margin: 6px 0 0;
  padding: 0 18px;
  border: 1px solid #d6d9df;
  border-radius: 999px;
  background-color: #ffffff;
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.366;
  color: #101828;
  cursor: pointer;
}

.fa-empty-clr:hover {
  background-color: #f7f9fb;
}

/* =========================================================================
   MOB-F2 — the applied filters on a phone (≤640px), Phase 4
   =========================================================================

   Same markup as every other width. Two things custom/filters-applied.js cannot read off the
   layout are published here as custom properties and read back by it:

       --fa-limit    how many pills are drawn before "+N more" — 7, three on a phone (MOB-F2b)
       --fa-pop-gap  the "+N more" list's margin to a window edge — 12, 14 on a phone (MOB-F2c)

   The list's WIDTH is not one of them: `.fa-pop` is sized here and measured back by placePop(),
   so the full-width phone rule is a plain CSS rule rather than a second formula in the JS.
   ========================================================================= */
.fa {
  --fa-limit: 7;
}

#filters-applied-more {
  --fa-pop-gap: 12px;
}

@media (max-width: 640px) {
  .fa {
    --fa-limit: 3;
  }
  #filters-applied-more {
    --fa-pop-gap: 14px;
  }
  /*
      MOB-F2a: the counter and "Clear all" on the first line, the pills on the next. `.fa-list`
      is given the whole width so it falls under both, and `.fa-side` is pushed to the right edge
      by the free space the counter leaves — nothing is positioned absolutely, so the row still
      grows downward as the pills wrap (MOB-F2b).
  */
  .fa {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 12px;
  }
  .fa-cap {
    order: 0;
  }
  .fa-side {
    order: 1;
    margin-left: auto;
  }
  .fa-list {
    order: 2;
    flex: 1 0 100%;
  }
  /*
      The pill is left at its desktop height: MOB-F2 changes how MANY are shown, not their shape.
      Its × grows to the largest circle a 28px pill holds — 44px is impossible inside it, and
      making the pill taller to reach 44 is not something the spec asks for.
  */
  .fa-pill-x, .fa-pill-x:hover, .fa-pill-x:focus {
    width: 24px;
    height: 24px;
  }
  .fa-pill-x .material-symbols-outlined {
    font-size: 15px;
  }
  /* the pill's one sanctioned cut (FIL-07c) has to be narrower than the screen it is on */
  .fa-pill b {
    max-width: calc(100vw - 150px);
  }
  .fa-clr, .fa-clr:hover, .fa-clr:focus {
    min-height: 28px;
    padding: 4px 6px;
    font-size: 13px;
  }
  /* ----------------------------------- MOB-F2c, the "+N more" list */
  .fa-pop {
    width: calc(100vw - var(--fa-pop-gap) * 2);
    max-width: none;
    /*
        Not 380px here: that is most of a phone screen and the list would start under the
        action bar and end past the fold. placePop() shrinks this further whenever the room
        under the button is less, and never grows it.
    */
    max-height: 68vh;
    border-radius: 18px;
  }
  .fa-pop-h {
    padding: 15px 16px 13px;
  }
  .fa-row {
    gap: 10px;
    padding: 14px 10px 15px 16px;
  }
  /* MOB-F2: 40px remove buttons */
  .fa-row-x, .fa-row-x:hover, .fa-row-x:focus {
    width: 40px;
    height: 40px;
    margin-top: -8px;
  }
  .fa-row-x .material-symbols-outlined {
    font-size: 20px;
  }
  .fa-vals i {
    padding: 6px 11px;
    font-size: 13.5px;
  }
  /* --------------------------------- FIL-08 on a phone, same box */
  .fa-empty {
    padding: 36px 18px;
  }
  .fa-empty b {
    font-size: 17px;
  }
  .fa-empty-clr, .fa-empty-clr:hover, .fa-empty-clr:focus {
    height: 44px;
    padding: 0 20px;
  }
}
/*
    AI/QA Phase 3 - the QA hold on the lists (custom/qa-hold.js): the selection box of a bulk action, and the selection
    bar of Fig. 4 ("N forms selected · Clear · Request N forms"). Geometry from the client mock-up (.bulkbar), colours and
    type from the app ($a-color, $home-* tokens). After ./home: it uses the $home-* variables.
*/
.table .t-select .input-checkbox > a.disabled .box {
  background-color: #f8f8f8;
  border-color: #eaecf0;
  box-shadow: none;
}
.table .t-select .input-checkbox > a.disabled .box > div {
  background-color: #f8f8f8;
}

.table .t-buttons > div {
  justify-content: flex-start;
}
.table .t-buttons > div a:first-child {
  flex-grow: 0 !important;
}
.table .t-buttons > div > a.t-row-link {
  position: absolute;
  inset: 0;
  width: auto !important;
  height: auto;
  padding: 0;
}
.table .t-buttons > div > a.btn {
  position: relative;
  z-index: 1;
}

.table td.t-buttons {
  position: relative;
}

#menu .submenu[data-id=stores] > div {
  width: 282px;
}
@media screen and (min-width: 641px) {
  #menu .submenu[data-id=stores] > div {
    margin-left: -6px;
  }
}
#menu .submenu[data-id=stores] .text .p {
  max-width: none;
}

.qa-selbar {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 999px;
  padding: 9px 10px 9px 14px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.08);
  white-space: nowrap;
}
.qa-selbar .qa-selbar-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background-color: #8cc300;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
}
.qa-selbar .qa-selbar-t {
  font-size: 13.5px;
  font-weight: 600;
  color: #4b4d54;
  line-height: 1;
}
.qa-selbar .qa-selbar-clr {
  font-size: 13px;
  font-weight: 600;
  color: #9a9da6;
  text-decoration: none;
  border-radius: 999px;
  padding: 7px 11px;
  line-height: 1;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.qa-selbar .qa-selbar-clr:hover {
  color: #26272b;
  background-color: #f7f9fb;
}
.qa-selbar .btn.qa-selbar-go {
  height: auto;
  min-height: 0;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
}
.qa-selbar .qa-selbar-acts {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qa-selbar .btn.secondary.qa-selbar-go {
  padding: 8px 15px;
}
.qa-selbar .btn.secondary.qa-selbar-go, .qa-selbar .btn.secondary.qa-selbar-go:hover, .qa-selbar .btn.secondary.qa-selbar-go:visited, .qa-selbar .btn.secondary.qa-selbar-go:active, .qa-selbar .btn.secondary.qa-selbar-go:focus {
  color: #344054;
}
@media screen and (max-width: 640px) {
  .qa-selbar {
    left: 14px;
    right: 14px;
    transform: none;
    flex-wrap: wrap;
    row-gap: 10px;
    border-radius: 20px;
    padding: 10px;
  }
  .qa-selbar .qa-selbar-clr {
    margin-left: auto;
  }
  .qa-selbar .btn.qa-selbar-go {
    flex: 1 0 100%;
    justify-content: center;
  }
  .qa-selbar .qa-selbar-acts {
    flex: 1 0 100%;
  }
  .qa-selbar .qa-selbar-acts .btn.qa-selbar-go {
    flex: 1 1 0;
    min-width: 0;
  }
}

/*
    AI/QA: the QA's and the Manager's side of the observation modal - the Data column's cards (custom/observation-review.js,
    custom/observation-ai.js), the header pills, the banner bar and the footer (custom/qa-live.js), the dialogs
    (custom/modal/qa-decline.js, custom/modal/confirm.js with `icon`), the photo viewer (custom/modal/photo-viewer.js) and
    the shared parts (custom/qa-ui.js).

    Design = the client mock-up (Downloads/Digit with AI/Salesteamwatch Admin.html): CellFrame / CellHeader / StatusPair /
    SourceChip / MiniBtn / EvidenceRow (:1425-2470), ModeBanner / ModalFooter / ColHead (:2776-3036), DialogShell /
    CaptureBox (:1712-1872), ImageViewer (:2549), Chip / QAStatusPill (:1503-1530). Geometry, type sizes and structure are the
    mock-up's; every colour is the app's (memory app-colours-fonts-over-mockup): the $home-* tokens are the design system's
    own values, and the two tints the app has no variable for (amber, blue) are derived from $home-gold / $home-blue. The
    font stays the app's. Every element that holds text sets its own size / weight / colour: lib's `* { color; font-weight:
    400 }` reaches each span directly (memory universal-selector-kills-inheritance), and a bare div has no font-size (reset).
*/
/* ------------------------------------------------------------------ shared parts (custom/qa-ui.js) */
.qa-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #f7f9fb;
  border-color: #e6e8ec;
  color: #6b6e76;
}
.qa-chip .qa-chip-t {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: inherit;
}
.qa-chip .material-symbols-outlined {
  font-size: 13px;
  color: inherit;
  font-variation-settings: "FILL" 0, "wght" 600;
}
.qa-chip.only-icon {
  padding: 3px;
}
.qa-chip[data-tone=green] {
  background-color: #f2f8e3;
  border-color: #c3e090;
  color: #76a300;
}
.qa-chip[data-tone=green] .qa-chip-t, .qa-chip[data-tone=green] .material-symbols-outlined {
  color: inherit;
}
.qa-chip[data-tone=red] {
  background-color: #fdeceb;
  border-color: rgba(226, 35, 26, 0.26);
  color: rgb(74.2782446312%, 11.5032679739%, 8.5452847806%);
}
.qa-chip[data-tone=red] .qa-chip-t, .qa-chip[data-tone=red] .material-symbols-outlined {
  color: inherit;
}
.qa-chip[data-tone=amber] {
  background-color: rgb(97.1764705882%, 95.2549019608%, 90.431372549%);
  border-color: rgb(90.1176470588%, 83.3921568627%, 66.5098039216%);
  color: rgb(60.4451182535%, 44.260359814%, 3.6333131191%);
}
.qa-chip[data-tone=amber] .qa-chip-t, .qa-chip[data-tone=amber] .material-symbols-outlined {
  color: inherit;
}
.qa-chip[data-tone=blue] {
  background-color: rgb(92.2352941176%, 95.2941176471%, 98.1647058824%);
  border-color: rgb(77.3529411765%, 86.2745098039%, 94.6470588235%);
  color: #2768a5;
}
.qa-chip[data-tone=blue] .qa-chip-t, .qa-chip[data-tone=blue] .material-symbols-outlined {
  color: inherit;
}
.qa-chip[data-tone=grey] {
  background-color: #f1f4f7;
  border-color: #d6d9df;
  color: #6b6e76;
}
.qa-chip[data-tone=grey] .qa-chip-t, .qa-chip[data-tone=grey] .material-symbols-outlined {
  color: inherit;
}

.qa-pair {
  display: inline-flex;
  align-items: center;
  height: 21px;
  flex: none;
  background-color: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 999px;
}
.qa-pair .qa-pair-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0 9px 0 8px;
  color: #c2c5cc;
}
.qa-pair .qa-pair-seg:first-child {
  padding: 0 8px 0 9px;
}
.qa-pair .qa-pair-seg + .qa-pair-seg {
  border-left: 1px solid #e6e8ec;
}
.qa-pair .qa-pair-who {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1;
  color: #6b6e76;
}
.qa-pair .qa-pair-seg[data-g=none] .qa-pair-who {
  color: #c2c5cc;
}
.qa-pair .material-symbols-outlined {
  font-size: 13px;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 700;
  color: inherit;
}
.qa-pair .qa-pair-dash {
  display: block;
  width: 7px;
  height: 1.5px;
  border-radius: 1px;
  background-color: #c2c5cc;
}
.qa-pair .qa-pair-n {
  font-size: 9.5px;
  font-weight: 700;
  color: #9a9da6;
}
.qa-pair .qa-pair-seg[data-g=ok] {
  color: #76a300;
}
.qa-pair .qa-pair-seg[data-g=ko] {
  color: #e2231a;
}
.qa-pair .qa-pair-seg[data-g=disagreed], .qa-pair .qa-pair-seg[data-g=corrected] {
  color: rgb(60.4451182535%, 44.260359814%, 3.6333131191%);
}

.qa-src {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 2px 9px 2px 7px;
  border: 1px solid;
  border-radius: 999px;
  background-color: #f7f9fb;
  border-color: #e6e8ec;
  color: #6b6e76;
}
.qa-src .material-symbols-outlined {
  font-size: 14px;
  color: inherit;
  font-variation-settings: "FILL" 0, "wght" 500;
}
.qa-src .qa-src-t {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}
.qa-src[data-kind=ai] {
  background-color: #f2f8e3;
  border-color: #c3e090;
  color: #76a300;
}
.qa-src[data-kind=ai][data-band=mid] {
  background-color: rgb(97.1764705882%, 95.2549019608%, 90.431372549%);
  border-color: rgb(90.1176470588%, 83.3921568627%, 66.5098039216%);
  color: rgb(60.4451182535%, 44.260359814%, 3.6333131191%);
}
.qa-src[data-kind=manual] {
  color: #4b4d54;
}
.qa-src[data-kind=nofill] {
  color: #9a9da6;
}

.entity-edit.observation .input > .label .qa-src {
  margin: -3px 0 -3px 8px;
  vertical-align: 1px;
}

.qa-mini, .qa-mini:hover, .qa-mini:visited, .qa-mini:active, .qa-mini:focus, button.qa-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid #d6d9df;
  border-radius: 999px;
  background-color: #ffffff;
  color: #4b4d54;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1), border-color 160ms, transform 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.qa-mini .qa-mini-t, .qa-mini:hover .qa-mini-t, .qa-mini:visited .qa-mini-t, .qa-mini:active .qa-mini-t, .qa-mini:focus .qa-mini-t, button.qa-mini .qa-mini-t {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
  white-space: nowrap;
}
.qa-mini .material-symbols-outlined, .qa-mini:hover .material-symbols-outlined, .qa-mini:visited .material-symbols-outlined, .qa-mini:active .material-symbols-outlined, .qa-mini:focus .material-symbols-outlined, button.qa-mini .material-symbols-outlined {
  font-size: 15px;
  color: inherit;
  font-variation-settings: "FILL" 0, "wght" 600;
}
.qa-mini:active, .qa-mini:hover:active, .qa-mini:visited:active, .qa-mini:active:active, .qa-mini:focus:active, button.qa-mini:active {
  transform: scale(0.96);
}
.qa-mini[data-tone=green], .qa-mini:hover[data-tone=green], .qa-mini:visited[data-tone=green], .qa-mini:active[data-tone=green], .qa-mini:focus[data-tone=green], button.qa-mini[data-tone=green] {
  background-color: #8cc300;
  border-color: #8cc300;
  color: #ffffff;
}
.qa-mini[data-tone=green]:hover, .qa-mini:hover[data-tone=green]:hover, .qa-mini:visited[data-tone=green]:hover, .qa-mini:active[data-tone=green]:hover, .qa-mini:focus[data-tone=green]:hover, button.qa-mini[data-tone=green]:hover {
  background-color: #7ca809;
  border-color: #7ca809;
}
.qa-mini[data-tone=red], .qa-mini:hover[data-tone=red], .qa-mini:visited[data-tone=red], .qa-mini:active[data-tone=red], .qa-mini:focus[data-tone=red], button.qa-mini[data-tone=red] {
  color: #e2231a;
}
.qa-mini[data-tone=red]:hover, .qa-mini:hover[data-tone=red]:hover, .qa-mini:visited[data-tone=red]:hover, .qa-mini:active[data-tone=red]:hover, .qa-mini:focus[data-tone=red]:hover, button.qa-mini[data-tone=red]:hover {
  background-color: #fdeceb;
  border-color: rgba(226, 35, 26, 0.26);
}
.qa-mini[data-tone=ghost]:hover, .qa-mini:hover[data-tone=ghost]:hover, .qa-mini:visited[data-tone=ghost]:hover, .qa-mini:active[data-tone=ghost]:hover, .qa-mini:focus[data-tone=ghost]:hover, button.qa-mini[data-tone=ghost]:hover {
  background-color: #f7f9fb;
}
.qa-mini.disabled, .qa-mini:disabled, .qa-mini:hover.disabled, .qa-mini:hover:disabled, .qa-mini:visited.disabled, .qa-mini:visited:disabled, .qa-mini:active.disabled, .qa-mini:active:disabled, .qa-mini:focus.disabled, .qa-mini:focus:disabled, button.qa-mini.disabled, button.qa-mini:disabled {
  background-color: #f7f9fb;
  border-color: #e6e8ec;
  color: #c2c5cc;
  cursor: not-allowed;
  transform: none;
}

.qa-ibtn, .qa-ibtn:hover, .qa-ibtn:visited, .qa-ibtn:active, .qa-ibtn:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #6b6e76;
  text-decoration: none;
  transition: background-color 160ms, color 160ms;
}
.qa-ibtn .material-symbols-outlined, .qa-ibtn:hover .material-symbols-outlined, .qa-ibtn:visited .material-symbols-outlined, .qa-ibtn:active .material-symbols-outlined, .qa-ibtn:focus .material-symbols-outlined {
  font-size: 16px;
  color: inherit;
  font-variation-settings: "FILL" 0, "wght" 500;
}
.qa-ibtn:hover, .qa-ibtn:hover:hover, .qa-ibtn:visited:hover, .qa-ibtn:active:hover, .qa-ibtn:focus:hover {
  background-color: #f7f9fb;
  color: #26272b;
}
.qa-ibtn.qa-quiet, .qa-ibtn:hover.qa-quiet, .qa-ibtn:visited.qa-quiet, .qa-ibtn:active.qa-quiet, .qa-ibtn:focus.qa-quiet {
  width: 26px;
  height: 26px;
  color: #9a9da6;
}
.qa-ibtn.qa-quiet .material-symbols-outlined, .qa-ibtn:hover.qa-quiet .material-symbols-outlined, .qa-ibtn:visited.qa-quiet .material-symbols-outlined, .qa-ibtn:active.qa-quiet .material-symbols-outlined, .qa-ibtn:focus.qa-quiet .material-symbols-outlined {
  font-size: 15px;
}

.qa-btn, .qa-btn:hover, .qa-btn:visited, .qa-btn:active, .qa-btn:focus, button.qa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  background-color: #8cc300;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1), border-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1), color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.qa-btn .qa-btn-t, .qa-btn:hover .qa-btn-t, .qa-btn:visited .qa-btn-t, .qa-btn:active .qa-btn-t, .qa-btn:focus .qa-btn-t, button.qa-btn .qa-btn-t {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}
.qa-btn .material-symbols-outlined, .qa-btn:hover .material-symbols-outlined, .qa-btn:visited .material-symbols-outlined, .qa-btn:active .material-symbols-outlined, .qa-btn:focus .material-symbols-outlined, button.qa-btn .material-symbols-outlined {
  font-size: 17px;
  color: inherit;
  font-variation-settings: "FILL" 0, "wght" 600;
}
.qa-btn:hover, .qa-btn:hover:hover, .qa-btn:visited:hover, .qa-btn:active:hover, .qa-btn:focus:hover, button.qa-btn:hover {
  background-color: #7ca809;
}
.qa-btn[data-tone=red], .qa-btn:hover[data-tone=red], .qa-btn:visited[data-tone=red], .qa-btn:active[data-tone=red], .qa-btn:focus[data-tone=red], button.qa-btn[data-tone=red] {
  background-color: #e2231a;
}
.qa-btn[data-tone=red]:hover, .qa-btn:hover[data-tone=red]:hover, .qa-btn:visited[data-tone=red]:hover, .qa-btn:active[data-tone=red]:hover, .qa-btn:focus[data-tone=red]:hover, button.qa-btn[data-tone=red]:hover {
  background-color: rgb(74.2782446312%, 11.5032679739%, 8.5452847806%);
}
.qa-btn[data-tone=ghost], .qa-btn:hover[data-tone=ghost], .qa-btn:visited[data-tone=ghost], .qa-btn:active[data-tone=ghost], .qa-btn:focus[data-tone=ghost], button.qa-btn[data-tone=ghost] {
  background-color: #ffffff;
  border-color: #d6d9df;
  color: #4b4d54;
  padding: 11px 18px;
}
.qa-btn[data-tone=ghost] .qa-btn-t, .qa-btn:hover[data-tone=ghost] .qa-btn-t, .qa-btn:visited[data-tone=ghost] .qa-btn-t, .qa-btn:active[data-tone=ghost] .qa-btn-t, .qa-btn:focus[data-tone=ghost] .qa-btn-t, button.qa-btn[data-tone=ghost] .qa-btn-t {
  font-weight: 600;
}
.qa-btn[data-tone=ghost]:hover, .qa-btn:hover[data-tone=ghost]:hover, .qa-btn:visited[data-tone=ghost]:hover, .qa-btn:active[data-tone=ghost]:hover, .qa-btn:focus[data-tone=ghost]:hover, button.qa-btn[data-tone=ghost]:hover {
  background-color: #f7f9fb;
}
.qa-btn.disabled, .qa-btn:disabled, .qa-btn:hover.disabled, .qa-btn:hover:disabled, .qa-btn:visited.disabled, .qa-btn:visited:disabled, .qa-btn:active.disabled, .qa-btn:active:disabled, .qa-btn:focus.disabled, .qa-btn:focus:disabled, button.qa-btn.disabled, button.qa-btn:disabled {
  background-color: #c9dd96;
  border-color: transparent;
  color: #ffffff;
  cursor: not-allowed;
}
.qa-btn[data-tone=red].disabled, .qa-btn[data-tone=red]:disabled, .qa-btn:hover[data-tone=red].disabled, .qa-btn:hover[data-tone=red]:disabled, .qa-btn:visited[data-tone=red].disabled, .qa-btn:visited[data-tone=red]:disabled, .qa-btn:active[data-tone=red].disabled, .qa-btn:active[data-tone=red]:disabled, .qa-btn:focus[data-tone=red].disabled, .qa-btn:focus[data-tone=red]:disabled, button.qa-btn[data-tone=red].disabled, button.qa-btn[data-tone=red]:disabled {
  background-color: rgb(94.8823529412%, 61.1764705882%, 59.5882352941%);
}

.qa-ev {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(226, 35, 26, 0.26);
  border-radius: 8px;
  background-color: #ffffff;
}
.qa-ev[data-tone=amber] {
  border-color: rgb(90.1176470588%, 83.3921568627%, 66.5098039216%);
}
.qa-ev[data-tone=amber] .qa-ev-who {
  color: rgb(60.4451182535%, 44.260359814%, 3.6333131191%);
}
.qa-ev[data-tone=green] {
  border-color: rgba(140, 195, 0, 0.45);
}
.qa-ev[data-tone=green] .qa-ev-who {
  color: #76a300;
}
.qa-ev .qa-ev-hd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 6px;
}
.qa-ev .qa-ev-who {
  font-size: 12px;
  font-weight: 500;
  color: rgb(74.2782446312%, 11.5032679739%, 8.5452847806%);
  line-height: 1.4;
}
.qa-ev .qa-ev-bd {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.qa-ev .qa-ev-reason {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 400;
  color: #4b4d54;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.qa-ev .qa-ev-thumb {
  flex: none;
}

.qa-ev-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.qa-ev-line > .qa-ev {
  flex: 1 1 auto;
  min-width: 0;
}
.qa-ev-line > .qa-ibtn {
  margin-top: 12px;
}

.qa-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #e9ecf1;
  color: #4b4d54;
  font-size: 9px;
  font-weight: 700;
}
.qa-avatar[data-role=ma] {
  background-color: #f2f8e3;
  color: #76a300;
}
.qa-avatar[data-role=qa] {
  background-color: rgb(92.2352941176%, 95.2941176471%, 98.1647058824%);
  color: #2768a5;
}

/* ------------------------------------------------------------------ the observation modal */
.entity-edit.observation a, .entity-edit.observation a:visited, .entity-edit.observation a:active, .entity-edit.observation a:focus {
  text-decoration: none;
}
.entity-edit.observation .qa-pill-pfx {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a9da6;
  line-height: 1;
}
.entity-edit.observation .qa-pill-t {
  font-size: 13.5px;
  font-weight: 600;
  color: #26272b;
  line-height: 1.2;
}
.entity-edit.observation .qa-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid;
  border-radius: 999px;
  white-space: nowrap;
  background-color: #f7f9fb;
  border-color: #e6e8ec;
  color: #6b6e76;
}
.entity-edit.observation .qa-pill .qa-pill-dot {
  display: block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #9a9da6;
}
.entity-edit.observation .qa-pill .qa-pill-pfx {
  color: inherit;
  opacity: 0.62;
}
.entity-edit.observation .qa-pill .qa-pill-t {
  font-size: 13px;
  font-weight: 700;
  color: inherit;
}
.entity-edit.observation .qa-pill[data-tone=green] {
  background-color: #f2f8e3;
  border-color: #c3e090;
  color: #76a300;
}
.entity-edit.observation .qa-pill[data-tone=red] {
  background-color: #fdeceb;
  border-color: rgba(226, 35, 26, 0.26);
  color: rgb(74.2782446312%, 11.5032679739%, 8.5452847806%);
}
.entity-edit.observation .qa-pill[data-tone=amber] {
  background-color: rgb(97.1764705882%, 95.2549019608%, 90.431372549%);
  border-color: rgb(90.1176470588%, 83.3921568627%, 66.5098039216%);
  color: rgb(60.4451182535%, 44.260359814%, 3.6333131191%);
}
.entity-edit.observation .qa-pill[data-tone=blue] {
  background-color: rgb(92.2352941176%, 95.2941176471%, 98.1647058824%);
  border-color: rgb(77.3529411765%, 86.2745098039%, 94.6470588235%);
  color: #2768a5;
}
.entity-edit.observation .qa-pill[data-tone=grey] {
  background-color: #f1f4f7;
  border-color: #d6d9df;
  color: #6b6e76;
}
.entity-edit.observation .qa-pill[data-tone=green] .qa-pill-dot {
  background-color: #8cc300;
}
.entity-edit.observation .qa-pill[data-tone=red] .qa-pill-dot {
  background-color: #e2231a;
}
.entity-edit.observation .qa-pill[data-tone=amber] .qa-pill-dot {
  background-color: #b7860b;
}
.entity-edit.observation .qa-pill[data-tone=blue] .qa-pill-dot {
  background-color: #5a9bd8;
}
.entity-edit.observation .qa-pill[data-tone=grey] .qa-pill-dot {
  background-color: #9a9da6;
}
@media screen and (min-width: 641px) {
  .entity-edit.observation .header .t-qa-status {
    display: flex;
    align-items: center;
  }
}
.entity-edit.observation .qa-viewing {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 5px 12px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  background-color: #f7f9fb;
  border-color: #e6e8ec;
  color: #6b6e76;
}
.entity-edit.observation .qa-marker-m .qa-viewing {
  margin-left: 6px;
}
@media screen and (max-width: 640px) {
  .entity-edit.observation .header .qa-viewing {
    display: none;
  }
}
.entity-edit.observation {
  /*
      mock-up ModeBanner (:2794): full width under the header, tinted, its icon then the sentence. The modal's box pads the form by 15px (.modal-box 10px + .p-5): the bar takes them
      back so it runs edge to edge, as the header's line does
  */
}
.entity-edit.observation > .qa-bars {
  margin: 0 -15px;
}
.entity-edit.observation > .qa-bars:empty {
  display: none;
}
.entity-edit.observation .qa-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 20px;
  border-bottom: 1px solid;
  background-color: #f7f9fb;
  border-color: #e6e8ec;
  color: #6b6e76;
}
.entity-edit.observation .qa-banner .material-symbols-outlined {
  flex: none;
  font-size: 18px;
  color: inherit;
  font-variation-settings: "FILL" 0, "wght" 500;
}
.entity-edit.observation .qa-banner .qa-banner-t {
  font-size: 13.5px;
  font-weight: 600;
  color: inherit;
  line-height: 1.4;
}
.entity-edit.observation .qa-banner[data-tone=green] {
  background-color: #f2f8e3;
  border-color: #c3e090;
  color: #76a300;
}
.entity-edit.observation .qa-banner[data-tone=red] {
  background-color: #fdeceb;
  border-color: rgba(226, 35, 26, 0.26);
  color: rgb(74.2782446312%, 11.5032679739%, 8.5452847806%);
}
.entity-edit.observation .qa-banner[data-tone=amber] {
  background-color: rgb(97.1764705882%, 95.2549019608%, 90.431372549%);
  border-color: rgb(90.1176470588%, 83.3921568627%, 66.5098039216%);
  color: rgb(60.4451182535%, 44.260359814%, 3.6333131191%);
}
.entity-edit.observation .qa-banner[data-tone=blue] {
  background-color: rgb(92.2352941176%, 95.2941176471%, 98.1647058824%);
  border-color: rgb(77.3529411765%, 86.2745098039%, 94.6470588235%);
  color: #2768a5;
}
.entity-edit.observation h1.qa-data-h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.entity-edit.observation h1.qa-data-h1 .qa-head-count {
  margin-left: auto;
}
.entity-edit.observation .qa-review {
  padding-top: 5px;
}
.entity-edit.observation .qa-review-empty {
  font-size: 13px;
  color: #6b6e76;
}
.entity-edit.observation {
  /*
      mock-up CellFrame (:2190): a white tile, 16px radius, 13px 15px, the card shadow; its tone tints the frame. The
      colour summarises the decisions, it is never an extra state (CS-UI-35)
  */
}
.entity-edit.observation .qa-card {
  position: relative;
  margin-bottom: 12px;
  padding: 13px 15px;
  border: 1px solid #e6e8ec;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.07);
  transition: box-shadow 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.entity-edit.observation .qa-card:hover {
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.09), 0 1px 3px rgba(16, 24, 40, 0.06);
}
.entity-edit.observation .qa-card[data-tone=pending] {
  border-color: rgb(90.1176470588%, 83.3921568627%, 66.5098039216%);
  background-color: rgb(99.1529411765%, 98.5764705882%, 97.1294117647%);
  box-shadow: inset 0 0 0 1px rgb(90.1176470588%, 83.3921568627%, 66.5098039216%), 0 6px 18px rgba(16, 24, 40, 0.1), 0 1px 3px rgba(16, 24, 40, 0.06);
}
.entity-edit.observation .qa-card[data-tone=declined] {
  border-color: rgba(226, 35, 26, 0.26);
  background-color: rgb(99.8294117647%, 98.7058823529%, 98.6529411765%);
  box-shadow: inset 0 0 0 1px rgba(226, 35, 26, 0.26), 0 6px 18px rgba(16, 24, 40, 0.1), 0 1px 3px rgba(16, 24, 40, 0.06);
}
.entity-edit.observation .qa-card[data-tone=corrected], .entity-edit.observation .qa-card[data-tone=disputed] {
  border-color: rgb(90.1176470588%, 83.3921568627%, 66.5098039216%);
  background-color: rgb(99.4352941176%, 99.0509803922%, 98.0862745098%);
  box-shadow: inset 0 0 0 1px rgb(90.1176470588%, 83.3921568627%, 66.5098039216%), 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.07);
}
.entity-edit.observation .qa-card[data-tone=validated] {
  border-color: #e4f0c7;
  background-color: rgb(99.0980392157%, 99.5294117647%, 98%);
  box-shadow: inset 0 0 0 1px #e4f0c7, 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.07);
}
.entity-edit.observation .qa-card[data-tone=blank] {
  background-color: #f7f9fb;
}
.entity-edit.observation {
  /*
      Phase 7, Fill: a field the AI could not read, the lib's input in a grey card (observation-ai.js renderAiFill). The
      lib hides a triggered question with `form > .input[data-triggered="1"]` (form.scss): the card is now its parent,
      so the same rule is written for it, and the card goes with its hidden input
  */
}
.entity-edit.observation .qa-card-input > .input {
  padding-bottom: 0;
}
.entity-edit.observation .qa-card-input > .input[data-triggered="1"] {
  display: none !important;
}
.entity-edit.observation .qa-card-input > .input[data-triggered="1"].trigger-displayed {
  display: block !important;
}
.entity-edit.observation .qa-card-input:has(> .input[data-triggered="1"]:not(.trigger-displayed)) {
  display: none;
}
.entity-edit.observation .qa-card-input > .input > .label {
  display: flex;
  align-items: center;
  flex-wrap: wrap-reverse;
  gap: 7px;
  min-height: 24px;
  margin-bottom: 10px;
  padding: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b6e76;
}
.entity-edit.observation .qa-card-input > .input > .label .qa-src {
  margin: 0 0 0 auto;
  text-transform: none;
  letter-spacing: 0;
}
.entity-edit.observation .qa-card-input > .input > .label .qa-label-w {
  min-width: 0;
}
.entity-edit.observation .footer .btn.disabled[data-id=accept] {
  background-color: #c9dd96;
  cursor: not-allowed;
}
.entity-edit.observation .qa-card-hd {
  display: flex;
  align-items: center;
  flex-wrap: wrap-reverse;
  gap: 7px;
  min-height: 24px;
  margin-bottom: 10px;
}
.entity-edit.observation .qa-card-label {
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.entity-edit.observation .qa-card-label-t {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b6e76;
}
.entity-edit.observation .qa-req {
  margin-left: 4px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 0;
  color: #e2231a;
  vertical-align: baseline;
}
.entity-edit.observation .qa-card-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  margin-left: auto;
}
.entity-edit.observation .qa-card-vrow {
  display: flex;
  align-items: center;
  gap: 9px;
}
.entity-edit.observation .qa-card-val {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #26272b;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.entity-edit.observation .qa-card-val.empty {
  color: #9a9da6;
}
.entity-edit.observation .qa-card-by {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
}
.entity-edit.observation .qa-card-by span {
  font-size: 12px;
  font-weight: 400;
  color: #9a9da6;
  line-height: 1.4;
}
.entity-edit.observation .qa-card-by .material-symbols-outlined {
  flex: none;
  font-size: 14px;
  color: #9a9da6;
  font-variation-settings: "FILL" 0, "wght" 400;
  position: relative;
  top: -2px;
}
.entity-edit.observation .qa-card-by.ai-band span, .entity-edit.observation .qa-card-by.ai-band .material-symbols-outlined {
  color: rgb(60.4451182535%, 44.260359814%, 3.6333131191%);
  font-weight: 600;
}
.entity-edit.observation .qa-card-act {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}
.entity-edit.observation .ai-shot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.entity-edit.observation .ai-shot .material-symbols-outlined {
  font-size: 14px;
  color: #9a9da6;
  font-variation-settings: "FILL" 0, "wght" 400;
}
.entity-edit.observation .ai-shot .ai-shot-t {
  font-size: 11.5px;
  font-weight: 500;
  color: #9a9da6;
}
.entity-edit.observation .qa-card-act .qa-mini.ai-waiting {
  background-color: #f7f9fb;
  border-color: #e6e8ec;
  color: #c2c5cc;
}
.entity-edit.observation .qa-card.fixing .qa-card-vrow, .entity-edit.observation .qa-card.fixing .qa-card-act {
  display: none;
}
.entity-edit.observation .qa-card-fix {
  padding-top: 2px;
}
.entity-edit.observation .qa-card-fix .input > .label {
  display: none;
}
.entity-edit.observation .qa-card-fix .input {
  padding-bottom: 0;
}
.entity-edit.observation .qa-card-fix .qa-fix-submit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
}
.entity-edit.observation .qa-card-fix .qa-fix-submit > button {
  margin-top: 0;
}
.entity-edit.observation .qa-card-hist {
  display: none;
  margin: 12px -8px -7px;
  padding: 12px 14px;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  background-color: #f7f9fb;
  box-shadow: inset 0 1px 3px rgba(16, 24, 40, 0.04);
}
.entity-edit.observation .qa-card.history-open {
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
}
.entity-edit.observation .qa-card.history-open .qa-card-hist {
  display: block;
}
.entity-edit.observation .qa-card.history-open [data-id=qa-field-history] {
  background-color: #f7f9fb;
  color: #26272b;
}
.entity-edit.observation .qa-card-hist-l {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.entity-edit.observation .qa-card-hist-l span:not(.material-symbols-outlined) {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6e76;
}
.entity-edit.observation .qa-card-hist-l .material-symbols-outlined {
  font-size: 13px;
  color: #6b6e76;
}
.entity-edit.observation .form-history.qa-card-history {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  max-height: 212px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.entity-edit.observation .form-history.qa-card-history .fh-dot {
  box-shadow: 0 0 0 2.5px #f7f9fb;
}
.entity-edit.observation .form-history.qa-card-history::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}
.entity-edit.observation {
  /*
      mock-up ModalFooter: the sentence on the left (red when it is what blocks the decision), Release beside it, the
      decision on the right - icons in the buttons. The lib's footer rule pads every `> div > a` 3px 16px and sizes its
      spans 24px (modal.scss, 1,2,3): the selectors below outrank it on purpose
  */
}
.entity-edit.observation .footer .qa-gate {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-right: 12px;
}
.entity-edit.observation .footer .qa-gate .qa-gate-t {
  font-size: 13px;
  font-weight: 500;
  color: #9a9da6;
  line-height: 1.35;
}
.entity-edit.observation .footer .qa-gate .material-symbols-outlined {
  flex: none;
  font-size: 16px;
  color: #9a9da6;
}
.entity-edit.observation .footer .qa-gate.blocking .qa-gate-t {
  color: rgb(74.2782446312%, 11.5032679739%, 8.5452847806%);
}

#modals .modal.lock-readonly .qa-card .qa-ibtn:not(.qa-quiet), #modals .modal.lock-readonly .qa-card .qa-card-act, #modals .modal.lock-readonly .qa-card .qa-card-fix {
  pointer-events: none;
  opacity: 0.4;
}

#modals .modal.lock-readonly .t-assign {
  opacity: 0.4;
}

#modals .modal.qa-busy {
  cursor: progress;
}
#modals .modal.qa-busy .qa-card .qa-ibtn, #modals .modal.qa-busy .qa-card .qa-card-act, #modals .modal.qa-busy .qa-card .qa-card-fix, #modals .modal.qa-busy .observation .footer a, #modals .modal.qa-busy .observation .header a[data-id=save], #modals .modal.qa-busy .observation .body form {
  pointer-events: none;
}

#modals .modal.is-loading.qa-fix-saving .modal-box {
  display: block;
}
#modals .modal.is-loading.qa-fix-saving .modal-loader {
  display: none;
}
#modals .modal.is-loading.qa-fix-saving .qa-card-fix {
  pointer-events: none;
}

@media screen and (min-width: 641px) {
  #modals .modal .entity-edit.observation .footer .qa-gate.ai-gate {
    margin-top: 20px;
  }
}
@media screen and (min-width: 641px) {
  #modals .modal .entity-edit.observation .footer:has(a.qa-btn) > div {
    padding-top: 15px;
  }
}
#modals .modal .entity-edit.observation .footer > div:has(> a.qa-btn) {
  gap: 12px;
}
#modals .modal .entity-edit.observation .footer > div > a.qa-btn {
  padding: 11px 20px;
}
#modals .modal .entity-edit.observation .footer > div > a.qa-btn[data-tone=ghost] {
  padding: 11px 18px;
}
#modals .modal .entity-edit.observation .footer > div > a.qa-btn .material-symbols-outlined {
  font-size: 17px;
}
#modals .modal .entity-edit.observation .footer > div > a.qa-btn .qa-btn-t {
  font-size: 15px;
}

/*
    The line above the first bar under the header (the banner, or the history bar when there is no banner): the header's
    own border stops at the form's 15px padding while the bars run edge to edge. There, that bar draws the line instead
    (its shadow, 1px up, over the header's transparent border: no layout change), full width (user 2026-10-31). Same
    colour as the lib's `#modals .modal .header` border (modal.scss:202)
*/
#modals .modal .entity-edit.observation > .header:has(+ .qa-bars:not(:empty)),
#modals .modal .entity-edit.observation > .header:has(+ .qa-bars:empty + .form-history),
#modals .modal .entity-edit.observation > .header:has(+ .form-history) {
  border-bottom-color: transparent;
}
#modals .modal .entity-edit.observation > .header + .qa-bars:not(:empty),
#modals .modal .entity-edit.observation > .header + .qa-bars:empty + .form-history,
#modals .modal .entity-edit.observation > .header + .form-history {
  box-shadow: 0 -1px 0 rgba(208, 213, 221, 0.54);
}

/*
    Phone, Review footer: the gate sentence and the buttons each take a line. Side by side the two halves shrank to 174px
    each of 348 and "Return to manager (1)" wrapped out of its box (harness at 390px). The lib's
    `#modals .modal .footer { height: 54px }` (1,2,0) is outranked on purpose, for these footers only.
*/
@media screen and (max-width: 640px) {
  #modals .modal .entity-edit.observation .footer.qa-review-foot, #modals .modal .entity-edit.observation .footer.ai-gate-foot, #modals .modal .entity-edit.observation .footer.qa-read-foot {
    height: auto;
    flex-wrap: wrap;
    padding-bottom: 8px;
  }
  #modals .modal .entity-edit.observation .footer.qa-review-foot > div, #modals .modal .entity-edit.observation .footer.ai-gate-foot > div, #modals .modal .entity-edit.observation .footer.qa-read-foot > div {
    flex: 1 0 100%;
    flex-wrap: wrap;
    padding-top: 8px;
  }
  #modals .modal .entity-edit.observation .footer.qa-review-foot > div:last-child, #modals .modal .entity-edit.observation .footer.ai-gate-foot > div:last-child, #modals .modal .entity-edit.observation .footer.qa-read-foot > div:last-child {
    justify-content: flex-end;
  }
}
/* ------------------------------------------------------------------ the form history (observation-history.js) */
.entity-edit.observation .form-history .fh-qa {
  padding: 2px 8px;
}
.entity-edit.observation .form-history .fh-qa .qa-chip-t {
  font-size: 11px;
}
.entity-edit.observation .form-history .fh-clip {
  font-size: 12px;
  color: #c2c5cc;
}
.entity-edit.observation .form-history .fh-ev {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 7px;
}
.entity-edit.observation .form-history .fh-ev .pv-thumb .pv-img, .entity-edit.observation .form-history .fh-ev .pv-thumb .pv-crop {
  width: 40px;
  height: 30px;
}
.entity-edit.observation .form-history .fh-ev .pv-thumb .pv-cam {
  font-size: 10px;
  right: 2px;
  bottom: 2px;
  color: #ffffff;
}
.entity-edit.observation .form-history .fh-ev .pv-thumb.is-file {
  padding: 4px 8px;
}
.entity-edit.observation .form-history .fh-ev .pv-thumb.is-file .material-symbols-outlined {
  font-size: 16px;
}
.entity-edit.observation .form-history .fh-ev .pv-thumb.is-file .pv-note {
  font-size: 11px;
}

/* ------------------------------------------------------------------ proof thumbnails (photo-viewer.js proofThumb) */
.pv-thumb, .pv-thumb:visited, .pv-thumb:active, .pv-thumb:focus {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  max-width: 100%;
  border: 1px solid #d6d9df;
  border-radius: 7px;
  background-color: #f1f4f7;
  overflow: hidden;
  text-decoration: none;
  cursor: zoom-in;
  transition: transform 160ms, box-shadow 160ms;
}

.pv-thumb:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.pv-thumb .pv-crop, .pv-thumb .pv-img {
  display: block;
  flex: none;
  width: 52px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.pv-thumb .pv-crop.pv-missing {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pv-thumb .material-symbols-outlined.pv-cam {
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-size: 12px;
  color: #ffffff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
}

.pv-thumb:has(.pv-missing) .pv-cam {
  display: none;
}

.pv-thumb.is-file {
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  cursor: pointer;
}

.pv-thumb .material-symbols-outlined {
  font-size: 18px;
  color: #6b6e76;
}

.pv-thumb .pv-note {
  font-size: 11.5px;
  font-weight: 600;
  color: #6b6e76;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.pv-thumb.is-waiting .pv-note {
  color: #4b4d54;
}

.pv-thumb.is-file.is-waiting {
  max-width: 110px;
}

.pv-thumb.is-refused .pv-note {
  color: rgb(74.2782446312%, 11.5032679739%, 8.5452847806%);
}

/* ------------------------------------------------------------------ the full-screen viewer (modal/photo-viewer.js) */
#modals .modal.photo-viewer-modal {
  padding: 0;
}
#modals .modal.photo-viewer-modal .modal-box-outer {
  max-width: none;
  padding: 0;
  border-radius: 0;
  height: 100vh;
}
#modals .modal.photo-viewer-modal .modal-box-outer .modal-box {
  padding: 0;
  border-radius: 0;
  background-color: rgba(11, 11, 13, 0.94);
  backdrop-filter: blur(4px);
}
#modals .modal.photo-viewer-modal .pv {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#modals .modal.photo-viewer-modal .pv a, #modals .modal.photo-viewer-modal .pv a:visited, #modals .modal.photo-viewer-modal .pv a:active, #modals .modal.photo-viewer-modal .pv a:focus {
  text-decoration: none;
}
#modals .modal.photo-viewer-modal .pv-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
}
#modals .modal.photo-viewer-modal .pv-tx {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#modals .modal.photo-viewer-modal .pv-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
#modals .modal.photo-viewer-modal .pv-sub {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
#modals .modal.photo-viewer-modal .pv-count {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}
#modals .modal.photo-viewer-modal .pv-zoom {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.1);
}
#modals .modal.photo-viewer-modal .pv-pct {
  min-width: 40px;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
}
#modals .modal.photo-viewer-modal .pv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
  transition: background-color 160ms, opacity 160ms;
}
#modals .modal.photo-viewer-modal .pv-btn .material-symbols-outlined {
  font-size: 18px;
  color: #ffffff;
}
#modals .modal.photo-viewer-modal .pv-zoom .pv-btn {
  background-color: transparent;
}
#modals .modal.photo-viewer-modal .pv-btn:hover {
  background-color: rgba(255, 255, 255, 0.24);
}
#modals .modal.photo-viewer-modal .pv-btn.disabled {
  opacity: 0.28;
  pointer-events: none;
}
#modals .modal.photo-viewer-modal .pv-row {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px 28px;
}
#modals .modal.photo-viewer-modal .pv-stage {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#modals .modal.photo-viewer-modal .pv-stage::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}
#modals .modal.photo-viewer-modal .pv-stage.pv-zoomed {
  position: relative;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
#modals .modal.photo-viewer-modal .pv-stage.pv-zoomed.pv-grabbing {
  cursor: grabbing;
}
#modals .modal.photo-viewer-modal .pv-pic {
  position: relative;
  margin: auto;
}
#modals .modal.photo-viewer-modal .pv-pic img {
  display: block;
  max-width: calc(100vw - 160px);
  max-height: calc(100vh - 110px);
  border-radius: 12px;
}
#modals .modal.photo-viewer-modal .pv-pic.zoomed {
  position: absolute;
  max-width: none;
  margin: 0;
}
#modals .modal.photo-viewer-modal .pv-pic.zoomed img {
  width: 100%;
  max-width: none;
  max-height: none;
}
#modals .modal.photo-viewer-modal .pv-frame {
  display: none;
  position: absolute;
  z-index: 1;
  border: 2px solid #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 0 9999px rgba(8, 10, 14, 0.55);
  pointer-events: none;
}
#modals .modal.photo-viewer-modal .pv-missing-note {
  display: none;
  margin: auto;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}
#modals .modal.photo-viewer-modal .pv-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  transition: background-color 160ms, opacity 160ms;
}
#modals .modal.photo-viewer-modal .pv-arrow .material-symbols-outlined {
  font-size: 22px;
  color: #ffffff;
}
#modals .modal.photo-viewer-modal .pv-arrow:hover {
  background-color: rgba(255, 255, 255, 0.24);
}
#modals .modal.photo-viewer-modal .pv-arrow.disabled {
  opacity: 0.28;
  pointer-events: none;
}
@media screen and (max-width: 640px) {
  #modals .modal.photo-viewer-modal .pv-bar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }
  #modals .modal.photo-viewer-modal .pv-tx {
    flex: 1 0 100%;
  }
  #modals .modal.photo-viewer-modal .pv-count {
    margin-left: auto;
  }
  #modals .modal.photo-viewer-modal .pv-row {
    gap: 6px;
    padding: 0 6px 16px;
  }
  #modals .modal.photo-viewer-modal .pv-pic img {
    max-width: calc(100vw - 112px);
  }
}

/* ------------------------------------------------------------------ dialogs (qa-decline.js, confirm.js with `icon`) */
#modals .modal.qa-dlg-modal .modal-box-outer, #modals .modal[data-name=confirm] .modal-box-outer:has(.qa-dlg) {
  max-width: 472px;
}

.qa-dlg a, .qa-dlg a:visited, .qa-dlg a:active, .qa-dlg a:focus {
  text-decoration: none;
}
.qa-dlg .qa-dlg-hd {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 10px 2px 14px;
}
.qa-dlg .qa-dlg-hd:not(:has(.qa-dlg-sub)) {
  align-items: center;
}
.qa-dlg .qa-dlg-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #f2f8e3;
  color: #8cc300;
}
.qa-dlg .qa-dlg-ic .material-symbols-outlined {
  font-size: 20px;
  color: inherit;
  font-variation-settings: "FILL" 0, "wght" 500;
}
.qa-dlg .qa-dlg-hd[data-tone=red] .qa-dlg-ic {
  background-color: #fdeceb;
  color: #e2231a;
}
.qa-dlg .qa-dlg-hd[data-tone=blue] .qa-dlg-ic {
  background-color: rgb(92.2352941176%, 95.2941176471%, 98.1647058824%);
  color: #5a9bd8;
}
.qa-dlg .qa-dlg-hd[data-tone=amber] .qa-dlg-ic {
  background-color: rgb(97.1764705882%, 95.2549019608%, 90.431372549%);
  color: rgb(60.4451182535%, 44.260359814%, 3.6333131191%);
}
.qa-dlg .qa-dlg-tx {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qa-dlg .qa-dlg-title {
  font-size: 18px;
  font-weight: 700;
  color: #26272b;
  line-height: 1.3;
}
.qa-dlg .qa-dlg-sub {
  font-size: 13.5px;
  font-weight: 400;
  color: #6b6e76;
  line-height: 1.45;
}
.qa-dlg .qa-dlg-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #6b6e76;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1), color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.qa-dlg .qa-dlg-x .material-symbols-outlined {
  font-size: 19px;
  color: inherit;
}
.qa-dlg .qa-dlg-x:hover {
  background-color: #f7f9fb;
  color: #26272b;
}
.qa-dlg .qa-dlg-l {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4b4d54;
}
.qa-dlg .qa-dlg-p {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #4b4d54;
  line-height: 1.55;
}

#modals .modal[data-name=confirm] .qa-dlg > .p {
  padding: 0 2px;
}
#modals .modal[data-name=confirm] .qa-dlg .text-right {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 18px;
}
#modals .modal[data-name=confirm] .qa-dlg .text-right .btn {
  margin: 0 !important;
  height: auto;
  min-height: 0;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
#modals .modal[data-name=confirm] .qa-dlg .text-right .btn.secondary {
  padding: 11px 18px;
  border-color: #d6d9df;
  color: #4b4d54;
  font-weight: 600;
}
#modals .modal[data-name=confirm] .qa-dlg .text-right .btn.danger {
  background-color: #e2231a;
}
#modals .modal[data-name=confirm] .qa-dlg .text-right .btn.danger:hover {
  background-color: rgb(74.2782446312%, 11.5032679739%, 8.5452847806%);
}
#modals .modal[data-name=confirm] .qa-dlg .text-right .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#modals .modal[data-name=confirm] .qa-dlg .text-right .btn .material-symbols-outlined {
  font-size: 17px;
  color: inherit;
  font-variation-settings: "FILL" 0, "wght" 600;
}

.qa-decline .qa-dl-sum {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid #e6e8ec;
  border-radius: 8px;
  background-color: #f7f9fb;
}
.qa-decline .qa-dl-sum-l {
  font-size: 14px;
  font-weight: 500;
  color: #4b4d54;
}
.qa-decline .qa-dl-sum-v {
  font-size: 14px;
  font-weight: 700;
  color: #26272b;
  overflow-wrap: anywhere;
}
.qa-decline .qa-dl-quote {
  display: block;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(226, 35, 26, 0.26);
  border-radius: 8px;
  background-color: #fdeceb;
}
.qa-decline .qa-dl-quote-by {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(74.2782446312%, 11.5032679739%, 8.5452847806%);
}
.qa-decline .qa-dl-quote-t {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: rgb(74.2782446312%, 11.5032679739%, 8.5452847806%);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.qa-decline .qa-dl-form .input > .label, .qa-decline .qa-dl-label {
  font-size: 13px;
  font-weight: 600;
  color: #4b4d54;
}
.qa-decline .qa-dl-label {
  padding-bottom: 6px;
}
.qa-decline .qa-dl-value {
  padding-top: 4px;
}
.qa-decline .qa-dl-hidden {
  display: none !important;
}
.qa-decline .qa-dl-any {
  display: none;
}
.qa-decline .qa-dl-kinds {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
@media screen and (max-width: 420px) {
  .qa-decline .qa-dl-kinds {
    grid-template-columns: minmax(0, 1fr);
  }
}
.qa-decline .qa-dl-kind {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px;
  border: 1.5px dashed #d6d9df;
  border-radius: 12px;
  background-color: #f7f9fb;
  text-align: center;
  transition: border-color 160ms, background-color 160ms;
}
.qa-decline .qa-dl-kind .material-symbols-outlined {
  font-size: 24px;
  color: #6b6e76;
}
.qa-decline .qa-dl-kind b {
  font-size: 14px;
  font-weight: 600;
  color: #6b6e76;
}
.qa-decline .qa-dl-kind .qa-dl-hint {
  font-size: 11.5px;
  font-weight: 400;
  color: #9a9da6;
}
.qa-decline .qa-dl-kind:hover {
  border-color: #8cc300;
  background-color: #ffffff;
}
.qa-decline .qa-dl-kind.disabled {
  opacity: 0.45;
  pointer-events: none;
}
.qa-decline .qa-dl-pick-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.qa-decline .qa-dl-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #6b6e76;
  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1), color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.qa-decline .qa-dl-back .material-symbols-outlined {
  font-size: 15px;
  color: inherit;
}
.qa-decline .qa-dl-back:hover {
  background-color: #f7f9fb;
}
.qa-decline .qa-dl-pick-t {
  font-size: 12.5px;
  font-weight: 600;
  color: #4b4d54;
}
.qa-decline .qa-dl-photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
}
.qa-decline .qa-dl-photo {
  display: block;
  padding: 6px;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  background-color: #ffffff;
  transition: border-color 160ms, box-shadow 160ms;
}
.qa-decline .qa-dl-photo:hover {
  border-color: #8cc300;
  box-shadow: 0 0 0 1px #8cc300;
}
.qa-decline .qa-dl-photo-img {
  position: relative;
  display: block;
  height: 78px;
  border-radius: 8px;
  background-color: #0b0b0d;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.qa-decline .qa-dl-photo-n {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  font-size: 10.5px;
  font-weight: 700;
  color: #4b4d54;
}
.qa-decline .qa-dl-photo-l {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #4b4d54;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.qa-decline .qa-dl-done {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  background-color: #f7f9fb;
}
.qa-decline .qa-dl-done-th {
  flex: none;
  width: 72px;
  height: 54px;
  border: 1px solid #d6d9df;
  border-radius: 7px;
  overflow: hidden;
  background-color: #f1f4f7;
}
.qa-decline .qa-dl-done-th > span {
  display: block;
  width: 100%;
  height: 100%;
}
.qa-decline .qa-dl-done-th .qa-dl-crop {
  background-repeat: no-repeat;
}
.qa-decline .qa-dl-done-th .qa-dl-img {
  background-size: cover;
  background-position: center;
}
.qa-decline .qa-dl-done-th .qa-dl-file {
  display: flex;
  align-items: center;
  justify-content: center;
}
.qa-decline .qa-dl-done-th .qa-dl-file .material-symbols-outlined {
  font-size: 24px;
  color: #6b6e76;
}
.qa-decline .qa-dl-done-tx {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qa-decline .qa-dl-done-l {
  display: flex;
  align-items: center;
  gap: 6px;
}
.qa-decline .qa-dl-done-l span {
  font-size: 13px;
  font-weight: 700;
  color: #76a300;
}
.qa-decline .qa-dl-done-l .material-symbols-outlined {
  font-size: 15px;
}
.qa-decline .qa-dl-done-n {
  font-size: 12px;
  font-weight: 400;
  color: #9a9da6;
  overflow-wrap: anywhere;
}
.qa-decline .qa-dl-replace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #6b6e76;
  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1), color 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.qa-decline .qa-dl-replace .material-symbols-outlined {
  font-size: 16px;
  color: inherit;
}
.qa-decline .qa-dl-replace:hover {
  background-color: #ffffff;
}
.qa-decline .qa-dl-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
}
.qa-decline .qa-dl-foot button[type=submit] {
  margin-top: 0;
}
.qa-decline .qa-dl-foot button[type=submit]:disabled {
  background-color: #c9dd96;
  cursor: not-allowed;
}
.qa-decline .qa-dl-foot button[type=submit][data-tone=red]:disabled {
  background-color: rgb(94.8823529412%, 61.1764705882%, 59.5882352941%);
}

.qa-dl-light {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  flex-direction: column;
  background-color: rgba(8, 10, 14, 0.94);
}
.qa-dl-light.open {
  display: flex;
}
.qa-dl-light a, .qa-dl-light a:visited, .qa-dl-light a:active, .qa-dl-light a:focus {
  text-decoration: none;
}
.qa-dl-light .qa-dl-light-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
}
.qa-dl-light .qa-dl-lbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.qa-dl-light .qa-dl-lbtn .material-symbols-outlined {
  font-size: 18px;
  color: #ffffff;
}
.qa-dl-light .qa-dl-lbtn:hover {
  background-color: rgba(255, 255, 255, 0.24);
}
.qa-dl-light .qa-dl-light-x {
  margin-left: auto;
}
.qa-dl-light .qa-dl-light-t {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}
.qa-dl-light .qa-dl-light-h {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
}
.qa-dl-light .qa-dl-light-h::before {
  content: "· ";
}
@media screen and (max-width: 640px) {
  .qa-dl-light .qa-dl-light-hd {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .qa-dl-light .qa-dl-light-t {
    flex: 1 1 0;
    min-width: 0;
  }
  .qa-dl-light .qa-dl-light-x {
    margin-left: 0;
  }
  .qa-dl-light .qa-dl-light-h {
    order: 3;
    flex: 1 0 100%;
    padding-left: 44px;
  }
  .qa-dl-light .qa-dl-light-h::before {
    content: none;
  }
}
.qa-dl-light .qa-dl-light-bd {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
}
.qa-dl-light .qa-dl-pic {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.qa-dl-light .qa-dl-pic img {
  display: block;
  max-width: min(92vw, 1100px);
  max-height: calc(100vh - 150px);
  border-radius: 10px;
  pointer-events: none;
}
.qa-dl-light .qa-dl-frame {
  display: none;
  position: absolute;
  z-index: 1;
  border: 2px solid #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 0 4000px rgba(8, 10, 14, 0.55);
  pointer-events: none;
}
.qa-dl-light .qa-dl-note {
  display: none;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}
.qa-dl-light .qa-dl-light-ft {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 16px 18px 22px;
}
.qa-dl-light .qa-btn.on-dark, .qa-dl-light .qa-btn.on-dark:hover, .qa-dl-light .qa-btn.on-dark:active, .qa-dl-light .qa-btn.on-dark:focus {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

/* ------------------------------------------------------------------ the lists: the QA status as the mock-up's tinted pill */
.table .t-status .m-chip-square[class*=qa-t-] {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px 3px 21px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
  background-color: #f7f9fb;
  border-color: #e6e8ec;
  color: #6b6e76;
}

.table .t-status .m-chip-square[class*=qa-t-]::before {
  left: 7px;
  font-size: 20px;
  color: #9a9da6;
}

.table .t-status .m-chip-square.qa-t-green {
  background-color: #f2f8e3;
  border-color: #c3e090;
  color: #76a300;
}

.table .t-status .m-chip-square.qa-t-green::before {
  color: #8cc300;
}

.table .t-status .m-chip-square.qa-t-red {
  background-color: #fdeceb;
  border-color: rgba(226, 35, 26, 0.26);
  color: rgb(74.2782446312%, 11.5032679739%, 8.5452847806%);
}

.table .t-status .m-chip-square.qa-t-red::before {
  color: #e2231a;
}

.table .t-status .m-chip-square.qa-t-amber {
  background-color: rgb(97.1764705882%, 95.2549019608%, 90.431372549%);
  border-color: rgb(90.1176470588%, 83.3921568627%, 66.5098039216%);
  color: rgb(60.4451182535%, 44.260359814%, 3.6333131191%);
}

.table .t-status .m-chip-square.qa-t-amber::before {
  color: #b7860b;
}

.table .t-status .m-chip-square.qa-t-blue {
  background-color: rgb(92.2352941176%, 95.2941176471%, 98.1647058824%);
  border-color: rgb(77.3529411765%, 86.2745098039%, 94.6470588235%);
  color: #2768a5;
}

.table .t-status .m-chip-square.qa-t-blue::before {
  color: #5a9bd8;
}

.table .t-status .m-chip-square.qa-t-grey {
  background-color: #f1f4f7;
  border-color: #d6d9df;
  color: #6b6e76;
}

.table .t-status .m-chip-square.qa-t-grey::before {
  color: #9a9da6;
}

/*
    Phase 8, CS-UI-28 / CS-UI-43: a value nobody may change here, as text in the box of a disabled input (the lib's own
    variables, form.scss), a select's thumbnail as a badge in front (observation-review.js readOnlyFields). One line is
    as tall as the lib's control (10 + 22 + 10 + the borders = 44px); a longer value wraps, never cut
*/
.entity-edit.observation .input.ro > .ro-field {
  display: flex;
  align-items: flex-start;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  background-color: #f8f8f8;
  border: 1px solid rgb(207, 212, 220);
  box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px 0px;
}
.entity-edit.observation .input.ro .ro-badge {
  flex: none;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  border-radius: 22px;
  background-color: #e4e4e4;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.entity-edit.observation .input.ro .ro-badge + .ro-txt {
  padding-left: 6px;
}
.entity-edit.observation .input.ro .ro-txt {
  min-width: 0;
  font-size: 16px;
  line-height: 22px;
  color: #101828;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.entity-edit.observation .input.ro > .ro-field.empty .ro-txt {
  color: #74747b;
}

@media screen and (max-width: 934px) {
  #modals .modal .modal-box-outer .modal-box .header .modal-close {
    bottom: 112px;
  }
}
@media screen and (max-width: 640px) {
  #modals .modal .footer .qa-gate {
    padding-right: 60px;
    box-sizing: border-box;
  }
}
.w-100 {
  width: 100%;
}

.display-b {
  display: block !important;
}

.display-i {
  display: inline !important;
}

.display-ib {
  display: inline-block !important;
}

.display-n {
  display: none !important;
}

.p-0 {
  padding: 0px !important;
}

.p-5 {
  padding: 5px !important;
}

.p-10 {
  padding: 10px !important;
}

.p-15 {
  padding: 15px !important;
}

.p-20 {
  padding: 20px !important;
}

.p-20-d {
  padding: 20px !important;
}
@media screen and (max-width: 640px) {
  .p-20-d {
    padding: 0px !important;
  }
}

.p-25 {
  padding: 25px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pb-5 {
  padding-bottom: 5px !important;
}

.pb-10 {
  padding-bottom: 10px !important;
}

.pb-15 {
  padding-bottom: 15px !important;
}

.pb-20 {
  padding-bottom: 20px !important;
}

.pb-25 {
  padding-bottom: 25px !important;
}

.pb-30 {
  padding-bottom: 30px !important;
}

.pb-35 {
  padding-bottom: 35px !important;
}

.pb-40 {
  padding-bottom: 40px !important;
}

.pb-45 {
  padding-bottom: 45px !important;
}

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

.pt-5 {
  padding-top: 5px !important;
}

.pt-10 {
  padding-top: 10px !important;
}

.pt-15 {
  padding-top: 15px !important;
}

.pt-20 {
  padding-top: 20px !important;
}

.pt-25 {
  padding-top: 25px !important;
}

.pr-0 {
  padding-right: 0px !important;
}

.pr-5 {
  padding-right: 5px !important;
}

.pr-10 {
  padding-right: 10px !important;
}

.pr-15 {
  padding-right: 15px !important;
}

.pr-20 {
  padding-right: 20px !important;
}

.pr-25 {
  padding-right: 25px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.pl-5 {
  padding-left: 5px !important;
}

.pl-10 {
  padding-left: 10px !important;
}

.pl-15 {
  padding-left: 15px !important;
}

.pl-20 {
  padding-left: 20px !important;
}

.pl-25 {
  padding-left: 25px !important;
}

.m-0 {
  margin: 0px !important;
}

.m-5 {
  margin: 5px !important;
}

.m-10 {
  margin: 10px !important;
}

.m-15 {
  margin: 15px !important;
}

.m-20 {
  margin: 20px !important;
}

.m-25 {
  margin-bottom: 25px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.mb-5 {
  margin-bottom: 5px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-25 {
  margin-bottom: 25px !important;
}

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

.mt-5 {
  margin-top: 5px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mt-25 {
  margin-top: 25px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.ml-5 {
  margin-left: 5px !important;
}

.ml-10 {
  margin-left: 10px !important;
}

.ml-15 {
  margin-left: 15px !important;
}

.ml-20 {
  margin-left: 20px !important;
}

.ml-25 {
  margin-left: 25px !important;
}

.mr-0 {
  margin-right: 0px !important;
}

.mr-5 {
  margin-right: 5px !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.mr-15 {
  margin-right: 15px !important;
}

.mr-20 {
  margin-right: 20px !important;
}

.mr-25 {
  margin-right: 25px !important;
}

.py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.my-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.mx-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.br-100 {
  border-radius: 100% !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.mw-40 {
  max-width: 40% !important;
}
@media screen and (max-width: 640px) {
  .mw-40 {
    max-width: 100% !important;
  }
}

.mw-20 {
  max-width: 20% !important;
}
@media screen and (max-width: 640px) {
  .mw-20 {
    max-width: 100% !important;
  }
}

.mw-60 {
  max-width: 60% !important;
}
@media screen and (max-width: 640px) {
  .mw-60 {
    max-width: 100% !important;
  }
}

.h-auto {
  height: auto !important;
}

.c-cross {
  cursor: crosshair !important;
}

.f-grow {
  flex-grow: 1 !important;
}

.flex-start {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.flex-col {
  flex-direction: column !important;
}

.no-link {
  cursor: default !important;
}

.input-checkbox .no-link {
  cursor: pointer !important;
}

.h-auto {
  height: auto !important;
}

.fw-500 {
  font-weight: 500;
}

.mh-387 {
  min-height: 387px !important;
}

.mw-65 {
  min-width: 65px !important;
}

.f-13 {
  font-size: 13px !important;
}

.f-14 {
  font-size: 14px !important;
}

.o-h {
  overflow: hidden !important;
}

.br-5 {
  border-radius: 5px !important;
}

.nl2br {
  white-space: pre-line !important;
}

.grey-bg {
  background-color: #f2f4f7 !important;
}
/*!****************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/daterangepicker/daterangepicker.css ***!
  \****************************************************************************************************/
.daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 278px;
  max-width: none;
  padding: 0;
  margin-top: 7px;
  top: 100px;
  left: 20px;
  z-index: 3001;
  display: none;
  font-family: arial;
  font-size: 15px;
  line-height: 1em;
}

.daterangepicker:before, .daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
}

.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
}

.daterangepicker.opensleft:before {
  right: 9px;
}

.daterangepicker.opensleft:after {
  right: 10px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}

.daterangepicker.opensright:after {
  left: 10px;
}

.daterangepicker.drop-up {
  margin-top: -7px;
}

.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc;
}

.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
  float: none;
}

.daterangepicker.single .drp-selected {
  display: none;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker .drp-calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px;
}

.daterangepicker .drp-calendar.right {
  padding: 8px;
}

.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid black;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
}

.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit;
}

.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}

.daterangepicker td.in-range {
  background-color: #ebf4f8;
  border-color: transparent;
  color: #000;
  border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #357ebd;
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #ddd;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}

.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.daterangepicker .ranges li {
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

.daterangepicker .ranges li:hover {
  background-color: #eee;
}

.daterangepicker .ranges li.active {
  background-color: #08c;
  color: #fff;
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
  }

  .daterangepicker .ranges ul {
    width: 140px;
  }

  .daterangepicker.single .ranges ul {
    width: 100%;
  }

  .daterangepicker.single .drp-calendar.left {
    clear: none;
  }

  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
    float: left;
  }

  .daterangepicker {
    direction: ltr;
    text-align: left;
  }

  .daterangepicker .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .daterangepicker .drp-calendar.right {
    margin-left: 0;
  }

  .daterangepicker .drp-calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    padding-right: 8px;
  }

  .daterangepicker .ranges, .daterangepicker .drp-calendar {
    float: left;
  }
}

@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto;
  }

  .daterangepicker .ranges {
    float: left;
  }

  .daterangepicker.rtl .ranges {
    float: right;
  }

  .daterangepicker .drp-calendar.left {
    clear: none !important;
  }
}