@font-face {
  font-family: "SkolarSansLatnCyrlCn-Rg";
  src: url("https://docs.rferl.org/Infographics/sources/fonts/SkolarSansLatnCyrlCn-Rg.woff");
}
@font-face {
    font-family: "Skolar Sans";
    font-weight: 300;
    src: url('https://docs.rferl.org/Branding/CDN/Apollo_Framework/2.0/dist/assets/fonts/SkolarSans_Regular.woff2');
}
.romanian_map {
  position: relative;
  font-family: "SkolarSansLatnCyrlCn-Rg", Helvetica, Arial, sans-serif;
  max-width: 760px;
  margin: auto;
  padding-bottom: 16px;
}
.container_map{
  position: relative;
  width: 100%;
  padding-bottom: 16px;
  max-width: 960px;
  margin: auto;
}
.container_country {
  font-family: "Skolar Sans", Helvetica, Arial, sans-serif;
  padding-bottom: 20px;
  max-width: 960px;
  margin: auto;
}
.country_left{
  float: left;
  margin-top: 8px;
  width:50%;
}
.country_right{
  float: left;
  margin-top: 8px;
  width:50%;
}
@media(max-width: 360px){
  .country_left{
    width:58%;
  }
  .country_right{
    width:42%;
  }
}
.country__profile{
  position: relative;
  height: 46px;
  padding: 2px;
  box-sizing: border-box;
  margin-right: 8px;
  margin-bottom: 8px;
  background-color: white;
  box-shadow: 0 0 5px rgba(0,0,0,.3);
  transition: height .5s;
  }
.country__profile-name {
  position: relative;
  height: 40px;
  font-size: 17px;
  text-align: right;
}
.country__profile-name_inner {
  position: absolute;
  right: 12px;
  font-weight: 600;
  top: 50%;
  transform: translateY(-50%);
}
@media(max-width: 596px){
  .country__profile-name {
    font-size: 16px;
  }
  .country__profile-name_inner {
    right: 72px;
  }
}
@media(max-width: 420px){
  .country__profile-name {
    font-size: 15px;
  }
  .country__profile-name_inner {
    right: 66px;
  }
}
.country__profile-name_inner span {
  padding-top: 4px;
  font-weight: 400;
  font-size: 16px;
}
.country__graph {
  height: 46px;
  margin-left: 0px;
  margin-bottom: 8px;
  box-sizing: border-box;
  background-color: grey;
  box-shadow: 0 0 5px rgba(0,0,0,.3);
}
.country__graph-number {
  position: relative;
  display: inline-block;
  padding-top: 4px;
  padding-left: 12px;
  font-size: 32px;
  color: black;
  font-weight: bold;
}
@media(max-width: 420px){
  .country__graph-number {
    padding-top: 8px;
    font-size: 28px;
    padding-left: 6px;
  }
}
.country__graph-black {
  left: 100%;
  color: black;
  }
.container_map .st2{
    fill:none;
  }
.container_map .st3{
    cursor: pointer;
    font-family: "Skolar Sans", Helvetica, Arial, sans-serif;
  }
.container_map .st4{
  font-size:48px;
  fill: black;
}
.container_map .st0 {
   fill:#f5b994;
   stroke:#565658;
   cursor: pointer;
}
.container_map .st_hover {
  opacity: 0.8;
}

.infographic__content-profiles-left{
  float: left;
  margin-top: 4px;
  width:50%;
}
.infographic__content-profiles-right{
  float: left;
  margin-top: 4px;
  width:50%;
}

.map__modal {
  position: absolute;
 box-sizing: border-box;
 max-width: 82%;
 border-top: 2px #007DBA solid;
 box-shadow: 0 0 5px rgba(0,0,0,.3);
 margin: 0 auto;
 max-height: 80%;
 left: 0;
 right: 0;
 top: 50%;
 transform: translateY(-50%);
 background-color: white;
 z-index: 100;
 display: flex;
 flex-direction: column;
}
.map_modal-list {
 min-height: 46px;
 margin-right: 2px;
 margin-bottom: 2px;
 position: relative;
}
@media(max-width: 720px){
 .map__modal {
    max-width: 82%;
 }
}
@media(max-width: 640px){
 .map__modal {
    max-width: 96%;
    max-height: 96%;
 }
}
.map__modal-list-items{
 position: relative;
 box-sizing: border-box;
 top: 0;
 height: calc(100% - 66px);
 padding: 20px;
 overflow-y: auto;
}
.map__modal .map__modal-close {
 width: 21px;
 height: 21px;
 position: absolute;
 top: 10px;
 right: 10px;
 cursor: pointer;
 opacity: .5;
 transition: opacity .3s;
}
.map__modal .map__modal-close:hover {
 opacity: 1;
}
.map__modal .map__modal-header {
 font-size: 18px;
 font-weight: 600;
 padding: 20px 32px 10px 20px;
 position: relative;
}
@media(max-width: 640px){
 .map__modal .map__modal-header {
   font-size: 16px;
 }
}

.infographic__profile{
 display: flex;
 align-items: center;
 position: relative;
 /*height: 76px;*/
 min-height: 46px;
 padding: 8px;
 box-sizing: border-box;
 background-color: white;
 box-shadow: 0 0 2px rgba(0,0,0,.3);
 transition: height .5s;
}
.infographic__profile:hover{
/*background-color: #F1F0EF;*/
}
.infographic__profile-name {
position: relative;
width: 100%;
/*height: 40px;*/
min-height: 24px;
font-size: 16px;
text-align: right;
}
.infographic__profile-name_inner {
position: absolute;
right: 0px;
font-weight: 600;
top: 50%;
transform: translateY(-50%);
}
.infographic__profile-name_inner span {
color: #616668;
}
.infographic__graph {
 position: relative;
 /*height: 76px;*/
 min-height: 46px;
 /*height: 50%;*/
 margin-left: 0px;
 margin-bottom: 2px;
 box-sizing: border-box;
 box-shadow: 0 0 2px rgba(0,0,0,.3);
 /*align-items: center;*/
}
.infographic__graph-inner {
 position: relative;
 height: 23px;
}
.infographic__graph-number {
 position: relative;
/*height: 50%;*/
 top: 100%;
 padding-left: 8px;
 font-size: 20px;
}
.infographic__graph-number span{
 font-size: 15px;
}
.infographic__graph-numberB {
 position: relative;
 display: flex;
 align-items: center;
 /*height: 50%;*/
 padding-left: 8px;
 font-size: 20px;
}
.infographic__graph-numberB span{
 font-size: 15px;
}
.infographic__graph-votes {
padding-left: 8px;
font-size: 16px;
}
@media(max-width: 820px){
.infographic__profile-name {
  font-size: 15px;
}
}
@media(max-width: 720px){
.infographic__content-profiles-left{
  width: 50%;
}
.infographic__content-profiles-right{
  width: 50%;
}
.infographic__graph-number {
    padding-top: 12px;
    font-size: 20px;
}
.infographic__graph-numberB {
    font-size: 20px;
}
.infographic__graph-numberB span {
  font-size: 14px;
}
}
@media(max-width: 364px){
.infographic__graph-number{
  padding-top: 32px;
  padding-left: 6px;
  font-size: 18px;
}
.infographic__profile-name_inner {
  right: 12px;
}
}

.displayNone {
 display: none;
}

/*   SEATS   */
.infographic__seats {
   position: relative;
   font-family: "SkolarSansLatnCyrlCn-Rg", Arial, "Arial Unicode MS", Helvetica, sans-serif;
   font-weight: 300;
 }
 .infographic__percentage {
   position: relative;
   font-family: "SkolarSansLatnCyrlCn-Rg", Arial, "Arial Unicode MS", Helvetica, sans-serif;
   font-weight: 300;
   max-width: 760px;
   margin: auto;
 }
 .infographic__semicircles {
   position: relative;
   max-width:760px;
   font-family: "SkolarSansLatnCyrlCn-Rg", Arial, "Arial Unicode MS", Helvetica, sans-serif;
   font-weight: 300;
   margin: 0px auto 36px auto;
 }
.infographic__content-profiles-left{
 float: left;
 margin-top: 4px;
 width:50%;
}
.infographic__content-profiles-right{
 float: left;
 margin-top: 4px;
 width:50%;
}
.infographic__seats{
  position: relative;
  float: left;
  width: 50%;
}
.infographic__seats-container {
  padding: 8px;
}
@media(max-width: 920px){
  .infographic__seats{
    float: none;
    width: 100%;
  }
}
.infographic__description {
  font-family: "SkolarSansLatnCyrlCn-Rg", Arial, "Arial Unicode MS", Helvetica, sans-serif;
}
.infographic__description h2 {
  text-align: center;
  margin: 24px 0;
  font-size: 28px;
}
@media(max-width: 640px){
  .infographic__description h2 {
      margin: 20px 0;
      font-size: 24px;
  }
}
@media(max-width: 520px){
  .infographic__description h2 {
      margin: 18px 0;
      font-size: 21px;
  }
}
@media(max-width: 420px){
  .infographic__description h2 {
      margin: 16px 0;
      font-size: 19px;
  }
}
.divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0,0,0,0.5);
  margin-bottom: 12px;
}
.infographic__profile{
  display: flex;
  align-items: center;
  position: relative;
  /*height: 76px;*/
  /*min-height: 46px;*/
  padding: 8px;
  box-sizing: border-box;
  margin-right: 2px;
  margin-bottom: 2px;
  background-color: white;
  box-shadow: 0 0 2px rgba(0,0,0,.3);
  transition: height .5s;
}
.infographic__profile:hover{
 /*background-color: #F1F0EF;*/
}
.infographic__profile-name {
 position: relative;
 width: 100%;
 /*height: 40px;*/
 min-height: 24px;
 font-size: 16px;
 text-align: right;
}
.infographic__profile-name_inner {
 position: absolute;
 right: 0px;
 font-weight: 600;
 top: 50%;
 transform: translateY(-50%);
}
.infographic__profile-name_inner span {
 color: #616668;
}
/*.infographic__graph {
  position: relative;
  min-height: 46px;
  margin-left: 0px;
  margin-bottom: 2px;
  box-sizing: border-box;
  box-shadow: 0 0 2px rgba(0,0,0,.3);
}
.infographic__graph-inner {
  position: relative;
  height: 50%;
}
.infographic__graph-number {
  position: relative;
  display: flex;
  align-items: center;
  height: 50%;
  padding-top: 8px;
  padding-left: 8px;
  font-size: 20px;
}
.infographic__graph-numberB {
  position: relative;
  display: flex;
  align-items: center;
  height: 50%;
  padding-left: 8px;
  font-size: 20px;
}
.infographic__graph-numberB span{
  font-size: 21px;
}
@media(max-width: 820px){
 .infographic__profile-name {
   font-size: 15px;
 }
}
@media(max-width: 720px){
 .infographic__content-profiles-left{
   width: 50%;
 }
 .infographic__content-profiles-right{
   width: 50%;
 }
 .infographic__graph-number {
     padding-top: 12px;
     font-size: 20px;
 }
 .infographic__graph-numberB {
     font-size: 20px;
 }
 .infographic__graph-votes {
   font-size: 14px;
 }
}
@media(max-width: 612px){

 .infographic__graph-number{
   color: black;
 }
 .infographic__graph-numberB{
   color: black;
 }
}
@media(max-width: 364px){
 .infographic__graph-number{
   padding-top: 32px;
   padding-left: 6px;
   font-size: 18px;
 }
 .infographic__profile-name_inner {
   right: 12px;
 }
}*/
.districtProportional {
  cursor: pointer;
}
.districtMajoritarian {
  cursor: pointer;
}
.infographic__seats{
  position: relative;
  float: left;
  width: 50%;
}
@media(max-width: 920px){
  .infographic__seats{
    float: none;
    width: 100%;
  }
}
 .clearfix {
   clear: both;
 }
 .displayNone {
   display: none;
 }
 .floatTable{
 /*display: none;*/
 bottom: 8px;
 left: 50%;
 transform: translateX(-50%);
 position: absolute;
 padding: 4px 8px;
 background-color:white;
 box-shadow: 0 0 5px rgba(0,0,0,.3);
 max-width: 50%;
 font-size: 17px;
 z-index: 100;
}
@media(max-width: 640px){
  .floatTable{
    font-size: 16px;
  }
}
@media(max-width: 420px){
  .floatTable{
    font-size: 15px;
  }
}