

.region-wrap-hide{
  display: none!important;
}
.region-wrap-include{
  position: fixed;
  width: 100%;
 height: 100%; 
  top: 0px;
  left: 0px;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: scroll; 
  padding: 24px 12px;
}

.region-wrap-include .char-title{
    font-weight: bold;
   font-size: 20px;

}
.region-wrap-include .form-region-wrap{
max-width: 1200px;
margin-top: 50px;
width: 100%;
background: #fff;
  z-index: 2;
  position: relative;
  border-radius: 5px;
}
.region-wrap-include .close-btn{
  position: absolute;
  top: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ef3e34;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
}
.region-wrap-include .close-btn svg{
  width: 12px;
  fill: #fff;
}
.region-wrap-include .close-btn span{
/*
  position: absolute;
  top: -1px;
*/
}
.region-wrap-include .close-btn:hover{
  background: #333;
}
.region-wrap-include .form-region{
  padding: 30px!important;
}
.region-wrap-include .form-region .title{
  font-weight: bold;
  font-size: 20px;
  text-align: left;
  color: #333;
}
.region-wrap-include .region-list .input-wrap span{
  display: block;
  margin-bottom: 16px;
} 
.region-wrap-include .region-list .input-wrap input{
    width: 100%;
}
.region-wrap-include .region-list ul{
  padding-top: 15px;
  padding-left: 0px;
  /* column-count: 6; */
  list-style: none;
}
.region-wrap-include .region-list ul li{
  padding: 3px;
  text-align: left;
}
.region-wrap-include .region-list ul li:before{
    display:none;
}
.region-wrap-include  .region-list ul li a,.region-wrap-include .region-list ul li span{
  font-size: 15px;
  padding: 0px;
  margin: 10px;
  border-color: #fff;
  color: #333;
}
.region-wrap-include .region-list ul li span{
  font-weight: bold;
}
.region-wrap-hide + .region-shadow{
  display: none;
}
.region-shadow{
  position: fixed;
  top: 0px;
 
  left: 0px;
  width: 100%;
  height: 100%;
  background: #33333375;
  z-index: 1;
}
.show-region-modal{
  overflow: hidden;
  
}
.region-link.region-link-include{
/*
  position: absolute;
  bottom: -24px;
  right: 0;
*/
  white-space: nowrap;
  color: #ef3e34;
 
  position: relative;

/*        font-size: 13px;*/
 
}
.region-link.region-link-include span{
  border-bottom: dotted 1px #ef3e34;
   cursor: pointer;
  position: relative;
  
}
.region-link.region-link-include span:before{
  content: '';
  position: absolute;

  left: -15px;
  top: 50%;
  height: 0;
  width: 0;
  /* order of following 3 rules important for fallbacks to work */
  border: 5px solid transparent;
  border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
  border-top-color: rgba(255,255,255,.5);
}
.region-link.region-link-include:hover span:before{
  border-top-color: rgba(255,255,255);
}

.region-link{
  cursor: pointer;
  /* font-size: 14px; */
  text-decoration: underline;
}
.region-spoiler-wrap{
  background: #555;
}
.region-spoiler-content{
  display: none;
}
.region-spoiler-content ul{
  /* column-count: 4; */
  padding-left: 0;
}
.region-spoiler-content ul a,.region-spoiler-content ul span{
  padding: 5px;
  color: #fff;
  display: inline-block;
  border-bottom: solid 1px #f2c200;
}

.region-spoiler-content ul span{
  border-bottom: none;
  font-weight: bold;
}
.region-spoiler-title{
  cursor: pointer;
  color: #fff;
  font-size: 32px;
  padding: 24px 0 32px;
  text-align: center;

}
.region-spoiler-title img{
  transition: .4s;
  padding-left: 12px;
}
.region-open-spoiler img{
  transform: rotate(180deg);
}

@media (max-width: 768px) {

  .region-wrap-include .region-list ul{
      /* column-count: 2; */
  }

  .region-alert-mobile-modal-wrap{
    left: 0;
    right: 0;
  }

}



.fixed-nav{
  top: -120px;
  left: 0;
  width: 100%;
  position: fixed;
  transition: .4s;
}

.fixed-nav-open{
  top: 0;
}

.mobile-mm-open .fixed-nav-open{
  width: unset;
}


.list-region-wrap{
    
  /* column-count: 4; */
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;

}
.list-region-wrap>ul{
  width: 20%;
}
.list-region-wrap>ul li{
  text-align: center;
}


.list-region-wrap.search-regions{
  justify-content: flex-start;
}

.list-region-wrap.search-regions ul{
  width: unset;
}

@media (max-width: 1100px) {

  .list-region-wrap>ul{
    width: 33%;
  }

}


@media (max-width: 800px) {

  .list-region-wrap>ul{
    width: 50%;
  }
  .region-wrap-include .region-list ul li{
    padding: 3px;
    text-align: center;
  }

}

@media (max-width: 720px) {

  .list-region-wrap>ul{
    width: 100%;
  }
  .list-region-wrap.search-regions{
    flex-direction: column;
  }
  .list-region-wrap.search-regions ul{
    margin-bottom: 0;
    padding-top: 0;
  }
}

.region-alert-modal-wrap-main{
  
  display: flex;
  max-width: 1280px;
  margin: auto;
  position: relative;

}
.region-alert-modal-wrap-hide{
  display: none!important;
}
.region-alert-modal-wrap{
position: absolute;

background: #fff;
padding: 10px;
border: solid 1px #ddd;
z-index: 1000;
right: 10px;
}
.region-alert-modal-title{
text-align: center;
}

.region-alert-mobile-modal-wrap{
right: 12px;

margin: 10px auto;
max-width: 270px;
margin-top: -20px;
}

.region-alert-modal-btn{
  
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;

}
.region-alert-modal-btn span:first-child{
  background: #3f49ad;
  color: #fff;
}
.region-alert-modal-btn span{
  color: #3f49ad;
 border: solid 1px #3f49ad;
  cursor: pointer;
  padding: 5px 10px;
  /* margin-top: 10px; */
  display: inline-block;

}

.region-alert-modal-btn span:first-child{
  
  background: #3f49ad;
  color: #fff;
  padding: 5px 10px;
  /* margin-top: 10px; */
  display: inline-block;

}


.region-alert-modal-btn .region-link{
  text-decoration: none!important;
}





.region-wrap-include .region-list .list-main-region{
  
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

}
.region-wrap-include .region-list ul.list-main-region li{
  padding: 0;
}
.region-wrap-include .region-list ul.list-main-region li a{

  background: #ffb7007a;
  color: #000;
  text-decoration: none;
  padding: 3px 10px;
  border-radius: 3px;
  margin: auto;

}


@media (max-width: 640px) {

  .region-wrap-include .region-list ul{
      column-count: 2;
  }
  .region-wrap-include .region-list ul li{
    text-align: left;
  }
  .region-wrap-include .region-list ul li a{
    margin: 0;
  }



}