/* MAP */

.cpi2018-map {
  width: 100%;
  height: 400px;
  position: relative;
  z-index: 1;
}

@media (min-width: 961px) {
  .cpi2018-map {
    height: 700px;
  }
}

.cpi2018-map.leaflet-container {
  background-color: rgba(255, 0, 0, 0);
}

.cpi2018-map .country .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 0;
  border: 1px solid #000;
}

.cpi2018-map .country .leaflet-popup-tip {
  border: 1px solid #000;
}

.cpi2018-map .country .leaflet-popup-tip-container {
  bottom: -19px;
}

.cpi2018-map .country .leaflet-popup-content p {
  margin: 0;
}

.cpi2018-map .country .leaflet-popup-content {
  line-height: 1.2;
  margin: 0;
  color: #5a5a5a;
}

.cpi2018-map .country .leaflet-popup-close-button {
  display: none;
}

.cpi2018-map .country .country__details {
  display: flex;
}

.cpi2018-map .country .country__meta {
  flex: 1;
  padding: 10px;
}

.cpi2018-map .country .country__pointer {
  width: 75px;
  border-left: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cpi2018-map .country .country__arrow {
  width: 45px;
}

.cpi2018-map .country .country__name {
  font-size: 22px;
  border-bottom: 1px solid #000;
  padding: 10px;
  text-align: left;
}

.cpi2018-map .country .country__score {
  font-weight: normal;
  font-family: "Neue Helvetica 77 Condensed Bold", "Neue Helvetica 75 Bold",
    sans-serif;
  font-size: 28px;
  margin: 0 0 5px;
}

.cpi2018-map .country .country__label {
  margin: 0;
  font-size: 15px;
}

.cpi2018-map .country .country__rank {
  font-size: 15px;
}

.cpi2018-scale__img {
  width: 450px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* New styles start here */

.cpi2018-actions {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cpi2018-copy-action textarea {
  opacity: 0;
  position: absolute;
  left: -9999px;
}

.cpi2018-copy__btn {
  padding: 10px 14px 10px 36px;
  border: 0;
  border-radius: 0px;
  cursor: pointer;
  background-color: #3a86c6;
  background-image: url("/assets/images/cpi2018/code.svg");
  background-repeat: no-repeat;
  background-position: 10px;
  color: #fff;
  text-transform: none;
  transition: background-color 0.2s ease;
  font-size: 11px;
  font-family: sans-serif;
}

.cpi2018-copy__btn.active {
  background-color: #cecece;
  background-image: url("/assets/images/cpi2018/check.svg");
  background-repeat: no-repeat;
  background-position: 10px;
}

@media screen and (max-width: 767px) {
  .cpi2018-copy-action {
    display: none;
  }
  .cpi2018-actions {
    justify-content: center;
  }
}