/* #### Mobile Phones Portrait #### */
@media screen and (device-width <= 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (device-width <= 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (device-width <= 640px){
  /* some CSS here */
}

/* #### Retina screen (iphone4, samsung note, etc.) Portrait or Landscape #### */
@media
only screen and (min-device-pixel-ratio: 2),
only screen and (   min-device-pixel-ratio: 2),
only screen and (     min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                resolution >= 192dpi),
only screen and (                resolution >= 2dppx),
only screen and (                   height <= 640px) ,
only screen and (                   device-height <= 640px) {
  /* Retina-specific stuff here */
  body{
    padding-top : 60px;
  }

  #header {
    height : 30px;
  }

  #logo {
    height : 30px;
    margin: 0 5px;
  }

  #logo h1 {
    font-size : 1.5em;
    margin: 5px 5px 5px 40px;
    line-height: 20px;
  }

  #title{
    height : 30px;
    margin : 0 5px;
    padding-right:5px;
  }

  #title h1 {
    margin : 0 5px;
    font-size : 1.5em;
    line-height: 30px;
  }

  #headermenu{
    height:30px;
    position: fixed;
  }

  .navbar-inner {
    min-height:30px;
    padding: 0 10px;
  }

  /*  for ie */

/*  .navbar-inner ul { */

/*    height:30px\9; */

/*  } */

  /*  for ie */
  .navbar-inner ul li{
    display:inline\9;
  }

  #overview-box {
    right:10px;
    bottom:40px;
  }

  #bottom-dock  {
    width: 100%;
    height: auto;
  }

  #bottom-dock.visible {
    height: 100%;
    opacity: 1;
  }

  #bottom-dock.half-transparent {
    height: 100%;
    opacity: 1;
  }

}

/* #### Tablets Portrait or Landscape #### */
@media screen and (device-width >= 768px) and (device-width <= 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (width >= 1024px){
  /* some CSS here */
}


@media (pointer: coarse) {
    #mapmenu .menu-title {
        display: none;
        margin-left: 10px;
        text-transform: capitalize;
    }
}

  #mapmenu .menu-title{
     display: none;
    margin-left: 10px;
    text-transform: capitalize;
 }




 #barcaPanel #legend-icon {
  display: none;
 }

 #barcaPanel #legend-header{
  height: 40px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px !important
 }

 @media screen and (max-width: 768px) {
  #menuToggle {
      display: none;
  }

  #mapmenu {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

  #mapmenu > div:not(#logoBottom, #logoTop) {
      width: 100% !important;
      left: 0 !important;
      top: 0 !important;
  }

  #mapmenu #logoBottom {
      top: unset !important;
      transform: none !important;
      left: 0 !important;
      bottom: 15px !important; 
  }

  #mapmenu .nav-list{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 0;
      background: transparent !important;
      padding: 0 !important;
  }

  #mapmenu .nav-list li:not(.hide){
      padding-left: 0 !important;
      width: 100% !important;
      display: flex;
      justify-content: center;
      align-items: center;
      background: transparent !important;
  }

  #mapmenu .nav-list li a {
      left: 0 !important;
      top: 0 !important;
  }

  .tab-pane.active#timemanager {
      position: fixed;
      top: 30px;
      right: 0;
      width: calc(100% - 110px);
      background: #EFEFEF;
  }

  #barcaPanel #legend-icon {
    display: block;
  }
  #barcaPanel #legend-header span {
    display: none;
  }

  #barcaPanel {
    bottom: 15px !important;
    right: 15px !important;
    left: unset !important;
    top: unset !important;
    transition: all 0.2s ease-in-out;
  }
  #barcaPanel:not(.opened){
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px;
    
    transform: translateX(0px) translateY(0px);
  }

  #barcaPanel.opened{
    width: 250px;
    height: 400px !important;
    /* transform: translatey(-400px); */
  }

  #barcaPanel.opened #titolo {
    display: block;
  }

  #barcaPanel #legend-header {
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }

  #barcaPanel.opened #legend-header {
    display: flex;
    justify-content: space-between;
    padding: 0 15px !important;
  }

  #barcaPanel #legend-list {
    max-height: calc(400px - 40px - 30px);
    padding-bottom: 30px;
  }
}