/*  Google Fonts
    https://developers.google.com/fonts/docs/material_icons */

/* In addition, the CSS rules for rendering the icon will need to be declared to render the font properly.
   These rules are normally served as part of the Google Web Font stylesheet,
   but will need to be included manually in your projects when self-hosting the font: */


.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    -webkit-font-smoothing: antialiased;      /* Support for all WebKit browsers. */
    text-rendering: optimizeLegibility;       /* Support for Safari and Chrome. */
    -moz-osx-font-smoothing: grayscale;       /* Support for Firefox. */
    font-feature-settings: 'liga';            /* Support for IE. */
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/* To set a custom icon color, define a CSS rule specifying the desired color for the font: */

.material-icons.orange600 { color: #FB8C00; }