@charset "UTF-8"; html { color: rgba(0, 0, 0, .87) } ::-moz-selection { background: #b3d4fc; text-shadow: none } ::selection { background: #b3d4fc; text-shadow: none } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0 } audio, canvas, img, svg, video { vertical-align: middle } fieldset { border: 0; margin: 0; padding: 0 } textarea { resize: vertical } .hidden { display: none !important; visibility: hidden } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto } .invisible { visibility: hidden } .clearfix:before, .clearfix:after { content: " "; display: table } .clearfix:after { clear: both } @media print { *, *:before, *:after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important } a, a:visited { text-decoration: underline } a[href]:after { content: " (" attr(href)")" } abbr[title]:after { content: " (" attr(title)")" } a[href^="#"]:after, a[href^="javascript:"]:after { content: "" } pre, blockquote { border: 1px solid #999; page-break-inside: avoid } thead { display: table-header-group } tr, img { page-break-inside: avoid } img { max-width: 100% !important } p, h2, h3 { orphans: 3; widows: 3 } h2, h3 { page-break-after: avoid } } a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu, .mdl-icon-toggle, .mdl-item, .mdl-radio, .mdl-slider, .mdl-switch, .mdl-tabs__tab { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(255, 255, 255, 0) } html { width: 100%; height: 100%; -ms-touch-action: manipulation; touch-action: manipulation } body { width: 100%; min-height: 100% } main { display: block } *[hidden] { display: none !important } html, body { font-family: "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px } h1, h2, h3, h4, h5, h6, p { padding: 0 } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; line-height: 1.35; letter-spacing: -.02em; opacity: .54; font-size: .6em } h1 { font-size: 56px; line-height: 1.35; letter-spacing: -.02em; margin: 24px 0 } h1, h2 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400 } h2 { font-size: 45px; line-height: 48px } h2, h3 { margin: 24px 0 } h3 { font-size: 34px; line-height: 40px } h3, h4 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400 } h4 { font-size: 24px; line-height: 32px; -moz-osx-font-smoothing: grayscale; margin: 24px 0 16px } h5 { font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: .02em } h5, h6 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; margin: 24px 0 16px } h6 { font-size: 16px; letter-spacing: .04em } h6, p { font-weight: 400; line-height: 24px } p { font-size: 14px; letter-spacing: 0; margin: 0 0 16px } a { color: #ff4081; font-weight: 500 } blockquote { font-family: "Roboto", "Helvetica", "Arial", sans-serif; position: relative; font-size: 24px; font-weight: 300; font-style: italic; line-height: 1.35; letter-spacing: .08em } mark { background-color: #f4ff81 } dt { font-weight: 700 } ul, ol { font-weight: 400; letter-spacing: 0; font-size: 14px; line-height: 24px } .mdl-color-text--grey { color: #9e9e9e !important } .mdl-color-text--grey-50 { color: #fafafa !important } .mdl-color-text--grey-100 { color: #f5f5f5 !important } .mdl-color-text--grey-200 { color: #eee !important } .mdl-color-text--grey-300 { color: #e0e0e0 !important } .mdl-color-text--grey-400 { color: #bdbdbd !important } .mdl-color-text--grey-500 { color: #9e9e9e !important } .mdl-color-text--grey-600 { color: #757575 !important } .mdl-color-text--grey-700 { color: #616161 !important } .mdl-color-text--grey-800 { color: #424242 !important } .mdl-color-text--grey-900 { color: #212121 !important } .mdl-color--black { background-color: #000 !important } .mdl-color-text--black { color: #000 !important } .mdl-color--white { background-color: #fff !important } .mdl-color-text--white { color: #fff !important } .mdl-color-text--accent { color: #ff4081 !important } .mdl-color-text--accent-contrast { color: #fff !important } .mdl-ripple { background: #000; border-radius: 50%; height: 50px; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50px; overflow: hidden } .mdl-ripple.is-animating { -webkit-transition: -webkit-transform .3s cubic-bezier(0, 0, .2, 1), width .3s cubic-bezier(0, 0, .2, 1), height .3s cubic-bezier(0, 0, .2, 1), opacity .6s cubic-bezier(0, 0, .2, 1); transition: transform .3s cubic-bezier(0, 0, .2, 1), width .3s cubic-bezier(0, 0, .2, 1), height .3s cubic-bezier(0, 0, .2, 1), opacity .6s cubic-bezier(0, 0, .2, 1) } .mdl-ripple.is-visible { opacity: .3 } .mdl-animation--default, .mdl-animation--fast-out-slow-in { -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-timing-function: cubic-bezier(.4, 0, .2, 1) } .mdl-animation--linear-out-slow-in { -webkit-transition-timing-function: cubic-bezier(0, 0, .2, 1); transition-timing-function: cubic-bezier(0, 0, .2, 1) } .mdl-animation--fast-out-linear-in { -webkit-transition-timing-function: cubic-bezier(.4, 0, 1, 1); transition-timing-function: cubic-bezier(.4, 0, 1, 1) } .mdl-badge { position: relative; white-space: nowrap; margin-right: 24px } .mdl-badge:not([data-badge]) { margin-right: auto } .mdl-badge[data-badge]:after { content: attr(data-badge); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; top: -11px; right: -24px; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 600; font-size: 12px; width: 22px; height: 22px; border-radius: 50%; background: #ff4081; color: #fff } .mdl-button .mdl-badge[data-badge]:after { top: -10px; right: -5px } .mdl-badge.mdl-badge--no-background[data-badge]:after { color: #ff4081; background: rgba(255, 255, 255, .2); box-shadow: 0 0 1px gray } .mdl-button { background: 0; border: 0; border-radius: 2px; color: #000; display: block; position: relative; height: 36px; min-width: 64px; padding: 0 8px; display: inline-block; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0; overflow: hidden; will-change: box-shadow, transform; -webkit-transition: box-shadow .2s cubic-bezier(.4, 0, 1, 1), background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1); transition: box-shadow .2s cubic-bezier(.4, 0, 1, 1), background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1); outline: 0; cursor: pointer; text-decoration: none; text-align: center; line-height: 36px; vertical-align: middle } .mdl-button::-moz-focus-inner { border: 0 } .mdl-button:hover { background-color: rgba(158, 158, 158, .2) } .mdl-button:focus:not(:active) { background-color: rgba(0, 0, 0, .12) } .mdl-button:active { background-color: rgba(158, 158, 158, .4) } .mdl-button.mdl-button--colored { color: #3f51b5 } .mdl-button.mdl-button--colored:focus:not(:active) { background-color: rgba(0, 0, 0, .12) } input.mdl-button[type="submit"] { -webkit-appearance: none } .mdl-button--raised { background: rgba(158, 158, 158, .2); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) } .mdl-button--raised:active { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); background-color: rgba(158, 158, 158, .4) } .mdl-button--raised:focus:not(:active) { box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36); background-color: rgba(158, 158, 158, .4) } .mdl-button--raised.mdl-button--colored { background: #3f51b5; color: #fff } .mdl-button--raised.mdl-button--colored:hover { background-color: #3f51b5 } .mdl-button--raised.mdl-button--colored:active { background-color: #3f51b5 } .mdl-button--raised.mdl-button--colored:focus:not(:active) { background-color: #3f51b5 } .mdl-button--raised.mdl-button--colored .mdl-ripple { background: #fff } .mdl-button--fab { border-radius: 50%; font-size: 24px; height: 56px; margin: auto; min-width: 56px; width: 56px; padding: 0; overflow: hidden; background: rgba(158, 158, 158, .2); box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24); position: relative; line-height: normal } .mdl-button--fab .material-icons { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-12px, -12px); -ms-transform: translate(-12px, -12px); transform: translate(-12px, -12px); line-height: 24px; width: 24px } .mdl-button--fab.mdl-button--mini-fab { height: 40px; min-width: 40px; width: 40px } .mdl-button--fab .mdl-button__ripple-container { border-radius: 50%; -webkit-mask-image: -webkit-radial-gradient(circle, #fff, #000) } .mdl-button--fab:active { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); background-color: rgba(158, 158, 158, .4) } .mdl-button--fab:focus:not(:active) { box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36); background-color: rgba(158, 158, 158, .4) } .mdl-button--fab.mdl-button--colored { background: #ff4081; color: #fff } .mdl-button--fab.mdl-button--colored:hover { background-color: #ff4081 } .mdl-button--fab.mdl-button--colored:focus:not(:active) { background-color: #ff4081 } .mdl-button--fab.mdl-button--colored:active { background-color: #ff4081 } .mdl-button--fab.mdl-button--colored .mdl-ripple { background: #fff } .mdl-button--icon { border-radius: 50%; font-size: 24px; height: 32px; margin-left: 0; margin-right: 0; min-width: 32px; width: 32px; padding: 0; overflow: hidden; color: inherit; line-height: normal } .mdl-button--icon .material-icons { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-12px, -12px); -ms-transform: translate(-12px, -12px); transform: translate(-12px, -12px); line-height: 24px; width: 24px } .mdl-button--icon.mdl-button--mini-icon { height: 24px; min-width: 24px; width: 24px } .mdl-button--icon.mdl-button--mini-icon .material-icons { top: 0; left: 0 } .mdl-button--icon .mdl-button__ripple-container { border-radius: 50%; -webkit-mask-image: -webkit-radial-gradient(circle, #fff, #000) } .mdl-button__ripple-container { display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; overflow: hidden } .mdl-button[disabled] .mdl-button__ripple-container .mdl-ripple { background-color: transparent } .mdl-button--primary.mdl-button--primary { color: #3f51b5 } .mdl-button--primary.mdl-button--primary .mdl-ripple { background: #fff } .mdl-button--primary.mdl-button--primary.mdl-button--raised, .mdl-button--primary.mdl-button--primary.mdl-button--fab { color: #fff; background-color: #3f51b5 } .mdl-button--accent.mdl-button--accent { color: #ff4081 } .mdl-button--accent.mdl-button--accent .mdl-ripple { background: #fff } .mdl-button--accent.mdl-button--accent.mdl-button--raised, .mdl-button--accent.mdl-button--accent.mdl-button--fab { color: #fff; background-color: #ff4081 } .mdl-button[disabled][disabled] { color: rgba(0, 0, 0, .26); cursor: auto; background-color: transparent } .mdl-button--fab[disabled][disabled], .mdl-button--raised[disabled][disabled], .mdl-button--colored[disabled][disabled] { background-color: rgba(0, 0, 0, .12); color: rgba(0, 0, 0, .26); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) } .mdl-card { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; font-size: 16px; font-weight: 400; min-height: 200px; overflow: hidden; width: 330px; z-index: 1; position: relative; background: #fff; border-radius: 2px; box-sizing: border-box } .mdl-card__media { background-color: #ff4081; background-repeat: repeat; background-position: 50% 50%; background-size: cover; background-origin: padding-box; background-attachment: scroll; box-sizing: border-box } .mdl-card__title { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #000; display: block; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: stretch; -webkit-justify-content: stretch; -ms-flex-pack: stretch; justify-content: stretch; line-height: normal; padding: 16px; -webkit-perspective-origin: 165px 56px; perspective-origin: 165px 56px; -webkit-transform-origin: 165px 56px; -ms-transform-origin: 165px 56px; transform-origin: 165px 56px; box-sizing: border-box } .mdl-card__title.mdl-card--border { border-bottom: 1px solid rgba(0, 0, 0, .1) } .mdl-card__title-text { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; color: inherit; display: block; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; font-size: 24px; font-weight: 300; line-height: normal; overflow: hidden; -webkit-transform-origin: 149px 48px; -ms-transform-origin: 149px 48px; transform-origin: 149px 48px; margin: 0 } .mdl-card__subtitle-text { font-size: 14px; color: grey; margin: 0 } .mdl-card__supporting-text { color: rgba(0, 0, 0, .54); font-size: 13px; line-height: 18px; overflow: hidden; padding: 16px; width: 90% } .mdl-card__actions { font-size: 16px; line-height: normal; width: 100%; background-color: transparent; padding: 8px; box-sizing: border-box } .mdl-card__actions.mdl-card--border { border-top: 1px solid rgba(0, 0, 0, .1) } .mdl-card--expand { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1 } .mdl-card__menu { position: absolute; right: 16px; top: 16px } .mdl-checkbox { position: relative; z-index: 1; vertical-align: middle; display: inline-block; box-sizing: border-box; width: 100%; height: 24px; margin: 0; padding: 0 } .mdl-checkbox.is-upgraded { padding-left: 24px } .mdl-checkbox__input { line-height: 24px } .mdl-checkbox.is-upgraded .mdl-checkbox__input { position: absolute; width: 0; height: 0; margin: 0; padding: 0; opacity: 0; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: 0 } .mdl-checkbox__box-outline { position: absolute; top: 3px; left: 0; display: inline-block; box-sizing: border-box; width: 16px; height: 16px; margin: 0; cursor: pointer; overflow: hidden; border: 2px solid rgba(0, 0, 0, .54); border-radius: 2px; z-index: 2 } .mdl-checkbox.is-checked .mdl-checkbox__box-outline { border: 2px solid #3f51b5 } .mdl-checkbox.is-disabled .mdl-checkbox__box-outline { border: 2px solid rgba(0, 0, 0, .26); cursor: auto } .mdl-checkbox__focus-helper { position: absolute; top: 3px; left: 0; display: inline-block; box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; background-color: transparent } .mdl-checkbox.is-focused .mdl-checkbox__focus-helper { box-shadow: 0 0 0 8px rgba(0, 0, 0, .1); background-color: rgba(0, 0, 0, .1) } .mdl-checkbox.is-focused.is-checked .mdl-checkbox__focus-helper { box-shadow: 0 0 0 8px rgba(63, 81, 181, .26); background-color: rgba(63, 81, 181, .26) } .mdl-checkbox__tick-outline { position: absolute; top: 0; left: 0; height: 100%; width: 100%; -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcCI+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gMCwwIDAsMSAxLDEgMSwwIDAsMCB6IE0gMC44NTM0Mzc1LDAuMTY3MTg3NSAwLjk1OTY4NzUsMC4yNzMxMjUgMC40MjkzNzUsMC44MDM0Mzc1IDAuMzIzMTI1LDAuOTA5Njg3NSAwLjIxNzE4NzUsMC44MDM0Mzc1IDAuMDQwMzEyNSwwLjYyNjg3NSAwLjE0NjU2MjUsMC41MjA2MjUgMC4zMjMxMjUsMC42OTc1IDAuODUzNDM3NSwwLjE2NzE4NzUgeiIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICAgIDwvY2xpcFBhdGg+CiAgICA8bWFzayBpZD0ibWFzayIgbWFza1VuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgbWFza0NvbnRlbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPgogICAgICA8cGF0aAogICAgICAgICBkPSJNIDAsMCAwLDEgMSwxIDEsMCAwLDAgeiBNIDAuODUzNDM3NSwwLjE2NzE4NzUgMC45NTk2ODc1LDAuMjczMTI1IDAuNDI5Mzc1LDAuODAzNDM3NSAwLjMyMzEyNSwwLjkwOTY4NzUgMC4yMTcxODc1LDAuODAzNDM3NSAwLjA0MDMxMjUsMC42MjY4NzUgMC4xNDY1NjI1LDAuNTIwNjI1IDAuMzIzMTI1LDAuNjk3NSAwLjg1MzQzNzUsMC4xNjcxODc1IHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8L21hc2s+CiAgPC9kZWZzPgogIDxyZWN0CiAgICAgd2lkdGg9IjEiCiAgICAgaGVpZ2h0PSIxIgogICAgIHg9IjAiCiAgICAgeT0iMCIKICAgICBjbGlwLXBhdGg9InVybCgjY2xpcCkiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KPC9zdmc+Cg=="); mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcCI+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gMCwwIDAsMSAxLDEgMSwwIDAsMCB6IE0gMC44NTM0Mzc1LDAuMTY3MTg3NSAwLjk1OTY4NzUsMC4yNzMxMjUgMC40MjkzNzUsMC44MDM0Mzc1IDAuMzIzMTI1LDAuOTA5Njg3NSAwLjIxNzE4NzUsMC44MDM0Mzc1IDAuMDQwMzEyNSwwLjYyNjg3NSAwLjE0NjU2MjUsMC41MjA2MjUgMC4zMjMxMjUsMC42OTc1IDAuODUzNDM3NSwwLjE2NzE4NzUgeiIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICAgIDwvY2xpcFBhdGg+CiAgICA8bWFzayBpZD0ibWFzayIgbWFza1VuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgbWFza0NvbnRlbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPgogICAgICA8cGF0aAogICAgICAgICBkPSJNIDAsMCAwLDEgMSwxIDEsMCAwLDAgeiBNIDAuODUzNDM3NSwwLjE2NzE4NzUgMC45NTk2ODc1LDAuMjczMTI1IDAuNDI5Mzc1LDAuODAzNDM3NSAwLjMyMzEyNSwwLjkwOTY4NzUgMC4yMTcxODc1LDAuODAzNDM3NSAwLjA0MDMxMjUsMC42MjY4NzUgMC4xNDY1NjI1LDAuNTIwNjI1IDAuMzIzMTI1LDAuNjk3NSAwLjg1MzQzNzUsMC4xNjcxODc1IHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8L21hc2s+CiAgPC9kZWZzPgogIDxyZWN0CiAgICAgd2lkdGg9IjEiCiAgICAgaGVpZ2h0PSIxIgogICAgIHg9IjAiCiAgICAgeT0iMCIKICAgICBjbGlwLXBhdGg9InVybCgjY2xpcCkiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KPC9zdmc+Cg=="); background: 0; -webkit-transition-duration: .28s; transition-duration: .28s; -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-timing-function: cubic-bezier(.4, 0, .2, 1); -webkit-transition-property: background; transition-property: background } .mdl-checkbox.is-checked .mdl-checkbox__tick-outline { background: #3f51b5 url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K") } .mdl-checkbox.is-checked.is-disabled .mdl-checkbox__tick-outline { background: rgba(0, 0, 0, .26)url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K") } .mdl-checkbox__label { position: relative; cursor: pointer; font-size: 16px; line-height: 24px; margin: 0 } .mdl-checkbox.is-disabled .mdl-checkbox__label { color: rgba(0, 0, 0, .26); cursor: auto } .mdl-checkbox__ripple-container { position: absolute; z-index: 2; top: -6px; left: -10px; box-sizing: border-box; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(circle, #fff, #000) } .mdl-checkbox__ripple-container .mdl-ripple { background: #3f51b5 } .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container { cursor: auto } .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container .mdl-ripple { background: 0 } .mdl-data-table { position: relative; border: 1px solid rgba(0, 0, 0, .12); border-collapse: collapse; white-space: nowrap; font-size: 13px; background-color: #fff } .mdl-data-table thead { padding-bottom: 3px } .mdl-data-table thead .mdl-data-table__select { margin-top: 0 } .mdl-data-table tbody tr { position: relative; height: 48px; -webkit-transition-duration: .28s; transition-duration: .28s; -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-timing-function: cubic-bezier(.4, 0, .2, 1); -webkit-transition-property: background-color; transition-property: background-color } .mdl-data-table tbody tr.is-selected { background-color: #e0e0e0 } .mdl-data-table tbody tr:hover { background-color: #eee } .mdl-data-table td { text-align: right } .mdl-data-table th { padding: 0 18px 0 18px; text-align: right } .mdl-data-table td:first-of-type, .mdl-data-table th:first-of-type { padding-left: 24px } .mdl-data-table td:last-of-type, .mdl-data-table th:last-of-type { padding-right: 24px } .mdl-data-table td { position: relative; vertical-align: top; height: 48px; border-top: 1px solid rgba(0, 0, 0, .12); border-bottom: 1px solid rgba(0, 0, 0, .12); padding: 12px 18px 0; box-sizing: border-box } .mdl-data-table td .mdl-data-table__select { vertical-align: top; position: absolute; left: 24px } .mdl-data-table th { position: relative; vertical-align: bottom; text-overflow: ellipsis; font-weight: 700; line-height: 24px; letter-spacing: 0; height: 48px; font-size: 12px; color: rgba(0, 0, 0, .54); padding-bottom: 8px; box-sizing: border-box } .mdl-data-table th .mdl-data-table__select { position: relative } .mdl-data-table__select { width: 16px } .mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric { text-align: left } .mdl-logo { margin-bottom: 16px; color: #fff } @media screen and (min-width:760px) { .mdl-logo { float: left; margin-bottom: 0; margin-right: 16px } } .mdl-mini-footer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 32px 16px; color: #9e9e9e; background-color: #424242 } .mdl-mini-footer:after { content: ''; display: block } .mdl-mini-footer .mdl-logo { line-height: 36px } .mdl-mini-footer--link-list, .mdl-mini-footer__link-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; list-style: none; margin: 0; padding: 0 } .mdl-mini-footer--link-list li, .mdl-mini-footer__link-list li { margin-bottom: 0; margin-right: 16px } @media screen and (min-width:760px) { .mdl-mini-footer--link-list li, .mdl-mini-footer__link-list li { line-height: 36px } } .mdl-mini-footer--link-list a, .mdl-mini-footer__link-list a { color: inherit; text-decoration: none; white-space: nowrap } .mdl-mini-footer--left-section, .mdl-mini-footer__left-section { display: inline-block; -webkit-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0 } .mdl-mini-footer--right-section, .mdl-mini-footer__right-section { display: inline-block; -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1 } .mdl-mini-footer--social-btn, .mdl-mini-footer__social-btn { width: 36px; height: 36px; padding: 0; margin: 0; background-color: #9e9e9e; border: 0 } .mdl-icon-toggle { position: relative; z-index: 1; vertical-align: middle; display: inline-block; height: 32px; margin: 0; padding: 0 } .mdl-icon-toggle__input { line-height: 32px } .mdl-icon-toggle.is-upgraded .mdl-icon-toggle__input { position: absolute; width: 0; height: 0; margin: 0; padding: 0; opacity: 0; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: 0 } .mdl-icon-toggle__label { display: inline-block; position: relative; cursor: pointer; height: 32px; width: 32px; min-width: 32px; color: #616161; border-radius: 50%; padding: 0; margin-left: 0; margin-right: 0; text-align: center; background-color: transparent; will-change: background-color; -webkit-transition: background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1); transition: background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1) } .mdl-icon-toggle__label.material-icons { line-height: 32px; font-size: 24px } .mdl-icon-toggle.is-checked .mdl-icon-toggle__label { color: #3f51b5 } .mdl-icon-toggle.is-disabled .mdl-icon-toggle__label { color: rgba(0, 0, 0, .26); cursor: auto; -webkit-transition: none; transition: none } .mdl-icon-toggle.is-focused .mdl-icon-toggle__label { background-color: rgba(0, 0, 0, .12) } .mdl-icon-toggle.is-focused.is-checked .mdl-icon-toggle__label { background-color: rgba(63, 81, 181, .26) } .mdl-icon-toggle__ripple-container { position: absolute; z-index: 2; top: -2px; left: -2px; box-sizing: border-box; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(circle, #fff, #000) } .mdl-icon-toggle__ripple-container .mdl-ripple { background: #616161 } .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container { cursor: auto } .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container .mdl-ripple { background: 0 } .mdl-menu__container { display: block; margin: 0; padding: 0; border: 0; position: absolute; overflow: visible; height: 0; width: 0; z-index: -1 } .mdl-menu__container.is-visible { z-index: 999 } .mdl-menu__outline { display: block; background: #fff; margin: 0; padding: 0; border: 0; border-radius: 2px; position: absolute; top: 0; left: 0; overflow: hidden; opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); will-change: transform; -webkit-transition: -webkit-transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1); transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1); z-index: -1 } .mdl-menu__container.is-visible .mdl-menu__outline { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); z-index: 999 } .mdl-menu__outline.mdl-menu--bottom-right { -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0 } .mdl-menu__outline.mdl-menu--top-left { -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100% } .mdl-menu__outline.mdl-menu--top-right { -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100% } .mdl-menu { position: absolute; list-style: none; top: 0; left: 0; height: auto; width: auto; min-width: 124px; padding: 8px 0; margin: 0; opacity: 0; clip: rect(0 0 0 0); z-index: -1 } .mdl-menu__container.is-visible .mdl-menu { opacity: 1; z-index: 999 } .mdl-menu.is-animating { -webkit-transition: opacity .2s cubic-bezier(.4, 0, .2, 1), clip .3s cubic-bezier(.4, 0, .2, 1); transition: opacity .2s cubic-bezier(.4, 0, .2, 1), clip .3s cubic-bezier(.4, 0, .2, 1) } .mdl-menu.mdl-menu--bottom-right { left: auto; right: 0 } .mdl-menu.mdl-menu--top-left { top: auto; bottom: 0 } .mdl-menu.mdl-menu--top-right { top: auto; left: auto; bottom: 0; right: 0 } .mdl-menu.mdl-menu--unaligned { top: auto; left: auto } .mdl-menu__item { display: block; border: 0; color: rgba(0, 0, 0, .87); background-color: transparent; text-align: left; margin: 0; padding: 0 16px; outline-color: #bdbdbd; position: relative; overflow: hidden; font-size: 14px; font-weight: 400; letter-spacing: 0; text-decoration: none; cursor: pointer; height: 48px; line-height: 48px; white-space: nowrap; opacity: 0; -webkit-transition: opacity .2s cubic-bezier(.4, 0, .2, 1); transition: opacity .2s cubic-bezier(.4, 0, .2, 1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .mdl-menu__container.is-visible .mdl-menu__item { opacity: 1 } .mdl-menu__item::-moz-focus-inner { border: 0 } .mdl-menu__item[disabled] { color: #bdbdbd; background-color: transparent; cursor: auto } .mdl-menu__item[disabled]:hover { background-color: transparent } .mdl-menu__item[disabled]:focus { background-color: transparent } .mdl-menu__item[disabled] .mdl-ripple { background: 0 } .mdl-menu__item:hover { background-color: #eee } .mdl-menu__item:focus { outline: 0; background-color: #eee } .mdl-menu__item:active { background-color: #e0e0e0 } .mdl-menu__item--ripple-container { display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; overflow: hidden } .mdl-progress { display: block; position: relative; height: 4px; width: 500px } .mdl-progress>.bar { display: block; position: absolute; top: 0; bottom: 0; width: 0; -webkit-transition: width .2s cubic-bezier(.4, 0, .2, 1); transition: width .2s cubic-bezier(.4, 0, .2, 1) } .mdl-progress>.progressbar { background-color: #3f51b5; z-index: 1; left: 0 } .mdl-progress>.bufferbar { background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), -webkit-linear-gradient(left, #3f51b5, #3f51b5); background-image: linear-gradient(to right, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(to right, #3f51b5, #3f51b5); z-index: 0; left: 0 } .mdl-progress>.auxbar { right: 0 } @supports(-webkit-appearance:none) { .mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate)>.auxbar { background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), -webkit-linear-gradient(left, #3f51b5, #3f51b5); background-image: linear-gradient(to right, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(to right, #3f51b5, #3f51b5); -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo="); mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=") } } .mdl-progress:not(.mdl-progress__indeterminate)>.auxbar { background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), -webkit-linear-gradient(left, #3f51b5, #3f51b5); background-image: linear-gradient(to right, rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), linear-gradient(to right, #3f51b5, #3f51b5) } .mdl-progress.mdl-progress__indeterminate>.bar1 { -webkit-animation-name: indeterminate1; animation-name: indeterminate1 } .mdl-progress.mdl-progress__indeterminate>.bar1, .mdl-progress.mdl-progress__indeterminate>.bar3 { background-color: #3f51b5; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear } .mdl-progress.mdl-progress__indeterminate>.bar3 { background-image: none; -webkit-animation-name: indeterminate2; animation-name: indeterminate2 } @-webkit-keyframes indeterminate1 { 0% { left: 0; width: 0 } 50% { left: 25%; width: 75% } 75% { left: 100%; width: 0 } } @keyframes indeterminate1 { 0% { left: 0; width: 0 } 50% { left: 25%; width: 75% } 75% { left: 100%; width: 0 } } @-webkit-keyframes indeterminate2 { 0%, 50% { left: 0; width: 0 } 75% { left: 0; width: 25% } 100% { left: 100%; width: 0 } } @keyframes indeterminate2 { 0%, 50% { left: 0; width: 0 } 75% { left: 0; width: 25% } 100% { left: 100%; width: 0 } } .mdl-navigation { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; box-sizing: border-box } .mdl-navigation__link { color: #424242; text-decoration: none; font-weight: 500; font-size: 13px; margin: 0 } .material-layout { width: 100%; height: 100%; } .material-layout.is-small-screen .mdl-layout--large-screen-only { display: none } .material-layout:not(.is-small-screen) .mdl-layout--small-screen-only { display: none } .mdl-layout__container { position: absolute; width: 100%; height: 100% } .mdl-layout-title { display: block; position: relative; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 20px; line-height: 1; letter-spacing: .02em; font-weight: 400; box-sizing: border-box } .mdl-layout-spacer { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1 } .mdl-layout__drawer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 240px; height: 100%; max-height: 100%; position: absolute; top: 0; left: 0; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); box-sizing: border-box; border-right: 1px solid #e0e0e0; background: #fafafa; -webkit-transform: translateX(-250px); -ms-transform: translateX(-250px); transform: translateX(-250px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; will-change: transform; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-timing-function: cubic-bezier(.4, 0, .2, 1); -webkit-transition-property: -webkit-transform; transition-property: transform; color: #424242; overflow: visible; overflow-y: auto; z-index: 5 } .mdl-layout__drawer.is-visible { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } .mdl-layout__drawer>* { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0 } .mdl-layout__drawer>.mdl-layout-title { line-height: 64px; padding-left: 40px } @media screen and (max-width:1024px) { .mdl-layout__drawer>.mdl-layout-title { line-height: 56px; padding-left: 16px } } .mdl-layout__drawer .mdl-navigation { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; padding-top: 16px } .mdl-layout__drawer .mdl-navigation .mdl-navigation__link { display: block; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding: 16px 40px; margin: 0; color: #757575 } @media screen and (max-width:1024px) { .mdl-layout__drawer .mdl-navigation .mdl-navigation__link { padding: 16px } } .mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover { background-color: #e0e0e0 } .mdl-layout__drawer .mdl-navigation .mdl-navigation__link--current { background-color: #000; color: #3f51b5 } @media screen and (min-width:1025px) { .mdl-layout--fixed-drawer>.mdl-layout__drawer { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .mdl-layout__drawer-button { display: block; position: absolute; height: 48px; width: 48px; border: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; overflow: hidden; text-align: center; cursor: pointer; font-size: 26px; line-height: 50px; font-family: Helvetica, Arial, sans-serif; margin: 10px 12px; top: 0; left: 0; color: #fff; z-index: 4 } .mdl-layout__header .mdl-layout__drawer-button { position: absolute; color: #fff; background-color: inherit } @media screen and (max-width:1024px) { .mdl-layout__header .mdl-layout__drawer-button { margin: 4px } } @media screen and (max-width:1024px) { .mdl-layout__drawer-button { margin: 4px; color: rgba(0, 0, 0, .5) } } @media screen and (min-width:1025px) { .mdl-layout--fixed-drawer>.mdl-layout__drawer-button { display: none } } .mdl-layout__header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; box-sizing: border-box; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; margin: 0; padding: 0; border: 0; min-height: 64px; max-height: 1000px; z-index: 3; background-color: #3f51b5; color: #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-timing-function: cubic-bezier(.4, 0, .2, 1); -webkit-transition-property: max-height, box-shadow; transition-property: max-height, box-shadow } @media screen and (max-width:1024px) { .mdl-layout__header { min-height: 56px } } .mdl-layout--fixed-drawer:not(.is-small-screen)>.mdl-layout__header { margin-left: 240px; width: calc(100% - 240px) } .mdl-layout--fixed-drawer>.mdl-layout__header .mdl-layout__header-row { padding-left: 40px } .mdl-layout__header>.mdl-layout-icon { position: absolute; left: 40px; top: 16px; height: 32px; width: 32px; overflow: hidden; z-index: 3; display: block } @media screen and (max-width:1024px) { .mdl-layout__header>.mdl-layout-icon { left: 16px; top: 12px } } .mdl-layout.has-drawer .mdl-layout__header>.mdl-layout-icon { display: none } .mdl-layout__header.is-compact { max-height: 64px } @media screen and (max-width:1024px) { .mdl-layout__header.is-compact { max-height: 56px } } .mdl-layout__header.is-compact.has-tabs { height: 112px } @media screen and (max-width:1024px) { .mdl-layout__header.is-compact.has-tabs { min-height: 104px } } @media screen and (max-width:1024px) { .mdl-layout__header { display: none } .mdl-layout--fixed-header>.mdl-layout__header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } } .mdl-layout__header--transparent.mdl-layout__header--transparent { background-color: transparent; box-shadow: none } .mdl-layout__header--seamed, .mdl-layout__header--scroll { box-shadow: none } .mdl-layout__header--waterfall { box-shadow: none; overflow: hidden } .mdl-layout__header--waterfall.is-casting-shadow { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) } .mdl-layout__header-row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; box-sizing: border-box; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 64px; margin: 0; padding: 0 40px 0 80px } @media screen and (max-width:1024px) { .mdl-layout__header-row { height: 56px; padding: 0 16px 0 72px } } .mdl-layout__header-row>* { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0 } .mdl-layout__header--scroll .mdl-layout__header-row { width: 100% } .mdl-layout__header-row .mdl-navigation { margin: 0; padding: 0; height: 64px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media screen and (max-width:1024px) { .mdl-layout__header-row .mdl-navigation { height: 56px } } .mdl-layout__header-row .mdl-navigation__link { display: block; color: #fff; line-height: 64px; padding: 0 24px } @media screen and (max-width:1024px) { .mdl-layout__header-row .mdl-navigation__link { line-height: 56px; padding: 0 16px } } .mdl-layout__obfuscator { background-color: transparent; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 4; visibility: hidden; -webkit-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-timing-function: cubic-bezier(.4, 0, .2, 1) } .mdl-layout__drawer.is-visible~.mdl-layout__obfuscator { background-color: rgba(0, 0, 0, .5); visibility: visible } .material-layout_content { -ms-flex: 0 1 auto; display: inline-block; overflow-y: auto; overflow-x: hidden; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; z-index: 1; -webkit-overflow-scrolling: touch } .mdl-layout--fixed-drawer>.material-layout_content { margin-left: 240px } .mdl-layout__container.has-scrolling-header .material-layout_content { overflow: visible } @media screen and (max-width:1024px) { .mdl-layout--fixed-drawer>.material-layout_content { margin-left: 0 } .mdl-layout__container.has-scrolling-header .material-layout_content { overflow-y: auto; overflow-x: hidden } } .mdl-layout__tab-bar { height: 96px; margin: 0; width: calc(100% - 112px); padding: 0 0 0 56px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #3f51b5; overflow-y: hidden; overflow-x: scroll } .mdl-layout__tab-bar::-webkit-scrollbar { display: none } @media screen and (max-width:1024px) { .mdl-layout__tab-bar { width: calc(100% - 60px); padding: 0 0 0 60px } } .mdl-layout--fixed-tabs .mdl-layout__tab-bar { padding: 0; overflow: hidden; width: 100% } .mdl-layout__tab-bar-container { position: relative; height: 48px; width: 100%; border: 0; margin: 0; z-index: 2; -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; overflow: hidden } .mdl-layout__container>.mdl-layout__tab-bar-container { position: absolute; top: 0; left: 0 } .mdl-layout__tab-bar-button { display: inline-block; position: absolute; top: 0; height: 48px; width: 56px; z-index: 4; text-align: center; background-color: #3f51b5; color: transparent; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } @media screen and (max-width:1024px) { .mdl-layout__tab-bar-button { display: none; width: 60px } } .mdl-layout--fixed-tabs .mdl-layout__tab-bar-button { display: none } .mdl-layout__tab-bar-button .material-icons { line-height: 48px } .mdl-layout__tab-bar-button.is-active { color: #fff } .mdl-layout__tab-bar-left-button { left: 0 } .mdl-layout__tab-bar-right-button { right: 0 } .mdl-layout__tab { margin: 0; border: 0; padding: 0 24px; float: left; position: relative; display: block; -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; text-decoration: none; height: 48px; line-height: 48px; text-align: center; font-weight: 500; font-size: 14px; text-transform: uppercase; color: rgba(255, 255, 255, .6); overflow: hidden } @media screen and (max-width:1024px) { .mdl-layout__tab { padding: 0 12px } } .mdl-layout--fixed-tabs .mdl-layout__tab { float: none; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 0 } .mdl-layout.is-upgraded .mdl-layout__tab.is-active { color: #fff } .mdl-layout.is-upgraded .mdl-layout__tab.is-active::after { height: 2px; width: 100%; display: block; content: " "; bottom: 0; left: 0; position: absolute; background: #ff4081; -webkit-animation: border-expand .2s cubic-bezier(.4, 0, .4, 1).01s alternate forwards; animation: border-expand .2s cubic-bezier(.4, 0, .4, 1).01s alternate forwards; -webkit-transition: all 1s cubic-bezier(.4, 0, 1, 1); transition: all 1s cubic-bezier(.4, 0, 1, 1) } .mdl-layout__tab .mdl-layout__tab-ripple-container { display: block; position: absolute; height: 100%; width: 100%; left: 0; top: 0; z-index: 1; overflow: hidden } .mdl-layout__tab .mdl-layout__tab-ripple-container .mdl-ripple { background-color: #fff } .mdl-layout__tab-panel { display: block } .mdl-layout.is-upgraded .mdl-layout__tab-panel { display: none } .mdl-layout.is-upgraded .mdl-layout__tab-panel.is-active { display: block } .mdl-radio { position: relative; font-size: 16px; line-height: 24px; display: inline-block; box-sizing: border-box; margin: 0; padding-left: 0 } .mdl-radio.is-upgraded { padding-left: 24px } .mdl-radio__button { line-height: 24px } .mdl-radio.is-upgraded .mdl-radio__button { position: absolute; width: 0; height: 0; margin: 0; padding: 0; opacity: 0; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: 0 } .mdl-radio__outer-circle { position: absolute; top: 2px; left: 0; display: inline-block; box-sizing: border-box; width: 16px; height: 16px; margin: 0; cursor: pointer; border: 2px solid rgba(0, 0, 0, .54); border-radius: 50%; z-index: 2 } .mdl-radio.is-checked .mdl-radio__outer-circle { border: 2px solid #3f51b5 } .mdl-radio.is-disabled .mdl-radio__outer-circle { border: 2px solid rgba(0, 0, 0, .26); cursor: auto } .mdl-radio__inner-circle { position: absolute; z-index: 1; margin: 0; top: 6px; left: 4px; box-sizing: border-box; width: 8px; height: 8px; cursor: pointer; -webkit-transition-duration: .28s; transition-duration: .28s; -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-timing-function: cubic-bezier(.4, 0, .2, 1); -webkit-transition-property: -webkit-transform; transition-property: transform; -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); border-radius: 50%; background: #3f51b5 } .mdl-radio.is-checked .mdl-radio__inner-circle { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } .mdl-radio.is-disabled .mdl-radio__inner-circle { background: rgba(0, 0, 0, .26); cursor: auto } .mdl-radio.is-focused .mdl-radio__inner-circle { box-shadow: 0 0 0 10px rgba(0, 0, 0, .1) } .mdl-radio__label { cursor: pointer } .mdl-radio.is-disabled .mdl-radio__label { color: rgba(0, 0, 0, .26); cursor: auto } .mdl-radio__ripple-container { position: absolute; z-index: 2; top: -9px; left: -13px; box-sizing: border-box; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(circle, #fff, #000) } .mdl-radio__ripple-container .mdl-ripple { background: #3f51b5 } .mdl-radio.is-disabled .mdl-radio__ripple-container { cursor: auto } .mdl-radio.is-disabled .mdl-radio__ripple-container .mdl-ripple { background: 0 } _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded { -ms-appearance: none; height: 32px; margin: 0 } .mdl-slider { width: calc(100% - 40px); margin: 0 20px } .mdl-slider.is-upgraded { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 2px; background: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: 0; padding: 0; color: #3f51b5; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; z-index: 1 } .mdl-slider.is-upgraded::-moz-focus-outer { border: 0 } .mdl-slider.is-upgraded::-ms-tooltip { display: none } .mdl-slider.is-upgraded::-webkit-slider-runnable-track { background: 0 } .mdl-slider.is-upgraded::-moz-range-track { background: 0; border: 0 } .mdl-slider.is-upgraded::-ms-track { background: 0; color: transparent; height: 2px; width: 100%; border: 0 } .mdl-slider.is-upgraded::-ms-fill-lower { padding: 0; background: linear-gradient(to right, transparent, transparent 16px, #3f51b5 16px, #3f51b5 0) } .mdl-slider.is-upgraded::-ms-fill-upper { padding: 0; background: linear-gradient(to left, transparent, transparent 16px, rgba(0, 0, 0, .26)16px, rgba(0, 0, 0, .26)0) } .mdl-slider.is-upgraded::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: #3f51b5; border: 0; -webkit-transition: -webkit-transform .18s cubic-bezier(.4, 0, .2, 1), border .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s cubic-bezier(.4, 0, .2, 1), background .28s cubic-bezier(.4, 0, .2, 1); transition: transform .18s cubic-bezier(.4, 0, .2, 1), border .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s cubic-bezier(.4, 0, .2, 1), background .28s cubic-bezier(.4, 0, .2, 1) } .mdl-slider.is-upgraded::-moz-range-thumb { -moz-appearance: none; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background-image: none; background: #3f51b5; border: 0 } .mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(63, 81, 181, .26) } .mdl-slider.is-upgraded:focus:not(:active)::-moz-range-thumb { box-shadow: 0 0 0 10px rgba(63, 81, 181, .26) } .mdl-slider.is-upgraded:active::-webkit-slider-thumb { background-image: none; background: #3f51b5; -webkit-transform: scale(1.5); transform: scale(1.5) } .mdl-slider.is-upgraded:active::-moz-range-thumb { background-image: none; background: #3f51b5; transform: scale(1.5) } .mdl-slider.is-upgraded::-ms-thumb { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #3f51b5; -ms-transform: scale(.375); transform: scale(.375); transition: transform .18s cubic-bezier(.4, 0, .2, 1), background .28s cubic-bezier(.4, 0, .2, 1) } .mdl-slider.is-upgraded:focus:not(:active)::-ms-thumb { background: radial-gradient(circle closest-side, #3f51b5 0, #3f51b5 37.5%, rgba(63, 81, 181, .26)37.5%, rgba(63, 81, 181, .26)100%); -ms-transform: scale(1); transform: scale(1) } .mdl-slider.is-upgraded:active::-ms-thumb { background: #3f51b5; -ms-transform: scale(.5625); transform: scale(.5625) } .mdl-slider.is-upgraded.is-lowest-value::-webkit-slider-thumb { border: 2px solid rgba(0, 0, 0, .26); background: 0 } .mdl-slider.is-upgraded.is-lowest-value::-moz-range-thumb { border: 2px solid rgba(0, 0, 0, .26); background: 0 } .mdl-slider.is-upgraded.is-lowest-value~.mdl-slider__background-flex>.mdl-slider__background-upper { left: 6px } .mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(0, 0, 0, .12); background: rgba(0, 0, 0, .12) } .mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-moz-range-thumb { box-shadow: 0 0 0 10px rgba(0, 0, 0, .12); background: rgba(0, 0, 0, .12) } .mdl-slider.is-upgraded.is-lowest-value:active::-webkit-slider-thumb { border: 1.6px solid rgba(0, 0, 0, .26); -webkit-transform: scale(1.5); transform: scale(1.5) } .mdl-slider.is-upgraded.is-lowest-value:active~.mdl-slider__background-flex>.mdl-slider__background-upper { left: 9px } .mdl-slider.is-upgraded.is-lowest-value:active::-moz-range-thumb { border: 1.5px solid rgba(0, 0, 0, .26); transform: scale(1.5) } .mdl-slider.is-upgraded.is-lowest-value::-ms-thumb { background: radial-gradient(circle closest-side, transparent 0, transparent 66.67%, rgba(0, 0, 0, .26)66.67%, rgba(0, 0, 0, .26)100%) } .mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-ms-thumb { background: radial-gradient(circle closest-side, rgba(0, 0, 0, .12)0, rgba(0, 0, 0, .12)25%, rgba(0, 0, 0, .26)25%, rgba(0, 0, 0, .26)37.5%, rgba(0, 0, 0, .12)37.5%, rgba(0, 0, 0, .12)100%); -ms-transform: scale(1); transform: scale(1) } .mdl-slider.is-upgraded.is-lowest-value:active::-ms-thumb { -ms-transform: scale(.5625); transform: scale(.5625); background: radial-gradient(circle closest-side, transparent 0, transparent 77.78%, rgba(0, 0, 0, .26)77.78%, rgba(0, 0, 0, .26)100%) } .mdl-slider.is-upgraded.is-lowest-value::-ms-fill-lower { background: 0 } .mdl-slider.is-upgraded.is-lowest-value::-ms-fill-upper { margin-left: 6px } .mdl-slider.is-upgraded.is-lowest-value:active::-ms-fill-upper { margin-left: 9px } .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 { -webkit-transform: scale(.667); transform: scale(.667); background: rgba(0, 0, 0, .26) } .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 { transform: scale(.667); background: rgba(0, 0, 0, .26) } .mdl-slider.is-upgraded:disabled~.mdl-slider__background-flex>.mdl-slider__background-lower { background-color: rgba(0, 0, 0, .26); left: -6px } .mdl-slider.is-upgraded:disabled~.mdl-slider__background-flex>.mdl-slider__background-upper { left: 6px } .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 { border: 3px solid rgba(0, 0, 0, .26); background: 0; -webkit-transform: scale(.667); transform: scale(.667) } .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 { border: 3px solid rgba(0, 0, 0, .26); background: 0; transform: scale(.667) } .mdl-slider.is-upgraded.is-lowest-value:disabled:active~.mdl-slider__background-flex>.mdl-slider__background-upper { left: 6px } .mdl-slider.is-upgraded:disabled:focus::-ms-thumb, .mdl-slider.is-upgraded:disabled:active::-ms-thumb, .mdl-slider.is-upgraded:disabled::-ms-thumb { -ms-transform: scale(.25); transform: scale(.25); background: rgba(0, 0, 0, .26) } .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 { -ms-transform: scale(.25); transform: scale(.25); background: radial-gradient(circle closest-side, transparent 0, transparent 50%, rgba(0, 0, 0, .26)50%, rgba(0, 0, 0, .26)100%) } .mdl-slider.is-upgraded:disabled::-ms-fill-lower { margin-right: 6px; background: linear-gradient(to right, transparent, transparent 25px, rgba(0, 0, 0, .26)25px, rgba(0, 0, 0, .26)0) } .mdl-slider.is-upgraded:disabled::-ms-fill-upper { margin-left: 6px } .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-ms-fill-upper { margin-left: 6px } .mdl-slider__ie-container { height: 18px; overflow: visible; border: 0; margin: none; padding: none } .mdl-slider__container { height: 18px; position: relative; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } .mdl-slider__container, .mdl-slider__background-flex { background: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } .mdl-slider__background-flex { position: absolute; height: 2px; width: calc(100% - 52px); top: 50%; left: 0; margin: 0 26px; overflow: hidden; border: 0; padding: 0; -webkit-transform: translate(0, -1px); -ms-transform: translate(0, -1px); transform: translate(0, -1px) } .mdl-slider__background-lower { background: #3f51b5 } .mdl-slider__background-lower, .mdl-slider__background-upper { -webkit-box-flex: 0; -webkit-flex: 0; -ms-flex: 0; flex: 0; position: relative; border: 0; padding: 0 } .mdl-slider__background-upper { background: rgba(0, 0, 0, .26); -webkit-transition: left .18s cubic-bezier(.4, 0, .2, 1); transition: left .18s cubic-bezier(.4, 0, .2, 1) } .mdl-spinner { display: inline-block; position: relative; width: 28px; height: 28px } .mdl-spinner:not(.is-upgraded).is-active:after { content: "Loading..." } .mdl-spinner.is-upgraded.is-active { -webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite; animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite } @-webkit-keyframes mdl-spinner__container-rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes mdl-spinner__container-rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } .mdl-spinner__layer { position: absolute; width: 100%; height: 100%; opacity: 0 } .mdl-spinner__layer-1 { border-color: #42a5f5 } .mdl-spinner--single-color .mdl-spinner__layer-1 { border-color: #3f51b5 } .mdl-spinner.is-active .mdl-spinner__layer-1 { -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1)infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(.4, 0, .2, 1)infinite both; animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1)infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(.4, 0, .2, 1)infinite both } .mdl-spinner__layer-2 { border-color: #f44336 } .mdl-spinner--single-color .mdl-spinner__layer-2 { border-color: #3f51b5 } .mdl-spinner.is-active .mdl-spinner__layer-2 { -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1)infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(.4, 0, .2, 1)infinite both; animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1)infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(.4, 0, .2, 1)infinite both } .mdl-spinner__layer-3 { border-color: #fdd835 } .mdl-spinner--single-color .mdl-spinner__layer-3 { border-color: #3f51b5 } .mdl-spinner.is-active .mdl-spinner__layer-3 { -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1)infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(.4, 0, .2, 1)infinite both; animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1)infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(.4, 0, .2, 1)infinite both } .mdl-spinner__layer-4 { border-color: #4caf50 } .mdl-spinner--single-color .mdl-spinner__layer-4 { border-color: #3f51b5 } .mdl-spinner.is-active .mdl-spinner__layer-4 { -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1)infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(.4, 0, .2, 1)infinite both; animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1)infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(.4, 0, .2, 1)infinite both } @-webkit-keyframes mdl-spinner__fill-unfill-rotate { 12.5% { -webkit-transform: rotate(135deg); transform: rotate(135deg) } 25% { -webkit-transform: rotate(270deg); transform: rotate(270deg) } 37.5% { -webkit-transform: rotate(405deg); transform: rotate(405deg) } 50% { -webkit-transform: rotate(540deg); transform: rotate(540deg) } 62.5% { -webkit-transform: rotate(675deg); transform: rotate(675deg) } 75% { -webkit-transform: rotate(810deg); transform: rotate(810deg) } 87.5% { -webkit-transform: rotate(945deg); transform: rotate(945deg) } to { -webkit-transform: rotate(1080deg); transform: rotate(1080deg) } } @keyframes mdl-spinner__fill-unfill-rotate { 12.5% { -webkit-transform: rotate(135deg); transform: rotate(135deg) } 25% { -webkit-transform: rotate(270deg); transform: rotate(270deg) } 37.5% { -webkit-transform: rotate(405deg); transform: rotate(405deg) } 50% { -webkit-transform: rotate(540deg); transform: rotate(540deg) } 62.5% { -webkit-transform: rotate(675deg); transform: rotate(675deg) } 75% { -webkit-transform: rotate(810deg); transform: rotate(810deg) } 87.5% { -webkit-transform: rotate(945deg); transform: rotate(945deg) } to { -webkit-transform: rotate(1080deg); transform: rotate(1080deg) } } @-webkit-keyframes mdl-spinner__layer-1-fade-in-out { from, 25% { opacity: .99 } 26%, 89% { opacity: 0 } 90%, 100% { opacity: .99 } } @keyframes mdl-spinner__layer-1-fade-in-out { from, 25% { opacity: .99 } 26%, 89% { opacity: 0 } 90%, 100% { opacity: .99 } } @-webkit-keyframes mdl-spinner__layer-2-fade-in-out { from, 15% { opacity: 0 } 25%, 50% { opacity: .99 } 51% { opacity: 0 } } @keyframes mdl-spinner__layer-2-fade-in-out { from, 15% { opacity: 0 } 25%, 50% { opacity: .99 } 51% { opacity: 0 } } @-webkit-keyframes mdl-spinner__layer-3-fade-in-out { from, 40% { opacity: 0 } 50%, 75% { opacity: .99 } 76% { opacity: 0 } } @keyframes mdl-spinner__layer-3-fade-in-out { from, 40% { opacity: 0 } 50%, 75% { opacity: .99 } 76% { opacity: 0 } } @-webkit-keyframes mdl-spinner__layer-4-fade-in-out { from, 65% { opacity: 0 } 75%, 90% { opacity: .99 } 100% { opacity: 0 } } @keyframes mdl-spinner__layer-4-fade-in-out { from, 65% { opacity: 0 } 75%, 90% { opacity: .99 } 100% { opacity: 0 } } .mdl-spinner__gap-patch { position: absolute; box-sizing: border-box; top: 0; left: 45%; width: 10%; height: 100%; overflow: hidden; border-color: inherit } .mdl-spinner__gap-patch .mdl-spinner__circle { width: 1000%; left: -450% } .mdl-spinner__circle-clipper { display: inline-block; position: relative; width: 50%; height: 100%; overflow: hidden; border-color: inherit } .mdl-spinner__circle-clipper .mdl-spinner__circle { width: 200% } .mdl-spinner__circle { box-sizing: border-box; height: 100%; border-width: 3px; border-style: solid; border-color: inherit; border-bottom-color: transparent !important; border-radius: 50%; -webkit-animation: none; animation: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .mdl-spinner__left .mdl-spinner__circle { border-right-color: transparent !important; -webkit-transform: rotate(129deg); -ms-transform: rotate(129deg); transform: rotate(129deg) } .mdl-spinner.is-active .mdl-spinner__left .mdl-spinner__circle { -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(.4, 0, .2, 1)infinite both; animation: mdl-spinner__left-spin 1333ms cubic-bezier(.4, 0, .2, 1)infinite both } .mdl-spinner__right .mdl-spinner__circle { left: -100%; border-left-color: transparent !important; -webkit-transform: rotate(-129deg); -ms-transform: rotate(-129deg); transform: rotate(-129deg) } .mdl-spinner.is-active .mdl-spinner__right .mdl-spinner__circle { -webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(.4, 0, .2, 1)infinite both; animation: mdl-spinner__right-spin 1333ms cubic-bezier(.4, 0, .2, 1)infinite both } @-webkit-keyframes mdl-spinner__left-spin { from { -webkit-transform: rotate(130deg); transform: rotate(130deg) } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } to { -webkit-transform: rotate(130deg); transform: rotate(130deg) } } @keyframes mdl-spinner__left-spin { from { -webkit-transform: rotate(130deg); transform: rotate(130deg) } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } to { -webkit-transform: rotate(130deg); transform: rotate(130deg) } } @-webkit-keyframes mdl-spinner__right-spin { from { -webkit-transform: rotate(-130deg); transform: rotate(-130deg) } 50% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } to { -webkit-transform: rotate(-130deg); transform: rotate(-130deg) } } @keyframes mdl-spinner__right-spin { from { -webkit-transform: rotate(-130deg); transform: rotate(-130deg) } 50% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } to { -webkit-transform: rotate(-130deg); transform: rotate(-130deg) } } .mdl-switch { position: relative; z-index: 1; vertical-align: middle; display: inline-block; box-sizing: border-box; width: 100%; height: 24px; margin: 0; padding: 0; overflow: visible; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .mdl-switch.is-upgraded { padding-left: 28px } .mdl-switch__input { line-height: 24px } .mdl-switch.is-upgraded .mdl-switch__input { position: absolute; width: 0; height: 0; margin: 0; padding: 0; opacity: 0; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: 0 } .mdl-switch__track { background: rgba(0, 0, 0, .26); position: absolute; left: 0; top: 5px; height: 14px; width: 36px; border-radius: 14px; cursor: pointer } .mdl-switch.is-checked .mdl-switch__track { background: rgba(63, 81, 181, .5) } .mdl-switch.is-disabled .mdl-switch__track { background: rgba(0, 0, 0, .12); cursor: auto } .mdl-switch__thumb { background: #fafafa; position: absolute; left: 0; top: 2px; height: 20px; width: 20px; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); -webkit-transition-duration: .28s; transition-duration: .28s; -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-timing-function: cubic-bezier(.4, 0, .2, 1); -webkit-transition-property: left; transition-property: left } .mdl-switch.is-checked .mdl-switch__thumb { background: #3f51b5; left: 16px; box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12) } .mdl-switch.is-disabled .mdl-switch__thumb { background: #bdbdbd; cursor: auto } .mdl-switch__focus-helper { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-4px, -4px); -ms-transform: translate(-4px, -4px); transform: translate(-4px, -4px); display: inline-block; box-sizing: border-box; width: 8px; height: 8px; border-radius: 50%; background-color: transparent } .mdl-switch.is-focused .mdl-switch__focus-helper { box-shadow: 0 0 0 20px rgba(0, 0, 0, .1); background-color: rgba(0, 0, 0, .1) } .mdl-switch.is-focused.is-checked .mdl-switch__focus-helper { box-shadow: 0 0 0 20px rgba(63, 81, 181, .26); background-color: rgba(63, 81, 181, .26) } .mdl-switch__label { position: relative; cursor: pointer; font-size: 16px; line-height: 24px; margin: 0; left: 24px } .mdl-switch.is-disabled .mdl-switch__label { color: #bdbdbd; cursor: auto } .mdl-switch__ripple-container { position: absolute; z-index: 2; top: -12px; left: -14px; box-sizing: border-box; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(circle, #fff, #000); -webkit-transition-duration: .4s; transition-duration: .4s; -webkit-transition-timing-function: step-end; transition-timing-function: step-end; -webkit-transition-property: left; transition-property: left } .mdl-switch__ripple-container .mdl-ripple { background: #3f51b5 } .mdl-switch.is-disabled .mdl-switch__ripple-container { cursor: auto } .mdl-switch.is-disabled .mdl-switch__ripple-container .mdl-ripple { background: 0 } .mdl-switch.is-checked .mdl-switch__ripple-container { cursor: auto; left: 2px } .mdl-tabs { display: block; width: 100% } .mdl-tabs__tab-bar { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: space-between; -ms-flex-line-pack: justify; align-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; height: 48px; padding: 0; margin: 0; border-bottom: 1px solid #e0e0e0 } .mdl-tabs__tab { margin: 0; border: 0; padding: 0 24px; float: left; position: relative; display: block; color: red; text-decoration: none; height: 48px; line-height: 48px; text-align: center; font-weight: 500; font-size: 14px; text-transform: uppercase; color: rgba(0, 0, 0, .54); overflow: hidden } .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active { color: rgba(0, 0, 0, .87) } .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after { height: 2px; width: 100%; display: block; content: " "; bottom: 0; left: 0; position: absolute; background: #3f51b5; -webkit-animation: border-expand .2s cubic-bezier(.4, 0, .4, 1).01s alternate forwards; animation: border-expand .2s cubic-bezier(.4, 0, .4, 1).01s alternate forwards; -webkit-transition: all 1s cubic-bezier(.4, 0, 1, 1); transition: all 1s cubic-bezier(.4, 0, 1, 1) } .mdl-tabs__tab .mdl-tabs__ripple-container { display: block; position: absolute; height: 100%; width: 100%; left: 0; top: 0; z-index: 1; overflow: hidden } .mdl-tabs__tab .mdl-tabs__ripple-container .mdl-ripple { background: #3f51b5 } .mdl-tabs__panel { display: block } .mdl-tabs.is-upgraded .mdl-tabs__panel { display: none } .mdl-tabs.is-upgraded .mdl-tabs__panel.is-active { display: block } @-webkit-keyframes border-expand { 0% { opacity: 0; width: 0 } 100% { opacity: 1; width: 100% } } @keyframes border-expand { 0% { opacity: 0; width: 0 } 100% { opacity: 1; width: 100% } } .mdl-textfield { position: relative; font-size: 16px; display: inline-block; box-sizing: border-box; width: 300px; max-width: 100%; margin: 0; padding: 20px 0 } .mdl-textfield .mdl-button { position: absolute; bottom: 20px } .mdl-textfield--align-right { text-align: right } .mdl-textfield--full-width { width: 100% } .mdl-textfield--expandable { min-width: 32px; width: auto; min-height: 32px } .mdl-textfield__input { border: 0; border-bottom: 1px solid rgba(0, 0, 0, .12); display: inline-block; font-size: 16px; margin: 0; padding: 4px 0; width: 100%; background: 16px; text-align: left; color: inherit } .mdl-textfield.is-focused .mdl-textfield__input { outline: 0 } .mdl-textfield.is-invalid .mdl-textfield__input { border-color: #de3226; box-shadow: none } .mdl-textfield.is-disabled .mdl-textfield__input { background-color: transparent; border-bottom: 1px dotted rgba(0, 0, 0, .12) } .mdl-textfield__label { bottom: 0; color: rgba(0, 0, 0, .26); font-size: 16px; left: 0; right: 0; pointer-events: none; position: absolute; top: 24px; width: 100%; overflow: hidden; white-space: nowrap; text-align: left } .mdl-textfield.is-dirty .mdl-textfield__label { visibility: hidden } .mdl-textfield--floating-label .mdl-textfield__label { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-timing-function: cubic-bezier(.4, 0, .2, 1) } .mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label { color: #3f51b5; font-size: 12px; top: 4px; visibility: visible } .mdl-textfield--floating-label.is-focused .mdl-textfield__expandable-holder .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder .mdl-textfield__label { top: -16px } .mdl-textfield--floating-label.is-invalid .mdl-textfield__label { color: #de3226; font-size: 12px } .mdl-textfield__label:after { background-color: #3f51b5; bottom: 20px; content: ''; height: 2px; left: 45%; position: absolute; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-timing-function: cubic-bezier(.4, 0, .2, 1); visibility: hidden; width: 10px } .mdl-textfield.is-focused .mdl-textfield__label:after { left: 0; visibility: visible; width: 100% } .mdl-textfield.is-invalid .mdl-textfield__label:after { background-color: #de3226 } .mdl-textfield__error { color: #de3226; position: absolute; font-size: 12px; margin-top: 3px; visibility: hidden } .mdl-textfield.is-invalid .mdl-textfield__error { visibility: visible } .mdl-textfield__expandable-holder { display: inline-block; position: relative; margin-left: 32px; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-timing-function: cubic-bezier(.4, 0, .2, 1); display: inline-block; max-width: .1px } .mdl-textfield.is-focused .mdl-textfield__expandable-holder, .mdl-textfield.is-dirty .mdl-textfield__expandable-holder { max-width: 600px } .mdl-textfield__expandable-holder .mdl-textfield__label:after { bottom: 0 } .mdl-tooltip { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; will-change: transform; z-index: 999; background: rgba(97, 97, 97, .9); border-radius: 2px; color: #fff; display: inline-block; font-size: 10px; font-weight: 500; line-height: 14px; max-width: 170px; position: fixed; top: -500px; left: -500px; padding: 8px; text-align: center } .mdl-tooltip.is-active { -webkit-animation: pulse 200ms cubic-bezier(0, 0, .2, 1)forwards; animation: pulse 200ms cubic-bezier(0, 0, .2, 1)forwards } .mdl-tooltip--large { line-height: 14px; font-size: 14px; padding: 16px } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0 } 50% { -webkit-transform: scale(.99); transform: scale(.99) } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; visibility: visible } } @keyframes pulse { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0 } 50% { -webkit-transform: scale(.99); transform: scale(.99) } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; visibility: visible } } .mdl-shadow--2dp { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) } .mdl-shadow--3dp { box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12) } .mdl-shadow--4dp { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2) } .mdl-shadow--6dp { box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2) } .mdl-shadow--8dp { box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2) } .mdl-shadow--16dp { box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2) } .mdl-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 0 auto; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch } .mdl-grid.mdl-grid--no-spacing { padding: 0 } .mdl-cell { box-sizing: border-box } .mdl-cell--top { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start } .mdl-cell--middle { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center } .mdl-cell--bottom { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end } .mdl-cell--stretch { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch } .mdl-grid.mdl-grid--no-spacing>.mdl-cell { margin: 0 } @media(max-width:479px) { .mdl-grid { padding: 8px } .mdl-cell { margin: 8px; width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell { width: 100% } .mdl-cell--hide-phone { display: none !important } .mdl-cell--1-col { width: calc(25% - 16px) } .mdl-grid--no-spacing>.mdl-cell--1-col { width: 25% } .mdl-cell--1-col-phone.mdl-cell--1-col-phone { width: calc(25% - 16px) } .mdl-grid--no-spacing>.mdl-cell--1-col-phone.mdl-cell--1-col-phone { width: 25% } .mdl-cell--2-col { width: calc(50% - 16px) } .mdl-grid--no-spacing>.mdl-cell--2-col { width: 50% } .mdl-cell--2-col-phone.mdl-cell--2-col-phone { width: calc(50% - 16px) } .mdl-grid--no-spacing>.mdl-cell--2-col-phone.mdl-cell--2-col-phone { width: 50% } .mdl-cell--3-col { width: calc(75% - 16px) } .mdl-grid--no-spacing>.mdl-cell--3-col { width: 75% } .mdl-cell--3-col-phone.mdl-cell--3-col-phone { width: calc(75% - 16px) } .mdl-grid--no-spacing>.mdl-cell--3-col-phone.mdl-cell--3-col-phone { width: 75% } .mdl-cell--4-col { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--4-col { width: 100% } .mdl-cell--4-col-phone.mdl-cell--4-col-phone { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--4-col-phone.mdl-cell--4-col-phone { width: 100% } .mdl-cell--5-col { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--5-col { width: 100% } .mdl-cell--5-col-phone.mdl-cell--5-col-phone { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--5-col-phone.mdl-cell--5-col-phone { width: 100% } .mdl-cell--6-col { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--6-col { width: 100% } .mdl-cell--6-col-phone.mdl-cell--6-col-phone { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--6-col-phone.mdl-cell--6-col-phone { width: 100% } .mdl-cell--7-col { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--7-col { width: 100% } .mdl-cell--7-col-phone.mdl-cell--7-col-phone { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--7-col-phone.mdl-cell--7-col-phone { width: 100% } .mdl-cell--8-col { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--8-col { width: 100% } .mdl-cell--8-col-phone.mdl-cell--8-col-phone { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--8-col-phone.mdl-cell--8-col-phone { width: 100% } .mdl-cell--9-col { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--9-col { width: 100% } .mdl-cell--9-col-phone.mdl-cell--9-col-phone { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--9-col-phone.mdl-cell--9-col-phone { width: 100% } .mdl-cell--10-col { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--10-col { width: 100% } .mdl-cell--10-col-phone.mdl-cell--10-col-phone { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--10-col-phone.mdl-cell--10-col-phone { width: 100% } .mdl-cell--11-col { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--11-col { width: 100% } .mdl-cell--11-col-phone.mdl-cell--11-col-phone { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--11-col-phone.mdl-cell--11-col-phone { width: 100% } .mdl-cell--12-col { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--12-col { width: 100% } .mdl-cell--12-col-phone.mdl-cell--12-col-phone { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--12-col-phone.mdl-cell--12-col-phone { width: 100% } } @media(min-width:480px) and (max-width:839px) { .mdl-grid { padding: 8px } .mdl-cell { margin: 8px; width: calc(50% - 16px) } .mdl-grid--no-spacing>.mdl-cell { width: 50% } .mdl-cell--hide-tablet { display: none !important } .mdl-cell--1-col { width: calc(12.5% - 16px) } .mdl-grid--no-spacing>.mdl-cell--1-col { width: 12.5% } .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet { width: calc(12.5% - 16px) } .mdl-grid--no-spacing>.mdl-cell--1-col-tablet.mdl-cell--1-col-tablet { width: 12.5% } .mdl-cell--2-col { width: calc(25% - 16px) } .mdl-grid--no-spacing>.mdl-cell--2-col { width: 25% } .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet { width: calc(25% - 16px) } .mdl-grid--no-spacing>.mdl-cell--2-col-tablet.mdl-cell--2-col-tablet { width: 25% } .mdl-cell--3-col { width: calc(37.5% - 16px) } .mdl-grid--no-spacing>.mdl-cell--3-col { width: 37.5% } .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet { width: calc(37.5% - 16px) } .mdl-grid--no-spacing>.mdl-cell--3-col-tablet.mdl-cell--3-col-tablet { width: 37.5% } .mdl-cell--4-col { width: calc(50% - 16px) } .mdl-grid--no-spacing>.mdl-cell--4-col { width: 50% } .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet { width: calc(50% - 16px) } .mdl-grid--no-spacing>.mdl-cell--4-col-tablet.mdl-cell--4-col-tablet { width: 50% } .mdl-cell--5-col { width: calc(62.5% - 16px) } .mdl-grid--no-spacing>.mdl-cell--5-col { width: 62.5% } .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet { width: calc(62.5% - 16px) } .mdl-grid--no-spacing>.mdl-cell--5-col-tablet.mdl-cell--5-col-tablet { width: 62.5% } .mdl-cell--6-col { width: calc(75% - 16px) } .mdl-grid--no-spacing>.mdl-cell--6-col { width: 75% } .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet { width: calc(75% - 16px) } .mdl-grid--no-spacing>.mdl-cell--6-col-tablet.mdl-cell--6-col-tablet { width: 75% } .mdl-cell--7-col { width: calc(87.5% - 16px) } .mdl-grid--no-spacing>.mdl-cell--7-col { width: 87.5% } .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet { width: calc(87.5% - 16px) } .mdl-grid--no-spacing>.mdl-cell--7-col-tablet.mdl-cell--7-col-tablet { width: 87.5% } .mdl-cell--8-col { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--8-col { width: 100% } .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--8-col-tablet.mdl-cell--8-col-tablet { width: 100% } .mdl-cell--9-col { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--9-col { width: 100% } .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--9-col-tablet.mdl-cell--9-col-tablet { width: 100% } .mdl-cell--10-col { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--10-col { width: 100% } .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--10-col-tablet.mdl-cell--10-col-tablet { width: 100% } .mdl-cell--11-col { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--11-col { width: 100% } .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--11-col-tablet.mdl-cell--11-col-tablet { width: 100% } .mdl-cell--12-col { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--12-col { width: 100% } .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--12-col-tablet.mdl-cell--12-col-tablet { width: 100% } } @media(min-width:840px) { .mdl-grid { padding: 8px } .mdl-cell { margin: 8px; width: calc(33.3333333333% - 16px) } .mdl-grid--no-spacing>.mdl-cell { width: 33.3333333333% } .mdl-cell--hide-desktop { display: none !important } .mdl-cell--1-col { width: calc(8.3333333333% - 16px) } .mdl-grid--no-spacing>.mdl-cell--1-col { width: 8.3333333333% } .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop { width: calc(8.3333333333% - 16px) } .mdl-grid--no-spacing>.mdl-cell--1-col-desktop.mdl-cell--1-col-desktop { width: 8.3333333333% } .mdl-cell--2-col { width: calc(16.6666666667% - 16px) } .mdl-grid--no-spacing>.mdl-cell--2-col { width: 16.6666666667% } .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop { width: calc(16.6666666667% - 16px) } .mdl-grid--no-spacing>.mdl-cell--2-col-desktop.mdl-cell--2-col-desktop { width: 16.6666666667% } .mdl-cell--3-col { width: calc(25% - 16px) } .mdl-grid--no-spacing>.mdl-cell--3-col { width: 25% } .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop { width: calc(25% - 16px) } .mdl-grid--no-spacing>.mdl-cell--3-col-desktop.mdl-cell--3-col-desktop { width: 25% } .mdl-cell--4-col { width: calc(33.3333333333% - 16px) } .mdl-grid--no-spacing>.mdl-cell--4-col { width: 33.3333333333% } .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop { width: calc(33.3333333333% - 16px) } .mdl-grid--no-spacing>.mdl-cell--4-col-desktop.mdl-cell--4-col-desktop { width: 33.3333333333% } .mdl-cell--5-col { width: calc(41.6666666667% - 16px) } .mdl-grid--no-spacing>.mdl-cell--5-col { width: 41.6666666667% } .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop { width: calc(41.6666666667% - 16px) } .mdl-grid--no-spacing>.mdl-cell--5-col-desktop.mdl-cell--5-col-desktop { width: 41.6666666667% } .mdl-cell--6-col { width: calc(50% - 16px) } .mdl-grid--no-spacing>.mdl-cell--6-col { width: 50% } .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop { width: calc(50% - 16px) } .mdl-grid--no-spacing>.mdl-cell--6-col-desktop.mdl-cell--6-col-desktop { width: 50% } .mdl-cell--7-col { width: calc(58.3333333333% - 16px) } .mdl-grid--no-spacing>.mdl-cell--7-col { width: 58.3333333333% } .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop { width: calc(58.3333333333% - 16px) } .mdl-grid--no-spacing>.mdl-cell--7-col-desktop.mdl-cell--7-col-desktop { width: 58.3333333333% } .mdl-cell--8-col { width: calc(66.6666666667% - 16px) } .mdl-grid--no-spacing>.mdl-cell--8-col { width: 66.6666666667% } .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop { width: calc(66.6666666667% - 16px) } .mdl-grid--no-spacing>.mdl-cell--8-col-desktop.mdl-cell--8-col-desktop { width: 66.6666666667% } .mdl-cell--9-col { width: calc(75% - 16px) } .mdl-grid--no-spacing>.mdl-cell--9-col { width: 75% } .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop { width: calc(75% - 16px) } .mdl-grid--no-spacing>.mdl-cell--9-col-desktop.mdl-cell--9-col-desktop { width: 75% } .mdl-cell--10-col { width: calc(83.3333333333% - 16px) } .mdl-grid--no-spacing>.mdl-cell--10-col { width: 83.3333333333% } .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop { width: calc(83.3333333333% - 16px) } .mdl-grid--no-spacing>.mdl-cell--10-col-desktop.mdl-cell--10-col-desktop { width: 83.3333333333% } .mdl-cell--11-col { width: calc(91.6666666667% - 16px) } .mdl-grid--no-spacing>.mdl-cell--11-col { width: 91.6666666667% } .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop { width: calc(91.6666666667% - 16px) } .mdl-grid--no-spacing>.mdl-cell--11-col-desktop.mdl-cell--11-col-desktop { width: 91.6666666667% } .mdl-cell--12-col { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--12-col { width: 100% } .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop { width: calc(100% - 16px) } .mdl-grid--no-spacing>.mdl-cell--12-col-desktop.mdl-cell--12-col-desktop { width: 100% } } body { margin: 0 } .styleguide-demo h1 { margin: 48px 24px 0 } .styleguide-demo h1:after { content: ''; display: block; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, .5); margin-top: 24px } .styleguide-demo { opacity: 0; -webkit-transition: opacity .6s ease; transition: opacity .6s ease } .styleguide-masthead { height: 256px; background: #212121; padding: 115px 16px 0 } .styleguide-container { position: relative; max-width: 960px; width: 100% } .styleguide-title { color: #fff; bottom: auto; position: relative; font-size: 56px; font-weight: 300; line-height: 1; letter-spacing: -.02em } .styleguide-title:after { border-bottom: 0 } .styleguide-title span { font-weight: 300 } .mdl-styleguide .mdl-layout__drawer .mdl-navigation__link { padding: 10px 24px } .demosLoaded .styleguide-demo { opacity: 1 } iframe { display: block; width: 100%; border: 0 } iframe.heightSet { overflow: hidden } .demo-wrapper { margin: 24px } .demo-wrapper iframe { border: 1px solid rgba(0, 0, 0, .5) }