| /** |
| * Copyright 2017 Google Inc. All Rights Reserved. |
| * |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| **/ |
| .mdc-layout-grid { |
| display: flex; |
| flex-flow: row wrap; |
| align-items: stretch; |
| margin: 0 auto; |
| box-sizing: border-box; |
| padding: 8px; |
| padding: calc(var(--mdc-layout-grid-margin, 16px) - var(--mdc-layout-grid-gutter, 16px) / 2); } |
| @supports (display: grid) { |
| .mdc-layout-grid { |
| display: grid; |
| grid-gap: 16px; |
| grid-gap: var(--mdc-layout-grid-gutter, 16px); |
| padding: 16px; |
| padding: var(--mdc-layout-grid-margin, 16px); } |
| @media (min-width: 840px) { |
| .mdc-layout-grid { |
| grid-template-columns: repeat(12, minmax(0, 1fr)); } } |
| @media (min-width: 480px) and (max-width: 839px) { |
| .mdc-layout-grid { |
| grid-template-columns: repeat(8, minmax(0, 1fr)); } } |
| @media (max-width: 479px) { |
| .mdc-layout-grid { |
| grid-template-columns: repeat(4, minmax(0, 1fr)); } } } |
| |
| .mdc-layout-grid__cell { |
| margin: 8px; |
| margin: calc(var(--mdc-layout-grid-gutter, 16px) / 2); |
| box-sizing: border-box; } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell { |
| margin: 0; } } |
| @media (min-width: 840px) { |
| .mdc-layout-grid__cell { |
| width: calc(33.33333% - 16px); |
| width: calc(33.33333% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell { |
| width: auto; |
| grid-column-end: span 4; } } } |
| @media (min-width: 480px) and (max-width: 839px) { |
| .mdc-layout-grid__cell { |
| width: calc(50% - 16px); |
| width: calc(50% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell { |
| width: auto; |
| grid-column-end: span 4; } } } |
| @media (max-width: 479px) { |
| .mdc-layout-grid__cell { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell { |
| width: auto; |
| grid-column-end: span 4; } } } |
| @media (min-width: 840px) { |
| .mdc-layout-grid__cell--span-1, |
| .mdc-layout-grid__cell--span-1-desktop.mdc-layout-grid__cell--span-1-desktop { |
| width: calc(8.33333% - 16px); |
| width: calc(8.33333% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-1, |
| .mdc-layout-grid__cell--span-1-desktop.mdc-layout-grid__cell--span-1-desktop { |
| width: auto; |
| grid-column-end: span 1; } } |
| .mdc-layout-grid__cell--span-2, |
| .mdc-layout-grid__cell--span-2-desktop.mdc-layout-grid__cell--span-2-desktop { |
| width: calc(16.66667% - 16px); |
| width: calc(16.66667% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-2, |
| .mdc-layout-grid__cell--span-2-desktop.mdc-layout-grid__cell--span-2-desktop { |
| width: auto; |
| grid-column-end: span 2; } } |
| .mdc-layout-grid__cell--span-3, |
| .mdc-layout-grid__cell--span-3-desktop.mdc-layout-grid__cell--span-3-desktop { |
| width: calc(25% - 16px); |
| width: calc(25% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-3, |
| .mdc-layout-grid__cell--span-3-desktop.mdc-layout-grid__cell--span-3-desktop { |
| width: auto; |
| grid-column-end: span 3; } } |
| .mdc-layout-grid__cell--span-4, |
| .mdc-layout-grid__cell--span-4-desktop.mdc-layout-grid__cell--span-4-desktop { |
| width: calc(33.33333% - 16px); |
| width: calc(33.33333% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-4, |
| .mdc-layout-grid__cell--span-4-desktop.mdc-layout-grid__cell--span-4-desktop { |
| width: auto; |
| grid-column-end: span 4; } } |
| .mdc-layout-grid__cell--span-5, |
| .mdc-layout-grid__cell--span-5-desktop.mdc-layout-grid__cell--span-5-desktop { |
| width: calc(41.66667% - 16px); |
| width: calc(41.66667% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-5, |
| .mdc-layout-grid__cell--span-5-desktop.mdc-layout-grid__cell--span-5-desktop { |
| width: auto; |
| grid-column-end: span 5; } } |
| .mdc-layout-grid__cell--span-6, |
| .mdc-layout-grid__cell--span-6-desktop.mdc-layout-grid__cell--span-6-desktop { |
| width: calc(50% - 16px); |
| width: calc(50% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-6, |
| .mdc-layout-grid__cell--span-6-desktop.mdc-layout-grid__cell--span-6-desktop { |
| width: auto; |
| grid-column-end: span 6; } } |
| .mdc-layout-grid__cell--span-7, |
| .mdc-layout-grid__cell--span-7-desktop.mdc-layout-grid__cell--span-7-desktop { |
| width: calc(58.33333% - 16px); |
| width: calc(58.33333% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-7, |
| .mdc-layout-grid__cell--span-7-desktop.mdc-layout-grid__cell--span-7-desktop { |
| width: auto; |
| grid-column-end: span 7; } } |
| .mdc-layout-grid__cell--span-8, |
| .mdc-layout-grid__cell--span-8-desktop.mdc-layout-grid__cell--span-8-desktop { |
| width: calc(66.66667% - 16px); |
| width: calc(66.66667% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-8, |
| .mdc-layout-grid__cell--span-8-desktop.mdc-layout-grid__cell--span-8-desktop { |
| width: auto; |
| grid-column-end: span 8; } } |
| .mdc-layout-grid__cell--span-9, |
| .mdc-layout-grid__cell--span-9-desktop.mdc-layout-grid__cell--span-9-desktop { |
| width: calc(75% - 16px); |
| width: calc(75% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-9, |
| .mdc-layout-grid__cell--span-9-desktop.mdc-layout-grid__cell--span-9-desktop { |
| width: auto; |
| grid-column-end: span 9; } } |
| .mdc-layout-grid__cell--span-10, |
| .mdc-layout-grid__cell--span-10-desktop.mdc-layout-grid__cell--span-10-desktop { |
| width: calc(83.33333% - 16px); |
| width: calc(83.33333% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-10, |
| .mdc-layout-grid__cell--span-10-desktop.mdc-layout-grid__cell--span-10-desktop { |
| width: auto; |
| grid-column-end: span 10; } } |
| .mdc-layout-grid__cell--span-11, |
| .mdc-layout-grid__cell--span-11-desktop.mdc-layout-grid__cell--span-11-desktop { |
| width: calc(91.66667% - 16px); |
| width: calc(91.66667% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-11, |
| .mdc-layout-grid__cell--span-11-desktop.mdc-layout-grid__cell--span-11-desktop { |
| width: auto; |
| grid-column-end: span 11; } } |
| .mdc-layout-grid__cell--span-12, |
| .mdc-layout-grid__cell--span-12-desktop.mdc-layout-grid__cell--span-12-desktop { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-12, |
| .mdc-layout-grid__cell--span-12-desktop.mdc-layout-grid__cell--span-12-desktop { |
| width: auto; |
| grid-column-end: span 12; } } } |
| @media (min-width: 480px) and (max-width: 839px) { |
| .mdc-layout-grid__cell--span-1, |
| .mdc-layout-grid__cell--span-1-tablet.mdc-layout-grid__cell--span-1-tablet { |
| width: calc(12.5% - 16px); |
| width: calc(12.5% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-1, |
| .mdc-layout-grid__cell--span-1-tablet.mdc-layout-grid__cell--span-1-tablet { |
| width: auto; |
| grid-column-end: span 1; } } |
| .mdc-layout-grid__cell--span-2, |
| .mdc-layout-grid__cell--span-2-tablet.mdc-layout-grid__cell--span-2-tablet { |
| width: calc(25% - 16px); |
| width: calc(25% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-2, |
| .mdc-layout-grid__cell--span-2-tablet.mdc-layout-grid__cell--span-2-tablet { |
| width: auto; |
| grid-column-end: span 2; } } |
| .mdc-layout-grid__cell--span-3, |
| .mdc-layout-grid__cell--span-3-tablet.mdc-layout-grid__cell--span-3-tablet { |
| width: calc(37.5% - 16px); |
| width: calc(37.5% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-3, |
| .mdc-layout-grid__cell--span-3-tablet.mdc-layout-grid__cell--span-3-tablet { |
| width: auto; |
| grid-column-end: span 3; } } |
| .mdc-layout-grid__cell--span-4, |
| .mdc-layout-grid__cell--span-4-tablet.mdc-layout-grid__cell--span-4-tablet { |
| width: calc(50% - 16px); |
| width: calc(50% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-4, |
| .mdc-layout-grid__cell--span-4-tablet.mdc-layout-grid__cell--span-4-tablet { |
| width: auto; |
| grid-column-end: span 4; } } |
| .mdc-layout-grid__cell--span-5, |
| .mdc-layout-grid__cell--span-5-tablet.mdc-layout-grid__cell--span-5-tablet { |
| width: calc(62.5% - 16px); |
| width: calc(62.5% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-5, |
| .mdc-layout-grid__cell--span-5-tablet.mdc-layout-grid__cell--span-5-tablet { |
| width: auto; |
| grid-column-end: span 5; } } |
| .mdc-layout-grid__cell--span-6, |
| .mdc-layout-grid__cell--span-6-tablet.mdc-layout-grid__cell--span-6-tablet { |
| width: calc(75% - 16px); |
| width: calc(75% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-6, |
| .mdc-layout-grid__cell--span-6-tablet.mdc-layout-grid__cell--span-6-tablet { |
| width: auto; |
| grid-column-end: span 6; } } |
| .mdc-layout-grid__cell--span-7, |
| .mdc-layout-grid__cell--span-7-tablet.mdc-layout-grid__cell--span-7-tablet { |
| width: calc(87.5% - 16px); |
| width: calc(87.5% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-7, |
| .mdc-layout-grid__cell--span-7-tablet.mdc-layout-grid__cell--span-7-tablet { |
| width: auto; |
| grid-column-end: span 7; } } |
| .mdc-layout-grid__cell--span-8, |
| .mdc-layout-grid__cell--span-8-tablet.mdc-layout-grid__cell--span-8-tablet { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-8, |
| .mdc-layout-grid__cell--span-8-tablet.mdc-layout-grid__cell--span-8-tablet { |
| width: auto; |
| grid-column-end: span 8; } } |
| .mdc-layout-grid__cell--span-9, |
| .mdc-layout-grid__cell--span-9-tablet.mdc-layout-grid__cell--span-9-tablet { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-9, |
| .mdc-layout-grid__cell--span-9-tablet.mdc-layout-grid__cell--span-9-tablet { |
| width: auto; |
| grid-column-end: span 8; } } |
| .mdc-layout-grid__cell--span-10, |
| .mdc-layout-grid__cell--span-10-tablet.mdc-layout-grid__cell--span-10-tablet { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-10, |
| .mdc-layout-grid__cell--span-10-tablet.mdc-layout-grid__cell--span-10-tablet { |
| width: auto; |
| grid-column-end: span 8; } } |
| .mdc-layout-grid__cell--span-11, |
| .mdc-layout-grid__cell--span-11-tablet.mdc-layout-grid__cell--span-11-tablet { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-11, |
| .mdc-layout-grid__cell--span-11-tablet.mdc-layout-grid__cell--span-11-tablet { |
| width: auto; |
| grid-column-end: span 8; } } |
| .mdc-layout-grid__cell--span-12, |
| .mdc-layout-grid__cell--span-12-tablet.mdc-layout-grid__cell--span-12-tablet { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-12, |
| .mdc-layout-grid__cell--span-12-tablet.mdc-layout-grid__cell--span-12-tablet { |
| width: auto; |
| grid-column-end: span 8; } } } |
| @media (max-width: 479px) { |
| .mdc-layout-grid__cell--span-1, |
| .mdc-layout-grid__cell--span-1-phone.mdc-layout-grid__cell--span-1-phone { |
| width: calc(25% - 16px); |
| width: calc(25% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-1, |
| .mdc-layout-grid__cell--span-1-phone.mdc-layout-grid__cell--span-1-phone { |
| width: auto; |
| grid-column-end: span 1; } } |
| .mdc-layout-grid__cell--span-2, |
| .mdc-layout-grid__cell--span-2-phone.mdc-layout-grid__cell--span-2-phone { |
| width: calc(50% - 16px); |
| width: calc(50% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-2, |
| .mdc-layout-grid__cell--span-2-phone.mdc-layout-grid__cell--span-2-phone { |
| width: auto; |
| grid-column-end: span 2; } } |
| .mdc-layout-grid__cell--span-3, |
| .mdc-layout-grid__cell--span-3-phone.mdc-layout-grid__cell--span-3-phone { |
| width: calc(75% - 16px); |
| width: calc(75% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-3, |
| .mdc-layout-grid__cell--span-3-phone.mdc-layout-grid__cell--span-3-phone { |
| width: auto; |
| grid-column-end: span 3; } } |
| .mdc-layout-grid__cell--span-4, |
| .mdc-layout-grid__cell--span-4-phone.mdc-layout-grid__cell--span-4-phone { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-4, |
| .mdc-layout-grid__cell--span-4-phone.mdc-layout-grid__cell--span-4-phone { |
| width: auto; |
| grid-column-end: span 4; } } |
| .mdc-layout-grid__cell--span-5, |
| .mdc-layout-grid__cell--span-5-phone.mdc-layout-grid__cell--span-5-phone { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-5, |
| .mdc-layout-grid__cell--span-5-phone.mdc-layout-grid__cell--span-5-phone { |
| width: auto; |
| grid-column-end: span 4; } } |
| .mdc-layout-grid__cell--span-6, |
| .mdc-layout-grid__cell--span-6-phone.mdc-layout-grid__cell--span-6-phone { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-6, |
| .mdc-layout-grid__cell--span-6-phone.mdc-layout-grid__cell--span-6-phone { |
| width: auto; |
| grid-column-end: span 4; } } |
| .mdc-layout-grid__cell--span-7, |
| .mdc-layout-grid__cell--span-7-phone.mdc-layout-grid__cell--span-7-phone { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-7, |
| .mdc-layout-grid__cell--span-7-phone.mdc-layout-grid__cell--span-7-phone { |
| width: auto; |
| grid-column-end: span 4; } } |
| .mdc-layout-grid__cell--span-8, |
| .mdc-layout-grid__cell--span-8-phone.mdc-layout-grid__cell--span-8-phone { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-8, |
| .mdc-layout-grid__cell--span-8-phone.mdc-layout-grid__cell--span-8-phone { |
| width: auto; |
| grid-column-end: span 4; } } |
| .mdc-layout-grid__cell--span-9, |
| .mdc-layout-grid__cell--span-9-phone.mdc-layout-grid__cell--span-9-phone { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-9, |
| .mdc-layout-grid__cell--span-9-phone.mdc-layout-grid__cell--span-9-phone { |
| width: auto; |
| grid-column-end: span 4; } } |
| .mdc-layout-grid__cell--span-10, |
| .mdc-layout-grid__cell--span-10-phone.mdc-layout-grid__cell--span-10-phone { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-10, |
| .mdc-layout-grid__cell--span-10-phone.mdc-layout-grid__cell--span-10-phone { |
| width: auto; |
| grid-column-end: span 4; } } |
| .mdc-layout-grid__cell--span-11, |
| .mdc-layout-grid__cell--span-11-phone.mdc-layout-grid__cell--span-11-phone { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-11, |
| .mdc-layout-grid__cell--span-11-phone.mdc-layout-grid__cell--span-11-phone { |
| width: auto; |
| grid-column-end: span 4; } } |
| .mdc-layout-grid__cell--span-12, |
| .mdc-layout-grid__cell--span-12-phone.mdc-layout-grid__cell--span-12-phone { |
| width: calc(100% - 16px); |
| width: calc(100% - var(--mdc-layout-grid-gutter, 16px)); } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--span-12, |
| .mdc-layout-grid__cell--span-12-phone.mdc-layout-grid__cell--span-12-phone { |
| width: auto; |
| grid-column-end: span 4; } } } |
| .mdc-layout-grid__cell--order-1 { |
| order: 1; } |
| .mdc-layout-grid__cell--order-2 { |
| order: 2; } |
| .mdc-layout-grid__cell--order-3 { |
| order: 3; } |
| .mdc-layout-grid__cell--order-4 { |
| order: 4; } |
| .mdc-layout-grid__cell--order-5 { |
| order: 5; } |
| .mdc-layout-grid__cell--order-6 { |
| order: 6; } |
| .mdc-layout-grid__cell--order-7 { |
| order: 7; } |
| .mdc-layout-grid__cell--order-8 { |
| order: 8; } |
| .mdc-layout-grid__cell--order-9 { |
| order: 9; } |
| .mdc-layout-grid__cell--order-10 { |
| order: 10; } |
| .mdc-layout-grid__cell--order-11 { |
| order: 11; } |
| .mdc-layout-grid__cell--order-12 { |
| order: 12; } |
| .mdc-layout-grid__cell--align-top { |
| align-self: flex-start; } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--align-top { |
| align-self: start; } } |
| .mdc-layout-grid__cell--align-middle { |
| align-self: center; } |
| .mdc-layout-grid__cell--align-bottom { |
| align-self: flex-end; } |
| @supports (display: grid) { |
| .mdc-layout-grid__cell--align-bottom { |
| align-self: end; } } |
