:root
   {
     --margem: 5px;
     --borda: 5px;
     --raio: 4px;
     --transp: .5;
     --margem-janela: 50px;
   }

   html, body, #map
   {
     height: 100%;
     margin: 0;
   }

   #map-container
   {
     position: relative;
     height: 100dvh;
   }

   #controles
   {
     position: absolute;
     top: var(--margem);
     left: var(--margem);
     z-index: 1000;
     display: flex;
     flex-direction: column;
     gap: var(--margem);
   }

   .botoes-controle
   {
     display: none;
   }

   .controle
   {
     position: relative;
     padding: var(--borda);
     border-radius: var(--raio);
     font-family: sans-serif;
     font-size: 13px;
   }

   #zoom-controle label,
   #cota-controle label
   {
     display: block;
     margin-bottom: var(--borda);
   }

   #info-centro
   {
     position: static;
     top: var(--margem);
     left: var(--margem);
     z-index: 1000;
     pointer-events: auto;
   }

   .botoes-controle button
   {
     font-size: 20px;
     width: 32px;
     height: 32px;
   }

   .controle input
   {
     width: 180px;
   }

   .leaflet-top.leaflet-right
   {
     top: var(--margem);
     right: var(--margem);
   }

   .leaflet-top .leaflet-control
   {
     margin-top: 0;
   }

   .leaflet-right .leaflet-control
   {
     margin-right: 0;
   }

   .leaflet-top.leaflet-right .fullscreen-controle
   {
     margin-top: 0;
     margin-bottom: var(--margem);
   }

   .fullscreen-controle a
   {
     background: transparent;
   }

   .leaflet-top.leaflet-right .fullscreen-controle a
   {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     color: black;
     text-decoration: none;
     font-size: 30px;
   }

   .leaflet-control-layers,
   .leaflet-control.leaflet-bar.fullscreen-controle,
   .leaflet-touch .leaflet-bar a.fullscreen-botao
   {
     border-radius: var(--raio);
   }

   #cota-controle
   {
     position: relative;
   }

   #anos-cota
   {
     display: none;
     position: fixed;
     left: 50%;
     bottom: 30px;
     transform: translateX(-50%);
     background: rgb(255,0,0);
     padding: var(--borda);
     border-radius: var(--raio);
     white-space: nowrap;
     font-family: sans-serif;
     font-size: 13px;
     z-index: 1000;
   }

   #anos-cota.visivel
   {
     display: block;
   }

   .leaflet-bottom.leaflet-right
   {
     left: 50%;
     right: auto;
     transform: translateX(-50%);
   }

   #info-centro,
   .controle,
   .leaflet-control-layers,
   .fullscreen-controle
   {
     background: rgb(255,255,255);
   }

   #info-centro,
   .controle,
   .leaflet-control-layers,
   .fullscreen-controle
   {
     opacity: var(--transp);
   }

   #info-centro:active,
   .controle:active,
   .leaflet-control-layers:active,
   .fullscreen-controle:active
   {
     opacity: 1;
   }

   .leaflet-control-zoom,
   .leaflet-control-layers,
   .leaflet-control-attribution,
   .fullscreen-controle,
   .controle
   {
     user-select: none;
     -webkit-user-select: none;
     -webkit-touch-callout: none;
   }

   #valor-centro
   {
     user-select: text;
     -webkit-user-select: text;
   }

   @media (hover: hover) and (pointer: fine)
   {
     #info-centro:hover,
     .controle:hover,
     .leaflet-control-layers:hover,
     .fullscreen-controle:hover
     {
       opacity: 1;
     }
   }

   .leaflet-control-layers-expanded
   {
     opacity: 1 !important;
   }

   #disclaimer
   {
     position: relative;
     display: inline-block;
   }

   #icone-disclaimer
   {
     cursor: pointer;
     position: fixed;
     left: 10px;
     width: 50px;
     opacity: .7;
     transition:
       opacity .15s ease,
       transform .15s ease;
     z-index: 10000;
     user-select: none;
     -webkit-user-drag: none;
     -webkit-user-select: none;
     -webkit-touch-callout: none;
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
   }

   #icone-disclaimer.aberto
   {
     opacity: 1;
     transform: scale(1.5);
   }

   @media (hover: hover) and (pointer: fine)
   {
     #icone-disclaimer:hover
     {
       opacity: 1;
       transform: scale(1.5);
     }
   }

   #janela-disclaimer
   {
     font-family: "Inter", sans-serif;
     pointer-events: none;
     position: fixed;
     left: 50%;
     top: 50%;
     max-width: calc(100vw - 2 * var(--margem-janela));
     max-height: calc(100dvh - 2 * var(--margem-janela));
     box-sizing: border-box;
     padding: 1.2rem;
     border-radius: .8rem;
     background: white;
     box-shadow: 0 0 25px #0008;
     z-index: 10001;
     touch-action: manipulation;
     opacity: 0;
     transform: translate(-50%, calc(-50% + 50px)) scale(.9);
     transition:
       opacity .5s ease,
       transform .5s ease;
   }

   #janela-disclaimer.visivel
   {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
     pointer-events: auto;
   }

   #btn-entendi:focus
   {
     outline: none;
   }

   #btn-entendi:focus-visible
   {
     outline: 0;
     outline-offset: 0;
   }

   @media (orientation: portrait)
   {
     #janela-disclaimer {
       max-height: 57vh;
     }
   }

   @media (orientation: landscape)
   {
     #janela-disclaimer {
       max-height: 30vh;
     }
   }

   #janela-disclaimer h2
   {
     margin: 0;
     display: block;
     text-align: center;
   }

   #fundo-disclaimer
   {
     position: fixed;
     inset: 0;
     background: #0007;
     display: none;
     z-index: 10000;
     touch-action: none;
   }

   .botoes-disclaimer
   {
     display: block;
     text-align: center;
   }

   .botoes-disclaimer button
   {
     margin: 20px 0 0 0;
     padding: 10px 15px;
   }

   /* celular */
   @media (max-width: 40rem) and (pointer: coarse)
   {
     .leaflet-top.leaflet-right .fullscreen-controle a span
     {
       transform: translateY(1.5px);
     }
   }

   /* tela estreita */
   @media (max-width: 40rem)
   {

     #controles
     {
       top: auto;
       bottom: var(--margem);
       left: var(--margem);
       right: var(--margem);
       flex-direction: row;
       justify-content: space-between;
       pointer-events: none;
     }

     .botoes-controle
     {
       display: flex;
       flex-direction: column;
     }

     #zoom-controle,
     #cota-controle
     {
       pointer-events: auto;
       display: flex;
       flex-direction: column;
     }

     #zoom-controle label,
     #cota-controle label
     {
       display: flex;
       flex-direction: column;
       text-align: center;
       font-size: 0.8em;
       margin-bottom: var(--borda);
     }

     .botoes-controle button:first-child
     {
       margin-bottom: var(--borda);
     }

     #info-centro
     {
       position: fixed;
       top: var(--margem);
       left: var(--margem);
     }

     #zoom-slider,
     #cota-slider
     {
       display: none;
     }

     #zoom-controle button,
     #cota-controle button
     {
       border: 1px solid #aaa;
       border-radius: var(--raio);
     }

     .leaflet-control-attribution
     {
       font-size: .75em;
     }

   }