/*******************************************************************************
 * Customization of the provided css from the different libs used by sepal_ui 
 */

/* replace the map panel elements on top */
.leaflet-pane,
.leaflet-top,
.leaflet-bottom {
  z-index: 2 !important;
}

/* remove the shadow from the widgets on the maps */
.leaflet-widgetcontrol {
  box-shadow: none;
}

/* remove extra padding on top of the content */
main.v-content {
  padding-top: 0px !important;
}

/* remove all the backgrounds from the controls and widget to be colored naturelly by the map */
.leaflet-control-container .vuetify-styles .v-application {
  background: rgb(0, 0, 0, 0);
}
.v-alert__wrapper .progress {
  background-color: transparent;
}

/* set the bar on top of the map (800) when set to fullscreen */
header.v-app-bar {
  z-index: 800 !important;
}

/* set the menu_content on top of the map when it's set to fullscreen */
.v-menu__content {
  z-index: 801 !important;
}

/* make sure the dialog remain on top of the bars (header and footer) */
.v-dialog__content {
  z-index: 802 !important;
}

/* make sure navigation drawers are always visibles when they exist */
nav.v-navigation-drawer {
  z-index: 900 !important;
}

/* create extra position for the leaflet map controls */
.leaflet-center {
  left: 50%;
  transform: translate(-50%, 0%);
}

.leaflet-middle {
  top: 50%;
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  transform: translate(0%, -50%);
}

.leaflet-center.leaflet-middle {
  transform: translate(-50%, -50%);
}
