

/* Start:/city/list/.style.css?15868137314298*/
.region-container {
    padding: 10px;
    border-radius: 5px;
}
.region-container:hover {
    background: #fafafa;
}
.district-container {
    width: 100%;
    border-radius: 3px;
    padding: 5px;
    display: inline-grid;
}
.district-container:hover {
    background: #fff !important;
}

.district-container a {
    line-height: 15px;
}

div.spacer {
    width: 100%;
    padding-bottom: 20px;
    padding-top: 20px;
}

.terminals-container {
    width: 100%;
    border-radius: 3px;
    display: inline-grid;
}

div.icon-exchange {
    width: 18px;
    height: 13px;
    display: inline-block;
    position: absolute;
    margin-top: 4px;
    margin-left: 2px;
    background: url("/bitrix/templates/baikalsr/components/bitrix/catalog/city.list/bitrix/catalog.element/.default/images/exchange.svg") no-repeat;
    background-size: cover;
    opacity: 0.2;
}

div.terminals-pair_city-exchange {
    width: 20px;
    height: 16px;
    background: url(/bitrix/templates/baikalsr/components/bitrix/catalog/city/bitrix/catalog.element/.default/images/exchange.svg) no-repeat;
    display: block;
    cursor: pointer;
    transform: rotate(90deg);
    position: absolute;
    margin-left: -19px;
    margin-top: -7px;
    opacity: 0.5;
}




.city-block {
  margin: 30px 0 50px;
}
.city-block__header {}
.city-block__body {}
.city-block__name {}

.city-search {
  margin-bottom: 20px;
  position: relative;
}
.city-search:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  right: 20px;
  transform: translate(0,-50%);
  background: url("/city/list/images/search.svg") no-repeat;
}
.city-search__input {
  width: 100%;
  height: 50px;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1;
  color: #333;
  padding: 5px 60px 5px 20px;
}

.city-alphabet {
  display: table;
  width: 100%;
  margin-bottom: 25px;
}
.city-alphabet__item {
  display: table-cell;
  width: 2%;
  font-size: 20px;
  line-height: 23px;
  text-align: center;
}
.city-alphabet__item:first-child {
  text-align: left;
  width: 1%;
}
.city-alphabet__item:last-child {
  text-align: right;
  width: 1%;
}
.city-alphabet__link {
  font-size: 20px;
  line-height: 23px;
  color: #0097D4;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  padding: 0 2px 2px;
  text-decoration: none !important;
}
.city-alphabet__link:hover {
  border-color: #0097D4;
}
.city-alphabet__link:focus {
  color: #0097D4;
}
.city-alphabet__link_active {
  color: #333;
  pointer-events: none;
}

.city-list {
/*  -webkit-column-count: 4; 
  -moz-column-count: 4; 
  column-count: 4;
  margin-bottom: 40px;
*/
}
.city-list__region {
	display: block;
	clear: both;
}
.city-list__region-name__cols {
  -webkit-column-count: 4; 
  -moz-column-count: 4; 
  column-count: 4;
  margin-bottom: 40px;
}
.city-list__region-name {
  font-weight: 500;
  color: #333;
  font-size: 16px;
  line-height: 1;
  margin-bottom: 15px;

	display: block;
	clear: both;
}
.city-list__city-wrapper {
  margin-bottom: 5px;
}
.city-list__city-wrapper + .city-list__district {
  margin-top: 20px;
}
.city-list__city-wrapper:last-child {
  margin-bottom: 20px;
}
.city-list__city {
  font-size: 13px;
  color: #333333;
  line-height: 16px;
  border-bottom: 1px solid rgba(51,51,51,0.5);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.city-list__city:hover {
  color: #0097D4;
  border-color: transparent;
}
.city-list__district {
  display: inline-block;
  width: 100%;
}
.city-list__district-name {
  font-size: 13px;
  line-height: 16px;
  color: #aaa;
  margin-bottom: 5px;
  margin-top: 20px;
}

.city-list__region .city-list__district-name:first-child { margin-top: 0 !important; }


.city-direction {
  -webkit-column-count: 4;
  -moz-column-count: 4; 
  column-count: 4;
}
.city-direction__item {
  margin-bottom: 5px;
}
.city-direction__link {
  font-size: 13px;
  color: #333333;
  line-height: 16px;
  transition: color 0.2s ease;
}
.city-direction__link:hover {
  color: #0097D4;
}
.city-direction__separator {
  color: #b2b2b2 !important;
  margin: 0 5px;
}
/* End */
/* /city/list/.style.css?15868137314298 */
