/* colors */
/* clearBoth */
/* breakpoints */
/* font */
.mapOuter {
  background-color: #ffffff;
  position: relative; }

.mapBox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 600px;
  padding-bottom: 40px;
  cursor: pointer; }
  .mapBox svg {
    width: 400px; }
  @media screen and (max-width: 100rem) {
    .mapBox {
      height: 560px; }
      .mapBox svg {
        width: 360px; } }
  @media screen and (max-width: 37.5rem) {
    .mapBox {
      height: 400px; }
      .mapBox svg {
        width: 250px; } }

.zoom-In {
  bottom: 105px; }

.zoom-Out {
  bottom: 65px; }

.ctrlBtnGroup {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2; }

.ctrlBtn {
  background-color: #004e98;
  border-radius: 100%;
  padding: 3px;
  width: 25px;
  height: 25px;
  margin-bottom: 10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .ctrlBtn:link {
    color: #ffffff; }
  .ctrlBtn:visited {
    color: #ffffff; }
  .ctrlBtn:hover {
    color: #ffffff; }
  .ctrlBtn:active {
    color: #ffffff; }
  .ctrlBtn svg {
    width: 15px; }

[data-size="level_orgiin"] .mapBox {
  transform: scale(1); }

[data-size="level_1"] .mapBox {
  transform: scale(2); }

[data-size="level_2"] .mapBox {
  transform: scale(3); }

[data-size="level_3"] .mapBox {
  transform: scale(4); }

[data-size="level_4"] .mapBox {
  transform: scale(5); }

.prohibit {
  opacity: 0.8;
  cursor: default; }
  .prohibit:hover {
    opacity: 0.8; }

/* electionTab */
.electionTab {
  margin-bottom: 24px; }
  @media screen and (max-width: 50rem) {
    .electionTab {
      text-align: center; } }

.mainTab {
  margin-right: 10px;
  padding: 8px 25px;
  text-align: center;
  border: 1px solid #cde3ff;
  border-radius: 4px;
  background-color: #ffffff; }
  .mainTab:link {
    color: #004e98; }
  .mainTab:visited {
    color: #004e98; }
  .mainTab:hover {
    color: #004e98; }
  .mainTab:active {
    color: #004e98; }
  .mainTab:last-child {
    margin-right: 0; }
  @media screen and (max-width: 20rem) {
    .mainTab {
      padding: 4px 20px;
      margin-right: 5px;
      font-size: 16px; } }

.mainTab.active {
  background-color: #004e98; }
  .mainTab.active:link {
    color: #ffffff; }
  .mainTab.active:visited {
    color: #ffffff; }
  .mainTab.active:hover {
    color: #ffffff; }
  .mainTab.active:active {
    color: #ffffff; }

/* mapDesc */
.mapDesc {
  display: none;
  background-color: #ffffff;
  border: 1px solid #cde3ff;
  border-radius: 4px;
  padding: 14px 16px;
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 200px;
  z-index: 4; }
  .mapDesc.open {
    display: block; }
  @media screen and (max-width: 50rem) {
    .mapDesc {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      height: 280px;
      width: 380px; } }
  @media screen and (max-width: 37.5rem) {
    .mapDesc {
      width: calc(100vw - 32px);
      height: 300px; } }

.mbRetuenMap {
  display: none; }
  @media screen and (max-width: 50rem) {
    .mbRetuenMap {
      margin-top: 10px;
      text-align: center;
      display: block;
      background-color: #004e98;
      border-radius: 4px;
      padding: 5px 0; }
      .mbRetuenMap:link {
        color: #ffffff; }
      .mbRetuenMap:visited {
        color: #ffffff; }
      .mbRetuenMap:hover {
        color: #ffffff; }
      .mbRetuenMap:active {
        color: #ffffff; } }

.mbMapOverlay {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 3; }
  .mbMapOverlay.open {
    display: block; }

.vNAME {
  line-height: 1;
  font-weight: bold;
  font-size: 20px;
  border-bottom: 1px solid #cde3ff;
  padding: 0 0 10px 0;
  margin-bottom: 10px;
  text-align: center; }

.vDATA {
  font-weight: bold;
  color: #004e98; }

/* legend */
.legend {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -120px;
  width: 240px;
  z-index: 2; }
  .legend > div {
    display: none; }
  .legend > div.show {
    display: block; }

.map-leg-1 {
  margin: 0 auto;
  width: 200px;
  height: 20px;
  background: #1b3772;
  background: linear-gradient(90deg, #1b3772 0%, #1c459b 15%, #d7e2fa 42%, white 50%, #cee4d6 58%, #0a401d 85%, #053d18 100%); }

.map-leg-2 {
  margin: 0 auto;
  width: 200px;
  height: 20px;
  background: #1b3772;
  background: linear-gradient(90deg, #1b3772 0%, #1c459b 15%, #d7e2fa 42%, white 50%, #cee4d6 58%, #0a401d 85%, #053d18 100%); }

.map-leg-3 {
  margin: 0 auto;
  width: 190px;
  height: 20px;
  background: #f0f0f0;
  background: linear-gradient(90deg, rgba(240, 240, 240, 0) 0%, #272727 100%); }

.scalemark {
  clear: both;
  zoom: 1; }
  .scalemark:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  .scalemark span {
    display: block;
    float: left;
    font-size: 12px;
    text-align: center; }

.mLegend span {
  width: 20%; }

.pLegend span {
  width: 20%; }

.rLegend span {
  width: 33.33%; }

.notyetOverlay {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 3;
  -ms-flex-align: center;
  align-items: center;
  -ms-grid-column-align: center;
  justify-items: center;
  font-size: 28px;
  font-weight: bold;
  color: #232323; }
  .notyetOverlay.open {
    display: -ms-flexbox;
    display: flex; }
  .notyetOverlay > div {
    text-align: center;
    width: 100%; }
  @media screen and (max-width: 37.5rem) {
    .notyetOverlay {
      font-size: 22px; } }

/*# sourceMappingURL=http://localhost:3000/_maps/map.css.map */