* {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE 10 and IE 11 */
  user-select: none;         /* Standard syntax */

  font-family: "Rubik", "Roboto", "Urbanist", sans-serif;
  /* font-optical-sizing: auto; */
  font-weight: 300;
  font-style: normal;
  margin: 0;
  padding: 0;
}


html {
    overflow-y: hidden;
}

body {
  margin: 0px;
  padding: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  background-color: #111625;
  /* background-color: #232934; */
  /* overflow-x: hidden; */
}

#map { position: absolute; top: 0; bottom: 0; width: 100%; }

.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
  display: none;
}

.flex-container {
  display: flex;
}

.left, .right, .middle {
  padding: 0;
  margin: 0;
  position: relative;
}
.left {
  /* min-width: 18%; */
  height: 100vh;
  max-width: 65px;
  background-color: #252B35;
  margin-bottom: -50px;
}
.left .menu .logo span{
  color: #252B35;
  text-wrap: nowrap;
  font-size: 14px;
}
.left .sidenav .title span {
  display: none;
}
.left .sidenav .title .bi {
  color: #ee5d7c;
}

.sidenav .accordion-button  {
  padding-left: 15px;
}
/* .right {
  width: 18%;
  height: 100vh;
} */
.middle {
  flex-grow: 2;
  /* display: flex; */
  height: 100vh;
  /* background-image: url('../img/stars.jpg'); */
  background-repeat: no-repeat;
  background-size: cover;
  /* pointer-events: none; */
}

/* .middle div {
  box-sizing: border-box;
} */

.menu {
  background-color: #252b35;
  /* background-color: #090909; */
  /* color: #f8f9fa; */
  color: #D0F4FF !important;
  font-size: 13px;
  position: sticky;
  top: 10px;
  /* Stop short of the footer block pinned at the bottom of the rail. At 100vh
     the nav scrolled underneath it and the two sets of text overlapped. */
  max-height: calc(100vh - 78px);
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-left: 0px;
  padding-bottom: 6px;
  min-height: calc(100% - 110px);
}

.menu::-webkit-scrollbar {
  width: 0em;
}

.logo{
  /* The rail has no padding of its own, so without this the mark sits flush
     against the top-left corner and reads as clipped. */
  padding: 22px 16px 0;
  margin-bottom: 20px;
  text-align: center;
}

.logo img{
  /* The lockup is the lettered circles plus the name spelled out, at about
     6:1, so it is sized by WIDTH - it takes the rail's full usable width and
     the height follows. Sizing by height would leave the name unreadable. */
  width: 100%;
  max-width: 268px;
  height: auto;
  display: block;
  margin: 0 auto 7px;
}

.logo span {
  display: block;
  font-size: 16px;
  text-transform: uppercase;
  line-height: 1;
  color: #ddd;
  margin-left: 20px;
}

.sidenav {
  margin-top: 30px;
  color: #fff;
}

.sidenav .accordion-item,
.sidenav .accordion-button {
  background: none !important;
  border: 0;
  padding-right: 0px;
}

.sidenav .accordion-body {
  padding: 15px;
}

.sidenav .accordion-button:focus {
  box-shadow: none;
}

.sidenav .accordion-button:not(.collapsed) {
  box-shadow: none;
}

.sidenav b {
  /* color: #FFF; */
  color: #D0F4FF;
}

.sidenav span.title {
  display: block;
  text-transform: uppercase;
  font-size: 18px;
  margin: 10px 0;
  letter-spacing: 4px;
  color: #ee5d7c;
  cursor: pointer;
}

.sidenav span i {
  color: #FFF;
  font-size: 28px;
}

.sidenav label {
  color: #ddd;
  /* color: #D0F4FF; */
}

.windows{
  display: flex;
  flex-direction: column-reverse;
  position: fixed;
  bottom: 10px;
  right: 10px;
  max-width: 500px;
}

.sidewindow {
  font-size: 14px;
  /* background-color: #222; */
  border: none;
  width: 300px;
  margin-top: 10px;
  border-radius: 5px;
  padding: 10px;
  background-color: #182E3B;
  color: #FFF;
}


.data-table {
  color: #ddd !important;
  border-radius: 10px;
  max-width: 100%;
  overflow-x: scroll;
}

.data-table th {
  color: #ddd !important;
}

.map {
  position: relative
}

.coloredClustersDots {
  fill-opacity: .5;
  stroke: white;
  stroke-width: 0.5px;
}

.coloredClustersDots:hover{
  stroke: black;
  stroke-width: 4px;
}

.coloredClusters {
  stroke-width: 1;
  stroke: #777;
}


#menu .slider.item {
  margin: 30px 0;
}

.locatePlaceData {
  stroke-width: 2;
  stroke: red;
  fill: #f0f0f0;
  stroke-linecap: round;
}

.generalDataBox {
  stroke-width: 2;
  stroke: red;
  fill: none;
  stroke-linecap: round;
}

#menu .item {
  margin-bottom: 12px;
}

#menu .item input {
  width: 100px;
}

#menu select {
  margin-top: 4px;
}

#menu .item .value {
  font-weight: bold;
}

#menu .item span,
#menu .item input {
  vertical-align: middle;
}

#menu .item .low {
  display: inline-block;
  width: 30px;
  text-align: right;
}

#content {
  text-align: right;
}

/* #content .info {
  display: block;
} */



.map path {
  fill: #a5a5a5;
  /* stroke: #777; */
  stroke: #000;
}

.projection-center {
  fill: red;
}

.graticule path {
  fill: none;
  stroke: #444;
}

.circles path {
  fill: none;
  stroke: #aaa;
}

#content .bounding-box rect {
  fill: none;
  stroke: #333;
  stroke-dasharray: 2, 1;
}

#content .centroid {
  display: none;
}

#content .centroid circle {
  fill: red;
}

.details-box {
  width: 100%;
  min-height: 100vh;
  padding: 7px; 
  /* background-color: #2A2B2E; */
  background-color: #000;
}
.details-box {
  border-left: 1px solid #000;
}


.continents {
  position: relative;
}
.properties-header {
  position: relative
}
.sidenav .select-all {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  padding: 3px 10px;
}
.sidenav b {
  display: block;
  margin-bottom: 15px;
}
.sidenav hr {
  border-color: #FFF;
}

.sidewindow .bar {
  /* background-color: blue; */
  display: block;
  width: 100%;
  height: 10px;
  /* background-image: linear-gradient(to right, #f6d746 , #140b34); */
  background-image: url('../img/plasma.png');
  background-size: cover;
  margin-top: 10px;
  position: relative;

  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
.sidewindow .bar .indicator {
  font-size: 34px;
  position: absolute;
  top: -22px;
  right: -30px;
  color: white;
  font-weight: bolder;
  display: none;
}

.sidewindow .gradient-bar {
  text-align: center;
}

.sidewindow .gradient-bar .min{
  display: inline-block;
  margin-top: 10px;
  float: left;
}
.sidewindow .gradient-bar .max {
  display: inline-block;
  margin-top: 10px;
  float: right;
}

.sidewindow .gradient-bar .unit {
  display: inline-block;
  margin-top: 10px;
}

.controls {
  position: fixed;
  top: 65px;
  right: 10px;
}
.controls span {
  display: block;
  color: white;
  /* background-color: #182E3B; */
  /* background-color: #090909; */
  background-color: #252B35;
  font-size: 20px;
  padding: 7px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all .3s;
}
.controls span:hover {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}



.gradients {
  /* height: 200px; */
  width: 400px;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  position: relative;
  display: none;
}
:root {
  --primary-color: #185ee0;
  --secondary-color: #e6eef9;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

/* .container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
} */

.tabs {
  display: flex;
  position: relative;
  background-color: #333;
  /* box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15); */
  /* padding: 0.75rem; */
  border-radius: 7px;
  max-width: 100%;
  margin-bottom: 15px;
}
.tabs * {
  z-index: 2;
}

input[type=radio] {
  display: none;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  width: 200px;
  /* font-size: 1.25rem; */
  font-weight: 500;
  border-radius: 7px;
  cursor: pointer;
  transition: color 0.15s ease-in;
  color: #fafafa;
}

.glider {
  position: absolute;
  display: flex;
  height: 54px;
  width: 95px;
  background-color: var(--secondary-color);
  z-index: 1;
  border-radius: 7px;
  transition: 0.25s ease-out;
}

/* .notification {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: 0.75rem;
  border-radius: 50%;
  background-color: var(--secondary-color);
  transition: 0.15s ease-in;
} */

input[type=radio]:checked + label {
  color: var(--primary-color);
}
input[type=radio]:checked + label > .notification {
  background-color: var(--primary-color);
  color: #fff;
}

input[id=radio-1]:checked ~ .glider {
  transform: translateX(0);
}

input[id=radio-2]:checked ~ .glider {
  transform: translateX(100%);
}

input[id=radio-3]:checked ~ .glider {
  transform: translateX(200%);
}

input[id=radio-4]:checked ~ .glider {
  transform: translateX(300%);
}


@media (max-width: 700px) {
  .tabs {
    transform: scale(0.6);
  }
}




.overloader {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 99;
  background-color: #444;
  opacity: .5;
  display: none;
}

.loader {
  --color: white;
  --size-mid: 6vmin;
  --size-dot: 1.5vmin;
  --size-bar: 0.4vmin;
  --size-square: 3vmin;
  
  display: block;
  position: relative;
  width: 50%;
  display: grid;
  place-items: center;
  top: 65px;
}

.loader::before,
.loader::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
}

/**
  loader --1
**/
.loader.--1::before {
  width: var(--size-mid);
  height: var(--size-mid);
  border: 4px solid var(--color);
  border-top-color: transparent;
  border-radius: 50%;
  animation: loader-1 1s linear infinite;
}

.loader.--1::after {
  width: calc(var(--size-mid) - 2px);
  height: calc(var(--size-mid) - 2px);
  border: 2px solid transparent;
  border-top-color: var(--color);
  border-radius: 50%;
  animation: loader-1 0.6s linear reverse infinite;
}

@keyframes loader-1 {
  100% {
    transform: rotate(1turn);
  }
}



.item {
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  border-radius: 4px;
  transition: opacity 0.4s ease;
}




  .checkbox-wrapper-47 input[type="checkbox"] {
    display: none;
    visibility: hidden;
    /* color: #ff6a8a; */
  }

  .checkbox-wrapper-47 input[type="radio"] {
    display: none;
    visibility: hidden;
    /* color: #ff6a8a; */
  }

  .checkbox-wrapper-47 label {
    position: relative;
    padding-left: 2em;
    padding-right: 1em;
    line-height: 2;
    cursor: pointer;
    display: inline-flex;
  }

  .checkbox-wrapper-47 label:before {
    box-sizing: border-box;
    content: " ";
    position: absolute;
    top: 0.3em;
    left: 0;
    display: block;
    width: 1.4em;
    height: 1.4em;
    border: 2px solid #9098A9;
    /* border-radius: 6px; */
    border-radius: 100px;
    z-index: -1;
  }

  .checkbox-wrapper-47 input[type=checkbox]:checked + label {
    padding-left: 1em;
    color: #0f5229;
  }
  .checkbox-wrapper-47 input[type=checkbox]:checked + label:before {
    top: 0;
    width: 100%;
    height: 100%;
    background: #b7e6c9;
    border-color: #2cbc63;
  }

  .checkbox-wrapper-47 input[type=radio]:checked + label {
    padding-left: 1em;
    color: #0f5229;
  }
  .checkbox-wrapper-47 input[type=radio]:checked + label:before {
    top: 0;
    width: 100%;
    height: 100%;
    background: #b7e6c9;
    border-color: #2cbc63;
  }


  .checkbox-wrapper-47 label,
  .checkbox-wrapper-47 label::before {
    transition: 0.25s all ease;
  }


  .continents .checkbox-wrapper-47 label:before {
    border-radius: 6px;
  }
/*   
.earth-container {
  display: none;
} */


.radarChart .legend {
  font-family: 'Raleway', sans-serif;
  fill: #fff;
}

.radarChart  .tooltip {
  fill: #FFF;
}


.charts {
  /* flex-grow: 1; */
  position: relative;
  display: none;
  width: 53%;
  /* margin-left: 2%; */
  vertical-align: top;
  /* min-height: 100vh; */
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none; 
  scrollbar-width: none; 
  overflow-y: scroll;
  padding: 20px;
}

.charts::-webkit-scrollbar {
  display: none;
}

.charts .overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  /* height: 100%;
  width: 100%; */
  background: #111625;
  /* background: #000; */
  opacity: 0;
  z-index: -1;
} 

.charts .box {
  width: 33%;
  /* width: auto; */
  display: inline-block;
  /* padding: 5px; */
  position: relative;
  /* background-color: #fff; */
}

.charts .box canvas.selected {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.charts .box .zoomChart {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #FFF;
  cursor: pointer;
  z-index: 9997;
  font-size: 18px;
  opacity: 0;
}


.charts .box:hover .zoomChart {
  opacity: 1;
}

.charts .box .clustername {
  color: #fff;
  text-align: center;
  font-size: 14px;
}


.charts .typologyName {
  text-align: center;
  color: #fff;
  margin-top: 20px;
  letter-spacing: 1.5px;
  /* font-weight: bold; */
}

.charts .goToMap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 150px;
  transition: all .5s;
}

.charts .goToMap:hover {
  width: 180px;
}

.charts .goToMap img {
  width: 100%
}


.map-container {
  position: relative;
  width: 100%;
  height: 100vh;

  /* display: none; */
}

/* .map-container::after {
  content: ''; 
  position: absolute;
  right: 0; 
  top: 50%; 
  transform: translateY(-50%); 
  height: 50%; 
  width: 3px;
  background-color: #fff; 
} */

.fullSpiderMap {
  position: relative;
  width: 100%;
  height: 100vh;
  display: none;
}

.fullCharts {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

/* .charts {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
} */
/* .fullSpiderMap #fullSpiderMap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */

.showFullSpiderMap,
.showEarth,
.goToCharts {
  position: absolute;
  top: 25px;
  left: 175px;
  display: none;
  background: none;
  border: none;
  letter-spacing: 2px;
  color: #FFF;
}







.radar-filters {
  position: absolute;
  top: 20px;
  left: 0;
  color: #f1f1f1;
}

.radar-filters span.label {
  vertical-align: top;
}

.checkbox-wrapper-51 {
  display: inline-block;
}
  .checkbox-wrapper-51 input[type="checkbox"] {
    visibility: hidden;
    display: none;
  }

  .checkbox-wrapper-51 .toggle {
    position: relative;
    display: block;
    width: 42px;
    height: 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
  }
  .checkbox-wrapper-51 .toggle:before {
    content: "";
    position: relative;
    top: 1px;
    left: 1px;
    width: 40px;
    height: 22px;
    display: block;
    background: #c8ccd4;
    border-radius: 12px;
    transition: background 0.2s ease;
  }
  .checkbox-wrapper-51 .toggle span {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    display: block;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(154,153,153,0.75);
    transition: all 0.2s ease;
  }
  .checkbox-wrapper-51 .toggle span svg {
    margin: 7px;
    fill: none;
  }
  .checkbox-wrapper-51 .toggle span svg path {
    stroke: #c8ccd4;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 0;
    transition: all 0.5s linear;
  }
  .checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle:before {
    background: #52d66b;
  }
  .checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle span {
    transform: translateX(18px);
  }
  .checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle span path {
    stroke: #52d66b;
    stroke-dasharray: 25;
    stroke-dashoffset: 25;
  }


  .explorePanel {
    background-color: #182E3B;
    /* border-radius: 5px; */
    color: #fff;
    letter-spacing: 2;
    text-align: center;
    padding: 15px;
    width: 200px;
    font-size: 14px;
  }

  .explorePanel button {
    width: 100%;
    letter-spacing: 3px;
    font-size: 12px;
  }

  .exploreCountryMap {
    width: 100%;
    min-height: 100vh;
    padding: 30px 0;
    /* display: none; */
  }

  .exploreCountryMap path {
    fill: #a5a5a5;
    stroke: #000;
  }



  .exploreCountrySection {
    display: none;
    color: #fff;
    position: relative;
  }

  .exploreCountrySection .countryName {
    position: absolute;
    top: 10px;
    left: 10px;
    letter-spacing: 2px;
    cursor: pointer;
  }

  .sideSlidingIcon {
    position: absolute;
    top: 50%;
    color: #fff;
    background-color: #185ee0;
    right: -150px;
    padding: 10px 20px;
    border-radius: 100px;
    width: 200px;
    cursor: pointer;
    transition: all 0.4s;
  }

  .sideSlidingIcon:nth-of-type(2){
    top: calc(50% + 60px);
  }

  .sideSlidingIcon:nth-of-type(3) {
    top: calc(50% + 120px);
  }

  .sideSlidingIcon:hover {
    right: -15px;
  }

  .satellite {
    display: none;
    height: 100vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .heatmapInfo {
    display: none;
  }

  .clustersMapInfo span {
    display: inline-block;
    width: 40px;
    background-color: #ddd;
    border: 2px solid #ddd;
    margin: 5px 1%;
    /* padding: 5px 10px; */
    text-align: center;
    border-radius: 100px;
    transition: all .5s;
    cursor: pointer;
  }

  /* .clustersMapInfo span:nth-of-type(1){
    background-color: #27ae60;
    border-color: #27ae60;
  }

  .clustersMapInfo span:nth-of-type(2){
    background-color: #9b59b6;
    border-color: #9b59b6;
  }

  .clustersMapInfo span:nth-of-type(3){
    background-color: #c0392b;
    border-color: #c0392b;
  }

  .clustersMapInfo span:nth-of-type(4){
    background-color: #f1c40f;
    border-color: #f1c40f;
  }

  .clustersMapInfo span:nth-of-type(5){
    background-color: #16a085;
    border-color: #16a085;
  }

  .clustersMapInfo span:nth-of-type(6){
    background-color: #e67e22;
    border-color: #e67e22;
  } */

  .clustersMapInfo span:hover {
    background-color: transparent !important;
    /* display: none; */
  }

  /* .clustersMapInfo span:hover:nth-of-type(1) {
    background-color: ;
  } */

  .clustersMapInfo span {
    transition: background-color 0.3s ease-in-out;
}

.transparent-bg {
    background-color: transparent !important; /* The !important might be needed if other CSS rules are competing with this one. */
}

  /* AIzaSyBRppllgDaTpvAaV6Ruah169It_Mgk_Izc */

.clustersMapInfo {
  display: none;
}

#map {
  /* display: none; */
  /* flex-grow: 1; */
}

[id^="myFullChart-"] {
  width: 80% !important;
  height: 100% !important;
  margin: auto;
}

[id^="myChart-"] {
  border-radius: 10px;
  /* background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.0), transparent);
  background-repeat: no-repeat;
  background-size: 0% 0%;
  background-position: center; */
  transition: all 0.3s ease;
  position: relative;
}

[id^="myChart-"]:hover {
  cursor: pointer;
  /* box-shadow: 0px 0px 20px #111; */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.1) !important;
  /* background-size: 100% 100%; */
  /* background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.0), transparent); */
  /* border: 3px solid gold; */
}

/* Apply transitions to the overlay and chart elements */
.charts .overlay {
  transition: opacity 0s ease, z-index 0s ease;
}

[id^='myChart-'] {
  transition: z-index 0s ease;
}


.hiddenTemp {
  display: none;
}

.hide-after::after {
  display: none;
  /* opacity: 0; */
}

#mainAccordion {
  border-right: 3px solid #FFF;
}


/* .chatbot {
  padding: 15px;
  height: 200px;
}

.chatbot .bot-header .chatbot-icon {
  display: inline-block;
  max-width: 30px;
  margin: 0 10px 10px 0;
}

.chatbot .bot-header .title {
  display: inline-block;
  cursor: unset;
}

.chatbot .bot-body {
  display: none;
}

.chatbot textarea {
  width: 100%;
  padding: 10px;
  background-color: #19191B;
  border: none;
  border-radius: 5px;
  color: #D0F4FF;
}

.chatbot button {
  width: 100%;
} */

.project-control {
  width: 100%;
  text-align: center;
  padding: 10px;
}

.project-control .icon {
  color: #ee5d7c;
  font-size: 28px;
}

.project-control .wide {
  display: none;
  width: 100%;
  text-align: center;
}

.project-control .wide div {
  color: #FFF;
  box-sizing: border-box;
  padding: 3px;
  margin: 7px 0;
  border: 2px solid #ee5d7c;
  border-radius: 5px;
  position: relative;
  font-size: 18px;
  color: #ee5d7c;
  letter-spacing: 2px;

  background: linear-gradient(to right, #ee5d7c 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.3s ease-out;

  /* display: inline-block;
  width: 49%;
  text-align: right; */
}

.project-control .wide div:hover {
  /* background-color: #ee5d7c; */
  letter-spacing: 3px;
  color: #fff;
  background-position: left bottom;
  /* border-radius: 3px; */
}

.project-control .wide div i {
  position: absolute;
  left: 10px;
  top: 0px;
  bottom: 0;
  font-size: 25px;

  padding-right: 10px;
  border-right: 2px solid #ee5d7c;
}

.project-control .save {
  border-right: 1px solid #ee5d7c;
}

.tippy-box[data-theme~='light-border'] {
  /* background-color: #f9f9f9;
  color: black;
  border: 1px solid #ddd; */
  /* background-color: rgba(0, 0, 0, 0.5); */
  background-color: rgba(12, 12, 16, 0.6);
  /* border: 1px solid #FFF; */
  color: rgba(255, 255, 255, 0.87);
  padding: 15px;
  z-index: 99;
}

.tippy-box[data-theme~='light-border'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: #f9f9f9;
}
.tippy-box[data-theme~='light-border'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: #f9f9f9;
}
.tippy-box[data-theme~='light-border'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: #f9f9f9;
}
.tippy-box[data-theme~='light-border'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: #f9f9f9;
}

.topcities span {
  display: inline-block;
  margin: 3px 2px;
  cursor: pointer;
  background-color: #333;
  padding: 5px 8px;
  border-radius: 7px;
}

.mapboxgl-marker {
  color: red;
}

.mapboxgl-popup-content {
  text-align: center;
  font-size: 14px;
}

.menu .btn-success,
.menu .btn-success:active {
  background: #3E627B;
  border-color: #3E627B;
}

.menu .loading-done {
  background-color: #27ae60;
  border-color: #27ae60;
}

.menu .loading-failed {
  background-color: #e66767;
  border-color: #e66767;
}

.menu .submit-btn .bi {
  font-size: 16px;
  color: #fff;
  display: inline-block;
}

@keyframes rotateAnimation {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

.rotate {
  animation: rotateAnimation 2s linear infinite !important;
  display: block;
}


.menu .form-control,
.menu .nice-select {
  background-color: #19191B;
  border-color: #19191B;
  color: #555;
  /* margin-bottom: 0 !important; */
}

.menu .nice-select .option {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.4;
    display: flex;              /* Flex container for alignment */
    align-items: center;        /* Vertically center */
    border-bottom: 1px solid #444;
    min-height: 45px
}

.menu .nice-select span {
  color: #D0F4FF;
  width: 100%;
  display: block;
  overflow-x: hidden;
}

.nice-select .option.focus, .nice-select .option.selected.focus {
  background-color: #19191B;
}

.nice-select .option:hover {
  background-color: #222;
}

.menu .nice-select .list {
  background-color: #19191B;
  color: #999;
}

/* For Firefox */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Chrome, Safari, Edge, and Opera */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}


.rights {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #999;
}


.pageLoader {
	height: 100vh;
	width: 100vw;
	align-items: center;
	justify-content: center;
	overflow: hidden;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99999;
  background-color: #1B222B;
}

/* #preloader {
	position: fixed;
	z-index: 999999;
	display: flex;
	background: #1e272e;
	height: 100vh;
	width: 100vw;
	align-items: center;
	justify-content: center;
	overflow: hidden
} */
.preloader-wave {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px
}
.preloader-wave:before, .preloader-wave:after {
	position: absolute;
	display: inline-block;
	width: 60px;
	height: 60px;
	content: '';
	-webkit-animation: preloader-wave 1.6s linear infinite;
	animation: preloader-wave 1.6s linear infinite;
	border-radius: 50%;
	background: #ee5d7c
}
.preloader-wave:after {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s
}
@-webkit-keyframes preloader-wave {
	0% {
		-webkit-transform: scale(0, 0);
		transform: scale(0, 0);
		opacity: 0.5
	}
	100% {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		opacity: 0
	}
}
@keyframes preloader-wave {
	0% {
		-webkit-transform: scale(0, 0);
		transform: scale(0, 0);
		opacity: 0.5
	}
	100% {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		opacity: 0
	}
}

/* #loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #EC337B;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #F16A6C;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}
@-webkit-keyframes spin {
  0%   {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}
@keyframes spin {
  0%   {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
  }
} */



.btnLoading {
  display: inline-block;
  width: 19px;
  height: 19px;
  position: relative;
  display: none;
}

.circular-loader {
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
}

.loader-path {
  stroke-dasharray: 150,200;
  stroke-dashoffset: -10;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}
@-webkit-keyframes color {
  0% {
    stroke: #70c542;
  }
  40% {
    stroke: #70c542;
  }
  66% {
    stroke: #70c542;
  }
  80%, 90% {
    stroke: #70c542;
  }
}
@keyframes color {
  0% {
    stroke: #70c542;
  }
  40% {
    stroke: #70c542;
  }
  66% {
    stroke: #70c542;
  }
  80%, 90% {
    stroke: #70c542;
  }
}


#mapping .loading-text,
#getClusters .loading-text {
  color: #FFF;
  display: none;
  margin-left: 10px;
  opacity: 0;
}

.checkbox-wrapper-50 label {
  position: relative;
  cursor: pointer;
}

.infoPopover {
  display: none;
  border-radius: 100px;
  border: 1px solid #979797;
  color: #fff;
  font-size: 10px;
  padding: 0 6px;
  margin: 0;
  background-color: #101010;
  position: absolute;
  top: -8px;
  right: -8px;
}

.checkbox-wrapper-50 label:hover .infoPopover {
  display: unset;
}

.popover {
  background-color: #101010; /* Dark background */
  border: none; /* No border */
  font-size: 13px;
}

.popover-body {
  color: #ccc !important; 
  opacity: 1 !important; 
  padding: 10px; /* Adjust padding */
}

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after{
  border-right-color: #101010;
}

.nice-select{
  margin-bottom: 15px;
}

.range {
  display: flex;
  flex-wrap: wrap;
  /* margin: 1rem auto; */
  color: #D0F4FF;
  background-color: #19191B;
  padding: 15px;
  border-radius: 5px;
  font-size: 11px;
  padding-bottom: 30px;
  margin-right: 2px;
  margin: 15px 0;
}

.range label {
  margin-bottom: 20px;
  font-size: 13px;
  color: #D0F4FF;
}

.range .min {
  margin: -6px 5px 0 0px;
}

.range .max {
  margin: -6px 0px 0 5px
}

.range-wrapper {
  position: relative;
  flex-grow: 2;
  margin: 0;
}

.range-wrapper input {
  -webkit-appearance: none;
  appearance: none;
  height: 7px; 
  background: #414C54; 
  outline: none; 
  opacity: 0.7;
  -webkit-transition: .2s; 
  transition: opacity .2s;
  border-radius: 100px;
  display: block;
  width: 100%;
  margin: 0;
}

.range-wrapper input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #0A2B42;
  border: 3px solid #6696F4;
  cursor: pointer;
  border-radius: 50%;
}

.range-wrapper .range-value{
	position: absolute;
	top: 200%;
}
.range-wrapper .range-value span{
	width: 30px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	background: #2f363a;
  color: #D0F4FF;
	display: block;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 5%);
	border-radius: 6px;
}

.range-wrapper input:hover{
  opacity: .6;
}

.range .range-wrapper:hover .range-value span {
  opacity: 1;
}

.range-wrapper .range-value span {
  opacity: 0; 
  transition: opacity 0.3s ease-in-out; 
}


.range-wrapper .range-value span:before{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-bottom: 10px solid #2f363a;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	margin-top: -1px;
}

.flex-wrap {
  flex-basis: 100%;
  height: 0;
}


.radbox {
  position: relative;
  cursor: pointer;
  border: none;
  outline :none;
  width: 49%;
  box-sizing: content-box;
}

.radbox input[type='radio'] {
  display:none;
}

.radbox .rad-text {
  content: '';
  display: inline-flex;
  width: 100%;
  padding: 10px;
  margin-right: 5px;
  background-color : #19191B;
  color: #D0F4FF;
  border: 3px solid #19191B;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.rad-text {
  transition: border 0.3s ease;
}

input[type="radio"]:checked + .rad-text {
  content: '';
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1.5px solid #6696F4;
}



/* @media (min-width: 576px) {
  .charts .box{
    width: 100%;
  }
}
@media (min-width: 768px) {
  .charts .box{
    width: 100%;
  }
}
@media (min-width: 992px) {

  .charts .box{
    width: 50%;
  }

}
@media (min-width: 1200px) {

  .charts .box{
    width: 33%;
  }

}
@media (min-width: 1400px) {

  .charts .box{
    width: 25%;
  }

} */


.placeinfo {
  position: fixed;
  top: 10px;
  right: 60px;
  border-radius: 5px;
  padding: 15px;
  background-color: #252B35;
  color: #FFF;
  width: 400px;
  display: none;
}

.placeinfo .flag{
  float: right;
  width: 100px;
}

.placeinfo .badge {
  float: right;
}

.placeinfo .clusterColor {
  padding: 0px 30px;
  border-radius: 100px;
  /* background-color: #fff; */
  float: right;
}

.placeinfo .topplaces span {
  display: inline-block;
  margin: 3px 2px;
  margin-left: 0;
  cursor: pointer;
  background-color: #555;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 13px;
}









.searchbar {
  position: fixed;
  /* position: relative; */
  top: 10px;
  right: 10px;
  /* overflow: hidden; */
  height: 44px;
  width: 40px;
  /* border-radius: 2em; */
  /* box-shadow: 0 0 5px #6A5D4F; */
  -moz-transition: all 0.35s;
  -webkit-transition: all 0.35s;

  color: white;
  background-color: #252B35;
  /* font-size: 20px; */
  border-radius: 3px;
  cursor: pointer;

}
.searchbar:hover, .searchbar:focus, .searchbar:focus-within {
  width: 23em;
  border-radius: 5px 2em 2em 5px;
  outline: none;
}
.searchbar:hover input, .searchbar:focus input, .searchbar:focus-within input {
  display: inline-block;
  width: 19em;
  padding: 5px 10px;
}

.searchbar input {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  float: left;
  width: 0em;
  /* height: 30px; */
  margin: 5px;
  margin-right: -4.5em;
  background: #fff;
  color: #6A5D4F;
  font-size: 1em;
  /* font-weight: 600; */
  padding: 0px;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2) inset;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  -moz-transition: all 0.25s;
  -webkit-transition: all 0.25s;
}
.searchbar input:focus {
  outline: none;
  box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.25), 0 1px 5px rgba(0, 0, 0, 0.15);
}

.searchbar .button {
  display: flex;
  align-items: center;
  justify-content: center;
  float: right;
  width: 40px;
  height: 44px;
  /* margin: 5px; */
  /* background: rgb(238, 93, 124); */
  text-align: center;
  font-size: 24px;
  color: #FDF6E3;
  border-radius: 50%;
}
.searchbar .button:active {
  border: 0 !important;
  text-shadow: 0 0 0;
}
.searchbar .button i {
  font-size: 85%;
}
.searchbar .results {
  position: absolute;
  top: 40px;
  left: 5px;
  background-color: #fff;
  color: #000;
  width: 303px;
  border-radius: 7px;
  display: none;
}
.searchbar .results span {
  display: block;
  padding: 10px;
  transition: .3s all;
}
.searchbar .results span:hover {
  background: #ddd;
}


.searchbar:hover ~ .results {
  /* visibility: hidden;
  opacity: 0; */
  display: none !important;
}




.highlighted-country {
  border: 2px solid gold;
} 






/* :root {
  --bs-accordion-icon-color: white;
  --bs-accordion-icon-active-color: #fff;
} */

.propertiesList {
  color: #FFF;
  font-size: 13px;
}

.propertiesList .accordion-button {
  color: #D0F4FF;
  font-weight: 400;
  border-top: 1px solid #FFFFFF7D;
  font-size: 13px;
  padding: 12px 0;
}

.propertiesList .accordion-body {
  padding: 0;
  padding-bottom: 15px;
}


.propertiesSectionTitle {
  color: #F67390;
  text-transform: uppercase;
  font-weight: 500;
}

.accordion-button::after {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23FFFFFF7D" class="bi bi-chevron-compact-down" viewBox="0 0 16 16"%3E%3Cpath fill-rule="evenodd" d="M7.247 11.14 2.451 6.343a.5.5 0 1 1 .707-.707L8 10.086l4.842-4.45a.5.5 0 0 1 .707.707l-4.796 4.796a.5.5 0 0 1-.707 0z"/%3E%3C/svg%3E');
}

.accordion-button:not(.collapsed)::after {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23FFFFFF7D" class="bi bi-chevron-compact-down" viewBox="0 0 16 16"%3E%3Cpath fill-rule="evenodd" d="M7.247 11.14 2.451 6.343a.5.5 0 1 1 .707-.707L8 10.086l4.842-4.45a.5.5 0 0 1 .707.707l-4.796 4.796a.5.5 0 0 1-.707 0z"/%3E%3C/svg%3E');    
}

.checkbox-wrapper-50 {
  display: inline-block;
}

.checkbox-wrapper-50 label {
  background-color: #454545D9;
  padding: 4px 7px;
  border-radius: 5px;
  margin: 3.5px 2px;
  /* border: 2px solid #454545D9; */
}

.checkbox-wrapper-50 input[type="radio"] + label {
  transition: border 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.checkbox-wrapper-50 input[type="radio"]:checked + label {
  border: 2px solid #6696F4;
  background-color: #19191B; 
  color: #FFF;
}


#mainAccordion .accordion-button.main-section::after {
  display: none;
}

#mainAccordion .accordion-button.main-section:not(.collapsed)::after {
  display: unset;
  margin-right: 10px;
}


.cds--list-box {
  background-color: #19191B !important;
}

.cds-theme-zone-g100 {
  display: block;
  background-color: #19191B !important;
  margin-right: 2px;
}

.cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection:after {
  inline-size: none;
}

:host(cds-multi-select-item[selected]) {
  outline: none;
  box-shadow: none; /* If a box-shadow is used for focus indication */
}

.hide-after::after {
  display: none !important;
}







.multiselect {
  position: relative;
  display: block;
}

.selectBox {
  width: 99%;
  padding: 15px 15px;
  border: none;
  background-color: #19191b;
  color: #d0f4ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 5px;
  height: 50px;
}

.selectBox::after {
  font-family: "bootstrap-icons"; 
  content: "\F282"; /* Downward triangle for dropdown */
  margin-left: auto;
}

.count-circle {
  background-color: rgba(62, 62, 63, 1);
  color: #d0f4ff;
  margin-right: 10px;
  display: inline-block;
  position: relative;
  width: 50px;
  padding: 3px 10px;
  border-radius: 20px;
  text-align: left;
  opacity: 0; /* Start hidden */
  transform: scale(0.8); /* Start slightly smaller */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Add transition effect */
}


.clear-x {
  color: white;
  margin-left: 8px;
  cursor: pointer;
  position: absolute;
  top: 3px;
  right: 8px;
}

.clear-x .bi {
  font-size: 11px;
}

.checkboxes {
  display: none;
  border: none;
  background-color: #19191b;
  position: absolute;
  z-index: 1;
  width: 99%;
  box-sizing: border-box;
  border-radius: 0 0 5px 5px;
  margin-top: 2px;
}

.checkboxes label {
  display: block;
  padding: 7px 10px;
  color: rgba(189, 189, 189, 1);
}

.checkboxes label:first-of-type {
  border-bottom: .8px solid rgba(44, 44, 46, 1);
}

/* Checkbox Styling */
.checkboxes input[type="checkbox"] {
  position: relative;
  width: 12px;
  height: 12px;
  appearance: none;
  border: 1px solid rgba(221, 221, 221, 1);
  border-radius: 2px;
  background-color: transparent; /* Transparent background */
  cursor: pointer;
  margin: 0 10px;
  margin-top: 4px;
  border-radius: 0;
}

.checkboxes input[type="checkbox"]:checked {
  background-color: #19191b;
}

.checkboxes input[type="checkbox"]:checked::before {
  content: "\F26E"; /* Unicode for bi-heart icon */
  font-family: "bootstrap-icons"; 
  color: #fff; /* White checkmark */
  position: absolute;
  top: -4px;
  left: -1.5px;
}

.checkboxes input[type="checkbox"]:focus {
  outline: none;
/*   box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.5); */
}

.checkboxes label:hover {
  background-color: rgba(217, 217, 217, 0.1);
}






.compare-container {
  padding: 1%;
  padding-right: 64px;
  color: #fff;
  display: none;
}

.compare-container .summary {
  background-color: #252B35;
  border-radius: 7px;
  padding: 20px;
}

.compare-container .compareControls {
  background-color: #252B35;
  border-radius: 7px;
  padding: 20px;
  margin-top: 25px;
}

.compare-container .compareControls button {
  margin-right: 5px;
}

.compare-container #addCountryModal .modal-content {
  background-color: #252B35;
}

.compare-container .progress {
  margin: 10px;
}

.compare-container #addCountryModal .nice-select {
  width: 100%;
  background-color: #333;
  border: none;
}

.compare-container #addCountryModal .nice-select .list {
  width: 100%;
  background-color: #333;
}

.compare-container .placeBox {
  background-color: #252B35;
  border-radius: 7px;
  padding: 20px;
  margin-top: 25px;
  position: relative;
  height: 500px;
  
}

.compare-container .placeBox img {
  float: right;
  width: 100px;
}

.compare-container .removePlaceBox {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #dc3545;
  padding: 7px 10px;
  border-radius: 0 7px 0 7px;
  visibility: hidden;
  /* transform: scale(0.8); */
  transition: opacity .3s ease;
  cursor: pointer;
  opacity: 0.5;
}

.compare-container .placeBox:hover .removePlaceBox {
  visibility: visible;
}

.compare-container .removePlaceBox:hover {
  opacity: 1;
  /* transform: scale(1); */
}

.compare-container .addPlaceBox {
  opacity: .7;
  border: 2px dashed #FFF;
  background-color: #252B35;
  border-radius: 7px;
  padding: 20px;
  margin-top: 25px;
  position: relative;
  font-size: 20px;
  text-align: center;
  height: 500px;
}

.compare-container .addPlaceBox i {
  display: block;
  font-size: 200px;
}

.compare-container .openAddCountryModal {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  background: none;
  border: none;
}

#chatbotresponse {
  margin: 0 10px;
  display: none;
}


.chatbot {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #252b35;
  width: 400px;
  max-height: 95vh;
  z-index: 99;
  border-radius: 7px;
  overflow-y: scroll;
  overflow-x: hidden;
  transition: all .5s;

  width: 140px;
  height: 55px;
  overflow-y: hidden;
}

.chatbot::-webkit-scrollbar {
  width: .2em;
  border-radius: 7px;
}
 
.chatbot::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: .5px solid slategrey;
  border-radius: 7px;
}

.chatbot .title {
  color: rgba(241, 161, 155, 1);
  font-size: 18px;
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: 15px;
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #252b35;
  margin-bottom: 5px;
  cursor: pointer;
}

.chatbot .chathistory {
  color: rgba(179, 209, 223, 1);
  padding: 0 15px;
}

.chatbot .chathistory .thinking .glowing-circle {
  position: unset;
  display: inline-block;
}

.chatbot .chathistory .thinking span {
  display: inline-block;
  vertical-align: super;
  margin-left: 10px;
}

.chatbot .msg {
  background-color: rgba(48, 55, 66, 1);
  margin: 20px 40px;
  padding: 15px;
  border-radius: 7px;
  position: relative;
}

.chatbot .msg .text {
  user-select: text !important;
}

.chatbot .usermsg::after {
  content: '';
  position: absolute;
  top: 17px;
  right: -20px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(48, 55, 66, 1);
}

.chatbot .botmsg::before {
  content: '';
  position: absolute;
  top: 17px;
  left: -20px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent rgba(48, 55, 66, 1) transparent transparent;
}

.chatbot .msg .text {
  display: inline-block;
  /* margin-left: 25px; */
}


.chatbot .promptarea {
  margin-top: 20px;
  position: relative;
  position: sticky;
  bottom: 0;
  background-color: #252b35;
  padding: 0 15px 15px 15px;
}

.chatbot .promptarea textarea {
  width: 100%;
  height: 100px;
  background-color: rgba(21, 26, 34, 1);
  border: none;
  border-radius: 7px;
  resize: none;
  padding: 15px;
  color: rgba(179, 209, 223, 1);
}

.chatbot .promptarea textarea:focus {
  outline: none;
}

.chatbot .promptarea button {
  background-color: rgba(58, 96, 134, 1);
  border: none;
  position: absolute;
  bottom: 30px;
  right: 25px;
  padding: 5px 10px;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.49);
  font-weight: bold;
  transition: all .5s;
}

.chatbot .promptarea button:hover {
  padding: 5px 20px;
  background-color: rgba(58, 96, 134, 1);
  color: rgba(255, 255, 255, 1);
}

#sendprompt.passive {
  background-color: #ccc; /* Light gray color */
  cursor: not-allowed; /* Change the cursor to indicate it can't be clicked */
  opacity: 0.6; /* Make it look less prominent */
}


.glowing-circle {
  width: 25px;
  height: 25px;
  border: 2px solid rgba(238, 92, 124, 1); /* Circle color */
  border-radius: 50%; /* Makes it a circle */
  box-shadow: 0 0 20px rgba(255, 59, 92, 0.6), /* Initial glow */
              0 0 40px rgba(255, 59, 92, 0.4), 
              0 0 60px rgba(255, 59, 92, 0.2);
  background-color: transparent;
  /* margin-left: -54px;
  display: inline-block; */
  position: absolute;
  top: 15px;
  left: -39px;
}

.glow {
  animation: glow 2s infinite; /* Animation with glow effect */
}

@keyframes glow {
  0% {
    box-shadow: 0 0 20px rgba(255, 59, 92, 0.6), 
                0 0 40px rgba(255, 59, 92, 0.4), 
                0 0 60px rgba(255, 59, 92, 0.2);
    transform: scale(1); /* Regular size */
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 59, 92, 0.8), 
                0 0 50px rgba(255, 59, 92, 0.6), 
                0 0 70px rgba(255, 59, 92, 0.4);
    transform: scale(1.1); /* Grow slightly */
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 59, 92, 0.6), 
                0 0 40px rgba(255, 59, 92, 0.4), 
                0 0 60px rgba(255, 59, 92, 0.2);
    transform: scale(1); /* Back to normal */
  }
}


.visualsDescription {
  position: absolute;
  color: #D0F4FF;
  bottom: 10px;
  left: 10px;
  z-index: 99;
  font-size: 12px;
  opacity: .9;
}



.policySection {
  padding: 20px;
  position: relative;
  color: #fff;

  display: none;
}

.policySection .sectionTitle {
  color: #F67390;
  display: inline-block;
  margin-left:170px;
  margin-top: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
}

.policySection .cityInfo {
  font-size: 20px;
}

.policySection .cityInfo img {
  width: 30px;
}

.policySection .propertyInfo {
  background: #2A344880;
  color: #A3B4C9;
  padding: 5px 7px;
  border-radius: 5px;
  display: inline-block;
  margin-bottom: 15px;
  color: #CCE2FF
}

.policySection .cityBadge {
  background: #323232;
  color: #D0F4FFE5;
  padding: 5px 7px;
  border-radius: 5px;
  font-size: 16px;
  display: inline-block;
  margin-right: 3px;
}

.policySection .progressBox {
  background-color: #0f1b2d;
  border-radius: 5px;
  padding: 20px;
}

.policySection .progressBox .progress {
  height: 10px;
}

.policySection .progressBox .progress-bar {
  background-color: #284875;
}

.policySection .progressBox p span {
  float: right;
}

.policySection .policySlider {
  background-color: #3B546C66;
  padding: 15px;
  display: block;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 20px;
}

.policySection #policyCarousel button {
  margin-top: -17px;
}

.policySection .policyCitySpace {
  border: 1.5px solid #6C84B2;
  padding: 20px;
  height: 290px;
  overflow-y: scroll;
}

.policySection .policyCitySpace .policyCityItem {
  border-radius: 5px;
  background-color: #324256; 
  text-align: center;
  padding: 15px;
  margin-bottom: 20px;
}

.policySection .policyCard {
  background: #263240;
  padding: 20px;
  border-radius: 5px;
}

.policySection h5 {
  color: #6AA7F2;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 20px;
}

.policySection .info hr {
  margin: 30px 0;
}

.policyMapContainer {
  width: 100%;
  height: 300px;
}

#policyMap {
  width: 100%;
  height: 100%;
}


/* make columns in the row stretch to same height */
.policySection .row.equalCardsRow{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
}

/* each col stretches, and card fills it */
.policySection .row.equalCardsRow > [class^="col-"],
.policySection .row.equalCardsRow > [class*=" col-"]{
  display:flex;
}

.policySection .row.equalCardsRow .policyCard,
.policySection .row.equalCardsRow .sayDoCard{
  width:100%;
  height:100%;
  min-height:190px;   /* adjust to what looks right */
}



/* Effectiveness chart styling (similar look to your screenshot) */
.effectivenessWrap{
  background:#0f1b2d;
  border-radius:10px;
  padding:7px;
  height:170px;
}

.effChart{ width:100%; height:100%; display:block; }

.effLine{
  stroke:#3b5578;
  stroke-width:4;
  stroke-linecap:round;
  opacity:.7;
}
.effLine.current{
  stroke:#5f83b6;
  opacity:1;
}

.effLbl{
  fill:rgba(255,255,255,.85);
  font-size:16px;
}
.effVal{
  fill:rgba(255,255,255,.9);
  font-size:14px;
}



.sayDoCard{
  background:#2b2f35;
  border-radius:12px;
  padding:18px 18px 10px;
  color:#fff;
}

.sayDoTitle{
  text-align:center;
  font-size:20px;
  opacity:.9;
  margin-bottom:6px;
}

.sayDoGauge{
  width:100%;
  height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: -30px
}

.sayDoSvg{
  width:100%;
  max-width:360px;
  height:100%;
  display:block;
  margin-top: -50px
}

.arcBg{
  fill:none;
  stroke:rgba(255,255,255,.12);
  stroke-width:10;
  stroke-linecap:round;
}

.arc{
  fill:none;
  stroke:url(#saydoGrad);
  stroke-width:10;
  stroke-linecap:round;
}

.sayDoValue{
  fill:rgba(255,255,255,.75);
  font-size:34px;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.needleLine{
  stroke:rgba(0,0,0,.45);
  stroke-width:3;
  stroke-linecap:round;
}

.needleHub{
  fill:rgba(0,0,0,.35);
}




.contentLoader {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 0.5 = 50% opacity */
  z-index: 99;
  display: none;

  
}

.centered-text {
  position: absolute;
  top: calc(50% + 100px);
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* optional: for visibility */
  font-size: 1.1em; /* optional styling */
  text-align: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6); /* <-- semi-transparent black */
  border-radius: 7px;
}


.mapboxgl-popup-content {
    background: black !important;
    color: white !important;
    border-radius: 4px;
    padding: 8px;
    font-family: sans-serif;
}

.mapboxgl-popup-tip {
    border-top-color: black !important;
}




/* .clustersMapInfo {
  display: none !important;
} */



/* Gray-out disabled properties; keep pointer-events so tooltips work */
.propertiesList label.disabled-property {
  opacity: 0.55;
  cursor: not-allowed;
  text-decoration: none;
}
/* Tooltip shouldn't steal hover from the sidebar */
.tooltip {
  pointer-events: none;
}











/* ===== UMG namespaced styles (no global collisions) ===== */
.umg-toggle {
  --umg-toggle-h: 40px;
  --umg-toggle-radius: 999px;
  --umg-toggle-gap: 2px;
  --umg-bg: #f3f4f6;           /* track bg */
  --umg-border: #e5e7eb;       /* track border */
  --umg-active: #111827;       /* slider bg */
  --umg-text: #111827;         /* label text */
  --umg-text-active: #ffffff;  /* active label text */

  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 280px;
  height: var(--umg-toggle-h);
  background: var(--umg-bg);
  border: 1px solid var(--umg-border);
  border-radius: var(--umg-toggle-radius);
  padding: var(--umg-toggle-gap);
  user-select: none;
  box-sizing: border-box;
}

.umg-toggle__label {
  position: relative;
  z-index: 2;
  text-align: center;
  font: 500 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--umg-text);
  cursor: pointer;
  padding: 0 12px;
}

/* Hide native radios but keep them accessible */
.umg-toggle__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Active label color follows container [data-mode] */
.umg-toggle[data-mode="current"] .umg-toggle__label[data-value="current"],
.umg-toggle[data-mode="projected"] .umg-toggle__label[data-value="projected"] {
  color: var(--umg-text-active);
  font-weight: 600;
}

.umg-toggle__slider {
  position: absolute;
  z-index: 1;
  top: var(--umg-toggle-gap);
  left: var(--umg-toggle-gap);
  width: calc(50% - var(--umg-toggle-gap));
  height: calc(100% - (var(--umg-toggle-gap) * 2));
  background: var(--umg-active);
  border-radius: calc(var(--umg-toggle-radius) - var(--umg-toggle-gap));
  transition: transform 160ms ease;
  will-change: transform;
}




#mapProjected { width: 100%; height: 100%; }



.map-badge{
  background: rgba(20,24,38,.85);
  color:#fff;
  padding:6px 10px;
  border-radius:12px;
  font:600 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  margin:10px;
}








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

html, body {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #050814;
  color: #fff;
  overflow-x: hidden;
} */

/* The invisible scroll area */
/* #scroll-track {
  width: 1px;         
} */

/* Fixed slides container: stays in place, we just fade slides */
/* #slides {
  position: fixed;
  inset: 0;
} */

/* Each slide fills the viewport */
/* .slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;          
  pointer-events: none;
  transition: opacity 0.05s linear; 
} */

/* .slide-hero,
.slide-globe,
.slide-next {
  background: #050814;
}

.center-wrapper {
  text-align: center;
} */

/* HERO CARD -----------------------------------------------------------*/
/* .card-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.video-placeholder {
  width: 260px;
  height: 260px;
  border-radius: 2px;
  background: linear-gradient(135deg, #ff6a3d, #ff0080, #ffcd3c);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: stretch;
}

.video-inner {
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
}

.logo-text {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
}

.logo-text span {
  display: block;
}

.caption {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #f5f5f5;
} */

/* GLOBE SLIDE ---------------------------------------------------------*/
/* .globe-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.globe-wrapper {
  width: 230px;
  height: 230px;
  transition: transform 0.1s linear;
  will-change: transform;
}

#map {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 50px rgba(0, 132, 255, 0.7);
}

.globe-text {
  max-width: 420px;
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
} */

/* NEXT SLIDE ----------------------------------------------------------*/
/* .slide-next h1 {
  font-size: 28px;
  margin-bottom: 12px;
}

.slide-next p {
  font-size: 14px;
} */

/* RESPONSIVE ----------------------------------------------------------*/
/* @media (max-width: 700px) {
  .globe-wrapper {
    width: 200px;
    height: 200px;
  }
} */



/* wrapper (the box) */
#addCity .addCityInputWrap{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:6px;
  background:#19191B;
  border:1px solid #19191B;
  /* box-shadow:0 0 0 1px #19191B inset; */
  flex-wrap:wrap;            /* allow chips to wrap inside box */
}

/* chips container inside the box */
#addCity .chipsRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

/* chip style like screenshot */
#addCity .cityChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#111a24;
  border:1px solid #111a24;
  color:#D0F4FF;
  border-radius:6px;
  padding:6px 10px;
  font-size:14px;
  line-height:1;
  white-space:nowrap;
}

/* country code badge (NE / EG / US, etc.) */
#addCity .cityChip .chipCode{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:18px;
  min-width:26px;
  padding:0 6px;
  border-radius:6px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.7);
  font-size:12px;
  letter-spacing:.4px;
}

/* chip remove X */
#addCity .chipRemove{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.65);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  padding:0;
  margin:0;
}
#addCity .chipRemove:hover{ color:#fff; }

/* plus icon */
#addCity .chipAddIcon{
  width:18px;
  height:18px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.75);
  font-weight:700;
  flex:0 0 auto;
}

/* input stays inside the same box */
#addCity #addCityQuery{
  flex:1;
  min-width:160px;
  border:0;
  outline:0;
  background:transparent;
  color:rgba(255,255,255,.9);
  font-size:14px;
}

/* trailing clear X */
#addCity .inputClear{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.55);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  padding:0 2px;
  display: none;
}
#addCity .inputClear:hover{ color:#fff; }

/* results dropdown */
#addCity .cityResults{
  display:none;
  margin-top:8px;
  background:#19191B;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  overflow:hidden;
}
#addCity .cityResults .cityResultItem{
  padding:10px 12px;
  color:#D0F4FF;
  cursor:pointer;
  font-size:14px;
}
#addCity .cityResults .cityResultItem:hover{
  background:rgba(255,255,255,.06);
}



.addCity {
margin-bottom: 15px;
}

.pillFilters{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:14px 16px;
  border-radius:10px;
  background:#19191B;
  width:fit-content;
  margin-bottom: 15px;
  width: 100%;
}

/* now vertical */
.pillCol{
  display:flex;
  /* flex-direction:column; */
  gap:10px;
  color: #D0F4FF;
  flex-wrap: wrap;
}

/* switch row */
.pillSwitch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
  color:#D0F4FF;
  font-size:14px;
}

.pillSwitch input{ display:none; }

/* toggle */
.pillTrack{
  width:26px;
  height:14px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  position:relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.pillTrack::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(0,0,0,.35);
  position:absolute;
  top:2px;
  left:2px;
  transition:all .15s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* ON */
.pillSwitch input:checked + .pillTrack{
  background:rgba(88,140,255,.35);
  box-shadow: inset 0 0 0 1px rgba(88,140,255,.55);
}
.pillSwitch input:checked + .pillTrack::after{
  left:14px;
  background:#6fa4ff;
}

/* tabs */
.pillTabs{
  display:flex;
  gap:16px;
}

.pillTab{
  min-width:170px;
  height:38px;
  border-radius:4px;
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer;
  font-size:14px;
}
.pillTab.is-active{
  background:rgba(0,0,0,.15);
  border:1px solid rgba(120,160,255,.85);
  box-shadow:0 0 0 1px rgba(120,160,255,.25) inset;
  color:rgba(255,255,255,.9);
}
.pillTab:active{ transform:translateY(1px); }

.pillLabel {
    color: #D0F4FF;
}

#policy .radio-boxes {
  margin-bottom: 15px;
}






/* Floating switch container */
.floating-map-switch {
  position: absolute;
  bottom: 16px;
  left: 23%;
  transform: translateX(-50%);
  z-index: 9999;

  display: inline-flex;
  gap: 6px;
  padding: 6px;

  background: rgba(20, 20, 20, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border-radius: 999px;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Hide native radio buttons */
.floating-map-switch input[type="radio"] {
  display: none;
}

/* Button style */
.floating-map-switch label span {
  display: inline-block;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;

  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  user-select: none;

  border-radius: 999px;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease;
}

/* Hover */
.floating-map-switch label span:hover {
  color: #fff;
}

/* Active (checked) state */
.floating-map-switch input[type="radio"]:checked + span {
  background: linear-gradient(135deg, #4f9cff, #2b6df6);
  color: #fff;

  box-shadow:
    0 4px 10px rgba(79, 156, 255, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* Subtle press effect */
.floating-map-switch label span:active {
  transform: scale(0.96);
}

/* Hidden until projection is available */
.floating-map-switch {
  display: none;            /* default hidden */
  opacity: 0;
  pointer-events: none;
}

/* Show when projection is ready */
.floating-map-switch.is-visible {
  display: inline-flex;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}

.floating-map-switch .map-year {
  margin-left: 6px;
  font-style: normal;
  font-weight: 500;
  opacity: 0.75;
  font-size: 0.75rem;
}

/* ---------------------------------------------------------------
   City Profile
   Palette follows the rest of the app: #19191B / #252B35 surfaces,
   #D0F4FF text, #ee5d7c accent.
   --------------------------------------------------------------- */
:root{
  --cp-bg:#19191B;
  --cp-surface:#252B35;
  --cp-surface-2:#2E3644;
  --cp-line:#3D4757;
  --cp-text:#D0F4FF;
  --cp-text-dim:#8FA6B4;
  --cp-accent:#ee5d7c;
  /* Scales with the viewport: the Sister Cities and Compare tables carry
     several numeric columns and were unreadable at a fixed 430px. */
  --cp-panel-w:clamp(430px, 42vw, 820px);
}

/* ---- sidebar controls ---- */
.cp-label{display:block;margin:14px 0 6px;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cp-text-dim);font-weight:700}

.cp-dd{position:relative;user-select:none}
.cp-dd-btn{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;
  border-radius:8px;cursor:pointer;text-align:left;font-size:13px;line-height:1.25;
  color:var(--cp-text);background:var(--cp-surface-2);border:1px solid var(--cp-line);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.cp-dd-btn:hover{border-color:var(--cp-accent);background:#343D4E}
.cp-dd.open .cp-dd-btn{border-color:var(--cp-accent);box-shadow:0 0 0 3px rgba(238,93,124,.25)}
.cp-dd.disabled{opacity:.5;pointer-events:none}
.cp-dd-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;color:#fff}
/* NOT ".placeholder" - that is a Bootstrap skeleton-loader utility
   (background-color:currentcolor), which painted a solid bar over the label. */
.cp-dd-value.cp-ph{color:var(--cp-text-dim);font-weight:400}
.cp-dd-count{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;
  background:var(--cp-accent);color:#fff}
.cp-dd-count:empty{display:none}
.cp-dd-caret{font-size:11px;color:var(--cp-text-dim);transition:transform .18s ease}
.cp-dd.open .cp-dd-caret{transform:rotate(180deg);color:var(--cp-accent)}

/* In normal flow, NOT absolute: the sidebar (.menu) sets overflow-y:scroll /
   overflow-x:hidden, which clips any absolutely positioned child - the open list
   showed up as a cut-off blank rectangle. Expanding inline also matches how a
   native select behaves in a narrow scrolling column. */
.cp-dd-panel{display:none;margin-top:6px;overflow:hidden;border-radius:10px;
  background:var(--cp-surface);border:1px solid var(--cp-line);
  box-shadow:0 10px 26px rgba(0,0,0,.55)}
.cp-dd.open .cp-dd-panel{display:block;animation:cpDrop .16s ease-out}
@keyframes cpDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.cp-dd-search{display:flex;align-items:center;gap:8px;padding:9px 11px;
  border-bottom:1px solid var(--cp-line);background:var(--cp-bg)}
.cp-dd-search i{font-size:12px;color:var(--cp-text-dim)}
.cp-dd-search input{flex:1;border:0;outline:0;background:transparent;color:#fff;font-size:13px}
.cp-dd-search input::placeholder{color:var(--cp-text-dim)}

.cp-dd-list{max-height:220px;overflow-y:auto;overscroll-behavior:contain}
.cp-dd-item{padding:9px 12px;font-size:13px;cursor:pointer;color:var(--cp-text);
  border-left:3px solid transparent;transition:background .12s ease,color .12s ease}
.cp-dd-item:hover{background:var(--cp-surface-2);border-left-color:var(--cp-accent);color:#fff}
.cp-dd-item.sel{background:var(--cp-accent);border-left-color:#fff;color:#fff;font-weight:700}
.cp-dd-none{padding:12px;font-size:12px;text-align:center;color:var(--cp-text-dim)}

.cp-dd-list::-webkit-scrollbar,.cp-panel-body::-webkit-scrollbar{width:9px}
.cp-dd-list::-webkit-scrollbar-track,.cp-panel-body::-webkit-scrollbar-track{background:var(--cp-bg)}
.cp-dd-list::-webkit-scrollbar-thumb,.cp-panel-body::-webkit-scrollbar-thumb{
  background:var(--cp-line);border-radius:9px}
.cp-dd-list::-webkit-scrollbar-thumb:hover,.cp-panel-body::-webkit-scrollbar-thumb:hover{
  background:var(--cp-accent)}

.cp-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:16px;padding:11px 12px;border-radius:8px;font-size:13px;font-weight:700;
  letter-spacing:.02em;color:#fff;border:0;background:var(--cp-accent);
  box-shadow:0 6px 18px rgba(238,93,124,.35);
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
.cp-btn:hover{transform:translateY(-1px);filter:brightness(1.08);color:#fff;
  box-shadow:0 10px 26px rgba(238,93,124,.45)}
.cp-btn:active{transform:translateY(0)}

.cp-status{display:block;margin-top:10px;font-size:12px;color:var(--cp-text-dim)}
.cp-status.cp-error{color:#FF9AAE;font-weight:600}
.cp-status.cp-busy{color:var(--cp-text)}

/* ---- right-docked results panel (on the map, not in the sidebar) ---- */
/* NOTE on the closed state: this panel is absolutely positioned against the
   right edge of #mainMapContainer, which is NOT the full window - the typology
   view puts #charts immediately to its right. translateX(100%) therefore parks
   the closed panel directly ON TOP of that charts pane, and since it is opaque
   with z-index 40 it hid the cluster radars completely. They reappeared only
   while hovered because the hover spotlight raises a chart to z-index 99.
   visibility:hidden takes it out of painting entirely when closed; the delayed
   transition keeps the slide-out animation intact. */
/* The panel is absolutely positioned inside .map-container, so it docks to
   that container's right edge - and the container is not always full width.
   Urban Typology shrinks it to 45%, which is narrower than the panel's own
   806px, so the panel used to hang past the container's left edge and cover
   the sidebar. Capping at 100% keeps it inside whatever it is docked to. */
.cp-panel{position:absolute;top:0;right:0;z-index:40;
  width:var(--cp-panel-w);max-width:min(92vw,100%);height:100%;
  display:flex;flex-direction:column;background:var(--cp-bg);
  border-left:1px solid var(--cp-line);box-shadow:-18px 0 46px rgba(0,0,0,.6);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .34s cubic-bezier(.22,.61,.36,1), visibility 0s linear .34s;
  pointer-events:none}
.cp-panel.open{transform:translateX(0);pointer-events:auto;
  visibility:visible;
  transition:transform .34s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s}

.cp-panel-head{display:flex;align-items:center;gap:10px;padding:16px 18px;
  background:var(--cp-surface);border-bottom:2px solid var(--cp-accent)}
.cp-panel-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.cp-panel-title .cp-city{font-size:21px;font-weight:700;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-panel-title .cp-country{font-size:12px;color:var(--cp-text-dim)}
.cp-panel-head .cp-count{margin-left:auto;font-size:10px;font-weight:700;
  padding:4px 10px;border-radius:999px;background:var(--cp-accent);color:#fff;white-space:nowrap}
.cp-count:empty{display:none}
.cp-panel-close{display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:7px;border:1px solid var(--cp-line);background:transparent;
  color:var(--cp-text);cursor:pointer;transition:background .14s ease,color .14s ease}
.cp-panel-close:hover{background:var(--cp-accent);border-color:var(--cp-accent);color:#fff}

.cp-panel-body{position:relative;flex:1;overflow-y:auto;background:var(--cp-bg)}

/* ---- table ---- */
.cp-table{width:100%;border-collapse:collapse;font-size:13.5px}
.cp-table thead th{position:sticky;top:0;z-index:1;text-align:left;padding:11px 18px;
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cp-text-dim);background:var(--cp-surface);
  border-bottom:1px solid var(--cp-line)}
.cp-table td{padding:11px 18px;border-bottom:1px solid #23282F;vertical-align:top}
.cp-table tbody tr:nth-child(even){background:#1E1F23}
.cp-table tbody tr:hover{background:var(--cp-surface-2)}
.cp-prop{width:56%;color:var(--cp-text)}
.cp-val{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
  font-weight:700;color:#fff}
.cp-unit{display:block;font-size:10.5px;font-weight:400;color:var(--cp-text-dim);margin-top:2px}
.cp-na{color:#6C7A85;font-style:italic;font-weight:400}
.cp-empty{padding:26px 18px;font-size:13px;color:var(--cp-text-dim);text-align:center}

/* ---- loading ---- */
.cp-loading{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:rgba(25,25,27,.92);backdrop-filter:blur(2px)}
.cp-loading[hidden]{display:none}
.cp-loading-text{font-size:13px;color:var(--cp-text);letter-spacing:.02em}
.cp-spinner{width:38px;height:38px;border-radius:50%;
  border:3px solid var(--cp-line);border-top-color:var(--cp-accent);
  animation:cpSpin .8s linear infinite}
@keyframes cpSpin{to{transform:rotate(360deg)}}

@media (max-width:900px){
  .cp-panel{width:100%;max-width:100%}
}


/* ---------------------------------------------------------------
   Sidebar pinned open
   The panel used to sit at 65px and animate to 300px on click. It is now
   always expanded, so the collapsed-state rules above are overridden here
   rather than edited in place (the JS animation still reads them).
   --------------------------------------------------------------- */
.left{
  max-width:300px !important;
  min-width:300px !important;
  width:300px !important;
}
.left .menu .logo span{color:#FFF !important;opacity:1 !important}
.left .sidenav .title span{display:inline-block !important;opacity:1 !important}
.left .sidenav .title .bi{color:#FFF !important}
.sidenav .accordion-button.hide-after::after{display:none}

/* ---------------------------------------------------------------
   Sister Cities / Rankings / Compare
   --------------------------------------------------------------- */
.cp-num{color:var(--cp-accent);font-weight:700}

.cp-range{width:100%;margin:4px 0 2px;accent-color:var(--cp-accent);
  background:transparent;cursor:pointer}

.cp-toggle{display:flex;gap:6px}
.cp-toggle button{flex:1;padding:8px 6px;border-radius:7px;font-size:12px;font-weight:600;
  color:var(--cp-text);background:var(--cp-surface-2);border:1px solid var(--cp-line);
  cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease}
.cp-toggle button:hover{border-color:var(--cp-accent)}
.cp-toggle button.active{background:var(--cp-accent);border-color:var(--cp-accent);color:#fff}

/* explanatory strip above a result table */
.cp-note{padding:12px 18px;font-size:12px;line-height:1.55;color:var(--cp-text-dim);
  border-bottom:1px solid var(--cp-line);background:var(--cp-surface)}
.cp-note b{color:var(--cp-text)}

/* wide result sets scroll sideways inside the panel */
.cp-wide{overflow-x:auto}
.cp-wide .cp-table{min-width:100%}

.cp-rank{width:38px;text-align:right;color:var(--cp-text-dim);
  font-variant-numeric:tabular-nums;font-weight:700}

/* similarity / magnitude bar sits behind the number */
.cp-simbar{position:absolute;left:0;top:50%;transform:translateY(-50%);height:20px;
  background:linear-gradient(90deg,rgba(238,93,124,.5),rgba(238,93,124,.16));
  border-radius:3px;z-index:0}
.cp-simnum{position:relative;z-index:1}
.cp-table td.cp-val{position:relative}

/* compare: three columns, the larger value highlighted */
.cp-compare th:nth-child(2),.cp-compare th:nth-child(3){text-align:right}
.cp-compare .cp-prop{width:46%}
.cp-compare td.cp-val{width:27%}
.cp-lead{color:#fff;background:rgba(238,93,124,.20);
  box-shadow:inset 2px 0 0 var(--cp-accent)}
.cp-compare .cp-unit{display:block;font-size:10px;margin-top:2px}

/* ---------------------------------------------------------------
   Trends chart, grouped menus, export button
   --------------------------------------------------------------- */
.cp-dd-group{position:sticky;top:0;z-index:1;padding:7px 12px;
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cp-accent);background:var(--cp-bg);
  border-bottom:1px solid var(--cp-line)}

.cp-panel-btn{display:grid;place-items:center;width:30px;height:30px;flex:none;
  margin-left:auto;border-radius:7px;border:1px solid var(--cp-line);
  background:transparent;color:var(--cp-text);cursor:pointer;
  transition:background .14s ease,color .14s ease,border-color .14s ease}
.cp-panel-btn:hover{background:var(--cp-accent);border-color:var(--cp-accent);color:#fff}
/* the count badge already claims the free space when it is present */
.cp-panel-head .cp-count + .cp-panel-btn{margin-left:8px}

.cp-chartbox{position:relative;height:260px;padding:14px 16px 6px;
  background:var(--cp-surface);border-bottom:1px solid var(--cp-line)}

.cp-tag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(238,93,124,.22);color:#ffd2dd;vertical-align:middle}
.cp-tag-proj{background:rgba(111,195,223,.20);color:#BEE7F5}
.cp-projrow .cp-val{color:#BEE7F5}
.cp-dd-empty{padding:12px;font-size:12px;text-align:center;color:var(--cp-text-dim)}

/* ---------------------------------------------------------------
   City Profile: grouped indicator cards + hover descriptions
   --------------------------------------------------------------- */
.cp-group{border-bottom:1px solid var(--cp-line)}
.cp-group:last-child{border-bottom:0}
.cp-group-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;
  padding:10px 18px;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cp-accent);
  background:linear-gradient(180deg,var(--cp-surface),#20262F);
  border-bottom:1px solid var(--cp-line);
  box-shadow:0 1px 0 rgba(0,0,0,.35)}
.cp-group-n{margin-left:auto;padding:1px 8px;border-radius:999px;font-size:10px;
  font-weight:700;letter-spacing:0;color:var(--cp-text-dim);
  background:rgba(255,255,255,.07)}

/* rows read as key/value pairs rather than a dense grid */
.cp-group .cp-table td{padding:12px 18px;border-bottom:1px solid #21252B}
.cp-group .cp-table tr:last-child td{border-bottom:0}
.cp-group .cp-table tr[data-desc]{cursor:help}
.cp-group .cp-table tr:hover{background:linear-gradient(90deg,
  rgba(238,93,124,.16),rgba(238,93,124,.04))}
.cp-group .cp-table tr:hover .cp-info{opacity:1;color:var(--cp-accent)}
.cp-group .cp-table tr:hover .cp-propname{color:#fff}

.cp-propname{color:var(--cp-text);transition:color .14s ease}
.cp-info{margin-left:7px;font-size:11px;opacity:.32;vertical-align:baseline;
  transition:opacity .14s ease,color .14s ease}
.cp-valnum{display:block;font-size:15px;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1.2}
.cp-group .cp-unit{display:block;margin-top:3px;font-size:10.5px;font-weight:400;
  color:var(--cp-text-dim);white-space:normal}
.cp-group .cp-val{width:38%}

/* floating description bubble - lives on <body> so the panel cannot clip it */
.cp-tip{position:fixed;z-index:9999;max-width:300px;padding:11px 13px;
  border-radius:9px;font-size:12.5px;line-height:1.55;
  color:var(--cp-text);background:#10151C;
  border:1px solid var(--cp-line);border-left:3px solid var(--cp-accent);
  box-shadow:0 14px 36px rgba(0,0,0,.72);
  opacity:0;visibility:hidden;transform:translateX(6px);pointer-events:none;
  transition:opacity .14s ease,transform .14s ease,visibility .14s}
.cp-tip.show{opacity:1;visibility:visible;transform:none}

/* header cells in the wide tables get the same affordance */
.cp-table th[data-desc]{cursor:help;text-decoration:underline dotted 1px;
  text-underline-offset:3px}
.cp-compare td.cp-prop[data-desc]{cursor:help}

/* ---------------------------------------------------------------
   Projection model card - shown in the Trends panel and over the map
   --------------------------------------------------------------- */
.cp-model{border-top:1px solid var(--cp-line);background:var(--cp-surface)}
.cp-model-head{display:flex;align-items:center;gap:8px;padding:11px 16px;
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cp-accent);border-bottom:1px solid var(--cp-line)}
.cp-model-name{margin-left:auto;padding:2px 9px;border-radius:999px;
  font-size:10px;letter-spacing:.04em;background:var(--cp-accent);color:#fff}
.cp-model-formula{padding:12px 16px;font-family:ui-monospace,SFMono-Regular,
  "SF Mono",Menlo,Consolas,monospace;font-size:13.5px;color:#fff;
  background:var(--cp-bg);border-bottom:1px solid var(--cp-line);
  overflow-x:auto;white-space:nowrap}
.cp-model-row{display:grid;grid-template-columns:104px 1fr;gap:12px;
  padding:10px 16px;font-size:12px;line-height:1.6;color:var(--cp-text);
  border-bottom:1px solid #21252B}
.cp-model-row:last-child{border-bottom:0}
.cp-model-k{font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--cp-text-dim);padding-top:2px}

/* floating version over the globe */
.cp-mapnote{position:absolute;left:18px;bottom:18px;z-index:35;width:390px;
  max-width:calc(100vw - 36px);border-radius:11px;overflow:hidden;
  background:var(--cp-bg);border:1px solid var(--cp-line);
  box-shadow:0 18px 44px rgba(0,0,0,.66)}
.cp-mapnote .cp-model{border-top:0}
.cp-model-close{position:absolute;top:8px;right:8px;z-index:2;display:grid;
  place-items:center;width:24px;height:24px;border-radius:6px;
  border:1px solid var(--cp-line);background:var(--cp-bg);color:var(--cp-text);
  cursor:pointer;font-size:10px}
.cp-model-close:hover{background:var(--cp-accent);border-color:var(--cp-accent);color:#fff}

/* numbered result pins on the globe */
.cp-pin{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  font-size:11px;font-weight:800;color:#fff;cursor:pointer;
  background:var(--cp-accent);border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.55);transition:transform .12s ease}
.cp-pin:hover{transform:scale(1.25);z-index:5}

/* popup shown when a city on the globe is clicked */
.cp-globepop .mapboxgl-popup-content{padding:0;border-radius:10px;overflow:hidden;
  background:var(--cp-bg);border:1px solid var(--cp-line);
  box-shadow:0 14px 34px rgba(0,0,0,.6)}
.cp-globepop .mapboxgl-popup-tip{border-top-color:var(--cp-line);
  border-bottom-color:var(--cp-line)}
.cp-globepop .mapboxgl-popup-close-button{color:var(--cp-text-dim);font-size:16px;
  padding:2px 7px}
.cp-globepop .mapboxgl-popup-close-button:hover{background:transparent;color:var(--cp-accent)}
.cp-gp{min-width:186px;padding:13px 15px 13px}
.cp-gp-city{font-size:16px;font-weight:700;color:#fff;line-height:1.25;
  padding-right:14px}
.cp-gp-country{display:flex;align-items:center;gap:5px;margin-top:3px;
  font-size:12px;color:var(--cp-text-dim)}
.cp-gp-country .bi{font-size:11px;color:var(--cp-accent)}
.cp-gp-btn{width:100%;margin-top:11px;padding:7px 10px;border:0;border-radius:6px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;color:#fff;cursor:pointer;
  background:var(--cp-accent);transition:filter .14s ease}
.cp-gp-btn:hover{filter:brightness(1.1)}

/* ---------------------------------------------------------------
   City profile modal (opened from the globe)
   --------------------------------------------------------------- */
.cp-modal{position:fixed;inset:0;z-index:1200;display:none}
.cp-modal.open{display:block}
.cp-modal-backdrop{position:absolute;inset:0;background:rgba(8,10,14,.66);
  backdrop-filter:blur(2px)}
.cp-modal-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;width:min(720px,92vw);max-height:84vh;
  border-radius:14px;overflow:hidden;background:var(--cp-bg);
  border:1px solid var(--cp-line);box-shadow:0 30px 80px rgba(0,0,0,.7);
  animation:cpModalIn .18s ease-out}
@keyframes cpModalIn{from{opacity:0;transform:translate(-50%,-46%)}
                     to{opacity:1;transform:translate(-50%,-50%)}}
.cp-modal-head{display:flex;align-items:center;gap:10px;padding:16px 18px;
  background:var(--cp-surface);border-bottom:2px solid var(--cp-accent)}
.cp-modal-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.cp-modal-city{font-size:21px;font-weight:700;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-modal-country{font-size:12px;color:var(--cp-text-dim)}
.cp-modal-count{margin-left:auto;font-size:10px;font-weight:700;padding:4px 10px;
  border-radius:999px;background:var(--cp-accent);color:#fff;white-space:nowrap}
.cp-modal-count:empty{display:none}
.cp-modal-body{position:relative;flex:1;overflow-y:auto;background:var(--cp-bg)}
.cp-modal-body::-webkit-scrollbar{width:9px}
.cp-modal-body::-webkit-scrollbar-track{background:var(--cp-bg)}
.cp-modal-body::-webkit-scrollbar-thumb{background:var(--cp-line);border-radius:9px}
.cp-modal-body::-webkit-scrollbar-thumb:hover{background:var(--cp-accent)}

/* hover card on the globe */
.cp-gp-hint{margin-top:8px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--cp-accent);opacity:.85}

/* The hover card must never intercept the click: it sits directly over the city
   it names, so with default pointer events it swallowed the click and the
   profile never opened. Purely informational - clicks pass through to the map. */
.cp-globepop,
.cp-globepop .mapboxgl-popup-content,
.cp-globepop .mapboxgl-popup-tip{pointer-events:none}

/* extra rows in the hover card when it describes a numbered result pin */
.cp-gp-rank{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--cp-accent)}
.cp-gp-val{margin-top:5px;font-size:12px;font-weight:700;color:#fff}
/* pins must stay interactive even though the hover card above is click-through */
.cp-pin{pointer-events:auto}

/* year-on-year change column in the Trends table */
.cp-delta{display:inline-block;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.cp-delta.up{background:rgba(112,197,66,.18);color:#9BE06B}
.cp-delta.down{background:rgba(238,93,124,.20);color:#FF9AAE}

/* dropdown loading state */
.cp-dd.busy .cp-dd-btn{border-color:var(--cp-accent);opacity:.85}
.cp-dd.busy .cp-dd-caret{opacity:.4}
.cp-dd-loading{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 12px;font-size:12px;color:var(--cp-text-dim)}
.cp-dd-spin{width:13px;height:13px;flex:none;border-radius:50%;
  border:2px solid var(--cp-line);border-top-color:var(--cp-accent);
  animation:cpSpin .75s linear infinite}

/* Urban Profile: recorded-year buttons */
.cp-yearbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cp-yearbtns button{flex:1 1 auto;min-width:56px;padding:7px 8px;border-radius:7px;
  font-size:12px;font-weight:600;color:var(--cp-text);background:var(--cp-surface-2);
  border:1px solid var(--cp-line);cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease}
.cp-yearbtns button:hover{border-color:var(--cp-accent)}
.cp-yearbtns button.active{background:var(--cp-accent);border-color:var(--cp-accent);color:#fff}
.cp-yearhint{margin-top:7px;font-size:11px;color:var(--cp-text-dim)}
.cp-toggle button:disabled,.cp-toggle button.disabled{opacity:.4;cursor:not-allowed}
.cp-toggle button:disabled:hover{border-color:var(--cp-line)}
/* unnumbered pin: a marker dot rather than a rank */
.cp-pin-dot{width:16px;height:16px}

/* ---------------------------------------------------------------
   Continent multi-select - brought in line with the other menus
   --------------------------------------------------------------- */
.multiselect{position:relative;display:block;margin-top:8px}

.selectBox{width:100%;height:auto;min-height:0;padding:10px 12px;gap:9px;
  border-radius:8px;background:var(--cp-surface-2);color:var(--cp-text);
  border:1px solid var(--cp-line);font-size:13px;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.selectBox:hover{border-color:var(--cp-accent);background:#343D4E}
.multiselect.open .selectBox{border-color:var(--cp-accent);
  box-shadow:0 0 0 3px rgba(238,93,124,.25)}
.selectBox::after{content:"\F282";font-family:"bootstrap-icons";
  margin-left:auto;font-size:11px;color:var(--cp-text-dim);
  transition:transform .18s ease}
.multiselect.open .selectBox::after{transform:rotate(180deg);color:var(--cp-accent)}

#selected-label{font-weight:600;color:#fff;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* compact accent pill instead of a wide grey slab */
.count-circle{position:static;display:inline-flex;align-items:center;gap:6px;
  width:auto;min-width:0;margin:0;padding:2px 7px 2px 9px;border-radius:999px;
  background:var(--cp-accent);color:#fff;font-size:11px;font-weight:700;
  line-height:1.6;text-align:center}
.clear-x{position:static;top:auto;right:auto;margin:0;display:inline-flex;
  align-items:center;color:#fff;opacity:.75;transition:opacity .14s ease}
.clear-x:hover{opacity:1}
.clear-x .bi{font-size:9px}

/* In normal flow, not absolute: .menu sets overflow-y:scroll and clips any
   absolutely positioned child - the open list was being cut off. */
.checkboxes{position:static;width:100%;margin-top:6px;z-index:auto;
  border-radius:10px;overflow:hidden;background:var(--cp-surface);
  border:1px solid var(--cp-line);box-shadow:0 10px 26px rgba(0,0,0,.55);
  max-height:230px;overflow-y:auto;overscroll-behavior:contain}
.checkboxes label{display:flex;align-items:center;gap:9px;padding:9px 12px;
  margin:0;font-size:13px;color:var(--cp-text);cursor:pointer;
  border-left:3px solid transparent;
  transition:background .12s ease,color .12s ease}
.checkboxes label:hover{background:var(--cp-surface-2);
  border-left-color:var(--cp-accent);color:#fff}
.checkboxes label:first-of-type{border-bottom:1px solid var(--cp-line);
  font-weight:700}
.checkboxes::-webkit-scrollbar{width:9px}
.checkboxes::-webkit-scrollbar-track{background:var(--cp-bg)}
.checkboxes::-webkit-scrollbar-thumb{background:var(--cp-line);border-radius:9px}
.checkboxes::-webkit-scrollbar-thumb:hover{background:var(--cp-accent)}

/* breathing room: the continent box sat flush against the next section header */
.multiselect{margin-bottom:18px}
.sidenav .accordion-body{padding-bottom:22px}
.sidenav .accordion-item + .accordion-item{margin-top:4px}
.sidenav .accordion-item{border-top:1px solid rgba(255,255,255,.06)}
.sidenav .accordion-item:first-child{border-top:0}
.sidenav .accordion-header .accordion-button.main-section{padding-top:14px;padding-bottom:14px}

/* dismiss control on the cluster/typology info card */
.placeinfo{position:relative;z-index:50}
/* The card's top-right corner is where the flag sits, so this button was a
   6%-white square on a light photo - effectively invisible. It is now opaque
   with its own border and shadow, so it reads against the flag as well as
   against the card. */
.placeinfo-close{position:absolute;top:10px;right:10px;z-index:5;display:grid;
  place-items:center;width:32px;height:32px;border-radius:50%;
  font-size:14px;line-height:1;padding:0;
  color:#fff;background:#161B23;
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 2px 10px rgba(0,0,0,.55);cursor:pointer;
  transition:background .14s ease,color .14s ease,border-color .14s ease,
             transform .14s ease}
.placeinfo-close:hover{background:var(--cp-accent);border-color:#fff;color:#fff;
  transform:scale(1.08)}
.placeinfo-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Keep the flag clear of the button rather than letting them overlap. */
.placeinfo .flag{margin-right:38px}

/* ---------------------------------------------------------------
   Typology cluster charts: give every canvas a definite box.
   Chart.js sizes itself from the parent; a parent with no resolved
   height makes it measure zero and paint nothing, which is why the
   charts only appeared once a hover forced update().
   --------------------------------------------------------------- */
.charts .box{min-height:300px;vertical-align:top;padding:6px}
/* Chart.js manages the canvas element's own width/height - overriding them
   with !important causes the canvas to grow on every resize. Only the parent
   is constrained here. */
.charts .box canvas{display:block}
.charts .box .clustername{margin-top:4px}

/* the collapsed chatbot pill is the click target for opening it */
#chatbot.is-collapsed{cursor:pointer}
#chatbot .title{cursor:pointer;user-select:none}
#chatbot.is-collapsed .chathistory,
#chatbot.is-collapsed .msgsep,
#chatbot.is-collapsed .promptarea{display:none}

/* Policy: the name-match report under the selected city. */
.js-matchNote {
  font-size: .82rem;
  line-height: 1.4;
  color: var(--cp-text-dim, #8FA6B4);
  margin-top: .35rem;
}
.js-matchNote.policyWarn {
  color: #ffc46b;
}
.js-matchNote:empty { display: none; }

/* The mini map sits inside a hidden section until a query runs. */
#policyMap { border-radius: 10px; overflow: hidden; }

/* Chat replies can be multi-line (the section tour); keep the breaks. */
#chathistory .msg .text { white-space: pre-line; }

/* ---------------------------------------------------------------
   Profile modal tabs
   A city clicked on a cluster or heatmap opens its profile; the run's own
   indicators lead, so the map's subject is not buried among 113 rows. The
   bar stays hidden when no run produced the map.
   --------------------------------------------------------------- */
.cp-tabs{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:10px 14px; background:var(--cp-surface);
  border-bottom:1px solid var(--cp-line);
}
.cp-tab{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px; cursor:pointer;
  font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--cp-text-dim); background:transparent;
  border:1px solid var(--cp-line);
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.cp-tab:hover{ color:#fff; border-color:var(--cp-accent); }
.cp-tab.is-active{
  color:#fff; background:var(--cp-accent); border-color:var(--cp-accent);
}
.cp-tab-n{
  font-size:10px; font-weight:700; line-height:1;
  padding:3px 6px; border-radius:999px;
  background:rgba(255,255,255,.14); color:inherit;
}
.cp-tab:not(.is-active) .cp-tab-n{ background:var(--cp-surface-2); }
/* The run description can be long; let it take the remaining width and
   ellipsis rather than pushing the tabs onto their own line. */
.cp-tab-note{
  flex:1 1 auto; min-width:0; text-align:right;
  font-size:11px; color:var(--cp-text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Shown when the API's fuzzy place lookup answered with a different city than
   the one asked for, so the figures are never passed off as the wrong place. */
.cp-mismatch{
  display:flex; align-items:flex-start; gap:9px;
  margin:12px 14px 4px; padding:10px 12px;
  border-radius:9px; font-size:12px; line-height:1.5;
  color:#FFE1E8; background:rgba(238,93,124,.14);
  border:1px solid rgba(238,93,124,.5);
}
.cp-mismatch i{ font-size:13px; line-height:1.4; flex:none; }
.cp-mismatch b{ color:#fff; }

/* Source citation under a policy's detail. Every row in the policy database
   carries link_name + hyper_link; this is where they surface. */
.policySection .policySource{
  margin: 6px 0 0;
  font-size: 12px;
  color: #8FA6B4;
}
.policySection .policySource a{
  color: #6AA7F2;
  text-decoration: none;
  border-bottom: 1px solid rgba(106,167,242,.4);
}
.policySection .policySource a:hover{
  color: #fff;
  border-bottom-color: #fff;
}

/* Policy: category options the selected city has no data for.
   The radio itself is display:none here, so it cannot show a native disabled
   state - the label has to carry the whole signal, and opacity alone was too
   faint to read as "you cannot pick this". */
.policySection .radbox-disabled,
.sidenav .radbox-disabled{
  cursor: not-allowed;
  pointer-events: none;
}
.policySection .radbox-disabled .rad-text,
.sidenav .radbox-disabled .rad-text{
  opacity: .4;
  color: #6F7C88 !important;
  background-color: #121316 !important;
  border-color: #121316 !important;
  text-decoration: line-through;
}
.availabilityNote{
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #F6A0B2;
}

/* Policy types the selected city has no recorded policies for. The radio is
   hidden and the pill is the control, so the pill carries the disabled state. */
.pillSwitch.pill-disabled{
  pointer-events: none;
  cursor: not-allowed;
}
.pillSwitch.pill-disabled .pillLabel{
  opacity: .4;
  color: #6F7C88;
  text-decoration: line-through;
}
.pillSwitch.pill-disabled .pillTrack{
  opacity: .3;
  filter: grayscale(1);
}

/* Policy tags are controls: the word filters this city's policies, and the
   chart icon (only on tags that name an indicator) ranks cities by it. */
.policySection .tagBadge{
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.policySection .tagBadge .tagName,
.policySection .tagBadge .tagChart{
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 4px 9px;
}
.policySection .tagBadge .tagChart{
  padding-left: 6px;
  padding-right: 8px;
  border-left: 1px solid rgba(255,255,255,.18);
  opacity: .65;
}
.policySection .tagBadge .tagName:hover,
.policySection .tagBadge .tagChart:hover{
  background: rgba(255,255,255,.14);
  opacity: 1;
}
.policySection .tagBadge-on{
  outline: 1.5px solid #6AA7F2;
  outline-offset: -1px;
}
.policySection .tagFilterBar{
  margin: 0 0 10px;
  font-size: 12px;
  color: #8FA6B4;
}
.policySection .tagFilterBar b{ color: #fff; }
.policySection .tagClear{
  margin-left: 8px;
  background: none;
  border: 1px solid #3D4757;
  border-radius: 999px;
  color: #D0F4FF;
  font-size: 11px;
  padding: 2px 10px;
  cursor: pointer;
}
.policySection .tagClear:hover{ border-color: #6AA7F2; color: #fff; }

/* ---------------------------------------------------------------
   Screen-aware layout
   ---------------------------------------------------------------
   The shell is a flex row: a 300px sidebar (set with !important) next to a
   100vh content column. That is fixed at every size, so on a 1280px laptop the
   rail eats a quarter of the screen and on a phone it leaves ~75px for the map.
   Nothing below changes the desktop layout - every rule is inside a breakpoint
   the default design never reaches. The !important flags are needed twice over:
   to beat the rail's own !important width, and to beat the inline widths the
   typology run sets on .map-container and .charts.
   --------------------------------------------------------------- */

/* Large desktops: give the rail a little more room for long section names. */
@media (min-width: 1800px) {
  .left { max-width: 340px !important; min-width: 340px !important; width: 340px !important; }
}

/* Laptops. The rail is the first thing to give up space. */
@media (max-width: 1400px) {
  .left { max-width: 260px !important; min-width: 260px !important; width: 260px !important; }
  .logo img { height: 68px; }
}

@media (max-width: 1100px) {
  .left { max-width: 210px !important; min-width: 210px !important; width: 210px !important; }
  .logo { padding-top: 16px; }
  .logo img { height: 54px; }
  .sidenav .accordion-button { padding-left: 10px; }
  /* Side-by-side map and charts stop working once the column is this narrow. */
  .map-container, #mainMapContainer, .charts,
  .fullSpiderMap { width: 100% !important; display: block !important; }
  .charts .box { min-height: 240px; }
}

/* Tablets and phones: stop being a row. The rail becomes a band across the top
   that scrolls with the page, and the content takes the full width beneath. */
@media (max-width: 900px) {
  .flex-container { flex-direction: column; }
  .left {
    max-width: 100% !important; min-width: 0 !important; width: 100% !important;
    height: auto;
  }
  .menu {
    position: static;
    max-height: 52vh;
    min-height: 0;
    overflow-y: auto;
  }
  .middle, .right { width: 100%; height: auto; }
  .map-container, #mainMapContainer { height: 62vh; }
  #map, #mapProjected { height: 62vh; }
  .searchbar .results { width: 100%; max-width: 100%; }
  /* The floating switch is centred on the map column, which no longer starts
     at 23% of the window. */
  .floating-map-switch { left: 50%; }
  .policyMapContainer { height: 220px; }
  .policySection { padding: 12px; }
  .policySection .policyCitySpace { height: auto; }
}

@media (max-width: 600px) {
  .logo img { height: 46px; }
  .menu { max-height: 46vh; }
  .map-container, #mainMapContainer, #map, #mapProjected { height: 55vh; }
  .policySection .row.equalCardsRow .policyCard,
  .policySection .row.equalCardsRow .sayDoCard { min-height: 0; }
  .effectivenessWrap { height: 140px; }
}

/* Short viewports - a 1366x768 laptop has less vertical room than a phone once
   browser chrome is subtracted. Heights here are fixed in px, so they are the
   part that overflows. */
@media (max-height: 800px) {
  .policyMapContainer { height: 220px; }
  .effectivenessWrap { height: 140px; }
  .policySection .policyCitySpace { height: auto; }
  .charts .box { min-height: 240px; }
}

@media (max-height: 650px) {
  .logo { padding-top: 12px; }
  .logo img { height: 52px; }
  .logo { margin-bottom: 8px; }
  .sidenav { margin-top: 14px; }
}

/* Site footer. Contact and accessibility sit bottom-left, in the band the rail
   already reserves for them (.menu stops at calc(100% - 110px)), so they clear
   the navigation. The institution and copyright stay bottom-right. */
.siteContact{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 300px;          /* the rail's width, so it covers its full base */
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 14px 10px;
  /* Opaque, and the same colour as the rail: the nav scrolls, so without a
     solid ground its rows showed through this text. */
  background-color: #252B35;
  /* Raised from 11px/#8FA6B4, which measured 5.61:1 against this ground - AA
     but not AAA, and too faint at this size. #C7D6E0 is 9.57:1 and the links
     below are 12.24:1. */
  font-size: 12px;
  line-height: 1.5;
  color: #C7D6E0;
  z-index: 25;
}
.siteContact .siteContactLine{ display: block; }

.rights{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.6;
  max-width: 60vw;
  justify-content: flex-end;
  color: #C7D6E0;
}
.rights .siteFooterLink,
.siteContact .siteFooterLink{
  color: #D0F4FF;                                   /* 12.24:1 on the rail */
  text-decoration: none;
  border-bottom: 1px solid rgba(208,244,255,.55);
}
.rights .siteFooterLink:hover,
.siteContact .siteFooterLink:hover{ color: #fff; border-bottom-color: #fff; }
.rights .siteFooterSep{ opacity: .5; }
/* The rail narrows at these widths, so the block narrows with it. */
@media (min-width: 1800px){ .siteContact{ width: 340px; max-width: 340px; } }
@media (max-width: 1400px){ .siteContact{ width: 260px; max-width: 260px; } }
@media (max-width: 1100px){ .siteContact{ width: 210px; max-width: 210px; } }

/* Stacked layout: nothing is in a corner any more, so both run inline. */
@media (max-width: 900px){
  .siteContact, .rights{
    position: static;
    width: auto;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px 12px 0;
  }
  .rights{ padding-bottom: 12px; }
}

/* ---------------------------------------------------------------
   MIT identity, top right of every page.
   The supplied file is the reversed (white) logo, so it only reads on a dark
   ground - which is what the map and the rail give it. MIT's identity rules
   ask for clear space around the mark of at least the height of one bar; the
   bars are the full height here, so the padding below is half the logo height
   on every side, and the search box and control stack are moved out of it
   rather than being allowed to sit inside.
   --------------------------------------------------------------- */
.mitLogo{
  position: fixed;
  top: 10px;
  right: 10px;
  /* Above the globe, below anything that docks to this corner. At 60 it sat
     over the results panel's close button: the mark is mostly transparent, so
     the X showed through it and the logo's own link ate the click. */
  z-index: 30;
  display: block;
  padding: 20px;          /* clear space: half the 40px mark height */
  line-height: 0;
}
.mitLogo img{
  height: 40px;
  width: auto;
  display: block;
}
/* Everything that used to own this corner steps aside. 40px mark + 2x20px
   clear space = 80px tall and 76+40 = 116px wide. */
.searchbar{ right: 126px; }
.controls{ top: 96px; }

@media (max-width: 1100px){
  .mitLogo{ padding: 14px; }
  .mitLogo img{ height: 30px; }
  .searchbar{ right: 96px; }
  .controls{ top: 74px; }
}
@media (max-width: 600px){
  .mitLogo{ padding: 10px; }
  .mitLogo img{ height: 24px; }
  .searchbar{ right: 72px; }
  .controls{ top: 58px; }
}

/* ---------------------------------------------------------------
   Urban Typology scenario control
   A toggle between the recorded clustering and a factored one. In Customize
   mode every indicator of the chosen typology gets a row: a slider for quick
   movement and a number box for an exact figure, both showing one value.
   --------------------------------------------------------------- */
.scenarioBox{
  margin: 14px 0 12px;
  padding: 12px;
  border: 1px solid #3D4757;
  border-radius: 8px;
  background: rgba(255,255,255,.03);
}
.scenarioLabel{
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8FA6B4;
}
.scenarioBox .radio-boxes{ margin: 0; }
.scenarioSliders{ margin-top: 12px; }

.scenarioRow{
  padding: 8px 0;
  border-top: 1px solid rgba(61,71,87,.6);
}
.scenarioRow:first-child{ border-top: 0; }
.scenarioRowHead{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.scenarioRowName{
  font-size: 11px;
  color: #D0F4FF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scenarioRowValue{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: #8FA6B4;
}
.scenarioRow-changed .scenarioRowValue{ color: #6AA7F2; }
.scenarioRowControls{
  display: flex;
  align-items: center;
  gap: 10px;
}
.scenarioRowControls .scenarioRange{ flex: 1 1 auto; min-width: 0; }
.scenarioRowControls .scenarioNumber{
  flex: 0 0 58px;
  width: 58px;
  box-sizing: border-box;
  padding: 4px 6px;
  border-radius: 6px;
  background: #19191B;
  color: #D0F4FF;
  border: 1px solid #3D4757;
  font-size: 12px;
  text-align: center;
}
.scenarioNote{
  margin: 0 0 8px;
  font-size: 10px;
  line-height: 1.5;
  color: #8FA6B4;
}
.scenarioReset{
  margin-top: 10px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 6px;
  background: none;
  border: 1px solid #3D4757;
  color: #8FA6B4;
  font-size: 11px;
  cursor: pointer;
}
.scenarioReset:hover{ border-color: #6AA7F2; color: #fff; }
.projectionNote{
  margin: 6px 0 0;
  font-size: 10px;
  line-height: 1.5;
  color: #8FA6B4;
}

/* Names the scenario on the typology result, so a factored run is never
   mistaken for the default clustering. */
.typologyName .typologyScenario{
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: #6AA7F2;
}

/* "2015 = as recorded" beside the projected-year label, so the slider's
   left-hand position reads as a choice rather than a missing value. */
.projectionHint{
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #8FA6B4;
  margin-left: 6px;
}

/* ---------------------------------------------------------------
   Sliders in the site's pink
   The thumbs were blue (#6696F4) while everything else accents pink, and the
   scenario sliders were browser-default. Both are unified here, and the
   Firefox/standard pseudo-elements are added - only the -webkit- ones existed,
   so Firefox was drawing its own control regardless.
   --------------------------------------------------------------- */
.range-wrapper input::-webkit-slider-thumb{
  background: #2A1B22;
  border: 3px solid #ee5d7c;
}
.range-wrapper input::-moz-range-thumb{
  width: 14px;
  height: 14px;
  background: #2A1B22;
  border: 3px solid #ee5d7c;
  border-radius: 50%;
  cursor: pointer;
}
.range-wrapper input::-moz-range-track{
  height: 7px;
  background: #414C54;
  border-radius: 100px;
}

/* Scenario factor sliders: same look, sized for the narrower row. */
.scenarioRowControls .scenarioRange{
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #414C54;
  border-radius: 100px;
  outline: none;
  margin: 0;
}
.scenarioRowControls .scenarioRange::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: #2A1B22;
  border: 3px solid #ee5d7c;
  border-radius: 50%;
  cursor: pointer;
}
.scenarioRowControls .scenarioRange::-moz-range-thumb{
  width: 15px;
  height: 15px;
  background: #2A1B22;
  border: 3px solid #ee5d7c;
  border-radius: 50%;
  cursor: pointer;
}
.scenarioRowControls .scenarioRange::-moz-range-track{
  height: 6px;
  background: #414C54;
  border-radius: 100px;
}
.scenarioRowControls .scenarioRange:hover::-webkit-slider-thumb{ border-color: #F67390; }
.scenarioRowControls .scenarioRange:hover::-moz-range-thumb{ border-color: #F67390; }
.scenarioRowControls .scenarioNumber:focus{
  outline: none;
  border-color: #ee5d7c;
}