2 * material-design-lite - Material Design Components in CSS, JS and HTML
5 * @copyright 2015 Google, Inc.
6 * @link https://github.com/google/material-design-lite
10 * Copyright 2015 Google Inc. All Rights Reserved.
12 * Licensed under the Apache License, Version 2.0 (the "License");
13 * you may not use this file except in compliance with the License.
14 * You may obtain a copy of the License at
16 * http://www.apache.org/licenses/LICENSE-2.0
18 * Unless required by applicable law or agreed to in writing, software
19 * distributed under the License is distributed on an "AS IS" BASIS,
20 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
21 * See the License for the specific language governing permissions and
22 * limitations under the License.
24 /* Material Design Lite */
26 * Copyright 2015 Google Inc. All Rights Reserved.
28 * Licensed under the Apache License, Version 2.0 (the "License");
29 * you may not use this file except in compliance with the License.
30 * You may obtain a copy of the License at
32 * http://www.apache.org/licenses/LICENSE-2.0
34 * Unless required by applicable law or agreed to in writing, software
35 * distributed under the License is distributed on an "AS IS" BASIS,
36 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
37 * See the License for the specific language governing permissions and
38 * limitations under the License.
40 /*------------------------------------* $CONTENTS
41 \*------------------------------------*/
43 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
70 * Even though all variables have the `!default` directive, most of them
71 * should not be changed as they are dependent one another. This can cause
72 * visual distortions (like alignment issues) that are hard to track down
75 /* ========== TYPOGRAPHY ========== */
76 /* We're splitting fonts into "preferred" and "performance" in order to optimize
77 page loading. For important text, such as the body, we want it to load
78 immediately and not wait for the web font load, whereas for other sections,
79 such as headers and titles, we're OK with things taking a bit longer to load.
80 We do have some optional classes and parameters in the mixins, in case you
81 definitely want to make sure you're using the preferred font and don't mind
83 We should be able to improve on this once CSS Font Loading L3 becomes more
86 /* ========== COLORS ========== */
89 * Material design color palettes.
90 * @see http://www.google.com/design/spec/style/color.html
94 * Copyright 2015 Google Inc. All Rights Reserved.
96 * Licensed under the Apache License, Version 2.0 (the "License");
97 * you may not use this file except in compliance with the License.
98 * You may obtain a copy of the License at
100 * http://www.apache.org/licenses/LICENSE-2.0
102 * Unless required by applicable law or agreed to in writing, software
103 * distributed under the License is distributed on an "AS IS" BASIS,
104 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
105 * See the License for the specific language governing permissions and
106 * limitations under the License.
108 /* ========== Color Palettes ========== */
111 * Copyright 2015 Google Inc. All Rights Reserved.
113 * Licensed under the Apache License, Version 2.0 (the "License");
114 * you may not use this file except in compliance with the License.
115 * You may obtain a copy of the License at
117 * http://www.apache.org/licenses/LICENSE-2.0
119 * Unless required by applicable law or agreed to in writing, software
120 * distributed under the License is distributed on an "AS IS" BASIS,
121 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
122 * See the License for the specific language governing permissions and
123 * limitations under the License.
125 /* ========== IMAGES ========== */
126 /* ========== Color & Themes ========== */
127 /* ========== Typography ========== */
128 /* ========== Components ========== */
129 /* ========== Standard Buttons ========== */
130 /* ========== Icon Toggles ========== */
131 /* ========== Radio Buttons ========== */
132 /* ========== Ripple effect ========== */
133 /* ========== Layout ========== */
134 /* ========== Content Tabs ========== */
135 /* ========== Checkboxes ========== */
136 /* ========== Switches ========== */
137 /* ========== Spinner ========== */
138 /* ========== Text fields ========== */
139 /* ========== Card ========== */
140 /* ========== Sliders ========== */
141 /* ========== Progress ========== */
142 /* ========== List ========== */
143 /* ========== Item ========== */
144 /* ========== Dropdown menu ========== */
145 /* ========== Tooltips ========== */
146 /* ========== Footer ========== */
160 /* Card dimensions */
179 * Copyright 2015 Google Inc. All Rights Reserved.
181 * Licensed under the Apache License, Version 2.0 (the "License");
182 * you may not use this file except in compliance with the License.
183 * You may obtain a copy of the License at
185 * http://www.apache.org/licenses/LICENSE-2.0
187 * Unless required by applicable law or agreed to in writing, software
188 * distributed under the License is distributed on an "AS IS" BASIS,
189 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
190 * See the License for the specific language governing permissions and
191 * limitations under the License.
198 * Copyright 2015 Google Inc. All Rights Reserved.
200 * Licensed under the Apache License, Version 2.0 (the "License");
201 * you may not use this file except in compliance with the License.
202 * You may obtain a copy of the License at
204 * http://www.apache.org/licenses/LICENSE-2.0
206 * Unless required by applicable law or agreed to in writing, software
207 * distributed under the License is distributed on an "AS IS" BASIS,
208 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
209 * See the License for the specific language governing permissions and
210 * limitations under the License.
213 * Copyright 2015 Google Inc. All Rights Reserved.
215 * Licensed under the Apache License, Version 2.0 (the "License");
216 * you may not use this file except in compliance with the License.
217 * You may obtain a copy of the License at
219 * http://www.apache.org/licenses/LICENSE-2.0
221 * Unless required by applicable law or agreed to in writing, software
222 * distributed under the License is distributed on an "AS IS" BASIS,
223 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
224 * See the License for the specific language governing permissions and
225 * limitations under the License.
228 * Copyright 2015 Google Inc. All Rights Reserved.
230 * Licensed under the Apache License, Version 2.0 (the "License");
231 * you may not use this file except in compliance with the License.
232 * You may obtain a copy of the License at
234 * http://www.apache.org/licenses/LICENSE-2.0
236 * Unless required by applicable law or agreed to in writing, software
237 * distributed under the License is distributed on an "AS IS" BASIS,
238 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
239 * See the License for the specific language governing permissions and
240 * limitations under the License.
242 /*------------------------------------* $CONTENTS
243 \*------------------------------------*/
245 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
272 * Even though all variables have the `!default` directive, most of them
273 * should not be changed as they are dependent one another. This can cause
274 * visual distortions (like alignment issues) that are hard to track down
277 /* ========== TYPOGRAPHY ========== */
278 /* We're splitting fonts into "preferred" and "performance" in order to optimize
279 page loading. For important text, such as the body, we want it to load
280 immediately and not wait for the web font load, whereas for other sections,
281 such as headers and titles, we're OK with things taking a bit longer to load.
282 We do have some optional classes and parameters in the mixins, in case you
283 definitely want to make sure you're using the preferred font and don't mind
285 We should be able to improve on this once CSS Font Loading L3 becomes more
288 /* ========== COLORS ========== */
291 * Material design color palettes.
292 * @see http://www.google.com/design/spec/style/color.html
296 * Copyright 2015 Google Inc. All Rights Reserved.
298 * Licensed under the Apache License, Version 2.0 (the "License");
299 * you may not use this file except in compliance with the License.
300 * You may obtain a copy of the License at
302 * http://www.apache.org/licenses/LICENSE-2.0
304 * Unless required by applicable law or agreed to in writing, software
305 * distributed under the License is distributed on an "AS IS" BASIS,
306 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
307 * See the License for the specific language governing permissions and
308 * limitations under the License.
310 /* ========== Color Palettes ========== */
313 * Copyright 2015 Google Inc. All Rights Reserved.
315 * Licensed under the Apache License, Version 2.0 (the "License");
316 * you may not use this file except in compliance with the License.
317 * You may obtain a copy of the License at
319 * http://www.apache.org/licenses/LICENSE-2.0
321 * Unless required by applicable law or agreed to in writing, software
322 * distributed under the License is distributed on an "AS IS" BASIS,
323 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
324 * See the License for the specific language governing permissions and
325 * limitations under the License.
327 /* ========== IMAGES ========== */
328 /* ========== Color & Themes ========== */
329 /* ========== Typography ========== */
330 /* ========== Components ========== */
331 /* ========== Standard Buttons ========== */
332 /* ========== Icon Toggles ========== */
333 /* ========== Radio Buttons ========== */
334 /* ========== Ripple effect ========== */
335 /* ========== Layout ========== */
336 /* ========== Content Tabs ========== */
337 /* ========== Checkboxes ========== */
338 /* ========== Switches ========== */
339 /* ========== Spinner ========== */
340 /* ========== Text fields ========== */
341 /* ========== Card ========== */
342 /* ========== Sliders ========== */
343 /* ========== Progress ========== */
344 /* ========== List ========== */
345 /* ========== Item ========== */
346 /* ========== Dropdown menu ========== */
347 /* ========== Tooltips ========== */
348 /* ========== Footer ========== */
362 /* Card dimensions */
381 * What follows is the result of much research on cross-browser styling.
382 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
383 * Kroc Camen, and the H5BP dev community and team.
385 /* ==========================================================================
386 Base styles: opinionated defaults
387 ========================================================================== */
389 color: rgba(0, 0, 0, 0.87);
395 * Remove text-shadow in selection highlight:
396 * https://twitter.com/miketaylr/status/12228805301
398 * These selection rule sets have to be separate.
399 * Customize the background color to match your design.
412 * A better looking default horizontal rule
418 border-top: 1px solid #ccc;
424 * Remove the gap between audio, canvas, iframes,
425 * images, videos and the bottom of their containers:
426 * https://github.com/h5bp/html5-boilerplate/issues/440
434 vertical-align: middle;
438 * Remove default fieldset styles.
447 * Allow only vertical resizing of textareas.
453 /* ==========================================================================
454 Browser Upgrade Prompt
455 ========================================================================== */
463 /* ==========================================================================
464 Author's custom styles
465 ========================================================================== */
466 /* ==========================================================================
468 ========================================================================== */
470 * Hide visually and from screen readers:
473 display: none !important;
477 * Hide only visually, but have it available for screen readers:
478 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
492 * Extends the .visuallyhidden class to allow the element
493 * to be focusable when navigated to via the keyboard:
494 * https://www.drupal.org/node/897638
496 .visuallyhidden.focusable:active,
497 .visuallyhidden.focusable:focus {
507 * Hide visually and from screen readers, but maintain layout
514 * Clearfix: contain floats
516 * For modern browsers
517 * 1. The space content is one way to avoid an Opera bug when the
518 * `contenteditable` attribute is included anywhere else in the document.
519 * Otherwise it causes space to appear at the top and bottom of elements
520 * that receive the `clearfix` class.
521 * 2. The use of `table` rather than `block` is only necessary if using
522 * `:before` to contain the top-margins of child elements.
536 /* ==========================================================================
537 EXAMPLE Media Queries for Responsive Design.
538 These examples override the primary ('mobile first') styles.
539 Modify as content requires.
540 ========================================================================== */
541 @media only screen and (min-width: 35em) {
542 /* Style adjustments for viewports that meet the condition */
545 @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
546 /* Style adjustments for high resolution devices */
549 /* ==========================================================================
551 Inlined to avoid the additional HTTP request:
552 http://www.phpied.com/delay-loading-your-print-css/
553 ========================================================================== */
559 background: transparent !important;
560 color: #000 !important;
561 /* Black prints faster: http://www.sanbeiji.com/archives/953 */
562 box-shadow: none !important;
567 text-decoration: underline;
571 content: " (" attr(href) ")";
575 content: " (" attr(title) ")";
579 * Don't show links that are fragment identifiers,
580 * or use the `javascript:` pseudo protocol
583 a[href^="javascript:"]:after {
589 border: 1px solid #999;
590 page-break-inside: avoid;
595 * http://css-discuss.incutio.com/wiki/Printing_Tables
598 display: table-header-group;
603 page-break-inside: avoid;
607 max-width: 100% !important;
619 page-break-after: avoid;
624 * Copyright 2015 Google Inc. All Rights Reserved.
626 * Licensed under the Apache License, Version 2.0 (the "License");
627 * you may not use this file except in compliance with the License.
628 * You may obtain a copy of the License at
630 * http://www.apache.org/licenses/LICENSE-2.0
632 * Unless required by applicable law or agreed to in writing, software
633 * distributed under the License is distributed on an "AS IS" BASIS,
634 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
635 * See the License for the specific language governing permissions and
636 * limitations under the License.
638 /* Remove the unwanted box around FAB buttons */
639 /* More info: http://goo.gl/IPwKi */
640 a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
641 .mdl-icon-toggle, .mdl-item, .mdl-radio, .mdl-slider, .mdl-switch, .mdl-tabs__tab {
642 -webkit-tap-highlight-color: transparent;
643 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
647 * Make html take up the entire screen
648 * Then set touch-action to avoid touch delay on mobile IE
653 -ms-touch-action: manipulation;
654 touch-action: manipulation;
658 * Make body take up the entire screen
659 * Remove body margin so layout containers don't cause extra overflow.
668 * Main display reset for IE support.
669 * Source: http://weblog.west-wind.com/posts/2015/Jan/12/main-HTML5-Tag-not-working-in-Internet-Explorer-91011
676 * Apply no display to elements with the hidden attribute.
677 * IE 9 and 10 support.
680 display: none !important;
684 * Copyright 2015 Google Inc. All Rights Reserved.
686 * Licensed under the Apache License, Version 2.0 (the "License");
687 * you may not use this file except in compliance with the License.
688 * You may obtain a copy of the License at
690 * http://www.apache.org/licenses/LICENSE-2.0
692 * Unless required by applicable law or agreed to in writing, software
693 * distributed under the License is distributed on an "AS IS" BASIS,
694 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
695 * See the License for the specific language governing permissions and
696 * limitations under the License.
699 * Copyright 2015 Google Inc. All Rights Reserved.
701 * Licensed under the Apache License, Version 2.0 (the "License");
702 * you may not use this file except in compliance with the License.
703 * You may obtain a copy of the License at
705 * http://www.apache.org/licenses/LICENSE-2.0
707 * Unless required by applicable law or agreed to in writing, software
708 * distributed under the License is distributed on an "AS IS" BASIS,
709 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
710 * See the License for the specific language governing permissions and
711 * limitations under the License.
713 /*------------------------------------* $CONTENTS
714 \*------------------------------------*/
716 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
743 * Even though all variables have the `!default` directive, most of them
744 * should not be changed as they are dependent one another. This can cause
745 * visual distortions (like alignment issues) that are hard to track down
748 /* ========== TYPOGRAPHY ========== */
749 /* We're splitting fonts into "preferred" and "performance" in order to optimize
750 page loading. For important text, such as the body, we want it to load
751 immediately and not wait for the web font load, whereas for other sections,
752 such as headers and titles, we're OK with things taking a bit longer to load.
753 We do have some optional classes and parameters in the mixins, in case you
754 definitely want to make sure you're using the preferred font and don't mind
756 We should be able to improve on this once CSS Font Loading L3 becomes more
759 /* ========== COLORS ========== */
762 * Material design color palettes.
763 * @see http://www.google.com/design/spec/style/color.html
767 * Copyright 2015 Google Inc. All Rights Reserved.
769 * Licensed under the Apache License, Version 2.0 (the "License");
770 * you may not use this file except in compliance with the License.
771 * You may obtain a copy of the License at
773 * http://www.apache.org/licenses/LICENSE-2.0
775 * Unless required by applicable law or agreed to in writing, software
776 * distributed under the License is distributed on an "AS IS" BASIS,
777 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
778 * See the License for the specific language governing permissions and
779 * limitations under the License.
781 /* ========== Color Palettes ========== */
784 * Copyright 2015 Google Inc. All Rights Reserved.
786 * Licensed under the Apache License, Version 2.0 (the "License");
787 * you may not use this file except in compliance with the License.
788 * You may obtain a copy of the License at
790 * http://www.apache.org/licenses/LICENSE-2.0
792 * Unless required by applicable law or agreed to in writing, software
793 * distributed under the License is distributed on an "AS IS" BASIS,
794 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
795 * See the License for the specific language governing permissions and
796 * limitations under the License.
798 /* ========== IMAGES ========== */
799 /* ========== Color & Themes ========== */
800 /* ========== Typography ========== */
801 /* ========== Components ========== */
802 /* ========== Standard Buttons ========== */
803 /* ========== Icon Toggles ========== */
804 /* ========== Radio Buttons ========== */
805 /* ========== Ripple effect ========== */
806 /* ========== Layout ========== */
807 /* ========== Content Tabs ========== */
808 /* ========== Checkboxes ========== */
809 /* ========== Switches ========== */
810 /* ========== Spinner ========== */
811 /* ========== Text fields ========== */
812 /* ========== Card ========== */
813 /* ========== Sliders ========== */
814 /* ========== Progress ========== */
815 /* ========== List ========== */
816 /* ========== Item ========== */
817 /* ========== Dropdown menu ========== */
818 /* ========== Tooltips ========== */
819 /* ========== Footer ========== */
833 /* Card dimensions */
852 * Copyright 2015 Google Inc. All Rights Reserved.
854 * Licensed under the Apache License, Version 2.0 (the "License");
855 * you may not use this file except in compliance with the License.
856 * You may obtain a copy of the License at
858 * http://www.apache.org/licenses/LICENSE-2.0
860 * Unless required by applicable law or agreed to in writing, software
861 * distributed under the License is distributed on an "AS IS" BASIS,
862 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
863 * See the License for the specific language governing permissions and
864 * limitations under the License.
871 font-family: "Roboto";
877 h1, h2, h3, h4, h5, h6, p {
883 * Styles for HTML elements
885 h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
886 font-family: "Roboto";
890 letter-spacing: -0.02em;
896 font-family: "Roboto";
900 letter-spacing: -0.02em;
906 font-family: "Roboto";
915 font-family: "Roboto";
924 font-family: "Roboto";
928 -moz-osx-font-smoothing: grayscale;
934 font-family: "Roboto";
938 letter-spacing: 0.02em;
944 font-family: "Roboto";
948 letter-spacing: 0.04em;
962 color: rgb(255, 64, 129);
967 font-family: "Roboto";
973 letter-spacing: 0.08em;
984 margin-left: -0.05em;
988 background-color: #f4ff81;
1013 .mdl-typography--display-4 {
1014 font-family: "Roboto";
1018 letter-spacing: -0.04em;
1021 .mdl-typography--display-4-color-contrast {
1022 font-family: "Roboto";
1026 letter-spacing: -0.04em;
1030 .mdl-typography--display-3 {
1031 font-family: "Roboto";
1035 letter-spacing: -0.02em;
1038 .mdl-typography--display-3-color-contrast {
1039 font-family: "Roboto";
1043 letter-spacing: -0.02em;
1047 .mdl-typography--display-2 {
1048 font-family: "Roboto";
1054 .mdl-typography--display-2-color-contrast {
1055 font-family: "Roboto";
1062 .mdl-typography--display-1 {
1063 font-family: "Roboto";
1069 .mdl-typography--display-1-color-contrast {
1070 font-family: "Roboto";
1077 .mdl-typography--headline {
1078 font-family: "Roboto";
1082 -moz-osx-font-smoothing: grayscale;
1085 .mdl-typography--headline-color-contrast {
1086 font-family: "Roboto";
1090 -moz-osx-font-smoothing: grayscale;
1094 .mdl-typography--title {
1095 font-family: "Roboto";
1099 letter-spacing: 0.02em;
1102 .mdl-typography--title-color-contrast {
1103 font-family: "Roboto";
1107 letter-spacing: 0.02em;
1111 .mdl-typography--subhead {
1112 font-family: "Roboto";
1116 letter-spacing: 0.04em;
1119 .mdl-typography--subhead-color-contrast {
1120 font-family: "Roboto";
1124 letter-spacing: 0.04em;
1128 .mdl-typography--body-2 {
1135 .mdl-typography--body-2-color-contrast {
1143 .mdl-typography--body-1 {
1150 .mdl-typography--body-1-color-contrast {
1158 .mdl-typography--body-2-force-preferred-font {
1159 font-family: "Roboto";
1166 .mdl-typography--body-2-force-preferred-font-color-contrast {
1167 font-family: "Roboto";
1175 .mdl-typography--body-1-force-preferred-font {
1176 font-family: "Roboto";
1183 .mdl-typography--body-1-force-preferred-font-color-contrast {
1184 font-family: "Roboto";
1192 .mdl-typography--caption {
1199 .mdl-typography--caption-force-preferred-font {
1200 font-family: "Roboto";
1207 .mdl-typography--caption-color-contrast {
1215 .mdl-typography--caption-force-preferred-font-color-contrast {
1216 font-family: "Roboto";
1224 .mdl-typography--menu {
1225 font-family: "Roboto";
1232 .mdl-typography--menu-color-contrast {
1233 font-family: "Roboto";
1241 .mdl-typography--button {
1242 font-family: "Roboto";
1245 text-transform: uppercase;
1250 .mdl-typography--button-color-contrast {
1251 font-family: "Roboto";
1254 text-transform: uppercase;
1260 .mdl-typography--text-left {
1264 .mdl-typography--text-right {
1268 .mdl-typography--text-center {
1272 .mdl-typography--text-justify {
1273 text-align: justify;
1276 .mdl-typography--text-nowrap {
1277 white-space: nowrap;
1280 .mdl-typography--text-lowercase {
1281 text-transform: lowercase;
1284 .mdl-typography--text-uppercase {
1285 text-transform: uppercase;
1288 .mdl-typography--text-capitalize {
1289 text-transform: capitalize;
1292 .mdl-typography--font-thin {
1293 font-weight: 200 !important;
1296 .mdl-typography--font-light {
1297 font-weight: 300 !important;
1300 .mdl-typography--font-regular {
1301 font-weight: 400 !important;
1304 .mdl-typography--font-medium {
1305 font-weight: 500 !important;
1308 .mdl-typography--font-bold {
1309 font-weight: 700 !important;
1312 .mdl-typography--font-black {
1313 font-weight: 900 !important;
1317 font-family: 'Material Icons';
1318 font-weight: normal;
1322 letter-spacing: normal;
1323 text-transform: none;
1324 display: inline-block;
1326 -moz-font-feature-settings: 'liga';
1327 font-feature-settings: 'liga';
1328 -webkit-font-feature-settings: 'liga';
1329 -webkit-font-smoothing: antialiased;
1333 * Copyright 2015 Google Inc. All Rights Reserved.
1335 * Licensed under the Apache License, Version 2.0 (the "License");
1336 * you may not use this file except in compliance with the License.
1337 * You may obtain a copy of the License at
1339 * http://www.apache.org/licenses/LICENSE-2.0
1341 * Unless required by applicable law or agreed to in writing, software
1342 * distributed under the License is distributed on an "AS IS" BASIS,
1343 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1344 * See the License for the specific language governing permissions and
1345 * limitations under the License.
1348 * Copyright 2015 Google Inc. All Rights Reserved.
1350 * Licensed under the Apache License, Version 2.0 (the "License");
1351 * you may not use this file except in compliance with the License.
1352 * You may obtain a copy of the License at
1354 * http://www.apache.org/licenses/LICENSE-2.0
1356 * Unless required by applicable law or agreed to in writing, software
1357 * distributed under the License is distributed on an "AS IS" BASIS,
1358 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1359 * See the License for the specific language governing permissions and
1360 * limitations under the License.
1362 /*------------------------------------* $CONTENTS
1363 \*------------------------------------*/
1365 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
1392 * Even though all variables have the `!default` directive, most of them
1393 * should not be changed as they are dependent one another. This can cause
1394 * visual distortions (like alignment issues) that are hard to track down
1397 /* ========== TYPOGRAPHY ========== */
1398 /* We're splitting fonts into "preferred" and "performance" in order to optimize
1399 page loading. For important text, such as the body, we want it to load
1400 immediately and not wait for the web font load, whereas for other sections,
1401 such as headers and titles, we're OK with things taking a bit longer to load.
1402 We do have some optional classes and parameters in the mixins, in case you
1403 definitely want to make sure you're using the preferred font and don't mind
1404 the performance hit.
1405 We should be able to improve on this once CSS Font Loading L3 becomes more
1408 /* ========== COLORS ========== */
1411 * Material design color palettes.
1412 * @see http://www.google.com/design/spec/style/color.html
1416 * Copyright 2015 Google Inc. All Rights Reserved.
1418 * Licensed under the Apache License, Version 2.0 (the "License");
1419 * you may not use this file except in compliance with the License.
1420 * You may obtain a copy of the License at
1422 * http://www.apache.org/licenses/LICENSE-2.0
1424 * Unless required by applicable law or agreed to in writing, software
1425 * distributed under the License is distributed on an "AS IS" BASIS,
1426 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1427 * See the License for the specific language governing permissions and
1428 * limitations under the License.
1430 /* ========== Color Palettes ========== */
1433 * Copyright 2015 Google Inc. All Rights Reserved.
1435 * Licensed under the Apache License, Version 2.0 (the "License");
1436 * you may not use this file except in compliance with the License.
1437 * You may obtain a copy of the License at
1439 * http://www.apache.org/licenses/LICENSE-2.0
1441 * Unless required by applicable law or agreed to in writing, software
1442 * distributed under the License is distributed on an "AS IS" BASIS,
1443 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1444 * See the License for the specific language governing permissions and
1445 * limitations under the License.
1447 /* ========== IMAGES ========== */
1448 /* ========== Color & Themes ========== */
1449 /* ========== Typography ========== */
1450 /* ========== Components ========== */
1451 /* ========== Standard Buttons ========== */
1452 /* ========== Icon Toggles ========== */
1453 /* ========== Radio Buttons ========== */
1454 /* ========== Ripple effect ========== */
1455 /* ========== Layout ========== */
1456 /* ========== Content Tabs ========== */
1457 /* ========== Checkboxes ========== */
1458 /* ========== Switches ========== */
1459 /* ========== Spinner ========== */
1460 /* ========== Text fields ========== */
1461 /* ========== Card ========== */
1462 /* ========== Sliders ========== */
1463 /* ========== Progress ========== */
1464 /* ========== List ========== */
1465 /* ========== Item ========== */
1466 /* ========== Dropdown menu ========== */
1467 /* ========== Tooltips ========== */
1468 /* ========== Footer ========== */
1482 /* Card dimensions */
1500 .mdl-color-text--red {
1501 color: rgb(244, 67, 54) !important;
1505 background-color: rgb(244, 67, 54) !important;
1508 .mdl-color-text--red-50 {
1509 color: rgb(255, 235, 238) !important;
1512 .mdl-color--red-50 {
1513 background-color: rgb(255, 235, 238) !important;
1516 .mdl-color-text--red-100 {
1517 color: rgb(255, 205, 210) !important;
1520 .mdl-color--red-100 {
1521 background-color: rgb(255, 205, 210) !important;
1524 .mdl-color-text--red-200 {
1525 color: rgb(239, 154, 154) !important;
1528 .mdl-color--red-200 {
1529 background-color: rgb(239, 154, 154) !important;
1532 .mdl-color-text--red-300 {
1533 color: rgb(229, 115, 115) !important;
1536 .mdl-color--red-300 {
1537 background-color: rgb(229, 115, 115) !important;
1540 .mdl-color-text--red-400 {
1541 color: rgb(239, 83, 80) !important;
1544 .mdl-color--red-400 {
1545 background-color: rgb(239, 83, 80) !important;
1548 .mdl-color-text--red-500 {
1549 color: rgb(244, 67, 54) !important;
1552 .mdl-color--red-500 {
1553 background-color: rgb(244, 67, 54) !important;
1556 .mdl-color-text--red-600 {
1557 color: rgb(229, 57, 53) !important;
1560 .mdl-color--red-600 {
1561 background-color: rgb(229, 57, 53) !important;
1564 .mdl-color-text--red-700 {
1565 color: rgb(211, 47, 47) !important;
1568 .mdl-color--red-700 {
1569 background-color: rgb(211, 47, 47) !important;
1572 .mdl-color-text--red-800 {
1573 color: rgb(198, 40, 40) !important;
1576 .mdl-color--red-800 {
1577 background-color: rgb(198, 40, 40) !important;
1580 .mdl-color-text--red-900 {
1581 color: rgb(183, 28, 28) !important;
1584 .mdl-color--red-900 {
1585 background-color: rgb(183, 28, 28) !important;
1588 .mdl-color-text--red-A100 {
1589 color: rgb(255, 138, 128) !important;
1592 .mdl-color--red-A100 {
1593 background-color: rgb(255, 138, 128) !important;
1596 .mdl-color-text--red-A200 {
1597 color: rgb(255, 82, 82) !important;
1600 .mdl-color--red-A200 {
1601 background-color: rgb(255, 82, 82) !important;
1604 .mdl-color-text--red-A400 {
1605 color: rgb(255, 23, 68) !important;
1608 .mdl-color--red-A400 {
1609 background-color: rgb(255, 23, 68) !important;
1612 .mdl-color-text--red-A700 {
1613 color: rgb(213, 0, 0) !important;
1616 .mdl-color--red-A700 {
1617 background-color: rgb(213, 0, 0) !important;
1620 .mdl-color-text--pink {
1621 color: rgb(233, 30, 99) !important;
1625 background-color: rgb(233, 30, 99) !important;
1628 .mdl-color-text--pink-50 {
1629 color: rgb(252, 228, 236) !important;
1632 .mdl-color--pink-50 {
1633 background-color: rgb(252, 228, 236) !important;
1636 .mdl-color-text--pink-100 {
1637 color: rgb(248, 187, 208) !important;
1640 .mdl-color--pink-100 {
1641 background-color: rgb(248, 187, 208) !important;
1644 .mdl-color-text--pink-200 {
1645 color: rgb(244, 143, 177) !important;
1648 .mdl-color--pink-200 {
1649 background-color: rgb(244, 143, 177) !important;
1652 .mdl-color-text--pink-300 {
1653 color: rgb(240, 98, 146) !important;
1656 .mdl-color--pink-300 {
1657 background-color: rgb(240, 98, 146) !important;
1660 .mdl-color-text--pink-400 {
1661 color: rgb(236, 64, 122) !important;
1664 .mdl-color--pink-400 {
1665 background-color: rgb(236, 64, 122) !important;
1668 .mdl-color-text--pink-500 {
1669 color: rgb(233, 30, 99) !important;
1672 .mdl-color--pink-500 {
1673 background-color: rgb(233, 30, 99) !important;
1676 .mdl-color-text--pink-600 {
1677 color: rgb(216, 27, 96) !important;
1680 .mdl-color--pink-600 {
1681 background-color: rgb(216, 27, 96) !important;
1684 .mdl-color-text--pink-700 {
1685 color: rgb(194, 24, 91) !important;
1688 .mdl-color--pink-700 {
1689 background-color: rgb(194, 24, 91) !important;
1692 .mdl-color-text--pink-800 {
1693 color: rgb(173, 20, 87) !important;
1696 .mdl-color--pink-800 {
1697 background-color: rgb(173, 20, 87) !important;
1700 .mdl-color-text--pink-900 {
1701 color: rgb(136, 14, 79) !important;
1704 .mdl-color--pink-900 {
1705 background-color: rgb(136, 14, 79) !important;
1708 .mdl-color-text--pink-A100 {
1709 color: rgb(255, 128, 171) !important;
1712 .mdl-color--pink-A100 {
1713 background-color: rgb(255, 128, 171) !important;
1716 .mdl-color-text--pink-A200 {
1717 color: rgb(255, 64, 129) !important;
1720 .mdl-color--pink-A200 {
1721 background-color: rgb(255, 64, 129) !important;
1724 .mdl-color-text--pink-A400 {
1725 color: rgb(245, 0, 87) !important;
1728 .mdl-color--pink-A400 {
1729 background-color: rgb(245, 0, 87) !important;
1732 .mdl-color-text--pink-A700 {
1733 color: rgb(197, 17, 98) !important;
1736 .mdl-color--pink-A700 {
1737 background-color: rgb(197, 17, 98) !important;
1740 .mdl-color-text--purple {
1741 color: rgb(156, 39, 176) !important;
1744 .mdl-color--purple {
1745 background-color: rgb(156, 39, 176) !important;
1748 .mdl-color-text--purple-50 {
1749 color: rgb(243, 229, 245) !important;
1752 .mdl-color--purple-50 {
1753 background-color: rgb(243, 229, 245) !important;
1756 .mdl-color-text--purple-100 {
1757 color: rgb(225, 190, 231) !important;
1760 .mdl-color--purple-100 {
1761 background-color: rgb(225, 190, 231) !important;
1764 .mdl-color-text--purple-200 {
1765 color: rgb(206, 147, 216) !important;
1768 .mdl-color--purple-200 {
1769 background-color: rgb(206, 147, 216) !important;
1772 .mdl-color-text--purple-300 {
1773 color: rgb(186, 104, 200) !important;
1776 .mdl-color--purple-300 {
1777 background-color: rgb(186, 104, 200) !important;
1780 .mdl-color-text--purple-400 {
1781 color: rgb(171, 71, 188) !important;
1784 .mdl-color--purple-400 {
1785 background-color: rgb(171, 71, 188) !important;
1788 .mdl-color-text--purple-500 {
1789 color: rgb(156, 39, 176) !important;
1792 .mdl-color--purple-500 {
1793 background-color: rgb(156, 39, 176) !important;
1796 .mdl-color-text--purple-600 {
1797 color: rgb(142, 36, 170) !important;
1800 .mdl-color--purple-600 {
1801 background-color: rgb(142, 36, 170) !important;
1804 .mdl-color-text--purple-700 {
1805 color: rgb(123, 31, 162) !important;
1808 .mdl-color--purple-700 {
1809 background-color: rgb(123, 31, 162) !important;
1812 .mdl-color-text--purple-800 {
1813 color: rgb(106, 27, 154) !important;
1816 .mdl-color--purple-800 {
1817 background-color: rgb(106, 27, 154) !important;
1820 .mdl-color-text--purple-900 {
1821 color: rgb(74, 20, 140) !important;
1824 .mdl-color--purple-900 {
1825 background-color: rgb(74, 20, 140) !important;
1828 .mdl-color-text--purple-A100 {
1829 color: rgb(234, 128, 252) !important;
1832 .mdl-color--purple-A100 {
1833 background-color: rgb(234, 128, 252) !important;
1836 .mdl-color-text--purple-A200 {
1837 color: rgb(224, 64, 251) !important;
1840 .mdl-color--purple-A200 {
1841 background-color: rgb(224, 64, 251) !important;
1844 .mdl-color-text--purple-A400 {
1845 color: rgb(213, 0, 249) !important;
1848 .mdl-color--purple-A400 {
1849 background-color: rgb(213, 0, 249) !important;
1852 .mdl-color-text--purple-A700 {
1853 color: rgb(170, 0, 255) !important;
1856 .mdl-color--purple-A700 {
1857 background-color: rgb(170, 0, 255) !important;
1860 .mdl-color-text--deep-purple {
1861 color: rgb(103, 58, 183) !important;
1864 .mdl-color--deep-purple {
1865 background-color: rgb(103, 58, 183) !important;
1868 .mdl-color-text--deep-purple-50 {
1869 color: rgb(237, 231, 246) !important;
1872 .mdl-color--deep-purple-50 {
1873 background-color: rgb(237, 231, 246) !important;
1876 .mdl-color-text--deep-purple-100 {
1877 color: rgb(209, 196, 233) !important;
1880 .mdl-color--deep-purple-100 {
1881 background-color: rgb(209, 196, 233) !important;
1884 .mdl-color-text--deep-purple-200 {
1885 color: rgb(179, 157, 219) !important;
1888 .mdl-color--deep-purple-200 {
1889 background-color: rgb(179, 157, 219) !important;
1892 .mdl-color-text--deep-purple-300 {
1893 color: rgb(149, 117, 205) !important;
1896 .mdl-color--deep-purple-300 {
1897 background-color: rgb(149, 117, 205) !important;
1900 .mdl-color-text--deep-purple-400 {
1901 color: rgb(126, 87, 194) !important;
1904 .mdl-color--deep-purple-400 {
1905 background-color: rgb(126, 87, 194) !important;
1908 .mdl-color-text--deep-purple-500 {
1909 color: rgb(103, 58, 183) !important;
1912 .mdl-color--deep-purple-500 {
1913 background-color: rgb(103, 58, 183) !important;
1916 .mdl-color-text--deep-purple-600 {
1917 color: rgb(94, 53, 177) !important;
1920 .mdl-color--deep-purple-600 {
1921 background-color: rgb(94, 53, 177) !important;
1924 .mdl-color-text--deep-purple-700 {
1925 color: rgb(81, 45, 168) !important;
1928 .mdl-color--deep-purple-700 {
1929 background-color: rgb(81, 45, 168) !important;
1932 .mdl-color-text--deep-purple-800 {
1933 color: rgb(69, 39, 160) !important;
1936 .mdl-color--deep-purple-800 {
1937 background-color: rgb(69, 39, 160) !important;
1940 .mdl-color-text--deep-purple-900 {
1941 color: rgb(49, 27, 146) !important;
1944 .mdl-color--deep-purple-900 {
1945 background-color: rgb(49, 27, 146) !important;
1948 .mdl-color-text--deep-purple-A100 {
1949 color: rgb(179, 136, 255) !important;
1952 .mdl-color--deep-purple-A100 {
1953 background-color: rgb(179, 136, 255) !important;
1956 .mdl-color-text--deep-purple-A200 {
1957 color: rgb(124, 77, 255) !important;
1960 .mdl-color--deep-purple-A200 {
1961 background-color: rgb(124, 77, 255) !important;
1964 .mdl-color-text--deep-purple-A400 {
1965 color: rgb(101, 31, 255) !important;
1968 .mdl-color--deep-purple-A400 {
1969 background-color: rgb(101, 31, 255) !important;
1972 .mdl-color-text--deep-purple-A700 {
1973 color: rgb(98, 0, 234) !important;
1976 .mdl-color--deep-purple-A700 {
1977 background-color: rgb(98, 0, 234) !important;
1980 .mdl-color-text--indigo {
1981 color: rgb(63, 81, 181) !important;
1984 .mdl-color--indigo {
1985 background-color: rgb(63, 81, 181) !important;
1988 .mdl-color-text--indigo-50 {
1989 color: rgb(232, 234, 246) !important;
1992 .mdl-color--indigo-50 {
1993 background-color: rgb(232, 234, 246) !important;
1996 .mdl-color-text--indigo-100 {
1997 color: rgb(197, 202, 233) !important;
2000 .mdl-color--indigo-100 {
2001 background-color: rgb(197, 202, 233) !important;
2004 .mdl-color-text--indigo-200 {
2005 color: rgb(159, 168, 218) !important;
2008 .mdl-color--indigo-200 {
2009 background-color: rgb(159, 168, 218) !important;
2012 .mdl-color-text--indigo-300 {
2013 color: rgb(121, 134, 203) !important;
2016 .mdl-color--indigo-300 {
2017 background-color: rgb(121, 134, 203) !important;
2020 .mdl-color-text--indigo-400 {
2021 color: rgb(92, 107, 192) !important;
2024 .mdl-color--indigo-400 {
2025 background-color: rgb(92, 107, 192) !important;
2028 .mdl-color-text--indigo-500 {
2029 color: rgb(63, 81, 181) !important;
2032 .mdl-color--indigo-500 {
2033 background-color: rgb(63, 81, 181) !important;
2036 .mdl-color-text--indigo-600 {
2037 color: rgb(57, 73, 171) !important;
2040 .mdl-color--indigo-600 {
2041 background-color: rgb(57, 73, 171) !important;
2044 .mdl-color-text--indigo-700 {
2045 color: rgb(48, 63, 159) !important;
2048 .mdl-color--indigo-700 {
2049 background-color: rgb(48, 63, 159) !important;
2052 .mdl-color-text--indigo-800 {
2053 color: rgb(40, 53, 147) !important;
2056 .mdl-color--indigo-800 {
2057 background-color: rgb(40, 53, 147) !important;
2060 .mdl-color-text--indigo-900 {
2061 color: rgb(26, 35, 126) !important;
2064 .mdl-color--indigo-900 {
2065 background-color: rgb(26, 35, 126) !important;
2068 .mdl-color-text--indigo-A100 {
2069 color: rgb(140, 158, 255) !important;
2072 .mdl-color--indigo-A100 {
2073 background-color: rgb(140, 158, 255) !important;
2076 .mdl-color-text--indigo-A200 {
2077 color: rgb(83, 109, 254) !important;
2080 .mdl-color--indigo-A200 {
2081 background-color: rgb(83, 109, 254) !important;
2084 .mdl-color-text--indigo-A400 {
2085 color: rgb(61, 90, 254) !important;
2088 .mdl-color--indigo-A400 {
2089 background-color: rgb(61, 90, 254) !important;
2092 .mdl-color-text--indigo-A700 {
2093 color: rgb(48, 79, 254) !important;
2096 .mdl-color--indigo-A700 {
2097 background-color: rgb(48, 79, 254) !important;
2100 .mdl-color-text--blue {
2101 color: rgb(33, 150, 243) !important;
2105 background-color: rgb(33, 150, 243) !important;
2108 .mdl-color-text--blue-50 {
2109 color: rgb(227, 242, 253) !important;
2112 .mdl-color--blue-50 {
2113 background-color: rgb(227, 242, 253) !important;
2116 .mdl-color-text--blue-100 {
2117 color: rgb(187, 222, 251) !important;
2120 .mdl-color--blue-100 {
2121 background-color: rgb(187, 222, 251) !important;
2124 .mdl-color-text--blue-200 {
2125 color: rgb(144, 202, 249) !important;
2128 .mdl-color--blue-200 {
2129 background-color: rgb(144, 202, 249) !important;
2132 .mdl-color-text--blue-300 {
2133 color: rgb(100, 181, 246) !important;
2136 .mdl-color--blue-300 {
2137 background-color: rgb(100, 181, 246) !important;
2140 .mdl-color-text--blue-400 {
2141 color: rgb(66, 165, 245) !important;
2144 .mdl-color--blue-400 {
2145 background-color: rgb(66, 165, 245) !important;
2148 .mdl-color-text--blue-500 {
2149 color: rgb(33, 150, 243) !important;
2152 .mdl-color--blue-500 {
2153 background-color: rgb(33, 150, 243) !important;
2156 .mdl-color-text--blue-600 {
2157 color: rgb(30, 136, 229) !important;
2160 .mdl-color--blue-600 {
2161 background-color: rgb(30, 136, 229) !important;
2164 .mdl-color-text--blue-700 {
2165 color: rgb(25, 118, 210) !important;
2168 .mdl-color--blue-700 {
2169 background-color: rgb(25, 118, 210) !important;
2172 .mdl-color-text--blue-800 {
2173 color: rgb(21, 101, 192) !important;
2176 .mdl-color--blue-800 {
2177 background-color: rgb(21, 101, 192) !important;
2180 .mdl-color-text--blue-900 {
2181 color: rgb(13, 71, 161) !important;
2184 .mdl-color--blue-900 {
2185 background-color: rgb(13, 71, 161) !important;
2188 .mdl-color-text--blue-A100 {
2189 color: rgb(130, 177, 255) !important;
2192 .mdl-color--blue-A100 {
2193 background-color: rgb(130, 177, 255) !important;
2196 .mdl-color-text--blue-A200 {
2197 color: rgb(68, 138, 255) !important;
2200 .mdl-color--blue-A200 {
2201 background-color: rgb(68, 138, 255) !important;
2204 .mdl-color-text--blue-A400 {
2205 color: rgb(41, 121, 255) !important;
2208 .mdl-color--blue-A400 {
2209 background-color: rgb(41, 121, 255) !important;
2212 .mdl-color-text--blue-A700 {
2213 color: rgb(41, 98, 255) !important;
2216 .mdl-color--blue-A700 {
2217 background-color: rgb(41, 98, 255) !important;
2220 .mdl-color-text--light-blue {
2221 color: rgb(3, 169, 244) !important;
2224 .mdl-color--light-blue {
2225 background-color: rgb(3, 169, 244) !important;
2228 .mdl-color-text--light-blue-50 {
2229 color: rgb(225, 245, 254) !important;
2232 .mdl-color--light-blue-50 {
2233 background-color: rgb(225, 245, 254) !important;
2236 .mdl-color-text--light-blue-100 {
2237 color: rgb(179, 229, 252) !important;
2240 .mdl-color--light-blue-100 {
2241 background-color: rgb(179, 229, 252) !important;
2244 .mdl-color-text--light-blue-200 {
2245 color: rgb(129, 212, 250) !important;
2248 .mdl-color--light-blue-200 {
2249 background-color: rgb(129, 212, 250) !important;
2252 .mdl-color-text--light-blue-300 {
2253 color: rgb(79, 195, 247) !important;
2256 .mdl-color--light-blue-300 {
2257 background-color: rgb(79, 195, 247) !important;
2260 .mdl-color-text--light-blue-400 {
2261 color: rgb(41, 182, 246) !important;
2264 .mdl-color--light-blue-400 {
2265 background-color: rgb(41, 182, 246) !important;
2268 .mdl-color-text--light-blue-500 {
2269 color: rgb(3, 169, 244) !important;
2272 .mdl-color--light-blue-500 {
2273 background-color: rgb(3, 169, 244) !important;
2276 .mdl-color-text--light-blue-600 {
2277 color: rgb(3, 155, 229) !important;
2280 .mdl-color--light-blue-600 {
2281 background-color: rgb(3, 155, 229) !important;
2284 .mdl-color-text--light-blue-700 {
2285 color: rgb(2, 136, 209) !important;
2288 .mdl-color--light-blue-700 {
2289 background-color: rgb(2, 136, 209) !important;
2292 .mdl-color-text--light-blue-800 {
2293 color: rgb(2, 119, 189) !important;
2296 .mdl-color--light-blue-800 {
2297 background-color: rgb(2, 119, 189) !important;
2300 .mdl-color-text--light-blue-900 {
2301 color: rgb(1, 87, 155) !important;
2304 .mdl-color--light-blue-900 {
2305 background-color: rgb(1, 87, 155) !important;
2308 .mdl-color-text--light-blue-A100 {
2309 color: rgb(128, 216, 255) !important;
2312 .mdl-color--light-blue-A100 {
2313 background-color: rgb(128, 216, 255) !important;
2316 .mdl-color-text--light-blue-A200 {
2317 color: rgb(64, 196, 255) !important;
2320 .mdl-color--light-blue-A200 {
2321 background-color: rgb(64, 196, 255) !important;
2324 .mdl-color-text--light-blue-A400 {
2325 color: rgb(0, 176, 255) !important;
2328 .mdl-color--light-blue-A400 {
2329 background-color: rgb(0, 176, 255) !important;
2332 .mdl-color-text--light-blue-A700 {
2333 color: rgb(0, 145, 234) !important;
2336 .mdl-color--light-blue-A700 {
2337 background-color: rgb(0, 145, 234) !important;
2340 .mdl-color-text--cyan {
2341 color: rgb(0, 188, 212) !important;
2345 background-color: rgb(0, 188, 212) !important;
2348 .mdl-color-text--cyan-50 {
2349 color: rgb(224, 247, 250) !important;
2352 .mdl-color--cyan-50 {
2353 background-color: rgb(224, 247, 250) !important;
2356 .mdl-color-text--cyan-100 {
2357 color: rgb(178, 235, 242) !important;
2360 .mdl-color--cyan-100 {
2361 background-color: rgb(178, 235, 242) !important;
2364 .mdl-color-text--cyan-200 {
2365 color: rgb(128, 222, 234) !important;
2368 .mdl-color--cyan-200 {
2369 background-color: rgb(128, 222, 234) !important;
2372 .mdl-color-text--cyan-300 {
2373 color: rgb(77, 208, 225) !important;
2376 .mdl-color--cyan-300 {
2377 background-color: rgb(77, 208, 225) !important;
2380 .mdl-color-text--cyan-400 {
2381 color: rgb(38, 198, 218) !important;
2384 .mdl-color--cyan-400 {
2385 background-color: rgb(38, 198, 218) !important;
2388 .mdl-color-text--cyan-500 {
2389 color: rgb(0, 188, 212) !important;
2392 .mdl-color--cyan-500 {
2393 background-color: rgb(0, 188, 212) !important;
2396 .mdl-color-text--cyan-600 {
2397 color: rgb(0, 172, 193) !important;
2400 .mdl-color--cyan-600 {
2401 background-color: rgb(0, 172, 193) !important;
2404 .mdl-color-text--cyan-700 {
2405 color: rgb(0, 151, 167) !important;
2408 .mdl-color--cyan-700 {
2409 background-color: rgb(0, 151, 167) !important;
2412 .mdl-color-text--cyan-800 {
2413 color: rgb(0, 131, 143) !important;
2416 .mdl-color--cyan-800 {
2417 background-color: rgb(0, 131, 143) !important;
2420 .mdl-color-text--cyan-900 {
2421 color: rgb(0, 96, 100) !important;
2424 .mdl-color--cyan-900 {
2425 background-color: rgb(0, 96, 100) !important;
2428 .mdl-color-text--cyan-A100 {
2429 color: rgb(132, 255, 255) !important;
2432 .mdl-color--cyan-A100 {
2433 background-color: rgb(132, 255, 255) !important;
2436 .mdl-color-text--cyan-A200 {
2437 color: rgb(24, 255, 255) !important;
2440 .mdl-color--cyan-A200 {
2441 background-color: rgb(24, 255, 255) !important;
2444 .mdl-color-text--cyan-A400 {
2445 color: rgb(0, 229, 255) !important;
2448 .mdl-color--cyan-A400 {
2449 background-color: rgb(0, 229, 255) !important;
2452 .mdl-color-text--cyan-A700 {
2453 color: rgb(0, 184, 212) !important;
2456 .mdl-color--cyan-A700 {
2457 background-color: rgb(0, 184, 212) !important;
2460 .mdl-color-text--teal {
2461 color: rgb(0, 150, 136) !important;
2465 background-color: rgb(0, 150, 136) !important;
2468 .mdl-color-text--teal-50 {
2469 color: rgb(224, 242, 241) !important;
2472 .mdl-color--teal-50 {
2473 background-color: rgb(224, 242, 241) !important;
2476 .mdl-color-text--teal-100 {
2477 color: rgb(178, 223, 219) !important;
2480 .mdl-color--teal-100 {
2481 background-color: rgb(178, 223, 219) !important;
2484 .mdl-color-text--teal-200 {
2485 color: rgb(128, 203, 196) !important;
2488 .mdl-color--teal-200 {
2489 background-color: rgb(128, 203, 196) !important;
2492 .mdl-color-text--teal-300 {
2493 color: rgb(77, 182, 172) !important;
2496 .mdl-color--teal-300 {
2497 background-color: rgb(77, 182, 172) !important;
2500 .mdl-color-text--teal-400 {
2501 color: rgb(38, 166, 154) !important;
2504 .mdl-color--teal-400 {
2505 background-color: rgb(38, 166, 154) !important;
2508 .mdl-color-text--teal-500 {
2509 color: rgb(0, 150, 136) !important;
2512 .mdl-color--teal-500 {
2513 background-color: rgb(0, 150, 136) !important;
2516 .mdl-color-text--teal-600 {
2517 color: rgb(0, 137, 123) !important;
2520 .mdl-color--teal-600 {
2521 background-color: rgb(0, 137, 123) !important;
2524 .mdl-color-text--teal-700 {
2525 color: rgb(0, 121, 107) !important;
2528 .mdl-color--teal-700 {
2529 background-color: rgb(0, 121, 107) !important;
2532 .mdl-color-text--teal-800 {
2533 color: rgb(0, 105, 92) !important;
2536 .mdl-color--teal-800 {
2537 background-color: rgb(0, 105, 92) !important;
2540 .mdl-color-text--teal-900 {
2541 color: rgb(0, 77, 64) !important;
2544 .mdl-color--teal-900 {
2545 background-color: rgb(0, 77, 64) !important;
2548 .mdl-color-text--teal-A100 {
2549 color: rgb(167, 255, 235) !important;
2552 .mdl-color--teal-A100 {
2553 background-color: rgb(167, 255, 235) !important;
2556 .mdl-color-text--teal-A200 {
2557 color: rgb(100, 255, 218) !important;
2560 .mdl-color--teal-A200 {
2561 background-color: rgb(100, 255, 218) !important;
2564 .mdl-color-text--teal-A400 {
2565 color: rgb(29, 233, 182) !important;
2568 .mdl-color--teal-A400 {
2569 background-color: rgb(29, 233, 182) !important;
2572 .mdl-color-text--teal-A700 {
2573 color: rgb(0, 191, 165) !important;
2576 .mdl-color--teal-A700 {
2577 background-color: rgb(0, 191, 165) !important;
2580 .mdl-color-text--green {
2581 color: rgb(76, 175, 80) !important;
2585 background-color: rgb(76, 175, 80) !important;
2588 .mdl-color-text--green-50 {
2589 color: rgb(232, 245, 233) !important;
2592 .mdl-color--green-50 {
2593 background-color: rgb(232, 245, 233) !important;
2596 .mdl-color-text--green-100 {
2597 color: rgb(200, 230, 201) !important;
2600 .mdl-color--green-100 {
2601 background-color: rgb(200, 230, 201) !important;
2604 .mdl-color-text--green-200 {
2605 color: rgb(165, 214, 167) !important;
2608 .mdl-color--green-200 {
2609 background-color: rgb(165, 214, 167) !important;
2612 .mdl-color-text--green-300 {
2613 color: rgb(129, 199, 132) !important;
2616 .mdl-color--green-300 {
2617 background-color: rgb(129, 199, 132) !important;
2620 .mdl-color-text--green-400 {
2621 color: rgb(102, 187, 106) !important;
2624 .mdl-color--green-400 {
2625 background-color: rgb(102, 187, 106) !important;
2628 .mdl-color-text--green-500 {
2629 color: rgb(76, 175, 80) !important;
2632 .mdl-color--green-500 {
2633 background-color: rgb(76, 175, 80) !important;
2636 .mdl-color-text--green-600 {
2637 color: rgb(67, 160, 71) !important;
2640 .mdl-color--green-600 {
2641 background-color: rgb(67, 160, 71) !important;
2644 .mdl-color-text--green-700 {
2645 color: rgb(56, 142, 60) !important;
2648 .mdl-color--green-700 {
2649 background-color: rgb(56, 142, 60) !important;
2652 .mdl-color-text--green-800 {
2653 color: rgb(46, 125, 50) !important;
2656 .mdl-color--green-800 {
2657 background-color: rgb(46, 125, 50) !important;
2660 .mdl-color-text--green-900 {
2661 color: rgb(27, 94, 32) !important;
2664 .mdl-color--green-900 {
2665 background-color: rgb(27, 94, 32) !important;
2668 .mdl-color-text--green-A100 {
2669 color: rgb(185, 246, 202) !important;
2672 .mdl-color--green-A100 {
2673 background-color: rgb(185, 246, 202) !important;
2676 .mdl-color-text--green-A200 {
2677 color: rgb(105, 240, 174) !important;
2680 .mdl-color--green-A200 {
2681 background-color: rgb(105, 240, 174) !important;
2684 .mdl-color-text--green-A400 {
2685 color: rgb(0, 230, 118) !important;
2688 .mdl-color--green-A400 {
2689 background-color: rgb(0, 230, 118) !important;
2692 .mdl-color-text--green-A700 {
2693 color: rgb(0, 200, 83) !important;
2696 .mdl-color--green-A700 {
2697 background-color: rgb(0, 200, 83) !important;
2700 .mdl-color-text--light-green {
2701 color: rgb(139, 195, 74) !important;
2704 .mdl-color--light-green {
2705 background-color: rgb(139, 195, 74) !important;
2708 .mdl-color-text--light-green-50 {
2709 color: rgb(241, 248, 233) !important;
2712 .mdl-color--light-green-50 {
2713 background-color: rgb(241, 248, 233) !important;
2716 .mdl-color-text--light-green-100 {
2717 color: rgb(220, 237, 200) !important;
2720 .mdl-color--light-green-100 {
2721 background-color: rgb(220, 237, 200) !important;
2724 .mdl-color-text--light-green-200 {
2725 color: rgb(197, 225, 165) !important;
2728 .mdl-color--light-green-200 {
2729 background-color: rgb(197, 225, 165) !important;
2732 .mdl-color-text--light-green-300 {
2733 color: rgb(174, 213, 129) !important;
2736 .mdl-color--light-green-300 {
2737 background-color: rgb(174, 213, 129) !important;
2740 .mdl-color-text--light-green-400 {
2741 color: rgb(156, 204, 101) !important;
2744 .mdl-color--light-green-400 {
2745 background-color: rgb(156, 204, 101) !important;
2748 .mdl-color-text--light-green-500 {
2749 color: rgb(139, 195, 74) !important;
2752 .mdl-color--light-green-500 {
2753 background-color: rgb(139, 195, 74) !important;
2756 .mdl-color-text--light-green-600 {
2757 color: rgb(124, 179, 66) !important;
2760 .mdl-color--light-green-600 {
2761 background-color: rgb(124, 179, 66) !important;
2764 .mdl-color-text--light-green-700 {
2765 color: rgb(104, 159, 56) !important;
2768 .mdl-color--light-green-700 {
2769 background-color: rgb(104, 159, 56) !important;
2772 .mdl-color-text--light-green-800 {
2773 color: rgb(85, 139, 47) !important;
2776 .mdl-color--light-green-800 {
2777 background-color: rgb(85, 139, 47) !important;
2780 .mdl-color-text--light-green-900 {
2781 color: rgb(51, 105, 30) !important;
2784 .mdl-color--light-green-900 {
2785 background-color: rgb(51, 105, 30) !important;
2788 .mdl-color-text--light-green-A100 {
2789 color: rgb(204, 255, 144) !important;
2792 .mdl-color--light-green-A100 {
2793 background-color: rgb(204, 255, 144) !important;
2796 .mdl-color-text--light-green-A200 {
2797 color: rgb(178, 255, 89) !important;
2800 .mdl-color--light-green-A200 {
2801 background-color: rgb(178, 255, 89) !important;
2804 .mdl-color-text--light-green-A400 {
2805 color: rgb(118, 255, 3) !important;
2808 .mdl-color--light-green-A400 {
2809 background-color: rgb(118, 255, 3) !important;
2812 .mdl-color-text--light-green-A700 {
2813 color: rgb(100, 221, 23) !important;
2816 .mdl-color--light-green-A700 {
2817 background-color: rgb(100, 221, 23) !important;
2820 .mdl-color-text--lime {
2821 color: rgb(205, 220, 57) !important;
2825 background-color: rgb(205, 220, 57) !important;
2828 .mdl-color-text--lime-50 {
2829 color: rgb(249, 251, 231) !important;
2832 .mdl-color--lime-50 {
2833 background-color: rgb(249, 251, 231) !important;
2836 .mdl-color-text--lime-100 {
2837 color: rgb(240, 244, 195) !important;
2840 .mdl-color--lime-100 {
2841 background-color: rgb(240, 244, 195) !important;
2844 .mdl-color-text--lime-200 {
2845 color: rgb(230, 238, 156) !important;
2848 .mdl-color--lime-200 {
2849 background-color: rgb(230, 238, 156) !important;
2852 .mdl-color-text--lime-300 {
2853 color: rgb(220, 231, 117) !important;
2856 .mdl-color--lime-300 {
2857 background-color: rgb(220, 231, 117) !important;
2860 .mdl-color-text--lime-400 {
2861 color: rgb(212, 225, 87) !important;
2864 .mdl-color--lime-400 {
2865 background-color: rgb(212, 225, 87) !important;
2868 .mdl-color-text--lime-500 {
2869 color: rgb(205, 220, 57) !important;
2872 .mdl-color--lime-500 {
2873 background-color: rgb(205, 220, 57) !important;
2876 .mdl-color-text--lime-600 {
2877 color: rgb(192, 202, 51) !important;
2880 .mdl-color--lime-600 {
2881 background-color: rgb(192, 202, 51) !important;
2884 .mdl-color-text--lime-700 {
2885 color: rgb(175, 180, 43) !important;
2888 .mdl-color--lime-700 {
2889 background-color: rgb(175, 180, 43) !important;
2892 .mdl-color-text--lime-800 {
2893 color: rgb(158, 157, 36) !important;
2896 .mdl-color--lime-800 {
2897 background-color: rgb(158, 157, 36) !important;
2900 .mdl-color-text--lime-900 {
2901 color: rgb(130, 119, 23) !important;
2904 .mdl-color--lime-900 {
2905 background-color: rgb(130, 119, 23) !important;
2908 .mdl-color-text--lime-A100 {
2909 color: rgb(244, 255, 129) !important;
2912 .mdl-color--lime-A100 {
2913 background-color: rgb(244, 255, 129) !important;
2916 .mdl-color-text--lime-A200 {
2917 color: rgb(238, 255, 65) !important;
2920 .mdl-color--lime-A200 {
2921 background-color: rgb(238, 255, 65) !important;
2924 .mdl-color-text--lime-A400 {
2925 color: rgb(198, 255, 0) !important;
2928 .mdl-color--lime-A400 {
2929 background-color: rgb(198, 255, 0) !important;
2932 .mdl-color-text--lime-A700 {
2933 color: rgb(174, 234, 0) !important;
2936 .mdl-color--lime-A700 {
2937 background-color: rgb(174, 234, 0) !important;
2940 .mdl-color-text--yellow {
2941 color: rgb(255, 235, 59) !important;
2944 .mdl-color--yellow {
2945 background-color: rgb(255, 235, 59) !important;
2948 .mdl-color-text--yellow-50 {
2949 color: rgb(255, 253, 231) !important;
2952 .mdl-color--yellow-50 {
2953 background-color: rgb(255, 253, 231) !important;
2956 .mdl-color-text--yellow-100 {
2957 color: rgb(255, 249, 196) !important;
2960 .mdl-color--yellow-100 {
2961 background-color: rgb(255, 249, 196) !important;
2964 .mdl-color-text--yellow-200 {
2965 color: rgb(255, 245, 157) !important;
2968 .mdl-color--yellow-200 {
2969 background-color: rgb(255, 245, 157) !important;
2972 .mdl-color-text--yellow-300 {
2973 color: rgb(255, 241, 118) !important;
2976 .mdl-color--yellow-300 {
2977 background-color: rgb(255, 241, 118) !important;
2980 .mdl-color-text--yellow-400 {
2981 color: rgb(255, 238, 88) !important;
2984 .mdl-color--yellow-400 {
2985 background-color: rgb(255, 238, 88) !important;
2988 .mdl-color-text--yellow-500 {
2989 color: rgb(255, 235, 59) !important;
2992 .mdl-color--yellow-500 {
2993 background-color: rgb(255, 235, 59) !important;
2996 .mdl-color-text--yellow-600 {
2997 color: rgb(253, 216, 53) !important;
3000 .mdl-color--yellow-600 {
3001 background-color: rgb(253, 216, 53) !important;
3004 .mdl-color-text--yellow-700 {
3005 color: rgb(251, 192, 45) !important;
3008 .mdl-color--yellow-700 {
3009 background-color: rgb(251, 192, 45) !important;
3012 .mdl-color-text--yellow-800 {
3013 color: rgb(249, 168, 37) !important;
3016 .mdl-color--yellow-800 {
3017 background-color: rgb(249, 168, 37) !important;
3020 .mdl-color-text--yellow-900 {
3021 color: rgb(245, 127, 23) !important;
3024 .mdl-color--yellow-900 {
3025 background-color: rgb(245, 127, 23) !important;
3028 .mdl-color-text--yellow-A100 {
3029 color: rgb(255, 255, 141) !important;
3032 .mdl-color--yellow-A100 {
3033 background-color: rgb(255, 255, 141) !important;
3036 .mdl-color-text--yellow-A200 {
3037 color: rgb(255, 255, 0) !important;
3040 .mdl-color--yellow-A200 {
3041 background-color: rgb(255, 255, 0) !important;
3044 .mdl-color-text--yellow-A400 {
3045 color: rgb(255, 234, 0) !important;
3048 .mdl-color--yellow-A400 {
3049 background-color: rgb(255, 234, 0) !important;
3052 .mdl-color-text--yellow-A700 {
3053 color: rgb(255, 214, 0) !important;
3056 .mdl-color--yellow-A700 {
3057 background-color: rgb(255, 214, 0) !important;
3060 .mdl-color-text--amber {
3061 color: rgb(255, 193, 7) !important;
3065 background-color: rgb(255, 193, 7) !important;
3068 .mdl-color-text--amber-50 {
3069 color: rgb(255, 248, 225) !important;
3072 .mdl-color--amber-50 {
3073 background-color: rgb(255, 248, 225) !important;
3076 .mdl-color-text--amber-100 {
3077 color: rgb(255, 236, 179) !important;
3080 .mdl-color--amber-100 {
3081 background-color: rgb(255, 236, 179) !important;
3084 .mdl-color-text--amber-200 {
3085 color: rgb(255, 224, 130) !important;
3088 .mdl-color--amber-200 {
3089 background-color: rgb(255, 224, 130) !important;
3092 .mdl-color-text--amber-300 {
3093 color: rgb(255, 213, 79) !important;
3096 .mdl-color--amber-300 {
3097 background-color: rgb(255, 213, 79) !important;
3100 .mdl-color-text--amber-400 {
3101 color: rgb(255, 202, 40) !important;
3104 .mdl-color--amber-400 {
3105 background-color: rgb(255, 202, 40) !important;
3108 .mdl-color-text--amber-500 {
3109 color: rgb(255, 193, 7) !important;
3112 .mdl-color--amber-500 {
3113 background-color: rgb(255, 193, 7) !important;
3116 .mdl-color-text--amber-600 {
3117 color: rgb(255, 179, 0) !important;
3120 .mdl-color--amber-600 {
3121 background-color: rgb(255, 179, 0) !important;
3124 .mdl-color-text--amber-700 {
3125 color: rgb(255, 160, 0) !important;
3128 .mdl-color--amber-700 {
3129 background-color: rgb(255, 160, 0) !important;
3132 .mdl-color-text--amber-800 {
3133 color: rgb(255, 143, 0) !important;
3136 .mdl-color--amber-800 {
3137 background-color: rgb(255, 143, 0) !important;
3140 .mdl-color-text--amber-900 {
3141 color: rgb(255, 111, 0) !important;
3144 .mdl-color--amber-900 {
3145 background-color: rgb(255, 111, 0) !important;
3148 .mdl-color-text--amber-A100 {
3149 color: rgb(255, 229, 127) !important;
3152 .mdl-color--amber-A100 {
3153 background-color: rgb(255, 229, 127) !important;
3156 .mdl-color-text--amber-A200 {
3157 color: rgb(255, 215, 64) !important;
3160 .mdl-color--amber-A200 {
3161 background-color: rgb(255, 215, 64) !important;
3164 .mdl-color-text--amber-A400 {
3165 color: rgb(255, 196, 0) !important;
3168 .mdl-color--amber-A400 {
3169 background-color: rgb(255, 196, 0) !important;
3172 .mdl-color-text--amber-A700 {
3173 color: rgb(255, 171, 0) !important;
3176 .mdl-color--amber-A700 {
3177 background-color: rgb(255, 171, 0) !important;
3180 .mdl-color-text--orange {
3181 color: rgb(255, 152, 0) !important;
3184 .mdl-color--orange {
3185 background-color: rgb(255, 152, 0) !important;
3188 .mdl-color-text--orange-50 {
3189 color: rgb(255, 243, 224) !important;
3192 .mdl-color--orange-50 {
3193 background-color: rgb(255, 243, 224) !important;
3196 .mdl-color-text--orange-100 {
3197 color: rgb(255, 224, 178) !important;
3200 .mdl-color--orange-100 {
3201 background-color: rgb(255, 224, 178) !important;
3204 .mdl-color-text--orange-200 {
3205 color: rgb(255, 204, 128) !important;
3208 .mdl-color--orange-200 {
3209 background-color: rgb(255, 204, 128) !important;
3212 .mdl-color-text--orange-300 {
3213 color: rgb(255, 183, 77) !important;
3216 .mdl-color--orange-300 {
3217 background-color: rgb(255, 183, 77) !important;
3220 .mdl-color-text--orange-400 {
3221 color: rgb(255, 167, 38) !important;
3224 .mdl-color--orange-400 {
3225 background-color: rgb(255, 167, 38) !important;
3228 .mdl-color-text--orange-500 {
3229 color: rgb(255, 152, 0) !important;
3232 .mdl-color--orange-500 {
3233 background-color: rgb(255, 152, 0) !important;
3236 .mdl-color-text--orange-600 {
3237 color: rgb(251, 140, 0) !important;
3240 .mdl-color--orange-600 {
3241 background-color: rgb(251, 140, 0) !important;
3244 .mdl-color-text--orange-700 {
3245 color: rgb(245, 124, 0) !important;
3248 .mdl-color--orange-700 {
3249 background-color: rgb(245, 124, 0) !important;
3252 .mdl-color-text--orange-800 {
3253 color: rgb(239, 108, 0) !important;
3256 .mdl-color--orange-800 {
3257 background-color: rgb(239, 108, 0) !important;
3260 .mdl-color-text--orange-900 {
3261 color: rgb(230, 81, 0) !important;
3264 .mdl-color--orange-900 {
3265 background-color: rgb(230, 81, 0) !important;
3268 .mdl-color-text--orange-A100 {
3269 color: rgb(255, 209, 128) !important;
3272 .mdl-color--orange-A100 {
3273 background-color: rgb(255, 209, 128) !important;
3276 .mdl-color-text--orange-A200 {
3277 color: rgb(255, 171, 64) !important;
3280 .mdl-color--orange-A200 {
3281 background-color: rgb(255, 171, 64) !important;
3284 .mdl-color-text--orange-A400 {
3285 color: rgb(255, 145, 0) !important;
3288 .mdl-color--orange-A400 {
3289 background-color: rgb(255, 145, 0) !important;
3292 .mdl-color-text--orange-A700 {
3293 color: rgb(255, 109, 0) !important;
3296 .mdl-color--orange-A700 {
3297 background-color: rgb(255, 109, 0) !important;
3300 .mdl-color-text--deep-orange {
3301 color: rgb(255, 87, 34) !important;
3304 .mdl-color--deep-orange {
3305 background-color: rgb(255, 87, 34) !important;
3308 .mdl-color-text--deep-orange-50 {
3309 color: rgb(251, 233, 231) !important;
3312 .mdl-color--deep-orange-50 {
3313 background-color: rgb(251, 233, 231) !important;
3316 .mdl-color-text--deep-orange-100 {
3317 color: rgb(255, 204, 188) !important;
3320 .mdl-color--deep-orange-100 {
3321 background-color: rgb(255, 204, 188) !important;
3324 .mdl-color-text--deep-orange-200 {
3325 color: rgb(255, 171, 145) !important;
3328 .mdl-color--deep-orange-200 {
3329 background-color: rgb(255, 171, 145) !important;
3332 .mdl-color-text--deep-orange-300 {
3333 color: rgb(255, 138, 101) !important;
3336 .mdl-color--deep-orange-300 {
3337 background-color: rgb(255, 138, 101) !important;
3340 .mdl-color-text--deep-orange-400 {
3341 color: rgb(255, 112, 67) !important;
3344 .mdl-color--deep-orange-400 {
3345 background-color: rgb(255, 112, 67) !important;
3348 .mdl-color-text--deep-orange-500 {
3349 color: rgb(255, 87, 34) !important;
3352 .mdl-color--deep-orange-500 {
3353 background-color: rgb(255, 87, 34) !important;
3356 .mdl-color-text--deep-orange-600 {
3357 color: rgb(244, 81, 30) !important;
3360 .mdl-color--deep-orange-600 {
3361 background-color: rgb(244, 81, 30) !important;
3364 .mdl-color-text--deep-orange-700 {
3365 color: rgb(230, 74, 25) !important;
3368 .mdl-color--deep-orange-700 {
3369 background-color: rgb(230, 74, 25) !important;
3372 .mdl-color-text--deep-orange-800 {
3373 color: rgb(216, 67, 21) !important;
3376 .mdl-color--deep-orange-800 {
3377 background-color: rgb(216, 67, 21) !important;
3380 .mdl-color-text--deep-orange-900 {
3381 color: rgb(191, 54, 12) !important;
3384 .mdl-color--deep-orange-900 {
3385 background-color: rgb(191, 54, 12) !important;
3388 .mdl-color-text--deep-orange-A100 {
3389 color: rgb(255, 158, 128) !important;
3392 .mdl-color--deep-orange-A100 {
3393 background-color: rgb(255, 158, 128) !important;
3396 .mdl-color-text--deep-orange-A200 {
3397 color: rgb(255, 110, 64) !important;
3400 .mdl-color--deep-orange-A200 {
3401 background-color: rgb(255, 110, 64) !important;
3404 .mdl-color-text--deep-orange-A400 {
3405 color: rgb(255, 61, 0) !important;
3408 .mdl-color--deep-orange-A400 {
3409 background-color: rgb(255, 61, 0) !important;
3412 .mdl-color-text--deep-orange-A700 {
3413 color: rgb(221, 44, 0) !important;
3416 .mdl-color--deep-orange-A700 {
3417 background-color: rgb(221, 44, 0) !important;
3420 .mdl-color-text--brown {
3421 color: rgb(121, 85, 72) !important;
3425 background-color: rgb(121, 85, 72) !important;
3428 .mdl-color-text--brown-50 {
3429 color: rgb(239, 235, 233) !important;
3432 .mdl-color--brown-50 {
3433 background-color: rgb(239, 235, 233) !important;
3436 .mdl-color-text--brown-100 {
3437 color: rgb(215, 204, 200) !important;
3440 .mdl-color--brown-100 {
3441 background-color: rgb(215, 204, 200) !important;
3444 .mdl-color-text--brown-200 {
3445 color: rgb(188, 170, 164) !important;
3448 .mdl-color--brown-200 {
3449 background-color: rgb(188, 170, 164) !important;
3452 .mdl-color-text--brown-300 {
3453 color: rgb(161, 136, 127) !important;
3456 .mdl-color--brown-300 {
3457 background-color: rgb(161, 136, 127) !important;
3460 .mdl-color-text--brown-400 {
3461 color: rgb(141, 110, 99) !important;
3464 .mdl-color--brown-400 {
3465 background-color: rgb(141, 110, 99) !important;
3468 .mdl-color-text--brown-500 {
3469 color: rgb(121, 85, 72) !important;
3472 .mdl-color--brown-500 {
3473 background-color: rgb(121, 85, 72) !important;
3476 .mdl-color-text--brown-600 {
3477 color: rgb(109, 76, 65) !important;
3480 .mdl-color--brown-600 {
3481 background-color: rgb(109, 76, 65) !important;
3484 .mdl-color-text--brown-700 {
3485 color: rgb(93, 64, 55) !important;
3488 .mdl-color--brown-700 {
3489 background-color: rgb(93, 64, 55) !important;
3492 .mdl-color-text--brown-800 {
3493 color: rgb(78, 52, 46) !important;
3496 .mdl-color--brown-800 {
3497 background-color: rgb(78, 52, 46) !important;
3500 .mdl-color-text--brown-900 {
3501 color: rgb(62, 39, 35) !important;
3504 .mdl-color--brown-900 {
3505 background-color: rgb(62, 39, 35) !important;
3508 .mdl-color-text--grey {
3509 color: rgb(158, 158, 158) !important;
3513 background-color: rgb(158, 158, 158) !important;
3516 .mdl-color-text--grey-50 {
3517 color: rgb(250, 250, 250) !important;
3520 .mdl-color--grey-50 {
3521 background-color: rgb(250, 250, 250) !important;
3524 .mdl-color-text--grey-100 {
3525 color: rgb(245, 245, 245) !important;
3528 .mdl-color--grey-100 {
3529 background-color: rgb(245, 245, 245) !important;
3532 .mdl-color-text--grey-200 {
3533 color: rgb(238, 238, 238) !important;
3536 .mdl-color--grey-200 {
3537 background-color: rgb(238, 238, 238) !important;
3540 .mdl-color-text--grey-300 {
3541 color: rgb(224, 224, 224) !important;
3544 .mdl-color--grey-300 {
3545 background-color: rgb(224, 224, 224) !important;
3548 .mdl-color-text--grey-400 {
3549 color: rgb(189, 189, 189) !important;
3552 .mdl-color--grey-400 {
3553 background-color: rgb(189, 189, 189) !important;
3556 .mdl-color-text--grey-500 {
3557 color: rgb(158, 158, 158) !important;
3560 .mdl-color--grey-500 {
3561 background-color: rgb(158, 158, 158) !important;
3564 .mdl-color-text--grey-600 {
3565 color: rgb(117, 117, 117) !important;
3568 .mdl-color--grey-600 {
3569 background-color: rgb(117, 117, 117) !important;
3572 .mdl-color-text--grey-700 {
3573 color: rgb(97, 97, 97) !important;
3576 .mdl-color--grey-700 {
3577 background-color: rgb(97, 97, 97) !important;
3580 .mdl-color-text--grey-800 {
3581 color: rgb(66, 66, 66) !important;
3584 .mdl-color--grey-800 {
3585 background-color: rgb(66, 66, 66) !important;
3588 .mdl-color-text--grey-900 {
3589 color: rgb(33, 33, 33) !important;
3592 .mdl-color--grey-900 {
3593 background-color: rgb(33, 33, 33) !important;
3596 .mdl-color-text--blue-grey {
3597 color: rgb(96, 125, 139) !important;
3600 .mdl-color--blue-grey {
3601 background-color: rgb(96, 125, 139) !important;
3604 .mdl-color-text--blue-grey-50 {
3605 color: rgb(236, 239, 241) !important;
3608 .mdl-color--blue-grey-50 {
3609 background-color: rgb(236, 239, 241) !important;
3612 .mdl-color-text--blue-grey-100 {
3613 color: rgb(207, 216, 220) !important;
3616 .mdl-color--blue-grey-100 {
3617 background-color: rgb(207, 216, 220) !important;
3620 .mdl-color-text--blue-grey-200 {
3621 color: rgb(176, 190, 197) !important;
3624 .mdl-color--blue-grey-200 {
3625 background-color: rgb(176, 190, 197) !important;
3628 .mdl-color-text--blue-grey-300 {
3629 color: rgb(144, 164, 174) !important;
3632 .mdl-color--blue-grey-300 {
3633 background-color: rgb(144, 164, 174) !important;
3636 .mdl-color-text--blue-grey-400 {
3637 color: rgb(120, 144, 156) !important;
3640 .mdl-color--blue-grey-400 {
3641 background-color: rgb(120, 144, 156) !important;
3644 .mdl-color-text--blue-grey-500 {
3645 color: rgb(96, 125, 139) !important;
3648 .mdl-color--blue-grey-500 {
3649 background-color: rgb(96, 125, 139) !important;
3652 .mdl-color-text--blue-grey-600 {
3653 color: rgb(84, 110, 122) !important;
3656 .mdl-color--blue-grey-600 {
3657 background-color: rgb(84, 110, 122) !important;
3660 .mdl-color-text--blue-grey-700 {
3661 color: rgb(69, 90, 100) !important;
3664 .mdl-color--blue-grey-700 {
3665 background-color: rgb(69, 90, 100) !important;
3668 .mdl-color-text--blue-grey-800 {
3669 color: rgb(55, 71, 79) !important;
3672 .mdl-color--blue-grey-800 {
3673 background-color: rgb(55, 71, 79) !important;
3676 .mdl-color-text--blue-grey-900 {
3677 color: rgb(38, 50, 56) !important;
3680 .mdl-color--blue-grey-900 {
3681 background-color: rgb(38, 50, 56) !important;
3685 background-color: rgb(0, 0, 0) !important;
3688 .mdl-color-text--black {
3689 color: rgb(0, 0, 0) !important;
3693 background-color: rgb(255, 255, 255) !important;
3696 .mdl-color-text--white {
3697 color: rgb(255, 255, 255) !important;
3700 .mdl-color--primary {
3701 background-color: rgb(63, 81, 181) !important;
3704 .mdl-color--primary-contrast {
3705 background-color: rgb(255, 255, 255) !important;
3708 .mdl-color--primary-dark {
3709 background-color: rgb(48, 63, 159) !important;
3712 .mdl-color--accent {
3713 background-color: rgb(255, 64, 129) !important;
3716 .mdl-color--accent-contrast {
3717 background-color: rgb(255, 255, 255) !important;
3720 .mdl-color-text--primary {
3721 color: rgb(63, 81, 181) !important;
3724 .mdl-color-text--primary-contrast {
3725 color: rgb(255, 255, 255) !important;
3728 .mdl-color-text--primary-dark {
3729 color: rgb(48, 63, 159) !important;
3732 .mdl-color-text--accent {
3733 color: rgb(255, 64, 129) !important;
3736 .mdl-color-text--accent-contrast {
3737 color: rgb(255, 255, 255) !important;
3741 * Copyright 2015 Google Inc. All Rights Reserved.
3743 * Licensed under the Apache License, Version 2.0 (the "License");
3744 * you may not use this file except in compliance with the License.
3745 * You may obtain a copy of the License at
3747 * http://www.apache.org/licenses/LICENSE-2.0
3749 * Unless required by applicable law or agreed to in writing, software
3750 * distributed under the License is distributed on an "AS IS" BASIS,
3751 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3752 * See the License for the specific language governing permissions and
3753 * limitations under the License.
3756 * Copyright 2015 Google Inc. All Rights Reserved.
3758 * Licensed under the Apache License, Version 2.0 (the "License");
3759 * you may not use this file except in compliance with the License.
3760 * You may obtain a copy of the License at
3762 * http://www.apache.org/licenses/LICENSE-2.0
3764 * Unless required by applicable law or agreed to in writing, software
3765 * distributed under the License is distributed on an "AS IS" BASIS,
3766 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3767 * See the License for the specific language governing permissions and
3768 * limitations under the License.
3770 /*------------------------------------* $CONTENTS
3771 \*------------------------------------*/
3773 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
3800 * Even though all variables have the `!default` directive, most of them
3801 * should not be changed as they are dependent one another. This can cause
3802 * visual distortions (like alignment issues) that are hard to track down
3805 /* ========== TYPOGRAPHY ========== */
3806 /* We're splitting fonts into "preferred" and "performance" in order to optimize
3807 page loading. For important text, such as the body, we want it to load
3808 immediately and not wait for the web font load, whereas for other sections,
3809 such as headers and titles, we're OK with things taking a bit longer to load.
3810 We do have some optional classes and parameters in the mixins, in case you
3811 definitely want to make sure you're using the preferred font and don't mind
3812 the performance hit.
3813 We should be able to improve on this once CSS Font Loading L3 becomes more
3816 /* ========== COLORS ========== */
3819 * Material design color palettes.
3820 * @see http://www.google.com/design/spec/style/color.html
3824 * Copyright 2015 Google Inc. All Rights Reserved.
3826 * Licensed under the Apache License, Version 2.0 (the "License");
3827 * you may not use this file except in compliance with the License.
3828 * You may obtain a copy of the License at
3830 * http://www.apache.org/licenses/LICENSE-2.0
3832 * Unless required by applicable law or agreed to in writing, software
3833 * distributed under the License is distributed on an "AS IS" BASIS,
3834 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3835 * See the License for the specific language governing permissions and
3836 * limitations under the License.
3838 /* ========== Color Palettes ========== */
3841 * Copyright 2015 Google Inc. All Rights Reserved.
3843 * Licensed under the Apache License, Version 2.0 (the "License");
3844 * you may not use this file except in compliance with the License.
3845 * You may obtain a copy of the License at
3847 * http://www.apache.org/licenses/LICENSE-2.0
3849 * Unless required by applicable law or agreed to in writing, software
3850 * distributed under the License is distributed on an "AS IS" BASIS,
3851 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3852 * See the License for the specific language governing permissions and
3853 * limitations under the License.
3855 /* ========== IMAGES ========== */
3856 /* ========== Color & Themes ========== */
3857 /* ========== Typography ========== */
3858 /* ========== Components ========== */
3859 /* ========== Standard Buttons ========== */
3860 /* ========== Icon Toggles ========== */
3861 /* ========== Radio Buttons ========== */
3862 /* ========== Ripple effect ========== */
3863 /* ========== Layout ========== */
3864 /* ========== Content Tabs ========== */
3865 /* ========== Checkboxes ========== */
3866 /* ========== Switches ========== */
3867 /* ========== Spinner ========== */
3868 /* ========== Text fields ========== */
3869 /* ========== Card ========== */
3870 /* ========== Sliders ========== */
3871 /* ========== Progress ========== */
3872 /* ========== List ========== */
3873 /* ========== Item ========== */
3874 /* ========== Dropdown menu ========== */
3875 /* ========== Tooltips ========== */
3876 /* ========== Footer ========== */
3890 /* Card dimensions */
3909 background: rgb(0, 0, 0);
3914 pointer-events: none;
3917 -webkit-transform: translate(-50%, -50%);
3918 transform: translate(-50%, -50%);
3923 .mdl-ripple.is-animating {
3924 transition: width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.2, 1);
3925 transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
3926 transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.2, 1);
3929 .mdl-ripple.is-visible {
3934 * Copyright 2015 Google Inc. All Rights Reserved.
3936 * Licensed under the Apache License, Version 2.0 (the "License");
3937 * you may not use this file except in compliance with the License.
3938 * You may obtain a copy of the License at
3940 * http://www.apache.org/licenses/LICENSE-2.0
3942 * Unless required by applicable law or agreed to in writing, software
3943 * distributed under the License is distributed on an "AS IS" BASIS,
3944 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3945 * See the License for the specific language governing permissions and
3946 * limitations under the License.
3949 * Copyright 2015 Google Inc. All Rights Reserved.
3951 * Licensed under the Apache License, Version 2.0 (the "License");
3952 * you may not use this file except in compliance with the License.
3953 * You may obtain a copy of the License at
3955 * http://www.apache.org/licenses/LICENSE-2.0
3957 * Unless required by applicable law or agreed to in writing, software
3958 * distributed under the License is distributed on an "AS IS" BASIS,
3959 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3960 * See the License for the specific language governing permissions and
3961 * limitations under the License.
3963 /*------------------------------------* $CONTENTS
3964 \*------------------------------------*/
3966 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
3993 * Even though all variables have the `!default` directive, most of them
3994 * should not be changed as they are dependent one another. This can cause
3995 * visual distortions (like alignment issues) that are hard to track down
3998 /* ========== TYPOGRAPHY ========== */
3999 /* We're splitting fonts into "preferred" and "performance" in order to optimize
4000 page loading. For important text, such as the body, we want it to load
4001 immediately and not wait for the web font load, whereas for other sections,
4002 such as headers and titles, we're OK with things taking a bit longer to load.
4003 We do have some optional classes and parameters in the mixins, in case you
4004 definitely want to make sure you're using the preferred font and don't mind
4005 the performance hit.
4006 We should be able to improve on this once CSS Font Loading L3 becomes more
4009 /* ========== COLORS ========== */
4012 * Material design color palettes.
4013 * @see http://www.google.com/design/spec/style/color.html
4017 * Copyright 2015 Google Inc. All Rights Reserved.
4019 * Licensed under the Apache License, Version 2.0 (the "License");
4020 * you may not use this file except in compliance with the License.
4021 * You may obtain a copy of the License at
4023 * http://www.apache.org/licenses/LICENSE-2.0
4025 * Unless required by applicable law or agreed to in writing, software
4026 * distributed under the License is distributed on an "AS IS" BASIS,
4027 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4028 * See the License for the specific language governing permissions and
4029 * limitations under the License.
4031 /* ========== Color Palettes ========== */
4034 * Copyright 2015 Google Inc. All Rights Reserved.
4036 * Licensed under the Apache License, Version 2.0 (the "License");
4037 * you may not use this file except in compliance with the License.
4038 * You may obtain a copy of the License at
4040 * http://www.apache.org/licenses/LICENSE-2.0
4042 * Unless required by applicable law or agreed to in writing, software
4043 * distributed under the License is distributed on an "AS IS" BASIS,
4044 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4045 * See the License for the specific language governing permissions and
4046 * limitations under the License.
4048 /* ========== IMAGES ========== */
4049 /* ========== Color & Themes ========== */
4050 /* ========== Typography ========== */
4051 /* ========== Components ========== */
4052 /* ========== Standard Buttons ========== */
4053 /* ========== Icon Toggles ========== */
4054 /* ========== Radio Buttons ========== */
4055 /* ========== Ripple effect ========== */
4056 /* ========== Layout ========== */
4057 /* ========== Content Tabs ========== */
4058 /* ========== Checkboxes ========== */
4059 /* ========== Switches ========== */
4060 /* ========== Spinner ========== */
4061 /* ========== Text fields ========== */
4062 /* ========== Card ========== */
4063 /* ========== Sliders ========== */
4064 /* ========== Progress ========== */
4065 /* ========== List ========== */
4066 /* ========== Item ========== */
4067 /* ========== Dropdown menu ========== */
4068 /* ========== Tooltips ========== */
4069 /* ========== Footer ========== */
4083 /* Card dimensions */
4101 .mdl-animation--default {
4102 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
4105 .mdl-animation--fast-out-slow-in {
4106 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
4109 .mdl-animation--linear-out-slow-in {
4110 transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
4113 .mdl-animation--fast-out-linear-in {
4114 transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
4118 * Copyright 2015 Google Inc. All Rights Reserved.
4120 * Licensed under the Apache License, Version 2.0 (the "License");
4121 * you may not use this file except in compliance with the License.
4122 * You may obtain a copy of the License at
4124 * http://www.apache.org/licenses/LICENSE-2.0
4126 * Unless required by applicable law or agreed to in writing, software
4127 * distributed under the License is distributed on an "AS IS" BASIS,
4128 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4129 * See the License for the specific language governing permissions and
4130 * limitations under the License.
4133 * Copyright 2015 Google Inc. All Rights Reserved.
4135 * Licensed under the Apache License, Version 2.0 (the "License");
4136 * you may not use this file except in compliance with the License.
4137 * You may obtain a copy of the License at
4139 * http://www.apache.org/licenses/LICENSE-2.0
4141 * Unless required by applicable law or agreed to in writing, software
4142 * distributed under the License is distributed on an "AS IS" BASIS,
4143 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4144 * See the License for the specific language governing permissions and
4145 * limitations under the License.
4147 /*------------------------------------* $CONTENTS
4148 \*------------------------------------*/
4150 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
4177 * Even though all variables have the `!default` directive, most of them
4178 * should not be changed as they are dependent one another. This can cause
4179 * visual distortions (like alignment issues) that are hard to track down
4182 /* ========== TYPOGRAPHY ========== */
4183 /* We're splitting fonts into "preferred" and "performance" in order to optimize
4184 page loading. For important text, such as the body, we want it to load
4185 immediately and not wait for the web font load, whereas for other sections,
4186 such as headers and titles, we're OK with things taking a bit longer to load.
4187 We do have some optional classes and parameters in the mixins, in case you
4188 definitely want to make sure you're using the preferred font and don't mind
4189 the performance hit.
4190 We should be able to improve on this once CSS Font Loading L3 becomes more
4193 /* ========== COLORS ========== */
4196 * Material design color palettes.
4197 * @see http://www.google.com/design/spec/style/color.html
4201 * Copyright 2015 Google Inc. All Rights Reserved.
4203 * Licensed under the Apache License, Version 2.0 (the "License");
4204 * you may not use this file except in compliance with the License.
4205 * You may obtain a copy of the License at
4207 * http://www.apache.org/licenses/LICENSE-2.0
4209 * Unless required by applicable law or agreed to in writing, software
4210 * distributed under the License is distributed on an "AS IS" BASIS,
4211 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4212 * See the License for the specific language governing permissions and
4213 * limitations under the License.
4215 /* ========== Color Palettes ========== */
4218 * Copyright 2015 Google Inc. All Rights Reserved.
4220 * Licensed under the Apache License, Version 2.0 (the "License");
4221 * you may not use this file except in compliance with the License.
4222 * You may obtain a copy of the License at
4224 * http://www.apache.org/licenses/LICENSE-2.0
4226 * Unless required by applicable law or agreed to in writing, software
4227 * distributed under the License is distributed on an "AS IS" BASIS,
4228 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4229 * See the License for the specific language governing permissions and
4230 * limitations under the License.
4232 /* ========== IMAGES ========== */
4233 /* ========== Color & Themes ========== */
4234 /* ========== Typography ========== */
4235 /* ========== Components ========== */
4236 /* ========== Standard Buttons ========== */
4237 /* ========== Icon Toggles ========== */
4238 /* ========== Radio Buttons ========== */
4239 /* ========== Ripple effect ========== */
4240 /* ========== Layout ========== */
4241 /* ========== Content Tabs ========== */
4242 /* ========== Checkboxes ========== */
4243 /* ========== Switches ========== */
4244 /* ========== Spinner ========== */
4245 /* ========== Text fields ========== */
4246 /* ========== Card ========== */
4247 /* ========== Sliders ========== */
4248 /* ========== Progress ========== */
4249 /* ========== List ========== */
4250 /* ========== Item ========== */
4251 /* ========== Dropdown menu ========== */
4252 /* ========== Tooltips ========== */
4253 /* ========== Footer ========== */
4267 /* Card dimensions */
4287 white-space: nowrap;
4291 .mdl-badge:not([data-badge]) {
4295 .mdl-badge[data-badge]:after {
4296 content: attr(data-badge);
4297 display: -webkit-flex;
4298 display: -ms-flexbox;
4300 -webkit-flex-direction: row;
4301 -ms-flex-direction: row;
4302 flex-direction: row;
4303 -webkit-flex-wrap: wrap;
4304 -ms-flex-wrap: wrap;
4306 -webkit-justify-content: center;
4307 -ms-flex-pack: center;
4308 justify-content: center;
4309 -webkit-align-content: center;
4310 -ms-flex-line-pack: center;
4311 align-content: center;
4312 -webkit-align-items: center;
4313 -ms-flex-align: center;
4314 align-items: center;
4318 font-family: "Roboto";
4324 background: rgb(255, 64, 129);
4325 color: rgb(255, 255, 255);
4328 .mdl-button .mdl-badge[data-badge]:after {
4333 .mdl-badge.mdl-badge--no-background[data-badge]:after {
4334 color: rgb(255, 64, 129);
4335 background: rgba(255, 255, 255, 0.2);
4336 box-shadow: 0 0 1px gray;
4339 .mdl-badge.mdl-badge--overlap {
4343 .mdl-badge.mdl-badge--overlap:after {
4348 * Copyright 2015 Google Inc. All Rights Reserved.
4350 * Licensed under the Apache License, Version 2.0 (the "License");
4351 * you may not use this file except in compliance with the License.
4352 * You may obtain a copy of the License at
4354 * http://www.apache.org/licenses/LICENSE-2.0
4356 * Unless required by applicable law or agreed to in writing, software
4357 * distributed under the License is distributed on an "AS IS" BASIS,
4358 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4359 * See the License for the specific language governing permissions and
4360 * limitations under the License.
4363 * Copyright 2015 Google Inc. All Rights Reserved.
4365 * Licensed under the Apache License, Version 2.0 (the "License");
4366 * you may not use this file except in compliance with the License.
4367 * You may obtain a copy of the License at
4369 * http://www.apache.org/licenses/LICENSE-2.0
4371 * Unless required by applicable law or agreed to in writing, software
4372 * distributed under the License is distributed on an "AS IS" BASIS,
4373 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4374 * See the License for the specific language governing permissions and
4375 * limitations under the License.
4377 /*------------------------------------* $CONTENTS
4378 \*------------------------------------*/
4380 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
4407 * Even though all variables have the `!default` directive, most of them
4408 * should not be changed as they are dependent one another. This can cause
4409 * visual distortions (like alignment issues) that are hard to track down
4412 /* ========== TYPOGRAPHY ========== */
4413 /* We're splitting fonts into "preferred" and "performance" in order to optimize
4414 page loading. For important text, such as the body, we want it to load
4415 immediately and not wait for the web font load, whereas for other sections,
4416 such as headers and titles, we're OK with things taking a bit longer to load.
4417 We do have some optional classes and parameters in the mixins, in case you
4418 definitely want to make sure you're using the preferred font and don't mind
4419 the performance hit.
4420 We should be able to improve on this once CSS Font Loading L3 becomes more
4423 /* ========== COLORS ========== */
4426 * Material design color palettes.
4427 * @see http://www.google.com/design/spec/style/color.html
4431 * Copyright 2015 Google Inc. All Rights Reserved.
4433 * Licensed under the Apache License, Version 2.0 (the "License");
4434 * you may not use this file except in compliance with the License.
4435 * You may obtain a copy of the License at
4437 * http://www.apache.org/licenses/LICENSE-2.0
4439 * Unless required by applicable law or agreed to in writing, software
4440 * distributed under the License is distributed on an "AS IS" BASIS,
4441 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4442 * See the License for the specific language governing permissions and
4443 * limitations under the License.
4445 /* ========== Color Palettes ========== */
4448 * Copyright 2015 Google Inc. All Rights Reserved.
4450 * Licensed under the Apache License, Version 2.0 (the "License");
4451 * you may not use this file except in compliance with the License.
4452 * You may obtain a copy of the License at
4454 * http://www.apache.org/licenses/LICENSE-2.0
4456 * Unless required by applicable law or agreed to in writing, software
4457 * distributed under the License is distributed on an "AS IS" BASIS,
4458 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4459 * See the License for the specific language governing permissions and
4460 * limitations under the License.
4462 /* ========== IMAGES ========== */
4463 /* ========== Color & Themes ========== */
4464 /* ========== Typography ========== */
4465 /* ========== Components ========== */
4466 /* ========== Standard Buttons ========== */
4467 /* ========== Icon Toggles ========== */
4468 /* ========== Radio Buttons ========== */
4469 /* ========== Ripple effect ========== */
4470 /* ========== Layout ========== */
4471 /* ========== Content Tabs ========== */
4472 /* ========== Checkboxes ========== */
4473 /* ========== Switches ========== */
4474 /* ========== Spinner ========== */
4475 /* ========== Text fields ========== */
4476 /* ========== Card ========== */
4477 /* ========== Sliders ========== */
4478 /* ========== Progress ========== */
4479 /* ========== List ========== */
4480 /* ========== Item ========== */
4481 /* ========== Dropdown menu ========== */
4482 /* ========== Tooltips ========== */
4483 /* ========== Footer ========== */
4497 /* Card dimensions */
4516 * Copyright 2015 Google Inc. All Rights Reserved.
4518 * Licensed under the Apache License, Version 2.0 (the "License");
4519 * you may not use this file except in compliance with the License.
4520 * You may obtain a copy of the License at
4522 * http://www.apache.org/licenses/LICENSE-2.0
4524 * Unless required by applicable law or agreed to in writing, software
4525 * distributed under the License is distributed on an "AS IS" BASIS,
4526 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4527 * See the License for the specific language governing permissions and
4528 * limitations under the License.
4535 background: transparent;
4538 color: rgb(0, 0, 0);
4544 display: inline-block;
4545 font-family: "Roboto";
4548 text-transform: uppercase;
4552 will-change: box-shadow;
4553 transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
4556 text-decoration: none;
4559 vertical-align: middle;
4562 .mdl-button::-moz-focus-inner {
4567 background-color: rgba(158, 158, 158, 0.20);
4570 .mdl-button:focus:not(:active) {
4571 background-color: rgba(0, 0, 0, 0.12);
4574 .mdl-button:active {
4575 background-color: rgba(158, 158, 158, 0.40);
4578 .mdl-button.mdl-button--colored {
4579 color: rgb(63, 81, 181);
4582 .mdl-button.mdl-button--colored:focus:not(:active) {
4583 background-color: rgba(0, 0, 0, 0.12);
4586 input.mdl-button[type="submit"] {
4587 -webkit-appearance: none;
4590 .mdl-button--raised {
4591 background: rgba(158, 158, 158, 0.20);
4592 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
4595 .mdl-button--raised:active {
4596 box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
4597 background-color: rgba(158, 158, 158, 0.40);
4600 .mdl-button--raised:focus:not(:active) {
4601 box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
4602 background-color: rgba(158, 158, 158, 0.40);
4605 .mdl-button--raised.mdl-button--colored {
4606 background: rgb(63, 81, 181);
4607 color: rgb(255, 255, 255);
4610 .mdl-button--raised.mdl-button--colored:hover {
4611 background-color: rgb(63, 81, 181);
4614 .mdl-button--raised.mdl-button--colored:active {
4615 background-color: rgb(63, 81, 181);
4618 .mdl-button--raised.mdl-button--colored:focus:not(:active) {
4619 background-color: rgb(63, 81, 181);
4622 .mdl-button--raised.mdl-button--colored .mdl-ripple {
4623 background: rgb(255, 255, 255);
4635 background: rgba(158, 158, 158, 0.20);
4636 box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
4638 line-height: normal;
4641 .mdl-button--fab .material-icons {
4645 -webkit-transform: translate(-12px, -12px);
4646 transform: translate(-12px, -12px);
4651 .mdl-button--fab.mdl-button--mini-fab {
4657 .mdl-button--fab .mdl-button__ripple-container {
4659 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
4662 .mdl-button--fab:active {
4663 box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
4664 background-color: rgba(158, 158, 158, 0.40);
4667 .mdl-button--fab:focus:not(:active) {
4668 box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
4669 background-color: rgba(158, 158, 158, 0.40);
4672 .mdl-button--fab.mdl-button--colored {
4673 background: rgb(255, 64, 129);
4674 color: rgb(255, 255, 255);
4677 .mdl-button--fab.mdl-button--colored:hover {
4678 background-color: rgb(255, 64, 129);
4681 .mdl-button--fab.mdl-button--colored:focus:not(:active) {
4682 background-color: rgb(255, 64, 129);
4685 .mdl-button--fab.mdl-button--colored:active {
4686 background-color: rgb(255, 64, 129);
4689 .mdl-button--fab.mdl-button--colored .mdl-ripple {
4690 background: rgb(255, 255, 255);
4704 line-height: normal;
4707 .mdl-button--icon .material-icons {
4711 -webkit-transform: translate(-12px, -12px);
4712 transform: translate(-12px, -12px);
4717 .mdl-button--icon.mdl-button--mini-icon {
4723 .mdl-button--icon.mdl-button--mini-icon .material-icons {
4728 .mdl-button--icon .mdl-button__ripple-container {
4730 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
4733 .mdl-button__ripple-container {
4744 .mdl-button[disabled] .mdl-button__ripple-container .mdl-ripple,
4745 .mdl-button.mdl-button--disabled .mdl-button__ripple-container .mdl-ripple {
4746 background-color: transparent;
4749 .mdl-button--primary.mdl-button--primary {
4750 color: rgb(63, 81, 181);
4753 .mdl-button--primary.mdl-button--primary .mdl-ripple {
4754 background: rgb(255, 255, 255);
4757 .mdl-button--primary.mdl-button--primary.mdl-button--raised, .mdl-button--primary.mdl-button--primary.mdl-button--fab {
4758 color: rgb(255, 255, 255);
4759 background-color: rgb(63, 81, 181);
4762 .mdl-button--accent.mdl-button--accent {
4763 color: rgb(255, 64, 129);
4766 .mdl-button--accent.mdl-button--accent .mdl-ripple {
4767 background: rgb(255, 255, 255);
4770 .mdl-button--accent.mdl-button--accent.mdl-button--raised, .mdl-button--accent.mdl-button--accent.mdl-button--fab {
4771 color: rgb(255, 255, 255);
4772 background-color: rgb(255, 64, 129);
4775 .mdl-button[disabled][disabled], .mdl-button.mdl-button--disabled.mdl-button--disabled {
4776 color: rgba(0, 0, 0, 0.26);
4778 background-color: transparent;
4781 .mdl-button--fab[disabled][disabled], .mdl-button--fab.mdl-button--disabled.mdl-button--disabled {
4782 background-color: rgba(0, 0, 0, 0.12);
4783 color: rgba(0, 0, 0, 0.26);
4786 .mdl-button--raised[disabled][disabled], .mdl-button--raised.mdl-button--disabled.mdl-button--disabled {
4787 background-color: rgba(0, 0, 0, 0.12);
4788 color: rgba(0, 0, 0, 0.26);
4792 .mdl-button--colored[disabled][disabled], .mdl-button--colored.mdl-button--disabled.mdl-button--disabled {
4793 color: rgba(0, 0, 0, 0.26);
4796 .mdl-button .material-icons {
4797 vertical-align: middle;
4801 * Copyright 2015 Google Inc. All Rights Reserved.
4803 * Licensed under the Apache License, Version 2.0 (the "License");
4804 * you may not use this file except in compliance with the License.
4805 * You may obtain a copy of the License at
4807 * http://www.apache.org/licenses/LICENSE-2.0
4809 * Unless required by applicable law or agreed to in writing, software
4810 * distributed under the License is distributed on an "AS IS" BASIS,
4811 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4812 * See the License for the specific language governing permissions and
4813 * limitations under the License.
4816 * Copyright 2015 Google Inc. All Rights Reserved.
4818 * Licensed under the Apache License, Version 2.0 (the "License");
4819 * you may not use this file except in compliance with the License.
4820 * You may obtain a copy of the License at
4822 * http://www.apache.org/licenses/LICENSE-2.0
4824 * Unless required by applicable law or agreed to in writing, software
4825 * distributed under the License is distributed on an "AS IS" BASIS,
4826 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4827 * See the License for the specific language governing permissions and
4828 * limitations under the License.
4830 /*------------------------------------* $CONTENTS
4831 \*------------------------------------*/
4833 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
4860 * Even though all variables have the `!default` directive, most of them
4861 * should not be changed as they are dependent one another. This can cause
4862 * visual distortions (like alignment issues) that are hard to track down
4865 /* ========== TYPOGRAPHY ========== */
4866 /* We're splitting fonts into "preferred" and "performance" in order to optimize
4867 page loading. For important text, such as the body, we want it to load
4868 immediately and not wait for the web font load, whereas for other sections,
4869 such as headers and titles, we're OK with things taking a bit longer to load.
4870 We do have some optional classes and parameters in the mixins, in case you
4871 definitely want to make sure you're using the preferred font and don't mind
4872 the performance hit.
4873 We should be able to improve on this once CSS Font Loading L3 becomes more
4876 /* ========== COLORS ========== */
4879 * Material design color palettes.
4880 * @see http://www.google.com/design/spec/style/color.html
4884 * Copyright 2015 Google Inc. All Rights Reserved.
4886 * Licensed under the Apache License, Version 2.0 (the "License");
4887 * you may not use this file except in compliance with the License.
4888 * You may obtain a copy of the License at
4890 * http://www.apache.org/licenses/LICENSE-2.0
4892 * Unless required by applicable law or agreed to in writing, software
4893 * distributed under the License is distributed on an "AS IS" BASIS,
4894 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4895 * See the License for the specific language governing permissions and
4896 * limitations under the License.
4898 /* ========== Color Palettes ========== */
4901 * Copyright 2015 Google Inc. All Rights Reserved.
4903 * Licensed under the Apache License, Version 2.0 (the "License");
4904 * you may not use this file except in compliance with the License.
4905 * You may obtain a copy of the License at
4907 * http://www.apache.org/licenses/LICENSE-2.0
4909 * Unless required by applicable law or agreed to in writing, software
4910 * distributed under the License is distributed on an "AS IS" BASIS,
4911 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4912 * See the License for the specific language governing permissions and
4913 * limitations under the License.
4915 /* ========== IMAGES ========== */
4916 /* ========== Color & Themes ========== */
4917 /* ========== Typography ========== */
4918 /* ========== Components ========== */
4919 /* ========== Standard Buttons ========== */
4920 /* ========== Icon Toggles ========== */
4921 /* ========== Radio Buttons ========== */
4922 /* ========== Ripple effect ========== */
4923 /* ========== Layout ========== */
4924 /* ========== Content Tabs ========== */
4925 /* ========== Checkboxes ========== */
4926 /* ========== Switches ========== */
4927 /* ========== Spinner ========== */
4928 /* ========== Text fields ========== */
4929 /* ========== Card ========== */
4930 /* ========== Sliders ========== */
4931 /* ========== Progress ========== */
4932 /* ========== List ========== */
4933 /* ========== Item ========== */
4934 /* ========== Dropdown menu ========== */
4935 /* ========== Tooltips ========== */
4936 /* ========== Footer ========== */
4950 /* Card dimensions */
4969 display: -webkit-flex;
4970 display: -ms-flexbox;
4972 -webkit-flex-direction: column;
4973 -ms-flex-direction: column;
4974 flex-direction: column;
4982 background: rgb(255, 255, 255);
4984 box-sizing: border-box;
4988 background-color: rgb(255, 64, 129);
4989 background-repeat: repeat;
4990 background-position: 50% 50%;
4991 background-size: cover;
4992 background-origin: padding-box;
4993 background-attachment: scroll;
4994 box-sizing: border-box;
4998 -webkit-align-items: center;
4999 -ms-flex-align: center;
5000 align-items: center;
5001 color: rgb(0, 0, 0);
5003 display: -webkit-flex;
5004 display: -ms-flexbox;
5006 -webkit-justify-content: stretch;
5007 -ms-flex-pack: stretch;
5008 justify-content: stretch;
5009 line-height: normal;
5011 -webkit-perspective-origin: 165px 56px;
5012 perspective-origin: 165px 56px;
5013 -webkit-transform-origin: 165px 56px;
5014 transform-origin: 165px 56px;
5015 box-sizing: border-box;
5018 .mdl-card__title.mdl-card--border {
5019 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
5022 .mdl-card__title-text {
5023 -webkit-align-self: flex-end;
5024 -ms-flex-item-align: end;
5025 align-self: flex-end;
5028 display: -webkit-flex;
5029 display: -ms-flexbox;
5033 line-height: normal;
5035 -webkit-transform-origin: 149px 48px;
5036 transform-origin: 149px 48px;
5040 .mdl-card__subtitle-text {
5042 color: rgba(0, 0, 0, 0.54);
5046 .mdl-card__supporting-text {
5047 color: rgba(0, 0, 0, 0.54);
5055 .mdl-card__supporting-text.mdl-card--border {
5056 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
5059 .mdl-card__actions {
5061 line-height: normal;
5063 background-color: transparent;
5065 box-sizing: border-box;
5068 .mdl-card__actions.mdl-card--border {
5069 border-top: 1px solid rgba(0, 0, 0, 0.1);
5073 -webkit-flex-grow: 1;
5074 -ms-flex-positive: 1;
5085 * Copyright 2015 Google Inc. All Rights Reserved.
5087 * Licensed under the Apache License, Version 2.0 (the "License");
5088 * you may not use this file except in compliance with the License.
5089 * You may obtain a copy of the License at
5091 * http://www.apache.org/licenses/LICENSE-2.0
5093 * Unless required by applicable law or agreed to in writing, software
5094 * distributed under the License is distributed on an "AS IS" BASIS,
5095 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5096 * See the License for the specific language governing permissions and
5097 * limitations under the License.
5100 * Copyright 2015 Google Inc. All Rights Reserved.
5102 * Licensed under the Apache License, Version 2.0 (the "License");
5103 * you may not use this file except in compliance with the License.
5104 * You may obtain a copy of the License at
5106 * http://www.apache.org/licenses/LICENSE-2.0
5108 * Unless required by applicable law or agreed to in writing, software
5109 * distributed under the License is distributed on an "AS IS" BASIS,
5110 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5111 * See the License for the specific language governing permissions and
5112 * limitations under the License.
5114 /*------------------------------------* $CONTENTS
5115 \*------------------------------------*/
5117 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
5144 * Even though all variables have the `!default` directive, most of them
5145 * should not be changed as they are dependent one another. This can cause
5146 * visual distortions (like alignment issues) that are hard to track down
5149 /* ========== TYPOGRAPHY ========== */
5150 /* We're splitting fonts into "preferred" and "performance" in order to optimize
5151 page loading. For important text, such as the body, we want it to load
5152 immediately and not wait for the web font load, whereas for other sections,
5153 such as headers and titles, we're OK with things taking a bit longer to load.
5154 We do have some optional classes and parameters in the mixins, in case you
5155 definitely want to make sure you're using the preferred font and don't mind
5156 the performance hit.
5157 We should be able to improve on this once CSS Font Loading L3 becomes more
5160 /* ========== COLORS ========== */
5163 * Material design color palettes.
5164 * @see http://www.google.com/design/spec/style/color.html
5168 * Copyright 2015 Google Inc. All Rights Reserved.
5170 * Licensed under the Apache License, Version 2.0 (the "License");
5171 * you may not use this file except in compliance with the License.
5172 * You may obtain a copy of the License at
5174 * http://www.apache.org/licenses/LICENSE-2.0
5176 * Unless required by applicable law or agreed to in writing, software
5177 * distributed under the License is distributed on an "AS IS" BASIS,
5178 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5179 * See the License for the specific language governing permissions and
5180 * limitations under the License.
5182 /* ========== Color Palettes ========== */
5185 * Copyright 2015 Google Inc. All Rights Reserved.
5187 * Licensed under the Apache License, Version 2.0 (the "License");
5188 * you may not use this file except in compliance with the License.
5189 * You may obtain a copy of the License at
5191 * http://www.apache.org/licenses/LICENSE-2.0
5193 * Unless required by applicable law or agreed to in writing, software
5194 * distributed under the License is distributed on an "AS IS" BASIS,
5195 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5196 * See the License for the specific language governing permissions and
5197 * limitations under the License.
5199 /* ========== IMAGES ========== */
5200 /* ========== Color & Themes ========== */
5201 /* ========== Typography ========== */
5202 /* ========== Components ========== */
5203 /* ========== Standard Buttons ========== */
5204 /* ========== Icon Toggles ========== */
5205 /* ========== Radio Buttons ========== */
5206 /* ========== Ripple effect ========== */
5207 /* ========== Layout ========== */
5208 /* ========== Content Tabs ========== */
5209 /* ========== Checkboxes ========== */
5210 /* ========== Switches ========== */
5211 /* ========== Spinner ========== */
5212 /* ========== Text fields ========== */
5213 /* ========== Card ========== */
5214 /* ========== Sliders ========== */
5215 /* ========== Progress ========== */
5216 /* ========== List ========== */
5217 /* ========== Item ========== */
5218 /* ========== Dropdown menu ========== */
5219 /* ========== Tooltips ========== */
5220 /* ========== Footer ========== */
5234 /* Card dimensions */
5253 * Copyright 2015 Google Inc. All Rights Reserved.
5255 * Licensed under the Apache License, Version 2.0 (the "License");
5256 * you may not use this file except in compliance with the License.
5257 * You may obtain a copy of the License at
5259 * http://www.apache.org/licenses/LICENSE-2.0
5261 * Unless required by applicable law or agreed to in writing, software
5262 * distributed under the License is distributed on an "AS IS" BASIS,
5263 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5264 * See the License for the specific language governing permissions and
5265 * limitations under the License.
5274 vertical-align: middle;
5275 display: inline-block;
5276 box-sizing: border-box;
5283 .mdl-checkbox.is-upgraded {
5287 .mdl-checkbox__input {
5291 .mdl-checkbox.is-upgraded .mdl-checkbox__input {
5298 -ms-appearance: none;
5299 -moz-appearance: none;
5300 -webkit-appearance: none;
5305 .mdl-checkbox__box-outline {
5309 display: inline-block;
5310 box-sizing: border-box;
5316 border: 2px solid rgba(0, 0, 0, 0.54);
5321 .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
5322 border: 2px solid rgb(63, 81, 181);
5325 fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline,
5326 .mdl-checkbox.is-disabled .mdl-checkbox__box-outline {
5327 border: 2px solid rgba(0, 0, 0, 0.26);
5331 .mdl-checkbox__focus-helper {
5335 display: inline-block;
5336 box-sizing: border-box;
5340 background-color: transparent;
5343 .mdl-checkbox.is-focused .mdl-checkbox__focus-helper {
5344 box-shadow: 0 0 0px 8px rgba(0, 0, 0, 0.1);
5345 background-color: rgba(0, 0, 0, 0.1);
5348 .mdl-checkbox.is-focused.is-checked .mdl-checkbox__focus-helper {
5349 box-shadow: 0 0 0px 8px rgba(63, 81, 181, 0.26);
5350 background-color: rgba(63, 81, 181, 0.26);
5353 .mdl-checkbox__tick-outline {
5359 -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcCI+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gMCwwIDAsMSAxLDEgMSwwIDAsMCB6IE0gMC44NTM0Mzc1LDAuMTY3MTg3NSAwLjk1OTY4NzUsMC4yNzMxMjUgMC40MjkzNzUsMC44MDM0Mzc1IDAuMzIzMTI1LDAuOTA5Njg3NSAwLjIxNzE4NzUsMC44MDM0Mzc1IDAuMDQwMzEyNSwwLjYyNjg3NSAwLjE0NjU2MjUsMC41MjA2MjUgMC4zMjMxMjUsMC42OTc1IDAuODUzNDM3NSwwLjE2NzE4NzUgeiIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICAgIDwvY2xpcFBhdGg+CiAgICA8bWFzayBpZD0ibWFzayIgbWFza1VuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgbWFza0NvbnRlbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPgogICAgICA8cGF0aAogICAgICAgICBkPSJNIDAsMCAwLDEgMSwxIDEsMCAwLDAgeiBNIDAuODUzNDM3NSwwLjE2NzE4NzUgMC45NTk2ODc1LDAuMjczMTI1IDAuNDI5Mzc1LDAuODAzNDM3NSAwLjMyMzEyNSwwLjkwOTY4NzUgMC4yMTcxODc1LDAuODAzNDM3NSAwLjA0MDMxMjUsMC42MjY4NzUgMC4xNDY1NjI1LDAuNTIwNjI1IDAuMzIzMTI1LDAuNjk3NSAwLjg1MzQzNzUsMC4xNjcxODc1IHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8L21hc2s+CiAgPC9kZWZzPgogIDxyZWN0CiAgICAgd2lkdGg9IjEiCiAgICAgaGVpZ2h0PSIxIgogICAgIHg9IjAiCiAgICAgeT0iMCIKICAgICBjbGlwLXBhdGg9InVybCgjY2xpcCkiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KPC9zdmc+Cg==");
5360 mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcCI+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gMCwwIDAsMSAxLDEgMSwwIDAsMCB6IE0gMC44NTM0Mzc1LDAuMTY3MTg3NSAwLjk1OTY4NzUsMC4yNzMxMjUgMC40MjkzNzUsMC44MDM0Mzc1IDAuMzIzMTI1LDAuOTA5Njg3NSAwLjIxNzE4NzUsMC44MDM0Mzc1IDAuMDQwMzEyNSwwLjYyNjg3NSAwLjE0NjU2MjUsMC41MjA2MjUgMC4zMjMxMjUsMC42OTc1IDAuODUzNDM3NSwwLjE2NzE4NzUgeiIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICAgIDwvY2xpcFBhdGg+CiAgICA8bWFzayBpZD0ibWFzayIgbWFza1VuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgbWFza0NvbnRlbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPgogICAgICA8cGF0aAogICAgICAgICBkPSJNIDAsMCAwLDEgMSwxIDEsMCAwLDAgeiBNIDAuODUzNDM3NSwwLjE2NzE4NzUgMC45NTk2ODc1LDAuMjczMTI1IDAuNDI5Mzc1LDAuODAzNDM3NSAwLjMyMzEyNSwwLjkwOTY4NzUgMC4yMTcxODc1LDAuODAzNDM3NSAwLjA0MDMxMjUsMC42MjY4NzUgMC4xNDY1NjI1LDAuNTIwNjI1IDAuMzIzMTI1LDAuNjk3NSAwLjg1MzQzNzUsMC4xNjcxODc1IHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8L21hc2s+CiAgPC9kZWZzPgogIDxyZWN0CiAgICAgd2lkdGg9IjEiCiAgICAgaGVpZ2h0PSIxIgogICAgIHg9IjAiCiAgICAgeT0iMCIKICAgICBjbGlwLXBhdGg9InVybCgjY2xpcCkiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KPC9zdmc+Cg==");
5361 background: transparent;
5362 transition-duration: 0.28s;
5363 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
5364 transition-property: background;
5367 .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
5368 background: rgb(63, 81, 181) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K");
5371 fieldset[disabled] .mdl-checkbox.is-checked .mdl-checkbox__tick-outline,
5372 .mdl-checkbox.is-checked.is-disabled .mdl-checkbox__tick-outline {
5373 background: rgba(0, 0, 0, 0.26) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K");
5376 .mdl-checkbox__label {
5384 fieldset[disabled] .mdl-checkbox .mdl-checkbox__label,
5385 .mdl-checkbox.is-disabled .mdl-checkbox__label {
5386 color: rgba(0, 0, 0, 0.26);
5390 .mdl-checkbox__ripple-container {
5395 box-sizing: border-box;
5401 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
5404 .mdl-checkbox__ripple-container .mdl-ripple {
5405 background: rgb(63, 81, 181);
5408 fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container,
5409 .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container {
5413 fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container .mdl-ripple,
5414 .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container .mdl-ripple {
5415 background: transparent;
5419 * Copyright 2015 Google Inc. All Rights Reserved.
5421 * Licensed under the Apache License, Version 2.0 (the "License");
5422 * you may not use this file except in compliance with the License.
5423 * You may obtain a copy of the License at
5425 * http://www.apache.org/licenses/LICENSE-2.0
5427 * Unless required by applicable law or agreed to in writing, software
5428 * distributed under the License is distributed on an "AS IS" BASIS,
5429 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5430 * See the License for the specific language governing permissions and
5431 * limitations under the License.
5434 * Copyright 2015 Google Inc. All Rights Reserved.
5436 * Licensed under the Apache License, Version 2.0 (the "License");
5437 * you may not use this file except in compliance with the License.
5438 * You may obtain a copy of the License at
5440 * http://www.apache.org/licenses/LICENSE-2.0
5442 * Unless required by applicable law or agreed to in writing, software
5443 * distributed under the License is distributed on an "AS IS" BASIS,
5444 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5445 * See the License for the specific language governing permissions and
5446 * limitations under the License.
5448 /*------------------------------------* $CONTENTS
5449 \*------------------------------------*/
5451 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
5478 * Even though all variables have the `!default` directive, most of them
5479 * should not be changed as they are dependent one another. This can cause
5480 * visual distortions (like alignment issues) that are hard to track down
5483 /* ========== TYPOGRAPHY ========== */
5484 /* We're splitting fonts into "preferred" and "performance" in order to optimize
5485 page loading. For important text, such as the body, we want it to load
5486 immediately and not wait for the web font load, whereas for other sections,
5487 such as headers and titles, we're OK with things taking a bit longer to load.
5488 We do have some optional classes and parameters in the mixins, in case you
5489 definitely want to make sure you're using the preferred font and don't mind
5490 the performance hit.
5491 We should be able to improve on this once CSS Font Loading L3 becomes more
5494 /* ========== COLORS ========== */
5497 * Material design color palettes.
5498 * @see http://www.google.com/design/spec/style/color.html
5502 * Copyright 2015 Google Inc. All Rights Reserved.
5504 * Licensed under the Apache License, Version 2.0 (the "License");
5505 * you may not use this file except in compliance with the License.
5506 * You may obtain a copy of the License at
5508 * http://www.apache.org/licenses/LICENSE-2.0
5510 * Unless required by applicable law or agreed to in writing, software
5511 * distributed under the License is distributed on an "AS IS" BASIS,
5512 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5513 * See the License for the specific language governing permissions and
5514 * limitations under the License.
5516 /* ========== Color Palettes ========== */
5519 * Copyright 2015 Google Inc. All Rights Reserved.
5521 * Licensed under the Apache License, Version 2.0 (the "License");
5522 * you may not use this file except in compliance with the License.
5523 * You may obtain a copy of the License at
5525 * http://www.apache.org/licenses/LICENSE-2.0
5527 * Unless required by applicable law or agreed to in writing, software
5528 * distributed under the License is distributed on an "AS IS" BASIS,
5529 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5530 * See the License for the specific language governing permissions and
5531 * limitations under the License.
5533 /* ========== IMAGES ========== */
5534 /* ========== Color & Themes ========== */
5535 /* ========== Typography ========== */
5536 /* ========== Components ========== */
5537 /* ========== Standard Buttons ========== */
5538 /* ========== Icon Toggles ========== */
5539 /* ========== Radio Buttons ========== */
5540 /* ========== Ripple effect ========== */
5541 /* ========== Layout ========== */
5542 /* ========== Content Tabs ========== */
5543 /* ========== Checkboxes ========== */
5544 /* ========== Switches ========== */
5545 /* ========== Spinner ========== */
5546 /* ========== Text fields ========== */
5547 /* ========== Card ========== */
5548 /* ========== Sliders ========== */
5549 /* ========== Progress ========== */
5550 /* ========== List ========== */
5551 /* ========== Item ========== */
5552 /* ========== Dropdown menu ========== */
5553 /* ========== Tooltips ========== */
5554 /* ========== Footer ========== */
5568 /* Card dimensions */
5587 * Copyright 2015 Google Inc. All Rights Reserved.
5589 * Licensed under the Apache License, Version 2.0 (the "License");
5590 * you may not use this file except in compliance with the License.
5591 * You may obtain a copy of the License at
5593 * http://www.apache.org/licenses/LICENSE-2.0
5595 * Unless required by applicable law or agreed to in writing, software
5596 * distributed under the License is distributed on an "AS IS" BASIS,
5597 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5598 * See the License for the specific language governing permissions and
5599 * limitations under the License.
5607 font-family: "Roboto";
5611 border-radius: 16px;
5612 background-color: #dedede;
5613 display: inline-block;
5614 color: rgba(0, 0, 0, 0.87);
5617 white-space: nowrap;
5622 vertical-align: middle;
5623 display: inline-block;
5629 background: transparent;
5631 display: inline-block;
5634 vertical-align: middle;
5638 text-decoration: none;
5639 color: rgba(0, 0, 0, 0.87);
5645 .mdl-chip__contact {
5648 border-radius: 16px;
5649 display: inline-block;
5650 vertical-align: middle;
5660 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
5664 background-color: #d6d6d6;
5667 .mdl-chip--deletable {
5671 .mdl-chip--contact {
5676 * Copyright 2015 Google Inc. All Rights Reserved.
5678 * Licensed under the Apache License, Version 2.0 (the "License");
5679 * you may not use this file except in compliance with the License.
5680 * You may obtain a copy of the License at
5682 * http://www.apache.org/licenses/LICENSE-2.0
5684 * Unless required by applicable law or agreed to in writing, software
5685 * distributed under the License is distributed on an "AS IS" BASIS,
5686 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5687 * See the License for the specific language governing permissions and
5688 * limitations under the License.
5691 * Copyright 2015 Google Inc. All Rights Reserved.
5693 * Licensed under the Apache License, Version 2.0 (the "License");
5694 * you may not use this file except in compliance with the License.
5695 * You may obtain a copy of the License at
5697 * http://www.apache.org/licenses/LICENSE-2.0
5699 * Unless required by applicable law or agreed to in writing, software
5700 * distributed under the License is distributed on an "AS IS" BASIS,
5701 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5702 * See the License for the specific language governing permissions and
5703 * limitations under the License.
5705 /*------------------------------------* $CONTENTS
5706 \*------------------------------------*/
5708 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
5735 * Even though all variables have the `!default` directive, most of them
5736 * should not be changed as they are dependent one another. This can cause
5737 * visual distortions (like alignment issues) that are hard to track down
5740 /* ========== TYPOGRAPHY ========== */
5741 /* We're splitting fonts into "preferred" and "performance" in order to optimize
5742 page loading. For important text, such as the body, we want it to load
5743 immediately and not wait for the web font load, whereas for other sections,
5744 such as headers and titles, we're OK with things taking a bit longer to load.
5745 We do have some optional classes and parameters in the mixins, in case you
5746 definitely want to make sure you're using the preferred font and don't mind
5747 the performance hit.
5748 We should be able to improve on this once CSS Font Loading L3 becomes more
5751 /* ========== COLORS ========== */
5754 * Material design color palettes.
5755 * @see http://www.google.com/design/spec/style/color.html
5759 * Copyright 2015 Google Inc. All Rights Reserved.
5761 * Licensed under the Apache License, Version 2.0 (the "License");
5762 * you may not use this file except in compliance with the License.
5763 * You may obtain a copy of the License at
5765 * http://www.apache.org/licenses/LICENSE-2.0
5767 * Unless required by applicable law or agreed to in writing, software
5768 * distributed under the License is distributed on an "AS IS" BASIS,
5769 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5770 * See the License for the specific language governing permissions and
5771 * limitations under the License.
5773 /* ========== Color Palettes ========== */
5776 * Copyright 2015 Google Inc. All Rights Reserved.
5778 * Licensed under the Apache License, Version 2.0 (the "License");
5779 * you may not use this file except in compliance with the License.
5780 * You may obtain a copy of the License at
5782 * http://www.apache.org/licenses/LICENSE-2.0
5784 * Unless required by applicable law or agreed to in writing, software
5785 * distributed under the License is distributed on an "AS IS" BASIS,
5786 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5787 * See the License for the specific language governing permissions and
5788 * limitations under the License.
5790 /* ========== IMAGES ========== */
5791 /* ========== Color & Themes ========== */
5792 /* ========== Typography ========== */
5793 /* ========== Components ========== */
5794 /* ========== Standard Buttons ========== */
5795 /* ========== Icon Toggles ========== */
5796 /* ========== Radio Buttons ========== */
5797 /* ========== Ripple effect ========== */
5798 /* ========== Layout ========== */
5799 /* ========== Content Tabs ========== */
5800 /* ========== Checkboxes ========== */
5801 /* ========== Switches ========== */
5802 /* ========== Spinner ========== */
5803 /* ========== Text fields ========== */
5804 /* ========== Card ========== */
5805 /* ========== Sliders ========== */
5806 /* ========== Progress ========== */
5807 /* ========== List ========== */
5808 /* ========== Item ========== */
5809 /* ========== Dropdown menu ========== */
5810 /* ========== Tooltips ========== */
5811 /* ========== Footer ========== */
5825 /* Card dimensions */
5844 * Copyright 2015 Google Inc. All Rights Reserved.
5846 * Licensed under the Apache License, Version 2.0 (the "License");
5847 * you may not use this file except in compliance with the License.
5848 * You may obtain a copy of the License at
5850 * http://www.apache.org/licenses/LICENSE-2.0
5852 * Unless required by applicable law or agreed to in writing, software
5853 * distributed under the License is distributed on an "AS IS" BASIS,
5854 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5855 * See the License for the specific language governing permissions and
5856 * limitations under the License.
5864 border: 1px solid rgba(0, 0, 0, 0.12);
5865 border-collapse: collapse;
5866 white-space: nowrap;
5868 background-color: rgb(255, 255, 255);
5871 .mdl-data-table thead {
5872 padding-bottom: 3px;
5875 .mdl-data-table thead .mdl-data-table__select {
5879 .mdl-data-table tbody tr {
5882 transition-duration: 0.28s;
5883 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
5884 transition-property: background-color;
5887 .mdl-data-table tbody tr.is-selected {
5888 background-color: #e0e0e0;
5891 .mdl-data-table tbody tr:hover {
5892 background-color: #eeeeee;
5895 .mdl-data-table td, .mdl-data-table th {
5896 padding: 0 18px 12px 18px;
5900 .mdl-data-table td:first-of-type, .mdl-data-table th:first-of-type {
5904 .mdl-data-table td:last-of-type, .mdl-data-table th:last-of-type {
5905 padding-right: 24px;
5908 .mdl-data-table td {
5910 vertical-align: middle;
5912 border-top: 1px solid rgba(0, 0, 0, 0.12);
5913 border-bottom: 1px solid rgba(0, 0, 0, 0.12);
5915 box-sizing: border-box;
5918 .mdl-data-table td .mdl-data-table__select {
5919 vertical-align: middle;
5922 .mdl-data-table th {
5924 vertical-align: bottom;
5925 text-overflow: ellipsis;
5932 color: rgba(0, 0, 0, 0.54);
5933 padding-bottom: 8px;
5934 box-sizing: border-box;
5937 .mdl-data-table th.mdl-data-table__header--sorted-ascending, .mdl-data-table th.mdl-data-table__header--sorted-descending {
5938 color: rgba(0, 0, 0, 0.87);
5941 .mdl-data-table th.mdl-data-table__header--sorted-ascending:before, .mdl-data-table th.mdl-data-table__header--sorted-descending:before {
5942 font-family: 'Material Icons';
5943 font-weight: normal;
5947 letter-spacing: normal;
5948 text-transform: none;
5949 display: inline-block;
5951 -moz-font-feature-settings: 'liga';
5952 font-feature-settings: 'liga';
5953 -webkit-font-feature-settings: 'liga';
5954 -webkit-font-smoothing: antialiased;
5958 vertical-align: sub;
5961 .mdl-data-table th.mdl-data-table__header--sorted-ascending:hover, .mdl-data-table th.mdl-data-table__header--sorted-descending:hover {
5965 .mdl-data-table th.mdl-data-table__header--sorted-ascending:hover:before, .mdl-data-table th.mdl-data-table__header--sorted-descending:hover:before {
5966 color: rgba(0, 0, 0, 0.26);
5969 .mdl-data-table th.mdl-data-table__header--sorted-descending:before {
5973 .mdl-data-table__select {
5977 .mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric {
5982 * Copyright 2015 Google Inc. All Rights Reserved.
5984 * Licensed under the Apache License, Version 2.0 (the "License");
5985 * you may not use this file except in compliance with the License.
5986 * You may obtain a copy of the License at
5988 * http://www.apache.org/licenses/LICENSE-2.0
5990 * Unless required by applicable law or agreed to in writing, software
5991 * distributed under the License is distributed on an "AS IS" BASIS,
5992 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5993 * See the License for the specific language governing permissions and
5994 * limitations under the License.
5997 * Copyright 2015 Google Inc. All Rights Reserved.
5999 * Licensed under the Apache License, Version 2.0 (the "License");
6000 * you may not use this file except in compliance with the License.
6001 * You may obtain a copy of the License at
6003 * http://www.apache.org/licenses/LICENSE-2.0
6005 * Unless required by applicable law or agreed to in writing, software
6006 * distributed under the License is distributed on an "AS IS" BASIS,
6007 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6008 * See the License for the specific language governing permissions and
6009 * limitations under the License.
6011 /*------------------------------------* $CONTENTS
6012 \*------------------------------------*/
6014 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
6041 * Even though all variables have the `!default` directive, most of them
6042 * should not be changed as they are dependent one another. This can cause
6043 * visual distortions (like alignment issues) that are hard to track down
6046 /* ========== TYPOGRAPHY ========== */
6047 /* We're splitting fonts into "preferred" and "performance" in order to optimize
6048 page loading. For important text, such as the body, we want it to load
6049 immediately and not wait for the web font load, whereas for other sections,
6050 such as headers and titles, we're OK with things taking a bit longer to load.
6051 We do have some optional classes and parameters in the mixins, in case you
6052 definitely want to make sure you're using the preferred font and don't mind
6053 the performance hit.
6054 We should be able to improve on this once CSS Font Loading L3 becomes more
6057 /* ========== COLORS ========== */
6060 * Material design color palettes.
6061 * @see http://www.google.com/design/spec/style/color.html
6065 * Copyright 2015 Google Inc. All Rights Reserved.
6067 * Licensed under the Apache License, Version 2.0 (the "License");
6068 * you may not use this file except in compliance with the License.
6069 * You may obtain a copy of the License at
6071 * http://www.apache.org/licenses/LICENSE-2.0
6073 * Unless required by applicable law or agreed to in writing, software
6074 * distributed under the License is distributed on an "AS IS" BASIS,
6075 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6076 * See the License for the specific language governing permissions and
6077 * limitations under the License.
6079 /* ========== Color Palettes ========== */
6082 * Copyright 2015 Google Inc. All Rights Reserved.
6084 * Licensed under the Apache License, Version 2.0 (the "License");
6085 * you may not use this file except in compliance with the License.
6086 * You may obtain a copy of the License at
6088 * http://www.apache.org/licenses/LICENSE-2.0
6090 * Unless required by applicable law or agreed to in writing, software
6091 * distributed under the License is distributed on an "AS IS" BASIS,
6092 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6093 * See the License for the specific language governing permissions and
6094 * limitations under the License.
6096 /* ========== IMAGES ========== */
6097 /* ========== Color & Themes ========== */
6098 /* ========== Typography ========== */
6099 /* ========== Components ========== */
6100 /* ========== Standard Buttons ========== */
6101 /* ========== Icon Toggles ========== */
6102 /* ========== Radio Buttons ========== */
6103 /* ========== Ripple effect ========== */
6104 /* ========== Layout ========== */
6105 /* ========== Content Tabs ========== */
6106 /* ========== Checkboxes ========== */
6107 /* ========== Switches ========== */
6108 /* ========== Spinner ========== */
6109 /* ========== Text fields ========== */
6110 /* ========== Card ========== */
6111 /* ========== Sliders ========== */
6112 /* ========== Progress ========== */
6113 /* ========== List ========== */
6114 /* ========== Item ========== */
6115 /* ========== Dropdown menu ========== */
6116 /* ========== Tooltips ========== */
6117 /* ========== Footer ========== */
6131 /* Card dimensions */
6150 * Copyright 2015 Google Inc. All Rights Reserved.
6152 * Licensed under the Apache License, Version 2.0 (the "License");
6153 * you may not use this file except in compliance with the License.
6154 * You may obtain a copy of the License at
6156 * http://www.apache.org/licenses/LICENSE-2.0
6158 * Unless required by applicable law or agreed to in writing, software
6159 * distributed under the License is distributed on an "AS IS" BASIS,
6160 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6161 * See the License for the specific language governing permissions and
6162 * limitations under the License.
6170 box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
6174 .mdl-dialog__title {
6175 padding: 24px 24px 0;
6180 .mdl-dialog__actions {
6181 padding: 8px 8px 8px 24px;
6182 display: -webkit-flex;
6183 display: -ms-flexbox;
6185 -webkit-flex-direction: row-reverse;
6186 -ms-flex-direction: row-reverse;
6187 flex-direction: row-reverse;
6188 -webkit-flex-wrap: wrap;
6189 -ms-flex-wrap: wrap;
6193 .mdl-dialog__actions > * {
6198 .mdl-dialog__actions > *:first-child {
6202 .mdl-dialog__actions--full-width {
6206 .mdl-dialog__actions--full-width > * {
6208 -webkit-flex: 0 0 100%;
6211 padding-right: 16px;
6216 .mdl-dialog__content {
6217 padding: 20px 24px 24px 24px;
6218 color: rgba(0, 0, 0, 0.54);
6222 * Copyright 2015 Google Inc. All Rights Reserved.
6224 * Licensed under the Apache License, Version 2.0 (the "License");
6225 * you may not use this file except in compliance with the License.
6226 * You may obtain a copy of the License at
6228 * http://www.apache.org/licenses/LICENSE-2.0
6230 * Unless required by applicable law or agreed to in writing, software
6231 * distributed under the License is distributed on an "AS IS" BASIS,
6232 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6233 * See the License for the specific language governing permissions and
6234 * limitations under the License.
6237 * Copyright 2015 Google Inc. All Rights Reserved.
6239 * Licensed under the Apache License, Version 2.0 (the "License");
6240 * you may not use this file except in compliance with the License.
6241 * You may obtain a copy of the License at
6243 * http://www.apache.org/licenses/LICENSE-2.0
6245 * Unless required by applicable law or agreed to in writing, software
6246 * distributed under the License is distributed on an "AS IS" BASIS,
6247 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6248 * See the License for the specific language governing permissions and
6249 * limitations under the License.
6251 /*------------------------------------* $CONTENTS
6252 \*------------------------------------*/
6254 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
6281 * Even though all variables have the `!default` directive, most of them
6282 * should not be changed as they are dependent one another. This can cause
6283 * visual distortions (like alignment issues) that are hard to track down
6286 /* ========== TYPOGRAPHY ========== */
6287 /* We're splitting fonts into "preferred" and "performance" in order to optimize
6288 page loading. For important text, such as the body, we want it to load
6289 immediately and not wait for the web font load, whereas for other sections,
6290 such as headers and titles, we're OK with things taking a bit longer to load.
6291 We do have some optional classes and parameters in the mixins, in case you
6292 definitely want to make sure you're using the preferred font and don't mind
6293 the performance hit.
6294 We should be able to improve on this once CSS Font Loading L3 becomes more
6297 /* ========== COLORS ========== */
6300 * Material design color palettes.
6301 * @see http://www.google.com/design/spec/style/color.html
6305 * Copyright 2015 Google Inc. All Rights Reserved.
6307 * Licensed under the Apache License, Version 2.0 (the "License");
6308 * you may not use this file except in compliance with the License.
6309 * You may obtain a copy of the License at
6311 * http://www.apache.org/licenses/LICENSE-2.0
6313 * Unless required by applicable law or agreed to in writing, software
6314 * distributed under the License is distributed on an "AS IS" BASIS,
6315 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6316 * See the License for the specific language governing permissions and
6317 * limitations under the License.
6319 /* ========== Color Palettes ========== */
6322 * Copyright 2015 Google Inc. All Rights Reserved.
6324 * Licensed under the Apache License, Version 2.0 (the "License");
6325 * you may not use this file except in compliance with the License.
6326 * You may obtain a copy of the License at
6328 * http://www.apache.org/licenses/LICENSE-2.0
6330 * Unless required by applicable law or agreed to in writing, software
6331 * distributed under the License is distributed on an "AS IS" BASIS,
6332 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6333 * See the License for the specific language governing permissions and
6334 * limitations under the License.
6336 /* ========== IMAGES ========== */
6337 /* ========== Color & Themes ========== */
6338 /* ========== Typography ========== */
6339 /* ========== Components ========== */
6340 /* ========== Standard Buttons ========== */
6341 /* ========== Icon Toggles ========== */
6342 /* ========== Radio Buttons ========== */
6343 /* ========== Ripple effect ========== */
6344 /* ========== Layout ========== */
6345 /* ========== Content Tabs ========== */
6346 /* ========== Checkboxes ========== */
6347 /* ========== Switches ========== */
6348 /* ========== Spinner ========== */
6349 /* ========== Text fields ========== */
6350 /* ========== Card ========== */
6351 /* ========== Sliders ========== */
6352 /* ========== Progress ========== */
6353 /* ========== List ========== */
6354 /* ========== Item ========== */
6355 /* ========== Dropdown menu ========== */
6356 /* ========== Tooltips ========== */
6357 /* ========== Footer ========== */
6371 /* Card dimensions */
6390 * Copyright 2015 Google Inc. All Rights Reserved.
6392 * Licensed under the Apache License, Version 2.0 (the "License");
6393 * you may not use this file except in compliance with the License.
6394 * You may obtain a copy of the License at
6396 * http://www.apache.org/licenses/LICENSE-2.0
6398 * Unless required by applicable law or agreed to in writing, software
6399 * distributed under the License is distributed on an "AS IS" BASIS,
6400 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6401 * See the License for the specific language governing permissions and
6402 * limitations under the License.
6410 color: rgb(158, 158, 158);
6411 background-color: rgb(66, 66, 66);
6414 .mdl-mega-footer--top-section:after,
6415 .mdl-mega-footer--middle-section:after,
6416 .mdl-mega-footer--bottom-section:after,
6417 .mdl-mega-footer__top-section:after,
6418 .mdl-mega-footer__middle-section:after,
6419 .mdl-mega-footer__bottom-section:after {
6425 .mdl-mega-footer--left-section,
6426 .mdl-mega-footer__left-section {
6427 margin-bottom: 16px;
6430 .mdl-mega-footer--right-section,
6431 .mdl-mega-footer__right-section {
6432 margin-bottom: 16px;
6435 .mdl-mega-footer--right-section a,
6436 .mdl-mega-footer__right-section a {
6438 margin-bottom: 16px;
6440 text-decoration: none;
6443 @media screen and (min-width: 760px) {
6444 .mdl-mega-footer--left-section,
6445 .mdl-mega-footer__left-section {
6449 .mdl-mega-footer--right-section,
6450 .mdl-mega-footer__right-section {
6454 .mdl-mega-footer--right-section a,
6455 .mdl-mega-footer__right-section a {
6456 display: inline-block;
6459 vertical-align: middle;
6463 .mdl-mega-footer--social-btn,
6464 .mdl-mega-footer__social-btn {
6469 background-color: rgb(158, 158, 158);
6473 .mdl-mega-footer--drop-down-section,
6474 .mdl-mega-footer__drop-down-section {
6479 @media screen and (min-width: 760px) {
6480 .mdl-mega-footer--drop-down-section,
6481 .mdl-mega-footer__drop-down-section {
6485 .mdl-mega-footer--drop-down-section:nth-child(1),
6486 .mdl-mega-footer--drop-down-section:nth-child(2),
6487 .mdl-mega-footer__drop-down-section:nth-child(1),
6488 .mdl-mega-footer__drop-down-section:nth-child(2) {
6492 .mdl-mega-footer--drop-down-section:nth-child(3),
6493 .mdl-mega-footer__drop-down-section:nth-child(3) {
6497 .mdl-mega-footer--drop-down-section:nth-child(3):after,
6498 .mdl-mega-footer__drop-down-section:nth-child(3):after {
6502 .mdl-mega-footer--drop-down-section:nth-child(4),
6503 .mdl-mega-footer__drop-down-section:nth-child(4) {
6508 .mdl-mega-footer--middle-section:after,
6509 .mdl-mega-footer__middle-section:after {
6515 .mdl-mega-footer--bottom-section,
6516 .mdl-mega-footer__bottom-section {
6521 @media screen and (min-width: 1024px) {
6522 .mdl-mega-footer--drop-down-section,
6523 .mdl-mega-footer--drop-down-section:nth-child(3),
6524 .mdl-mega-footer--drop-down-section:nth-child(4),
6525 .mdl-mega-footer__drop-down-section,
6526 .mdl-mega-footer__drop-down-section:nth-child(3),
6527 .mdl-mega-footer__drop-down-section:nth-child(4) {
6533 .mdl-mega-footer--heading-checkbox,
6534 .mdl-mega-footer__heading-checkbox {
6546 .mdl-mega-footer--heading-checkbox + .mdl-mega-footer--heading:after,
6547 .mdl-mega-footer--heading-checkbox + .mdl-mega-footer__heading:after,
6548 .mdl-mega-footer__heading-checkbox + .mdl-mega-footer--heading:after,
6549 .mdl-mega-footer__heading-checkbox + .mdl-mega-footer__heading:after {
6550 font-family: 'Material Icons';
6554 .mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer--link-list,
6555 .mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer__link-list,
6556 .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
6557 .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
6558 .mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer--link-list,
6559 .mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer__link-list,
6560 .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
6561 .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list {
6565 .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading:after,
6566 .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading:after,
6567 .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading:after,
6568 .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading:after {
6569 font-family: 'Material Icons';
6573 .mdl-mega-footer--heading,
6574 .mdl-mega-footer__heading {
6577 padding-right: 39.8px;
6578 margin-bottom: 16px;
6579 box-sizing: border-box;
6581 line-height: 23.8px;
6583 white-space: nowrap;
6584 text-overflow: ellipsis;
6586 color: rgb(224, 224, 224);
6589 .mdl-mega-footer--heading:after,
6590 .mdl-mega-footer__heading:after {
6598 background-size: cover;
6601 .mdl-mega-footer--link-list,
6602 .mdl-mega-footer__link-list {
6606 margin-bottom: 32px;
6609 .mdl-mega-footer--link-list:after,
6610 .mdl-mega-footer__link-list:after {
6616 .mdl-mega-footer--link-list li,
6617 .mdl-mega-footer__link-list li {
6625 .mdl-mega-footer--link-list a,
6626 .mdl-mega-footer__link-list a {
6628 text-decoration: none;
6629 white-space: nowrap;
6632 @media screen and (min-width: 760px) {
6633 .mdl-mega-footer--heading-checkbox,
6634 .mdl-mega-footer__heading-checkbox {
6638 .mdl-mega-footer--heading-checkbox + .mdl-mega-footer--heading:after,
6639 .mdl-mega-footer--heading-checkbox + .mdl-mega-footer__heading:after,
6640 .mdl-mega-footer__heading-checkbox + .mdl-mega-footer--heading:after,
6641 .mdl-mega-footer__heading-checkbox + .mdl-mega-footer__heading:after {
6645 .mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer--link-list,
6646 .mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer__link-list,
6647 .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
6648 .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
6649 .mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer--link-list,
6650 .mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer__link-list,
6651 .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
6652 .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list {
6656 .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading:after,
6657 .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading:after,
6658 .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading:after,
6659 .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading:after {
6664 .mdl-mega-footer--bottom-section,
6665 .mdl-mega-footer__bottom-section {
6667 margin-bottom: 16px;
6671 margin-bottom: 16px;
6675 .mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li,
6676 .mdl-mega-footer__bottom-section .mdl-mega-footer__link-list li {
6682 @media screen and (min-width: 760px) {
6691 * Copyright 2015 Google Inc. All Rights Reserved.
6693 * Licensed under the Apache License, Version 2.0 (the "License");
6694 * you may not use this file except in compliance with the License.
6695 * You may obtain a copy of the License at
6697 * http://www.apache.org/licenses/LICENSE-2.0
6699 * Unless required by applicable law or agreed to in writing, software
6700 * distributed under the License is distributed on an "AS IS" BASIS,
6701 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6702 * See the License for the specific language governing permissions and
6703 * limitations under the License.
6706 * Copyright 2015 Google Inc. All Rights Reserved.
6708 * Licensed under the Apache License, Version 2.0 (the "License");
6709 * you may not use this file except in compliance with the License.
6710 * You may obtain a copy of the License at
6712 * http://www.apache.org/licenses/LICENSE-2.0
6714 * Unless required by applicable law or agreed to in writing, software
6715 * distributed under the License is distributed on an "AS IS" BASIS,
6716 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6717 * See the License for the specific language governing permissions and
6718 * limitations under the License.
6720 /*------------------------------------* $CONTENTS
6721 \*------------------------------------*/
6723 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
6750 * Even though all variables have the `!default` directive, most of them
6751 * should not be changed as they are dependent one another. This can cause
6752 * visual distortions (like alignment issues) that are hard to track down
6755 /* ========== TYPOGRAPHY ========== */
6756 /* We're splitting fonts into "preferred" and "performance" in order to optimize
6757 page loading. For important text, such as the body, we want it to load
6758 immediately and not wait for the web font load, whereas for other sections,
6759 such as headers and titles, we're OK with things taking a bit longer to load.
6760 We do have some optional classes and parameters in the mixins, in case you
6761 definitely want to make sure you're using the preferred font and don't mind
6762 the performance hit.
6763 We should be able to improve on this once CSS Font Loading L3 becomes more
6766 /* ========== COLORS ========== */
6769 * Material design color palettes.
6770 * @see http://www.google.com/design/spec/style/color.html
6774 * Copyright 2015 Google Inc. All Rights Reserved.
6776 * Licensed under the Apache License, Version 2.0 (the "License");
6777 * you may not use this file except in compliance with the License.
6778 * You may obtain a copy of the License at
6780 * http://www.apache.org/licenses/LICENSE-2.0
6782 * Unless required by applicable law or agreed to in writing, software
6783 * distributed under the License is distributed on an "AS IS" BASIS,
6784 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6785 * See the License for the specific language governing permissions and
6786 * limitations under the License.
6788 /* ========== Color Palettes ========== */
6791 * Copyright 2015 Google Inc. All Rights Reserved.
6793 * Licensed under the Apache License, Version 2.0 (the "License");
6794 * you may not use this file except in compliance with the License.
6795 * You may obtain a copy of the License at
6797 * http://www.apache.org/licenses/LICENSE-2.0
6799 * Unless required by applicable law or agreed to in writing, software
6800 * distributed under the License is distributed on an "AS IS" BASIS,
6801 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6802 * See the License for the specific language governing permissions and
6803 * limitations under the License.
6805 /* ========== IMAGES ========== */
6806 /* ========== Color & Themes ========== */
6807 /* ========== Typography ========== */
6808 /* ========== Components ========== */
6809 /* ========== Standard Buttons ========== */
6810 /* ========== Icon Toggles ========== */
6811 /* ========== Radio Buttons ========== */
6812 /* ========== Ripple effect ========== */
6813 /* ========== Layout ========== */
6814 /* ========== Content Tabs ========== */
6815 /* ========== Checkboxes ========== */
6816 /* ========== Switches ========== */
6817 /* ========== Spinner ========== */
6818 /* ========== Text fields ========== */
6819 /* ========== Card ========== */
6820 /* ========== Sliders ========== */
6821 /* ========== Progress ========== */
6822 /* ========== List ========== */
6823 /* ========== Item ========== */
6824 /* ========== Dropdown menu ========== */
6825 /* ========== Tooltips ========== */
6826 /* ========== Footer ========== */
6840 /* Card dimensions */
6859 display: -webkit-flex;
6860 display: -ms-flexbox;
6862 -webkit-flex-flow: row wrap;
6863 -ms-flex-flow: row wrap;
6864 flex-flow: row wrap;
6865 -webkit-justify-content: space-between;
6866 -ms-flex-pack: justify;
6867 justify-content: space-between;
6869 color: rgb(158, 158, 158);
6870 background-color: rgb(66, 66, 66);
6873 .mdl-mini-footer:after {
6878 .mdl-mini-footer .mdl-logo {
6882 .mdl-mini-footer--link-list,
6883 .mdl-mini-footer__link-list {
6884 display: -webkit-flex;
6885 display: -ms-flexbox;
6887 -webkit-flex-flow: row nowrap;
6888 -ms-flex-flow: row nowrap;
6889 flex-flow: row nowrap;
6895 .mdl-mini-footer--link-list li,
6896 .mdl-mini-footer__link-list li {
6901 @media screen and (min-width: 760px) {
6902 .mdl-mini-footer--link-list li,
6903 .mdl-mini-footer__link-list li {
6908 .mdl-mini-footer--link-list a,
6909 .mdl-mini-footer__link-list a {
6911 text-decoration: none;
6912 white-space: nowrap;
6915 .mdl-mini-footer--left-section,
6916 .mdl-mini-footer__left-section {
6917 display: inline-block;
6923 .mdl-mini-footer--right-section,
6924 .mdl-mini-footer__right-section {
6925 display: inline-block;
6931 .mdl-mini-footer--social-btn,
6932 .mdl-mini-footer__social-btn {
6937 background-color: rgb(158, 158, 158);
6942 * Copyright 2015 Google Inc. All Rights Reserved.
6944 * Licensed under the Apache License, Version 2.0 (the "License");
6945 * you may not use this file except in compliance with the License.
6946 * You may obtain a copy of the License at
6948 * http://www.apache.org/licenses/LICENSE-2.0
6950 * Unless required by applicable law or agreed to in writing, software
6951 * distributed under the License is distributed on an "AS IS" BASIS,
6952 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6953 * See the License for the specific language governing permissions and
6954 * limitations under the License.
6957 * Copyright 2015 Google Inc. All Rights Reserved.
6959 * Licensed under the Apache License, Version 2.0 (the "License");
6960 * you may not use this file except in compliance with the License.
6961 * You may obtain a copy of the License at
6963 * http://www.apache.org/licenses/LICENSE-2.0
6965 * Unless required by applicable law or agreed to in writing, software
6966 * distributed under the License is distributed on an "AS IS" BASIS,
6967 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6968 * See the License for the specific language governing permissions and
6969 * limitations under the License.
6971 /*------------------------------------* $CONTENTS
6972 \*------------------------------------*/
6974 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
7001 * Even though all variables have the `!default` directive, most of them
7002 * should not be changed as they are dependent one another. This can cause
7003 * visual distortions (like alignment issues) that are hard to track down
7006 /* ========== TYPOGRAPHY ========== */
7007 /* We're splitting fonts into "preferred" and "performance" in order to optimize
7008 page loading. For important text, such as the body, we want it to load
7009 immediately and not wait for the web font load, whereas for other sections,
7010 such as headers and titles, we're OK with things taking a bit longer to load.
7011 We do have some optional classes and parameters in the mixins, in case you
7012 definitely want to make sure you're using the preferred font and don't mind
7013 the performance hit.
7014 We should be able to improve on this once CSS Font Loading L3 becomes more
7017 /* ========== COLORS ========== */
7020 * Material design color palettes.
7021 * @see http://www.google.com/design/spec/style/color.html
7025 * Copyright 2015 Google Inc. All Rights Reserved.
7027 * Licensed under the Apache License, Version 2.0 (the "License");
7028 * you may not use this file except in compliance with the License.
7029 * You may obtain a copy of the License at
7031 * http://www.apache.org/licenses/LICENSE-2.0
7033 * Unless required by applicable law or agreed to in writing, software
7034 * distributed under the License is distributed on an "AS IS" BASIS,
7035 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7036 * See the License for the specific language governing permissions and
7037 * limitations under the License.
7039 /* ========== Color Palettes ========== */
7042 * Copyright 2015 Google Inc. All Rights Reserved.
7044 * Licensed under the Apache License, Version 2.0 (the "License");
7045 * you may not use this file except in compliance with the License.
7046 * You may obtain a copy of the License at
7048 * http://www.apache.org/licenses/LICENSE-2.0
7050 * Unless required by applicable law or agreed to in writing, software
7051 * distributed under the License is distributed on an "AS IS" BASIS,
7052 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7053 * See the License for the specific language governing permissions and
7054 * limitations under the License.
7056 /* ========== IMAGES ========== */
7057 /* ========== Color & Themes ========== */
7058 /* ========== Typography ========== */
7059 /* ========== Components ========== */
7060 /* ========== Standard Buttons ========== */
7061 /* ========== Icon Toggles ========== */
7062 /* ========== Radio Buttons ========== */
7063 /* ========== Ripple effect ========== */
7064 /* ========== Layout ========== */
7065 /* ========== Content Tabs ========== */
7066 /* ========== Checkboxes ========== */
7067 /* ========== Switches ========== */
7068 /* ========== Spinner ========== */
7069 /* ========== Text fields ========== */
7070 /* ========== Card ========== */
7071 /* ========== Sliders ========== */
7072 /* ========== Progress ========== */
7073 /* ========== List ========== */
7074 /* ========== Item ========== */
7075 /* ========== Dropdown menu ========== */
7076 /* ========== Tooltips ========== */
7077 /* ========== Footer ========== */
7091 /* Card dimensions */
7112 vertical-align: middle;
7113 display: inline-block;
7119 .mdl-icon-toggle__input {
7123 .mdl-icon-toggle.is-upgraded .mdl-icon-toggle__input {
7130 -ms-appearance: none;
7131 -moz-appearance: none;
7132 -webkit-appearance: none;
7137 .mdl-icon-toggle__label {
7138 display: inline-block;
7144 color: rgb(97, 97, 97);
7150 background-color: transparent;
7151 will-change: background-color;
7152 transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
7155 .mdl-icon-toggle__label.material-icons {
7160 .mdl-icon-toggle.is-checked .mdl-icon-toggle__label {
7161 color: rgb(63, 81, 181);
7164 .mdl-icon-toggle.is-disabled .mdl-icon-toggle__label {
7165 color: rgba(0, 0, 0, 0.26);
7170 .mdl-icon-toggle.is-focused .mdl-icon-toggle__label {
7171 background-color: rgba(0, 0, 0, 0.12);
7174 .mdl-icon-toggle.is-focused.is-checked .mdl-icon-toggle__label {
7175 background-color: rgba(63, 81, 181, 0.26);
7178 .mdl-icon-toggle__ripple-container {
7183 box-sizing: border-box;
7189 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
7192 .mdl-icon-toggle__ripple-container .mdl-ripple {
7193 background: rgb(97, 97, 97);
7196 .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container {
7200 .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container .mdl-ripple {
7201 background: transparent;
7205 * Copyright 2015 Google Inc. All Rights Reserved.
7207 * Licensed under the Apache License, Version 2.0 (the "License");
7208 * you may not use this file except in compliance with the License.
7209 * You may obtain a copy of the License at
7211 * http://www.apache.org/licenses/LICENSE-2.0
7213 * Unless required by applicable law or agreed to in writing, software
7214 * distributed under the License is distributed on an "AS IS" BASIS,
7215 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7216 * See the License for the specific language governing permissions and
7217 * limitations under the License.
7220 * Copyright 2015 Google Inc. All Rights Reserved.
7222 * Licensed under the Apache License, Version 2.0 (the "License");
7223 * you may not use this file except in compliance with the License.
7224 * You may obtain a copy of the License at
7226 * http://www.apache.org/licenses/LICENSE-2.0
7228 * Unless required by applicable law or agreed to in writing, software
7229 * distributed under the License is distributed on an "AS IS" BASIS,
7230 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7231 * See the License for the specific language governing permissions and
7232 * limitations under the License.
7234 /*------------------------------------* $CONTENTS
7235 \*------------------------------------*/
7237 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
7264 * Even though all variables have the `!default` directive, most of them
7265 * should not be changed as they are dependent one another. This can cause
7266 * visual distortions (like alignment issues) that are hard to track down
7269 /* ========== TYPOGRAPHY ========== */
7270 /* We're splitting fonts into "preferred" and "performance" in order to optimize
7271 page loading. For important text, such as the body, we want it to load
7272 immediately and not wait for the web font load, whereas for other sections,
7273 such as headers and titles, we're OK with things taking a bit longer to load.
7274 We do have some optional classes and parameters in the mixins, in case you
7275 definitely want to make sure you're using the preferred font and don't mind
7276 the performance hit.
7277 We should be able to improve on this once CSS Font Loading L3 becomes more
7280 /* ========== COLORS ========== */
7283 * Material design color palettes.
7284 * @see http://www.google.com/design/spec/style/color.html
7288 * Copyright 2015 Google Inc. All Rights Reserved.
7290 * Licensed under the Apache License, Version 2.0 (the "License");
7291 * you may not use this file except in compliance with the License.
7292 * You may obtain a copy of the License at
7294 * http://www.apache.org/licenses/LICENSE-2.0
7296 * Unless required by applicable law or agreed to in writing, software
7297 * distributed under the License is distributed on an "AS IS" BASIS,
7298 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7299 * See the License for the specific language governing permissions and
7300 * limitations under the License.
7302 /* ========== Color Palettes ========== */
7305 * Copyright 2015 Google Inc. All Rights Reserved.
7307 * Licensed under the Apache License, Version 2.0 (the "License");
7308 * you may not use this file except in compliance with the License.
7309 * You may obtain a copy of the License at
7311 * http://www.apache.org/licenses/LICENSE-2.0
7313 * Unless required by applicable law or agreed to in writing, software
7314 * distributed under the License is distributed on an "AS IS" BASIS,
7315 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7316 * See the License for the specific language governing permissions and
7317 * limitations under the License.
7319 /* ========== IMAGES ========== */
7320 /* ========== Color & Themes ========== */
7321 /* ========== Typography ========== */
7322 /* ========== Components ========== */
7323 /* ========== Standard Buttons ========== */
7324 /* ========== Icon Toggles ========== */
7325 /* ========== Radio Buttons ========== */
7326 /* ========== Ripple effect ========== */
7327 /* ========== Layout ========== */
7328 /* ========== Content Tabs ========== */
7329 /* ========== Checkboxes ========== */
7330 /* ========== Switches ========== */
7331 /* ========== Spinner ========== */
7332 /* ========== Text fields ========== */
7333 /* ========== Card ========== */
7334 /* ========== Sliders ========== */
7335 /* ========== Progress ========== */
7336 /* ========== List ========== */
7337 /* ========== Item ========== */
7338 /* ========== Dropdown menu ========== */
7339 /* ========== Tooltips ========== */
7340 /* ========== Footer ========== */
7354 /* Card dimensions */
7373 * Copyright 2015 Google Inc. All Rights Reserved.
7375 * Licensed under the Apache License, Version 2.0 (the "License");
7376 * you may not use this file except in compliance with the License.
7377 * You may obtain a copy of the License at
7379 * http://www.apache.org/licenses/LICENSE-2.0
7381 * Unless required by applicable law or agreed to in writing, software
7382 * distributed under the License is distributed on an "AS IS" BASIS,
7383 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7384 * See the License for the specific language governing permissions and
7385 * limitations under the License.
7398 font-family: "Roboto";
7402 letter-spacing: 0.04em;
7404 display: -webkit-flex;
7405 display: -ms-flexbox;
7408 box-sizing: border-box;
7409 -webkit-flex-direction: row;
7410 -ms-flex-direction: row;
7411 flex-direction: row;
7412 -webkit-flex-wrap: nowrap;
7413 -ms-flex-wrap: nowrap;
7415 -webkit-align-items: center;
7416 -ms-flex-align: center;
7417 align-items: center;
7420 color: rgba(0, 0, 0, 0.87);
7424 .mdl-list__item .mdl-list__item-primary-content {
7428 -webkit-flex-grow: 2;
7429 -ms-flex-positive: 2;
7431 text-decoration: none;
7432 box-sizing: border-box;
7433 display: -webkit-flex;
7434 display: -ms-flexbox;
7436 -webkit-align-items: center;
7437 -ms-flex-align: center;
7438 align-items: center;
7441 .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-icon {
7445 .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-avatar {
7449 .mdl-list__item .mdl-list__item-secondary-content {
7450 display: -webkit-flex;
7451 display: -ms-flexbox;
7453 -webkit-flex-flow: column;
7454 -ms-flex-flow: column;
7456 -webkit-align-items: flex-end;
7457 -ms-flex-align: end;
7458 align-items: flex-end;
7462 .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-action label {
7466 .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-info {
7471 color: rgba(0, 0, 0, 0.54);
7474 .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-sub-header {
7475 padding: 0 0 0 16px;
7478 .mdl-list__item-icon,
7479 .mdl-list__item-icon.material-icons {
7483 box-sizing: border-box;
7484 color: rgb(117, 117, 117);
7487 .mdl-list__item-avatar,
7488 .mdl-list__item-avatar.material-icons {
7491 box-sizing: border-box;
7493 background-color: rgb(117, 117, 117);
7498 .mdl-list__item--two-line {
7502 .mdl-list__item--two-line .mdl-list__item-primary-content {
7508 .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-avatar {
7512 .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-icon {
7517 .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-secondary-content {
7521 .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-sub-title {
7527 color: rgba(0, 0, 0, 0.54);
7532 .mdl-list__item--three-line {
7536 .mdl-list__item--three-line .mdl-list__item-primary-content {
7542 .mdl-list__item--three-line .mdl-list__item-primary-content .mdl-list__item-avatar,
7543 .mdl-list__item--three-line .mdl-list__item-primary-content .mdl-list__item-icon {
7547 .mdl-list__item--three-line .mdl-list__item-secondary-content {
7551 .mdl-list__item--three-line .mdl-list__item-text-body {
7558 color: rgba(0, 0, 0, 0.54);
7564 * Copyright 2015 Google Inc. All Rights Reserved.
7566 * Licensed under the Apache License, Version 2.0 (the "License");
7567 * you may not use this file except in compliance with the License.
7568 * You may obtain a copy of the License at
7570 * http://www.apache.org/licenses/LICENSE-2.0
7572 * Unless required by applicable law or agreed to in writing, software
7573 * distributed under the License is distributed on an "AS IS" BASIS,
7574 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7575 * See the License for the specific language governing permissions and
7576 * limitations under the License.
7579 * Copyright 2015 Google Inc. All Rights Reserved.
7581 * Licensed under the Apache License, Version 2.0 (the "License");
7582 * you may not use this file except in compliance with the License.
7583 * You may obtain a copy of the License at
7585 * http://www.apache.org/licenses/LICENSE-2.0
7587 * Unless required by applicable law or agreed to in writing, software
7588 * distributed under the License is distributed on an "AS IS" BASIS,
7589 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7590 * See the License for the specific language governing permissions and
7591 * limitations under the License.
7593 /*------------------------------------* $CONTENTS
7594 \*------------------------------------*/
7596 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
7623 * Even though all variables have the `!default` directive, most of them
7624 * should not be changed as they are dependent one another. This can cause
7625 * visual distortions (like alignment issues) that are hard to track down
7628 /* ========== TYPOGRAPHY ========== */
7629 /* We're splitting fonts into "preferred" and "performance" in order to optimize
7630 page loading. For important text, such as the body, we want it to load
7631 immediately and not wait for the web font load, whereas for other sections,
7632 such as headers and titles, we're OK with things taking a bit longer to load.
7633 We do have some optional classes and parameters in the mixins, in case you
7634 definitely want to make sure you're using the preferred font and don't mind
7635 the performance hit.
7636 We should be able to improve on this once CSS Font Loading L3 becomes more
7639 /* ========== COLORS ========== */
7642 * Material design color palettes.
7643 * @see http://www.google.com/design/spec/style/color.html
7647 * Copyright 2015 Google Inc. All Rights Reserved.
7649 * Licensed under the Apache License, Version 2.0 (the "License");
7650 * you may not use this file except in compliance with the License.
7651 * You may obtain a copy of the License at
7653 * http://www.apache.org/licenses/LICENSE-2.0
7655 * Unless required by applicable law or agreed to in writing, software
7656 * distributed under the License is distributed on an "AS IS" BASIS,
7657 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7658 * See the License for the specific language governing permissions and
7659 * limitations under the License.
7661 /* ========== Color Palettes ========== */
7664 * Copyright 2015 Google Inc. All Rights Reserved.
7666 * Licensed under the Apache License, Version 2.0 (the "License");
7667 * you may not use this file except in compliance with the License.
7668 * You may obtain a copy of the License at
7670 * http://www.apache.org/licenses/LICENSE-2.0
7672 * Unless required by applicable law or agreed to in writing, software
7673 * distributed under the License is distributed on an "AS IS" BASIS,
7674 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7675 * See the License for the specific language governing permissions and
7676 * limitations under the License.
7678 /* ========== IMAGES ========== */
7679 /* ========== Color & Themes ========== */
7680 /* ========== Typography ========== */
7681 /* ========== Components ========== */
7682 /* ========== Standard Buttons ========== */
7683 /* ========== Icon Toggles ========== */
7684 /* ========== Radio Buttons ========== */
7685 /* ========== Ripple effect ========== */
7686 /* ========== Layout ========== */
7687 /* ========== Content Tabs ========== */
7688 /* ========== Checkboxes ========== */
7689 /* ========== Switches ========== */
7690 /* ========== Spinner ========== */
7691 /* ========== Text fields ========== */
7692 /* ========== Card ========== */
7693 /* ========== Sliders ========== */
7694 /* ========== Progress ========== */
7695 /* ========== List ========== */
7696 /* ========== Item ========== */
7697 /* ========== Dropdown menu ========== */
7698 /* ========== Tooltips ========== */
7699 /* ========== Footer ========== */
7713 /* Card dimensions */
7732 * Copyright 2015 Google Inc. All Rights Reserved.
7734 * Licensed under the Apache License, Version 2.0 (the "License");
7735 * you may not use this file except in compliance with the License.
7736 * You may obtain a copy of the License at
7738 * http://www.apache.org/licenses/LICENSE-2.0
7740 * Unless required by applicable law or agreed to in writing, software
7741 * distributed under the License is distributed on an "AS IS" BASIS,
7742 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7743 * See the License for the specific language governing permissions and
7744 * limitations under the License.
7750 .mdl-menu__container {
7763 .mdl-menu__container.is-visible, .mdl-menu__container.is-animating {
7765 visibility: visible;
7768 .mdl-menu__outline {
7770 background: rgb(255, 255, 255);
7780 -webkit-transform: scale(0);
7781 transform: scale(0);
7782 -webkit-transform-origin: 0 0;
7783 transform-origin: 0 0;
7784 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
7785 will-change: transform;
7786 transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
7787 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
7788 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
7792 .mdl-menu__container.is-visible .mdl-menu__outline {
7794 -webkit-transform: scale(1);
7795 transform: scale(1);
7799 .mdl-menu__outline.mdl-menu--bottom-right {
7800 -webkit-transform-origin: 100% 0;
7801 transform-origin: 100% 0;
7804 .mdl-menu__outline.mdl-menu--top-left {
7805 -webkit-transform-origin: 0 100%;
7806 transform-origin: 0 100%;
7809 .mdl-menu__outline.mdl-menu--top-right {
7810 -webkit-transform-origin: 100% 100%;
7811 transform-origin: 100% 100%;
7825 clip: rect(0 0 0 0);
7829 .mdl-menu__container.is-visible .mdl-menu {
7834 .mdl-menu.is-animating {
7835 transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), clip 0.3s cubic-bezier(0.4, 0, 0.2, 1);
7838 .mdl-menu.mdl-menu--bottom-right {
7843 .mdl-menu.mdl-menu--top-left {
7848 .mdl-menu.mdl-menu--top-right {
7855 .mdl-menu.mdl-menu--unaligned {
7863 color: rgba(0, 0, 0, 0.87);
7864 background-color: transparent;
7868 outline-color: rgb(189, 189, 189);
7875 text-decoration: none;
7879 white-space: nowrap;
7881 transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
7882 -webkit-user-select: none;
7883 -moz-user-select: none;
7884 -ms-user-select: none;
7888 .mdl-menu__container.is-visible .mdl-menu__item {
7892 .mdl-menu__item::-moz-focus-inner {
7896 .mdl-menu__item--full-bleed-divider {
7897 border-bottom: 1px solid rgba(0, 0, 0, 0.12);
7900 .mdl-menu__item[disabled], .mdl-menu__item[data-mdl-disabled] {
7901 color: rgb(189, 189, 189);
7902 background-color: transparent;
7906 .mdl-menu__item[disabled]:hover, .mdl-menu__item[data-mdl-disabled]:hover {
7907 background-color: transparent;
7910 .mdl-menu__item[disabled]:focus, .mdl-menu__item[data-mdl-disabled]:focus {
7911 background-color: transparent;
7914 .mdl-menu__item[disabled] .mdl-ripple, .mdl-menu__item[data-mdl-disabled] .mdl-ripple {
7915 background: transparent;
7918 .mdl-menu__item:hover {
7919 background-color: rgb(238, 238, 238);
7922 .mdl-menu__item:focus {
7924 background-color: rgb(238, 238, 238);
7927 .mdl-menu__item:active {
7928 background-color: rgb(224, 224, 224);
7931 .mdl-menu__item--ripple-container {
7943 * Copyright 2015 Google Inc. All Rights Reserved.
7945 * Licensed under the Apache License, Version 2.0 (the "License");
7946 * you may not use this file except in compliance with the License.
7947 * You may obtain a copy of the License at
7949 * http://www.apache.org/licenses/LICENSE-2.0
7951 * Unless required by applicable law or agreed to in writing, software
7952 * distributed under the License is distributed on an "AS IS" BASIS,
7953 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7954 * See the License for the specific language governing permissions and
7955 * limitations under the License.
7958 * Copyright 2015 Google Inc. All Rights Reserved.
7960 * Licensed under the Apache License, Version 2.0 (the "License");
7961 * you may not use this file except in compliance with the License.
7962 * You may obtain a copy of the License at
7964 * http://www.apache.org/licenses/LICENSE-2.0
7966 * Unless required by applicable law or agreed to in writing, software
7967 * distributed under the License is distributed on an "AS IS" BASIS,
7968 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7969 * See the License for the specific language governing permissions and
7970 * limitations under the License.
7972 /*------------------------------------* $CONTENTS
7973 \*------------------------------------*/
7975 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
8002 * Even though all variables have the `!default` directive, most of them
8003 * should not be changed as they are dependent one another. This can cause
8004 * visual distortions (like alignment issues) that are hard to track down
8007 /* ========== TYPOGRAPHY ========== */
8008 /* We're splitting fonts into "preferred" and "performance" in order to optimize
8009 page loading. For important text, such as the body, we want it to load
8010 immediately and not wait for the web font load, whereas for other sections,
8011 such as headers and titles, we're OK with things taking a bit longer to load.
8012 We do have some optional classes and parameters in the mixins, in case you
8013 definitely want to make sure you're using the preferred font and don't mind
8014 the performance hit.
8015 We should be able to improve on this once CSS Font Loading L3 becomes more
8018 /* ========== COLORS ========== */
8021 * Material design color palettes.
8022 * @see http://www.google.com/design/spec/style/color.html
8026 * Copyright 2015 Google Inc. All Rights Reserved.
8028 * Licensed under the Apache License, Version 2.0 (the "License");
8029 * you may not use this file except in compliance with the License.
8030 * You may obtain a copy of the License at
8032 * http://www.apache.org/licenses/LICENSE-2.0
8034 * Unless required by applicable law or agreed to in writing, software
8035 * distributed under the License is distributed on an "AS IS" BASIS,
8036 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
8037 * See the License for the specific language governing permissions and
8038 * limitations under the License.
8040 /* ========== Color Palettes ========== */
8043 * Copyright 2015 Google Inc. All Rights Reserved.
8045 * Licensed under the Apache License, Version 2.0 (the "License");
8046 * you may not use this file except in compliance with the License.
8047 * You may obtain a copy of the License at
8049 * http://www.apache.org/licenses/LICENSE-2.0
8051 * Unless required by applicable law or agreed to in writing, software
8052 * distributed under the License is distributed on an "AS IS" BASIS,
8053 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
8054 * See the License for the specific language governing permissions and
8055 * limitations under the License.
8057 /* ========== IMAGES ========== */
8058 /* ========== Color & Themes ========== */
8059 /* ========== Typography ========== */
8060 /* ========== Components ========== */
8061 /* ========== Standard Buttons ========== */
8062 /* ========== Icon Toggles ========== */
8063 /* ========== Radio Buttons ========== */
8064 /* ========== Ripple effect ========== */
8065 /* ========== Layout ========== */
8066 /* ========== Content Tabs ========== */
8067 /* ========== Checkboxes ========== */
8068 /* ========== Switches ========== */
8069 /* ========== Spinner ========== */
8070 /* ========== Text fields ========== */
8071 /* ========== Card ========== */
8072 /* ========== Sliders ========== */
8073 /* ========== Progress ========== */
8074 /* ========== List ========== */
8075 /* ========== Item ========== */
8076 /* ========== Dropdown menu ========== */
8077 /* ========== Tooltips ========== */
8078 /* ========== Footer ========== */
8092 /* Card dimensions */
8118 .mdl-progress > .bar {
8124 transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
8127 .mdl-progress > .progressbar {
8128 background-color: rgb(63, 81, 181);
8133 .mdl-progress > .bufferbar {
8134 background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(to right, rgb(63, 81, 181), rgb(63, 81, 181));
8139 .mdl-progress > .auxbar {
8143 @supports (-webkit-appearance: none) {
8144 .mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar,
8145 .mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
8146 background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(to right, rgb(63, 81, 181), rgb(63, 81, 181));
8147 -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=");
8148 mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=");
8152 .mdl-progress:not(.mdl-progress--indeterminate) > .auxbar,
8153 .mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
8154 background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), linear-gradient(to right, rgb(63, 81, 181), rgb(63, 81, 181));
8157 .mdl-progress.mdl-progress--indeterminate > .bar1,
8158 .mdl-progress.mdl-progress__indeterminate > .bar1 {
8159 background-color: rgb(63, 81, 181);
8160 -webkit-animation-name: indeterminate1;
8161 animation-name: indeterminate1;
8162 -webkit-animation-duration: 2s;
8163 animation-duration: 2s;
8164 -webkit-animation-iteration-count: infinite;
8165 animation-iteration-count: infinite;
8166 -webkit-animation-timing-function: linear;
8167 animation-timing-function: linear;
8170 .mdl-progress.mdl-progress--indeterminate > .bar3,
8171 .mdl-progress.mdl-progress__indeterminate > .bar3 {
8172 background-image: none;
8173 background-color: rgb(63, 81, 181);
8174 -webkit-animation-name: indeterminate2;
8175 animation-name: indeterminate2;
8176 -webkit-animation-duration: 2s;
8177 animation-duration: 2s;
8178 -webkit-animation-iteration-count: infinite;
8179 animation-iteration-count: infinite;
8180 -webkit-animation-timing-function: linear;
8181 animation-timing-function: linear;
8184 @-webkit-keyframes indeterminate1 {
8199 @keyframes indeterminate1 {
8214 @-webkit-keyframes indeterminate2 {
8233 @keyframes indeterminate2 {
8253 * Copyright 2015 Google Inc. All Rights Reserved.
8255 * Licensed under the Apache License, Version 2.0 (the "License");
8256 * you may not use this file except in compliance with the License.
8257 * You may obtain a copy of the License at
8259 * http://www.apache.org/licenses/LICENSE-2.0
8261 * Unless required by applicable law or agreed to in writing, software
8262 * distributed under the License is distributed on an "AS IS" BASIS,
8263 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
8264 * See the License for the specific language governing permissions and
8265 * limitations under the License.
8268 * Copyright 2015 Google Inc. All Rights Reserved.
8270 * Licensed under the Apache License, Version 2.0 (the "License");
8271 * you may not use this file except in compliance with the License.
8272 * You may obtain a copy of the License at
8274 * http://www.apache.org/licenses/LICENSE-2.0
8276 * Unless required by applicable law or agreed to in writing, software
8277 * distributed under the License is distributed on an "AS IS" BASIS,
8278 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
8279 * See the License for the specific language governing permissions and
8280 * limitations under the License.
8282 /*------------------------------------* $CONTENTS
8283 \*------------------------------------*/
8285 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
8312 * Even though all variables have the `!default` directive, most of them
8313 * should not be changed as they are dependent one another. This can cause
8314 * visual distortions (like alignment issues) that are hard to track down
8317 /* ========== TYPOGRAPHY ========== */
8318 /* We're splitting fonts into "preferred" and "performance" in order to optimize
8319 page loading. For important text, such as the body, we want it to load
8320 immediately and not wait for the web font load, whereas for other sections,
8321 such as headers and titles, we're OK with things taking a bit longer to load.
8322 We do have some optional classes and parameters in the mixins, in case you
8323 definitely want to make sure you're using the preferred font and don't mind
8324 the performance hit.
8325 We should be able to improve on this once CSS Font Loading L3 becomes more
8328 /* ========== COLORS ========== */
8331 * Material design color palettes.
8332 * @see http://www.google.com/design/spec/style/color.html
8336 * Copyright 2015 Google Inc. All Rights Reserved.
8338 * Licensed under the Apache License, Version 2.0 (the "License");
8339 * you may not use this file except in compliance with the License.
8340 * You may obtain a copy of the License at
8342 * http://www.apache.org/licenses/LICENSE-2.0
8344 * Unless required by applicable law or agreed to in writing, software
8345 * distributed under the License is distributed on an "AS IS" BASIS,
8346 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
8347 * See the License for the specific language governing permissions and
8348 * limitations under the License.
8350 /* ========== Color Palettes ========== */
8353 * Copyright 2015 Google Inc. All Rights Reserved.
8355 * Licensed under the Apache License, Version 2.0 (the "License");
8356 * you may not use this file except in compliance with the License.
8357 * You may obtain a copy of the License at
8359 * http://www.apache.org/licenses/LICENSE-2.0
8361 * Unless required by applicable law or agreed to in writing, software
8362 * distributed under the License is distributed on an "AS IS" BASIS,
8363 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
8364 * See the License for the specific language governing permissions and
8365 * limitations under the License.
8367 /* ========== IMAGES ========== */
8368 /* ========== Color & Themes ========== */
8369 /* ========== Typography ========== */
8370 /* ========== Components ========== */
8371 /* ========== Standard Buttons ========== */
8372 /* ========== Icon Toggles ========== */
8373 /* ========== Radio Buttons ========== */
8374 /* ========== Ripple effect ========== */
8375 /* ========== Layout ========== */
8376 /* ========== Content Tabs ========== */
8377 /* ========== Checkboxes ========== */
8378 /* ========== Switches ========== */
8379 /* ========== Spinner ========== */
8380 /* ========== Text fields ========== */
8381 /* ========== Card ========== */
8382 /* ========== Sliders ========== */
8383 /* ========== Progress ========== */
8384 /* ========== List ========== */
8385 /* ========== Item ========== */
8386 /* ========== Dropdown menu ========== */
8387 /* ========== Tooltips ========== */
8388 /* ========== Footer ========== */
8402 /* Card dimensions */
8421 * Copyright 2015 Google Inc. All Rights Reserved.
8423 * Licensed under the Apache License, Version 2.0 (the "License");
8424 * you may not use this file except in compliance with the License.
8425 * You may obtain a copy of the License at
8427 * http://www.apache.org/licenses/LICENSE-2.0
8429 * Unless required by applicable law or agreed to in writing, software
8430 * distributed under the License is distributed on an "AS IS" BASIS,
8431 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
8432 * See the License for the specific language governing permissions and
8433 * limitations under the License.
8440 display: -webkit-flex;
8441 display: -ms-flexbox;
8443 -webkit-flex-wrap: nowrap;
8444 -ms-flex-wrap: nowrap;
8446 box-sizing: border-box;
8449 .mdl-navigation__link {
8450 color: rgb(66, 66, 66);
8451 text-decoration: none;
8460 .mdl-navigation__link .material-icons {
8461 vertical-align: middle;
8467 display: -webkit-flex;
8468 display: -ms-flexbox;
8470 -webkit-flex-direction: column;
8471 -ms-flex-direction: column;
8472 flex-direction: column;
8476 -webkit-overflow-scrolling: touch;
8479 .mdl-layout.is-small-screen .mdl-layout--large-screen-only {
8483 .mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only {
8487 .mdl-layout__container {
8497 font-family: "Roboto";
8501 letter-spacing: 0.02em;
8503 box-sizing: border-box;
8506 .mdl-layout-spacer {
8507 -webkit-flex-grow: 1;
8508 -ms-flex-positive: 1;
8512 .mdl-layout__drawer {
8513 display: -webkit-flex;
8514 display: -ms-flexbox;
8516 -webkit-flex-direction: column;
8517 -ms-flex-direction: column;
8518 flex-direction: column;
8519 -webkit-flex-wrap: nowrap;
8520 -ms-flex-wrap: nowrap;
8528 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
8529 box-sizing: border-box;
8530 border-right: 1px solid rgb(224, 224, 224);
8531 background: rgb(250, 250, 250);
8532 -webkit-transform: translateX(-250px);
8533 transform: translateX(-250px);
8534 -webkit-transform-style: preserve-3d;
8535 transform-style: preserve-3d;
8536 will-change: transform;
8537 transition-duration: 0.2s;
8538 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
8539 transition-property: -webkit-transform;
8540 transition-property: transform;
8541 transition-property: transform, -webkit-transform;
8542 color: rgb(66, 66, 66);
8548 .mdl-layout__drawer.is-visible {
8549 -webkit-transform: translateX(0);
8550 transform: translateX(0);
8553 .mdl-layout__drawer.is-visible ~ .mdl-layout__content.mdl-layout__content {
8557 .mdl-layout__drawer > * {
8558 -webkit-flex-shrink: 0;
8559 -ms-flex-negative: 0;
8563 .mdl-layout__drawer > .mdl-layout__title,
8564 .mdl-layout__drawer > .mdl-layout-title {
8569 @media screen and (max-width: 1024px) {
8570 .mdl-layout__drawer > .mdl-layout__title,
8571 .mdl-layout__drawer > .mdl-layout-title {
8577 .mdl-layout__drawer .mdl-navigation {
8578 -webkit-flex-direction: column;
8579 -ms-flex-direction: column;
8580 flex-direction: column;
8581 -webkit-align-items: stretch;
8582 -ms-flex-align: stretch;
8583 align-items: stretch;
8587 .mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
8589 -webkit-flex-shrink: 0;
8590 -ms-flex-negative: 0;
8597 @media screen and (max-width: 1024px) {
8598 .mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
8603 .mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover {
8604 background-color: rgb(224, 224, 224);
8607 .mdl-layout__drawer .mdl-navigation .mdl-navigation__link--current {
8608 background-color: rgb(224, 224, 224);
8609 color: rgb(0, 0, 0);
8612 @media screen and (min-width: 1025px) {
8613 .mdl-layout--fixed-drawer > .mdl-layout__drawer {
8614 -webkit-transform: translateX(0);
8615 transform: translateX(0);
8619 .mdl-layout__drawer-button {
8625 -webkit-flex-shrink: 0;
8626 -ms-flex-negative: 0;
8633 font-family: Roboto;
8637 color: rgb(255, 255, 255);
8641 .mdl-layout__header .mdl-layout__drawer-button {
8643 color: rgb(255, 255, 255);
8644 background-color: inherit;
8647 @media screen and (max-width: 1024px) {
8648 .mdl-layout__header .mdl-layout__drawer-button {
8653 @media screen and (max-width: 1024px) {
8654 .mdl-layout__drawer-button {
8656 color: rgba(0, 0, 0, 0.5);
8660 @media screen and (min-width: 1025px) {
8661 .mdl-layout__drawer-button {
8665 .mdl-layout--no-desktop-drawer-button .mdl-layout__drawer-button,
8666 .mdl-layout--fixed-drawer > .mdl-layout__drawer-button,
8667 .mdl-layout--no-drawer-button .mdl-layout__drawer-button {
8672 .mdl-layout__header {
8673 display: -webkit-flex;
8674 display: -ms-flexbox;
8676 -webkit-flex-direction: column;
8677 -ms-flex-direction: column;
8678 flex-direction: column;
8679 -webkit-flex-wrap: nowrap;
8680 -ms-flex-wrap: nowrap;
8682 -webkit-justify-content: flex-start;
8683 -ms-flex-pack: start;
8684 justify-content: flex-start;
8685 box-sizing: border-box;
8686 -webkit-flex-shrink: 0;
8687 -ms-flex-negative: 0;
8696 background-color: rgb(63, 81, 181);
8697 color: rgb(255, 255, 255);
8698 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
8699 transition-duration: 0.2s;
8700 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
8701 transition-property: max-height, box-shadow;
8704 @media screen and (max-width: 1024px) {
8705 .mdl-layout__header {
8710 .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > .mdl-layout__header {
8712 width: calc(100% - 240px);
8715 @media screen and (min-width: 1025px) {
8716 .mdl-layout--fixed-drawer > .mdl-layout__header .mdl-layout__header-row {
8721 .mdl-layout__header > .mdl-layout-icon {
8732 @media screen and (max-width: 1024px) {
8733 .mdl-layout__header > .mdl-layout-icon {
8739 .mdl-layout.has-drawer .mdl-layout__header > .mdl-layout-icon {
8743 .mdl-layout__header.is-compact {
8747 @media screen and (max-width: 1024px) {
8748 .mdl-layout__header.is-compact {
8753 .mdl-layout__header.is-compact.has-tabs {
8757 @media screen and (max-width: 1024px) {
8758 .mdl-layout__header.is-compact.has-tabs {
8763 @media screen and (max-width: 1024px) {
8764 .mdl-layout__header {
8768 .mdl-layout--fixed-header > .mdl-layout__header {
8769 display: -webkit-flex;
8770 display: -ms-flexbox;
8775 .mdl-layout__header--transparent.mdl-layout__header--transparent {
8776 background-color: transparent;
8780 .mdl-layout__header--seamed {
8784 .mdl-layout__header--scroll {
8788 .mdl-layout__header--waterfall {
8793 .mdl-layout__header--waterfall.is-casting-shadow {
8794 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
8797 .mdl-layout__header--waterfall.mdl-layout__header--waterfall-hide-top {
8798 -webkit-justify-content: flex-end;
8800 justify-content: flex-end;
8803 .mdl-layout__header-row {
8804 display: -webkit-flex;
8805 display: -ms-flexbox;
8807 -webkit-flex-direction: row;
8808 -ms-flex-direction: row;
8809 flex-direction: row;
8810 -webkit-flex-wrap: nowrap;
8811 -ms-flex-wrap: nowrap;
8813 -webkit-flex-shrink: 0;
8814 -ms-flex-negative: 0;
8816 box-sizing: border-box;
8817 -webkit-align-self: stretch;
8818 -ms-flex-item-align: stretch;
8819 align-self: stretch;
8820 -webkit-align-items: center;
8821 -ms-flex-align: center;
8822 align-items: center;
8825 padding: 0 40px 0 80px;
8828 .mdl-layout--no-drawer-button .mdl-layout__header-row {
8832 @media screen and (min-width: 1025px) {
8833 .mdl-layout--no-desktop-drawer-button .mdl-layout__header-row {
8838 @media screen and (max-width: 1024px) {
8839 .mdl-layout__header-row {
8841 padding: 0 16px 0 72px;
8844 .mdl-layout--no-drawer-button .mdl-layout__header-row {
8849 .mdl-layout__header-row > * {
8850 -webkit-flex-shrink: 0;
8851 -ms-flex-negative: 0;
8855 .mdl-layout__header--scroll .mdl-layout__header-row {
8859 .mdl-layout__header-row .mdl-navigation {
8863 -webkit-flex-direction: row;
8864 -ms-flex-direction: row;
8865 flex-direction: row;
8866 -webkit-align-items: center;
8867 -ms-flex-align: center;
8868 align-items: center;
8871 @media screen and (max-width: 1024px) {
8872 .mdl-layout__header-row .mdl-navigation {
8877 .mdl-layout__header-row .mdl-navigation__link {
8879 color: rgb(255, 255, 255);
8884 @media screen and (max-width: 1024px) {
8885 .mdl-layout__header-row .mdl-navigation__link {
8891 .mdl-layout__obfuscator {
8892 background-color: transparent;
8900 transition-property: background-color;
8901 transition-duration: 0.2s;
8902 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
8905 .mdl-layout__obfuscator.is-visible {
8906 background-color: rgba(0, 0, 0, 0.5);
8907 visibility: visible;
8910 @supports (pointer-events: auto) {
8911 .mdl-layout__obfuscator {
8912 background-color: rgba(0, 0, 0, 0.5);
8914 transition-property: opacity;
8915 visibility: visible;
8916 pointer-events: none;
8919 .mdl-layout__obfuscator.is-visible {
8920 pointer-events: auto;
8925 .mdl-layout__content {
8928 display: inline-block;
8931 -webkit-flex-grow: 1;
8932 -ms-flex-positive: 1;
8935 -webkit-overflow-scrolling: touch;
8938 .mdl-layout--fixed-drawer > .mdl-layout__content {
8942 .mdl-layout__container.has-scrolling-header .mdl-layout__content {
8946 @media screen and (max-width: 1024px) {
8947 .mdl-layout--fixed-drawer > .mdl-layout__content {
8951 .mdl-layout__container.has-scrolling-header .mdl-layout__content {
8957 .mdl-layout__tab-bar {
8960 width: calc(100% - 112px);
8961 padding: 0 0 0 56px;
8962 display: -webkit-flex;
8963 display: -ms-flexbox;
8965 background-color: rgb(63, 81, 181);
8970 .mdl-layout__tab-bar::-webkit-scrollbar {
8974 .mdl-layout--no-drawer-button .mdl-layout__tab-bar {
8976 width: calc(100% - 32px);
8979 @media screen and (min-width: 1025px) {
8980 .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar {
8982 width: calc(100% - 32px);
8986 @media screen and (max-width: 1024px) {
8987 .mdl-layout__tab-bar {
8988 width: calc(100% - 60px);
8989 padding: 0 0 0 60px;
8992 .mdl-layout--no-drawer-button .mdl-layout__tab-bar {
8993 width: calc(100% - 8px);
8998 .mdl-layout--fixed-tabs .mdl-layout__tab-bar {
9004 .mdl-layout__tab-bar-container {
9011 -webkit-flex-grow: 0;
9012 -ms-flex-positive: 0;
9014 -webkit-flex-shrink: 0;
9015 -ms-flex-negative: 0;
9020 .mdl-layout__container > .mdl-layout__tab-bar-container {
9026 .mdl-layout__tab-bar-button {
9027 display: inline-block;
9034 background-color: rgb(63, 81, 181);
9037 -webkit-user-select: none;
9038 -moz-user-select: none;
9039 -ms-user-select: none;
9043 .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar-button,
9044 .mdl-layout--no-drawer-button .mdl-layout__tab-bar-button {
9048 .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar-button .material-icons,
9049 .mdl-layout--no-drawer-button .mdl-layout__tab-bar-button .material-icons {
9054 @media screen and (max-width: 1024px) {
9055 .mdl-layout__tab-bar-button {
9060 .mdl-layout--fixed-tabs .mdl-layout__tab-bar-button {
9064 .mdl-layout__tab-bar-button .material-icons {
9068 .mdl-layout__tab-bar-button.is-active {
9069 color: rgb(255, 255, 255);
9072 .mdl-layout__tab-bar-left-button {
9076 .mdl-layout__tab-bar-right-button {
9083 padding: 0 24px 0 24px;
9087 -webkit-flex-grow: 0;
9088 -ms-flex-positive: 0;
9090 -webkit-flex-shrink: 0;
9091 -ms-flex-negative: 0;
9093 text-decoration: none;
9099 text-transform: uppercase;
9100 color: rgba(255, 255, 255, 0.6);
9104 @media screen and (max-width: 1024px) {
9106 padding: 0 12px 0 12px;
9110 .mdl-layout--fixed-tabs .mdl-layout__tab {
9112 -webkit-flex-grow: 1;
9113 -ms-flex-positive: 1;
9118 .mdl-layout.is-upgraded .mdl-layout__tab.is-active {
9119 color: rgb(255, 255, 255);
9122 .mdl-layout.is-upgraded .mdl-layout__tab.is-active::after {
9130 background: rgb(255, 64, 129);
9131 -webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;
9132 animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;
9133 transition: all 1s cubic-bezier(0.4, 0, 1, 1);
9136 .mdl-layout__tab .mdl-layout__tab-ripple-container {
9147 .mdl-layout__tab .mdl-layout__tab-ripple-container .mdl-ripple {
9148 background-color: rgb(255, 255, 255);
9151 .mdl-layout__tab-panel {
9155 .mdl-layout.is-upgraded .mdl-layout__tab-panel {
9159 .mdl-layout.is-upgraded .mdl-layout__tab-panel.is-active {
9164 * Copyright 2015 Google Inc. All Rights Reserved.
9166 * Licensed under the Apache License, Version 2.0 (the "License");
9167 * you may not use this file except in compliance with the License.
9168 * You may obtain a copy of the License at
9170 * http://www.apache.org/licenses/LICENSE-2.0
9172 * Unless required by applicable law or agreed to in writing, software
9173 * distributed under the License is distributed on an "AS IS" BASIS,
9174 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9175 * See the License for the specific language governing permissions and
9176 * limitations under the License.
9179 * Copyright 2015 Google Inc. All Rights Reserved.
9181 * Licensed under the Apache License, Version 2.0 (the "License");
9182 * you may not use this file except in compliance with the License.
9183 * You may obtain a copy of the License at
9185 * http://www.apache.org/licenses/LICENSE-2.0
9187 * Unless required by applicable law or agreed to in writing, software
9188 * distributed under the License is distributed on an "AS IS" BASIS,
9189 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9190 * See the License for the specific language governing permissions and
9191 * limitations under the License.
9193 /*------------------------------------* $CONTENTS
9194 \*------------------------------------*/
9196 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
9223 * Even though all variables have the `!default` directive, most of them
9224 * should not be changed as they are dependent one another. This can cause
9225 * visual distortions (like alignment issues) that are hard to track down
9228 /* ========== TYPOGRAPHY ========== */
9229 /* We're splitting fonts into "preferred" and "performance" in order to optimize
9230 page loading. For important text, such as the body, we want it to load
9231 immediately and not wait for the web font load, whereas for other sections,
9232 such as headers and titles, we're OK with things taking a bit longer to load.
9233 We do have some optional classes and parameters in the mixins, in case you
9234 definitely want to make sure you're using the preferred font and don't mind
9235 the performance hit.
9236 We should be able to improve on this once CSS Font Loading L3 becomes more
9239 /* ========== COLORS ========== */
9242 * Material design color palettes.
9243 * @see http://www.google.com/design/spec/style/color.html
9247 * Copyright 2015 Google Inc. All Rights Reserved.
9249 * Licensed under the Apache License, Version 2.0 (the "License");
9250 * you may not use this file except in compliance with the License.
9251 * You may obtain a copy of the License at
9253 * http://www.apache.org/licenses/LICENSE-2.0
9255 * Unless required by applicable law or agreed to in writing, software
9256 * distributed under the License is distributed on an "AS IS" BASIS,
9257 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9258 * See the License for the specific language governing permissions and
9259 * limitations under the License.
9261 /* ========== Color Palettes ========== */
9264 * Copyright 2015 Google Inc. All Rights Reserved.
9266 * Licensed under the Apache License, Version 2.0 (the "License");
9267 * you may not use this file except in compliance with the License.
9268 * You may obtain a copy of the License at
9270 * http://www.apache.org/licenses/LICENSE-2.0
9272 * Unless required by applicable law or agreed to in writing, software
9273 * distributed under the License is distributed on an "AS IS" BASIS,
9274 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9275 * See the License for the specific language governing permissions and
9276 * limitations under the License.
9278 /* ========== IMAGES ========== */
9279 /* ========== Color & Themes ========== */
9280 /* ========== Typography ========== */
9281 /* ========== Components ========== */
9282 /* ========== Standard Buttons ========== */
9283 /* ========== Icon Toggles ========== */
9284 /* ========== Radio Buttons ========== */
9285 /* ========== Ripple effect ========== */
9286 /* ========== Layout ========== */
9287 /* ========== Content Tabs ========== */
9288 /* ========== Checkboxes ========== */
9289 /* ========== Switches ========== */
9290 /* ========== Spinner ========== */
9291 /* ========== Text fields ========== */
9292 /* ========== Card ========== */
9293 /* ========== Sliders ========== */
9294 /* ========== Progress ========== */
9295 /* ========== List ========== */
9296 /* ========== Item ========== */
9297 /* ========== Dropdown menu ========== */
9298 /* ========== Tooltips ========== */
9299 /* ========== Footer ========== */
9313 /* Card dimensions */
9332 * Copyright 2015 Google Inc. All Rights Reserved.
9334 * Licensed under the Apache License, Version 2.0 (the "License");
9335 * you may not use this file except in compliance with the License.
9336 * You may obtain a copy of the License at
9338 * http://www.apache.org/licenses/LICENSE-2.0
9340 * Unless required by applicable law or agreed to in writing, software
9341 * distributed under the License is distributed on an "AS IS" BASIS,
9342 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9343 * See the License for the specific language governing permissions and
9344 * limitations under the License.
9354 display: inline-block;
9355 vertical-align: middle;
9356 box-sizing: border-box;
9362 .mdl-radio.is-upgraded {
9366 .mdl-radio__button {
9370 .mdl-radio.is-upgraded .mdl-radio__button {
9377 -ms-appearance: none;
9378 -moz-appearance: none;
9379 -webkit-appearance: none;
9384 .mdl-radio__outer-circle {
9388 display: inline-block;
9389 box-sizing: border-box;
9394 border: 2px solid rgba(0, 0, 0, 0.54);
9399 .mdl-radio.is-checked .mdl-radio__outer-circle {
9400 border: 2px solid rgb(63, 81, 181);
9403 .mdl-radio__outer-circle fieldset[disabled] .mdl-radio,
9404 .mdl-radio.is-disabled .mdl-radio__outer-circle {
9405 border: 2px solid rgba(0, 0, 0, 0.26);
9409 .mdl-radio__inner-circle {
9415 box-sizing: border-box;
9419 transition-duration: 0.28s;
9420 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
9421 transition-property: -webkit-transform;
9422 transition-property: transform;
9423 transition-property: transform, -webkit-transform;
9424 -webkit-transform: scale(0, 0);
9425 transform: scale(0, 0);
9427 background: rgb(63, 81, 181);
9430 .mdl-radio.is-checked .mdl-radio__inner-circle {
9431 -webkit-transform: scale(1, 1);
9432 transform: scale(1, 1);
9435 fieldset[disabled] .mdl-radio .mdl-radio__inner-circle,
9436 .mdl-radio.is-disabled .mdl-radio__inner-circle {
9437 background: rgba(0, 0, 0, 0.26);
9441 .mdl-radio.is-focused .mdl-radio__inner-circle {
9442 box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1);
9449 fieldset[disabled] .mdl-radio .mdl-radio__label,
9450 .mdl-radio.is-disabled .mdl-radio__label {
9451 color: rgba(0, 0, 0, 0.26);
9455 .mdl-radio__ripple-container {
9460 box-sizing: border-box;
9466 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
9469 .mdl-radio__ripple-container .mdl-ripple {
9470 background: rgb(63, 81, 181);
9473 fieldset[disabled] .mdl-radio .mdl-radio__ripple-container,
9474 .mdl-radio.is-disabled .mdl-radio__ripple-container {
9478 fieldset[disabled] .mdl-radio .mdl-radio__ripple-container .mdl-ripple,
9479 .mdl-radio.is-disabled .mdl-radio__ripple-container .mdl-ripple {
9480 background: transparent;
9484 * Copyright 2015 Google Inc. All Rights Reserved.
9486 * Licensed under the Apache License, Version 2.0 (the "License");
9487 * you may not use this file except in compliance with the License.
9488 * You may obtain a copy of the License at
9490 * http://www.apache.org/licenses/LICENSE-2.0
9492 * Unless required by applicable law or agreed to in writing, software
9493 * distributed under the License is distributed on an "AS IS" BASIS,
9494 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9495 * See the License for the specific language governing permissions and
9496 * limitations under the License.
9499 * Copyright 2015 Google Inc. All Rights Reserved.
9501 * Licensed under the Apache License, Version 2.0 (the "License");
9502 * you may not use this file except in compliance with the License.
9503 * You may obtain a copy of the License at
9505 * http://www.apache.org/licenses/LICENSE-2.0
9507 * Unless required by applicable law or agreed to in writing, software
9508 * distributed under the License is distributed on an "AS IS" BASIS,
9509 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9510 * See the License for the specific language governing permissions and
9511 * limitations under the License.
9513 /*------------------------------------* $CONTENTS
9514 \*------------------------------------*/
9516 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
9543 * Even though all variables have the `!default` directive, most of them
9544 * should not be changed as they are dependent one another. This can cause
9545 * visual distortions (like alignment issues) that are hard to track down
9548 /* ========== TYPOGRAPHY ========== */
9549 /* We're splitting fonts into "preferred" and "performance" in order to optimize
9550 page loading. For important text, such as the body, we want it to load
9551 immediately and not wait for the web font load, whereas for other sections,
9552 such as headers and titles, we're OK with things taking a bit longer to load.
9553 We do have some optional classes and parameters in the mixins, in case you
9554 definitely want to make sure you're using the preferred font and don't mind
9555 the performance hit.
9556 We should be able to improve on this once CSS Font Loading L3 becomes more
9559 /* ========== COLORS ========== */
9562 * Material design color palettes.
9563 * @see http://www.google.com/design/spec/style/color.html
9567 * Copyright 2015 Google Inc. All Rights Reserved.
9569 * Licensed under the Apache License, Version 2.0 (the "License");
9570 * you may not use this file except in compliance with the License.
9571 * You may obtain a copy of the License at
9573 * http://www.apache.org/licenses/LICENSE-2.0
9575 * Unless required by applicable law or agreed to in writing, software
9576 * distributed under the License is distributed on an "AS IS" BASIS,
9577 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9578 * See the License for the specific language governing permissions and
9579 * limitations under the License.
9581 /* ========== Color Palettes ========== */
9584 * Copyright 2015 Google Inc. All Rights Reserved.
9586 * Licensed under the Apache License, Version 2.0 (the "License");
9587 * you may not use this file except in compliance with the License.
9588 * You may obtain a copy of the License at
9590 * http://www.apache.org/licenses/LICENSE-2.0
9592 * Unless required by applicable law or agreed to in writing, software
9593 * distributed under the License is distributed on an "AS IS" BASIS,
9594 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9595 * See the License for the specific language governing permissions and
9596 * limitations under the License.
9598 /* ========== IMAGES ========== */
9599 /* ========== Color & Themes ========== */
9600 /* ========== Typography ========== */
9601 /* ========== Components ========== */
9602 /* ========== Standard Buttons ========== */
9603 /* ========== Icon Toggles ========== */
9604 /* ========== Radio Buttons ========== */
9605 /* ========== Ripple effect ========== */
9606 /* ========== Layout ========== */
9607 /* ========== Content Tabs ========== */
9608 /* ========== Checkboxes ========== */
9609 /* ========== Switches ========== */
9610 /* ========== Spinner ========== */
9611 /* ========== Text fields ========== */
9612 /* ========== Card ========== */
9613 /* ========== Sliders ========== */
9614 /* ========== Progress ========== */
9615 /* ========== List ========== */
9616 /* ========== Item ========== */
9617 /* ========== Dropdown menu ========== */
9618 /* ========== Tooltips ========== */
9619 /* ========== Footer ========== */
9633 /* Card dimensions */
9651 _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
9652 -ms-appearance: none;
9658 width: calc(100% - 40px);
9662 .mdl-slider.is-upgraded {
9663 -webkit-appearance: none;
9664 -moz-appearance: none;
9667 background: transparent;
9668 -webkit-user-select: none;
9669 -moz-user-select: none;
9670 -ms-user-select: none;
9674 color: rgb(63, 81, 181);
9675 -webkit-align-self: center;
9676 -ms-flex-item-align: center;
9677 -ms-grid-row-align: center;
9681 /**************************** Tracks ****************************/
9682 /**************************** Thumbs ****************************/
9683 /**************************** 0-value ****************************/
9684 /**************************** Disabled ****************************/
9687 .mdl-slider.is-upgraded::-moz-focus-outer {
9691 .mdl-slider.is-upgraded::-ms-tooltip {
9695 .mdl-slider.is-upgraded::-webkit-slider-runnable-track {
9696 background: transparent;
9699 .mdl-slider.is-upgraded::-moz-range-track {
9700 background: transparent;
9704 .mdl-slider.is-upgraded::-ms-track {
9712 .mdl-slider.is-upgraded::-ms-fill-lower {
9714 background: linear-gradient(to right, transparent, transparent 16px, rgb(63, 81, 181) 16px, rgb(63, 81, 181) 0);
9717 .mdl-slider.is-upgraded::-ms-fill-upper {
9719 background: linear-gradient(to left, transparent, transparent 16px, rgba(0, 0, 0, 0.26) 16px, rgba(0, 0, 0, 0.26) 0);
9722 .mdl-slider.is-upgraded::-webkit-slider-thumb {
9723 -webkit-appearance: none;
9726 box-sizing: border-box;
9728 background: rgb(63, 81, 181);
9730 transition: border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
9731 transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
9732 transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
9735 .mdl-slider.is-upgraded::-moz-range-thumb {
9736 -moz-appearance: none;
9739 box-sizing: border-box;
9741 background-image: none;
9742 background: rgb(63, 81, 181);
9746 .mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb {
9747 box-shadow: 0 0 0 10px rgba(63, 81, 181, 0.26);
9750 .mdl-slider.is-upgraded:focus:not(:active)::-moz-range-thumb {
9751 box-shadow: 0 0 0 10px rgba(63, 81, 181, 0.26);
9754 .mdl-slider.is-upgraded:active::-webkit-slider-thumb {
9755 background-image: none;
9756 background: rgb(63, 81, 181);
9757 -webkit-transform: scale(1.5);
9758 transform: scale(1.5);
9761 .mdl-slider.is-upgraded:active::-moz-range-thumb {
9762 background-image: none;
9763 background: rgb(63, 81, 181);
9764 transform: scale(1.5);
9767 .mdl-slider.is-upgraded::-ms-thumb {
9772 background: rgb(63, 81, 181);
9773 transform: scale(0.375);
9774 transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
9775 transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
9776 transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
9779 .mdl-slider.is-upgraded:focus:not(:active)::-ms-thumb {
9780 background: radial-gradient(circle closest-side, rgb(63, 81, 181) 0%, rgb(63, 81, 181) 37.5%, rgba(63, 81, 181, 0.26) 37.5%, rgba(63, 81, 181, 0.26) 100%);
9781 transform: scale(1);
9784 .mdl-slider.is-upgraded:active::-ms-thumb {
9785 background: rgb(63, 81, 181);
9786 transform: scale(0.5625);
9789 .mdl-slider.is-upgraded.is-lowest-value::-webkit-slider-thumb {
9790 border: 2px solid rgba(0, 0, 0, 0.26);
9791 background: transparent;
9794 .mdl-slider.is-upgraded.is-lowest-value::-moz-range-thumb {
9795 border: 2px solid rgba(0, 0, 0, 0.26);
9796 background: transparent;
9799 .mdl-slider.is-upgraded.is-lowest-value +
9800 .mdl-slider__background-flex > .mdl-slider__background-upper {
9804 .mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
9805 box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12);
9806 background: rgba(0, 0, 0, 0.12);
9809 .mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-moz-range-thumb {
9810 box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12);
9811 background: rgba(0, 0, 0, 0.12);
9814 .mdl-slider.is-upgraded.is-lowest-value:active::-webkit-slider-thumb {
9815 border: 1.6px solid rgba(0, 0, 0, 0.26);
9816 -webkit-transform: scale(1.5);
9817 transform: scale(1.5);
9820 .mdl-slider.is-upgraded.is-lowest-value:active +
9821 .mdl-slider__background-flex > .mdl-slider__background-upper {
9825 .mdl-slider.is-upgraded.is-lowest-value:active::-moz-range-thumb {
9826 border: 1.5px solid rgba(0, 0, 0, 0.26);
9827 transform: scale(1.5);
9830 .mdl-slider.is-upgraded.is-lowest-value::-ms-thumb {
9831 background: radial-gradient(circle closest-side, transparent 0%, transparent 66.67%, rgba(0, 0, 0, 0.26) 66.67%, rgba(0, 0, 0, 0.26) 100%);
9834 .mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-ms-thumb {
9835 background: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.12) 25%, rgba(0, 0, 0, 0.26) 25%, rgba(0, 0, 0, 0.26) 37.5%, rgba(0, 0, 0, 0.12) 37.5%, rgba(0, 0, 0, 0.12) 100%);
9836 transform: scale(1);
9839 .mdl-slider.is-upgraded.is-lowest-value:active::-ms-thumb {
9840 transform: scale(0.5625);
9841 background: radial-gradient(circle closest-side, transparent 0%, transparent 77.78%, rgba(0, 0, 0, 0.26) 77.78%, rgba(0, 0, 0, 0.26) 100%);
9844 .mdl-slider.is-upgraded.is-lowest-value::-ms-fill-lower {
9845 background: transparent;
9848 .mdl-slider.is-upgraded.is-lowest-value::-ms-fill-upper {
9852 .mdl-slider.is-upgraded.is-lowest-value:active::-ms-fill-upper {
9856 .mdl-slider.is-upgraded:disabled:focus::-webkit-slider-thumb, .mdl-slider.is-upgraded:disabled:active::-webkit-slider-thumb, .mdl-slider.is-upgraded:disabled::-webkit-slider-thumb {
9857 -webkit-transform: scale(0.667);
9858 transform: scale(0.667);
9859 background: rgba(0, 0, 0, 0.26);
9862 .mdl-slider.is-upgraded:disabled:focus::-moz-range-thumb, .mdl-slider.is-upgraded:disabled:active::-moz-range-thumb, .mdl-slider.is-upgraded:disabled::-moz-range-thumb {
9863 transform: scale(0.667);
9864 background: rgba(0, 0, 0, 0.26);
9867 .mdl-slider.is-upgraded:disabled +
9868 .mdl-slider__background-flex > .mdl-slider__background-lower {
9869 background-color: rgba(0, 0, 0, 0.26);
9873 .mdl-slider.is-upgraded:disabled +
9874 .mdl-slider__background-flex > .mdl-slider__background-upper {
9878 .mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-webkit-slider-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-webkit-slider-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled::-webkit-slider-thumb {
9879 border: 3px solid rgba(0, 0, 0, 0.26);
9880 background: transparent;
9881 -webkit-transform: scale(0.667);
9882 transform: scale(0.667);
9885 .mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-moz-range-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-moz-range-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled::-moz-range-thumb {
9886 border: 3px solid rgba(0, 0, 0, 0.26);
9887 background: transparent;
9888 transform: scale(0.667);
9891 .mdl-slider.is-upgraded.is-lowest-value:disabled:active +
9892 .mdl-slider__background-flex > .mdl-slider__background-upper {
9896 .mdl-slider.is-upgraded:disabled:focus::-ms-thumb, .mdl-slider.is-upgraded:disabled:active::-ms-thumb, .mdl-slider.is-upgraded:disabled::-ms-thumb {
9897 transform: scale(0.25);
9898 background: rgba(0, 0, 0, 0.26);
9901 .mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-ms-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-ms-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled::-ms-thumb {
9902 transform: scale(0.25);
9903 background: radial-gradient(circle closest-side, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.26) 50%, rgba(0, 0, 0, 0.26) 100%);
9906 .mdl-slider.is-upgraded:disabled::-ms-fill-lower {
9908 background: linear-gradient(to right, transparent, transparent 25px, rgba(0, 0, 0, 0.26) 25px, rgba(0, 0, 0, 0.26) 0);
9911 .mdl-slider.is-upgraded:disabled::-ms-fill-upper {
9915 .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-ms-fill-upper {
9919 .mdl-slider__ie-container {
9927 .mdl-slider__container {
9931 display: -webkit-flex;
9932 display: -ms-flexbox;
9934 -webkit-flex-direction: row;
9935 -ms-flex-direction: row;
9936 flex-direction: row;
9939 .mdl-slider__background-flex {
9940 background: transparent;
9943 width: calc(100% - 52px);
9947 display: -webkit-flex;
9948 display: -ms-flexbox;
9953 -webkit-transform: translate(0, -1px);
9954 transform: translate(0, -1px);
9957 .mdl-slider__background-lower {
9958 background: rgb(63, 81, 181);
9967 .mdl-slider__background-upper {
9968 background: rgba(0, 0, 0, 0.26);
9975 transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1);
9979 * Copyright 2015 Google Inc. All Rights Reserved.
9981 * Licensed under the Apache License, Version 2.0 (the "License");
9982 * you may not use this file except in compliance with the License.
9983 * You may obtain a copy of the License at
9985 * http://www.apache.org/licenses/LICENSE-2.0
9987 * Unless required by applicable law or agreed to in writing, software
9988 * distributed under the License is distributed on an "AS IS" BASIS,
9989 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9990 * See the License for the specific language governing permissions and
9991 * limitations under the License.
9994 * Copyright 2015 Google Inc. All Rights Reserved.
9996 * Licensed under the Apache License, Version 2.0 (the "License");
9997 * you may not use this file except in compliance with the License.
9998 * You may obtain a copy of the License at
10000 * http://www.apache.org/licenses/LICENSE-2.0
10002 * Unless required by applicable law or agreed to in writing, software
10003 * distributed under the License is distributed on an "AS IS" BASIS,
10004 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10005 * See the License for the specific language governing permissions and
10006 * limitations under the License.
10008 /*------------------------------------* $CONTENTS
10009 \*------------------------------------*/
10011 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
10021 * -----Icon toggles
10038 * Even though all variables have the `!default` directive, most of them
10039 * should not be changed as they are dependent one another. This can cause
10040 * visual distortions (like alignment issues) that are hard to track down
10043 /* ========== TYPOGRAPHY ========== */
10044 /* We're splitting fonts into "preferred" and "performance" in order to optimize
10045 page loading. For important text, such as the body, we want it to load
10046 immediately and not wait for the web font load, whereas for other sections,
10047 such as headers and titles, we're OK with things taking a bit longer to load.
10048 We do have some optional classes and parameters in the mixins, in case you
10049 definitely want to make sure you're using the preferred font and don't mind
10050 the performance hit.
10051 We should be able to improve on this once CSS Font Loading L3 becomes more
10054 /* ========== COLORS ========== */
10057 * Material design color palettes.
10058 * @see http://www.google.com/design/spec/style/color.html
10062 * Copyright 2015 Google Inc. All Rights Reserved.
10064 * Licensed under the Apache License, Version 2.0 (the "License");
10065 * you may not use this file except in compliance with the License.
10066 * You may obtain a copy of the License at
10068 * http://www.apache.org/licenses/LICENSE-2.0
10070 * Unless required by applicable law or agreed to in writing, software
10071 * distributed under the License is distributed on an "AS IS" BASIS,
10072 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10073 * See the License for the specific language governing permissions and
10074 * limitations under the License.
10076 /* ========== Color Palettes ========== */
10079 * Copyright 2015 Google Inc. All Rights Reserved.
10081 * Licensed under the Apache License, Version 2.0 (the "License");
10082 * you may not use this file except in compliance with the License.
10083 * You may obtain a copy of the License at
10085 * http://www.apache.org/licenses/LICENSE-2.0
10087 * Unless required by applicable law or agreed to in writing, software
10088 * distributed under the License is distributed on an "AS IS" BASIS,
10089 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10090 * See the License for the specific language governing permissions and
10091 * limitations under the License.
10093 /* ========== IMAGES ========== */
10094 /* ========== Color & Themes ========== */
10095 /* ========== Typography ========== */
10096 /* ========== Components ========== */
10097 /* ========== Standard Buttons ========== */
10098 /* ========== Icon Toggles ========== */
10099 /* ========== Radio Buttons ========== */
10100 /* ========== Ripple effect ========== */
10101 /* ========== Layout ========== */
10102 /* ========== Content Tabs ========== */
10103 /* ========== Checkboxes ========== */
10104 /* ========== Switches ========== */
10105 /* ========== Spinner ========== */
10106 /* ========== Text fields ========== */
10107 /* ========== Card ========== */
10108 /* ========== Sliders ========== */
10109 /* ========== Progress ========== */
10110 /* ========== List ========== */
10111 /* ========== Item ========== */
10112 /* ========== Dropdown menu ========== */
10113 /* ========== Tooltips ========== */
10114 /* ========== Footer ========== */
10128 /* Card dimensions */
10147 * Copyright 2015 Google Inc. All Rights Reserved.
10149 * Licensed under the Apache License, Version 2.0 (the "License");
10150 * you may not use this file except in compliance with the License.
10151 * You may obtain a copy of the License at
10153 * http://www.apache.org/licenses/LICENSE-2.0
10155 * Unless required by applicable law or agreed to in writing, software
10156 * distributed under the License is distributed on an "AS IS" BASIS,
10157 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10158 * See the License for the specific language governing permissions and
10159 * limitations under the License.
10170 background-color: #323232;
10173 display: -webkit-flex;
10174 display: -ms-flexbox;
10176 -webkit-justify-content: space-between;
10177 -ms-flex-pack: justify;
10178 justify-content: space-between;
10179 font-family: "Roboto";
10180 will-change: transform;
10181 -webkit-transform: translate(0, 80px);
10182 transform: translate(0, 80px);
10183 transition: -webkit-transform 0.25s cubic-bezier(0.4, 0, 1, 1);
10184 transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
10185 transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 1, 1);
10186 pointer-events: none;
10189 @media (max-width: 479px) {
10198 @media (min-width: 480px) {
10202 border-radius: 2px;
10203 -webkit-transform: translate(-50%, 80px);
10204 transform: translate(-50%, 80px);
10208 .mdl-snackbar--active {
10209 -webkit-transform: translate(0, 0);
10210 transform: translate(0, 0);
10211 pointer-events: auto;
10212 transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1);
10213 transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1);
10214 transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1);
10217 @media (min-width: 480px) {
10218 .mdl-snackbar--active {
10219 -webkit-transform: translate(-50%, 0);
10220 transform: translate(-50%, 0);
10224 .mdl-snackbar__text {
10225 padding: 14px 12px 14px 24px;
10226 vertical-align: middle;
10231 .mdl-snackbar__action {
10232 background: transparent;
10234 color: rgb(255, 64, 129);
10236 text-transform: uppercase;
10237 padding: 14px 24px 14px 12px;
10238 font-family: "Roboto";
10241 text-transform: uppercase;
10247 pointer-events: none;
10249 text-decoration: none;
10250 text-align: center;
10251 -webkit-align-self: center;
10252 -ms-flex-item-align: center;
10253 -ms-grid-row-align: center;
10254 align-self: center;
10257 .mdl-snackbar__action::-moz-focus-inner {
10261 .mdl-snackbar__action:not([aria-hidden]) {
10263 pointer-events: auto;
10267 * Copyright 2015 Google Inc. All Rights Reserved.
10269 * Licensed under the Apache License, Version 2.0 (the "License");
10270 * you may not use this file except in compliance with the License.
10271 * You may obtain a copy of the License at
10273 * http://www.apache.org/licenses/LICENSE-2.0
10275 * Unless required by applicable law or agreed to in writing, software
10276 * distributed under the License is distributed on an "AS IS" BASIS,
10277 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10278 * See the License for the specific language governing permissions and
10279 * limitations under the License.
10282 * Copyright 2015 Google Inc. All Rights Reserved.
10284 * Licensed under the Apache License, Version 2.0 (the "License");
10285 * you may not use this file except in compliance with the License.
10286 * You may obtain a copy of the License at
10288 * http://www.apache.org/licenses/LICENSE-2.0
10290 * Unless required by applicable law or agreed to in writing, software
10291 * distributed under the License is distributed on an "AS IS" BASIS,
10292 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10293 * See the License for the specific language governing permissions and
10294 * limitations under the License.
10296 /*------------------------------------* $CONTENTS
10297 \*------------------------------------*/
10299 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
10309 * -----Icon toggles
10326 * Even though all variables have the `!default` directive, most of them
10327 * should not be changed as they are dependent one another. This can cause
10328 * visual distortions (like alignment issues) that are hard to track down
10331 /* ========== TYPOGRAPHY ========== */
10332 /* We're splitting fonts into "preferred" and "performance" in order to optimize
10333 page loading. For important text, such as the body, we want it to load
10334 immediately and not wait for the web font load, whereas for other sections,
10335 such as headers and titles, we're OK with things taking a bit longer to load.
10336 We do have some optional classes and parameters in the mixins, in case you
10337 definitely want to make sure you're using the preferred font and don't mind
10338 the performance hit.
10339 We should be able to improve on this once CSS Font Loading L3 becomes more
10342 /* ========== COLORS ========== */
10345 * Material design color palettes.
10346 * @see http://www.google.com/design/spec/style/color.html
10350 * Copyright 2015 Google Inc. All Rights Reserved.
10352 * Licensed under the Apache License, Version 2.0 (the "License");
10353 * you may not use this file except in compliance with the License.
10354 * You may obtain a copy of the License at
10356 * http://www.apache.org/licenses/LICENSE-2.0
10358 * Unless required by applicable law or agreed to in writing, software
10359 * distributed under the License is distributed on an "AS IS" BASIS,
10360 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10361 * See the License for the specific language governing permissions and
10362 * limitations under the License.
10364 /* ========== Color Palettes ========== */
10367 * Copyright 2015 Google Inc. All Rights Reserved.
10369 * Licensed under the Apache License, Version 2.0 (the "License");
10370 * you may not use this file except in compliance with the License.
10371 * You may obtain a copy of the License at
10373 * http://www.apache.org/licenses/LICENSE-2.0
10375 * Unless required by applicable law or agreed to in writing, software
10376 * distributed under the License is distributed on an "AS IS" BASIS,
10377 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10378 * See the License for the specific language governing permissions and
10379 * limitations under the License.
10381 /* ========== IMAGES ========== */
10382 /* ========== Color & Themes ========== */
10383 /* ========== Typography ========== */
10384 /* ========== Components ========== */
10385 /* ========== Standard Buttons ========== */
10386 /* ========== Icon Toggles ========== */
10387 /* ========== Radio Buttons ========== */
10388 /* ========== Ripple effect ========== */
10389 /* ========== Layout ========== */
10390 /* ========== Content Tabs ========== */
10391 /* ========== Checkboxes ========== */
10392 /* ========== Switches ========== */
10393 /* ========== Spinner ========== */
10394 /* ========== Text fields ========== */
10395 /* ========== Card ========== */
10396 /* ========== Sliders ========== */
10397 /* ========== Progress ========== */
10398 /* ========== List ========== */
10399 /* ========== Item ========== */
10400 /* ========== Dropdown menu ========== */
10401 /* ========== Tooltips ========== */
10402 /* ========== Footer ========== */
10416 /* Card dimensions */
10435 display: inline-block;
10436 position: relative;
10441 .mdl-spinner:not(.is-upgraded).is-active:after {
10442 content: "Loading...";
10445 .mdl-spinner.is-upgraded.is-active {
10446 -webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
10447 animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
10450 @-webkit-keyframes mdl-spinner__container-rotate {
10452 -webkit-transform: rotate(360deg);
10453 transform: rotate(360deg);
10457 @keyframes mdl-spinner__container-rotate {
10459 -webkit-transform: rotate(360deg);
10460 transform: rotate(360deg);
10464 .mdl-spinner__layer {
10465 position: absolute;
10471 .mdl-spinner__layer-1 {
10472 border-color: rgb(66, 165, 245);
10475 .mdl-spinner--single-color .mdl-spinner__layer-1 {
10476 border-color: rgb(63, 81, 181);
10479 .mdl-spinner.is-active .mdl-spinner__layer-1 {
10480 -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
10481 animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
10484 .mdl-spinner__layer-2 {
10485 border-color: rgb(244, 67, 54);
10488 .mdl-spinner--single-color .mdl-spinner__layer-2 {
10489 border-color: rgb(63, 81, 181);
10492 .mdl-spinner.is-active .mdl-spinner__layer-2 {
10493 -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
10494 animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
10497 .mdl-spinner__layer-3 {
10498 border-color: rgb(253, 216, 53);
10501 .mdl-spinner--single-color .mdl-spinner__layer-3 {
10502 border-color: rgb(63, 81, 181);
10505 .mdl-spinner.is-active .mdl-spinner__layer-3 {
10506 -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
10507 animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
10510 .mdl-spinner__layer-4 {
10511 border-color: rgb(76, 175, 80);
10514 .mdl-spinner--single-color .mdl-spinner__layer-4 {
10515 border-color: rgb(63, 81, 181);
10518 .mdl-spinner.is-active .mdl-spinner__layer-4 {
10519 -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
10520 animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
10523 @-webkit-keyframes mdl-spinner__fill-unfill-rotate {
10525 -webkit-transform: rotate(135deg);
10526 transform: rotate(135deg);
10529 -webkit-transform: rotate(270deg);
10530 transform: rotate(270deg);
10533 -webkit-transform: rotate(405deg);
10534 transform: rotate(405deg);
10537 -webkit-transform: rotate(540deg);
10538 transform: rotate(540deg);
10541 -webkit-transform: rotate(675deg);
10542 transform: rotate(675deg);
10545 -webkit-transform: rotate(810deg);
10546 transform: rotate(810deg);
10549 -webkit-transform: rotate(945deg);
10550 transform: rotate(945deg);
10553 -webkit-transform: rotate(1080deg);
10554 transform: rotate(1080deg);
10558 @keyframes mdl-spinner__fill-unfill-rotate {
10560 -webkit-transform: rotate(135deg);
10561 transform: rotate(135deg);
10564 -webkit-transform: rotate(270deg);
10565 transform: rotate(270deg);
10568 -webkit-transform: rotate(405deg);
10569 transform: rotate(405deg);
10572 -webkit-transform: rotate(540deg);
10573 transform: rotate(540deg);
10576 -webkit-transform: rotate(675deg);
10577 transform: rotate(675deg);
10580 -webkit-transform: rotate(810deg);
10581 transform: rotate(810deg);
10584 -webkit-transform: rotate(945deg);
10585 transform: rotate(945deg);
10588 -webkit-transform: rotate(1080deg);
10589 transform: rotate(1080deg);
10594 * HACK: Even though the intention is to have the current .mdl-spinner__layer-N
10595 * at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
10596 * to do proper subpixel rendering for the elements being animated. This is
10597 * especially visible in Chrome 39 on Ubuntu 14.04. See:
10599 * - https://github.com/Polymer/paper-spinner/issues/9
10600 * - https://code.google.com/p/chromium/issues/detail?id=436255
10602 @-webkit-keyframes mdl-spinner__layer-1-fade-in-out {
10623 @keyframes mdl-spinner__layer-1-fade-in-out {
10644 @-webkit-keyframes mdl-spinner__layer-2-fade-in-out {
10662 @keyframes mdl-spinner__layer-2-fade-in-out {
10680 @-webkit-keyframes mdl-spinner__layer-3-fade-in-out {
10698 @keyframes mdl-spinner__layer-3-fade-in-out {
10716 @-webkit-keyframes mdl-spinner__layer-4-fade-in-out {
10734 @keyframes mdl-spinner__layer-4-fade-in-out {
10753 * Patch the gap that appear between the two adjacent
10754 * div.mdl-spinner__circle-clipper while the spinner is rotating
10755 * (appears on Chrome 38, Safari 7.1, and IE 11).
10757 * Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's
10758 * opacity is 0.99, but still does on Safari and IE.
10760 .mdl-spinner__gap-patch {
10761 position: absolute;
10762 box-sizing: border-box;
10768 border-color: inherit;
10771 .mdl-spinner__gap-patch .mdl-spinner__circle {
10776 .mdl-spinner__circle-clipper {
10777 display: inline-block;
10778 position: relative;
10782 border-color: inherit;
10785 .mdl-spinner__circle-clipper.mdl-spinner__left {
10789 .mdl-spinner__circle-clipper.mdl-spinner__right {
10793 .mdl-spinner__circle-clipper .mdl-spinner__circle {
10797 .mdl-spinner__circle {
10798 box-sizing: border-box;
10801 border-style: solid;
10802 border-color: inherit;
10803 border-bottom-color: transparent !important;
10804 border-radius: 50%;
10805 -webkit-animation: none;
10807 position: absolute;
10814 .mdl-spinner__left .mdl-spinner__circle {
10815 border-right-color: transparent !important;
10816 -webkit-transform: rotate(129deg);
10817 transform: rotate(129deg);
10820 .mdl-spinner.is-active .mdl-spinner__left .mdl-spinner__circle {
10821 -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
10822 animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
10825 .mdl-spinner__right .mdl-spinner__circle {
10827 border-left-color: transparent !important;
10828 -webkit-transform: rotate(-129deg);
10829 transform: rotate(-129deg);
10832 .mdl-spinner.is-active .mdl-spinner__right .mdl-spinner__circle {
10833 -webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
10834 animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
10837 @-webkit-keyframes mdl-spinner__left-spin {
10839 -webkit-transform: rotate(130deg);
10840 transform: rotate(130deg);
10843 -webkit-transform: rotate(-5deg);
10844 transform: rotate(-5deg);
10847 -webkit-transform: rotate(130deg);
10848 transform: rotate(130deg);
10852 @keyframes mdl-spinner__left-spin {
10854 -webkit-transform: rotate(130deg);
10855 transform: rotate(130deg);
10858 -webkit-transform: rotate(-5deg);
10859 transform: rotate(-5deg);
10862 -webkit-transform: rotate(130deg);
10863 transform: rotate(130deg);
10867 @-webkit-keyframes mdl-spinner__right-spin {
10869 -webkit-transform: rotate(-130deg);
10870 transform: rotate(-130deg);
10873 -webkit-transform: rotate(5deg);
10874 transform: rotate(5deg);
10877 -webkit-transform: rotate(-130deg);
10878 transform: rotate(-130deg);
10882 @keyframes mdl-spinner__right-spin {
10884 -webkit-transform: rotate(-130deg);
10885 transform: rotate(-130deg);
10888 -webkit-transform: rotate(5deg);
10889 transform: rotate(5deg);
10892 -webkit-transform: rotate(-130deg);
10893 transform: rotate(-130deg);
10898 * Copyright 2015 Google Inc. All Rights Reserved.
10900 * Licensed under the Apache License, Version 2.0 (the "License");
10901 * you may not use this file except in compliance with the License.
10902 * You may obtain a copy of the License at
10904 * http://www.apache.org/licenses/LICENSE-2.0
10906 * Unless required by applicable law or agreed to in writing, software
10907 * distributed under the License is distributed on an "AS IS" BASIS,
10908 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10909 * See the License for the specific language governing permissions and
10910 * limitations under the License.
10913 * Copyright 2015 Google Inc. All Rights Reserved.
10915 * Licensed under the Apache License, Version 2.0 (the "License");
10916 * you may not use this file except in compliance with the License.
10917 * You may obtain a copy of the License at
10919 * http://www.apache.org/licenses/LICENSE-2.0
10921 * Unless required by applicable law or agreed to in writing, software
10922 * distributed under the License is distributed on an "AS IS" BASIS,
10923 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10924 * See the License for the specific language governing permissions and
10925 * limitations under the License.
10927 /*------------------------------------* $CONTENTS
10928 \*------------------------------------*/
10930 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
10940 * -----Icon toggles
10957 * Even though all variables have the `!default` directive, most of them
10958 * should not be changed as they are dependent one another. This can cause
10959 * visual distortions (like alignment issues) that are hard to track down
10962 /* ========== TYPOGRAPHY ========== */
10963 /* We're splitting fonts into "preferred" and "performance" in order to optimize
10964 page loading. For important text, such as the body, we want it to load
10965 immediately and not wait for the web font load, whereas for other sections,
10966 such as headers and titles, we're OK with things taking a bit longer to load.
10967 We do have some optional classes and parameters in the mixins, in case you
10968 definitely want to make sure you're using the preferred font and don't mind
10969 the performance hit.
10970 We should be able to improve on this once CSS Font Loading L3 becomes more
10973 /* ========== COLORS ========== */
10976 * Material design color palettes.
10977 * @see http://www.google.com/design/spec/style/color.html
10981 * Copyright 2015 Google Inc. All Rights Reserved.
10983 * Licensed under the Apache License, Version 2.0 (the "License");
10984 * you may not use this file except in compliance with the License.
10985 * You may obtain a copy of the License at
10987 * http://www.apache.org/licenses/LICENSE-2.0
10989 * Unless required by applicable law or agreed to in writing, software
10990 * distributed under the License is distributed on an "AS IS" BASIS,
10991 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10992 * See the License for the specific language governing permissions and
10993 * limitations under the License.
10995 /* ========== Color Palettes ========== */
10998 * Copyright 2015 Google Inc. All Rights Reserved.
11000 * Licensed under the Apache License, Version 2.0 (the "License");
11001 * you may not use this file except in compliance with the License.
11002 * You may obtain a copy of the License at
11004 * http://www.apache.org/licenses/LICENSE-2.0
11006 * Unless required by applicable law or agreed to in writing, software
11007 * distributed under the License is distributed on an "AS IS" BASIS,
11008 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11009 * See the License for the specific language governing permissions and
11010 * limitations under the License.
11012 /* ========== IMAGES ========== */
11013 /* ========== Color & Themes ========== */
11014 /* ========== Typography ========== */
11015 /* ========== Components ========== */
11016 /* ========== Standard Buttons ========== */
11017 /* ========== Icon Toggles ========== */
11018 /* ========== Radio Buttons ========== */
11019 /* ========== Ripple effect ========== */
11020 /* ========== Layout ========== */
11021 /* ========== Content Tabs ========== */
11022 /* ========== Checkboxes ========== */
11023 /* ========== Switches ========== */
11024 /* ========== Spinner ========== */
11025 /* ========== Text fields ========== */
11026 /* ========== Card ========== */
11027 /* ========== Sliders ========== */
11028 /* ========== Progress ========== */
11029 /* ========== List ========== */
11030 /* ========== Item ========== */
11031 /* ========== Dropdown menu ========== */
11032 /* ========== Tooltips ========== */
11033 /* ========== Footer ========== */
11047 /* Card dimensions */
11066 * Copyright 2015 Google Inc. All Rights Reserved.
11068 * Licensed under the Apache License, Version 2.0 (the "License");
11069 * you may not use this file except in compliance with the License.
11070 * You may obtain a copy of the License at
11072 * http://www.apache.org/licenses/LICENSE-2.0
11074 * Unless required by applicable law or agreed to in writing, software
11075 * distributed under the License is distributed on an "AS IS" BASIS,
11076 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11077 * See the License for the specific language governing permissions and
11078 * limitations under the License.
11085 position: relative;
11087 vertical-align: middle;
11088 display: inline-block;
11089 box-sizing: border-box;
11095 -webkit-touch-callout: none;
11096 -webkit-user-select: none;
11097 -moz-user-select: none;
11098 -ms-user-select: none;
11102 .mdl-switch.is-upgraded {
11103 padding-left: 28px;
11106 .mdl-switch__input {
11110 .mdl-switch.is-upgraded .mdl-switch__input {
11111 position: absolute;
11117 -ms-appearance: none;
11118 -moz-appearance: none;
11119 -webkit-appearance: none;
11124 .mdl-switch__track {
11125 background: rgba(0, 0, 0, 0.26);
11126 position: absolute;
11131 border-radius: 14px;
11135 .mdl-switch.is-checked .mdl-switch__track {
11136 background: rgba(63, 81, 181, 0.5);
11139 .mdl-switch__track fieldset[disabled] .mdl-switch,
11140 .mdl-switch.is-disabled .mdl-switch__track {
11141 background: rgba(0, 0, 0, 0.12);
11145 .mdl-switch__thumb {
11146 background: rgb(250, 250, 250);
11147 position: absolute;
11152 border-radius: 50%;
11154 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
11155 transition-duration: 0.28s;
11156 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
11157 transition-property: left;
11160 .mdl-switch.is-checked .mdl-switch__thumb {
11161 background: rgb(63, 81, 181);
11163 box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
11166 .mdl-switch__thumb fieldset[disabled] .mdl-switch,
11167 .mdl-switch.is-disabled .mdl-switch__thumb {
11168 background: rgb(189, 189, 189);
11172 .mdl-switch__focus-helper {
11173 position: absolute;
11176 -webkit-transform: translate(-4px, -4px);
11177 transform: translate(-4px, -4px);
11178 display: inline-block;
11179 box-sizing: border-box;
11182 border-radius: 50%;
11183 background-color: transparent;
11186 .mdl-switch.is-focused .mdl-switch__focus-helper {
11187 box-shadow: 0 0 0px 20px rgba(0, 0, 0, 0.1);
11188 background-color: rgba(0, 0, 0, 0.1);
11191 .mdl-switch.is-focused.is-checked .mdl-switch__focus-helper {
11192 box-shadow: 0 0 0px 20px rgba(63, 81, 181, 0.26);
11193 background-color: rgba(63, 81, 181, 0.26);
11196 .mdl-switch__label {
11197 position: relative;
11205 .mdl-switch__label fieldset[disabled] .mdl-switch,
11206 .mdl-switch.is-disabled .mdl-switch__label {
11207 color: rgb(189, 189, 189);
11211 .mdl-switch__ripple-container {
11212 position: absolute;
11216 box-sizing: border-box;
11219 border-radius: 50%;
11222 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
11223 transition-duration: 0.40s;
11224 transition-timing-function: step-end;
11225 transition-property: left;
11228 .mdl-switch__ripple-container .mdl-ripple {
11229 background: rgb(63, 81, 181);
11232 .mdl-switch__ripple-container fieldset[disabled] .mdl-switch,
11233 .mdl-switch.is-disabled .mdl-switch__ripple-container {
11237 fieldset[disabled] .mdl-switch .mdl-switch__ripple-container .mdl-ripple,
11238 .mdl-switch.is-disabled .mdl-switch__ripple-container .mdl-ripple {
11239 background: transparent;
11242 .mdl-switch.is-checked .mdl-switch__ripple-container {
11247 * Copyright 2015 Google Inc. All Rights Reserved.
11249 * Licensed under the Apache License, Version 2.0 (the "License");
11250 * you may not use this file except in compliance with the License.
11251 * You may obtain a copy of the License at
11253 * http://www.apache.org/licenses/LICENSE-2.0
11255 * Unless required by applicable law or agreed to in writing, software
11256 * distributed under the License is distributed on an "AS IS" BASIS,
11257 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11258 * See the License for the specific language governing permissions and
11259 * limitations under the License.
11262 * Copyright 2015 Google Inc. All Rights Reserved.
11264 * Licensed under the Apache License, Version 2.0 (the "License");
11265 * you may not use this file except in compliance with the License.
11266 * You may obtain a copy of the License at
11268 * http://www.apache.org/licenses/LICENSE-2.0
11270 * Unless required by applicable law or agreed to in writing, software
11271 * distributed under the License is distributed on an "AS IS" BASIS,
11272 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11273 * See the License for the specific language governing permissions and
11274 * limitations under the License.
11276 /*------------------------------------* $CONTENTS
11277 \*------------------------------------*/
11279 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
11289 * -----Icon toggles
11306 * Even though all variables have the `!default` directive, most of them
11307 * should not be changed as they are dependent one another. This can cause
11308 * visual distortions (like alignment issues) that are hard to track down
11311 /* ========== TYPOGRAPHY ========== */
11312 /* We're splitting fonts into "preferred" and "performance" in order to optimize
11313 page loading. For important text, such as the body, we want it to load
11314 immediately and not wait for the web font load, whereas for other sections,
11315 such as headers and titles, we're OK with things taking a bit longer to load.
11316 We do have some optional classes and parameters in the mixins, in case you
11317 definitely want to make sure you're using the preferred font and don't mind
11318 the performance hit.
11319 We should be able to improve on this once CSS Font Loading L3 becomes more
11322 /* ========== COLORS ========== */
11325 * Material design color palettes.
11326 * @see http://www.google.com/design/spec/style/color.html
11330 * Copyright 2015 Google Inc. All Rights Reserved.
11332 * Licensed under the Apache License, Version 2.0 (the "License");
11333 * you may not use this file except in compliance with the License.
11334 * You may obtain a copy of the License at
11336 * http://www.apache.org/licenses/LICENSE-2.0
11338 * Unless required by applicable law or agreed to in writing, software
11339 * distributed under the License is distributed on an "AS IS" BASIS,
11340 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11341 * See the License for the specific language governing permissions and
11342 * limitations under the License.
11344 /* ========== Color Palettes ========== */
11347 * Copyright 2015 Google Inc. All Rights Reserved.
11349 * Licensed under the Apache License, Version 2.0 (the "License");
11350 * you may not use this file except in compliance with the License.
11351 * You may obtain a copy of the License at
11353 * http://www.apache.org/licenses/LICENSE-2.0
11355 * Unless required by applicable law or agreed to in writing, software
11356 * distributed under the License is distributed on an "AS IS" BASIS,
11357 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11358 * See the License for the specific language governing permissions and
11359 * limitations under the License.
11361 /* ========== IMAGES ========== */
11362 /* ========== Color & Themes ========== */
11363 /* ========== Typography ========== */
11364 /* ========== Components ========== */
11365 /* ========== Standard Buttons ========== */
11366 /* ========== Icon Toggles ========== */
11367 /* ========== Radio Buttons ========== */
11368 /* ========== Ripple effect ========== */
11369 /* ========== Layout ========== */
11370 /* ========== Content Tabs ========== */
11371 /* ========== Checkboxes ========== */
11372 /* ========== Switches ========== */
11373 /* ========== Spinner ========== */
11374 /* ========== Text fields ========== */
11375 /* ========== Card ========== */
11376 /* ========== Sliders ========== */
11377 /* ========== Progress ========== */
11378 /* ========== List ========== */
11379 /* ========== Item ========== */
11380 /* ========== Dropdown menu ========== */
11381 /* ========== Tooltips ========== */
11382 /* ========== Footer ========== */
11396 /* Card dimensions */
11419 .mdl-tabs__tab-bar {
11420 display: -webkit-flex;
11421 display: -ms-flexbox;
11423 -webkit-flex-direction: row;
11424 -ms-flex-direction: row;
11425 flex-direction: row;
11426 -webkit-justify-content: center;
11427 -ms-flex-pack: center;
11428 justify-content: center;
11429 -webkit-align-content: space-between;
11430 -ms-flex-line-pack: justify;
11431 align-content: space-between;
11432 -webkit-align-items: flex-start;
11433 -ms-flex-align: start;
11434 align-items: flex-start;
11438 border-bottom: 1px solid rgb(224, 224, 224);
11444 padding: 0 24px 0 24px;
11446 position: relative;
11448 text-decoration: none;
11451 text-align: center;
11454 text-transform: uppercase;
11455 color: rgba(0, 0, 0, 0.54);
11459 .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active {
11460 color: rgba(0, 0, 0, 0.87);
11463 .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
11470 position: absolute;
11471 background: rgb(63, 81, 181);
11472 -webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;
11473 animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;
11474 transition: all 1s cubic-bezier(0.4, 0, 1, 1);
11477 .mdl-tabs__tab .mdl-tabs__ripple-container {
11479 position: absolute;
11488 .mdl-tabs__tab .mdl-tabs__ripple-container .mdl-ripple {
11489 background: rgb(63, 81, 181);
11496 .mdl-tabs.is-upgraded .mdl-tabs__panel {
11500 .mdl-tabs.is-upgraded .mdl-tabs__panel.is-active {
11504 @-webkit-keyframes border-expand {
11515 @keyframes border-expand {
11527 * Copyright 2015 Google Inc. All Rights Reserved.
11529 * Licensed under the Apache License, Version 2.0 (the "License");
11530 * you may not use this file except in compliance with the License.
11531 * You may obtain a copy of the License at
11533 * http://www.apache.org/licenses/LICENSE-2.0
11535 * Unless required by applicable law or agreed to in writing, software
11536 * distributed under the License is distributed on an "AS IS" BASIS,
11537 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11538 * See the License for the specific language governing permissions and
11539 * limitations under the License.
11542 * Copyright 2015 Google Inc. All Rights Reserved.
11544 * Licensed under the Apache License, Version 2.0 (the "License");
11545 * you may not use this file except in compliance with the License.
11546 * You may obtain a copy of the License at
11548 * http://www.apache.org/licenses/LICENSE-2.0
11550 * Unless required by applicable law or agreed to in writing, software
11551 * distributed under the License is distributed on an "AS IS" BASIS,
11552 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11553 * See the License for the specific language governing permissions and
11554 * limitations under the License.
11556 /*------------------------------------* $CONTENTS
11557 \*------------------------------------*/
11559 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
11569 * -----Icon toggles
11586 * Even though all variables have the `!default` directive, most of them
11587 * should not be changed as they are dependent one another. This can cause
11588 * visual distortions (like alignment issues) that are hard to track down
11591 /* ========== TYPOGRAPHY ========== */
11592 /* We're splitting fonts into "preferred" and "performance" in order to optimize
11593 page loading. For important text, such as the body, we want it to load
11594 immediately and not wait for the web font load, whereas for other sections,
11595 such as headers and titles, we're OK with things taking a bit longer to load.
11596 We do have some optional classes and parameters in the mixins, in case you
11597 definitely want to make sure you're using the preferred font and don't mind
11598 the performance hit.
11599 We should be able to improve on this once CSS Font Loading L3 becomes more
11602 /* ========== COLORS ========== */
11605 * Material design color palettes.
11606 * @see http://www.google.com/design/spec/style/color.html
11610 * Copyright 2015 Google Inc. All Rights Reserved.
11612 * Licensed under the Apache License, Version 2.0 (the "License");
11613 * you may not use this file except in compliance with the License.
11614 * You may obtain a copy of the License at
11616 * http://www.apache.org/licenses/LICENSE-2.0
11618 * Unless required by applicable law or agreed to in writing, software
11619 * distributed under the License is distributed on an "AS IS" BASIS,
11620 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11621 * See the License for the specific language governing permissions and
11622 * limitations under the License.
11624 /* ========== Color Palettes ========== */
11627 * Copyright 2015 Google Inc. All Rights Reserved.
11629 * Licensed under the Apache License, Version 2.0 (the "License");
11630 * you may not use this file except in compliance with the License.
11631 * You may obtain a copy of the License at
11633 * http://www.apache.org/licenses/LICENSE-2.0
11635 * Unless required by applicable law or agreed to in writing, software
11636 * distributed under the License is distributed on an "AS IS" BASIS,
11637 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11638 * See the License for the specific language governing permissions and
11639 * limitations under the License.
11641 /* ========== IMAGES ========== */
11642 /* ========== Color & Themes ========== */
11643 /* ========== Typography ========== */
11644 /* ========== Components ========== */
11645 /* ========== Standard Buttons ========== */
11646 /* ========== Icon Toggles ========== */
11647 /* ========== Radio Buttons ========== */
11648 /* ========== Ripple effect ========== */
11649 /* ========== Layout ========== */
11650 /* ========== Content Tabs ========== */
11651 /* ========== Checkboxes ========== */
11652 /* ========== Switches ========== */
11653 /* ========== Spinner ========== */
11654 /* ========== Text fields ========== */
11655 /* ========== Card ========== */
11656 /* ========== Sliders ========== */
11657 /* ========== Progress ========== */
11658 /* ========== List ========== */
11659 /* ========== Item ========== */
11660 /* ========== Dropdown menu ========== */
11661 /* ========== Tooltips ========== */
11662 /* ========== Footer ========== */
11676 /* Card dimensions */
11695 * Copyright 2015 Google Inc. All Rights Reserved.
11697 * Licensed under the Apache License, Version 2.0 (the "License");
11698 * you may not use this file except in compliance with the License.
11699 * You may obtain a copy of the License at
11701 * http://www.apache.org/licenses/LICENSE-2.0
11703 * Unless required by applicable law or agreed to in writing, software
11704 * distributed under the License is distributed on an "AS IS" BASIS,
11705 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11706 * See the License for the specific language governing permissions and
11707 * limitations under the License.
11714 position: relative;
11716 display: inline-block;
11717 box-sizing: border-box;
11724 .mdl-textfield .mdl-button {
11725 position: absolute;
11729 .mdl-textfield--align-right {
11733 .mdl-textfield--full-width {
11737 .mdl-textfield--expandable {
11743 .mdl-textfield--expandable .mdl-button--icon {
11747 .mdl-textfield__input {
11749 border-bottom: 1px solid rgba(0, 0, 0, 0.12);
11752 font-family: "Roboto";
11761 .mdl-textfield__input[type="number"] {
11762 -moz-appearance: textfield;
11765 .mdl-textfield__input[type="number"]::-webkit-inner-spin-button, .mdl-textfield__input[type="number"]::-webkit-outer-spin-button {
11766 -webkit-appearance: none;
11770 .mdl-textfield.is-focused .mdl-textfield__input {
11774 .mdl-textfield.is-invalid .mdl-textfield__input {
11775 border-color: rgb(213, 0, 0);
11779 fieldset[disabled] .mdl-textfield .mdl-textfield__input,
11780 .mdl-textfield.is-disabled .mdl-textfield__input {
11781 background-color: transparent;
11782 border-bottom: 1px dotted rgba(0, 0, 0, 0.12);
11783 color: rgba(0, 0, 0, 0.26);
11786 .mdl-textfield textarea.mdl-textfield__input {
11790 .mdl-textfield__label {
11792 color: rgba(0, 0, 0, 0.26);
11796 pointer-events: none;
11797 position: absolute;
11802 white-space: nowrap;
11806 .mdl-textfield.is-dirty .mdl-textfield__label,
11807 .mdl-textfield.has-placeholder .mdl-textfield__label {
11808 visibility: hidden;
11811 .mdl-textfield--floating-label .mdl-textfield__label {
11812 transition-duration: 0.2s;
11813 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
11816 .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
11820 fieldset[disabled] .mdl-textfield .mdl-textfield__label,
11821 .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label {
11822 color: rgba(0, 0, 0, 0.26);
11825 .mdl-textfield--floating-label.is-focused .mdl-textfield__label,
11826 .mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
11827 .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
11828 color: rgb(63, 81, 181);
11831 visibility: visible;
11834 .mdl-textfield--floating-label.is-focused .mdl-textfield__expandable-holder .mdl-textfield__label,
11835 .mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder .mdl-textfield__label,
11836 .mdl-textfield--floating-label.has-placeholder .mdl-textfield__expandable-holder .mdl-textfield__label {
11840 .mdl-textfield--floating-label.is-invalid .mdl-textfield__label {
11841 color: rgb(213, 0, 0);
11845 .mdl-textfield__label:after {
11846 background-color: rgb(63, 81, 181);
11851 position: absolute;
11852 transition-duration: 0.2s;
11853 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
11854 visibility: hidden;
11858 .mdl-textfield.is-focused .mdl-textfield__label:after {
11860 visibility: visible;
11864 .mdl-textfield.is-invalid .mdl-textfield__label:after {
11865 background-color: rgb(213, 0, 0);
11868 .mdl-textfield__error {
11869 color: rgb(213, 0, 0);
11870 position: absolute;
11873 visibility: hidden;
11877 .mdl-textfield.is-invalid .mdl-textfield__error {
11878 visibility: visible;
11881 .mdl-textfield__expandable-holder {
11882 display: inline-block;
11883 position: relative;
11885 transition-duration: 0.2s;
11886 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
11887 display: inline-block;
11891 .mdl-textfield.is-focused .mdl-textfield__expandable-holder, .mdl-textfield.is-dirty .mdl-textfield__expandable-holder {
11895 .mdl-textfield__expandable-holder .mdl-textfield__label:after {
11900 * Copyright 2015 Google Inc. All Rights Reserved.
11902 * Licensed under the Apache License, Version 2.0 (the "License");
11903 * you may not use this file except in compliance with the License.
11904 * You may obtain a copy of the License at
11906 * http://www.apache.org/licenses/LICENSE-2.0
11908 * Unless required by applicable law or agreed to in writing, software
11909 * distributed under the License is distributed on an "AS IS" BASIS,
11910 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11911 * See the License for the specific language governing permissions and
11912 * limitations under the License.
11915 * Copyright 2015 Google Inc. All Rights Reserved.
11917 * Licensed under the Apache License, Version 2.0 (the "License");
11918 * you may not use this file except in compliance with the License.
11919 * You may obtain a copy of the License at
11921 * http://www.apache.org/licenses/LICENSE-2.0
11923 * Unless required by applicable law or agreed to in writing, software
11924 * distributed under the License is distributed on an "AS IS" BASIS,
11925 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11926 * See the License for the specific language governing permissions and
11927 * limitations under the License.
11929 /*------------------------------------* $CONTENTS
11930 \*------------------------------------*/
11932 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
11942 * -----Icon toggles
11959 * Even though all variables have the `!default` directive, most of them
11960 * should not be changed as they are dependent one another. This can cause
11961 * visual distortions (like alignment issues) that are hard to track down
11964 /* ========== TYPOGRAPHY ========== */
11965 /* We're splitting fonts into "preferred" and "performance" in order to optimize
11966 page loading. For important text, such as the body, we want it to load
11967 immediately and not wait for the web font load, whereas for other sections,
11968 such as headers and titles, we're OK with things taking a bit longer to load.
11969 We do have some optional classes and parameters in the mixins, in case you
11970 definitely want to make sure you're using the preferred font and don't mind
11971 the performance hit.
11972 We should be able to improve on this once CSS Font Loading L3 becomes more
11975 /* ========== COLORS ========== */
11978 * Material design color palettes.
11979 * @see http://www.google.com/design/spec/style/color.html
11983 * Copyright 2015 Google Inc. All Rights Reserved.
11985 * Licensed under the Apache License, Version 2.0 (the "License");
11986 * you may not use this file except in compliance with the License.
11987 * You may obtain a copy of the License at
11989 * http://www.apache.org/licenses/LICENSE-2.0
11991 * Unless required by applicable law or agreed to in writing, software
11992 * distributed under the License is distributed on an "AS IS" BASIS,
11993 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11994 * See the License for the specific language governing permissions and
11995 * limitations under the License.
11997 /* ========== Color Palettes ========== */
12000 * Copyright 2015 Google Inc. All Rights Reserved.
12002 * Licensed under the Apache License, Version 2.0 (the "License");
12003 * you may not use this file except in compliance with the License.
12004 * You may obtain a copy of the License at
12006 * http://www.apache.org/licenses/LICENSE-2.0
12008 * Unless required by applicable law or agreed to in writing, software
12009 * distributed under the License is distributed on an "AS IS" BASIS,
12010 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12011 * See the License for the specific language governing permissions and
12012 * limitations under the License.
12014 /* ========== IMAGES ========== */
12015 /* ========== Color & Themes ========== */
12016 /* ========== Typography ========== */
12017 /* ========== Components ========== */
12018 /* ========== Standard Buttons ========== */
12019 /* ========== Icon Toggles ========== */
12020 /* ========== Radio Buttons ========== */
12021 /* ========== Ripple effect ========== */
12022 /* ========== Layout ========== */
12023 /* ========== Content Tabs ========== */
12024 /* ========== Checkboxes ========== */
12025 /* ========== Switches ========== */
12026 /* ========== Spinner ========== */
12027 /* ========== Text fields ========== */
12028 /* ========== Card ========== */
12029 /* ========== Sliders ========== */
12030 /* ========== Progress ========== */
12031 /* ========== List ========== */
12032 /* ========== Item ========== */
12033 /* ========== Dropdown menu ========== */
12034 /* ========== Tooltips ========== */
12035 /* ========== Footer ========== */
12049 /* Card dimensions */
12068 -webkit-transform: scale(0);
12069 transform: scale(0);
12070 -webkit-transform-origin: top center;
12071 transform-origin: top center;
12073 background: rgba(97, 97, 97, 0.9);
12074 border-radius: 2px;
12075 color: rgb(255, 255, 255);
12076 display: inline-block;
12085 text-align: center;
12088 .mdl-tooltip.is-active {
12089 -webkit-animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
12090 animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
12093 .mdl-tooltip--large {
12099 @-webkit-keyframes pulse {
12101 -webkit-transform: scale(0);
12102 transform: scale(0);
12106 -webkit-transform: scale(0.99);
12107 transform: scale(0.99);
12110 -webkit-transform: scale(1);
12111 transform: scale(1);
12113 visibility: visible;
12119 -webkit-transform: scale(0);
12120 transform: scale(0);
12124 -webkit-transform: scale(0.99);
12125 transform: scale(0.99);
12128 -webkit-transform: scale(1);
12129 transform: scale(1);
12131 visibility: visible;
12136 * Copyright 2015 Google Inc. All Rights Reserved.
12138 * Licensed under the Apache License, Version 2.0 (the "License");
12139 * you may not use this file except in compliance with the License.
12140 * You may obtain a copy of the License at
12142 * http://www.apache.org/licenses/LICENSE-2.0
12144 * Unless required by applicable law or agreed to in writing, software
12145 * distributed under the License is distributed on an "AS IS" BASIS,
12146 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12147 * See the License for the specific language governing permissions and
12148 * limitations under the License.
12151 * Copyright 2015 Google Inc. All Rights Reserved.
12153 * Licensed under the Apache License, Version 2.0 (the "License");
12154 * you may not use this file except in compliance with the License.
12155 * You may obtain a copy of the License at
12157 * http://www.apache.org/licenses/LICENSE-2.0
12159 * Unless required by applicable law or agreed to in writing, software
12160 * distributed under the License is distributed on an "AS IS" BASIS,
12161 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12162 * See the License for the specific language governing permissions and
12163 * limitations under the License.
12165 /*------------------------------------* $CONTENTS
12166 \*------------------------------------*/
12168 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
12178 * -----Icon toggles
12195 * Even though all variables have the `!default` directive, most of them
12196 * should not be changed as they are dependent one another. This can cause
12197 * visual distortions (like alignment issues) that are hard to track down
12200 /* ========== TYPOGRAPHY ========== */
12201 /* We're splitting fonts into "preferred" and "performance" in order to optimize
12202 page loading. For important text, such as the body, we want it to load
12203 immediately and not wait for the web font load, whereas for other sections,
12204 such as headers and titles, we're OK with things taking a bit longer to load.
12205 We do have some optional classes and parameters in the mixins, in case you
12206 definitely want to make sure you're using the preferred font and don't mind
12207 the performance hit.
12208 We should be able to improve on this once CSS Font Loading L3 becomes more
12211 /* ========== COLORS ========== */
12214 * Material design color palettes.
12215 * @see http://www.google.com/design/spec/style/color.html
12219 * Copyright 2015 Google Inc. All Rights Reserved.
12221 * Licensed under the Apache License, Version 2.0 (the "License");
12222 * you may not use this file except in compliance with the License.
12223 * You may obtain a copy of the License at
12225 * http://www.apache.org/licenses/LICENSE-2.0
12227 * Unless required by applicable law or agreed to in writing, software
12228 * distributed under the License is distributed on an "AS IS" BASIS,
12229 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12230 * See the License for the specific language governing permissions and
12231 * limitations under the License.
12233 /* ========== Color Palettes ========== */
12236 * Copyright 2015 Google Inc. All Rights Reserved.
12238 * Licensed under the Apache License, Version 2.0 (the "License");
12239 * you may not use this file except in compliance with the License.
12240 * You may obtain a copy of the License at
12242 * http://www.apache.org/licenses/LICENSE-2.0
12244 * Unless required by applicable law or agreed to in writing, software
12245 * distributed under the License is distributed on an "AS IS" BASIS,
12246 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12247 * See the License for the specific language governing permissions and
12248 * limitations under the License.
12250 /* ========== IMAGES ========== */
12251 /* ========== Color & Themes ========== */
12252 /* ========== Typography ========== */
12253 /* ========== Components ========== */
12254 /* ========== Standard Buttons ========== */
12255 /* ========== Icon Toggles ========== */
12256 /* ========== Radio Buttons ========== */
12257 /* ========== Ripple effect ========== */
12258 /* ========== Layout ========== */
12259 /* ========== Content Tabs ========== */
12260 /* ========== Checkboxes ========== */
12261 /* ========== Switches ========== */
12262 /* ========== Spinner ========== */
12263 /* ========== Text fields ========== */
12264 /* ========== Card ========== */
12265 /* ========== Sliders ========== */
12266 /* ========== Progress ========== */
12267 /* ========== List ========== */
12268 /* ========== Item ========== */
12269 /* ========== Dropdown menu ========== */
12270 /* ========== Tooltips ========== */
12271 /* ========== Footer ========== */
12285 /* Card dimensions */
12304 * Copyright 2015 Google Inc. All Rights Reserved.
12306 * Licensed under the Apache License, Version 2.0 (the "License");
12307 * you may not use this file except in compliance with the License.
12308 * You may obtain a copy of the License at
12310 * http://www.apache.org/licenses/LICENSE-2.0
12312 * Unless required by applicable law or agreed to in writing, software
12313 * distributed under the License is distributed on an "AS IS" BASIS,
12314 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12315 * See the License for the specific language governing permissions and
12316 * limitations under the License.
12323 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
12327 box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
12331 box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
12335 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
12339 box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
12342 .mdl-shadow--16dp {
12343 box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
12346 .mdl-shadow--24dp {
12347 box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
12351 * Copyright 2015 Google Inc. All Rights Reserved.
12353 * Licensed under the Apache License, Version 2.0 (the "License");
12354 * you may not use this file except in compliance with the License.
12355 * You may obtain a copy of the License at
12357 * http://www.apache.org/licenses/LICENSE-2.0
12359 * Unless required by applicable law or agreed to in writing, software
12360 * distributed under the License is distributed on an "AS IS" BASIS,
12361 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12362 * See the License for the specific language governing permissions and
12363 * limitations under the License.
12366 * NOTE: Some rules here are applied using duplicate selectors.
12367 * This is on purpose to increase their specificity when applied.
12368 * For example: `.mdl-cell--1-col-phone.mdl-cell--1-col-phone`
12371 * Copyright 2015 Google Inc. All Rights Reserved.
12373 * Licensed under the Apache License, Version 2.0 (the "License");
12374 * you may not use this file except in compliance with the License.
12375 * You may obtain a copy of the License at
12377 * http://www.apache.org/licenses/LICENSE-2.0
12379 * Unless required by applicable law or agreed to in writing, software
12380 * distributed under the License is distributed on an "AS IS" BASIS,
12381 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12382 * See the License for the specific language governing permissions and
12383 * limitations under the License.
12385 /*------------------------------------* $CONTENTS
12386 \*------------------------------------*/
12388 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
12398 * -----Icon toggles
12415 * Even though all variables have the `!default` directive, most of them
12416 * should not be changed as they are dependent one another. This can cause
12417 * visual distortions (like alignment issues) that are hard to track down
12420 /* ========== TYPOGRAPHY ========== */
12421 /* We're splitting fonts into "preferred" and "performance" in order to optimize
12422 page loading. For important text, such as the body, we want it to load
12423 immediately and not wait for the web font load, whereas for other sections,
12424 such as headers and titles, we're OK with things taking a bit longer to load.
12425 We do have some optional classes and parameters in the mixins, in case you
12426 definitely want to make sure you're using the preferred font and don't mind
12427 the performance hit.
12428 We should be able to improve on this once CSS Font Loading L3 becomes more
12431 /* ========== COLORS ========== */
12434 * Material design color palettes.
12435 * @see http://www.google.com/design/spec/style/color.html
12439 * Copyright 2015 Google Inc. All Rights Reserved.
12441 * Licensed under the Apache License, Version 2.0 (the "License");
12442 * you may not use this file except in compliance with the License.
12443 * You may obtain a copy of the License at
12445 * http://www.apache.org/licenses/LICENSE-2.0
12447 * Unless required by applicable law or agreed to in writing, software
12448 * distributed under the License is distributed on an "AS IS" BASIS,
12449 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12450 * See the License for the specific language governing permissions and
12451 * limitations under the License.
12453 /* ========== Color Palettes ========== */
12456 * Copyright 2015 Google Inc. All Rights Reserved.
12458 * Licensed under the Apache License, Version 2.0 (the "License");
12459 * you may not use this file except in compliance with the License.
12460 * You may obtain a copy of the License at
12462 * http://www.apache.org/licenses/LICENSE-2.0
12464 * Unless required by applicable law or agreed to in writing, software
12465 * distributed under the License is distributed on an "AS IS" BASIS,
12466 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12467 * See the License for the specific language governing permissions and
12468 * limitations under the License.
12470 /* ========== IMAGES ========== */
12471 /* ========== Color & Themes ========== */
12472 /* ========== Typography ========== */
12473 /* ========== Components ========== */
12474 /* ========== Standard Buttons ========== */
12475 /* ========== Icon Toggles ========== */
12476 /* ========== Radio Buttons ========== */
12477 /* ========== Ripple effect ========== */
12478 /* ========== Layout ========== */
12479 /* ========== Content Tabs ========== */
12480 /* ========== Checkboxes ========== */
12481 /* ========== Switches ========== */
12482 /* ========== Spinner ========== */
12483 /* ========== Text fields ========== */
12484 /* ========== Card ========== */
12485 /* ========== Sliders ========== */
12486 /* ========== Progress ========== */
12487 /* ========== List ========== */
12488 /* ========== Item ========== */
12489 /* ========== Dropdown menu ========== */
12490 /* ========== Tooltips ========== */
12491 /* ========== Footer ========== */
12505 /* Card dimensions */
12524 display: -webkit-flex;
12525 display: -ms-flexbox;
12527 -webkit-flex-flow: row wrap;
12528 -ms-flex-flow: row wrap;
12529 flex-flow: row wrap;
12530 margin: 0 auto 0 auto;
12531 -webkit-align-items: stretch;
12532 -ms-flex-align: stretch;
12533 align-items: stretch;
12536 .mdl-grid.mdl-grid--no-spacing {
12541 box-sizing: border-box;
12545 -webkit-align-self: flex-start;
12546 -ms-flex-item-align: start;
12547 align-self: flex-start;
12550 .mdl-cell--middle {
12551 -webkit-align-self: center;
12552 -ms-flex-item-align: center;
12553 -ms-grid-row-align: center;
12554 align-self: center;
12557 .mdl-cell--bottom {
12558 -webkit-align-self: flex-end;
12559 -ms-flex-item-align: end;
12560 align-self: flex-end;
12563 .mdl-cell--stretch {
12564 -webkit-align-self: stretch;
12565 -ms-flex-item-align: stretch;
12566 -ms-grid-row-align: stretch;
12567 align-self: stretch;
12570 .mdl-grid.mdl-grid--no-spacing > .mdl-cell {
12574 .mdl-cell--order-1 {
12580 .mdl-cell--order-2 {
12586 .mdl-cell--order-3 {
12592 .mdl-cell--order-4 {
12598 .mdl-cell--order-5 {
12604 .mdl-cell--order-6 {
12610 .mdl-cell--order-7 {
12616 .mdl-cell--order-8 {
12622 .mdl-cell--order-9 {
12628 .mdl-cell--order-10 {
12630 -ms-flex-order: 10;
12634 .mdl-cell--order-11 {
12636 -ms-flex-order: 11;
12640 .mdl-cell--order-12 {
12642 -ms-flex-order: 12;
12646 @media (max-width: 479px) {
12653 width: calc(100% - 16px);
12656 .mdl-grid--no-spacing > .mdl-cell {
12660 .mdl-cell--hide-phone {
12661 display: none !important;
12664 .mdl-cell--order-1-phone.mdl-cell--order-1-phone {
12670 .mdl-cell--order-2-phone.mdl-cell--order-2-phone {
12676 .mdl-cell--order-3-phone.mdl-cell--order-3-phone {
12682 .mdl-cell--order-4-phone.mdl-cell--order-4-phone {
12688 .mdl-cell--order-5-phone.mdl-cell--order-5-phone {
12694 .mdl-cell--order-6-phone.mdl-cell--order-6-phone {
12700 .mdl-cell--order-7-phone.mdl-cell--order-7-phone {
12706 .mdl-cell--order-8-phone.mdl-cell--order-8-phone {
12712 .mdl-cell--order-9-phone.mdl-cell--order-9-phone {
12718 .mdl-cell--order-10-phone.mdl-cell--order-10-phone {
12720 -ms-flex-order: 10;
12724 .mdl-cell--order-11-phone.mdl-cell--order-11-phone {
12726 -ms-flex-order: 11;
12730 .mdl-cell--order-12-phone.mdl-cell--order-12-phone {
12732 -ms-flex-order: 12;
12737 .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
12738 width: calc(25% - 16px);
12741 .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
12742 .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
12747 .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
12748 width: calc(50% - 16px);
12751 .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
12752 .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
12757 .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
12758 width: calc(75% - 16px);
12761 .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
12762 .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
12767 .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
12768 width: calc(100% - 16px);
12771 .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
12772 .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
12777 .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
12778 width: calc(100% - 16px);
12781 .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
12782 .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
12787 .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
12788 width: calc(100% - 16px);
12791 .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
12792 .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
12797 .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
12798 width: calc(100% - 16px);
12801 .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
12802 .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
12807 .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
12808 width: calc(100% - 16px);
12811 .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
12812 .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
12817 .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
12818 width: calc(100% - 16px);
12821 .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
12822 .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
12827 .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
12828 width: calc(100% - 16px);
12831 .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
12832 .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
12837 .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
12838 width: calc(100% - 16px);
12841 .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
12842 .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
12847 .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
12848 width: calc(100% - 16px);
12851 .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
12852 .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
12856 .mdl-cell--1-offset,
12857 .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
12858 margin-left: calc(25% + 8px);
12861 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
12862 .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
12866 .mdl-cell--2-offset,
12867 .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
12868 margin-left: calc(50% + 8px);
12871 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
12872 .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
12876 .mdl-cell--3-offset,
12877 .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
12878 margin-left: calc(75% + 8px);
12881 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
12882 .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
12887 @media (min-width: 480px) and (max-width: 839px) {
12894 width: calc(50% - 16px);
12897 .mdl-grid--no-spacing > .mdl-cell {
12901 .mdl-cell--hide-tablet {
12902 display: none !important;
12905 .mdl-cell--order-1-tablet.mdl-cell--order-1-tablet {
12911 .mdl-cell--order-2-tablet.mdl-cell--order-2-tablet {
12917 .mdl-cell--order-3-tablet.mdl-cell--order-3-tablet {
12923 .mdl-cell--order-4-tablet.mdl-cell--order-4-tablet {
12929 .mdl-cell--order-5-tablet.mdl-cell--order-5-tablet {
12935 .mdl-cell--order-6-tablet.mdl-cell--order-6-tablet {
12941 .mdl-cell--order-7-tablet.mdl-cell--order-7-tablet {
12947 .mdl-cell--order-8-tablet.mdl-cell--order-8-tablet {
12953 .mdl-cell--order-9-tablet.mdl-cell--order-9-tablet {
12959 .mdl-cell--order-10-tablet.mdl-cell--order-10-tablet {
12961 -ms-flex-order: 10;
12965 .mdl-cell--order-11-tablet.mdl-cell--order-11-tablet {
12967 -ms-flex-order: 11;
12971 .mdl-cell--order-12-tablet.mdl-cell--order-12-tablet {
12973 -ms-flex-order: 12;
12978 .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
12979 width: calc(12.5% - 16px);
12982 .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
12983 .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
12988 .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
12989 width: calc(25% - 16px);
12992 .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
12993 .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
12998 .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
12999 width: calc(37.5% - 16px);
13002 .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
13003 .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
13008 .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
13009 width: calc(50% - 16px);
13012 .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
13013 .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
13018 .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
13019 width: calc(62.5% - 16px);
13022 .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
13023 .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
13028 .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
13029 width: calc(75% - 16px);
13032 .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
13033 .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
13038 .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
13039 width: calc(87.5% - 16px);
13042 .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
13043 .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
13048 .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
13049 width: calc(100% - 16px);
13052 .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
13053 .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
13058 .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
13059 width: calc(100% - 16px);
13062 .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
13063 .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
13068 .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
13069 width: calc(100% - 16px);
13072 .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
13073 .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
13078 .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
13079 width: calc(100% - 16px);
13082 .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
13083 .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
13088 .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
13089 width: calc(100% - 16px);
13092 .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
13093 .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
13097 .mdl-cell--1-offset,
13098 .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
13099 margin-left: calc(12.5% + 8px);
13102 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
13103 .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
13104 margin-left: 12.5%;
13107 .mdl-cell--2-offset,
13108 .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
13109 margin-left: calc(25% + 8px);
13112 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
13113 .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
13117 .mdl-cell--3-offset,
13118 .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
13119 margin-left: calc(37.5% + 8px);
13122 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
13123 .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
13124 margin-left: 37.5%;
13127 .mdl-cell--4-offset,
13128 .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
13129 margin-left: calc(50% + 8px);
13132 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing >
13133 .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
13137 .mdl-cell--5-offset,
13138 .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
13139 margin-left: calc(62.5% + 8px);
13142 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing >
13143 .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
13144 margin-left: 62.5%;
13147 .mdl-cell--6-offset,
13148 .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
13149 margin-left: calc(75% + 8px);
13152 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing >
13153 .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
13157 .mdl-cell--7-offset,
13158 .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
13159 margin-left: calc(87.5% + 8px);
13162 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing >
13163 .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
13164 margin-left: 87.5%;
13168 @media (min-width: 840px) {
13175 width: calc(33.3333333333% - 16px);
13178 .mdl-grid--no-spacing > .mdl-cell {
13179 width: 33.3333333333%;
13182 .mdl-cell--hide-desktop {
13183 display: none !important;
13186 .mdl-cell--order-1-desktop.mdl-cell--order-1-desktop {
13192 .mdl-cell--order-2-desktop.mdl-cell--order-2-desktop {
13198 .mdl-cell--order-3-desktop.mdl-cell--order-3-desktop {
13204 .mdl-cell--order-4-desktop.mdl-cell--order-4-desktop {
13210 .mdl-cell--order-5-desktop.mdl-cell--order-5-desktop {
13216 .mdl-cell--order-6-desktop.mdl-cell--order-6-desktop {
13222 .mdl-cell--order-7-desktop.mdl-cell--order-7-desktop {
13228 .mdl-cell--order-8-desktop.mdl-cell--order-8-desktop {
13234 .mdl-cell--order-9-desktop.mdl-cell--order-9-desktop {
13240 .mdl-cell--order-10-desktop.mdl-cell--order-10-desktop {
13242 -ms-flex-order: 10;
13246 .mdl-cell--order-11-desktop.mdl-cell--order-11-desktop {
13248 -ms-flex-order: 11;
13252 .mdl-cell--order-12-desktop.mdl-cell--order-12-desktop {
13254 -ms-flex-order: 12;
13259 .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
13260 width: calc(8.3333333333% - 16px);
13263 .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
13264 .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
13265 width: 8.3333333333%;
13269 .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
13270 width: calc(16.6666666667% - 16px);
13273 .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
13274 .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
13275 width: 16.6666666667%;
13279 .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
13280 width: calc(25% - 16px);
13283 .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
13284 .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
13289 .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
13290 width: calc(33.3333333333% - 16px);
13293 .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
13294 .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
13295 width: 33.3333333333%;
13299 .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
13300 width: calc(41.6666666667% - 16px);
13303 .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
13304 .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
13305 width: 41.6666666667%;
13309 .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
13310 width: calc(50% - 16px);
13313 .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
13314 .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
13319 .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
13320 width: calc(58.3333333333% - 16px);
13323 .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
13324 .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
13325 width: 58.3333333333%;
13329 .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
13330 width: calc(66.6666666667% - 16px);
13333 .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
13334 .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
13335 width: 66.6666666667%;
13339 .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
13340 width: calc(75% - 16px);
13343 .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
13344 .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
13349 .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
13350 width: calc(83.3333333333% - 16px);
13353 .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
13354 .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
13355 width: 83.3333333333%;
13359 .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
13360 width: calc(91.6666666667% - 16px);
13363 .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
13364 .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
13365 width: 91.6666666667%;
13369 .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
13370 width: calc(100% - 16px);
13373 .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
13374 .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
13378 .mdl-cell--1-offset,
13379 .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
13380 margin-left: calc(8.3333333333% + 8px);
13383 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
13384 .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
13385 margin-left: 8.3333333333%;
13388 .mdl-cell--2-offset,
13389 .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
13390 margin-left: calc(16.6666666667% + 8px);
13393 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
13394 .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
13395 margin-left: 16.6666666667%;
13398 .mdl-cell--3-offset,
13399 .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
13400 margin-left: calc(25% + 8px);
13403 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
13404 .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
13408 .mdl-cell--4-offset,
13409 .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
13410 margin-left: calc(33.3333333333% + 8px);
13413 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing >
13414 .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
13415 margin-left: 33.3333333333%;
13418 .mdl-cell--5-offset,
13419 .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
13420 margin-left: calc(41.6666666667% + 8px);
13423 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing >
13424 .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
13425 margin-left: 41.6666666667%;
13428 .mdl-cell--6-offset,
13429 .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
13430 margin-left: calc(50% + 8px);
13433 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing >
13434 .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
13438 .mdl-cell--7-offset,
13439 .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
13440 margin-left: calc(58.3333333333% + 8px);
13443 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing >
13444 .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
13445 margin-left: 58.3333333333%;
13448 .mdl-cell--8-offset,
13449 .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
13450 margin-left: calc(66.6666666667% + 8px);
13453 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--8-offset, .mdl-grid.mdl-grid--no-spacing >
13454 .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
13455 margin-left: 66.6666666667%;
13458 .mdl-cell--9-offset,
13459 .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
13460 margin-left: calc(75% + 8px);
13463 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--9-offset, .mdl-grid.mdl-grid--no-spacing >
13464 .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
13468 .mdl-cell--10-offset,
13469 .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
13470 margin-left: calc(83.3333333333% + 8px);
13473 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--10-offset, .mdl-grid.mdl-grid--no-spacing >
13474 .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
13475 margin-left: 83.3333333333%;
13478 .mdl-cell--11-offset,
13479 .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
13480 margin-left: calc(91.6666666667% + 8px);
13483 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--11-offset, .mdl-grid.mdl-grid--no-spacing >
13484 .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
13485 margin-left: 91.6666666667%;