.icon {
  position: absolute; }
  .icon:before, .icon:after {
    content: '';
    position: absolute;
    display: block; }
  .icon i {
    position: absolute; }
    .icon i:before, .icon i:after {
      content: '';
      position: absolute;
      display: block; }

.sync1.icon {
  margin: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: solid 1px #333333;
  background-color: white; }
  .sync1.icon:before, .sync1.icon:after {
    width: 4px;
    height: 1px;
    background-color: #333333;
    z-index: 1; }
  .sync1.icon:before {
    top: 5px;
    left: -4px; }
  .sync1.icon:after {
    top: 6px;
    right: -4px; }
  .sync1.icon i {
    width: 16px;
    height: 6px;
    background-color: white;
    left: -2px;
    top: 3px;
    transform: rotate(-22.5deg); }
    .sync1.icon i:before {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      border: solid 1px #333333;
      left: 4px;
      top: -1px; }
  .sync1.icon.filled i:before {
    background-color: #333333; }

.sync2.icon {
  margin: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: solid 1px #333333;
  background-color: white; }
  .sync2.icon:before, .sync2.icon:after {
    width: 4px;
    height: 1px;
    background-color: #333333;
    z-index: 1; }
  .sync2.icon:before {
    top: 6px;
    left: -4px; }
  .sync2.icon:after {
    top: 5px;
    right: -4px; }
  .sync2.icon i {
    width: 16px;
    height: 6px;
    background-color: white;
    left: -2px;
    top: 3px;
    transform: rotate(22.5deg); }
    .sync2.icon i:before {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      border: solid 1px #333333;
      left: 4px;
      top: -1px; }
  .sync2.icon.filled i:before {
    background-color: #333333; }

.barcode.icon {
  width: 21px;
  height: 21px; }
  .barcode.icon:before {
    width: 1px;
    height: 11px;
    left: 1px;
    top: 5px;
    background-color: #333333;
    box-shadow: 6px 0 0 0 #333333, 12px 0 0 0 #333333, 14px 0 0 0 #333333; }
  .barcode.icon:after {
    width: 2px;
    height: 11px;
    left: 3px;
    top: 5px;
    background-color: #333333;
    box-shadow: 6px 0 0 0 #333333, 15px 0 0 0 #333333; }

.barcode2.icon {
  width: 21px;
  height: 21px; }
  .barcode2.icon:before {
    width: 1px;
    height: 8px;
    left: 1px;
    top: 5px;
    background-color: #333333;
    box-shadow: 2px 0 0 0 #333333, 3px 0 0 0 #333333, 6px 0 0 0 #333333, 8px 0 0 0 #333333, 9px 0 0 0 #333333, 12px 0 0 0 #333333, 14px 0 0 0 #333333, 17px 0 0 0 #333333, 18px 0 0 0 #333333; }
  .barcode2.icon:after {
    width: 1px;
    height: 2px;
    left: 1px;
    top: 14px;
    background-color: #333333;
    box-shadow: 2px 0 0 0 #333333, 3px 0 0 0 #333333, 6px 0 0 0 #333333, 8px 0 0 0 #333333, 9px 0 0 0 #333333, 12px 0 0 0 #333333, 14px 0 0 0 #333333, 17px 0 0 0 #333333, 18px 0 0 0 #333333; }

.pill.icon {
  margin: 1px 6px;
  width: 7px;
  height: 17px;
  border-radius: 4px;
  border: solid 1px #333333; }
  .pill.icon:before {
    width: 7px;
    height: 9px;
    border-radius: 3px 3px 0 0;
    background-color: #333333; }

.pill2.icon {
  margin: 1px 6px;
  width: 7px;
  height: 17px;
  border-radius: 4px;
  border: solid 1px #333333; }
  .pill2.icon:before {
    width: 7px;
    height: 9px;
    top: 8px;
    border-radius: 0 0 3px 3px;
    background-color: #333333; }

.alarm.icon {
  width: 13px;
  height: 13px;
  border: solid 1px #333333;
  border-radius: 50%;
  margin: 3px; }
  .alarm.icon:before, .alarm.icon:after {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    top: -2px; }
  .alarm.icon:before {
    left: -2px;
    border-left: solid 1px #333333;
    border-top: solid 1px #333333;
    border-right: solid 1px transparent;
    border-bottom: solid 1px transparent; }
  .alarm.icon:after {
    right: -2px;
    border-left: solid 1px transparent;
    border-top: solid 1px #333333;
    border-right: solid 1px #333333;
    border-bottom: solid 1px transparent; }
  .alarm.icon i {
    width: 3px;
    height: 4px;
    border-left: solid 1px #333333;
    border-bottom: solid 1px #333333;
    top: 2px;
    left: 6px; }
    .alarm.icon i:before, .alarm.icon i:after {
      width: 1px;
      height: 3px;
      background-color: #333333; }
    .alarm.icon i:before {
      left: -7px;
      top: 11px;
      transform-origin: right center;
      transform: rotate(45deg); }
    .alarm.icon i:after {
      left: 5px;
      top: 11px;
      transform-origin: left center;
      transform: rotate(-45deg); }
  .alarm.icon.filled {
    background-color: #333333; }
    .alarm.icon.filled i {
      border-color: white; }

.syringe {
  width: 5px;
  height: 12px;
  border: solid 1px #333333;
  border-radius: 0 0 3px 3px;
  margin: 4px 7px;
  transform: rotate(45deg); }
  .syringe:before {
    width: 1px;
    height: 4px;
    background-color: #333333;
    left: 2px;
    bottom: -5px; }
  .syringe i {
    width: 3px;
    height: 3px;
    border-left: solid 1px #333333;
    border-right: solid 1px #333333;
    top: -4px; }
    .syringe i:before {
      width: 7px;
      height: 1px;
      background-color: #333333;
      left: -2px;
      top: -1px; }
    .syringe i:after {
      width: 11px;
      height: 1px;
      background-color: #333333;
      left: -4px;
      bottom: -1px; }
  .syringe.filled {
    background-color: #333333; }

.minusFront.icon {
  margin-left: 2px;
  margin-top: 2px;
  width: 10px;
  height: 10px;
  border: solid 1px #333333; }
  .minusFront.icon:before {
    width: 10px;
    height: 10px;
    border: dotted 1px #333333;
    left: 4px;
    top: 4px; }
  .minusFront.icon:after {
    width: 6px;
    height: 6px;
    border-top: solid 1px #333333;
    border-left: solid 1px #333333;
    background-color: white;
    right: -1px;
    bottom: -1px; }
  .minusFront.icon.filled {
    background-color: #333333; }

.unite.icon {
  margin-left: 2px;
  margin-top: 2px;
  width: 10px;
  height: 10px;
  border: solid 1px #333333; }
  .unite.icon:before {
    width: 10px;
    height: 10px;
    border: solid 1px #333333;
    left: 4px;
    top: 4px; }
  .unite.icon:after {
    width: 5px;
    height: 5px;
    border: solid 1px white;
    right: -1px;
    bottom: -1px; }
  .unite.icon.filled {
    background-color: #333333; }
    .unite.icon.filled:before, .unite.icon.filled:after {
      background-color: #333333; }
    .unite.icon.filled:after {
      border: solid 1px #333333; }

.intersect.icon {
  margin-left: 2px;
  margin-top: 2px;
  width: 10px;
  height: 10px;
  border: dotted 1px #333333; }
  .intersect.icon:before {
    width: 10px;
    height: 10px;
    border: dotted 1px #333333;
    left: 4px;
    top: 4px; }
  .intersect.icon:after {
    width: 5px;
    height: 5px;
    border: solid 1px #333333;
    right: -1px;
    bottom: -1px; }
  .intersect.icon.filled:after {
    background-color: #333333; }

.exclude.icon {
  margin-left: 2px;
  margin-top: 2px;
  width: 10px;
  height: 10px;
  border: solid 1px #333333; }
  .exclude.icon:before {
    width: 10px;
    height: 10px;
    border: solid 1px #333333;
    left: 4px;
    top: 4px; }
  .exclude.icon:after {
    width: 5px;
    height: 5px;
    background-color: white;
    border: dotted 1px #333333;
    right: -1px;
    bottom: -1px; }
  .exclude.icon.filled {
    background-color: #333333; }
    .exclude.icon.filled:before {
      background-color: #333333; }
    .exclude.icon.filled:after {
      background-color: white; }

.glasses.icon {
  margin-left: 8px;
  margin-top: 9px;
  width: 3px;
  height: 3px;
  border-top: solid 1px #333333;
  border-radius: 50%;
  border-right: solid 1px transparent;
  border-bottom: solid 1px transparent;
  border-left: solid 1px transparent; }
  .glasses.icon:before, .glasses.icon:after {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: solid 1px #333333;
    top: -3px; }
  .glasses.icon:before {
    left: -7px;
    box-shadow: -4px 0 0 -3.5px #333333, -4.5px 0 0 -3.5px #333333, -5px 0 0 -3.5px #333333; }
  .glasses.icon:after {
    right: -7px;
    box-shadow: 4px 0 0 -3.5px #333333, 4.5px 0 0 -3.5px #333333, 5px 0 0 -3.5px #333333; }
  .glasses.icon.filled:before, .glasses.icon.filled:after {
    background-color: #333333; }

.sunGlasses.icon {
  margin-left: 9px;
  margin-top: 8px;
  width: 3px;
  height: 1px;
  background-color: #333333; }
  .sunGlasses.icon:before, .sunGlasses.icon:after {
    width: 8px;
    height: 6px;
    border: solid 1px #333333;
    top: -1px; }
  .sunGlasses.icon:before {
    border-radius: 3px 2px 6px 4px;
    left: -9px; }
  .sunGlasses.icon:after {
    border-radius: 2px 3px 4px 6px;
    right: -9px; }
  .sunGlasses.icon.filled:before, .sunGlasses.icon.filled:after {
    background-color: #333333; }

.beard.icon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 5px 8px 0 0 #333333, 10px 8px 0 0 #333333; }
  .beard.icon:before {
    border: 0 solid transparent;
    border-bottom: 6px solid #333333;
    border-radius: 0 0 0 100%;
    width: 7px;
    height: 4px;
    left: 1px;
    top: 4px;
    transform-origin: right 7px;
    transform: rotate(-40deg); }
  .beard.icon:after {
    border: 0 solid transparent;
    border-bottom: 6px solid #333333;
    border-radius: 0 0 100% 0;
    width: 7px;
    height: 4px;
    left: 13px;
    top: 4px;
    transform-origin: left 7px;
    transform: rotate(40deg); }
  .beard.icon.filled i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    box-shadow: 6px 9px 0 0 white, 11px 9px 0 0 white;
    z-index: 2; }
    .beard.icon.filled i:before {
      border: 0 solid transparent;
      border-bottom: 4px solid white;
      border-radius: 0 0 0 100%;
      width: 6px;
      height: 3px;
      left: 2px;
      top: 6px;
      transform-origin: right 5px;
      transform: rotate(-40deg); }
    .beard.icon.filled i:after {
      border: 0 solid transparent;
      border-bottom: 4px solid white;
      border-radius: 0 0 100% 0;
      width: 6px;
      height: 3px;
      left: 13px;
      top: 6px;
      transform-origin: left 5px;
      transform: rotate(40deg); }

.bowTie.icon {
  margin-left: 1px;
  margin-top: 5px;
  width: 19px;
  height: 11px; }
  .bowTie.icon:before {
    width: 5px;
    height: 5px;
    border-left: solid 7px #333333;
    border-right: solid 7px #333333;
    border-top: solid 3px transparent;
    border-bottom: solid 3px transparent; }
  .bowTie.icon:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 5px;
    border: solid 1px #333333;
    border-radius: 50%;
    background-color: white; }
  .bowTie.icon.filled:after {
    background-color: #333333; }

.tie.icon {
  margin-left: 7px;
  margin-top: 1px;
  width: 4px;
  height: 1px;
  border-top: solid 4px #333333;
  border-right: solid 2px transparent;
  border-bottom: solid 11px #333333;
  border-left: solid 2px transparent; }
  .tie.icon:before {
    top: 12px;
    left: -2px;
    width: 0;
    height: 0;
    border-top: solid 3px #333333;
    border-right: solid 4px transparent;
    border-bottom: solid 0px transparent;
    border-left: solid 4px transparent; }
  .tie.icon i {
    left: 0px;
    top: -3px;
    width: 2px;
    height: 0;
    border-top: solid 2px white;
    border-right: solid 1px transparent;
    border-left: solid 1px transparent; }
    .tie.icon i:before {
      left: -2px;
      top: 3px;
      width: 2px;
      height: 0;
      border-bottom: solid 10px white;
      border-right: solid 2px transparent;
      border-left: solid 2px transparent; }
    .tie.icon i:after {
      left: -2px;
      top: 13px;
      width: 0;
      height: 0;
      border-top: solid 2px white;
      border-right: solid 3px transparent;
      border-left: solid 3px transparent; }

.tieFilled.icon {
  margin-left: 7px;
  margin-top: 1px;
  width: 4px;
  height: 1px;
  border-top: solid 4px #333333;
  border-right: solid 2px transparent;
  border-bottom: solid 11px #333333;
  border-left: solid 2px transparent; }
  .tieFilled.icon:before {
    top: 12px;
    left: -2px;
    width: 0;
    height: 0;
    border-top: solid 3px #333333;
    border-right: solid 4px transparent;
    border-bottom: solid 0px transparent;
    border-left: solid 4px transparent; }

.shirt.icon {
  margin-left: 1px;
  margin-top: 3px;
  width: 17px;
  height: 4px;
  border: solid 1px #333333;
  border-radius: 1px; }
  .shirt.icon:before {
    top: -1px;
    left: 5px;
    width: 5px;
    height: 3px;
    border-left: solid 1px #333333;
    border-right: solid 1px #333333;
    border-bottom: solid 1px #333333;
    border-radius: 0 0 3px 3px;
    background-color: white; }
  .shirt.icon:after {
    left: 3px;
    top: 4px;
    width: 9px;
    height: 9px;
    border-right: solid 1px #333333;
    border-bottom: solid 1px #333333;
    border-left: solid 1px #333333;
    border-radius: 0 0 1px 1px;
    background-color: white; }
  .shirt.icon.filled {
    background-color: #333333; }
    .shirt.icon.filled:after {
      background-color: #333333; }

.clothesButton.icon {
  margin-left: 2px;
  margin-top: 2px;
  width: 11px;
  height: 11px;
  border: double 3px #333333;
  border-radius: 50%; }
  .clothesButton.icon:before, .clothesButton.icon:after {
    width: 1px;
    height: 1px;
    border-radius: 50%;
    border: solid 1px #333333; }
  .clothesButton.icon:before {
    left: 2px;
    top: 2px; }
  .clothesButton.icon:after {
    left: 6px;
    top: 6px; }
  .clothesButton.icon.filled {
    margin-left: 1px;
    margin-top: 1px;
    width: 13px;
    height: 13px;
    border: double 3px white;
    background-color: #333333; }
    .clothesButton.icon.filled:before, .clothesButton.icon.filled:after {
      border: solid 1px white; }
    .clothesButton.icon.filled:before {
      left: 3px;
      top: 3px; }
    .clothesButton.icon.filled:after {
      left: 7px;
      top: 7px; }

.bankNote.icon {
  margin-left: 2px;
  margin-top: 8px;
  width: 15px;
  height: 8px;
  border: solid 1px #333333;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 8px;
  color: #333333;
  line-height: 10px;
  text-align: center; }
  .bankNote.icon:before {
    left: 1px;
    top: -3px;
    width: 13px;
    height: 1px;
    background-color: #333333; }
  .bankNote.icon:after {
    left: 3px;
    top: -5px;
    width: 9px;
    height: 1px;
    background-color: #333333; }
  .bankNote.icon.filled {
    background-color: #333333;
    color: white; }

.dashboard.icon {
  margin-left: 2px;
  margin-top: 4px;
  width: 15px;
  height: 11px;
  border-radius: 8px 8px 4px 4px;
  border-left: solid 1px #333333;
  border-top: solid 1px #333333;
  border-right: solid 1px #333333;
  border-bottom: solid 1px #333333; }
  .dashboard.icon:before {
    width: 1px;
    height: 4px;
    background-color: #333333;
    left: 7px;
    top: 3px; }
  .dashboard.icon:after {
    width: 1px;
    height: 1px;
    border: solid 1px #333333;
    border-radius: 50%;
    left: 6px;
    top: 6px;
    box-shadow: -7px 0 0 -1px #333333, 0 -7px 0 -1px #333333, 7px 0 0 -1px #333333; }
  .dashboard.icon.filled {
    background-color: #333333; }
    .dashboard.icon.filled:before {
      background-color: white; }
    .dashboard.icon.filled:after {
      border-color: white;
      box-shadow: -7px 0 0 -1px white, -8px 0 0 -1px white, 0 -7px 0 -1px white, 0 -8px 0 -1px white, 7px 0 0 -1px white, 8px 0 0 -1px white; }

.dashboardLow.icon {
  margin-left: 2px;
  margin-top: 4px;
  width: 15px;
  height: 11px;
  border-radius: 8px 8px 4px 4px;
  border-left: solid 1px #333333;
  border-top: solid 1px #333333;
  border-right: solid 1px #333333;
  border-bottom: solid 1px #333333; }
  .dashboardLow.icon:before {
    width: 1px;
    height: 4px;
    background-color: #333333;
    left: 7px;
    top: 3px;
    transform-origin: center 5px;
    transform: rotate(-45deg); }
  .dashboardLow.icon:after {
    width: 1px;
    height: 1px;
    border: solid 1px #333333;
    border-radius: 50%;
    left: 6px;
    top: 6px;
    box-shadow: -7px 0 0 -1px #333333, 0 -7px 0 -1px #333333, 7px 0 0 -1px #333333; }
  .dashboardLow.icon.filled {
    background-color: #333333; }
    .dashboardLow.icon.filled:before {
      background-color: white; }
    .dashboardLow.icon.filled:after {
      border-color: white;
      box-shadow: -7px 0 0 -1px white, -8px 0 0 -1px white, 0 -7px 0 -1px white, 0 -8px 0 -1px white, 7px 0 0 -1px white, 8px 0 0 -1px white; }

.dashboardHigh.icon {
  margin-left: 2px;
  margin-top: 4px;
  width: 15px;
  height: 11px;
  border-radius: 8px 8px 4px 4px;
  border-left: solid 1px #333333;
  border-top: solid 1px #333333;
  border-right: solid 1px #333333;
  border-bottom: solid 1px #333333; }
  .dashboardHigh.icon:before {
    width: 1px;
    height: 4px;
    background-color: #333333;
    left: 7px;
    top: 3px;
    transform-origin: center 5px;
    transform: rotate(45deg); }
  .dashboardHigh.icon:after {
    width: 1px;
    height: 1px;
    border: solid 1px #333333;
    border-radius: 50%;
    left: 6px;
    top: 6px;
    box-shadow: -7px 0 0 -1px #333333, 0 -7px 0 -1px #333333, 7px 0 0 -1px #333333; }
  .dashboardHigh.icon.filled {
    background-color: #333333; }
    .dashboardHigh.icon.filled:before {
      background-color: white; }
    .dashboardHigh.icon.filled:after {
      border-color: white;
      box-shadow: -7px 0 0 -1px white, -8px 0 0 -1px white, 0 -7px 0 -1px white, 0 -8px 0 -1px white, 7px 0 0 -1px white, 8px 0 0 -1px white; }

.verticalAlignCenter.icon {
  margin-left: 2px;
  margin-top: 10px;
  width: 17px;
  height: 1px;
  background-color: #333333; }
  .verticalAlignCenter.icon:before {
    width: 4px;
    height: 13px;
    border: solid 1px #333333;
    left: 2px;
    top: -7px;
    border-radius: 1px; }
  .verticalAlignCenter.icon:after {
    width: 4px;
    height: 9px;
    border: solid 1px #333333;
    right: 2px;
    top: -5px;
    border-radius: 1px; }
  .verticalAlignCenter.icon.halfFilled:after {
    background-color: #333333; }
  .verticalAlignCenter.icon.filled:before, .verticalAlignCenter.icon.filled:after {
    background-color: #333333; }

.verticalAlignTop.icon {
  margin-left: 2px;
  margin-top: 2px;
  width: 17px;
  height: 1px;
  background-color: #333333; }
  .verticalAlignTop.icon:before {
    width: 4px;
    height: 13px;
    border: solid 1px #333333;
    left: 2px;
    top: 2px;
    border-radius: 1px; }
  .verticalAlignTop.icon:after {
    width: 4px;
    height: 9px;
    border: solid 1px #333333;
    right: 2px;
    top: 2px;
    border-radius: 1px; }
  .verticalAlignTop.icon.halfFilled:after {
    background-color: #333333; }
  .verticalAlignTop.icon.filled:before, .verticalAlignTop.icon.filled:after {
    background-color: #333333; }

.verticalAlignBottom.icon {
  margin-left: 2px;
  margin-top: 18px;
  width: 17px;
  height: 1px;
  background-color: #333333; }
  .verticalAlignBottom.icon:before {
    width: 4px;
    height: 13px;
    border: solid 1px #333333;
    left: 2px;
    bottom: 2px;
    border-radius: 1px; }
  .verticalAlignBottom.icon:after {
    width: 4px;
    height: 9px;
    border: solid 1px #333333;
    right: 2px;
    bottom: 2px;
    border-radius: 1px; }
  .verticalAlignBottom.icon.halfFilled:after {
    background-color: #333333; }
  .verticalAlignBottom.icon.filled:before, .verticalAlignBottom.icon.filled:after {
    background-color: #333333; }

.horizontalAlignCenter.icon {
  margin-left: 10px;
  margin-top: 2px;
  width: 1px;
  height: 17px;
  background-color: #333333; }
  .horizontalAlignCenter.icon:before {
    width: 13px;
    height: 4px;
    border: solid 1px #333333;
    left: -7px;
    bottom: 2px;
    border-radius: 1px; }
  .horizontalAlignCenter.icon:after {
    width: 9px;
    height: 4px;
    border: solid 1px #333333;
    left: -5px;
    top: 2px;
    border-radius: 1px; }
  .horizontalAlignCenter.icon.halfFilled:after {
    background-color: #333333; }
  .horizontalAlignCenter.icon.filled:before, .horizontalAlignCenter.icon.filled:after {
    background-color: #333333; }

.horizontalAlignLeft.icon {
  margin-left: 2px;
  margin-top: 2px;
  width: 1px;
  height: 17px;
  background-color: #333333; }
  .horizontalAlignLeft.icon:before {
    width: 13px;
    height: 4px;
    border: solid 1px #333333;
    left: 2px;
    bottom: 2px;
    border-radius: 1px; }
  .horizontalAlignLeft.icon:after {
    width: 9px;
    height: 4px;
    border: solid 1px #333333;
    left: 2px;
    top: 2px;
    border-radius: 1px; }
  .horizontalAlignLeft.icon.halfFilled:after {
    background-color: #333333; }
  .horizontalAlignLeft.icon.filled:before, .horizontalAlignLeft.icon.filled:after {
    background-color: #333333; }

.horizontalAlignRight.icon {
  margin-left: 18px;
  margin-top: 2px;
  width: 1px;
  height: 17px;
  background-color: #333333; }
  .horizontalAlignRight.icon:before {
    width: 13px;
    height: 4px;
    border: solid 1px #333333;
    right: 2px;
    bottom: 2px;
    border-radius: 1px; }
  .horizontalAlignRight.icon:after {
    width: 9px;
    height: 4px;
    border: solid 1px #333333;
    right: 2px;
    top: 2px;
    border-radius: 1px; }
  .horizontalAlignRight.icon.halfFilled:after {
    background-color: #333333; }
  .horizontalAlignRight.icon.filled:before, .horizontalAlignRight.icon.filled:after {
    background-color: #333333; }

.hammerFilled.icon {
  margin-left: 4px;
  margin-top: 0px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #333333;
  transform-origin: center 10.5px;
  transform: rotate(-45deg); }
  .hammerFilled.icon:before {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    left: -13px;
    box-shadow: 13px -9px 0 0 white, 13px 9px 0 0 white; }
  .hammerFilled.icon:after {
    width: 3px;
    height: 21px;
    border-radius: 1px;
    background-color: #333333;
    left: 5px; }

.hammer.icon {
  margin-left: 4px;
  margin-top: 0px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border-left: solid 1px #333333;
  border-top: solid 1px transparent;
  border-right: solid 1px #333333;
  border-bottom: solid 1px transparent;
  transform-origin: center 10.5px;
  transform: rotate(-45deg); }
  .hammer.icon:before {
    left: -1px;
    top: -9px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border-left: solid 1px transparent;
    border-top: solid 1px transparent;
    border-right: solid 1px transparent;
    border-bottom: solid 1px #333333; }
  .hammer.icon:after {
    left: -1px;
    top: 7px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border-left: solid 1px transparent;
    border-top: solid 1px #333333;
    border-right: solid 1px transparent;
    border-bottom: solid 1px transparent; }
  .hammer.icon i {
    width: 1px;
    height: 4px;
    border-left: solid 1px #333333;
    border-top: solid 1px #333333;
    border-right: solid 1px #333333;
    border-radius: 1px 1px 0 0;
    left: 4px;
    top: -1px; }
    .hammer.icon i:after {
      width: 1px;
      height: 11px;
      border-left: solid 1px #333333;
      border-bottom: solid 1px #333333;
      border-right: solid 1px #333333;
      border-radius: 0 0 1px 1px;
      left: -1px;
      top: 8px; }

.wrenchFilled.icon {
  margin-left: 5px;
  margin-top: 0px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #333333;
  transform-origin: center 10.5px;
  transform: rotate(-45deg); }
  .wrenchFilled.icon:after {
    width: 0;
    height: 0;
    border-radius: 0 0 1px 1px;
    background-color: #333333;
    border-left: solid 1px transparent;
    border-right: solid 1px transparent;
    border-top: solid 1px white;
    border-bottom: solid 1px transparent;
    left: 4px;
    top: 4px; }
  .wrenchFilled.icon:before {
    width: 2px;
    height: 5px;
    background-color: white;
    left: 4px;
    border-radius: 0 0 1px 1px;
    box-shadow: 0 15px 0px 1px #333333, 0 11px 0px 1px #333333, 0 8px 0px 1px #333333; }

.wrench.icon {
  margin-left: 5px;
  margin-top: 0px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: solid 1px #333333;
  transform-origin: center 10.5px;
  transform: rotate(-45deg); }
  .wrench.icon:before {
    top: -1px;
    left: 2px;
    width: 2px;
    height: 5px;
    background-color: white;
    border-radius: 1px 1px 2px 2px;
    border-left: solid 1px #333333;
    border-right: solid 1px #333333;
    border-bottom: solid 1px #333333; }
  .wrench.icon:after {
    top: 8px;
    left: 2px;
    width: 2px;
    height: 11px;
    background-color: white;
    border-radius: 0 0 2px 2px;
    border-left: solid 1px #333333;
    border-right: solid 1px #333333;
    border-bottom: solid 1px #333333; }

.sorting.icon {
  margin-left: 10px;
  margin-top: 2px;
  height: 17px;
  width: 8px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 8px;
  color: #333333;
  word-wrap: break-word;
  text-align: center;
  line-height: 9px; }
  .sorting.icon:before {
    width: 1px;
    height: 15px;
    background-color: #333333;
    left: -5px;
    top: 1px; }
  .sorting.icon:after {
    width: 2px;
    height: 2px;
    border-top: solid 1px #333333;
    border-right: solid 1px #333333;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    left: -6px;
    top: 13px; }

.compass.icon {
  margin-left: 2px;
  margin-top: 2px;
  width: 14px;
  height: 14px;
  border: solid 1px #333333;
  border-radius: 50%;
  transform: rotate(30deg); }
  .compass.icon:before {
    left: 4px;
    border-left: solid 3px transparent;
    border-bottom: solid 7px #333333;
    border-right: solid 3px transparent; }
  .compass.icon:after {
    left: 5px;
    top: 2px;
    border-left: solid 2px transparent;
    border-bottom: solid 5px white;
    border-right: solid 2px transparent; }
  .compass.icon i {
    left: 4px;
    top: 7px;
    border-left: solid 3px transparent;
    border-top: solid 7px #333333;
    border-right: solid 3px transparent;
    z-index: 2; }
  .compass.icon.filled {
    background-color: #333333; }
    .compass.icon.filled:before {
      border-bottom: solid 7px white; }
    .compass.icon.filled:after {
      border-bottom: solid 5px #333333; }
    .compass.icon.filled i {
      border-top: solid 7px white; }

.moveDown {
  margin-left: 2px;
  margin-top: 17px;
  width: 16px;
  height: 2px;
  background-color: #333333; }
  .moveDown:before {
    width: 2px;
    height: 11px;
    top: -15px;
    left: 7px;
    background-color: #333333; }
  .moveDown:after {
    width: 0;
    height: 0;
    left: 5px;
    top: -5px;
    border-top: solid 3px #333333;
    border-right: solid 3px transparent;
    border-bottom: solid 3px transparent;
    border-left: solid 3px transparent; }

.moveUp {
  margin-left: 2px;
  margin-top: 2px;
  width: 16px;
  height: 2px;
  background-color: #333333; }
  .moveUp:before {
    width: 2px;
    height: 11px;
    top: 6px;
    left: 7px;
    background-color: #333333; }
  .moveUp:after {
    width: 0;
    height: 0;
    left: 5px;
    top: 1px;
    border-top: solid 3px transparent;
    border-right: solid 3px transparent;
    border-bottom: solid 3px #333333;
    border-left: solid 3px transparent; }

.moveLeft {
  margin-left: 2px;
  margin-top: 2px;
  width: 2px;
  height: 16px;
  background-color: #333333; }
  .moveLeft:before {
    width: 11px;
    height: 2px;
    top: 7px;
    left: 6px;
    background-color: #333333; }
  .moveLeft:after {
    width: 0;
    height: 0;
    left: 1px;
    top: 5px;
    border-top: solid 3px transparent;
    border-right: solid 3px #333333;
    border-bottom: solid 3px transparent;
    border-left: solid 3px transparent; }

.moveRight {
  margin-left: 17px;
  margin-top: 2px;
  width: 2px;
  height: 16px;
  background-color: #333333; }
  .moveRight:before {
    width: 11px;
    height: 2px;
    top: 7px;
    left: -15px;
    background-color: #333333; }
  .moveRight:after {
    width: 0;
    height: 0;
    left: -5px;
    top: 5px;
    border-top: solid 3px transparent;
    border-right: solid 3px transparent;
    border-bottom: solid 3px transparent;
    border-left: solid 3px #333333; }

.moveHorizontalCenter {
  margin-left: 9px;
  margin-top: 2px;
  width: 2px;
  height: 16px;
  background-color: #333333; }
  .moveHorizontalCenter:before {
    width: 12px;
    height: 2px;
    top: 7px;
    left: -8px;
    border-left: solid 3px #333333;
    border-right: solid 3px #333333; }
  .moveHorizontalCenter:after {
    width: 6px;
    height: 0;
    left: -5px;
    top: 5px;
    border-top: solid 3px transparent;
    border-right: solid 3px #333333;
    border-bottom: solid 3px transparent;
    border-left: solid 3px #333333; }

.moveVerticalCenter {
  margin-left: 2px;
  margin-top: 9px;
  width: 16px;
  height: 2px;
  background-color: #333333; }
  .moveVerticalCenter:before {
    width: 2px;
    height: 12px;
    top: -8px;
    left: 7px;
    border-top: solid 3px #333333;
    border-bottom: solid 3px #333333; }
  .moveVerticalCenter:after {
    width: 0;
    height: 6px;
    left: 5px;
    top: -5px;
    border-top: solid 3px #333333;
    border-right: solid 3px transparent;
    border-bottom: solid 3px #333333;
    border-left: solid 3px transparent; }

.insertPages.icon {
  margin-left: 3px;
  margin-top: 2px;
  width: 13px;
  height: 6px;
  border-right: solid 1px #333333;
  border-bottom: solid 1px #333333;
  border-left: solid 1px #333333;
  border-radius: 0 0 1px 1px; }
  .insertPages.icon:before {
    left: -1px;
    top: 10px;
    width: 13px;
    height: 6px;
    border-top: solid 1px #333333;
    border-left: solid 1px #333333;
    border-right: solid 1px #333333;
    border-radius: 1px 1px 0 0; }
  .insertPages.icon:after {
    width: 17px;
    height: 0;
    left: -2px;
    top: 8px;
    border-top: dotted 1px #333333; }
  .insertPages.icon.filled {
    background-color: #333333; }
    .insertPages.icon.filled:before {
      background-color: #333333; }

.insert {
  margin-left: 4px;
  margin-top: 18px;
  width: 14px;
  height: 1px;
  background-color: #333333; }
  .insert:before {
    width: 4px;
    height: 4px;
    border-left: solid 1px #333333;
    border-bottom: solid 1px #333333;
    top: -7px; }
  .insert:after {
    width: 5px;
    height: 12px;
    border-left: solid 1px #333333;
    border-top: solid 1px #333333;
    border-right: solid 1px #333333;
    top: -20px;
    transform-origin: left bottom;
    transform: rotate(45deg); }
  .insert.filled:before, .insert.filled:after {
    background-color: #333333; }

.board.icon {
  margin-left: 3px;
  margin-top: 5px;
  width: 13px;
  height: 8px;
  border-radius: 2px;
  border: solid 1px #333333;
  background-color: white; }
  .board.icon:before, .board.icon:after {
    width: 1px;
    height: 17px;
    background-color: #333333;
    left: 6px;
    top: -4px;
    z-index: -1; }
  .board.icon:before {
    transform-origin: right top;
    transform: skew(-21deg); }
  .board.icon:after {
    transform-origin: left top;
    transform: skew(21deg); }
  .board.icon.filled {
    background-color: #333333;
    border: solid 1px white; }

.podium.icon {
  margin-left: 7px;
  margin-top: 3px;
  width: 5px;
  height: 13px;
  border: solid 1px #333333; }
  .podium.icon:before {
    left: -7px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid 1px #333333; }
  .podium.icon:after {
    left: 5px;
    top: 5px;
    width: 5px;
    height: 7px;
    border: solid 1px #333333; }
  .podium.icon.filled {
    margin-left: 8px;
    margin-top: 4px;
    background-color: #333333;
    border: none; }
    .podium.icon.filled:before {
      top: 4px;
      left: -6px;
      background-color: #333333;
      border: none; }
    .podium.icon.filled:after {
      top: 6px;
      left: 6px;
      background-color: #333333;
      border: none; }

.socket.icon {
  margin-left: 1px;
  margin-top: 3px;
  width: 17px;
  height: 13px;
  border: solid 1px #333333;
  border-radius: 7px; }
  .socket.icon:before {
    left: 4px;
    top: 3px;
    width: 5px;
    height: 3px;
    border-left: solid 2px #333333;
    border-right: solid 2px #333333; }
  .socket.icon:after {
    left: 7px;
    top: 8px;
    width: 3px;
    height: 3px;
    background-color: #333333;
    border-radius: 50% 50% 0 0; }
  .socket.icon.filled {
    background-color: #333333; }
    .socket.icon.filled:before {
      width: 7px;
      left: 4px;
      border-left: solid 1px white;
      border-right: solid 1px white; }
    .socket.icon.filled:after {
      background-color: white; }

.barbell {
  margin-left: 1px;
  margin-top: 10px;
  width: 19px;
  height: 1px;
  background-color: #333333; }
  .barbell:before, .barbell:after {
    top: -6px;
    height: 11px;
    width: 1px;
    border-radius: 2px;
    border: solid 1px #333333;
    background-color: white; }
  .barbell:before {
    left: 4px; }
  .barbell:after {
    right: 4px; }
  .barbell i {
    width: 19px; }
    .barbell i:before, .barbell i:after {
      top: -4px;
      height: 7px;
      width: 1px;
      border-radius: 2px;
      border: solid 1px #333333;
      background-color: white; }
    .barbell i:before {
      left: 2px; }
    .barbell i:after {
      right: 2px; }
  .barbell.filled:before, .barbell.filled:after {
    width: 0; }
  .barbell.filled i:before, .barbell.filled i:after {
    width: 0; }

.detail {
  margin-left: 2px;
  margin-top: 2px;
  width: 15px;
  height: 15px;
  border: solid 1px #333333;
  border-radius: 8px 8px 1px 8px; }
  .detail:before {
    width: 9px;
    height: 9px;
    border: solid 1px #333333;
    border-radius: 50%;
    left: 2px;
    top: 2px; }
  .detail.filled {
    background-color: #333333; }
    .detail.filled:before {
      background-color: white;
      border: solid 1px white; }
  .detail.detail-plus i {
    top: 7px;
    left: 5px;
    width: 5px;
    height: 1px;
    background-color: #333333; }
    .detail.detail-plus i:before {
      width: 5px;
      height: 1px;
      background-color: #333333;
      transform: rotate(90deg); }
  .detail.detail-minus i {
    top: 7px;
    left: 5px;
    width: 5px;
    height: 1px;
    background-color: #333333; }
