html,body{height:100%;margin:0;padding:0;}
nav{z-index:1100;}

.controls-container{
  position:absolute;top:64px;left:0;right:0;
  background:rgba(255,255,255,.95);
  padding:.5rem 1rem;box-shadow:0 2px 4px rgba(0,0,0,.3);
  z-index:1050;
}
.controls-container .input-field input[type="date"]{max-width:150px;}
.instructions{font-size:.9rem;color:#555;margin-top:.5rem;}

#map{position:absolute;top:128px;bottom:0;left:0;right:0;z-index:1;}

#chartsWrapper{position:absolute;bottom:1rem;left:1rem;right:1rem;pointer-events:auto;z-index:900;}
#chartsContainer{display:flex;flex-wrap:wrap;gap:1rem;position:relative;z-index:1000;}

#chartsOverlay{position:absolute;
               top:0;left:0;right:0;bottom:0;
               background:rgba(255,255,255,.8);
               z-index:950;
               /*pointer-events:none;*/
              }

#chartsContainer .card{position:relative;flex:0 0 600px;width:600px;height:350px;}
.card-content{padding:0px;height:100%;}

.help-button,.download-button,.edit-button,#backButton{
  position:absolute;top:8px;
  width:24px;height:24px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.3);z-index:1100;
}
.help-button{right:8px;}
.download-button{right:40px;font-size:.9rem;}
.edit-button{right:72px;font-size:.85rem;}
#helpDataType{left:0;right:auto;}
#backButton{left:8px;}

.modal-overlay{background:rgba(0,0,0,.2)!important;z-index:1150!important;}
.modal{z-index:1200!important;}

.menu-button{
  position:absolute;left:8px;top:64px;display:none;
  width:32px;height:32px;border-radius:4px;background:#fff;
  align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.3);z-index:1200;
}
.menu-button i{font-size:24px;}

.ratio-600-350{position:relative;width:100%;aspect-ratio:600 / 350;}
.ratio-600-350>.card-content,
.ratio-600-350>canvas,
.ratio-600-350>.card-content>canvas{
    padding:0px;
  position:absolute;
  width:100%;height:100%;
    inset:0;  
}

@media (max-width:600px) and (orientation:portrait){
  .menu-button{display:flex;}
  .controls-container{
    position:fixed;top:96px;left:0;right:0;
    transform:translateY(-200%);transition:transform .3s ease;
    max-height:calc(100vh - 64px);overflow-y:auto;
  }
  .controls-container.open{transform:translateY(0);}
  .controls-container .row{flex-direction:column!important;}
  .controls-container .col{width:100%!important;}
  #map{top:64px;}
  #chartsWrapper{left:0;right:0;bottom:0;}
  #chartsContainer{flex-direction:column;}
  #chartsContainer .card{
    flex:none;width:100%!important;height:auto;padding:0;
  }
  #chartsContainer .card:not(.ratio-600-350){
    aspect-ratio:auto;
  }
  #chartContainer,#detailChartContainer{
    width:100%!important;
  }
}

@media (max-width:900px) and (orientation:landscape){
  .menu-button{display:flex;}
  .controls-container{
    position:fixed;top:96px;bottom:0;left:0;
    width:60%;max-width:320px;
    transform:translateX(-105%);transition:transform .3s ease;
    overflow-y:auto;
  }
  .controls-container.open{transform:translateX(0);}
  .controls-container .row{flex-direction:column!important;}
  .controls-container .col{width:60%!important;}
  #map{position:fixed;top:64px;bottom:0;left:0;right:50%;}
  #chartsWrapper{position:fixed;top:64px;bottom:0;right:0;width:50%;left:auto;}
  #chartsContainer{flex-direction:column;height:100%;overflow-y:auto;}
  #chartsContainer .card{
    flex:none;width:100%!important;height:auto;
  }
}

#logosBox{
  position:absolute;
  right:10px;
  bottom:10px;
  background:#fff;
  padding:10px;
  border-radius:4px;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  z-index:1010;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
#logosBox .logo{
  width:150px;
  height:auto;
}