@charset "UTF-8";
/*
0-600px:        Phone
600-900px:      Tablet portrait
900-1200px:     Tablet landscape

1800px +:       Big desktop
*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

@media only screen and (max-width: 1700px) {
  html {
    font-size: 55%;
  }
}
body {
  font-family: "Golos Text", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 1.7;
}

h1 {
  font-weight: 100;
}

/* From Uiverse.io by WhiteNervosa */
.textInputWrapper {
  position: relative;
  width: 100%;
  margin: 1rem 0;
  --accent-color: $color-login-accent;
}

.textInputWrapper:before {
  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
}

.textInputWrapper:before,
.textInputWrapper:after {
  content: "";
  left: 0;
  right: 0;
  position: absolute;
  pointer-events: none;
  bottom: -0.1rem;
  z-index: 4;
  width: 100%;
}

.textInputWrapper:focus-within:before {
  border-bottom: 0.1rem solid #6A2C55;
}

.textInputWrapper:before {
  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-bottom: 0.1rem solid rgba(0, 0, 0, 0.42);
}

.textInputWrapper:focus-within:before {
  border-bottom: 0.1rem solid #6A2C55;
  transform: scaleX(1);
}

.textInputWrapper:focus-within:after {
  border-bottom: 0.2rem solid #6A2C55;
  transform: scaleX(1);
}

.textInputWrapper:after {
  content: "";
  transform: scaleX(0);
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  will-change: transform;
  border-bottom: 0.2rem solid #6A2C55;
  border-bottom-color: #6A2C55;
}

.textInput::placeholder {
  transition: opacity 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  opacity: 1;
  user-select: none;
  color: rgba(255, 255, 255, 0.582);
}

.textInputWrapper .textInput {
  border-radius: 0.5rem 0.5rem 0px 0px;
  box-shadow: 0px 0.2rem 0.5rem #333;
  max-height: 3.6rem;
  background-color: #252525;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 200ms;
  transition-property: background-color;
  color: #e8e8e8;
  font-size: 14px;
  font-weight: 500;
  padding: 10.2rem;
  width: 100%;
  border-left: none;
  border-bottom: none;
  border-right: none;
}

.textInputWrapper .textInput:focus,
.textInputWrapper .textInput:active {
  outline: none;
}

.textInputWrapper:focus-within .textInput,
.textInputWrapper .textInput:focus,
.textInputWrapper .textInput:active {
  background-color: #353535;
}

.textInputWrapper:focus-within .textInput::placeholder {
  opacity: 0;
}

/* From Uiverse.io by Madflows */
.specialButton1 {
  position: relative;
  overflow: hidden;
  height: 4rem;
  border-radius: 0.5rem;
  background: #3d3a4e;
  background-size: 400%;
  color: #fff;
  border: none;
  cursor: pointer;
  margin-bottom: 2rem;
}

.specialButton1:hover::before {
  transform: scaleX(1);
}

.button-content {
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
  z-index: 1;
  line-height: 4rem;
  margin: 0 !important;
  padding: 0 !important;
}
.button-content:hover {
  cursor: pointer;
}

.specialButton1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(82.3deg, #6A2C55 10.8%, #8F7145 94.3%);
  transition: all 0.475s;
}

td:has(.show-full-text-container),
th:has(.show-full-text-container) {
  overflow: visible !important;
}
td:has(.show-full-text-container).right .show-full-text-container:hover::after, td:has(.show-full-text-container).right .show-full-text-container:focus-within::after, td:has(.show-full-text-container).intValue .show-full-text-container:hover::after, td:has(.show-full-text-container).intValue .show-full-text-container:focus-within::after, td:has(.show-full-text-container).percentageValue .show-full-text-container:hover::after, td:has(.show-full-text-container).percentageValue .show-full-text-container:focus-within::after, td:has(.show-full-text-container).currencyValue .show-full-text-container:hover::after, td:has(.show-full-text-container).currencyValue .show-full-text-container:focus-within::after, td:has(.show-full-text-container).bidFactorValue .show-full-text-container:hover::after, td:has(.show-full-text-container).bidFactorValue .show-full-text-container:focus-within::after, td:has(.show-full-text-container).itemsAllocationScore .show-full-text-container:hover::after, td:has(.show-full-text-container).itemsAllocationScore .show-full-text-container:focus-within::after,
th:has(.show-full-text-container).right .show-full-text-container:hover::after,
th:has(.show-full-text-container).right .show-full-text-container:focus-within::after,
th:has(.show-full-text-container).intValue .show-full-text-container:hover::after,
th:has(.show-full-text-container).intValue .show-full-text-container:focus-within::after,
th:has(.show-full-text-container).percentageValue .show-full-text-container:hover::after,
th:has(.show-full-text-container).percentageValue .show-full-text-container:focus-within::after,
th:has(.show-full-text-container).currencyValue .show-full-text-container:hover::after,
th:has(.show-full-text-container).currencyValue .show-full-text-container:focus-within::after,
th:has(.show-full-text-container).bidFactorValue .show-full-text-container:hover::after,
th:has(.show-full-text-container).bidFactorValue .show-full-text-container:focus-within::after,
th:has(.show-full-text-container).itemsAllocationScore .show-full-text-container:hover::after,
th:has(.show-full-text-container).itemsAllocationScore .show-full-text-container:focus-within::after {
  right: -1rem !important;
}
td:has(.show-full-text-container).left .show-full-text-container:hover::after, td:has(.show-full-text-container).left .show-full-text-container:focus-within::after, td:has(.show-full-text-container).left-headline .show-full-text-container:hover::after, td:has(.show-full-text-container).left-headline .show-full-text-container:focus-within::after, td:has(.show-full-text-container).left-padding .show-full-text-container:hover::after, td:has(.show-full-text-container).left-padding .show-full-text-container:focus-within::after, td:has(.show-full-text-container).textValue:not(:first-of-type) .show-full-text-container:hover::after, td:has(.show-full-text-container).textValue:not(:first-of-type) .show-full-text-container:focus-within::after, td:has(.show-full-text-container).undefinedValue .show-full-text-container:hover::after, td:has(.show-full-text-container).undefinedValue .show-full-text-container:focus-within::after, td:has(.show-full-text-container).Undefined:not(:first-of-type) .show-full-text-container:hover::after, td:has(.show-full-text-container).Undefined:not(:first-of-type) .show-full-text-container:focus-within::after, td:has(.show-full-text-container).dbColumnsCell .show-full-text-container:hover::after, td:has(.show-full-text-container).dbColumnsCell .show-full-text-container:focus-within::after,
th:has(.show-full-text-container).left .show-full-text-container:hover::after,
th:has(.show-full-text-container).left .show-full-text-container:focus-within::after,
th:has(.show-full-text-container).left-headline .show-full-text-container:hover::after,
th:has(.show-full-text-container).left-headline .show-full-text-container:focus-within::after,
th:has(.show-full-text-container).left-padding .show-full-text-container:hover::after,
th:has(.show-full-text-container).left-padding .show-full-text-container:focus-within::after,
th:has(.show-full-text-container).textValue:not(:first-of-type) .show-full-text-container:hover::after,
th:has(.show-full-text-container).textValue:not(:first-of-type) .show-full-text-container:focus-within::after,
th:has(.show-full-text-container).undefinedValue .show-full-text-container:hover::after,
th:has(.show-full-text-container).undefinedValue .show-full-text-container:focus-within::after,
th:has(.show-full-text-container).Undefined:not(:first-of-type) .show-full-text-container:hover::after,
th:has(.show-full-text-container).Undefined:not(:first-of-type) .show-full-text-container:focus-within::after,
th:has(.show-full-text-container).dbColumnsCell .show-full-text-container:hover::after,
th:has(.show-full-text-container).dbColumnsCell .show-full-text-container:focus-within::after {
  left: -1rem !important;
}
td:has(.show-full-text-container).columnsCell .show-full-text-container:hover::after, td:has(.show-full-text-container).columnsCell .show-full-text-container:focus-within::after,
th:has(.show-full-text-container).columnsCell .show-full-text-container:hover::after,
th:has(.show-full-text-container).columnsCell .show-full-text-container:focus-within::after {
  left: 50% !important;
  transform: translate(-50%, 0rem);
  height: 2rem;
  background-color: rgba(0, 0, 0, 0.8);
}

.show-simply-copy:hover {
  background-color: rgba(0, 0, 0, 0.8);
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.pattern-group .pattern-metric-row .show-full-text-container:hover::after, .pattern-group .pattern-metric-row .show-full-text-container:focus-within::after,
.pattern-group .pattern-shape-confidence .show-full-text-container:hover::after,
.pattern-group .pattern-shape-confidence .show-full-text-container:focus-within::after,
.pattern-group .pattern-group-totals .show-full-text-container:hover::after,
.pattern-group .pattern-group-totals .show-full-text-container:focus-within::after,
.pattern-group .smaller-font .show-full-text-container:hover::after,
.pattern-group .smaller-font .show-full-text-container:focus-within::after,
.describe-botText-table .pattern-metric-row .show-full-text-container:hover::after,
.describe-botText-table .pattern-metric-row .show-full-text-container:focus-within::after,
.describe-botText-table .pattern-shape-confidence .show-full-text-container:hover::after,
.describe-botText-table .pattern-shape-confidence .show-full-text-container:focus-within::after,
.describe-botText-table .pattern-group-totals .show-full-text-container:hover::after,
.describe-botText-table .pattern-group-totals .show-full-text-container:focus-within::after,
.describe-botText-table .smaller-font .show-full-text-container:hover::after,
.describe-botText-table .smaller-font .show-full-text-container:focus-within::after {
  height: 2rem !important;
}
.pattern-group .pattern-group-headline .show-full-text-container:nth-of-type(1):hover::after, .pattern-group .pattern-group-headline .show-full-text-container:nth-of-type(1):focus-within::after,
.pattern-group .pattern-metric-row .show-full-text-container:nth-of-type(1):hover::after,
.pattern-group .pattern-metric-row .show-full-text-container:nth-of-type(1):focus-within::after,
.describe-botText-table .pattern-group-headline .show-full-text-container:nth-of-type(1):hover::after,
.describe-botText-table .pattern-group-headline .show-full-text-container:nth-of-type(1):focus-within::after,
.describe-botText-table .pattern-metric-row .show-full-text-container:nth-of-type(1):hover::after,
.describe-botText-table .pattern-metric-row .show-full-text-container:nth-of-type(1):focus-within::after {
  left: -1rem !important;
}
.pattern-group .pattern-metric-row .show-full-text-container:nth-of-type(2):hover::after, .pattern-group .pattern-metric-row .show-full-text-container:nth-of-type(2):focus-within::after,
.describe-botText-table .pattern-metric-row .show-full-text-container:nth-of-type(2):hover::after,
.describe-botText-table .pattern-metric-row .show-full-text-container:nth-of-type(2):focus-within::after {
  left: -1rem !important;
}
.pattern-group .pattern-group-totals .show-full-text-container:nth-of-type(1):hover::after, .pattern-group .pattern-group-totals .show-full-text-container:nth-of-type(1):focus-within::after,
.describe-botText-table .pattern-group-totals .show-full-text-container:nth-of-type(1):hover::after,
.describe-botText-table .pattern-group-totals .show-full-text-container:nth-of-type(1):focus-within::after {
  left: -1rem !important;
}
.pattern-group .pattern-group-totals .show-full-text-container:nth-of-type(2):hover::after, .pattern-group .pattern-group-totals .show-full-text-container:nth-of-type(2):focus-within::after,
.describe-botText-table .pattern-group-totals .show-full-text-container:nth-of-type(2):hover::after,
.describe-botText-table .pattern-group-totals .show-full-text-container:nth-of-type(2):focus-within::after {
  right: -1rem !important;
}
.pattern-group .pattern-shape-title .show-full-text-container:hover::after, .pattern-group .pattern-shape-title .show-full-text-container:focus-within::after,
.pattern-group .pattern-shape-confidence .show-full-text-container:hover::after,
.pattern-group .pattern-shape-confidence .show-full-text-container:focus-within::after,
.describe-botText-table .pattern-shape-title .show-full-text-container:hover::after,
.describe-botText-table .pattern-shape-title .show-full-text-container:focus-within::after,
.describe-botText-table .pattern-shape-confidence .show-full-text-container:hover::after,
.describe-botText-table .pattern-shape-confidence .show-full-text-container:focus-within::after {
  left: 50% !important;
  transform: translate(-50%, 0);
}

.show-full-text-container {
  position: relative;
  /* anchor for ::after tooltip */
  display: block;
  /* fill the td’s content width */
  width: 100%;
  overflow: visible;
}
.show-full-text-container span {
  display: block;
  /* required for ellipsis */
  box-sizing: border-box;
  /* width includes padding if you add any */
  width: 100%;
  /* exactly the td’s content width */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  /* clip inside the text line */
  text-overflow: ellipsis;
  min-width: 0;
}
.show-full-text-container:hover {
  cursor: pointer;
}
.show-full-text-container:hover::after, .show-full-text-container:focus-within::after {
  content: attr(data-fulltext);
  position: absolute;
  /* align to the start of the cell */
  bottom: 100%;
  /* place above the cell */
  width: max-content;
  white-space: nowrap;
  max-width: none;
  padding-left: 1rem;
  padding-right: 1rem;
  background: #111;
  color: #fff;
  border-radius: 6px;
  /* allow wrapping inside tooltip */
  word-break: break-word;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s ease-in-out;
  z-index: 1000;
  margin-bottom: 0;
  top: 0;
  height: 2.5rem;
  /* float above adjacent cells */
  pointer-events: none;
  /* avoid hover flicker */
}
.show-full-text-container.selected-item::after {
  content: attr(data-fulltext);
  position: absolute;
  /* align to the start of the cell */
  bottom: 100%;
  /* place above the cell */
  width: max-content;
  white-space: nowrap;
  max-width: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 6px;
  /* allow wrapping inside tooltip */
  word-break: break-word;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s ease-in-out;
  z-index: 1000;
  margin-bottom: 0;
  top: 0;
  height: 2.5rem;
  /* float above adjacent cells */
  pointer-events: none;
  right: -1rem;
}
.show-full-text-container.selected-item.selected-1::after {
  color: #fff;
  background-color: #6A2C55;
}
.show-full-text-container.selected-item.selected-2::after {
  color: #221E26;
  background-color: #F2E9EE;
}
.show-full-text-container.selected-item.selected-3::after {
  color: #221E26;
  background-color: #A8514A;
}

.copy-toast {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  padding: 4px 8px;
  background: #111;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 100000;
}

.copy-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, -120%);
}

@media only screen and (aspect-ratio: 1/1) {
  /* square viewport styles for video recording */
  body[data-video-mode=true] .show-full-text-container:hover::after, body[data-video-mode=true] .show-full-text-container:focus-within::after {
    height: 6rem !important;
  }
  body[data-video-mode=true] .show-full-text-container.selected-item::after {
    height: 6rem !important;
  }
}
@media only screen and (min-width: 1600px) and (min-aspect-ratio: 15/9) and (max-aspect-ratio: 17/9) {
  /* 16/9 view viewport styles for video recording */
  body[data-video-mode=true] .show-full-text-container:hover::after, body[data-video-mode=true] .show-full-text-container:focus-within::after {
    height: 3.4rem !important;
  }
  body[data-video-mode=true] .show-full-text-container.selected-item::after {
    height: 3.4rem !important;
  }
  body[data-video-mode=true] .pattern-group .smaller-font .show-full-text-container:hover::after, body[data-video-mode=true] .pattern-group .smaller-font .show-full-text-container:focus-within::after,
  body[data-video-mode=true] .describe-botText-table .smaller-font .show-full-text-container:hover::after,
  body[data-video-mode=true] .describe-botText-table .smaller-font .show-full-text-container:focus-within::after {
    height: 3.4rem !important;
  }
  body[data-video-mode=true] .pattern-group .pattern-shape-confidence .show-full-text-container:hover::after, body[data-video-mode=true] .pattern-group .pattern-shape-confidence .show-full-text-container:focus-within::after,
  body[data-video-mode=true] .pattern-group .pattern-group-totals .show-full-text-container:hover::after,
  body[data-video-mode=true] .pattern-group .pattern-group-totals .show-full-text-container:focus-within::after,
  body[data-video-mode=true] .describe-botText-table .pattern-shape-confidence .show-full-text-container:hover::after,
  body[data-video-mode=true] .describe-botText-table .pattern-shape-confidence .show-full-text-container:focus-within::after,
  body[data-video-mode=true] .describe-botText-table .pattern-group-totals .show-full-text-container:hover::after,
  body[data-video-mode=true] .describe-botText-table .pattern-group-totals .show-full-text-container:focus-within::after {
    height: 3rem !important;
  }
  body[data-video-mode=true] .pattern-group .pattern-metric-row .show-full-text-container:hover::after, body[data-video-mode=true] .pattern-group .pattern-metric-row .show-full-text-container:focus-within::after,
  body[data-video-mode=true] .describe-botText-table .pattern-metric-row .show-full-text-container:hover::after,
  body[data-video-mode=true] .describe-botText-table .pattern-metric-row .show-full-text-container:focus-within::after {
    height: 2rem !important;
  }
}
/* width */
::-webkit-scrollbar {
  width: 0.5rem;
}

.token-scroll::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #2D2832;
  border-radius: 1rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #38313E;
  cursor: pointer;
}

/* Scrollbar for .previewContainer */
.previewContainer .fixTableContainer::-webkit-scrollbar-thumb,
.previewContainer .scrollContainer::-webkit-scrollbar-thumb {
  background: #B08D57;
}

.previewContainer .fixTableContainer::-webkit-scrollbar-thumb:hover,
.previewContainer .scrollContainer::-webkit-scrollbar-thumb:hover {
  background: #8F7145;
}

.previewContainer .fixTableContainer::-webkit-scrollbar {
  width: 8px;
  height: 0.5rem;
}

.under-construction {
  height: 30rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  --d: 0.3rem;
  background: radial-gradient(circle at var(--d) var(--d), #eeeeee calc(var(--d) - 0.1rem), rgba(0, 0, 0, 0) var(--d)) 0.5rem 0.5rem/2rem 2rem;
}
.under-construction span {
  font-size: 1.8rem;
}
.under-construction img {
  width: 3rem;
  height: 3rem;
}

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(79, 33, 63, 0.98);
  font-size: 1.4rem;
  padding: 3rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 -1rem 3rem rgba(0, 0, 0, 0.12);
  z-index: 99999;
  display: none;
  color: #fff;
}
.cookie-banner.visible {
  display: block;
}
.cookie-banner a {
  color: #fff;
}
.cookie-banner .cookie-content {
  max-width: 120rem;
  margin: 0 auto;
}
.cookie-banner .cookie-content .cookie-actions-wrapper {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.cookie-banner .cookie-content .cookie-actions-wrapper p {
  flex: 0 0 70%;
}
.cookie-banner .cookie-content .cookie-actions-wrapper .cookie-actions {
  flex: 1;
}
.cookie-banner .cookie-content .cookie-actions,
.cookie-banner .cookie-content .cookie-save {
  display: flex;
  justify-content: end;
  gap: 1rem;
}
.cookie-banner .cookie-content .cookie-actions .cookie-banner-button,
.cookie-banner .cookie-content .cookie-save .cookie-banner-button {
  border: none;
  border-radius: 999rem;
  padding: 1rem 2rem;
  background: none;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
}
.cookie-banner .cookie-content .cookie-actions .cookie-banner-button:hover,
.cookie-banner .cookie-content .cookie-save .cookie-banner-button:hover {
  cursor: pointer;
}
.cookie-banner .cookie-content .cookie-actions .cookie-banner-button.reject-all,
.cookie-banner .cookie-content .cookie-save .cookie-banner-button.reject-all {
  background-color: #000;
}
.cookie-banner .cookie-content .cookie-actions .cookie-banner-button.accept-all,
.cookie-banner .cookie-content .cookie-save .cookie-banner-button.accept-all {
  background-color: #000;
}
.cookie-banner .cookie-content .cookie-actions .cookie-banner-button.customize,
.cookie-banner .cookie-content .cookie-save .cookie-banner-button.customize {
  border: 1px solid #fff;
}
.cookie-banner .cookie-content .cookie-actions .cookie-banner-button.submit,
.cookie-banner .cookie-content .cookie-save .cookie-banner-button.submit {
  background-color: #000;
}
.cookie-banner .cookie-content .cookie-settings {
  display: none;
  margin-top: 2rem;
}
.cookie-banner .cookie-content .cookie-settings.visible {
  display: block;
}
.cookie-banner .cookie-content .cookie-settings .cookie-vendor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.cookie-banner .cookie-content .cookie-settings .cookie-vendor:not(:last-of-type) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cookie-banner .cookie-content .cookie-settings .cookie-vendor .cookie-switch {
  position: relative;
  display: inline-block;
  width: 5.4rem;
  height: 3rem;
  flex-shrink: 0;
}
.cookie-banner .cookie-content .cookie-settings .cookie-vendor .cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.cookie-banner .cookie-content .cookie-settings .cookie-vendor .cookie-switch .slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999rem;
  transition: 0.25s ease;
}
.cookie-banner .cookie-content .cookie-settings .cookie-vendor .cookie-switch .slider::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.4rem;
  width: 2.2rem;
  height: 2.2rem;
  background: #fff;
  border-radius: 50%;
  transition: 0.25s ease;
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.15);
}
.cookie-banner .cookie-content .cookie-settings .cookie-vendor .cookie-switch input:checked + .slider {
  background: #F2E9EE;
}
.cookie-banner .cookie-content .cookie-settings .cookie-vendor .cookie-switch input:checked + .slider::before {
  transform: translateX(2.4rem);
}
.cookie-banner .cookie-content .cookie-settings .cookie-vendor .cookie-switch input:focus + .slider {
  box-shadow: 0 0 0 0.3rem rgba(106, 44, 85, 0.15);
}
.cookie-banner .cookie-content .cookie-settings .cookie-save {
  margin-top: 2rem;
}
.cookie-banner .cookie-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  border: none;
  background: none;
  cursor: pointer;
  color: #fff;
  font-size: 3rem;
}

.cookie-fab {
  position: fixed;
  right: 1rem;
  bottom: 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 999rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99998;
  background-color: rgba(0, 0, 0, 0.5);
}
.cookie-fab img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
  width: 2rem;
}

@media only screen and (max-width: 2000px) {
  .cookie-fab {
    bottom: 2rem;
  }
}
@media only screen and (max-width: 576px) {
  .cookie-fab {
    bottom: 3rem;
  }
  .cookie-banner .cookie-content .cookie-actions-wrapper {
    display: block;
  }
  .cookie-banner .cookie-content .cookie-actions-wrapper p {
    padding-right: 2rem;
  }
  .cookie-banner .cookie-content .cookie-actions {
    margin-top: 2rem;
  }
}
.loader-2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-2 .spinner {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  /* Modern gradient spinner */
  background: conic-gradient(from 0deg, rgba(106, 44, 85, 0.15), #6A2C55);
  /* Cut out the center */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.35rem), #000 calc(100% - 0.35rem));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.35rem), #000 calc(100% - 0.35rem));
  animation: spin 0.9s linear infinite;
}
.loader-2 .spinner.small {
  width: 2rem;
  height: 2rem;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.25rem), #000 calc(100% - 0.25rem));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.25rem), #000 calc(100% - 0.25rem));
}
.loader-2 .spinner.xs {
  width: 1.4rem;
  height: 1.4rem;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.2rem), #000 calc(100% - 0.2rem));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.2rem), #000 calc(100% - 0.2rem));
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loader-spin {
  0% {
    transform: rotate(0deg) scale(0.5);
    border-radius: 1rem;
  }
  50% {
    transform: rotate(180deg) scale(1);
    border-radius: 3rem;
  }
  100% {
    transform: rotate(360deg) scale(0.5);
    border-radius: 1rem;
  }
}
@keyframes showUp {
  0% {
    transform: scale(0.995);
  }
  90% {
    transform: scale(1.005);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ani-icon {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes ani-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes ani-pulse-2 {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.7;
  }
  90% {
    transform: scale(2);
    opacity: 0.2;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes popUp {
  0% {
    transform: scale(0.1);
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes popUp-tab {
  0% {
    transform: scaleY(0.1);
  }
  80% {
    transform: scaleY(1.1);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes spinPulse {
  0% {
    transform: rotate(0deg) scale(0.95);
    opacity: 1;
  }
  25% {
    transform: rotate(80deg);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
    opacity: 0.7;
  }
  75% {
    transform: rotate(320deg);
  }
  100% {
    transform: rotate(360deg) scale(0.95);
    opacity: 1;
  }
}
@keyframes spinUniverse {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 0.8;
  }
  25% {
    transform: rotate(80deg);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
    opacity: 1;
  }
  75% {
    transform: rotate(320deg);
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 0.8;
  }
}
@keyframes letter-popup {
  0% {
    transform: scaleY(0);
  }
  80% {
    transform: scaleY(1.1);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes fadeOutIn {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-out-in {
  animation: fadeOutIn 0.5s ease;
}

@keyframes sidebar-button-loading {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
@keyframes flashAnimation {
  0% {
    transform: scaleY(0);
  }
  10% {
    transform: scaleY(1);
  }
  90% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
    display: none;
  }
}
@keyframes scaleDragDrawUp {
  0% {
    transform: scaleY(0.8);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}
@keyframes scaleDragDrawDown {
  0% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0.8);
    opacity: 0;
  }
}
@keyframes active-animation {
  0%, 100% {
    background-color: rgba(255, 255, 255, 0.08);
  }
  50% {
    background-color: linear-gradient(135deg, #6A2C55, #8B5478);
  }
}
@keyframes wobble {
  0%, 100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-2rem);
    transform: translateX(-2rem);
  }
  30% {
    -webkit-transform: translateX(1rem);
    transform: translateX(1rem);
  }
  45% {
    -webkit-transform: translateX(-1rem);
    transform: translateX(-1rem);
  }
  60% {
    -webkit-transform: translateX(0.6060606061rem);
    transform: translateX(0.6060606061rem);
  }
  75% {
    -webkit-transform: translateX(-0.3636363636rem);
    transform: translateX(-0.3636363636rem);
  }
}
@media only screen and (aspect-ratio: 1/1) {
  /* square viewport styles for video recording */
  body[data-video-mode=true] .loader-2 .spinner {
    width: 6rem !important;
    height: 6rem !important;
    /* Cut out the center */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.7rem), #000 calc(100% - 0.7rem)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 0.7rem), #000 calc(100% - 0.7rem)) !important;
  }
  body[data-video-mode=true] .loader-2 .spinner.small {
    width: 4rem !important;
    height: 4rem !important;
  }
  body[data-video-mode=true] .loader-2 .spinner.xs {
    width: 2.8rem !important;
    height: 2.8rem !important;
  }
}
#agentic-container {
  display: grid;
  grid-template-rows: 7vh 88vh;
  grid-template-columns: [left-start] 1fr [left-end right-start] 20rem [right-end];
  padding: 0 1rem;
  position: relative;
}
#agentic-container .content-header {
  padding: 0 2rem;
  grid-column: left-start/right-end;
  grid-row: 1/1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#agentic-container .content-header h1 {
  display: flex;
}
#agentic-container .content-header h1 img {
  margin-right: 1rem;
  width: 3rem;
}
#agentic-container .content-header h1 span {
  font-size: 3rem;
}
#agentic-container .content-header .content-header-button-box {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#agentic-container .content-header img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#agentic-container .content-header #agent-shared-with-viewer {
  margin-left: 1rem;
}
#agentic-container.shared.full-read .content-header h1 {
  color: #A8514A;
}
#agentic-container.shared.full-read .content-header h1 img {
  filter: invert(66%) sepia(82%) saturate(388%) hue-rotate(1deg) brightness(105%) contrast(104%);
}
#agentic-container ul,
#agentic-container ol {
  font-size: 1.2rem;
}
#agentic-container ul:not(.showBullets),
#agentic-container ol:not(.showBullets) {
  list-style-type: none;
}
#agentic-container ul li,
#agentic-container ol li {
  width: 100%;
  margin: 1rem 0;
  padding: 1rem 0.5rem;
  border-radius: 0.5rem;
}
#agentic-container ul li > img,
#agentic-container ol li > img {
  height: 2.5rem;
  margin-right: 1rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#agentic-container ul.showBullets,
#agentic-container ol.showBullets {
  padding: 1rem;
}
#agentic-container ul.showBullets li,
#agentic-container ol.showBullets li {
  margin: 0 1rem;
  padding: 0.05rem;
}
#agentic-container #drag-chart-container {
  position: absolute;
  flex-direction: column;
  display: none;
}
#agentic-container #drag-chart-container.show {
  display: flex;
  width: 20vw;
  height: 20vw;
  background: linear-gradient(180deg, #27282D 95%, #1D1D1D 100%);
  right: 0rem;
  bottom: 20rem;
  z-index: 1000000;
  border-radius: 1.5rem;
  animation: scaleDragDrawUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#agentic-container #drag-chart-container.show.smoothHide {
  animation: scaleDragDrawDown 0.15s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#agentic-container #drag-chart-container .drag-chart-container-header {
  display: flex;
  justify-content: end;
  align-items: center;
  height: 4rem;
  padding: 0.5rem;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 1.5rem 1.5rem 0 0;
}
#agentic-container #drag-chart-container .drag-chart-container-header:hover {
  cursor: pointer;
}
#agentic-container #drag-chart-container .drag-chart-container-header img {
  width: 3rem;
  height: 3rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#agentic-container #drag-chart-container .drag-chart-container-header img:hover {
  cursor: pointer;
}
#agentic-container #drag-chart-container #drag-chart-container-chart {
  flex: 1;
  padding: 1rem;
}

.chat-container {
  grid-column: left-start/left-end;
  grid-row: 2/2;
  overflow: auto;
  display: grid;
  grid-template-rows: 1fr auto auto;
}

#chatbox {
  z-index: 1;
  position: relative;
  background-color: #221E26;
  border-radius: 0.5rem;
  padding: 2rem;
  grid-row: 1/1;
  overflow: auto;
}
#chatbox.loading::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  margin: 1.5rem;
  margin-left: 12rem;
  border-radius: 50%;
  /* Modern gradient spinner */
  background: conic-gradient(from 0deg, rgba(106, 44, 85, 0.15), #6A2C55);
  /* Cut out the center to form a ring */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.3rem), #000 calc(100% - 0.3rem));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.3rem), #000 calc(100% - 0.3rem));
  animation: spin 0.9s linear infinite;
}
#chatbox .botText:not(.noflex),
#chatbox .userText {
  margin-bottom: 1.4rem;
  display: flex;
  gap: 1rem;
}
#chatbox .botText:not(.noflex) {
  justify-content: left;
}
#chatbox .userText {
  justify-content: end;
}
#chatbox .botText > .chat-author-icon,
#chatbox .userText > .chat-author-icon {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1000px;
}
#chatbox .botText > .chat-author-icon {
  background-color: #27282D;
}
#chatbox .userText > .chat-author-icon {
  background-color: #494949;
}
#chatbox .botText > span {
  width: 45%;
}
#chatbox .userText > span {
  max-width: 45%;
}
#chatbox .botText .chat-type {
  padding: 0.4rem 0.2rem;
  border-radius: 0.6rem;
}
#chatbox .botText .chat-type.metric {
  background-color: #6A2C55;
}
#chatbox .botText .chat-type.goal {
  background-color: #A8514A;
  color: #221E26;
}
#chatbox .botText .chat-type.explore {
  background-color: #F2E9EE;
  color: #221E26;
}
#chatbox .botText .chat-value {
  font-weight: bold;
}
#chatbox .botText > span,
#chatbox .userText > span {
  border-radius: 2rem;
  padding: 1.2rem 1.8rem;
  animation: showUp 0.2s ease-out;
  /* --- Background SVG watermark --- */
  /* --- Text container --- */
  /* --- Vertical decorative lines --- */
}
#chatbox .botText > span h4,
#chatbox .userText > span h4 {
  margin-bottom: 1rem;
}
#chatbox .botText > span h4.jump-to-initial-message:hover,
#chatbox .userText > span h4.jump-to-initial-message:hover {
  cursor: pointer;
}
#chatbox .botText > span .botText-content-container:not(:has(.no-x-scroll)),
#chatbox .userText > span .botText-content-container:not(:has(.no-x-scroll)) {
  overflow-x: auto;
}
#chatbox .botText > span .botText-content-container:not(:has(.no-x-scroll))::-webkit-scrollbar,
#chatbox .userText > span .botText-content-container:not(:has(.no-x-scroll))::-webkit-scrollbar {
  height: 0.2rem;
}
#chatbox .botText > span .botText-content-container:not(:has(.no-x-scroll))::-webkit-scrollbar-thumb,
#chatbox .userText > span .botText-content-container:not(:has(.no-x-scroll))::-webkit-scrollbar-thumb {
  background: #fff;
}
#chatbox .botText > span.wide,
#chatbox .userText > span.wide {
  width: 60%;
}
#chatbox .botText > span.wide-2,
#chatbox .userText > span.wide-2 {
  width: 80%;
}
#chatbox .botText > span.fluent-text,
#chatbox .userText > span.fluent-text {
  position: relative;
}
#chatbox .botText > span.fluent-text .ai-response,
#chatbox .userText > span.fluent-text .ai-response {
  max-width: 720px;
  line-height: 1.6;
}
#chatbox .botText > span.fluent-text .ai-section,
#chatbox .userText > span.fluent-text .ai-section {
  margin-bottom: 16px;
}
#chatbox .botText > span.fluent-text .ai-section-title,
#chatbox .userText > span.fluent-text .ai-section-title {
  font-weight: 600;
  margin-bottom: 4px;
}
#chatbox .botText > span.fluent-text .ai-highlight,
#chatbox .userText > span.fluent-text .ai-highlight {
  color: #F2E9EE;
  font-weight: 600;
}
#chatbox .botText > span.fluent-text .ai-recommendation,
#chatbox .userText > span.fluent-text .ai-recommendation {
  border-left: 3px solid #6A2C55;
  padding-left: 12px;
}
#chatbox .botText > span.fluent-text::before,
#chatbox .userText > span.fluent-text::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
#chatbox .botText > span.fluent-text > p,
#chatbox .userText > span.fluent-text > p {
  position: relative;
  padding-left: 2rem;
  font-size: 1.4rem;
  opacity: 0.85;
  z-index: 1;
}
#chatbox .botText > span.fluent-text > p::before, #chatbox .botText > span.fluent-text > p::after,
#chatbox .userText > span.fluent-text > p::before,
#chatbox .userText > span.fluent-text > p::after {
  content: "";
  position: absolute;
  left: 0;
  width: 0.2rem;
  height: 100%;
  background-color: #F2E9EE;
}
#chatbox .botText > span.fluent-text > p::before,
#chatbox .userText > span.fluent-text > p::before {
  top: 0%;
}
#chatbox .botText > span.fluent-text > p::after,
#chatbox .userText > span.fluent-text > p::after {
  bottom: 0;
  left: 0.5rem;
}
#chatbox .botText > span.loaderContainer,
#chatbox .userText > span.loaderContainer {
  background-color: rgba(0, 0, 0, 0);
  height: 4rem;
}
#chatbox .botText > span.loaderContainer .loader,
#chatbox .userText > span.loaderContainer .loader {
  background-size: 8%;
}
#chatbox .botText > span.chart-content,
#chatbox .userText > span.chart-content {
  width: 80%;
}
#chatbox .botText > span .bot-text-chart-container,
#chatbox .userText > span .bot-text-chart-container {
  display: flex;
  height: 30rem;
  margin-top: 1.5rem;
}
#chatbox .botText > span.hidden,
#chatbox .userText > span.hidden {
  opacity: 0;
}
#chatbox .botText > span h4.bd-headline,
#chatbox .userText > span h4.bd-headline {
  text-decoration: underline;
  text-decoration-color: #F2E9EE;
  text-decoration-thickness: 0.25rem;
  margin-top: 1.5rem;
}
#chatbox .botText > span h4.bd-headline.in-table-color-1,
#chatbox .userText > span h4.bd-headline.in-table-color-1 {
  text-decoration-color: #007FFF;
}
#chatbox .botText > span h4.bd-headline.in-table-color-2,
#chatbox .userText > span h4.bd-headline.in-table-color-2 {
  text-decoration-color: #FFC107;
}
#chatbox .botText > span h4.bd-headline.in-table-color-3,
#chatbox .userText > span h4.bd-headline.in-table-color-3 {
  text-decoration-color: #00E6A8;
}
#chatbox .botText > span h4.bd-headline.in-table-color-4,
#chatbox .userText > span h4.bd-headline.in-table-color-4 {
  text-decoration-color: #4ca5ff;
}
#chatbox .botText > span h4.bd-headline.in-table-color-5,
#chatbox .userText > span h4.bd-headline.in-table-color-5 {
  text-decoration-color: #ffd351;
}
#chatbox .botText > span h4.bd-headline.in-table-color-6,
#chatbox .userText > span h4.bd-headline.in-table-color-6 {
  text-decoration-color: #4cedc2;
}
#chatbox .botText > span h4.itemslist-bdf-headline,
#chatbox .userText > span h4.itemslist-bdf-headline {
  margin-top: 1.5rem;
}
#chatbox .botText > span .easypivot-sum-time,
#chatbox .userText > span .easypivot-sum-time {
  font-weight: bold;
  color: #F2E9EE;
}
#chatbox .botText > span .easypivot-sum-level0,
#chatbox .botText > span .easypivot-sum-level1,
#chatbox .botText > span .easypivot-sum-level2,
#chatbox .userText > span .easypivot-sum-level0,
#chatbox .userText > span .easypivot-sum-level1,
#chatbox .userText > span .easypivot-sum-level2 {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
#chatbox .botText > span .easypivot-sum-level0 + tr > td,
#chatbox .botText > span .easypivot-sum-level1 + tr > td,
#chatbox .botText > span .easypivot-sum-level2 + tr > td,
#chatbox .userText > span .easypivot-sum-level0 + tr > td,
#chatbox .userText > span .easypivot-sum-level1 + tr > td,
#chatbox .userText > span .easypivot-sum-level2 + tr > td {
  padding-top: 3rem;
}
#chatbox .botText > span .total-row,
#chatbox .userText > span .total-row {
  font-weight: bold;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  color: #FBF7F4;
}
#chatbox .botText > span:has(.botText-row-container.inline),
#chatbox .userText > span:has(.botText-row-container.inline) {
  position: relative;
  padding-right: 6rem;
}
#chatbox .botText > span:has(.botText-row-container.inline) .botText-row-container,
#chatbox .userText > span:has(.botText-row-container.inline) .botText-row-container {
  position: absolute;
  right: 1.5rem;
  top: 0.8rem;
}
#chatbox .botText > span .pattern-group:not(:last-of-type),
#chatbox .userText > span .pattern-group:not(:last-of-type) {
  margin-bottom: 2rem;
}
#chatbox .botText > span .pattern-group .pattern-group-headline,
#chatbox .userText > span .pattern-group .pattern-group-headline {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
#chatbox .botText > span .pattern-group .pattern-group-totals,
#chatbox .userText > span .pattern-group .pattern-group-totals {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  justify-content: start;
  font-size: 1.2rem;
  opacity: 0.85;
}
#chatbox .botText > span .pattern-group .pattern-group-totals div:last-of-type,
#chatbox .userText > span .pattern-group .pattern-group-totals div:last-of-type {
  text-align: right;
}
#chatbox .botText > span .pattern-group .pattern-group-main,
#chatbox .userText > span .pattern-group .pattern-group-main {
  display: flex;
  align-items: stretch;
  height: 18rem;
  background-color: rgba(0, 0, 0, 0.08);
  margin-left: -1.8rem;
  margin-right: -1.8rem;
  padding-left: 1.8rem;
  padding-right: 1.8rem;
}
#chatbox .botText > span .pattern-group .pattern-group-chart,
#chatbox .userText > span .pattern-group .pattern-group-chart {
  flex: 0 0 75%;
  display: flex;
  margin-left: -1rem;
  margin-right: 1rem;
}
#chatbox .botText > span .pattern-group .pattern-group-chart div,
#chatbox .userText > span .pattern-group .pattern-group-chart div {
  flex: 1;
  position: relative;
}
#chatbox .botText > span .pattern-group .pattern-group-chart div canvas,
#chatbox .userText > span .pattern-group .pattern-group-chart div canvas {
  width: 100% !important;
  height: 100% !important;
}
#chatbox .botText > span .pattern-group .pattern-group-shapes,
#chatbox .userText > span .pattern-group .pattern-group-shapes {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}
#chatbox .botText > span .pattern-group .pattern-group-shapes .pattern-shape-badge,
#chatbox .userText > span .pattern-group .pattern-group-shapes .pattern-shape-badge {
  margin: 1rem 0;
  text-align: center;
  border-radius: 1rem;
  padding: 2rem 1rem;
}
#chatbox .botText > span .pattern-group .pattern-group-shapes .pattern-shape-badge .pattern-shape-title,
#chatbox .userText > span .pattern-group .pattern-group-shapes .pattern-shape-badge .pattern-shape-title {
  font-size: 1.4rem;
  font-weight: 600;
}
#chatbox .botText > span .pattern-group .pattern-group-shapes .pattern-shape-badge .pattern-shape-confidence,
#chatbox .userText > span .pattern-group .pattern-group-shapes .pattern-shape-badge .pattern-shape-confidence {
  font-size: 1.1rem;
  opacity: 0.6;
  margin-top: 0.2rem;
}
#chatbox .botText > span .pattern-group .pattern-group-details,
#chatbox .userText > span .pattern-group .pattern-group-details {
  margin-top: 1rem;
}
#chatbox .botText > span .pattern-group .pattern-group-details .pattern-details-toggle,
#chatbox .userText > span .pattern-group .pattern-group-details .pattern-details-toggle {
  display: inline-block;
  font-size: 1.2rem;
  opacity: 0.7;
  cursor: pointer;
  margin-bottom: 0.5rem;
}
#chatbox .botText > span .pattern-group .pattern-group-details .pattern-details-toggle:hover,
#chatbox .userText > span .pattern-group .pattern-group-details .pattern-details-toggle:hover {
  opacity: 1;
}
#chatbox .botText > span .pattern-group .pattern-group-spacer,
#chatbox .userText > span .pattern-group .pattern-group-spacer {
  height: 1rem;
}
#chatbox .botText > span .pattern-group .pattern-metrics-wrapper,
#chatbox .userText > span .pattern-group .pattern-metrics-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  font-size: 1.2rem;
}
#chatbox .botText > span .pattern-group .pattern-metric-row,
#chatbox .userText > span .pattern-group .pattern-metric-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-width: 18rem;
  opacity: 0.85;
}
#chatbox .botText > span .pattern-group .pattern-header-wrapper,
#chatbox .userText > span .pattern-group .pattern-header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#chatbox .botText > span .low-opacity,
#chatbox .userText > span .low-opacity {
  opacity: 0.5;
}
#chatbox .botText > span:not(.loaderContainer) {
  background: linear-gradient(180deg, #27282D 95%, #1D1D1D 100%);
  box-shadow: inset 0 0 0 0 #6A2C55;
  transition: box-shadow 0.2s ease;
}
#chatbox .botText.jump-highlight > span {
  box-shadow: inset 0 0 0 0.5rem #6A2C55;
}
#chatbox .userText > span:not(.loaderContainer) {
  background: linear-gradient(180deg, #494949 95%, #5F5F5F 100%);
}
#chatbox .botText:has(.loaderContainer) + .botText > .chat-author-icon {
  display: none;
}
#chatbox .botText-content-container:has(.table-size-loading:not(.visible)) {
  background-image: url("../img/hourglass.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 3rem 3rem;
  /* adjust size if needed */
}
#chatbox .botText table {
  table-layout: fixed;
  width: 100%;
  border-radius: 0.5rem;
  padding: 1rem;
  border-collapse: collapse;
}
#chatbox .botText table.max-content {
  width: max-content;
}
#chatbox .botText table.max-content th {
  white-space: nowrap;
}
#chatbox .botText table.table-size-loading {
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}
#chatbox .botText table.table-size-loading.visible {
  opacity: 1;
}
#chatbox .botText table td {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#chatbox .botText table td:last-of-type:not(:has(.mutual-information-chart-container, .change-score-container, .table-chart-container-sum), .left-section-headline):hover {
  padding-right: 1rem;
}
#chatbox .botText table td:last-of-type:not(:has(.mutual-information-chart-container, .change-score-container, .table-chart-container-sum), .left-section-headline):hover .show-full-text-container.selected-item::after {
  right: -1rem !important;
}
#chatbox .botText table td:last-of-type:not(:has(.mutual-information-chart-container, .change-score-container, .table-chart-container-sum), .left-section-headline) .show-full-text-container.selected-item::after {
  right: 0 !important;
}
#chatbox .botText table .no-mutual-information-signal {
  opacity: 0.25;
}
#chatbox .table-dropdown-icon {
  width: 12px;
  height: 12px;
  margin-left: 6px;
  vertical-align: middle;
  transition: transform 0.2s ease;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%) !important;
}
#chatbox .botText-row-container {
  display: flex;
  justify-content: end;
}
#chatbox .botText-row-container .botText-menu-container {
  width: 10rem;
  height: 2.8rem;
  position: relative;
}
#chatbox .botText-row-container .botText-menu-container:has(img:nth-of-type(2)) img:first-of-type {
  right: 3rem !important;
}
#chatbox .botText-row-container .botText-menu-container:has(img:nth-of-type(3)) img:nth-of-type(2) {
  right: 6rem !important;
}
#chatbox .botText-row-container img {
  position: absolute;
  width: 2.8rem;
  filter: invert(70%) sepia(0%) saturate(0%) brightness(90%) contrast(95%);
  padding: 0.5rem;
  border-radius: 1000px;
  right: 0;
}
#chatbox .botText-row-container img:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.1);
}
#chatbox .botText-row-container img.big {
  width: 3rem;
  padding: 0.3rem;
}
#chatbox .botText-row-container .botText-menu-list {
  position: absolute;
  bottom: 3rem;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  color: #444;
  text-align: center;
  font-weight: bold;
  border-radius: 1.2rem;
  padding: 0.2rem;
  display: none;
}
#chatbox .botText-row-container .botText-menu-list.visible {
  display: block;
  z-index: 10000;
}
#chatbox .botText-row-container .botText-menu-list li {
  border-radius: 1.2rem;
  margin: 0;
  margin-bottom: 0.5rem;
}
#chatbox .botText-row-container .botText-menu-list li:last-child {
  margin-bottom: 0;
}
#chatbox .botText-row-container .botText-menu-list li:hover {
  background-color: #6A2C55;
  color: #ffffff;
  cursor: pointer;
}
#chatbox p.has-ts {
  position: relative;
}
#chatbox p.has-ts::before {
  content: attr(data-time);
  position: absolute;
  top: -10px;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(20, 20, 20, 0.92);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 50;
}
#chatbox p.has-ts:hover::before, #chatbox p.has-ts:hover::after {
  opacity: 1;
}
#chatbox p.botText.has-ts::before {
  left: 0;
  transform: translate(0, -100%);
}
#chatbox p.botText.has-ts::after {
  left: 14px;
  transform: translate(0, -2px) rotate(45deg);
}
#chatbox p.userText.has-ts::before {
  right: 0;
  transform: translate(0, -100%);
}
#chatbox p.userText.has-ts::after {
  right: 14px;
  transform: translate(0, -2px) rotate(45deg);
}
#chatbox p.botText.has-ts:hover::before,
#chatbox p.userText.has-ts:hover::before {
  transform: translate(0, calc(-100% - 2px));
}

#clearChatBox {
  position: sticky;
  top: 0;
  text-align: right;
  z-index: 1000;
}
#clearChatBox span {
  opacity: 0;
  cursor: pointer;
}
#clearChatBox span.show {
  opacity: 0.5;
}
#clearChatBox span:hover {
  color: #6A2C55;
  opacity: 1;
}
#clearChatBox span:hover:after {
  content: " history";
}

.break {
  flex-basis: 100%;
  height: 0;
}

#predefinedInput {
  grid-row: 2/2;
  z-index: 2;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
}

#userChatInput {
  grid-row: 3/3;
  display: none;
  justify-content: center;
  width: 100%;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}
#userChatInput.show {
  display: flex;
  padding-top: 1rem;
}
#userChatInput .chatInputContainer {
  display: flex;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}
#userChatInput .textInput {
  width: 100%;
  min-height: 5rem;
  padding: 1rem 4.5rem 2rem 1.5rem;
  border-radius: 2rem;
  border: none;
  background: transparent;
  color: #fff;
  font-family: "Golos Text", sans-serif;
  font-size: 1.5rem;
  line-height: 1.7rem;
  resize: none;
  outline: none;
  box-sizing: border-box;
  /* inset border */
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}
#userChatInput .textInput:focus {
  box-shadow: inset 0 0 0 2px #fff;
}
#userChatInput .chatSubmitButton {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.5;
  transform: scale(0.9);
  transition: all 0.15s ease;
}
#userChatInput .chatSubmitButton.active {
  opacity: 1;
  transform: scale(1);
}
#userChatInput .chatSubmitButton.active:hover {
  transform: scale(1.08);
}
#userChatInput .chatSubmitButton.active img {
  filter: invert(53%) sepia(83%) saturate(1735%) hue-rotate(198deg) brightness(97%) contrast(96%);
}
#userChatInput .chatSubmitButton img {
  width: 1.6rem;
  height: 1.6rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#userChatInput #chatCharCounter {
  position: absolute;
  right: 4.5rem;
  bottom: 1.2rem;
  font-size: 1.1rem;
  color: #fff;
  opacity: 0.75;
}

#predefinedInput:has(.expandedMode) ~ #userChatInput {
  display: none !important;
}

#addMagicTool,
#toggleExpandTools {
  position: relative;
  background-color: #221E26;
}
#addMagicTool > img,
#toggleExpandTools > img {
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#addMagicTool > ul,
#toggleExpandTools > ul {
  position: absolute;
  left: 0;
  bottom: 6rem;
  display: none;
}
#addMagicTool > ul li,
#toggleExpandTools > ul li {
  margin-top: 0;
  margin-bottom: 0.4rem;
  white-space: nowrap;
  background-color: #222222;
  color: #fff;
  border-radius: 1.5rem;
  /* or use 'inline' */
  width: fit-content;
  display: inline-flex;
  align-items: stretch;
  padding: 0rem;
  position: relative;
}
#addMagicTool > ul li.beta::after,
#toggleExpandTools > ul li.beta::after {
  content: "Beta";
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  background-color: #A8514A;
  color: white;
  font-size: 1rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  line-height: 1;
  pointer-events: none;
}
#addMagicTool > ul li label,
#toggleExpandTools > ul li label {
  font-size: 1.5rem;
  padding: 1rem;
  border-radius: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
#addMagicTool > ul li label img,
#toggleExpandTools > ul li label img {
  width: 2rem;
  height: 2rem;
}
#addMagicTool > ul li label:hover,
#toggleExpandTools > ul li label:hover {
  cursor: pointer;
  background-color: #4F213F;
}
#addMagicTool > ul.show,
#toggleExpandTools > ul.show {
  display: block;
}

#predefinedTools,
#showMeOptionsContainer,
#showMeFieldsContainer,
#showMeTimeRangeContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #221E26;
  flex-wrap: wrap;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}
#predefinedTools .predefinedTool,
#predefinedTools .predefinedOption,
#predefinedTools .predefinedField,
#predefinedTools .predefinedTimeOption,
#predefinedTools .datePickerContainer,
#showMeOptionsContainer .predefinedTool,
#showMeOptionsContainer .predefinedOption,
#showMeOptionsContainer .predefinedField,
#showMeOptionsContainer .predefinedTimeOption,
#showMeOptionsContainer .datePickerContainer,
#showMeFieldsContainer .predefinedTool,
#showMeFieldsContainer .predefinedOption,
#showMeFieldsContainer .predefinedField,
#showMeFieldsContainer .predefinedTimeOption,
#showMeFieldsContainer .datePickerContainer,
#showMeTimeRangeContainer .predefinedTool,
#showMeTimeRangeContainer .predefinedOption,
#showMeTimeRangeContainer .predefinedField,
#showMeTimeRangeContainer .predefinedTimeOption,
#showMeTimeRangeContainer .datePickerContainer {
  display: inline-block;
  padding: 1rem;
  background-color: #38313E;
  color: #fff;
  border-radius: 1.5rem;
  margin: 1rem 1rem 0rem 0rem;
  transition: background-color 0.1s;
}
#predefinedTools .predefinedTool.bd-active,
#predefinedTools .predefinedOption.bd-active,
#predefinedTools .predefinedField.bd-active,
#predefinedTools .predefinedTimeOption.bd-active,
#predefinedTools .datePickerContainer.bd-active,
#showMeOptionsContainer .predefinedTool.bd-active,
#showMeOptionsContainer .predefinedOption.bd-active,
#showMeOptionsContainer .predefinedField.bd-active,
#showMeOptionsContainer .predefinedTimeOption.bd-active,
#showMeOptionsContainer .datePickerContainer.bd-active,
#showMeFieldsContainer .predefinedTool.bd-active,
#showMeFieldsContainer .predefinedOption.bd-active,
#showMeFieldsContainer .predefinedField.bd-active,
#showMeFieldsContainer .predefinedTimeOption.bd-active,
#showMeFieldsContainer .datePickerContainer.bd-active,
#showMeTimeRangeContainer .predefinedTool.bd-active,
#showMeTimeRangeContainer .predefinedOption.bd-active,
#showMeTimeRangeContainer .predefinedField.bd-active,
#showMeTimeRangeContainer .predefinedTimeOption.bd-active,
#showMeTimeRangeContainer .datePickerContainer.bd-active {
  background-color: #F2E9EE !important;
  color: #2a2b28 !important;
  font-weight: 600;
}
#predefinedTools .predefinedTool.bd-active:not(.active) .toolInner > .toolIcon,
#predefinedTools .predefinedOption.bd-active:not(.active) .toolInner > .toolIcon,
#predefinedTools .predefinedField.bd-active:not(.active) .toolInner > .toolIcon,
#predefinedTools .predefinedTimeOption.bd-active:not(.active) .toolInner > .toolIcon,
#predefinedTools .datePickerContainer.bd-active:not(.active) .toolInner > .toolIcon,
#showMeOptionsContainer .predefinedTool.bd-active:not(.active) .toolInner > .toolIcon,
#showMeOptionsContainer .predefinedOption.bd-active:not(.active) .toolInner > .toolIcon,
#showMeOptionsContainer .predefinedField.bd-active:not(.active) .toolInner > .toolIcon,
#showMeOptionsContainer .predefinedTimeOption.bd-active:not(.active) .toolInner > .toolIcon,
#showMeOptionsContainer .datePickerContainer.bd-active:not(.active) .toolInner > .toolIcon,
#showMeFieldsContainer .predefinedTool.bd-active:not(.active) .toolInner > .toolIcon,
#showMeFieldsContainer .predefinedOption.bd-active:not(.active) .toolInner > .toolIcon,
#showMeFieldsContainer .predefinedField.bd-active:not(.active) .toolInner > .toolIcon,
#showMeFieldsContainer .predefinedTimeOption.bd-active:not(.active) .toolInner > .toolIcon,
#showMeFieldsContainer .datePickerContainer.bd-active:not(.active) .toolInner > .toolIcon,
#showMeTimeRangeContainer .predefinedTool.bd-active:not(.active) .toolInner > .toolIcon,
#showMeTimeRangeContainer .predefinedOption.bd-active:not(.active) .toolInner > .toolIcon,
#showMeTimeRangeContainer .predefinedField.bd-active:not(.active) .toolInner > .toolIcon,
#showMeTimeRangeContainer .predefinedTimeOption.bd-active:not(.active) .toolInner > .toolIcon,
#showMeTimeRangeContainer .datePickerContainer.bd-active:not(.active) .toolInner > .toolIcon {
  filter: brightness(0) saturate(100%) invert(14%) sepia(4%) saturate(255%) hue-rotate(22deg) brightness(96%) contrast(88%);
}
#predefinedTools .predefinedTool.bd-active.active,
#predefinedTools .predefinedOption.bd-active.active,
#predefinedTools .predefinedField.bd-active.active,
#predefinedTools .predefinedTimeOption.bd-active.active,
#predefinedTools .datePickerContainer.bd-active.active,
#showMeOptionsContainer .predefinedTool.bd-active.active,
#showMeOptionsContainer .predefinedOption.bd-active.active,
#showMeOptionsContainer .predefinedField.bd-active.active,
#showMeOptionsContainer .predefinedTimeOption.bd-active.active,
#showMeOptionsContainer .datePickerContainer.bd-active.active,
#showMeFieldsContainer .predefinedTool.bd-active.active,
#showMeFieldsContainer .predefinedOption.bd-active.active,
#showMeFieldsContainer .predefinedField.bd-active.active,
#showMeFieldsContainer .predefinedTimeOption.bd-active.active,
#showMeFieldsContainer .datePickerContainer.bd-active.active,
#showMeTimeRangeContainer .predefinedTool.bd-active.active,
#showMeTimeRangeContainer .predefinedOption.bd-active.active,
#showMeTimeRangeContainer .predefinedField.bd-active.active,
#showMeTimeRangeContainer .predefinedTimeOption.bd-active.active,
#showMeTimeRangeContainer .datePickerContainer.bd-active.active {
  background-color: #6A2C55 !important;
  color: #fff !important;
}
#predefinedTools .predefinedTool:hover,
#predefinedTools .predefinedOption:hover,
#predefinedTools .predefinedField:hover,
#predefinedTools .predefinedTimeOption:hover,
#predefinedTools .datePickerContainer:hover,
#showMeOptionsContainer .predefinedTool:hover,
#showMeOptionsContainer .predefinedOption:hover,
#showMeOptionsContainer .predefinedField:hover,
#showMeOptionsContainer .predefinedTimeOption:hover,
#showMeOptionsContainer .datePickerContainer:hover,
#showMeFieldsContainer .predefinedTool:hover,
#showMeFieldsContainer .predefinedOption:hover,
#showMeFieldsContainer .predefinedField:hover,
#showMeFieldsContainer .predefinedTimeOption:hover,
#showMeFieldsContainer .datePickerContainer:hover,
#showMeTimeRangeContainer .predefinedTool:hover,
#showMeTimeRangeContainer .predefinedOption:hover,
#showMeTimeRangeContainer .predefinedField:hover,
#showMeTimeRangeContainer .predefinedTimeOption:hover,
#showMeTimeRangeContainer .datePickerContainer:hover {
  cursor: pointer;
  background-color: #4F213F;
}
#predefinedTools .predefinedTool.active,
#predefinedTools .predefinedOption.active,
#predefinedTools .predefinedField.active,
#predefinedTools .predefinedTimeOption.active,
#predefinedTools .datePickerContainer.active,
#showMeOptionsContainer .predefinedTool.active,
#showMeOptionsContainer .predefinedOption.active,
#showMeOptionsContainer .predefinedField.active,
#showMeOptionsContainer .predefinedTimeOption.active,
#showMeOptionsContainer .datePickerContainer.active,
#showMeFieldsContainer .predefinedTool.active,
#showMeFieldsContainer .predefinedOption.active,
#showMeFieldsContainer .predefinedField.active,
#showMeFieldsContainer .predefinedTimeOption.active,
#showMeFieldsContainer .datePickerContainer.active,
#showMeTimeRangeContainer .predefinedTool.active,
#showMeTimeRangeContainer .predefinedOption.active,
#showMeTimeRangeContainer .predefinedField.active,
#showMeTimeRangeContainer .predefinedTimeOption.active,
#showMeTimeRangeContainer .datePickerContainer.active {
  background-color: #6A2C55;
  color: #fff;
}
#predefinedTools .predefinedTool.active-animation,
#predefinedTools .predefinedOption.active-animation,
#predefinedTools .predefinedField.active-animation,
#predefinedTools .predefinedTimeOption.active-animation,
#predefinedTools .datePickerContainer.active-animation,
#showMeOptionsContainer .predefinedTool.active-animation,
#showMeOptionsContainer .predefinedOption.active-animation,
#showMeOptionsContainer .predefinedField.active-animation,
#showMeOptionsContainer .predefinedTimeOption.active-animation,
#showMeOptionsContainer .datePickerContainer.active-animation,
#showMeFieldsContainer .predefinedTool.active-animation,
#showMeFieldsContainer .predefinedOption.active-animation,
#showMeFieldsContainer .predefinedField.active-animation,
#showMeFieldsContainer .predefinedTimeOption.active-animation,
#showMeFieldsContainer .datePickerContainer.active-animation,
#showMeTimeRangeContainer .predefinedTool.active-animation,
#showMeTimeRangeContainer .predefinedOption.active-animation,
#showMeTimeRangeContainer .predefinedField.active-animation,
#showMeTimeRangeContainer .predefinedTimeOption.active-animation,
#showMeTimeRangeContainer .datePickerContainer.active-animation {
  animation: active-animation 0.5s ease;
}
#predefinedTools .predefinedTool.disabled,
#predefinedTools .predefinedOption.disabled,
#predefinedTools .predefinedField.disabled,
#predefinedTools .predefinedTimeOption.disabled,
#predefinedTools .datePickerContainer.disabled,
#showMeOptionsContainer .predefinedTool.disabled,
#showMeOptionsContainer .predefinedOption.disabled,
#showMeOptionsContainer .predefinedField.disabled,
#showMeOptionsContainer .predefinedTimeOption.disabled,
#showMeOptionsContainer .datePickerContainer.disabled,
#showMeFieldsContainer .predefinedTool.disabled,
#showMeFieldsContainer .predefinedOption.disabled,
#showMeFieldsContainer .predefinedField.disabled,
#showMeFieldsContainer .predefinedTimeOption.disabled,
#showMeFieldsContainer .datePickerContainer.disabled,
#showMeTimeRangeContainer .predefinedTool.disabled,
#showMeTimeRangeContainer .predefinedOption.disabled,
#showMeTimeRangeContainer .predefinedField.disabled,
#showMeTimeRangeContainer .predefinedTimeOption.disabled,
#showMeTimeRangeContainer .datePickerContainer.disabled {
  background-color: rgba(0, 0, 0, 0);
  color: grey;
  cursor: auto;
}
#predefinedTools .predefinedTool,
#showMeOptionsContainer .predefinedTool,
#showMeFieldsContainer .predefinedTool,
#showMeTimeRangeContainer .predefinedTool {
  flex-shrink: 0;
}
#predefinedTools .predefinedTool.stop,
#showMeOptionsContainer .predefinedTool.stop,
#showMeFieldsContainer .predefinedTool.stop,
#showMeTimeRangeContainer .predefinedTool.stop {
  display: none;
}
#predefinedTools .predefinedTool.magicTool,
#showMeOptionsContainer .predefinedTool.magicTool,
#showMeFieldsContainer .predefinedTool.magicTool,
#showMeTimeRangeContainer .predefinedTool.magicTool {
  background-color: #222222;
  position: relative;
}
#predefinedTools .predefinedTool.magicTool:not(.disabled):hover,
#showMeOptionsContainer .predefinedTool.magicTool:not(.disabled):hover,
#showMeFieldsContainer .predefinedTool.magicTool:not(.disabled):hover,
#showMeTimeRangeContainer .predefinedTool.magicTool:not(.disabled):hover {
  background-color: #4F213F;
}
#predefinedTools .predefinedTool.magicTool:not(.disabled):hover img,
#showMeOptionsContainer .predefinedTool.magicTool:not(.disabled):hover img,
#showMeFieldsContainer .predefinedTool.magicTool:not(.disabled):hover img,
#showMeTimeRangeContainer .predefinedTool.magicTool:not(.disabled):hover img {
  opacity: 1;
  transform: scale(1);
}
#predefinedTools .predefinedTool.magicTool.active,
#showMeOptionsContainer .predefinedTool.magicTool.active,
#showMeFieldsContainer .predefinedTool.magicTool.active,
#showMeTimeRangeContainer .predefinedTool.magicTool.active {
  background-color: #6A2C55 !important;
  color: #fff !important;
}
#predefinedTools .predefinedOption,
#predefinedTools .predefinedField,
#showMeOptionsContainer .predefinedOption,
#showMeOptionsContainer .predefinedField,
#showMeFieldsContainer .predefinedOption,
#showMeFieldsContainer .predefinedField,
#showMeTimeRangeContainer .predefinedOption,
#showMeTimeRangeContainer .predefinedField {
  background-color: #38313E;
}
#predefinedTools .predefinedTimeOption,
#predefinedTools .datePickerContainer,
#showMeOptionsContainer .predefinedTimeOption,
#showMeOptionsContainer .datePickerContainer,
#showMeFieldsContainer .predefinedTimeOption,
#showMeFieldsContainer .datePickerContainer,
#showMeTimeRangeContainer .predefinedTimeOption,
#showMeTimeRangeContainer .datePickerContainer {
  background-color: #6A2C55;
}
#predefinedTools .datePickerContainer,
#showMeOptionsContainer .datePickerContainer,
#showMeFieldsContainer .datePickerContainer,
#showMeTimeRangeContainer .datePickerContainer {
  display: flex;
  justify-content: left;
  align-items: center;
}
#predefinedTools .datePickerContainer label,
#predefinedTools .datePickerContainer input,
#showMeOptionsContainer .datePickerContainer label,
#showMeOptionsContainer .datePickerContainer input,
#showMeFieldsContainer .datePickerContainer label,
#showMeFieldsContainer .datePickerContainer input,
#showMeTimeRangeContainer .datePickerContainer label,
#showMeTimeRangeContainer .datePickerContainer input {
  margin-right: 0.5rem;
}
#predefinedTools .datePickerContainer input,
#showMeOptionsContainer .datePickerContainer input,
#showMeFieldsContainer .datePickerContainer input,
#showMeTimeRangeContainer .datePickerContainer input {
  color: #fff;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-bottom: 1px solid #fff;
  font-size: 1.5rem;
  font-family: "Golos Text", sans-serif;
  color-scheme: dark;
  text-align: center;
}
#predefinedTools .datePickerContainer .datePickerSubmit,
#showMeOptionsContainer .datePickerContainer .datePickerSubmit,
#showMeFieldsContainer .datePickerContainer .datePickerSubmit,
#showMeTimeRangeContainer .datePickerContainer .datePickerSubmit {
  padding: 0;
  display: flex;
  align-items: center;
}
#predefinedTools .datePickerContainer .datePickerSubmit img,
#showMeOptionsContainer .datePickerContainer .datePickerSubmit img,
#showMeFieldsContainer .datePickerContainer .datePickerSubmit img,
#showMeTimeRangeContainer .datePickerContainer .datePickerSubmit img {
  width: 1.5rem;
  height: 1.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#predefinedTools .datePickerContainer:hover,
#predefinedTools .datePickerContainer label:hover,
#predefinedTools .datePickerContainer input:hover,
#showMeOptionsContainer .datePickerContainer:hover,
#showMeOptionsContainer .datePickerContainer label:hover,
#showMeOptionsContainer .datePickerContainer input:hover,
#showMeFieldsContainer .datePickerContainer:hover,
#showMeFieldsContainer .datePickerContainer label:hover,
#showMeFieldsContainer .datePickerContainer input:hover,
#showMeTimeRangeContainer .datePickerContainer:hover,
#showMeTimeRangeContainer .datePickerContainer label:hover,
#showMeTimeRangeContainer .datePickerContainer input:hover {
  cursor: pointer;
}

#predefinedTools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}
#predefinedTools.show {
  opacity: 1;
}
#predefinedTools.wait .predefinedTool:not(.stop) {
  opacity: 0.5;
  pointer-events: none;
}
#predefinedTools.wait .stop {
  display: flex !important;
}
#predefinedTools.expandedMode .predefinedTool {
  max-width: 40rem;
  padding-right: 1.5rem;
}
#predefinedTools.expandedMode .predefinedTool .toolText {
  opacity: 1;
}
#predefinedTools .flex-break {
  flex-basis: 100%;
  height: 0;
}
#predefinedTools .predefinedTool {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 4.5rem;
  min-width: 4.5rem;
  max-width: 4.5rem;
  padding: 1rem;
  border-radius: 2.25rem;
  overflow: visible;
  flex-shrink: 0;
  transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding-right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* edit icon */
}
#predefinedTools .predefinedTool .toolInner {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.6rem;
  overflow: hidden;
}
#predefinedTools .predefinedTool .toolIcon {
  position: static;
  /* <-- critical fix */
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  flex-shrink: 0;
}
#predefinedTools .predefinedTool:not(.magicTool) .toolIcon {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#predefinedTools .predefinedTool .toolText {
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
}
#predefinedTools .predefinedTool.magicTool label {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1rem;
  height: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
#predefinedTools .predefinedTool.magicTool label img {
  width: 1.3rem;
  height: 1.3rem;
  display: none;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
}
#predefinedTools .predefinedTool.magicTool:hover label {
  opacity: 1;
  pointer-events: auto;
  width: 2rem;
  height: 2rem;
  border-radius: 1rem;
}
#predefinedTools .predefinedTool.magicTool:hover label:hover {
  cursor: pointer;
  background-color: #6A2C55;
}
#predefinedTools .predefinedTool.magicTool:hover label:hover img {
  display: block;
}
#predefinedTools .predefinedTool.active, #predefinedTools .predefinedTool:hover {
  max-width: 40rem;
  padding-right: 1.5rem;
}
#predefinedTools .predefinedTool.active .toolText, #predefinedTools .predefinedTool:hover .toolText {
  opacity: 1;
}
#predefinedTools.loading {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}

#chatWithCampaignManagerInput {
  padding: 1rem;
}

.agents-overview {
  padding: 2rem;
  grid-column: right-start/right-end;
  grid-row: 2/2;
  background-color: #221E26;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.agents-overview p:not(:first-child) {
  margin-top: 3rem;
}
.agents-overview ul:not(.showBullets) {
  list-style-type: none;
}
.agents-overview ul li {
  width: 100%;
  margin: 1rem 0;
  padding: 0 !important;
}
.agents-overview ul li p,
.agents-overview ul li #currentBreakdownStage {
  font-weight: bold;
  margin: 0.2rem;
  font-size: 1.5rem;
}
.agents-overview ul li #currentBreakdownStage {
  display: block;
  text-align: center;
}
.agents-overview ul li .agentProject {
  padding: 0.5rem 1rem;
  margin: 0.2rem;
  background-color: #353535;
  border-radius: 0.5rem;
  display: inline-block;
  cursor: pointer;
  font-size: 1.5rem;
}
.agents-overview ul li .agentProject.not-visible {
  opacity: 0;
}
.agents-overview ul li .agentProject.agentProject:not(.active) {
  text-decoration: line-through;
  text-decoration-thickness: 0.2rem;
  color: grey;
}
.agents-overview ul li .agentProject.wobble {
  animation: wobble 0.5s ease;
}
.agents-overview ul li > img {
  height: 2.5rem;
  margin-right: 1rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
.agents-overview .mobile-menu-icon {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
  width: 2rem;
  height: 2rem;
  display: none;
  position: absolute;
  bottom: 10rem;
  left: 0rem;
}

#currentBreakdownStage {
  color: #F2E9EE;
}

#agentBreakDown {
  background-color: #353535;
  border-radius: 0.5rem;
  position: relative;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#agentBreakDown .activeFrame {
  background-color: #F2E9EE;
  border-radius: 0.5rem;
  color: #2a2b28;
  position: absolute;
  height: 100%;
  z-index: 1;
  transition: left 0.2s, color 0.5s;
}
#agentBreakDown .breakdownStages {
  display: flex;
  justify-content: space-evenly;
}
#agentBreakDown .breakdownStages span {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  z-index: 2;
  flex-grow: 1;
  cursor: pointer;
}
#agentBreakDown .breakdownStages span img {
  width: 2rem;
  height: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#agentBreakDown .breakdownStages span.active {
  color: rgba(0, 0, 0, 0.75);
  font-weight: bold;
}
#agentBreakDown .breakdownStages span.active img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(3%) saturate(5157%) hue-rotate(209deg) brightness(89%) contrast(78%);
}
#agentBreakDown .breakdownStages span.disabled {
  color: grey;
  cursor: auto;
}

#agent-filter {
  display: flex;
  width: 100%;
  overflow: hidden;
  flex-direction: column;
  padding: 0.1rem;
  gap: 1rem;
  border-radius: 0.5rem;
}
#agent-filter.applied {
  background-color: #F2E9EE;
  padding: 0.5rem;
}
#agent-filter.applied #agent-filter-column,
#agent-filter.applied #agent-filter-value {
  display: none;
}

#agent-filter-column,
#agent-filter-value {
  border: 1px solid #aaaaaa;
  border-radius: 0.5rem;
  padding: 1rem 1rem;
  font-size: 1.5rem;
  background-color: #353535;
  color: #fff;
  min-width: 0;
  max-width: 100%;
  flex-shrink: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#agent-filter-applied {
  display: none;
  font-size: 1.2rem;
  color: #353535;
}
#agent-filter-applied img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(3%) saturate(5157%) hue-rotate(209deg) brightness(89%) contrast(78%);
  width: 2rem;
  padding: 0.3rem;
}
#agent-filter-applied.visible {
  display: flex;
  align-items: flex-start;
}

#agent-export-button-container,
#agent-filter-button-container {
  justify-content: center;
  gap: 1rem;
  display: none;
}
#agent-export-button-container.visible,
#agent-filter-button-container.visible {
  display: flex;
}
#agent-export-button-container .small-icon-button,
#agent-filter-button-container .small-icon-button {
  background-color: #B08D57;
}
#agent-export-button-container .small-icon-button img,
#agent-filter-button-container .small-icon-button img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
  width: 2rem;
}
#agent-export-button-container .small-button,
#agent-filter-button-container .small-button {
  background-color: #6A2C55;
}

#agent-apply-filter-button {
  background-color: #F2E9EE !important;
  color: #353535;
}

#agent-close-filter-button {
  background-color: rgba(0, 0, 0, 0) !important;
}
#agent-close-filter-button .button-label {
  color: #F2E9EE;
  font-size: 1.5rem;
}
#agent-close-filter-button img {
  filter: brightness(0) saturate(100%) invert(69%) sepia(39%) saturate(5491%) hue-rotate(122deg) brightness(108%) contrast(101%) !important;
}
#agent-close-filter-button.short .button-label {
  display: none;
}
#agent-close-filter-button.applied .button-label {
  color: #353535;
}
#agent-close-filter-button.applied img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(3%) saturate(5157%) hue-rotate(209deg) brightness(89%) contrast(78%) !important;
}

#agent-apply-filter-button,
#agent-close-filter-button {
  display: none;
}
#agent-apply-filter-button.visible,
#agent-close-filter-button.visible {
  display: flex;
}

.botText-table th {
  text-align: right;
}
.botText-table th:first-child,
.botText-table th.left {
  text-align: left;
}
.botText-table tr:has(td.left-section-headline) td {
  padding-top: 2.5rem;
}
.botText-table tr:has(td.left-headline) td {
  padding-top: 0.5rem;
}
.botText-table td.left-section-headline {
  opacity: 0.2;
  text-align: center;
}
.botText-table .left-padding {
  padding-left: 1rem;
}
.botText-table td.spacer {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 4px solid rgba(0, 0, 0, 0.08);
}
.botText-table td.empty {
  padding-top: 2rem;
}
.botText-table:not(.describe-botText-table) th:not(:first-of-type),
.botText-table:not(.describe-botText-table) td:not(:first-of-type) {
  padding-left: 1rem;
}
.botText-table th:not(:last-of-type),
.botText-table td:not(:last-of-type) {
  padding-right: 0.5rem;
}
.botText-table .intValue,
.botText-table .currencyValue,
.botText-table .percentageValue,
.botText-table .itemsAllocationScore,
.botText-table .itemsAllocationReco,
.botText-table td.right {
  text-align: right;
}
.botText-table .itemsAllocationScore {
  opacity: 0.5;
  width: 5rem;
}
.botText-table .itemsAllocationReco {
  color: #F2E9EE;
  font-weight: bold;
}
.botText-table.in-table-chart tr {
  height: 10rem;
  display: flex;
}
.botText-table .table-sub-headline {
  padding-top: 0.5rem;
  font-weight: bold;
  font-size: 1.4rem;
}
.botText-table .smaller-font {
  font-size: 1.2rem;
  opacity: 0.85;
}
.botText-table.highlight-row-hover tr:not(:first-of-type) {
  opacity: 0.75;
}
.botText-table.highlight-row-hover tr:not(:first-of-type):hover {
  opacity: 1;
}

.table-chart-container {
  position: relative;
  height: 18rem;
  background-color: rgba(0, 0, 0, 0.08);
  width: calc(100% + 3.6rem);
  transform: translateX(-1.8rem);
}
.table-chart-container canvas {
  position: absolute;
  left: 0rem;
  top: 1rem;
  height: calc(100% - 1rem) !important;
  width: 100% !important;
}
.table-chart-container table {
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: calc(100% - 2rem) !important;
}
.table-chart-container table tr {
  height: 16rem;
}
.table-chart-container table tr td {
  font-weight: bold;
}
.table-chart-container .table-chart-container-sum {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.table-chart-container .table-chart-container-sum > span {
  display: inline-block;
  /* ensures spans don't stretch */
  white-space: nowrap;
  /* optional: prevent wrapping if text is long */
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 6px;
  height: 2.5rem;
}
.table-chart-container .table-chart-container-sum span.in-table-color-1 {
  background-color: #007FFF;
}
.table-chart-container .table-chart-container-sum span.in-table-color-2 {
  background-color: #FFC107;
  color: #111111;
}
.table-chart-container .table-chart-container-sum span.in-table-color-3 {
  background-color: #00E6A8;
}
.table-chart-container .table-chart-container-sum span.in-table-color-4 {
  background-color: #4ca5ff;
}
.table-chart-container .table-chart-container-sum span.in-table-color-5 {
  background-color: #ffd351;
}
.table-chart-container .table-chart-container-sum span.in-table-color-6 {
  background-color: #4cedc2;
}

.change-score-container {
  height: 2.3rem;
  position: relative;
}
.change-score-container .change-score-start-icon {
  height: 1.5rem;
  width: 2.5rem;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  border-bottom: 0.2rem solid #007FFF;
}
.change-score-container .change-score-start-icon.in-table-color-1 {
  border-bottom: 0.2rem solid #007FFF;
}
.change-score-container .change-score-start-icon.in-table-color-2 {
  border-bottom: 0.2rem solid #FFC107;
}
.change-score-container .change-score-start-icon.in-table-color-3 {
  border-bottom: 0.2rem solid #00E6A8;
}
.change-score-container .change-score-start-icon.in-table-color-4 {
  border-bottom: 0.2rem solid #4ca5ff;
}
.change-score-container .change-score-start-icon.in-table-color-5 {
  border-bottom: 0.2rem solid #ffd351;
}
.change-score-container .change-score-start-icon.in-table-color-6 {
  border-bottom: 0.2rem solid #4cedc2;
}

.to-chart-container {
  height: 35rem;
}

.report-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: #221E26;
  color: white;
  border: none;
  border-radius: 1rem;
  cursor: pointer;
  font-weight: 500;
}
.report-download-btn:hover {
  background-color: #6A2C55;
}

.report-download-icon {
  width: 2rem;
  height: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}

@media only screen and (max-width: 2000px) {
  #agentic-container {
    grid-template-rows: 8vh 87vh;
  }
  .breakdownStages span {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 576px), only screen and (orientation: portrait) {
  #agentic-container {
    grid-template-columns: [left-start] 1fr [left-end] 1rem;
  }
  .chat-container {
    grid-template-rows: 1fr auto 3rem;
  }
  .agents-overview {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2rem;
    z-index: 10;
    transition: width 0.3s ease;
    overflow: hidden;
    padding: 0;
  }
  .agents-overview #agent-overview-list {
    display: none;
  }
  .agents-overview .mobile-menu-icon {
    display: block;
  }
  .agents-overview:hover, .agents-overview:focus-within {
    width: 30rem;
    padding: 2rem;
  }
  .agents-overview:hover #agent-overview-list, .agents-overview:focus-within #agent-overview-list {
    display: block;
  }
  .agents-overview:hover .mobile-menu-icon, .agents-overview:focus-within .mobile-menu-icon {
    display: none;
  }
  #chatbox {
    padding: 2rem 0;
  }
  #chatbox .botText .chat-author-icon,
  #chatbox .userText .chat-author-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
  #chatbox .botText > span,
  #chatbox .userText > span {
    width: 78% !important;
    max-width: 78% !important;
  }
  #chatbox .botText > span .botText-content-container::-webkit-scrollbar,
  #chatbox .userText > span .botText-content-container::-webkit-scrollbar {
    display: none;
  }
  #chatbox .botText > span.wide table:has(tr > *:nth-child(3)),
  #chatbox .botText > span.wide table.wide-table-content, #chatbox .botText > span.wide-2 table:has(tr > *:nth-child(3)),
  #chatbox .botText > span.wide-2 table.wide-table-content,
  #chatbox .userText > span.wide table:has(tr > *:nth-child(3)),
  #chatbox .userText > span.wide table.wide-table-content,
  #chatbox .userText > span.wide-2 table:has(tr > *:nth-child(3)),
  #chatbox .userText > span.wide-2 table.wide-table-content {
    min-width: 40rem;
  }
  #chatbox .botText > span.wide table:has(tr > *:nth-child(3)) .small-col,
  #chatbox .botText > span.wide table.wide-table-content .small-col, #chatbox .botText > span.wide-2 table:has(tr > *:nth-child(3)) .small-col,
  #chatbox .botText > span.wide-2 table.wide-table-content .small-col,
  #chatbox .userText > span.wide table:has(tr > *:nth-child(3)) .small-col,
  #chatbox .userText > span.wide table.wide-table-content .small-col,
  #chatbox .userText > span.wide-2 table:has(tr > *:nth-child(3)) .small-col,
  #chatbox .userText > span.wide-2 table.wide-table-content .small-col {
    width: 20%;
  }
  #chatbox .botText > span.wide table:has(tr > *:nth-child(4)), #chatbox .botText > span.wide-2 table:has(tr > *:nth-child(4)),
  #chatbox .userText > span.wide table:has(tr > *:nth-child(4)),
  #chatbox .userText > span.wide-2 table:has(tr > *:nth-child(4)) {
    min-width: 50rem;
  }
  #chatbox .botText > span.wide table:has(tr > *:nth-child(5)), #chatbox .botText > span.wide-2 table:has(tr > *:nth-child(5)),
  #chatbox .userText > span.wide table:has(tr > *:nth-child(5)),
  #chatbox .userText > span.wide-2 table:has(tr > *:nth-child(5)) {
    min-width: 60rem;
  }
  #chatbox .botText > span:has(.table-chart-container) table, #chatbox .botText > span:has(.table-chart-container) .table-chart-container > canvas,
  #chatbox .userText > span:has(.table-chart-container) table,
  #chatbox .userText > span:has(.table-chart-container) .table-chart-container > canvas {
    min-width: 40rem;
  }
  #chatbox .botText:not(.noflex),
  #chatbox .userText {
    margin-bottom: 2.5rem !important;
  }
  #predefinedInput {
    font-size: 1.3rem !important;
  }
  #predefinedInput .datePickerInput {
    font-size: 1.3rem !important;
  }
  #predefinedInput .predefinedTool,
  #predefinedInput .predefinedOption,
  #predefinedInput .predefinedField,
  #predefinedInput .predefinedTimeOption,
  #predefinedInput .datePickerContainer {
    padding: 0.5rem 1rem;
  }
  #predefinedInput .predefinedTimeOption {
    font-size: 0;
    /* hide original text */
    position: relative;
  }
  #predefinedInput .predefinedTimeOption::after {
    content: attr(data-mobile-label);
    font-size: 1.3rem;
    /* restore font size */
    white-space: nowrap;
  }
}
@media only screen and (aspect-ratio: 1/1) {
  /* square viewport styles for video recording */
  body[data-video-mode=true] #agentic-container {
    grid-template-rows: 12vh 88vh;
  }
  body[data-video-mode=true] #checkArchiveAgent,
  body[data-video-mode=true] #clearChatButton,
  body[data-video-mode=true] #predefinedProjectInsights,
  body[data-video-mode=true] .predefinedTool.stop,
  body[data-video-mode=true] .mobile-menu-icon {
    display: none !important;
  }
  body[data-video-mode=true] #agent-overview-list li {
    margin: 2rem 0 !important;
  }
  body[data-video-mode=true] #agent-overview-list li p,
  body[data-video-mode=true] #agent-overview-list li span,
  body[data-video-mode=true] #agent-overview-list li select {
    font-size: 3.5rem !important;
  }
  body[data-video-mode=true] #agent-overview-list #agentBreakDown .breakdownStages span img {
    width: 4rem;
    height: 4rem;
  }
  body[data-video-mode=true] .agents-overview:hover, body[data-video-mode=true] .agents-overview:focus-within {
    width: 50rem;
    padding: 4rem;
  }
  body[data-video-mode=true] #chatbox .userText > span {
    width: 68% !important;
    max-width: 68% !important;
  }
  body[data-video-mode=true] #chatbox .botText > span {
    width: 80% !important;
    max-width: 80% !important;
  }
  body[data-video-mode=true] #chatbox .botText,
  body[data-video-mode=true] #chatbox .userText {
    font-size: 3.5rem;
  }
  body[data-video-mode=true] #chatbox .botText .chat-author-icon,
  body[data-video-mode=true] #chatbox .userText .chat-author-icon {
    font-size: 3.5rem;
    width: 8rem;
    height: 8rem;
  }
  body[data-video-mode=true] #chatbox .botText > span,
  body[data-video-mode=true] #chatbox .userText > span {
    border-radius: 5rem;
    padding: 2.5rem 2.8rem;
  }
  body[data-video-mode=true] #chatbox .botText > span.wide table:has(tr > *:nth-child(3)),
  body[data-video-mode=true] #chatbox .botText > span.wide table.wide-table-content, body[data-video-mode=true] #chatbox .botText > span.wide-2 table:has(tr > *:nth-child(3)),
  body[data-video-mode=true] #chatbox .botText > span.wide-2 table.wide-table-content,
  body[data-video-mode=true] #chatbox .userText > span.wide table:has(tr > *:nth-child(3)),
  body[data-video-mode=true] #chatbox .userText > span.wide table.wide-table-content,
  body[data-video-mode=true] #chatbox .userText > span.wide-2 table:has(tr > *:nth-child(3)),
  body[data-video-mode=true] #chatbox .userText > span.wide-2 table.wide-table-content {
    min-width: 70rem !important;
  }
  body[data-video-mode=true] #chatbox .botText > span.wide table:has(tr > *:nth-child(3)) .small-col,
  body[data-video-mode=true] #chatbox .botText > span.wide table.wide-table-content .small-col, body[data-video-mode=true] #chatbox .botText > span.wide-2 table:has(tr > *:nth-child(3)) .small-col,
  body[data-video-mode=true] #chatbox .botText > span.wide-2 table.wide-table-content .small-col,
  body[data-video-mode=true] #chatbox .userText > span.wide table:has(tr > *:nth-child(3)) .small-col,
  body[data-video-mode=true] #chatbox .userText > span.wide table.wide-table-content .small-col,
  body[data-video-mode=true] #chatbox .userText > span.wide-2 table:has(tr > *:nth-child(3)) .small-col,
  body[data-video-mode=true] #chatbox .userText > span.wide-2 table.wide-table-content .small-col {
    width: 34%;
  }
  body[data-video-mode=true] #chatbox .botText > span.wide table:has(tr > *:nth-child(4)), body[data-video-mode=true] #chatbox .botText > span.wide-2 table:has(tr > *:nth-child(4)),
  body[data-video-mode=true] #chatbox .userText > span.wide table:has(tr > *:nth-child(4)),
  body[data-video-mode=true] #chatbox .userText > span.wide-2 table:has(tr > *:nth-child(4)) {
    min-width: 90rem !important;
  }
  body[data-video-mode=true] #chatbox .botText > span.wide table:has(tr > *:nth-child(5)), body[data-video-mode=true] #chatbox .botText > span.wide-2 table:has(tr > *:nth-child(5)),
  body[data-video-mode=true] #chatbox .userText > span.wide table:has(tr > *:nth-child(5)),
  body[data-video-mode=true] #chatbox .userText > span.wide-2 table:has(tr > *:nth-child(5)) {
    min-width: 110rem !important;
  }
  body[data-video-mode=true] #chatbox .botText > span:has(.table-chart-container) table, body[data-video-mode=true] #chatbox .botText > span:has(.table-chart-container) .table-chart-container > canvas,
  body[data-video-mode=true] #chatbox .userText > span:has(.table-chart-container) table,
  body[data-video-mode=true] #chatbox .userText > span:has(.table-chart-container) .table-chart-container > canvas {
    min-width: 70rem !important;
  }
  body[data-video-mode=true] #chatbox .botText-menu-container {
    height: 4rem !important;
    width: 30rem !important;
  }
  body[data-video-mode=true] #chatbox .botText-menu-container img {
    width: 4rem !important;
    height: 4rem !important;
  }
  body[data-video-mode=true] #chatbox .botText-menu-container:has(img:nth-of-type(2)) img:first-of-type {
    right: 4rem !important;
  }
  body[data-video-mode=true] #chatbox .botText-menu-container:has(img:nth-of-type(3)) img:nth-of-type(2) {
    right: 8rem !important;
  }
  body[data-video-mode=true] #chatbox .botText-menu-container .botText-menu-list.visible {
    font-size: 3rem !important;
  }
  body[data-video-mode=true] #chatbox.loading::after {
    width: 8rem;
    height: 8rem;
    margin: 5rem;
    margin-left: 12rem;
    /* Cut out the center to form a ring */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1rem), #000 calc(100% - 1rem));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1rem), #000 calc(100% - 1rem));
  }
  body[data-video-mode=true] #chatbox p.has-ts::before {
    display: none;
  }
  body[data-video-mode=true] #predefinedInput {
    font-size: 4rem !important;
  }
  body[data-video-mode=true] #predefinedInput .datePickerInput {
    font-size: 4rem !important;
  }
  body[data-video-mode=true] #predefinedInput .predefinedTool,
  body[data-video-mode=true] #predefinedInput .predefinedOption,
  body[data-video-mode=true] #predefinedInput .predefinedField,
  body[data-video-mode=true] #predefinedInput .predefinedTimeOption {
    padding: 1rem 2rem !important;
    margin-right: 2rem !important;
    margin-top: 2rem !important;
    border-radius: 2.5rem !important;
  }
  body[data-video-mode=true] #predefinedInput .predefinedTool.magicTool:not(.disabled):hover img {
    opacity: 1;
    transform: scale(2.2);
  }
  body[data-video-mode=true] #predefinedInput .predefinedTool.magicTool img {
    right: -0.6rem;
    top: 0.9rem;
  }
  body[data-video-mode=true] #predefinedInput #addMagicTool,
  body[data-video-mode=true] #predefinedInput #toggleExpandTools {
    padding: 0rem !important;
    width: 6rem;
    height: 6rem;
  }
  body[data-video-mode=true] #predefinedInput #addMagicTool > ul li label,
  body[data-video-mode=true] #predefinedInput #toggleExpandTools > ul li label {
    font-size: 4rem;
  }
  body[data-video-mode=true] #predefinedInput #addMagicTool img,
  body[data-video-mode=true] #predefinedInput #toggleExpandTools img {
    width: 4rem;
    height: 4rem;
    top: 1rem;
    left: 1rem;
  }
  body[data-video-mode=true] #predefinedInput .datePickerContainer {
    display: none;
  }
  body[data-video-mode=true] #predefinedInput .predefinedTimeOption::after {
    font-size: 4rem;
  }
  body[data-video-mode=true] .table-chart-container {
    height: 36rem !important;
    width: calc(100% + 5.6rem) !important;
    transform: translateX(-2.8rem);
  }
  body[data-video-mode=true] .table-chart-container .table-chart-container-sum > span {
    height: 6rem !important;
  }
  body[data-video-mode=true] .change-score-container {
    height: 5rem !important;
  }
  body[data-video-mode=true] .change-score-container .change-score-start-icon {
    height: 4rem;
    width: 5rem;
    left: 0;
    bottom: 0;
    font-size: 2rem;
    line-height: 4rem;
    border-bottom: 0.5rem solid #007FFF !important;
  }
  body[data-video-mode=true] .botText-table tr:has(td.left-headline) td {
    padding-top: 4rem;
  }
  body[data-video-mode=true] .botText-table .left-padding {
    padding-left: 1rem;
  }
  body[data-video-mode=true] .botText-table.in-table-chart tr {
    height: 10rem;
  }
  body[data-video-mode=true] .botText-table .table-sub-headline {
    font-size: 4rem !important;
  }
  body[data-video-mode=true] #drag-chart-container.show {
    width: 50vw !important;
    height: 50vw !important;
    right: 2vw !important;
  }
  body[data-video-mode=true] #addMagicTool ul {
    bottom: 8rem;
  }
  body[data-video-mode=true] #addMagicTool ul li {
    margin: 0.5rem 0;
  }
  body[data-video-mode=true] #addMagicTool ul li label {
    box-shadow: inset 0 0 0 0.5rem #6A2C55;
    padding: 1.5rem 2rem;
    border-radius: 2.5rem;
  }
}
@media only screen and (min-width: 1600px) and (min-aspect-ratio: 15/9) and (max-aspect-ratio: 17/9) {
  /* 16/9 view viewport styles for video recording */
  body[data-video-mode=true] #agentic-container {
    grid-template-rows: 11vh 82vh;
    grid-template-columns: [left-start] 1fr [left-end right-start] 25rem [right-end];
  }
  body[data-video-mode=true] .mobile-menu-icon {
    display: none !important;
  }
  body[data-video-mode=true] #agent-overview-list li {
    margin: 2rem 0 !important;
  }
  body[data-video-mode=true] #agent-overview-list li p,
  body[data-video-mode=true] #agent-overview-list li span,
  body[data-video-mode=true] #agent-overview-list li select {
    font-size: 2rem !important;
  }
  body[data-video-mode=true] #agent-overview-list #agentBreakDown .breakdownStages span img {
    width: 2.5rem;
    height: 2.5rem;
  }
  body[data-video-mode=true] #chatbox .userText > span {
    width: 68% !important;
    max-width: 68% !important;
  }
  body[data-video-mode=true] #chatbox .botText > span {
    width: 80% !important;
    max-width: 80% !important;
  }
  body[data-video-mode=true] #chatbox .botText,
  body[data-video-mode=true] #chatbox .userText {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  body[data-video-mode=true] #chatbox .botText .chat-author-icon,
  body[data-video-mode=true] #chatbox .userText .chat-author-icon {
    font-size: 2rem;
    width: 4rem;
    height: 4rem;
  }
  body[data-video-mode=true] #chatbox .botText > span,
  body[data-video-mode=true] #chatbox .userText > span {
    border-radius: 2.5rem;
    padding: 1.5rem 1.8rem;
  }
  body[data-video-mode=true] #chatbox .botText > span.wide table:has(tr > *:nth-child(3)),
  body[data-video-mode=true] #chatbox .botText > span.wide table.wide-table-content, body[data-video-mode=true] #chatbox .botText > span.wide-2 table:has(tr > *:nth-child(3)),
  body[data-video-mode=true] #chatbox .botText > span.wide-2 table.wide-table-content,
  body[data-video-mode=true] #chatbox .userText > span.wide table:has(tr > *:nth-child(3)),
  body[data-video-mode=true] #chatbox .userText > span.wide table.wide-table-content,
  body[data-video-mode=true] #chatbox .userText > span.wide-2 table:has(tr > *:nth-child(3)),
  body[data-video-mode=true] #chatbox .userText > span.wide-2 table.wide-table-content {
    min-width: 70rem !important;
  }
  body[data-video-mode=true] #chatbox .botText > span.wide table:has(tr > *:nth-child(3)) .small-col,
  body[data-video-mode=true] #chatbox .botText > span.wide table.wide-table-content .small-col, body[data-video-mode=true] #chatbox .botText > span.wide-2 table:has(tr > *:nth-child(3)) .small-col,
  body[data-video-mode=true] #chatbox .botText > span.wide-2 table.wide-table-content .small-col,
  body[data-video-mode=true] #chatbox .userText > span.wide table:has(tr > *:nth-child(3)) .small-col,
  body[data-video-mode=true] #chatbox .userText > span.wide table.wide-table-content .small-col,
  body[data-video-mode=true] #chatbox .userText > span.wide-2 table:has(tr > *:nth-child(3)) .small-col,
  body[data-video-mode=true] #chatbox .userText > span.wide-2 table.wide-table-content .small-col {
    width: 15rem;
  }
  body[data-video-mode=true] #chatbox .botText > span.wide table:has(tr > *:nth-child(4)), body[data-video-mode=true] #chatbox .botText > span.wide-2 table:has(tr > *:nth-child(4)),
  body[data-video-mode=true] #chatbox .userText > span.wide table:has(tr > *:nth-child(4)),
  body[data-video-mode=true] #chatbox .userText > span.wide-2 table:has(tr > *:nth-child(4)) {
    min-width: 50rem !important;
  }
  body[data-video-mode=true] #chatbox .botText > span.wide table:has(tr > *:nth-child(5)), body[data-video-mode=true] #chatbox .botText > span.wide-2 table:has(tr > *:nth-child(5)),
  body[data-video-mode=true] #chatbox .userText > span.wide table:has(tr > *:nth-child(5)),
  body[data-video-mode=true] #chatbox .userText > span.wide-2 table:has(tr > *:nth-child(5)) {
    min-width: 70rem !important;
  }
  body[data-video-mode=true] #chatbox .botText > span:has(.table-chart-container) table, body[data-video-mode=true] #chatbox .botText > span:has(.table-chart-container) .table-chart-container > canvas,
  body[data-video-mode=true] #chatbox .userText > span:has(.table-chart-container) table,
  body[data-video-mode=true] #chatbox .userText > span:has(.table-chart-container) .table-chart-container > canvas {
    min-width: 70rem !important;
  }
  body[data-video-mode=true] #chatbox .botText > span.fluent-text p,
  body[data-video-mode=true] #chatbox .userText > span.fluent-text p {
    font-size: 2rem;
  }
  body[data-video-mode=true] #chatbox .botText > span .pattern-group,
  body[data-video-mode=true] #chatbox .userText > span .pattern-group {
    margin-bottom: 2rem;
  }
  body[data-video-mode=true] #chatbox .botText > span .pattern-group .pattern-group-totals,
  body[data-video-mode=true] #chatbox .userText > span .pattern-group .pattern-group-totals {
    font-size: 1.8rem;
  }
  body[data-video-mode=true] #chatbox .botText > span .pattern-group .pattern-group-main,
  body[data-video-mode=true] #chatbox .userText > span .pattern-group .pattern-group-main {
    height: 25rem;
  }
  body[data-video-mode=true] #chatbox .botText > span .pattern-group .pattern-group-shapes .pattern-shape-badge .pattern-shape-title,
  body[data-video-mode=true] #chatbox .userText > span .pattern-group .pattern-group-shapes .pattern-shape-badge .pattern-shape-title {
    font-size: 1.8rem;
  }
  body[data-video-mode=true] #chatbox .botText > span .pattern-group .pattern-group-shapes .pattern-shape-badge .pattern-shape-confidence,
  body[data-video-mode=true] #chatbox .userText > span .pattern-group .pattern-group-shapes .pattern-shape-badge .pattern-shape-confidence {
    font-size: 1.5rem;
    margin-top: 0.3rem;
  }
  body[data-video-mode=true] #chatbox .botText-menu-container {
    height: 4rem !important;
    width: 20rem !important;
  }
  body[data-video-mode=true] #chatbox .botText-menu-container img {
    width: 4rem !important;
    height: 4rem !important;
  }
  body[data-video-mode=true] #chatbox .botText-menu-container:has(img:nth-of-type(2)) img:first-of-type {
    right: 4rem !important;
  }
  body[data-video-mode=true] #chatbox .botText-menu-container:has(img:nth-of-type(3)) img:nth-of-type(2) {
    right: 8rem !important;
  }
  body[data-video-mode=true] #chatbox .botText-menu-container .botText-menu-list.visible {
    font-size: 2rem !important;
  }
  body[data-video-mode=true] #chatbox.loading::after {
    width: 5rem;
    height: 5rem;
    margin: 3rem;
    margin-left: 8rem;
    /* Cut out the center to form a ring */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.5rem), #000 calc(100% - 0.5rem));
    mask: radial-gradient(farthest-side, transparent calc(100% - 0.5rem), #000 calc(100% - 0.5rem));
  }
  body[data-video-mode=true] #chatbox p.has-ts::before {
    display: none;
  }
  body[data-video-mode=true] #predefinedInput {
    font-size: 2rem !important;
  }
  body[data-video-mode=true] #predefinedInput .datePickerInput {
    font-size: 2rem !important;
  }
  body[data-video-mode=true] #predefinedInput .predefinedTool,
  body[data-video-mode=true] #predefinedInput .predefinedOption,
  body[data-video-mode=true] #predefinedInput .predefinedField,
  body[data-video-mode=true] #predefinedInput .predefinedTimeOption {
    margin-right: 1rem !important;
    margin-top: 1rem !important;
  }
  body[data-video-mode=true] #predefinedInput .predefinedTimeOption,
  body[data-video-mode=true] #predefinedInput .predefinedOption,
  body[data-video-mode=true] #predefinedInput .predefinedField {
    border-radius: 1.75rem !important;
    padding: 1rem 1.5rem;
  }
  body[data-video-mode=true] #predefinedInput .predefinedTool {
    border-radius: 2.75rem !important;
  }
  body[data-video-mode=true] #predefinedInput .predefinedTool {
    min-width: 5.5rem;
    max-width: 5.5rem;
    height: 5.5rem;
  }
  body[data-video-mode=true] #predefinedInput .predefinedTool.magicTool:not(.disabled):hover img {
    opacity: 1;
  }
  body[data-video-mode=true] #predefinedInput .predefinedTool.magicTool img {
    right: -0.6rem;
    top: -0.2rem;
  }
  body[data-video-mode=true] #predefinedInput .predefinedTool .toolIcon, body[data-video-mode=true] #predefinedInput .predefinedTool.toggleExpand > img {
    width: 3.5rem;
    height: 3.5rem;
  }
  body[data-video-mode=true] #predefinedInput .predefinedTool:hover {
    max-width: 40rem !important;
  }
  body[data-video-mode=true] #predefinedInput .predefinedTool.magicTool label {
    top: -1rem;
    right: -1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1.25rem;
  }
  body[data-video-mode=true] #predefinedInput .predefinedTool.magicTool label img {
    width: 1.8rem;
    height: 1.8rem;
    right: 0.35rem;
    top: 0.35rem;
  }
  body[data-video-mode=true] #predefinedInput:not(:has(.expandedMode)) ~ #userChatInput {
    margin-bottom: 2rem;
  }
  body[data-video-mode=true] #predefinedInput:not(:has(.expandedMode)) ~ #userChatInput textarea {
    font-size: 2rem;
    line-height: 2rem;
    min-height: 10rem;
    padding-top: 1.5rem;
  }
  body[data-video-mode=true] #predefinedInput #predefinedTools.expandedMode {
    padding-bottom: 1rem;
  }
  body[data-video-mode=true] #predefinedInput #predefinedTools.expandedMode .predefinedTool {
    max-width: 40rem !important;
  }
  body[data-video-mode=true] #predefinedInput #addMagicTool {
    padding: 0 !important;
    width: 5.5rem !important;
    height: 5.5rem !important;
  }
  body[data-video-mode=true] #predefinedInput #addMagicTool > ul li label {
    font-size: 2.2rem;
  }
  body[data-video-mode=true] #predefinedInput #addMagicTool img {
    width: 3.5rem;
    height: 3.5rem;
  }
  body[data-video-mode=true] #predefinedInput .datePickerContainer {
    display: none;
  }
  body[data-video-mode=true] #predefinedInput .predefinedTimeOption::after {
    font-size: 4rem;
  }
  body[data-video-mode=true] .table-chart-container {
    height: 22rem !important;
    width: calc(100% + 3.6rem) !important;
    transform: translateX(-1.8rem);
  }
  body[data-video-mode=true] .table-chart-container table tr {
    height: 20rem;
  }
  body[data-video-mode=true] .table-chart-container .table-chart-container-sum > span {
    height: 3.4rem !important;
  }
  body[data-video-mode=true] .botText-table .smaller-font {
    font-size: 1.8rem;
  }
  body[data-video-mode=true] .change-score-container {
    height: 5rem !important;
  }
  body[data-video-mode=true] .change-score-container .change-score-start-icon {
    height: 4rem;
    width: 5rem;
    left: 0;
    bottom: 0;
    font-size: 2rem;
    line-height: 4rem;
    border-bottom: 0.5rem solid #007FFF !important;
  }
  body[data-video-mode=true] .botText-table tr:has(td.left-headline) td {
    padding-top: 4rem;
  }
  body[data-video-mode=true] .botText-table .left-padding {
    padding-left: 1rem;
  }
  body[data-video-mode=true] .botText-table.in-table-chart tr {
    height: 10rem;
  }
  body[data-video-mode=true] .botText-table .table-sub-headline {
    font-size: 2.5rem !important;
  }
  body[data-video-mode=true] #drag-chart-container.show {
    width: 50vw !important;
    height: 50vw !important;
    right: 2vw !important;
  }
  body[data-video-mode=true] .report-download-btn {
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    border-radius: 1.5rem;
    font-size: 2rem;
  }
  body[data-video-mode=true] .report-download-icon {
    width: 3rem;
    height: 3rem;
  }
}
.apexcharts-tooltip {
  color: #333;
}

.content-container {
  display: grid;
  grid-template-rows: 5vh 93vh 2vh;
  grid-template-columns: [sidebar-start] 30rem [sidebar-end full-start] 1fr [center-start] minmax(min-content, 150rem) [center-end] 3fr [full-end];
  position: relative;
  overflow: hidden;
}
.content-container:has(.sidebar) {
  grid-template-rows: 3vh 95vh 2vh !important;
}
.content-container .content-header {
  padding: 0 2rem;
  grid-column: left-start/right-end;
  grid-row: 1/1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content-container .content-header h1 {
  display: flex;
}
.content-container .content-header h1 img {
  margin-right: 1rem;
}
.content-container .content {
  background-color: #221E26;
  color: #fff;
  grid-column: center-start/center-end;
  grid-row: 2/2;
  font-size: 1.5rem;
}
.content-container .content .flashes {
  list-style-type: none;
  position: relative;
}
.content-container .content .flashes li {
  display: block;
  text-align: center;
  color: #fff;
  transform-origin: top left;
  animation-name: flashAnimation;
  animation-duration: 10s;
  transform: scaleY(0);
  border-radius: 0.5rem;
  margin-bottom: 0.1rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.content-container .content .flashes li.success {
  background-color: #00C851;
}
.content-container .content .flashes li.error {
  background-color: #A8514A;
}
.content-container footer {
  color: #fff;
  padding: 0 2rem;
}
.content-container footer a {
  display: none;
}

@media only screen and (max-width: 2000px) {
  .content-container {
    grid-template-rows: 5vh 93vh 2vh;
  }
  .content-header h1 > span {
    font-size: 2.5rem !important;
  }
  .content-header img {
    width: 2.5rem !important;
  }
}
@media only screen and (max-width: 576px), only screen and (orientation: portrait) {
  .content-container {
    grid-template-columns: [sidebar-start] 2rem [sidebar-end full-start center-start] 0 [content-area] calc(100vw - 2rem) [center-end full-end];
    /* 🔑 CRITICAL */
    min-height: 100dvh;
    /* fallback */
    min-height: 100vh;
  }
  .content-container .sidebar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 2rem;
    z-index: 10;
    transition: width 0.3s ease;
    overflow: hidden;
    padding: 0;
  }
  .content-container .sidebar .mobile-menu-icon {
    display: block;
  }
  .content-container .sidebar .flexContainer {
    display: none;
  }
  .content-container .sidebar:hover, .content-container .sidebar.is-open-test {
    width: 30rem;
    padding: 1.7rem 1.5rem;
    overflow-y: auto;
  }
  .content-container .sidebar:hover .flexContainer, .content-container .sidebar.is-open-test .flexContainer {
    display: block;
  }
  .content-container .sidebar:hover .mobile-menu-icon, .content-container .sidebar.is-open-test .mobile-menu-icon {
    display: none;
  }
  .content-container .main-content {
    margin-left: 1rem;
  }
  .content-header h1 > span {
    font-size: 2rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 15rem;
  }
  .content-header img {
    width: 2rem !important;
  }
}
@media only screen and (aspect-ratio: 1/1) {
  /* square viewport styles for video recording */
  body[data-video-mode=true].content-container {
    grid-template-rows: 0vh 100vh 0vh;
  }
  body[data-video-mode=true] header,
  body[data-video-mode=true] footer {
    display: none !important;
  }
  body[data-video-mode=true] .sidebar {
    z-index: 1000 !important;
  }
  body[data-video-mode=true] .sidebar h3 {
    font-size: 4rem !important;
  }
  body[data-video-mode=true] .sidebar h3 img {
    width: 5rem !important;
    height: 5rem !important;
  }
  body[data-video-mode=true] .sidebar .sidebar-group-container {
    margin: 2rem 0rem !important;
  }
  body[data-video-mode=true] .sidebar .sidebar-group-container .folder-header-container {
    min-width: 100rem !important;
  }
  body[data-video-mode=true] .sidebar .sidebar-group-container .folder-header-container input {
    padding-left: 1.5rem !important;
  }
  body[data-video-mode=true] .sidebar .sidebar-group-container .folder-header-container .stacked-images {
    width: 4rem !important;
    height: 4rem !important;
  }
  body[data-video-mode=true] .sidebar .sidebar-group-container .folder-header-container .stacked-images img {
    width: 4rem !important;
    height: 4rem !important;
  }
  body[data-video-mode=true] .sidebar .sidebar-group-container .folder-header-container input {
    font-size: 3rem !important;
  }
  body[data-video-mode=true] .sidebar .sidebar-group-container .folder li::before {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  body[data-video-mode=true] .sidebar li a,
  body[data-video-mode=true] .sidebar li label {
    font-size: 3rem !important;
    padding: 1.25rem 4rem !important;
    border-radius: 2rem !important;
  }
  body[data-video-mode=true] .sidebar li:has(.add) {
    width: 16rem !important;
  }
  body[data-video-mode=true] .sidebar:hover, body[data-video-mode=true] .sidebar.is-open-test {
    width: 50rem !important;
    padding: 2.5rem 2rem !important;
  }
  body[data-video-mode=true] .sidebar label.add img {
    width: 3rem !important;
    height: 3rem !important;
  }
  body[data-video-mode=true] .content-header h1 > span {
    font-size: 6rem !important;
    max-width: 60rem;
  }
  body[data-video-mode=true] .content-header img {
    width: 6rem !important;
  }
  body[data-video-mode=true] .content-header .content-header-button-box img {
    width: 4rem !important;
  }
}
@media only screen and (min-width: 1600px) and (min-aspect-ratio: 15/9) and (max-aspect-ratio: 17/9) {
  /* 16/9 view viewport styles for video recording */
  body[data-video-mode=true].content-container {
    grid-template-rows: 5vh 95vh 0vh !important;
    grid-template-columns: [sidebar-start] 35rem [sidebar-end full-start] 1fr [center-start] minmax(min-content, 155rem) [center-end] 1fr [full-end];
  }
  body[data-video-mode=true] .header:has(#logout-button),
  body[data-video-mode=true] .header-container {
    height: 5vh !important;
  }
  body[data-video-mode=true] .header:has(#logout-button) .logo,
  body[data-video-mode=true] .header-container .logo {
    height: 5vh !important;
  }
  body[data-video-mode=true] .header:has(#logout-button) .userContainer,
  body[data-video-mode=true] .header-container .userContainer {
    font-size: 1.5rem !important;
  }
  body[data-video-mode=true] .header:has(#logout-button) .userContainer img,
  body[data-video-mode=true] .header-container .userContainer img {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }
  body[data-video-mode=true] footer {
    display: none !important;
  }
  body[data-video-mode=true] .sidebar {
    z-index: 1000 !important;
  }
  body[data-video-mode=true] .sidebar h3 {
    font-size: 2.5rem !important;
  }
  body[data-video-mode=true] .sidebar h3 img {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  body[data-video-mode=true] .sidebar .sidebar-group-container {
    margin: 2rem 0rem !important;
  }
  body[data-video-mode=true] .sidebar .sidebar-group-container .folder-header-container {
    min-width: 30rem !important;
  }
  body[data-video-mode=true] .sidebar .sidebar-group-container .folder-header-container input {
    padding-left: 1.5rem !important;
    width: 20rem !important;
  }
  body[data-video-mode=true] .sidebar .sidebar-group-container .folder-header-container .stacked-images {
    width: 2.3rem !important;
    height: 2.3rem !important;
  }
  body[data-video-mode=true] .sidebar .sidebar-group-container .folder-header-container .stacked-images img {
    width: 2.3rem !important;
    height: 2.3rem !important;
  }
  body[data-video-mode=true] .sidebar .sidebar-group-container .folder-header-container input {
    font-size: 1.8rem !important;
  }
  body[data-video-mode=true] .sidebar .sidebar-group-container .folder li::before {
    width: 2rem !important;
    height: 2rem !important;
  }
  body[data-video-mode=true] .sidebar li a,
  body[data-video-mode=true] .sidebar li label {
    font-size: 1.8rem !important;
    padding: 1rem 2rem !important;
    border-radius: 2rem !important;
  }
  body[data-video-mode=true] .sidebar li:has(.add) {
    width: 16rem !important;
  }
  body[data-video-mode=true] .sidebar label.add img {
    width: 2rem !important;
    height: 2rem !important;
  }
  body[data-video-mode=true] .content-header h1 > span {
    font-size: 3rem !important;
  }
  body[data-video-mode=true] .content-header img {
    width: 3rem !important;
  }
  body[data-video-mode=true] .content-header .content-header-button-box img {
    width: 3rem !important;
  }
}
#dashboard-container {
  display: grid;
  grid-template-rows: 7vh 88vh;
  grid-template-columns: [left-start] 1fr [right-end];
  padding: 0 1rem;
}
#dashboard-container .content-header {
  padding: 0 2rem;
  grid-column: left-start/right-end;
  grid-row: 1/1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#dashboard-container .content-header h1 {
  display: flex;
}
#dashboard-container .content-header h1 img {
  margin-right: 1rem;
}
#dashboard-container .content-header .content-header-button-box {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#dashboard-container .content-header img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#dashboard-container #dashboard-content-container {
  display: grid;
  grid-template-rows: 88vh;
  grid-template-columns: 6fr 1fr 3fr;
  gap: 2rem;
  padding: 0 2rem;
  overflow: auto;
}
#dashboard-container #dashboard-content-container #db-imports-container {
  grid-row: 1/1;
  grid-column: 1/1;
  display: flex;
  flex-direction: column;
}
#dashboard-container #dashboard-content-container #db-imports-container #db-imports-container-content {
  flex-grow: 1;
  overflow-y: auto;
}
#dashboard-container #dashboard-content-container #db-imports-container #db-imports-container-content .dashboard-imports-item {
  background-color: #221E26;
  border-radius: 3rem;
  padding: 2.5rem;
}
#dashboard-container #dashboard-content-container #db-imports-container #db-imports-container-content .dashboard-imports-item:not(:first-of-type) {
  margin-top: 2.5rem;
}
#dashboard-container #dashboard-content-container #db-imports-container #db-imports-container-content .dashboard-imports-item .dashboard-imports-item-dynamic {
  height: 40rem;
  display: flex;
  flex-direction: column;
}
#dashboard-container #dashboard-content-container #db-imports-container #db-imports-container-content .dashboard-imports-item .dashboard-imports-item-dynamic .dashboard-imports-chart-container {
  height: 25rem;
  flex-grow: 1;
}
#dashboard-container #dashboard-content-container #db-imports-container #db-imports-container-content .dashboard-imports-item .dashboard-imports-item-dynamic .dashboard-imports-highlights {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}
#dashboard-container #dashboard-content-container #db-imports-container #db-imports-container-content .dashboard-imports-item .dashboard-imports-item-dynamic .dashboard-imports-highlights div {
  width: 30%;
  padding: 2rem 0.2rem;
  border-radius: 3rem;
  background-color: #221E26;
}
#dashboard-container #dashboard-content-container #db-imports-container #db-imports-container-content .dashboard-imports-item .dashboard-imports-item-dynamic .dashboard-imports-highlights div p {
  text-align: center;
}
#dashboard-container #dashboard-content-container #db-imports-container #db-imports-container-content .dashboard-imports-item .dashboard-imports-item-dynamic .dashboard-imports-highlights div p:first-child {
  font-size: 2rem;
}
#dashboard-container #dashboard-content-container #db-projects-container {
  grid-row: 1/1;
  grid-column: 2/2;
}
#dashboard-container #dashboard-content-container #numbers-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
  grid-row: 1/1;
  grid-column: 3/3;
}
#dashboard-container #dashboard-content-container #numbers-container .number-box {
  flex-grow: 1;
  background-color: #221E26;
  color: #FBF7F4;
  display: flex;
  flex-direction: column;
  padding: 3rem 0.2rem;
  border-radius: 3rem;
}
#dashboard-container #dashboard-content-container #numbers-container .number-box .number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  font-size: 6rem;
  height: 6rem;
}
#dashboard-container #dashboard-content-container #numbers-container .number-box p {
  font-size: 2rem;
}

@media only screen and (max-width: 2000px) {
  #dashboard-container {
    grid-template-rows: 8vh 87vh;
  }
  #dashboard-content-container {
    grid-template-rows: 87vh !important;
  }
  .breakdownStages span {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 1700px) {
  #dashboard-container #dashboard-content-container > #numbers-container > .number-box {
    padding: 1em 0.2rem;
  }
}
@media only screen and (max-width: 576px), only screen and (orientation: portrait) {
  #dashboard-content-container {
    grid-template-rows: 20vh 62vh !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    row-gap: 2rem !important;
    /* vertical spacing */
    column-gap: 0 !important;
    /* no horizontal spacing */
    overflow-x: hidden !important;
  }
  #dashboard-content-container #db-imports-container {
    grid-row: 2/2 !important;
    grid-column: 1/1 !important;
    width: 100% !important;
  }
  #dashboard-content-container #db-imports-container .dashboard-imports-highlights {
    gap: 0.5rem;
  }
  #dashboard-content-container #db-imports-container .dashboard-imports-highlights div p {
    text-align: center;
  }
  #dashboard-content-container #db-imports-container .dashboard-imports-highlights div p:nth-child(2) {
    font-size: 1.2rem;
  }
  #dashboard-content-container #numbers-container {
    grid-row: 1/1 !important;
    grid-column: 1/1 !important;
    overflow-y: auto;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    /* 2 columns */
    grid-template-rows: repeat(2, 1fr) !important;
    /* 2 rows */
    width: 100% !important;
  }
  #dashboard-content-container #numbers-container .number-box {
    padding: 3rem 0.2rem;
  }
  #dashboard-content-container #numbers-container .number-box .number {
    font-size: 2.8rem !important;
    height: 2.8rem !important;
  }
  #dashboard-content-container #numbers-container .number-box p {
    font-size: 1.5rem !important;
  }
}
.footer {
  background-color: #FBF7F4;
  grid-column: sidebar-start/full-end;
  grid-row: 3/3;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1rem;
  font-size: 1.2rem;
  z-index: 1000;
}
.footer a {
  text-decoration: none;
  color: #221E26;
}
.footer a:hover {
  text-decoration: underline;
}

#add-csv-import-form-existing-columns:not(.loading) {
  gap: 1rem;
  min-height: 3.2rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
#add-csv-import-form-existing-columns:not(.loading) div {
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid #aaaaaa;
  white-space: nowrap;
}

#dropImportCSV,
.dropFile {
  border: 1px dashed #F2E9EE;
  border-radius: 3rem;
  margin: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#dropImportCSV:hover,
#dropImportCSV label,
.dropFile:hover,
.dropFile label {
  cursor: pointer;
}
#dropImportCSV input,
.dropFile input {
  display: none;
}
#dropImportCSV img,
.dropFile img {
  display: none;
}
#dropImportCSV.markzone,
.dropFile.markzone {
  background-color: #F2E9EE;
  border: 1px solid #F2E9EE;
}
#dropImportCSV.markzone span,
.dropFile.markzone span {
  display: none;
}
#dropImportCSV.markzone img,
.dropFile.markzone img {
  display: block;
  width: 4rem;
  height: 4rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#dropImportCSV.invisible,
.dropFile.invisible {
  display: none;
}

#dropImportCSV {
  margin-top: 3rem;
}
#dropImportCSV label {
  width: 100%;
  padding: 10rem;
  height: 4rem;
  line-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: #F2E9EE;
}
#dropImportCSV label img {
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
}

.api-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
}
.api-list .api-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 2.5rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2rem;
  background-color: rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
}
.api-list .api-pill .api-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.api-list .api-pill .api-left img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}
.api-list .api-pill .api-left span {
  font-size: 1.5rem;
  font-weight: 500;
}
.api-list .api-pill .connect-btn {
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 1rem;
  background-color: #221E26;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.api-list .api-pill .connect-btn:hover {
  background-color: #6A2C55;
}
.api-list .api-pill .contact-text {
  font-size: 1.5rem;
  color: #666;
  font-style: italic;
}
.api-list .api-pill:hover {
  border-color: #cfcfcf;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.05);
}

#droppedCSV,
#modifiedCSV {
  display: none;
}
#droppedCSV.visible,
#modifiedCSV.visible {
  display: block;
  width: 100%;
}
#droppedCSV tr:first-child,
#modifiedCSV tr:first-child {
  font-weight: bold;
}
#droppedCSV td:first-child > div,
#modifiedCSV td:first-child > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#droppedCSV td:first-child > div div:first-child,
#modifiedCSV td:first-child > div div:first-child {
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  border-radius: 1.5rem;
  line-height: 2.5rem;
  color: #fff;
  background-color: #221E26;
  flex-shrink: 0;
}
#droppedCSV td:first-child > div div:last-child,
#modifiedCSV td:first-child > div div:last-child {
  position: relative;
}
#droppedCSV td:first-child > div div:last-child > span,
#modifiedCSV td:first-child > div div:last-child > span {
  display: block;
  min-width: 0;
  max-width: 13rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.2rem;
  padding-left: 1rem;
  cursor: pointer;
}
#droppedCSV td:first-child > div div:last-child::after,
#modifiedCSV td:first-child > div div:last-child::after {
  content: attr(data-fulltext);
  width: max-content;
  white-space: nowrap;
  max-width: none;
  /* Use the full text stored in data-fulltext attribute */
  position: absolute;
  bottom: 100%;
  /* Position tooltip above the element */
  left: 1.5rem;
  transform: translateX(-1rem);
  background-color: #4F213F;
  color: #fff;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  pointer-events: none;
  /* Prevent tooltip from capturing pointer events */
  opacity: 0;
  /* Hide tooltip initially */
  transition: opacity 0.2s ease-in-out;
  z-index: 1000;
  margin-bottom: 0;
  top: 0;
  height: 2rem;
}
#droppedCSV td:first-child > div div:last-child:hover::after,
#modifiedCSV td:first-child > div div:last-child:hover::after {
  opacity: 1;
}
#droppedCSV th,
#droppedCSV td:not(:first-child),
#modifiedCSV th,
#modifiedCSV td:not(:first-child) {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.2rem;
  padding: 0.1rem;
  text-align: left;
  min-width: 14rem;
  max-width: 14rem;
}

#dataTypeDesc {
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.04);
  margin-left: 18rem;
  width: 40rem;
  border-radius: 1rem;
  font-weight: bold;
  font-size: 1.23rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}
#dataTypeDesc img {
  width: 3rem;
  height: 3rem;
  opacity: 0.9;
}

#droppedCSV {
  border-collapse: collapse;
  border-spacing: 0;
  padding-bottom: 1rem;
  padding-left: 1rem;
}
#droppedCSV td:nth-child(2) {
  overflow: hidden;
}
#droppedCSV td:nth-child(1),
#droppedCSV th:nth-child(1) {
  min-width: 16rem;
  max-width: 16rem;
}
#droppedCSV td:nth-child(2),
#droppedCSV th:nth-child(2) {
  min-width: 12rem;
  max-width: 12rem;
}
#droppedCSV td:nth-child(3),
#droppedCSV th:nth-child(3) {
  min-width: 18rem;
  max-width: 18rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  background-color: rgba(255, 255, 255, 0.04);
}
#droppedCSV th:nth-child(3) {
  text-align: center;
}
#droppedCSV td:nth-child(4),
#droppedCSV th:nth-child(4) {
  min-width: 28rem;
  max-width: 28rem;
  padding-left: 1rem;
}
#droppedCSV tr:first-of-type th {
  padding-top: 2rem;
}
#droppedCSV tr:last-of-type td:nth-child(3) {
  height: 1.5rem;
  border-radius: 0 0 1rem 1rem;
}

#modifiedCSV td:nth-child(1) {
  overflow: hidden;
  min-width: 25rem;
  max-width: 25rem;
}
#modifiedCSV td:nth-child(2) {
  min-width: 15rem;
  max-width: 15rem;
}
#modifiedCSV td:nth-child(3) {
  min-width: 32rem;
  max-width: 32rem;
}

#notification-add-projects-container,
#notification-modify-projects-container,
#notification-add-recipients-container,
#notification-modify-recipients-container {
  padding-left: 1rem;
}

.custom-select-row {
  display: flex;
  justify-content: space-between;
  background-color: #4F213F;
  padding: 0.5rem 1rem;
  padding-right: 0.5rem;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
}
.custom-select-row .custom-select-row-button-container {
  display: flex;
  align-items: center;
}
.custom-select-row .custom-select-row-button-container .custom-select-row-select-button,
.custom-select-row .custom-select-row-button-container .custom-select-row-deselect-button {
  padding: 0.2rem 0.75rem;
  border-radius: 0.5rem;
  background-color: rgba(0, 0, 0, 0.1);
}
.custom-select-row .custom-select-row-button-container .custom-select-row-select-button:hover,
.custom-select-row .custom-select-row-button-container .custom-select-row-deselect-button:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.2);
}
.custom-select-row ~ small {
  padding-left: 1rem;
  margin-bottom: 1rem;
  display: block;
}

#addProjectAssignImportsContainer,
#modifyProjectAssignImportsContainer {
  width: 100%;
  min-height: 6rem;
}
#addProjectAssignImportsContainer tr:first-child,
#modifyProjectAssignImportsContainer tr:first-child {
  font-weight: bold;
}
#addProjectAssignImportsContainer th,
#addProjectAssignImportsContainer td,
#modifyProjectAssignImportsContainer th,
#modifyProjectAssignImportsContainer td {
  min-width: 12rem;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.2rem;
  padding: 0.1rem;
  text-align: left;
}
#addProjectAssignImportsContainer .import-row > p,
#modifyProjectAssignImportsContainer .import-row > p {
  margin-top: 2rem;
  background-color: #4F213F;
  padding: 0.5rem 1rem;
  padding-right: 0.5rem;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#addProjectAssignImportsContainer .import-row > p .import-row-headline-container,
#addProjectAssignImportsContainer .import-row > p .import-row-headline-button-container,
#modifyProjectAssignImportsContainer .import-row > p .import-row-headline-container,
#modifyProjectAssignImportsContainer .import-row > p .import-row-headline-button-container {
  display: flex;
  align-items: center;
}
#addProjectAssignImportsContainer .import-row > p .import-row-headline-container,
#modifyProjectAssignImportsContainer .import-row > p .import-row-headline-container {
  color: #fff;
  font-weight: bold;
  gap: 1rem;
  cursor: pointer;
}
#addProjectAssignImportsContainer .import-row > p .import-row-headline-container .import-row-dropdown-icon,
#modifyProjectAssignImportsContainer .import-row > p .import-row-headline-container .import-row-dropdown-icon {
  width: 2rem;
  height: 2rem;
  transition: transform 0.2s ease;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#addProjectAssignImportsContainer .import-row > p .import-row-headline-container .import-row-dropdown-icon.open,
#modifyProjectAssignImportsContainer .import-row > p .import-row-headline-container .import-row-dropdown-icon.open {
  transform: rotate(90deg);
}
#addProjectAssignImportsContainer .import-row > p .import-row-headline-button-container,
#modifyProjectAssignImportsContainer .import-row > p .import-row-headline-button-container {
  font-size: 1.2rem;
  gap: 0.5rem;
}
#addProjectAssignImportsContainer .import-row > p .import-row-headline-button-container .import-row-select-button,
#addProjectAssignImportsContainer .import-row > p .import-row-headline-button-container .import-row-deselect-button,
#modifyProjectAssignImportsContainer .import-row > p .import-row-headline-button-container .import-row-select-button,
#modifyProjectAssignImportsContainer .import-row > p .import-row-headline-button-container .import-row-deselect-button {
  padding: 0.2rem 0.75rem;
  border-radius: 0.5rem;
  background-color: rgba(0, 0, 0, 0.1);
}
#addProjectAssignImportsContainer .import-row > p .import-row-headline-button-container .import-row-select-button:hover,
#addProjectAssignImportsContainer .import-row > p .import-row-headline-button-container .import-row-deselect-button:hover,
#modifyProjectAssignImportsContainer .import-row > p .import-row-headline-button-container .import-row-select-button:hover,
#modifyProjectAssignImportsContainer .import-row > p .import-row-headline-button-container .import-row-deselect-button:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.2);
}
#addProjectAssignImportsContainer .import-row > p .import-spec-header-highlight,
#modifyProjectAssignImportsContainer .import-row > p .import-spec-header-highlight {
  padding: 0.2rem 0.5rem;
  color: black;
  background-color: #A8514A;
  border-radius: 0.5rem;
  font-size: 80%;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
}
#addProjectAssignImportsContainer .import-row > p .import-spec-header-highlight img,
#modifyProjectAssignImportsContainer .import-row > p .import-spec-header-highlight img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(3%) saturate(5157%) hue-rotate(209deg) brightness(89%) contrast(78%);
}
#addProjectAssignImportsContainer .import-row > p .import-spec-header-highlight.secondary,
#modifyProjectAssignImportsContainer .import-row > p .import-spec-header-highlight.secondary {
  background-color: #2a2b28;
  color: #fff;
}
#addProjectAssignImportsContainer .checkbox-container,
#modifyProjectAssignImportsContainer .checkbox-container {
  padding-left: 0.5rem;
}
#addProjectAssignImportsContainer .itemHolder,
#modifyProjectAssignImportsContainer .itemHolder {
  display: flex;
  align-items: top;
}
#addProjectAssignImportsContainer .itemHolder > div,
#modifyProjectAssignImportsContainer .itemHolder > div {
  transform: translateY(0.4rem);
}
#addProjectAssignImportsContainer .itemHolder span,
#modifyProjectAssignImportsContainer .itemHolder span {
  border-radius: 0.5rem;
  padding: 0 0.5rem;
}
#addProjectAssignImportsContainer .itemHolder.group-11 > span,
#modifyProjectAssignImportsContainer .itemHolder.group-11 > span {
  background-color: rgba(218, 112, 214, 0.1);
}
#addProjectAssignImportsContainer .itemHolder.group-10 > span,
#modifyProjectAssignImportsContainer .itemHolder.group-10 > span {
  background-color: rgba(70, 130, 180, 0.1);
}
#addProjectAssignImportsContainer .itemHolder.group-9 > span,
#modifyProjectAssignImportsContainer .itemHolder.group-9 > span {
  background-color: rgba(240, 230, 140, 0.1);
}
#addProjectAssignImportsContainer .itemHolder.group-8 > span,
#modifyProjectAssignImportsContainer .itemHolder.group-8 > span {
  background-color: rgba(128, 0, 128, 0.1);
}
#addProjectAssignImportsContainer .itemHolder.group-7 > span,
#modifyProjectAssignImportsContainer .itemHolder.group-7 > span {
  background-color: rgba(50, 205, 50, 0.1);
}
#addProjectAssignImportsContainer .itemHolder.group-6 > span,
#modifyProjectAssignImportsContainer .itemHolder.group-6 > span {
  background-color: rgba(0, 191, 255, 0.1);
}
#addProjectAssignImportsContainer .itemHolder.group-5 > span,
#modifyProjectAssignImportsContainer .itemHolder.group-5 > span {
  background-color: rgba(255, 165, 0, 0.1);
}
#addProjectAssignImportsContainer .itemHolder.group-4 > span,
#modifyProjectAssignImportsContainer .itemHolder.group-4 > span {
  background-color: rgba(0, 127, 255, 0.1);
}
#addProjectAssignImportsContainer .itemHolder.group-3 > span,
#modifyProjectAssignImportsContainer .itemHolder.group-3 > span {
  background-color: rgba(255, 215, 0, 0.1);
}
#addProjectAssignImportsContainer .itemHolder.group-2 > span,
#modifyProjectAssignImportsContainer .itemHolder.group-2 > span {
  background-color: rgba(0, 230, 168, 0.1);
}
#addProjectAssignImportsContainer td:nth-child(1),
#modifyProjectAssignImportsContainer td:nth-child(1) {
  width: 25%;
}
#addProjectAssignImportsContainer td:nth-child(2),
#addProjectAssignImportsContainer td:nth-child(3),
#modifyProjectAssignImportsContainer td:nth-child(2),
#modifyProjectAssignImportsContainer td:nth-child(3) {
  width: 10%;
}

.small-button,
.small-icon-button,
.extra-small-button,
.extra-small-icon-button {
  color: #fff;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  transition: background-color 0.1s;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}
.small-button img,
.small-icon-button img,
.extra-small-button img,
.extra-small-icon-button img {
  width: 2rem;
}
.small-button.highlight-color-orange,
.small-icon-button.highlight-color-orange,
.extra-small-button.highlight-color-orange,
.extra-small-icon-button.highlight-color-orange {
  background-color: #A8514A;
  color: black;
}
.small-button:hover,
.small-icon-button:hover,
.extra-small-button:hover,
.extra-small-icon-button:hover {
  cursor: pointer;
  background: linear-gradient(135deg, #6A2C55, #8B5478) !important;
}
.small-button.revert-color:hover,
.small-icon-button.revert-color:hover,
.extra-small-button.revert-color:hover,
.extra-small-icon-button.revert-color:hover {
  background-color: black !important;
  color: #fff !important;
}
.small-button.secondary, .small-button.visible,
.small-icon-button.secondary,
.small-icon-button.visible,
.extra-small-button.secondary,
.extra-small-button.visible,
.extra-small-icon-button.secondary,
.extra-small-icon-button.visible {
  background-color: rgba(255, 255, 255, 0.08);
}

.small-button-on-white,
.small-icon-button-on-white {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.04);
}
.small-button-on-white.decent,
.small-icon-button-on-white.decent {
  background-color: rgba(0, 0, 0, 0);
}
.small-button-on-white img,
.small-icon-button-on-white img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
.small-button-on-white.smaller img,
.small-icon-button-on-white.smaller img {
  width: 1.5rem;
}
.small-button-on-white.disabled,
.small-icon-button-on-white.disabled {
  opacity: 0.5;
}
.small-button-on-white:not(.disabled):hover,
.small-icon-button-on-white:not(.disabled):hover {
  cursor: pointer;
  background-color: #3d3a4e;
  color: white;
}
.small-button-on-white:not(.disabled):hover img,
.small-icon-button-on-white:not(.disabled):hover img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}

.content-header-button-box {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.small-button,
.small-button-on-white {
  padding: 0.875rem 2rem;
  display: inline-block;
  border-radius: 1rem;
  font-size: 1.5rem;
  line-height: 1.5;
}

.small-icon-button,
.small-icon-button-on-white {
  padding: 1rem;
  display: flex;
  border-radius: 1000rem;
}

.extra-small-button {
  padding: 0.25rem 1rem;
  display: inline-block;
  border-radius: 1rem;
  font-size: 1.3rem;
  line-height: 1.5;
}

.extra-small-icon-button {
  padding: 0.5rem;
  display: flex;
  border-radius: 1000rem;
}
.extra-small-icon-button img {
  width: 1.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
.extra-small-icon-button.copied::before {
  content: "Copied";
  margin-right: 0.4rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.5rem;
}

.extra-small-button-box {
  display: flex;
  gap: 0.35rem;
}

.invisible-button {
  display: none;
}
.invisible-button.visible {
  display: inline-block;
}

.form-button {
  border: none;
  border-radius: 1rem;
  padding: 1.5rem;
  font-size: 1.5rem;
  background: linear-gradient(135deg, #6A2C55, #8B5478);
  color: #fff;
  text-align: center;
  transition: all 0.18s ease;
}
.form-button:hover {
  cursor: pointer;
}
.form-button.active-sec {
  background: rgba(255, 255, 255, 0.08);
}
.form-button.passive {
  background: rgba(255, 255, 255, 0.05) !important;
  color: grey !important;
}
.form-button.passive:hover {
  cursor: auto;
}

.delete-button-container {
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 2rem;
  padding-top: 8rem;
  gap: 1rem;
}
.delete-button-container .delete-button {
  background-color: #A8514A;
  color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.875rem 2rem;
  border-radius: 1rem;
  gap: 0.5rem;
  font-size: 1.5rem;
  line-height: 1.5;
}
.delete-button-container .delete-button.secondary {
  background-color: rgba(0, 0, 0, 0);
}
.delete-button-container .delete-button.secondary img {
  filter: none;
}
.delete-button-container .delete-button:hover {
  cursor: pointer;
}
.delete-button-container .delete-button img {
  height: 2rem;
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
.delete-button-container .small-button {
  background-color: #A8514A;
  color: #fff;
}

#submitArchiveCSVImport:hover {
  background-color: #88413C !important;
}

#setGoalOptimizationDirectionContainer.visible,
#modifySetGoalOptimizationDirectionContainer.visible,
#setGoalFormulasContainer.visible,
#modifySetGoalFormulasContainer.visible,
#set-revenue-formulas-container.visible,
#modify-set-revenue-formulas-container.visible,
#set-cost-formulas-container.visible,
#modify-set-cost-formulas-container.visible {
  display: block;
}
#setGoalOptimizationDirectionContainer p,
#modifySetGoalOptimizationDirectionContainer p,
#setGoalFormulasContainer p,
#modifySetGoalFormulasContainer p,
#set-revenue-formulas-container p,
#modify-set-revenue-formulas-container p,
#set-cost-formulas-container p,
#modify-set-cost-formulas-container p {
  text-align: left;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container,
#setGoalOptimizationDirectionContainer .numerical_columns_container,
#setGoalOptimizationDirectionContainer .math_symbols_container,
#setGoalOptimizationDirectionContainer .kpi_types_container,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container,
#setGoalFormulasContainer .optimization_direction_container,
#setGoalFormulasContainer .numerical_columns_container,
#setGoalFormulasContainer .math_symbols_container,
#setGoalFormulasContainer .kpi_types_container,
#modifySetGoalFormulasContainer .optimization_direction_container,
#modifySetGoalFormulasContainer .numerical_columns_container,
#modifySetGoalFormulasContainer .math_symbols_container,
#modifySetGoalFormulasContainer .kpi_types_container,
#set-revenue-formulas-container .optimization_direction_container,
#set-revenue-formulas-container .numerical_columns_container,
#set-revenue-formulas-container .math_symbols_container,
#set-revenue-formulas-container .kpi_types_container,
#modify-set-revenue-formulas-container .optimization_direction_container,
#modify-set-revenue-formulas-container .numerical_columns_container,
#modify-set-revenue-formulas-container .math_symbols_container,
#modify-set-revenue-formulas-container .kpi_types_container,
#set-cost-formulas-container .optimization_direction_container,
#set-cost-formulas-container .numerical_columns_container,
#set-cost-formulas-container .math_symbols_container,
#set-cost-formulas-container .kpi_types_container,
#modify-set-cost-formulas-container .optimization_direction_container,
#modify-set-cost-formulas-container .numerical_columns_container,
#modify-set-cost-formulas-container .math_symbols_container,
#modify-set-cost-formulas-container .kpi_types_container {
  display: flex;
  justify-items: left;
  align-items: center;
  flex-wrap: wrap;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container.invisible,
#setGoalOptimizationDirectionContainer .numerical_columns_container.invisible,
#setGoalOptimizationDirectionContainer .math_symbols_container.invisible,
#setGoalOptimizationDirectionContainer .kpi_types_container.invisible,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container.invisible,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container.invisible,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container.invisible,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container.invisible,
#setGoalFormulasContainer .optimization_direction_container.invisible,
#setGoalFormulasContainer .numerical_columns_container.invisible,
#setGoalFormulasContainer .math_symbols_container.invisible,
#setGoalFormulasContainer .kpi_types_container.invisible,
#modifySetGoalFormulasContainer .optimization_direction_container.invisible,
#modifySetGoalFormulasContainer .numerical_columns_container.invisible,
#modifySetGoalFormulasContainer .math_symbols_container.invisible,
#modifySetGoalFormulasContainer .kpi_types_container.invisible,
#set-revenue-formulas-container .optimization_direction_container.invisible,
#set-revenue-formulas-container .numerical_columns_container.invisible,
#set-revenue-formulas-container .math_symbols_container.invisible,
#set-revenue-formulas-container .kpi_types_container.invisible,
#modify-set-revenue-formulas-container .optimization_direction_container.invisible,
#modify-set-revenue-formulas-container .numerical_columns_container.invisible,
#modify-set-revenue-formulas-container .math_symbols_container.invisible,
#modify-set-revenue-formulas-container .kpi_types_container.invisible,
#set-cost-formulas-container .optimization_direction_container.invisible,
#set-cost-formulas-container .numerical_columns_container.invisible,
#set-cost-formulas-container .math_symbols_container.invisible,
#set-cost-formulas-container .kpi_types_container.invisible,
#modify-set-cost-formulas-container .optimization_direction_container.invisible,
#modify-set-cost-formulas-container .numerical_columns_container.invisible,
#modify-set-cost-formulas-container .math_symbols_container.invisible,
#modify-set-cost-formulas-container .kpi_types_container.invisible {
  display: none;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container .optimization_direction_item,
#setGoalOptimizationDirectionContainer .optimization_direction_container .numerical_column_item,
#setGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper,
#setGoalOptimizationDirectionContainer .optimization_direction_container .math_item,
#setGoalOptimizationDirectionContainer .optimization_direction_container .KPI_item,
#setGoalOptimizationDirectionContainer .numerical_columns_container .optimization_direction_item,
#setGoalOptimizationDirectionContainer .numerical_columns_container .numerical_column_item,
#setGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper,
#setGoalOptimizationDirectionContainer .numerical_columns_container .math_item,
#setGoalOptimizationDirectionContainer .numerical_columns_container .KPI_item,
#setGoalOptimizationDirectionContainer .math_symbols_container .optimization_direction_item,
#setGoalOptimizationDirectionContainer .math_symbols_container .numerical_column_item,
#setGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper,
#setGoalOptimizationDirectionContainer .math_symbols_container .math_item,
#setGoalOptimizationDirectionContainer .math_symbols_container .KPI_item,
#setGoalOptimizationDirectionContainer .kpi_types_container .optimization_direction_item,
#setGoalOptimizationDirectionContainer .kpi_types_container .numerical_column_item,
#setGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper,
#setGoalOptimizationDirectionContainer .kpi_types_container .math_item,
#setGoalOptimizationDirectionContainer .kpi_types_container .KPI_item,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .optimization_direction_item,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .numerical_column_item,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .math_item,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .KPI_item,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .optimization_direction_item,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .numerical_column_item,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .math_item,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .KPI_item,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .optimization_direction_item,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .numerical_column_item,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .math_item,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .KPI_item,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .optimization_direction_item,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .numerical_column_item,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .math_item,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .KPI_item,
#setGoalFormulasContainer .optimization_direction_container .optimization_direction_item,
#setGoalFormulasContainer .optimization_direction_container .numerical_column_item,
#setGoalFormulasContainer .optimization_direction_container .numericalInputWrapper,
#setGoalFormulasContainer .optimization_direction_container .math_item,
#setGoalFormulasContainer .optimization_direction_container .KPI_item,
#setGoalFormulasContainer .numerical_columns_container .optimization_direction_item,
#setGoalFormulasContainer .numerical_columns_container .numerical_column_item,
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper,
#setGoalFormulasContainer .numerical_columns_container .math_item,
#setGoalFormulasContainer .numerical_columns_container .KPI_item,
#setGoalFormulasContainer .math_symbols_container .optimization_direction_item,
#setGoalFormulasContainer .math_symbols_container .numerical_column_item,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper,
#setGoalFormulasContainer .math_symbols_container .math_item,
#setGoalFormulasContainer .math_symbols_container .KPI_item,
#setGoalFormulasContainer .kpi_types_container .optimization_direction_item,
#setGoalFormulasContainer .kpi_types_container .numerical_column_item,
#setGoalFormulasContainer .kpi_types_container .numericalInputWrapper,
#setGoalFormulasContainer .kpi_types_container .math_item,
#setGoalFormulasContainer .kpi_types_container .KPI_item,
#modifySetGoalFormulasContainer .optimization_direction_container .optimization_direction_item,
#modifySetGoalFormulasContainer .optimization_direction_container .numerical_column_item,
#modifySetGoalFormulasContainer .optimization_direction_container .numericalInputWrapper,
#modifySetGoalFormulasContainer .optimization_direction_container .math_item,
#modifySetGoalFormulasContainer .optimization_direction_container .KPI_item,
#modifySetGoalFormulasContainer .numerical_columns_container .optimization_direction_item,
#modifySetGoalFormulasContainer .numerical_columns_container .numerical_column_item,
#modifySetGoalFormulasContainer .numerical_columns_container .numericalInputWrapper,
#modifySetGoalFormulasContainer .numerical_columns_container .math_item,
#modifySetGoalFormulasContainer .numerical_columns_container .KPI_item,
#modifySetGoalFormulasContainer .math_symbols_container .optimization_direction_item,
#modifySetGoalFormulasContainer .math_symbols_container .numerical_column_item,
#modifySetGoalFormulasContainer .math_symbols_container .numericalInputWrapper,
#modifySetGoalFormulasContainer .math_symbols_container .math_item,
#modifySetGoalFormulasContainer .math_symbols_container .KPI_item,
#modifySetGoalFormulasContainer .kpi_types_container .optimization_direction_item,
#modifySetGoalFormulasContainer .kpi_types_container .numerical_column_item,
#modifySetGoalFormulasContainer .kpi_types_container .numericalInputWrapper,
#modifySetGoalFormulasContainer .kpi_types_container .math_item,
#modifySetGoalFormulasContainer .kpi_types_container .KPI_item,
#set-revenue-formulas-container .optimization_direction_container .optimization_direction_item,
#set-revenue-formulas-container .optimization_direction_container .numerical_column_item,
#set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper,
#set-revenue-formulas-container .optimization_direction_container .math_item,
#set-revenue-formulas-container .optimization_direction_container .KPI_item,
#set-revenue-formulas-container .numerical_columns_container .optimization_direction_item,
#set-revenue-formulas-container .numerical_columns_container .numerical_column_item,
#set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper,
#set-revenue-formulas-container .numerical_columns_container .math_item,
#set-revenue-formulas-container .numerical_columns_container .KPI_item,
#set-revenue-formulas-container .math_symbols_container .optimization_direction_item,
#set-revenue-formulas-container .math_symbols_container .numerical_column_item,
#set-revenue-formulas-container .math_symbols_container .numericalInputWrapper,
#set-revenue-formulas-container .math_symbols_container .math_item,
#set-revenue-formulas-container .math_symbols_container .KPI_item,
#set-revenue-formulas-container .kpi_types_container .optimization_direction_item,
#set-revenue-formulas-container .kpi_types_container .numerical_column_item,
#set-revenue-formulas-container .kpi_types_container .numericalInputWrapper,
#set-revenue-formulas-container .kpi_types_container .math_item,
#set-revenue-formulas-container .kpi_types_container .KPI_item,
#modify-set-revenue-formulas-container .optimization_direction_container .optimization_direction_item,
#modify-set-revenue-formulas-container .optimization_direction_container .numerical_column_item,
#modify-set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper,
#modify-set-revenue-formulas-container .optimization_direction_container .math_item,
#modify-set-revenue-formulas-container .optimization_direction_container .KPI_item,
#modify-set-revenue-formulas-container .numerical_columns_container .optimization_direction_item,
#modify-set-revenue-formulas-container .numerical_columns_container .numerical_column_item,
#modify-set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper,
#modify-set-revenue-formulas-container .numerical_columns_container .math_item,
#modify-set-revenue-formulas-container .numerical_columns_container .KPI_item,
#modify-set-revenue-formulas-container .math_symbols_container .optimization_direction_item,
#modify-set-revenue-formulas-container .math_symbols_container .numerical_column_item,
#modify-set-revenue-formulas-container .math_symbols_container .numericalInputWrapper,
#modify-set-revenue-formulas-container .math_symbols_container .math_item,
#modify-set-revenue-formulas-container .math_symbols_container .KPI_item,
#modify-set-revenue-formulas-container .kpi_types_container .optimization_direction_item,
#modify-set-revenue-formulas-container .kpi_types_container .numerical_column_item,
#modify-set-revenue-formulas-container .kpi_types_container .numericalInputWrapper,
#modify-set-revenue-formulas-container .kpi_types_container .math_item,
#modify-set-revenue-formulas-container .kpi_types_container .KPI_item,
#set-cost-formulas-container .optimization_direction_container .optimization_direction_item,
#set-cost-formulas-container .optimization_direction_container .numerical_column_item,
#set-cost-formulas-container .optimization_direction_container .numericalInputWrapper,
#set-cost-formulas-container .optimization_direction_container .math_item,
#set-cost-formulas-container .optimization_direction_container .KPI_item,
#set-cost-formulas-container .numerical_columns_container .optimization_direction_item,
#set-cost-formulas-container .numerical_columns_container .numerical_column_item,
#set-cost-formulas-container .numerical_columns_container .numericalInputWrapper,
#set-cost-formulas-container .numerical_columns_container .math_item,
#set-cost-formulas-container .numerical_columns_container .KPI_item,
#set-cost-formulas-container .math_symbols_container .optimization_direction_item,
#set-cost-formulas-container .math_symbols_container .numerical_column_item,
#set-cost-formulas-container .math_symbols_container .numericalInputWrapper,
#set-cost-formulas-container .math_symbols_container .math_item,
#set-cost-formulas-container .math_symbols_container .KPI_item,
#set-cost-formulas-container .kpi_types_container .optimization_direction_item,
#set-cost-formulas-container .kpi_types_container .numerical_column_item,
#set-cost-formulas-container .kpi_types_container .numericalInputWrapper,
#set-cost-formulas-container .kpi_types_container .math_item,
#set-cost-formulas-container .kpi_types_container .KPI_item,
#modify-set-cost-formulas-container .optimization_direction_container .optimization_direction_item,
#modify-set-cost-formulas-container .optimization_direction_container .numerical_column_item,
#modify-set-cost-formulas-container .optimization_direction_container .numericalInputWrapper,
#modify-set-cost-formulas-container .optimization_direction_container .math_item,
#modify-set-cost-formulas-container .optimization_direction_container .KPI_item,
#modify-set-cost-formulas-container .numerical_columns_container .optimization_direction_item,
#modify-set-cost-formulas-container .numerical_columns_container .numerical_column_item,
#modify-set-cost-formulas-container .numerical_columns_container .numericalInputWrapper,
#modify-set-cost-formulas-container .numerical_columns_container .math_item,
#modify-set-cost-formulas-container .numerical_columns_container .KPI_item,
#modify-set-cost-formulas-container .math_symbols_container .optimization_direction_item,
#modify-set-cost-formulas-container .math_symbols_container .numerical_column_item,
#modify-set-cost-formulas-container .math_symbols_container .numericalInputWrapper,
#modify-set-cost-formulas-container .math_symbols_container .math_item,
#modify-set-cost-formulas-container .math_symbols_container .KPI_item,
#modify-set-cost-formulas-container .kpi_types_container .optimization_direction_item,
#modify-set-cost-formulas-container .kpi_types_container .numerical_column_item,
#modify-set-cost-formulas-container .kpi_types_container .numericalInputWrapper,
#modify-set-cost-formulas-container .kpi_types_container .math_item,
#modify-set-cost-formulas-container .kpi_types_container .KPI_item {
  background: linear-gradient(135deg, #6A2C55, #8B5478);
  color: #fff;
  padding: 0.5rem 1rem;
  margin: 0.25rem;
  border-radius: 1rem;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container .optimization_direction_item:hover,
#setGoalOptimizationDirectionContainer .optimization_direction_container .numerical_column_item:hover,
#setGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper:hover,
#setGoalOptimizationDirectionContainer .optimization_direction_container .math_item:hover,
#setGoalOptimizationDirectionContainer .optimization_direction_container .KPI_item:hover,
#setGoalOptimizationDirectionContainer .numerical_columns_container .optimization_direction_item:hover,
#setGoalOptimizationDirectionContainer .numerical_columns_container .numerical_column_item:hover,
#setGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper:hover,
#setGoalOptimizationDirectionContainer .numerical_columns_container .math_item:hover,
#setGoalOptimizationDirectionContainer .numerical_columns_container .KPI_item:hover,
#setGoalOptimizationDirectionContainer .math_symbols_container .optimization_direction_item:hover,
#setGoalOptimizationDirectionContainer .math_symbols_container .numerical_column_item:hover,
#setGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper:hover,
#setGoalOptimizationDirectionContainer .math_symbols_container .math_item:hover,
#setGoalOptimizationDirectionContainer .math_symbols_container .KPI_item:hover,
#setGoalOptimizationDirectionContainer .kpi_types_container .optimization_direction_item:hover,
#setGoalOptimizationDirectionContainer .kpi_types_container .numerical_column_item:hover,
#setGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper:hover,
#setGoalOptimizationDirectionContainer .kpi_types_container .math_item:hover,
#setGoalOptimizationDirectionContainer .kpi_types_container .KPI_item:hover,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .optimization_direction_item:hover,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .numerical_column_item:hover,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper:hover,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .math_item:hover,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .KPI_item:hover,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .optimization_direction_item:hover,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .numerical_column_item:hover,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper:hover,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .math_item:hover,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .KPI_item:hover,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .optimization_direction_item:hover,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .numerical_column_item:hover,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper:hover,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .math_item:hover,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .KPI_item:hover,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .optimization_direction_item:hover,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .numerical_column_item:hover,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper:hover,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .math_item:hover,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .KPI_item:hover,
#setGoalFormulasContainer .optimization_direction_container .optimization_direction_item:hover,
#setGoalFormulasContainer .optimization_direction_container .numerical_column_item:hover,
#setGoalFormulasContainer .optimization_direction_container .numericalInputWrapper:hover,
#setGoalFormulasContainer .optimization_direction_container .math_item:hover,
#setGoalFormulasContainer .optimization_direction_container .KPI_item:hover,
#setGoalFormulasContainer .numerical_columns_container .optimization_direction_item:hover,
#setGoalFormulasContainer .numerical_columns_container .numerical_column_item:hover,
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper:hover,
#setGoalFormulasContainer .numerical_columns_container .math_item:hover,
#setGoalFormulasContainer .numerical_columns_container .KPI_item:hover,
#setGoalFormulasContainer .math_symbols_container .optimization_direction_item:hover,
#setGoalFormulasContainer .math_symbols_container .numerical_column_item:hover,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper:hover,
#setGoalFormulasContainer .math_symbols_container .math_item:hover,
#setGoalFormulasContainer .math_symbols_container .KPI_item:hover,
#setGoalFormulasContainer .kpi_types_container .optimization_direction_item:hover,
#setGoalFormulasContainer .kpi_types_container .numerical_column_item:hover,
#setGoalFormulasContainer .kpi_types_container .numericalInputWrapper:hover,
#setGoalFormulasContainer .kpi_types_container .math_item:hover,
#setGoalFormulasContainer .kpi_types_container .KPI_item:hover,
#modifySetGoalFormulasContainer .optimization_direction_container .optimization_direction_item:hover,
#modifySetGoalFormulasContainer .optimization_direction_container .numerical_column_item:hover,
#modifySetGoalFormulasContainer .optimization_direction_container .numericalInputWrapper:hover,
#modifySetGoalFormulasContainer .optimization_direction_container .math_item:hover,
#modifySetGoalFormulasContainer .optimization_direction_container .KPI_item:hover,
#modifySetGoalFormulasContainer .numerical_columns_container .optimization_direction_item:hover,
#modifySetGoalFormulasContainer .numerical_columns_container .numerical_column_item:hover,
#modifySetGoalFormulasContainer .numerical_columns_container .numericalInputWrapper:hover,
#modifySetGoalFormulasContainer .numerical_columns_container .math_item:hover,
#modifySetGoalFormulasContainer .numerical_columns_container .KPI_item:hover,
#modifySetGoalFormulasContainer .math_symbols_container .optimization_direction_item:hover,
#modifySetGoalFormulasContainer .math_symbols_container .numerical_column_item:hover,
#modifySetGoalFormulasContainer .math_symbols_container .numericalInputWrapper:hover,
#modifySetGoalFormulasContainer .math_symbols_container .math_item:hover,
#modifySetGoalFormulasContainer .math_symbols_container .KPI_item:hover,
#modifySetGoalFormulasContainer .kpi_types_container .optimization_direction_item:hover,
#modifySetGoalFormulasContainer .kpi_types_container .numerical_column_item:hover,
#modifySetGoalFormulasContainer .kpi_types_container .numericalInputWrapper:hover,
#modifySetGoalFormulasContainer .kpi_types_container .math_item:hover,
#modifySetGoalFormulasContainer .kpi_types_container .KPI_item:hover,
#set-revenue-formulas-container .optimization_direction_container .optimization_direction_item:hover,
#set-revenue-formulas-container .optimization_direction_container .numerical_column_item:hover,
#set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper:hover,
#set-revenue-formulas-container .optimization_direction_container .math_item:hover,
#set-revenue-formulas-container .optimization_direction_container .KPI_item:hover,
#set-revenue-formulas-container .numerical_columns_container .optimization_direction_item:hover,
#set-revenue-formulas-container .numerical_columns_container .numerical_column_item:hover,
#set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper:hover,
#set-revenue-formulas-container .numerical_columns_container .math_item:hover,
#set-revenue-formulas-container .numerical_columns_container .KPI_item:hover,
#set-revenue-formulas-container .math_symbols_container .optimization_direction_item:hover,
#set-revenue-formulas-container .math_symbols_container .numerical_column_item:hover,
#set-revenue-formulas-container .math_symbols_container .numericalInputWrapper:hover,
#set-revenue-formulas-container .math_symbols_container .math_item:hover,
#set-revenue-formulas-container .math_symbols_container .KPI_item:hover,
#set-revenue-formulas-container .kpi_types_container .optimization_direction_item:hover,
#set-revenue-formulas-container .kpi_types_container .numerical_column_item:hover,
#set-revenue-formulas-container .kpi_types_container .numericalInputWrapper:hover,
#set-revenue-formulas-container .kpi_types_container .math_item:hover,
#set-revenue-formulas-container .kpi_types_container .KPI_item:hover,
#modify-set-revenue-formulas-container .optimization_direction_container .optimization_direction_item:hover,
#modify-set-revenue-formulas-container .optimization_direction_container .numerical_column_item:hover,
#modify-set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper:hover,
#modify-set-revenue-formulas-container .optimization_direction_container .math_item:hover,
#modify-set-revenue-formulas-container .optimization_direction_container .KPI_item:hover,
#modify-set-revenue-formulas-container .numerical_columns_container .optimization_direction_item:hover,
#modify-set-revenue-formulas-container .numerical_columns_container .numerical_column_item:hover,
#modify-set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper:hover,
#modify-set-revenue-formulas-container .numerical_columns_container .math_item:hover,
#modify-set-revenue-formulas-container .numerical_columns_container .KPI_item:hover,
#modify-set-revenue-formulas-container .math_symbols_container .optimization_direction_item:hover,
#modify-set-revenue-formulas-container .math_symbols_container .numerical_column_item:hover,
#modify-set-revenue-formulas-container .math_symbols_container .numericalInputWrapper:hover,
#modify-set-revenue-formulas-container .math_symbols_container .math_item:hover,
#modify-set-revenue-formulas-container .math_symbols_container .KPI_item:hover,
#modify-set-revenue-formulas-container .kpi_types_container .optimization_direction_item:hover,
#modify-set-revenue-formulas-container .kpi_types_container .numerical_column_item:hover,
#modify-set-revenue-formulas-container .kpi_types_container .numericalInputWrapper:hover,
#modify-set-revenue-formulas-container .kpi_types_container .math_item:hover,
#modify-set-revenue-formulas-container .kpi_types_container .KPI_item:hover,
#set-cost-formulas-container .optimization_direction_container .optimization_direction_item:hover,
#set-cost-formulas-container .optimization_direction_container .numerical_column_item:hover,
#set-cost-formulas-container .optimization_direction_container .numericalInputWrapper:hover,
#set-cost-formulas-container .optimization_direction_container .math_item:hover,
#set-cost-formulas-container .optimization_direction_container .KPI_item:hover,
#set-cost-formulas-container .numerical_columns_container .optimization_direction_item:hover,
#set-cost-formulas-container .numerical_columns_container .numerical_column_item:hover,
#set-cost-formulas-container .numerical_columns_container .numericalInputWrapper:hover,
#set-cost-formulas-container .numerical_columns_container .math_item:hover,
#set-cost-formulas-container .numerical_columns_container .KPI_item:hover,
#set-cost-formulas-container .math_symbols_container .optimization_direction_item:hover,
#set-cost-formulas-container .math_symbols_container .numerical_column_item:hover,
#set-cost-formulas-container .math_symbols_container .numericalInputWrapper:hover,
#set-cost-formulas-container .math_symbols_container .math_item:hover,
#set-cost-formulas-container .math_symbols_container .KPI_item:hover,
#set-cost-formulas-container .kpi_types_container .optimization_direction_item:hover,
#set-cost-formulas-container .kpi_types_container .numerical_column_item:hover,
#set-cost-formulas-container .kpi_types_container .numericalInputWrapper:hover,
#set-cost-formulas-container .kpi_types_container .math_item:hover,
#set-cost-formulas-container .kpi_types_container .KPI_item:hover,
#modify-set-cost-formulas-container .optimization_direction_container .optimization_direction_item:hover,
#modify-set-cost-formulas-container .optimization_direction_container .numerical_column_item:hover,
#modify-set-cost-formulas-container .optimization_direction_container .numericalInputWrapper:hover,
#modify-set-cost-formulas-container .optimization_direction_container .math_item:hover,
#modify-set-cost-formulas-container .optimization_direction_container .KPI_item:hover,
#modify-set-cost-formulas-container .numerical_columns_container .optimization_direction_item:hover,
#modify-set-cost-formulas-container .numerical_columns_container .numerical_column_item:hover,
#modify-set-cost-formulas-container .numerical_columns_container .numericalInputWrapper:hover,
#modify-set-cost-formulas-container .numerical_columns_container .math_item:hover,
#modify-set-cost-formulas-container .numerical_columns_container .KPI_item:hover,
#modify-set-cost-formulas-container .math_symbols_container .optimization_direction_item:hover,
#modify-set-cost-formulas-container .math_symbols_container .numerical_column_item:hover,
#modify-set-cost-formulas-container .math_symbols_container .numericalInputWrapper:hover,
#modify-set-cost-formulas-container .math_symbols_container .math_item:hover,
#modify-set-cost-formulas-container .math_symbols_container .KPI_item:hover,
#modify-set-cost-formulas-container .kpi_types_container .optimization_direction_item:hover,
#modify-set-cost-formulas-container .kpi_types_container .numerical_column_item:hover,
#modify-set-cost-formulas-container .kpi_types_container .numericalInputWrapper:hover,
#modify-set-cost-formulas-container .kpi_types_container .math_item:hover,
#modify-set-cost-formulas-container .kpi_types_container .KPI_item:hover {
  cursor: pointer;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container .math_item,
#setGoalOptimizationDirectionContainer .numerical_columns_container .math_item,
#setGoalOptimizationDirectionContainer .math_symbols_container .math_item,
#setGoalOptimizationDirectionContainer .kpi_types_container .math_item,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .math_item,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .math_item,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .math_item,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .math_item,
#setGoalFormulasContainer .optimization_direction_container .math_item,
#setGoalFormulasContainer .numerical_columns_container .math_item,
#setGoalFormulasContainer .math_symbols_container .math_item,
#setGoalFormulasContainer .kpi_types_container .math_item,
#modifySetGoalFormulasContainer .optimization_direction_container .math_item,
#modifySetGoalFormulasContainer .numerical_columns_container .math_item,
#modifySetGoalFormulasContainer .math_symbols_container .math_item,
#modifySetGoalFormulasContainer .kpi_types_container .math_item,
#set-revenue-formulas-container .optimization_direction_container .math_item,
#set-revenue-formulas-container .numerical_columns_container .math_item,
#set-revenue-formulas-container .math_symbols_container .math_item,
#set-revenue-formulas-container .kpi_types_container .math_item,
#modify-set-revenue-formulas-container .optimization_direction_container .math_item,
#modify-set-revenue-formulas-container .numerical_columns_container .math_item,
#modify-set-revenue-formulas-container .math_symbols_container .math_item,
#modify-set-revenue-formulas-container .kpi_types_container .math_item,
#set-cost-formulas-container .optimization_direction_container .math_item,
#set-cost-formulas-container .numerical_columns_container .math_item,
#set-cost-formulas-container .math_symbols_container .math_item,
#set-cost-formulas-container .kpi_types_container .math_item,
#modify-set-cost-formulas-container .optimization_direction_container .math_item,
#modify-set-cost-formulas-container .numerical_columns_container .math_item,
#modify-set-cost-formulas-container .math_symbols_container .math_item,
#modify-set-cost-formulas-container .kpi_types_container .math_item {
  background: #111111;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container .KPI_item,
#setGoalOptimizationDirectionContainer .optimization_direction_container .optimization_direction_item,
#setGoalOptimizationDirectionContainer .numerical_columns_container .KPI_item,
#setGoalOptimizationDirectionContainer .numerical_columns_container .optimization_direction_item,
#setGoalOptimizationDirectionContainer .math_symbols_container .KPI_item,
#setGoalOptimizationDirectionContainer .math_symbols_container .optimization_direction_item,
#setGoalOptimizationDirectionContainer .kpi_types_container .KPI_item,
#setGoalOptimizationDirectionContainer .kpi_types_container .optimization_direction_item,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .KPI_item,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .optimization_direction_item,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .KPI_item,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .optimization_direction_item,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .KPI_item,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .optimization_direction_item,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .KPI_item,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .optimization_direction_item,
#setGoalFormulasContainer .optimization_direction_container .KPI_item,
#setGoalFormulasContainer .optimization_direction_container .optimization_direction_item,
#setGoalFormulasContainer .numerical_columns_container .KPI_item,
#setGoalFormulasContainer .numerical_columns_container .optimization_direction_item,
#setGoalFormulasContainer .math_symbols_container .KPI_item,
#setGoalFormulasContainer .math_symbols_container .optimization_direction_item,
#setGoalFormulasContainer .kpi_types_container .KPI_item,
#setGoalFormulasContainer .kpi_types_container .optimization_direction_item,
#modifySetGoalFormulasContainer .optimization_direction_container .KPI_item,
#modifySetGoalFormulasContainer .optimization_direction_container .optimization_direction_item,
#modifySetGoalFormulasContainer .numerical_columns_container .KPI_item,
#modifySetGoalFormulasContainer .numerical_columns_container .optimization_direction_item,
#modifySetGoalFormulasContainer .math_symbols_container .KPI_item,
#modifySetGoalFormulasContainer .math_symbols_container .optimization_direction_item,
#modifySetGoalFormulasContainer .kpi_types_container .KPI_item,
#modifySetGoalFormulasContainer .kpi_types_container .optimization_direction_item,
#set-revenue-formulas-container .optimization_direction_container .KPI_item,
#set-revenue-formulas-container .optimization_direction_container .optimization_direction_item,
#set-revenue-formulas-container .numerical_columns_container .KPI_item,
#set-revenue-formulas-container .numerical_columns_container .optimization_direction_item,
#set-revenue-formulas-container .math_symbols_container .KPI_item,
#set-revenue-formulas-container .math_symbols_container .optimization_direction_item,
#set-revenue-formulas-container .kpi_types_container .KPI_item,
#set-revenue-formulas-container .kpi_types_container .optimization_direction_item,
#modify-set-revenue-formulas-container .optimization_direction_container .KPI_item,
#modify-set-revenue-formulas-container .optimization_direction_container .optimization_direction_item,
#modify-set-revenue-formulas-container .numerical_columns_container .KPI_item,
#modify-set-revenue-formulas-container .numerical_columns_container .optimization_direction_item,
#modify-set-revenue-formulas-container .math_symbols_container .KPI_item,
#modify-set-revenue-formulas-container .math_symbols_container .optimization_direction_item,
#modify-set-revenue-formulas-container .kpi_types_container .KPI_item,
#modify-set-revenue-formulas-container .kpi_types_container .optimization_direction_item,
#set-cost-formulas-container .optimization_direction_container .KPI_item,
#set-cost-formulas-container .optimization_direction_container .optimization_direction_item,
#set-cost-formulas-container .numerical_columns_container .KPI_item,
#set-cost-formulas-container .numerical_columns_container .optimization_direction_item,
#set-cost-formulas-container .math_symbols_container .KPI_item,
#set-cost-formulas-container .math_symbols_container .optimization_direction_item,
#set-cost-formulas-container .kpi_types_container .KPI_item,
#set-cost-formulas-container .kpi_types_container .optimization_direction_item,
#modify-set-cost-formulas-container .optimization_direction_container .KPI_item,
#modify-set-cost-formulas-container .optimization_direction_container .optimization_direction_item,
#modify-set-cost-formulas-container .numerical_columns_container .KPI_item,
#modify-set-cost-formulas-container .numerical_columns_container .optimization_direction_item,
#modify-set-cost-formulas-container .math_symbols_container .KPI_item,
#modify-set-cost-formulas-container .math_symbols_container .optimization_direction_item,
#modify-set-cost-formulas-container .kpi_types_container .KPI_item,
#modify-set-cost-formulas-container .kpi_types_container .optimization_direction_item {
  background: #2a2b28;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container .KPI_item.highlight,
#setGoalOptimizationDirectionContainer .optimization_direction_container .optimization_direction_item.highlight,
#setGoalOptimizationDirectionContainer .numerical_columns_container .KPI_item.highlight,
#setGoalOptimizationDirectionContainer .numerical_columns_container .optimization_direction_item.highlight,
#setGoalOptimizationDirectionContainer .math_symbols_container .KPI_item.highlight,
#setGoalOptimizationDirectionContainer .math_symbols_container .optimization_direction_item.highlight,
#setGoalOptimizationDirectionContainer .kpi_types_container .KPI_item.highlight,
#setGoalOptimizationDirectionContainer .kpi_types_container .optimization_direction_item.highlight,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .KPI_item.highlight,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .optimization_direction_item.highlight,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .KPI_item.highlight,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .optimization_direction_item.highlight,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .KPI_item.highlight,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .optimization_direction_item.highlight,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .KPI_item.highlight,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .optimization_direction_item.highlight,
#setGoalFormulasContainer .optimization_direction_container .KPI_item.highlight,
#setGoalFormulasContainer .optimization_direction_container .optimization_direction_item.highlight,
#setGoalFormulasContainer .numerical_columns_container .KPI_item.highlight,
#setGoalFormulasContainer .numerical_columns_container .optimization_direction_item.highlight,
#setGoalFormulasContainer .math_symbols_container .KPI_item.highlight,
#setGoalFormulasContainer .math_symbols_container .optimization_direction_item.highlight,
#setGoalFormulasContainer .kpi_types_container .KPI_item.highlight,
#setGoalFormulasContainer .kpi_types_container .optimization_direction_item.highlight,
#modifySetGoalFormulasContainer .optimization_direction_container .KPI_item.highlight,
#modifySetGoalFormulasContainer .optimization_direction_container .optimization_direction_item.highlight,
#modifySetGoalFormulasContainer .numerical_columns_container .KPI_item.highlight,
#modifySetGoalFormulasContainer .numerical_columns_container .optimization_direction_item.highlight,
#modifySetGoalFormulasContainer .math_symbols_container .KPI_item.highlight,
#modifySetGoalFormulasContainer .math_symbols_container .optimization_direction_item.highlight,
#modifySetGoalFormulasContainer .kpi_types_container .KPI_item.highlight,
#modifySetGoalFormulasContainer .kpi_types_container .optimization_direction_item.highlight,
#set-revenue-formulas-container .optimization_direction_container .KPI_item.highlight,
#set-revenue-formulas-container .optimization_direction_container .optimization_direction_item.highlight,
#set-revenue-formulas-container .numerical_columns_container .KPI_item.highlight,
#set-revenue-formulas-container .numerical_columns_container .optimization_direction_item.highlight,
#set-revenue-formulas-container .math_symbols_container .KPI_item.highlight,
#set-revenue-formulas-container .math_symbols_container .optimization_direction_item.highlight,
#set-revenue-formulas-container .kpi_types_container .KPI_item.highlight,
#set-revenue-formulas-container .kpi_types_container .optimization_direction_item.highlight,
#modify-set-revenue-formulas-container .optimization_direction_container .KPI_item.highlight,
#modify-set-revenue-formulas-container .optimization_direction_container .optimization_direction_item.highlight,
#modify-set-revenue-formulas-container .numerical_columns_container .KPI_item.highlight,
#modify-set-revenue-formulas-container .numerical_columns_container .optimization_direction_item.highlight,
#modify-set-revenue-formulas-container .math_symbols_container .KPI_item.highlight,
#modify-set-revenue-formulas-container .math_symbols_container .optimization_direction_item.highlight,
#modify-set-revenue-formulas-container .kpi_types_container .KPI_item.highlight,
#modify-set-revenue-formulas-container .kpi_types_container .optimization_direction_item.highlight,
#set-cost-formulas-container .optimization_direction_container .KPI_item.highlight,
#set-cost-formulas-container .optimization_direction_container .optimization_direction_item.highlight,
#set-cost-formulas-container .numerical_columns_container .KPI_item.highlight,
#set-cost-formulas-container .numerical_columns_container .optimization_direction_item.highlight,
#set-cost-formulas-container .math_symbols_container .KPI_item.highlight,
#set-cost-formulas-container .math_symbols_container .optimization_direction_item.highlight,
#set-cost-formulas-container .kpi_types_container .KPI_item.highlight,
#set-cost-formulas-container .kpi_types_container .optimization_direction_item.highlight,
#modify-set-cost-formulas-container .optimization_direction_container .KPI_item.highlight,
#modify-set-cost-formulas-container .optimization_direction_container .optimization_direction_item.highlight,
#modify-set-cost-formulas-container .numerical_columns_container .KPI_item.highlight,
#modify-set-cost-formulas-container .numerical_columns_container .optimization_direction_item.highlight,
#modify-set-cost-formulas-container .math_symbols_container .KPI_item.highlight,
#modify-set-cost-formulas-container .math_symbols_container .optimization_direction_item.highlight,
#modify-set-cost-formulas-container .kpi_types_container .KPI_item.highlight,
#modify-set-cost-formulas-container .kpi_types_container .optimization_direction_item.highlight {
  background: #6A2C55;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container .KPI_item.inactive,
#setGoalOptimizationDirectionContainer .optimization_direction_container .optimization_direction_item.inactive,
#setGoalOptimizationDirectionContainer .numerical_columns_container .KPI_item.inactive,
#setGoalOptimizationDirectionContainer .numerical_columns_container .optimization_direction_item.inactive,
#setGoalOptimizationDirectionContainer .math_symbols_container .KPI_item.inactive,
#setGoalOptimizationDirectionContainer .math_symbols_container .optimization_direction_item.inactive,
#setGoalOptimizationDirectionContainer .kpi_types_container .KPI_item.inactive,
#setGoalOptimizationDirectionContainer .kpi_types_container .optimization_direction_item.inactive,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .KPI_item.inactive,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .optimization_direction_item.inactive,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .KPI_item.inactive,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .optimization_direction_item.inactive,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .KPI_item.inactive,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .optimization_direction_item.inactive,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .KPI_item.inactive,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .optimization_direction_item.inactive,
#setGoalFormulasContainer .optimization_direction_container .KPI_item.inactive,
#setGoalFormulasContainer .optimization_direction_container .optimization_direction_item.inactive,
#setGoalFormulasContainer .numerical_columns_container .KPI_item.inactive,
#setGoalFormulasContainer .numerical_columns_container .optimization_direction_item.inactive,
#setGoalFormulasContainer .math_symbols_container .KPI_item.inactive,
#setGoalFormulasContainer .math_symbols_container .optimization_direction_item.inactive,
#setGoalFormulasContainer .kpi_types_container .KPI_item.inactive,
#setGoalFormulasContainer .kpi_types_container .optimization_direction_item.inactive,
#modifySetGoalFormulasContainer .optimization_direction_container .KPI_item.inactive,
#modifySetGoalFormulasContainer .optimization_direction_container .optimization_direction_item.inactive,
#modifySetGoalFormulasContainer .numerical_columns_container .KPI_item.inactive,
#modifySetGoalFormulasContainer .numerical_columns_container .optimization_direction_item.inactive,
#modifySetGoalFormulasContainer .math_symbols_container .KPI_item.inactive,
#modifySetGoalFormulasContainer .math_symbols_container .optimization_direction_item.inactive,
#modifySetGoalFormulasContainer .kpi_types_container .KPI_item.inactive,
#modifySetGoalFormulasContainer .kpi_types_container .optimization_direction_item.inactive,
#set-revenue-formulas-container .optimization_direction_container .KPI_item.inactive,
#set-revenue-formulas-container .optimization_direction_container .optimization_direction_item.inactive,
#set-revenue-formulas-container .numerical_columns_container .KPI_item.inactive,
#set-revenue-formulas-container .numerical_columns_container .optimization_direction_item.inactive,
#set-revenue-formulas-container .math_symbols_container .KPI_item.inactive,
#set-revenue-formulas-container .math_symbols_container .optimization_direction_item.inactive,
#set-revenue-formulas-container .kpi_types_container .KPI_item.inactive,
#set-revenue-formulas-container .kpi_types_container .optimization_direction_item.inactive,
#modify-set-revenue-formulas-container .optimization_direction_container .KPI_item.inactive,
#modify-set-revenue-formulas-container .optimization_direction_container .optimization_direction_item.inactive,
#modify-set-revenue-formulas-container .numerical_columns_container .KPI_item.inactive,
#modify-set-revenue-formulas-container .numerical_columns_container .optimization_direction_item.inactive,
#modify-set-revenue-formulas-container .math_symbols_container .KPI_item.inactive,
#modify-set-revenue-formulas-container .math_symbols_container .optimization_direction_item.inactive,
#modify-set-revenue-formulas-container .kpi_types_container .KPI_item.inactive,
#modify-set-revenue-formulas-container .kpi_types_container .optimization_direction_item.inactive,
#set-cost-formulas-container .optimization_direction_container .KPI_item.inactive,
#set-cost-formulas-container .optimization_direction_container .optimization_direction_item.inactive,
#set-cost-formulas-container .numerical_columns_container .KPI_item.inactive,
#set-cost-formulas-container .numerical_columns_container .optimization_direction_item.inactive,
#set-cost-formulas-container .math_symbols_container .KPI_item.inactive,
#set-cost-formulas-container .math_symbols_container .optimization_direction_item.inactive,
#set-cost-formulas-container .kpi_types_container .KPI_item.inactive,
#set-cost-formulas-container .kpi_types_container .optimization_direction_item.inactive,
#modify-set-cost-formulas-container .optimization_direction_container .KPI_item.inactive,
#modify-set-cost-formulas-container .optimization_direction_container .optimization_direction_item.inactive,
#modify-set-cost-formulas-container .numerical_columns_container .KPI_item.inactive,
#modify-set-cost-formulas-container .numerical_columns_container .optimization_direction_item.inactive,
#modify-set-cost-formulas-container .math_symbols_container .KPI_item.inactive,
#modify-set-cost-formulas-container .math_symbols_container .optimization_direction_item.inactive,
#modify-set-cost-formulas-container .kpi_types_container .KPI_item.inactive,
#modify-set-cost-formulas-container .kpi_types_container .optimization_direction_item.inactive {
  opacity: 0.5;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container .KPI_item.inactive:hover,
#setGoalOptimizationDirectionContainer .optimization_direction_container .optimization_direction_item.inactive:hover,
#setGoalOptimizationDirectionContainer .numerical_columns_container .KPI_item.inactive:hover,
#setGoalOptimizationDirectionContainer .numerical_columns_container .optimization_direction_item.inactive:hover,
#setGoalOptimizationDirectionContainer .math_symbols_container .KPI_item.inactive:hover,
#setGoalOptimizationDirectionContainer .math_symbols_container .optimization_direction_item.inactive:hover,
#setGoalOptimizationDirectionContainer .kpi_types_container .KPI_item.inactive:hover,
#setGoalOptimizationDirectionContainer .kpi_types_container .optimization_direction_item.inactive:hover,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .KPI_item.inactive:hover,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .optimization_direction_item.inactive:hover,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .KPI_item.inactive:hover,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .optimization_direction_item.inactive:hover,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .KPI_item.inactive:hover,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .optimization_direction_item.inactive:hover,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .KPI_item.inactive:hover,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .optimization_direction_item.inactive:hover,
#setGoalFormulasContainer .optimization_direction_container .KPI_item.inactive:hover,
#setGoalFormulasContainer .optimization_direction_container .optimization_direction_item.inactive:hover,
#setGoalFormulasContainer .numerical_columns_container .KPI_item.inactive:hover,
#setGoalFormulasContainer .numerical_columns_container .optimization_direction_item.inactive:hover,
#setGoalFormulasContainer .math_symbols_container .KPI_item.inactive:hover,
#setGoalFormulasContainer .math_symbols_container .optimization_direction_item.inactive:hover,
#setGoalFormulasContainer .kpi_types_container .KPI_item.inactive:hover,
#setGoalFormulasContainer .kpi_types_container .optimization_direction_item.inactive:hover,
#modifySetGoalFormulasContainer .optimization_direction_container .KPI_item.inactive:hover,
#modifySetGoalFormulasContainer .optimization_direction_container .optimization_direction_item.inactive:hover,
#modifySetGoalFormulasContainer .numerical_columns_container .KPI_item.inactive:hover,
#modifySetGoalFormulasContainer .numerical_columns_container .optimization_direction_item.inactive:hover,
#modifySetGoalFormulasContainer .math_symbols_container .KPI_item.inactive:hover,
#modifySetGoalFormulasContainer .math_symbols_container .optimization_direction_item.inactive:hover,
#modifySetGoalFormulasContainer .kpi_types_container .KPI_item.inactive:hover,
#modifySetGoalFormulasContainer .kpi_types_container .optimization_direction_item.inactive:hover,
#set-revenue-formulas-container .optimization_direction_container .KPI_item.inactive:hover,
#set-revenue-formulas-container .optimization_direction_container .optimization_direction_item.inactive:hover,
#set-revenue-formulas-container .numerical_columns_container .KPI_item.inactive:hover,
#set-revenue-formulas-container .numerical_columns_container .optimization_direction_item.inactive:hover,
#set-revenue-formulas-container .math_symbols_container .KPI_item.inactive:hover,
#set-revenue-formulas-container .math_symbols_container .optimization_direction_item.inactive:hover,
#set-revenue-formulas-container .kpi_types_container .KPI_item.inactive:hover,
#set-revenue-formulas-container .kpi_types_container .optimization_direction_item.inactive:hover,
#modify-set-revenue-formulas-container .optimization_direction_container .KPI_item.inactive:hover,
#modify-set-revenue-formulas-container .optimization_direction_container .optimization_direction_item.inactive:hover,
#modify-set-revenue-formulas-container .numerical_columns_container .KPI_item.inactive:hover,
#modify-set-revenue-formulas-container .numerical_columns_container .optimization_direction_item.inactive:hover,
#modify-set-revenue-formulas-container .math_symbols_container .KPI_item.inactive:hover,
#modify-set-revenue-formulas-container .math_symbols_container .optimization_direction_item.inactive:hover,
#modify-set-revenue-formulas-container .kpi_types_container .KPI_item.inactive:hover,
#modify-set-revenue-formulas-container .kpi_types_container .optimization_direction_item.inactive:hover,
#set-cost-formulas-container .optimization_direction_container .KPI_item.inactive:hover,
#set-cost-formulas-container .optimization_direction_container .optimization_direction_item.inactive:hover,
#set-cost-formulas-container .numerical_columns_container .KPI_item.inactive:hover,
#set-cost-formulas-container .numerical_columns_container .optimization_direction_item.inactive:hover,
#set-cost-formulas-container .math_symbols_container .KPI_item.inactive:hover,
#set-cost-formulas-container .math_symbols_container .optimization_direction_item.inactive:hover,
#set-cost-formulas-container .kpi_types_container .KPI_item.inactive:hover,
#set-cost-formulas-container .kpi_types_container .optimization_direction_item.inactive:hover,
#modify-set-cost-formulas-container .optimization_direction_container .KPI_item.inactive:hover,
#modify-set-cost-formulas-container .optimization_direction_container .optimization_direction_item.inactive:hover,
#modify-set-cost-formulas-container .numerical_columns_container .KPI_item.inactive:hover,
#modify-set-cost-formulas-container .numerical_columns_container .optimization_direction_item.inactive:hover,
#modify-set-cost-formulas-container .math_symbols_container .KPI_item.inactive:hover,
#modify-set-cost-formulas-container .math_symbols_container .optimization_direction_item.inactive:hover,
#modify-set-cost-formulas-container .kpi_types_container .KPI_item.inactive:hover,
#modify-set-cost-formulas-container .kpi_types_container .optimization_direction_item.inactive:hover {
  cursor: default;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper,
#setGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper,
#setGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper,
#setGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper,
#setGoalFormulasContainer .optimization_direction_container .numericalInputWrapper,
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper,
#setGoalFormulasContainer .kpi_types_container .numericalInputWrapper,
#modifySetGoalFormulasContainer .optimization_direction_container .numericalInputWrapper,
#modifySetGoalFormulasContainer .numerical_columns_container .numericalInputWrapper,
#modifySetGoalFormulasContainer .math_symbols_container .numericalInputWrapper,
#modifySetGoalFormulasContainer .kpi_types_container .numericalInputWrapper,
#set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper,
#set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper,
#set-revenue-formulas-container .math_symbols_container .numericalInputWrapper,
#set-revenue-formulas-container .kpi_types_container .numericalInputWrapper,
#modify-set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper,
#modify-set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper,
#modify-set-revenue-formulas-container .math_symbols_container .numericalInputWrapper,
#modify-set-revenue-formulas-container .kpi_types_container .numericalInputWrapper,
#set-cost-formulas-container .optimization_direction_container .numericalInputWrapper,
#set-cost-formulas-container .numerical_columns_container .numericalInputWrapper,
#set-cost-formulas-container .math_symbols_container .numericalInputWrapper,
#set-cost-formulas-container .kpi_types_container .numericalInputWrapper,
#modify-set-cost-formulas-container .optimization_direction_container .numericalInputWrapper,
#modify-set-cost-formulas-container .numerical_columns_container .numericalInputWrapper,
#modify-set-cost-formulas-container .math_symbols_container .numericalInputWrapper,
#modify-set-cost-formulas-container .kpi_types_container .numericalInputWrapper {
  position: relative;
  border: none;
  width: 11rem;
  height: 3.55rem;
  padding: 0;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper input,
#setGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper input,
#setGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper input,
#setGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper input,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper input,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper input,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper input,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper input,
#setGoalFormulasContainer .optimization_direction_container .numericalInputWrapper input,
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper input,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper input,
#setGoalFormulasContainer .kpi_types_container .numericalInputWrapper input,
#modifySetGoalFormulasContainer .optimization_direction_container .numericalInputWrapper input,
#modifySetGoalFormulasContainer .numerical_columns_container .numericalInputWrapper input,
#modifySetGoalFormulasContainer .math_symbols_container .numericalInputWrapper input,
#modifySetGoalFormulasContainer .kpi_types_container .numericalInputWrapper input,
#set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper input,
#set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper input,
#set-revenue-formulas-container .math_symbols_container .numericalInputWrapper input,
#set-revenue-formulas-container .kpi_types_container .numericalInputWrapper input,
#modify-set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper input,
#modify-set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper input,
#modify-set-revenue-formulas-container .math_symbols_container .numericalInputWrapper input,
#modify-set-revenue-formulas-container .kpi_types_container .numericalInputWrapper input,
#set-cost-formulas-container .optimization_direction_container .numericalInputWrapper input,
#set-cost-formulas-container .numerical_columns_container .numericalInputWrapper input,
#set-cost-formulas-container .math_symbols_container .numericalInputWrapper input,
#set-cost-formulas-container .kpi_types_container .numericalInputWrapper input,
#modify-set-cost-formulas-container .optimization_direction_container .numericalInputWrapper input,
#modify-set-cost-formulas-container .numerical_columns_container .numericalInputWrapper input,
#modify-set-cost-formulas-container .math_symbols_container .numericalInputWrapper input,
#modify-set-cost-formulas-container .kpi_types_container .numericalInputWrapper input {
  display: inline-block;
  position: absolute;
  left: 0.8rem;
  width: 6.7rem;
  line-height: 1.7rem;
  font-size: 1.5rem;
  height: 1.95rem;
  border: none;
  margin-top: 0.5rem;
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
  padding-left: 0 !important;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper input:focus,
#setGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper input:focus,
#setGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper input:focus,
#setGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper input:focus,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper input:focus,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper input:focus,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper input:focus,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper input:focus,
#setGoalFormulasContainer .optimization_direction_container .numericalInputWrapper input:focus,
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper input:focus,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper input:focus,
#setGoalFormulasContainer .kpi_types_container .numericalInputWrapper input:focus,
#modifySetGoalFormulasContainer .optimization_direction_container .numericalInputWrapper input:focus,
#modifySetGoalFormulasContainer .numerical_columns_container .numericalInputWrapper input:focus,
#modifySetGoalFormulasContainer .math_symbols_container .numericalInputWrapper input:focus,
#modifySetGoalFormulasContainer .kpi_types_container .numericalInputWrapper input:focus,
#set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper input:focus,
#set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper input:focus,
#set-revenue-formulas-container .math_symbols_container .numericalInputWrapper input:focus,
#set-revenue-formulas-container .kpi_types_container .numericalInputWrapper input:focus,
#modify-set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper input:focus,
#modify-set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper input:focus,
#modify-set-revenue-formulas-container .math_symbols_container .numericalInputWrapper input:focus,
#modify-set-revenue-formulas-container .kpi_types_container .numericalInputWrapper input:focus,
#set-cost-formulas-container .optimization_direction_container .numericalInputWrapper input:focus,
#set-cost-formulas-container .numerical_columns_container .numericalInputWrapper input:focus,
#set-cost-formulas-container .math_symbols_container .numericalInputWrapper input:focus,
#set-cost-formulas-container .kpi_types_container .numericalInputWrapper input:focus,
#modify-set-cost-formulas-container .optimization_direction_container .numericalInputWrapper input:focus,
#modify-set-cost-formulas-container .numerical_columns_container .numericalInputWrapper input:focus,
#modify-set-cost-formulas-container .math_symbols_container .numericalInputWrapper input:focus,
#modify-set-cost-formulas-container .kpi_types_container .numericalInputWrapper input:focus {
  outline: none;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper input::placeholder,
#setGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper input::placeholder,
#setGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper input::placeholder,
#setGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper input::placeholder,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper input::placeholder,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper input::placeholder,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper input::placeholder,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper input::placeholder,
#setGoalFormulasContainer .optimization_direction_container .numericalInputWrapper input::placeholder,
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper input::placeholder,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper input::placeholder,
#setGoalFormulasContainer .kpi_types_container .numericalInputWrapper input::placeholder,
#modifySetGoalFormulasContainer .optimization_direction_container .numericalInputWrapper input::placeholder,
#modifySetGoalFormulasContainer .numerical_columns_container .numericalInputWrapper input::placeholder,
#modifySetGoalFormulasContainer .math_symbols_container .numericalInputWrapper input::placeholder,
#modifySetGoalFormulasContainer .kpi_types_container .numericalInputWrapper input::placeholder,
#set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper input::placeholder,
#set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper input::placeholder,
#set-revenue-formulas-container .math_symbols_container .numericalInputWrapper input::placeholder,
#set-revenue-formulas-container .kpi_types_container .numericalInputWrapper input::placeholder,
#modify-set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper input::placeholder,
#modify-set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper input::placeholder,
#modify-set-revenue-formulas-container .math_symbols_container .numericalInputWrapper input::placeholder,
#modify-set-revenue-formulas-container .kpi_types_container .numericalInputWrapper input::placeholder,
#set-cost-formulas-container .optimization_direction_container .numericalInputWrapper input::placeholder,
#set-cost-formulas-container .numerical_columns_container .numericalInputWrapper input::placeholder,
#set-cost-formulas-container .math_symbols_container .numericalInputWrapper input::placeholder,
#set-cost-formulas-container .kpi_types_container .numericalInputWrapper input::placeholder,
#modify-set-cost-formulas-container .optimization_direction_container .numericalInputWrapper input::placeholder,
#modify-set-cost-formulas-container .numerical_columns_container .numericalInputWrapper input::placeholder,
#modify-set-cost-formulas-container .math_symbols_container .numericalInputWrapper input::placeholder,
#modify-set-cost-formulas-container .kpi_types_container .numericalInputWrapper input::placeholder {
  color: #fff;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper input::-webkit-inner-spin-button, #setGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper input::-webkit-outer-spin-button,
#setGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper input::-webkit-inner-spin-button,
#setGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper input::-webkit-outer-spin-button,
#setGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper input::-webkit-inner-spin-button,
#setGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper input::-webkit-outer-spin-button,
#setGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper input::-webkit-inner-spin-button,
#setGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper input::-webkit-outer-spin-button,
#setGoalFormulasContainer .optimization_direction_container .numericalInputWrapper input::-webkit-inner-spin-button,
#setGoalFormulasContainer .optimization_direction_container .numericalInputWrapper input::-webkit-outer-spin-button,
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper input::-webkit-inner-spin-button,
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper input::-webkit-outer-spin-button,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper input::-webkit-inner-spin-button,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper input::-webkit-outer-spin-button,
#setGoalFormulasContainer .kpi_types_container .numericalInputWrapper input::-webkit-inner-spin-button,
#setGoalFormulasContainer .kpi_types_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modifySetGoalFormulasContainer .optimization_direction_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modifySetGoalFormulasContainer .optimization_direction_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modifySetGoalFormulasContainer .numerical_columns_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modifySetGoalFormulasContainer .numerical_columns_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modifySetGoalFormulasContainer .math_symbols_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modifySetGoalFormulasContainer .math_symbols_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modifySetGoalFormulasContainer .kpi_types_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modifySetGoalFormulasContainer .kpi_types_container .numericalInputWrapper input::-webkit-outer-spin-button,
#set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper input::-webkit-inner-spin-button,
#set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper input::-webkit-outer-spin-button,
#set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper input::-webkit-inner-spin-button,
#set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper input::-webkit-outer-spin-button,
#set-revenue-formulas-container .math_symbols_container .numericalInputWrapper input::-webkit-inner-spin-button,
#set-revenue-formulas-container .math_symbols_container .numericalInputWrapper input::-webkit-outer-spin-button,
#set-revenue-formulas-container .kpi_types_container .numericalInputWrapper input::-webkit-inner-spin-button,
#set-revenue-formulas-container .kpi_types_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modify-set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modify-set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modify-set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modify-set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modify-set-revenue-formulas-container .math_symbols_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modify-set-revenue-formulas-container .math_symbols_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modify-set-revenue-formulas-container .kpi_types_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modify-set-revenue-formulas-container .kpi_types_container .numericalInputWrapper input::-webkit-outer-spin-button,
#set-cost-formulas-container .optimization_direction_container .numericalInputWrapper input::-webkit-inner-spin-button,
#set-cost-formulas-container .optimization_direction_container .numericalInputWrapper input::-webkit-outer-spin-button,
#set-cost-formulas-container .numerical_columns_container .numericalInputWrapper input::-webkit-inner-spin-button,
#set-cost-formulas-container .numerical_columns_container .numericalInputWrapper input::-webkit-outer-spin-button,
#set-cost-formulas-container .math_symbols_container .numericalInputWrapper input::-webkit-inner-spin-button,
#set-cost-formulas-container .math_symbols_container .numericalInputWrapper input::-webkit-outer-spin-button,
#set-cost-formulas-container .kpi_types_container .numericalInputWrapper input::-webkit-inner-spin-button,
#set-cost-formulas-container .kpi_types_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modify-set-cost-formulas-container .optimization_direction_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modify-set-cost-formulas-container .optimization_direction_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modify-set-cost-formulas-container .numerical_columns_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modify-set-cost-formulas-container .numerical_columns_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modify-set-cost-formulas-container .math_symbols_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modify-set-cost-formulas-container .math_symbols_container .numericalInputWrapper input::-webkit-outer-spin-button,
#modify-set-cost-formulas-container .kpi_types_container .numericalInputWrapper input::-webkit-inner-spin-button,
#modify-set-cost-formulas-container .kpi_types_container .numericalInputWrapper input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper .addNumberButton,
#setGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper .addNumberButton,
#setGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper .addNumberButton,
#setGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper .addNumberButton,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper .addNumberButton,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper .addNumberButton,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper .addNumberButton,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper .addNumberButton,
#setGoalFormulasContainer .optimization_direction_container .numericalInputWrapper .addNumberButton,
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper .addNumberButton,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper .addNumberButton,
#setGoalFormulasContainer .kpi_types_container .numericalInputWrapper .addNumberButton,
#modifySetGoalFormulasContainer .optimization_direction_container .numericalInputWrapper .addNumberButton,
#modifySetGoalFormulasContainer .numerical_columns_container .numericalInputWrapper .addNumberButton,
#modifySetGoalFormulasContainer .math_symbols_container .numericalInputWrapper .addNumberButton,
#modifySetGoalFormulasContainer .kpi_types_container .numericalInputWrapper .addNumberButton,
#set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper .addNumberButton,
#set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper .addNumberButton,
#set-revenue-formulas-container .math_symbols_container .numericalInputWrapper .addNumberButton,
#set-revenue-formulas-container .kpi_types_container .numericalInputWrapper .addNumberButton,
#modify-set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper .addNumberButton,
#modify-set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper .addNumberButton,
#modify-set-revenue-formulas-container .math_symbols_container .numericalInputWrapper .addNumberButton,
#modify-set-revenue-formulas-container .kpi_types_container .numericalInputWrapper .addNumberButton,
#set-cost-formulas-container .optimization_direction_container .numericalInputWrapper .addNumberButton,
#set-cost-formulas-container .numerical_columns_container .numericalInputWrapper .addNumberButton,
#set-cost-formulas-container .math_symbols_container .numericalInputWrapper .addNumberButton,
#set-cost-formulas-container .kpi_types_container .numericalInputWrapper .addNumberButton,
#modify-set-cost-formulas-container .optimization_direction_container .numericalInputWrapper .addNumberButton,
#modify-set-cost-formulas-container .numerical_columns_container .numericalInputWrapper .addNumberButton,
#modify-set-cost-formulas-container .math_symbols_container .numericalInputWrapper .addNumberButton,
#modify-set-cost-formulas-container .kpi_types_container .numericalInputWrapper .addNumberButton {
  background-image: url("../img/add.svg");
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
  background-position: center;
  background-size: 50%;
  background-repeat: no-repeat;
  width: 3.5rem;
  height: 100%;
  line-height: 100%;
  right: 0;
  position: absolute;
  transition: all 0.1s ease-in-out;
  border: none;
}
#setGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper .addNumberButton:hover,
#setGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper .addNumberButton:hover,
#setGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper .addNumberButton:hover,
#setGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper .addNumberButton:hover,
#modifySetGoalOptimizationDirectionContainer .optimization_direction_container .numericalInputWrapper .addNumberButton:hover,
#modifySetGoalOptimizationDirectionContainer .numerical_columns_container .numericalInputWrapper .addNumberButton:hover,
#modifySetGoalOptimizationDirectionContainer .math_symbols_container .numericalInputWrapper .addNumberButton:hover,
#modifySetGoalOptimizationDirectionContainer .kpi_types_container .numericalInputWrapper .addNumberButton:hover,
#setGoalFormulasContainer .optimization_direction_container .numericalInputWrapper .addNumberButton:hover,
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper .addNumberButton:hover,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper .addNumberButton:hover,
#setGoalFormulasContainer .kpi_types_container .numericalInputWrapper .addNumberButton:hover,
#modifySetGoalFormulasContainer .optimization_direction_container .numericalInputWrapper .addNumberButton:hover,
#modifySetGoalFormulasContainer .numerical_columns_container .numericalInputWrapper .addNumberButton:hover,
#modifySetGoalFormulasContainer .math_symbols_container .numericalInputWrapper .addNumberButton:hover,
#modifySetGoalFormulasContainer .kpi_types_container .numericalInputWrapper .addNumberButton:hover,
#set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper .addNumberButton:hover,
#set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper .addNumberButton:hover,
#set-revenue-formulas-container .math_symbols_container .numericalInputWrapper .addNumberButton:hover,
#set-revenue-formulas-container .kpi_types_container .numericalInputWrapper .addNumberButton:hover,
#modify-set-revenue-formulas-container .optimization_direction_container .numericalInputWrapper .addNumberButton:hover,
#modify-set-revenue-formulas-container .numerical_columns_container .numericalInputWrapper .addNumberButton:hover,
#modify-set-revenue-formulas-container .math_symbols_container .numericalInputWrapper .addNumberButton:hover,
#modify-set-revenue-formulas-container .kpi_types_container .numericalInputWrapper .addNumberButton:hover,
#set-cost-formulas-container .optimization_direction_container .numericalInputWrapper .addNumberButton:hover,
#set-cost-formulas-container .numerical_columns_container .numericalInputWrapper .addNumberButton:hover,
#set-cost-formulas-container .math_symbols_container .numericalInputWrapper .addNumberButton:hover,
#set-cost-formulas-container .kpi_types_container .numericalInputWrapper .addNumberButton:hover,
#modify-set-cost-formulas-container .optimization_direction_container .numericalInputWrapper .addNumberButton:hover,
#modify-set-cost-formulas-container .numerical_columns_container .numericalInputWrapper .addNumberButton:hover,
#modify-set-cost-formulas-container .math_symbols_container .numericalInputWrapper .addNumberButton:hover,
#modify-set-cost-formulas-container .kpi_types_container .numericalInputWrapper .addNumberButton:hover {
  cursor: pointer;
  background-size: 70%;
}
#setGoalOptimizationDirectionContainer .KPIdrawArea,
#setGoalOptimizationDirectionContainer .dynamicKPIdrawArea,
#modifySetGoalOptimizationDirectionContainer .KPIdrawArea,
#modifySetGoalOptimizationDirectionContainer .dynamicKPIdrawArea,
#setGoalFormulasContainer .KPIdrawArea,
#setGoalFormulasContainer .dynamicKPIdrawArea,
#modifySetGoalFormulasContainer .KPIdrawArea,
#modifySetGoalFormulasContainer .dynamicKPIdrawArea,
#set-revenue-formulas-container .KPIdrawArea,
#set-revenue-formulas-container .dynamicKPIdrawArea,
#modify-set-revenue-formulas-container .KPIdrawArea,
#modify-set-revenue-formulas-container .dynamicKPIdrawArea,
#set-cost-formulas-container .KPIdrawArea,
#set-cost-formulas-container .dynamicKPIdrawArea,
#modify-set-cost-formulas-container .KPIdrawArea,
#modify-set-cost-formulas-container .dynamicKPIdrawArea {
  width: 100%;
  height: 10rem;
  line-height: 10rem;
  margin: 1rem auto;
  border-radius: 1rem;
  border: 1px dashed #aaaaaa;
  color: #aaaaaa;
  text-align: center;
}
#setGoalOptimizationDirectionContainer .KPIdrawArea .drawItem,
#setGoalOptimizationDirectionContainer .dynamicKPIdrawArea .drawItem,
#modifySetGoalOptimizationDirectionContainer .KPIdrawArea .drawItem,
#modifySetGoalOptimizationDirectionContainer .dynamicKPIdrawArea .drawItem,
#setGoalFormulasContainer .KPIdrawArea .drawItem,
#setGoalFormulasContainer .dynamicKPIdrawArea .drawItem,
#modifySetGoalFormulasContainer .KPIdrawArea .drawItem,
#modifySetGoalFormulasContainer .dynamicKPIdrawArea .drawItem,
#set-revenue-formulas-container .KPIdrawArea .drawItem,
#set-revenue-formulas-container .dynamicKPIdrawArea .drawItem,
#modify-set-revenue-formulas-container .KPIdrawArea .drawItem,
#modify-set-revenue-formulas-container .dynamicKPIdrawArea .drawItem,
#set-cost-formulas-container .KPIdrawArea .drawItem,
#set-cost-formulas-container .dynamicKPIdrawArea .drawItem,
#modify-set-cost-formulas-container .KPIdrawArea .drawItem,
#modify-set-cost-formulas-container .dynamicKPIdrawArea .drawItem {
  padding: 0.5rem;
  color: #fff;
}

.add-agent-form ul,
.modify-agent-form ul,
.add-project-form ul,
.modify-project-form ul {
  list-style: none;
  text-align: left;
  margin-bottom: 1rem;
}
.add-agent-form ul li,
.modify-agent-form ul li,
.add-project-form ul li,
.modify-project-form ul li {
  display: flex;
  justify-content: left;
  align-items: center;
}
.add-agent-form ul li label,
.modify-agent-form ul li label,
.add-project-form ul li label,
.modify-project-form ul li label {
  margin-left: 1rem;
}

.removal-checkbox,
.add-project-import-checkbox,
.add-agent-import-checkbox,
.add-agent-checkbox,
.modify-project-import-checkbox,
.modify-instance-agent-relationship-checkbox,
.notification-project-checkbox,
.notification-recipient-checkbox,
.notification-weekday-checkbox {
  display: inline-block;
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 1rem;
  background-image: url("../img/cb-inactive.svg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
.removal-checkbox:hover,
.add-project-import-checkbox:hover,
.add-agent-import-checkbox:hover,
.add-agent-checkbox:hover,
.modify-project-import-checkbox:hover,
.modify-instance-agent-relationship-checkbox:hover,
.notification-project-checkbox:hover,
.notification-recipient-checkbox:hover,
.notification-weekday-checkbox:hover {
  cursor: pointer;
  background-image: url("../img/cb-hover.svg");
}
.removal-checkbox.selected,
.add-project-import-checkbox.selected,
.add-agent-import-checkbox.selected,
.add-agent-checkbox.selected,
.modify-project-import-checkbox.selected,
.modify-instance-agent-relationship-checkbox.selected,
.notification-project-checkbox.selected,
.notification-recipient-checkbox.selected,
.notification-weekday-checkbox.selected {
  background-image: url("../img/cb-active.svg");
}

.removal-checkbox {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}

.add-project-import-checkbox,
.add-agent-import-checkbox,
.add-agent-checkbox,
.modify-project-import-checkbox,
.modify-instance-agent-relationship-checkbox,
.notification-project-checkbox,
.notification-recipient-checkbox,
.notification-weekday-checkbox {
  filter: brightness(0) saturate(100%) invert(37%) sepia(40%) saturate(6492%) hue-rotate(198deg) brightness(103%) contrast(109%);
}
.add-project-import-checkbox.disabled,
.add-agent-import-checkbox.disabled,
.add-agent-checkbox.disabled,
.modify-project-import-checkbox.disabled,
.modify-instance-agent-relationship-checkbox.disabled,
.notification-project-checkbox.disabled,
.notification-recipient-checkbox.disabled,
.notification-weekday-checkbox.disabled {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
.add-project-import-checkbox.disabled + span,
.add-agent-import-checkbox.disabled + span,
.add-agent-checkbox.disabled + span,
.modify-project-import-checkbox.disabled + span,
.modify-instance-agent-relationship-checkbox.disabled + span,
.notification-project-checkbox.disabled + span,
.notification-recipient-checkbox.disabled + span,
.notification-weekday-checkbox.disabled + span {
  color: #aaaaaa;
}

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

.modal-content-empty-loader-box {
  padding: 1rem;
}

#add-project-date-range-picker,
#modify-project-date-range-picker,
#export-project-date-range-picker {
  display: none;
}

.easepick-wrapper {
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3rem 0;
}

#add-project-date-range-container.disabled,
#modify-project-date-range-container.disabled {
  display: none;
}

input:disabled,
select:disabled {
  opacity: 0.5;
}
input:disabled:hover,
select:disabled:hover {
  cursor: auto !important;
}

.styled-select {
  display: flex;
  list-style-type: none;
}
.styled-select.narrow > label span:not(:first-of-type) {
  font-size: 1.5rem;
}
.styled-select.narrow-2 > label {
  padding: 0.7rem 0.5rem;
}
.styled-select.narrow-2 > label span {
  transform: scaleX(0.95);
}
.styled-select.wide > label {
  max-width: none !important;
}
.styled-select:not(.narrow) > label {
  max-width: 15rem;
}
.styled-select.disabled label {
  opacity: 0.5;
  cursor: auto !important;
}
.styled-select label {
  padding: 0.7rem 1.4rem;
  background-color: #aaaaaa;
  border-radius: 1rem;
  text-align: center;
  transition: all 0.1s ease-in-out;
}
.styled-select label span {
  display: block;
  text-align: center;
}
.styled-select label.checked {
  background-color: #6A2C55;
  color: #fff;
}
.styled-select label:not(:first-of-type) {
  margin-left: 0.5rem;
}
.styled-select label:hover {
  cursor: pointer;
}
.styled-select.me-a-import-constraint-connector {
  gap: 0.1rem;
  width: 25rem;
  flex-wrap: wrap;
  justify-content: center;
}
.styled-select.me-a-import-constraint-connector.disabled {
  opacity: 0.5;
}
.styled-select.me-a-import-constraint-connector div {
  margin: 0;
  background-color: #aaaaaa;
  border-radius: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1.25rem;
  background-position: center;
  background-size: 70%;
  background-repeat: no-repeat;
}
.styled-select.me-a-import-constraint-connector div.checked {
  background-color: #6A2C55;
  color: #fff;
}
.styled-select.me-a-import-constraint-connector div:hover {
  cursor: pointer;
}
.styled-select.me-a-import-constraint-connector div.equal {
  background-image: url("../img/math/equal.svg");
}
.styled-select.me-a-import-constraint-connector div.not-equal {
  background-image: url("../img/math/notequal.svg");
}
.styled-select.me-a-import-constraint-connector div.greater {
  background-image: url("../img/math/greater.svg");
}
.styled-select.me-a-import-constraint-connector div.greater-equal {
  background-image: url("../img/math/greaterequal.svg");
}
.styled-select.me-a-import-constraint-connector div.smaller {
  background-image: url("../img/math/less.svg");
}
.styled-select.me-a-import-constraint-connector div.smaller-equal {
  background-image: url("../img/math/lessequal.svg");
}

.narrow-text {
  font-stretch: condensed;
}

.range-tradeoff {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.styled-range-slider {
  accent-color: #6A2C55;
}

.modal form .input-with-icon {
  position: relative;
  display: inline-block;
  width: 100%;
}
.modal form .input-with-icon input[type=text] {
  padding-left: 2.5em;
  width: 100%;
  box-sizing: border-box;
}
.modal form .input-with-icon .icon {
  position: absolute;
  left: 0.6em;
  top: 50%;
  transform: translateY(-50%);
  height: 1.5em;
  width: auto;
  pointer-events: none;
  opacity: 0.7;
  filter: invert(70%) sepia(0%) saturate(0%) brightness(90%) contrast(95%);
}

.create-container-inline {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}
.create-container-inline div {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.create-container-inline div input,
.create-container-inline div select {
  margin: 0 !important;
  height: 4rem !important;
}

.create-container-in-select {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.create-container-in-select input[type=text] {
  max-width: 14rem;
}
.create-container-in-select.narrow {
  gap: 0.2rem !important;
  justify-content: space-between;
}
.create-container-in-select.narrow input[type=text] {
  max-width: 8rem;
}
.create-container-in-select.narrow .custom-select {
  max-width: 12rem;
}
.create-container-in-select.narrow > input, .create-container-in-select.narrow > div {
  padding: 0.1rem !important;
}
.create-container-in-select.narrow > input {
  padding-left: 1rem !important;
}
.create-container-in-select input {
  margin: 0 !important;
  height: 3rem !important;
  border: none !important;
}
.create-container-in-select span {
  padding: 0.4rem 0.7rem;
  font-size: 1.2rem;
}

td.two-horizontal-select {
  display: flex;
}
td.two-horizontal-select div:first-child {
  flex: 1;
}

.custom-select {
  position: relative;
}
.custom-select.limit-width {
  max-width: calc(100% - 1px);
  margin: 0 auto;
}
.custom-select .string-icon::before,
.custom-select .integer-icon::before,
.custom-select .float-icon::before,
.custom-select .date-icon::before {
  height: 2rem;
  width: 2rem;
}
.custom-select .string-icon::before {
  content: url("/static/img/String.svg");
  filter: brightness(0) saturate(100%) invert(28%) sepia(53%) saturate(2066%) hue-rotate(258deg) brightness(95%) contrast(97%);
}
.custom-select .integer-icon::before {
  content: url("/static/img/Integer.svg");
  filter: brightness(0) saturate(100%) invert(19%) sepia(97%) saturate(4196%) hue-rotate(199deg) brightness(101%) contrast(104%);
}
.custom-select .float-icon::before {
  content: url("/static/img/Float.svg");
  filter: brightness(0) saturate(100%) invert(55%) sepia(79%) saturate(786%) hue-rotate(119deg) brightness(96%) contrast(107%);
}
.custom-select .date-icon::before {
  content: url("/static/img/Date.svg");
  filter: brightness(0) saturate(100%) invert(84%) sepia(84%) saturate(611%) hue-rotate(2deg) brightness(103%) contrast(102%);
}
.custom-select.custom-select-date-format {
  width: 10rem;
}
.custom-select .flaskSelect-searchBox {
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.2rem 1.4rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.custom-select .flaskSelect-searchBox img {
  height: 1.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
.custom-select .flaskSelect-searchBox:hover {
  cursor: pointer;
}
.custom-select .flaskSelect-searchBox.disabled {
  opacity: 0.5;
}
.custom-select .flaskSelect-searchBox span {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  height: 1.75rem;
}
.custom-select .flaskSelect-dropDown {
  position: absolute;
  top: 4.3rem;
  left: 0rem;
  width: 100%;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: #1A1A1A;
  overflow: hidden;
  box-sizing: content-box;
  display: none;
  z-index: 100;
  overflow: auto;
}
.custom-select .flaskSelect-dropDown label {
  flex-direction: column;
  justify-content: space-around;
  gap: 0 !important;
}
.custom-select .flaskSelect-dropDown label span {
  display: block;
  text-align: center;
}
.custom-select .flaskSelect-dropDown label span:first-child {
  font-weight: bold;
  font-size: 1.3rem;
}
.custom-select .flaskSelect-dropDown label span:last-child {
  font-size: 1rem;
}
.custom-select .flaskSelect-dropDown.show {
  display: block;
}
.custom-select .flaskSelect-dropDown div:not(.flaskSelect-dropDown),
.custom-select .flaskSelect-dropDown label {
  width: 100%;
  height: 3.5rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
  padding: 0rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.custom-select .flaskSelect-dropDown div:not(.flaskSelect-dropDown):hover,
.custom-select .flaskSelect-dropDown label:hover {
  background-color: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.custom-select .flaskSelect-dropDown div:not(.flaskSelect-dropDown).add-import-column-main,
.custom-select .flaskSelect-dropDown label.add-import-column-main {
  background-color: #6A2C55;
  color: #fff;
}
.custom-select .flaskSelect-dropDown div:not(.flaskSelect-dropDown).add-import-column-main::after,
.custom-select .flaskSelect-dropDown label.add-import-column-main::after {
  content: url("/static/img/Main.svg");
  height: 2rem;
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
.custom-select .flaskSelect-dropDown div:not(.flaskSelect-dropDown).highlight-1, .custom-select .flaskSelect-dropDown div:not(.flaskSelect-dropDown).highlight-2,
.custom-select .flaskSelect-dropDown label.highlight-1,
.custom-select .flaskSelect-dropDown label.highlight-2 {
  color: #000;
}
.custom-select .flaskSelect-dropDown div:not(.flaskSelect-dropDown).highlight-1,
.custom-select .flaskSelect-dropDown label.highlight-1 {
  background-color: #00E6A8;
}
.custom-select .flaskSelect-dropDown div:not(.flaskSelect-dropDown).highlight-2,
.custom-select .flaskSelect-dropDown label.highlight-2 {
  background-color: #7ff2d3;
}
.custom-select .flaskSelect-dropDown .flaskSelect-searchBox {
  padding: 0rem 0.2rem !important;
  justify-content: center;
}
.custom-select .flaskSelect-dropDown .flaskSelect-searchBox span {
  display: block;
  text-align: center;
}
.custom-select .flaskSelect-dropDown .flaskSelect-searchBox img {
  display: none;
}

#mt-form-report-builder {
  /* Container */
  /* Header row (A, B, C...) */
  /* Main grid */
  /* Top-left corner */
  /* Column headers (A, B, C...) */
  /* Row numbers */
  /* Block anchor (start of table) */
  /* Block members (metrics) */
  /* Variables */
  /* ========================= */
  /*      Toolbar Wrapper      */
  /* ========================= */
  /* ========================= */
  /*      Sections             */
  /* ========================= */
  /* Section title */
  /* ========================= */
  /*      Button Groups        */
  /* ========================= */
  /* ========================= */
  /*      Buttons              */
  /* ========================= */
  /* ========================= */
  /*      Block Type Colors    */
  /* ========================= */
  /* Optional visual grouping */
  /* CONFIG PANEL */
  /* CANVAS */
  /* GRID */
  /* CELL INFO PANEL */
  /* HEADERS */
  /* CELLS */
  /* FILE INPUT */
  /* STATES */
  /* UTILITY */
}
#mt-form-report-builder .builder-canvas-container {
  overflow: auto;
  border: 1px solid #ccc;
  background: white;
  max-height: 50rem;
}
#mt-form-report-builder .builder-canvas-container::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
}
#mt-form-report-builder .builder-canvas-container::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
}
#mt-form-report-builder .builder-canvas-container::-webkit-scrollbar-track {
  background: transparent;
}
#mt-form-report-builder .builder-grid-header {
  display: grid;
  grid-template-columns: 4rem repeat(50, 10rem);
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 #ccc;
}
#mt-form-report-builder .builder-grid {
  display: grid;
  grid-template-columns: 4rem repeat(50, 10rem);
}
#mt-form-report-builder .builder-grid-header,
#mt-form-report-builder .builder-grid {
  min-width: max-content;
}
#mt-form-report-builder .corner {
  width: 4rem;
  height: 3rem;
}
#mt-form-report-builder .builder-grid-header .col {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 6px;
}
#mt-form-report-builder .row-header {
  width: 4rem;
  height: 3rem;
  text-align: center;
  font-size: 1.2rem;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  line-height: 3rem;
}
#mt-form-report-builder .cell {
  width: 10rem;
  height: 3rem;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.5rem;
  font-size: 1.2rem;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}
#mt-form-report-builder .cell:hover {
  background: rgba(255, 255, 255, 0.04);
}
#mt-form-report-builder .cell.active {
  background: rgba(74, 140, 255, 0.2);
  outline: 2px solid #4a8cff;
}
#mt-form-report-builder .cell.block-anchor {
  background: rgba(74, 140, 255, 0.25);
  font-weight: bold;
}
#mt-form-report-builder .cell.block-member {
  background: rgba(74, 140, 255, 0.15);
}
#mt-form-report-builder .cell.variable {
  background: rgba(140, 120, 255, 0.15);
}
#mt-form-report-builder .builder-grid > * {
  box-sizing: border-box;
}
#mt-form-report-builder .builder-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.2rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.5rem;
  background: #23262b;
}
#mt-form-report-builder .builder-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
#mt-form-report-builder .builder-section .title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #666;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
#mt-form-report-builder #mt-report-builder-download-container {
  margin-bottom: 1rem;
}
#mt-form-report-builder .builder-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#mt-form-report-builder .builder-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #23262b;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
  transition: all 0.15s ease;
  cursor: pointer;
}
#mt-form-report-builder .builder-btn:hover {
  background: #2a2e34;
  border-color: rgba(255, 255, 255, 0.12);
}
#mt-form-report-builder .builder-btn.active {
  background: rgba(74, 140, 255, 0.15);
  color: #4a8cff;
  border-color: rgba(74, 140, 255, 0.4);
}
#mt-form-report-builder .builder-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#mt-form-report-builder .form-button.secondary {
  background: transparent;
  color: #333;
}
#mt-form-report-builder .hidden-download {
  display: none;
}
#mt-form-report-builder .builder-btn[data-block] {
  background: rgba(74, 140, 255, 0.15);
  border-color: transparent;
}
#mt-form-report-builder .builder-btn[data-block]:hover {
  background: rgba(74, 140, 255, 0.25);
}
#mt-form-report-builder .builder-btn[data-metric] {
  background: rgba(52, 211, 153, 0.12);
}
#mt-form-report-builder .builder-btn[data-metric]:hover {
  background: rgba(52, 211, 153, 0.2);
}
#mt-form-report-builder .builder-btn[data-variable] {
  background: rgba(140, 120, 255, 0.15);
}
#mt-form-report-builder .builder-btn[data-variable]:hover {
  background: rgba(140, 120, 255, 0.25);
}
#mt-form-report-builder .builder-config {
  display: flex;
  gap: 1.5rem;
  align-items: flex-end;
  padding: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  background: #23262b;
  border-radius: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}
#mt-form-report-builder .config-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 220px;
}
#mt-form-report-builder .config-section .title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}
#mt-form-report-builder #config-apply,
#mt-form-report-builder #config-cancel {
  cursor: pointer;
  padding: 0.7rem 1.4rem;
  background-color: #aaaaaa;
  border-radius: 1rem;
  border: none;
}
#mt-form-report-builder #config-apply {
  background-color: #6A2C55;
  color: #fff;
}
#mt-form-report-builder .display-none {
  display: none !important;
}
#mt-form-report-builder .builder-canvas-container {
  background: #1b1d21;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  overflow: auto;
  max-height: 50rem;
}
#mt-form-report-builder .builder-grid {
  display: grid;
  grid-template-columns: 4rem repeat(50, 10rem);
}
#mt-form-report-builder .builder-grid-header {
  display: grid;
  grid-template-columns: 4rem repeat(50, 10rem);
  background: #23262b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#mt-form-report-builder #cell-info-panel {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 6rem;
  box-sizing: border-box;
}
#mt-form-report-builder .cell-info-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  flex: 1;
}
#mt-form-report-builder .cell-info-label {
  font-size: 1.2rem;
  /* 🔥 smaller like content */
  flex-shrink: 0;
}
#mt-form-report-builder #cell-info-content {
  font-size: 1.2rem;
  white-space: nowrap;
  /* 🔥 prevents line break */
  overflow: hidden;
  text-overflow: ellipsis;
}
#mt-form-report-builder #cell-info-undo {
  display: flex;
  align-items: center;
  /* vertical center */
  justify-content: center;
  /* horizontal center */
  height: 3.2rem;
  font-size: 1.2rem;
  min-width: 8rem;
  padding: 0.7rem 1.4rem;
  background-color: #aaaaaa;
  border-radius: 1rem;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
#mt-form-report-builder .row-header {
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  line-height: 3rem;
  font-size: 1.2rem;
}
#mt-form-report-builder .col {
  text-align: center;
  font-weight: bold;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  padding: 5px;
}
#mt-form-report-builder .cell {
  border: 1px solid rgba(255, 255, 255, 0.04);
  height: 3rem;
  padding: 0.5rem;
  font-size: 1.2rem;
  cursor: text;
}
#mt-form-report-builder .cell.highlight {
  outline-offset: -2px;
  transition: all 0.2s ease;
}
#mt-form-report-builder .cell:focus {
  outline: 2px solid #339af0;
}
#mt-form-report-builder input[type=file] {
  background: #23262b;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 0.5rem;
  padding: 0.6rem;
}
#mt-form-report-builder .display-none {
  display: none;
}
#mt-form-report-builder .builder-grid-header {
  display: grid;
  grid-template-columns: 4rem repeat(50, 10rem);
  position: sticky;
  top: 0;
  z-index: 2;
  background: #23262b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
#mt-form-report-builder .builder-grid-header .corner {
  background: #23262b;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
#mt-form-report-builder .builder-grid-header .col {
  background: #23262b;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
#mt-form-report-builder .row-header {
  width: 4rem;
  height: 3rem;
  background: #23262b;
  color: rgba(255, 255, 255, 0.6);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  line-height: 3rem;
  text-align: center;
  font-size: 1.2rem;
}
#mt-form-report-builder .cell {
  width: 10rem;
  height: 3rem;
  background: #1f2227;
  color: rgba(255, 255, 255, 0.9);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding: 0.5rem;
  font-size: 1.2rem;
  cursor: text;
  overflow: hidden;
  white-space: nowrap;
}
#mt-form-report-builder .cell:hover {
  background: rgba(255, 255, 255, 0.04);
}
#mt-form-report-builder .cell:focus {
  outline: 2px solid #4a8cff;
}
#mt-form-report-builder .cell.active {
  background: rgba(74, 140, 255, 0.2);
  outline: 2px solid #4a8cff;
}
#mt-form-report-builder .cell.highlight {
  outline: 2px dashed #4a8cff;
  outline-offset: -2px;
  background: rgba(74, 140, 255, 0.15);
  transition: all 0.2s ease;
}
#mt-form-report-builder .cell.block-anchor {
  background: rgba(74, 140, 255, 0.25);
  font-weight: 700;
}
#mt-form-report-builder .cell.block-member {
  background: rgba(74, 140, 255, 0.15);
}
#mt-form-report-builder .cell.variable {
  background: rgba(140, 120, 255, 0.15);
}

#project-destinations .ticket-search,
#modify-project-destinations .ticket-search {
  margin-bottom: 10px;
}
#project-destinations .ticket-list,
#modify-project-destinations .ticket-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 15.5rem;
  /* 3 rows + gaps */
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 1rem;
  padding: 1rem;
}
#project-destinations .ticket-item,
#modify-project-destinations .ticket-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 4.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  /* ✅ pointer on hover */
  transition: 0.15s;
}
#project-destinations .ticket-item:hover,
#modify-project-destinations .ticket-item:hover {
  background: #f5f5f5;
}
#project-destinations .ticket-item.selected,
#modify-project-destinations .ticket-item.selected {
  background: #e9f2ff;
  border: 1px solid #2684FF;
  box-shadow: 0 0 0 1px #2684FF inset;
}
#project-destinations .ticket-empty,
#modify-project-destinations .ticket-empty {
  text-align: center;
  color: #888;
  padding: 10px;
  font-size: 13px;
}
#project-destinations .tool-icon,
#project-destinations .ticket-icon,
#modify-project-destinations .tool-icon,
#modify-project-destinations .ticket-icon {
  width: 1.5rem;
  height: 1.5rem;
}
#project-destinations .ticket-code,
#modify-project-destinations .ticket-code {
  font-weight: 600;
}
#project-destinations .ticket-name,
#modify-project-destinations .ticket-name {
  flex: 1;
  font-size: 1.5rem;
  color: #555;
}
#project-destinations .ticket-left,
#modify-project-destinations .ticket-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media only screen and (aspect-ratio: 1/1) {
  /* square viewport styles for video recording */
  body[data-video-mode=true] .styled-select label {
    padding: 1.3rem 1.8rem;
    border-radius: 1.5rem;
    max-width: 20rem !important;
  }
  body[data-video-mode=true] .styled-select.narrow-2 label {
    padding: 1.3rem 0.5rem;
  }
  body[data-video-mode=true] .removal-checkbox,
  body[data-video-mode=true] .add-project-import-checkbox,
  body[data-video-mode=true] .add-agent-import-checkbox,
  body[data-video-mode=true] .add-agent-checkbox,
  body[data-video-mode=true] .modify-project-import-checkbox,
  body[data-video-mode=true] .modify-instance-agent-relationship-checkbox {
    width: 3.6rem;
    height: 3.6rem;
    margin-right: 2rem;
  }
  body[data-video-mode=true] #addProjectAssignImportsContainer .import-row > p,
  body[data-video-mode=true] #modifyProjectAssignImportsContainer .import-row > p {
    padding: 2rem !important;
    border-radius: 1.5rem !important;
  }
  body[data-video-mode=true] #addProjectAssignImportsContainer .import-row > p .import-spec-header-highlight,
  body[data-video-mode=true] #modifyProjectAssignImportsContainer .import-row > p .import-spec-header-highlight {
    padding: 1rem;
    color: black;
    border-radius: 1rem;
    margin-left: 2rem;
  }
  body[data-video-mode=true] #addProjectAssignImportsContainer .import-row > p .import-spec-header-highlight img,
  body[data-video-mode=true] #modifyProjectAssignImportsContainer .import-row > p .import-spec-header-highlight img {
    width: 4rem !important;
    height: 4rem !important;
  }
  body[data-video-mode=true] #addProjectAssignImportsContainer .import-row > p .import-row-headline-button-container,
  body[data-video-mode=true] #modifyProjectAssignImportsContainer .import-row > p .import-row-headline-button-container {
    gap: 2rem;
  }
  body[data-video-mode=true] #addProjectAssignImportsContainer .import-row > p .import-row-headline-button-container span,
  body[data-video-mode=true] #modifyProjectAssignImportsContainer .import-row > p .import-row-headline-button-container span {
    font-size: 3rem !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 1.5rem !important;
  }
  body[data-video-mode=true] .small-button,
  body[data-video-mode=true] .small-button-on-white,
  body[data-video-mode=true] .small-button-with-icon {
    font-size: 3.5rem !important;
    border-radius: 2rem !important;
  }
  body[data-video-mode=true] .small-icon-button {
    padding: 1rem;
  }
  body[data-video-mode=true] .small-icon-button img {
    width: 5rem;
  }
  body[data-video-mode=true] .custom-select .flaskSelect-searchBox {
    border-radius: 2rem;
    padding: 2rem 2.4rem;
    font-size: 3.5rem;
    line-height: 4.1rem;
    gap: 2rem;
  }
  body[data-video-mode=true] .custom-select .flaskSelect-searchBox img {
    height: 3rem;
  }
  body[data-video-mode=true] .custom-select .flaskSelect-searchBox span {
    gap: 1rem;
    height: 4.1rem;
  }
  body[data-video-mode=true] .custom-select .flaskSelect-dropDown {
    top: 7rem;
    border-radius: 2rem;
    height: 35rem !important;
  }
  body[data-video-mode=true] .custom-select .flaskSelect-dropDown .create-container-in-select input[type=text] {
    max-width: 30rem;
  }
  body[data-video-mode=true] .custom-select .flaskSelect-dropDown .create-container-in-select .small-button-on-white {
    font-size: 2.5rem !important;
    padding: 0.5rem 0.6rem;
  }
  body[data-video-mode=true] .custom-select .flaskSelect-dropDown div:not(.flaskSelect-dropDown),
  body[data-video-mode=true] .custom-select .flaskSelect-dropDown label {
    height: 7rem;
    font-size: 3.5rem;
    line-height: 4.5rem;
    padding: 0rem 3rem;
    gap: 1rem;
  }
  body[data-video-mode=true] #dropImportCSV label {
    font-size: 3.5rem;
  }
  body[data-video-mode=true] .range-tradeoff {
    height: 7rem !important;
  }
  body[data-video-mode=true] #modal-container-agent-magic-tool form > div .form-group-headline::before {
    height: 0.5rem !important;
    margin: 4rem 0rem 4rem 0rem;
  }
}
@media only screen and (min-width: 1600px) and (min-aspect-ratio: 15/9) and (max-aspect-ratio: 17/9) {
  /* 16/9 view viewport styles for video recording */
  body[data-video-mode=true] .custom-select .flaskSelect-searchBox {
    padding: 1.7rem 1.3rem;
    font-size: 2rem;
    line-height: 2rem;
    border-radius: 1.5rem;
  }
  body[data-video-mode=true] .custom-select .flaskSelect-searchBox img {
    height: 2rem;
  }
  body[data-video-mode=true] .custom-select .flaskSelect-searchBox span {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    height: 1.75rem;
  }
  body[data-video-mode=true] .small-button,
  body[data-video-mode=true] .small-button-on-white {
    padding: 0.875rem 2rem;
    border-radius: 1rem;
    font-size: 2rem;
    line-height: 1.5;
  }
}
.header {
  grid-column: sidebar-start/full-end;
  grid-row: 1/1;
  font-size: 2rem;
  font-weight: bold;
  position: fixed;
  height: 5vh;
  width: 100%;
}
.header:has(#logout-button) {
  height: 3vh;
}
.header:not(.dark) {
  background-color: #FFFFFF;
}
.header:not(.dark) a {
  color: #FFFFFF;
}
.header.dark {
  background-color: #221E26;
  border-bottom: 1px solid #FFFFFF;
}
.header.dark .logo {
  background-image: url("../img/logo-white.svg");
}
.header.dark a {
  color: #FFFFFF;
}
.header.dark .userContainer img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%) !important;
}
.header .header-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .header-container.slim {
  grid-column: center-start/center-end;
  grid-row: 1/1;
}

.header .logo {
  display: inline-block;
  height: 5vh;
  width: 11.25vh;
  background-image: url("../img/logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.header .logo:hover {
  cursor: pointer;
}

.header .logoContainer {
  height: 5vh;
  display: flex;
  justify-content: left;
  align-items: center;
}
.header .logoContainer .header-dropdown {
  position: relative;
}
.header .logoContainer .header-dropdown .header-dropdown-card {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  min-width: 57rem;
  background: rgba(20, 20, 24, 0.8);
  backdrop-filter: blur(2.5rem);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  border-radius: 2rem;
  border-radius: 2rem;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  z-index: 100;
}
.header .logoContainer .header-dropdown .header-dropdown-card .header-dropdown-trigger {
  opacity: 0;
  transition: opacity 10ms ease;
}
.header .logoContainer .header-dropdown .header-dropdown-trigger {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.5rem;
  padding: 1.5rem 2rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.header .logoContainer .header-dropdown .header-dropdown-trigger:hover {
  color: white;
}
.header .logoContainer .header-dropdown .header-dropdown-trigger .chevron {
  width: 1.6rem;
  height: 1.6rem;
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 2;
  fill: none;
  transition: transform 0.2s ease, stroke 0.2s ease;
}
.header .logoContainer .header-dropdown .header-dropdown-trigger a {
  text-decoration: none;
}
.header .logoContainer .header-dropdown .header-dropdown-content {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  padding: 0 2rem 2rem 1.4rem;
  margin-top: 2rem;
}
.header .logoContainer .header-dropdown .header-dropdown-items {
  min-width: 20rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.header .logoContainer .header-dropdown .header-dropdown-items p {
  margin: 0 0 0.8rem;
  padding-left: 2rem;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: "Golos Text", "Roboto", Arial;
}
.header .logoContainer .header-dropdown .header-dropdown-items a {
  padding: 0.8rem 1rem;
  border-radius: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 400;
  font-size: 1.6rem;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
  position: relative;
  padding-left: 2rem;
}
.header .logoContainer .header-dropdown .header-dropdown-items a:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  transform: translateX(0.2rem);
}
.header .logoContainer .header-dropdown .header-dropdown-items a.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 500;
}
.header .logoContainer .header-dropdown.open .header-dropdown-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.header .logoContainer .header-dropdown.open .header-dropdown-card .header-dropdown-trigger {
  opacity: 0.2;
  transition-delay: 180ms;
}
.header .logoContainer .direct-link a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.5rem;
  padding: 1.5rem 2rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.header .logoContainer .direct-link a:hover {
  color: white;
}

.header .userContainer {
  height: 5vh;
  font-size: 1.2rem;
}
.header .userContainer .user {
  display: flex;
  justify-content: end;
  align-items: center;
  height: 100%;
}
.header .userContainer .user span {
  display: flex;
  align-items: center;
  padding-right: 1rem;
}
.header .userContainer .user span a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.header .userContainer .user span:not(.readonly):hover {
  cursor: pointer;
}
.header .userContainer .user img {
  width: 2.5rem;
  padding: 0.4rem;
  filter: brightness(0) saturate(100%) invert(18%) sepia(3%) saturate(5157%) hue-rotate(209deg) brightness(89%) contrast(78%);
}

.header:has(#logout-button) .logoContainer,
.header:has(#logout-button) .logo,
.header:has(#logout-button) .userContainer {
  height: 3vh !important;
}

#logout {
  width: 3rem;
  height: 3rem;
  margin-right: 3rem;
}

@media only screen and (max-width: 2000px) {
  .header {
    height: 5vh;
  }
  .header .logo {
    height: 5vh;
    width: 15.75vh;
  }
  .header .logoContainer {
    height: 5vh;
  }
  .header:has(#logout-button) {
    height: 3vh !important;
  }
  .header:has(#logout-button) .logoContainer,
  .header:has(#logout-button) .logo,
  .header:has(#logout-button) .userContainer {
    height: 3vh !important;
  }
}
@media only screen and (max-width: 576px) {
  .header {
    height: 7vh;
  }
  .header .logo {
    height: 7vh;
    width: 15.75vh;
  }
  .header .logoContainer {
    height: 7vh;
  }
  .header .logoContainer .header-dropdown .header-dropdown-card {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
    padding-top: 6rem;
    overflow-y: auto;
  }
  .header .logoContainer .header-dropdown .header-dropdown-card > .header-dropdown-trigger {
    padding-left: 4rem;
    font-size: 1.8rem;
  }
  .header .logoContainer .header-dropdown .header-dropdown-content {
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
  }
  .header .logoContainer .header-dropdown .header-dropdown-items {
    min-width: 0;
    width: 100%;
  }
  .header .logoContainer .header-dropdown.open > .header-dropdown-trigger {
    display: none;
  }
  .header .logoContainer .header-dropdown.open .header-dropdown-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .header .userContainer img {
    width: 3rem !important;
  }
  .header:has(#logout-button) {
    height: 3vh !important;
  }
  .header:has(#logout-button) .logoContainer,
  .header:has(#logout-button) .logo,
  .header:has(#logout-button) .userContainer {
    height: 3vh !important;
  }
}
@media only screen and (min-width: 1600px) and (min-aspect-ratio: 15/9) and (max-aspect-ratio: 17/9) {
  /* 16/9 view viewport styles for video recording */
  body[data-video-mode=true] .header .logo {
    width: 15.75vh;
  }
}
#imports-container {
  display: grid;
  grid-template-rows: 7vh 88vh;
  grid-template-columns: [left-start] 1fr [left-end right-start] 30rem [right-end];
  padding: 0 1rem;
}
#imports-container.loading {
  background: linear-gradient(90deg, #2D2832 25%, #222 37%, #2D2832 63%);
  background-size: 400% 100%;
  animation: loadingShimmer 2s ease-in-out infinite;
}
#imports-container #imports-preview {
  display: none;
}
#imports-container #imports-preview .previewContainer {
  font-size: 1.2rem;
  background-color: #221E26;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex-grow: 1;
}
#imports-container #imports-preview .previewContainer h3 {
  font-size: 1.5rem;
  padding: 2rem 0;
}
#imports-container #imports-preview .previewContainer h3 span:not(:first-child) {
  margin-left: 1rem;
}
#imports-container #imports-preview .previewContainer h3 .preview-show-all-rows-button {
  background-color: #221E26;
}
#imports-container #imports-preview .previewContainer .fixTableContainer {
  overflow-x: auto;
  overflow-y: hidden;
  /* ✅ prevent vertical scroll here */
  flex-shrink: 0;
  /* ✅ never collapse in height */
  scrollbar-gutter: stable;
}
#imports-container #imports-preview .previewContainer .scrollContainer {
  overflow-x: hidden;
  overflow-y: scroll;
  min-height: 0;
  flex-grow: 1;
  /* Firefox */
  scrollbar-width: none;
  /* IE/Edge (old versions) */
  -ms-overflow-style: none;
}
#imports-container #imports-preview .previewContainer table {
  width: auto;
  min-width: max-content;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: left;
}
#imports-container #imports-preview .previewContainer table tr {
  white-space: nowrap;
}
#imports-container #imports-preview .previewContainer table tr:nth-child(odd) {
  background-color: #221E26;
}
#imports-container #imports-preview .previewContainer table tr .columnsCell {
  background-color: #6A2C55;
  border-radius: 1rem;
  margin: 0.5rem auto;
  padding: 0.5rem;
  text-align: center;
}
#imports-container #imports-preview .previewContainer table tr .columnsCell.main {
  background-color: #F2E9EE;
  color: #222;
}
#imports-container #imports-preview .previewContainer table tr .columnsCell.mapping {
  background-color: #A8514A;
  color: black;
}
#imports-container #imports-preview .previewContainer table tr th,
#imports-container #imports-preview .previewContainer table tr td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 15rem;
  max-width: 15rem;
}
#imports-container #imports-preview .previewContainer table tr th.intValue, #imports-container #imports-preview .previewContainer table tr th.currencyValue, #imports-container #imports-preview .previewContainer table tr th.percentageValue, #imports-container #imports-preview .previewContainer table tr th.floatValue,
#imports-container #imports-preview .previewContainer table tr td.intValue,
#imports-container #imports-preview .previewContainer table tr td.currencyValue,
#imports-container #imports-preview .previewContainer table tr td.percentageValue,
#imports-container #imports-preview .previewContainer table tr td.floatValue {
  text-align: right;
}
#imports-container #imports-preview .previewContainer table tr th.undefinedValue,
#imports-container #imports-preview .previewContainer table tr td.undefinedValue {
  color: #aaaaaa;
}
#imports-container.preview-active {
  grid-template-rows: 7vh 40vh 48vh;
}
#imports-container.preview-active #imports-preview {
  display: flex;
  flex-direction: column;
  grid-column: left-start/right-end;
  grid-row: 3/3;
}
#imports-container .content-header {
  padding: 0 2rem;
  grid-column: left-start/right-end;
  grid-row: 1/1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#imports-container .content-header h1 {
  display: flex;
  align-items: center;
}
#imports-container .content-header h1 img {
  margin-right: 1rem;
  width: 3rem;
}
#imports-container .content-header h1 span {
  font-size: 3rem;
}
#imports-container .content-header h1 .importSpecs {
  padding: 0.5rem;
  color: black;
  background-color: #A8514A;
  border-radius: 0.5rem;
  margin-left: 1rem;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
}
#imports-container .content-header h1 .importSpecs img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(3%) saturate(5157%) hue-rotate(209deg) brightness(89%) contrast(78%);
  width: 2rem;
  margin: 0;
}
#imports-container .content-header h1 .importSpecs span {
  font-size: 1.3rem !important;
  line-height: 2rem;
}
#imports-container .content-header img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#imports-container .content-header #scheduleSpecs {
  align-items: center;
  background-color: #6A2C55;
  padding: 0 1.5rem;
  padding-right: 5rem;
  margin-right: -5rem;
  border-radius: 2rem;
  display: none;
}
#imports-container .content-header #scheduleSpecs.show {
  display: flex;
}
#imports-container .content-header #scheduleSpecs span:first-of-type {
  font-family: "Fira Code", Consolas, Monaco, "Courier New", monospace;
}
#imports-container .imports-existing {
  padding: 2rem;
  padding-top: 0;
  grid-column: left-start/left-end;
  grid-row: 2/2;
  overflow: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#imports-container .imports-existing #progress-bar-container progress {
  display: block;
  width: 100%;
}
#imports-container .imports-existing #progress-bar-container .progressContainer {
  position: relative;
  width: 100%;
  height: 2.5rem;
  border-radius: 1rem;
  overflow: hidden;
  margin: 1em 0;
}
#imports-container .imports-existing #progress-bar-container .progressContainer .progressBar {
  height: 100%;
  padding-left: 1rem;
  color: white;
  font-weight: bold;
  transition: width 0.4s ease;
}
#imports-container .imports-existing #progress-bar-container .progressContainer .progressBar.wait .progressLabel {
  opacity: 0.5;
  font-weight: regular;
}
#imports-container .imports-existing #progress-bar-container .progressContainer .progressBar.upload {
  background-color: #6A2C55;
}
#imports-container .imports-existing #progress-bar-container .progressContainer .progressBar.mapping {
  background-color: #00C851;
}
#imports-container .imports-existing #progress-bar-container .progressContainer .progressBar.drop {
  background-color: #A8514A;
}
#imports-container .imports-existing #progress-bar-container .progressContainer .progressBar .progressLabel {
  position: absolute;
  color: white;
  font-weight: bold;
}
#imports-container .imports-existing .sticky {
  position: sticky;
  top: 0;
  background-color: #221E26;
  padding-top: 2rem;
  z-index: 100;
  height: 6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
#imports-container .imports-existing .sticky span {
  font-weight: bold;
  font-size: 1.5rem;
}
#imports-container .imports-existing .existingImportFile {
  display: flex;
  width: 100%;
  padding-left: 1rem;
  border-radius: 0.25rem;
}
#imports-container .imports-existing .existingImportFile:nth-child(odd) {
  background-color: #141414;
}
#imports-container .imports-existing .previewClickContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-radius: 1rem;
  flex-grow: 1;
}
#imports-container .imports-existing .previewClickContainer .imports-fileName {
  display: flex;
  position: relative;
  margin-right: 1rem;
}
#imports-container .imports-existing .previewClickContainer .imports-fileName span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 40rem;
  display: inline-block;
}
#imports-container .imports-existing .previewClickContainer .imports-fileName span::after {
  content: attr(data-fulltext);
  /* Use the full text stored in data-fulltext attribute */
  position: absolute;
  bottom: 100%;
  /* Position tooltip above the element */
  left: 0%;
  transform: translateX(-1rem);
  background-color: #4F213F;
  color: #fff;
  padding-left: 1rem;
  border-radius: 4px;
  font-size: 1.2rem;
  pointer-events: none;
  /* Prevent tooltip from capturing pointer events */
  opacity: 0;
  /* Hide tooltip initially */
  transition: opacity 0.2s ease-in-out;
  z-index: 1000;
  margin-bottom: 0;
  top: 0;
  height: 2rem;
}
#imports-container .imports-existing .previewClickContainer .imports-fileName span:hover::after {
  opacity: 1;
}
#imports-container .imports-existing .previewClickContainer > span:last-child {
  display: flex;
  justify-content: flex-end;
  width: 13rem;
}
#imports-container .imports-existing .previewClickContainer:hover {
  cursor: pointer;
  background-color: #4F213F;
}
#imports-container .imports-existing .previewClickContainer.preview {
  background-color: #6A2C55;
}
#imports-container .imports-existing .previewClickContainer.preview .imports-fileName span::after {
  background-color: #6A2C55;
}
#imports-container .imports-existing .previewClickContainer .imports-date-container {
  white-space: nowrap;
}
#imports-container .imports-existing .previewClickContainer .imports-snapshotDate {
  position: relative;
}
#imports-container .imports-existing .previewClickContainer .imports-snapshotDate input[type=date]::-webkit-calendar-picker-indicator {
  display: none;
}
#imports-container .imports-existing .previewClickContainer .imports-snapshotDate input[type=date] {
  appearance: textfield;
  -webkit-appearance: textfield;
  font-family: "Golos Text", sans-serif;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1.2rem;
  border: none;
  outline: none;
  color: white;
  text-align: right;
  height: 3rem;
  margin-top: -1rem;
  margin-bottom: -1rem;
  padding-left: 1rem;
  padding-right: 0.5rem;
}
#imports-container .imports-existing .previewClickContainer .imports-snapshotDate input[type=date]:hover {
  cursor: pointer;
}
#imports-container .imports-existing .previewClickContainer .imports-snapshotDate input[type=date].focus {
  background-color: #221E26;
}
#imports-container .imports-existing .previewClickContainer .imports-snapshotDate input[type=date].loading {
  background: linear-gradient(90deg, #2D2832 25%, #222 37%, #2D2832 63%);
  background-size: 400% 100%;
  animation: loadingShimmer 2s ease-in-out infinite;
}
#imports-container .imports-existing .previewClickContainer .imports-snapshotDate::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background: url("/static/img/snapshot.svg") no-repeat center/contain;
  pointer-events: none;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#imports-container .imports-existing ul {
  list-style-type: none;
  font-size: 1.2rem;
}
#imports-container .imports-existing ul li {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 100%;
  margin: 1rem 0;
}
#imports-container .imports-existing ul li > img {
  height: 2.5rem;
  margin-right: 1rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#imports-container #removeImportFilesForm {
  display: none;
}
#imports-container #removeImportFilesForm.visible {
  display: inline-flex;
  gap: 1rem;
}
#imports-container #selectAllImportFilesButton {
  font-weight: normal;
  text-decoration: underline;
  margin-left: 2rem;
}
#imports-container #checkRemoveImportFiles {
  display: flex;
  align-items: center;
}
#imports-container #checkRemoveImportFiles img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#imports-container .imports-upload {
  padding: 2rem;
  grid-column: right-start/right-end;
  grid-row: 2/2;
  display: flex;
  flex-direction: column;
}
#imports-container .imports-upload form {
  min-height: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
#imports-container .imports-upload form .imports-upload-button-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;
  height: 10rem;
}
#imports-container .imports-upload form .imports-upload-button-box label,
#imports-container .imports-upload form .imports-upload-button-box input {
  flex-grow: 1;
  text-align: center;
  font-size: 1.5rem;
}
#imports-container .imports-upload form .imports-upload-button-box {
  flex-direction: column;
  padding: 2rem 0;
  align-items: stretch;
}
#imports-container .imports-upload form .imports-upload-button-box label {
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #F2E9EE;
  background-color: rgba(0, 0, 0, 0) !important;
}
#imports-container .imports-upload form .imports-upload-button-box label.visible {
  display: inline-flex;
}
#imports-container .imports-upload form .imports-upload-button-box label:hover {
  background: #F2E9EE !important;
  color: #221E26 !important;
}
#imports-container .imports-upload form .imports-upload-button-box input {
  line-height: normal;
  background-color: #F2E9EE !important;
  color: #221E26 !important;
}
#imports-container .imports-upload form .imports-upload-button-box input:hover {
  background: #F2E9EE !important;
  color: #221E26 !important;
}
#imports-container .imports-upload form .imports-upload-button-box label.small-button.visible,
#imports-container .imports-upload form .imports-upload-button-box input {
  border-radius: 5vh !important;
  border: 0.3rem solid #F2E9EE !important;
}
#imports-container .imports-upload form.in-progress {
  display: none;
}
#imports-container .imports-upload .upload-files-inprogress {
  display: none;
}
#imports-container .imports-upload .upload-files-inprogress.show {
  display: block;
}
#imports-container .imports-upload p:not(:first-child) {
  margin-top: 2rem;
}
#imports-container #dropUploadContainer {
  height: 26rem;
  padding: 2rem;
}
#imports-container #dropUploadImports {
  border: 0.3rem solid #F2E9EE;
  border-radius: 1000rem;
  color: #F2E9EE;
  font-size: 2.75rem;
  font-weight: bold;
  height: 22rem;
  margin: 0;
}
#imports-container #dropUploadImports label {
  padding: 0;
}
#imports-container #filesToBeUploaded {
  list-style-type: none;
  font-size: 1.2rem;
  min-height: 0;
  flex-grow: 1;
  overflow-y: auto;
}
#imports-container #filesToBeUploaded li {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 100%;
  margin: 1rem 0;
}
#imports-container #filesToBeUploaded li > span {
  min-width: 0;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #F2E9EE;
}
#imports-container #filesToBeUploaded li > img {
  height: 2.5rem;
  margin-right: 1rem;
  filter: brightness(0) saturate(100%) invert(69%) sepia(39%) saturate(5491%) hue-rotate(122deg) brightness(108%) contrast(101%);
}

.no-bgd {
  background-color: rgba(0, 0, 0, 0) !important;
}

.imports-existing p,
.imports-upload p {
  font-weight: bold;
  font-size: 1.5rem;
}
.imports-existing p:not(:first-child),
.imports-upload p:not(:first-child) {
  margin-top: 3rem;
}

@media only screen and (max-width: 2000px) {
  #imports-container {
    grid-template-rows: 8vh 87vh;
  }
  #imports-container.preview-active {
    grid-template-rows: 8vh 36vh 48vh;
  }
}
@media only screen and (aspect-ratio: 1/1) {
  /* square viewport styles for video recording */
  body[data-video-mode=true] #imports-container {
    grid-template-rows: 12vh 70vh 15vh;
  }
  body[data-video-mode=true] #imports-container .imports-upload {
    grid-row: 3/3;
  }
  body[data-video-mode=true] #imports-container.preview-active {
    grid-template-rows: 12vh 33vh 55vh 0vh;
  }
  body[data-video-mode=true] #imports-container.preview-active .imports-upload {
    display: none;
  }
  body[data-video-mode=true] #imports-container .content-header h1 .importSpecs {
    padding: 1rem !important;
    border-radius: 1rem !important;
    margin-left: 2rem !important;
  }
  body[data-video-mode=true] #imports-container .content-header h1 .importSpecs img {
    width: 4rem !important;
    height: 4rem !important;
  }
  body[data-video-mode=true] #imports-container .content-header h1 .importSpecs span {
    font-size: 3.4rem !important;
  }
  body[data-video-mode=true] #imports-container .content-header #scheduleSpecs {
    font-size: 2rem !important;
    border-radius: 4rem !important;
    padding-right: 7rem !important;
    margin-right: -7rem !important;
  }
  body[data-video-mode=true] #imports-container .content-header #scheduleSpecs .small-icon-button {
    padding: 1rem 1rem !important;
  }
  body[data-video-mode=true] #imports-container .content-header #scheduleSpecs span:first-of-type {
    display: none;
  }
  body[data-video-mode=true] #imports-container .imports-existing {
    padding: 4rem;
    padding-top: 0rem;
    grid-column: left-start/right-end;
    grid-row: 2/2;
    overflow-x: hidden;
  }
  body[data-video-mode=true] #imports-container .imports-existing .sticky {
    margin-bottom: 4rem;
  }
  body[data-video-mode=true] #imports-container .imports-existing .sticky span,
  body[data-video-mode=true] #imports-container .imports-existing ul,
  body[data-video-mode=true] #imports-container .imports-existing p {
    font-size: 3.5rem !important;
  }
  body[data-video-mode=true] #imports-container .imports-existing .imports-status,
  body[data-video-mode=true] #imports-container .imports-existing .imports-filesizeMB,
  body[data-video-mode=true] #imports-container .imports-existing .imports-dimension {
    display: none;
  }
  body[data-video-mode=true] #imports-container .imports-existing .previewClickContainer .imports-fileName span::after {
    font-size: 3.5rem !important;
    height: 6rem;
  }
  body[data-video-mode=true] #imports-container .imports-existing .previewClickContainer .imports-date-container span input {
    font-size: 3.5rem !important;
  }
  body[data-video-mode=true] #imports-container .imports-existing .previewClickContainer .imports-date-container .imports-snapshotDate::before {
    width: 4rem !important;
    height: 4rem !important;
  }
  body[data-video-mode=true] #imports-container .imports-existing #progress-bar-container .progressContainer {
    position: relative;
    height: 6.5rem;
    border-radius: 3rem;
    overflow: hidden;
    margin: 1em 0;
  }
  body[data-video-mode=true] #imports-container .imports-existing #progress-bar-container .progressContainer .progressBar {
    height: 100%;
    padding-left: 2rem;
    color: white;
    font-weight: bold;
    transition: width 0.4s ease;
    font-size: 3.5rem !important;
  }
  body[data-video-mode=true] #imports-container #imports-preview .previewContainer {
    font-size: 3.5rem !important;
  }
  body[data-video-mode=true] #imports-container #imports-preview .previewContainer h3 > span {
    display: none;
  }
  body[data-video-mode=true] #imports-container #imports-preview .previewContainer .fixTableContainer {
    padding-bottom: 1rem;
  }
  body[data-video-mode=true] #imports-container #imports-preview .previewContainer .fixTableContainer::-webkit-scrollbar {
    height: 16px;
    /* 👈 horizontal scrollbar thickness */
  }
  body[data-video-mode=true] #imports-container #imports-preview .previewContainer .fixTable tr:nth-of-type(2),
  body[data-video-mode=true] #imports-container #imports-preview .previewContainer .fixTable tr:nth-of-type(3) {
    display: none;
  }
  body[data-video-mode=true] #imports-container .imports-upload {
    padding: 2rem 0;
    grid-column: left-start/right-end;
    overflow: hidden;
  }
  body[data-video-mode=true] #imports-container .imports-upload .upload-files-form {
    flex-direction: row;
    gap: 1rem;
  }
  body[data-video-mode=true] #imports-container .imports-upload #dropUploadContainer {
    height: 15vh !important;
  }
  body[data-video-mode=true] #imports-container .imports-upload #dropUploadContainer #dropUploadImports {
    height: calc(15vh - 4rem) !important;
    font-size: 4rem !important;
  }
  body[data-video-mode=true] #imports-container .imports-upload #filesToBeUploaded {
    display: none;
  }
  body[data-video-mode=true] #imports-container .imports-upload:has(#clearUploadImport.visible) #dropUploadContainer {
    flex: 0 0 68%;
  }
  body[data-video-mode=true] #imports-container .imports-upload:has(#clearUploadImport.visible) .imports-upload-button-box {
    flex: 0 0 30%;
    flex-grow: 1;
    padding: 2rem 0;
    height: 15vh;
    align-items: stretch;
  }
  body[data-video-mode=true] #imports-container .imports-upload:has(#clearUploadImport.visible) .imports-upload-button-box label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #F2E9EE;
    background-color: rgba(0, 0, 0, 0) !important;
  }
  body[data-video-mode=true] #imports-container .imports-upload:has(#clearUploadImport.visible) .imports-upload-button-box input {
    line-height: normal;
    background-color: #F2E9EE !important;
    color: #221E26 !important;
  }
  body[data-video-mode=true] #imports-container .imports-upload:has(#clearUploadImport.visible) .imports-upload-button-box label.small-button.visible,
  body[data-video-mode=true] #imports-container .imports-upload:has(#clearUploadImport.visible) .imports-upload-button-box input {
    border-radius: 5vh !important;
    border: 0.3rem solid #F2E9EE !important;
  }
  body[data-video-mode=true] #imports-container .imports-upload:not(:has(#clearUploadImport.visible)) #dropUploadContainer {
    flex: 0 0 98%;
  }
  body[data-video-mode=true] #imports-container .imports-upload:not(:has(#clearUploadImport.visible)) .imports-upload-button-box {
    flex: 0 0 0%;
  }
}
@media only screen and (min-width: 1600px) and (min-aspect-ratio: 15/9) and (max-aspect-ratio: 17/9) {
  /* 16/9 view viewport styles for video recording */
  body[data-video-mode=true] #imports-container {
    grid-template-rows: 11vh 82vh;
  }
  body[data-video-mode=true] #imports-container.preview-active {
    grid-template-rows: 11vh 33vh 55vh 0vh;
  }
  body[data-video-mode=true] #imports-container .content-header h1 .importSpecs {
    padding: 1rem !important;
    border-radius: 1rem !important;
    margin-left: 2rem !important;
  }
  body[data-video-mode=true] #imports-container .content-header h1 .importSpecs img {
    width: 3rem !important;
    height: 3rem !important;
  }
  body[data-video-mode=true] #imports-container .content-header h1 .importSpecs span {
    font-size: 2rem !important;
  }
  body[data-video-mode=true] #imports-container .content-header #scheduleSpecs {
    font-size: 2rem !important;
    border-radius: 4rem !important;
    padding-right: 7rem !important;
    margin-right: -7rem !important;
  }
  body[data-video-mode=true] #imports-container .content-header #scheduleSpecs .small-icon-button {
    padding: 1rem 1rem !important;
  }
  body[data-video-mode=true] #imports-container .content-header #scheduleSpecs span:first-of-type {
    display: none;
  }
  body[data-video-mode=true] #imports-container .imports-existing {
    padding: 4rem;
    padding-top: 0rem;
    overflow-x: hidden;
  }
  body[data-video-mode=true] #imports-container .imports-existing .sticky {
    margin-bottom: 4rem;
  }
  body[data-video-mode=true] #imports-container .imports-existing .sticky span,
  body[data-video-mode=true] #imports-container .imports-existing ul,
  body[data-video-mode=true] #imports-container .imports-existing p {
    font-size: 2rem !important;
  }
  body[data-video-mode=true] #imports-container .imports-existing .imports-status,
  body[data-video-mode=true] #imports-container .imports-existing .imports-filesizeMB {
    display: none;
  }
  body[data-video-mode=true] #imports-container .imports-existing .previewClickContainer .imports-fileName span {
    width: 60rem;
  }
  body[data-video-mode=true] #imports-container .imports-existing .previewClickContainer .imports-fileName span::after {
    font-size: 2rem !important;
    height: 4rem;
  }
  body[data-video-mode=true] #imports-container .imports-existing .previewClickContainer .imports-date-container span input {
    font-size: 2rem !important;
  }
  body[data-video-mode=true] #imports-container .imports-existing .previewClickContainer .imports-date-container .imports-snapshotDate::before {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  body[data-video-mode=true] #imports-container .imports-existing #progress-bar-container .progressContainer {
    position: relative;
    height: 6.5rem;
    border-radius: 3rem;
    overflow: hidden;
    margin: 1em 0;
  }
  body[data-video-mode=true] #imports-container .imports-existing #progress-bar-container .progressContainer .progressBar {
    height: 100%;
    padding-left: 2rem;
    color: white;
    font-weight: bold;
    transition: width 0.4s ease;
    font-size: 2rem !important;
  }
  body[data-video-mode=true] #imports-container #imports-preview .previewContainer {
    font-size: 2rem !important;
  }
  body[data-video-mode=true] #imports-container #imports-preview .previewContainer h3 > span {
    display: none;
  }
  body[data-video-mode=true] #imports-container #imports-preview .previewContainer .fixTableContainer {
    padding-bottom: 1rem;
  }
  body[data-video-mode=true] #imports-container .imports-upload {
    padding: 2rem 0;
    overflow: hidden;
  }
  body[data-video-mode=true] #imports-container .imports-upload .upload-files-form {
    gap: 1rem;
  }
  body[data-video-mode=true] #imports-container .imports-upload #filesToBeUploaded {
    font-size: 2rem !important;
  }
  body[data-video-mode=true] #imports-container .imports-upload .imports-upload-button-box {
    flex-direction: column;
    padding: 2rem 0;
    align-items: stretch;
    height: 20rem;
  }
  body[data-video-mode=true] #imports-container .imports-upload .imports-upload-button-box input,
  body[data-video-mode=true] #imports-container .imports-upload .imports-upload-button-box label {
    font-size: 2rem !important;
  }
  body[data-video-mode=true] #imports-container .imports-upload .imports-upload-button-box label {
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #F2E9EE;
    background-color: rgba(0, 0, 0, 0) !important;
  }
  body[data-video-mode=true] #imports-container .imports-upload .imports-upload-button-box label.visible {
    display: inline-flex;
  }
  body[data-video-mode=true] #imports-container .imports-upload .imports-upload-button-box input {
    line-height: normal;
    background-color: #F2E9EE !important;
    color: #221E26 !important;
  }
  body[data-video-mode=true] #imports-container .imports-upload .imports-upload-button-box label.small-button.visible,
  body[data-video-mode=true] #imports-container .imports-upload .imports-upload-button-box input {
    border-radius: 5vh !important;
    border: 0.3rem solid #F2E9EE !important;
  }
  body[data-video-mode=true] #imports-container .imports-upload #dropUploadContainer {
    height: 30vh !important;
  }
  body[data-video-mode=true] #imports-container .imports-upload #dropUploadContainer #dropUploadImports {
    height: calc(25vh - 4rem) !important;
    width: calc(25vh - 4rem) !important;
    font-size: 3rem !important;
  }
}
#magictools-container {
  display: grid;
  grid-template-rows: 7vh 88vh;
  grid-template-columns: [left-start] 1fr [right-end];
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
  padding: 0 1rem;
}
#magictools-container .content-header {
  padding: 0 2rem;
  grid-column: left-start/right-end;
  grid-row: 1/1;
  display: flex;
  justify-content: left;
  align-items: center;
}
#magictools-container .content-header h1 {
  display: flex;
}
#magictools-container .content-header h1 img {
  margin-right: 1rem;
  width: 3rem;
}
#magictools-container .content-header h1 span {
  font-size: 3rem;
}
#magictools-container .content-header img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#magictools-container .tools-existing {
  padding: 2rem;
  grid-column: left-start/right-end;
  grid-row: 2/2;
  overflow: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1rem 0;
}
#magictools-container .tools-existing.loading {
  overflow: hidden;
}
#magictools-container .tools-existing .tool {
  color: #3d3a4e;
  border-radius: 1rem;
  margin-bottom: 2rem;
  display: none;
  overflow: hidden;
}
#magictools-container .tools-existing .tool.visible {
  display: flex;
  width: 50%;
  min-width: 70rem;
  flex-direction: column;
}
#magictools-container .tools-existing .tool h3 {
  font-size: 2rem;
}
#magictools-container .tools-existing .tool.active {
  color: #fbfbfb;
}
#magictools-container .tools-existing .tool.active h3 {
  cursor: pointer;
  background-color: #6A2C55;
  position: relative;
}
#magictools-container .tools-existing .tool.active h3.beta::after {
  content: "Beta";
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: #A8514A;
  color: white;
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  line-height: 1;
  pointer-events: none;
}
#magictools-container .tools-existing .tool.active form {
  color: #fbfbfb;
}
#magictools-container .tools-existing .tool:not(.active) {
  background-color: #aaaaaa;
}
#magictools-container .tools-existing .tool:not(.active) h3 > img {
  display: none;
}
#magictools-container .tools-existing .tool:not(.active) .mt-existing-instances {
  display: none;
}
#magictools-container .tools-existing .tool h3,
#magictools-container .tools-existing .tool .mt-existing-instances {
  padding: 2rem;
}
#magictools-container .tools-existing .tool h3 .availability-status,
#magictools-container .tools-existing .tool .mt-existing-instances .availability-status {
  margin-left: 0.8rem;
  font-style: italic;
  font-weight: auto;
}
#magictools-container .tools-existing .tool h3 {
  display: flex;
  align-items: center;
}
#magictools-container .tools-existing .tool h3 img:not(.mt-create-icon) {
  width: 2.5rem;
  margin-left: 0.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#magictools-container .tools-existing .tool h3 img:not(.mt-create-icon).open {
  transform: rotate(90deg);
}
#magictools-container .tools-existing .tool h3 img.mt-create-icon {
  width: 3rem;
  margin-right: 1rem;
}
#magictools-container .tools-existing .tool .mt-existing-instances {
  background-color: #1A1A1A;
}
#magictools-container .tools-existing .tool .mt-existing-instances:has(> .tool-instance-container.modify-mode) {
  display: none;
}
#magictools-container .tools-existing .tool .mt-existing-instances .tool-instance-container {
  border-radius: 10rem;
  padding: 1rem 0;
  padding-left: 2rem;
  padding-right: 1.5rem;
}
#magictools-container .tools-existing .tool .mt-existing-instances .tool-instance-container .tool-instance-flexbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fbfbfb;
}
#magictools-container .tools-existing .tool .mt-existing-instances .tool-instance-container .tool-instance-flexbox .mt-tool-instance-name-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}
#magictools-container .tools-existing .tool .mt-existing-instances .tool-instance-container .tool-instance-flexbox .mt-tool-instance-name-container img {
  width: 2rem;
  filter: brightness(0) saturate(100%) invert(37%) sepia(40%) saturate(6492%) hue-rotate(198deg) brightness(103%) contrast(109%);
}
#magictools-container .tools-existing .tool .mt-existing-instances .tool-instance-container .tool-instance-flexbox span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#magictools-container .tools-existing .tool .mt-existing-instances .tool-instance-container .tool-instance-flexbox .mt-tool-instance-button-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 14.9rem;
}
#magictools-container .tools-existing .tool .mt-existing-instances .tool-instance-container .tool-instance-flexbox .mt-tool-instance-button-box label {
  padding: 0;
  margin: 0;
  display: inline-block;
  border-radius: auto;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 3.5rem;
}
#magictools-container .tools-existing .tool .mt-existing-instances .tool-instance-container .tool-instance-flexbox .mt-tool-instance-button-box img {
  width: 3.5rem;
  padding: 0.75rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
  background-color: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  border-radius: 1.75rem;
}
#magictools-container .tools-existing .tool .mt-existing-instances .tool-instance-container .tool-instance-flexbox .mt-tool-instance-button-box img:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
#magictools-container .tools-existing .tool form {
  overflow: hidden;
  max-height: 0;
  padding: 2rem;
  padding: 0 2rem;
  transition: max-height 0.2s, padding 0.2s;
  background-color: #1A1A1A;
  display: grid;
  grid-auto-rows: max-content;
  grid-template-columns: [left-start] 2fr [left-third-end] 1fr [left-end right-start] 1fr [middle-third-end] 2fr [right-end];
  column-gap: 4rem;
  max-width: 100%;
  overflow-x: hidden;
}
#magictools-container .tools-existing .tool form.open {
  max-height: 4000px;
  padding: 2rem;
}
#magictools-container .tools-existing .tool form table {
  width: 100%;
  table-layout: fixed;
}
#magictools-container .tools-existing .tool form table td:first-child {
  padding-right: 1rem;
}
#magictools-container .tools-existing .tool form table td:last-child {
  padding-left: 1rem;
}
#magictools-container .tools-existing .tool form table td:not(:first-child):not(:last-child) {
  padding: 0 1rem;
}
#magictools-container .tools-existing .tool form table .table-sub-headline {
  padding-top: 1rem;
  font-style: italic;
}
#magictools-container .tools-existing .tool form table tr.hide-row-if-disabled-select:has(select:disabled:not(.show-disabled)) {
  display: none;
}
#magictools-container .tools-existing .tool form.small-gap {
  column-gap: 2rem;
}
#magictools-container .tools-existing .tool form > div {
  min-width: 0;
}
#magictools-container .tools-existing .tool form > div .form-group-headline {
  font-size: 2rem;
  font-weight: bold;
  opacity: 0.5;
}
#magictools-container .tools-existing .tool form > div .form-group-headline::before {
  content: "";
  display: block;
  width: 100%;
  height: 0.1rem;
  background-color: rgba(255, 255, 255, 0.06);
  margin: 4rem 0rem 2rem 0rem;
}
#magictools-container .tools-existing .tool form > div .form-group-headline-subline {
  font-size: 1.3rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.05);
}
#magictools-container .tools-existing .tool form > div .flex-form-item-group {
  display: flex;
  gap: 2rem;
  align-items: baseline;
}
#magictools-container .tools-existing .tool form .form-row-1 {
  grid-row: 1/1;
  grid-column: left-start/right-end;
}
#magictools-container .tools-existing .tool form .form-row-1 .mt-headline {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  font-style: normal;
}
#magictools-container .tools-existing .tool form .form-row-1 .mt-headline.modify-mode {
  color: #e9965d;
}
#magictools-container .tools-existing .tool form .form-row-2 {
  grid-row: 2/2;
  grid-column: left-start/right-end;
}
#magictools-container .tools-existing .tool form .form-row-2-col-1 {
  grid-row: 2/2;
  grid-column: left-start/left-end;
}
#magictools-container .tools-existing .tool form .form-row-2-col-2 {
  grid-row: 2/2;
  grid-column: right-start/right-end;
}
#magictools-container .tools-existing .tool form .form-row-3-full-width {
  grid-row: 3/3;
  grid-column: left-start/right-end;
}
#magictools-container .tools-existing .tool form .form-row-3 {
  grid-row: 3/3;
  grid-column: left-start/right-end;
}
#magictools-container .tools-existing .tool form .form-row-3-col-1 {
  grid-row: 3/3;
  grid-column: left-start/left-end;
}
#magictools-container .tools-existing .tool form .form-row-3-col-2 {
  grid-row: 3/3;
  grid-column: right-start/right-end;
}
#magictools-container .tools-existing .tool form .form-row-4 {
  grid-row: 4/4;
  grid-column: left-start/right-end;
}
#magictools-container .tools-existing .tool form .form-row-4-col-1 {
  grid-row: 4/4;
  grid-column: left-start/left-end;
}
#magictools-container .tools-existing .tool form .form-row-4-col-2 {
  grid-row: 4/4;
  grid-column: right-start/right-end;
}
#magictools-container .tools-existing .tool form .form-row-4-full-width {
  grid-row: 4/4;
  grid-column: left-start/right-end;
}
#magictools-container .tools-existing .tool form .form-row-5-full-width {
  grid-row: 5/5;
  grid-column: left-start/right-end;
}
#magictools-container .tools-existing .tool form .form-row-5 {
  grid-row: 5/5;
  grid-column: left-start/right-end;
}
#magictools-container .tools-existing .tool form .form-row-5-col-1 {
  grid-row: 5/5;
  grid-column: left-start/left-end;
}
#magictools-container .tools-existing .tool form .form-row-5-col-2 {
  grid-row: 5/5;
  grid-column: right-start/right-end;
}
#magictools-container .tools-existing .tool form .form-row-6 {
  grid-row: 6/6;
  grid-column: left-start/right-end;
}
#magictools-container .tools-existing .tool form .form-row-7 {
  grid-row: 7/7;
  grid-column: left-start/right-end;
}
#magictools-container .tools-existing .tool form .form-grid-row-2 {
  grid-row: 2/2;
}
#magictools-container .tools-existing .tool form .form-grid-row-3 {
  grid-row: 3/3;
}
#magictools-container .tools-existing .tool form .form-grid-row-4 {
  grid-row: 4/4;
}
#magictools-container .tools-existing .tool form .form-grid-row-5 {
  grid-row: 5/5;
}
#magictools-container .tools-existing .tool form .form-grid-row-6 {
  grid-row: 6/6;
}
#magictools-container .tools-existing .tool form .form-grid-row-7 {
  grid-row: 7/7;
}
#magictools-container .tools-existing .tool form .form-grid-row-8 {
  grid-row: 8/8;
}
#magictools-container .tools-existing .tool form .form-grid-row-9 {
  grid-row: 9/9;
}
#magictools-container .tools-existing .tool form .form-grid-row-10 {
  grid-row: 10/10;
}
#magictools-container .tools-existing .tool form .form-grid-col-left-half {
  grid-column: left-start/left-end;
}
#magictools-container .tools-existing .tool form .form-grid-col-right-half {
  grid-column: right-start/right-end;
}
#magictools-container .tools-existing .tool form .form-grid-col-left-third {
  grid-column: left-start/left-third-end;
}
#magictools-container .tools-existing .tool form .form-grid-col-middle-third {
  grid-column: left-third-end/middle-third-end;
}
#magictools-container .tools-existing .tool form .form-grid-col-right-third {
  grid-column: middle-third-end/right-end;
}
#magictools-container .tools-existing .tool form .form-grid-col-full-width {
  grid-column: left-start/right-end;
}
#magictools-container .tools-existing .tool form .form-grid-col-two-thirds-left {
  grid-column: left-start/middle-third-end;
}
#magictools-container .tools-existing .tool form .form-grid-col-two-thirds-right {
  grid-column: left-third-end/right-end;
}
#magictools-container .tools-existing .tool form .mt-form-item .explain,
#magictools-container .tools-existing .tool form .explain-tool {
  font-size: 1.25rem;
  background-color: rgba(255, 255, 255, 0.04);
  font-style: normal;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  white-space: normal;
}
#magictools-container .tools-existing .tool form .mt-form-item {
  margin-bottom: 1rem;
}
#magictools-container .tools-existing .tool form .mt-form-item .title {
  margin-top: 2rem;
  font-weight: bold;
  opacity: 0.7;
  transform: scaleX(0.95);
  transform-origin: left;
  white-space: nowrap;
}
#magictools-container .tools-existing .tool form .mt-form-item .title input {
  display: inline;
  border: none;
  font-size: 1.5rem;
  width: 10rem;
  padding: 0;
  margin-left: 0.5rem;
}
#magictools-container .tools-existing .tool form .mt-form-item:has(.display-none) {
  display: none;
}
#magictools-container .tools-existing .tool form .inlineContainer {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#magictools-container .tools-existing .tool form .inlineContainer select {
  flex: 1;
}
#magictools-container .tools-existing .tool form .inlineContainer input {
  width: 6rem;
  flex: 0 0 auto;
}
#magictools-container .tools-existing .tool form .mt-form-item-desc-container:not(.full-width) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  width: 100%;
}
#magictools-container .tools-existing .tool form .mt-form-item-desc-container .mt-form-item {
  margin-bottom: 0 !important;
}
#magictools-container .tools-existing .tool form .mt-form-item-desc-container .mt-form-item-desc {
  display: flex;
  flex-direction: column;
  justify-content: end;
  overflow: hidden;
}
#magictools-container .tools-existing .tool form .mt-form-item-desc-container .mt-form-item-desc p {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
#magictools-container .tools-existing .tool form .mt-form-item-desc-container .mt-form-item-desc p.error {
  color: #A8514A !important;
}
#magictools-container .tools-existing .tool form .mt-form-item-desc-container .mt-form-item-desc p.error::before {
  content: "Error: ";
  font-weight: bold;
}
#magictools-container .tools-existing .tool form .mt-form-item-desc-container .mt-form-item,
#magictools-container .tools-existing .tool form .mt-form-item-desc-container .mt-form-item-desc {
  flex: 1;
}
#magictools-container .tools-existing .tool form .mt-form-item-desc p {
  width: 100%;
  font-size: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-family: "Golos Text", "Roboto", Arial;
  background-color: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.75rem;
}
#magictools-container .tools-existing .tool form .mt-form-button-box {
  display: flex;
  justify-content: space-evenly;
  gap: 1rem;
  margin-top: 2rem;
}
#magictools-container .tools-existing .tool form .mt-form-button-box input,
#magictools-container .tools-existing .tool form .mt-form-button-box label {
  flex-grow: 1;
  width: 100%;
  margin: 0;
  border-radius: 1.5rem;
}
#magictools-container .tools-existing .tool form input,
#magictools-container .tools-existing .tool form select {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  background-color: rgba(255, 255, 255, 0.04);
  color: #fff;
}
#magictools-container .tools-existing .tool form input.modify-mode,
#magictools-container .tools-existing .tool form select.modify-mode {
  background-color: #e9965d;
}
#magictools-container .tools-existing .tool form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#magictools-container .tools-existing .tool form .styled-select {
  margin-bottom: 0.5rem;
}
#magictools-container .tools-existing .tool form select {
  cursor: pointer;
}
#magictools-container .tools-existing .tool form #mt-items-allocation-ofield2-container,
#magictools-container .tools-existing .tool form #mt-items-allocation-ofield3-container {
  display: contents;
}

#modify-mt-instance-agent-relationship-container div {
  display: flex;
  justify-content: left;
  align-items: center;
}

@media only screen and (max-width: 2000px) {
  #magictools-container {
    grid-template-rows: 8vh 87vh;
  }
}
#mappings-container {
  display: grid;
  grid-template-rows: 7vh 88vh;
  grid-template-columns: [left-start] 40rem [left-end right-start] 1fr [right-end];
  padding: 0 1rem;
  height: 93vh;
}
#mappings-container .content-header {
  padding: 0 2rem;
  grid-column: left-start/right-end;
  grid-row: 1/1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#mappings-container .content-header h1 {
  display: flex;
}
#mappings-container .content-header h1 img {
  margin-right: 1rem;
  width: 3rem;
}
#mappings-container .content-header h1 span {
  font-size: 3rem;
}
#mappings-container .content-header img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#mappings-container .button-container,
#mappings-container .mapping-button-container {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 1rem;
  height: 8rem;
  margin-top: 1rem;
}
#mappings-container .button-container .add-button,
#mappings-container .mapping-button-container .add-button {
  display: flex;
  height: 8rem;
  width: 8rem;
  padding: 1rem;
  border-radius: 4rem;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
#mappings-container .button-container .add-button img,
#mappings-container .mapping-button-container .add-button img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#mappings-container .button-container .add-button:hover,
#mappings-container .mapping-button-container .add-button:hover {
  cursor: pointer;
  background-color: #6A2C55;
}
#mappings-container .button-container .bulk-button,
#mappings-container .mapping-button-container .bulk-button {
  display: flex;
  height: 4rem;
}
#mappings-container #mappings-existing {
  padding: 0 2rem;
  padding-bottom: 2rem;
  grid-column: left-start/left-end;
  grid-row: 2/2;
  overflow: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-self: stretch;
}
#mappings-container #mappings-existing #mappings-existing-content {
  display: none;
}
#mappings-container #mappings-existing #mappings-existing-content.visible {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
#mappings-container #mappings-existing #mappings-existing-content ul {
  overflow: auto;
}
#mappings-container #mappings-existing #mappings-existing-content ul::-webkit-scrollbar {
  width: 0rem;
}
#mappings-container #mappings-existing #mappings-existing-content li {
  margin: 1rem 0rem;
  list-style-type: none;
  padding: 0;
  font-size: 1.4rem;
  display: flex;
  justify-content: left;
  align-items: center;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}
#mappings-container #mappings-existing #mappings-existing-content li label {
  max-width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  align-items: center;
  padding: 0;
  font-weight: 500;
  font-size: 1.4rem;
  background-color: #38313E;
  border-radius: 1.8rem;
  box-shadow: -1px -16px 21px -11px rgba(0, 0, 0, 0.05) inset;
  -webkit-box-shadow: -1px -16px 21px -11px rgba(0, 0, 0, 0.05) inset;
  -moz-box-shadow: -1px -16px 21px -11px rgba(0, 0, 0, 0.05) inset;
  position: relative;
  color: #fff;
  text-decoration: none;
  transition: background-color 200ms;
}
#mappings-container #mappings-existing #mappings-existing-content li label progress {
  position: absolute;
  left: 10%;
  bottom: 0.2rem;
  width: 80%;
}
#mappings-container #mappings-existing #mappings-existing-content li label span {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
  padding: 2rem 1.5rem;
}
#mappings-container #mappings-existing #mappings-existing-content li label:hover {
  background-color: #4F213F;
  cursor: pointer;
}
#mappings-container #mappings-existing #mappings-existing-content li label.active {
  background-color: #6A2C55;
}
#mappings-container #mapping-container {
  display: flex;
  align-self: stretch;
  grid-column: right-start/right-end;
  grid-row: 2/2;
}
#mappings-container #mapping-container #current-mapping {
  padding: 2rem;
  background-color: #1A1A1A;
  color: #fbfbfb;
  border-radius: 2rem;
  overflow: auto;
  display: none;
  position: relative;
}
#mappings-container #mapping-container #current-mapping.visible {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
#mappings-container #mapping-container #current-mapping .current-mapping-header {
  padding: 3rem;
  background-color: #6A2C55;
  color: #fff;
  margin: 0 -2rem;
  margin-top: -2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#mappings-container #mapping-container #current-mapping .current-mapping-header .current-mapping-header-headline p {
  font-size: 2.5rem;
  margin-right: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
#mappings-container #mapping-container #current-mapping .current-mapping-header .current-mapping-header-headline p.small {
  font-size: 1.5rem;
}
#mappings-container #mapping-container #current-mapping .current-mapping-header .content-header-button-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}
#mappings-container #mapping-container #current-mapping .current-mapping-header .content-header-button-box .small-icon-button:hover {
  background-color: black;
}
#mappings-container #mapping-container #current-mapping .current-mapping-header img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#mappings-container #mapping-container #current-mapping .current-mapping-content {
  flex-direction: column;
  display: flex;
  flex: 1;
  margin-bottom: 9rem;
  overflow-y: auto;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  padding: 2rem 0;
  gap: 1rem;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem {
  background-color: rgba(255, 255, 255, 0.04);
  padding: 1rem 0;
  border-radius: 1rem;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem table {
  border-collapse: collapse;
  table-layout: fixed;
  /* Enables fixed table layout */
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem table td {
  padding: 0 1rem;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem table td.importName {
  font-weight: bold;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem table td .actionButtons {
  padding-top: 1.5rem;
  display: flex;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem table td .actionButtons .upToDate {
  padding: 0.75rem 1.5rem;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem table td .actionButtons .button {
  border-radius: 1rem;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem table td .actionButtons .button:not(.disabled):hover {
  cursor: pointer;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem table td .actionButtons .button.apply {
  background-color: #6A2C55;
  color: #fff;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem table td .actionButtons .button.applyHere {
  background-color: #8F7145;
  color: #fff;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem table td .actionButtons .button.push {
  background-color: #F2E9EE;
  color: #333;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem table td .actionButtons .button.remove {
  background-color: #3d3a4e;
  color: #fff;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem table td .actionButtons .loader-2 {
  margin: 1.3rem 0;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem a {
  max-width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 1.5rem;
  font-size: 1.4rem;
  background-color: #38313E;
  border-radius: 1.2rem;
  color: #fff;
  text-decoration: none;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem a:hover {
  background-color: #4F213F;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-button-container {
  height: 4rem;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table {
  padding: 1rem;
  overflow: auto;
  flex: 1;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  /* Enables fixed table layout */
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table thead tr {
  border-bottom: 0.1rem solid rgba(255, 255, 255, 0.06);
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table tbody tr {
  padding: 1rem 0;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.04);
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th {
  line-height: 4rem;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td {
  padding: 0.5rem;
  vertical-align: top;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th .button-cell,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td .button-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th .button-cell #current-mapping-button-container,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td .button-cell #current-mapping-button-container {
  font-weight: normal;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.left,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.left {
  text-align: left;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.center,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.center {
  text-align: center;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.right,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.right {
  text-align: right;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.center-icon, #mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.right-icon, #mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.left-icon,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.center-icon,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.right-icon,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.left-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.center-icon img, #mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.right-icon img, #mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.left-icon img,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.center-icon img,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.right-icon img,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.left-icon img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.center-icon,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.center-icon {
  justify-content: center;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.right-icon,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.right-icon {
  justify-content: flex-end;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.left-icon,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.left-icon {
  justify-content: flex-start;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-constraints,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-constraints {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-constraints .mapping-constraint-item,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item {
  display: flex;
  justify-content: space-around;
  gap: 0.2rem;
  align-items: center;
  padding: 0.3rem 1rem;
  border-radius: 1000rem;
  text-align: center;
  background-color: #3d3a4e;
  color: #fff;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-constraints .mapping-constraint-item img,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item img {
  width: 1.5rem;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-constraints .mapping-constraint-item.equal,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item.equal {
  background-color: #00C851;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-constraints .mapping-constraint-item.notequal,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item.notequal {
  background-color: #A8514A;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-constraints .mapping-constraint-item.greater, #mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-constraints .mapping-constraint-item.greaterequal, #mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-constraints .mapping-constraint-item.less, #mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-constraints .mapping-constraint-item.lessequal,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item.greater,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item.greaterequal,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item.less,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item.lessequal {
  background-color: #B08D57;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-constraints .mapping-constraint-item .mapping-constraint-item-span-wrapper,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item .mapping-constraint-item-span-wrapper {
  max-width: 10rem;
  position: relative;
  display: flex;
  /* Show tooltip on hover */
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-constraints .mapping-constraint-item .mapping-constraint-item-span-wrapper span,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item .mapping-constraint-item-span-wrapper span {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-constraints .mapping-constraint-item .mapping-constraint-item-span-wrapper span::after,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item .mapping-constraint-item-span-wrapper span::after {
  content: attr(data-fulltext);
  /* Use the full text stored in data-fulltext attribute */
  position: absolute;
  bottom: 100%;
  /* Position tooltip above the element */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 1rem;
  pointer-events: none;
  /* Prevent tooltip from capturing pointer events */
  opacity: 0;
  /* Hide tooltip initially */
  transition: opacity 0.2s ease-in-out;
  z-index: 1000;
  margin-bottom: 5px;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-constraints .mapping-constraint-item .mapping-constraint-item-span-wrapper span:hover::after,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item .mapping-constraint-item-span-wrapper span:hover::after {
  opacity: 1;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-constraints .connector,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-constraints .connector {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 1.4rem;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-actions,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-actions {
  width: 3rem;
  padding: 1.2rem;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-actions .mapping-entry-checkbox,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-actions .mapping-entry-checkbox {
  width: 1.8rem;
  height: 1.8rem;
  background-image: url("/static/img/cb-inactive.svg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0) saturate(100%) invert(37%) sepia(40%) saturate(6492%) hue-rotate(198deg) brightness(103%) contrast(109%);
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-actions .mapping-entry-checkbox:hover,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-actions .mapping-entry-checkbox:hover {
  background-image: url("/static/img/cb-hover.svg");
  cursor: pointer;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table th.mapping-entry-actions .mapping-entry-checkbox.selected,
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table table td.mapping-entry-actions .mapping-entry-checkbox.selected {
  background-image: url("/static/img/cb-active.svg");
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table col:nth-child(4) {
  width: 50%;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-entries-table col:nth-child(5) {
  width: 4rem;
}
#mappings-container #mapping-container #current-mapping .mapping-button-container {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
}
#mappings-container #mapping-container #current-mapping .mapping-button-container img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#mappings-container #mapping-container #current-mapping .mapping-button-container .add-button:hover {
  color: #fff;
}
#mappings-container #mapping-container #current-mapping .mapping-button-container .add-button:hover img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}

#modal-container-new-mapping-entry .add-mapping-entry-form .modal-content-container {
  min-height: 35vh;
}

@media only screen and (max-width: 2000px) {
  #mappings-container {
    grid-template-rows: 8vh 87vh;
  }
}
@media only screen and (aspect-ratio: 1/1) {
  body[data-video-mode=true] #mappings-container {
    grid-template-rows: 12vh 88vh;
  }
  body[data-video-mode=true] #mappings-container #mappings-existing #mappings-existing-content li {
    margin: 2rem 0rem;
  }
  body[data-video-mode=true] #mappings-container #mappings-existing #mappings-existing-content li label {
    font-size: 2.8rem !important;
    border-radius: 3.5rem;
  }
  body[data-video-mode=true] #mappings-container #mappings-existing #mappings-existing-content li label span {
    padding: 4rem 3rem;
  }
  body[data-video-mode=true] #mappings-container #mappings-existing .button-container,
  body[data-video-mode=true] #mappings-container #mapping-container .mapping-button-container {
    height: 15rem !important;
  }
  body[data-video-mode=true] #mappings-container #mappings-existing .button-container .add-button,
  body[data-video-mode=true] #mappings-container #mapping-container .mapping-button-container .add-button {
    width: 15rem !important;
    height: 15rem !important;
    border-radius: 7.5rem;
    font-size: 3.5rem;
  }
  body[data-video-mode=true] #mappings-container #mappings-existing .button-container .add-button img,
  body[data-video-mode=true] #mappings-container #mapping-container .mapping-button-container .add-button img {
    width: 3rem !important;
  }
  body[data-video-mode=true] #mappings-container #mapping-container {
    position: fixed;
    top: 8dvh;
    right: 0;
    width: 90dvw;
    height: 90dvh;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    will-change: transform;
  }
  body[data-video-mode=true] #mappings-container #mapping-container.is-visible {
    transform: translateX(0);
    right: 1dvw;
  }
  body[data-video-mode=true] #mapping-container {
    padding-bottom: 2rem;
  }
  body[data-video-mode=true] #mapping-container #current-mapping {
    border-radius: 3rem;
  }
  body[data-video-mode=true] #mapping-container #current-mapping .current-mapping-header img {
    width: 4rem !important;
    height: 4rem !important;
  }
  body[data-video-mode=true] #mapping-container #current-mapping .current-mapping-header .current-mapping-header-headline p {
    font-size: 4rem !important;
  }
  body[data-video-mode=true] #mapping-container #current-mapping .current-mapping-header .current-mapping-header-headline p:nth-of-type(2) {
    display: none;
  }
  body[data-video-mode=true] #mapping-container #current-mapping .importItem {
    font-size: 2.8rem !important;
    border-radius: 2rem !important;
  }
  body[data-video-mode=true] #mapping-container #current-mapping .importItem table tr:nth-child(3) {
    display: none;
  }
  body[data-video-mode=true] #mapping-container #current-mapping .importItem .upToDate {
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-video-mode=true] #mapping-container #current-mapping .current-mapping-content {
    margin-bottom: 12rem !important;
  }
  body[data-video-mode=true] #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships {
    width: 100%;
    overflow-x: auto;
  }
  body[data-video-mode=true] #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
  }
  body[data-video-mode=true] #mapping-container #current-mapping #current-mapping-entries-table {
    font-size: 2.8rem !important;
  }
  body[data-video-mode=true] #mapping-container #current-mapping #current-mapping-entries-table table td.left, body[data-video-mode=true] #mapping-container #current-mapping #current-mapping-entries-table table td.mapping-entry-constraints {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-video-mode=true] #mapping-container #current-mapping #current-mapping-entries-table table td.mapping-entry-constraints {
    padding: 2rem 1rem !important;
  }
  body[data-video-mode=true] #mapping-container #current-mapping #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item-span-wrapper {
    max-width: 30rem !important;
  }
  body[data-video-mode=true] #mapping-container #current-mapping #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item-span-wrapper span {
    max-width: 30rem !important;
  }
  body[data-video-mode=true] #mapping-container #current-mapping #current-mapping-entries-table table td.mapping-entry-actions {
    padding: 2rem 0rem !important;
    width: 6rem !important;
  }
  body[data-video-mode=true] #mapping-container #current-mapping #current-mapping-entries-table table td.mapping-entry-actions .mapping-entry-checkbox {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .add-mapping-entry-form-row1 {
    gap: 3rem;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .add-mapping-entry-form-row1 > * {
    flex: 1 !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .add-mapping-entry-form-row1 > * select,
  body[data-video-mode=true] #modal-container-new-mapping-entry .add-mapping-entry-form-row1 > * input {
    min-width: 0 !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .add-mapping-entry-form-row1 > * input[type=text] {
    width: 100% !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints-pair-close img {
    width: 3rem !important;
    height: 3rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-name {
    margin-bottom: 1.2rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-allRows {
    font-size: 3rem !important;
    padding: 0.5rem 2rem !important;
    border-radius: 1rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-pair .me-a-import-constraint-connector {
    width: 50rem !important;
    gap: 0.5rem;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-pair .me-a-import-constraint-connector .styled-select-radio {
    width: 5rem !important;
    height: 5rem !important;
    border-radius: 2.5rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-pair select,
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-pair input[type=String] {
    width: 50rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-pair input[type=String] {
    font-size: 3.5rem !important;
    min-width: 0 !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-button-container .me-a-import-constraints-join-type {
    height: 5rem !important;
    border-radius: 2.5rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-button-container .me-a-import-constraints-join-type div {
    font-size: 2.5rem !important;
    width: 6rem !important;
    height: 5rem !important;
    line-height: 5rem !important;
    padding: 0 1rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-button-container .me-a-import-constraints-add-button {
    width: 6rem !important;
    height: 6rem !important;
    border-radius: 3rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-button-container .me-a-import-constraints-add-button img {
    width: 3rem !important;
    height: 3rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-join-element {
    font-size: 3.5rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry #me-a-imports-add-button {
    width: 10rem !important;
    height: 10rem !important;
    border-radius: 5rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry #me-a-imports-add-button img {
    width: 4rem !important;
    height: 4rem !important;
  }
}
@media only screen and (min-width: 1600px) and (min-aspect-ratio: 15/9) and (max-aspect-ratio: 17/9) {
  /* 16/9 view viewport styles for video recording */
  body[data-video-mode=true] #mapping-container {
    margin-bottom: 2rem;
  }
  body[data-video-mode=true] #mapping-container #current-mapping .current-mapping-header .current-mapping-header-headline p {
    font-size: 3.5rem !important;
    margin-right: 1.5rem !important;
  }
  body[data-video-mode=true] #mapping-container #current-mapping .current-mapping-header .current-mapping-header-headline p.small {
    font-size: 2rem !important;
  }
  body[data-video-mode=true] #mapping-container #current-mapping .current-mapping-header img {
    width: 3rem !important;
  }
  body[data-video-mode=true] #mappings-existing-content .button-container,
  body[data-video-mode=true] #mappings-existing-content .mapping-button-container {
    height: 14rem !important;
    margin-top: 2rem !important;
  }
  body[data-video-mode=true] #mappings-existing-content .button-container .add-button,
  body[data-video-mode=true] #mappings-existing-content .mapping-button-container .add-button {
    height: 14rem !important;
    width: 14rem !important;
    padding: 2rem !important;
    border-radius: 7rem !important;
    gap: 1rem !important;
    font-size: 2rem;
  }
  body[data-video-mode=true] #mappings-existing-content .button-container .add-button img,
  body[data-video-mode=true] #mappings-existing-content .mapping-button-container .add-button img {
    width: 3rem !important;
  }
  body[data-video-mode=true] #mappings-existing-content li {
    margin: 2rem 0rem !important;
  }
  body[data-video-mode=true] #mappings-existing-content li label {
    font-size: 2rem !important;
    border-radius: 2.5rem !important;
  }
}
#strategies-container {
  display: grid;
  grid-template-rows: 7vh 88vh;
  grid-template-columns: [left-start] 40rem [left-end right-start] 1fr [right-end];
  padding: 0 1rem;
  height: 93vh;
}
#strategies-container .content-header {
  padding: 0 2rem;
  grid-column: left-start/right-end;
  grid-row: 1/1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#strategies-container .content-header h1 {
  display: flex;
}
#strategies-container .content-header h1 img {
  margin-right: 1rem;
  width: 3rem;
}
#strategies-container .content-header h1 span {
  font-size: 3rem;
}
#strategies-container .content-header img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#strategies-container #strategy-components-table {
  /* Buttons */
  /* Checkbox stays your style */
}
#strategies-container #strategy-components-table #strategy-components-table {
  width: 100%;
  border-collapse: collapse;
}
#strategies-container #strategy-components-table #strategy-components-table td {
  padding: 0.6rem 0.8rem;
  vertical-align: middle;
}
#strategies-container #strategy-components-table .component-main {
  width: calc(100% - 5rem);
}
#strategies-container #strategy-components-table .component-actions {
  width: 5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
#strategies-container #strategy-components-table .action-btn.edit {
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0.7;
}
#strategies-container #strategy-components-table .action-btn.edit:hover {
  opacity: 1;
}
#strategies-container #strategy-components-table .strategy-checkbox {
  width: 1rem;
  height: 1rem;
  border: 1px solid #ccc;
  cursor: pointer;
}
#strategies-container #strategy-components-table .strategy-checkbox.selected {
  background: #333;
}
#strategies-container #strategy-components-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  /* Enables fixed table layout */
}
#strategies-container #strategy-components-table table thead tr {
  border-bottom: 0.1rem solid rgba(255, 255, 255, 0.06);
}
#strategies-container #strategy-components-table table tbody tr {
  padding: 1rem 0;
}
#strategies-container #strategy-components-table table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.04);
}
#strategies-container #strategy-components-table table th {
  line-height: 4rem;
}
#strategies-container #strategy-components-table table th,
#strategies-container #strategy-components-table table td {
  padding: 0.5rem;
  vertical-align: top;
}
#strategies-container #strategy-components-table table th .button-cell,
#strategies-container #strategy-components-table table td .button-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#strategies-container #strategy-components-table table th .button-cell #strategy-components-button-container,
#strategies-container #strategy-components-table table td .button-cell #strategy-components-button-container {
  font-weight: normal;
}
#strategies-container #strategy-components-table table th.left,
#strategies-container #strategy-components-table table td.left {
  text-align: left;
}
#strategies-container #strategy-components-table table th.center,
#strategies-container #strategy-components-table table td.center {
  text-align: center;
}
#strategies-container #strategy-components-table table th.right,
#strategies-container #strategy-components-table table td.right {
  text-align: right;
}
#strategies-container #strategy-components-table table th.center-icon, #strategies-container #strategy-components-table table th.right-icon, #strategies-container #strategy-components-table table th.left-icon,
#strategies-container #strategy-components-table table td.center-icon,
#strategies-container #strategy-components-table table td.right-icon,
#strategies-container #strategy-components-table table td.left-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#strategies-container #strategy-components-table table th.center-icon img, #strategies-container #strategy-components-table table th.right-icon img, #strategies-container #strategy-components-table table th.left-icon img,
#strategies-container #strategy-components-table table td.center-icon img,
#strategies-container #strategy-components-table table td.right-icon img,
#strategies-container #strategy-components-table table td.left-icon img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#strategies-container #strategy-components-table table th.center-icon,
#strategies-container #strategy-components-table table td.center-icon {
  justify-content: center;
}
#strategies-container #strategy-components-table table th.right-icon,
#strategies-container #strategy-components-table table td.right-icon {
  justify-content: flex-end;
}
#strategies-container #strategy-components-table table th.left-icon,
#strategies-container #strategy-components-table table td.left-icon {
  justify-content: flex-start;
}
#strategies-container #strategy-components-table table th.component-actions,
#strategies-container #strategy-components-table table td.component-actions {
  width: 3rem;
  padding: 1.2rem;
}
#strategies-container #strategy-components-table table th.component-actions .component-checkbox,
#strategies-container #strategy-components-table table td.component-actions .component-checkbox {
  width: 1.8rem;
  height: 1.8rem;
  background-image: url("/static/img/cb-inactive.svg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0) saturate(100%) invert(37%) sepia(40%) saturate(6492%) hue-rotate(198deg) brightness(103%) contrast(109%);
}
#strategies-container #strategy-components-table table th.component-actions .component-checkbox:hover,
#strategies-container #strategy-components-table table td.component-actions .component-checkbox:hover {
  background-image: url("/static/img/cb-hover.svg");
  cursor: pointer;
}
#strategies-container #strategy-components-table table th.component-actions .component-checkbox.selected,
#strategies-container #strategy-components-table table td.component-actions .component-checkbox.selected {
  background-image: url("/static/img/cb-active.svg");
}
#strategies-container #strategy-components-table table th.component-actions .component-checkbox,
#strategies-container #strategy-components-table table td.component-actions .component-checkbox {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
#strategies-container #strategy-components-table table th.component-actions .component-checkbox:hover,
#strategies-container #strategy-components-table table td.component-actions .component-checkbox:hover {
  background-color: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}
#strategies-container #strategy-components-table table th.component-actions .component-checkbox img,
#strategies-container #strategy-components-table table td.component-actions .component-checkbox img {
  height: 1.5rem;
  width: 1.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#strategies-container #strategy-components-table col:nth-child(4) {
  width: 50%;
}
#strategies-container #strategy-components-table col:nth-child(5) {
  width: 4rem;
}
#strategies-container .button-container,
#strategies-container .strategy-button-container {
  display: flex;
  justify-content: end;
  height: 8rem;
  margin-top: 1rem;
}
#strategies-container .button-container .add-button,
#strategies-container .strategy-button-container .add-button {
  display: flex;
  height: 8rem;
  width: 8rem;
  padding: 1rem;
  border-radius: 4rem;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
#strategies-container .button-container .add-button img,
#strategies-container .strategy-button-container .add-button img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#strategies-container .button-container .add-button:hover,
#strategies-container .strategy-button-container .add-button:hover {
  cursor: pointer;
  background-color: #6A2C55;
}
#strategies-container #strategies-existing {
  padding: 0 2rem;
  padding-bottom: 2rem;
  grid-column: left-start/left-end;
  grid-row: 2/2;
  overflow: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-self: stretch;
}
#strategies-container #strategies-existing #strategies-existing-content {
  display: none;
}
#strategies-container #strategies-existing #strategies-existing-content.visible {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
#strategies-container #strategies-existing #strategies-existing-content ul {
  overflow: auto;
}
#strategies-container #strategies-existing #strategies-existing-content ul::-webkit-scrollbar {
  width: 0rem;
}
#strategies-container #strategies-existing #strategies-existing-content li {
  margin: 1rem 0rem;
  list-style-type: none;
  padding: 0;
  font-size: 1.4rem;
  display: flex;
  justify-content: left;
  align-items: center;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}
#strategies-container #strategies-existing #strategies-existing-content li label {
  max-width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  align-items: center;
  padding: 0;
  font-weight: 500;
  font-size: 1.4rem;
  background-color: #38313E;
  border-radius: 1.8rem;
  box-shadow: -1px -16px 21px -11px rgba(0, 0, 0, 0.05) inset;
  -webkit-box-shadow: -1px -16px 21px -11px rgba(0, 0, 0, 0.05) inset;
  -moz-box-shadow: -1px -16px 21px -11px rgba(0, 0, 0, 0.05) inset;
  position: relative;
  color: #fff;
  text-decoration: none;
  transition: background-color 200ms;
}
#strategies-container #strategies-existing #strategies-existing-content li label progress {
  position: absolute;
  left: 10%;
  bottom: 0.2rem;
  width: 80%;
}
#strategies-container #strategies-existing #strategies-existing-content li label span {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
  padding: 2rem 1.5rem;
}
#strategies-container #strategies-existing #strategies-existing-content li label:hover {
  background-color: #4F213F;
  cursor: pointer;
}
#strategies-container #strategies-existing #strategies-existing-content li label.active {
  background-color: #6A2C55;
}
#strategies-container #strategy-container {
  display: flex;
  align-self: stretch;
  grid-column: right-start/right-end;
  grid-row: 2/2;
}
#strategies-container #strategy-container #current-strategy {
  padding: 2rem;
  background-color: #1A1A1A;
  color: #fbfbfb;
  border-radius: 2rem;
  overflow: auto;
  display: none;
  position: relative;
}
#strategies-container #strategy-container #current-strategy.visible {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
#strategies-container #strategy-container #current-strategy .current-strategy-header {
  padding: 3rem;
  background-color: #6A2C55;
  color: #fff;
  margin: 0 -2rem;
  margin-top: -2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#strategies-container #strategy-container #current-strategy .current-strategy-header .current-strategy-header-headline p {
  font-size: 2.5rem;
  margin-right: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
#strategies-container #strategy-container #current-strategy .current-strategy-header .current-strategy-header-headline p.small {
  font-size: 1.5rem;
}
#strategies-container #strategy-container #current-strategy .current-strategy-header .content-header-button-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}
#strategies-container #strategy-container #current-strategy .current-strategy-header .content-header-button-box .small-icon-button:hover {
  background-color: black;
}
#strategies-container #strategy-container #current-strategy .current-strategy-header img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#strategies-container #strategy-container #current-strategy .current-strategy-content {
  flex-direction: column;
  display: flex;
  flex: 1;
  margin-bottom: 8rem;
  overflow-y: auto;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  padding: 2rem 0;
  gap: 1rem;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships .importItem {
  background-color: rgba(255, 255, 255, 0.04);
  padding: 1rem 0;
  border-radius: 1rem;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships .importItem table {
  border-collapse: collapse;
  table-layout: fixed;
  /* Enables fixed table layout */
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships .importItem table td {
  padding: 0 1rem;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships .importItem table td.importName {
  font-weight: bold;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships .importItem table td .actionButtons {
  padding-top: 1.5rem;
  display: flex;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships .importItem table td .actionButtons .upToDate {
  padding: 0.75rem 1.5rem;
  margin-right: 1rem;
  display: flex;
  align-items: center;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships .importItem table td .actionButtons .button {
  border-radius: 1rem;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships .importItem table td .actionButtons .button:not(.disabled):hover {
  cursor: pointer;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships .importItem table td .actionButtons .button.apply {
  background-color: #6A2C55;
  color: #fff;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships .importItem table td .actionButtons .button.applyHere {
  background-color: #8F7145;
  color: #fff;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships .importItem table td .actionButtons .button.push {
  background-color: #F2E9EE;
  color: #333;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships .importItem table td .actionButtons .button.remove {
  background-color: #3d3a4e;
  color: #fff;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships .importItem table td .actionButtons .loader-2 {
  margin: 1.3rem 0;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships .importItem a {
  max-width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 1.5rem;
  font-size: 1.4rem;
  background-color: #38313E;
  border-radius: 1.2rem;
  color: #fff;
  text-decoration: none;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-project-relationships .importItem a:hover {
  background-color: #4F213F;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table {
  padding: 1rem;
  overflow: auto;
  flex: 1;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  /* Enables fixed table layout */
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table thead tr {
  border-bottom: 0.1rem solid rgba(255, 255, 255, 0.06);
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table tbody tr {
  padding: 1rem 0;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.04);
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th {
  line-height: 4rem;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td:nth-child(1) {
  width: 20rem;
  /* Type */
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td:nth-child(2) {
  width: auto;
  /* Component */
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td:nth-child(3) {
  width: 10rem;
  /* Actions */
  white-space: nowrap;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td {
  padding: 0.5rem;
  vertical-align: middle;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th .button-cell,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td .button-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th .button-cell #strategy-components-button-container,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td .button-cell #strategy-components-button-container {
  font-weight: normal;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.left,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.left {
  text-align: left;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.center,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.center {
  text-align: center;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.right,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.right {
  text-align: right;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.center-icon, #strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.right-icon, #strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.left-icon,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.center-icon,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.right-icon,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.left-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.center-icon img, #strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.right-icon img, #strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.left-icon img,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.center-icon img,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.right-icon img,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.left-icon img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.center-icon,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.center-icon {
  justify-content: center;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.right-icon,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.right-icon {
  justify-content: flex-end;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.left-icon,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.left-icon {
  justify-content: flex-start;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th .component-main-inner,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td .component-main-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th .component-main-inner .pill,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td .component-main-inner .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 1.5rem;
  background: #fff;
  white-space: nowrap;
  max-width: 100%;
  color: #fff;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th .component-main-inner .pill.kpi,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td .component-main-inner .pill.kpi {
  background: #8F7145;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th .component-main-inner .pill.field_share,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td .component-main-inner .pill.field_share {
  background: #B08D57;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th .component-main-inner .pill.allocation_metric,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td .component-main-inner .pill.allocation_metric {
  background: #B08D57;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th .component-main-inner .pill.primary_dimension,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td .component-main-inner .pill.primary_dimension {
  background: #6A2C55;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th .component-main-inner .pill.range,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td .component-main-inner .pill.range {
  background: #00C851;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th .component-main-inner .pill.range-separator,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td .component-main-inner .pill.range-separator {
  background: transparent;
  padding: 0;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th .component-main-inner .pill.inf,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td .component-main-inner .pill.inf {
  width: 3rem;
  height: 3rem;
  padding: 0;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th .component-main-inner .pill.inf.neg,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td .component-main-inner .pill.inf.neg {
  background-image: url("/static/img/infinity-negative.svg");
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th .component-main-inner .pill.inf.pos,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td .component-main-inner .pill.inf.pos {
  background-image: url("/static/img/infinity-positive.svg");
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th .component-main-inner .pill.filter,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td .component-main-inner .pill.filter {
  background-color: #F2E9EE;
  color: #221E26;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th .component-main-inner .pill.filter img,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td .component-main-inner .pill.filter img {
  width: 1.5rem;
  height: 1.5rem;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.component-actions,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.component-actions {
  width: 10rem;
  padding: 0.6rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.component-actions .compontent-modify-icon,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.component-actions .compontent-modify-icon {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.component-actions .compontent-modify-icon:hover,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.component-actions .compontent-modify-icon:hover {
  background-color: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.component-actions .compontent-modify-icon img,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.component-actions .compontent-modify-icon img {
  height: 1.5rem;
  width: 1.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.component-actions .component-checkbox,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.component-actions .component-checkbox {
  width: 1.8rem;
  height: 1.8rem;
  background-image: url("/static/img/cb-inactive.svg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0) saturate(100%) invert(37%) sepia(40%) saturate(6492%) hue-rotate(198deg) brightness(103%) contrast(109%);
  margin: 0;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.component-actions .component-checkbox:hover,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.component-actions .component-checkbox:hover {
  background-image: url("/static/img/cb-hover.svg");
  cursor: pointer;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table th.component-actions .component-checkbox.selected,
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table table td.component-actions .component-checkbox.selected {
  background-image: url("/static/img/cb-active.svg");
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table col:nth-child(4) {
  width: 50%;
}
#strategies-container #strategy-container #current-strategy .current-strategy-content #current-strategy-components-table col:nth-child(5) {
  width: 4rem;
}
#strategies-container #strategy-container #current-strategy .strategy-components-button-container {
  padding: 1rem;
  position: absolute;
  right: 2rem;
  bottom: 2rem;
}
#strategies-container #strategy-container #current-strategy .strategy-components-button-container img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#strategies-container #strategy-container #current-strategy .strategy-components-button-container .add-button:hover {
  color: #fff;
}
#strategies-container #strategy-container #current-strategy .strategy-components-button-container .add-button:hover img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}

@media only screen and (max-width: 2000px) {
  #strategies-container {
    grid-template-rows: 8vh 87vh;
  }
}
@media only screen and (aspect-ratio: 1/1) {
  body[data-video-mode=true] #strategies-container {
    grid-template-rows: 12vh 88vh;
  }
  body[data-video-mode=true] #strategies-container #strategies-existing #strategies-existing-content li {
    margin: 2rem 0rem;
  }
  body[data-video-mode=true] #strategies-container #strategies-existing #strategies-existing-content li label {
    font-size: 2.8rem !important;
    border-radius: 3.5rem;
  }
  body[data-video-mode=true] #strategies-container #strategies-existing #strategies-existing-content li label span {
    padding: 4rem 3rem;
  }
  body[data-video-mode=true] #strategies-container #strategys-existing .button-container,
  body[data-video-mode=true] #strategies-container #strategy-container .strategy-button-container {
    height: 15rem !important;
  }
  body[data-video-mode=true] #strategies-container #strategys-existing .button-container .add-button,
  body[data-video-mode=true] #strategies-container #strategy-container .strategy-button-container .add-button {
    width: 15rem !important;
    height: 15rem !important;
    border-radius: 7.5rem;
    font-size: 3.5rem;
  }
  body[data-video-mode=true] #strategies-container #strategys-existing .button-container .add-button img,
  body[data-video-mode=true] #strategies-container #strategy-container .strategy-button-container .add-button img {
    width: 3rem !important;
  }
  body[data-video-mode=true] #strategies-container #strategy-container {
    position: fixed;
    top: 8dvh;
    right: 0;
    width: 90dvw;
    height: 90dvh;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    will-change: transform;
  }
  body[data-video-mode=true] #strategies-container #strategy-container.is-visible {
    transform: translateX(0);
    right: 1dvw;
  }
  body[data-video-mode=true] #strategy-container {
    padding-bottom: 2rem;
  }
  body[data-video-mode=true] #strategy-container #current-strategy {
    border-radius: 3rem;
  }
  body[data-video-mode=true] #strategy-container #current-strategy .current-strategy-header img {
    width: 4rem !important;
    height: 4rem !important;
  }
  body[data-video-mode=true] #strategy-container #current-strategy .current-strategy-header .current-strategy-header-headline p {
    font-size: 4rem !important;
  }
  body[data-video-mode=true] #strategy-container #current-strategy .current-strategy-header .current-strategy-header-headline p:nth-of-type(2) {
    display: none;
  }
  body[data-video-mode=true] #strategy-container #current-strategy .importItem {
    font-size: 2.8rem !important;
    border-radius: 2rem !important;
  }
  body[data-video-mode=true] #strategy-container #current-strategy .importItem table tr:nth-child(3) {
    display: none;
  }
  body[data-video-mode=true] #strategy-container #current-strategy .importItem .upToDate {
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-video-mode=true] #strategy-container #current-strategy .current-mapping-content {
    margin-bottom: 12rem !important;
  }
  body[data-video-mode=true] #strategy-container #current-strategy .current-mapping-content #current-mapping-import-relationships {
    width: 100%;
    overflow-x: auto;
  }
  body[data-video-mode=true] #strategy-container #current-strategy .current-mapping-content #current-mapping-import-relationships::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
  }
  body[data-video-mode=true] #strategy-container #current-strategy #current-mapping-entries-table {
    font-size: 2.8rem !important;
  }
  body[data-video-mode=true] #strategy-container #current-strategy #current-mapping-entries-table table td.left, body[data-video-mode=true] #strategy-container #current-strategy #current-mapping-entries-table table td.mapping-entry-constraints {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-video-mode=true] #strategy-container #current-strategy #current-mapping-entries-table table td.mapping-entry-constraints {
    padding: 2rem 1rem !important;
  }
  body[data-video-mode=true] #strategy-container #current-strategy #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item-span-wrapper {
    max-width: 30rem !important;
  }
  body[data-video-mode=true] #strategy-container #current-strategy #current-mapping-entries-table table td.mapping-entry-constraints .mapping-constraint-item-span-wrapper span {
    max-width: 30rem !important;
  }
  body[data-video-mode=true] #strategy-container #current-strategy #current-mapping-entries-table table td.mapping-entry-actions {
    padding: 2rem 0rem !important;
    width: 6rem !important;
  }
  body[data-video-mode=true] #strategy-container #current-strategy #current-mapping-entries-table table td.mapping-entry-actions .mapping-entry-checkbox {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .add-mapping-entry-form-row1 {
    gap: 3rem;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .add-mapping-entry-form-row1 > * {
    flex: 1 !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .add-mapping-entry-form-row1 > * select,
  body[data-video-mode=true] #modal-container-new-mapping-entry .add-mapping-entry-form-row1 > * input {
    min-width: 0 !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .add-mapping-entry-form-row1 > * input[type=text] {
    width: 100% !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints-pair-close img {
    width: 3rem !important;
    height: 3rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-name {
    margin-bottom: 1.2rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-allRows {
    font-size: 3rem !important;
    padding: 0.5rem 2rem !important;
    border-radius: 1rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-pair .me-a-import-constraint-connector {
    width: 50rem !important;
    gap: 0.5rem;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-pair .me-a-import-constraint-connector .styled-select-radio {
    width: 5rem !important;
    height: 5rem !important;
    border-radius: 2.5rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-pair select,
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-pair input[type=String] {
    width: 50rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-pair input[type=String] {
    font-size: 3.5rem !important;
    min-width: 0 !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-button-container .me-a-import-constraints-join-type {
    height: 5rem !important;
    border-radius: 2.5rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-button-container .me-a-import-constraints-join-type div {
    font-size: 2.5rem !important;
    width: 6rem !important;
    height: 5rem !important;
    line-height: 5rem !important;
    padding: 0 1rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-button-container .me-a-import-constraints-add-button {
    width: 6rem !important;
    height: 6rem !important;
    border-radius: 3rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-constraints-button-container .me-a-import-constraints-add-button img {
    width: 3rem !important;
    height: 3rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry .me-a-import-item .me-a-import-constraints .me-a-import-join-element {
    font-size: 3.5rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry #me-a-imports-add-button {
    width: 10rem !important;
    height: 10rem !important;
    border-radius: 5rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry #me-a-imports-add-button img {
    width: 4rem !important;
    height: 4rem !important;
  }
}
@media only screen and (min-width: 1600px) and (min-aspect-ratio: 15/9) and (max-aspect-ratio: 17/9) {
  /* 16/9 view viewport styles for video recording */
  body[data-video-mode=true] #mapping-container {
    margin-bottom: 2rem;
  }
  body[data-video-mode=true] #mapping-container #current-mapping .current-mapping-header .current-mapping-header-headline p {
    font-size: 3.5rem !important;
    margin-right: 1.5rem !important;
  }
  body[data-video-mode=true] #mapping-container #current-mapping .current-mapping-header .current-mapping-header-headline p.small {
    font-size: 2rem !important;
  }
  body[data-video-mode=true] #mapping-container #current-mapping .current-mapping-header img {
    width: 3rem !important;
  }
  body[data-video-mode=true] #mappings-existing-content .button-container,
  body[data-video-mode=true] #mappings-existing-content .mapping-button-container {
    height: 14rem !important;
    margin-top: 2rem !important;
  }
  body[data-video-mode=true] #mappings-existing-content .button-container .add-button,
  body[data-video-mode=true] #mappings-existing-content .mapping-button-container .add-button {
    height: 14rem !important;
    width: 14rem !important;
    padding: 2rem !important;
    border-radius: 7rem !important;
    gap: 1rem !important;
    font-size: 2rem;
  }
  body[data-video-mode=true] #mappings-existing-content .button-container .add-button img,
  body[data-video-mode=true] #mappings-existing-content .mapping-button-container .add-button img {
    width: 3rem !important;
  }
  body[data-video-mode=true] #mappings-existing-content li {
    margin: 2rem 0rem !important;
  }
  body[data-video-mode=true] #mappings-existing-content li label {
    font-size: 2rem !important;
    border-radius: 2.5rem !important;
  }
}
#notifications-container {
  display: grid;
  grid-template-rows: 7vh 88vh;
  grid-template-columns: 1fr;
  padding: 0 1rem;
  height: 93vh;
}
#notifications-container .content-header {
  padding: 0 2rem;
  grid-column: 1;
  grid-row: 1/1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#notifications-container .content-header h1 {
  display: flex;
}
#notifications-container .content-header h1 img {
  margin-right: 1rem;
  width: 3rem;
}
#notifications-container .content-header h1 span {
  font-size: 3rem;
}
#notifications-container .content-header img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#notifications-container .notifications-existing {
  grid-column: 1;
  grid-row: 2/2;
  overflow: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1rem;
  overflow: auto;
  flex: 1;
  display: flex;
  align-self: stretch;
  flex-direction: column;
  justify-content: space-between;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper {
  background-color: #1A1A1A;
  padding: 2rem;
  border-radius: 2rem;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  /* Enables fixed table layout */
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table thead tr {
  border-bottom: 0.1rem solid rgba(255, 255, 255, 0.06);
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table tbody tr {
  padding: 1rem 0;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.04);
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th {
  line-height: 4rem;
  text-align: left;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td {
  padding: 0.5rem;
  vertical-align: middle;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th.left,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td.left {
  text-align: left;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th.center,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td.center {
  text-align: center;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th.right,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td.right {
  text-align: right;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th.center-icon, #notifications-container .notifications-existing .notifications-existing-table-wrapper table th.right-icon, #notifications-container .notifications-existing .notifications-existing-table-wrapper table th.left-icon,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td.center-icon,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td.right-icon,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td.left-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th.center-icon img, #notifications-container .notifications-existing .notifications-existing-table-wrapper table th.right-icon img, #notifications-container .notifications-existing .notifications-existing-table-wrapper table th.left-icon img,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td.center-icon img,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td.right-icon img,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td.left-icon img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th.center-icon,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td.center-icon {
  justify-content: center;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th.right-icon,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td.right-icon {
  justify-content: flex-end;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th.left-icon,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td.left-icon {
  justify-content: flex-start;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th .table-action-buttons,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td .table-action-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th .table-action-buttons img,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td .table-action-buttons img {
  width: 2rem;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th .table-action-buttons img:not(.no-filter),
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td .table-action-buttons img:not(.no-filter) {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th .table-action-buttons.right,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td .table-action-buttons.right {
  justify-content: end;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th .table-action-buttons .check-execute-notification,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td .table-action-buttons .check-execute-notification {
  position: relative;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th .table-action-buttons .check-execute-notification.loading img,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td .table-action-buttons .check-execute-notification.loading img {
  opacity: 0;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th .table-action-buttons .check-execute-notification.loading::after,
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td .table-action-buttons .check-execute-notification.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: -0.7rem;
  margin-left: -0.7rem;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: #6A2C55;
  animation: spin 0.9s linear infinite;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td:nth-child(1),
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th:nth-child(1),
#notifications-container .notifications-existing .notifications-existing-table-wrapper table td:nth-child(3),
#notifications-container .notifications-existing .notifications-existing-table-wrapper table th:nth-child(3) {
  min-width: 20rem;
  white-space: normal;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper col:nth-child(4) {
  width: 50%;
}
#notifications-container .notifications-existing .notifications-existing-table-wrapper col:nth-child(5) {
  width: 4rem;
}
#notifications-container .notifications-existing .button-container {
  display: flex;
  justify-content: end;
  height: 8rem;
  margin-top: 1rem;
}
#notifications-container .notifications-existing .button-container .add-button {
  display: flex;
  height: 8rem;
  width: 8rem;
  padding: 1rem;
  border-radius: 4rem;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
#notifications-container .notifications-existing .button-container .add-button img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#notifications-container .notifications-existing .button-container .add-button:hover {
  cursor: pointer;
  background-color: #6A2C55;
}

@media only screen and (max-width: 2000px) {
  #notifications-container {
    grid-template-rows: 8vh 87vh;
  }
}
.modal-add-checkbox,
.modal-modify-checkbox {
  display: none;
}

#modal-add-package:checked ~ .modal-add-package,
#modal-add-package:checked ~ .modal-add-package-background,
#modal-modify-package:checked ~ .modal-modify-package,
#modal-modify-package:checked ~ .modal-modify-package-background,
#modal-add-company:checked ~ .modal-add-company,
#modal-add-company:checked ~ .modal-add-company-background,
#modal-modify-company:checked ~ .modal-modify-company,
#modal-modify-company:checked ~ .modal-modify-company-background,
#modal-add-agent-profile:checked ~ .modal-add-agent-profile,
#modal-add-agent-profile:checked ~ .modal-add-agent-profile-background,
#modal-modify-agent-profile:checked ~ .modal-modify-agent-profile,
#modal-modify-agent-profile:checked ~ .modal-modify-agent-profile-background,
#modal-add-user:checked ~ .modal-add-user,
#modal-add-user:checked ~ .modal-add-user-background,
#modal-modify-user:checked ~ .modal-modify-user,
#modal-modify-user:checked ~ .modal-modify-user-background,
#modal-modify-magictool:checked ~ .modal-modify-magictool,
#modal-modify-magictool:checked ~ .modal-modify-magictool-background,
#modal-add-toolrelationship:checked ~ .modal-add-toolrelationship,
#modal-add-toolrelationship:checked ~ .modal-add-toolrelationship-background,
#modal-add-api-token:checked ~ .modal-add-api-token,
#modal-add-api-token:checked ~ .modal-add-api-token-background,
#modal-modify-api-token:checked ~ .modal-modify-api-token,
#modal-modify-api-token:checked ~ .modal-modify-api-token-background,
#modal-add-api-job:checked ~ .modal-add-api-job,
#modal-add-api-job:checked ~ .modal-add-api-job-background,
#modal-modify-api-job:checked ~ .modal-modify-api-job,
#modal-modify-api-job:checked ~ .modal-modify-api-job-background,
#modal-add-api-account:checked ~ .modal-add-api-account,
#modal-add-api-account:checked ~ .modal-add-api-account-background,
#modal-modify-api-account:checked ~ .modal-modify-api-account,
#modal-modify-api-account:checked ~ .modal-modify-api-account-background,
#modal-add-api-job-parameter:checked ~ .modal-add-api-job-parameter,
#modal-add-api-job-parameter:checked ~ .modal-add-api-job-parameter-background,
#modal-modify-api-job-parameter:checked ~ .modal-modify-api-job-parameter,
#modal-modify-api-job-parameter:checked ~ .modal-modify-api-job-parameter-background,
#modal-add-email-redirect:checked ~ .modal-add-email-redirect,
#modal-add-email-redirect:checked ~ .modal-add-email-redirect-background {
  display: block;
}

#modal-add-settings-user:checked ~ .modal-container-new.add-settings-user,
#modal-modify-settings-user:checked ~ .modal-container-new.modify-settings-user,
#modal-add-settings-viewer:checked ~ .modal-container-new.add-settings-viewer,
#modal-modify-settings-viewer:checked ~ .modal-container-new.modify-settings-viewer,
#modal-add-package:checked ~ .modal-container-new.add-package,
#modal-modify-package:checked ~ .modal-container-new.modify-package,
#modal-add-company:checked ~ .modal-container-new.add-company,
#modal-modify-company:checked ~ .modal-container-new.modify-company,
#modal-add-agent-profile:checked ~ .modal-container-new.add-agent-profile,
#modal-modify-agent-profile:checked ~ .modal-container-new.modify-agent-profile,
#modal-add-user:checked ~ .modal-container-new.add-user,
#modal-modify-user:checked ~ .modal-container-new.modify-user,
#modal-modify-magictool:checked ~ .modal-container-new.modify-magictool,
#modal-add-toolrelationship:checked ~ .modal-container-new.add-toolrelationship,
#modal-modify-toolrelationship:checked ~ .modal-container-new.modify-toolrelationship,
#modal-add-api-token:checked ~ .modal-container-new.add-api-token,
#modal-modify-api-token:checked ~ .modal-container-new.modify-api-token,
#modal-add-api-job:checked ~ .modal-container-new.add-api-job,
#modal-modify-api-job:checked ~ .modal-container-new.modify-api-job,
#modal-add-api-account:checked ~ .modal-container-new.add-api-account,
#modal-modify-api-account:checked ~ .modal-container-new.modify-api-account,
#modal-add-api-job-parameter:checked ~ .modal-container-new.add-api-job-parameter,
#modal-modify-api-job-parameter:checked ~ .modal-container-new.modify-api-job-parameter,
#modal-add-email-redirect:checked ~ .modal-container-new.add-email-redirect,
#modal-relationship-assignments:checked ~ .modal-container-new.relationship-assignments-modal,
#modal-add-column:checked ~ .modal-container-new.add-column,
#modal-modify-column:checked ~ .modal-container-new.modify-column,
#modal-add-goal:checked ~ .modal-container-new.add-goal,
#modal-modify-goal:checked ~ .modal-container-new.modify-goal,
#modal-add-source:checked ~ .modal-container-new.add-source,
#modify-tool-agent-relationships:checked ~ .modal-container-new.modify-tool-agent-relationship,
#modal-add-agent:checked ~ .modal-container-new.add-agent,
#modal-modify-agent:checked ~ .modal-container-new.modify-agent,
#modal-magic-tool:checked ~ .modal-container-new.magic-tool,
#modal-add-project:checked ~ .modal-container-new.add-project,
#modal-modify-project:checked ~ .modal-container-new.modify-project,
#modal-export-project:checked ~ .modal-container-new.export-project,
#modal-add-mapping-entry:checked ~ .modal-container-new.add-mapping-entry,
#modal-add-mapping:checked ~ .modal-container-new.add-mapping,
#modal-modify-mapping:checked ~ .modal-container-new.modify-mapping,
#modal-add-strategy:checked ~ .modal-container-new.add-strategy,
#modal-modify-strategy:checked ~ .modal-container-new.modify-strategy,
#modal-add-notification:checked ~ .modal-container-new.add-notification,
#modal-modify-notification:checked ~ .modal-container-new.modify-notification,
#modal-add-strategy-component:checked ~ .modal-container-new.add-strategy-component,
#modal-modify-strategy-component:checked ~ .modal-container-new.modify-strategy-component,
#modal-add-csv-import:checked ~ .modal-container-new.add-import,
#modal-modify-csv-import:checked ~ .modal-container-new.modify-import,
#modal-add-transferimport:checked ~ .modal-container-new.add-transferimport,
#modal-modify-transferimport:checked ~ .modal-container-new.modify-transferimport,
#slide-modal-edit-description:checked ~ .modal-container-new.edit-description {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 99vw;
  height: 99vh;
  top: 0vh;
  left: 0vh;
}
#modal-add-settings-user:checked ~ .modal-container-new.add-settings-user .modal,
#modal-add-settings-user:checked ~ .modal-container-new.add-settings-user .modal-background,
#modal-add-settings-user:checked ~ .modal-container-new.add-settings-user .modal-slide,
#modal-modify-settings-user:checked ~ .modal-container-new.modify-settings-user .modal,
#modal-modify-settings-user:checked ~ .modal-container-new.modify-settings-user .modal-background,
#modal-modify-settings-user:checked ~ .modal-container-new.modify-settings-user .modal-slide,
#modal-add-settings-viewer:checked ~ .modal-container-new.add-settings-viewer .modal,
#modal-add-settings-viewer:checked ~ .modal-container-new.add-settings-viewer .modal-background,
#modal-add-settings-viewer:checked ~ .modal-container-new.add-settings-viewer .modal-slide,
#modal-modify-settings-viewer:checked ~ .modal-container-new.modify-settings-viewer .modal,
#modal-modify-settings-viewer:checked ~ .modal-container-new.modify-settings-viewer .modal-background,
#modal-modify-settings-viewer:checked ~ .modal-container-new.modify-settings-viewer .modal-slide,
#modal-add-package:checked ~ .modal-container-new.add-package .modal,
#modal-add-package:checked ~ .modal-container-new.add-package .modal-background,
#modal-add-package:checked ~ .modal-container-new.add-package .modal-slide,
#modal-modify-package:checked ~ .modal-container-new.modify-package .modal,
#modal-modify-package:checked ~ .modal-container-new.modify-package .modal-background,
#modal-modify-package:checked ~ .modal-container-new.modify-package .modal-slide,
#modal-add-company:checked ~ .modal-container-new.add-company .modal,
#modal-add-company:checked ~ .modal-container-new.add-company .modal-background,
#modal-add-company:checked ~ .modal-container-new.add-company .modal-slide,
#modal-modify-company:checked ~ .modal-container-new.modify-company .modal,
#modal-modify-company:checked ~ .modal-container-new.modify-company .modal-background,
#modal-modify-company:checked ~ .modal-container-new.modify-company .modal-slide,
#modal-add-agent-profile:checked ~ .modal-container-new.add-agent-profile .modal,
#modal-add-agent-profile:checked ~ .modal-container-new.add-agent-profile .modal-background,
#modal-add-agent-profile:checked ~ .modal-container-new.add-agent-profile .modal-slide,
#modal-modify-agent-profile:checked ~ .modal-container-new.modify-agent-profile .modal,
#modal-modify-agent-profile:checked ~ .modal-container-new.modify-agent-profile .modal-background,
#modal-modify-agent-profile:checked ~ .modal-container-new.modify-agent-profile .modal-slide,
#modal-add-user:checked ~ .modal-container-new.add-user .modal,
#modal-add-user:checked ~ .modal-container-new.add-user .modal-background,
#modal-add-user:checked ~ .modal-container-new.add-user .modal-slide,
#modal-modify-user:checked ~ .modal-container-new.modify-user .modal,
#modal-modify-user:checked ~ .modal-container-new.modify-user .modal-background,
#modal-modify-user:checked ~ .modal-container-new.modify-user .modal-slide,
#modal-modify-magictool:checked ~ .modal-container-new.modify-magictool .modal,
#modal-modify-magictool:checked ~ .modal-container-new.modify-magictool .modal-background,
#modal-modify-magictool:checked ~ .modal-container-new.modify-magictool .modal-slide,
#modal-add-toolrelationship:checked ~ .modal-container-new.add-toolrelationship .modal,
#modal-add-toolrelationship:checked ~ .modal-container-new.add-toolrelationship .modal-background,
#modal-add-toolrelationship:checked ~ .modal-container-new.add-toolrelationship .modal-slide,
#modal-modify-toolrelationship:checked ~ .modal-container-new.modify-toolrelationship .modal,
#modal-modify-toolrelationship:checked ~ .modal-container-new.modify-toolrelationship .modal-background,
#modal-modify-toolrelationship:checked ~ .modal-container-new.modify-toolrelationship .modal-slide,
#modal-add-api-token:checked ~ .modal-container-new.add-api-token .modal,
#modal-add-api-token:checked ~ .modal-container-new.add-api-token .modal-background,
#modal-add-api-token:checked ~ .modal-container-new.add-api-token .modal-slide,
#modal-modify-api-token:checked ~ .modal-container-new.modify-api-token .modal,
#modal-modify-api-token:checked ~ .modal-container-new.modify-api-token .modal-background,
#modal-modify-api-token:checked ~ .modal-container-new.modify-api-token .modal-slide,
#modal-add-api-job:checked ~ .modal-container-new.add-api-job .modal,
#modal-add-api-job:checked ~ .modal-container-new.add-api-job .modal-background,
#modal-add-api-job:checked ~ .modal-container-new.add-api-job .modal-slide,
#modal-modify-api-job:checked ~ .modal-container-new.modify-api-job .modal,
#modal-modify-api-job:checked ~ .modal-container-new.modify-api-job .modal-background,
#modal-modify-api-job:checked ~ .modal-container-new.modify-api-job .modal-slide,
#modal-add-api-account:checked ~ .modal-container-new.add-api-account .modal,
#modal-add-api-account:checked ~ .modal-container-new.add-api-account .modal-background,
#modal-add-api-account:checked ~ .modal-container-new.add-api-account .modal-slide,
#modal-modify-api-account:checked ~ .modal-container-new.modify-api-account .modal,
#modal-modify-api-account:checked ~ .modal-container-new.modify-api-account .modal-background,
#modal-modify-api-account:checked ~ .modal-container-new.modify-api-account .modal-slide,
#modal-add-api-job-parameter:checked ~ .modal-container-new.add-api-job-parameter .modal,
#modal-add-api-job-parameter:checked ~ .modal-container-new.add-api-job-parameter .modal-background,
#modal-add-api-job-parameter:checked ~ .modal-container-new.add-api-job-parameter .modal-slide,
#modal-modify-api-job-parameter:checked ~ .modal-container-new.modify-api-job-parameter .modal,
#modal-modify-api-job-parameter:checked ~ .modal-container-new.modify-api-job-parameter .modal-background,
#modal-modify-api-job-parameter:checked ~ .modal-container-new.modify-api-job-parameter .modal-slide,
#modal-add-email-redirect:checked ~ .modal-container-new.add-email-redirect .modal,
#modal-add-email-redirect:checked ~ .modal-container-new.add-email-redirect .modal-background,
#modal-add-email-redirect:checked ~ .modal-container-new.add-email-redirect .modal-slide,
#modal-relationship-assignments:checked ~ .modal-container-new.relationship-assignments-modal .modal,
#modal-relationship-assignments:checked ~ .modal-container-new.relationship-assignments-modal .modal-background,
#modal-relationship-assignments:checked ~ .modal-container-new.relationship-assignments-modal .modal-slide,
#modal-add-column:checked ~ .modal-container-new.add-column .modal,
#modal-add-column:checked ~ .modal-container-new.add-column .modal-background,
#modal-add-column:checked ~ .modal-container-new.add-column .modal-slide,
#modal-modify-column:checked ~ .modal-container-new.modify-column .modal,
#modal-modify-column:checked ~ .modal-container-new.modify-column .modal-background,
#modal-modify-column:checked ~ .modal-container-new.modify-column .modal-slide,
#modal-add-goal:checked ~ .modal-container-new.add-goal .modal,
#modal-add-goal:checked ~ .modal-container-new.add-goal .modal-background,
#modal-add-goal:checked ~ .modal-container-new.add-goal .modal-slide,
#modal-modify-goal:checked ~ .modal-container-new.modify-goal .modal,
#modal-modify-goal:checked ~ .modal-container-new.modify-goal .modal-background,
#modal-modify-goal:checked ~ .modal-container-new.modify-goal .modal-slide,
#modal-add-source:checked ~ .modal-container-new.add-source .modal,
#modal-add-source:checked ~ .modal-container-new.add-source .modal-background,
#modal-add-source:checked ~ .modal-container-new.add-source .modal-slide,
#modify-tool-agent-relationships:checked ~ .modal-container-new.modify-tool-agent-relationship .modal,
#modify-tool-agent-relationships:checked ~ .modal-container-new.modify-tool-agent-relationship .modal-background,
#modify-tool-agent-relationships:checked ~ .modal-container-new.modify-tool-agent-relationship .modal-slide,
#modal-add-agent:checked ~ .modal-container-new.add-agent .modal,
#modal-add-agent:checked ~ .modal-container-new.add-agent .modal-background,
#modal-add-agent:checked ~ .modal-container-new.add-agent .modal-slide,
#modal-modify-agent:checked ~ .modal-container-new.modify-agent .modal,
#modal-modify-agent:checked ~ .modal-container-new.modify-agent .modal-background,
#modal-modify-agent:checked ~ .modal-container-new.modify-agent .modal-slide,
#modal-magic-tool:checked ~ .modal-container-new.magic-tool .modal,
#modal-magic-tool:checked ~ .modal-container-new.magic-tool .modal-background,
#modal-magic-tool:checked ~ .modal-container-new.magic-tool .modal-slide,
#modal-add-project:checked ~ .modal-container-new.add-project .modal,
#modal-add-project:checked ~ .modal-container-new.add-project .modal-background,
#modal-add-project:checked ~ .modal-container-new.add-project .modal-slide,
#modal-modify-project:checked ~ .modal-container-new.modify-project .modal,
#modal-modify-project:checked ~ .modal-container-new.modify-project .modal-background,
#modal-modify-project:checked ~ .modal-container-new.modify-project .modal-slide,
#modal-export-project:checked ~ .modal-container-new.export-project .modal,
#modal-export-project:checked ~ .modal-container-new.export-project .modal-background,
#modal-export-project:checked ~ .modal-container-new.export-project .modal-slide,
#modal-add-mapping-entry:checked ~ .modal-container-new.add-mapping-entry .modal,
#modal-add-mapping-entry:checked ~ .modal-container-new.add-mapping-entry .modal-background,
#modal-add-mapping-entry:checked ~ .modal-container-new.add-mapping-entry .modal-slide,
#modal-add-mapping:checked ~ .modal-container-new.add-mapping .modal,
#modal-add-mapping:checked ~ .modal-container-new.add-mapping .modal-background,
#modal-add-mapping:checked ~ .modal-container-new.add-mapping .modal-slide,
#modal-modify-mapping:checked ~ .modal-container-new.modify-mapping .modal,
#modal-modify-mapping:checked ~ .modal-container-new.modify-mapping .modal-background,
#modal-modify-mapping:checked ~ .modal-container-new.modify-mapping .modal-slide,
#modal-add-strategy:checked ~ .modal-container-new.add-strategy .modal,
#modal-add-strategy:checked ~ .modal-container-new.add-strategy .modal-background,
#modal-add-strategy:checked ~ .modal-container-new.add-strategy .modal-slide,
#modal-modify-strategy:checked ~ .modal-container-new.modify-strategy .modal,
#modal-modify-strategy:checked ~ .modal-container-new.modify-strategy .modal-background,
#modal-modify-strategy:checked ~ .modal-container-new.modify-strategy .modal-slide,
#modal-add-notification:checked ~ .modal-container-new.add-notification .modal,
#modal-add-notification:checked ~ .modal-container-new.add-notification .modal-background,
#modal-add-notification:checked ~ .modal-container-new.add-notification .modal-slide,
#modal-modify-notification:checked ~ .modal-container-new.modify-notification .modal,
#modal-modify-notification:checked ~ .modal-container-new.modify-notification .modal-background,
#modal-modify-notification:checked ~ .modal-container-new.modify-notification .modal-slide,
#modal-add-strategy-component:checked ~ .modal-container-new.add-strategy-component .modal,
#modal-add-strategy-component:checked ~ .modal-container-new.add-strategy-component .modal-background,
#modal-add-strategy-component:checked ~ .modal-container-new.add-strategy-component .modal-slide,
#modal-modify-strategy-component:checked ~ .modal-container-new.modify-strategy-component .modal,
#modal-modify-strategy-component:checked ~ .modal-container-new.modify-strategy-component .modal-background,
#modal-modify-strategy-component:checked ~ .modal-container-new.modify-strategy-component .modal-slide,
#modal-add-csv-import:checked ~ .modal-container-new.add-import .modal,
#modal-add-csv-import:checked ~ .modal-container-new.add-import .modal-background,
#modal-add-csv-import:checked ~ .modal-container-new.add-import .modal-slide,
#modal-modify-csv-import:checked ~ .modal-container-new.modify-import .modal,
#modal-modify-csv-import:checked ~ .modal-container-new.modify-import .modal-background,
#modal-modify-csv-import:checked ~ .modal-container-new.modify-import .modal-slide,
#modal-add-transferimport:checked ~ .modal-container-new.add-transferimport .modal,
#modal-add-transferimport:checked ~ .modal-container-new.add-transferimport .modal-background,
#modal-add-transferimport:checked ~ .modal-container-new.add-transferimport .modal-slide,
#modal-modify-transferimport:checked ~ .modal-container-new.modify-transferimport .modal,
#modal-modify-transferimport:checked ~ .modal-container-new.modify-transferimport .modal-background,
#modal-modify-transferimport:checked ~ .modal-container-new.modify-transferimport .modal-slide,
#slide-modal-edit-description:checked ~ .modal-container-new.edit-description .modal,
#slide-modal-edit-description:checked ~ .modal-container-new.edit-description .modal-background,
#slide-modal-edit-description:checked ~ .modal-container-new.edit-description .modal-slide {
  display: block;
}

#modal-container-agent-magic-tool form {
  padding: 2rem;
  padding: 0 2rem;
  transition: max-height 0.2s, padding 0.2s;
  background-color: #1A1A1A;
  display: grid;
  grid-auto-rows: max-content;
  grid-template-columns: [left-start] 2fr [left-third-end] 1fr [left-end right-start] 1fr [middle-third-end] 2fr [right-end];
  column-gap: 4rem;
  max-width: 100%;
  overflow-x: hidden;
  display: none;
}
#modal-container-agent-magic-tool form.open {
  max-height: 4000px;
  padding: 2rem;
}
#modal-container-agent-magic-tool form table {
  width: 100%;
  table-layout: fixed;
}
#modal-container-agent-magic-tool form table td:first-child {
  padding-right: 1rem;
}
#modal-container-agent-magic-tool form table td:last-child {
  padding-left: 1rem;
}
#modal-container-agent-magic-tool form table td:not(:first-child):not(:last-child) {
  padding: 0 1rem;
}
#modal-container-agent-magic-tool form table .table-sub-headline {
  padding-top: 1rem;
  font-style: italic;
}
#modal-container-agent-magic-tool form table tr.hide-row-if-disabled-select:has(select:disabled:not(.show-disabled)) {
  display: none;
}
#modal-container-agent-magic-tool form.small-gap {
  column-gap: 2rem;
}
#modal-container-agent-magic-tool form > div {
  min-width: 0;
}
#modal-container-agent-magic-tool form > div .form-group-headline {
  font-size: 2rem;
  font-weight: bold;
  opacity: 0.5;
}
#modal-container-agent-magic-tool form > div .form-group-headline::before {
  content: "";
  display: block;
  width: 100%;
  height: 0.1rem;
  background-color: rgba(255, 255, 255, 0.06);
  margin: 4rem 0rem 2rem 0rem;
}
#modal-container-agent-magic-tool form > div .form-group-headline-subline {
  font-size: 1.3rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.05);
}
#modal-container-agent-magic-tool form > div .flex-form-item-group {
  display: flex;
  gap: 2rem;
  align-items: baseline;
}
#modal-container-agent-magic-tool form .form-row-1 {
  grid-row: 1/1;
  grid-column: left-start/right-end;
}
#modal-container-agent-magic-tool form .form-row-1 .mt-headline {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  font-style: normal;
}
#modal-container-agent-magic-tool form .form-row-1 .mt-headline.modify-mode {
  color: #e9965d;
}
#modal-container-agent-magic-tool form .form-row-2 {
  grid-row: 2/2;
  grid-column: left-start/right-end;
}
#modal-container-agent-magic-tool form .form-row-2-col-1 {
  grid-row: 2/2;
  grid-column: left-start/left-end;
}
#modal-container-agent-magic-tool form .form-row-2-col-2 {
  grid-row: 2/2;
  grid-column: right-start/right-end;
}
#modal-container-agent-magic-tool form .form-row-3-full-width {
  grid-row: 3/3;
  grid-column: left-start/right-end;
}
#modal-container-agent-magic-tool form .form-row-3 {
  grid-row: 3/3;
  grid-column: left-start/right-end;
}
#modal-container-agent-magic-tool form .form-row-3-col-1 {
  grid-row: 3/3;
  grid-column: left-start/left-end;
}
#modal-container-agent-magic-tool form .form-row-3-col-2 {
  grid-row: 3/3;
  grid-column: right-start/right-end;
}
#modal-container-agent-magic-tool form .form-row-4 {
  grid-row: 4/4;
  grid-column: left-start/right-end;
}
#modal-container-agent-magic-tool form .form-row-4-col-1 {
  grid-row: 4/4;
  grid-column: left-start/left-end;
}
#modal-container-agent-magic-tool form .form-row-4-col-2 {
  grid-row: 4/4;
  grid-column: right-start/right-end;
}
#modal-container-agent-magic-tool form .form-row-4-full-width {
  grid-row: 4/4;
  grid-column: left-start/right-end;
}
#modal-container-agent-magic-tool form .form-row-5-full-width {
  grid-row: 5/5;
  grid-column: left-start/right-end;
}
#modal-container-agent-magic-tool form .form-row-5 {
  grid-row: 5/5;
  grid-column: left-start/right-end;
}
#modal-container-agent-magic-tool form .form-row-5-col-1 {
  grid-row: 5/5;
  grid-column: left-start/left-end;
}
#modal-container-agent-magic-tool form .form-row-5-col-2 {
  grid-row: 5/5;
  grid-column: right-start/right-end;
}
#modal-container-agent-magic-tool form .form-row-6 {
  grid-row: 6/6;
  grid-column: left-start/right-end;
}
#modal-container-agent-magic-tool form .form-row-7 {
  grid-row: 7/7;
  grid-column: left-start/right-end;
}
#modal-container-agent-magic-tool form .form-grid-row-2 {
  grid-row: 2/2;
}
#modal-container-agent-magic-tool form .form-grid-row-3 {
  grid-row: 3/3;
}
#modal-container-agent-magic-tool form .form-grid-row-4 {
  grid-row: 4/4;
}
#modal-container-agent-magic-tool form .form-grid-row-5 {
  grid-row: 5/5;
}
#modal-container-agent-magic-tool form .form-grid-row-6 {
  grid-row: 6/6;
}
#modal-container-agent-magic-tool form .form-grid-row-7 {
  grid-row: 7/7;
}
#modal-container-agent-magic-tool form .form-grid-row-8 {
  grid-row: 8/8;
}
#modal-container-agent-magic-tool form .form-grid-row-9 {
  grid-row: 9/9;
}
#modal-container-agent-magic-tool form .form-grid-row-10 {
  grid-row: 10/10;
}
#modal-container-agent-magic-tool form .form-grid-col-left-half {
  grid-column: left-start/left-end;
}
#modal-container-agent-magic-tool form .form-grid-col-right-half {
  grid-column: right-start/right-end;
}
#modal-container-agent-magic-tool form .form-grid-col-left-third {
  grid-column: left-start/left-third-end;
}
#modal-container-agent-magic-tool form .form-grid-col-middle-third {
  grid-column: left-third-end/middle-third-end;
}
#modal-container-agent-magic-tool form .form-grid-col-right-third {
  grid-column: middle-third-end/right-end;
}
#modal-container-agent-magic-tool form .form-grid-col-full-width {
  grid-column: left-start/right-end;
}
#modal-container-agent-magic-tool form .form-grid-col-two-thirds-left {
  grid-column: left-start/middle-third-end;
}
#modal-container-agent-magic-tool form .form-grid-col-two-thirds-right {
  grid-column: left-third-end/right-end;
}
#modal-container-agent-magic-tool form .mt-form-item .explain,
#modal-container-agent-magic-tool form .explain-tool {
  font-size: 1.25rem;
  background-color: rgba(255, 255, 255, 0.04);
  font-style: normal;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  white-space: normal;
}
#modal-container-agent-magic-tool form .mt-form-item {
  margin-bottom: 1rem;
}
#modal-container-agent-magic-tool form .mt-form-item .title {
  margin-top: 2rem;
  font-weight: bold;
  opacity: 0.7;
  transform: scaleX(0.95);
  transform-origin: left;
  white-space: nowrap;
}
#modal-container-agent-magic-tool form .mt-form-item .title input {
  display: inline;
  border: none;
  font-size: 1.5rem;
  width: 10rem;
  padding: 0;
  margin-left: 0.5rem;
}
#modal-container-agent-magic-tool form .mt-form-item:has(.display-none) {
  display: none;
}
#modal-container-agent-magic-tool form .inlineContainer {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#modal-container-agent-magic-tool form .inlineContainer select {
  flex: 1;
}
#modal-container-agent-magic-tool form .inlineContainer input {
  width: 6rem;
  flex: 0 0 auto;
}
#modal-container-agent-magic-tool form .mt-form-item-desc-container:not(.full-width) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  width: 100%;
}
#modal-container-agent-magic-tool form .mt-form-item-desc-container .mt-form-item {
  margin-bottom: 0 !important;
}
#modal-container-agent-magic-tool form .mt-form-item-desc-container .mt-form-item-desc {
  display: flex;
  flex-direction: column;
  justify-content: end;
  overflow: hidden;
}
#modal-container-agent-magic-tool form .mt-form-item-desc-container .mt-form-item-desc p {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
#modal-container-agent-magic-tool form .mt-form-item-desc-container .mt-form-item-desc p.error {
  color: #A8514A !important;
}
#modal-container-agent-magic-tool form .mt-form-item-desc-container .mt-form-item-desc p.error::before {
  content: "Error: ";
  font-weight: bold;
}
#modal-container-agent-magic-tool form .mt-form-item-desc-container .mt-form-item,
#modal-container-agent-magic-tool form .mt-form-item-desc-container .mt-form-item-desc {
  flex: 1;
}
#modal-container-agent-magic-tool form .mt-form-item-desc p {
  width: 100%;
  font-size: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-family: "Golos Text", "Roboto", Arial;
  background-color: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.75rem;
}
#modal-container-agent-magic-tool form .mt-form-button-box {
  display: flex;
  justify-content: space-evenly;
  gap: 1rem;
  margin-top: 2rem;
}
#modal-container-agent-magic-tool form .mt-form-button-box input,
#modal-container-agent-magic-tool form .mt-form-button-box label {
  flex-grow: 1;
  width: 100%;
  margin: 0;
  border-radius: 1.5rem;
}
#modal-container-agent-magic-tool form input,
#modal-container-agent-magic-tool form select {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  background-color: rgba(255, 255, 255, 0.04);
  color: #fff;
}
#modal-container-agent-magic-tool form input.modify-mode,
#modal-container-agent-magic-tool form select.modify-mode {
  background-color: #e9965d;
}
#modal-container-agent-magic-tool form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#modal-container-agent-magic-tool form .styled-select {
  margin-bottom: 0.5rem;
}
#modal-container-agent-magic-tool form select {
  cursor: pointer;
}
#modal-container-agent-magic-tool form #mt-items-allocation-ofield2-container,
#modal-container-agent-magic-tool form #mt-items-allocation-ofield3-container {
  display: contents;
}
#modal-container-agent-magic-tool form.visible {
  display: grid;
  /* Firefox */
  scrollbar-width: none;
  /* IE / Edge (old) */
  -ms-overflow-style: none;
}
#modal-container-agent-magic-tool form.visible::-webkit-scrollbar {
  display: none;
}

#slide-modal-edit-description:checked ~ .modal-container-new.edit-description {
  width: 100vw;
  justify-content: right;
}

#modal-add-mapping-entry:checked ~ .modal-mapping-entry {
  display: flex;
}

.modal-background {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(0.2rem);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 9998;
}
.modal-background.smoothHide {
  opacity: 0;
}

#modal-container-csv-import,
#modal-container-modify-csv-import,
.modal-large {
  width: 80rem;
}

#modal-container-project,
#modal-container-project-export {
  width: 80rem;
}
#modal-container-project .modal-button-container.small,
#modal-container-project-export .modal-button-container.small {
  height: 4rem;
}

#add-mapping-entry-errors,
#bulk-add-mapping-entry-errors,
#modal-add-settings-user-errors,
.modal-error-box,
#modal-add-settings-viewer-errors,
#modal-modify-settings-user-errors,
#modal-modify-settings-viewer-errors {
  background-color: #A8514A;
  color: #fff;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.modal-error-box {
  display: none;
  list-style-type: none;
}
.modal-error-box.visible {
  display: block;
}

#bulk-add-mapping-entry-errors {
  margin-bottom: 0;
  margin-top: 1rem;
  display: none;
}
#bulk-add-mapping-entry-errors.visible {
  display: block;
}

#modal-container-new-mapping-entry {
  width: 80rem;
  flex-direction: column;
}
#modal-container-new-mapping-entry #add-mapping-entry-errors {
  display: none;
}
#modal-container-new-mapping-entry #add-mapping-entry-errors.visible {
  display: block;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content {
  display: none;
  overflow: auto;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible {
  flex: 1;
  display: flex;
  align-self: stretch;
  flex-direction: column;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container {
  flex: 1;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container #me-a-imports-add-button,
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container .me-a-import-constraints-add-button {
  display: flex;
  padding: 1rem;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.04);
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container #me-a-imports-add-button.hidden,
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container .me-a-import-constraints-add-button.hidden {
  display: none;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container #me-a-imports-add-button.disabled,
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container .me-a-import-constraints-add-button.disabled {
  opacity: 0.5;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container #me-a-imports-add-button:not(.disabled):hover,
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container .me-a-import-constraints-add-button:not(.disabled):hover {
  cursor: pointer;
  background-color: #3d3a4e !important;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container #me-a-imports-add-button img,
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container .me-a-import-constraints-add-button img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container #me-a-imports-add-button {
  height: 5rem;
  width: 5rem;
  border-radius: 2.5rem;
  margin-left: 1rem;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container #me-a-imports-add-button img {
  width: 2rem;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container #me-a-imports-add-button.disabled {
  opacity: 0.5;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container .me-a-import-constraints-add-button {
  height: 3rem;
  width: 3rem;
  border-radius: 1.5rem;
  margin-top: 1rem;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container .me-a-import-constraints-add-button img {
  width: 1.5rem;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container .me-a-import-constraints-add-button.disabled {
  opacity: 0.5;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible select,
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible input {
  box-sizing: border-box;
  height: 4.5rem;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  align-self: stretch;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import {
  width: 20rem;
  padding-right: 2rem;
  flex: 1;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints {
  flex: 1;
  display: none;
  padding-top: 0.5rem;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints.visible {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-allRows {
  padding: 0.3rem 1rem;
  font-size: 1.2rem;
  display: inline-block;
  background-color: #5d5d5d;
  color: #3d3a4e;
  border-radius: 0.3rem;
  align-self: flex-start;
  width: auto;
  min-width: auto;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-allRows:not(.disabled):hover {
  cursor: pointer;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-allRows.active {
  background-color: #3d3a4e;
  color: #fff;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-allRows.disabled {
  opacity: 0.5;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-pair {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-pair .custom-select {
  flex: 1;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-pair.hidden {
  display: none;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-pair .me-a-import-constraint-pair-value {
  text-align: center;
  padding: 0 1rem;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-pair select,
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-pair input {
  margin-bottom: 0 !important;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-join-element {
  font-weight: bold;
  font-size: 1.2rem;
  color: #333333;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-join-element.hidden {
  display: none;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-button-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-button-container span {
  margin: 0 !important;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-button-container .me-a-import-constraints-join-type {
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 0.75rem;
  overflow: hidden;
  font-weight: bold;
  height: 2.5rem;
  padding: 0;
  display: flex;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-button-container .me-a-import-constraints-join-type.hidden {
  display: none;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-button-container .me-a-import-constraints-join-type.disabled {
  opacity: 0.5;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-button-container .me-a-import-constraints-join-type:not(.disabled) div:hover {
  cursor: pointer;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-button-container .me-a-import-constraints-join-type div {
  font-size: 1rem;
  display: inline-block;
  width: 3rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  margin: 0;
}
#modal-container-new-mapping-entry #add-mapping-entry-form-content .me-a-import-item .me-a-import .me-a-import-constraints .me-a-import-constraints-button-container .me-a-import-constraints-join-type div.checked {
  background-color: #6A2C55;
  color: #fff;
}
#modal-container-new-mapping-entry .add-mapping-entry-form-row1 {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
}
#modal-container-new-mapping-entry .add-mapping-entry-form-row1 select,
#modal-container-new-mapping-entry .add-mapping-entry-form-row1 input {
  margin-bottom: 0 !important;
}
#modal-container-new-mapping-entry .add-mapping-entry-form-row1 .styled-select {
  justify-content: center;
}
#modal-container-new-mapping-entry .add-mapping-entry-form-row1 div {
  flex: 1;
}

.modal:has(#add-component-form),
.modal:has(#modify-component-container) {
  height: auto;
  max-height: none;
  overflow: visible;
}

#add-component-form,
#modify-component-container {
  height: auto;
  max-height: none;
  overflow: visible;
}
#add-component-form .modal-content-container,
#modify-component-container .modal-content-container {
  height: auto;
  max-height: none;
  overflow: visible;
}
#add-component-form .builder-block,
#modify-component-container .builder-block {
  margin-top: 2rem;
}
#add-component-form .builder-block #strategy-component-o-field-value,
#modify-component-container .builder-block #strategy-component-o-field-value {
  width: 100%;
}
#add-component-form .range-row,
#modify-component-container .range-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1rem;
  justify-content: center;
}
#add-component-form .range-row input,
#modify-component-container .range-row input {
  text-align: center;
}
#add-component-form .range-row .range-dash,
#modify-component-container .range-row .range-dash {
  font-weight: 600;
  margin: 0 2px;
}
#add-component-form .range-row .inf-btn,
#modify-component-container .range-row .inf-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}
#add-component-form .range-row .inf-btn.active,
#modify-component-container .range-row .inf-btn.active {
  background: #2d7ff9;
  color: #fff;
}
#add-component-form .range-row .inf-btn.inactive,
#modify-component-container .range-row .inf-btn.inactive {
  background: #e5e7eb;
  color: #6b7280;
}
#add-component-form .range-row .range-row input.input-inactive,
#modify-component-container .range-row .range-row input.input-inactive {
  opacity: 0.5;
}
#add-component-form .range-row .percent-toggle,
#modify-component-container .range-row .percent-toggle {
  margin-top: 10px;
}
#add-component-form .range-row .percent-label,
#modify-component-container .range-row .percent-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}
#add-component-form .range-row .percent-label input[type=checkbox],
#modify-component-container .range-row .percent-label input[type=checkbox] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

#modal-container-modify-tool-agent-relationships .modal-content-container .modal-content-container-item {
  margin-bottom: 0;
}
#modal-container-modify-tool-agent-relationships .modal-content-container input,
#modal-container-modify-tool-agent-relationships .modal-content-container select {
  margin-bottom: 0 !important;
}

.modal {
  display: none;
  background-color: #1A1A1A;
  box-sizing: border-box;
  z-index: 9999;
  padding: 2rem 2rem;
  overflow: auto;
  overflow-x: hidden;
  color: #fbfbfb;
  font-size: 1.5rem;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
  /* Animation */
  opacity: 0;
}
.modal:not(.modal-large) {
  width: 60rem;
}
.modal:not(.modal-large):not(.slide) .modal-content-container {
  max-height: 85rem;
  overflow: auto;
  transition: height 1s ease;
}
.modal:not(.modal-large) .modal-button-container {
  height: 8rem;
}
.modal.modal-promotion {
  padding: 0;
  background-color: none;
  position: relative;
  border: 0.5rem solid #fff;
  overflow: hidden;
}
.modal.modal-promotion:hover {
  cursor: pointer;
}
.modal.modal-promotion > label {
  cursor: pointer;
  position: absolute;
  right: 0;
}
.modal.modal-promotion > label img {
  width: 3rem;
  height: 3rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
.modal.modal-promotion.landscape {
  width: 60vw;
  height: 30vw;
}
.modal.modal-promotion.landscape #promotion-image {
  width: 60vw;
  height: 30vw;
}
.modal.modal-promotion.portrait {
  width: 40vh;
  height: 80vh;
}
.modal.modal-promotion.portrait #promotion-image {
  width: 40vh;
  height: 80vh;
}
.modal.modal-promotion #promotion-image {
  background-repeat: no-repeat;
  background-size: contain;
  /* scale SVG to fit */
  background-position: center;
}
.modal:not(.slide) {
  border-radius: 1.5rem;
  animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal:not(.slide).smoothHide {
  animation: scaleDown 0.15s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal.slide {
  height: 100vh;
  animation: slideInFromRight 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal.slide.smoothHide {
  animation: slideOutToRight 0.15s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal.slide.right {
  transform-origin: 100% 50%;
}
.modal.slide form {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 13rem);
}
.modal.slide form .modal-content-container {
  flex: 1;
  overflow: auto;
}
.modal.slide form .modal-content-container .modal-content-container-item h4 {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.modal.slide form .modal-content-container .modal-content-container-item .description-container {
  transition: opacity 0.15s;
}
.modal.slide form .modal-content-container .modal-content-container-item .description-container.fadeOut {
  opacity: 0;
}
.modal.slide form .modal-content-container .modal-content-container-item .char-count {
  font-size: 1rem;
  color: #3d3a4e;
  margin-top: -0.5rem;
  margin-bottom: 0.5rem;
  text-align: right;
}
.modal ul {
  list-style-type: none !important;
}
.modal .modal-all-image {
  background-color: yellow;
}
.modal .modal-header-container {
  height: 7rem;
  margin: -2rem;
  margin-bottom: 2rem;
  background-color: rgba(0, 0, 0, 0);
  padding: 2rem 4rem;
  color: #fbfbfb;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: top;
}
.modal .modal-header-container h3 {
  font-size: 2rem;
  line-height: 5rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
  /* Force single line */
  overflow: hidden;
  /* Hide overflow */
  text-overflow: ellipsis;
  /* Show ... */
  font-weight: 600;
  letter-spacing: -0.01em;
}
.modal .modal-header-container h3 img {
  width: 3rem;
  height: 3rem;
  margin-left: 1rem;
  margin-right: 0.2rem;
}
.modal .modal-header-container label {
  cursor: pointer;
}
.modal .modal-header-container label img {
  width: 3rem;
  height: 3rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
.modal .flex-modal-items-container {
  margin: 1rem auto;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
.modal .flex-modal-items-container .modal-content-container-item {
  flex-grow: 1;
}
.modal .horizontal-container {
  display: flex;
}
.modal .horizontal-container > div {
  flex: 1;
}
.modal .modal-content-container {
  overflow: auto;
}
.modal .modal-content-container .modal-content-container-item {
  margin-bottom: 2rem;
  background-color: #1A1A1A;
  padding: 1rem;
}
.modal .modal-content-container .modal-content-container-item input:not([type=text]):hover,
.modal .modal-content-container .modal-content-container-item select:hover,
.modal .modal-content-container .modal-content-container-item label:hover {
  cursor: pointer;
}
.modal .modal-content-container .modal-content-container-item select:focus {
  outline: none;
}
.modal .modal-content-container .modal-content-container-item .showNextSibling {
  padding: 0.5rem;
  background-color: #aaaaaa;
  border-radius: 0.5rem;
}
.modal .modal-content-container .modal-content-container-item .showNextSibling:hover {
  cursor: pointer;
}
.modal .modal-content-container .modal-content-container-item.invisible,
.modal .modal-content-container .modal-content-container-item .invisible {
  display: none;
}
.modal .modal-content-container .timeFrameBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 20rem;
  gap: 0.8rem;
  font-size: 1.5rem;
}
.modal .modal-content-container .timeFrameBox input {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1.2rem 1.4rem;
  background-color: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: "Golos Text", "Roboto", Arial;
}
.modal .modal-content-container .modal-content-tab-header {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}
.modal .modal-content-container .modal-content-tab-header label {
  display: block;
  flex: 1;
  padding: 1rem;
  text-align: center;
  color: #aaaaaa;
  border-bottom: 0.2rem solid #aaaaaa;
  transition: all 0.1s ease-in-out;
}
.modal .modal-content-container .modal-content-tab-header label:hover {
  cursor: pointer;
}
.modal .modal-content-container .modal-content-tab-header label.active {
  color: #F2E9EE;
  border-bottom: 0.2rem solid #F2E9EE;
  font-weight: bold;
}
.modal .modal-content-container .modal-content-tab-content {
  transition: all 0.1s ease-in-out;
}
.modal .modal-content-container .modal-content-tab-content > div,
.modal .modal-content-container .modal-content-tab-content > input {
  display: none !important;
}
.modal .modal-content-container .modal-content-tab-content input:checked ~ div {
  display: block !important;
}
.modal form,
.modal .modify-container-instead-of-form {
  width: 100%;
}
.modal form .modal-content-container-item > input[type=text],
.modal form .modal-content-container-item > input[type=number],
.modal form .modal-content-container-item > input[type=password],
.modal form select,
.modal .modify-container-instead-of-form .modal-content-container-item > input[type=text],
.modal .modify-container-instead-of-form .modal-content-container-item > input[type=number],
.modal .modify-container-instead-of-form .modal-content-container-item > input[type=password],
.modal .modify-container-instead-of-form select {
  display: block;
  width: -webkit-calc(100% - 0px);
  width: -moz-calc(100% - 0px);
  width: calc(100% - 0px);
  margin-bottom: 0.5rem;
}
.modal form .modal-content-container-item:has(.multiple-columns),
.modal .modify-container-instead-of-form .modal-content-container-item:has(.multiple-columns) {
  display: flex;
  gap: 1rem;
}
.modal form .modal-content-container-item:has(.multiple-columns) .multiple-columns,
.modal .modify-container-instead-of-form .modal-content-container-item:has(.multiple-columns) .multiple-columns {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.modal form .modal-content-container-item:has(.multiple-columns) .multiple-columns input,
.modal .modify-container-instead-of-form .modal-content-container-item:has(.multiple-columns) .multiple-columns input {
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.modal form .modal-content-container-item:has(.multiple-columns) .column-1,
.modal .modify-container-instead-of-form .modal-content-container-item:has(.multiple-columns) .column-1 {
  flex: 1;
}
.modal form .modal-content-container > .grid,
.modal .modify-container-instead-of-form .modal-content-container > .grid {
  display: grid;
  grid-auto-rows: max-content;
  grid-template-columns: [left-start] 1fr [left-end right-start] 1fr [right-end];
  gap: 1rem;
}
.modal form .modal-content-container > .grid .grid-left,
.modal .modify-container-instead-of-form .modal-content-container > .grid .grid-left {
  grid-row: 1/1;
  grid-column: left-start/left-end;
}
.modal form .modal-content-container > .grid .grid-right,
.modal .modify-container-instead-of-form .modal-content-container > .grid .grid-right {
  grid-row: 1/1;
  grid-column: right-start/right-end;
}
.modal form input[type=text],
.modal form input[type=number],
.modal form input[type=password],
.modal form input[type=string],
.modal form select,
.modal form textarea,
.modal .modify-container-instead-of-form input[type=text],
.modal .modify-container-instead-of-form input[type=number],
.modal .modify-container-instead-of-form input[type=password],
.modal .modify-container-instead-of-form input[type=string],
.modal .modify-container-instead-of-form select,
.modal .modify-container-instead-of-form textarea {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1.2rem 1.4rem;
  font-size: 1.5rem;
  color: #fff;
  font-family: "Golos Text", "Roboto", Arial;
  transition: all 0.2s ease;
}
.modal form select,
.modal .modify-container-instead-of-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("../img/dropdown-select.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  /* <-- controls arrow position */
  background-size: 1.5rem 1.5rem;
}
.modal form input[type=text]:focus,
.modal form input[type=number]:focus,
.modal form input[type=password]:focus,
.modal form select:focus,
.modal form textarea:focus,
.modal .modify-container-instead-of-form input[type=text]:focus,
.modal .modify-container-instead-of-form input[type=number]:focus,
.modal .modify-container-instead-of-form input[type=password]:focus,
.modal .modify-container-instead-of-form select:focus,
.modal .modify-container-instead-of-form textarea:focus {
  outline: none;
  border-color: #6A2C55;
  box-shadow: inset 0 0 0 2px rgba(59, 125, 221, 0.55), inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
.modal form input[type=checkbox],
.modal .modify-container-instead-of-form input[type=checkbox] {
  margin-left: 1rem;
}
.modal form input[type=date],
.modal .modify-container-instead-of-form input[type=date] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 14rem;
}
.modal form .dropFile,
.modal .modify-container-instead-of-form .dropFile {
  border: 1px dashed #aaaaaa;
  border-radius: 1rem;
  margin: 1rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal form .dropFile:hover,
.modal form .dropFile label,
.modal .modify-container-instead-of-form .dropFile:hover,
.modal .modify-container-instead-of-form .dropFile label {
  cursor: pointer;
}
.modal form .dropFile input,
.modal .modify-container-instead-of-form .dropFile input {
  display: none;
}
.modal form .dropFile.markzone,
.modal .modify-container-instead-of-form .dropFile.markzone {
  background-color: #6A2C55;
}
.modal form .modal-button-container,
.modal .modify-container-instead-of-form .modal-button-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: end;
  flex-basis: auto;
  margin: 0 auto;
}
.modal form .modal-button-container.invisible,
.modal .modify-container-instead-of-form .modal-button-container.invisible {
  display: none;
}
.modal form .modal-button-container.small,
.modal .modify-container-instead-of-form .modal-button-container.small {
  justify-content: start;
}
.modal form .modal-button-container input:not([type=submit]),
.modal .modify-container-instead-of-form .modal-button-container input:not([type=submit]) {
  margin: 0;
}
.modal form .modal-button-container .modalButton,
.modal .modify-container-instead-of-form .modal-button-container .modalButton {
  display: block;
  height: auto !important;
  line-height: 1.7;
  width: 30%;
  border: none;
  border-radius: 1.5rem;
  font-size: 1.5rem;
  padding: 1.5rem;
  background-color: #6A2C55;
  color: #fbfbfb;
  text-align: center;
}
.modal form .modal-button-container .modalButton.small,
.modal .modify-container-instead-of-form .modal-button-container .modalButton.small {
  padding: 0.5rem 1.5rem;
}
.modal form .modal-button-container .modalButton:hover,
.modal .modify-container-instead-of-form .modal-button-container .modalButton:hover {
  cursor: pointer;
}
.modal form .modal-button-container .modalButton.active-sec,
.modal .modify-container-instead-of-form .modal-button-container .modalButton.active-sec {
  background-color: #3d3a4e;
}
.modal form .modal-button-container .modalButton.passive,
.modal .modify-container-instead-of-form .modal-button-container .modalButton.passive {
  background-color: #5d5d5d;
  color: #fbfbfb;
}
.modal form .modal-button-container .modalButton.passive:hover,
.modal .modify-container-instead-of-form .modal-button-container .modalButton.passive:hover {
  cursor: auto;
}
.modal form .modal-button-container .modalButton.no-background,
.modal .modify-container-instead-of-form .modal-button-container .modalButton.no-background {
  background-color: rgba(0, 0, 0, 0);
}
.modal form .modal-button-container .modalButton:not(:last-child),
.modal .modify-container-instead-of-form .modal-button-container .modalButton:not(:last-child) {
  margin-right: 3%;
}
.modal form .modal-button-container .modalHint,
.modal .modify-container-instead-of-form .modal-button-container .modalHint {
  display: block;
  height: auto !important;
  line-height: 1.7;
  width: 30%;
  font-size: 1.5rem;
  padding: 1.5rem;
  color: #B08D57;
  text-align: center;
}
.modal form .explain,
.modal .modify-container-instead-of-form .explain {
  font-size: 1.25rem;
  background-color: rgba(255, 255, 255, 0.04);
  font-style: normal;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  white-space: normal;
}
.modal form .explain.margin-top,
.modal .modify-container-instead-of-form .explain.margin-top {
  margin-top: 0.5rem;
}
.modal form textarea,
.modal .modify-container-instead-of-form textarea {
  width: 100%;
  resize: none;
  box-sizing: border-box;
}
.modal form textarea:disabled,
.modal .modify-container-instead-of-form textarea:disabled {
  color: #666;
}
.modal form textarea[disabled],
.modal .modify-container-instead-of-form textarea[disabled] {
  color: #666;
}
.modal .add-api-job-form select option,
.modal .add-agent-profile-form select option {
  background-color: #333333;
}
.modal .form-wrapper {
  max-height: 85rem;
  width: 100%;
  overflow: auto;
  display: grid;
  grid-template-rows: 1fr auto;
}
.modal .form-wrapper form .mt-form-button-box {
  grid-column: 1/-1;
  position: sticky;
  bottom: 0;
  background-color: #1A1A1A;
  z-index: 10;
  padding-top: 1rem;
}
.modal .modal-table-wrapper {
  width: 100%;
  max-height: 20rem;
  overflow-x: auto;
}
.modal .notification-recipient-checkbox-container,
.modal .notification-project-checkbox-container {
  display: flex;
  align-items: center;
}

#add-agent-imports-and-projects-container,
#modify-agent-imports-and-projects-container {
  gap: 1rem;
}

#addProjectAssignImportsContainer .checkbox-container,
#modifyProjectAssignImportsContainer .checkbox-container {
  overflow-x: auto;
  scrollbar-width: none;
  overflow-y: auto;
  overflow-x: hidden;
}
#addProjectAssignImportsContainer .checkbox-container::-webkit-scrollbar,
#modifyProjectAssignImportsContainer .checkbox-container::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}

#timeProgression,
#dateFormat {
  list-style-type: none;
  text-align: left;
}
#timeProgression li,
#dateFormat li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#timeProgression li input,
#timeProgression li label,
#dateFormat li input,
#dateFormat li label {
  display: inline;
  width: auto;
  margin: 0px 0.5rem;
}

.add-notification input,
.modify-notification input {
  display: block;
}
.add-notification #notification-add-monthly-container h4,
.add-notification #notification-modify-monthly-container h4,
.add-notification #notification-add-sendtime-container h4,
.add-notification #notification-modify-sendtime-container h4,
.modify-notification #notification-add-monthly-container h4,
.modify-notification #notification-modify-monthly-container h4,
.modify-notification #notification-add-sendtime-container h4,
.modify-notification #notification-modify-sendtime-container h4 {
  margin-top: 1rem;
}

#magic-tool-form-wrapper.loading {
  height: 10rem;
  position: relative;
  overflow: hidden;
  animation: expandLoader 1000ms ease forwards;
}
#magic-tool-form-wrapper.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.4rem;
  height: 2.4rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(106, 44, 85, 0.15), #6A2C55);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.3rem), #000 calc(100% - 0.3rem));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.3rem), #000 calc(100% - 0.3rem));
  animation: spin 0.9s linear infinite;
}

@keyframes expandLoader {
  from {
    height: 10rem;
  }
  to {
    height: 20rem;
  }
}
@keyframes scaleUp {
  0% {
    transform: scaleY(0.8);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}
@keyframes scaleDown {
  0% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0.8);
    opacity: 0;
  }
}
@keyframes slideInFromRight {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes slideOutToRight {
  0% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  99.9% {
    opacity: 0;
  }
  100% {
    display: none;
  }
}
@media only screen and (max-width: 1700px) and (min-aspect-ratio: 15/9), only screen and (max-height: 1100px) {
  #modal-container-project .modal-content-container,
  #modal-container-csv-import .modal-content-container,
  #modal-container-modify-csv-import .modal-content-container,
  #modal-container-new-goal .modal-content-container,
  #modal-container-new-mapping-entry .modal-content-container,
  #modal-container-agent .modal-content-container,
  #modal-container-add-api-job .modal-content-container,
  #modal-container-modify-api-job .modal-content-container,
  #modal-container-add-api-account .modal-content-container,
  #modal-container-modify-api-account .modal-content-container {
    max-height: 48rem;
  }
  #modal-container-agent-magic-tool .form-wrapper {
    max-height: 56rem;
  }
}
@media only screen and (max-width: 576px), only screen and (orientation: portrait) {
  .modal {
    width: 90vw !important;
  }
  .modal.modal-large {
    width: 95vw !important;
  }
  .modal:not(.slide) .modal-content-container {
    max-height: 60vh !important;
  }
  .modal .modal-button-container {
    height: 8rem;
  }
  .modal .modal-content-container .timeFrameBox {
    flex-wrap: wrap;
    width: 100% !important;
  }
  .modal .modal-content-container .timeFrameBox > * {
    flex: 0 0 30%;
  }
  #addProjectAssignImportsContainer .import-row p,
  #modifyProjectAssignImportsContainer .import-row p {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  #modal-container-project .modal-content-container,
  #modal-container-csv-import .modal-content-container,
  #modal-container-modify-csv-import .modal-content-container,
  #modal-container-new-goal .modal-content-container,
  #modal-container-new-column .modal-content-container,
  #modal-container-new-source .modal-content-container,
  #modal-container-new-mapping-entry .modal-content-container,
  #modal-container-agent .modal-content-container,
  #modal-container-add-api-job .modal-content-container,
  #modal-container-modify-api-job .modal-content-container,
  #modal-container-add-api-account .modal-content-container,
  #modal-container-modify-api-account .modal-content-container {
    max-height: 80vh;
  }
  #modal-container-agent-magic-tool .form-wrapper {
    height: 80rem;
    max-height: 80rem;
  }
}
@media only screen and (aspect-ratio: 1/1) {
  /* square viewport styles for video recording */
  body[data-video-mode=true] .modal {
    font-size: 3.5rem !important;
    padding: 5rem 2rem;
  }
  body[data-video-mode=true] .modal h4 {
    font-size: 4rem !important;
  }
  body[data-video-mode=true] .modal .form-wrapper {
    font-size: 3rem !important;
  }
  body[data-video-mode=true] .modal .form-wrapper input[type=text],
  body[data-video-mode=true] .modal .form-wrapper input[type=password],
  body[data-video-mode=true] .modal .form-wrapper input[type=number],
  body[data-video-mode=true] .modal .form-wrapper select,
  body[data-video-mode=true] .modal .form-wrapper option,
  body[data-video-mode=true] .modal .form-wrapper textarea {
    font-size: 3rem !important;
  }
  body[data-video-mode=true] .modal .form-wrapper form {
    gap: 2rem 3rem !important;
  }
  body[data-video-mode=true] .modal .form-wrapper form .form-group-headline {
    font-size: 4rem !important;
  }
  body[data-video-mode=true] .modal .form-wrapper form .form-group-headline-subline {
    font-size: 2.8rem !important;
  }
  body[data-video-mode=true] .modal .form-wrapper form .inlineContainer input {
    width: 9rem !important;
  }
  body[data-video-mode=true] .modal .modal-header-container {
    padding: 5rem;
    height: 15rem;
    margin: -5rem;
    margin-bottom: 5rem;
  }
  body[data-video-mode=true] .modal .modal-header-container h3 {
    font-size: 6rem !important;
    padding-left: 2rem;
  }
  body[data-video-mode=true] .modal .modal-header-container label img {
    width: 6rem;
    height: 6rem;
  }
  body[data-video-mode=true] .modal .modal-content-container .timeFrameBox,
  body[data-video-mode=true] .modal .modal-content-container .timeFrameBox > input {
    font-size: 3rem !important;
  }
  body[data-video-mode=true] .modal .modal-content-container .timeFrameBox {
    flex-wrap: nowrap;
    width: 20% !important;
  }
  body[data-video-mode=true] .modal .modal-content-container .timeFrameBox > * {
    flex: 0 0 20% !important;
  }
  body[data-video-mode=true] .modal .modal-content-container .modal-content-container-item {
    padding: 2rem;
    margin-bottom: 5rem;
  }
  body[data-video-mode=true] .modal .modal-content-container .modal-content-container-item input[type=checkbox] {
    width: 3rem !important;
    height: 3rem !important;
  }
  body[data-video-mode=true] .modal .modal-content-container #setGoalFormulasContainer .numerical_column_item,
  body[data-video-mode=true] .modal .modal-content-container #setGoalFormulasContainer .math_item,
  body[data-video-mode=true] .modal .modal-content-container #setGoalFormulasContainer .KPI_item {
    padding: 1rem 2rem !important;
    margin: 0.5rem !important;
    border-radius: 1rem !important;
  }
  body[data-video-mode=true] .modal .modal-content-container #setGoalFormulasContainer .numericalInputWrapper {
    height: 8rem !important;
    width: 20rem !important;
  }
  body[data-video-mode=true] .modal .modal-content-container #setGoalFormulasContainer .numericalInputWrapper input {
    height: 6rem !important;
    width: 14rem !important;
  }
  body[data-video-mode=true] .modal .modal-content-container #setGoalFormulasContainer .numericalInputWrapper .addNumberButton {
    width: 5rem !important;
  }
  body[data-video-mode=true] .modal .modal-content-container #setGoalFormulasContainer .KPIdrawArea {
    height: 30rem !important;
    line-height: 30rem !important;
  }
  body[data-video-mode=true] .modal:not(.slide) {
    border-radius: 3rem;
  }
  body[data-video-mode=true] .modal.slide {
    padding-bottom: 3rem;
  }
  body[data-video-mode=true] .modal.slide form {
    height: calc(100vh - 23rem) !important;
  }
  body[data-video-mode=true] .modal form input[type=text],
  body[data-video-mode=true] .modal form input[type=password],
  body[data-video-mode=true] .modal form input[type=number],
  body[data-video-mode=true] .modal form select,
  body[data-video-mode=true] .modal form option,
  body[data-video-mode=true] .modal form textarea {
    font-size: 3.5rem !important;
    padding: 2rem !important;
    border-radius: 2rem !important;
  }
  body[data-video-mode=true] .modal form p.title input[type=number],
  body[data-video-mode=true] .modal form p.title input[type=text] {
    padding: 0 2rem !important;
  }
  body[data-video-mode=true] .modal form .explain,
  body[data-video-mode=true] .modal form .explain-tool {
    display: none;
  }
  body[data-video-mode=true] .modal .modal-button-container,
  body[data-video-mode=true] .modal .mt-form-button-box {
    height: 12rem !important;
    align-items: center;
  }
  body[data-video-mode=true] .modal .modal-button-container .modalButton,
  body[data-video-mode=true] .modal .modal-button-container .modalButton > label,
  body[data-video-mode=true] .modal .modal-button-container .modalButton > input,
  body[data-video-mode=true] .modal .modal-button-container .form-button,
  body[data-video-mode=true] .modal .mt-form-button-box .modalButton,
  body[data-video-mode=true] .modal .mt-form-button-box .modalButton > label,
  body[data-video-mode=true] .modal .mt-form-button-box .modalButton > input,
  body[data-video-mode=true] .modal .mt-form-button-box .form-button {
    font-size: 3.5rem !important;
    border-radius: 3rem !important;
  }
  body[data-video-mode=true] .modal .modal-button-container .modalButton,
  body[data-video-mode=true] .modal .modal-button-container .modalButton > label,
  body[data-video-mode=true] .modal .modal-button-container .modalButton > input,
  body[data-video-mode=true] .modal .modal-button-container .form-button,
  body[data-video-mode=true] .modal .mt-form-button-box .modalButton,
  body[data-video-mode=true] .modal .mt-form-button-box .modalButton > label,
  body[data-video-mode=true] .modal .mt-form-button-box .modalButton > input,
  body[data-video-mode=true] .modal .mt-form-button-box .form-button {
    display: inline-flex;
    /* normalize all */
    align-items: center;
    justify-content: center;
    height: 10rem;
    /* 👈 SAME HEIGHT */
    padding: 2.5rem 1.5rem;
    font-size: 3.5rem !important;
    border-radius: 3rem !important;
    line-height: 1;
    /* 👈 critical */
    box-sizing: border-box;
  }
  body[data-video-mode=true] #modal-container-new-column .modal-content-container {
    max-height: 85rem;
  }
  body[data-video-mode=true] #modal-container-new-source .modal-content-container {
    height: 25rem;
    max-height: 25rem;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry #add-mapping-entry-form-content.visible select,
  body[data-video-mode=true] #modal-container-new-mapping-entry #add-mapping-entry-form-content.visible input:not([type=submit]) {
    height: 8rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry #add-mapping-entry-form-content .styled-select-radio {
    max-width: 30rem !important;
  }
}
@media only screen and (min-width: 1600px) and (min-aspect-ratio: 15/9) and (max-aspect-ratio: 17/9) {
  /* 16/9 view viewport styles for video recording */
  body[data-video-mode=true] .modal {
    font-size: 2rem !important;
    padding: 2rem;
  }
  body[data-video-mode=true] .modal:not(.modal-large):not(.slide) .modal-content-container {
    max-height: 65rem;
  }
  body[data-video-mode=true] .modal:not(.modal-large) .modal-button-container {
    height: 8rem;
  }
  body[data-video-mode=true] .modal h4 {
    font-size: 2.5rem !important;
  }
  body[data-video-mode=true] .modal .form-wrapper {
    max-height: 65rem;
    font-size: 2rem !important;
  }
  body[data-video-mode=true] .modal .form-wrapper input[type=text],
  body[data-video-mode=true] .modal .form-wrapper input[type=password],
  body[data-video-mode=true] .modal .form-wrapper input[type=number],
  body[data-video-mode=true] .modal .form-wrapper select,
  body[data-video-mode=true] .modal .form-wrapper option,
  body[data-video-mode=true] .modal .form-wrapper textarea {
    font-size: 2rem !important;
  }
  body[data-video-mode=true] .modal .form-wrapper form {
    gap: 2rem !important;
  }
  body[data-video-mode=true] .modal .form-wrapper form .form-group-headline {
    font-size: 3rem !important;
  }
  body[data-video-mode=true] .modal .modal-header-container {
    padding: 2rem;
    height: 12rem;
    margin: -2rem;
    margin-bottom: 2rem;
  }
  body[data-video-mode=true] .modal .modal-header-container h3 {
    font-size: 4rem !important;
    line-height: 8rem !important;
    padding-left: 2rem;
  }
  body[data-video-mode=true] .modal .modal-header-container label img {
    width: 4rem;
    height: 4rem;
  }
  body[data-video-mode=true] .modal .modal-content-container .timeFrameBox,
  body[data-video-mode=true] .modal .modal-content-container .timeFrameBox > input {
    font-size: 2rem !important;
  }
  body[data-video-mode=true] .modal .modal-content-container .timeFrameBox {
    flex-wrap: nowrap;
    width: 20% !important;
  }
  body[data-video-mode=true] .modal .modal-content-container .timeFrameBox > * {
    flex: 0 0 20% !important;
  }
  body[data-video-mode=true] .modal .modal-content-container .modal-content-container-item {
    padding: 2rem;
    margin-bottom: 3rem;
  }
  body[data-video-mode=true] .modal .modal-content-container .modal-content-container-item input[type=checkbox] {
    width: 2rem !important;
    height: 2rem !important;
  }
  body[data-video-mode=true] .modal .modal-content-container #setGoalFormulasContainer .numerical_column_item,
  body[data-video-mode=true] .modal .modal-content-container #setGoalFormulasContainer .math_item,
  body[data-video-mode=true] .modal .modal-content-container #setGoalFormulasContainer .KPI_item,
  body[data-video-mode=true] .modal .modal-content-container #modifySetGoalFormulasContainer .numerical_column_item,
  body[data-video-mode=true] .modal .modal-content-container #modifySetGoalFormulasContainer .math_item,
  body[data-video-mode=true] .modal .modal-content-container #modifySetGoalFormulasContainer .KPI_item {
    padding: 1rem 2rem !important;
    margin: 0.25rem !important;
    border-radius: 1rem !important;
  }
  body[data-video-mode=true] .modal .modal-content-container #setGoalFormulasContainer .numericalInputWrapper,
  body[data-video-mode=true] .modal .modal-content-container #modifySetGoalFormulasContainer .numericalInputWrapper {
    height: 5rem !important;
    width: 15rem !important;
    padding: 0 2rem;
  }
  body[data-video-mode=true] .modal .modal-content-container #setGoalFormulasContainer .numericalInputWrapper input,
  body[data-video-mode=true] .modal .modal-content-container #modifySetGoalFormulasContainer .numericalInputWrapper input {
    height: 4rem !important;
    width: 10rem !important;
    left: 2rem;
  }
  body[data-video-mode=true] .modal .modal-content-container #setGoalFormulasContainer .numericalInputWrapper .addNumberButton,
  body[data-video-mode=true] .modal .modal-content-container #modifySetGoalFormulasContainer .numericalInputWrapper .addNumberButton {
    width: 5rem !important;
  }
  body[data-video-mode=true] .modal .modal-content-container #setGoalFormulasContainer .KPIdrawArea,
  body[data-video-mode=true] .modal .modal-content-container #modifySetGoalFormulasContainer .KPIdrawArea {
    height: 20rem !important;
    line-height: 20rem !important;
    border-radius: 2rem;
    margin: 2rem auto;
  }
  body[data-video-mode=true] .modal:not(.slide) {
    border-radius: 3rem;
  }
  body[data-video-mode=true] .modal.slide {
    padding-bottom: 3rem;
  }
  body[data-video-mode=true] .modal.slide form {
    height: calc(100vh - 23rem) !important;
  }
  body[data-video-mode=true] .modal form input[type=text],
  body[data-video-mode=true] .modal form input[type=password],
  body[data-video-mode=true] .modal form input[type=number],
  body[data-video-mode=true] .modal form select,
  body[data-video-mode=true] .modal form option,
  body[data-video-mode=true] .modal form textarea {
    font-size: 2rem !important;
    padding: 1.5rem !important;
    border-radius: 1.5rem !important;
  }
  body[data-video-mode=true] .modal form input[type=date] {
    min-width: 18rem;
  }
  body[data-video-mode=true] .modal form .input-with-icon > input[type=text] {
    padding-left: 4rem !important;
  }
  body[data-video-mode=true] .modal form p.title input[type=number],
  body[data-video-mode=true] .modal form p.title input[type=text] {
    padding: 0 2rem !important;
  }
  body[data-video-mode=true] .modal form .explain,
  body[data-video-mode=true] .modal form .explain-tool {
    display: none;
  }
  body[data-video-mode=true] .modal .modal-button-container,
  body[data-video-mode=true] .modal .mt-form-button-box {
    height: 10rem !important;
    align-items: end;
  }
  body[data-video-mode=true] .modal .modal-button-container .modalButton,
  body[data-video-mode=true] .modal .modal-button-container .modalButton > label,
  body[data-video-mode=true] .modal .modal-button-container .modalButton > input,
  body[data-video-mode=true] .modal .modal-button-container .form-button,
  body[data-video-mode=true] .modal .mt-form-button-box .modalButton,
  body[data-video-mode=true] .modal .mt-form-button-box .modalButton > label,
  body[data-video-mode=true] .modal .mt-form-button-box .modalButton > input,
  body[data-video-mode=true] .modal .mt-form-button-box .form-button {
    font-size: 2rem !important;
    border-radius: 2rem !important;
  }
  body[data-video-mode=true] .modal .modal-button-container .modalButton,
  body[data-video-mode=true] .modal .modal-button-container .modalButton > label,
  body[data-video-mode=true] .modal .modal-button-container .modalButton > input,
  body[data-video-mode=true] .modal .modal-button-container .form-button,
  body[data-video-mode=true] .modal .mt-form-button-box .modalButton,
  body[data-video-mode=true] .modal .mt-form-button-box .modalButton > label,
  body[data-video-mode=true] .modal .mt-form-button-box .modalButton > input,
  body[data-video-mode=true] .modal .mt-form-button-box .form-button {
    display: inline-flex;
    /* normalize all */
    align-items: center;
    justify-content: center;
    height: 7rem;
    /* 👈 SAME HEIGHT */
    padding: 2.5rem 1.5rem;
    font-size: 2rem !important;
    border-radius: 2rem !important;
    line-height: 1;
    /* 👈 critical */
    box-sizing: border-box;
  }
  body[data-video-mode=true] #modal-container-new-column .modal-content-container {
    max-height: 85rem;
  }
  body[data-video-mode=true] #modal-container-new-source .modal-content-container {
    height: 25rem;
    max-height: 25rem;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry #add-mapping-entry-form-content.visible select,
  body[data-video-mode=true] #modal-container-new-mapping-entry #add-mapping-entry-form-content.visible input:not([type=submit]) {
    height: 8rem !important;
  }
  body[data-video-mode=true] #modal-container-new-mapping-entry #add-mapping-entry-form-content .styled-select-radio {
    max-width: 30rem !important;
  }
}
.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(51, 51, 51, 0.5);
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}
.popup:target {
  visibility: visible;
  opacity: 1;
}
.popup__container {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 80%;
  height: 20rem;
  border-radius: 3px;
  overflow: hidden;
  background-color: #fff;
}
.popup__close {
  font-size: 2rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  display: inline-block;
  position: absolute;
  right: 1rem;
  top: 1rem;
  text-decoration: none;
  color: #333;
}
.popup__close:hover {
  cursor: pointer;
}

#projects-container {
  display: grid;
  grid-template-rows: 7vh 88vh;
  grid-template-columns: [left-start] 1fr [right-end];
  padding: 0 1rem;
  overflow: hidden;
}
#projects-container::-webkit-scrollbar {
  width: 0rem;
}
#projects-container .content-header {
  padding: 0 2rem;
  grid-column: left-start/right-end;
  grid-row: 1/1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#projects-container .content-header h1 {
  display: flex;
}
#projects-container .content-header h1 img {
  margin-right: 1rem;
  width: 3rem;
}
#projects-container .content-header h1 span {
  font-size: 3rem;
  /* Wrapper link */
  /* Icon image */
  /* Hover effect */
}
#projects-container .content-header h1 span .project-ticket-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 1rem;
  text-decoration: none;
}
#projects-container .content-header h1 span .project-ticket-icon-img {
  width: 2rem;
  height: 2rem;
  vertical-align: middle;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
#projects-container .content-header h1 span .project-ticket-icon:hover .project-ticket-icon-img {
  opacity: 0.75;
}
#projects-container .content-header .content-header-button-box {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#projects-container .content-header .content-header-button-box span {
  font-size: 2rem;
}
#projects-container .content-header .content-header-button-box > span.projectSpecs {
  margin-right: 5rem;
}
#projects-container .content-header .content-header-button-box p {
  text-align: right;
  line-height: 2rem;
}
#projects-container .content-header .content-header-button-box p.dateRange {
  font-size: 1.2rem;
  opacity: 0.8;
}
#projects-container .content-header img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#projects-container .projects-items-wrapper,
#projects-container .projects-progression,
#projects-container .projects-items,
#projects-container #projects-strategy {
  min-height: 0;
}
#projects-container .projects-items-wrapper.has-strategy {
  height: 100%;
  overflow-y: auto;
}
#projects-container .projects-items-wrapper.has-strategy .projects-progression {
  height: 50vh;
}
#projects-container .projects-items-wrapper.has-strategy .projects-items {
  overflow: visible;
}
#projects-container .projects-items-wrapper:not(.has-strategy) {
  display: grid;
  grid-column: left-start/right-end;
  grid-row: 2/2;
  grid-template-columns: [left-start] 1fr [right-end];
}
#projects-container .projects-items-wrapper:not(.has-strategy).dateless-0 {
  grid-template-rows: 50vh minmax(0, 38vh);
}
#projects-container .projects-items-wrapper:not(.has-strategy).dateless-1 {
  grid-template-rows: minmax(0, 1fr);
}
#projects-container .projects-items-wrapper:not(.has-strategy) .projects-items {
  overflow-y: auto;
}
#projects-container .projects-items-wrapper.dateless-1 > .projects-progression {
  background: rgba(0, 0, 0, 0);
}
#projects-container .projects-progression {
  padding: 2rem;
  grid-column: left-start/right-end;
  grid-row: 1/1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(180deg, #27282D 95%, #1D1D1D 100%);
  border-radius: 1.5rem;
}
#projects-container #projects-chart-container,
#projects-container #projects-snapshot-container {
  height: 100%;
  width: 100%;
  display: flex;
}
#projects-container #projects-chart-container {
  position: relative;
}
#projects-container #projects-chart-container .chart-overlay .chart-point {
  opacity: 0.9;
}
#projects-container #projects-chart-container .chart-overlay .chart-point.active-pin {
  z-index: 999 !important;
  opacity: 1;
}
#projects-container #projects-chart-container .chart-overlay .chart-point.active-pin .chart-pin {
  transform: translateY(-10%) scale(1.25);
  filter: drop-shadow(0 0 8px rgba(47, 128, 255, 0.45)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
#projects-container #projects-chart-container .chart-overlay .chart-point .chart-pin {
  --pin-gradient-top: #2f80ff;
  --pin-gradient-bottom: #0057d9;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
  transition: transform 0.15s ease, filter 0.15s ease;
}
#projects-container #projects-chart-container .chart-overlay .chart-point .chart-pin svg {
  width: 4rem;
  height: 4.8rem;
}
#projects-container #projects-chart-container .chart-overlay .chart-point .chart-pin .pin-gradient-top {
  stop-color: var(--pin-gradient-top);
}
#projects-container #projects-chart-container .chart-overlay .chart-point .chart-pin .pin-gradient-bottom {
  stop-color: var(--pin-gradient-bottom);
}
#projects-container #projects-chart-container .chart-overlay .chart-point .chart-pin .pin-shape {
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1;
}
#projects-container #projects-chart-container .chart-overlay .chart-point .tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
#projects-container #projects-chart-container .chart-overlay .chart-point:hover {
  cursor: pointer;
  opacity: 1;
}
#projects-container #projects-chart-container .chart-overlay .chart-point:hover .tooltip {
  opacity: 1;
}
#projects-container #projects-chart-container .chart-overlay .chart-point:hover .chart-pin {
  transform: translateY(-10%) scale(1.25);
  filter: drop-shadow(0 0 8px rgba(47, 128, 255, 0.45)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
#projects-container #projects-snapshot-container {
  position: relative;
  gap: 2rem;
}
#projects-container #projects-snapshot-container .snapshot-card {
  background: linear-gradient(180deg, #27282D 5%, #1D1D1D 50%);
  transform: scale(0.95);
  transition: transform 0.2s;
  width: 40%;
  padding: 3rem 2rem;
  border-radius: 2rem;
  -webkit-box-shadow: 0px 5px 13px 1px #000000;
  box-shadow: 0px 5px 13px 1px #000000;
}
#projects-container #projects-snapshot-container .snapshot-card.active {
  background: linear-gradient(180deg, #27282D 95%, #1D1D1D 100%);
  transform: scale(1);
}
#projects-container #projects-snapshot-container .snapshot-card .snapshot-card-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
#projects-container #projects-snapshot-container .snapshot-card .snapshot-card-head p {
  margin: 0;
}
#projects-container #projects-snapshot-container .snapshot-card .snapshot-card-head img {
  width: 3rem;
  height: 3rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#projects-container #projects-snapshot-container .snapshot-card .snapshot-card-body-total {
  display: flex;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
#projects-container #projects-snapshot-container .snapshot-card .snapshot-card-body-total .snapshot-card-body-total-item {
  background-color: #F2E9EE;
  padding: 1rem 2rem;
  color: #2D2832;
  border-radius: 2rem;
  text-align: center;
}
#projects-container #projects-snapshot-container .snapshot-card .snapshot-card-body-total .snapshot-card-body-total-item div:first-of-type {
  font-weight: bold;
}
#projects-container #projects-snapshot-container .snapshot-card .snapshot-card-body-total .snapshot-card-body-total-item div:last-of-type {
  opacity: 0.95;
}
#projects-container #projects-snapshot-container .snapshot-card.head-left .snapshot-card-head,
#projects-container #projects-snapshot-container .snapshot-card.head-left .snapshot-card-body-total {
  justify-content: flex-end;
}
#projects-container #projects-snapshot-container.overlap .snapshot-card {
  position: absolute;
}
#projects-container:has(#projects-strategy) #projects-strategy {
  display: block;
  grid-column: left-start/right-end;
  grid-row: 2/2;
  overflow-y: visible;
}
#projects-container:has(#projects-strategy) .projects-items {
  grid-row: 3/3;
}
#projects-container:not(:has(#projects-strategy)) .projects-items {
  grid-row: 2/2;
}
#projects-container #learnings-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1rem;
}
#projects-container #learnings-container .learning-card {
  border-radius: 1.5rem;
  max-width: 50%;
  flex: 0 0 calc(50% - 0.5rem);
}
#projects-container #learnings-container .learning-card.active-learning .learning-header, #projects-container #learnings-container .learning-card.active-learning-pinned .learning-header, #projects-container #learnings-container .learning-card:hover .learning-header {
  background-color: #4F213F !important;
}
#projects-container #learnings-container .learning-card.highest-score .learning-main .learning-header .learning-score {
  color: #A8514A;
  opacity: 1 !important;
}
#projects-container #learnings-container .learning-card .learning-row-1 .learning-main {
  cursor: pointer;
}
#projects-container #learnings-container .learning-card .learning-row-1 .learning-main .learning-header {
  padding: 1.5rem 2rem;
  background-color: #38313E;
  transition: background-color 0.5s;
  border-radius: 1.5rem 1.5rem 0 0;
}
#projects-container #learnings-container .learning-card .learning-row-1 .learning-main .learning-header .learning-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#projects-container #learnings-container .learning-card .learning-row-1 .learning-main .learning-header .learning-date small {
  opacity: 0.2;
}
#projects-container #learnings-container .learning-card .learning-row-1 .learning-main .learning-header .learning-score {
  opacity: 0.3;
}
#projects-container #learnings-container .learning-card .learning-row-1 .learning-main .learning-header .learning-segment .segment-item,
#projects-container #learnings-container .learning-card .learning-row-1 .learning-main .learning-header .learning-segment .segment-separator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.8;
}
#projects-container #learnings-container .learning-card .learning-row-1 .learning-main .learning-header .learning-segment .segment-item .segment-key {
  opacity: 0.5;
}
#projects-container #learnings-container .learning-card .learning-row-1 .learning-main .learning-header .learning-segment .segment-separator {
  margin: auto 0.5rem;
}
#projects-container #learnings-container .learning-card .learning-row-1 .learning-main .learning-header .learning-segment .segment-separator img {
  width: 1.5rem;
  height: 1.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
  display: block;
  transform: translateY(0.3rem);
}
#projects-container #learnings-container .learning-card .learning-row-1 .learning-main .learning-readable {
  background-color: #2D2832;
  padding: 1.5rem 2rem;
}
#projects-container #learnings-container .learning-card .learning-row-1 .learning-main .learning-readable .segment-highlight {
  letter-spacing: 0.02em;
  background: linear-gradient(transparent 58%, #4F213F 58%);
}
#projects-container #learnings-container .learning-card .learning-row-2 {
  padding: 1.5rem 2rem;
  display: none;
}
#projects-container #learnings-container .learning-card .learning-row-2 > p {
  font-weight: bold;
  opacity: 0.3;
}
#projects-container #learnings-container .learning-card .learning-row-2 .signals-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item {
  padding: 0.5rem 1rem;
  opacity: 0.8;
}
#projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item .signal-row-1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}
#projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item .signal-row-1 .signal-main {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
#projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item .signal-row-1 .signal-main .signal-val {
  opacity: 1;
}
#projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item .signal-row-1 .signal-direction {
  display: flex;
  justify-content: center;
  opacity: 1;
}
#projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item .signal-row-1 .signal-direction img {
  width: 1.5rem;
  height: 1.5rem;
}
#projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item .signal-row-1 .signal-direction.negative img {
  filter: invert(42%) sepia(96%) saturate(2264%) hue-rotate(336deg) brightness(102%) contrast(101%);
  transform: rotate(180deg);
}
#projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item .signal-row-1 .signal-window {
  white-space: nowrap;
  opacity: 0.3;
  font-style: italic;
}
#projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item .signal-row-2 {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: #666;
}
#projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item.positive .signal-row-1 .signal-val, #projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item.above_avg .signal-row-1 .signal-val {
  color: #00C851;
}
#projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item.positive .signal-row-1 .signal-direction img, #projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item.above_avg .signal-row-1 .signal-direction img {
  filter: invert(57%) sepia(91%) saturate(428%) hue-rotate(86deg) brightness(95%) contrast(92%);
}
#projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item.negative .signal-row-1 .signal-val, #projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item.below_avg .signal-row-1 .signal-val {
  color: #A8514A;
}
#projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item.negative .signal-row-1 .signal-direction img, #projects-container #learnings-container .learning-card .learning-row-2 .signals-container .signal-item.below_avg .signal-row-1 .signal-direction img {
  filter: invert(42%) sepia(96%) saturate(2264%) hue-rotate(336deg) brightness(102%) contrast(101%);
  transform: rotate(180deg);
}
#projects-container #learnings-container .learning-card.active .learning-row-2 {
  display: block;
}
#projects-container #projects-strategy {
  padding-top: 1rem;
  border-radius: 1.5rem;
}
#projects-container #projects-strategy #projects-strategy-header {
  background-color: #38313E;
  border-radius: 1.5rem;
  font-size: 1.7rem;
  display: flex;
  align-items: center;
}
#projects-container #projects-strategy #projects-strategy-header.opened {
  border-radius: 1.5rem 1.5rem 0 0;
}
#projects-container #projects-strategy #projects-strategy-header #projects-strategy-content-activate-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 2rem 2rem;
  border-radius: 1.5rem;
}
#projects-container #projects-strategy #projects-strategy-header #projects-strategy-content-activate-btn div {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#projects-container #projects-strategy #projects-strategy-header #projects-strategy-content-activate-btn:not(.disabled) {
  cursor: pointer;
  color: #fff;
  background-color: #221E26;
  transition: background-color 0.1s;
}
#projects-container #projects-strategy #projects-strategy-header #projects-strategy-content-activate-btn:not(.disabled):hover {
  background-color: #4F213F;
}
#projects-container #projects-strategy #projects-strategy-header #projects-strategy-content-activate-btn img {
  width: 2rem;
  height: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#projects-container #projects-strategy #projects-strategy-header #projects-strategy-content-activate-btn #projects-open-strategy-loader {
  display: none;
}
#projects-container #projects-strategy #projects-strategy-header #projects-strategy-content-activate-btn #projects-open-strategy-loader.loading {
  display: block;
  animation: spin 3s linear infinite;
}
#projects-container #projects-strategy #projects-strategy-content {
  background-color: #2D2832;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2vh;
  min-height: 0;
}
#projects-container #projects-strategy #projects-strategy-content .component-section-headline,
#projects-container #projects-strategy #projects-strategy-content .strategy-empty-msg {
  text-align: center;
  color: #3B3B3B;
}
#projects-container #projects-strategy #projects-strategy-content .component-section-headline {
  font-size: 2rem;
}
#projects-container #projects-strategy #projects-strategy-content .component-main-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  justify-content: center;
}
#projects-container #projects-strategy #projects-strategy-content .component-main-inner .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 1.5rem;
  background: #fff;
  white-space: nowrap;
  max-width: 100%;
  color: #fff;
}
#projects-container #projects-strategy #projects-strategy-content .component-main-inner .pill.kpi {
  background: #8F7145;
}
#projects-container #projects-strategy #projects-strategy-content .component-main-inner .pill.field_share {
  background: #B08D57;
}
#projects-container #projects-strategy #projects-strategy-content .component-main-inner .pill.allocation_metric {
  background: #B08D57;
}
#projects-container #projects-strategy #projects-strategy-content .component-main-inner .pill.primary_dimension {
  background: #6A2C55;
}
#projects-container #projects-strategy #projects-strategy-content .component-main-inner .pill.range {
  background: #00C851;
}
#projects-container #projects-strategy #projects-strategy-content .component-main-inner .pill.range-separator {
  background: transparent;
  padding: 0;
}
#projects-container #projects-strategy #projects-strategy-content .component-main-inner .pill.inf {
  width: 3rem;
  height: 3rem;
  padding: 0;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#projects-container #projects-strategy #projects-strategy-content .component-main-inner .pill.inf.neg {
  background-image: url("/static/img/infinity-negative.svg");
}
#projects-container #projects-strategy #projects-strategy-content .component-main-inner .pill.inf.pos {
  background-image: url("/static/img/infinity-positive.svg");
}
#projects-container #projects-strategy #projects-strategy-content .component-main-inner .pill.filter {
  background-color: #F2E9EE;
  color: #221E26;
}
#projects-container #projects-strategy #projects-strategy-content .component-main-inner .pill.filter img {
  width: 1.5rem;
  height: 1.5rem;
}
#projects-container #projects-strategy #projects-strategy-content .strategy-chart-container {
  position: relative;
  width: 100%;
  height: 50vh;
  /* default for primary */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#projects-container #projects-strategy #projects-strategy-content .strategy-chart-container div {
  flex: 1;
  min-height: 0;
}
#projects-container #projects-strategy #projects-strategy-content .strategy-chart-container h3 {
  margin: 0 0 0.5rem 0;
  z-index: 2;
}
#projects-container #projects-strategy #projects-strategy-content .strategy-chart-container.primary {
  height: 50vh;
}
#projects-container #projects-strategy #projects-strategy-content .strategy-chart-container.small {
  height: 20vh;
}
#projects-container #projects-strategy #projects-strategy-content .strategy-chart-container canvas {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  display: block;
}
#projects-container #projects-strategy #projects-strategy-content .strategy-chart-container .strategy-empty-msg {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 1rem;
}
#projects-container .projects-items {
  display: block;
  grid-column: left-start/right-end;
}
#projects-container #projects-imports-container,
#projects-container .snapshot-card-body {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 0;
}
#projects-container #projects-imports-container .importSpecContainer,
#projects-container .snapshot-card-body .importSpecContainer {
  background-color: #2D2832;
  border-radius: 1.5rem;
  flex-grow: 1;
  max-width: 50%;
}
#projects-container #projects-imports-container .importSpecContainer p,
#projects-container .snapshot-card-body .importSpecContainer p {
  background-color: #38313E;
  border-radius: 1.5rem 1.5rem 0 0;
  padding: 1.5rem 2rem;
  font-size: 1.7rem;
  display: flex;
  align-items: center;
}
#projects-container #projects-imports-container .importSpecContainer p span,
#projects-container .snapshot-card-body .importSpecContainer p span {
  margin-left: 1rem;
}
#projects-container #projects-imports-container .importSpecContainer p .import-spec-header-highlight,
#projects-container .snapshot-card-body .importSpecContainer p .import-spec-header-highlight {
  padding: 0.5rem;
  color: black;
  background-color: #A8514A;
  border-radius: 0.5rem;
  font-size: 80%;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
}
#projects-container #projects-imports-container .importSpecContainer p .import-spec-header-highlight img,
#projects-container .snapshot-card-body .importSpecContainer p .import-spec-header-highlight img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(3%) saturate(5157%) hue-rotate(209deg) brightness(89%) contrast(78%);
}
#projects-container #projects-imports-container .importSpecContainer p .import-spec-header-highlight.secondary,
#projects-container .snapshot-card-body .importSpecContainer p .import-spec-header-highlight.secondary {
  background-color: #2a2b28;
  color: #fff;
}
#projects-container #projects-imports-container .importSpecContainer table,
#projects-container .snapshot-card-body .importSpecContainer table {
  margin: 1rem 0;
  width: 100%;
}
#projects-container #projects-imports-container .importSpecContainer table tr:first-child,
#projects-container .snapshot-card-body .importSpecContainer table tr:first-child {
  font-weight: bold;
}
#projects-container #projects-imports-container .importSpecContainer table th:first-child,
#projects-container #projects-imports-container .importSpecContainer table td:first-child,
#projects-container .snapshot-card-body .importSpecContainer table th:first-child,
#projects-container .snapshot-card-body .importSpecContainer table td:first-child {
  padding-left: 1.5rem;
}
#projects-container #projects-imports-container .importSpecContainer table th:last-child,
#projects-container #projects-imports-container .importSpecContainer table td:last-child,
#projects-container .snapshot-card-body .importSpecContainer table th:last-child,
#projects-container .snapshot-card-body .importSpecContainer table td:last-child {
  padding-right: 1.5rem;
}
#projects-container #projects-imports-container .importSpecContainer table th,
#projects-container #projects-imports-container .importSpecContainer table td,
#projects-container .snapshot-card-body .importSpecContainer table th,
#projects-container .snapshot-card-body .importSpecContainer table td {
  min-width: 8rem;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.5rem;
  padding: 0.1rem;
  text-align: left;
}
#projects-container #projects-imports-container .importSpecContainer table th.value,
#projects-container #projects-imports-container .importSpecContainer table td.value,
#projects-container .snapshot-card-body .importSpecContainer table th.value,
#projects-container .snapshot-card-body .importSpecContainer table td.value {
  text-align: right;
  min-width: 10rem;
  max-width: 10rem;
}
#projects-container #projects-imports-container .importSpecContainer table td:nth-child(1),
#projects-container .snapshot-card-body .importSpecContainer table td:nth-child(1) {
  min-width: 20rem;
  max-width: 20rem;
}
#projects-container .snapshot-card-body > .importSpecContainer {
  width: 100%;
  max-width: 100%;
}
#projects-container ul {
  list-style-type: none;
  font-size: 1.2rem;
}
#projects-container ul li {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 100%;
  margin: 1rem 0;
}
#projects-container ul li > img {
  height: 2.5rem;
  margin-right: 1rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}

.projects-progression p,
.projects-overview p {
  font-weight: bold;
  font-size: 1.7rem;
}
.projects-progression p:not(:first-child),
.projects-overview p:not(:first-child) {
  margin-top: 3rem;
}

#export-project-columns {
  text-align: left;
  width: 100%;
  table-layout: fixed;
}
#export-project-columns .maincolumn::after,
#export-project-columns .date::after,
#export-project-columns .columnnotavailable::after {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  filter: brightness(0) saturate(100%) invert(18%) sepia(3%) saturate(5157%) hue-rotate(209deg) brightness(89%) contrast(78%);
}
#export-project-columns .maincolumn::after {
  background-image: url("/static/img/Main.svg");
}
#export-project-columns .date::after {
  background-image: url("/static/img/Date.svg");
}
#export-project-columns .columnnotavailable::after {
  background-image: url("/static/img/close.svg");
}
#export-project-columns .export-column-actions {
  width: 3rem;
  padding: 1.2rem;
}
#export-project-columns .export-column-actions .export-column-checkbox {
  width: 1.8rem;
  height: 1.8rem;
  background-image: url("/static/img/cb-inactive.svg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0) saturate(100%) invert(37%) sepia(40%) saturate(6492%) hue-rotate(198deg) brightness(103%) contrast(109%);
}
#export-project-columns .export-column-actions .export-column-checkbox:not(.disabled):hover {
  background-image: url("/static/img/cb-hover.svg");
  cursor: pointer;
}
#export-project-columns .export-column-actions .export-column-checkbox.selected {
  background-image: url("/static/img/cb-active.svg");
}
#export-project-columns .export-column-actions .export-column-checkbox.disabled {
  opacity: 0.5;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}

@media only screen and (max-width: 2000px) {
  #projects-container {
    grid-template-rows: 8vh 87vh;
  }
}
@media only screen and (max-width: 576px), only screen and (orientation: portrait) {
  #projects-container .content-header-button-box {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  #projects-container .content-header-button-box #editProjectButton,
  #projects-container .content-header-button-box #exportProjectButton {
    flex: 0 0 auto;
  }
  #projects-container .content-header-button-box .projectSpecs {
    order: 2;
    /* move below */
    flex: 0 0 100%;
    /* full width */
    margin-right: 1rem !important;
  }
  #projects-container .content-header-button-box .projectSpecs span:nth-of-type(2),
  #projects-container .content-header-button-box .projectSpecs .dateRange {
    display: none;
  }
}
@media only screen and (aspect-ratio: 1/1) {
  /* square viewport styles for video recording */
  body[data-video-mode=true] #projects-container .content-header-button-box span {
    font-size: 4rem !important;
  }
  body[data-video-mode=true] #projects-container .content-header-button-box p {
    line-height: 4rem !important;
  }
  body[data-video-mode=true] #projects-container #checkArchiveProject {
    display: none;
  }
  body[data-video-mode=true] #projects-container.dateless-0 {
    grid-template-rows: 12vh 50vh 38vh;
  }
  body[data-video-mode=true] #projects-container.dateless-1 {
    grid-template-rows: 12vh 80vh;
  }
  body[data-video-mode=true] #projects-container .projects-progression {
    margin-right: 2rem;
    border-radius: 3rem;
  }
  body[data-video-mode=true] #projects-container .projects-progression p,
  body[data-video-mode=true] #projects-container .projects-overview p {
    font-size: 3.5rem;
  }
  body[data-video-mode=true] #projects-container .projects-progression img,
  body[data-video-mode=true] #projects-container .projects-overview img {
    width: 5rem !important;
    height: 5rem !important;
  }
  body[data-video-mode=true] #projects-container #projects-imports-container,
  body[data-video-mode=true] #projects-container .snapshot-card-body {
    gap: 8rem;
    padding-top: 4rem;
    font-size: 3.4rem;
  }
  body[data-video-mode=true] #projects-container #projects-imports-container .importSpecContainer,
  body[data-video-mode=true] #projects-container .snapshot-card-body .importSpecContainer {
    max-width: calc(100% - 2rem);
  }
  body[data-video-mode=true] #projects-container #projects-imports-container .importSpecContainer p,
  body[data-video-mode=true] #projects-container .snapshot-card-body .importSpecContainer p {
    padding: 1.5rem 2rem;
    font-size: 3.4rem;
    border-radius: 1.5rem 1.5rem 0 0;
  }
  body[data-video-mode=true] #projects-container #projects-imports-container .importSpecContainer p .import-spec-header-highlight,
  body[data-video-mode=true] #projects-container .snapshot-card-body .importSpecContainer p .import-spec-header-highlight {
    padding: 1rem;
    border-radius: 1rem;
    margin-left: 2rem;
  }
  body[data-video-mode=true] #projects-container #projects-imports-container .importSpecContainer p .import-spec-header-highlight.secondary,
  body[data-video-mode=true] #projects-container .snapshot-card-body .importSpecContainer p .import-spec-header-highlight.secondary {
    background-color: #2a2b28;
    color: #fff;
  }
  body[data-video-mode=true] #projects-container #projects-imports-container .importSpecContainer p .import-spec-header-highlight img,
  body[data-video-mode=true] #projects-container .snapshot-card-body .importSpecContainer p .import-spec-header-highlight img {
    width: 4rem !important;
    height: 4rem !important;
  }
  body[data-video-mode=true] #projects-container #projects-imports-container table th,
  body[data-video-mode=true] #projects-container #projects-imports-container table td,
  body[data-video-mode=true] #projects-container .snapshot-card-body table th,
  body[data-video-mode=true] #projects-container .snapshot-card-body table td {
    font-size: 3rem !important;
  }
  body[data-video-mode=true] #projects-container #projects-snapshot-container {
    gap: 2rem;
  }
  body[data-video-mode=true] #projects-container #projects-snapshot-container .snapshot-card {
    width: 60%;
  }
}
@media only screen and (min-width: 1600px) and (min-aspect-ratio: 15/9) and (max-aspect-ratio: 17/9) {
  /* 16/9 view viewport styles for video recording */
  body[data-video-mode=true] #projects-container .content-header-button-box span {
    font-size: 3rem !important;
  }
  body[data-video-mode=true] #projects-container .content-header-button-box .projectSpecs span {
    font-size: 2.5rem !important;
  }
  body[data-video-mode=true] #projects-container .content-header-button-box .projectSpecs .dateRange {
    font-size: 1.8rem !important;
  }
  body[data-video-mode=true] #projects-container .content-header-button-box p {
    line-height: 3rem !important;
  }
  body[data-video-mode=true] #projects-container.dateless-0 {
    grid-template-rows: 11vh 55vh 26vh;
  }
  body[data-video-mode=true] #projects-container.dateless-1 {
    grid-template-rows: 11vh 73vh;
  }
  body[data-video-mode=true] #projects-container .projects-progression {
    border-radius: 2rem;
  }
  body[data-video-mode=true] #projects-container #projects-imports-container,
  body[data-video-mode=true] #projects-container .snapshot-card-body {
    gap: 2rem;
    padding-top: 2rem;
    font-size: 2rem;
  }
  body[data-video-mode=true] #projects-container #projects-imports-container .importSpecContainer p,
  body[data-video-mode=true] #projects-container .snapshot-card-body .importSpecContainer p {
    padding: 1.5rem 2rem;
    font-size: 2rem;
    border-radius: 1.5rem 1.5rem 0 0;
  }
  body[data-video-mode=true] #projects-container #projects-imports-container .importSpecContainer p .import-spec-header-highlight,
  body[data-video-mode=true] #projects-container .snapshot-card-body .importSpecContainer p .import-spec-header-highlight {
    padding: 1rem;
    border-radius: 1rem;
    margin-left: 2rem;
  }
  body[data-video-mode=true] #projects-container #projects-imports-container .importSpecContainer p .import-spec-header-highlight.secondary,
  body[data-video-mode=true] #projects-container .snapshot-card-body .importSpecContainer p .import-spec-header-highlight.secondary {
    background-color: #2a2b28;
    color: #fff;
  }
  body[data-video-mode=true] #projects-container #projects-imports-container .importSpecContainer p .import-spec-header-highlight img,
  body[data-video-mode=true] #projects-container .snapshot-card-body .importSpecContainer p .import-spec-header-highlight img {
    width: 3rem !important;
    height: 3rem !important;
  }
  body[data-video-mode=true] #projects-container #projects-imports-container table th,
  body[data-video-mode=true] #projects-container #projects-imports-container table td,
  body[data-video-mode=true] #projects-container .snapshot-card-body table th,
  body[data-video-mode=true] #projects-container .snapshot-card-body table td {
    font-size: 1.6rem !important;
  }
  body[data-video-mode=true] #projects-container #projects-snapshot-container {
    gap: 2rem;
  }
  body[data-video-mode=true] #projects-container #projects-snapshot-container .snapshot-card {
    width: 60%;
  }
}
#relationships-container {
  display: grid;
  grid-template-rows: 7vh auto 1fr;
  grid-template-columns: [left-start] 1fr [left-end middle-start] 1fr [middle-end right-start] 1fr [right-end];
  padding: 0 1rem;
  height: 95vh;
  gap: 0 4rem;
}
#relationships-container #mobile-relationships-tabs {
  display: none;
}
#relationships-container .content-header {
  padding: 0 2rem;
  grid-column: left-start/right-end;
  grid-row: 1/1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#relationships-container .content-header h1 {
  display: flex;
}
#relationships-container .content-header h1 img {
  margin-right: 1rem;
  width: 3rem;
}
#relationships-container .content-header h1 span {
  font-size: 3rem;
}
#relationships-container .content-header img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#relationships-container .content-header #editDescButton {
  opacity: 0;
}
#relationships-container .content-header #editDescButton.show {
  opacity: 1;
}
#relationships-container .relationships-description {
  font-size: 1.25rem;
  padding: 0.75rem 1rem;
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  margin-right: 6rem;
  font-style: normal;
}
#relationships-container .relationships-button-container {
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
#relationships-container .relationships-button-container label {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
}
#relationships-container .relationships-button-container label img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
  width: 1.5rem;
}
#relationships-container .relationship-container {
  overflow: auto;
}
#relationships-container .relationship-container form {
  display: none;
}
#relationships-container .relationship-container form.visible {
  display: inline-flex;
  gap: 1rem;
}
#relationships-container .relationship-container form img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#relationships-container h3 {
  margin-bottom: 2rem;
  font-size: 3rem;
}
#relationships-container .removal-columns-checkbox-label,
#relationships-container .removal-goals-checkbox-label,
#relationships-container .removal-sources-checkbox-label {
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}
#relationships-container .removal-goals-checkbox-label {
  position: relative;
}
#relationships-container .removal-goals-checkbox-label::before {
  content: attr(data-goal);
  position: absolute;
  left: 0;
  bottom: 0.2rem;
  color: transparent;
  border-bottom: 2px solid #6A2C55;
  padding-bottom: 0.1rem;
  pointer-events: none;
}

#relationshipAssignmentsContainer {
  padding: 0 2rem;
  /* =========================================================
  SECTION
  ========================================================= */
  /* =========================================================
  TABLE
  ========================================================= */
  /* =========================================================
  HEADERS
  ========================================================= */
  /* =========================================================
  CELLS
  ========================================================= */
  /* =========================================================
  COLUMN WIDTHS
  ========================================================= */
}
#relationshipAssignmentsContainer .relationship-section {
  margin-bottom: 24px;
}
#relationshipAssignmentsContainer .relationship-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  color: #444;
}
#relationshipAssignmentsContainer .relationship-section-title span {
  background: #EFEFEF;
  border-radius: 100px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}
#relationshipAssignmentsContainer .relationship-section-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#relationshipAssignmentsContainer .relationship-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
#relationshipAssignmentsContainer .relationship-table th {
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#relationshipAssignmentsContainer .relationship-table td {
  text-align: left;
  vertical-align: top;
}
#relationshipAssignmentsContainer .relationship-table th:first-child,
#relationshipAssignmentsContainer .relationship-table td:first-child {
  width: 50%;
  padding-right: 0.5rem;
}
#relationshipAssignmentsContainer .relationship-table th:last-child,
#relationshipAssignmentsContainer .relationship-table td:last-child {
  width: 50%;
}
#relationshipAssignmentsContainer .relationship-tool-name {
  width: 100%;
  min-width: 0;
}
#relationshipAssignmentsContainer .relationship-tool-type {
  color: #444;
  font-weight: 600;
}
#relationshipAssignmentsContainer .relationship-tool-instance {
  color: #FFF;
}

#columns-description {
  grid-column: left-start/left-end;
  grid-row: 2/2;
}

#columns-container {
  grid-column: left-start/left-end;
  grid-row: 3/3;
}

#goals-description {
  grid-column: middle-start/middle-end;
  grid-row: 2/2;
}

#goals-container {
  grid-column: middle-start/middle-end;
  grid-row: 3/3;
}

#sources-description {
  grid-column: right-start/right-end;
  grid-row: 2/2;
}

#sources-container {
  grid-column: right-start/right-end;
  grid-row: 3/3;
}

.data-item, #columns-container ul li,
#goals-container ul li,
#sources-container ul li,
#supported-import-goals-container ul li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 2rem;
  margin: 1.2rem 0;
  border-radius: 1.2rem;
  background: #221E26;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.data-item:hover, #columns-container ul li:hover,
#goals-container ul li:hover,
#sources-container ul li:hover,
#supported-import-goals-container ul li:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}
.data-item span, #columns-container ul li span,
#goals-container ul li span,
#sources-container ul li span,
#supported-import-goals-container ul li span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  letter-spacing: 0.02em;
}

#columns-container,
#goals-container,
#sources-container,
#supported-import-goals-container {
  padding: 0.5rem;
}
#columns-container .add,
#goals-container .add,
#sources-container .add,
#supported-import-goals-container .add {
  cursor: pointer;
}
#columns-container ul,
#goals-container ul,
#sources-container ul,
#supported-import-goals-container ul {
  list-style-type: none;
  font-size: 1.4rem;
}
#columns-container ul li > .typeSpecsImgContainer,
#goals-container ul li > .typeSpecsImgContainer,
#sources-container ul li > .typeSpecsImgContainer,
#supported-import-goals-container ul li > .typeSpecsImgContainer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.1rem;
  border: 1px solid #fff;
  border-radius: 0.3rem;
  margin-left: 1rem;
}
#columns-container ul li > .typeSpecsImgContainer img,
#goals-container ul li > .typeSpecsImgContainer img,
#sources-container ul li > .typeSpecsImgContainer img,
#supported-import-goals-container ul li > .typeSpecsImgContainer img {
  height: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#columns-container ul li > .relationship-assigments,
#goals-container ul li > .relationship-assigments,
#sources-container ul li > .relationship-assigments,
#supported-import-goals-container ul li > .relationship-assigments {
  height: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#columns-container ul li > .relationship-assigments:hover,
#goals-container ul li > .relationship-assigments:hover,
#sources-container ul li > .relationship-assigments:hover,
#supported-import-goals-container ul li > .relationship-assigments:hover {
  cursor: pointer;
}

#goals-container ul .existingGoal {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 2rem;
  margin: 1.2rem 0;
  border-radius: 1.2rem;
  background: #221E26;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
#goals-container ul .existingGoal:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}
#goals-container ul .existingGoal span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  letter-spacing: 0.02em;
  flex: 1;
  min-width: 0;
}

#goals-container .editGoalImgContainer, #goals-container .editColumnImgContainer, #columns-container .editGoalImgContainer, #columns-container .editColumnImgContainer {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
#goals-container .editGoalImgContainer:hover, #goals-container .editColumnImgContainer:hover, #columns-container .editGoalImgContainer:hover, #columns-container .editColumnImgContainer:hover {
  background-color: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}
#goals-container .editGoalImgContainer img, #goals-container .editColumnImgContainer img, #columns-container .editGoalImgContainer img, #columns-container .editColumnImgContainer img {
  height: 1.5rem;
  width: 1.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}

#setGoalFormulasContainer, #modifySetGoalFormulasContainer {
  margin-bottom: 0.5rem;
}

#columnsFormatInputContainer,
#columnsAdditiveInputContainer,
#columnsPerformanceInputContainer {
  display: none;
}
#columnsFormatInputContainer.visible,
#columnsAdditiveInputContainer.visible,
#columnsPerformanceInputContainer.visible {
  display: block;
}

#columnsCategoryInputContainer {
  display: none;
}

@media only screen and (max-width: 2000px) {
  #relationships-container {
    height: 93vh;
    grid-template-rows: 8vh auto 1fr;
  }
}
@media only screen and (aspect-ratio: 1/1) {
  /* square viewport styles for video recording */
  body[data-video-mode=true] #relationships-container {
    height: 100vh;
    grid-template-rows: 12vh auto 1fr;
    /* hide all content by default */
    /* hide descriptions in square mode */
  }
  body[data-video-mode=true] #relationships-container[data-active=columns] #columns-container {
    display: block;
  }
  body[data-video-mode=true] #relationships-container[data-active=goals] #goals-container {
    display: block;
  }
  body[data-video-mode=true] #relationships-container[data-active=sources] #sources-container {
    display: block;
  }
  body[data-video-mode=true] #relationships-container #columns-description,
  body[data-video-mode=true] #relationships-container #goals-description,
  body[data-video-mode=true] #relationships-container #sources-description {
    display: none;
  }
  body[data-video-mode=true] #relationships-container .relationships-button-container {
    margin-bottom: 3rem;
    gap: 2rem;
  }
  body[data-video-mode=true] #relationships-container .relationships-button-container label {
    gap: 2rem;
  }
  body[data-video-mode=true] #relationships-container .relationships-button-container label img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
    width: 3rem;
  }
  body[data-video-mode=true] #relationships-container #columns-container,
  body[data-video-mode=true] #relationships-container #goals-container,
  body[data-video-mode=true] #relationships-container #sources-container {
    display: none;
    grid-column: left-start/right-end;
    grid-row: 3/3;
  }
  body[data-video-mode=true] #relationships-container .relationships-description {
    display: none;
  }
  body[data-video-mode=true] #relationships-container #mobile-relationships-tabs {
    grid-column: left-start/right-end;
    grid-row: 2/2;
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 1rem;
  }
  body[data-video-mode=true] #relationships-container #mobile-relationships-tabs button {
    all: unset;
    /* reset button defaults */
    position: relative;
    text-align: center;
    padding: 3rem 5rem;
    border-radius: 5rem;
    font-size: 5rem !important;
    font-weight: 500;
    cursor: pointer;
    color: #514956;
    background: transparent;
    transition: color 0.2s ease, background-color 0.2s ease;
  }
  body[data-video-mode=true] #relationships-container #mobile-relationships-tabs button:hover {
    background-color: #4F213F;
    color: #fff;
  }
  body[data-video-mode=true] #relationships-container #columns-container,
  body[data-video-mode=true] #relationships-container #goals-container,
  body[data-video-mode=true] #relationships-container #sources-container,
  body[data-video-mode=true] #relationships-container #supported-import-goals-container {
    padding-top: 4rem;
  }
  body[data-video-mode=true] #relationships-container #columns-container ul,
  body[data-video-mode=true] #relationships-container #goals-container ul,
  body[data-video-mode=true] #relationships-container #sources-container ul,
  body[data-video-mode=true] #relationships-container #supported-import-goals-container ul {
    font-size: 4rem !important;
  }
  body[data-video-mode=true] #relationships-container #columns-container ul li,
  body[data-video-mode=true] #relationships-container #goals-container ul li,
  body[data-video-mode=true] #relationships-container #sources-container ul li,
  body[data-video-mode=true] #relationships-container #supported-import-goals-container ul li {
    padding: 2rem 4rem !important;
  }
  body[data-video-mode=true] #relationships-container #columns-container ul li > .typeSpecsImgContainer,
  body[data-video-mode=true] #relationships-container #goals-container ul li > .typeSpecsImgContainer,
  body[data-video-mode=true] #relationships-container #sources-container ul li > .typeSpecsImgContainer,
  body[data-video-mode=true] #relationships-container #supported-import-goals-container ul li > .typeSpecsImgContainer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.2rem;
    border: 1px solid #fff;
    border-radius: 0.8rem;
    margin-left: 2rem;
  }
  body[data-video-mode=true] #relationships-container #columns-container ul li > .typeSpecsImgContainer img,
  body[data-video-mode=true] #relationships-container #goals-container ul li > .typeSpecsImgContainer img,
  body[data-video-mode=true] #relationships-container #sources-container ul li > .typeSpecsImgContainer img,
  body[data-video-mode=true] #relationships-container #supported-import-goals-container ul li > .typeSpecsImgContainer img {
    height: 4rem !important;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
  }
  body[data-video-mode=true] #relationships-container[data-active=columns] #mobile-relationships-tabs button[data-tab=columns],
  body[data-video-mode=true] #relationships-container[data-active=goals] #mobile-relationships-tabs button[data-tab=goals],
  body[data-video-mode=true] #relationships-container[data-active=sources] #mobile-relationships-tabs button[data-tab=sources] {
    background-color: #6A2C55;
    color: #fff;
  }
  body[data-video-mode=true] .modal-description .modal-content-container-item:has(.explain) {
    display: none;
  }
}
@media only screen and (min-width: 1600px) and (min-aspect-ratio: 15/9) and (max-aspect-ratio: 17/9) {
  /* 16/9 view viewport styles for video recording */
  body[data-video-mode=true] .relationships-description {
    display: none;
  }
  body[data-video-mode=true] #columns-container,
  body[data-video-mode=true] #goals-container,
  body[data-video-mode=true] #sources-container,
  body[data-video-mode=true] #supported-import-goals-container {
    padding: 0.5rem;
  }
  body[data-video-mode=true] #columns-container ul,
  body[data-video-mode=true] #goals-container ul,
  body[data-video-mode=true] #sources-container ul,
  body[data-video-mode=true] #supported-import-goals-container ul {
    font-size: 2rem;
  }
}
.sidebar {
  background-color: #2D2832;
  grid-column: sidebar-start/sidebar-end;
  grid-row: 2/2;
  overflow: auto;
  font-size: 1.7rem;
  color: white;
  padding: 1.7rem 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 5rem;
}
.sidebar::-webkit-scrollbar {
  width: 0rem;
}
.sidebar h3 {
  font-weight: 600;
  font-size: 1.7rem;
  margin-bottom: 0.75rem;
}
.sidebar h3 img {
  width: 2rem;
  height: 2rem;
  margin-left: 0 !important;
}
.sidebar.init-loading {
  background: linear-gradient(90deg, #2D2832 25%, #222 37%, #2D2832 63%);
  background-size: 400% 100%;
  animation: loadingShimmer 2s ease-in-out infinite;
}
.sidebar .mobile-menu-icon {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
  width: 2rem;
  height: 2rem;
  display: none;
  position: absolute;
  bottom: 10rem;
  left: 0rem;
}

.sidebar li {
  margin: 1rem 0rem;
  margin-left: 1rem;
  list-style-type: none;
  padding: 0;
  font-size: 1.4rem;
  display: flex;
  justify-content: left;
  align-items: center;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
  will-change: transform;
}
.sidebar li.in-folder {
  margin-left: 1rem;
}
.sidebar li .popUpListItem {
  background-color: #6A2C55;
}
.sidebar li label,
.sidebar li a {
  max-width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 1.5rem;
  font-weight: 300;
  font-size: 1.4rem;
  background-color: #38313E;
  border-radius: 1.2rem;
  box-shadow: -1px -16px 21px -11px rgba(0, 0, 0, 0.05) inset;
  -webkit-box-shadow: -1px -16px 21px -11px rgba(0, 0, 0, 0.05) inset;
  -moz-box-shadow: -1px -16px 21px -11px rgba(0, 0, 0, 0.05) inset;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sidebar li label span,
.sidebar li a span {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
}
.sidebar li label.add,
.sidebar li a.add {
  background: none;
  justify-content: center;
  gap: 0;
  font-weight: 500;
}
.sidebar li label.add:hover,
.sidebar li a.add:hover {
  background-color: #4F213F;
}
.sidebar li label.add.animation,
.sidebar li a.add.animation {
  animation: add-animation 0.5s ease;
}
.sidebar li:has(.add) {
  width: 8rem;
}
.sidebar li a {
  color: #fff;
  text-decoration: none;
  transition: background-color 200ms;
}
.sidebar li a:hover {
  background-color: #4F213F;
}
.sidebar li a.active {
  background-color: #6A2C55;
}
.sidebar li a.active-loading {
  pointer-events: none;
  color: #fff;
  background: linear-gradient(90deg, #4F213F 25%, rgb(107.7785714286, 45.0214285714, 85.95) 37%, #4F213F 63%);
  background-size: 200% 100%;
  animation: sidebar-button-loading 1.2s ease-in-out infinite;
}
.sidebar li a.greyish {
  background-color: rgba(0, 0, 0, 0);
  color: lightgrey;
}
.sidebar li a.greyish:hover {
  cursor: auto;
}
.sidebar li .sidebar-item-arrow-box {
  width: 1.8;
  height: 1.8;
  margin-left: -1.7rem;
  border-radius: 1rem;
  flex-direction: column;
  display: flex;
}
.sidebar li .sidebar-item-arrow-box img {
  opacity: 0;
  width: 1.8rem;
  height: 0.9em;
  margin: 0;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
.sidebar li .sidebar-item-arrow-box img:hover {
  opacity: 1;
}
.sidebar li:hover,
.sidebar li label:hover {
  cursor: pointer;
}

.sidebar li:last-child {
  margin-bottom: 0;
  margin-top: 0;
}

.manageList > li {
  margin-left: 0;
}

.agentlist > li img,
.projectlist > li img,
.importlist > li img,
#imports > h3 > img,
#projects > h3 > img,
#agents > h3 > img,
.manageList > li img,
#manage > h3 > img {
  margin-left: 0.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
  width: 2rem;
}

label.add img {
  width: 1.5rem;
}

#agents > h3,
#projects > h3,
#imports > h3,
#manage > h3 {
  display: flex;
  justify-content: left;
  gap: 0.5rem;
  align-items: center;
}

#agents {
  margin-top: 3rem;
}

#projects,
#imports {
  margin-top: 7.5rem;
}

@keyframes add-animation {
  0% {
    background-color: linear-gradient(135deg, #6A2C55, #8B5478);
  }
  30% {
    background-color: linear-gradient(135deg, #6A2C55, #8B5478);
  }
  100% {
    background-color: rgba(0, 0, 0, 0);
  }
}
@keyframes loadingShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
#agents > ul,
#projects > ul,
#imports > ul {
  opacity: 1;
  transition: opacity 1s, max-height 5s ease;
  overflow: hidden;
  max-height: 1000rem;
}
#agents > ul.init-loading,
#projects > ul.init-loading,
#imports > ul.init-loading {
  min-height: 5rem;
  opacity: 0;
  max-height: 10rem;
}

.sidebar .sidebar-group-container {
  margin: 1rem 0rem;
}
.sidebar .sidebar-group-container .folder-header-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.sidebar .sidebar-group-container .folder-header-container input {
  padding: 0.75rem 1.5rem;
  font-size: 1.4rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border: none;
  color: white;
  outline: none;
  min-width: 0;
}
.sidebar .sidebar-group-container .folder-header-container input[type=text][readonly] {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0);
}
.sidebar .sidebar-group-container .folder-header-container input[type=text]:not([readonly]) {
  background-color: rgba(255, 255, 255, 0.05);
}
.sidebar .sidebar-group-container .folder-header-container input:hover {
  cursor: pointer;
}
.sidebar .sidebar-group-container .folder-header-container .stacked-images {
  position: relative;
  width: 2rem;
  height: 2rem;
}
.sidebar .sidebar-group-container .folder-header-container .stacked-images img {
  width: 1.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
  margin-left: 0.25;
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  transition: top 0.2s ease;
}
.sidebar .sidebar-group-container .folder-header-container .stacked-images img:nth-of-type(2) {
  top: 0.4rem;
}
.sidebar .sidebar-group-container .folder-header-container .stacked-images img:nth-of-type(3) {
  top: 0.55rem;
}
.sidebar .sidebar-group-container .folder-header-container:hover {
  cursor: pointer;
}
.sidebar .sidebar-group-container .folder li a,
.sidebar .sidebar-group-container .folder li label {
  max-width: 90%;
}
.sidebar .sidebar-group-container .folder li::before {
  content: "";
  background: url("/static/img/in_folder.svg") no-repeat center center;
  background-size: contain;
  /* scale to fit box */
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
  width: 1.5rem;
  height: 1.5rem;
  opacity: 0.5;
  flex-shrink: 0;
}
.sidebar .sidebar-group-container:not(.opened) .folder {
  display: none;
}
.sidebar .sidebar-group-container:not(.opened) .stacked-images img:nth-of-type(2),
.sidebar .sidebar-group-container:not(.opened) .stacked-images img:nth-of-type(3) {
  top: 0.25rem;
}
.sidebar li.dragging > a {
  opacity: 0.5;
}
.sidebar li.drag-over > a {
  background-color: #B08D57;
}
.sidebar li.remove-folder-zone {
  margin: 0;
  opacity: 0.5;
  background: linear-gradient(to top, rgb(40, 40, 40) 0%, rgba(40, 40, 40, 0) 100%);
  cursor: default;
  height: 0;
  transition: height 0.25s;
}
.sidebar li.remove-folder-zone.show {
  height: 1rem;
}
.sidebar li.remove-folder-zone.drag-over {
  opacity: 1;
}

#settings-container {
  display: grid;
  grid-template-rows: 7vh 88vh;
  grid-template-columns: [left-start] 40rem [left-end right-start] 1fr [right-end];
  padding: 0 1rem;
}
#settings-container .content-header {
  padding: 0 2rem;
  grid-column: left-start/right-end;
  grid-row: 1/1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#settings-container .content-header h1 {
  display: flex;
}
#settings-container .content-header h1 img {
  margin-right: 1rem;
}
#settings-container .content-header .content-header-button-box {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#settings-container .content-header img {
  width: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#settings-container #settings-menu-container {
  padding: 0 2rem;
  padding-bottom: 2rem;
  grid-column: left-start/left-end;
  grid-row: 2/2;
  overflow: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-self: stretch;
}
#settings-container #settings-menu-container ul {
  overflow: auto;
}
#settings-container #settings-menu-container ul::-webkit-scrollbar {
  width: 0rem;
}
#settings-container #settings-menu-container ul li {
  margin: 1rem 0rem;
  list-style-type: none;
  padding: 0;
  font-size: 1.4rem;
  display: flex;
  justify-content: left;
  align-items: center;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}
#settings-container #settings-menu-container ul li label {
  max-width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  align-items: center;
  font-weight: 500;
  font-size: 1.4rem;
  background-color: #38313E;
  border-radius: 1.8rem;
  box-shadow: -1px -16px 21px -11px rgba(0, 0, 0, 0.05) inset;
  -webkit-box-shadow: -1px -16px 21px -11px rgba(0, 0, 0, 0.05) inset;
  -moz-box-shadow: -1px -16px 21px -11px rgba(0, 0, 0, 0.05) inset;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
  padding: 2rem 1.5rem;
  color: #fff;
  text-decoration: none;
  transition: background-color 200ms;
}
#settings-container #settings-menu-container ul li label:hover {
  background-color: #4F213F;
  cursor: pointer;
}
#settings-container #settings-menu-container ul li label.active {
  background-color: #6A2C55;
}
#settings-container #settings-menu-item-content-container {
  display: flex;
  align-self: stretch;
  grid-column: right-start/right-end;
  grid-row: 2/2;
  justify-content: flex-start;
}
#settings-container #settings-menu-item-content-container > div {
  padding: 2rem;
  background-color: #1A1A1A;
  color: #fbfbfb;
  border-radius: 2rem;
  overflow: auto;
  display: none;
}
#settings-container #settings-menu-item-content-container > div.active {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
#settings-container #settings-menu-item-content-container > div p.head-row {
  padding: 3rem;
  font-size: 2.5rem;
  background-color: #6A2C55;
  color: #fff;
  margin: 0 -2rem;
  margin-top: -2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#settings-container #settings-menu-item-content-container > div p.head-row span {
  opacity: 0;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container {
  flex-direction: column;
  display: flex;
  flex: 1;
  padding: 1rem;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section:not(:first-of-type) {
  margin-top: 2rem;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section .section-head-row {
  font-weight: bold;
  font-size: 2rem;
  padding: 1rem 0rem;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table .td_buttonContainer {
  display: flex;
  justify-content: center;
  padding: 0.2rem;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table .td_buttonContainer .edit-button {
  display: flex;
  background-color: #6A2C55;
  padding: 0.5rem;
  border-radius: 0.5rem;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table .td_buttonContainer .edit-button img {
  width: 1.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table .td_buttonContainer .edit-button:hover {
  cursor: pointer;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table.head-left td {
  margin: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table.head-left td img {
  width: 1.5rem;
  height: 1.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table.head-left td:nth-of-type(1) {
  padding-right: 2rem;
  font-weight: bold;
  font-size: 1.2rem;
  color: grey;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table.head-left td:nth-of-type(2) {
  padding-left: 2rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table.head-top {
  text-align: center;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table.head-top td:not(:first-of-type):not(.td_buttonContainer) {
  padding-left: 2rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table.head-top td:first-of-type {
  color: grey;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table.head-top:not(.no-small-end-col) td:last-child,
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table.head-top:not(.no-small-end-col) th:last-child {
  width: 8rem;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table.head-top thead {
  background-color: rgba(255, 255, 255, 0.06);
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table.head-top thead th:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table.head-top thead th:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table.head-top tr:first-of-type td {
  padding-top: 1rem;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table.head-top th:not(:last-of-type),
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section table.head-top td:not(:last-of-type) {
  padding-right: 2rem;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section .button-container {
  margin-top: 2rem;
  display: flex;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section .button-container label {
  border-radius: 1rem;
  padding: 0.75rem 1.5rem;
  max-width: 100%;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
  background-color: #6A2C55;
  color: #fff;
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section .button-container label img {
  width: 1.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#settings-container #settings-menu-item-content-container > div .settings-section-container .settings-section .button-container label:hover {
  cursor: pointer;
}
#settings-container #settings-add-viewer-project-container,
#settings-container #settings-modify-viewer-project-container {
  width: 100%;
  min-height: 4rem;
}
#settings-container .viewer-project-checkbox-container,
#settings-container .viewer-agent-checkbox-container {
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 2000px) {
  #settings-container {
    grid-template-rows: 8vh 87vh;
  }
}
body {
  background-color: #FBF7F4;
}

.admin-container {
  display: grid;
  grid-template-rows: 5vh 93vh 2vh;
  grid-template-columns: [full-start] 1fr [center-start] minmax(min-content, 150rem) [center-end] 1fr [full-end];
}
.admin-container #admin-container-content {
  grid-column: center-start/center-end;
  grid-row: 2/2;
  color: #fff;
}
.admin-container .content-header {
  padding: 0 2rem;
}
.admin-container .content-header h1 {
  margin-top: 2rem;
  text-align: center;
}
.admin-container #admin-items-grid {
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr;
  grid-column: center-start/center-end;
  grid-row: 2/2;
  height: 93vh;
}
.admin-container #admin-items-grid .content-header {
  grid-row: 1;
}
.admin-container #admin-items-grid #admin-navbar {
  display: flex;
  justify-content: center;
  gap: 2rem;
  align-items: stretch;
  margin-top: 2rem;
  grid-column: 1;
  grid-row: 2;
}
.admin-container #admin-items-grid #admin-navbar a {
  color: #fff;
  padding: 1rem 2rem;
  text-decoration: none;
  font-weight: bold;
  background-color: #3d3a4e;
  font-size: 1.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  text-align: center;
}
.admin-container #admin-items-grid .admin-items {
  overflow: auto;
  padding: 2rem;
  grid-row: 3;
}
.admin-container #admin-items-grid .admin-items h2 {
  margin-top: 4rem;
  background-color: #3d3a4e;
  padding: 0.05rem;
  text-align: center;
  border-radius: 0.5rem;
}
.admin-container #admin-items-grid .admin-items h3 {
  font-size: 1.5rem;
  text-decoration: underline;
  margin-top: 2rem;
}
.admin-container #admin-items-grid .admin-items .admin-explain {
  font-size: 1.2rem;
  background-color: #18171f;
  text-align: left !important;
  padding: 1rem;
  border-radius: 1rem;
  margin: 1rem auto;
}
.admin-container #admin-items-grid .admin-items .admin-explain .admin-explain-note span {
  border: 2px solid #6A2C55;
  padding: 0.25rem 1rem;
  margin: 0.5rem 0;
  margin-left: 1.5rem;
  border-radius: 0.25rem;
  font-size: 1.3rem;
}
.admin-container #admin-items-grid .admin-items .admin-explain h4 {
  font-size: 1.4rem;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}
.admin-container #admin-items-grid .admin-items .admin-explain h5 {
  font-size: 1.3rem;
  padding-left: 1rem;
  margin-top: 1rem;
}
.admin-container #admin-items-grid .admin-items .admin-explain ul {
  list-style-type: circle;
  padding-left: 3rem;
}
.admin-container #admin-items-grid .admin-items .admin-explain ul li {
  display: list-item;
}
.admin-container #admin-items-grid .admin-items ul {
  list-style-type: none;
  font-size: 1.3rem;
  margin: 1rem 0;
}
.admin-container #admin-items-grid .admin-items ul li.admin-items-table-row {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.admin-container #admin-items-grid .admin-items ul li.admin-items-table-row:nth-child(odd) {
  background-color: #1a1a1a;
}
.admin-container #admin-items-grid .admin-items ul li {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  width: 100%;
  gap: 0.5rem;
}
.admin-container #admin-items-grid .admin-items ul li.error-log-details, .admin-container #admin-items-grid .admin-items ul li.contact-details {
  display: block;
}
.admin-container #admin-items-grid .admin-items ul li img {
  width: 2rem;
}
.admin-container #admin-items-grid .admin-items ul li span,
.admin-container #admin-items-grid .admin-items ul li button {
  flex-basis: 0;
  flex: 1 1 0px;
  max-width: 30rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-container #admin-items-grid .admin-items ul li span.big,
.admin-container #admin-items-grid .admin-items ul li button.big {
  flex: 2;
}
.admin-container #admin-items-grid .admin-items ul li span.bigger,
.admin-container #admin-items-grid .admin-items ul li button.bigger {
  flex: 3;
  max-width: 100rem;
}
.admin-container #admin-items-grid .admin-items ul li span.bigger span,
.admin-container #admin-items-grid .admin-items ul li button.bigger span {
  max-width: 100rem !important;
}
.admin-container #admin-items-grid .admin-items ul li span.small,
.admin-container #admin-items-grid .admin-items ul li button.small {
  flex: 0.5;
}
.admin-container #admin-items-grid .admin-items ul li span.token-wrapper,
.admin-container #admin-items-grid .admin-items ul li button.token-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.admin-container #admin-items-grid .admin-items ul li span.token-wrapper .token-scroll,
.admin-container #admin-items-grid .admin-items ul li button.token-wrapper .token-scroll {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  max-width: 300px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 0.3rem 1rem;
  background: #111;
  border: 1px solid #444;
  font-family: monospace;
  /* ← vertically center text */
}
.admin-container #admin-items-grid .admin-items ul li button {
  cursor: pointer;
  padding: 0.5rem 0.2rem;
  overflow: hidden;
  position: relative;
}
.admin-container #admin-items-grid .admin-items ul li button.api-job-run.loading {
  color: transparent;
  pointer-events: none;
}
.admin-container #admin-items-grid .admin-items ul li button.api-job-run.loading::after {
  content: "⏳";
  font-size: 1.2em;
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spin 1s linear infinite;
}
.admin-container #admin-items-grid .admin-items ul li.hidden {
  display: none;
}
.admin-container #admin-items-grid .admin-items ul .admin-items-table-headrow {
  font-weight: bold;
  border-bottom: 1px solid #fff;
}
.admin-container #admin-items-grid .admin-items button {
  margin: 0.2rem 0;
  width: 12rem;
  border: none;
}
.admin-container #admin-items-grid .admin-items button.no-label,
.admin-container #admin-items-grid .admin-items button label,
.admin-container #admin-items-grid .admin-items button a {
  cursor: pointer;
  display: block;
  padding: 0.5rem 0.2rem;
  text-decoration: none;
}
.admin-container .api-files-list {
  padding: 1rem 0;
}
.admin-container .api-files-list li {
  margin-bottom: 0.5rem;
}
.admin-container .api-files-list li > span a {
  display: inline-block;
  background-color: #fff;
  padding: 0.25rem 2rem;
  color: #000;
  text-decoration: none;
  border: 1px solid grey;
}
.admin-container .api-files-list li > span a.download, .admin-container .api-files-list li > span a.delete {
  position: relative;
  padding-left: 28px;
  /* space for icon */
  cursor: pointer;
}
.admin-container .api-files-list li > span a.download::before, .admin-container .api-files-list li > span a.delete::before {
  /* Unicode download arrow */
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}
.admin-container .api-files-list li > span a.download::before {
  content: "⬇️";
}
.admin-container .api-files-list li > span a.delete::before {
  content: "🗑️";
}
.admin-container input[type=password] {
  display: block;
  width: 100%;
  border-radius: 5px;
  padding: 1rem 1rem;
  font-size: 1.5rem;
  margin: 1vh 0vh;
}
.admin-container .error-log-details h4 {
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
}
.admin-container .error-section {
  margin-bottom: 20px;
}
.admin-container .error-section h4 {
  margin-bottom: 10px;
}
.admin-container .error-json,
.admin-container .error-traceback {
  background: #111;
  color: #ddd;
  padding: 15px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
  max-height: 500px;
}
.admin-container .error-log-row {
  cursor: pointer;
}

@media only screen and (max-width: 2000px) {
  .admin-container {
    grid-template-rows: 5vh 93vh 2vh;
  }
  .admin-container .header-container,
  .admin-container .header {
    height: 5vh;
  }
  .admin-container #admin-items-grid {
    height: 93vh !important;
  }
  .admin-container .footer {
    height: 2vh;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.modal-add-checkbox {
  display: none;
}

#modal-promotion:checked ~ .modal-modify-api-job-parameter,
#modal-promotion:checked ~ .modal-promotion-background {
  display: block;
}

#modal-promotion:checked ~ .modal-container-new.promotion {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 99vw;
  height: 99vh;
  top: 0vh;
  left: 0vh;
}
#modal-promotion:checked ~ .modal-container-new.promotion .modal,
#modal-promotion:checked ~ .modal-container-new.promotion .modal-background,
#modal-promotion:checked ~ .modal-container-new.promotion .modal-slide {
  display: block;
}

#usecase-advertising-step-0 {
  background-image: url("../img/home/advertising/0 - Smart Strategy Better Social Media.svg");
}

#usecase-advertising-step-1 {
  background-image: url("../img/home/advertising/1-campaign_data_in_one_place.svg");
}

#usecase-advertising-step-2 {
  background-image: url("../img/home/advertising/2-cross_platform_pacing_and_performance.svg");
}

#usecase-advertising-step-3 {
  background-image: url("../img/home/advertising/3_chat_with_your_campaigns.svg");
}

#usecase-advertising-step-4 {
  background-image: url("../img/home/advertising/4_drive_smarter_campaigns.svg");
}

#usecase-advertising-step-5 {
  background-image: url("../img/home/advertising/5_magic_tools.svg");
}

#usecase-advertising-step-6 {
  background-image: url("../img/home/advertising/6_full_customization.svg");
}

#usecase-advertising-step-7 {
  background-image: url("../img/home/advertising/7_recommendations.svg");
}

#usecase-advertising-step-8 {
  background-image: url("../img/home/advertising/8_one_unified_view.svg");
}

#usecase-advertising-step-9 {
  background-image: url("../img/home/advertising/9_read_only_reporting.svg");
}

#animation-process-automation {
  background-image: url("../img/home/process-automation.svg");
}

.home-container {
  display: grid;
  grid-template-rows: 5vh 93vh 2vh;
  grid-template-columns: [left-start] 1fr [center-start] minmax(min-content, 150rem) [center-end] 1fr [right-end];
  color: #221E26;
}
.home-container .emoji {
  height: 1em;
  width: auto;
}
.home-container header {
  grid-column: center-start/center-end;
  grid-row: 1/1;
  display: grid;
  grid-template-columns: [left-start] 1fr [center-start] minmax(min-content, 150rem) [center-end] 1fr [right-end];
  background-color: #221E26;
  z-index: 1000;
}
.home-container header .home-header-button-highlight {
  background-color: #6A2C55;
  border-radius: 10rem;
  padding: 0.5rem 2rem;
}
.home-container footer {
  grid-column: center-start/center-end;
  grid-row: 3/3;
}
.home-container #home-container-content {
  grid-column: left-start/right-end;
  grid-row: 2/2;
  display: grid;
  grid-template-columns: [left-start] 1fr [center-start] minmax(min-content, 150rem) [center-end] 1fr [right-end];
  overflow: auto;
}
.home-container .home-section {
  align-items: center;
  grid-column: left-start/right-end;
  grid-row: auto;
  display: grid;
  grid-template-columns: [left-start] 1fr [center-start] minmax(min-content, 150rem) [center-end] 1fr [right-end];
}
.home-container .home-section.dark {
  background-color: #221E26;
  color: #FFFFFF;
}
.home-container .home-section.dark .sub-headline-divider > span {
  background-color: #fff !important;
}
.home-container .home-section.dark .fluent-text li::before {
  background: #ffffff;
}
.home-container .home-section.dark .home-at-a-glance-items div > span {
  color: #fff !important;
}
.home-container .home-section.dark .home-at-a-glance-items div > span .number span {
  background-color: #fff !important;
  color: #000 !important;
}
.home-container .home-section.dark .home-section-container .fluent-text li {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}
.home-container .home-section.dark .home-section-container .home-at-a-glance-items > div > span {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.home-container .home-section.dark .home-section-container .home-content-article-section p,
.home-container .home-section.dark .home-section-container .home-content-article-section p:first-of-type,
.home-container .home-section.dark .home-section-container .home-content-article-section .article-insight,
.home-container .home-section.dark .home-section-container .home-content-article-section h3 {
  color: #fff;
}
.home-container .home-section.dark .home-section-container .home-content .article-card {
  color: rgba(255, 255, 255, 0.78);
  border-top: 0.1rem solid rgba(255, 255, 255, 0.08);
}
.home-container .home-section.dark .home-section-container .home-content .article-card p {
  color: rgba(255, 255, 255, 0.78);
}
.home-container .home-section.dark .home-section-container .home-section-container-highlight-paragraph p > span {
  color: #eee;
}
.home-container .home-section.dark ul li {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.home-container .home-section.dark .infinite-marquee::before {
  left: 0;
  background: linear-gradient(to right, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}
.home-container .home-section.dark .infinite-marquee::after {
  right: 0;
  background: linear-gradient(to left, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}
.home-container .home-section.dark .infinite-marquee-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.home-container .home-section.bright, .home-container .home-section.light-grey {
  background-color: #FFFFFF;
  color: #221E26;
}
.home-container .home-section.bright .fluent-text, .home-container .home-section.light-grey .fluent-text {
  color: #777777;
}
.home-container .home-section.bright .fluent-text li::before, .home-container .home-section.light-grey .fluent-text li::before {
  background: #6A2C55;
}
.home-container .home-section.bright .full-width-highlight-text li, .home-container .home-section.light-grey .full-width-highlight-text li {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.home-container .home-section.bright ul li, .home-container .home-section.light-grey ul li {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
}
.home-container .home-section.bright .home-section-container .fluent-text li, .home-container .home-section.light-grey .home-section-container .fluent-text li {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #2f2f2f;
}
.home-container .home-section.bright .home-section-container .home-at-a-glance-items > div > span, .home-container .home-section.light-grey .home-section-container .home-at-a-glance-items > div > span {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.home-container .home-section.bright .home-section-container .text-highlight.light-border, .home-container .home-section.light-grey .home-section-container .text-highlight.light-border {
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.home-container .home-section.bright .home-section-container .home-content .tab, .home-container .home-section.light-grey .home-section-container .home-content .tab {
  background-color: #FFFFFF;
}
.home-container .home-section.bright .home-section-container .home-content .tab .tab-head, .home-container .home-section.light-grey .home-section-container .home-content .tab .tab-head {
  background-color: rgba(0, 0, 0, 0.05);
}
.home-container .home-section.bright .home-section-container .home-content .tab ul, .home-container .home-section.light-grey .home-section-container .home-content .tab ul {
  background-color: #FFFFFF;
  color: #221E26;
}
.home-container .home-section.bright .home-section-container .home-content .tab ul li::marker, .home-container .home-section.light-grey .home-section-container .home-content .tab ul li::marker {
  color: #6A2C55;
}
.home-container .home-section.bright .home-section-container .home-content .tab ul li, .home-container .home-section.light-grey .home-section-container .home-content .tab ul li {
  background: none;
  border: none;
}
.home-container .home-section.bright .text ul li, .home-container .home-section.light-grey .text ul li {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}
.home-container .home-section.bright .infinite-marquee::before, .home-container .home-section.light-grey .infinite-marquee::before {
  left: 0;
  background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
}
.home-container .home-section.bright .infinite-marquee::after, .home-container .home-section.light-grey .infinite-marquee::after {
  right: 0;
  background: linear-gradient(to left, rgb(255, 255, 255), rgba(255, 255, 255, 0));
}
.home-container .home-section.bright .infinite-marquee-item, .home-container .home-section.light-grey .infinite-marquee-item {
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.home-container .home-section.light-grey {
  background-color: #FBF7F4;
}
.home-container .home-section.green {
  background-color: #F2E9EE;
  color: rgba(34, 30, 38, 0.9);
}
.home-container .home-section.green .text li {
  background-color: rgba(0, 0, 0, 0.04);
}
.home-container .home-section.green .fluent-text {
  color: #333333;
}
.home-container .home-section.green .fluent-text li::before {
  background: #000000;
}
.home-container .home-section.green .home-at-a-glance-items div > span {
  color: #000 !important;
}
.home-container .home-section.green .home-at-a-glance-items div > span .number span {
  background-color: #000 !important;
  color: #F2E9EE !important;
}
.home-container .home-section.green .home-section-container .fluent-text li {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.65);
  color: #1f1f1f;
}
.home-container .home-section.green .home-section-container .home-at-a-glance-items > div > span {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.home-container .home-section.green .home-section-container .text-highlight.light-border {
  border: 1px solid rgb(0, 0, 0);
}
.home-container .home-section.green .home-section-container .home-content .flow-steps .flow-step {
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.home-container .home-section.green .home-section-container .home-content .flow-steps .flow-arrow {
  background: rgba(0, 0, 0, 0.35);
}
.home-container .home-section.green .home-section-container .home-content .flow-steps .flow-arrow::before {
  border-top: 0.2rem solid rgba(0, 0, 0, 0.35);
  border-right: 0.2rem solid rgba(0, 0, 0, 0.35);
}
.home-container .home-section.green .home-section-container .home-content .flow-steps .flow-arrow::after {
  background: #000;
}
.home-container .home-section.green .home-section-container .home-content .tab {
  background-color: rgba(0, 0, 0, 0);
}
.home-container .home-section.green .home-section-container .home-content .tab .tab-head {
  background-color: rgba(0, 0, 0, 0.05);
}
.home-container .home-section.green .home-section-container .home-content .tab .tab-head::after {
  background-color: #000;
}
.home-container .home-section.green .home-section-container .home-content .tab ul {
  background-color: rgba(0, 0, 0, 0);
  color: #000;
}
.home-container .home-section.green .home-section-container .home-content .tab ul li::marker {
  color: #000;
}
.home-container .home-section.green .home-section-container .home-content-article-section p,
.home-container .home-section.green .home-section-container .home-content-article-section p:first-of-type,
.home-container .home-section.green .home-section-container .home-content-article-section .article-insight,
.home-container .home-section.green .home-section-container .home-content-article-section h3 {
  color: #000;
}
.home-container .home-section.green .home-section-container .home-content-article-section .article-insight {
  border-left: 0.4rem solid #000;
}
.home-container .home-section.green .home-section-container .home-section-container-highlight-paragraph p > span {
  color: #000;
}
.home-container .home-section.green .home-section-container .home-section-container-highlight-paragraph p {
  border: 2px solid rgba(0, 0, 0, 0.5);
}
.home-container .home-section.green .home-section-container .home-section-container-highlight-paragraph p::before {
  color: #F2E9EE;
  border: 2px solid #000;
  background: #000;
}
.home-container .home-section.green .home-section-container .text-highlight.dark {
  color: #F2E9EE;
}
.home-container .home-section.orange {
  background-color: #B08D57;
  color: rgba(34, 30, 38, 0.9);
}
.home-container .home-section.orange .home-section-container .home-content .full-width-highlight-text[data-headline]:not([data-headline=""])::before {
  color: #000;
}
.home-container .home-section.orange .home-section-container .home-content .full-width-highlight-text li {
  background-color: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.home-container .home-section.orange .text li {
  background-color: rgba(0, 0, 0, 0.04);
}
.home-container .home-section.orange .fluent-text li::before {
  background: #000000;
}
.home-container .home-section.orange .home-at-a-glance-items div > span {
  color: #000 !important;
}
.home-container .home-section.orange .home-at-a-glance-items div > span .number span {
  background-color: #000 !important;
  color: #B08D57 !important;
}
.home-container .home-section.orange .home-section-container .fluent-text li {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.65);
  color: #1f1f1f;
}
.home-container .home-section.orange .home-section-container .home-at-a-glance-items > div > span {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.home-container .home-section.orange .home-section-container .home-section-container-highlight-paragraph p > span {
  color: #000;
}
.home-container .home-section.orange .home-section-container .home-section-container-highlight-paragraph p {
  border: 2px solid rgba(0, 0, 0, 0.5);
}
.home-container .home-section.orange .home-section-container .home-section-container-highlight-paragraph p::before {
  color: #B08D57;
  border: 2px solid #000;
  background: #000;
}
.home-container .home-section.orange .home-section-container .home-content .tab {
  background-color: rgba(0, 0, 0, 0);
}
.home-container .home-section.orange .home-section-container .home-content .tab .tab-head {
  background-color: rgba(0, 0, 0, 0.05);
}
.home-container .home-section.orange .home-section-container .home-content .tab .tab-head::after {
  background-color: #000;
}
.home-container .home-section.orange .home-section-container .home-content .tab ul {
  background-color: rgba(0, 0, 0, 0);
  color: #000;
}
.home-container .home-section.orange .home-section-container .home-content .tab ul li::marker {
  color: #000;
}
.home-container .home-section.orange .home-section-container .text-highlight.dark {
  color: #B08D57;
}
.home-container .home-section.orange .home-section-container .text-highlight.light-border {
  border: 1px solid rgb(0, 0, 0);
}
.home-container .home-section.orange .infinite-marquee::before {
  left: 0;
  background: linear-gradient(to right, #b08d57, rgba(176, 141, 87, 0));
}
.home-container .home-section.orange .infinite-marquee::after {
  right: 0;
  background: linear-gradient(to left, #b08d57, rgba(176, 141, 87, 0));
}
.home-container .home-section.orange .infinite-marquee-item {
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.home-container .home-section.blue {
  background-color: #6A2C55;
  color: #FFFFFF;
}
.home-container .home-section.blue .home-section-container .home-content .full-width-highlight-text[data-headline]:not([data-headline=""])::before {
  color: #fff;
}
.home-container .home-section.blue .home-section-container .home-content .full-width-highlight-text li {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.home-container .home-section.blue .sub-headline-divider > span {
  background-color: #fff !important;
}
.home-container .home-section.blue .fluent-text li::before {
  background: #ffffff;
}
.home-container .home-section.blue .text li {
  background-color: rgba(255, 255, 255, 0.04);
}
.home-container .home-section.blue .home-at-a-glance-items div > span {
  color: #fff !important;
}
.home-container .home-section.blue .home-at-a-glance-items div > span .number span {
  background-color: #fff !important;
  color: #6A2C55 !important;
}
.home-container .home-section.blue .home-section-container .fluent-text li {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.97);
}
.home-container .home-section.blue .home-section-container .home-at-a-glance-items > div > span {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.home-container .home-section.blue .home-section-container .home-content .tab {
  background-color: rgba(255, 255, 255, 0.15);
}
.home-container .home-section.blue .home-section-container .home-content .tab .tab-head {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.05);
}
.home-container .home-section.blue .home-section-container .home-content .tab .tab-head::after {
  background-color: #fff;
}
.home-container .home-section.blue .home-section-container .home-content .tab ul {
  background-color: rgba(255, 255, 255, 0);
  color: #fff;
}
.home-container .home-section.blue .home-section-container .home-content .tab ul li::marker {
  color: #fff;
}
.home-container .home-section.blue .home-section-container .home-content-article-section p,
.home-container .home-section.blue .home-section-container .home-content-article-section p:first-of-type,
.home-container .home-section.blue .home-section-container .home-content-article-section .article-insight,
.home-container .home-section.blue .home-section-container .home-content-article-section h3 {
  color: #fff;
}
.home-container .home-section.blue .home-section-container .home-content-article-section .article-insight {
  border-left: 0.4rem solid #fff;
}
.home-container .home-section.blue .home-section-container .home-section-container-highlight-paragraph p > span {
  color: #fff;
}
.home-container .home-section.blue .home-section-container .home-section-container-highlight-paragraph p {
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.home-container .home-section.blue .home-section-container .home-section-container-highlight-paragraph p::before {
  color: #6A2C55;
  background: #fff;
}
.home-container .home-section:has(.home-content-article-section) .home-section-container p {
  max-width: 90rem;
  padding: 0;
}
.home-container .home-section .home-section-container {
  grid-column: center-start/center-end;
  grid-row: auto;
  max-width: 150rem;
  margin: 0 auto;
  padding: 0 3rem 6rem;
  text-align: center;
}
.home-container .home-section .home-section-container:not(:first-child) {
  margin-top: 0;
}
.home-container .home-section .home-section-container.full-width {
  grid-column: left-start/right-end;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.home-container .home-section .home-section-container.full-width p {
  padding-left: 30rem;
  padding-right: 30rem;
}
.home-container .home-section .home-section-container .no-wrap {
  white-space: nowrap;
}
.home-container .home-section .home-section-container h1,
.home-container .home-section .home-section-container h2 {
  text-align: center;
  font-family: "Golos Text", "Roboto", Arial;
  letter-spacing: -0.04em;
  padding-left: 0;
  padding-right: 0;
  max-width: 150rem;
  margin-left: auto;
  margin-right: auto;
}
.home-container .home-section .home-section-container h1 {
  font-size: clamp(4.5rem, 6vw, 7.2rem);
  line-height: 0.95;
  padding-top: 15rem;
  padding-bottom: 1.6rem;
  font-weight: bold;
}
.home-container .home-section .home-section-container h2 {
  font-size: clamp(3.2rem, 4vw, 4.4rem);
  line-height: 1.02;
  padding-top: 6rem;
  padding-bottom: 1.6rem;
  max-width: 95rem;
  font-weight: 500;
}
.home-container .home-section .home-section-container h2 + p {
  margin-top: 2rem;
  font-size: clamp(1.8rem, 1.6vw, 2.3rem);
  max-width: 95rem;
}
.home-container .home-section .home-section-container h2 + p + p {
  font-style: italic;
}
.home-container .home-section .home-section-container h2:has(+ div .tab),
.home-container .home-section .home-section-container h2:has(+ div .full-width-highlight-text),
.home-container .home-section .home-section-container h2:has(+ div #contactForm) {
  padding-bottom: 5rem;
}
.home-container .home-section .home-section-container h1 + h3 {
  font-size: clamp(2.1rem, 1.9vw, 2.9rem);
}
.home-container .home-section .home-section-container h3 {
  text-align: center;
  font-weight: 400;
  font-family: "Roboto", "Arial";
  font-size: clamp(2.1rem, 1.9vw, 2.9rem);
  line-height: 1.15;
  margin: 1.4rem auto 2.4rem auto;
  max-width: 130rem;
  opacity: 0.96;
  letter-spacing: 0.02em;
}
.home-container .home-section .home-section-container h4 {
  font-weight: 500;
}
.home-container .home-section .home-section-container h2:not(:has(+ p)) {
  padding-bottom: 8rem;
}
.home-container .home-section .home-section-container p {
  font-size: 2rem;
  text-align: center;
  font-family: "Roboto", "Arial";
  padding-left: 15rem;
  padding-right: 15rem;
  padding-top: 1rem;
  padding-bottom: 8rem;
  margin-top: -1rem;
  max-width: 150rem;
  margin-left: auto;
  margin-right: auto;
}
.home-container .home-section .home-section-container p.no-bottom-padding {
  padding-bottom: 1rem;
}
.home-container .home-section .home-section-container p.sub-headline-divider {
  padding: 0;
  margin: 0 auto 4.8rem auto;
}
.home-container .home-section .home-section-container p.sub-headline-divider span {
  display: inline-block;
  width: 3.6rem;
  height: 0.45rem;
  background-color: #000;
  border-radius: 999px;
}
.home-container .home-section .home-section-container p.in-paragraph-button a {
  display: inline-block;
  background-color: #221E26;
  border-radius: 1.2rem;
  text-decoration: none;
  padding: 1.3rem 2.2rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.8rem;
  font-weight: 400;
  box-shadow: 0 10px 30px rgba(0, 127, 255, 0.15);
}
.home-container .home-section .home-section-container p.in-paragraph-button:has(a:hover) {
  transform: translateY(-0.2rem);
}
.home-container .home-section .home-section-container p.in-paragraph-button:has(a:hover) a {
  color: rgba(255, 255, 255, 0.8);
}
.home-container .home-section .home-section-container p.chart-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.home-container .home-section .home-section-container p.chart-title img {
  width: 2.5rem;
  height: 2.5rem;
}
.home-container .home-section .home-section-container .hero-subtext {
  font-size: clamp(2rem, 1.8vw, 2.5rem);
  font-style: italic;
  line-height: 1.45;
  max-width: 130rem;
  margin: 0 auto 5.5rem auto;
  opacity: 0.92;
  text-align: center;
}
.home-container .home-section .home-section-container:has(.text-highlight) .text-highlight {
  transform: translateY(0.6rem);
}
.home-container .home-section .home-section-container .text-highlight {
  white-space: nowrap;
}
.home-container .home-section .home-section-container .text-highlight.green {
  background-color: #F2E9EE;
  color: #221E26 !important;
}
.home-container .home-section .home-section-container .text-highlight.orange {
  background-color: #A8514A;
  color: #FFFFFF !important;
}
.home-container .home-section .home-section-container .text-highlight.red {
  background-color: #A8514A;
  color: #FFFFFF;
}
.home-container .home-section .home-section-container .text-highlight.dark {
  background-color: #221E26;
  color: #FFFFFF;
}
.home-container .home-section .home-section-container .text-highlight.blue {
  background-color: #6A2C55;
  color: #FFFFFF;
}
.home-container .home-section .home-section-container .text-highlight.violette {
  background-color: #6A2C55;
  color: #fff;
}
.home-container .home-section .home-section-container .text-highlight.violette-2 {
  background-color: #8B5478;
  color: #fff;
}
.home-container .home-section .home-section-container .text-highlight.purple {
  background-color: #6A2C55;
  color: #fff;
}
.home-container .home-section .home-section-container .text-highlight.light-border {
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.home-container .home-section .home-section-container .text-highlight.success {
  background-color: #00C851;
  color: #fff;
}
.home-container .home-section .home-section-container .text-highlight.error {
  background-color: #A8514A;
  color: #fff;
}
.home-container .home-section .home-section-container .text-highlight:has(img) {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}
.home-container .home-section .home-section-container .text-highlight img {
  width: 2.5rem;
  height: 2.5rem;
}
.home-container .home-section .home-section-container span.text-highlight {
  padding: 0.2rem 1rem;
  border-radius: 1.2rem;
}
.home-container .home-section .home-section-container .home-section-container-headline-tag {
  display: flex;
  justify-content: center;
}
.home-container .home-section .home-section-container .home-section-container-headline-tag div {
  margin-bottom: -8rem;
  display: flex;
  align-items: end;
}
.home-container .home-section .home-section-container .home-section-container-headline-tag div span.dark {
  background-color: black;
  color: white;
  padding: 0.5rem 1.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 0.5rem;
}
.home-container .home-section .home-section-container .home-section-container-highlight-paragraph {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
  padding-bottom: 2rem;
}
.home-container .home-section .home-section-container .home-section-container-highlight-paragraph p {
  position: relative;
  line-height: 4.4rem;
  border-radius: 2rem;
  border: 2px solid rgba(106, 44, 85, 0.5);
  padding: 2.8rem 2rem 2rem !important;
  max-width: 100rem;
  margin: 0;
  font-size: 1.9rem;
}
.home-container .home-section .home-section-container .home-section-container-highlight-paragraph p > span {
  font-weight: 400;
  letter-spacing: -0.02rem;
  color: #111111;
}
.home-container .home-section .home-section-container .home-section-container-highlight-paragraph p::before {
  content: attr(data-headline);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.6rem 2rem;
  border-radius: 999rem;
  line-height: 1.2;
  white-space: nowrap;
  background-color: #6A2C55;
  font-weight: bold;
  font-size: 1.7rem;
  color: #fff;
}
.home-container .home-section .home-section-container .home-section-container-highlight {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  padding-bottom: 2rem;
  letter-spacing: -0.05rem;
}
.home-container .home-section .home-section-container .home-section-container-highlight.after-bullets {
  max-width: 80rem;
  margin: 0 auto !important;
}
.home-container .home-section .home-section-container .home-section-container-highlight p {
  line-height: 4.4rem;
  border-radius: 2rem;
  background-color: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 2rem 3rem !important;
  max-width: 100rem;
  margin: 0;
}
.home-container .home-section .home-section-container .home-section-container-highlight.goal p::before {
  content: "THE GOAL";
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  font-size: 1.7rem;
  color: rgba(0, 0, 0, 0.5);
}
.home-container .home-section .home-section-container .home-section-container-highlight.dark p {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.home-container .home-section .home-section-container .home-section-container-highlight.dark p::before {
  color: rgba(255, 255, 255, 0.5);
}
.home-container .home-section .home-section-container .home-content-image {
  display: flex;
  justify-content: center;
  margin-bottom: 5rem;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container-narrow {
  width: 100%;
  height: 30vh;
  position: relative;
}
.home-container .home-section .home-section-container .home-content-image .kpi-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.home-container .home-section .home-section-container .home-content-image .kpi-overlay .kpi-box {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  opacity: 0;
}
.home-container .home-section .home-section-container .home-content-image .kpi-overlay .kpi-box.visible {
  opacity: 1;
}
.home-container .home-section .home-section-container .home-content-image .kpi-overlay .kpi-box.warning .kpi-box-inner {
  background-color: #e74c3c;
}
.home-container .home-section .home-section-container .home-content-image .kpi-overlay .kpi-box.success .kpi-box-inner {
  background-color: #2ecc71;
}
.home-container .home-section .home-section-container .home-content-image .kpi-overlay .kpi-box .kpi-box-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.2rem;
  border-radius: 1rem;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  font-size: 1.4rem;
  white-space: nowrap;
}
.home-container .home-section .home-section-container .home-content-image .kpi-overlay .kpi-box .kpi-box-inner img {
  width: 2rem;
  height: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container {
  width: 100%;
  height: 50vh;
  position: relative;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container canvas {
  width: 100%;
  height: 100%;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point.highlighted {
  z-index: 10;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .chart-pin {
  width: 8rem;
  height: 8rem;
  position: absolute;
  opacity: 0;
  transform: translate(-50%, -60%) scale(0.8);
  cursor: pointer;
  filter: drop-shadow(0 10px 20px rgba(0, 127, 255, 0.35));
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .chart-pin.pulse {
  animation: pinPulse 1.2s ease-in-out infinite !important;
  opacity: 1;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .chart-pin svg {
  width: 100%;
  height: 100%;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .chart-pin.visible {
  animation: pinEnter 0.6s ease-out forwards;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point:hover .chart-pin::after {
  opacity: 1;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .tooltip {
  position: absolute;
  top: calc(100% + 4rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 25rem;
  max-width: 40rem;
  padding: 1.6rem;
  border-radius: 1.6rem;
  background: #fff;
  color: #111;
  /* ❌ REMOVE BORDER */
  border: none;
  /* ✅ STRONGER, CLEAN SHADOW */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 127, 255, 0.15);
  font-size: 1.4rem;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  text-align: left;
  /* =========================
  RANGE (Last X days)
  ========================= */
  /* =========================
  TEXT
  ========================= */
  /* =========================
  INSIGHT LINE
  ========================= */
  /* =========================
  ICONS
  ========================= */
  /* =========================
  TRIANGLE POINTER
  ========================= */
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .tooltip.visible {
  opacity: 1;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .tooltip > strong {
  display: block;
  text-align: center;
  margin-bottom: 1rem;
  opacity: 0.55;
  /* ✅ subtle */
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .tooltip p {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 1.8rem;
  line-height: 1.3;
  display: flex;
  align-items: center;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .tooltip p:not(:last-child) {
  margin-bottom: 0.6rem;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .tooltip .insight {
  display: flex;
  align-items: center;
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  font-weight: 600;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  /* subtle separation */
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .tooltip .insight strong {
  margin-bottom: 0;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .tooltip .icon {
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.6rem;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .tooltip .icon.positive {
  color: #2ecc71;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .tooltip .icon.negative {
  color: #e74c3c;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .tooltip .icon.neutral {
  color: #3498db;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .tooltip .icon.insight-icon {
  color: #007FFF;
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .tooltip::after {
  content: "";
  position: absolute;
  top: -10px;
  /* sits above tooltip */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
  /* same as background */
  /* subtle shadow for triangle */
  filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.08));
}
.home-container .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point:hover .tooltip {
  opacity: 1;
}
.home-container .home-section .home-section-container .home-content-image .animation {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 95vw;
  min-height: 75rem;
}
.home-container .home-section .home-section-container .home-content-image .animation.animate {
  animation: popUp 0.3s ease-in;
}
.home-container .home-section .home-section-container .home-content-image .animation svg {
  width: 80%;
  height: 80%;
}
.home-container .home-section .home-section-container .home-content-image .animation .loader {
  width: 3rem;
  height: 3rem;
  border: 0.3rem solid #6A2C55;
  animation: loader-spin 2s linear infinite;
}
.home-container .home-section .home-section-container .home-content-image #animation-usecase-advertising {
  background-image: url("../img/home/advertising/home-advertising.svg");
}
.home-container .home-section .home-section-container .home-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
  padding-bottom: 2rem;
  align-items: flex-start;
  max-width: 150rem;
  margin-left: auto;
  margin-right: auto;
}
.home-container .home-section .home-section-container .home-content:has(.tab) {
  gap: 4rem;
  align-items: flex-start;
  align-items: stretch;
}
.home-container .home-section .home-section-container .home-content.row {
  flex-direction: row;
  align-items: stretch;
  gap: 5rem;
}
.home-container .home-section .home-section-container .home-content.row:has(.tab.row) {
  gap: 2rem;
}
.home-container .home-section .home-section-container .home-content.row:has(.centered-svg-container) {
  gap: 8rem;
}
.home-container .home-section .home-section-container .home-content.flow {
  align-items: flex-start;
}
.home-container .home-section .home-section-container .home-content.flow .flow-connect {
  width: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
.home-container .home-section .home-section-container .home-content.flow .flow-step {
  text-align: center;
  width: 25rem;
}
.home-container .home-section .home-section-container .home-content.flow .flow-step .flow-step-visual {
  height: 20rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.home-container .home-section .home-section-container .home-content.flow .flow-step .flow-step-visual.animate {
  animation: popUp 0.3s ease-in;
}
.home-container .home-section .home-section-container .home-content.flow .flow-step .flow-step-visual img {
  width: 6rem;
  height: 6rem;
}
.home-container .home-section .home-section-container .home-content.flow .flow-step .flow-step-visual img.big {
  width: 10rem;
  height: 10rem;
}
.home-container .home-section .home-section-container .home-content.flow .flow-step .flow-step-visual img.big-2 {
  width: 12rem;
  height: 12rem;
}
.home-container .home-section .home-section-container .home-content.flow .flow-step .flow-step-visual img.big-3 {
  width: 15rem;
  height: 15rem;
}
.home-container .home-section .home-section-container .home-content.flow .flow-step .flow-step-visual img.big-4 {
  width: 20rem;
  height: 20rem;
}
.home-container .home-section .home-section-container .home-content.flow .flow-step .flow-step-visual .flow-step-visual-item {
  background-color: #000;
  border-radius: 2rem;
  color: #fff;
  padding: 1rem 2rem;
  font-size: 2rem;
}
.home-container .home-section .home-section-container .home-content.flow .flow-step .flow-step-description {
  padding: 1rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.home-container .home-section .home-section-container .home-content.flow .flow-step .flow-step-description h4,
.home-container .home-section .home-section-container .home-content.flow .flow-step .flow-step-description p {
  text-align: left;
  font-size: 1.8rem;
  padding: 0;
  line-height: 2.5rem;
  margin: 0;
  margin-bottom: 1rem;
}
.home-container .home-section .home-section-container .home-content.flow .flow-step .flow-step-description h4 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.home-container .home-section .home-section-container .home-content.flow .flow-step .flow-step-description h4 .number {
  padding: 0 0.5rem;
  background-color: black;
  color: #fff;
  border-radius: 3rem;
  font-size: 1.8rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
  line-height: 2.5rem;
  text-align: center;
  margin-right: 1rem;
}
.home-container .home-section .home-section-container .home-content .flow-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  font-size: 2rem;
  margin-bottom: 5rem;
}
.home-container .home-section .home-section-container .home-content .flow-steps .flow-arrow {
  background: rgba(255, 255, 255, 0.35);
}
.home-container .home-section .home-section-container .home-content .flow-steps .flow-arrow::before {
  border-top: 0.2rem solid rgba(255, 255, 255, 0.35);
  border-right: 0.2rem solid rgba(255, 255, 255, 0.35);
}
.home-container .home-section .home-section-container .home-content .flow-steps .flow-arrow::after {
  background: #A8514A;
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-horizontal {
  flex-direction: row;
  height: 15rem;
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-horizontal .flow-arrow {
  position: relative;
  width: 4rem;
  height: 0.2rem;
  flex-shrink: 0;
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-horizontal .flow-arrow::before {
  content: "";
  position: absolute;
  right: -0.4rem;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  transform: translateY(-50%) rotate(45deg);
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-horizontal .flow-arrow::after {
  content: "";
  position: absolute;
  left: -0.6rem;
  top: 1rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  animation: flowDotHorizontal 2s linear infinite;
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-horizontal .flow-arrow:nth-child(2)::after {
  animation-delay: 0s;
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-horizontal .flow-arrow:nth-child(4)::after {
  animation-delay: 0.5s;
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-horizontal .flow-arrow:nth-child(6)::after {
  animation-delay: 1s;
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-horizontal .flow-arrow:nth-child(8)::after {
  animation-delay: 1.5s;
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-vertical {
  flex-direction: column;
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-vertical .flow-arrow {
  position: relative;
  width: 0.2rem;
  height: 4rem;
  flex-shrink: 0;
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-vertical .flow-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.4rem;
  width: 0.9rem;
  height: 0.9rem;
  transform: translateX(-50%) rotate(135deg);
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-vertical .flow-arrow::after {
  content: "";
  position: absolute;
  left: 1rem;
  top: -0.6rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  animation: flowDotVertical 2s linear infinite;
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-vertical .flow-arrow:nth-child(2)::after {
  animation-delay: 0s;
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-vertical .flow-arrow:nth-child(4)::after {
  animation-delay: 0.5s;
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-vertical .flow-arrow:nth-child(6)::after {
  animation-delay: 1s;
}
.home-container .home-section .home-section-container .home-content .flow-steps.flow-steps-vertical .flow-arrow:nth-child(8)::after {
  animation-delay: 1.5s;
}
.home-container .home-section .home-section-container .home-content .flow-steps .flow-step {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 2rem;
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  font-weight: 600;
  min-height: 5.5rem;
}
.home-container .home-section .home-section-container .home-content .flow-steps .flow-step,
.home-container .home-section .home-section-container .home-content .flow-steps .flow-arrow {
  opacity: 0;
  transform: translateY(1rem);
  animation: flowReveal 6s ease infinite;
}
.home-container .home-section .home-section-container .home-content .flow-steps .flow-step:nth-child(1) {
  animation-delay: 0s;
}
.home-container .home-section .home-section-container .home-content .flow-steps .flow-arrow:nth-child(2) {
  animation-delay: 0.2s;
}
.home-container .home-section .home-section-container .home-content .flow-steps .flow-step:nth-child(3) {
  animation-delay: 0.4s;
}
.home-container .home-section .home-section-container .home-content .flow-steps .flow-arrow:nth-child(4) {
  animation-delay: 0.6s;
}
.home-container .home-section .home-section-container .home-content .flow-steps .flow-step:nth-child(5) {
  animation-delay: 0.8s;
}
.home-container .home-section .home-section-container .home-content .flow-steps .flow-arrow:nth-child(6) {
  animation-delay: 1s;
}
.home-container .home-section .home-section-container .home-content .flow-steps .flow-step:nth-child(7) {
  animation-delay: 1.2s;
}
.home-container .home-section .home-section-container .home-content .flow-steps .flow-arrow:nth-child(8) {
  animation-delay: 1.4s;
}
.home-container .home-section .home-section-container .home-content .flow-steps .flow-step:nth-child(9) {
  animation-delay: 1.6s;
}
@keyframes flowReveal {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(1rem);
  }
}
@keyframes flowDotHorizontal {
  0% {
    left: -0.6rem;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: calc(100% + 0.6rem);
    opacity: 0;
  }
}
@keyframes flowDotVertical {
  0% {
    top: -0.6rem;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: calc(100% + 0.6rem);
    opacity: 0;
  }
}
.home-container .home-section .home-section-container .home-content .infinite-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.home-container .home-section .home-section-container .home-content .infinite-marquee::before, .home-container .home-section .home-section-container .home-content .infinite-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8rem;
  z-index: 2;
  pointer-events: none;
}
.home-container .home-section .home-section-container .home-content .infinite-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}
.home-container .home-section .home-section-container .home-content .infinite-marquee-item {
  flex-shrink: 0;
  margin-right: 2rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.8rem;
  white-space: nowrap;
}
@keyframes marqueeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.home-container .home-section .home-section-container .home-content .animation,
.home-container .home-section .home-section-container .home-content .text,
.home-container .home-section .home-section-container .home-content .fluent-text {
  flex: 1 1 0;
  max-width: none;
}
.home-container .home-section .home-section-container .home-content .animation:not(.para),
.home-container .home-section .home-section-container .home-content .text:not(.para),
.home-container .home-section .home-section-container .home-content .fluent-text:not(.para) {
  display: flex;
  justify-content: center;
  align-items: center;
}
.home-container .home-section .home-section-container .home-content .animation.para,
.home-container .home-section .home-section-container .home-content .text.para,
.home-container .home-section .home-section-container .home-content .fluent-text.para {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}
.home-container .home-section .home-section-container .home-content .animation.para p,
.home-container .home-section .home-section-container .home-content .text.para p,
.home-container .home-section .home-section-container .home-content .fluent-text.para p {
  text-align: left;
  padding: 0;
  margin: 0;
}
.home-container .home-section .home-section-container .home-content .animation.quote,
.home-container .home-section .home-section-container .home-content .text.quote,
.home-container .home-section .home-section-container .home-content .fluent-text.quote {
  position: relative;
  margin: 2rem 0;
  padding: 2rem 2rem 2rem 3rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 1rem;
  color: rgba(255, 255, 255, 0.9);
}
.home-container .home-section .home-section-container .home-content .animation.quote p,
.home-container .home-section .home-section-container .home-content .text.quote p,
.home-container .home-section .home-section-container .home-content .fluent-text.quote p {
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: italic;
}
.home-container .home-section .home-section-container .home-content .animation.quote::before,
.home-container .home-section .home-section-container .home-content .text.quote::before,
.home-container .home-section .home-section-container .home-content .fluent-text.quote::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 1.25rem;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(to bottom, #007fff, #6fb6ff);
}
.home-container .home-section .home-section-container .home-content .animation.quote::after,
.home-container .home-section .home-section-container .home-content .text.quote::after,
.home-container .home-section .home-section-container .home-content .fluent-text.quote::after {
  content: "“";
  position: absolute;
  top: -0.5rem;
  left: 1.75rem;
  font-family: Georgia, serif;
  font-style: normal;
  font-size: 5rem;
  line-height: 1;
  color: rgba(0, 127, 255, 0.15);
  pointer-events: none;
}
.home-container .home-section .home-section-container .home-content .animation.quote cite,
.home-container .home-section .home-section-container .home-content .text.quote cite,
.home-container .home-section .home-section-container .home-content .fluent-text.quote cite {
  display: block;
  margin-top: 1.5rem;
  font-size: 1.8rem;
  font-style: normal;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.6);
}
.home-container .home-section .home-section-container .home-content .animation.quote cite::before,
.home-container .home-section .home-section-container .home-content .text.quote cite::before,
.home-container .home-section .home-section-container .home-content .fluent-text.quote cite::before {
  content: "— ";
}
.home-container .home-section .home-section-container .home-content .animation {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  min-width: 42rem;
  border-radius: 2.4rem;
  transition: transform 0.2s ease;
}
.home-container .home-section .home-section-container .home-content .animation.animate {
  animation: popUp 0.3s ease-in;
}
.home-container .home-section .home-section-container .home-content .animation svg {
  width: 80%;
  height: 80%;
}
.home-container .home-section .home-section-container .home-content .animation .loader {
  width: 3rem;
  height: 3rem;
  border: 0.3rem solid #6A2C55;
  animation: loader-spin 2s linear infinite;
}
.home-container .home-section .home-section-container .home-content .animation:hover {
  transform: scale(1.02);
}
.home-container .home-section .home-section-container .home-content .text {
  min-width: 50rem;
  min-height: 40rem;
  font-size: 1.8rem;
  line-height: 3.2rem;
  font-family: "Roboto", "Arial";
}
.home-container .home-section .home-section-container .home-content .text:not(:only-child) {
  padding: 5rem 0;
}
.home-container .home-section .home-section-container .home-content .text.para p {
  text-align: left;
  font-size: 1.8rem;
  line-height: 3.2rem;
  padding: 0 3rem;
  margin-bottom: 3rem;
}
.home-container .home-section .home-section-container .home-content .text ul {
  margin: 0 3rem;
  list-style-type: none;
}
.home-container .home-section .home-section-container .home-content .text ul.aligned-left li {
  text-align: left;
}
.home-container .home-section .home-section-container .home-content .text ul.aligned-left li:has(img) {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.home-container .home-section .home-section-container .home-content .text ul.aligned-left li img {
  width: 2rem;
  height: 2rem;
}
.home-container .home-section .home-section-container .home-content .text ul li {
  position: relative;
  display: block;
  width: 100%;
  padding: 3rem;
  border-radius: 2rem;
  font-size: 1.8rem;
  line-height: 1.6;
}
@media only screen and (max-width: 576px) {
  .home-container .home-section .home-section-container .home-content .text ul li {
    padding: 3rem 1.5rem;
  }
}
.home-container .home-section .home-section-container .home-content .text ul li:not(:last-child) {
  margin-bottom: 1.5rem;
}
.home-container .home-section .home-section-container .home-content .fluent-text {
  max-width: 64rem;
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.45;
  font-family: "Roboto", "Arial", sans-serif;
}
.home-container .home-section .home-section-container .home-content .fluent-text ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.home-container .home-section .home-section-container .home-content .fluent-text li {
  position: relative;
  padding: 1.8rem 2rem 1.8rem 3rem;
  border-radius: 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  font-size: 1.8rem;
  line-height: 1.45;
  font-weight: 400;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.home-container .home-section .home-section-container .home-content .fluent-text li::before {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
}
.home-container .home-section .home-section-container .home-content .full-width-highlight-text {
  font-size: 1.8rem;
  line-height: 1.8;
  font-family: "Roboto", "Arial";
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}
.home-container .home-section .home-section-container .home-content .full-width-highlight-text ul {
  margin: 0;
  list-style-type: none;
  display: flex;
  gap: 2.2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.home-container .home-section .home-section-container .home-content .full-width-highlight-text li {
  padding: 2rem 2.2rem;
  font-weight: 500;
  box-sizing: border-box;
  border-radius: 1.8rem;
  transform: none !important;
}
.home-container .home-section .home-section-container .home-content .full-width-highlight-text[data-headline]:not([data-headline=""])::before {
  content: attr(data-headline);
  display: block;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6A2C55;
}
.home-container .home-section .home-section-container .home-content #animation-solution.enter-animation {
  animation: popUp 0.3s ease-in;
}
.home-container .home-section .home-section-container .home-content #animation-solution .ani-svg-rotate {
  transform-origin: center;
  transform-box: view-box;
  animation: spin 80s linear infinite;
}
.home-container .home-section .home-section-container .home-content #animation-solution .ani-svg-icon {
  transform-origin: center;
  transform-box: fill-box;
  animation: spin 80s linear infinite reverse;
}
.home-container .home-section .home-section-container .home-content #animation-solution #ani-svg-curve {
  transform-origin: center;
  transform-box: view-box;
  animation: spinPulse 20s linear infinite;
}
.home-container .home-section .home-section-container .home-content #animation-solution #ani-svg-universe-1,
.home-container .home-section .home-section-container .home-content #animation-solution #ani-svg-universe-2,
.home-container .home-section .home-section-container .home-content #animation-solution #ani-svg-universe-3 {
  transform-origin: center;
  transform-box: view-box;
}
.home-container .home-section .home-section-container .home-content #animation-solution #ani-svg-universe-1 {
  animation: spinUniverse 100s linear infinite reverse;
}
.home-container .home-section .home-section-container .home-content #animation-solution #ani-svg-universe-2 {
  animation: spinUniverse 120s linear infinite;
}
.home-container .home-section .home-section-container .home-content #animation-solution #ani-svg-universe-3 {
  animation: spinUniverse 240s linear infinite reverse;
}
.home-container .home-section .home-section-container .home-content #animation-solution #ani-svg-blue-circle {
  transform-origin: center;
  transform-box: view-box;
  animation: ani-pulse 2s linear infinite;
}
.home-container .home-section .home-section-container .home-content #animation-customer #percent,
.home-container .home-section .home-section-container .home-content #animation-customer #no-5,
.home-container .home-section .home-section-container .home-content #animation-customer #no-3 {
  transform-origin: 50% 100%;
  transform-box: fill-box;
  transform: scaleY(0);
}
.home-container .home-section .home-section-container .home-content #animation-customer.animate #no-5,
.home-container .home-section .home-section-container .home-content #animation-customer.animate #no-3,
.home-container .home-section .home-section-container .home-content #animation-customer.animate #percent {
  animation: letter-popup 0.5s ease forwards;
}
.home-container .home-section .home-section-container .home-content #animation-customer.animate #no-3 {
  animation-delay: 0.2s;
}
.home-container .home-section .home-section-container .home-content #animation-customer.animate #percent {
  animation-delay: 0.4s;
}
.home-container .home-section .home-section-container .home-content #animation-aboutus #ani-svg-aboutus-pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: ani-pulse-2 2s linear infinite;
}
.home-container .home-section .home-section-container .home-content #animation-dashboard-solution.animate,
.home-container .home-section .home-section-container .home-content #animation-workflow-solution.animate {
  animation: popUp 0.3s ease-in;
}
.home-container .home-section .home-section-container .home-content #animation-dashboard-solution {
  background-image: url("../img/home/dashboard-solution.svg");
}
.home-container .home-section .home-section-container .home-content #animation-workflow-solution {
  background-image: url("../img/home/workflow-solution.svg");
}
.home-container .home-section .home-section-container .home-content #framework-unified {
  background-image: url("../img/home/framework-unified.svg");
}
.home-container .home-section .home-section-container .home-content #framework-agent {
  background-image: url("../img/home/framework-agent.svg");
}
.home-container .home-section .home-section-container .home-content #framework-magictools {
  background-image: url("../img/home/framework-magictools.svg");
}
.home-container .home-section .home-section-container .home-content .tab {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #6A2C55;
  color: #000;
  overflow: hidden;
  width: 30rem;
  border-radius: 2rem;
  min-width: 28%;
  box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.home-container .home-section .home-section-container .home-content .tab.animate {
  transform-origin: 50% 0%;
  animation: popUp-tab 0.3s ease-in;
}
.home-container .home-section .home-section-container .home-content .tab.job {
  border-radius: 2rem;
  background-color: transparent;
  width: 35rem;
}
.home-container .home-section .home-section-container .home-content .tab.job .tab-head::after {
  background-color: #6A2C55;
}
.home-container .home-section .home-section-container .home-content .tab.job .tab-head h4 {
  margin-top: 3rem;
  color: #6A2C55;
}
.home-container .home-section .home-section-container .home-content .tab.job .tab-head h4 span {
  font-size: 1.8rem;
  color: #000;
}
.home-container .home-section .home-section-container .home-content .tab.job ul {
  background-color: #000;
  color: #fff;
}
.home-container .home-section .home-section-container .home-content .tab.job ul li::marker {
  color: #6A2C55;
}
.home-container .home-section .home-section-container .home-content .tab .tab-head {
  background-color: #fff;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.2rem 2rem 1.8rem;
  gap: 1.4rem;
}
.home-container .home-section .home-section-container .home-content .tab .tab-head::after {
  content: "";
  display: block;
  width: 3.6rem;
  height: 0.3rem;
  border-radius: 9rem;
  background-color: #A8514A;
  flex-shrink: 0;
}
.home-container .home-section .home-section-container .home-content .tab .tab-head h4 {
  font-size: 2rem;
  text-align: center;
  padding: 0 !important;
}
.home-container .home-section .home-section-container .home-content .tab .tab-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}
.home-container .home-section .home-section-container .home-content .tab .tab-image img {
  width: 15rem;
}
.home-container .home-section .home-section-container .home-content .tab ul {
  width: 100%;
  padding: 3rem 3rem 3rem 5rem;
  font-size: 1.8rem;
  line-height: 2.5rem;
  font-family: "Roboto", "Arial";
  background-color: #6A2C55;
  color: #fff;
  text-align: left;
}
.home-container .home-section .home-section-container .home-content .tab ul li::marker {
  color: #A8514A;
}
.home-container .home-section .home-section-container .home-content .tab ul li:not(:last-of-type) {
  margin-bottom: 1rem;
}
.home-container .home-section .home-section-container .home-content.slide {
  margin-top: 5rem;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face {
  width: 60vw;
  height: 30vw;
  position: relative;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-indicators {
  position: absolute;
  left: 0;
  top: 0;
  width: 60vw;
  height: 3rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  align-items: center;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-indicators .slide-indicator {
  width: 1rem;
  height: 1rem;
  background-color: #fff;
  border-radius: 1rem;
  opacity: 50%;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-indicators .slide-indicator.active {
  opacity: 100%;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-indicators .slide-indicator:not(.active):hover {
  cursor: pointer;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-buttons {
  width: 60vw;
  height: 30vw;
  top: 0;
  left: 0;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-buttons .slide-button {
  position: absolute;
  width: 10rem;
  height: 30vw;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-buttons .slide-button:first-of-type {
  left: 0;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-buttons .slide-button:last-of-type {
  right: 0;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-buttons .slide-button img {
  width: 5rem;
  height: 5rem;
  opacity: 10%;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%) !important;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-buttons .slide-button.left > img {
  transform: rotate(180deg);
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-buttons .slide-button.active > img {
  opacity: 100%;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-buttons .slide-button.active > img:hover {
  cursor: pointer;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-container {
  position: absolute;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  top: 0;
  left: 0;
  transition: left 0.5s ease;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-container .slide-element {
  width: 60vw;
  height: 30vw;
  opacity: 50%;
  background-repeat: no-repeat;
  background-position: center;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-container .slide-element.active {
  opacity: 100%;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-container .slide-element:not(.active):hover {
  cursor: pointer;
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-container #usecase-1 {
  background-image: url("../img/home/usecase-1.svg");
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-container #usecase-2 {
  background-image: url("../img/home/usecase-2.svg");
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-container #usecase-3 {
  background-image: url("../img/home/usecase-3.svg");
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-container #usecase-4 {
  background-image: url("../img/home/usecase-4.svg");
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-container #usecase-5 {
  background-image: url("../img/home/usecase-5.svg");
}
.home-container .home-section .home-section-container .home-content.slide .slide-face .slide-container #usecase-6 {
  background-image: url("../img/home/usecase-6.svg");
}
.home-container .home-section .home-section-container .home-content #contactForm > iframe {
  width: 64rem;
  height: 80rem;
}
.home-container .home-section .home-section-container .home-content .centered-svg-container {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: auto;
  height: 70rem;
  min-width: 0;
}
.home-container .home-section .home-section-container .home-content .centered-svg-image {
  height: 64rem;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-container .home-section .home-section-container .home-content .centered-svg-image img {
  display: block;
  width: auto;
  height: 100%;
  object-fit: contain;
}
.home-container .home-section .home-section-container .home-content .centered-svg-label {
  max-height: 6rem;
  margin-top: 2rem;
  text-align: center;
  font-family: "Golos Text", "Roboto", Arial;
  line-height: 1.4;
  font-size: clamp(2.5rem, 2vh, 3rem);
  font-weight: 500;
}
.home-container .home-section .home-section-container .home-content .comparison-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
  gap: 3rem;
  width: 100%;
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side {
  position: relative;
  flex: 1;
  padding: 4rem 3rem 3rem;
  border-radius: 2rem;
  min-height: 100%;
  border: 1px solid rgba(218, 218, 218, 0.9254901961);
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side ul {
  margin: 0 !important;
  padding-left: 2rem;
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side li {
  font-weight: 400;
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side li:not(:last-of-type) {
  margin-bottom: 1.2rem;
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side.comparison-left {
  background: rgba(218, 218, 218, 0.03);
  border: 1px solid rgba(218, 218, 218, 0.4);
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side.comparison-left .comparison-head {
  background: rgba(218, 218, 218, 0.9254901961);
  border: 1px solid rgba(218, 218, 218, 0.9254901961);
  color: #111;
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side.comparison-right {
  background: rgba(0, 200, 81, 0.08);
  border: 1px solid rgba(0, 200, 81, 0.25);
  box-shadow: 0 0 2rem rgba(0, 200, 81, 0.08);
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side.comparison-right .comparison-head {
  background: #00C851;
  color: #fff;
  box-shadow: 0 0.4rem 1.5rem rgba(0, 200, 81, 0.25);
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side.comparison-right ul li {
  background: rgba(0, 200, 81, 0.9);
  color: #fff;
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side .comparison-head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.8rem 2rem;
  border-radius: 999rem;
  white-space: nowrap;
  line-height: 1.2;
  font-size: 1.7rem;
  font-weight: 700;
  text-align: center;
  z-index: 2;
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side ul {
  margin: 0 3rem;
  list-style-type: none;
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side ul.aligned-left li {
  text-align: left;
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side ul.aligned-left li:has(img) {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side ul.aligned-left li img {
  width: 2rem;
  height: 2rem;
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side ul li {
  position: relative;
  display: block;
  width: 100%;
  padding: 3rem;
  border-radius: 2rem;
  font-size: 1.8rem;
  line-height: 1.6;
}
@media only screen and (max-width: 576px) {
  .home-container .home-section .home-section-container .home-content .comparison-card .comparison-side ul li {
    padding: 3rem 1.5rem;
  }
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-side ul li:not(:last-child) {
  margin-bottom: 1.5rem;
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-arrow {
  flex-shrink: 0;
}
.home-container .home-section .home-section-container .home-content .comparison-card .comparison-arrow svg {
  width: 5rem;
  height: 5rem;
  stroke: #00C851;
  stroke-width: 2;
  fill: none;
  opacity: 0.9;
  animation: comparisonArrow 2.5s ease-in-out infinite;
}
@keyframes comparisonArrow {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(0.8rem);
  }
}
@keyframes comparisonArrowVertical {
  0%, 100% {
    transform: rotate(90deg) translateX(0);
  }
  50% {
    transform: rotate(90deg) translateX(-0.8rem);
  }
}
.home-container .home-section .home-section-container .home-content .hero-image-container {
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 2rem auto;
}
.home-container .home-section .home-section-container .home-content .hero-image-container .hero-image {
  display: block;
  width: 100%;
  max-width: 110rem;
  height: auto;
  object-fit: contain;
}
.home-container .home-section .home-section-container .home-content .hero-image-container.small-desktop {
  width: 50%;
}
.home-container .home-section .home-section-container .home-content .article-card {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: 4rem 1rem;
  border-top: 0.1rem solid rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: rgba(0, 0, 0, 0.78);
}
.home-container .home-section .home-section-container .home-content .article-card:first-child {
  border-top: none;
}
.home-container .home-section .home-section-container .home-content .article-card h4 {
  margin: 0 0 1.6rem;
  font-size: clamp(2.2rem, 3.2vw, 2.8rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-align: left;
}
.home-container .home-section .home-section-container .home-content .article-card p {
  padding: 0;
  margin: 0;
  max-width: 70rem;
  font-size: 1.8rem;
  line-height: 1.8;
  color: rgba(0, 0, 0, 0.78);
  text-align: left;
}
.home-container .home-section .home-section-container .home-content .pricing-grid {
  display: flex;
  gap: 2.4rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  padding-top: 2rem;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card {
  flex: 1 1 28rem;
  max-width: 36rem;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 18px;
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card p,
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card ul {
  padding: 0;
  margin: 0;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card ul li {
  background: none;
  border: none;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card.pricing-card-featured, .home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card.pricing-card-featured-secondary {
  box-shadow: 0 1.8rem 4rem rgba(47, 107, 255, 0.15);
  position: relative;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card.pricing-card-featured {
  border: 2px solid #6A2C55;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card.pricing-card-featured .pricing-badge {
  background: #6A2C55;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card.pricing-card-featured-secondary {
  border: 2px solid #4F213F;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card.pricing-card-featured-secondary .pricing-badge {
  background: #4F213F;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card .pricing-badge {
  position: absolute;
  top: -1.3rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card .pricing-name {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 1.4rem;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card .pricing-price {
  font-size: 4.2rem;
  font-weight: 700;
  color: #0b1020;
  line-height: 1;
  text-align: center;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card .pricing-price span {
  font-size: 1.5rem;
  font-weight: 500;
  color: #6b7280;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card .pricing-for {
  font-size: 1.4rem;
  color: #6b7280;
  margin: 12px 0 24px;
  min-height: 20px;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card .pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2.8rem;
  flex: 1;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card .pricing-features li {
  font-size: 1.5rem;
  color: #1f2430;
  padding: 9px 0 9px 26px;
  position: relative;
  border-bottom: 1px solid #f1f2f4;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card .pricing-features li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2f6bff;
  font-weight: 700;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card .pricing-cta {
  display: block;
  text-align: center;
  padding: 14px 20px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.5rem;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card .pricing-cta.pricing-cta-primary {
  background: #6A2C55;
  color: #fff;
}
.home-container .home-section .home-section-container .home-content .pricing-grid .pricing-card .pricing-cta.pricing-cta-secondary {
  background: #4F213F;
  color: #fff;
}
.home-container .home-section .home-section-container .home-content .pricing-note {
  text-align: center;
  font-size: 14px;
  color: #6b7280;
  margin-top: 18px;
}
.home-container .home-section .home-section-container .home-content .qa {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
}
.home-container .home-section .home-section-container .home-content .qa .qa-item {
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 16px;
  padding: 24px 28px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.home-container .home-section .home-section-container .home-content .qa .qa-item:hover {
  border-color: #6A2C55;
  box-shadow: 0 12px 30px rgba(47, 107, 255, 0.1);
}
.home-container .home-section .home-section-container .home-content .qa .qa-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 12px;
  border-radius: 8px;
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
}
.home-container .home-section .home-section-container .home-content .qa .qa-question {
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  color: #0b1020;
  margin: 0;
  text-align: left;
}
.home-container .home-section .home-section-container .home-content .qa .qa-question .qa-label {
  background: #6A2C55;
  color: #fff;
}
.home-container .home-section .home-section-container .home-content .qa .qa-answer {
  display: flex;
  align-items: flex-start;
  font-size: 1.8rem;
  line-height: 1.6;
  color: #4b5260;
  margin: 14px 0 0;
  text-align: left;
}
.home-container .home-section .home-section-container .home-content .qa .qa-answer .qa-label {
  background: #eef2ff;
  color: #6A2C55;
}
.home-container .home-section .home-section-container .home-content:has(.flow-steps) + .home-content-article-section {
  margin-top: 0;
}
.home-container .home-section .home-section-container .home-content-article-section {
  max-width: 90rem;
  margin: 8rem auto 0;
}
.home-container .home-section .home-section-container .home-content-article-section h3 {
  margin: 0 0 5rem;
  max-width: 25ch;
  font-size: clamp(2.8rem, 3.5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.05em;
  text-align: left;
}
.home-container .home-section .home-section-container .home-content-article-section p {
  max-width: 85rem;
  margin: 0 0 4.5rem;
  padding: 0;
  font-size: 1.8rem;
  line-height: 1.85;
  color: rgba(0, 0, 0, 0.78);
  text-align: left;
}
.home-container .home-section .home-section-container .home-content-article-section p:first-of-type {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.95);
  margin-bottom: 6rem;
  max-width: 75rem;
  font-size: 2rem;
  line-height: 1.7;
}
.home-container .home-section .home-section-container .home-content-article-section .article-insight {
  letter-spacing: -0.03em;
  color: rgba(0, 0, 0, 0.95);
  max-width: 65rem;
  margin: 6rem 0;
  padding-left: 2rem;
  border-left: 0.4rem solid #6A2C55;
  font-size: clamp(2.2rem, 3.2vw, 2.8rem);
  line-height: 1.4;
  font-weight: 600;
  text-align: left;
}
.home-container .home-section .home-section-container .home-content-simple-bullets {
  width: 100%;
  overflow: hidden;
  padding-bottom: 2rem;
  max-width: 150rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.15;
  font-size: 1.8rem;
  letter-spacing: -0.03rem;
}
.home-container .home-section .home-section-container .home-content-simple-bullets:not(.horizontal) {
  max-width: 80rem;
}
.home-container .home-section .home-section-container .home-content-simple-bullets .simple-bullets-headline {
  text-align: center;
  font-weight: bold;
  font-family: "Roboto", "Arial";
  margin: 1.4rem auto 2.4rem auto;
  opacity: 0.96;
}
.home-container .home-section .home-section-container .home-content-simple-bullets .bullet-section-headline {
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem;
  padding-bottom: 2rem !important;
}
.home-container .home-section .home-section-container .home-content-simple-bullets .bullet-section-headline:not(:first-of-type) {
  margin-top: 5rem;
}
.home-container .home-section .home-section-container .home-content-simple-bullets ul {
  display: block;
  margin: 0 auto;
  list-style-type: none;
}
.home-container .home-section .home-section-container .home-content-simple-bullets ul li:not(.bullet-section-headline) {
  padding: 3rem;
  padding-left: 6rem;
  text-align: left;
  position: relative;
  margin-bottom: 1.5rem;
  border-radius: 2rem;
}
.home-container .home-section .home-section-container .home-content-simple-bullets ul li:not(.bullet-section-headline)::before {
  content: "";
  position: absolute;
  left: 2.5rem;
  top: 3.5rem;
  width: 2rem;
  height: 2rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.home-container .home-section .home-section-container .home-content-simple-bullets.bold li:not(.bullet-section-headline) {
  font-weight: 500;
}
.home-container .home-section .home-section-container .home-content-simple-bullets.red ul li:not(.bullet-section-headline) {
  border: 1px solid #eee;
}
.home-container .home-section .home-section-container .home-content-simple-bullets.red ul li:not(.bullet-section-headline)::before {
  background-image: url("../img/home/bullet_point_error.svg");
}
.home-container .home-section .home-section-container .home-content-simple-bullets.blue ul li:not(.bullet-section-headline) {
  border: 1px solid #eee;
}
.home-container .home-section .home-section-container .home-content-simple-bullets.blue ul li:not(.bullet-section-headline)::before {
  background-image: url("../img/home/bullet_point.svg");
}
.home-container .home-section .home-section-container .home-content-simple-bullets.black ul li:not(.bullet-section-headline) {
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.home-container .home-section .home-section-container .home-content-simple-bullets.black ul li:not(.bullet-section-headline)::before {
  background-image: url("../img/home/bullet_point_black.svg");
}
.home-container .home-section .home-section-container .home-content-simple-bullets.check-mark ul li:not(.bullet-section-headline) {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 7rem;
}
.home-container .home-section .home-section-container .home-content-simple-bullets.check-mark ul li:not(.bullet-section-headline)::before {
  background-image: url("../img/home/check_mark.svg");
  left: 2rem;
  top: 3rem;
  width: 3rem;
  height: 3rem;
}
.home-container .home-section .home-section-container .home-content-simple-bullets.two-row-items ul li p {
  text-align: left;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-0.5rem);
}
.home-container .home-section .home-section-container .home-content-simple-bullets.two-row-items ul li p:first-of-type {
  font-weight: 600;
}
.home-container .home-section .home-section-container .home-content-simple-bullets.horizontal ul {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.home-container .home-section .home-section-container .home-cta {
  display: flex;
  height: auto;
  padding-top: 3rem;
  justify-content: center;
  align-items: center;
}
.home-container .home-section .home-section-container .home-cta .cta {
  font-family: "Golos Text", "Roboto", Arial;
  text-decoration: none;
  border-radius: 10rem;
  transition: transform 0.1s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 2.1rem;
  padding: 1.2rem 5rem;
}
.home-container .home-section .home-section-container .home-cta .cta.primary {
  background-color: #6A2C55;
  color: #FFFFFF;
}
.home-container .home-section .home-section-container .home-cta .cta.secondary {
  background-color: #F2E9EE;
  color: rgba(0, 0, 0, 0.5);
}
.home-container .home-section .home-section-container .home-cta .cta.tertiary {
  background-color: #6A2C55;
  color: #FFFFFF;
}
.home-container .home-section .home-section-container .home-cta .cta.black {
  background-color: #221E26;
  color: #FFFFFF;
}
.home-container .home-section .home-section-container .home-cta .cta:hover {
  transform: scale(1.02);
}
.home-container .home-section .home-section-container .home-at-a-glance-items {
  margin: 4.5rem auto 0 auto;
  max-width: 150rem;
}
.home-container .home-section .home-section-container .home-at-a-glance-items p {
  padding-bottom: 2rem;
  color: grey;
}
.home-container .home-section .home-section-container .home-at-a-glance-items div {
  display: flex;
  flex-direction: row;
  gap: 1.8rem;
  justify-content: space-around;
  align-items: stretch;
}
.home-container .home-section .home-section-container .home-at-a-glance-items div + div {
  margin-top: 1.8rem;
}
.home-container .home-section .home-section-container .home-at-a-glance-items div > span {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 1.8rem 2rem;
  text-align: left;
  flex: 1;
  color: #6A2C55;
  min-height: 9rem;
  border-radius: 1.8rem;
  display: flex;
  flex-direction: row;
  gap: 1.6rem;
  justify-content: flex-start;
  align-self: stretch;
  align-items: center;
}
.home-container .home-section .home-section-container .home-at-a-glance-items div > span .number {
  display: flex;
  justify-content: center;
  border-radius: 5rem;
  flex-grow: 0;
}
.home-container .home-section .home-section-container .home-at-a-glance-items div > span .number span {
  text-align: center;
  vertical-align: middle;
  background-color: #6A2C55;
  width: 5.2rem;
  height: 5.2rem;
  line-height: 5.2rem;
  border-radius: 50%;
  font-weight: bold;
  font-size: 1.8rem;
  color: #fff;
}
.home-container .home-section .home-section-container .video-content {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.home-container .home-section .home-section-container .video-content .video-container {
  position: relative;
  width: 100%;
  max-width: 104rem;
}
.home-container .home-section .home-section-container .video-content .video-container .video-wrapper {
  position: relative;
  border-radius: 2.4rem;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
}
.home-container .home-section .home-section-container .video-content .video-container .video-wrapper video {
  width: 100%;
  height: auto;
  display: none;
}
.home-container .home-section .home-section-container .video-content .video-container .video-wrapper video.video-desktop {
  display: block;
}
.home-container .home-section .home-section-container .video-content .video-container .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8.4rem;
  height: 8.4rem;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 3.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}
.home-container .home-section .home-section-container .video-content .video-container .play-button.hidden {
  opacity: 0;
  pointer-events: none;
}
.home-container .home-section .home-section-container .sample-recommendations {
  display: inline-flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 8rem;
  margin-top: 4rem;
}
.home-container .home-section .home-section-container .sample-recommendations div {
  transition: transform 0.2s ease;
  max-width: 100rem;
}
.home-container .home-section .home-section-container .sample-recommendations div:hover {
  transform: scale(1.02);
}
.home-container .home-section .home-section-container .sample-recommendations div:hover span.reco {
  background-color: #6A2C55 !important;
  color: #fff;
}
.home-container .home-section .home-section-container .sample-recommendations div:hover span.reco img {
  filter: none;
}
.home-container .home-section .home-section-container .sample-recommendations div span.reco {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.05) !important;
  border-radius: 1.5rem;
  padding: 1.2rem 2rem;
  font-size: 2rem;
  position: relative;
  padding-left: 5rem;
  text-align: left;
}
.home-container .home-section .home-section-container .sample-recommendations div span.reco img {
  position: absolute;
  width: 3rem;
  height: 3rem;
  left: 1rem;
  top: 1.5rem;
  transform: rotate(-15deg);
  filter: brightness(0) saturate(100%) invert(37%) sepia(40%) saturate(6492%) hue-rotate(198deg) brightness(103%) contrast(109%);
}
.home-container .home-section .home-section-container .separator {
  height: 5rem;
}
.home-container .home-section .home-section-container .desktop-separator {
  height: 5rem;
}
.home-container .home-section .home-section-container .mobile-separator {
  height: 0;
  display: none;
}
.home-container .home-section .text,
.home-container .home-section .fluent-text,
.home-container .home-section .full-width-highlight-text {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

/* Landing Pages */
.landing-page .home-section .home-section-container {
  width: 100%;
}
.landing-page .home-section .home-section-container .home-content.row {
  width: 80%;
}
.landing-page .home-section .home-section-container .home-content.row .home-image-holder img {
  width: 76%;
}
.landing-page .home-section .home-section-container .home-image-holder {
  margin: 0 auto;
  flex: 1;
}
.landing-page .home-section .home-section-container .home-image-holder:not(.hero) {
  display: flex;
  justify-content: center;
  align-items: center;
}
.landing-page .home-section .home-section-container .home-image-holder .image-subtext {
  font-style: italic;
  padding-bottom: 1rem !important;
}
.landing-page .home-section .home-section-container .home-image-holder img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1rem;
}
.landing-page .home-section .home-section-container .home-image-holder img.backdrop {
  box-shadow: 0 0 30px rgba(0, 127, 255, 0.25), 0 0 80px rgba(0, 127, 255, 0.2), 0 0 140px rgba(0, 127, 255, 0.12);
}
.landing-page .home-section .home-section-container .home-image-holder img.about-me {
  width: 2rem;
}

#layer-animation {
  position: relative;
  width: 100%;
  height: 42rem;
  font-size: 2.5rem;
}

/* Sources */
#layer-animation .sources {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  opacity: 0.72;
}

#layer-animation .sources span {
  flex: 1;
  text-align: center;
  animation: float 4s ease-in-out infinite;
}

#layer-animation .sources span:nth-child(2) {
  animation-delay: 0.5s;
}

#layer-animation .sources span:nth-child(3) {
  animation-delay: 1s;
}

/* Input flows */
#layer-animation .flows {
  position: absolute;
  top: calc(50% - 18rem);
  left: 0;
  width: 100%;
  height: 12rem;
}

#layer-animation .line {
  position: absolute;
  width: 0.2rem;
  height: 4.2rem;
  opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: flowDown 2.4s linear infinite;
  animation-fill-mode: both;
}

#layer-animation .line:nth-child(1) {
  left: 25%;
}

#layer-animation .line:nth-child(2) {
  left: 50%;
}

#layer-animation .line:nth-child(3) {
  left: 75%;
}

#layer-animation .line.delay {
  animation-delay: 0.8s;
}

#layer-animation .line.delay-2 {
  animation-delay: 1.6s;
}

/* Strategy layer */
#layer-animation .layer {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 70%;
  transform: translate(-50%, -50%);
  padding: 1.2rem 2rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.08), inset 0 0 10px rgba(255, 255, 255, 0.05);
  animation: layerPulse 3.5s ease-in-out infinite;
}

#layer-animation .output-flow {
  position: absolute;
  top: calc(50% + 4.2rem);
  left: 50%;
  width: 4rem;
  /* container for 3 lines */
  height: 5.5rem;
  transform: translateX(-50%);
}

/* base line style */
#layer-animation .output-flow .out-line {
  position: absolute;
  top: 0;
  width: 0.2rem;
  height: 5.5rem;
  opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 127, 255, 0.9), transparent);
  animation: flowOut 2.4s linear infinite;
  animation-delay: 3.2s;
  animation-fill-mode: both;
}

/* 3 tightly grouped lines */
#layer-animation .output-flow .out-line:nth-child(1) {
  left: 35%;
}

#layer-animation .output-flow .out-line:nth-child(2) {
  left: 50%;
}

#layer-animation .output-flow .out-line:nth-child(3) {
  left: 65%;
}

/* Output */
#layer-animation .output {
  position: absolute;
  top: calc(50% + 15rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.8rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0.6;
  animation: outputImpact 2.4s ease-in-out infinite;
  animation-delay: 3.2s;
}

#attention-animation {
  position: relative;
  width: 100%;
  height: 52rem;
  font-size: 2rem;
  /* Sources */
  /* Input flows */
  /* Azulens */
  /* Alert cards */
  /* Output flow */
  /* Daily report */
}
#attention-animation .sources {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  opacity: 0.72;
}
#attention-animation .sources span {
  flex: 1;
  text-align: center;
  animation: float 4s ease-in-out infinite;
}
#attention-animation .sources span:nth-child(2) {
  animation-delay: 0.5s;
}
#attention-animation .sources span:nth-child(3) {
  animation-delay: 1s;
}
#attention-animation .flows {
  position: absolute;
  top: 5rem;
  left: 0;
  width: 100%;
  height: 8rem;
}
#attention-animation .line {
  position: absolute;
  width: 0.2rem;
  height: 4rem;
  opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: flowDownShort 2.4s linear infinite;
}
#attention-animation .line:nth-child(1) {
  left: 25%;
}
#attention-animation .line:nth-child(2) {
  left: 50%;
}
#attention-animation .line:nth-child(3) {
  left: 75%;
}
#attention-animation .line.delay {
  animation-delay: 0.8s;
}
#attention-animation .line.delay-2 {
  animation-delay: 1.6s;
}
#attention-animation .engine {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22rem;
  padding: 0.8rem 1.4rem;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0.75;
  backdrop-filter: blur(8px);
  animation: layerPulse 3s ease-in-out infinite;
}
#attention-animation .alerts {
  position: absolute;
  top: calc(30% + 4.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 42rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
#attention-animation .alert {
  padding: 1.2rem 1.6rem;
  border-radius: 1.2rem;
  font-size: 1.8rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.15);
  opacity: 0;
  animation: alertAppear 2.4s infinite;
}
#attention-animation .alert.alert-1 {
  animation-delay: 1.8s;
}
#attention-animation .alert.alert-2 {
  animation-delay: 2.2s;
}
#attention-animation .alert.alert-3 {
  animation-delay: 2.6s;
}
#attention-animation .email-flow {
  position: absolute;
  top: calc(50% + 15rem);
  left: 50%;
  width: 4rem;
  height: 5rem;
  transform: translateX(-50%);
}
#attention-animation .email-line {
  position: absolute;
  top: 0;
  width: 0.2rem;
  height: 5rem;
  opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 127, 255, 0.9), transparent);
  animation: flowOutShort 2.4s ease-in-out infinite;
  animation-delay: 3s;
  animation-fill-mode: both;
}
#attention-animation .email-line:nth-child(1) {
  left: 35%;
}
#attention-animation .email-line:nth-child(2) {
  left: 50%;
}
#attention-animation .email-line:nth-child(3) {
  left: 65%;
}
#attention-animation .email {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 2.8rem;
  font-weight: 600;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0.6;
  animation: outputImpact 2.4s ease-in-out infinite;
  animation-delay: 2.5s;
  animation-fill-mode: both;
}

/* Alert animation */
@keyframes alertAppear {
  0%, 40% {
    opacity: 0;
    transform: translateY(-1rem);
  }
  40% {
    opacity: 1;
    transform: translateY(0);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}
/* Email animation */
@keyframes emailAppear {
  0%, 20% {
    opacity: 0;
    transform: translateX(-50%) translateY(-1rem);
  }
  35% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  45% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  80% {
    opacity: 1;
  }
}
@keyframes pinPulse {
  0% {
    transform: translate(-50%, -85%) scale(1);
  }
  50% {
    transform: translate(-50%, -85%) scale(1.15);
  }
  100% {
    transform: translate(-50%, -85%) scale(1);
  }
}
@keyframes flowDown {
  0% {
    transform: translateY(-24px);
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(110px);
    opacity: 0;
  }
}
@keyframes flowDownShort {
  0% {
    transform: translateY(-24px);
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(60px);
    opacity: 0;
  }
}
@keyframes flowOut {
  0% {
    transform: translateY(-1.5rem);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(8rem);
    opacity: 0;
  }
}
@keyframes flowOutShort {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
    transform: translateY(2rem);
  }
  100% {
    opacity: 0;
    transform: translateY(2.5rem);
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes layerPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.06), inset 0 0 10px rgba(255, 255, 255, 0.04);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.14), inset 0 0 14px rgba(255, 255, 255, 0.08);
  }
}
@keyframes outputImpact {
  /* idle state */
  0%, 60% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1);
    color: rgba(255, 255, 255, 0.8);
  }
  /* lines arrive → IMPACT */
  75% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
    color: #6A2C55;
  }
  /* short peak */
  85% {
    opacity: 1;
    transform: translateX(-50%) scale(1.04);
    color: #6A2C55;
  }
  /* fade out together with flow */
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1);
    color: rgba(255, 255, 255, 0.8);
  }
}
#fragmentation {
  position: relative;
  width: 100%;
  height: 42rem;
  font-size: 3rem;
}

/* =========================
   CARDS (FRAGMENTED LAYOUT)
========================= */
#fragmentation .cards {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* base card */
#fragmentation .card {
  position: absolute;
  padding: 1.2rem 2rem;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 3rem;
  font-weight: 500;
  backdrop-filter: blur(4px);
  animation: drift 6s ease-in-out infinite;
}

/* scattered positions */
#fragmentation .card:nth-child(1) {
  top: 12%;
  left: 22%;
}

#fragmentation .card:nth-child(2) {
  top: 32%;
  right: 22%;
}

#fragmentation .card:nth-child(3) {
  bottom: 28%;
  left: 28%;
}

#fragmentation .card:nth-child(4) {
  bottom: 12%;
  right: 28%;
}

/* slight animation offsets */
#fragmentation .card:nth-child(2) {
  animation-delay: 1s;
}

#fragmentation .card:nth-child(3) {
  animation-delay: 2s;
}

#fragmentation .card:nth-child(4) {
  animation-delay: 3s;
}

/* =========================
   NOISE (DATA CHAOS)
========================= */
#fragmentation .noise {
  position: absolute;
  inset: 0;
}

#fragmentation .noise span {
  position: absolute;
  font-size: 3rem;
  /* bigger */
  font-weight: 500;
  color: #000;
  /* black as requested */
  opacity: 0;
  animation: noiseFloat 4s ease-in-out infinite;
  background: rgba(255, 255, 255, 0.5);
  padding: 0.2rem 0.6rem;
  border-radius: 0.6rem;
}

/* random positions (8 elements now) */
#fragmentation .noise span:nth-child(1) {
  top: 5%;
  left: 30%;
}

#fragmentation .noise span:nth-child(2) {
  top: 18%;
  right: 25%;
}

#fragmentation .noise span:nth-child(3) {
  top: 40%;
  left: 5%;
}

#fragmentation .noise span:nth-child(4) {
  top: 60%;
  right: 12%;
}

#fragmentation .noise span:nth-child(5) {
  top: 82%;
  left: 35%;
}

#fragmentation .noise span:nth-child(6) {
  bottom: 2%;
  right: 30%;
}

#fragmentation .noise span:nth-child(7) {
  bottom: 15%;
  left: 10%;
}

#fragmentation .noise span:nth-child(8) {
  top: 50%;
  right: 40%;
}

/* stagger */
#fragmentation .noise span:nth-child(2) {
  animation-delay: 0.5s;
}

#fragmentation .noise span:nth-child(3) {
  animation-delay: 1s;
}

#fragmentation .noise span:nth-child(4) {
  animation-delay: 1.5s;
}

#fragmentation .noise span:nth-child(5) {
  animation-delay: 2s;
}

#fragmentation .noise span:nth-child(6) {
  animation-delay: 2.5s;
}

#fragmentation .noise span:nth-child(7) {
  animation-delay: 3s;
}

#fragmentation .noise span:nth-child(8) {
  animation-delay: 3.5s;
}

@keyframes pinEnter {
  0% {
    opacity: 0;
    transform: translate(-50%, -40%) scale(0.7);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -90%) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -85%) scale(1);
  }
}
@keyframes drift {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  25% {
    transform: translate(6px, -4px) rotate(1deg);
  }
  50% {
    transform: translate(-8px, 6px) rotate(-1deg);
  }
  75% {
    transform: translate(4px, 2px) rotate(0.5deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}
/* floating + fading noise */
@keyframes noiseFloat {
  0%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
  30% {
    opacity: 0.8;
  }
  60% {
    opacity: 0;
    transform: translateY(-12px);
  }
}
.has-animation .home-section-container {
  text-align: center !important;
  padding-bottom: 4rem !important;
}
.has-animation .home-content.row {
  gap: 6rem !important;
  align-items: center !important;
}

.two-col-grid .home-section-container .home-content.row,
#better_social_media .home-section-container .home-content.row,
#campaign_data_in_one_place .home-section-container .home-content.row,
#cross_platform_pacing_and_performance .home-section-container .home-content.row,
#chat_with_your_campaigns .home-section-container .home-content.row,
#drive_smarter_campaigns .home-section-container .home-content.row,
#magic_tools_automation_workbench .home-section-container .home-content.row,
#full_customization_and_flexibility .home-section-container .home-content.row,
#recommendations_for_optimization .home-section-container .home-content.row,
#unified_view_across_platforms .home-section-container .home-content.row,
#readonly_reporting_for_external_parties .home-section-container .home-content.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5rem;
}
.two-col-grid .home-section-container .home-content.row.desktop-reverse .animation,
#better_social_media .home-section-container .home-content.row.desktop-reverse .animation,
#campaign_data_in_one_place .home-section-container .home-content.row.desktop-reverse .animation,
#cross_platform_pacing_and_performance .home-section-container .home-content.row.desktop-reverse .animation,
#chat_with_your_campaigns .home-section-container .home-content.row.desktop-reverse .animation,
#drive_smarter_campaigns .home-section-container .home-content.row.desktop-reverse .animation,
#magic_tools_automation_workbench .home-section-container .home-content.row.desktop-reverse .animation,
#full_customization_and_flexibility .home-section-container .home-content.row.desktop-reverse .animation,
#recommendations_for_optimization .home-section-container .home-content.row.desktop-reverse .animation,
#unified_view_across_platforms .home-section-container .home-content.row.desktop-reverse .animation,
#readonly_reporting_for_external_parties .home-section-container .home-content.row.desktop-reverse .animation {
  order: 2;
}
.two-col-grid .home-section-container .home-content.row.desktop-reverse .fluent-text,
.two-col-grid .home-section-container .home-content.row.desktop-reverse .text,
#better_social_media .home-section-container .home-content.row.desktop-reverse .fluent-text,
#better_social_media .home-section-container .home-content.row.desktop-reverse .text,
#campaign_data_in_one_place .home-section-container .home-content.row.desktop-reverse .fluent-text,
#campaign_data_in_one_place .home-section-container .home-content.row.desktop-reverse .text,
#cross_platform_pacing_and_performance .home-section-container .home-content.row.desktop-reverse .fluent-text,
#cross_platform_pacing_and_performance .home-section-container .home-content.row.desktop-reverse .text,
#chat_with_your_campaigns .home-section-container .home-content.row.desktop-reverse .fluent-text,
#chat_with_your_campaigns .home-section-container .home-content.row.desktop-reverse .text,
#drive_smarter_campaigns .home-section-container .home-content.row.desktop-reverse .fluent-text,
#drive_smarter_campaigns .home-section-container .home-content.row.desktop-reverse .text,
#magic_tools_automation_workbench .home-section-container .home-content.row.desktop-reverse .fluent-text,
#magic_tools_automation_workbench .home-section-container .home-content.row.desktop-reverse .text,
#full_customization_and_flexibility .home-section-container .home-content.row.desktop-reverse .fluent-text,
#full_customization_and_flexibility .home-section-container .home-content.row.desktop-reverse .text,
#recommendations_for_optimization .home-section-container .home-content.row.desktop-reverse .fluent-text,
#recommendations_for_optimization .home-section-container .home-content.row.desktop-reverse .text,
#unified_view_across_platforms .home-section-container .home-content.row.desktop-reverse .fluent-text,
#unified_view_across_platforms .home-section-container .home-content.row.desktop-reverse .text,
#readonly_reporting_for_external_parties .home-section-container .home-content.row.desktop-reverse .fluent-text,
#readonly_reporting_for_external_parties .home-section-container .home-content.row.desktop-reverse .text {
  order: 1;
}

#aboutus .home-section-container .home-content.row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 4rem;
  align-items: center;
}
#aboutus .home-section-container .text.para {
  max-width: 72rem;
  margin: 0 auto;
}
#aboutus .home-section-container .text.para p {
  font-size: 1.8rem;
  line-height: 1.7;
  margin: 0 0 2.8rem 0;
}

#contact .home-section-container {
  width: 100%;
  max-width: 120rem;
}
#contact .home-content.row {
  display: flex;
  justify-content: center;
  width: 100%;
}
#contact #contact-form {
  width: 60rem;
  max-width: 98%;
  margin: 0 auto;
  padding: 4rem;
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.06);
}
#contact #contact-form .contact-form-group {
  margin-bottom: 2.5rem;
}
#contact #contact-form .contact-form-group label {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: #222;
  text-align: left;
}
#contact #contact-form input[type=text],
#contact #contact-form input[type=email],
#contact #contact-form textarea {
  width: 100%;
  padding: 1.5rem;
  border: 1px solid #dcdcdc;
  border-radius: 1rem;
  font-size: 1.8rem;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
#contact #contact-form input[type=text]::placeholder,
#contact #contact-form input[type=email]::placeholder,
#contact #contact-form textarea::placeholder {
  color: #aaa;
}
#contact #contact-form input[type=text]:focus,
#contact #contact-form input[type=email]:focus,
#contact #contact-form textarea:focus {
  outline: none;
  border-color: #6A2C55;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
#contact #contact-form textarea {
  min-height: 14rem;
  resize: vertical;
  line-height: 1.5;
}
#contact #contact-form .contact-checkbox {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1rem;
}
#contact #contact-form .contact-checkbox input[type=checkbox] {
  width: 1.8rem;
  height: 1.8rem;
  cursor: pointer;
}
#contact #contact-form .contact-checkbox label {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  color: #444;
  cursor: pointer;
}
#contact #contact-form .contact-privacy {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  font-size: 1.2rem;
  color: #666;
  line-height: 1.5;
}
#contact #contact-form .contact-privacy a {
  color: #2563eb;
  text-decoration: none;
}
#contact #contact-form .contact-privacy a:hover {
  text-decoration: underline;
}
#contact #contact-form .contact-submit-btn {
  width: 100%;
  padding: 1.5rem;
  border: none;
  border-radius: 10rem;
  background: #6A2C55;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}
#contact #contact-form .contact-submit-btn:hover {
  background: #1f2937;
}
#contact #contact-form .contact-submit-btn:active {
  transform: translateY(1px);
}
#contact #contact-form .contact-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
#contact #contact-form .contact-message {
  padding: 1.5rem;
  border-radius: 1rem;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  line-height: 1.5;
  color: #fff;
}
#contact #contact-form .contact-message.success {
  background: #00C851;
}
#contact #contact-form .contact-message.error {
  background: #A8514A;
}

@media only screen and (max-width: 2000px) {
  .home-container {
    grid-template-rows: 5vh 93vh 2vh;
  }
  .home-container .home-content.slide .slide-face {
    width: 80vw !important;
    height: 40vw !important;
  }
  .home-container .home-content.slide .slide-face .slide-indicators {
    width: 80vw !important;
  }
  .home-container .home-content.slide .slide-face .slide-buttons {
    width: 80vw !important;
    height: 40vw !important;
  }
  .home-container .home-content.slide .slide-face .slide-buttons .slide-button {
    height: 40vw !important;
  }
  .home-container .home-content.slide .slide-face .slide-container .slide-element {
    width: 80vw !important;
    height: 40vw !important;
  }
  .home-container .home-content-image .animation {
    min-height: 50rem !important;
  }
  .home-container .home-section-container-highlight-paragraph {
    padding-left: 30rem !important;
    padding-right: 30rem !important;
  }
  .home-container .home-section-container-highlight-paragraph::before, .home-container .home-section-container-highlight-paragraph::after {
    left: 26.8rem !important;
  }
  .home-container .home-section-container-highlight-paragraph::after {
    left: 27.5rem !important;
  }
}
@media only screen and (min-width: 576px) {
  .desktop-reverse {
    flex-direction: row-reverse !important;
  }
  #fragmentation {
    transform: translateY(8rem);
  }
}
@media only screen and (max-width: 576px) {
  #animation-usecase-advertising {
    background-image: url("../img/home/advertising/home-advertising-mobile.svg") !important;
  }
  .home-container {
    grid-template-rows: 7vh 91vh 2vh;
  }
  .home-container header .home-header-button-highlight {
    border-radius: 10rem;
    padding: 0.6rem 1.3rem;
  }
  /* Landing Pages */
  .landing-page .home-section .home-section-container .home-content.row {
    width: 100%;
  }
  .landing-page .home-section .home-section-container .home-image-holder.hero {
    width: 100%;
  }
  .landing-page .home-section .home-section-container .home-image-holder:not(.hero) {
    width: 80%;
  }
  .landing-page .home-section .home-section-container .home-image-holder .image-subtext {
    margin-top: 3rem !important;
  }
  .landing-page .home-section .home-section-container .desktop-separator {
    height: 0;
    display: none;
  }
  .landing-page .home-section .home-section-container .mobile-separator {
    display: block;
    height: 5rem;
  }
  #home-container-content {
    grid-template-columns: [left-start] 1fr [right-end] !important;
  }
  #home-container-content .home-section {
    padding-bottom: 1rem;
  }
  #home-container-content .home-section#usecases .home-section-container {
    padding-left: 0;
    padding-right: 0;
  }
  #home-container-content .home-section .home-section-container {
    grid-column: left-start/right-end !important;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    padding-bottom: 2rem;
    max-width: 100% !important;
  }
  #home-container-content .home-section .home-section-container h1 {
    line-height: 0.96;
    padding-top: 5rem;
    padding-bottom: 1.2rem;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #home-container-content .home-section .home-section-container h2 {
    line-height: 1.05;
    padding-top: 5rem;
    padding-bottom: 3rem;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #home-container-content .home-section .home-section-container h2:not(:has(+ p)) {
    padding-bottom: 4rem;
  }
  #home-container-content .home-section .home-section-container h2:has(+ div .tab),
  #home-container-content .home-section .home-section-container h2:has(+ div .full-width-highlight-text),
  #home-container-content .home-section .home-section-container h2:has(+ div #contactForm) {
    padding-bottom: 5rem;
  }
  #home-container-content .home-section .home-section-container h3 {
    line-height: 1.35;
    margin-bottom: 1.8rem;
    padding: 0 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }
  #home-container-content .home-section .home-section-container p {
    font-size: 2rem;
    line-height: 3.5rem;
    font-weight: 300;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 4rem;
    margin-top: -1rem;
  }
  #home-container-content .home-section .home-section-container .hero-subtext {
    line-height: 1.45;
    margin-bottom: 3.2rem;
    padding: 0 0.6rem;
  }
  #home-container-content .home-section .home-section-container p.sub-headline-divider {
    margin-bottom: 3rem;
  }
  #home-container-content .home-section .home-section-container .home-content,
  #home-container-content .home-section .home-section-container .home-content.row,
  #home-container-content .home-section .home-section-container .home-content.row.desktop-reverse {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.2rem;
  }
  #home-container-content .home-section .home-section-container .home-content-simple-bullets ul {
    margin: 0 1.5rem !important;
  }
  #home-container-content .home-section .home-section-container .home-content-simple-bullets ul li,
  #home-container-content .home-section .home-section-container .home-content-simple-bullets ul li > p:not(:first-of-type) {
    font-size: 2.2rem;
  }
  #home-container-content .home-section .home-section-container .home-content .tab {
    width: calc(100% - 3.6rem);
    margin: 0 1.8rem;
  }
  #home-container-content .home-section .home-section-container .home-content .tab ul {
    font-size: 2rem;
  }
  #home-container-content .home-section .home-section-container .home-content .animation,
  #home-container-content .home-section .home-section-container .home-content .fluent-text,
  #home-container-content .home-section .home-section-container .home-content .text {
    min-width: 0;
    min-height: auto;
    width: 100%;
    padding: 1rem 0;
  }
  #home-container-content .home-section .home-section-container .home-content .animation {
    min-height: 40rem !important;
    border-radius: 1.6rem;
    background-size: contain;
    background-size: 90%;
  }
  #home-container-content .home-section .home-section-container .home-content .animation svg {
    width: 100%;
    height: 100%;
  }
  #home-container-content .home-section .home-section-container .home-content .animation ul {
    margin: 0 1.5rem !important;
  }
  #home-container-content .home-section .home-section-container .home-content #attention-animation.animation {
    margin-top: 5rem;
    min-height: 50rem !important;
  }
  #home-container-content .home-section .home-section-container .home-content #attention-animation.animation .flows {
    transform: translateY(-1rem) scaleY(0.9);
  }
  #home-container-content .home-section .home-section-container .home-content .text ul {
    margin: 0 1.5rem !important;
    width: 100%;
  }
  #home-container-content .home-section .home-section-container .home-content .text.para p {
    font-size: 2rem;
    line-height: 2.7rem;
    margin-bottom: 2rem;
  }
  #home-container-content .home-section .home-section-container .home-content .fluent-text {
    font-size: 2rem;
    line-height: 1.5;
  }
  #home-container-content .home-section .home-section-container .home-content .fluent-text ul {
    margin: 0;
    gap: 1rem;
  }
  #home-container-content .home-section .home-section-container .home-content .fluent-text li {
    padding: 1.3rem 1.3rem 1.3rem 2.5rem;
    border-radius: 1.2rem;
  }
  #home-container-content .home-section .home-section-container .home-content .fluent-text li::before {
    top: 2rem;
    left: 1.2rem;
    transform: none;
  }
  #home-container-content .home-section .home-section-container .home-content .fluent-text.quote p {
    padding-left: 3rem;
  }
  #home-container-content .home-section .home-section-container .home-content .full-width-highlight-text ul {
    grid-template-columns: 1fr !important;
    margin: 0 2rem;
  }
  #home-container-content .home-section .home-section-container .home-content .full-width-highlight-text li {
    padding: 1.6rem 1.8rem;
    width: 100%;
    text-align: left;
    font-size: 2rem;
  }
  #home-container-content .home-section .home-section-container .home-content.slide .slide-face {
    width: 100vw !important;
    height: 50vw !important;
  }
  #home-container-content .home-section .home-section-container .home-content.slide .slide-face .slide-indicators {
    width: 100vw !important;
  }
  #home-container-content .home-section .home-section-container .home-content.slide .slide-face .slide-buttons {
    width: 100vw !important;
    height: 50vw !important;
  }
  #home-container-content .home-section .home-section-container .home-content.slide .slide-face .slide-buttons .slide-button {
    height: 50vw !important;
  }
  #home-container-content .home-section .home-section-container .home-content.slide .slide-face .slide-container .slide-element {
    width: 100vw !important;
    height: 50vw !important;
  }
  #home-container-content .home-section .home-section-container .home-content #contactForm > iframe {
    width: 100%;
    height: 96rem;
  }
  #home-container-content .home-section .home-section-container .home-content .centered-svg-container {
    width: 100%;
    height: auto;
    margin-bottom: 5rem;
  }
  #home-container-content .home-section .home-section-container .home-content .centered-svg-container.mobile-narrow {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  #home-container-content .home-section .home-section-container .home-content .centered-svg-image {
    width: 100%;
    height: auto;
  }
  #home-container-content .home-section .home-section-container .home-content .centered-svg-image img {
    width: 100%;
    height: auto;
  }
  #home-container-content .home-section .home-section-container .home-content .centered-svg-label {
    max-height: none;
    margin-top: 1.5rem;
  }
  #home-container-content .home-section .home-section-container .home-content .hero-image-container,
  #home-container-content .home-section .home-section-container .home-content .hero-image-container.small-desktop {
    width: 100%;
  }
  #home-container-content .home-section .home-section-container .home-content .pricing-grid {
    flex-direction: column;
    align-items: center;
  }
  #home-container-content .home-section .home-section-container .home-content .article-card {
    padding-bottom: 1rem;
  }
  #home-container-content .home-section .home-section-container .home-content .article-card h4 {
    padding-left: 2rem;
  }
  #home-container-content .home-section .home-section-container .home-content .article-card p {
    padding-bottom: 0;
  }
  #home-container-content .home-section .home-section-container .home-at-a-glance-items {
    margin-top: 3rem;
  }
  #home-container-content .home-section .home-section-container .home-at-a-glance-items p {
    padding-left: 0;
    padding-right: 0;
  }
  #home-container-content .home-section .home-section-container .home-at-a-glance-items > div {
    flex-direction: column;
    gap: 1rem;
  }
  #home-container-content .home-section .home-section-container .home-at-a-glance-items > div > span {
    width: 100%;
    min-height: auto;
    padding: 1.4rem 1.6rem;
    border-radius: 1.4rem;
    font-size: 2rem;
    gap: 1.2rem;
  }
  #home-container-content .home-section .home-section-container .home-at-a-glance-items > div > span .number span {
    width: 4.6rem;
    height: 4.6rem;
    line-height: 4.6rem;
    font-size: 2rem;
  }
  #home-container-content .home-section .home-section-container .home-cta {
    height: 12rem;
    padding-top: 2rem;
  }
  #home-container-content .home-section .home-section-container .home-cta .cta {
    font-size: 2rem;
    padding: 1.5rem 3rem;
  }
  #home-container-content .home-section .home-section-container .home-cta .cta.black {
    justify-content: center;
  }
  #home-container-content .home-section .home-section-container .home-section-container-headline-tag div {
    margin-bottom: -5rem;
  }
  #home-container-content .home-section .home-section-container .home-content-image .animation {
    width: 98vw;
    min-height: 70.6193353474vw !important;
  }
  #home-container-content .home-section .home-section-container .home-section-container-highlight-paragraph {
    padding-left: 1.8rem !important;
    padding-right: 1.8rem !important;
    margin-top: 5rem;
  }
  #home-container-content .home-section .home-section-container .video-content .play-button {
    display: none;
  }
  #home-container-content .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .tooltip p,
  #home-container-content .home-section .home-section-container .home-content-image .sample-chart-container .chart-overlay .chart-point .tooltip strong {
    font-size: 2rem !important;
  }
  #home-container-content .home-section .home-section-container .sample-recommendations {
    margin-top: 0;
  }
  #home-container-content .home-section .home-section-container .home-content-simple-bullets .bullet-section-headline {
    margin-top: 0;
  }
  #home-container-content .home-section .home-section-container .home-content-simple-bullets .bullet-section-headline:not(:first-of-type) {
    margin-top: 5rem;
  }
  #home-container-content .home-section .home-section-container .home-content-simple-bullets.horizontal ul {
    flex-direction: column;
    gap: 0;
  }
  #home-container-content .home-section .home-section-container .desktop-separator {
    height: 0;
    display: none;
  }
  #home-container-content .home-section .home-section-container .mobile-separator {
    display: block;
    height: 5rem;
  }
  #home-container-content .home-section .home-section-container .home-content-article-section {
    margin-top: 4rem;
  }
  #home-container-content .home-section .home-section-container .home-content-article-section p {
    margin: 0;
  }
  #home-container-content .home-section .home-section-container .home-content-article-section .article-insight {
    margin: 0;
    margin-bottom: 2rem;
  }
  #home-container-content .flow {
    flex-direction: column;
    align-items: center !important;
  }
  #home-container-content .flow .flow-step {
    width: 80% !important;
  }
  #home-container-content .flow .flow-step .flow-step-visual {
    height: auto;
    padding: 2rem 0;
  }
  #home-container-content .flow .flow-step .flow-step-visual img.big-4 {
    height: 10rem;
  }
  #home-container-content .flow .flow-step .flow-step-description h4 {
    line-height: 3.5rem;
    text-align: center;
    justify-content: center;
  }
  #home-container-content .flow .flow-step .flow-step-description h4 .number {
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
  }
  #home-container-content .flow .flow-step .flow-step-description p {
    padding: 1rem 0;
    text-align: center;
  }
  #home-container-content .flow .flow-connect {
    width: 100%;
  }
  #home-container-content .flow .flow-connect img {
    transform: rotate(90deg);
    height: 5rem;
    width: 5rem;
  }
  #home-container-content .comparison-card {
    flex-direction: column;
    align-items: stretch;
  }
  #home-container-content .comparison-card .comparison-side ul {
    padding: 0;
    margin: 0;
  }
  #home-container-content .comparison-card .comparison-side ul li {
    font-size: 2rem;
  }
  #home-container-content .comparison-card .comparison-arrow {
    display: flex;
    justify-content: center;
  }
  #home-container-content .comparison-card .comparison-arrow svg {
    animation: comparisonArrowVertical 2.5s ease-in-out infinite;
  }
  footer {
    justify-content: center !important;
  }
  #layer-animation {
    margin-top: 2rem;
    height: 280px;
    font-size: 1.7rem;
  }
  #layer-animation .layer {
    width: 82%;
  }
  #layer-animation .output {
    font-size: 2rem;
  }
  #layer-animation .output-flow {
    height: 42px;
  }
  #layer-animation .output-flow::before {
    height: 42px;
  }
}
@media only screen and (max-width: 400px) {
  #home-container-content .home-section .home-section-container h3 {
    padding-left: 0;
    padding-right: 0;
  }
  #home-container-content .home-section .home-section-container .home-cta .cta {
    padding: 1.5rem 1.5rem !important;
  }
  #home-container-content .home-section .home-section-container .text ul {
    margin: 0 0.5rem !important;
  }
}
@media (orientation: portrait) {
  #home-container-content .home-section .home-section-container .video-content .video-container .video-desktop {
    display: none;
  }
  #home-container-content .home-section .home-section-container .video-content .video-container .video-mobile {
    display: block;
  }
}
.login-container {
  display: grid;
  grid-template-rows: 5vh 93vh 2vh;
  grid-template-columns: [sidebar-start] 1fr [center-start] minmax(min-content, 150rem) [center-end] 1fr [full-end];
}
.login-container header {
  grid-column: center-start/center-end;
  grid-row: 1/1;
  display: grid;
  grid-template-columns: [sidebar-start] 1fr [center-start] minmax(min-content, 150rem) [center-end] 1fr [full-end];
}
.login-container footer {
  color: #fff;
  padding: 0 2rem;
  background-color: #111111;
  grid-column: center-start/center-end;
}

.login-flex {
  grid-column: sidebar-start/full-end;
  grid-row: 2/2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
}
.login-flex h1 {
  color: white;
  font-size: 3.2rem;
}
.login-flex p,
.login-flex p > a {
  color: #aaaaaa;
}

.login-form {
  width: 30rem;
  color: white;
  text-align: center;
  padding: 2vh;
}
.login-form input:not([type=checkbox]) {
  display: block;
  width: 100%;
  border: none;
  border-radius: 5px;
  padding: 1rem 1rem;
  font-size: 1.5rem;
  margin: 1vh 0vh;
}
.login-form input[type=checkbox] {
  margin-left: 1rem;
}
.login-form button {
  display: block;
  width: 100%;
  height: 5rem;
  background-color: #6A2C55;
  border: none;
  color: white;
  font-size: 2rem;
  margin: 1vh 0vh;
  border-radius: 5px;
}

@media only screen and (max-width: 2000px) {
  .login-container {
    grid-template-rows: 8vh 87vh;
  }
}
.privacy-container {
  display: grid;
  grid-template-rows: 5vh 93vh 2vh;
  grid-template-columns: [left-start] 1fr [center-start] minmax(min-content, 150rem) [center-end] 1fr [right-end];
  color: #221E26;
}
.privacy-container .emoji {
  height: 1em;
  width: auto;
}
.privacy-container header {
  grid-column: center-start/center-end;
  grid-row: 1/1;
  display: grid;
  grid-template-columns: [left-start] 1fr [center-start] minmax(min-content, 150rem) [center-end] 1fr [right-end];
  background-color: #221E26;
}
.privacy-container footer {
  grid-column: center-start/center-end;
  grid-row: 3/3;
  display: flex;
  justify-content: start;
  align-items: center;
}
.privacy-container #privacy-container-content {
  grid-column: left-start/right-end;
  grid-row: 2/2;
  display: grid;
  grid-template-columns: [left-start] 1fr [center-start] minmax(min-content, 150rem) [center-end] 1fr [right-end];
  overflow: auto;
}
.privacy-container #privacy-container-content .privacy-section-container {
  grid-column: center-start/center-end;
  grid-row: auto;
  padding: 0 20rem;
  padding-bottom: 5rem;
}
.privacy-container #privacy-container-content .privacy-section-container h1 {
  font-size: 4rem;
  text-align: center;
  font-weight: bold;
  margin-top: 4rem;
  margin-bottom: 3rem;
}
.privacy-container #privacy-container-content .privacy-section-container h2 {
  font-size: 2rem;
  margin-top: 2rem;
}
.privacy-container #privacy-container-content .privacy-section-container h3 {
  font-size: 1.9rem;
  margin-top: 1.5rem;
}
.privacy-container #privacy-container-content .privacy-section-container p {
  font-size: 1.5rem;
  text-align: justify;
  margin-bottom: 1rem;
}
.privacy-container #privacy-container-content .privacy-section-container ul, .privacy-container #privacy-container-content .privacy-section-container ol {
  padding: 1rem 0rem;
  padding-left: 3rem;
}
.privacy-container #privacy-container-content .privacy-section-container a {
  font-size: 1.5rem;
  color: white;
}

@media only screen and (max-width: 2000px) {
  .privacy-container {
    grid-template-rows: 5vh 93vh 2vh;
  }
}
@media only screen and (max-width: 576px) {
  .privacy-container #privacy-container-content {
    grid-template-columns: [left-start] 1fr [right-end] !important;
  }
  .privacy-container #privacy-container-content .privacy-section-container {
    grid-column: left-start/right-end !important;
    padding: 0 3rem !important;
  }
  .privacy-container footer {
    justify-content: center !important;
  }
}

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