body {
  background-color: lightgrey;
  overflow: hidden;
}

#droneMapContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.roleSelector {
  top: 10px;
  left: 10px;
  padding: 0 1em 1em 0.5em;
}

.roleSelectorHeading {
  margin: 1em 0 0.5em 1em;
}

.roleContainer {
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
  overflow: hidden;
}

.roleSelector:hover .roleContainer {
  max-height: 500px;
}

.roleSelectorEntryContainer {
  display: flex;
  justify-content: space-between;
  margin: 0.5em 0;
}

.roleSelectorEntry {
  margin-right: 1em;
}

.card {
  position: fixed;
  background-color: white;
  border-radius: 3px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
}

.selectedEntityCardContainer {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  box-sizing: border-box;
  padding: 24px;
  width: 360px;
  height: 100%;
  opacity: 1;
  transform: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.selectedEntityCardContainer.hidden {
  pointer-events: none;
  opacity: 0;
  transform: translateX(20px);
}

.sidebar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 2px 2px 12px 0px rgba(29, 38, 57, 0.08), 0px 0px 4px 0px rgba(29, 38, 57, 0.04);
  backdrop-filter: blur(4px);
}

.panelName {
  flex-grow: 1;
  display: flex;
  margin: 0;
  padding: 16px 20px 12px 20px;
  color: #1D2639;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  /* shadowBase */
  box-shadow: 0px 4px 20px 0px rgba(16, 24, 40, 0.08);
}

.sidebar > .iconButton {
  position: absolute;
  top: 16px;
  right: 20px;
}

.tabbedViewContainer {
  margin-top: 16px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.tabNamesContainer {
  display: flex;
  flex-direction: row;
  cursor: pointer;
}

.tabName {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

.tabName:hover {
  background-color: #EFEFEF;
}

.tabContentContainer {
  display: flex;
}

.tabContent {
  transform: none;
  transition: transform 0.15s ease;
  margin: 0.5em 1.5em;
}

.tooltipIcon {
  cursor: pointer;
}

.tooltipText {
  width: 400px;
  position: absolute;
  z-index: 1;
  padding: 0.5em 1em;
  visibility: hidden;
  background-color: dimgray;
  border-radius: 3px;
  transform: scale(0);
  transition: transform 0.15s ease-out;
  color: white;
}

.tooltipContainer:hover .tooltipText {
  visibility: visible;
  transform: scale(1);
}

/* cyrillic-ext */
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(resources/fonts/inter/UcCm3FwrK3iLTcvnUwkT9nA2.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(resources/fonts/inter/UcCm3FwrK3iLTcvnUwAT9nA2.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(resources/fonts/inter/UcCm3FwrK3iLTcvnUwgT9nA2.woff2) format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(resources/fonts/inter/UcCm3FwrK3iLTcvnUwcT9nA2.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(resources/fonts/inter/UcCm3FwrK3iLTcvnUwsT9nA2.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(resources/fonts/inter/UcCm3FwrK3iLTcvnUwoT9nA2.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(resources/fonts/inter/UcCm3FwrK3iLTcvnUwQT9g.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(resources/fonts/inter/UcCo3FwrK3iLTcvvYwYL8g.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(resources/fonts/inter/UcCo3FwrK3iLTcvmYwYL8g.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(resources/fonts/inter/UcCo3FwrK3iLTcvuYwYL8g.woff2) format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(resources/fonts/inter/UcCo3FwrK3iLTcvhYwYL8g.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(resources/fonts/inter/UcCo3FwrK3iLTcvtYwYL8g.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(resources/fonts/inter/UcCo3FwrK3iLTcvsYwYL8g.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(resources/fonts/inter/UcCo3FwrK3iLTcviYwY.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.addButton {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  padding: 0 0;
  cursor: pointer;
  transition: background-color 0.1s;
  box-shadow: 2px 2px 12px 0px rgba(29, 38, 57, 0.08), 0px 0px 4px 0px rgba(29, 38, 57, 0.04);
  backdrop-filter: blur(4px);
}

.addButton > svg {
  --iconFillColorPrimary: #135DF0;
  width: 72px;
  height: 72px;
}

.addButton:hover {
  background-color: #E0EBFF;
}

.addButton:active {
  background-color: #C7DAFF;
}

.addButton:disabled {
  pointer-events: none;
  opacity: 0.48;
}

.chip {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  background-repeat: no-repeat;
  border: none;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: inline-flex;
  cursor: auto;
  outline: none;
  background: var(--chipBackgroundColor);
  border: 1px solid var(--chipDefaultColor);
}

.chipRegular {
  --chipDefaultColor: #F2F4F7;
  --chipBackgroundColor: #FFF;
}

.chipGreen {
  --chipDefaultColor: #0FB70F;
  --chipBackgroundColor: #DFFDDF;
}

.chipRed {
  --chipDefaultColor: #D93020;
  --chipBackgroundColor: #FEEBEA;
}

.chipDisabled {
  opacity: 0.56;
}

.chipTextContainer {
  color: #343F54;
  text-align: center;
  font-size: 14px;
  font-family: Inter;
  font-weight: 500;
  line-height: 24px;
  word-wrap: break-word;
}

.chipIconContainer {
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.chipIconContainer > svg {
  width: 20px;
  height: 20px;
}

.customButton {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  background-repeat: no-repeat;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: inline-flex;
  cursor: pointer;
  outline: none;
  transition: background 0.1s, border 0.1s;
}

.customButton:disabled {
  cursor: auto;
  opacity: 0.48;
}

.customButtonPrimary {
  --customButtonDefaultColor: #104DC7;
  --customButtonHoverColor: #0D3FA3;
  --customButtonActiveColor: #0B3385;
}

.customButtonSecondary {
  --customButtonDefaultColor: #98A1B3;
  --customButtonHoverColor: #667085;
  --customButtonActiveColor: #475267;
}

.customButtonNegative {
  --customButtonDefaultColor: #D93020;
  --customButtonHoverColor: #B42518;
  --customButtonActiveColor: #912218;
}

.customButtonNoOutline {
  background: var(--customButtonDefaultColor);
}

.customButtonNoOutline .customButtonIconContainer > svg {
  --iconFillColorPrimary: white;
}

.customButtonNoOutline .customButtonTextContainer {
  color: white;
}

.customButtonNoOutline:hover {
  background: var(--customButtonHoverColor);
}

.customButtonNoOutline:active {
  background: var(--customButtonActiveColor);
}

.customButtonNoOutline:disabled {
  background: var(--customButtonDefaultColor);
}

.customButtonOutline {
  background: none;
  border: 1px solid var(--customButtonDefaultColor);
}

.customButtonOutline .customButtonIconContainer > svg {
  --iconFillColorPrimary: var(--customButtonDefaultColor);
  --iconFillTransitionPrimary: 0.1s;
}

.customButtonOutline .customButtonTextContainer {
  color: var(--customButtonDefaultColor);
}

.customButtonOutline:hover {
  background: none;
  border: 1px solid var(--customButtonHoverColor);
}

.customButtonOutline:hover .customButtonIconContainer > svg {
  --iconFillColorPrimary: var(--customButtonHoverColor);
}

.customButtonOutline:hover .customButtonTextContainer {
  color: var(--customButtonHoverColor);
}

.customButtonOutline:active {
  background: none;
  border: 1px solid var(--customButtonActiveColor);
}

.customButtonOutline:active .customButtonIconContainer > svg {
  --iconFillColorPrimary: var(--customButtonActiveColor);
}

.customButtonOutline:active .customButtonTextContainer {
  color: var(--customButtonActiveColor);
}

.customButtonOutline:disabled {
  background: none;
  border: 1px solid var(--customButtonDefaultColor);
}

.customButtonOutline:disabled .customButtonIconContainer > svg {
  --iconFillColorPrimary: var(--customButtonDefaultColor);
}

.customButtonOutline:disabled .customButtonTextContainer {
  color: var(--customButtonDefaultColor);
}

.customButtonIconContainer {
  width: 20px;
  height: 20px;
  padding: 3.33px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.customButtonTextContainer {
  text-align: center;
  font-size: 14px;
  font-family: Inter;
  font-weight: 500;
  line-height: 24px;
  word-wrap: break-word;
  transition: color 0.1s;
}

.customButtonIconContainer > svg {
  width: 20px;
  height: 20px;
}

.iconButton {
  all: unset;
  display: inline-flex;
  align-items: center;
  --iconButtonDefaultColor: #667085;
  --iconButtonHoverColor: #475267;
  --iconButtonActiveColor: #343F54;
  --iconButtonFillTransition: 0.1s;
}

.iconButton > svg {
  --iconFillColorPrimary: var(--iconButtonDefaultColor);
  --iconFillTransitionPrimary: var(--iconButtonFillTransition);
}

.iconButton > svg:hover {
  --iconFillColorPrimary: var(--iconButtonHoverColor);
}

.iconButton:active > svg {
  --iconFillColorPrimary: var(--iconButtonActiveColor);
}

.iconButton > svg:disabled {
  opacity: 0.48;
}

.iconButtonMedium {
  width: 24px;
  height: 24px;
  margin: 4px;
}

.iconButtonMedium > svg {
  width: 24px;
  height: 24px;
}

.iconButtonSmall {
  width: 20px;
  height: 20px;
  margin: 2px;
}

.iconButtonSmall > svg {
  width: 20px;
  height: 20px;
}

.inputFieldContainer {
  position: relative;
  display: flex;
  width: var(--inputFieldContainerWidth);
}

.inputFieldContainer > svg {
  position: absolute;
  top: 10px;
  left: 12px;
  height: 20px;
  width: 20px;
  --iconFillColorPrimary: #98A1B3;
}

.inputField {
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  line-height: 24px;
  --inputFieldMainTextColor:#343F54;
  --inputFieldMainFontWeight: 500;
  --inputFieldPlaceholderTextColor:#667085;
  --inputFieldPlaceholderFontWeight: 400;
}

.inputField {
  --inputFieldMainBorderColor: #F2F4F7;
  --inputFieldFocusBorderColor: #7AA7FF;
  --inputFieldInvalidBorderColor: #D93020;
  --inputFieldDisabledBorderColor: #E4E7EC;
}

.inputField {
  --inputFieldMainBackgroundColor: #FFF;
  --inputFieldDisabledBackgroundColor: #F2F4F7;
}

.inputField {
  min-width: 120px;
  flex: 1;
  background: var(--inputFieldMainBackgroundColor);
  padding: 7px 39px 7px 11px;
  border-radius: 8px;
  border: 1px solid var(--inputFieldMainBorderColor);
  transition: border-color 0.1s;
  color: var(--inputFieldMainTextColor);
  font-weight: var(--inputFieldMainFontWeight);
}

.inputFieldWithIcon {
  padding: 7px 39px;
}

.inputField:placeholder-shown + button {
  display: none;
}

.inputField:focus {
  outline: none;
  border-color: var(--inputFieldFocusBorderColor);
}

.inputField::placeholder {
  color: var(--inputFieldPlaceholderTextColor);
  font-weight: var(--inputFieldPlaceholderFontWeight);
}

.inputField:invalid {
  border-color: var(--inputFieldInvalidBorderColor);
}

.inputField:disabled {
  outline: none;
  border-color: var(--inputFieldDisabledBorderColor);
  background: var(--inputFieldDisabledBackgroundColor);
}

.inputFieldContainer > .iconButton {
  position: absolute;
  top: 8px;
  right: 12px;
}

.inputFormContainer {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.inputFormHintText, .inputFormLabelText {
  display: inline-block;
  width: auto;
  height: auto;
  align-self: stretch;
  --inputFormLabelColor: #475267;
  --inputFormHintColor: #667085;
  --inputFormLabelFontSize: 14px;
  --inputFormHintFontSize: 12px;
  --inputFormLabelLineHeight: 24px;
  --inputFormHintLineHeight: 16px;
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
}

.inputFormLabelText {
  color: var(--inputFormLabelColor);
  font-size: var(--inputFormLabelFontSize);
  line-height: var(--inputFormLabelLineHeight);
}

.inputFormHintText {
  color: var(--inputFormHintColor);
  font-size: var(--inputFormHintFontSize);
  line-height: var(--inputFormHintLineHeight);
}

.mapNotationWidget {
  all: unset;
  display: inline-flex;
  align-items: center;
  border-radius: 40px;
  background: var(--mapNotationWidgetBackgroundColor);
  --mapNotationWidgetBackgroundColor: rgba(19, 93, 240, 0.80);
  --mapNotationWidgetShadowColor: rgba(255, 255, 255, 0.24);
  --mapNotationWidgetIconLightColor: #A3C2FF;
  --mapNotationWidgetIconDarkColor: #FFFFFF;
  backdrop-filter: blur(2px);
  transition: box-shadow 0.25s ease-in-out, height 0.15s ease-in-out, width 0.15s ease-in-out;
}

.mapNotationWidgetBlue {
  --mapNotationWidgetBackgroundColor: rgba(19, 93, 240, 0.80);
  --mapNotationWidgetShadowColor: rgba(255, 255, 255, 0.24);
  --mapNotationWidgetIconLightColor: #A3C2FF;
  --mapNotationWidgetIconDarkColor: #FFFFFF;
}

.mapNotationWidgetWhite {
  --mapNotationWidgetBackgroundColor: rgba(255, 255, 255, 0.80);
  --mapNotationWidgetShadowColor: rgba(19, 93, 240, 0.24);
  --mapNotationWidgetIconLightColor: #135DF0;
  --mapNotationWidgetIconDarkColor: #343F54;
}

.mapNotationWidget:hover {
  box-shadow: 0 0 0 16px var(--mapNotationWidgetShadowColor);
}

.mapNotationWidget > svg {
  transition: margin 0.15s ease-in-out, height 0.15s ease-in-out, width 0.15s ease-in-out;
  --iconFillColorPrimary: var(--mapNotationWidgetIconLightColor);
  --iconFillColorSecondary: var(--mapNotationWidgetIconDarkColor);
}

.mapNotationWidgetLarge {
  width: 48px;
  height: 48px;
}

.mapNotationWidgetLargeActive {
  width: 64px;
  height: 64px;
}

.mapNotationWidgetLarge > svg {
  width: 28px;
  height: 28px;
  margin: 10px;
}

.mapNotationWidgetLargeActive > svg {
  width: 40px;
  height: 40px;
  margin: 12px;
}

.mapNotationWidgetMedium {
  width: 32px;
  height: 32px;
}

.mapNotationWidgetMediumActive {
  width: 48px;
  height: 48px;
}

.mapNotationWidgetMedium > svg {
  width: 24px;
  height: 24px;
  margin: 4px;
}

.mapNotationWidgetMediumActive > svg {
  width: 36px;
  height: 36px;
  margin: 6px;
}

.searchFieldContainer {
  position: relative;
  display: flex;
  width: var(--searchFieldContainerWidth);
}

.searchFieldContainer > svg {
  position: absolute;
  top: 12px;
  left: 20px;
  height: 24px;
  width: 24px;
  --iconFillColorPrimary: #98A1B3;
}

.searchFieldInput {
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  --searchFieldMainTextColor:#343F54;
  --searchFieldMainFontWeight: 500;
  --searchFieldPlaceholderTextColor:#667085;
  --searchFieldPlaceholderFontWeight: 400;
}

.searchFieldInput {
  --searchFieldMainBorderColor: #F2F4F7;
  --searchFieldFocusBorderColor: #7AA7FF;
  --searchFieldInvalidBorderColor: #D93020;
  --searchFieldDisabledBorderColor: #E4E7EC;
}

.searchFieldInput {
  --searchFieldMainBackgroundColor: #FFF;
  --searchFieldDisabledBackgroundColor: #F2F4F7;
}

.searchFieldInput {
  min-width: 120px;
  flex: 1;
  background: var(--searchFieldMainBackgroundColor);
  padding: 11px 79px 11px 55px;
  border-radius: 8px;
  border: 1px solid var(--searchFieldMainBorderColor);
  transition: border-color 0.1s;
  color: var(--searchFieldMainTextColor);
  font-weight: var(--searchFieldMainFontWeight);
}

.searchFieldInput:placeholder-shown + .searchFieldButtonsContainer > *:first-child {
  display: none;
}

.searchFieldInput:focus {
  outline: none;
  border-color: var(--searchFieldFocusBorderColor);
}

.searchFieldInput::placeholder {
  color: var(--searchFieldPlaceholderTextColor);
  font-weight: var(--searchFieldPlaceholderFontWeight);
}

.searchFieldInput:invalid {
  border-color: var(--searchFieldInvalidBorderColor);
}

.searchFieldInput:disabled {
  outline: none;
  background: var(--searchFieldDisabledBackgroundColor);
  border-color: var(--searchFieldDisabledBorderColor);
}

.searchFieldButtonsContainer {
  all: unset;
  position: absolute;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  height: 24px;
  width: 56px;
  top: 12px;
  right: 20px;
}

.selectItem {
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: inline-flex;
  border: none;
  background: #FFFFFF;
  background-repeat: no-repeat;
  cursor: pointer;
  outline: none;
  transition: background 0.1s;
  width: 100%;
}

.selectItem:disabled {
  cursor: auto;
  opacity: 0.48;
}

.selectItem:hover {
  background: #F0F5FF;
}

.selectItem:active {
  background: #E0EBFF;
}

.selectItem:disabled:hover {
  background: #FFFFFF;
}

.selectItem:disabled:active {
  background: #FFFFFF;
}

.selectItemIconContainer {
  width: 24px;
  height: 24px;
  position: relative;
}

.selectItemIconContainer > svg {
  width: 24px;
  height: 24px;
  --iconFillColorPrimary: #667085;
  --iconFillColorSecondary: #135DF0;
}

.selectItemActiveIconContainer {
  width: 24px;
  height: 24px;
  position: relative;
}

.selectItemActiveIconContainer > svg {
  width: 24px;
  height: 24px;
  --iconFillColorPrimary: #135DF0;
}

.selectItemTextContainer {
  flex: 1 1 0;
  color: #343F54;
  font-size: 14px;
  font-family: Inter;
  font-weight: 500;
  line-height: 24px;
  word-wrap: break-word;
  text-align: left;
}

.selectList {
  padding: 8px;
  background: white;
  box-shadow: 0px 4px 20px rgba(16, 24, 40, 0.08);
  border-radius: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  display: inline-flex;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #D0D4DD #FFFFFF;
}

.selectListItem {
  align-self: stretch;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.textAreaContainer {
  position: relative;
  display: flex;
  width: var(--textAreaContainerWidth);
  height: var(--textAreaContainerHeight);
}

.textArea {
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  line-height: 24px;
  --textAreaMainTextColor:#343F54;
  --textAreaMainFontWeight: 500;
  --textAreaPlaceholderTextColor:#667085;
  --textAreaPlaceholderFontWeight: 400;
}

.textArea {
  --textAreaMainBorderColor: #F2F4F7;
  --textAreaFocusBorderColor: #7AA7FF;
  --textAreaInvalidBorderColor: #D93020;
  --textAreaDisabledBorderColor: #E4E7EC;
}

.textArea {
  --textAreaMainBackgroundColor: #FFF;
  --textAreaDisabledBackgroundColor: #F2F4F7;
}

.textArea {
  min-width: 120px;
  flex: 1;
  resize: none;
  overflow-y: hidden;
  background: var(--textAreaMainBackgroundColor);
  padding: 7px 43px 31px 11px;
  border-radius: 8px;
  border: 1px solid var(--textAreaMainBorderColor);
  transition: border-color 0.1s;
  color: var(--textAreaMainTextColor);
  font-weight: var(--textAreaMainFontWeight);
}

.textArea:placeholder-shown + button {
  display: none;
}

.textArea:focus {
  outline: none;
  border-color: var(--textAreaFocusBorderColor);
}

.textArea::placeholder {
  color: var(--textAreaPlaceholderTextColor);
  font-weight: var(--textAreaPlaceholderFontWeight);
}

.textArea:invalid {
  border-color: var(--textAreaInvalidBorderColor);
}

.textArea:disabled {
  outline: none;
  background: var(--textAreaDisabledBackgroundColor);
  border-color: var(--textAreaDisabledBorderColor);
}

.textAreaContainer > .iconButton {
  position: absolute;
  top: 8px;
  right: 12px;
}

.mapInfo {
  --mapInfoLineColorDefault: #135DF0;
  --mapInfoLineColorPassed: #0B3385;
  --mapInfoLineColorDisconnected: #F04738;
}

.mapInfo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 192px;
  background: rgba(255, 255, 255, 0.8);
  padding: 12px 16px;
  border-radius: 16px;
  box-shadow: 2px 2px 12px 0px rgba(29, 38, 57, 0.08), 0px 0px 4px 0px rgba(29, 38, 57, 0.04);
  backdrop-filter: blur(4px);
}

.mapInfoLineText {
  flex: 1 0 0;
  color: #475267;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.mapInfoLineDisconnected, .mapInfoLinePassed, .mapInfoLineDefault {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mapInfoLineDisconnected > svg, .mapInfoLinePassed > svg, .mapInfoLineDefault > svg {
  width: 20px;
  height: 4px;
}

.mapInfoLineDefault > svg {
  --iconFillColorPrimary: var(--mapInfoLineColorDefault) ;
}

.mapInfoLinePassed > svg {
  --iconFillColorPrimary: var(--mapInfoLineColorPassed);
}

.mapInfoLineDisconnected > svg {
  --iconFillColorPrimary: var(--mapInfoLineColorDisconnected);
}

.mapSearchField > .searchFieldContainer > .searchFieldInput {
  --searchFieldMainBackgroundColor: rgba(255, 255, 255, 0.80);
  border-radius: 16px;
  box-shadow: 2px 2px 12px 0px rgba(29, 38, 57, 0.08), 0px 0px 4px 0px rgba(29, 38, 57, 0.04);
}

.zoomButtonContainer {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 16px;
  background: var(--components-zoomControl-bg, rgba(255, 255, 255, 0.8));
  box-shadow: 2px 2px 12px 0px rgba(29, 38, 57, 0.08), 0px 0px 4px 0px rgba(29, 38, 57, 0.04);
  backdrop-filter: blur(4px);
}

.zoomButtonSeparatorContainer {
  display: flex;
  height: 4px;
  padding: 0px 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}

.zoomButtonSeparatorElement {
  height: 1px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 4px;
  background: #E4E7EC;
}

.zoomButtonContainer > .iconButton {
  width: 32px;
  height: 32px;
  margin: 12px;
}

.zoomButtonContainer > .iconButton > svg {
  width: 32px;
  height: 32px;
}

.mapInfo {
  position: absolute;
  bottom: 24px;
  left: 24px;
}

.mapSearchField {
  position: absolute;
  top: 24px;
  left: 24px;
}

.zoomButtonContainer {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translate(0, -50%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
}

.selectedEntityCardContainer:not(.hidden) + .zoomButtonContainer {
  pointer-events: none;
  opacity: 0;
  transform: translateX(-40px, -50%);
}

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