.subtitle-portlet {
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 100% */
  letter-spacing: -0.4px;
  color: var(--Default-White-Pure, #fff);
}

.title-portlet {
  color: var(--Default-White-Pure, #fff);
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 135%;
  /* 48.6px */
  letter-spacing: -0.72px;
}

.title-map {
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 135%;
  /* 48.6px */
  letter-spacing: -0.72px;
}

.form-validator-stack {
  display: none;
}

#mimapa {
  height: 600px;
}

.top-filter-header {
  background: #15537d;
}

.bottom-filter-header {
  background: #15537d;
  padding-bottom: 64px;
}

.portlet-layout .container-fluid-max-xl {
  max-width: 100% !important;
}

.portlet-select {
  border-radius: 8px;
  border: 1px solid #f9f9f9;
  background: #f9f9f9;
  color: #2c2b2b;
}
.portlet-select:hover {
  background: #34aeae;
  border-color: #34aeae;
}
.portlet-select.right {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}
.portlet-select.left {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
.portlet-select.middle {
  border: none !important;
}

.filter-btn {
  background: #34aeae;
  border-radius: 8px;
  width: 100%;
}
.filter-btn:hover {
  background: #34aeae;
}

.bottom-filter .input-text-wrapper,
.bottom-filter .input-select-wrapper {
  background: #f9f9f9;
  border-radius: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-bottom: 0px !important;
}
.bottom-filter .input-text-wrapper label,
.bottom-filter .input-select-wrapper label {
  padding-left: 12px;
  padding-right: 12px;
  color: #6b7176;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 10px;
  /* 142.857% */
  margin-bottom: 0px !important;
}
.bottom-filter .input-text-wrapper input,
.bottom-filter .input-text-wrapper select,
.bottom-filter .input-select-wrapper input,
.bottom-filter .input-select-wrapper select {
  color: #6b7176;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 125% */
  background-color: #f9f9f9;
  border: 0px transparent !important;
  padding-top: 0;
  padding-bottom: 0;
}

.date-filter.first {
  width: 30%;
}
.date-filter.first .form-group {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
.date-filter.second {
  width: 30%;
}
.date-filter.second .form-group {
  border-radius: 0px !important;
}
.date-filter.third {
  width: 40%;
}
.date-filter.third .form-group {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.tabs-main {
  z-index: 9999;
  position: fixed;
  top: 90%;
  left: 50%;
  transform: translateX(-50%);
  flex-wrap: nowrap;
}

.tabs-main {
  border-bottom: 0px;
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
  padding-right: 0;
}
.tabs-main .nav-item {
  background: #15537d;
}
.tabs-main .nav-item a {
  color: #f9f9f9 !important;
  padding: 8px;
  margin: 8px;
}
.tabs-main .nav-item a.active {
  color: #15537d !important;
  background: #f9f9f9;
  border-radius: 8px;
}
.tabs-main .nav-item a:hover {
  border-radius: 8px;
}

.nav-fix {
  width: inherit;
}

.map-info {
  position: absolute;
  z-index: 1000;
  margin-left: 20px;
  margin-top: 95px;
}
.map-info .card-body {
  min-width: 280px;
}

.leaflet-control-container {
  display: none;
}

.card {
  border-radius: 8px;
  border: 1px solid #e1e7ed;
}
.card .card-title {
  color: #2c2b2b;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.42px;
}
.card .card-subtitle {
  font-size: 12px !important;
  font-weight: 400;
  margin-bottom: 18px;
}
.card .card-text {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 16px;
}
.card .progress-group-addon {
  display: none;
}
.card .progress {
  border-radius: 20px;
  background-color: #e1e7ed;
}
.card .progress-bar {
  margin: 3px;
  border-radius: 20px;
  background-color: #1899cd;
}

.card-url:hover,
.card-url {
  text-decoration: none;
}
.card-url:hover .list-card,
.card-url .list-card {
  border-radius: 8px;
  border: 1px solid #e1e7ed;
  min-width: 100%;
}
.card-url:hover .list-card .card-title,
.card-url .list-card .card-title {
  color: var(--Default-Black, #2c2b2b);
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  /* 20.8px */
}
.card-url:hover .list-card .card-tag,
.card-url .list-card .card-tag {
  display: flex;
  padding: 4px 8px;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #f9f9f9;
  color: #2c2b2b;
  font-size: 14px;
  font-weight: 400;
  line-height: 130%;
  /* 18.2px */
  letter-spacing: 0.14px;
}
.card-url:hover .progress-info,
.card-url .progress-info {
  min-width: 340px;
}
@media (max-width: 767px) {
  .card-url:hover .progress-info,
.card-url .progress-info {
    min-width: 100%;
    margin: 10px;
  }
}
.card-url:hover .hm-quantity,
.card-url .hm-quantity {
  font-size: 18px;
  font-weight: 500;
  line-height: 130%;
  color: #b3494c;
  margin: auto;
}
.card-url:hover .hm-quantity.augmented,
.card-url .hm-quantity.augmented {
  color: #809144 !important;
}
.card-url:hover .percentage-list-data,
.card-url .percentage-list-data {
  font-size: 18px;
  font-weight: 500;
  line-height: 130%;
  color: #b3494c;
  margin: auto;
}
.card-url:hover .percentage-list-data svg,
.card-url .percentage-list-data svg {
  fill: #b3494c !important;
}
.card-url:hover .percentage-list-data.augmented,
.card-url .percentage-list-data.augmented {
  color: #809144 !important;
}
.card-url:hover .percentage-list-data.augmented svg,
.card-url .percentage-list-data.augmented svg {
  rotate: 180deg;
  fill: #809144 !important;
}

.data-card {
  height: 100%;
}
.data-card .bb-legend-item {
  display: none;
}
.data-card .card-title {
  color: #2c2b2b;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  /* 125% */
  letter-spacing: 0.48px;
}
.data-card .card-date {
  color: #b3bcc7;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  /* 166.667% */
  letter-spacing: 0.36px;
}
.data-card .card-text {
  color: #2c2b2b;
  font-size: 12px;
  font-weight: 400;
  line-height: 130%;
  /* 15.6px */
}
.data-card .card-text-data {
  color: #31353a;
  font-size: 14px;
  font-weight: 400;
  line-height: 130%;
  /* 18.2px */
}
.data-card .variable-text {
  color: #b3494c;
}
.data-card .variable-text svg {
  fill: #b3494c !important;
}
.data-card .variable-text.augmented {
  color: #809144 !important;
}
.data-card .variable-text.augmented svg {
  rotate: 180deg;
  fill: #809144 !important;
}
.data-card .card-text-wrapper {
  border-bottom: 1px solid #E1E7ED;
  margin-left: 24px;
  margin-right: 24px;
}

.chart-card {
  height: 100%;
}
.chart-card .chart-title {
  color: #2c2b2b;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  /* 125% */
}
.chart-card .chart-tabs .nav-tabs {
  border-bottom: 0 !important;
}
.chart-card .chart-tabs .nav-item,
.chart-card .chart-tabs .nav-item a {
  color: #41464d;
  font-size: 14px;
  font-weight: 400;
  line-height: 130%;
  /* 18.2px */
}
.chart-card .chart-tabs .nav-item .active,
.chart-card .chart-tabs .nav-item a .active {
  border-radius: 16px;
  background: #e1e7ed;
}
.chart-card .chart-tabs .nav-item .nav-link:hover,
.chart-card .chart-tabs .nav-item .nav-item:hover,
.chart-card .chart-tabs .nav-item .nav-link,
.chart-card .chart-tabs .nav-item .nav-item,
.chart-card .chart-tabs .nav-item a .nav-link:hover,
.chart-card .chart-tabs .nav-item a .nav-item:hover,
.chart-card .chart-tabs .nav-item a .nav-link,
.chart-card .chart-tabs .nav-item a .nav-item {
  border: 0 !important;
}

/*Donut*/
@property --progress-value {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@keyframes progress {
  0% {
    --progress-value: 0;
  }
  100% {
    --progress-value: var(--new-value);
  }
}
.progress-bar_donut {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50% !important;
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(#38b6ff calc(var(--progress-value) * 1%), #e2e5e9 0);
  position: relative;
}
.progress-bar_donut .progressText span {
  color: #2c2b2b;
}
.progress-bar_donut progress {
  display: none;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: #2c2b2b !important;
  color: #fff !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  /* 142.857% */
}

.leaflet-popup {
  margin-bottom: 35px !important;
}

.view-embalse-btn {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  border: 1px solid #2c2b2b;
}
.view-embalse-btn p {
  color: #2c2b2b;
  font-size: 14px;
  font-weight: 400;
  line-height: 135%;
  /* 18.9px */
}

.progress-bar_donut {
  margin: 20px auto;
}
.progress-bar_donut .progressText {
  color: #2c2b2b;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
  /* 20.8px */
}

@media (max-width: 992px) {
  .canvas-container {
    width: 100%;
    aspect-ratio: 1;
  }
}