.pag {
  background-color: #f8f9fc;
  min-height: 100vh;
  font-family: "Montserrat", sans-serif;
}
.res-menu {
  display: none;
  background: #0059b2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2rem;
  z-index: 2000;
}
.res-menu h1 {
  color: #fff;
  text-align: center;
  margin-top: 0.5rem;
  font-weight: bold;
}
.res-menu h1 a {
  text-decoration: none;
  color: #fff;
}
.res-menu .btn-open-menu {
  width: 1.5rem;
  height: 1.5rem;
  position: fixed;
  z-index: 2000;
  top: 0.4rem;
  left: 0.5rem;
}
.res-menu .btn-open-menu img {
  width: 1.2rem;
}
.res-menu .btn-close-menu {
  display: none;
  width: 1.5rem;
  height: 1.5rem;
  position: fixed;
  z-index: 2000;
  top: 0.5rem;
  left: 0.5rem;
}
.res-menu .btn-close-menu img {
  width: 1rem;
}
.res-menu-items {
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  background: #0059b2;
  position: fixed;
  top: 2rem;
  left: 0;
  width: 100%;
  z-index: 2000;
}
.res-menu-items li {
  border-top: 1px solid #fff;
}
.res-menu-items li a {
  height: 3rem;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.res-menu-items li a .icon {
  display: inline-block;
  margin-right: 0.5rem;
}
.res-menu-items li a .icon svg {
  width: 1rem;
}
.res-menu-items li a .icon svg path {
  fill: #ffffff;
  stroke: #ffffff;
  transition: all 0.3s ease;
}
.res-menu-items li a .title {
  color: #ffffff;
  display: inline-block;
  text-align: center;
  font-size: 11px;
  transition: all 0.3s ease;
}
.side-menu {
  background: #0059b2;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 6.5rem;
  padding: 0 16px;
  overflow-y: auto;
  overflow-x: hidden;
}
.side-menu ul li {
  border-bottom: 1px solid #ffffff;
}
.side-menu ul li a {
  text-decoration: none;
  display: block;
  padding: 12px 0;
}
.side-menu ul li a:hover .title {
  color: #ff7e14;
}
.side-menu ul li a:hover .icon svg path,
.side-menu ul li a:hover .icon svg * {
  fill: #ff7e14 !important;
  stroke: #ff7e14 !important;
}
.side-menu ul li a img {
  width: 100%;
}
.side-menu ul li a .icon {
  display: block;
  text-align: center;
}
.side-menu ul li a .icon svg {
  width: 1.5rem;
  height: 1.5rem;
}
.side-menu ul li a .icon svg path {
  fill: #ffffff;
  stroke: #ffffff;
  transition: all 0.3s ease;
}
.side-menu ul li a .title {
  color: #ffffff;
  display: block;
  text-align: center;
  font-size: 11px;
  transition: all 0.3s ease;
}
.top-bar {
  display: none;
  background: #ffffff;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
  height: 4.375rem;
  position: fixed;
  top: 0;
  right: 0;
  width: calc(100% - 6.5rem);
}
.cnt {
  padding-left: 6.5rem;
}
.cnt main {
  padding: 0.75rem;
}
.dashboard {
  display: flex;
  flex-wrap: wrap;
  padding: 0 !important;
  margin: 0;
}
.card {
  display: inline-block;
  border: 1px solid #e3e6f0;
  box-shadow: 0 0.15rem 1.15rem 0 rgba(58, 59, 69, 0.15);
  background: #ffffff;
}
.dashboard .card {
  width: 100%;
  height: 100vh;
  margin: 0;
  position: relative;
}
.dashboard .card header {
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.dashboard .card header .updated_at {
  font-size: 0.7rem;
  margin-top: 0.3rem;
}
.dashboard .card #map {
  width: 100%;
  height: calc(100% - 3.5rem);
  background: #ffffff;
}
.leaflet-container a.leaflet-popup-close-button,
.leaflet-popup-tip-container {
  display: none;
}
.card header {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #e3e6f0;
  flex-wrap: wrap;
}
.card header h2 {
  color: #0059b2;
  font-weight: 700;
  width: 100%;
}
.card header h2 {
  color: #0059b2;
  font-weight: 700;
  width: 100%;
}
.card header .updated_at {
  font-size: 0.7rem;
  margin-top: 0.3rem;
}
.card header a svg {
  width: 1.2rem;
  height: 1.2rem;
}
.card header a svg path {
  transition: all 0.3s ease;
}
.card header a:hover svg path {
  fill: #0059b2;
}
.card .content {
  padding: 10px;
}
.cnt > main > header {
  margin: 0.75rem;
}
.cnt > main > header > h1 {
  color: #5a5c69;
  font-size: 1.75rem;
}
.nivel-rios .points li {
  width: calc(100% - 1.5rem);
  margin: 0.75rem;
}
.nivel-rios .chart-telemetria,
.nivel-rios .chart-pluviometro {
  height: 20rem;
}
.nivel-rios {
  color: #5a5c69;
}
.nivel-rios .label {
  font-weight: 700;
}
.popup-icon-point {
  position: absolute;
  top: -25px;
  left: -25px;
  width: 3rem;
}
.popup-icon-point.maintenance {
  width: 2rem;
  top: -15px;
  left: -15px;
}
.leaflet-popup-content {
  display: flex;
  flex-wrap: wrap;
  width: 100px;
  align-items: center;
}
.dc-popup-monitoring .leaflet-popup-content-wrapper {
  border: 8px solid #33aa33;
}
.dc-popup-atention .leaflet-popup-content-wrapper {
  border: 8px solid rgb(237, 226, 27);
}
.dc-popup-alert .leaflet-popup-content-wrapper {
  border: 8px solid rgb(255, 165, 0);
}
.dc-popup-emergency .leaflet-popup-content-wrapper {
  border: 8px solid rgb(255, 0, 0);
}
.popup-title-point {
  width: 100%;
  text-align: center;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.popup-icon-river,
.popup-icon-rain {
  width: 1.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
.popup-icon-river-status {
  width: 1rem;
  margin-left: 0.5rem;
}
.popup-river-value.maintenance,
.popup-rain-value.maintenance {
  font-weight: 700;
  font-size: 11px;
  color: red;
}
.barragem .card {
  width: calc(50% - 1.63rem);
  margin: 0.75rem;
}
.barragem .dam-chart-wrap {
  height: 360px;
  padding: 1rem 1.5rem 0;
}
.barragem canvas {
  height: 100% !important;
}
.mares .card {
  width: calc(100% - 1.63rem);
  margin: 0.75rem;
}
.mares .card #chart-tides {
  height: 600px;
}
.dashboard .card header h2 {
  text-align: center;
}
.dashboard .card .point-subtitles {
  position: absolute;
  top: 4.5rem;
  left: 1rem;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  overflow-y: auto;
  height: 350px;
  max-height: calc(100vh - 8rem);
  transition: height 0.3s ease;
  border-radius: 0.25rem;
}

.dashboard .card .point-subtitles.closed {
  height: 30px;
  overflow: hidden;
}

.dashboard .card .point-subtitles li {
  color: #ffffff;
  margin: 0.25rem 0;
  padding: 0.25rem;
  font-size: 0.9rem;
}

.dashboard .card .status-subtitles {
  position: absolute;
  bottom: 2rem;
  left: 1rem;
  z-index: 1000;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
  padding: 1.7rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  transition: all 0.2s ease;
}

.dashboard .card .status-subtitles .title {
  margin: 0 0 0.7rem 0;
  font-weight: 700;
}

.dashboard .card .point-subtitles .title {
  font-weight: 700;
}

.dashboard .card .status-subtitles .arrow,
.dashboard .card .point-subtitles .arrow {
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid #fff;
  display: inline-block;
  border-top: none;
  border-left: none;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  transform: rotate(45deg);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dashboard .card .point-subtitles .arrow {
  transform: rotate(-135deg);
}

.dashboard .card .point-subtitles.closed .arrow {
  transform: rotate(45deg);
}

.dashboard .card .status-subtitles.closed .arrow {
  transform: rotate(-135deg);
}

.dashboard .card .status-subtitles .content {
  display: flex;
  padding: 0;
  margin: 0;
  transition: all 0.3s ease;
  overflow: hidden;
  height: 145px;
}

.dashboard .card .status-subtitles .icons {
  margin-right: 1rem;
}

.dashboard .card .status-subtitles img {
  width: 1rem;
  margin-right: 0.5rem;
}

.dashboard .card .status-subtitles li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.dashboard .card .status-subtitles .level li:before {
  content: "";
  background: #ffffff;
  width: 2rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  border-radius: 7px;
}

.dashboard .card .status-subtitles .level li:nth-child(1):before {
  border: 4px solid rgb(51, 170, 51);
}

.dashboard .card .status-subtitles .level li:nth-child(2):before {
  border: 4px solid rgb(237, 226, 27);
}

.dashboard .card .status-subtitles .level li:nth-child(3):before {
  border: 4px solid rgb(255, 165, 0);
}

.dashboard .card .status-subtitles .level li:nth-child(4):before {
  border: 4px solid rgb(255, 0, 0);
}

.meteorologia .card {
  width: calc(50% - 1.63rem);
  margin: 0.75rem;
  vertical-align: top;
}

.meteorologia .card .content {
  padding: 1rem;
}

.meteorologia .card .telemetry {
  position: relative;
  z-index: 400;
  width: 30rem;
  height: 17rem;
}

.meteorologia .card .telemetry .level-rain {
  position: absolute;
  top: 0;
  left: -13px;
}

.meteorologia .card .telemetry .level-rain svg {
  height: 13rem;
}

.meteorologia .card .telemetry .level-rain .level-rain-value {
  position: absolute;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  border: 1px solid #414350;
  color: #ffffff;
  padding: 0.5rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.7rem;
}

.meteorologia .card .telemetry .wind-rose {
  position: absolute;
  top: -2rem;
  left: 1.7rem;
  z-index: 4;
}

.meteorologia .card .telemetry .wind-rose img {
  height: 11.5rem;
}

.meteorologia .card .telemetry .wind-rose .wind-direction {
  position: absolute;
  width: 1.8rem;
  height: 3rem;
  left: 4.8rem;
  top: 4.1rem;
  transform-origin: center center;
  transform: rotate(0deg);
}

.meteorologia .card .telemetry .wind-rose .wind-direction-value {
  position: absolute;
  background: #0c558c;
  color: #ffffff;
  font-weight: 300;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  left: 4.5rem;
  top: 9.5rem;
}

.meteorologia .card .telemetry .temperature {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 5;
}

.meteorologia .card .telemetry .temperature svg {
  height: 15rem;
}

.meteorologia .card .telemetry .level-humidity {
  position: absolute;
  top: 1.4rem;
  right: 0;
  z-index: 4;
}

.meteorologia .card .telemetry .level-humidity .level-humidity-label {
  position: absolute;
  top: 5.4rem;
  right: -5rem;
  z-index: 4;
  transform: rotate(90deg);
  width: 12rem;
}

.meteorologia .card .telemetry .level-humidity svg {
  height: 14rem;
}

.meteorologia .card .telemetry .chart-barometro {
  position: absolute;
  top: 3.5rem;
  background: #ffffff;
  height: 11rem;
  width: 19.8rem;
  left: 7.5rem;
  border: 1px solid #c3c3c3;
}

.meteorologia .card .telemetry .chart-barometro #dc00-barometro {
  height: 8.5rem !important;
  width: 16.5rem !important;
}

.meteorologia .card .telemetry .barometro {
  position: absolute;
  color: #ffffff;
  background: #0059b2;
  right: 3.5rem;
  width: 17rem;
  text-align: center;
  padding: 0.5rem;
  top: 1.5rem;
  z-index: 3;
}
.meteorologia .card .telemetry .barometro .barometro-label {
  text-align: left;
  margin-left: 2rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.meteorologia .card .telemetry .barometro:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 15px 0 15px;
  border-color: #0059b2 transparent transparent transparent;
  position: absolute;
  bottom: -16px;
  right: 5rem;
}

.meteorologia .card .telemetry .wind-speed {
  position: absolute;
  bottom: 2.8rem;
  right: 5rem;
  width: 18.5rem;
  z-index: 3;
  border: 2px solid #0059b2;
  display: flex;
}

.meteorologia .card .telemetry .wind-speed:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 16px 18px;
  border-color: transparent transparent #0059b2 transparent;
  position: absolute;
  left: -2px;
  top: -18px;
}

.meteorologia .card .telemetry .max-wind-speed {
  position: absolute;
  bottom: 0.9rem;
  right: 1.5rem;
  width: 22rem;
  z-index: 3;
  border: 2px solid #0059b2;
  display: flex;
}
.meteorologia .card .telemetry .max-wind-speed .value {
  padding: 0.5rem;
  display: inline-block;
  width: 100%;
  background: #fff;
  font-size: 0.7rem;
}

.meteorologia .card .telemetry .max-wind-speed .value strong {
  font-weight: bold;
}

.meteorologia .card .telemetry .wind-speed .value {
  padding: 0.5rem;
  display: inline-block;
  width: 7rem;
  background: #fff;
}

.meteorologia .card .telemetry .wind-speed .label {
  padding: 0.5rem;
  display: inline-block;
  width: 11.5rem;
  background: #0059b2;
  color: #ffffff;
  position: relative;
}

.meteorologia .card .telemetry .wind-speed .label:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 13.9px 8px 0;
  border-color: transparent #0059b2 transparent transparent;
  position: absolute;
  left: -13px;
}

.page-maintenance {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}
.page-maintenance h2 {
  font-weight: 700;
  font-size: 1.5rem;
}
.page-maintenance img {
  width: 8rem;
  margin-top: 1rem;
}
.tabbed-area {
  width: calc(100% - 1.5rem);
  margin: 2rem 0.75rem 0.75rem 0.75rem;
}
.tabbed-area .tabs {
  width: 100%;
  display: flex;
}
.tabbed-area .tabs li {
  border-bottom: 2px solid transparent;
  height: 2.4rem;
  width: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tabbed-area .tabs li:hover {
  border-bottom: 2px solid #0059b2;
  background: rgba(0, 89, 178, 0.1);
  cursor: pointer;
}
.tabbed-area .tabs li.active {
  border-bottom: 2px solid #0059b2;
}
.tabbed-area .tabs li span {
  color: #0059b2;
  font-weight: 700;
  text-transform: uppercase;
}
.dashboard .card .status-subtitles.closed .content {
  height: 0;
}
.dashboard .card .status-subtitles.closed .title {
  margin: 0;
}
.barragem .card .content .dam-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  padding: 1.5rem 2rem 1rem;
  border-top: 1px solid #eaecf4;
}

.barragem .card .content .dam-summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.barragem .card .content .dam-summary-item.dam-summary-wide {
  grid-column: 1 / -1;
}

.barragem .card .content .dam-summary-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #858796;
}

.barragem .card .content .dam-summary-value {
  font-size: 1rem;
  font-weight: 700;
  color: #3a3b45;
  line-height: 1.35;
  word-break: break-word;
}

.barragem .card .content .variation-up {
  color: #e74a3b;
}

.barragem .card .content .variation-down {
  color: #1cc88a;
}

.barragem .card .content .variation-stable {
  color: #858796;
}

.barragem .card .content .data {
  padding: 2rem 2rem 1rem 2rem;
}

.barragem .card .content ul.data li {
  display: block;
  margin-right: 0;
  margin-bottom: 0.75rem;
}
.barragem .card .content ul.data li:nth-child(2) {
  width: auto;
}
.barragem .card .content .data li strong {
  font-weight: bold;
  display: inline;
  margin-left: 0.25rem;
}
.barragem-empty,
.barragem-no-data {
  margin: 1rem;
  color: #5a5c69;
  text-align: center;
}
.barragem .card .content .source {
  font-size: 0.7rem;
  padding: 0 2rem 1.5rem;
  color: #858796;
}
.mares .card .source,
.meteorologia .card .source {
  font-size: 0.7rem;
  padding: 0.7rem;
  text-align: justify;
}
.tides-table {
  display: flex;
  flex-wrap: wrap;
  max-height: 620px;
  overflow-y: auto;
}
.tides-table li {
  padding: 1rem 1.5rem;
  max-width: 200px;
  min-width: 160px;
}
.tides-table li .tides-date {
  padding-bottom: 0.7rem;
}
.tides-table li .tides-date span {
  font-size: 1.8rem;
  font-weight: 600;
  color: #0c558c;
}
.tides-table li .tides-date h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #0c558c;
}
.tides-table li .tides-info .hour {
  width: 100%;
  display: flex;
  padding: 1px 0px;
}
.tides-table li .tides-info .hour span {
  font-size: 1rem;
  font-weight: 600;
  color: #444;
  width: 50%;
  font-family: "monospace", sans-serif;
}
.tide_level {
  display: block;
  width: 100%;
  font-weight: 600;
  padding-left: 10px;
}
.side-menu ul li a .nav-icon {
    width: 1.5rem !important;
    height: 1.5rem;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.side-menu ul li a .icon img {
  width: 1.5rem !important;
  height: 1.5rem;
  object-fit: contain;
  display: inline-block;
  filter: brightness(0) invert(1);
}