@charset "UTF-8";
/*
Primary Background: #0D0D0D
Main Accent: #6366F1
Secondary Accent: #8B5CF6
Complementary Color: #14B8A6
Neutral Support: #E5E7EB

Buttons & Links: #6366F1 (Main accent) for primary actions, #8B5CF6 for secondary buttons.
Hover Effects: Slightly lighter variants of the main accent (#818CF8).
Text: White (#FFFFFF) or light gray (#E5E7EB) for contrast.
Backgrounds & Cards: A mix of #111827 (Dark Gray) and #1E293B (Deep Slate).
Success/Info/Error: Teal (#14B8A6) can be used for notifications, alerts, or subtle highlights.
*/
/*
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 #007FFF;
}

.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 #007FFF;
  transform: scaleX(1);
}

.textInputWrapper:focus-within:after {
  border-bottom: 0.2rem solid #007FFF;
  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 #007FFF;
  border-bottom-color: #007FFF;
}

.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, #007FFF 10.8%, #315b7d 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).textValue .show-full-text-container:hover::after, td:has(.show-full-text-container).textValue .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 .show-full-text-container:hover::after, td:has(.show-full-text-container).Undefined .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).textValue .show-full-text-container:hover::after,
th:has(.show-full-text-container).textValue .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 .show-full-text-container:hover::after,
th:has(.show-full-text-container).Undefined .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%, -3rem);
}

.show-full-text-container {
  position: relative;
  /* anchor for ::after tooltip */
  display: block;
  /* fill the td’s content width */
  width: 100%;
  overflow: visible;
  /* Optional: small arrow */
}
.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: #007FFF;
}
.show-full-text-container.selected-item.selected-2::after {
  color: #101010;
  background-color: #00E6A8;
}
.show-full-text-container.selected-item.selected-3::after {
  color: #101010;
  background-color: #FFD700;
}

.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%);
}

/* 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: #111111;
  border-radius: 1rem;
}

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

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

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

.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;
}

.loader {
  background-image: url("../img/loader.svg");
  background-size: 3%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}
.loader.dark {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

@-webkit-keyframes rotating
/* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.loader-2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-2 .spinner {
  border: 0.8rem solid #f3f3f3;
  /* Light grey */
  border-top: 0.8rem solid #007FFF;
  /* Blue */
  border-radius: 50%;
  width: 6rem;
  height: 6rem;
  animation: spin 1.5s linear infinite;
}
.loader-2 .spinner.small {
  border: 0.4rem solid #f3f3f3;
  /* Light grey */
  border-top: 0.4rem solid #007FFF;
  /* Blue */
  width: 3rem;
  height: 3rem;
}
.loader-2 .spinner.xs {
  border: 0.25rem solid #f3f3f3;
  /* Light grey */
  border-top: 0.25rem solid #007FFF;
  /* Blue */
  width: 2rem;
  height: 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%;
  }
}
#agentic-container {
  display: grid;
  grid-template-rows: 7vh 86vh;
  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: #FFD700;
}
#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 1rem;
}

#chatbox {
  z-index: 1;
  position: relative;
  background-color: #101010;
  border-radius: 0.5rem;
  padding: 2rem;
  grid-row: 1/1;
  overflow: auto;
}
#chatbox.loading::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 1.5rem;
  margin-left: 12rem;
  border: 0.4rem solid #f3f3f3;
  border-top-color: #007FFF;
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}
#chatbox .botText:not(.noflex),
#chatbox .userText {
  margin-bottom: 1rem;
  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 > span,
#chatbox .userText > span {
  border-radius: 1rem;
  padding: 1rem 1.8rem;
  animation: showUp 0.2s ease-out;
}
#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 > p,
#chatbox .userText > span.fluent-text > p {
  position: relative;
  padding-left: 2rem;
}
#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: 98%;
  background-color: #00E6A8;
  /* color of the border */
}
#chatbox .botText > span.fluent-text > p::before,
#chatbox .userText > span.fluent-text > p::before {
  top: 1%;
}
#chatbox .botText > span.fluent-text > p::after,
#chatbox .userText > span.fluent-text > p::after {
  bottom: 1%;
  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: #00E6A8;
  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 .easypivot-sum-time,
#chatbox .userText > span .easypivot-sum-time {
  font-weight: bold;
  color: #00E6A8;
}
#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: #D3D3D3;
}
#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:not(.loaderContainer) {
  background: linear-gradient(180deg, #27282D 95%, #1D1D1D 100%);
}
#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 table {
  table-layout: fixed;
  width: 100%;
  border-radius: 0.5rem;
  padding: 1rem;
  border-collapse: collapse;
}
#chatbox .botText table .small-col {
  width: 12%;
}
#chatbox .botText table td {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#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 img {
  position: absolute;
  width: 2.8rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
  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 img.ai_interpret {
  right: 3rem;
}
#chatbox .botText-row-container .botText-menu-list {
  position: absolute;
  bottom: 3rem;
  width: 100%;
  background-color: #fff;
  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;
}
#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: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

#clearChatBox {
  position: sticky;
  top: 0;
  text-align: right;
}
#clearChatBox span {
  opacity: 0;
  cursor: pointer;
}
#clearChatBox span.show {
  opacity: 0.5;
}
#clearChatBox span:hover {
  color: #007FFF;
  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;
}

#addMagicTool {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #101010;
}
#addMagicTool > img {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}
#addMagicTool > ul {
  position: absolute;
  left: 0;
  bottom: 4rem;
  display: none;
}
#addMagicTool > ul li {
  margin-top: 0;
  margin-bottom: 0.4rem;
  white-space: nowrap;
  background-color: #222222;
  color: #fff;
  border-radius: 1.2rem;
  /* or use 'inline' */
  width: fit-content;
  display: inline-flex;
  align-items: stretch;
  padding: 0rem;
}
#addMagicTool > ul li label {
  font-size: 1.5rem;
  padding: 1rem;
  border-radius: 1.2rem;
}
#addMagicTool > ul li label:hover {
  cursor: pointer;
  background-color: #0A1A2F;
}
#addMagicTool > ul.show {
  display: block;
}

#predefinedTools,
#showMeOptionsContainer,
#showMeFieldsContainer,
#showMeTimeRangeContainer {
  display: flex;
  justify-content: left;
  align-items: center;
  background-color: #101010;
  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: #161616;
  color: #fff;
  border-radius: 1.2rem;
  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: #00E6A8 !important;
  color: #2a2b28;
}
#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: #0A1A2F;
}
#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: #007FFF;
  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.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: #0A1A2F;
}
#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: #007FFF;
  color: #fff;
}
#predefinedTools .predefinedTool.magicTool img,
#showMeOptionsContainer .predefinedTool.magicTool img,
#showMeFieldsContainer .predefinedTool.magicTool img,
#showMeTimeRangeContainer .predefinedTool.magicTool img {
  position: absolute;
  right: -0.8rem;
  top: -0.6rem;
  height: 2rem;
  transform: scale(0.5);
  transform-origin: bottom center;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  transform-origin: 0.5 1;
}
#predefinedTools .predefinedTool.magicTool label:hover,
#showMeOptionsContainer .predefinedTool.magicTool label:hover,
#showMeFieldsContainer .predefinedTool.magicTool label:hover,
#showMeTimeRangeContainer .predefinedTool.magicTool label:hover {
  cursor: pointer;
}
#predefinedTools .predefinedOption,
#predefinedTools .predefinedField,
#showMeOptionsContainer .predefinedOption,
#showMeOptionsContainer .predefinedField,
#showMeFieldsContainer .predefinedOption,
#showMeFieldsContainer .predefinedField,
#showMeTimeRangeContainer .predefinedOption,
#showMeTimeRangeContainer .predefinedField {
  background-color: #161616;
}
#predefinedTools .predefinedTimeOption,
#predefinedTools .datePickerContainer,
#showMeOptionsContainer .predefinedTimeOption,
#showMeOptionsContainer .datePickerContainer,
#showMeFieldsContainer .predefinedTimeOption,
#showMeFieldsContainer .datePickerContainer,
#showMeTimeRangeContainer .predefinedTimeOption,
#showMeTimeRangeContainer .datePickerContainer {
  background-color: #007FFF;
}
#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 0.5rem;
  border: 1px solid #fff;
  border-radius: 1rem;
}
#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 {
  transition: opacity 0.1s;
  opacity: 0;
}
#predefinedTools.show {
  opacity: 1;
}
#predefinedTools.wait .predefinedTool:not(.stop) {
  background-color: rgba(0, 0, 0, 0);
  color: grey;
  cursor: auto;
}
#predefinedTools.wait .stop {
  display: block !important;
}

#chatWithCampaignManagerInput {
  padding: 1rem;
}

.agents-overview {
  padding: 2rem;
  grid-column: right-start/right-end;
  grid-row: 2/2;
  background-color: #101010;
  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%);
}

#currentBreakdownStage {
  color: #00E6A8;
}

#agentBreakDown {
  background-color: #353535;
  border-radius: 0.5rem;
  position: relative;
  opacity: 0;
}
#agentBreakDown .activeFrame {
  background-color: #00E6A8;
  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: #00E6A8;
  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: #4682B4;
}
#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: #007FFF;
}

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

#agent-close-filter-button {
  background-color: rgba(0, 0, 0, 0) !important;
}
#agent-close-filter-button .button-label {
  color: #00E6A8;
  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-headline) td {
  padding-top: 0.5rem;
}
.botText-table .left-padding {
  padding-left: 1rem;
}
.botText-table td.spacer {
  padding-top: 0.5rem;
  border-bottom: 1px solid #fff;
}
.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: #00E6A8;
  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;
}

.table-chart-container {
  position: relative;
  height: 18rem;
  background-color: rgba(0, 0, 0, 0.08);
  margin: 1rem 0;
  margin-left: -1.8rem;
  width: calc(100% + 3.6rem);
}
.table-chart-container canvas {
  position: absolute;
  left: 1rem;
  top: 1rem;
  height: calc(100% - 2rem) !important;
  width: calc(100% - 2rem) !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: 2rem;
  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;
}

@keyframes active-animation {
  0%, 100% {
    background-color: #4682B4;
  }
  50% {
    background-color: #007FFF;
  }
}
@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 (max-width: 2000px) {
  #agentic-container {
    grid-template-rows: 8vh 82vh;
  }
  .content-header h1 {
    font-size: 2rem;
  }
  .content-header img {
    width: 2rem;
  }
  .breakdownStages span {
    font-size: 1rem;
  }
}
@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;
  }
}
.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];
}
.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 footer {
  color: #fff;
  padding: 0 2rem;
}
.content-container footer a {
  display: none;
}

@media only screen and (max-width: 2000px) {
  .content-container {
    grid-template-rows: 7vh 90vh 3vh;
  }
}
.content {
  background-color: #101010;
  color: #fff;
  grid-column: center-start/center-end;
  grid-row: 2/2;
  font-size: 1.5rem;
}
.content .flashes {
  list-style-type: none;
  position: relative;
}
.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 .flashes li.success {
  background-color: #00C851;
}
.content .flashes li.error {
  background-color: #ff4444;
}

@keyframes flashAnimation {
  0% {
    transform: scaleY(0);
  }
  10% {
    transform: scaleY(1);
  }
  90% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
    display: none;
  }
}
#dashboard-container {
  display: grid;
  grid-template-rows: 7vh 86vh;
  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: 86vh;
  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: #1C1C1C;
  border-radius: 2rem;
  margin-top: 2rem;
  padding: 2rem;
}
#dashboard-container #dashboard-content-container #db-imports-container #db-imports-container-content .dashboard-imports-item .dashboard-imports-item-dynamic {
  height: 30rem;
  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: 15rem;
  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: 2rem;
  background-color: #101010;
}
#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: #1C1C1C;
  color: #D3D3D3;
  display: flex;
  flex-direction: column;
  padding: 3rem 0.2rem;
  border-radius: 2rem;
}
#dashboard-container #dashboard-content-container #numbers-container .number-box .number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  font-size: 4rem;
  height: 4rem;
}
#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 82vh;
  }
  .content-header h1 {
    font-size: 2rem;
  }
  .content-header img {
    width: 2rem;
  }
  #dashboard-content-container {
    grid-template-rows: 82vh !important;
  }
  .content-header > h1 {
    font-size: 2rem;
  }
  .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;
  }
}
.footer {
  background-color: #111111;
  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: #fff;
}
.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 #1C1C1C;
  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: #007FFF;
  border: 1px solid #007FFF;
}
#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: #1C1C1C;
}
#dropImportCSV label img {
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
}

#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: #1C1C1C;
  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: 10.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.2rem;
  padding-left: 1rem;
}
#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: #0A1A2F;
  color: #fff;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  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;
}
#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: #FFD700;
  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: #FFD700;
}
#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;
}

#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: #eeeeee;
  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: #444444;
  font-weight: bold;
  gap: 1rem;
}
#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: #FFD700;
  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: center;
}
#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 {
  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 {
  width: 2rem;
}
.small-button.highlight-color-orange,
.small-icon-button.highlight-color-orange {
  background-color: #FFD700;
  color: black;
}
.small-button:hover,
.small-icon-button:hover {
  cursor: pointer;
  background-color: #007FFF !important;
}
.small-button.revert-color:hover,
.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 {
  background-color: #4682B4;
}

.small-button-on-white,
.small-icon-button-on-white {
  color: black;
  background-color: #aaaaaa;
}
.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;
}
.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;
}

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

.form-button {
  border: none;
  border-radius: 0.5rem;
  padding: 1.5rem;
  font-size: 1.5rem;
  background-color: #007FFF;
  color: #fff;
  text-align: center;
}
.form-button:hover {
  cursor: pointer;
}
.form-button.active-sec {
  background-color: #4682B4;
}
.form-button.passive {
  background-color: #aaaaaa !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: #ff4444;
  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: #ff4444;
  color: #fff;
}

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

#setGoalFormulasContainer.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;
}
#setGoalFormulasContainer 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;
}
#setGoalFormulasContainer .numerical_columns_container,
#setGoalFormulasContainer .math_symbols_container,
#setGoalFormulasContainer .kpi_types_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 .numerical_columns_container,
#modify-set-revenue-formulas-container .math_symbols_container,
#modify-set-revenue-formulas-container .kpi_types_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 .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;
}
#setGoalFormulasContainer .numerical_columns_container.invisible,
#setGoalFormulasContainer .math_symbols_container.invisible,
#setGoalFormulasContainer .kpi_types_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 .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 .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 .numerical_columns_container.invisible,
#modify-set-cost-formulas-container .math_symbols_container.invisible,
#modify-set-cost-formulas-container .kpi_types_container.invisible {
  display: none;
}
#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 .numerical_column_item,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper,
#setGoalFormulasContainer .math_symbols_container .math_item,
#setGoalFormulasContainer .math_symbols_container .KPI_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,
#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 .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 .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 .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 .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 .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 .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 .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 .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 .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 .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 .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-color: #007FFF;
  color: #fff;
  padding: 0.5rem 1rem;
  margin: 0.25rem;
  border-radius: 0.5rem;
}
#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 .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 .numerical_column_item:hover,
#setGoalFormulasContainer .kpi_types_container .numericalInputWrapper:hover,
#setGoalFormulasContainer .kpi_types_container .math_item:hover,
#setGoalFormulasContainer .kpi_types_container .KPI_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 .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 .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 .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 .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 .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 .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 .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 .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 .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 .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 .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;
}
#setGoalFormulasContainer .numerical_columns_container .math_item,
#setGoalFormulasContainer .math_symbols_container .math_item,
#setGoalFormulasContainer .kpi_types_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 .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 .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 .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-color: #111111;
}
#setGoalFormulasContainer .numerical_columns_container .KPI_item,
#setGoalFormulasContainer .math_symbols_container .KPI_item,
#setGoalFormulasContainer .kpi_types_container .KPI_item,
#set-revenue-formulas-container .numerical_columns_container .KPI_item,
#set-revenue-formulas-container .math_symbols_container .KPI_item,
#set-revenue-formulas-container .kpi_types_container .KPI_item,
#modify-set-revenue-formulas-container .numerical_columns_container .KPI_item,
#modify-set-revenue-formulas-container .math_symbols_container .KPI_item,
#modify-set-revenue-formulas-container .kpi_types_container .KPI_item,
#set-cost-formulas-container .numerical_columns_container .KPI_item,
#set-cost-formulas-container .math_symbols_container .KPI_item,
#set-cost-formulas-container .kpi_types_container .KPI_item,
#modify-set-cost-formulas-container .numerical_columns_container .KPI_item,
#modify-set-cost-formulas-container .math_symbols_container .KPI_item,
#modify-set-cost-formulas-container .kpi_types_container .KPI_item {
  background-color: #2a2b28;
}
#setGoalFormulasContainer .numerical_columns_container .KPI_item.highlight,
#setGoalFormulasContainer .math_symbols_container .KPI_item.highlight,
#setGoalFormulasContainer .kpi_types_container .KPI_item.highlight,
#set-revenue-formulas-container .numerical_columns_container .KPI_item.highlight,
#set-revenue-formulas-container .math_symbols_container .KPI_item.highlight,
#set-revenue-formulas-container .kpi_types_container .KPI_item.highlight,
#modify-set-revenue-formulas-container .numerical_columns_container .KPI_item.highlight,
#modify-set-revenue-formulas-container .math_symbols_container .KPI_item.highlight,
#modify-set-revenue-formulas-container .kpi_types_container .KPI_item.highlight,
#set-cost-formulas-container .numerical_columns_container .KPI_item.highlight,
#set-cost-formulas-container .math_symbols_container .KPI_item.highlight,
#set-cost-formulas-container .kpi_types_container .KPI_item.highlight,
#modify-set-cost-formulas-container .numerical_columns_container .KPI_item.highlight,
#modify-set-cost-formulas-container .math_symbols_container .KPI_item.highlight,
#modify-set-cost-formulas-container .kpi_types_container .KPI_item.highlight {
  background-color: #007FFF;
}
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper,
#setGoalFormulasContainer .kpi_types_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 .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 .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 .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: 10rem;
  height: 3.55rem;
  padding: 0;
}
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper input,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper input,
#setGoalFormulasContainer .kpi_types_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 .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 .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 .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: 5.7rem;
  line-height: 1.7rem;
  font-size: 1.5rem;
  height: 1.95rem;
  border: none;
  margin-top: 0.8rem;
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
}
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper input:focus,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper input:focus,
#setGoalFormulasContainer .kpi_types_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 .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 .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 .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;
}
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper input::placeholder,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper input::placeholder,
#setGoalFormulasContainer .kpi_types_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 .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 .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 .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;
}
#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,
#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 .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 .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 .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;
}
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper .addNumberButton,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper .addNumberButton,
#setGoalFormulasContainer .kpi_types_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 .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 .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 .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: 80%;
  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;
}
#setGoalFormulasContainer .numerical_columns_container .numericalInputWrapper .addNumberButton:hover,
#setGoalFormulasContainer .math_symbols_container .numericalInputWrapper .addNumberButton:hover,
#setGoalFormulasContainer .kpi_types_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 .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 .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 .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: 100%;
}
#setGoalFormulasContainer .KPIdrawArea,
#setGoalFormulasContainer .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;
}
#setGoalFormulasContainer .KPIdrawArea .drawItem,
#setGoalFormulasContainer .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: #333;
}

.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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 0rem;
}
.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: 10rem;
}
.styled-select.disabled label {
  opacity: 0.5;
  cursor: auto !important;
}
.styled-select label {
  padding: 0.7rem 1.4rem;
  background-color: #aaaaaa;
  border-radius: 0.5rem;
  text-align: center;
}
.styled-select label span {
  display: block;
  text-align: center;
}
.styled-select label.checked {
  background-color: #007FFF;
  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: 0.5rem;
  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: #007FFF;
  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: #007FFF;
}

.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.2rem 0.3rem;
}

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

.custom-select {
  position: relative;
}
.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: #fff;
  border-radius: 0.5rem;
  border: 1px solid #aaaaaa;
  padding: 1.2rem 1.3rem;
  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;
}
.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: 2rem;
}
.custom-select .flaskSelect-dropDown {
  position: absolute;
  top: 4.3rem;
  left: 0rem;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #aaaaaa;
  background-color: #fff;
  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 #aaaaaa;
}
.custom-select .flaskSelect-dropDown div:not(.flaskSelect-dropDown):hover,
.custom-select .flaskSelect-dropDown label:hover {
  background-color: #D3D3D3;
  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: #007FFF;
  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;
}

.header {
  grid-column: sidebar-start/full-end;
  grid-row: 1/1;
  font-size: 2rem;
  position: fixed;
  height: 5vh;
  width: 100%;
}
.header:not(.dark) {
  background-color: #fff;
}
.header:not(.dark) a {
  color: #222;
}
.header.dark {
  background-color: #000000;
  border-bottom: 1px solid #fff;
}
.header.dark .logo {
  background-image: url("../img/logo-white.svg");
}
.header.dark a {
  color: #fff;
}
.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 a.solution {
  text-decoration: none;
  background-color: #007FFF;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
}

.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: 3rem;
  padding: 0.4rem;
  filter: brightness(0) saturate(100%) invert(18%) sepia(3%) saturate(5157%) hue-rotate(209deg) brightness(89%) contrast(78%);
}

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

@media only screen and (max-width: 2000px) {
  .content-container > .header,
  .home-container > .header,
  .content-container > .header,
  .login-container > .header,
  .privacy-container > .header {
    height: 7vh;
  }
  .header .logo {
    height: 7vh;
    width: 15.75vh;
  }
  .header .logoContainer {
    height: 7vh;
  }
}
#imports-container {
  display: grid;
  grid-template-rows: 7vh 86vh;
  grid-template-columns: [left-start] 1fr [left-end right-start] 30rem [right-end];
  padding: 0 1rem;
}
#imports-container.loading {
  background: linear-gradient(90deg, #111111 25%, #222 37%, #111111 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: #101010;
  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: #1C1C1C;
}
#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: #101010;
}
#imports-container #imports-preview .previewContainer table tr .columnsCell {
  background-color: #007FFF;
  border-radius: 0.5rem;
  margin: 0.5rem auto;
  padding: 0.5rem;
  text-align: center;
}
#imports-container #imports-preview .previewContainer table tr .columnsCell.main {
  background-color: #00E6A8;
  color: #222;
}
#imports-container #imports-preview .previewContainer table tr .columnsCell.mapping {
  background-color: #FFD700;
  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 46vh;
}
#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: #FFD700;
  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: #007FFF;
  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: #007FFF;
}
#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: #ff4444;
}
#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: #101010;
  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: 0.5rem;
  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: #0A1A2F;
  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: #0A1A2F;
}
#imports-container .imports-existing .previewClickContainer.preview {
  background-color: #007FFF;
}
#imports-container .imports-existing .previewClickContainer.preview .imports-fileName span::after {
  background-color: #007FFF;
}
#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: #101010;
}
#imports-container .imports-existing .previewClickContainer .imports-snapshotDate input[type=date].loading {
  background: linear-gradient(90deg, #111111 25%, #222 37%, #111111 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 {
  padding-top: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;
  height: 5rem;
}
#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.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 #00E6A8;
  border-radius: 1000rem;
  color: #00E6A8;
  font-size: 2rem;
  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: #00E6A8;
}
#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 82vh;
  }
  #imports-container.preview-active {
    grid-template-rows: 8vh 36vh 46vh;
  }
  .content-header > h1 {
    font-size: 2rem;
  }
}
#magictools-container {
  display: grid;
  grid-template-rows: 7vh 86vh;
  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: #fff;
}
#magictools-container .tools-existing .tool.active h3 {
  cursor: pointer;
  background-color: #007FFF;
}
#magictools-container .tools-existing .tool.active form {
  color: #111111;
}
#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: #eeeeee;
}
#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: #333;
}
#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: brightness(0) saturate(100%) invert(18%) sepia(3%) saturate(5157%) hue-rotate(209deg) brightness(89%) contrast(78%);
  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: #fff;
  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: 2500px;
  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.small-gap {
  column-gap: 2rem;
}
#magictools-container .tools-existing .tool form > div {
  overflow: hidden;
  min-width: 0;
}
#magictools-container .tools-existing .tool form > div .form-group-headline {
  font-size: 2rem;
  font-weight: bold;
  opacity: 0.5;
  margin-bottom: -1.2rem;
}
#magictools-container .tools-existing .tool form > div .form-group-headline::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #dddddd;
  margin: 2rem 0 2rem 0;
}
#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-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-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 {
  grid-row: 5/5;
  grid-column: left-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 .mt-form-item .explain,
#magictools-container .tools-existing .tool form .explain-tool {
  font-size: 1.3rem;
  background-color: rgba(0, 0, 0, 0.05);
  font-style: italic;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  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;
}
#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 .inlineContainer {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#magictools-container .tools-existing .tool form .mt-form-item .inlineContainer input {
  display: inline;
  width: 7rem;
}
#magictools-container .tools-existing .tool form .mt-form-item:has(.display-none) {
  display: none;
}
#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: #ff4444 !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.3rem;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  font-family: "Golos Text", "Roboto", Arial;
  background-color: #eee;
  color: #666;
  margin-bottom: 0.5rem;
}
#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: 1rem 1rem;
  border: 1px solid #aaaaaa;
  border-radius: 0.5rem;
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  background-color: #fff;
  color: #111111;
}
#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 .styled-select {
  margin-bottom: 0.5rem;
}
#magictools-container .tools-existing .tool form select {
  cursor: pointer;
}

#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 82vh;
  }
  .content-header > h1 {
    font-size: 2rem;
  }
}
#mappings-container {
  display: grid;
  grid-template-rows: 7vh 86vh;
  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;
  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: #007FFF;
}
#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: #161616;
  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: #0A1A2F;
  cursor: pointer;
}
#mappings-container #mappings-existing #mappings-existing-content li label.active {
  background-color: #007FFF;
}
#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: #eeeeee;
  color: #333;
  border-radius: 2rem;
  overflow: auto;
  display: none;
}
#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: #007FFF;
  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;
}
#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;
}
#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: #dddddd;
  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;
}
#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: #007FFF;
  color: #fff;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem table td .actionButtons .button.applyHere {
  background-color: #315b7d;
  color: #fff;
}
#mappings-container #mapping-container #current-mapping .current-mapping-content #current-mapping-import-relationships .importItem table td .actionButtons .button.push {
  background-color: #00E6A8;
  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: #161616;
  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: #0A1A2F;
}
#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 #1C1C1C;
}
#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: #dddddd;
}
#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: brightness(0) saturate(100%) invert(18%) sepia(3%) saturate(5157%) hue-rotate(209deg) brightness(89%) contrast(78%);
}
#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: #ff4444;
}
#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: #ffbb33;
}
#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;
}
#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 {
  padding: 1rem;
}
#mappings-container #mapping-container #current-mapping .mapping-button-container img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(3%) saturate(5157%) hue-rotate(209deg) brightness(89%) contrast(78%);
}
#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%);
}

@media only screen and (max-width: 2000px) {
  #mappings-container {
    grid-template-rows: 8vh 82vh;
  }
  .content-header > h1 {
    font-size: 2rem;
  }
}
.modal-add-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-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-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-add-column:checked ~ .modal-container-new.add-column,
#modal-add-goal:checked ~ .modal-container-new.add-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-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-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-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-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-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-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: #fff;
  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: 2500px;
  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.small-gap {
  column-gap: 2rem;
}
#modal-container-agent-magic-tool form > div {
  overflow: hidden;
  min-width: 0;
}
#modal-container-agent-magic-tool form > div .form-group-headline {
  font-size: 2rem;
  font-weight: bold;
  opacity: 0.5;
  margin-bottom: -1.2rem;
}
#modal-container-agent-magic-tool form > div .form-group-headline::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #dddddd;
  margin: 2rem 0 2rem 0;
}
#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-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-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 {
  grid-row: 5/5;
  grid-column: left-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 .mt-form-item .explain,
#modal-container-agent-magic-tool form .explain-tool {
  font-size: 1.3rem;
  background-color: rgba(0, 0, 0, 0.05);
  font-style: italic;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  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;
}
#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 .inlineContainer {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#modal-container-agent-magic-tool form .mt-form-item .inlineContainer input {
  display: inline;
  width: 7rem;
}
#modal-container-agent-magic-tool form .mt-form-item:has(.display-none) {
  display: none;
}
#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: #ff4444 !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.3rem;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  font-family: "Golos Text", "Roboto", Arial;
  background-color: #eee;
  color: #666;
  margin-bottom: 0.5rem;
}
#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: 1rem 1rem;
  border: 1px solid #aaaaaa;
  border-radius: 0.5rem;
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  background-color: #fff;
  color: #111111;
}
#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 .styled-select {
  margin-bottom: 0.5rem;
}
#modal-container-agent-magic-tool form select {
  cursor: pointer;
}
#modal-container-agent-magic-tool form.visible {
  display: grid;
}

#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);
  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,
#modal-add-settings-user-errors {
  background-color: #ff4444;
  color: #fff;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

#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: #eeeeee;
}
#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:not(.disabled):hover img,
#modal-container-new-mapping-entry #add-mapping-entry-form-content.visible .modal-content-container .me-a-import-constraints-add-button:not(.disabled):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-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: 4rem;
}
#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;
}
#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: #aaaaaa;
  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.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: #eeeeee;
  border: 1px solid #aaaaaa;
  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: #007FFF;
  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-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: #fff;
  box-sizing: border-box;
  z-index: 9999;
  padding: 2rem 2rem;
  overflow: auto;
  color: black;
  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: 9rem;
  margin: -2rem;
  margin-bottom: 2rem;
  background-color: #007FFF;
  padding: 2rem;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: top;
}
.modal .modal-header-container h3 {
  font-size: 3rem;
  line-height: 5rem;
  display: inline-block;
}
.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: #fbfbfb;
  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 #aaaaaa;
  border-radius: 0.5rem;
  padding: 1rem 1rem;
  background-color: #fff;
  color: #111111;
  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;
}
.modal .modal-content-container .modal-content-tab-header label:hover {
  cursor: pointer;
}
.modal .modal-content-container .modal-content-tab-header label.active {
  color: #007FFF;
  border-bottom: 0.2rem solid #007FFF;
  font-weight: bold;
}
.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 {
  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 {
  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) {
  display: flex;
  gap: 1rem;
}
.modal 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 {
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.modal form .modal-content-container-item:has(.multiple-columns) .column-1 {
  flex: 1;
}
.modal 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 {
  grid-row: 1/1;
  grid-column: left-start/left-end;
}
.modal 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 select,
.modal form textarea {
  background-color: #fff;
  border: 1px solid #aaaaaa;
  border-radius: 0.5rem;
  padding: 1rem 1rem;
  font-size: 1.5rem;
  color: #111111;
  font-family: "Golos Text", "Roboto", Arial;
}
.modal form input[type=checkbox] {
  margin-left: 1rem;
}
.modal 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 {
  cursor: pointer;
}
.modal form .dropFile input {
  display: none;
}
.modal form .dropFile.markzone {
  background-color: #007FFF;
}
.modal 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 {
  display: none;
}
.modal form .modal-button-container.small {
  justify-content: start;
}
.modal form .modal-button-container input:not([type=submit]) {
  margin: 0;
}
.modal 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: #007FFF;
  color: #fff;
  text-align: center;
}
.modal form .modal-button-container .modalButton.small {
  padding: 0.5rem 1.5rem;
}
.modal form .modal-button-container .modalButton:hover {
  cursor: pointer;
}
.modal form .modal-button-container .modalButton.active-sec {
  background-color: #3d3a4e;
}
.modal form .modal-button-container .modalButton.passive {
  background-color: #aaaaaa;
  color: grey;
}
.modal form .modal-button-container .modalButton.passive:hover {
  cursor: auto;
}
.modal form .modal-button-container .modalButton.no-background {
  background-color: rgba(0, 0, 0, 0);
}
.modal form .modal-button-container .modalButton:not(:last-child) {
  margin-right: 3%;
}
.modal form .modal-button-container .modalHint {
  display: block;
  height: auto !important;
  line-height: 1.7;
  width: 30%;
  font-size: 1.5rem;
  padding: 1.5rem;
  color: #4682B4;
  text-align: center;
}
.modal form .explain {
  font-size: 1.3rem;
  background-color: rgba(0, 0, 0, 0.05);
  font-style: italic;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  white-space: normal;
}
.modal form textarea {
  width: 100%;
  resize: none;
  box-sizing: border-box;
}
.modal form textarea:disabled {
  background-color: #eee;
  color: #666;
}
.modal form textarea[disabled] {
  background-color: #eee;
  color: #666;
}
.modal .form-wrapper {
  max-height: 85rem;
  overflow-y: auto;
  display: grid;
  grid-template-rows: 1fr auto;
}
.modal .form-wrapper form {
  overflow-y: auto;
}
.modal .form-wrapper form .mt-form-button-box {
  grid-column: 1/-1;
  position: sticky;
  bottom: 0;
  background-color: white;
  z-index: 10;
  padding-top: 1rem;
}
.modal .modal-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

#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;
}

@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) {
  #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 {
    height: 48rem;
    max-height: 48rem;
  }
  #modal-container-agent-magic-tool .form-wrapper {
    height: 56rem;
    max-height: 56rem;
  }
}
.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-columns: [left-start] 1fr [right-end];
  padding: 0 1rem;
  overflow: auto;
}
#projects-container.dateless-0 {
  grid-template-rows: 7vh 50vh 36vh;
}
#projects-container.dateless-1 {
  grid-template-rows: 7vh 80vh;
}
#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;
}
#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-progression {
  padding: 2rem;
  grid-column: left-start/right-end;
  grid-row: 2/2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(180deg, #27282D 95%, #1D1D1D 100%);
  border-radius: 1.5rem;
}
#projects-container.dateless-1 > .projects-progression {
  background: rgba(0, 0, 0, 0);
}
#projects-container #projects-chart-container,
#projects-container #projects-snapshot-container {
  height: 100%;
  display: flex;
}
#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: #00E6A8;
  padding: 1rem 2rem;
  color: #111111;
  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 .projects-items {
  display: block;
  grid-column: left-start/right-end;
  grid-row: 3/3;
}
#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: #111111;
  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: #161616;
  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: #FFD700;
  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;
}
#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;
}

@media only screen and (max-width: 2000px) {
  #projects-container {
    grid-template-rows: 8vh 70vh 13vh;
  }
  .content-header h1 {
    font-size: 2rem;
  }
  .content-header img {
    width: 2rem;
  }
  .content-header > h1 {
    font-size: 2rem;
  }
}
#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: 93vh;
}
#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.3rem;
  padding: 0.5rem 1rem;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  margin-bottom: 1rem;
  margin-right: 6rem;
  font-style: italic;
}
#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 */
}

#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;
}

#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,
#goals-container ul li,
#sources-container ul li,
#supported-import-goals-container ul li {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 100%;
  margin: 0.1rem 0;
  padding: 1rem 0.5rem;
}
#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%);
}

#setGoalFormulasContainer {
  margin-bottom: 0.5rem;
}

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

#columnsCategoryInputContainer {
  display: none;
}

@media only screen and (max-width: 2000px) {
  #relationships-container {
    height: 91vh;
    grid-template-rows: 8vh auto 1fr;
  }
  .content-header > h1 {
    font-size: 2rem;
  }
}
.sidebar {
  background-color: #111111;
  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 !important;
  height: 2rem;
  margin-left: 0 !important;
}
.sidebar.init-loading {
  background: linear-gradient(90deg, #111111 25%, #222 37%, #111111 63%);
  background-size: 400% 100%;
  animation: loadingShimmer 2s ease-in-out infinite;
}

.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: #007FFF;
}
.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: #161616;
  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;
}
.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: #0A1A2F;
}
.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: #0A1A2F;
}
.sidebar li a.active {
  background-color: #007FFF;
}
.sidebar li a.active-loading {
  pointer-events: none;
  color: #fff;
  background: linear-gradient(90deg, #0A1A2F 25%, rgb(17.1578947368, 44.6105263158, 80.6421052632) 37%, #0A1A2F 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 {
  width: 1.5rem;
  margin-left: 0.5rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(108%) contrast(101%);
}

#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: #007FFF;
  }
  30% {
    background-color: #007FFF;
  }
  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;
}
.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: #4682B4;
}
.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 86vh;
  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: #161616;
  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: #0A1A2F;
  cursor: pointer;
}
#settings-container #settings-menu-container ul li label.active {
  background-color: #007FFF;
}
#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: #eeeeee;
  color: #333;
  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: #007FFF;
  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: #007FFF;
  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: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 #dddddd;
}
#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 #dddddd;
}
#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: #dddddd;
}
#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: #007FFF;
  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 82vh;
  }
  .content-header > h1 {
    font-size: 2rem;
  }
}
body {
  background-color: #101010;
}

.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: center;
  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;
}
.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 #007FFF;
  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 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 .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;
}

@media only screen and (max-width: 2000px) {
  .admin-container {
    grid-template-rows: 7vh 90vh 3vh;
  }
  .header-container,
  .header {
    height: 7vh;
  }
  #admin-items-grid {
    height: 90vh !important;
  }
  .footer {
    height: 3vh;
  }
}
@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");
}

.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: #fff;
}
.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: #000000;
}
.home-container header .home-header-button-highlight {
  background-color: #007FFF;
  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];
  /* Inner text components */
}
.home-container .home-section.dark {
  background-color: #000000;
  color: #fff;
}
.home-container .home-section.dark .text li {
  background-color: rgba(255, 255, 255, 0.04);
}
.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.bright {
  background-color: #fff;
  color: #000000;
}
.home-container .home-section.bright .text li {
  background-color: rgba(0, 0, 0, 0.04);
}
.home-container .home-section.bright .fluent-text {
  color: #777777;
}
.home-container .home-section.bright .fluent-text li::before {
  background: #007FFF;
}
.home-container .home-section.green {
  background-color: #00E6A8;
  color: rgba(0, 0, 0, 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.dark .home-at-a-glance-items div > span, .home-container .home-section.blue .home-at-a-glance-items div > span {
  color: #fff !important;
}
.home-container .home-section.dark .home-at-a-glance-items div > span .number span, .home-container .home-section.blue .home-at-a-glance-items div > span .number span {
  background-color: #fff !important;
}
.home-container .home-section.green .home-at-a-glance-items div > span, .home-container .home-section.orange .home-at-a-glance-items div > span {
  color: #000 !important;
}
.home-container .home-section.green .home-at-a-glance-items div > span .number span, .home-container .home-section.orange .home-at-a-glance-items div > span .number span {
  background-color: #000 !important;
}
.home-container .home-section.green .fluent-text li::before, .home-container .home-section.orange .fluent-text li::before {
  background: #000000;
}
.home-container .home-section.dark .home-at-a-glance-items div > span .number span {
  color: #000 !important;
}
.home-container .home-section.green .home-at-a-glance-items div > span .number span {
  color: #00E6A8 !important;
}
.home-container .home-section.orange .home-at-a-glance-items div > span .number span {
  color: #FFD700 !important;
}
.home-container .home-section.blue .home-at-a-glance-items div > span .number span {
  color: #007FFF !important;
}
.home-container .home-section.orange {
  background-color: #FFD700;
  color: rgba(0, 0, 0, 0.9);
}
.home-container .home-section.orange .text li {
  background-color: rgba(0, 0, 0, 0.04);
}
.home-container .home-section.blue {
  background-color: #007FFF;
  color: #fff;
}
.home-container .home-section.blue .full-width-highlight-text li {
  background-color: rgba(255, 255, 255, 0.04);
}
.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 .home-section-container {
  grid-column: center-start/center-end;
  grid-row: auto;
  padding: 0 2rem;
  padding-bottom: 5rem;
  /* Headline blocks, paragraphs, text sections */
}
.home-container .home-section .home-section-container.full-width {
  grid-column: left-start/right-end;
  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:not(:first-child) {
  margin-top: 10rem;
}
.home-container .home-section .home-section-container h1,
.home-container .home-section .home-section-container h2 {
  font-weight: bold;
  text-align: center;
  padding-left: 15rem;
  padding-right: 15rem;
  font-family: "Golos Text", "Roboto", Arial;
}
.home-container .home-section .home-section-container p {
  font-size: 3rem;
  line-height: 4rem;
  text-align: center;
  font-family: "Roboto", "Arial";
  padding-left: 15rem;
  padding-right: 15rem;
  padding-top: 1rem;
  padding-bottom: 8rem;
  margin-top: -1rem;
}
.home-container .home-section .home-section-container p.sub-headline-divider span {
  display: inline-block;
  width: 3rem;
  height: 0.5rem;
  background-color: #000;
  border-radius: 0.25rem;
}
.home-container .home-section .home-section-container .home-section-container-highlight-paragraph {
  padding-left: 50rem;
  padding-right: 50rem;
  margin-top: 5rem;
  padding-bottom: 2rem;
  text-align: left;
  position: relative;
}
.home-container .home-section .home-section-container .home-section-container-highlight-paragraph::before, .home-container .home-section .home-section-container .home-section-container-highlight-paragraph::after {
  content: "";
  position: absolute;
  left: 46.8rem;
  width: 0.4rem;
  height: 90%;
  background-color: black;
}
.home-container .home-section .home-section-container .home-section-container-highlight-paragraph::before {
  top: 5%;
}
.home-container .home-section .home-section-container .home-section-container-highlight-paragraph::after {
  bottom: 5%;
  left: 47.5rem;
}
.home-container .home-section .home-section-container h1 {
  font-size: 9rem;
  line-height: 9.5rem;
  padding-top: 12rem;
  padding-bottom: 2rem;
}
.home-container .home-section .home-section-container h2 {
  font-size: 6rem;
  line-height: 6.5rem;
  padding-top: 12rem;
  padding-bottom: 2rem;
}
.home-container .home-section .home-section-container h3 {
  font-size: 3rem;
  line-height: 4rem;
  text-align: center;
  padding-left: 15rem;
  padding-right: 15rem;
  padding-top: 2rem;
  padding-bottom: 7rem;
  font-weight: 400;
  font-family: "Roboto", "Arial";
}
.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-content-image {
  display: flex;
  justify-content: center;
}
.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 #007FFF;
  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: 1rem;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
  padding-bottom: 3rem;
  /* (optional) BLUE — choose what fits better visually */
}
.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;
}
.home-container .home-section .home-section-container .home-content.row:has(.tab.row) {
  gap: 2rem;
}
.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;
  /* Stretches item along the cross axis */
}
.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: 2rem;
  padding: 0px;
  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.5rem;
  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 .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 auto;
  max-width: 70rem;
}
.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 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  min-width: 50rem;
  min-height: 50rem;
  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 #007FFF;
  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: 2.2rem;
  line-height: 3.2rem;
  font-family: "Roboto", "Arial";
  padding: 5rem 0;
}
.home-container .home-section .home-section-container .home-content .text.para p {
  text-align: left;
  font-size: 2.5rem;
  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 li {
  padding: 2.5rem 3rem;
  border-radius: 4.25rem 3.75rem 3.5rem 4rem;
  font-weight: 500;
}
.home-container .home-section .home-section-container .home-content .text ul li:nth-child(2) {
  transform: translateX(1rem);
}
.home-container .home-section .home-section-container .home-content .text ul li:nth-child(3) {
  transform: translateX(0.5rem);
}
.home-container .home-section .home-section-container .home-content .text ul li .text-highlight {
  font-weight: 600;
}
.home-container .home-section .home-section-container .home-content .text ul li .text-highlight.green {
  color: #00E6A8;
}
.home-container .home-section .home-section-container .home-content .text ul li .text-highlight.blue {
  color: #007FFF;
}
.home-container .home-section .home-section-container .home-content .text ul li:not(:last-child) {
  margin-bottom: 3rem;
}
.home-container .home-section .home-section-container .home-content .full-width-highlight-text {
  font-size: 2.2rem;
  line-height: 3.2rem;
  font-family: "Roboto", "Arial";
}
.home-container .home-section .home-section-container .home-content .full-width-highlight-text ul {
  margin: 0 20rem;
  list-style-type: none;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.home-container .home-section .home-section-container .home-content .full-width-highlight-text ul li {
  padding: 2.5rem 3rem;
  border-radius: 4.25rem 3.75rem 3.5rem 4rem;
  font-weight: 500;
  flex: 1 1 calc(50% - 1rem);
  box-sizing: border-box;
}
.home-container .home-section .home-section-container .home-content .full-width-highlight-text ul li:nth-child(2) {
  transform: translateX(1rem);
}
.home-container .home-section .home-section-container .home-content .full-width-highlight-text ul li:nth-child(3) {
  transform: translateX(0.5rem);
}
.home-container .home-section .home-section-container .home-content .full-width-highlight-text ul li .text-highlight {
  font-weight: 600;
}
.home-container .home-section .home-section-container .home-content .full-width-highlight-text ul li .text-highlight.green {
  color: #00E6A8;
}
.home-container .home-section .home-section-container .home-content .full-width-highlight-text ul li .text-highlight.blue {
  color: #007FFF;
}
.home-container .home-section .home-section-container .home-content .full-width-highlight-text ul li:not(:last-child) {
  margin-bottom: 3rem;
}
.home-container .home-section .home-section-container .home-content .fluent-text {
  max-width: 70ch;
  margin: 0 auto;
  font-size: 1.8rem;
  line-height: 2.4rem;
  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.6rem;
}
.home-container .home-section .home-section-container .home-content .fluent-text li {
  position: relative;
  padding: 1.4rem 1.8rem 1.4rem 3.2rem;
  border-radius: 1.2rem;
  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.4rem;
  top: 1.9rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
}
.home-container .home-section .home-section-container .home-content .fluent-text li:hover {
  transform: translateY(-2px);
}
.home-container .home-section .home-section-container .home-content .fluent-text li .text-highlight {
  font-weight: 600;
}
.home-container .home-section .home-section-container .home-content.blue .home-container .home-section .home-section-container .home-content.dark .fluent-text {
  color: #f5f5f7;
}
.home-container .home-section .home-section-container .home-content.blue .home-container .home-section .home-section-container .home-content.dark .fluent-text li {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.home-container .home-section .home-section-container .home-content.blue .home-container .home-section .home-section-container .home-content.dark .fluent-text li:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}
.home-container .home-section .home-section-container .home-content.blue .home-container .home-section .home-section-container .home-content.dark .fluent-text li .text-highlight {
  color: #007FFF;
}
.home-container .home-section .home-section-container .home-content.bright .fluent-text {
  color: #111;
}
.home-container .home-section .home-section-container .home-content.bright .fluent-text li {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.home-container .home-section .home-section-container .home-content.bright .fluent-text li:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.16);
}
.home-container .home-section .home-section-container .home-content.bright .fluent-text li .text-highlight {
  color: #0059ff;
}
.home-container .home-section .home-section-container .home-content.green .fluent-text, .home-container .home-section .home-section-container .home-content.orange .fluent-text, .home-container .home-section .home-section-container .home-content.blue .fluent-text {
  color: #0c0c0c;
}
.home-container .home-section .home-section-container .home-content.green .fluent-text li, .home-container .home-section .home-section-container .home-content.orange .fluent-text li, .home-container .home-section .home-section-container .home-content.blue .fluent-text li {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.15);
}
.home-container .home-section .home-section-container .home-content.green .fluent-text li:hover, .home-container .home-section .home-section-container .home-content.orange .fluent-text li:hover, .home-container .home-section .home-section-container .home-content.blue .fluent-text li:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}
.home-container .home-section .home-section-container .home-content.green .fluent-text li .text-highlight, .home-container .home-section .home-section-container .home-content.orange .fluent-text li .text-highlight, .home-container .home-section .home-section-container .home-content.blue .fluent-text li .text-highlight {
  color: #0e3cff;
}
.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;
  -webkit-animation: ani-pulse 2s linear infinite;
  -moz-animation: ani-pulse 2s linear infinite;
  -ms-animation: ani-pulse 2s linear infinite;
  -o-animation: ani-pulse 2s linear infinite;
  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;
  -webkit-animation: ani-pulse-2 2s linear infinite;
  -moz-animation: ani-pulse-2 2s linear infinite;
  -ms-animation: ani-pulse-2 2s linear infinite;
  -o-animation: ani-pulse-2 2s linear infinite;
  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 .tab {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #007FFF;
  color: #000;
  overflow: hidden;
  width: 30rem;
  border-radius: 4rem;
}
.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 {
  border-bottom: 0.5rem solid #007FFF;
}
.home-container .home-section .home-section-container .home-content .tab.job .tab-head h4 {
  margin-top: 3rem;
  color: #007FFF;
}
.home-container .home-section .home-section-container .home-content .tab.job .tab-head h4 span {
  font-size: 1.5rem;
  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: #007FFF;
}
.home-container .home-section .home-section-container .home-content .tab .tab-head {
  background-color: #fff;
  border-bottom: 0.5rem solid #FFD700;
}
.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 h4 {
  font-size: 3rem;
  line-height: 3.5rem;
  text-align: center;
  padding: 0 2rem;
  padding-bottom: 2rem;
  align-self: stretch;
}
.home-container .home-section .home-section-container .home-content .tab ul {
  width: 100%;
  padding: 3rem 5rem;
  padding-right: 3rem;
  font-size: 2rem;
  line-height: 2.5rem;
  font-family: "Roboto", "Arial";
  background-color: #007FFF;
  color: #fff;
}
.home-container .home-section .home-section-container .home-content .tab ul li::marker {
  color: #FFD700;
}
.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 #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.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: 0rem;
}
.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 #contactForm > iframe {
  width: 64rem;
  height: 80rem;
}
.home-container .home-section .home-section-container .home-cta {
  display: flex;
  height: 20rem;
  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;
}
.home-container .home-section .home-section-container .home-cta .cta.primary {
  padding: 1.5rem 5rem;
  background-color: #007FFF;
  color: #fff;
  font-size: 3rem;
}
.home-container .home-section .home-section-container .home-cta .cta.secondary {
  padding: 1.5rem 4rem;
  background-color: #00E6A8;
  color: rgba(0, 0, 0, 0.5);
  font-size: 2.5rem;
}
.home-container .home-section .home-section-container .home-cta .cta.tertiary {
  padding: 1.5rem 4rem;
  background-color: #007FFF;
  color: #fff;
  font-size: 2.5rem;
}
.home-container .home-section .home-section-container .home-cta .cta.black {
  padding: 1.5rem 4rem;
  background-color: #000;
  color: #fff;
  font-size: 2.5rem;
}
.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: 4rem 0;
}
.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: 1rem;
  justify-content: space-around;
  align-items: center;
}
.home-container .home-section .home-section-container .home-at-a-glance-items div > span {
  font-size: 2rem;
  font-weight: bold;
  padding: 2rem;
  text-align: left;
  flex: 1;
  color: #007FFF;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  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: #007FFF;
  width: 6rem;
  height: 6rem;
  line-height: 6rem;
  border-radius: 50%;
  font-weight: bold;
  color: #fff;
}
.home-container .home-section .home-section-container > h1, .home-container .home-section .home-section-container > h2, .home-container .home-section .home-section-container > h3, .home-container .home-section .home-section-container > p, .home-container .home-section .home-section-container > .home-content, .home-container .home-section .home-section-container > .home-at-a-glance-items {
  max-width: var(--azu-text-max-width);
  margin-left: auto;
  margin-right: auto;
}
.home-container .home-section .text,
.home-container .home-section .fluent-text,
.home-container .home-section .full-width-highlight-text {
  max-width: var(--azu-text-max-width);
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 2000px) {
  .home-container {
    grid-template-rows: 7vh 90vh 3vh;
  }
  .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;
  }
}
@media only screen and (max-width: 576px) {
  #animation-usecase-advertising {
    background-image: url("../img/home/advertising/home-advertising-mobile.svg") !important;
  }
  #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 .home-section-container {
    grid-column: left-start/right-end !important;
    padding-bottom: 2rem;
  }
  #home-container-content .home-section .home-section-container h1,
  #home-container-content .home-section .home-section-container h2 {
    font-weight: bold;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #home-container-content .home-section .home-section-container h3 {
    padding-left: 2rem;
    padding-right: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }
  #home-container-content .home-section .home-section-container p {
    font-size: 3rem;
    line-height: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
    margin-top: -1rem;
  }
  #home-container-content .home-section .home-section-container h1 {
    font-size: 5rem;
    line-height: 5.5rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  #home-container-content .home-section .home-section-container h2 {
    font-size: 4rem;
    line-height: 4.5rem;
    padding-top: 6rem;
    padding-bottom: 2rem;
  }
  #home-container-content .home-section .home-section-container .home-cta {
    height: 12rem;
  }
  #home-container-content .home-section .home-section-container .home-cta .cta {
    font-size: 2rem;
  }
  #home-container-content .home-section .home-section-container .home-cta .cta.primary {
    padding: 1.5rem 3rem;
  }
  #home-container-content .home-section .home-section-container .home-content .animation,
  #home-container-content .home-section .home-section-container .home-content .text {
    padding: 1rem 0;
    min-width: 30rem;
  }
  #home-container-content .home-section .home-section-container .home-content .animation ul,
  #home-container-content .home-section .home-section-container .home-content .text ul {
    margin: 0 1.5rem !important;
  }
  #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 .animation {
    min-height: 35rem !important;
    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.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: 40rem;
    height: 100rem;
  }
  #home-container-content .home-section .home-section-container .home-content .fluent-text ul {
    margin: 0 1rem;
  }
  #home-container-content .home-section .home-section-container .home-content .fluent-text ul li {
    padding: 0.5rem 1rem;
  }
  #home-container-content .home-section .home-section-container .home-content .full-width-highlight-text ul {
    margin: 0 2rem;
  }
  #home-container-content .home-section .home-section-container .home-at-a-glance-items > div {
    flex-direction: column;
  }
  #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: 5rem !important;
    padding-right: 1.8rem !important;
    font-size: 2.2rem;
    line-height: 3rem;
    margin-top: 2rem;
  }
  #home-container-content .home-section .home-section-container .home-section-container-highlight-paragraph::before, #home-container-content .home-section .home-section-container .home-section-container-highlight-paragraph::after {
    left: 1.8rem !important;
    height: 92%;
  }
  #home-container-content .home-section .home-section-container .home-section-container-highlight-paragraph::before {
    top: 4%;
  }
  #home-container-content .home-section .home-section-container .home-section-container-highlight-paragraph::after {
    left: 2.5rem !important;
    bottom: 4%;
  }
  #home-container-content .home-section .home-section-container .home-at-a-glance-items p {
    padding-left: 0rem;
    padding-right: 0rem;
  }
  #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 {
    font-size: 3rem;
    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;
    font-size: 2.5rem;
  }
  #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;
  }
  footer {
    justify-content: center !important;
  }
}
@media only screen and (max-width: 400px) {
  #home-container-content .home-section .home-section-container h3 {
    padding-left: 0rem;
    padding-right: 0rem;
  }
  #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;
  }
}
.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: #007FFF;
  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 82vh;
  }
}
.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: #fff;
}
.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: #000000;
}
.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: 7vh 90vh 3vh;
  }
}
@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 */