blob: 30d3e4c52b9a6032eedb381c25e088771ce9d85a [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001/**
2 * Copyright 2015 Google Inc. All Rights Reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16/* Material Design Lite Grid*/
17/**
18 * Copyright 2015 Google Inc. All Rights Reserved.
19 *
20 * Licensed under the Apache License, Version 2.0 (the "License");
21 * you may not use this file except in compliance with the License.
22 * You may obtain a copy of the License at
23 *
24 * http://www.apache.org/licenses/LICENSE-2.0
25 *
26 * Unless required by applicable law or agreed to in writing, software
27 * distributed under the License is distributed on an "AS IS" BASIS,
28 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
29 * See the License for the specific language governing permissions and
30 * limitations under the License.
31 */
32/*------------------------------------* $CONTENTS
33\*------------------------------------*/
34/**
35 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
36 * -----Typography
37 * -----Colors
38 * -----Textfield
39 * -----Switch
40 * -----Spinner
41 * -----Radio
42 * -----Menu
43 * -----List
44 * -----Layout
45 * -----Icon toggles
46 * -----Footer
47 * -----Column
48 * -----Checkbox
49 * -----Card
50 * -----Button
51 * -----Animation
52 * -----Progress
53 * -----Badge
54 * -----Shadows
55 * -----Grid
56 * -----Data table
57 * -----Dialog
58 * -----Snackbar
59 * -----Tooltip
60 * -----Chip
61 *
62 * Even though all variables have the `!default` directive, most of them
63 * should not be changed as they are dependent one another. This can cause
64 * visual distortions (like alignment issues) that are hard to track down
65 * and fix.
66 */
67/* ========== TYPOGRAPHY ========== */
68/* We're splitting fonts into "preferred" and "performance" in order to optimize
69 page loading. For important text, such as the body, we want it to load
70 immediately and not wait for the web font load, whereas for other sections,
71 such as headers and titles, we're OK with things taking a bit longer to load.
72 We do have some optional classes and parameters in the mixins, in case you
73 definitely want to make sure you're using the preferred font and don't mind
74 the performance hit.
75 We should be able to improve on this once CSS Font Loading L3 becomes more
76 widely available.
77*/
78/* ========== COLORS ========== */
79/**
80*
81* Material design color palettes.
82* @see http://www.google.com/design/spec/style/color.html
83*
84**/
85/**
86 * Copyright 2015 Google Inc. All Rights Reserved.
87 *
88 * Licensed under the Apache License, Version 2.0 (the "License");
89 * you may not use this file except in compliance with the License.
90 * You may obtain a copy of the License at
91 *
92 * http://www.apache.org/licenses/LICENSE-2.0
93 *
94 * Unless required by applicable law or agreed to in writing, software
95 * distributed under the License is distributed on an "AS IS" BASIS,
96 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
97 * See the License for the specific language governing permissions and
98 * limitations under the License.
99 */
100/* ========== Color Palettes ========== */
101/* colors.scss */
102/**
103 * Copyright 2015 Google Inc. All Rights Reserved.
104 *
105 * Licensed under the Apache License, Version 2.0 (the "License");
106 * you may not use this file except in compliance with the License.
107 * You may obtain a copy of the License at
108 *
109 * http://www.apache.org/licenses/LICENSE-2.0
110 *
111 * Unless required by applicable law or agreed to in writing, software
112 * distributed under the License is distributed on an "AS IS" BASIS,
113 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
114 * See the License for the specific language governing permissions and
115 * limitations under the License.
116 */
117/* ========== IMAGES ========== */
118/* ========== Color & Themes ========== */
119/* ========== Typography ========== */
120/* ========== Components ========== */
121/* ========== Standard Buttons ========== */
122/* ========== Icon Toggles ========== */
123/* ========== Radio Buttons ========== */
124/* ========== Ripple effect ========== */
125/* ========== Layout ========== */
126/* ========== Content Tabs ========== */
127/* ========== Checkboxes ========== */
128/* ========== Switches ========== */
129/* ========== Spinner ========== */
130/* ========== Text fields ========== */
131/* ========== Card ========== */
132/* ========== Sliders ========== */
133/* ========== Progress ========== */
134/* ========== List ========== */
135/* ========== Item ========== */
136/* ========== Dropdown menu ========== */
137/* ========== Tooltips ========== */
138/* ========== Footer ========== */
139/* TEXTFIELD */
140/* SWITCH */
141/* SPINNER */
142/* RADIO */
143/* MENU */
144/* LIST */
145/* LAYOUT */
146/* ICON TOGGLE */
147/* FOOTER */
148/*mega-footer*/
149/*mini-footer*/
150/* CHECKBOX */
151/* CARD */
152/* Card dimensions */
153/* Cover image */
154/* BUTTON */
155/**
156 *
157 * Dimensions
158 *
159 */
160/* ANIMATION */
161/* PROGRESS */
162/* BADGE */
163/* SHADOWS */
164/* GRID */
165/* DATA TABLE */
166/* DIALOG */
167/* SNACKBAR */
168/* TOOLTIP */
169/* CHIP */
170/**
171 * Copyright 2015 Google Inc. All Rights Reserved.
172 *
173 * Licensed under the Apache License, Version 2.0 (the "License");
174 * you may not use this file except in compliance with the License.
175 * You may obtain a copy of the License at
176 *
177 * http://www.apache.org/licenses/LICENSE-2.0
178 *
179 * Unless required by applicable law or agreed to in writing, software
180 * distributed under the License is distributed on an "AS IS" BASIS,
181 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
182 * See the License for the specific language governing permissions and
183 * limitations under the License.
184 */
185/* Typography */
186/* Shadows */
187/* Animations */
188/* Dialog */
189/**
190 * Copyright 2015 Google Inc. All Rights Reserved.
191 *
192 * Licensed under the Apache License, Version 2.0 (the "License");
193 * you may not use this file except in compliance with the License.
194 * You may obtain a copy of the License at
195 *
196 * http://www.apache.org/licenses/LICENSE-2.0
197 *
198 * Unless required by applicable law or agreed to in writing, software
199 * distributed under the License is distributed on an "AS IS" BASIS,
200 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
201 * See the License for the specific language governing permissions and
202 * limitations under the License.
203 */
204/*
205* NOTE: Some rules here are applied using duplicate selectors.
206* This is on purpose to increase their specificity when applied.
207* For example: `.mdl-cell--1-col-phone.mdl-cell--1-col-phone`
208*/
209/**
210 * Copyright 2015 Google Inc. All Rights Reserved.
211 *
212 * Licensed under the Apache License, Version 2.0 (the "License");
213 * you may not use this file except in compliance with the License.
214 * You may obtain a copy of the License at
215 *
216 * http://www.apache.org/licenses/LICENSE-2.0
217 *
218 * Unless required by applicable law or agreed to in writing, software
219 * distributed under the License is distributed on an "AS IS" BASIS,
220 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
221 * See the License for the specific language governing permissions and
222 * limitations under the License.
223 */
224/*------------------------------------* $CONTENTS
225\*------------------------------------*/
226/**
227 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
228 * -----Typography
229 * -----Colors
230 * -----Textfield
231 * -----Switch
232 * -----Spinner
233 * -----Radio
234 * -----Menu
235 * -----List
236 * -----Layout
237 * -----Icon toggles
238 * -----Footer
239 * -----Column
240 * -----Checkbox
241 * -----Card
242 * -----Button
243 * -----Animation
244 * -----Progress
245 * -----Badge
246 * -----Shadows
247 * -----Grid
248 * -----Data table
249 * -----Dialog
250 * -----Snackbar
251 * -----Tooltip
252 * -----Chip
253 *
254 * Even though all variables have the `!default` directive, most of them
255 * should not be changed as they are dependent one another. This can cause
256 * visual distortions (like alignment issues) that are hard to track down
257 * and fix.
258 */
259/* ========== TYPOGRAPHY ========== */
260/* We're splitting fonts into "preferred" and "performance" in order to optimize
261 page loading. For important text, such as the body, we want it to load
262 immediately and not wait for the web font load, whereas for other sections,
263 such as headers and titles, we're OK with things taking a bit longer to load.
264 We do have some optional classes and parameters in the mixins, in case you
265 definitely want to make sure you're using the preferred font and don't mind
266 the performance hit.
267 We should be able to improve on this once CSS Font Loading L3 becomes more
268 widely available.
269*/
270/* ========== COLORS ========== */
271/**
272*
273* Material design color palettes.
274* @see http://www.google.com/design/spec/style/color.html
275*
276**/
277/**
278 * Copyright 2015 Google Inc. All Rights Reserved.
279 *
280 * Licensed under the Apache License, Version 2.0 (the "License");
281 * you may not use this file except in compliance with the License.
282 * You may obtain a copy of the License at
283 *
284 * http://www.apache.org/licenses/LICENSE-2.0
285 *
286 * Unless required by applicable law or agreed to in writing, software
287 * distributed under the License is distributed on an "AS IS" BASIS,
288 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
289 * See the License for the specific language governing permissions and
290 * limitations under the License.
291 */
292/* ========== Color Palettes ========== */
293/* colors.scss */
294/**
295 * Copyright 2015 Google Inc. All Rights Reserved.
296 *
297 * Licensed under the Apache License, Version 2.0 (the "License");
298 * you may not use this file except in compliance with the License.
299 * You may obtain a copy of the License at
300 *
301 * http://www.apache.org/licenses/LICENSE-2.0
302 *
303 * Unless required by applicable law or agreed to in writing, software
304 * distributed under the License is distributed on an "AS IS" BASIS,
305 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
306 * See the License for the specific language governing permissions and
307 * limitations under the License.
308 */
309/* ========== IMAGES ========== */
310/* ========== Color & Themes ========== */
311/* ========== Typography ========== */
312/* ========== Components ========== */
313/* ========== Standard Buttons ========== */
314/* ========== Icon Toggles ========== */
315/* ========== Radio Buttons ========== */
316/* ========== Ripple effect ========== */
317/* ========== Layout ========== */
318/* ========== Content Tabs ========== */
319/* ========== Checkboxes ========== */
320/* ========== Switches ========== */
321/* ========== Spinner ========== */
322/* ========== Text fields ========== */
323/* ========== Card ========== */
324/* ========== Sliders ========== */
325/* ========== Progress ========== */
326/* ========== List ========== */
327/* ========== Item ========== */
328/* ========== Dropdown menu ========== */
329/* ========== Tooltips ========== */
330/* ========== Footer ========== */
331/* TEXTFIELD */
332/* SWITCH */
333/* SPINNER */
334/* RADIO */
335/* MENU */
336/* LIST */
337/* LAYOUT */
338/* ICON TOGGLE */
339/* FOOTER */
340/*mega-footer*/
341/*mini-footer*/
342/* CHECKBOX */
343/* CARD */
344/* Card dimensions */
345/* Cover image */
346/* BUTTON */
347/**
348 *
349 * Dimensions
350 *
351 */
352/* ANIMATION */
353/* PROGRESS */
354/* BADGE */
355/* SHADOWS */
356/* GRID */
357/* DATA TABLE */
358/* DIALOG */
359/* SNACKBAR */
360/* TOOLTIP */
361/* CHIP */
362.mdl-grid {
363 display: -webkit-flex;
364 display: -ms-flexbox;
365 display: flex;
366 -webkit-flex-flow: row wrap;
367 -ms-flex-flow: row wrap;
368 flex-flow: row wrap;
369 margin: 0 auto 0 auto;
370 -webkit-align-items: stretch;
371 -ms-flex-align: stretch;
372 align-items: stretch; }
373 .mdl-grid.mdl-grid--no-spacing {
374 padding: 0; }
375
376.mdl-cell {
377 box-sizing: border-box; }
378
379.mdl-cell--top {
380 -webkit-align-self: flex-start;
381 -ms-flex-item-align: start;
382 align-self: flex-start; }
383
384.mdl-cell--middle {
385 -webkit-align-self: center;
386 -ms-flex-item-align: center;
387 -ms-grid-row-align: center;
388 align-self: center; }
389
390.mdl-cell--bottom {
391 -webkit-align-self: flex-end;
392 -ms-flex-item-align: end;
393 align-self: flex-end; }
394
395.mdl-cell--stretch {
396 -webkit-align-self: stretch;
397 -ms-flex-item-align: stretch;
398 -ms-grid-row-align: stretch;
399 align-self: stretch; }
400
401.mdl-grid.mdl-grid--no-spacing > .mdl-cell {
402 margin: 0; }
403
404.mdl-cell--order-1 {
405 -webkit-order: 1;
406 -ms-flex-order: 1;
407 order: 1; }
408
409.mdl-cell--order-2 {
410 -webkit-order: 2;
411 -ms-flex-order: 2;
412 order: 2; }
413
414.mdl-cell--order-3 {
415 -webkit-order: 3;
416 -ms-flex-order: 3;
417 order: 3; }
418
419.mdl-cell--order-4 {
420 -webkit-order: 4;
421 -ms-flex-order: 4;
422 order: 4; }
423
424.mdl-cell--order-5 {
425 -webkit-order: 5;
426 -ms-flex-order: 5;
427 order: 5; }
428
429.mdl-cell--order-6 {
430 -webkit-order: 6;
431 -ms-flex-order: 6;
432 order: 6; }
433
434.mdl-cell--order-7 {
435 -webkit-order: 7;
436 -ms-flex-order: 7;
437 order: 7; }
438
439.mdl-cell--order-8 {
440 -webkit-order: 8;
441 -ms-flex-order: 8;
442 order: 8; }
443
444.mdl-cell--order-9 {
445 -webkit-order: 9;
446 -ms-flex-order: 9;
447 order: 9; }
448
449.mdl-cell--order-10 {
450 -webkit-order: 10;
451 -ms-flex-order: 10;
452 order: 10; }
453
454.mdl-cell--order-11 {
455 -webkit-order: 11;
456 -ms-flex-order: 11;
457 order: 11; }
458
459.mdl-cell--order-12 {
460 -webkit-order: 12;
461 -ms-flex-order: 12;
462 order: 12; }
463
464@media (max-width: 479px) {
465 .mdl-grid {
466 padding: 8px; }
467 .mdl-cell {
468 margin: 8px;
469 width: calc(100% - 16px); }
470 .mdl-grid--no-spacing > .mdl-cell {
471 width: 100%; }
472 .mdl-cell--hide-phone {
473 display: none !important; }
474 .mdl-cell--order-1-phone.mdl-cell--order-1-phone {
475 -webkit-order: 1;
476 -ms-flex-order: 1;
477 order: 1; }
478 .mdl-cell--order-2-phone.mdl-cell--order-2-phone {
479 -webkit-order: 2;
480 -ms-flex-order: 2;
481 order: 2; }
482 .mdl-cell--order-3-phone.mdl-cell--order-3-phone {
483 -webkit-order: 3;
484 -ms-flex-order: 3;
485 order: 3; }
486 .mdl-cell--order-4-phone.mdl-cell--order-4-phone {
487 -webkit-order: 4;
488 -ms-flex-order: 4;
489 order: 4; }
490 .mdl-cell--order-5-phone.mdl-cell--order-5-phone {
491 -webkit-order: 5;
492 -ms-flex-order: 5;
493 order: 5; }
494 .mdl-cell--order-6-phone.mdl-cell--order-6-phone {
495 -webkit-order: 6;
496 -ms-flex-order: 6;
497 order: 6; }
498 .mdl-cell--order-7-phone.mdl-cell--order-7-phone {
499 -webkit-order: 7;
500 -ms-flex-order: 7;
501 order: 7; }
502 .mdl-cell--order-8-phone.mdl-cell--order-8-phone {
503 -webkit-order: 8;
504 -ms-flex-order: 8;
505 order: 8; }
506 .mdl-cell--order-9-phone.mdl-cell--order-9-phone {
507 -webkit-order: 9;
508 -ms-flex-order: 9;
509 order: 9; }
510 .mdl-cell--order-10-phone.mdl-cell--order-10-phone {
511 -webkit-order: 10;
512 -ms-flex-order: 10;
513 order: 10; }
514 .mdl-cell--order-11-phone.mdl-cell--order-11-phone {
515 -webkit-order: 11;
516 -ms-flex-order: 11;
517 order: 11; }
518 .mdl-cell--order-12-phone.mdl-cell--order-12-phone {
519 -webkit-order: 12;
520 -ms-flex-order: 12;
521 order: 12; }
522 .mdl-cell--1-col,
523 .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
524 width: calc(25% - 16px); }
525 .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
526 .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
527 width: 25%; }
528 .mdl-cell--2-col,
529 .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
530 width: calc(50% - 16px); }
531 .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
532 .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
533 width: 50%; }
534 .mdl-cell--3-col,
535 .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
536 width: calc(75% - 16px); }
537 .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
538 .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
539 width: 75%; }
540 .mdl-cell--4-col,
541 .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
542 width: calc(100% - 16px); }
543 .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
544 .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
545 width: 100%; }
546 .mdl-cell--5-col,
547 .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
548 width: calc(100% - 16px); }
549 .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
550 .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
551 width: 100%; }
552 .mdl-cell--6-col,
553 .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
554 width: calc(100% - 16px); }
555 .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
556 .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
557 width: 100%; }
558 .mdl-cell--7-col,
559 .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
560 width: calc(100% - 16px); }
561 .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
562 .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
563 width: 100%; }
564 .mdl-cell--8-col,
565 .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
566 width: calc(100% - 16px); }
567 .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
568 .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
569 width: 100%; }
570 .mdl-cell--9-col,
571 .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
572 width: calc(100% - 16px); }
573 .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
574 .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
575 width: 100%; }
576 .mdl-cell--10-col,
577 .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
578 width: calc(100% - 16px); }
579 .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
580 .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
581 width: 100%; }
582 .mdl-cell--11-col,
583 .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
584 width: calc(100% - 16px); }
585 .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
586 .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
587 width: 100%; }
588 .mdl-cell--12-col,
589 .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
590 width: calc(100% - 16px); }
591 .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
592 .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
593 width: 100%; }
594 .mdl-cell--1-offset,
595 .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
596 margin-left: calc(25% + 8px); }
597 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
598 .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
599 margin-left: 25%; }
600 .mdl-cell--2-offset,
601 .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
602 margin-left: calc(50% + 8px); }
603 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
604 .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
605 margin-left: 50%; }
606 .mdl-cell--3-offset,
607 .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
608 margin-left: calc(75% + 8px); }
609 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
610 .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
611 margin-left: 75%; } }
612
613@media (min-width: 480px) and (max-width: 839px) {
614 .mdl-grid {
615 padding: 8px; }
616 .mdl-cell {
617 margin: 8px;
618 width: calc(50% - 16px); }
619 .mdl-grid--no-spacing > .mdl-cell {
620 width: 50%; }
621 .mdl-cell--hide-tablet {
622 display: none !important; }
623 .mdl-cell--order-1-tablet.mdl-cell--order-1-tablet {
624 -webkit-order: 1;
625 -ms-flex-order: 1;
626 order: 1; }
627 .mdl-cell--order-2-tablet.mdl-cell--order-2-tablet {
628 -webkit-order: 2;
629 -ms-flex-order: 2;
630 order: 2; }
631 .mdl-cell--order-3-tablet.mdl-cell--order-3-tablet {
632 -webkit-order: 3;
633 -ms-flex-order: 3;
634 order: 3; }
635 .mdl-cell--order-4-tablet.mdl-cell--order-4-tablet {
636 -webkit-order: 4;
637 -ms-flex-order: 4;
638 order: 4; }
639 .mdl-cell--order-5-tablet.mdl-cell--order-5-tablet {
640 -webkit-order: 5;
641 -ms-flex-order: 5;
642 order: 5; }
643 .mdl-cell--order-6-tablet.mdl-cell--order-6-tablet {
644 -webkit-order: 6;
645 -ms-flex-order: 6;
646 order: 6; }
647 .mdl-cell--order-7-tablet.mdl-cell--order-7-tablet {
648 -webkit-order: 7;
649 -ms-flex-order: 7;
650 order: 7; }
651 .mdl-cell--order-8-tablet.mdl-cell--order-8-tablet {
652 -webkit-order: 8;
653 -ms-flex-order: 8;
654 order: 8; }
655 .mdl-cell--order-9-tablet.mdl-cell--order-9-tablet {
656 -webkit-order: 9;
657 -ms-flex-order: 9;
658 order: 9; }
659 .mdl-cell--order-10-tablet.mdl-cell--order-10-tablet {
660 -webkit-order: 10;
661 -ms-flex-order: 10;
662 order: 10; }
663 .mdl-cell--order-11-tablet.mdl-cell--order-11-tablet {
664 -webkit-order: 11;
665 -ms-flex-order: 11;
666 order: 11; }
667 .mdl-cell--order-12-tablet.mdl-cell--order-12-tablet {
668 -webkit-order: 12;
669 -ms-flex-order: 12;
670 order: 12; }
671 .mdl-cell--1-col,
672 .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
673 width: calc(12.5% - 16px); }
674 .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
675 .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
676 width: 12.5%; }
677 .mdl-cell--2-col,
678 .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
679 width: calc(25% - 16px); }
680 .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
681 .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
682 width: 25%; }
683 .mdl-cell--3-col,
684 .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
685 width: calc(37.5% - 16px); }
686 .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
687 .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
688 width: 37.5%; }
689 .mdl-cell--4-col,
690 .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
691 width: calc(50% - 16px); }
692 .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
693 .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
694 width: 50%; }
695 .mdl-cell--5-col,
696 .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
697 width: calc(62.5% - 16px); }
698 .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
699 .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
700 width: 62.5%; }
701 .mdl-cell--6-col,
702 .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
703 width: calc(75% - 16px); }
704 .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
705 .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
706 width: 75%; }
707 .mdl-cell--7-col,
708 .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
709 width: calc(87.5% - 16px); }
710 .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
711 .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
712 width: 87.5%; }
713 .mdl-cell--8-col,
714 .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
715 width: calc(100% - 16px); }
716 .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
717 .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
718 width: 100%; }
719 .mdl-cell--9-col,
720 .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
721 width: calc(100% - 16px); }
722 .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
723 .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
724 width: 100%; }
725 .mdl-cell--10-col,
726 .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
727 width: calc(100% - 16px); }
728 .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
729 .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
730 width: 100%; }
731 .mdl-cell--11-col,
732 .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
733 width: calc(100% - 16px); }
734 .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
735 .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
736 width: 100%; }
737 .mdl-cell--12-col,
738 .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
739 width: calc(100% - 16px); }
740 .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
741 .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
742 width: 100%; }
743 .mdl-cell--1-offset,
744 .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
745 margin-left: calc(12.5% + 8px); }
746 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
747 .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
748 margin-left: 12.5%; }
749 .mdl-cell--2-offset,
750 .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
751 margin-left: calc(25% + 8px); }
752 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
753 .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
754 margin-left: 25%; }
755 .mdl-cell--3-offset,
756 .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
757 margin-left: calc(37.5% + 8px); }
758 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
759 .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
760 margin-left: 37.5%; }
761 .mdl-cell--4-offset,
762 .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
763 margin-left: calc(50% + 8px); }
764 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing >
765 .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
766 margin-left: 50%; }
767 .mdl-cell--5-offset,
768 .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
769 margin-left: calc(62.5% + 8px); }
770 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing >
771 .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
772 margin-left: 62.5%; }
773 .mdl-cell--6-offset,
774 .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
775 margin-left: calc(75% + 8px); }
776 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing >
777 .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
778 margin-left: 75%; }
779 .mdl-cell--7-offset,
780 .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
781 margin-left: calc(87.5% + 8px); }
782 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing >
783 .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
784 margin-left: 87.5%; } }
785
786@media (min-width: 840px) {
787 .mdl-grid {
788 padding: 8px; }
789 .mdl-cell {
790 margin: 8px;
791 width: calc(33.3333333333% - 16px); }
792 .mdl-grid--no-spacing > .mdl-cell {
793 width: 33.3333333333%; }
794 .mdl-cell--hide-desktop {
795 display: none !important; }
796 .mdl-cell--order-1-desktop.mdl-cell--order-1-desktop {
797 -webkit-order: 1;
798 -ms-flex-order: 1;
799 order: 1; }
800 .mdl-cell--order-2-desktop.mdl-cell--order-2-desktop {
801 -webkit-order: 2;
802 -ms-flex-order: 2;
803 order: 2; }
804 .mdl-cell--order-3-desktop.mdl-cell--order-3-desktop {
805 -webkit-order: 3;
806 -ms-flex-order: 3;
807 order: 3; }
808 .mdl-cell--order-4-desktop.mdl-cell--order-4-desktop {
809 -webkit-order: 4;
810 -ms-flex-order: 4;
811 order: 4; }
812 .mdl-cell--order-5-desktop.mdl-cell--order-5-desktop {
813 -webkit-order: 5;
814 -ms-flex-order: 5;
815 order: 5; }
816 .mdl-cell--order-6-desktop.mdl-cell--order-6-desktop {
817 -webkit-order: 6;
818 -ms-flex-order: 6;
819 order: 6; }
820 .mdl-cell--order-7-desktop.mdl-cell--order-7-desktop {
821 -webkit-order: 7;
822 -ms-flex-order: 7;
823 order: 7; }
824 .mdl-cell--order-8-desktop.mdl-cell--order-8-desktop {
825 -webkit-order: 8;
826 -ms-flex-order: 8;
827 order: 8; }
828 .mdl-cell--order-9-desktop.mdl-cell--order-9-desktop {
829 -webkit-order: 9;
830 -ms-flex-order: 9;
831 order: 9; }
832 .mdl-cell--order-10-desktop.mdl-cell--order-10-desktop {
833 -webkit-order: 10;
834 -ms-flex-order: 10;
835 order: 10; }
836 .mdl-cell--order-11-desktop.mdl-cell--order-11-desktop {
837 -webkit-order: 11;
838 -ms-flex-order: 11;
839 order: 11; }
840 .mdl-cell--order-12-desktop.mdl-cell--order-12-desktop {
841 -webkit-order: 12;
842 -ms-flex-order: 12;
843 order: 12; }
844 .mdl-cell--1-col,
845 .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
846 width: calc(8.3333333333% - 16px); }
847 .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
848 .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
849 width: 8.3333333333%; }
850 .mdl-cell--2-col,
851 .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
852 width: calc(16.6666666667% - 16px); }
853 .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
854 .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
855 width: 16.6666666667%; }
856 .mdl-cell--3-col,
857 .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
858 width: calc(25% - 16px); }
859 .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
860 .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
861 width: 25%; }
862 .mdl-cell--4-col,
863 .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
864 width: calc(33.3333333333% - 16px); }
865 .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
866 .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
867 width: 33.3333333333%; }
868 .mdl-cell--5-col,
869 .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
870 width: calc(41.6666666667% - 16px); }
871 .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
872 .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
873 width: 41.6666666667%; }
874 .mdl-cell--6-col,
875 .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
876 width: calc(50% - 16px); }
877 .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
878 .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
879 width: 50%; }
880 .mdl-cell--7-col,
881 .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
882 width: calc(58.3333333333% - 16px); }
883 .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
884 .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
885 width: 58.3333333333%; }
886 .mdl-cell--8-col,
887 .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
888 width: calc(66.6666666667% - 16px); }
889 .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
890 .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
891 width: 66.6666666667%; }
892 .mdl-cell--9-col,
893 .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
894 width: calc(75% - 16px); }
895 .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
896 .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
897 width: 75%; }
898 .mdl-cell--10-col,
899 .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
900 width: calc(83.3333333333% - 16px); }
901 .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
902 .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
903 width: 83.3333333333%; }
904 .mdl-cell--11-col,
905 .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
906 width: calc(91.6666666667% - 16px); }
907 .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
908 .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
909 width: 91.6666666667%; }
910 .mdl-cell--12-col,
911 .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
912 width: calc(100% - 16px); }
913 .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
914 .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
915 width: 100%; }
916 .mdl-cell--1-offset,
917 .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
918 margin-left: calc(8.3333333333% + 8px); }
919 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
920 .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
921 margin-left: 8.3333333333%; }
922 .mdl-cell--2-offset,
923 .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
924 margin-left: calc(16.6666666667% + 8px); }
925 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
926 .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
927 margin-left: 16.6666666667%; }
928 .mdl-cell--3-offset,
929 .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
930 margin-left: calc(25% + 8px); }
931 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
932 .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
933 margin-left: 25%; }
934 .mdl-cell--4-offset,
935 .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
936 margin-left: calc(33.3333333333% + 8px); }
937 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing >
938 .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
939 margin-left: 33.3333333333%; }
940 .mdl-cell--5-offset,
941 .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
942 margin-left: calc(41.6666666667% + 8px); }
943 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing >
944 .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
945 margin-left: 41.6666666667%; }
946 .mdl-cell--6-offset,
947 .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
948 margin-left: calc(50% + 8px); }
949 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing >
950 .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
951 margin-left: 50%; }
952 .mdl-cell--7-offset,
953 .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
954 margin-left: calc(58.3333333333% + 8px); }
955 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing >
956 .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
957 margin-left: 58.3333333333%; }
958 .mdl-cell--8-offset,
959 .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
960 margin-left: calc(66.6666666667% + 8px); }
961 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--8-offset, .mdl-grid.mdl-grid--no-spacing >
962 .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
963 margin-left: 66.6666666667%; }
964 .mdl-cell--9-offset,
965 .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
966 margin-left: calc(75% + 8px); }
967 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--9-offset, .mdl-grid.mdl-grid--no-spacing >
968 .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
969 margin-left: 75%; }
970 .mdl-cell--10-offset,
971 .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
972 margin-left: calc(83.3333333333% + 8px); }
973 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--10-offset, .mdl-grid.mdl-grid--no-spacing >
974 .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
975 margin-left: 83.3333333333%; }
976 .mdl-cell--11-offset,
977 .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
978 margin-left: calc(91.6666666667% + 8px); }
979 .mdl-grid.mdl-grid--no-spacing > .mdl-cell--11-offset, .mdl-grid.mdl-grid--no-spacing >
980 .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
981 margin-left: 91.6666666667%; } }