/* General styles */
* {
   margin: 0;
   box-sizing: border-box;
}

/* Sites layout */
.ucclogoheader {
    width: 100%;
}

.guias {
    width: 8vw;
    min-width: 130px;
}

.guia {
    width: 10vw;
    min-width: 180px;
}

.guia < p {}

.label {
    color: black;
}

.ucclinkB {
    color: #FFFFFF;
}

.ucclinkF {
    color: #E30052;
}

footer {
    height: auto;
}

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

#ucc-issue-img {
    width: 10vw;
}


/* Style for matomo widgets */

/* By default mobile-first for screens under 480px */
.pkp_structure_content, .pkp_structure_main {
   padding-right: 2px;
   padding-left: 5px;
}

.forms-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 5px;
  padding: 0 5px 0 0;
  box-shadow: 0 4px 4px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 2px 10px 0 rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 4px 4px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 2px 10px 0 rgba(0,0,0,0.2);
}

.evolution {
  width: 100%;
  height: 250px;
}

.hours {
  width: 100%;
  height: 350px;
}

.entries {
  width: 100%;
  height: 400px;
}

.visitors {
  width: 100%;
  height: 220px;
}

.social {
  width: 100%;
  height: 320px;
}

.map {
  width: 100%;
  height: 250px;
}

/* Screens over 750px like tablets */
@media only screen and (min-width: 750px) {
  .forms-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.7fr 1fr 1fr;
    grid-template-areas:
      "evolution evolution entries entries"
      "hours hours entries entries"
      "visitors social map map";
    align-items: stretch;
    height: 100%;
    padding: 10px 20px 20px 10px;
  }

  .evolution {
    grid-area: evolution;
  }

  .hours {
    grid-area: hours;
  }

  .entries {
    grid-area: entries;
    height: 100%;
  }

  .visitors {
    grid-area: visitors;
    min-height: 250px;
  }

  .social {
    grid-area: social;
    min-height: 320px;
  }

  .map {
    grid-area: map;
    min-height: 320px;
  }

}

/* Screens over 960px like tablets or desktops */
@media only screen and (min-width: 960px) {
   .pkp_structure_content, .pkp_structure_main {
      padding-right: 15px;
      padding-left: 15px;
   }
}