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

.ci-bank:before { content: "\e900"; }

.ci-bulk-payouts:before { content: "\e901"; }

.ci-customers:before { content: "\e902"; } 

.ci-dashboard:before { content: "\e903"; }

.ci-dot:before { content: "\e904"; }

.ci-help-book .path1:before { content: "\e905";color: var(--surface-text-gray-normal); }

.ci-help-book .path2:before { content: "\e906";margin-left: -1em;color: var(--surface-text-staticblack-normal); }

.ci-help-question:before { content: "\e907"; }

.ci-invoices:before { content: "\e908"; }

.ci-my-account:before { content: "\e909"; }

.ci-offers:before { content: "\e90a"; }

.ci-payment-buttons:before { content: "\e90b"; }

.ci-payment-links:before { content: "\e90c"; }

.ci-payment-pages:before { content: "\e90d"; }

.ci-reports:before { content: "\e90e"; }

.ci-routes:before { content: "\e90f"; }

.ci-settings-fill:before { content: "\e910"; }

.ci-settlements:before { content: "\e911"; }

.ci-smart-collect:before { content: "\e912"; }

.ci-subscriptions:before { content: "\e913"; }

.ci-table:before { content: "\e914"; }

.ci-transactions:before { content: "\e915"; }

.ci-x:before { content: "\e916"; }

.ci-app-store:before {
  content: "\e917";
}
.ci-bill:before {
  content: "\e918";
}
.ci-coins:before {
  content: "\e919";
}
.ci-dot-big:before {
  content: "\e91a";
}
.ci-file-zip:before {
  content: "\e91b";
}
.ci-Horizontal-Drag:before {
  content: "\e91c";
}
.ci-mail-open:before {
  content: "\e91d";
}
.ci-menu-dots:before {
  content: "\e91e";
}
.ci-qr-code:before {
  content: "\e91f";
}
.ci-resizer:before {
  content: "\e920";
}
.ci-rupees:before {
  content: "\e921";
}
.ci-slack-i3:before {
  content: "\e922";
}
.ci-stamp:before {
  content: "\e923";
}
.ci-ticket:before {
  content: "\e924";
}

.ci-CSpinner .path1:before {
  content: "\e900";
  color: var(--surface-background-primary-intense);
  opacity: 0.0900;
}
.ci-CSpinner .path2:before {
  content: "\e901";
  margin-left: -1em;
  color: var(--surface-background-primary-intense);
}
.ci-CSpinner .path3:before {
  content: "\e902";
  margin-left: -1em;
  color: var(--surface-background-primary-intense);
}






.ci-CSpinner-primary .path1:before {
  content: "\e900";
  color: var(--surface-background-primary-intense);
  opacity: 0.0900;
}
.ci-CSpinner-primary .path2:before {
  content: "\e901";
  margin-left: -1em;
  color: var(--surface-background-primary-intense);
}
.ci-CSpinner-primary .path3:before {
  content: "\e902";
  margin-left: -1em;
  color: var(--surface-background-primary-intense);
}


.ci-CSpinner-positive .path1:before {
  content: "\e900";
  color: var(--feedback-background-positive-intense);
  opacity: 0.0900;
}
.ci-CSpinner-positive .path2:before {
  content: "\e901";
  margin-left: -1em;
  color: var(--feedback-background-positive-intense);
}
.ci-CSpinner-positive .path3:before {
  content: "\e902";
  margin-left: -1em;
  color: var(--feedback-background-positive-intense);
}


.ci-CSpinner-negative .path1:before {
  content: "\e900";
  color: var(--feedback-background-negative-intense);
  opacity: 0.0900;
}
.ci-CSpinner-negative .path2:before {
  content: "\e901";
  margin-left: -1em;
  color: var(--feedback-background-negative-intense);
}
.ci-CSpinner-negative .path3:before {
  content: "\e902";
  margin-left: -1em;
  color: var(--feedback-background-negative-intense);
}

.ci-CSpinner-notice .path1:before {
  content: "\e900";
  color: var(--feedback-background-notice-intense);
  opacity: 0.0900;
}
.ci-CSpinner-notice .path2:before {
  content: "\e901";
  margin-left: -1em;
  color: var(--feedback-background-notice-intense);
}
.ci-CSpinner-notice .path3:before {
  content: "\e902";
  margin-left: -1em;
  color: var(--feedback-background-notice-intense);
}


.ci-CSpinner-information .path1:before {
  content: "\e900";
  color: var(--feedback-background-information-intense);
  opacity: 0.0900;
}
.ci-CSpinner-information .path2:before {
  content: "\e901";
  margin-left: -1em;
  color: var(--feedback-background-information-intense);
}
.ci-CSpinner-information .path3:before {
  content: "\e902";
  margin-left: -1em;
  color: var(--feedback-background-information-intense);
}


.ci-CSpinner-default .path1:before {
  content: "\e900";
  color: var(--feedback-background-default-intense);
  opacity: 0.0900;
}
.ci-CSpinner-default .path2:before {
  content: "\e901";
  margin-left: -1em;
  color: var(--feedback-background-default-intense);
}
.ci-CSpinner-default .path3:before {
  content: "\e902";
  margin-left: -1em;
  color: var(--feedback-background-default-intense);
}


.ci-CSpinner-white .path1:before {
  content: "\e900";
  color: var(--feedback-background-white-intense);
  opacity: 0.0900;
  animation: spin 2s linear infinite;
}
.ci-CSpinner-white .path2:before {
  content: "\e901";
  margin-left: -1em;
  color: var(--feedback-background-white-intense);
  animation: spin 2s linear infinite;
}
.ci-CSpinner-white .path3:before {
  content: "\e902";
  margin-left: -1em;
  color: var(--feedback-background-white-intense);
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}