.icon {
  display: inline-block;
  margin: 0 auto;
  vertical-align: middle;
  //a
  &--account {
    background: url("/images/ib/account.svg") no-repeat;
    height: 22px;
    width: 32px;
  }
  &--alert__success {
    background: url("/images/ib/alert-success.svg") no-repeat;
    height: 50px;
    width: 50px;
  }
  &--alert__warning {
    background: url("/images/ib/alert-warning.svg") no-repeat;
    height: 50px;
    width: 50px;
    &--small {
    background: url("/images/ib/alert-warning-small.svg") no-repeat;
    height: 50px;
    width: 50px;
    }
  }
  &--alert__error {
    background: url("/images/ib/alert-error.svg") no-repeat;
    height: 50px;
    width: 50px;
  }
  &--arr-left-purple {
    background: url("/images/ib/arr-left-purple.svg") no-repeat;
    width: 34px;
    height: 34px;
    vertical-align: middle;
  }
  &--arr-left-16 {
    background: url("/images/ib/arr-left-16.svg") no-repeat;
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }
  &--atm {
    background: url("/images/nwp-icon/atm.svg") no-repeat;
    background-size: 100%;
    vertical-align: middle;
    width: 57px;
    height: 70px;
  }
  //b
  &--bank-branch {
    background: url("/images/nwp-icon/bank-branch.svg") no-repeat;
    background-size: 100%;
    width: 60px;
    height: 45px;
    vertical-align: middle;
  }
  &--bell {
    background: url("/images/ib/bell.svg") no-repeat;
    height: 20px;
    width: 20px;
  }
  &--big-cat {
    background: url("/images/kreditka/big-cat.svg") no-repeat;
    width: 60px;
    height: 60px;
    background-size: 100%;
  }
  &--big-pc {
    background: url("/images/kreditka/big-pc.svg") no-repeat;
    width: 60px;
    height: 60px;
    background-size: 100%;
  }
  &--big-spoon {
    background: url("/images/kreditka/big-spoon.svg") no-repeat;
    width: 60px;
    height: 60px;
    background-size: 100%;
  }
  &--big-tenis {
    background: url("/images/kreditka/big-tenis.svg") no-repeat;
    width: 60px;
    height: 60px;
    background-size: 100%;
  }
  &--big-house {
    background: url("/images/kreditka/big-house.svg") no-repeat;
    width: 60px;
    height: 60px;
    background-size: 100%;
  }
  //c

  &--cards {
    background: url("/images/ib/cards.svg") no-repeat;
    height: 19px;
    width: 31px;
  }
  &--clock {
    background: url("/images/kreditka/clock.svg") no-repeat;
    height: 60px;
    width: 60px;
    background-size: 100%;
  }
  &--close__small--white {
    background: url("/images/ib/close-white.svg") no-repeat;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    background-size: 100%;
  }
  &--close__small--berry {
    background:  url("/images/ib/cross_small_berry.svg") no-repeat;
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }
  &--combine-shape {
    background:  url("/images/kreditka/combine-shape.svg") no-repeat;
    width: 33px;
    height: 30px;
    vertical-align: middle;
  }
  //d
  &--dashboard {
    background: url("/images/ib/dashboard.svg") no-repeat;
    height: 26px;
    width: 30px;
  }

  &--delete-small-white {
    background: url("/images/ib/delete-small-white.svg") no-repeat;
    background-position: 3px -2px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }
  //e
  &--exchange {
    background: url("/images/ib/exchange.svg") no-repeat;
    height: 19px;
    width: 31px;
  }
  &--eye-visible {
    background: url("/images/ib/eye-visible.svg") no-repeat;
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }
  &--eye-big {
    background: url("/images/kreditka/eye.svg") no-repeat;
    width: 102px;
    height: 61px;
    vertical-align: middle;
  }
  //f
  &--form-big {
    background: url("/images/kreditka/form.svg") no-repeat;
    width: 71px;
    height: 71px;
    vertical-align: middle;
  }
  //g
  &--gift {
    background: url("/images/kreditka/gift.svg") no-repeat;
    height: 30px;
    width: 30px;
    background-size: 100%;
    vertical-align: middle;
  }
  &--gpay {
    background: url("/images/kreditka/gpay.svg") no-repeat;
    height: 30px;
    width: 30px;
    background-size: 100%;
    vertical-align: -webkit-baseline-middle;
  }
  //h
  &--hamburger {
    background: url("/images/hamburger.svg") no-repeat;
    width: 30px;
    height: 25px;
    vertical-align: middle;
    position: relative;
    top: 2px;
    right: 10px;
    background-size: 80%;
  }
  &--hand {
    background: url("/images/kreditka/hand.svg") no-repeat;
    height: 30px;
    width: 30px;
    background-size: 100%;
    vertical-align: middle;
  }
  &--home {
    background: url("/images/kreditka/home.svg") no-repeat;
    height: 30px;
    width: 30px;
    background-size: 100%;
    vertical-align: middle;
  }
  //ch

  &--check-white {
    background: url("/images/ib/check-white.svg") no-repeat;
    height: 35px;
    width: auto;
  }
  //i
  //j
  //k
  &--kontokorent {
    background: url("/images/ib/icon_kontokorent.svg") no-repeat;
    height: 33px;
    width: 41px;
    vertical-align: middle;
  }
  &--kreditka {
    background: url("/images/kreditka/kreditka.svg") no-repeat;
    width: 114px;
    height: 84px;
    vertical-align: middle;
  }
  //l
  &--location-ico {
    background: url("/images/icon-lab5/location-ico.svg") no-repeat;
    height: 120px;
    width: 80px;
    background-size: 100%;
  }

  &--logout {
    background: url("/images/ib/logout.svg") no-repeat;
    height: 19px;
    width: 14px;
  }
  &--logo-auto {
    background: url("/images/ib/logo-auto.svg") no-repeat;
    // idealni pomer
    height: 45px;
    width: 320px;
    fill: #fff;
  }
  //m
  &--moneta-ico-white {
    background: url("/images/icon-lab5/moneta-ico-white.svg") no-repeat;
    background-size: 100%;
    height: 50px;
    width: 40px;
  }
  &--moneta_simple_logo {
    background: url("/images/ib/moneta_simple_logo.svg") no-repeat;
    width: 50px;
    height: 50px;
  }

  &--money-hand {
    background: url("/images/nwp-icon/money-hand.svg") no-repeat;
    background-size: 100%;
    vertical-align: middle;
    width: 72px;
    height: 70px;
  }
  //n
  //o
  &--online-doc {
    background: url("/images/nwp-icon/online-doc.svg") no-repeat;
    background-size: 100%;
    width: 54px;
    height: 70px;
    vertical-align: middle;
  }
  //p
  &--pig {
    background: url("/images/ib/icon_pig.svg") no-repeat;
    height: 34px;
    width: 33px;
    vertical-align: middle;
  }
  &--phone {
    background: url("/images/icon-lab5/phone.svg") no-repeat;
    background-size: 100%;
    width: 30px;
    height: 30px;
  }
  &--phone-ring {
    background: url("/images/nwp-icon/phone-ring.svg") no-repeat;
    background-size: 100%;
    width: 40px;
    height: 45px;
    vertical-align: middle;
  }
  &--photo {
    background: url("/images/kreditka/photo.svg") no-repeat;
    width: 100px;
    height: 80px;
    vertical-align: middle;
  }
  &--plane {
    background: url("/images/kreditka/plane.svg") no-repeat;
    height: 30px;
    width: 30px;
    vertical-align: middle;
    background-size: 100%;
  }
  &--plus {
    background: url("/images/ib/plus.svg") no-repeat;
    background-size: 100%;
    width: 24px;
    height: 24px;
  }
  &--pledge {
    background: url("/images/pl-icon/zastava.svg");
    background-size: 100%;
    width: 25px;
    height: 25px;
  }
  //q
  //r
  &--refinancing {
    background: url("/images/ib/refinancing.svg") no-repeat;
    height: 23px;
    width: 31px;
  }
  //s
  &--savings {
    background: url("/images/ib/savings.svg") no-repeat;
    height: 29px;
    width: 31px;
  }
  &--search {
    background: url("/images/ib/search-passive.svg") no-repeat;
    height: 24px;
    width: 24px;
  }
  &--search-active {
    background: url("/images/ib/search-active.svg") no-repeat;
    height: 24px;
    width: 24px;
  }
  &--send {
    background: url("/images/kreditka/send.svg") no-repeat;
    height: 30px;
    width: 30px;
    background-size: 100%;
    vertical-align: middle;
  }
  &--state-ok {
    background: url("/images/ib/checked.svg") no-repeat;
  }
  &--state-x {
    background: url("/images/ib/close.svg") no-repeat;
  }
  &--settings {
    background: url("/images/ib/icon_settings.svg") no-repeat;
    height: 23px;
    width: 30px;
    background-size: 100%;
    vertical-align: middle;
    margin-right: 5px;
  }
  &--sad-face {
    background: url("/images/icon-lab5/sad-face.svg") no-repeat;
    height: 60px;
    width: 60px;
    background-size: 100%;
    float: left;
    margin-right: 15px;
  }
  &--shield-logo {
    background: url("/images/icon-lab5/shield-logo.svg") no-repeat;
    background-size: 100%;
    height: 100px;
    width: 81px;
  }
  &--shield {
    background: url("/images/icon-lab5/shield.svg") no-repeat;
    background-size: 100%;
    height: 100px;
    width: 81px;
  }
  &--shield-outline {
    background: url("/images/icon-lab5/shield-outline.svg") no-repeat;
    width: 25px;
    height: 39px;
    background-size: 100%;
    vertical-align: middle;
  }
  //t
  &--tooltip-16 {
    background: url("/images/ib/tooltip.svg") no-repeat;
    height: 16px;
    width: 16px;
    vertical-align: middle;
  }
  //u
  &--uver {
    background: url("/images/kreditka/uver.svg") no-repeat;
    width: 141px;
    height: 114px;
    vertical-align: middle;
  }
  &--user {
    background: url("/images/ib/user.svg") no-repeat;
    height: 35px;
    width: 35px;
    vertical-align: middle;
  }

}
//vyhledavani podle abecedy ctrl F nebo command F hledej podle //pismeno abecedy
/// patternlab Icony

.icon {
  display: inline-block;
  margin: 0 auto;
//a
&--arr-back {
  background: url("/images/pl-icon/arr-back.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--arr-down {
  background: url("/images/pl-icon/arr-down.svg");
  background-size: 100%;
  width: 25px;
  height: 22px;
}
&--arr-left {
  background: url("/images/pl-icon/arr-left.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--arr-right {
  background: url("/images/pl-icon/arr-right.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--applicant {
  background: url("/images/pl-icon/zadatele.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
//b
//c
&--calculator {
  background: url("/images/pl-icon/calculator.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--calendar {
  background: url("/images/pl-icon/calendar.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--close {
  background: url("/images/pl-icon/close.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
//d
&--delete {
  background: url("/images/pl-icon/delete.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--download {
  background: url("/images/pl-icon/download.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--document {
  background: url("/images/pl-icon/dokumenty.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--drawing-money {
  background: url("/images/pl-icon/cerpani.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
//e
&--edit {
  background: url("/images/pl-icon/edit.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--expand {
  background: url("/images/pl-icon/expand.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--email {
  background-image: url("/images/pl-icon/email.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
//f
&--faq {
  background: url("/images/pl-icon/faqs.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
//g
//h
//ch
&--chat {
  background: url("/images/pl-icon/chat.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--check {
  background: url("/images/pl-icon/check.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--checkbox-checked {
  background: url("/images/pl-icon/checkbox-checked.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--checkbox {
  background: url("/images/pl-icon/checkbox.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
//i
&--info {
  background: url("/images/pl-icon/info.svg");
  background-size: 100%;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
&--income {
  background: url("/images/pl-icon/prijem.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
//j
//k
//l
&--lock {
  background: url("/images/pl-icon/lock.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
//m
&--menu {
  background: url("/images/pl-icon/menu.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--minus {
  background: url("/images/pl-icon/minus.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--money {
  background: url("/images/pl-icon/obchody.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
//n
//o
&--outcome {
  background: url("/images/pl-icon/vydaj.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--online-doc {
  background: url("/images/pl-icon/online-doc.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
//p
&--phone {
  background: url("/images/pl-icon/phone.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--pdf {
  background: url("/images/pl-icon/PDF.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--pin {
  background: url("/images/pl-icon/pin.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--plus {
  background: url("/images/pl-icon/plus.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
//q
//r
&--radio-checked {
  background: url("/images/pl-icon/radio-checked.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
&--radio {
  background: url("/images/pl-icon/radio.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
//s
&--search {
  background: url("/images/pl-icon/search.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
//t
//u
&--upload {
  background: url("/images/pl-icon/upload.svg");
  background-size: 100%;
  width: 25px;
  height: 25px;
}
//v
//w
//x
//y
//z
}
.menu-left {
  .icon {
    display: block;
  }
}

.collapse {
  ul {
    .icon {
      float: left;
      position: absolute;
      left: 0;
    }
  }
}

.login-logo {
  @extend .mb-4;
  @extend .mb-4;
  @extend .text-center;
}
.icon--sm {
  width: 15px;
  height: 15px;
}
.icon--lg {
  width: 45px;
  height: 45px;
  vertical-align: middle;
}