.userselectedremotesensing-header {
  grid-area: userselectedremotesensing-header;
}

.userselectedremotesensing-layer-select-component {
  grid-area: userselectedremotesensing-layer-select-component;
}

.userselectedremotesensing-viz-body {
  grid-area: userselectedremotesensing-viz-body;
}

.userselectedremotesensing-app-wrapper {
  display: grid;
  padding: 16px;
  grid-template-columns: 65% 35%;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "userselectedremotesensing-header userselectedremotesensing-layer-select-component"
    "userselectedremotesensing-viz-body userselectedremotesensing-viz-body"
  ;
}

@media (max-width: 1023px) {
  .userselectedremotesensing-app-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "userselectedremotesensing-header"
      "userselectedremotesensing-layer-select-component"
      "userselectedremotesensing-viz-body";
  }

  .userselectedremotesensing-layer-select-wrapper {
    padding-top: 0px !important;
  }

  .userselectedremotesensing-layer-select-wrapper:before {
    border-right: none !important;
  }

  .userselectedremotesensing-layer-layer-description {
    font-size: 14px !important;
    padding-bottom: 8px !important;
  }
}

.remotesensing-app-wrapper {
  padding: 0px;
}

.remotesensing-app-wrapper {
  height: 100%;
}

.remotesensing-header {
  display: none;
}

.remotesensing-legend {
  margin-top: 10px;
  margin-left: -4px;
}

.userselectedremotesensing-header {
  background-color: #F4F5F5;
  padding: 16px;
}

.userselectedremotesensing-subtitle {
  padding-bottom: 0px;
  text-transform: none;
}