.popup.popup-city-select {
  width: 700px;
}
.city-select {}
.city-select__country {
  display: flex;
  justify-content: flex-start;
  gap: 5px;
  position: relative;
  font-size: 16px;
}
.city-select__country--list {
  width: 200px;
  position: absolute;
  z-index: 10;
  list-style: none;
  padding: 0;
  margin: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 13px rgba(0, 0, 0, .3);
  top: 100%;
  display: none;
  overflow: hidden;
}
.city-select__country--list.active {
  display: flex;
  flex-direction: column;
}
.city-select__country--list li {
  padding: 10px;
  cursor: pointer;
}
.city-select__country--list li + li {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.city-select__country--list li:hover {
  background: #f9f9f9;
}
.city-select__country--title {
  font-weight: 600;
}
.city-select__country--name {
  font-weight: 600;
  color: #F08C56;
  border-bottom: 1px dashed #F08C56;
  cursor: pointer;
}
.city-select__search {
  position: relative;
  margin: 13.5px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.city-select__search--input {
  outline: none;
  border: 1px solid var(--color_gray);
  border-radius: 6px;
  height: 40px;
  width: 100%;
  padding: 10px 20px 10px 40px;
  font-size: 16px;
  background-color: #f9f9f9;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjMxMDUgMTZMOS4xOTQ5IDkuODg1MTRDOC43MDY1OSAxMC4zMDExIDguMTQ1MDMgMTAuNjIzMSA3LjUxMDIyIDEwLjg1MDlDNi44NzU0MiAxMS4wNzg4IDYuMjM3MzYgMTEuMTkyNyA1LjU5NjA1IDExLjE5MjdDNC4wMzIxNSAxMS4xOTI3IDIuNzA4NSAxMC42NTE0IDEuNjI1MSA5LjU2ODc1QzAuNTQxNyA4LjQ4NjE0IDAgNy4xNjI5OCAwIDUuNTk5MjdDMCA0LjAzNTU2IDAuNTQxMDQ4IDIuNzExNzUgMS42MjMxNSAxLjYyNzgzQzIuNzA1MjQgMC41NDM5MTQgNC4wMjgyNCAwLjAwMTMwNDM1IDUuNTkyMTQgMi4zNDE3M2UtMDZDNy4xNTYwNCAtMC4wMDEyOTk2NiA4LjQ4MDM0IDAuNTQwMzM0IDkuNTY1MDQgMS42MjQ5QzEwLjY0OTcgMi43MDk0NyAxMS4xOTIxIDQuMDMzMjggMTEuMTkyMSA1LjU5NjM0QzExLjE5MjEgNi4yNzQ2OCAxMS4wNzIgNi45MzEyMiAxMC44MzE3IDcuNTY1OTVDMTAuNTkxNSA4LjIwMDY3IDEwLjI3NTcgOC43NDM2MSA5Ljg4NDM5IDkuMTk0NzVMMTYgMTUuMzA4NkwxNS4zMTA1IDE2Wk01LjU5NzAyIDEwLjIxNTJDNi44OTI2NyAxMC4yMTUyIDcuOTg2NDkgOS43NjkyNiA4Ljg3ODQ3IDguODc3MzlDOS43NzA0NSA3Ljk4NTUyIDEwLjIxNjQgNi44OTE1MSAxMC4yMTY0IDUuNTk1MzZDMTAuMjE2NCA0LjI5OTIyIDkuNzcwNDUgMy4yMDU1NCA4Ljg3ODQ3IDIuMzE0MzFDNy45ODY0OSAxLjQyMzA5IDYuODkyNjcgMC45NzcxNTYgNS41OTcwMiAwLjk3NjUwNUM0LjMwMTM3IDAuOTc1ODU0IDMuMjA3MjMgMS40MjE3OSAyLjMxNDU5IDIuMzE0MzFDMS40MjE5NiAzLjIwNjg0IDAuOTc1OTcxIDQuMzAwNTIgMC45NzY2MjIgNS41OTUzNkMwLjk3NzI3MyA2Ljg5MDIxIDEuNDIzMjYgNy45ODM4OSAyLjMxNDU5IDguODc2NDFDMy4yMDU5MyA5Ljc2ODk0IDQuMjk5NzQgMTAuMjE0OSA1LjU5NjA1IDEwLjIxNDIiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuNSIvPgo8L3N2Zz4K);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: left 12px center;
}
.city-select__search--input:focus {
  background-color: #fff;
  border-color: rgba(0, 0, 0, .1);
  box-shadow: 4px 3px 16px rgba(0, 0, 0, .2);
}
.city-select__search--result {
  padding: 0;
  margin: 0;
  list-style: none;
  height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}
.city-select__search--result li {
  cursor: pointer;
  padding: 7px 0;
  font-size: 15px;
}
.city-select__search--result li:hover {
  font-weight: 700;
}
.city-select__favorite {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.city-select__favorite li {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #13213C;
  color: #13213C;
  cursor: pointer;
}
.city-select__favorite li:hover {
  background: #13213C;
  color: #fff;
}
.city-select__selector {
  display: flex;
  margin: 15px -20px -15px -20px;
}
.city-select__selector--col {
  flex: 1;
}
.city-select__selector--col + .city-select__selector--col ul {
  border-left: 1px solid var(--color_gray);
}
.city-select__selector--title {
  font-weight: 700;
  font-size: 18px;
  padding: 0 0 10px 20px;
}
.city-select__selector--col input {
  margin: 0 20px 5px 20px;
  border: 1px solid var(--color_gray);
  padding: 7.5px 10px;
  outline: none;
  border-radius: 4px;
  font-size: 12px;
  height: 26px;
  display: block;
  width: 240px;
}
.city-select__selector--items {
  max-height: 300px;
  min-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 10px 0 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.city-select__selector--items li {
  cursor: pointer;
  padding: 8px 0 8px 20px;
  border-left: 2px solid transparent;
}
.city-select__selector--items li.active {
  order: -1;
  font-weight: 700;
  background: #f9f9f9;
  border-color: #F08C56;
}