Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                html
  body.bg-grey-200
    .col-group
      .col-12
        h1.fg-indigo MATERIAL DESIGN COLOR PALETTE
        p 
          | CSS file downloadable from GitHub
          br
          a.fg-pink(href="https://github.com/toviszsolt/css-material-colors.git" target="_blank") https://github.com/toviszsolt/css-material-colors.git
      // RED
      .col-4
        card
          list.no-border
            item.bg-red.fg-white
              div
                h3 Red
                p red
              action
                h3  
                p #F44336
            item.bg-red-50
              div red-50
              action #FFEBEE
            item.bg-red-100
              div red-100
              action #FFCDD2
            item.bg-red-200
              div red-200
              action #EF9A9A
            item.bg-red-300.fg-white
              div red-300
              action #E57373
            item.bg-red-400.fg-white
              div red-400
              action #EF5350
            item.bg-red-500.fg-white
              div red-500
              action #F44336
            item.bg-red-600.fg-white
              div red-600
              action #E53935
            item.bg-red-700.fg-white
              div red-700
              action #D32F2F
            item.bg-red-800.fg-white
              div red-800
              action #C62828
            item.bg-red-900.fg-white
              div red-900
              action #B71C1C
            item.bg-red-a100
              div red-a100
              action #FF8A80
            item.bg-red-a200.fg-white
              div red-a200
              action #FF5252
            item.bg-red-a400.fg-white
              div red-a400
              action #FF1744
            item.bg-red-a700.fg-white
              div red-a700
              action #D50000
      // PINK
      .col-4
        card
          list.no-border
            item.bg-pink.fg-white
              div
                h3 Pink
                p pink
              action
                h3  
                p #E91E63
            item.bg-pink-50
              div pink-50
              action #FCE4EC
            item.bg-pink-100
              div pink-100
              action #F8BBD0
            item.bg-pink-200
              div pink-200
              action #F48FB1
            item.bg-pink-300.fg-white
              div pink-300
              action #F06292
            item.bg-pink-400.fg-white
              div pink-400
              action #EC407A
            item.bg-pink-500.fg-white
              div pink-500
              action #E91E63
            item.bg-pink-600.fg-white
              div pink-600
              action #D81B60
            item.bg-pink-700.fg-white
              div pink-700
              action #C2185B
            item.bg-pink-800.fg-white
              div pink-800
              action #AD1457
            item.bg-pink-900.fg-white
              div pink-900
              action #880E4F
            item.bg-pink-a100
              div pink-a100
              action #FF80AB
            item.bg-pink-a200.fg-white
              div pink-a200
              action #FF4081
            item.bg-pink-a400.fg-white
              div pink-a400
              action #F50057
            item.bg-pink-a700.fg-white
              div pink-a700
              action #C51162
      // PURPLE
      .col-4
        card
          list.no-border
            item.bg-purple.fg-white
              div
                h3 Purple
                p purple
              action
                h3  
                p #9C27B0
            item.bg-purple-50
              div purple-50
              action #F3E5F5
            item.bg-purple-100
              div purple-100
              action #E1BEE7
            item.bg-purple-200
              div purple-200
              action #CE93D8
            item.bg-purple-300.fg-white
              div purple-300
              action #BA68C8
            item.bg-purple-400.fg-white
              div purple-400
              action #AB47BC
            item.bg-purple-500.fg-white
              div purple-500
              action #9C27B0
            item.bg-purple-600.fg-white
              div purple-600
              action #8E24AA
            item.bg-purple-700.fg-white
              div purple-700
              action #7B1FA2
            item.bg-purple-800.fg-white
              div purple-800
              action #6A1B9A
            item.bg-purple-900.fg-white
              div purple-900
              action #4A148C
            item.bg-purple-a100
              div purple-a100
              action #EA80FC
            item.bg-purple-a200.fg-white
              div purple-a200
              action #E040FB
            item.bg-purple-a400.fg-white
              div purple-a400
              action #D500F9
            item.bg-purple-a700.fg-white
              div purple-a700
              action #AA00FF
      // DEEP PURPLE
      .col-4
        card
          list.no-border
            item.bg-deep-purple.fg-white
              div
                h3 Deep Purple
                p deep-purple
              action
                h3  
                p #673AB7
            item.bg-deep-purple-50
              div deep-purple-50
              action #EDE7F6
            item.bg-deep-purple-100
              div deep-purple-100
              action #D1C4E9
            item.bg-deep-purple-200
              div deep-purple-200
              action #B39DDB
            item.bg-deep-purple-300.fg-white
              div deep-purple-300
              action #9575CD
            item.bg-deep-purple-400.fg-white
              div deep-purple-400
              action #7E57C2
            item.bg-deep-purple-500.fg-white
              div deep-purple-500
              action #673AB7
            item.bg-deep-purple-600.fg-white
              div deep-purple-600
              action #5E35B1
            item.bg-deep-purple-700.fg-white
              div deep-purple-700
              action #512DA8
            item.bg-deep-purple-800.fg-white
              div deep-purple-800
              action #4527A0
            item.bg-deep-purple-900.fg-white
              div deep-purple-900
              action #311B92
            item.bg-deep-purple-a100
              div deep-purple-a100
              action #B388FF
            item.bg-deep-purple-a200.fg-white
              div deep-purple-a200
              action #7C4DFF
            item.bg-deep-purple-a400.fg-white
              div deep-purple-a400
              action #651FFF
            item.bg-deep-purple-a700.fg-white
              div deep-purple-a700
              action #6200EA
      // INDIGO
      .col-4
        card
          list.no-border
            item.bg-indigo.fg-white
              div
                h3 Indigo
                p indigo
              action
                h3  
                p #3F51B5
            item.bg-indigo-50
              div indigo-50
              action #E8EAF6
            item.bg-indigo-100
              div indigo-100
              action #C5CAE9
            item.bg-indigo-200
              div indigo-200
              action #9FA8DA
            item.bg-indigo-300.fg-white
              div indigo-300
              action #7986CB
            item.bg-indigo-400.fg-white
              div indigo-400
              action #5C6BC0
            item.bg-indigo-500.fg-white
              div indigo-500
              action #3F51B5
            item.bg-indigo-600.fg-white
              div indigo-600
              action #3949AB
            item.bg-indigo-700.fg-white
              div indigo-700
              action #303F9F
            item.bg-indigo-800.fg-white
              div indigo-800
              action #283593
            item.bg-indigo-900.fg-white
              div indigo-900
              action #1A237E
            item.bg-indigo-a100
              div indigo-a100
              action #8C9EFF
            item.bg-indigo-a200.fg-white
              div indigo-a200
              action #536DFE
            item.bg-indigo-a400.fg-white
              div indigo-a400
              action #3D5AFE
            item.bg-indigo-a700.fg-white
              div indigo-a700
              action #304FFE
      // BLUE
      .col-4
        card
          list.no-border
            item.bg-blue.fg-white
              div
                h3 Blue
                p blue
              action
                h3  
                p #2196F3
            item.bg-blue-50
              div blue-50
              action #E3F2FD
            item.bg-blue-100
              div blue-100
              action #BBDEFB
            item.bg-blue-200
              div blue-200
              action #90CAF9
            item.bg-blue-300
              div blue-300
              action #64B5F6
            item.bg-blue-400.fg-white
              div blue-400
              action #42A5F5
            item.bg-blue-500.fg-white
              div blue-500
              action #2196F3
            item.bg-blue-600.fg-white
              div blue-600
              action #1E88E5
            item.bg-blue-700.fg-white
              div blue-700
              action #1976D2
            item.bg-blue-800.fg-white
              div blue-800
              action #1565C0
            item.bg-blue-900.fg-white
              div blue-900
              action #0D47A1
            item.bg-blue-a100
              div blue-a100
              action #82B1FF
            item.bg-blue-a200.fg-white
              div blue-a200
              action #448AFF
            item.bg-blue-a400.fg-white
              div blue-a400
              action #2979FF
            item.bg-blue-a700.fg-white
              div blue-a700
              action #2962FF
      // LIGHT BLUE
      .col-4
        card
          list.no-border
            item.bg-light-blue.fg-white
              div
                h3 Light Blue
                p light-blue
              action
                h3  
                p #03A9F4
            item.bg-light-blue-50
              div light-blue-50
              action #E1F5FE
            item.bg-light-blue-100
              div light-blue-100
              action #B3E5FC
            item.bg-light-blue-200
              div light-blue-200
              action #81D4FA
            item.bg-light-blue-300
              div light-blue-300
              action #4FC3F7
            item.bg-light-blue-400
              div light-blue-400
              action #29B6F6
            item.bg-light-blue-500.fg-white
              div light-blue-500
              action #03A9F4
            item.bg-light-blue-600.fg-white
              div light-blue-600
              action #039BE5
            item.bg-light-blue-700.fg-white
              div light-blue-700
              action #0288D1
            item.bg-light-blue-800.fg-white
              div light-blue-800
              action #0277BD
            item.bg-light-blue-900.fg-white
              div light-blue-900
              action #01579B
            item.bg-light-blue-a100
              div light-blue-a100
              action #80D8FF
            item.bg-light-blue-a200
              div light-blue-a200
              action #40C4FF
            item.bg-light-blue-a400
              div light-blue-a400
              action #00B0FF
            item.bg-light-blue-a700.fg-white
              div light-blue-a700
              action #0091EA
      // CYAN
      .col-4
        card
          list.no-border
            item.bg-cyan.fg-white
              div
                h3 Cyan
                p cyan
              action
                h3  
                p #00BCD4
            item.bg-cyan-50
              div cyan-50
              action #E0F7FA
            item.bg-cyan-100
              div cyan-100
              action #B2EBF2
            item.bg-cyan-200
              div cyan-200
              action #80DEEA
            item.bg-cyan-300
              div cyan-300
              action #4DD0E1
            item.bg-cyan-400
              div cyan-400
              action #26C6DA
            item.bg-cyan-500.fg-white
              div cyan-500
              action #00BCD4
            item.bg-cyan-600.fg-white
              div cyan-600
              action #00ACC1
            item.bg-cyan-700.fg-white
              div cyan-700
              action #0097A7
            item.bg-cyan-800.fg-white
              div cyan-800
              action #00838F
            item.bg-cyan-900.fg-white
              div cyan-900
              action #006064
            item.bg-cyan-a100
              div cyan-a100
              action #84FFFF
            item.bg-cyan-a200
              div cyan-a200
              action #18FFFF
            item.bg-cyan-a400
              div cyan-a400
              action #00E5FF
            item.bg-cyan-a700
              div cyan-a700
              action #00B8D4
      // TEAL
      .col-4
        card
          list.no-border
            item.bg-teal.fg-white
              div
                h3 Teal
                p teal
              action
                h3  
                p #009688
            item.bg-teal-50
              div teal-50
              action #E0F2F1
            item.bg-teal-100
              div teal-100
              action #B2DFDB
            item.bg-teal-200
              div teal-200
              action #80CBC4
            item.bg-teal-300
              div teal-300
              action #4DB6AC
            item.bg-teal-400.fg-white
              div teal-400
              action #26A69A
            item.bg-teal-500.fg-white
              div teal-500
              action #009688
            item.bg-teal-600.fg-white
              div teal-600
              action #00897B
            item.bg-teal-700.fg-white
              div teal-700
              action #00796B
            item.bg-teal-800.fg-white
              div teal-800
              action #00695C
            item.bg-teal-900.fg-white
              div teal-900
              action #004D40
            item.bg-teal-a100
              div teal-a100
              action #A7FFEB
            item.bg-teal-a200
              div teal-a200
              action #64FFDA
            item.bg-teal-a400
              div teal-a400
              action #1DE9B6
            item.bg-teal-a700
              div teal-a700
              action #00BFA5
      // GREEN
      .col-4
        card
          list.no-border
            item.bg-green.fg-white
              div
                h3 Green
                p green
              action
                h3  
                p #4CAF50
            item.bg-green-50
              div green-50
              action #E8F5E9
            item.bg-green-100
              div green-100
              action #C8E6C9
            item.bg-green-200
              div green-200
              action #A5D6A7
            item.bg-green-300
              div green-300
              action #81C784
            item.bg-green-400
              div green-400
              action #66BB6A
            item.bg-green-500.fg-white
              div green-500
              action #4CAF50
            item.bg-green-600.fg-white
              div green-600
              action #43A047
            item.bg-green-700.fg-white
              div green-700
              action #388E3C
            item.bg-green-800.fg-white
              div green-800
              action #2E7D32
            item.bg-green-900.fg-white
              div green-900
              action #1B5E20
            item.bg-green-a100
              div green-a100
              action #B9F6CA
            item.bg-green-a200
              div green-a200
              action #69F0AE
            item.bg-green-a400
              div green-a400
              action #00E676
            item.bg-green-a700
              div green-a700
              action #00C853
      // LIGHT GREEN
      .col-4
        card
          list.no-border
            item.bg-light-green
              div
                h3 Light Green
                p light-green
              action
                h3  
                p #8BC34A
            item.bg-light-green-50
              div light-green-50
              action #F1F8E9
            item.bg-light-green-100
              div light-green-100
              action #DCEDC8
            item.bg-light-green-200
              div light-green-200
              action #C5E1A5
            item.bg-light-green-300
              div light-green-300
              action #AED581
            item.bg-light-green-400
              div light-green-400
              action #9CCC65
            item.bg-light-green-500
              div light-green-500
              action #8BC34A
            item.bg-light-green-600.fg-white
              div light-green-600
              action #7CB342
            item.bg-light-green-700.fg-white
              div light-green-700
              action #689F38
            item.bg-light-green-800.fg-white
              div light-green-800
              action #558B2F
            item.bg-light-green-900.fg-white
              div light-green-900
              action #33691E
            item.bg-light-green-a100
              div light-green-a100
              action #CCFF90
            item.bg-light-green-a200
              div light-green-a200
              action #B2FF59
            item.bg-light-green-a400
              div light-green-a400
              action #76FF03
            item.bg-light-green-a700
              div light-green-a700
              action #64DD17
      // LIME
      .col-4
        card
          list.no-border
            item.bg-lime
              div
                h3 Lime
                p lime
              action
                h3  
                p #CDDC39
            item.bg-lime-50
              div lime-50
              action #F9FBE7
            item.bg-lime-100
              div lime-100
              action #F0F4C3
            item.bg-lime-200
              div lime-200
              action #E6EE9C
            item.bg-lime-300
              div lime-300
              action #DCE775
            item.bg-lime-400
              div lime-400
              action #D4E157
            item.bg-lime-500
              div lime-500
              action #CDDC39
            item.bg-lime-600
              div lime-600
              action #C0CA33
            item.bg-lime-700.fg-white
              div lime-700
              action #AFB42B
            item.bg-lime-800.fg-white
              div lime-800
              action #9E9D24
            item.bg-lime-900.fg-white
              div lime-900
              action #827717
            item.bg-lime-a100
              div lime-a100
              action #F4FF81
            item.bg-lime-a200
              div lime-a200
              action #EEFF41
            item.bg-lime-a400
              div lime-a400
              action #C6FF00
            item.bg-lime-a700
              div lime-a700
              action #AEEA00
      // YELLOW
      .col-4
        card
          list.no-border
            item.bg-yellow
              div
                h3 Yellow
                p yellow
              action
                h3  
                p #FFEB3B
            item.bg-yellow-50
              div yellow-50
              action #FFFDE7
            item.bg-yellow-100
              div yellow-100
              action #FFF9C4
            item.bg-yellow-200
              div yellow-200
              action #FFF59D
            item.bg-yellow-300
              div yellow-300
              action #FFF176
            item.bg-yellow-400
              div yellow-400
              action #FFEE58
            item.bg-yellow-500
              div yellow-500
              action #FFEB3B
            item.bg-yellow-600
              div yellow-600
              action #FDD835
            item.bg-yellow-700
              div yellow-700
              action #FBC02D
            item.bg-yellow-800
              div yellow-800
              action #F9A825
            item.bg-yellow-900.fg-white
              div yellow-900
              action #F57F17
            item.bg-yellow-a100
              div yellow-a100
              action #FFFF8D
            item.bg-yellow-a200
              div yellow-a200
              action #FFFF00
            item.bg-yellow-a400
              div yellow-a400
              action #FFEA00
            item.bg-yellow-a700
              div yellow-a700
              action #FFD600
      // AMBER
      .col-4
        card
          list.no-border
            item.bg-amber
              div
                h3 Amber
                p amber
              action
                h3  
                p #FFC107
            item.bg-amber-50
              div amber-50
              action #FFF8E1
            item.bg-amber-100
              div amber-100
              action #FFECB3
            item.bg-amber-200
              div amber-200
              action #FFE082
            item.bg-amber-300
              div amber-300
              action #FFD54F
            item.bg-amber-400
              div amber-400
              action #FFCA28
            item.bg-amber-500
              div amber-500
              action #FFC107
            item.bg-amber-600
              div amber-600
              action #FFB300
            item.bg-amber-700
              div amber-700
              action #FFA000
            item.bg-amber-800
              div amber-800
              action #FF8F00
            item.bg-amber-900.fg-white
              div amber-900
              action #FF6F00
            item.bg-amber-a100
              div amber-a100
              action #FFE57F
            item.bg-amber-a200
              div amber-a200
              action #FFD740
            item.bg-amber-a400
              div amber-a400
              action #FFC400
            item.bg-amber-a700
              div amber-a700
              action #FFAB00
      // ORANGE
      .col-4
        card
          list.no-border
            item.bg-orange
              div
                h3 Orange
                p orange
              action
                h3  
                p #FF9800
            item.bg-orange-50
              div orange-50
              action #FFF3E0
            item.bg-orange-100
              div orange-100
              action #FFE0B2
            item.bg-orange-200
              div orange-200
              action #FFCC80
            item.bg-orange-300
              div orange-300
              action #FFB74D
            item.bg-orange-400
              div orange-400
              action #FFA726
            item.bg-orange-500
              div orange-500
              action #FF9800
            item.bg-orange-600
              div orange-600
              action #FB8C00
            item.bg-orange-700
              div orange-700
              action #F57C00
            item.bg-orange-800.fg-white
              div orange-800
              action #EF6C00
            item.bg-orange-900.fg-white
              div orange-900
              action #E65100
            item.bg-orange-a100
              div orange-a100
              action #FFD180
            item.bg-orange-a200
              div orange-a200
              action #FFAB40
            item.bg-orange-a400
              div orange-a400
              action #FF9100
            item.bg-orange-a700.fg-white
              div orange-a700
              action #FF6D00
      // DEEP ORANGE
      .col-4
        card
          list.no-border
            item.bg-deep-orange.fg-white
              div
                h3 Deep Orange
                p deep-orange
              action
                h3  
                p #FF5722
            item.bg-deep-orange-50
              div deep-orange-50
              action #FBE9E7
            item.bg-deep-orange-100
              div deep-orange-100
              action #FFCCBC
            item.bg-deep-orange-200
              div deep-orange-200
              action #FFAB91
            item.bg-deep-orange-300
              div deep-orange-300
              action #FF8A65
            item.bg-deep-orange-400
              div deep-orange-400
              action #FF7043
            item.bg-deep-orange-500.fg-white
              div deep-orange-500
              action #FF5722
            item.bg-deep-orange-600.fg-white
              div deep-orange-600
              action #F4511E
            item.bg-deep-orange-700.fg-white
              div deep-orange-700
              action #E64A19
            item.bg-deep-orange-800.fg-white
              div deep-orange-800
              action #D84315
            item.bg-deep-orange-900.fg-white
              div deep-orange-900
              action #BF360C
            item.bg-deep-orange-a100
              div deep-orange-a100
              action #FF9E80
            item.bg-deep-orange-a200
              div deep-orange-a200
              action #FF6E40
            item.bg-deep-orange-a400.fg-white
              div deep-orange-a400
              action #FF3D00
            item.bg-deep-orange-a700.fg-white
              div deep-orange-a700
              action #DD2C00
      // BROWN
      .col-4
        card
          list.no-border
            item.bg-brown.fg-white
              div
                h3 Brown
                p brown
              action
                h3  
                p #795548
            item.bg-brown-50
              div brown-50
              action #EFEBE9
            item.bg-brown-100
              div brown-100
              action #D7CCC8
            item.bg-brown-200
              div brown-200
              action #BCAAA4
            item.bg-brown-300.fg-white
              div brown-300
              action #A1887F
            item.bg-brown-400.fg-white
              div brown-400
              action #8D6E63
            item.bg-brown-500.fg-white
              div brown-500
              action #795548
            item.bg-brown-600.fg-white
              div brown-600
              action #6D4C41
            item.bg-brown-700.fg-white
              div brown-700
              action #5D4037
            item.bg-brown-800.fg-white
              div brown-800
              action #4E342E
            item.bg-brown-900.fg-white
              div brown-900
              action #3E2723
      // GREY
      .col-4
        card
          list.no-border
            item.bg-grey.fg-white
              div
                h3 Grey
                p grey
              action
                h3  
                p #9E9E9E
            item.bg-grey-50
              div grey-50
              action #FAFAFA
            item.bg-grey-100
              div grey-100
              action #F5F5F5
            item.bg-grey-200
              div grey-200
              action #EEEEEE
            item.bg-grey-300
              div grey-300
              action #E0E0E0
            item.bg-grey-400
              div grey-400
              action #BDBDBD
            item.bg-grey-500
              div grey-500
              action #9E9E9E
            item.bg-grey-600.fg-white
              div grey-600
              action #757575
            item.bg-grey-700.fg-white
              div grey-700
              action #616161
            item.bg-grey-800.fg-white
              div grey-800
              action #424242
            item.bg-grey-900.fg-white
              div grey-900
              action #212121
      // BLUE GREY
      .col-4
        card
          list.no-border
            item.bg-blue-grey.fg-white
              div
                h3 Blue Grey
                p blue-grey
              action
                h3  
                p #607D8B
            item.bg-blue-grey-50
              div blue-grey-50
              action #ECEFF1
            item.bg-blue-grey-100
              div blue-grey-100
              action #CFD8DC
            item.bg-blue-grey-200
              div blue-grey-200
              action #B0BEC5
            item.bg-blue-grey-300.fg-white
              div blue-grey-300
              action #90A4AE
            item.bg-blue-grey-400.fg-white
              div blue-grey-400
              action #78909C
            item.bg-blue-grey-500.fg-white
              div blue-grey-500
              action #607D8B
            item.bg-blue-grey-600.fg-white
              div blue-grey-600
              action #546E7A
            item.bg-blue-grey-700.fg-white
              div blue-grey-700
              action #455A64
            item.bg-blue-grey-800.fg-white
              div blue-grey-800
              action #37474F
            item.bg-blue-grey-900.fg-white
              div blue-grey-900
              action #263238
      // BLACK WHITE
      .col-4
        card
          list.no-border
            item.bg-black.fg-white
              div
                h3 Black
                p black
              action
                h3  
                p #000000
            item.bg-white
              div
                h3 White
                p white
              action
                h3  
                p #FFFFFF

              
            
!

CSS

              
                body{
  padding:10px;
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
  background: #EDEDED;
  font-family: Roboto,sans-serif;
  font-size: 10pt;
}

.colgroup {
  display: block;
}

.col-12 {
  display: inline-block;
  padding: 4px;
  width: 100%;
  text-align: center;
}

.col-4 {
  display: inline-block;
  padding: 6px;
  width: 30%;
  vertical-align: top;
}

card {
  display: block;
  background: #FFF;
  box-shadow: 0 1.35pt 2.25pt rgba(0,0,0,.14),0 .3pt 2.7pt .3pt rgba(0,0,0,.12),0 .75pt 1.2pt -.45pt rgba(0,0,0,.4);
  
  list {
    > item {
      display: block;
      padding: 16px;
      > * {
        display: inline-block;
        width: 48%;
      }
      > action {
        text-align: right;
      }
    }
  }
}


/*
* CSS Material Colors
* CSS library for Material Design Background and Foreground colors
*
* https://github.com/sivot/css-material-colors
*
*
*/


.bg-red{background-color:#f44336}.bg-red-50{background-color:#ffebee}.bg-red-100{background-color:#ffcdd2}.bg-red-200{background-color:#ef9a9a}.bg-red-300{background-color:#e57373}.bg-red-400{background-color:#ef5350}.bg-red-500{background-color:#f44336}.bg-red-600{background-color:#e53935}.bg-red-700{background-color:#d32f2f}.bg-red-800{background-color:#c62828}.bg-red-900{background-color:#b71c1c}.bg-red-a100{background-color:#ff8a80}.bg-red-a200{background-color:#ff5252}.bg-red-a400{background-color:#ff1744}.bg-red-a700{background-color:#d50000}.bg-pink{background-color:#e91e63}.bg-pink-50{background-color:#fce4ec}.bg-pink-100{background-color:#f8bbd0}.bg-pink-200{background-color:#f48fb1}.bg-pink-300{background-color:#f06292}.bg-pink-400{background-color:#ec407a}.bg-pink-500{background-color:#e91e63}.bg-pink-600{background-color:#d81b60}.bg-pink-700{background-color:#c2185b}.bg-pink-800{background-color:#ad1457}.bg-pink-900{background-color:#880e4f}.bg-pink-a100{background-color:#ff80ab}.bg-pink-a200{background-color:#ff4081}.bg-pink-a400{background-color:#f50057}.bg-pink-a700{background-color:#c51162}.bg-purple{background-color:#9c27b0}.bg-purple-50{background-color:#f3e5f5}.bg-purple-100{background-color:#e1bee7}.bg-purple-200{background-color:#ce93d8}.bg-purple-300{background-color:#ba68c8}.bg-purple-400{background-color:#ab47bc}.bg-purple-500{background-color:#9c27b0}.bg-purple-600{background-color:#8e24aa}.bg-purple-700{background-color:#7b1fa2}.bg-purple-800{background-color:#6a1b9a}.bg-purple-900{background-color:#4a148c}.bg-purple-a100{background-color:#ea80fc}.bg-purple-a200{background-color:#e040fb}.bg-purple-a400{background-color:#d500f9}.bg-purple-a700{background-color:#a0f}.bg-deep-purple{background-color:#673ab7}.bg-deep-purple-50{background-color:#ede7f6}.bg-deep-purple-100{background-color:#d1c4e9}.bg-deep-purple-200{background-color:#b39ddb}.bg-deep-purple-300{background-color:#9575cd}.bg-deep-purple-400{background-color:#7e57c2}.bg-deep-purple-500{background-color:#673ab7}.bg-deep-purple-600{background-color:#5e35b1}.bg-deep-purple-700{background-color:#512da8}.bg-deep-purple-800{background-color:#4527a0}.bg-deep-purple-900{background-color:#311b92}.bg-deep-purple-a100{background-color:#b388ff}.bg-deep-purple-a200{background-color:#7c4dff}.bg-deep-purple-a400{background-color:#651fff}.bg-deep-purple-a700{background-color:#6200ea}.bg-indigo{background-color:#3f51b5}.bg-indigo-50{background-color:#e8eaf6}.bg-indigo-100{background-color:#c5cae9}.bg-indigo-200{background-color:#9fa8da}.bg-indigo-300{background-color:#7986cb}.bg-indigo-400{background-color:#5c6bc0}.bg-indigo-500{background-color:#3f51b5}.bg-indigo-600{background-color:#3949ab}.bg-indigo-700{background-color:#303f9f}.bg-indigo-800{background-color:#283593}.bg-indigo-900{background-color:#1a237e}.bg-indigo-a100{background-color:#8c9eff}.bg-indigo-a200{background-color:#536dfe}.bg-indigo-a400{background-color:#3d5afe}.bg-indigo-a700{background-color:#304ffe}.bg-blue{background-color:#2196f3}.bg-blue-50{background-color:#e3f2fd}.bg-blue-100{background-color:#bbdefb}.bg-blue-200{background-color:#90caf9}.bg-blue-300{background-color:#64b5f6}.bg-blue-400{background-color:#42a5f5}.bg-blue-500{background-color:#2196f3}.bg-blue-600{background-color:#1e88e5}.bg-blue-700{background-color:#1976d2}.bg-blue-800{background-color:#1565c0}.bg-blue-900{background-color:#0d47a1}.bg-blue-a100{background-color:#82b1ff}.bg-blue-a200{background-color:#448aff}.bg-blue-a400{background-color:#2979ff}.bg-blue-a700{background-color:#2962ff}.bg-light-blue{background-color:#03a9f4}.bg-light-blue-50{background-color:#e1f5fe}.bg-light-blue-100{background-color:#b3e5fc}.bg-light-blue-200{background-color:#81d4fa}.bg-light-blue-300{background-color:#4fc3f7}.bg-light-blue-400{background-color:#29b6f6}.bg-light-blue-500{background-color:#03a9f4}.bg-light-blue-600{background-color:#039be5}.bg-light-blue-700{background-color:#0288d1}.bg-light-blue-800{background-color:#0277bd}.bg-light-blue-900{background-color:#01579b}.bg-light-blue-a100{background-color:#80d8ff}.bg-light-blue-a200{background-color:#40c4ff}.bg-light-blue-a400{background-color:#00b0ff}.bg-light-blue-a700{background-color:#0091ea}.bg-cyan{background-color:#00bcd4}.bg-cyan-50{background-color:#e0f7fa}.bg-cyan-100{background-color:#b2ebf2}.bg-cyan-200{background-color:#80deea}.bg-cyan-300{background-color:#4dd0e1}.bg-cyan-400{background-color:#26c6da}.bg-cyan-500{background-color:#00bcd4}.bg-cyan-600{background-color:#00acc1}.bg-cyan-700{background-color:#0097a7}.bg-cyan-800{background-color:#00838f}.bg-cyan-900{background-color:#006064}.bg-cyan-a100{background-color:#84ffff}.bg-cyan-a200{background-color:#18ffff}.bg-cyan-a400{background-color:#00e5ff}.bg-cyan-a700{background-color:#00b8d4}.bg-teal{background-color:#009688}.bg-teal-50{background-color:#e0f2f1}.bg-teal-100{background-color:#b2dfdb}.bg-teal-200{background-color:#80cbc4}.bg-teal-300{background-color:#4db6ac}.bg-teal-400{background-color:#26a69a}.bg-teal-500{background-color:#009688}.bg-teal-600{background-color:#00897b}.bg-teal-700{background-color:#00796b}.bg-teal-800{background-color:#00695c}.bg-teal-900{background-color:#004d40}.bg-teal-a100{background-color:#a7ffeb}.bg-teal-a200{background-color:#64ffda}.bg-teal-a400{background-color:#1de9b6}.bg-teal-a700{background-color:#00bfa5}.bg-green{background-color:#4caf50}.bg-green-50{background-color:#e8f5e9}.bg-green-100{background-color:#c8e6c9}.bg-green-200{background-color:#a5d6a7}.bg-green-300{background-color:#81c784}.bg-green-400{background-color:#66bb6a}.bg-green-500{background-color:#4caf50}.bg-green-600{background-color:#43a047}.bg-green-700{background-color:#388e3c}.bg-green-800{background-color:#2e7d32}.bg-green-900{background-color:#1b5e20}.bg-green-a100{background-color:#b9f6ca}.bg-green-a200{background-color:#69f0ae}.bg-green-a400{background-color:#00e676}.bg-green-a700{background-color:#00c853}.bg-light-green{background-color:#8bc34a}.bg-light-green-50{background-color:#f1f8e9}.bg-light-green-100{background-color:#dcedc8}.bg-light-green-200{background-color:#c5e1a5}.bg-light-green-300{background-color:#aed581}.bg-light-green-400{background-color:#9ccc65}.bg-light-green-500{background-color:#8bc34a}.bg-light-green-600{background-color:#7cb342}.bg-light-green-700{background-color:#689f38}.bg-light-green-800{background-color:#558b2f}.bg-light-green-900{background-color:#33691e}.bg-light-green-a100{background-color:#ccff90}.bg-light-green-a200{background-color:#b2ff59}.bg-light-green-a400{background-color:#76ff03}.bg-light-green-a700{background-color:#64dd17}.bg-lime{background-color:#cddc39}.bg-lime-50{background-color:#f9fbe7}.bg-lime-100{background-color:#f0f4c3}.bg-lime-200{background-color:#e6ee9c}.bg-lime-300{background-color:#dce775}.bg-lime-400{background-color:#d4e157}.bg-lime-500{background-color:#cddc39}.bg-lime-600{background-color:#c0ca33}.bg-lime-700{background-color:#afb42b}.bg-lime-800{background-color:#9e9d24}.bg-lime-900{background-color:#827717}.bg-lime-a100{background-color:#f4ff81}.bg-lime-a200{background-color:#eeff41}.bg-lime-a400{background-color:#c6ff00}.bg-lime-a700{background-color:#aeea00}.bg-yellow{background-color:#ffeb3b}.bg-yellow-50{background-color:#fffde7}.bg-yellow-100{background-color:#fff9c4}.bg-yellow-200{background-color:#fff59d}.bg-yellow-300{background-color:#fff176}.bg-yellow-400{background-color:#ffee58}.bg-yellow-500{background-color:#ffeb3b}.bg-yellow-600{background-color:#fdd835}.bg-yellow-700{background-color:#fbc02d}.bg-yellow-800{background-color:#f9a825}.bg-yellow-900{background-color:#f57f17}.bg-yellow-a100{background-color:#ffff8d}.bg-yellow-a200{background-color:#ff0}.bg-yellow-a400{background-color:#ffea00}.bg-yellow-a700{background-color:#ffd600}.bg-amber{background-color:#ffc107}.bg-amber-50{background-color:#fff8e1}.bg-amber-100{background-color:#ffecb3}.bg-amber-200{background-color:#ffe082}.bg-amber-300{background-color:#ffd54f}.bg-amber-400{background-color:#ffca28}.bg-amber-500{background-color:#ffc107}.bg-amber-600{background-color:#ffb300}.bg-amber-700{background-color:#ffa000}.bg-amber-800{background-color:#ff8f00}.bg-amber-900{background-color:#ff6f00}.bg-amber-a100{background-color:#ffe57f}.bg-amber-a200{background-color:#ffd740}.bg-amber-a400{background-color:#ffc400}.bg-amber-a700{background-color:#ffab00}.bg-orange{background-color:#ff9800}.bg-orange-50{background-color:#fff3e0}.bg-orange-100{background-color:#ffe0b2}.bg-orange-200{background-color:#ffcc80}.bg-orange-300{background-color:#ffb74d}.bg-orange-400{background-color:#ffa726}.bg-orange-500{background-color:#ff9800}.bg-orange-600{background-color:#fb8c00}.bg-orange-700{background-color:#f57c00}.bg-orange-800{background-color:#ef6c00}.bg-orange-900{background-color:#e65100}.bg-orange-a100{background-color:#ffd180}.bg-orange-a200{background-color:#ffab40}.bg-orange-a400{background-color:#ff9100}.bg-orange-a700{background-color:#ff6d00}.bg-deep-orange{background-color:#ff5722}.bg-deep-orange-50{background-color:#fbe9e7}.bg-deep-orange-100{background-color:#ffccbc}.bg-deep-orange-200{background-color:#ffab91}.bg-deep-orange-300{background-color:#ff8a65}.bg-deep-orange-400{background-color:#ff7043}.bg-deep-orange-500{background-color:#ff5722}.bg-deep-orange-600{background-color:#f4511e}.bg-deep-orange-700{background-color:#e64a19}.bg-deep-orange-800{background-color:#d84315}.bg-deep-orange-900{background-color:#bf360c}.bg-deep-orange-a100{background-color:#ff9e80}.bg-deep-orange-a200{background-color:#ff6e40}.bg-deep-orange-a400{background-color:#ff3d00}.bg-deep-orange-a700{background-color:#dd2c00}.bg-brown{background-color:#795548}.bg-brown-50{background-color:#efebe9}.bg-brown-100{background-color:#d7ccc8}.bg-brown-200{background-color:#bcaaa4}.bg-brown-300{background-color:#a1887f}.bg-brown-400{background-color:#8d6e63}.bg-brown-500{background-color:#795548}.bg-brown-600{background-color:#6d4c41}.bg-brown-700{background-color:#5d4037}.bg-brown-800{background-color:#4e342e}.bg-brown-900{background-color:#3e2723}.bg-grey{background-color:#9e9e9e}.bg-grey-50{background-color:#fafafa}.bg-grey-100{background-color:#f5f5f5}.bg-grey-200{background-color:#eee}.bg-grey-300{background-color:#e0e0e0}.bg-grey-400{background-color:#bdbdbd}.bg-grey-500{background-color:#9e9e9e}.bg-grey-600{background-color:#757575}.bg-grey-700{background-color:#616161}.bg-grey-800{background-color:#424242}.bg-grey-900{background-color:#212121}.bg-blue-grey{background-color:#607d8b}.bg-blue-grey-50{background-color:#eceff1}.bg-blue-grey-100{background-color:#cfd8dc}.bg-blue-grey-200{background-color:#b0bec5}.bg-blue-grey-300{background-color:#90a4ae}.bg-blue-grey-400{background-color:#78909c}.bg-blue-grey-500{background-color:#607d8b}.bg-blue-grey-600{background-color:#546e7a}.bg-blue-grey-700{background-color:#455a64}.bg-blue-grey-800{background-color:#37474f}.bg-blue-grey-900{background-color:#263238}.bg-black{background-color:#000}.bg-white{background-color:#fff}.fg-red{color:#f44336}.fg-red-50{color:#ffebee}.fg-red-100{color:#ffcdd2}.fg-red-200{color:#ef9a9a}.fg-red-300{color:#e57373}.fg-red-400{color:#ef5350}.fg-red-500{color:#f44336}.fg-red-600{color:#e53935}.fg-red-700{color:#d32f2f}.fg-red-800{color:#c62828}.fg-red-900{color:#b71c1c}.fg-red-a100{color:#ff8a80}.fg-red-a200{color:#ff5252}.fg-red-a400{color:#ff1744}.fg-red-a700{color:#d50000}.fg-pink{color:#e91e63}.fg-pink-50{color:#fce4ec}.fg-pink-100{color:#f8bbd0}.fg-pink-200{color:#f48fb1}.fg-pink-300{color:#f06292}.fg-pink-400{color:#ec407a}.fg-pink-500{color:#e91e63}.fg-pink-600{color:#d81b60}.fg-pink-700{color:#c2185b}.fg-pink-800{color:#ad1457}.fg-pink-900{color:#880e4f}.fg-pink-a100{color:#ff80ab}.fg-pink-a200{color:#ff4081}.fg-pink-a400{color:#f50057}.fg-pink-a700{color:#c51162}.fg-purple{color:#9c27b0}.fg-purple-50{color:#f3e5f5}.fg-purple-100{color:#e1bee7}.fg-purple-200{color:#ce93d8}.fg-purple-300{color:#ba68c8}.fg-purple-400{color:#ab47bc}.fg-purple-500{color:#9c27b0}.fg-purple-600{color:#8e24aa}.fg-purple-700{color:#7b1fa2}.fg-purple-800{color:#6a1b9a}.fg-purple-900{color:#4a148c}.fg-purple-a100{color:#ea80fc}.fg-purple-a200{color:#e040fb}.fg-purple-a400{color:#d500f9}.fg-purple-a700{color:#a0f}.fg-deep-purple{color:#673ab7}.fg-deep-purple-50{color:#ede7f6}.fg-deep-purple-100{color:#d1c4e9}.fg-deep-purple-200{color:#b39ddb}.fg-deep-purple-300{color:#9575cd}.fg-deep-purple-400{color:#7e57c2}.fg-deep-purple-500{color:#673ab7}.fg-deep-purple-600{color:#5e35b1}.fg-deep-purple-700{color:#512da8}.fg-deep-purple-800{color:#4527a0}.fg-deep-purple-900{color:#311b92}.fg-deep-purple-a100{color:#b388ff}.fg-deep-purple-a200{color:#7c4dff}.fg-deep-purple-a400{color:#651fff}.fg-deep-purple-a700{color:#6200ea}.fg-indigo{color:#3f51b5}.fg-indigo-50{color:#e8eaf6}.fg-indigo-100{color:#c5cae9}.fg-indigo-200{color:#9fa8da}.fg-indigo-300{color:#7986cb}.fg-indigo-400{color:#5c6bc0}.fg-indigo-500{color:#3f51b5}.fg-indigo-600{color:#3949ab}.fg-indigo-700{color:#303f9f}.fg-indigo-800{color:#283593}.fg-indigo-900{color:#1a237e}.fg-indigo-a100{color:#8c9eff}.fg-indigo-a200{color:#536dfe}.fg-indigo-a400{color:#3d5afe}.fg-indigo-a700{color:#304ffe}.fg-blue{color:#2196f3}.fg-blue-50{color:#e3f2fd}.fg-blue-100{color:#bbdefb}.fg-blue-200{color:#90caf9}.fg-blue-300{color:#64b5f6}.fg-blue-400{color:#42a5f5}.fg-blue-500{color:#2196f3}.fg-blue-600{color:#1e88e5}.fg-blue-700{color:#1976d2}.fg-blue-800{color:#1565c0}.fg-blue-900{color:#0d47a1}.fg-blue-a100{color:#82b1ff}.fg-blue-a200{color:#448aff}.fg-blue-a400{color:#2979ff}.fg-blue-a700{color:#2962ff}.fg-light-blue{color:#03a9f4}.fg-light-blue-50{color:#e1f5fe}.fg-light-blue-100{color:#b3e5fc}.fg-light-blue-200{color:#81d4fa}.fg-light-blue-300{color:#4fc3f7}.fg-light-blue-400{color:#29b6f6}.fg-light-blue-500{color:#03a9f4}.fg-light-blue-600{color:#039be5}.fg-light-blue-700{color:#0288d1}.fg-light-blue-800{color:#0277bd}.fg-light-blue-900{color:#01579b}.fg-light-blue-a100{color:#80d8ff}.fg-light-blue-a200{color:#40c4ff}.fg-light-blue-a400{color:#00b0ff}.fg-light-blue-a700{color:#0091ea}.fg-cyan{color:#00bcd4}.fg-cyan-50{color:#e0f7fa}.fg-cyan-100{color:#b2ebf2}.fg-cyan-200{color:#80deea}.fg-cyan-300{color:#4dd0e1}.fg-cyan-400{color:#26c6da}.fg-cyan-500{color:#00bcd4}.fg-cyan-600{color:#00acc1}.fg-cyan-700{color:#0097a7}.fg-cyan-800{color:#00838f}.fg-cyan-900{color:#006064}.fg-cyan-a100{color:#84ffff}.fg-cyan-a200{color:#18ffff}.fg-cyan-a400{color:#00e5ff}.fg-cyan-a700{color:#00b8d4}.fg-teal{color:#009688}.fg-teal-50{color:#e0f2f1}.fg-teal-100{color:#b2dfdb}.fg-teal-200{color:#80cbc4}.fg-teal-300{color:#4db6ac}.fg-teal-400{color:#26a69a}.fg-teal-500{color:#009688}.fg-teal-600{color:#00897b}.fg-teal-700{color:#00796b}.fg-teal-800{color:#00695c}.fg-teal-900{color:#004d40}.fg-teal-a100{color:#a7ffeb}.fg-teal-a200{color:#64ffda}.fg-teal-a400{color:#1de9b6}.fg-teal-a700{color:#00bfa5}.fg-green{color:#4caf50}.fg-green-50{color:#e8f5e9}.fg-green-100{color:#c8e6c9}.fg-green-200{color:#a5d6a7}.fg-green-300{color:#81c784}.fg-green-400{color:#66bb6a}.fg-green-500{color:#4caf50}.fg-green-600{color:#43a047}.fg-green-700{color:#388e3c}.fg-green-800{color:#2e7d32}.fg-green-900{color:#1b5e20}.fg-green-a100{color:#b9f6ca}.fg-green-a200{color:#69f0ae}.fg-green-a400{color:#00e676}.fg-green-a700{color:#00c853}.fg-light-green{color:#8bc34a}.fg-light-green-50{color:#f1f8e9}.fg-light-green-100{color:#dcedc8}.fg-light-green-200{color:#c5e1a5}.fg-light-green-300{color:#aed581}.fg-light-green-400{color:#9ccc65}.fg-light-green-500{color:#8bc34a}.fg-light-green-600{color:#7cb342}.fg-light-green-700{color:#689f38}.fg-light-green-800{color:#558b2f}.fg-light-green-900{color:#33691e}.fg-light-green-a100{color:#ccff90}.fg-light-green-a200{color:#b2ff59}.fg-light-green-a400{color:#76ff03}.fg-light-green-a700{color:#64dd17}.fg-lime{color:#cddc39}.fg-lime-50{color:#f9fbe7}.fg-lime-100{color:#f0f4c3}.fg-lime-200{color:#e6ee9c}.fg-lime-300{color:#dce775}.fg-lime-400{color:#d4e157}.fg-lime-500{color:#cddc39}.fg-lime-600{color:#c0ca33}.fg-lime-700{color:#afb42b}.fg-lime-800{color:#9e9d24}.fg-lime-900{color:#827717}.fg-lime-a100{color:#f4ff81}.fg-lime-a200{color:#eeff41}.fg-lime-a400{color:#c6ff00}.fg-lime-a700{color:#aeea00}.fg-yellow{color:#ffeb3b}.fg-yellow-50{color:#fffde7}.fg-yellow-100{color:#fff9c4}.fg-yellow-200{color:#fff59d}.fg-yellow-300{color:#fff176}.fg-yellow-400{color:#ffee58}.fg-yellow-500{color:#ffeb3b}.fg-yellow-600{color:#fdd835}.fg-yellow-700{color:#fbc02d}.fg-yellow-800{color:#f9a825}.fg-yellow-900{color:#f57f17}.fg-yellow-a100{color:#ffff8d}.fg-yellow-a200{color:#ff0}.fg-yellow-a400{color:#ffea00}.fg-yellow-a700{color:#ffd600}.fg-amber{color:#ffc107}.fg-amber-50{color:#fff8e1}.fg-amber-100{color:#ffecb3}.fg-amber-200{color:#ffe082}.fg-amber-300{color:#ffd54f}.fg-amber-400{color:#ffca28}.fg-amber-500{color:#ffc107}.fg-amber-600{color:#ffb300}.fg-amber-700{color:#ffa000}.fg-amber-800{color:#ff8f00}.fg-amber-900{color:#ff6f00}.fg-amber-a100{color:#ffe57f}.fg-amber-a200{color:#ffd740}.fg-amber-a400{color:#ffc400}.fg-amber-a700{color:#ffab00}.fg-orange{color:#ff9800}.fg-orange-50{color:#fff3e0}.fg-orange-100{color:#ffe0b2}.fg-orange-200{color:#ffcc80}.fg-orange-300{color:#ffb74d}.fg-orange-400{color:#ffa726}.fg-orange-500{color:#ff9800}.fg-orange-600{color:#fb8c00}.fg-orange-700{color:#f57c00}.fg-orange-800{color:#ef6c00}.fg-orange-900{color:#e65100}.fg-orange-a100{color:#ffd180}.fg-orange-a200{color:#ffab40}.fg-orange-a400{color:#ff9100}.fg-orange-a700{color:#ff6d00}.fg-deep-orange{color:#ff5722}.fg-deep-orange-50{color:#fbe9e7}.fg-deep-orange-100{color:#ffccbc}.fg-deep-orange-200{color:#ffab91}.fg-deep-orange-300{color:#ff8a65}.fg-deep-orange-400{color:#ff7043}.fg-deep-orange-500{color:#ff5722}.fg-deep-orange-600{color:#f4511e}.fg-deep-orange-700{color:#e64a19}.fg-deep-orange-800{color:#d84315}.fg-deep-orange-900{color:#bf360c}.fg-deep-orange-a100{color:#ff9e80}.fg-deep-orange-a200{color:#ff6e40}.fg-deep-orange-a400{color:#ff3d00}.fg-deep-orange-a700{color:#dd2c00}.fg-brown{color:#795548}.fg-brown-50{color:#efebe9}.fg-brown-100{color:#d7ccc8}.fg-brown-200{color:#bcaaa4}.fg-brown-300{color:#a1887f}.fg-brown-400{color:#8d6e63}.fg-brown-500{color:#795548}.fg-brown-600{color:#6d4c41}.fg-brown-700{color:#5d4037}.fg-brown-800{color:#4e342e}.fg-brown-900{color:#3e2723}.fg-grey{color:#9e9e9e}.fg-grey-50{color:#fafafa}.fg-grey-100{color:#f5f5f5}.fg-grey-200{color:#eee}.fg-grey-300{color:#e0e0e0}.fg-grey-400{color:#bdbdbd}.fg-grey-500{color:#9e9e9e}.fg-grey-600{color:#757575}.fg-grey-700{color:#616161}.fg-grey-800{color:#424242}.fg-grey-900{color:#212121}.fg-blue-grey{color:#607d8b}.fg-blue-grey-50{color:#eceff1}.fg-blue-grey-100{color:#cfd8dc}.fg-blue-grey-200{color:#b0bec5}.fg-blue-grey-300{color:#90a4ae}.fg-blue-grey-400{color:#78909c}.fg-blue-grey-500{color:#607d8b}.fg-blue-grey-600{color:#546e7a}.fg-blue-grey-700{color:#455a64}.fg-blue-grey-800{color:#37474f}.fg-blue-grey-900{color:#263238}.fg-black{color:#000}.fg-white{color:#fff}

              
            
!

JS

              
                
              
            
!
999px

Console