@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "ui-sans-serif", "Segoe UI", Arial;
}

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

.page-content-full {
  width: 100%;
  position: relative;
  clear: both;
}

#map {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
}

.dashboard-panel {
  width: 320px;
  position: absolute;
  padding: 6px 12px 12px;
  background-color: #fff;
  border-radius: 6px;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dashboard-panel.left {
  left: 20px;
  top: 20px;
}

.dashboard-panel.top-right {
  position: absolute;
  width: 300px;
  right: 20px;
  top: 20px;
}

.leaflet-top {
  margin-top: 96px !important;
}

.leaflet-control.info {
  right: 10px;
}

.leaflet-control.leaflet-control-layers, .leaflet-control.info {
  width: 300px;
}

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

.leaflet-control.leaflet-control-zoom {
  top: 0 !important;
}

.leaflet-draw.leaflet-control {
  left: 320px !important;
  top: 100px !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 1001 !important;
}

.zmu-area-actions button {
  padding: 3px 6px;
  color: #fff;
  border-radius: 3px;
  background-color: #0060be;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none !important;
  cursor: pointer;
}

.zmu-area-actions button:hover {
  background-color: #001e3c;
}

.zmu-charts {
  display: grid;
  grid-template-columns: repeat(2, 325px);
  gap: 4px;
}

.zmu-chart {
  position: relative;
  width: 325px;
  height: 225px;
  background: #fff;
}

.zmu-chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 13px Arial, sans-serif;
  color: #888;
}

.zmu-chart iframe {
  position: relative; /* stacks above the loading text */
  display: block;
  width: 325px;
  height: 225px;
  border: 0;
  background: transparent;
}

h2, h3 {
  margin: 0;
  padding: 0;
}

.flex-center {
  display: flex;
  justify-content: center;
}

.box {
  width: 15px;
  height: 15px;
  border-radius: 25px;
  display: inline-block;
}

.animation_link {
  font-size: 130%;
  color: blue;
  font-weight: bold;
}

.label { /*
color: white;
padding: 8px;
font-family: Arial;
font-weight: bold;*/ }

/*
.tpl_line { background-color: #2196F3; }

*/
header {
  position: relative;
  background-color: #fff;
  width: 100%;
  z-index: 999;
  float: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#top-bar {
  width: 100%;
  padding: 0 20px;
  height: 50px;
  position: relative;
}
#top-bar::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(rgba(0, 0, 0, 0.15), transparent);
  z-index: 999;
  pointer-events: none;
}

#top-bar {
  display: flex;
  align-items: center;
}

#logo-box {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

#priority-logo-box {
  flex: 1.5;
  display: flex;
  justify-content: center;
}

.top-bar-menu {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

#logo-box img {
  width: 120px;
  margin-top: 3px;
}

#priority-logo-box img {
  width: 480px;
  margin-top: 6px;
}

a.logo img {
  max-width: 100%;
}

.top-bar-menu {
  margin-right: 20px;
  font-size: 1rem;
  line-height: calc(50px - 5px);
}
.top-bar-menu ul {
  list-style-type: none;
}
.top-bar-menu ul li {
  display: inline;
  margin-left: 20px;
}
.top-bar-menu ul li a {
  color: #0060be;
}
.top-bar-menu ul li a:hover {
  text-decoration: underline;
  color: #001e3c;
}

nav {
  clear: both;
  width: 100%;
  font-size: 1rem;
}
nav ul {
  list-style: none;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
nav ul li {
  display: inline-flex;
  margin: 0;
  position: relative;
  text-align: center;
}
nav ul li a {
  color: #222;
  padding: 10px 14px;
  display: inline-block;
}
nav ul li a:hover {
  color: #000;
  background-color: rgb(243, 244, 246);
}
nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 100;
}
nav ul li:hover ul {
  display: block;
  white-space: nowrap;
}
nav ul li ul li {
  display: block;
}

.nav-home i {
  color: #888;
}

.nav-private i {
  color: #4CAF50;
}

.nav-transit i {
  color: rgb(59, 130, 246);
}

.nav-scenario i {
  color: #000;
}

.nav-charge i {
  color: rgb(234, 179, 8);
}

.nav-impacts i {
  color: rgb(168, 85, 247);
}

.nav-best {
  color: #326bbb;
}

nav.legacy a {
  background: #000;
  border-radius: 5px;
  font-size: 1.2em;
  color: white;
  padding: 3px 8px;
}
nav.legacy .col_home {
  background-color: #6b0000;
}
nav.legacy .col_privata {
  background-color: #4CAF50;
}
nav.legacy .col_collettivo {
  background-color: #0000ff;
}
nav.legacy .col_scenari {
  background-color: #ffa500;
}
nav.legacy .col_impatti {
  background-color: #76a5af;
}
nav.legacy .col_ev_charging_station {
  background-color: rgb(234, 179, 8);
}
nav.legacy .IEA_statistics {
  background-color: #ededed;
  color: blue;
}

/* === HAMBURGER (MOBILE) === */
.hamburger {
  display: none;
  position: fixed;
  top: 6px;
  left: 10px;
  z-index: 9999;
  background: #333;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  width: 38px;
  height: 38px;
  border-radius: 4px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* === SIDEBAR NAV (MOBILE) === */
.sidebar-nav {
  display: none;
  position: fixed;
  top: 0;
  left: -280px;
  width: 270px;
  height: 100%;
  z-index: 10000;
  background: #fff;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  transition: left 0.3s ease;
  padding-top: 10px;
}

.sidebar-nav.open {
  left: 0;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
}

.sidebar-overlay.show {
  display: block;
}

.sidebar-nav .side-link {
  display: block;
  padding: 6px 10px;
  text-decoration: none;
  font-weight: 400;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.sidebar-nav .side-link:hover {
  color: #000;
  background-color: rgb(243, 244, 246);
}

.sidebar-nav a.side-link {
  color: #000;
}

.sidebar-nav .side-link i {
  width: 24px;
}

.sidebar-nav .bottom-links {
  margin-top: 20px;
}

.sidebar-nav .bottom-links i {
  color: #999;
}

#sidebar {
  position: absolute;
  top: 120px;
  left: 2%;
  border: solid 1px #ccc;
  width: 320px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7803921569);
  padding: 10px;
  z-index: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

main {
  width: 280px;
  margin: 0 auto;
  overflow-y: auto;
  /*    div {
          background: transparent;
          color: white;
          padding: 1px;
          margin: 5px auto;
      }*/
}

.innerDiv {
  position: absolute;
  width: 10%;
  height: 15%;
  background-color: #b2b2ff;
  opacity: 0.8;
  margin-top: 1%;
  margin-left: 5%;
  z-index: 800;
  padding-top: 1%;
  text-overflow: ellipsis;
  overflow: hidden;
}

section.controls { /*
width: 350px;
position: absolute;
top: 115px;
left: 15px;
background-color: rgba(128, 128, 128, 0.5);
*/ }

.dashboard-panel h2 {
  margin: 5px 0;
}

.dashboard-panel input, .dashboard-panel select, .dashboard-panel button[type=submit] {
  cursor: pointer;
  width: 100%;
  height: 32px;
  font-size: 16px;
  padding-left: 8px;
  border-radius: 6px;
  border: none;
  background-color: #f2f2f2;
}

.dashboard-panel input:hover, .dashboard-panel select:hover {
  background-color: #e9e9e9;
}

/* .page-content-full is display:flex -- this makes the form a fixed-width
   flex child docked to the left, with the map filling the rest of the row. */
.field {
  margin-bottom: 1em;
}

.field label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.3em;
}

.dashboard-panel input.submit, .dashboard-panel button[type=submit] {
  font-weight: bold;
  letter-spacing: 0.02em;
  background-color: rgb(27, 100, 196);
  color: #efefef;
}

.dashboard-panel input.submit:hover, .dashboard-panel button[type=submit]:hover {
  color: #fff;
  background-color: rgb(19, 76, 151);
}

/* The project's own global reset CSS resets `td` background/border (see
   the universal `*`/table resets used elsewhere in base.html's
   stylesheet); daterangepicker.css relies on `.daterangepicker td.active`
   for its highlight fill, which can lose this fight depending on
   stylesheet load order. Re-assert it here, loaded after both, so the
   start/end-date highlight is never silently overridden.

   Important: .in-range must NOT win over .active when a cell carries
   both classes at once -- this happens routinely, since daterangepicker's
   own hoverDate() preview logic adds 'in-range' to whichever cell is
   currently hovered (including the just-picked start-date cell itself)
   while a new range is mid-selection. Giving .in-range blanket !important
   was the actual bug: it overrode the start-date cell's blue fill the
   moment the mouse moved, for any day except the last of the month (the
   one boundary case where there's no further cell to hover into). */
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #357ebd !important;
  border-color: transparent !important;
  color: #fff !important;
}

.daterangepicker td.in-range:not(.active) {
  background-color: #ebf4f8 !important;
}

/* ── ui ─────────────────────────────────────── */
.ui {
  max-width: 100%;
  padding: 0.5rem 0;
}

.ui form {
  margin-top: 10px;
  margin-bottom: 10px;
  clear: both;
}

.ui p {
  margin: 10px 0;
}

.ui h2 {
  font-size: 1.3rem;
  text-transform: none;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 1.25rem;
}

.ui h3 {
  font-size: 1.1rem;
  text-align: center;
  font-weight: 600;
  margin: 0 0 1rem;
}

.ui h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.ui hr {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 1.25rem 0;
}

.ui .field {
  margin-bottom: 1.1rem;
}

.ui label {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ui .radio-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
  color: #1e293b;
  cursor: pointer;
}

.ui select,
.ui input[type=text] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.9rem;
  background: #fff;
  color: #1e293b;
  box-sizing: border-box;
}

.ui input[type=text]::-moz-placeholder {
  color: #94a3b8;
}

.ui input[type=text]::placeholder {
  color: #94a3b8;
}

.ui select:focus,
.ui input[type=text]:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.ui .actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 1.25rem;
}

.ui button, .ui input.btn {
  width: 100%;
  padding: 9px 14px;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 6px;
  border: 0px solid #cbd5e1;
  background: #fff;
  color: #1e293b;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.ui button:hover, .ui input.btn:hover {
  background: #f8fafc;
}

.ui button:active,
.ui input.btn:active {
  transform: scale(0.98);
}

/* blue */
.ui button.blue, .ui input.btn.blue {
  background-color: #2563eb;
  color: #fff;
  border-color: #1d4ed8;
}

.ui button.blue:hover, .ui input.btn.blue:hover {
  background-color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

/* red */
.ui button.red, .ui input.btn.red {
  background-color: #dc2626;
  color: #fff;
  border-color: #b91c1c;
}

.ui button.red:hover, .ui input.btn.red:hover {
  background-color: #b91c1c;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}

/* yellow */
.ui button.yellow, .ui input.btn.yellow {
  background-color: #f59e0b;
  color: #fff;
  border-color: #d97706;
}

.ui button.yellow:hover, .ui input.btn.yellow:hover {
  background-color: #d97706;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

.ui button.black, .ui input.btn.black {
  background-color: #1f1f1f;
  color: #eee;
  border-color: #fecaca;
}

.ui button.black:hover, .ui input.btn.black:hover {
  background-color: #000;
  color: #fff;
}

.leaflet-control.leaflet-control-layers {
  width: 300px !important;
  top: 0 !important;
  margin-top: 120px !important;
}

.leaflet-control.leaflet-control-layers form {
  padding: 0px 2px;
}

.leaflet-control-layers label {
  font-size: 0.8em !important;
}

.leaflet-touch .leaflet-control-layers-toggle {
  margin-left: -18px;
  float: left;
  line-height: 44px;
  margin-top: -8px;
}

.leaflet-control-layers-toggle-label {
  font-weight: bold;
}

.leaflet-touch .leaflet-control-layers-toggle input[type=radio] {
  transform: scale(1) !important;
}

.leaflet-control.info {
  background: #fffbeb;
  border: 1px solid #fde68a !important;
  color: #92400e;
}

.leaflet-control.info .info-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  line-height: 1.5;
}

.info-box i {
  color: #f59e0b;
  margin-top: 4px;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.drp-calendar.right {
  display: none !important;
}

.leaflet-control.legend {
  background: #fff;
  border-color: #ccc !important;
}

/*
.leaflet-control.legend {width:auto !important;}
*/
.leaflet-control {
  border-radius: 6px;
  border: solid 1px #ccc !important;
  font-size: 1rem !important;
  right: 20px;
  color: #000;
  padding: 10px 20px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.leaflet-control.leaflet-control-zoom {
  border: none !important;
  box-shadow: none !important;
  padding: 0 20px !important;
}

.leaflet-control-zoom-in, .leaflet-control-zoom-out {
  outline: solid 1px #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}

.leaflet-touch .leaflet-bar a:last-child {
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

.leaflet-bottom {
  bottom: 160px !important;
}

.legend {
  text-align: left;
  line-height: 18px;
  color: #555;
  font-size: 0.875em;
}
.legend i {
  width: 12px;
  height: 12px;
  float: left;
  margin-right: 4px;
  opacity: 0.7;
}

.legend_censuary {
  text-align: left;
  line-height: 10px;
  color: #555;
  font-size: 10px;
}

.legend_ZMU {
  text-align: left;
  line-height: 15px;
  color: #555;
  font-size: 12px;
}

#home_locations {
  position: absolute;
  width: 100%;
  top: 60px;
  margin-top: 40px;
  right: 20px;
  padding: 10px;
  z-index: 400;
  color: #fff;
  background-color: #000099;
}

#heatmapContainerWrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.1);
}

#heatmapContainer {
  width: 10%;
  height: 10%;
  z-index: 700;
}

#heatmapLegend_N_buses {
  background: white;
  position: absolute;
  bottom: 215px;
  right: 0;
  padding: 10px;
  z-index: 700;
  font-size: 18px;
  display: inline;
}

#min_buses, #min_emiss {
  float: left;
}

#max_buses, #max_emiss {
  float: right;
}

.FCD_trips_animation {
  margin-left: 10px;
  margin-top: 525px;
}

div#loading {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 700;
  width: 270px;
  height: 270px;
  margin: -76px 0 0 -76px;
  background: url(/static/loadingimage_TPL.gif) no-repeat;
  cursor: wait;
}

#loader {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-right: 16px solid yellow;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
  animation: spin 2s linear infinite;
  -webkit-animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
div#loading_refresh {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 700;
  width: 270px;
  height: 270px;
  margin: -76px 0 0 -76px;
  background: url(/static/loadingimage_TPL.gif) no-repeat;
  cursor: wait;
}

footer {
  font-size: 0.8em;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 30px;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  z-index: 998;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-links {
  width: 100%;
  text-align: center;
}

.disclaimer {
  width: 90%;
  text-align: center;
  text-align: center;
  color: #666;
}

footer i {
  color: #666;
}

body.page-home {
  background-image: url("/static/merged_short_animations.gif");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
body.page-home .col_best {
  display: none;
}

table, th, td {
  border: 1px solid black;
}

table.center_table {
  margin-left: auto;
  margin-right: auto;
}

.rds_logo {
  margin-left: 25px;
  margin-top: 20px;
}

.ENEA_logo {
  margin-left: 20px;
  margin-top: 20px;
}

.img_ENEA {
  margin-left: 20px;
  margin-top: 20px;
}

.animation_link_IEA_STATS {
  font-size: 130%;
  color: #0f45d2;
  font-weight: bold;
}

#splash-box-ext {
  clear: both;
  padding-top: 30px;
  width: 100%;
}

#splash-box {
  width: 80%;
  max-width: 600px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  border: solid 0px #666;
  text-align: center;
}

#splash-box .img-logo {
  width: 90%;
  margin: 10px auto;
  display: inline-block;
}

#splash-box .img-logo img {
  width: 100%;
  height: auto;
}

footer {
  text-align: center;
}

footer a {
  color: #0060be;
}

footer a:hover {
  color: #001e3c;
}

footer .notes {
  color: #999;
}

.iubenda-container {
  position: fixed;
  bottom: 10px;
  left: 20px;
  width: 100%;
  text-align: left;
}

/* === TEXT PAGES === */
.text-container {
  clear: both;
  width: 90%;
  margin: 0 auto;
  max-width: 960px;
  padding: 20px 0;
}

.text {
  font-size: 1.1rem;
  line-height: 1.3em;
  text-align: justify;
  color: #222;
  padding-bottom: 120px;
  letter-spacing: -0.02em;
}

.text h1 {
  font-size: 28px;
  text-align: center;
  margin: 16px 0;
  line-height: 1.1em;
}

.text h2 {
  color: #0060be;
  font-size: 24px;
  margin: 12px 0;
  line-height: 1.1em;
}

.text h3 {
  color: #333;
  font-size: 20px;
  margin: 8px 0;
}

.text h4 {
  color: #111;
  font-size: 18px;
  margin: 6px 0;
}

.text .text-center, .text .center {
  text-align: center;
}

.text .text-left, .text .left {
  text-align: left;
}

.text .text-right, .text .right {
  text-align: right;
}

.text a {
  color: #0060be;
}

.text a:hover {
  color: #001e3c;
}

.text p {
  margin: 10px 0;
}

.text ul, .text ol {
  padding-left: 18px;
}

.text li {
  margin: 3px 0;
}

@media (max-width: 1440px) {
  nav {
    font-size: 0.8rem;
  }
}
.text table {
  border-collapse: collapse;
  border-color: #666;
  margin: 20px 0 15px;
  font-size: 1rem;
}

.text table th {
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
}

.text table td, .text table th {
  padding: 3px 6px;
}

.text table td {
  font-size: 0.9rem;
}

.dashboard-close {
  display: none;
}

.daytype-group label {
  margin: 3px 0;
}

.dashboard-panel input[type=radio] {
  margin-top: 3px;
  width: auto !important;
  height: auto !important;
  transform: scale(1);
  float: left;
  margin-right: 8px;
}

#dashboard-panel {
  left: 20px;
  top: 20px;
}

#dashboard-panel form {
  margin: 6px 0;
}

#dashboard-panel select {
  width: 100% !important;
}

#form1 {
  width: 100% !important;
}

.btn-primary {
  background-color: #0060be !important;
  color: #dedede !important;
}

.btn-primary:hover {
  background-color: #001e3c !important;
  color: #fff !important;
}

.leaflet-left {
  left: 20px !important;
  top: 30px !important;
}

.dashboard-toggle {
  display: none; /* hidden on desktop */
  margin: 0 auto;
  width: 100%;
  height: 40px;
  text-align: center !important;
  font-size: 2rem;
  cursor: pointer;
  border: none;
  background: transparent;
  line-height: 40px !important;
  font-size: 24px;
}

.dashboard-toggle i {
  line-height: 40px;
  padding-left: 6px;
}

.info.legend .legend-body {
  padding: 6px 8px;
  display: block;
}

.info.legend.dashboard-open .legend-body {
  display: block;
}

.legend-toggle-btn {
  display: flex; /* sempre visibile, non solo mobile */
  margin-left: -6px;
  margin-top: -5px;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  #nav-desktop ul li a {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 820px) {
  #nav-desktop ul li a {
    padding: 6px 5px;
  }
}
@media (max-width: 768px) {
  header {
    position: fixed;
  }
  #top-bar .logo {
    margin-left: 40px;
  }
  #priority-logo-box {
    flex: 1.8;
  }
  .top-nav {
    display: none;
  }
  .top-bar-menu {
    display: none;
  }
  #nav-desktop {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .sidebar-nav {
    display: block;
  }
  .page-content-full {
    height: calc(100vh - 0px);
    padding-top: 0;
  }
  #refreshButton {
    top: 10px;
    right: 10px;
    font-size: 0.8rem;
  }
  .text-container {
    padding: 50px 0;
  }
  .dashboard-open .dashboard-toggle {
    margin-top: -8px;
    margin-left: -6px;
  }
  .dashboard-header, .dashboard-body {
    display: none;
  }
  .dashboard-panel {
    width: 40px;
    height: 40px;
    padding: 0px 2px;
    overflow: hidden;
    transition: width 0.3s, height 0.3s;
  }
  .dashboard-panel.left {
    left: 10px !important;
    top: 60px !important;
  }
  .dashboard-panel.dashboard-open {
    width: 300px !important; /* your normal size */
    height: auto !important;
    padding: 10px !important;
  }
  .dashboard-panel.top-right {
    top: 60px !important;
    right: 10px !important;
    width: 40px;
    height: 40px;
    padding: 0 2px;
  }
  .leaflet-control.leaflet-control-zoom {
    top: 10px !important;
    left: 10px !important;
  }
  .leaflet-top {
    margin-top: 10px !important;
  }
  .dashboard-toggle {
    display: inline-block;
  }
  .dashboard-header,
  .dashboard-body {
    display: none;
  }
  .dashboard-panel.dashboard-open .dashboard-header,
  .dashboard-panel.dashboard-open .dashboard-body {
    display: block;
  }
  dashboard-panel.dashboard-open {
    padding: 10px;
  }
  /* Dashboard toggle visible as hamburger */
  .dashboard-toggle {
    display: flex;
  }
  .dashboard-toggle .dash-label {
    display: inline;
    font-size: 0.9rem;
  }
  .leaflet-control-layers {
    position: fixed !important;
    top: 10% !important;
    right: 10px !important;
    width: 50px !important;
    height: 50px !important;
    z-index: 999 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .leaflet-control.leaflet-control-layers {
    width: 50px !important;
    height: 50px !important;
  }
  .leaflet-control.leaflet-control-layers.leaflet-control-layers-expanded {
    width: 300px !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Hide the form by default on mobile */
  .leaflet-control-layers .leaflet-control-layers-list {
    display: none !important;
  }
  /* When expanded, show the form but constrain it */
  .leaflet-control-layers.leaflet-control-layers-expanded {
    width: 200px !important;
    height: auto !important;
    overflow: visible !important;
  }
  .leaflet-control-layers.leaflet-control-layers-expanded .leaflet-control-layers-list {
    display: block !important;
    height: auto !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
  }
  .leaflet-draw.leaflet-control {
    left: -40px !important;
    top: 40px !important;
  }
  .leaflet-control.info {
    color: #92400e;
    width: 40px !important;
    overflow: hidden;
    height: 40px !important;
    padding: 0 2px !important;
  }
  .leaflet-control.info.dashboard-open {
    width: 300px !important; /* your normal size */
    height: auto !important;
    padding: 10px !important;
  }
  .leaflet-draw.leaflet-control {
    left: -40px !important;
  }
  .leaflet-container .leaflet-control-attribution {
    position: fixed;
    bottom: 75px;
    left: 10%;
    width: 80%;
    font-size: 12px !important;
    text-align: center;
    padding: 2px !important;
  }
  footer {
    height: 70px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px 8px;
  }
}/*# sourceMappingURL=style.css.map */