.appDemoFontIconsWithClassnames {
    padding:25px;
    width: 100%;
}
.appDemoFontIconsWithClassnames,
.appDemoFontIconsWithClassnames *:before,
.appDemoFontIconsWithClassnames *:after {
  box-sizing: border-box;
}

    /* Bootstrap Overrides */
    [class^="icon-"]:before,
    [class*=" icon-"]:before {
      font-family:"icomoon";
      display:inline-block;
      vertical-align:middle;
      line-height:1;
      font-weight:normal;
      font-style:normal;

      text-decoration:inherit;
      text-transform:none;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }


    .icon-home:before {
        content: "\e900";
    }

    .icon-clock:before {
        content: "\e94e";
    }

    .icon-user-plus:before {
        content: "\e973";
    }

    .icon-google-plus2:before {
        content: "\ea89";
    }

    .icon-youtube4:before {
        content: "\ea9a";
    }

    .icon-settings:before {
        content: "\e600";
    }

    md-progress-circular {
        margin-bottom:20px;
    }
/* OLD STYLES */

header {
  overflow: hidden;
}

header h1 {
  color: #888;
  font-size: 36px;
  font-weight: 300;
}

.container {
  margin: 0 auto;
  max-width: 1200px;
  min-width: 960px;
  padding: 40px 40px;
  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.glyph {
  border-bottom: 1px dotted #ccc;
  padding: 10px 0 20px;
  margin-bottom: 20px;
}

.preview-scale,
.preview-glyphs {
  display: flex;
  flex-direction: row;
}

.preview-scale {
  color: #888;
  font-size: 12px;
  margin-top: 24px;
}

.step {
  flex-grow: 1;
  line-height: 0.5;
}

.usage { margin-top: 10px; }
.usage input {
  font-family: monospace;
  text-align: center;
}
.usage .point { width: 150px; }
.usage .class { width: 250px; }

md-radio-button {
  display: inline-block;
}

.loading {
  background-color: black;
  filter: alpha(opacity=40);
  height: 100%;
  left: 0;
  opacity: .40;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 90;
}

.loading md-progress-circular {
  left: 50%;
  position: fixed;
  top: 48%;
  z-index: 100;
}