/* new filter styling for PAK */
.implementation-type2-enabled .time-trend-chart .floating-wrapper-component,
.implementation-type2-enabled .map-left-section .map-filter-component {
  display: none;
}

.implementation-type2-filter-row {
  width: 100%;
  max-width: calc(100% - 207px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--sp6);
  margin-bottom: var(--sp7);
}

.implementation-type2-filter-row .front_face .content {
  height: 20px;
}

.awselect .back_face .back_face_inner.site-scrollbar {
  overflow: auto;
  padding-right: 0;
}

.awselect-with-accordion .back_face .back_face_inner.site-scrollbar {
  padding-right: 15px;
}

.awselect-main-select-list {
  list-style-type: none;
}

.map-block td.empty:after {
  content: "-";
  font-size: 20px;
}

/* select */

.implementation-type2-filter-row .awselect .front_face .placeholder {
  display: block !important;
  font-size: 16px;
  font-weight: 600;
  color: #4d4d4d;
  transform: none;
}

.implementation-type2-filter-row .ou1--list .front_face:has(.current_value) .placeholder {
  opacity: 0 !important;
}

.implementation-type2 .common-filter-component {
  position: relative;
}

.implementation-type2 .common-filter-component .custom-msg-box {
  border-radius: var(--radius-xs);
}

/* error help text */
.error-help-text {
  font-size: 12px;
  color: var(--clr-red-400);
  padding: 7px 0 0 20px;
  display: block;
  float: left;
  width: 100%;
}

.province-error-text {
  display: none;
}

.disable-all-filters .error-help-text.show-error-text {
  display: block;
}

.implementation-type2 .custom-dropdown-with-border .awselect.animate,
.custom-dropdown-with-border.dropdown-section:has(+.show-error-text) .awselect {
  border-color: var(--clr-primary);
  border-width: 1.5px;
}

.custom-dropdown-with-border.dropdown-section:has(+.show-error-text) .awselect:not(.animate) {
  box-shadow: 0 0 7px 3px rgba(31, 161, 155, 0.2);
}

.implementation-type2-filter-row .custom-dropdown-with-border .front_face {
  background: var(--clr-white);
  border-radius: 20px;
  z-index: 4;
}

/* disable filters initially */
.dropdown-placholder-link.indicator-dropdown-placholder-link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: none;
}

.disable-all-filters .dropdown-placholder-link.indicator-dropdown-placholder-link {
  display: block;
}

/* .disable-all-filters .indicators-list, */
.map-block:has(.disable-all-filters) .share-download-options,
.disable-all-filters .map-nav-wrapper,
.disable-all-filters .reset-all-filters,
.disable-on-load {
  pointer-events: none;
  opacity: 0.5;
}

.disable-all-visualisations .indicator-selected {
  display: none !important;
}

.disable-all-visualisations .compare-btn,
.disable-all-visualisations .custom-legend-block,
.disable-all-visualisations .map-chart-title,
.disable-all-filters .filter-slider {
  display: none;
}

.disable-all-filters .map-tab-slider-wrapper {
  grid-template-columns: 1fr;
}

.disable-all-filters .map-tab-slider-wrapper .map-tabs {
  padding-right: 0;
}

.disable-all-visualisations .highcharts-series-group path {
  fill: #d6d6d6;
}

.disable-all-filters .indicators-list .awselect .front_face .placeholder {
  display: block !important;
  font-size: 16px;
  font-weight: 600;
  color: #4d4d4d;
}

/* note move to below the chart */
.implementation-type2 .map-left-section {
  display: flex;
  flex-direction: column;
}

.implementation-type2 .map-left-section .map-plot-block {
  flex: 1;
}

/* disable legende click */
[data-ou-selected="NAM_1"] .popup-content .custom-legend-block,
[data-ou-selected="NAM_1"] .map-right-section .custom-legend-block {
  pointer-events: none;
}

[data-ou-selected="NAM_1"] .popup-content .custom-legend-block .symbol,
[data-ou-selected="NAM_1"] .map-right-section .custom-legend-block .symbol {
  background-image: none !important;
}

/* responsive */

@media only screen and (min-width: 992px) {
  .disable-all-visualisations .map-right-section {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}
