.icon {
  // background-image: url(../img/icon.png);
  // vertical-align: middle;
  // display: inline-block;
  // background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-indent: -999em;


  &-win {
    width: 138px;
    height: 188px;
    background-image: url(/images/web/icon-win.png);
  }

  &-loss {
    width: 138px;
    height: 188px;
    background-image: url(/images/web/icon-loss.png);
  }

  &-arrow {
    width: 16px;
    height: 16px;
    background-image: url(/images/web/icon-more.png);
  }

  &-fish {
    width: 16px;
    height: 16px;
    background-image: url(/images/web/icon-fish.png);
  }

  &-warn {
    width: 16px;
    height: 16px;
    background-image: url(/images/web/icon-warn.png);
  }

  &-del {
    width: 16px;
    height: 16px;
    background-image: url(/images/web/del.png);
  }

  &-right {
    width: 20px;
    height: 20px;
    background-image: url(/images/web/icon_right.png);
  }

  &-adc {
    width: 22px;
    height: 24px;
    background-image: url(/images/web/icon-zb1.png);
  }

  &-skill {
    width: 22px;
    height: 24px;
    background-image: url(/images/web/icon-jineg.png);
  }

  &-runes {
    width: 22px;
    height: 24px;
    background-image: url(/images/web/icon-fuw.png);
  }

  &-history {
    width: 24px;
    height: 24px;
    background-image: url(/images/web/icon-home25.png);
  }

  &-used {
    width: 24px;
    height: 24px;
    background-image: url(/images/web/icon-home26.png);
  }

  &-sort {
    width: 12px;
    height: 16px;
    background-image: url(/images/web/inco-home14.png);
  }

  &-coming {
    width: 100px;
    height: 96px;
    background-image: url(/images/web/icon-coming.png);
  }

  &-search {
    width: 22px;
    height: 22px;
    background-image: url(/images/web/inco-home5.png);
  }

  &-cupbg {
    width: 166px;
    height: 166px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKYAAACmAgMAAAAt5hzkAAAACVBMVEXrTmIAAADnQ1LpopHeAAAAA3RSTlMMAAYaD5iPAAACt0lEQVRYw+3WPW7cMBAF4CcBKtSlUZ9GRXIKHYGFSDCu1OQerFOlYW6QRqeMSK6Wken5sWPELvxg7MLYDxRnKJCEveUBT+fLCcydBhCJj6kHlfExXUDmMQWd6UpXhg5X6hk6XqlhaHelG0P7K13A5Bk0vpQGjk7vi/JlvSe672xZ+x5v1AWI+V3oBjl9pg6azIkaFe0SXaBKotBlMliVdDDwSjoaGCXtDFJX98CzHwHoDZa8xl7YBw6baGdlahINGBR0BX4edFbsWS5RZLoK1BY66ein16XDi6l7z3Q+aXgutTIt74BMnY5OJ11UdM2vdmlGeF26YVRQj15D40kNOgU91J0uCnoMraDHNDU0/5zoCqjoYOCAKNOAOdNJpkg0faZ5szSNd9Ag0L6sazRIMxapz8dGapmC9pmWDZSlJtP0xdIu96dL1AMiDRgTXYFJosBwO45nnmaSqM2ngadpaetB85w5OuZHnleHnqdFmMwReRrQFboCM0sdMBTq0r8rs72aW4/KJhQ9Q8Ot8+W17kHnM8p6lg8p3UlXkQ4ntSKd7nSTqL1TL8ixUis+v1Ij1V+p3XcSft1jpTnc09+WxoaG/0ttQ5d/p31LNz01BO1a6gk66unQ0pWgc0sdQaeGkmsQ9dQ2lGps9xQ1VANaulINaKmjqqqUr8s2lKprfJp6aqotteRUW7oRXa2UadfUUKoHvW0oVdjQULKwyNCtaSpJHVlUoVRhvW0oVdjcUHJYK1BTi5JoLSxK1C61KIn6WhRPa2FWQU0tSqIuDxs11D7kQQVam2CVdEOvpvpRl49RP0bVjbofCUD6ivqNaOSpQU1H0vZe9GqU2N9FOnPU6el6oQNHvf6EMcQJK55bPUnbmylHw5VGPZ1o6nDNTFJP33LkC0mvp6DooqH6UWu+ff/11991Cf4AEjZBnX82iJUAAAAASUVORK5CYII=');
  }
  &-forecast-status-1{
    width: 14px;
    height: 14px;
    background-image: url(/images/web/icon-forecast-status-1.png);
  }
  &-forecast-status-2{
    width: 14px;
    height: 14px;
    background-image: url(/images/web/icon-forecast-status-2.png);
  }
  &-forecast-status-3{
    width: 14px;
    height: 14px;
    background-image: url(/images/web/icon-forecast-status-3.png);
  }

  &-match-all{
    background-image: url(/images/web/icon_allgame.png);
  }

  &-match-lol{
    background-image: url(/images/web/icon_lol.png);
  }

  &-match-dota2{
    background-image: url(/images/web/icon_dota2.png);
  }

  &-match-csgo{
    background-image: url(/images/web/icon_csgo.png);
  }

  &-match-wzry{
    background-image: url(/images/web/icon_wzry.png);
  }

  &-match-swxf{
    background-image: url(/images/web/icon_swxf.png);
  }

  &-match-other{
    background-image: url(/images/web/icon_other.png);
  }

  &-close{
    width: 24px;
    height: 24px;
    background-image: url(/images/web/icon-close.png);
  }

  &-weixin{
    width: 24px;
    height: 20px;
    background-image: url(/images/web/icon-weixin.png);
  }

  &-rank-default{
    width: 10px;
    height: 12px;
    background-image: url(/images/web/icon-rank-default.png);
  }

  &-rank-up{
    width: 10px;
    height: 12px;
    background-image: url(/images/web/icon-rank-up.png);
  }

  &-rank-down{
    width: 10px;
    height: 12px;
    background-image: url(/images/web/icon-rank-down.png);
  }

  

  &-uparrow {
    width: 20px;
    height: 20px;
    position: relative;
    vertical-align: baseline;
    &::after {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      // border-bottom: 12px solid inherit;
      border-bottom-width: 12px;
      border-bottom-style: solid;
    }
  }

  &-downarrow {
    width: 20px;
    height: 20px;
    position: relative;
    vertical-align: baseline;
    &::after {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      // border-top: 12px solid inherit;
      border-top-width: 12px;
      border-top-style: solid;
    }
  }

  &-avgarrow {
    width: 20px;
    height: 20px;
    position: relative;
    vertical-align: baseline;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 5px;
      width: 100%;
      height: 2px;
    }

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 5px;
      width: 100%;
      height: 2px;
    }
  }

  &-loading{
    width: 32px;
    height: 32px;
    background-image: url(/images/web/loading.gif);
  }

}

.color-eb5359 {

  &.icon-uparrow,
  &.icon-downarrow {
    &::after {
      border-top-color: #eb5359;
      border-bottom-color: #eb5359;
    }
  }

  &.icon-avgarrow {

    &::after,
    &::before {
      background-color: #eb5359;
    }
  }
}

.color-2b9b27 {

  &.icon-uparrow,
  &.icon-downarrow {
    &::after {
      border-top-color: #2b9b27;
      border-bottom-color: #2b9b27;
    }
  }

  &.icon-avgarrow {

    &::after,
    &::before {
      background-color: #2b9b27;
    }
  }
}

.descending{
  i.icon-sort{
    background-image: url(/images/web/inco-home15.png);
  }
}
.ascending{
  i.icon-sort{
    background-image: url(/images/web/inco-home_xia.png);
  }
}

.forecast-status{
  padding-left: 10px;
  width: 50px;
  height: 18px;
  line-height: 18px;
  &.bg-eb5359{
    &::before{
      border-right-color: #eb5359;
    }
  }
  &.bg-3399EE{
    &::before{
      border-right-color: #3399ed;
    }
  }
  &.bg-1a1a1a{
    &::before{
      border-right-color: #1a1a1a;
    }
  }
  &.bg-ccc{
    &::before{
      border-right-color: #ccc;
    }
  }
  &::before{
    content:'';
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-right-width: 8px;
    border-right-style: solid;
    border-bottom: 9px solid transparent;
  }
}

.match_now-con-left-select{


.icon{
  &-match-all{
    background-image: url(/images/web/icon_allgame_hover.png);
  }

  &-match-lol{
    background-image: url(/images/web/icon_lol_hover.png);
  }

  &-match-dota2{
    background-image: url(/images/web/icon_dota2_hover.png);
  }

  &-match-csgo{
    background-image: url(/images/web/icon_csgo_hover.png);
  }

  &-match-wzry{
    background-image: url(/images/web/icon_wzry_hover.png);
  }

  &-match-swxf{
    background-image: url(/images/web/icon_swxf_hover.png);
  }

  &-match-other{
    background-image: url(/images/web/icon_other_hover.png);
  }
}
}