* {
  -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;
  max-height: 100vh;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-left: 0px;
  min-height: calc(100% - 110px);
}

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

.logo{
  margin-bottom: 20px;
}

.logo img{
  height: 60px;
  margin-bottom: 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 .backHome {
  color: #F67390;
  display: inline-block;
  position: absolute;
  top: 40px;
  right: 100px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
}

.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. */
.cp-panel{position:absolute;top:0;right:0;z-index:40;
  width:var(--cp-panel-w);max-width:92vw;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}
.placeinfo-close{position:absolute;top:8px;right:8px;z-index:3;display:grid;
  place-items:center;width:26px;height:26px;border-radius:7px;font-size:11px;
  color:var(--cp-text);background:rgba(255,255,255,.06);
  border:1px solid var(--cp-line);cursor:pointer;
  transition:background .14s ease,color .14s ease,border-color .14s ease}
.placeinfo-close:hover{background:var(--cp-accent);border-color:var(--cp-accent);color:#fff}

/* ---------------------------------------------------------------
   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; }