/***********************************************
	fcoo-maps.scss,

	(c) 2020, FCOO

	https://github.com/FCOO/fcoo-maps
	https://github.com/FCOO


************************************************/
/***********************************************
leaflet-map-sync-outline-color
Variable with the color and style of outline
************************************************/
/************************************************************
INCLUDE-JQUERY-BOOTSTRAP-VARIABLES
USED IN FOR OTHER PACKAGES TO INCLUDE ALL SCSS-FILES NEEDED
TO HAVE ACCESS TO ALL BOOTSTRAP AND FCOO/JQUERY-BOOTSTRAP SCSS-VARIABLES
************************************************************/
/************************************************************
FUNCTIONS
************************************************************/
/***********************************************
FUNCTIONS TO CONVETRT FROM PX TO REM
To make it easier to design and calculate dimensions
the function rem defined
************************************************/
/************************************************************
HEADER, TITLE, AND FOOTER PADDING AND FONT-SIZE
Padding are set to button y-padding (moving text to the left)
************************************************************/
/************************************************************
BOOTSTRAP_COLORSTEXT

A copy of the colorws defined in bootstrap/scss_variables.scss
************************************************************/
/************************************************************
VARIABLES-BOOTSTRAP
Adjust Bootstrap 5 variables default values

Variables should follow the `$component-state-property-size` formula for
consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

All non-Bootstrap variables are prefixed with $jb-


************************************************************/
/***********************************************
Customize Bootstrap
See https://getbootstrap.com/docs/5.2/customize/options/ for description
/star star/ = Differnet from default
************************************************/
/**/
/**/
/**/
/***********************************************
OPACITY
************************************************/
/***********************************************
TEXT-COLOR
************************************************/
/***********************************************
BACKGROUND-COLOR
************************************************/
/***********************************************
BORDER-COLOR
************************************************/
/***********************************************
CHECKBOX, RADIO, AND SELECT
text-color and bg-color for selected item in <select> varies for different browsers.
text-color = rgb(255, 255, 255)   for all
    Browser     bg-color
    Chrome      rgb( 30, 144, 255)
    Firefox     rgb(  0, 120, 215)
    Safari      rgb( 30, 144, 255)
    Edge        rgb(195, 195, 195)  = gray

For checkbox and radio default Bootstrap uses:
text-color  = $form-check-input-checked-color    = $component-active-color = $white   = rgb(255, 25, 255);
bg-color    = $form-check-input-checked-bg-color = $component-active-bg    = $primary = rgb(13, 110, 253);

** BUT JQUERY-BOOTSTRAP USES SAME COLORS AS <SELECT> IN CHROME AND SAFARI **
************************************************/
/*
indeterminate colors = checkbox or checkbox-button with semi-selected state
Use $orange as bg-color and same bg-image as selected and standard border-color
*/
/***********************************************
PADDING AND FONT-SIZE
Padding and font-size for different sizes of
    buttons,
    accordion-, modal-, popup-, and tooltip-header/footer
************************************************/
/************************************************************
Modal and popover header and content
Bootstrap default = normal size
************************************************************/
/***********************************************
Accordion
***********************************************/
/***********************************************
Grid columns
Set the number of columns and specify the width of the gutters.

$grid-columns:                12 !default;
$grid-gutter-width:           1.5rem !default;
$grid-row-columns:            6 !default;

// Container padding
$container-padding-x: $grid-gutter-width !default;
***********************************************/
/***********************************************
Card
***********************************************/
/***********************************************
Form
***********************************************/
/***********************************************
Toast
***********************************************/
/***********************************************
Tables
For some (unknown) reason the padding of table cells
are done by scss-variables instead of var(...) ???
***********************************************/
/***********************************************
Nav, Pills and Tabs
***********************************************/
/***********************************************
BUTTONS
************************************************
SYNTAX AND RELATIONS IN BOOTSTRAP
    $input-btn-padding-x[-sm|-lg] = A Value
    $input-btn-padding-y[-sm|-lg] = A Value
    $input-btn-font-size[-sm|-lg] = A Value
    $border-radius[-sm|-lg]       = A Value

Used for button:
    $btn-padding-y[-sm|-lg]      : $input-btn-padding-y[-sm|-lg] !default;
    $btn-padding-x[-sm|-lg]      : $input-btn-padding-x[-sm|-lg] !default;
    $btn-font-size[-sm|-lg]      : $input-btn-font-size[-sm|-lg] !default;
    $btn-border-radius[-sm|-lg]  : $border-radius[-sm|-lg]       !default;

Used for input
    $input-padding-y[-sm|-lg]    : $input-btn-padding-y[-sm|-lg] !default;
    $input-padding-x[-sm|-lg]    : $input-btn-padding-x[-sm|-lg] !default;
    $input-font-size[-sm|-lg]    : $input-btn-font-size[-sm|-lg] !default;
    $input-border-radius[-sm|-lg]: $border-radius[-sm|-lg]       !default;

BOOTSTRAP 5 DEFAULT
    $input-btn-line-height  : 1.5
*/
/************************************************************
Including "size" xs as in Bootstrap 5
************************************************************/
/***********************************************
Adjust bootstrap-variables to only have dimensions
in integer px from rem
************************************************/
/************************************************************
Other adjustments
************************************************************/
/************************************************************
Make all font-size and margin for header (<h1>, <h2>,...<h6>)
releative to container (rem -> em)
Default (not changed): $font-size-base = $spacer = 1rem
************************************************************/
/************************************************************
Adjust dropdown-menu
************************************************************/
/************************************************************
Adjust modal
************************************************************/
/***********************************************

jquery-scroll-container-variables.scss

************************************************/
:root {
  --jsc-scroll-size: 10px;
  --jsc-scroll-padding: 10px;
  --jsc-scroll-auto-padding: 10px;
}

/************************************************************
VARIABLES

Defines scss-variables used in jquery-bootstrap
Some of these variables are based on Bootstrap variables
************************************************************/
/***********************************************
Checkbox
************************************************/
/***********************************************
Button
************************************************/
/***********************************************
Modal
************************************************/
/***********************************************
Button And Modal
Opacity for semi-transparent and transparent content using color-mix
************************************************/
/************************************************************
MIXIN
************************************************************/
/************************************************************
PROPERTY-VARIANT
Varients of different properties
************************************************************/
/************************************************************
HEADER and FOOTER-VARIANT
Adjust padding and font-size for header and footer
************************************************************/
/************************************************************
BUTTON-VARIANT
button-text-color-variant
button-border-color-variant
button-background-color-variant
Adjust text-, border-, and background-color for a button
************************************************************/
/************************************************************
TABLE COLORS
************************************************************/
/*****************************************************************
create-table-variant($postfix, $background, $default, $color)
Adjusted copy of Bootstrap table-variant($state, $background) to
create css-var to set colors in tables
*****************************************************************/
/*****************************************************************
incl-table-variant($postfix)
Include special version of Bootstrap table-var
The var must have been created by create-table-variant first
*****************************************************************/
/*****************************************************************
table-no-hover()
Prevent any hover effect
*****************************************************************/
/***********************************************
    _leaflet-zoom-modernizr.scss,

    (c) 2016, FCOO

    https://github.com/FCOO/leaflet-zoom-modernizr
    https://github.com/FCOO


************************************************/
/**********************************************************
LEAFLET MAPS
**********************************************************/
html, body {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
}

#map {
  height: 100%;
}

body .leaflet-grab {
  cursor: default;
}
body.leaflet-dragging .leaflet-grab,
body.leaflet-dragging .leaflet-grab .leaflet-interactive,
body.leaflet-dragging .leaflet-marker-draggable {
  cursor: move;
}

/**********************************************************
DIVERSE
**********************************************************/
.font-size-1-2rem {
  font-size: 1.2rem !important;
}

.transform-scale-0-5 {
  transform: scale(0.5);
}

.transform-scale-0-65 {
  transform: scale(0.65);
}

.transform-scale-1-2 {
  transform: scale(1.2);
}

.transform-scale-1-5 {
  transform: scale(1.5);
}

.icon-active {
  color: #0d6efd;
}

/**********************************************************
POPUP
**********************************************************/
.popover {
  --jb-header-color: var(--fcoo-app-text-color-50);
  --jb-header-bg: var(--fcoo-app-bg-color-50);
}

/****************************************************************************
Style for edit settings for graticule
****************************************************************************/
.graticule-label .hide-for-graticule-label {
  display: none !important;
}

.no-graticule-label .show-for-graticule-label {
  display: none !important;
}

/**********************************************************
HIDE/SHOW WHEN SINGLE OR MULTI-MAPS SELECTED
**********************************************************/
.multi-maps-selected .hide-for-multi-maps-selected {
  display: none !important;
}

.no-multi-maps-selected .show-for-multi-maps-selected {
  display: none !important;
}

.single-maps-selected .hide-for-single-maps-selected {
  display: none !important;
}

.no-single-maps-selected .show-for-single-maps-selected {
  display: none !important;
}

/**********************************************************
EDIT MULTI MAPS SETTINGS
**********************************************************/
.multi-maps-current {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  text-align: center;
  padding: 0;
  font-size: 137.5px;
  height: 115.5px;
}
.multi-maps-current i {
  position: relative;
  width: 100%;
  top: -11px;
}

/**********************************************************
EDIT SYNC MAPS SETTINGS
**********************************************************/
.text-multi-maps-current {
  color: #ff7800;
}

.bg-multi-maps-current {
  background-color: #ff7800;
}

.text-multi-maps-main {
  color: #3216B0;
}

.bg-multi-maps-main {
  background-color: #3216B0;
}

.border-multi-maps-main {
  border: 1px solid #3216B0 !important;
}

.map-sync-zoom-offset {
  margin: auto;
}
.map-sync-zoom-offset .multi-map-container .outline {
  display: none;
}
.map-sync-zoom-offset .multi-map-container.current-map {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: #ff7800;
}
.map-sync-zoom-offset .multi-map-container.current-map .outline {
  display: block;
  border: 2px dotted #3216B0;
  width: 50%;
  height: 50%;
}
.map-sync-zoom-offset .multi-map-container.main-map {
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 3px solid #3216B0 !important;
}
.map-sync-zoom-offset .multi-map-container.main-map .outline {
  display: block;
  border: 2px dotted #ff7800;
  width: 50%;
  height: 50%;
}

.container-stacked-icons .stacked-icon {
  /*
  fa-2xs	0.625em	10px
  fa-xs	0.75em	12px
  fa-sm	0.875em	14px
  fa-lg	1.25em	20px
  fa-xl	1.5em	24px
  fa-2xl	2em	32px
  */
}
.container-stacked-icons .stacked-icon.fa-1xzoom {
  font-size: 0.8em;
  margin-left: -1.125em;
  vertical-align: 0.05em;
}
.container-stacked-icons .stacked-icon.fa-2xzoom {
  font-size: 0.625em;
  margin-left: -1.3em;
  vertical-align: 0.2em;
}

/**********************************************************
EDIT BACKGROUND MAP SETTINGS
**********************************************************/
.background-image-container {
  margin: auto;
  width: 220px;
  height: 50px;
}
.background-image-container img {
  width: 220px;
  height: 50px;
}
.background-image-container img:not(:first-child) {
  margin-top: -50px;
}
.background-image-container img.coastline {
  border: 1px solid black;
  position: relative;
  z-index: 10;
}

/**********************************************************
STYLE FOR ICONS IN BUTTONS
Using fcoo.iconSub = function(mainIcon, subIcon, subClassPostfix, square) from fcoo-application
Each of the sub-icons may need a individual class to adjust size and position
**********************************************************/
.fa-sync-small-right-bottom {
  position: relative;
  right: -0.3125em;
  bottom: -0.4375em;
  font-size: 0.9em;
}

.fa-tally-small-right-bottom {
  position: relative;
  right: -0.1875em;
  bottom: -0.4375em;
  font-size: 0.85em;
}

/**********************************************************
STYLE FOR MAPLAYER MENU
**********************************************************/
/**********************************************************
STYLE FOR SEARCH RESULTS
**********************************************************/
.search-result-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.search-result-row .search-result-type {
  font-size: 0.65625rem;
  text-transform: capitalize;
}
.search-result-row .search-result-name {
  white-space: normal !important;
  font-weight: 500;
  font-size: 1.1em;
}
.search-result-row .search-result-display {
  white-space: normal !important;
  font-size: 0.85em;
}

/**********************************************************
ZOOM MODERNIZR https://github.com/fcoo/leaflet-zoom-modernizr
**********************************************************/
.leaflet-zoom-3 .show-for-leaflet-zoom-3 {
  display: initial !important;
}
.leaflet-zoom-3 .hide-for-leaflet-zoom-3 {
  display: none !important;
}

.no-leaflet-zoom-3 .hide-for-leaflet-zoom-3 {
  display: initial !important;
}
.no-leaflet-zoom-3 .show-for-leaflet-zoom-3 {
  display: none !important;
}

.leaflet-zoom-3-up .show-for-leaflet-zoom-3-up {
  display: initial !important;
}
.leaflet-zoom-3-up .hide-for-leaflet-zoom-3-up {
  display: none !important;
}

.no-leaflet-zoom-3-up .hide-for-leaflet-zoom-3-up {
  display: initial !important;
}
.no-leaflet-zoom-3-up .show-for-leaflet-zoom-3-up {
  display: none !important;
}

.leaflet-zoom-3-down .show-for-leaflet-zoom-3-down {
  display: initial !important;
}
.leaflet-zoom-3-down .hide-for-leaflet-zoom-3-down {
  display: none !important;
}

.no-leaflet-zoom-3-down .hide-for-leaflet-zoom-3-down {
  display: initial !important;
}
.no-leaflet-zoom-3-down .show-for-leaflet-zoom-3-down {
  display: none !important;
}

.leaflet-zoom-4 .show-for-leaflet-zoom-4 {
  display: initial !important;
}
.leaflet-zoom-4 .hide-for-leaflet-zoom-4 {
  display: none !important;
}

.no-leaflet-zoom-4 .hide-for-leaflet-zoom-4 {
  display: initial !important;
}
.no-leaflet-zoom-4 .show-for-leaflet-zoom-4 {
  display: none !important;
}

.leaflet-zoom-4-up .show-for-leaflet-zoom-4-up {
  display: initial !important;
}
.leaflet-zoom-4-up .hide-for-leaflet-zoom-4-up {
  display: none !important;
}

.no-leaflet-zoom-4-up .hide-for-leaflet-zoom-4-up {
  display: initial !important;
}
.no-leaflet-zoom-4-up .show-for-leaflet-zoom-4-up {
  display: none !important;
}

.leaflet-zoom-4-down .show-for-leaflet-zoom-4-down {
  display: initial !important;
}
.leaflet-zoom-4-down .hide-for-leaflet-zoom-4-down {
  display: none !important;
}

.no-leaflet-zoom-4-down .hide-for-leaflet-zoom-4-down {
  display: initial !important;
}
.no-leaflet-zoom-4-down .show-for-leaflet-zoom-4-down {
  display: none !important;
}

.leaflet-zoom-5 .show-for-leaflet-zoom-5 {
  display: initial !important;
}
.leaflet-zoom-5 .hide-for-leaflet-zoom-5 {
  display: none !important;
}

.no-leaflet-zoom-5 .hide-for-leaflet-zoom-5 {
  display: initial !important;
}
.no-leaflet-zoom-5 .show-for-leaflet-zoom-5 {
  display: none !important;
}

.leaflet-zoom-5-up .show-for-leaflet-zoom-5-up {
  display: initial !important;
}
.leaflet-zoom-5-up .hide-for-leaflet-zoom-5-up {
  display: none !important;
}

.no-leaflet-zoom-5-up .hide-for-leaflet-zoom-5-up {
  display: initial !important;
}
.no-leaflet-zoom-5-up .show-for-leaflet-zoom-5-up {
  display: none !important;
}

.leaflet-zoom-5-down .show-for-leaflet-zoom-5-down {
  display: initial !important;
}
.leaflet-zoom-5-down .hide-for-leaflet-zoom-5-down {
  display: none !important;
}

.no-leaflet-zoom-5-down .hide-for-leaflet-zoom-5-down {
  display: initial !important;
}
.no-leaflet-zoom-5-down .show-for-leaflet-zoom-5-down {
  display: none !important;
}

.leaflet-zoom-6 .show-for-leaflet-zoom-6 {
  display: initial !important;
}
.leaflet-zoom-6 .hide-for-leaflet-zoom-6 {
  display: none !important;
}

.no-leaflet-zoom-6 .hide-for-leaflet-zoom-6 {
  display: initial !important;
}
.no-leaflet-zoom-6 .show-for-leaflet-zoom-6 {
  display: none !important;
}

.leaflet-zoom-6-up .show-for-leaflet-zoom-6-up {
  display: initial !important;
}
.leaflet-zoom-6-up .hide-for-leaflet-zoom-6-up {
  display: none !important;
}

.no-leaflet-zoom-6-up .hide-for-leaflet-zoom-6-up {
  display: initial !important;
}
.no-leaflet-zoom-6-up .show-for-leaflet-zoom-6-up {
  display: none !important;
}

.leaflet-zoom-6-down .show-for-leaflet-zoom-6-down {
  display: initial !important;
}
.leaflet-zoom-6-down .hide-for-leaflet-zoom-6-down {
  display: none !important;
}

.no-leaflet-zoom-6-down .hide-for-leaflet-zoom-6-down {
  display: initial !important;
}
.no-leaflet-zoom-6-down .show-for-leaflet-zoom-6-down {
  display: none !important;
}

.leaflet-zoom-7 .show-for-leaflet-zoom-7 {
  display: initial !important;
}
.leaflet-zoom-7 .hide-for-leaflet-zoom-7 {
  display: none !important;
}

.no-leaflet-zoom-7 .hide-for-leaflet-zoom-7 {
  display: initial !important;
}
.no-leaflet-zoom-7 .show-for-leaflet-zoom-7 {
  display: none !important;
}

.leaflet-zoom-7-up .show-for-leaflet-zoom-7-up {
  display: initial !important;
}
.leaflet-zoom-7-up .hide-for-leaflet-zoom-7-up {
  display: none !important;
}

.no-leaflet-zoom-7-up .hide-for-leaflet-zoom-7-up {
  display: initial !important;
}
.no-leaflet-zoom-7-up .show-for-leaflet-zoom-7-up {
  display: none !important;
}

.leaflet-zoom-7-down .show-for-leaflet-zoom-7-down {
  display: initial !important;
}
.leaflet-zoom-7-down .hide-for-leaflet-zoom-7-down {
  display: none !important;
}

.no-leaflet-zoom-7-down .hide-for-leaflet-zoom-7-down {
  display: initial !important;
}
.no-leaflet-zoom-7-down .show-for-leaflet-zoom-7-down {
  display: none !important;
}

.leaflet-zoom-8 .show-for-leaflet-zoom-8 {
  display: initial !important;
}
.leaflet-zoom-8 .hide-for-leaflet-zoom-8 {
  display: none !important;
}

.no-leaflet-zoom-8 .hide-for-leaflet-zoom-8 {
  display: initial !important;
}
.no-leaflet-zoom-8 .show-for-leaflet-zoom-8 {
  display: none !important;
}

.leaflet-zoom-8-up .show-for-leaflet-zoom-8-up {
  display: initial !important;
}
.leaflet-zoom-8-up .hide-for-leaflet-zoom-8-up {
  display: none !important;
}

.no-leaflet-zoom-8-up .hide-for-leaflet-zoom-8-up {
  display: initial !important;
}
.no-leaflet-zoom-8-up .show-for-leaflet-zoom-8-up {
  display: none !important;
}

.leaflet-zoom-8-down .show-for-leaflet-zoom-8-down {
  display: initial !important;
}
.leaflet-zoom-8-down .hide-for-leaflet-zoom-8-down {
  display: none !important;
}

.no-leaflet-zoom-8-down .hide-for-leaflet-zoom-8-down {
  display: initial !important;
}
.no-leaflet-zoom-8-down .show-for-leaflet-zoom-8-down {
  display: none !important;
}

.leaflet-zoom-9 .show-for-leaflet-zoom-9 {
  display: initial !important;
}
.leaflet-zoom-9 .hide-for-leaflet-zoom-9 {
  display: none !important;
}

.no-leaflet-zoom-9 .hide-for-leaflet-zoom-9 {
  display: initial !important;
}
.no-leaflet-zoom-9 .show-for-leaflet-zoom-9 {
  display: none !important;
}

.leaflet-zoom-9-up .show-for-leaflet-zoom-9-up {
  display: initial !important;
}
.leaflet-zoom-9-up .hide-for-leaflet-zoom-9-up {
  display: none !important;
}

.no-leaflet-zoom-9-up .hide-for-leaflet-zoom-9-up {
  display: initial !important;
}
.no-leaflet-zoom-9-up .show-for-leaflet-zoom-9-up {
  display: none !important;
}

.leaflet-zoom-9-down .show-for-leaflet-zoom-9-down {
  display: initial !important;
}
.leaflet-zoom-9-down .hide-for-leaflet-zoom-9-down {
  display: none !important;
}

.no-leaflet-zoom-9-down .hide-for-leaflet-zoom-9-down {
  display: initial !important;
}
.no-leaflet-zoom-9-down .show-for-leaflet-zoom-9-down {
  display: none !important;
}

.leaflet-zoom-10 .show-for-leaflet-zoom-10 {
  display: initial !important;
}
.leaflet-zoom-10 .hide-for-leaflet-zoom-10 {
  display: none !important;
}

.no-leaflet-zoom-10 .hide-for-leaflet-zoom-10 {
  display: initial !important;
}
.no-leaflet-zoom-10 .show-for-leaflet-zoom-10 {
  display: none !important;
}

.leaflet-zoom-10-up .show-for-leaflet-zoom-10-up {
  display: initial !important;
}
.leaflet-zoom-10-up .hide-for-leaflet-zoom-10-up {
  display: none !important;
}

.no-leaflet-zoom-10-up .hide-for-leaflet-zoom-10-up {
  display: initial !important;
}
.no-leaflet-zoom-10-up .show-for-leaflet-zoom-10-up {
  display: none !important;
}

.leaflet-zoom-10-down .show-for-leaflet-zoom-10-down {
  display: initial !important;
}
.leaflet-zoom-10-down .hide-for-leaflet-zoom-10-down {
  display: none !important;
}

.no-leaflet-zoom-10-down .hide-for-leaflet-zoom-10-down {
  display: initial !important;
}
.no-leaflet-zoom-10-down .show-for-leaflet-zoom-10-down {
  display: none !important;
}

.leaflet-zoom-11 .show-for-leaflet-zoom-11 {
  display: initial !important;
}
.leaflet-zoom-11 .hide-for-leaflet-zoom-11 {
  display: none !important;
}

.no-leaflet-zoom-11 .hide-for-leaflet-zoom-11 {
  display: initial !important;
}
.no-leaflet-zoom-11 .show-for-leaflet-zoom-11 {
  display: none !important;
}

.leaflet-zoom-11-up .show-for-leaflet-zoom-11-up {
  display: initial !important;
}
.leaflet-zoom-11-up .hide-for-leaflet-zoom-11-up {
  display: none !important;
}

.no-leaflet-zoom-11-up .hide-for-leaflet-zoom-11-up {
  display: initial !important;
}
.no-leaflet-zoom-11-up .show-for-leaflet-zoom-11-up {
  display: none !important;
}

.leaflet-zoom-11-down .show-for-leaflet-zoom-11-down {
  display: initial !important;
}
.leaflet-zoom-11-down .hide-for-leaflet-zoom-11-down {
  display: none !important;
}

.no-leaflet-zoom-11-down .hide-for-leaflet-zoom-11-down {
  display: initial !important;
}
.no-leaflet-zoom-11-down .show-for-leaflet-zoom-11-down {
  display: none !important;
}

.leaflet-zoom-12 .show-for-leaflet-zoom-12 {
  display: initial !important;
}
.leaflet-zoom-12 .hide-for-leaflet-zoom-12 {
  display: none !important;
}

.no-leaflet-zoom-12 .hide-for-leaflet-zoom-12 {
  display: initial !important;
}
.no-leaflet-zoom-12 .show-for-leaflet-zoom-12 {
  display: none !important;
}

.leaflet-zoom-12-up .show-for-leaflet-zoom-12-up {
  display: initial !important;
}
.leaflet-zoom-12-up .hide-for-leaflet-zoom-12-up {
  display: none !important;
}

.no-leaflet-zoom-12-up .hide-for-leaflet-zoom-12-up {
  display: initial !important;
}
.no-leaflet-zoom-12-up .show-for-leaflet-zoom-12-up {
  display: none !important;
}

.leaflet-zoom-12-down .show-for-leaflet-zoom-12-down {
  display: initial !important;
}
.leaflet-zoom-12-down .hide-for-leaflet-zoom-12-down {
  display: none !important;
}

.no-leaflet-zoom-12-down .hide-for-leaflet-zoom-12-down {
  display: initial !important;
}
.no-leaflet-zoom-12-down .show-for-leaflet-zoom-12-down {
  display: none !important;
}

.leaflet-zoom-3-up .show-for-leaflet-zoom-3-up-visibility {
  visibility: initial !important;
}
.leaflet-zoom-3-up .hide-for-leaflet-zoom-3-up-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-3-up .hide-for-leaflet-zoom-3-up-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-3-up .show-for-leaflet-zoom-3-up-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-3-down .show-for-leaflet-zoom-3-down-visibility {
  visibility: initial !important;
}
.leaflet-zoom-3-down .hide-for-leaflet-zoom-3-down-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-3-down .hide-for-leaflet-zoom-3-down-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-3-down .show-for-leaflet-zoom-3-down-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-4-up .show-for-leaflet-zoom-4-up-visibility {
  visibility: initial !important;
}
.leaflet-zoom-4-up .hide-for-leaflet-zoom-4-up-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-4-up .hide-for-leaflet-zoom-4-up-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-4-up .show-for-leaflet-zoom-4-up-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-4-down .show-for-leaflet-zoom-4-down-visibility {
  visibility: initial !important;
}
.leaflet-zoom-4-down .hide-for-leaflet-zoom-4-down-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-4-down .hide-for-leaflet-zoom-4-down-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-4-down .show-for-leaflet-zoom-4-down-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-5-up .show-for-leaflet-zoom-5-up-visibility {
  visibility: initial !important;
}
.leaflet-zoom-5-up .hide-for-leaflet-zoom-5-up-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-5-up .hide-for-leaflet-zoom-5-up-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-5-up .show-for-leaflet-zoom-5-up-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-5-down .show-for-leaflet-zoom-5-down-visibility {
  visibility: initial !important;
}
.leaflet-zoom-5-down .hide-for-leaflet-zoom-5-down-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-5-down .hide-for-leaflet-zoom-5-down-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-5-down .show-for-leaflet-zoom-5-down-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-6-up .show-for-leaflet-zoom-6-up-visibility {
  visibility: initial !important;
}
.leaflet-zoom-6-up .hide-for-leaflet-zoom-6-up-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-6-up .hide-for-leaflet-zoom-6-up-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-6-up .show-for-leaflet-zoom-6-up-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-6-down .show-for-leaflet-zoom-6-down-visibility {
  visibility: initial !important;
}
.leaflet-zoom-6-down .hide-for-leaflet-zoom-6-down-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-6-down .hide-for-leaflet-zoom-6-down-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-6-down .show-for-leaflet-zoom-6-down-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-7-up .show-for-leaflet-zoom-7-up-visibility {
  visibility: initial !important;
}
.leaflet-zoom-7-up .hide-for-leaflet-zoom-7-up-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-7-up .hide-for-leaflet-zoom-7-up-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-7-up .show-for-leaflet-zoom-7-up-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-7-down .show-for-leaflet-zoom-7-down-visibility {
  visibility: initial !important;
}
.leaflet-zoom-7-down .hide-for-leaflet-zoom-7-down-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-7-down .hide-for-leaflet-zoom-7-down-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-7-down .show-for-leaflet-zoom-7-down-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-8-up .show-for-leaflet-zoom-8-up-visibility {
  visibility: initial !important;
}
.leaflet-zoom-8-up .hide-for-leaflet-zoom-8-up-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-8-up .hide-for-leaflet-zoom-8-up-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-8-up .show-for-leaflet-zoom-8-up-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-8-down .show-for-leaflet-zoom-8-down-visibility {
  visibility: initial !important;
}
.leaflet-zoom-8-down .hide-for-leaflet-zoom-8-down-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-8-down .hide-for-leaflet-zoom-8-down-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-8-down .show-for-leaflet-zoom-8-down-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-9-up .show-for-leaflet-zoom-9-up-visibility {
  visibility: initial !important;
}
.leaflet-zoom-9-up .hide-for-leaflet-zoom-9-up-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-9-up .hide-for-leaflet-zoom-9-up-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-9-up .show-for-leaflet-zoom-9-up-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-9-down .show-for-leaflet-zoom-9-down-visibility {
  visibility: initial !important;
}
.leaflet-zoom-9-down .hide-for-leaflet-zoom-9-down-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-9-down .hide-for-leaflet-zoom-9-down-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-9-down .show-for-leaflet-zoom-9-down-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-10-up .show-for-leaflet-zoom-10-up-visibility {
  visibility: initial !important;
}
.leaflet-zoom-10-up .hide-for-leaflet-zoom-10-up-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-10-up .hide-for-leaflet-zoom-10-up-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-10-up .show-for-leaflet-zoom-10-up-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-10-down .show-for-leaflet-zoom-10-down-visibility {
  visibility: initial !important;
}
.leaflet-zoom-10-down .hide-for-leaflet-zoom-10-down-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-10-down .hide-for-leaflet-zoom-10-down-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-10-down .show-for-leaflet-zoom-10-down-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-11-up .show-for-leaflet-zoom-11-up-visibility {
  visibility: initial !important;
}
.leaflet-zoom-11-up .hide-for-leaflet-zoom-11-up-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-11-up .hide-for-leaflet-zoom-11-up-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-11-up .show-for-leaflet-zoom-11-up-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-11-down .show-for-leaflet-zoom-11-down-visibility {
  visibility: initial !important;
}
.leaflet-zoom-11-down .hide-for-leaflet-zoom-11-down-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-11-down .hide-for-leaflet-zoom-11-down-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-11-down .show-for-leaflet-zoom-11-down-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-12-up .show-for-leaflet-zoom-12-up-visibility {
  visibility: initial !important;
}
.leaflet-zoom-12-up .hide-for-leaflet-zoom-12-up-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-12-up .hide-for-leaflet-zoom-12-up-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-12-up .show-for-leaflet-zoom-12-up-visibility {
  visibility: hidden !important;
}

.leaflet-zoom-12-down .show-for-leaflet-zoom-12-down-visibility {
  visibility: initial !important;
}
.leaflet-zoom-12-down .hide-for-leaflet-zoom-12-down-visibility {
  visibility: hidden !important;
}

.no-leaflet-zoom-12-down .hide-for-leaflet-zoom-12-down-visibility {
  visibility: initial !important;
}
.no-leaflet-zoom-12-down .show-for-leaflet-zoom-12-down-visibility {
  visibility: hidden !important;
}

/**********************************************************
HIDE/SHOW LAYER
**********************************************************/
.layer-visible .hide-for-layer-visible {
  display: none !important;
}

.no-layer-visible .show-for-layer-visible {
  display: none !important;
}

.no-layer-visible .hide-for-layer-visible {
  display: initial !important;
}

.no-layer-visible .modal-body.show-for-modal-extended > * {
  visibility: hidden;
}

/**********************************************************
POSITION-CONTROL
InfoBox in bsPositionControl: (bsp = bsPosition)

Style to show/hide contents and icons
when the cursor/map-center is over land or over water or
when loading or not visible
**********************************************************/
.no-bsPosition-on-land .show-for-bsPosition-on-land,
.no-bsPosition-on-water .show-for-bsPosition-on-water {
  display: none !important;
}

.bsp-color-info-outer {
  height: 4em;
  display: flex;
  padding: 0;
}
.bsp-color-info-outer *.header {
  color: initial;
}
.bsp-color-info-outer .bsp-color-info-outer-container {
  height: 100%;
  width: 100%;
}
.bsp-color-info-outer .bsp-color-info-outer-container .bsp-color-info-header {
  flex-shrink: 0;
  flex-grow: 0;
  text-align: center;
  border: none;
}
.bsp-color-info-outer .bsp-color-info-outer-container .bsp-color-info-header-sm {
  --bs-modal-content-font-size: 0.875rem;
  --bs-modal-padding-x: 0.25rem;
  --bs-modal-padding-y: 0.25rem;
  --bs-modal-padding: 0.25rem;
}
.bsp-color-info-outer .bsp-color-info-outer-container .bsp-color-info-header-sm .header-content {
  --bs-modal-header-padding-x: 0.25rem;
  --bs-modal-header-padding-y: 0.25rem;
  --bs-modal-header-padding: 0.25rem;
}
.bsp-color-info-outer .bsp-color-info-outer-container .bsp-color-info-header-sm .footer-content {
  --bs-footer-font-size: 0.75rem;
  --bs-footer-padding-y: 0.25rem;
  --bs-footer-padding-x: 0.25rem;
}
.bsp-color-info-outer .bsp-color-info-outer-container .bsp-color-info-header-xs {
  --bs-modal-content-font-size: 0.75rem;
  --bs-modal-padding-x: 0.125rem;
  --bs-modal-padding-y: 0.125rem;
  --bs-modal-padding: 0.125rem;
}
.bsp-color-info-outer .bsp-color-info-outer-container .bsp-color-info-header-xs .header-content {
  --bs-modal-header-padding-x: 0.125rem;
  --bs-modal-header-padding-y: 0.125rem;
  --bs-modal-header-padding: 0.125rem;
}
.bsp-color-info-outer .bsp-color-info-outer-container .bsp-color-info-header-xs .footer-content {
  --bs-footer-font-size: 0.6875rem;
  --bs-footer-padding-y: 0.125rem;
  --bs-footer-padding-x: 0.125rem;
}

.bsl-working .hide-for-bsl-working {
  display: none !important;
}
.bsl-working .show-for-no-bsl-working {
  display: none !important;
}

.no-bsl-working .show-for-bsl-working {
  display: none !important;
}
.no-bsl-working .hide-for-no-bsl-working {
  display: none !important;
}

/**********************************************************
COMPASS-CONTROL
Style for icons in bsCompassControl
Adjusted for new icons set in src/leaflet/leaflet.js
**********************************************************/
@media screen and (orientation: landscape) {
  .lb-compass-btn i.compass-device-landscape {
    transform: rotate(90deg) translateX(-0.2em) scale(0.4) !important;
  }
  html.orientation-secondary .lb-compass-btn i.compass-device-landscape {
    transform: rotate(-90deg) translateX(0.1em) scale(0.4) !important;
  }
  .lb-compass-btn i.compass-arrow {
    transform: rotate(90deg) translateY(-0.45em) scale(0.7) !important;
  }
  html.orientation-secondary .lb-compass-btn i.compass-arrow {
    transform: rotate(-90deg) translateY(-0.45em) scale(0.7) !important;
  }
}
@media screen and (orientation: portrait) {
  .lb-compass-btn i.compass-device-portrait {
    transform: rotate(0deg) translateY(-0.05em) scale(0.5) !important;
  }
  html.orientation-secondary .lb-compass-btn i.compass-device-portrait {
    transform: rotate(180deg) translateY(0.25em) scale(0.5) !important;
  }
  .lb-compass-btn i.compass-arrow {
    transform: rotate(0deg) translateY(-0.5em) scale(0.7) !important;
  }
  html.orientation-secondary .lb-compass-btn i.compass-arrow {
    transform: rotate(180deg) translateY(-0.5em) scale(0.7) !important;
  }
}
.no-device-orientation .lb-compass-btn .no-device-orientation-slash {
  transform: translateX(-0.1em) scaleX(0.75);
}

/**********************************************************
DATASET-VALUE
Style for elements created by Dataset and DatasetValue
See src/common/dataset.js
**********************************************************/
.show-for-dataset-value-is-null {
  display: none !important;
}

.dataset-value-is-null.hide-for-dataset-value-is-null {
  display: none !important;
}
.dataset-value-is-null .hide-for-dataset-value-is-null {
  display: none !important;
}
.dataset-value-is-null .show-for-dataset-value-is-null {
  display: block !important;
}