.elementor-907 .elementor-element.elementor-element-77b474a{--display:flex;}.elementor-907 .elementor-element.elementor-element-77b474a.e-con{--flex-grow:0;--flex-shrink:0;}/* Start custom CSS */.body.elementor-page-907 {
  width: 100%;
}

/* =========================================================
   LA PESCA IN ADRIATICO - MAPPA SFORZO DI PESCA E FORECAST

   Barra superiore:
   - logo
   - descrizione della mappa
   - pulsante informazioni

   Contenuto:
   - iframe WebGIS

   Footer:
   - attribuzione Copernicus Marine
   ========================================================= */

:root {
  --ka-navy: var(--e-global-color-primary, #09244D);
  --ka-teal: var(--e-global-color-accent, #1493c7);
  --ka-sky: var(--e-global-color-secondary, #8fc3df);
  --ka-white: var(--e-global-color-ffffff, #ffffff);
  --ka-ice: var(--e-global-color-ice, #eef5fa);
  --ka-text: var(--e-global-color-text, #18344a);
  --ka-map-bg: var(--e-global-color-map-bg, #2f3136);

  --ka-border-soft: color-mix(
    in srgb,
    var(--ka-sky) 45%,
    transparent
  );

  --wp-adminbar-h: 0px;
  --ka-bar-h: 48px;
}

body.admin-bar {
  --wp-adminbar-h: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --wp-adminbar-h: 46px;
  }
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;

  width: 100% !important;
  height: 100% !important;

  overflow: hidden !important;
  background: var(--ka-white) !important;
}

.elementor,
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget,
.elementor-widget-wrap,
.elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;

  max-width: 100% !important;
  width: 100% !important;
}

/* =========================================================
   CONTENITORE GENERALE
   ========================================================= */

#pagina-mappa-kosmos {
  position: fixed;

  top: var(--wp-adminbar-h);
  left: 0;
  right: 0;
  bottom: 0;

  width: auto;
  height: calc(100dvh - var(--wp-adminbar-h));

  overflow: hidden;

  background: var(--ka-white);
  z-index: 1;

  display: flex;
  flex-direction: column;

  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   BARRA SUPERIORE
   ========================================================= */

#barra-filtri-kosmos {
  flex: 0 0 auto;

  background: var(--ka-navy);

  margin: 0 !important;
  padding: 0;

  overflow: hidden;
}

#top-filtri-kosmos {
  min-height: var(--ka-bar-h);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;

  gap: 16px;

  width: 100%;
  padding: 6px 12px;

  box-sizing: border-box;
}

/* =========================================================
   LOGO
   ========================================================= */

.blocco-logo-kosmos {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  min-width: 0;
}

#logoLinkKosmos {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;

  text-decoration: none;
}

.logo-desktop-kosmos {
  display: block !important;

  max-width: 180px;
  max-height: 32px;

  width: auto;
  height: auto;

  object-fit: contain;
}

.logo-mobile-kosmos {
  display: none !important;

  max-width: 34px;
  max-height: 34px;

  width: auto;
  height: auto;

  object-fit: contain;
}

/* =========================================================
   TESTO INFORMATIVO
   ========================================================= */

#descrizioneMappaKosmos {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 12px;

  color: var(--ka-white);

  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;

  text-align: center;

  box-sizing: border-box;
}

#descrizioneMappaKosmos .testo-desktop-kosmos,
#descrizioneMappaKosmos .testo-mobile-kosmos {
  color: color-mix(
    in srgb,
    var(--ka-white) 94%,
    transparent
  );
}

.testo-desktop-kosmos {
  display: inline;
}

.testo-mobile-kosmos {
  display: none;
}

/* =========================================================
   PULSANTE INFORMAZIONI
   ========================================================= */

.blocco-info-kosmos {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  min-width: 0;
}

#infoLinkKosmos {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  box-sizing: border-box;

  background: var(--ka-teal);
  color: var(--ka-white);

  border: 1px solid color-mix(
    in srgb,
    var(--ka-white) 38%,
    transparent
  );

  text-decoration: none;

  font-size: 23px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-style: italic;
  line-height: 1;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

#infoLinkKosmos:hover,
#infoLinkKosmos:focus-visible {
  background: color-mix(
    in srgb,
    var(--ka-teal) 82%,
    var(--ka-white)
  );

  border-color: var(--ka-white);

  transform: translateY(-1px);
}

#infoLinkKosmos:focus-visible {
  outline: 2px solid var(--ka-white);
  outline-offset: 2px;
}

/* =========================================================
   AREA DELLA MAPPA
   ========================================================= */

#area-mappa-kosmos {
  flex: 1 1 auto;
  min-height: 0;

  width: 100%;

  overflow: hidden;

  margin: 0 !important;
  padding: 0 !important;

  position: relative;

  background: var(--ka-map-bg);

  border: 0;
  box-shadow: none;
}

/* Messaggio durante il caricamento */

#messaggioMappaVuota {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: var(--ka-white);

  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.35;
  font-weight: 600;

  padding: 40px;

  box-sizing: border-box;

  z-index: 2;

  background: transparent;
}

#messaggioMappaVuota.is-hidden {
  display: none;
}

/* =========================================================
   IFRAME
   ========================================================= */

#mappaIframe {
  display: block;

  width: 100%;
  height: 100%;
  min-height: 100%;

  border: 0;

  margin: 0;
  padding: 0;

  background: var(--ka-map-bg);

  overflow: hidden;

  position: relative;

  z-index: 1;
}

/* =========================================================
   FOOTER COPERNICUS
   ========================================================= */

#footer-copernicus-kosmos {
  flex: 0 0 auto;

  width: 100%;
  min-height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 6px 14px;

  box-sizing: border-box;

  background: var(--ka-navy);
  color: var(--ka-white);

  border-top: 1px solid var(--ka-border-soft);

  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;

  text-align: center;

  overflow: hidden;
}

#footer-copernicus-kosmos span {
  color: color-mix(
    in srgb,
    var(--ka-white) 88%,
    transparent
  );
}

#footer-copernicus-kosmos a {
  color: var(--ka-white);

  font-weight: 600;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

#footer-copernicus-kosmos a:hover,
#footer-copernicus-kosmos a:focus-visible {
  color: var(--ka-sky);
}

.citazione-desktop-kosmos {
  display: inline;
}

.citazione-mobile-kosmos {
  display: none;
}

/* =========================================================
   TABLET E SCHERMI MEDI
   ========================================================= */

@media (max-width: 1200px) {
  .logo-desktop-kosmos {
    max-width: 160px;
    max-height: 30px;
  }

  #descrizioneMappaKosmos {
    font-size: 14px;
    padding: 0 8px;
  }

  #footer-copernicus-kosmos {
    padding: 5px 10px;

    font-size: 10px;
  }
}

/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 767px) {
  :root {
    --ka-bar-h: 58px;
  }

  #top-filtri-kosmos {
    grid-template-columns: auto minmax(0, 1fr) auto;

    padding: 6px 8px;
    gap: 8px;
  }

  .logo-desktop-kosmos {
    display: none !important;

    width: 0 !important;
    max-width: 0 !important;

    height: 0 !important;
    max-height: 0 !important;

    overflow: hidden !important;
  }

  .logo-mobile-kosmos {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 36px !important;
    max-height: 36px !important;

    object-fit: contain;
  }

  #descrizioneMappaKosmos {
    justify-content: center;

    padding: 0 4px;

    font-size: 12px;
    line-height: 1.25;
    font-weight: 700;
  }

  .testo-desktop-kosmos {
    display: none;
  }

  .testo-mobile-kosmos {
    display: inline;
  }

  #infoLinkKosmos {
    width: 34px;
    height: 34px;

    font-size: 21px;
  }

  #messaggioMappaVuota {
    font-size: 18px;
    line-height: 1.35;

    padding: 24px;
  }

  #footer-copernicus-kosmos {
    min-height: 28px;

    padding: 5px 8px;

    font-size: 9px;
    line-height: 1.25;
  }

  .citazione-desktop-kosmos {
    display: none;
  }

  .citazione-mobile-kosmos {
    display: inline;
  }
}/* End custom CSS */