// icon
.icon {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  &-base {
    background-image: url(../assets/icon-base.png);
  }
  &-base-act {
    background-image: url(../assets/icon-base-act.png);
  }
  &-user {
    background-image: url(../assets/icon-user.png);
  }
  &-user-act {
    background-image: url(../assets/icon-user-act.png);
  }
  &-business {
    background-image: url(../assets/icon-business.png);
  }
  &-business-act {
    background-image: url(../assets/icon-business-act.png);
  }
  &-invigilation {
    background-image: url(../assets/icon-invigilation.png);
  }
  &-invigilation-act {
    background-image: url(../assets/icon-invigilation-act.png);
  }
  &-warning {
    background-image: url(../assets/icon-warning.png);
  }
  &-warning-act {
    background-image: url(../assets/icon-warning-act.png);
  }

  &-clean {
    background-image: url(../assets/icon-clean.png);
  }
  &-handle {
    background-image: url(../assets/icon-handle.png);
  }
  &-over {
    background-image: url(../assets/icon-over.png);
  }
  &-scan {
    background-image: url(../assets/icon-scan.png);
  }
  &-stop {
    background-image: url(../assets/icon-stop.png);
  }
  &-forbide {
    background-image: url(../assets/icon-forbide.png);
  }
  &-view {
    background-image: url(../assets/icon-view.png);
  }
  &-text {
    background-image: url(../assets/icon-text.png);
  }
  &-audio {
    height: 12px;
    background-image: url(../assets/icon-audio.png);
  }
  &-audio-act {
    height: 12px;
    background-image: url(../assets/icon-audio-act.png);
  }
  &-logout {
    background-image: url(../assets/icon-logout.png);
  }
  &-error {
    background-image: url(../assets/icon-error.png);
  }

  &-reexam {
    background-image: url(../assets/icon-reexam.png);
  }
  &-password {
    background-image: url(../assets/icon-password.png);
  }
  &-seal {
    background-image: url(../assets/icon-seal.png);
  }
  &-upload {
    height: 12px;
    background-image: url(../assets/icon-upload.png);
  }
  &-download {
    height: 12px;
    background-image: url(../assets/icon-download.png);
  }
  &-analysis {
    background-image: url(../assets/icon-analysis.png);
  }
  &-rate {
    background-image: url(../assets/icon-rate.png);
  }
  &-add {
    background-image: url(../assets/icon-add.png);
    width: 12px;
    height: 12px;
  }
  &-copy {
    background-image: url(../assets/icon-copy.png);
  }
  &-ring {
    background-image: url(../assets/icon-ring.png);
  }
  &-right {
    width: 15px;
    height: 12px;
    background-image: url(../assets/icon-right.png);
  }
  &-wrong {
    width: 13px;
    height: 12px;
    background-image: url(../assets/icon-wrong.png);
  }
  &-users {
    height: 12px;
    background-image: url(../assets/icon-users.png);
  }
  &-track {
    width: 16px;
    height: 14px;
    background-image: url(../assets/icon-track.png);
  }
  &-theme {
    width: 16px;
    height: 15px;
    background-image: url(../assets/icon-theme.png);
  }
  &-track-common {
    width: 36px;
    height: 36px;
    background-image: url(../assets/icon-track-common.png);
  }
  &-track-warning {
    width: 36px;
    height: 36px;
    background-image: url(../assets/icon-track-warning.png);
  }
  &-text-message {
    width: 12px;
    height: 12px;
    background-image: url(../assets/icon-text-message.png);
  }
  &-call {
    width: 12px;
    height: 12px;
    background-image: url(../assets/icon-call.png);
  }
  &-media {
    width: 12px;
    height: 12px;
    background-image: url(../assets/icon-media.png);
  }
  &-record {
    width: 12px;
    height: 12px;
    background-image: url(../assets/icon-record.png);
  }
  &-paper-danger {
    width: 12px;
    height: 12px;
    background-image: url(../assets/icon-paper-danger.png);
  }
  &-info-danger {
    width: 12px;
    height: 12px;
    background-image: url(../assets/icon-info-danger.png);
  }
  &-info {
    width: 12px;
    height: 12px;
    background-image: url(../assets/icon-info.png);
  }
  &-success {
    width: 12px;
    height: 12px;
    background-image: url(../assets/icon-success.png);
  }
  &-face {
    width: 12px;
    height: 12px;
    background-image: url(../assets/icon-face.png);
  }
  &-bell {
    width: 12px;
    height: 12px;
    background-image: url(../assets/icon-bell.png);
  }
  &-clock {
    width: 12px;
    height: 12px;
    background-image: url(../assets/icon-clock.png);
  }
  &-clock-danger {
    width: 12px;
    height: 12px;
    background-image: url(../assets/icon-clock-danger.png);
  }
  &-calendar-act {
    background-image: url(../assets/icon-calendar-act.png);
  }
  &-arrow-left {
    width: 32px;
    height: 32px;
    background-image: url(../assets/icon-arrow-left.png);
  }
  &-arrow-right {
    width: 32px;
    height: 32px;
    background-image: url(../assets/icon-arrow-right.png);
  }
  &-person {
    width: 16px;
    height: 14px;
    background-image: url(../assets/icon-person.png);
  }
  &-exam-detail {
    background-image: url(../assets/icon-exam-detail.png);
  }
  &-alarm-clock {
    background-image: url(../assets/icon-alarm-clock.png);
  }
  &-net-break {
    background-image: url(../assets/icon-net-break.png);
  }
  &-full-screen {
    background-image: url(../assets/icon-full-screen.png);
  }
  &-current-step {
    background-image: url(../assets/icon-current-step.png);
  }
  &-arrows-up {
    background-image: url(../assets/icon-arrows-up.png);
  }
  &-arrows-down {
    background-image: url(../assets/icon-arrows-down.png);
  }

  &-call-full {
    background-image: url(../assets/icon-call-full.png);
  }

  &-tip {
    background-image: url(../assets/icon-tip.png);
  }

  &-warn {
    background-image: url(../assets/icon-warn.png);
  }

  &-back {
    background-image: url(../assets/icon-back.png);
  }
  &-student-rate {
    background-image: url(../assets/icon-student-rate.png);
  }

  &-send-text {
    background-image: url(../assets/icon-send-text.png);
    &-active {
      background-image: url(../assets/icon-send-text-light.png);
    }
  }

  &-send-video {
    background-image: url(../assets/icon-send-video.png);
    &-active {
      background-image: url(../assets/icon-send-video-light.png);
    }
  }

  &-sound {
    background-image: url(../assets/icon-sound.png);
    &-active {
      background-image: url(../assets/icon-sound-light.png);
    }
  }

  &-talk {
    background-image: url(../assets/icon-talk.png);
    &-active {
      background-image: url(../assets/icon-talk-light.png);
    }
  }

  &-voice {
    background-image: url(../assets/icon-voice.png);
    &-active {
      background-image: url(../assets/icon-voice-light.png);
    }
  }

  &-full {
    background-image: url(../assets/icon-full.png);
  }

  &-waring {
    background-image: url(../assets/icon-waring.png);
  }
}
