/***********************************************
	fcoo-havnelods.scss,

	(c) 2021, FCOO

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


************************************************/
/***********************************************************************

leaflet-bootstrap-marker-mixin.scss

*************************************************************************/
/***********************************************************************
marker-circle-color
Create style for bsMarkerCircle in different colors
*************************************************************************/
/***********************************************************************
lbm-circle-and-icon-classes
Create class for bsMarkerCircle named $name with color and color-border
*************************************************************************/
/***********************************************************************
lbm-marker-and-icon-classes
Create class for bsMarkerCircle named $name with color and color-border
*************************************************************************/
/***********************************************************************
fa-lbm-color
Create class for color and border-color used by L.bsMarkerAsIcon (and $.bsMarkerAsIcon)
to create fa-icon looking like the marker
*************************************************************************/
.lbm-type-circle.lbm-color-harbor-dk {
  background-color: #7CB82F;
  color: #000;
}
.lbm-type-circle.lbm-color-harbor-dk.lbm-transparent {
  background-color: rgba(124, 184, 47, 0.7);
}
.lbm-type-circle.lbm-color-harbor-dk.lbm-transparent.lbm-hover:hover {
  background-color: rgba(124, 184, 47, 0.9);
}
.lbm-type-circle.lbm-color-harbor-dk.lbm-shadow, .lbm-type-circle.lbm-color-harbor-dk.leaflet-drag-target, .lbm-type-circle.lbm-color-harbor-dk.lbm-hover:hover {
  box-shadow: 0px 0px 0px 5px rgba(124, 184, 47, 0.28);
}
.lbm-type-circle.lbm-color-harbor-dk:before {
  box-shadow: 0 0 6px 2px #7CB82F;
}
.lbm-type-circle.lbm-border-color-harbor-dk {
  border-color: #7CB82F;
}

.fa-lbm-color-harbor-dk {
  color: #7CB82F;
}

.fa-lbm-border-color-harbor-dk {
  color: #7CB82F;
}

.lbm-type-circle.lbm-color-harbor-gl {
  background-color: #60AA14;
  color: #000;
}
.lbm-type-circle.lbm-color-harbor-gl.lbm-transparent {
  background-color: rgba(96, 170, 20, 0.7);
}
.lbm-type-circle.lbm-color-harbor-gl.lbm-transparent.lbm-hover:hover {
  background-color: rgba(96, 170, 20, 0.9);
}
.lbm-type-circle.lbm-color-harbor-gl.lbm-shadow, .lbm-type-circle.lbm-color-harbor-gl.leaflet-drag-target, .lbm-type-circle.lbm-color-harbor-gl.lbm-hover:hover {
  box-shadow: 0px 0px 0px 5px rgba(96, 170, 20, 0.28);
}
.lbm-type-circle.lbm-color-harbor-gl:before {
  box-shadow: 0 0 6px 2px #60AA14;
}
.lbm-type-circle.lbm-border-color-harbor-gl {
  border-color: #60AA14;
}

.fa-lbm-color-harbor-gl {
  color: #60AA14;
}

.fa-lbm-border-color-harbor-gl {
  color: #60AA14;
}

.port_icon_adjust {
  position: relative;
  left: -1px;
}

.fa-normal-dot {
  position: relative;
  font-size: 1em;
  left: 1em;
  top: 1em;
}

.fa-small-dot {
  position: relative;
  font-size: 0.4em;
  left: -0.75em;
  top: -0.5em;
}

.fa-normal-square {
  position: relative;
  font-size: 7px;
  left: -2.5px;
  top: -2px;
}

.fa-small-square {
  position: relative;
  font-size: 6px;
  left: -3px;
  top: -2px;
}

.hl-annotation-colors {
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
}

.hl-annotation {
  border: 1px solid var(--bs-alert-border-color);
}
.modal-content.modal-extended .hl-annotation {
  margin: 0px var(--jsc-scroll-padding) !important;
}

.location-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.location-group > * {
  white-space: normal;
  text-align: center;
}
.location-group > *:not(:last-child) {
  margin-right: 1em !important;
}

td.annotation {
  background-color: var(--bs-alert-bg);
}