.map-chart {
   margin: 0 auto;
   max-width: 800px;
   text-align: left;
}

.rf-map,
.rf-map * {
   box-sizing: border-box;
}
.rf-map {
   position: relative;
   width: 100%;
   /* max-width: 980px; */
   /* margin: auto; */
   padding: 10px 20px;
   /* border: 2px solid #000; */
}
.rf-map .district b {
   position: absolute;
   z-index: 5;
   width: 18px;
   height: 18px;
   background: rgba(51, 122, 183, 0.9);
   border-radius: 50%;
   left: 6px;
   top: 18px;
   transition: all 0.3s;
}
.rf-map .district span {
   position: absolute;
   z-index: 5;
   top: 20px;
   left: 30px;
   font-size: 13px;
   font-weight: bold;
   font-family: Inter, sans-serif;
   line-height: 1;
   color: #1d4567;
}
.rf-map .district {
   display: none;
}
.rf-map.open .district b {
   top: 0;
   left: 0;
   border-radius: 0;
   width: 100%;
   height: 100%;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
}
.rf-map.open .district span {
   color: #fff;
}
.rf-map svg {
   width: 100%;
   height: 100%;
   /* filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.5));     */
}
.rf-map path {
   stroke: #ffffff;
   stroke-width: 1;
   stroke-linejoin: round;
}
.rf-map [data-code] {
   fill: #fe0000;
   transition: fill 0.2s;
   cursor: pointer;
   transition: all 0.5s;
}
.rf-map [data-code]:hover {
   fill: #000 !important;
}
.rf-map .district-text {
   display: none;
   position: absolute;
   z-index: 6;
   left: 0;
   top: 60px;
   width: calc(100% - 20px);
   height: calc(100% - 90px);
   padding: 0 20px;
   overflow: auto;
   color: #fff;
   font-size: 13px;
   font-family: Inter, sans-serif;
}
.rf-map .close-district {
   opacity: 0;
   z-index: 6;
   position: absolute;
   top: 10px;
   right: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   line-height: 1;
   font-size: 40px;
   color: #fff;
   cursor: pointer;
   transition: opacity 1s;
   pointer-events: none;
}
.rf-map.open .close-district {
   opacity: 1;
   pointer-events: initial;
}
.rf-map .district-links {
   margin-top: 10px;
   display: flex;
   flex-wrap: wrap;
}
.rf-map .district-links div {
   font-size: 13px;
   font-family: Inter, sans-serif;
   padding: 4px;
}
.rf-map .district-links div:after {
   content: " | ";
   color: #000;
}
.rf-map .district-links div:last-child:after {
   content: "";
}
.dropfill {
   fill: #fe0000 !important;
}
.mainfill {
   fill: #1d4567 !important;
}
@media (min-width: 768px) {
   .rf-map .district b {
      width: 28px;
      height: 28px;
      left: 6px;
      top: 28px;
   }
   .rf-map .district span {
      top: 30px;
      left: 46px;
      font-size: 20px;
      font-weight: normal;
   }
   .rf-map .district-text {
      left: 30px;
      top: 80px;
      width: calc(100% - 60px);
      height: calc(100% - 130px);
      font-size: 16px;
   }
   .rf-map .close-district {
      width: 60px;
      height: 60px;
      font-size: 60px;
   }
   .rf-map .district-links {
      display: none;
   }
}
/* Цвета регионов */
.rf-map [data-code="RU-SAR"] {
   fill: #0525f6;
   cursor: pointer;
}
.rf-map [data-code="RU-SA"] {
   fill: #0525f6;
   cursor: pointer;
}
.rf-map [data-code="RU-KO"] {
   fill: #0525f6;
}
/* .rf-map [data-code="RU-SAR"]:hover {
    fill: #0525F6;
}
.rf-map [data-code="RU-SA"]:hover {
    fill: #0525F6;
}
.rf-map [data-code="RU-KO"]:hover {
    fill: #0525F6;
} */

/* КАРТОЧКА */
.info-card,
.info-map {
   opacity: 1;
   font-family: Inter, "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
      "Lucida Sans", Arial, sans-serif;
   display: flex;
   gap: 10px;
   padding: 24px 24px 12px;
   transition: all ease 0.3s;
   position: relative;
   /* background-color: #f3f3f3; */
}

/* .info-card */
.info-card {
   box-sizing: border-box;
   min-height: 156px;
   background: #f3f3f3;
}
.hide {
   opacity: 0 !important;
   /* display: none; */
}

/* инфа */
.info-card__gerb {
   height: 120px;
   width: 120px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.info-card__gerb img {
   max-height: 100%;
   max-width: 100%;
   transition: all 0.8s;
}

.info-card__text {
   font-size: 16px;
   font-weight: normal;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 8px 0 4px;
}

.info-card__text h5 {
   font-size: 24px;
   font-weight: 700;
   margin: 0;
}

.info-card__text p {
   margin: 2px 0;
   font-size: 18px;
   font-weight: 500;
}

.line-votes {
   background: #fe0000;
   height: 12px;
   width: 100%;
   width: 320px;
}

.line-votes .blue {
   background: #0525f6;
   width: 17.7%;
   height: 100%;
   transition: all 0.8s;
}

/* ГОЛОСА */
.info-votes {
   width: 320px;
   display: flex;
   margin-top: 8px;
   font-size: 14px;
}

/* Элемент */
.info-votes__item {
   display: flex;
   gap: 6px;
   width: 100%;
   align-items: center;
}

/* Метка */
.votes-color {
   height: 14px;
   width: 14px;
   background-color: #fe0000;
   border-radius: 20px;
}

/*  */
.info-votes__item.blue .votes-color {
   background-color: #0525f6;
   border-radius: 20px;
}

.info-votes .votes-procent {
   font-weight: 700;
}

.info-votes .votes-count {
   opacity: 0.6;
   font-weight: 500;
}

/* MAP */
.map-chart {
   /* border: 3px solid #9f9f9f; */
   position: relative;
}

/* info-card__gerb-flag */

.info-map.flag {
   position: absolute;
   left: 0;
   top: 0;
}

/* .info-card__gerb-flag img {
   border: 2px solid #000;
} */

/* СПИСОК ПОД  */
.list-disctricts {
   font-family: Inter, "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
      "Lucida Sans", Arial, sans-serif;
   padding: 12px 6px;
   font-size: 12px;
   column: 3 240px;
   display: flex;
   flex-wrap: wrap;
}

.list-disctricts__item {
   display: inline-flex;
   gap: 4px;
   margin: 0 2px;
   padding: 2px;
   width: 32%;
}

.district-id {
   font-size: 10px;
   font-weight: 700;
   /* border: 2px solid #000; */
   height: 15px;
   min-width: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding-top: 0px;
   box-sizing: border-box;
   background: #000;
   color: #fff;
}

@media (max-width: 600px) {
   .info-card__gerb {
      min-height: 80px;
      min-width: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   .info-map.flag,
   .info-map,
   .info-card {
      padding-right: 0;
      padding-left: 0;
   }

   .info-card {
      min-height: 144px;
   }

   .line-votes {
      width: 200px;
   }

   .info-card__text h5 {
      font-size: 22px;
   }
}