@font-face {
  font-family: 'openshift-icon';
  src:url('@{font-path}/openshift-icon.eot');
  src:url('@{font-path}/openshift-icon.eot?#iefix') format('embedded-opentype'),
    url('@{font-path}/openshift-icon.woff') format('woff'),
    url('@{font-path}/openshift-icon.ttf') format('truetype'),
    url('@{font-path}/openshift-icon.svg#openshift-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
  font-family: 'openshift-icon';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"]:before {
*/

.icon-lock, .icon-unlock, .icon-outgoing-link, .icon-arrow-sm-right, .icon-arrow-sm-left, .icon-arrow-sm-down, .icon-arrow-sm-up, .icon-arrow-lg-right, .icon-data-store-part1, .icon-data-store-part2, .icon-non-scalable-part1, .icon-non-scalable-part2, .icon-scalable-part1, .icon-scalable-part2, .icon-gear-lg, .icon-gear-lg-sans-circle, .icon-gear-number-circle, .icon-gear-sm, .icon-gear-sm-sans-circle, .icon-globe, .icon-restart, .icon-cartridge-part1, .icon-cartridge-part2, .icon-ci-arrows, .icon-ci-x, .icon-ci-check, .icon-ci-disabled, .icon-management-part2, .icon-management-part1, .icon-quickstart, .icon-start, .icon-stop, .icon-system-signal-lg, .icon-system-lg, .icon-calendar, .icon-warning-sign, .icon-question-sign, .icon-search, .icon-twitter, .icon-facebook, .icon-google-plus, .icon-info-sign, .icon-bubbles, .icon-code, .icon-angle-down, .icon-angle-up, .icon-angle-right, .icon-angle-left, .icon-plus, .icon-minus, .icon-pencil, .icon-remove-circle, .icon-ban-circle, .icon-ok, .icon-remove, .icon-check, .icon-check-empty, .icon-cloud-upload, .icon-cloud-download, .icon-cloud, .icon-cogs, .icon-download-alt, .icon-bolt, .icon-star-empty, .icon-time, .icon-busy, .icon-list-ol, .icon-app-code, .icon-user, .icon-users, .icon-colocation2, .icon-tasks, .icon-equalizer, .icon-dollar, .icon-euro, .icon-credit, .icon-bug, .icon-domain2, .icon-dyi-hammer, .icon-copy-clipboard, .icon-app-box, .icon-database, .icon-shield, .icon-cartridge-revised, .icon-cartridge-cloud, .icon-cartridge-cloud2, .icon-cartridge-custom {
  font-family: 'openshift-icon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-lock:before {
  content: "\e000";
}
.icon-unlock:before {
  content: "\e001";
}
.icon-outgoing-link:before {
  content: "\e002";
}
.icon-arrow-sm-right:before {
  content: "\e003";
}
.icon-arrow-sm-left:before {
  content: "\e004";
}
.icon-arrow-sm-down:before {
  content: "\e005";
}
.icon-arrow-sm-up:before {
  content: "\e006";
}
.icon-arrow-lg-right:before {
  content: "\e007";
}
.icon-data-store-part1:before {
  content: "\e008";
}
.icon-data-store-part2:before {
  content: "\e009";
}
.icon-non-scalable-part1:before {
  content: "\e010";
}
.icon-non-scalable-part2:before {
  content: "\e011";
}
.icon-scalable-part1:before {
  content: "\e012";
}
.icon-scalable-part2:before {
  content: "\e013";
}
.icon-gear-lg:before {
  content: "\e014";
}
.icon-gear-lg-sans-circle:before {
  content: "\e015";
}
.icon-gear-number-circle:before {
  content: "\e016";
}
.icon-gear-sm:before {
  content: "\e017";
}
.icon-gear-sm-sans-circle:before {
  content: "\e018";
}
.icon-globe:before {
  content: "\e019";
}
.icon-restart:before {
  content: "\e020";
}
.icon-cartridge-part1:before {
  content: "\e021";
}
.icon-cartridge-part2:before {
  content: "\e022";
}
.icon-ci-arrows:before {
  content: "\e023";
}
.icon-ci-x:before {
  content: "\e024";
}
.icon-ci-check:before {
  content: "\e025";
}
.icon-ci-disabled:before {
  content: "\e026";
}
.icon-management-part2:before {
  content: "\e027";
}
.icon-management-part1:before {
  content: "\e028";
}
.icon-quickstart:before {
  content: "\e029";
}
.icon-start:before {
  content: "\e030";
}
.icon-stop:before {
  content: "\e031";
}
.icon-system-signal-lg:before {
  content: "\e032";
}
.icon-system-lg:before {
  content: "\e033";
}
.icon-calendar:before {
  content: "\ee00";
}
.icon-warning-sign:before {
  content: "\ee01";
}
.icon-question-sign:before {
  content: "\ee02";
}
.icon-search:before {
  content: "\ee03";
}
.icon-twitter:before {
  content: "\ee04";
}
.icon-facebook:before {
  content: "\ee05";
}
.icon-google-plus:before {
  content: "\ee06";
}
.icon-info-sign:before {
  content: "\ee07";
}
.icon-bubbles:before {
  content: "\ee08";
}
.icon-code:before {
  content: "\ee10";
}
.icon-angle-down:before {
  content: "\ee12";
}
.icon-angle-up:before {
  content: "\ee13";
}
.icon-angle-right:before {
  content: "\ee14";
}
.icon-angle-left:before {
  content: "\ee15";
}
.icon-plus:before {
  content: "\ee16";
}
.icon-minus:before {
  content: "\ee17";
}
.icon-pencil:before {
  content: "\ee18";
}
.icon-remove-circle:before {
  content: "\ee19";
}
.icon-ban-circle:before {
  content: "\ee20";
}
.icon-ok:before {
  content: "\ee21";
}
.icon-remove:before {
  content: "\ee22";
}
.icon-check:before {
  content: "\ee23";
}
.icon-check-empty:before {
  content: "\ee24";
}
.icon-cloud-upload:before {
  content: "\ee25";
}
.icon-cloud-download:before {
  content: "\ee26";
}
.icon-cloud:before {
  content: "\ee27";
}
.icon-cogs:before {
  content: "\ee28";
}
.icon-download-alt:before {
  content: "\ee29";
}
.icon-bolt:before {
  content: "\ee30";
}
.icon-star-empty:before {
  content: "\ee31";
}
.icon-time:before {
  content: "\ee32";
}
.icon-busy:before {
  content: "\ee33";
}
.icon-list-ol:before {
  content: "\ee34";
}
.icon-app-code:before {
  content: "\ee35";
}
.icon-user:before {
  content: "\ee36";
}
.icon-users:before {
  content: "\ee37";
}
.icon-colocation2:before {
  content: "\ee38";
}
.icon-tasks:before {
  content: "\ee39";
}
.icon-equalizer:before {
  content: "\ee40";
}
.icon-dollar:before {
  content: "\ee41";
}
.icon-euro:before {
  content: "\ee42";
}
.icon-credit:before {
  content: "\ee43";
}
.icon-bug:before {
  content: "\ee44";
}
.icon-domain2:before {
  content: "\ee45";
}
.icon-dyi-hammer:before {
  content: "\ee46";
}
.icon-copy-clipboard:before {
  content: "\ee47";
}
.icon-app-box:before {
  content: "\ee48";
}
.icon-database:before {
  content: "\ee49";
}
.icon-shield:before {
  content: "\ee50";
}
.icon-cartridge-revised:before {
  content: "\ee51";
}
.icon-cartridge-cloud:before {
  content: "\ee52";
}
.icon-cartridge-cloud2:before {
  content: "\ee53";
}
.icon-cartridge-custom:before {
  content: "\ee54";
}


// needed for dual icon alignment
.font-icon-block {
  display: inline-block;
  position: relative;
  .font-icon:nth-child(n+2) {
    position: absolute;
    left: 0;
    top: 0;
    text-shadow: none;
  }
}

.font-icon {
  display: inline-block;
  top: 0;
  &.font-icon-inline  {
    position: relative;
  }
}

.icon-row {
  div:first-child {
    text-align: center;
    width: 30px;
  }
}
