react-mdl
Version:
React Components wrapper for Material Design Lite UI
1,810 lines (1,585 loc) • 348 kB
CSS
/**
* material-design-lite - Material Design Components in CSS, JS and HTML
* @version v1.1.1
* @license Apache-2.0
* @copyright 2015 Google, Inc.
* @link https://github.com/google/material-design-lite
*/
@charset "UTF-8";
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* Material Design Lite */
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*------------------------------------* $CONTENTS
\*------------------------------------*/
/**
* STYLE GUIDE VARIABLES------------------Declarations of Sass variables
* -----Typography
* -----Colors
* -----Textfield
* -----Switch
* -----Spinner
* -----Radio
* -----Menu
* -----List
* -----Layout
* -----Icon toggles
* -----Footer
* -----Column
* -----Checkbox
* -----Card
* -----Button
* -----Animation
* -----Progress
* -----Badge
* -----Shadows
* -----Grid
* -----Data table
* -----Dialog
* -----Snackbar
*
* Even though all variables have the `!default` directive, most of them
* should not be changed as they are dependent one another. This can cause
* visual distortions (like alignment issues) that are hard to track down
* and fix.
*/
/* ========== TYPOGRAPHY ========== */
/* We're splitting fonts into "preferred" and "performance" in order to optimize
page loading. For important text, such as the body, we want it to load
immediately and not wait for the web font load, whereas for other sections,
such as headers and titles, we're OK with things taking a bit longer to load.
We do have some optional classes and parameters in the mixins, in case you
definitely want to make sure you're using the preferred font and don't mind
the performance hit.
We should be able to improve on this once CSS Font Loading L3 becomes more
widely available.
*/
/* ========== COLORS ========== */
/**
*
* Material design color palettes.
* @see http://www.google.com/design/spec/style/color.html
*
**/
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* ========== Color Palettes ========== */
/* colors.scss */
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* ========== IMAGES ========== */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
/* ========== Standard Buttons ========== */
/* ========== Icon Toggles ========== */
/* ========== Radio Buttons ========== */
/* ========== Ripple effect ========== */
/* ========== Layout ========== */
/* ========== Content Tabs ========== */
/* ========== Checkboxes ========== */
/* ========== Switches ========== */
/* ========== Spinner ========== */
/* ========== Text fields ========== */
/* ========== Card ========== */
/* ========== Sliders ========== */
/* ========== Progress ========== */
/* ========== List ========== */
/* ========== Item ========== */
/* ========== Dropdown menu ========== */
/* ========== Tooltips ========== */
/* ========== Footer ========== */
/* TEXTFIELD */
/* SWITCH */
/* SPINNER */
/* RADIO */
/* MENU */
/* LIST */
/* LAYOUT */
/* ICON TOGGLE */
/* FOOTER */
/*mega-footer*/
/*mini-footer*/
/* CHECKBOX */
/* CARD */
/* Card dimensions */
/* Cover image */
/* BUTTON */
/**
*
* Dimensions
*
*/
/* ANIMATION */
/* PROGRESS */
/* BADGE */
/* SHADOWS */
/* GRID */
/* DATA TABLE */
/* DIALOG */
/* SNACKBAR */
/* TOOLTIP */
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* Typography */
/* Shadows */
/* Animations */
/* Dialog */
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*------------------------------------* $CONTENTS
\*------------------------------------*/
/**
* STYLE GUIDE VARIABLES------------------Declarations of Sass variables
* -----Typography
* -----Colors
* -----Textfield
* -----Switch
* -----Spinner
* -----Radio
* -----Menu
* -----List
* -----Layout
* -----Icon toggles
* -----Footer
* -----Column
* -----Checkbox
* -----Card
* -----Button
* -----Animation
* -----Progress
* -----Badge
* -----Shadows
* -----Grid
* -----Data table
* -----Dialog
* -----Snackbar
*
* Even though all variables have the `!default` directive, most of them
* should not be changed as they are dependent one another. This can cause
* visual distortions (like alignment issues) that are hard to track down
* and fix.
*/
/* ========== TYPOGRAPHY ========== */
/* We're splitting fonts into "preferred" and "performance" in order to optimize
page loading. For important text, such as the body, we want it to load
immediately and not wait for the web font load, whereas for other sections,
such as headers and titles, we're OK with things taking a bit longer to load.
We do have some optional classes and parameters in the mixins, in case you
definitely want to make sure you're using the preferred font and don't mind
the performance hit.
We should be able to improve on this once CSS Font Loading L3 becomes more
widely available.
*/
/* ========== COLORS ========== */
/**
*
* Material design color palettes.
* @see http://www.google.com/design/spec/style/color.html
*
**/
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* ========== Color Palettes ========== */
/* colors.scss */
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* ========== IMAGES ========== */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
/* ========== Standard Buttons ========== */
/* ========== Icon Toggles ========== */
/* ========== Radio Buttons ========== */
/* ========== Ripple effect ========== */
/* ========== Layout ========== */
/* ========== Content Tabs ========== */
/* ========== Checkboxes ========== */
/* ========== Switches ========== */
/* ========== Spinner ========== */
/* ========== Text fields ========== */
/* ========== Card ========== */
/* ========== Sliders ========== */
/* ========== Progress ========== */
/* ========== List ========== */
/* ========== Item ========== */
/* ========== Dropdown menu ========== */
/* ========== Tooltips ========== */
/* ========== Footer ========== */
/* TEXTFIELD */
/* SWITCH */
/* SPINNER */
/* RADIO */
/* MENU */
/* LIST */
/* LAYOUT */
/* ICON TOGGLE */
/* FOOTER */
/*mega-footer*/
/*mini-footer*/
/* CHECKBOX */
/* CARD */
/* Card dimensions */
/* Cover image */
/* BUTTON */
/**
*
* Dimensions
*
*/
/* ANIMATION */
/* PROGRESS */
/* BADGE */
/* SHADOWS */
/* GRID */
/* DATA TABLE */
/* DIALOG */
/* SNACKBAR */
/* TOOLTIP */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: rgba(0,0,0, 0.87);
font-size: 1em;
line-height: 1.4; }
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none; }
::selection {
background: #b3d4fc;
text-shadow: none; }
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0; }
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle; }
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0; }
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical; }
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0; }
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers:
*/
.hidden {
display: none !important; }
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden; }
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */ }
.clearfix:after {
clear: both; }
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
http://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after,
*:first-letter,
*:first-line {
background: transparent !important;
color: #000 !important;
/* Black prints faster: http://www.sanbeiji.com/archives/953 */
box-shadow: none !important;
text-shadow: none !important; }
a,
a:visited {
text-decoration: underline; }
a[href]:after {
content: " (" attr(href) ")"; }
abbr[title]:after {
content: " (" attr(title) ")"; }
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: ""; }
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid; }
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group; }
tr,
img {
page-break-inside: avoid; }
img {
max-width: 100% !important; }
p,
h2,
h3 {
orphans: 3;
widows: 3; }
h2,
h3 {
page-break-after: avoid; } }
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* Remove the unwanted box around FAB buttons */
/* More info: http://goo.gl/IPwKi */
a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
.mdl-icon-toggle, .mdl-item, .mdl-radio, .mdl-slider, .mdl-switch, .mdl-tabs__tab {
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
/*
* Make html take up the entire screen
* Then set touch-action to avoid touch delay on mobile IE
*/
html {
width: 100%;
height: 100%;
-ms-touch-action: manipulation;
touch-action: manipulation; }
/*
* Make body take up the entire screen
* Remove body margin so layout containers don't cause extra overflow.
*/
body {
width: 100%;
min-height: 100%;
margin: 0; }
/*
* Main display reset for IE support.
* Source: http://weblog.west-wind.com/posts/2015/Jan/12/main-HTML5-Tag-not-working-in-Internet-Explorer-91011
*/
main {
display: block; }
/*
* Apply no display to elements with the hidden attribute.
* IE 9 and 10 support.
*/
*[hidden] {
display: none !important; }
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*------------------------------------* $CONTENTS
\*------------------------------------*/
/**
* STYLE GUIDE VARIABLES------------------Declarations of Sass variables
* -----Typography
* -----Colors
* -----Textfield
* -----Switch
* -----Spinner
* -----Radio
* -----Menu
* -----List
* -----Layout
* -----Icon toggles
* -----Footer
* -----Column
* -----Checkbox
* -----Card
* -----Button
* -----Animation
* -----Progress
* -----Badge
* -----Shadows
* -----Grid
* -----Data table
* -----Dialog
* -----Snackbar
*
* Even though all variables have the `!default` directive, most of them
* should not be changed as they are dependent one another. This can cause
* visual distortions (like alignment issues) that are hard to track down
* and fix.
*/
/* ========== TYPOGRAPHY ========== */
/* We're splitting fonts into "preferred" and "performance" in order to optimize
page loading. For important text, such as the body, we want it to load
immediately and not wait for the web font load, whereas for other sections,
such as headers and titles, we're OK with things taking a bit longer to load.
We do have some optional classes and parameters in the mixins, in case you
definitely want to make sure you're using the preferred font and don't mind
the performance hit.
We should be able to improve on this once CSS Font Loading L3 becomes more
widely available.
*/
/* ========== COLORS ========== */
/**
*
* Material design color palettes.
* @see http://www.google.com/design/spec/style/color.html
*
**/
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* ========== Color Palettes ========== */
/* colors.scss */
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* ========== IMAGES ========== */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
/* ========== Standard Buttons ========== */
/* ========== Icon Toggles ========== */
/* ========== Radio Buttons ========== */
/* ========== Ripple effect ========== */
/* ========== Layout ========== */
/* ========== Content Tabs ========== */
/* ========== Checkboxes ========== */
/* ========== Switches ========== */
/* ========== Spinner ========== */
/* ========== Text fields ========== */
/* ========== Card ========== */
/* ========== Sliders ========== */
/* ========== Progress ========== */
/* ========== List ========== */
/* ========== Item ========== */
/* ========== Dropdown menu ========== */
/* ========== Tooltips ========== */
/* ========== Footer ========== */
/* TEXTFIELD */
/* SWITCH */
/* SPINNER */
/* RADIO */
/* MENU */
/* LIST */
/* LAYOUT */
/* ICON TOGGLE */
/* FOOTER */
/*mega-footer*/
/*mini-footer*/
/* CHECKBOX */
/* CARD */
/* Card dimensions */
/* Cover image */
/* BUTTON */
/**
*
* Dimensions
*
*/
/* ANIMATION */
/* PROGRESS */
/* BADGE */
/* SHADOWS */
/* GRID */
/* DATA TABLE */
/* DIALOG */
/* SNACKBAR */
/* TOOLTIP */
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* Typography */
/* Shadows */
/* Animations */
/* Dialog */
html, body {
font-family: "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px; }
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0; }
/**
* Styles for HTML elements
*/
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 56px;
font-weight: 400;
line-height: 1.35;
letter-spacing: -0.02em;
opacity: 0.54;
font-size: 0.6em; }
h1 {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 56px;
font-weight: 400;
line-height: 1.35;
letter-spacing: -0.02em;
margin-top: 24px;
margin-bottom: 24px; }
h2 {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 45px;
font-weight: 400;
line-height: 48px;
margin-top: 24px;
margin-bottom: 24px; }
h3 {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 34px;
font-weight: 400;
line-height: 40px;
margin-top: 24px;
margin-bottom: 24px; }
h4 {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 24px;
font-weight: 400;
line-height: 32px;
-moz-osx-font-smoothing: grayscale;
margin-top: 24px;
margin-bottom: 16px; }
h5 {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
margin-top: 24px;
margin-bottom: 16px; }
h6 {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.04em;
margin-top: 24px;
margin-bottom: 16px; }
p {
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0;
margin-bottom: 16px; }
a {
color: rgb(255,64,129);
font-weight: 500; }
blockquote {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
position: relative;
font-size: 24px;
font-weight: 300;
font-style: italic;
line-height: 1.35;
letter-spacing: 0.08em; }
blockquote:before {
position: absolute;
left: -0.5em;
content: '“'; }
blockquote:after {
content: '”';
margin-left: -0.05em; }
mark {
background-color: #f4ff81; }
dt {
font-weight: 700; }
address {
font-size: 12px;
font-weight: 400;
line-height: 1;
letter-spacing: 0;
font-style: normal; }
ul, ol {
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0; }
/**
* Class Name Styles
*/
.mdl-typography--display-4 {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 112px;
font-weight: 300;
line-height: 1;
letter-spacing: -0.04em; }
.mdl-typography--display-4-color-contrast {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 112px;
font-weight: 300;
line-height: 1;
letter-spacing: -0.04em;
opacity: 0.54; }
.mdl-typography--display-3 {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 56px;
font-weight: 400;
line-height: 1.35;
letter-spacing: -0.02em; }
.mdl-typography--display-3-color-contrast {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 56px;
font-weight: 400;
line-height: 1.35;
letter-spacing: -0.02em;
opacity: 0.54; }
.mdl-typography--display-2 {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 45px;
font-weight: 400;
line-height: 48px; }
.mdl-typography--display-2-color-contrast {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 45px;
font-weight: 400;
line-height: 48px;
opacity: 0.54; }
.mdl-typography--display-1 {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 34px;
font-weight: 400;
line-height: 40px; }
.mdl-typography--display-1-color-contrast {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 34px;
font-weight: 400;
line-height: 40px;
opacity: 0.54; }
.mdl-typography--headline {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 24px;
font-weight: 400;
line-height: 32px;
-moz-osx-font-smoothing: grayscale; }
.mdl-typography--headline-color-contrast {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 24px;
font-weight: 400;
line-height: 32px;
-moz-osx-font-smoothing: grayscale;
opacity: 0.87; }
.mdl-typography--title {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em; }
.mdl-typography--title-color-contrast {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
opacity: 0.87; }
.mdl-typography--subhead {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.04em; }
.mdl-typography--subhead-color-contrast {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.04em;
opacity: 0.87; }
.mdl-typography--body-2 {
font-size: 14px;
font-weight: bold;
line-height: 24px;
letter-spacing: 0; }
.mdl-typography--body-2-color-contrast {
font-size: 14px;
font-weight: bold;
line-height: 24px;
letter-spacing: 0;
opacity: 0.87; }
.mdl-typography--body-1 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0; }
.mdl-typography--body-1-color-contrast {
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0;
opacity: 0.87; }
.mdl-typography--body-2-force-preferred-font {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0; }
.mdl-typography--body-2-force-preferred-font-color-contrast {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0;
opacity: 0.87; }
.mdl-typography--body-1-force-preferred-font {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0; }
.mdl-typography--body-1-force-preferred-font-color-contrast {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0;
opacity: 0.87; }
.mdl-typography--caption {
font-size: 12px;
font-weight: 400;
line-height: 1;
letter-spacing: 0; }
.mdl-typography--caption-force-preferred-font {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1;
letter-spacing: 0; }
.mdl-typography--caption-color-contrast {
font-size: 12px;
font-weight: 400;
line-height: 1;
letter-spacing: 0;
opacity: 0.54; }
.mdl-typography--caption-force-preferred-font-color-contrast {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1;
letter-spacing: 0;
opacity: 0.54; }
.mdl-typography--menu {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: 0; }
.mdl-typography--menu-color-contrast {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
opacity: 0.87; }
.mdl-typography--button {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
line-height: 1;
letter-spacing: 0; }
.mdl-typography--button-color-contrast {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
line-height: 1;
letter-spacing: 0;
opacity: 0.87; }
.mdl-typography--text-left {
text-align: left; }
.mdl-typography--text-right {
text-align: right; }
.mdl-typography--text-center {
text-align: center; }
.mdl-typography--text-justify {
text-align: justify; }
.mdl-typography--text-nowrap {
white-space: nowrap; }
.mdl-typography--text-lowercase {
text-transform: lowercase; }
.mdl-typography--text-uppercase {
text-transform: uppercase; }
.mdl-typography--text-capitalize {
text-transform: capitalize; }
.mdl-typography--font-thin {
font-weight: 200 !important; }
.mdl-typography--font-light {
font-weight: 300 !important; }
.mdl-typography--font-regular {
font-weight: 400 !important; }
.mdl-typography--font-medium {
font-weight: 500 !important; }
.mdl-typography--font-bold {
font-weight: 700 !important; }
.mdl-typography--font-black {
font-weight: 900 !important; }
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
word-wrap: normal;
-moz-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased; }
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*------------------------------------* $CONTENTS
\*------------------------------------*/
/**
* STYLE GUIDE VARIABLES------------------Declarations of Sass variables
* -----Typography
* -----Colors
* -----Textfield
* -----Switch
* -----Spinner
* -----Radio
* -----Menu
* -----List
* -----Layout
* -----Icon toggles
* -----Footer
* -----Column
* -----Checkbox
* -----Card
* -----Button
* -----Animation
* -----Progress
* -----Badge
* -----Shadows
* -----Grid
* -----Data table
* -----Dialog
* -----Snackbar
*
* Even though all variables have the `!default` directive, most of them
* should not be changed as they are dependent one another. This can cause
* visual distortions (like alignment issues) that are hard to track down
* and fix.
*/
/* ========== TYPOGRAPHY ========== */
/* We're splitting fonts into "preferred" and "performance" in order to optimize
page loading. For important text, such as the body, we want it to load
immediately and not wait for the web font load, whereas for other sections,
such as headers and titles, we're OK with things taking a bit longer to load.
We do have some optional classes and parameters in the mixins, in case you
definitely want to make sure you're using the preferred font and don't mind
the performance hit.
We should be able to improve on this once CSS Font Loading L3 becomes more
widely available.
*/
/* ========== COLORS ========== */
/**
*
* Material design color palettes.
* @see http://www.google.com/design/spec/style/color.html
*
**/
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* ========== Color Palettes ========== */
/* colors.scss */
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* ========== IMAGES ========== */
/* ========== Color & Themes ========== */
/* ========== Typography ========== */
/* ========== Components ========== */
/* ========== Standard Buttons ========== */
/* ========== Icon Toggles ========== */
/* ========== Radio Buttons ========== */
/* ========== Ripple effect ========== */
/* ========== Layout ========== */
/* ========== Content Tabs ========== */
/* ========== Checkboxes ========== */
/* ========== Switches ========== */
/* ========== Spinner ========== */
/* ========== Text fields ========== */
/* ========== Card ========== */
/* ========== Sliders ========== */
/* ========== Progress ========== */
/* ========== List ========== */
/* ========== Item ========== */
/* ========== Dropdown menu ========== */
/* ========== Tooltips ========== */
/* ========== Footer ========== */
/* TEXTFIELD */
/* SWITCH */
/* SPINNER */
/* RADIO */
/* MENU */
/* LIST */
/* LAYOUT */
/* ICON TOGGLE */
/* FOOTER */
/*mega-footer*/
/*mini-footer*/
/* CHECKBOX */
/* CARD */
/* Card dimensions */
/* Cover image */
/* BUTTON */
/**
*
* Dimensions
*
*/
/* ANIMATION */
/* PROGRESS */
/* BADGE */
/* SHADOWS */
/* GRID */
/* DATA TABLE */
/* DIALOG */
/* SNACKBAR */
/* TOOLTIP */
.mdl-color-text--red {
color: rgb(244,67,54) !important; }
.mdl-color--red {
background-color: rgb(244,67,54) !important; }
.mdl-color-text--red-50 {
color: rgb(255,235,238) !important; }
.mdl-color--red-50 {
background-color: rgb(255,235,238) !important; }
.mdl-color-text--red-100 {
color: rgb(255,205,210) !important; }
.mdl-color--red-100 {
background-color: rgb(255,205,210) !important; }
.mdl-color-text--red-200 {
color: rgb(239,154,154) !important; }
.mdl-color--red-200 {
background-color: rgb(239,154,154) !important; }
.mdl-color-text--red-300 {
color: rgb(229,115,115) !important; }
.mdl-color--red-300 {
background-color: rgb(229,115,115) !important; }
.mdl-color-text--red-400 {
color: rgb(239,83,80) !important; }
.mdl-color--red-400 {
background-color: rgb(239,83,80) !important; }
.mdl-color-text--red-500 {
color: rgb(244,67,54) !important; }
.mdl-color--red-500 {
background-color: rgb(244,67,54) !important; }
.mdl-color-text--red-600 {
color: rgb(229,57,53) !important; }
.mdl-color--red-600 {
background-color: rgb(229,57,53) !important; }
.mdl-color-text--red-700 {
color: rgb(211,47,47) !important; }
.mdl-color--red-700 {
background-color: rgb(211,47,47) !important; }
.mdl-color-text--red-800 {
color: rgb(198,40,40) !important; }
.mdl-color--red-800 {
background-color: rgb(198,40,40) !important; }
.mdl-color-text--red-900 {
color: rgb(183,28,28) !important; }
.mdl-color--red-900 {
background-color: rgb(183,28,28) !important; }
.mdl-color-text--red-A100 {
color: rgb(255,138,128) !important; }
.mdl-color--red-A100 {
background-color: rgb(255,138,128) !important; }
.mdl-color-text--red-A200 {
color: rgb(255,82,82) !important; }
.mdl-color--red-A200 {
background-color: rgb(255,82,82) !important; }
.mdl-color-text--red-A400 {
color: rgb(255,23,68) !important; }
.mdl-color--red-A400 {
background-color: rgb(255,23,68) !important; }
.mdl-color-text--red-A700 {
color: rgb(213,0,0) !important; }
.mdl-color--red-A700 {
background-color: rgb(213,0,0) !important; }
.mdl-color-text--pink {
color: rgb(233,30,99) !important; }
.mdl-color--pink {
background-color: rgb(233,30,99) !important; }
.mdl-color-text--pink-50 {
color: rgb(252,228,236) !important; }
.mdl-color--pink-50 {
background-color: rgb(252,228,236) !important; }
.mdl-color-text--pink-100 {
color: rgb(248,187,208) !important; }
.mdl-color--pink-100 {
background-color: rgb(248,187,208) !important; }
.mdl-color-text--pink-200 {
color: rgb(244,143,177) !important; }
.mdl-color--pink-200 {
background-color: rgb(244,143,177) !important; }
.mdl-color-text--pink-300 {
color: rgb(240,98,146) !important; }
.mdl-color--pink-300 {
background-color: rgb(240,98,146) !important; }
.mdl-color-text--pink-400 {
color: rgb(236,64,122) !important; }
.mdl-color--pink-400 {
background-color: rgb(236,64,122) !important; }
.mdl-color-text--pink-500 {
color: rgb(233,30,99) !important; }
.mdl-color--pink-500 {
background-color: rgb(233,30,99) !important; }
.mdl-color-text--pink-600 {
color: rgb(216,27,96) !important; }
.mdl-color--pink-600 {
background-color: rgb(216,27,96) !important; }
.mdl-color-text--pink-700 {
color: rgb(194,24,91) !important; }
.mdl-color--pink-700 {
background-color: rgb(194,24,91) !important; }
.mdl-color-text--pink-800 {
color: rgb(173,20,87) !important; }
.mdl-color--pink-800 {
background-color: rgb(173,20,87) !important; }
.mdl-color-text--pink-900 {
color: rgb(136,14,79) !important; }
.mdl-color--pink-900 {
background-color: rgb(136,14,79) !important; }
.mdl-color-text--pink-A100 {
color: rgb(255,128,171) !important; }
.mdl-color--pink-A100 {
background-color: rgb(255,128,171) !important; }
.mdl-color-text--pink-A200 {
color: rgb(255,64,129) !important; }
.mdl-color--pink-A200 {
background-color: rgb(255,64,129) !important; }
.mdl-color-text--pink-A400 {
color: rgb(245,0,87) !important; }
.mdl-color--pink-A400 {
background-color: rgb(245,0,87) !important; }
.mdl-color-text--pink-A700 {
color: rgb(197,17,98) !important; }
.mdl-color--pink-A700 {
background-color: rgb(197,17,98) !important; }
.mdl-color-text--purple {
color: rgb(156,39,176) !important; }
.mdl-color--purple {
background-color: rgb(156,39,176) !important; }
.mdl-color-text--purple-50 {
color: rgb(243,229,245) !important; }
.mdl-color--purple-50 {
background-color: rgb(243,229,245) !important; }
.mdl-color-text--purple-100 {
color: rgb(225,190,231) !important; }
.mdl-color--purple-100 {
background-color: rgb(225,190,231) !important; }
.mdl-color-text--purple-200 {
color: rgb(206,147,216) !important; }
.mdl-color--purple-200 {
background-color: rgb(206,147,216) !important; }
.mdl-color-text--purple-300 {
color: rgb(186,104,200) !important; }
.mdl-color--purple-300 {
background-color: rgb(186,104,200) !important; }
.mdl-color-text--purple-400 {
color: rgb(171,71,188) !important; }
.mdl-color--purple-400 {
background-color: rgb(171,71,188) !important; }
.mdl-color-text--purple-500 {
color: rgb(156,39,176) !important; }
.mdl-color--purple-500 {
background-color: rgb(156,39,176) !important; }
.mdl-color-text--purple-600 {
color: rgb(142,36,170) !important; }
.mdl-color--purple-600 {
background-color: rgb(142,36,170) !important; }
.mdl-color-text--purple-700 {
color: rgb(123,31,162) !important; }
.mdl-color--purple-700 {
background-color: rgb(123,31,162) !important; }
.mdl-color-text--purple-800 {
color: rgb(106,27,154) !important; }
.mdl-color--purple-800 {
background-color: rgb(106,27,154) !important; }
.mdl-color-text--purple-900 {
color: rgb(74,20,140) !important; }
.mdl-color--purple-900 {
background-color: rgb(74,20,140) !important; }
.mdl-color-text--purple-A100 {
color: rgb(234,128,252) !important; }
.mdl-color--purple-A100 {
background-color: rgb(234,128,252) !important; }
.mdl-color-text--purple-A200 {
color: rgb(224,64,251) !important; }
.mdl-color--purple-A200 {
background-color: rgb(224,64,251) !important; }
.mdl-color-text--purple-A400 {
color: rgb(213,0,249) !important; }
.mdl-color--purple-A400 {
background-color: rgb(213,0,249) !important; }
.mdl-color-text--purple-A700 {
color: rgb(170,0,255) !important; }
.mdl-color--purple-A700 {
background-color: rgb(170,0,255) !important; }
.mdl-color-text--deep-purple {
color: rgb(103,58,183) !important; }
.mdl-color--deep-purple {
background-color: rgb(103,58,183) !important; }
.mdl-color-text--deep-purple-50 {
color: rgb(237,231,246) !important; }
.mdl-color--deep-purple-50 {
background-color: rgb(237,231,246) !important; }
.mdl-color-text--deep-purple-100 {
color: rgb(209,196,233) !important; }
.mdl-color--deep-purple-100 {
background-color: rgb(209,196,233) !important; }
.mdl-color-text--deep-purple-200 {
color: rgb(179,157,219) !important; }
.mdl-color--deep-purple-200 {
background-color: rgb(179,157,219) !important; }
.mdl-color-text--deep-purple-300 {
color: rgb(149,117,205) !important; }
.mdl-color--deep-purple-300 {
background-color: rgb(149,117,205) !important; }
.mdl-color-text--deep-purple-400 {
color: rgb(126,87,194) !important; }
.mdl-color--deep-purple-400 {
background-color: rgb(126,87,194) !important; }
.mdl-color-text--deep-purple-500 {
color: rgb(103,58,183) !important; }
.mdl-color--deep-purple-500 {
background-color: rgb(103,58,183) !important; }
.mdl-color-text--deep-purple-600 {
color: rgb(94,53,177) !important; }
.mdl-color--deep-purple-600 {
background-color: rgb(94,53,177) !important; }
.mdl-color-text--deep-purple-700 {
color: rgb(81,45,168) !important; }
.mdl-color--deep-purple-700 {
background-color: rgb(81,45,168) !important; }
.mdl-color-text--deep-purple-800 {
color: rgb(69,39,160) !important; }
.mdl-color--deep-purple-800 {
background-color: rgb(69,39,160) !important; }
.mdl-color-text--deep-purple-900 {
color: rgb(49,27,146) !important; }
.mdl-color--deep-purple-900 {
background-color: rgb(49,27,146) !important; }
.mdl-color-text--deep-purple-A100 {
color: rgb(179,136,255) !important; }
.mdl-color--deep-purple-A100 {
background-color: rgb(179,136,255) !important; }
.mdl-color-text--deep-purple-A200 {
color: rgb(124,77,255) !important; }
.mdl-color--deep-purple-A200 {
background-color: rgb(124,77,255) !important; }
.mdl-color-text--deep-purple-A400 {
color: rgb(101,31,255) !important; }
.mdl-color--deep-purple-A400 {
background-color: rgb(101,31,255) !important; }
.mdl-color-text--deep-purple-A700 {
color: rgb(98,0,234) !important; }
.mdl-color--deep-purple-A700 {
background-color: rgb(98,0,234) !important; }
.mdl-color-text--indigo {
color: rgb(63,81,181) !important; }
.mdl-color--indigo {
background-color: rgb(63,81,181) !important; }
.mdl-color-text--indigo-50 {
color: rgb(232,234,246) !important; }
.mdl-color--indigo-50 {
background-color: rgb(232,234,246) !important; }
.mdl-color-text--indigo-100 {
color: rgb(197,202,233) !important; }
.mdl-color--indigo-100 {
background-color: rgb(197,202,233) !important; }
.mdl-color-text--indigo-200 {
color: rgb(159,168,218) !important; }
.mdl-color--indigo-200 {
background-color: rgb(159,168,218) !important; }
.mdl-color-text--indigo-300 {
color: rgb(121,134,203) !important; }
.mdl-color--indigo-300 {
background-color: rgb(121,134,203) !important; }
.mdl-color-text--indigo-400 {
color: rgb(92,107,192) !important; }
.mdl-color--indigo-400 {
background-color: rgb(92,107,192) !important; }
.mdl-color-text--indigo-500 {
color: rgb(63,81,181) !important; }
.mdl-color--indigo-500 {
background-color: rgb(63,81,181) !important; }
.mdl-color-text--indigo-600 {
color: rgb(57,73,171) !important; }
.mdl-color--indigo-600 {
background-color: rgb(57,73,171) !important; }
.mdl-color-text--indigo-700 {
color: rgb(48,63,159) !important; }
.mdl-color--indigo-700 {
background-color: rgb(48,63,159) !important; }
.mdl-color-text--indigo-800 {
color: rgb(40,53,147) !important; }
.mdl-color--indigo-800 {
background-color: rgb(40,53,147) !important; }
.mdl-color-text--indigo-900 {
color: rgb(26,35,126) !important; }
.mdl-color--indigo-900 {
background-color: rgb(26,35,126) !important; }
.mdl-color-text--indigo-A100 {
color: rgb(140,158,255) !important; }
.mdl-color--indigo-A100 {
background-color: rgb(140,158,255) !important; }
.mdl-color-text--indigo-A200 {
color: rgb(83,109,254) !important; }
.mdl-col