// variables

$headerBackgroundColor1: #404751
$headerBackgroundColor2: lighten($headerBackgroundColor1, 15%) // #626c7b
$headerBackgroundColor3: lighten($headerBackgroundColor1, 30%) // #8993a0
$headerBackgroundColor35: lighten($headerBackgroundColor1, 35%) // #
$headerBackgroundColor4: lighten($headerBackgroundColor1, 45%) // #b3bac3
$headerBackgroundColor5: lighten($headerBackgroundColor1, 60%) // #d9dde1
$headerBackgroundColor6: lighten($headerBackgroundColor1, 68%) // #

$headerBackgroundColor2_0: lighten($headerBackgroundColor1, 14%) // only for chessboard backgroud
$headerBackgroundColor2_1: lighten($headerBackgroundColor1, 16%) // only for chessboard backgroud

$colorOrange: #f08000

$headerShadowSize: 5px

$headerHeight:   32px
$menuButtonWidth: 32px
$menuButtonHeight: 28px
$menuButtonIconSize: $menuButtonHeight - 10px
$menuButtonPaddingX: 0px
$menuButtonPaddingY: 0px

$buttonBorderRadius: 2px

// Map controls

$mapControlButtonWidth:    28px
$mapControlBorderWidth:     1px
$mapControlButtonHeight:   26px
$mapControlButtonIconSize: 14px

$footerHeight: 18px


//================================================================
// Search target icon does not capture mouse events
//================================================================

.myMarker
    pointer-events: none !important

//================================================================
// Dropdown menu
//================================================================

.blinkingText
  animation: blinker 0.5s linear infinite

@keyframes blinker
    50%
        color: $colorOrange

.textHighlight
    color: $colorOrange

//================================================================
// Dropdown menu
//================================================================

$dropdownLinkHeight: 26px
$dropdownMenuBoxshadow: 8px 8px 16px 0px rgba(0,0,0,0.3)
$dropdownMenuBorderradius: 0px 5px 5px 5px

.dropdown
    position: relative
    display: inline-block

.dropdown-content
    display: none
    position: absolute
    background-color: $headerBackgroundColor2
    min-width: 200px
    box-shadow: $dropdownMenuBoxshadow
    z-index: 1
    border-radius: $dropdownMenuBorderradius
    overflow: hidden

#dropdown-content-about
    //min-width: 250px


.dropdown-content ul
    list-style-type: none
    margin: 0
    padding: 0

.dropdown-content li
    font-size: smaller
    color: #ffffff
    height: $dropdownLinkHeight
    padding-top: 10px
    padding-left: $menuButtonWidth
    text-decoration: none
    display: block
    cursor: pointer

    border-bottom: 1px solid lighten($headerBackgroundColor1, 10%)

    // background image
    background-size: $menuButtonIconSize $menuButtonIconSize
    background-repeat: no-repeat
    background-position: ($menuButtonWidth - $menuButtonIconSize)/2 center // aligner avec l'icon du haut

.dropdown-content li:last-child
    border-width: 0px

.dropdown-content li:hover
    background-color: $headerBackgroundColor3

.dropdown-content li.comingsoon
    color: $headerBackgroundColor4
    //opacity: 0.5
    cursor: auto

#aboutLink, #newPopupAbout .newModalTitle
    background-image: url('../imgs/icons/about.svg')

#howDoesItWorkLink, #newPopupHowDoesItWork .newModalTitle
    background-image: url('../imgs/icons/science.svg') //innovation.svg')

#analysisLink
    background-image: url('../imgs/icons/analysis.svg')

#neuralNetworkLink
    background-image: url('../imgs/icons/network.svg')

#contactLink, #newPopupContact .newModalTitle
    background-image: url('../imgs/icons/contact.svg')

#githubLink
    background-image: url('../imgs/icons/github-logo.svg')

#creditsLink, #newPopupCredits .newModalTitle
    background-image: url('../imgs/icons/copyrights.svg')

#linksLink, #newPopupLinks .newModalTitle, #shareLink, #newPopupShareLink .newModalTitle
    background-image: url('../imgs/icons/link.svg')

#newPopupDonate .newModalTitle
  background-image: url("../imgs/icons/heart.svg")

#mobileVersionLink
    background-image: url('../imgs/icons/web.svg')

#androidAppLink
    background-image: url('../imgs/icons/android.svg')

#buyGoodWeatherLink
    background-image: url('../imgs/icons/buy.svg')

#apiWhatIsItLink, #newPopupAboutApi .newModalTitle
    background-image: url('../imgs/icons/about.svg')

#apiKeyLink
    background-image: url('../imgs/icons/key.svg')

#statisticsLink, #newPopupStatistics .newModalTitle
    background-image: url('../imgs/icons/analytics.svg')

#colorBlindLink
  background-image: url("../imgs/icons/eye.svg")

#shareFacebookLink
  background-image: url("../imgs/icons/facebook-logo.svg")

.dropdown:hover .dropdown-content 
    display: block

.dropdown:hover .menuButton
    background-color: $headerBackgroundColor2
    border-radius: $buttonBorderRadius $buttonBorderRadius 0px 0px

//================================================================
// 
//================================================================


.dropdown2
    position: relative
    display: inline-block

.dropdown2:hover .dropdown-content2
    display: block


.dropdown2.mapControlButton:hover
    border-radius: $buttonBorderRadius 0px 0px $buttonBorderRadius

.dropdown-content2
    display: none
    position: absolute
    width: 150px
    left: $mapControlButtonWidth
    background-color: $headerBackgroundColor2
    box-shadow: $dropdownMenuBoxshadow
    border-radius: $dropdownMenuBorderradius
    overflow: hidden
    color: #FFFFFF

.dropdown-content2 ul
    list-style-type: none
    margin: 0
    padding: 0

.dropdown-content2 li:last-child
    border-width: 0px

.dropdown-content2 li
    font-size: smaller
    color: #ffffff
    height: $dropdownLinkHeight
    padding-top: 10px
    padding-left: 32px
    text-decoration: none
    display: block
    cursor: pointer

    border-bottom: 1px solid lighten($headerBackgroundColor1, 10%)

    // background image
    background-size: 14px 14px
    background-repeat: no-repeat
    background-position: 10px center // aligner avec l'icon du haut

.dropdown-content2 li:hover
    background-color: $headerBackgroundColor3


//================================================================
// 
//================================================================

html, body 
    height: 100%
    margin:0
    padding:0
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
    overflow: hidden


#header 
    position: absolute
    height: $headerHeight
    width: calc(100% - #{$mapControlButtonWidth})
    left: $mapControlButtonWidth
    background-color: $headerBackgroundColor1

    display: flex
    flex-direction: row
    box-shadow: 1px 1px $headerShadowSize black
    z-index: 10000

#footer
    position: absolute
    bottom: 0px
    left: 0px
    height: $footerHeight
    width: 100%
    background-color: $headerBackgroundColor1
    box-shadow: 1px -1px $headerShadowSize black
    z-index: 999

    display: flex
    flex-direction: row
    justify-content: center

#version > a
    position: absolute
    right: 0px
    top: 3px
    color: $headerBackgroundColor3
    font-size: 11px
    text-decoration: none

#version > a:hover
    color: #ffffff

#topLeftShadowHider
    position: absolute
    left: 0px
    top: 0px
    height: $headerHeight
    width: $mapControlButtonWidth + 2*$mapControlBorderWidth + 4px
    background-color: $headerBackgroundColor1
    border-radius: 13px 0px 0px 0px
    z-index: 10002

//================================================================
// Menu buttons
//================================================================

#menuButtonsBar
    padding-left: 7px
    display: flex

.menuButton
    padding: $menuButtonPaddingY $menuButtonPaddingX $menuButtonPaddingY $menuButtonPaddingX

    width:  $menuButtonWidth
    height: $menuButtonHeight
    margin-top: ($headerHeight - $menuButtonHeight - 2*$menuButtonPaddingY) / 2
    border-radius: $buttonBorderRadius
    // background img
    background-size: $menuButtonIconSize $menuButtonIconSize
    background-repeat: no-repeat
    background-position: center

.menuButton:hover 
    background-color: $headerBackgroundColor2
    
    //border-style: solid
    //border-width: 1px 1px 0px 1px
    //border-color: black
    //border-radius: 5px 5px 0px 0px

#menuButtonInfo
    background-image: url('../imgs/icons/information.svg')

#menuButtonScience
    background-image: url('../imgs/icons/test.svg') // test-tube.svg  science.svg

#menuButtonDollar
    background-image: url('../imgs/icons/dollar.svg')

#menuButtonMobile
    background-image: url('../imgs/icons/smartphone.svg')

#menuButtonAPI
    background-image: url("../imgs/icons/api.svg")

#menuButtonDonate
    background-image: url("../imgs/icons/heart.svg")
    cursor: pointer

#menuButtonShare
    background-image: url("../imgs/icons/share.svg")

#menuButtonSettings
    background-image: url("../imgs/icons/settings.svg")


// expandable menu button: search

.menuButtonExpandable
    position: relative
    min-width: $menuButtonWidth+2*$menuButtonPaddingX

#menuButtonSearch
    background-image: url('../imgs/icons/search.svg')
    position: absolute
    top: 0px
    right: 0px

#menuButtonSearch:hover
    cursor: pointer

#searchInput 
    border: 0px solid $headerBackgroundColor1
    margin-top: ($headerHeight - $menuButtonHeight) / 2
    height: $menuButtonHeight - 2px // je ne sais pas pourquoi il faut -2px
    color: #ffffff
    outline: none

    background-color: $headerBackgroundColor1
    padding-right: ($menuButtonWidth + $menuButtonIconSize) / 2
    padding-left: 3px
    width: 0px
    -webkit-transition: all .5s ease
    -moz-transition: all .5s ease
    transition: width .5s ease
    border-radius: 2px

#searchInput:hover 
    background: $headerBackgroundColor2

#searchInput.active
    width: 120px
    background: $headerBackgroundColor2

input::placeholder
  color: $headerBackgroundColor3

#searchInput::placeholder
  color: $headerBackgroundColor4

textarea::placeholder
  color: $headerBackgroundColor3

//================================================================
// Autocomplete
//================================================================

.ac-renderer
    position: absolute
    max-width: 400px
    z-index: 20000
    color: #ffffff
    box-shadow: $dropdownMenuBoxshadow
    border-radius: $dropdownMenuBorderradius
    overflow: hidden

.ac-row
  white-space: nowrap
  position: relative
  cursor: pointer
  padding: 5px
  background-color: $headerBackgroundColor2
  overflow: hidden !important
  text-overflow: ellipsis
  font-size: small

.ac-row .suffix
  font-size: x-small
  color: $headerBackgroundColor4
  padding: .1em 0 .1em 5px

.ac-row .type
  font-size: x-small
  color: $headerBackgroundColor4
  display: block
  width: 100%

.ac-highlighted
  //font-weight: bold
  color: $colorOrange

.ac-active
  background-color: $headerBackgroundColor3

.Takeoff
   background: url(../imgs/icons/paraglider2-aaaaaa.svg)
   background-size: 16px 16px
   background-repeat: no-repeat
   padding-left: 17px

.Landing
   background: url(../imgs/icons/paraglider2-aaaaaa.svg)
   background-size: 16px 16px
   background-repeat: no-repeat
   padding-left: 17px

.Training
   background: url(../imgs/icons/paraglider2-aaaaaa.svg)
   background-size: 16px 16px
   background-repeat: no-repeat
   padding-left: 17px

.peak
   background: url(../imgs/icons/peak.svg)
   background-size: 14px 16px
   background-repeat: no-repeat
   padding-left: 17px


//================================================================
// Map controls
//================================================================

#headerMapControls, #prevNextDay
    position: absolute
    left: 0px
    width: $mapControlButtonWidth
    //font-size: 10px
    padding-top: 1px
    background-color: $headerBackgroundColor1

    border: $mapControlBorderWidth solid $headerBackgroundColor1

    display: flex
    flex-direction: column
    //overflow: hidden

    z-index: 10001

#headerMapControls
    width: $mapControlButtonWidth

#prevNextDay
    width: 2*$mapControlButtonWidth


#headerMapControls
    top:  0px
    margin-top: $headerHeight
    border-radius: 0px 0px 6px 6px
    box-shadow: 1px 1px $headerShadowSize black

#prevNextDay
    padding: 0px 0px 1px 0px
    bottom: 0px
    border-radius: 6px 6px 0px 0px
    box-shadow: 1px -1px $headerShadowSize black

.prevNextLine
    display: flex
    flex-direction: row

#bottomLeftShadowHider
    position: absolute
    left: 2*$mapControlButtonWidth + 2*$mapControlBorderWidth
    bottom: 0px
    background: $headerBackgroundColor1
    height: $footerHeight
    width: $headerShadowSize + 2px
    z-index: 10002


.mapControlButton
    width:  $mapControlButtonWidth
    height: $mapControlButtonHeight
    // background img
    background-size: $mapControlButtonIconSize $mapControlButtonIconSize
    background-repeat: no-repeat
    background-position: center
    border-radius: $buttonBorderRadius

.mapControlButton.bottom
    border-radius: $buttonBorderRadius $buttonBorderRadius 6px 6px

.mapControlButton.topleft
    border-radius: 6px $buttonBorderRadius $buttonBorderRadius $buttonBorderRadius

.mapControlButton.topright
    border-radius: $buttonBorderRadius 6px $buttonBorderRadius $buttonBorderRadius


.mapControlButton:hover
    background-color: $headerBackgroundColor2
    cursor: pointer

.mapControlButton.disabled:hover
    background-color: $headerBackgroundColor1
    cursor: initial

#mapControlButtonPlus
    background-image: url('../imgs/icons/plus.svg')

#mapControlButtonMinus
    background-image: url('../imgs/icons/minus.svg')

#mapControlButtonLayers
    background-image: url('../imgs/icons/layers.svg')

#mapControlButtonPrev
    background-image: url('../imgs/icons/prev.svg')

#mapControlButtonPrev.disabled
    background-image: url('../imgs/icons/prev-disabled.svg')

#mapControlButtonNext
    background-image: url('../imgs/icons/next.svg')

#mapControlButtonNext.disabled
    background-image: url('../imgs/icons/next-disabled.svg')

#mapControlButtonBackward
    background-image: url('../imgs/icons/backward.svg')

#mapControlButtonBackward.disabled
    background-image: url('../imgs/icons/backward-disabled.svg')

#mapControlButtonForward
    background-image: url('../imgs/icons/forward.svg')

#mapControlButtonForward.disabled
    background-image: url('../imgs/icons/forward-disabled.svg')

#mapControlButtonGpsIcon
    margin-top: ($mapControlButtonHeight - $mapControlButtonIconSize) / 2
    margin-left: ($mapControlButtonWidth - $mapControlButtonIconSize) / 2
    width: $mapControlButtonIconSize
    height: $mapControlButtonIconSize

#mapControlButtonGpsIcon.searching
    animation: spin 2.0s linear infinite


//================================================================
// current date
//================================================================

#currentDate 
    position: absolute
    top: 0
    height: $headerHeight
    width: 220px
    left: 50%
    transform: translate(-150px,0px) // biase le centrage
    text-align: center
    color: #ffffff
    padding-top: 7px

//================================================================
// Legend
//================================================================

$legendRightShift: 302px // 290px
$legendRightShiftShadow: $legendRightShift + 7px

#legend
    cursor: pointer
    position: absolute
    top:    0px
    left: calc(100% - #{$legendRightShift})
    width:  $legendRightShift
    font-size: 10px
    padding-top: 1px

    border-radius: 0px 0px 0px 5px
    box-shadow: 1px 1px $headerShadowSize black
    z-index: 10000

    display: flex
    flex-direction: column

#hideShadow 
    position: absolute
    top: 0px
    left: calc(100% - #{$legendRightShiftShadow})
    height: $headerHeight
    width: 8px
    z-index: 20000

    background-color: $headerBackgroundColor1

.legendSection 
    padding-left:  8px
    padding-right: 4px
    display: flex
    flex-direction: column

#legendSectionPredictions 
    background-color: $headerBackgroundColor1
    color: white
    padding-top: 1px
    padding-bottom: 2px
    flex: 0
    border-radius: 0px 0px 0px 5px

#legendSectionPredictions.active
    border-radius: 0px
    padding-bottom: 3px

#legendSectionKeywords 
    background-color: $headerBackgroundColor4
    color: black
    padding-top: 0px
    border-bottom: 0px
    border-left:   0px
    border-right:  0px
    border-radius: 0px 0px 0px 5px
    flex: 1

#legendSectionKeywords.active
    padding-top: 3px
    padding-bottom: 1px
    border-bottom: 1px solid $headerBackgroundColor1
    border-left: 1px solid $headerBackgroundColor1
    border-right: 1px solid $headerBackgroundColor1

.legendLine 
    display: flex
    width: 100%
    padding-top:1px
    padding-bottom:1px

#legendTop
    padding-top: 7px
    height: $headerHeight - 10px
    font-size: 11px

.legendTopFieldTitle
    flex: 0 0 32px
    text-align: right
    color: $headerBackgroundColor3

.legendTopFieldVal
    flex: 0 0 52px
    text-align: left
    color: $headerBackgroundColor5

.legendLineKeyWords 
    display: flex
    width:100%
    padding-bottom:2px
    transition:0.2s
    overflow: hidden

.legendLineName 
    flex: 1
    flex-basis: auto
    padding-top:5px
    font-weight: bold
    font-size: 11px

.legendLineNameKeywords 
    flex: 1
    flex-basis: auto
    transition: 0.2s
    overflow: hidden

.legendLineValue 
    flex: 0 200px

    background-color: #ffffff
    padding:0px
    border:1px solid black
    border-radius:5px
    overflow: hidden

.legendLineValueKeywords 
    flex: 0 140px

    background-color: #ffffff
    padding:0px
    border:1px solid black
    border-radius:5px
    overflow: hidden
    transition: 0.2s

.legendImg 
    height: 20px
    width: 200px
    background-size: cover

#legendImg1 
    background-image: url('../imgs/legend/legend1.png')

#legendImg2 
    background-image: url('../imgs/legend/legend2.png')

#legendImg3
    background-color: $headerBackgroundColor35

#legendImg4
    background-color: #5FC35F

.legendVal, .legendValTxt 
    height: 20px
    visibility: hidden
    transition: 0.2s

.legendVal
    width: 3px
    display: flex
    flex-direction: row

.legendValA
    flex: 0 0 1px
    height: 20px
    background-color: #000000
    opacity: 0.5

.legendValB
    flex: 0 0 1px
    height: 20px
    background-color: #000000
    opacity: 0.25

.legendValTxt 
    margin-top: -20px
    top: 0px
    width: 50px
    padding-top: 3px
    padding-left: 4px
    padding-right: 3px
    color: #000000
    font-weight: bold
    font-size: 11px

.keywordVal 
    height: 12px
    background-color:#888888
    transition: 0.3s
    box-shadow: 2px 0px 3px #444444
    opacity: 0.63

//================================================================
// newModal
//================================================================

$modalHeaderHeight: 41px
$modalWidth: 60% //700px

.newModal
    display: none
    position: fixed
    top: 50%
    left: 50%
    transform: translate(-50%, -53%)
    background-color: $headerBackgroundColor2
    z-index: 50000
    width: $modalWidth
    max-width: 100%
    height: 74%
    border-style: solid
    border-color: $headerBackgroundColor2
    border-width: 2px 2px 2px 2px 
    border-radius: 5px 5px 0px 0px
    box-shadow: $dropdownMenuBoxshadow

.newModalContainer
    width: 100%
    height: 100%
    display: flex
    flex-direction: column

.newModalTitle
    flex: 0 0 $modalHeaderHeight
    color: white

    //border-style: solid
    //border-width: 0px 0px 2px 0px
    //border-color: $headerBackgroundColor1

    display: flex
    flex-direction: row

    background-size: 22px 22px
    background-repeat: no-repeat
    background-position: 10px 8px // aligner avec l'icon du haut



.newModalTileText
    flex: 1 1 auto
    padding: 9px 0px 0px 40px
    font-size: large
    font-weight: bold

.newModalTileCross
    flex: 0 0 $modalHeaderHeight
    cursor: pointer
    //img
    background-size: ($modalHeaderHeight - 25px) ($modalHeaderHeight - 25px)
    background-repeat: no-repeat
    background-position: center
    background-image: url('../imgs/icons/cross-white.svg')

.newModalContent
    flex: 1 1 auto
    overflow: auto
    padding: 10px
    background-color: #ffffff
    font-size: 14px
    -moz-box-shadow:     inset 0px 0px 7px rgba(0,0,0,.2)
    -webkit-box-shadow:  inset 0px 0px 7px rgba(0,0,0,.2)
    box-shadow:          inset 0px 0px 7px rgba(0,0,0,.2)

.newModalContent p
    padding-left: 10px

.newModalContent h1
    font-size: large

.newModalContent h2
    font-size: small

.newModalContent a
    color: $colorOrange
    text-decoration: none



//====

$widthApiPopupContent: 96%

.popupApiUrl
    padding: 4px
    width: $widthApiPopupContent
    border: 1px solid black
    border-radius: 3px

.popupPreformatedDiv
    width: $widthApiPopupContent
    font-size: 10px

.inset
   -moz-box-shadow:     inset 1px 1px 7px rgba(0,0,0,.2)
   -webkit-box-shadow:  inset 1px 1px 7px rgba(0,0,0,.2)
   box-shadow:          inset 1px 1px 7px rgba(0,0,0,.2)


//================================================================
// mobile modal
//================================================================

#popupMobileVersion
    height: 500px

#popupMobileVersionContent
    font-size: xx-large

.modalButtonYes, .modalButtonNo 
    flex:       1
    height:     50px
    padding-top: 12px
    text-align: center
    border: 2px solid #000000
    border-radius: 7px

.modalButtonYes:hover, .modalButtonNo:hover 
    cursor: pointer


.modalButtonYes 
    background-color: #5EC35E

.modalButtonNo 
    background-color: #C35E5E


@media (pointer:none), (pointer:coarse) 
    #popupMobileVersion 
        display: inline
    
//================================================================
//
//================================================================


#inputdate 
    width: 120px
    height: 21px
    z-index: 20000
    background-color: $headerBackgroundColor2
    padding: 0px
    margin: 0px
    border: 4px solid $headerBackgroundColor1
    color: #000000




#divFlights
    position: absolute
    top: 0
    height: 26px
    width: 200px
    background-color: $headerBackgroundColor1
    border-radius: 10px
    text-align: center
    left: 200px
    color: #ffffff
    padding-top: 9px
    font-size: 15px
    z-index:1000



#map 
    top: 0px
    width: 100%
    height: 100%
    
    background: $headerBackgroundColor2

    //background-color: $headerBackgroundColor2_0
    //background-image: linear-gradient(45deg, $headerBackgroundColor2_1 25%, transparent 25%, transparent 75%, $headerBackgroundColor2_1 75%, $headerBackgroundColor2_1), linear-gradient(45deg, $headerBackgroundColor2_1 25%, transparent 25%, transparent 75%, $headerBackgroundColor2_1 75%, $headerBackgroundColor2_1)
    //background-size: 12px 12px
    //background-position: 0 0, 6px 6px

    //background-color: $headerBackgroundColor2_0
    //background-image: repeating-linear-gradient(-60deg, transparent, transparent 25px, $headerBackgroundColor2_1 25px, $headerBackgroundColor2_1 50px)


.basetiles, .basetiles-vignette
    -webkit-filter: grayscale(100%)// opacity(.35)
    filter: grayscale(100%)// opacity(.35)


#loaderContainer 
    width: 100px
    height: 100px

#loader 
    border:        5px solid $headerBackgroundColor2
    border-top:    5px solid $headerBackgroundColor4
    border-bottom: 5px solid $headerBackgroundColor4
    border-radius: 50%
    border-style: double
    width:  60px
    height: 60px
    animation: spin 1.1s linear infinite

    background-color: rgba($headerBackgroundColor1, 0.85)

    position: fixed
    overflow: visible
    top: 0
    left: 0
    bottom: 0
    right: 0
    margin: auto
    z-index: 1000

#loaderImg 
    padding-left: 21px
    padding-top: 15px
    width:  60px
    height: 60px
    vertical-align: middle
    line-height: 60px

    position: fixed
    overflow: visible
    top: 0
    left: 0
    bottom: 0
    right: 0
    margin: auto
    z-index: 1000


@keyframes spin 
    0%
        transform: rotate(0deg)
    100%
        transform: rotate(360deg)



//======================================================================
// Vignettes
//======================================================================

#vignettesContainer0 
    position: absolute
    width: 100%
    height: 11.0%
    bottom: 4.5px

    display: flex
    flex-direction: row
    justify-content: center

.vignettesContainer
    position: absolute
    padding-bottom: 1px
    width: 83%
    bottom: 0px
    height: 100%
    display: flex
    flex-direction: row
    justify-content: center

.vignettesSpacerWeek
    width: 14px
    height: 1px

#newWeekContainer
    box-shadow: 1px -1px $headerShadowSize black
    border: 1px solid $headerBackgroundColor1
    background-color: $headerBackgroundColor1
    border-radius: 7px 7px 0px 0px
    z-index: 1999

    display: flex
    flex-direction: row
    margin-bottom: $footerHeight - 5px

.newDay
    position: relative
    width: 10%
    height: 100%
    //transition: transform 0.01s
    overflow: visible
    cursor: pointer
    border-top:   1px solid $headerBackgroundColor1
    border-left:  1px solid $headerBackgroundColor1
    border-right: 1px solid $headerBackgroundColor1
    background-color: $headerBackgroundColor1
    border-bottom: 0px
    border-radius: 0px
    z-index: 2000
    flex: 1

//---------------------------
// hover

.newDay:hover
    transform: scale(1.15)
    transform-origin: bottom center
    z-index: 2001
    box-shadow: 0px -1px $headerShadowSize black
    border-radius: 7px 7px 0px 0px

    border-top:   1px solid $headerBackgroundColor2
    border-left:  1px solid $headerBackgroundColor2
    border-right: 1px solid $headerBackgroundColor2
    background-color: $headerBackgroundColor2

.newDay:hover .newDayMap
    border-radius: 7px 7px 0px 0px

.newDay:hover .newDayTxt
    border: 1px solid $headerBackgroundColor2
    background-color: $headerBackgroundColor2

.newDay:hover .newDayTxt.active
    border: 1px solid $headerBackgroundColor4
    background-color: $headerBackgroundColor4
    color: $headerBackgroundColor1
//---------------------------

.newDay.active
    border-top:   1px solid $headerBackgroundColor4
    border-left:  1px solid $headerBackgroundColor4
    border-right: 1px solid $headerBackgroundColor4
    background-color: $headerBackgroundColor4

.newDay.first
    border-top-left-radius: 7px
    
.newDay.last
    border-top-right-radius: 7px

.newDayMap
    width: 100%
    height: 100%
    overflow: hidden
    background-color: $headerBackgroundColor1

.newDayMap.first
    border-top-left-radius: 7px
    
.newDayMap.last
    border-top-right-radius: 7px

.newDayTxt
    position: absolute
    height: $footerHeight - 3px // 2*border + padding-top
    bottom: -$footerHeight 
    left: -1px
    width: 100%
    border: 1px solid $headerBackgroundColor1
    background-color: $headerBackgroundColor1
    color: #ffffff
    font-size: 11px
    text-align: center
    padding-top: 1px

.newDayTxt.active
    border: 1px solid $headerBackgroundColor4
    background-color: $headerBackgroundColor4
    color: $headerBackgroundColor1

.newDayLeafletMap
    height: 100%
    width: 100%
    background-color: $headerBackgroundColor1

.newDayLeafletMap.notAvailable
    background-color: $headerBackgroundColor2
    color: $headerBackgroundColor4
    font-size: 11px
    text-align: center

//======================================================================
// Last update time of tiles
//======================================================================

#lastUpdates
    position: absolute
    color: $headerBackgroundColor1
    text-align: right
    right: 0px
    padding-right: 2px
    padding-bottom: 2px
    bottom: $footerHeight
    width: 97px
    height: 26px
    z-index: 800
    display: flex
    flex-direction: column
    background-color: transparentize(#ffffff, 0.85)
    border-radius: 3px 0px 0px 0px

#lastUpdateFieldTxt
    flex: 1
    font-size: 9px

#lastUpdateTime
    flex: 1
    font-size: 11px



//======================================================================
// bottom navigation bar
//======================================================================

// comon header

$bottomPopupHeaderHeight: $footerHeight

#bottomPopupShadowHiderRight
    position: absolute


.bottomPopupHeader
    flex: 0 $bottomPopupHeaderHeight
    background: $headerBackgroundColor1
    color: #ffffff

    display: flex
    flex-direction: row

.bottomPopupHeaderText
    flex: 1
    padding-top: 0px
    text-align: center
    font-size: 13px

.bottomPopupHeaderCross
    position: absolute
    right: 0px
    top:   0px
    width:  28px
    height: 28px
    z-index:30000
    background: $headerBackgroundColor2
    cursor: pointer
    border-radius: 0px 7px 0px 7px
    //img
    background-size: 14px 14px
    background-repeat: no-repeat
    background-position: center
    background-image: url('../imgs/icons/cross-white.svg')

// comon content

.bottomPopupContent
    flex: 1
    box-shadow: 1px -1px $headerShadowSize black
    border-radius: 7px 7px 0px 0px
    border-width: 2px 2px 0px 2px
    border-style: solid
    border-color: $headerBackgroundColor2
    background-color: $headerBackgroundColor5


.bottomPopupContent2
    overflow: auto
    padding-left: 5px

.bottomPopupContent2 h1
    font-size: large

.bottomPopupContent2 h2
    font-size: small

// API


#apiNavigationBarContainer
    position: absolute
    width: 100%
    height: 126px
    bottom: 0px

    display: flex
    flex-direction: row
    justify-content: center


#apiNavigationBarContent
    font-size: 14px
    position: absolute
    width: 83%
    bottom: 0px
    height: 100%
    //background-color: $headerBackgroundColor1
    z-index:21000
    //border-radius: 7px 7px 0px 0px

    display: flex
    flex-direction: column

#apiSendButton
    padding: 2.5px

#apiSendButton:hover
    cursor: pointer
    //color: #ffffff
    background-color: $headerBackgroundColor3

.textInput
    font-size: 12px
    background-color: $headerBackgroundColor4
    border: 1px solid black
    outline: none
    height: 18px
    border-radius: 2px


.apiMarker .leaflet-popup-tip
  background-color: $headerBackgroundColor5

.apiMarker .leaflet-popup-content-wrapper
  background-color: $headerBackgroundColor5

.apiMarker a.leaflet-popup-close-button
  color: #000000

.apiMarkerNameInputText
    background-color: #ffffff //$headerBackgroundColor5
    border: 1px solid black
    outline: none
    border-radius: 2px

.leaflet-popup-content
    margin: 16px 22px 8px 5px 
    line-height: 1.4

// Analysis


#analysisNavigationBarContainer
    position: absolute
    width: 100%
    height: 172px //147px
    bottom: 0px

    display: flex
    flex-direction: row
    justify-content: center


#analysisNavigationBarContent
    font-size: 14px
    position: absolute
    width: 83%
    bottom: 0px
    height: 100%
    //background-color: $headerBackgroundColor1
    z-index: 21000
    //border-radius: 7px 7px 0px 0px

    display: flex
    flex-direction: column

//=========================================================================

.lds-ellipsis
  display: inline-block
  position: relative
  width: 36px
  height: 11px

.lds-ellipsis div
  position: absolute
  bottom: 2px
  width:  6px
  height: 6px
  border-radius: 50%
  background: #000000
  animation-timing-function: cubic-bezier(0, 1, 1, 0)

.lds-ellipsis div:nth-child(1)
  left: 5px
  animation: lds-ellipsis1 0.6s infinite

.lds-ellipsis div:nth-child(2)
  left: 5px
  animation: lds-ellipsis2 0.6s infinite

@keyframes lds-ellipsis1
  0%
    transform: translate(20px, 0)
  100%
    transform: translate(0, 0)

@keyframes lds-ellipsis2
  0%
    transform: translate(0, 0)
  100%
    transform: translate(20px, 0)


//=========================================================================


.contactParagraphContainer
    margin-left: 40px
    margin-right: 60px

.contactParagraph
    background: $headerBackgroundColor6
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.3)
    border-radius: 5px
    padding: 10px
    width: 100%
    border: 1px solid $headerBackgroundColor4





//=========================================================================
//     Tooltip
//=========================================================================

/* Tooltip container */
.tooltip
  position: relative
  display: inline-block


/* Tooltip text */
.tooltip .tooltiptext
  visibility: hidden
  width: 120px
  background-color: $headerBackgroundColor1
  color: #fff
  text-align: center
  padding: 5px 0
  border-radius: 6px
 
  /* Position the tooltip text - see examples below! */
  position: absolute
  z-index: 80000

  box-shadow: 1px 1px $headerShadowSize black


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext
  visibility: visible

// left positioning
.tooltip .tooltiptext
  top: 40px // 52px qd yaura 3 jauges
  right: 104%

// right arrow


// https://codepen.io/ilikescience/pen/GgdPmz
.tooltip--tip
  position: absolute
  z-index: -100
  display: block
  width: 0.6rem
  height: 0.6rem
  background: $headerBackgroundColor1
  top: 13px
  right: 0px
  transform: translateX(50%) rotate(-45deg)
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5)



//======================================================================================
//======================================================================================
//======================================================================================

$dayMargin:  1px
$dayWidth: 17px
$monthWidth: 7*($dayWidth+2*$dayMargin)

.datepicker-container
    width: 100%
    overflow: auto
    display: flex
    flex-direction: row
    padding-bottom: 15px

.datepicker-month-container
    flex: 0 0 $monthWidth
    margin-right: 10px
    //background: red

.datepicker-month-header
    font-weight: bold
    padding-top: 4px
    font-size: 11px
    text-align: center
    height: 19px
    //background: blue

.datepicker-day, .datepicker-placeholder
    float: left
    box-sizing: border-box
    padding-top: 3px
    margin: $dayMargin
    width:  $dayWidth
    height: $dayWidth

.datepicker-day
    background-color: $headerBackgroundColor4
    border-radius: 2px
    text-align: center
    font-size: 10px
    cursor: pointer

.datepicker-day:hover
    background-color: $headerBackgroundColor3

.datepicker-day.selected
    color: #ffffff
    background-color: $headerBackgroundColor2
    font-weight: bold

.datepicker-day.disabled
    color: $headerBackgroundColor3
    cursor: auto

.datepicker-day.disabled:hover
    background-color: $headerBackgroundColor4


//======================================================================
// takeoff popups
//======================================================================

.leaflet-popup-content
    margin: 0px

.leaflet-popup-content-wrapper
    overflow: hidden
    padding: 0px
    border-radius: 4px

.takeoffPopupContainer
    display: flex
    flex-direction: column

.takeoffPopupTitle
    flex: 1
    background: $headerBackgroundColor1
    color: white
    padding: 3px 5px 3px 5px
    font-weight: bold
    text-align: center

.takeoffPopupContent
    flex: 1
    background: $headerBackgroundColor4
    padding: 5px

.takeoffPopupList
    flex: 1
    background: $headerBackgroundColor4
    font-size: 75%
    padding: 0px 5px 5px 5px

.leaflet-popup-tip
    background: $headerBackgroundColor4

.popupValbox
    text-align: center
    padding: 2px
    font-weight: bold
    color: white
    border: 1px solid black
    border-radius: 2px

.leaflet-fade-anim .leaflet-popup
  transition: none




