.map {
  position:relative;
  overflow:hidden;
}
#ammap {
  height:100%;
  width:100%;
  overflow:hidden;
}
#panel {
  position:absolute;
  right:0;
  width:520px;
  transform:translateX(520px);
  transition: transform 0.2s ease-out;
  background:#23326a;
  height:100%;
  top:0;
  z-index:1;
}
#panel.active {
  transform:translateX(0px);
}

#panel .featured-image {
  height:200px;
  background:#1a286c;
  display: flex;
  align-items: flex-end;
  padding:30px;
  background-size:cover;
  background-position:50% 50%;
  position:relative;
}
#panel .featured-image:after {
  content:' ';
  display:block;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.2);
}
#panel .featured-image h1 {
  color: white;
  text-transform: none;
  font-size: 32px;
  position:relative;
  z-index:1;
}
#panel .close-panel {
  color: white;
  position: absolute;
  padding: 20px 30px;
  text-transform: uppercase;
  cursor:pointer;
  z-index:3;
}
#panel .chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 210px;
  margin-bottom:20px;
}
#panel .chart .segment {
  flex:1;
  height:auto;
  padding:0 4px;
}

#panel .chart .bar {
  background:red;
  margin-bottom:12px;
  transition: background-color 0.2s ease;
}
#panel .chart .label {
  text-align: center;
  opacity: 0.4;
  font-size: 10px;
  font-weight: 400;
  transition: opacity 0.2s ease;
}
#panel .histogram {
  position:relative;
}
#panel .histogram > .label {
  position:absolute;
}
#panel .histogram > .label h3 {
  font-size: 34px;
  font-weight: bold;
}
#panel .histogram .label h4 {

}
#panel .chart .segment.selected .bar {
  background-color:white!important;
}
#panel .chart .segment.selected .label {
  opacity:1;
}



#tooltip {
  color:white;
  top:24px;
  line-height:24px;
  left:18px;
  font-weight:600;
  background:#28457a;
  padding:60px 0;
}
#tooltip > div {
  position:relative;
}
#tooltip img {
  height:16px;
  width:auto;
}
#tooltip h1 {
  text-transform:none;
  line-height:normal;
}
#tooltip p.primary {
  font-weight:400;
  font-size:18px;
  margin:6px 0;
}
#tooltip .more-trigger {
  display: inline-block;
  border: 1px solid white;
  padding: 4px 20px;
  font-size: 14px;
  border-radius: 50px;
  font-weight: 400;
  margin-top: 12px;
  cursor:pointer;
}
#tooltip .popup {
  display:none;
  color:white;
  padding-top:12px;
}
#tooltip .popup img {
  position: absolute;
  right: 16px;
  top: 0;
  padding: 20px;
  height: 55px;
  cursor: pointer;
}
#tooltip .popup p {
  margin-bottom:18px;
  font-weight:400;
}





#panel .similar-regions {
  text-align:center;
  padding-top:30px;
}
#panel .similar-regions p {
  font-size: 14px;
  font-weight: 400;
  margin-bottom:6px;
}
#panel .similar-regions span {
  display: block;
  font-size: 12px;
  padding: 2px;
  cursor:pointer;
}
#panel .close-panel img {
  width:16px;
  height:auto;
}
#panel .inner-content {
  padding:40px;
  color:white;
  padding-bottom:90px;
}
#panel .full-report {
  text-align:center;
}
#panel .full-report a {
  display: inline-block;
  color: white;
  text-decoration: none;
  border-radius: 40px;
  border: 1px solid white;
  padding: 8px 20px;
  font-size: 12px;
  margin-top: 30px;
}

#panel .funfact p {
  font-size:14px;
  line-height:22px;
  padding:0 24px;
}
#panel .funfact h2 {
  font-size:18px;
  line-height:22px;
  margin-bottom:14px;
  padding:0 24px;
}
#panel .overall-ranking {
  text-align:center;
  font-size:32px;
  font-weight:bold;
}
#panel .overall-ranking .rank sup {
  font-size:16px;
  top:-12px;
}
#panel .overall-ranking .out-of {

}
#panel .study-name {
  display:block;
  font-size:16px;
  margin-top:8px;
}


#panel hr {
  border:none;
  height:1px;
  width:100%;
  background:#1d2b56;
  margin:40px 0;
}
#panel .other-rankings {
  background:#22436a;
  margin:60px 0;
  padding:20px;
  display:flex;
  flex-wrap:wrap;
  padding-top:40px;
  padding-bottom:40px;
  justify-content: center;
}
#panel .scroll-container {
  overflow-y:scroll;
  height:100%;
}
#panel .a-rank {
  text-align:center;
  width:50%;
  margin-bottom:30px;
}
#panel .a-rank .top {
  display: block;
  font-size: 28px;
  font-weight: bold;
  margin-bottom:8px;
}
#panel .a-rank .top sup {
  top: -12px;
  font-size: 14px;
}

#panel .a-rank .bottom {
  display: block;
  font-size: 12px;
  padding: 0 32px;
}


#region-select {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  font-size: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: auto;
  height: 0;
}
#region-select.hidden .major-study {
  transform:translateY(4vw);
}
#region-select .major-study {
  color: white;
  display: inline-block;
  padding: 0.6vw 0;
  font-weight: 400;
  cursor: pointer;
  width: 14vw;
  font-size: 1vw;
  transition: transform 0.2s ease-out, padding 0.18s ease-out;
}
#region-select .major-study.active {
  padding:1vw 0;
}


#legend {
  position:absolute;
  bottom:4vw;
  right:1vw;
  background:white;
  padding:20px;
  color:#233468;
}
#legend .units {
  margin-bottom:12px;
  max-width:280px;
}
#legend .legend-stats .q {
  display:block;
  cursor:default;
  padding:6px 0;
}
#legend .legend-stats .dot {
  height:12px;
  width:12px;
  border-radius:50px;
  display:inline-block;
  margin-right:12px;

}
#legend .z-score-disclaimer {
  max-width:280px;
  color:#909090;
  font-size:12px;
  line-height:14px;
}

#study-select {
  position:absolute;
  bottom:1vw;
  right:1vw;
  text-align:center;
}
#study-select select {
  -webkit-appearance: none;
  background-color: #233468;
  outline: none;
  color: white;
  border-radius: 0;
  border: none;
  padding: 0.5vw 0;
  font-size: 1vw;
  width: auto;
  padding-left: 12px;
  cursor: pointer;
  background-image: url(/assets/images/chevron-down.svg);
  background-size: 0.8vw;
  background-repeat: no-repeat;
  background-position: calc(100% - 1vw) 50%;
  padding-right: 3vw;
}
#study-select span {
  display: block;
  text-align: left;
  margin-bottom: 4px;
  font-weight:600;
}



#panel .case-studies {

}
#panel .case-studies a {
  color:white;
  text-decoration:none;
}
#panel .case-studies h3 {
  font-size: 18px;
  margin-bottom:12px;
  font-weight: 800;
}
#panel .case-studies p {
  font-size: 14px;
  line-height: 19px;
  margin-bottom: 14px;
}
#panel .case-studies span {
  font-size: 14px;
}
#panel .case-studies hr {
  margin:20px 0;
}