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

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

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

/* #### Retina screen (iphone4, samsung note, etc.) Portrait or Landscape #### */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx),
only screen and (                   max-height : 640px) ,
only screen and (                   max-device-height : 640px) {

  /* Retina-specific stuff here */
  body{
    padding-top : 60px;
  }
  #header {
    height : 30px;
    z-index: 1031 !important;
    display: none !important;
  }
  
  div#content {
    height: 100%;
    position: absolute;
    top: 0px;
}
  
  #attribution-box {
    display: none !important;
}
  
  #content.mobile #map-content {
    margin-left: 0px;
    height: 100% !important;
}
  
  #logo {
    height : 30px;
    margin: 0px 5px;
  }
  #logo h1 {
    font-size : 1.5em;
    margin: 5px 5px 5px 40px;
    line-height: 20px;
  }
  #title{
	  position: absolute;
	  top: 25px;
    height : 30px;
    margin : 25px 5px;
    padding-right:5px;
  }
  #title h1 {
    margin : 0px 5px;
    font-size : 1.5em;
    line-height: 30px;
  }
  #headermenu{
    height:30px;
    position: fixed;
  }
  .navbar-inner {
    min-height:60px;
    padding: 0px 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 (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

@media screen and (max-width: 1024px){
  #headermenu{
    display: none;
  }
  .d-n-mobile{
    display: none !important;
  }

  .d-mobile{
    display: block !important;
  }

  .nav.nav-list{
    display: flex;
    flex-direction: row;
    width: 100% !important;
    height: 100% !important;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    background-color: #ffffff !important;
  }

  .nav-list li{
    /* flex-grow: 1; */
    width: calc(100vw/3);
    max-width: calc(100vw/3);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-dock a, .nav-minidock a{
    padding: 0 !important;
    margin: 0 !important;
    min-height: 30px;
    min-width: 30px;
    /* background-color: red !important; */
  }

  .nav-dock a .icon, .nav-minidock a .icon{
  }

  #mapmenu{
    left: 0 !important;
    bottom: 0;
    top: unset !important;
    display: flex;
    align-items: flex-end;
    height: 80px !important;
    width: 100%;
    background-color: #ffffff0a !important;
  }

  #mapmenu > div{
    width: 100% !important;
    height: 100% !important;
  }

  #overview-box{
    display: none !important;
  }

  #navbar{
    display: none;
  }



.popupcontent.nav-dock, .locate.nav-minidock,  .popupcontent.nav-minidock, .threejs.nav-minidock, #header-clear{
    display: true !important;
  } 

li.locate.nav-minidock {
width: calc(100vw/3) !important;
    max-width: calc(100vw/3) !important;

}

.popupcontent.nav-minidock, .print.nav-minidock{
    display: none !important;
  }

  .locate.nav-minidock a .icon{
    background-image: url(/index.php/view/media/getMedia?repository=xmapp&project=xmapp_arnasco&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/locate-01.png) !important;
    background-position: unset !important;
    background-size: contain;
    min-height: 30px;
    min-width: 30px;
    background-color: transparent !important;
  }

  .locate.nav-minidock.active a .icon{
    background-image: url(/index.php/view/media/getMedia?repository=xmapp&project=xmapp_arnasco&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/locate-active-01.png) !important;
  }

    .locate {
    background-color: #efefef;
    height: 80px;
}

.locate-layer {
    height: 35px;
    background-color: #ffffff !important;
    /* text-align: center; */
    margin: auto !important;
}

span.title {
    color: black;
}

.measure.nav-minidock {
    display: none !important;
  }



  .icon-road{
    background-position: -69px -22px !important;
  }

  #mini-dock-content #locate{
    display: true !important;
  }

  #header{
    background: white !important;
    display: flex;
    align-items: center;
    height: 80px !important;
  }

  #header #logo{
    height: 50px;
    flex-grow: 1;
    margin-left: 20px;
  }

  #header #title{
    display: none !important;
  }

  #nominatim-search .search-icon{
    display: none !important;
  }

  .search-icon{
    position: fixed !important;
    top: 30px !important;
    right: 20px !important;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 99999999;
  }

  .search-icon .icon{
    /* content: ; */
    /* display: inline-block; */
    /* vertical-align: middle; */
    /* background-repeat: no-repeat; */
    min-width: 20px;
    min-height: 20px;
    /* background-image: url(/index.php/view/media/getMedia?repository=xmapp&project=xmapp_arnasco&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/search-01.svg); */
    /* border: none !important;
    background-color: transparent;
    background-size: contain; */
    /* background-position: -400px 0px; */
  }

  #headermenu{
    top: 80px !important;
    margin: 0 !important;
    height: 80px !important;
    background: white;
    padding: 0 !important;
    box-shadow: none !important;
  }

  #header #auth{
    width: 100%;
    height: 100%;
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
  }

  .pull-right{
    position: relative !important;
    top: 0 !important;
    width: 100%;
    height: 100%;
    background-color: #fff !important;
  }

  .pull-right .nav{
    display: none !important;
  }

  #nominatim-search{
    position: unset !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  #search-query{
    position: unset !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 20px !important;
    font-size: 18px;
    border: none;
    box-shadow: none;
    border-bottom: 1px solid #666;
    border-radius: 0;
    padding-bottom: 5px !important;
    padding-left: 10px !important;
  }

  #content.mobile #mini-dock{
    max-width: 100%;
    top: auto;
    bottom: 80px;
    right: 0px;
    left: 0;
    margin: 0;
    box-shadow: none !important;
    overflow: hidden;
    max-height: 435px;
    z-index: 9999;
  }

  #content.mobile #dock{
    max-width: 100%;
    top: auto;
    bottom: 80px;
    right: 0px;
    left: 0;
    margin: 0;
    box-shadow: none !important;
    overflow: hidden;
    max-height: 435px;
    min-height: 435px;
    padding: 0 !important;
  }

  #content.mobile #dock .tabbable{
    min-height: 435px;
    background-color: #f2f2f2 !important;
  }

  #content.mobile #dock .tabbable #dock-content{
    height: 100%;
  }

  #content.mobile #dock .tabbable #dock-content #switcher-layers-container{
    height: 100%;
    background: #fff;
    color: #666 !important;
  }

  #switcher-baselayer, 
  #switcher-layers-actions,
  #switcher-layers-container h3{
    display: none;
  }

  #mini-dock .menu-content{
    padding: 0 !important;
  }

  .mapsConsumerUiSceneInternalCoreScene__widget-scene-canvas{
    width: 100% !important;
    height: 100% !important;
  }

  div#gsv-pano{
    /* width: calc(100vw - 20px - 16px) !important; */
    width: 100% !important;
    height: 300px !important;
  }

  #print.tab-pane.active{
    /* height: 100%; */
    height: 435px;
  }
  
  #print.tab-pane.active .print{
    height: 100%;
  }

  #print.tab-pane.active .print .menu-content{
    height: 100% !important;
  }

  #mini-dock{
    /* max-height: 70% !important; */
  }

  .switcher.nav-dock a .icon{
    background-image: url(/index.php/view/media/getMedia?repository=xmapp&project=xmapp_arnasco&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/layer-01.png) !important;
    background-position: unset !important;
    background-size: contain;
    min-height: 30px;
    min-width: 30px;
    background-color: transparent !important;
  }

  .switcher.nav-dock.active a .icon{
    background-image: url(/index.php/view/media/getMedia?repository=xmapp&project=xmapp_arnasco&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/layer-active-01.png) !important;
  }

  .filter.nav-dock a .icon{
    background-image: url(/index.php/view/media/getMedia?repository=xmapp&project=xmapp_arnasco&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/filter-01.png) !important;
    background-position: unset !important;
    background-size: contain;
    min-height: 30px;
    min-width: 30px;
    background-color: transparent !important;
  }

  .filter.nav-dock.active a .icon{
    background-image: url(/index.php/view/media/getMedia?repository=xmapp&project=xmapp_arnasco&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/filter-active-01.png) !important;
  }

  .print.nav-minidock a .icon{
    background-image: url(/index.php/view/media/getMedia?repository=xmapp&project=xmapp_arnasco&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/print-01.png) !important;
    background-position: unset !important;
    background-size: contain;
    min-height: 30px;
    min-width: 30px;
    background-color: transparent !important;
  }

  .print.nav-minidock.active a .icon{
    background-image: url(/index.php/view/media/getMedia?repository=xmapp&project=xmapp_arnasco&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/print-active-01.png) !important;
  }


  .gsv.nav-minidock a .icon{
    background-image: url(/index.php/view/media/getMedia?repository=xmapp&project=xmapp_arnasco&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/street-01.png) !important;
    background-position: unset !important;
    background-size: contain;
    min-height: 30px;
    min-width: 30px;
    background-color: transparent !important;
  }

  .gsv.nav-minidock.active a .icon{
    background-image: url(/index.php/view/media/getMedia?repository=xmapp&project=xmapp_arnasco&path=media%2Fthemes%2Fdefault%2Fcss%2F//images/street-active-01.png) !important;
  }

  .nav-dock, .nav-minidock{
    min-height: 30px;
    min-width: 30px;
  }

  .nav-dock.active, .nav-minidock.active{
    background-color: #f2f2f2 !important;
  }

  .nav-minidock i{
    display: none !important;
  }

  #mini-dock-content .title .icon{
    visibility: hidden;
  }

  .print-content{
    height: 100%;
    background-color: #f2f2f2;
  }

  .print-content .content{
    height: calc(100% - 36.84px);
    max-height: calc(100% - 36.84px);
    overflow: auto;
    padding: 0 20px;
    position: relative;
  }

  .print-content .content .title{
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 13px;
  }

  .print-content .content select{
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 15px !important;
    text-align: left !important;
    height: 50px;
    border: 1px solid #666;
    font-size: 16px;
    border-radius: 5px;
  }

  .print-content .content #print-launch{
    height: 50px;
    background: #a71c20;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
  }

  #mini-dock-content{
    background-color: transparent !important;
    height: 100%;
  }

  .tabbable.tabs-below{
    height: 100%;
  }
  
  #mini-dock.hide-dock{
    bottom: -100vh !important;
  }
  #mini-dock.show-dock{
    bottom: 80px !important;
  }

  #switcher-layers td{
    position: relative;
    padding: 5px 0;
  }

  #switcher-layers td .checkbox{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  #switcher-layers td .expander::after{
    content: -;
    display: block;
    width: 4px;
    height: 4px;
  }

  #switcher-layers-container .menu-content{
    max-height: 387px !important;
    background: #f2f2f2 !important;
  }

  #switcher-layers .legendGraphics{
    max-width: unset !important;
  }

  #switcher .tree button.checkbox,
  .liz-filter-field-box .checkbox{
    border: 1px solid transparent !important;
    background-color: transparent !important;
    height: 30px !important;
    width: 30px !important;
    background-image: url(/index.php/view/media/getMedia?repository=xmapp&project=xmapp_arnasco&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/iconared-01.png) !important;
    background-position: unset !important;
    background-size: contain !important;
  }


  #switcher .tree button.checkbox.checked, 
  #dock .tree button.checkbox.checked,
  .liz-filter-field-box .checkbox.checked{
    background-image: url(/index.php/view/media/getMedia?repository=xmapp&project=xmapp_arnasco&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/icona-red-01.png) !important;
  }

  #dock .tree button.checkbox:focus{
    outline: none !important;
  }
  #switcher .treeTable tr.liz-layer td span.label,
  #switcher span.label{
    font-size: 15px !important;
  }

  #dock-tabs #nav-tab-switcher a{
    color: #666 !important;
  }
  
  .print-content select{
    /* padding-right: 15px; */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding: 0 10px;
  }

  #content.mobile #message{
    top: 80px;
    position: fixed;
  }

  #content.mobile #message .alert-info{
    border-color: #3a3c3d !important;
  }

  #content.mobile #message .alert-info p{
    font-size: 14px;
  }
  .select-arrow{
    border: 8px solid #666;
    width: 0px;
    height: 0px;
    max-height: 0px;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    position: absolute;
    right: 10px;
    top: 12px;
    bottom: 0;
    margin: auto;
  }

  .print-template,
  .print-scale,
  .print-dpi,
  .print-format{
    position: relative;
  }

  div#lizmap-search{
    top: 80px !important;
  }

  #nav-tab-switcher a{
    visibility: hidden;
  }

  #mini-dock-content .gsv .title{
    background: #f2f2f2;
    color: #666;
    padding-left: 0.5em;
  }

  #mini-dock-content .gsv .title .icon-road{
    display: none !important;
  }

  ::-webkit-scrollbar-thumb {
    border: none !important;
  }

  ::-webkit-scrollbar-track{
    background: #f2f2f2 !important;
  }

  .filter.nav-dock{
    display: none;
  } 

  .geolocation.nav-minidock {
    /* position: fixed; */
    
    /* top: 90px;
    right: 10px; */
    background-color: transparent !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }


  .tab-pane.active .geolocation{
    display: block !important;
  }
  

.button-bar {
    text-align: center  !important;
    background: #a55f5f00  !important;
    margin: 10px;
}
button#geolocation-stop {
    background: rgb(167 28 32)  !important;
}
button#geolocation-bind {
    background: rgb(167 28 32)  !important;
}

button#geolocation-center {
    background: rgb(167 28 32)  !important;
}

.menu-content {
    background: transparent !important;
}


div#mini-dock {
 background: transparent !important;
}

#geolocation span.title{
    display: none !important;
  }
  
  .geolocation.nav-minidock #button-geolocation{
    display: flex;
    width: 50px !important;
    height: 50px !important;
    justify-content: center;
    align-items: center;
    background-color: #a71c20 !important;
    height: 100%;
    width: 100%;
    border-radius: 25px;
  }

  .geolocation.nav-minidock #button-geolocation .icon{
    background-position: -325px 0px !important;
  }

  #lizmap-search{
    left: 0 !important;
    background: #fff !important;
    color: #666 !important;
  }

  #nav-tab-filter a{
    color: #666 !important;
  }

  #lizmap-search-close .btn{
    background-color: #a71c20 !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 5px !important;
    padding: 4px;
    text-transform: capitalize;
    font-size: 16px;
  }

  #liz-filter-zoom, 
  #liz-filter-unfilter,
  .liz-filter-reset-field{
    background-color: #a71c20 !important;
    border-color: #a71c20 !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 5px !important;
    padding: 4px 10px;
    text-transform: capitalize;
    font-size: 16px;
    outline: none !important;
  }

  #liz-filter-zoom, #liz-filter-unfilter{
    margin-top: 10px;
  }

  .liz-filter-reset-field{
    margin-top: 10px;
    margin-bottom: 15px !important;
  }

  #liz-filter-layer-selector, #liz-filter-field-textNome, #filter-content select{
    flex-grow: 1;
    text-align: left !important;
    height: 50px;
    border: 1px solid #666;
    font-size: 16px;
    border-radius: 5px;
    padding: 0 10px !important;
  }

  #liz-filter-layer-selector, #filter-content select{
    width: 100% !important;
    max-width: 100% !important;
  }

  .liz-filter-field-box div{
    display: flex;
  }

  #filter-content b, .liz-filter-field-box span:nth-child(1){
    font-size: 16px;
    color: #666;
  }

  .liz-filter-field-box span{
    display: flex;
    line-height: 30px;
    width: 100%;
    align-items: center;
    position: relative;
    font-size: 16px;
  }

  .liz-filter-field-box .checkbox{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .liz-filter-field-box p span:nth-child(1){
    display: none;
  }

  #dock .tabbable.tabs-below,
  #dock .tabbable.tabs-below .popupcontent{
    max-height: 435px !important;
  }


  #dock .tab-content #popupcontent .menu-content{
    max-height: 380px !important;
  }
  
   #popupcontent .title,
   #popupcontent .menu-content, #popupcontent .menu-content .lizmapPopupContent h4{
    background-color: #f2f2f2 !important;
    color: #666 !important;
  }

  .popupcontent .title a{
    color: #666 !important;
  }

  .popupcontent .title span{
    visibility: hidden;
  }
  .popupcontent .title i{
    display: none;
  }

  .popupcontent .menu-content{
    background-color: #f2f2f2 !important;
    color: #666 !important;
  }

  #map-content .lizmapPopupContent h4{
    color: #666 !important;
    padding-left: 15px !important;
    border-bottom: none !important;
  }

  .lizmapPopupContent table{
    border-radius: 10px !important;
    min-width: 100%;
    /* border-color: #f2f2f2 !important; */
  }

  .lizmapPopupContent table thead tr{
    border-color: #f2f2f2 !important;
    background-color: #f2f2f2 !important;
  }

  .lizmapPopupContent table tbody tr{
    background-color: #f2f2f2 !important;
  }

  .lizmapPopupContent table tbody tr td{
    padding: 7px 5px !important;
  }

  .lizmapPopupContent table tbody tr td font{
    color: #666 !important;
  }

  .lizmapPopupContent table thead tr th{
    background: #f2f2f2 !important;
    border: 1px solid #666;
  }

  .lizmapPopupContent table thead tr th font{
    color: #666 !important;
  }

  .lizmapPopupContent table thead tr th:nth-child(1){
    border-top-left-radius: 10px;
  }
  .lizmapPopupContent table thead tr th:nth-child(2){
    border-top-right-radius: 10px;
  }
}