@charset "UTF-8";
/***********************************************
	fcoo-maps-time.scss,

	(c) 2020, FCOO

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


************************************************/
/*
//BOURBON - http://bourbon.io/
@import "../bower_components/bourbon/core/bourbon";

//MODERNIZR-MIXIN - https://github.com/danielguillan/modernizr-mixin
@import "../bower_components/modernizr-mixin/stylesheets/modernizr";

//MATHSASS - https://github.com/terkel/mathsass
@import "../bower_components/mathsass/dist/math";

//MODERNIZR-SASS - http://github.com/FCOO/modernizr-scss
@import "../bower_components/modernizr-scss/dist/modernizr-scss";

//LEAFLET-MAP-SYNC https://github.com/fcoo/leaflet-map-sync
@import "../bower_components/leaflet-map-sync/src/leaflet-map-sync-outline-color";

*/
/************************************************************
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
*****************************************************************/
/*
//ZOOM MODERNIZR https://github.com/fcoo/leaflet-zoom-modernizr
@import "../bower_components/leaflet-zoom-modernizr/src/leaflet-zoom-modernizr";


//LEAFLET-BOOTSTRAP - mixin to create colors for bsMarker
@import "../bower_components/sass-color-helpers/stylesheets/color-helpers";
@import "../bower_components/leaflet-bootstrap-marker/src/leaflet-bootstrap-marker-mixin";

//LEAFLET-POLYLINE - mixin to create colors for polyline and polygon
@import "../bower_components/leaflet-polyline/src/leaflet-polyline-mixin";

*/
/**********************************************************
	fcoo-colors-include.scss,

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


    Contain all include for a packages using
    the scss-variables and scss-mixins of fcoo-colors

    The scss file must also include

    //COLOR-HELPER
    @import "../bower_components/sass-color-helpers/stylesheets/color-helpers";

    //LEAFLET-BOOTSTRAP-MARKER-MIXIN - mixin to create colors for marker (bsMarker)
    @import "../bower_components/leaflet-bootstrap-marker-mixin/dist/leaflet-bootstrap-marker-mixin";

    //LEAFLET-POLYLINE-MIXIN - mixin to create colors for polyline and polygon
    @import "../bower_components/leaflet-polyline-mixin/dist/leaflet-polyline-mixin";

**********************************************************/
/**********************************************************
	fcoo-colors-variables.scss,

	https://github.com/FCOO/fcoo-colors
	https://github.com/FCOO
**********************************************************/
/**********************************************************
The color scheme is from LinkedIn and shown in linkedin-palette-screen.pdf
**********************************************************/
/**********************************************************
Color for time = tree colors for the past, now, and the future
**********************************************************/
/**********************************************************
Application color
Defaults is = DALO color in "Forsvarsministeriets koncernfælles Designmanual 2018"
Can be changed by mixin application-base-color( new-color )
in src/_fcoo-color-mixin.scss
**********************************************************/
/**********************************************************
Environmental colors
Defines a number of colors and $-variables for different
parts of the environmental. Eq sky, cloud, sea etc.
**********************************************************/
/**********************************************************
    fcoo-colors-mixin.scss

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

**********************************************************/
/**********************************************************
Functions to get colors in different (relative) gradients
**********************************************************/
/**********************************************************
marker-and-polygon-color
create color-classes for bsMarker and bsPolyline
**********************************************************/
/**********************************************************
Application color
Defaults is = DALO color in "Forsvarsministeriets koncernfælles Designmanual 2018"
Can be changed by mixin application-base-color( new-color )
**********************************************************/
/***********************************************
fcoo-maps-colors-variables

Create all scss-variable with colors for different fcoo-maps layers

************************************************/
/****************************************************************************
COMMON
****************************************************************************/
/****************************************************************************
SEARCH RESULT
Color for search result
****************************************************************************/
/*Previous used colors:
$DarkGoldenRod: #B8860B;
$Chartreuse: #7FFF00;
$osm-search-result: darken(#FF6200, 5); //dark-dark-orange
*/
/**********************************************************
OBSERVATIONS
**********************************************************/
/**********************************************************
NAVIGATION AND NIORD
**********************************************************/
/****************************************************************************
HAVNELODS
****************************************************************************/
/****************************************************************************
LOCATION
****************************************************************************/
/****************************************************************************
YOUR POSITION
****************************************************************************/
.time-mode-FIXED .hide-for-time-mode-FIXED {
  display: none !important;
}
.time-mode-FIXED .show-for-no-time-mode-FIXED {
  display: none !important;
}

.no-time-mode-FIXED .show-for-time-mode-FIXED {
  display: none !important;
}
.no-time-mode-FIXED .hide-for-no-time-mode-FIXED {
  display: none !important;
}

html.time-mode-FIXED .bold-for-time-mode-FIXED {
  font-weight: bold !important;
}

.time-mode-RELATIVE .hide-for-time-mode-RELATIVE {
  display: none !important;
}
.time-mode-RELATIVE .show-for-no-time-mode-RELATIVE {
  display: none !important;
}

.no-time-mode-RELATIVE .show-for-time-mode-RELATIVE {
  display: none !important;
}
.no-time-mode-RELATIVE .hide-for-no-time-mode-RELATIVE {
  display: none !important;
}

html.time-mode-RELATIVE .bold-for-time-mode-RELATIVE {
  font-weight: bold !important;
}

.time-mode-SELECT .hide-for-time-mode-SELECT {
  display: none !important;
}
.time-mode-SELECT .show-for-no-time-mode-SELECT {
  display: none !important;
}

.no-time-mode-SELECT .show-for-time-mode-SELECT {
  display: none !important;
}
.no-time-mode-SELECT .hide-for-no-time-mode-SELECT {
  display: none !important;
}

html.time-mode-SELECT .bold-for-time-mode-SELECT {
  font-weight: bold !important;
}

.time-mode-ANIMATION .hide-for-time-mode-ANIMATION {
  display: none !important;
}
.time-mode-ANIMATION .show-for-no-time-mode-ANIMATION {
  display: none !important;
}

.no-time-mode-ANIMATION .show-for-time-mode-ANIMATION {
  display: none !important;
}
.no-time-mode-ANIMATION .hide-for-no-time-mode-ANIMATION {
  display: none !important;
}

html.time-mode-ANIMATION .bold-for-time-mode-ANIMATION {
  font-weight: bold !important;
}

.time-past-color-as-text-color {
  color: var(--fc-time-past-color);
}

.time-now-color-as-text-color {
  color: var(--fc-time-now-color);
}

.time-future-color-as-text-color {
  color: var(--fc-time-future-color);
}

.time-mode-MAIN {
  color: #cfe2ff;
}

.time-mode-MAIN-past {
  color: #6ea8fe;
}

.time-mode-MAIN-future {
  color: #0d6efd;
}

.time-is-past .btn.btn-jb.border-color-as-time {
  box-shadow: inset 0 0 0px 2px var(--fc-time-past-color) !important;
}
.time-is-now .btn.btn-jb.border-color-as-time {
  box-shadow: inset 0 0 0px 2px var(--fc-time-now-color) !important;
}
.time-is-future .btn.btn-jb.border-color-as-time {
  box-shadow: inset 0 0 0px 2px var(--fc-time-future-color) !important;
}

.bottom-panel-minimized .hide-for-bottom-panel-minimized {
  display: none !important;
}
.bottom-panel-minimized .show-for-no-bottom-panel-minimized {
  display: none !important;
}

.no-bottom-panel-minimized .show-for-bottom-panel-minimized {
  display: none !important;
}
.no-bottom-panel-minimized .hide-for-no-bottom-panel-minimized {
  display: none !important;
}

.bottom-panel-normal .hide-for-bottom-panel-normal {
  display: none !important;
}
.bottom-panel-normal .show-for-no-bottom-panel-normal {
  display: none !important;
}

.no-bottom-panel-normal .show-for-bottom-panel-normal {
  display: none !important;
}
.no-bottom-panel-normal .hide-for-no-bottom-panel-normal {
  display: none !important;
}

.bottom-panel-extended .hide-for-bottom-panel-extended {
  display: none !important;
}
.bottom-panel-extended .show-for-no-bottom-panel-extended {
  display: none !important;
}

.no-bottom-panel-extended .show-for-bottom-panel-extended {
  display: none !important;
}
.no-bottom-panel-extended .hide-for-no-bottom-panel-extended {
  display: none !important;
}

.show-for-phone-and-portrait-and-extended {
  display: none !important;
}

html.phone.portrait.bottom-panel-extended .show-for-phone-and-portrait-and-extended {
  display: flex !important;
}
html.phone.portrait.bottom-panel-extended .hide-for-phone-and-portrait-and-extended {
  display: none !important;
}

.leaflet-control.leaflet-button-box.forced-shown {
  visibility: visible !important;
  opacity: 0.8;
}
.leaflet-control.leaflet-button-box.forced-shown a.btn.hide-for-extended {
  display: inline-block !important;
}
.leaflet-control.leaflet-button-box.forced-shown a.btn.hide-for-extended * {
  display: inline-block !important;
}
.leaflet-control.leaflet-button-box.forced-shown a.btn.show-for-extended,
.leaflet-control.leaflet-button-box.forced-shown a.btn.show-for-extended * {
  display: none !important;
}

i.fa-clock-hour-0 {
  rotate: 0deg;
}

i.fa-clock-hour-1 {
  rotate: 30deg;
}

i.fa-clock-hour-2 {
  rotate: 60deg;
}

i.fa-clock-hour-3 {
  rotate: 90deg;
}

i.fa-clock-hour-4 {
  rotate: 120deg;
}

i.fa-clock-hour-5 {
  rotate: 150deg;
}

i.fa-clock-hour-6 {
  rotate: 180deg;
}

i.fa-clock-hour-7 {
  rotate: 210deg;
}

i.fa-clock-hour-8 {
  rotate: 240deg;
}

i.fa-clock-hour-9 {
  rotate: 270deg;
}

i.fa-clock-hour-10 {
  rotate: 300deg;
}

i.fa-clock-hour-11 {
  rotate: 330deg;
}

.leaflet-container.time-is-past .time-info-control i.fa-time-color {
  color: var(--fc-time-past-color);
}
.leaflet-container.time-is-now .time-info-control i.fa-time-color {
  color: var(--fc-time-now-color);
}
.leaflet-container.time-is-future .time-info-control i.fa-time-color {
  color: var(--fc-time-future-color);
}
.leaflet-container.time-is-past .time-info-control a {
  box-shadow: 0 0 0px 2px var(--fc-time-past-color), 0 0 0 3px black;
}
.leaflet-container.time-is-now .time-info-control a {
  box-shadow: 0 0 0px 2px var(--fc-time-now-color), 0 0 0 3px black;
}
.leaflet-container.time-is-future .time-info-control a {
  box-shadow: 0 0 0px 2px var(--fc-time-future-color), 0 0 0 3px black;
}
.leaflet-container .time-info-control a.disabled {
  box-shadow: none;
}
.leaflet-container .time-info-control a.disabled i {
  color: var(--bs-btn-disabled-color);
  font-weight: 300;
}

.time-is-past .btn.btn-jb.border-color-as-time {
  box-shadow: inset 0 0 0px 2px var(--fc-time-past-color) !important;
}
.time-is-now .btn.btn-jb.border-color-as-time {
  box-shadow: inset 0 0 0px 2px var(--fc-time-now-color) !important;
}
.time-is-future .btn.btn-jb.border-color-as-time {
  box-shadow: inset 0 0 0px 2px var(--fc-time-future-color) !important;
}

.bottom-panel-minimized .hide-for-bottom-panel-minimized {
  display: none !important;
}
.bottom-panel-minimized .show-for-no-bottom-panel-minimized {
  display: none !important;
}

.no-bottom-panel-minimized .show-for-bottom-panel-minimized {
  display: none !important;
}
.no-bottom-panel-minimized .hide-for-no-bottom-panel-minimized {
  display: none !important;
}

.bottom-panel-normal .hide-for-bottom-panel-normal {
  display: none !important;
}
.bottom-panel-normal .show-for-no-bottom-panel-normal {
  display: none !important;
}

.no-bottom-panel-normal .show-for-bottom-panel-normal {
  display: none !important;
}
.no-bottom-panel-normal .hide-for-no-bottom-panel-normal {
  display: none !important;
}

.bottom-panel-extended .hide-for-bottom-panel-extended {
  display: none !important;
}
.bottom-panel-extended .show-for-no-bottom-panel-extended {
  display: none !important;
}

.no-bottom-panel-extended .show-for-bottom-panel-extended {
  display: none !important;
}
.no-bottom-panel-extended .hide-for-no-bottom-panel-extended {
  display: none !important;
}

.show-for-phone-and-portrait-and-extended {
  display: none !important;
}

html.phone.portrait.bottom-panel-extended .show-for-phone-and-portrait-and-extended {
  display: flex !important;
}
html.phone.portrait.bottom-panel-extended .hide-for-phone-and-portrait-and-extended {
  display: none !important;
}

/*
Special show/hide classes when only one map and button-menu is open or closed
html.no-bottom-panel-open html.bottom-panel-open
html.no-single-maps-selected html.single-maps-selected  / multi-maps-selected
*/
html.single-maps-selected.bottom-panel-open .hide-for-single-map-and-bottom-panel-open {
  display: none !important;
}

/*
Special hide case:
On desktop in fixed-mode when not showing relative time and not showing utc =>
change the not shown relative and utc boxes from not visible to not displayed
This way the navigation arrows will get next to the box with current time

The utc-box is hidden in one of two ways: Show-utc = false or time-zome = utc.
*/
html.desktop.time-mode-FIXED.no-global-setting-showrelative.no-global-setting-showutc a.show-for-global-setting-showrelative-visibility, html.desktop.time-mode-FIXED.no-global-setting-showrelative.no-global-setting-showutc a.show-for-global-setting-showutc-visibility {
  display: none !important;
}
html.desktop.time-mode-FIXED.no-global-setting-showrelative.global-setting-timezone-utc a.show-for-global-setting-showrelative-visibility, html.desktop.time-mode-FIXED.no-global-setting-showrelative.global-setting-timezone-utc a.hide-for-global-setting-timezone-utc-visibility {
  display: none !important;
}

:root {
  --slider-button-left: 40%;
}

html.no-bottom-panel-minimized .btn.slider-button {
  background: none !important;
}
html.no-bottom-panel-minimized .btn.slider-button::before {
  content: "";
}

html.bottom-panel-minimized .btn.slider-button {
  background-size: 100% 0.5em !important;
  position: relative;
  overflow: hidden;
}
html.bottom-panel-minimized .btn.slider-button.slide-button-panning {
  background-size: 100% 0.75em !important;
}
html.bottom-panel-minimized .btn.slider-button::before {
  font-family: "Font Awesome 6 Pro";
  color: white;
  position: absolute;
  width: 1em;
  margin-left: -0.5em;
  left: var(--slider-button-left);
  bottom: -0.7em;
  display: inline-block;
}

html.bottom-panel-minimized .time-is-now .btn.slider-button::before {
  color: var(--fc-time-now-color);
}