html, body {
  height: 100%
}

body {
  box-sizing: border-box;
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 400;
  overflow-y: auto;
  overflow-x: hidden !important;
}

body,
main,
div,
p {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

main {
  background: #fff;
  min-height: 100vh;
  display: flex;
}

input {
  border: none !important;
}

.popup-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}

.popup-content {
  border-radius: 12px !important;
  max-width: 600px !important;
  border: none !important;
}

.custom-modal-content {
  background: #ffffff;
  padding: 35px 40px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  border-radius: 12px !important;
  max-height: calc(100vh - 137px - 34px) !important;
  min-width: 600px !important;
  overflow: auto;
}
.custom-modal-search-content {
  min-width: 955px !important;
  padding: 25px 25px !important;
  margin-left: calc(50vw - 435px) !important;
  margin-top: 137px !important;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgba(20, 20, 20, 0.75);
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: rgba(20, 20, 20, 0.75);
}

#platform-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#explorer-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  --menu-width: 95px;
  --expanded-menu-width: 220px;
}

#applications {
  display: flex;
  height: 100%;
  --menu-height: 75px;
  padding-top: var(--menu-height);
  overflow-y: hidden;
  width: 100%;
}

#applications > div {
  overflow-y: auto;
}

#single-spa-application\:\@geocomply\/explorer-app:has(div), #single-spa-application\:\@geocomply\/watchtower:has(div) {
  width: 100%;
}