@font-face {
    font-family: 'vicicons';
    src:  url('../fonts/vicicons.eot?');
    src:  url('../fonts/vicicons.eot?gqq6fs#iefix') format('embedded-opentype'),
      url('../fonts/vicicons.ttf') format('truetype'),
      url('../fonts/vicicons.woff') format('woff'),
      url('../fonts/vicicons.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="vic-"], [class*=" vic-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'vicicons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  

  /*------------------------
    base class definition
-------------------------*/
.ni {
    display: inline-block;
    font: normal normal normal 14px/1 NucleoIcons;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /*------------------------
    change icon size
  -------------------------*/
  .ni-lg {
    font-size: 1.33333333em;
    line-height: 0.75em;
    vertical-align: -15%;
  }
  
  .ni-2x {
    font-size: 2em;
  }
  
  .ni-3x {
    font-size: 3em;
  }
  
  .ni-4x {
    font-size: 4em;
  }
  
  .ni-5x {
    font-size: 5em;
  }
  
  /*----------------------------------
    add a square/circle background
  -----------------------------------*/
  .ni.square,
  .ni.circle {
    padding: 0.33333333em;
    vertical-align: -16%;
    background-color: #eee;
  }
  
  .ni.circle {
    border-radius: 50%;
  }
  
  /*------------------------
    list icons
  -------------------------*/
  .ni-ul {
    padding-left: 0;
    margin-left: 2.14285714em;
    list-style-type: none;
  }
  
  .ni-ul>li {
    position: relative;
  }
  
  .ni-ul>li>.ni {
    position: absolute;
    left: -1.57142857em;
    top: 0.14285714em;
    text-align: center;
  }
  
  .ni-ul>li>.ni.lg {
    top: 0;
    left: -1.35714286em;
  }
  
  .ni-ul>li>.ni.circle,
  .ni-ul>li>.ni.square {
    top: -0.19047619em;
    left: -1.9047619em;
  }

  
/*------------------------
  spinning icons
-------------------------*/
.ni.rotate-180 {
    -webkit-transform: rotate(180deg);
}
.ni.spin {
    -webkit-animation: nc-spin 2s infinite linear;
    -moz-animation: nc-spin 2s infinite linear;
    animation: nc-spin 2s infinite linear;
  }
  
  @-webkit-keyframes nc-spin {
    0% {
      -webkit-transform: rotate(0deg);
    }
  
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  
  @-moz-keyframes nc-spin {
    0% {
      -moz-transform: rotate(0deg);
    }
  
    100% {
      -moz-transform: rotate(360deg);
    }
  }
  
  @keyframes nc-spin {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  

  /* icon list*/
  .vic-write:before {
    content: "\e900";
  }
  .vic-reply:before {
    content: "\e901";
  }
  .vic-reply-all:before {
    content: "\e902";
  }
  .vic-forward:before {
    content: "\e903";
  }
  .vic-search:before {
    content: "\e904";
  }
  .vic-trash:before {
    content: "\e905";
  }
  .vic-user:before {
    content: "\e906";
  }
  .vic-download:before {
    content: "\e907";
  }
  .vic-folder:before {
    content: "\e908";
  }
  .vic-cog:before {
    content: "\e909";
  }
  .vic-eye:before {
    content: "\e90a";
  }
  .vic-printer:before {
    content: "\e90b";
  }
  .vic-bookmark:before {
    content: "\e90c";
  }
  .vic-cross:before {
    content: "\e90d";
  }
  .vic-plus:before {
    content: "\e90e";
  }
  .vic-left:before {
    content: "\e90f";
  }
  .vic-up:before {
    content: "\e910";
  }
  .vic-switch:before {
    content: "\e911";
  }
  .vic-refresh:before {
    content: "\e912";
  }
  .vic-home:before {
    content: "\e913";
  }