.autocomplete-suggestions {
  background-color: #fff;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  z-index: 4
}

.autocomplete-suggestion {
  cursor: pointer;
  padding: 8px
}

.autocomplete-suggestion:hover {
  background-color: #f0f0f0
}

#selected-heroes {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 20px;
  overflow: auto
}

.hero-result,
.selected-hero {
  background: rgba(32, 116, 219, .10980392156862745);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  display: flex;
  flex: 0 calc(20% - 12px);
  flex-direction: column;
  margin-bottom: 15px;
  margin-right: 15px;
  padding: 10px;
  text-align: center
}

.hero-result strong,
.selected-hero strong {
  white-space: nowrap
}

#heroes-filtered {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: left
}

.hero-result:nth-child(5n),
.selected-hero:nth-child(5n) {
  margin-right: 0
}

#hero-search-results .selected-hero:nth-child(5n),
#selected-heroes .selected-hero:nth-child(5n) {
  margin-right: 20px
}

.selected-hero:hover {
  background-color: rgba(32, 116, 219, .3607843137254902)
}

.hero-buffs,
.hero-debuffs,
.hero-element,
.hero-rarity,
.hero-faction,
.hero-role {
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
  text-align: left
}

.hero-buffs span,
.hero-debuffs span {
  display: block
}

#autocomplete-results {
  margin-top: 20px
}

#all-buffs,
#all-debuffs {
  font-size: 14px;
  margin-top: 20px
}

.buff,
.debuff,
.element,
.popup-buff,
.popup-debuff,
.rarity,
.faction,
.role {
  align-items: center;
  background-color: #1957a3;
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 18px;
  height: 52px;
  justify-content: center;
  margin: 0 10px 10px 0;
  padding: 0 45px;
  width: auto;
  background-repeat: no-repeat!important;
}

.highlighted,
.selected {
  background-color: #023968
}

.heroes-filtered {
  color: #333;
  font-size: 14px;
  margin-top: 20px
}

#clear-selection {
  background-color: #ff4747;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  margin-top: 20px;
  padding: 10px;
  position: fixed;
  right: 10px;
  top: 0
}

#clear-selection:hover {
  background-color: #ff1c1c
}

.buff.inactive,
.popup-debuff.inactive {
  opacity: .5;
  pointer-events: none
}

body {
  background: #000;
  font: 400 18px/1.72 Zekton;
  font-family: sans-serif;
  margin: auto;
  max-width: 80%
}

h3 {
  color: #000
}

#filtered-heroes-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%
}

img {
  height: auto;
  margin: 10px auto;
  width: 30%
}

#pinned-heroes-list {
  display: flex;
  flex-wrap: wrap
}

#search {
  background: #eee;
  border: 0;
  padding: 15px;
  width: 80%
}

.buff.selected,
.popup-debuff.selected {
  background-color: #fc0;
  color: #fff
}

.buff {
  width: 52px
}

.buff, .debuff, .popup-debuff, .popup-buff {
  background-repeat: no-repeat;
  cursor: pointer;
  display: inline-block;
  height: 52px;
  overflow: hidden;
  padding: 0;
  text-indent: -9999px;
  width: 52px;
  background-size: contain!important;
}

.popup-debuff {
  background-size: 52px;
  min-width: 52px
}

.highlighted,
.highlighted:hover {
  border-radius:5px;
}

.buff.highlighted,
.buff:hover {
  outline: 4px inset #024076
}

.debuff.highlighted,
.debuff.highlighted:hover {
  outline: 4px inset #af0128;
}

#buffs-list,
#debuffs-list {
  display: flex;
  flex-wrap: wrap
}

.buffs-list .buff,
.debuffs-list .debuff,
.popup-debuffs-list .popup-debuff {
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 26px;
  background-size: 26px;
  color: #000;
  height: 26px;
  margin: 0 4px 0 0;
  min-width: 26px;
  padding: 0;
  width: 26px
}

.buffs-list .buff:hover,
.popup-debuffs-list .popup-debuff:hover {
  outline: none
}

.buffs-list,
.debuffs-list,
.popup-debuffs-list {
  margin: 0;
  padding: 5px 0 0
}

.hero-buffs strong,
.hero-debuffs strong {
  width: 100%
}

.recommended-hero {
  background: rgba(32, 116, 219, .10980392156862745);
  cursor: pointer;
  display: inline-block;
  display: flex;
  flex: 0 calc(20% - 12px);
  flex-direction: column;
  margin: 5px;
  padding: 20px;
  text-align: center
}

#recommended-team {
  display: flex
}

#recommend-team {
  background: #fcc208;
  color: #000
}

#recommend-team,
button {
  border: 0;
  border-radius: 3px;
  margin: 10px 0
}

button {
  background: #1957a3;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  height: 36px;
  padding: 0 45px
}

#hero-search-results {
  align-items: stretch;
  display: flex;
  flex-wrap: nowrap;
  margin-top: 20px;
  overflow: auto
}

#select-all-heroes {
  background: #f6b808;
  color: #000;
  height: 106px;
  margin: 0 5px 15px;
  min-width: 320px
}

#hero-search {
  border-color: #1459f8;
  border-width: 3px;
  color: #1459f8;
  font-size: 18px;
  height: 68px;
  margin: 0 42px 0 0;
  padding: 0 30px;
  text-align: left;
  width: 96%
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500
}

h5 {
  &.undertitle {
    font-size: 45px
  }
}

.h5 {
  font: 36px/1.33 $font
}

.h6 {
  font: 25px/1.76 $font
}

#filtered-heroes-list:empty::after {
  content: "Выберите бафы или дебафы"
}

h1 {
  margin: 87px auto 105px
}

.container {
  background: #fff;
  margin: auto;
  max-width: 80%;
  padding: 78px 10% 100px;
  width: 100%
}

h1 {
  font-size: 70px;
  line-height: 80px;
  margin: 0 0 50px
}

h2 {
  font-size: 56px;
  line-height: 64px;
  margin: 0 0 55.5px
}

h3 {
  font-size: 44.8px;
  line-height: 51.2px
}

h3,
h4 {
  margin: 20px 0
}

h4 {
  font-size: 35.84px;
  line-height: 40.96px
}

h5 {
  font-size: 28.672px;
  line-height: 32.768px;
  margin: 0 0 75.90352px
}

h6 {
  font-size: 22.9376px;
  line-height: 26.2144px;
  margin: 0 0 84.25291px
}

h1,
h2,
h3,
h4,
h5,
h6 {
  background: radial-gradient(78.13% 515.73% at 44.26% 57.3%, #909090 0, #000 100%);
  -webkit-background-clip: text;
  font-family: Zekton;
  font-weight: 300;
  position: relative;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent
}

.h5 {
  font: 36px/1.33 Zekton;
  margin-bottom: 12px
}

.h6 {
  font: 25px/1.76 Zekton;
  margin-bottom: 22px
}

#element-list,
#rarity-list,
#faction-list,
#role-list {
  display: flex
}

#missing-buffs:empty::after,
#missing-debuffs:empty::after,
#selected-heroes:empty::after {
  content: "Нет выбранных героев"
}

h1 {
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 100px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 auto 25px;
  text-align: center;
  width: 70%
}

#pinned-heroes-list:empty::after {
  content: "Нет закрепленных героев"
}

#buffs-chosed,
#debuffs-chosed,
#filtered-heroes-list:empty::after,
#filtered-heroes-list p,
#missing-buffs:empty::after,
#missing-buffs:not(:empty),
#missing-debuffs:empty::after,
#missing-debuffs:not(:empty),
#pinned-heroes-list::after,
#selected-heroes:empty::after {
  background: #fff;
  border: 3px solid #f6b90a;
  box-sizing: border-box;
  color: #000;
  display: flex;
  padding: 38px;
  text-align: center;
  width: 100%
}

.box {
  background: hsla(0, 0%, 80%, .27058823529411763);
  margin: 20px 0;
  padding: 30px 40px
}

.custom {
  background: rgba(32, 116, 219, .10980392156862745)
}

#popup {
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
  left: 50%;
  max-width: 800px;
  padding: 40px;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 3
}

.hidden {
  display: none
}

.popup-overlay {
  background: rgba(0, 0, 0, .5);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2
}

.popup-overlay.active {
  display: block
}

#popup .close-btn {
  background: #ff4d4d;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: block;
  margin-left: auto;
  padding: 5px 10px
}

#popup .box {
  background: transparent;
  padding: 0
}

#popup-overlay {
  background: rgba(0, 0, 0, .7411764705882353);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1
}

#popup h3,
#popup h4 {
  font-size: 15px;
  line-height: 1.3
}

#popup #recommended-team-container {
  background: #eee;
  padding: 0 20px 20px
}

#missing-debuffs:empty::after,
#popup #missing-buffs:empty::after,
#selected-heroes:empty::after {
  padding: 15px
}

#popup input {
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  width: 100%
}

#close-popup-btn {
  background: #f6b808;
  border-radius: 0;
  color: #000;
  height: 50px;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: -1px;
  width: 50px
}

.element[data-element="дух"],
.element[data-element="магия"],
.element[data-element="сила"],
.element[data-element="тьма"],
.buff[data-buff="6+ бафов"],
.buff[data-buff="нет"],
.popup-buff[data-buff="6+ бафов"],
.popup-buff[data-buff="нет"],
.popup-debuff[data-debuff="6+ дебафов"],
.popup-debuff[data-debuff="8+ бафов/дебафов"],
.popup-debuff[data-debuff="нет"],
.debuff[data-debuff="6+ дебафов"],
.debuff[data-debuff="8+ бафов/дебафов"],
.debuff[data-debuff="нет"] {
  align-items: center;
  display: inline-flex;
  order: -1;
  padding: 0 10px;
  text-indent: 0;
  white-space: nowrap;
  width: auto
}

.popup-buff[data-buff*="каменная кожа"], .buff[data-buff*="каменная кожа"] {
  background: url("assets/icons/bafy_20.png")
}

.popup-buff[data-buff*="щит"], .buff[data-buff*="щит"] {
  background: url("assets/icons/bafy_16.png")
}

.popup-buff[data-buff*="блок урона"], .buff[data-buff*="блок урона"] {
  background: url("assets/icons/bafy_2.png")
}

.popup-buff[data-buff*="регенерация"], .buff[data-buff*="регенерация"] {
  background: url("assets/icons/bafy_14.png")
}

.popup-buff[data-buff*="бонус зщт"], .buff[data-buff*="бонус зщт"] {
  background: url("assets/icons/bafy_3.png")
}

.popup-buff[data-buff*="усиление"], .buff[data-buff*="усиление"] {
  background: url("assets/icons/bafy_15.png")
}

.popup-buff[data-buff*="бонус атк"], .buff[data-buff*="бонус атк"] {
  background: url("assets/icons/bafy_4.png")
}

.popup-buff[data-buff*="контратака"], .buff[data-buff*="контратака"] {
  background: url("assets/icons/bafy_10.png")
}

.popup-buff[data-buff*="щит союзников"], .buff[data-buff*="щит союзников"] {
  background: url("assets/icons/bafy_17.png")
}

.popup-buff[data-buff*="блок штрафов"], .buff[data-buff*="блок штрафов"] {
  background: url("assets/icons/bafy_1.png")
}

.popup-buff[data-buff*="бонус метк"], .buff[data-buff*="бонус метк"] {
  background: url("assets/icons/bafy_7.png")
}

.popup-buff[data-buff*="бонус кш"], .buff[data-buff*="бонус кш"] {
  background: url("assets/icons/bafy_6.png")
}

.popup-buff[data-buff*="пелена"], .buff[data-buff*="пелена"] {
  background-image: url("assets/icons/bafy_13.png");
}

.popup-buff[data-buff*="бонус скр"], .buff[data-buff*="бонус скр"] {
  background: url("assets/icons/bafy_8.png")
}

.popup-buff[data-buff*="возрождение"], .buff[data-buff*="возрождение"] {
  background: url("assets/icons/bafy_9.png")
}

.popup-buff[data-buff*="отражение"], .buff[data-buff*="отражение"] {
  background: url("assets/icons/bafy_12.png")
}

.popup-buff[data-buff*="насмешка"], .buff[data-buff*="насмешка"] {
  background: url("assets/icons/bafy_19.png")
}

.popup-buff[data-buff*="бонус сопр"], .buff[data-buff*="бонус сопр"] {
  background: url("assets/icons/bafy_18.png")
}

.popup-buff[data-buff*="неуязвимость"], .buff[data-buff*="неуязвимость"] {
  background: url("assets/icons/bafy_11.png")
}

.popup-buff[data-buff*="непробиваемость"], .buff[data-buff*="непробиваемость"] {
  background: url("assets/icons/bafy_11.png")
}

.popup-buff[data-buff*="надлом"], .buff[data-buff*="надлом"] {
  background: url("assets/icons/bafy_21.png")
}

.popup-buff[data-buff*="бонус ку"], .buff[data-buff*="бонус ку"] {
  background: url("assets/icons/bafy_5.png")
}

.popup-buff[data-buff*="перехват"], .buff[data-buff*="перехват"] {
  background: url("assets/icons/bafy_21.png")
}

.popup-buff[data-buff*="ядовитый покров"], .buff[data-buff*="ядовитый покров"] {
  background: url("assets/icons/bafy_22.png")
}

/* Дебафы */

.popup-debuff[data-debuff*="штраф зщт"],
.debuff[data-debuff*="штраф зщт"] {
  background: url("assets/icons/debafy_15.png")
}

.popup-debuff[data-debuff*="блок бонусов"],
.debuff[data-debuff*="блок бонусов"] {
  background: url("assets/icons/debafy_1.png")
}

.popup-debuff[data-debuff*="слабость"],
.debuff[data-debuff*="слабость"] {
  background: url("assets/icons/debafy_10.png")
}

.popup-debuff[data-debuff*="заморозка"],
.debuff[data-debuff*="заморозка"] {
  background: url("assets/icons/debafy_6.png")
}

.popup-debuff[data-debuff*="штраф скр"],
.debuff[data-debuff*="штраф скр"] {
  background: url("assets/icons/debafy_20.png")
}

.popup-debuff[data-debuff*="штраф атк"],
.debuff[data-debuff*="штраф атк"] {
  background: url("assets/icons/debafy_14.png")
}

.popup-debuff[data-debuff*="оглушение"],
.debuff[data-debuff*="оглушение"] {
  background: url("assets/icons/debafy_7.png")
}

.popup-debuff[data-debuff*="овца"],
.debuff[data-debuff*="овца"] {
  background: url("assets/icons/debafy_27.png")
}

.popup-debuff[data-debuff*="выжигание"],
.debuff[data-debuff*="выжигание"] {
  background: url("assets/icons/debafy_5.png")
}

.popup-debuff[data-debuff*="бомба"],
.debuff[data-debuff*="бомба"] {
  background: url("assets/icons/debafy_4.png")
}

.popup-debuff[data-debuff*="яды"],
.debuff[data-debuff*="яды"] {
  background: url("assets/icons/debafy_21.png")
}

.popup-debuff[data-debuff*="штраф метк"],
.debuff[data-debuff*="штраф метк"] {
  background: url("assets/icons/debafy_19.png")
}

.popup-debuff[data-debuff*="изнурение"],
.debuff[data-debuff*="изнурение"] {
  background: url("assets/icons/debafy_28.png")
}

.popup-debuff[data-debuff*="провокация"],
.debuff[data-debuff*="провокация"] {
  background: url("assets/icons/debafy_9.png")
}

.popup-debuff[data-debuff*="паразит"],
.debuff[data-debuff*="паразит"] {
  background: url("assets/icons/debafy_8.png")
}

.popup-debuff[data-debuff*="блок ан"],
.debuff[data-debuff*="блок ан"] {
  background: url("assets/icons/debafy_3.png")
}

.popup-debuff[data-debuff*="сон"],
.debuff[data-debuff*="сон"] {
  background: url("assets/icons/debafy_12.png")
}

.popup-debuff[data-debuff*="порча"],
.debuff[data-debuff*="порча"] {
  background: url("assets/icons/debafy_24.png")
}

.popup-debuff[data-debuff*="окоченение"],
.debuff[data-debuff*="окоченение"] {
  background: url("assets/icons/debafy_25.png")
}

.popup-debuff[data-debuff*="штраф лечения"],
.debuff[data-debuff*="штраф лечения"] {
  background: url("assets/icons/debafy_18.png")
}

.popup-debuff[data-debuff*="страх"],
.debuff[data-debuff*="страх"] {
  background: url("assets/icons/debafy_13.png")
}

.popup-debuff[data-debuff*="истинный страх"],
.debuff[data-debuff*="истинный страх"] {
  background: url("assets/icons/debafy_22.png")
}

.popup-debuff[data-debuff*="штраф сопр"],
.debuff[data-debuff*="штраф сопр"] {
  background: url("assets/icons/debafy_26.png")
}

.popup-debuff[data-debuff*="блок воскр."],
.debuff[data-debuff*="блок воскр."] {
  background: url("assets/icons/debafy_2.png")
}

.popup-debuff[data-debuff*="штраф ку"],
.debuff[data-debuff*="штраф ку"] {
  background: url("assets/icons/debafy_16.png")
}

.popup-debuff[data-debuff*="штраф кш"],
.debuff[data-debuff*="штраф кш"] {
  background: url("assets/icons/debafy_17.png")
}

.popup-debuff[data-debuff*="слабость к яду"],
.debuff[data-debuff*="слабость к яду"] {
  background: url("assets/icons/debafy_11.png")
}

.popup-debuff[data-debuff*="печать смерти"], .debuff[data-debuff*="печать смерти"],
.popup-debuff[data-debuff*="печать"], .debuff[data-debuff*="печать"] {
  background: url("assets/icons/debafy_23.png")
}

.popup-debuff[data-debuff*="обезвреживание"], .debuff[data-debuff*="обезвреживание"] {
  background: url("assets/icons/debafy_24.png")
}

.popup-debuff[data-debuff*="омертвение"], .debuff[data-debuff*="омертвение"] {
  background: url("assets/icons/debafy_25.png")
}

.popup-debuff[data-debuff*="взгляд охотника"], .debuff[data-debuff*="взгляд охотника"] {
  background: url("assets/icons/debafy_22.png")
}

.popup-debuff[data-debuff*="заражение"], .debuff[data-debuff*="заражение"] {
  background: url("assets/icons/debafy_21.png")
}

.popup-debuff[data-debuff*="узы боли"], .debuff[data-debuff*="узы боли"] {
  background: url("assets/icons/debafy_14.png")
}

.popup-debuff[data-debuff*="берсерк"], .debuff[data-debuff*="берсерк"] {
  background: url("assets/icons/debafy_16.png")
}

.popup-debuff[data-debuff*="блок пассивок"],
.debuff[data-debuff*="блок пассивок"] {
  background: url("assets/icons/debafy_23.png")
}

#popup-buffs-list,#popup-debuffs-list {
    display: flex;
    flex-wrap: wrap;
}