/**
 *------------------------------------------------------------------------------
 * ÁGUAS DE PORTUGAL - ANUAL REPORTS V-1
 *------------------------------------------------------------------------------
 * @website		resultados.adp.pt
 * @authors     SKYTRAILS
 * @System      j! 4
 *------------------------------------------------------------------------------
 */
 
 /*==============================================/
   MENUS GERAL
*/
/*FORMATAÇÃO TODOS OS MENUS*/
 ul > li > a,
 ul > li > span {
    display: block; /*Ocupa todo o tamanho de li*/
    font-size: 1.5rem;
    font-family: var(--font-title);
    font-weight: normal;    
    text-transform: uppercase;
    line-height: 60px; 
    padding: 0;
    text-decoration: none;
    /* letter-spacing: 0.05rem; */
    /* word-spacing: -0.30em; */
  } 

  li.nav-item {
    list-style-type: none;
    position: relative;
  }
 .mod-menu,
 .mod-menu.vertical  {
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0
  }
 #main-navbar .mod-menu,
 .mod-menu.horizontal {
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0
  }
/*==============================================/
  MENU PRINCIPAL
*/
/*No no modulo de menu do J4! Colocar a ID: main-menu 
esta é aplicada no primeiro "ul" da estrutura
  1º nivel <ul id="main-menu" clas="mod-menu">
  2º nivel <ul clas="mod-menu__sub">
  3º nivel <ul clas="mod-menu__sub">
*/
  #main-menu  li{
    color: inherit;
  }
  /*...................
  Menu Links Geral 
  */
  #main-menu  li > a,
  #main-menu  li > span {
    display: block; /*Ocupa todo o tamanho de li*/
    cursor: pointer;
  }
  #main-menu li:hover > a, 
  #main-menu li:hover > span {
   cursor: pointer;
  }
  /*...................
  Links level-01 
  */
  #main-menu > li{
    width: max-content;
    border-left: none;
    border-right: 1px solid var(--adp-logo-cyan);
    padding: 0 0.5rem;
  }
  /*FORMATAÇÃO LEVEL-01*/
  #main-menu > li > a,
  #main-menu > li > span {  
    /* background-color: #FFe; */
    /* border: 1px solid rgb(111, 228, 189); */
    font-size: 1.5rem;
    font-weight: normal;    
    text-transform: uppercase;
    line-height: 25px; 
    padding: 0;
    margin-top: 5px;
    color: var(--adp-logo-cyan);    
  }
  #main-menu > li:hover > a,
  #main-menu > li:hover > span {
    color: var(--adp-logo-blue);
    /* background-color: #FF7F6B; */
  } 
  #main-menu > li > a:focus{
    color: inherit;
  }
  #main-menu > li.active > a {
    color: var(--adp-logo-blue);
    font-weight: bold;
    /* background-color: #FF7F6B; */
  } 
  #main-menu > li.active:hover > a,
  #main-menu > li.active > a:focus,
  #main-menu > li.active:hover > a:focus{
    color: var(--adp-logo-blue);
    font-weight: bold;
  } 
  /*Cria uma barra de cor no link sem ocupar toda a zona do link*/
  /*#main-menu > li:hover > a::before,
  #main-menu > li:hover > span::before {
    position: absolute;
    height: calc(100% - 20px);
    width: 100%;
    left: 0;
    top: 10px;
    z-index: -1;
    transform: rotateZ(-2deg);
    content: "";
    display: inline-block;
    background: #FF7F6B;
  }
  #main-menu > li.active > a::before,
  #main-menu > li.active > span::before {
    position: absolute;
    height: calc(100% - 20px);
    width: 100%;
    left: 0;
    top: 10px;
    z-index: -1;
    transform: rotateZ(-2deg);
    content: "";
    display: inline-block;
    background: #FF7F6B;
  }*/
  /*Navegação por Tabs*/
  #main-menu li > a:focus-visible{
    background-color:  rgba(217, 221, 225, 1);
    outline: none;
  }
  #main-menu > li > a:focus-visible{
    background-color:  rgba(98, 154, 200, 0.2);
    outline: none;
  }
  /*.......................................
    LINKS LEVEL-02 &(>)
  */
  #main-menu ul > li{
    background-color: #fff;
    border-bottom: 1px dotted gray;
  }
  #main-menu ul > li:last-child {    
    border-bottom: none;
  }
  #main-menu ul > li > a, 
  #main-menu ul > li > span {
    color: rgb(0, 64, 112);
    line-height: 3.5rem;
    position: relative;
    /* width: max-content; */
    padding: 0 10px;
    z-index: 999;
  }
  #main-menu ul > li:hover  {
    color: #777;
    background-color: #FFF;
  }
  #main-menu ul > li.active  {
    color: #5c686f;
    background-color: #FFF;
  }
  #main-menu ul > li.active:hover {
    color: #5c686f;
    background-color: #FFF;
  }
  /*barrinha debaixo do menu*/
  #main-menu ul > li > a span  {
    position: relative;
    width: max-content;
    display: inline-block;
    padding: 0 4px;
  }
  #main-menu ul > li > a span::after  {
    color: #5c686f;
    position: absolute;
    height: 10px;
    width: 0%;
    left: 0;
    bottom: 15px;
    z-index: -1;
    transform: rotateZ(0deg);
    content: "";
    display: inline-block;
    background-color:rgb(213, 239, 255);
    transition: all 200ms ease-in-out;  
  }
  #main-menu ul > li:hover > a span::after  {
    width: 90%;
    height: 10px;
  }
  #main-menu ul > li.active > a span::after {
    width: 90%;
  }
  #main-menu ul > li.active:hover > a span::after {
    background: rgb(213, 239, 255);
    transform: rotateZ(1deg);
  }
  
  /*Ul > nivel 3 e adiante*/
  #main-menu ul > li ul {
    position: absolute;
    left: calc(100%);
    top: 0;
  }
  #main-menu ul {    
    position: absolute;
    left: -10px;
    top: calc(100%);
    width: max-content;
    min-width: 200px;
    padding: 5px;
    margin-bottom: 0;
    background-color: #fff;
    box-shadow: 0 5px 15px rgb(0 0 0 / 10%);
    pointer-events: auto;
    z-index: 999;
  
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 200ms ease-in-out;     
  }
  #main-menu li:last-child ul { 
    right: -20px;
    left: auto;
  }
  #main-menu a.show.focus + ul{
    visibility: visible;
    opacity: 1;
    transform: translateY(0px); 
  }  
  #main-menu li.parent > a.show.focus:focus-visible + ul,
  #main-menu li.parent > a.show.focus:focus-within + ul,
  #main-menu li.parent > a.show.focus:focus + ul,
  #main-menu li.parent:hover > a + ul,
  #main-menu li.parent:hover > span + ul{
    visibility: visible;
    opacity: 1;
    transform:translateY(0px);    
  }
  
  /*...................
 DROPDOWN ICON
  */
  /* #main-menu li.parent > a,
  #main-menu li.parent > span {
    width: 100%;
    padding-right: 30px;
  } */
  /*ICON DROPDOWN*/
  /* #main-menu > li.parent > a::after,
  #main-menu > li.parent > span::after {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    transition: 0.3s ease;
    padding: 0 9px;
    transform: rotate(90deg);    
  } */

  #main-menu > li.parent > a.show::after{
    transform: rotate(90deg)
  }
  /*l-02 &(>)*/
  #main-menu ul li.parent > a::after {
    right: 5px;
    padding: 0 10px;
  }
  #main-menu ul li.parent > a.show::after{
    transform: rotate(0deg)
  }
  .menu.horizontal.vista-sm{
    display: none
  }
  @media (max-width: 1200px) {
    .menu.horizontal{
     display: none;
   }
   .menu.horizontal.vista-sm{
    display: inline-block;
  }
  }
  
   
 /*==============================================/
   OFFCANVAS Toogler
*/
/*É necessário criar um modulo HTML*/
.toogler-area{
  padding: 0 20px 0 0;
  /* background-color: aqua; */
}
.toogler-area #mobile-cta {
  color: var(--adp-logo-cyan); 
  color: var(--adp-logo-blue);
  font-size: 32px;
  cursor: pointer;
  background-color: transparent;
  border: none;
}
.toogler-area #mobile-cta:hover {
  color: var(--pdf-blue);
  /* font-weight: bold; */
}
.toogler{
  cursor: pointer;
}
.mod-languages {
  display: none;
}
#offcanvas div.mod-languages ul li.lang-active {
  background-color: transparent;
}
#offcanvas div.mod-languages ul li a {
  padding: 0px;
}
#offcanvas .mod-languages  {
  display: inline-block;
  padding-left: 20px;
  padding-top: 5px;
}
@media (min-width: 1200px) {
  .toogler-menu{
   display: none;
 }
 .mod-languages {
  display: inline-block;
}
}

 /*==============================================/
   OFFCANVAS 
*/
.overflow{
  overflow: hidden;
}
#overlay.display{
  position: fixed;
  z-index: 9980;
  width: 100%;
  right: 0;
  top: 0;
  background-color: rgba(23, 23, 27, 0.85);
  backdrop-filter: blur(1px);
  height: 100vh;
  overflow: hidden;
}
/*==============================================/
   OFFCANVAS 
*/
/*Offcanvas body*/
#offcanvas{
  color: var(--adp-logo-blue);
  position: fixed;
  display: block;
  height: 100vh;
  width: 350px;
  overflow-y: auto;
  overflow-x: hidden;
  left: 0;
  top: 0;
  background: #fff;
  backdrop-filter: blur(1rem);
  padding: 1em;
  z-index: 9999;
  transform: translateX(-100%);
  /* transform: translateX(0%); */
  opacity: 1;
  transition: transform 350ms ease-out, opacity 350ms ease-out;
}
#offcanvas a{
  color: var(--adp-logo-blue);
}
#offcanvas a:hover{
  color: var(--pdf-blue);
}
#offcanvas *{
  visibility: hidden;
  /* visibility: visible; */
}
#offcanvas.show{
  transform: translateX(0%);
  opacity: 1;
  visibility: visible;    
}
#offcanvas.show *{
  visibility: visible;
}
/*Toggler*/
#mobile-exit{
  font-size: 30px;
  font-weight: normal;
  cursor: pointer;
  z-index: 999;
  position: absolute;
  right: 15px;
  background-color: transparent;
  border: none;
  color: var(--adp-logo-blue);
  transition: all .3s ease-in-out;
  border-radius: 100%;
  padding: 5px;
}
#mobile-exit:hover {
  /* color: #57c7ff; */
  /* transform: rotate(0deg); */
  /* transform: rotate(0deg); */
  color: var(--pdf-blue);
  /* background-color: #EBEBEB; */
 
  
}

 /*==============================================/
   MENU OFFCANVAS 
*/
#menu-offcanvas{
background-color: transparent;
  margin-top:40px;
  padding: 0px;
  width: 100%;
}

#menu-offcanvas li {
position: relative;
}
/*...................
Menu Links Geral 
*/
#menu-offcanvas li > span,
#menu-offcanvas li > a{
  color:  var(--adp-logo-blue);
  display: block;
  padding-left: 20px;
  -webkit-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
  cursor: pointer;
}
#menu-offcanvas li:hover > a, 
#menu-offcanvas li:hover > span,
#menu-offcanvas li.parent a.show{
  color: var(--pdf-blue);
cursor: pointer;

}
 /*...................
Links level-01 
*/
#menu-offcanvas > li > a,
#menu-offcanvas > li > span{
  color: var(--adp-logo-cyan); 
line-height: 3.5rem; 
font-weight: bold;    
text-transform: uppercase; 
}
#menu-offcanvas > li.parent > a.show,
#menu-offcanvas > li.parent > a.show:hover{
color: #333;
}

 /*...................
Links level-02 &(>)
*/
#menu-offcanvas ul > li > span,
#menu-offcanvas ul > li > a{    
  color: var(--adp-logo-cyan); 
  line-height: 3rem;
  background-color:  #FFF;
  border-bottom: 1px dotted rgb(200, 200, 200);
}
#menu-offcanvas ul > li:hover > span,
#menu-offcanvas ul > li:hover > a{
  /* color: #738188; */
  /* background-color:  rgb(235, 235, 235); */
  background-color:  transparent;
}
#menu-offcanvas ul > li:last-child > span,
#menu-offcanvas ul > li:last-child > a{    
  border-bottom: none;
}


/*Navegação por Tabs*/
#menu-offcanvasli > a:focus-visible{
  background-color:  rgba(45, 48, 68, 0.5);
  outline: none;
}
#menu-offcanvas > li > a:focus-visible{
  background-color:  #EBEBEB;
  outline: none;
}
/*Padings dos links 2 e 3 nível*/
#menu-offcanvas li > ul a {
padding-left: 20px;
}
#menu-offcanvas ul > li > ul a {
padding-left: 50px;
}
/**/
#menu-offcanvas ul{
list-style: none; 
position: static;
overflow: hidden;
margin-bottom: 0;
}
#menu-offcanvas ul {
  max-height: 0;
  -webkit-transition: max-height .3s ease-in-out;
  transition: max-height .3s ease-in-out;
}
#menu-offcanvas li.parent a:not(.show) + ul{
  max-height: 0;
}
#menu-offcanvas li.parent a.show + ul{
  height:auto;
  max-height: 550px;
}
#menu-offcanvas li.parent a:not(.show) + ul a{
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
#menu-offcanvas li.parent a.show + ul a{
  opacity: 1;
}

/*...................
Dropdown Icon 
*/
#menu-offcanvas li.parent > a::after{
content: "\f105";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
right: 0;
margin: 0 20px;
transition: 0.3s ease;
}
#menu-offcanvas li.parent > a.show::after{
  transform: rotate(90deg)
}




  /* MODULO LANGUAGES
 =========================================================================== */
 #main-navbar div.mod-languages ul {
  list-style:none;
  margin:0;
  padding:0;
  margin-left: 0rem;
}
#main-navbar div.mod-languages li {
  margin: 0;
  padding: 0 .5rem;
}
#main-navbar div.mod-languages ul.lang-inline li {
  display:inline-block
}
#main-navbar div.mod-languages .dropdown-menu {
  padding:.5rem 0
}
#main-navbar div.mod-languages ul.lang-block li {
  display:block;
  padding:.5rem;
  text-align:start
}
#main-navbar div.mod-languages ul li.lang-active {
  background-color:transparent;
}
#main-navbar div.mod-languages img {
  border:none;
  display:inline-block
}
#main-navbar div.mod-languages a {
  padding: 0;
  text-decoration:none
}
#main-navbar div.mod-languages li:first-of-type {
  border-left: none;
  border-right: 1px solid var(--adp-logo-cyan);
}
#main-navbar div.mod-languages .btn-group {
  display:-webkit-box!important;
  display:-ms-flexbox!important;
  display:flex!important;
  margin:0
}
#main-navbar div.mod-languages .btn-group .btn {
  -webkit-box-flex:0;
  -ms-flex:none;
  flex:none
}
div.mod-languages ul > li > a{
  line-height: 28px;
}