.icons {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(~@images/icons-01.svg);
  vertical-align: sub;
}

.icon-global {
  background-position: -47px -92px;
}

.icon-esb {
  background-position: -96px -90px;
}

.icon-frontSys {
  background-position: -150px -94px;
}

.icon-centerSys {
  background-position: -150px -94px;
}

.icon-centerSys {
  background-position: -201px -94px;
}

.icon-bank {
  background-position: -245px -94px;
}

.icon-safety {
  background-position: -291px -94px;
}

.icon-server {
  background-position: -341px -94px;
}

.icon-storage {
  background-position: -388px -95px;
}

.icon-dr {
  background: url(~@images/icon-doctor.svg) no-repeat;
  background-size: contain;
}

.icon-knowledge {
  background-position: -472px -96px;
}

.icon-message {
  background-position: 0 -137px;
  margin: 0;
}

.icon-help {
  background-position: -30px -137px;
  margin: 0;
}

.icon-system {
  background-position: -54px -137px;
  margin: 0;
}

.icon-overview-setting {
  background-position: -333px -136px;
  margin: 0;
}

.icon-hi {
  height: 50px;
  width: 40px;
  margin: 0;
  background-position: 0px -300px;
}

.icon-word-small {
  height: 30px;
  width: 26px;
  margin: 0;
  background-position: -61px -309px;
}

.icon-community-small {
  height: 30px;
  width: 26px;
  margin: 0;
  background-position: -98px -309px;
}

.icon-start {
  background-position: -193px -138px;
  margin: 0;
}

.icon-pause {
  background-position: -161px -138px;
  margin: 0;
}

.icon-add {
  cursor: pointer;
  width: 60px;
  height: 60px;
  background-position: -143px -295px;
  background-color: #00C2B1;
  border-radius: 30px;
  margin-top: 80px;
}

.icon-word {
  width: 50px;
  height: 50px;
  background-position: 4px -179px;
  margin: 10px 0 0;
}

.icon-word:active {
  background-position: 4px -239px;
}

.icon-community {
  width: 50px;
  height: 50px;
  background-position: -60px -179px;
  margin: 10px 0 0;
}

.icon-community:active {
  background-position: -60px -239px;
}

.icon-conceal {
  width: 50px;
  height: 50px;
  background-position: -191px -177px;
  margin: 10px 0 0;
}

.icon-conceal:active {
  background-position: -191px -237px;
}

.icon-speed {
  width: 50px;
  height: 50px;
  background-position: -125px -179px;
  margin: 10px 0 0;
}

.icon-speed:active {
  background-position: -125px -239px;
}

.icon-info::before {
  content: "\0069";
}

.icon-chart-type {
  margin: 0;
  background-position: -88px -138px;
}

.icon-sortable {
  background-position: -281px -139px;
  margin: 0;
}

.icon-warning-info {
  background-position: -4px -390px;
}

.icon-warning-accept {
  background-position: -60px -390px;
}

.icon-warning-undistribute {
  background-position: -114px -391px;
}

.icon-loading {
  background: url(~@images/throbber.svg);
  display: inline-block;
  border-radius: 50%;
  width: .8em;
  height: .8em;
  vertical-align: center;
}

.packageicons {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
}

@function pad-leading-zero($number) {
  $string: inspect($number);

  @if (str-length($string) == 1) {
    $string: str-insert($string, "0", 1);
  }

  @return $string;
}

@for $i from 0 to 81 {
  $str: pad-leading-zero($i);

  .icon-#{$str} {
    background: url(~@images/appicon/icon-#{$str}.png) no-repeat center;
    background-size: contain;
  }
}

.sharp-bigicon {
  width: 45px;
  height: 54px;
  background: url(~@images/icons-01.svg);
  display: inline-block;
}

.chart-icon {
  display: inline-block;
  width: 60px;
  height: 40px;
  vertical-align: middle;
}

$chart-list: line, bar, pie, area, scatter, metric, raw, gauge, radar, multipleYAxes, regression, funnel, calendar, map, bubble, tagging, tree, treeMap, dashBoard;

@each $chart in $chart-list {
  .icon-#{$chart} {
    border: 1px solid #ddd;
    background: url(~@images/charticon/#{$chart}.svg) no-repeat;
  }
}

.cur-chart-icon {
  border: 1px solid #01c8c1;
}