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


// variables

$headerBackgroundColor1: #404751 //#323639 //#3d4956
$headerBackgroundColor2: lighten($headerBackgroundColor1, 15%)
$headerBackgroundColor3: lighten($headerBackgroundColor1, 30%)
$headerBackgroundColorKeywords: lighten($headerBackgroundColor1, 45%)
$colorOrange: #f08000

$headerShadowSize: 5px

$headerHeight:   37px
$headerBorderradius: 9px
$menuButtonHeight: $headerHeight - 2px
$menuButtonWidth: $menuButtonHeight
$menuButtonIconSize: $menuButtonHeight - 10px
$menuButtonPaddingX: 0px
$menuButtonPaddingY: 0px

$buttonBorderRadius: 2px

$dropdownLinkHeight: $headerHeight - 6px

// Map controls

$mapControlButtonWidth:    35px
$mapControlBorderWidth:     1px
$mapControlButtonHeight:   35px
$mapControlButtonIconSize: 21px

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

#header
    position: absolute
    height: $headerHeight
    width: calc(100% - #{$mapControlButtonWidth} - #{2*$mapControlBorderWidth} - 2px)
    left: $mapControlButtonWidth + 2*$mapControlBorderWidth + 1px
    background-color: $headerBackgroundColor1

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


#topLeftShadowHider
    //display: none
    position: absolute
    left:  $mapControlButtonWidth + 2*$mapControlBorderWidth + 1px
    top: 0px
    height: $headerHeight
    width: 3px //$headerShadowSize
    background-color: $headerBackgroundColor1 //red//$headerBackgroundColor1
    z-index: 20000


$searchInputMarginLeft: 1px

#searchInput
    border-width: 0px
    margin-left: $searchInputMarginLeft
    margin-top: 2px
    height: $headerHeight - 6px
    background-color: $headerBackgroundColor2
    width: calc(100% - #{ 25px + $searchInputMarginLeft} )
    border-radius: 2px
    color: #ffffff
    padding-left: 3px
    padding-right: 20px
    outline: none
    z-index: 10004

#headerIconSearch
    position: absolute
    right: 8px
    top:0px
    
    margin-top:2px
    padding-top:2px

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

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

    border-radius: $headerBorderradius 0px $headerBorderradius $headerBorderradius
    box-shadow: 0px 1px 5px black
    border: $mapControlBorderWidth solid $headerBackgroundColor1

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

    z-index: 10001

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

#mapControlButtonPlus
    border-radius: $headerBorderradius $buttonBorderRadius $buttonBorderRadius $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')

#mapControlButtonGPS
    //background-image: url('../imgs/icons/gps.svg')

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

#mapControlButtonGpsIcon.searching
    animation: spin 2.0s linear infinite

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

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

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

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

#menuButtonMenu
    background-image: url('../imgs/icons/menu.svg')

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

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

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

.dropdown
    position: relative
    display: inline-block
    cursor: pointer

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

.dropdown.active .dropdown-content 
    display: block

.dropdown.active #menuButtonMenu
    background-color: $headerBackgroundColor2
    border-radius: $buttonBorderRadius $headerBorderradius 0px 0px

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

.dropdown-content li, .dropdown-content2 li
    color: #ffffff
    height: $dropdownLinkHeight
    padding-top: 13px
    font-size: 15px
    padding-left: $menuButtonWidth + 4px
    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: (4+$menuButtonWidth - $menuButtonIconSize)/2 center // aligner avec l'icon du haut


.dropdown-content2 li
    padding-left: 32px

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


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

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

#desktopLink
    background-image: url('../imgs/icons/desktop-computer.svg')

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

#facebookLink
    background-image: url('../imgs/icons/facebook-logo.svg')

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

#nameLink
  background-image: url("../imgs/icons/tag.svg")

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

#donateLink
  background-image: url('../imgs/icons/heart.svg')

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




.dropdown2
    position: relative
    display: inline-block

.dropdown2.active .dropdown-content2
    display: block

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

.dropdown-content2
    display: none
    position: absolute
    width: 150px
    top: 0px
    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:hover
    background-color: $headerBackgroundColor3


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



.table, .tr, .td
    padding: 0px
    border-width: 0px

#map
    width:  100%
    //height: 235px
    flex: 5
    //border-radius: $headerBorderradius $headerBorderradius 0px 0px
    background: $headerBackgroundColor2

#week
    color: #ffffff
    background: #000
    cursor: pointer
    overflow-y: auto
    flex: 4

.pattern
    height: 100%
    background-image: url(../imgs/legend/fufuPattern.png)
    background-size: 100% 100%
    opacity: 0

.day
    margin:    1px
    background: $headerBackgroundColor1
    display: flex
    flex-direction: row

.day-unselected:hover
    background: $headerBackgroundColor2

.day-unselected
    background-color: $headerBackgroundColor1
    color: #ffffff

.day-selected
    background-color: $headerBackgroundColorKeywords
    color: $headerBackgroundColor1

.dateFull
    font-size: smaller
    color: $headerBackgroundColorKeywords

.cellValTxt
    color: $headerBackgroundColorKeywords

.day-selected .dateFull
    color: #ffffff
.day-selected .cellValTxt
    color: #ffffff

.cellVal
    padding-left: 4px
    text-align: right

.color
    flex: 0 50px
    background-color:#000000
    border-right: 1px solid black

.icons
    flex: 0 0 42px
    text-align: right

.myMarker
    transition: 0.25s

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

.ac-renderer
    position: absolute
    max-width: 400px
    z-index: 20000
    color: #ffffff
    box-shadow: $dropdownMenuBoxshadow
    border-radius: 0px 5px 5px 5px
    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: $headerBackgroundColorKeywords
  padding: .1em 0 .1em 5px

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

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

.ac-row:hover
  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


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

.takeoffIcon
    position: absolute
    width: 12px
    height: 12px
    border-radius: 50%
    border: 1px solid #000
    margin-left: -1px !important
    margin-top: -1px !important

.takeoffIcon.selected
    border: 3px solid #000
    margin-left: -3px !important
    margin-top: -3px !important

//======================================================================
// 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: $headerBackgroundColorKeywords
    padding: 5px

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

.leaflet-popup-tip
    background: $headerBackgroundColorKeywords

.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

#takeoffFlyability.waiting
    background: $headerBackgroundColor2


//================================================================
// mobileModal
//================================================================


$modalHeaderHeight: 21px
$modalWidth: 77%
$modalBorderRadius: 5px

.mobileModal
    display: none
    position: fixed
    top: 30%
    left: 50%
    transform: translate(-50%, -53%)
    background-color: $headerBackgroundColor1
    z-index: 50000
    width: $modalWidth
    height: 175px
    border-style: solid
    border-color: $headerBackgroundColor1
    border-width: 2px 2px 2px 2px 
    border-radius: $modalBorderRadius
    box-shadow: $dropdownMenuBoxshadow

#legendModal
    height: 110px

#donateModal
    height:350px

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

.mobileModalTitle
    flex: 0 0 $modalHeaderHeight
    color: white

    display: flex
    flex-direction: row

    background-size: 19px 19px
    background-repeat: no-repeat
    background-position: 5px 2px // aligner avec l'icon du haut

#setNameModalTitle
    background-image: url('../imgs/icons/tag.svg')

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

#donateModalTitle
    background-image: url('../imgs/icons/heart.svg')

.mobileModalTileText
    flex: 1 1 auto
    padding: 2px 0px 4px 30px
    font-size: 16px
    font-weight: bold

.mobileModalTileCross
    flex: 0 0 $modalHeaderHeight
    cursor: pointer
    //img
    background-size: 15px 15px
    background-repeat: no-repeat
    background-position: 2px 3px
    background-image: url('../imgs/icons/cross-white.svg')

.mobileModalContent
    flex: 1 1 auto
    overflow: auto
    padding: 10px
    background-color:  $headerBackgroundColorKeywords
    font-size: 14px
    text-align: center
    -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)
    border-radius: 0px 0px $modalBorderRadius $modalBorderRadius


//================================================================
// input text
//================================================================

.inputText
    background-color: #ffffff
    padding: 5px
    color: black
    width: 90%
    text-align: center
    border: 1px solid $headerBackgroundColor2
    //border-radius: 2px

#inputWidgetName.disabled
    background-color: $headerBackgroundColorKeywords

#nameLabel.disabled
    color: $headerBackgroundColor2


.buttonDiv
    background-color: $headerBackgroundColor2
    padding: 5px
    color: white
    width: 90%
    text-align: center
    border: 1px solid black
    border-radius: 2px


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


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

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

.legendLineName 
    flex: 1
    flex-basis: auto
    padding-top:5px
    font-weight: bold
    font-size: 12px
    text-align: left

.legendLineValue 
    flex: 0 130px

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

.legendImg 
    height: 20px
    width: 100%
    background-size: 100% 100%
    display: flex

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

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



